@mkbabb/glass-ui 3.2.0 → 3.4.0

package/src/styles/fonts.css

@@ -141,3 +141,28 @@
         U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
         U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
+/* ═══════════════════════════════════════════════
+   OFL FACE FILES — Fraunces (ornamental display)
+   ═══════════════════════════════════════════════ */
+
+/* Fraunces — Latin subset (basic Latin + ASCII punctuation + common
+   diacritics). The FULL variable font: a single woff2 carries wght 100..900
+   AND the opsz / SOFT / WONK axes typography.css drives
+   (`--font-display-variation-settings: "WONK" 1, "SOFT" 0`). Before AU.W4 the
+   `--font-stack-display: "Fraunces"` token (tokens.css:43) had NO shipped face,
+   so those axes were SILENTLY INERT (the slipped ship of the grand-audit/AS.W0b
+   lineage); this face resolves the dangling display token. `font-display: swap`
+   — the display register is a deliberate ornament, post-LCP, with the body
+   carried by the calibrated sans/mono fallbacks. */
+@font-face {
+    font-family: "Fraunces";
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("@mkbabb/glass-ui/fonts/fraunces/fraunces-latin.woff2") format("woff2");
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
+        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/src/styles/glass-specular-track.css

@@ -0,0 +1,154 @@
+/* Pointer-anchored moving specular — the iOS-26 Liquid Glass illuminate-from-
+ * within behaviour (AV.W15 M2, the HEADLINE fold).
+ *
+ * A masked radial-gradient catch-light rides the material surface at the
+ * pointer position. The consumer writes the pointer location onto the element
+ * as `--mouse-x` / `--mouse-y` (percentages) via a thin pointer-listener; this
+ * rung maps those onto the typed `--specular-x` / `--specular-y` properties
+ * (registered in tokens.css §11b) and paints a `radial-gradient(circle at …)`
+ * over a `mask-image` so the glow stays clipped to the glass plate and travels
+ * with the cursor — "the light travels around the material / illuminate under
+ * your fingertip".
+ *
+ * Baseline floors: `@property` 2024-07-09 (the smooth position interpolation),
+ * CSS `mask-image` 2023-12-07 (the surface-clip). Both carry a `var()` fallback
+ * so an engine without typed-property animation still paints a centred catch-
+ * light, and an engine without `mask` still paints the radial (unmasked but
+ * surface-bounded by the `::before` `inset: 0` + `border-radius: inherit`).
+ *
+ * The pointer-position WRITE (`--mouse-x` / `--mouse-y`) is the consumer's seam
+ * (DockIconButton wires it; Button glass + Card hover opt in). The CSS half —
+ * the masked radial, the reduced-motion static bracket, the var() fallback, the
+ * @supports-gated refraction garnish — is the deliverable here.
+ */
+
+@layer components {
+    /* The opt-in class. A `::before` pseudo carries the moving catch-light so it
+       composes over the host's own glass background/blur without a second
+       backdrop-filter (no glass-on-glass — the specular is a LIGHT layer, not a
+       second plate). The host need not be positioned-relative by us; the five
+       glass tiers + the dock + Button already mint `position: relative`. */
+    .glass-specular-track::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        z-index: 1;
+        /* Map the consumer's pointer write onto the typed properties, ON THE
+           PSEUDO. The `--mouse-x/--mouse-y` write lands on the HOST (inline
+           style); those are UNREGISTERED custom properties, so they inherit
+           down to this `::before` naturally. The registered `--specular-*`
+           props are `inherits: false` (per-surface ownership), which means a
+           `::before` does NOT see a value set on its originating element — so
+           the mapping must be declared HERE, on the pseudo, where it owns its
+           own typed value. The `var(--mouse-x, 50%)` floor is the centred
+           fallback: an engine that never receives a pointer write paints a
+           centred catch-light, never a broken/absent one. */
+        --specular-x: var(--mouse-x, 50%);
+        --specular-y: var(--mouse-y, 50%);
+        /* The catch-light intensity floor at rest; hover/active lift it (the
+           pseudo-targeting rules below). Registered `<number>`, so the layer
+           opacity it drives interpolates smoothly. */
+        --specular-intensity: 0.35;
+        /* The travelling catch-light. A soft circular glow centred on the
+           tracked pointer position; the warm-white tint keeps the warm-cream
+           identity (NOT iOS blue). The gradient carries FIXED stop alphas — the
+           `--specular-intensity` multiplier drives the layer `opacity` below
+           (NOT a `calc()` in the stop alpha: a registered-`@property` `var()`
+           nested in `calc()` inside an `hsl()` alpha inside a gradient does not
+           substitute in Chromium — it computes to 0. Driving the whole layer's
+           `opacity` is both correct AND the cleaner model — intensity IS a
+           layer brightness, not a per-stop axis). */
+        background: radial-gradient(
+            circle at var(--specular-x, 50%) var(--specular-y, 50%),
+            hsl(40 30% 100% / 0.55) 0%,
+            hsl(40 30% 100% / 0.22) 22%,
+            transparent 55%
+        );
+        opacity: var(--specular-intensity, 0.35);
+        /* Clip the glow to the plate so it rides the surface (the "light travels
+           AROUND the material" read). `mask-image` Baseline 2023-12-07; a
+           non-supporting engine ignores it and the `inset: 0` + radius-inherit
+           already bound the glow to the host rectangle. */
+        mask-image: radial-gradient(
+            circle at var(--specular-x, 50%) var(--specular-y, 50%),
+            black 0%,
+            black 55%,
+            transparent 75%
+        );
+        mix-blend-mode: screen;
+        /* Smooth the position + intensity between pointer samples. The typed
+           `@property` registrations make the percentage stops interpolable, so
+           the catch-light position SETTLES rather than snapping frame-to-frame;
+           the intensity rides the layer `opacity` transition. */
+        transition:
+            --specular-x var(--duration-fast, 150ms) var(--ease-standard, ease-out),
+            --specular-y var(--duration-fast, 150ms) var(--ease-standard, ease-out),
+            opacity var(--duration-normal, 240ms) var(--ease-standard, ease-out);
+    }
+
+    .dark .glass-specular-track::before {
+        /* Softer over the deep canvas — the screen blend lifts harder on dark. */
+        --specular-intensity: 0.22;
+    }
+
+    /* Hover/active lift the intensity — the "illuminate under your fingertip"
+       brighten on engagement; settles back on leave via the opacity transition
+       above. The rules target the `::before` (the intensity lives on the pseudo
+       — see the mapping note above). */
+    .glass-specular-track:hover::before {
+        --specular-intensity: 0.6;
+    }
+    .glass-specular-track:active::before {
+        --specular-intensity: 0.85;
+    }
+}
+
+/* ── Reduced-motion: pin the specular STATIC ───────────────────────────────
+   The MANDATORY guard. Under `prefers-reduced-motion: reduce` the catch-light
+   paints static at rest position — no pointer-tracking (the position pins to
+   centre, ignoring the consumer's `--mouse-x/--mouse-y` write), no transition
+   animation. The centred catch-light + the warm-cream tint survive; only the
+   MOTION is removed. The pin + the `transition: none` live on the `::before`
+   (where the typed `--specular-*` props are owned), overriding the pointer-map
+   above by order — the `var(--mouse-x)` write is ignored, the catch-light pins
+   centred. */
+@media (prefers-reduced-motion: reduce) {
+    .glass-specular-track::before {
+        --specular-x: 50%;
+        --specular-y: 50%;
+        transition: none;
+    }
+}
+
+/* ── Reduced-transparency: drop the specular ───────────────────────────────
+   When the user requests reduced transparency the surface goes opaque (the
+   glass.css bracket maps the blurs to `none`); a travelling catch-light on a
+   flat opaque surface is decoration without substrate, so it drops too. */
+@media (prefers-reduced-transparency: reduce) {
+    .glass-specular-track::before {
+        display: none;
+    }
+}
+
+/* ── feDisplacementMap refraction garnish — PE-only, @supports-gated ────────
+   True SVG `feDisplacementMap` lensing (`backdrop-filter: url(#…)`) is
+   Chromium-only (WebKit bug #245510, Firefox not shipping) and resize-
+   expensive. It lands ONLY as a progressive-enhancement garnish layered OVER
+   the blur base, NEVER the substrate — gated `@supports (backdrop-filter:
+   url(#…))` so a non-supporting engine paints the blur base alone (no broken
+   `url(#…)` reference). A consumer opts a glass surface into the refraction by
+   adding `.glass-refract` AND mounting the named SVG filter; the gate asserts
+   the garnish never reaches the substrate. The blur base paints WITHOUT it. */
+@supports (backdrop-filter: url("#glass-refract")) {
+    @layer components {
+        .glass-specular-track.glass-refract {
+            /* The garnish composes the consumer-mounted `#glass-refract` SVG
+               filter OVER the host's existing blur. It is additive — the host's
+               `backdrop-filter` blur already painted; this only sharpens the
+               refraction edge where the engine supports it. */
+            backdrop-filter: var(--glass-blur-resting) url("#glass-refract");
+        }
+    }
+}

package/src/styles/glass.css

@@ -1,4 +1,32 @@
-/* Glass utilities — glassmorphism surface classes referencing --glass-* tokens */
+/* Glass utilities — glassmorphism surface classes referencing --glass-* tokens
+ *
+ * ── No-glass-on-glass discipline (AV.W15 D5) ───────────────────────────────
+ * Apple's Liquid Glass guidance: "glass is best reserved for the navigation
+ * layer that floats above the content" — there is no glass-on-glass. glass-ui
+ * adopts the same RUNG-PAIRING rule across three layer bands (the existing
+ * z-index registry already encodes them, tokens.css §3 `--z-*`):
+ *
+ *   content    (--z-background … --z-content)  — the page substrate; NOT glass.
+ *   navigation (--z-controls … --z-dock/panel) — the glass band (dock, panels,
+ *                                                 floating chrome).
+ *   overlay    (--z-overlay … --z-modal)       — the glass band (dialog/sheet
+ *                                                 over content).
+ *
+ * A glass surface nested INSIDE another glass surface is a discipline violation
+ * — the inner surface should read as a FLAT tier (a `--card` / `--muted` fill),
+ * not a second `.glass-*` plate (the blur stacks muddy, the rim doubles, the
+ * read collapses). Reach for glass in the navigation/overlay bands only; inside
+ * a glass panel, compose flat tiers.
+ *
+ * ── iOS-spring-on-controls cross-ref (AV.W15 C/M cross-ref) ────────────────
+ * The momentum-gated press squish (the control's "lift up on touch, quiet at
+ * rest" register — scale toward `--scale-press-dock` / `--scale-press-btn`) is
+ * the SPRING half of one Liquid Glass behaviour the rim/specular folds here are
+ * the MATERIAL half of. The spring wiring is OWNED by the dock-motion arm
+ * (AV.W9, velocity continuity) and the slider arm (AV.W11); it is cross-
+ * referenced here and authored there, not re-derived. See
+ * `src/components/custom/dock/README.md` for the canonical discipline.
+ */
 
 @layer components {
     /* ── Five-tier surface ladder (v0.8.0; visual only, no geometry) ──
@@ -53,12 +81,20 @@
         box-shadow: var(--glass-under-shadow-default), var(--glass-shadow-resting);
     }
 
+    /* AV.W15 M3 — the floating tier wires the full-perimeter `--glass-edge-light`
+       rim as an inset layer alongside the under-shadow + lift stack. The rim is
+       the catch-light that "defines the silhouette" (WWDC25 sess. 219), distinct
+       from the top-only `--glass-highlight`. It rides INSIDE the box-shadow stack
+       so it composes with the under-shadow floor and the elevation lift. */
     .glass-floating {
         position: relative;
         background: var(--glass-bg-floating);
         backdrop-filter: var(--glass-blur-floating);
         border: 1px solid var(--glass-border-floating);
-        box-shadow: var(--glass-under-shadow-vivid), var(--glass-shadow-floating);
+        box-shadow:
+            var(--glass-edge-light),
+            var(--glass-under-shadow-vivid),
+            var(--glass-shadow-floating);
     }
 
     .glass-overlay {
@@ -69,6 +105,42 @@
         box-shadow: var(--glass-shadow-overlay);
     }
 
+    /* ── Content-aware under-shadow modifier (AV.W15 M4) ──────────────
+       Apple raises the under-shadow over text (so the glass reads as
+       lifting OFF the text) and drops it over solid light. The modifier
+       is ATTRIBUTE-DRIVEN, no JS: a consumer adds `.glass-over-text`
+       (or `[data-over-content="text"]`) to a text-bearing glass surface to
+       swap it ONE under-shadow rung heavier, or `[data-over-content="solid"]`
+       to lighten it one rung over a solid-light backdrop. It reuses the
+       existing `--glass-under-shadow-{quiet,default,vivid}` rungs (no new
+       shadow value — `vivid` is sufficient over text), redefining only the
+       leading under-shadow layer per tier; the lift stack is untouched.
+
+       The selectors are per-tier so the swap is rung-correct
+       (quiet→default, resting→vivid). `.glass-floating` already sits at the
+       `vivid` ceiling over text, so the heavier variant is a no-op there
+       (the rung saturates) — documented, not an error. */
+    .glass-quiet.glass-over-text,
+    .glass-quiet[data-over-content="text"] {
+        box-shadow: var(--glass-under-shadow-default), var(--glass-shadow-quiet);
+    }
+    .glass-resting.glass-over-text,
+    .glass-resting[data-over-content="text"] {
+        box-shadow: var(--glass-under-shadow-vivid), var(--glass-shadow-resting);
+    }
+
+    /* The inverse — over a solid-light backdrop the under-shadow lightens
+       one rung (the glass need not lift as hard off a flat bright field). */
+    .glass-resting[data-over-content="solid"] {
+        box-shadow: var(--glass-under-shadow-quiet), var(--glass-shadow-resting);
+    }
+    .glass-floating[data-over-content="solid"] {
+        box-shadow:
+            var(--glass-edge-light),
+            var(--glass-under-shadow-default),
+            var(--glass-shadow-floating);
+    }
+
     /* Grain noise overlay — reuses paper texture SVG, no extra assets */
     .glass-wash::after,
     .glass-quiet::after,

package/src/styles/index.css

@@ -51,10 +51,27 @@
  *   4. glass.css             — .glass-{wash,quiet,resting,floating,overlay}
  *                              5-rung ladder + .glass-card / -pill / -btn.
  *                              Consumes tokens (1) + theme aliases (3).
+ *  4a. glass-specular-track.css — the pointer-anchored MOVING specular rung
+ *                              (AV.W15). A `.glass-specular-track` opt-in paints
+ *                              a masked radial catch-light tracking the pointer
+ *                              (@property-animated, reduced-motion-static, var()
+ *                              fallback) + the @supports-gated refraction
+ *                              garnish. Loads after glass.css so it composes
+ *                              over the glass tiers.
  *   5. paper.css             — paper underpaint + grain overlay utilities.
  *                              Pairs with (4) for paper-on-glass compositions.
- *   6. dock.css              — .dock-icon-button, .dock-select-trigger, etc.
- *                              Component utility layer; consumes (1) + (3).
+ *   6. dock.css              — dock shell / density / grain / layer-crossfade
+ *                              contract + the shared cross-control four-state
+ *                              comma-groups. Component utility layer; consumes
+ *                              (1) + (3).
+ *  6b. dock-controls.css     — the five dock CONTROL families carved out of
+ *                              dock.css (AU.W8b.3): .dock-icon-button,
+ *                              .dark-mode-toggle-button, .dock-tab-button + tiers,
+ *                              .dock-select-trigger / .dock-dropdown-trigger, and
+ *                              the coarse-pointer touch floor. Same @layer
+ *                              components; MUST load directly after dock.css so
+ *                              the shared :where()/comma-group contract in (6)
+ *                              cascades into these control rules.
  *   7. cards.css             — .cartoon-surface, .paper-texture.
  *                              Component utility layer.
  *   8. floating-panel.css    — .floating-panel + .floating-panel-item.
@@ -96,8 +113,10 @@
 @import "./typography.css";
 @import "./theme.css";
 @import "./glass.css";
+@import "./glass-specular-track.css";
 @import "./paper.css";
 @import "./dock.css";
+@import "./dock-controls.css";
 @import "./cards.css";
 @import "./floating-panel.css";
 @import "./transitions.css";

package/src/styles/instrument-chassis.css

@@ -71,6 +71,11 @@
            paints something readable. */
         --phase-color: var(--muted-foreground);
         --phase-color-label: var(--muted-foreground);
+
+        /* AV.W16 TW3 — inline-size container named `chassis` so the dial reflow
+           below reads the chassis's OWN box, not the viewport (portable into a
+           narrow host). */
+        container: chassis / inline-size;
     }
 
     .dark .instrument-chassis {
@@ -286,10 +291,12 @@
         align-self: stretch;
     }
 
-    /* Mobile reflow — dial stacks vertically; the inner divider rotates from
-       a vertical groove (desktop) to a horizontal groove (mobile). Same
-       twin-line idiom, different orientation. */
-    @media (max-width: 720px) {
+    /* Narrow-box reflow — dial stacks vertically; the inner divider rotates
+       from a vertical groove (wide) to a horizontal groove (narrow). AV.W16 TW3
+       — keyed off the `chassis` container (above), not the viewport, so a
+       narrow-host chassis stacks off ITS box. 45rem ≈ 720px at the 16px root
+       (the prior viewport cadence as a box width). */
+    @container chassis (max-width: 44.9375rem) {
         .instrument-chassis .instrument-dial {
             grid-template-columns: 1fr;
             /* R0G-2 (AO.W3) — reserve the dial's FINAL box from frame 0. The

package/src/styles/theme.css

@@ -4,9 +4,52 @@
  * Maps every CSS custom property from tokens.css + typography.css to a
  * Tailwind utility-generating token. References vars (not literals) so
  * consumers can override at :root / .dark without rebuilding Tailwind.
+ *
+ * Three blocks (AV.W16 TW1):
+ *   - LEADING plain `@theme`: the radius primitives + the radius semantic
+ *     aliases. Plain (not inline) on purpose — the radius scale has no
+ *     tokens.css twin, so each `--radius-*` is the lone declaration + single
+ *     override point. Inline is WRONG here: it substitutes the VALUE, so two
+ *     aliases resolving to one primitive (`--radius-card`/`--radius-dialog`
+ *     both → `--radius-2xl`) collapse to an identical value and v4 drops one
+ *     `rounded-*` utility when both are scanned. Plain mints each alias's own
+ *     var, so value-identical siblings never collide.
+ *   - `@theme inline`: the tokens.css `var(--token)` BRIDGES (color/shadow/
+ *     blur/duration/ease/typography). Inline substitutes the referenced value
+ *     and mints no second var, so the tokens.css token stays the single
+ *     override point (plain would emit `--color-primary` AND `--primary`).
+ *     Guardrail: NEVER `@property`-register a color token — registration
+ *     snapshots the value and breaks light-dark() (see below).
+ *   - trailing plain `@theme`: the remaining literals (`--animate-*`, opacity).
  */
 
+/* Radius primitives — leading plain @theme (declared before the inline aliases
+   reference them; see the order note above). */
 @theme {
+    --radius: 0.625rem;
+    --radius-xs: 4px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-xl: 12px;
+    --radius-2xl: 1rem;
+    --radius-pill: 9999px;
+
+    /* Semantic radius aliases — plain @theme (not inline; see header note).
+       Value-identical siblings (e.g. --radius-card + --radius-dialog) would
+       collapse + drop a rounded-* utility under inline; plain mints each
+       alias's own var. */
+    --radius-lg:      var(--radius);
+    --radius-card:    var(--radius-2xl);
+    --radius-panel:   var(--radius-xl);
+    --radius-dialog:  var(--radius-2xl);
+    --radius-input:   var(--radius);
+    --radius-button:  var(--radius);
+    --radius-badge:   var(--radius-pill);
+    --radius-dock:    var(--radius-pill);
+    --radius-tooltip: var(--radius-lg);
+}
+
+@theme inline {
     /* ═══════════════════════════════════════════════
        Typography — size scale → text-* utilities
        ═══════════════════════════════════════════════ */
@@ -71,6 +114,12 @@
 
     --color-muted: var(--muted);
     --color-muted-foreground: var(--muted-foreground);
+    /* AU.W8b.4 — the muted-foreground-strong bridge (text-muted-foreground-strong
+       utility). The base token already exists (tokens.css:362); only the
+       --color-muted-foreground bridge was present. CardDescription consumes
+       text-muted-foreground-strong through this. NOT @property-registered (a
+       design-token color; registration would break light-dark() re-resolution). */
+    --color-muted-foreground-strong: var(--muted-foreground-strong);
 
     --color-accent: var(--accent);
     --color-accent-foreground: var(--accent-foreground);
@@ -100,6 +149,15 @@
     --color-muted-soft:   var(--muted-soft);
     --color-muted-medium: var(--muted-medium);
 
+    /* AU.W8b.4 — glass-tier surface/border bridges (bg-glass-quiet /
+       border-glass-quiet). Companions to the existing --shadow-glass-quiet
+       bridge below; lets the Toggle `card` variant compose bg-glass-quiet /
+       border-glass-quiet / shadow-glass-quiet instead of bg-[var(--glass-…)]
+       arbitrary wraps. NOT @property-registered (design-token colors —
+       registration snapshots the resolved color + breaks light-dark()). */
+    --color-glass-quiet:        var(--glass-bg-quiet);
+    --color-glass-border-quiet: var(--glass-border-quiet);
+
     /* Foreground-tint rungs — bg-surface-tint-{4,6,8,10,12,15,18,22,25}. */
     --color-surface-tint-4:  var(--surface-tint-4);
     --color-surface-tint-6:  var(--surface-tint-6);
@@ -206,27 +264,10 @@
     --z-index-toggle: var(--z-toggle);
     --z-index-max: var(--z-max);
 
-    /* ═══════════════════════════════════════════════
-       Border radius → rounded-* utilities
-       ═══════════════════════════════════════════════ */
-    --radius: 0.625rem;
-    --radius-xs: 4px;
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: var(--radius);
-    --radius-xl: 12px;
-    --radius-2xl: 1rem;
-    --radius-pill: 9999px;
-
-    /* Semantic radius — point at primitives from tokens.css; no self-reference */
-    --radius-card:    var(--radius-2xl);
-    --radius-panel:   var(--radius-xl);
-    --radius-dialog:  var(--radius-2xl);
-    --radius-input:   var(--radius);
-    --radius-button:  var(--radius);
-    --radius-badge:   var(--radius-pill);
-    --radius-dock:    var(--radius-pill);
-    --radius-tooltip: var(--radius-lg);
+    /* The radius PRIMITIVES + the semantic radius aliases (→ rounded-*
+       utilities) live in the LEADING plain @theme block above — plain, not
+       inline, so value-identical aliases never collide during candidate
+       resolution. See the order/collision note there. */
 
     /* ═══════════════════════════════════════════════
        Sizing → h-*, min-w-*, and spacing utilities
@@ -236,6 +277,8 @@
     --height-chart-large:   var(--chart-height-large);
     --min-width-input-sm:   var(--input-min-width-sm);
     --spacing-chart-margin: var(--chart-margin);
+    /* AU.W8b.4 — w-popover utility (Combobox list width). Lifts `w-[200px]`. */
+    --width-popover:        var(--popover-width);
 
     /* Golden-ratio spacing — p-phi-5 / m-phi-6 etc. via Tailwind's spacing
        utilities. φ² and φ³ rungs for hero/chassis padding ladder. */
@@ -316,7 +359,16 @@
     --transition-duration-xl: var(--duration-xl);
     --transition-duration-xxl: var(--duration-xxl);
     --transition-duration-sparkle: var(--duration-sparkle);
+}
 
+/* ═══════════════════════════════════════════════════════════════════════
+   Directly-authored LITERALS — plain @theme (the override surface here is
+   the namespaced var itself, not a tokens.css bridge, so these mint their
+   global variable). Radius primitives, the --animate-* composites (literal
+   keyframe name + var() timing — no tokens.css twin to double), and the
+   opacity rungs.
+   ═══════════════════════════════════════════════════════════════════════ */
+@theme {
     /* ═══════════════════════════════════════════════
        Animation → animate-* utilities
        ═══════════════════════════════════════════════ */