:root{
  --bg:#e3e3e3;
  --bg2:#ededed;
  --panel:#ffffff;
  --panel2:#f4f4f4;
  --line:#c3c3c3;
  --line2:#7d7d7d;
  --ink:#282828;
  --ink2:#383838;
  --ink3:#545454;
  /* per-stage spectrum — also the residual-stream ribbon */
  --c-token:#e36100;
  --c-embed:#a67c00;
  --c-pos:#00a238;
  --c-attn:#0059f3;
  --c-multi:#1f8fd6;
  --c-ffn:#8a00d3;
  --c-resid:#d300eb;
  --c-next:#fb0092;
  --c-arch:#61829a;
  --mono:'ds-system',ui-monospace,monospace;
  --serif:'ds-system',Georgia,serif;
  --disp:'ds-system',system-ui,sans-serif;
  /* --- semantic neutrals (v24 · used by figures + widgets, themable) --- */
  --fig-ink:#282828;      /* strong text inside figures            */
  --fig-ink2:#383838;     /* secondary text                        */
  --fig-mute:#545454;     /* muted labels                          */
  --fig-faint:#7d7d7d;    /* faint / axis                          */
  --fig-fainter:#9a9a9a;  /* faintest annotation                   */
  --fig-line:#c3c3c3;     /* hairlines on figures                  */
  --fig-line2:#cfcfcf;    /* grid / secondary hairline             */
  --fig-surface:#ffffff;  /* raised surface inside a panel         */
  --fig-surface2:#f4f4f4; /* inset surface                         */
  --fig-near:#1c1c1c;     /* near-black glyph on light chip        */
  --on-accent:#ffffff;    /* text sitting on a filled accent       */
  --danger:#c81e1e;       /* error / leaked state                  */
  --danger-bg:#fbeaea;    /* error fill                            */
  --danger-line:#b04a4a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:
    radial-gradient(1200px 700px at 80% -5%, rgba(84,168,255,.06), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(155,140,255,.05), transparent 60%),
    var(--bg);
  color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.wrap{max-width:980px;margin:0 auto;padding:0 22px}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;line-height:1.08}
.mono{font-family:var(--mono)}
a{color:var(--c-multi)}

/* ============ spectrum rail (signature) ============ */
.rail{position:fixed;top:0;left:0;height:100vh;width:6px;z-index:40;
  background:linear-gradient(to bottom,
    var(--c-token),var(--c-embed),var(--c-pos),var(--c-attn),
    var(--c-multi),var(--c-ffn),var(--c-resid),var(--c-next),var(--c-arch));
  opacity:.9}
.rail::after{content:"";position:absolute;inset:0;filter:blur(7px);background:inherit;opacity:.5}
.railnav{position:fixed;top:50%;left:14px;transform:translateY(-50%);z-index:41;
  display:flex;flex-direction:column;gap:10px}
.railnav a{width:11px;height:11px;border-radius:50%;background:var(--dot,#444);
  opacity:.45;transition:opacity .2s,transform .2s;border:1px solid rgba(255,255,255,.15)}
.railnav a:hover,.railnav a.on{opacity:1;transform:scale(1.45)}
@media(max-width:720px){.railnav{display:none}.rail{width:4px}}

/* ============ hero ============ */
.hero{display:flex;flex-direction:column;
  padding:60px 0 20px;position:relative}
.hero>.wrap{min-width:0;width:100%}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink3)}
.hero h1{font-size:clamp(40px,8vw,86px);font-weight:800;margin:.25em 0 .2em;
  background:linear-gradient(100deg,#fff 10%,var(--c-attn) 45%,var(--c-multi) 70%,var(--c-ffn) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lead{font-size:clamp(18px,2.4vw,23px);color:var(--ink2);max-width:680px}
.hero .lead b{color:var(--ink);font-weight:500}
.src{margin-top:26px;font-family:var(--mono);font-size:13px;color:var(--ink3)}
.src a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line2)}

/* hero pipeline animation */
.flow{margin:42px 0 8px;border:1px solid var(--line);border-radius:16px;background:
  linear-gradient(180deg,var(--panel),var(--bg2));padding:20px 14px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.flow::-webkit-scrollbar{height:6px}
.flow::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.flow .track{display:flex;align-items:stretch;gap:0;min-width:max-content;justify-content:flex-start}
.fstage{flex:0 0 116px;width:116px;min-width:116px;padding:12px 8px;position:relative;text-align:center;scroll-snap-align:start}
.fstage:not(:last-child)::after{content:none}
.fstage .fnum{font-family:var(--mono);font-size:11px;color:var(--st)}
.fstage .fname{font-family:var(--disp);font-weight:700;font-size:13px;margin-top:3px;color:var(--ink)}
.fstage .fdot{width:34px;height:34px;border-radius:10px;margin:9px auto 0;
  background:var(--st);box-shadow:0 0 0 0 var(--st);opacity:.85}
.fstage.live .fdot{animation:pulse 1.6s ease-out}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--st);transform:scale(1)}
  40%{transform:scale(1.18)}100%{box-shadow:0 0 0 16px transparent;transform:scale(1)}}
.scrollhint{display:flex;gap:8px;align-items:center;color:var(--ink3);font-family:var(--mono);
  font-size:12px;margin-top:30px;letter-spacing:.1em}
.scrollhint .bar{width:30px;height:1px;background:var(--ink3)}

/* ============ sections ============ */
.sec{padding:22px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:8px}
.snum{font-family:var(--disp);font-weight:800;font-size:clamp(30px,6vw,52px);
  color:var(--st);line-height:.9;opacity:.92;min-width:1.4em}
.sec h2{font-size:clamp(27px,4.6vw,40px);margin:0}
.sub{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--st);margin:2px 0 0}
.sec p{color:var(--ink2);margin:1.05em 0}
.sec p b,.sec li b{color:var(--ink);font-weight:500}
.sec strong{color:var(--ink)}
.kw{color:var(--st);font-weight:500}
.sec ul,.sec ol{color:var(--ink2);padding-left:1.2em}
.sec li{margin:.4em 0}
.lead2{font-size:clamp(19px,2.3vw,22px);color:var(--ink)!important;font-weight:400}

/* tiny explainer card */
.tiny{border-left:3px solid var(--st);background:linear-gradient(90deg,var(--panel),transparent);
  padding:13px 16px;border-radius:0 10px 10px 0;margin:22px 0;font-size:15.5px;line-height:1.55}
.tiny .lab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--st);display:block;margin-bottom:3px}
.tiny .term{font-family:var(--disp);font-weight:700;color:var(--ink)}
.tiny p{margin:.3em 0 0;color:var(--ink2)!important;font-size:15.5px}

/* instrument panel (the dark figures) */
.panel{background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:16px;padding:20px;margin:26px 0;
  box-shadow:0 18px 40px -28px #000}
.panel .ptitle{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);display:flex;align-items:center;gap:9px;margin-bottom:14px}
.panel .ptitle::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--st)}
.cap{font-family:var(--mono);font-size:12.5px;color:var(--ink3);margin-top:12px;line-height:1.5}

.btn{font-family:var(--mono);font-size:13px;background:var(--panel2);color:var(--ink);
  border:1px solid var(--line2);padding:8px 14px;border-radius:9px;cursor:pointer;
  transition:.15s;letter-spacing:.02em}
.btn:hover{border-color:var(--st);color:#fff}
.btn.sm{padding:5px 10px;font-size:12px}
input[type=text]{font-family:var(--mono);font-size:14px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line2);border-radius:9px;padding:10px 12px;width:100%}
input[type=range]{accent-color:var(--st);width:100%}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.note{font-size:14px;color:var(--ink3);font-style:italic}
.callout{background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin:20px 0;font-size:16px;color:var(--ink2)}
.callout b{color:var(--ink)}

/* intuition / "why this works" deep-dive block */
.why{position:relative;border:1px solid var(--line);border-radius:14px;
  padding:16px 18px 16px 20px;margin:24px 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--st) 7%,var(--panel)),var(--bg2));
  overflow:hidden}
.why::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--st)}
.why .wlab{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--st);display:flex;align-items:center;gap:7px;margin-bottom:8px}
.why .wlab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--st);
  box-shadow:0 0 9px var(--st)}
.why p{margin:.55em 0!important;color:var(--ink2)!important;font-size:16px;line-height:1.65}
.why p:first-of-type{margin-top:0!important}
.why p:last-child{margin-bottom:0!important}
.why strong,.why b{color:var(--ink)}

/* token chips */
.tok{display:inline-flex;flex-direction:column;align-items:center;margin:3px;padding:6px 9px;
  border-radius:8px;font-family:var(--mono);font-size:14px;line-height:1.2;
  background:var(--chipbg,#222);border:1px solid var(--chipbd,#333);color:#fff}
.tok .tid{font-size:10.5px;opacity:.75;margin-top:3px}
.tok .gs{opacity:.5}
#tokOut{display:flex;flex-wrap:wrap;margin:6px 0}

/* file cards (tokenizer files) */
.files{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:18px 0}
.file{background:var(--bg);border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.file .fh{font-family:var(--mono);font-size:12.5px;padding:9px 12px;background:var(--panel2);
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;color:var(--ink)}
.file .fh .tag{color:var(--st)}
.file pre{margin:0;padding:12px;font-family:var(--mono);font-size:12px;line-height:1.6;
  color:var(--ink2);overflow-x:auto;white-space:pre}
.file .ck{color:var(--c-embed)} .file .cs{color:var(--c-pos)} .file .cn{color:var(--c-attn)}

/* generic data viz helpers */
svg{display:block;max-width:100%}
.bar-lbl{font-family:var(--mono);font-size:11px;fill:var(--ink3)}
.grid-cell{stroke:var(--bg);stroke-width:1}
table.cfg{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px;margin:8px 0}
table.cfg th,table.cfg td{border:1px solid var(--line);padding:8px 10px;text-align:left}
table.cfg th{color:var(--ink3);font-weight:400;background:var(--panel2);letter-spacing:.05em}
table.cfg td{color:var(--ink2)} table.cfg td:first-child{color:var(--ink)}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:20px;
  border:1px solid var(--st);color:var(--st);margin:2px}

.foot{padding:60px 0 90px;border-top:1px solid var(--line);color:var(--ink3);font-size:15px}
.sitecredit{margin-top:26px;font-family:var(--mono);font-size:12.5px;color:var(--ink2);letter-spacing:.2px}
.sitecredit .heart{color:#e0417a}
.sitecredit b{color:var(--ink);font-weight:600}
.foot .wrap{display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:600px){.foot{padding:40px 0 60px}.xnav{margin-bottom:0;white-space:normal;line-height:1.4}.sitecredit{margin-top:20px;font-size:11.5px;line-height:1.6}}
.foot a{color:var(--ink2)}
.kbd{font-family:var(--mono);font-size:12px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:5px;padding:1px 6px;color:var(--ink2)}
::selection{background:var(--c-multi);color:#06121f}

/* ---- companion-page additions ---- */
.xnav{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;
  color:var(--ink2);border:1px solid var(--line2);border-radius:999px;padding:7px 15px;
  text-decoration:none;margin-bottom:26px;transition:.15s}
.xnav:hover{border-color:var(--c-attn);color:#fff}
.xnav b{color:var(--c-attn)}
.seg{display:inline-flex;gap:4px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:4px;flex-wrap:wrap}
.seg button{font-family:var(--mono);font-size:12.5px;background:transparent;color:var(--ink2);
  border:0;border-radius:7px;padding:7px 13px;cursor:pointer;transition:.13s}
.seg button.on{background:var(--st);color:#0a0d13;font-weight:600}
.seg button:not(.on):hover{color:#fff}
.ctrl{display:grid;grid-template-columns:120px 1fr 74px;gap:14px;align-items:center;margin:11px 0}
.ctrl label{font-family:var(--mono);font-size:12.5px;color:var(--ink2)}
.ctrl .val{font-family:var(--mono);font-size:13px;color:var(--st);text-align:right;font-weight:500}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:16px 0 4px}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:13px 15px}
.stat .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.stat .v{font-family:var(--disp);font-weight:700;font-size:23px;color:var(--ink);margin-top:4px;line-height:1.05}
.stat .v small{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--ink3)}
.stat.hot{border-color:var(--st)}
.stat.hot .v{color:var(--st)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.eq{font-family:var(--mono);font-size:13.5px;color:var(--ink2);background:var(--panel2);
  border:1px solid var(--line);border-radius:9px;padding:11px 14px;margin:12px 0;overflow-x:auto}
.eq b{color:var(--st)}
@media(max-width:560px){.ctrl{grid-template-columns:96px 1fr 58px;gap:9px}}

/* ---- combined single-file app ---- */

/* ============ hamburger section menu ============ */
#menuBtn{position:fixed;top:12px;left:14px;z-index:62;width:40px;height:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--panel);border:1px solid var(--line2);border-radius:9px;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
#menuBtn span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s,opacity .2s}
#menuBtn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#menuBtn.open span:nth-child(2){opacity:0}
#menuBtn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
#menuScrim{position:fixed;inset:0;z-index:61;background:rgba(0,0,0,.5);opacity:0;
  pointer-events:none;transition:opacity .25s}
#menuScrim.open{opacity:1;pointer-events:auto}
#menuPanel{position:fixed;top:0;left:0;height:100vh;width:326px;max-width:86vw;z-index:63;
  background:var(--panel);border-right:1px solid var(--line2);box-shadow:6px 0 30px rgba(0,0,0,.35);
  transform:translateX(-104%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
#menuPanel.open{transform:translateX(0)}
#menuPanel .mhd{padding:20px 20px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--panel);z-index:1}
#menuPanel .mhd b{font-family:var(--mono);font-size:15px;color:var(--ink);letter-spacing:-.3px}
#menuPanel .mhd .msub{font-family:var(--mono);font-size:10.5px;color:var(--ink2);margin-top:3px}
.mpart{padding:14px 12px 4px}
.mpart>.plab{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
  padding:8px 8px;margin-top:2px;border:0;background:transparent;border-radius:7px;font-family:var(--mono);
  font-size:11px;color:var(--ink2);text-transform:uppercase;letter-spacing:.6px;transition:background .15s,color .15s}
.mpart>.plab:hover{background:var(--hover,#f0f0f0);color:var(--ink)}
.mpart>.plab.cur{color:var(--ink)}
.mpart>.plab .pnum{color:var(--c-attn);font-weight:700}
.mpart>.plab .ptxt{flex:1}
.mpart>.plab .pgo{opacity:.4;font-size:15px;line-height:1}
.mpart>.plab:hover .pgo{opacity:.8}
.msec{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  padding:8px 10px;border:0;background:transparent;border-radius:7px;font-family:var(--mono);
  font-size:12.5px;color:var(--ink);transition:background .15s}
.msec:hover{background:var(--hover,#f0f0f0)}
.msec.on{background:var(--seldot,rgba(31,143,214,.14));font-weight:600}
.msec .mdot{width:9px;height:9px;border-radius:50%;background:var(--dot);flex:none}
.msec .mn{color:var(--ink2);font-size:10.5px;width:16px;flex:none}
#menuPanel .mfoot{margin-top:auto;padding:16px 20px 22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--ink2);line-height:1.6}
#menuPanel .mfoot .heart{color:#e0417a}
#menuPanel .mfoot a{color:var(--c-attn);text-decoration:none;border-bottom:1px solid transparent}
#menuPanel .mfoot a:hover{border-bottom-color:var(--c-attn)}
@media(max-width:640px){#menuBtn{top:8px;left:8px;width:38px;height:38px}}@media(max-width:600px){.wrap{padding:0 12px}.sec{padding:18px 0}.panel{border-radius:12px;padding:12px 10px;margin-left:-4px;margin-right:-4px}.ptitle{font-size:12px}.hero{padding:40px 0 14px}.lead,.lead2{font-size:17px}.eyebrow{font-size:10px;letter-spacing:.12em}.tiny{padding:11px 12px}.callout{padding:12px 13px}.eq{font-size:12px;padding:9px 10px;overflow-x:auto;white-space:normal;word-break:break-word}.ctrl{grid-template-columns:1fr auto;gap:6px 10px}.ctrl label{grid-column:1 / -1;font-size:12px}.ctrl input[type=range]{grid-column:1;width:100%;height:26px}.ctrl .val{grid-column:2}.seg{flex-wrap:wrap}.seg button,.btn{padding:8px 10px;font-size:12px}.stats{grid-template-columns:1fr 1fr;gap:8px}.stat .v{font-size:15px}table{font-size:11px}.panel>div>svg{width:auto!important;min-width:520px;max-width:none;display:block}.panel>div{overflow-x:auto;-webkit-overflow-scrolling:touch}.panel>div::-webkit-scrollbar{height:5px}.panel>div::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}}@media(max-width:400px){.stats{grid-template-columns:1fr}.wrap{padding:0 9px}}
button.xnav{background:transparent;cursor:pointer}
.switch-part{cursor:pointer}


/* ===================== NINTENDO DS THEME (ds.css) ===================== */
@font-face{font-family:'ds-system';src:url('ds-system.woff2') format('woff2');font-display:block;}
:root{
  --clip1:polygon(2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px,2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%);
  --clip2:polygon(4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px),0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%);
  --clip4:polygon(8px 100%,8px calc(100% - 2px),6px calc(100% - 2px),6px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 6px),2px calc(100% - 6px),2px calc(100% - 8px),0 calc(100% - 8px),0 8px,2px 8px,2px 6px,4px 6px,4px 4px,6px 4px,6px 2px,8px 2px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 2px,calc(100% - 6px) 2px,calc(100% - 6px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 6px,calc(100% - 2px) 6px,calc(100% - 2px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 2px) calc(100% - 8px),calc(100% - 2px) calc(100% - 6px),calc(100% - 4px) calc(100% - 6px),calc(100% - 4px) calc(100% - 4px),calc(100% - 6px) calc(100% - 4px),calc(100% - 6px) calc(100% - 2px),calc(100% - 8px) calc(100% - 2px),calc(100% - 8px) 100%);
}
html{background:#e3e3e3;}
body{-webkit-font-smoothing:none;font-smooth:never;font-family:var(--disp);letter-spacing:.2px;color:var(--ink);
  background:
    repeating-linear-gradient(transparent,transparent 30px,#cfcfcf 30px,#cfcfcf 32px),
    repeating-linear-gradient(to right,transparent,transparent 30px,#cfcfcf 30px,#cfcfcf 32px),
    repeating-linear-gradient(#ffffff,#ffffff 2px,#e6e6e6 2px,#e6e6e6 4px);
  background-attachment:fixed;}
body,button,input,.mono,.hero h1,.sec h2,.snum,.eyebrow,.sub,.ptitle,.wlab,.k,.v,.val,.cap,.stat .v,.lead,.lead2,.xnav,.seg button,.btn,.fname,.fnum,.tok,.pill,code,.file,.tag,table.cfg,th,td{font-family:var(--disp)!important;}
.hero,.sec,.foot{background:transparent!important;}
.panel,.stat,.file{background:var(--panel);border:2px solid var(--line2);border-radius:0!important;clip-path:var(--clip4);box-shadow:none!important;}
.callout,.tiny{background:#fff;border:2px solid var(--line2);border-left:6px solid var(--st,#494949);border-radius:0!important;clip-path:var(--clip2);}
.why{background:#282828!important;border:2px solid #000;border-radius:0!important;clip-path:var(--clip4);color:#e9e9e9;box-shadow:none!important;}
.why::before{display:none!important;}
.why p,.why li{color:#e3e3e3!important;} .why strong,.why b,.why em{color:#fff;}
.why .wlab{color:var(--st)!important;}
.why .wlab::before{background:var(--st)!important;box-shadow:none!important;border-radius:0;width:7px;height:7px;}
.eq{background:#282828!important;color:#eaeaea!important;border:2px solid #000;border-radius:0!important;clip-path:var(--clip2);}
.eq b{color:var(--st);}
.hero h1{letter-spacing:0;text-shadow:none!important;
  background:linear-gradient(100deg,#1c1c1c 6%,var(--c-attn) 40%,var(--c-token) 72%,var(--c-resid) 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;}
.sec h2{letter-spacing:0;} .snum{color:var(--st);} .eyebrow,.sub{letter-spacing:.12em;}
.seg{background:#ededed;border:2px solid var(--line2);border-radius:0!important;clip-path:var(--clip2);}
.seg button{border-radius:0!important;clip-path:var(--clip1);color:#333;}
.seg button.on{background:var(--st);color:#fff;}
.seg button:not(.on){background:#f6f6f6;border:2px solid #cfcfcf;}
.btn{background:#f2f2f2;border:2px solid var(--line2);color:#282828;border-radius:0!important;clip-path:var(--clip1);box-shadow:none;}
.btn:hover{background:#fff;border-color:var(--st);color:#000;}
.btn.on{background:var(--st)!important;color:#fff!important;border-color:var(--st)!important;}
.btn.on span{color:rgba(255,255,255,.72)!important;}
input[type=range]{accent-color:var(--st);}
input[type=text]{background:#fff;color:#282828;border:2px solid var(--line2);border-radius:0!important;clip-path:var(--clip1);}
.fstage{background:#fff;border:2px solid var(--line2);border-radius:0!important;clip-path:var(--clip2);box-shadow:none;}
.fdot{border-radius:0!important;} .fstage.live{outline:2px solid var(--st);outline-offset:1px;}
.railnav a{border-radius:0!important;width:10px;height:10px;} .rail{filter:none;}
.xnav{background:#fff;border:2px solid var(--line2);border-radius:0!important;clip-path:var(--clip2);color:#333;}
.xnav:hover{border-color:var(--c-attn);color:#000;} .xnav b{color:var(--c-token);}
.tok{border-radius:0!important;clip-path:var(--clip1);color:#282828!important;}
.tok .tid{color:#555!important;}
.pill{border-radius:0!important;clip-path:var(--clip1);background:#fff;}
.file pre{background:#fff;}
table.cfg th,table.cfg td{border-color:var(--line)!important;}
.grid-cell{stroke:var(--fig-surface)!important;}
code,.file .fh .tag{background:#fff;border-radius:0;}
a{color:var(--c-attn);} .foot a{color:#0059f3;}
::selection{background:#e3f300;color:#000;}
::-webkit-scrollbar{height:10px;width:10px} ::-webkit-scrollbar-thumb{background:#b3b3b3;border:2px solid #e3e3e3}

/* --- part4 additions (v23) --- */
.callout .clab{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.accuracy{display:inline-block;margin-left:7px;padding:2px 6px;border:1px solid var(--line2);color:var(--ink2);font-size:9px;line-height:1.2;letter-spacing:.08em;vertical-align:1px;text-transform:uppercase}
.evidence{margin:28px 0 8px;border:1px solid var(--line2);background:var(--panel);font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink2)}
.evidence summary{cursor:pointer;padding:10px 12px;color:var(--ink);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.evidence[open] summary{border-bottom:1px solid var(--line2)}
.evidence .evidence-body{padding:11px 14px 13px}
.evidence p{margin:.35em 0 .65em}
.evidence ul{margin:.45em 0 .2em;padding-left:20px}
.evidence a{color:var(--c-attn)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:640px){.stat-row{grid-template-columns:1fr}}
.ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
@media(max-width:640px){.ctrl-grid{grid-template-columns:1fr}}

/* ===================== NIGHT MODE (v24) ===================== */
:root[data-theme="dark"]{
  --bg:#14161a;
  --bg2:#1a1d22;
  --panel:#1e2127;
  --panel2:#23272e;
  --line:#33383f;
  --line2:#4b525b;
  --ink:#e6e3dc;
  --ink2:#cdccc6;
  --ink3:#9aa0a8;
  /* signature spectrum — same hues, lightened + desaturated for dark */
  --c-token:#f0863c;
  --c-embed:#d8b13e;
  --c-pos:#43c46e;
  --c-attn:#5b9bff;
  --c-multi:#5bb6e6;
  --c-ffn:#b26ff0;
  --c-resid:#e972e0;
  --c-next:#ff5fb0;
  --c-arch:#8ba6bd;
  /* semantic neutrals remapped for dark */
  --fig-ink:#e6e3dc;
  --fig-ink2:#cdccc6;
  --fig-mute:#9aa0a8;
  --fig-faint:#929aa4;
  --fig-fainter:#929aa4;
  --fig-line:#33383f;
  --fig-line2:#3a4048;
  --fig-surface:#1e2127;
  --fig-surface2:#262a31;
  --fig-near:#e6e3dc;
  --on-accent:#14161a;
  --danger:#ff6b6b;
  --danger-bg:#3a1e1e;
  --danger-line:#ff6b6b;
}
/* dark grid lines + page background swap (light values are hardcoded on body/html) */
:root[data-theme="dark"] body{
  background:
    radial-gradient(1200px 700px at 80% -5%, rgba(91,155,255,.05), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(178,111,240,.045), transparent 60%),
    repeating-linear-gradient(transparent,transparent 30px,rgba(255,255,255,.035) 30px,rgba(255,255,255,.035) 32px),
    repeating-linear-gradient(to right,transparent,transparent 30px,rgba(255,255,255,.035) 30px,rgba(255,255,255,.035) 32px),
    var(--bg);
}
:root[data-theme="dark"]{background:#14161a}
/* the deliberately-dark blocks (.why/.eq) invert to a raised light-on-dark card */
:root[data-theme="dark"] .why,
:root[data-theme="dark"] .eq{background:#0f1114!important;border-color:#000!important}
:root[data-theme="dark"] .foot a{color:var(--c-attn)}
:root[data-theme="dark"] ::selection{background:var(--c-multi);color:#06121f}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a4048;border-color:#14161a}
:root[data-theme="dark"] #menuBtn,
:root[data-theme="dark"] .themeBtn{box-shadow:0 2px 10px rgba(0,0,0,.6)}
/* --- surfaces that hardcode a light background in the base stylesheet --- */
:root[data-theme="dark"] .callout,
:root[data-theme="dark"] .tiny{background:var(--panel2)!important}
:root[data-theme="dark"] .seg{background:#262a31!important}
:root[data-theme="dark"] .seg button:not(.on){background:#20242a!important;border-color:#3a4048!important;color:var(--ink2)!important}
:root[data-theme="dark"] .seg button.on{color:var(--on-accent)!important}
:root[data-theme="dark"] .btn{background:#23272e!important;color:var(--ink)!important}
:root[data-theme="dark"] .btn:hover{background:#2a2f37!important;color:var(--ink)!important}
:root[data-theme="dark"] input[type=text]{background:#1a1d22!important;color:var(--ink)!important;border-color:#3a4048!important}
:root[data-theme="dark"] input[type=search]{background:#1a1d22!important;color:var(--ink)!important;border-color:#3a4048!important}
:root[data-theme="dark"] .fstage{background:var(--panel)!important}
:root[data-theme="dark"] .xnav{background:var(--panel)!important;color:var(--ink2)!important}
:root[data-theme="dark"] .xnav:hover{color:var(--ink)!important}
:root[data-theme="dark"] .pill{background:var(--panel2)!important}
:root[data-theme="dark"] .tok{background:var(--panel2)!important;color:var(--ink)!important}
:root[data-theme="dark"] .tok .tid{color:var(--ink3)!important;opacity:1}
:root[data-theme="dark"] #cmpView span{opacity:1!important}
:root[data-theme="dark"] #archStack .hov{color:var(--ink3)!important}
:root[data-theme="dark"] #archCmp button>div{color:var(--ink)!important}
:root[data-theme="dark"] .file pre,
:root[data-theme="dark"] .file{background:#16181c!important}
:root[data-theme="dark"] code,
:root[data-theme="dark"] .file .fh .tag{background:#262a31!important}
:root[data-theme="dark"] .mpart>.plab:hover,
:root[data-theme="dark"] .msec:hover{background:#262a31!important}
:root[data-theme="dark"] .depth-picker button.on,
:root[data-theme="dark"] .depth-picker button[aria-pressed="true"],
:root[data-theme="dark"] .knowledge-check .check-submit{background:var(--c-attn)!important;color:var(--on-accent)!important;border-color:var(--c-attn)!important}
:root[data-theme="dark"] .file pre span{filter:none}
/* the hero wordmark gradient starts on a near-white swatch; keep it light-on-dark */
:root[data-theme="dark"] .hero h1{background:linear-gradient(100deg,#e6e3dc 6%,var(--c-attn) 40%,var(--c-token) 72%,var(--c-resid) 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
/* --- theme toggle button (DS language, mirrors .btn) --- */
.themeBtn{position:fixed;top:8px;right:8px;z-index:62;height:38px;padding:0 12px;
  display:flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--ink);background:var(--panel);border:2px solid var(--line2);
  border-radius:0!important;clip-path:var(--clip1);
  box-shadow:0 2px 10px rgba(0,0,0,.28);-webkit-font-smoothing:none}
.themeBtn:hover{border-color:var(--c-attn);color:var(--c-attn)}
.themeBtn .tmoon{display:none}
.themeBtn .tsun{display:inline}
:root[data-theme="dark"] .themeBtn .tsun{display:none}
:root[data-theme="dark"] .themeBtn .tmoon{display:inline}
@media(max-width:600px){.themeBtn{padding:0 9px;font-size:0}
  .themeBtn .tglyph{font-size:15px}}

/* ===================== LEARNING + ACCESSIBILITY LAYER (v2.1) ===================== */
.skip-link{position:fixed;top:8px;left:64px;z-index:1000;padding:9px 12px;
  background:var(--panel);color:var(--ink);border:2px solid var(--c-attn);
  font-family:var(--mono);font-size:12px;transform:translateY(-160%);transition:transform .15s}
.skip-link:focus{transform:translateY(0)}
:where(button,a,input,summary):focus-visible{outline:3px solid var(--c-attn);outline-offset:3px}
.sec{scroll-margin-top:64px}

.readingBtn{position:fixed;top:8px;right:92px;z-index:62;height:38px;padding:0 12px;
  display:flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--mono);font-size:12px;
  font-weight:700;color:var(--ink);background:var(--panel);border:2px solid var(--line2);
  border-radius:0;clip-path:var(--clip1);box-shadow:0 2px 10px rgba(0,0,0,.28)}
.readingBtn:hover,.readingBtn[aria-pressed="true"]{border-color:var(--c-pos);color:var(--c-pos)}
:root[data-theme="dark"] .readingBtn{box-shadow:0 2px 10px rgba(0,0,0,.6)}

.learning-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;
  margin:28px 0 14px;padding:16px 18px;background:var(--panel);border:2px solid var(--line2);
  clip-path:var(--clip2)}
.learning-card strong{display:block;font-family:var(--disp);font-size:18px;color:var(--ink)}
.learning-card p{margin:3px 0 0;font-size:14px;color:var(--ink2)}
.learning-kicker{display:block;margin-bottom:3px;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--c-attn)}
.depth-picker{display:flex;gap:4px;flex-wrap:wrap}
.depth-picker button{min-height:40px;padding:7px 11px;border:2px solid var(--line);background:var(--panel2);
  color:var(--ink2);font-family:var(--mono);font-size:11px;cursor:pointer;clip-path:var(--clip1)}
.depth-picker button b,.depth-picker button small{display:block}
.depth-picker button small{margin-top:1px;font-size:9px;color:inherit}
.depth-picker button:hover{border-color:var(--c-attn);color:var(--ink)}
.depth-picker button.on,.depth-picker button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.path-summary{margin:0 0 22px;padding:10px 12px;border-left:5px solid var(--c-attn);
  background:var(--panel);font-family:var(--mono);font-size:12px;color:var(--ink2)}
.path-summary b{color:var(--ink)}
.sec.path-hidden{display:none!important}

.methodology{margin:14px 0 26px;border:1px solid var(--line2);background:var(--panel);
  font-family:var(--mono);font-size:12px;color:var(--ink2)}
.methodology summary{padding:10px 12px;cursor:pointer;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.06em}
.methodology[open] summary{border-bottom:1px solid var(--line)}
.methodology-body{padding:10px 14px 12px}
.methodology-body p{margin:.45em 0}

.menu-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#menuClose{width:36px;height:36px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);
  font-family:var(--mono);font-size:22px;line-height:1;cursor:pointer}
.menu-search-label{display:block;margin-top:13px;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink2)}
.menu-search{width:100%;height:40px;margin-top:5px;padding:8px 10px!important;font-size:12px!important}
.menu-search-status{min-height:17px;margin-top:3px;font-family:var(--mono);font-size:10px;color:var(--ink3)}
.menu-depth{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.menu-depth>span{display:block;margin-bottom:6px;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink2)}
.menu-depth .depth-picker button{min-height:34px;padding:5px 8px}
.mpart.search-empty{display:none}
.msec.search-hidden{display:none}
.msec.path-filtered{opacity:.44}

.section-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:8px 0 0;
  font-family:var(--mono);font-size:10px;color:var(--ink3)}
.section-meta a{color:var(--c-attn)}
.section-meta .reviewed{padding:2px 6px;border:1px solid var(--line)}
.section-copy{padding:0;border:0;background:transparent;color:var(--c-attn);font:inherit;
  text-decoration:underline;cursor:pointer}

.knowledge-check{margin:22px 0 8px;padding:15px 16px;border:2px solid var(--line2);
  border-left:6px solid var(--st,var(--c-attn));background:var(--panel);clip-path:var(--clip2)}
.knowledge-check .check-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--st,var(--c-attn))}
.knowledge-check h3{margin:5px 0 10px;font-size:18px;line-height:1.25}
.knowledge-check label{display:flex;align-items:flex-start;gap:9px;margin:7px 0;padding:8px 9px;
  border:1px solid var(--line);background:var(--panel2);cursor:pointer;font-size:15px;line-height:1.35}
.knowledge-check input{margin-top:3px;flex:none}
.knowledge-check .check-submit{min-height:40px;margin-top:7px;padding:7px 12px;border:2px solid var(--line2);
  background:var(--ink);color:var(--panel);font-family:var(--mono);cursor:pointer}
.knowledge-check .check-feedback{min-height:24px;margin:8px 0 0;font-weight:700}
.knowledge-check .check-feedback.correct{color:var(--c-pos)}
.knowledge-check .check-feedback.incorrect{color:var(--danger)}

.swipe-cue{display:none;font-family:var(--mono);font-size:10px;color:var(--ink3);text-align:right;
  margin:3px 2px 0}

:root[data-reading="on"] body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:0;line-height:1.72;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 650px at 80% -5%,rgba(84,168,255,.055),transparent 60%),var(--bg)!important}
:root[data-reading="on"] main :where(p,li),
:root[data-reading="on"] .lead,
:root[data-reading="on"] .lead2,
:root[data-reading="on"] .methodology-body,
:root[data-reading="on"] .knowledge-check label{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:0}
:root[data-reading="on"] .wrap{max-width:900px}
:root[data-reading="on"] .sec>.wrap>p{max-width:760px}
:root[data-reading="on"] .lead,:root[data-reading="on"] .lead2{line-height:1.62}

@media(max-width:600px){
  html{scroll-padding-top:56px}
  body::before{content:"";position:fixed;inset:0 0 auto;height:56px;z-index:60;pointer-events:none;
    background:linear-gradient(var(--bg) 72%,transparent)}
  .readingBtn{right:54px;width:42px;padding:0;justify-content:center;font-size:12px}
  .readingBtn .reading-label{display:none}
  .themeBtn{right:8px;width:38px;justify-content:center}
  .hero{padding-top:58px}
  .learning-card{grid-template-columns:1fr;padding:13px 12px;gap:10px}
  .learning-card .depth-picker{display:grid;grid-template-columns:repeat(3,1fr)}
  .learning-card .depth-picker button{min-height:52px;padding:6px 4px}
  .flow{position:relative;margin-top:28px}
  .flow-hint span{display:inline}
  .swipe-cue{display:block}
  .seg button,.btn{min-height:44px}
  #menuPanel{max-width:100vw;width:100vw}
  body.menu-open>#menuBtn,body.menu-open>.readingBtn,body.menu-open>.themeBtn{visibility:hidden}
  #menuPanel .mhd{padding:12px 14px 10px}
  .knowledge-check{padding:13px 11px;margin-left:-3px;margin-right:-3px}
}

/* ===================== TECHNICAL CLAIM LEDGER ===================== */
.claims-page{min-height:100vh}
.claims-hero{padding:72px 0 34px;border-bottom:2px solid var(--line2)}
.claims-hero h1{max-width:850px;margin:.2em 0;font-size:clamp(42px,7vw,76px);
  background:linear-gradient(100deg,var(--ink) 5%,var(--c-attn) 48%,var(--c-resid));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.claims-hero .lead{max-width:760px;font-size:clamp(18px,2.2vw,22px)}
.claims-policy{max-width:800px;margin:24px 0;padding:13px 16px;border:2px solid var(--line2);
  border-left:7px solid var(--c-attn);background:var(--panel);clip-path:var(--clip2);font-size:15px}
.claims-policy p{margin:.4em 0}
.claims-content{padding:32px 0 90px}
.claims-toolbar{position:sticky;top:0;z-index:5;margin-bottom:18px;padding:12px 14px;
  border:2px solid var(--line2);background:var(--panel);clip-path:var(--clip2)}
.claims-toolbar label{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink2)}
.claims-toolbar input{width:100%;height:44px;margin-top:6px}
.claims-toolbar p{margin:4px 0 0;font-family:var(--mono);font-size:11px;color:var(--ink3)}
.claim-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0}
.claim-stats>div{padding:13px;border:2px solid var(--line2);background:var(--panel);clip-path:var(--clip1)}
.claim-stats b,.claim-stats span{display:block}
.claim-stats b{font-family:var(--disp);font-size:24px;color:var(--c-attn)}
.claim-stats span{font-family:var(--mono);font-size:10px;color:var(--ink2)}
.claim-list{display:grid;gap:14px}
.claim-card{padding:16px 18px;border:2px solid var(--line2);background:var(--panel);clip-path:var(--clip2)}
.claim-heading{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:baseline}
.claim-heading>span{font-family:var(--mono);font-size:10px;color:var(--c-attn)}
.claim-heading h2{margin:0;font-size:22px}
.claim-heading h2 a{color:var(--ink);text-decoration:none}
.claim-heading h2 a:hover{color:var(--c-attn)}
.claim-badges{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}
.claim-badges span{padding:2px 6px;border:1px solid var(--line);font-family:var(--mono);
  font-size:9px;text-transform:uppercase;color:var(--ink2)}
.claim-card dl{margin:10px 0 4px}
.claim-card dl>div{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:9px 0;border-top:1px solid var(--line)}
.claim-card dt{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.claim-card dd{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.claim-card dd a{color:var(--c-attn)}
.claim-open{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--c-attn)}
@media(max-width:700px){
  .claims-hero{padding-top:62px}
  .claim-stats{grid-template-columns:1fr 1fr}
  .claim-heading{grid-template-columns:1fr;gap:2px}
  .claim-card dl>div{grid-template-columns:1fr;gap:3px}
  .claims-toolbar{top:54px}
}