:root{
  --bg:#0a1120; --bg2:#0e1628; --card:#131e33; --line:#233450;
  --ink:#e8eef7; --muted:#9fb0c9; --accent:#39d3ee; --gold:#e8b64c;
  --ok:#57d98a; --err:#f0727a; --radius:14px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
/* `hidden` must win over component display rules (.ml-row etc.), else
   mode toggles that rely on the hidden attribute silently stop working. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6}
a{color:var(--accent)}
.dev-banner{background:repeating-linear-gradient(45deg,#3a2c07,#3a2c07 18px,#2c2205 18px,#2c2205 36px);color:var(--gold);text-align:center;font-weight:700;letter-spacing:.06em;padding:.55rem 1rem;font-size:.85rem;border-bottom:1px solid #6b5312}
.site-header{display:flex;align-items:center;gap:.9rem;padding:.8rem 1.2rem;background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.brand-mark{border-radius:50%;background:#000}
.brand-text{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}
.brand-text strong{font-size:1.25rem;letter-spacing:.02em}
/* Wordmark lockup: gradient brand name paired with emblem art. */
.brand-text strong.wordmark{background:linear-gradient(90deg,#e8eef7 30%,#39d3ee 70%,#e8b64c);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;letter-spacing:.04em}
.brand-text span{color:var(--muted);font-size:.8rem}
.hero-figure{margin:0}
.hero-caption{font-size:.8rem;color:var(--muted);text-align:center;padding:.4rem 0 0}
.hero-caption strong{color:var(--gold)}
.tabs{display:flex;gap:.25rem;flex-wrap:wrap}
.tabs button{background:transparent;border:1px solid transparent;color:var(--muted);padding:.45rem .7rem;border-radius:9px;cursor:pointer;font-size:.92rem}
.tabs button:hover{color:var(--ink);border-color:var(--line)}
.tabs button[aria-selected="true"]{color:#06121f;background:var(--accent);font-weight:700}
.menu{position:relative}
.menu>button.active{color:var(--ink);border-color:var(--accent)}
.menu-items{position:absolute;top:calc(100% + 6px);left:0;min-width:14rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.35rem;z-index:20;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.menu-items button{display:block;width:100%;text-align:left}
main{max-width:62rem;margin:0 auto;padding:2rem 1.2rem 3rem}
h1{font-size:2rem;margin:.2rem 0 1rem}
.lede{color:var(--muted);font-size:1.1rem;max-width:44rem}
.kicker{color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;margin:0}
.hero{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:2rem;align-items:center;margin-bottom:2rem}
.hero-art{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);background:#000}
.hero h1{font-size:2.4rem;line-height:1.15}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.5rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.card h2{font-size:1.1rem;margin:.1rem 0 .5rem;color:var(--accent)}
.card p{color:var(--muted);margin:.3rem 0 .8rem}
.card-thumb{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);margin-bottom:.7rem;background:#000;aspect-ratio:4/3;object-fit:cover}
.tab-hero{width:100%;max-width:52rem;height:auto;border-radius:var(--radius);border:1px solid var(--line);margin:1rem 0;background:#000;aspect-ratio:16/9;object-fit:cover}
.steps{counter-reset:step;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.2rem 1.2rem 3rem}
.steps li{margin:.7rem 0}
.steps li::marker{color:var(--accent);font-weight:700}
.big-link{font-size:1.25rem;font-weight:700}
.posts{display:grid;gap:1rem;margin-top:1rem}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem}
.post h2{margin:.1rem 0 .3rem;font-size:1.2rem}
.post time{color:var(--muted);font-size:.82rem}
.post .body{white-space:pre-wrap}
.news-item .meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.2rem 0 .4rem}
.src-badge{background:#1b2a45;border:1px solid var(--line);color:var(--accent);border-radius:20px;padding:.05rem .6rem;font-size:.78rem;font-weight:700}
.news-item time{color:var(--muted);font-size:.82rem}
.news-item p{color:var(--muted);margin:.4rem 0 .6rem}
.mode-toggle{display:flex;gap:.5rem;margin:1rem 0}
.mode-toggle button{background:transparent;border:1px solid var(--line);color:var(--muted)}
.mode-toggle button.on{background:var(--accent);color:#06121f}
.ml-row{display:flex;gap:1rem;align-items:end;flex-wrap:wrap}
.ml-row .grow{flex:1;min-width:12rem}
.ml-row button{white-space:nowrap}
.drop{border:2px dashed var(--line);border-radius:var(--radius);padding:1.6rem;text-align:center;color:var(--muted);margin:1rem 0;max-width:40rem}
.drop.over{border-color:var(--accent);color:var(--ink)}
.preview{max-width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);margin-top:1rem;background:#000}
.top5{display:grid;grid-template-columns:minmax(8rem,16rem) 1fr 4rem;gap:.6rem;align-items:center;margin:.35rem 0;max-width:40rem}
.top5 .bar{background:#1b2a45;border-radius:6px;height:.7rem;overflow:hidden}
.top5 .bar i{display:block;height:100%;background:var(--accent)}
.top5 b{text-align:right}
.chat{background:#0b1322;border:1px solid var(--line);border-radius:var(--radius);padding:1rem;max-width:44rem;min-height:4rem;max-height:22rem;overflow-y:auto;margin:1rem 0}
.chat p{margin:.5rem 0}
.chat .stream{white-space:pre-wrap}
progress{width:100%;max-width:34rem;height:.8rem;margin-top:.6rem}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
#device-check{margin:1rem 0;max-width:44rem}
#device-check summary{cursor:pointer;color:var(--muted)}
#device-check table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:.5rem}
#device-check td{border-bottom:1px solid var(--line);padding:.25rem .4rem}
#device-check td.ok{color:var(--ok);font-weight:700}
#device-check td.bad{color:var(--err);font-weight:700}
#secure-note a{color:#fff;font-weight:700}
select,input,textarea{background:#0b1322;border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:.6rem .7rem}
form{display:grid;gap:.8rem;max-width:34rem;margin-top:1rem}
label{display:grid;gap:.3rem;font-weight:600}
input,textarea,button{font:inherit}
input,textarea{background:#0b1322;border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:.6rem .7rem}
input:focus,textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
button{background:var(--accent);color:#06121f;font-weight:700;border:0;border-radius:9px;padding:.6rem 1rem;cursor:pointer}
button:hover{filter:brightness(1.08)}
.inline-form{grid-template-columns:1fr auto;display:grid}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-msg{min-height:1.4em;font-weight:600}
.form-msg.ok{color:var(--ok)}
.form-msg.err{color:var(--err)}
.feed-links{color:var(--muted);font-size:.92rem}
footer{display:flex;align-items:center;gap:.6rem;justify-content:center;padding:1.4rem;color:var(--muted);border-top:1px solid var(--line);font-size:.88rem;flex-wrap:wrap;text-align:center}
footer img{border-radius:50%}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:640px){.hero{grid-template-columns:1fr}.hero h1{font-size:1.9rem}main{padding:1.4rem .9rem 2.4rem}}