/* Palette: neutral graphite with no colour cast and a single blue accent. Colour is kept for
   meaning — status, and one hue per data series — so the chrome stays quiet.
   Dark is the default; a viewer with no explicit choice follows the OS, and the toggle
   stamps data-theme on <html>, winning in both directions. No rule below names a raw colour. */
:root{
  color-scheme:dark;
  --bg:#0b0c0e; --bg2:#131417; --bg3:#1b1c20; --line:#24262b; --line2:#33363c;
  --text:#ececef; --dim:#a1a1aa; --faint:#8a8a93;
  --accent:#2563eb; --accent-text:#6ea0ff; --accent-ink:#ffffff;
  --ok:#4ade80; --bad:#f87171; --warn:#fbbf24; --llm:#22d3ee; --stt:#a78bfa; --other:#fb923c;
  --hover:rgba(255,255,255,.035); --overlay:rgba(0,0,0,.6); --shadow:none;
  --radius:10px; --radius-sm:7px;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#f7f7f8; --bg2:#ffffff; --bg3:#f1f1f3; --line:#e4e4e7; --line2:#d0d0d6;
    --text:#111114; --dim:#52525b; --faint:#6b6b75;
    --accent:#2563eb; --accent-text:#1d4ed8; --accent-ink:#ffffff;
    --ok:#166534; --bad:#b91c1c; --warn:#854d0e; --llm:#0e7490; --stt:#6d28d9; --other:#c2410c;
    --hover:rgba(0,0,0,.03); --overlay:rgba(17,17,20,.4);
    --shadow:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.04);
    --radius:10px; --radius-sm:7px;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f7f8; --bg2:#ffffff; --bg3:#f1f1f3; --line:#e4e4e7; --line2:#d0d0d6;
  --text:#111114; --dim:#52525b; --faint:#6b6b75;
  --accent:#2563eb; --accent-text:#1d4ed8; --accent-ink:#ffffff;
  --ok:#166534; --bad:#b91c1c; --warn:#854d0e; --llm:#0e7490; --stt:#6d28d9; --other:#c2410c;
  --hover:rgba(0,0,0,.03); --overlay:rgba(17,17,20,.4);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.04);
  --radius:10px; --radius-sm:7px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1{font-size:1.35rem;font-weight:600;margin:0;letter-spacing:-.01em}
h2{font-size:1rem;font-weight:600;margin:0 0 .9rem;letter-spacing:-.005em}
h3{font-size:.82rem;font-weight:600;margin:1rem 0 .45rem;color:var(--dim)}
code,.mono{font-family:var(--mono);font-size:.82em}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* layout */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.rail{background:var(--bg2);border-right:1px solid var(--line);padding:1.35rem .8rem;display:flex;flex-direction:column;gap:.12rem;position:sticky;top:0;height:100vh}
.rail a{display:block;padding:.58rem .75rem;border-radius:var(--radius-sm);color:var(--dim);text-decoration:none;font-size:.92rem;transition:background .12s,color .12s}
.rail a:hover{background:var(--bg3);color:var(--text)}
.rail a.active{background:var(--bg3);color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:.5rem}
.rail-status{font-size:.75rem;color:var(--faint);padding:.4rem .65rem;border-top:1px solid var(--line)}
.wordmark{font-weight:650;letter-spacing:.18em;font-size:1.05rem;color:var(--text);padding:.25rem .75rem 1.35rem}
.wordmark.small{font-size:.95rem}
.main{min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 2rem;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
.topbar-right{display:flex;align-items:center;gap:.75rem}
.clock{color:var(--faint);font-variant-numeric:tabular-nums;font-size:.85rem}
.page{padding:1.75rem 2rem 4.5rem;max-width:1600px}
@media (max-width:820px){.shell{grid-template-columns:1fr}.rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap}.rail-foot{margin-top:0;flex-direction:row;margin-left:auto}.wordmark.small{width:100%}}

/* blocks */
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.block{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.25rem;box-shadow:var(--shadow)}
.block>h2{padding-bottom:.7rem;border-bottom:1px solid var(--line);margin-bottom:.95rem}
.block.kpi>h2,.block.plain>h2{padding-bottom:0;border-bottom:0}
.block.tight{padding:.75rem 1rem}
.kpi{display:flex;flex-direction:column;gap:.15rem}
.kpi .n{font-size:1.8rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1;order:2;letter-spacing:-.015em}
.kpi .l{color:var(--dim);font-size:.8rem;order:1;font-weight:500}
.kpi .l::first-letter{text-transform:uppercase}
.kpi .s{color:var(--faint);font-size:.78rem;margin-top:.2rem;order:3}
.row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.muted{color:var(--dim)}.faint{color:var(--faint)}.small{font-size:.8rem}
.right{text-align:right}
.nowrap{white-space:nowrap}
.empty{color:var(--faint);padding:1.2rem;text-align:center}

/* status rail (overview hero) */
.status-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem;margin-bottom:1.5rem}
.svc{background:var(--bg2);border:1px solid var(--line);border-left:4px solid var(--faint);border-radius:var(--radius);padding:1rem 1.15rem;box-shadow:var(--shadow)}
.svc.ok{border-left-color:var(--ok)}.svc.degraded{border-left-color:var(--warn)}.svc.unreachable{border-left-color:var(--bad)}.svc.disabled{opacity:.55}
.svc .name{font-weight:600}
.svc .kind{font-size:.72rem;padding:.05rem .4rem;border-radius:4px;background:var(--bg3);color:var(--dim);margin-left:.4rem}
.svc .live{font-family:var(--mono);font-size:.8rem;color:var(--dim);margin-top:.35rem;display:flex;gap:.9rem;flex-wrap:wrap}
.svc .live b{color:var(--text);font-weight:500}
.dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--faint);margin-right:.4rem;vertical-align:middle}
.dot.ok{background:var(--ok)}.dot.degraded{background:var(--warn)}.dot.unreachable{background:var(--bad)}

/* gpu bars */
.bar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin:.35rem 0}
.bar i{display:block;height:100%;background:var(--llm);border-radius:4px}
.bar.hot i{background:var(--warn)}
.hbars{display:flex;flex-direction:column;gap:.35rem}
.hbar{display:grid;grid-template-columns:150px 1fr 70px;gap:.6rem;align-items:center;font-size:.82rem}
.hbar .t{height:10px;background:var(--bg3);border-radius:3px;overflow:hidden}
.hbar .t i{display:block;height:100%;background:var(--llm)}
.hbar .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim)}
.spark{display:flex;align-items:flex-end;gap:2px;height:56px}
.spark i{flex:1;background:var(--llm);border-radius:2px 2px 0 0;min-height:2px}
.spark i.err{background:var(--bad)}

/* tables */
.twrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;color:var(--dim);font-weight:500;font-size:.78rem;padding:.7rem .95rem;border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:0}
td{padding:.68rem .95rem;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--hover)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:.14rem .6rem;border-radius:999px;font-size:.72rem;font-weight:500;border:1px solid var(--line2);color:var(--dim)}
.pill.ok{color:var(--ok);border-color:var(--ok)}.pill.bad{color:var(--bad);border-color:var(--bad)}.pill.warn{color:var(--warn);border-color:var(--warn)}
.pill.llm{color:var(--llm);border-color:var(--llm)}.pill.stt{color:var(--stt);border-color:var(--stt)}.pill.tts,.pill.other{color:var(--other);border-color:var(--other)}
.key{font-family:var(--mono);font-size:.8rem;color:var(--dim)}

/* forms */
.btn{background:var(--bg3);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:.48rem .9rem;cursor:pointer;color:var(--text);font-size:.88rem;transition:border-color .12s,filter .12s}
.btn:hover{border-color:var(--dim)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:500}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.ghost{background:transparent}
.btn.sm{padding:.22rem .55rem;font-size:.78rem}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
label{display:block;color:var(--dim);font-size:.78rem;margin:.75rem 0 .3rem;font-weight:500}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:.52rem .7rem}
input:focus,select:focus,textarea:focus{border-color:var(--accent-text);outline:none}
textarea{min-height:90px;font-family:var(--mono);font-size:.8rem}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;align-items:end;margin-bottom:.8rem}
.filters label{margin-top:0}
.form-error{color:var(--bad);font-size:.85rem}
.checks label{display:inline-flex;align-items:center;gap:.4rem;margin-right:1rem}
.checks input{width:auto}

/* modal + toast */
.overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}
.modal{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:1.25rem 1.4rem;width:min(560px,100%);max-height:90vh;overflow:auto}
.modal h2{margin-bottom:.2rem}
.modal .actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}
.keybox{font-family:var(--mono);font-size:.85rem;background:var(--bg);border:1px dashed var(--accent);padding:.7rem;border-radius:6px;word-break:break-all;margin:.6rem 0}
.toast{position:fixed;bottom:1.2rem;right:1.2rem;background:var(--bg3);border:1px solid var(--line2);padding:.6rem .9rem;border-radius:8px;z-index:60}
.toast.bad{border-color:var(--bad)}

/* docs / test */
pre.code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:.75rem;overflow:auto;font-family:var(--mono);font-size:.78rem;white-space:pre-wrap}
.out{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:.75rem;min-height:80px;white-space:pre-wrap;font-family:var(--mono);font-size:.8rem}

/* login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:2rem;width:min(380px,92vw);box-shadow:var(--shadow)}
.login-card .wordmark{padding-left:0}
.login-sub{color:var(--dim);margin:0 0 1rem;font-size:.9rem}
.login-card .btn{margin-top:1rem}
.login-foot{color:var(--faint);font-size:.75rem;margin:1rem 0 0}

/* charts + dense additions */
.chart{position:relative;height:210px}.chart.tall{height:290px}.chart.short{height:130px}
.g5{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.g6{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.kpi.mini .n{font-size:1.45rem}
.kpi .d{font-size:.75rem;margin-top:.15rem;order:4}.d.up{color:var(--ok)}.d.bad{color:var(--bad)}
.subhead{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:2rem 0 .9rem;padding-top:.3rem}
.subhead h2{margin:0}
.crumb{color:var(--dim);font-size:.85rem;margin-bottom:.6rem}.crumb a{color:var(--accent-text);text-decoration:none}
a.lnk{color:var(--accent-text);text-decoration:none}a.lnk:hover{text-decoration:underline}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.seg button{background:transparent;border:0;padding:.3rem .6rem;color:var(--dim);cursor:pointer}
.seg button.on{background:var(--bg3);color:var(--text)}
table.dense td,table.dense th{padding:.5rem .8rem;font-size:.83rem}
.okbar{display:flex;gap:1px;height:14px}.okbar i{flex:1;background:var(--ok)}.okbar i.part{background:var(--warn)}.okbar i.down{background:var(--bad)}.okbar i.none{background:var(--bg3)}

/* theme toggle */
.theme-btn{display:inline-flex;align-items:center;gap:.35rem;background:var(--bg3);border:1px solid var(--line2);border-radius:6px;padding:.3rem .55rem;cursor:pointer;color:var(--dim);font-size:.8rem}
.theme-btn:hover{color:var(--text);border-color:var(--dim)}
.theme-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* cost page */
.cost-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-bottom:1rem}
.cost-hero .block{padding:.9rem 1rem}
.money{font-size:1.7rem;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.1}
.money.save{color:var(--ok)}.money.over{color:var(--bad)}
.money.sm{font-size:1.25rem}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center}
.vs .side{text-align:center;padding:.5rem}
.vs .mid{color:var(--faint);font-size:.8rem}
.assume{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.5rem .9rem;font-size:.82rem}
.assume div{display:flex;justify-content:space-between;gap:.5rem;border-bottom:1px dotted var(--line);padding:.2rem 0}
.assume b{font-weight:500;font-variant-numeric:tabular-nums}
.note{background:var(--bg3);border-left:3px solid var(--warn);border-radius:0 6px 6px 0;padding:.6rem .8rem;font-size:.82rem;color:var(--dim);margin:.6rem 0}
.note.good{border-left-color:var(--ok)}
.note b{color:var(--text)}
.meter{height:10px;background:var(--bg3);border-radius:5px;overflow:hidden;margin:.4rem 0;display:flex}
.meter i{display:block;height:100%}
.meter i.a{background:var(--llm)}.meter i.b{background:var(--other)}

/* docs page */
.doc-toc{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem}
.doc-toc a{padding:.25rem .6rem;border:1px solid var(--line2);border-radius:999px;font-size:.8rem;color:var(--dim);text-decoration:none}
.doc-toc a:hover{color:var(--text);border-color:var(--dim)}
.doc-model{margin-bottom:1.25rem}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.35rem .9rem;font-size:.82rem;margin:.5rem 0}
.spec div{display:flex;justify-content:space-between;gap:.6rem;border-bottom:1px dotted var(--line);padding:.22rem 0}
.spec span:first-child{color:var(--dim)}
.spec span:last-child{text-align:right}
.tags{display:flex;gap:.3rem;flex-wrap:wrap;margin:.4rem 0}
.tag{font-size:.72rem;padding:.1rem .45rem;border-radius:4px;background:var(--bg3);color:var(--dim);border:1px solid var(--line)}
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin:.6rem 0 0}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:.35rem .7rem;color:var(--dim);cursor:pointer;font-size:.82rem}
.tabs button.on{color:var(--text);border-bottom-color:var(--accent-text)}
.copy{float:right;font-size:.72rem;padding:.1rem .45rem}

/* page lede + rhythm */
.lede{color:var(--dim);font-size:.92rem;max-width:78ch;margin:0 0 1.4rem}
.page>.grid+.grid,.page>.grid+.block,.page>.block+.grid,.page>.block+.block{margin-top:1.1rem}
.topbar h1+.sub{color:var(--faint);font-size:.8rem;margin-left:.6rem}

/* capability tags */
.tag{font-size:.75rem;padding:.2rem .55rem;border-radius:6px;background:var(--bg3);color:var(--dim);border:1px solid var(--line)}
.tag.known{border-color:var(--line2);color:var(--text);cursor:help}
.feat{margin:.7rem 0 .2rem;font-size:.85rem}
.feat summary{cursor:pointer;color:var(--accent-text);padding:.25rem 0;list-style:none}
.feat summary::-webkit-details-marker{display:none}
.feat summary::before{content:'\25B8';display:inline-block;margin-right:.45rem;transition:transform .15s}
.feat[open] summary::before{transform:rotate(90deg)}
.feat dl{margin:.5rem 0 0;padding:.2rem 0 0;border-top:1px solid var(--line)}
.feat dt{font-weight:600;margin:.7rem 0 .2rem;font-size:.84rem}
.feat dd{margin:0 0 .1rem;color:var(--dim);font-size:.84rem;line-height:1.5}
.feat dd code{background:var(--bg3);padding:.05rem .3rem;border-radius:4px;color:var(--text)}

/* model cards */
.g-models{grid-template-columns:repeat(auto-fit,minmax(440px,1fr))}
.model-card{display:flex;flex-direction:column}
.card-head{display:flex;align-items:center;gap:.5rem;min-width:0}
.card-head .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
.card-head .head-end{margin-left:auto;flex-shrink:0}
.model-card .sub{font-size:.8rem;color:var(--dim);margin:.35rem 0 0;overflow-wrap:anywhere}
/* four figures across, not four stacked rows — .g4 collapses to one column inside a card */
.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin:.9rem 0;padding:.8rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpi-row .kpi .n{font-size:1.2rem}
.kpi-row .kpi .l{font-size:.62rem;letter-spacing:.05em}
/* fixed label column keeps rows aligned across cards; values wrap instead of overflowing */
.spec.rows{display:block;margin:0}
.spec.rows>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.85rem;align-items:baseline;padding:.4rem 0;border-bottom:1px dotted var(--line)}
.spec.rows>div:last-child{border-bottom:0}
.spec.rows span:last-child{text-align:left;overflow-wrap:anywhere}
.mono.wrap{overflow-wrap:anywhere;word-break:break-word}
.card-actions{margin-top:auto;padding-top:.9rem}

/* insights */
.recs{list-style:none;counter-reset:r;margin:0;padding:0}
.rec{border-left:3px solid var(--line2);padding:.1rem 0 .1rem 1rem;margin:0 0 1.1rem}
.rec.high{border-left-color:var(--bad)}.rec.medium{border-left-color:var(--warn)}.rec.low{border-left-color:var(--llm)}
.rec-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem}
.rec p{margin:.2rem 0 .45rem;color:var(--dim);max-width:80ch;line-height:1.55}
.rec-ev{font-size:.78rem;color:var(--faint);background:var(--bg3);display:inline-block;padding:.18rem .5rem;border-radius:5px}
.hprof{display:flex;align-items:flex-end;gap:2px;height:150px;padding-top:.4rem}
.hprof i{flex:1;background:var(--llm);border-radius:3px 3px 0 0;min-height:2px;opacity:.75}
.hprof i.peak{background:var(--accent);opacity:1}
.hprof-x{display:flex;justify-content:space-between;font-size:.7rem;color:var(--faint);margin-top:.35rem}
tr.on td{background:var(--hover)}

/* architecture */
.arch{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:.6rem;align-items:start;overflow-x:auto;padding:.4rem 0}
.arch-col{min-width:0}
.arch-col h3{margin:0 0 .6rem}
.arch-arrow{color:var(--faint);font-size:1.3rem;align-self:center;padding:0 .1rem}
.node{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--llm);border-radius:var(--radius-sm);padding:.6rem .75rem;margin-bottom:.55rem;box-shadow:var(--shadow)}
.node b{display:block;font-size:.88rem;overflow-wrap:anywhere}
.node span{display:block;font-size:.76rem;color:var(--dim);margin-top:.15rem;overflow-wrap:anywhere}
.node.self{border-left-color:var(--accent)}
.node.edge{border-left-color:var(--other)}
.node.gpu{border-left-color:var(--ok)}
.flow{margin:0;padding-left:1.2rem;color:var(--dim);line-height:1.7}
.flow li{margin-bottom:.5rem}
.flow b{color:var(--text)}
@media (max-width:1100px){.arch{grid-template-columns:1fr}.arch-arrow{display:none}}

.plain-list{list-style:none;margin:0;padding:0}
.plain-list li{padding:.45rem 0;border-bottom:1px solid var(--line)}
.plain-list li:last-child{border-bottom:0}

.wordmark::after{content:'';display:inline-block;width:.38rem;height:.38rem;border-radius:50%;background:var(--accent);margin-left:.35rem;vertical-align:.12rem}