@mkbabb/glass-ui 3.10.1 → 3.11.0

package/dist/styles/tokens.css

@@ -8,27 +8,2365 @@
  * Structural tokens (durations, easings, springs, z-index, focus ring,
  * interactive scales) are stable across consumers. Visual tokens (colors,
  * shadows, radii, grain opacities) are consumer-overridable.
- *
- * This file is the thin @import ROOT of the token cascade. The token body is
- * carved into cohesive `tokens/*.css` partials (each under the no-god-module
- * 500-line bound), @import-ed below in CASCADE ORDER. The cascade is isomorphic:
- * the master :root sub-ranges each carry their own :root{} (adjacent
- * same-selector blocks resolve identically), and the post-root overrides
- * (light-dark, the .dark arm, the @property registrations) keep their source
- * order. See docs/precepts/design-idioms.md §cohesion-aware partials. The
- * partial cascade order is BINDING — light-dark after the master partials
- * (overrides them), dark-arm after light-dark, property-regs last
- * (registrations + the specular magnitude cohort that reads them).
  */
 
-/* CSS @import rules must precede every other rule. The nine partials @import in
-   cascade order: */
-@import "./tokens/scheme-motion.css";
-@import "./tokens/color-radius.css";
-@import "./tokens/shadow.css";
-@import "./tokens/glass.css";
-@import "./tokens/offsets-sizing.css";
-@import "./tokens/scale-paper.css";
-@import "./tokens/light-dark.css";
-@import "./tokens/dark-arm.css";
-@import "./tokens/property-regs.css";
+:root {
+    /* ═══════════════════════════════════════════════
+       §-1  COLOR-SCHEME (AQ.W2 §1)
+
+       Lets native UI (scrollbars, spinbuttons, form-control chrome, the
+       default focus ring) honor the OS preference when the consumer has
+       NOT pinned a `.dark` class. glass-ui's dark mode is class-driven
+       (`.dark`, theme.css `@variant dark`), so `.dark` overrides to a hard
+       `dark` regardless of OS — but absent the class, native chrome should
+       still track `prefers-color-scheme`. `light dark` (not `only light`)
+       on `:root` delivers that; `.dark` hard-pins `dark`.
+
+       Baseline Widely Available → adopt natively, no `@supports` guard
+       (older engines ignore the property and keep default-light chrome).
+       `accent-color` (AQ.W2 §4) is the companion native-control brand;
+       both are inherited built-in <color>/keyword properties re-specified
+       inside `.dark`. The `--accent-color` token is defined in the §5
+       color block below (custom properties resolve order-independently).
+       ═══════════════════════════════════════════════ */
+    color-scheme: light dark;
+    accent-color: var(--accent-color);
+
+    /* ═══════════════════════════════════════════════
+       §0  FONT TOKEN SOURCE-OF-TRUTH
+
+       The single authoritative declaration of the library's font register.
+       theme.css bridges each --font-stack-* to its Tailwind --font-* namespace
+       var; typography.css consumes the bridged --font-* names. The public
+       runtime knobs remain --font-*, --leading-*, --tracking-*.
+
+       ONE brand register: Plus Jakarta Sans (text + display) + Fira Code (mono).
+       --font-stack-text drives the body/heading/prose/display register — the
+       library DEFAULT is the register every live surface paints (the demo +
+       speedtest render Plus Jakarta everywhere). The calibrated "Plus Jakarta
+       Sans Fallback" / "Fira Code Fallback" faces (declared in typography.css)
+       wrap the system stacks with Capsize metric overrides so the swap window
+       is geometry-neutral (zero CLS). --font-stack-display aliases the text
+       register: there is no separate display-serif voice. */
+    --font-stack-text: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
+    --font-stack-display: var(--font-stack-text);
+    --font-stack-sans: var(--font-stack-text);
+    --font-stack-mono: "Fira Code", "Fira Code Fallback", "Fira Mono", monospace;
+
+    --type-leading-micro: 1.2;
+    --type-leading-caption: 1.3;
+    --type-leading-small: 1.4;
+    --type-leading-body: 1.5;
+    --type-leading-prose: 1.618;
+    --type-leading-heading: 1.2;
+    --type-leading-display: 1.1;
+
+    --type-tracking-tight: -0.025em;
+    --type-tracking-snug: -0.01em;
+    --type-tracking-normal: 0;
+    --type-tracking-wide: 0.025em;
+    --type-tracking-wider: 0.05em;
+    --type-tracking-caps: 0.1em;
+
+    /* ═══════════════════════════════════════════════
+       §1  DURATION
+       ═══════════════════════════════════════════════ */
+    --duration-instant: 0.1s;
+    --duration-fast: 0.2s;
+    --duration-normal: 0.3s;
+    --duration-slow: 0.45s;
+    --duration-panel: 0.55s;
+    --duration-xl: 1s;
+    --duration-xxl: 1.5s;
+    --duration-shimmer-fast: 3s;
+    --duration-shimmer: 5s;
+    /* The gold ONE-SHOT seal envelope (E7c) — a PRESSED seal is a quick gesture
+       (in + hold + out), ≈1.5s end-to-end, NOT the 5s infinite-loop `--duration-
+       shimmer`. `.text-gilt` reads THIS so "catches the light once and recedes"
+       reads as a gesture, never a marquee that then hard-cuts. */
+    --duration-seal: 1.5s;
+    /* Sparkle micro-event — primary-CTA disco-grain sparkle sweep.
+       @deprecated 3.10 — the disco-star is EXCISED (D6.b); the `sparkle-sweep`
+       keyframe is tombstoned (animations.css) and no live recipe consumes this
+       duration. Retained one minor so an out-of-tree consumer resolves a value
+       rather than `unset`; full delete (this token + the theme bridge + the
+       keyframe) lands in 3.11. */
+    --duration-sparkle: 600ms;
+
+    /* AH.W5-e (FA-8 §4d) — motion-duration + staged-reveal canon.
+
+       Six duration tokens + three delay tokens promoted from raw literals
+       at speedtest's celebratory-reveal SFCs (SpeedtestResults, ThankYou,
+       ResultStack, CompleteBadge). Unified under the `--motion-*`
+       namespace (parallel to `--motion-ease-*`) so all motion tokens
+       cluster at one canon — duration + easing arm together. */
+
+    /* Staged-entrance pairing — opacity + transform Vue <Transition> arms
+       in the celebratory headline + result-row reveals. Partners with
+       `--motion-ease-staged-entrance` / `--motion-ease-overshoot`. */
+    --motion-duration-staged: 320ms;
+
+    /* One-shot celebratory shimmer — gold-headline shimmer animation
+       duration + staging delay. Shared canon so the speedtest results
+       headline and the thank-you headline stay in lockstep. */
+    --motion-duration-complete-shimmer: 2.4s;
+    --motion-delay-complete-shimmer: 220ms;
+    /* The gold-headline shimmer reads these two tokens under a one-shot
+       animation: at 2.4s + 220ms delay the bright band traverses the headline
+       glyphs cleanly. Load-bearing — zeroing either collapses the shimmer to
+       an imperceptible blow-through. */
+
+    /* CompleteBadge staged-reveal cluster — the disc / ring / check curve
+       fires at three asymmetric durations + delays per the A4-AF staged-
+       variety design intent. Promoting the magic numbers makes the
+       staged-variety visible at the canon. */
+    --motion-duration-badge-disc: 420ms;
+    --motion-duration-badge-ring: 560ms;
+    --motion-duration-badge-check: 380ms;
+    --motion-delay-badge-disc: 80ms;
+    --motion-delay-badge-ring: 220ms;
+    --motion-delay-badge-check: 460ms;
+
+    /* Staggered-reveal increment canon — three perceptually-distinct tiers for
+       per-row/per-cell/per-bar cascades:
+         • tight (40ms) — dense row cascades, sub-perceptual gap
+         • default (80ms) — the canonical row-stagger rhythm (matches
+           `useStagger`'s built-in fallback)
+         • relaxed (120ms) — wider cascades where each reveal carries its own
+           attention budget
+       Adjacent tiers keep cross-beats quiet (80 is the LCM of 40 and 2/3 of
+       120). Consumers read these via inline-style calc() or `getComputedStyle`
+       at runtime. */
+    --motion-stagger-tight: 40ms;
+    --motion-stagger-default: 80ms;
+    --motion-stagger-relaxed: 120ms;
+
+    /* ═══════════════════════════════════════════════
+       §2  EASING — Spring curves via linear()
+
+       Generated from `scripts/regen-spring-tokens.mjs` — DO NOT hand-edit.
+       To tune a spring: edit the PRESETS table in the script and re-run
+       `node scripts/regen-spring-tokens.mjs`. The script invokes
+       `springLinearStops()` from `@mkbabb/keyframes.js` which solves the
+       analytic second-order damped harmonic oscillator and emits CSS
+       `linear()` stops; this is the single source of truth tying each
+       (response, ζ) pair to its serialized curve.
+
+       iOS-canonical (response, dampingFraction) per AL-X4 §3:
+         smooth: (0.50s, ζ=0.86)  — gentle settle, sub-perceptual overshoot ~0.5%
+         snappy: (0.35s, ζ=0.65)  — quick crisp, overshoot ~+6.8%
+         bouncy: (0.50s, ζ=0.45)  — emphatic overshoot ~+20.5%
+         gentle: (0.70s, ζ=1.00)  — patient critically-damped
+         dock:   (0.32s, ζ=0.70)  — dock expand/collapse morph, overshoot ~+4.6%
+
+       Note on `smooth`: at ζ=0.86 the analytic solver produces a peak
+       of 1.00498 (+0.5%) at the 24% slot — mathematically present but
+       sub-perceptual. I keep ζ=0.86 rather than promoting to ζ=1.0
+       because true critical damping is `gentle`'s register, and
+       `smooth` wants a slightly faster visual settle than `gentle`'s
+       patient curve. The 0.5% peak does not read as overshoot to the
+       eye but does narrowly distinguish `smooth` from `gentle`.
+
+       ── EASING DOCTRINE (AX.W52 §6 — which easing fits which job) ──
+       ONE recorded rule so the animation easing stops forking live. This
+       FORMALIZES the already-correct `transitions.css` idiom (enter=spring,
+       exit=bezier) as the house rule every recipe reaches for:
+
+         | Transition kind                                  | Easing                              |
+         |--------------------------------------------------|-------------------------------------|
+         | Surface props (bg, border, color, box-shadow,    | `--ease-standard` (bezier — a       |
+         |   opacity)                                       |   colour cross-fade reads as a      |
+         |                                                  |   wobble on a spring)               |
+         | Transform — hover/press/active (scale, translate,| `--spring-smooth` (the ONE button/  |
+         |   rotate)                                         |   interactive scale register) or    |
+         |                                                  |   `--spring-snappy` (crisp press)   |
+         | Enter (mount, popover open, dialog in)           | `--spring-bouncy` / `--spring-snappy`|
+         | Exit (unmount, close)                            | `--ease-out` / `--ease-standard`    |
+         |                                                  |   (bezier, NO overshoot — an exit   |
+         |                                                  |   must never overshoot past gone)   |
+         | Position-tracked (specular pointer follow)       | `--ease-standard`                   |
+
+       The BUTTON family (`.btn-pill` / `.tap-squish` / `.glass-btn` /
+       `btn-interactive`) UNIFIES its `scale` transform leg onto ONE register —
+       `--spring-smooth` — so hover + press read as one motion language (the
+       hover lift is the restrained `--scale-hover-btn` = 1.05, not the 1.08
+       `--scale-hover`). Springs read alive on TRANSFORM and ENTER (overshoot =
+       physicality); a spring on a COLOR or an EXIT reads as a wobble/hesitation.
+       `--ease-apple` is the ambient-only register (consumed solely by the Pulse
+       aura `--animate-ambient-pulse-easing` — NOT a second smooth-ease authority
+       for interactive transforms; those use `--spring-smooth`).
+       ═══════════════════════════════════════════════ */
+    --spring-smooth: linear(0, 0.09804 2.041%, 0.29288 4.082%, 0.49447 6.122%, 0.66436 8.163%, 0.79208 10.204%, 0.88050 12.245%, 0.93754 14.286%, 0.97182 16.327%, 0.99083 18.367%, 1.00027 20.408%, 1.00413 22.449%, 1.00502 24.490%, 1.00453 26.531%, 1.00355 28.571%, 1.00254 30.612%, 1.00169 32.653%, 1.00105 34.694%, 1.00060 36.735%, 1.00031 38.776%, 1.00014 40.816%, 1.00005 42.857%, 1.00000 44.898%, 1.00000 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
+    --spring-snappy: linear(0, 0.10438 2.041%, 0.32622 4.082%, 0.56668 6.122%, 0.77153 8.163%, 0.91961 10.204%, 1.01073 12.245%, 1.05549 14.286%, 1.06804 16.327%, 1.06171 18.367%, 1.04686 20.408%, 1.03044 22.449%, 1.01629 24.490%, 1.00596 26.531%, 0.99954 28.571%, 0.99633 30.612%, 0.99537 32.653%, 0.99575 34.694%, 0.99674 36.735%, 0.99786 38.776%, 0.99884 40.816%, 0.99956 42.857%, 1.00001 44.898%, 1.00024 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
+    --spring-bouncy: linear(0, 0.11105 2.041%, 0.36430 4.082%, 0.65496 6.122%, 0.90929 8.163%, 1.08828 10.204%, 1.18289 12.245%, 1.20482 14.286%, 1.17641 16.327%, 1.12214 18.367%, 1.06276 20.408%, 1.01239 22.449%, 0.97809 24.490%, 0.96099 26.531%, 0.95826 28.571%, 0.96514 30.612%, 0.97666 32.653%, 0.98873 34.694%, 0.99867 36.735%, 1.00520 38.776%, 1.00825 40.816%, 1.00847 42.857%, 1.00686 44.898%, 1.00443 46.939%, 1.00199 48.980%, 1.00004 51.020%, 0.99880 53.061%, 0.99827 55.102%, 0.99829 57.143%, 0.99866 59.184%, 0.99916 61.224%, 0.99966 63.265%, 1.00004 65.306%, 1.00027 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
+    --spring-gentle: linear(0, 0.09415 2.041%, 0.27374 4.082%, 0.45506 6.122%, 0.60779 8.163%, 0.72570 10.204%, 0.81213 12.245%, 0.87336 14.286%, 0.91570 16.327%, 0.94445 18.367%, 0.96371 20.408%, 0.97645 22.449%, 0.98481 24.490%, 0.99025 26.531%, 0.99377 28.571%, 0.99604 30.612%, 0.99749 32.653%, 0.99841 34.694%, 0.99900 36.735%, 0.99937 38.776%, 0.99961 40.816%, 0.99975 42.857%, 0.99985 44.898%, 1.00000 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
+    --spring-dock: linear(0, 0.10282 2.041%, 0.31773 4.082%, 0.54783 6.122%, 0.74309 8.163%, 0.88550 10.204%, 0.97598 12.245%, 1.02452 14.286%, 1.04368 16.327%, 1.04501 18.367%, 1.03739 20.408%, 1.02681 22.449%, 1.01672 24.490%, 1.00873 26.531%, 1.00323 28.571%, 0.99996 30.612%, 0.99837 32.653%, 0.99789 34.694%, 0.99805 36.735%, 0.99848 38.776%, 0.99897 40.816%, 0.99940 42.857%, 0.99972 44.898%, 0.99993 46.939%, 1.00004 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
+
+    /* Core cubic-bezier (exits, fallbacks, non-spring uses) */
+    --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+
+    --ease-standard: var(--motion-ease-standard);
+    --ease-out: var(--motion-ease-out);
+    --ease-in: var(--motion-ease-in);
+    --ease-out-expo: var(--motion-ease-out-expo);
+
+    /* Apple-inspired — micro-interactions, switches, dock hover */
+    --motion-ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+    --ease-apple: var(--motion-ease-apple);
+    --ease-spring: var(--spring-snappy);
+    --ease-decelerate: var(--ease-out);
+    --ease-accelerate: var(--ease-in);
+
+    /* ═══════════════════════════════════════════════
+       §2.A AMBIENT MOTION — Pulse aura tokens
+
+       Breathing rhythm for `<Pulse variant="aura">`. The 6s duration is the
+       canon ambient-pulse rate; scale 1.0 ↔ 1.15 reads as a quiet halo at
+       intensity="normal" (Pulse remaps min/max from its `intensity` prop).
+       Reduced motion: Pulse.vue parks at the min stop, breath cycle disabled.
+
+       AX.W57 (P6) — the aura re-baselined from a glowing DISC to an AMBIENT
+       halo. The egregiousness was doubly-stacked: a 0.55-density currentColor
+       radial multiplied by an element opacity the `ambient-pulse` keyframe
+       drove up to 0.95 mid-breath (so a saturated viz hue read as a near-
+       opaque throbbing blob). The fix is two decoupled, single-source knobs:
+         · `--pulse-aura-strength` (0..1) — the ONE gradient-density scalar
+           both color-mix stops derive via calc() (replaces the
+           `--pulse-aura-opacity-pct` / `-pct-num` twin desync trap — the
+           percent and the raw number had to be hand-kept in sync).
+         · `--pulse-aura-breath-{min,max}` — the aura's OWN element-opacity
+           range, decoupled from the shared `--pulse-aura-opacity-*` shimmer
+           tokens (those stay 0.55/0.95 for the neutral skeleton-breath, where
+           a grey shimmer at that range is the correct soft swell).
+       The loud old read is the explicit `intensity="vivid"` opt-in. */
+    --animate-ambient-pulse-duration: 6s;
+    --animate-ambient-pulse-scale-min: 1.0;
+    --animate-ambient-pulse-scale-max: 1.15;
+    --animate-ambient-pulse-easing: var(--ease-apple);
+
+    /* Aura gradient density — ONE scalar (0..1). The center stop paints at
+       `strength`, the mid stop at `strength * 0.35` (both via calc() in
+       Pulse.vue). 0.22 reads as an ambient wash, not a glowing disc. */
+    --pulse-aura-strength: 0.22;
+
+    /* Aura element-opacity breath range (the `ambient-pulse` keyframe stops).
+       Quiet: the halo stays a wash at every phase of the 6s cycle. */
+    --pulse-aura-breath-min: 0.28;
+    --pulse-aura-breath-max: 0.42;
+
+    /* Skeleton-breath shimmer range — the SHARED neutral-shimmer stops
+       (`.skeleton-breath` reads these; a grey shimmer at 0.55↔0.95 is the
+       correct soft swell, distinct from the aura's calmer breath above). */
+    --pulse-aura-opacity-min: 0.55;
+    --pulse-aura-opacity-max: 0.95;
+
+    /* ═══════════════════════════════════════════════
+       §2.B SECTIONED PROGRESS — phase-bus rail (AB.W3.T2)
+
+       The sectioned `<Progress variant="sectioned">` exposes one
+       height knob + one track tint knob. Defaults size the rail at
+       0.875rem (14px) — the W3 spec minimum (≥ 14px mobile, ≥ 18px
+       desktop). Consumers override the height per breakpoint via the
+       same token name on the consumer-side surface.
+
+       The bar reads as a recessed glass channel: inner top
+       catch-light + lower inner shadow + small outer drop. The
+       depth lives entirely in the Progress.vue scoped block; this
+       token only parameterises the rail BACKGROUND and HEIGHT —
+       depth shadows compose from the existing --shadow-color rung.
+       ═══════════════════════════════════════════════ */
+    --progress-sectioned-height: 0.875rem;
+    --progress-sectioned-track: var(--secondary);
+
+    /* ═══════════════════════════════════════════════
+       §2.C ANIMATION EXPRESSIVENESS
+
+       Three idiom families:
+       • Progress lifecycle — the progress bar rides an intake pulse on
+         rising-edge, a crescendo brightening at ≥85%, and a one-shot discharge
+         flash at 100% (the crescendo is the typed `@property --progress-crescendo`).
+       • Chassis phase-tint companion — `@property --phase-tint-amount` so the
+         chassis backdrop warms toward the active phase, interpolating with
+         `--phase-color` across the consumer's phase-handoff window (600ms default).
+       • Audacious button press-ripple — `btn-audacious` gains a typed
+         `@property --ripple-radius` ramping 0 → max over the ripple duration.
+       ═══════════════════════════════════════════════ */
+
+    /* Progress lifecycle — typed crescendo + segment-local durations */
+    --motion-duration-progress-intake: 220ms;       /* rising-edge pulse */
+    --motion-duration-progress-crescendo: 240ms;    /* leading-edge brighten */
+    --motion-duration-progress-indeterminate: 4s;   /* indeterminate sweep period */
+
+    /* Chassis depth-of-tint peak — the amount `--phase-tint-amount`
+       interpolates toward when a phase is active. Subtle by intent;
+       a 6% color-mix reads as "warmth toward the phase" without
+       overwhelming the chassis chrome's resting register. */
+    --phase-tint-peak: 6%;
+
+    /* Audacious button press-ripple — geometry + duration. The ripple
+       radius caps at 12rem so an oversized button doesn't paint a
+       transparent halo beyond its bounds (the parent's `overflow:
+       hidden` clips the visible region; the cap keeps the gradient
+       falloff well-defined). */
+    --ripple-radius-max: 12rem;
+    --motion-duration-ripple: 340ms;
+
+    /* Skeleton breath variant — the M.3 "known-imminent" loading
+       register. 6s cycle (the canon ambient rate) so a known-imminent
+       skeleton breathes in lockstep with the dial and the Pulse aura.
+       Coexists with the 1.5s shimmer (sliding gradient) and the
+       Tailwind animate-pulse (2s, short-wait) variants — distinct
+       temporal registers per use-case. */
+    --skeleton-breath-duration: 6s;
+
+    /* ═══════════════════════════════════════════════
+       §3  Z-INDEX SCALE
+       ═══════════════════════════════════════════════ */
+    /* V.W2 T12 — Aurora background tier (sits behind --z-background).
+       Consumed by `<Aurora>` in speedtest's App.vue (`-z-10` literal today). */
+    --z-behind: -10;
+    --z-background: 0;
+    --z-content: 10;
+    --z-controls: 20;
+    --z-bar: 30;
+    --z-header: 35;
+    --z-dock: 40;
+    --z-panel: 45;
+    --z-overlay: 50;
+    --z-hovercard: 120;
+    --z-tooltip: 120;
+    --z-popover: 130;
+    --z-modal: 140;
+    --z-fullscreen: 150;
+    --z-toast: 160;
+    --z-toggle: 999;
+    --z-max: 9999;
+    --z-debug: 99999;
+
+    /* §4  BORDER RADIUS — authored ONCE in theme.css's leading plain @theme
+       block (AV.W16 TW1). A plain @theme mints each `--radius-*` as a global
+       :root var, so the `var(--radius-card)` recipe reads across this file
+       resolve from that source. The prior §4 twin here doubled the override
+       surface (the anti-pattern the @theme-inline migration kills) — excised;
+       retune the scale at theme.css. */
+
+    /* ═══════════════════════════════════════════════
+       §5  COLOR PALETTE — Warm cream / muted black
+
+       Neutral scale: perceptually-uniform L* steps at hue 48 (warm paper).
+       Each pair visibly distinct at 20px viewing distance.
+           0 → 1  : 3 L   (page → soft field)
+           1 → 2  : 5 L   (soft field → chip / tab-inactive)
+           2 → 3  : 8 L   (chip → hover / highlight)
+           3 → 4  : 12 L  (highlight → subtle border)
+           4 → 5  : 25 L  (border → muted text, contrast jump)
+           5 → 6  : 10 L  (muted text → strong-muted text, secondary register)
+
+       Semantic aliases re-point into the scale — no back-compat shims.
+       ═══════════════════════════════════════════════ */
+    --neutral-0: hsl(48 12% 98%);   /* L 98 — page surface */
+    --neutral-1: hsl(48 10% 95%);   /* L 95 — soft field bg */
+    --neutral-2: hsl(48  9% 90%);   /* L 90 — chip / tab-inactive bg */
+    --neutral-3: hsl(48  8% 82%);   /* L 82 — hover / highlight bg */
+    --neutral-4: hsl(48  7% 70%);   /* L 70 — subtle border */
+    --neutral-5: hsl(48  6% 40%);   /* L 40 — muted text (WCAG AA: 5.23:1 vs L98 page / 4.91:1 vs L95 muted) */
+    /* W7-α' (AK-FD1) — strong-muted text rung. One principled ladder step
+       (10 L darker, the 5→6 cadence above) past muted text toward
+       --foreground (L10). Sits at the 1/3 point of the L40→L10 muted→primary
+       gap: legible secondary text that reads less-faint than muted but not as
+       assertive as primary. By-COLOUR per the canon (a neutral step, not an
+       alpha mute); hue held at 48, sat nudged 6→7 toward --foreground's 10.
+       WCAG AA: 7.79:1 vs L98 page / 7.31:1 vs L95 muted (cf. neutral-5's
+       5.23:1) — comfortably above the 4.5:1 body floor. */
+    --neutral-6: hsl(48  7% 30%);   /* L 30 — strong-muted text (secondary register) */
+
+    --background: var(--neutral-0);
+    --foreground: hsl(24 10% 10%);
+    --card: var(--neutral-0);
+    --card-foreground: var(--foreground);
+    --popover: var(--neutral-0);
+    --popover-foreground: var(--foreground);
+
+    /* R0G-5 (AO.W4) — warm-neutral public-data panel surface. One warmth step
+       off --card (hue 44 vs 48, +4 sat, −2 L) so a consumer's aurora-OFF
+       /dashboard/* surfaces read with the admin canon's warm-neutral chrome
+       instead of the colder bare card. Opaque surface (the --card family), not
+       a --surface-tint-* overlay. Consumer applies on /dashboard/* only. */
+    --surface-public-data-panel: hsl(44 16% 96%);
+
+    --muted: var(--neutral-1);
+    --muted-foreground: var(--neutral-5);
+    /* W7-α' (AK-FD1) — one rung less-faint than --muted-foreground for
+       secondary text that reads too-faint at the muted rung over resting
+       glass (CardDescription). By-colour neutral step, not alpha. */
+    --muted-foreground-strong: var(--neutral-6);
+    --secondary: var(--neutral-2);
+    --secondary-foreground: var(--foreground);
+    --accent: var(--neutral-3);
+    --accent-foreground: var(--foreground);
+
+    --border: var(--neutral-4);
+    --input: var(--neutral-4);
+
+    --primary: hsl(24 10% 10%);
+    --primary-foreground: var(--neutral-0);
+    --destructive: hsl(0 72% 50%);
+    --destructive-foreground: var(--neutral-0);
+    --ring: hsl(24 10% 10%);
+    --shadow: hsl(24 10% 10%);
+    --shadow-color: var(--foreground);
+
+    /* AQ.W2 §4 — native-control accent. `accent-color` is an inherited
+       built-in <color>, so per the §2b resolve-late discipline it reads a
+       dedicated UNREGISTERED token set per-mode (NOT light-dark()) and is
+       re-specified inside `.dark` — otherwise the accent freezes to the
+       light shade at the cascade root. Light: muted-black checkmarks /
+       sliders on warm cream. Dark arm (`.dark`) reads `--ring` (mid-tone),
+       not the near-white dark `--primary`, so a checkbox's white checkmark
+       keeps contrast headroom (accent-color.md §5). */
+    --accent-color: var(--primary);
+
+    /* Border hairline at whisper alpha — the canonical rung for
+       section-spine / panel-edge hairlines a consumer wants to read as an
+       iOS-26 whisper rather than a hard rule. Consumers compose this named
+       rung instead of hand-mixing `color-mix(... var(--border) ...)`
+       per-site (token-first). 45% is the canonical whisper. Auto-dark via
+       `--border` (which is `var(--neutral-4)`, light-dark()-resolved). */
+    --border-soft: color-mix(in srgb, var(--border) 45%, transparent);
+
+    /* AQ.W3 §W3.4 — tokenized scrollbar thumb + track. Minted in the color
+       block so the `scrollbar-color` / `::-webkit-scrollbar-thumb` rungs read a
+       single source. Auto-dark via `--muted-foreground` (light-dark()-resolved,
+       AQ.W2) — the OS scrollbar chrome also honors `color-scheme: dark`, so the
+       custom thumb tracks the dark surface without an explicit dark mirror. The
+       thumb α (25%) matches the prior inline `.scrollbar-thin` value byte-for-
+       byte; `transparent` track keeps the scroll-pane glass reading through. */
+    --scrollbar-thumb: color-mix(in srgb, var(--muted-foreground) 25%, transparent);
+    --scrollbar-track: transparent;
+
+    /* Foreground-tint rungs — canonical handles for the 36+ raw
+       `color-mix(in srgb, var(--foreground) N%, transparent)` sites surveyed
+       in R5 axis-1. Each rung's α is named in its key (4 → 4%, 22 → 22%).
+       Auto-dark via --foreground; no explicit dark mirrors needed. R5
+       vocab.γ gap row 1. Consumers land in W2.B + W3.C. */
+    --surface-tint-4:  color-mix(in srgb, var(--foreground)  4%, transparent);
+    --surface-tint-6:  color-mix(in srgb, var(--foreground)  6%, transparent);
+    --surface-tint-8:  color-mix(in srgb, var(--foreground)  8%, transparent);
+    --surface-tint-10: color-mix(in srgb, var(--foreground) 10%, transparent);
+    --surface-tint-12: color-mix(in srgb, var(--foreground) 12%, transparent);
+    --surface-tint-15: color-mix(in srgb, var(--foreground) 15%, transparent);
+    --surface-tint-18: color-mix(in srgb, var(--foreground) 18%, transparent);
+    --surface-tint-22: color-mix(in srgb, var(--foreground) 22%, transparent);
+    --surface-tint-25: color-mix(in srgb, var(--foreground) 25%, transparent);
+    /* Higher-α rungs added at L.W5 (absorbs K R4 — 4 P1 sites whose
+       literal `color-mix(in srgb, var(--foreground) {35,40,70}%, transparent)`
+       expressions bypassed the canonical token family). See `docs/tranches/L/
+       audit/W5-A-doc-cohort-proof.md`. */
+    --surface-tint-35: color-mix(in srgb, var(--foreground) 35%, transparent);
+    --surface-tint-40: color-mix(in srgb, var(--foreground) 40%, transparent);
+    --surface-tint-70: color-mix(in srgb, var(--foreground) 70%, transparent);
+
+    /* Muted-tinted surface rungs — canonical handles for the 9 raw
+       `color-mix(in srgb, var(--muted) N%, transparent)` sites in
+       FuzzySearch / SegmentedTabs / Slider scoped CSS. (AI.W5-δ — the
+       ProgressiveSidebar consumer retired at the wave; the canonical token
+       rung lives on for the remaining consumers.) Auto-dark via --muted.
+       R5 vocab.γ axis-1 row. */
+    --muted-soft:   color-mix(in srgb, var(--muted) 30%, transparent);
+    --muted-medium: color-mix(in srgb, var(--muted) 50%, transparent);
+
+    /* ═══════════════════════════════════════════════
+       §5c CONSTELLATION — Canvas2D proximity-graph lattice (AX.W17)
+
+       The H.W4 legibility intelligence promoted from the slides deck to
+       LIBRARY identity: the node tones, the edge hairline color, the per-mode
+       edge-alpha multipliers, and the field-yields-to-type translucency knob.
+       Only `--constellation-accent` (the anomaly tint) stays a CONSUMER preset
+       (slides aliases it to `--ncsu-red`); the library ships a neutral default.
+
+       PLAIN-hsl LITERALS, per arm — NEVER `light-dark()` and NEVER a
+       `var(--neutral-*)`/`var(--foreground)`/`var(--border)`/`var(--card)`
+       alias. Canvas2D silently REJECTS a `light-dark()` value into
+       `strokeStyle`/`fillStyle` (the W30 86.3%-red-splatter cardinal defect),
+       and the rejection is identical whether the value is a literal
+       `light-dark(…)` OR a `var()` that RESOLVES to one — so the constellation
+       tokens are plain-hsl LEAVES, the `:root` vs `.dark` cascade carrying two
+       literals. `proof:constellation-tokens` clause (c) machine-locks this
+       (the no-`light-dark(`-substring NOR transitive-`var()` static assertion).
+       ═══════════════════════════════════════════════ */
+    /* Node tones — readable on the warm-cream ground. The two-tone split (the
+       `dim` half rides `-node-dim`). Warm-grey ink, NOT a neutral-ladder alias. */
+    --constellation-node:      hsl(36 8% 46%);
+    --constellation-node-dim:  hsl(36 8% 60%);
+    /* Edge hairline stroke — warm near-black on cream (the plain-hsl complement
+       the slides deck reads to fix the `--foreground` light-dark() leak). */
+    --constellation-line:      hsl(24 14% 14%);
+    /* Anomaly tint — NEUTRAL library default (a desaturated warm accent). The
+       consumer overrides this (slides → `--ncsu-red`); the library does NOT
+       bake a brand hue. This is the single consumer-preset boundary. */
+    --constellation-accent:    hsl(18 58% 46%);
+    /* Edge-alpha multipliers — replace the magic `0.17` hairline / pointer-web
+       literals. The cream ground lifts the node tones, so the field can recede;
+       the focus-proximity edge reads a touch stronger. */
+    --constellation-edge-alpha:          0.22;
+    --constellation-edge-focus-alpha:  0.34;
+    /* §7 field-yields-to-type translucency knob — the legible-but-RECESSIVE
+       MIDPOINT, NOT max-legibility. On cream the node tones already read, so the
+       field recedes further: BELOW the slides 0.92 max-legibility reference. */
+    --constellation-alpha:               0.80;
+
+    /* §interaction — the warp spring + the gravity-well tunings (NUMERIC, NOT
+       colors — read ONCE on mount via parseFloat, never reach a Canvas2D
+       fillStyle, so immune to the W30 light-dark()/Canvas2D leak; AY.W-CON2).
+       Mode-INVARIANT, declared ONCE in :root (the .dark arm needs no numeric
+       re-declare — a per-mode value SPLIT is what proof:constellation-tokens
+       clause (c) flags, and these tunings are identical in both modes).
+       `--constellation-warp-response` is the keyframes.js ANGULAR PERIOD (the
+       SwiftUI .spring(response:) axis), NOT a settle-duration — at ζ=1 the 2%
+       settle lands at t₂ ≈ 5.83/ω₀ ≈ 0.93·response (the engine keeps the
+       keyframes.js ω₀ = 2π/response convention, mints no second ω). */
+    --constellation-warp-response:    0.55;   /* s — keyframes.js angular period (NOT a settle) */
+    --constellation-warp-zeta:        1.0;    /* critically damped — a focal mark must NOT ring */
+    --constellation-well-gain:        14000;  /* inverse-square force scale (the held-pull gain) */
+    --constellation-well-reach:       340;    /* base-width px — the well's reach (k-scaled at step) */
+    --constellation-well-ramp:        4.0;    /* 1/s — the ARM rate (≈0.25s bloom; release is the fixed brisk WELL_RELEASE_RAMP — the field-cools invariant, not consumer-tunable) */
+    --constellation-well-max-speed:   4.0;    /* base-width px/frame cap — the no-slingshot clamp */
+    --constellation-well-hold-ms:     140;    /* ms hold before the well arms */
+    --constellation-wander-idle:      8000;   /* ms — min idle between auto re-targets (the W-CON1 drift cadence) */
+    --constellation-wander-jitter:    8000;   /* ms — random extra idle per cadence (so the rhythm is not metronomic) */
+
+    /* ═══════════════════════════════════════════════
+       §6  SECTION PALETTE — 13-stop jewel tones (light)
+       ═══════════════════════════════════════════════ */
+    /* AV.W16 TW2 — oklch ramp (perceptually-even L; hue preserved from the
+       prior hsl() cadence). Categorical jewel tones — distinct hues, not a
+       monotone scale. Authored as oklch pairs with the .dark mirror. */
+    --section-color-0:  oklch(0.552 0.192 359.8);  /* rose       */
+    --section-color-1:  oklch(0.502 0.165 305.9);  /* purple     */
+    --section-color-2:  oklch(0.484 0.163 265.5);  /* indigo     */
+    --section-color-3:  oklch(0.542 0.089 222.8);  /* teal-cyan  */
+    --section-color-4:  oklch(0.551 0.088 171.1);  /* forest     */
+    --section-color-5:  oklch(0.623 0.124 69.6);   /* amber      */
+    --section-color-6:  oklch(0.579 0.201 30.4);   /* tomato-red */
+    --section-color-7:  oklch(0.532 0.180 317.5);  /* violet     */
+    --section-color-8:  oklch(0.520 0.176 8.4);    /* ruby       */
+    --section-color-9:  oklch(0.492 0.038 239.6);  /* slate-blue */
+    --section-color-10: oklch(0.556 0.103 128.8);  /* olive      */
+    --section-color-11: oklch(0.601 0.092 208.0);  /* ocean      */
+    --section-color-12: oklch(0.513 0.163 291.9);  /* periwinkle */
+
+    /* Accent colors */
+    --accent-pink: oklch(0.613 0.197 353.8);
+    --section-heading: oklch(0.545 0.189 352.8);
+    --accent-red: oklch(0.574 0.216 27.5);
+
+    /* ═══════════════════════════════════════════════
+       §6b VIZ BASIS — core brand hues
+       ═══════════════════════════════════════════════ */
+    --viz-fourier:   oklch(0.579 0.201 30.4);
+    --viz-chebyshev: oklch(0.484 0.163 265.5);
+    --viz-legendre:  oklch(0.532 0.180 317.5);
+    --viz-amber:     var(--section-color-5);
+    --viz-green:     var(--section-color-4);
+
+    /* Semantic UI accents */
+    --tier-featured: oklch(0.841 0.173 84.2);
+    --tier-saved:    oklch(0.676 0.176 252.3);
+    --like:          oklch(0.633 0.200 24.9);
+    --success:       oklch(0.720 0.192 149.5);
+    --warning:       oklch(0.770 0.165 70.6);
+    --info:          oklch(0.626 0.186 259.6);
+    --delete:        oklch(0.597 0.198 25.5);
+
+    /* Semantic foregrounds — text/glyph atop --success/--warning/--info plates.
+       Notification.vue currently hardcodes `text-white`/`text-foreground`
+       inline; W2 migrates consumers to read these tokens. Warning carries a
+       dark glyph because the amber plate is too luminous for white. R5
+       vocab.γ gap row 4. */
+    --success-foreground: var(--neutral-0);
+    --warning-foreground: hsl(24 10% 10%);
+    --info-foreground:    var(--neutral-0);
+
+    /* ═══════════════════════════════════════════════
+       §7  SHADOWS — cartoon offset is the signature
+       ═══════════════════════════════════════════════ */
+    --shadow-cartoon:       3px 3px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent);
+    --shadow-cartoon-hover: 4px 4px 0px 0px color-mix(in srgb, var(--foreground) 10%, transparent);
+    --shadow-soft:          0 4px 12px rgba(0, 0, 0, 0.1);
+    --shadow-elevated:      0 8px 24px rgba(0, 0, 0, 0.12);
+    --shadow-modal:
+        4px 4px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent),
+        0 24px 64px color-mix(in srgb, var(--foreground) 12%, transparent);
+
+    --cartoon-shadow:       var(--shadow-cartoon);
+    --cartoon-shadow-hover: var(--shadow-cartoon-hover);
+    --soft-shadow:          var(--shadow-soft);
+    --elevated-shadow:      var(--shadow-elevated);
+    --modal-shadow:         var(--shadow-modal);
+
+    /* Elevation scale */
+    --shadow-xs: 0 1px 3px color-mix(in srgb, var(--shadow-color) 4%, transparent),
+        0 1px 2px color-mix(in srgb, var(--shadow-color) 6%, transparent);
+    --shadow-sm: 0 2px 8px color-mix(in srgb, var(--shadow-color) 6%, transparent);
+    --shadow-md: 0 4px 16px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+    --shadow-lg: 0 4px 20px color-mix(in srgb, var(--shadow-color) 12%, transparent);
+    --shadow-xl: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent);
+    --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 25%, transparent);
+
+    /* Z.W2.T3a — uniform-cast shadow rung. Offset 0 / 0, no directional
+       Y bias. Use case: dock-hosted icons (e.g. the speedtest settings
+       gear) where the surrounding dock shadow's downward cast reads as
+       a per-icon right-edge halo on the rightmost child (A2 §B7). The
+       uniform variant carries the same color-mix recipe family as the
+       sized rungs (`--shadow-md`, `--shadow-lg`) so the perceived
+       elevation is a peer, not a sibling. Consumers compose via
+       `--shadow-dock-override: var(--shadow-uniform)` per-instance, or
+       attach to per-icon-button stacks where directional cast is wrong-
+       shape. Documented in DESIGN.md token table. */
+    --shadow-uniform: 0 0 12px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+
+    /* Card = soft drop plate by default. The cartoon offset is a brand-flavoured
+       decoration (a sticker look), not the canonical card shape. Consumers
+       wanting the cartoon look pass <Card surface="cartoon">, which composes the
+       `.cartoon-surface` utility (it reads --shadow-cartoon directly). R3-spec
+       §F.1, S.W4; Q.W3 Lane H. */
+    --shadow-card:       var(--shadow-md);
+    --card-shadow:       var(--shadow-card);
+
+    /* AI.W1-α — sticky CardHeader background. Parameterises the
+       `bg-card/60` literal value.js's PaneHeader.vue carried so the
+       glass-ui canon owns the recipe. The scroll-driven `<CardHeader
+       shrink>` choreography reads this token for its sticky-header
+       backdrop tint; consumers retune per-app by overriding the
+       variable at any ancestor. Auto-dark via `--card`. */
+    --card-header-bg:    color-mix(in srgb, var(--card) 60%, transparent);
+
+    /* Dock shadows — a single omnidirectional glow in the
+       `--shadow-md`/`--shadow-lg` family (a directional drop concentrated on
+       the pill's rounded right cap as a right-edge halo; the dock's own
+       border already defines the silhouette). Per-instance directional drop
+       reinstates via `--shadow-dock-override` (consumed by every `.glass-dock`
+       state selector — see dock.css). */
+    --shadow-dock:           0 0 20px color-mix(in srgb, var(--shadow-color) 14%, transparent);
+    --shadow-dock-collapsed: 0 0 12px color-mix(in srgb, var(--shadow-color) 12%, transparent);
+    --dock-shadow:           var(--shadow-dock);
+    --dock-shadow-collapsed: var(--shadow-dock-collapsed);
+
+    /* AX.W04 F1 — the wrap/card-tier dock shadow. A wrapped multi-row dock (and
+       any finite-radius card silhouette) is a THICKER material than a flat thin
+       pill — WWDC25 §219 "material thickens as glass flexes larger". So when the
+       wrap dock expands it lifts its elevation onto the FLOATING-tier shadow
+       stack (the `--glass-shadow-floating` family — `--shadow-xl` + the
+       `--glass-material-rim` hairline + the `--glass-under-shadow-vivid` under-cast)
+       rather than carrying the flat `--shadow-dock` glow of a 40px pill. Composed
+       on `:root` as ONE consumer-overridable token (per the cartoon-shadow
+       override contract — override on the cascade, never a dead local). The dock
+       reads it via `calc()`-on-`--dock-expand-t` so the lift glides in lockstep
+       with the pill→card radius morph (ONE clock, ONE register). */
+    --glass-material-rim:    0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent);
+    --shadow-dock-wrap:      var(--shadow-xl),
+        var(--glass-material-rim),
+        var(--glass-under-shadow-vivid);
+
+    /* Cartoon shadow color primitives (kept for tiered cartoon utilities) */
+    --shadow-cartoon-color:             rgb(0 0 0 / 0.12);
+    --shadow-cartoon-color-soft:        rgb(0 0 0 / 0.06);
+
+    /* Tiered cartoon shadows */
+    --shadow-cartoon-sm: -3px 2px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
+        0 3px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
+        -3px 3px 1px color-mix(in srgb, var(--shadow-color) 6%, transparent);
+    --shadow-cartoon-md: -4px 3px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
+        0 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
+        -4px 4px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+    --shadow-cartoon-lg: -6px 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
+        0 6px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
+        -6px 6px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+    --cartoon-shadow-sm: var(--shadow-cartoon-sm);
+    --cartoon-shadow-md: var(--shadow-cartoon-md);
+    --cartoon-shadow-lg: var(--shadow-cartoon-lg);
+
+    /* ═══════════════════════════════════════════════
+       §8  GLASSMORPHISM — Five-tier surface ladder (v0.8.0)
+
+       Tier semantics, alpha-monotonic:
+         wash      ~0.30α  + light blur      (was `subtle`)
+         quiet     ~0.50α  + medium blur     (the formerly missing rung)
+         resting   ~0.65α  + canonical blur  (was `default`; the speedtest plate)
+         floating  ~0.80α  + heavier blur    (was `elevated`)
+         overlay   ~0.95α  + heaviest blur   (NEW; modal-over-modal)
+
+       v0.8.0 retires the four-tier `subtle | default | medium | elevated`
+       ladder outright. No legacy aliases. Consumers migrate at the same
+       breaking change. R3-spec §A.
+       ═══════════════════════════════════════════════ */
+
+    /* Opacity primitives */
+    --glass-opacity-wash:     0.30;
+    --glass-opacity-quiet:    0.50;
+    --glass-opacity-resting:  0.65;
+    --glass-opacity-floating: 0.80;
+    --glass-opacity-overlay:  0.95;
+
+    /* Blur primitives. The radii here feather the dock + meter card to a
+       barely-perceptible diffusion that lets the substrate behind it bleed
+       through cleanly while keeping hero typography crisp at meter scale.
+       The resting blur sits at 12px so a glass plate reads as a diffusion
+       without consumer-side override. */
+    --glass-blur-wash-radius:     1px;
+    --glass-blur-quiet-radius:    10px;
+    --glass-blur-resting-radius:  12px;
+    --glass-blur-floating-radius: 16px;
+    /* AV.W7 F2 — clamped from 24px into the 8–15px budget band. A blur radius
+       past ~20px is exponentially costlier (`backdrop-filter` is glass-ui's most
+       expensive idiom — the radius is the dominant cost). 15px is the band
+       ceiling; the lower rungs (wash/quiet/resting 1/10/12) sit in-band and the
+       floating 16px is the design ceiling at the band edge (left as-is). A
+       high-resolution display restores the richer 24px wash via the @media arm
+       below — the cost is amortised by the extra device pixels. */
+    --glass-blur-overlay-radius:  15px;
+    /* Dock blur radius — 11px, paired with the 0.42 opacity below: a crisp
+       glass pill (the iOS Control Center register), not a feathered wash.
+       The dock composes `blur()` only (no saturate); the
+       `prefers-reduced-transparency` bracket at glass.css maps it to the
+       opacity-only register. */
+    --glass-blur-dock-radius:     11px;
+
+    /* AX.W54 — each blur radius is scaled by the ONE `--glass-level` scalar (in
+       lockstep with the opacity seam above): level=1 byte-identical; level=0 →
+       blur(0) (the clean solid floor with the opacity); level>1 → more diffusion.
+       The per-rung `saturate()`/`brightness()` companions are UNTOUCHED (the level
+       scales the RADIUS, not the saturation — W52's calm light-concentration). */
+    --glass-blur-wash:     blur(calc(var(--glass-blur-wash-radius) * var(--glass-level))) saturate(1.05);
+    /* AV.W15 M1 — the `quiet` rung gained `saturate(1.05) brightness(1.02)`
+       so the lower ladder reads with the same saturation life as `resting`+
+       (Apple: Liquid Glass concentrates light, it does not desaturate). The
+       `brightness(1.02)` is the small lift the spec names — it lands `quiet`
+       between bare `wash` and `resting` without over-brightening the rung.
+       The `prefers-reduced-transparency: reduce` bracket at glass.css maps
+       `--glass-blur-quiet: none`, so this whole chain drops with the blur. */
+    --glass-blur-quiet:    blur(calc(var(--glass-blur-quiet-radius) * var(--glass-level))) saturate(1.05) brightness(1.02);
+    --glass-blur-resting:  blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(1.05);
+    /* AX.W52 D19 — the floating/overlay backdrop saturate tamed from 1.4/1.5 to a
+       gentle ~1.18/1.2 (real liquid glass concentrates light ~1.1–1.2×; the prior
+       1.4–1.5× over-juiced the bleed-through into a garish smear over a colored
+       substrate). wash/quiet/resting already sit at 1.05 — untouched. */
+    --glass-blur-floating: blur(calc(var(--glass-blur-floating-radius) * var(--glass-level))) saturate(1.18);
+    --glass-blur-overlay:  blur(calc(var(--glass-blur-overlay-radius) * var(--glass-level))) saturate(1.2);
+    /* Dock blur composes blur() only — no saturate. */
+    --glass-blur-dock:     blur(calc(var(--glass-blur-dock-radius) * var(--glass-level)));
+
+    /* AX.W52 — the GLASS BUTTON blur. The `glass`/`glass-wash` button variants
+       compose the `.glass-wash` tier (`--glass-blur-wash` = blur(1px)) — a
+       sub-perceptual diffusion authored for a small detail TILE, not a button
+       the user reads as "glass." A button is a hero control: it wants a real
+       glass blur. `--glass-blur-btn` lifts the variant onto the `quiet`-tier
+       radius (10px — a genuine liquid-glass diffusion) with the same gentle
+       `saturate(1.05) brightness(1.02)` light-concentration the quiet rung
+       carries (NOT a colour-juice). The wash TILE tier (MetricCell et al.) keeps
+       its 1px — only the glass BUTTON variants reach for this. */
+    --glass-blur-btn:      blur(calc(var(--glass-blur-quiet-radius) * var(--glass-level))) saturate(1.05) brightness(1.02);
+
+    /* Dock-specific opacity (0.42) — lighter than `resting` (0.65) so the dock
+       reads as a translucent overlay rather than a panel, backdrop bleed
+       visible through it. Consumed by `.glass-dock` via `--glass-bg-dock`. The
+       value holds the surface register against the tightened 11px blur so the
+       dock reads as painted chrome, not a frosted ghost. */
+    --glass-opacity-dock: 0.42;
+
+    /* Dock foreground over an animated backdrop. A dock floating over an
+       aurora/animated surface (`value.js` dock-over-aurora, a slides routed
+       control, bbnf) sits on a mid-luminance, shifting field where the muted
+       default fg can drop below contrast. This token is the dock control's
+       foreground base — a complete `hsl()` color consumed via `var()`; for the
+       muted icon weight the control mixes it down with `--opacity-icon-muted`.
+       Defaults to `var(--foreground)` so the dock paints byte-identically to
+       today; a consumer overrides it per-backdrop (e.g. a near-white over a
+       dark aurora) without touching library source.
+
+       AX.W55 — this is the FOREGROUND half of the adaptive story, now reconciled
+       INTO the `--glass-backdrop` probe (not a third fork): under the bright bucket
+       (`@container style(--glass-backdrop: light)` in dock.css) it re-points toward
+       the contrast-clearing ink, and an `@supports (color: contrast-color(…))`
+       block flips it natively on supporting engines. The `var(--foreground)`
+       default keeps the zero-delta rest state. */
+    --dock-fg-on-aurora: var(--foreground);
+
+    /* Chassis-specific opacity. Looser than `default` (0.50) so the
+       <InstrumentChassis> surface reads as glass-over-aurora at its
+       64rem-wide footprint; the default tier stays calibrated for cards.
+       Mirrors the dock-tier pattern (own opacity primitive + composed bg).
+       Light 0.28 sits in the gap between dock (0.32) and a hypothetical
+       wash tier; dark 0.36 mirrors the +0.08 step the dock takes from
+       `glass-bg-medium` (0.65) down to its own 0.32. */
+    --glass-opacity-chassis: 0.28;
+
+    /* Composed backgrounds — AX.W54: the opacity is threaded through the ONE
+       `--glass-level` clarity scalar. Each rung's effective alpha is
+       `1 - (1 - <rung-opacity>) * --glass-level`: at level=1 it collapses to the
+       hand-tuned `<rung-opacity>` (byte-identical); at level=0 it resolves `1`
+       (solid `--card` — the opaque escape); at level>1 it goes clearer. ONE
+       expression, the same seven rungs. */
+    --glass-bg-wash:     color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-wash)) * var(--glass-level)) * 100%), transparent);
+    --glass-bg-quiet:    color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-quiet)) * var(--glass-level)) * 100%), transparent);
+    --glass-bg-resting:  color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-resting)) * var(--glass-level)) * 100%), transparent);
+    --glass-bg-floating: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-floating)) * var(--glass-level)) * 100%), transparent);
+    --glass-bg-overlay:  color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-overlay)) * var(--glass-level)) * 100%), transparent);
+    /* The dock bg ALSO rides the oklab tint seam (AX.W54 amendment): the same
+       `color-mix(in oklab, …, --glass-tint-source --glass-tint-strength)` wrapper
+       the rungs reach for, ZERO-delta at `--glass-tint-strength: 0%` — so W55's
+       adaptive darken can reach the dock (the G2 over-light surface) without a
+       second hand-rolled recipe. */
+    --glass-bg-dock:     color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-dock)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength));
+    --glass-bg-chassis:  color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-chassis)) * var(--glass-level)) * 100%), transparent);
+
+    /* Composed borders — foreground-tinted */
+    --glass-border-wash:     color-mix(in srgb, var(--foreground) 8%, transparent);
+    --glass-border-quiet:    color-mix(in srgb, var(--foreground) 10%, transparent);
+    --glass-border-resting:  color-mix(in srgb, var(--foreground) 12%, transparent);
+    --glass-border-floating: color-mix(in srgb, var(--foreground) 15%, transparent);
+    --glass-border-overlay:  color-mix(in srgb, var(--foreground) 18%, transparent);
+    --glass-border-dock:     color-mix(in srgb, var(--foreground) 11%, transparent);
+    --glass-border:          var(--glass-border-quiet);
+    --glass-border-strong:   var(--glass-border-floating);
+
+    /* Shared decorative. Light grain dropped 0.035 → 0.025 in P.W1.B —
+       at the chassis scale the original alpha read as crawl over the new
+       lower-alpha chassis bg; the grain's role is texture, not reading,
+       so it sits at the perceptual floor. Dark companion drops 0.06 →
+       0.045 below to keep the soft-light blend alive without stippling. */
+    --glass-grain-opacity: 0.025;
+    --glass-grain-opacity-disco: 0.08;
+    --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.25);
+
+    /* Hairline-accent — 0.5px catch-light + under-shadow pair.
+       Single token composes the canonical 2-stop hairline used by dock,
+       instrument-chassis. The `.hairline-accent` utility
+       (utilities.css §hairline) adopts these via `box-shadow:`. */
+    --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.06);
+    --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.04);
+    --border-hairline: var(--hairline-catch-light), var(--hairline-under-shadow);
+
+    /* Specular catch-light — 1.5px-tall top-edge highlight that swaps in for
+       --glass-highlight on interactive moments (e.g. primary-action hover).
+       Reads as a real catch-light on a curved surface. The `-dark` companion
+       is overridden inside `.dark`; the named token here is the explicit
+       handle consumers can reference to compose dark-aware layers. */
+    --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.45);
+    --glass-specular-dark: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30);
+
+    /* AV.W15 M3 — Full-perimeter rim light (the "rim that defines the
+       silhouette", WWDC25 sess. 219). Distinct from the top-only
+       `--glass-highlight` (a 0.5px top-edge catch-light): this is a 0.75px
+       inset ring around the WHOLE silhouette, four edges, reading as the
+       catch-light that wraps the glass plate the way iOS-26 Liquid Glass
+       carries a rim, not just a top highlight. Composed as a SECOND inset
+       box-shadow layer alongside `--glass-highlight` on the floating/dock
+       tiers (glass.css wires it). The alpha is deliberately low (0.18 light
+       / 0.10 dark) — the rim is decoration and must not eat AA legibility
+       over a busy backdrop; it sits below the perceptual reading threshold
+       on text. The `-dark` companion is overridden inside `.dark` mirroring
+       the `--glass-specular-dark` precedent. */
+    --glass-edge-light:      inset 0 0 0 0.75px hsl(0 0% 100% / 0.18);
+    --glass-edge-light-dark: inset 0 0 0 0.75px hsl(0 0% 100% / 0.10);
+
+    /* AW.W23 — content-aware adaptive tint (the Baseline-2025 "tint informed by
+       surrounding content" axis, WWDC25 sess. 219). A surface can tint toward a
+       consumer-provided dominant backdrop color via a `color-mix(in oklab, …)`
+       recipe (oklab is the mwg-preferred space for tint generation; NEVER a
+       lightness-shift in `oklch(from …)` — browsers don't gamut-map yet).
+
+       DEFAULT is zero delta: `--glass-tint-source` is the warm-white card itself
+       and `--glass-tint-strength` is 0%, so the rung background mixes 0% toward
+       the source = byte-identical to today. A consumer sets `--glass-tint-source`
+       to a sampled aurora hue + a strength ≤30% to bias the surface. Alpha-safe:
+       the mix is bounded ≤30% and never re-points the card's own alpha.
+
+       AX.W55 — the DEFAULTS stay `var(--card)`/`0%` (the zero-delta rest state).
+       The backdrop-luminance probe (`--glass-backdrop`, below) is what OVERRIDES
+       them under a bright backdrop; the `:root` defaults are NEVER touched — the
+       bucket blocks (glass.css / dock.css `@container style(--glass-backdrop:
+       light)`) do the lift, so a surface over today's rich/dark background reads
+       byte-identical. */
+    --glass-tint-source:   var(--card);
+    --glass-tint-strength: 0%;
+
+    /* AX.W55 — adaptive glass legibility (the iOS-26/27 "locally darken the glass
+       over light content" move; G2). There is NO web API that reads the pixels
+       painted BEHIND a `backdrop-filter` element, so the backdrop-luminance signal
+       is a DECLARATIVE BUCKET a consumer sets where it KNOWS the backdrop is bright
+       (a near-white card surface, a pale aurora bleed, a bright data grid). It is
+       read by the `@container style(--glass-backdrop: light)` blocks on every glass
+       family (the shipped density-cascade mechanism — utilities.css §density) which
+       lift `--glass-tint-strength` toward the AA floor + re-point `--glass-tint-
+       source` to the warm-ink below, mixing the rung TOWARD ink via the EXISTING
+       `color-mix(in oklab)` seam — ZERO new compositing seam.
+
+         --glass-backdrop:      the bucket. `dark` (or unset) = today's zero-delta;
+                                `light` engages the bright-bucket darken. An
+                                INHERITING ident set on any ancestor reaches every
+                                descendant glass surface (the @container read).
+         --glass-backdrop-luma: the numeric escape hatch — a sampled backdrop
+                                relative-luminance (0..1) a heavier JS observer sets
+                                when the declarative bucket is too coarse. The TOKEN
+                                is minted (the cascade reads it if set); the OBSERVER
+                                that sets it stays demo-private until a 2nd consumer
+                                arrives (the no-overfitting bar — the DEFAULT path is
+                                the declarative bucket, not a speculative sampler).
+         --glass-tint-ink:      the LOW-LUMINANCE warm-ink the bright bucket re-points
+                                `--glass-tint-source` to — the warm dark `--foreground`
+                                family (NOT white; a lightener over light content is
+                                exactly the W52-fixed wrong direction). It auto-flips
+                                with `--foreground` (dark-mode it resolves the light
+                                warm ink — but the bright-backdrop case is a light-mode
+                                concern). Overridable like every magnitude here.
+
+       The bright-bucket `--glass-tint-strength` is clamped to a BOUNDED AA-clearing
+       floor — `--glass-tint-strength-aa` (≤24%, the iOS clamp; the lowest value that
+       clears 4.5:1 over synthetic white, capped LOW so the surface STAYS translucent,
+       "let as much content through as possible"). Recorded here as the ceiling the
+       bucket blocks drive to; the live 4.5:1 readback (proof:adaptive-glass π arm)
+       ratifies the exact value. */
+    --glass-backdrop:           dark;
+    --glass-backdrop-luma:      ;
+    --glass-tint-ink:           var(--foreground);
+    --glass-tint-strength-aa:   18%;
+
+    /* AW.W23 — chromatic edge dispersion (the "polished glass" rim fringe Apple
+       shows). A warm fringe on one edge + a cool fringe on the other, low-alpha,
+       biased warm-cream/NCSU-red (NOT iOS-blue). Composed OVER the W22 uniform
+       rim under `prefers-reduced-transparency: no-preference`; dropped under
+       `reduce` (it is a transparency garnish). The two directional inset rings
+       read as light refracting through the glass edge. */
+    --glass-fringe-warm: oklch(0.92 0.06 40 / 0.22);
+    --glass-fringe-cool: oklch(0.90 0.05 230 / 0.16);
+    --glass-edge-dispersion:
+        inset 0.75px 0 0 0 var(--glass-fringe-warm),
+        inset -0.75px 0 0 0 var(--glass-fringe-cool);
+
+    /* AX.W52 D19 — the moving-specular gleam radius (glass.css `.glass-material::
+       before`). The ONE knob that BOUNDS the gleam geometry as a percentage of the
+       plate so it can NEVER again become a whole-surface disc (the prior implicit
+       `circle at …` ran its stops to 55–75% of the half-diagonal — a wash on a
+       small tile). 36% reads as a tracked edge glint. Override on `:root` to retune
+       library-wide; a per-surface override clips the gleam tighter/wider. */
+    --glass-specular-size: 36%;
+
+    /* Chassis curvature illusion — a subtle radial gradient at the chassis
+       top centre that lifts the surface without committing to literal 3D.
+       Composed into <InstrumentChassis>'s background stack. AX.W52 D19 — the
+       prior pure-white `hsl(0 0% 100% / 0.06)` reaching `transparent 60%` was a
+       broad top-centre WASH (the #1 fixed-anchor rest-bloom culprit). Re-derived
+       onto the warm-cream house identity (`hsl(40 30% 96%)`, L < 100% so the warm
+       hue survives — mirroring the moving gleam), the alpha routed through the
+       SINGLE overridable `--glass-curvature-intensity` knob (0.02 default, a third
+       of the old 0.06), and the ellipse tightened to `transparent 38%` so it reads
+       as a thin top-edge sheen, not a central wash. */
+    --glass-curvature-intensity: 0.02;
+    --glass-curvature-overlay: radial-gradient(
+        ellipse at 50% -20%,
+        hsl(40 30% 96% / var(--glass-curvature-intensity)),
+        transparent 38%
+    );
+    /* The light-arm dark alias kept on the same warm-cream + token recipe so a
+       non-`.dark` consumer reading `…-overlay-dark` still resolves a softened
+       sheen; the `.dark` block below lowers `--glass-curvature-intensity` so the
+       deep-canvas arm is genuinely softer (the prior byte-identical dark arm read
+       HARDER over the dark canvas). */
+    --glass-curvature-overlay-dark: var(--glass-curvature-overlay);
+
+    /* Chart palette aliases — speedtest et al. read these for phase tinting.
+       Defaults map to viz-basis hues; consumers can override per app. */
+    --chart-ping:     var(--viz-chebyshev);
+    --chart-download: var(--viz-fourier);
+    --chart-upload:   var(--viz-amber);
+    --chart-jitter:   var(--viz-legendre);
+
+    /* O.W6 Lane D — WCAG companion `--chart-{phase}-label` tokens
+       (speedtest AC.W6c.T2 — F1.V-04 closure).
+
+       The canvas-side hues above preserve their saturated brand register
+       (correct against the meter dial); the COMPANION tokens darken to
+       L≈0.40 so phase-label text on `--background` clears the WCAG 2.1
+       AA-body 4.5:1 contrast floor. Mirrors the two-token discipline
+       already established by `--meter-{background-color,track-stroke}`:
+       one token feeds the canvas/visual, the second feeds the label
+       text.
+
+       Light-mode L≈0.40 in OKLCH preserves the hue rotation while
+       dropping luminance enough for body contrast; dark-mode flips to
+       L≈0.85 against the dark canvas. Consumers reach these via
+       `color: var(--chart-ping-label)` (etc.) on label elements ONLY —
+       chart strokes/fills continue to read `--chart-ping`. */
+    --chart-ping-label:     oklch(0.40 0.18 230);
+    --chart-download-label: oklch(0.40 0.20 22);
+    --chart-upload-label:   oklch(0.40 0.16 55);
+    --chart-jitter-label:   oklch(0.40 0.20 305);
+
+    /* O.W6 Lane D — Meter track stroke (speedtest AC.W6c.T3 — F1.V-02
+       closure). Promoted from speedtest's consumer-side declaration so
+       glass-ui owns the canonical light + dark values. The light-mode
+       value reads opaque foreground (composes through canvas
+       `globalAlpha` in consumer renderers; e.g., speedtest's `rings.ts`
+       `globalAlpha = 0.22` lands the phantom-track at the perceptual
+       sweet-spot). The dark-mode companion lives under `.dark` below
+       and ALSO reads `var(--foreground)` — the prior speedtest value
+       `var(--background)` rendered bg-on-bg invisible at dark mode. */
+    --meter-track-stroke: var(--foreground);
+
+    /* Shadow per tier — complete box-shadow lists for glass surface classes */
+    --glass-shadow-wash:     var(--shadow-sm), var(--glass-highlight);
+    --glass-shadow-quiet:    var(--shadow-md), var(--glass-highlight);
+    --glass-shadow-resting:  var(--shadow-lg), var(--glass-highlight);
+    --glass-shadow-floating: var(--shadow-xl),
+        0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent),
+        var(--glass-highlight);
+    --glass-shadow-overlay:  var(--shadow-2xl),
+        0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 8%, transparent),
+        var(--glass-highlight);
+    --glass-shadow:    var(--glass-shadow-quiet);
+    --glass-shadow-lg: var(--glass-shadow-floating);
+
+    /* ─────────────────────────────────────────────────────────────
+       AL-W1-α augmented — SPINE 8th tier (HOUSING register)
+
+       Closes the AK W2 chassis-spine architectural underclaim per
+       AL-X5 §4.1. The spine register is a polished SLEEVE, not glass:
+       NO backdrop-filter, NO plate opacity, hairline outer stroke,
+       interior radial vignette that subtly carries the phase-color
+       cascade. Consumed exclusively by `<InstrumentChassis variant="spine">`
+       at App-level mount paths (quiet-content routes).
+
+       The 4 tokens here cover the minimum viable substrate the SLIM
+       Y4/Y6/Y7 retention set ratified. The 35 rejected axes (saturate
+       band, edge-light per tier, depth-shadow per tier, tier-up macro)
+       stay rejected per the conservative-creation mandate.
+       ───────────────────────────────────────────────────────────── */
+    --glass-spine-opacity: 0;
+    --glass-spine-blur: 0px;
+    --glass-spine-border: var(--surface-tint-8);
+    --glass-spine-vignette: radial-gradient(
+        ellipse at 50% 0%,
+        color-mix(in oklab, var(--phase-color, var(--surface-tint-8)) 8%, transparent),
+        transparent 60%
+    );
+
+    /* ─────────────────────────────────────────────────────────────
+       AL-W10 SLIM — UNDER-SHADOW recipe rungs
+
+       Per AL-X5 §4 + Y7 §3. iOS Liquid Glass surfaces carry a 0.5px
+       dark hairline along the bottom edge (reads as under-shadow /
+       glass thickness). The substrate `--hairline-under-shadow`
+       already publishes one quiet rung; the four-rung ladder here
+       names the SLIM retention set (Y4 §3.2 / Y6 §4.3) — `quiet`,
+       `default`, `vivid`, `spine` cover the consumer landings without
+       multiplying tokens per tier. The 3 hand-rolled literals at
+       `instrument-chassis.css:52`, `dock.css:279`, `dock.css:952`
+       retire to these.
+
+       Composes as a NON-INSET box-shadow layer alongside the existing
+       `--glass-shadow-*` recipe (the inset under-shadow stays at the
+       hand-rolled literal where it's load-bearing on chassis-internal
+       surfaces).
+       ───────────────────────────────────────────────────────────── */
+    --glass-under-shadow-quiet:   0 2px 8px -1px oklch(0 0 0 / 0.04);
+    --glass-under-shadow-default: 0 4px 16px -2px oklch(0 0 0 / 0.08);
+    --glass-under-shadow-vivid:   0 8px 32px -4px oklch(0 0 0 / 0.12);
+    --glass-under-shadow-spine:   0 1px 0 0 oklch(0 0 0 / 0.06);
+
+    /* Overlay scrim rungs — substrate-aware modal/dialog backdrop tints.
+       Three weights cover the deployed range: dialog-scroll (subtle),
+       canonical modal (default), drawer/full-cover (strong).
+
+       AY.W-PRIM-POLISH D3 — the scrim is its OWN identity token, NOT derived
+       from `--shadow-color`. A scrim's role is to RECEDE: it must pin to INK in
+       BOTH modes. The cartoon-shadow family rides `--shadow-color: var(--foreground)`
+       (correct — a shadow re-tints under `.dark` by construction), but a scrim
+       that does the same FLOODS the dark room with a cream fog (the old dark
+       overlay painted `srgb(0.91… / 0.5)`, a near-white wash that BRIGHTENED the
+       page at the modal moment). `--overlay-scrim-ink` is a fixed warm near-black
+       (the light-mode `--foreground` value), re-resolved verbatim in `.dark` so
+       the scrim recedes in both modes. Clean break, no alias (no-backwards-compat).
+       The `--shadow-color` / `--shadow-cartoon-*` family is UNTOUCHED. */
+    --overlay-scrim-ink:     hsl(24 10% 10%);
+    --overlay-scrim:         color-mix(in srgb, var(--overlay-scrim-ink) 50%, transparent);
+    --overlay-scrim-strong:  color-mix(in srgb, var(--overlay-scrim-ink) 80%, transparent);
+    --overlay-scrim-subtle:  color-mix(in srgb, var(--overlay-scrim-ink) 40%, transparent);
+
+    /* ═══════════════════════════════════════════════
+       §9  ANIMATION OFFSETS
+       ═══════════════════════════════════════════════ */
+    /* Hover lift offsets */
+    --lift-sm: -1px;
+    --lift-md: -2px;
+    --lift-lg: -4px;
+
+    /* Layout tokens */
+    --mask-fade-width: 1rem;
+    /* J.W3.C — dock content overflow caps. When dock content exceeds
+       these dimensions, the inner `.dock-layers` (horizontal) /
+       `.glass-dock.vertical` (rail) container scrolls with a
+       `.scroll-fade-{x,y}` mask-fade so the boundary feathers rather
+       than cliffs. Defaults clamp to 80vw / 80vh capped at sensible
+       desktop widths; consumers override per-dock by setting either
+       token directly on a `.glass-dock` instance. User findings 1 + 5a. */
+    /* AX.W04 — `--dock-max-inline-size` is the canonical inline cap EVERY overflow
+       strategy reads: `overflow="scroll"` scrolls past it, and `overflow="wrap"`
+       wraps to N rows on the over-cap crossing (the dock shrink-wraps to content,
+       `max-inline-size` caps that intrinsic width at this token). The prior
+       `--dock-overflow-bp: 640px` viewport-breakpoint token (the magic-640
+       snap-back) is DELETED — the wrap is content-driven, not viewport-coupled, so
+       there is no breakpoint threshold to name. */
+    --dock-max-inline-size: min(80vw, 64rem);
+    --dock-max-block-size: min(80vh, 48rem);
+
+    /* AB.W1.T1 — chassis max-block-size guardrail.
+       Maximum block size a centred consumer-app card may consume while
+       preserving the inline dock footprint. The recipe subtracts the
+       consumer-owned `--dock-footer-space` (dock height + dock inset +
+       card-edge inset) and `--page-padding-top` from the dynamic viewport,
+       then takes one further rem of breathing room so the card never
+       butts the dock — the user mandate is `≥ 1rem visible gap above
+       dock`. Both consumer tokens carry safe fallbacks for callers that
+       have not declared them.
+
+       Consumers should shrink internal regions (meter, readout, timeline)
+       before falling back to scroll. This token is a guardrail against
+       chassis overflow, NOT a license to make the card scroll as the
+       default solution; clamp-first / no-scroll-first is the canon.
+       See DESIGN.md `## Chassis sizing — dock-adjusted viewport`. */
+    --chassis-max-block-size: calc(
+        100dvh
+        - var(--dock-footer-space, 5.75rem)
+        - var(--page-padding-top, 0rem)
+        - 1rem
+    );
+    /* R0G-2 (AO.W3/W4) — chassis mobile dial-reserve canon. instrument-
+       chassis.css's mobile breakpoint reserves the dial's final box from
+       frame 0 via these vars (with the same values as inline fallbacks, the
+       safety net). Token-first home so the vars resolve canonically. */
+    --instrument-dial-min-height-mobile: 24rem;
+    --instrument-dial-meter-reserve-mobile: minmax(0, 1fr);
+
+    --max-width-input: 24rem;
+    --input-min-width-sm: 5rem;
+    --min-width-input-sm: var(--input-min-width-sm);
+    /* AU.W8b.4 — canonical popover width (Combobox list + anchor). Lifts the
+       `w-[200px]` arbitrary-value wrap to the `w-popover` @theme utility. */
+    --popover-width: 200px;
+    --chart-height-compact: 15rem;
+    --chart-height-default: 22.5rem;
+    --chart-height-large: 25rem;
+    --chart-margin: 1.25rem;
+    --paper-texture-size: 200px 200px;
+
+    /* Border opacity scale */
+    --border-opacity-light:  0.15;
+    --border-opacity-medium: 0.25;
+    --border-opacity-strong: 0.6;
+
+    /* ═══════════════════════════════════════════════
+       §10 SIZING
+       ═══════════════════════════════════════════════ */
+    /* ── The ONE comfortable-sizing scale doctrine (AX.W51 D18) ──────────────
+       `--ui-scale` is the MASTER comfortable-sizing scalar — ONE unitless knob
+       (registered @property <number>, inherits:true, default the identity 1)
+       every interactive-control magnitude derives through `calc(<base> *
+       var(--ui-scale))`, so a single override grows control HEIGHT + PADDING +
+       GAP + FONT-SIZE + GLYPH in LOCKSTEP, proportion preserved, no per-component
+       hack. The cohorts below (`--control-h-*` heights, `--control-text*` control
+       fonts, `--ui-glyph*` glyphs) are its reading surfaces; the CVA bases + the
+       `.btn-pill`/`.input-pill` pills consume them.
+
+       ONE scale system, not three. The dock (`--dock-scale`) and the dropdown
+       family (`--dropdown-text`, W50) are SPECIALIZATIONS that read this axis:
+       `--dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1))` — the
+       dock multiplies ON TOP of the global comfort axis (its existing geometry
+       `calc` cascade inherits the global axis for free, zero edit). A consumer
+       re-tints the whole library's comfort from ONE `:root { --ui-scale: … }`
+       override (or a scoped region — a dense data-table sets it lower) — the
+       token-first axis.
+
+       EXCLUDED — the φ-DISPLAY ladder (`--type-display-*` / `--type-title` /
+       `--type-heading` / `--type-subheading`): a hero/title is a TYPOGRAPHIC
+       identity, NOT a touch target, so it does NOT grow on the comfort/coarse
+       axis. Only interactive-CONTROL text rides `--ui-scale`. Containers (card /
+       panel radii + paddings) are separate `--radius-*` / `--space-*` axes.
+
+       The desktop default is the IDENTITY (1) — byte-exact preservation, no
+       reflow of shipped consumers. The comfort GROWTH lives at the coarse-pointer
+       default (`--ui-coarse-scale`, §below) + the consumer override. The
+       WCAG-2.5.5 44px touch floor survives as a `max(…, --control-floor)` clamp
+       inside the scaled control-size (the coarse block lifts `--control-floor` to
+       `--touch-target`, so a sub-1 scale cannot drop a control under the target).
+       Coordinates with W54's `--glass-level` + W55's `--glass-tint-*` — SEPARATE
+       axes (size vs material vs legibility); a control is comfortably-sized AND
+       glass AND legible, three orthogonal knobs. */
+    --ui-scale: 1;
+    /* The global coarse-pointer comfort default — the WHOLE library grows ~1.5×
+       on touch from ONE place (the @media (pointer: coarse) block at §below lifts
+       :root --ui-scale to this). The dock's prior parallel 1.5× becomes the global
+       default it now shares. Public library-default identity — a consumer sets
+       1.3 / 1.75 on :root or a scope. */
+    --ui-coarse-scale: 1.5;
+    /* The control-height cohort — the h-7/h-9/h-10/h-11 register (28/36/40/44px)
+       the CVA size rungs encode, each scaled by the master axis. The CVA rungs
+       read these via `h-[var(--control-h-*)]` instead of the raw `h-N` literal.
+       `--control-floor` is the WCAG-2.5.5 clamp seam (0 at desktop, lifted to
+       --touch-target under coarse-pointer); each height is `max(scaled, floor)`. */
+    --control-floor: 0px;
+    --control-h-xs: max(calc(1.75rem * var(--ui-scale)), var(--control-floor));
+    --control-h-sm: max(calc(2.25rem * var(--ui-scale)), var(--control-floor));
+    --control-h-md: max(calc(2.5rem  * var(--ui-scale)), var(--control-floor));
+    --control-h-lg: max(calc(2.75rem * var(--ui-scale)), var(--control-floor));
+    /* The control-FONT register (RED 3 — the user's "font too small"). A comfort
+       multiplier BETWEEN the static φ-ladder rung and the painted control font,
+       so interactive-control text grows on the comfort axis while the φ-DISPLAY
+       ladder stays a pure typographic scale (display headings do NOT grow on
+       touch). `--control-text` is the workhorse (the `text-sm` register the
+       buttons/inputs/triggers carried); `--control-text-sm` is the quieter rung
+       (the `text-xs` badge/caption register). W50's `--dropdown-text` IS the
+       picker-family specialization of this register. */
+    --control-text:    calc(var(--type-small) * var(--ui-scale));
+    --control-text-sm: calc(var(--type-caption) * var(--ui-scale));
+    /* The control-GLYPH cohort (RED 4 — the glyph grows WITH the box). The
+       1rem/0.875rem control-glyph register the `size-4`/`size-3.5` literals
+       encode; the un-sized-<svg> CVA rule reads these via
+       `size-[var(--ui-glyph)]`, KEEPING the `:not([class*=size-])` host-sized-icon
+       escape intact (an explicit `size-9` still wins). */
+    --ui-glyph:    calc(1rem     * var(--ui-scale));
+    --ui-glyph-sm: calc(0.875rem * var(--ui-scale));
+
+    /* ── The picker-family type-scale (AX.W50 D17) ───────────────────────────
+       ONE governed two-rung scale the WHOLE shadcn picker family (Select /
+       DropdownMenu / Combobox / ContextMenu / Command / MultiSelect) reads, so the
+       family paints at ONE uniform scale instead of the scattered raw
+       `text-sm`/`text-xs` Tailwind-literal lottery (item rows at `text-sm`,
+       headings/shortcuts at `text-xs`, the two filter inputs at mismatched heights).
+       A consumer re-tints the whole family from ONE override.
+
+       It is a SPECIALIZATION of W51's control-font register (one scale system, not
+       three): `--dropdown-text` reads `--control-text` (the comfort-scaled `text-sm`)
+       and `--dropdown-text-secondary` reads `--control-text-sm` (the comfort-scaled
+       `text-xs`), so the picker family rides the SAME `--ui-scale` comfort axis as
+       every other control — a `--ui-scale` bump grows the dropdowns too. A consumer
+       wanting the family LARGER than the rest overrides `--dropdown-text` directly
+       (e.g. `var(--type-body)`); the override re-resolves every family surface.
+
+       Scale-contract (which surface reads which rung):
+         • PRIMARY (`--dropdown-text`)   → item rows, triggers, filter inputs, empties.
+         • SECONDARY (`--dropdown-text-secondary`) → section labels, group-headings,
+           keyboard shortcuts (the quieter-than-item caption register; resolves the
+           witness-2 contradiction — the Select/DropdownMenu/ContextMenu labels
+           collapse DOWN to the secondary rung to match the Combobox/Command headings,
+           ONE rung for the section-label role family-wide).
+       `--dropdown-input-height` unifies the two filter-input heights (Combobox was
+       h-10, Command was h-11) onto ONE register — a specialization of W51's
+       `--control-h-md` so the picker input scales on the comfort axis with the font. */
+    --dropdown-text:           var(--control-text);
+    --dropdown-text-secondary: var(--control-text-sm);
+    --dropdown-input-height:   var(--control-h-md);
+
+    --size-icon-btn: 2.5rem;
+    --icon-xs: 0.75rem;
+    --icon-sm: 0.875rem;
+    --icon-md: 1rem;
+    --icon-lg: 1.25rem;
+    --icon-xl: 1.5rem;
+    /* V.W2 T9 — 32px rung; spinner glyphs (Loader2) + dense table-row buttons.
+       Naming follows the radius ladder + Tailwind convention (2xl > xl > xxl) —
+       see B6 §2.4 for the naming rationale. */
+    --icon-2xl: 2rem;
+    /* V.W2 T10 — 40px rung; empty-state hero glyph (DashboardMap MapIcon).
+       AI.W5-ζ — rebound from `2.5rem` literal to `var(--size-icon-btn)` so
+       the alignment is contractual single-source-of-truth rather than the
+       coincidental numerical match noted prior. */
+    --icon-3xl: var(--size-icon-btn);
+    /* V.W2 T11 — 56px rung; FlowSelector school/home survey-flow picker.
+       Largest rung in the icon ladder; reserved for hero-class glyphs. */
+    --icon-hero: 3.5rem;
+
+    /* Golden-ratio spacing rungs — φ² and φ³. Preemptive substrate; W4 hero
+       chassis + W5 StoryChassis migration land the consumers. R3 §A row 1.
+       The 0..4 rungs are not currently named (consumers reach via
+       Tailwind's spacing scale); 5/6 land here because their values fall
+       outside the default ladder and the audacious chassis pattern wants
+       a named handle. */
+    --space-phi-5: 2.618rem; /* φ² */
+    --space-phi-6: 4.236rem; /* φ³ */
+
+    /* Dock geometry — consumers may override locally */
+    --dock-h: calc(var(--size-icon-btn) + 0.75rem + 3px);
+    --dock-margin: 0.5rem;
+    --dock-menubar-reserve: 4rem;
+
+    /* AX.W45 — the dock geometry multiplier. `--dock-scale` threads the WHOLE
+       `.glass-dock[data-density]` geometry cascade (box, padding, gap, tab,
+       tile-min, glyph) via `calc(<base> * --dock-scale)`, so a single knob grows
+       every dock axis in lockstep. The WCAG 2.5.5 44px floor survives as a `max(…,
+       44px)` clamp INSIDE the scaled control-size.
+
+       AX.W51 RECONCILE (D18) — `--dock-scale` is RE-HOMED as a SPECIALIZATION of
+       the global `--ui-scale` comfort axis: `calc(var(--ui-scale) *
+       var(--dock-local-scale, 1))`. The dock now MULTIPLIES on top of the global
+       comfort scalar — its whole existing geometry `calc` chain inherits the global
+       axis for FREE (zero edit to the density cascade; the reconcile is at this ONE
+       definition line). At the desktop identity (`--ui-scale: 1`,
+       `--dock-local-scale: 1`) the dock is byte-identical to HEAD. On coarse-pointer
+       the GLOBAL `:root { --ui-scale: var(--ui-coarse-scale, 1.5) }` block grows the
+       dock WITH the rest of the library — ONE consistent touch scale, not a parallel
+       dock-only 1.5×. `--dock-local-scale` is the dock-local EXTRA multiplier
+       (default 1): a consumer who wants the dock LARGER than the global comfort sets
+       it, and the coarse block lifts it to `--dock-mobile-scale` (default 1, the
+       stack-extra) so the dock can grow an extra notch ON TOP of the global coarse
+       default. `--dock-mobile-scale` is the public library-default identity
+       (presets-in-consumers: a consumer sets 1.3/1.75 on `:root` or a dock scope). */
+    --dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1));
+    --dock-local-scale: 1;
+    --dock-mobile-scale: 1;
+    /* Library glyph ownership — `.dock-icon-button > svg` reads this so the dock
+       icon glyph scales WITH the box (mirroring `.dark-mode-toggle-button > svg`).
+       A consumer-passed explicit lucide size class still WINS (utility layer >
+       component layer); this is a DEFAULT, not a ceiling. */
+    --dock-icon-glyph: calc(1.25rem * var(--dock-scale));
+
+    /* AX.W45-TUNE Q1 — the COLLAPSED-pill floor tokens. The collapsed summary
+       used to fall to `--dock-layer-height` (the FULL control height, ~2.5rem) for
+       its `min-width` with NO block floor, so the shrunken pill read as an
+       un-collapsed control row, not a tight proportioned squircle. These two floor
+       tokens (referenced by dock.css's `.collapsed .dock-layer--summary` min-size +
+       the `--dock-pad-collapsed` morph floor) mint a TIGHT proportioned pill: the
+       summary min-size is ≈70% of the full control height (a proportioned dot, not a
+       full-row stub — the ratified default), and the collapsed padding is a step
+       BELOW the expanded `--dock-padding-block` so the collapsed chrome hugs the
+       glyph. The summary carries a SYMMETRIC `min-block-size` (dock.css) keyed to the
+       same token so the pill floors on BOTH axes — a squircle, not a stub. Consumers
+       retune the pill geometry per-instance via these two handles. */
+    --dock-collapsed-summary-min-size: calc(var(--dock-layer-height, 2.5rem) * 0.7);
+    /* AX.W61 — the collapsed padding now threads the ONE `--dock-scale` coarse-pointer
+       multiplier DIRECTLY (at HEAD it was a flat 0.25rem off the scale, so the
+       collapsed pad alone stayed desktop-sized at the 1.5x mobile scale while the
+       box/glyph/min-size grew — a desync the morph then interpolated FROM). The
+       summary min-size already threads `--dock-scale` transitively through
+       `--dock-layer-height` (itself `calc(* --dock-scale)` at every density rung); this
+       lands the collapsed pad on the same thread so the whole collapsed pill scales
+       coherently on touch. The 0.25rem base stays the ratified tight floor. */
+    --dock-collapsed-padding: calc(0.25rem * var(--dock-scale));
+
+    /* AX.W45-TUNE Q3/C3 + C5 — the dock-control family reads a real GLASS register
+       on hover/active, NOT a same-hue `--card` mix at an alpha adjacent to the dock's
+       own `--glass-bg-dock` substrate (a sub-1%-ΔL no-op — the loud Q3 tell: "nothing
+       on hover, something on click"). Both legs now point at NAMED glass tiers a
+       measurable step ABOVE the dock's 42%-opacity substrate:
+         • hover  → `--glass-bg-resting` (the 65% glass plate) — the control surface
+                    WAKES as a brighter glass tier on hover, reading the blurred dock
+                    substrate through it. The +ΔL above `--glass-bg-dock` is perceptible
+                    BEFORE click; the specular gleam + scale ride alongside (one register).
+         • active → `--glass-bg-floating` (the 80% glass plate) — a tier ABOVE hover,
+                    the keyframes-dock "selected element reads as glass" model the user
+                    named (`pass-3:13`): the selected tile is a glass tier that shows the
+                    substrate through it, NOT the flat `--surface-tint-12` ink wash. The
+                    active ≠ hover register is the glass-tier step, not an alpha nudge.
+       This is a REGISTER change (substrate→glass-tier), not a magnitude knob. The
+       per-control `--dock-icon-hover-bg` override still wins if a consumer set it. */
+    --dock-control-hover-bg: var(--glass-bg-resting);
+    --dock-control-active-bg: var(--glass-bg-floating);
+
+    /* AX.W45-TUNE C4/C5 — the small-tile specular override. The 40px dock-control
+       tile is a fraction of a card's plate, so the global `--glass-specular-size`
+       (36% of the plate) blooms a disproportionate disc on a hover/active dock tile
+       (the I.W6 finding). The dock controls scope a TIGHTER radius (22%) so the gleam
+       wakes as a restrained EDGE-catch on the small tile, not a tile-filling bloom —
+       the right resolution of I.W6 (sized-down on the small surface), not turning the
+       specular off everywhere. Read by the dock-control `::before` recipe (glass.css)
+       via the family-scoped override below; the global card/panel size is untouched. */
+    --dock-control-specular-size: 22%;
+
+    /* AX.W45 DK8 — the layer-switcher rail surface ladder. The rail
+       (`.dock-layer-rail` inside a `<DockLayerGroup>`) gets its own quiet plate +
+       a tunable hover/active affordance, replacing the raw `--primary 15%` /
+       `--accent 40%` mixes the indicator/tab used against an absent plate. */
+    --dock-layer-rail-bg: var(--surface-tint-8);
+    --dock-layer-rail-hover: color-mix(in srgb, var(--accent) 40%, transparent);
+    --dock-layer-rail-active: color-mix(in srgb, var(--primary) 15%, transparent);
+
+    /* Dock active-state ladder (O.W6 Lane B)
+       Token-overridable active paint for `.dock-icon-button`. Promoted
+       from hardcoded `background: var(--muted); color: var(--foreground)`
+       per bbnf-buddy O11/c R1: 7 `:deep()` escapes at `ToolsLayer.vue`
+       redefine bg/color/scale/border/shadow on the active variant; the
+       ladder absorbs ~3 of 7 at a stroke. Defaults preserve the prior
+       visual contract (no transform, no border, no shadow) — overrides
+       take effect per-instance via `:root` or a parent scope, e.g.
+       `.tools-layer { --dock-active-scale: 1.2; --dock-active-bg: …; }`.
+       ≥ 2-consumer coverage: bbnf-buddy ToolsLayer (override consumer) +
+       speedtest dock (default consumer).
+
+       AX.W45 DK2 — re-pointed off the opaque `--muted` plate onto the glass-
+       correct `--dock-control-active-bg` (a translucent tint a ladder step above
+       hover), so the icon-button active no longer stamps a solid cream rectangle
+       over the dock glass. The O.W6 active-ladder override consumers still retint
+       per-instance; only the DEFAULT moved to glass-correct. */
+    --dock-active-bg: var(--dock-control-active-bg);
+    --dock-active-color: var(--foreground);
+    --dock-active-scale: 1;
+    --dock-active-border: none;
+    --dock-active-shadow: none;
+
+    /* Q.W3 Lane G (Q-cos-13) — the O.W6 Lane D `--icon-tooltip-hit-area`
+       token retired here. IconTooltip no longer owns a wrap-span; the
+       slotted child carries its own WCAG 2.5.5 hit-area (interactive
+       children via their four-state contract, bare glyphs via a
+       `min-h-11 min-w-11` host). No orphaned token left behind. */
+
+    /* O.W6 Lane D — Dock touch-target floor. Mirrors the IconTooltip
+       hit-area but for the dock-control surface. The base value tracks
+       the desktop default (`--size-icon-btn`); the
+       `@media (pointer: coarse)` block at `dock.css` lifts it to the
+       WCAG 2.5.5 floor on touch devices. */
+    --dock-touch-target: 2.75rem; /* 44px */
+
+    /* AQ.W3 §7 — canonical WCAG 2.5.5 (44px) touch-target floor for the
+       NON-dock coarse-pointer surfaces (`Button size="icon"`,
+       ExpandableContainer triggers, SegmentedTabs responsive mobile trigger). One
+       named rung the `@media (pointer: coarse)` block in utilities.css reads,
+       retiring the per-consumer one-liner `min-h-[44px]` patches. Equals
+       `--dock-touch-target` numerically; kept as a distinct token so the
+       dock floor and the general floor can be retuned independently. */
+    --touch-target: 2.75rem; /* 44px */
+
+    /* MetricBadge — stacked variant geometry. The 2-row stacked layout
+       (label / value+unit) wants a taller floor than the inline pill so the
+       label has breathing room above the baseline pair. T.W2.T2 +
+       audit B-spec §3.2 vertical-rhythm table land 42px (2.625rem) as the
+       min-height with 6px (0.375rem) block padding. The inline ladder
+       keeps its tight defaults via `--metric-badge-min-height` /
+       `--metric-badge-padding-block` (declared inline at the
+       `.metric-badge` selector). */
+    --metric-badge-min-height-stacked: 2.625rem;
+    --metric-badge-padding-block-stacked: 0.375rem;
+
+    /* Configurator — N.W2 Lane A density axis (4 rungs).
+       The `comfortable` rung restates the pre-N.W2 baked recipe exactly
+       (`gap-1.5 py-2` = 0.375rem / 0.5rem) so unparameterised consumers
+       see no visual change. `mobile` halves the vertical breathing room
+       for narrow-viewport studios; `spacious` doubles it for settings-
+       page hosts. See `<ConfiguratorRow>` scoped CSS for the attribute-
+       selector binding. */
+    --configurator-row-gap-mobile: 0.25rem;        /*  4px — tight */
+    --configurator-row-gap-compact: 0.3125rem;     /*  5px — slightly tighter */
+    --configurator-row-gap-comfortable: 0.375rem;  /*  6px — pre-N.W2 default */
+    --configurator-row-gap-spacious: 0.75rem;      /* 12px — generous */
+
+    --configurator-row-py-mobile: 0.25rem;         /*  4px — tight */
+    --configurator-row-py-compact: 0.375rem;       /*  6px — slightly tighter */
+    --configurator-row-py-comfortable: 0.5rem;     /*  8px — pre-N.W2 default */
+    --configurator-row-py-spacious: 0.875rem;      /* 14px — generous */
+
+    /* Component font override (consumers override locally) */
+    --select-font: inherit;
+
+    /* ═══════════════════════════════════════════════
+       §11 INTERACTIVE SCALES & FOCUS
+       ═══════════════════════════════════════════════ */
+    --scale-hover: 1.08;
+    /* AX.W52 — the restrained BUTTON hover lift. `--scale-hover` (1.08) is an
+       8% jump — emphatic for a marquee CTA, jarring as the general hover. The
+       button family (the audacious CTAs + `btn-interactive`) lifts on the
+       smaller `--scale-hover-btn` routed through `--spring-smooth` (the
+       sub-perceptual settle, not the snappy bounce), so the hover reads as ONE
+       coherent glide with the surface-leg cross-fade rather than a mechanical
+       pop. The dock keeps its proportionally-larger `--scale-hover-dock` (small
+       icon, bigger lift reads smaller).
+       AX.W54 Q3 — lifted 1.035 → 1.05: the 1.035 overshot DOWN (W52 tamed the
+       1.08 snap so hard the lift read as nothing), so the glass hover now reads
+       as THREE legs together on hover — the specular gleam waking, a perceptible
+       scale, and the bg/border cross-fade — distinguishable from rest BEFORE the
+       click. Still sub-perceptual-bounce on `--spring-smooth`; the magnitude
+       moved, the easing register did not. */
+    --scale-hover-btn: 1.05;
+    --scale-hover-dock: 1.1;
+    --scale-press: 0.96;
+
+    /* Press-scale rungs. `--scale-press` (0.96) is the canonical iOS Liquid
+       Glass press value every primitive reaches for unless it has a documented
+       reason (DESIGN.md §L3); `--scale-press-btn` aliases the slightly-softer
+       `--scale-press-sm` (0.97) the button + slider recipes consume.
+
+       AT.W7-dock-b — press canon. `--scale-press-dock` previously hard-coded a
+       deeper 0.92 (a second magic press value with no documented rationale),
+       so a dock control pressed visibly harder than every other primitive. It
+       now references the canonical `--scale-press` (0.96) — ONE source for the
+       press scale across the system. A consumer wanting the dock's old deeper
+       press overrides `--scale-press-dock` on the dock instance. */
+    --scale-press-dock: var(--scale-press);
+    --scale-press-sm: 0.97;
+    --scale-press-btn: var(--scale-press-sm);
+
+    /* AX.W53 — the SegmentedTabs travel-squish cap. The active indicator
+       (segmented/pill slider OR the underline rule) STRETCHES along its travel
+       axis as it glides between tabs, then settles to fit — the Material 3
+       ELASTIC / Apple Liquid-Glass "controls insist on animating themselves"
+       register, kept RESTRAINED. The deform is volume-preserving (stretch X,
+       compress Y in lockstep: `scale: var(--stretch) calc(1 / var(--stretch))`)
+       so it reads as an elastic warp, never a size pump. The cap holds the peak
+       LOW (1.08 ≈ +8%) — iOS 26.2 dialed motion DOWN; a high-frequency control
+       wants a whisper of squish, not a bounce. A consumer dials the elasticity
+       (or to 1 for none) without touching source. */
+    --tab-indicator-max-stretch: 1.08;
+    --opacity-disabled: 0.5;
+    --opacity-icon-muted: 0.8;
+
+    --focus-ring-width: 2px;
+    /* D6.b — the focus-ring color routes through a `--focus-ring-color`
+       indirection (default `--ring`, so the resolved shadow is byte-identical to
+       the prior hard `--ring` recipe). An opt-in channel (the `focus-ring-gold`
+       utility, utilities.css) overrides ONLY this color to mint a gilded
+       "you are here / this is live" ring — gold is the transient STATE voice;
+       the resting active mark stays its structural color (the four-voice law). */
+    --focus-ring-color: var(--ring);
+    --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring-color) 30%, transparent),
+        0 0 8px color-mix(in srgb, var(--focus-ring-color) 15%, transparent);
+    --focus-ring: var(--focus-ring-shadow);
+
+    /* ═══════════════════════════════════════════════
+       §12 PAPER TEXTURES
+       ═══════════════════════════════════════════════ */
+    /* Canonical subtle paper-texture opacity — restored from fourier-original
+       (`4df1a06:web/src/style.css:53-54`) after A.W3.5.ab confirmed the
+       heretofore `opacity='1'` URI rendered as an overt grain field in every
+       downstream consumer of `.paper-texture`. The SVG `opacity` attribute is
+       baked at parse-time and cannot read a CSS var, so the subtle value must
+       be inlined; if a consumer needs a heavier overlay, they should layer
+       a wrapper element with its own `opacity:`/`mix-blend-mode:` atop. */
+    --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+    --paper-aged-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
+
+    /* ═══════════════════════════════════════════════
+       §13 GOLD (accent family kept for consumers using it)
+       ═══════════════════════════════════════════════ */
+    --gold: oklch(0.751 0.147 84.2);
+    --gold-light: oklch(0.890 0.183 96.1);
+    --gold-dark: oklch(0.599 0.132 64.2);
+    /* AY.W-PRIM-POLISH D1 — the saturated CTA plate the AW.W13 gold-CTA contract
+       names. A FIXED deep gold (mode-INVARIANT — the gold-CTA hover backplate must
+       be dark in BOTH modes so the white label clears ≥4.5:1; deepening toward the
+       mode-flipping `--foreground` brightened the dark plate to a cream-gold and
+       broke dark). ~`--gold-dark` deepened toward warm-ink → ~rgb(120,87,45),
+       6.5:1 white in light / 5.5:1 in dark. The opaque base of `btn-audacious-gold`
+       :hover. */
+    --gold-deep: oklch(0.487 0.103 63.0);
+
+    /* D6.b — the chrome-gold additions (the rim + the legible ink), completing
+       the gold quad into the gilt FAMILY. Gold is a metal, not a hue — it must
+       read as reflectance, so it lives at the EDGE and the HIGHLIGHT, rarely as
+       an area.
+
+       --gold-rim — the gilt EDGE catch: `--gold` at 40% over the surface, the
+       1px tooled bevel light the `.glass-gilt` modifier + the gilt dock button
+       paint. Non-text → no contrast floor.
+
+       --gold-ink — legible gold-toned TEXT. Derived (NOT guessed) to clear the
+       cream-law ② floor (APCA |Lc| ≥ 45) against `--card` in BOTH arms; the raw
+       `--gold-dark` does not (it was minted as a plate hue). LIGHT arm:
+       oklch(0.560 0.118 70) → |Lc| 69.9 on the cream `--card` (hsl 48 12% 98%).
+       The dark-arm pair lifts L (the warm-dark stock) in the `.dark` block,
+       reaching |Lc| 77.1 on the dark `--card`. Both verified by
+       `proof:gold-ink-contrast`. */
+    --gold-rim: color-mix(in oklab, var(--gold) 40%, transparent);
+    --gold-ink: oklch(0.560 0.118 70);
+
+    --color-gold: var(--gold);
+    --color-gold-light: var(--gold-light);
+    --color-gold-dark: var(--gold-dark);
+    --color-gold-deep: var(--gold-deep);
+    --color-gold-rim: var(--gold-rim);
+    --color-gold-ink: var(--gold-ink);
+
+    /* ═══════════════════════════════════════════════
+       §14 RAINBOW PALETTE — oklch (AV.W16 TW2; mode-independent, no .dark
+       mirror; hue preserved from the prior hsl() cadence)
+       ═══════════════════════════════════════════════ */
+    --rainbow-red: oklch(0.636 0.210 25.5);
+    --rainbow-orange: oklch(0.737 0.163 58.9);
+    --rainbow-yellow: oklch(0.900 0.183 103.7);
+    --rainbow-green: oklch(0.772 0.233 144.8);
+    --rainbow-blue: oklch(0.633 0.162 252.1);
+    --rainbow-indigo: oklch(0.566 0.206 294.1);
+    --rainbow-violet: oklch(0.684 0.250 327.9);
+
+    --rainbow-pastel-red: oklch(0.793 0.066 18.7);
+    --rainbow-pastel-orange: oklch(0.823 0.059 57.3);
+    --rainbow-pastel-yellow: oklch(0.889 0.068 98.1);
+    --rainbow-pastel-green: oklch(0.826 0.072 149.5);
+    --rainbow-pastel-blue: oklch(0.783 0.056 264.2);
+    --rainbow-pastel-indigo: oklch(0.772 0.062 300.2);
+    --rainbow-pastel-violet: oklch(0.799 0.070 314.4);
+
+    /* ═══════════════════════════════════════════════
+       §16 TIMELINE
+       Timeline primitive tokens. All three variants (scrubber +
+       segmented + continuous) compose these. Both segmented + continuous
+       arrays carry the same `TimelineSegment[]` data shape; only the
+       rendering geometry differs. See DESIGN.md `## Timeline Primitive`.
+       ═══════════════════════════════════════════════ */
+
+    /* Heights — per-variant rail thickness */
+    --timeline-scrubber-height: 0.5rem;       /*  8px — single-track scrubber */
+    --timeline-segmented-height: 0.625rem;    /* 10px — N adjacent bands */
+    --timeline-continuous-height: 0.75rem;    /* 12px — ONE pill, N regions */
+
+    /* Geometry — shared across all variants */
+    --timeline-dot-size: 0.875rem;            /* 14px — boundary dot diameter (pointer: fine) */
+    --timeline-dot-size-touch: 1.25rem;       /* 20px — boundary dot diameter (pointer: coarse) */
+    --timeline-touch-target: 44px;            /* AC.W6d F2.I-04 — WCAG 2.5.5 target-size floor.
+                                                 The `::before` halo around each dot extends to
+                                                 this dimension so finger-precision users meet
+                                                 the (target-size: 44×44 minimum) clause without
+                                                 the visible dot growing to that footprint at
+                                                 pointer: fine. */
+    --timeline-segment-flex: 1 1 0;           /* per-cell flex distribution (segmented) */
+
+    /* Boundary-dot glass knobs (Q.W4 Lane B — promoted from
+       ContinuousTimeline.vue SFC fallbacks; `3cb70db` minted these as a
+       private dialect). The continuous-variant dot is a GLASS primitive:
+       a translucent tinted fill over a backdrop blur with a hairline
+       ring. These knobs let consumers retune the resting glass + the
+       per-state tints without a `:deep()` reach.
+         fill            — resting translucent fill
+         blur            — backdrop blur tier behind the dot
+         ring            — hairline glass ring (border-color)
+         tint-current    — wash colour for the active-phase dot
+         tint-completed  — wash colour for the completed-phase dot
+         check-color     — completion-tick stroke (defaults to the
+                           completed tint) */
+    --timeline-dot-fill: var(--surface-tint-12);
+    --timeline-dot-blur: var(--glass-blur-quiet);
+    --timeline-dot-ring: var(--glass-border-floating);
+    --timeline-dot-tint-current: var(--accent, var(--foreground));
+    --timeline-dot-tint-completed: var(--success, var(--foreground));
+    --timeline-dot-check-color: var(--timeline-dot-tint-completed);
+
+    /* Continuous-variant specific — seam dividers between regions.
+       Set `--timeline-continuous-seam-opacity: 0` to suppress the
+       inter-region 1px dividers entirely. Default `0.25` reads as a
+       subtle hairline; the `--timeline-continuous-seam-color` knob lets
+       consumers override the seam tint independently of opacity. */
+    --timeline-continuous-seam-opacity: 0.25;
+    --timeline-continuous-seam-color: color-mix(
+        in srgb,
+        var(--foreground) calc(var(--timeline-continuous-seam-opacity) * 100%),
+        transparent
+    );
+
+    /* Per-segment default gradient fallback — applied when a segment
+       omits its `gradient` field. Consumers can override per-phase via
+       the `--timeline-segment-gradient-{key}` knobs below. */
+    --timeline-segment-default-gradient: linear-gradient(
+        90deg,
+        var(--surface-tint-15),
+        var(--surface-tint-25)
+    );
+
+    /* Per-phase gradient defaults — paint the canonical chart palette
+       at the gradient leading edge, fading to a 60%-opacity tail. The
+       speedtest consumer wires these via `gradient: "var(--timeline-segment-gradient-ping)"`
+       per segment; the same names work for any consumer who follows the
+       ping/download/upload/jitter taxonomy. */
+    --timeline-segment-gradient-ping: linear-gradient(
+        90deg,
+        var(--chart-ping),
+        color-mix(in srgb, var(--chart-ping) 60%, transparent)
+    );
+    --timeline-segment-gradient-download: linear-gradient(
+        90deg,
+        var(--chart-download),
+        color-mix(in srgb, var(--chart-download) 60%, transparent)
+    );
+    --timeline-segment-gradient-upload: linear-gradient(
+        90deg,
+        var(--chart-upload),
+        color-mix(in srgb, var(--chart-upload) 60%, transparent)
+    );
+    --timeline-segment-gradient-jitter: linear-gradient(
+        90deg,
+        var(--chart-jitter),
+        color-mix(in srgb, var(--chart-jitter) 60%, transparent)
+    );
+
+    /* ═══════════════════════════════════════════════
+       §17 METRIC
+
+       MetricRow / MetricStack value-clamp dialect. The declared values are the
+       `audacious` poster register — the hero-scale clamp for a single giant
+       number; MetricStack's `[data-register="result"]` selector overrides it
+       locally for the compact multi-row ledger. Three clamp arms each: `min`
+       (floor), `cqi` (the binding container-query middle term), `max`
+       (ceiling); unit carries min/max only (its cqi is a fixed 6cqi).
+       ═══════════════════════════════════════════════ */
+
+    /* Value register — audacious-poster hero clamp */
+    --metric-row-value-clamp-min: 4.5rem;
+    --metric-row-value-clamp-cqi: 34cqi;
+    --metric-row-value-clamp-max: var(--type-display-hero);
+
+    /* Unit register — one tier below the value it qualifies */
+    --metric-row-unit-clamp-min: 1.5rem;
+    --metric-row-unit-clamp-max: 3.25rem;
+
+    /* Label register — uppercase, the binding row-height term in the
+       compact `result` register */
+    --metric-row-label-clamp-min: 1.125rem;
+    --metric-row-label-clamp-cqi: 5cqi;
+    --metric-row-label-clamp-max: 2.75rem;
+
+    /* ═══════════════════════════════════════════════
+       §2.D INSTRUMENT-CLUSTER COMPOSITION RHYTHM
+
+       The instrument-chassis family owns the under-meter / progress-cluster
+       grammar.
+
+       • `--meter-progress-inset` — the negative-margin inset that pulls the
+         under-meter bar INTO the unpainted ring lane around the dial canvas
+         (~4% of meter-size). Consumed at `.phase-progress` via
+         `margin-block-start: calc(-1 * var(--meter-progress-inset))`. The
+         `--meter-size` reference resolves against the consumer's own
+         declaration; the 200px fallback keeps the calc well-defined.
+       • `--progress-stack-gap` — vertical rhythm between any two stacked
+         progress rails inside one cluster.
+       ═══════════════════════════════════════════════ */
+    --meter-progress-inset: calc(var(--meter-size, 200px) * 0.04);
+    --progress-stack-gap: clamp(0.1875rem, 0.4cqi, 0.375rem);
+
+    /* ═══════════════════════════════════════════════
+       §2.E CELEBRATION-TIER REGISTER
+
+       Shared peak for any "completion" / "thank-you" surface.
+
+       • `--celebration-row-rhythm` — gap between the cluster's rows (cqi-axis).
+       • `--text-celebration-headline-size` — the single designed peak both
+         celebration surfaces clamp toward (cqi-axis).
+       • `--complete-headline-size` — the per-consumer font-size hook a consumer
+         assigns the canon clamp to so its headline pegs at the shared peak;
+         the default falls back to a smaller hero-rung clamp.
+       ═══════════════════════════════════════════════ */
+    --celebration-row-rhythm: clamp(0.5rem, 1.6cqi, 1rem);
+    --text-celebration-headline-size: clamp(2.5rem, 12cqi, 9rem);
+    --complete-headline-size: clamp(2.25rem, 11cqi, 4rem);
+
+    /* ═══════════════════════════════════════════════
+       §19 TABLE DENSITY
+
+       A single unitless knob `--table-density` scales the cell padding +
+       header row height of the Table / DataTable primitive. Default `1`
+       resolves to 1rem cell padding + 3rem header height; 0.75 is a compact
+       admin table, 1.25 is comfortable/touch-friendly. The derived tokens are
+       read by the `table-cell` / `table-head` utilities; changing the knob
+       cascades instantly via CSS inheritance — no JS prop needed.
+       ═══════════════════════════════════════════════ */
+    --table-density: 1;
+    --table-cell-px: calc(1rem * var(--table-density));
+    --table-cell-py: calc(1rem * var(--table-density));
+    --table-head-h: calc(3rem * var(--table-density));
+    --table-head-px: calc(1rem * var(--table-density));
+
+    /* ═══════════════════════════════════════════════
+       §20 PLATFORM MOTION (AQ.W5)
+
+       The native-platform motion substrate axes. Three families, each read
+       by a `@supports`-gated CSS recipe in `scroll-driven.css`,
+       `animations.css` (§TOP-LAYER), and `view-transition.css` — every visual
+       knob a token so a consumer retunes without editing library source.
+
+       SCROLL-DRIVEN (scroll-driven.css). Values mirror the JS-fallback
+       composable defaults (`useScrollProgress` / `useStaggerReveal`) so the
+       native CSS path and the fallback path read identically — no visual seam
+       at the `@supports` boundary.
+
+       TOP-LAYER (animations.css §TOP-LAYER). The `@starting-style` entry/exit
+       grammar for native `<dialog>` / `[popover]` glass surfaces. Backdrop dim
+       uses the `hsl(var(--background) / α)` channel form — the legitimate
+       single-token alpha case (AQ.W2's color-mix migration is orthogonal).
+
+       VIEW-TRANSITION (view-transition.css). The shared `.gl-list-item` group
+       recipe + the `--vt-*` axes the `useViewTransition` substrate consumers
+       (dock layer swap, muster J's verdict re-rank) tune their swap against.
+       ═══════════════════════════════════════════════ */
+    --scroll-progress-scroller: root;
+    --scroll-reveal-rise: 6px;
+    --scroll-reveal-range-end: 60%;
+
+    --top-layer-enter-scale: 0.96;
+    --top-layer-backdrop-blur: 8px;
+    --top-layer-backdrop-dim: 0.5;
+
+    --vt-duration: var(--duration-normal);
+    /* AX.W05 — ONE iOS-spring vocabulary: every spring-flavored transition reads
+       a governed `--spring-*` register. The legacy apple-spring cubic-bezier
+       (+27.5% overshoot) was a SECOND authority beside the regen `--spring-*`
+       cohort; it is EXCISED. Its emphatic-overshoot register maps to the playful
+       `--spring-bouncy` (the closest `linear()` overshoot stop-set), so the VT
+       default + the cards/top-layer transitions share one spring primitive
+       (CPU + GPU sample the same curve). No cubic-bezier fallback seed survives —
+       the `linear()` spring degrades to `ease` where `linear()` is unsupported. */
+    --vt-ease: var(--spring-bouncy);
+    --vt-rise: 8px;
+
+    /* AT.W6-dock-c / AU.W8 — the dock layer-swap morph timing, minted ONCE so
+       both engine paths are timing-IDENTICAL: the FLIP fallback (via
+       `--dock-motion-resize`), the native View-Transition group (its
+       `animation-timing-function`), AND the runtime SpringProgress driver
+       (AU.W8.3) consume this same `(0.32, 0.7)` source curve. Retires the AQ.W6
+       fork where the VT path ran `--vt-ease` (apple-spring, +27.5% overshoot)
+       while the FLIP ran the snappy spring. `--vt-ease` still defaults the
+       other VT recipes (`.gl-list-item`).
+
+       AU.W8 — RETARGET snappy → dock. `--spring-snappy` (ζ=0.65, +6.8%) read as
+       mechanical: a stiff plateau at ~48% with too little overshoot to feel
+       alive ("not iOS-smooth"). AW.W2 then retuned the dock spring to the
+       iOS-control register: `--spring-dock` ((0.32, 0.7), ~+4.6%) settles snappy
+       with a restrained overshoot — the felt iOS dock morph, off the prior
+       playful +18.5% register. The runtime driver's DOCK_SPRING const MIRRORS the
+       (0.32, 0.7) PRESETS row, so the CSS token and the JS-driven morph are
+       bit-identical. */
+    --dock-resize-spring: var(--spring-dock);
+
+    /* AT.W7-dock-b — dock-control press micro-feedback spring. A TRANSFORM-ONLY
+       spring (`scale`/`rotate`) the dock controls apply to their hover/press
+       activation so the squish reads with a touch of spring-back rather than a
+       flat ease. STRICTLY transform-scoped: it must never touch the surface-tier
+       `[data-held]` fades (background/border/box-shadow), which stay on
+       `--duration-fast var(--ease-standard)`. The duration pairs with
+       `--duration-fast`; consumers retune the whole feel via this one token.
+
+       AY.W-DOCK2 (D6) — the register is `--spring-smooth`, the §6 easing-doctrine
+       transform-press register (tokens.css §2: transform hover/press/active →
+       `--spring-smooth`/`--spring-snappy`, NEVER `--spring-bouncy`; a press must
+       settle, never overshoot into a visible bounce). The prior `--spring-bouncy`
+       ROOT default was off-doctrine, shadowed for the four named controls by a
+       per-surface re-point in dock-controls.css — the exact per-surface fork the
+       doctrine kills. The re-point is now a DEAD byte-identical redeclaration and is
+       DELETED; the ROOT token IS the doctrine register, so any other consumer of
+       `--dock-press-spring` inherits the correct smooth register. */
+    --dock-press-spring: var(--duration-fast) var(--spring-smooth);
+}
+
+/* AX.W51 D18 — the GLOBAL coarse-pointer comfort amplification. The WHOLE library
+   — buttons, inputs, badges, toggles, the dock (a specialization that reads
+   `--ui-scale`) — grows ~1.5× on touch from this ONE place, the W45 dock-only 1.5×
+   lifted to the master scalar so the touch scale is CONSISTENT across the library
+   (at HEAD the dock grew but the buttons did not — the three-scale split). The
+   WCAG-2.5.5 44px touch floor is enforced HERE too: `--control-floor` lifts to
+   `--touch-target`, so every scaled control-height `max(scaled, floor)` clamps at
+   ≥ 44px regardless of the scalar (a consumer dialing `--ui-scale` below 1 still
+   cannot drop a control under the target). Fine-pointer is byte-identical
+   (`--ui-scale` stays 1). `--ui-coarse-scale` is the public default a consumer
+   retunes. */
+@media (pointer: coarse) {
+    :root {
+        --ui-scale: var(--ui-coarse-scale, 1.5);
+        --control-floor: var(--touch-target, 2.75rem);
+    }
+}
+
+/* AV.W7 F2 — high-resolution overlay-blur restore. On a 2dppx+ display the
+   richer 24px overlay wash is amortised by the extra device pixels (the blur
+   samples a denser backing store), so the design ceiling is restored where it
+   is affordable. Standard-density displays keep the 15px budget radius set in
+   §-1a `:root`. Token-only override — every overlay surface that reads
+   `--glass-blur-overlay-radius` inherits the restored value automatically. */
+@media (min-resolution: 2dppx) {
+    :root {
+        --glass-blur-overlay-radius: 24px;
+    }
+}
+
+/* ═══════════════════════════════════════════════
+   §-1b  LIGHT-DARK() COLOR ARCHITECTURE (AQ.W2 §2)
+
+   Every PAIRED color token (a token whose `:root` and `.dark` values are
+   BOTH a <color> and differ) folds onto one `light-dark(light, dark)`
+   declaration, keyed off the element's `color-scheme` (§-1). This is the
+   single-source-of-truth collapse of the `.dark` mirror AND the dynamism
+   win: an unregistered custom property holding a `light-dark()` expression
+   re-resolves under a descendant `color-scheme` override (a `.dark`
+   code-block embedded in a light page, or vice-versa).
+
+   DISCIPLINE (§2b — BINDING): these tokens MUST stay UNREGISTERED (no
+   `@property … syntax:"<color>"`). A registered <color> would resolve ONCE
+   at the declaring element and inherit the RESOLVED color, freezing the
+   descendant re-resolution. glass-ui's only `@property` registrations (§18)
+   are non-color (percentage/length), so the discipline holds — W2 adds NO
+   color `@property`.
+
+   The semantic `var()`-aliases (`--background`, `--muted`, `--border`,
+   `--secondary`, `--accent`, `--card-foreground`, …) do NOT appear here:
+   they point at the SAME source name in both modes and auto-track once the
+   `--neutral-*` ladder + `--foreground` resolve via `light-dark()`. Their
+   redundant `.dark` re-declarations DELETE below.
+
+   FALLBACK (§2c): this whole block is `@supports`-gated, so an engine
+   WITHOUT `light-dark()` skips it and the retained `.dark` class block (the
+   SOLE fallback floor) drives dark exactly as at HEAD. `light-dark()` is the
+   enhancement OVER the class — not a parallel alias. Baseline Newly
+   Available; the fallback floor is the pre-existing class block (net-zero
+   new fallback LOC).
+   ═══════════════════════════════════════════════ */
+@supports (color: light-dark(white, black)) {
+    :root {
+        /* Neutral ladder — the source the var()-aliases track */
+        --neutral-0: light-dark(hsl(48 12% 98%), hsl(24 8% 6%));
+        --neutral-1: light-dark(hsl(48 10% 95%), hsl(24 6% 11%));
+        --neutral-2: light-dark(hsl(48  9% 90%), hsl(24 5% 16%));
+        --neutral-3: light-dark(hsl(48  8% 82%), hsl(24 5% 22%));
+        --neutral-4: light-dark(hsl(48  7% 70%), hsl(24 5% 34%));
+        --neutral-5: light-dark(hsl(48  6% 40%), hsl(48 5% 62%));
+        --neutral-6: light-dark(hsl(48  7% 30%), hsl(48 6% 72%));
+
+        /* Core surfaces + ink */
+        --foreground:                 light-dark(hsl(24 10% 10%), hsl(48 10% 90%));
+        --card:                       light-dark(var(--neutral-0), hsl(24 8% 10%));
+        --popover:                    light-dark(var(--neutral-0), hsl(24 8% 10%));
+        --surface-public-data-panel:  light-dark(hsl(44 16% 96%), hsl(36 9% 12%));
+
+        --primary:                 light-dark(hsl(24 10% 10%), hsl(48 10% 90%));
+        --primary-foreground:      light-dark(var(--neutral-0), hsl(24 10% 10%));
+        /* AX.W44 — dark-arm lift. The stock shadcn dark `hsl(0 62.8% 30.6%)`
+           (L≈30.6) was a saturated-PLATE value used AS INK over `--card` by the
+           Alert destructive variant — 1.75:1 over card (illegible) / 1.91:1 vs the
+           page. Lifted to `hsl(0 80% 60%)`: 4.60:1 as text over `--card` (clears the
+           4.5 body floor) AND 5.03:1 as a plate vs the dark page (clears the 3.0
+           graphic floor). The light arm is UNCHANGED (already 4.70:1). Lockstep with
+           the `.dark` fallback floor below (§2c). */
+        --destructive:             light-dark(hsl(0 72% 50%), hsl(0 80% 60%));
+        --destructive-foreground:  light-dark(var(--neutral-0), hsl(48 10% 90%));
+        --ring:                    light-dark(hsl(24 10% 10%), hsl(48 10% 70%));
+        --shadow:                  light-dark(hsl(24 10% 10%), hsl(0 0% 5%));
+
+        /* §4 native-control accent — the per-mode arms (dark reads the
+           mid-tone ring for checkmark-glyph contrast headroom, NOT the
+           near-white dark primary). Joins the light-dark() collapse; still
+           re-specified as `accent-color` inside `.dark` per §2b. */
+        --accent-color:            light-dark(var(--primary), var(--ring));
+
+        /* Section palette — jewel tones brightened L for dark (oklch pairs;
+           AV.W16 TW2 — hue preserved, L evened) */
+        --section-color-0:   light-dark(oklch(0.552 0.192 359.8), oklch(0.721 0.145 354.0));
+        --section-color-1:   light-dark(oklch(0.502 0.165 305.9), oklch(0.733 0.113 308.2));
+        --section-color-2:   light-dark(oklch(0.484 0.163 265.5), oklch(0.718 0.107 268.4));
+        --section-color-3:   light-dark(oklch(0.542 0.089 222.8), oklch(0.767 0.091 219.9));
+        --section-color-4:   light-dark(oklch(0.551 0.088 171.1), oklch(0.776 0.105 172.6));
+        --section-color-5:   light-dark(oklch(0.623 0.124 69.6),  oklch(0.813 0.109 78.2));
+        --section-color-6:   light-dark(oklch(0.579 0.201 30.4),  oklch(0.693 0.151 28.1));
+        --section-color-7:   light-dark(oklch(0.532 0.180 317.5), oklch(0.739 0.134 318.1));
+        --section-color-8:   light-dark(oklch(0.520 0.176 8.4),   oklch(0.709 0.142 2.3));
+        --section-color-9:   light-dark(oklch(0.492 0.038 239.6), oklch(0.763 0.032 239.0));
+        --section-color-10:  light-dark(oklch(0.556 0.103 128.8), oklch(0.794 0.116 127.9));
+        --section-color-11:  light-dark(oklch(0.601 0.092 208.0), oklch(0.805 0.095 206.7));
+        --section-color-12:  light-dark(oklch(0.513 0.163 291.9), oklch(0.719 0.115 295.6));
+
+        --accent-pink:     light-dark(oklch(0.613 0.197 353.8), oklch(0.683 0.131 354.7));
+        --section-heading: light-dark(oklch(0.545 0.189 352.8), oklch(0.711 0.123 349.3));
+        --accent-red:      light-dark(oklch(0.574 0.216 27.5),  oklch(0.644 0.165 22.9));
+
+        /* Viz basis (amber/green stay var()-aliases → auto-track) */
+        --viz-fourier:   light-dark(oklch(0.579 0.201 30.4),  oklch(0.693 0.151 28.1));
+        --viz-chebyshev: light-dark(oklch(0.484 0.163 265.5), oklch(0.718 0.107 268.4));
+        --viz-legendre:  light-dark(oklch(0.532 0.180 317.5), oklch(0.739 0.134 318.1));
+
+        /* WCAG companion chart labels */
+        --chart-ping-label:     light-dark(oklch(0.40 0.18 230), oklch(0.85 0.12 230));
+        --chart-download-label: light-dark(oklch(0.40 0.20 22),  oklch(0.85 0.14 22));
+        --chart-upload-label:   light-dark(oklch(0.40 0.16 55),  oklch(0.85 0.12 55));
+        --chart-jitter-label:   light-dark(oklch(0.40 0.20 305), oklch(0.85 0.14 305));
+
+        /* Semantic UI accents */
+        --tier-featured: light-dark(oklch(0.841 0.173 84.2),  oklch(0.867 0.165 88.7));
+        --tier-saved:    light-dark(oklch(0.676 0.176 252.3), oklch(0.748 0.135 250.1));
+        --like:          light-dark(oklch(0.633 0.200 24.9),  oklch(0.690 0.162 22.2));
+        --success:       light-dark(oklch(0.720 0.192 149.5), oklch(0.805 0.186 151.6));
+        --warning:       light-dark(oklch(0.770 0.165 70.6),  oklch(0.809 0.150 76.6));
+        --info:          light-dark(oklch(0.626 0.186 259.6), oklch(0.713 0.138 259.5));
+        --delete:        light-dark(oklch(0.597 0.198 25.5),  oklch(0.644 0.170 23.1));
+
+        /* Semantic foregrounds (warning-foreground is identical both modes
+           → stays a single light-mode declaration, no light-dark() needed) */
+        --success-foreground: light-dark(var(--neutral-0), hsl(48 10% 96%));
+        --info-foreground:    light-dark(var(--neutral-0), hsl(48 10% 96%));
+
+        /* Cartoon-shadow color primitives (§2d — plain colors, convert) */
+        --shadow-cartoon-color:      light-dark(rgb(0 0 0 / 0.12), rgb(255 255 255 / 0.07));
+        --shadow-cartoon-color-soft: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.03));
+
+        /* Gold family */
+        --gold:       light-dark(oklch(0.751 0.147 84.2), oklch(0.784 0.143 86.0));
+        --gold-light: light-dark(oklch(0.890 0.183 96.1), oklch(0.898 0.182 97.4));
+        --gold-dark:  light-dark(oklch(0.599 0.132 64.2), oklch(0.678 0.150 63.8));
+    }
+}
+
+/* ═══════════════════════════════════════════════
+   DARK MODE — warm dark, section palette brightened ~20% L
+
+   FALLBACK FLOOR (AQ.W2 §2c): this class block is the SOLE non-light-dark()
+   dark path. On a `light-dark()`-supporting engine with `.dark` present,
+   `.dark { color-scheme: dark }` (§1) makes every §-1b token resolve to its
+   dark arm and these explicit dark values agree with it (kept as the floor
+   for non-supporting engines). The pure `var()`-alias re-declarations
+   (`--muted`/`--secondary`/`--accent`/`--border`/`--input`/… and the
+   `--background`/`*-foreground` aliases) are DELETED — they auto-track the
+   `--neutral-*` ladder + `--foreground` resolved above; only EXPLICIT-color
+   dark values (and the non-color overrides §2d) stay.
+   ═══════════════════════════════════════════════ */
+.dark {
+    /* §1 — hard-pin native chrome to dark regardless of OS preference. §4 —
+       re-specify the inherited `accent-color` so it re-resolves to the dark
+       arm (§2b: an inherited built-in <color> set at `:root` would freeze to
+       the light shade without this re-specification). */
+    color-scheme: dark;
+    accent-color: var(--accent-color);
+
+    /* Neutral scale mirrors light-mode pattern: step UP from the background's
+       low L toward foreground. Same perceptual deltas as light. FALLBACK
+       FLOOR — kept verbatim for non-light-dark() engines (§2c); on a
+       supporting engine `color-scheme: dark` (above) drives the §-1b
+       light-dark() arms and these agree. */
+    --neutral-0: hsl(24 8% 6%);    /* L 6  — page surface (dark) */
+    --neutral-1: hsl(24 6% 11%);   /* L 11 — soft field */
+    --neutral-2: hsl(24 5% 16%);   /* L 16 — chip / tab-inactive */
+    --neutral-3: hsl(24 5% 22%);   /* L 22 — hover / highlight */
+    --neutral-4: hsl(24 5% 34%);   /* L 34 — subtle border */
+    --neutral-5: hsl(48 5% 62%);   /* L 62 — muted text (WCAG AA: 7.39:1 vs L6 page / 6.58:1 vs L11 muted) */
+    /* W7-α' (AK-FD1) — strong-muted text. Same principled ladder step as
+       light, mirrored: 10 L LIGHTER than muted (62→72) toward --foreground
+       (L90), the 1/3 point of the L62→L90 muted→primary gap. By-colour; hue
+       48, sat nudged 5→6. WCAG AA: 9.86:1 vs L6 page / 8.78:1 vs L11 muted
+       (cf. neutral-5's 7.39:1). */
+    --neutral-6: hsl(48 6% 72%);   /* L 72 — strong-muted text (secondary register) */
+
+    /* --background / --card-foreground / --popover-foreground / --muted /
+       --muted-foreground{,-strong} / --secondary{,-foreground} /
+       --accent{,-foreground} / --border / --input are pure var()-aliases —
+       DELETED here (AQ.W2 §2a): they auto-track the --neutral-* ladder +
+       --foreground above. Re-declaring them would be redundant. */
+    --foreground: hsl(48 10% 90%);
+    --card: hsl(24 8% 10%);
+    --popover: hsl(24 8% 10%);
+
+    /* R0G-5 (AO.W4) — dark mirror of the warm-neutral public-data panel.
+       --card's dark hsl(24 8% 10%) nudged one warmth step toward amber
+       (24→36) + +1 sat + +2 L so the dark dashboard panel lifts off the page. */
+    --surface-public-data-panel: hsl(36 9% 12%);
+
+    --primary: hsl(48 10% 90%);
+    --primary-foreground: hsl(24 10% 10%);
+    /* AX.W44 — the `.dark` class fallback floor, in LOCKSTEP with the light-dark()
+       enhancement arm above (§2c). Same lifted `hsl(0 80% 60%)` so a
+       @supports-split engine and a class-toggle engine paint the SAME dark red
+       (4.60:1 as ink over --card / 5.03:1 as a plate vs page). */
+    --destructive: hsl(0 80% 60%);
+    --destructive-foreground: hsl(48 10% 90%);
+    --ring: hsl(48 10% 70%);
+    --shadow: hsl(0 0% 5%);
+
+    /* Section palette — brightened for dark backgrounds (oklch; AV.W16 TW2 —
+       mirrors the light-dark() dark halves above; hue preserved) */
+    --section-color-0:  oklch(0.721 0.145 354.0);
+    --section-color-1:  oklch(0.733 0.113 308.2);
+    --section-color-2:  oklch(0.718 0.107 268.4);
+    --section-color-3:  oklch(0.767 0.091 219.9);
+    --section-color-4:  oklch(0.776 0.105 172.6);
+    --section-color-5:  oklch(0.813 0.109 78.2);
+    --section-color-6:  oklch(0.693 0.151 28.1);
+    --section-color-7:  oklch(0.739 0.134 318.1);
+    --section-color-8:  oklch(0.709 0.142 2.3);
+    --section-color-9:  oklch(0.763 0.032 239.0);
+    --section-color-10: oklch(0.794 0.116 127.9);
+    --section-color-11: oklch(0.805 0.095 206.7);
+    --section-color-12: oklch(0.719 0.115 295.6);
+
+    --accent-pink: oklch(0.683 0.131 354.7);
+    --section-heading: oklch(0.711 0.123 349.3);
+    --accent-red: oklch(0.644 0.165 22.9);
+
+    --viz-fourier:   oklch(0.693 0.151 28.1);
+    --viz-chebyshev: oklch(0.718 0.107 268.4);
+    --viz-legendre:  oklch(0.739 0.134 318.1);
+    /* --viz-amber / --viz-green / --meter-track-stroke are pure var()-aliases
+       (→ --section-color-5/-4 / --foreground) — DELETED (§2a); they auto-track
+       their sources, which convert via §-1b. */
+
+    /* O.W6 Lane D — WCAG companion labels lift to L≈0.85 against the
+       deep dark canvas; same two-token discipline as light mode (canvas
+       hue preserved at `--chart-*`; only the label register shifts). */
+    --chart-ping-label:     oklch(0.85 0.12 230);
+    --chart-download-label: oklch(0.85 0.14 22);
+    --chart-upload-label:   oklch(0.85 0.12 55);
+    --chart-jitter-label:   oklch(0.85 0.14 305);
+
+    --tier-featured: oklch(0.867 0.165 88.7);
+    --tier-saved:    oklch(0.748 0.135 250.1);
+    --like:          oklch(0.690 0.162 22.2);
+    --success:       oklch(0.805 0.186 151.6);
+    --warning:       oklch(0.809 0.150 76.6);
+    --info:          oklch(0.713 0.138 259.5);
+    --delete:        oklch(0.644 0.170 23.1);
+
+    /* Semantic foregrounds — off-white over dark plates. Mirrors the
+       `--destructive-foreground` dark pattern (hsl 48 10% 90%). The warning
+       glyph stays dark-on-amber; the dark amber rung is luminous enough that
+       a darker glyph still reads (matches light-mode behaviour). */
+    --success-foreground: hsl(48 10% 96%);
+    --warning-foreground: hsl(24 10% 10%);
+    --info-foreground:    hsl(48 10% 96%);
+
+    --shadow-cartoon:       3px 3px 0px 0px color-mix(in srgb, var(--foreground) 6%, transparent);
+    --shadow-cartoon-hover: 4px 4px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent);
+    --shadow-soft:     0 4px 12px rgba(0, 0, 0, 0.3);
+    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35);
+    --shadow-modal:
+        4px 4px 0px 0px color-mix(in srgb, var(--foreground) 6%, transparent),
+        0 24px 64px color-mix(in srgb, var(--foreground) 18%, transparent);
+
+    --shadow-cartoon-color:            rgb(255 255 255 / 0.07);
+    --shadow-cartoon-color-soft:       rgb(255 255 255 / 0.03);
+
+    /* §5c CONSTELLATION — dark arm (AX.W17). The H.W4 dark-mode lift: the node
+       tones step UP off the ink ground (the light arm's mid-grey would vanish on
+       L6 black), the hairline goes warm off-white, the field carries a touch more
+       presence to read at all. PLAIN-hsl literals, NEVER light-dark()/var(). */
+    --constellation-node:      hsl(42 9% 72%);
+    --constellation-node-dim:  hsl(42 8% 56%);
+    --constellation-line:      hsl(45 12% 86%);
+    /* Anomaly — brightened for the deep canvas (same neutral-default register;
+       the consumer still overrides to its brand). */
+    --constellation-accent:    hsl(20 70% 60%);
+    /* The dark hairlines lift harder over the ink ground, so the edge multipliers
+       run a touch lower than light to keep the field recessive. */
+    --constellation-edge-alpha:          0.20;
+    --constellation-edge-focus-alpha:  0.32;
+    /* §7 — the ink ground needs MORE field presence than cream to read at all, so
+       the dark alpha is modestly HIGHER than the light arm — but still BELOW the
+       slides 1.0 max-legibility reference (the recessive midpoint, not 1.0). */
+    --constellation-alpha:               0.88;
+
+    /* Glass opacity + grain for dark — five-tier ladder, alpha-monotonic.
+       Each rung lifts ~0.08 from its light counterpart so the dark surfaces
+       carry comparable read-weight against the deeper canvas. */
+    --glass-opacity-wash:     0.38;
+    --glass-opacity-quiet:    0.58;
+    --glass-opacity-resting:  0.72;
+    --glass-opacity-floating: 0.88;
+    --glass-opacity-overlay:  0.96;
+    --glass-opacity-chassis:  0.36;
+    --glass-grain-opacity: 0.045;
+    --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.08);
+
+    /* Hairline-accent dark mirror — see light counterpart at line ~404. */
+    --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.05);
+    --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.06);
+
+    /* Specular + curvature — softened for dark backdrops. Disco-grain stays
+       at the same opacity ceiling; the dark grain blend already lifts it. */
+    --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30);
+    /* AV.W15 M3 — the full-perimeter rim remaps to its dark weight inside
+       `.dark` (mirroring the `--glass-specular` remap above). The lit token
+       resolves to the `-dark` alpha on the deeper canvas. */
+    --glass-edge-light: var(--glass-edge-light-dark);
+
+    /* AW.W23 — the chromatic-fringe + adaptive-tint dark arm. The fringe drops
+       to a lower-luminance warm/cool pair on the deep canvas; `--glass-tint-
+       source` auto-flips with `--card` (no override needed — the default already
+       resolves the dark card). */
+    --glass-fringe-warm: oklch(0.78 0.07 40 / 0.18);
+    --glass-fringe-cool: oklch(0.74 0.06 230 / 0.14);
+    /* AX.W52 D19 — the curvature sheen is genuinely SOFTER on the deep canvas (the
+       prior dark arm re-declared the overlay BYTE-IDENTICAL to light, so it read
+       HARDER over the dark substrate — an unsoftened-dark defect). The `:root`
+       `--glass-curvature-overlay` already reads `var(--glass-curvature-intensity)`,
+       so lowering just the intensity here re-resolves the SAME warm-cream recipe at
+       a softer alpha — no byte-identical re-declaration. */
+    --glass-curvature-intensity: 0.012;
+
+    /* Gold — boosted for dark (oklch; AV.W16 TW2) */
+    --gold: oklch(0.784 0.143 86.0);
+    --gold-light: oklch(0.898 0.182 97.4);
+    --gold-dark: oklch(0.678 0.150 63.8);
+    /* D6.b — the dark-arm gilt ink. `--gold-rim` auto-re-resolves (its color-mix
+       reads the dark `--gold` above — no override). `--gold-ink` MUST lift L for
+       the dark `--card` (hsl 24 8% 10%): a deep gold-dark ink would vanish into
+       the near-black plate, so the dark ink is a BRIGHT gold —
+       oklch(0.860 0.158 90) → |Lc| 77.1 on the dark `--card` (cream-law ②;
+       verified by proof:gold-ink-contrast). */
+    --gold-ink: oklch(0.860 0.158 90);
+}
+
+/* ═══════════════════════════════════════════════
+   §18 TYPED CSS PROPERTIES — Houdini @property registrations
+   (AI.W4 grammar — adjacent to §2.C tokens above)
+
+   Three typed custom properties register with the CSS Houdini @property
+   API so transitions interpolate VALUES (percentage / length) rather
+   than the textual representation. Unregistered fallback is safe — the
+   `initial-value` provides a sensible default for any consumer that
+   imports this stylesheet on a browser that doesn't yet support the
+   typed @property registration (the cross-fade collapses to the
+   initial value, then re-paints at the new state).
+
+   Browser support: Chromium 85+, Safari 16.4+, Firefox 128+. The
+   speedtest deployment target sits well within the floor.
+
+   • --progress-crescendo (percentage) — the leading-edge brightness
+     ramp on `<Progress variant="gradient">` past 85% modelValue.
+     `inherits: false` because the value is consumed at one
+     declaration only (the gradient stop calculation); inheriting
+     would let an unrelated ancestor accidentally drive a sibling
+     progress bar.
+
+   • --phase-tint-amount (percentage) — the chassis depth-of-tint
+     companion to `--phase-color`. `inherits: true` because the
+     value cascades from the chassis root through every region
+     wrapper that reads it for a sympathetic tint (matches the
+     `--phase-color` inheritance pattern).
+
+   • --ripple-radius (length) — the `btn-audacious` press ripple
+     radial. `inherits: false` because each button owns its own
+     ripple state (a hovered parent must not push a ripple-radius
+     onto a non-pressed child).
+   ═══════════════════════════════════════════════ */
+
+@property --progress-crescendo {
+    syntax: "<percentage>";
+    inherits: false;
+    initial-value: 0%;
+}
+
+@property --phase-tint-amount {
+    syntax: "<percentage>";
+    inherits: true;
+    initial-value: 0%;
+}
+
+@property --ripple-radius {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0px;
+}
+
+/* ═══════════════════════════════════════════════
+   §11b  POINTER-ANCHORED MOVING SPECULAR (AV.W15)
+
+   The iOS-26 Liquid Glass "light travels around the material /
+   illuminate under your fingertip" behaviour. A masked radial-gradient
+   catch-light rides the surface at (--specular-x, --specular-y), driven
+   by the consumer's pointer-tracked --mouse-x/--mouse-y write. Registered
+   as typed custom properties so the position INTERPOLATES smoothly between
+   pointer samples (a bare unregistered var() snaps; the @property reg lets
+   the engine animate the percentage stop).
+
+   • --specular-x / --specular-y (percentage) — the catch-light centre.
+     `inherits: false` because each glass surface owns its own pointer
+     position (a hovered parent must not push its specular onto a child —
+     the no-glass-on-glass discipline made mechanical).
+
+   • --specular-intensity (number) — the catch-light alpha multiplier.
+     `inherits: false` for the same per-surface-ownership reason; rises on
+     hover/active, settles to its rest floor on leave.
+
+   @property crosses Baseline 2024-07-09. The consumption (the masked
+   radial + the reduced-motion static bracket + the var() fallback) lives
+   in glass-specular-track.css; the registrations live here alongside the
+   other three regs so the typed-property tier has one home.
+   ═══════════════════════════════════════════════ */
+
+@property --specular-x {
+    syntax: "<percentage>";
+    inherits: false;
+    initial-value: 50%;
+}
+
+@property --specular-y {
+    syntax: "<percentage>";
+    inherits: false;
+    initial-value: 50%;
+}
+
+@property --specular-intensity {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+}
+
+/* AX.W54 — the GLASS-FIRST single knob. `--glass-level` is the ONE clarity
+   scalar threaded through BOTH glass ladders at their single sites (the
+   `--glass-bg-*` opacity recipe + the `--glass-blur-*` radii). It is a typed,
+   INHERITING <number> so a host setting it on any ancestor retunes every
+   descendant glass surface (the @container-free cascade path) — and so it
+   animates smoothly rather than snapping. The level acts as a clarity multiplier
+   that PRESERVES level=1 (byte-identical to the hand-tuned ladder):
+     • level 1 — the calibrated glass (today's surfaces, unchanged).
+     • level 0 — the OPAQUE escape: solid `--card` + `blur(0)` through the SAME
+                 machinery (the `.glass-opaque` rung + the a11y brackets ride it).
+     • level >1 — clearer (more transparent + more diffuse) in lockstep.
+   Glass is the DEFAULT surface register for EVERY band (USER-DECIDED MAXIMAL);
+   the opaque level-0 rung is the explicit opt-out. W55 carries the over-light
+   legibility on the SEPARATE `--glass-tint-*` axis (the `--glass-backdrop` probe
+   lifts the tint toward ink — level = opacity+blur, tint = darken-over-light, the
+   two axes coordinate but never collapse: the a11y Clear↔Tinted escape rides
+   level-up here AND tint-toward-ink under `prefers-contrast: more`). */
+@property --glass-level {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+
+/* AX.W51 D18 — the master comfortable-sizing scalar registered typed. The
+   `<number>` syntax guarantees `calc(<base> * var(--ui-scale))` is always valid (a
+   malformed override CLAMPS to the initial value 1, not an invalidated calc — the
+   fail-safe); `inherits: true` (unlike the per-element specular @property cohort)
+   so a SCOPED override (a dense data-table region) cascades to every descendant
+   control without a per-element set; the type makes it animatable (a density
+   toggle COULD spring it). Mirrors the `--glass-level` registration above (the
+   cascading-scalar idiom), distinct from the per-element specular @property cohort
+   (those are `inherits: false`). */
+@property --ui-scale {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+
+/* ── The specular-intensity magnitude cohort (AX.W09) ──────────────────────
+   The catch-light alpha multiplier at each interaction state, as a SINGLE
+   overridable token cohort (was three buried literals across glass.css —
+   `0.35` rest floor / `0.6` hover / `0.85` active — and the `.dark` arm's
+   `0.22`). `glass.css`'s `.glass-material::before` rest/hover/active rules READ
+   these, so the subtle-vs-extreme magnitude is a knob a consumer (or the dark
+   arm) retunes ON THE CASCADE — never a re-buried literal. Override on `:root`
+   to retune library-wide; the cartoon-shadow override contract is the precedent.
+
+   Re-baselined AGAIN at AX.W52 D19 — with the central screen-disc replaced by a
+   BOUNDED plus-lighter edge gleam (glass.css), the gleam is a whisper at every
+   rung, so the cohort drops further (the W09 0.22/0.32 ceiling still lifted the
+   whole-tile disc on hover):
+     • rest   0    — static, unwired surfaces are CLEAN; the gleam wakes only on
+                     hover/active or on a pointer-wired surface. Aligns the painted
+                     rest with the @property `--specular-intensity { initial-value:
+                     0 }` dormancy.
+     • hover  0.10 — a whisper edge gleam, not a bloom.
+     • active 0.16 — the press whisper. */
+:root {
+    --glass-specular-intensity-rest: 0;
+    --glass-specular-intensity-hover: 0.1;
+    --glass-specular-intensity-active: 0.16;
+}
+
+/* Over the deep canvas `plus-lighter` still lifts, so the dark arm runs a touch
+   softer on the interaction rungs (rest already 0). */
+.dark {
+    --glass-specular-intensity-hover: 0.08;
+    --glass-specular-intensity-active: 0.12;
+}