/* MoE Gauge Defragmentation — blackboard research aesthetic
   Two accents: vermillion (learned signal) + pale cyan (SRHT floor).
   Dark default, light via [data-theme="light"]. */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #0e1013;
  --bg-2: #151821;
  --panel: #11141b;
  --fg: #e9e6dc;
  --fg-2: #b6b1a0;
  --fg-dim: #7d7a6d;
  --rule: #2a2d37;
  --rule-2: #1d2029;
  --accent: oklch(0.72 0.17 45);        /* vermillion — learned */
  --accent-dim: oklch(0.55 0.13 45);
  --cool: oklch(0.78 0.08 220);         /* cyan — SRHT floor */
  --cool-dim: oklch(0.55 0.07 220);
  --serif: "Source Serif 4", Charter, Cambria, Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --max-w: 1200px;
}
[data-theme="light"] {
  --bg: #f4f1e8;
  --bg-2: #ebe7dc;
  --panel: #ede9dc;
  --fg: #1b1d22;
  --fg-2: #4a4d54;
  --fg-dim: #7b7e85;
  --rule: #cac5b6;
  --rule-2: #ddd8c8;
  --accent: oklch(0.55 0.17 40);
  --accent-dim: oklch(0.65 0.12 40);
  --cool: oklch(0.52 0.09 220);
  --cool-dim: oklch(0.65 0.06 220);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--base-font-px,17px);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--serif);line-height:calc(1.45 + .17 * var(--density,1));font-variant-numeric:tabular-nums}
a{color:var(--fg);text-decoration-color:var(--rule);text-underline-offset:3px}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
code,kbd,samp{font-family:var(--mono);font-size:.88em}
.mono{font-family:var(--mono)}

/* Top bar */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-2);display:flex;align-items:center;gap:2rem;padding:.65rem 1.5rem;font-family:var(--mono);font-size:.78rem}
.topbar .brand{letter-spacing:.04em;color:var(--fg);font-weight:600}
.topbar .brand .dot{color:var(--accent)}
.topbar nav{display:flex;gap:1.25rem;color:var(--fg-dim)}
.topbar nav a{text-decoration:none;color:inherit}
.topbar nav a:hover{color:var(--fg)}
.topbar .spacer{flex:1}
.topbar button{background:transparent;border:1px solid var(--rule);color:var(--fg-2);padding:.25rem .6rem;border-radius:2px;font-family:var(--mono);font-size:.72rem;cursor:pointer;letter-spacing:.04em}
.topbar button:hover{border-color:var(--accent);color:var(--accent)}

/* Layout */
main{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem 6rem}
section{padding:calc(4rem * var(--density,1)) 0 calc(2.5rem * var(--density,1));border-top:1px solid var(--rule-2)}
section:first-of-type{border-top:none;padding-top:3rem}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 .6rem;display:flex;gap:.6rem;align-items:baseline}
.eyebrow .bullet{color:var(--accent)}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;letter-spacing:-.01em;margin:0 0 1rem;max-width:22ch;text-wrap:balance}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.2;margin:0 0 .8rem;letter-spacing:-.005em;max-width:30ch;text-wrap:balance}
h3{font-family:var(--mono);font-weight:500;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin:1.5rem 0 .5rem}
p{margin:0 0 1rem;max-width:66ch;color:var(--fg)}
p.lede{font-size:1.18rem;color:var(--fg-2);max-width:50ch;line-height:1.5;font-style:italic}
p.small{font-size:.88rem;color:var(--fg-2)}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:start;padding-top:5rem}
[data-hero="stacked"] .hero{grid-template-columns:1fr;gap:2rem;padding-top:3rem}
[data-hero="widget-first"] .hero{grid-template-columns:1fr 1.1fr}
[data-hero="widget-first"] .hero > div:first-child{order:2}
[data-hero="widget-first"] .hero > div:last-child{order:1}
.hero .byline{font-family:var(--mono);font-size:.78rem;color:var(--fg-dim);margin:1.5rem 0 0;letter-spacing:.02em}
.hero .byline strong{color:var(--fg-2);font-weight:500}
.hero-fig{position:relative;min-height:320px}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:2rem;padding-top:3rem}}

/* Hero widget */
.hero-widget{border:1px solid var(--rule);background:var(--panel);padding:1.2rem 1.2rem 1rem;border-radius:3px}
.hero-widget .readout{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6rem;font-family:var(--mono);font-size:.78rem;color:var(--fg-dim)}
.hero-widget .readout .val{font-size:1.9rem;color:var(--accent);font-weight:500}
.hero-widget .readout .val.floor{color:var(--cool)}
.hero-widget .scrub{width:100%;margin-top:.8rem;accent-color:var(--accent)}
.hero-widget .track-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:var(--fg-dim);margin-top:.3rem;letter-spacing:.02em}

/* Big stat rail */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);margin-top:2.5rem}
.stat{padding:1.1rem 1.1rem;border-left:1px solid var(--rule-2)}
.stat:first-child{border-left:none}
[data-rail="cards"] .stats{gap:.5rem;border:none}
[data-rail="cards"] .stat{border:1px solid var(--rule-2);background:var(--panel)}
[data-rail="minimal"] .stats{border:none}
[data-rail="minimal"] .stat{border-left:none;padding-left:0}
[data-rail="minimal"] .stat .l{max-width:18ch}
.stat .n{font-family:var(--serif);font-size:1.9rem;font-weight:500;color:var(--fg);line-height:1;letter-spacing:-.01em}
.stat .n.accent{color:var(--accent)}
.stat .n.cool{color:var(--cool)}
.stat .l{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);margin-top:.5rem;line-height:1.35}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:none;border-top:1px solid var(--rule-2)}.stat:nth-child(4){border-top:1px solid var(--rule-2)}}
@media (max-width:500px){.stats{grid-template-columns:1fr}.stat{border-left:none;border-top:1px solid var(--rule-2)}.stat:first-child{border-top:none}}

/* Table */
table.data{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.82rem;margin:1.5rem 0}
[data-table="zebra"] table.data tr:nth-child(even) td{background:color-mix(in oklab,var(--bg-2) 50%,transparent)}
[data-table="card"] table.data{border-collapse:separate;border-spacing:0 .35rem}
[data-table="card"] table.data td{border:1px solid var(--rule-2);border-left:none;border-right:none;background:var(--panel)}
[data-table="card"] table.data td:first-child{border-left:1px solid var(--rule-2)}
[data-table="card"] table.data td:last-child{border-right:1px solid var(--rule-2)}
table.data th{text-align:right;font-weight:500;color:var(--fg-dim);padding:.55rem .75rem;border-bottom:1px solid var(--rule);letter-spacing:.04em;font-size:.72rem;text-transform:uppercase}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data td{padding:.65rem .75rem;border-bottom:1px solid var(--rule-2);text-align:right;color:var(--fg-2)}
table.data tr:hover td{background:var(--bg-2)}
table.data td.model{color:var(--fg);font-weight:500}
table.data td.na{color:var(--fg-dim);font-style:italic}
table.data td.delta{color:var(--fg)}
.delta-cell{display:inline-block;padding:.1rem .45rem;border-radius:2px;font-weight:500;min-width:3.5rem}

/* Small-multiples convergence */
.small-mult{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0}
.sm-card{border:1px solid var(--rule-2);padding:.9rem;background:var(--panel)}
.sm-card .hdr{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--fg-dim);margin-bottom:.4rem;letter-spacing:.02em}
.sm-card .hdr .m{color:var(--fg)}
.sm-card svg{width:100%;display:block}
.sm-card .foot{font-family:var(--mono);font-size:.68rem;color:var(--fg-dim);margin-top:.35rem;display:flex;justify-content:space-between}
@media (max-width:760px){.small-mult{grid-template-columns:1fr}}

/* FFN split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:1.5rem}
.split .col h3{margin-top:0}
.split .fig{border:1px solid var(--rule-2);background:var(--panel);padding:1rem;margin-top:.5rem}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:2rem}}

/* Widget frames */
.widget{border:1px solid var(--rule-2);background:var(--panel);padding:1.25rem;margin:1rem 0}
.widget .w-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.8rem;gap:1rem}
.widget .w-title{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.widget .w-cap{font-family:var(--mono);font-size:.7rem;color:var(--fg-dim)}
.widget .w-body{max-width:560px;margin:0 auto}
.widget .w-body svg{width:100%;height:auto;display:block;max-height:360px}
#w-cross-layer .w-body{max-width:520px}
#w-cross-layer .w-body svg{max-height:400px}
.widget .w-controls{display:flex;gap:1rem;align-items:center;margin-top:.8rem;font-family:var(--mono);font-size:.75rem;color:var(--fg-2);flex-wrap:wrap}
.widget .w-controls input[type="range"]{flex:1;min-width:160px;accent-color:var(--accent)}
.widget .w-legend{display:flex;gap:1.2rem;font-family:var(--mono);font-size:.7rem;color:var(--fg-dim);margin-top:.6rem;flex-wrap:wrap}
.widget .w-legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:.4rem;vertical-align:middle}
.widget .w-legend .sw-raw::before{background:var(--fg-dim)}
.widget .w-legend .sw-srht::before{background:var(--cool)}
.widget .w-legend .sw-lrn::before{background:var(--accent)}
.fallback-only{display:none}
@media (max-width:500px){
  .w-body.js-only{display:none}
  .fallback-only{display:block}
}

/* Lean panel */
.lean-panel{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--rule-2);margin:1.5rem 0}
.lean-cell{padding:1rem;border-left:1px solid var(--rule-2);background:var(--panel)}
.lean-cell:first-child{border-left:none}
.lean-cell .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}
.lean-cell .v{font-family:var(--serif);font-size:2rem;font-weight:500;color:var(--fg);line-height:1;margin-top:.35rem}
.lean-cell.proven .v{color:var(--accent)}
.lean-cell.deferred .v{color:var(--cool)}
@media (max-width:720px){.lean-panel{grid-template-columns:repeat(2,1fr)}.lean-cell:nth-child(odd){border-left:none}.lean-cell{border-top:1px solid var(--rule-2)}.lean-cell:nth-child(-n+2){border-top:none}}

/* Artifacts / download cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.75rem;margin:1.5rem 0}
.card{border:1px solid var(--rule-2);background:var(--panel);padding:1rem 1.1rem;text-decoration:none;color:var(--fg);display:block;transition:border-color .15s}
.card:hover{border-color:var(--accent);color:var(--fg)}
.card .t{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}
.card .n{font-family:var(--serif);font-size:1.05rem;margin-top:.35rem;color:var(--fg)}
.card .d{font-family:var(--mono);font-size:.72rem;color:var(--fg-dim);margin-top:.5rem}
.card .d.warn{color:var(--accent)}

/* Footnote */
footer{margin-top:4rem;padding:2rem 0 3rem;border-top:1px solid var(--rule-2);font-family:var(--mono);font-size:.75rem;color:var(--fg-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* Math */
.katex{font-size:1em!important}
.eqn{margin:1rem 0;padding:.75rem 1rem;border-left:2px solid var(--rule);font-family:var(--mono);overflow-x:auto}

/* Tweaks panel */
#tweaks-panel{position:fixed;right:1rem;bottom:1rem;width:280px;background:var(--panel);border:1px solid var(--rule);box-shadow:0 8px 28px -12px rgba(0,0,0,.55);z-index:60;font-family:var(--mono)}
#tweaks-panel .tp-head{display:flex;justify-content:space-between;align-items:center;padding:.55rem .75rem;border-bottom:1px solid var(--rule-2)}
#tweaks-panel .tp-title{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
#tweaks-panel .tp-close{background:none;border:none;color:var(--fg-dim);font-size:1.1rem;cursor:pointer;line-height:1;padding:0 .2rem}
#tweaks-panel .tp-close:hover{color:var(--accent)}
#tweaks-panel .tp-body{padding:.6rem .75rem .75rem;max-height:70vh;overflow-y:auto}
#tweaks-panel .tp-row{display:grid;grid-template-columns:72px 1fr auto;gap:.5rem;align-items:center;margin-bottom:.5rem;font-size:.7rem;color:var(--fg-dim)}
#tweaks-panel .tp-row label{letter-spacing:.04em}
#tweaks-panel .tp-row input[type="range"]{accent-color:var(--accent);width:100%}
#tweaks-panel .tp-row select{background:var(--bg-2);border:1px solid var(--rule-2);color:var(--fg);font-family:var(--mono);font-size:.7rem;padding:.2rem .3rem;border-radius:2px;grid-column:2/4}
#tweaks-panel .tp-val{color:var(--fg);font-size:.7rem;min-width:3ch;text-align:right}
#tweaks-panel .tp-seg{display:flex;gap:2px;grid-column:2/4}
#tweaks-panel .tp-seg button{flex:1;background:var(--bg-2);border:1px solid var(--rule-2);color:var(--fg-dim);font-family:var(--mono);font-size:.65rem;letter-spacing:.04em;padding:.3rem;border-radius:2px;cursor:pointer}
#tweaks-panel .tp-seg button.on{border-color:var(--accent);color:var(--accent);background:color-mix(in oklab,var(--accent) 8%,var(--bg-2))}
#tweaks-panel .tp-reset{width:100%;margin-top:.4rem;background:transparent;border:1px dashed var(--rule);color:var(--fg-dim);padding:.35rem;border-radius:2px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;cursor:pointer}
#tweaks-panel .tp-reset:hover{border-color:var(--accent);color:var(--accent)}

/* Citation */
pre.bibtex{font-family:var(--mono);font-size:.75rem;background:var(--bg-2);border:1px solid var(--rule-2);padding:1rem;overflow-x:auto;color:var(--fg-2);line-height:1.5}

/* Loading shimmer */
.loading{color:var(--fg-dim);font-family:var(--mono);font-size:.78rem}

/* Axis ticks (inline svg) */
.axis text{font-family:var(--mono);font-size:10px;fill:var(--fg-dim)}
.axis line,.axis path{stroke:var(--rule)}
.grid line{stroke:var(--rule-2)}

/* Column helpers */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media (max-width:760px){.two-col{grid-template-columns:1fr}}
.prose-wide{max-width:none}