/* The site's own copies of its web fonts (self-hosted 2026-11-01, latin and latin-ext only; other scripts fall
   back to the system fonts). Licences: the OFL files beside the fonts. */
/* Chakra Petch 600, latin */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/chakra-petch-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Chakra Petch 600, latin-ext */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/chakra-petch-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Chakra Petch 700, latin */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/chakra-petch-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Chakra Petch 700, latin-ext */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/chakra-petch-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* IBM Plex Mono 400, latin */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Mono 400, latin-ext */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* IBM Plex Mono 500, latin */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Mono 500, latin-ext */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* IBM Plex Sans 400 600, latin */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Sans 400 600, latin-ext */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root{
  --canvas:#10141A; --paper:#1A2028; --ink:#E4EAF0; --ink-2:#9AA6B6; --rule:#222A35; --rule-2:#1B222C;
  --accent:#4FB6E0; --accent-ink:#6EC6EA; --accent-soft:rgba(79,182,224,.14);
  --code-bg:#0B0E13; --code-ink:#E4EAF0; --code-dim:#7E8898;
  --info:#6FA8DC; --warn:#E0B24F; --crit:#D97C6A; --ok:#5BC98F;
  --r1:#E4EAF0; --r2:#D3DAE2; --r3:#C2CAD4; --r4:#B1BAC6; --r5:#A0AAB8; --r6:#8F9AAA; --r7:#7E8A9C;
  --r8:#6D7A8E; --r9:#5C6A80; --r10:#4C5A70; --r11:#3E4A5C; --r12:#323C4B; --r13:#28303C; --r14:#202832; --r15:#1A2028;
  --shadow: 0 1px 0 rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.7);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --canvas:#EEF1F4; --paper:#FFFFFF; --ink:#10141A; --ink-2:#4A5464; --rule:#D3DAE2; --rule-2:#E3E8EE;
    --accent:#2F8FBF; --accent-ink:#1F6E97; --accent-soft:rgba(47,143,191,.12);
    --code-bg:#1A2028; --code-ink:#E4EAF0; --code-dim:#8E98A6;
    --info:#2B67AD; --warn:#9A6A12; --crit:#B4392C; --ok:#2E7D4F;
    --r1:#10141A; --r2:#1E242C; --r3:#2C343E; --r4:#3A4450; --r5:#495462; --r6:#586474; --r7:#687486;
    --r8:#7A8697; --r9:#8D98A8; --r10:#A1ABB9; --r11:#B5BDC9; --r12:#C8CFD8; --r13:#D9DEE5; --r14:#E8ECF0; --r15:#FFFFFF;
    --shadow: 0 1px 0 rgba(16,20,26,.06), 0 8px 24px -14px rgba(16,20,26,.25);
  }
}
:root[data-theme="light"]{
  --canvas:#EEF1F4; --paper:#FFFFFF; --ink:#10141A; --ink-2:#4A5464; --rule:#D3DAE2; --rule-2:#E3E8EE;
  --accent:#2F8FBF; --accent-ink:#1F6E97; --accent-soft:rgba(47,143,191,.12);
  --code-bg:#1A2028; --code-ink:#E4EAF0; --code-dim:#8E98A6;
  --info:#2B67AD; --warn:#9A6A12; --crit:#B4392C; --ok:#2E7D4F;
  --r1:#10141A; --r2:#1E242C; --r3:#2C343E; --r4:#3A4450; --r5:#495462; --r6:#586474; --r7:#687486;
  --r8:#7A8697; --r9:#8D98A8; --r10:#A1ABB9; --r11:#B5BDC9; --r12:#C8CFD8; --r13:#D9DEE5; --r14:#E8ECF0; --r15:#FFFFFF;
  --shadow: 0 1px 0 rgba(16,20,26,.06), 0 8px 24px -14px rgba(16,20,26,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important; animation:none !important} }
body{
  margin:0; color:var(--ink); background:var(--canvas);
  font: 400 16px/1.6 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (min-width: 1100px){ body{font-size:17px} }
a{color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
code,pre,kbd,.mono{font-family:"IBM Plex Mono", ui-monospace, Consolas, monospace}
code{font-size:.92em; background:var(--rule-2); padding:.08em .35em; border-radius:2px; overflow-wrap:anywhere}
pre{margin:0; background:var(--code-bg); color:var(--code-ink); padding:14px 16px; border-radius:0 2px 2px 2px; overflow-x:auto; font-size:13.5px; line-height:1.55; tab-size:4; border:1px solid var(--rule)}
pre code{background:none; padding:0; font-size:inherit; color:inherit}
h1,h2,h3{font-family:"Chakra Petch", "IBM Plex Sans", sans-serif; margin:0; text-wrap:balance; letter-spacing:.005em}
h1{font-size:40px; line-height:1.05; font-weight:700}
h2{font-size:30px; line-height:1.15; font-weight:700}
h3{font-size:21px; line-height:1.25; font-weight:600}
p{margin:0 0 14px; max-width:72ch}
strong{font-weight:600}
table{border-collapse:collapse; width:100%; font-size:14.5px}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.tblwrap{overflow-x:auto; margin:0 0 18px}

/* ---------- top bar: WARPGATE's own titlebar idiom (glyph + spaced wordmark, mono chips) ---------- */
/* the network bar above it: one way back to legacygamers.net, quiet, in the nav buttons' type */
.lgn-bar{background:var(--paper); border-bottom:1px solid var(--rule)}
.lgn-bar .in{max-width:1180px; margin:0 auto; padding:0 24px; height:34px; display:flex; align-items:center}
.lgn-back{display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; padding:4px 10px 4px 8px; border:1px solid var(--rule); border-radius:2px; transition:color .2s, border-color .2s}
.lgn-back:hover{color:var(--ink); border-color:var(--ink-2); text-decoration:none}
.lgn-back svg{width:10px; height:10px; flex:none}
.top{position:sticky; top:0; z-index:5; height:56px; display:flex; align-items:center; background:var(--canvas); border-bottom:1px solid var(--rule)}
.top .in{max-width:1180px; width:100%; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:16px}
.nav-brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink)}
.nav-brand svg{width:18px; height:18px; display:block}
.nav-brand-lg{font-family:"Chakra Petch", sans-serif; font-weight:600; font-size:13px; letter-spacing:.22em}
.nav-brand-sub{font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.14em; color:var(--ink-2); padding-left:12px; border-left:1px solid var(--rule)}
.nav-links{display:flex; align-items:center; gap:6px; list-style:none; margin:0 0 0 auto; padding:0}
/* the site's nav is a <nav> landmark around the list (2026-10-31; it was a tablist of links): the <nav> takes the
   list's place in the row, so the row looks as it did */
.site-nav{margin-left:auto} .site-nav .nav-links{margin:0}
.nav-btn{font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:7px 12px; display:inline-block; text-decoration:none; border-radius:2px; border:1px solid var(--rule); color:var(--ink-2); transition:color .2s, border-color .2s, background .2s}
.nav-btn--ghost:hover{color:var(--ink); border-color:var(--ink-2); text-decoration:none}
.nav-btn--ghost[aria-selected="true"], .nav-btn--ghost[aria-current]{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft)}
.nav-btn--solid{color:var(--on-100); background:var(--accent); border-color:var(--accent); font-weight:500}
.nav-btn--solid:hover{filter:brightness(1.1); text-decoration:none}
.pal{display:flex; align-items:center; gap:9px; background:transparent; border:0; padding:4px 6px; margin-left:2px; border-radius:2px; cursor:pointer; color:var(--ink-2)}
.pal .strip{display:grid; grid-template-columns:repeat(16, 9px); gap:1px; padding:1px; background:var(--rule); border-radius:1px}
.pal .strip i{display:block; height:9px}
.pal .strip i:first-child{background:var(--accent)}
.pal-lbl{font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
.pal:hover{background:var(--rule-2); color:var(--ink)} .pal:hover .strip{outline:1px solid var(--accent)}
.note-mock{font-family:"IBM Plex Mono", monospace; font-size:11.5px; color:var(--ink-2); padding:6px 24px; text-align:center; background:var(--accent-soft); border-bottom:1px solid var(--rule)}
.note-mock b{color:var(--accent-ink)}
.view[hidden]{display:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}

/* ---------- colour wheel popover ---------- */
.pop{position:fixed; z-index:9; top:72px; right:24px; width:300px; background:var(--paper); border:1px solid var(--rule); border-radius:2px; box-shadow:var(--shadow); padding:16px}
.pop[hidden]{display:none}
.pop .lbl{font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin:0 0 8px}
.pop .row{display:flex; align-items:center; gap:14px; margin:0 0 14px}
.wheel{width:120px; height:120px; border-radius:50%; flex:none; cursor:crosshair; position:relative;
  background: conic-gradient(from 90deg, #ff4d4d, #ffcc33, #5ee06f, #33dccf, #4fb6e0, #7a7cf0, #d46ae0, #ff4d4d);
  -webkit-mask: radial-gradient(circle, transparent 36px, #000 37px); mask: radial-gradient(circle, transparent 36px, #000 37px)}
.wheelbox{position:relative; width:120px; height:120px; flex:none}
.wheelbox .dot{position:absolute; width:14px; height:14px; border-radius:50%; border:2px solid var(--paper); background:var(--accent); box-shadow:0 0 0 1px var(--ink-2); left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none}
.wheelbox .hex{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-2); pointer-events:none}
.pop .side{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0}
.pre{display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:center; border:1px solid var(--rule); background:transparent; color:var(--ink); padding:6px 8px; border-radius:2px; cursor:pointer; font:500 13px/1.2 "IBM Plex Sans", sans-serif; text-align:left}
.pre i{display:block; width:18px; height:18px; border-radius:2px}
.pre small{display:block; font-family:"IBM Plex Mono", monospace; font-size:10.5px; color:var(--ink-2); font-weight:400; margin-top:2px}
.pre:hover, .pre[aria-pressed="true"]{border-color:var(--accent)}
.pop .exact{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2)}
.pop input[type="color"]{width:28px; height:22px; padding:0; border:1px solid var(--rule); background:var(--paper); border-radius:2px; cursor:pointer}
.themes{display:flex; gap:4px; background:var(--rule-2); padding:3px; border-radius:2px}
.themes button{flex:1; font:500 12px/1 "IBM Plex Mono", monospace; border:0; background:transparent; color:var(--ink-2); padding:7px 0; border-radius:2px; cursor:pointer}
.themes button[aria-pressed="true"]{background:var(--paper); color:var(--ink); box-shadow:0 1px 0 var(--rule)}

/* ---------- the shared two-column shell ---------- */
.guide{display:grid; grid-template-columns:232px minmax(0, 1fr); gap:48px; padding:36px 0 80px}
.rail{position:sticky; top:80px; align-self:start; max-height:calc(100vh - 96px); overflow:auto}
/* scrollbars in the site's own tokens (owner 2026-09-24: the changelog rail showed the browser's grey bar):
   thin, a muted thumb on a clear track, both themes. Chrome ignores its ::-webkit-scrollbar rules (and
   draws arrow buttons) once scrollbar-width/-color are set, so the standard pair is for Firefox only */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--ink-2) 40%, transparent) transparent}}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--ink-2) 40%, transparent); border-radius:4px; border:2px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--accent)}
::-webkit-scrollbar-corner{background:transparent}
.rail .lbl{font-family:"IBM Plex Mono", monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin:0 0 10px}
.rail .blk{margin:0 0 22px}
.toc{display:flex; flex-direction:column; gap:2px}
.toc a{display:grid; grid-template-columns:12px 1fr; gap:10px; align-items:center; padding:6px 8px 6px 6px; border-radius:2px; color:var(--ink-2); text-decoration:none; font-size:14px; line-height:1.3}
.toc a i{display:block; width:12px; height:12px; border-radius:1px; background:var(--sw, transparent); border:1px solid var(--sw, var(--rule))}
.toc a i.ico{background:none; border:0; width:14px; height:14px; margin:0 -1px; display:inline-flex; align-items:center; justify-content:center; color:var(--accent-ink, var(--accent)); font-style:normal; font-size:14px; line-height:1}
.toc a i.ico svg{width:14px; height:14px; fill:currentColor; display:block} .toc a i.ico svg.ln{fill:none; stroke:currentColor}
.toc a i.ico .heart{font-size:15px; line-height:1}
.toc .toc-soon{display:grid; grid-template-columns:12px 1fr auto; gap:10px; align-items:center; padding:6px 8px 6px 6px; color:var(--ink-2); font-size:14px; line-height:1.3; opacity:.72; cursor:default}
.toc .toc-soon i.ico{width:14px; height:14px; margin:0 -1px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-2)}
.toc .toc-soon i.ico svg{width:14px; height:14px; fill:currentColor; display:block} .toc .toc-soon i.ico svg.ln{fill:none; stroke:currentColor}
.toc .toc-soon b{font:500 9px/1 "IBM Plex Mono", monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--rule); border-radius:1px; padding:3px 4px; white-space:nowrap}
.card-soon{opacity:.78} .card-soon .name{color:var(--ink-2)}
.card .soon{font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--rule); border-radius:1px; padding:2px 7px; align-self:start}
.toc i.ico svg.wg.wgi, .toc .fbtn i.ico svg.wg.wgi{fill:none; width:15px; height:15px}
.toc a i.ico.num{font-family:"IBM Plex Mono", monospace; font-size:10px; font-weight:600; background:var(--accent); color:var(--on-100); border-radius:2px; letter-spacing:0}
.toc a:hover i.ico.num{color:var(--on-100)}
.section h2 .hico{flex:none; width:24px; height:24px; color:var(--accent-ink, var(--accent)); display:inline-flex; align-items:center; justify-content:center}
.section h2 .hico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; display:block}
.toc a:hover{color:var(--ink); background:var(--rule-2)}
.toc a:hover i:not(.ico){background:var(--accent); border-color:var(--accent)} .toc a:hover i.ico{color:var(--accent)}
.toc a.cur{color:var(--ink); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--rule)}
.toc a.cur i:not(.ico){background:var(--accent) !important; border-color:var(--accent) !important}
.toc .grp{font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); padding:8px 6px 2px}

.doc{max-width:calc(76ch + 72px); min-width:0; background:var(--paper); border:1px solid var(--rule); border-radius:2px; padding:32px 36px 28px; box-shadow:var(--shadow)}
.doc.wide{max-width:none}
.doc .hero{padding:0 0 22px; border-bottom:1px solid var(--rule); margin-bottom:22px}
.doc .hero-label{font-family:"IBM Plex Mono", monospace; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:0 0 14px}
.doc .hero h1{margin:0}
/* the path above a title (site_docs.crumb): the docs pages and, since 2026-10-31, the guides */
.dx-crumb{display:flex; flex-wrap:wrap; gap:2px 9px; margin:0 0 14px; font:400 12.5px/1.5 "IBM Plex Mono", monospace; color:var(--ink-2)}
.dx-crumb a{color:var(--ink-2); text-decoration:none} .dx-crumb a:hover{color:var(--accent-ink); text-decoration:underline}
.dx-crumb i{font-style:normal; opacity:.55} .dx-crumb span{color:var(--ink)}
.doc .hero-sub{font-size:17.5px; color:var(--ink-2); line-height:1.55; margin:14px 0 0; max-width:66ch}
.doc .meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin:16px 0 0; font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--ink-2)}
.doc .meta b{color:var(--ink); font-weight:500}
.overview-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:0 0 36px}
.overview-cell{background:var(--canvas); border:1px solid var(--rule); border-radius:2px; padding:12px 14px}
.overview-cell-label{font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin:0 0 6px}
.overview-cell-value{font-size:14.5px}
.section{padding:30px 0 12px; border-top:1px solid var(--rule); scroll-margin-top:80px}
.section h2{display:flex; align-items:center; gap:14px; margin:0 0 16px}
.step-badge{flex:none; width:40px; height:40px; display:grid; place-items:center; font-family:"Chakra Petch", sans-serif; font-weight:700; font-size:20px; border-radius:2px; color:var(--on-100); background:var(--accent)}
:root{--on-100:#10141A; --on-84:#10141A; --on-68:#10141A; --on-54:#FFFFFF; --on-42:#FFFFFF; --on-32:#FFFFFF; --on-24:#FFFFFF}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){--on-100:#10141A; --on-84:#10141A; --on-68:#10141A; --on-54:#10141A; --on-42:#10141A; --on-32:#10141A; --on-24:#10141A} }
:root[data-theme="light"]{--on-100:#10141A; --on-84:#10141A; --on-68:#10141A; --on-54:#10141A; --on-42:#10141A; --on-32:#10141A; --on-24:#10141A}
#step-1 .step-badge, .step:nth-child(1) .step-badge{background:color-mix(in srgb, var(--accent) 100%, var(--paper)); color:var(--on-100)}
#step-2 .step-badge, .step:nth-child(2) .step-badge{background:color-mix(in srgb, var(--accent) 84%, var(--paper)); color:var(--on-84)}
#step-3 .step-badge, .step:nth-child(3) .step-badge{background:color-mix(in srgb, var(--accent) 68%, var(--paper)); color:var(--on-68)}
#step-4 .step-badge, .step:nth-child(4) .step-badge{background:color-mix(in srgb, var(--accent) 54%, var(--paper)); color:var(--on-54)}
#step-5 .step-badge, .step:nth-child(5) .step-badge{background:color-mix(in srgb, var(--accent) 42%, var(--paper)); color:var(--on-42)}
#step-6 .step-badge, .step:nth-child(6) .step-badge{background:color-mix(in srgb, var(--accent) 32%, var(--paper)); color:var(--on-32)}
#step-7 .step-badge, .step:nth-child(7) .step-badge{background:color-mix(in srgb, var(--accent) 24%, var(--paper)); color:var(--on-24)}
.section h3{margin:26px 0 10px; scroll-margin-top:80px}
.section h3 code{font-size:.9em}
.section ul, .section ol{max-width:72ch; padding-left:22px; margin:0 0 14px} .section li{margin:0 0 5px}
.callout{position:relative; margin:14px 0 18px; padding:12px 16px 12px 18px; background:var(--canvas); border:1px solid var(--rule); border-left-width:4px; border-radius:2px; font-size:15px; max-width:76ch}
.callout p:last-child{margin:0} .callout ul, .callout ol{margin:6px 0 0; padding-left:20px} .callout li{margin:0 0 4px}
.callout-info{border-left-color:var(--info)} .callout-warn{border-left-color:var(--warn)} .callout-critical{border-left-color:var(--crit)}
.callout-critical strong:first-child{color:var(--crit)} .callout-warn strong:first-child{color:var(--warn)}
.code-label{display:inline-block; font-family:"IBM Plex Mono", monospace; font-size:11.5px; letter-spacing:.06em; color:var(--code-dim); background:var(--code-bg); padding:5px 12px 4px; border-radius:2px 2px 0 0; margin-top:6px; border:1px solid var(--rule); border-bottom:0}
.code-label + pre{margin-bottom:16px}
.section > pre{margin:6px 0 16px; border-radius:2px}
.doc figure{margin:14px 0 20px; max-width:100%} .doc figure img{display:block; max-width:100%; height:auto; border:1px solid var(--rule); border-radius:2px; background:var(--canvas)} .doc figcaption{font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.45}
.file-tree{white-space:pre; overflow-x:auto; font-family:"IBM Plex Mono", monospace; font-size:13px; line-height:1.6; background:var(--canvas); border:1px solid var(--rule); border-radius:2px; padding:14px 16px; margin:8px 0 18px; color:var(--ink-2)}
.file-tree .ft-dir{color:var(--ink); font-weight:500} .file-tree .ft-file{color:var(--accent-ink)} .file-tree em{color:var(--ink-2)}
.checklist-section{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; margin:6px 0 10px}
.checklist-card{background:var(--canvas); border:1px solid var(--rule); border-radius:2px; padding:16px 18px}
.checklist-card h3{margin:0 0 10px}
.checklist-progress{display:flex; align-items:center; gap:12px; margin:0 0 12px}
.checklist-progress-bar{flex:1; height:8px; background:var(--rule-2); border-radius:1px; overflow:hidden}
.checklist-progress-fill{height:100%; width:0; background:var(--ok); transition:width .25s}
.checklist-progress-label{font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; min-width:48px; text-align:right}
.checklist{list-style:none; margin:0; padding:0}
.checklist li{display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; padding:6px 4px; border-radius:2px; cursor:pointer; font-size:14.5px}
.checklist li:hover{background:var(--rule-2)}
.checklist input{margin:4px 0 0; width:16px; height:16px; accent-color:var(--ok); cursor:pointer}
.checklist li.checked-item span{color:var(--ink-2); text-decoration:line-through; text-decoration-color:var(--rule)}
.checklist-reset{display:inline-block; margin-top:12px; padding:5px 12px; font:500 11.5px/1.2 "IBM Plex Mono", monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:transparent; border:1px solid var(--rule); border-radius:2px; cursor:pointer}
.checklist-reset:hover{color:var(--ink); background:var(--rule-2); border-color:var(--accent)}
.checklist-reset:active{background:var(--accent-soft)}
.trouble-grid{display:grid; gap:0; border:1px solid var(--rule); border-radius:2px; background:var(--canvas); overflow-x:auto; margin:8px 0 18px}
.trouble-head, .trouble-item{display:grid; grid-template-columns:1.1fr 1fr 1.3fr; min-width:640px}
.trouble-head div{font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); padding:9px 12px; background:var(--rule-2); border-bottom:1px solid var(--rule)}
.trouble-item{border-bottom:1px solid var(--rule)} .trouble-item:last-child{border-bottom:0}
.trouble-cell{padding:10px 12px; font-size:14px; border-right:1px solid var(--rule-2)} .trouble-cell:last-child{border-right:0}
.trouble-cell:first-child{font-weight:500}

/* ---------- front page + WARP0716 page ---------- */
.doc .hero .hero-in{max-width:66ch}
.wgmark{display:flex; align-items:center; gap:14px; margin:0 0 16px}
.wgmark svg{width:44px; height:44px}
svg.wg .ring{stroke:var(--accent)} svg.wg .arc{stroke:var(--accent-ink)} svg.wg .dot{fill:var(--accent)}
svg.wg .swirl{transform-origin:12px 12px; transform-box:view-box; animation:brandswirl 3.5s linear infinite}
@keyframes brandswirl{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ svg.wg .swirl{animation:none} }
.wgmark b{font-family:"Chakra Petch", sans-serif; font-weight:700; font-size:30px; letter-spacing:.08em}
.cta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:20px 0 0}
.btn{display:inline-block; font-family:"Chakra Petch", sans-serif; font-weight:600; font-size:15px; letter-spacing:.02em; color:var(--on-100); background:var(--accent); padding:11px 16px; border-radius:2px; text-decoration:none}
.btn:hover{filter:brightness(1.1); text-decoration:none}
.btn.big{font-size:18px; padding:14px 22px}
.cta .fact, .dlbox .fact{font-family:"IBM Plex Mono", monospace; font-size:12.5px; color:var(--ink-2)}
.cta .fact b, .dlbox .fact b{color:var(--ink); font-weight:500}
.fact .wgbeta{color:var(--warn); text-decoration:none; white-space:nowrap} .fact .wgbeta b{color:var(--warn)}
.fact .wgbeta:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
/* the "New" star in the hero's free corner (SHOW_NEW_KRO): a sticker in the accent, so it follows the colour
   wheel like the buttons do. Stamped on once at load; the global reduced-motion rule leaves it at rest. When
   the hero is too narrow for a side column it drops under the download button as a row. */
.doc .hero.has-new{container-type:inline-size}
.hero.has-new .hero-row{display:grid; grid-template-columns:minmax(0, 1fr) 172px; gap:0 32px; align-items:start}
.kro-new{display:flex; flex-direction:column; align-items:center; gap:12px; padding:4px 0 0; text-align:center; color:var(--ink); text-decoration:none}
.kro-new:hover{text-decoration:none}
.doc .hero a.kro-new::before{display:none}   /* it links to the changelog, but the star is its mark, not the list icon */
.kn-star{position:relative; flex:none; width:96px; height:96px; transform:rotate(-8deg); transition:transform .25s ease;
  animation:knstamp .55s cubic-bezier(.2, .9, .3, 1.3) .35s backwards}
.kn-star svg{display:block; width:100%; height:100%}
.kn-burst{fill:var(--accent)}
.kn-ring{fill:none; stroke:var(--on-100); stroke-opacity:.5; stroke-width:1.3}
.kn-star b{position:absolute; inset:0; display:grid; place-items:center; font:700 23px/1 "Chakra Petch", sans-serif; letter-spacing:.02em; color:var(--on-100)}
.kn-line{font:600 15.5px/1.35 "Chakra Petch", sans-serif; text-wrap:balance; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1px; text-underline-offset:4px}
.kro-new:hover .kn-line{text-decoration-thickness:2px}
.kro-new:hover .kn-star{transform:rotate(0deg) scale(1.04)}
@keyframes knstamp{from{opacity:0; transform:rotate(-36deg) scale(1.5)} 70%{opacity:1; transform:rotate(-5deg) scale(.95)}}
@container (max-width: 760px){
  .hero.has-new .hero-row{display:block}
  .kro-new{flex-direction:row; gap:14px; margin:22px 0 0; padding:0; text-align:left}
  .kn-star{width:62px; height:62px}
  .kn-star b{font-size:15.5px}
}
.dlbox{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; background:var(--canvas); border:1px solid var(--rule); border-radius:2px; padding:20px 22px; margin:0 0 14px}
.alt{font-size:14px; color:var(--ink-2)} .alt a{margin:0 2px}
.feats{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 18px; margin:0 0 8px}
.feat{background:var(--canvas); border:1px solid var(--rule); border-radius:2px; padding:12px 14px}
.feat b{display:block; font-family:"Chakra Petch", sans-serif; font-weight:600; font-size:16px; margin:0 0 4px}
.feat span{font-size:14.5px; color:var(--ink-2)}
.steps{display:grid; gap:12px; margin:0 0 6px}
.step{display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start}
.step .step-badge{width:40px; height:40px}
.step h3{margin:6px 0 4px}
.step p{margin:0 0 6px; font-size:15px} .step p:last-child{margin:0}
.pill{display:inline-block; font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:1px; border:1px solid var(--rule); color:var(--ink-2)}
.pill.ok{border-color:var(--ok); color:var(--ok)}
/* a block changed since the guide's last release (2026-10-30): a green line in the margin and a dated label above
   it, so the text itself is untouched; a troubleshooting row (a grid row) takes the line as an inset shadow */
.chg{border-left:3px solid var(--ok); margin:0 0 0 -20px; padding:0 0 0 17px}
.chg-lbl{display:block; font-size:13px; line-height:1.4; color:var(--ink-2); margin:0 0 4px}
.chg-lbl b{color:var(--ok); font-weight:600}
.trouble-item.chg{border-left:0; margin:0; padding:0; box-shadow:inset 3px 0 0 var(--ok)}
.cat{display:grid; gap:12px; margin:0 0 6px}
.card{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; background:var(--canvas); border:1px solid var(--rule); border-radius:2px; padding:16px 18px}
.card:hover{border-color:var(--ink-2)}
.card .name{font-family:"Chakra Petch", sans-serif; font-weight:600; font-size:19px; color:var(--ink); text-decoration:none}
.card .name:hover{color:var(--accent-ink)}
.card .by{font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--ink-2); white-space:nowrap; padding-top:5px}
.card p{grid-column:1 / -1; margin:2px 0 8px; font-size:15px; color:var(--ink-2)}
.need{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-family:"IBM Plex Mono", monospace; font-size:11.5px; color:var(--ink-2)}
.need .k{letter-spacing:.08em; text-transform:uppercase; margin-right:4px}
.chip{border:1px solid var(--rule); padding:2px 7px; border-radius:1px; color:var(--ink)}
.chip.srv{border-color:var(--info); color:var(--info)}
.chip.dl{border-color:var(--ok); color:var(--ok)}
.card .links{grid-column:1 / -1; margin-top:8px; font-size:14px; display:flex; flex-wrap:wrap; gap:6px 18px}
.dlt td:first-child{font-family:"IBM Plex Mono", monospace; font-size:13px; white-space:nowrap}
.dlt td:last-child{font-family:"IBM Plex Mono", monospace; font-size:12.5px; color:var(--ink-2); white-space:nowrap; text-align:right}
.about{font-size:15px; color:var(--ink-2)} .about b{color:var(--ink)}
.go{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; background:var(--canvas); border:1px solid var(--rule); border-left:4px solid var(--accent); border-radius:2px; padding:14px 18px; margin-top:16px}
.go p{margin:0; font-size:15px; color:var(--ink-2)} .go b{color:var(--ink)}

/* ---------- FAQ ---------- */
.fq-key{display:flex; gap:10px; align-items:center; margin:0 0 8px; font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.fq-stage{color:var(--accent-ink); border:1px solid var(--accent-ink); padding:2px 7px; border-radius:1px}
.fq-where{color:var(--ink-2)}
.fq-map{display:grid; gap:6px; margin:0 0 14px; max-width:72ch}
.fq-map .r{display:flex; justify-content:space-between; gap:14px; background:var(--canvas); border:1px solid var(--rule); border-radius:2px; padding:8px 12px; font-family:"IBM Plex Mono", monospace; font-size:12.5px}
.fq-map .to{color:var(--warn); letter-spacing:.08em; white-space:nowrap}
.fq-get{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; background:var(--canvas); border:1px solid var(--rule); border-radius:2px; padding:10px 14px; margin:0 0 8px; max-width:72ch; text-decoration:none; color:var(--ink)}
.fq-get:hover{border-color:var(--accent)}
.fq-get .m{font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.1em; color:var(--warn)}
.fq-get .t{font-size:14.5px; min-width:0} .fq-get .t span{display:block; font-family:"IBM Plex Mono", monospace; font-size:11.5px; color:var(--ink-2); overflow-wrap:anywhere}
.fq-get .go2{font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--accent-ink); white-space:nowrap}
.bisect{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:0 0 14px}
.bisect .b{background:var(--canvas); border:1px solid var(--rule); border-radius:2px; padding:12px 14px}
.bisect .s{display:block; font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.1em; color:var(--accent-ink); margin:0 0 4px}
.bisect .t{display:block; font-family:"Chakra Petch", sans-serif; font-weight:600; font-size:15px; margin:0 0 6px}
.bisect .w{display:block; font-size:13.5px; color:var(--ink-2)}

/* ---------- the border diet: the paper panel separates, the pieces inside sit as tonal blocks ---------- */
.doc{border:0}
.feat, .overview-cell, .dlbox, .fq-map .r, .bisect .b, .checklist-card, .file-tree, .callout{border:0}
.callout{border-left:4px solid var(--rule)}
.card{border-color:var(--rule-2)} .card:hover{border-color:var(--rule)}
.go{border:0; border-left:4px solid var(--accent)}
.fq-get{border-color:var(--rule-2)}
.slides{border:0} .slides .ctl{border-top:0}
.trouble-grid{border:0}
.step-badge{box-shadow:none !important}

/* ---------- imported guides keep their own stylesheet, scoped ---------- */
.doc.gxdoc{padding:0; background:transparent; border:0; box-shadow:none; max-width:none}
.gx{min-width:0; overflow-x:auto; border:1px solid var(--rule); border-radius:2px}
.gx .theme{display:none !important}

/* ---------- footer: the app's own sign-off line ---------- */
.foot{border-top:1px solid var(--rule); padding:22px 0 34px; background:var(--canvas)}
.foot .in{max-width:1180px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap}
.footer-brand{display:flex; align-items:center; gap:9px; color:var(--ink-2)}
.footer-brand svg{width:16px; height:16px}
.footer-brand-lg{font-family:"Chakra Petch", sans-serif; font-weight:600; font-size:12px; letter-spacing:.22em}
.footer-copy{margin:0; font-family:"IBM Plex Mono", monospace; font-size:11.5px; letter-spacing:.04em; color:var(--ink-2)}
.foot-links{font-family:"IBM Plex Mono", monospace; font-size:11.5px; letter-spacing:.04em; color:var(--ink-2)}
.foot-links a{color:inherit} .foot-links a:hover{color:var(--accent-ink)}
.foot-legal{max-width:1180px; margin:16px auto 0; padding:14px 24px 0; border-top:1px solid var(--rule); font-size:11.5px; line-height:1.7; color:var(--ink-2)}
.heart{color:#F472B6; display:inline-block; animation:heartbeat 2s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)} 14%{transform:scale(1.15)} 28%{transform:scale(1)} 42%{transform:scale(1.15)}}
@media (prefers-reduced-motion: reduce){ .heart{animation:none} }

@media (max-width: 900px){
  .guide{grid-template-columns:1fr; gap:24px}
  .rail{position:static; max-height:none}
  .toc{flex-direction:row; flex-wrap:wrap; gap:6px} .toc a{padding:6px 10px 6px 8px; border:1px solid var(--rule)} .toc .grp{width:100%}
  .rail .blk.opt{display:none}
  .doc{padding:20px 18px}
  .chg{margin-left:-14px; padding-left:11px}
  .overview-grid, .feats, .bisect{grid-template-columns:1fr}
  .top .in{gap:12px} .nav-links{gap:.4rem} .nav-btn{padding:.45rem .7rem} .pal-lbl{display:none}
  h1{font-size:32px} h2{font-size:26px}
  .card, .go{grid-template-columns:1fr} .card .by{padding-top:0}
  .pop{right:12px; left:12px; width:auto}
}
@media (max-width: 640px){
  /* phones: the nav buttons take their own rows under the brand, sized to fit, so no page scrolls
     sideways (found 2026-10-09: the nav ran to 772 px on a 390 px screen, every page). Six buttons since
     Docs (2026-10-31) wrapped five-and-one, Download alone; a 3-column grid makes two even rows. */
  .top{height:auto}
  .top .in{flex-wrap:wrap; row-gap:8px; padding:8px 16px}
  .site-nav{order:3; width:100%; margin:0}
  .nav-links{order:3; width:100%; margin:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px}
  .nav-btn{display:block; text-align:center; padding:.42rem .3rem; letter-spacing:.06em; font-size:10.5px}
  .section{scroll-margin-top:120px}
  /* a card's byline never wrapped, so the WARP0716 cards sized themselves to it (553 px on a 390 px screen) */
  .cat{grid-template-columns:minmax(0,1fr)} .card .by{white-space:normal}
}

.slides{margin:26px 0 0; border:1px solid var(--rule); border-radius:2px; background:#10141A; overflow:hidden}
.slides .track{display:grid; aspect-ratio:1100 / 615}
.slides .slide{grid-area:1/1; margin:0; opacity:0; transition:opacity .45s; pointer-events:none; min-width:0}
.slides .slide.on{opacity:1; pointer-events:auto}
.slides img{display:block; width:100%; height:100%; object-fit:cover}
.slides .ctl{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:8px 10px; background:var(--paper); border-top:1px solid var(--rule)}
.slides .cap{display:flex; gap:10px; align-items:baseline; min-width:0; font-size:13.5px; color:var(--ink-2)}
.slides .cap b{font-family:"Chakra Petch", sans-serif; font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap}
.slides .cap span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sbtn{font:600 14px/1 "Chakra Petch", sans-serif; color:var(--ink); background:transparent; border:1px solid var(--rule); border-radius:2px; padding:7px 12px; cursor:pointer}
.sbtn:hover{border-color:var(--accent); color:var(--accent-ink)}
.dots{display:flex; gap:8px}
.dots button{width:12px; height:12px; border-radius:1px; border:1px solid var(--rule); background:transparent; padding:0; cursor:pointer}
.dots button[aria-selected="true"]{background:var(--accent); border-color:var(--accent)}

.toc button.fbtn{display:grid; grid-template-columns:12px 1fr auto; gap:10px; align-items:center; width:100%; padding:6px 8px 6px 6px; border:0; border-radius:2px; background:transparent; color:var(--ink-2); font:inherit; font-size:14px; line-height:1.3; text-align:left; cursor:pointer}
.toc button.fbtn i.ico{width:14px; height:14px; margin:0 -1px; display:inline-flex; align-items:center; justify-content:center; color:var(--accent-ink, var(--accent)); font-style:normal}
.toc button.fbtn i.ico svg{width:14px; height:14px; display:block; fill:currentColor} .toc button.fbtn i.ico svg.ln{fill:none; stroke:currentColor}
.toc button.fbtn small{font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.toc button.fbtn:hover{color:var(--ink); background:var(--rule-2)} .toc button.fbtn:hover i.ico{color:var(--accent)}
.toc button.fbtn[aria-pressed="true"]{color:var(--ink); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--rule)}
.toc button.fbtn[aria-pressed="true"] small{color:var(--ink)}
.section[hidden]{display:none}
.toc a[hidden]{display:none}
.section h2 small.rel{font-family:"IBM Plex Mono", monospace; font-size:13px; font-weight:400; color:var(--ink-2); margin-left:10px; font-variant-numeric:tabular-nums; white-space:nowrap}
.section.beta h2{flex-wrap:wrap; row-gap:8px}
.cls{display:grid; gap:0}
.cl{display:grid; grid-template-columns:110px minmax(0,1fr); gap:18px; padding:20px 0; border-top:1px solid var(--rule)}
.section .cls .cl:first-child{border-top:0; padding-top:4px}
.cl[hidden]{display:none}
.cl-date{font-family:"IBM Plex Mono", monospace; font-size:12.5px; color:var(--ink-2); padding-top:4px; font-variant-numeric:tabular-nums}
.cl-body{min-width:0}
.cl-body h3{margin:6px 0 8px; font-size:20px}
.cl-body h4{margin:16px 0 6px; font-size:15px; font-family:"IBM Plex Sans", sans-serif; font-weight:600}
.cl-body p, .cl-body li{font-size:15px; color:var(--ink-2)}
.cl-body p{margin:0 0 10px; max-width:70ch}
.cl-body ul{margin:0 0 10px; padding-left:20px} .cl-body li{margin:0 0 4px}
.cl-body blockquote p{margin:0 0 8px} .cl-body blockquote p:last-child{margin:0}
.cl-body blockquote{margin:0 0 10px; padding:8px 12px; border-left:3px solid var(--warn); background:var(--canvas); font-size:14.5px; color:var(--ink-2); max-width:70ch}
.cl-body strong, .cl-body b{color:var(--ink)}
.cl-body p, .cl-body li{overflow-wrap:break-word}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 2px}
.chips .chip{font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px}
.chip.prod.warpgate{border-color:var(--accent); color:var(--accent-ink)}
/* the BETA channel's release: amber like the app's BETA chip, never the accent (the colour wheel moves
   the accent); the one bold mark is a hatched test track down the side of its entries */
.section.beta h2 .hico{color:var(--warn)}
.section.beta h2 .chip.beta{font:500 11px/1 "IBM Plex Mono", monospace; letter-spacing:.09em; text-transform:uppercase; padding:5px 7px 4px; border-color:var(--warn); color:var(--warn); align-self:center}
.beta-how{margin:-4px 0 20px; padding:10px 14px; border:1px solid var(--rule); border-color:color-mix(in srgb, var(--warn) 45%, var(--rule)); background:color-mix(in srgb, var(--warn) 7%, transparent); font-size:14.5px; color:var(--ink-2); max-width:70ch}
.beta-how b{color:var(--ink)}
.section.beta .cls{position:relative; padding-left:22px}
.section.beta .cls::before{content:""; position:absolute; left:0; top:4px; bottom:8px; width:4px; background:repeating-linear-gradient(-45deg, var(--warn) 0 5px, transparent 5px 10px)}
.toc a.toc-beta{grid-template-columns:12px 1fr auto}
.toc a.toc-beta i.ico, .toc button.fbtn[data-f="beta"] i.ico{color:var(--warn)}
.toc a.toc-beta b{font:500 9px/1 "IBM Plex Mono", monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 55%, var(--rule)); border-radius:1px; padding:3px 4px; white-space:nowrap}
.chip.prod.warp0716{border-color:var(--ok); color:var(--ok)}
@media (max-width: 900px){ .cl{grid-template-columns:1fr; gap:4px} }
.doc a[href^="https://github.com/"]::before, .foot a[href^="https://github.com/"]::before{content:""; display:inline-block; width:.95em; height:.95em; margin:0 .32em 0 0; vertical-align:-.13em; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%200C3.58%200%200%203.58%200%208c0%203.54%202.29%206.53%205.47%207.59.4.07.55-.17.55-.38%200-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01%201.08.58%201.23.82.72%201.21%201.87.87%202.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95%200-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12%200%200%20.67-.21%202.2.82.64-.18%201.32-.27%202-.27.68%200%201.36.09%202%20.27%201.53-1.04%202.2-.82%202.2-.82.44%201.1.16%201.92.08%202.12.51.56.82%201.27.82%202.15%200%203.07-1.87%203.75-3.65%203.95.29.25.54.73.54%201.48%200%201.07-.01%201.93-.01%202.2%200%20.21.15.46.55.38A8.013%208.013%200%200%200%2016%208c0-4.42-3.58-8-8-8z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%200C3.58%200%200%203.58%200%208c0%203.54%202.29%206.53%205.47%207.59.4.07.55-.17.55-.38%200-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01%201.08.58%201.23.82.72%201.21%201.87.87%202.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95%200-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12%200%200%20.67-.21%202.2.82.64-.18%201.32-.27%202-.27.68%200%201.36.09%202%20.27%201.53-1.04%202.2-.82%202.2-.82.44%201.1.16%201.92.08%202.12.51.56.82%201.27.82%202.15%200%203.07-1.87%203.75-3.65%203.95.29.25.54.73.54%201.48%200%201.07-.01%201.93-.01%202.2%200%20.21.15.46.55.38A8.013%208.013%200%200%200%2016%208c0-4.42-3.58-8-8-8z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}.doc a[href^="https://github.com/CrazyBebop/WARP0716/issues"]::before, .foot a[href^="https://github.com/CrazyBebop/WARP0716/issues"]::before{content:""; display:inline-block; width:.95em; height:.95em; margin:0 .32em 0 0; vertical-align:-.13em; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%209.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203z%22%2F%3E%3Cpath%20d%3D%22M8%200a8%208%200%201%201%200%2016A8%208%200%200%201%208%200zM1.5%208a6.5%206.5%200%201%200%2013%200%206.5%206.5%200%200%200-13%200z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%209.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203z%22%2F%3E%3Cpath%20d%3D%22M8%200a8%208%200%201%201%200%2016A8%208%200%200%201%208%200zM1.5%208a6.5%206.5%200%201%200%2013%200%206.5%206.5%200%200%200-13%200z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}.doc a[href^="https://discord.gg/"]::before, .foot a[href^="https://discord.gg/"]::before{content:""; display:inline-block; width:.95em; height:.95em; margin:0 .32em 0 0; vertical-align:-.13em; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20.317%204.37a19.791%2019.791%200%200%200-4.885-1.515.074.074%200%200%200-.079.037c-.21.375-.444.865-.608%201.25a18.27%2018.27%200%200%200-5.487%200%2012.64%2012.64%200%200%200-.617-1.25.077.077%200%200%200-.079-.037A19.736%2019.736%200%200%200%203.677%204.37a.07.07%200%200%200-.032.027C.533%209.046-.32%2013.58.099%2018.058a.082.082%200%200%200%20.031.056%2019.9%2019.9%200%200%200%205.993%203.03.078.078%200%200%200%20.084-.028c.462-.63.874-1.295%201.226-1.994a.076.076%200%200%200-.041-.106%2013.107%2013.107%200%200%201-1.872-.892.077.077%200%200%201-.008-.128c.126-.094.252-.192.372-.291a.074.074%200%200%201%20.077-.01c3.928%201.793%208.18%201.793%2012.062%200a.074.074%200%200%201%20.078.01c.12.098.246.198.373.292a.077.077%200%200%201-.006.127%2012.299%2012.299%200%200%201-1.873.892.077.077%200%200%200-.041.107c.36.698.772%201.362%201.225%201.993a.076.076%200%200%200%20.084.028%2019.839%2019.839%200%200%200%206.002-3.03.077.077%200%200%200%20.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061%200%200%200-.031-.03zM8.02%2015.33c-1.183%200-2.157-1.085-2.157-2.419%200-1.333.956-2.419%202.157-2.419%201.21%200%202.176%201.096%202.157%202.42%200%201.333-.956%202.418-2.157%202.418zm7.975%200c-1.183%200-2.157-1.085-2.157-2.419%200-1.333.955-2.419%202.157-2.419%201.21%200%202.176%201.096%202.157%202.42%200%201.333-.946%202.418-2.157%202.418z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20.317%204.37a19.791%2019.791%200%200%200-4.885-1.515.074.074%200%200%200-.079.037c-.21.375-.444.865-.608%201.25a18.27%2018.27%200%200%200-5.487%200%2012.64%2012.64%200%200%200-.617-1.25.077.077%200%200%200-.079-.037A19.736%2019.736%200%200%200%203.677%204.37a.07.07%200%200%200-.032.027C.533%209.046-.32%2013.58.099%2018.058a.082.082%200%200%200%20.031.056%2019.9%2019.9%200%200%200%205.993%203.03.078.078%200%200%200%20.084-.028c.462-.63.874-1.295%201.226-1.994a.076.076%200%200%200-.041-.106%2013.107%2013.107%200%200%201-1.872-.892.077.077%200%200%201-.008-.128c.126-.094.252-.192.372-.291a.074.074%200%200%201%20.077-.01c3.928%201.793%208.18%201.793%2012.062%200a.074.074%200%200%201%20.078.01c.12.098.246.198.373.292a.077.077%200%200%201-.006.127%2012.299%2012.299%200%200%201-1.873.892.077.077%200%200%200-.041.107c.36.698.772%201.362%201.225%201.993a.076.076%200%200%200%20.084.028%2019.839%2019.839%200%200%200%206.002-3.03.077.077%200%200%200%20.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061%200%200%200-.031-.03zM8.02%2015.33c-1.183%200-2.157-1.085-2.157-2.419%200-1.333.956-2.419%202.157-2.419%201.21%200%202.176%201.096%202.157%202.42%200%201.333-.956%202.418-2.157%202.418zm7.975%200c-1.183%200-2.157-1.085-2.157-2.419%200-1.333.955-2.419%202.157-2.419%201.21%200%202.176%201.096%202.157%202.42%200%201.333-.946%202.418-2.157%202.418z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}.doc a[href^="/faq"]::before, .doc a[data-open="faq"]::before, .foot a[href^="/faq"]::before, .foot a[data-open="faq"]::before{content:""; display:inline-block; width:.95em; height:.95em; margin:0 .32em 0 0; vertical-align:-.13em; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20class%3D%22ln%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.2%209.3a2.9%202.9%200%20015.6%201c0%201.9-2.8%202.2-2.8%204M12%2017.5h.01%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20class%3D%22ln%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.2%209.3a2.9%202.9%200%20015.6%201c0%201.9-2.8%202.2-2.8%204M12%2017.5h.01%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}.doc a[href^="/changelog"]::before, .doc a[data-open="changelog"]::before, .foot a[href^="/changelog"]::before, .foot a[data-open="changelog"]::before{content:""; display:inline-block; width:.95em; height:.95em; margin:0 .32em 0 0; vertical-align:-.13em; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20class%3D%22ln%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%206h12M9%2012h12M9%2018h12M3.5%206h.01M3.5%2012h.01M3.5%2018h.01%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20class%3D%22ln%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%206h12M9%2012h12M9%2018h12M3.5%206h.01M3.5%2012h.01M3.5%2018h.01%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}.doc a.rg::before, .foot a.rg::before{content:""; display:inline-block; width:.95em; height:.95em; margin:0 .32em 0 0; vertical-align:-.13em; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20class%3D%22ln%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%203h6a4%204%200%200%201%204%204v14a3%203%200%200%200-3-3H2zM22%203h-6a4%204%200%200%200-4%204v14a3%203%200%200%201%203-3h7z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20class%3D%22ln%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%203h6a4%204%200%200%201%204%204v14a3%203%200%200%200-3-3H2zM22%203h-6a4%204%200%200%200-4%204v14a3%203%200%200%201%203-3h7z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}.doc a code{overflow-wrap:anywhere}
@media (max-width: 640px){
  /* the header: the nav in two rows of 48 px buttons. At that height a sticky header would hold a fifth of the
     screen, so on a phone it scrolls away with the page */
  .top{position:static}
  .lgn-bar .in{height:auto; padding:6px 16px}
  .lgn-back{min-height:48px; padding:0 12px; font-size:14px; letter-spacing:.02em}
  .section, .section h3{scroll-margin-top:16px}
  .nav-brand, .pal{min-height:48px}
  .pal{padding:0 6px}
  .nav-links{gap:8px}
  .nav-btn{display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 4px; font-size:14px; letter-spacing:.02em}
  /* the rail: off the screen's edge, its rows as 48 px chips 8 px apart */
  .rail{padding:0 16px}
  .rail .lbl, .toc .grp{font-size:14px}
  .toc{gap:8px}
  .toc a{min-height:48px; grid-template-columns:auto minmax(0,1fr); padding:6px 12px 6px 10px}
  .toc .toc-soon, .toc a.toc-beta{min-height:48px; grid-template-columns:auto minmax(0,1fr) auto}
  .toc .toc-soon b, .toc a.toc-beta b{font-size:14px; padding:4px 6px}
  .toc a i.ico.num{width:22px; height:22px; margin:0; font-size:14px}
  .toc button.fbtn{min-height:48px; grid-template-columns:auto minmax(0,1fr) auto}
  .toc button.fbtn small{font-size:14px}
  /* body text */
  table, .feat span, .overview-cell-value, .trouble-cell, .alt, .checklist li, .callout, .card p, .step p, .about, .go p,
  .bisect .w, .fq-get .t, .cl-body p, .cl-body li, .cl-body h4, .cl-body blockquote, .beta-how{font-size:16px}
  /* small print */
  th, pre, .doc .hero-label, .doc .meta, .dx-crumb, .cta .fact, .dlbox .fact, .card .by, .card .soon, .need, .pill, .chip,
  .fq-key, .fq-map .r, .fq-get .m, .fq-get .go2, .fq-get .t span, .bisect .s, .overview-cell-label, .trouble-head div,
  .code-label, .file-tree, .checklist-progress-label, .checklist-reset, .chg-lbl, .doc figcaption, .slides .cap span,
  .chips .chip, .cl-date, .section h2 small.rel, .section.beta h2 .chip.beta, .footer-copy, .foot-links, .foot-legal{font-size:14px}
  code{font-size:max(.92em, 14px)}
  pre code{font-size:inherit}
  /* a long path in a code label wrapped nowhere and pushed the Hair Colours guide to 408 px on a 390 px phone */
  .code-label{max-width:100%; overflow-wrap:anywhere}
  /* tap targets */
  .btn{display:inline-flex; align-items:center; min-height:48px}
  .card .name{display:flex; align-items:center; min-height:48px}
  .card .links{gap:8px 18px}
  .card .links a, .doc .meta a, .dx-crumb a{display:inline-flex; align-items:center; min-height:48px}
  /* a feature card whose whole heading is a link (Custom Hairstyles' two paths): no sentence around it */
  .feat b a{display:inline-flex; align-items:center; min-height:48px}
  .fact .wgbeta{display:inline-block; line-height:48px}
  .dx-crumb a{min-width:48px; justify-content:center}
  .dx-crumb{gap:8px 9px; align-items:center}
  .checklist li{min-height:48px; align-items:center; padding:8px 4px}
  .checklist li + li{margin-top:8px}
  .checklist input{margin:0}
  .checklist-reset{min-height:48px; padding:0 14px}
  .foot-links{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
  .foot-links a{display:inline-flex; align-items:center; min-height:48px}
  .themes button, .pre, .pop .exact{min-height:48px}
  .pop .lbl, .pre, .pre small, .wheelbox .hex, .themes button, .pop .exact{font-size:14px}
  .themes{gap:8px}
  .pop input[type="color"]{width:48px; height:48px}
  /* the slideshow: the caption on its own row, 48 px arrows; the dots show where you are and the arrows move */
  .slides .ctl{grid-template-columns:48px minmax(0,1fr) 48px; grid-template-areas:"cap cap cap" "prev dots next"; gap:8px}
  .slides .cap{grid-area:cap}
  .slides .prev{grid-area:prev} .slides .next{grid-area:next}
  .slides .dots{grid-area:dots; justify-content:center; align-items:center; pointer-events:none}
  .sbtn{width:48px; height:48px; padding:0; font-size:16px}
  /* the guides' demos (their styles come later in the page) */
  :root .hsdemo .hs-title, :root .hsdemo .hs-state, :root .hsdemo .hs-cell, :root .hsdemo .hs-cell.hs-pager, :root .hsdemo .hs-cell-n,
  :root .hsdemo .hs-gen-row label, :root .hsdemo .hs-gen-btn, :root .hsdemo .hs-gen-cell span, :root .hsdemo .hs-gen-cell .hs-gen-flag,
  :root .hsdemo .hs-gen-hint, :root .hsdemo .hs-gen-err, :root .hsdemo .hs-gen-tally, :root .cbdemo .cbdemo-label,
  :root .cbdemo .cbdemo-toggle, :root .cbdemo .cbdemo-out, :root .spdemo-cap, :root .spdemo-dim, :root .spdemo-title{font-size:14px}
  :root .hsdemo .hs-note, :root .hsdemo .hs-gen-note, :root .hsdemo .hs-gen-drop p{font-size:16px}
  :root .hsdemo .hs-gen-row{gap:8px 14px}
  :root .hsdemo .hs-gen-row label{display:inline-flex; align-items:center; min-height:48px}
  :root .hsdemo .hs-gen-row input[type=number]{font-size:16px; min-height:48px}
  :root .hsdemo .hs-gen-row input[type=checkbox]{width:48px; height:48px}
  :root .hsdemo .hs-gen-btn, :root .cbdemo .cbdemo-toggle{min-height:48px}
}