/* decuff theme tokens. One set for S1, S2 and S3.
   Light (porcelain) is the default. Dark follows prefers-color-scheme unless the
   toggle has set [data-theme="light"]; [data-theme="dark"] forces dark either way.
   Every colour on the site and in the Anatomy figures reads one of these. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-vf.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-vf.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ground and ink */
  --paper: #f2f2ef;          /* page ground, porcelain */
  --sheet: #fbfbfa;          /* drawing sheet, figure card */
  --ink: #141413;            /* logo ink, display type */
  --text: #2a2a2c;           /* running text */
  --muted: #5c5c60;          /* labels, readouts, small print */
  --quiet: #8a8a8f;          /* decorative only: ascii, grid numbers */
  --rule: #c4c4bf;           /* frames, hairlines */
  --rule-soft: #dcdcd7;      /* inner cells, minor grid */
  --grid: rgb(20 20 19 / 0.06);
  --texture: rgb(20 20 19 / 0.075);
  --shade-0: #dcdcd9;        /* the four shading greys, darkest to lightest */
  --shade-1: #e5e5e2;
  --shade-2: #ededea;
  --shade-3: #f4f4f1;

  /* The one field colour: ultramarine. Use once or twice per page. */
  --accent: #1f33c9;         /* as text or stroke on paper: 7.8:1 */
  --accent-field: #1f33c9;   /* as a flat field */
  --on-accent: #f7f7f4;      /* text on the field: 8.4:1 */

  --focus: var(--accent);
  --selection: rgb(31 51 201 / 0.16);

  /* Anatomy figure tokens, light */
  --anatomy-page: var(--paper);
  --anatomy-card: var(--sheet);
  --anatomy-text: #57575a;
  --anatomy-strong: #18181a;
  --anatomy-muted: #6e6e72;
  --anatomy-paper: var(--sheet);
  --anatomy-face: #ffffff;
  --anatomy-top: #ffffff;
  --anatomy-shade-0: var(--shade-0);
  --anatomy-shade-1: var(--shade-1);
  --anatomy-shade-2: var(--shade-2);
  --anatomy-shade-3: var(--shade-3);
  --anatomy-lit-top: #ffffff;
  --anatomy-lit-shade: #eeeeeb;
  --anatomy-hi: #26262a;
  --anatomy-mid: #8a8a8f;
  --anatomy-lo: #b4b4b8;
  --anatomy-faint: #d4d4d6;
  --anatomy-lit: #000000;
  --anatomy-halo: #8a8a80;
  --anatomy-halo-opacity: 0.32;
  --anatomy-dot: #3a3a3e;
  --anatomy-red: #e5484d;
  --anatomy-green: #30a46c;
  --anatomy-blue: #3e63dd;
  --anatomy-weight: 0.6px;
  --anatomy-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --anatomy-mono: var(--font-mono);
  /* Fig 1 (chain handcuffs) figure tokens: the lock's cavity, darker for depth, and its milled section faces */
  --hc-cav-paper: #e6e6e3;
  --hc-cav-top: #e3e3e0;
  --hc-cav-s0: #cdcdca;
  --hc-cav-s1: #d4d4d1;
  --hc-cav-s2: #dadad7;
  --hc-cav-s3: #dfdfdc;
  --hc-cav-lo: #a3a3a7;
  --hc-cav-faint: #c6c6c9;
  --hc-cav-mid: #7d7d82;
  --hc-cut-top: #ffffff;
  --hc-cut-s0: #e7e7e4;
  --hc-cut-s1: #eeeeeb;
  --hc-cut-s2: #f3f3f1;
  --hc-cut-s3: #f8f8f6;

  /* Type */
  /* When the web font is blocked (Lockdown Mode, Tor Browser Safest, strict blockers) the
     headlines fall back to a condensed system face of similar width: Avenir Next Condensed on
     Apple devices, Arial Narrow or Impact on Windows, Roboto Condensed on Android. */
  --font-display: "Big Shoulders Display", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "sans-serif-condensed", Impact, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (fluid). Display sizes are set per layout; these are the shared steps. */
  --step--2: 0.6875rem;                                  /* 11px mono labels */
  --step--1: 0.8125rem;                                  /* 13px small print */
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);   /* body */
  --step-1: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); /* lede */
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --step-3: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --step-4: clamp(3.5rem, 2.4rem + 5vw, 7rem);

  /* Space */
  --gutter: clamp(16px, 3.2vw, 40px);
  --measure: 62ch;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b0b0b;
    --sheet: #131313;
    --ink: #ededea;
    --text: #c9c9c5;
    --muted: #9a9a9e;
    --quiet: #6a6a6e;
    --rule: #383838;
    --rule-soft: #242424;
    --grid: rgb(237 237 234 / 0.05);
    --texture: rgb(237 237 234 / 0.06);
    --shade-0: #0f0f0f;
    --shade-1: #121212;
    --shade-2: #151515;
    --shade-3: #181818;
    --accent: #8f9bff;
    --accent-field: #2a3ddc;
    --on-accent: #f7f7f4;
    --selection: rgb(143 155 255 / 0.22);
    /* Figures: faces lifted off the ground and lines a step brighter, so the models read on near-black */
    --anatomy-text: #a3a3a3;
    --anatomy-strong: #e6e6e6;
    --anatomy-muted: #8a8a8e;
    --anatomy-face: #2e2e2e;
    --anatomy-top: #333333;
    --anatomy-lit-top: #424242;
    --anatomy-lit-shade: #333333;
    --anatomy-shade-0: #1b1b1b;
    --anatomy-shade-1: #212121;
    --anatomy-shade-2: #272727;
    --anatomy-shade-3: #2d2d2d;
    --anatomy-hi: #ededea;
    --anatomy-mid: #b4b4b4;
    --anatomy-lo: #8a8a8a;
    --anatomy-faint: #5a5a5a;
    --anatomy-lit: #ffffff;
    --anatomy-halo: #050505;
    --anatomy-halo-opacity: 0.9;
    --anatomy-dot: #e6e6e6;
    --anatomy-red: #ff6b6b;
    --anatomy-green: #6be0a0;
    --anatomy-blue: #6b9bff;
    --hc-cav-paper: #151515;
    --hc-cav-top: #191919;
    --hc-cav-s0: #121212;
    --hc-cav-s1: #151515;
    --hc-cav-s2: #181818;
    --hc-cav-s3: #1b1b1b;
    --hc-cav-lo: #707070;
    --hc-cav-faint: #4a4a4a;
    --hc-cav-mid: #9a9a9a;
    --hc-cut-top: #3d3d3d;
    --hc-cut-s0: #2a2a2a;
    --hc-cut-s1: #2f2f2f;
    --hc-cut-s2: #343434;
    --hc-cut-s3: #393939;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0b0b0b;
  --sheet: #131313;
  --ink: #ededea;
  --text: #c9c9c5;
  --muted: #9a9a9e;
  --quiet: #6a6a6e;
  --rule: #383838;
  --rule-soft: #242424;
  --grid: rgb(237 237 234 / 0.05);
  --texture: rgb(237 237 234 / 0.06);
  --shade-0: #0f0f0f;
  --shade-1: #121212;
  --shade-2: #151515;
  --shade-3: #181818;
  --accent: #8f9bff;
  --accent-field: #2a3ddc;
  --on-accent: #f7f7f4;
  --selection: rgb(143 155 255 / 0.22);
  /* Figures: faces lifted off the ground and lines a step brighter, so the models read on near-black */
  --anatomy-text: #a3a3a3;
  --anatomy-strong: #e6e6e6;
  --anatomy-muted: #8a8a8e;
  --anatomy-face: #2e2e2e;
  --anatomy-top: #333333;
  --anatomy-lit-top: #424242;
  --anatomy-lit-shade: #333333;
  --anatomy-shade-0: #1b1b1b;
  --anatomy-shade-1: #212121;
  --anatomy-shade-2: #272727;
  --anatomy-shade-3: #2d2d2d;
  --anatomy-hi: #ededea;
  --anatomy-mid: #b4b4b4;
  --anatomy-lo: #8a8a8a;
  --anatomy-faint: #5a5a5a;
  --anatomy-lit: #ffffff;
  --anatomy-halo: #050505;
  --anatomy-halo-opacity: 0.9;
  --anatomy-dot: #e6e6e6;
  --anatomy-red: #ff6b6b;
  --anatomy-green: #6be0a0;
  --anatomy-blue: #6b9bff;
  --hc-cav-paper: #151515;
  --hc-cav-top: #191919;
  --hc-cav-s0: #121212;
  --hc-cav-s1: #151515;
  --hc-cav-s2: #181818;
  --hc-cav-s3: #1b1b1b;
  --hc-cav-lo: #707070;
  --hc-cav-faint: #4a4a4a;
  --hc-cav-mid: #9a9a9a;
  --hc-cut-top: #3d3d3d;
  --hc-cut-s0: #2a2a2a;
  --hc-cut-s1: #2f2f2f;
  --hc-cut-s2: #343434;
  --hc-cut-s3: #393939;
  color-scheme: dark;
}

/* Anatomy figure styles (kit/iso.css, MIT), token blocks removed: tokens live in tokens.css. */
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}
/* decuff additions */
.fig-stage{position:relative;display:block;outline:none;touch-action:pan-y}
.fig-stage>svg.iso-svg+svg.iso-svg{position:absolute;inset:0}
.fig-stage:focus-visible{outline:1px solid var(--focus);outline-offset:6px}
/* a figure that runs as a page of its own (cliff): its frame covers the stage and fades in once drawn */
.fig-frame{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity .6s var(--anatomy-ease)}
.fig-frame[data-ready]{opacity:1}
@media (prefers-reduced-motion:reduce){.fig-frame{transition:none}}
.iso-caption{display:block;max-width:var(--measure,62ch)}
/* fig:cuff · Fig 1, chain handcuffs (figures/cuff). Its own tokens (--hc-*) live in tokens.css with the kit's.
   The cavity (the rear cheek's top, the floor rings, the cavity-facing frame walls) is darker for depth; milled section faces
   (window, keyhole and slot walls, the stud's milled top) are a touch lighter than structure. */
.hc-cavity{--anatomy-paper:var(--hc-cav-paper);--anatomy-top:var(--hc-cav-top);--anatomy-shade-0:var(--hc-cav-s0);--anatomy-shade-1:var(--hc-cav-s1);--anatomy-shade-2:var(--hc-cav-s2);--anatomy-shade-3:var(--hc-cav-s3);--anatomy-lo:var(--hc-cav-lo);--anatomy-faint:var(--hc-cav-faint);--anatomy-mid:var(--hc-cav-mid)}
.hc-cut{--anatomy-top:var(--hc-cut-top);--anatomy-shade-0:var(--hc-cut-s0);--anatomy-shade-1:var(--hc-cut-s1);--anatomy-shade-2:var(--hc-cut-s2);--anatomy-shade-3:var(--hc-cut-s3)}
/* lit: pawl, spring and tab always carry data-lit; --l (0…1, from the live module) mixes the lit and plain tokens; --hc-burst widens the edge on a click */
.hc-litable .iso-solid[data-lit]>.iso-top{fill:color-mix(in srgb,var(--anatomy-lit-top) calc(var(--l,0)*100%),var(--anatomy-top))}
.hc-litable .iso-solid[data-lit]>.iso-shade[data-shade="0"]{fill:color-mix(in srgb,var(--anatomy-lit-shade) calc(var(--l,0)*100%),var(--anatomy-shade-0))}
.hc-litable .iso-solid[data-lit]>.iso-shade[data-shade="1"]{fill:color-mix(in srgb,var(--anatomy-lit-shade) calc(var(--l,0)*100%),var(--anatomy-shade-1))}
.hc-litable .iso-solid[data-lit]>.iso-shade[data-shade="2"]{fill:color-mix(in srgb,var(--anatomy-lit-shade) calc(var(--l,0)*100%),var(--anatomy-shade-2))}
.hc-litable .iso-solid[data-lit]>.iso-shade[data-shade="3"]{fill:color-mix(in srgb,var(--anatomy-lit-shade) calc(var(--l,0)*100%),var(--anatomy-shade-3))}
.hc-litable .iso-solid[data-lit]>.iso-fill{fill:color-mix(in srgb,var(--anatomy-face) calc(var(--l,0)*100%),var(--anatomy-paper))}
.hc-litable .iso-solid[data-lit]>.iso-edge{stroke:color-mix(in srgb,var(--anatomy-lit) calc(var(--l,0)*100%),var(--anatomy-hi));stroke-width:calc(var(--anatomy-weight) * (1 + var(--hc-burst, 0) * .8))}
/* the key's bow ring keeps its hole open */
.hc-key .iso-fill,.hc-key .iso-top{fill-rule:evenodd}
/* halos on the undrawn surface under the cuffs, the chain, the open strand and the key lying flat: the only sign of the surface.
   The key's fades (--hc-kh) as it leaves the surface */
.hc-svg .hc-halo{filter:blur(7px);transform:translateY(3px)}
.hc-svg [data-part="keyHalo"]{opacity:calc(var(--anatomy-halo-opacity) * var(--hc-kh, 1))}
/* the closed cuff is static, so its lines step down one tone (hi → mid, mid → lo); fills are unchanged */
.hc-svg .hc-dim [data-tone="hi"]{stroke:var(--anatomy-mid)}
.hc-svg .hc-dim [data-tone="mid"]{stroke:var(--anatomy-lo)}
/* /fig:cuff */

/* decuff base: reset, type defaults and the shared component set.
   Layouts (s1.css, s2.css, s3.css) arrange these and may restyle them under .opt-s1/2/3,
   but every colour still comes from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 var(--step-0) / 1.6 var(--font-sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
svg { overflow: visible; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, pre, table { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; font-weight: 600; line-height: 1.05; }
p { text-wrap: pretty; max-width: var(--measure); }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--selection); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
table { border-collapse: collapse; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
  font: 500 var(--step--1) / 1 var(--font-mono); text-decoration: none;
}
.skip:focus { top: 12px; }

/* Utility faces */
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); }
.label, .kicker {
  font: 500 var(--step--2) / 1.3 var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* ── Logo ───────────────────────────────────────────── */
.logo { color: var(--ink); display: inline-block; line-height: 0; height: var(--logo-h, 28px); }
.logo svg { height: 100%; width: auto; }
.site-footer__logo { --logo-h: 84px; margin-bottom: 28px; }
.logo path { fill: currentColor; }

/* ── Button: a key blade. Square bow end, bitting cut into the lower edge, pointed tip. ── */
.btn {
  --btn-fg: var(--paper);
  --btn-bg: var(--ink);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.75em;
  min-height: 48px;
  padding: 0.95em 2.4em 1.15em 1.2em;
  color: var(--btn-fg);
  font: 500 var(--step--1) / 1 var(--font-mono);
  letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  border: 0; background: none; cursor: pointer;
  transition: color 160ms var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg);
  /* bitting: five cuts along the lower edge, tip on the right */
  clip-path: polygon(
    0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%,
    calc(100% - 30px) 100%, calc(100% - 34px) calc(100% - 5px), calc(100% - 38px) 100%,
    calc(100% - 52px) 100%, calc(100% - 57px) calc(100% - 7px), calc(100% - 62px) 100%,
    calc(100% - 72px) 100%, calc(100% - 75px) calc(100% - 4px), calc(100% - 78px) 100%,
    calc(100% - 92px) 100%, calc(100% - 97px) calc(100% - 6px), calc(100% - 102px) 100%,
    0 100%
  );
  transition: transform 220ms var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:hover::before { transform: translateX(3px); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.btn--ghost { --btn-fg: var(--ink); --btn-bg: transparent; }
.btn--ghost::before { background: none; }
.btn--ghost { box-shadow: inset 0 0 0 1px var(--ink); padding-right: 1.4em; }
.btn--ghost:hover::before { transform: none; }
.btn--accent { --btn-fg: var(--on-accent); --btn-bg: var(--accent-field); }
.btn--on-accent { --btn-fg: var(--accent-field); --btn-bg: var(--on-accent); }
.btn--on-accent:focus-visible { outline-color: var(--on-accent); }

/* Key glyph: turns over (180° about its long axis) on hover and focus. */
.key-glyph { width: 1.6em; height: 0.8em; flex: none; transition: transform 320ms var(--ease); transform-origin: 50% 50%; }
.key-glyph path, .key-glyph circle { fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linecap: square; }
a:hover > .key-glyph, a:focus-visible > .key-glyph,
button:hover > .key-glyph, button:focus-visible > .key-glyph { transform: perspective(40px) rotateX(180deg); }
@media (prefers-reduced-motion: reduce) { .key-glyph, .btn::before { transition: none; } }

/* Text link with a key glyph */
.keylink {
  display: inline-flex; align-items: center; gap: 0.6em;
  font: 500 var(--step--1) / 1.2 var(--font-mono); letter-spacing: 0.06em;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.keylink:hover { text-decoration: none; border-bottom-width: 2px; padding-bottom: 2px; }

/* ── Theme toggle ─────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 0.55em;
  min-height: 44px; padding: 0 0.6em;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font: 500 var(--step--2) / 1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.theme-toggle .tt-dial { width: 18px; height: 18px; transition: transform 320ms var(--ease); }
.theme-toggle .tt-dial circle { fill: none; stroke: currentColor; stroke-width: 1.2; }
.theme-toggle .tt-dial path { fill: currentColor; }
:root[data-theme="dark"] .theme-toggle .tt-dial { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .tt-dial { transform: rotate(180deg); } }

/* ── Terminal status line ─────────────────────────── */
.term { font: 400 var(--step--1) / 1.65 var(--font-mono); color: var(--ink); }
.term__line { display: block; white-space: pre-wrap; }
.term__prompt { color: var(--muted); }
.term__key { display: inline-block; min-width: 7.5ch; color: var(--muted); }
.term a { text-decoration-color: var(--rule); }
.cursor {
  display: inline-block; width: 0.62em; height: 1.15em; margin-left: 0.2em;
  vertical-align: -0.2em; background: var(--ink);
  animation: cursor-blink 1.1s steps(1, end) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* ── Stamped key tag ──────────────────────────────── */
.keytag {
  --tag-h: 4.2rem;
  position: relative; display: inline-grid; grid-template-columns: auto auto; align-items: center;
  column-gap: 1rem; row-gap: 0.1rem;
  min-height: var(--tag-h);
  padding: 0.7rem 1.4rem 0.75rem calc(var(--tag-h) * 0.62 + 1rem);
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0.35rem calc(var(--tag-h) / 2) calc(var(--tag-h) / 2) 0.35rem;
}
.keytag::before { /* punched hole */
  content: ""; position: absolute; left: calc(var(--tag-h) * 0.22); top: 50%;
  width: calc(var(--tag-h) * 0.26); aspect-ratio: 1; translate: 0 -50%;
  border-radius: 50%; border: 1px solid var(--ink); background: var(--paper);
}
.keytag::after { /* eyelet round the hole */
  content: ""; position: absolute; left: calc(var(--tag-h) * 0.14); top: 50%;
  width: calc(var(--tag-h) * 0.42); aspect-ratio: 1; translate: 0 -50%;
  border-radius: 50%; border: 1px solid var(--rule); pointer-events: none;
}
.keytag__label { grid-column: 1 / -1; font: 500 var(--step--2) / 1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.keytag__num {
  font: 800 2.15rem / 1 var(--font-display); letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; color: var(--ink);
  text-shadow: 0 1px 0 var(--paper); /* struck, not printed */
}
.keytag__sample {
  align-self: center; justify-self: start;
  font: 500 0.625rem / 1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule); padding: 0.3em 0.45em;
}

/* ── Engineering title block ──────────────────────── */
.tb {
  display: grid; grid-template-columns: minmax(10rem, 2.2fr) repeat(2, minmax(5.5rem, 1fr));
  border: 1px solid var(--ink); background: var(--rule); gap: 1px;
  font: 400 var(--step--2) / 1.25 var(--font-mono); color: var(--ink);
  min-width: 0;
}
.tb__cell { background: var(--paper); padding: 0.45rem 0.6rem 0.5rem; min-width: 0; }
.tb__k { display: block; font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.15rem; }
.tb__v { display: block; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb__cell--title { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.tb__cell--title .tb__v { font: 600 1rem / 1.1 var(--font-sans); font-stretch: 85%; letter-spacing: 0.02em; white-space: normal; }
.tb--compact { grid-template-columns: repeat(4, minmax(min-content, 1fr)); }
.tb--compact .tb__cell--title { grid-row: auto; grid-column: 1 / -1; }

/* ── ASCII ───────────────────────────────────────── */
.ascii {
  font: 400 var(--ascii-size, 0.8125rem) / 1.15 var(--font-mono);
  color: var(--quiet); white-space: pre; letter-spacing: 0;
  font-variant-ligatures: none; tab-size: 4;
  user-select: text;
}
.ascii--ink { color: var(--ink); }
.ascii--muted { color: var(--muted); }
.hexfield {
  font: 400 0.6875rem / 1.55 var(--font-mono); color: var(--texture);
  white-space: pre; overflow: hidden; pointer-events: none; user-select: none;
  font-variant-numeric: tabular-nums;
}

/* ── Registration and crop marks ──────────────────── */
.crops { position: absolute; inset: 0; pointer-events: none; }
.crops > i {
  position: absolute; width: 14px; height: 14px; border-color: var(--ink); border-style: solid; border-width: 0;
}
.crops > i:nth-child(1) { left: -8px; top: -8px; border-right-width: 1px; border-bottom-width: 1px; translate: -100% -100%; }
.crops > i:nth-child(2) { right: -8px; top: -8px; border-left-width: 1px; border-bottom-width: 1px; translate: 100% -100%; }
.crops > i:nth-child(3) { left: -8px; bottom: -8px; border-right-width: 1px; border-top-width: 1px; translate: -100% 100%; }
.crops > i:nth-child(4) { right: -8px; bottom: -8px; border-left-width: 1px; border-top-width: 1px; translate: 100% 100%; }
.reg { width: 18px; height: 18px; color: var(--ink); }
.reg circle, .reg path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ── Dimension line: |←—— 1000 mm ——→| ─────────────── */
.dim {
  --dim-color: var(--muted);
  position: relative; display: flex; align-items: center; gap: 0.6em;
  color: var(--dim-color); font: 400 var(--step--2) / 1 var(--font-mono); letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.dim::before, .dim::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.dim > .dim__end { position: absolute; top: 50%; width: 1px; height: 11px; translate: 0 -50%; background: currentColor; }
.dim > .dim__end:first-child { left: 0; }
.dim > .dim__end:last-child { right: 0; }
.dim__val { white-space: nowrap; }
.dim--v { flex-direction: column; width: max-content; }
.dim--v::before, .dim--v::after { width: 1px; height: auto; flex: 1; }
.dim--v > .dim__end { left: 50%; top: auto; width: 11px; height: 1px; translate: -50% 0; }
.dim--v > .dim__end:first-child { top: 0; left: 50%; }
.dim--v > .dim__end:last-child { bottom: 0; right: auto; left: 50%; }
.dim--v .dim__val { writing-mode: vertical-rl; rotate: 180deg; }

/* Numbered callout */
.callout {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1px solid var(--ink); color: var(--ink);
  font: 500 0.6875rem / 1 var(--font-mono); font-variant-numeric: tabular-nums;
}

/* ── Pin-tumbler step marker ──────────────────────── */
.pins { width: var(--pins-w, 104px); height: auto; color: var(--ink); }
.pins .p-chamber { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pins .p-plug { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pins .p-shear { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pins .p-spring { fill: none; stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pins .p-driver { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pins .p-key { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pins [data-set] .p-driver, .pins [data-set] .p-key { fill: currentColor; }
.pins .p-stack { transition: transform 600ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .pins .p-stack { transition: none; } }

/* ── How it works steps ───────────────────────────── */
.steps { display: grid; gap: 1.75rem; counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: start; }
.step__n { font: 500 var(--step--2) / 1 var(--font-mono); letter-spacing: 0.1em; color: var(--muted); }
.step__title { font: 600 var(--step-1) / 1.15 var(--font-sans); color: var(--ink); margin: 0.15rem 0 0.35rem; }
.step__body { color: var(--text); }
.steps[data-synced] .step { transition: opacity 420ms var(--ease); }
.steps[data-synced] .step:not([data-active]) { opacity: 0.38; }
.steps[data-synced] .step[data-active] .p-stack { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .steps[data-synced] .step { transition: none; } }
.plainly { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-items: baseline; }
.plainly__k { font: 500 var(--step--2) / 1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); padding: 0.35em 0.5em; }
.plainly__v { color: var(--ink); font-weight: 500; }

/* ── Bill of materials ────────────────────────────── */
.bom { width: 100%; font: 400 var(--step--1) / 1.45 var(--font-sans); color: var(--text); }
.bom caption { text-align: left; padding-bottom: 0.6rem; }
.bom th, .bom td { text-align: left; vertical-align: baseline; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--rule); }
.bom thead th { font: 500 var(--step--2) / 1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--ink); }
.bom td:first-child, .bom th:first-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); width: 3.5rem; }
.bom .bom__name { color: var(--ink); font-weight: 600; white-space: nowrap; }
.bom .bom__status { font: 500 var(--step--2) / 1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.bom .bom__status::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.55em; border: 1px solid currentColor; vertical-align: 0.02em; background: currentColor; }
.bom tr[data-status="dev"] .bom__status { color: var(--muted); }
.bom tr[data-status="dev"] .bom__status::before { background: none; }
.bom-wrap { overflow-x: auto; max-width: 100%; }

/* ── Questions: collapsed rows, answers open on click ── */
.notes { display: grid; border-top: 1px solid var(--rule); }
.note { border-bottom: 1px solid var(--rule); }
.note__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  font: 500 var(--step-1) / 1.3 var(--font-sans); color: var(--ink);
}
.note__q::-webkit-details-marker { display: none; }
.note__q:focus-visible { outline-offset: 4px; }
.note__glyph { width: 14px; height: 14px; flex: none; transition: transform 240ms var(--ease); }
.note__glyph path { fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.note[open] .note__glyph { transform: rotate(45deg); }
.note__a { padding: 0 0 1.25rem; color: var(--text); max-width: 54ch; }
@media (prefers-reduced-motion: reduce) { .note__glyph { transition: none; } }

/* ── Uses list (definition rows) ──────────────────── */
.uses { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.use { display: grid; grid-template-columns: minmax(7.5rem, 12rem) 1fr; gap: 0.25rem 1.25rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.use__k { font: 500 var(--step--2) / 1.6 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.use__v { color: var(--ink); }
@media (max-width: 560px) { .use { grid-template-columns: 1fr; } }

/* ── Figure plate: bare on the page ground ────────── */
.plate { position: relative; margin: 0; min-width: 0; }
.plate .iso-plate {
  position: relative; padding: 52px 24px;
  background: transparent; box-shadow: none; border-radius: 0;
  --anatomy-paper: var(--paper); --anatomy-card: var(--paper);
}
.plate--boxed .iso-plate { background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); --anatomy-paper: var(--sheet); --anatomy-card: var(--sheet); }
.plate .iso-plate-corner { font-family: var(--font-mono); color: var(--muted); font-size: var(--step--2); }
.plate .iso-plate-corner[data-corner="fig"], .plate .iso-plate-corner[data-corner="readout"] { color: var(--ink); }
.plate .iso-legend { color: var(--muted); font-size: var(--step--1); }
.plate .iso-swatch path { stroke: var(--anatomy-hi); }
.plate .iso-swatch[data-mark="lit"] path { stroke: var(--anatomy-lit); stroke-width: 1.4; }
.plate .iso-swatch[data-mark="raised"] path { stroke: var(--anatomy-mid); }
.fig-pending {
  display: grid; place-items: center; aspect-ratio: var(--ar, 600 / 380);
  border: 1px dashed var(--rule); color: var(--muted);
  font: 500 var(--step--2) / 1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
/* A lazy stage holds its aspect ratio until its geometry arrives */
.fig-stage[data-pending] { aspect-ratio: var(--ar); }

/* Overlay in the figure's own viewBox, for leader and dimension lines that land on anchors */
.fig-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fig-overlay .ov-line { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig-overlay .ov-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ── Header and footer ────────────────────────────── */
.site-header {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 18px var(--gutter);
}
.site-logo { height: 26px; color: var(--ink); text-decoration: none; display: inline-flex; }
.site-logo svg { height: 26px; width: auto; }
.site-nav ul { display: flex; gap: 1.6rem; }
.site-nav a { font: 500 var(--step--2) / 1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding: 0.9em 0; display: inline-block; }
.site-nav a:hover { text-decoration: underline; }
.site-actions { display: flex; align-items: center; gap: 0.75rem; }
@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-actions .btn { padding-left: 1em; padding-right: 2.2em; }
}
@media (max-width: 420px) {
  .site-actions .theme-toggle .tt-word { display: none; }
}
.site-footer { padding: 64px var(--gutter) 40px; color: var(--muted); }
.smallprint { font: 400 var(--step--2) / 1.7 var(--font-mono); letter-spacing: 0.04em; color: var(--muted); }
.smallprint p { max-width: 46ch; }
.smallprint a { color: var(--ink); }
.btn--small { min-height: 40px; padding: 0.78em 2.2em 0.98em 1em; font-size: var(--step--2); }

/* ── layout s2 ── */
/* S2 · Interlock. Billboard-scale heavy condensed type that the figures pass through.
   Eight sheets: hero, freedom, account, rails, how, weights, notes, book.
   Scale contrast: giant numerals and headlines against 11px mono labels.
   Every colour is a token; the inverted sheet and the numeral windows mix the theme poles. */

.opt-s2 {
  /* The theme poles, resolved on body, for the inverted sheet and the numerals. */
  --s2-ink: var(--ink);
  --s2-paper: var(--paper);
  --s2-lit: var(--anatomy-lit);
  /* The plain figure tokens, kept so a figure inside the inverted sheet can un-invert. */
  --s2n-shade-0: var(--anatomy-shade-0);
  --s2n-shade-1: var(--anatomy-shade-1);
  --s2n-shade-2: var(--anatomy-shade-2);
  --s2n-shade-3: var(--anatomy-shade-3);
  --s2n-a-text: var(--anatomy-text);
  --s2n-a-strong: var(--anatomy-strong);
  --s2n-a-muted: var(--anatomy-muted);
  --s2n-a-face: var(--anatomy-face);
  --s2n-a-top: var(--anatomy-top);
  --s2n-a-lit-top: var(--anatomy-lit-top);
  --s2n-a-lit-shade: var(--anatomy-lit-shade);
  --s2n-a-hi: var(--anatomy-hi);
  --s2n-a-mid: var(--anatomy-mid);
  --s2n-a-lo: var(--anatomy-lo);
  --s2n-a-faint: var(--anatomy-faint);
  --s2n-a-dot: var(--anatomy-dot);
  /* The composition unit: a vw that also respects short screens, so each section's headline
     and figure share one screen from laptop to wall. */
  --u: min(1vw, 1.6svh);
  --s2-pad: clamp(88px, calc(8 * var(--u)), 180px);
  /* Ultrawide: the words keep a composition width (the frame); the extra width (--xs, zero
     up to about 2560 px) goes to the figure side: bigger numerals and figures that run to the
     screen edge. */
  --frame: calc(124 * var(--u));
  --side: max(var(--gutter), calc((100vw - var(--frame)) / 2));
  --xs: calc(var(--side) - var(--gutter));
}

/* ── Shared type ────────────────────────────────────── */
.opt-s2 .s2-h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  font: 900 var(--h2, calc(var(--h2k, 9.4) * var(--u) + 0.16 * var(--xs))) / 0.84 var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.006em;
  color: var(--ink);
  white-space: nowrap;
}
.opt-s2 .s2-hl { display: block; }
.opt-s2 .s2-line {
  margin-top: clamp(1.25rem, calc(2 * var(--u)), 2.75rem);
  max-width: 30ch;
  font: 400 calc(var(--step-1) + 0.016 * var(--xs)) / 1.4 var(--font-sans);
  color: var(--text);
}
.opt-s2 .s2-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }

/* ── Header and small controls: every tap target at least 44 px ── */
.opt-s2 .s2-header { position: relative; z-index: 30; }
.opt-s2 .site-logo,
.opt-s2 .site-nav a,
.opt-s2 .keylink { position: relative; }
.opt-s2 .site-logo::after { content: ""; position: absolute; inset: -9px -6px; }
.opt-s2 .site-nav a::after { content: ""; position: absolute; inset: -7px -6px; }
.opt-s2 .keylink::after { content: ""; position: absolute; inset: -13px -8px -11px; }
.opt-s2 .theme-toggle { min-width: 44px; justify-content: center; }

/* ── Hero: the interlock ────────────────────────────── */
/* Everything in the hero is set in units of F, the h1 size, so type and cuff keep one
   composition on every screen. F is capped by the height as well as the width, so the whole
   first screen (both lines, the line of copy, the button, the cuff) fits on a 3440 x 1300
   ultrawide and on a phone held sideways. Three arrangements of the same parts:
   band (default): the corner block sits in the band right of the cuff, line two runs under it;
   stacked (portrait, below 1180 px): the corner block goes under the type;
   column (ultrawide and short landscape): line two ends inside the screen and the corner block
   takes the column beside both lines. */
.opt-s2 .s2-hero {
  --hdr: 80px;
  /* --j: the joint, in F: line two sits this much lower than the 0.84 leading, so the comma
     that ends line one keeps a clear band of paper under it. The height cap counts the type
     down to the baseline of line two (top + 0.84 + j + 0.8055) plus a small margin. */
  --j: 0.13;
  --F: min(31vw, calc((100svh - var(--hdr) - 28px) / (1.7 + var(--j))));
  --lh: 0.84;
  --top: 0.03;               /* type top, in F, below the hero top */
  /* When the height caps F, the screen is wider than the poster in F units and the right-edge
     crop of line two would shrink until it cut the period in half. --s moves line two (and the
     cuff and its label with it) right, so the period stays cropped away as at 1440; past about
     13:7 line two ends inside the screen instead (below). */
  --s: clamp(0px, calc(100vw - 3.227 * var(--F)), calc(0.4 * var(--F)));
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(var(--top) * var(--F));
  padding-bottom: calc(0.03 * var(--F));
}
.opt-s2 .s2-type {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 var(--gutter);
  font: 900 var(--F) / var(--lh) var(--font-display);
  letter-spacing: -0.012em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  pointer-events: none;
}
.opt-s2 .s2-type .l { display: block; }
/* Set by the page when Big Shoulders failed to load: the fallback face is wider, so the hero
   line steps down by the measured difference (--fk) and "DECUFFED." keeps all its letters. */
.no-display-font .opt-s2 .s2-type { font-size: calc(var(--fk, 0.82) * var(--F)); }
.opt-s2 .s2-type .l1 { margin-left: -0.01em; }
.opt-s2 .s2-type .l2 { margin: calc(var(--j) * 1em) 0 0 calc(-1 * var(--gutter) - 0.24 * var(--F) + var(--s)); }
/* The comma of "AI,": its tail is cut level 0.055 F below the baseline (the baseline sits
   0.8055 em down the 0.84 em box), so with the joint it ends 0.115 F above the cap line of
   line two at every size: nothing of line one shows inside line two's band, and the comma
   reads as line one's punctuation, not as an accent on the C under it. */
.opt-s2 .s2-type .cm { display: inline-block; clip-path: inset(-0.5em -0.5em calc(100% - 0.8605em) -0.5em); }
/* A paper trap round line two: the cuff reads behind it. */
.opt-s2 .s2-h1 .l2,
.opt-s2 .s2-type--front .x {
  --t: 0.011em;
  --d: 0.0078em;
  text-shadow:
    var(--t) 0 0 var(--paper), calc(-1 * var(--t)) 0 0 var(--paper), 0 var(--t) 0 var(--paper), 0 calc(-1 * var(--t)) 0 var(--paper),
    var(--d) var(--d) 0 var(--paper), calc(-1 * var(--d)) var(--d) 0 var(--paper), var(--d) calc(-1 * var(--d)) 0 var(--paper), calc(-1 * var(--d)) calc(-1 * var(--d)) 0 var(--paper);
}
.opt-s2 .s2-type--front { position: absolute; left: 0; right: 0; top: calc(var(--top) * var(--F)); z-index: 4; }
.opt-s2 .s2-type--front .o { visibility: hidden; }

/* The cuff: back layer under the type, chain and tag over it. */
.opt-s2 .s2-hero__fig {
  position: absolute;
  left: calc(var(--hx) * var(--F) + var(--s));
  top: calc((var(--hy) + var(--top) + var(--j)) * var(--F));
  width: calc(var(--hw) * var(--F));
  --anatomy-paper: var(--paper);
  --anatomy-card: var(--paper);
}
.opt-s2 .s2-hero__stage { width: 100%; }
.opt-s2 .s2-hero__stage > .fig-back { position: relative; z-index: 1; }
.opt-s2 .s2-hero__stage > .fig-front { z-index: 3; }
.opt-s2 .s2-hero__fig .s2-pending { position: relative; z-index: 1; }
.opt-s2 .s2-hero__stage:focus-visible { outline-width: 2px; }

@media (min-aspect-ratio: 13/7) { .opt-s2 .s2-hero { --s: 0px; } }

/* Fig 1 and its live readout: a small cluster in the notch right of the "I", at the cap line
   of "AI,", on bare ground between the type and the hinge of the open jaw. It is set from the
   type (not from the drawing), so it stays clear of the swinging jaw however the cuff's plate
   is laid out; a phone held sideways, where that notch is too narrow, places it on the drawing
   instead (below). */
.opt-s2 .s2-hero__label {
  position: absolute;
  z-index: 6;
  left: calc(var(--gutter) + 0.7 * var(--F));
  top: calc((var(--top) + 0.0055) * var(--F));
  max-width: 17rem;
}
/* Two short lines, Fig 1 over the readout, so the cluster never reads as one row with the
   status line beside it. Phones set it as one row under the type. */
.opt-s2 .s2-corners--hero { flex-direction: column; align-items: flex-start; gap: 0.3rem; white-space: nowrap; }
.opt-s2 .s2-hero .s2-corners--hero [data-corner="readout"] { margin-left: 0; color: var(--ink); }
.opt-s2 .s2-hero:has(.s2-hero__stage:focus-visible) .s2-corners--hero { outline: 2px solid var(--focus); outline-offset: 6px; }

/* Corner block: the small print of the poster, top right. */
.opt-s2 .s2-hero__corner {
  position: absolute;
  z-index: 6;
  top: calc(var(--top) * var(--F) + 0.4rem);
  right: var(--gutter);
  /* wide enough for the button and the link on one row, so the link never drops onto the
     plate's back edge and the parts standing on it */
  width: clamp(21rem, 24vw, 23rem);
  display: grid;
  gap: 1.15rem;
}
.opt-s2 .s2-term { font-size: var(--step--1); }
/* The status is small print: on the band layout it reads after the line and the actions, so
   the one line a visitor needs comes first (phones put it under them too). The stacked layout
   (600-1179 px) sets it beside the line, and an ultrawide sets it apart at the top of its
   column. */
/* While hero-ask waits for its answer the corner holds its first paint (src/s2-home.jsx);
   it keeps its place, so nothing moves when it shows. */
.opt-s2 .s2-hero__corner[data-held] { visibility: hidden; }
/* The cuff's plate runs behind the corner block: its text is knocked out of the drawing. */
.opt-s2 .s2-hero__corner .s2-term,
.opt-s2 .s2-hero__corner .s2-lede,
.opt-s2 .s2-hero__corner .keylink,
.opt-s2 .s2-corners--hero { text-shadow: 0 0 2px var(--paper), 0 0 4px var(--paper), 0 0 8px var(--paper), 0 0 12px var(--paper); }
.opt-s2 .s2-hero__corner .keylink .key-glyph { filter: drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 0 3px var(--paper)); }
.opt-s2 .s2-lede { font: 500 var(--step-1) / 1.36 var(--font-sans); color: var(--ink); max-width: 24ch; }
.opt-s2 .s2-nb { white-space: nowrap; }

/* ── Hero: the composer ─────────────────────────────── */
/* One column, centred on a drafting grid that fades out from the middle: the live status,
   the headline, one line, the question box and three links. Asking opens the playground with
   the question in its composer (src/s2-home.jsx). */
.opt-s2 .s2-chat {
  /* H, the headline size, follows the width and the height; the box keeps to the headline's
     width (about 5.2 H) between a laptop's 50rem and an ultrawide's 62rem. */
  --H: min(16.5vw, 17svh, 15rem);
  --cw: min(100%, clamp(50rem, 5.2 * var(--H), 62rem));
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - 80px);
  padding: clamp(40px, 7svh, 96px) var(--gutter) clamp(56px, 12svh, 160px);
  overflow: clip;
  text-align: center;
}
.opt-s2 .s2-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--rule-soft) 1px, transparent 1px) 50% 50% / 48px 48px,
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px) 50% 50% / 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 46%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 58% at 50% 46%, #000 20%, transparent 100%);
  pointer-events: none;
}
/* The cuff: a still frame by the headline, set in H from the headline's box (the head), faded
   into the ground. */
.opt-s2 .s2-chat__head { position: relative; }
.opt-s2 .s2-chat__cuff {
  position: absolute;
  z-index: -1;
  left: calc(100% + var(--cuff-dx, 0.35) * var(--H));
  top: calc(var(--cuff-dy, 0.42) * var(--H));
  width: calc(var(--cuff-s, 2.5) * var(--H));
  aspect-ratio: 760 / 480;
  translate: -50% -50%;
  opacity: var(--cuff-o, 0.45);
  pointer-events: none;
  --anatomy-paper: var(--paper);
  --anatomy-card: var(--paper);
}
.opt-s2 .s2-chat__cuff > svg { display: block; width: 100%; height: auto; animation: s2-cuff-in 600ms var(--ease) both; }
@keyframes s2-cuff-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .opt-s2 .s2-chat__cuff > svg { animation: none; } }
/* Type over the drawing: a paper trap round the letters, as the poster hero had. */
.opt-s2 .s2-chat__h1 {
  --t: 0.011em;
  --d: 0.0078em;
  text-shadow:
    var(--t) 0 0 var(--paper), calc(-1 * var(--t)) 0 0 var(--paper), 0 var(--t) 0 var(--paper), 0 calc(-1 * var(--t)) 0 var(--paper),
    var(--d) var(--d) 0 var(--paper), calc(-1 * var(--d)) var(--d) 0 var(--paper), var(--d) calc(-1 * var(--d)) 0 var(--paper), calc(-1 * var(--d)) calc(-1 * var(--d)) 0 var(--paper);
}
.opt-s2 .s2-chat__lede,
.opt-s2 .s2-chat__links .keylink { text-shadow: 0 0 2px var(--paper), 0 0 4px var(--paper), 0 0 8px var(--paper), 0 0 12px var(--paper); }
.opt-s2 .s2-chat__links .keylink .key-glyph { filter: drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 0 3px var(--paper)); }
.opt-s2 .s2-chat__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: clamp(1.5rem, 4svh, 2.75rem);
  padding: 0.55em 0.9em;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--muted);
  font: 400 var(--step--2) / 1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.opt-s2 .s2-chat__status:hover { color: var(--ink); border-color: var(--ink); }
.opt-s2 .s2-chat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.opt-s2 .s2-chat__status[data-live] { color: var(--ink); }
.opt-s2 .s2-chat__status[data-live] .s2-chat__dot { background: var(--accent); box-shadow: 0 0 0 3px var(--selection); }
.opt-s2 .s2-chat__h1 {
  margin: 0;
  font: 900 var(--H) / 0.84 var(--font-display);
  letter-spacing: -0.012em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.no-display-font .opt-s2 .s2-chat__h1 { font-size: calc(var(--fk, 0.82) * var(--H)); }
.opt-s2 .s2-chat__lede {
  margin: clamp(1rem, 2.4svh, 1.6rem) 0 clamp(1.75rem, 4.5svh, 3rem);
  max-width: 34ch;
  font: 400 max(var(--step-1), 0.13 * var(--H)) / 1.4 var(--font-sans);
  color: var(--text);
  text-wrap: balance;
}
/* The question box: a sheet with crop marks, the field on top, the switch and Ask below. */
.opt-s2 .s2-chat__box {
  position: relative;
  width: var(--cw);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink);
  background: var(--sheet);
  text-align: left;
  transition: box-shadow 160ms var(--ease);
}
.opt-s2 .s2-chat__box:focus-within { box-shadow: 0 0 0 4px var(--selection); }
.opt-s2 .s2-chat__box .crops > i { border-color: var(--muted); }
.opt-s2 .s2-chat__box .crops > i:nth-child(1) { left: -5px; top: -5px; }
.opt-s2 .s2-chat__box .crops > i:nth-child(2) { right: -5px; top: -5px; }
.opt-s2 .s2-chat__box .crops > i:nth-child(3) { left: -5px; bottom: -5px; }
.opt-s2 .s2-chat__box .crops > i:nth-child(4) { right: -5px; bottom: -5px; }
.opt-s2 .s2-chat__fig {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.55rem);
  color: var(--muted);
  font: 400 var(--step--2) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.opt-s2 .s2-chat__input {
  display: block;
  width: 100%;
  min-height: 7.5rem;
  max-height: 40svh;
  field-sizing: content;
  margin: 0;
  padding: 1.1rem 1.2rem 0.4rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: 400 max(16px, var(--step-0)) / 1.5 var(--font-sans);
  resize: none;
  outline: none;
}
.opt-s2 .s2-chat__input::placeholder { color: var(--muted); opacity: 1; }
.opt-s2 .s2-chat__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.6rem 0.6rem 1.2rem;
}
.opt-s2 .s2-chat__send { margin-left: auto; }
/* Flagship: a switch, like a tag on the box's edge; pressed, its tick fills with the accent. */
.opt-s2 .s2-chat__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 36px;
  padding: 0 0.85em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font: 500 var(--step--2) / 1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.opt-s2 .s2-chat__chip:hover { color: var(--ink); border-color: var(--ink); }
.opt-s2 .s2-chat__chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.opt-s2 .s2-chat__tick { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; }
.opt-s2 .s2-chat__chip[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); background: var(--selection); }
.opt-s2 .s2-chat__chip[aria-pressed="true"] .s2-chat__tick { background: var(--accent); }
.opt-s2 .s2-chat__terms {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font: 400 var(--step--2) / 1.5 var(--font-sans);
  text-shadow: 0 0 2px var(--paper), 0 0 4px var(--paper), 0 0 8px var(--paper);
}
.opt-s2 .s2-chat__terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.opt-s2 .s2-chat__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  margin-top: clamp(1.25rem, 3svh, 2.25rem);
}
@media (max-width: 599px) {
  .opt-s2 .s2-chat { justify-content: flex-start; padding-top: 32px; padding-bottom: 72px; min-height: 0; }
  .opt-s2 .s2-chat { --H: 18vw; }
  .opt-s2 .s2-chat__box .crops { display: none; }
  .opt-s2 .s2-chat__input { min-height: 6rem; padding: 0.9rem 0.95rem 0.3rem; }
  .opt-s2 .s2-chat__bar { padding-left: 0.95rem; }
  .opt-s2 .s2-chat__links { flex-direction: column; align-items: center; gap: 1.25rem; }
}

/* home-short (experiment): while it waits for its answer, a screen of empty ground below
   the hero; then the three questions shown open, one line each. */
.opt-s2 .s2-held { min-height: 100svh; }
.opt-s2 .s2-notes--open .note { padding: 1.1rem 0 1.2rem; }
.opt-s2 .s2-notes--open .note__q { display: block; padding: 0 0 0.3rem; cursor: auto; }
.opt-s2 .s2-notes--open .note__a { padding: 0; }

/* mobile-sticky-cta (experiment): phones only. A slim bar in the thumb zone, above the home
   indicator; never over the menu or a survey card. */
.opt-s2 .s2-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--rule);
  animation: s2-sticky-in 200ms var(--ease) both;
}
.opt-s2 .s2-sticky__btn { width: 100%; min-height: 44px; justify-content: center; }
@keyframes s2-sticky-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .opt-s2 .s2-sticky { animation: none; } }
@media (min-width: 768px) { .opt-s2 .s2-sticky { display: none; } }
.menu-open .opt-s2 .s2-sticky,
:root:has(.survey) .opt-s2 .s2-sticky { display: none; }
/* Keyboard focus and in-page links stop above the bar while it shows. */
:root:has(.s2-sticky:not([hidden])) { scroll-padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

/* ── Label rows (plates) ────────────────────────────── */
.opt-s2 .s2-corners {
  position: relative; inset: auto;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.6rem;
}
/* 11px up to 2560 px; on an ultrawide the labels grow with the spare width (about 13px at
   3440), so the figure's narrator stays legible beside the larger figures. */
.opt-s2 .s2-corners { --lab: calc(var(--step--2) + 0.005 * var(--xs)); }
.opt-s2 .s2-corners .iso-plate-corner { position: static; font-size: var(--lab); }
.opt-s2 .s2-corners [data-corner="readout"] { margin-left: auto; }
.opt-s2 .s2-sep { display: none; font: 400 var(--lab, var(--step--2)) / 1 var(--font-mono); color: var(--muted); }

/* ── Numeral windows: display digits with a quiet echo of the figure inside ── */
/* Light theme: a solid ink digit, the echo inside it drawn in the inverted (dark) finish.
   Dark theme: the digit drops to a quiet shade one step off the ground and the echo is drawn in
   the dark finish, faint, so the figure in front stays the brightest drawing in the section.
   On the How sheet the digit is a quiet shade of the sheet and carries no echo: the cylinder and
   its steps lead. */
.opt-s2 .s2-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.opt-s2 .nw {
  position: relative;
  z-index: 1;
  height: var(--nh);
  width: calc(var(--nh) / var(--nk));
  pointer-events: none;
  --nw-fill: var(--paper);
  --nw-echo: 0.62;
}
.opt-s2 .nw__clip { position: absolute; inset: 0; overflow: hidden; background: var(--nw-fill); }
/* The echo is a <use> clone, so document rules cannot reach the halo inside it; its opacity is
   a custom property, which the clone inherits from here. No soft halo inside a digit. */
.opt-s2 .nw__echo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--nw-echo); --anatomy-halo-opacity: 0; }
.opt-s2 .s2-how .nw { --nw-fill: color-mix(in srgb, var(--I) 86%, var(--P)); }
.opt-s2 .s2-how .nw__echo { display: none; }

/* ── Plates: bare on the ground, one label row under the drawing ── */
.opt-s2 .s2-plate { position: relative; z-index: 3; max-width: 100%; }
.opt-s2 .s2-plate .iso-plate { padding: 0; }
.opt-s2 .s2-plate__fig { position: relative; }
.opt-s2 .s2-plate .s2-corners { margin-top: 1.1rem; }
.opt-s2 .s2-pending { aspect-ratio: var(--ar); border: 1px dashed var(--rule-soft); }
.opt-s2 .s2-plate .s2-pending { aspect-ratio: var(--tar); }

/* ── Sections ───────────────────────────────────────── */
/* The words sit in the frame (side padding --side); the figure side of each sheet keeps the
   gutter, so on an ultrawide the numeral and figure run to the screen edge and grow. */
.opt-s2 .s2-sec {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: var(--s2-pad) var(--side);
  overflow: clip;
}
.opt-s2 .s2-fig--l { padding-left: var(--gutter); }
.opt-s2 .s2-fig--r { padding-right: var(--gutter); }
.opt-s2 .s2-head { position: relative; z-index: 2; min-width: 0; }

/* One picture per figure section: the numeral off one edge, the whole figure standing in front
   of its lower half, the headline on the other side. All in one grid row. */
.opt-s2 .s2-fig { --nh: calc(27 * var(--u) + 0.5 * var(--xs)); --drop: calc(0.5 * var(--nh) - 0.45 * var(--xs)); align-items: start; }
.opt-s2 .s2-fig > * { grid-row: 1; }
.opt-s2 .s2-fig--l > .nw { grid-column: 1 / 7; justify-self: start; margin-left: calc(-1 * var(--gutter) - 3 * var(--u)); }
.opt-s2 .s2-fig--r > .nw { grid-column: 7 / 13; justify-self: end; margin-right: calc(-1 * var(--gutter) - 3 * var(--u)); }
.opt-s2 .s2-fig--l > .s2-head { grid-column: 8 / 13; }
.opt-s2 .s2-fig--r > .s2-head { grid-column: 1 / 7; }
.opt-s2 .s2-fig > .s2-plate { grid-column: 1 / 13; margin-top: var(--drop); }
.opt-s2 .s2-fig--l > .s2-plate { justify-self: start; }
.opt-s2 .s2-fig--r > .s2-plate { justify-self: end; }
/* Plate widths: 54 units, plus the ultrawide's extra width, never taller than about 58% of the
   screen (the ratio is the drawn bounds of each figure). */
.opt-s2 .s2-plate { --pw: calc(54 * var(--u) + 1.2 * var(--xs)); width: min(var(--pw), calc(58svh * var(--par))); }

/* 02 · freedom: the long slide sweeps down from the numeral, under the headline */
.opt-s2 .s2-free__plate { --par: 2.26; }
/* 03 · account */
.opt-s2 .s2-acct { --h2k: 10.4; }
.opt-s2 .s2-acct__plate { --par: 1.82; }
/* 04 · rails: the cliff road stands in front of a solid digit (the drawing runs in a frame, so
   there is no echo to show through it) */
.opt-s2 .s2-rails { --h2k: 10; }
.opt-s2 .s2-rails__plate { --par: 1.19; }
/* 05 · how it works: the inverted sheet; the steps under the headline, beside the cylinder */
.opt-s2 .s2-how { grid-template-rows: auto 1fr; --h2k: 9; }
/* "Designed / to keep / nothing / you say." in four lines, each no wider than "Designed";
   a wide, short screen (an ultrawide) has room for "Designed to / keep nothing / you say."
   and wraps rather than crops if it doesn't. Free wrapping at laptop widths left "to" alone
   on a line. */
.opt-s2 .s2-how .s2-br-w { display: none; }
@media (min-width: 2400px) and (min-aspect-ratio: 2/1) {
  .opt-s2 .s2-how .s2-hl { white-space: normal; }
  .opt-s2 .s2-how .s2-br-n { display: none; }
  .opt-s2 .s2-how .s2-br-w { display: inline; }
}
.opt-s2 .s2-how > .nw, .opt-s2 .s2-how > .s2-plate { grid-row: 1 / 3; }
.opt-s2 .s2-how__plate { --par: 1.71; }
.opt-s2 .s2-how > .s2-how__steps { grid-column: 8 / 13; grid-row: 2; margin-top: calc(4 * var(--u)); gap: calc(2 * var(--u)); }
.opt-s2 .s2-how__steps .step { display: block; }
.opt-s2 .s2-how__steps .step__n { display: none; }
.opt-s2 .s2-how__steps .step__title { margin: 0 0 0.35rem; font: 900 calc(var(--step-2) + 0.02 * var(--xs)) / 0.9 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.opt-s2 .s2-how__steps .step__body { max-width: 28ch; color: var(--text); font-size: calc(var(--step-0) + 0.012 * var(--xs)); }
/* 06 · open weights: the set stands in front of the numeral's lower left */
.opt-s2 .s2-fig > .s2-wts__plate { grid-column: 1 / 12; --pw: calc(38 * var(--u) + 0.4 * var(--xs)); --par: 0.97; width: min(var(--pw), calc(64svh * var(--par))); margin-top: calc(0.45 * var(--nh) - 0.45 * var(--xs)); margin-right: calc(0.3 * var(--nh)); }

/* 07 · notes: a section-size headline, the three questions beside it */
.opt-s2 .s2-notes { align-items: start; }
.opt-s2 .s2-notes__head { grid-column: 1 / 7; grid-row: 1; }
.opt-s2 .s2-notes__list { grid-column: 7 / 13; grid-row: 1; margin-top: calc(0.4 * var(--u)); }
.opt-s2 .s2-notes .note__q { font-size: calc(var(--step-1) + 0.014 * var(--xs)); }

/* 08 · book: the page's largest headline after the hero. The cuff rings run in from the left
   edge and are clipped one gutter short of the headline, so the freed ring slides out of view
   behind the type at one clean edge and nothing shows inside the letters. */
.opt-s2 .s2-book { --h2k: 20; grid-template-rows: auto auto auto; padding-bottom: calc(var(--s2-pad) * 0.9); }
.opt-s2 .s2-book__art {
  grid-column: 1 / 6; grid-row: 1 / 4; align-self: center; z-index: 1;
  container-type: inline-size; overflow: clip; pointer-events: none;
}
.opt-s2 .s2-book__head { grid-column: 6 / 13; grid-row: 1; justify-self: start; }
.opt-s2 .s2-book__line { grid-column: 6 / 13; grid-row: 2; position: relative; z-index: 2; }
.opt-s2 .s2-book__cta { grid-column: 6 / 13; grid-row: 3; position: relative; z-index: 2; margin-top: calc(2rem + 0.02 * var(--xs)); }
/* The closing action grows with the spare width on an ultrawide, as the hero's does (its
   padding is in em, so the key blade scales with the type). */
.opt-s2 .s2-book__cta .btn { font-size: min(1.125rem, calc(var(--step--1) + 0.008 * var(--xs))); }
/* The rings, at S1's fine grid, large beside the headline. While the rings are linked the
   150 x 28 scene uses columns 33 to 100 and the 80 x 16 scene columns 17 to 53, so each is
   cropped and sized so the linked pair fills its column; when the freed ring slides away it
   leaves through the column's clean right edge (overflow clip), never into the letters.
   Rows keep their height from the first paint, so the page does not shift when the live
   frames take over from the built one. */
.opt-s2 .s2-book__shader { line-height: 1.15; color: var(--muted); width: max-content; height: calc(var(--rows) * 1.15em); }
.opt-s2 .s2-book__shader--wide { --rows: 28; --ascii-size: min(100cqw / 42, (100svh - 160px) / 32.2); margin-left: -19.2em; }
.opt-s2 .s2-book__shader--narrow { --rows: 16; display: none; }
/* Light-on-dark characters read thinner: the dark theme sets them in the body ink. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .opt-s2 .s2-book__shader { color: var(--text); } }
:root[data-theme="dark"] .opt-s2 .s2-book__shader { color: var(--text); }

/* ── Footer ─────────────────────────────────────────── */
.opt-s2 .s2-footer {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end;
  border-top: 1px solid var(--rule); margin: 0 var(--side); padding: 48px 0 40px;
}
.opt-s2 .s2-footer .site-footer__logo { grid-column: 1 / 4; margin: 0; --logo-h: 92px; }
.opt-s2 .s2-footer .smallprint { grid-column: 10 / 13; justify-self: end; text-align: right; }

/* ── Narrower screens ───────────────────────────────── */
/* Stacked: below 1180px the corner block leaves the band and goes under the type; the cuff
   takes its narrow placement and grows into the free band right of "AI,". The type sits a
   little lower so the whole drawing clears the header. */
@media (max-width: 1179px) {
  .opt-s2 .s2-hero { --top: 0.32; --F: min(31vw, 66svh, calc((100svh - var(--hdr) - 330px) / (1.9 + var(--j)))); --s: 0px; padding-bottom: 0; }
  .opt-s2 .s2-hero__fig {
    left: calc(var(--hx-n) * var(--F) + var(--s));
    top: calc((var(--hy-n) + var(--top) + var(--j)) * var(--F));
    width: calc(var(--hw-n) * var(--F));
  }
  /* the cuff is set large beside "AI,", so Fig 1 and the readout run as one row under the type */
  .opt-s2 .s2-hero__label { position: relative; left: auto; top: auto; max-width: none; padding: 0 var(--gutter); margin-top: calc(0.12 * var(--F)); }
  .opt-s2 .s2-corners--hero { flex-direction: row; align-items: baseline; gap: 0; }
  .opt-s2 .s2-corners--hero .s2-sep { display: inline; margin: 0 0.6em; }
  .opt-s2 .s2-hero__corner {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin: 1.75rem var(--gutter) 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 1.4rem;
  }
  .opt-s2 .s2-hero__corner .s2-lede { grid-column: 1 / 8; grid-row: 1; font-size: var(--step-2); max-width: 22ch; }
  .opt-s2 .s2-hero__corner .s2-term { grid-column: 8 / 13; grid-row: 1; align-self: end; justify-self: end; }
  .opt-s2 .s2-hero__corner .s2-ctas { grid-column: 1 / 13; grid-row: 2; }
}

/* One column: phones, and tablets held upright. The headline and its line, then the picture
   (the numeral off one edge with the figure standing in front of its lower half). A phone held
   sideways keeps the two-column sheets, which fit its short screen. */
@media (max-width: 899px) and (orientation: portrait), (max-width: 599px) {
  .opt-s2 { --s2-pad: clamp(72px, 13vw, 104px); }
  .opt-s2 .s2-sec { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .opt-s2 .s2-sec > * { grid-column: 1 !important; grid-row: auto !important; margin-top: 0; }
  .opt-s2 .s2-fig { --nh: 56vw; --h2: 19.5vw; }
  .opt-s2 .s2-fig > .s2-head { order: -1; margin-bottom: 11vw; }
  .opt-s2 .s2-fig--l > .nw { justify-self: start; margin-left: calc(-1 * var(--gutter) - 7vw); }
  .opt-s2 .s2-fig--r > .nw { justify-self: end; margin-right: calc(-1 * var(--gutter) - 7vw); }
  /* every plate spans the column, so its label row runs gutter to gutter; the drawing itself
     can be narrower (the weights set) */
  .opt-s2 .s2-fig > .s2-plate { width: 100%; margin-top: calc(-0.5 * var(--nh)); }
  .opt-s2 .s2-fig > .s2-wts__plate { width: 100%; margin-top: calc(-0.55 * var(--nh)); margin-right: 0; }
  .opt-s2 .s2-wts__plate .s2-plate__fig { width: min(84%, 30rem); margin-left: auto; }
  .opt-s2 .s2-acct { --h2: 21vw; }
  .opt-s2 .s2-rails { --h2: 21vw; }
  .opt-s2 .s2-wts { --h2: 18vw; }
  .opt-s2 .s2-how > .s2-how__steps { margin-top: 10vw; gap: 1.8rem; }
  .opt-s2 .s2-line { max-width: 28ch; }
  .opt-s2 .s2-notes { --h2: 18vw; }
  .opt-s2 .s2-notes__list { margin-top: 2.5rem !important; }
  /* the close: "BOOK A / DEMO.", then the rings under it, then the line and the button */
  .opt-s2 .s2-book { --h2: 30vw; }
  .opt-s2 .s2-book__art { order: 0; margin-top: 1.75rem; justify-self: stretch; }
  .opt-s2 .s2-book__head { order: -1; }
  .opt-s2 .s2-book__line { order: 1; margin-top: 0.5rem; }
  .opt-s2 .s2-book__cta { order: 2; }
  .opt-s2 .s2-book__shader--wide { display: none; }
  .opt-s2 .s2-book__shader--narrow { display: block; --ascii-size: calc(100cqw / 23.4); margin-left: -9.6em; }
  .opt-s2 .s2-footer { grid-template-columns: 1fr auto; row-gap: 2rem; }
  .opt-s2 .s2-footer .site-footer__logo { grid-column: 1; --logo-h: 76px; }
  .opt-s2 .s2-footer .smallprint { grid-column: 2; }
}
/* Phones, upright or sideways, and tablets upright: every label row is one row, "Fig n ·
   readout"; the caps title stays in the page for screen readers only. */
@media (max-width: 899px) and (orientation: portrait), (max-width: 599px), (orientation: landscape) and (max-height: 560px) {
  .opt-s2 .s2-plate .s2-corners { margin-top: 1rem; gap: 0; flex-wrap: nowrap; white-space: nowrap; }
  .opt-s2 .s2-plate [data-corner="title"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .opt-s2 .s2-plate .s2-sep { display: inline; margin: 0 0.6em; }
  .opt-s2 .s2-plate [data-corner="readout"] { margin-left: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* A phone held sideways: the plates are narrow, so Fig n sits over the readout (as in the hero
   cluster) and the readout has the plate's whole width; it wraps rather than being cut. */
@media (orientation: landscape) and (max-height: 560px) {
  .opt-s2 .s2-plate .s2-corners { flex-direction: column; align-items: flex-start; gap: 0.3rem; white-space: normal; }
  .opt-s2 .s2-plate .s2-sep { display: none; }
  .opt-s2 .s2-plate [data-corner="readout"] { overflow: visible; text-overflow: clip; }
}
/* Tablets upright: the one-column sheet keeps phone proportions but stops growing, so the
   headline and its picture still share one screen. */
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
  .opt-s2 .s2-fig { --nh: min(56vw, 300px); --h2: min(19.5vw, 6.75rem); }
  .opt-s2 .s2-acct { --h2: min(21vw, 7.25rem); }
  .opt-s2 .s2-rails { --h2: min(21vw, 7.25rem); }
  .opt-s2 .s2-wts { --h2: min(18vw, 6.25rem); }
  .opt-s2 .s2-notes { --h2: min(18vw, 6.25rem); }
  .opt-s2 .s2-fig > .s2-head { margin-bottom: 3.5rem; }
  .opt-s2 .s2-plate__fig { width: min(100%, 34rem); }
  .opt-s2 .s2-fig--l > .s2-plate .s2-plate__fig { margin-left: 4vw; }
  .opt-s2 .s2-fig--r > .s2-plate .s2-plate__fig { margin-left: auto; margin-right: 4vw; }
  .opt-s2 .s2-wts__plate .s2-plate__fig { width: min(84%, 22rem); }
  .opt-s2 .s2-book { --h2: min(30vw, 11rem); }
}
/* Phones: the open cuff set large in the band right of "AI," (the closed cuff runs off the right
   edge), with --top leaving the open jaw room above the type; Fig 1 and the readout sit under
   the type. */
@media (max-width: 599px) {
  .opt-s2 .s2-hero { --top: 0.47; }
  .opt-s2 .s2-hero__fig {
    left: calc(var(--hx-p) * var(--F) + var(--s));
    top: calc((var(--hy-p) + var(--top) + var(--j)) * var(--F));
    width: calc(var(--hw-p) * var(--F));
  }
  .opt-s2 .s2-hero__label { position: relative; left: auto; top: auto; max-width: none; padding: 0 var(--gutter); margin-top: calc(0.16 * var(--F)); }
  .opt-s2 .s2-corners--hero { flex-direction: row; align-items: baseline; gap: 0; }
  .opt-s2 .s2-corners--hero .s2-sep { display: inline; margin: 0 0.6em; }
  .opt-s2 .s2-hero__corner { grid-template-columns: 1fr; row-gap: 1.2rem; margin-top: 2rem; }
  .opt-s2 .s2-hero__corner > * { grid-column: 1 / -1 !important; grid-row: auto !important; justify-self: start !important; }
  .opt-s2 .s2-hero__corner .s2-lede { font-size: var(--step-1); }
  /* the status is small print: it goes under the buttons, so the one line a visitor needs
     comes straight after the headline and the figure's narrator */
  .opt-s2 .s2-hero__corner .s2-term { order: 1; margin-top: 0.8rem; }
}

/* Column: an ultrawide (wider than about 11:5) or a phone held sideways. Line two ends inside
   the screen, so the corner block takes the column beside both lines, its status at the cap
   line of "AI," and its line and button standing on the baseline of "DECUFFED.". F is capped
   by the height and by the room the column needs. */
@media (min-aspect-ratio: 11/5), (orientation: landscape) and (max-height: 560px) {
  .opt-s2 .s2-hero {
    --colw: clamp(14.5rem, 26vw, 36rem);
    --top: 0.03;
    --s: 0px;
    --F: min(31vw, calc((100svh - var(--hdr) - 28px) / (1.7 + var(--j))), calc((100vw - var(--colw) - 3 * var(--gutter)) / 3.5));
    padding-bottom: calc(0.03 * var(--F));
  }
  .opt-s2 .s2-hero__fig {
    left: calc(var(--hx) * var(--F) + var(--s));
    top: calc((var(--hy) + var(--top) + var(--j)) * var(--F));
    width: calc(var(--hw) * var(--F));
  }
  .opt-s2 .s2-hero__label { position: absolute; padding: 0; max-width: 17rem; left: calc(var(--gutter) + 0.7 * var(--F)); top: calc((var(--top) + 0.0055) * var(--F)); margin: 0; }
  .opt-s2 .s2-corners--hero { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .opt-s2 .s2-corners--hero .s2-sep { display: none; }
  .opt-s2 .s2-hero__corner {
    position: absolute;
    top: calc((var(--top) + 0.01) * var(--F));
    left: calc(3.5 * var(--F) + 2 * var(--gutter));
    right: var(--gutter);
    height: calc((1.635 + var(--j)) * var(--F));
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.6rem, calc(0.03 * var(--F)), 2rem);
  }
  .opt-s2 .s2-hero__corner .s2-term { order: -1; align-self: flex-start; justify-self: auto; font-size: clamp(0.75rem, calc(0.023 * var(--F)), 1.125rem); }
  .opt-s2 .s2-hero__corner .s2-lede { margin-top: auto; font-size: clamp(1rem, calc(0.066 * var(--F)), 3rem); line-height: 1.24; max-width: 17ch; }
  .opt-s2 .s2-hero__corner .s2-ctas { margin-top: clamp(0.25rem, calc(0.03 * var(--F)), 2.25rem); gap: 0.9rem 1.6rem; }
  .opt-s2 .s2-hero__corner .btn { font-size: clamp(var(--step--1), calc(0.024 * var(--F)), 1.125rem); }
  .opt-s2 .s2-hero__corner .keylink { font-size: clamp(var(--step--1), calc(0.022 * var(--F)), 1.0625rem); }
}
/* A phone held sideways: the corner block is tight, so its type steps down. */
@media (orientation: landscape) and (max-height: 560px) {
  .opt-s2 .s2-hero__label { left: calc(var(--lx) * var(--F) + var(--s)); top: calc((var(--ly) + var(--top) + var(--j)) * var(--F)); }
  .opt-s2 .s2-hero__corner .s2-lede { font-size: 1rem; line-height: 1.3; }
  .opt-s2 .s2-hero__corner .s2-ctas { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ── Inverted fields: the How sheet and the numeral windows ── */
/* Light theme: the field takes the dark pole. Mixes run from the ink pole I to the paper pole P. */
.opt-s2 .s2-inv,
.opt-s2 .nw {
  --I: var(--s2-ink);
  --P: var(--s2-paper);
  --paper: var(--I);
  --sheet: color-mix(in srgb, var(--I) 95%, var(--P));
  --ink: var(--P);
  --text: color-mix(in srgb, var(--I) 17%, var(--P));
  --muted: color-mix(in srgb, var(--I) 38%, var(--P));
  --quiet: color-mix(in srgb, var(--I) 58%, var(--P));
  --rule: color-mix(in srgb, var(--I) 80%, var(--P));
  --rule-soft: color-mix(in srgb, var(--I) 90%, var(--P));
  --grid: color-mix(in srgb, var(--P) 5%, transparent);
  --texture: color-mix(in srgb, var(--P) 6%, transparent);
  --shade-0: color-mix(in srgb, var(--I) 98.2%, var(--P));
  --shade-1: color-mix(in srgb, var(--I) 96.8%, var(--P));
  --shade-2: color-mix(in srgb, var(--I) 95.5%, var(--P));
  --shade-3: color-mix(in srgb, var(--I) 94.1%, var(--P));
  --anatomy-shade-0: var(--shade-0);
  --anatomy-shade-1: var(--shade-1);
  --anatomy-shade-2: var(--shade-2);
  --anatomy-shade-3: var(--shade-3);
  --anatomy-text: color-mix(in srgb, var(--I) 36%, var(--P));
  --anatomy-strong: color-mix(in srgb, var(--I) 6%, var(--P));
  --anatomy-muted: color-mix(in srgb, var(--I) 47%, var(--P));
  --anatomy-face: color-mix(in srgb, var(--I) 92.8%, var(--P));
  --anatomy-top: color-mix(in srgb, var(--I) 92.3%, var(--P));
  --anatomy-lit-top: color-mix(in srgb, var(--I) 87.8%, var(--P));
  --anatomy-lit-shade: color-mix(in srgb, var(--I) 91.9%, var(--P));
  --anatomy-hi: color-mix(in srgb, var(--I) 13.5%, var(--P));
  --anatomy-mid: color-mix(in srgb, var(--I) 61%, var(--P));
  --anatomy-lo: color-mix(in srgb, var(--I) 81%, var(--P));
  --anatomy-faint: color-mix(in srgb, var(--I) 90%, var(--P));
  --anatomy-lit: var(--P);
  --anatomy-halo: var(--s2-lit);
  --anatomy-halo-opacity: 0.9;
  --anatomy-dot: color-mix(in srgb, var(--I) 12%, var(--P));
  --anatomy-page: var(--paper);
  --anatomy-card: var(--paper);
  --anatomy-paper: var(--paper);
  --focus: var(--P);
  --selection: color-mix(in srgb, var(--P) 22%, transparent);
  color-scheme: dark;
}
.opt-s2 .s2-inv { background: var(--paper); color: var(--text); }
/* Dark theme, the How sheet: the field takes the light pole, its faces the lit pole. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .opt-s2 .s2-inv {
    --sheet: color-mix(in srgb, var(--I), var(--s2-lit) 50%);
    --text: color-mix(in srgb, var(--I) 13%, var(--P));
    --muted: color-mix(in srgb, var(--I) 37%, var(--P));
    --quiet: color-mix(in srgb, var(--I) 56%, var(--P));
    --rule: color-mix(in srgb, var(--I) 82%, var(--P));
    --rule-soft: color-mix(in srgb, var(--I) 92%, var(--P));
    --grid: color-mix(in srgb, var(--P) 6%, transparent);
    --texture: color-mix(in srgb, var(--P) 7.5%, transparent);
    --shade-0: color-mix(in srgb, var(--I) 92%, var(--P));
    --shade-1: color-mix(in srgb, var(--I) 96%, var(--P));
    --shade-2: var(--I);
    --shade-3: color-mix(in srgb, var(--I), var(--s2-lit) 40%);
    --anatomy-text: color-mix(in srgb, var(--I) 34%, var(--P));
    --anatomy-strong: color-mix(in srgb, var(--I) 3%, var(--P));
    --anatomy-muted: color-mix(in srgb, var(--I) 44%, var(--P));
    --anatomy-face: var(--s2-lit);
    --anatomy-top: var(--s2-lit);
    --anatomy-lit-top: var(--s2-lit);
    --anatomy-lit-shade: color-mix(in srgb, var(--I), var(--s2-lit) 10%);
    --anatomy-hi: color-mix(in srgb, var(--I) 12%, var(--P));
    --anatomy-mid: color-mix(in srgb, var(--I) 56%, var(--P));
    --anatomy-lo: color-mix(in srgb, var(--I) 75%, var(--P));
    --anatomy-faint: color-mix(in srgb, var(--I) 89%, var(--P));
    --anatomy-halo: color-mix(in srgb, var(--I) 56%, var(--P));
    --anatomy-halo-opacity: 0.32;
    --anatomy-dot: color-mix(in srgb, var(--I) 20%, var(--P));
    --selection: color-mix(in srgb, var(--P) 16%, transparent);
    color-scheme: light;
  }
  /* Dark theme numerals outside the How sheet: the poles swap back, so the echo takes the dark
     finish, and the digit is a quiet shade just off the ground. */
  :root:not([data-theme="light"]) .opt-s2 .s2-sec:not(.s2-inv) > .nw {
    --I: var(--s2-paper);
    --P: var(--s2-ink);
    --nw-fill: color-mix(in srgb, var(--s2-paper) 87%, var(--s2-ink));
    --nw-echo: 0.34;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] .opt-s2 .s2-inv {
  --sheet: color-mix(in srgb, var(--I), var(--s2-lit) 50%);
  --text: color-mix(in srgb, var(--I) 13%, var(--P));
  --muted: color-mix(in srgb, var(--I) 37%, var(--P));
  --quiet: color-mix(in srgb, var(--I) 56%, var(--P));
  --rule: color-mix(in srgb, var(--I) 82%, var(--P));
  --rule-soft: color-mix(in srgb, var(--I) 92%, var(--P));
  --grid: color-mix(in srgb, var(--P) 6%, transparent);
  --texture: color-mix(in srgb, var(--P) 7.5%, transparent);
  --shade-0: color-mix(in srgb, var(--I) 92%, var(--P));
  --shade-1: color-mix(in srgb, var(--I) 96%, var(--P));
  --shade-2: var(--I);
  --shade-3: color-mix(in srgb, var(--I), var(--s2-lit) 40%);
  --anatomy-text: color-mix(in srgb, var(--I) 34%, var(--P));
  --anatomy-strong: color-mix(in srgb, var(--I) 3%, var(--P));
  --anatomy-muted: color-mix(in srgb, var(--I) 44%, var(--P));
  --anatomy-face: var(--s2-lit);
  --anatomy-top: var(--s2-lit);
  --anatomy-lit-top: var(--s2-lit);
  --anatomy-lit-shade: color-mix(in srgb, var(--I), var(--s2-lit) 10%);
  --anatomy-hi: color-mix(in srgb, var(--I) 12%, var(--P));
  --anatomy-mid: color-mix(in srgb, var(--I) 56%, var(--P));
  --anatomy-lo: color-mix(in srgb, var(--I) 75%, var(--P));
  --anatomy-faint: color-mix(in srgb, var(--I) 89%, var(--P));
  --anatomy-halo: color-mix(in srgb, var(--I) 56%, var(--P));
  --anatomy-halo-opacity: 0.32;
  --anatomy-dot: color-mix(in srgb, var(--I) 20%, var(--P));
  --selection: color-mix(in srgb, var(--P) 16%, transparent);
  color-scheme: light;
}
:root[data-theme="dark"] .opt-s2 .s2-sec:not(.s2-inv) > .nw {
  --I: var(--s2-paper);
  --P: var(--s2-ink);
  --nw-fill: color-mix(in srgb, var(--s2-paper) 87%, var(--s2-ink));
  --nw-echo: 0.34;
  color-scheme: dark;
}
/* Light theme, the How sheet: the cylinder keeps the porcelain finish of every other figure
   (white faces, dark outlines) on the dark field, so the page's key figure is its clearest. */
@media not all and (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) .opt-s2 .s2-inv .s2-plate {
    --anatomy-shade-0: var(--s2n-shade-0);
    --anatomy-shade-1: var(--s2n-shade-1);
    --anatomy-shade-2: var(--s2n-shade-2);
    --anatomy-shade-3: var(--s2n-shade-3);
    --anatomy-text: var(--s2n-a-text);
    --anatomy-strong: var(--s2n-a-strong);
    --anatomy-muted: var(--s2n-a-muted);
    --anatomy-face: var(--s2n-a-face);
    --anatomy-top: var(--s2n-a-top);
    --anatomy-lit-top: var(--s2n-a-lit-top);
    --anatomy-lit-shade: var(--s2n-a-lit-shade);
    --anatomy-hi: var(--s2n-a-hi);
    --anatomy-mid: var(--s2n-a-mid);
    --anatomy-lo: var(--s2n-a-lo);
    --anatomy-faint: var(--s2n-a-faint);
    --anatomy-lit: var(--s2-lit);
    --anatomy-dot: var(--s2n-a-dot);
  }
  :root:not([data-theme="dark"]) .opt-s2 .s2-inv .s2-plate .iso-plate { --anatomy-paper: var(--s2-paper); --anatomy-card: var(--s2-paper); }
  :root:not([data-theme="dark"]) .opt-s2 .s2-inv .s2-plate .iso-halo { display: none; }
}
:root[data-theme="light"] .opt-s2 .s2-inv .s2-plate {
  --anatomy-shade-0: var(--s2n-shade-0);
  --anatomy-shade-1: var(--s2n-shade-1);
  --anatomy-shade-2: var(--s2n-shade-2);
  --anatomy-shade-3: var(--s2n-shade-3);
  --anatomy-text: var(--s2n-a-text);
  --anatomy-strong: var(--s2n-a-strong);
  --anatomy-muted: var(--s2n-a-muted);
  --anatomy-face: var(--s2n-a-face);
  --anatomy-top: var(--s2n-a-top);
  --anatomy-lit-top: var(--s2n-a-lit-top);
  --anatomy-lit-shade: var(--s2n-a-lit-shade);
  --anatomy-hi: var(--s2n-a-hi);
  --anatomy-mid: var(--s2n-a-mid);
  --anatomy-lo: var(--s2n-a-lo);
  --anatomy-faint: var(--s2n-a-faint);
  --anatomy-lit: var(--s2-lit);
  --anatomy-dot: var(--s2n-a-dot);
}
:root[data-theme="light"] .opt-s2 .s2-inv .s2-plate .iso-plate { --anatomy-paper: var(--s2-paper); --anatomy-card: var(--s2-paper); }
:root[data-theme="light"] .opt-s2 .s2-inv .s2-plate .iso-halo { display: none; }