:root{--ink:#171717;--muted:#8a8a8a;--line:#e6e6e6;--soft:#f7f7f7;--shadow:0 12px 36px rgba(0,0,0,.1)}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{color:var(--ink);background:#fff;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.page{width:min(680px,calc(100% - 32px));margin:0 auto;padding:calc(26px + env(safe-area-inset-top)) 0 calc(48px + env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:baseline;gap:9px;margin-bottom:34px}
.brand{color:var(--ink);font-size:20px;font-weight:650;letter-spacing:-.025em;text-decoration:none}
.current-stream{color:#aaa;font-size:13px}
.composer{position:relative;padding:6px;border:1px solid var(--line);border-radius:16px;background:#fff}
.capture-row{display:flex;align-items:flex-end;gap:4px}
.capture-tools{display:flex}
.composer textarea{flex:1;min-height:40px;max-height:130px;padding:9px 8px 7px;resize:none;border:0;outline:0;background:transparent;font-size:15px;line-height:1.4}
.composer textarea::placeholder{color:#999}
.capture-tool,.capture-submit{display:grid;flex:0 0 auto;width:40px;height:40px;place-items:center;border:0;border-radius:11px}
.capture-tool{background:transparent;color:#777}
.capture-tool:hover{background:var(--soft);color:var(--ink)}
.capture-tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.capture-tool.recording{background:#e85454;color:#fff;animation:pulse 1s infinite}
.capture-tool:disabled{opacity:.3;cursor:not-allowed}
.capture-submit{background:var(--ink);color:#fff;font-size:20px}
.capture-preview{position:relative;margin:10px 8px 4px;width:76px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#fff}
.capture-preview img{display:block;width:66px;height:66px;object-fit:cover;border-radius:10px}
.capture-preview button{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border:0;border-radius:50%;background:var(--ink);color:#fff}
.stream{margin-top:34px}
.reflection{padding:18px 4px;border-bottom:1px solid #f0f0f0;outline:0}
.reflection:first-child{padding-top:4px}
.reflection-event{margin-top:6px;color:#8a8a8a;font-size:12px;line-height:1.5}
.reflection-text{font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.source-link{color:#666;font-size:13px;text-decoration:underline;text-underline-offset:2px}
.stream-navigation{display:flex;align-items:baseline;gap:8px;position:relative}
.stream-navigation summary{cursor:pointer;list-style:none;color:#555}
.stream-navigation summary::-webkit-details-marker{display:none}
.stream-directory{position:absolute;left:0;right:0;z-index:1;padding:12px;background:#fff;border:1px solid var(--line);border-radius:8px}
.stream-directory nav{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0}
.stream-directory a{text-transform:capitalize}
.stream-link{color:#555;text-decoration:none}.stream-link:hover{text-decoration:underline}
.reflection-photo{display:block;width:min(100%,440px);max-height:420px;margin-top:12px;border-radius:10px;object-fit:cover}
@keyframes pulse{50%{transform:scale(.9);opacity:.75}}
@media(max-width:760px){.page{width:calc(100% - 28px);padding-top:calc(20px + env(safe-area-inset-top))}.topbar{margin-bottom:24px}.reflection{padding-left:2px;padding-right:2px}.capture-tool{width:36px}}

.stream-options{display:flex;gap:16px;margin-top:18px}
.stream-options button,.post-action{padding:0;border:0;background:none;color:#999;font:inherit;font-size:12px;cursor:pointer}
.stream-options button[aria-pressed="true"]{color:#333}
.post-action{margin-left:12px}
#status:empty{display:none}