/* ───────────────────────────────────────────────────────────────────────────
   Cool white paper, serif body, one annotation red.
   Light is the primary design; dark is a full re-tint of the same tokens.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  --paper:#FCFCFA;
  --surface:#F4F4F0;
  --surface-2:#EFEFEA;
  --ink:#15171B;
  --body:#32363D;
  --muted:#6B717B;
  --faint:#949AA3;
  --rule:#E2E1DB;
  --rule-hard:#CFCEC7;
  --accent:#A0341F;
  --accent-bg:#FBF0ED;
  --good:#2F7D52;
  --warn:#9A6A16;
  --bad:#A32C33;

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  --nav-w:250px;
  --bar-h:52px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14161A; --surface:#1A1D22; --surface-2:#1F232A;
    --ink:#E9EBEF; --body:#C1C6CE; --muted:#8A919B; --faint:#6A717B;
    --rule:#272B32; --rule-hard:#353A43;
    --accent:#E28066; --accent-bg:#241B18;
    --good:#63BE8C; --warn:#D2A24E; --bad:#E0757C;
  }
}
:root[data-theme="dark"]{
  --paper:#14161A; --surface:#1A1D22; --surface-2:#1F232A;
  --ink:#E9EBEF; --body:#C1C6CE; --muted:#8A919B; --faint:#6A717B;
  --rule:#272B32; --rule-hard:#353A43;
  --accent:#E28066; --accent-bg:#241B18;
  --good:#63BE8C; --warn:#D2A24E; --bad:#E0757C;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--body);
  font:400 18px/1.72 var(--serif);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
html[data-boot] body{opacity:0}
body{transition:opacity .18s ease}
p,li,h1,h2,h3,td,th{overflow-wrap:break-word}
code{overflow-wrap:anywhere}
pre code{overflow-wrap:normal}

/* ── hyphenation ─────────────────────────────────────────────────────────
   Prose only. The measure is 70ch and drops to a phone's width, where a
   long word — "multiplicative", "reparameterising" — otherwise leaves a
   ragged hole. Needs the lang attribute on <html> to pick a dictionary.
   Never applied to UI, code, math or headings: a hyphen inside an
   identifier or a rail label reads as part of the name.                 */
main p, main li, main blockquote, main td, .cap{
  -webkit-hyphens:auto;hyphens:auto;
  /* min 8-letter word, 4 letters before the break, 4 after. The tail count
     includes trailing punctuation, so 3 would still permit "separat-|ed;" */
  -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;
  hyphenate-limit-chars:8 4 4;
  /* at most two hyphenated lines in a row (Safari honours this) */
  -webkit-hyphenate-limit-lines:2;hyphenate-limit-lines:2;
  text-wrap:pretty;
}
h1,h2,h3,nav.side,.bar,th,.map,.dag,.note .lab{-webkit-hyphens:none;hyphens:none}
code,pre,.katex,.hljs{-webkit-hyphens:none !important;hyphens:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:50;height:var(--bar-h);
  display:flex;align-items:center;gap:14px;padding:0 20px;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);
  font-family:var(--sans);
}
.bar .t{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .t span{font-weight:400;color:var(--faint)}
.sp{flex:1}
.tbtn{
  font-family:var(--sans);font-size:12px;color:var(--muted);
  background:none;border:1px solid var(--rule-hard);border-radius:3px;
  padding:4px 9px;cursor:pointer;
}
.tbtn:hover{color:var(--ink);border-color:var(--muted)}
.bar a.cta{
  font-family:var(--sans);font-size:12.5px;font-weight:500;padding:6px 13px;
  border-radius:3px;background:var(--accent);color:var(--paper);
  border:0;white-space:nowrap;text-decoration:none;
}
.bar a.cta:hover{opacity:.88}
.bar a.cta.alt{background:none;color:var(--accent);border:1px solid var(--accent)}
.bar a.cta.alt:hover{background:var(--accent-bg);opacity:1}
.navtoggle{display:none}

/* ── shell ───────────────────────────────────────────────────────────────── */
.shell{max-width:1220px;margin:0 auto;padding:0 28px;display:flex;gap:44px;align-items:flex-start}
/* ── contents rail ───────────────────────────────────────────────────────
   Rest: twelve group names, the one you are reading marked. Hover a name and
   its sections unfold beneath it — everything else stays put. Only one group
   is ever open, so the rail cannot outgrow the viewport.                  */
nav.side{
  width:var(--nav-w);flex:none;position:sticky;top:var(--bar-h);
  max-height:calc(100vh - var(--bar-h));overflow:hidden;
  padding:34px 0 60px;font-family:var(--sans);
}
nav.side.scrolls{
  overflow-y:auto;scrollbar-width:thin;
  scrollbar-gutter:stable;overscroll-behavior:contain;
}
.side-t{
  margin:0 0 15px 14px;
  font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);
}
.tocg{position:relative}
.tocg-l{
  display:block;position:relative;
  padding:7px 12px 7px 14px;
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  line-height:1.35;color:var(--muted);text-decoration:none;
  transition:color .18s ease;
}
.tocg-l::before{
  content:"";position:absolute;left:0;top:50%;
  width:2px;height:0;border-radius:1px;background:var(--accent);
  transform:translateY(-50%);
  transition:height .26s cubic-bezier(.2,.9,.25,1);
}
.tocg-l:hover,.tocg.focus .tocg-l{color:var(--ink)}
.tocg.active .tocg-l{color:var(--accent)}
.tocg.active .tocg-l::before{height:15px}

.tocg-rows{overflow:hidden;height:0}
.toc-row{
  display:block;
  padding:4px 12px 4px 26px;
  font-size:12.5px;line-height:1.4;
  color:var(--faint);text-decoration:none;
  opacity:0;
  transition:color .18s ease;
}
.toc-row:hover{color:var(--body)}
.toc-row.on{color:var(--accent)}

/* no hover to reach for: show the whole index */
.tocw.static .tocg-rows{height:auto}
.tocw.static .toc-row{opacity:1}

@media (prefers-reduced-motion:reduce){
  .tocg-l::before{transition-duration:1ms}
}

main{
  flex:1;min-width:0;
  max-width:65ch;                 /* good measure */
  margin:0 auto;
  padding:40px 0 120px;
  text-align:justify;
  -webkit-hyphens:auto;hyphens:auto;
  line-height:1.45;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
/* justify running prose only — short lines gap badly */
main h1,main h2,main h3,main th,main td,.cap,.byline,figcaption,.map,.dag,.katex-display{text-align:left}
/* ── article ─────────────────────────────────────────────────────────────── */
.head{padding-bottom:30px;margin-bottom:34px;border-bottom:1px solid var(--rule)}
.kicker{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
h1{font:700 clamp(33px,5vw,48px)/1.1 var(--serif);letter-spacing:-.022em;color:var(--ink);margin:0 0 18px;text-wrap:balance}
.head > p:first-of-type{font-size:21px;line-height:1.55;color:var(--muted);margin:0 0 20px}
.byline{font-family:var(--sans);font-size:12.5px;color:var(--faint);display:flex;flex-wrap:wrap;gap:8px 18px}
main a[href]{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
main a[href]:hover{border-bottom-color:var(--accent)}

h2{
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);
  margin:56px 0 0;padding-top:22px;border-top:1px solid var(--rule);
}
h3{font:600 clamp(23px,3vw,28px)/1.22 var(--serif);letter-spacing:-.016em;color:var(--ink);margin:30px 0 14px;text-wrap:balance}
h2,h3{scroll-margin-top:calc(var(--bar-h) + 16px)}
p{margin:0 0 18px}
strong{color:var(--ink);font-weight:600}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin-bottom:9px}
li::marker{color:var(--faint)}
hr{border:0;border-top:1px solid var(--rule);margin:40px 0}

code{font-family:var(--mono);font-size:.83em;background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:1px 5px;color:var(--ink)}
pre{
  max-width:100%;font:400 13px/1.62 var(--mono);
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;
  padding:15px 17px;overflow-x:auto;overscroll-behavior-x:contain;
  margin:22px 0;color:var(--body);scrollbar-width:thin;
}
pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}
.cap{font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--faint);margin:-14px 0 22px;padding-left:2px}
.cap .katex{font-size:.95em}

.tw{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;margin:22px 0;border:1px solid var(--rule);border-radius:4px;scrollbar-width:thin}
table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13.5px;min-width:500px}
th{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:left;padding:10px 13px;background:var(--surface);border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:9px 13px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
tr:last-child td{border-bottom:0}

blockquote{
  border-left:3px solid var(--rule-hard);background:var(--surface);
  padding:14px 18px;margin:22px 0;font-size:16.5px;border-radius:0 3px 3px 0;
}
blockquote > :last-child{margin-bottom:0}

/* ── notes ──────────────────────────────────────────────────────────────── */
.note{
  border-left:3px solid var(--rule-hard);background:var(--surface);
  padding:14px 18px;margin:22px 0;font-size:16.5px;border-radius:0 3px 3px 0;
}
.note > :last-child{margin-bottom:0}
.note .lab{
  display:block;margin-bottom:5px;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.note.hot{border-left-color:var(--accent);background:var(--accent-bg)}
.note.hot .lab{color:var(--accent)}

/* ── causal diagrams ────────────────────────────────────────────────────── */
figure.dag{
  margin:26px 0;padding:16px 14px 0;
  border:1px solid var(--rule);border-radius:4px;background:var(--surface);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;
}
figure.dag svg{display:block;width:100%;min-width:540px;height:auto;font-family:var(--sans)}
.dag .n rect{fill:var(--paper);stroke:var(--rule-hard);stroke-width:1}
.dag .n.latent rect{fill:none;stroke-dasharray:5 3}
.dag .n.out rect{stroke:var(--muted)}
.dag .n text{fill:var(--ink);font-size:13.5px;font-weight:500}
.dag .n text.sub{fill:var(--faint);font-family:var(--mono);font-size:11px;font-weight:400}
.dag .e{fill:none;stroke:var(--rule-hard);stroke-width:1.3}
.dag .e.hot{stroke:var(--accent);stroke-width:1.7}
.dag .e.meas{stroke:var(--muted);stroke-dasharray:3 3}
.dag marker path{fill:var(--rule-hard)}
.dag marker.hot path{fill:var(--accent)}
.dag .lab{fill:var(--faint);font-family:var(--mono);font-size:11px}
.dag .lab.hot{fill:var(--accent)}
.dag .lab.meas{fill:var(--muted)}
.dag figcaption{
  margin-top:12px;padding:10px 2px 12px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--faint);
}

/* ── math ────────────────────────────────────────────────────────────────── */
.katex{font-size:1.02em}
.eq{
  margin:22px 0;padding:2px 0;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:thin;
}
.eq .katex-display{margin:.55em 0}
/* By default a display equation is full column width and KaTeX centres it.
   When one is wider than the column, render() tags it .eq--wide: it then
   hugs its content, left-anchored on the text column, and is free to use
   every pixel from there to just short of the viewport edge — the cap is
   the distance to that edge, so the page itself never scrolls sideways. A
   scrollbar inside .eq is the last resort, only for a formula wider than
   the whole gutter. Column-left offset: 322px in the two-column band,
   growing as 50vw-288px once the shell (1220px) stops widening. */
@media (min-width:900px){
  .eq--wide{
    box-sizing:content-box;      /* max-content == exact formula width */
    width:max-content;
    padding-right:10px;          /* soak up sub-pixel rounding + a little air */
    max-width:calc(100vw - 34px - max(322px, 50vw - 288px));
  }
}
.math-err{color:var(--bad);font-family:var(--mono);font-size:12.5px}

/* ── syntax: Sugar High ──────────────────────────────────────────────────
   Token colours are declared once, in terms of the theme tokens, so a
   single rule serves both schemes — every --sh-* follows its source token
   when the palette re-tints for dark.                                    */
:root{
  --sh-identifier:var(--body);
  --sh-keyword:var(--accent);
  --sh-string:var(--good);
  --sh-class:var(--warn);
  --sh-property:var(--body);
  --sh-entity:var(--ink);
  --sh-jsxliterals:var(--body);
  --sh-sign:var(--faint);
  --sh-comment:var(--faint);
}
pre code .sh__token--comment{font-style:italic}

/* ── code deck ───────────────────────────────────────────────────────────
   Every fenced snippet in the piece, lifted into one browsable panel —
   file list, source, its prose context, and a line back to where it sits
   in the article. Modelled on the [ live demos ] reference: a double
   dashed register frame, a quiet header strip, one column of files, the
   selected one carrying the single accent. Left edge on the text column;
   on a wide screen the panel reaches into the right-hand gutter so the
   code has room to breathe. */
.codes{
  position:relative;margin:36px 0;
  border:1px dashed var(--rule-hard);border-radius:6px;
  background:var(--surface-2);font-family:var(--sans);
}
.codes::before{                       /* faint outer register frame */
  content:"";position:absolute;inset:-5px;
  border:1px dashed var(--rule);border-radius:9px;pointer-events:none;
}
@media (min-width:900px){
  .codes{
    width:calc(100% + max(0px, min(280px, calc(100vw - 24rem - 66ch))));
  }
}

.codes-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 14px;height:34px;
  border-bottom:1px solid var(--rule);
}
.codes-top .brand{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);
}
.codes-top .meta{font-family:var(--mono);font-size:10.5px;color:var(--faint)}

.codes-body{display:flex;align-items:stretch}

/* file column */
.codes-list{
  flex:none;width:186px;display:flex;flex-direction:column;min-width:0;
  border-right:1px solid var(--rule);
}
.codes-list-h,.codes-head{
  flex:none;height:37px;padding:0 15px;
  display:flex;align-items:center;
  border-bottom:1px solid var(--rule);
}
.codes-list-h{
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
}
.codes-files{
  flex:1;min-height:0;overflow-y:auto;padding:6px;
  scrollbar-width:thin;scrollbar-color:var(--rule-hard) transparent;
}
.codes-file{
  display:block;width:100%;position:relative;
  padding:6px 10px 6px 23px;border-radius:5px;
  font-family:var(--mono);font-size:12px;line-height:1.5;
  color:var(--muted);background:none;border:0;cursor:pointer;
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .13s ease,background .13s ease;
}
.codes-file::before{content:"·";position:absolute;left:11px;color:var(--faint)}
.codes-file:hover{color:var(--ink);background:var(--surface)}
.codes-file.on{color:var(--accent);font-weight:500;background:var(--accent-bg)}
.codes-file.on::before{content:"▸";left:10px;color:var(--accent)}

/* source column */
.codes-main{flex:1;min-width:0;display:flex;flex-direction:column}
.codes-head{justify-content:space-between;gap:10px}
.codes-head .fn{
  font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.codes-head .fs{
  flex:none;font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap;
}
.codes-src{
  margin:0;border:0;border-radius:0;background:var(--surface);
  padding:15px 17px;max-height:430px;overflow:auto;
  scrollbar-width:thin;overscroll-behavior:contain;
}
.codes-src code{display:block;min-width:max-content}

/* context note */
.codes-note{padding:12px 16px 13px;border-top:1px solid var(--rule)}
.codes-note-l{
  display:block;margin-bottom:5px;
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
}
.codes-note-b{font-size:13.5px;line-height:1.55;color:var(--muted)}
.codes-note-b :last-child{margin-bottom:0}
.codes-note-b .katex{font-size:.93em}

/* source line */
.codes-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 16px;border-top:1px solid var(--rule);
}
.codes-foot .src{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:11px;color:var(--muted);text-decoration:none;
}
.codes-foot .src b{color:var(--body);font-weight:500}
.codes-foot .src:hover,.codes-foot .src:hover b{color:var(--ink)}
.codes-foot .copy{
  flex:none;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.02em;
  color:var(--muted);background:none;
  border:1px solid var(--rule-hard);border-radius:4px;padding:4px 10px;cursor:pointer;
  transition:color .13s ease,border-color .13s ease;
}
.codes-foot .copy:hover{color:var(--ink);border-color:var(--muted)}
.codes-foot .copy.done{color:var(--good);border-color:var(--good)}

.codes.flash{border-color:var(--accent)}
.codes.flash::before{border-color:var(--accent)}
.codes-file.flash{background:var(--accent-bg);color:var(--accent)}

/* inline reference chip, left where a fence was lifted out */
.codechip-wrap{margin:20px 0}
a.codechip{
  display:inline-flex;align-items:center;gap:7px;vertical-align:baseline;
  font-family:var(--mono);font-size:12px;line-height:1.4;
  color:var(--body) !important;background:var(--surface);
  border:1px solid var(--rule) !important;border-radius:4px;
  padding:2px 8px;text-decoration:none !important;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
a.codechip::before{content:"{ }";color:var(--accent);letter-spacing:-.05em}
a.codechip::after{content:"\2197";color:var(--faint)}
a.codechip:hover{border-color:var(--muted) !important;color:var(--ink) !important;background:var(--surface-2)}

/* ── contents map (SVG) ──────────────────────────────────────────────────── */
.map{
  margin:0 0 34px;padding:0;
  border:1px solid var(--rule);border-radius:5px;background:var(--surface-2);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;
}
.map svg{display:block;width:100%;min-width:520px;height:auto;font-family:var(--sans)}
.map .hub-box{fill:none;stroke:var(--rule-hard);stroke-width:1;stroke-dasharray:4 4}
.map .hub-t{fill:var(--ink);font-size:13px;font-weight:600}
.map .hub-row{fill:var(--surface);stroke:var(--rule);stroke-width:1}
.map .hub-k{fill:var(--muted);font-size:11.5px}
.map .hub-v{fill:var(--ink);font-family:var(--mono);font-size:11.5px}
.map .wire{fill:none;stroke:var(--rule-hard);stroke-width:1.25;stroke-linecap:round}
.map .dot{fill:var(--rule-hard)}
.map .card rect.bg{fill:var(--surface);stroke:var(--rule);stroke-width:1;rx:5}
.map .card .badge{fill:none;stroke:var(--rule-hard);stroke-width:1;rx:5}
.map .card .num{fill:var(--muted);font-family:var(--mono);font-size:11.5px;text-anchor:middle}
.map .card .t{fill:var(--ink);font-size:13px;font-weight:600}
.map .card .s{fill:var(--faint);font-family:var(--mono);font-size:10.5px}
.map .card{cursor:pointer}
.map .card:hover rect.bg{stroke:var(--muted)}
.map .card.on rect.bg{stroke:var(--accent);fill:var(--accent-bg)}
.map .card.on .t{fill:var(--accent)}
.map .card.on .badge{stroke:var(--accent)}
.map .card.on .num{fill:var(--accent)}
.map .cap-row{
  display:flex;gap:14px;justify-content:space-between;
  padding:9px 14px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:11.5px;color:var(--faint);
}

/* draw-in: wires stroke themselves, then cards fade up, staggered */
.map .wire{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.map .card,.map .dot,.map .hub{opacity:0}
.map.play .wire{animation:draw .62s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i) * .07s + .1s)}
.map.play .hub{animation:fade .4s ease forwards}
.map.play .dot{animation:pop .3s ease forwards;animation-delay:calc(var(--i) * .07s + .5s)}
.map.play .card{animation:rise .42s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(var(--i) * .07s + .42s)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateX(9px)}to{opacity:1;transform:translateX(0)}}
.map .dot,.map .card{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .map .wire{stroke-dashoffset:0}
  .map .card,.map .dot,.map .hub{opacity:1}
  .map.play *{animation:none !important}
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:880px){
  body{font-size:17px}
  .shell{flex-direction:column;align-items:stretch;gap:0;padding:0 20px}
  main{padding-top:26px;max-width:none;width:100%;min-width:0}
  .navtoggle{
    display:inline-flex;align-items:center;gap:7px;
    font-family:var(--sans);font-size:12.5px;font-weight:500;
    color:var(--ink);background:var(--surface);
    border:1px solid var(--rule-hard);border-radius:3px;
    padding:6px 11px;cursor:pointer;white-space:nowrap;
  }
  .navtoggle::before{content:"\2261";font-size:15px;line-height:1;color:var(--accent)}
  .navtoggle[aria-expanded="true"]::before{content:"\00D7"}
  nav.side{
    display:none;position:fixed;top:var(--bar-h);left:0;right:0;width:auto;z-index:45;
    max-height:calc(100vh - var(--bar-h));overflow-y:auto;overscroll-behavior:contain;
    background:var(--paper);border-bottom:1px solid var(--rule-hard);
    box-shadow:0 16px 34px rgba(0,0,0,.18);padding:18px 20px 26px;
  }
  nav.side.open{display:block}
  .bar a.cta.alt{display:none}
}

@media (max-width:620px){
  .codes-body{flex-direction:column}
  .codes-list{width:auto;border-right:0;border-bottom:1px solid var(--rule)}
  .codes-list-h{display:none}
  .codes-files{
    display:flex;flex-direction:row;gap:6px;overflow-x:auto;
    padding:8px 10px;scrollbar-width:thin;
  }
  .codes-file{width:auto;flex:none;padding:5px 9px 5px 20px;border-radius:4px}
  .codes-file.on{outline:1px solid var(--accent)}
}

.home{max-width:1000px;margin:auto;padding:72px 28px 80px}.home header{max-width:760px;margin-bottom:64px}.home h1{font-size:clamp(44px,7vw,76px);line-height:1.08;letter-spacing:-.045em;margin:20px 0 24px}.home .intro{font-size:22px;max-width:640px}.eyebrow,.post-meta,.home footer{font:12px/1.6 var(--mono);color:var(--muted)}.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.12em}.post-list{border-top:1px solid var(--rule-hard)}.post{padding:30px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:70px 1fr 130px;gap:22px}.post-number{font:20px var(--mono);color:var(--accent)}.post h2{border:0;margin:0 0 12px;padding:0;font-size:30px;line-height:1.2}.post h2 a{color:var(--ink);text-decoration:none}.post h2 a:hover{color:var(--accent)}.post p{margin:0 0 15px;max-width:650px}.post-links{display:flex;gap:22px;font:13px var(--sans)}.post-links a{color:var(--accent)}.home footer{margin-top:48px}.home .diagram{width:100%;height:90px;margin-top:32px}.home svg text{fill:var(--muted);font:13px var(--mono)}@media(max-width:620px){.home{padding:40px 20px}.home header{margin-bottom:40px}.post{grid-template-columns:30px 1fr;gap:14px}.post-meta{grid-column:2}.home .intro{font-size:20px}.bar{padding:0 12px;gap:10px}}

.home{text-align:left;line-height:1.6}.post h2{text-transform:none;letter-spacing:-.02em}.home .post h2 a{border-bottom:0}.home footer{line-height:1.9}.home .diagram{overflow:visible}