/* any docs — the terminal theme, put on Design System 2.0:
 * Inter (DS Document/* + Body/*) for titles, headings and running prose,
 * IBM Plex Mono (DS Mono/*) for chrome, code and the terminal furniture,
 * colours from the DS dark spectrum (color/spectrum/on-bg/*).
 * Sizes and line-heights are DS steps in px — no fractional rem values.
 * The mono voice is Iosevka Comfy, self-hosted beside Inter. */
@font-face{font-family:"Inter";src:url(inter-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(inter-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Iosevka Comfy";src:url(comfy-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Iosevka Comfy";src:url(comfy-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Iosevka Comfy";src:url(comfy-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Iosevka Comfy";src:url(comfy-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --bg:#0f0f0f;--panel:#060606;--bg1:#161616;--bg2:#060606;--bg3:rgba(255,255,255,.05);
  --surface-hover:rgba(255,255,255,.05);--line:#252525;--line2:#2e2e2e;
  --fg:#e5e5e5;--fg2:#a6a6a6;--fg3:#808080;
  /* brand accent — DS 2.0 Semantic (dark): accent/default → brand/100, hover → brand/90, subtle → brand/185 */
  --accent:#377aff;--accent-hover:#4b87ff;--accent-dim:#1e283c;
  --glow:0 0 0 1px rgba(55,122,255,.25),0 0 24px rgba(55,122,255,.08);
  /* DS 2.0 dark spectrum — color/spectrum/on-bg/*, the ramp built for coloured text on dark */
  --cyan:#76e1ff;--amber:#ffcd6b;--magenta:#db8cf6;--red:#ff9b8c;--code-fg:#c8c8c8;--code-k:#9cb2ff;
  --measure:752px;--side:304px;--r:6px;
  --mono:"Iosevka Comfy",ui-monospace,Menlo,Consolas,monospace;
  --sans:Inter,"Inter Variable",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html{color-scheme:dark;scroll-padding-top:64px;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/24px var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(55,122,255,.3)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}::-webkit-scrollbar-track{background:transparent}
a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted rgba(118,225,255,.4)}a:hover{color:#a8ecff;border-bottom-style:solid}
/* header */
.brand{display:flex;align-items:center;gap:12px;border:0;white-space:nowrap;text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{position:relative;display:block;width:48px;height:10px;color:#fff;flex-shrink:0}
.brand .logo{display:block;width:48px;height:10px}
.brand .cursor{position:absolute;left:49px;top:8.5px;width:7px;height:1.5px;background:currentColor;animation:blink 1.1s steps(1) infinite}
.brand .tag{font-family:var(--sans);font-size:14px;line-height:18px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--fg2)}
.brand:hover .tag{color:var(--fg)}
/* shell: sidebar column + content column, both full height */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;min-height:0;background:var(--panel);
  font-family:var(--sans);font-size:13px;line-height:18px;box-shadow:inset -1px 0 0 var(--line)}
.side-head{flex:0 0 52px;display:flex;align-items:center;gap:8px;padding:0 8px 0 16px}
.side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:12px 8px}
.side-nav::-webkit-scrollbar{width:0;height:0}
.side-foot{flex:0 0 52px;display:flex;align-items:center;justify-content:center;gap:32px;padding:0 16px}
.side-foot a{color:var(--fg2);border:0}.side-foot a:hover{color:var(--fg);text-decoration:none}
.content{min-width:0;display:flex;flex-direction:column}
/* content bar: breadcrumb by default, search in its place when opened */
.bar{position:sticky;top:0;z-index:20;flex:0 0 52px;display:flex;align-items:center;gap:12px;padding:0 20px;
  background:var(--bg)}
.crumb{flex:1 1 auto;font-family:var(--sans);font-size:13px;line-height:18px;margin:0;color:var(--fg);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb .sec-name{color:var(--fg2)}.crumb .sep{color:var(--fg3);margin:0 8px}
.search .ico{width:16px;height:16px;flex:0 0 16px}
.search{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px;width:144px;height:36px;
  padding:0 12px;border-radius:999px;color:var(--fg2);cursor:text;
  transition:width 180ms cubic-bezier(.2,0,0,1),background-color 180ms cubic-bezier(.2,0,0,1),box-shadow 180ms cubic-bezier(.2,0,0,1)}
.search:hover{background:var(--surface-hover)}
.search:focus-within{width:400px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line2)}
.search .ico{color:inherit}
.search input{flex:1;min-width:0;height:32px;border:0;background:none;color:var(--fg);
  font:inherit;font-family:var(--sans);font-size:13px;line-height:18px;caret-color:var(--accent);outline:none}
.search input::placeholder{color:var(--fg2)}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.esc{display:none;flex:0 0 auto;font-family:var(--mono);font-size:12px;line-height:18px;color:var(--fg3)}
.search:focus-within .esc{display:block}
.results{position:absolute;top:44px;right:0;width:400px;max-width:60vw;max-height:60vh;overflow:auto;
  background:var(--bg1);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:0 16px 48px rgba(0,0,0,.6);z-index:2}
.main{flex:1 1 auto;padding:36px 40px 64px;min-width:0;display:flex;flex-direction:column;align-items:center}
.doc,.pager,.foot{width:100%;max-width:var(--measure)}
.foot{font-family:var(--mono);color:var(--fg3);font-size:12px;line-height:18px;padding-top:16px}
.foot a{color:var(--fg2)}
@keyframes blink{50%{opacity:0}}
.menu{display:none;background:none;border:1px solid var(--line2);color:var(--fg);border-radius:var(--r);padding:4px 8px;font:inherit}
.results a{display:block;padding:8px 12px;border:0;border-bottom:1px solid var(--line);color:var(--fg)}.results a:hover,.results a.sel{background:var(--bg3)}
.results small{display:block;color:var(--fg3);font-size:12px;line-height:18px}.results em{font-style:normal;color:var(--accent)}
/* layout */
.sec{margin:0 0 1px}.sec summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:4px;padding:5px 8px;
  color:var(--fg2);font-weight:500;border-radius:6px}
.sec summary .sec-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chev{width:16px;height:16px;flex:0 0 16px;color:var(--fg3)}
.sec .minus{display:none}.sec[open] .plus{display:none}.sec[open] .minus{display:block}
.sec summary::-webkit-details-marker{display:none}

.sec[open] summary{color:var(--fg)}.sec summary:hover{color:var(--fg);background:var(--surface-hover)}
.sec ul{list-style:none;display:flex;flex-direction:column;gap:1px;margin:1px 0 0;padding:0}
.sec li a{display:flex;align-items:center;gap:8px;padding:5px 36px;color:var(--fg2);border:0;border-radius:6px}
.sec li a .item-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* sidebar ordinals: the section is its source directory prefix (01-understanding → 01),
   the item its 1-based position. Fixed columns keep every title on one left edge. */
.num{flex:0 0 auto;color:inherit;font-variant-numeric:tabular-nums}
.sec summary .num{width:24px}
.sec li a:hover{color:var(--fg);background:var(--surface-hover)}
.sec li a.active{color:var(--fg);background:var(--bg3)}
/* article */
.doc h1{font-family:var(--sans);font-weight:600;font-size:36px;line-height:42px;margin:12px 0 0;letter-spacing:-1px;color:#fff}
.doc h2{font-family:var(--sans);font-weight:600;font-size:26px;line-height:32px;letter-spacing:-.38px;margin:48px 0 0;padding-bottom:6px;color:#fff}
.doc h3{font-family:var(--sans);font-weight:600;font-size:20px;line-height:26px;margin:32px 0 0;color:var(--fg)}
.doc h4{font-family:var(--sans);font-weight:600;font-size:17px;line-height:24px;margin:24px 0 0;color:var(--fg2)}
.doc h2 a,.doc h3 a{color:inherit;border:0}.doc h2 a:hover::after,.doc h3 a:hover::after{content:" #";color:var(--fg3)}
.doc p,.doc ul,.doc ol{margin:16px 0 0}.doc li{margin:8px 0 0}.doc ul ul{margin:8px 0 0}
/* the dash hangs into the body column — marker at 0, item text at 16 — so the
   left edge of the page stays one line. 24 put it at 8, aligned to nothing. */
.doc ul{padding-left:20px;list-style:none}.doc ul>li::before{content:"–";color:var(--fg3);display:inline-block;width:20px;margin-left:-20px}
/* the native ::marker takes no spacing of its own — it butts right up against
   the text. Same hanging box as the dash list, so the gap is set, not inherited.
   Ordered lists here run to eight items, so the number is always one digit. */
.doc ol{padding-left:24px;list-style:none;counter-reset:ol}
.doc ol>li{counter-increment:ol}
.doc ol>li::before{content:counter(ol) ".";color:var(--accent);display:inline-block;width:24px;margin-left:-24px}
.doc>p:first-of-type{color:var(--fg2);font-size:15px;line-height:24px}
.doc strong{color:#fff}
.doc code{font-family:var(--mono);font-size:13px;background:var(--bg3);padding:2px 4px;border-radius:4px;color:var(--amber);border:1px solid var(--line)}
.doc a code{color:var(--cyan)}
.doc pre{position:relative;font-family:var(--mono);background:var(--bg1);border:0;border-radius:12px;padding:24px 16px;overflow-x:auto;line-height:20px;margin:16px 0 0}
.doc pre::after{content:attr(data-lang);position:absolute;right:16px;top:10px;font-size:12px;line-height:18px;color:var(--fg3)}
/* the copy button sits at the far right; the language label moves left of it
   only when the button exists (no clipboard API = no button, label stays put). */
.doc pre:has(.copy)::after{right:76px}
.doc pre .copy{position:absolute;right:12px;top:8px;font:500 12px/18px var(--mono);color:var(--fg3);background:var(--bg3);
  border:1px solid var(--line);border-radius:4px;padding:1px 8px;cursor:pointer}
.doc pre .copy:hover{color:var(--fg);border-color:var(--line2)}
.doc pre .copy.done{color:var(--accent);border-color:var(--accent)}
/* inline SVG figures follow the theme through the CSS variables they reference */
.doc svg.figure{display:block;width:100%;height:auto;margin:16px 0 0}
.doc pre code{background:none;border:0;padding:0;font-size:13px;line-height:20px;color:var(--code-fg)}
.doc pre code .k{color:var(--code-k)}.doc pre code .c{color:var(--fg3);font-style:italic}.doc pre code .s{color:var(--amber)}.doc pre code .n{color:var(--magenta)}.doc pre code .p{color:var(--code-k);font-weight:600}
.doc table{border-collapse:collapse;width:100%;margin:16px 0 0;font-size:13px;line-height:18px;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.doc th{font-family:var(--mono);font-size:13px;line-height:20px;background:var(--bg1);color:var(--fg2);font-weight:500;text-transform:lowercase}
.doc tr:hover td{background:rgba(255,255,255,.015)}
.doc blockquote{margin:16px 0;padding:4px 0 4px 16px;border:0;border-left:2px solid var(--line2);border-radius:0;color:var(--fg2)}
.doc blockquote p{margin:4px 0 0}.doc blockquote strong:first-child{color:var(--fg);font-weight:600}
.doc hr{border:0;border-top:1px dashed var(--line2);margin:32px 0}
.doc img{max-width:100%}
.doc kbd{font-family:var(--mono);font-size:12px;line-height:18px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:1px 6px;background:var(--bg2)}
/* home */
.doc .hero{padding:12px 0 0}
.doc .hero h1{font-size:36px;line-height:42px;margin:0;color:#fff;letter-spacing:-1px}
.doc .hero p{font-size:15px;line-height:24px;color:var(--fg2);max-width:50rem;border:0;padding:0}
.doc .pills{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
.doc .pill{font-family:var(--mono);display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:18px;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--fg2);background:none}
.doc .pill::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:999px;background:var(--accent)}
.doc .pill.cyan::before{background:var(--cyan)}.doc .pill.amber::before{background:var(--amber)}.doc .pill.magenta::before{background:var(--magenta)}
/* Home / Terminal is now the same block as Article / Code block — no border,
   no shadow, 24/16 — so .doc pre already draws it. Only the dim output stays. */
.doc .term .out{color:var(--fg3)}
.doc .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0 0}
/* Home / Tier and Home / Card share the surface — bg1, line2 outline, radius 12,
   padding 16 — and differ only in heading and rhythm: the tier stacks three lines
   6 apart under an H4, the card two lines 2 apart under Body/Large +. */
/* a tier is a card, not a button — it holds a link, it is not one, so it reads
   as a raised surface with no outline. The cards grid keeps its outline: each
   of those IS the link. */
.doc .tier{display:flex;flex-direction:column;gap:6px;padding:16px;border:0;border-radius:12px;
  background:var(--bg1)}
.doc .tier h3{font-family:var(--sans);margin:0;font-size:17px;line-height:24px;color:#fff}
.doc .tier p{margin:0;color:var(--fg2);font-size:13px;line-height:18px;border:0;padding:0}
.doc .tier a{font-size:13px;line-height:18px;color:var(--accent);border-bottom:0}.doc .tier a::after{content:" →"}
.doc .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0 0}
/* … and earns the wider step only after body content. Straight under a heading it
   stays on 16, so the gap below an H2 never changes with what follows it. */
.doc :not(h1,h2,h3,h4)+:is(.cards,.tiers){margin-top:24px}
.doc .cards a{display:flex;flex-direction:column;gap:2px;padding:16px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg1);color:var(--fg);transition:border-color .15s,transform .15s}
.doc .cards a:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--glow)}
/* the card names a section and carries its ordinal, both in the title colour,
   the number hugging its own width — one line, not two columns. */
.doc .cards a strong{display:flex;gap:2px;font-family:var(--sans);font-weight:500;font-size:15px;
  line-height:24px;color:#fff}
.doc .cards a strong .num{flex:0 0 24px;color:inherit;font-variant-numeric:tabular-nums}
/* direct child only — the ordinal is a span too, nested in <strong>, and this
   rule was dragging it down to 13/18 while the title stayed 15/24 */
.doc .cards a>span{color:var(--fg2);font-size:13px;line-height:18px}
.doc .ascii{font-family:var(--mono);color:var(--fg2);font-size:12px;line-height:18px}
/* pager + footer */
.pager{display:flex;justify-content:space-between;gap:16px;margin:48px 0 16px}
.pager a{flex:1;padding:16px;border:1px solid var(--line2);border-radius:12px;color:var(--fg);background:var(--bg1)}
.pager a:hover{border-color:var(--accent);box-shadow:var(--glow)}
/* the label is Body/Small in fg3 with the arrow as its own item 4 away — not the
   mono caps it used to be; the title is Body/Large + */
.pager a small{display:flex;gap:4px;font-family:var(--sans);font-size:13px;line-height:18px;color:var(--fg3)}
.pager a span{font-weight:500}
.pager .prev small::before{content:"←"}
.pager .next{text-align:right}.pager .next small{justify-content:flex-end}.pager .next small::after{content:"→"}
@media (max-width:900px){
  .menu{display:block}
    .side.open{display:block}
  .doc .cards,.doc .tiers{grid-template-columns:1fr}}