:root {
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --body: var(--sans);
  color-scheme: light;
  --bg: #faf9f6;
  --bg-side: #f3f1ec;
  --bg-raise: #ffffff;
  --fg: #1f1d1a;
  --fg-2: #5c574f;
  --fg-3: #736c61;
  --rule: #e6e2da;
  --rule-2: #d8d3c9;
  --accent-l: #8c0f26;
  --accent-d: #f04a63;
  --wash: 10%;
  --wash-on: var(--bg);
  --deepen: 0%;   
  --lift: 0%;     
  --kw: 85%;   
  --brand: var(--accent-l);   
  --mascot: #d9203b;
  --mascot-nub: var(--brand);
  --heart: #f0607e;
  --mascot-peek: .22;   
  --mascot-shine: #fff;   
  --code-bg: #f3f1ec;
  --mark: #fde68a;
  --add: #dcfce7; --add-fg: #166534;
  --del: #fee2e2; --del-fg: #991b1b;
  --shadow: 0 10px 40px rgba(30, 25, 15, .16), 0 1px 2px rgba(30, 25, 15, .08);
  --scrim: rgba(20, 16, 10, .28);   
  --ok: #177a3a;
  --warn: #9a4505;
  --danger: #b3261e;
  --info: #1e5fd0;
  --important: #7c3aed;
  --s-comment: #736c61;
  --s-string: #3b6d11;
  --s-number: #0b6e99;
  --s-function: #6a3fb5;
  --s-type: #0e7490;
  --s-variable: #1f1d1a;
  --s-punct: #6b665e;
  --s-attr: #6a3fb5;
  --t0: #1f1d1a; --t1: #b3261e; --t2: #3b6d11; --t3: #8a5a06; --t4: #1d4ed8; --t5: #7e22ce; --t6: #0e7490; --t7: #6f6a61;
  --t8: #5c574f; --t9: #c81e1e; --t10: #3f6f0a; --t11: #8a5a06; --t12: #2563eb; --t13: #9333ea; --t14: #0b6e8a; --t15: #d8d3c9;
  --side-w: 264px;
  --rail-w: 232px;
  --head-h: 52px;   
  --measure: 70ch;
  --fs-micro: 11px; --fs-small: 12px; --fs-ui: 13px; --fs-body-s: 14px;
  --fs-h3: 20px; --fs-h2: 26px; --fs-h1: 34px; --fs-read: 17px;
  --row-h: 28px; --sub-row-h: 24px;   
  --fw-row: 450;   
  --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 10px; --sp-6: 12px;
  --sp-7: 16px; --sp-8: 20px; --sp-9: 24px; --sp-10: 32px; --sp-11: 48px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-pill: 999px;
  --z-sticky: 10; --z-rail: 20; --z-dialog: 30; --z-pop: 40; --z-toast: 60; --z-tip: 65; --z-over: 70;
  --dur-instant: 80ms; --dur-quick: 140ms; --dur-move: 220ms; --dur-moment: 700ms;
  --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in: cubic-bezier(.4,0,1,1); --ease-spring: cubic-bezier(.3,1.6,.5,1);
  --t: var(--dur-quick) var(--ease-out);
  --undo-ms: 6000ms;   
  --shadow-1: 0 1px 3px rgba(30, 25, 15, .1);
  --shadow-3: 0 18px 60px rgba(30, 25, 15, .22), 0 2px 6px rgba(30, 25, 15, .1);
}
@media (prefers-contrast: more) {
  [data-theme="paper"] { --fg-2: #3f3b35; --fg-3: #5a554d; --rule: #cfc9be; --rule-2: #b9b2a5; --s-comment: #5a554d; }
}
[data-theme="ink"] {
  color-scheme: dark;
  --bg: #15181f;
  --bg-side: #111419;
  --bg-raise: #1c2029;
  --fg: rgba(255,255,255,.87);
  --fg-2: rgba(255,255,255,.62);
  --fg-3: rgba(255,255,255,.47);
  --rule: rgba(255,255,255,.08);
  --rule-2: rgba(255,255,255,.14);
  --wash: 13%;   
  --wash-on: transparent;
  --kw: 100%;
  --mascot-peek: .16;
  --code-bg: #1b1f28;
  --mark: rgba(253,230,138,.35);
  --add: rgba(74,222,128,.14); --add-fg: #86efac;
  --del: rgba(248,113,113,.14); --del-fg: #fca5a5;
  --shadow: 0 10px 40px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-1: 0 1px 3px rgba(0,0,0,.4);
  --shadow-3: 0 18px 60px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --scrim: rgba(0, 0, 0, .5);
  --ok: #5bd984;
  --warn: #e6a23c;
  --danger: #f87171;
  --info: #7aa2f7;
  --important: #c084fc;
  --s-comment: rgba(255,255,255,.55);
  --s-string: #a3d977;
  --s-number: #7dd3fc;
  --s-function: #c4b5fd;
  --s-type: #67e8f9;
  --s-variable: rgba(255,255,255,.87);
  --s-punct: rgba(255,255,255,.62);
  --s-attr: #c4b5fd;
  --t0: #2a2f3a; --t1: #f87171; --t2: #86c46d; --t3: #e6b450; --t4: #7aa2f7; --t5: #c792ea; --t6: #5ccfe6; --t7: #c8ccd4;
  --t8: #8b93a3; --t9: #ff8b8b; --t10: #a6e3a1; --t11: #f9e2af; --t12: #89b4fa; --t13: #f5c2e7; --t14: #94e2d5; --t15: #ffffff;
}
:root[data-accent="crimson"] { --accent-l: #b91c1c; --accent-d: #f87171; --mascot: #ff5c8a; }
:root[data-accent="rose"]    { --accent-l: #be185d; --accent-d: #f472b6; --mascot: #ff7ad9; }
:root[data-accent="violet"]  { --accent-l: #7c3aed; --accent-d: #a78bfa; --mascot: #c69cff; }
:root[data-accent="blue"]    { --accent-l: #1d4ed8; --accent-d: #60a5fa; --mascot: #7ab8ff; }
:root[data-accent="teal"]    { --accent-l: #0f766e; --accent-d: #2dd4bf; --mascot: #5ef2d6; }
:root[data-accent="green"]   { --accent-l: #137639; --accent-d: #4ade80; --mascot: #7dff9e; }
:root[data-accent="graphite"] { --accent-l: #57534e; --accent-d: #d6d3d1; --mascot: #dcd7d0; }
:root, [data-theme] {
  --accent: light-dark(color-mix(in srgb, var(--accent-l), #000 var(--deepen)), color-mix(in srgb, var(--accent-d), #fff var(--lift)));
  --accent-bg: color-mix(in srgb, var(--accent) var(--wash), var(--wash-on));
  --on-accent: var(--bg);
  --focus: var(--accent);   
  --led-glow: 0 0 6px color-mix(in srgb, var(--ok) 60%, transparent);   
  --mascot-ink: color-mix(in srgb, var(--brand) 40%, #000);
  --s-keyword: color-mix(in srgb, var(--accent) var(--kw), #000);
  --s-tag: var(--s-keyword);
}

[data-theme="parchment"] {
  color-scheme: light;
  --bg: #f3e9d2;
  --bg-side: #ebdfc2;
  --bg-raise: #faf3e2;
  --fg: #3b2f1e;
  --fg-2: #5a4a36;
  --fg-3: #6f5f4b;
  --rule: #dccfb3;
  --rule-2: #cbbc9c;
  --accent-l: #93301a;
  --deepen: 9%;  
  --code-bg: #ece1c8;
  --mark: #f2d27f;
  --add: #dcebc8; --add-fg: #2f5e1a;
  --del: #f2d0c2; --del-fg: #8b2a1f;
  --shadow: 0 10px 40px rgba(60, 40, 10, .18), 0 1px 2px rgba(60, 40, 10, .10);
  --shadow-1: 0 1px 3px rgba(60, 40, 10, 0.11);
  --shadow-3: 0 18px 60px rgba(60, 40, 10, 0.22), 0 2px 6px rgba(60, 40, 10, 0.11);
  --scrim: rgba(50, 34, 12, .3);
  --ok: #2f6b1f;
  --warn: #8a4a06;
  --danger: #a3281c;
  --info: #1f56a8;
  --important: #6b3fb0;
  --s-comment: #6f5f47;
  --s-string: #3f6a12;
  --s-number: #135f85;
  --s-function: #63409c;
  --s-type: #146a72;
  --s-variable: #3b2f1e;
  --s-punct: #6b5c48;
  --s-attr: #63409c;
  --t0: #3b2f1e; --t1: #a3281c; --t2: #3f6a12; --t3: #7a4e04; --t4: #1f56a8; --t5: #6b3fb0; --t6: #146a72; --t7: #6f604b;
  --t8: #5c4f3c; --t9: #b52a1c; --t10: #436b0f; --t11: #7a4e04; --t12: #2359ad; --t13: #6f45b5; --t14: #126a78; --t15: #cbbc9c;
}
[data-theme="contrast"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-side: #070707;
  --bg-raise: #0f0f0f;
  --fg: #ffffff;
  --fg-2: #d4d4d4;
  --fg-3: #b0b0b0;
  --rule: #4a4a4a;
  --rule-2: #6e6e6e;
  --accent-d: #f97e92;
  --lift: 4%;
  --wash: 22%;
  --wash-on: transparent;
  --kw: 100%;
  --mascot-peek: .16;
  --code-bg: #0c0c0c;
  --mark: rgba(255, 224, 138, .45);
  --add: rgba(95, 224, 143, .2); --add-fg: #b8f0a8;
  --del: rgba(255, 138, 138, .2); --del-fg: #ffa3a3;
  --shadow: 0 0 0 1px #6e6e6e;
  --shadow-1: var(--shadow); --shadow-3: var(--shadow);
  --scrim: rgba(0, 0, 0, .7);
  --ok: #5fe08f;
  --warn: #ffb454;
  --danger: #ff8a8a;
  --info: #8ec5ff;
  --important: #d3a8ff;
  --s-comment: #a8a8a8;
  --s-string: #b8e986;
  --s-number: #8fd3ff;
  --s-function: #d9b8ff;
  --s-type: #7ee8f0;
  --s-variable: #ffffff;
  --s-punct: #c8c8c8;
  --s-attr: #d9b8ff;
  --t0: #1a1a1a; --t1: #ff8a8a; --t2: #8ee07a; --t3: #ffc857; --t4: #8ec5ff; --t5: #d9a8ff; --t6: #7ee8f0; --t7: #e6e6e6;
  --t8: #a8a8a8; --t9: #ffa3a3; --t10: #b8f0a8; --t11: #ffe08a; --t12: #a8d4ff; --t13: #eabfff; --t14: #a8f0f4; --t15: #ffffff;
}
[data-theme="snow"] {
  color-scheme: light;
  --bg: #f8f9fb;
  --bg-side: #f1f3f6;
  --bg-raise: #ffffff;
  --fg: #181b21;
  --fg-2: #4a515e;
  --fg-3: #666e7c;
  --rule: #e1e4ea;
  --rule-2: #cfd4dc;
  --code-bg: #f1f3f6;
  --mark: #fde68a;
  --add: #dcfce7; --add-fg: #166534;
  --del: #fee2e2; --del-fg: #991b1b;
  --shadow: 0 10px 40px rgba(15, 20, 35, .14), 0 1px 2px rgba(15, 20, 35, .08);
  --shadow-1: 0 1px 3px rgba(15, 20, 35, 0.08);
  --shadow-3: 0 18px 60px rgba(15, 20, 35, 0.18), 0 2px 6px rgba(15, 20, 35, 0.08);
  --scrim: rgba(12, 16, 28, .28);
  --ok: #15753a;
  --warn: #94430a;
  --danger: #b0261f;
  --info: #1d5bc8;
  --important: #7033d6;
  --s-comment: #626a77;
  --s-string: #386a12;
  --s-number: #0a6893;
  --s-function: #6537b0;
  --s-type: #0d6d88;
  --s-variable: #181b21;
  --s-punct: #5f6674;
  --s-attr: #6537b0;
  --t0: #181b21; --t1: #b0261f; --t2: #386a12; --t3: #855605; --t4: #1d4ed8; --t5: #7a22c4; --t6: #0d6d88; --t7: #626a77;
  --t8: #4a515e; --t9: #c01d1d; --t10: #3b6a0a; --t11: #855605; --t12: #235bd8; --t13: #8a2fd9; --t14: #0a6886; --t15: #cfd4dc;
}
[data-theme="sage"] {
  color-scheme: light;
  --deepen: 3%;  
  --bg: #f2f5ef;
  --bg-side: #ebf0e7;
  --bg-raise: #fafcf8;
  --fg: #1c211b;
  --fg-2: #475045;
  --fg-3: #5f685c;
  --rule: #dce2d6;
  --rule-2: #c7cfbf;
  --code-bg: #ebf0e7;
  --mark: #f3e08a;
  --add: #d8efd2; --add-fg: #1f5c1a;
  --del: #f6dcd6; --del-fg: #8e2219;
  --shadow: 0 10px 40px rgba(20, 30, 15, .14), 0 1px 2px rgba(20, 30, 15, .08);
  --shadow-1: 0 1px 3px rgba(20, 30, 15, 0.08);
  --shadow-3: 0 18px 60px rgba(20, 30, 15, 0.18), 0 2px 6px rgba(20, 30, 15, 0.08);
  --scrim: rgba(16, 22, 12, .28);
  --ok: #14652f;
  --warn: #843c06;
  --danger: #9f221b;
  --info: #1a51b0;
  --important: #652fc0;
  --s-comment: #586155;
  --s-string: #335e0f;
  --s-number: #085c82;
  --s-function: #5b319e;
  --s-type: #0b5f77;
  --s-variable: #1c211b;
  --s-punct: #565f53;
  --s-attr: #5b319e;
  --t0: #1c211b; --t1: #9f221b; --t2: #335e0f; --t3: #744b04; --t4: #1b47c4; --t5: #6c1fae; --t6: #0b5f77; --t7: #586155;
  --t8: #475045; --t9: #ab1b1b; --t10: #355e09; --t11: #744b04; --t12: #1f50c0; --t13: #7a29c2; --t14: #085c77; --t15: #c7cfbf;
}
[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #0e1424;
  --bg-side: #0a0f1c;
  --bg-raise: #151d31;
  --fg: #e3e8f4;
  --fg-2: #a3adc2;
  --fg-3: #7f8aa2;
  --rule: #222c42;
  --rule-2: #2f3a54;
  --wash: 16%;
  --wash-on: transparent;
  --kw: 100%;
  --mascot-peek: .16;
  --code-bg: #131a2c;
  --mark: rgba(253, 230, 138, .32);
  --add: rgba(74, 222, 128, .14); --add-fg: #86efac;
  --del: rgba(248, 113, 113, .14); --del-fg: #fca5a5;
  --shadow: 0 10px 40px rgba(0, 4, 16, .55), 0 1px 2px rgba(0, 4, 16, .4);
  --shadow-1: 0 1px 3px rgba(0, 4, 16, 0.33);
  --shadow-3: 0 18px 60px rgba(0, 4, 16, 0.65), 0 2px 6px rgba(0, 4, 16, 0.33);
  --scrim: rgba(2, 6, 18, .55);
  --ok: #5bd984;
  --warn: #eaa546;
  --danger: #f87c7c;
  --info: #82aaff;
  --important: #c792ea;
  --s-comment: #8993a8;
  --s-string: #a8dc7e;
  --s-number: #7fd4fb;
  --s-function: #c6b8fd;
  --s-type: #6fe3f5;
  --s-variable: #e3e8f4;
  --s-punct: #a3adc2;
  --s-attr: #c6b8fd;
  --t0: #232c42; --t1: #f87c7c; --t2: #8fcd72; --t3: #e8b85a; --t4: #82aaff; --t5: #c792ea; --t6: #63d0e6; --t7: #c8cedb;
  --t8: #8993a8; --t9: #ff9090; --t10: #a8e3a2; --t11: #f7dfa6; --t12: #93bafc; --t13: #f2c3e6; --t14: #98e1d6; --t15: #ffffff;
}
[data-theme="espresso"] {
  color-scheme: dark;
  --bg: #1b1512;
  --bg-side: #16110e;
  --bg-raise: #241d19;
  --fg: #efe6dc;
  --fg-2: #b8a898;
  --fg-3: #948472;
  --rule: #302722;
  --rule-2: #40352e;
  --wash: 14%;   
  --wash-on: transparent;
  --kw: 100%;
  --mascot-peek: .16;
  --code-bg: #211a16;
  --mark: rgba(242, 200, 110, .32);
  --add: rgba(127, 207, 111, .14); --add-fg: #a9e29a;
  --del: rgba(245, 131, 111, .14); --del-fg: #f8ad9e;
  --shadow: 0 10px 40px rgba(8, 4, 0, .55), 0 1px 2px rgba(8, 4, 0, .4);
  --shadow-1: 0 1px 3px rgba(8, 4, 0, 0.33);
  --shadow-3: 0 18px 60px rgba(8, 4, 0, 0.65), 0 2px 6px rgba(8, 4, 0, 0.33);
  --scrim: rgba(10, 6, 2, .55);
  --ok: #7fcf6f;
  --warn: #eaaa55;
  --danger: #f5836f;
  --info: #8fb0f0;
  --important: #d49ae6;
  --s-comment: #9a8b7a;
  --s-string: #b9d67f;
  --s-number: #86c9e8;
  --s-function: #d3b0f0;
  --s-type: #7dd6cc;
  --s-variable: #efe6dc;
  --s-punct: #b8a898;
  --s-attr: #d3b0f0;
  --t0: #302722; --t1: #f5836f; --t2: #9fc873; --t3: #e8b760; --t4: #8fb0f0; --t5: #d49ae6; --t6: #72cfc4; --t7: #d9cdbf;
  --t8: #9a8b7a; --t9: #ff9a86; --t10: #b8dc92; --t11: #f5d89a; --t12: #a8c2f5; --t13: #e8b8ee; --t14: #98ddd3; --t15: #ffffff;
}

/* snyvi.com: a document open in snyvi.

   The tokens above this sheet are the app's own, lifted from ui/app.css and
   ui/themes.css by build.mjs, so the site wears every theme and accent the
   window does and can never drift from it. Nothing here names a colour: it
   reads --bg, --fg, --accent and the rest, exactly as the app's chrome does
   (docs/DESIGN.md §6.1). The one voice the app doesn't have is Archivo, the
   film's title face (film/DESIGN.md), for the headings that have to persuade. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-italic.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 650; font-stretch: 100% 115%; font-display: swap; src: url(/fonts/archivo.woff2) format("woff2"); }

:root {
  --display: "Archivo", var(--sans);
  --fs-display: clamp(40px, 5.4vw, 72px);
  --fs-section: clamp(26px, 2.6vw, 34px);
  --full: 980px;   /* how wide a picture may go when the column allows it */
  --bar-h: 52px;   /* the top bar under 1024 px, the brand row's height above it */
}

* { box-sizing: border-box; }
html { scroll-padding-top: var(--sp-10); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--fs-ui)/1.5 var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--sp-6); top: var(--sp-6); z-index: var(--z-over); padding: var(--sp-4) var(--sp-6); background: var(--bg-raise); border-radius: var(--r-sm); box-shadow: var(--shadow); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- the mark: snyvi's head, drawn from FACES ---------- */
.mk { width: 20px; height: 20px; flex: none; overflow: visible; }
.mk-body { fill: var(--mascot); }
.mk-nub { fill: var(--mascot-nub); }
.mk-ink { fill: var(--mascot-ink); }
.mk-line { fill: none; stroke: var(--mascot-ink); stroke-width: 1.8; stroke-linecap: round; }
.mk-cheek, .mk-love, .mk-puff { fill: var(--heart); }
.mk-shine { fill: var(--mascot-shine); }
.mk-hero { width: 44px; height: 44px; }

/* ---------- icons: one stroke, one weight ---------- */
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the sidebar ---------- */
.side {
  position: fixed; inset: 0 auto 0 0; width: var(--side-w);
  display: flex; flex-direction: column;
  background: var(--bg-side); border-right: 1px solid var(--rule);
  z-index: var(--z-rail);
}
.brand {
  height: var(--bar-h); flex: none;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-6) 0 var(--sp-7);
}
.brand-name { font-weight: 600; font-size: var(--fs-body-s); text-decoration: none; display: flex; align-items: center; gap: var(--sp-4); }
.brand .fact { margin-left: auto; }
.icon-btn {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; background: none; border-radius: var(--r-sm); color: var(--fg-2); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.icon-btn:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); }

.nav { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-7); overscroll-behavior: contain; }
.label { font-size: var(--fs-micro); font-weight: 600; color: var(--fg-3); padding: var(--sp-7) var(--sp-4) var(--sp-3); }
.label:first-child { padding-top: var(--sp-4); }
.row {
  display: flex; align-items: center; gap: var(--sp-5);
  height: var(--row-h); padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  color: var(--fg-2); font-weight: var(--fw-row); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out);
}
.row:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }
.row[aria-current="page"] { background: var(--accent-bg); color: var(--fg); }
.row[aria-current="page"] .ic { color: var(--accent); }
.row .ext { margin-left: auto; width: 12px; height: 12px; opacity: .6; }
.sub { display: grid; padding: var(--sp-1) 0 var(--sp-3); }
.sub .row { height: var(--sub-row-h); padding-left: 34px; font-size: var(--fs-small); color: var(--fg-3); position: relative; }
.sub .row::before {
  content: ""; position: absolute; left: 21px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--rule-2); transition: background var(--t);
}
.sub .row:hover { color: var(--fg); }
.sub .row.on { color: var(--fg); }
.sub .row.on::before { background: var(--accent); }

.foot {
  flex: none; display: flex; align-items: center; gap: var(--sp-4);
  height: 44px; padding: 0 var(--sp-6) 0 var(--sp-5);
  border-top: 1px solid var(--rule);
}
.foot .fact { margin-left: auto; }
.theme-btn {
  display: flex; align-items: center; gap: var(--sp-4); height: 28px; padding: 0 var(--sp-4);
  border: 0; background: none; border-radius: var(--r-sm); color: var(--fg-2); cursor: pointer; font-size: var(--fs-small);
}
.theme-btn:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); }
.search-row { width: 100%; border: 0; background: none; cursor: pointer; font-size: var(--fs-ui); }
.search-row kbd { margin-left: auto; }

.fact { font: 400 var(--fs-micro)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--fg-3); }
kbd {
  font: 500 var(--fs-micro)/1 var(--mono); color: var(--fg-2);
  padding: 3px 5px; border-radius: var(--r-xs);
  background: var(--bg-raise); box-shadow: inset 0 0 0 1px var(--rule-2);
}

/* ---------- the rail ---------- */
.rail {
  position: fixed; inset: 0 0 0 auto; width: var(--rail-w);
  display: none; flex-direction: column;
  border-left: 1px solid var(--rule); background: var(--bg);
  padding: var(--sp-9) var(--sp-7) var(--sp-7);
  overflow-y: auto; font-size: var(--fs-small);
}
.toc { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-10); padding: 0; list-style: none; }
.toc a { display: block; padding: var(--sp-2) 0; color: var(--fg-3); text-decoration: none; line-height: 1.35; transition: color var(--t); }
.toc a:hover, .toc a.on { color: var(--fg); }
.toc a.on { color: var(--accent); }
.toc .h3 a { padding-left: var(--sp-6); }
.meta { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-6); margin: 0 0 var(--sp-9); padding-top: var(--sp-7); border-top: 1px solid var(--rule); }
.meta dt { color: var(--fg-3); }
.meta dd { margin: 0; color: var(--fg); font-variant-numeric: tabular-nums; }
.acts { display: grid; gap: var(--sp-1); }
.act {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%;
  min-height: 28px; padding: var(--sp-2) var(--sp-4); margin: 0 calc(-1 * var(--sp-4));
  border: 0; background: none; border-radius: var(--r-sm); cursor: pointer;
  color: var(--fg-2); text-decoration: none; text-align: left; font-size: var(--fs-small);
}
.act:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }
.act kbd { margin-left: auto; opacity: 0; transition: opacity var(--t); }
.act:hover kbd, .act:focus-visible kbd { opacity: 1; }
.act.done { color: var(--ok); }

/* ---------- the document ---------- */
main { margin-left: var(--side-w); min-height: 100vh; }
.doc {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--sp-9), 1fr) [text-start] minmax(0, var(--measure)) [text-end] minmax(var(--sp-9), 1fr) [full-end];
  padding: var(--sp-11) 0 128px;
  font-size: var(--fs-read); line-height: 1.65;
}
.doc > * { grid-column: text; min-width: 0; }
.doc > .wide { grid-column: full; width: 100%; max-width: var(--full); justify-self: center; padding: 0 var(--sp-9); }

.doc-head {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  color: var(--fg-3); font-size: var(--fs-ui); margin-bottom: var(--sp-9);
}
.doc-head .sep { opacity: .6; }
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); flex: none; }
.led.ok { background: var(--ok); box-shadow: var(--led-glow); }
.led.info { background: var(--info); }

.doc h1 { font: 650 var(--fs-h1)/1.15 var(--sans); letter-spacing: -.02em; margin: 0 0 var(--sp-7); text-wrap: balance; }
.doc h1.display {
  font: 600 var(--fs-display)/1.02 var(--display); font-stretch: 112%;
  letter-spacing: -.028em; margin: 0 0 var(--sp-9); max-width: 15ch;
}
.answer { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.4; color: var(--fg-2); margin: 0 0 var(--sp-6); text-wrap: balance; }
.answer b { color: var(--fg); font-weight: 600; }
.lede { color: var(--fg-2); margin: 0 0 var(--sp-10); max-width: 56ch; }

.doc h2 {
  font: 600 var(--fs-section)/1.12 var(--display); font-stretch: 112%; letter-spacing: -.022em;
  margin: 96px 0 var(--sp-7); text-wrap: balance;
}
.doc h3 { font: 650 var(--fs-h3)/1.3 var(--sans); letter-spacing: -.01em; margin: var(--sp-11) 0 var(--sp-5); }
.doc h4 { font: 600 var(--fs-body-s)/1.4 var(--sans); margin: var(--sp-10) 0 var(--sp-4); }
.doc h2 + h3 { margin-top: var(--sp-9); }
.doc p, .doc ul, .doc ol { margin: 0 0 var(--sp-7); }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li + li { margin-top: var(--sp-3); }
.doc li::marker { color: var(--fg-3); }
.doc a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color var(--t); }
.doc a:hover { text-decoration-color: var(--accent); }
.doc strong, .doc b { font-weight: 600; }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-11) 0; }
.doc blockquote { margin: 0 0 var(--sp-7); padding-left: var(--sp-7); border-left: 1px solid var(--rule-2); color: var(--fg-2); }
.doc :not(pre) > code { font: .86em/1 var(--mono); padding: .14em .36em; border-radius: var(--r-xs); background: var(--code-bg); }
.doc pre {
  font: 13.5px/1.6 var(--mono); background: var(--code-bg); color: var(--fg);
  padding: var(--sp-7) var(--sp-8); border-radius: var(--r-md); overflow-x: auto; margin: 0 0 var(--sp-7);
  tab-size: 4;
}
.doc pre code { font: inherit; background: none; padding: 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-s); margin: 0 0 var(--sp-9); display: block; overflow-x: auto; }
.doc th { text-align: left; font-weight: 600; font-size: var(--fs-micro); color: var(--fg-3); text-transform: none; padding: var(--sp-4) var(--sp-7) var(--sp-4) 0; border-bottom: 1px solid var(--rule-2); }
.doc td { padding: var(--sp-5) var(--sp-7) var(--sp-5) 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-variant-numeric: tabular-nums; }
.doc img { border-radius: var(--r-md); height: auto; }
.doc details { border-bottom: 1px solid var(--rule); }
.doc details:first-of-type { border-top: 1px solid var(--rule); }
.doc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-7) 0; font-weight: 600; font-size: var(--fs-read);
}
.doc summary::-webkit-details-marker { display: none; }
.doc summary .ic { color: var(--fg-3); transition: transform var(--dur-move) var(--ease-out); }
.doc details[open] summary .ic { transform: rotate(90deg); }
.doc details > :not(summary) { margin-left: 28px; color: var(--fg-2); }
.doc details > :last-child { margin-bottom: var(--sp-8); }

/* Syntax: the classes snyvi's renderer writes, coloured as the app colours
   them (ui/app.css, pre.code). Line numbers stay off, as in a Markdown page. */
.doc pre .ln { display: inline; }
.doc pre .c { color: var(--s-comment); font-style: italic; }
.doc pre .k { color: var(--s-keyword); }
.doc pre .s { color: var(--s-string); }
.doc pre .n { color: var(--s-number); }
.doc pre .f { color: var(--s-function); }
.doc pre .t { color: var(--s-type); }
.doc pre .v { color: var(--s-variable); }
.doc pre .p { color: var(--s-punct); }
.doc pre .tg { color: var(--s-tag); }
.doc pre .at { color: var(--s-attr); }
.doc pre .hd { color: var(--s-keyword); font-weight: 600; }
.doc pre .raw { color: var(--s-string); }
.doc pre .ins { color: var(--add-fg); background: var(--add); }
.doc pre .del { color: var(--del-fg); background: var(--del); }

/* ---------- pictures of the real window ---------- */
.shot { margin: var(--sp-9) 0 var(--sp-7); }
.shot picture, .shot > img { display: block; }
.shot img {
  width: 100%; height: auto; border-radius: var(--r-md);
  box-shadow: 0 0 0 1px var(--rule-2), 0 24px 64px -24px color-mix(in srgb, #000 40%, transparent), 0 2px 6px color-mix(in srgb, #000 8%, transparent);
}
.shot figcaption { font-size: var(--fs-small); color: var(--fg-3); margin-top: var(--sp-5); max-width: 70ch; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); margin: var(--sp-7) 0; }
.pair .shot { margin: 0; }

.hero-shot { position: relative; margin-top: var(--sp-10); }
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: var(--sp-5);
  height: 48px; padding: 0 var(--sp-8) 0 var(--sp-7);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: color-mix(in srgb, var(--bg-raise) 92%, transparent);
  color: var(--fg); font: 600 var(--fs-body-s)/1 var(--sans);
  box-shadow: var(--shadow); white-space: nowrap;
  transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}
.play:hover { transform: translate(-50%, -50%) scale(1.04); }
.play .ic { color: var(--accent); fill: var(--accent); }
.play .fact { color: var(--fg-3); }

/* A clip is a close-up of the window at 1120 px: shown no wider than 760,
   its type stays as sharp as the stills'. It holds its 16:9 before a frame
   arrives, so nothing below it moves. */
.clip { position: relative; max-width: 760px; margin-inline: auto; }
.clip video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-side);
  border-radius: var(--r-md);
  box-shadow: 0 0 0 1px var(--rule-2), 0 24px 64px -24px color-mix(in srgb, #000 40%, transparent), 0 2px 6px color-mix(in srgb, #000 8%, transparent);
}
.clip-btn {
  position: absolute; right: var(--sp-5); bottom: var(--sp-5);
  display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: color-mix(in srgb, #000 55%, transparent); color: #fff;
  opacity: 0; transition: opacity var(--dur-quick) var(--ease-out);
}
.clip:hover .clip-btn, .clip-btn:focus-visible, .clip[data-paused] .clip-btn { opacity: 1; }
.clip-btn .ic { width: 14px; height: 14px; }
.clip-btn .ic:last-child, .clip[data-paused] .clip-btn .ic:first-child { display: none; }
.clip[data-paused] .clip-btn .ic:last-child { display: block; fill: currentColor; }
.still .clip-btn, html:not(.js) .clip-btn { display: none; }

/* ---------- install ---------- */
.install {
  border-radius: var(--r-md); background: var(--bg-raise);
  box-shadow: 0 0 0 1px var(--rule), var(--shadow-1);
  padding: var(--sp-4); margin: 0 0 var(--sp-6); font-size: var(--fs-body-s);
}
.tabs { display: flex; gap: var(--sp-1); padding: 0 0 var(--sp-4); }
.tab {
  height: 28px; padding: 0 var(--sp-6); border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: none; color: var(--fg-3); font-size: var(--fs-ui); font-weight: 500;
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { background: var(--accent-bg); color: var(--fg); }
.cmd {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--code-bg); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-7);
}
.cmd code { flex: 1; min-width: 0; font: 13.5px/1.5 var(--mono); overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding: var(--sp-3) 0; }
.cmd code::-webkit-scrollbar { display: none; }
.cmd code .pr { color: var(--fg-3); user-select: none; }
.copy {
  flex: none; display: flex; align-items: center; gap: var(--sp-3);
  height: 32px; padding: 0 var(--sp-6); border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--fs-ui);
  transition: filter var(--dur-instant) var(--ease-out);
}
.copy:hover { filter: brightness(1.08); }
.copy.done { background: var(--ok); }
.doc .install-note { color: var(--fg-3); font-size: var(--fs-small); line-height: 1.5; margin: var(--sp-4) var(--sp-4) var(--sp-2); }
.doc .install-note a { color: var(--fg-2); }
.doc .install-note code { font-size: 11.5px; }
.js .os-panel[hidden] { display: none; }
.os-panel + .os-panel { margin-top: var(--sp-6); }
.js .os-panel + .os-panel { margin-top: 0; }
.doc .os-name { display: none; font-size: var(--fs-micro); font-weight: 600; color: var(--fg-3); margin: 0 0 var(--sp-3) var(--sp-4); }
html:not(.js) .doc .os-name { display: block; }
html:not(.js) .tabs { display: none; }

.facts { display: flex; flex-wrap: wrap; font: 400 var(--fs-small)/1.6 var(--mono); color: var(--fg-3); margin: var(--sp-7) 0 0; font-variant-numeric: tabular-nums; }
.facts span { white-space: nowrap; }
.facts span + span::before { content: "·"; margin: 0 .6em; opacity: .7; }

/* ---------- the story's own parts ---------- */
.passion { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; color: var(--fg); margin: 120px 0 var(--sp-9); text-wrap: pretty; }
.scatter { display: grid; margin: 0 0 var(--sp-7); border-top: 1px solid var(--rule); }
.scatter a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-7);
  padding: var(--sp-7) var(--sp-2); border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--fg-2);
}
.scatter a b { color: var(--fg); font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: var(--sp-4); }
.scatter a b .ic { color: var(--accent); transition: transform var(--dur-quick) var(--ease-out); }
.scatter a:hover b .ic { transform: translateX(3px); }
.verdict { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.4; margin: var(--sp-10) 0 0; }
.verdict b { font-weight: 650; }

.plate { display: grid; grid-template-columns: max-content 1fr; margin: 0 0 var(--sp-7); border-top: 1px solid var(--rule); font-size: var(--fs-body-s); }
.plate dt, .plate dd { margin: 0; padding: var(--sp-6) 0; border-bottom: 1px solid var(--rule); }
.plate dt { color: var(--fg-3); padding-right: var(--sp-10); }
.plate dd { color: var(--fg); }
.plate dd .fact { font-size: var(--fs-body-s); color: var(--fg); }

.close { text-align: left; margin-top: 128px; padding-top: var(--sp-11); border-top: 1px solid var(--rule); }
.close .mk-hero { margin-bottom: var(--sp-8); }
.close h2 { margin-top: 0 !important; }
/* The first five minutes: the same four lines as the app's Getting started
   card, so the site's last promise is the app's first screen. */
.doc .steps { list-style: none; padding: 0; margin: 0 0 var(--sp-9); border-top: 1px solid var(--rule); counter-reset: step; font-size: var(--fs-body-s); }
.steps li { counter-increment: step; padding: var(--sp-6) var(--sp-2) var(--sp-6) 32px; border-bottom: 1px solid var(--rule); color: var(--fg-2); }
.steps li::before { content: counter(step); display: inline-block; width: 32px; margin-left: -32px; font-family: var(--mono); font-size: var(--fs-small); color: var(--accent); }
.steps b { color: var(--fg); font-weight: 600; }
.colophon { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); margin-top: var(--sp-11); font-size: var(--fs-small); color: var(--fg-3); }
.colophon a { color: var(--fg-3); text-decoration: none; }
.colophon a:hover { color: var(--fg); }

/* The changelog: versions, the way the rail lists a document's. */
.doc .versions { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.versions li { margin: 0 !important; border-bottom: 1px solid var(--rule); }
.versions a { display: grid; grid-template-columns: 88px 64px 1fr; gap: var(--sp-6); padding: var(--sp-6) 0; text-decoration: none !important; color: var(--fg-2) !important; font-size: var(--fs-body-s); line-height: 1.5; }
.versions a:hover { color: var(--fg) !important; }
.versions .v { font: 500 var(--fs-ui)/1.5 var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.versions time { font: var(--fs-small)/1.6 var(--mono); color: var(--fg-3); }
.versions li:first-child .v { color: var(--accent); }

/* Diagrams: snyvi's renderer hands them over as source; mermaid draws them. */
.doc > pre.mermaid { grid-column: full; width: 100%; max-width: var(--full); justify-self: center; padding-inline: var(--sp-9); }
.doc pre.mermaid { overflow-x: auto; background: none; padding: var(--sp-7) 0; text-align: center; color: transparent; min-height: 120px; }
.doc pre.mermaid[data-done] { color: inherit; }
.doc pre.mermaid svg { margin: 0 auto; height: auto; max-width: none !important; }

/* ---------- popovers: the theme menu, search, the film ---------- */
.pop {
  position: fixed; z-index: var(--z-pop);
  background: var(--bg-raise); border-radius: var(--r-md); box-shadow: var(--shadow), 0 0 0 1px var(--rule);
  padding: var(--sp-4); font-size: var(--fs-ui);
}
.theme-menu { left: var(--sp-5); bottom: 52px; width: 248px; }
.theme-menu[hidden] { display: none; }
.theme-list { display: grid; gap: var(--sp-1); }
.theme-opt {
  display: flex; align-items: center; gap: var(--sp-5);
  height: 30px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: none; color: var(--fg); text-align: left;
}
.theme-opt:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.theme-opt .sw {
  width: 22px; height: 16px; border-radius: var(--r-xs); flex: none; position: relative;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule-2);
}
.theme-opt .sw::after { content: ""; position: absolute; right: 4px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.theme-opt[aria-checked="true"]::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.accents { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sp-2); padding: var(--sp-5) var(--sp-3) var(--sp-3); margin-top: var(--sp-3); border-top: 1px solid var(--rule); }
.accent-opt {
  aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
  transition: transform var(--dur-instant) var(--ease-out);
}
.accent-opt:hover { transform: scale(1.12); }
.accent-opt[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg-raise), 0 0 0 3.5px var(--fg-2); }
.menu-label { font-size: var(--fs-micro); font-weight: 600; color: var(--fg-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }

dialog { border: 0; padding: 0; color: var(--fg); }
dialog::backdrop { background: var(--scrim); }
.palette {
  width: min(600px, calc(100vw - 32px)); margin: 12vh auto auto;
  background: var(--bg-raise); border-radius: var(--r-md); box-shadow: var(--shadow-3), 0 0 0 1px var(--rule);
  overflow: hidden;
}
.palette input {
  width: 100%; border: 0; outline: 0; background: none; color: var(--fg);
  font: 400 var(--fs-read)/1 var(--sans); padding: var(--sp-8) var(--sp-8);
  border-bottom: 1px solid var(--rule);
}
.palette input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.palette input::placeholder { color: var(--fg-3); }
.results { list-style: none; margin: 0; padding: var(--sp-4); max-height: min(420px, 55vh); overflow-y: auto; }
.results a {
  display: grid; gap: var(--sp-1); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-sm);
  text-decoration: none; color: var(--fg);
}
.results a[aria-selected="true"] { background: var(--accent-bg); }
.results .where { font-size: var(--fs-micro); color: var(--fg-3); }
.results .what { font-weight: 500; font-size: var(--fs-body-s); }
.results .snip { font-size: var(--fs-small); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results .none { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-7) var(--sp-6); color: var(--fg-3); }
.results .none .mk { width: 22px; height: 22px; }
.palette-foot { display: flex; gap: var(--sp-7); padding: var(--sp-5) var(--sp-8); border-top: 1px solid var(--rule); color: var(--fg-3); font-size: var(--fs-micro); }

.film {
  width: min(1280px, calc(100vw - 48px)); margin: auto; background: #000;
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-3);
}
.film video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.film-close { position: absolute; top: var(--sp-5); right: var(--sp-5); z-index: 1; background: color-mix(in srgb, #000 55%, transparent); color: #fff; }
.film-close:hover { background: color-mix(in srgb, #000 75%, transparent); color: #fff; }

/* ---------- the one authored moment: the page arrives ----------
   What the window does when a document lands (docs/DESIGN.md §5.2: --info,
   one wash, 700 ms), and the mark's whoa for 2.4 s. Content is visible from
   the first frame; only the wash and the face move. */
@keyframes arrive { from { background: color-mix(in srgb, var(--info) 14%, transparent); } to { background: transparent; } }
@keyframes led-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.arrived .doc-head { animation: arrive var(--dur-moment) var(--ease-out) both; border-radius: var(--r-sm); margin-left: calc(-1 * var(--sp-4)); padding: var(--sp-2) var(--sp-4); }
.arrived .doc-head .led { animation: led-in var(--dur-moment) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .arrived .doc-head, .arrived .doc-head .led { animation: none; }
  *, *::before, *::after { transition-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------- widths ---------- */
.bar { display: none; }
@media (min-width: 1280px) {
  .rail { display: flex; }
  main { margin-right: var(--rail-w); }
}
@media (max-width: 1023px) {
  :root { --fs-read: 16px; }
  .bar {
    position: sticky; top: 0; z-index: var(--z-rail);
    display: flex; align-items: center; gap: var(--sp-4);
    height: var(--bar-h); padding: 0 var(--sp-5) 0 var(--sp-7);
    background: color-mix(in srgb, var(--bg-side) 94%, transparent); border-bottom: 1px solid var(--rule);
    backdrop-filter: saturate(1.4) blur(10px);
  }
  .bar .brand-name { margin-right: auto; }
  .side {
    top: var(--bar-h); width: 100%; height: auto; max-height: calc(100dvh - var(--bar-h));
    border-right: 0; border-bottom: 1px solid var(--rule); box-shadow: var(--shadow-3);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out), visibility 0s linear var(--dur-quick);
  }
  .side .brand { display: none; }
  .open-nav .side { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .theme-menu { top: auto; bottom: 52px; }
  main { margin-left: 0; }
  .doc { padding-top: var(--sp-10); grid-template-columns: [full-start] var(--sp-7) [text-start] minmax(0, 1fr) [text-end] var(--sp-7) [full-end]; }
  .doc > .wide, .doc > pre.mermaid { padding-inline: 0; grid-column: text; }
  .doc h2 { margin-top: 72px; }
  .passion { margin-top: 88px; }
  .pair { grid-template-columns: 1fr; }
  .scatter a { grid-template-columns: 1fr; gap: var(--sp-3); }
  .versions a { grid-template-columns: 80px 1fr; }
  .versions a span { grid-column: 1 / -1; }
  .play { height: 40px; padding: 0 var(--sp-7) 0 var(--sp-6); font-size: var(--fs-ui); }
  .plate { grid-template-columns: 1fr; }
  .plate dt { padding-bottom: 0; border-bottom: 0; }
}
@media (max-width: 520px) {
  .tab { padding: 0 var(--sp-5); }
  .copy span { display: none; }
  /* The whole line, wrapped, rather than one cut off at the edge. */
  .cmd code { white-space: normal; overflow-wrap: anywhere; }
}

.shot .dk { display: none; }
[data-theme="ink"] .shot .dk, [data-theme="contrast"] .shot .dk, [data-theme="midnight"] .shot .dk, [data-theme="espresso"] .shot .dk { display: block; }
[data-theme="ink"] .shot .lt, [data-theme="contrast"] .shot .lt, [data-theme="midnight"] .shot .lt, [data-theme="espresso"] .shot .lt { display: none; }