/* ============================================================
   chronicle — design tokens
   Near-black ground, hairline borders, 2px radius, flat
   surfaces, mono eyebrows, tight negative-tracking headings.
   Accent is chronicle's own wax-seal red + gold.
   ============================================================ */
:root{
  --bg:#0A0A0A;
  --panel:#0F0F0F;
  --panel-2:#141414;
  --raise:#1A1A1A;
  --line:#262626;

  --paper:#FAFAFA;
  --muted:#A1A1AA;
  --dim:#71717A;
  --faint:#52525B;

  --wax:#BE3A34;
  --wax-deep:#8E2A26;
  --wax-tint:rgba(190,58,52,.06);
  --gold:#D9A441;
  --gold-line:rgba(217,164,65,.35);
  --jade:#5FA97C;

  --sans:'Geist',Inter,-apple-system,system-ui,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r:2px;
  --shell:1120px;

  /* One tile of steel chain: a link face-on, then the next edge-on, overlapping
     so they interlock across the tile seam. Used as a MASK, never as an image —
     that way the links take their colour from the element's own background and
     stay on the token palette. */
  --chain:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='22'><g fill='none' stroke='black' stroke-width='1.3'><ellipse cx='4.5' cy='5.5' rx='3.3' ry='6.5'/><ellipse cx='4.5' cy='16.5' rx='1.3' ry='6.5'/></g></svg>");
  /* The same tile on its side, for the short branch that hangs a section label
     off the spine. */
  --chain-h:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='9'><g fill='none' stroke='black' stroke-width='1.3'><ellipse cx='5.5' cy='4.5' rx='6.5' ry='3.3'/><ellipse cx='16.5' cy='4.5' rx='6.5' ry='1.3'/></g></svg>");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;background:var(--bg)}
body{
  background:var(--bg);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:1px solid var(--gold);outline-offset:3px;border-radius:var(--r)}
::selection{background:var(--wax);color:var(--paper)}
img,svg{max-width:100%}

.shell{max-width:var(--shell);margin:0 auto;padding:0 24px;position:relative}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(10,10,10,.82);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex;align-items:center;gap:28px;height:56px}
.wordmark{
  font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:-.02em;
  text-decoration:none;display:flex;align-items:center;gap:.55em;flex:none;
}
.wordmark .seal-dot{
  width:.7em;height:.7em;border-radius:50%;background:var(--wax);
  box-shadow:inset 0 0 0 2px var(--wax-deep);
}
.topbar nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.topbar nav a{
  color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;
  padding:6px 10px;border-radius:var(--r);transition:color .15s,background .15s;
}
.topbar nav a:hover{color:var(--paper);background:var(--panel-2)}
/* Stays one row and stays sticky all the way down — there are only two items,
   and a header that follows you is worth more on a phone than on a desktop.
   nav keeps margin-left:auto so the group sits right; the button follows it. */
@media(max-width:900px){
  .topbar-inner{gap:8px;height:52px}
  .topbar nav{flex-wrap:nowrap;gap:0}
  .topbar nav a{padding:5px 8px;font-size:12.5px;white-space:nowrap}
}
@media(max-width:420px){
  .topbar-inner{gap:6px}
  .wordmark{font-size:.9rem}
  .topbar nav a{padding:5px 6px;font-size:12px}
  .topbar .btn.sm{padding:.36em .6em;font-size:12px}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;border-radius:var(--r);padding:.62em 1.05em;
  border:1px solid var(--line);color:var(--muted);
  transition:border-color .15s,background .15s,color .15s;
}
.btn:hover{color:var(--paper);border-color:var(--faint)}
.btn.primary{background:var(--wax);border-color:var(--wax);color:#FCF8EF;font-weight:600}
.btn.primary:hover{background:var(--wax-deep);border-color:var(--wax-deep);color:#FCF8EF}
.btn.sm{padding:.42em .8em;flex:none}

/* ---------- section rhythm + chain spine ---------- */
.landing{position:relative}
.landing section{
  padding:clamp(72px,9vw,132px) 0 clamp(48px,6vw,84px);
  border-top:1px solid var(--line);
  position:relative;
}
/* The hero paints an opaque ground so it hides the stretch of chain above it —
   the spine reads as starting where the first section does, without needing to
   know the hero's height. Same colour as the body, so nothing looks different. */
.landing section.hero{border-top:0;background:var(--bg)}
.sectionbody{position:relative}
@media(min-width:1000px){.landing .sectionbody{padding-left:56px}}

/* ---------- steel-chain rails ---------- */
/* The layout's two vertical connectors, rendered as chain links. The mask cuts
   the links out of whatever the element paints, so the glint layer underneath
   only shows up ON the links, never in the gaps between them. */
.landing::before,.ledger::before{
  background:
    linear-gradient(180deg,transparent 0,rgba(217,164,65,.9) 40%,var(--paper) 50%,rgba(217,164,65,.9) 60%,transparent 100%)
      no-repeat 0 calc(0% - 170px)/100% 170px,
    var(--line);
  -webkit-mask:var(--chain) repeat-y center/9px 22px;
  mask:var(--chain) repeat-y center/9px 22px;
}
/* ONE chain for the whole landing page, not one per section — a single element
   so the links keep their run across every section seam and a single glint
   travels the full drop. Sections paint above it but are transparent; only the
   hero covers it. `left` re-derives the shell's content edge, since the chain
   can no longer be positioned inside a section. */
@media(min-width:1000px){
  .landing::before{
    content:"";position:absolute;top:0;bottom:0;width:9px;
    left:calc(max(24px,(100% - var(--shell))/2 + 24px) + 16px);
  }
}
@media(prefers-reduced-motion:no-preference){
  .landing::before{animation:railshine 20s linear infinite}
  .ledger::before{animation:railshine 6s ease-in-out infinite}
  /* Travels from just above the rail to just below it, so the glint enters and
     leaves rather than popping in mid-chain. */
  @keyframes railshine{
    from{background-position:0 calc(0% - 170px)}
    to{background-position:0 calc(100% + 170px)}
  }
}

/* ---------- eyebrow (01 — quick start) ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:.9em;margin-bottom:1.4rem;
  position:relative;
}
.eyebrow .h{color:var(--gold)}
/* Each section label hangs off the spine: a seal clamped on the chain, then a
   short branch of chain running out to the text. Both pseudos are absolutely
   positioned so the flex row keeps just the label itself. The seal's centre
   sits at -35.5px, which is where the spine runs once .sectionbody's 56px
   padding is taken off. */
@media(min-width:1000px){
  .landing .sectionbody > .eyebrow::before{
    content:"";position:absolute;left:-32px;top:50%;transform:translateY(-50%);
    width:22px;height:9px;background:var(--line); /* exactly one tile, so the branch ends on a whole link */
    -webkit-mask:var(--chain-h) repeat-x left center/22px 9px;
    mask:var(--chain-h) repeat-x left center/22px 9px;
  }
  .landing .sectionbody > .eyebrow::after{
    content:"";position:absolute;left:-42px;top:50%;transform:translateY(-50%);
    width:11px;height:11px;border-radius:50%; /* -42 + 1px border + half of 11 = the spine's -35.5 */
    background:var(--bg);border:1px solid var(--faint);
  }
  /* Sealed sections carry a wax seal instead of an open link — same treatment
     the ledger gives a sealed commit. */
  .landing section.sealed .sectionbody > .eyebrow::after{
    background:var(--wax);border-color:var(--wax-deep);
    box-shadow:inset 0 0 0 1.5px var(--wax-deep);
  }
}

/* ---------- headings ---------- */
h1{
  font-weight:600;letter-spacing:-.035em;line-height:1.04;
  font-size:clamp(2.4rem,5.4vw,4.4rem);margin:0 0 1.1rem;
}
h1 em{font-style:normal;color:var(--gold)}
h2{
  font-weight:600;letter-spacing:-.025em;line-height:1.1;
  font-size:clamp(1.75rem,3.2vw,2.6rem);margin-bottom:1rem;
}
h3{font-weight:600;letter-spacing:-.015em;font-size:1rem}
.lede{color:var(--muted);max-width:62ch;font-size:1rem}
.lede b,.lede strong{color:var(--paper);font-weight:500}
.mapnote{margin-top:1.6rem;color:var(--dim);font-size:.9rem;max-width:66ch}
.sourceline{color:var(--faint);font-family:var(--mono);font-size:12px;margin-top:-.4rem}
.sourceline a{color:var(--dim)}

code{font-family:var(--mono);font-size:.9em}
p code,li code,td code,th code,.lede code,.mapnote code{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:.1em .38em;font-size:.82em;color:var(--paper);
}

/* ---------- pill ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--dim);border:1px solid var(--line);border-radius:999px;
  padding:.36em 1em;margin-bottom:1.7rem;background:var(--panel);
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}

/* ---------- hero ---------- */
.hero{overflow:hidden}
.hero .heroGrid{position:relative;z-index:1}
.netbg{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.62;
  /* Full-bleed left/right/top — the graph's own geometry runs past the viewBox
     so `slice` never exposes a bare margin. Only the foot fades, into the
     hairline border the next section draws. */
  -webkit-mask-image:linear-gradient(#000 0 68%,transparent 100%);
  mask-image:linear-gradient(#000 0 68%,transparent 100%);
}
/* The mesh is one <pattern> tile filling a single rect, so the lattice can be
   as dense as it likes without paying a DOM element per edge. Every edge is the
   same length by construction — it is a triangular lattice, not a scatter. */
.netbg .lat-edge{fill:none;stroke:var(--line);stroke-width:1}
.netbg .lat-node{fill:var(--bg);stroke:var(--faint);stroke-width:1;opacity:.5}
.netbg .net-flow line{stroke:var(--faint);stroke-width:1}
.netbg .net-nodes circle{fill:var(--bg);stroke:var(--faint);stroke-width:1;opacity:.55}
.netbg .net-nodes.head circle{stroke:var(--gold-line)}
/* Dimmer than --gold-line: three resting chains at full strength would swamp
   the headline. The travelling pulse is what should read as gold. */
.netbg .net-spines path{fill:none;stroke:rgba(217,164,65,.16);stroke-width:1}
.netbg .net-seals path{
  fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.8;
  stroke-dasharray:70 1050; /* pattern > pathLength: one pulse per chain at a time */
  stroke-dashoffset:-1120;  /* parked past the end when motion is off */
}
@media(max-width:959px){.netbg{opacity:.5}}
@media(prefers-reduced-motion:no-preference){
  /* How fast each live edge runs is scattered with co-prime moduli (4/5/9, then
     7) — the cycles never line up, so the flow reads as random without JS. */
  .netbg .net-flow line{stroke-dasharray:2 10;animation:netflow 3.4s linear infinite}
  .netbg .net-flow line:nth-child(4n+3){animation-duration:5.1s;animation-delay:-2.2s}
  .netbg .net-flow line:nth-child(5n+2){animation-duration:2.3s;animation-delay:-0.7s}
  .netbg .net-flow line:nth-child(9n+4){animation-duration:6.6s;animation-delay:-3.8s}
  .netbg .net-flow line:nth-child(7n+6){animation-direction:reverse}
  .netbg .net-nodes circle{animation:netpulse 7s ease-in-out infinite}
  .netbg .net-nodes circle:nth-child(3n){animation-delay:-2.3s}
  .netbg .net-nodes circle:nth-child(3n+1){animation-delay:-4.7s}
  /* One cycle carries the dash pattern exactly one period, so it loops
     seamlessly. The delays are only a fallback stagger — the inline script in
     the hero overrides them with a random start point per load. */
  .netbg .net-seals path{animation:netseal 9s linear infinite}
  .netbg .net-seals path:nth-child(2){animation-duration:13s;animation-delay:-5s}
  .netbg .net-seals path:nth-child(3){animation-duration:7s;animation-delay:-2s}
  @keyframes netflow{to{stroke-dashoffset:-12}}
  @keyframes netpulse{0%,100%{opacity:.35}50%{opacity:.95}}
  @keyframes netseal{from{stroke-dashoffset:0}to{stroke-dashoffset:-1120}}
}
.hero .heroGrid{display:grid;gap:56px;align-items:center}
@media(min-width:960px){.hero .heroGrid{grid-template-columns:1.05fr .95fr}}
.hero .sub{color:var(--muted);max-width:54ch;margin-bottom:2rem}
.hero .sub b{color:var(--paper);font-weight:500}
.cta{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- ledger artifact ---------- */
.ledger{font-family:var(--mono);font-size:12.5px;display:flex;flex-direction:column;position:relative}
.ledger .caption{
  color:var(--faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding-left:34px;margin-bottom:.9rem;
}
.ledger::before{content:"";position:absolute;left:7px;top:34px;bottom:10px;width:9px}
.entry{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 16px 12px 34px;position:relative;margin-bottom:10px;
}
.entry::before{
  content:"";position:absolute;left:7px;top:17px;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1px solid var(--faint);
}
.entry.staged{border-style:dashed;color:var(--dim)}
.entry.staged::before{border-color:var(--line);background:var(--panel)}
.entry.head{border-color:var(--gold-line);background:var(--panel-2)}
.entry.head::before{background:var(--wax);border-color:var(--wax-deep)}
.entry .row1{display:flex;align-items:center;gap:.8em;margin-bottom:.35rem;flex-wrap:wrap}
.entry .hash{color:var(--gold)}
.entry .msg{color:var(--paper)}
.entry.staged .msg{color:var(--dim);font-style:italic}
.entry .tag{margin-left:auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.entry .tag.sealed{color:var(--wax);display:inline-flex;align-items:center;gap:.5em}
.entry .tag.sealed::before{
  content:"";width:.65em;height:.65em;border-radius:50%;background:var(--wax);
  box-shadow:inset 0 0 0 1.5px var(--wax-deep);
}
.entry .diff{color:var(--muted);white-space:pre-wrap}
.entry .diff .path{color:var(--dim)}
.entry .diff .to{color:var(--jade)}
.entry .parent{color:var(--faint);font-size:11px;margin-top:.3rem}
@media(prefers-reduced-motion:no-preference){
  .entry{animation:settle .6s ease both}
  .entry.staged{animation-delay:.9s}
  .entry.head{animation-delay:.3s}
  .entry.root{animation-delay:.1s}
  .entry.head::before{animation:stamp .45s ease .75s both}
  @keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes stamp{0%{transform:scale(2.2);opacity:0}60%{transform:scale(.9);opacity:1}100%{transform:scale(1)}}
}

/* ---------- code ---------- */
pre.code,.prose pre,.highlight pre{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.75;
  margin:1.5rem 0;color:var(--paper);
}
pre.code .c{color:var(--faint)}
pre.code .s{color:var(--gold)}
pre.code .k{color:#C97B6B}
pre.code .f{color:#9BB4D8}
.install{
  font-family:var(--mono);font-size:12.5px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r);padding:.7em 1em;display:inline-block;
}
.install .p{color:var(--faint);user-select:none}

/* ---------- feature grid ---------- */
.grid{display:grid;gap:10px;margin-top:2.4rem;grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid{grid-template-columns:1fr 1fr 1fr}}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  transition:border-color .15s,background .15s;
}
.card:hover{border-color:var(--faint);background:var(--panel-2)}
.card h3{margin-bottom:.5rem}
.card h3 code{background:none;border:none;padding:0;color:var(--gold);font-size:.85em}
.card p{color:var(--muted);font-size:13.5px;line-height:1.6}
.card p code{font-size:.82em}

/* ---------- diagrams ---------- */
.diagram{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;margin-top:2rem;overflow-x:auto;
}
.diagram pre.mermaid{
  display:flex;justify-content:center;min-width:560px;background:none;border:0;padding:0;margin:0;
  color:var(--dim);font-family:var(--mono);font-size:12px;
}
.diagram svg{max-width:100%;height:auto}
.diagram .cluster rect{rx:2px}
.diagram .node rect{rx:2px}
@media(prefers-reduced-motion:no-preference){
  .diagram .edgePaths path{stroke-dasharray:7 5;animation:flow 1.15s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-12}}
}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;margin-top:2rem;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:640px}
th{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:400;text-align:left;background:var(--panel);
}
th,td{padding:.8em 1em;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td{color:var(--muted)}
td:first-child{color:var(--paper)}
.ok{color:var(--jade)}
.na{color:var(--faint)}

/* ---------- footer ---------- */
footer{padding:clamp(80px,9vw,130px) 0 70px;border-top:1px solid var(--line);position:relative}
footer .rootmark{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:1.4rem}
footer .rootmark .h{color:var(--gold)}
.caveats{display:grid;gap:9px;margin:1.6rem 0 2.2rem;max-width:72ch}
.caveats li{list-style:none;color:var(--muted);font-size:13.5px;padding-left:1.5em;position:relative}
.caveats li::before{content:"!";position:absolute;left:0;top:0;color:var(--gold);font-family:var(--mono);font-size:12px}
.caveats b{color:var(--paper);font-weight:500}
.footlinks{margin-top:2.2rem;display:flex;gap:6px;flex-wrap:wrap;font-family:var(--mono);font-size:12px}
.footlinks a{color:var(--dim);text-decoration:none;padding:5px 10px;border:1px solid var(--line);border-radius:var(--r)}
.footlinks a:hover{color:var(--paper);border-color:var(--faint)}
.license{margin-top:2.4rem;color:var(--faint);font-size:11px;font-family:var(--mono);letter-spacing:.08em}

/* ============================================================
   doc pages (rendered markdown)
   ============================================================ */
.docpage{padding:clamp(56px,7vw,96px) 24px clamp(48px,6vw,80px)}
.docpage h1{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:.9rem}
.docpage > .lede{margin-bottom:.9rem}

/* ---------- documentation: hub + sidebar ---------- */
.docindex{padding:clamp(56px,7vw,96px) 24px clamp(48px,6vw,80px)}
.docindex h1{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:.9rem}
.docindex > .lede{margin-bottom:.9rem;max-width:76ch}
.docindex .prose{margin-top:3.4rem}

.docgrid{margin-top:2.8rem}
.docgrid-sec{
  grid-column:1/-1;margin:1.6rem 0 -.2rem;
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.docgrid-sec:first-child{margin-top:0}
.doccard{display:block;text-decoration:none;color:inherit}
.doccard h3{color:var(--paper);letter-spacing:-.01em}
.doccard:hover h3{color:var(--gold)}

/* One column, then page nav + content, then a third rail for the page's own
   contents. The third only appears once there is room for it without squeezing
   the prose, which is why the shell widens at the same breakpoint. */
/* minmax(0,…) on every track: a grid item defaults to min-width:auto, so the
   nav rail below would size the column to its own full width and push the page
   sideways instead of scrolling within it. */
.docshell{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:900px){
  .docshell{grid-template-columns:200px minmax(0,1fr);gap:48px}
}
@media(min-width:1240px){
  .docshell{max-width:1340px;grid-template-columns:200px minmax(0,1fr) 200px}
}

.docnav{
  padding:clamp(40px,6vw,96px) 24px 0;
  font-family:var(--sans);font-size:13.5px;
}
@media(min-width:900px){
  .docnav{padding-right:0;position:sticky;top:56px;align-self:start;max-height:calc(100vh - 56px);overflow-y:auto}
}
.docnav-home{
  display:block;text-decoration:none;
  color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:.9rem;margin-bottom:.6rem;border-bottom:1px solid var(--line);
}
.docnav-home:hover{color:var(--gold)}
.docnav ul{list-style:none;margin:0;padding:0}
.docnav li{margin:0}
.docnav-sec{
  color:var(--dim);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:1.35rem 0 .3rem .7rem;
}
.docnav-sec:first-child{padding-top:0}
.docnav a{
  display:block;padding:.42rem 0 .42rem .7rem;
  color:var(--muted);text-decoration:none;
  border-left:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.docnav a:hover{color:var(--paper)}
.docnav a.current{color:var(--gold);border-left-color:var(--gold)}

/* The shell already pads; inside the split the main column owns its own. */
.docshell .docpage{padding-left:0;padding-right:0}

/* Below the split, the rail would push seven links above the content. Lay it
   out as one horizontally-scrollable row instead. */
@media(max-width:899px){
  .docshell .docpage{padding-top:2rem}
  /* Markdown tables come out of kramdown bare, with no .tablewrap around them,
     and table's 640px min-width then pushes the whole page sideways. Make each
     one its own scroll container. */
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .docnav{padding-left:0;padding-right:0;padding-top:clamp(32px,6vw,56px)}
  .docnav-home{padding-bottom:.7rem;margin-bottom:.7rem}
  .docnav ul{
    display:flex;gap:2px;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .docnav ul::-webkit-scrollbar{display:none}
  .docnav li{flex:none}
  /* One scroll row, so the group headings would be five stray words in it. */
  .docnav-sec{display:none}
  .docnav a{
    padding:.3rem .7rem;white-space:nowrap;
    border-left:0;border-bottom:2px solid transparent;
  }
  .docnav a.current{border-left:0;border-bottom-color:var(--gold)}
}

/* ---------- on-this-page rail ---------- */
/* Hidden until the three-column breakpoint: below it the page nav is already
   competing for the same edge, and two stacked rails read as one long menu. */
.toc{display:none}
@media(min-width:1240px){
  .toc{
    display:block;position:sticky;top:56px;align-self:start;
    max-height:calc(100vh - 76px);overflow-y:auto;
    padding:clamp(40px,6vw,96px) 0 2rem;
    font-family:var(--sans);font-size:12.5px;line-height:1.45;
    scrollbar-width:none;
  }
  .toc::-webkit-scrollbar{display:none}
  .toc[hidden]{display:none}
}
.toc-title{
  color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:.9rem;margin-bottom:.6rem;border-bottom:1px solid var(--line);
}
.toc ul{list-style:none;margin:0;padding:0}
.toc a{
  display:block;padding:.34rem 0 .34rem .7rem;
  color:var(--dim);text-decoration:none;
  border-left:2px solid var(--line);
  transition:color .15s,border-color .15s;
}
.toc a:hover{color:var(--paper);border-left-color:var(--faint)}
.toc a.current{color:var(--gold);border-left-color:var(--gold)}
.toc .toc-h3 a{padding-left:1.5rem;font-size:12px;color:var(--faint)}
.toc .toc-h3 a:hover,.toc .toc-h3 a.current{color:var(--paper)}
.toc .toc-h3 a.current{color:var(--gold)}

.prose{max-width:76ch;margin-top:3rem;color:var(--muted);font-size:15.5px}
.prose > :first-child{margin-top:0}
.prose h2{
  font-size:1.5rem;color:var(--paper);margin:3rem 0 1rem;padding-top:2rem;
  border-top:1px solid var(--line);letter-spacing:-.02em;
}
.prose h3{font-size:1.1rem;color:var(--paper);margin:2rem 0 .7rem}
.prose h4{font-size:.95rem;color:var(--paper);margin:1.6rem 0 .5rem}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.3rem}
.prose li{margin-bottom:.45rem}
.prose li::marker{color:var(--faint)}
.prose strong{color:var(--paper);font-weight:500}
.prose a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-line)}
.prose a:hover{border-bottom-color:var(--gold)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.prose blockquote{
  border-left:1px solid var(--gold-line);background:var(--wax-tint);
  padding:.9rem 1.2rem;margin:0 0 1.4rem;border-radius:0 var(--r) var(--r) 0;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose table{margin:0 0 1.6rem;min-width:0;border:1px solid var(--line);border-radius:var(--r)}
.prose img{border:1px solid var(--line);border-radius:var(--r)}

/* rouge — dark, minimal */
.highlight{background:none}
.highlight .c,.highlight .c1,.highlight .cm,.highlight .cs,.highlight .cp{color:var(--faint);font-style:italic}
.highlight .k,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr,.highlight .kt,.highlight .kc{color:#C97B6B}
.highlight .s,.highlight .s1,.highlight .s2,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr{color:var(--gold)}
.highlight .n,.highlight .na,.highlight .nb,.highlight .nc,.highlight .nf,.highlight .nn,.highlight .nx,.highlight .nt{color:#9BB4D8}
.highlight .m,.highlight .mi,.highlight .mf,.highlight .mh,.highlight .mo,.highlight .il{color:var(--jade)}
.highlight .o,.highlight .ow,.highlight .p{color:var(--muted)}
.highlight .gd{color:var(--wax)}
.highlight .gi{color:var(--jade)}
.highlight .err{color:var(--wax)}