/* ============================================================================
   Patchbay · RoachNet's design system, as it runs on roachnet.org/docs.
   It sits on the shared RoachWares system (rw-system/): the faces come from
   rw-system/fonts, the page colours from the theme on <html> (rw-themes.css),
   and the kernel ramp, type scale, space and motion from tokens/foundation.css.
   What stays here is Patchbay's own: the cords, the mosaic, the dock, the roach.
   ============================================================================ */
/* ============================================================================
   PATCHBAY · the docs are a patchbay. Seven chapters are coloured modules locked into a
   pinwheel mosaic around one violet keystone, and every page wears its chapter's patch cord,
   a ground and an ink of one hue.
   The cords keep their grounds and inks in every theme; the page around them, and the accents
   that set cord colours as text on it, follow the theme. scripts/build-docs.mjs computes every
   pair below in every theme and fails the build under WCAG AA.
   ============================================================================ */
:root {
  /* Kernel violet #703093 and its ramp: the system's --rw-kernel-*, under Patchbay's short names */
  --k-50: var(--rw-kernel-50); --k-100: var(--rw-kernel-100); --k-200: var(--rw-kernel-200);
  --k-300: var(--rw-kernel-300); --k-400: var(--rw-kernel-400); --k-500: var(--rw-kernel-500);
  --k-600: var(--rw-kernel-600); --k-700: var(--rw-kernel-700); --k-800: var(--rw-kernel-800);
  --k-900: var(--rw-kernel-900); --k-950: var(--rw-kernel-950);
  --kernel-glow: var(--k-500);
  --kernel-press: var(--k-700);
  --kernel-deep: var(--k-800);
  --kernel-lit: radial-gradient(120% 95% at 22% 0%, color-mix(in srgb, var(--k-500) 78%, transparent), transparent 62%), var(--k-600);
  --grad-kernel: linear-gradient(135deg, var(--k-500), var(--k-600) 52%, var(--k-800));

  /* Patch cords: a ground and an ink of one hue, the same in every theme */
  --signal: #36ff84;  --signal-ink: #00391a;
  --lemon: #ffd43b;   --lemon-ink: #3d2e00;
  --cyan: #48e6ff;    --cyan-ink: #003a47;
  --amber: #ff9a45;   --amber-ink: #3f1a00;
  --ice: #d9deff;     --ice-ink: #1a2163;
  --pink: #ff8fcb;    --pink-ink: #570a35;
  --blue: #4d8dff;    --blue-ink: #04173f;
  --kernel: var(--k-600); --kernel-ink: #f7eeff;
  /* Fixed grounds: the hover ground a module turns to, the console, and the hazard fill */
  --hover-ground: #0b0a12;
  --console: #0b0a12; --console-text: #ecebf4; --console-soft: #8e8ba4; --console-out: #bdbacd;
  --hazard-fill: #c42d1c; --on-hazard: #ffffff;

  /* Type: the system's three faces */
  --font-display: var(--rw-font-display);
  --font-text: var(--rw-font-text);
  --font-mono: var(--rw-font-mono);
  --font-wordmark: var(--font-display);
  --t-mega: var(--rw-t-mega);
  --t-display: var(--rw-t-display);
  --t-statement: var(--rw-t-statement);
  --t-h1: var(--rw-t-h1);
  --t-h2: var(--rw-t-h2);
  --t-h3: var(--rw-t-h3);
  --t-body: var(--rw-t-body);
  --t-small: var(--rw-t-small);
  --t-micro: 0.7rem;
  --measure: var(--rw-measure);

  /* Space, shape, motion: the system's scales (durations go to 0 ms with Reduce Motion) */
  --sp-1: var(--rw-sp-1); --sp-2: var(--rw-sp-2); --sp-3: var(--rw-sp-3); --sp-4: var(--rw-sp-4); --sp-5: var(--rw-sp-5);
  --sp-6: var(--rw-sp-6); --sp-7: var(--rw-sp-7); --sp-8: var(--rw-sp-8); --sp-9: var(--rw-sp-9); --sp-10: var(--rw-sp-10);
  --seam-w: 8px; --r-outer: 14px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: var(--rw-r-pill);
  --dur-1: var(--rw-dur-1); --dur-2: var(--rw-dur-2); --dur-3: var(--rw-dur-3); --dur-4: var(--rw-dur-4); --dur-scene: var(--rw-dur-scene);
  --ease-assemble: var(--rw-ease-assemble);
  --ease-snap: var(--rw-ease-snap);
  --ease-gentle: var(--rw-ease-gentle);
  --gutter: var(--rw-gutter);
  --max: var(--rw-max);
  --dock-h: 60px;
  --site-h: 64px;
}

/* The page: every colour from the theme. Declared on every [data-theme] element as well as the
   root, so a nested theme (the gallery's specimens) resolves them with its own colours. */
:root,
[data-theme] {
  --ground: var(--rw-ground);
  --surface-1: var(--rw-surface-1);
  --surface-2: var(--rw-surface-2);
  --surface-3: var(--rw-surface-3);
  --text: var(--rw-text);
  --text-muted: var(--rw-text-muted);
  --text-soft: var(--rw-text-soft);
  --line: var(--rw-line);
  --line-strong: var(--rw-line-strong);
  --seam: color-mix(in srgb, var(--rw-accent) 10%, transparent);
  --scrim: var(--rw-scrim);
  /* The inverted panel: the page's text as paper, its ground as ink */
  --panel-paper: var(--rw-text);
  --panel-ink: var(--rw-ground);
  --hazard: var(--rw-danger);
  --focus: var(--rw-focus);
  /* Accents: each cord tuned to read as text on a dark page */
  --signal-accent: #36ff84; --lemon-accent: #ffd43b; --cyan-accent: #48e6ff; --amber-accent: #ff9a45;
  --ice-accent: #c9d0ff; --pink-accent: #ff8fcb; --blue-accent: #6fa3ff; --kernel-accent: var(--k-400);
  --foot-word: linear-gradient(100deg, var(--k-300), var(--k-400) 46%, var(--k-500));
  --gh-mark: #ffffff; /* GitHub's logo is white or black only */
  --mark-dark: block; --mark-light: none;
}
/* Light pages: the accents darken to clear 4.5:1 on paper and on the veil (lemon and amber with 3% to spare) */
[data-theme="daylight"],
[data-theme="bone"] {
  --signal-accent: #007a39; --lemon-accent: #826406; --cyan-accent: #00728a; --amber-accent: #ae4b02;
  --ice-accent: #3b44b8; --pink-accent: #b0176b; --blue-accent: #2456d8; --kernel-accent: var(--k-600);
  --foot-word: linear-gradient(100deg, var(--k-600), var(--k-700) 50%, var(--k-800));
  --gh-mark: #000000;
}
/* The kit's marks follow the theme's scheme: one file for dark grounds, one for light, never recoloured */
[data-scheme="light"] { --mark-dark: none; --mark-light: block; }
/* Bone's paper is warmer and a little darker, so five accents go one step deeper (each with 3% to spare on surface-0) */
[data-theme="bone"] { --signal-accent: #006b32; --lemon-accent: #785b02; --cyan-accent: #00697f; --amber-accent: #a04400; --blue-accent: #2354d6; }
/* High Contrast lifts violet text one step */
[data-theme="high-contrast"] { --kernel-accent: var(--k-300); --seam: rgba(255, 255, 255, 0.16); }
/* Without JavaScript the theme follows the system, or the fallback selector */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --signal-accent: #007a39; --lemon-accent: #826406; --cyan-accent: #00728a; --amber-accent: #ae4b02;
    --ice-accent: #3b44b8; --pink-accent: #b0176b; --blue-accent: #2456d8; --kernel-accent: var(--k-600);
    --foot-word: linear-gradient(100deg, var(--k-600), var(--k-700) 50%, var(--k-800));
    --gh-mark: #000000;
    --mark-dark: none; --mark-light: block;
  }
}
:root:not([data-theme]):has(.rw-theme-fallback option[value="daylight"]:checked),
:root:not([data-theme]):has(.rw-theme-fallback option[value="bone"]:checked) {
  --signal-accent: #007a39; --lemon-accent: #826406; --cyan-accent: #00728a; --amber-accent: #ae4b02;
  --ice-accent: #3b44b8; --pink-accent: #b0176b; --blue-accent: #2456d8; --kernel-accent: var(--k-600);
  --foot-word: linear-gradient(100deg, var(--k-600), var(--k-700) 50%, var(--k-800));
  --gh-mark: #000000;
  --mark-dark: none; --mark-light: block;
}
/* Bone's deeper accents, and High Contrast's lifted violet, without JavaScript too */
:root:not([data-theme]):has(.rw-theme-fallback option[value="bone"]:checked) { --signal-accent: #006b32; --lemon-accent: #785b02; --cyan-accent: #00697f; --amber-accent: #a04400; --blue-accent: #2354d6; }
:root:not([data-theme]):has(.rw-theme-fallback option[value="kernel-night"]:checked),
:root:not([data-theme]):has(.rw-theme-fallback option[value="phosphor"]:checked),
:root:not([data-theme]):has(.rw-theme-fallback option[value="witchlight"]:checked),
:root:not([data-theme]):has(.rw-theme-fallback option[value="spectral"]:checked),
:root:not([data-theme]):has(.rw-theme-fallback option[value="hollow-circuit"]:checked),
:root:not([data-theme]):has(.rw-theme-fallback option[value="moonlit"]:checked),
:root:not([data-theme]):has(.rw-theme-fallback option[value="high-contrast"]:checked) {
  --signal-accent: #36ff84; --lemon-accent: #ffd43b; --cyan-accent: #48e6ff; --amber-accent: #ff9a45;
  --ice-accent: #c9d0ff; --pink-accent: #ff8fcb; --blue-accent: #6fa3ff; --kernel-accent: var(--k-400);
  --foot-word: linear-gradient(100deg, var(--k-300), var(--k-400) 46%, var(--k-500));
  --gh-mark: #ffffff;
  --mark-dark: block; --mark-light: none;
}
:root:not([data-theme]):has(.rw-theme-fallback option[value="high-contrast"]:checked) { --kernel-accent: var(--k-300); --seam: rgba(255, 255, 255, 0.16); }

/* A container picks its cord once; everything inside reads --pc, --pc-ink and --pc-accent */
[data-pair="signal"] { --pc: var(--signal); --pc-ink: var(--signal-ink); --pc-accent: var(--signal-accent); }
[data-pair="lemon"]  { --pc: var(--lemon);  --pc-ink: var(--lemon-ink);  --pc-accent: var(--lemon-accent); }
[data-pair="cyan"]   { --pc: var(--cyan);   --pc-ink: var(--cyan-ink);   --pc-accent: var(--cyan-accent); }
[data-pair="amber"]  { --pc: var(--amber);  --pc-ink: var(--amber-ink);  --pc-accent: var(--amber-accent); }
[data-pair="ice"]    { --pc: var(--ice);    --pc-ink: var(--ice-ink);    --pc-accent: var(--ice-accent); }
[data-pair="pink"]   { --pc: var(--pink);   --pc-ink: var(--pink-ink);   --pc-accent: var(--pink-accent); }
[data-pair="blue"]   { --pc: var(--blue);   --pc-ink: var(--blue-ink);   --pc-accent: var(--blue-accent); }
[data-pair="kernel"] { --pc: var(--kernel); --pc-ink: var(--kernel-ink); --pc-accent: var(--kernel-accent); }
:root { --pc: var(--kernel); --pc-ink: var(--kernel-ink); --pc-accent: var(--kernel-accent); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-bottom: calc(var(--dock-h) + 24px); scroll-padding-top: 16px; }
body {
  margin: 0; background: transparent; color: var(--text);
  font-family: var(--font-text); font-size: var(--t-body); line-height: 1.62;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  transition: color var(--dur-2) var(--ease-assemble);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 70; background: var(--ground); }
::selection { background: color-mix(in srgb, var(--kernel) 55%, transparent); color: var(--text); }
:focus-visible { outline: var(--rw-focus-width, 3px) solid var(--focus); outline-offset: 3px; border-radius: 4px; }
/* On a cord's own ground the ring takes the cord's ink, so it shows on green, yellow and the rest */
.phero :focus-visible, .mtile :focus-visible, .ppg__head :focus-visible, .console__bar :focus-visible, th :focus-visible { outline-color: var(--pc-ink); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; text-wrap: balance; font-family: var(--font-display); font-weight: 800; font-stretch: 110%; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
button { font: inherit; color: inherit; }
code { font-family: var(--font-mono); font-size: 0.86em; padding: 0.1em 0.4em; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); overflow-wrap: anywhere; }
pre code { padding: 0; border: 0; background: none; font-size: inherit; overflow-wrap: normal; }
kbd { font-family: var(--font-mono); font-size: 0.68rem; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--text-muted); background: var(--surface-1); line-height: 1.4; }
.sr { 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: max(16px, env(safe-area-inset-left, 0px)); top: -80px; z-index: 100; padding: 10px 14px; border-radius: var(--r-sm); background: var(--signal); color: var(--signal-ink); font-weight: 700; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px), var(--gutter)); padding-right: max(16px, env(safe-area-inset-right, 0px), var(--gutter)); }
.eyebrow { font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.muted { color: var(--text-muted); } .soft { color: var(--text-soft); }

/* The wordmark and the lockups are the kit's outlined masters, shown as images (scripts/docs-marks.mjs).
   A pair holds two of the kit's treatments and the theme's scheme picks one (--mark-dark, --mark-light);
   the inverted panel, paper in dark themes and night in light ones, turns the pair over. */
.markimg { display: block; flex: none; max-width: 100%; height: auto; }
.markpair { display: inline-flex; }
.markpair__dark { display: var(--mark-dark, block); }
.markpair__light { display: var(--mark-light, none); }
.markpair--inverse .markpair__dark { display: var(--mark-light, none); }
.markpair--inverse .markpair__light { display: var(--mark-dark, block); }
.wm, .lockup { display: inline-flex; align-items: center; line-height: 1; }
.wm .markimg { width: auto; height: var(--wm-h, 1.2rem); }
.lockup .markimg { width: auto; height: var(--lk-h, 1.85rem); }

/* ---------- The RN06 roach ----------
   Six legs, three a side. Colours come from here, so one drawing sits on any ground: the
   wing case in Kernel 600, the cap in signal green, everything else pale, on night. On a
   light ground the colour roach brings its own black (the ink layer: an outline under every
   part and the dark face). The one-colour roach is a single ink with the gaps left open;
   "lit" gives it the green cap, as in lockups and the keystone. It moves only at its joints:
   legs at the hips, antennae at the cap, eyes inside the face, the cap's light. */
.rn-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rn { display: block; width: 100%; height: auto; aspect-ratio: 260 / 160; overflow: visible; --rn-ink: #06060b; --rn-wing: var(--k-600); --rn-pale: #f7eeff; --rn-cap: #36ff84; }
.rn * { transform-box: view-box; }
.rn__ink { fill: var(--rn-ink); stroke: var(--rn-ink); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.rn__ink .rn__ant { stroke-width: 3.4; }
.rn--color .rn__paint { fill: var(--rn-pale); }
.rn--color .rn__paint .rn__wing { fill: var(--rn-wing); }
.rn--color .rn__led, .rn--lit .rn__led { fill: var(--rn-cap); }
/* Lit ink: on paper the one-colour roach keeps its cap in the kit's deep green, as the lit-ink master does */
.vtile--paper .rn--lit, .dd--paper .rn--lit, .spec--paper .rn--lit, .use__stage--paper .rn--lit { --rn-cap: #007a39; }
.rn--mono .rn__paint { fill: currentColor; }
.rn--small .rn__paint .rn__ant use { stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.rn--color.rn--small .rn__paint .rn__ant use { stroke: var(--rn-pale); }
.rn__eye { transform-box: fill-box; transform-origin: 50% 50%; }
/* Joints. build-docs --check compares these with the drawing in docs-src/marks/rn06.json */
.rn__leg--mf { transform-origin: 103.38px 56.38px; }
.rn__leg--hf { transform-origin: 69px 81.75px; }
.rn__leg--hn { transform-origin: 41.25px 117px; }
.rn__leg--mn { transform-origin: 118.5px 116.25px; }
.rn__leg--fn { transform-origin: 144.25px 102px; }
.rn__leg--ff { transform-origin: 160.25px 105.25px; }
.rn__ant--far { transform-origin: 162.75px 49.25px; }
.rn__ant--near { transform-origin: 176px 57.25px; }
.rn__head { transform-origin: 160.5px 83px; }
.rn__wing--top { transform-origin: 108px 80px; }
.rn__wing--low { transform-origin: 130px 92px; }
.rn__collar { transform-origin: 158px 84px; }
.rn__all { transform-origin: 130px 150px; }
.rn__bang, .rn__zz { opacity: 0; transition: opacity 0.3s ease; }
.rn__bang path { fill: none; stroke: var(--rn-cap); stroke-width: 5; stroke-linecap: round; }
.rn__bang circle { fill: var(--rn-cap); }
.rn__zz { font-family: var(--font-mono); font-weight: 700; fill: var(--k-400); }
.rn__z--1 { font-size: 15px; } .rn__z--2 { font-size: 19px; }
.rn-app { display: block; width: 100%; height: auto; overflow: visible; }
.rn-app__ground { fill: #06060b; }
.mark-asset { display: block; width: 100%; height: auto; }

@keyframes rn-sway-far { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }
@keyframes rn-sway-near { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }
@keyframes rn-tri-a { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes rn-tri-b { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }
@keyframes rn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes rn-hop { 0% { transform: none; } 14% { transform: translateY(2px) scale(1.05, 0.92); } 42% { transform: translateY(-18px) scale(0.97, 1.05); } 66% { transform: translateY(0) scale(1.03, 0.95); } 82% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes rn-happy { 0%, 100% { transform: none; } 35% { transform: translateY(-9px) rotate(-3deg); } 70% { transform: translateY(0) rotate(2deg); } }
@keyframes rn-cap-flash { 0% { filter: brightness(1); } 18% { filter: brightness(1.5) drop-shadow(0 0 6px var(--signal)); } 100% { filter: brightness(1); } }
@keyframes rn-pulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 2px var(--signal)); } 50% { opacity: 0.55; filter: none; } }
@keyframes rn-work-far { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-11deg); } }
@keyframes rn-work-near { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-8deg); } }
@keyframes rn-doze { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.016); } }
@keyframes rn-z { 0% { transform: translate(0, 4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(6px, -12px); opacity: 0; } }

/* Small marks stay alive: the antennae drift, and a mark scurries in place under the pointer */
@media (prefers-reduced-motion: no-preference) {
  .mark--alive .rn__ant--far { animation: rn-sway-far 4.2s ease-in-out infinite; }
  .mark--alive .rn__ant--near { animation: rn-sway-near 3.6s ease-in-out -1.3s infinite; }
  .scurry:hover .rn__leg--a, .scurry:focus-visible .rn__leg--a { animation: rn-tri-a 0.18s linear infinite; }
  .scurry:hover .rn__leg--b, .scurry:focus-visible .rn__leg--b { animation: rn-tri-b 0.18s linear infinite; }
  .scurry:hover .rn__all, .scurry:focus-visible .rn__all { animation: rn-bob 0.18s linear infinite; }
}

/* The live roach (patchbay-roach.js): it looks at the pointer, blinks, perks up when the pointer
   comes near, scurries under it, hops when pressed, works while search runs, cheers when results
   arrive, squints at a theme change and dozes when the page is idle. States are classes on the
   element that carries data-roach; the eyes and the head follow --px, --py and --ht. */
.rn--live .rn__eyes { transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)); }
.rn--live .rn__head { transform: rotate(calc(var(--ht, 0) * 1deg)); transition: transform 0.25s var(--ease-assemble); }
.rn--live .rn__eye { transform: scaleY(var(--lid, 1)); transition: transform 0.09s ease-out; }
.rn--live .rn__ant { transition: transform 0.45s var(--ease-snap); }
.rn--live .rn__led { transition: opacity 0.4s ease, filter 0.4s ease; }
.mascot { position: relative; display: block; width: 100%; padding: 6px; margin: 0; border: 0; border-radius: 24px; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mascot__body { position: relative; display: block; transform-origin: 50% 90%; }
.mascot:focus-visible { outline: var(--rw-focus-width, 3px) solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  [data-roach].is-near .rn__ant--far { animation: none; transform: rotate(-9deg); }
  [data-roach].is-near .rn__ant--near { animation: none; transform: rotate(-6deg); }
  [data-roach].is-hover .rn__leg--a, [data-roach].is-run .rn__leg--a { animation: rn-tri-a 0.16s linear infinite; }
  [data-roach].is-hover .rn__leg--b, [data-roach].is-run .rn__leg--b { animation: rn-tri-b 0.16s linear infinite; }
  [data-roach].is-hover .rn__all, [data-roach].is-run .rn__all { animation: rn-bob 0.16s linear infinite; }
  [data-roach].is-hop .mascot__body, [data-roach].is-hop .keystone__mark { animation: rn-hop 0.72s var(--ease-assemble); }
  [data-roach].is-hop .rn__led { animation: rn-cap-flash 0.5s ease-out; }
  [data-roach].is-hop .rn__eye { --lid: 1.18; }
  [data-roach].is-hop .rn__bang { opacity: 1; }
  [data-roach].is-hop .rn__ant--far { animation: none; transform: rotate(10deg); }
  [data-roach].is-hop .rn__ant--near { animation: none; transform: rotate(8deg); }
  [data-roach].is-happy .mascot__body, [data-roach].is-happy .keystone__mark { animation: rn-happy 0.6s var(--ease-snap); }
  [data-roach].is-think .rn__led { animation: rn-pulse 1.1s ease-in-out infinite; }
  [data-roach].is-think .rn__ant--far { animation: rn-work-far 0.5s ease-in-out infinite; }
  [data-roach].is-think .rn__ant--near { animation: rn-work-near 0.5s ease-in-out -0.25s infinite; }
  [data-roach].is-doze .rn__all { animation: rn-doze 3.4s ease-in-out infinite; }
  [data-roach].is-doze .rn__ant--far { animation: none; transform: rotate(12deg); }
  [data-roach].is-doze .rn__ant--near { animation: none; transform: rotate(14deg); }
  [data-roach].is-doze .rn__zz { opacity: 1; }
  [data-roach].is-doze .rn__z--1 { animation: rn-z 3.4s ease-in-out infinite; }
  [data-roach].is-doze .rn__z--2 { animation: rn-z 3.4s ease-in-out -1.7s infinite; }
  [data-roach].is-paused, [data-roach].is-paused * { animation-play-state: paused !important; }
}
[data-roach].is-doze .rn__led { opacity: 0.38; }
[data-roach].is-doze .rn__eye { --lid: 0.24; }
[data-roach].is-squint .rn__eye { --lid: 0.5; }
[data-roach].is-blink .rn__eye { --lid: 0.1; }
[data-roach].is-happy .rn__eye { --lid: 0.45; }
@media (prefers-reduced-motion: reduce) {
  .rn, .rn *, .mascot, .mascot * { animation: none !important; transition: none !important; }
  .keystone.is-awaiting .rn [data-hatch], .keystone.is-awaiting .rn__led { opacity: 1; }
}

/* Stickers: the system's labels. A cord's ground and ink, a slight tilt, a hard edge */
.sticker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 4px; border-radius: var(--r-pill); background: var(--pc); color: var(--pc-ink); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; transform: rotate(var(--tilt, -2deg)); box-shadow: 0 1px 0 color-mix(in srgb, var(--pc-ink) 30%, transparent); white-space: nowrap; }
.sticker--flat { transform: none; }
.sticker--hazard { background: var(--hazard-fill); color: var(--on-hazard); }

/* Chips: quiet facts */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, currentColor 28%, transparent); font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.chip--mono { font-family: var(--font-mono); font-weight: 500; font-size: 0.76rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid transparent; font-weight: 700; font-size: 0.94rem; cursor: pointer; line-height: 1.2; transition: transform var(--dur-2) var(--ease-snap), background-color var(--dur-1) var(--ease-assemble), border-color var(--dur-1) var(--ease-assemble), color var(--dur-1) var(--ease-assemble); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--kernel { background: var(--kernel); color: var(--kernel-ink); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-300) 42%, transparent), 0 10px 30px color-mix(in srgb, var(--k-600) 36%, transparent); transition: transform var(--dur-2) var(--ease-snap), background-color var(--dur-1) var(--ease-assemble), box-shadow var(--dur-2) var(--ease-assemble); }
/* Hover lights the fill from inside with the 500 step and adds a halo; the fill itself stays 600,
   so the pale ink keeps its 7.35:1. Press goes to 700. */
.btn--kernel:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-300) 58%, transparent), inset 0 0 0 1px var(--kernel-glow), inset 0 -10px 22px -12px var(--kernel-glow), 0 0 0 4px color-mix(in srgb, var(--kernel-glow) 24%, transparent), 0 14px 38px color-mix(in srgb, var(--kernel-glow) 38%, transparent); }
.btn--kernel:active { background: var(--kernel-press); }
.btn--pair { background: var(--pc); color: var(--pc-ink); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--text-soft); }
.btn--sm { padding: 7px 13px; font-size: 0.84rem; }

/* ---------- Keystone: the violet square at the centre of every mosaic ----------
   Kernel 600, lit from the top left with the 500 step so it reads as a light source on night,
   carrying the roach in one colour with its cap lit, the same LED as the wordmark's o. */
.keystone { position: relative; display: grid; place-items: center; background: var(--kernel-lit); color: var(--kernel-ink); border: 0; padding: 0; cursor: pointer; overflow: hidden; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-300) 46%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--k-500) 40%, transparent); transition: box-shadow var(--dur-2) var(--ease-assemble); }
.keystone__mark { position: relative; z-index: 1; display: grid; place-items: center; width: 70%; max-width: 132px; color: var(--kernel-ink); pointer-events: none; transition: transform var(--dur-3) var(--ease-snap); }
.keystone__mark .rn { width: 100%; }
.keystone .rn__led { filter: drop-shadow(0 0 3px var(--signal)); }
.keystone__ring { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--kernel-ink) 55%, transparent); transform: scale(0.5); opacity: 0; transition: transform var(--dur-3) var(--ease-snap), opacity var(--dur-2) var(--ease-assemble); }
@media (max-width: 759px) { .keystone__label { display: none; } }   /* a keyboard hint, on a phone, over the roach */
.keystone__label { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.keystone:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-300) 60%, transparent), inset 0 0 0 1px var(--kernel-glow), inset 0 0 28px color-mix(in srgb, var(--kernel-glow) 55%, transparent); }
.keystone:active { background: var(--kernel-press); }
.keystone:hover .keystone__mark, .keystone:focus-visible .keystone__mark { transform: translateY(-3%) scale(1.04); }
.keystone:hover .keystone__ring, .keystone:focus-visible .keystone__ring { transform: scale(1); opacity: 1; }
.keystone:focus-visible { outline: var(--rw-focus-width, 3px) solid var(--focus); outline-offset: 3px; }

/* ---------- Dock: fixed to the bottom edge, like a rack's front panel ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding-bottom: env(safe-area-inset-bottom, 0px); background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-top: 1px solid var(--line); transition: transform var(--dur-3) var(--ease-assemble); }
.dock.is-away { transform: translateY(calc(100% + 2px)); }
.dock__progress { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: transparent; overflow: hidden; }
.dock__progress i { display: block; height: 100%; width: 100%; background: var(--pc); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
.dock__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; height: var(--dock-h); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.dock__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dock__crumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.86rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__crumb::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--pc); }
/* Between the phone layout and a wide dock, the chapter gives way so the page name always fits */
@media (max-width: 1100px) { .dock__ch { display: none; } }
/* The roach is drawn in full from 48 px wide; below that the brand uses the micro-mark */
.dock__key { width: 64px; height: var(--dock-h); }
.dock__key .keystone__mark { width: 48px; }
.dock__right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.dock__btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--text-muted); cursor: pointer; font-size: 0.88rem; transition: color var(--dur-1) var(--ease-assemble), border-color var(--dur-1) var(--ease-assemble); }
.dock__btn:hover { color: var(--text); border-color: var(--text-soft); }
.dock__btn--icon { width: 44px; padding: 0; justify-content: center; }
/* ---------- The RoachNet header: the same on every RoachNet surface, laid out for the docs ----------
   The compact lockup goes home to roachnet.org, then the five primary links, then the theme selector
   at the right end. Below 900 px the links and the selector move into the menu, which the Menu button
   opens. On the hub's cinematic intro the header holds while the stage is pinned beneath it and
   leaves with the stage (patchbay.js moves it); everywhere else it scrolls away with the page. */
.site { position: relative; z-index: 55; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--ground) 90%, transparent); box-shadow: inset 0 -1px 0 var(--line); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.site__in { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); height: var(--site-h); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.site__home { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 4px 0; border-radius: var(--r-sm); }
.site__home .lockup { --lk-h: 26px; display: block; transition: transform var(--dur-2) var(--ease-snap); }
.site__home:hover .lockup { transform: translateY(-1px); }
.site__nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.site__nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; border-radius: var(--r-pill); font-size: 0.95rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: color var(--dur-1) var(--ease-assemble), background-color var(--dur-1) var(--ease-assemble); }
.site__nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.site__nav a[aria-current] { color: var(--text); }
.site__nav a[aria-current]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--kernel-accent); }
.site__end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.site__menu { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--text); font: 600 0.92rem/1 var(--font-text); cursor: pointer; }
.site__menu:hover { border-color: var(--text-soft); }
.site__burger { display: grid; gap: 5px; width: 18px; }
.site__burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease-snap); }
.site__menu:hover .site__burger i:last-child { transform: scaleX(0.6); transform-origin: 0 50%; }

/* The theme selector: the system's element (rw-components.css), in the header and in the menu. The
   button's own name says "Theme: Kernel Night", so the visible label can go. */
/* Patchbay's own button reset (font: inherit) is unlayered, so it would beat the system's; restore it */
.rw-ts__button { font: 600 0.88rem/1 var(--font-text); color: var(--text); }
.site__theme, .menu__theme { display: flex; align-items: center; }
.site__theme .rw-ts__label, .menu__theme .rw-ts__label { display: none; }
.site__theme .rw-ts__button, .menu__theme .rw-ts__button { gap: 9px; padding: 0 12px 0 5px; background: var(--surface-1); }
.site__theme .rw-ts__swatch, .menu__theme .rw-ts__swatch { width: 32px; height: 32px; }
.site__theme .rw-theme-fallback { max-width: 10rem; }

/* ---------- Search palette ---------- */
dialog { border: 0; padding: 0; background: transparent; color: inherit; max-width: none; max-height: none; }
dialog::backdrop { background: var(--scrim); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.palette { width: min(700px, calc(100vw - 32px)); margin: calc(env(safe-area-inset-top, 0px) + 9vh) auto 0; border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--line-strong); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5); overflow: hidden; }
.palette[open] { animation: pop var(--dur-2) var(--ease-assemble); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.palette__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--kernel); color: var(--kernel-ink); }
.palette__head input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font-family: var(--font-display); font-stretch: 105%; font-weight: 700; font-size: 1.35rem; outline: none; }
.palette__head input::placeholder { color: color-mix(in srgb, var(--kernel-ink) 62%, transparent); }
.palette__head kbd { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--kernel-ink) 45%, transparent); }
.palette__results { list-style: none; margin: 0; padding: 8px; max-height: min(54vh, 480px); overflow-y: auto; }
.palette__group { padding: 12px 10px 6px; color: var(--text-soft); }
.palette__item { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: var(--r-md); cursor: pointer; }
.palette__item i { width: 12px; height: 12px; margin-top: 6px; background: var(--pc); }
.palette__item[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.palette__title { font-weight: 650; } .palette__title mark { background: transparent; color: var(--pc-accent); }
.palette__path { font-size: 0.8rem; color: var(--text-muted); }
.palette__empty { padding: 22px 14px; color: var(--text-soft); }
.palette__foot { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--text-soft); }
.palette__foot span:last-child { margin-left: auto; }

/* ---------- Footer ---------- */
.foot { position: relative; overflow: hidden; background: var(--surface-1); border-top: 1px solid var(--line); }
.foot__cords { display: grid; grid-template-columns: repeat(8, 1fr); height: 10px; }
.foot__cords i { background: var(--pc); }
.foot__in { padding-block: 56px 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 28px; }
.foot__brand { display: grid; gap: 10px; align-content: start; color: var(--text-muted); font-size: 0.94rem; }
.foot__col h2 { font-family: var(--font-mono); font-weight: 600; font-stretch: 100%; font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 12px; }
.foot__col nav { display: grid; gap: 7px; font-size: 0.94rem; color: var(--text-muted); }
.foot__col a:hover { color: var(--text); }
.foot__sign { display: grid; justify-items: start; gap: 12px; }
/* The sign-off: the wordmark at full size, its letters lit through an LED grid */
/* The sign-off: the outlined wordmark at full width, seen through a grid of LED cells */
.foot__word.wm { position: relative; display: block; width: min(100%, 1240px); user-select: none; }
.foot__word.wm .markimg { width: 100%; height: auto; }
/* the footer's wordmark reads as a field of LED dots */
.foot__word.wm::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 1.5px, var(--surface-1) 1.9px) 0 0 / 5px 5px; }
.foot__tag { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-soft); }
.foot__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--text-soft); }
.foot__meta .chip { color: var(--signal-accent); }
/* The privacy notice and Netlify's badge, on every roachnet.org page; the badge is drawn as Netlify ships it */
.foot__meta { align-items: center; }
.foot__privacy { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 0.2em; }
.foot__privacy:hover { color: var(--kernel-accent); }
.foot__netlify { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--text-soft); text-decoration: none; }
.foot__netlify img { display: block; height: 36px; width: auto; }

/* ---------- Field: the dithered ground under every page ---------- */
/* The canvas is the system's (.rw-field in rw-components.css: fixed, behind everything, pixelated,
   fading in once it has drawn). Once it has a frame, live or still, the pinned stage lets it show. */
.has-field.is-cine .intro__stage { background: transparent; }


/* Patchbay page: the field lab */
.fieldlab { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "win layers" "win reacts" "actions actions"; gap: var(--seam-w); }
.fieldlab__win { grid-area: win; position: relative; min-height: 380px; border: 1px solid var(--line-strong); border-radius: var(--r-outer) 0 0 var(--r-outer); overflow: hidden; cursor: pointer; }
.fieldlab__win::before, .fieldlab__win::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--pc-accent); pointer-events: none; }
.fieldlab__win::before { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.fieldlab__win::after { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.fieldlab__tag { position: absolute; left: 14px; top: 13px; padding: 3px 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ground) 78%, transparent); color: var(--text-muted); }
.fieldlab__dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--pc-accent); opacity: 0.7; }
.fieldlab__layers { grid-area: layers; display: grid; gap: var(--seam-w); }
.layer { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; align-items: center; text-align: left; padding: 12px 14px; background: var(--surface-1); border: 1px solid var(--line); cursor: pointer; transition: background-color var(--dur-2) var(--ease-assemble), opacity var(--dur-2) var(--ease-assemble); }
.layer:hover { background: var(--surface-2); }
.layer[aria-pressed="false"] { opacity: 0.5; }
.layer[aria-pressed="false"] .layer__swatch { background: none; outline: 1px dashed var(--line-strong); outline-offset: -1px; }
.layer__swatch { grid-row: span 2; width: 30px; height: 30px; border-radius: 4px; }
.layer__swatch--far { background: radial-gradient(circle, var(--kernel-accent) 0.7px, transparent 1.1px) 0 0 / 4px 4px; }
.layer__swatch--mid { background: radial-gradient(circle, var(--kernel-accent) 1.3px, transparent 1.7px) 0 0 / 6px 6px; }
.layer__swatch--near { background: linear-gradient(var(--pc-accent), var(--pc-accent)) center / 2px 14px no-repeat, linear-gradient(var(--pc-accent), var(--pc-accent)) center / 14px 2px no-repeat; }
.layer__name { font-family: var(--font-display); font-weight: 850; font-stretch: 120%; font-size: 1.12rem; line-height: 1; }
.layer__spec { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-soft); }
.fieldlab__reacts { grid-area: reacts; list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 8px; align-content: start; background: var(--surface-1); border: 1px solid var(--line); border-radius: 0 0 var(--r-outer) 0; font-size: 0.92rem; color: var(--text-muted); }
.fieldlab__reacts b { color: var(--text); font-weight: 720; margin-right: 3px; }
.fieldlab__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 6px; }
.fieldlab__actions [aria-pressed="true"] { background: var(--text); color: var(--ground); border-color: var(--text); }
.fieldlab__status { font-size: 0.88rem; }
@media (max-width: 980px) {
  .fieldlab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "win" "layers" "reacts" "actions"; }
  .fieldlab__win { min-height: 300px; border-radius: var(--r-outer) var(--r-outer) 0 0; }
  .fieldlab__reacts { border-radius: 0 0 var(--r-outer) var(--r-outer); }
}
@media (max-width: 560px) {
}
/* ============================== HUB ============================== */
/* The hub's sections sit on the field itself: no lines behind them */
.view { position: relative; }

/* ---------- Intro: the panel that folds into the keystone ----------
   Three modes, chosen by patchbay.js; each one ends in the same finished mosaic.
   - Cinematic (.is-cine, windows from about 720 x 540 up): a pinned stage the scroll drives.
     The panel folds into the keystone, the LED period flies into the keystone as the roach's
     cap, and the seven modules arrive from their nearest edges and lock in.
   - Stepped (.is-stepped, phones and short windows): the page scrolls normally; each module
     flies in from its edge as it comes into view and locks with the snap ease, and the LED
     lands in the keystone when it does.
   - Still (reduced motion, or no script): the finished composition, at once. */
.intro { position: relative; }
.intro__stage { position: relative; display: grid; gap: var(--seam-w); padding: 10px max(10px, env(safe-area-inset-right, 0px)) 10px max(10px, env(safe-area-inset-left, 0px)); }
.is-cine .intro { height: 230vh; }
.is-cine .intro__stage { position: sticky; top: 0; height: 100vh; padding: 0; display: block; overflow: hidden; background: var(--ground); }
/* The header holds above the pinned stage and leaves with it (patchbay.js sets --site-y) */
.is-cine .site { position: sticky; top: 0; transform: translate3d(0, var(--site-y, 0px), 0); }
.is-cine .intro__stage { top: calc(var(--site-h) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--site-h) - env(safe-area-inset-top, 0px)); }

/* The panel: the headline card that becomes the keystone */
.panel { position: relative; z-index: 4; display: grid; align-content: space-between; gap: clamp(18px, 2.6vw, 34px); min-height: clamp(460px, 70vh, 720px); padding: clamp(22px, 3.2vw, 46px); border-radius: var(--r-outer); background: var(--panel-paper); color: var(--panel-ink); overflow: hidden; container-type: inline-size; }
.is-cine .panel { position: absolute; min-height: 0; background: transparent; border-radius: 0; transform-origin: 0 0; }
.is-cine .panel.is-folding { will-change: transform; }
.panel.is-gone { visibility: hidden; }
.panel__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.panel__docs { padding: 4px 9px; border-radius: var(--r-pill); border: 1.5px solid color-mix(in srgb, var(--panel-ink) 40%, transparent); }
.panel__top .sticker { margin-left: auto; }
.panel > * { min-width: 0; }
.panel__title { --cyc: 116%; font-family: var(--font-display); font-weight: 850; font-stretch: var(--cyc); font-size: clamp(2.3rem, 8.6cqi, 6.6rem); line-height: 0.9; letter-spacing: -0.035em; text-wrap: initial; }
.panel__line { display: block; white-space: nowrap; }
.cycler { display: inline-grid; vertical-align: bottom; justify-items: start; transition: width var(--dur-3) var(--ease-assemble); }
.cycler > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(0.3em); font-stretch: 58%; transition: opacity 0.32s var(--ease-assemble), transform 0.55s var(--ease-assemble), font-stretch 0.65s var(--ease-assemble); }
.cycler > span.is-on { opacity: 1; transform: none; font-stretch: var(--cyc, 116%); }
.cycler > span.is-out { opacity: 0; transform: translateY(-0.3em); font-stretch: 150%; }
.cycler.no-anim, .cycler.no-anim > span { transition: none !important; }
.cycler.is-measuring > span { font-stretch: var(--cyc, 116%) !important; transition: none !important; }
.period { display: inline-block; width: 0.19em; height: 0.19em; margin-left: 0.05em; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0.045em var(--panel-ink); vertical-align: 0.02em; }
.is-cine .period.is-handed { visibility: hidden; }
.panel__lede { max-width: 54ch; font-size: clamp(1.02rem, 0.92rem + 0.4vw, 1.24rem); font-weight: 500; line-height: 1.5; color: color-mix(in srgb, var(--panel-ink) 82%, transparent); }
.panel__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.panel__search { display: inline-flex; align-items: center; gap: 12px; flex: 1 1 320px; max-width: 560px; min-width: 0; padding: 14px 14px 14px 18px; border-radius: var(--r-pill); border: 2px solid var(--panel-ink); background: transparent; color: var(--panel-ink); font-size: 1rem; font-weight: 600; text-align: left; cursor: text; transition: background-color var(--dur-2) var(--ease-assemble), color var(--dur-2) var(--ease-assemble); }
.panel__search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* The full label needs about 480 px; a narrower pill says the short one instead of cutting it off */
.panel__search { container-type: inline-size; }
.panel__search-short { display: none; }
@container (max-width: 480px) { .panel__search-long { display: none; } .panel__search-short { display: inline; } }
.panel__search kbd { margin-left: auto; color: inherit; background: transparent; border-color: currentColor; }
.panel__search:hover { background: var(--panel-ink); color: var(--panel-paper); }
.panel__skip { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--r-pill); font-weight: 700; color: var(--panel-ink); text-decoration: underline; text-underline-offset: 4px; }
.panel__meta .chip { color: var(--panel-ink); }
.panel__cue { display: none; }
.is-cine .panel__cue { display: inline-flex; align-items: center; gap: 10px; color: color-mix(in srgb, var(--panel-ink) 70%, transparent); }
.cue-arrow { width: 18px; height: 26px; border: 2px solid currentColor; border-radius: 10px; position: relative; }
.cue-arrow::after { content: ""; position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: cue 1.6s var(--ease-assemble) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { opacity: 0; } }
/* Short cinematic windows: the panel loses its spare air before it loses anything else */
@media (max-height: 824px) {
  .is-cine .panel { gap: 14px; padding: clamp(18px, 2.6vw, 32px); }
  .is-cine .panel__lede { font-size: 1rem; line-height: 1.45; }
  .is-cine .panel__search { padding-block: 11px; }
}
@media (max-height: 704px) {
  .is-cine .panel__cue { display: none; }
  .is-cine .panel__meta .chip:nth-child(n + 3) { display: none; }
}

/* The folding card and the flying LED. The card is the panel's paper scaled into the keystone;
   it turns kernel violet as it goes. The LED is the headline's period on its way to the cap. */
.panel-bg, .flydot { display: none; }
.is-cine .panel-bg { display: block; position: absolute; z-index: 3; transform-origin: 0 0; border-radius: var(--r-outer); overflow: hidden; pointer-events: none; will-change: transform; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32); }
.panel-bg i { position: absolute; inset: 0; }
.panel-bg__paper { background: var(--panel-paper); }
.panel-bg__kernel { background: var(--kernel-lit); opacity: 0; }
.flydot { position: absolute; z-index: 6; left: 0; top: 0; transform-origin: 0 0; border-radius: 50%; background: var(--signal); pointer-events: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent), 0 0 24px color-mix(in srgb, var(--signal) 70%, transparent); }
.is-cine .flydot, .flydot.is-flying { display: block; will-change: transform; }
.is-cine .intro.is-landed .flydot, .is-cine .intro:not(.is-handed) .flydot { visibility: hidden; }
.intro.is-folded .panel-bg { visibility: hidden; }

/* ---------- Mosaic: seven modules in a pinwheel around the keystone ---------- */
.mosaic-box { position: relative; overflow: clip; padding: 8px; margin: -8px; }
.is-cine .mosaic-box { position: absolute; z-index: 2; inset: 2px max(2px, calc(env(safe-area-inset-right, 0px) - 8px)) 2px max(2px, calc(env(safe-area-inset-left, 0px) - 8px)); margin: 0; overflow: visible; }
.mosaic {
  --k: clamp(96px, min(18vh, 11vw), 176px);
  display: grid; gap: var(--seam-w);
  grid-template-columns: 1.3fr 1.7fr var(--k) 1.7fr 1.2fr;
  grid-template-rows: minmax(270px, 1.1fr) var(--k) minmax(250px, 1fr);
  grid-template-areas:
    "start guides  guides api ref"
    "start design  key    api ref"
    "support design rel   rel ref";
}
.is-cine .mosaic { height: 100%; grid-template-rows: 1.1fr var(--k) 1fr; }
.is-cine .intro:not(.is-folded) .mosaic > .keystone { visibility: hidden; }
.mosaic > .keystone { grid-area: key; min-width: 0; }
.mosaic > .keystone .keystone__label { bottom: 7%; }
.t-start { grid-area: start; border-top-left-radius: var(--r-outer); }
.t-guides { grid-area: guides; }
.t-api { grid-area: api; }
.t-ref { grid-area: ref; border-top-right-radius: var(--r-outer); border-bottom-right-radius: var(--r-outer); }
.t-design { grid-area: design; }
.t-rel { grid-area: rel; }
.t-support { grid-area: support; border-bottom-left-radius: var(--r-outer); }

.tile { position: relative; isolation: isolate; container-type: inline-size; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; padding: clamp(14px, 1.5vw, 22px); background: var(--pc); color: var(--pc-ink); overflow: hidden; transition: background-color var(--dur-3) var(--ease-assemble), color var(--dur-3) var(--ease-assemble); }
.is-cine .mosaic .tile.is-moving { will-change: transform; }
/* The title's link covers the whole tile; the chips sit above it, the art below the words */
.tile__head { display: flex; flex-direction: column; gap: 6px; padding-right: 30px; }
.tile__name { font-family: var(--font-display); font-weight: 850; font-stretch: 114%; font-size: clamp(0.95rem, 10cqi, 2.75rem); line-height: 0.9; letter-spacing: -0.025em; }
.tile__name a { outline: none; }
.tile__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile__meta { opacity: 1; }
.tile__desc { position: relative; z-index: 2; max-width: 24ch; font-size: clamp(0.84rem, 0.7rem + 2.2cqi, 1.02rem); font-weight: 600; line-height: 1.3; }
.tile__links { position: relative; z-index: 3; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tile__links a { display: inline-flex; padding: 4px 10px; border-radius: var(--r-pill); border: 1.5px solid currentColor; font-size: 0.8rem; font-weight: 700; line-height: 1.2; transition: background-color var(--dur-1) var(--ease-assemble), color var(--dur-1) var(--ease-assemble); }
.tile__links a:hover, .tile__links a:focus-visible { background: currentColor; }
.tile__links a:hover span, .tile__links a:focus-visible span { color: var(--hover-ground); }
.tile__list { position: relative; z-index: 2; list-style: none; padding: 0; margin-top: auto; display: grid; gap: 3px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; line-height: 1.35; }
.tile__list li { display: flex; align-items: baseline; gap: 8px; } .tile__list li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; transform: translateY(-0.12em); }
.tile .tile__art--flow { position: relative; right: auto; bottom: auto; width: min(80cqi, 210px); margin: 22px auto 16px; }
.anchor { display: block; height: 0; }
.tile__jack { position: absolute; z-index: 2; top: clamp(12px, 1.4vw, 20px); right: clamp(12px, 1.4vw, 20px); width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; display: grid; place-items: center; }
.tile__jack::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: transform var(--dur-2) var(--ease-snap); }
.tile.is-hot .tile__jack::after { transform: scale(1.5); }
.tile__foot { position: relative; z-index: -1; margin-top: auto; display: flex; align-items: flex-end; justify-content: flex-end; gap: 12px; min-width: 0; }
.tile__foot .tile__list { margin: 0 auto 0 0; flex: 1 1 0; min-width: 0; }
.tile__art { position: relative; z-index: 0; flex: none; width: min(46cqi, 220px); aspect-ratio: 1; max-width: 100%; pointer-events: none; }
.is-cine .tile__art { width: min(44cqi, 210px, 23vh); }
.tile .tile__art--flow, .is-cine .tile .tile__art--flow { width: min(76cqi, 190px); }
@container (max-width: 210px) { .tile__name { font-stretch: 90%; } .tile__head { padding-right: 26px; } }
.tile:has(.tile__name a:focus-visible) { outline: 3px solid var(--text); outline-offset: 3px; z-index: 4; }
.tile.is-hot, .tile:focus-within { background: var(--hover-ground); color: var(--pc); }
@media (hover: hover) { .tile:hover { background: var(--hover-ground); color: var(--pc); } }

/* Tile art: fills turn to drawn outlines on hover; strokes redraw */
.art { display: block; width: 100%; height: 100%; overflow: visible; }
.art .f { fill: currentColor; stroke: transparent; stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: fill 0.35s var(--ease-assemble), stroke-dashoffset 0.9s var(--ease-assemble); }
.art .s { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.art .h { fill: var(--pc); transition: fill 0.35s var(--ease-assemble); }
.art .p { fill: currentColor; }
.tile.is-hot .art .f, .tile:focus-within .art .f { fill: transparent; stroke: currentColor; stroke-dashoffset: 0; }
.tile.is-hot .art .s, .tile:focus-within .art .s { animation: redraw 0.9s var(--ease-assemble); }
.tile.is-hot .art .h, .tile:focus-within .art .h { fill: currentColor; }
@media (hover: hover) {
  .tile:hover .art .f { fill: transparent; stroke: currentColor; stroke-dashoffset: 0; }
  .tile:hover .art .s { animation: redraw 0.9s var(--ease-assemble); }
  .tile:hover .art .h { fill: currentColor; }
}
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.art-blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.art-dot { transform-box: fill-box; transform-origin: center; animation: typing 1.4s var(--ease-assemble) infinite; }
.art-dot:nth-of-type(2) { animation-delay: 0.16s; } .art-dot:nth-of-type(3) { animation-delay: 0.32s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-9px); } }
.art-card { transform-box: fill-box; transform-origin: 0% 100%; transition: transform 0.6s var(--ease-snap); }
.tile.is-hot .art-card--1, .tile:focus-within .art-card--1 { transform: rotate(-9deg) translate(-8px, 2px); }
.tile.is-hot .art-card--3, .tile:focus-within .art-card--3 { transform: rotate(7deg) translate(10px, -6px); }
@media (hover: hover) { .tile:hover .art-card--1 { transform: rotate(-9deg) translate(-8px, 2px); } .tile:hover .art-card--3 { transform: rotate(7deg) translate(10px, -6px); } }
.art-ring { transform-box: fill-box; transform-origin: center; }
.tile.is-hot .art .s.art-ring, .tile:focus-within .art .s.art-ring { animation: ring 1.8s var(--ease-assemble) infinite; }
@media (hover: hover) { .tile:hover .art .s.art-ring { animation: ring 1.8s var(--ease-assemble) infinite; } }
.tile .art .s.art-ring:nth-of-type(2) { animation-delay: 0.3s; } .tile .art .s.art-ring:nth-of-type(3) { animation-delay: 0.6s; }
@keyframes ring { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.18); opacity: 0; } }

/* Type art (Design tile) and the version odometer (Releases tile) */
.tile__glyph { position: relative; z-index: 0; font-family: var(--font-display); font-weight: 900; font-stretch: 150%; font-size: min(46cqi, 11rem); line-height: 0.82; letter-spacing: -0.04em; pointer-events: none; transition: font-stretch 0.9s var(--ease-snap), color 0.3s var(--ease-assemble), -webkit-text-stroke-color 0.3s; -webkit-text-stroke: 0 currentColor; }
.tile.is-hot .tile__glyph, .tile:focus-within .tile__glyph { font-stretch: 52%; color: transparent; -webkit-text-stroke: 2px currentColor; }
@media (hover: hover) { .tile:hover .tile__glyph { font-stretch: 52%; color: transparent; -webkit-text-stroke: 2px currentColor; } }
.tile__ver { position: relative; z-index: 0; display: flex; font-family: var(--font-display); font-weight: 900; font-stretch: 150%; font-size: min(22cqi, 8rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; pointer-events: none; }
.t-rel .tile__list { margin-top: 2px; }
.tile__ver .d { display: inline-block; height: 1em; overflow: hidden; }
.tile__ver .d i { display: block; font-style: normal; transition: transform 0.9s var(--ease-snap); }
.tile.is-hot .tile__ver .d i, .tile:focus-within .tile__ver .d i { transform: translateY(-50%); }
@media (hover: hover) { .tile:hover .tile__ver .d i { transform: translateY(-50%); } }
.tile__ver .d i b { display: block; height: 1em; font-weight: inherit; }
.tile__ver .d:nth-child(3) i { transition-delay: 0.06s; } .tile__ver .d:nth-child(5) i { transition-delay: 0.12s; }
.tile__ver > span { display: inline-block; }

/* The assembly's beats, in the system's time: each scales with the theme's tempo (--rw-tempo), as
   the system's durations do, and patchbay.js scales the beats it drives the same way */
:root, [data-theme] {
  --hub-fly: calc(860ms * var(--rw-tempo, 1)); --hub-lock: calc(var(--rw-dur-3) + var(--rw-dur-2)); --hub-seat: calc(520ms * var(--rw-tempo, 1));
  --hub-land: calc(520ms * var(--rw-tempo, 1)); --hub-flash: var(--rw-dur-4); --hub-part: calc(560ms * var(--rw-tempo, 1));
  --hub-step: calc(62ms * var(--rw-tempo, 1)); --hub-lead: calc(140ms * var(--rw-tempo, 1)); --hub-ant: calc(720ms * var(--rw-tempo, 1));
  --hub-eye: calc(320ms * var(--rw-tempo, 1)); --hub-settle: calc(520ms * var(--rw-tempo, 1)); --hub-settle-at: calc(1080ms * var(--rw-tempo, 1));
}
/* Lock: when a module reaches its slot, its edge flashes in its own ink and its jack seats */
.tile::before { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; opacity: 0; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc-ink) 60%, transparent); }
@keyframes tile-lock { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes jack-seat { 0% { transform: scale(2.1); } 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .tile.is-locking::before { animation: tile-lock var(--hub-lock) var(--ease-assemble) both; }
  .tile.is-locking .tile__jack::after { animation: jack-seat var(--hub-seat) var(--ease-snap) both; }
}
@container (max-width: 170px) { .tile__list, .tile__art { display: none; } .tile__desc { max-width: none; } }

/* Stepped: modules wait just off their edge until they scroll into view, then fly in and lock */
.is-stepped .mosaic > .tile.is-pending { transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0) rotate(var(--fr, 0deg)) scale(0.96); }
.is-stepped .mosaic > .tile.is-flying { transition: transform var(--hub-fly) var(--ease-snap), background-color var(--dur-3) var(--ease-assemble), color var(--dur-3) var(--ease-assemble); transition-delay: var(--delay, 0ms), 0ms, 0ms; will-change: transform; }

/* ---------- The keystone's roach hatches around the LED ----------
   The LED lands as the cap; the collar, the two halves of the wing case, the six legs (one
   tripod, then the other) and the antennae assemble around it in that order, the eyes open,
   and the roach settles and breathes. Without the script, or with reduced motion, the roach
   is simply there: the waiting state exists only while patchbay.js is about to play it. */
.keystone.is-awaiting .rn [data-hatch], .keystone.is-awaiting .rn__led { opacity: 0; }
@keyframes rn-land { 0% { opacity: 0; transform: scale(1.9); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes rn-flash { 0% { transform: scale(0.3); opacity: 0.95; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes rn-in-collar { from { opacity: 0; transform: scale(0.3); } }
@keyframes rn-in-wing-top { from { opacity: 0; transform: rotate(-42deg) scale(0.7); } }
@keyframes rn-in-wing-low { from { opacity: 0; transform: rotate(30deg) scale(0.7); } }
@keyframes rn-in-leg { from { opacity: 0; transform: rotate(var(--leg-from, 34deg)) scale(0.25); } }
@keyframes rn-in-ant { from { opacity: 0; transform: rotate(-64deg) scale(0.55); } }
@keyframes rn-in-eye { from { opacity: 0; transform: scaleY(0); } }
@keyframes rn-settle { 0%, 100% { transform: none; } 40% { transform: translateY(2.4px) scaleY(0.97); } 70% { transform: translateY(-1px); } }
@keyframes rn-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(-0.6px) scaleY(1.016); } }
@keyframes rn-glow { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 3px var(--signal)); } 50% { opacity: 0.78; filter: drop-shadow(0 0 1px var(--signal)); } }
.rn__leg--mf, .rn__leg--hf, .rn__leg--ff { --leg-from: -34deg; }
@media (prefers-reduced-motion: no-preference) {
  .keystone.is-landed .rn__led { animation: rn-land var(--hub-land) var(--ease-snap) both; transform-box: fill-box; transform-origin: 50% 60%; }
  .keystone.is-landed .keystone__ring { animation: rn-flash var(--hub-flash) var(--ease-assemble) both; border-color: var(--signal); }
  .keystone.is-hatching .rn [data-hatch] { animation: var(--hub-part) var(--ease-snap) both; animation-delay: calc(var(--hs, 0) * var(--hub-step) + var(--hub-lead)); }
  .keystone.is-hatching .rn .rn__collar { animation-name: rn-in-collar; }
  .keystone.is-hatching .rn .rn__wing--top { animation-name: rn-in-wing-top; }
  .keystone.is-hatching .rn .rn__wing--low { animation-name: rn-in-wing-low; }
  .keystone.is-hatching .rn .rn__leg { animation-name: rn-in-leg; }
  .keystone.is-hatching .rn .rn__ant { animation-name: rn-in-ant; animation-duration: var(--hub-ant); }
  .keystone.is-hatching .rn .rn__eye { animation-name: rn-in-eye; animation-duration: var(--hub-eye); }
  .keystone.is-hatching .rn__all { animation: rn-settle var(--hub-settle) var(--ease-snap) var(--hub-settle-at) both; }
  .keystone.is-alive .rn__all { animation: rn-breathe 4.2s var(--ease-gentle) infinite; }
  .keystone.is-alive .rn__led { animation: rn-glow 3.6s ease-in-out infinite; }
  .keystone.is-alive .rn__ant--far { animation: rn-sway-far 4.2s ease-in-out infinite; }
  .keystone.is-alive .rn__ant--near { animation: rn-sway-near 3.6s ease-in-out -1.3s infinite; }
}
.rn [data-hatch="1"] { --hs: 0; } .rn [data-hatch="2"] { --hs: 1; } .rn [data-hatch="3"] { --hs: 2; }
.rn [data-hatch="4"] { --hs: 3.4; } .rn [data-hatch="5"] { --hs: 4.1; } .rn [data-hatch="6"] { --hs: 4.8; }
.rn [data-hatch="7"] { --hs: 6; } .rn [data-hatch="8"] { --hs: 6.7; } .rn [data-hatch="9"] { --hs: 7.4; }
.rn [data-hatch="10"] { --hs: 8.6; } .rn [data-hatch="11"] { --hs: 9.1; } .rn [data-hatch="12"] { --hs: 11.4; }

/* Patch cables: drawn from the keystone's LED to the module under the pointer */
.cables { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cable { fill: none; stroke-linecap: round; }
.cable--under { stroke: var(--hover-ground); stroke-width: 13; opacity: 0.55; }
.cable--core { stroke: var(--cable, var(--kernel-accent)); stroke-width: 7; }
.cable-plug { fill: var(--cable, var(--kernel-accent)); stroke: var(--hover-ground); stroke-width: 3; }
.cables.is-on .cable { transition: stroke-dashoffset 0.5s var(--ease-assemble); }

/* Replay: plays the assembly again, for anyone who scrolled past it too fast */
.replaybar { display: flex; justify-content: flex-end; padding-top: 14px; }
.replay { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--text-muted); font-size: 0.88rem; font-weight: 650; cursor: pointer; transition: color var(--dur-1) var(--ease-assemble), border-color var(--dur-1) var(--ease-assemble); }
.replay svg { width: 18px; height: 18px; transition: transform var(--dur-3) var(--ease-snap); }
.replay:hover { color: var(--text); border-color: var(--text-soft); }
.replay:hover svg { transform: rotate(-200deg); }
.replay[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .replaybar { display: none; } }

/* ---------- Phones and narrow panes: two columns, the keystone a square of its own ---------- */
@media (max-width: 719px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(190px, auto); grid-template-areas: "start start" "guides guides" "api key" "design rel" "ref support"; }
  .mosaic > .keystone { aspect-ratio: 1; height: auto; }
  .mosaic > .keystone .keystone__mark { width: 74%; }
  .t-start { border-top-right-radius: var(--r-outer); }
  .t-ref { border-radius: 0 0 0 var(--r-outer); }
  .t-support { border-radius: 0 0 var(--r-outer) 0; }
  .panel { min-height: 0; }
  .panel__title { --cyc: 92%; font-size: clamp(1.9rem, 10.6cqi, 3.4rem); }
  .panel__top .sticker { margin-left: 0; }
  .tile__art, .tile .tile__art--flow { width: min(38cqi, 128px); }
  .tile__glyph { font-size: min(40cqi, 6rem); }
  .tile__ver { font-size: min(18cqi, 4.4rem); }
  .t-ref .tile__list { margin-top: 12px; }
}

/* ---------- Bands, sections ---------- */
.band { overflow: hidden; background: var(--pc); color: var(--pc-ink); }
.band__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.band__group { display: flex; align-items: center; }
.band__group span { font-family: var(--font-display); font-weight: 900; font-stretch: 64%; text-transform: uppercase; font-size: clamp(2.2rem, 1rem + 4.4vw, 5rem); line-height: 1; padding: 0.16em 0.32em 0.12em; white-space: nowrap; letter-spacing: 0.005em; }
.band__group b { width: 0.42em; height: 0.42em; border-radius: 50%; border: 0.09em solid currentColor; display: inline-block; flex: none; }
.band:hover .band__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.hsec { padding-block: clamp(64px, 9vw, 132px); }
.hsec + .hsec { padding-top: 0; }
.hsec__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: clamp(24px, 3.2vw, 44px); }
.hsec__title { font-size: var(--t-display); font-stretch: 128%; font-weight: 900; line-height: 0.88; letter-spacing: -0.035em; }
.hsec__note { color: var(--text-muted); max-width: 42ch; font-size: 0.98rem; }

/* Start here: three modules with a jack each */
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--seam-w); }
.module { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; min-height: 320px; padding: clamp(18px, 2vw, 26px); background: var(--surface-1); border: 1px solid var(--line); overflow: hidden; transition: background-color var(--dur-3) var(--ease-assemble), color var(--dur-3) var(--ease-assemble), border-color var(--dur-3) var(--ease-assemble); min-width: 0; }
.module:first-child { border-radius: var(--r-outer) 0 0 var(--r-outer); }
.module:last-child { border-radius: 0 var(--r-outer) var(--r-outer) 0; }
.module__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.module__jack { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--pc-accent); display: grid; place-items: center; transition: border-color var(--dur-3) var(--ease-assemble); }
.module__jack::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pc-accent); transition: background-color var(--dur-3) var(--ease-assemble), transform var(--dur-3) var(--ease-snap); }
.module__title { font-family: var(--font-display); font-weight: 850; font-stretch: 116%; font-size: clamp(1.55rem, 1.1rem + 1.3vw, 2.25rem); line-height: 0.95; letter-spacing: -0.025em; align-self: end; }
.module__title a::after { content: ""; position: absolute; inset: 0; }
.module__title a:focus-visible { outline: none; }
.module:has(a:focus-visible) { outline: 3px solid var(--text); outline-offset: 3px; }
.module__body { color: var(--text-muted); font-size: 0.98rem; transition: color var(--dur-3) var(--ease-assemble); }
.module__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.module__arrow { font-family: var(--font-display); font-weight: 900; font-stretch: 150%; font-size: 1.6rem; line-height: 1; transition: transform var(--dur-3) var(--ease-snap); }
.module:hover, .module:focus-within { background: var(--pc); color: var(--pc-ink); border-color: var(--pc); }
.module:hover .module__body, .module:focus-within .module__body { color: inherit; }
.module:hover .module__jack, .module:focus-within .module__jack { border-color: var(--pc-ink); }
.module:hover .module__jack::after, .module:focus-within .module__jack::after { background: var(--pc-ink); transform: scale(1.3); }
.module:hover .module__arrow, .module:focus-within .module__arrow { transform: translateX(6px); }
.module code { background: color-mix(in srgb, currentColor 8%, transparent); border-color: color-mix(in srgb, currentColor 20%, transparent); color: inherit; }

/* What leaves your Mac: a statement that lights up as you read it */
.statement { font-family: var(--font-display); font-weight: 820; font-stretch: 106%; font-size: var(--t-statement); line-height: 1.04; letter-spacing: -0.02em; max-width: 17em; }
.statement .w { transition: color 0.35s var(--ease-assemble); }
/* Words not yet lit still read: they wait in the soft text color (gated at 4.5:1) and light to full text */
.statement.is-armed .w { color: var(--text-soft); }
.statement.is-armed .w.is-lit { color: var(--text); }
.statement.is-armed .w.is-lit.w--hi { color: var(--signal-accent); }
.statement .ip { font-family: var(--font-mono); font-weight: 600; font-size: 0.58em; letter-spacing: 0; padding: 0.08em 0.34em; border-radius: 0.28em; border: 0.07em solid currentColor; vertical-align: 0.16em; white-space: nowrap; }
.statement .sw { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 0.18em; vertical-align: -0.04em; background: var(--pc); margin-inline: 0.04em; }
.leaves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--seam-w); margin-top: clamp(32px, 4vw, 56px); }
.leave { display: grid; gap: 10px; align-content: start; padding: 20px; background: var(--surface-1); border: 1px solid var(--line); min-width: 0; }
.leave .eyebrow { color: var(--pc-accent); }
.leave p { color: var(--text-muted); }
.leave strong { color: var(--text); font-weight: 700; }

/* Releases: tickets with a version odometer */
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--seam-w); }
.ticket { position: relative; display: grid; align-content: space-between; gap: 22px; min-height: 300px; padding: clamp(18px, 2vw, 26px); background: var(--pc); color: var(--pc-ink); overflow: hidden; min-width: 0; container-type: inline-size; }
.ticket:first-child { border-radius: var(--r-outer) 0 0 var(--r-outer); }
.ticket:last-child { border-radius: 0 var(--r-outer) var(--r-outer) 0; }
.ticket--next { background: var(--surface-1); color: var(--text); outline: 2px dashed var(--line-strong); outline-offset: -2px; }
.ticket__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ticket__meta { font-weight: 600; font-size: 0.95rem; line-height: 1.45; }
.ticket--next .ticket__meta { color: var(--text-muted); font-weight: 500; }
/* On a cord ticket the meta line is the cord's ink: .chintro p would make it muted text, which is light on the light papers */
.ticket:not(.ticket--next) .ticket__meta { color: var(--pc-ink); }
.odo { display: flex; font-family: var(--font-display); font-weight: 900; font-stretch: 150%; font-size: min(26cqi, 7rem); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.odo__d { display: inline-block; height: 1em; overflow: hidden; }
.odo__strip { display: block; transform: translateY(calc(var(--n, 0) * -1em)); }
.odo.is-rolling .odo__strip { transition: transform 1.4s var(--ease-assemble); }
.odo__strip b { display: block; height: 1em; font-weight: inherit; }
.ticket--next .odo { color: transparent; -webkit-text-stroke: 2px var(--text-soft); }

/* Every page: the patch panel */
.patchpanel { columns: 4 250px; column-gap: var(--seam-w); }
.ppg { break-inside: avoid; margin-bottom: var(--seam-w); background: var(--surface-1); border: 1px solid var(--line); }
.ppg__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 16px 12px; background: var(--pc); color: var(--pc-ink); }
.ppg__head a, .ppg__head span:first-child { font-family: var(--font-display); font-weight: 850; font-stretch: 114%; font-size: 1.25rem; line-height: 1; letter-spacing: -0.02em; }
.ppg__head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ppg__list { list-style: none; padding: 8px; display: grid; gap: 1px; }
.ppg__list a, .ppg__list span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 0.93rem; line-height: 1.35; }
.ppg__list a { color: var(--text); font-weight: 600; }
.ppg__list a::after { content: "→"; color: var(--pc-accent); font-weight: 800; }
.ppg__list a:hover { background: var(--surface-2); }
.ppg__list span { color: var(--text-soft); }
.ppg__list span::after { content: "planned"; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.footnote { margin-top: 18px; color: var(--text-soft); font-size: 0.88rem; }
/* ============================== PAGES ============================== */
/* Page hero: the chapter's cord, edge to edge, with the page's word set huge */
.phero { position: relative; isolation: isolate; overflow: hidden; background: var(--pc); color: var(--pc-ink); view-transition-name: phero; }
.phero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: clamp(18px, 2.6vw, 30px); min-height: clamp(400px, 62vh, 660px); padding-block: clamp(24px, 3.6vw, 48px) clamp(30px, 4.6vw, 64px); container-type: inline-size; }
.phero__crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.phero__crumbs a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.phero__crumbs .sticker { margin-left: 6px; }
.phero__title { font-family: var(--font-display); text-wrap: initial; }
.phero__word { display: block; width: max-content; max-width: none; font-weight: 900; font-stretch: 150%; font-size: var(--fit-size, var(--t-mega)); line-height: 0.8; letter-spacing: -0.045em; margin-left: -0.05em; white-space: nowrap; }
.phero__sub { display: block; margin-top: 0.55em; font-weight: 750; font-stretch: 100%; font-size: clamp(1.3rem, 1rem + 1.3vw, 2.2rem); line-height: 1.05; letter-spacing: -0.015em; }
/* While the props float on the right (1000 px and up), the subtitle wraps before it reaches them */
@media (min-width: 1000px) { .phero__sub { max-width: 60%; text-wrap: balance; } }
.phero__lede { max-width: 60ch; font-size: clamp(1.02rem, 0.94rem + 0.32vw, 1.22rem); font-weight: 520; line-height: 1.5; }
.phero code { background: color-mix(in srgb, var(--pc-ink) 9%, transparent); border-color: color-mix(in srgb, var(--pc-ink) 26%, transparent); color: inherit; }
.phero .chip { border-color: color-mix(in srgb, var(--pc-ink) 38%, transparent); }
.phero__props { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.prop { position: absolute; display: flex; align-items: center; gap: 8px; animation: bob 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.prop__card { background: var(--console); color: var(--console-text); border-radius: var(--r-md); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.6; padding: 12px 14px; min-width: 0; }
.prop__card .ok { color: var(--signal); }
.prop__card .c { color: var(--console-soft); }
.prop__chip { padding: 9px 14px; border-radius: var(--r-pill); background: var(--pc-ink); color: var(--pc); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25); white-space: nowrap; }
.prop__cursor { display: flex; align-items: flex-start; gap: 4px; }
.prop__cursor svg { width: 22px; height: 22px; }
.prop__cursor span { margin-top: 14px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--kernel); color: var(--kernel-ink); font-size: 0.72rem; font-weight: 700; }
.prop__button { padding: 8px 14px; border-radius: 8px; background: #fff; color: #111; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 0.82rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 100%; animation: type 2.4s steps(44) 0.5s both; }
@keyframes type { from { max-width: 0; } }
.prop__curve { width: 150px; height: 110px; }
.prop__curve path, .prop__curve line { fill: none; stroke: var(--pc-ink); stroke-width: 3; stroke-linecap: round; }
.prop__curve circle { fill: var(--pc); stroke: var(--pc-ink); stroke-width: 3; }
.prop__aa { font-family: var(--font-display); font-weight: 900; font-size: 3.6rem; line-height: 0.9; animation: stretch 4s var(--ease-assemble) infinite alternate; }
@keyframes stretch { from { font-stretch: 50%; } to { font-stretch: 150%; } }
.prop__swatches { display: grid; grid-template-columns: repeat(4, 22px); gap: 4px; padding: 10px; border-radius: var(--r-md); background: var(--console); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); }
.prop__swatches i { width: 22px; height: 22px; border-radius: 4px; background: var(--pc); }
.prop--art { right: 6%; top: 50%; width: min(30vw, 380px); aspect-ratio: 1; margin-top: calc(min(30vw, 380px) / -2); color: var(--pc-ink); display: grid; place-items: center; }
.prop--art .art { width: 100%; height: 100%; }
.prop--art .tile__glyph, .prop--art .tile__ver { position: static; font-size: clamp(5rem, 12vw, 12rem); }

/* ---------- Shell: rail, content, outline ---------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr) 206px; gap: clamp(28px, 3.6vw, 60px); align-items: start; padding-block: clamp(32px, 4vw, 56px) clamp(56px, 6vw, 96px); }
.rail { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 20px); max-height: calc(100vh - var(--dock-h) - 40px); overflow-y: auto; scrollbar-width: thin; display: grid; gap: 26px; font-size: 0.92rem; }
.rail__head { display: block; margin: 0 0 8px 10px; color: var(--text-soft); }
.rail__list { list-style: none; padding: 0; display: grid; gap: 2px; }
.rail__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 6px 10px; border-radius: var(--r-sm); color: var(--text-muted); line-height: 1.35; }
a.rail__item:hover { color: var(--text); background: var(--surface-2); }
a.rail__item[aria-current="page"] { background: var(--pc); color: var(--pc-ink); font-weight: 700; }
span.rail__item { color: var(--text-soft); }
.rail__n { font-family: var(--font-mono); font-size: 0.7rem; }
.rail__sq { width: 8px; height: 8px; background: currentColor; opacity: 0.55; align-self: center; }
.rail__chapters .rail__item { grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 10px; }
.rail__chapters i { width: 12px; height: 12px; background: var(--pc); }
.main { min-width: 0; }
.outline { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 20px); font-size: 0.86rem; }
/* The outline paints after the reading column, so a full-size veil pool would haze over the column's right edge; a tighter one keeps to the gutter */
.outline { --rw-veil-spread: 24px; --rw-veil-blur: 20px; }
/* Small caps at the outline's top edge, where its pool is thinnest: muted, not soft */
.outline__head { display: block; margin-bottom: 10px; color: var(--text-muted); }
.outline__list { list-style: none; padding: 0; display: grid; border-left: 1px solid var(--line); }
.outline__list a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 3px solid transparent; color: var(--text-muted); line-height: 1.35; transition: color var(--dur-1) var(--ease-assemble), border-color var(--dur-1) var(--ease-assemble); }
.outline__list a.is-h3 { padding-left: 26px; font-size: 0.82rem; }
.outline__list a:hover { color: var(--text); }
.outline__list a.is-current { color: var(--text); border-left-color: var(--pc-accent); }
.outline__keys { display: grid; gap: 6px; margin-top: 20px; color: var(--text-soft); font-size: 0.76rem; }
.outline-inline { display: none; margin-bottom: 28px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-1); }
.outline-inline summary { cursor: pointer; padding: 11px 14px; color: var(--text-soft); }
.outline-inline .outline__list { border-left: 0; padding: 0 14px 12px; }

/* ---------- Prose ---------- */
.prose { max-width: var(--measure); display: grid; gap: 18px; min-width: 0; }
.prose > * { min-width: 0; }
.prose h2 { font-size: var(--t-h2); font-stretch: 118%; font-weight: 880; margin-top: 44px; letter-spacing: -0.03em; scroll-margin-top: 24px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-text); font-weight: 750; font-stretch: 100%; font-size: var(--t-h3); letter-spacing: -0.005em; margin-top: 10px; scroll-margin-top: 24px; }
.prose ul, .prose ol:not(.steps) { padding-left: 22px; display: grid; gap: 9px; }
.prose li::marker { color: var(--pc-accent); }
.prose a, .link { color: var(--pc-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--pc-accent) 42%, transparent); transition: text-decoration-color var(--dur-1) var(--ease-assemble); }
.prose a:hover, .link:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 720; }
.steps { list-style: none; padding: 0; display: grid; counter-reset: step; border-top: 1px solid var(--line); }
.steps > li { counter-increment: step; display: grid; grid-template-columns: clamp(52px, 7vw, 84px) minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps > li::before { content: counter(step); font-family: var(--font-display); font-weight: 900; font-stretch: 150%; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 0.78; color: var(--pc-accent); letter-spacing: -0.04em; }
.steps > li > div { display: grid; gap: 12px; min-width: 0; }

.console { border-radius: var(--r-md); background: var(--console); color: var(--console-text); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); max-width: 100%; min-width: 0; }
.console__bar { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; background: var(--pc); color: var(--pc-ink); }
.console__jack { width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid currentColor; flex: none; }
.console__copy { margin-left: auto; padding: 4px 11px; border-radius: var(--r-pill); border: 1.5px solid color-mix(in srgb, var(--pc-ink) 60%, transparent); background: transparent; color: inherit; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; cursor: pointer; transition: background-color var(--dur-1) var(--ease-assemble), color var(--dur-1) var(--ease-assemble); }
.console__copy:hover, .console__copy.is-done { background: var(--pc-ink); color: var(--pc); }
.console__body { margin: 0; padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.7; }
.console__body .c { color: var(--console-soft); } .console__body .o { color: var(--console-out); } .console__body .ok { color: var(--signal); }

.callout { position: relative; display: grid; gap: 10px; justify-items: start; padding: 18px 18px 18px; border-radius: var(--r-md); background: color-mix(in srgb, var(--pc) 12%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--pc) 36%, transparent); }
.callout p { justify-self: stretch; }
.callout--hazard { background: color-mix(in srgb, var(--hazard) 9%, var(--surface-1)); border-color: color-mix(in srgb, var(--hazard) 48%, transparent); padding-top: 24px; }
.callout--hazard::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; border-radius: var(--r-md) var(--r-md) 0 0; background: repeating-linear-gradient(135deg, var(--hazard) 0 9px, transparent 9px 18px); }

.tablewrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-1); }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--pc); color: var(--pc-ink); white-space: nowrap; }
thead code { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); text-transform: none; letter-spacing: 0; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--dur-1) var(--ease-assemble); }
tbody tr:hover { background: color-mix(in srgb, var(--pc) 7%, transparent); }
td code { white-space: nowrap; overflow-wrap: normal; }
.pill { display: inline-flex; padding: 2px 9px; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700; border: 1px solid var(--line-strong); color: var(--text-muted); }
.pill--yes { background: var(--pc); color: var(--pc-ink); border-color: var(--pc); }

/* API: the loopback map and rule cards */
.loopmap { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seam-w); padding: clamp(14px, 2vw, 20px); border-radius: var(--r-outer); background: var(--surface-1); border: 1px solid var(--line); overflow: hidden; }
.loopmap__ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.loopmap__ring rect { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 5 7; }
.loopmap__ring circle { fill: var(--pc-accent); }
.loopmap__core { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: var(--r-pill); background: var(--kernel); color: var(--kernel-ink); font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; box-shadow: 0 0 0 8px var(--surface-1); white-space: nowrap; }
.node { position: relative; z-index: 1; display: grid; gap: 6px; align-content: start; min-height: 150px; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.node__name { font-family: var(--font-display); font-weight: 850; font-stretch: 112%; font-size: 1.3rem; line-height: 1; letter-spacing: -0.02em; }
.node__port { justify-self: start; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--pc); color: var(--pc-ink); }
.node p { color: var(--text-muted); font-size: 0.9rem; }
.node:nth-of-type(2n) { text-align: right; justify-items: end; } .node:nth-of-type(2n) .node__port { justify-self: end; }
.rulecards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seam-w); }
.rulecard { display: grid; gap: 8px; align-content: start; padding: 18px; background: var(--surface-1); border: 1px solid var(--line); min-width: 0; }
.rulecard__code { font-family: var(--font-display); font-weight: 900; font-stretch: 140%; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); line-height: 0.86; letter-spacing: -0.035em; color: var(--pc-accent); }
.rulecard__title { font-weight: 760; }
.rulecard p { color: var(--text-muted); font-size: 0.95rem; }

.routes { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-1); overflow: hidden; max-width: 100%; }
.routes__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; background: var(--pc); color: var(--pc-ink); }
.routes__filter { flex: 1 1 200px; min-width: 0; padding: 9px 14px; border-radius: var(--r-pill); border: 0; background: var(--console); color: var(--console-text); font-family: var(--font-mono); font-size: 0.84rem; }
.routes__filter::placeholder { color: var(--console-soft); }
.routes__count { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; }
.routes__list { list-style: none; padding: 0; }
.route { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.route:last-child { border-bottom: 0; }
.method { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; padding: 3px 0; text-align: center; border-radius: 4px; }
.method--get { background: var(--signal); color: var(--signal-ink); }
.method--post { background: var(--kernel); color: var(--kernel-ink); }
.method--put { background: var(--amber); color: var(--amber-ink); }
.method--delete { background: var(--hazard-fill); color: var(--on-hazard); }
.route__path { font-family: var(--font-mono); font-size: 0.86rem; overflow-wrap: anywhere; }
.route__group { margin-left: 8px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.route__title { font-size: 0.86rem; color: var(--text-muted); }
.routes__empty { padding: 16px 12px; color: var(--text-soft); }

.pagefoot { display: grid; gap: 16px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); }
.pagefoot__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.84rem; color: var(--text-soft); }
.pagefoot__meta a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--seam-w); }
.pager a, .pager span { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface-1); border: 1px solid var(--line); min-width: 0; transition: background-color var(--dur-2) var(--ease-assemble), color var(--dur-2) var(--ease-assemble); }
.pager a:hover { background: var(--pc); color: var(--pc-ink); }
.pager small { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.pager b { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: 1.1rem; }
.pager .is-next { text-align: right; }
.pager span { color: var(--text-soft); }

/* ---------- Chapter overview pages ---------- */
.chpages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--seam-w); padding-block: clamp(36px, 4.5vw, 64px) clamp(56px, 6vw, 96px); }
.chpage { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; min-height: 180px; padding: 18px; background: var(--surface-1); border: 1px solid var(--line); min-width: 0; }
.chpage__title { font-family: var(--font-display); font-weight: 850; font-stretch: 112%; font-size: 1.4rem; line-height: 1; letter-spacing: -0.02em; align-self: end; }
.chpage--live { background: var(--pc); color: var(--pc-ink); border-color: var(--pc); transition: transform var(--dur-3) var(--ease-snap); }
.chpage--live:hover { transform: translateY(-4px); }
.chpage--live .chpage__title a::after { content: ""; position: absolute; inset: 0; }
.chpage--live:has(a:focus-visible) { outline: 3px solid var(--text); outline-offset: 3px; }
.chpage--live a:focus-visible { outline: none; }
.chpage__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--text-soft); }
.chpage--live .chpage__foot { color: inherit; }
.chintro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding-top: clamp(36px, 4.5vw, 64px); }
.chintro p { color: var(--text-muted); max-width: 60ch; }
.chintro .tickets { grid-column: 1 / -1; }
/* ============================== PATCHBAY PAGE ============================== */
.ds { container: ds / inline-size; display: grid; gap: clamp(56px, 7vw, 96px); min-width: 0; }
.ds > section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.ds h2 { font-size: min(var(--t-display), 10.8cqi); font-stretch: 128%; font-weight: 900; line-height: 0.9; letter-spacing: -0.035em; scroll-margin-top: 24px; }
.ds h3 { font-family: var(--font-mono); font-weight: 600; font-stretch: 100%; font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); scroll-margin-top: 24px; }
.ds__intro { max-width: 62ch; color: var(--text-muted); font-size: 1.06rem; }

.rules5 { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); }
.rules5 li { display: grid; grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rules5 b { font-family: var(--font-display); font-weight: 900; font-stretch: 116%; font-size: clamp(1.4rem, 1.05rem + 1vw, 2.05rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--pc-accent); }
.rules5 strong { display: block; font-weight: 760; font-size: 1.08rem; margin-bottom: 4px; }
.rules5 p { color: var(--text-muted); }

/* Color: the cord deck */
.deck { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: center; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--r-outer); background: var(--surface-1); border: 1px solid var(--line); }
.deck__tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.deck__tabs button { padding: 7px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: transparent; cursor: pointer; font-weight: 700; font-size: 0.86rem; color: var(--text-muted); }
.deck__tabs button[aria-selected="true"] { background: var(--text); color: var(--ground); border-color: var(--text); }
.deck__fan { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 290px; padding: 44px 12px 6px; }
.deck__card { position: relative; flex: none; width: clamp(58px, 11cqi, 104px); height: clamp(170px, 30cqi, 236px); margin: 0 clamp(-13px, -1.4cqi, -6px); padding: 12px 10px; border: 0; border-radius: 14px; background: var(--pc); color: var(--pc-ink); cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; text-align: left; transform: translateY(var(--dy, 0px)) rotate(calc(var(--rot, 0deg) * var(--fan-spread, 1))); transform-origin: 50% 110%; transition: transform 0.55s var(--ease-snap), width 0.45s var(--ease-assemble), margin 0.45s var(--ease-assemble); box-shadow: -6px 0 18px rgba(0, 0, 0, 0.2); z-index: var(--z, 1); }
.deck__card[aria-pressed="true"] { width: clamp(92px, 19cqi, 172px); margin: 0 clamp(6px, 1.4cqi, 14px); }
/* Cards after the pressed one show their right edge, so their label and shadow sit on that side */
.deck__card[data-side="after"] { align-items: flex-end; text-align: right; box-shadow: 6px 0 18px rgba(0, 0, 0, 0.2); }
.deck__card[aria-pressed="true"] { box-shadow: -6px 0 18px rgba(0, 0, 0, 0.2), 6px 0 18px rgba(0, 0, 0, 0.2); }
/* A narrow deck fans its cords at a smaller angle and overlaps them a little more, so the whole fan stays inside its module */
@container (max-width: 600px) {
  .deck__card { --fan-spread: 0.5; margin: 0 -13px; align-items: flex-start; }
  .deck__card[aria-pressed="true"] { margin: 0 6px; }
  /* Strips this narrow carry their names upright along the open edge, the way paint chips do */
  .deck__card span, .deck__card small { writing-mode: vertical-rl; transform: rotate(180deg); }
}
@container (max-width: 460px) {
  .deck__card { --fan-spread: 0.3; }
}
/* A folded card's name narrows to fit (Anybody is variable in width); the chosen card's name widens with it */
.deck__card span { font-family: var(--font-display); font-weight: 850; font-stretch: 76%; font-size: clamp(0.78rem, 2.1cqi, 1rem); line-height: 1; transition: font-stretch 0.45s var(--ease-assemble); }
.deck__card[aria-pressed="true"] span { font-stretch: 104%; }
.deck__card small { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em; }
/* A wide fan bunches the cards' feet together under the next card's shadow, so there the hex code rides up under the name, where the cards fan apart; the shadows stay tight (6 px out, 18 px blur, 20%) so they never reach the next card's labels */
@container (width > 600px) {
  .deck__card { justify-content: flex-start; gap: 6px; }
}
.deck__card:focus-visible { outline-offset: 4px; }
.deck__info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px 28px; align-items: start; min-width: 0; }
.deck__meta, .deck__right { display: grid; gap: 12px; align-content: start; min-width: 0; }
.deck__name { font-family: var(--font-display); font-weight: 900; font-stretch: 130%; font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); line-height: 0.9; letter-spacing: -0.03em; }
.deck__use { color: var(--text-muted); }
.deck__vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seam-w); }
.deck__val { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.deck__val i { height: 40px; border-radius: 6px; border: 1px solid var(--line); }
.deck__val code { font-size: 0.74rem; background: transparent; border: 0; padding: 0; }
.deck__ratio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.deck__ratio b { font-family: var(--font-display); font-weight: 900; font-stretch: 140%; font-size: 2.2rem; line-height: 1; }
.deck__sample { padding: 14px; border-radius: var(--r-md); font-weight: 700; }

/* Type: the tester and the randomizer */
.tester { display: grid; gap: 18px; padding: clamp(18px, 3vw, 32px); border-radius: var(--r-outer); background: var(--surface-1); border: 1px solid var(--line); min-width: 0; }
.tester__sample { font-family: var(--font-display); font-size: clamp(2.2rem, 0.6rem + 4.6vw, 5.6rem); line-height: 0.92; letter-spacing: -0.025em; outline: none; overflow-wrap: anywhere; border-radius: 6px; min-height: 1em; }
.tester__sample:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.tester__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 18px; align-items: end; }
.ctrl { display: grid; gap: 6px; font-size: 0.84rem; color: var(--text-muted); min-width: 0; }
.ctrl span { display: flex; justify-content: space-between; gap: 8px; }
.ctrl output { font-family: var(--font-mono); color: var(--text); }
input[type="range"] { width: 100%; accent-color: var(--pc-accent); }
.toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: transparent; cursor: pointer; font-weight: 700; font-size: 0.86rem; }
.toggle[aria-pressed="true"] { background: var(--pc); color: var(--pc-ink); border-color: var(--pc); }
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seam-w); }
.role { container-type: inline-size; display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--surface-1); border: 1px solid var(--line); min-width: 0; }
.role__spec { font-size: 2.1rem; line-height: 1; overflow-wrap: anywhere; }
.role small { color: var(--text-soft); font-size: 0.8rem; }
.compo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(84px, 9vw, 128px); gap: var(--seam-w); }
.compo__cell { container-type: size; display: flex; align-items: center; justify-content: center; padding: 6px 10px; overflow: hidden; background: var(--pc); color: var(--pc-ink); min-width: 0; }
.compo__cell span { font-family: var(--font-display); font-size: min(52cqh, 15cqw); line-height: 0.9; white-space: nowrap; letter-spacing: -0.02em; }
.compo-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

.specs { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.specs li { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 14px; background: var(--surface-1); font-size: 0.9rem; }
.specs code { justify-self: start; font-size: 0.76rem; }

/* Motion */
.easings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seam-w); }
.easing { display: grid; gap: 12px; align-content: start; padding: 18px; background: var(--surface-1); border: 1px solid var(--line); min-width: 0; }
.easing svg { width: 100%; height: auto; max-width: 240px; }
.easing svg .axis { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }
.easing svg .curve { stroke: var(--pc-accent); stroke-width: 4; fill: none; stroke-linecap: round; }
.easing svg .handle { stroke: var(--text-soft); stroke-width: 1.5; fill: none; stroke-dasharray: 3 4; }
.easing svg circle { fill: var(--surface-1); stroke: var(--pc-accent); stroke-width: 3; }
.easing__name { font-family: var(--font-display); font-weight: 850; font-stretch: 116%; font-size: 1.35rem; line-height: 1; }
.easing p { color: var(--text-muted); font-size: 0.92rem; }
.easing__track { position: relative; height: 26px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); container-type: inline-size; }
.easing__dot { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--pc); animation: glide 2.2s var(--curve) infinite alternate; }
@keyframes glide { to { transform: translateX(calc((100cqw - 24px) * var(--travel, 1))); } }

/* ---------- Brand page: the identity ---------- */
.ds__body { max-width: 68ch; color: var(--text-muted); }
/* A section's own sub-heads are display type; eyebrow-sized h3s stay for labels inside specimens */
.ds > section > h3, .ds .compo-bar h3 { margin-top: 22px; font-family: var(--font-display); font-weight: 850; font-stretch: 114%; font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.8rem); letter-spacing: -0.02em; line-height: 1; text-transform: none; color: var(--text); }
.idcap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; opacity: 0.82; }
.idboard { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--seam-w); }
.idhero { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; margin: 0; min-height: 380px; padding: 16px 18px 18px; border-radius: var(--r-outer) 0 0 var(--r-outer); background: radial-gradient(90% 70% at 30% 20%, color-mix(in srgb, var(--k-600) 22%, transparent), transparent 70%), #06060b; color: #f3f2f8; border: 1px solid rgba(205, 198, 255, 0.12); overflow: hidden; }
.idhero__mascot { align-self: center; justify-self: center; width: min(92%, 440px); }
.idhero__hint { color: #aba8bb; font-size: 0.88rem; text-align: center; }
.idnotes { display: grid; align-content: center; gap: 14px; padding: clamp(18px, 2.4vw, 30px); border-radius: 0 var(--r-outer) var(--r-outer) 0; background: var(--surface-1); border: 1px solid var(--line); }
.idnotes h3 { margin: 0; }
.brandnotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: var(--text-muted); }
.brandnotes b { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }

/* Specimen surfaces: fixed grounds, whatever the page theme */
.spec, .vtile, .use__stage, .dd { --rn-ink: #06060b; }
.spec--night, .vtile--night, .dd--night { background: #06060b; color: #f7eeff; border: 1px solid rgba(205, 198, 255, 0.12); }
.spec--paper, .vtile--paper, .dd--paper, .use__stage--paper { background: #f4f5fa; color: #0e0c17; border: 1px solid rgba(30, 24, 70, 0.14); }
.spec--violet, .vtile--violet { background: var(--kernel-lit); color: #f7eeff; border: 1px solid transparent; }
.spec--violet .idcap { opacity: 1; }   /* dimmed like the others, the caption read 4.0:1 on the violet */
.specs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--seam-w); }
.spec { display: grid; grid-template-rows: auto 1fr; gap: 18px; margin: 0; min-height: 210px; padding: 14px 16px 22px; min-width: 0; container-type: inline-size; }
.spec:first-child { border-radius: var(--r-outer) 0 0 var(--r-outer); }
.spec:last-child { border-radius: 0 var(--r-outer) var(--r-outer) 0; }
.spec .spec__mark { align-self: center; justify-self: center; width: auto; height: auto; max-width: 100%; max-height: var(--spec-h, 72px); }
.spec--compact { --spec-h: 44px; } .spec--stacked { --spec-h: 132px; }
/* The lockups: three kinds, each in its five treatments, on the grounds they're made for */
.lockups { display: grid; gap: 22px; }
.lockrow { display: grid; gap: 10px; }
.lockrow__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.lockrow__head b { font-family: var(--font-display); font-weight: 850; font-stretch: 116%; font-size: 1.2rem; }
.lockrow__grid { --min: 250px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min)), 1fr)); gap: var(--seam-w); border-radius: var(--r-outer); overflow: hidden; }
.lockrow--compact .lockrow__grid { --min: 200px; }
.lockrow--stacked .lockrow__grid { --min: 170px; }
.lockrow .spec { min-height: 150px; border-radius: 0; }
.lockrow--stacked .spec { min-height: 210px; }
.variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--seam-w); }
.vtile { display: grid; grid-template-rows: 1fr auto; gap: 12px; justify-items: center; margin: 0; min-height: 190px; padding: 22px 16px 14px; min-width: 0; }
.vtile:first-child { border-top-left-radius: var(--r-outer); } .vtile:nth-child(3) { border-top-right-radius: var(--r-outer); }
.vtile:nth-child(4) { border-bottom-left-radius: var(--r-outer); } .vtile:last-child { border-bottom-right-radius: var(--r-outer); }
.vtile__m { align-self: center; display: block; width: min(76%, 220px); }
.vtile figcaption, .use figcaption, .dd figcaption { font-size: 0.86rem; }
.vtile figcaption { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.78; }
/* the specimen's one-line story under its label, in the reading face */
.vtile figcaption span { display: block; margin-top: 4px; font-family: var(--font-text); font-size: 0.8rem; letter-spacing: 0; text-transform: none; line-height: 1.35; }

.sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 28px; padding: 24px; border-radius: var(--r-outer); background: #06060b; color: #f3f2f8; border: 1px solid rgba(205, 198, 255, 0.12); --rn-ink: #06060b; }
.sizes__fig { margin: 0; display: grid; justify-items: center; gap: 10px; }
.sizes__fig figcaption { font-family: var(--font-mono); font-size: 0.7rem; color: #9b98ad; }
.sizes__m { display: block; width: var(--s); color: #f3f2f8; }
/* The hinted micro-marks show at their own size, pixel for pixel; the vector sits between sizes */
.sizes__m .micro { width: var(--s); height: var(--s); max-width: none; image-rendering: pixelated; }
.sizes__sep { align-self: stretch; width: 1px; background: rgba(205, 198, 255, 0.2); }
.sz-16 { --s: 16px; } .sz-20 { --s: 20px; } .sz-24 { --s: 24px; } .sz-32 { --s: 32px; } .sz-40 { --s: 40px; }
.sz-48 { --s: 48px; } .sz-64 { --s: 64px; } .sz-96 { --s: 96px; } .sz-128 { --s: 128px; }

.inuse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seam-w); }
.use { display: grid; grid-template-rows: 1fr auto; gap: 12px; margin: 0; padding: 14px; background: var(--surface-1); border: 1px solid var(--line); min-width: 0; color: var(--text-muted); }
.use__stage { display: grid; place-items: center; min-height: 150px; padding: 18px; border-radius: var(--r-md); background: #06060b; color: #f7eeff; overflow: hidden; }
.use__stage .minidock .markimg { height: 16px; width: auto; }
.use__stage .minidock { width: 100%; max-width: 380px; background: #0b0a12; border-color: rgba(205, 198, 255, 0.14); color: #f3f2f8; }
.use__keystone { width: 128px; height: 128px; cursor: default; }
.use__stage--foot { place-items: start; align-content: center; gap: 8px; background: #0e0d16; color: #aba8bb; font-size: 0.84rem; }
.use__stage--foot .markimg { height: 1.85rem; width: auto; }
.use__stage.use__stage--paper { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; gap: 10px 14px; background: #f4f5fa; color: #0e0c17; }
.use__stage--paper .markimg { height: 1.55rem; width: auto; }
.use__docs { padding: 3px 8px; border-radius: var(--r-pill); border: 1.5px solid rgba(14, 12, 23, 0.4); }
.use__crumb { flex-basis: 100%; font-size: 0.86rem; color: #4e4b60; }

.clearspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--seam-w); }
.clearspace__fig { container-type: inline-size; display: grid; place-items: center; margin: 0; padding: 44px 20px 24px; border-radius: var(--r-outer) var(--r-outer) 0 0; background: #06060b; color: #f7eeff; border: 1px solid rgba(205, 198, 255, 0.12); }
.clearspace__box { --h: min(72px, calc((100cqi - 8px) / 6.6)); position: relative; display: inline-block; padding: calc(var(--h) * 0.39); outline: 1px dashed color-mix(in srgb, var(--k-400) 70%, transparent); outline-offset: 0; background: color-mix(in srgb, var(--k-400) 8%, transparent); }
.clearspace__box .markimg { height: var(--h); width: auto; max-width: none; outline: 1px solid color-mix(in srgb, var(--k-400) 45%, transparent); }
.clearspace__x { position: absolute; font-family: var(--font-mono); font-size: max(10px, calc(var(--h) * 0.2)); font-style: normal; color: color-mix(in srgb, var(--k-300) 55%, #f7eeff); line-height: 1; }
.clearspace__x--t { left: 50%; top: 5px; transform: translateX(-50%); }
.clearspace__x--b { left: 50%; bottom: 5px; transform: translateX(-50%); }
.clearspace__x--l { left: 7px; top: 50%; transform: translateY(-50%); }
.clearspace__x--r { right: 7px; top: 50%; transform: translateY(-50%); }
.clearspace__fig { gap: 18px; }
.clearspace__cap { max-width: 34ch; text-align: center; font-size: 0.86rem; color: #aba8bb; }
.clearspace__rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px 18px; padding: 18px 20px 20px; border-radius: 0 0 var(--r-outer) var(--r-outer); background: var(--surface-1); border: 1px solid var(--line); }
.clearspace__group { display: grid; gap: 10px; min-width: 0; }
.clearspace__h { color: var(--text-soft); font-weight: 600; font-stretch: 100%; }
.clearspace__group .specs li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.clearspace__rules .specs { border-radius: var(--r-md); }
.specs--wide li { grid-template-columns: minmax(8em, 0.36fr) minmax(0, 1fr); }
.clearspace .specs { overflow: hidden; }

/* ---------- Brand page: color ---------- */
.ramp { display: grid; gap: var(--seam-w); }
.ramp__strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.ramp__step { --k: var(--k-600); display: grid; gap: 4px; min-width: 0; }
.ramp__chip { height: 84px; border-radius: var(--r-sm); background: var(--k); border: 1px solid var(--line); }
.ramp__strip .is-key .ramp__chip { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--k-500); }
.ramp__n { font-family: var(--font-display); font-weight: 850; font-stretch: 112%; font-size: 1.02rem; line-height: 1; margin-top: 6px; }
.ramp__hex { font-size: 0.66rem; background: none; border: 0; padding: 0; color: var(--text-muted); overflow: hidden; text-overflow: clip; }
.ramptable td:nth-child(4), .ramptable td:nth-child(5) { font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap; }
.ramptable th[scope="row"] { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 850; letter-spacing: 0; text-transform: none; background: transparent; color: var(--text); }
.ramptable tr.is-key td, .ramptable tr.is-key th { background: color-mix(in srgb, var(--k-600) 12%, transparent); }
.ramp__dot { width: 14px; height: 14px; border-radius: 4px; background: var(--k); border: 1px solid var(--line); flex: none; }
.ramp__step--50 { --k: var(--k-50); } .ramp__step--100 { --k: var(--k-100); } .ramp__step--200 { --k: var(--k-200); } .ramp__step--300 { --k: var(--k-300); }
.ramp__step--400 { --k: var(--k-400); } .ramp__step--500 { --k: var(--k-500); } .ramp__step--600 { --k: var(--k-600); } .ramp__step--700 { --k: var(--k-700); }
.ramp__step--800 { --k: var(--k-800); } .ramp__step--900 { --k: var(--k-900); } .ramp__step--950 { --k: var(--k-950); }
.swatches3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--seam-w); }
.swatchcard { display: grid; gap: 6px; align-content: start; padding: 16px; background: var(--surface-1); border: 1px solid var(--line); min-width: 0; }
.swatchcard b { font-family: var(--font-display); font-weight: 850; font-stretch: 112%; font-size: 1.2rem; line-height: 1; }
.swatchcard code { justify-self: start; font-size: 0.74rem; }
.swatchcard p { color: var(--text-muted); font-size: 0.92rem; }
.swatchcard__chip { height: 46px; border-radius: var(--r-sm); background: var(--pc); margin-bottom: 6px; }
.swatchcard--hazard .swatchcard__chip { background: var(--hazard-fill); }
.swatchcard__ring { height: 46px; margin-bottom: 6px; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 0 0 0 3px var(--focus); }
.rulecards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rulecards--3 .rulecard__code { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-stretch: 116%; }

/* ---------- Brand page: type ---------- */
.role__spec--wordmark .wm { --wm-h: 0.82em; }
.tscale { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.tscale li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.tscale code { justify-self: start; font-size: 0.74rem; }
/* Each specimen sits in its own container and sizes to it, so the biggest step never runs wide */
.tscale__cell { display: block; container-type: inline-size; min-width: 0; }
.tscale__s { display: block; min-width: 0; white-space: nowrap; }
.tscale__s--mega { font-family: var(--font-display); font-weight: 900; font-stretch: 150%; font-size: min(var(--t-mega), 18.5cqi); line-height: 0.82; letter-spacing: -0.045em; }
.tscale__s--display { font-family: var(--font-display); font-weight: 900; font-stretch: 128%; font-size: min(var(--t-display), 12cqi); line-height: 0.9; letter-spacing: -0.035em; }
.tscale__s--h1 { font-family: var(--font-display); font-weight: 850; font-stretch: 116%; font-size: min(var(--t-h1), 10.8cqi); line-height: 1; }
.tscale__s--h2 { font-family: var(--font-display); font-weight: 880; font-stretch: 118%; font-size: min(var(--t-h2), 6.5cqi); line-height: 1; letter-spacing: -0.03em; }
.tscale__s--body { font-size: var(--t-body); white-space: normal; color: var(--text-muted); }
.tscale__s--micro { font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- Brand page: the motion showcase ----------
   Each demo shows its finished state until it plays, so with no script, or with Reduce Motion,
   it's a complete picture. patchbay-showcase.js adds .is-on to play it, removes and re-adds it
   to replay, and .is-paused freezes every animation inside. */
.demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seam-w); }
.demos__still-note { display: none; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong); color: var(--text-muted); font-size: 0.92rem; }
.demo { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; margin: 0; padding: 14px; background: var(--surface-1); border: 1px solid var(--line); min-width: 0; }
.demo--wide { grid-column: 1 / -1; }
@container ds (min-width: 980px) {
  .demo--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; column-gap: 22px; }
  .demo--wide .demo__stage { grid-row: 1 / 3; }
  .demo--wide .demo__frames { grid-column: 1 / -1; }
}
.demo__stage { position: relative; height: 240px; border-radius: var(--r-md); background: var(--ground); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.demo--wide .demo__stage { height: 320px; }
.demo__copy { display: grid; gap: 8px; align-content: start; }
.demo__copy h3 { font-family: var(--font-display); font-weight: 850; font-stretch: 114%; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1; text-transform: none; color: var(--text); margin: 0; }
.demo__copy p { color: var(--text-muted); font-size: 0.95rem; }
.demo__where b { display: inline-block; margin-right: 8px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.demo__tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.demo__tokens code { font-size: 0.72rem; }
.demo__ctl { display: none; flex-wrap: wrap; gap: 8px; }
.has-showcase .demo__ctl { display: flex; }
.demo__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 0.84rem; font-weight: 650; cursor: pointer; transition: border-color var(--dur-1) var(--ease-assemble), background-color var(--dur-1) var(--ease-assemble); }
.demo__btn:hover { border-color: var(--text-soft); }
.demo__btn[aria-pressed="true"] { background: var(--text); color: var(--ground); border-color: var(--text); }
.demo__btn[data-demo-act="replay"]::before { content: "\21BB"; font-size: 1.05em; }
.demo__frames { display: none; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--seam-w); }
.demo__frames li { display: grid; gap: 8px; justify-items: center; padding: 12px; border-radius: var(--r-md); background: var(--ground); border: 1px solid var(--line); color: var(--text-muted); font-size: 0.84rem; text-align: center; }
.demo.is-paused .demo__stage, .demo.is-paused .demo__stage * { animation-play-state: paused !important; }

/* Arrivals */
.demo__stage--arrive { display: grid; align-content: center; gap: 8px; padding: 16px 24px; }
.dm-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.dm-card::before { content: ""; grid-row: span 2; width: 26px; height: 26px; border-radius: 7px; background: var(--pc); }
.dm-card i { display: block; height: 8px; border-radius: 4px; background: var(--line-strong); }
.dm-card i:last-child { width: 62%; background: var(--line); }
.dm-card--1 { --i: 0; } .dm-card--2 { --i: 1; } .dm-card--3 { --i: 2; } .dm-card--4 { --i: 3; }
@keyframes dm-arrive { from { opacity: 0; transform: translateY(18px); } }
.demo.is-on .dm-card { animation: dm-arrive 760ms var(--ease-assemble) both; animation-delay: calc(var(--i) * 68ms + 160ms); }

/* Moving between pages */
.demo__stage--pages { background: var(--surface-2); }
.dm-page { position: absolute; inset: 0 0 46px 0; display: grid; align-content: start; gap: 10px; padding: 18px 20px; background: var(--pc); color: var(--pc-ink); }
.dm-page b { font-family: var(--font-display); font-weight: 900; font-stretch: 140%; font-size: 2.6rem; line-height: 0.85; letter-spacing: -0.04em; }
.dm-page i { display: block; height: 9px; width: 70%; border-radius: 5px; background: color-mix(in srgb, var(--pc-ink) 30%, transparent); }
.dm-page i:last-child { width: 46%; }
.dm-page--b { box-shadow: -18px 0 40px rgba(0, 0, 0, 0.3); }
.dm-dock { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: grid; place-items: center; background: color-mix(in srgb, var(--ground) 92%, transparent); border-top: 1px solid var(--line); }
.dm-dock__key { width: 46px; height: 46px; background: var(--kernel-lit); }
@keyframes dm-page-in { from { transform: translateX(104%); } }
@keyframes dm-page-out { to { transform: translateX(-18%); opacity: 0.6; } }
@keyframes dm-key { 0%, 100% { transform: none; } 40% { transform: scale(0.9); } }
.demo.is-on .dm-page--b { animation: dm-page-in 640ms var(--ease-assemble) 700ms both; }
.demo.is-on .dm-page--a { animation: dm-page-out 640ms var(--ease-assemble) 700ms both; }
.demo.is-on .dm-dock__key { animation: dm-key 420ms var(--ease-snap) 520ms both; }

/* Changing the theme: three nested themes, each revealed in a circle from the selector */
.demo__stage--theme { background: #06060b; }
.dm-th { position: absolute; inset: 0; overflow: hidden; background: var(--rw-ground); }
.dm-th__field { position: absolute; inset: -8px; background: var(--rw-field-css); background-color: transparent; }
.dm-th__card { position: absolute; left: 11%; top: 20%; width: 46%; display: grid; gap: 7px; padding: 14px; border-radius: var(--rw-r-md); background: var(--rw-glass); border: var(--rw-border-width) solid var(--rw-line-strong); box-shadow: var(--rw-elev-2); }
.dm-th__card b { display: block; height: 7px; border-radius: 4px; background: var(--rw-text); }
.dm-th__card b:nth-child(2) { width: 72%; background: var(--rw-text-muted); }
.dm-th__card b:nth-child(3) { width: 42%; height: 16px; margin-top: 4px; border-radius: 999px; background: var(--rw-action); }
.dm-th__pick { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 70% 70%, #703093 0 5px, transparent 5.5px), linear-gradient(135deg, #0a0612, #24113a); box-shadow: 0 0 0 2px #f7eeff, 0 6px 16px rgba(0, 0, 0, 0.4); }
.dm-th--b, .dm-th--c { clip-path: circle(0 at calc(100% - 31px) calc(100% - 31px)); }
.demo.is-on .dm-th--b { animation: dm-reveal 860ms var(--ease-assemble) 700ms both; }
.demo.is-on .dm-th--c { animation: dm-reveal 860ms var(--ease-assemble) 2600ms both; }
.demo.is-on .dm-th__pick { animation: dm-pick 420ms var(--ease-snap) 420ms both, dm-pick 420ms var(--ease-snap) 2320ms both; }
@keyframes dm-reveal { to { clip-path: circle(150% at calc(100% - 31px) calc(100% - 31px)); } }
@keyframes dm-pick { 40% { transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .dm-th--c { clip-path: none; } }

/* The field's depth */
.demo__stage--field { --mx: 0; --my: 0; background: radial-gradient(80% 70% at 30% 20%, color-mix(in srgb, var(--k-600) 20%, transparent), transparent 70%), var(--ground); cursor: pointer; }
.dm-layer { position: absolute; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 80px); pointer-events: none; }
.dm-layer--far { background: radial-gradient(circle, color-mix(in srgb, var(--kernel-accent) 55%, transparent) 0.8px, transparent 1.2px) 0 0 / 4px 4px; -webkit-mask-image: radial-gradient(70% 60% at 40% 45%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 40% 45%, #000, transparent 75%); transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 6px), 0); }
.dm-layer--mid { color: var(--signal-accent); opacity: 0.85; transform: translate3d(calc(var(--mx) * 16px), calc(var(--my) * 16px), 0); }
.dm-layer--mid path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 6.5; }
.dm-layer--near { color: var(--kernel-accent); transform: translate3d(calc(var(--mx) * 34px), calc(var(--my) * 34px), 0); }
.dm-layer--near circle { fill: currentColor; }

/* Hover and focus */
.demo__stage--hover { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 16px; padding: 22px; align-items: center; perspective: 700px; }
.dm-tile { grid-row: 1 / 3; position: relative; display: grid; align-content: space-between; height: 100%; min-height: 150px; padding: 14px; background: var(--pc); color: var(--pc-ink); transition: background-color var(--dur-3) var(--ease-assemble), color var(--dur-3) var(--ease-assemble); }
.dm-tile b { font-family: var(--font-display); font-weight: 850; font-stretch: 110%; font-size: 1.25rem; line-height: 0.9; }
.dm-tile i { justify-self: end; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; }
.dm-btn { justify-self: center; display: inline-flex; padding: 10px 18px; border-radius: var(--r-pill); background: var(--kernel); color: var(--kernel-ink); font-weight: 700; font-size: 0.9rem; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-300) 42%, transparent); }
.dm-focus { display: flex; justify-content: center; gap: 10px; }
.dm-focus i { width: 34px; height: 22px; border-radius: 6px; background: var(--surface-3); }
@keyframes dm-tilt { 0%, 12%, 88%, 100% { transform: none; background: var(--pc); color: var(--pc-ink); } 26%, 70% { transform: rotate3d(0.4, -1, 0, 9deg); background: var(--hover-ground); color: var(--pc); } }
@keyframes dm-halo { 0%, 30%, 74%, 100% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-300) 42%, transparent); } 42%, 62% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-300) 58%, transparent), inset 0 0 0 1px var(--kernel-glow), 0 0 0 4px color-mix(in srgb, var(--kernel-glow) 26%, transparent), 0 10px 26px color-mix(in srgb, var(--kernel-glow) 40%, transparent); } }
@keyframes dm-ring { 0%, 33% { outline-color: var(--focus); } 34%, 100% { outline-color: transparent; } }
.dm-focus i { outline: 3px solid transparent; outline-offset: 3px; }
.demo.is-on .dm-tile { animation: dm-tilt 4.2s var(--ease-assemble) infinite; }
.demo.is-on .dm-btn { animation: dm-halo 4.2s var(--ease-assemble) infinite; }
.demo.is-on .dm-focus i { animation: dm-ring 2.4s steps(1) infinite; }
.demo.is-on .dm-focus i:nth-child(2) { animation-delay: 0.8s; } .demo.is-on .dm-focus i:nth-child(3) { animation-delay: 1.6s; }
.dm-focus i:first-child { outline-color: var(--focus); }

/* The roach */
/* The roach's stage grows with its buttons, whatever the column */
.demo .demo__stage.demo__stage--roach { height: auto; min-height: 260px; display: grid; grid-template-rows: 1fr auto; gap: 10px; padding: 14px; background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--k-600) 22%, transparent), transparent 70%), #06060b; --rn-ink: #06060b; }
.dm-roach { align-self: center; justify-self: center; width: min(78%, 380px); color: #f3f2f8; }
.dm-poses { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dm-poses .demo__btn { background: #15141f; color: #f3f2f8; border-color: rgba(205, 198, 255, 0.22); }
.pose { --rn-ink: #06060b; background: #06060b !important; color: #f3f2f8 !important; }
.pose .rn { width: min(100%, 180px); }
.pose--think .rn__ant--far { transform: rotate(-11deg); } .pose--think .rn__ant--near { transform: rotate(-8deg); } .pose--think .rn__led { filter: drop-shadow(0 0 3px var(--signal)); }
.pose--hop .rn__all { transform: translateY(-12px) scale(0.97, 1.05); } .pose--hop .rn__bang { opacity: 1; } .pose--hop .rn__ant--far { transform: rotate(10deg); } .pose--hop .rn__ant--near { transform: rotate(8deg); }
.pose--doze .rn__zz { opacity: 1; } .pose--doze .rn__eye { --lid: 0.24; } .pose--doze .rn__led { opacity: 0.38; } .pose--doze .rn__ant--far { transform: rotate(12deg); } .pose--doze .rn__ant--near { transform: rotate(14deg); }

/* Page introductions */
.demo__stage--intro { display: grid; place-items: stretch; padding: 0; }
.dm-hero { position: relative; display: grid; align-content: space-between; gap: 8px; padding: 16px 18px; background: var(--pc); color: var(--pc-ink); overflow: hidden; container-type: inline-size; min-height: 120px; }
.dm-hero__crumb { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.dm-hero__word { font-family: var(--font-display); font-weight: 900; font-stretch: 150%; font-size: min(16cqi, 4.4rem); line-height: 0.8; letter-spacing: -0.045em; white-space: nowrap; }
.dm-hero__sub { font-family: var(--font-display); font-weight: 750; font-size: 1.05rem; }
.dm-hero__sticker { position: absolute; right: 16px; top: 16px; padding: 5px 10px 4px; border-radius: var(--r-pill); background: var(--pc); color: var(--pc-ink); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transform: rotate(4deg); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
@keyframes dm-stretch { from { font-stretch: 56%; letter-spacing: 0.02em; opacity: 0.2; } }
@keyframes dm-fade { from { opacity: 0; transform: translateY(8px); } }
@keyframes dm-drop { 0% { transform: translateY(-46px) rotate(-14deg) scale(1.08); opacity: 0; } 70% { opacity: 1; } 100% { transform: rotate(4deg); opacity: 1; } }
.demo.is-on .dm-hero__word { animation: dm-stretch 1.1s var(--ease-assemble) 0.15s both; }
.demo.is-on .dm-hero__crumb, .demo.is-on .dm-hero__sub { animation: dm-fade 760ms var(--ease-assemble) 0.35s both; }
.demo.is-on .dm-hero__sticker { animation: dm-drop 0.8s var(--ease-snap) 0.95s both; }
.istill .dm-hero { width: 100%; min-height: 84px; }
.istill .dm-hero__word { font-size: min(24cqi, 3rem); }
.istill--1 .dm-hero__word { font-stretch: 56%; opacity: 0.35; }
.istill--2 .dm-hero__word { font-stretch: 112%; }
.istill .dm-hero__sticker { right: 8px; top: 8px; font-size: 0.58rem; }

/* The assembly */
.demo__stage--mosaic { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 18px; container-type: inline-size; }
.minimosaic { --k: 64px; position: relative; display: grid; width: 100%; height: 100%; gap: 4px; grid-template-columns: 1.3fr 1.7fr var(--k) 1.7fr 1.2fr; grid-template-rows: 1.1fr var(--k) 1fr; grid-template-areas: "start guides guides api ref" "start design key api ref" "support design rel rel ref"; }
.mm { background: var(--pc); color: var(--pc-ink); padding: 6px 7px; font-family: var(--font-display); font-weight: 850; font-stretch: 84%; font-size: 0.7rem; line-height: 1.05; min-width: 0; overflow: hidden; overflow-wrap: normal; hyphens: none; }
.mm--key { padding: 0; cursor: default; background: var(--kernel-lit); color: var(--kernel-ink); }
.mm--key .keystone__mark { width: 74%; }
.mm__led { position: absolute; left: 58.4%; top: 44.4%; z-index: 3; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); opacity: 0; pointer-events: none; }
@keyframes mm-led-drop { 0% { opacity: 1; transform: translateY(-120px) scale(1.4); } 70% { opacity: 1; transform: translateY(3px) scale(0.9); } 100% { opacity: 0; transform: none; } }
.demo.is-on .mm { animation: fly-in 0.8s var(--ease-snap) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
.demo.is-on .mm__led { animation: mm-led-drop 620ms var(--ease-gentle) 860ms both; }
.demo.is-on .mm--key .rn__led { animation: rn-land 520ms var(--ease-snap) 1380ms both; transform-box: fill-box; transform-origin: 50% 60%; }
.demo.is-on .mm--key .keystone__ring { animation: rn-flash 760ms var(--ease-assemble) 1380ms both; border-color: var(--signal); }
.demo.is-on .mm--key .rn [data-hatch] { animation: 560ms var(--ease-snap) both; animation-delay: calc(var(--hs, 0) * 62ms + 1500ms); }
.demo.is-on .mm--key .rn .rn__collar { animation-name: rn-in-collar; }
.demo.is-on .mm--key .rn .rn__wing--top { animation-name: rn-in-wing-top; }
.demo.is-on .mm--key .rn .rn__wing--low { animation-name: rn-in-wing-low; }
.demo.is-on .mm--key .rn .rn__leg { animation-name: rn-in-leg; }
.demo.is-on .mm--key .rn .rn__ant { animation-name: rn-in-ant; animation-duration: 720ms; }
.demo.is-on .mm--key .rn .rn__eye { animation-name: rn-in-eye; animation-duration: 320ms; }
.hstill .keystone { width: 96px; height: 96px; cursor: default; }
.hstill--1 .rn [data-hatch] { opacity: 0; }
.hstill--2 .rn [data-hatch]:not([data-hatch="1"]):not([data-hatch="2"]):not([data-hatch="3"]) { opacity: 0; }
/* In a narrow stage the mini mosaic takes the docs' phone layout: two columns, keystone beside API */
@container (max-width: 420px) {
  .minimosaic { --k: 1fr; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(5, minmax(0, 1fr)); grid-template-areas: "start start" "guides guides" "api key" "design rel" "ref support"; }
  .minimosaic > .mm { border-radius: 0; }
  .minimosaic > .mm--start { border-radius: 8px 8px 0 0; } .minimosaic > .mm--ref { border-radius: 0 0 0 8px; } .minimosaic > .mm--support { border-radius: 0 0 8px 0; }
  .mm--key { grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
  .mm--key .keystone__mark { width: auto; height: 86%; aspect-ratio: 260 / 160; }
  .mm__led { left: calc(75% + 9px); top: 46%; }
}

/* Themes: the ten, as a gallery. Each card's specimen carries data-theme, so its ground, glass, text,
   action and signal resolve in that theme; the picture is the theme's own field, as the system draws
   it without WebGL. The copy under it stays in the page's theme. */
.tgallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seam-w); border-radius: var(--r-outer); overflow: hidden; }
.tcard { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--surface-1); border: 1px solid var(--line); }
.tcard__view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rw-field-css); background-color: var(--rw-ground); border-bottom: 1px solid var(--line); }
.tcard__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.tcard__page { position: absolute; left: 7%; bottom: 13%; width: min(48%, 210px); display: grid; gap: 7px; padding: 12px 14px 13px; border-radius: var(--rw-r-md); border: var(--rw-border-width) solid var(--rw-line-strong); background: var(--rw-glass); box-shadow: var(--rw-elev-2); color: var(--rw-text); }
.tcard__h { font-family: var(--font-display); font-weight: 850; font-stretch: 116%; font-size: 1.45rem; line-height: 1; letter-spacing: -0.02em; color: var(--rw-text); }
.tcard__page i { display: block; height: 6px; border-radius: 3px; background: var(--rw-text-muted); }
.tcard__page i + i { width: 70%; background: var(--rw-text-soft); }
.tcard__row { display: flex; align-items: center; gap: 9px; margin-top: 3px; }
.tcard__btn { width: 56px; height: 18px; border-radius: 999px; background: var(--rw-action); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rw-action-light) 70%, transparent); }
.tcard__led { width: 9px; height: 9px; border-radius: 50%; background: var(--rw-signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rw-signal) 22%, transparent), 0 0 10px color-mix(in srgb, var(--rw-signal) 60%, transparent); }
.tcard__copy { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 14px 16px 16px; }
.tcard__name { font-family: var(--font-display); font-weight: 850; font-stretch: 116%; font-size: 1.35rem; line-height: 1; }
.tcard__copy p { color: var(--text-muted); font-size: 0.92rem; }
.tcard__copy .btn { margin-top: 4px; min-height: 40px; }
.tcard [aria-pressed="true"] { background: var(--text); color: var(--ground); border-color: var(--text); }
.tcard button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Accessibility: the contrast table */
.contrast td:nth-child(3), .contrast td:nth-child(4) { font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap; }
.contrast td.is-pass::before { content: "AA "; color: var(--signal-accent); font-weight: 700; }
.contrast td.is-fail::before { content: "Below AA "; color: var(--hazard); font-weight: 700; }
.contrast__need { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: inherit; }
.contrast__sw { display: inline-block; width: 14px; height: 14px; margin-right: 9px; vertical-align: -2px; border-radius: 4px; background: var(--rw-ground); box-shadow: inset 0 0 0 1px var(--rw-line-strong), inset 0 -5px 0 var(--rw-accent); }
.contrast th[scope="row"] { font-family: var(--font-text); font-size: 0.9rem; letter-spacing: 0; text-transform: none; font-weight: 650; background: transparent; color: var(--text); white-space: normal; }

/* Using the brand: do and don't */
.dodont { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--seam-w); }
.dd { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 12px; margin: 0; padding: 22px 16px 14px; min-height: 200px; min-width: 0; }
.dd__m { align-self: center; justify-self: center; display: block; width: min(70%, 190px); }
.dd figcaption { line-height: 1.4; }
.dd figcaption b { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.dd--do figcaption b { color: #36ff84; }
.dd--paper.dd--do figcaption b { color: #007a39; }
.dd--dont figcaption b { color: #ff4d3a; }
.dd--dont::after { content: ""; position: absolute; right: 12px; top: 12px; width: 18px; height: 18px; background: linear-gradient(45deg, transparent 44%, #ff4d3a 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #ff4d3a 44% 56%, transparent 56%); }
.dd--recolor .rn { --rn-wing: #36ff84; --rn-cap: #ff4d3a; }
.dd--stretch .rn { transform: scaleX(1.38) rotate(-8deg); }
.dd--outline .rn { filter: drop-shadow(0 0 0 #ff9a45) drop-shadow(2px 0 0 #ff9a45) drop-shadow(-2px 0 0 #ff9a45) drop-shadow(0 2px 0 #ff9a45) drop-shadow(0 -2px 0 #ff9a45); }
.dd--cord { background: var(--pink); color: var(--pink-ink); border: 1px solid transparent; }
.dd--cord figcaption b { color: var(--pink-ink); }
.dd--cord .rn { --rn-ink: var(--pink); }

/* A roach in a page hero sits on its own night patch: never directly on a chapter's cord */
.prop__roach { display: block; width: 190px; padding: 14px 16px 10px; border-radius: 22px; background: #06060b; box-shadow: inset 0 0 0 1px rgba(205, 198, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.35); --rn-ink: #06060b; color: #f7eeff; }

@media (prefers-reduced-motion: reduce) {
  .demos__still-note { display: block; }
  .demo__frames { display: grid; }
  .demo__ctl, .dm-poses { display: none !important; }
}

/* Components gallery */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seam-w); }
.gallery > div { display: grid; gap: 14px; align-content: start; padding: 18px; background: var(--surface-1); border: 1px solid var(--line); min-width: 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.minitile { position: relative; display: grid; gap: 6px; align-content: start; min-height: 150px; padding: 14px; background: var(--pc); color: var(--pc-ink); container-type: inline-size; transition: background-color var(--dur-3) var(--ease-assemble), color var(--dur-3) var(--ease-assemble); }
.minitile:hover { background: var(--hover-ground); color: var(--pc); }
.minitile b { font-family: var(--font-display); font-weight: 850; font-stretch: 114%; font-size: 1.6rem; line-height: 0.9; }
.minidock { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; height: 52px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface-2); }
.minidock .keystone { width: 60px; height: 52px; }
.minidock .keystone__mark { width: 48px; }
.minidock__r { justify-self: end; }

/* The brand page lays out by the width of its own column (the .ds container), not the window's:
   the docs' rails take a different share of the window at every size */
@container ds (min-width: 900px) { .roles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container ds (max-width: 619px) {
  .idboard, .clearspace, .demos, .tgallery, .gallery { grid-template-columns: minmax(0, 1fr); }
  .idhero { border-radius: var(--r-outer) var(--r-outer) 0 0; } .idnotes { border-radius: 0 0 var(--r-outer) var(--r-outer); }
  .clearspace__rules { grid-template-columns: minmax(0, 1fr); }
  .ramp__strip { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 12px; }
  .rulecards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container ds (max-width: 519px) {
  .specs3, .variants, .inuse, .swatches3, .dodont, .rulecards--3, .easings { grid-template-columns: minmax(0, 1fr); }
  .spec, .spec:first-child, .spec:last-child, .vtile, .vtile:nth-child(n) { border-radius: 0; }
  .ramp__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tscale li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .demo__frames { grid-template-columns: minmax(0, 1fr); }
  .demo__stage, .demo--wide .demo__stage { height: 260px; }
}
@container ds (max-width: 380px) { .roles { grid-template-columns: minmax(0, 1fr); } }

/* ============================== MENU ============================== */
.menu { width: 100vw; height: 100vh; height: 100dvh; margin: 0; padding: calc(env(safe-area-inset-top, 0px) + 10px) max(10px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 10px) max(10px, env(safe-area-inset-left, 0px)); overflow: hidden; }
.menu::backdrop { background: color-mix(in srgb, var(--ground) 84%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.menu__in { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; height: 100%; }
.menu__grid { --k: clamp(88px, min(14vh, 9vw), 132px); display: grid; gap: var(--seam-w); min-height: 0; grid-template-columns: 1.3fr 1.7fr var(--k) 1.7fr 1.2fr; grid-template-rows: 1.1fr var(--k) 1fr; grid-template-areas: "start guides guides api ref" "start design key api ref" "support design rel rel ref"; }
.mtile { position: relative; container-type: inline-size; display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 0; padding: clamp(14px, 1.4vw, 20px); background: var(--pc); color: var(--pc-ink); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.menu[open] .mtile, .menu[open] .menu__key { animation: fly-in 0.72s var(--ease-assemble) both; animation-delay: calc(var(--i, 0) * 42ms); }
.menu.is-closing .mtile, .menu.is-closing .menu__key { animation: fly-out 0.36s var(--ease-assemble) both; animation-delay: 0s; }
@keyframes fly-in { from { transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)); } }
@keyframes fly-out { to { transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)); } }
.m-start { grid-area: start; --fx: -80vw; --fr: -5deg; border-top-left-radius: var(--r-outer); }
.m-guides { grid-area: guides; --fy: -100vh; --fr: 3deg; }
.m-api { grid-area: api; --fx: 30vw; --fy: -100vh; --fr: 6deg; }
.m-ref { grid-area: ref; --fx: 80vw; --fr: 4deg; border-radius: 0 var(--r-outer) var(--r-outer) 0; }
.m-design { grid-area: design; --fx: -30vw; --fy: 100vh; --fr: -4deg; }
.m-rel { grid-area: rel; --fy: 100vh; --fr: 3deg; }
.m-support { grid-area: support; --fx: -80vw; --fy: 30vh; --fr: -6deg; border-bottom-left-radius: var(--r-outer); }
.menu__key { grid-area: key; width: 100%; height: 100%; --fy: 0; }
.menu__x { position: relative; width: 34%; aspect-ratio: 1; }
.menu__x::before, .menu__x::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--signal); transform: rotate(45deg); transition: transform var(--dur-3) var(--ease-snap); }
.menu__x::after { transform: rotate(-45deg); }
.menu__key:hover .menu__x::before { transform: rotate(135deg); } .menu__key:hover .menu__x::after { transform: rotate(45deg); }
.mtile__name { font-family: var(--font-display); font-weight: 850; font-stretch: 114%; font-size: clamp(1.2rem, 10cqi, 2.4rem); line-height: 0.9; letter-spacing: -0.025em; }
.mtile__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mtile__list { list-style: none; padding: 0; display: grid; gap: 1px; font-size: 0.9rem; line-height: 1.3; }
.mtile__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.mtile__list a { display: block; padding: 3px 0; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mtile__list span { display: block; padding: 3px 0; opacity: 0.76; }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 22px; padding: 4px 4px 0; font-size: 0.92rem; color: var(--text-muted); }
.menu__site { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; min-width: 0; }
.menu__site a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: var(--r-pill); font-weight: 600; }
.menu__site a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.menu__site a[aria-current] { color: var(--text); text-decoration: underline; text-decoration-color: var(--kernel-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* GitHub's own logo (its wordmark lockup), unmodified, in black or white only: --gh-mark follows the theme */
.gh-link { display: inline-flex; align-items: center; min-height: 24px; }
.gh-logo { display: block; flex: none; width: auto; height: 14px; aspect-ratio: 416 / 95; fill: var(--gh-mark, #fff); }
@media (forced-colors: active) { .gh-logo { fill: CanvasText; } }

/* ============================== VIEW TRANSITIONS ==============================
   rw-transitions.css opts the pages in and fades the page between them; here the dock stays put and
   the page hero slides from one chapter's cord to the next. Nothing moves with Reduce Motion. */
@media (prefers-reduced-motion: no-preference) {
  .dock { view-transition-name: dock; }
  ::view-transition-group(phero) { animation-duration: 640ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  ::view-transition-old(phero), ::view-transition-new(phero) { height: 100%; object-fit: cover; object-position: left top; animation-duration: 640ms; }
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 999px) {
  .site__theme .rw-ts__value, .site__theme .rw-ts__chev { display: none; }
  .site__theme .rw-ts__button { width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 899px) {
  :root { --site-h: 56px; }
  .site__nav, .site__theme { display: none; }
  .site__menu { display: inline-flex; }
}
@media (max-width: 1180px) {
  .shell { grid-template-columns: 220px minmax(0, 1fr); }
  .outline { display: none; } .outline-inline { display: block; }
}
@media (max-width: 999px) {
  .phero__props { display: none; }
  .modules, .tickets, .leaves { grid-template-columns: minmax(0, 1fr); }
  .module, .module:first-child, .module:last-child, .ticket, .ticket:first-child, .ticket:last-child { border-radius: 0; min-height: 0; }
  .modules > :first-child, .tickets > :first-child { border-radius: var(--r-outer) var(--r-outer) 0 0; }
  .modules > :last-child, .tickets > :last-child { border-radius: 0 0 var(--r-outer) var(--r-outer); }
  .module { min-height: 230px; } .ticket { min-height: 220px; }
  .deck, .gridspec, .chintro { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  /* A tablet's menu: three columns, the two long lists given two columns' width */
  .menu { overflow-y: auto; }
  .menu__in { height: auto; min-height: 100%; }
  .menu__grid { --k: 104px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(var(--k), auto); grid-template-areas: "start guides guides" "api ref ref" "design key support" "rel rel rel"; }
  .m-start { border-radius: var(--r-outer) 0 0 0; } .m-guides { border-top-right-radius: var(--r-outer); } .m-ref { border-radius: 0; }
  .m-support { border-radius: 0; } .m-rel { border-radius: 0 0 var(--r-outer) var(--r-outer); }
  .menu__x { width: auto; height: 46%; }
}
@media (max-width: 759px) {
  :root { --dock-h: 58px; }
  .deck__info { grid-template-columns: minmax(0, 1fr); }
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; }
  .rail { display: none; }
  .dock__crumb { display: none; }
  .dock__btn .lbl { display: none; }
  .dock__btn--search { width: 44px; padding: 0; justify-content: center; }
  .dock__btn--search kbd { display: none; }
  .steps > li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .loopmap, .rulecards { grid-template-columns: minmax(0, 1fr); }
  .loopmap__ring, .loopmap__core { display: none; }
  .loopmap::before { content: "All four listen on 127.0.0.1"; display: block; padding: 10px 14px; border-radius: var(--r-pill); background: var(--kernel); color: var(--kernel-ink); font-family: var(--font-mono); font-weight: 700; font-size: 0.84rem; justify-self: start; }
  .node:nth-child(n) { text-align: left; justify-items: start; } .node:nth-child(n) .node__port { justify-self: start; }
  .route { grid-template-columns: 62px minmax(0, 1fr); }
  .pager { grid-template-columns: minmax(0, 1fr); } .pager .is-next { text-align: left; }
  .rules5 li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tester__controls { grid-template-columns: minmax(0, 1fr); }
  .compo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* a fan that still doesn't fit scrolls; one that fits stays centred (browsers without "safe" keep the start) */
  .deck__fan { justify-content: flex-start; justify-content: safe center; overflow-x: auto; padding: 24px 44px 12px; min-height: 280px; }
  .deck__vals { grid-template-columns: minmax(0, 1fr); }
  .minimosaic { --k: 30px; height: 220px; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .menu { overflow-y: auto; }
  .menu__in { height: auto; grid-template-rows: none; }
  /* On a phone the RoachNet links and the theme selector come first, above the chapters */
  .menu__foot { order: -1; justify-content: flex-start; gap: 4px 12px; padding: 4px 2px 6px; border-bottom: 1px solid var(--line); }
  .menu__site { flex: 1 1 100%; }
  .menu__site a { padding: 0 9px; }
  .menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; grid-template-areas: "key key" "start start" "guides guides" "api design" "rel rel" "ref support"; }
  .menu__key { height: 64px; border-radius: var(--r-outer) var(--r-outer) 0 0; }
  .menu__x { width: 26px; height: auto; }
  .m-guides, .m-rel { border-radius: 0; }
  .m-start { border-top-left-radius: 0; } .m-ref { border-radius: 0 0 0 var(--r-outer); } .m-support { border-radius: 0 0 var(--r-outer) 0; }
  .mtile { overflow: visible; }
  .mtile__list--2 { grid-template-columns: minmax(0, 1fr); }
}

/* The reading column, the outline and the home page's sections carry the shared veil (data-veil in the
   markup: a soft pool of the ground behind them, with the drawn field and its still picture alike, a little
   stronger for the still, which can't go quiet). The rail can't take it: it's a sticky scroller, and a
   scroller clips a veil's soft edge. It carries the same pool as its own background and shadow instead, at
   the theme's veil strength, with the spread at 1.5 x the blur so there's no step where the two meet. */
.shell > .rail {
  --_pool: color-mix(in srgb, var(--ground) calc(min(1, var(--rw-veil-strength, 0.72) * var(--rw-veil-still, 1)) * 100%), transparent);
  background: var(--_pool);
  box-shadow: 0 0 28px 42px var(--_pool);
  border-radius: 18px;
}
@media (forced-colors: active) { .shell > .rail { background: Canvas; box-shadow: none; } }

/* ============================== TOUCH ==============================
   Where a finger does the pointing, every control is at least 44 px tall. Links inside running text
   stay as they are; stretched links (a card's title covering the whole card) already are. */
@media (pointer: coarse) {
  .foot__col nav { gap: 0; }
  .foot__col nav a, .gh-link { display: flex; align-items: center; min-height: 44px; }
  .outline__list a { padding-block: 12px; }
  .outline__list a.is-h3 { padding-block: 14px; }
  .outline-inline summary { padding-block: 13px; }
  .ppg__list a, .ppg__list span { padding-block: 12px; }
  .ppg__head a { display: inline-block; min-width: 44px; padding-block: 13px; margin-block: -13px; }
  .tile__links a { align-items: center; min-height: 44px; }
  .foot__privacy { min-height: 44px; }
  .phero__crumbs a, .foot__maker, .prose .notes-meta a { display: inline-block; min-width: 44px; padding-block: 14px; margin-block: -14px; text-align: center; }
  .pagefoot__meta a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .console__copy { min-height: 44px; min-width: 44px; }
  .btn, .tcard__copy .btn, .toggle, .deck__tabs button, .routes__filter, .replay, .demo__btn { min-height: 44px; }
  input[type="range"] { height: 44px; }
}
@media (max-width: 759px) {
  .foot__grid > .foot__col:nth-child(2) nav, .foot__grid > .foot__col:nth-child(3) nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

/* ============================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .band__track { animation: none !important; }
  .prop { animation: none !important; }
  .typed { animation: none !important; max-width: none; }
}

/* ---------- Typography and motion ----------
   Everything here is decoration over a finished layout: with reduced motion (or before the first
   scroll) nothing is hidden or displaced. */

/* Reactive display words: JS splits them into letters and narrows the ones near the pointer */
.rl-w { display: inline; }
.rl { font-stretch: inherit; font-weight: inherit; }

/* Section titles: a numbered eyebrow, an italic accent, and a stretch-in once you scroll */
.hsec__t { display: grid; gap: 14px; }
.hsec__k { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); }
.hsec__k::before { content: ""; width: 26px; height: 2px; background: var(--pc-accent, var(--kernel-accent)); }
.hsec__title em, .ds h2 em { font-style: italic; font-stretch: 104%; font-weight: 800; letter-spacing: -0.02em; color: var(--pc-accent); padding-right: 0.04em; }
.hsec[data-pair] .hsec__title em { color: var(--pc-accent); }
.hsec:not([data-pair]) .hsec__title em { color: var(--kernel-accent); }
:is(.hsec__title, .ds h2, .prose h2) { transition: font-stretch 0.95s var(--ease-assemble), letter-spacing 0.95s var(--ease-assemble), opacity 0.6s var(--ease-assemble), translate 0.95s var(--ease-assemble); }
.st-armed :is(.hsec__title, .ds h2, .prose h2):not(.is-in) { font-stretch: 58%; letter-spacing: 0.02em; opacity: 0.35; translate: 0 0.12em; }
:is(.hsec__title, .ds h2) em { transition: font-stretch 0.95s var(--ease-assemble); }
.st-armed :is(.hsec__title, .ds h2):not(.is-in) em { font-stretch: 52%; }

/* The headline's first line stretches in on arrival; the sticker drops onto the panel */
@keyframes line-in { from { font-stretch: 56%; letter-spacing: 0.02em; opacity: 0.25; } to { opacity: 1; } }
@keyframes sticker-drop { 0% { transform: translateY(-34px) rotate(-14deg) scale(1.08); opacity: 0.3; } 70% { opacity: 1; } 100% { transform: rotate(var(--tilt, -2deg)); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .panel__line:first-of-type { animation: line-in 1.1s var(--ease-assemble) 0.15s both; }
  .panel .sticker { animation: sticker-drop 0.8s var(--ease-snap) 0.75s both; }
}

/* Patch cable: a signal pulse runs from the keystone to the module */
.cable--pulse { stroke: var(--signal); stroke-width: 4; stroke-dasharray: 0.06 1.3; stroke-dashoffset: 0.06; opacity: 0; filter: drop-shadow(0 0 4px var(--signal)); }
@keyframes pulse-run { from { stroke-dashoffset: 0.06; } to { stroke-dashoffset: -1.06; } }
@media (prefers-reduced-motion: no-preference) {
  .cables.is-on.is-pulsing .cable--pulse { opacity: 1; animation: pulse-run 1.15s cubic-bezier(0.45, 0, 0.55, 1) 0.35s infinite; }
}

/* Modules tilt toward the pointer and light a halftone under it */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mosaic, .modules, .tickets { perspective: 1100px; }
  .tilt { transition: rotate 0.5s var(--ease-assemble), background-color var(--dur-3) var(--ease-assemble), color var(--dur-3) var(--ease-assemble), border-color var(--dur-3) var(--ease-assemble); }
  .tilt.is-tilted { rotate: var(--rx) var(--ry) 0 var(--ra); transition-duration: 0.12s, var(--dur-3), var(--dur-3), var(--dur-3); z-index: 3; }
  .tile::after, .module::after, .ticket::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(circle, currentColor 1.1px, transparent 1.5px) 0 0 / 7px 7px; -webkit-mask-image: radial-gradient(190px circle at var(--lx, 50%) var(--ly, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%); mask-image: radial-gradient(190px circle at var(--lx, 50%) var(--ly, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%); transition: opacity var(--dur-3) var(--ease-assemble); }
  .tile.is-hot::after, .tile:hover::after, .module:hover::after, .ticket:hover::after { opacity: 0.22; }
}
.module, .ticket { isolation: isolate; }

/* Two bands cross below the intro, running opposite ways */
.bands { position: relative; overflow: clip; padding-block: clamp(34px, 4.4vw, 70px); --bf: clamp(2.2rem, 1rem + 4.4vw, 5rem); }
.bands .band { position: relative; width: 108%; margin-left: -4%; }
.bands .band__group span { font-size: var(--bf); }
.band--a { z-index: 2; transform: rotate(-3deg); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34); }
.band--b { z-index: 1; transform: rotate(3.2deg); margin-top: calc(var(--bf) * -1.28); }
.band--b .band__track { animation-duration: 58s; animation-direction: reverse; }
.band--b .band__group span { font-stretch: 88%; font-style: italic; text-transform: none; letter-spacing: -0.01em; }
.band--b .band__group b { border-radius: 0; width: 0.36em; height: 0.36em; border-width: 0.08em; transform: rotate(45deg); }

/* Article heroes move at depth as you scroll away from them */
.phero__props .prop { translate: 0 calc(var(--hp, 0) * var(--depth, -90px)); }
.phero__props .prop:nth-child(2) { --depth: -160px; }
.phero__props .prop:nth-child(3) { --depth: -60px; }
.phero__props .prop:nth-child(4) { --depth: -210px; }
.phero__word { translate: calc(var(--hp, 0) * -0.18em) 0; }
@media (prefers-reduced-motion: reduce) {
  .phero__props .prop, .phero__word { translate: none !important; }
  .st-armed :is(.hsec__title, .ds h2, .prose h2):not(.is-in) { font-stretch: inherit; letter-spacing: inherit; opacity: 1; translate: none; }
}

/* ============================== SITE BUILD ==============================
   What the static, multi-page build needs on top of the base rules. The site's CSP
   allows no inline styles, so every value that would otherwise sit in a style attribute
   lives here as a class, or is set by patchbay.js through the CSSOM. */

/* Brand chrome: the wordmark in the dock, the lockup in the panel and the footer */
.dock__home { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.dock__home .wm { --wm-h: 18px; transition: transform var(--dur-2) var(--ease-snap); }
.dock__home:hover .wm { transform: translateY(-1px); }
.panel .lockup { --lk-h: 2.05rem; }
.foot__brand .lockup { --lk-h: 2rem; }
.wm--sm { --wm-h: 16px; }
.foot__sign { position: relative; isolation: isolate; }
.foot__sign::before { content: ""; position: absolute; z-index: -1; left: -4%; top: -10%; width: 80%; height: 90%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--kernel-glow) 24%, transparent), transparent); }

/* Stickers tilt by class */
.tilt-n4 { --tilt: -4deg; } .tilt-n3 { --tilt: -3deg; } .tilt-3 { --tilt: 3deg; } .tilt-4 { --tilt: 4deg; } .tilt-5 { --tilt: 5deg; }

/* Layout helpers that replace inline grids */
.phero__meta { display: grid; gap: 16px; }
.module__copy { display: grid; gap: 12px; align-content: end; }
.gridspec__main { display: grid; gap: 12px; min-width: 0; }
.chip--gap { margin-right: 10px; }
.code--gap { margin-left: 4px; }
.weight-600 { font-weight: 600; }
.method--pad { padding: 3px 8px; }

/* Hero props sit in four slots, each bobbing on its own beat */
.prop--s1 { right: 6%; top: 11%; }
.prop--s2 { right: 24%; top: 44%; --d: -2.4s; }
.prop--s3 { right: 7%; top: 36%; --d: -4.2s; }
.prop--s4 { right: 10%; top: 67%; --d: -1.2s; }
.prop__card--stack { display: grid; gap: 4px; }
.prop__aa--pink { color: var(--pink); }

/* Patchbay page: type roles, the mini mosaic and the easing tracks */
.role__spec--display { font-family: var(--font-display); font-weight: 900; font-stretch: 140%; }
.role__spec--text { font-family: var(--font-text); font-weight: 500; }
.role__spec--mono { font-family: var(--font-mono); font-weight: 600; }
.role__spec--wordmark { font-size: min(2.1rem, 15cqi); }
.mm--start { grid-area: start; --i: 0; --fx: -60px; border-top-left-radius: 8px; }
.mm--guides { grid-area: guides; --i: 2; --fy: -60px; }
.mm--api { grid-area: api; --i: 3; --fx: 40px; --fy: -60px; }
.mm--ref { grid-area: ref; --i: 1; --fx: 60px; border-radius: 0 8px 8px 0; }
.mm--design { grid-area: design; --i: 4; --fx: -40px; --fy: 60px; }
.mm--support { grid-area: support; --i: 6; --fy: 60px; border-bottom-left-radius: 8px; }
.mm--rel { grid-area: rel; --i: 5; --fy: 60px; }
.mm--key { grid-area: key; --i: 7; }
.easing__track--assemble { --curve: cubic-bezier(0.16, 1, 0.3, 1); }
.easing__track--snap { --curve: cubic-bezier(0.34, 1.56, 0.64, 1); --travel: 0.86; }
.easing__track--drift { --curve: linear; }
.easing__track--gentle { --curve: cubic-bezier(0.4, 0, 0.2, 1); }
.ds__note { margin-top: 12px; color: var(--text-soft); font-size: 0.92rem; }
.deck__accent { font-size: 0.92rem; }

/* Chapter lists can point outside the docs, to the route browser or the changelog */
.chpage__ext { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
/* The external-link arrow takes its item's color at full strength: faded, it fell under 4.5:1 on the light themes */
.rail__item .rail__ext { font-size: 0.8em; }
.ppg__list a.is-ext::after { content: "↗"; }

/* Generated reference tables: a route per row */
.reftable td:first-child { white-space: nowrap; }
.reftable .method { display: inline-block; min-width: 4.4em; text-align: center; }
.reftable td p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.reftable .route__path { overflow-wrap: anywhere; }

/* Release notes rendered from the repository keep their tables readable */
.prose .notes-meta { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); background: var(--surface-1); font-size: 0.94rem; }
.prose .notes-meta b { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); font-weight: 600; margin-right: 8px; }


/* Planned pages say so in words wherever they're listed, not only by color */
.mtile__list span::after, span.rail__item > span:last-child::after { content: " · planned"; font-family: var(--font-mono); font-size: 0.7em; letter-spacing: 0.08em; text-transform: uppercase; }


/* Packets on the loopback ring stop when motion is reduced, even before the script runs */
@media (prefers-reduced-motion: reduce) {
  .loopmap__ring circle, .art .p[r="7.5"] { display: none; }
}