ruvnet-brain 3.9.134-dev → 4.0.2

package/console/tips.css

@@ -0,0 +1,926 @@
+/* ============================================================================
+   RUVNET BRAIN — HOW TO USE IT (page two of the console)
+   ----------------------------------------------------------------------------
+   Self-contained on purpose: the tokens below are COPIED from console/style.css
+   (Amber Substrate family) so this page never depends on a file another
+   session may be mid-edit in. Same semantics, worn the same way:
+     cyan  = always on (observed — depth 1)
+     amber = when you ask (acting — depth 2)
+     green = when you name it (grounded, precise — depth 3)
+   Fully offline: system font stacks only. Light + dark, both first-class.
+   ============================================================================ */
+
+/* ============================== 1 · TOKENS (copied) ============================== */
+
+:root {
+  color-scheme: dark;
+
+  --bg:        #0a0c10;
+  --bg-2:      #0e1116;
+  --surface:   #13171e;
+  --surface-2: #181d26;
+  --ridge:     #2a3140;
+
+  --ink:       #ece8dc;
+  --ink-2:     #c3c2b6;
+  --muted:     #8f94a1;
+  --faint:     #5a5f6e;
+  --on-accent: #0a0c10;
+
+  --amber: #f0a830;  --amber-text: #f0b04a;
+  --cyan:  #5ad6ff;  --cyan-text:  #5ad6ff;
+  --green: #5fd38a;  --green-text: #5fd38a;
+  --red:   #ff6b5e;  --red-text:   #ff8a7e;
+
+  --spectrum: linear-gradient(96deg, #f0a830 0%, #ffce6a 24%, #5ad6ff 58%, #5fd38a 100%);
+
+  --shadow:      0 18px 42px -24px rgba(0, 0, 0, 0.65);
+  --shadow-deep: 0 30px 70px -34px rgba(0, 0, 0, 0.8);
+
+  --display: "Iowan Old Style", "Palatino Nova", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
+  --sans:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --mono:    ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
+
+  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --radius:   16px;
+  --radius-s: 10px;
+  --maxw: 1080px;
+  --gutter: clamp(1.1rem, 4vw, 2.6rem);
+
+  --fs--2: clamp(0.685rem, 0.66rem + 0.12vw, 0.76rem);
+  --fs--1: clamp(0.815rem, 0.79rem + 0.14vw, 0.885rem);
+  --fs-0:  clamp(0.94rem,  0.91rem + 0.15vw, 1rem);
+  --fs-1:  clamp(1.06rem,  1.0rem  + 0.3vw,  1.19rem);
+  --fs-2:  clamp(1.24rem,  1.12rem + 0.6vw,  1.5rem);
+  --fs-3:  clamp(1.85rem,  1.4rem  + 2.3vw,  2.95rem);
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+
+  --bg:        #f1efe8;
+  --bg-2:      #e9e6dd;
+  --surface:   #fbfaf6;
+  --surface-2: #f2efe8;
+  --ridge:     #d9d5c9;
+
+  --ink:       #20242e;
+  --ink-2:     #3d4353;
+  --muted:     #575d6e;
+  --faint:     #878c99;
+  --on-accent: #241a06;
+
+  --amber: #e09614;  --amber-text: #8f5c05;
+  --cyan:  #2ba6cf;  --cyan-text:  #0a6d8f;
+  --green: #3aa768;  --green-text: #1e7a45;
+  --red:   #e05b4b;  --red-text:   #b03225;
+
+  --spectrum: linear-gradient(96deg, #c47d08 0%, #d9a12e 24%, #0e87ad 58%, #20824d 100%);
+
+  --shadow:      0 16px 36px -24px rgba(60, 50, 20, 0.35);
+  --shadow-deep: 0 26px 60px -30px rgba(60, 50, 20, 0.45);
+}
+
+/* derived — both themes */
+:root {
+  --hair:        color-mix(in srgb, var(--ridge) 78%, transparent);
+  --hair-strong: color-mix(in srgb, var(--ridge) 100%, transparent);
+  --line:        color-mix(in srgb, var(--amber) 22%, transparent);
+  --fill:        color-mix(in srgb, var(--amber) 9%, transparent);
+  --fill-cyan:   color-mix(in srgb, var(--cyan) 9%, transparent);
+  --fill-green:  color-mix(in srgb, var(--green) 9%, transparent);
+
+  --illo-stroke: color-mix(in srgb, var(--ink) 52%, transparent);
+  --illo-faint:  color-mix(in srgb, var(--ink) 24%, transparent);
+  --illo-plate:  color-mix(in srgb, var(--ink) 5%, transparent);
+}
+
+/* ============================== 2 · BASE (copied) ============================== */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: var(--fs-0);
+  line-height: 1.62;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  background-image:
+    radial-gradient(color-mix(in srgb, var(--ink) 4.5%, transparent) 1px, transparent 1.5px),
+    radial-gradient(1000px 560px at 82% -6%, color-mix(in srgb, var(--amber) 9%, transparent), transparent 62%),
+    radial-gradient(820px 640px at -8% 4%,  color-mix(in srgb, var(--cyan) 7%, transparent), transparent 56%),
+    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
+  background-size: 26px 26px, auto, auto, auto;
+  background-attachment: fixed;
+}
+
+img, svg, video { max-width: 100%; height: auto; }
+
+a { color: var(--cyan-text); text-decoration: none; }
+a:hover { color: var(--amber-text); }
+
+code {
+  font-family: var(--mono); font-size: 0.86em;
+  color: var(--cyan-text); background: var(--fill-cyan);
+  border: 1px solid color-mix(in srgb, var(--cyan) 26%, transparent);
+  border-radius: 6px; padding: 0.08em 0.42em;
+}
+
+.mono { font-family: var(--mono); }
+
+:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
+::selection { background: color-mix(in srgb, var(--amber) 30%, transparent); color: var(--ink); }
+
+.skip-link {
+  position: absolute; left: 0; top: 0; z-index: 100;
+  transform: translateY(-130%);
+  background: var(--amber); color: var(--on-accent);
+  font-family: var(--mono); font-size: var(--fs--1); font-weight: 600;
+  padding: 10px 16px; border-radius: 0 0 var(--radius-s) 0;
+  transition: transform 0.18s var(--ease);
+}
+.skip-link:focus { transform: translateY(0); }
+
+.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
+
+h1, h2, h3 {
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.012em;
+  line-height: 1.08;
+  color: var(--ink);
+  margin: 0 0 0.4em;
+  text-wrap: balance;
+}
+
+p { margin: 0 0 0.9rem; color: var(--ink-2); max-width: 70ch; text-wrap: pretty; }
+p:last-child { margin-bottom: 0; }
+
+.eyebrow {
+  font-family: var(--mono); font-size: var(--fs--2);
+  letter-spacing: 0.26em; text-transform: uppercase;
+  color: var(--cyan-text); margin: 0 0 14px;
+}
+
+/* ============================== 3 · HEADER (copied) ============================== */
+
+.head {
+  position: sticky; top: 0; z-index: 50;
+  background: color-mix(in srgb, var(--bg) 82%, transparent);
+  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
+}
+.head-inner {
+  display: flex; align-items: center; justify-content: space-between;
+  height: 58px; gap: 16px;
+}
+.spectrum-edge { height: 2px; background: var(--spectrum); opacity: 0.9; }
+
+.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
+.brand .mark { width: 28px; height: 28px; flex: none; }
+.brand .mark .mk-plate  { fill: #0b0d12; stroke: #2c3850; stroke-width: 1.5; }
+.brand .mark .mk-brain  { fill: none; stroke: #f0a830; stroke-width: 3.4; stroke-linejoin: round; }
+.brand .mark .mk-branch { fill: none; stroke: #f0a830; stroke-width: 2.4; stroke-linecap: round; opacity: 0.9; }
+.brand .mark .n1 { fill: #f4b13a; }
+.brand .mark .n2 { fill: #5ad6ff; }
+.brand .mark .n3 { fill: #5fd38a; }
+.brand-text {
+  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
+  letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis;
+}
+.brand-sub {
+  font-family: var(--mono); font-size: 11px; font-weight: 500;
+  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
+  margin-left: 8px;
+}
+
+.head-right { display: inline-flex; align-items: center; gap: 10px; }
+
+.back-chip {
+  font-size: 12.5px; color: var(--ink-2);
+  border: 1px solid var(--hair); border-radius: 100px; padding: 4px 13px;
+  white-space: nowrap; letter-spacing: 0.06em;
+  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
+}
+.back-chip:hover { border-color: var(--amber); color: var(--amber-text); background: var(--fill); }
+
+.theme-toggle {
+  width: 36px; height: 36px; border-radius: 10px;
+  border: 1px solid var(--hair-strong); background: transparent;
+  display: grid; place-items: center; cursor: pointer;
+  color: var(--ink-2);
+  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.15s var(--ease);
+}
+.theme-toggle:hover { border-color: var(--amber); color: var(--amber-text); background: var(--fill); }
+.theme-toggle:active { transform: scale(0.94); }
+.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
+:root[data-theme="dark"] .ic-moon { display: none; }
+:root[data-theme="light"] .ic-sun { display: none; }
+
+/* ============================== 4 · HERO ============================== */
+
+.intro { padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(1rem, 2.5vw, 1.6rem); animation: rise 0.55s var(--ease) both; }
+
+.intro-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
+@media (min-width: 62em) { .intro-grid { grid-template-columns: 1.04fr 0.96fr; } }
+
+h1 { font-size: var(--fs-3); }
+h1 em {
+  font-style: italic;
+  background: var(--spectrum);
+  -webkit-background-clip: text; background-clip: text;
+  color: transparent;
+}
+
+.lede { font-size: var(--fs-1); line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
+.lede b { color: var(--ink); font-weight: 650; }
+
+/* rUv, in his own words — the page's warrant */
+.ruv-quote {
+  margin: 1.4rem 0 0; padding: 16px 20px;
+  border-left: 3px solid var(--amber);
+  border-radius: 0 var(--radius-s) var(--radius-s) 0;
+  background: var(--fill);
+}
+.ruv-quote p {
+  font-family: var(--display); font-style: italic;
+  font-size: var(--fs-0); line-height: 1.55; color: var(--ink-2);
+  margin-bottom: 0.6rem;
+}
+.ruv-quote footer { font-size: 11.5px; letter-spacing: 0.05em; color: var(--muted); }
+
+/* ── hero art — the three-depths diagram (REBUILT 2026-07-17, twice) ────────
+   Root cause of the old unreadable hero: a 640-unit viewBox rendered into a
+   ~453px grid column, so every 11.5-unit label collapsed to ~8px effective.
+   The viewBox is now 460×300 — user units ≈ CSS px at desktop widths (scale
+   0.94–1.0) — and label sizes below are chosen so every line is ≥12px
+   EFFECTIVE at a 1024 viewport (431px render → ×0.937). Measured, not eyeballed.
+   Second lesson (same day): labeling each ring on its own top arc crowded all
+   the text into the rings' converging crowns and the paint-order halos punched
+   gaps in the strokes. So the layout is the original composition — rings left,
+   label column right, leader lines — which cannot collide by construction
+   (ring 3 peaks at x=226; the column starts at x=235), and needs no halos, so
+   the rings always render continuous.
+   Fully token-driven so the light theme works: label fills ride the *-text
+   ramps (light mode darkens them for contrast); the plate is --surface with
+   color-mix washes instead of a hardcoded dark fill.
+   All motion sits under prefers-reduced-motion: no-preference. At rest the
+   pulse is stroke-opacity 0 (invisible), the halo is a static soft glow, and
+   the caret is a steady block — a complete, fully-labeled diagram. */
+.hero-art {
+  margin: 0 auto; position: relative; overflow: hidden;
+  width: 100%; max-width: 560px;   /* keeps the plate sane when the grid collapses to one column */
+  border-radius: var(--radius); border: 1px solid var(--ridge);
+  box-shadow: var(--shadow-deep);
+  aspect-ratio: 460 / 300;         /* matches the viewBox exactly — the SVG fills edge to edge */
+  background:
+    radial-gradient(120% 85% at 12% 6%,   color-mix(in srgb, var(--amber) 9%, transparent), transparent 60%),
+    radial-gradient(110% 85% at 90% 18%,  color-mix(in srgb, var(--cyan) 8%, transparent), transparent 58%),
+    radial-gradient(130% 90% at 45% 108%, color-mix(in srgb, var(--green) 7%, transparent), transparent 60%),
+    var(--surface);
+}
+.hero-art .hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
+.hero-cap {
+  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
+  margin: 0; padding: 7px 14px;
+  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
+  color: var(--muted);
+  background: color-mix(in srgb, var(--surface) 78%, transparent);
+  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
+  border-top: 1px solid color-mix(in srgb, var(--cyan) 16%, transparent);
+}
+
+/* strata — the top edge carries each depth's stroke style: solid = always on;
+   dashed/dotted = only there when you reach for them. Band fills are a whisper of the
+   same hue so the strata read as material, not as chart bars. */
+.hero-scene .hs-band    { stroke: none; }
+.hero-scene .hs-band.b1 { fill: color-mix(in srgb, var(--cyan) 8%, transparent); }
+.hero-scene .hs-band.b2 { fill: color-mix(in srgb, var(--amber) 6%, transparent); }
+.hero-scene .hs-band.b3 { fill: color-mix(in srgb, var(--green) 6%, transparent); }
+.hero-scene .hs-edge    { fill: none; stroke-linecap: round; }
+.hero-scene .hs-edge.e1 { stroke: var(--cyan);  stroke-width: 2.4; }
+.hero-scene .hs-edge.e2 { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 7 8;  opacity: 0.85; }
+.hero-scene .hs-edge.e3 { stroke: var(--green); stroke-width: 2; stroke-dasharray: 2 10; opacity: 0.8; }
+
+/* the plumb line — the path a prompt takes down through the depths */
+.hero-scene .hs-plumb   { stroke: var(--ridge); stroke-width: 1.4; stroke-dasharray: 1 6;
+                          stroke-linecap: round; }
+.hero-scene .hs-pulse   { fill: var(--cyan); opacity: 0; }
+.hero-scene .hs-b1-halo { /* depth 1's edge doubles as the catch halo (animated below) */ }
+
+/* labels — inside their own band's lane, clear of the plumb column (x=112) */
+.hero-scene .hs-main, .hero-scene .hs-sub { font-family: var(--mono); text-anchor: start; }
+.hero-scene .hs-main  { font-size: 14.5px; letter-spacing: 1.5px; }
+.hero-scene .hs-sub   { font-size: 13.5px; fill: var(--muted); }
+.hero-scene .hs-l1    { fill: var(--cyan-text); }
+.hero-scene .hs-l2    { fill: var(--amber-text); }
+.hero-scene .hs-l3    { fill: var(--green-text); }
+.hero-scene .hs-punch { font-family: var(--display); font-style: italic; font-size: 14.5px;
+                        fill: var(--cyan-text); text-anchor: end; }
+.hero-scene .hs-note  { text-anchor: end; font-style: italic; }
+
+/* the surface prompt */
+.hero-scene .hs-box    { fill: var(--surface-2); stroke: var(--ridge); stroke-width: 1.5; }
+.hero-scene .hs-prompt { font-family: var(--mono); font-size: 13.5px; text-anchor: middle;
+                         fill: var(--ink-2); }
+.hero-scene .hs-pmark, .hero-scene .hs-caret { fill: var(--amber-text); }
+
+/* Small phones: the hero shrinks to ~320px wide, where the 13.5px sub-labels render ~9px —
+   present but unreadable (the exact bug this project keeps relearning: see
+   scripts/check-legibility.mjs). The strata composition keeps its SHAPE on phones — full-width
+   bands need no re-centering — so only the subs and the punchline hide, and the mains grow to
+   stay legible. The stage-legend below the figure repeats every word at full size; the
+   aria-label still carries the whole description to assistive tech. */
+@media (max-width: 29em) {
+  .hero-scene .hs-sub, .hero-scene .hs-punch { display: none; }
+  .hero-scene .hs-main   { font-size: 19px; }
+  .hero-scene .hs-prompt { font-size: 17.5px; }
+  .hero-scene .hs-box    { width: 138px; }
+  .hero-cap { font-size: 10px; letter-spacing: 0.08em; } /* single line — a wrap eats the diagram */
+  /* with the sub-labels gone on phones, the legend IS the key — give it more presence */
+  .stage-legend { font-size: var(--fs--1); }
+}
+
+/* motion — only when the user allows it. The pulse is a prompt dropping down the plumb line;
+   depth 1's edge brightens as it lands (same 3.2s clock, so they stay in phase); strata 2 and 3
+   never stir. That IS the lesson: depth 1 works without you, the deeper strata only wake when
+   reached for. */
+@media (prefers-reduced-motion: no-preference) {
+  .hero-scene .hs-caret   { animation: hs-caret 1.1s steps(1) infinite; }
+  .hero-scene .hs-pulse   { animation: hs-drop 3.2s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
+  .hero-scene .hs-b1-halo { animation: hs-catch 3.2s linear infinite; }
+}
+@keyframes hs-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
+@keyframes hs-drop {
+  0%   { transform: translateY(0);    opacity: 0; }
+  8%   { transform: translateY(2px);  opacity: 0.8; }
+  45%  { transform: translateY(44px); opacity: 0.55; } /* lands inside depth 1 (cy 50 → ~94) */
+  60%  { transform: translateY(44px); opacity: 0; }
+  100% { transform: translateY(44px); opacity: 0; }
+}
+@keyframes hs-catch {
+  0%, 40%   { stroke-opacity: 0.85; }
+  52%       { stroke-opacity: 1; stroke-width: 3.4; }
+  74%, 100% { stroke-opacity: 0.85; }
+}
+
+/* ── Collapsible sections (owner, 2026-07-24: "collapsible sections... otherwise it gets too
+   overwhelming as a wall of text"). Progressive enhancement: tips.js wraps each .depth-body
+   and wires the header; with JS off nothing collapses and the whole page reads as before.
+   The grid-rows 0fr/1fr trick animates height without measuring it. */
+.depth.dc-ready > .depth-head { cursor: pointer; }
+.depth.dc-ready > .depth-head:hover h2 { text-decoration: underline;
+  text-decoration-thickness: 1px; text-underline-offset: 4px; }
+.depth.dc-ready > .depth-head:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }
+/* Some sections crown themselves with an art <figure> BEFORE the header — the JS wrapper only
+   captures children AFTER it, so a collapsed section would still wear its full-bleed art (seen
+   live 2026-07-24: depth-3's glass panels floating above its own collapsed header). Hide every
+   non-header child on collapse; the DOM stays untouched so the open layout is exactly as authored. */
+.depth.is-collapsed > :not(.depth-head):not(.dc) { display: none; }
+.dc { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.3s ease; }
+.dci { overflow: hidden; min-height: 0; }
+.depth.is-collapsed .dc { grid-template-rows: 0fr; }
+.dc-chev { flex: 0 0 auto; margin-left: auto; width: 22px; height: 22px; align-self: center;
+  color: var(--muted); transition: transform 0.3s ease; }
+.depth.is-collapsed .dc-chev { transform: rotate(-90deg); }
+.dc-chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2;
+  stroke-linecap: round; stroke-linejoin: round; }
+.dc-all { display: flex; justify-content: flex-end; margin: 0 0 10px; }
+.dc-all button { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
+  color: var(--muted); background: none; border: 1px solid var(--hair); border-radius: 100px;
+  padding: 4px 12px; cursor: pointer; }
+.dc-all button:hover { color: var(--ink-2); }
+@media (prefers-reduced-motion: reduce) {
+  .dc, .dc-chev { transition: none; }
+}
+
+/* the three-depths legend (same idiom as the console's color legend) */
+.stage-legend {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px;
+  margin: clamp(1.2rem, 3vw, 1.8rem) 0 14px;
+  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
+  max-width: none;
+}
+.stage-legend .lg-cap { color: var(--faint); letter-spacing: 0.2em; }
+.stage-legend .lg { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
+.stage-legend .lg-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
+.stage-legend .d-cyan  { background: var(--cyan); }
+.stage-legend .d-green { background: var(--green); }
+.stage-legend .d-amber { background: var(--amber); }
+
+/* ============================== 5 · DEPTH SECTIONS ============================== */
+
+main { padding-bottom: clamp(2rem, 5vw, 4rem); }
+
+.card {
+  position: relative;
+  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 55%, var(--bg-2)) 100%);
+  border: 1px solid var(--ridge);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  margin: 0 0 clamp(14px, 2vw, 20px);
+  overflow: hidden;
+  animation: rise 0.55s var(--ease) both;
+}
+.card:nth-of-type(1) { animation-delay: 0.06s; }
+.card:nth-of-type(2) { animation-delay: 0.14s; }
+.card:nth-of-type(3) { animation-delay: 0.22s; }
+@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
+
+/* stage rail — 3px color spine, same meaning as page one */
+.card::before {
+  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 1;
+  pointer-events: none;
+}
+.rail-mirror::before { background: color-mix(in srgb, var(--cyan) 64%, transparent); }
+.rail-prove::before  { background: color-mix(in srgb, var(--green) 64%, transparent); }
+.rail-act::before    { background: color-mix(in srgb, var(--amber) 66%, transparent); }
+
+/* stage chips (copied idiom) */
+.stage {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
+  letter-spacing: 0.2em; text-transform: uppercase;
+  padding: 2.5px 10px 2.5px 8px; border-radius: 100px; border: 1px solid;
+  width: fit-content;
+}
+.stage::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.st-mirror { color: var(--cyan-text);  border-color: color-mix(in srgb, var(--cyan) 30%, transparent);  background: color-mix(in srgb, var(--cyan) 8%, transparent); }
+.st-rec    { color: var(--amber-text); border-color: color-mix(in srgb, var(--amber) 32%, transparent); background: color-mix(in srgb, var(--amber) 8%, transparent); }
+.st-prove  { color: var(--green-text); border-color: color-mix(in srgb, var(--green) 30%, transparent); background: color-mix(in srgb, var(--green) 8%, transparent); }
+
+/* Wide architecture diagrams — the honest answer to a bug measured on 2026-07-17.
+   A 900-unit diagram squeezed into a 261px phone column renders its labels at 3px: present,
+   unclipped, xmllint-clean, and completely invisible. The tempting fix — shrink the type to
+   fit — is what CAUSED the bug (the hero shipped at 8.1px the same way). A dense diagram
+   cannot honestly compress; below a certain width it simply stops being readable.
+   So we give it a floor and let the narrow viewport scroll to it. Each figure declares its
+   own --dmin (the width at which its smallest label clears 12px effective — MEASURE it,
+   don't guess: scripts/check-legibility.mjs computes declared x renderedWidth/viewBoxWidth
+   against the REAL page, not the asset in isolation). Swiping a legible diagram beats
+   squinting at a crushed one. */
+.diagram-scroll {
+  margin: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+  border-radius: var(--radius-s);
+}
+.diagram-scroll img {
+  display: block;
+  width: 100%;
+  min-width: var(--dmin, 780px);   /* the legibility floor, per diagram */
+  height: auto;
+}
+.diagram-scroll figcaption {
+  margin: 10px 2px 0;
+  font-size: var(--fs--2);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+  position: sticky; left: 0;       /* stays put while the diagram scrolls under it */
+}
+/* Below the floor the figure scrolls, so say so — an unannounced scroll region is a trap. */
+@media (max-width: 52em) {
+  .diagram-scroll::after {
+    content: "swipe the diagram →";
+    display: block;
+    margin-top: 8px;
+    font-family: var(--mono); font-size: var(--fs--2);
+    letter-spacing: 0.08em; color: var(--faint);
+    position: sticky; left: 0;
+  }
+}
+
+/* Section art — one still per depth, all three in ONE material language: a dark-glass
+   corridor, an amber prompt, cyan/green refraction. Each carries its depth's IDEA rather
+   than decorating it — 01 light travelling on its own · 02 light being answered · 03 one
+   panel deliberately lit among many. Generated (gemini-3-pro-image) from the console's own
+   token palette, which is why they match the page instead of sitting on top of it.
+   Full-bleed: the card's own overflow:hidden + radius do the clipping, no negative margins.
+   Cropped to a band via aspect-ratio — the source stills are 16:9 with dead sky/floor the
+   composition doesn't need. NOT loading="lazy": a lazy image inside this page already
+   shipped once that never fetched at all. */
+.depth-art {
+  margin: 0;
+  aspect-ratio: 1584 / 640;
+  background: #0a0c10;
+  border-bottom: 1px solid var(--ridge);
+}
+.depth-art img {
+  width: 100%; height: 100%;
+  object-fit: cover; object-position: center;
+  display: block;
+}
+@media (max-width: 40em) {
+  .depth-art { aspect-ratio: 1584 / 900; }
+}
+
+.depth-head {
+  display: flex; align-items: flex-start; gap: clamp(14px, 2.4vw, 22px);
+  padding: clamp(18px, 3vw, 28px) clamp(16px, 3vw, 28px) 0;
+}
+.locator { flex: none; width: clamp(56px, 7vw, 76px); height: auto; margin-top: 4px; }
+
+.depth-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
+.depth-title h2 { font-size: var(--fs-2); margin: 0; }
+.depth-title .q { font-size: var(--fs--1); color: var(--ink-2); line-height: 1.5; margin: 0; max-width: 58ch; }
+
+.depth-num {
+  flex: none; align-self: flex-start;
+  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 300;
+  color: var(--faint); letter-spacing: 0.04em; line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.depth-body { padding: clamp(14px, 2.4vw, 22px) clamp(16px, 3vw, 28px) clamp(18px, 3vw, 28px); }
+
+/* the shared closing line of each depth — its metaphor, spoken once */
+.metaphor {
+  margin: clamp(14px, 2.4vw, 20px) 0 0;
+  padding-top: 14px;
+  border-top: 1px solid var(--hair);
+  font-family: var(--display); font-style: italic;
+  font-size: var(--fs-0); color: var(--muted);
+}
+
+/* ---- depth 1: the three ambient guarantees ---- */
+.ambient-grid {
+  list-style: none; margin: 0; padding: 0;
+  display: grid; grid-template-columns: 1fr; gap: 12px;
+}
+@media (min-width: 46em) { .ambient-grid { grid-template-columns: repeat(3, 1fr); } }
+.ambient-grid li {
+  border: 1px solid var(--hair); border-radius: var(--radius-s);
+  background: var(--illo-plate);
+  padding: 16px 16px 14px;
+  display: flex; flex-direction: column; gap: 6px;
+}
+.ambient-grid b { color: var(--ink); font-size: var(--fs-0); font-weight: 650; }
+.ambient-grid p { font-size: var(--fs--1); color: var(--ink-2); line-height: 1.5; margin: 0; }
+.amb-ic {
+  width: 32px; height: 32px; border-radius: 9px; margin-bottom: 4px;
+  display: grid; place-items: center; border: 1px solid;
+}
+.amb-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.ic-cyan { color: var(--cyan-text); border-color: color-mix(in srgb, var(--cyan) 22%, transparent); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
+
+/* the permission slip between depth 1 and the rest */
+.stop-here {
+  display: flex; align-items: center; gap: 16px;
+  margin: clamp(18px, 3vw, 28px) 0;
+  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
+  color: var(--muted); text-align: center;
+}
+.stop-here::before, .stop-here::after {
+  content: ""; flex: 1 1 auto; height: 1px;
+  background: linear-gradient(90deg, transparent, var(--hair-strong));
+}
+.stop-here::after { background: linear-gradient(90deg, var(--hair-strong), transparent); }
+
+/* ---- depth 2: spoken phrases as speech bubbles ---- */
+.ask-rows { display: flex; flex-direction: column; gap: 14px; }
+.ask-row { display: grid; grid-template-columns: 1fr; gap: 6px 18px; align-items: baseline; }
+@media (min-width: 46em) { .ask-row { grid-template-columns: 148px 1fr; } }
+.ask-cap {
+  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
+  color: var(--muted); white-space: nowrap;
+}
+.say-wrap { display: flex; flex-wrap: wrap; gap: 8px 10px; }
+.say {
+  position: relative;
+  font-family: var(--mono); font-size: 13px; line-height: 1.3;
+  color: var(--amber-text);
+  background: var(--fill);
+  border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
+  border-radius: 13px 13px 13px 4px;
+  padding: 7px 13px;
+  white-space: nowrap;
+}
+@media (max-width: 30em) { .say { white-space: normal; } }
+
+/* ---- depth 3: the pegboard ---- */
+.peg-groups { display: grid; grid-template-columns: 1fr; gap: 12px; }
+@media (min-width: 56em) { .peg-groups { grid-template-columns: repeat(3, 1fr); } }
+.peg {
+  border: 1px solid var(--hair); border-radius: var(--radius-s);
+  padding: 16px 16px 14px;
+  /* the pegboard: a quiet grid of holes behind the tools */
+  background-color: var(--illo-plate);
+  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.4px);
+  background-size: 18px 18px;
+}
+.peg-cap {
+  margin: 0 0 12px; font-size: 10.5px; font-weight: 600;
+  letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-text);
+}
+.peg-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.peg-list li { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
+.peg-list code { font-size: 13px; padding: 0.18em 0.55em; }
+.peg-gloss { font-size: var(--fs--2); color: var(--muted); padding-left: 2px; }
+.peg-note { font-size: var(--fs--1); color: var(--muted); line-height: 1.5; margin: 0; }
+
+/* ============================== 6 · CLOSER + FOOTER ============================== */
+
+.closer {
+  margin-top: clamp(1.6rem, 4vw, 2.6rem);
+  text-align: center;
+  display: flex; flex-direction: column; align-items: center; gap: 16px;
+}
+.closer-line { font-size: var(--fs-1); color: var(--ink-2); max-width: 46ch; margin: 0; }
+.closer-line b { color: var(--ink); font-weight: 650; }
+
+.btn-console {
+  display: inline-flex; align-items: center; gap: 9px;
+  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--on-accent); background: var(--amber);
+  border: 1px solid color-mix(in srgb, var(--amber) 70%, black);
+  border-radius: 11px; padding: 11px 20px;
+  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), background 0.18s var(--ease);
+  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--amber) 65%, transparent);
+}
+.btn-console:hover {
+  color: var(--on-accent);
+  background: color-mix(in srgb, var(--amber) 88%, white);
+  transform: translateY(-1px);
+  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--amber) 80%, transparent);
+}
+.btn-console:active { transform: none; }
+
+/* RESTING MOTION. Owner, on the earlier version: "it just looks like a window, not a button."
+   Making it a filled amber button fixed the shape; it still sat perfectly still until touched, so
+   nothing on a long page said "this one is clickable." Everything here is deliberately understated —
+   a slow breath on the shadow and a periodic nudge of the arrow, both idling most of the cycle. The
+   goal is peripheral-vision pickup, not a demand for attention: a CTA that jitters continuously
+   reads as an advert, which on a page whose whole argument is "we tell you the truth quietly" would
+   cost more trust than the click is worth.
+   Pauses on hover, where the existing lift takes over and a second motion would just be noise. */
+@keyframes btn-console-breathe {
+  0%, 100% { box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--amber) 65%, transparent); }
+  50%      { box-shadow: 0 12px 30px -13px color-mix(in srgb, var(--amber) 85%, transparent); }
+}
+@keyframes btn-console-nudge {
+  0%, 78%, 100% { transform: translateX(0); }
+  86%           { transform: translateX(3px); }
+  93%           { transform: translateX(0); }
+}
+.btn-console { animation: btn-console-breathe 3.2s var(--ease) infinite; }
+.btn-console:hover { animation: none; }
+.btn-console > span[aria-hidden] {
+  display: inline-block;                 /* transform needs a block box; inline ignores translateX */
+  animation: btn-console-nudge 3.2s var(--ease) infinite;
+}
+.btn-console:hover > span[aria-hidden] { animation: none; transform: translateX(3px); }
+
+.foot { border-top: 1px solid var(--hair); margin-top: clamp(1.5rem, 4vw, 3rem); }
+.foot-inner { padding-block: 22px; }
+.foot-line { font-size: var(--fs--1); color: var(--muted); margin: 0; }
+
+/* ============================== 7 · MOTION SAFETY ============================== */
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  .intro, .card { animation: none; }
+  .ring-halo, .caret { animation: none; }
+  .btn-console, .theme-toggle, .back-chip { transition: none; }
+  /* The resting breathe/nudge is an attention cue, which is exactly the class of motion this query
+     exists to switch off. Killing it on the arrow too — a looping transform is the part most likely
+     to bother someone who asked for less movement. The button keeps its colour and hover states, so
+     nothing about its affordance depends on the animation being present. */
+  .btn-console, .btn-console > span[aria-hidden] { animation: none; }
+  .btn-console:hover > span[aria-hidden] { transform: none; }
+}
+
+/* ── So what IS MetaHarness? ──────────────────────────────────────────────────────────────────────
+   The console asks you to switch on a word you've never seen. rUv flagged this exact risk in ADR-076
+   ("'Meta-harness' is a newer term… must define it in the first screen so it doesn't read as jargon")
+   and we shipped the jargon without the mitigation. The diagram IS the mitigation, so it gets room to
+   breathe rather than being squeezed beside prose. */
+.mh-figure {
+  margin: 4px 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px;
+  background: var(--fill); overflow-x: auto;
+}
+.mh-figure img { display: block; width: 100%; height: auto; max-width: 900px; margin-inline: auto; }
+.mh-cite { font-size: var(--step--2); color: var(--faint); margin-top: 10px; line-height: 1.6; }
+.mh-cite code { color: var(--muted); }
+
+/* ============================== 8 · CAPSTONE — the payoff ============================== */
+/* The crown of the page: value reframe + does/doesn't + momentum. Reuses .card / .depth-head
+   so it reads as the same page; earns a SPECTRUM rail because this is where all three depths
+   pay off at once. 100% token-driven (both themes); every animation gated behind
+   prefers-reduced-motion; all text is HTML DOM (the glyphs carry no <text>, so nothing here
+   trips the SVG-scaling legibility trap). */
+
+.rail-pay::before { background: var(--spectrum); opacity: 0.95; }
+
+/* the payoff stage chip — a spectrum dot signals "all three depths, cashed in" */
+.st-pay {
+  color: var(--amber-text);
+  border-color: color-mix(in srgb, var(--amber) 34%, transparent);
+  background: color-mix(in srgb, var(--amber) 9%, transparent);
+}
+.st-pay::before { background: var(--spectrum); }
+
+.capstone .depth-sub {
+  font-size: var(--fs--1); color: var(--ink-2); line-height: 1.5; margin: 0; max-width: 60ch;
+}
+
+/* ---- Part 2 · the trade (effort spared │ power gained) ---- */
+.trade {
+  display: grid; grid-template-columns: 1fr; gap: 14px;
+  margin-top: clamp(4px, 1.4vw, 10px);
+}
+@media (min-width: 52em) {
+  .trade { grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 2.2vw, 28px); align-items: stretch; }
+}
+
+.trade-col {
+  border: 1px solid var(--hair); border-radius: var(--radius-s);
+  padding: 16px 16px 15px;
+  display: flex; flex-direction: column; gap: 13px;
+}
+.trade-spared { background: color-mix(in srgb, var(--red) 4%, var(--illo-plate)); }
+.trade-gain   { background: color-mix(in srgb, var(--green) 6%, var(--illo-plate)); }
+
+.trade-cap {
+  display: flex; align-items: center; gap: 9px; margin: 0;
+  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
+}
+.trade-spared .trade-cap { color: var(--muted); }
+.trade-gain   .trade-cap { color: var(--green-text); }
+.trade-cap-ic { flex: none; width: 20px; height: 20px; display: grid; place-items: center; }
+.trade-cap-ic svg { width: 20px; height: 20px; }
+.trade-spared .trade-cap-ic { color: var(--red-text); }
+.trade-gain   .trade-cap-ic { color: var(--amber-text); }
+
+.trade-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
+.trade-list li { display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: start; }
+.trade-txt { font-size: var(--fs--1); line-height: 1.45; color: var(--ink-2); }
+.trade-gain .trade-txt { color: var(--ink); }
+.trade-note { display: block; margin-top: 3px; font-size: var(--fs--2); color: var(--muted); line-height: 1.4; }
+.trade-note code { font-size: 0.92em; white-space: nowrap; }
+
+/* per-row glyph chips */
+.trade-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; margin-top: 1px;
+            display: grid; place-items: center; border: 1px solid; }
+.trade-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
+                stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+/* left = restraint: one quiet red-toned chip for every "spared" row */
+.trade-spared .trade-ic {
+  color: var(--muted);
+  border-color: color-mix(in srgb, var(--red) 24%, transparent);
+  background: color-mix(in srgb, var(--red) 6%, transparent);
+}
+/* right = gain: chips ride the three depth colors (cyan grounding · amber routing · green gates) */
+.ic-cy { color: var(--cyan-text);  border-color: color-mix(in srgb, var(--cyan) 26%, transparent);  background: color-mix(in srgb, var(--cyan) 9%, transparent); }
+.ic-am { color: var(--amber-text); border-color: color-mix(in srgb, var(--amber) 28%, transparent); background: color-mix(in srgb, var(--amber) 9%, transparent); }
+.ic-gr { color: var(--green-text); border-color: color-mix(in srgb, var(--green) 26%, transparent); background: color-mix(in srgb, var(--green) 9%, transparent); }
+
+/* the spine + transform arrow between the two columns */
+.trade-spine { display: flex; align-items: center; justify-content: center; position: relative; }
+.trade-arrow {
+  flex: none; width: 36px; height: 36px; border-radius: 50%;
+  display: grid; place-items: center; color: var(--on-accent);
+  background: var(--spectrum);
+  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--amber) 55%, transparent);
+}
+.trade-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
+                   stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
+/* desktop: vertical spine, arrow points right */
+@media (min-width: 52em) {
+  .trade-spine { flex-direction: column; padding: 4px 0; }
+  .trade-spine::before, .trade-spine::after {
+    content: ""; flex: 1 1 auto; width: 2px;
+    background: linear-gradient(var(--hair-strong), transparent);
+  }
+  .trade-spine::after { background: linear-gradient(transparent, var(--hair-strong)); }
+  .trade-spine::before { margin-bottom: 12px; }
+  .trade-spine::after  { margin-top: 12px; }
+}
+/* mobile: horizontal divider, arrow rotates to point down */
+@media (max-width: 51.99em) {
+  .trade-spine { gap: 12px; }
+  .trade-spine::before, .trade-spine::after {
+    content: ""; flex: 1 1 auto; height: 1px;
+    background: linear-gradient(90deg, transparent, var(--hair-strong));
+  }
+  .trade-spine::after { background: linear-gradient(90deg, var(--hair-strong), transparent); }
+  .trade-arrow svg { transform: rotate(90deg); }
+}
+
+/* ---- Part 3 · the momentum proof ---- */
+.momentum {
+  margin-top: clamp(18px, 3vw, 26px);
+  padding-top: clamp(16px, 3vw, 22px);
+  border-top: 1px solid var(--hair);
+}
+.mo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px; }
+.mo-hero { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
+.mo-hero-num {
+  font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1;
+  font-size: clamp(2.1rem, 1.35rem + 3.5vw, 3.4rem);
+  background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.mo-hero-unit {
+  font-family: var(--mono); font-size: var(--fs--1); letter-spacing: 0.08em;
+  text-transform: uppercase; color: var(--muted);
+}
+.mo-climb {
+  display: inline-flex; align-items: center; gap: 7px;
+  font-family: var(--mono); font-size: var(--fs--1); font-weight: 600;
+  letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-text);
+  border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
+  background: color-mix(in srgb, var(--green) 9%, transparent);
+  border-radius: 100px; padding: 4px 12px;
+}
+.mo-climb svg { width: 17px; height: 13px; fill: none; stroke: currentColor;
+                stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.mo-cap { font-size: var(--fs--1); color: var(--ink-2); margin: 0 0 clamp(13px, 2.2vw, 18px); max-width: 64ch; }
+
+.mo-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+.mo-bar { display: grid; grid-template-columns: 118px 1fr 54px; align-items: center; gap: 13px; }
+.mo-bar-name {
+  font-family: var(--mono); font-size: var(--fs--1); color: var(--ink-2);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.mo-bar-track {
+  height: 15px; border-radius: 100px; overflow: hidden;
+  background: color-mix(in srgb, var(--ink) 8%, transparent);
+  border: 1px solid var(--hair);
+}
+.mo-bar-fill {
+  display: block; height: 100%; width: var(--w); min-width: 7px;
+  border-radius: 100px; background: var(--spectrum);
+  transform-origin: left center;
+}
+.mo-bar-val {
+  font-family: var(--mono); font-size: var(--fs--1); font-weight: 600;
+  color: var(--ink); text-align: right; white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+@media (max-width: 34em) {
+  .mo-bar { grid-template-columns: 1fr auto; grid-template-areas: "name val" "track track"; row-gap: 6px; column-gap: 10px; }
+  .mo-bar-name  { grid-area: name; }
+  .mo-bar-val   { grid-area: val; }
+  .mo-bar-track { grid-area: track; }
+}
+
+.mo-source {
+  margin: clamp(14px, 2.4vw, 18px) 0 0;
+  font-size: var(--fs--2); letter-spacing: 0.07em; color: var(--faint);
+}
+
+/* the single closing line — hands off to the existing "Open the console →" CTA below */
+.capstone-close {
+  margin: clamp(20px, 3.4vw, 30px) auto 0;
+  padding-top: clamp(16px, 2.6vw, 20px);
+  border-top: 1px solid var(--hair);
+  font-family: var(--display); font-size: var(--fs-1); line-height: 1.5;
+  color: var(--ink-2); text-align: center; max-width: 58ch;
+}
+.capstone-close b { color: var(--ink); font-weight: 650; }
+
+/* motion — gated. Bars draw in from the left; at rest (or reduced-motion) they are already at
+   full width — a complete, legible chart, never a blank frame. */
+@media (prefers-reduced-motion: no-preference) {
+  .mo-bar-fill { transform: scaleX(0); animation: mo-grow 1s var(--ease) forwards; }
+  .mo-bar:nth-child(1) .mo-bar-fill { animation-delay: 0.05s; }
+  .mo-bar:nth-child(2) .mo-bar-fill { animation-delay: 0.13s; }
+  .mo-bar:nth-child(3) .mo-bar-fill { animation-delay: 0.21s; }
+  .mo-bar:nth-child(4) .mo-bar-fill { animation-delay: 0.29s; }
+  .mo-bar:nth-child(5) .mo-bar-fill { animation-delay: 0.37s; }
+}
+@keyframes mo-grow { to { transform: scaleX(1); } }
+
+/* ── THE PARTS DRAWER ────────────────────────────────────────────────────────────────────────────
+   A reference list, styled as one: dense, scannable, two columns on desktop, no illustration. It is
+   deliberately the plainest block on the page — everything above it is argument, this is inventory,
+   and dressing inventory up as argument is how a catalogue starts to read as a sales pitch. */
+.parts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 38px); padding: 0 clamp(16px, 3vw, 34px) 4px; }
+@media (max-width: 860px) { .parts-grid { grid-template-columns: 1fr; } }
+.parts-col h3 {
+  font-size: .82rem; text-transform: uppercase; letter-spacing: .09em;
+  color: var(--muted); margin: 1.1rem 0 .5rem; font-weight: 650;
+}
+.parts-col h3:first-child { margin-top: 0; }
+.parts-col dl { margin: 0; }
+.parts-col dt { font-weight: 650; font-size: .93rem; margin-top: .7rem; }
+.parts-col dd {
+  margin: .15rem 0 0; font-size: .89rem; line-height: 1.5; color: var(--muted-strong, var(--ink));
+  opacity: .92;
+}
+.parts-col dd code {
+  display: inline-block; margin-top: .18rem; font-size: .78rem;
+  color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent);
+  padding: .06em .38em; border-radius: 4px; word-break: break-word;
+}
+.parts-foot {
+  margin: 1.3rem clamp(16px, 3vw, 34px) 0; padding-top: .9rem;
+  border-top: 1px solid var(--hair); font-size: .87rem; color: var(--muted); max-width: 74ch;
+}