:root {
  --ink:#0a0a0a; --paper:#fff; --n-50:#fafafa; --n-100:#f5f5f5; --n-200:#e5e5e5; --n-300:#d4d4d4;
  --n-400:#a3a3a3; --n-500:#737373; --n-800:#262626; --n-900:#171717; --accent:#22c55e;
  --font-sans:'Archivo',-apple-system,ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --bg:var(--paper); --fg:var(--ink); --muted:var(--n-500); --line:var(--n-200); --surface:var(--n-50); --code:var(--n-100);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:var(--n-900); --fg:#f5f5f5; --muted:var(--n-400); --line:var(--n-800); --surface:#1f1f1f; --code:#111; }
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--bg); color:var(--fg); font-family:var(--font-sans); font-weight:300; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.wrap { max-width:52rem; margin:0 auto; padding:0 1.25rem; }
.top { position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.7rem; padding-bottom:.7rem; flex-wrap:wrap; }
.brand { text-decoration:none; font-family:var(--font-mono); font-weight:500; letter-spacing:-.02em; }
.brand span { color:var(--muted); font-weight:400; margin-left:.4rem; }
.toggles { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; font-size:.85rem; color:var(--muted); }
.toggles label { display:flex; align-items:center; gap:.35rem; cursor:pointer; user-select:none; }
.toggles input { accent-color:var(--fg); }
.btn { font:inherit; font-size:.8rem; padding:.3rem .7rem; border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; border-radius:0; }
.btn:hover { border-color:var(--fg); }
.meta { padding:2.5rem 0 1.5rem; border-bottom:1px solid var(--line); }
h1 { font-weight:300; letter-spacing:-.035em; font-size:1.7rem; line-height:1.15; margin:0 0 .5rem; overflow-wrap:anywhere; }
.stats { margin:0; color:var(--muted); font-family:var(--font-mono); font-size:.78rem; }
.stats code { font-family:inherit; }
.convo { padding:1rem 0 3rem; }
.turn { padding:1.5rem 0; border-bottom:1px solid var(--line); }
.turn:last-child { border-bottom:0; }
.who { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 .5rem; }
.msg { overflow-wrap:anywhere; }
.msg.user { white-space:pre-wrap; font-weight:400; }
.msg.user pre { white-space:pre; }
.msg p:first-child { margin-top:0; } .msg p:last-child { margin-bottom:0; }
.msg pre { background:var(--code); border:1px solid var(--line); padding:.75rem .9rem; overflow-x:auto; font-family:var(--font-mono); font-size:.8rem; line-height:1.5; }
.msg code { font-family:var(--font-mono); font-size:.85em; background:var(--code); padding:.1em .3em; }
.msg pre code { background:none; padding:0; font-size:inherit; }
.msg h1,.msg h2,.msg h3 { font-weight:400; letter-spacing:-.02em; margin:1.2em 0 .4em; }
.msg h1{font-size:1.3rem}.msg h2{font-size:1.15rem}.msg h3{font-size:1rem}
.msg table { border-collapse:collapse; font-size:.9em; display:block; overflow-x:auto; }
.msg th,.msg td { border:1px solid var(--line); padding:.3rem .6rem; text-align:left; }
.msg blockquote { margin:0; padding-left:.9rem; border-left:2px solid var(--line); color:var(--muted); }
.msg img { max-width:100%; }
.extra { display:none; margin:.75rem 0; }
.extra.on { display:block; }
.mid { color:var(--muted); font-style:italic; }
.mid .msg { font-style:normal; color:var(--muted); }
.tool { font-family:var(--font-mono); font-size:.78rem; border-left:2px solid var(--line); padding:.35rem 0 .35rem .8rem; margin:.5rem 0; }
.tool summary { cursor:pointer; color:var(--muted); list-style:none; }
.tool summary::before { content:"▸ "; }
.tool[open] summary::before { content:"▾ "; }
.tool .name { color:var(--fg); font-weight:500; }
.tool pre { margin:.4rem 0 0; background:var(--code); border:1px solid var(--line); padding:.5rem .7rem; overflow-x:auto; white-space:pre-wrap; max-height:22rem; overflow-y:auto; }
.tool .err { color:#dc2626; }
.think { border-left:2px dashed var(--line); padding:.35rem 0 .35rem .8rem; margin:.5rem 0; color:var(--muted); font-size:.85rem; }
.think summary { cursor:pointer; list-style:none; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.think pre { white-space:pre-wrap; font-family:inherit; font-size:inherit; margin:.4rem 0 0; }
.final-label { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:.9rem 0 .35rem; }
.notice { color:var(--muted); font-size:.85rem; }
.loading { color:var(--muted); }
.foot { padding:2rem 1.25rem 3rem; color:var(--muted); font-size:.8rem; border-top:1px solid var(--line); }
@media (max-width:640px){ .top .wrap{padding-top:.5rem;padding-bottom:.5rem} h1{font-size:1.35rem} .toggles{gap:.6rem;font-size:.8rem} }

.status { display:inline-block; margin-right:.6rem; padding:.05rem .45rem; border:1px solid var(--line); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.status.on { border-color:var(--accent); color:var(--accent); }
.status.on::before { content:"● "; }
.status.off { color:var(--muted); }
.via { font-weight:400; letter-spacing:0; text-transform:none; opacity:.8; }
.pending { font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); font-style:italic; }
.msg.viewer { border-left:2px solid var(--accent); padding-left:.8rem; }
.turn.from-viewer .who, .turn.from-channel .who { color:var(--fg); }
.claude { margin-top:1rem; }
.working { animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity:.3; } }
.chat { position:sticky; bottom:0; background:var(--bg); border-top:1px solid var(--line); padding:.9rem 1.25rem 1rem; }
.chat .who { margin-bottom:.4rem; }
.chat-row { display:flex; gap:.5rem; align-items:center; margin:.4rem 0; flex-wrap:wrap; }
.chat input, .chat textarea { font:inherit; font-size:.9rem; color:var(--fg); background:var(--surface); border:1px solid var(--line); padding:.4rem .6rem; border-radius:0; }
.chat input { width:14rem; max-width:100%; }
.chat textarea { width:100%; resize:vertical; }
.chat input:focus, .chat textarea:focus { outline:none; border-color:var(--fg); }
.chat-note { font-size:.8rem; color:var(--muted); }
.chat-note.err { color:#dc2626; }