@bysages/tokens 0.1.1 → 0.2.0

package/dist/css/index.css

@@ -139,6 +139,9 @@
        light. Warm paper whites throughout — pure #ffffff never appears, it
        would read clinical against the ink. */
     --bs-color-surface-0: var(--bs-color-gray-50);
+    /* The page paper itself — the alias floating bodies read, mirroring
+       --bs-color-surface-inverse below. */
+    --bs-color-surface: var(--bs-color-surface-0);
     --bs-color-surface-1: var(--bs-color-gray-25);
     --bs-color-surface-2: oklch(0.988 0.004 95);
     --bs-color-surface-3: oklch(0.988 0.004 95);
@@ -168,11 +171,16 @@
     --bs-color-border: var(--bs-color-gray-200);
     --bs-color-border-strong: var(--bs-color-gray-300);
 
-    /* Focus is a halo of light: a crisp inner line inside a soft, wide glow.
-       The inset variant serves parts flush against a container edge (steppers),
-       where an outer halo would spill past it. */
+    /* Focus is a halo of light: a crisp inner line inside a soft, wide
+       glow. Every default scene carries it, text inputs included. The
+       inset variant serves parts flush against a container edge, where
+       an outer halo would spill past it. */
     --bs-color-focus: var(--bs-color-primary);
-    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 16%, transparent);
+    /* The hairline a focused control wears. A scene that borrows another
+       system's focus language re-points it — Fluent keeps the edge neutral
+       and lets the underline speak. */
+    --bs-focus-edge: var(--bs-color-primary);
+    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 20%, transparent);
     --bs-focus-ring-width: 8px;
     --bs-focus-ring:
       0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
@@ -291,6 +299,9 @@
 
     /* Lacquer surfaces: warm black at every step, never pure #000. */
     --bs-color-surface-0: oklch(0.165 0.008 75);
+    /* The page paper itself — the alias floating bodies read, mirroring
+       --bs-color-surface-inverse below. */
+    --bs-color-surface: var(--bs-color-surface-0);
     --bs-color-surface-1: oklch(0.205 0.009 75);
     --bs-color-surface-2: oklch(0.245 0.01 76);
     --bs-color-surface-3: oklch(0.272 0.01 76);
@@ -323,7 +334,8 @@
 
     /* The halo reads brighter at night, like any light source does. */
     --bs-color-focus: var(--bs-color-primary);
-    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 22%, transparent);
+    --bs-focus-edge: var(--bs-color-primary);
+    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 26%, transparent);
     --bs-focus-ring-width: 8px;
     --bs-focus-ring:
       0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
@@ -527,16 +539,19 @@
   /* Typography — two tracks: the voice and the chrome. The voice is the song
      stack (upright, structured strokes — Noto Serif SC falling back through the
      platform faces); headings and editorial narrative ride it, the way Western
-     systems let a serif carry voice. The chrome is the modern hei stack — MiSans
-     and HarmonyOS Sans lead, falling back into PingFang / YaHei so mixed CJK-Latin lines stay
-     on one rhythm. Sizes are fixed rem values outside the density scale; compact
-     UI may choose --bs-font-size-sm but never below it. */
+     systems let a serif carry voice. The chrome is the modern hei stack: the
+     platform UI faces lead so Latin letters and figures hold one rhythm with the
+     CJK around them — a Chinese face reaching Latin first drops its digits onto
+     a taller, heavier cut, and the line reads out of true. The CJK set falls in
+     behind — MiSans and HarmonyOS Sans into PingFang / YaHei. Sizes are fixed
+     rem values outside the density scale; compact UI may choose
+     --bs-font-size-sm but never below it. */
 
   :root,
   :host {
     --bs-font-sans:
-      MiSans, "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system,
-      "Segoe UI", Roboto, "Noto Sans CJK SC", sans-serif;
+      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, MiSans, "HarmonyOS Sans SC",
+      "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
     --bs-font-serif:
       "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, "Times New Roman", Georgia, serif;
     --bs-font-mono:
@@ -672,15 +687,18 @@
 
      A scene moves only what the paper allows: shape (radius), density, motion
      pace and its curves, where the key light stands and how far it reaches,
-     and how the press wash spreads — never interaction, never the semantic
-     pigments. A style scene may also retint the paper itself (the surface
-     ladder, light and dark) where the borrowed register demands its own
-     stock, and let the type follow the register's voice — the one font move
-     allowed is the platform's own stack, which is what the register would
-     speak in anyway. Each scene pairs with a default accent and (for civic) the
-     high-contrast tier; those pairings are applied by the theme engine as
-     plain data attributes, so the accent and contrast rules — including
-     their dark variants — carry them unchanged.
+     and how the press wash spreads. A style scene follows the register it
+     borrows whole — so it may also re-point the focus tokens, speaking
+     focus in the register's own dialect instead of the house halo — and it
+     may retint the paper itself (the surface ladder, light and dark) where
+     the borrowed register demands its own stock, and let the type follow
+     the register's voice — the one font move allowed is the platform's own
+     stack, which is what the register would speak in anyway. No scene
+     touches interaction logic or the semantic pigments. Each scene pairs
+     with a default accent and (for civic) the high-contrast tier; those
+     pairings are applied by the theme engine as plain data attributes, so
+     the accent and contrast rules — including their dark variants — carry
+     them unchanged.
 
      Explicit attributes always outrank the scene's bundled defaults: a
      `[data-accent]`, `[data-contrast]`, or `[data-density]` set alongside
@@ -765,8 +783,8 @@
      honestly reach. */
 
   [data-scene="cupertino"] {
-    /* 圆融 — the soft airy register of handheld design: the capsule is the
-       action signal (every pressable thing rounds full), vessels round out
+    /* 圆融 — the soft airy register of handheld design: the capsule is
+       the action signal (every pressable thing rounds full), vessels round out
        dramatically, targets grow to the 44px touch ladder, and motion
        glides on the long sheet-spring curve. The interface stays light and
        airy — separation reads as gentle diffuse depth, not cast shadow,
@@ -787,10 +805,13 @@
     --bs-light-y: 0px;
     --bs-light-reach: 0.8;
     --bs-ripple-opacity: 0;
+    /* Focus speaks the platform dialect: a crisp 2px accent outline
+       pulled inside the control's edge — no halo. */
+    --bs-focus-ring: inset 0 0 0 2px var(--bs-color-focus);
+    --bs-focus-ring-inset: inset 0 0 0 2px var(--bs-color-focus);
     /* The handheld register speaks in the system voice: headlines stand
-       down from the serif — everything rides the sans stack, whose
-       platform faces are SF Pro and PingFang — and labels lose their
-       brush tracking. */
+       down from the serif — everything rides the sans stack — and labels
+       lose their brush tracking. */
     --bs-font-serif: var(--bs-font-sans);
     --bs-tracking-label: 0em;
   }
@@ -821,21 +842,30 @@
   }
 
   [data-scene="expressive"] {
-    /* 飞白 — the motion-forward register: the dry brush that races ahead of
-       the ink. Generous rounding, a quick pace, and curves that overshoot
+    /* 飞白 — the motion-forward register, the dry brush that races ahead
+       of the ink. Generous rounding, a quick pace, and curves that overshoot
        on the spring — the interface answers like an instrument, not a
-       form — under a warm key light from above. */
+       form — under a warm key light from above. Focus speaks the
+       register's dialect: the solid pigment outline. */
     --bs-radius-sm: 0.375rem;
     --bs-radius-md: 0.5rem;
     --bs-radius-lg: 0.75rem;
     --bs-radius-xl: 1rem;
     --bs-radius-2xl: 1.5rem;
+    /* Every press is a pill in the expressive register, on the 32/40/48
+       container ladder. */
+    --bs-radius-control: var(--bs-radius-full);
+    --bs-control-height-sm: 2rem;
+    --bs-control-height-md: 2.5rem;
+    --bs-control-height-lg: 3rem;
     --bs-motion-scale: 0.8;
     --bs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
     --bs-ease-spring: cubic-bezier(0.34, 1.56, 0.5, 1);
     --bs-light-x: 0.1875rem;
     --bs-light-y: 0.1875rem;
     --bs-light-reach: 1;
+    --bs-focus-ring: 0 0 0 3px var(--bs-color-focus);
+    --bs-focus-ring-inset: inset 0 0 0 3px var(--bs-color-focus);
   }
 
   [data-scene="fluent"] {
@@ -862,12 +892,16 @@
     --bs-light-y: 0.125rem;
     --bs-light-reach: 0.7;
     --bs-ripple-opacity: 0;
+    /* Focus speaks the register's dialect: the edge stays neutral while a
+       2px brand underline carries the state — structure, not glow. */
+    --bs-focus-edge: var(--bs-color-border);
+    --bs-focus-ring: inset 0 -2px 0 0 var(--bs-color-focus);
+    --bs-focus-ring-inset: inset 0 -2px 0 0 var(--bs-color-focus);
   }
 
-  /* The Fluent layers: light sits on the calm #f3f3f3 ground with layered
-     whites rising above it; dark climbs #202020 → #272727 → #323232, the
-     window/card/flyout ladder. Chroma zero — this register keeps no
-     pigment in its paper. */
+  /* The layers: light sits on the calm gray ground with layered whites
+     rising above it; dark climbs through three gray steps. Chroma zero —
+     this register keeps no pigment in its paper. */
   [data-scene="fluent"][data-theme="light"],
   [data-scene="fluent"]:not([data-theme]) {
     --bs-color-surface-0: oklch(0.956 0 0);
@@ -888,10 +922,10 @@
   }
 
   [data-scene="material"] {
-    /* 格物 — the elevation-led register, 格物致知: the M3 shape ladder,
-       token for token — 4px small, 8px medium, 12px medium-large vessels,
-       16px large, 28px extra-large — with pill presses on M3's container
-       ladder (32 / 40 / 48, the touch minimum the register is built
+    /* 格物 — the elevation-led register, 格物致知: the shape ladder of
+       4px small, 8px medium, 12px medium-large vessels, 16px large,
+       28px extra-large — with pill presses on the 32 / 40 / 48 container
+       ladder (the touch minimum the register is built
        around), the emphasized curves, and the signature that gives the
        look its name: the key light stands directly overhead, so every
        raised surface casts a soft shadow straight down a tall ladder.
@@ -912,6 +946,10 @@
     --bs-light-x: 0px;
     --bs-light-y: 0.125rem;
     --bs-light-reach: 1.5;
+    /* Focus speaks the register's dialect: a solid pigment outline riding
+       just outside the part — no glow. */
+    --bs-focus-ring: 0 0 0 3px var(--bs-color-focus);
+    --bs-focus-ring-inset: inset 0 0 0 3px var(--bs-color-focus);
     --bs-ripple-pigment: var(--bs-color-text-primary);
     --bs-ripple-opacity: 0.12;
     --bs-ripple-core: 97%;
@@ -922,7 +960,7 @@
     --bs-ripple-spread: 0.8;
   }
 
-  /* The M3 surface: neutral, tinted faintly violet instead of the house's
+  /* The surface: neutral, tinted faintly violet instead of the house's
      warm paper — the elevation-led register reads against cooler ground. */
   [data-scene="material"][data-theme="light"],
   [data-scene="material"]:not([data-theme]) {
@@ -1111,7 +1149,7 @@
 
   /* Contrast tier — softness comes from light and shadow, never from low contrast: the aesthetic softens through
      light, never through gray-on-gray. The high tier pulls secondary text and
-     borders up to primary strength and widens the focus halo; it exists so
+     borders up to primary strength and deepens the focus halo; it exists so
      older and low-vision users get the same design, just louder. Surface
      steps stay untouched — rows signal hover by one step of shade, and
      flattening the ladder would silence every hover in the system. */
@@ -1121,7 +1159,7 @@
     --bs-color-text-secondary: var(--bs-color-text-primary);
     --bs-color-text-tertiary: var(--bs-color-text-secondary);
     --bs-color-border: var(--bs-color-border-strong);
-    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 30%, transparent);
+    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 34%, transparent);
   }
 
   [data-theme="light"][data-contrast="high"],

package/dist/js/styles.mjs

@@ -1,2 +1,2 @@
 /** Stylesheet for the full token layer, generated from dist/css/index.css. */
-export default "@layer bs.tokens;\n\n@layer bs.tokens {\n  /**\n   * Do not edit directly, this file was auto-generated.\n   */\n\n  :root, :host {\n    --bs-color-gray-25: oklch(0.985 0.003 92);\n    --bs-color-gray-50: oklch(0.968 0.005 90);\n    --bs-color-gray-100: oklch(0.928 0.007 88);\n    --bs-color-gray-200: oklch(0.872 0.009 86);\n    --bs-color-gray-300: oklch(0.795 0.011 84);\n    --bs-color-gray-400: oklch(0.665 0.013 82);\n    --bs-color-gray-500: oklch(0.568 0.014 80);\n    --bs-color-gray-600: oklch(0.482 0.014 78);\n    --bs-color-gray-700: oklch(0.405 0.013 76);\n    --bs-color-gray-800: oklch(0.318 0.011 76);\n    --bs-color-gray-850: oklch(0.272 0.01 76);\n    --bs-color-gray-900: oklch(0.23 0.009 76);\n    --bs-color-gray-925: oklch(0.188 0.008 76);\n    --bs-color-gray-950: oklch(0.15 0.007 76);\n    --bs-color-gray-975: oklch(0.118 0.006 76);\n    --bs-color-brand-50: oklch(0.962 0.014 255);\n    --bs-color-brand-100: oklch(0.93 0.031 255);\n    --bs-color-brand-200: oklch(0.885 0.056 255);\n    --bs-color-brand-300: oklch(0.815 0.09 255);\n    --bs-color-brand-400: oklch(0.72 0.122 255);\n    --bs-color-brand-500: oklch(0.6 0.15 255);\n    --bs-color-brand-600: oklch(0.53 0.155 255);\n    --bs-color-brand-700: oklch(0.46 0.15 255);\n    --bs-color-brand-800: oklch(0.395 0.13 255);\n    --bs-color-brand-900: oklch(0.33 0.105 255);\n    --bs-color-brand-950: oklch(0.26 0.08 255);\n    --bs-color-celadon-50: oklch(0.962 0.014 205);\n    --bs-color-celadon-100: oklch(0.928 0.028 205);\n    --bs-color-celadon-200: oklch(0.88 0.05 205);\n    --bs-color-celadon-300: oklch(0.81 0.072 205);\n    --bs-color-celadon-400: oklch(0.715 0.082 205);\n    --bs-color-celadon-500: oklch(0.63 0.085 205);\n    --bs-color-celadon-600: oklch(0.56 0.085 205);\n    --bs-color-celadon-700: oklch(0.485 0.08 205);\n    --bs-color-celadon-800: oklch(0.41 0.068 205);\n    --bs-color-celadon-900: oklch(0.34 0.054 205);\n    --bs-color-celadon-950: oklch(0.265 0.04 205);\n    --bs-color-zhusha-50: oklch(0.964 0.016 28);\n    --bs-color-zhusha-100: oklch(0.926 0.036 28);\n    --bs-color-zhusha-200: oklch(0.874 0.066 28);\n    --bs-color-zhusha-300: oklch(0.806 0.098 28);\n    --bs-color-zhusha-400: oklch(0.716 0.13 28);\n    --bs-color-zhusha-500: oklch(0.625 0.15 28);\n    --bs-color-zhusha-600: oklch(0.55 0.16 28);\n    --bs-color-zhusha-700: oklch(0.472 0.148 28);\n    --bs-color-zhusha-800: oklch(0.398 0.125 28);\n    --bs-color-zhusha-900: oklch(0.328 0.098 28);\n    --bs-color-zhusha-950: oklch(0.254 0.072 28);\n    --bs-color-success-50: oklch(0.962 0.024 155);\n    --bs-color-success-100: oklch(0.922 0.048 155);\n    --bs-color-success-200: oklch(0.868 0.082 155);\n    --bs-color-success-300: oklch(0.794 0.108 155);\n    --bs-color-success-400: oklch(0.71 0.122 155);\n    --bs-color-success-500: oklch(0.6 0.112 155);\n    --bs-color-success-600: oklch(0.52 0.1 155);\n    --bs-color-success-700: oklch(0.445 0.088 155);\n    --bs-color-success-800: oklch(0.375 0.072 155);\n    --bs-color-success-900: oklch(0.31 0.056 155);\n    --bs-color-success-950: oklch(0.24 0.04 155);\n    --bs-color-warning-50: oklch(0.968 0.028 78);\n    --bs-color-warning-100: oklch(0.934 0.056 74);\n    --bs-color-warning-200: oklch(0.892 0.086 70);\n    --bs-color-warning-300: oklch(0.836 0.112 67);\n    --bs-color-warning-400: oklch(0.76 0.126 66);\n    --bs-color-warning-500: oklch(0.665 0.125 65);\n    --bs-color-warning-600: oklch(0.55 0.122 65);\n    --bs-color-warning-700: oklch(0.495 0.11 63);\n    --bs-color-warning-800: oklch(0.415 0.092 62);\n    --bs-color-warning-900: oklch(0.34 0.074 62);\n    --bs-color-warning-950: oklch(0.262 0.054 62);\n    --bs-color-danger-50: oklch(0.964 0.018 25);\n    --bs-color-danger-100: oklch(0.924 0.04 25);\n    --bs-color-danger-200: oklch(0.87 0.07 25);\n    --bs-color-danger-300: oklch(0.798 0.106 25);\n    --bs-color-danger-400: oklch(0.712 0.138 25);\n    --bs-color-danger-500: oklch(0.6 0.15 25);\n    --bs-color-danger-600: oklch(0.51 0.15 25);\n    --bs-color-danger-700: oklch(0.44 0.135 25);\n    --bs-color-danger-800: oklch(0.372 0.112 25);\n    --bs-color-danger-900: oklch(0.306 0.088 25);\n    --bs-color-danger-950: oklch(0.236 0.064 25);\n    --bs-color-info-50: oklch(0.962 0.014 250);\n    --bs-color-info-100: oklch(0.924 0.03 250);\n    --bs-color-info-200: oklch(0.872 0.054 250);\n    --bs-color-info-300: oklch(0.802 0.082 250);\n    --bs-color-info-400: oklch(0.718 0.11 250);\n    --bs-color-info-500: oklch(0.6 0.125 250);\n    --bs-color-info-600: oklch(0.505 0.125 250);\n    --bs-color-info-700: oklch(0.432 0.112 250);\n    --bs-color-info-800: oklch(0.364 0.092 250);\n    --bs-color-info-900: oklch(0.3 0.072 250);\n    --bs-color-info-950: oklch(0.232 0.052 250);\n    --bs-space-1: 0.25rem;\n    --bs-space-2: 0.5rem;\n    --bs-space-3: 0.75rem;\n    --bs-space-4: 1rem;\n    --bs-space-5: 1.25rem;\n    --bs-space-6: 1.5rem;\n    --bs-space-7: 1.75rem;\n    --bs-space-8: 2rem;\n    --bs-space-10: 2.5rem;\n    --bs-space-12: 3rem;\n    --bs-space-16: 4rem;\n    --bs-space-20: 5rem;\n    --bs-space-24: 6rem;\n    --bs-radius-none: 0rem;\n    --bs-radius-xs: 0.25rem;\n    --bs-radius-sm: 0.375rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.5rem;\n    --bs-radius-full: 9999px;\n  }\n\n\n  /* Light theme — light as shadow, the paper-and-ink register: hierarchy reads through\n     the paper ladder (the ground sits in ambient shade, raised surfaces catch\n     the light), hairline borders, and restrained cast shadows in warm ink.\n     Controls stay crisp — a paper-white surface, one hairline, and shadow-xs.\n     Primary defaults to ink so the interface stays monochrome and solemn; the\n     pigment accents (qinghua, celadon, zhusha) live in accent.css. */\n\n  :root,\n  :host,\n  [data-theme=\"light\"],\n  :host([data-theme=\"light\"]) {\n    color-scheme: light;\n\n    /* Surfaces: the ground rests in ambient shade; raised surfaces catch the\n       light. Warm paper whites throughout — pure #ffffff never appears, it\n       would read clinical against the ink. */\n    --bs-color-surface-0: var(--bs-color-gray-50);\n    --bs-color-surface-1: var(--bs-color-gray-25);\n    --bs-color-surface-2: oklch(0.988 0.004 95);\n    --bs-color-surface-3: oklch(0.988 0.004 95);\n    --bs-color-surface-4: oklch(0.988 0.004 95);\n    --bs-color-surface-5: oklch(0.988 0.004 95);\n    --bs-color-surface-inset: var(--bs-color-gray-100);\n    /* The inverted surface — ink on paper — hosts floating labels like\n       tooltips that must read against the page, never blend into it. */\n    --bs-color-surface-inverse: var(--bs-color-gray-800);\n    --bs-color-scrim: oklch(0.15 0.007 76 / 0.4);\n\n    --bs-color-text-primary: var(--bs-color-gray-900);\n    --bs-color-text-secondary: var(--bs-color-gray-600);\n    --bs-color-text-tertiary: var(--bs-color-gray-500);\n    --bs-color-text-disabled: var(--bs-color-gray-400);\n    --bs-color-text-inverse: var(--bs-color-surface-2);\n    /* Ink over the scrim — the dimmed room behind dialogs and lightboxes.\n       The scrim never lightens with the theme, so neither may the ink on\n       it: this stays paper-bright in both registers, unlike the mirror\n       ink above, which answers the page it floats over. */\n    --bs-color-text-on-scrim: var(--bs-color-surface-2);\n    /* Ink on a solid pigment fill: paper under daylight, kneaded bright\n       under lacquer night (see the dark theme). */\n    --bs-color-ink-on-fill: var(--bs-color-surface-2);\n    --bs-ink-knead: 0%;\n\n    --bs-color-border: var(--bs-color-gray-200);\n    --bs-color-border-strong: var(--bs-color-gray-300);\n\n    /* Focus is a halo of light: a crisp inner line inside a soft, wide glow.\n       The inset variant serves parts flush against a container edge (steppers),\n       where an outer halo would spill past it. */\n    --bs-color-focus: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 16%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary is ink by default — solemn, unhurried, industry-neutral. The\n       hover deepens the ink into the paper; the pigment accents override the\n       whole block (see accent.css). */\n    --bs-color-primary: var(--bs-color-gray-800);\n    --bs-color-primary-hover: var(--bs-color-gray-900);\n    --bs-color-primary-active: var(--bs-color-gray-925);\n    --bs-color-primary-text: var(--bs-color-surface-2);\n    /* The solid-fill body: pigments rest at full strength on paper — night\n       kneads them (see the dark theme), daylight does not. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: var(--bs-color-gray-100);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-800);\n    --bs-color-primary-border: var(--bs-color-gray-300);\n\n    /* Fixed semantic pigments — bamboo, ochre, cinnabar, ultramarine. They do\n       not follow the accent theme: an error is always cinnabar-red, a warning\n       always ochre, whatever pigment the brand rides. */\n    --bs-color-success: var(--bs-color-success-600);\n    --bs-color-success-hover: var(--bs-color-success-700);\n    --bs-color-success-subtle: var(--bs-color-success-100);\n    --bs-color-success-subtle-text: var(--bs-color-success-800);\n\n    --bs-color-warning: var(--bs-color-warning-600);\n    --bs-color-warning-hover: var(--bs-color-warning-700);\n    --bs-color-warning-subtle: var(--bs-color-warning-100);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-800);\n\n    --bs-color-danger: var(--bs-color-danger-600);\n    --bs-color-danger-hover: var(--bs-color-danger-700);\n    --bs-color-danger-subtle: var(--bs-color-danger-100);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-800);\n\n    --bs-color-info: var(--bs-color-info-600);\n    --bs-color-info-hover: var(--bs-color-info-700);\n    --bs-color-info-subtle: var(--bs-color-info-100);\n    --bs-color-info-subtle-text: var(--bs-color-info-800);\n\n    /* Lighting — elevation shadows are computed, never copy-pasted. Every\n       shadow draws its ink from --bs-shadow-ink, this theme's warm shadow hue,\n       shifts with --bs-light-x/-y (where the key light stands), and spreads\n       with --bs-light-reach (how high the surface floats). Custom properties\n       resolve their own var() references at the declaring element, so these\n       composite tokens always carry theme ink; a colored surface that casts in\n       its own color composes its shadow inline from these parts mixed with its\n       tint — see the dialog trigger. Restraint ladder: controls carry only\n       shadow-xs; cards rise on elevation-1/2; menus and popovers separate on\n       elevation-3; dialogs own elevation-4/5. */\n    --bs-shadow-ink: oklch(0.3 0.02 80);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    /* Weighted hairlines: the 1px edge everything rides, and the 3px\n       status edge an alert earns. */\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 5%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent);\n    --bs-elevation-2:\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 6%, transparent),\n      var(--bs-light-x) calc(3px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 9%, transparent);\n    --bs-elevation-3:\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent),\n      var(--bs-light-x) calc(5px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent);\n    --bs-elevation-4:\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(28px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent),\n      var(--bs-light-x) calc(28px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(56px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent);\n    --bs-elevation-5:\n      var(--bs-light-x) calc(6px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(16px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(40px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-16px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent);\n  }\n\n\n  /* Dark theme — lacquer night: the room dims into warm lacquer black,\n     and text turns to paper. Surfaces still brighten as they rise (e0 darkest\n     → e5 lightest) — at night the ladder of light, not the cast shadow, does\n     the separating. Primary inverts: paper-white buttons set ink on fire\n     gently against the dark. */\n\n  [data-theme=\"dark\"],\n  :host([data-theme=\"dark\"]) {\n    color-scheme: dark;\n\n    /* Lacquer surfaces: warm black at every step, never pure #000. */\n    --bs-color-surface-0: oklch(0.165 0.008 75);\n    --bs-color-surface-1: oklch(0.205 0.009 75);\n    --bs-color-surface-2: oklch(0.245 0.01 76);\n    --bs-color-surface-3: oklch(0.272 0.01 76);\n    --bs-color-surface-4: oklch(0.29 0.01 76);\n    --bs-color-surface-5: oklch(0.31 0.01 76);\n    --bs-color-surface-inset: oklch(0.135 0.007 75);\n    /* The inverted surface — paper on lacquer — hosts floating labels like\n       tooltips; at night the inversion reads as a slip of bright paper. */\n    --bs-color-surface-inverse: var(--bs-color-gray-100);\n    --bs-color-scrim: oklch(0.05 0.01 75 / 0.6);\n\n    --bs-color-text-primary: oklch(0.925 0.006 90);\n    --bs-color-text-secondary: var(--bs-color-gray-300);\n    --bs-color-text-tertiary: var(--bs-color-gray-400);\n    --bs-color-text-disabled: var(--bs-color-gray-500);\n    --bs-color-text-inverse: var(--bs-color-gray-900);\n    /* Ink over the scrim — the dimmed room behind dialogs and lightboxes.\n       The scrim never lightens with the theme, so neither may the ink on\n       it: this stays paper-bright in both registers, unlike the mirror\n       ink above, which answers the page it floats over. */\n    --bs-color-text-on-scrim: var(--bs-color-gray-100);\n    /* Ink on a solid pigment fill: pigments knead a fifth of ink into their\n       bodies at night (a mid-tone fill carries neither deep nor pale text\n       past 4.5:1), so the ink turns bright paper. */\n    --bs-color-ink-on-fill: var(--bs-color-gray-25);\n    --bs-ink-knead: 20%;\n\n    --bs-color-border: oklch(0.31 0.01 78);\n    --bs-color-border-strong: oklch(0.4 0.012 78);\n\n    /* The halo reads brighter at night, like any light source does. */\n    --bs-color-focus: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 22%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary inverts to paper — ink set down on lacquer. */\n    --bs-color-primary: oklch(0.93 0.007 90);\n    --bs-color-primary-hover: var(--bs-color-gray-200);\n    --bs-color-primary-active: var(--bs-color-gray-300);\n    --bs-color-primary-text: var(--bs-color-gray-900);\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 10%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-200);\n    --bs-color-primary-border: var(--bs-color-gray-700);\n\n    /* Semantic pigments lift to their lighter steps at night; the fixed hue\n       relationships (bamboo / ochre / cinnabar / ultramarine) never change. */\n    --bs-color-success: var(--bs-color-success-500);\n    --bs-color-success-hover: var(--bs-color-success-400);\n    --bs-color-success-subtle: color-mix(in oklab, var(--bs-color-success) 16%, transparent);\n    --bs-color-success-subtle-text: var(--bs-color-success-300);\n\n    --bs-color-warning: var(--bs-color-warning-500);\n    --bs-color-warning-hover: var(--bs-color-warning-400);\n    --bs-color-warning-subtle: color-mix(in oklab, var(--bs-color-warning) 16%, transparent);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-300);\n\n    --bs-color-danger: var(--bs-color-danger-500);\n    --bs-color-danger-hover: var(--bs-color-danger-400);\n    --bs-color-danger-subtle: color-mix(in oklab, var(--bs-color-danger) 16%, transparent);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-300);\n\n    --bs-color-info: var(--bs-color-info-500);\n    --bs-color-info-hover: var(--bs-color-info-400);\n    --bs-color-info-subtle: color-mix(in oklab, var(--bs-color-info) 16%, transparent);\n    --bs-color-info-subtle-text: var(--bs-color-info-300);\n\n    /* Elevation in the dark: cast shadows need far more opacity to read against\n       a dark ground, so every level carries a faint warm hairline of light to\n       cut the raised surface out of the one below it. Same lighting parts as\n       light — ink from --bs-shadow-ink, shifted by --bs-light-x/-y, spread by\n       --bs-light-reach; colored surfaces compose their tint inline. */\n    --bs-shadow-ink: oklch(0.04 0.01 75);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 35%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.04),\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 32%, transparent);\n    --bs-elevation-2:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.05),\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-1px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 36%, transparent);\n    --bs-elevation-3:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.06),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent);\n    --bs-elevation-4:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.07),\n      var(--bs-light-x) calc(8px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(16px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent),\n      var(--bs-light-x) calc(24px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(48px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent);\n    --bs-elevation-5:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.08),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 52%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent);\n  }\n\n\n  /* Accent themes — the pigments. Primary is ink by default (theme-light/dark);\n     switching [data-accent] lays a different mineral pigment under the same\n     interface: qinghua (cobalt, the blue of blue-and-white porcelain), celadon\n     (aquatic green-blue), zhusha (cinnabar, the seal-paste red used sparingly\n     by civic sites for identity — never for errors; danger stays cinnabar-red\n     by way of --bs-color-danger, a separate token). Each accent redefines the\n     primary block and the focus hue; the fixed semantic pigments never follow. */\n\n  [data-accent=\"qinghua\"] {\n    --bs-color-primary: var(--bs-color-brand-600);\n    --bs-color-primary-hover: var(--bs-color-brand-700);\n    --bs-color-primary-active: var(--bs-color-brand-800);\n    /* The fill derives here, not only on :root: custom properties resolve\n       var() at the declaring element, so a fill declared only on :root\n       freezes the ink default and never follows an accent that sits below\n       the root (ConfigProvider). */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-brand-100);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-800);\n    --bs-color-primary-border: var(--bs-color-brand-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"qinghua\"],\n  [data-theme=\"dark\"][data-accent=\"qinghua\"],\n  :host([data-theme=\"dark\"][data-accent=\"qinghua\"]) {\n    --bs-color-primary: var(--bs-color-brand-500);\n    --bs-color-primary-hover: var(--bs-color-brand-600);\n    --bs-color-primary-active: var(--bs-color-brand-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-brand-700);\n    --bs-color-primary-fill-hover: var(--bs-color-brand-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-300);\n    --bs-color-primary-border: var(--bs-color-brand-700);\n  }\n\n  [data-accent=\"celadon\"] {\n    --bs-color-primary: var(--bs-color-celadon-600);\n    --bs-color-primary-hover: var(--bs-color-celadon-700);\n    --bs-color-primary-active: var(--bs-color-celadon-800);\n    /* See qinghua: the fill must derive at the accent host, not the root. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-celadon-100);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-800);\n    --bs-color-primary-border: var(--bs-color-celadon-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"celadon\"],\n  [data-theme=\"dark\"][data-accent=\"celadon\"],\n  :host([data-theme=\"dark\"][data-accent=\"celadon\"]) {\n    --bs-color-primary: var(--bs-color-celadon-500);\n    --bs-color-primary-hover: var(--bs-color-celadon-600);\n    --bs-color-primary-active: var(--bs-color-celadon-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-celadon-700);\n    --bs-color-primary-fill-hover: var(--bs-color-celadon-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-300);\n    --bs-color-primary-border: var(--bs-color-celadon-700);\n  }\n\n  [data-accent=\"zhusha\"] {\n    --bs-color-primary: var(--bs-color-zhusha-600);\n    --bs-color-primary-hover: var(--bs-color-zhusha-700);\n    --bs-color-primary-active: var(--bs-color-zhusha-800);\n    /* See qinghua: the fill must derive at the accent host, not the root. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-zhusha-100);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-800);\n    --bs-color-primary-border: var(--bs-color-zhusha-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"zhusha\"],\n  [data-theme=\"dark\"][data-accent=\"zhusha\"],\n  :host([data-theme=\"dark\"][data-accent=\"zhusha\"]) {\n    --bs-color-primary: var(--bs-color-zhusha-500);\n    --bs-color-primary-hover: var(--bs-color-zhusha-600);\n    --bs-color-primary-active: var(--bs-color-zhusha-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-zhusha-700);\n    --bs-color-primary-fill-hover: var(--bs-color-zhusha-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-300);\n    --bs-color-primary-border: var(--bs-color-zhusha-700);\n  }\n\n\n  /* Typography — two tracks: the voice and the chrome. The voice is the song\n     stack (upright, structured strokes — Noto Serif SC falling back through the\n     platform faces); headings and editorial narrative ride it, the way Western\n     systems let a serif carry voice. The chrome is the modern hei stack — MiSans\n     and HarmonyOS Sans lead, falling back into PingFang / YaHei so mixed CJK-Latin lines stay\n     on one rhythm. Sizes are fixed rem values outside the density scale; compact\n     UI may choose --bs-font-size-sm but never below it. */\n\n  :root,\n  :host {\n    --bs-font-sans:\n      MiSans, \"HarmonyOS Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", system-ui, -apple-system,\n      \"Segoe UI\", Roboto, \"Noto Sans CJK SC\", sans-serif;\n    --bs-font-serif:\n      \"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", SimSun, \"Times New Roman\", Georgia, serif;\n    --bs-font-mono:\n      ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", Consolas, \"PingFang SC\", \"Microsoft YaHei\",\n      monospace;\n\n    --bs-font-size-xs: 0.75rem;\n    --bs-font-size-sm: 0.8125rem;\n    --bs-font-size-md: 0.875rem;\n    --bs-font-size-base: 0.9375rem;\n    --bs-font-size-lg: 1.0625rem;\n    --bs-font-size-xl: 1.25rem;\n    --bs-font-size-2xl: 1.5rem;\n    --bs-font-size-3xl: 1.875rem;\n    --bs-font-size-4xl: 2.25rem;\n\n    --bs-line-height-tight: 1.25;\n    --bs-line-height-snug: 1.375;\n    --bs-line-height-normal: 1.5;\n    --bs-line-height-relaxed: 1.625;\n\n    /* Control labels carry a whisper of tracking — upright and unhurried is a\n       property of CJK typesetting, not of any single typeface. */\n    --bs-tracking-label: 0.02em;\n\n    --bs-font-weight-regular: 400;\n    --bs-font-weight-medium: 500;\n    --bs-font-weight-semibold: 600;\n    --bs-font-weight-bold: 700;\n  }\n\n\n  /* Motion — the ink-and-light grammar. Three rules and a floor:\n     Light needs time — shadows transition about 1.5x slower than the property\n     that raised them, so a shadow reads as cast light, not a sticker.\n     Ink bleeds — surfaces enter by fading AND dissolving (blur to sharp),\n     never popping. Puppets have strings — moving parts overshoot on the spring\n     curve, and lists follow one another with a small stagger.\n     Tokens drive all transitions; the reduced-motion block retunes them instead\n     of removing states, so opacity still communicates elevation changes. */\n\n  /* Defaults sit at zero specificity (:where): the motion sheet can appear\n     twice in the compiled bundle — once before and once after scene.css —\n     and a plain :root would tie [data-scene] on specificity and, in that\n     second copy, outrank it by file order, silencing every scene that\n     retunes the curves below. */\n  :where(:root),\n  :where(:host) {\n    /* Durations ride --bs-motion-scale so a scene preset can tune the pace\n       (a snappier instrument, an unhurried civic register) without touching\n       the reduced-motion floor below, which declares 1ms directly. */\n    --bs-duration-instant: calc(80ms * var(--bs-motion-scale, 1));\n    --bs-duration-fast: calc(140ms * var(--bs-motion-scale, 1));\n    --bs-duration-base: calc(200ms * var(--bs-motion-scale, 1));\n    --bs-duration-slow: calc(320ms * var(--bs-motion-scale, 1));\n\n    --bs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n    --bs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n    --bs-ease-in: cubic-bezier(0.7, 0, 0.84, 0);\n    --bs-ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);\n\n    /* Stagger step for lists and menus — each follower comes up 24ms after\n       the one before it, like puppets lifted in sequence. */\n    --bs-stagger-step: 24ms;\n\n    /* The press wash (ink-ripple) reads its pigment, reach, curve, and pace\n       from these, so a scene preset can retune the feedback — a smaller,\n       crisper wave in the flat content color for material, or silence for\n       registers that press without a wash — without touching the keyframes\n       in the core. The pigment is an opaque color and --bs-ripple-opacity\n       is the whole concentration — the two never double-deduct. */\n    --bs-ripple-pigment: var(--bs-color-primary);\n    --bs-ripple-opacity: 0.27;\n    --bs-ripple-core: 0%;\n    --bs-ripple-fade: 80%;\n    --bs-ripple-duration: calc(650ms * var(--bs-motion-scale, 1));\n    --bs-ripple-release: calc(320ms * var(--bs-motion-scale, 1));\n    --bs-ripple-ease: var(--bs-ease-out);\n    --bs-ripple-spread: 1;\n  }\n\n  /* Surfaces dissolve in like ink settling into paper: a fade, a soft focus\n     pulling sharp, and a one-percent settle. Panels and menus apply it on\n     their open state; exits stay plain opacity fades — faster, unobtrusive. */\n  @keyframes bs-ink-in {\n    from {\n      opacity: 0;\n      filter: blur(3px);\n      scale: 1.01;\n    }\n    to {\n      opacity: 1;\n      filter: blur(0);\n      scale: 1;\n    }\n  }\n\n  /* Followers rise into place on the string — a short lift with the spring\n     curve. Combine with per-item `animation-delay: calc(var(--bs-i) * var(--bs-stagger-step))`. */\n  @keyframes bs-item-in {\n    from {\n      opacity: 0;\n      translate: 0 4px;\n    }\n    to {\n      opacity: 1;\n      translate: 0 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :root,\n    :host {\n      --bs-duration-instant: 1ms;\n      --bs-duration-fast: 1ms;\n      --bs-duration-base: 1ms;\n      --bs-duration-slow: 1ms;\n      --bs-stagger-step: 0ms;\n    }\n  }\n\n\n  /* Scene presets — one attribute that retunes the temperament of the whole\n     interface. Two families share the same five levers: the audience scenes\n     serve a desk (civic for elders and civic desks, tech for modern\n     efficiency products, enterprise the quiet commercial baseline, studio\n     the literati gathering for design and editorial work), and the style\n     scenes borrow the temperament of the major design languages — named for\n     the open specs and the places their platforms are built, never the\n     companies: cupertino for the soft airy handheld register, expressive\n     for motion-forward spring, fluent for measured productivity depth,\n     material for the elevation-led android-era look.\n\n     A scene moves only what the paper allows: shape (radius), density, motion\n     pace and its curves, where the key light stands and how far it reaches,\n     and how the press wash spreads — never interaction, never the semantic\n     pigments. A style scene may also retint the paper itself (the surface\n     ladder, light and dark) where the borrowed register demands its own\n     stock, and let the type follow the register's voice — the one font move\n     allowed is the platform's own stack, which is what the register would\n     speak in anyway. Each scene pairs with a default accent and (for civic) the\n     high-contrast tier; those pairings are applied by the theme engine as\n     plain data attributes, so the accent and contrast rules — including\n     their dark variants — carry them unchanged.\n\n     Explicit attributes always outrank the scene's bundled defaults: a\n     `[data-accent]`, `[data-contrast]`, or `[data-density]` set alongside\n     `[data-scene]` wins by cascade order. Note `:root` ties `[data-scene]` in\n     specificity (both 0,1,0), so this file must sit after every stylesheet\n     that declares these variables on `:root` (themes, primitives via accent's\n     placement) and before density.css, whose explicit tiers must win over\n     scene defaults. */\n\n  [data-scene=\"civic\"] {\n    /* 典章 — for elders and civic desks: the square-cut register of official\n       documents. Corners go true square (a seal is not round), targets grow\n       to the spacious ladder (48px controls), the pace slows so states are\n       never missed, and the light stays flat so nothing hides in a shadow. */\n    --bs-radius-sm: 0rem;\n    --bs-radius-md: 0.125rem;\n    --bs-radius-lg: 0.25rem;\n    --bs-radius-xl: 0.375rem;\n    --bs-radius-2xl: 0.5rem;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n    --bs-density-scale: 1.5;\n    --bs-motion-scale: 1.25;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.7;\n  }\n\n  [data-scene=\"enterprise\"] {\n    /* 信笺 — the measured commercial baseline: default geometry at a calmer\n       light, so long working sessions read quiet and the hairlines do the\n       talking. */\n    --bs-density-scale: 1;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.85;\n  }\n\n  [data-scene=\"studio\"] {\n    /* 雅集 — the literati gathering for design and editorial work: controls\n       keep the 6px seal edge, vessels round out generously, whitespace\n       breathes, and the light comes from the upper left, casting each\n       element's shadow gently toward the lower right. */\n    --bs-radius-md: 0.625rem;\n    --bs-radius-lg: 0.875rem;\n    --bs-radius-xl: 1.25rem;\n    --bs-radius-2xl: 1.75rem;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n    --bs-density-scale: 1.25;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0.125rem;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 1.25;\n  }\n\n  [data-scene=\"tech\"] {\n    /* 司南 — the modern precision instrument: near-square corners, dense\n       rows, a snappy pace, and a flat restrained light where hairlines carry\n       all the hierarchy. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.25rem;\n    --bs-radius-lg: 0.5rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n    --bs-density-scale: 0.75;\n    --bs-motion-scale: 0.85;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.5;\n  }\n\n  /* The style scenes — five-lever homages, never clones: no frosted\n     materials, no imported fonts (a scene's voice goes only to the\n     platform's own stack), just the temperament a scene's levers can\n     honestly reach. */\n\n  [data-scene=\"cupertino\"] {\n    /* 圆融 — the soft airy register of handheld design: the capsule is the\n       action signal (every pressable thing rounds full), vessels round out\n       dramatically, targets grow to the 44px touch ladder, and motion\n       glides on the long sheet-spring curve. The interface stays light and\n       airy — separation reads as gentle diffuse depth, not cast shadow,\n       and presses answer through the fill change, never a wash. */\n    --bs-radius-md: 0.75rem;\n    --bs-radius-lg: 1.125rem;\n    --bs-radius-xl: 1.5rem;\n    --bs-radius-2xl: 2.25rem;\n    --bs-radius-control: var(--bs-radius-full);\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.75rem;\n    --bs-control-height-lg: 3.125rem;\n    --bs-density-scale: 1.25;\n    --bs-motion-scale: 1.1;\n    --bs-ease-out: cubic-bezier(0.32, 0.72, 0, 1);\n    --bs-ease-spring: cubic-bezier(0.34, 1.1, 0.64, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.8;\n    --bs-ripple-opacity: 0;\n    /* The handheld register speaks in the system voice: headlines stand\n       down from the serif — everything rides the sans stack, whose\n       platform faces are SF Pro and PingFang — and labels lose their\n       brush tracking. */\n    --bs-font-serif: var(--bs-font-sans);\n    --bs-tracking-label: 0em;\n  }\n\n  /* The borrowed papers. Four of the style scenes retint the surface\n     ladder toward the register they borrow from — cupertino's clean\n     handheld white, material's neutral violet-gray, sketch's warm\n     sketchbook stock — while the paper-and-ink scenes keep the house\n     stock. Custom properties on the root resolve per theme attribute, so\n     each paper carries a light and a dark face. */\n  [data-scene=\"cupertino\"][data-theme=\"light\"],\n  [data-scene=\"cupertino\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.973 0.001 265);\n    --bs-color-surface-1: oklch(0.981 0.001 265);\n    --bs-color-surface-2: oklch(0.992 0.001 265);\n    --bs-color-surface-3: oklch(0.992 0.001 265);\n    --bs-color-surface-4: oklch(0.992 0.001 265);\n    --bs-color-surface-5: oklch(0.992 0.001 265);\n  }\n\n  [data-scene=\"cupertino\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.165 0.004 262);\n    --bs-color-surface-1: oklch(0.205 0.004 262);\n    --bs-color-surface-2: oklch(0.245 0.004 262);\n    --bs-color-surface-3: oklch(0.272 0.004 262);\n    --bs-color-surface-4: oklch(0.29 0.004 262);\n    --bs-color-surface-5: oklch(0.31 0.004 262);\n  }\n\n  [data-scene=\"expressive\"] {\n    /* 飞白 — the motion-forward register: the dry brush that races ahead of\n       the ink. Generous rounding, a quick pace, and curves that overshoot\n       on the spring — the interface answers like an instrument, not a\n       form — under a warm key light from above. */\n    --bs-radius-sm: 0.375rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.5rem;\n    --bs-motion-scale: 0.8;\n    --bs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);\n    --bs-ease-spring: cubic-bezier(0.34, 1.56, 0.5, 1);\n    --bs-light-x: 0.1875rem;\n    --bs-light-y: 0.1875rem;\n    --bs-light-reach: 1;\n  }\n\n  [data-scene=\"fluent\"] {\n    /* 流水 — the measured productivity register, 行云流水: the corner\n       ladder runs 2/4/8/12 (shapes under 32px round to 2, controls 4,\n       vessels 8, sheets 12), measured rows on the 24/32/40 control ladder,\n       a brisk pace on the decelerate and standard curves, and a soft key\n       light from straight above whose shadows fall close to the element —\n       depth as quiet layering, no ripple. The paper goes neutral, both\n       faces, the register's own calm gray. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.25rem;\n    --bs-radius-lg: 0.5rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 2rem;\n    --bs-control-height-lg: 2.5rem;\n    --bs-density-scale: 0.9;\n    --bs-motion-scale: 0.85;\n    --bs-ease-out: cubic-bezier(0.1, 0.9, 0.2, 1);\n    --bs-ease-in-out: cubic-bezier(0.33, 0, 0.67, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 0.7;\n    --bs-ripple-opacity: 0;\n  }\n\n  /* The Fluent layers: light sits on the calm #f3f3f3 ground with layered\n     whites rising above it; dark climbs #202020 → #272727 → #323232, the\n     window/card/flyout ladder. Chroma zero — this register keeps no\n     pigment in its paper. */\n  [data-scene=\"fluent\"][data-theme=\"light\"],\n  [data-scene=\"fluent\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.956 0 0);\n    --bs-color-surface-1: oklch(0.973 0 0);\n    --bs-color-surface-2: oklch(0.992 0 0);\n    --bs-color-surface-3: oklch(0.992 0 0);\n    --bs-color-surface-4: oklch(0.992 0 0);\n    --bs-color-surface-5: oklch(0.992 0 0);\n  }\n\n  [data-scene=\"fluent\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.224 0 0);\n    --bs-color-surface-1: oklch(0.251 0 0);\n    --bs-color-surface-2: oklch(0.29 0 0);\n    --bs-color-surface-3: oklch(0.315 0 0);\n    --bs-color-surface-4: oklch(0.34 0 0);\n    --bs-color-surface-5: oklch(0.365 0 0);\n  }\n\n  [data-scene=\"material\"] {\n    /* 格物 — the elevation-led register, 格物致知: the M3 shape ladder,\n       token for token — 4px small, 8px medium, 12px medium-large vessels,\n       16px large, 28px extra-large — with pill presses on M3's container\n       ladder (32 / 40 / 48, the touch minimum the register is built\n       around), the emphasized curves, and the signature that gives the\n       look its name: the key light stands directly overhead, so every\n       raised surface casts a soft shadow straight down a tall ladder.\n       Presses answer with the water ripple — a crisp solid wave that\n       holds while the finger holds, then leaves quickly. */\n    --bs-radius-sm: 0.25rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.75rem;\n    --bs-radius-control: var(--bs-radius-full);\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.5rem;\n    --bs-control-height-lg: 3rem;\n    --bs-motion-scale: 0.9;\n    --bs-ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);\n    --bs-ease-in-out: cubic-bezier(0.2, 0, 0, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 1.5;\n    --bs-ripple-pigment: var(--bs-color-text-primary);\n    --bs-ripple-opacity: 0.12;\n    --bs-ripple-core: 97%;\n    --bs-ripple-fade: 100%;\n    --bs-ripple-duration: calc(450ms * var(--bs-motion-scale, 1));\n    --bs-ripple-release: calc(300ms * var(--bs-motion-scale, 1));\n    --bs-ripple-ease: cubic-bezier(0.2, 0, 0, 1);\n    --bs-ripple-spread: 0.8;\n  }\n\n  /* The M3 surface: neutral, tinted faintly violet instead of the house's\n     warm paper — the elevation-led register reads against cooler ground. */\n  [data-scene=\"material\"][data-theme=\"light\"],\n  [data-scene=\"material\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.966 0.006 300);\n    --bs-color-surface-1: oklch(0.976 0.005 300);\n    --bs-color-surface-2: oklch(0.986 0.004 300);\n    --bs-color-surface-3: oklch(0.986 0.004 300);\n    --bs-color-surface-4: oklch(0.986 0.004 300);\n    --bs-color-surface-5: oklch(0.986 0.004 300);\n  }\n\n  [data-scene=\"material\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.165 0.009 300);\n    --bs-color-surface-1: oklch(0.205 0.01 300);\n    --bs-color-surface-2: oklch(0.245 0.011 300);\n    --bs-color-surface-3: oklch(0.272 0.011 300);\n    --bs-color-surface-4: oklch(0.29 0.011 300);\n    --bs-color-surface-5: oklch(0.31 0.011 300);\n  }\n\n  [data-scene=\"sketch\"] {\n    /* 写意 — the hand-drawn register, 不求形似求神韵: the loose brush of\n       sketchbooks and comics. No frame stays straight — every radius is an\n       uneven four-corner oval (the asymmetric slash syntax of a drawn\n       box), the fully-round tokens wobble too, moving parts bounce hard on\n       the spring, whitespace loosens, and the light sits off-axis like a\n       sticker's cast shadow. This block is the first of four wobble sets —\n       the other three follow, rotated by sibling position so no two\n       elements sway alike. */\n    --bs-radius-xs: 0.3rem 0.5rem 0.4rem 0.55rem / 0.5rem 0.35rem 0.55rem 0.4rem;\n    --bs-radius-sm: 0.5rem 0.9rem 0.625rem 0.8rem / 0.8rem 0.55rem 0.9rem 0.625rem;\n    --bs-radius-md: 0.625rem 1.125rem 0.75rem 1rem / 1rem 0.625rem 1.125rem 0.75rem;\n    --bs-radius-lg: 1rem 1.625rem 1.25rem 1.875rem / 1.625rem 1rem 1.875rem 1.25rem;\n    --bs-radius-xl: 1.5rem 2.25rem 1.75rem 2.5rem / 2.25rem 1.5rem 2.5rem 1.75rem;\n    --bs-radius-2xl: 2rem 2.875rem 2.375rem 3rem / 2.875rem 2rem 3rem 2.375rem;\n    --bs-radius-full: 1.25rem 1.75rem 1.5rem 1.875rem / 1.75rem 1.25rem 1.875rem 1.5rem;\n    --bs-density-scale: 1.15;\n    --bs-motion-scale: 0.9;\n    --bs-ease-spring: cubic-bezier(0.34, 1.66, 0.64, 1);\n    --bs-stagger-step: 40ms;\n    --bs-light-x: 0.1875rem;\n    --bs-light-y: 0.1875rem;\n    --bs-light-reach: 0.85;\n    --bs-ripple-opacity: 0.18;\n    --bs-ripple-duration: calc(450ms * var(--bs-motion-scale, 1));\n  }\n\n  /* The sketchbook stock: warmer and yellower than the house paper — the\n     slightly grubby cream of a well-used drawing pad, night bleeding\n     warmer still. */\n  [data-scene=\"sketch\"][data-theme=\"light\"],\n  [data-scene=\"sketch\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.958 0.014 92);\n    --bs-color-surface-1: oklch(0.972 0.013 93);\n    --bs-color-surface-2: oklch(0.982 0.012 95);\n    --bs-color-surface-3: oklch(0.982 0.012 95);\n    --bs-color-surface-4: oklch(0.982 0.012 95);\n    --bs-color-surface-5: oklch(0.982 0.012 95);\n  }\n\n  [data-scene=\"sketch\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.165 0.012 85);\n    --bs-color-surface-1: oklch(0.205 0.013 85);\n    --bs-color-surface-2: oklch(0.245 0.014 85);\n    --bs-color-surface-3: oklch(0.272 0.014 85);\n    --bs-color-surface-4: oklch(0.29 0.014 85);\n    --bs-color-surface-5: oklch(0.31 0.014 85);\n  }\n\n  /* The three sibling sets. CSS has no random, but an element's seat among\n     its siblings is a good enough dice roll: the same layout never repeats\n     the same sway, while any one element stays put — the frame is drawn\n     once, then holds. */\n  [data-scene=\"sketch\"] :nth-child(4n + 2) {\n    --bs-radius-xs: 0.5rem 0.35rem 0.45rem 0.55rem / 0.4rem 0.55rem 0.35rem 0.5rem;\n    --bs-radius-sm: 0.85rem 0.6rem 0.95rem 0.7rem / 0.6rem 0.9rem 0.7rem 0.95rem;\n    --bs-radius-md: 1.05rem 0.7rem 1.2rem 0.8rem / 0.7rem 1.15rem 0.8rem 1.2rem;\n    --bs-radius-lg: 1.7rem 1.15rem 1.9rem 1.3rem / 1.15rem 1.8rem 1.3rem 1.95rem;\n    --bs-radius-xl: 2.4rem 1.65rem 2.6rem 1.8rem / 1.65rem 2.55rem 1.8rem 2.6rem;\n    --bs-radius-2xl: 3.05rem 2.1rem 3.25rem 2.2rem / 2.1rem 3.15rem 2.2rem 3.3rem;\n    --bs-radius-full: 1.65rem 1.3rem 1.8rem 1.35rem / 1.3rem 1.7rem 1.35rem 1.85rem;\n  }\n\n  [data-scene=\"sketch\"] :nth-child(4n + 3) {\n    --bs-radius-xs: 0.45rem 0.3rem 0.55rem 0.4rem / 0.35rem 0.5rem 0.45rem 0.55rem;\n    --bs-radius-sm: 0.7rem 1rem 0.55rem 0.85rem / 0.95rem 0.65rem 0.85rem 0.6rem;\n    --bs-radius-md: 0.85rem 1.25rem 0.7rem 1.1rem / 1.2rem 0.75rem 1.05rem 0.7rem;\n    --bs-radius-lg: 1.35rem 1.95rem 1.1rem 1.7rem / 1.9rem 1.2rem 1.75rem 1.15rem;\n    --bs-radius-xl: 2rem 2.8rem 1.7rem 2.5rem / 2.75rem 1.8rem 2.5rem 1.7rem;\n    --bs-radius-2xl: 2.7rem 3.6rem 2.3rem 3.3rem / 3.5rem 2.3rem 3.2rem 2.2rem;\n    --bs-radius-full: 1.4rem 1.9rem 1.3rem 1.75rem / 1.85rem 1.35rem 1.8rem 1.3rem;\n  }\n\n  [data-scene=\"sketch\"] :nth-child(4n) {\n    --bs-radius-xs: 0.35rem 0.55rem 0.3rem 0.5rem / 0.55rem 0.4rem 0.5rem 0.35rem;\n    --bs-radius-sm: 0.6rem 0.8rem 0.5rem 0.9rem / 0.75rem 0.55rem 0.95rem 0.65rem;\n    --bs-radius-md: 0.75rem 1rem 0.6rem 1.15rem / 0.95rem 0.7rem 1.1rem 0.8rem;\n    --bs-radius-lg: 1.2rem 1.6rem 1.05rem 1.8rem / 1.55rem 1.1rem 1.85rem 1.25rem;\n    --bs-radius-xl: 1.8rem 2.4rem 1.6rem 2.6rem / 2.3rem 1.7rem 2.7rem 1.9rem;\n    --bs-radius-2xl: 2.4rem 3.2rem 2.15rem 3.5rem / 3.1rem 2.3rem 3.6rem 2.4rem;\n    --bs-radius-full: 1.35rem 1.8rem 1.25rem 1.7rem / 1.75rem 1.4rem 1.9rem 1.45rem;\n  }\n\n\n  /* Density — decoration compresses, information never does: density scales whitespace and decoration\n     only. Type sizes and contrast stay fixed so compact can never trade away\n     readability. Control heights ride the density directly — a compact\n     workbench and an elder-friendly spacious screen are different products,\n     not the same one nudged by two pixels. */\n\n  /* The default scale sits behind :where() so a scene preset (an attribute,\n     same 0,1,0 as :root) can override it by cascade order, while the explicit\n     [data-density] tiers below still outrank scenes that come before them. */\n  :where(:root),\n  :where(:host) {\n    --bs-density-scale: 1;\n  }\n\n  :root,\n  :host,\n  /* Custom properties resolve their var() references at the declaring\n     element, so these derived tokens must re-declare on any element that\n     carries a density of its own — declared only on :root, they freeze at\n     the root's scale and a provider re-tuning --bs-density-scale on a\n     subtree would move nothing but the control heights. */\n  [data-density],\n  :host([data-density]) {\n    /* Interior control parts (thumbs, knobs, check boxes, close buttons) are\n       decoration riding a control, not the control itself: they scale with\n       density and keep no readable floor, so a compact density actually\n       makes them smaller. */\n    --bs-part-size-sm: calc(1rem * var(--bs-density-scale));\n    --bs-part-size-md: calc(1.25rem * var(--bs-density-scale));\n    --bs-part-size-lg: calc(1.75rem * var(--bs-density-scale));\n\n    /* Density-scaled whitespace. */\n    --bs-padding-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-padding-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-padding-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-padding-lg: calc(var(--bs-space-4) * var(--bs-density-scale));\n    --bs-padding-xl: calc(var(--bs-space-6) * var(--bs-density-scale));\n    --bs-gap-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-gap-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-gap-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-gap-lg: calc(var(--bs-space-5) * var(--bs-density-scale));\n    --bs-gap-xl: calc(var(--bs-space-8) * var(--bs-density-scale));\n  }\n\n  /* Control heights per tier — the cross-system ladders (28/32/40 sits at\n     default; compact matches the Fiori/Ant workbench register; spacious\n     reaches the 48px targets elderly-vision research asks for). The base\n     tier sits behind :where() like the scale above, so a scene's bundled\n     ladder overrides it by cascade order while the explicit [data-density]\n     tiers below still outrank both. */\n  :where(:root),\n  :where(:host) {\n    --bs-control-height-sm: 1.75rem;\n    --bs-control-height-md: 2rem;\n    --bs-control-height-lg: 2.5rem;\n  }\n\n  [data-density=\"compact\"],\n  :host([data-density=\"compact\"]) {\n    --bs-density-scale: 0.75;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n  }\n\n  [data-density=\"comfortable\"],\n  :host([data-density=\"comfortable\"]) {\n    --bs-density-scale: 1.25;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n  }\n\n  [data-density=\"spacious\"],\n  :host([data-density=\"spacious\"]) {\n    --bs-density-scale: 1.5;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n  }\n\n\n  /* Contrast tier — softness comes from light and shadow, never from low contrast: the aesthetic softens through\n     light, never through gray-on-gray. The high tier pulls secondary text and\n     borders up to primary strength and widens the focus halo; it exists so\n     older and low-vision users get the same design, just louder. Surface\n     steps stay untouched — rows signal hover by one step of shade, and\n     flattening the ladder would silence every hover in the system. */\n\n  [data-contrast=\"high\"],\n  :host([data-contrast=\"high\"]) {\n    --bs-color-text-secondary: var(--bs-color-text-primary);\n    --bs-color-text-tertiary: var(--bs-color-text-secondary);\n    --bs-color-border: var(--bs-color-border-strong);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 30%, transparent);\n  }\n\n  [data-theme=\"light\"][data-contrast=\"high\"],\n  :host([data-theme=\"light\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-400);\n  }\n\n  [data-theme=\"dark\"][data-contrast=\"high\"],\n  :host([data-theme=\"dark\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-500);\n  }\n\n\n  /* Overlay stacking — one shared base for every dismissible layer (dialog,\n     popover, menu, select, …), ordered by zag's --layer-index offset so any\n     nesting combination stacks correctly. Per-component bases are forbidden. */\n  :root,\n  :host {\n    --bs-z-overlay: 1000;\n  }\n}\n";
+export default "@layer bs.tokens;\n\n@layer bs.tokens {\n  /**\n   * Do not edit directly, this file was auto-generated.\n   */\n\n  :root, :host {\n    --bs-color-gray-25: oklch(0.985 0.003 92);\n    --bs-color-gray-50: oklch(0.968 0.005 90);\n    --bs-color-gray-100: oklch(0.928 0.007 88);\n    --bs-color-gray-200: oklch(0.872 0.009 86);\n    --bs-color-gray-300: oklch(0.795 0.011 84);\n    --bs-color-gray-400: oklch(0.665 0.013 82);\n    --bs-color-gray-500: oklch(0.568 0.014 80);\n    --bs-color-gray-600: oklch(0.482 0.014 78);\n    --bs-color-gray-700: oklch(0.405 0.013 76);\n    --bs-color-gray-800: oklch(0.318 0.011 76);\n    --bs-color-gray-850: oklch(0.272 0.01 76);\n    --bs-color-gray-900: oklch(0.23 0.009 76);\n    --bs-color-gray-925: oklch(0.188 0.008 76);\n    --bs-color-gray-950: oklch(0.15 0.007 76);\n    --bs-color-gray-975: oklch(0.118 0.006 76);\n    --bs-color-brand-50: oklch(0.962 0.014 255);\n    --bs-color-brand-100: oklch(0.93 0.031 255);\n    --bs-color-brand-200: oklch(0.885 0.056 255);\n    --bs-color-brand-300: oklch(0.815 0.09 255);\n    --bs-color-brand-400: oklch(0.72 0.122 255);\n    --bs-color-brand-500: oklch(0.6 0.15 255);\n    --bs-color-brand-600: oklch(0.53 0.155 255);\n    --bs-color-brand-700: oklch(0.46 0.15 255);\n    --bs-color-brand-800: oklch(0.395 0.13 255);\n    --bs-color-brand-900: oklch(0.33 0.105 255);\n    --bs-color-brand-950: oklch(0.26 0.08 255);\n    --bs-color-celadon-50: oklch(0.962 0.014 205);\n    --bs-color-celadon-100: oklch(0.928 0.028 205);\n    --bs-color-celadon-200: oklch(0.88 0.05 205);\n    --bs-color-celadon-300: oklch(0.81 0.072 205);\n    --bs-color-celadon-400: oklch(0.715 0.082 205);\n    --bs-color-celadon-500: oklch(0.63 0.085 205);\n    --bs-color-celadon-600: oklch(0.56 0.085 205);\n    --bs-color-celadon-700: oklch(0.485 0.08 205);\n    --bs-color-celadon-800: oklch(0.41 0.068 205);\n    --bs-color-celadon-900: oklch(0.34 0.054 205);\n    --bs-color-celadon-950: oklch(0.265 0.04 205);\n    --bs-color-zhusha-50: oklch(0.964 0.016 28);\n    --bs-color-zhusha-100: oklch(0.926 0.036 28);\n    --bs-color-zhusha-200: oklch(0.874 0.066 28);\n    --bs-color-zhusha-300: oklch(0.806 0.098 28);\n    --bs-color-zhusha-400: oklch(0.716 0.13 28);\n    --bs-color-zhusha-500: oklch(0.625 0.15 28);\n    --bs-color-zhusha-600: oklch(0.55 0.16 28);\n    --bs-color-zhusha-700: oklch(0.472 0.148 28);\n    --bs-color-zhusha-800: oklch(0.398 0.125 28);\n    --bs-color-zhusha-900: oklch(0.328 0.098 28);\n    --bs-color-zhusha-950: oklch(0.254 0.072 28);\n    --bs-color-success-50: oklch(0.962 0.024 155);\n    --bs-color-success-100: oklch(0.922 0.048 155);\n    --bs-color-success-200: oklch(0.868 0.082 155);\n    --bs-color-success-300: oklch(0.794 0.108 155);\n    --bs-color-success-400: oklch(0.71 0.122 155);\n    --bs-color-success-500: oklch(0.6 0.112 155);\n    --bs-color-success-600: oklch(0.52 0.1 155);\n    --bs-color-success-700: oklch(0.445 0.088 155);\n    --bs-color-success-800: oklch(0.375 0.072 155);\n    --bs-color-success-900: oklch(0.31 0.056 155);\n    --bs-color-success-950: oklch(0.24 0.04 155);\n    --bs-color-warning-50: oklch(0.968 0.028 78);\n    --bs-color-warning-100: oklch(0.934 0.056 74);\n    --bs-color-warning-200: oklch(0.892 0.086 70);\n    --bs-color-warning-300: oklch(0.836 0.112 67);\n    --bs-color-warning-400: oklch(0.76 0.126 66);\n    --bs-color-warning-500: oklch(0.665 0.125 65);\n    --bs-color-warning-600: oklch(0.55 0.122 65);\n    --bs-color-warning-700: oklch(0.495 0.11 63);\n    --bs-color-warning-800: oklch(0.415 0.092 62);\n    --bs-color-warning-900: oklch(0.34 0.074 62);\n    --bs-color-warning-950: oklch(0.262 0.054 62);\n    --bs-color-danger-50: oklch(0.964 0.018 25);\n    --bs-color-danger-100: oklch(0.924 0.04 25);\n    --bs-color-danger-200: oklch(0.87 0.07 25);\n    --bs-color-danger-300: oklch(0.798 0.106 25);\n    --bs-color-danger-400: oklch(0.712 0.138 25);\n    --bs-color-danger-500: oklch(0.6 0.15 25);\n    --bs-color-danger-600: oklch(0.51 0.15 25);\n    --bs-color-danger-700: oklch(0.44 0.135 25);\n    --bs-color-danger-800: oklch(0.372 0.112 25);\n    --bs-color-danger-900: oklch(0.306 0.088 25);\n    --bs-color-danger-950: oklch(0.236 0.064 25);\n    --bs-color-info-50: oklch(0.962 0.014 250);\n    --bs-color-info-100: oklch(0.924 0.03 250);\n    --bs-color-info-200: oklch(0.872 0.054 250);\n    --bs-color-info-300: oklch(0.802 0.082 250);\n    --bs-color-info-400: oklch(0.718 0.11 250);\n    --bs-color-info-500: oklch(0.6 0.125 250);\n    --bs-color-info-600: oklch(0.505 0.125 250);\n    --bs-color-info-700: oklch(0.432 0.112 250);\n    --bs-color-info-800: oklch(0.364 0.092 250);\n    --bs-color-info-900: oklch(0.3 0.072 250);\n    --bs-color-info-950: oklch(0.232 0.052 250);\n    --bs-space-1: 0.25rem;\n    --bs-space-2: 0.5rem;\n    --bs-space-3: 0.75rem;\n    --bs-space-4: 1rem;\n    --bs-space-5: 1.25rem;\n    --bs-space-6: 1.5rem;\n    --bs-space-7: 1.75rem;\n    --bs-space-8: 2rem;\n    --bs-space-10: 2.5rem;\n    --bs-space-12: 3rem;\n    --bs-space-16: 4rem;\n    --bs-space-20: 5rem;\n    --bs-space-24: 6rem;\n    --bs-radius-none: 0rem;\n    --bs-radius-xs: 0.25rem;\n    --bs-radius-sm: 0.375rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.5rem;\n    --bs-radius-full: 9999px;\n  }\n\n\n  /* Light theme — light as shadow, the paper-and-ink register: hierarchy reads through\n     the paper ladder (the ground sits in ambient shade, raised surfaces catch\n     the light), hairline borders, and restrained cast shadows in warm ink.\n     Controls stay crisp — a paper-white surface, one hairline, and shadow-xs.\n     Primary defaults to ink so the interface stays monochrome and solemn; the\n     pigment accents (qinghua, celadon, zhusha) live in accent.css. */\n\n  :root,\n  :host,\n  [data-theme=\"light\"],\n  :host([data-theme=\"light\"]) {\n    color-scheme: light;\n\n    /* Surfaces: the ground rests in ambient shade; raised surfaces catch the\n       light. Warm paper whites throughout — pure #ffffff never appears, it\n       would read clinical against the ink. */\n    --bs-color-surface-0: var(--bs-color-gray-50);\n    /* The page paper itself — the alias floating bodies read, mirroring\n       --bs-color-surface-inverse below. */\n    --bs-color-surface: var(--bs-color-surface-0);\n    --bs-color-surface-1: var(--bs-color-gray-25);\n    --bs-color-surface-2: oklch(0.988 0.004 95);\n    --bs-color-surface-3: oklch(0.988 0.004 95);\n    --bs-color-surface-4: oklch(0.988 0.004 95);\n    --bs-color-surface-5: oklch(0.988 0.004 95);\n    --bs-color-surface-inset: var(--bs-color-gray-100);\n    /* The inverted surface — ink on paper — hosts floating labels like\n       tooltips that must read against the page, never blend into it. */\n    --bs-color-surface-inverse: var(--bs-color-gray-800);\n    --bs-color-scrim: oklch(0.15 0.007 76 / 0.4);\n\n    --bs-color-text-primary: var(--bs-color-gray-900);\n    --bs-color-text-secondary: var(--bs-color-gray-600);\n    --bs-color-text-tertiary: var(--bs-color-gray-500);\n    --bs-color-text-disabled: var(--bs-color-gray-400);\n    --bs-color-text-inverse: var(--bs-color-surface-2);\n    /* Ink over the scrim — the dimmed room behind dialogs and lightboxes.\n       The scrim never lightens with the theme, so neither may the ink on\n       it: this stays paper-bright in both registers, unlike the mirror\n       ink above, which answers the page it floats over. */\n    --bs-color-text-on-scrim: var(--bs-color-surface-2);\n    /* Ink on a solid pigment fill: paper under daylight, kneaded bright\n       under lacquer night (see the dark theme). */\n    --bs-color-ink-on-fill: var(--bs-color-surface-2);\n    --bs-ink-knead: 0%;\n\n    --bs-color-border: var(--bs-color-gray-200);\n    --bs-color-border-strong: var(--bs-color-gray-300);\n\n    /* Focus is a halo of light: a crisp inner line inside a soft, wide\n       glow. Every default scene carries it, text inputs included. The\n       inset variant serves parts flush against a container edge, where\n       an outer halo would spill past it. */\n    --bs-color-focus: var(--bs-color-primary);\n    /* The hairline a focused control wears. A scene that borrows another\n       system's focus language re-points it — Fluent keeps the edge neutral\n       and lets the underline speak. */\n    --bs-focus-edge: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 20%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary is ink by default — solemn, unhurried, industry-neutral. The\n       hover deepens the ink into the paper; the pigment accents override the\n       whole block (see accent.css). */\n    --bs-color-primary: var(--bs-color-gray-800);\n    --bs-color-primary-hover: var(--bs-color-gray-900);\n    --bs-color-primary-active: var(--bs-color-gray-925);\n    --bs-color-primary-text: var(--bs-color-surface-2);\n    /* The solid-fill body: pigments rest at full strength on paper — night\n       kneads them (see the dark theme), daylight does not. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: var(--bs-color-gray-100);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-800);\n    --bs-color-primary-border: var(--bs-color-gray-300);\n\n    /* Fixed semantic pigments — bamboo, ochre, cinnabar, ultramarine. They do\n       not follow the accent theme: an error is always cinnabar-red, a warning\n       always ochre, whatever pigment the brand rides. */\n    --bs-color-success: var(--bs-color-success-600);\n    --bs-color-success-hover: var(--bs-color-success-700);\n    --bs-color-success-subtle: var(--bs-color-success-100);\n    --bs-color-success-subtle-text: var(--bs-color-success-800);\n\n    --bs-color-warning: var(--bs-color-warning-600);\n    --bs-color-warning-hover: var(--bs-color-warning-700);\n    --bs-color-warning-subtle: var(--bs-color-warning-100);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-800);\n\n    --bs-color-danger: var(--bs-color-danger-600);\n    --bs-color-danger-hover: var(--bs-color-danger-700);\n    --bs-color-danger-subtle: var(--bs-color-danger-100);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-800);\n\n    --bs-color-info: var(--bs-color-info-600);\n    --bs-color-info-hover: var(--bs-color-info-700);\n    --bs-color-info-subtle: var(--bs-color-info-100);\n    --bs-color-info-subtle-text: var(--bs-color-info-800);\n\n    /* Lighting — elevation shadows are computed, never copy-pasted. Every\n       shadow draws its ink from --bs-shadow-ink, this theme's warm shadow hue,\n       shifts with --bs-light-x/-y (where the key light stands), and spreads\n       with --bs-light-reach (how high the surface floats). Custom properties\n       resolve their own var() references at the declaring element, so these\n       composite tokens always carry theme ink; a colored surface that casts in\n       its own color composes its shadow inline from these parts mixed with its\n       tint — see the dialog trigger. Restraint ladder: controls carry only\n       shadow-xs; cards rise on elevation-1/2; menus and popovers separate on\n       elevation-3; dialogs own elevation-4/5. */\n    --bs-shadow-ink: oklch(0.3 0.02 80);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    /* Weighted hairlines: the 1px edge everything rides, and the 3px\n       status edge an alert earns. */\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 5%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent);\n    --bs-elevation-2:\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 6%, transparent),\n      var(--bs-light-x) calc(3px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 9%, transparent);\n    --bs-elevation-3:\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent),\n      var(--bs-light-x) calc(5px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent);\n    --bs-elevation-4:\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(28px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent),\n      var(--bs-light-x) calc(28px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(56px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent);\n    --bs-elevation-5:\n      var(--bs-light-x) calc(6px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(16px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(40px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-16px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent);\n  }\n\n\n  /* Dark theme — lacquer night: the room dims into warm lacquer black,\n     and text turns to paper. Surfaces still brighten as they rise (e0 darkest\n     → e5 lightest) — at night the ladder of light, not the cast shadow, does\n     the separating. Primary inverts: paper-white buttons set ink on fire\n     gently against the dark. */\n\n  [data-theme=\"dark\"],\n  :host([data-theme=\"dark\"]) {\n    color-scheme: dark;\n\n    /* Lacquer surfaces: warm black at every step, never pure #000. */\n    --bs-color-surface-0: oklch(0.165 0.008 75);\n    /* The page paper itself — the alias floating bodies read, mirroring\n       --bs-color-surface-inverse below. */\n    --bs-color-surface: var(--bs-color-surface-0);\n    --bs-color-surface-1: oklch(0.205 0.009 75);\n    --bs-color-surface-2: oklch(0.245 0.01 76);\n    --bs-color-surface-3: oklch(0.272 0.01 76);\n    --bs-color-surface-4: oklch(0.29 0.01 76);\n    --bs-color-surface-5: oklch(0.31 0.01 76);\n    --bs-color-surface-inset: oklch(0.135 0.007 75);\n    /* The inverted surface — paper on lacquer — hosts floating labels like\n       tooltips; at night the inversion reads as a slip of bright paper. */\n    --bs-color-surface-inverse: var(--bs-color-gray-100);\n    --bs-color-scrim: oklch(0.05 0.01 75 / 0.6);\n\n    --bs-color-text-primary: oklch(0.925 0.006 90);\n    --bs-color-text-secondary: var(--bs-color-gray-300);\n    --bs-color-text-tertiary: var(--bs-color-gray-400);\n    --bs-color-text-disabled: var(--bs-color-gray-500);\n    --bs-color-text-inverse: var(--bs-color-gray-900);\n    /* Ink over the scrim — the dimmed room behind dialogs and lightboxes.\n       The scrim never lightens with the theme, so neither may the ink on\n       it: this stays paper-bright in both registers, unlike the mirror\n       ink above, which answers the page it floats over. */\n    --bs-color-text-on-scrim: var(--bs-color-gray-100);\n    /* Ink on a solid pigment fill: pigments knead a fifth of ink into their\n       bodies at night (a mid-tone fill carries neither deep nor pale text\n       past 4.5:1), so the ink turns bright paper. */\n    --bs-color-ink-on-fill: var(--bs-color-gray-25);\n    --bs-ink-knead: 20%;\n\n    --bs-color-border: oklch(0.31 0.01 78);\n    --bs-color-border-strong: oklch(0.4 0.012 78);\n\n    /* The halo reads brighter at night, like any light source does. */\n    --bs-color-focus: var(--bs-color-primary);\n    --bs-focus-edge: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 26%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary inverts to paper — ink set down on lacquer. */\n    --bs-color-primary: oklch(0.93 0.007 90);\n    --bs-color-primary-hover: var(--bs-color-gray-200);\n    --bs-color-primary-active: var(--bs-color-gray-300);\n    --bs-color-primary-text: var(--bs-color-gray-900);\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 10%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-200);\n    --bs-color-primary-border: var(--bs-color-gray-700);\n\n    /* Semantic pigments lift to their lighter steps at night; the fixed hue\n       relationships (bamboo / ochre / cinnabar / ultramarine) never change. */\n    --bs-color-success: var(--bs-color-success-500);\n    --bs-color-success-hover: var(--bs-color-success-400);\n    --bs-color-success-subtle: color-mix(in oklab, var(--bs-color-success) 16%, transparent);\n    --bs-color-success-subtle-text: var(--bs-color-success-300);\n\n    --bs-color-warning: var(--bs-color-warning-500);\n    --bs-color-warning-hover: var(--bs-color-warning-400);\n    --bs-color-warning-subtle: color-mix(in oklab, var(--bs-color-warning) 16%, transparent);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-300);\n\n    --bs-color-danger: var(--bs-color-danger-500);\n    --bs-color-danger-hover: var(--bs-color-danger-400);\n    --bs-color-danger-subtle: color-mix(in oklab, var(--bs-color-danger) 16%, transparent);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-300);\n\n    --bs-color-info: var(--bs-color-info-500);\n    --bs-color-info-hover: var(--bs-color-info-400);\n    --bs-color-info-subtle: color-mix(in oklab, var(--bs-color-info) 16%, transparent);\n    --bs-color-info-subtle-text: var(--bs-color-info-300);\n\n    /* Elevation in the dark: cast shadows need far more opacity to read against\n       a dark ground, so every level carries a faint warm hairline of light to\n       cut the raised surface out of the one below it. Same lighting parts as\n       light — ink from --bs-shadow-ink, shifted by --bs-light-x/-y, spread by\n       --bs-light-reach; colored surfaces compose their tint inline. */\n    --bs-shadow-ink: oklch(0.04 0.01 75);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 35%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.04),\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 32%, transparent);\n    --bs-elevation-2:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.05),\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-1px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 36%, transparent);\n    --bs-elevation-3:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.06),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent);\n    --bs-elevation-4:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.07),\n      var(--bs-light-x) calc(8px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(16px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent),\n      var(--bs-light-x) calc(24px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(48px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent);\n    --bs-elevation-5:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.08),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 52%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent);\n  }\n\n\n  /* Accent themes — the pigments. Primary is ink by default (theme-light/dark);\n     switching [data-accent] lays a different mineral pigment under the same\n     interface: qinghua (cobalt, the blue of blue-and-white porcelain), celadon\n     (aquatic green-blue), zhusha (cinnabar, the seal-paste red used sparingly\n     by civic sites for identity — never for errors; danger stays cinnabar-red\n     by way of --bs-color-danger, a separate token). Each accent redefines the\n     primary block and the focus hue; the fixed semantic pigments never follow. */\n\n  [data-accent=\"qinghua\"] {\n    --bs-color-primary: var(--bs-color-brand-600);\n    --bs-color-primary-hover: var(--bs-color-brand-700);\n    --bs-color-primary-active: var(--bs-color-brand-800);\n    /* The fill derives here, not only on :root: custom properties resolve\n       var() at the declaring element, so a fill declared only on :root\n       freezes the ink default and never follows an accent that sits below\n       the root (ConfigProvider). */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-brand-100);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-800);\n    --bs-color-primary-border: var(--bs-color-brand-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"qinghua\"],\n  [data-theme=\"dark\"][data-accent=\"qinghua\"],\n  :host([data-theme=\"dark\"][data-accent=\"qinghua\"]) {\n    --bs-color-primary: var(--bs-color-brand-500);\n    --bs-color-primary-hover: var(--bs-color-brand-600);\n    --bs-color-primary-active: var(--bs-color-brand-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-brand-700);\n    --bs-color-primary-fill-hover: var(--bs-color-brand-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-300);\n    --bs-color-primary-border: var(--bs-color-brand-700);\n  }\n\n  [data-accent=\"celadon\"] {\n    --bs-color-primary: var(--bs-color-celadon-600);\n    --bs-color-primary-hover: var(--bs-color-celadon-700);\n    --bs-color-primary-active: var(--bs-color-celadon-800);\n    /* See qinghua: the fill must derive at the accent host, not the root. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-celadon-100);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-800);\n    --bs-color-primary-border: var(--bs-color-celadon-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"celadon\"],\n  [data-theme=\"dark\"][data-accent=\"celadon\"],\n  :host([data-theme=\"dark\"][data-accent=\"celadon\"]) {\n    --bs-color-primary: var(--bs-color-celadon-500);\n    --bs-color-primary-hover: var(--bs-color-celadon-600);\n    --bs-color-primary-active: var(--bs-color-celadon-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-celadon-700);\n    --bs-color-primary-fill-hover: var(--bs-color-celadon-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-300);\n    --bs-color-primary-border: var(--bs-color-celadon-700);\n  }\n\n  [data-accent=\"zhusha\"] {\n    --bs-color-primary: var(--bs-color-zhusha-600);\n    --bs-color-primary-hover: var(--bs-color-zhusha-700);\n    --bs-color-primary-active: var(--bs-color-zhusha-800);\n    /* See qinghua: the fill must derive at the accent host, not the root. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-zhusha-100);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-800);\n    --bs-color-primary-border: var(--bs-color-zhusha-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"zhusha\"],\n  [data-theme=\"dark\"][data-accent=\"zhusha\"],\n  :host([data-theme=\"dark\"][data-accent=\"zhusha\"]) {\n    --bs-color-primary: var(--bs-color-zhusha-500);\n    --bs-color-primary-hover: var(--bs-color-zhusha-600);\n    --bs-color-primary-active: var(--bs-color-zhusha-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-zhusha-700);\n    --bs-color-primary-fill-hover: var(--bs-color-zhusha-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-300);\n    --bs-color-primary-border: var(--bs-color-zhusha-700);\n  }\n\n\n  /* Typography — two tracks: the voice and the chrome. The voice is the song\n     stack (upright, structured strokes — Noto Serif SC falling back through the\n     platform faces); headings and editorial narrative ride it, the way Western\n     systems let a serif carry voice. The chrome is the modern hei stack: the\n     platform UI faces lead so Latin letters and figures hold one rhythm with the\n     CJK around them — a Chinese face reaching Latin first drops its digits onto\n     a taller, heavier cut, and the line reads out of true. The CJK set falls in\n     behind — MiSans and HarmonyOS Sans into PingFang / YaHei. Sizes are fixed\n     rem values outside the density scale; compact UI may choose\n     --bs-font-size-sm but never below it. */\n\n  :root,\n  :host {\n    --bs-font-sans:\n      -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, MiSans, \"HarmonyOS Sans SC\",\n      \"PingFang SC\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", sans-serif;\n    --bs-font-serif:\n      \"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", SimSun, \"Times New Roman\", Georgia, serif;\n    --bs-font-mono:\n      ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", Consolas, \"PingFang SC\", \"Microsoft YaHei\",\n      monospace;\n\n    --bs-font-size-xs: 0.75rem;\n    --bs-font-size-sm: 0.8125rem;\n    --bs-font-size-md: 0.875rem;\n    --bs-font-size-base: 0.9375rem;\n    --bs-font-size-lg: 1.0625rem;\n    --bs-font-size-xl: 1.25rem;\n    --bs-font-size-2xl: 1.5rem;\n    --bs-font-size-3xl: 1.875rem;\n    --bs-font-size-4xl: 2.25rem;\n\n    --bs-line-height-tight: 1.25;\n    --bs-line-height-snug: 1.375;\n    --bs-line-height-normal: 1.5;\n    --bs-line-height-relaxed: 1.625;\n\n    /* Control labels carry a whisper of tracking — upright and unhurried is a\n       property of CJK typesetting, not of any single typeface. */\n    --bs-tracking-label: 0.02em;\n\n    --bs-font-weight-regular: 400;\n    --bs-font-weight-medium: 500;\n    --bs-font-weight-semibold: 600;\n    --bs-font-weight-bold: 700;\n  }\n\n\n  /* Motion — the ink-and-light grammar. Three rules and a floor:\n     Light needs time — shadows transition about 1.5x slower than the property\n     that raised them, so a shadow reads as cast light, not a sticker.\n     Ink bleeds — surfaces enter by fading AND dissolving (blur to sharp),\n     never popping. Puppets have strings — moving parts overshoot on the spring\n     curve, and lists follow one another with a small stagger.\n     Tokens drive all transitions; the reduced-motion block retunes them instead\n     of removing states, so opacity still communicates elevation changes. */\n\n  /* Defaults sit at zero specificity (:where): the motion sheet can appear\n     twice in the compiled bundle — once before and once after scene.css —\n     and a plain :root would tie [data-scene] on specificity and, in that\n     second copy, outrank it by file order, silencing every scene that\n     retunes the curves below. */\n  :where(:root),\n  :where(:host) {\n    /* Durations ride --bs-motion-scale so a scene preset can tune the pace\n       (a snappier instrument, an unhurried civic register) without touching\n       the reduced-motion floor below, which declares 1ms directly. */\n    --bs-duration-instant: calc(80ms * var(--bs-motion-scale, 1));\n    --bs-duration-fast: calc(140ms * var(--bs-motion-scale, 1));\n    --bs-duration-base: calc(200ms * var(--bs-motion-scale, 1));\n    --bs-duration-slow: calc(320ms * var(--bs-motion-scale, 1));\n\n    --bs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n    --bs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n    --bs-ease-in: cubic-bezier(0.7, 0, 0.84, 0);\n    --bs-ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);\n\n    /* Stagger step for lists and menus — each follower comes up 24ms after\n       the one before it, like puppets lifted in sequence. */\n    --bs-stagger-step: 24ms;\n\n    /* The press wash (ink-ripple) reads its pigment, reach, curve, and pace\n       from these, so a scene preset can retune the feedback — a smaller,\n       crisper wave in the flat content color for material, or silence for\n       registers that press without a wash — without touching the keyframes\n       in the core. The pigment is an opaque color and --bs-ripple-opacity\n       is the whole concentration — the two never double-deduct. */\n    --bs-ripple-pigment: var(--bs-color-primary);\n    --bs-ripple-opacity: 0.27;\n    --bs-ripple-core: 0%;\n    --bs-ripple-fade: 80%;\n    --bs-ripple-duration: calc(650ms * var(--bs-motion-scale, 1));\n    --bs-ripple-release: calc(320ms * var(--bs-motion-scale, 1));\n    --bs-ripple-ease: var(--bs-ease-out);\n    --bs-ripple-spread: 1;\n  }\n\n  /* Surfaces dissolve in like ink settling into paper: a fade, a soft focus\n     pulling sharp, and a one-percent settle. Panels and menus apply it on\n     their open state; exits stay plain opacity fades — faster, unobtrusive. */\n  @keyframes bs-ink-in {\n    from {\n      opacity: 0;\n      filter: blur(3px);\n      scale: 1.01;\n    }\n    to {\n      opacity: 1;\n      filter: blur(0);\n      scale: 1;\n    }\n  }\n\n  /* Followers rise into place on the string — a short lift with the spring\n     curve. Combine with per-item `animation-delay: calc(var(--bs-i) * var(--bs-stagger-step))`. */\n  @keyframes bs-item-in {\n    from {\n      opacity: 0;\n      translate: 0 4px;\n    }\n    to {\n      opacity: 1;\n      translate: 0 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :root,\n    :host {\n      --bs-duration-instant: 1ms;\n      --bs-duration-fast: 1ms;\n      --bs-duration-base: 1ms;\n      --bs-duration-slow: 1ms;\n      --bs-stagger-step: 0ms;\n    }\n  }\n\n\n  /* Scene presets — one attribute that retunes the temperament of the whole\n     interface. Two families share the same five levers: the audience scenes\n     serve a desk (civic for elders and civic desks, tech for modern\n     efficiency products, enterprise the quiet commercial baseline, studio\n     the literati gathering for design and editorial work), and the style\n     scenes borrow the temperament of the major design languages — named for\n     the open specs and the places their platforms are built, never the\n     companies: cupertino for the soft airy handheld register, expressive\n     for motion-forward spring, fluent for measured productivity depth,\n     material for the elevation-led android-era look.\n\n     A scene moves only what the paper allows: shape (radius), density, motion\n     pace and its curves, where the key light stands and how far it reaches,\n     and how the press wash spreads. A style scene follows the register it\n     borrows whole — so it may also re-point the focus tokens, speaking\n     focus in the register's own dialect instead of the house halo — and it\n     may retint the paper itself (the surface ladder, light and dark) where\n     the borrowed register demands its own stock, and let the type follow\n     the register's voice — the one font move allowed is the platform's own\n     stack, which is what the register would speak in anyway. No scene\n     touches interaction logic or the semantic pigments. Each scene pairs\n     with a default accent and (for civic) the high-contrast tier; those\n     pairings are applied by the theme engine as plain data attributes, so\n     the accent and contrast rules — including their dark variants — carry\n     them unchanged.\n\n     Explicit attributes always outrank the scene's bundled defaults: a\n     `[data-accent]`, `[data-contrast]`, or `[data-density]` set alongside\n     `[data-scene]` wins by cascade order. Note `:root` ties `[data-scene]` in\n     specificity (both 0,1,0), so this file must sit after every stylesheet\n     that declares these variables on `:root` (themes, primitives via accent's\n     placement) and before density.css, whose explicit tiers must win over\n     scene defaults. */\n\n  [data-scene=\"civic\"] {\n    /* 典章 — for elders and civic desks: the square-cut register of official\n       documents. Corners go true square (a seal is not round), targets grow\n       to the spacious ladder (48px controls), the pace slows so states are\n       never missed, and the light stays flat so nothing hides in a shadow. */\n    --bs-radius-sm: 0rem;\n    --bs-radius-md: 0.125rem;\n    --bs-radius-lg: 0.25rem;\n    --bs-radius-xl: 0.375rem;\n    --bs-radius-2xl: 0.5rem;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n    --bs-density-scale: 1.5;\n    --bs-motion-scale: 1.25;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.7;\n  }\n\n  [data-scene=\"enterprise\"] {\n    /* 信笺 — the measured commercial baseline: default geometry at a calmer\n       light, so long working sessions read quiet and the hairlines do the\n       talking. */\n    --bs-density-scale: 1;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.85;\n  }\n\n  [data-scene=\"studio\"] {\n    /* 雅集 — the literati gathering for design and editorial work: controls\n       keep the 6px seal edge, vessels round out generously, whitespace\n       breathes, and the light comes from the upper left, casting each\n       element's shadow gently toward the lower right. */\n    --bs-radius-md: 0.625rem;\n    --bs-radius-lg: 0.875rem;\n    --bs-radius-xl: 1.25rem;\n    --bs-radius-2xl: 1.75rem;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n    --bs-density-scale: 1.25;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0.125rem;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 1.25;\n  }\n\n  [data-scene=\"tech\"] {\n    /* 司南 — the modern precision instrument: near-square corners, dense\n       rows, a snappy pace, and a flat restrained light where hairlines carry\n       all the hierarchy. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.25rem;\n    --bs-radius-lg: 0.5rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n    --bs-density-scale: 0.75;\n    --bs-motion-scale: 0.85;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.5;\n  }\n\n  /* The style scenes — five-lever homages, never clones: no frosted\n     materials, no imported fonts (a scene's voice goes only to the\n     platform's own stack), just the temperament a scene's levers can\n     honestly reach. */\n\n  [data-scene=\"cupertino\"] {\n    /* 圆融 — the soft airy register of handheld design: the capsule is\n       the action signal (every pressable thing rounds full), vessels round out\n       dramatically, targets grow to the 44px touch ladder, and motion\n       glides on the long sheet-spring curve. The interface stays light and\n       airy — separation reads as gentle diffuse depth, not cast shadow,\n       and presses answer through the fill change, never a wash. */\n    --bs-radius-md: 0.75rem;\n    --bs-radius-lg: 1.125rem;\n    --bs-radius-xl: 1.5rem;\n    --bs-radius-2xl: 2.25rem;\n    --bs-radius-control: var(--bs-radius-full);\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.75rem;\n    --bs-control-height-lg: 3.125rem;\n    --bs-density-scale: 1.25;\n    --bs-motion-scale: 1.1;\n    --bs-ease-out: cubic-bezier(0.32, 0.72, 0, 1);\n    --bs-ease-spring: cubic-bezier(0.34, 1.1, 0.64, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.8;\n    --bs-ripple-opacity: 0;\n    /* Focus speaks the platform dialect: a crisp 2px accent outline\n       pulled inside the control's edge — no halo. */\n    --bs-focus-ring: inset 0 0 0 2px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 2px var(--bs-color-focus);\n    /* The handheld register speaks in the system voice: headlines stand\n       down from the serif — everything rides the sans stack — and labels\n       lose their brush tracking. */\n    --bs-font-serif: var(--bs-font-sans);\n    --bs-tracking-label: 0em;\n  }\n\n  /* The borrowed papers. Four of the style scenes retint the surface\n     ladder toward the register they borrow from — cupertino's clean\n     handheld white, material's neutral violet-gray, sketch's warm\n     sketchbook stock — while the paper-and-ink scenes keep the house\n     stock. Custom properties on the root resolve per theme attribute, so\n     each paper carries a light and a dark face. */\n  [data-scene=\"cupertino\"][data-theme=\"light\"],\n  [data-scene=\"cupertino\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.973 0.001 265);\n    --bs-color-surface-1: oklch(0.981 0.001 265);\n    --bs-color-surface-2: oklch(0.992 0.001 265);\n    --bs-color-surface-3: oklch(0.992 0.001 265);\n    --bs-color-surface-4: oklch(0.992 0.001 265);\n    --bs-color-surface-5: oklch(0.992 0.001 265);\n  }\n\n  [data-scene=\"cupertino\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.165 0.004 262);\n    --bs-color-surface-1: oklch(0.205 0.004 262);\n    --bs-color-surface-2: oklch(0.245 0.004 262);\n    --bs-color-surface-3: oklch(0.272 0.004 262);\n    --bs-color-surface-4: oklch(0.29 0.004 262);\n    --bs-color-surface-5: oklch(0.31 0.004 262);\n  }\n\n  [data-scene=\"expressive\"] {\n    /* 飞白 — the motion-forward register, the dry brush that races ahead\n       of the ink. Generous rounding, a quick pace, and curves that overshoot\n       on the spring — the interface answers like an instrument, not a\n       form — under a warm key light from above. Focus speaks the\n       register's dialect: the solid pigment outline. */\n    --bs-radius-sm: 0.375rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.5rem;\n    /* Every press is a pill in the expressive register, on the 32/40/48\n       container ladder. */\n    --bs-radius-control: var(--bs-radius-full);\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.5rem;\n    --bs-control-height-lg: 3rem;\n    --bs-motion-scale: 0.8;\n    --bs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);\n    --bs-ease-spring: cubic-bezier(0.34, 1.56, 0.5, 1);\n    --bs-light-x: 0.1875rem;\n    --bs-light-y: 0.1875rem;\n    --bs-light-reach: 1;\n    --bs-focus-ring: 0 0 0 3px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 3px var(--bs-color-focus);\n  }\n\n  [data-scene=\"fluent\"] {\n    /* 流水 — the measured productivity register, 行云流水: the corner\n       ladder runs 2/4/8/12 (shapes under 32px round to 2, controls 4,\n       vessels 8, sheets 12), measured rows on the 24/32/40 control ladder,\n       a brisk pace on the decelerate and standard curves, and a soft key\n       light from straight above whose shadows fall close to the element —\n       depth as quiet layering, no ripple. The paper goes neutral, both\n       faces, the register's own calm gray. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.25rem;\n    --bs-radius-lg: 0.5rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 2rem;\n    --bs-control-height-lg: 2.5rem;\n    --bs-density-scale: 0.9;\n    --bs-motion-scale: 0.85;\n    --bs-ease-out: cubic-bezier(0.1, 0.9, 0.2, 1);\n    --bs-ease-in-out: cubic-bezier(0.33, 0, 0.67, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 0.7;\n    --bs-ripple-opacity: 0;\n    /* Focus speaks the register's dialect: the edge stays neutral while a\n       2px brand underline carries the state — structure, not glow. */\n    --bs-focus-edge: var(--bs-color-border);\n    --bs-focus-ring: inset 0 -2px 0 0 var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 -2px 0 0 var(--bs-color-focus);\n  }\n\n  /* The layers: light sits on the calm gray ground with layered whites\n     rising above it; dark climbs through three gray steps. Chroma zero —\n     this register keeps no pigment in its paper. */\n  [data-scene=\"fluent\"][data-theme=\"light\"],\n  [data-scene=\"fluent\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.956 0 0);\n    --bs-color-surface-1: oklch(0.973 0 0);\n    --bs-color-surface-2: oklch(0.992 0 0);\n    --bs-color-surface-3: oklch(0.992 0 0);\n    --bs-color-surface-4: oklch(0.992 0 0);\n    --bs-color-surface-5: oklch(0.992 0 0);\n  }\n\n  [data-scene=\"fluent\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.224 0 0);\n    --bs-color-surface-1: oklch(0.251 0 0);\n    --bs-color-surface-2: oklch(0.29 0 0);\n    --bs-color-surface-3: oklch(0.315 0 0);\n    --bs-color-surface-4: oklch(0.34 0 0);\n    --bs-color-surface-5: oklch(0.365 0 0);\n  }\n\n  [data-scene=\"material\"] {\n    /* 格物 — the elevation-led register, 格物致知: the shape ladder of\n       4px small, 8px medium, 12px medium-large vessels, 16px large,\n       28px extra-large — with pill presses on the 32 / 40 / 48 container\n       ladder (the touch minimum the register is built\n       around), the emphasized curves, and the signature that gives the\n       look its name: the key light stands directly overhead, so every\n       raised surface casts a soft shadow straight down a tall ladder.\n       Presses answer with the water ripple — a crisp solid wave that\n       holds while the finger holds, then leaves quickly. */\n    --bs-radius-sm: 0.25rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.75rem;\n    --bs-radius-control: var(--bs-radius-full);\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.5rem;\n    --bs-control-height-lg: 3rem;\n    --bs-motion-scale: 0.9;\n    --bs-ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);\n    --bs-ease-in-out: cubic-bezier(0.2, 0, 0, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 1.5;\n    /* Focus speaks the register's dialect: a solid pigment outline riding\n       just outside the part — no glow. */\n    --bs-focus-ring: 0 0 0 3px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 3px var(--bs-color-focus);\n    --bs-ripple-pigment: var(--bs-color-text-primary);\n    --bs-ripple-opacity: 0.12;\n    --bs-ripple-core: 97%;\n    --bs-ripple-fade: 100%;\n    --bs-ripple-duration: calc(450ms * var(--bs-motion-scale, 1));\n    --bs-ripple-release: calc(300ms * var(--bs-motion-scale, 1));\n    --bs-ripple-ease: cubic-bezier(0.2, 0, 0, 1);\n    --bs-ripple-spread: 0.8;\n  }\n\n  /* The surface: neutral, tinted faintly violet instead of the house's\n     warm paper — the elevation-led register reads against cooler ground. */\n  [data-scene=\"material\"][data-theme=\"light\"],\n  [data-scene=\"material\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.966 0.006 300);\n    --bs-color-surface-1: oklch(0.976 0.005 300);\n    --bs-color-surface-2: oklch(0.986 0.004 300);\n    --bs-color-surface-3: oklch(0.986 0.004 300);\n    --bs-color-surface-4: oklch(0.986 0.004 300);\n    --bs-color-surface-5: oklch(0.986 0.004 300);\n  }\n\n  [data-scene=\"material\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.165 0.009 300);\n    --bs-color-surface-1: oklch(0.205 0.01 300);\n    --bs-color-surface-2: oklch(0.245 0.011 300);\n    --bs-color-surface-3: oklch(0.272 0.011 300);\n    --bs-color-surface-4: oklch(0.29 0.011 300);\n    --bs-color-surface-5: oklch(0.31 0.011 300);\n  }\n\n  [data-scene=\"sketch\"] {\n    /* 写意 — the hand-drawn register, 不求形似求神韵: the loose brush of\n       sketchbooks and comics. No frame stays straight — every radius is an\n       uneven four-corner oval (the asymmetric slash syntax of a drawn\n       box), the fully-round tokens wobble too, moving parts bounce hard on\n       the spring, whitespace loosens, and the light sits off-axis like a\n       sticker's cast shadow. This block is the first of four wobble sets —\n       the other three follow, rotated by sibling position so no two\n       elements sway alike. */\n    --bs-radius-xs: 0.3rem 0.5rem 0.4rem 0.55rem / 0.5rem 0.35rem 0.55rem 0.4rem;\n    --bs-radius-sm: 0.5rem 0.9rem 0.625rem 0.8rem / 0.8rem 0.55rem 0.9rem 0.625rem;\n    --bs-radius-md: 0.625rem 1.125rem 0.75rem 1rem / 1rem 0.625rem 1.125rem 0.75rem;\n    --bs-radius-lg: 1rem 1.625rem 1.25rem 1.875rem / 1.625rem 1rem 1.875rem 1.25rem;\n    --bs-radius-xl: 1.5rem 2.25rem 1.75rem 2.5rem / 2.25rem 1.5rem 2.5rem 1.75rem;\n    --bs-radius-2xl: 2rem 2.875rem 2.375rem 3rem / 2.875rem 2rem 3rem 2.375rem;\n    --bs-radius-full: 1.25rem 1.75rem 1.5rem 1.875rem / 1.75rem 1.25rem 1.875rem 1.5rem;\n    --bs-density-scale: 1.15;\n    --bs-motion-scale: 0.9;\n    --bs-ease-spring: cubic-bezier(0.34, 1.66, 0.64, 1);\n    --bs-stagger-step: 40ms;\n    --bs-light-x: 0.1875rem;\n    --bs-light-y: 0.1875rem;\n    --bs-light-reach: 0.85;\n    --bs-ripple-opacity: 0.18;\n    --bs-ripple-duration: calc(450ms * var(--bs-motion-scale, 1));\n  }\n\n  /* The sketchbook stock: warmer and yellower than the house paper — the\n     slightly grubby cream of a well-used drawing pad, night bleeding\n     warmer still. */\n  [data-scene=\"sketch\"][data-theme=\"light\"],\n  [data-scene=\"sketch\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.958 0.014 92);\n    --bs-color-surface-1: oklch(0.972 0.013 93);\n    --bs-color-surface-2: oklch(0.982 0.012 95);\n    --bs-color-surface-3: oklch(0.982 0.012 95);\n    --bs-color-surface-4: oklch(0.982 0.012 95);\n    --bs-color-surface-5: oklch(0.982 0.012 95);\n  }\n\n  [data-scene=\"sketch\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.165 0.012 85);\n    --bs-color-surface-1: oklch(0.205 0.013 85);\n    --bs-color-surface-2: oklch(0.245 0.014 85);\n    --bs-color-surface-3: oklch(0.272 0.014 85);\n    --bs-color-surface-4: oklch(0.29 0.014 85);\n    --bs-color-surface-5: oklch(0.31 0.014 85);\n  }\n\n  /* The three sibling sets. CSS has no random, but an element's seat among\n     its siblings is a good enough dice roll: the same layout never repeats\n     the same sway, while any one element stays put — the frame is drawn\n     once, then holds. */\n  [data-scene=\"sketch\"] :nth-child(4n + 2) {\n    --bs-radius-xs: 0.5rem 0.35rem 0.45rem 0.55rem / 0.4rem 0.55rem 0.35rem 0.5rem;\n    --bs-radius-sm: 0.85rem 0.6rem 0.95rem 0.7rem / 0.6rem 0.9rem 0.7rem 0.95rem;\n    --bs-radius-md: 1.05rem 0.7rem 1.2rem 0.8rem / 0.7rem 1.15rem 0.8rem 1.2rem;\n    --bs-radius-lg: 1.7rem 1.15rem 1.9rem 1.3rem / 1.15rem 1.8rem 1.3rem 1.95rem;\n    --bs-radius-xl: 2.4rem 1.65rem 2.6rem 1.8rem / 1.65rem 2.55rem 1.8rem 2.6rem;\n    --bs-radius-2xl: 3.05rem 2.1rem 3.25rem 2.2rem / 2.1rem 3.15rem 2.2rem 3.3rem;\n    --bs-radius-full: 1.65rem 1.3rem 1.8rem 1.35rem / 1.3rem 1.7rem 1.35rem 1.85rem;\n  }\n\n  [data-scene=\"sketch\"] :nth-child(4n + 3) {\n    --bs-radius-xs: 0.45rem 0.3rem 0.55rem 0.4rem / 0.35rem 0.5rem 0.45rem 0.55rem;\n    --bs-radius-sm: 0.7rem 1rem 0.55rem 0.85rem / 0.95rem 0.65rem 0.85rem 0.6rem;\n    --bs-radius-md: 0.85rem 1.25rem 0.7rem 1.1rem / 1.2rem 0.75rem 1.05rem 0.7rem;\n    --bs-radius-lg: 1.35rem 1.95rem 1.1rem 1.7rem / 1.9rem 1.2rem 1.75rem 1.15rem;\n    --bs-radius-xl: 2rem 2.8rem 1.7rem 2.5rem / 2.75rem 1.8rem 2.5rem 1.7rem;\n    --bs-radius-2xl: 2.7rem 3.6rem 2.3rem 3.3rem / 3.5rem 2.3rem 3.2rem 2.2rem;\n    --bs-radius-full: 1.4rem 1.9rem 1.3rem 1.75rem / 1.85rem 1.35rem 1.8rem 1.3rem;\n  }\n\n  [data-scene=\"sketch\"] :nth-child(4n) {\n    --bs-radius-xs: 0.35rem 0.55rem 0.3rem 0.5rem / 0.55rem 0.4rem 0.5rem 0.35rem;\n    --bs-radius-sm: 0.6rem 0.8rem 0.5rem 0.9rem / 0.75rem 0.55rem 0.95rem 0.65rem;\n    --bs-radius-md: 0.75rem 1rem 0.6rem 1.15rem / 0.95rem 0.7rem 1.1rem 0.8rem;\n    --bs-radius-lg: 1.2rem 1.6rem 1.05rem 1.8rem / 1.55rem 1.1rem 1.85rem 1.25rem;\n    --bs-radius-xl: 1.8rem 2.4rem 1.6rem 2.6rem / 2.3rem 1.7rem 2.7rem 1.9rem;\n    --bs-radius-2xl: 2.4rem 3.2rem 2.15rem 3.5rem / 3.1rem 2.3rem 3.6rem 2.4rem;\n    --bs-radius-full: 1.35rem 1.8rem 1.25rem 1.7rem / 1.75rem 1.4rem 1.9rem 1.45rem;\n  }\n\n\n  /* Density — decoration compresses, information never does: density scales whitespace and decoration\n     only. Type sizes and contrast stay fixed so compact can never trade away\n     readability. Control heights ride the density directly — a compact\n     workbench and an elder-friendly spacious screen are different products,\n     not the same one nudged by two pixels. */\n\n  /* The default scale sits behind :where() so a scene preset (an attribute,\n     same 0,1,0 as :root) can override it by cascade order, while the explicit\n     [data-density] tiers below still outrank scenes that come before them. */\n  :where(:root),\n  :where(:host) {\n    --bs-density-scale: 1;\n  }\n\n  :root,\n  :host,\n  /* Custom properties resolve their var() references at the declaring\n     element, so these derived tokens must re-declare on any element that\n     carries a density of its own — declared only on :root, they freeze at\n     the root's scale and a provider re-tuning --bs-density-scale on a\n     subtree would move nothing but the control heights. */\n  [data-density],\n  :host([data-density]) {\n    /* Interior control parts (thumbs, knobs, check boxes, close buttons) are\n       decoration riding a control, not the control itself: they scale with\n       density and keep no readable floor, so a compact density actually\n       makes them smaller. */\n    --bs-part-size-sm: calc(1rem * var(--bs-density-scale));\n    --bs-part-size-md: calc(1.25rem * var(--bs-density-scale));\n    --bs-part-size-lg: calc(1.75rem * var(--bs-density-scale));\n\n    /* Density-scaled whitespace. */\n    --bs-padding-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-padding-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-padding-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-padding-lg: calc(var(--bs-space-4) * var(--bs-density-scale));\n    --bs-padding-xl: calc(var(--bs-space-6) * var(--bs-density-scale));\n    --bs-gap-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-gap-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-gap-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-gap-lg: calc(var(--bs-space-5) * var(--bs-density-scale));\n    --bs-gap-xl: calc(var(--bs-space-8) * var(--bs-density-scale));\n  }\n\n  /* Control heights per tier — the cross-system ladders (28/32/40 sits at\n     default; compact matches the Fiori/Ant workbench register; spacious\n     reaches the 48px targets elderly-vision research asks for). The base\n     tier sits behind :where() like the scale above, so a scene's bundled\n     ladder overrides it by cascade order while the explicit [data-density]\n     tiers below still outrank both. */\n  :where(:root),\n  :where(:host) {\n    --bs-control-height-sm: 1.75rem;\n    --bs-control-height-md: 2rem;\n    --bs-control-height-lg: 2.5rem;\n  }\n\n  [data-density=\"compact\"],\n  :host([data-density=\"compact\"]) {\n    --bs-density-scale: 0.75;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n  }\n\n  [data-density=\"comfortable\"],\n  :host([data-density=\"comfortable\"]) {\n    --bs-density-scale: 1.25;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n  }\n\n  [data-density=\"spacious\"],\n  :host([data-density=\"spacious\"]) {\n    --bs-density-scale: 1.5;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n  }\n\n\n  /* Contrast tier — softness comes from light and shadow, never from low contrast: the aesthetic softens through\n     light, never through gray-on-gray. The high tier pulls secondary text and\n     borders up to primary strength and deepens the focus halo; it exists so\n     older and low-vision users get the same design, just louder. Surface\n     steps stay untouched — rows signal hover by one step of shade, and\n     flattening the ladder would silence every hover in the system. */\n\n  [data-contrast=\"high\"],\n  :host([data-contrast=\"high\"]) {\n    --bs-color-text-secondary: var(--bs-color-text-primary);\n    --bs-color-text-tertiary: var(--bs-color-text-secondary);\n    --bs-color-border: var(--bs-color-border-strong);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 34%, transparent);\n  }\n\n  [data-theme=\"light\"][data-contrast=\"high\"],\n  :host([data-theme=\"light\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-400);\n  }\n\n  [data-theme=\"dark\"][data-contrast=\"high\"],\n  :host([data-theme=\"dark\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-500);\n  }\n\n\n  /* Overlay stacking — one shared base for every dismissible layer (dialog,\n     popover, menu, select, …), ordered by zag's --layer-index offset so any\n     nesting combination stacks correctly. Per-component bases are forbidden. */\n  :root,\n  :host {\n    --bs-z-overlay: 1000;\n  }\n}\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/tokens",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Design tokens for By Sages Elements — DTCG source compiled to CSS variables and JavaScript: surface ramps, elevation from light, density tiers, themes",
   "keywords": [
     "css",
@@ -47,7 +47,7 @@
     }
   },
   "devDependencies": {
-    "style-dictionary": "5.5.3"
+    "style-dictionary": "5.5.4"
   },
   "scripts": {
     "build": "node scripts/build.mjs",