@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/styles/glass.css

@@ -1,77 +1 @@
-/* Glass utilities — glassmorphism surface classes referencing --glass-* tokens
- *
- * ── No-PLATE-on-PLATE discipline (re-scoped under the glass-first default) ──
- * Apple's Liquid Glass guidance reserves glass for the floating layers; glass-ui
- * adopts the RUNG-PAIRING rule across three layer bands (the z-index registry
- * already encodes them, tokens.css §3 `--z-*`):
- *
- *   content    (--z-background … --z-content)  — the page substrate.
- *   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).
- *
- * The discipline bans PLATE-in-PLATE: a second `.glass-*` PANEL nested inside a
- * glass panel is a violation (the blur stacks muddy, the rim doubles, the read
- * collapses) — the inner PANEL should read as a flat tier. But CONTROL-on-plate
- * is SANCTIONED: under the glass-first maximal default, `btn-glass` (a real
- * backdrop-filter control) inside `.glass-card` inside a glass Dialog is the
- * COMMON composition. The depth-3 ceiling + `contain: paint` budget that keeps
- * the nested blur cheap is gated by W-A11Y-PERF (the enforcement half); this
- * header is the doc half. Bottom line: do not nest a glass PANEL inside a glass
- * panel; a glass CONTROL on a glass plate is fine and budget-gated.
- *
- * ── 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.
- *
- * ── Thin @import ROOT (cohesion-aware carve) ───────────────────────────────
- * The glass rule body is carved into cohesive `glass/*.css` partials (each
- * under the 500-line no-god-module bound), @import-ed below in CASCADE ORDER.
- * The base ladder splits into three adjacent `@layer components` blocks
- * (material · ladder · surfaces) — same layer, same source order, so the carve
- * is isomorphic. The squircle `@supports` arm and the a11y `@media`/`@supports`
- * overrides MUST stay AFTER the base ladder (they override it). See
- * docs/precepts/design-idioms.md §cohesion-aware partials.
- */
-
-/* CSS @import rules must precede every other rule. The seven partials @import in
-   cascade order (surface-axis.css AFTER ladder/surfaces so its [data-surface]
-   decoration attr rules win over the base rung by source order; BEFORE the
-   squircle + a11y @supports overrides, which must stay last): */
-@import "./glass/material.css";
-@import "./glass/ladder.css";
-/* BC.W-ACCENT-TONE — the contrast-floored 3-channel tonal-accent register
-   (.accent-tone: one --tone → idle/active/edge/ink). AFTER ladder.css (reads the
-   warm-cream --card surface the ladder mints); the SOLE writer of the --accent-*
-   channels, so the placement is cascade-order-invariant. */
-@import "./glass/accent-tone.css";
-@import "./glass/rim.css";
-@import "./glass/surfaces.css";
-/* BC.W-CARVE6 — the .input-pill / .control-surface form-control REST register
-   carved out of surfaces.css to hold the 500-line bound, @import-ed IMMEDIATELY
-   AFTER surfaces.css and BEFORE surface-axis.css (same @layer components, same
-   source order — the dist is byte-isomorphic). */
-@import "./glass/control-surfaces.css";
-/* BD.W-TAB-IOS-CAPSULE — the ONE shared glassy register (`.glass-capsule` +
-   `.glass-capsule-track` + `.glass-capsule-hover`) the tabs/dock-tab/buttons/chips/
-   cards consumers compose. @import-ed AFTER surfaces.css (so the `--glass-bg-floating-
-   tinted` seam + the `--glass-rim-*`/`--glass-shadow-floating` tokens resolve) and
-   BEFORE the consuming recipes (segmented-tabs.css et al, imported by index.css). */
-@import "./glass/glass-capsule.css";
-@import "./glass/surface-axis.css";
-@import "./glass/reveal.css";
-/* BD.W-LIQUID-ENTRANCE-GENERAL — the UNIVERSAL `.liquid-enter` mount recipe
-   (the four coupled channels as @keyframes-on-mount + the `.is-cel` cel-slam + the
-   lagging cartoon cast). @import-ed AFTER reveal.css (it extends the same
-   `--lq-enter-*` channel substrate the `.glass-reveal` TRANSITION floor speaks). */
-@import "./glass/liquid-enter.css";
-@import "./glass/deep.css";
-@import "./glass/progress-rail.css";
-@import "./glass/squircle.css";
-@import "./glass/a11y-fallback.css";
+@import "./glass/material.css"; @import "./glass/ladder.css"; @import "./glass/ladder-undershadow.css"; @import "./glass/grain-overlay.css"; @import "./glass/accent-tone.css"; @import "./glass/rim.css"; @import "./glass/surfaces.css"; @import "./glass/surfaces-pager.css"; @import "./glass/control-surfaces.css"; @import "./glass/glass-capsule.css"; @import "./glass/liquid-fill.css"; @import "./glass/surface-axis.css"; @import "./glass/material-roles.css"; @import "./glass/reveal.css"; @import "./glass/liquid-enter.css"; @import "./glass/deep.css"; @import "./glass/defined.css"; @import "./glass/progress-rail.css"; @import "./glass/squircle.css";

package/dist/styles/index.css

@@ -1,260 +1 @@
-/*
- * @mkbabb/glass-ui — Unified design system styles
- *
- * Import this in your project's main CSS file:
- *   @import "tailwindcss";
- *   @import "tw-animate-css";
- *   @import "@mkbabb/glass-ui/styles";        (token cascade + SFC scoped CSS)
- *   @import "@mkbabb/glass-ui/styles/fonts";  (OFL woff2 corpus, loaded once)
- *   (then add your project-specific token overrides locally)
- *
- * AN.W1 — the single `@mkbabb/glass-ui/styles` import resolves the COMPLETE
- * stylesheet: this @import cascade PLUS the per-component `<style scoped>`
- * payload (Aurora grid layering, Progress/Slider/Notification/… scoped rules).
- * The build folds the SFC bundle (`dist/glass-ui.css`) into the dist copy of
- * this file (vite.config.ts `publishStyleAssets`), so a consumer never needs
- * a second `@import "@mkbabb/glass-ui/styles.css"` line. The `./styles.css`
- * export stays reachable as a transparent SFC-only entry (NOT a back-compat
- * alias) for a cascade-free consumer.
- */
-
-/*
- * FONT PAYLOAD SPLIT (AM-W1-α). The payload-bearing @font-face faces
- * (Plus Jakarta Sans + Fira Code woff2, base64-inlined at publish into
- * ~99 KB gzipped) are NOT imported here — they live in `fonts.css`,
- * reachable via the `@mkbabb/glass-ui/styles/fonts` export. This keeps the
- * critical first-paint `./styles` entry free of the font binary. The
- * calibrated `local()` fallback faces (with Capsize metric overrides) DO
- * stay on this critical path inside typography.css — they paint during the
- * `font-display: optional`/`swap` window with zero CLS, so the deferred
- * real-face import never causes a layout shift.
- *
- * NOTE: Font @import url(...) lines are NOT issued from here (and never
- * were) — doing so would put them after @import "tailwindcss" in the
- * consumer's output, which violates the CSS spec (and some bundlers then
- * drop them). The split above is by separate export subpath, not @import.
- */
-
-/*
- * Cascade order — load order is load-bearing. Each layer references the one
- * above it via CSS custom properties or selector cascade; reordering breaks
- * fallbacks. Documented at L.W2 Lane B per Rε §B.5.1.
- *
- * WHERE each idiom LIVES (the localized design-idiom home, complementing the
- * load-ORDER below): see docs/precepts/design-idioms.md — @theme aliases live
- * in theme.css, @utility recipes in their cohesion-domain file, the
- * cohesion-aware @import-partial carve rule, and the var-in-arbitrary syntax.
- * tokens.css / glass.css / utilities.css are thin @import ROOTS over cohesive
- * tokens/* · glass/* · utilities/* partials (each < 500 lines, in cascade order
- * — the dock.css precedent, AX.W06; generalized AY.W-CSS1). The carve is
- * cascade-isomorphic: the partials @import in the recorded cascade order so this
- * load order is preserved bit-for-bit.
- *
- *   1. tokens.css            — thin @import root over tokens/{scheme-motion,
- *                              color-radius,shadow,glass,offsets-sizing,
- *                              scale-paper,light-dark,dark-arm,property-regs}.css.
- *                              CSS custom properties (color, easing, glass,
- *                              paper, shadow, surface-tint rungs). Source-of-
- *                              record for every visual axis.
- *   2. typography.css        — golden-ratio scale (√φ); semantic type classes.
- *                              Pure values, no token consumption.
- *   3. theme.css             — @theme block (Tailwind aliases). Reads tokens
- *                              from (1) so MUST come after them; defines the
- *                              `dark` variant selector consumed by the cascade.
- *   4. glass.css             — thin @import root over glass/{material,ladder,
- *                              surfaces,progress-rail,squircle,a11y-fallback}.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              — the dock CORE: the `@property --dock-morph-t`
- *                              registration, the shared cross-control four-state
- *                              comma-groups, and the `@import`s of the cohesive
- *                              `dock/*.css` partials (shell · morph · density ·
- *                              layers · layer-group · overflow — AX.W06 carved
- *                              the 1762-line god-module into single-axis partials,
- *                              each < 500 lines, all in the SAME @layer components
- *                              so the cascade is isomorphic). 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.
- *  7a. feedback-tone.css     — the ONE shared tinted-glass tone register
- *                              (BA.W-FEEDBACK-TONE): `.feedback-tone` +
- *                              `.feedback-tone-{success,warning,info,destructive}`
- *                              tint a glass rung a bounded % toward a house tone
- *                              token on the EXISTING color-mix(in oklab, …) seam.
- *                              Toast / Notification / Alert consume it (the three
- *                              tone maps collapse). Loads after cards.css (it reads
- *                              the same `--glass-bg-*` rung tokens cards.css/the
- *                              ladder mint) and before floating-panel.css.
- *   8. floating-panel.css    — .floating-panel + .floating-panel-item.
- *                              Component utility layer.
- *   9. transitions.css       — Vue <Transition> classes (fade, fade-slide,
- *                              pop, dialog-scale, dropdown, tab-fade).
- *  10. animations.css        — @keyframes for components consumed via
- *                              `animation:` properties in (9) and component
- *                              <style> blocks. Includes the §TOP-LAYER
- *                              `@starting-style` entry/exit grammar (AQ.W5).
- *  10a. scroll-driven.css    — native scroll-driven recipes (.scroll-progress
- *                              + [data-scroll-reveal]); the `@supports`-gated
- *                              primary over the JS-composable fallback (AQ.W5).
- *  10a'. scroll-choreography.css — the SOTA scroll-CHOREOGRAPHY register
- *                              (.scroll-build page-build / .scroll-cascade
- *                              section-cascade / .scroll-pin scroll-pinned + the
- *                              native .smooth-scroll opt-in) on the native
- *                              scroll()/view()/timeline-scope substrate; NO
- *                              Lenis/GSAP dep (BB.W-SCROLL-MOTION).
- *  10a''. scroll-chrome.css  — BC.W-SCROLL-CHROME the scroll-driven floating-
- *                              CHROME collapse recipe (.scroll-chrome reads
- *                              --chrome-collapse-t for the compositor shrink/
- *                              quiet/shadow-lift; PERSISTENT-by-default, crisp
- *                              blur, never-invisible quiet, PRM-discrete). The
- *                              useScrollChrome JS machine owns the snap + ramp.
- *  10b. view-transition.css  — the `.gl-list-item` View-Transitions group
- *                              recipe + `--vt-*` axes (AQ.W5; the
- *                              `useViewTransition` substrate's CSS half).
- *  11. utilities.css         — thin @import root over utilities/{animate,base,
- *                              components,btn,a11y-overrides}.css. focus-ring,
- *                              btn-audacious + btn-interactive (press cluster;
- *                              K W6 + Q.W3 Lane E), rainbow-vivid +
- *                              rainbow-pastel. Consumes earlier animations +
- *                              tokens.
- *  11a. menu.css             — BA.W-MENU-GLASS the glass MENU-ROW + MENU-SECTION
- *                              register. AFTER utilities.css so `.glass-menu-row`'s
- *                              `@layer components` hover/highlight rules source-
- *                              order-win over `.interactive-item:hover` (same layer
- *                              + specificity) — the cascade-trap-safe placement.
- *  12. instrument-chassis.css — P-tranche component CSS (chassis bezel +
- *                              groove dividers). Loaded after utilities so
- *                              component-local recipes can override.
- *  13. hover-popover.css     — V.W3 popover-animation grammar.
- *  14. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
- *                             sheet surface + peek handle + snap-stop rules).
- *  15. segmented-tabs.css    — AX.W53 SegmentedTabs overflow/indicator grammar.
- *  16. select.css            — BA.W-EMISSION the PRECOMPILED Select content
- *                             collision-bound (the `[data-slot="select-content"]`
- *                             max-height rule) — moved off the dead arbitrary-
- *                             bracket CVA class so the bound SHIPS in dist/glass-ui.css
- *                             regardless of consumer JIT reach. A structural utility
- *                             never depends on a content-scan; locked by proof:emission.
- *
- * Per-package component CSS lives at (12)-(16) (loaded after utilities so
- * component-local recipes can override). New per-package CSS files append
- * to that tail.
- */
-@import "./tokens.css";
-@import "./typography.css";
-@import "./theme.css";
-@import "./glass.css";
-@import "./glass-specular-track.css";
-@import "./glass-refract.css";
-@import "./paper.css";
-@import "./dock.css";
-@import "./dock-controls.css";
-@import "./cards.css";
-@import "./feedback-tone.css";
-@import "./floating-panel.css";
-@import "./transitions.css";
-@import "./animations.css";
-/* BD.W-MORPH-FIELD-WELD — the ONE morph-field recipe (the body/neck/waist silhouette + the
-   dedicated @property --morph-squish channel + the welling concave waist clip-path + the
-   1940s ink-cast). The `useMorphField` weld writes the drive-derived channels once/frame;
-   this sheet paints them. The cross-engine clip-path waist FLOOR + the [data-morphing] goo
-   gate live here. */
-@import "./motion/morph-field.css";
-/* BE.W-CELEBRATE-BURST — the earned glass-petal radial-bloom recipe (the
-   .glass-celebration-petal warm-cream frosted-glass material + the overlay anchor).
-   @import-ed after animations.css per the wave spec (the petal motion is the JS rAF
-   step's compositor writes; this recipe is the static frosted material the petals wear). */
-@import "./jubilance.css";
-@import "./scroll-driven.css";
-@import "./scroll-choreography.css";
-@import "./scroll-chrome.css";
-@import "./view-transition.css";
-@import "./utilities.css";
-/* BA.W-MENU-GLASS — the glass menu-row + menu-section register. @import-ed AFTER
-   utilities.css (NOT the floating/transitions band the spec hinted) so the
-   `.glass-menu-row` `@layer components` hover/highlight rules source-order-WIN
-   over `.interactive-item:hover` (utilities/base.css, same layer + specificity) —
-   the cascade-trap-safe placement, mirroring glass/surface-axis.css's "import
-   AFTER ladder.css" discipline. */
-@import "./menu.css";
-@import "./configurator.css";
-@import "./instrument-chassis.css";
-@import "./hover-popover.css";
-@import "./drawer.css";
-@import "./segmented-tabs.css";
-@import "./select.css";
-/* BA.W-ICON-CHIP — the <IconChip> section-color pop recipe + the three axes
-   (duotone/bloom/reveal). A component partial; the token arms (--section-color-N
-   / --muted) auto-flip under .dark so the chip is mode-robust by construction. */
-@import "./icon-chip.css";
-/* BB.W-BORDER-PROGRESS — progress IS the element's border: the masked-conic ring
-   consumption (the @property reg lives in tokens/property-regs.css §18). A
-   component partial; the conic + the radius-following mask-composite + the coverage
-   masks + the PRM milestone-pulse bracket. */
-@import "./border-progress.css";
-
-/* BC.W-AX-COMPLETION-SEAL — the hero-scale earned-GOLD completion seal: a one-shot
-   gold-draw mark (a `stroke-dashoffset` wipe on the 4 `@property` motion tokens
-   `--seal-draw`/`--seal-scale`/`--seal-glint`/`--seal-ink`, registered in
-   tokens/property-regs.css §18). The ink reads the W-PHASE-PALETTE earned-gold
-   register; the glint composes the W-AX-METAL-GLOW catch-light. One-shot, PRM-gated,
-   compositor-only — the feedback-surface partial. */
-@import "./completion-seal.css";
-
-/* Ensure Tailwind scans glass-ui's compiled component templates for the utility
-   classes they emit (CVA variant classes like text-destructive-foreground,
-   layout utilities like h-full/shrink-0).
-
-   BA.W-EMISSION — re-pointed from the DEAD components-mirror glob (the prior
-   `../components` target). That glob resolved correctly in glass-ui's OWN build
-   (`src/styles/index.css` → `src/components` carries the real `.vue` source), but the
-   SHIPPED dist copy of this file (`dist/styles/index.css`) resolved `../components` to
-   `dist/components/` — a
-   directory that carries ONLY `.d.ts` mirror files (zero `.js`, zero `.vue`). The
-   compiled render-functions live FLAT at `dist/*.js`. So in every consumer that
-   re-imported this `@source` line, Tailwind scanned an empty dir and glass-ui's own
-   arbitrary utilities silently died (the P9 / valuejs-fold register-B class).
-
-   `../*.js` reaches the compiled render-functions PRECISELY in the SHIPPED context:
-   in dist it is `dist/*.js` (the 150+ flat compiled chunks that carry glass-ui's
-   utility class strings — the surface the dead `../components` mirror NEVER held).
-   In glass-ui's OWN source build it is `src/*.js` (empty — glass-ui's own components
-   compile their CSS through vite, not this `@source`), so the directive is a no-op
-   in the own-build and never scans the `src/` shader/`.ts` tree (a bare `../` glob
-   tripped Tailwind's dev candidate-extractor on the shader template strings —
-   `Missing opening (`). This directive is a BACKSTOP for a consumer that imports
-   this exact cascade file — the PRIMARY self-emission path is
-   `vite.style-assets.ts emitComponentUtilities` (P9), which ships glass-ui's
-   component-utility RULES build-independently into `dist/styles/components.css`.
-   Fully-arbitrary BRACKET utilities (`[max-height:…]`, `[--slider-track-height:…]`)
-   are rejected by that path's `classish` token filter AND are not reliably reachable
-   by a JIT scan, so every STRUCTURAL bracket utility (geometry/bounds/sizing) is
-   pre-compiled into shipped CSS instead — never load-bearing on any consumer's
-   content-scan reach. Locked by proof:emission. */
-/* AN.W1 — SFC scoped component CSS (folded so a single
-   @import "@mkbabb/glass-ui/styles" carries cascade + components) */
-@import "../glass-ui.css";
-
-/* P9 — component-utility rules (rounded-panel, text-muted-foreground,
-   …) shipped build-independently so a bare consumer paints them. */
-@import "./components.css";
-
-@source "../*.js";
+@import "./tokens.css"; @import "./typography.css"; @import "./theme.css"; @import "./glass.css"; @import "./glass-specular-track.css"; @import "./glass-refract.css"; @import "./paper.css"; @import "../components/dock/styles/index.css"; @import "../components/dock/styles/controls.css"; @import "../components/card/styles.css"; @import "../components/_shared/feedback-tone.css"; @import "./transitions.css"; @import "./animations.css"; @import "./viz-reveal.css"; @import "./scroll-driven.css"; @import "./scroll-choreography.css"; @import "../components/card/card-scroll.css"; @import "./scroll-chrome.css"; @import "./view-transition.css"; @import "./utilities.css"; @import "../components/_shared/menu.css"; @import "../components/configurator/styles.css"; @import "../components/instrument-chassis/styles.css"; @import "../components/drawer/styles.css"; @import "../components/tabs/styles/segmented.css"; @import "../components/tabs/styles/drag.css"; @import "../components/_shared/field-surfaces.css"; @import "../components/dialog/placement.css"; @import "../components/icon-chip/styles.css"; @import "../components/scroll-progress-rim/styles.css"; @import "../components/completion-seal/styles.css"; @import "./draw-in.css"; @import "../glass-ui.css"; @import "./components.css" layer(components); @import "./accessibility.css"; @source "../*.js";

package/dist/styles/paper.css

@@ -1,284 +1 @@
-/*
- * paper.css — Paper-texture primitives (BD.W-PAPER-MORPHISM, the texture+blend
- * redesign — the grain/grit must be PLAINLY VISIBLE; if you squint, it FAILS).
- *
- * Two composable Tailwind `@utility` declarations:
- *   - paper-underpaint: fixed, app-root, fullscreen tooth texture at z-index -1
- *   - paper-grain-overlay: ::after tooth overlay for individual surfaces
- *
- * THE FIX (the headline): the prior `feTurbulence bf=0.65 4-oct` + `feBlend
- * multiply in2=SourceGraphic` cloud was a self-cancelling no-op — a fine cloud
- * averaged to grey on hiDPI, and `overlay`/`soft-light` collapse to IDENTITY
- * against a near-white cream wash (L≈0.98) / near-black ink wash (the blends only
- * bite mid-grey backdrops; the paper register lives on the poles). Measured std
- * 0.02–0.86 — invisible by math.
- *
- * THE TEXTURE — `--paper-grain-tooth`: a COARSE anisotropic grey-RGB speckle
- * (`baseFrequency='0.04 0.09'` = grain direction, 2 octaves), KEEP the RGB
- * (`feColorMatrix saturate=0` → grey, never zero it), per-channel
- * `feComponentTransfer` slope-1.8/intercept-(-0.4) CONTRAST-STRETCH (the
- * letterpress bite) + `feFuncA slope=0 intercept=1` (FULL OPAQUE alpha — the
- * grey speckle is painted straight, the blend carries the darken/lighten; NOT the
- * lens-A luminance→alpha matrix that gives a near-empty texture). `<filter
- * color-interpolation-filters='sRGB'>` pins sRGB (identical Chrome↔Safari,
- * deterministic seed). NO `feBlend` mud op. Tile 140px (coarse tooth reads as
- * STRUCTURE, survives hiDPI, divides cleanly DPR 1/2/3).
- *
- * THE BLEND LAW (the decisive, physically-true move): `multiply` (light — ink
- * sinks into the paper's pits → darken) / `screen` (dark — fiber catches light →
- * lighten). Baseline, sRGB-safe, identical both engines. Plain per-mode arms.
- *
- * THE ALPHA: `--paper-grain-opacity` re-calibrated to the JND floor (light 0.22 /
- * dark 0.16 — glass-fx.css / dark-arm.css; the inversion the measurements force:
- * multiply on cream is gentle → MORE, screen on ink bites hard → LESS).
- *
- * The LIBRARY FENCE: `--glass-grain-opacity` (0.025/0.045) is BYTE-UNTOUCHED — the
- * calm glass identity stands; paper is loud, glass is a whisper. That separation
- * IS the design.
- */
-
-/* The ONE coarse-tooth texture — DRY single source, both utilities resolve it.
-   Painted onto a rect at full alpha (`feFuncA slope=0 intercept=1`); the
-   mix-blend-mode carries the visibility. sRGB-pinned, deterministic seed. */
-:root {
-    --paper-grain-tooth: url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
-    --paper-grain-tile: 140px;
-}
-
-@utility paper-underpaint {
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    pointer-events: none;
-    background-image: var(--paper-grain-tooth);
-    background-repeat: repeat;
-    background-size: var(--paper-grain-tile) var(--paper-grain-tile);
-    opacity: var(--paper-grain-opacity, var(--glass-grain-opacity));
-    /* LIGHT: ink sinks into the cream → multiply darkens the valleys. */
-    mix-blend-mode: multiply;
-}
-
-:where(.dark) .paper-underpaint,
-.dark .paper-underpaint {
-    /* DARK: fiber catches light off the ink → screen lifts (NOT soft-light, which
-       collapses to identity on the near-black pole — the self-cancelling defect). */
-    mix-blend-mode: screen;
-}
-
-@utility paper-grain-overlay {
-    position: relative;
-    isolation: isolate;
-
-    &::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        pointer-events: none;
-        background-image: var(--paper-grain-tooth);
-        background-repeat: repeat;
-        background-size: var(--paper-grain-tile) var(--paper-grain-tile);
-        opacity: var(--paper-grain-opacity, var(--glass-grain-opacity));
-        /* LIGHT tooth: multiply — the physically-true ink-into-pits darken (NOT
-           overlay, which is identity on the L≈0.98 cream pole). */
-        mix-blend-mode: multiply;
-    }
-}
-
-:where(.dark) .paper-grain-overlay::after,
-.dark .paper-grain-overlay::after {
-    /* DARK tooth: screen — fiber catches light off the ink (NOT soft-light). */
-    mix-blend-mode: screen;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════
-   BD.W-PAGE-FIELD / BD.W-GLASS-FIELD — the WARM COLORFUL FIELD register
-   ───────────────────────────────────────────────────────────────────────
-   The single highest-leverage piece: it turns the gray storybook WARM. A
-   per-route four-layer technicolor CEL (amber key → terracotta mid → sand
-   bounce + a warm over-glaze toward the --glass-key corner) PLUS a wide
-   low-chroma BASE WASH that raises the floor everywhere, painted at FIELD
-   lightness (L 0.90-0.93 light / 0.28-0.34 dark — where the gamut admits
-   REAL chroma, NOT the gamut-bound L0.98 plate) OVER the decoupled
-   --neutral-0 floor (KEEP-NEUTRAL, untouched, never deleted).
-
-   ONE primitive, TWO acceptance floors (glass-floor ~0.012 composite-behind-
-   glass + field-floor 0.045 ground). The library glass material is BYTE-
-   UNTOUCHED — it finally has a backdrop worthy of it.
-
-   THE WARM-BOUND IS A PAINT INVARIANT: --field-h clamps the route's
-   --field-h-raw to [25,95] IN THE CSS calc, so an inline raw:210 CANNOT
-   paint teal/navy. The teal/navy purge is enforced at the paint layer.
-
-   OPT-IN: the warm stops only render under `[data-paper-field]` (the demo
-   chassis sets it per glass route) — the calm neutral underpaint stays the
-   default for solid-chrome routes; --neutral-0 stays decoupled + calm.
-
-   CROSS-ENGINE: pure compositor CSS — radial/conic-gradient + oklch() +
-   transform only. NO backdrop-filter:url, NO SVG goo, NO trig. oklch ≥ Safari
-   15.4, @property ≥ 16.4, gradients/transform forever. The WebKit premultiply-
-   toward-black desaturation hole is dodged: every warm 0-alpha stop is an
-   explicit `oklch(L C H / 0)` warm color, NEVER bare `transparent`.
-   ═══════════════════════════════════════════════════════════════════════ */
-
-/* The warm-bound: clamp the route's raw hue request to [25,95]. A DISTINCT
-   var (NOT self-referential `--field-h: max(var(--field-h),…)` which is a
-   no-op) — the route writes --field-h-raw, the field resolves --field-h.
-   Set on the field element itself so the clamp resolves even when the chassis
-   writes --field-h-raw on an ancestor. */
-.paper-field {
-    --field-h: clamp(25, var(--field-h-raw, 62), 95);
-}
-
-/* The warm-cel GROUND — a dedicated fixed plane the chassis mounts UNDER the
-   grain (the grain `.paper-underpaint` rides on top at its 0.22 multiply
-   opacity; the field paints true at full opacity / normal blend, so the grain
-   does NOT crush the pigment). ONE <PaperBackdrop field> component emits both,
-   stacked — one backdrop mount, grain on top, warm field below. */
-.paper-field {
-    position: fixed;
-    inset: 0;
-    /* one step BELOW the grain underpaint (the chassis mounts the grain at
-       -z-10) so the grain rides ON TOP of the warm field — one backdrop, two
-       stacked planes. Still above the page floor (content is z 0+). */
-    z-index: -11;
-    pointer-events: none;
-    /* L4 warm over-glaze — a faint cel sheen brightest toward the upper-right
-       --glass-key corner (cel coherence: field + glass rim/cast share ONE key).
-       --glass-key is a KEYWORD (upper-right), so the glaze is positioned by a
-       fixed `at`/`from` matching it — NEVER a `-58deg`/keyword-as-angle bug. */
-    background:
-        conic-gradient(
-            from -45deg at 78% 22%,
-            oklch(0.96 0.05 calc(var(--field-h) + 6) / calc(0.30 * var(--field-intensity))),
-            oklch(0.96 0.05 calc(var(--field-h) + 6) / 0) 28%,
-            oklch(0.96 0.05 calc(var(--field-h) + 6) / 0) 72%,
-            oklch(0.96 0.05 calc(var(--field-h) + 6) / calc(0.18 * var(--field-intensity)))
-        ),
-        /* the wide warm BASE WASH — raises the floor EVERYWHERE (no flat gap). */
-        radial-gradient(
-            120% 100% at 50% 50%,
-            oklch(0.91 0.075 calc(var(--field-h) + 8) / calc(0.50 * var(--field-intensity))),
-            oklch(0.91 0.075 calc(var(--field-h) + 8) / 0) 100%
-        ),
-        /* L3 sand fill-light bounce (bottom-right). */
-        radial-gradient(
-            95% 80% at 80% 88%,
-            oklch(0.88 0.115 calc(var(--field-h) + 30) / calc(0.90 * var(--field-intensity))),
-            oklch(0.88 0.115 calc(var(--field-h) + 30) / 0) 70%
-        ),
-        /* L2 terracotta saturated mid (right band, where the cards sit). */
-        radial-gradient(
-            95% 78% at 78% 30%,
-            oklch(0.85 0.145 calc(var(--field-h) - 24) / calc(0.90 * var(--field-intensity))),
-            oklch(0.85 0.145 calc(var(--field-h) - 24) / 0) 72%
-        ),
-        /* L1 amber key mass (densest pigment, top-left toward the key-light). */
-        radial-gradient(
-            100% 84% at 24% 20%,
-            oklch(0.87 0.155 calc(var(--field-h)) / calc(0.95 * var(--field-intensity))),
-            oklch(0.87 0.155 calc(var(--field-h)) / 0) 75%
-        ),
-        var(--neutral-0); /* L0 the KEEP-NEUTRAL solid floor — decoupled. */
-}
-
-/* DARK: warm-LUMINOUS — lower L, KEEP chroma; NEVER gray-charcoal. Plain
-   ancestor `.dark .x` (a scoped :global(.dark) silently drops; this is a
-   non-scoped global stylesheet so a plain `.dark` ancestor is correct). */
-.dark .paper-field {
-    background:
-        conic-gradient(
-            from -45deg at 78% 22%,
-            oklch(0.42 0.05 calc(var(--field-h) + 6) / calc(0.30 * var(--field-intensity))),
-            oklch(0.42 0.05 calc(var(--field-h) + 6) / 0) 28%,
-            oklch(0.42 0.05 calc(var(--field-h) + 6) / 0) 72%,
-            oklch(0.42 0.05 calc(var(--field-h) + 6) / calc(0.18 * var(--field-intensity)))
-        ),
-        radial-gradient(
-            120% 100% at 50% 50%,
-            oklch(0.30 0.055 calc(var(--field-h) + 8) / calc(0.50 * var(--field-intensity))),
-            oklch(0.30 0.055 calc(var(--field-h) + 8) / 0) 100%
-        ),
-        radial-gradient(
-            95% 80% at 80% 88%,
-            oklch(0.34 0.085 calc(var(--field-h) + 30) / calc(0.90 * var(--field-intensity))),
-            oklch(0.34 0.085 calc(var(--field-h) + 30) / 0) 70%
-        ),
-        radial-gradient(
-            95% 78% at 78% 30%,
-            oklch(0.33 0.10 calc(var(--field-h) - 24) / calc(0.90 * var(--field-intensity))),
-            oklch(0.33 0.10 calc(var(--field-h) - 24) / 0) 72%
-        ),
-        radial-gradient(
-            100% 84% at 24% 20%,
-            oklch(0.36 0.11 calc(var(--field-h)) / calc(0.95 * var(--field-intensity))),
-            oklch(0.36 0.11 calc(var(--field-h)) / 0) 75%
-        ),
-        var(--neutral-0);
-}
-
-/* The CARTOON DRIFT — liquid-weight on the ground: anticipation (pull-back) →
-   arc sweep (translate + rotate on ONE curve) → follow-through overshoot, baked
-   by --ease-cartoon-punch (DEPEND on BD.W-CARTOON-PUNCH, no literal-cubic dup).
-   Rides a `::before` copy of the bg (the field plane has a FREE ::before, no
-   collision with the grain). The warm stops survive PRM; only the drift
-   freezes. */
-.paper-field::before {
-    content: "";
-    position: absolute;
-    inset: -28%;
-    background: inherit;
-    opacity: 0.72;
-    pointer-events: none;
-    animation: field-cel-drift 42s
-        var(--ease-cartoon-punch, cubic-bezier(0.5, -0.2, 0.4, 1.2)) infinite
-        alternate;
-    will-change: transform;
-    content-visibility: auto;
-}
-
-@keyframes field-cel-drift {
-    /* independent translate:/scale:/rotate: LONGHANDS — a `transform: scale()`
-       shorthand would clobber the translate centering (build-trap e). */
-    from {
-        translate: -1.5% 1%;
-        scale: 1;
-        rotate: -1.2deg;
-    }
-    to {
-        translate: 2.5% -2.5%;
-        scale: 1.07;
-        rotate: 2.4deg;
-    }
-}
-
-/* ═══════════════════════════════════════════════
-   A11y — respect user motion + transparency preferences
-   ═══════════════════════════════════════════════ */
-@media (prefers-reduced-motion: reduce) {
-    /* the drift freezes — the warm field STAYS (it is content, not motion). */
-    .paper-field::before {
-        animation: none;
-    }
-}
-
-@media (prefers-reduced-transparency: reduce) {
-    /* the warm stops drop to 0-alpha; the decoupled --neutral-0 floor shows
-       (the calm opaque legibility floor). The field is a transmissive
-       enhancement, NEVER a legibility dependency. */
-    .paper-field {
-        --field-intensity: 0;
-    }
-    .paper-underpaint,
-    .paper-grain-overlay::after {
-        opacity: 0;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .paper-underpaint {
-        /* Static noise is fine at rest; only kill animated grain shimmer if any.
-           The underpaint is currently a still texture, but guard future motion. */
-        animation: none !important;
-    }
-}
+:root { --paper-grain-tooth: repeating-linear-gradient( 28deg, oklch(0.9 0.045 84 / 0.5) 0, oklch(0.62 0.052 60 / 0.5) 1.4px, oklch(0.9 0.045 84 / 0.5) 2.8px ), repeating-linear-gradient( -64deg, oklch(0.88 0.04 82 / 0.38) 0, oklch(0.6 0.05 58 / 0.38) 1.75px, oklch(0.88 0.04 82 / 0.38) 3.5px ), repeating-linear-gradient( 10deg, oklch(0.85 0.05 78 / 0.28) 0, oklch(0.7 0.055 66 / 0.28) 3.5px, oklch(0.85 0.05 78 / 0.28) 7px ); --paper-grain-tile: 140px; --paper-grain-relief: none; } @supports (backdrop-filter: blur(1px)) { :root { --paper-grain-relief: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0.31 0.96'/%3E%3CfeFuncG type='table' tableValues='0.25 0.9'/%3E%3CfeFuncB type='table' tableValues='0.15 0.78'/%3E%3CfeFuncA type='linear' slope='0.42' intercept='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); } } @utility paper-underpaint { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--paper-grain-relief), var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile) var(--paper-grain-tile); opacity: var(--paper-grain-opacity, var(--glass-grain-opacity)); mix-blend-mode: multiply; } :where(.dark) .paper-underpaint, .dark .paper-underpaint { mix-blend-mode: screen; } @utility paper-grain-overlay { position: relative; isolation: isolate; &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--paper-grain-relief), var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile) var(--paper-grain-tile); opacity: var(--paper-grain-opacity, var(--glass-grain-opacity)); mix-blend-mode: multiply; } } :where(.dark) .paper-grain-overlay::after, .dark .paper-grain-overlay::after { mix-blend-mode: screen; } @media (prefers-reduced-transparency: reduce) { .paper-underpaint, .paper-grain-overlay::after { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .paper-underpaint { animation: none !important; } }