@gradeui/ui 2.1.0 → 3.1.0

package/styles/globals.css

@@ -0,0 +1,2402 @@
+@import "tailwindcss";
+@import "@gradeui/core/tokens.css"; /* primitive ramps + semantic aliases + type scale (layers 1-2) */
+
+/* v4 NATIVE THEME — the v3 config bridge (tailwind.config.ts →
+   tailwind-preset.ts) is retired (THEME-MIGRATION.md Phase A). Everything
+   the preset defined lives here as native @theme declarations.
+
+   Source scanning: v4's automatic detection covers everything inside this
+   package (components/, lib/, styles/ — INCLUDING the .md sidecars, whose
+   class mentions the old @config build was already picking up via
+   auto-detection; the v3 `content` globs were additive, not exclusive).
+   Only out-of-package sources need explicit @source directives. */
+
+/* Playground scaffolds — siloed dev-only set rendered by Studio's
+   Playground tab. Scanning them here means arbitrary Tailwind values
+   (`h-[600px]`, `md:grid-cols-[minmax(0,440px)_1fr]`, etc.) get compiled
+   into dist/styles.css — the bundle Fast Frame loads in its iframe.
+   Without this, arbitrary classes would be present in the JSX but
+   generate no CSS rules. (Path is relative to this file.) */
+@source "../../studio/src/playbook/layouts/scaffolds-playground/*.{jsx,tsx}";
+
+/* v3 `darkMode: "class"` — same selector the @config compat layer
+   generated, so dark: variants are unchanged. */
+@custom-variant dark (&:is(.dark *));
+
+@plugin "tailwindcss-animate";
+
+/* The theme bridge. `inline` because every value here references a runtime
+   CSS variable (the GradeThemeProvider contract) — utilities must carry
+   the var() reference itself, not a second-hop --color-* theme var.
+   `reference` so none of these are re-emitted into :root (the runtime
+   vars are authored in @gradeui/core/tokens.css and the :root blocks
+   below; emitting e.g. `--shadow-lift: var(--shadow-lift)` would be
+   circular). Net effect: byte-compatible with the old @config output.
+
+   Fonts are deliberately ABSENT: the runtime vars are literally named
+   --font-sans / --font-mono (same as v4's theme namespace), so preflight's
+   `--default-font-family: var(--font-sans)` already lands on them and the
+   font-sans/font-mono utilities resolve correctly with no declaration —
+   declaring them here would be the one truly circular case. */
+/* -- Type scale extension — `2xs` (11px) is the dense tool-panel step
+   below `xs`, used by the Studio inspector and other Figma-density
+   surfaces. Declared in a PLAIN @theme block (not inline/reference) so
+   the utility references var(--text-2xs) — that's what lets the theme
+   generator re-pitch the whole named ladder at runtime (Phase B2): a
+   modular scale writes --text-2xs…--text-7xl to :root and every text-*
+   utility follows. -- */
+@theme {
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
+}
+
+@theme inline reference {
+  /* -- Brand color ramps — values live in @gradeui/core as --gds-* vars. -- */
+  --color-rds-green: var(--gds-green);
+  --color-rds-green-50: var(--gds-green-50);
+  --color-rds-green-100: var(--gds-green-100);
+  --color-rds-green-200: var(--gds-green-200);
+  --color-rds-green-300: var(--gds-green-300);
+  --color-rds-green-400: var(--gds-green-400);
+  --color-rds-green-500: var(--gds-green-500);
+  --color-rds-green-600: var(--gds-green-600);
+  --color-rds-green-700: var(--gds-green-700);
+  --color-rds-green-800: var(--gds-green-800);
+  --color-rds-green-900: var(--gds-green-900);
+  --color-rds-green-950: var(--gds-green-950);
+  --color-rds-yellow: var(--gds-yellow);
+  --color-rds-yellow-50: var(--gds-yellow-50);
+  --color-rds-yellow-100: var(--gds-yellow-100);
+  --color-rds-yellow-200: var(--gds-yellow-200);
+  --color-rds-yellow-300: var(--gds-yellow-300);
+  --color-rds-yellow-400: var(--gds-yellow-400);
+  --color-rds-yellow-500: var(--gds-yellow-500);
+  --color-rds-yellow-600: var(--gds-yellow-600);
+  --color-rds-yellow-700: var(--gds-yellow-700);
+  --color-rds-yellow-800: var(--gds-yellow-800);
+  --color-rds-yellow-900: var(--gds-yellow-900);
+  --color-rds-orange: var(--gds-orange);
+  --color-rds-orange-50: var(--gds-orange-50);
+  --color-rds-orange-100: var(--gds-orange-100);
+  --color-rds-orange-200: var(--gds-orange-200);
+  --color-rds-orange-300: var(--gds-orange-300);
+  --color-rds-orange-400: var(--gds-orange-400);
+  --color-rds-orange-500: var(--gds-orange-500);
+  --color-rds-orange-600: var(--gds-orange-600);
+  --color-rds-orange-700: var(--gds-orange-700);
+  --color-rds-orange-800: var(--gds-orange-800);
+  --color-rds-orange-900: var(--gds-orange-900);
+  --color-rds-red: var(--gds-red);
+  --color-rds-red-50: var(--gds-red-50);
+  --color-rds-red-100: var(--gds-red-100);
+  --color-rds-red-200: var(--gds-red-200);
+  --color-rds-red-300: var(--gds-red-300);
+  --color-rds-red-400: var(--gds-red-400);
+  --color-rds-red-500: var(--gds-red-500);
+  --color-rds-red-600: var(--gds-red-600);
+  --color-rds-red-700: var(--gds-red-700);
+  --color-rds-red-800: var(--gds-red-800);
+  --color-rds-red-900: var(--gds-red-900);
+  --color-rds-teal: var(--gds-teal);
+  --color-rds-teal-50: var(--gds-teal-50);
+  --color-rds-teal-100: var(--gds-teal-100);
+  --color-rds-teal-200: var(--gds-teal-200);
+  --color-rds-teal-300: var(--gds-teal-300);
+  --color-rds-teal-400: var(--gds-teal-400);
+  --color-rds-teal-500: var(--gds-teal-500);
+  --color-rds-teal-600: var(--gds-teal-600);
+  --color-rds-teal-700: var(--gds-teal-700);
+  --color-rds-teal-800: var(--gds-teal-800);
+  --color-rds-teal-900: var(--gds-teal-900);
+  --color-rds-teal-950: var(--gds-teal-950);
+  --color-rds-navy: var(--gds-navy);
+  --color-rds-navy-50: var(--gds-navy-50);
+  --color-rds-navy-100: var(--gds-navy-100);
+  --color-rds-navy-200: var(--gds-navy-200);
+  --color-rds-navy-300: var(--gds-navy-300);
+  --color-rds-navy-400: var(--gds-navy-400);
+  --color-rds-navy-500: var(--gds-navy-500);
+  --color-rds-navy-600: var(--gds-navy-600);
+  --color-rds-navy-700: var(--gds-navy-700);
+  --color-rds-navy-800: var(--gds-navy-800);
+  --color-rds-navy-900: var(--gds-navy-900);
+  --color-rds-blue: var(--gds-blue);
+  --color-rds-blue-50: var(--gds-blue-50);
+  --color-rds-blue-100: var(--gds-blue-100);
+  --color-rds-blue-200: var(--gds-blue-200);
+  --color-rds-blue-300: var(--gds-blue-300);
+  --color-rds-blue-400: var(--gds-blue-400);
+  --color-rds-blue-500: var(--gds-blue-500);
+  --color-rds-blue-600: var(--gds-blue-600);
+  --color-rds-blue-700: var(--gds-blue-700);
+  --color-rds-blue-800: var(--gds-blue-800);
+  --color-rds-blue-900: var(--gds-blue-900);
+  --color-rds-gray-50: var(--gds-gray-50);
+  --color-rds-gray-100: var(--gds-gray-100);
+  --color-rds-gray-200: var(--gds-gray-200);
+  --color-rds-gray-300: var(--gds-gray-300);
+  --color-rds-gray-400: var(--gds-gray-400);
+  --color-rds-gray-500: var(--gds-gray-500);
+  --color-rds-gray-600: var(--gds-gray-600);
+  --color-rds-gray-700: var(--gds-gray-700);
+  --color-rds-gray-800: var(--gds-gray-800);
+  --color-rds-gray-900: var(--gds-gray-900);
+  --color-rds-gray-950: var(--gds-gray-950);
+  --color-rds-black: var(--gds-black);
+  --color-rds-white: var(--gds-white);
+
+  /* -- Semantic roles — runtime vars hold bare "L C H" OKLCH triplets,
+     wrapped with oklch() at use. Opacity shortcuts (bg-primary/50) come
+     out as color-mix() under v4 — visually identical to the old
+     <alpha-value> substitution. -- */
+  --color-border: oklch(var(--border));
+  --color-input: oklch(var(--input));
+  --color-ring: oklch(var(--ring));
+  --color-background: oklch(var(--background));
+  --color-foreground: oklch(var(--foreground));
+  --color-primary: oklch(var(--primary));
+  --color-primary-foreground: oklch(var(--primary-foreground));
+  --color-secondary: oklch(var(--secondary));
+  --color-secondary-foreground: oklch(var(--secondary-foreground));
+  --color-destructive: oklch(var(--destructive));
+  --color-destructive-foreground: oklch(var(--destructive-foreground));
+  /* Alert surface pair — paler tinted bg + deeper on-surface text. */
+  --color-destructive-soft: oklch(var(--destructive-soft));
+  --color-destructive-deep: oklch(var(--destructive-deep));
+  --color-muted: oklch(var(--muted));
+  --color-muted-foreground: oklch(var(--muted-foreground));
+  --color-accent: oklch(var(--accent));
+  --color-accent-foreground: oklch(var(--accent-foreground));
+  --color-popover: oklch(var(--popover));
+  --color-popover-foreground: oklch(var(--popover-foreground));
+  --color-card: oklch(var(--card));
+  --color-card-foreground: oklch(var(--card-foreground));
+  /* Status colours — each exposes `-soft` / `-deep` siblings, mapping to
+     the tinted alert surface + readable text tokens generated by the
+     theme pipeline (lib/themes/oklch.ts#deriveAlertPair). */
+  --color-success: oklch(var(--success));
+  --color-success-soft: oklch(var(--success-soft));
+  --color-success-deep: oklch(var(--success-deep));
+  --color-warning: oklch(var(--warning));
+  --color-warning-soft: oklch(var(--warning-soft));
+  --color-warning-deep: oklch(var(--warning-deep));
+  --color-info: oklch(var(--info));
+  --color-info-soft: oklch(var(--info-soft));
+  --color-info-deep: oklch(var(--info-deep));
+  --color-highlight: oklch(var(--highlight));
+  --color-highlight-soft: oklch(var(--highlight-soft));
+  --color-highlight-deep: oklch(var(--highlight-deep));
+  /* Selection pair — solid fill, on-fill text, ambient glow halo. */
+  --color-selected: oklch(var(--selected));
+  --color-selected-foreground: oklch(var(--selected-foreground));
+  --color-selected-glow: oklch(var(--selected-glow));
+  /* Chart series palette — derived from theme hues by the generator. */
+  --color-chart-1: oklch(var(--chart-1));
+  --color-chart-2: oklch(var(--chart-2));
+  --color-chart-3: oklch(var(--chart-3));
+  --color-chart-4: oklch(var(--chart-4));
+  --color-chart-5: oklch(var(--chart-5));
+
+  /* -- Role ramp families (THEME-MIGRATION.md B4) — every semantic alias
+     is a whole ramp: status displays many ways (soft 100 bg, solid 600
+     fill, 800 text). The generator writes --gds-<role>-<step> OKLCH
+     triplets to :root (applyThemeToRoot); each step falls back to the
+     flat role triplet so e.g. bg-success-600 degrades to bg-success when
+     no generated theme is active. `neutral` is deliberately ABSENT from
+     the utility layer — --color-neutral-* would shadow Tailwind's
+     default neutral palette; its family ships as runtime vars only. -- */
+  --color-primary-50: oklch(var(--gds-primary-50, var(--primary)));
+  --color-primary-100: oklch(var(--gds-primary-100, var(--primary)));
+  --color-primary-200: oklch(var(--gds-primary-200, var(--primary)));
+  --color-primary-300: oklch(var(--gds-primary-300, var(--primary)));
+  --color-primary-400: oklch(var(--gds-primary-400, var(--primary)));
+  --color-primary-500: oklch(var(--gds-primary-500, var(--primary)));
+  --color-primary-600: oklch(var(--gds-primary-600, var(--primary)));
+  --color-primary-700: oklch(var(--gds-primary-700, var(--primary)));
+  --color-primary-800: oklch(var(--gds-primary-800, var(--primary)));
+  --color-primary-900: oklch(var(--gds-primary-900, var(--primary)));
+  --color-primary-950: oklch(var(--gds-primary-950, var(--primary)));
+  --color-accent-50: oklch(var(--gds-accent-50, var(--accent)));
+  --color-accent-100: oklch(var(--gds-accent-100, var(--accent)));
+  --color-accent-200: oklch(var(--gds-accent-200, var(--accent)));
+  --color-accent-300: oklch(var(--gds-accent-300, var(--accent)));
+  --color-accent-400: oklch(var(--gds-accent-400, var(--accent)));
+  --color-accent-500: oklch(var(--gds-accent-500, var(--accent)));
+  --color-accent-600: oklch(var(--gds-accent-600, var(--accent)));
+  --color-accent-700: oklch(var(--gds-accent-700, var(--accent)));
+  --color-accent-800: oklch(var(--gds-accent-800, var(--accent)));
+  --color-accent-900: oklch(var(--gds-accent-900, var(--accent)));
+  --color-accent-950: oklch(var(--gds-accent-950, var(--accent)));
+  --color-success-50: oklch(var(--gds-success-50, var(--success)));
+  --color-success-100: oklch(var(--gds-success-100, var(--success)));
+  --color-success-200: oklch(var(--gds-success-200, var(--success)));
+  --color-success-300: oklch(var(--gds-success-300, var(--success)));
+  --color-success-400: oklch(var(--gds-success-400, var(--success)));
+  --color-success-500: oklch(var(--gds-success-500, var(--success)));
+  --color-success-600: oklch(var(--gds-success-600, var(--success)));
+  --color-success-700: oklch(var(--gds-success-700, var(--success)));
+  --color-success-800: oklch(var(--gds-success-800, var(--success)));
+  --color-success-900: oklch(var(--gds-success-900, var(--success)));
+  --color-success-950: oklch(var(--gds-success-950, var(--success)));
+  --color-warning-50: oklch(var(--gds-warning-50, var(--warning)));
+  --color-warning-100: oklch(var(--gds-warning-100, var(--warning)));
+  --color-warning-200: oklch(var(--gds-warning-200, var(--warning)));
+  --color-warning-300: oklch(var(--gds-warning-300, var(--warning)));
+  --color-warning-400: oklch(var(--gds-warning-400, var(--warning)));
+  --color-warning-500: oklch(var(--gds-warning-500, var(--warning)));
+  --color-warning-600: oklch(var(--gds-warning-600, var(--warning)));
+  --color-warning-700: oklch(var(--gds-warning-700, var(--warning)));
+  --color-warning-800: oklch(var(--gds-warning-800, var(--warning)));
+  --color-warning-900: oklch(var(--gds-warning-900, var(--warning)));
+  --color-warning-950: oklch(var(--gds-warning-950, var(--warning)));
+  --color-info-50: oklch(var(--gds-info-50, var(--info)));
+  --color-info-100: oklch(var(--gds-info-100, var(--info)));
+  --color-info-200: oklch(var(--gds-info-200, var(--info)));
+  --color-info-300: oklch(var(--gds-info-300, var(--info)));
+  --color-info-400: oklch(var(--gds-info-400, var(--info)));
+  --color-info-500: oklch(var(--gds-info-500, var(--info)));
+  --color-info-600: oklch(var(--gds-info-600, var(--info)));
+  --color-info-700: oklch(var(--gds-info-700, var(--info)));
+  --color-info-800: oklch(var(--gds-info-800, var(--info)));
+  --color-info-900: oklch(var(--gds-info-900, var(--info)));
+  --color-info-950: oklch(var(--gds-info-950, var(--info)));
+  --color-highlight-50: oklch(var(--gds-highlight-50, var(--highlight)));
+  --color-highlight-100: oklch(var(--gds-highlight-100, var(--highlight)));
+  --color-highlight-200: oklch(var(--gds-highlight-200, var(--highlight)));
+  --color-highlight-300: oklch(var(--gds-highlight-300, var(--highlight)));
+  --color-highlight-400: oklch(var(--gds-highlight-400, var(--highlight)));
+  --color-highlight-500: oklch(var(--gds-highlight-500, var(--highlight)));
+  --color-highlight-600: oklch(var(--gds-highlight-600, var(--highlight)));
+  --color-highlight-700: oklch(var(--gds-highlight-700, var(--highlight)));
+  --color-highlight-800: oklch(var(--gds-highlight-800, var(--highlight)));
+  --color-highlight-900: oklch(var(--gds-highlight-900, var(--highlight)));
+  --color-highlight-950: oklch(var(--gds-highlight-950, var(--highlight)));
+  --color-destructive-50: oklch(var(--gds-destructive-50, var(--destructive)));
+  --color-destructive-100: oklch(var(--gds-destructive-100, var(--destructive)));
+  --color-destructive-200: oklch(var(--gds-destructive-200, var(--destructive)));
+  --color-destructive-300: oklch(var(--gds-destructive-300, var(--destructive)));
+  --color-destructive-400: oklch(var(--gds-destructive-400, var(--destructive)));
+  --color-destructive-500: oklch(var(--gds-destructive-500, var(--destructive)));
+  --color-destructive-600: oklch(var(--gds-destructive-600, var(--destructive)));
+  --color-destructive-700: oklch(var(--gds-destructive-700, var(--destructive)));
+  --color-destructive-800: oklch(var(--gds-destructive-800, var(--destructive)));
+  --color-destructive-900: oklch(var(--gds-destructive-900, var(--destructive)));
+  --color-destructive-950: oklch(var(--gds-destructive-950, var(--destructive)));
+
+  /* Surface backgrounds — `bg-surface-glass` etc. work alongside the
+     `.gds-surface-*` classes (those add backdrop-filter). */
+  --color-surface-solid: var(--surface-solid);
+  --color-surface-translucent: var(--surface-translucent);
+  --color-surface-glass: var(--surface-glass);
+  --color-surface-glass-strong: var(--surface-glass-strong);
+
+  /* -- Radius — pinned to the theme's --radius base. -- */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  /* -- Presence — elevation tokens exposed both as semantic
+     `shadow-elevation-N` utilities AND as overrides of Tailwind's default
+     `shadow-sm/md/lg/xl/2xl` scale so existing call sites inherit the new
+     system without code changes. See PRESENCE.md.
+     (`shadow-none` stays v4's static `0 0 #0000` — that's what the old
+     build shipped too; the preset's `none: var(--elevation-0)` never won.) */
+  --shadow: var(--elevation-2);
+  --shadow-sm: var(--elevation-1);
+  --shadow-md: var(--elevation-4);
+  --shadow-lg: var(--elevation-5);
+  --shadow-xl: var(--elevation-5);
+  --shadow-2xl: var(--elevation-5);
+  --shadow-inner: var(--shadow-pressed-bevel);
+  /* Explicit elevation levels (preferred for new code) */
+  --shadow-elevation-0: var(--elevation-0);
+  --shadow-elevation-1: var(--elevation-1);
+  --shadow-elevation-2: var(--elevation-2);
+  --shadow-elevation-3: var(--elevation-3);
+  --shadow-elevation-4: var(--elevation-4);
+  --shadow-elevation-5: var(--elevation-5);
+  /* State variants for raised/tactile surfaces */
+  --shadow-raised: var(--elevation-3);
+  --shadow-hot: var(--elevation-hot);
+  --shadow-pressed: var(--elevation-pressed);
+  /* Single-layer atoms (when you need bevel-only / lift-only) */
+  --shadow-bevel-hi: var(--shadow-bevel-hi);
+  --shadow-bevel-lo: var(--shadow-bevel-lo);
+  --shadow-contact: var(--shadow-contact);
+  --shadow-lift: var(--shadow-lift);
+  --shadow-lift-deep: var(--shadow-lift-deep);
+  --shadow-heat-inner: var(--shadow-heat-inner);
+  --shadow-heat-outer: var(--shadow-heat-outer);
+
+  /* -- Backdrop blur (glass surfaces) — v4 shares the --blur-* namespace
+     between blur-* and backdrop-blur-*; only the backdrop forms are part
+     of the public API. -- */
+  --blur-glass: var(--surface-blur-glass);
+  --blur-glass-strong: var(--surface-blur-strong);
+  --blur-subtle: var(--surface-blur-subtle);
+
+  /* -- Motion -- */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-fade-out: fade-out 0.2s ease-in;
+  --animate-scale-in: scale-in 0.15s ease-out;
+  --animate-slide-in-from-top: slide-in-from-top 0.2s ease-out;
+  --animate-slide-in-from-bottom: slide-in-from-bottom 0.2s ease-out;
+  --animate-slide-in-from-left: slide-in-from-left 0.2s ease-out;
+  --animate-slide-in-from-right: slide-in-from-right 0.2s ease-out;
+  --animate-energy-pulse: energy-pulse 2s ease-in-out infinite;
+  --animate-shimmer: shimmer 2s linear infinite;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes slide-in-from-top {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes slide-in-from-bottom {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes slide-in-from-left {
+    from {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @keyframes slide-in-from-right {
+    from {
+      opacity: 0;
+      transform: translateX(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @keyframes energy-pulse {
+    0%,
+    100% {
+      opacity: 1;
+      box-shadow: 0 0 0 0 oklch(var(--accent) / 0.4);
+    }
+    50% {
+      opacity: 0.8;
+      box-shadow: 0 0 0 8px oklch(var(--accent) / 0);
+    }
+  }
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+}
+
+/* Elevation/presence shadow utilities are typed at runtime (Studio output,
+   generated screens), so the scanner never sees them in source. v4's
+   `@source inline(...)` force-emits them — this replaces the JS `safelist`
+   that v4 removed. */
+@source inline("shadow-{elevation-0,elevation-1,elevation-2,elevation-3,elevation-4,elevation-5,raised,hot,pressed,bevel-hi,bevel-lo,contact,lift,lift-deep,heat-inner,heat-outer}");
+
+/* The Studio inspector's WHOLE token vocabulary — every class the
+   TokenField controls can mint at runtime. None of these literals appear
+   in scanned source (they're assembled from registry scales while
+   editing), so without this block they'd produce no CSS in Fast Frame —
+   the "blend modes don't do anything" bug, one family at a time. Finite
+   sets, so safelisting is cheap and correct. */
+@source inline("mix-blend-{normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,difference,exclusion,hue,saturation,color,luminosity}");
+@source inline("opacity-{0,5,10,20,30,40,50,60,70,80,90,100}");
+@source inline("text-{2xs,xs,sm,base,lg,xl,2xl,3xl,4xl,5xl}");
+@source inline("font-{thin,extralight,light,normal,medium,semibold,bold,extrabold,black}");
+@source inline("rounded{,-none,-sm,-md,-lg,-xl,-2xl,-3xl,-full}");
+@source inline("rounded-{tl,tr,br,bl,t,r,b,l}{,-none,-sm,-md,-lg,-xl,-2xl,-3xl,-full}");
+@source inline("{p,m}{,t,r,b,l,x,y}-{0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16,20,24}");
+@source inline("gap-{0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,8,10,12}");
+@source inline("grid-cols-{1,2,3,4,5,6,8,12}");
+@source inline("shadow{,-none,-sm,-md,-lg,-xl,-2xl,-inner}");
+@source inline("bg-{background,card,muted,secondary,accent,primary,destructive,transparent}");
+/* Border family — the inspector's BorderGroup mints every one of these at
+   runtime (side-aware widths, styles, colours, and ring-based inside/outside
+   positions). Without the force-emit, anything the scanner hasn't seen in
+   source (border-4, border-t-8, ring-inset…) silently renders as no CSS in
+   Fast Frame — the ">2px borders don't work" bug. */
+@source inline("border{,-t,-r,-b,-l,-x,-y}{,-0,-2,-4,-8}");
+@source inline("border-{solid,dashed,dotted,double}");
+@source inline("border{,-t,-r,-b,-l}-{border,foreground,primary,muted-foreground,destructive,ring}");
+@source inline("ring{,-0,-1,-2,-4,-8}");
+@source inline("ring-inset");
+@source inline("ring-{border,foreground,primary,muted-foreground,destructive,ring}");
+/* Typography family — the inspector's TypographyGroup mints these at
+   runtime (line-height, letter-spacing, text-align). Same force-emit
+   rationale as the border/blend families above. */
+@source inline("leading-{none,tight,snug,normal,relaxed,loose}");
+@source inline("tracking-{tighter,tight,normal,wide,wider,widest}");
+@source inline("text-{left,center,right,justify}");
+/* Display sizes + responsive variants — generated heroes lean on
+   `text-6xl`/`md:text-8xl`-style ladders that never appear in scanned
+   source, so the responsive variants silently no-oped in Fast Frame.
+   sm/md/lg cover BOTH model output and everything the inspector's
+   BreakpointOverridesEditor can mint (size, weight, line-height,
+   tracking, align — keep in sync with EDITABLE_BREAKPOINTS). */
+@source inline("{,sm:,md:,lg:}text-{6xl,7xl,8xl,9xl}");
+@source inline("{sm:,md:,lg:}text-{2xs,xs,sm,base,lg,xl,2xl,3xl,4xl,5xl}");
+@source inline("{sm:,md:,lg:}font-{thin,extralight,light,normal,medium,semibold,bold,extrabold,black}");
+@source inline("{sm:,md:,lg:}leading-{none,tight,snug,normal,relaxed,loose}");
+@source inline("{sm:,md:,lg:}tracking-{tighter,tight,normal,wide,wider,widest}");
+@source inline("{sm:,md:,lg:}text-{left,center,right,justify}");
+/* Gradient-text + gradient-stop recipe — `bg-clip-text text-transparent
+   bg-gradient-to-b from-foreground to-foreground/75` is the canonical
+   generated-hero headline. All of it is runtime-typed (model output),
+   none of it appears in scanned source. Stops cover the semantic tokens
+   at full strength plus a sensible opacity ladder. */
+@source inline("bg-clip-text");
+@source inline("text-transparent");
+@source inline("bg-gradient-to-{t,tr,r,br,b,bl,l,tl}");
+@source inline("{from,via,to}-{background,foreground,card,card-foreground,muted,muted-foreground,primary,primary-foreground,secondary,accent,destructive,border,transparent,white,black}");
+@source inline("{from,via,to}-{background,foreground,muted,primary,secondary,accent,white,black}/{10,20,25,30,40,50,60,70,75,80,90}");
+/* Animate-in vocabulary (tailwindcss-animate enter/exit modifiers) +
+   easing — generated screens compose `animate-in fade-in
+   slide-in-from-top`-style entrances at runtime, so the scanner never
+   sees the pieces in source. Until the v4 native-@theme migration these
+   leaked into the build by accident (the scanner picked them out of
+   tailwind-preset.ts comment/value text); now they're force-emitted
+   deliberately. */
+@source inline("fade-{in,out}");
+@source inline("slide-in-from-{top,bottom,left,right}");
+@source inline("ease-{in,out,in-out}");
+/* Role ramp family vocabulary (THEME-MIGRATION.md B4) — bg/text/border
+   at every step for every themed role. Runtime-typed (model output +
+   future inspector token picker), so force-emit like the other
+   families. The --color-<role>-<step> @theme entries below define the
+   values; the generator's --gds-<role>-<step> vars make them live. */
+@source inline("bg-{primary,accent,success,warning,info,highlight,destructive}-{50,100,200,300,400,500,600,700,800,900,950}");
+@source inline("text-{primary,accent,success,warning,info,highlight,destructive}-{50,100,200,300,400,500,600,700,800,900,950}");
+@source inline("border-{primary,accent,success,warning,info,highlight,destructive}-{50,100,200,300,400,500,600,700,800,900,950}");
+/* Parity holdovers from the same accidental scan — shipped in every
+   previous dist/styles.css, kept so no runtime-typed class loses its
+   rules. TODO(follow-up): widen bg-surface-glass to the full
+   bg-surface-{solid,translucent,glass,glass-strong} family as a
+   deliberate (additive) API decision, and decide whether the two
+   playground measurements below should live in a scaffold instead. */
+@source inline("bg-surface-glass");
+@source inline("h-[600px]");
+@source inline("md:grid-cols-[minmax(0,440px)_1fr]");
+
+/* ============================================
+   GRADE DESIGN SYSTEM - COMPONENT-LAYER TOKENS
+   ============================================ */
+
+:root {
+  /* Brand color ramps, neutral grays, semantic aliases (--gds-success …),
+     spacing scale, and border radii moved to @gradeui/core — see the
+     `@import "@gradeui/core/tokens.css"` at the top of this file and
+     packages/core/styles/tokens.css. Component tokens stay below. */
+  /* ============================================
+     ELEVATION SYSTEM
+     ============================================
+     A single vocabulary for every box-shadow in the DS. Three layers:
+
+     1. ATOMIC SUB-TOKENS — `-y` (y-offset), `-blur`, `-spread`, `-alpha`.
+        These are the bare numbers a theme tweaks to tune "depth" globally
+        without touching component CSS. e.g. lowering `--shadow-lift-alpha`
+        across the board gives the whole system a "lighter" feel.
+
+     2. COMPOSED LAYER TOKENS — full box-shadow expressions for one layer
+        each (`--shadow-bevel-hi`, `--shadow-contact`, `--shadow-lift`,
+        etc.). Components compose layers into a complete shadow stack
+        without having to know the atomic numbers.
+
+     3. ELEVATION PRESETS — `--elevation-0` through `--elevation-5` plus
+        state variants (`--elevation-hot`, `--elevation-pressed`). The
+        default contract: components read these, not the layers, unless
+        they're doing something custom (Button raised, custom cards).
+
+     Light source convention: light comes from above. Bevel-hi sits at
+     the top edge, bevel-lo at the bottom, drops fall downward (positive
+     y). Flipping this in a future "inverse light" theme = changing the
+     atomic y-offsets to negative; no component CSS changes.
+
+     Color convention:
+       bevel-hi   — white (the highlight)
+       bevel-lo   — black (the undercut)
+       contact    — black (tight close drop)
+       lift       — black (diffuse ambient drop)
+       heat-inner — var(--btn-glow) (tonal hover bloom, inset from bottom)
+       heat-outer — var(--btn-glow) (tonal hover bloom, outer drop)
+     -------------------------------------------- */
+
+  /* -- Layer 1: bevel-hi (top inset highlight) -- */
+  --shadow-bevel-hi-y: 1px;
+  --shadow-bevel-hi-alpha: 0.12;
+  --shadow-bevel-hi: inset 0 var(--shadow-bevel-hi-y) 0 oklch(1 0 0 / var(--shadow-bevel-hi-alpha));
+
+  /* -- Layer 2: bevel-lo (bottom inset shadow) -- */
+  --shadow-bevel-lo-y: 1px;
+  --shadow-bevel-lo-alpha: 0.30;
+  --shadow-bevel-lo: inset 0 calc(-1 * var(--shadow-bevel-lo-y)) 0 oklch(0 0 0 / var(--shadow-bevel-lo-alpha));
+
+  /* -- Layer 3: contact (tight outer drop, the "sitting on a surface" feel) -- */
+  --shadow-contact-y: 1px;
+  --shadow-contact-blur: 2px;
+  --shadow-contact-alpha: 0.10;
+  --shadow-contact: 0 var(--shadow-contact-y) var(--shadow-contact-blur) oklch(0 0 0 / var(--shadow-contact-alpha));
+
+  /* -- Layer 4: lift (diffuse outer drop, the "floating" feel) -- */
+  --shadow-lift-y: 4px;
+  --shadow-lift-blur: 12px;
+  --shadow-lift-alpha: 0.18;
+  --shadow-lift: 0 var(--shadow-lift-y) var(--shadow-lift-blur) oklch(0 0 0 / var(--shadow-lift-alpha));
+
+  /* -- Layer 5: lift-deep (deeper diffuse drop for dialogs/sheets) -- */
+  --shadow-lift-deep-y: 16px;
+  --shadow-lift-deep-blur: 40px;
+  --shadow-lift-deep-alpha: 0.28;
+  --shadow-lift-deep: 0 var(--shadow-lift-deep-y) var(--shadow-lift-deep-blur) oklch(0 0 0 / var(--shadow-lift-deep-alpha));
+
+  /* -- Layer 6: heat-inner (tonal hover bloom, bleeds in from bottom) -- */
+  --shadow-heat-inner-y: 10px;
+  --shadow-heat-inner-blur: 24px;
+  --shadow-heat-inner-spread: 4px;
+  --shadow-heat-inner-alpha: 0.55;
+  --shadow-heat-inner: inset 0 calc(-1 * var(--shadow-heat-inner-y)) var(--shadow-heat-inner-blur) calc(-1 * var(--shadow-heat-inner-spread)) oklch(var(--btn-glow, var(--selected-glow)) / var(--shadow-heat-inner-alpha));
+
+  /* -- Layer 7: heat-outer (tonal hover bloom, escapes outward) -- */
+  --shadow-heat-outer-y: 6px;
+  --shadow-heat-outer-blur: 18px;
+  --shadow-heat-outer-alpha: 0.30;
+  --shadow-heat-outer: 0 var(--shadow-heat-outer-y) var(--shadow-heat-outer-blur) oklch(var(--btn-glow, var(--selected-glow)) / var(--shadow-heat-outer-alpha));
+
+  /* -- Layer 8: pressed (inset shadow simulating a key push) -- */
+  --shadow-pressed-y: 2px;
+  --shadow-pressed-blur: 4px;
+  --shadow-pressed-alpha: 0.45;
+  --shadow-pressed-bevel: inset 0 var(--shadow-pressed-y) var(--shadow-pressed-blur) oklch(0 0 0 / var(--shadow-pressed-alpha));
+
+  /* -- Composed elevation presets --
+     0 = flat, 1 = minimal contact, 2 = interactive surface (bevel + contact),
+     3 = raised key (bevel + contact + lift), 4 = popover/dropdown,
+     5 = dialog/sheet/modal. Components reach for these by default. */
+  --elevation-0: 0 0 0 0 transparent;
+  --elevation-1: var(--shadow-contact);
+  --elevation-2: var(--shadow-bevel-hi), var(--shadow-bevel-lo), var(--shadow-contact);
+  --elevation-3: var(--shadow-bevel-hi), var(--shadow-bevel-lo), var(--shadow-contact), var(--shadow-lift);
+  --elevation-4: var(--shadow-contact), var(--shadow-lift);
+  --elevation-5: var(--shadow-contact), var(--shadow-lift-deep);
+
+  /* State variants for interactive surfaces (Button raised, Toggle, Tab) */
+  --elevation-hot: var(--shadow-bevel-hi), var(--shadow-bevel-lo), var(--shadow-heat-inner), var(--shadow-contact), var(--shadow-heat-outer), var(--shadow-lift);
+  --elevation-pressed: var(--shadow-pressed-bevel), inset 0 -1px 0 oklch(1 0 0 / 0.04), var(--shadow-contact);
+
+  /* ----------------------------------------
+     Legacy shadow tokens — repointed onto the elevation system so call
+     sites that read `--gds-shadow-*` directly inherit the new look
+     without a code change. Kept here as a compatibility shim; new code
+     should prefer the elevation tokens above.
+     ---------------------------------------- */
+  --gds-shadow-sm: var(--elevation-1);
+  --gds-shadow-md: var(--elevation-4);
+  --gds-shadow-lg: var(--elevation-5);
+  --gds-shadow-xl: var(--elevation-5);
+  --gds-shadow-2xl: var(--elevation-5);
+  --gds-shadow-inner: var(--shadow-pressed-bevel);
+
+  /* ============================================
+     SURFACE SYSTEM
+     ============================================
+     What the surface is *made of*. Independent from elevation (how
+     high it sits) and from aura (what it's radiating). A glass card
+     can sit at elevation-4 with a calm aura, or at elevation-2 with
+     no aura — these axes don't entangle.
+
+     Atomic alpha + blur sub-tokens make the look tunable per theme
+     (frosted dark vs. light glass want different opacity floors).
+     The composed `--surface-*` tokens read from `--card` so they
+     stay theme-aware — switching themes changes the glass tint.
+     -------------------------------------------- */
+
+  /* -- Atomic alphas -- */
+  --surface-alpha-solid: 1;
+  --surface-alpha-translucent: 0.82;
+  --surface-alpha-glass: 0.58;
+  --surface-alpha-glass-strong: 0.42;
+
+  /* -- Atomic blurs -- */
+  --surface-blur-subtle: 6px;
+  --surface-blur-glass: 14px;
+  --surface-blur-strong: 24px;
+
+  /* -- Atomic inner-edge highlight (the "wet" line on glass surfaces) -- */
+  --surface-edge-alpha: 0.10;
+  --surface-edge: inset 0 1px 0 oklch(1 0 0 / var(--surface-edge-alpha));
+
+  /* -- Composed surface backgrounds — theme-aware via --card -- */
+  --surface-solid: oklch(var(--card) / var(--surface-alpha-solid));
+  --surface-translucent: oklch(var(--card) / var(--surface-alpha-translucent));
+  --surface-glass: oklch(var(--card) / var(--surface-alpha-glass));
+  --surface-glass-strong: oklch(var(--card) / var(--surface-alpha-glass-strong));
+
+  /* ============================================
+     AURA SYSTEM
+     ============================================
+     What's actively *radiating* from an element. State signals — AI
+     attention, generation-in-progress, selection focus. Three
+     composable styles: ring (pulsing outer shadow), gradient
+     (rotating conic border), shimmer (diagonal sweep). They stack —
+     `.gds-aura-ring.gds-aura-shimmer` runs both passes.
+
+     Per-style timing & easing vars are overridable at the consumer
+     level, so a heavyweight button can slow its pulse without
+     rewriting keyframes:
+
+       <Button className="gds-aura-ring"
+               style={{ '--aura-pulse-duration': '3.2s' }} />
+
+     Color defaults to --selected-glow (blue, themed). Override
+     per-instance via `--aura-color` for danger / success / brand
+     attention.
+     -------------------------------------------- */
+
+  /* -- Color -- */
+  --aura-color: var(--selected-glow);
+
+  /* -- Ring (pulsing outer halo via animated box-shadow) -- */
+  --aura-ring-spread: 2px;
+  --aura-ring-blur: 14px;
+  --aura-ring-alpha-min: 0.00;
+  --aura-ring-alpha-max: 0.65;
+  --aura-pulse-duration: 2400ms;
+  --aura-pulse-ease: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* -- Gradient (rotating conic-gradient border) -- */
+  --aura-gradient-thickness: 1.5px;
+  --aura-gradient-duration: 6000ms;
+  --aura-gradient-ease: linear;
+
+  /* -- Shimmer (diagonal sweep) -- */
+  --aura-shimmer-width: 28%;
+  --aura-shimmer-alpha: 0.18;
+  --aura-shimmer-duration: 2000ms;
+  --aura-shimmer-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --aura-shimmer-delay-between: 1200ms;
+
+  /* Font stacks (--font-sans / --font-mono) and the type scale
+     (--text-display … --text-overline-*) moved to @gradeui/core/tokens.css. */
+  /* ----------------------------------------
+     Animation
+     ---------------------------------------- */
+  --gds-transition-fast: 150ms;
+  --gds-transition-base: 200ms;
+  --gds-transition-slow: 300ms;
+  --gds-transition-slower: 500ms;
+
+  --gds-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --gds-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --gds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ----------------------------------------
+     Semantic Tokens (OKLCH) — STUDIO DEFAULTS.
+     Values are bare "L C H" triplets, wrapped at call-time with
+     oklch(var(--x)) via the @theme inline reference block above.
+     These defaults mirror the current Studio look (warm-cream
+     neutrals at hue 85, near-black primary, Inter/Geist type) and
+     are SYNCED FROM apps/docs/app/globals.css — the canonical copy —
+     by the A7.1 pass (2026-06-11; the previous values here were the
+     pre-redesign terracotta theme, which leaked into any surface that
+     loaded both stylesheets — the MCP panel "pink progress bar" bug).
+     If the docs palette changes, re-sync this block. The
+     GradeThemeProvider overrides all of it at runtime.
+     ---------------------------------------- */
+  --background: 0.985 0.0018 85;          /* neutral 50 */
+  --foreground: 0.170 0.0048 85;          /* neutral 950 */
+  --card: 1 0 0;                            /* pure white */
+  --card-foreground: 0.170 0.0048 85;
+  --popover: 1 0 0;
+  --popover-foreground: 0.170 0.0048 85;
+  --primary: 0.245 0.0096 85;                /* near-black — Studio buttons */
+  --primary-foreground: 0.985 0.0018 85;
+  --secondary: 0.955 0.0048 85;              /* neutral 100 */
+  --secondary-foreground: 0.415 0.0180 85;  /* neutral 700 */
+  --muted: 0.955 0.0048 85;
+  --muted-foreground: 0.610 0.0204 85;      /* neutral 500 */
+  --accent: 0.610 0.0306 85;                 /* warm cream accent */
+  --accent-foreground: 0.985 0.0027 85;
+  --destructive: 0.560 0.220 27;
+  --destructive-foreground: 0.990 0.005 27;
+  --border: 0.895 0.0090 85;               /* neutral 200 */
+  --input: 0.895 0.0090 85;
+  --ring: 0.415 0.0180 85;
+  --radius: 0.250rem;                       /* Studio's compact radius base */
+
+  /* Typography defaults — Inter body, Geist display (Studio). */
+  --font-sans: var(--font-inter), system-ui, -apple-system, sans-serif;
+  --font-display: var(--font-geist), system-ui, -apple-system, sans-serif;
+
+  /* Fixed semantic colors (not hue-derived, for accessibility consistency) */
+  --success: 0.610 0.180 145;
+  --warning: 0.720 0.180 60;
+  --info: 0.580 0.200 240;
+  --highlight: 0.860 0.180 95;
+
+  /* Selection token pair — solid fill behind a selected option (radio
+     row, segmented control) and the ambient halo around it on hover /
+     focus. Blue by default; theme-overridable. Distinct from --primary
+     so a brand can keep its primary cta colour while selection stays
+     consistent, and distinct from --highlight (amber status). */
+  --selected: 0.55 0.22 258;
+  --selected-foreground: 0.985 0.0018 85;
+  --selected-glow: 0.66 0.20 258;
+
+  /* Accent glow — tonal halo for raised/tactile chrome. Defaults to
+     --primary so raised buttons read as branded by default, not as
+     selected. Themes can retune independently (e.g. lift lightness for
+     softer halos) by setting --accent-glow explicitly. Per-button
+     overrides still flow through `style={{ "--btn-glow": ... }}` for
+     "traffic light" semantics (warning iterate, success ship, etc.). */
+  --accent-glow: var(--primary);
+
+  /* Media placeholder pair — used by MediaSurface when it has no children
+     (image-not-yet-loaded slots, scaffolds without real photos, layouts
+     waiting on the image-generation pipeline). Defined here as a token
+     pair so themes can override per-brand and consumers can roll their
+     own placeholder UI with `background: var(--gds-media-placeholder-bg)`.
+     Defaults to the secondary surface so it reads visibly distinct from
+     `bg-card` and `bg-background` while staying neutral (not brand-loud).
+     Resolves dynamically against the active mode because var(--secondary)
+     itself is mode-scoped — no `.dark` duplicate needed.
+
+     Both bg and fg are SOLID (no alpha) — earlier `secondary-foreground / 0.4`
+     produced a "half-cooked" look where the icon and caption faded into the
+     surface. Solid muted-foreground reads as "intentional placeholder
+     colour", not "loading half-way". */
+  --gds-media-placeholder-bg: oklch(var(--muted));
+  --gds-media-placeholder-fg: oklch(var(--muted-foreground));
+
+  /* Fidelity fade — how long a MediaSurface takes to cross-fade between
+     full imagery and the wireframe placeholder when `data-fidelity`
+     flips on an ancestor (Studio's toggle, an embed's `fidelity`
+     parameter). One knob, read by the "MediaSurface fidelity" rules
+     further down. */
+  --gds-media-fidelity-fade: 280ms;
+
+  /* Transparency checkerboard — the standard alpha backdrop drawn behind
+     image previews (Studio's inspector image well; anywhere else that
+     needs to say "these pixels are transparent"). Consumed as
+     `repeating-conic-gradient(var(--gds-media-checker-color) 0% 25%,
+     transparent 0% 50%)` sized by the size token. Mode-aware for free:
+     the colour rides on --muted-foreground at low alpha, so it reads as
+     grey/white in light mode and grey/dark in dark without a `.dark`
+     override. */
+  --gds-media-checker-color: oklch(var(--muted-foreground) / 0.16);
+  --gds-media-checker-size: 14px;
+
+  /* Canvas fill — the standard backdrop behind a screen when it doesn't fill
+     its frame: the letterbox bars in an embed/share, and the stage a
+     `<ScreenAnimator>` reveals when it flies in or pulls below 1× zoom. One
+     token so every "canvas" surface (embed, share, animator) matches and a
+     theme/brand can restyle it in one place. Mode-aware: a soft neutral in
+     light mode and a deep near-black in dark (see `.dark` below) — a neutral
+     cinematic backdrop that flatters a screen sitting on top of it in either
+     mode. Set it to `transparent` to let the host page show through. */
+  --gds-canvas-fill: #e8e8ec;
+
+  /* Map marker chrome — the baseline "lift" every MapMarker child gets
+     so pin labels never melt into the tiles (see the map-marker rule
+     near the fidelity block). Map tiles are EXTERNAL imagery — they
+     don't ride the theme's surface tokens — so marker content needs
+     its own guaranteed separation in both modes: a 1px border + a soft
+     ambient shadow. Light mode: a slightly-darker-than---border line
+     reads against pale tiles. Dark mode override below flips to a
+     light hairline (a dark border on dark tiles lifts nothing). */
+  --gds-map-marker-border: oklch(var(--border));
+  --gds-map-marker-shadow: 0 1px 3px oklch(0 0 0 / 0.22),
+    0 0 0 1px oklch(0 0 0 / 0.05);
+
+  /* Sidebar knobs — the width pair drives the collapsed/expanded animation
+     on `<Sidebar>` (compound nav primitive). Header height + section
+     padding + per-section gap are exposed so consumers can retune density
+     without prop drilling. */
+  --gds-sidebar-width: 16rem;
+  --gds-sidebar-collapsed-width: 4rem;
+  --gds-sidebar-header-height: 3.25rem;
+  --gds-sidebar-content-py: 0.5rem;
+  --gds-sidebar-section-px: 0.5rem;
+  --gds-sidebar-section-gap: 0.125rem;
+
+  /* Carousel knobs — every visual dimension of <Carousel> is driven from
+     this stanza so consumers can re-skin the slideshow (dot shape, arrow
+     chrome, transition feel) without prop-drilling. The component reads
+     these as `var(--gds-carousel-* , <fallback>)` so missing values are
+     safe. */
+  --gds-carousel-gap: 0;
+  --gds-carousel-radius: var(--gds-media-radius, 0.5rem);
+  --gds-carousel-fade-ms: 200ms;
+  --gds-carousel-slide-basis: 100%;
+  /* Dots */
+  --gds-carousel-dot-size: 0.5rem;
+  --gds-carousel-dot-active-width: 1.25rem;
+  --gds-carousel-dot-color: oklch(var(--muted-foreground) / 0.4);
+  --gds-carousel-dot-active-color: oklch(var(--primary));
+  --gds-carousel-dots-gap: 0.75rem;        /* between viewport and below-dots */
+  --gds-carousel-dots-spacing: 0.5rem;     /* between adjacent dots */
+  --gds-carousel-dots-inset: 0.75rem;      /* overlay position from bottom */
+  /* Arrows */
+  --gds-carousel-arrow-size: 2.25rem;
+  --gds-carousel-arrow-inset: 0.75rem;
+  --gds-carousel-arrow-bg: oklch(var(--background) / 0.85);
+  --gds-carousel-arrow-hover-bg: oklch(var(--background));
+  --gds-carousel-arrow-fg: oklch(var(--foreground));
+  --gds-carousel-arrow-backdrop: blur(6px);
+  --gds-carousel-arrow-shadow: 0 2px 8px oklch(0 0 0 / 0.12);
+
+  /* Alert surface pairs — paler tinted surface + readable deep text for each
+     status colour. Pre-hydration fallbacks; the JS theme pipeline overwrites
+     these via lib/themes/oklch.ts#deriveAlertPair. Kept here so the Alert
+     component has the right tokens before the theme provider mounts. */
+  --destructive-soft: 0.965 0.045 27;
+  --destructive-deep: 0.380 0.220 27;
+  --success-soft: 0.965 0.040 145;
+  --success-deep: 0.380 0.180 145;
+  --warning-soft: 0.965 0.040 60;
+  --warning-deep: 0.380 0.180 60;
+  --info-soft: 0.965 0.044 240;
+  --info-deep: 0.380 0.200 240;
+  --highlight-soft: 0.965 0.040 95;
+  --highlight-deep: 0.380 0.180 95;
+
+  /* Code surface tokens — used by `<Code>` (marketing/docs code blocks).
+     Token roles map to prism's tag types; the component reads them as
+     `color: var(--gds-code-<role>)` so the palette inverts with the
+     theme without us swapping prism themes at runtime. Light values
+     are tuned against a near-paper surface; the .dark block below
+     mirrors them for dark mode.
+
+     diff-added / diff-removed pairs are intentionally desaturated
+     surfaces with strong text — same pattern as the destructive-soft /
+     -deep alert pairs. Line-highlight is a quieter accent (no green/
+     red implication, just "look here"). */
+  --gds-code-bg: oklch(0.985 0.0018 85);
+  --gds-code-fg: oklch(0.220 0.012 250);
+  --gds-code-comment: oklch(0.620 0.030 250);
+  --gds-code-punctuation: oklch(0.420 0.020 250);
+  --gds-code-property: oklch(0.550 0.180 25);
+  --gds-code-number: oklch(0.560 0.180 35);
+  --gds-code-string: oklch(0.500 0.140 145);
+  --gds-code-operator: oklch(0.480 0.140 280);
+  --gds-code-keyword: oklch(0.490 0.220 285);
+  --gds-code-function: oklch(0.500 0.200 250);
+  --gds-code-variable: oklch(0.530 0.180 25);
+  --gds-code-tag: oklch(0.520 0.200 15);
+  --gds-code-attr-name: oklch(0.510 0.150 60);
+  --gds-code-attr-value: oklch(0.500 0.140 145);
+  --gds-code-line-highlight-bg: oklch(var(--selected-glow) / 0.10);
+  --gds-code-line-highlight-marker: oklch(var(--selected-glow) / 0.65);
+  --gds-code-diff-added-bg: oklch(var(--success) / 0.12);
+  --gds-code-diff-added-fg: oklch(0.300 0.140 145);
+  --gds-code-diff-removed-bg: oklch(var(--destructive) / 0.10);
+  --gds-code-diff-removed-fg: oklch(0.360 0.180 27);
+}
+
+.dark {
+  /* ----------------------------------------
+     Semantic Tokens — Studio dark defaults (synced from
+     apps/docs/app/globals.css, A7.1 — see the :root note).
+     ---------------------------------------- */
+  --background: 0.170 0.0048 85;
+  --foreground: 0.985 0.0018 85;
+  --card: 0.245 0.0096 85;                  /* neutral 900 */
+  --card-foreground: 0.985 0.0018 85;
+  --popover: 0.245 0.0096 85;
+  --popover-foreground: 0.985 0.0018 85;
+  --primary: 0.955 0.0048 85;                /* primary 400 */
+  --primary-foreground: 0.170 0.0048 85;
+  --secondary: 0.325 0.0144 85;             /* neutral 800 */
+  --secondary-foreground: 0.895 0.0090 85;
+  --muted: 0.325 0.0144 85;
+  --muted-foreground: 0.720 0.0168 85;
+  --accent: 0.720 0.0252 85;
+  --accent-foreground: 0.170 0.0072 85;
+  --destructive: 0.680 0.220 27;
+  --destructive-foreground: 0.990 0.005 27;
+  --border: 0.325 0.0144 85;
+  --input: 0.325 0.0144 85;
+  --ring: 0.820 0.0132 85;
+
+  --success: 0.720 0.180 145;
+  --warning: 0.800 0.180 60;
+  --info: 0.700 0.200 240;
+  --highlight: 0.880 0.180 95;
+
+  /* Selection pair — dark mode. Solid fill stays vivid; halo lifts in
+     lightness so it can glow against the dark canvas. */
+  --selected: 0.62 0.22 258;
+  --selected-foreground: 0.985 0.0018 85;
+  --selected-glow: 0.74 0.20 258;
+
+  /* Accent glow — dark mode. Same theme-driven default (primary), but
+     the dark variants of --primary already carry the appropriate lift
+     for a glow against the dark canvas. */
+  --accent-glow: var(--primary);
+
+  /* Canvas fill — dark mode. Deep near-black cinematic backdrop (the light
+     default in :root is a soft neutral). One token, mode-scoped: letterbox
+     bars in embed/share/preview and the ScreenAnimator stage all match. */
+  --gds-canvas-fill: #0b0b0e;
+
+  /* Map marker chrome — dark mode: a light hairline + deeper shadow.
+     Dark-mode pin surfaces (bg-card etc.) sit on dark tiles, so the
+     border has to be the bright element; the alpha keeps it a lift,
+     not a frame. */
+  --gds-map-marker-border: oklch(1 0 0 / 0.3);
+  --gds-map-marker-shadow: 0 1px 3px oklch(0 0 0 / 0.5),
+    0 0 0 1px oklch(0 0 0 / 0.4);
+
+  /* Alert surface pairs — dark-mode variant: tint sits just above the dark
+     background without going gray; deep text stays bright and readable. */
+  --destructive-soft: 0.220 0.075 27;
+  --destructive-deep: 0.820 0.198 27;
+  --success-soft: 0.220 0.075 145;
+  --success-deep: 0.820 0.162 145;
+  --warning-soft: 0.220 0.075 60;
+  --warning-deep: 0.820 0.162 60;
+  --info-soft: 0.220 0.075 240;
+  --info-deep: 0.820 0.180 240;
+  --highlight-soft: 0.220 0.075 95;
+  --highlight-deep: 0.820 0.162 95;
+
+  /* -- Elevation: bump alphas in dark mode. Shadows fade against
+        dark surfaces; without this the lift looks anemic. -- */
+  --shadow-bevel-hi-alpha: 0.14;
+  --shadow-bevel-lo-alpha: 0.40;
+  --shadow-contact-alpha: 0.45;
+  --shadow-lift-alpha: 0.50;
+  --shadow-lift-deep-alpha: 0.60;
+
+  /* -- Surface: glass needs higher opacity in dark mode or the card
+        loses its boundary against the canvas. -- */
+  --surface-alpha-translucent: 0.74;
+  --surface-alpha-glass: 0.48;
+  --surface-alpha-glass-strong: 0.32;
+  --surface-edge-alpha: 0.06;
+
+  /* Code surface tokens — dark mode mirror. Background sits a touch
+     above the page bg so the code block reads as a distinct surface
+     even on a dark hero. Tokens lift in lightness to stay readable. */
+  --gds-code-bg: oklch(0.205 0.010 250);
+  --gds-code-fg: oklch(0.920 0.012 250);
+  --gds-code-comment: oklch(0.580 0.024 250);
+  --gds-code-punctuation: oklch(0.760 0.018 250);
+  --gds-code-property: oklch(0.780 0.150 25);
+  --gds-code-number: oklch(0.790 0.150 60);
+  --gds-code-string: oklch(0.780 0.140 145);
+  --gds-code-operator: oklch(0.770 0.130 280);
+  --gds-code-keyword: oklch(0.760 0.180 285);
+  --gds-code-function: oklch(0.770 0.150 250);
+  --gds-code-variable: oklch(0.790 0.160 25);
+  --gds-code-tag: oklch(0.780 0.180 15);
+  --gds-code-attr-name: oklch(0.800 0.140 60);
+  --gds-code-attr-value: oklch(0.780 0.140 145);
+  --gds-code-line-highlight-bg: oklch(var(--selected-glow) / 0.16);
+  --gds-code-line-highlight-marker: oklch(var(--selected-glow) / 0.85);
+  --gds-code-diff-added-bg: oklch(var(--success) / 0.18);
+  --gds-code-diff-added-fg: oklch(0.870 0.160 145);
+  --gds-code-diff-removed-bg: oklch(var(--destructive) / 0.18);
+  --gds-code-diff-removed-fg: oklch(0.870 0.180 27);
+}
+
+/* ============================================
+   ENERGY THEME — scoped overrides.
+   Engaged when data-grade-theme="energy" is set on :root (either by the
+   pre-hydration inline script or GradeThemeProvider). Mirrors the Energy
+   built-in (hues all at 175, teal primary, Geist sans).
+   ============================================ */
+:root[data-grade-theme="energy"] {
+  --background: 0.985 0.0012 175;           /* neutral 50 */
+  --foreground: 0.170 0.0032 175;           /* neutral 950 */
+  --card: 1 0 0;
+  --card-foreground: 0.170 0.0032 175;
+  --popover: 1 0 0;
+  --popover-foreground: 0.170 0.0032 175;
+  --primary: 0.610 0.170 175;               /* primary 500 — teal */
+  --primary-foreground: 0.985 0.015 175;
+  --secondary: 0.955 0.0032 175;            /* neutral 100 */
+  --secondary-foreground: 0.415 0.012 175;  /* neutral 700 */
+  --muted: 0.955 0.0032 175;
+  --muted-foreground: 0.610 0.0136 175;
+  --accent: 0.610 0.170 175;
+  --accent-foreground: 0.985 0.015 175;
+  --border: 0.895 0.006 175;
+  --input: 0.895 0.006 175;
+  --ring: 0.610 0.170 175;
+  --radius: 0.5rem;
+
+  --font-sans: var(--font-geist), system-ui, sans-serif;
+  --font-display: var(--font-geist), system-ui, sans-serif;
+}
+
+.dark[data-grade-theme="energy"] {
+  --background: 0.170 0.0032 175;
+  --foreground: 0.985 0.0012 175;
+  --card: 0.245 0.0064 175;
+  --card-foreground: 0.985 0.0012 175;
+  --popover: 0.245 0.0064 175;
+  --popover-foreground: 0.985 0.0012 175;
+  --primary: 0.720 0.140 175;
+  --primary-foreground: 0.170 0.040 175;
+  --secondary: 0.325 0.0096 175;
+  --secondary-foreground: 0.895 0.006 175;
+  --muted: 0.325 0.0096 175;
+  --muted-foreground: 0.720 0.0112 175;
+  --accent: 0.720 0.140 175;
+  --accent-foreground: 0.170 0.040 175;
+  --border: 0.325 0.0096 175;
+  --input: 0.325 0.0096 175;
+  --ring: 0.720 0.140 175;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  /* Smooth theme transitions */
+  html {
+    transition-property: background-color, border-color;
+    transition-duration: 200ms;
+    transition-timing-function: ease-in-out;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    font-size: var(--text-body);
+    line-height: var(--text-body-line);
+    /* Theme-driven width cut (variable-font wdth axis). Inherits into
+       every span/component, so a theme set to e.g. 90% re-cuts ALL text;
+       per-element font-stretch-[…] utilities still override. */
+    font-stretch: var(--font-body-stretch, normal);
+  }
+
+  /* Theme-driven heading font.
+     Naked <h1>–<h4> elements pick up the active theme's display font
+     (falls back to sans if the theme doesn't set one). Utility classes
+     like .text-h1 still win if they set their own font, since classes
+     outrank tag selectors. */
+  h1, h2, h3, h4 {
+    font-family: var(--font-display, var(--font-sans));
+    font-weight: var(--font-heading-weight, 600);
+    letter-spacing: var(--font-heading-tracking, -0.01em);
+    font-stretch: var(--font-display-stretch, var(--font-body-stretch, normal));
+  }
+
+  /* Link styles */
+  a:not([class]) {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
+}
+
+/* ============================================
+   APP SHELL GRID
+   Five slots — Header, Nav, Aside, Main, Footer — placed via CSS-grid
+   template areas keyed off [data-nav] on the shell root. Slot order in
+   JSX doesn't matter; each slot has a fixed grid-area class assignment.
+   ============================================ */
+
+.gds-app-shell-header { grid-area: header; }
+.gds-app-shell-nav    { grid-area: nav; }
+.gds-app-shell-aside  { grid-area: aside; }
+.gds-app-shell-main   { grid-area: main; }
+.gds-app-shell-footer { grid-area: footer; }
+
+/* nav="none" — Header / Main / Footer stacked vertically. */
+.gds-app-shell[data-nav="none"] {
+  grid-template-areas: "header" "main" "footer";
+  grid-template-rows: auto 1fr auto;
+}
+
+/* nav="top" — Header (site chrome), then in-app top nav, then Main. */
+.gds-app-shell[data-nav="top"] {
+  grid-template-areas: "header" "nav" "main" "footer";
+  grid-template-rows: auto auto 1fr auto;
+}
+
+/* nav="side" — Header full width, Nav rail + Main below, Footer full width. */
+.gds-app-shell[data-nav="side"] {
+  grid-template-areas:
+    "header header"
+    "nav    main"
+    "footer footer";
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr;
+}
+
+/* nav="three-pane" — Header full width, Nav rail + fixed Aside + flex Main,
+   Footer full width. Aside width is set by --gds-app-shell-aside (default
+   320px) so callers can override per-screen via inline style or a parent
+   class without forking the component. */
+.gds-app-shell[data-nav="three-pane"] {
+  grid-template-areas:
+    "header header header"
+    "nav    aside  main"
+    "footer footer footer";
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto var(--gds-app-shell-aside, 320px) 1fr;
+}
+
+/* ============================================
+   THEME-DRIVEN COMPONENT SHAPES
+   Keyed off data attributes that GradeThemeProvider sets on <html>.
+   Each rule is an additive opt-in — themes that don't set a style get
+   the component's default look.
+   ============================================ */
+
+/* Card styles */
+[data-card-style="outlined"] .gds-card {
+  box-shadow: none;
+}
+
+[data-card-style="flat"] .gds-card {
+  box-shadow: none;
+  border-color: transparent;
+  background-color: oklch(var(--muted));
+}
+
+[data-card-style="elevated"] .gds-card {
+  box-shadow: var(--gds-shadow-lg);
+  border-color: transparent;
+}
+
+[data-card-style="glass"] .gds-card {
+  background-color: oklch(var(--card) / 0.6);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-color: oklch(var(--border) / 0.5);
+  box-shadow: var(--gds-shadow-md);
+}
+
+/* Button shapes — themes can set buttonShape: "pill" | "square" | "sharp".
+   The Button component's radius comes from --radius (shadcn), so we override
+   border-radius directly on the gds-button class when a shape is set. */
+[data-button-shape="pill"] .gds-button {
+  border-radius: 9999px;
+}
+
+[data-button-shape="square"] .gds-button,
+[data-button-shape="sharp"] .gds-button {
+  border-radius: 0;
+}
+
+/* ============================================
+   BUTTON — RAISED VARIANT
+   ============================================
+   Tactile "physical key" treatment composed from elevation tokens.
+   Tone is driven by `--btn-glow` (defaults to --selected-glow); the
+   heat-inner / heat-outer layers in the elevation system already read
+   from --btn-glow so per-button overrides flow through automatically.
+
+   Tabs and Toggle pick this up too via the same data-state / aria
+   selectors below — TabsTrigger emits `data-state="active"`, Toggle
+   emits `data-state="on"`, both listed. */
+.gds-button-raised {
+  /* Cascade: per-element style override > --accent-glow (theme accent,
+     defaults to --primary) > --selected-glow (system selection blue).
+     Was hardcoded to --selected-glow before May 2026 — the user
+     flagged "should pull from theme accent, not selection blue", which
+     this fallback chain solves without breaking existing per-button
+     style overrides like `style={{ "--btn-glow": "var(--warning)" }}`. */
+  --btn-glow: var(--accent-glow, var(--selected-glow));
+
+  box-shadow: var(--elevation-3);
+
+  transition:
+    box-shadow var(--gds-transition-base) var(--gds-ease-out),
+    transform var(--gds-transition-fast) var(--gds-ease-out),
+    background-color var(--gds-transition-base) var(--gds-ease-out);
+}
+
+/* Surface for the STANDALONE raised look. June 2026: raised became a
+   TRAIT (the `raised` prop on Button adds .gds-button-raised only, so
+   elevation + glow compose with ANY colour variant — raised primary,
+   raised outline). This companion class supplies the classic neutral
+   "key" surface and is applied only by the variant="raised" alias,
+   which is kept for back-compat. */
+.gds-button-raised-surface {
+  background-color: oklch(var(--secondary));
+  color: oklch(var(--secondary-foreground));
+}
+
+.gds-button-raised:hover {
+  box-shadow: var(--elevation-hot);
+}
+
+.gds-button-raised:active {
+  transform: translateY(1px);
+  box-shadow: var(--elevation-pressed);
+}
+
+.gds-button-raised[data-state="on"],
+.gds-button-raised[data-state="active"],
+.gds-button-raised[aria-pressed="true"],
+.gds-button-raised[data-selected="true"] {
+  background-color: oklch(var(--selected) / 0.18);
+  color: oklch(var(--foreground));
+  box-shadow:
+    var(--shadow-bevel-hi),
+    inset 0 0 0 1px oklch(var(--selected) / 0.55),
+    var(--shadow-heat-inner),
+    0 0 0 1px oklch(var(--selected) / 0.20),
+    var(--shadow-heat-outer),
+    var(--shadow-lift);
+}
+
+.gds-button-raised:focus-visible {
+  outline: none;
+  box-shadow:
+    var(--shadow-bevel-hi),
+    var(--shadow-bevel-lo),
+    0 0 0 2px oklch(var(--background)),
+    0 0 0 4px oklch(var(--btn-glow) / 0.70),
+    var(--shadow-lift);
+}
+
+/* ============================================
+   CODE CURSOR — blinking caret for `<Code>` typewriter / terminal demos
+   ============================================
+   Rendered as a 1ch-wide block at the tail of the active line. Uses
+   currentColor so it inherits the surrounding token colour (which is
+   `--gds-code-fg` by default but can be set per-line by the consumer).
+   The 1.05s cycle is the canonical iOS/macOS caret blink rate. */
+@keyframes gds-code-caret-blink {
+  0%, 49%   { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}
+.gds-code-cursor {
+  display: inline-block;
+  width: 0.55em;
+  height: 1.05em;
+  vertical-align: text-bottom;
+  margin-left: 0.05em;
+  background-color: currentColor;
+  border-radius: 1px;
+  animation: gds-code-caret-blink 1.05s steps(1, end) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .gds-code-cursor { animation: none; opacity: 1; }
+}
+
+/* ============================================
+   DEMO CURSOR — generic blinking caret used by lib/demo/ consumers
+   ============================================
+   The shared caret used wherever a gradeui component scripts typing
+   (Code's terminal lines, Composer's inline cursor, future surfaces).
+   Parameterised via CSS variables so each host can dial dimensions
+   and colour without forking the class.
+
+     --gds-demo-cursor-color    defaults to currentColor
+     --gds-demo-cursor-width    defaults to 0.55em
+     --gds-demo-cursor-height   defaults to 1.05em
+     --gds-demo-cursor-radius   defaults to 1px
+
+   Two variants — `inline` (default; thin caret for text) and `block`
+   (square cell for terminal demos). The block variant swaps width to
+   match height. */
+.gds-demo-cursor {
+  display: inline-block;
+  width: var(--gds-demo-cursor-width, 0.55em);
+  height: var(--gds-demo-cursor-height, 1.05em);
+  vertical-align: text-bottom;
+  margin-left: 0.05em;
+  background-color: var(--gds-demo-cursor-color, currentColor);
+  border-radius: var(--gds-demo-cursor-radius, 1px);
+  animation: gds-code-caret-blink 1.05s steps(1, end) infinite;
+}
+.gds-demo-cursor[data-gds-variant="block"] {
+  width: var(--gds-demo-cursor-height, 1.05em);
+  border-radius: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .gds-demo-cursor { animation: none; opacity: 1; }
+}
+
+/* ============================================
+   COMPOSER — token palette for <Composer>
+   ============================================
+   The generic text composition surface (chat / comments / post body).
+   Tokens here drive the editor card, toolbar, mention pills, and
+   attachment chips. Theme via consumer CSS to retune any surface
+   without forking the component.
+
+   Two themes shipped inline: light + dark via .dark scoping. */
+:root {
+  --gds-composer-bg: var(--background);
+  --gds-composer-fg: var(--foreground);
+  --gds-composer-muted-fg: var(--muted-foreground);
+  --gds-composer-border: var(--border);
+  --gds-composer-action-fg: var(--muted-foreground);
+  --gds-composer-toolbar-fg: var(--muted-foreground);
+  --gds-composer-toolbar-hover-bg: var(--muted);
+  --gds-composer-toolbar-active-bg: var(--accent);
+  --gds-composer-toolbar-active-fg: var(--accent-foreground);
+  --gds-composer-chip-remove-bg: oklch(0.15 0 0);
+  --gds-composer-chip-remove-fg: #fff;
+  --gds-composer-mention-bg: oklch(var(--primary) / 0.12);
+  --gds-composer-mention-fg: oklch(var(--primary));
+  --gds-composer-mention-slash-bg: oklch(0.6 0.12 280 / 0.12);
+  --gds-composer-mention-slash-fg: oklch(0.6 0.12 280);
+}
+.dark {
+  --gds-composer-chip-remove-bg: #fff;
+  --gds-composer-chip-remove-fg: oklch(0.15 0 0);
+}
+
+/* Mention pill — applied via Lexical theme.beautifulMentions.
+   Renders as an inline rounded chip with a subtle background and
+   the trigger char + value. */
+.gds-composer-mention {
+  display: inline-block;
+  padding: 0 0.4em;
+  margin: 0 0.05em;
+  border-radius: 0.4em;
+  background: var(--gds-composer-mention-bg);
+  color: var(--gds-composer-mention-fg);
+  font-weight: 500;
+  cursor: default;
+}
+.gds-composer-mention-slash {
+  background: var(--gds-composer-mention-slash-bg);
+  color: var(--gds-composer-mention-slash-fg);
+}
+
+/* Pullquote — styled variant of blockquote. The Lexical node
+   carries a __pullquote sentinel; this rule applies whenever the
+   blockquote DOM is tagged with data-gds-pullquote (set via a
+   future custom node) OR carries the .gds-composer-pullquote class. */
+.gds-composer-pullquote,
+[data-gds-pullquote="true"] {
+  border-left: 3px solid var(--primary);
+  padding-left: 1rem;
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+}
+
+/* ============================================
+   SURFACE CLASSES
+   ============================================
+   Apply one to any container. Composes with elevation classes —
+   `<div class="gds-surface-glass shadow-elevation-4">` is a glass
+   popover sitting at popover elevation, no conflict.
+
+   --card is theme-aware, so each theme automatically gets its own
+   "frosted X" tint without per-theme overrides. */
+.gds-surface-solid {
+  background-color: var(--surface-solid);
+}
+
+.gds-surface-translucent {
+  background-color: var(--surface-translucent);
+}
+
+.gds-surface-glass {
+  background-color: var(--surface-glass);
+  backdrop-filter: blur(var(--surface-blur-glass));
+  -webkit-backdrop-filter: blur(var(--surface-blur-glass));
+  border: 1px solid oklch(var(--border) / 0.5);
+  box-shadow: var(--surface-edge);
+}
+
+.gds-surface-glass-strong {
+  background-color: var(--surface-glass-strong);
+  backdrop-filter: blur(var(--surface-blur-strong));
+  -webkit-backdrop-filter: blur(var(--surface-blur-strong));
+  border: 1px solid oklch(var(--border) / 0.4);
+  box-shadow: var(--surface-edge);
+}
+
+/* ============================================
+   AURA — RING (pulsing outer halo)
+   ============================================
+   Apply `.gds-aura-ring` to any element. Animation duration & easing
+   are CSS vars (`--aura-pulse-duration`, `--aura-pulse-ease`) — set
+   them at the consumer level to retune without rewriting keyframes.
+   Tone defaults to --aura-color (= --selected-glow); override per
+   element for danger / success attention. */
+@keyframes gds-aura-pulse {
+  0%, 100% {
+    box-shadow:
+      0 0 0 0 oklch(var(--aura-color) / var(--aura-ring-alpha-min)),
+      0 0 0 0 oklch(var(--aura-color) / 0);
+  }
+  50% {
+    box-shadow:
+      0 0 0 var(--aura-ring-spread) oklch(var(--aura-color) / var(--aura-ring-alpha-max)),
+      0 0 var(--aura-ring-blur) 0 oklch(var(--aura-color) / calc(var(--aura-ring-alpha-max) * 0.6));
+  }
+}
+
+.gds-aura-ring {
+  animation: gds-aura-pulse var(--aura-pulse-duration) var(--aura-pulse-ease) infinite;
+}
+
+/* ============================================
+   AURA — GRADIENT (rotating conic border)
+   ============================================
+   Uses a ::before pseudo with a conic-gradient masked to just the
+   border ring (via the standard mask-composite trick). The angle is
+   animated via @property so the gradient rotates rather than redrawing.
+   Requires position:relative on the host element; class adds it. */
+@property --aura-gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes gds-aura-gradient-spin {
+  to { --aura-gradient-angle: 360deg; }
+}
+
+.gds-aura-gradient {
+  position: relative;
+  isolation: isolate;
+}
+
+.gds-aura-gradient::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--aura-gradient-thickness);
+  background: conic-gradient(
+    from var(--aura-gradient-angle),
+    oklch(var(--aura-color) / 0) 0deg,
+    oklch(var(--aura-color) / 0.9) 90deg,
+    oklch(var(--aura-color) / 0) 180deg,
+    oklch(var(--aura-color) / 0.9) 270deg,
+    oklch(var(--aura-color) / 0) 360deg
+  );
+  /* mask trick: paint only the border ring, not the body */
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+          mask-composite: exclude;
+  pointer-events: none;
+  animation: gds-aura-gradient-spin var(--aura-gradient-duration) var(--aura-gradient-ease) infinite;
+}
+
+/* ============================================
+   AURA — SHIMMER (diagonal sweep)
+   ============================================
+   Highlight sweeps across the element periodically. Lives on a
+   ::after pseudo with `overflow: hidden` applied to the host so the
+   sweep clips to the element's shape. Uses background-position rather
+   than transform so it composites cheaply with the gradient + ring
+   layers. */
+@keyframes gds-aura-shimmer-sweep {
+  0%   { background-position: -150% 0; opacity: 0; }
+  8%   { opacity: var(--aura-shimmer-alpha); }
+  60%  { background-position: 250% 0; opacity: var(--aura-shimmer-alpha); }
+  62%  { opacity: 0; }
+  100% { background-position: 250% 0; opacity: 0; }
+}
+
+.gds-aura-shimmer {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.gds-aura-shimmer::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image: linear-gradient(
+    105deg,
+    transparent 30%,
+    oklch(var(--aura-color) / 1) 50%,
+    transparent 70%
+  );
+  background-size: var(--aura-shimmer-width) 200%;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  animation: gds-aura-shimmer-sweep
+    calc(var(--aura-shimmer-duration) + var(--aura-shimmer-delay-between))
+    var(--aura-shimmer-ease) infinite;
+}
+
+/* Reduce-motion: aura animations are decorative. Honor the user's
+   pref by holding at the "peak" frame instead of animating. */
+@media (prefers-reduced-motion: reduce) {
+  .gds-aura-ring,
+  .gds-aura-gradient::before,
+  .gds-aura-shimmer::after {
+    animation: none;
+  }
+  .gds-aura-ring {
+    box-shadow:
+      0 0 0 var(--aura-ring-spread) oklch(var(--aura-color) / calc(var(--aura-ring-alpha-max) * 0.6)),
+      0 0 var(--aura-ring-blur) 0 oklch(var(--aura-color) / calc(var(--aura-ring-alpha-max) * 0.4));
+  }
+}
+
+/* ============================================
+   MOTION TOGGLE — data-motion="off" on <html>
+   ============================================
+   The manual motion switch (lib/motion). Mirrors the OS reduced-motion
+   behaviour but driven by an attribute, so it can be flipped from a toolbar
+   and posted into Studio's Fast Frame / embed iframes (grade:set-motion).
+   Reduce-only: this never forces motion ON, it only suppresses it.
+
+   Broad reset first — neutralises animation/transition on arbitrary
+   (generated-screen) content, the same shape the canonical
+   prefers-reduced-motion reset uses. */
+[data-motion="off"] *,
+[data-motion="off"] *::before,
+[data-motion="off"] *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
+}
+
+/* Aura keeps its bespoke static fallback (the broad reset can't supply the
+   resting box-shadow). */
+[data-motion="off"] .gds-aura-ring {
+  box-shadow:
+    0 0 0 var(--aura-ring-spread) oklch(var(--aura-color) / calc(var(--aura-ring-alpha-max) * 0.6)),
+    0 0 var(--aura-ring-blur) 0 oklch(var(--aura-color) / calc(var(--aura-ring-alpha-max) * 0.4));
+}
+
+/* ============================================
+   MEDIASURFACE FIDELITY — data-fidelity on any ancestor
+   ============================================
+   The pure-CSS half of MediaSurface's filled/wireframe model. The
+   component keeps its tiered placeholder MOUNTED beneath a filled
+   image and stamps `data-filled` on it; these rules decide what's
+   visible. Flipping `data-fidelity="wireframe"` on ANY ancestor
+   (Studio's iframe root, an embed wrapper, a docs demo) cross-fades
+   imagery out and the placeholder back in — no React, so the toggle
+   works in static embeds and respects the data-motion="off" reset
+   above (transition collapses to 0.01ms).
+
+   Default (full fidelity): a filled slot hides its placeholder with
+   `visibility: hidden` — NOT unmount — so transparent imagery (logos
+   on alpha) never shows the glyph/`--gds-media-placeholder-bg`
+   through its pixels, while the layer stays in the DOM for this very
+   toggle. The `visibility` transition is delayed by the fade length
+   (the standard fade-then-hide pattern) so the placeholder finishes
+   fading before it stops hit-testing/painting. */
+[data-gds-part="media-surface-placeholder"][data-filled] {
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--gds-media-fidelity-fade, 280ms) ease,
+    visibility 0s linear var(--gds-media-fidelity-fade, 280ms);
+}
+[data-gds-part="media-surface-content"] {
+  transition: opacity var(--gds-media-fidelity-fade, 280ms) ease;
+}
+
+/* Wireframe: imagery fades out, placeholder fades back in. Content is
+   opacity-faded (not display-toggled) so the swap reads as a cross-fade;
+   pointer-events off so the invisible imagery can't intercept clicks. */
+[data-fidelity="wireframe"] [data-gds-part="media-surface-placeholder"][data-filled] {
+  opacity: 1;
+  visibility: visible;
+  transition-delay: 0s, 0s;
+}
+[data-fidelity="wireframe"] [data-gds-part="media-surface-content"] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ============================================
+   MAP MARKER LIFT — every pin gets a border
+   ============================================
+   Map tiles are external imagery and don't follow the theme, so marker
+   content (Badge price pins, numbered markers, avatars) can melt into
+   them — illegible dark-on-dark pins were the symptom. Guarantee the
+   lift at the DS level: every DIRECT child of a MapMarker's content
+   wrapper gets a 1px border + ambient shadow from the mode-aware
+   `--gds-map-marker-*` pair (light hairline on dark tiles, dark line
+   on light). Being unlayered, this wins over a Badge's own
+   border-transparent utility — deliberate: the border is the floor,
+   not a suggestion. Backgrounds/text are NOT touched; content keeps
+   its own surface tokens. */
+[data-gds-part="map-marker-content"] > * {
+  border: 1px solid var(--gds-map-marker-border);
+  box-shadow: var(--gds-map-marker-shadow);
+}
+
+/* Vendor font reset — Leaflet (`.leaflet-container`) and MapLibre
+   (`.maplibregl-map`) both hard-set `font-family` on their map
+   containers, which beats inheritance and strands marker content on
+   the vendor stack ("pins don't carry the custom font" — they can,
+   the vendor CSS was just in the way). Re-assert the theme stack at
+   the marker-content boundary so Badges/Cards inside pins type-match
+   the rest of the screen, including custom uploaded faces riding
+   `--font-sans`. */
+[data-gds-part="map-marker-content"] {
+  font-family: var(--font-sans);
+}
+
+/* ============================================
+   STREAM-IN — data-gds-streaming on <html>
+   ============================================
+   Live-draw treatment for streaming renders: while the attribute is
+   stamped on <html>, every element ENTERING the DOM fades + rises in.
+
+   CURRENTLY DORMANT — the Fast Frame sandbox no longer stamps the
+   attribute. Speculative drafts moved to double-buffered full
+   remounts (every compile re-inserts EVERY element, so this rule made
+   the whole frame pulse on each draft tick rather than easing in just
+   the new content). Kept because the treatment is right for a future
+   diff-aware renderer that only inserts the appended elements.
+
+   While stamped, every element ENTERING the DOM fades + rises in.
+   Implemented with @starting-style + transition rather than a
+   keyframe animation on purpose:
+     - `@starting-style` only fires on first render of an element, so
+       React-preserved nodes don't re-animate on every draft compile —
+       only the newly streamed-in elements move.
+     - It composes via `transition`, leaving each component's own
+       `animation` (pulse, spin, aura) untouched. The universal
+       transition does temporarily override component transitions while
+       streaming, which is acceptable: the screen is read-only while it
+       draws.
+   Tunable via the --gds-stream-in-* tokens. Respects both the OS
+   reduced-motion preference and the manual data-motion="off" toggle
+   (the broad reset above zeroes transition-duration). */
+:root {
+  --gds-stream-in-duration: 240ms;
+  --gds-stream-in-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --gds-stream-in-rise: 6px;
+}
+
+html[data-gds-streaming] body * {
+  transition:
+    opacity var(--gds-stream-in-duration) var(--gds-stream-in-ease),
+    translate var(--gds-stream-in-duration) var(--gds-stream-in-ease);
+}
+
+html[data-gds-streaming] body * {
+  @starting-style {
+    opacity: 0;
+    translate: 0 var(--gds-stream-in-rise);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-gds-streaming] body * {
+    transition: none;
+  }
+}
+
+/* ============================================
+   EDIT FLASH — data-gds-flash on changed nodes
+   ============================================
+   "Show me what the AI touched": when an edit turn (or any sealed
+   re-render) commits, the Fast Frame sandbox diffs the old and new
+   frames by data-gds-source-id and stamps `data-gds-flash` on the
+   innermost changed nodes. One short pulse — outline ring + a faint
+   primary wash — then the attribute is removed on animationend so the
+   next edit re-triggers cleanly. Tunable via the --gds-edit-flash-*
+   tokens. Honours reduced motion + the manual data-motion="off" toggle
+   (the broad animation reset above zeroes it). */
+:root {
+  --gds-edit-flash-duration: 900ms;
+  --gds-edit-flash-color: var(--primary);
+}
+
+[data-gds-flash] {
+  animation: gds-edit-flash var(--gds-edit-flash-duration) ease-out;
+}
+
+@keyframes gds-edit-flash {
+  0% {
+    outline: 2px solid oklch(var(--gds-edit-flash-color) / 0.9);
+    outline-offset: 2px;
+    background-color: oklch(var(--gds-edit-flash-color) / 0.1);
+  }
+  60% {
+    outline: 2px solid oklch(var(--gds-edit-flash-color) / 0.45);
+    outline-offset: 2px;
+    background-color: oklch(var(--gds-edit-flash-color) / 0.04);
+  }
+  100% {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    background-color: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-gds-flash] {
+    animation: none;
+  }
+}
+
+/* ============================================
+   TYPOGRAPHY UTILITIES
+   ============================================ */
+
+@layer utilities {
+  /* Display */
+  .text-display {
+    font-size: var(--text-display);
+    line-height: var(--text-display-line);
+    letter-spacing: var(--text-display-tracking);
+    font-weight: 700;
+  }
+
+  /* Headings */
+  .text-h1 {
+    font-size: var(--text-h1);
+    line-height: var(--text-h1-line);
+    letter-spacing: var(--text-h1-tracking);
+    font-weight: 700;
+  }
+
+  .text-h2 {
+    font-size: var(--text-h2);
+    line-height: var(--text-h2-line);
+    letter-spacing: var(--text-h2-tracking);
+    font-weight: 600;
+  }
+
+  .text-h3 {
+    font-size: var(--text-h3);
+    line-height: var(--text-h3-line);
+    letter-spacing: var(--text-h3-tracking);
+    font-weight: 600;
+  }
+
+  .text-h4 {
+    font-size: var(--text-h4);
+    line-height: var(--text-h4-line);
+    letter-spacing: var(--text-h4-tracking);
+    font-weight: 600;
+  }
+
+  .text-h5 {
+    font-size: var(--text-h5);
+    line-height: var(--text-h5-line);
+    letter-spacing: var(--text-h5-tracking);
+    font-weight: 500;
+  }
+
+  .text-h6 {
+    font-size: var(--text-h6);
+    line-height: var(--text-h6-line);
+    letter-spacing: var(--text-h6-tracking);
+    font-weight: 500;
+  }
+
+  /* Body */
+  .text-body-lg {
+    font-size: var(--text-body-lg);
+    line-height: var(--text-body-line);
+  }
+
+  .text-body {
+    font-size: var(--text-body);
+    line-height: var(--text-body-line);
+  }
+
+  .text-body-sm {
+    font-size: var(--text-body-sm);
+    line-height: var(--text-body-line);
+  }
+
+  /* Label */
+  .text-label-lg {
+    font-size: var(--text-label-lg);
+    line-height: var(--text-label-line);
+    letter-spacing: var(--text-label-tracking);
+    font-weight: 500;
+  }
+
+  .text-label {
+    font-size: var(--text-label);
+    line-height: var(--text-label-line);
+    letter-spacing: var(--text-label-tracking);
+    font-weight: 500;
+  }
+
+  /* Caption */
+  .text-caption {
+    font-size: var(--text-caption);
+    line-height: var(--text-caption-line);
+    color: oklch(var(--muted-foreground));
+  }
+
+  /* Overline */
+  .text-overline {
+    font-size: var(--text-overline);
+    letter-spacing: var(--text-overline-tracking);
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+
+  /* Code */
+  .text-code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    background-color: oklch(var(--muted));
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+  }
+
+  /* Lead paragraph */
+  .text-lead {
+    font-size: var(--text-body-lg);
+    line-height: var(--text-body-line);
+    color: oklch(var(--muted-foreground));
+  }
+
+  /* Muted text */
+  .text-muted {
+    color: oklch(var(--muted-foreground));
+  }
+}
+
+/* ============================================
+   ANIMATION UTILITIES
+   ============================================ */
+
+@layer utilities {
+  /* Hide scrollbar */
+  .scrollbar-none {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;  /* Chrome, Safari, Opera */
+  }
+
+  /* Fade animations */
+  .animate-fade-in {
+    animation: fadeIn 0.2s ease-out;
+  }
+
+  .animate-fade-out {
+    animation: fadeOut 0.2s ease-in;
+  }
+
+  /* Scale animations */
+  .animate-scale-in {
+    animation: scaleIn 0.15s ease-out;
+  }
+
+  /* Slide animations */
+  .animate-slide-in-from-top {
+    animation: slideInFromTop 0.2s ease-out;
+  }
+
+  .animate-slide-in-from-bottom {
+    animation: slideInFromBottom 0.2s ease-out;
+  }
+
+  .animate-slide-in-from-left {
+    animation: slideInFromLeft 0.2s ease-out;
+  }
+
+  .animate-slide-in-from-right {
+    animation: slideInFromRight 0.2s ease-out;
+  }
+
+  /* Pulse animation for energy indicators */
+  .animate-energy-pulse {
+    animation: energyPulse 2s ease-in-out infinite;
+  }
+
+  /* Shimmer effect for loading states */
+  .animate-shimmer {
+    animation: shimmer 2s linear infinite;
+    background: linear-gradient(
+      90deg,
+      oklch(var(--muted)) 0%,
+      oklch(var(--muted-foreground) / 0.1) 50%,
+      oklch(var(--muted)) 100%
+    );
+    background-size: 200% 100%;
+  }
+}
+
+/* Keyframes */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideInFromTop {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInFromBottom {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInFromLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInFromRight {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes energyPulse {
+  0%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 oklch(var(--accent) / 0.4);
+  }
+  50% {
+    opacity: 0.8;
+    box-shadow: 0 0 0 8px oklch(var(--accent) / 0);
+  }
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 4px 1px oklch(var(--primary) / 0.2);
+  }
+  50% {
+    box-shadow: 0 0 8px 2px oklch(var(--primary) / 0.35);
+  }
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+/* CSS Houdini property for animating conic-gradient angle */
+@property --angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes rotate-border {
+  0% {
+    --angle: 0deg;
+  }
+  100% {
+    --angle: 360deg;
+  }
+}
+
+/* Border travel animation for energy flow nodes */
+.border-travel-animation {
+  position: relative;
+  border: 2px solid transparent;
+  background:
+    linear-gradient(white, white) padding-box,
+    conic-gradient(
+      from var(--angle, 0deg),
+      rgba(34, 197, 94, 0.15) 0deg,
+      rgba(34, 197, 94, 0.15) 350deg,
+      #22c55e 353deg,
+      #16a34a 356deg,
+      #22c55e 359deg,
+      rgba(34, 197, 94, 0.15) 360deg
+    ) border-box;
+  animation: rotate-border 3s linear infinite;
+  border-radius: 0.75rem;
+}
+
+.border-travel-animation.rounded-full {
+  border-radius: 9999px;
+}
+
+.dark .border-travel-animation {
+  background:
+    linear-gradient(#141414, #141414) padding-box,
+    conic-gradient(
+      from var(--angle, 0deg),
+      rgba(34, 197, 94, 0.1) 0deg,
+      rgba(34, 197, 94, 0.1) 350deg,
+      #22c55e 353deg,
+      #16a34a 356deg,
+      #22c55e 359deg,
+      rgba(34, 197, 94, 0.1) 360deg
+    ) border-box;
+}
+
+/* React Flow controls positioning */
+.react-flow__controls {
+  bottom: 10px !important;
+  top: auto !important;
+  left: 10px !important;
+}
+
+/* React Flow dark mode styles */
+.dark .react-flow__controls {
+  background: #141414;
+  border: 1px solid #262626;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.dark .react-flow__controls-button {
+  background: #141414;
+  border-bottom: 1px solid #262626;
+  fill: #a3a3a3;
+}
+
+.dark .react-flow__controls-button:hover {
+  background: #262626;
+}
+
+.dark .react-flow__controls-button svg {
+  fill: #a3a3a3;
+}
+
+.dark .react-flow__controls-button:hover svg {
+  fill: #ffffff;
+}
+
+/* Dotted background pattern */
+.bg-dot-pattern {
+  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.dark .bg-dot-pattern {
+  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+}
+
+/* Gradient fade for hero */
+.hero-gradient {
+  background: linear-gradient(to bottom, transparent 0%, oklch(var(--background)) 70%, oklch(var(--background)) 100%);
+}
+
+/* ============================================
+   INFINITE SCROLL ANIMATION (Partner Logos)
+   ============================================ */
+
+@keyframes scrollLeft {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes scrollRight {
+  0% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.animate-scroll-left {
+  animation: scrollLeft linear infinite;
+}
+
+.animate-scroll-right {
+  animation: scrollRight linear infinite;
+}
+
+/* Pause animation on hover */
+.animate-scroll-left:hover,
+.animate-scroll-right:hover {
+  animation-play-state: paused;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Selection cards — RadioCard / CheckboxCard / SwitchCard
+   ---------------------------------------------------------------------------
+   The whole card is the control, so focus / hover / checked all live on the
+   parent surface. Every visual reads from a `--gds-selection-card-*` token
+   with a semantic fallback, so a project can re-skin the cards via the
+   per-project override layer (set the token at theme scope) without touching
+   the component. Per-instance overrides still flow through `style={{ … }}`.
+   ───────────────────────────────────────────────────────────────────────── */
+.gds-selection-card {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gds-selection-card-gap, 0.75rem);
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  padding: var(--gds-selection-card-padding, 1rem);
+  border-radius: var(--gds-selection-card-radius, var(--radius));
+  border: var(--gds-selection-card-border-width, 1px) solid
+    oklch(var(--gds-selection-card-border, var(--border)));
+  background: oklch(var(--gds-selection-card-bg, var(--card)));
+  color: oklch(var(--foreground));
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    box-shadow 150ms ease;
+}
+.gds-selection-card:hover {
+  background: var(--gds-selection-card-hover-bg, oklch(var(--muted) / 0.55));
+}
+.gds-selection-card:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px oklch(var(--background)),
+    0 0 0 4px oklch(var(--gds-selection-card-ring, var(--ring)) / 0.85);
+}
+.gds-selection-card[data-state="checked"] {
+  border-color: oklch(
+    var(--gds-selection-card-selected-border, var(--foreground))
+  );
+  background: var(
+    --gds-selection-card-selected-bg,
+    oklch(var(--muted) / 0.4)
+  );
+}
+.gds-selection-card:disabled,
+.gds-selection-card[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Content blocks */
+.gds-selection-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.gds-selection-card__slot {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.gds-selection-card__title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: oklch(var(--foreground));
+}
+.gds-selection-card__desc {
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: oklch(var(--muted-foreground));
+}
+
+/* ── Indicators (the small glyph; differs by control type) ─────────────── */
+.gds-selection-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  margin-top: 0.0625rem;
+}
+
+/* Radio — empty ring → filled circle with a light inner dot when checked */
+.gds-selection-indicator--radio {
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 9999px;
+  border: 1.5px solid oklch(var(--gds-selection-card-control, var(--border)));
+  background: oklch(var(--background));
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
+}
+.gds-selection-card[data-state="checked"] .gds-selection-indicator--radio {
+  border-color: oklch(var(--gds-selection-card-control-checked, var(--primary)));
+  background: oklch(var(--gds-selection-card-control-checked, var(--primary)));
+}
+.gds-selection-indicator__dot {
+  display: block;
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 9999px;
+  background: oklch(var(--background));
+}
+
+/* Checkbox — rounded square, check glyph when checked */
+.gds-selection-indicator--checkbox {
+  height: 1.2rem;
+  width: 1.2rem;
+  border-radius: 0.3rem;
+  border: 1.5px solid oklch(var(--gds-selection-card-control, var(--border)));
+  background: oklch(var(--background));
+  color: oklch(var(--background));
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
+}
+.gds-selection-card[data-state="checked"] .gds-selection-indicator--checkbox {
+  border-color: oklch(var(--gds-selection-card-control-checked, var(--primary)));
+  background: oklch(var(--gds-selection-card-control-checked, var(--primary)));
+}
+.gds-selection-indicator__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: oklch(var(--background));
+}
+
+/* Switch — track + thumb that slides on checked */
+.gds-selection-indicator--switch {
+  height: 1.25rem;
+  width: 2.25rem;
+  padding: 2px;
+  border-radius: 9999px;
+  background: oklch(var(--input));
+  justify-content: flex-start;
+  transition: background-color 150ms ease;
+}
+.gds-selection-card[data-state="checked"] .gds-selection-indicator--switch {
+  background: oklch(var(--gds-selection-card-control-checked, var(--primary)));
+}
+.gds-selection-indicator__thumb {
+  display: block;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 9999px;
+  background: oklch(var(--background));
+  box-shadow: 0 1px 2px oklch(0 0 0 / 0.25);
+  transition: transform 150ms ease;
+}
+.gds-selection-card[data-state="checked"] .gds-selection-indicator__thumb {
+  transform: translateX(1rem);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Elevation — real classes (JIT-proof, always in the bundle).
+   ---------------------------------------------------------------------------
+   The `shadow-elevation-N` Tailwind utilities (declared in tailwind-preset.ts)
+   only compile when a scanned source file actually uses the class string, so
+   typing `shadow-elevation-3` in Studio output or a consumer screen produced
+   no CSS. These plain classes always exist in the shipped stylesheet, exactly
+   like `.gds-surface-*`, so elevation works everywhere regardless of the JIT
+   content scan. Prefer these for runtime/generated UI; the Tailwind utilities
+   remain available for component-internal use.
+   ───────────────────────────────────────────────────────────────────────── */
+.gds-elevation-0 { box-shadow: var(--elevation-0); }
+.gds-elevation-1 { box-shadow: var(--elevation-1); }
+.gds-elevation-2 { box-shadow: var(--elevation-2); }
+.gds-elevation-3 { box-shadow: var(--elevation-3); }
+.gds-elevation-4 { box-shadow: var(--elevation-4); }
+.gds-elevation-5 { box-shadow: var(--elevation-5); }
+.gds-elevation-hot { box-shadow: var(--elevation-hot); }
+.gds-elevation-pressed { box-shadow: var(--elevation-pressed); }
+/* Single-layer atoms, for composing a custom stack */
+.gds-shadow-bevel-hi { box-shadow: var(--shadow-bevel-hi); }
+.gds-shadow-bevel-lo { box-shadow: var(--shadow-bevel-lo); }
+.gds-shadow-contact { box-shadow: var(--shadow-contact); }
+.gds-shadow-lift { box-shadow: var(--shadow-lift); }
+.gds-shadow-lift-deep { box-shadow: var(--shadow-lift-deep); }
+.gds-shadow-heat-inner { box-shadow: var(--shadow-heat-inner); }
+.gds-shadow-heat-outer { box-shadow: var(--shadow-heat-outer); }