:root { --bg:#fff; --fg:#16181d; --dim:#79808d; --line:#e8eaee; --accent:#06c; --chip:#eef1f6; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14161a; --fg:#e6e8ec; --dim:#8b93a1; --line:#262a31; --accent:#7aa7ff; --chip:#232830; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); line-height:1.55;
       font-family:system-ui,-apple-system,sans-serif; }
a { color:var(--accent); text-decoration:none; }
nav.bar { position:sticky; top:0; z-index:5; background:var(--bg);
          border-bottom:1px solid var(--line); }
nav.bar .row1 { display:flex; align-items:center; gap:.5rem; padding:.5rem .8rem; }
nav.bar .row2 { display:flex; justify-content:space-between; gap:.6rem;
                padding:.3rem .8rem; border-top:1px solid var(--line);
                font-size:.78rem; color:var(--dim); }
nav.bar .row2 a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:48%; }
.seg { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; font-size:.8rem; }
.seg button { border:0; padding:.25rem .55rem; background:var(--bg); color:var(--dim); font:inherit; }
.seg button.on { background:var(--accent); color:#fff; }
.btn { border:1px solid var(--line); border-radius:8px; padding:.25rem .55rem;
       background:var(--bg); color:var(--fg); font:inherit; font-size:.8rem; }
.btn.chat { margin-left:auto; background:var(--accent); border-color:var(--accent); color:#fff; }
main { max-width:42rem; margin:0 auto; padding:0 1rem 3rem; }
#filter { width:100%; font-size:1rem; padding:.5rem; margin:.6rem 0;
          border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); }
ul#list { list-style:none; margin:0; padding:0; }
ul#list li { display:flex; align-items:baseline; gap:.4rem; padding:.35rem 0;
             border-bottom:1px solid var(--line); font-size:.92rem; }
ul#list li a { flex:1; }
ul#list .d { font-size:.72rem; color:var(--dim); white-space:nowrap; }
ul#list li.topic { flex-wrap:wrap; padding:.5rem 0; }
ul#list li.topic a { font-weight:600; }
ul#list .scope { flex-basis:100%; font-size:.8rem; color:var(--dim); line-height:1.4; }
.group { position:sticky; top:0; background:var(--chip); color:var(--dim);
         font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
         padding:.2rem .5rem; margin:.6rem 0 0; }
.badge { background:var(--chip); color:var(--dim); border-radius:4px;
         padding:.05rem .3rem; font-size:.66rem; }
article h1 { font-size:1.4rem; margin:.8rem 0 .2rem; }
article .meta { color:var(--dim); font-size:.8rem; margin-bottom:1rem; }
article .meta a { margin-right:.6rem; }
article pre { background:var(--chip); padding:.6rem; overflow:auto; }
article code { background:var(--chip); padding:.1rem .3rem; border-radius:3px; }
article pre code { padding:0; background:none; }
article img { max-width:100%; }
article table { border-collapse:collapse; display:block; overflow-x:auto; }
article td, article th { border:1px solid var(--line); padding:.3rem .6rem; }
article p.tags { color:var(--dim); font-size:.78rem; background:var(--chip);
                  display:inline-block; padding:.2rem .5rem; border-radius:4px; }
#article { transition:transform .12s ease-out, opacity .12s ease-out; }
#article.slide-left { transform:translateX(-8%); opacity:.3; }
#article.slide-right { transform:translateX(8%); opacity:.3; }

/* Voice (static/voice.js, token holders only): Talk, a notice line, the live bar. */
.btn.talk { cursor:pointer; }
.btn.talk:disabled { opacity:.6; }
nav.bar .voice-note { padding:.3rem .8rem; border-top:1px solid var(--line);
                      font-size:.78rem; color:var(--dim); }
nav.bar .voice-note:empty { display:none; }
nav.bar .live { display:flex; align-items:center; gap:.5rem; padding:.35rem .8rem;
                border-top:1px solid var(--line); font-size:.8rem; }
nav.bar .live[hidden] { display:none; }
nav.bar .live-dot { flex:none; width:.55rem; height:.55rem; border-radius:50%; background:#d33; }
nav.bar .live-status { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
nav.bar .live-cost { color:var(--dim); font-variant-numeric:tabular-nums; }