/* ==========================================================================
   Qwen 3.8-27B — From Scratch · design system
   Identity: "Annotated Preprint" — paper, not screen.
   Warm parchment ground, iron-gall ink, four printer's spot-color pigments.
   Serif carries the argument (STIX Two Text, variable 400–700, scholarly cut);
   mono carries the evidence (IBM Plex Mono, technical register).
   ========================================================================== */

:root{
  /* paper + ink — the page is the artifact, not the void */
  --bg-0:#f3ede0;       /* parchment — page background */
  --bg-1:#ece4d3;       /* deeper paper — widget surfaces (think a card laid on the page) */
  --bg-2:#e3d9c4;       /* nested surface — sub-wells, pressed slightly darker by the page above */
  --bg-3:#d9cfb8;       /* pressed paper — code wells */
  --line:rgba(26,22,18,0.12);
  --line-strong:rgba(26,22,18,0.24);
  --fg:#1a1612;         /* iron-gall ink — body text, deep warm black */
  --muted:#5a5046;      /* faded sepia — secondary text */
  --faint:#615748;      /* ledger pencil — tertiary, marginalia. Darkened from #6f6455 so it clears WCAG AA (4.5:1) on --bg-3, the code-well paper; it was 3.74:1 there. */
  --ink-2:#2e2820;      /* body paragraph ink — softer than --fg */
  --ink-3:#3a3328;      /* table body ink — softer still */
  --amber:#b8341f;      /* cinnabar red — primary accent (was amber; re-themed to lead pigment) */
  --amber-deep:#9c2b18; /* deep cinnabar — selected-state label text on tinted chips (~6:1) */
  --mint:#1d6e6b;       /* teal pigment — secondary (was full attention) */
  --iris:#2b3a8a;       /* indigo pigment — tertiary (was training / RL) */
  --rose:#8a3324;       /* deep vermilion — warnings */
  --sky:#8a5610;        /* cadmium amber — info (kept warm) */

  /* type — serif = argument, mono = evidence */
  --sans:"STIX Two Text","Iowan Old Style",Georgia,"Times New Roman",serif;
  --display:"STIX Two Text","Iowan Old Style",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* spacing scale (8px) */
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --radius:10px;
  --maxw:880px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--fg);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.66;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-optical-sizing:auto;
  font-feature-settings:"kern","liga","calt","onum";
  font-variant-numeric:tabular-nums oldstyle-nums;
}
/* mono surfaces keep tabular figures + the coding ligatures off */
.math,.tbl-wrap,pre.code,.w-out,.fig-cap,.sec-tag,.kicker,.meta-strip,.nav-current,.nav-toggle,.nav-grid a .n,.w-ctl label,.w-tag,.co-title,.cur-badge,.st-num,.tk-num,.ffn-legend{
  font-variant-numeric:tabular-nums lining-nums;
}
::selection{background:rgba(184,52,31,0.18);color:var(--fg);}

/* themed scrollbar — pencil-soft on parchment */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:rgba(26,22,18,0.16);border-radius:8px;
  border:2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover{background:rgba(184,52,31,0.32);}
/* thin pencil scrollbars only where content actually scrolls — page keeps native chrome */
.tbl-wrap,pre.code,.math,.diagram,.widget-visual,.code-studio-pre,.bench-index,.matrix-table-wrap,.contract-matrix-wrap{scrollbar-color:rgba(26,22,18,0.16) transparent;scrollbar-width:thin;}

/* atmosphere — paper texture, very subtle foxing at the page edges,
   a single warm halo above the masthead (the kind a desk lamp leaves) */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 500px at 50% -6%, rgba(184,52,31,0.06), transparent 65%),
    var(--bg-0);
}
/* paper grain — a faint dotted noise so flat color reads as fiber, not screen */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(26,22,18,0.05) 1px,transparent 1px);
  background-size:3px 3px;
}

a{color:var(--amber);text-decoration:none;transition:color .15s;}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(184,52,31,0.55);}
:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--amber);outline-offset:2px;border-radius:3px;
}
/* never put focus ring on body or the slider thumbs (browser-default is already good) */
input[type=range]:focus-visible{outline:none;}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--bg-0),0 0 0 4px var(--amber);}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--bg-0),0 0 0 4px var(--amber);}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-5);}
main.wrap{overflow-x:visible;}                      /* ponytail: was clip; the ancestor clip was blocking descendant .tbl-wrap and .diagram from engaging their own overflow-x:auto — mobile fallback lives in the 560px block below */
section{
  padding:var(--s-8) 0 var(--s-4);
  position:relative;
}
section+section{
  border-top:1px solid var(--line);
  margin-top:var(--s-2);
}

/* ---------- nav ---------- */
nav.topnav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(243,237,224,0.78);
  border-bottom:1px solid var(--line);
  transition:background .25s,box-shadow .25s,border-color .25s;
}
.topnav.scrolled{
  background:rgba(243,237,224,0.92);
  box-shadow:0 6px 24px -8px rgba(26,22,18,0.10);
  border-bottom-color:var(--line-strong);}
.topnav-inner{
  max-width:var(--maxw);margin:0 auto;padding:var(--s-3) var(--s-5);
  display:flex;align-items:center;gap:var(--s-4);
}
.nav-brand{
  white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:10px;
}
.nav-brand::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 1px rgba(184,52,31,0.35);
  align-self:center;}
.nav-brand .nb-name{
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--fg);
}
.nav-brand .nb-tag{
  font-family:var(--mono);font-size:12px;letter-spacing:.045em;color:var(--muted);}
/* running head: current section + contents toggle */
.nav-right{display:flex;align-items:center;gap:var(--s-4);margin-left:auto;min-width:0;}
.nav-current{
  font-family:var(--mono);font-size:12px;letter-spacing:.045em;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity .25s;}
.nav-current.show{opacity:1;}
.nav-current b{color:var(--amber);font-weight:600;}
.nav-toggle{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.045em;
  color:var(--fg);background:transparent;border:1px solid var(--line-strong);
  padding:7px 14px;border-radius:8px;cursor:pointer;
  transition:border-color .15s,background .15s;}
.nav-toggle:hover{border-color:rgba(184,52,31,0.55);background:rgba(184,52,31,0.06);}
.nav-toggle:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.nav-toggle svg{transition:transform .2s ease;}
.nav-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
/* contents panel — drops from under the bar, aligned to the page column */
.nav-panel{
  position:absolute;top:100%;left:0;right:0;
  background:rgba(243,237,224,0.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 24px 48px -12px rgba(26,22,18,0.16);
  visibility:hidden;opacity:0;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;}
.nav-panel.open{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .18s ease,transform .18s ease;
}
.nav-grid{
  max-width:var(--maxw);margin:0 auto;padding:var(--s-3) var(--s-5) var(--s-5);
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px 20px;
}
.nav-grid a{
  display:flex;align-items:baseline;gap:10px;
  font-size:14.5px;color:var(--muted);padding:8px 10px;border-radius:8px;
  transition:color .15s,background .15s;
}
.nav-grid a .n{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.045em;}
.nav-grid a:hover{color:var(--fg);background:var(--bg-2);text-decoration:none;}
.nav-grid a.on{color:var(--amber);background:rgba(184,52,31,0.08);}
.nav-grid a.on .n{color:var(--amber);}
.nav-grid a:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;}
@media (max-width:720px){
  .nav-grid{grid-template-columns:1fr 1fr;padding:var(--s-3) var(--s-4) var(--s-4);}
;}
.progress{
  position:fixed;top:0;left:0;height:2px;z-index:60;width:0;
  background:var(--amber);
}

/* ---------- hero ---------- */
.hero{padding:var(--s-9) 0 var(--s-8);}
/* ---------- hero: architecture telemetry HUD (replaces static running head) ---------- */
.hero-telemetry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0 0 var(--s-6);
  padding: 8px 14px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  background: rgba(26, 22, 18, 0.025);
  border-radius: 3px;
  font-family: var(--mono);
  font-size:12px;
  letter-spacing: 0.12em;}

.telemetry-lead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 500;
}

.telemetry-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 1px rgba(184, 52, 31, 0.4);}

.telemetry-title {
  color: var(--fg);
  font-weight: 600;
  letter-spacing: 0.045em;}

.telemetry-divider {
  color: var(--faint);
  opacity: 0.5;
}

.telemetry-badge {
  color: var(--mint);
  font-weight: 600;
  background: rgba(29, 110, 107, 0.08);
  border: 1px solid rgba(29, 110, 107, 0.22);
  padding: 2px 6px;
  border-radius: 3px;
  font-size:12px;
  letter-spacing: 0.1em;}

.telemetry-stream {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size:12px;}

.telemetry-wave {
  width: 88px;
  height: 18px;
  color: var(--line-strong);
  overflow: visible;
}

.telemetry-wave .wave-track {
  stroke: var(--line-strong);
  opacity: 0.8;
}

.telemetry-wave .wave-node.attn {
  fill: var(--mint);
}

.telemetry-wave-label {
  color: var(--faint);
  letter-spacing: 0.1em;
  font-size:12px;}

.telemetry-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.t-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg-1, #ece4d3);
  text-decoration: none;
  color: var(--fg);
  font-size:12px;
  letter-spacing: 0.08em;
  transition: all 0.15s ease;}

.t-chip .t-k {
  color: var(--faint);
  font-weight: 500;
}

.t-chip .t-v {
  color: var(--fg);
  font-weight: 600;
}

.t-chip:hover {
  background: var(--bg-2, #e3d9c4);
  border-color: var(--amber);
  color: var(--amber);
  transform: translateY(-1px);
}

.t-chip:hover .t-k, .t-chip:hover .t-v {
  color: var(--amber);
}

.t-chip:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

.t-chip.highlight {
  border-color: rgba(184, 52, 31, 0.35);
  background: rgba(184, 52, 31, 0.08);
}

.t-chip.highlight .t-k {
  color: var(--amber);
}

.t-chip.highlight .t-v {
  color: var(--amber);
  font-weight: 700;
}

.t-chip.highlight:hover {
  background: rgba(184, 52, 31, 0.16);
  border-color: var(--amber);
}

@media (max-width: 900px) {
  .telemetry-stream {
    display: none;
  }
;}

@media (max-width: 720px) {
  .hero-telemetry {
    padding: 8px 10px;
    gap: 8px 12px;
  }
  .telemetry-chips {
    width: 100%;
    justify-content: flex-start;
  }
;}
/* kicker lives inside the spec band's header row — a register readout,
   not a page eyebrow */
.kicker{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px 12px;margin:0;
}
/* 64-bit architecture register — flickers on load, settles into the 3:1 motif */
.bits{display:inline-flex;gap:2px;height:9px;}
.bits .bit{width:4px;height:9px;border-radius:1px;background:rgba(26,22,18,0.07);transition:background .12s ease;}
.bits .bit.fa{background:var(--amber);box-shadow:0 0 0 1px rgba(26,22,18,0.55);} /* ponytail: DeltaNet slots carry an ink frame — state reads by weight, not hue alone */
.bits .bit.fm{background:var(--mint);box-shadow:0 0 0 1px rgba(26,22,18,0.55);}
.bits-label{
  font-family:var(--mono);font-size:12px;letter-spacing:.045em;
  color:var(--muted);opacity:0;transform:translateY(2px);
  transition:opacity .5s ease,transform .5s ease;}
.bits-label.show{opacity:1;transform:none;}
.bits-label b{color:var(--amber);font-weight:600;}
.bits-label i{font-style:normal;color:var(--faint);}

/* hero spec band — datasheet ratings table: document facts as the
   header row, four rating columns below, one hairline frame */
.spec-band{
  margin:0 0 var(--s-4);
  border-top:1px solid var(--line-strong);
}
.band-head{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 24px;
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--line);
}
.meta-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  font-family:var(--mono);font-size:12px;color:var(--muted);}
.meta-strip b{color:var(--fg);font-weight:600;letter-spacing:.045em;}
.meta-strip .sep{color:var(--faint);opacity:.5;}
.spec-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:0;border-bottom:1px solid var(--line-strong);
}
.spec-cell{padding:var(--s-4) var(--s-5) var(--s-4) 10px;}
.spec-cell:first-child{padding-left:0;}
.spec-cell:last-child{padding-right:0;}
.spec-cell+.spec-cell{padding-left:calc(var(--s-5) + 6px);border-left:1px solid var(--line);}
.spec-cell dt,.spec-cell dd{margin:0}
.spec-cell dt{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.045em;color:var(--muted);
  margin-bottom:9px;}
.spec-cell .sv{
  display:block;font-family:var(--mono);font-weight:600;
  font-size:clamp(22px,2.5vw,29px);line-height:1.05;letter-spacing:-.01em;
  color:var(--fg);font-variant-numeric:tabular-nums lining-nums;
}
.spec-cell .sn{
  display:block;font-size:13.5px;line-height:1.5;color:var(--muted);
  margin-top:7px;max-width:24ch;
}
.spec-cell.hot .sv{color:var(--amber);}
@media (max-width:480px){
  .spec-grid{grid-template-columns:1fr;}
  .spec-cell,.spec-cell:nth-child(even){padding-left:0;padding-right:0;border-left:none;}
  .spec-cell+.spec-cell{padding-left:0;}
  .spec-cell:nth-child(n+2){padding-left:0;padding-top:calc(var(--s-4) + 8px);}
  .spec-cell:nth-child(n+2){border-top:1px solid var(--line);}
  .bits{gap:1.5px;}
  .bits .bit{width:3px;}
;}

h1{
  font-family:var(--display);
  font-size:clamp(40px,5vw,56px);line-height:1.08;letter-spacing:-.02em;
  font-weight:640;
  margin:0 0 var(--s-5);
  font-feature-settings:"kern" 1,"liga" 1;}
h1 .grad{
  font-style:italic;font-weight:500;
  color:var(--fg);
}
.hero-sub{font-size:21.5px;color:var(--muted);max-width:660px;line-height:1.66;margin:0 0 var(--s-7);
  text-wrap:pretty;font-feature-settings:"kern" 1,"liga" 1;}
.hero-sub strong{color:var(--fg);font-weight:600;}

/* stat cards (§10 and any remaining grids) — flattened, single ink */
.stat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);
  margin:var(--s-6) 0 var(--s-4);
}
.stat-grid.three-up{grid-template-columns:repeat(3,1fr);}
.stat{
  background:var(--bg-1);border-radius:var(--radius);
  box-shadow:0 0 0 1px var(--line);
  padding:var(--s-4);
}
.stat .num{
  font-family:var(--mono);font-weight:600;font-size:clamp(19px,2.4vw,25px);
  letter-spacing:-.01em;color:var(--fg);
  font-variant-numeric:tabular-nums lining-nums;
}
.stat .lbl{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.045em;margin-top:5px;}
.stat .sub{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.5;}

/* ---------- headings ---------- */
.sec-tag{
  font-family:var(--mono);font-size:12px;color:var(--amber);letter-spacing:.045em;
  margin-bottom:var(--s-2);display:flex;align-items:center;gap:10px;
  font-weight:600;}
.sec-tag::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 3px rgba(184,52,31,0.15);
}
h2{font-family:var(--display);font-size:clamp(30px,3.8vw,41px);letter-spacing:-.012em;line-height:1.12;font-weight:640;margin:0 0 var(--s-4);position:relative;scroll-margin-top:80px;}
h3{font-family:var(--display);font-size:26px;letter-spacing:-.008em;font-weight:640;margin:var(--s-7) 0 var(--s-3);position:relative;scroll-margin-top:80px;}
h3:first-child{margin-top:var(--s-4);}
h4{font-family:var(--mono);font-size:12px;letter-spacing:.045em;font-weight:600;margin:var(--s-6) 0 var(--s-2);color:var(--muted);}

/* anchor links on h2/h3 — appear on hover only */
h2 .anchor,h3 .anchor{
  position:absolute;left:-1.4em;top:0;opacity:0;
  font-family:var(--mono);font-weight:400;color:var(--faint);
  text-decoration:none;transition:opacity .15s,color .15s;
}
h2:hover .anchor,h3:hover .anchor{opacity:.85;}
.anchor:hover{color:var(--amber) !important;text-decoration:none;}
p{margin:0 0 var(--s-4);color:var(--ink-2);}
p strong,li strong{color:var(--fg);font-weight:600;}
.lead{font-size:20px;color:var(--muted);line-height:1.66;}
ul,ol{color:var(--ink-2);padding-left:22px;margin:0 0 var(--s-4);}
li{margin-bottom:7px;}
li::marker{color:var(--faint);}

/* ---------- callouts ---------- */
.callout{
  position:relative;
  border-radius:0;padding:var(--s-5);
  margin:var(--s-5) 0;background:var(--bg-1);
  box-shadow:0 0 0 1px var(--line);
  border-top:2px solid var(--amber);font-size:15.5px;
  overflow:hidden;}
.callout::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:currentColor;opacity:.9;
}
.callout > *{
  padding-left:2px;
;}
.callout .co-title{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.045em;
  color:var(--amber);margin-bottom:8px;font-weight:600;}
.callout .co-title .ic{
  width:14px;height:14px;flex:0 0 14px;display:inline-flex;align-items:center;justify-content:center;
  color:currentColor;opacity:.9;
}
.callout .co-title .ic svg{width:14px;height:14px;display:block;}
.callout p{margin-bottom:var(--s-2);color:var(--ink-2);}
.callout p:last-child{margin-bottom:0;}
.callout strong{color:var(--fg);}
.callout code{background:rgba(26,22,18,0.04);color:inherit;}

.callout.why{color:var(--amber);}
.callout.why .co-title{color:var(--amber);}
.callout.warn{color:var(--rose);}
.callout.warn .co-title{color:var(--rose);}
.callout.note{color:var(--iris);}
.callout.note .co-title{color:var(--iris);}

/* ---------- math ---------- */
.math{
  position:relative;
  font-family:var(--mono);font-size:14.5px;line-height:2.05;
  background:
    linear-gradient(180deg,rgba(26,22,18,0.018),transparent 40%),
    var(--bg-1);
  border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(26,22,18,0.04);
  padding:var(--s-4) var(--s-5);margin:var(--s-4) 0;
  overflow-x:auto;white-space:nowrap;color:var(--fg);
  scrollbar-color:rgba(184,52,31,0.22) transparent; /* ponytail: advertises horizontal scroll on long GRPO/AdamW equations */
;}
.math::before{
  content:"";position:absolute;left:0;top:var(--s-2);bottom:var(--s-2);width:2px;
  background:var(--amber);
  border-radius:2px;opacity:.5;
}
.math > *{padding-left:8px;}
/* KaTeX replaces the block's contents wholesale — hand-rolled equation spans retired */
.eq-no{float:right;color:var(--faint);font-size:12px;padding-top:4px;margin-left:14px;line-height:2.05;letter-spacing:.045em;font-style:italic;} /* ponytail: align marker to math baseline inside the 2.05 line-box and breathe from the equation text; italic matches the printer's marginalia register of figure captions */

/* KaTeX — match journal palette; suppress .math decorations once rendered */
.katex{color:var(--fg);}
.katex .mord,.katex .mbin,.katex .mrel,.katex .mopen,.katex .mclose,
.katex .mpunct,.katex .minner{color:var(--fg);}
.math:has(>.katex){background:transparent;padding:var(--s-2) 0;overflow-x:auto;}
.math:has(>.katex)::before{display:none;}
.math:has(>.katex)>*{padding-left:0;}
.katex-display{margin:var(--s-2) 0;}
.katex-display>.katex{color:var(--fg);}
/* ---------- code ---------- */
pre.code{
  position:relative;
  background:
    linear-gradient(180deg,rgba(26,22,18,0.025),transparent 30%),
    var(--bg-3);
  border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(26,22,18,0.04),0 4px 14px rgba(26,22,18,0.22);
  padding:var(--s-5) var(--s-5) var(--s-4);margin:var(--s-4) 0;
  overflow-x:auto;font-family:var(--mono);font-size:12.8px;line-height:1.75;
  color:var(--fg);
  scrollbar-width:thin;scrollbar-color:rgba(26,22,18,0.18) transparent;}
pre.code::before{
  content:attr(data-lang);position:absolute;top:6px;left:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.045em;
  color:var(--faint);}
pre.code > code{display:block;margin-top:6px;}
pre.code .k{color:var(--iris);font-weight:500;}   /* keyword */
pre.code .f{color:var(--mint);}   /* function */
pre.code .n{color:var(--amber);}  /* number / const */
pre.code .s{color:var(--mint);}       /* string */
pre.code .c{color:var(--faint);font-style:italic;} /* comment */
code{
  font-family:var(--mono);font-size:.86em;
  background:rgba(26,22,18,0.05);padding:2px 6px;border-radius:4px;color:var(--muted);
  box-shadow:inset 0 0 0 1px rgba(26,22,18,0.04);
}
pre.code code{background:none;padding:0;color:inherit;font-size:inherit;}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;margin:var(--s-4) 0;border-radius:var(--radius);box-shadow:0 0 0 1px var(--line),inset 0 1px 0 rgba(26,22,18,0.03);width:calc(100% + 8vw);max-width:1100px;margin-left:calc(-4vw);margin-right:calc(-4vw);scrollbar-color:rgba(26,22,18,0.22) transparent;} /* ponytail: extend tables 4vw each side past the 880px reading measure so 5-column tables don't truncate; on narrow viewports the rule still fits within the .tbl-wrap's parent box because width has a max-width cap and overflow-x:auto is a fallback */
.tbl-wrap::-webkit-scrollbar-thumb{background:rgba(26,22,18,0.22);border:2px solid var(--bg-0);} /* ponytail: pencil-soft scroll thumb; was amber — amber read as a brand callout, pencil reads as marginalia */
table{border-collapse:collapse;width:100%;font-size:13.5px;background:var(--bg-1);font-family:var(--sans);}
caption{
  caption-side:top;
  text-align:left;
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
  padding:12px 18px 11px;
  background:var(--bg-1);
  border-bottom:1px solid var(--line);
  font-feature-settings:"kern","liga","calt","onum";
  letter-spacing:-0.003em;
}
caption strong,caption b{
  font-family:var(--sans);
  font-weight:600;
  color:var(--fg);
}
th{
  text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.045em;font-weight:600;
  color:var(--muted);padding:12px 15px;border-bottom:1px solid var(--line-strong);
  background:rgba(26,22,18,0.02);white-space:nowrap;
  position:sticky;top:0;}
td{padding:11px 15px;border-bottom:1px solid var(--line);color:var(--ink-3);vertical-align:top;transition:background .15s;}
tr:last-child td{border-bottom:none;}
td:first-child{color:var(--fg);font-weight:500;}
tr:hover td{background:rgba(26,22,18,0.028);}
td .num,th.r,td.r{text-align:right;font-variant-numeric:tabular-nums;}
.good{color:var(--mint);font-weight:600;}
.bad{color:var(--rose);font-weight:600;}
.hl{color:var(--amber);font-weight:700;}

/* ---------- diagrams ---------- */
.diagram{
  background:var(--bg-1);border-radius:var(--radius);
  box-shadow:0 0 0 1px var(--line);
  padding:var(--s-5);margin:var(--s-5) 0;overflow-x:auto;
}
.diagram svg{display:block;margin:0 auto;max-width:100%;height:auto;}
.fig-cap{
  text-align:center;font-size:12.5px;color:var(--faint);margin-top:var(--s-3);
  font-family:var(--mono);
}
.fig-cap b{color:var(--muted);font-weight:600;font-style:italic;letter-spacing:.045em;}

/* SVG shared styles */
.dg-box{fill:var(--bg-2);stroke:var(--line-strong);stroke-width:1;rx:8;}
.dg-label{font-family:var(--mono);fill:var(--muted);font-size:12px;}
.dg-sub{font-family:var(--mono);fill:var(--faint);font-size:12px;}
.dg-title{font-family:var(--sans);fill:var(--fg);font-weight:600;font-size:13px;}
.dg-flow{stroke:var(--muted);fill:none;stroke-width:1.3;opacity:.7;}

/* ---------- comparison (baseline vs new) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin:var(--s-5) 0;}
.compare .col{
  position:relative;overflow:hidden;
  background:var(--bg-1);border-radius:var(--radius);padding:var(--s-4);
  box-shadow:0 0 0 1px var(--line),inset 0 1px 0 rgba(26,22,18,0.025);
  transition:background .18s ease,box-shadow .18s ease;
}
.compare .col:hover{background:var(--bg-2);} /* ponytail: subtle hover lift matching the design language of .take/.dash-kpi, preserves the static .after amber border */
.compare .col .h{
  font-family:var(--mono);font-size:12px;letter-spacing:.045em;
  margin-bottom:var(--s-3);font-weight:600;}
.compare .col.before .h{color:var(--muted);}
.compare .col.after .h{color:var(--amber);}
.compare .col.before{opacity:.85;}
.compare .col.after{box-shadow:0 0 0 1px rgba(184,52,31,0.4);}
.compare ul{margin:0;font-size:14px;}
.compare li{margin-bottom:6px;}

/* ---------- widgets ---------- */
.widget{
  position:relative;overflow:hidden;
  background:var(--bg-1);border-radius:var(--radius);
  box-shadow:0 0 0 1px var(--line-strong);
  padding:var(--s-5);margin:var(--s-6) 0;
}
.widget .w-head{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--s-2);flex-wrap:wrap;}
.widget .w-title{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.008em;}
.widget .w-tag{
  font-family:var(--mono);font-size:12px;letter-spacing:.045em;
  color:var(--iris);background:rgba(43,58,138,0.1);padding:3px 9px;border-radius:999px;
  box-shadow:0 0 0 1px rgba(43,58,138,0.3);}
.widget .w-desc{font-size:14px;color:var(--muted);margin-bottom:var(--s-4);line-height:1.6;}

.w-controls{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:flex-end;margin-bottom:var(--s-4);}
.w-ctl{display:flex;flex-direction:column;gap:5px;}
.w-ctl label{
  font-family:var(--mono);font-size:12px;letter-spacing:.045em;color:var(--muted);}
.w-ctl select,.w-ctl input[type=number]{
  background:var(--bg-2);color:var(--fg);border:none;border-radius:8px;
  box-shadow:0 0 0 1px var(--line-strong);
  font-family:var(--mono);font-size:12.5px;padding:7px 10px;outline:none;min-width:110px;
}
.w-ctl select:focus,.w-ctl input:focus{box-shadow:0 0 0 1px rgba(184,52,31,0.55);}
.w-ctl input[type=range]{accent-color:var(--amber);width:170px;}
.w-btn{
  background:var(--bg-2);color:var(--fg);border:none;border-radius:8px;cursor:pointer;
  box-shadow:0 0 0 1px var(--line-strong);
  font-family:var(--mono);font-size:12px;padding:8px 16px;transition:all .15s;
}
.w-btn:hover{box-shadow:0 0 0 1px rgba(184,52,31,0.6);color:var(--amber);transform:translateY(-1px);}
.w-btn.primary{background:var(--amber);box-shadow:0 0 0 1px var(--line-strong);color:#fff;font-weight:600;}
.w-btn.primary:hover{background:var(--amber);box-shadow:0 0 0 1px var(--amber);}
.w-btn:disabled{opacity:.4;cursor:not-allowed;}

.w-out{font-family:var(--mono);font-size:12.5px;color:var(--muted);line-height:1.8;}
.w-out .big{font-size:clamp(22px,3.4vw,30px);font-weight:700;color:var(--amber);letter-spacing:-.02em;}
.w-out .row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed rgba(26,22,18,0.06);}
.w-out .row:last-child{border-bottom:none;}
.w-out .row .v{color:var(--fg);font-variant-numeric:tabular-nums;}
.w-out .row .v.a{color:var(--amber);}
.w-out .row .v.m{color:var(--mint);}
.w-out .row .v.i{color:var(--iris);}

/* toggle group */
.seg{display:inline-flex;background:var(--bg-2);border-radius:9px;padding:3px;box-shadow:0 0 0 1px var(--line-strong);}
.seg button{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-family:var(--mono);font-size:12px;padding:6px 13px;border-radius:7px;transition:all .15s;}
/* small modifier for a control sitting inside a toolbar or a grid head.
   Shrinks padding only: the page holds a 12px floor on all UI text, so
   "small" means a tighter control, never a smaller type size. */
.seg.sm{padding:2px;}
.seg.sm button{padding:4px 9px;}
.w-btn.ghost{background:transparent;color:var(--muted);box-shadow:0 0 0 1px var(--line);}
.w-btn.ghost:hover{color:var(--fg);box-shadow:0 0 0 1px var(--line-strong);}
.w-btn.sm{padding:5px 11px;}
.seg button.on{background:rgba(184,52,31,0.16);color:var(--amber-deep);box-shadow:inset 0 0 0 1px rgba(184,52,31,0.35);}
.seg button:focus-visible,.mchip:focus-visible,.dchip:focus-visible,.w-btn:focus-visible,.code-tab:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg-0),0 0 0 4px var(--amber);}

/* layer explorer — 32px hit pitch; the 18px chip is painted inside via ::before */
.layer-strip{display:flex;flex-wrap:wrap;gap:2px;margin:var(--s-3) 0;padding:var(--s-3);background:var(--bg-2);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);}
.layer-cell{
  width:32px;height:32px;border:0;border-radius:9px;cursor:pointer;padding:0;background:none;
  transition:transform .12s;position:relative;
}
.layer-cell::before{
  content:"";position:absolute;inset:7px;border-radius:5px;
  background:rgba(184,52,31,0.18);box-shadow:0 0 0 1px rgba(184,52,31,0.35),inset 0 1px 0 rgba(26,22,18,0.08);
  transition:box-shadow .12s;
}
.layer-cell.fa::before{
  background:rgba(29,110,107,0.18);box-shadow:0 0 0 1px rgba(29,110,107,0.4),inset 0 1px 0 rgba(26,22,18,0.08);
}
.layer-cell:hover{transform:scale(1.12);}
.layer-cell:hover::before{box-shadow:0 0 0 1px rgba(184,52,31,0.7),0 0 8px rgba(184,52,31,0.3);}
.layer-cell.fa:hover::before{box-shadow:0 0 0 1px rgba(29,110,107,0.7),0 0 8px rgba(29,110,107,0.3);}
.layer-cell.sel{transform:scale(1.1);}
.layer-cell.sel::before{box-shadow:0 0 0 2px var(--amber),0 0 12px rgba(184,52,31,0.35);}
.layer-cell.fa.sel::before{box-shadow:0 0 0 2px var(--mint),0 0 12px rgba(29,110,107,0.4);}
.layer-cell:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;}


/* MTP sim tokens */
.mtp-row{display:flex;gap:6px;flex-wrap:wrap;margin:var(--s-3) 0;min-height:38px;align-items:center;}
.tok{
  font-family:var(--mono);font-size:12px;padding:6px 10px;border-radius:8px;
  background:var(--bg-2);box-shadow:0 0 0 1px var(--line-strong);color:var(--muted);
}
.tok.acc{background:rgba(29,110,107,0.13);box-shadow:0 0 0 1px rgba(29,110,107,0.45);color:var(--mint);transition:transform .15s;}
.tok.acc:hover{transform:translateY(-2px);}
.tok.rej{background:rgba(138,51,36,0.1);box-shadow:0 0 0 1px rgba(138,51,36,0.4);color:var(--rose);opacity:.75;}
.tok.cur{background:rgba(184,52,31,0.15);box-shadow:0 0 0 1px rgba(184,52,31,0.5);color:var(--amber);transition:transform .15s;}
.tok.cur:hover{transform:translateY(-2px);}

/* "next section" affordance */
.next-pill{
  display:inline-flex;align-items:center;gap:8px;
  margin:var(--s-7) 0 0;padding:8px 14px;border-radius:999px;
  font-family:var(--mono);font-size:12px;letter-spacing:.045em;
  background:var(--bg-1);color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line);
  text-decoration:none;transition:all .18s ease;}
.next-pill .arrow{display:inline-block;transition:transform .18s ease;}
.next-pill:hover{color:var(--amber);background:rgba(184,52,31,0.08);box-shadow:inset 0 0 0 1px rgba(184,52,31,0.4);text-decoration:none;}
.next-pill:hover .arrow{transform:translateX(3px);}

/* ============================================================
   REFINED BENCHMARK SUITE & WIDGETS
   ============================================================ */

/* Executive Dashboard Banner */
.bench-dash {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-3);
}
.dash-kpi {
  background: var(--bg-1);
  border-radius: var(--radius);
  padding: var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--line-strong), 0 8px 22px rgba(26,22,18,0.22);}
.dash-kpi .kpi-label {
  font-family: var(--mono);
  font-size:12px;
  letter-spacing:.045em;
  
  color: var(--muted);
  margin-bottom: 4px;}
.dash-kpi .kpi-val {
  font-family: var(--mono);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}
.dash-kpi .kpi-val.good { color: var(--amber); }
.dash-kpi .kpi-sub {
  font-family: var(--mono);
  font-size:12px;
  color: var(--faint);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}

/* Global Referee Toolbar */
.bench-global-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: var(--s-3) 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-1);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
}
.bench-global-bar .bgb-label {
  font-family: var(--mono);
  font-size:12px;
  letter-spacing:.045em;
  
  color: var(--muted);}

/* Shared Chips & Toggles */
.bench-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mchip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size:12px; color: var(--muted);
  background: var(--bg-2); border: none; border-radius: 999px; padding: 5px 12px;
  box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; transition: all .18s ease;}
.mchip .sw { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--amber)); transition: all .18s ease; }
.mchip:hover { color: var(--fg); box-shadow: 0 0 0 1px var(--c, var(--amber)); }
.mchip.on { color: var(--c, var(--amber)); font-weight: 600; box-shadow: 0 0 0 1px var(--c, var(--amber));}

/* Domain Filter Pill Row */
.bench-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: var(--s-3) 0 var(--s-4);
}
.dchip {
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);
  background: var(--bg-2);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
  transition: all .15s ease;}
.dchip:hover { color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong); }
.dchip.on { color: var(--amber); background: rgba(184,52,31,0.12); box-shadow: 0 0 0 1px rgba(184,52,31,0.45); font-weight: 600; }

/* Widget 1: Radar Chart */
.radar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 1fr);
  gap: var(--s-4);
  align-items: start;
  margin-top: var(--s-4);
}
.radar-plot-wrap {
  position: relative;
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
#radarSvg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.radar-grid { stroke: rgba(26,22,18,.08); stroke-width: 1; fill: none; }
.radar-spoke { stroke: rgba(26,22,18,.14); stroke-width: 1; stroke-dasharray: 2 4; }
.radar-lbl {
  font-family: var(--mono);
  font-size:12px;
  fill: var(--muted);
  cursor: pointer;
  transition: fill .15s;}
.radar-lbl:hover, .radar-lbl.sel { fill: var(--amber); font-weight: 600; }
.radar-poly-hero {
  fill: rgba(184,52,31,0.22);
  stroke: var(--amber);
  stroke-width: 2.2;
  transition: all .4s cubic-bezier(.2,.7,.3,1);
}
.radar-poly-base {
  fill: rgba(138,86,16,0.12);
  stroke: var(--sky);
  stroke-width: 1.8;
  stroke-dasharray: 4 3;
  transition: all .4s cubic-bezier(.2,.7,.3,1);
}
.radar-vertex {
  cursor: pointer;
  transition: transform .2s ease;
}
.radar-vertex:hover { transform: scale(1.4); }

.radar-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.radar-card {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
}
.radar-card-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.radar-score-bar-wrap {
  margin: 6px 0;
}
.radar-bar-lbl {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);
  margin-bottom: 3px;}
.radar-bar-track {
  height: 6px;
  background: rgba(26,22,18,0.07);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.radar-bench-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.radar-bench-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);}
.radar-bench-item .rbi-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.radar-bench-item .rbi-score { color: var(--fg); font-weight: 600; }
.radar-bench-item .rbi-delta { font-weight: 700; }
.radar-bench-item .rbi-delta.good { color: var(--mint); }
.radar-bench-item .rbi-delta.bad { color: var(--rose); }

/* Widget 2: Scatter & Quadrant Matrix */
.bench-vs { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.bv-label { font-family: var(--mono); font-size:12px; color: var(--faint); letter-spacing:.045em;}
.bench-body { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 20px; margin-top: var(--s-3); align-items: start; }
.bench-plotwrap { position: relative; min-width: 0; background: var(--bg-2); border-radius: var(--radius); padding: 10px; box-shadow: inset 0 0 0 1px var(--line); }
#benchPlot { display: block; width: 100%; height: auto; }
#benchPlot text { font-family: var(--mono); }

.bp-grid { stroke: rgba(26,22,18,0.055); stroke-width: 1; }
.bp-edge { stroke: rgba(26,22,18,0.14); stroke-width: 1; }
.bp-tick { fill: var(--faint); font-size:12px; font-variant-numeric: tabular-nums;}
.bp-cap { fill: var(--muted); font-size:12px; letter-spacing:.045em;}
.bp-diag { stroke: rgba(184,52,31,0.55); stroke-width: 1.2; stroke-dasharray: 3 6; stroke-linecap: round; }
.bp-diaglbl { fill: rgba(184,52,31,0.75); font-size:12px;}

/* Quadrant guides */
.bp-quad-win-hi { fill: rgba(29,110,107,0.04); }
.bp-quad-win-mid { fill: rgba(184,52,31,0.03); }
.bp-quad-loss { fill: rgba(138,51,36,0.03); }

.bp {
  cursor: pointer; outline: none;
  transition: transform .7s cubic-bezier(.2,.7,.3,1), opacity .25s ease;
}
.bp.noanim { transition: none; }
.bp .hit { fill: transparent; }
.bp .core {
  fill: var(--amber); stroke: var(--bg-0); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  transition: transform .2s ease, stroke .2s ease, fill .2s ease;
}
.bp .ring {
  fill: none; stroke: rgba(184,52,31,0.4); stroke-width: 1.5;
  opacity: 0; transition: opacity .3s ease;
}
.bp:hover .ring, .bp.sel .ring { opacity: 1; stroke-width: 2; }
.bp.loss .core { fill: var(--rose); }
.bp.loss .ring { stroke: rgba(138,51,36,0.7); }
.bp.sel .core, .bp:hover .core { transform: scale(1.4); }
.bp:focus-visible .core { stroke: var(--fg); stroke-width: 2.5; }
#benchPlot.dim .bp:not(.sel) { opacity: .2; }

/* Searchable Side Index */
.bench-side { min-width: 0; background: var(--bg-2); border-radius: var(--radius); padding: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.bs-head { margin-bottom: 8px; }
.bs-cap { font-family: var(--mono); font-size:12px; color: var(--faint); letter-spacing:.045em;  margin-bottom: 6px;}
.bench-search-input {
  width: 100%;
  background: var(--bg-1);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: var(--mono);
  font-size:12px;
  padding: 5px 8px;
  outline: none;
  transition: border-color .15s;}
.bench-search-input:focus { border-color: var(--amber); }

.bench-index { list-style: none; margin: 0; padding: 0; max-height: 400px; overflow-y: auto; }
.bi-btn {
  width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto auto;
  gap: 6px; align-items: baseline; text-align: left;
  font-family: var(--mono); font-size:12px; color: var(--muted);
  background: none; border: none; border-radius: 6px; padding: 5px 7px;
  cursor: pointer; transition: all .15s ease;}
.bi-btn:hover, .bi-btn.sel { background: rgba(184,52,31,0.08); color: var(--fg); box-shadow: inset 2px 0 0 var(--amber); }
.bi-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: -1px; }
.bi-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-score { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.bi-delta { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.bi-delta.good { color: var(--mint); }
.bi-delta.bad { color: var(--rose); }
.bi-delta.na { color: var(--faint); font-weight: 400; }

/* Floating Tooltip Scorecard */
.bench-card {
  position: absolute; z-index: 15; width: 238px; pointer-events: none;
  background: var(--bg-1); border-radius: var(--radius); padding: 12px 14px;
  box-shadow: 0 0 0 1px var(--line-strong), 0 16px 36px rgba(26,22,18,0.22);}
.sc-name { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.sc-cat { font-family: var(--mono); font-size:12px; color: var(--amber); letter-spacing:.045em;  margin-bottom: 8px;}
.sc-grid { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; font-size:12px; color: var(--muted);}
.sc-grid .k { display: inline-flex; align-items: center; gap: 7px; }
.sc-grid .sw { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sc-grid b { text-align: right; font-weight: 600; font-size:12px; font-variant-numeric: tabular-nums; color: var(--fg);}
.sc-grid b.me { color: var(--amber); }
.sc-ref { color: var(--faint); font-weight: 400; font-size:12px;}
.sc-delta { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size:12px;}
.sc-delta .good { color: var(--mint); font-weight: 700; }
.sc-delta .bad { color: var(--rose); font-weight: 700; }
.sc-harness { margin-top: 6px; font-family: var(--mono); font-size:12px; color: var(--faint); line-height: 1.4; border-top: 1px dashed rgba(26,22,18,0.07); padding-top: 6px;}

.bench-readout { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-strong); }

/* Widget 3: Comparative Bar Matrix & Waterfall */
.bars-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: flex-end;
  margin-bottom: var(--s-4);
}
.bars-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bar-card {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 0 0 1px var(--line);
  transition: all .15s ease;
  cursor: pointer;
}
.bar-card:hover {
  background: rgba(184,52,31,0.04);
  box-shadow: 0 0 0 1px var(--line-strong);
  transform: translateY(-1px);
}
.bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 8px;
}
.bar-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bar-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-tag {
  font-family: var(--mono);
  font-size:12px;
  letter-spacing:.045em;
  color: var(--faint);
  background: var(--bg-1);
  padding: 2px 6px;
  border-radius: 4px;
  flex: none;}
.bar-stat {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  flex: none;
  display: flex;
  gap: 8px;
}
.bar-stat .hero-score { color: var(--amber); }
.bar-stat .delta-badge {
  font-size:12px;
  padding: 1px 6px;
  border-radius: 4px;}
.bar-stat .delta-badge.good { color: var(--mint); background: rgba(29,110,107,0.12); }
.bar-stat .delta-badge.bad { color: var(--rose); background: rgba(138,51,36,0.12); }

/* Dual bar track */
.dual-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.track-row {
  display: grid;
  grid-template-columns: 60px 1fr 44px;
  gap: 8px;
  align-items: center;
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);}
.track-bar-bg {
  height: 7px;
  background: rgba(26,22,18,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.track-val { text-align: right; color: var(--fg); font-weight: 600; }

/* Waterfall bar track */
.wf-track-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  height: 14px;
  background: rgba(26,22,18,0.04);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.wf-track-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1.5px;
  background: rgba(26,22,18,0.3);
  z-index: 2;
}
.wf-left { display: flex; justify-content: flex-end; }
.wf-right { display: flex; justify-content: flex-start; }

/* Widget 4: Serving Economics & Pareto Frontier */
.frontier-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: flex-end;
  margin-bottom: var(--s-4);
}
.frontier-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(230px, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.frontier-plot-wrap {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
#frontierSvg {
  display: block;
  width: 100%;
  height: auto;
}
.frontier-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.frontier-info-box {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
}
.frontier-info-box .fib-head {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
}
.frontier-threshold-line {
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.frontier-curve {
  fill: none;
  stroke: rgba(29,110,107,0.7);
  stroke-width: 2;
  stroke-dasharray: 5 3;
}
.frontier-node {
  cursor: pointer;
  transition: transform .2s ease;
}
.frontier-node:hover { transform: scale(1.35); }

/* Widget 5: Master Table Matrix */
.matrix-ctl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.matrix-search-input {
  flex: 1;
  min-width: 220px;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12px;
  padding: 7px 12px;
  outline: none;
}
.matrix-search-input:focus { border-color: var(--amber); }
.matrix-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
  background: var(--bg-1);
}
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}
.matrix-table th {
  background: var(--bg-2);
  color: var(--muted);
  font-weight: 600;
  font-size:12px;
  letter-spacing:.045em;
  
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  user-select: none;}
.matrix-table th.sortable { cursor: pointer; }
.matrix-table th.sortable:hover { color: var(--amber); }
.matrix-table th.r { text-align: right; }
.matrix-table th.c { text-align: center; }
.matrix-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(26,22,18,0.05);
  color: var(--fg);
}
.matrix-table tr.matrix-row {
  cursor: pointer;
  transition: background .12s;
}
.matrix-table tr.matrix-row:hover {
  background: rgba(184,52,31,0.05);
}
.matrix-table tr.matrix-row.expanded {
  background: rgba(184,52,31,0.08);
  box-shadow: inset 3px 0 0 var(--amber);
}
.matrix-table tr.matrix-row td.r { text-align: right; font-variant-numeric: tabular-nums; }
.matrix-table tr.matrix-row td.c { text-align: center; }
.matrix-table tr.matrix-row td.hero-col { color: var(--amber); font-weight: 600; }
.matrix-table tr.matrix-row td.delta-col.good { color: var(--mint); font-weight: 700; }
.matrix-table tr.matrix-row td.delta-col.bad { color: var(--rose); font-weight: 700; }

.matrix-drawer-row td {
  background: var(--bg-0);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}
.matrix-drawer-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.drawer-block .db-title {
  font-family: var(--mono);
  font-size:12px;
  color: var(--amber);
  
  letter-spacing:.045em;
  margin-bottom: 4px;}

/* ============================================================
   Section 04: Gated DeltaNet & Associative Memory Styles
   ============================================================ */

/* 1. Associative Memory Playground (#w-delta) */
.delta-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}
.delta-presets {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.delta-presets .preset-label {
  font-family: var(--mono);
  font-size:12px;
  color: var(--faint);
  
  letter-spacing:.045em;}
.delta-presets .w-btn {
  background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-size:12px;
  padding: 5px 9px;
  border-radius: 6px;}
.delta-presets .w-btn:hover {
  background: var(--bg-2);
  color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber);
}
.delta-btns {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.delta-btns .w-btn {
  padding: 6px 12px;
  font-size:12px;}
.delta-matrix-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: var(--s-3);
}
@media (max-width: 820px) {
  .delta-matrix-wrap {
    grid-template-columns: 1fr;
  }
;}
.delta-matrix-box, .delta-probe-box {
  background: var(--bg-2);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size:12px;}
.delta-box-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--fg);
}
.delta-grid-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 0;
  font-size:12px;}
.delta-grid-table th {
  padding: 4px 6px;
  font-weight: 500;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.delta-grid-table th:first-child {
  text-align: left;
}
.delta-grid-table td {
  padding: 5px 6px;
  text-align: right;
  border-bottom: 1px solid rgba(26, 22, 18, 0.05);
}
.delta-grid-table tr[data-slot] {
  cursor: pointer;
  transition: background .12s ease;
}
.delta-grid-table tr[data-slot]:hover {
  background: rgba(184, 52, 31, 0.04);
}
.delta-grid-table tr.active-row {
  background: rgba(184, 52, 31, 0.09) !important;
}
.delta-grid-table tr[data-slot]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--amber);
}
.delta-cell-val {
  display: inline-block;
  min-width: 44px;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Section 07: Vision Front-End & Multimodal Projection Styles
   ============================================================ */

/* Interactive stage cards — shared chrome; per-widget accent lives in .active */
#visionPipe .stage,.pipe .stage,.curriculum .cur-item,.funnel-step{cursor:pointer;transition:all .2s ease;}
#visionPipe .stage:hover,.pipe .stage:hover,.curriculum .cur-item:hover,.funnel-step:hover{background:var(--bg-2);box-shadow:0 0 0 1px var(--line-strong);transform:translateY(-1px);}

/* 1. Multimodal Pipeline Walkthrough (#w-vision-pipe) */
#visionPipe .stage.active {
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--mint);
}
#visionPipe .stage.active .st-num {
  color: var(--mint);
}

/* ============================================================
   Section 08: Multi-Token Prediction & Speculative Engine Styles
   ============================================================ */

/* 1. MTP Verification Tree Layout (#w-mtp-tree) */
.mtp-tree-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: var(--s-4);
  align-items: start;
  margin-top: var(--s-3);
}
@media (max-width: 960px) {
  .mtp-tree-layout {
    grid-template-columns: 1fr;
  }
;}
.mtp-tree-visual-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.mtp-tree-info-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.mtp-svg-wrap {
  position: relative;
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
#mtpTreeSvg {
  display: block;
  width: 100%;
  height: auto;
}
#mtpTreeSvg g.clickable-node {
  cursor: pointer;
}
#mtpTreeSvg g.clickable-node rect {
  transition: all 0.15s ease;
}
#mtpTreeSvg g.clickable-node:hover rect {
  filter: drop-shadow(0 2px 8px rgba(184, 52, 31, 0.25));
  stroke-width: 1.8px;
}
#mtpTreeSvg g.clickable-node.selected rect {
  stroke-width: 2.2px;
  stroke: var(--amber) !important;
  filter: none;}

/* 2D Mask Matrix View */
.mtp-mask-wrap {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.mtp-mask-grid-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.mtp-mask-title {
  font-family: var(--mono);
  font-size:12px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.04em;}
.mtp-mask-table-wrap {
  overflow-x: auto;
}
.mtp-mask-explainer {
  min-height: 2.4em;
  margin-top: var(--s-2);
  font-size: 12px;
  color: var(--muted);
}
.mtp-mask-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  font-family: var(--mono);
  font-size:12px;}
.mtp-mask-table th, .mtp-mask-table td {
  text-align: center;
  padding: 6px 4px;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.mtp-mask-table th {
  background: var(--bg-1);
  color: var(--muted);
  font-size:12px;
  font-weight: 600;
  border: 1px solid var(--line);
  white-space: nowrap;}
.mtp-mask-cell.allowed {
  background: rgba(29, 110, 107, 0.14);
  color: var(--mint);
  border: 1px solid rgba(29, 110, 107, 0.4);
  font-weight: 600;
  cursor: pointer;
}
.mtp-mask-cell.allowed:hover, .mtp-mask-cell.allowed.highlighted {
  background: rgba(29, 110, 107, 0.3);
  box-shadow: 0 0 0 1px var(--mint);
}
.mtp-mask-cell.masked {
  background: rgba(184, 52, 31, 0.06);
  color: rgba(184, 52, 31, 0.55);
  border: 1px dashed rgba(184, 52, 31, 0.28);
  cursor: pointer;
}
.mtp-mask-cell.masked:hover, .mtp-mask-cell.masked.highlighted {
  background: rgba(184, 52, 31, 0.16);
  color: var(--amber);
}
.mtp-mask-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.mask-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mask-legend-chip {
  font-family: var(--mono);
  font-size:12px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;}
.mask-legend-chip.allowed {
  background: rgba(29, 110, 107, 0.15);
  color: var(--mint);
  border: 1px solid rgba(29, 110, 107, 0.4);
}
.mask-legend-chip.masked {
  background: rgba(184, 52, 31, 0.08);
  color: var(--amber);
  border: 1px dashed rgba(184, 52, 31, 0.3);
}

/* Parallel Verification Cycle View */
.mtp-verif-wrap {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.mtp-verif-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.verif-prompt-box {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}
.verif-label {
  font-family: var(--mono);
  font-size:12px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: 0.08em;
  flex-shrink: 0;}
.verif-text code {
  background: var(--bg-1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--fg);
  font-size:12px;}
.mtp-verif-candidates {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.verif-candidate-row {
  display: grid;
  grid-template-columns: 85px 1fr 90px 90px;
  align-items: center;
  gap: 8px;
  background: var(--bg-1);
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size:12px;}
.verif-candidate-row.accepted {
  border-color: rgba(29, 110, 107, 0.4);
  background: rgba(29, 110, 107, 0.06);
}
.verif-candidate-row.rejected {
  border-color: rgba(184, 52, 31, 0.4);
  background: rgba(184, 52, 31, 0.06);
}
.verif-role-tag {
  font-size:12px;
  font-weight: 600;
  
  color: var(--muted);}
.verif-token-text {
  font-weight: 600;
  color: var(--fg);
}
.verif-prob-val {
  font-size:12px;
  color: var(--muted);
  text-align: right;}
.verif-status-badge {
  font-size:12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;}
.verif-status-badge.accept {
  background: rgba(29, 110, 107, 0.15);
  color: var(--mint);
}
.verif-status-badge.reject {
  background: rgba(184, 52, 31, 0.15);
  color: var(--amber);
}

.mtp-verif-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}
.verif-cmp-card {
  background: var(--bg-1);
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size:12px;}
.verif-cmp-card .cmp-title {
  font-size:12px;
  color: var(--faint);
  
  letter-spacing: 0.06em;
  margin-bottom: 4px;}
.verif-cmp-card .cmp-stat {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}

/* Dynamic Inspector Card */
.mtp-inspector-card {
  background: var(--bg-1);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inspector-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inspector-badge {
  font-family: var(--mono);
  font-size:12px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: 0.12em;}
.inspector-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.inspector-math {
  font-family: var(--mono);
  font-size:12px;
  background: var(--bg-2);
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--amber);
  word-break: break-all;}
.inspector-body {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}
.inspector-props {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.ip-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ip-lbl {
  font-family: var(--mono);
  font-size:12px;
  color: var(--faint);
  letter-spacing: 0.06em;}
.ip-val {
  font-family: var(--mono);
  font-size:12px;
  font-weight: 600;
  color: var(--fg);}

/* ============================================================
   Section 09: Data Pipeline & Synthesis Styles
   ============================================================ */

/* 1. 5-Stage Funnel (#w-data-funnel) */
.funnel-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  margin-bottom: var(--s-3);
}
.funnel-step {
  background: var(--bg-1);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: 0 0 0 1px var(--line);
  text-align: center;
}
.funnel-step.active {
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--sky);
}
.fs-num {
  font-family: var(--mono);
  font-size:12px;
  letter-spacing:.045em;
  color: var(--faint);
  margin-bottom: 2px;}
.funnel-step.active .fs-num {
  color: var(--sky);
}
.fs-name {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 3px;
  white-space: nowrap;
}
.fs-vol {
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);}
.funnel-detail-card {
  background: var(--bg-1);
  border-radius: var(--radius);
  padding: var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
}

/* 2. Dynamic Corpus Mix (#w-data-mix) */
.mix-stage-ctl {
  margin-bottom: var(--s-3);
}
.mix-bar-wrap {
  margin: var(--s-3) 0 var(--s-4);
  background: var(--bg-1);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
}
.mix-stacked-bar {
  display: flex;
  position: relative;
  height: 20px;
  background: rgba(26,22,18,0.05);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);}
.msb-seg{
  position:absolute;left:0;top:0;height:100%;width:100%;
  transform-origin:left center;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);}
.msb-seg.web { background: var(--sky); }
.msb-seg.code { background: var(--mint); }
.msb-seg.stem { background: var(--amber); }
.msb-seg.multi { background: var(--iris); }
.mix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);}
.mix-stats {
  background: var(--bg-1);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
}

/* 3. Sequence Packing Visualizer (#w-data-packing) */
.packing-ctl {
  margin-bottom: var(--s-3);
}
.packing-visual {
  background: var(--bg-1);
  border-radius: var(--radius);
  padding: var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pv-seq-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pv-track-bar {
  display: flex;
  gap: 6px;
  min-height: 58px;
  width: 100%;
}
.pv-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: var(--mono);
  color: #fff;
  transition: all .2s;
  padding: 6px 8px;
  text-align: center;
  min-width: 0;
  box-sizing: border-box;
}
.pv-doc .doc-lbl {
  font-weight: 700;
  font-size:12px;
  line-height: 1.3;
  white-space: normal;
  display: block;}
.pv-doc .pos-lbl {
  font-size:12px;
  opacity: 0.92;
  line-height: 1.25;
  margin-top: 3px;
  display: block;}
.pv-doc.d1 { background: #2b7a9e; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.pv-doc.d2 { background: #1d6e6b; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.pv-doc.d3 { background: #b8341f; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.pv-doc.bleed { background: #8a3324 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }

.pv-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-2);
  margin-top: 2px;
}
.pv-stat-card {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pv-stat-lbl {
  font-family: var(--mono);
  font-size:12px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: 0.05em;}
.pv-stat-val {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
}

@media (max-width: 600px) {
  .pv-track-bar {
    flex-direction: column;
    min-height: auto;
  }
  .pv-doc {
    padding: 8px 10px;
  }
;}

/* ============================================================
   Section 10: Pretraining & Scaling Curriculum Styles
   ============================================================ */

/* 1. Interactive 3-Stage Curriculum */
.curriculum .cur-item:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px;} /* ponytail: keyboard focus ring matching the active-stage amber accent */
.curriculum .cur-item.active {
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--amber);
}
.curriculum .cur-item.active .cur-title {
  color: var(--amber);
}

/* 2. Loss Trajectory Simulator (#w-pretrain-loss) */
.loss-ctl {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  background: var(--bg-1);
  padding: var(--s-3);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
}
.loss-display {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.loss-plot-wrap {
  position: relative;
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
#lossSvg {
  display: block;
  width: 100%;
  height: auto;
}
.loss-stats {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* 3. Supercomputer Compute Calculator (#w-pretrain-calc) */
.calc-ctl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  background: var(--bg-1);
  padding: var(--s-3);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
}
.calc-readout {
  background: var(--bg-1);
  border-radius: var(--radius);
  padding: var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
}
.calc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.cs-card {
  background: var(--bg-2);
  border-radius: 6px;
  padding: 10px 14px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.cs-num {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 2px;
}
.cs-lbl {
  font-family: var(--mono);
  font-size:12px;
  color: var(--faint);
  
  letter-spacing:.045em;}

/* 4. Optimizer Dynamics & Beta2 Inspector (#w-optim-dyn) */
.optim-ctl {
  margin-bottom: var(--s-3);
}
.optim-display {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.optim-plot-wrap {
  position: relative;
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
#optimSvg {
  display: block;
  width: 100%;
  height: auto;
}
.optim-stats {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ============================================================
   Section 11: Post-Training & GRPO Styles
   ============================================================ */

/* 1. Interactive 4-Stage Post-Training Pipeline */
.pipe .stage:focus-visible{outline:2px solid var(--iris);outline-offset:2px;border-radius:var(--radius);} /* ponytail: keyboard focus ring matching the §11 post-training iris accent */
.pipe .stage.active {
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--iris);
}
.pipe .stage.active .st-num {
  color: var(--iris);
}

/* 2. Live GRPO Rollout & Advantage Simulator (#w-grpo-sim) */
.grpo-ctl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  background: var(--bg-1);
  padding: var(--s-3);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
}
.grpo-rollouts-wrap {
  background: var(--bg-1);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
}
.grpo-rollouts-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);}
.grpo-rollouts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grpo-card {
  background: var(--bg-2);
  border-radius: 6px;
  padding: 10px 14px;
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid;
  grid-template-columns: 80px 1fr 140px;
  gap: 12px;
  align-items: center;
  transition: all .15s ease;
}
.grpo-card:hover {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.grpo-card.pos {
  border-top:2px solid var(--mint);}
.grpo-card.neg {
  border-top:2px solid var(--rose);}
.grpo-id {
  font-family: var(--mono);
  font-size:12px;
  font-weight: 700;
  color: var(--fg);}
.grpo-text {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.grpo-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-family: var(--mono);
  font-size:12px;}
.grpo-adv {
  font-weight: 700;
}
.grpo-adv.pos { color: var(--mint); }
.grpo-adv.neg { color: var(--rose); }
.grpo-reward-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size:12px;
  font-weight: 600;}
.grpo-reward-badge.pass { background: rgba(29,110,107,0.15); color: var(--mint); }
.grpo-reward-badge.fail { background: rgba(138,51,36,0.15); color: var(--rose); }

/* 3. Chain-of-Thought & Agentic Trace Visualizer (#w-cot-trace) */
.trace-tabs-bar {
  margin-bottom: var(--s-3);
}
.cot-trace-viewer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-1);
  padding: var(--s-4);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
}
.cot-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cot-role {
  font-family: var(--mono);
  font-size:12px;
  
  letter-spacing:.045em;
  color: var(--faint);}
.cot-bubble {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px;
  color: var(--fg);
  line-height: 1.5;
}
.cot-think-block {
  background: rgba(43,58,138,0.05);
  border-top:2px solid var(--iris);
  padding: 10px 14px;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin: 6px 0;}
.cot-tool-block {
  background: rgba(184,52,31,0.06);
  border: 1px dashed var(--amber);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size:12px;
  color: var(--amber);
  margin: 6px 0;}
.cot-obs-block {
  background: rgba(138,86,16,0.06);
  border-top:2px solid var(--sky);
  border-radius: 0;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size:12px;
  color: var(--sky);
  margin: 6px 0;}

/* ============================================================
   Section 12: Inference & Optimizations Styles
   ============================================================ */

/* 1. VRAM Stacked Visual Bar */
.vram-stacked-wrap {
  margin: var(--s-3) 0 var(--s-4);
  background: var(--bg-1);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
}
.vram-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);
  margin-bottom: 8px;}
.vram-stacked-bar {
  display: flex;
  position: relative;
  height: 20px;
  background: rgba(26,22,18,0.05);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
  position: relative;}
.vsb-seg{
  position:absolute;left:0;top:0;height:100%;width:100%;
  transform-origin:left center;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);}
.vsb-seg.weights { background: var(--amber); }
.vsb-seg.kv { background: var(--mint); }
.vsb-seg.deltanet { background: var(--sky); }
.vsb-seg.overhead { background: var(--iris); }
.vsb-seg.overflow { background: var(--rose) !important; }

.vram-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);}
.vl-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vl-sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* 2. Roofline & Tok/s Simulator (#w-roofline) */
.roofline-ctl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  background: var(--bg-1);
  padding: var(--s-3);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
}
.roofline-display {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.roofline-plot-wrap {
  position: relative;
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
#rooflineSvg {
  display: block;
  width: 100%;
  height: auto;
}
.roofline-stats {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.rf-stat-box {
  background: var(--bg-1);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
}
.rf-head {
  font-family: var(--mono);
  font-size:12px;
  
  letter-spacing:.045em;
  color: var(--faint);
  margin-bottom: 8px;}
.rf-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);}
.rf-row:first-of-type { border-top: none; }
.rf-row .val { font-weight: 600; color: var(--fg); }
.rf-row .val.amber { color: var(--amber); }
.rf-row .val.mint { color: var(--mint); }
.rf-row .val.rose { color: var(--rose); }

/* 3. Chunked Prefill & Batch Scheduler (#w-batch-sim) */
.sched-ctl {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.sched-pipeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-1);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
}
.sched-track {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: center;
}
.sched-seq-name {
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);
  white-space: nowrap;}
.sched-blocks {
  display: flex;
  gap: 4px;
  height: 24px;
}
.sched-chunk {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size:12px;
  font-weight: 600;
  border-radius: 4px;
  color: var(--bg-0);
  transition: all .2s;}
.sched-chunk.prefill { background: var(--amber); }
.sched-chunk.decode { background: var(--mint); }
.sched-chunk.bubble { background: rgba(26,22,18,0.05); color: var(--faint); }

/* Quantization Format Cards */
.quant-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
.quant-format-card {
  background: var(--bg-1);
  border-radius: var(--radius);
  padding: var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
  transition: all .2s ease;
}
.quant-format-card:hover {
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.qfc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.qfc-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--fg);
}
.qfc-tag {
  font-family: var(--mono);
  font-size:12px;
  
  letter-spacing:.045em;}
.qfc-bits {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
}
.qfc-bits .bit {
  font-family: var(--mono);
  font-size:12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;}
.qfc-bits .bit.s { background: var(--amber); color: var(--bg-0); }
.qfc-bits .bit.e { background: var(--sky); color: var(--bg-0); }
.qfc-bits .bit.m { background: var(--mint); color: var(--bg-0); }
.qfc-bits .bit.scale { background: rgba(43,58,138,0.2); color: var(--iris); }
.qfc-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* ============================================================
   Section 14: PyTorch Code Studio & Tensor Tracer Styles
   ============================================================ */

/* 1. Tensor Tracer Widget (#w-code-tracer) */
.tracer-ctl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  background: var(--bg-1);
  padding: var(--s-3);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
}
.tracer-display {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.tracer-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trace-card {
  position: relative;
  background: var(--bg-2);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: all .2s ease;
}
.trace-card:hover {
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 2px 8px rgba(26,22,18,0.22);
  background: var(--bg-1);}
.trace-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.trace-op {
  font-family: var(--mono);
  font-size:12px;
  font-weight: 600;
  color: var(--amber);}
.trace-tag {
  font-family: var(--mono);
  font-size:12px;
  color: var(--faint);
  
  letter-spacing:.045em;}
.trace-tensor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.trace-shape {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  background: rgba(26,22,18,0.05);
  padding: 2px 8px;
  border-radius: 4px;
}
.trace-shape.highlight {
  color: var(--mint);
  background: rgba(29,110,107,0.12);
  box-shadow: 0 0 0 1px rgba(29,110,107,0.3);
}
.trace-bytes {
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);}
.trace-math {
  font-size:12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;}
.trace-math code {
  color: var(--sky);
  font-family: var(--mono);
  font-size:12px;}
.trace-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 12px;
  color: var(--faint);
  font-size:12px;}

/* Tracer Stats Sidebar */
.tracer-stats {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.tracer-stat-box {
  background: var(--bg-1);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  box-shadow: 0 0 0 1px var(--line);
}
.tsb-head {
  font-family: var(--mono);
  font-size:12px;
  
  letter-spacing:.045em;
  color: var(--faint);
  margin-bottom: 8px;}
.tsb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);}
.tsb-row:first-of-type { border-top: none; }
.tsb-row .val { font-weight: 600; color: var(--fg); }
.tsb-row .val.amber { color: var(--amber); }
.tsb-row .val.mint { color: var(--mint); }
.tsb-row .val.rose { color: var(--rose); }

/* 2. PyTorch Code Studio (#w-code-lab) */
.code-studio-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: 0;
  background: var(--bg-1);
  padding: 8px 12px;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 0 0 1px var(--line);
}
.code-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.code-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;}
.code-tab:hover {
  color: var(--fg);
  background: rgba(26,22,18,0.05);
}
.code-tab.on {
  color: var(--amber);
  background: var(--bg-2);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--line-strong), inset 0 -2px 0 var(--amber);
}
.tab-badge {
  font-size:12px;
  
  letter-spacing:.045em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(26,22,18,0.08);
  color: var(--faint);}
.code-tab.on .tab-badge {
  background: rgba(184,52,31,0.15);
  color: var(--amber);
}

.code-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.code-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-2);
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
  transition: all .15s ease;}
.code-btn:hover {
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.code-btn.primary {
  background: rgba(184,52,31,0.12);
  color: var(--amber);
  box-shadow: 0 0 0 1px rgba(184,52,31,0.4);
  font-weight: 600;
}
.code-btn.primary:hover {
  background: rgba(184,52,31,0.22);
}
.code-btn .btn-icon { font-size: 12px; }

.code-editor-wrap {
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
.code-file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-1);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 8px;
}
.cf-filename {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--amber);
  margin-right: 8px;
}
.cf-desc {
  font-size: 12px;
  color: var(--muted);
}
.cf-meta {
  font-family: var(--mono);
  font-size:12px;
  color: var(--faint);
  background: rgba(26,22,18,0.04);
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--line);}

/* Crisp ivory parchment code editor — high contrast editorial style */
.code-studio-pre {
  margin: 0;
  border-radius: 0;
  max-height: 520px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.72;
  background: #fbf8f1 !important;
  color: var(--fg) !important;
  padding: var(--s-4) var(--s-5);
  box-shadow: inset 0 2px 6px rgba(26,22,18,0.04);
  scrollbar-color: rgba(26,22,18,0.22) transparent;
  scrollbar-width: thin;
}
.code-studio-pre::-webkit-scrollbar{width:8px;height:8px;}
.code-studio-pre::-webkit-scrollbar-track{background:transparent;}
.code-studio-pre::-webkit-scrollbar-thumb{background:rgba(26,22,18,0.2);border-radius:4px;}
.code-studio-pre::-webkit-scrollbar-thumb:hover{background:var(--amber);}
pre.code.code-studio-pre .k{color:#1e3a8a;font-weight:600;}   /* deep royal indigo */
pre.code.code-studio-pre .f{color:#0d6e64;font-weight:600;}   /* emerald teal */
pre.code.code-studio-pre .n{color:#b8341f;font-weight:600;}   /* terracotta red */
pre.code.code-studio-pre .s{color:#8a5314;}                   /* warm leather amber */
pre.code.code-studio-pre .c{color:#766a5b;font-style:italic;} /* pencil marginalia */

/* 3. Architectural State Contract Matrix (#w-code-contract) */
.contract-matrix-wrap {
  width: 100%;
  overflow: hidden;
  margin-top: var(--s-3);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
  background: var(--bg-1);
}
.contract-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--bg-1);
}
.contract-table th,
.contract-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.42;
  word-break: break-word;
  overflow-wrap: break-word;
}
.contract-table th {
  background: var(--bg-2);
  font-family: var(--mono);
  font-size:12px;
  
  letter-spacing:.045em;
  color: var(--muted);
  font-weight: 600;}
.contract-table th:nth-child(1),
.contract-table td:nth-child(1) { width: 19%; }
.contract-table th:nth-child(2),
.contract-table td:nth-child(2) { width: 27%; }
.contract-table th:nth-child(3),
.contract-table td:nth-child(3) { width: 26%; }
.contract-table th:nth-child(4),
.contract-table td:nth-child(4) { width: 28%; }

.contract-table tbody tr:hover {
  background: rgba(26,22,18,0.035);
}
.cm-dim {
  font-family: var(--mono);
  font-size:12px;
  font-weight: 700;
  color: var(--fg);
  white-space: normal;}
.cm-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size:12px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: baseline;}
.cm-badge.amber {
  color: var(--amber);
  background: rgba(184,52,31,0.12);
  box-shadow: 0 0 0 1px rgba(184,52,31,0.3);
}
.cm-badge.mint {
  color: var(--mint);
  background: rgba(29,110,107,0.12);
  box-shadow: 0 0 0 1px rgba(29,110,107,0.3);
}
.cm-code {
  font-family: var(--mono);
  font-size:12px;
  color: var(--sky);
  background: rgba(26,22,18,0.05);
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
  max-width: 100%;
  word-break: break-all;}

@media (max-width: 640px) {
  .contract-matrix-wrap {
    overflow-x: auto;
  }
  .contract-table {
    min-width: 540px;
  }
;}

/* curriculum timeline */
.curriculum{position:relative;margin:var(--s-5) 0;padding-left:26px;}
.curriculum::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:var(--line);
}
.cur-item{position:relative;padding-bottom:var(--s-5);}
.cur-item:last-child{padding-bottom:0;}
.cur-item::before{
  content:"";position:absolute;left:-26px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--bg-0);box-shadow:0 0 0 2px var(--sky);
}
.cur-item:nth-child(2)::before{box-shadow:0 0 0 2px var(--mint);}
.cur-item:nth-child(3)::before{box-shadow:0 0 0 2px var(--amber);}
.cur-item:nth-child(4)::before{box-shadow:0 0 0 2px var(--iris);}
.cur-item .cur-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.cur-item .cur-title{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.008em;}
.cur-item .cur-badge{
  font-family:var(--mono);font-size:12px;color:var(--sky);
  background:rgba(138,86,16,0.1);padding:2px 9px;border-radius:999px;box-shadow:0 0 0 1px rgba(138,86,16,0.3);}
.cur-item:nth-child(2) .cur-badge{color:var(--mint);background:rgba(29,110,107,0.09);box-shadow:0 0 0 1px rgba(29,110,107,0.3);}
.cur-item:nth-child(3) .cur-badge{color:var(--amber);background:rgba(184,52,31,0.09);box-shadow:0 0 0 1px rgba(184,52,31,0.3);}
.cur-item:nth-child(4) .cur-badge{color:var(--iris);background:rgba(43,58,138,0.1);box-shadow:0 0 0 1px rgba(43,58,138,0.3);}
.cur-item p{font-size:13.5px;margin:6px 0 0;}

/* pipeline stages (data) */
.pipe{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:stretch;margin:var(--s-4) 0;}
.pipe .stage{
  flex:1 1 150px;background:var(--bg-1);border-radius:var(--radius);padding:var(--s-3) var(--s-4);
  box-shadow:0 0 0 1px var(--line);position:relative;min-width:150px;
}
.pipe .stage .st-num{
  font-family:var(--mono);font-size:12px;color:var(--sky);letter-spacing:.045em;}
.pipe .stage .st-name{font-weight:640;font-size:13.5px;margin:3px 0;}
.pipe .stage .st-desc{font-size:13px;color:var(--muted);line-height:1.5;}
.pipe .stage::after{
  content:"→";position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  color:var(--faint);font-size:14px;z-index:2;
}
.pipe .stage:last-child::after{display:none;}

/* takeaways */
.takeaways{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-5);}
.take{
  position:relative;overflow:hidden;
  background:var(--bg-1);border-radius:var(--radius);padding:var(--s-5);
  box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .2s,background .2s;
}
.take::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--amber);opacity:.55;
  transition:opacity .2s;
}
.take:hover{background:var(--bg-2);box-shadow:0 0 0 1px var(--line-strong);}
.take:hover::before{opacity:1;}
.take .tk-num{
  font-family:var(--mono);font-size:22px;font-weight:600;color:var(--amber);
  display:block;margin-bottom:8px;letter-spacing:-.01em;
}
.take .tk-title{font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:6px;letter-spacing:-.008em;color:var(--fg);}
.take p{font-size:14.5px;color:var(--muted);margin:0;}

/* footer */
footer{
  border-top:1px solid var(--line);margin-top:var(--s-8);
  padding:var(--s-7) 0 var(--s-8);color:var(--faint);font-size:14px;
}
footer .wrap{display:flex;flex-direction:column;gap:var(--s-2);}
footer .wrap > div:first-child{font-size:14.5px;line-height:1.6;}
footer .wrap > div:first-child b{letter-spacing:.045em;}
footer a{color:var(--muted);}
footer a:hover{color:var(--amber);}

/* ---------- references ---------- */
.refs{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);}
.refs .sec-tag{margin-bottom:var(--s-4);}
.refs ol{
  list-style:none;counter-reset:ref;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--s-3);}
.refs ol li{
  counter-increment:ref;
  font-size:13.5px;line-height:1.55;color:var(--muted);
  padding-left:1.9em;text-indent:-1.9em;}
.refs ol li::before{
  content:counter(ref) ".";display:inline-block;
  width:1.9em;text-indent:0;
  font-family:var(--mono);font-size:12px;color:var(--faint);}

/* ---------- accessibility utilities ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-48px;left:var(--s-4);z-index:100;
  background:var(--bg-2);color:var(--fg);
  box-shadow:0 0 0 1px rgba(184,52,31,0.6);border-radius:0 0 var(--radius) var(--radius);
  padding:10px 18px;font-size:13px;font-weight:600;transition:top .15s ease;
}
.skip-link:focus{top:0;text-decoration:none;}

/* back-to-top floating button */
.totop{
  position:fixed;right:18px;bottom:18px;z-index:55;
  width:44px;height:44px;border-radius:12px;border:none;cursor:pointer;
  background:rgba(26,22,18,0.85);color:#cbbfa8;
  box-shadow:0 0 0 1px var(--line-strong),0 8px 24px rgba(26,22,18,0.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .25s,transform .25s,color .15s,background .15s;}
.totop.on{opacity:1;transform:translateY(0);pointer-events:auto;}
.totop:hover{color:var(--amber);background:rgba(184,52,31,0.12);box-shadow:0 0 0 1px rgba(184,52,31,0.45),0 8px 24px rgba(26,22,18,0.22);}

/* copy button for code blocks */
.code-copy{
  position:absolute;top:8px;right:8px;z-index:2;
  background:rgba(26,22,18,0.04);color:var(--muted);
  border:1px solid var(--line-strong);border-radius:6px;
  font-family:var(--mono);font-size:12px;letter-spacing:.045em;
  padding:4px 9px;cursor:pointer;opacity:0;transition:opacity .15s,color .15s,background .15s;}
pre.code:hover .code-copy{opacity:1;}
.code-copy:hover{color:var(--amber);background:rgba(184,52,31,0.1);}
.code-copy.ok{color:var(--mint) !important;border-color:rgba(29,110,107,0.4) !important;}
h2 .anchor:focus-visible,h3 .anchor:focus-visible{opacity:1;}
.code-copy:focus-visible{opacity:1;}

.widget-visual{margin:var(--s-3) 0;overflow-x:auto;}
.widget-visual svg{margin:0;}
/* 3D MRoPE Phase Visualizer (#w-rope) centered dial layout */
#w-rope .widget-visual{display:flex;justify-content:center;align-items:center;margin:var(--s-4) auto var(--s-2);width:100%;text-align:center;overflow:visible;}
#w-rope .widget-visual svg{width:230px;height:230px;min-width:180px;max-width:100%;margin:0 auto;display:block;outline:none;transition:filter .2s ease;}
#w-rope .widget-visual svg:focus-visible{filter:none;}
#w-rope .fig-cap{text-align:center;margin-bottom:var(--s-3);}
#w-rope .w-tag{color:var(--mint);background:rgba(29,110,107,0.1);box-shadow:0 0 0 1px rgba(29,110,107,0.32);}

/* FFN widget HTML legend (overrides the SVG-internal legend) */
.ffn-legend{
  display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;
  margin:6px 0 12px;padding:8px 12px;
  background:var(--bg-2);border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--mono);font-size:12px;}
.ffn-legend .lg-item{display:inline-flex;align-items:center;gap:7px;}
.ffn-legend .lg-sw{
  display:inline-block;width:18px;height:3px;border-radius:2px;
  background:currentColor;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important;scroll-behavior:auto !important;}
  .bits .bit{transition:none;}
  .bits-label{opacity:1;transform:none;transition:none;}
  .layer-cell:hover,.dash-kpi:hover,.bar-card:hover,.bp:hover .core,.bp.sel .core,.radar-vertex:hover,.frontier-node:hover,.w-btn:hover,.funnel-step:hover,.take::before,#visionPipe .stage:hover,.pipe .stage:hover,.curriculum .cur-item:hover{transform:none !important;}
;}

/* responsive */
@media (max-width:860px){
  button:not(.layer-cell),select,input:not([type=range]),.nav-grid a{min-height:44px;min-width:44px;}
  .spec-grid{grid-template-columns:1fr 1fr;} /* folded from the former 900px breakpoint */
  .spec-cell,.spec-cell+.spec-cell{padding-left:0;padding-right:var(--s-4);}
  .spec-cell:nth-child(even){padding-left:var(--s-4);border-left:1px solid var(--line);}
  .spec-cell:nth-child(n+3){border-top:1px solid var(--line);}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .stat-grid.three-up{grid-template-columns:repeat(2,1fr);}
  .compare{grid-template-columns:1fr;}
  .takeaways{grid-template-columns:1fr;}
  .bench-body{grid-template-columns:1fr;}
  .bench-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 12px;}
  .bench-card{width:200px;}
  .tracer-display { grid-template-columns: 1fr; }
  .code-studio-bar { flex-direction: column; align-items: stretch; }
  .code-actions { justify-content: flex-end; }
  .code-file-header { flex-direction: column; align-items: flex-start; }
  .nav-current{display:none;}
  :root{--maxw:100%;}
;}

@media (max-width:560px){
  main.wrap{overflow-x:clip;} /* ponytail: mobile-only fallback, preserves the 320px stability rule */
  .wrap,.topnav-inner{padding-left:var(--s-4);padding-right:var(--s-4);}
  .hero{padding:var(--s-7) var(--s-4) var(--s-6);}
  .widget{padding:var(--s-4);}
  .stat-grid.three-up{grid-template-columns:1fr;}
  .w-out .row{flex-wrap:wrap;}
  .w-out .row > :first-child{min-width:0;}
  .tbl-wrap{width:100%;margin:0;}
  .diagram svg{min-width:0;width:100%;max-width:none;}
  #w-rope .widget-visual svg{width:auto;max-width:100%;}
  .widget-visual #ffnSvg,.widget-visual #effortSvg{width:680px;min-width:680px;}
  .widget-visual #ropeSvg{width:170px;min-width:170px;}
  .bench-vs{margin-left:0;width:100%;}
  .bench-card{width:178px;padding:9px 11px;}
  .sc-grid{gap:3px 12px;}

  /* mobile nav: hide the running-head label, keep brand + contents */
  .nav-brand .nb-tag{display:none;}
;}

/* ---------- print ---------- */
@media print{
  :root{--bg-0:#fff;--bg-1:#fff;--bg-2:#faf8f3;--fg:#111;--muted:#444;--faint:#666;--line:rgba(0,0,0,0.15);--line-strong:rgba(0,0,0,0.35);}
  body{background:#fff;color:#111;font-size:11.5pt;line-height:1.55;}
  body::before,body::after{display:none;}
  .topnav,.progress,.skip-link,.totop,.w-controls,.widget .w-tag,.meta-strip,.code-copy,.anchor,.widget::before,.callout::after,.callout::before,.stat::before,.take::before,.sec-tag::before,footer::before,section+section::before{display:none !important;}
  section{padding:14pt 0 6pt;page-break-inside:auto;}
  h2,h3{page-break-after:avoid;}
  pre,.math,.tbl-wrap,.diagram{page-break-inside:avoid;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25) !important;background:var(--bg-0) !important;overflow:visible;}
  .widget{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3) !important;background:var(--bg-0) !important;}
  .stat,.take,.callout,.compare .col{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25) !important;background:var(--bg-0) !important;}
  .callout::after,.callout::before{display:none;}
  a{color:#111;text-decoration:underline;}
  footer{margin-top:18pt;}
;}