:root{--bg:#0d1017;--panel:#161b27;--panel2:#1d2432;--line:#2a3348;
 --ink:#e3e8f2;--ink-dim:#98a4bd;--ink-faint:#6a7691;
 --accent:#8b93f8;--accent-dim:#5d67c9;
 --bar-h:3.15rem;--indent1:2.25rem;--indent2:4.25rem;--row-gap:1.25rem;
 /* masthead                                    contrast on the ground */
 --nav-bg:#0a0d14;
 --nav-edge:#222a3d;
 --nav-rule:#78829f;      /* column rule                      3.34:1   */
 --nav-ink:#e3e8f2;       /* current page + hover            15.8:1    */
 --nav-ink-here:#a7b2c8;  /* siblings in the current group    9.11:1   */
 --nav-ink-dim:#98a4bd;   /* resting label                    7.75:1   */
 --nav-accent:#7b8cff;    /* current underline, focus         6.51:1   */
 --nav-row:1.625rem;      /* within-group step   (vertical)            */
 --nav-gutter:64px;       /* between-group step  (horizontal)          */
 --nav-stack:32px;        /* between-group step  (vertical, wrapped)   */
 --nav-flag-gap:80px;     /* flag -> register, minimum                 */
 --nav-rule-inset:8px;    /* rule spans cap-line to baseline           */}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
 font:15px/1.6 "Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif}
.shell{max-width:1240px;margin:0 auto;padding:3rem 2.5rem 6rem}
h1{font-size:2.35rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .4rem}
h1::after{content:'';display:block;width:3.4rem;height:2px;margin-top:.7rem;background:linear-gradient(90deg,var(--accent),transparent)}
.note{color:var(--ink-faint);font-size:.85rem;margin:0 0 2.6rem;
 border-left:2px solid var(--accent-dim);padding-left:.8rem}
.entry{margin-bottom:2.6rem}
.row{display:flex;align-items:stretch;gap:var(--row-gap)}
.bar{flex:1;display:flex;align-items:stretch;min-width:0;background:var(--panel);
 border:1px solid var(--line);border-radius:3px;cursor:pointer;
 transition:background .13s,border-color .13s}
.bar:hover{background:var(--panel2);border-color:var(--accent-dim)}
.bar[aria-expanded="true"]{border-color:var(--accent-dim);
 border-bottom-left-radius:0;border-bottom-right-radius:0}
.bar[aria-expanded="true"] .bar__chev{color:var(--accent)}
.bar__name{flex:1;min-width:0;display:flex;align-items:center;padding:0 1.1rem;
 height:var(--bar-h);font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__meta{color:var(--ink-faint);font-size:.82rem;margin-left:.85rem;flex:none}
.bar__chev{flex:none;width:3.15rem;display:grid;place-items:center;
 border-left:1px solid var(--line);color:var(--ink-dim)}
.bar__chev svg{transition:transform .18s}
.bar[aria-expanded="true"] .bar__chev svg{transform:rotate(180deg)}
.dl{flex:none;width:var(--bar-h);height:var(--bar-h);display:grid;place-items:center;
 background:var(--panel);border:1px solid var(--line);border-radius:3px;color:var(--ink-dim);
 text-decoration:none;transition:background .13s,color .13s,border-color .13s}
.dl:hover{background:var(--panel2);color:var(--accent);border-color:var(--accent-dim)}
.body{padding-left:var(--indent1);padding-top:1.15rem}
.body h2{font-size:1.02rem;font-weight:600;margin:0 0 .55rem}
.summary{padding-left:calc(var(--indent2) - var(--indent1));color:var(--ink-dim);
 max-width:74ch;margin:0}
.summary p{margin:0 0 .35rem}
.file{width:calc(100% - var(--bar-h) - var(--row-gap));display:none}
.entry.open .file{display:block}
.file__inner{background:#0a0d14;border:1px solid var(--accent-dim);border-top:none;
 border-radius:0 0 3px 3px;overflow:hidden}
.file__head{display:flex;justify-content:space-between;align-items:baseline;
 color:var(--ink-faint);font-size:.78rem;padding:.5rem .95rem;
 border-bottom:1px solid var(--line)}
pre{margin:0;background:#0a0d14;border:none;border-radius:0;
 padding:1rem 1.15rem;
 font:12.5px/1.55 "Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
 color:#c3cad3;white-space:pre-wrap;overflow-wrap:break-word;max-width:100%}

/* MASTHEAD - twelve tabs as four columns of three.
   Each group is ONE flex item (a nested <ul> inside one <li>), so a line
   break can only ever fall BETWEEN groups, never inside one. */
.nav{position:sticky;top:0;z-index:5;
 background:var(--nav-bg);
 background:rgba(10,13,20,.94);
 -webkit-backdrop-filter:saturate(140%) blur(10px);
 backdrop-filter:saturate(140%) blur(10px);
 border-bottom:1px solid var(--nav-edge)}
/* No fixed height - the register sets it. flex-wrap + space-between drops
   the flag onto its own line exactly when the register stops fitting beside
   it, in any font, at any zoom. No guessed breakpoint. */
.nav__inner{max-width:1240px;margin:0 auto;padding:1rem 2.5rem;
 display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
 gap:3rem var(--nav-flag-gap)}
/* The flag. Caps, one word per line via min-content, no <br> in the markup. */
.brand{display:block;width:min-content;
 color:var(--nav-ink);text-decoration:none;
 font-size:1.03rem;font-weight:600;line-height:var(--nav-row);
 text-transform:uppercase;letter-spacing:.08em}
.brand:hover{color:#fff}
.nav__links{list-style:none;margin:0;padding:0;
 display:flex;flex-wrap:wrap;
 column-gap:var(--nav-gutter);row-gap:var(--nav-stack)}
.nav__grp{position:relative}
.nav__col{list-style:none;margin:0;padding:0}
/* The column rule: a hairline centred in the gutter, drawn as a BORDER so it
   survives forced-colours, printing and RTL. A pseudo-element, so it is never
   in the accessibility tree. site.js clears it on row-starting groups. */
.nav__grp::before{content:"";position:absolute;
 left:calc(var(--nav-gutter) / -2);
 top:var(--nav-rule-inset);bottom:var(--nav-rule-inset);
 width:0;border-inline-start:1px solid var(--nav-rule)}
.nav__grp:first-child::before,
.nav__grp--rowstart::before{content:none}
.nav__link{display:inline-block;
 color:var(--nav-ink-dim);text-decoration:none;
 font-size:.94rem;font-weight:400;line-height:var(--nav-row);
 padding:0 6px;margin:0 -6px;white-space:nowrap;
 transition:color .12s ease}
.nav__grp--here .nav__link{color:var(--nav-ink-here)}
.nav__link:hover{color:var(--nav-ink)}
.nav__link[aria-current="page"]{color:var(--nav-ink);
 text-decoration:underline;
 text-decoration-color:var(--nav-accent);
 text-decoration-thickness:2px;
 text-underline-offset:4px;
 text-decoration-skip-ink:none}
.brand:focus-visible,.nav__link:focus-visible{
 outline:2px solid var(--nav-accent);outline-offset:2px;border-radius:3px}
@media (max-width:540px){
 .nav__inner{padding:.9rem 1.25rem;gap:1.75rem var(--nav-flag-gap)}
 .nav__links{flex-direction:column;row-gap:1.5rem}
}
/* The flag drops to its own line near a 1115px viewport and the bar becomes
   237px. It must not stay pinned at that height. */
@media (max-width:1130px),(max-height:640px){.nav{position:static}}
@media (prefers-reduced-motion:reduce){.nav__link{transition:none}}
@media print{.nav{position:static;background:none;backdrop-filter:none}}
.foot{border-top:1px solid var(--line);margin-top:4rem}
.foot__inner{max-width:1240px;margin:0 auto;padding:1.6rem 2.5rem;
 display:flex;justify-content:space-between;color:var(--ink-faint);font-size:.82rem}

/* Placeholder pages: a title and this line, nothing else. */
.soon{color:var(--ink-faint);margin:.2rem 0 0}