npm - css-is-awesome - Versions diffs - 1.1.0 - Mend

css-is-awesome 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/AGENTS.md +343 -0
package/CHANGELOG.md +1036 -0
package/CLAUDE.md +9 -0
package/CONTRACT.md +580 -0
package/GEMINI.md +9 -0
package/LICENSE +21 -0
package/LICENSE-third-party +88 -0
package/MIGRATION.md +312 -0
package/README.md +380 -0
package/ROADMAP.md +714 -0
package/THEMING.md +290 -0
package/THREE-TIERS.md +158 -0
package/VERSIONING.md +200 -0
package/_index.scss +34 -0
package/api.scss +16 -0
package/bin/README.md +57 -0
package/bin/cia.cjs +114 -0
package/bin/migrate-bootstrap.cjs +427 -0
package/bin/migrate-tailwind.cjs +832 -0
package/css-is-awesome.instructions.md +533 -0
package/dist/css-is-awesome.core.css +598 -0
package/dist/css-is-awesome.core.min.css +1 -0
package/dist/css-is-awesome.css +3733 -0
package/dist/css-is-awesome.min.css +1 -0
package/dist/css-is-awesome.utilities.css +2445 -0
package/dist/css-is-awesome.utilities.min.css +1 -0
package/dist/tokens.css +508 -0
package/dist/tokens.d.ts +266 -0
package/dist/tokens.min.css +1 -0
package/figma-tokens/README.md +57 -0
package/figma-tokens/primitives-brand.scss +121 -0
package/figma-tokens/semantic-dark.scss +61 -0
package/figma-tokens/semantic-light.scss +61 -0
package/figma-tokens/tokens.json +144 -0
package/llm.txt +183 -0
package/mcp/server.cjs +1495 -0
package/package.json +199 -0
package/public/icons/README.md +278 -0
package/public/icons/arrow-right.svg +4 -0
package/public/icons/check.svg +4 -0
package/public/icons/chevron-down.svg +4 -0
package/public/icons/close.svg +4 -0
package/public/icons/core/arrow-down.svg +13 -0
package/public/icons/core/arrow-left.svg +13 -0
package/public/icons/core/arrow-right.svg +13 -0
package/public/icons/core/arrow-up.svg +13 -0
package/public/icons/core/bell.svg +13 -0
package/public/icons/core/calendar.svg +15 -0
package/public/icons/core/check.svg +12 -0
package/public/icons/core/chevron-down.svg +12 -0
package/public/icons/core/chevron-left.svg +12 -0
package/public/icons/core/chevron-right.svg +12 -0
package/public/icons/core/chevron-up.svg +12 -0
package/public/icons/core/clock.svg +13 -0
package/public/icons/core/close.svg +13 -0
package/public/icons/core/copy.svg +13 -0
package/public/icons/core/download.svg +14 -0
package/public/icons/core/edit.svg +13 -0
package/public/icons/core/error.svg +14 -0
package/public/icons/core/external-link.svg +14 -0
package/public/icons/core/eye-off.svg +15 -0
package/public/icons/core/eye.svg +13 -0
package/public/icons/core/filter.svg +12 -0
package/public/icons/core/heart.svg +12 -0
package/public/icons/core/help.svg +14 -0
package/public/icons/core/home.svg +13 -0
package/public/icons/core/info.svg +14 -0
package/public/icons/core/loading.svg +12 -0
package/public/icons/core/lock.svg +13 -0
package/public/icons/core/mail.svg +13 -0
package/public/icons/core/menu.svg +14 -0
package/public/icons/core/message.svg +12 -0
package/public/icons/core/minus.svg +12 -0
package/public/icons/core/more-horizontal.svg +14 -0
package/public/icons/core/pause.svg +13 -0
package/public/icons/core/play.svg +12 -0
package/public/icons/core/plus.svg +13 -0
package/public/icons/core/refresh.svg +15 -0
package/public/icons/core/save.svg +14 -0
package/public/icons/core/search.svg +13 -0
package/public/icons/core/settings.svg +13 -0
package/public/icons/core/share.svg +14 -0
package/public/icons/core/sort.svg +15 -0
package/public/icons/core/star.svg +12 -0
package/public/icons/core/success.svg +13 -0
package/public/icons/core/trash.svg +16 -0
package/public/icons/core/unlock.svg +13 -0
package/public/icons/core/upload.svg +14 -0
package/public/icons/core/user.svg +13 -0
package/public/icons/core/users.svg +15 -0
package/public/icons/core/warning.svg +14 -0
package/public/icons/download.svg +4 -0
package/public/icons/edit.svg +4 -0
package/public/icons/menu.svg +4 -0
package/public/icons/search.svg +4 -0
package/public/theme.css +4179 -0
package/public/themes/README.md +102 -0
package/public/themes/boilerplate/theme.css +154 -0
package/public/themes/boilerplate-dark/theme.css +171 -0
package/public/themes/boilerplate-light/theme.css +171 -0
package/public/themes/cupertino/theme.css +165 -0
package/public/themes/cupertino-dark/theme.css +200 -0
package/public/themes/cupertino-light/theme.css +227 -0
package/public/themes/glass/theme.css +190 -0
package/public/themes/glass-dark/theme.css +201 -0
package/public/themes/glass-light/theme.css +229 -0
package/public/themes/graphite/theme.css +155 -0
package/public/themes/graphite-dark/theme.css +223 -0
package/public/themes/graphite-light/theme.css +191 -0
package/public/themes/press/theme.css +189 -0
package/public/themes/press-dark/theme.css +199 -0
package/public/themes/press-light/theme.css +235 -0
package/public/themes/prism/theme.css +159 -0
package/public/themes/prism-dark/theme.css +185 -0
package/public/themes/prism-light/theme.css +188 -0
package/public/themes/sketchbook/theme.css +152 -0
package/public/themes/sketchbook-dark/theme.css +194 -0
package/public/themes/sketchbook-light/theme.css +188 -0
package/public/themes/terminal/theme.css +159 -0
package/public/themes/terminal-dark/theme.css +229 -0
package/public/themes/terminal-light/theme.css +152 -0
package/scripts/README.md +70 -0
package/scripts/icon-contract.json +67 -0
package/scripts/icon-validator.js +205 -0
package/scripts/prepare-dist.mjs +65 -0
package/scripts/theme-a11y.js +415 -0
package/scripts/theme-contract.json +171 -0
package/scripts/theme-validator.js +674 -0
package/scss/README.md +55 -0
package/scss/_animations-utilities.scss +107 -0
package/scss/_animations.scss +248 -0
package/scss/_app-styles.scss +15 -0
package/scss/_generator.scss +174 -0
package/scss/_icons.scss +475 -0
package/scss/_index.scss +17 -0
package/scss/_layout.scss +597 -0
package/scss/_mixins.scss +1036 -0
package/scss/_system.scss +291 -0
package/scss/_utilities.scss +377 -0
package/scss/api.scss +61 -0
package/scss/components/_accordion.scss +72 -0
package/scss/components/_buttons.scss +171 -0
package/scss/components/_copy-button.scss +69 -0
package/scss/components/_data.scss +190 -0
package/scss/components/_feedback.scss +197 -0
package/scss/components/_forms.scss +272 -0
package/scss/components/_index.scss +17 -0
package/scss/components/_navigation.scss +186 -0
package/scss/components/_overlay.scss +259 -0
package/scss/components/_stepper.scss +159 -0
package/scss/components/_tabs.scss +72 -0
package/scss/core.scss +54 -0
package/scss/examples/_theming.scss +107 -0
package/scss/examples/_usage.scss +317 -0
package/scss/main.scss +64 -0
package/scss/recipes/README.md +110 -0
package/scss/recipes/_bare-tags.scss +232 -0
package/scss/recipes/_recipe-template.md +119 -0
package/scss/recipes/combobox.md +509 -0
package/scss/recipes/dialog.md +265 -0
package/scss/recipes/print-to-pdf.md +263 -0
package/scss/theme/README.md +67 -0
package/scss/theme/_brand.scss +18 -0
package/scss/theme/_colors-dark.scss +68 -0
package/scss/theme/_colors-light.scss +70 -0
package/scss/theme/_components.scss +94 -0
package/scss/theme/_icons.scss +104 -0
package/scss/theme/_index.scss +62 -0
package/scss/theme/_shadows.scss +65 -0
package/scss/theme/_shape.scss +13 -0
package/scss/theme/_typography.scss +9 -0
package/scss/theme/registry.json +447 -0
package/scss/themes/boilerplate-dark.scss +212 -0
package/scss/themes/boilerplate-light.scss +209 -0
package/scss/themes/boilerplate.scss +181 -0
package/scss/themes/cupertino-dark.scss +238 -0
package/scss/themes/cupertino-light.scss +266 -0
package/scss/themes/cupertino.scss +194 -0
package/scss/themes/glass-dark.scss +238 -0
package/scss/themes/glass-light.scss +266 -0
package/scss/themes/glass.scss +220 -0
package/scss/themes/graphite-dark.scss +260 -0
package/scss/themes/graphite-light.scss +228 -0
package/scss/themes/graphite.scss +182 -0
package/scss/themes/press-dark.scss +237 -0
package/scss/themes/press-light.scss +273 -0
package/scss/themes/press.scss +241 -0
package/scss/themes/prism-dark.scss +217 -0
package/scss/themes/prism-light.scss +220 -0
package/scss/themes/prism.scss +190 -0
package/scss/themes/sketchbook-dark.scss +231 -0
package/scss/themes/sketchbook-light.scss +231 -0
package/scss/themes/sketchbook.scss +178 -0
package/scss/themes/terminal-dark.scss +267 -0
package/scss/themes/terminal-light.scss +175 -0
package/scss/themes/terminal.scss +185 -0
package/scss/tokens.scss +23 -0
package/scss/utilities-only.scss +4 -0

package/public/theme.css ADDED Viewed

@@ -0,0 +1,4179 @@
+/* ============================================================
+   THEME — Consolidated (css-is-awesome)
+   -----------------------------------------------------------
+   GENERATED FILE — do not edit by hand.
+   Source: scss/themes/*.scss -> public/themes/<name>/theme.css
+   Rebuild: npm run build:css:themes
+   One stylesheet carrying every theme. Switch with the
+   data-theme attribute:
+     <html data-theme="sketchbook-light">
+   To ship a SINGLE theme instead, use that theme's standalone
+   file (public/themes/<name>/theme.css). Those emit a bare
+   :root as well, so dropping one in as theme.css restyles the
+   page with no markup change at all.
+   24 themes: boilerplate, boilerplate-dark, boilerplate-light, cupertino, cupertino-dark, cupertino-light, glass, glass-dark, glass-light, graphite, graphite-dark, graphite-light, press, press-dark, press-light, prism, prism-dark, prism-light, sketchbook, sketchbook-dark, sketchbook-light, terminal, terminal-dark, terminal-light
+   ============================================================ */
+@import 'https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700;1,900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Caveat:wght@400;500;600;700&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Caveat:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500;700&family=Noto+Sans+JP:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap';
+:root[data-theme=boilerplate] {
+  color-scheme: light dark;
+  /* Surfaces */
+  --paper: light-dark(#fff, #0f172a);
+  --paper-raised: light-dark(#f2f2f2, #1e293b);
+  --paper-sunk: light-dark(#f8fafc, #020617);
+  --paper-glass: light-dark(rgba(255, 255, 255, 0.85), rgba(15, 23, 42, 0.85));
+  /* Ink — slate neutral ramp */
+  --ink: light-dark(#0f172a, #f8fafc);
+  --ink-soft: light-dark(#1e293b, #e2e8f0);
+  --ink-faint: light-dark(#475569, #94a3b8);
+  --graphite: light-dark(#0f172a, #f1f5f9);
+  --muted: light-dark(#64748b, #64748b);
+  /* Lines */
+  --guide: light-dark(#cbd5e1, #334155);
+  --guide-soft: light-dark(#e2e8f0, #1e293b);
+  --hair: light-dark(#e2e8f0, #1e293b);
+  --hair-soft: light-dark(#f1f5f9, #0f172a);
+  /* Primary accent */
+  --ai: light-dark(#2563eb, #3b82f6);
+  --ai-ink: light-dark(#1d4ed8, #60a5fa);
+  --ai-wash: light-dark(#eff6ff, #1e3a8a);
+  /* Seal — red */
+  --shu: light-dark(#dc2626, #ef4444);
+  --shu-wash: light-dark(#fef2f2, #450a0a);
+  /* Tertiary — amber */
+  --ochre: light-dark(#d97706, #f59e0b);
+  --ochre-wash: light-dark(#fffbeb, #422006);
+  /* Code surface */
+  --code-bg: light-dark(#f8fafc, #020617);
+  --code-ink: light-dark(#0f172a, #e2e8f0);
+  --code-muted: light-dark(#5E6D83, #6F8098);
+  --code-accent: light-dark(#C1410C, #fb923c);
+  --code-green: light-dark(#147C3B, #4ade80);
+  --code-blue: light-dark(#2362EB, #60a5fa);
+  /* Typography — system stacks, no @import, identical */
+  --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-script: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  /* Radius — identical */
+  --r-sm: 4px;
+  --r-md: 6px;
+  --r-lg: 8px;
+  /* Shadow — subtle, neutral slate / heavier on dark */
+  --shadow-sm: 0 1px 2px light-dark(rgba(15, 23, 42, 0.04), rgba(0, 0, 0, 0.30));
+  --shadow-md: 0 1px 3px light-dark(rgba(15, 23, 42, 0.06), rgba(0, 0, 0, 0.40)),
+                0 1px 2px light-dark(rgba(15, 23, 42, 0.04), rgba(0, 0, 0, 0.30));
+  --shadow-lg: 0 4px 12px -2px light-dark(rgba(15, 23, 42, 0.08), rgba(0, 0, 0, 0.55)),
+                0 2px 4px -2px light-dark(rgba(15, 23, 42, 0.05), rgba(0, 0, 0, 0.30));
+  --shadow-xl: 0 12px 24px -8px light-dark(rgba(15, 23, 42, 0.10), rgba(0, 0, 0, 0.65)),
+                0 4px 8px -4px light-dark(rgba(15, 23, 42, 0.06), rgba(0, 0, 0, 0.40));
+  --shadow-2xl: 0 24px 48px -12px light-dark(rgba(15, 23, 42, 0.15), rgba(0, 0, 0, 0.75));
+  /* Blur / glow — none */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — identical */
+  --duration-fast: 120ms;
+  --duration-normal: 180ms;
+  --duration-slow: 280ms;
+  --ease: cubic-bezier(.4, 0, .2, 1);
+  /* Semantic aliases */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: light-dark(var(--paper), var(--paper-raised));
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: light-dark(var(--paper-sunk), var(--paper-raised));
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--guide);
+  --border-focus: var(--ai);
+  --interactive-hover: light-dark(rgba(15, 23, 42, 0.04), rgba(248, 250, 252, 0.05));
+  --interactive-active: light-dark(rgba(15, 23, 42, 0.08), rgba(248, 250, 252, 0.10));
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  --feedback-info: var(--ai);
+  --feedback-success: light-dark(#16a34a, #22c55e);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: light-dark(var(--ai-ink), #85BFFF);
+  --success-default: light-dark(#16a34a, #22c55e);
+  --success-subtle: light-dark(#f0fdf4, #14532d);
+  --success-text: light-dark(#15803d, #4ade80);
+  --warning-default: var(--ochre);
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: light-dark(#b45309, #fbbf24);
+  --error-default: var(--shu);
+  --error-subtle: var(--shu-wash);
+  --error-text: light-dark(#b91c1c, #fca5a5);
+  /* Library scales — identical */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 12px;
+  --radius-full: 9999px;
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+:root[data-theme=boilerplate-dark] {
+  color-scheme: dark;
+  /* Surfaces — slate dark ramp */
+  --paper: #0f172a;
+  --paper-raised: #1e293b;
+  --paper-sunk: #020617;
+  --paper-glass: rgba(15, 23, 42, 0.85);
+  /* Ink — inverted slate */
+  --ink: #f8fafc;
+  --ink-soft: #e2e8f0;
+  --ink-faint: #94a3b8;
+  --graphite: #f1f5f9;
+  --muted: #64748b;
+  /* Lines — dark slate borders */
+  --guide: #334155;
+  --guide-soft: #1e293b;
+  --hair: #1e293b;
+  --hair-soft: #0f172a;
+  /* Primary accent — brighter blue for dark surfaces */
+  --ai: #3b82f6;
+  --ai-ink: #60a5fa;
+  --ai-wash: #1e3a8a;
+  /* Seal — red */
+  --shu: #ef4444;
+  --shu-wash: #450a0a;
+  /* Tertiary — amber */
+  --ochre: #f59e0b;
+  --ochre-wash: #422006;
+  /* Code — neutral dark syntax surface */
+  --code-bg: #020617;
+  --code-ink: #e2e8f0;
+  --code-muted: #708198;
+  --code-accent: #fb923c;
+  --code-green: #4ade80;
+  --code-blue: #60a5fa;
+  /* Typography — system stacks only (no @import) */
+  --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-script: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  /* Radius */
+  --r-sm: 4px;
+  --r-md: 6px;
+  --r-lg: 8px;
+  /* Shadow — heavier on dark, neutral black */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, .40);
+  --shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, .55);
+  --shadow-xl: 0 16px 32px -8px rgba(0, 0, 0, .65);
+  --shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, .75);
+  /* Blur */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow */
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion */
+  --duration-fast: 120ms;
+  --duration-normal: 180ms;
+  --duration-slow: 280ms;
+  --ease: cubic-bezier(.4, 0, .2, 1);
+  /* Backgrounds */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces (semantic) */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--guide);
+  --border-focus: var(--ai);
+  /* Interactive overlays — light wash on dark */
+  --interactive-hover: rgba(248, 250, 252, 0.05);
+  --interactive-active: rgba(248, 250, 252, 0.10);
+  /* Brand */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action triplets */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback */
+  --feedback-info: var(--ai);
+  --feedback-success: #22c55e;
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info */
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: #85BFFF;
+  /* Status — success */
+  --success-default: #22c55e;
+  --success-subtle: #14532d;
+  --success-text: #4ade80;
+  /* Status — warning */
+  --warning-default: var(--ochre);
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: #fbbf24;
+  /* Status — error */
+  --error-default: var(--shu);
+  --error-subtle: var(--shu-wash);
+  --error-text: #fca5a5;
+  /* Space scale */
+  --space-2xs: 0.25rem;
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  /* Radius alias */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 12px;
+  --radius-full: 9999px;
+  /* Typography */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index layers */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions. */
+  --space-0: 0;
+  --space-1: 0.5rem;
+  --space-2: 0.75rem;
+  --space-3: 0.875rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+  --space-9: 6rem;
+}
+:root[data-theme=boilerplate-light] {
+  color-scheme: light;
+  /* Surfaces — off-white paper, light gray sunk */
+  --paper: #fff;
+  --paper-raised: #f2f2f2;
+  --paper-sunk: #f8fafc;
+  --paper-glass: rgba(255, 255, 255, 0.85);
+  /* Ink — slate neutral ramp */
+  --ink: #0f172a;
+  --ink-soft: #1e293b;
+  --ink-faint: #475569;
+  --graphite: #0f172a;
+  --muted: #64748b;
+  /* Lines — light slate borders */
+  --guide: #cbd5e1;
+  --guide-soft: #e2e8f0;
+  --hair: #e2e8f0;
+  --hair-soft: #f1f5f9;
+  /* Primary accent — clean, recognizable blue */
+  --ai: #2563eb;
+  --ai-ink: #1d4ed8;
+  --ai-wash: #eff6ff;
+  /* Seal — red (used for error / secondary action) */
+  --shu: #dc2626;
+  --shu-wash: #fef2f2;
+  /* Tertiary — amber (used for warning) */
+  --ochre: #d97706;
+  --ochre-wash: #fffbeb;
+  /* Code — neutral light syntax surface */
+  --code-bg: #f8fafc;
+  --code-ink: #0f172a;
+  --code-muted: #64748b;
+  --code-accent: #c2410c;
+  --code-green: #15803d;
+  --code-blue: #2563eb;
+  /* Typography — system stacks only (no @import) */
+  --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-script: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  /* Radius — standard, unsurprising */
+  --r-sm: 4px;
+  --r-md: 6px;
+  --r-lg: 8px;
+  /* Shadow — subtle, neutral slate */
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
+  --shadow-md: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
+  --shadow-lg: 0 4px 12px -2px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .05);
+  --shadow-xl: 0 12px 24px -8px rgba(15, 23, 42, .10), 0 4px 8px -4px rgba(15, 23, 42, .06);
+  --shadow-2xl: 0 24px 48px -12px rgba(15, 23, 42, .15);
+  /* Blur — Boilerplate doesn't use frosted surfaces */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow — Boilerplate doesn't use glow effects */
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — moderate, not flashy */
+  --duration-fast: 120ms;
+  --duration-normal: 180ms;
+  --duration-slow: 280ms;
+  --ease: cubic-bezier(.4, 0, .2, 1);
+  /* Backgrounds */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper);
+  /* Surfaces (semantic) */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-sunk);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--guide);
+  --border-focus: var(--ai);
+  /* Interactive overlays */
+  --interactive-hover: rgba(15, 23, 42, 0.04);
+  --interactive-active: rgba(15, 23, 42, 0.08);
+  /* Brand */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action triplets */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback */
+  --feedback-info: var(--ai);
+  --feedback-success: #16a34a;
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info */
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: var(--ai-ink);
+  /* Status — success */
+  --success-default: #16a34a;
+  --success-subtle: #f0fdf4;
+  --success-text: #15803d;
+  /* Status — warning */
+  --warning-default: var(--ochre);
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: #b45309;
+  /* Status — error */
+  --error-default: var(--shu);
+  --error-subtle: var(--shu-wash);
+  --error-text: #b91c1c;
+  /* Space scale */
+  --space-2xs: 0.25rem;
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  /* Radius alias */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 12px;
+  --radius-full: 9999px;
+  /* Typography */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index layers */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions. */
+  --space-0: 0;
+  --space-1: 0.5rem;
+  --space-2: 0.75rem;
+  --space-3: 0.875rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+  --space-9: 6rem;
+}
+:root[data-theme=cupertino] {
+  color-scheme: light dark;
+  /* Surfaces — AppKit panels */
+  --paper: light-dark(#F5F5F7, #1E1E1E);
+  --paper-raised: light-dark(#FFF, #2A2A2A);
+  --paper-sunk: light-dark(#E9E9EC, #141414);
+  --paper-glass: light-dark(rgba(255, 255, 255, 0.72), rgba(42, 42, 42, 0.72));
+  /* Ink — warm black / warm white, never pure */
+  --ink: light-dark(#1D1D1F, #F5F5F7);
+  --ink-soft: light-dark(#3A3A3C, #C7C7CC);
+  --ink-faint: light-dark(#66666B, #98989D);
+  --graphite: light-dark(#2C2C2E, #AEAEB2);
+  --muted: light-dark(#6E6E73, #6E6E73);
+  /* Hairlines — solid in light, translucent white in dark */
+  --guide: light-dark(#D2D2D7, rgba(255, 255, 255, 0.16));
+  --guide-soft: light-dark(#E5E5EA, rgba(255, 255, 255, 0.08));
+  --hair: light-dark(#D2D2D7, rgba(255, 255, 255, 0.12));
+  --hair-soft: light-dark(#E5E5EA, rgba(255, 255, 255, 0.06));
+  /* Primary accent — Apple system blue (dark variant brighter) */
+  --ai: light-dark(#005EBB, #0A84FF);
+  --ai-ink: light-dark(#0058B0, #409CFF);
+  --ai-wash: light-dark(#E5F0FB, rgba(10, 132, 255, 0.16));
+  /* Seal — Apple system red */
+  --shu: light-dark(#FF3B30, #FF453A);
+  --shu-wash: light-dark(#FFEAE8, rgba(255, 69, 58, 0.16));
+  /* Accent — Apple system orange */
+  --ochre: light-dark(#FF9F0A, #FF9F0A);
+  --ochre-wash: light-dark(#FFF4E0, rgba(255, 159, 10, 0.16));
+  /* Code surface — Xcode dark in both modes (intentional editorial) */
+  --code-bg: light-dark(#1C1C1E, #0F0F0F);
+  --code-ink: light-dark(#F2F2F7, #F2F2F7);
+  --code-muted: #8E8E93;
+  --code-accent: #FF9F0A;
+  --code-green: #30D158;
+  --code-blue: #64D2FF;
+  /* Typography — SF system stack, identical */
+  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: ui-serif, 'New York', 'Iowan Old Style', 'Palatino', Georgia, serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Menlo', Consolas, monospace;
+  /* Radius — AppKit corners, identical */
+  --r-sm: 8px;
+  --r-md: 10px;
+  --r-lg: 14px;
+  /* Shadows — small, diffuse, lifted, deeper on dark */
+  --shadow-sm: 0 1px 2px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.30)),
+               0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.30));
+  --shadow-md: 0 4px 14px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.40)),
+               0 1px 3px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.30));
+  --shadow-lg: 0 12px 40px light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.50)),
+               0 2px 6px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.30));
+  --shadow-xl: 0 20px 50px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.60)),
+               0 4px 10px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.32));
+  --shadow-2xl: 0 28px 70px light-dark(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.72)),
+                0 6px 14px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.36));
+  /* Blur — vibrancy signature, identical */
+  --blur-sm: blur(20px) saturate(180%);
+  --blur-md: blur(30px) saturate(180%);
+  --blur-lg: blur(40px) saturate(180%);
+  /* Glow — Cupertino doesn't glow, it lifts */
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — Apple-snappy, identical */
+  --duration-fast: 160ms;
+  --duration-normal: 220ms;
+  --duration-slow: 320ms;
+  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+  /* Semantic aliases */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  --interactive-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.06));
+  --interactive-active: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.10));
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: var(--ai-ink);
+  --success-default: light-dark(var(--code-green), #30D158);
+  --success-subtle: light-dark(rgba(48, 209, 88, 0.12), rgba(48, 209, 88, 0.16));
+  --success-text: light-dark(#0F6E22, #5FE37F);
+  --warning-default: var(--ochre);
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: light-dark(#985000, #FFB340);
+  --error-default: var(--shu);
+  --error-subtle: light-dark(rgba(255, 59, 48, 0.12), rgba(255, 69, 58, 0.16));
+  --error-text: light-dark(#A8281F, #FF6961);
+  /* Library scales — identical */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* Component overrides — AppKit identity */
+  --btn-radius: var(--r-md);
+  --card-radius: var(--r-lg);
+  --card-shadow: var(--shadow-sm);
+  --input-radius: var(--r-sm);
+  --modal-radius: var(--r-lg);
+  --tooltip-radius: var(--r-sm);
+}
+:root[data-theme=cupertino-dark] {
+  color-scheme: dark;
+  /* Surfaces — AppKit dark panels */
+  --paper: #1E1E1E;
+  --paper-raised: #2A2A2A;
+  --paper-sunk: #141414;
+  --paper-glass: rgba(42, 42, 42, 0.72);
+  /* Ink — warm white, never pure */
+  --ink: #F5F5F7;
+  --ink-soft: #C7C7CC;
+  --ink-faint: #98989D;
+  --graphite: #AEAEB2;
+  --muted: #6E6E73;
+  /* Hairlines / guides — translucent white */
+  --guide: rgba(255, 255, 255, 0.16);
+  --guide-soft: rgba(255, 255, 255, 0.08);
+  --hair: rgba(255, 255, 255, 0.12);
+  --hair-soft: rgba(255, 255, 255, 0.06);
+  /* Primary accent — Apple system blue (dark variant) */
+  --ai: #0A84FF;
+  --ai-ink: #409CFF;
+  --ai-wash: rgba(10, 132, 255, 0.16);
+  /* Seal — Apple system red (dark variant) */
+  --shu: #FF453A;
+  --shu-wash: rgba(255, 69, 58, 0.16);
+  /* Accent — Apple system orange (dark variant) */
+  --ochre: #FF9F0A;
+  --ochre-wash: rgba(255, 159, 10, 0.16);
+  /* Code surface — AppKit dark code panel */
+  --code-bg: #0F0F0F;
+  --code-ink: #F2F2F7;
+  --code-muted: #8E8E93;
+  --code-accent: #FF9F0A;
+  --code-green: #30D158;
+  --code-blue: #64D2FF;
+  /* Typography — match Cupertino (SF system stack) */
+  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: ui-serif, 'New York', 'Iowan Old Style', 'Palatino', Georgia, serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Menlo', Consolas, monospace;
+  /* Radius — match Cupertino (AppKit corners) */
+  --r-sm: 8px;
+  --r-md: 10px;
+  --r-lg: 14px;
+  /* Shadows — small, diffuse, lifted (deeper for dark) */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 0 0 0.5px rgba(0, 0, 0, 0.30);
+  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.30);
+  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.60), 0 4px 10px rgba(0, 0, 0, 0.32);
+  --shadow-2xl: 0 28px 70px rgba(0, 0, 0, 0.72), 0 6px 14px rgba(0, 0, 0, 0.36);
+  /* Blur — vibrancy (Cupertino's signature, match light) */
+  --blur-sm: blur(20px) saturate(180%);
+  --blur-md: blur(30px) saturate(180%);
+  --blur-lg: blur(40px) saturate(180%);
+  /* Glow — Cupertino doesn't glow, it lifts */
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — Apple-snappy, match Cupertino */
+  --duration-fast: 160ms;
+  --duration-normal: 220ms;
+  --duration-slow: 320ms;
+  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+  /* ----------------------------------------------------------
+     SEMANTIC ALIASES
+     ---------------------------------------------------------- */
+  /* Backgrounds */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  /* Interactive — translucent white on dark (macOS Dark convention) */
+  --interactive-hover: rgba(255, 255, 255, 0.06);
+  --interactive-active: rgba(255, 255, 255, 0.10);
+  /* Brand */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action triplets */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info */
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: var(--ai-ink);
+  /* Status — success (macOS dark green) */
+  --success-default: #30D158;
+  --success-subtle: rgba(48, 209, 88, 0.16);
+  --success-text: #5FE37F;
+  /* Status — warning (macOS dark orange) */
+  --warning-default: var(--ochre);
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: #FFB340;
+  /* Status — error (macOS dark red) */
+  --error-default: var(--shu);
+  --error-subtle: var(--shu-wash);
+  --error-text: #FF6961;
+  /* ----------------------------------------------------------
+     LIBRARY SCALES
+     ---------------------------------------------------------- */
+  /* Space scale */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  /* Typography */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* ----------------------------------------------------------
+     OPTIONAL COMPONENT OVERRIDES — match Cupertino
+     ---------------------------------------------------------- */
+  --btn-radius: var(--r-md); /* 10px — AppKit control */
+  --card-radius: var(--r-lg); /* 14px — panel corner */
+  --card-shadow: var(--shadow-sm); /* diffuse, lifted */
+  --input-radius: var(--r-sm); /* 8px — text field */
+  --modal-radius: var(--r-lg); /* matches panel */
+  --tooltip-radius: var(--r-sm); /* bezel tooltip */
+}
+:root[data-theme=cupertino-light] {
+  color-scheme: light;
+  /* Surfaces — AppKit panels */
+  --paper: #F5F5F7;
+  --paper-raised: #FFF;
+  --paper-sunk: #E9E9EC;
+  --paper-glass: rgba(255, 255, 255, 0.72);
+  /* Ink — warm black, never pure */
+  --ink: #1D1D1F;
+  --ink-soft: #3A3A3C;
+  --ink-faint: #66666B;
+  --graphite: #2C2C2E;
+  --muted: #6E6E73;
+  /* Hairlines / guides */
+  --guide: #D2D2D7;
+  --guide-soft: #E5E5EA;
+  --hair: #D2D2D7;
+  --hair-soft: #E5E5EA;
+  /* Primary accent — system blue */
+  --ai: #005EBB;
+  --ai-ink: #0058B0;
+  --ai-wash: #E5F0FB;
+  /* Seal — system red */
+  --shu: #FF3B30;
+  --shu-wash: #FFEAE8;
+  /* Accent — system orange / amber */
+  --ochre: #FF9F0A;
+  --ochre-wash: #FFF4E0;
+  /* Code surface — native Xcode dark */
+  --code-bg: #1C1C1E;
+  --code-ink: #F2F2F7;
+  --code-muted: #8E8E93;
+  --code-accent: #FF9F0A;
+  --code-green: #30D158;
+  --code-blue: #64D2FF;
+  /* Typography — SF system stack */
+  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: ui-serif, 'New York', 'Iowan Old Style', 'Palatino', Georgia, serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Menlo', Consolas, monospace;
+  /* Radius — AppKit corners */
+  --r-sm: 8px;
+  --r-md: 10px;
+  --r-lg: 14px;
+  /* Shadows — small, diffuse, lifted */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
+  /* Blur — vibrancy (Cupertino's signature) */
+  --blur-sm: blur(20px) saturate(180%);
+  --blur-md: blur(30px) saturate(180%);
+  --blur-lg: blur(40px) saturate(180%);
+  /* Glow — Cupertino doesn't glow, it lifts */
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — Apple-snappy */
+  --duration-fast: 160ms;
+  --duration-normal: 220ms;
+  --duration-slow: 320ms;
+  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+  /* ----------------------------------------------------------
+     SEMANTIC ALIASES
+     -----------------------------------------------------------
+     Bridge the library's expected names to this theme's native
+     palette. Components can now write m.color(surface-default)
+     or var(--surface-default) and reskin with the theme
+     automatically.
+     ---------------------------------------------------------- */
+  /* Backgrounds (page-level) */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  /* Interactive (hover / active wash layers) — macOS faint ink overlay */
+  --interactive-hover: rgba(0, 0, 0, 0.04);
+  --interactive-active: rgba(0, 0, 0, 0.08);
+  /* Brand (identity — action-primary usually references these) */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action (primary / secondary / tertiary) */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback / status (high-level semantic) */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info (three-part: default / subtle / text) */
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: var(--ai-ink);
+  /* Status — success (macOS system green) */
+  --success-default: var(--code-green);
+  --success-subtle: rgba(48, 209, 88, 0.12);
+  --success-text: #0F6E22;
+  /* Status — warning (macOS system orange) */
+  --warning-default: var(--ochre);
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: #985000;
+  /* Status — error (macOS system red) */
+  --error-default: var(--shu);
+  --error-subtle: rgba(255, 59, 48, 0.12);
+  --error-text: #A8281F;
+  /* ----------------------------------------------------------
+     LIBRARY SCALES (space / radius / type / motion / z)
+     -----------------------------------------------------------
+     The library mixins emit var(--space-<key>), var(--radius-<key>),
+     var(--font-primary), var(--font-size-<key>), var(--z-<key>), …
+     Themes declare the slots so those mixins always resolve.
+     ---------------------------------------------------------- */
+  /* Space scale (rem for accessibility) */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias — mirrors --r-* with standard names so
+     `m.radius(size)` in the library finds --radius-<size>. */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  /* Shadow — higher-elevation slots (AppKit floating surfaces) */
+  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(0, 0, 0, 0.05);
+  --shadow-2xl: 0 28px 70px rgba(0, 0, 0, 0.20), 0 6px 14px rgba(0, 0, 0, 0.06);
+  /* Typography — base body font + key scale slots (SF Pro stack) */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index layers */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* ----------------------------------------------------------
+     OPTIONAL COMPONENT OVERRIDES (Feature 1.3)
+     -----------------------------------------------------------
+     Cupertino expresses AppKit UI: softly rounded controls,
+     diffuse card lift, larger panel radii. Overrides are
+     intentionally sparse — pick the ones that carry the
+     identity of the OS, leave the rest on library defaults.
+     ---------------------------------------------------------- */
+  --btn-radius: var(--r-md); /* 10px — AppKit control */
+  --card-radius: var(--r-lg); /* 14px — panel corner */
+  --card-shadow: var(--shadow-sm); /* diffuse, lifted */
+  --input-radius: var(--r-sm); /* 8px — text field */
+  --modal-radius: var(--r-lg); /* matches panel */
+  --tooltip-radius: var(--r-sm); /* bezel tooltip */
+}
+:root[data-theme=glass] {
+  color-scheme: light dark;
+  /* Surfaces — frosted translucent / blue-black void */
+  --paper: light-dark(#F4EEFF, #0A0F1A);
+  --paper-raised: light-dark(#FFF, #141E32);
+  --paper-sunk: light-dark(#E8E0F5, #050810);
+  --paper-glass: light-dark(rgba(255, 255, 255, 0.55), rgba(20, 30, 50, 0.60));
+  /* Ink — warm near-black / cool near-white */
+  --ink: light-dark(#1D1D1F, #F0F4FF);
+  --ink-soft: light-dark(#3A3A3C, #C8CFE0);
+  --ink-faint: light-dark(#65656A, #8A92A8);
+  --graphite: light-dark(#2C2C2E, #DCE2F0);
+  --muted: light-dark(#6E6E73, #5A627A);
+  /* Construction lines — translucent */
+  --guide: light-dark(rgba(29, 29, 31, 0.14), rgba(240, 244, 255, 0.16));
+  --guide-soft: light-dark(rgba(29, 29, 31, 0.10), rgba(240, 244, 255, 0.08));
+  --hair: light-dark(rgba(29, 29, 31, 0.08), rgba(240, 244, 255, 0.12));
+  --hair-soft: light-dark(rgba(29, 29, 31, 0.04), rgba(240, 244, 255, 0.06));
+  /* Primary accent — iOS indigo / vibrant dark blue */
+  --ai: light-dark(#5957E2, #6FA9FF);
+  --ai-ink: light-dark(#3634A3, #93C2FF);
+  --ai-wash: light-dark(rgba(89, 87, 226, 0.12), rgba(111, 169, 255, 0.16));
+  /* Seal — iOS system pink */
+  --shu: light-dark(#FF375F, #FF6B8A);
+  --shu-wash: light-dark(rgba(255, 55, 95, 0.12), rgba(255, 107, 138, 0.16));
+  /* Draft / marginalia — iOS orange */
+  --ochre: light-dark(#FF9500, #FFC56B);
+  --ochre-wash: light-dark(rgba(255, 149, 0, 0.14), rgba(255, 197, 107, 0.16));
+  /* Code surface */
+  --code-bg: light-dark(rgba(29, 29, 31, 0.82), rgba(5, 8, 16, 0.82));
+  --code-ink: light-dark(#F5F5F7, #F0F4FF);
+  --code-muted: light-dark(#BCBCC0, #8A92A8);
+  --code-accent: #FFD60A;
+  --code-green: light-dark(#30D158, #5FE37F);
+  --code-blue: light-dark(#64D2FF, #93C2FF);
+  /* Typography — SF stack, identical */
+  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', Georgia, serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
+  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
+  /* Radius — soft and large, identical */
+  --r-sm: 10px;
+  --r-md: 18px;
+  --r-lg: 24px;
+  /* Shadows — floaty with cool-blue undertone / deep dark drops */
+  --shadow-sm: 0 2px 10px light-dark(rgba(31, 38, 135, 0.06), rgba(0, 0, 0, 0.30));
+  --shadow-md: 0 8px 32px light-dark(rgba(31, 38, 135, 0.10), rgba(0, 0, 0, 0.42));
+  --shadow-lg: 0 24px 60px light-dark(rgba(31, 38, 135, 0.14), rgba(0, 0, 0, 0.55));
+  --shadow-xl: 0 40px 80px light-dark(rgba(31, 38, 135, 0.18), rgba(0, 0, 0, 0.65));
+  --shadow-2xl: 0 56px 112px light-dark(rgba(31, 38, 135, 0.24), rgba(0, 0, 0, 0.75));
+  /* Blur — LIGHT defaults; dark overrides below via nested @media */
+  --blur-sm: blur(14px) saturate(160%);
+  --blur-md: blur(22px) saturate(170%);
+  --blur-lg: blur(30px) saturate(180%);
+  /* Glow — dual-inset rim highlight (LIGHT defaults; dark overrides below) */
+  --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.70);
+  --glow-md:
+    inset 0 1px 0 rgba(255, 255, 255, 0.85),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.20),
+    inset 1px 0 0 rgba(255, 255, 255, 0.35),
+    inset -1px 0 0 rgba(255, 255, 255, 0.20);
+  --glow-lg:
+    inset 0 2px 0 rgba(255, 255, 255, 0.95),
+    inset 0 -2px 0 rgba(255, 255, 255, 0.25),
+    inset 2px 0 0 rgba(255, 255, 255, 0.45),
+    inset -2px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 0 40px rgba(255, 255, 255, 0.15);
+  /* Motion — identical */
+  --duration-fast: 180ms;
+  --duration-normal: 240ms;
+  --duration-slow: 380ms;
+  --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
+  /* ---- Pattern C: dark-mode overrides for NON-COLOR tokens ----
+   * stylelint can't trace through @include m.theme() to know the
+   * parent selector is :root[data-theme="glass"]; the declarations
+   * below are valid in compiled output (Sass hoists @media + scopes
+   * the vars under the parent selector). */
+  /* stylelint-disable no-invalid-position-declaration -- see comment above */
+}
+:root[data-theme=glass] {
+  /* stylelint-enable no-invalid-position-declaration */
+  /* Semantic aliases */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  --interactive-hover: light-dark(rgba(29, 29, 31, 0.04), rgba(240, 244, 255, 0.05));
+  --interactive-active: light-dark(rgba(29, 29, 31, 0.08), rgba(240, 244, 255, 0.10));
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  --info-default: var(--ai);
+  --info-subtle: light-dark(rgba(89, 87, 226, 0.12), rgba(111, 169, 255, 0.16));
+  --info-text: var(--ai-ink);
+  --success-default: light-dark(#34C759, #30D158);
+  --success-subtle: light-dark(rgba(52, 199, 89, 0.12), rgba(48, 209, 88, 0.16));
+  --success-text: light-dark(#0F6A22, #5FE37F);
+  --warning-default: var(--ochre);
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: light-dark(#985000, #FFD79A);
+  --error-default: var(--shu);
+  --error-subtle: var(--shu-wash);
+  --error-text: light-dark(#A3193A, #FF93AB);
+  /* Library scales — identical */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+:root[data-theme=glass-dark] {
+  color-scheme: dark;
+  /* Surfaces — frosted translucent over deep blue-black */
+  --paper: #0A0F1A;
+  --paper-raised: #141E32;
+  --paper-sunk: #050810;
+  --paper-glass: rgba(20, 30, 50, 0.60);
+  /* Ink — cool near-white, glassy */
+  --ink: #F0F4FF;
+  --ink-soft: #C8CFE0;
+  --ink-faint: #8A92A8;
+  --graphite: #DCE2F0;
+  --muted: #5A627A;
+  /* Construction lines — translucent white hairlines */
+  --guide: rgba(240, 244, 255, 0.16);
+  --guide-soft: rgba(240, 244, 255, 0.08);
+  --hair: rgba(240, 244, 255, 0.12);
+  --hair-soft: rgba(240, 244, 255, 0.06);
+  /* Primary accent — vibrant iOS dark indigo/blue */
+  --ai: #6FA9FF;
+  --ai-ink: #93C2FF;
+  --ai-wash: rgba(111, 169, 255, 0.16);
+  /* Seal — vibrant iOS dark pink */
+  --shu: #FF6B8A;
+  --shu-wash: rgba(255, 107, 138, 0.16);
+  /* Draft / marginalia — vibrant iOS dark orange */
+  --ochre: #FFC56B;
+  --ochre-wash: rgba(255, 197, 107, 0.16);
+  /* Code surface — translucent over deep paper */
+  --code-bg: rgba(5, 8, 16, 0.82);
+  --code-ink: #F0F4FF;
+  --code-muted: #8A92A8;
+  --code-accent: #FFD60A;
+  --code-green: #5FE37F;
+  --code-blue: #93C2FF;
+  /* Typography — match Glass (SF system stack) */
+  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', Georgia, serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
+  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
+  /* Radius — match Glass (soft and large, iOS-style) */
+  --r-sm: 10px;
+  --r-md: 18px;
+  --r-lg: 24px;
+  /* Shadows — floaty with deep undertone (dark needs heavier drops) */
+  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.30);
+  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.42);
+  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
+  --shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.65);
+  --shadow-2xl: 0 56px 112px rgba(0, 0, 0, 0.75);
+  /* Blur — THE star token; tuned for dark-glass depth */
+  --blur-sm: blur(12px) saturate(160%);
+  --blur-md: blur(18px) saturate(180%);
+  --blur-lg: blur(20px) saturate(200%);
+  /* Glow — dual-inset rim highlight (visionOS dark catches less but still rims) */
+  --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.16);
+  --glow-md:
+    inset 0 1px 0 rgba(255, 255, 255, 0.22),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
+    inset 1px 0 0 rgba(255, 255, 255, 0.10),
+    inset -1px 0 0 rgba(255, 255, 255, 0.06);
+  --glow-lg:
+    inset 0 2px 0 rgba(255, 255, 255, 0.28),
+    inset 0 -2px 0 rgba(255, 255, 255, 0.08),
+    inset 2px 0 0 rgba(255, 255, 255, 0.14),
+    inset -2px 0 0 rgba(255, 255, 255, 0.08),
+    inset 0 0 40px rgba(111, 169, 255, 0.08);
+  /* Motion — match Glass */
+  --duration-fast: 180ms;
+  --duration-normal: 240ms;
+  --duration-slow: 380ms;
+  --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
+  /* ----------------------------------------------------------
+     SEMANTIC ALIASES
+     ---------------------------------------------------------- */
+  /* Backgrounds */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  /* Interactive — kept very subtle so glass translucency reads through */
+  --interactive-hover: rgba(240, 244, 255, 0.05);
+  --interactive-active: rgba(240, 244, 255, 0.10);
+  /* Brand */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action triplets */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info */
+  --info-default: var(--ai);
+  --info-subtle: rgba(111, 169, 255, 0.16);
+  --info-text: var(--ai-ink);
+  /* Status — success (iOS dark green) */
+  --success-default: #30D158;
+  --success-subtle: rgba(48, 209, 88, 0.16);
+  --success-text: #5FE37F;
+  /* Status — warning */
+  --warning-default: var(--ochre);
+  --warning-subtle: rgba(255, 197, 107, 0.16);
+  --warning-text: #FFD79A;
+  /* Status — error */
+  --error-default: var(--shu);
+  --error-subtle: rgba(255, 107, 138, 0.16);
+  --error-text: #FF93AB;
+  /* ----------------------------------------------------------
+     LIBRARY SCALES
+     ---------------------------------------------------------- */
+  /* Space scale */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  /* Typography */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+:root[data-theme=glass-light] {
+  color-scheme: light;
+  /* Surfaces — frosted translucent over a lavender-tint base */
+  --paper: #F4EEFF;
+  --paper-raised: #FFF;
+  --paper-sunk: #E8E0F5;
+  --paper-glass: rgba(255, 255, 255, 0.55);
+  /* Ink — warm near-black, Apple style */
+  --ink: #1D1D1F;
+  --ink-soft: #3A3A3C;
+  --ink-faint: #65656A;
+  --graphite: #2C2C2E;
+  --muted: #6E6E73;
+  /* Construction lines — glass doesn't like hard edges */
+  --guide: rgba(29, 29, 31, 0.14);
+  --guide-soft: rgba(29, 29, 31, 0.10);
+  --hair: rgba(29, 29, 31, 0.08);
+  --hair-soft: rgba(29, 29, 31, 0.04);
+  /* Primary accent — iOS indigo */
+  --ai: #5957E2;
+  --ai-ink: #3634A3;
+  --ai-wash: rgba(89, 87, 226, 0.12);
+  /* Seal — iOS system pink (draft / emphasis) */
+  --shu: #FF375F;
+  --shu-wash: rgba(255, 55, 95, 0.12);
+  /* Draft / marginalia — iOS orange */
+  --ochre: #FF9500;
+  --ochre-wash: rgba(255, 149, 0, 0.14);
+  /* Code surface */
+  --code-bg: rgba(29, 29, 31, 0.82);
+  --code-ink: #F5F5F7;
+  --code-muted: #BABABE;
+  --code-accent: #FFD60A;
+  --code-green: #30D158;
+  --code-blue: #64D2FF;
+  /* Typography — SF system stack */
+  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', Georgia, serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
+  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
+  /* Radius — soft and large, iOS-style */
+  --r-sm: 10px;
+  --r-md: 18px;
+  --r-lg: 24px;
+  /* Shadows — floaty with a cool-blue undertone */
+  --shadow-sm: 0 2px 10px rgba(31, 38, 135, 0.06);
+  --shadow-md: 0 8px 32px rgba(31, 38, 135, 0.10);
+  --shadow-lg: 0 24px 60px rgba(31, 38, 135, 0.14);
+  --shadow-xl: 0 40px 80px rgba(31, 38, 135, 0.18);
+  --shadow-2xl: 0 56px 112px rgba(31, 38, 135, 0.24);
+  /* Blur — the star of this theme; pair with --paper-glass */
+  --blur-sm: blur(14px) saturate(160%);
+  --blur-md: blur(22px) saturate(170%);
+  --blur-lg: blur(30px) saturate(180%);
+  /* Glow — dual-inset rim highlight (catches light like visionOS) */
+  --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.70);
+  --glow-md:
+    inset 0 1px 0 rgba(255, 255, 255, 0.85),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.20),
+    inset 1px 0 0 rgba(255, 255, 255, 0.35),
+    inset -1px 0 0 rgba(255, 255, 255, 0.20);
+  --glow-lg:
+    inset 0 2px 0 rgba(255, 255, 255, 0.95),
+    inset 0 -2px 0 rgba(255, 255, 255, 0.25),
+    inset 2px 0 0 rgba(255, 255, 255, 0.45),
+    inset -2px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 0 40px rgba(255, 255, 255, 0.15);
+  /* Motion */
+  --duration-fast: 180ms;
+  --duration-normal: 240ms;
+  --duration-slow: 380ms;
+  --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
+  /* ----------------------------------------------------------
+     SEMANTIC ALIASES
+     -----------------------------------------------------------
+     Bridge the library's expected names to this theme's native
+     palette. Components can now write m.color(surface-default)
+     or var(--surface-default) and reskin with the theme
+     automatically.
+     ---------------------------------------------------------- */
+  /* Backgrounds (page-level) */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  /* Interactive (hover / active wash layers)
+     Kept subtle so glass translucency reads through. */
+  --interactive-hover: rgba(29, 29, 31, 0.04);
+  --interactive-active: rgba(29, 29, 31, 0.08);
+  /* Brand (identity — action-primary usually references these) */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action (primary / secondary / tertiary) */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback / status (high-level semantic) */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info (three-part: default / subtle / text) */
+  --info-default: var(--ai);
+  --info-subtle: rgba(89, 87, 226, 0.12);
+  --info-text: var(--ai-ink);
+  /* Status — success (iOS system green) */
+  --success-default: #34C759;
+  --success-subtle: rgba(52, 199, 89, 0.12);
+  --success-text: #0F6A22;
+  /* Status — warning (iOS system orange) */
+  --warning-default: var(--ochre);
+  --warning-subtle: rgba(255, 149, 0, 0.12);
+  --warning-text: #985000;
+  /* Status — error (iOS system pink) */
+  --error-default: var(--shu);
+  --error-subtle: rgba(255, 55, 95, 0.12);
+  --error-text: #A3193A;
+  /* ----------------------------------------------------------
+     LIBRARY SCALES (space / radius / type / motion / z)
+     -----------------------------------------------------------
+     The library mixins emit var(--space-<key>), var(--radius-<key>),
+     var(--font-primary), var(--font-size-<key>), var(--z-<key>), …
+     Themes declare the slots so those mixins always resolve.
+     ---------------------------------------------------------- */
+  /* Space scale (rem for accessibility) */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias — mirrors --r-* with standard names so
+     `m.radius(size)` in the library finds --radius-<size>. */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  /* Typography — base body font + key scale slots */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index layers */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+:root[data-theme=graphite] {
+  color-scheme: light dark;
+  /* Surfaces — silver (light) / dark aluminum (dark) */
+  --paper: light-dark(#F2F4F6, #1A1A1C);
+  --paper-raised: light-dark(#FFF, #242426);
+  --paper-sunk: light-dark(#E2E5E8, #141416);
+  --paper-glass: light-dark(rgba(255, 255, 255, 0.72), rgba(36, 36, 38, 0.72));
+  /* Ink — cool near-black / warm white */
+  --ink: light-dark(#1A1F26, #F5F5F7);
+  --ink-soft: light-dark(#3A4048, #C7C7CC);
+  --ink-faint: light-dark(#5E646D, #98989D);
+  --graphite: light-dark(#2A2F36, #AEAEB2);
+  --muted: light-dark(#878D95, #6A6A6E);
+  /* Construction lines — translucent ink (light) / translucent white (dark) */
+  --guide: light-dark(rgba(26, 31, 38, 0.16), rgba(255, 255, 255, 0.16));
+  --guide-soft: light-dark(rgba(26, 31, 38, 0.08), rgba(255, 255, 255, 0.08));
+  --hair: light-dark(rgba(26, 31, 38, 0.12), rgba(255, 255, 255, 0.12));
+  --hair-soft: light-dark(rgba(26, 31, 38, 0.06), rgba(255, 255, 255, 0.06));
+  /* Primary accent — cool blue-gray (light) / Apple dark blue (dark) */
+  --ai: light-dark(#4A6585, #0A84FF);
+  --ai-ink: light-dark(#2F4866, #409CFF);
+  --ai-wash: light-dark(rgba(74, 101, 133, 0.10), rgba(10, 132, 255, 0.14));
+  /* Seal */
+  --shu: light-dark(#C24D40, #FF453A);
+  --shu-wash: light-dark(rgba(194, 77, 64, 0.10), rgba(255, 69, 58, 0.14));
+  /* Draft / marginalia */
+  --ochre: light-dark(#B5873A, #FF9F0A);
+  --ochre-wash: light-dark(rgba(181, 135, 58, 0.10), rgba(255, 159, 10, 0.12));
+  /* Code surface */
+  --code-bg: light-dark(#F6F7F9, #0D0D0F);
+  --code-ink: light-dark(#1A1F26, #E8E8ED);
+  --code-muted: light-dark(#666B73, #818186);
+  --code-accent: light-dark(#87652B, #FFB86C);
+  --code-green: light-dark(#3D7746, #A8E6A1);
+  --code-blue: light-dark(#4A6585, #9AD4F7);
+  /* Typography — SF stack, identical */
+  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: 'New York', 'Iowan Old Style', 'Cormorant Garamond', Georgia, serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
+  /* Radius — identical */
+  --r-sm: 6px;
+  --r-md: 10px;
+  --r-lg: 14px;
+  /* Shadows — restrained / deep drop on dark */
+  --shadow-sm: 0 1px 2px light-dark(rgba(26, 31, 38, 0.05), rgba(0, 0, 0, 0.35));
+  --shadow-md: 0 4px 14px light-dark(rgba(26, 31, 38, 0.07), rgba(0, 0, 0, 0.45));
+  --shadow-lg: 0 12px 32px light-dark(rgba(26, 31, 38, 0.10), rgba(0, 0, 0, 0.55));
+  --shadow-xl: 0 20px 50px light-dark(rgba(26, 31, 38, 0.13), rgba(0, 0, 0, 0.65));
+  --shadow-2xl: 0 28px 70px light-dark(rgba(26, 31, 38, 0.17), rgba(0, 0, 0, 0.75));
+  /* Blur — graphite doesn't use it */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow — inset rim-highlight that sells milled metal in BOTH modes */
+  --glow-sm: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.06));
+  --glow-md: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.08)),
+             0 1px 3px light-dark(rgba(26, 31, 38, 0.06), rgba(0, 0, 0, 0.35));
+  --glow-lg: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.10)),
+             0 12px 32px light-dark(rgba(26, 31, 38, 0.10), rgba(0, 0, 0, 0.55));
+  /* Motion — Apple-snappy, identical */
+  --duration-fast: 160ms;
+  --duration-normal: 220ms;
+  --duration-slow: 340ms;
+  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+  /* Semantic aliases */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  --interactive-hover: light-dark(rgba(26, 31, 38, 0.04), rgba(255, 255, 255, 0.06));
+  --interactive-active: light-dark(rgba(26, 31, 38, 0.08), rgba(255, 255, 255, 0.10));
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  --info-default: var(--ai);
+  --info-subtle: light-dark(rgba(74, 101, 133, 0.10), rgba(10, 132, 255, 0.14));
+  --info-text: light-dark(var(--ai-ink), #409CFF);
+  --success-default: light-dark(#28A745, #30D158);
+  --success-subtle: light-dark(rgba(40, 167, 69, 0.10), rgba(48, 209, 88, 0.14));
+  --success-text: light-dark(#1B7530, #5FE37F);
+  --warning-default: var(--ochre);
+  --warning-subtle: light-dark(rgba(181, 135, 58, 0.10), rgba(255, 159, 10, 0.14));
+  --warning-text: light-dark(#7A5A22, #FFB340);
+  --error-default: var(--shu);
+  --error-subtle: light-dark(rgba(194, 77, 64, 0.10), rgba(255, 69, 58, 0.14));
+  --error-text: light-dark(#8A2F25, #FF6961);
+  /* Library scales — identical */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+:root[data-theme=graphite-dark] {
+  color-scheme: dark;
+  /* Surfaces — milled aluminum chassis (dark) */
+  --paper: #1A1A1C;
+  --paper-raised: #242426;
+  --paper-sunk: #141416;
+  --paper-glass: rgba(36, 36, 38, 0.72);
+  /* Ink — warm whites on dark */
+  --ink: #F5F5F7;
+  --ink-soft: #C7C7CC;
+  --ink-faint: #98989D;
+  --graphite: #AEAEB2;
+  --muted: #6A6A6E;
+  /* Construction lines — translucent white hairlines */
+  --guide: rgba(255, 255, 255, 0.16);
+  --guide-soft: rgba(255, 255, 255, 0.08);
+  --hair: rgba(255, 255, 255, 0.12);
+  --hair-soft: rgba(255, 255, 255, 0.06);
+  /* Primary accent — Apple dark-mode system blue */
+  --ai: #0A84FF;
+  --ai-ink: #409CFF;
+  --ai-wash: rgba(10, 132, 255, 0.14);
+  /* Seal — Apple dark-mode red (reserve for emphasis) */
+  --shu: #FF453A;
+  --shu-wash: rgba(255, 69, 58, 0.14);
+  /* Draft / marginalia — Apple amber */
+  --ochre: #FF9F0A;
+  --ochre-wash: rgba(255, 159, 10, 0.12);
+  /* Code surface — Xcode deep */
+  --code-bg: #0D0D0F;
+  --code-ink: #E8E8ED;
+  --code-muted: #828287;
+  --code-accent: #FFB86C;
+  --code-green: #A8E6A1;
+  --code-blue: #9AD4F7;
+  /* Typography — SF system stack */
+  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: 'New York', 'Iowan Old Style', 'Cormorant Garamond', Georgia, serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
+  /* Radius — Apple UI standard */
+  --r-sm: 6px;
+  --r-md: 10px;
+  --r-lg: 14px;
+  /* Shadows — deep drop on black */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
+  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.65);
+  --shadow-2xl: 0 28px 70px rgba(0, 0, 0, 0.75);
+  /* Blur — graphite doesn't use it; declared so swap stays lossless */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow — inset rim-highlight that sells milled aluminum */
+  --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  --glow-md: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.35);
+  --glow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 40px rgba(0, 0, 0, 0.55);
+  /* Motion — Apple-snappy */
+  --duration-fast: 160ms;
+  --duration-normal: 220ms;
+  --duration-slow: 340ms;
+  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+  /* ----------------------------------------------------------
+     SEMANTIC ALIASES
+     -----------------------------------------------------------
+     Bridge the library's expected names to this theme's native
+     palette. Components can now write m.color(surface-default)
+     or var(--surface-default) and reskin with the theme
+     automatically.
+     ---------------------------------------------------------- */
+  /* Backgrounds (page-level) */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  /* Interactive (hover / active wash layers) — translucent WHITE on dark */
+  --interactive-hover: rgba(255, 255, 255, 0.06);
+  --interactive-active: rgba(255, 255, 255, 0.10);
+  /* Brand (identity — action-primary usually references these) */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action (primary / secondary / tertiary) */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback / status (high-level semantic) */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info (three-part: default / subtle / text) */
+  --info-default: var(--ai);
+  --info-subtle: rgba(10, 132, 255, 0.14);
+  --info-text: #409CFF;
+  /* Status — success (Apple dark-mode green) */
+  --success-default: #30D158;
+  --success-subtle: rgba(48, 209, 88, 0.14);
+  --success-text: #5FE37F;
+  /* Status — warning */
+  --warning-default: var(--ochre);
+  --warning-subtle: rgba(255, 159, 10, 0.14);
+  --warning-text: #FFB340;
+  /* Status — error */
+  --error-default: var(--shu);
+  --error-subtle: rgba(255, 69, 58, 0.14);
+  --error-text: #FF6961;
+  /* ----------------------------------------------------------
+     LIBRARY SCALES (space / radius / type / motion / z)
+     -----------------------------------------------------------
+     The library mixins emit var(--space-<key>), var(--radius-<key>),
+     var(--font-primary), var(--font-size-<key>), var(--z-<key>), …
+     Themes declare the slots so those mixins always resolve.
+     ---------------------------------------------------------- */
+  /* Space scale (rem for accessibility) */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias — mirrors --r-* with standard names so
+     `m.radius(size)` in the library finds --radius-<size>. */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  /* Typography — base body font + key scale slots */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index layers */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+:root[data-theme=graphite-light] {
+  color-scheme: light;
+  /* Surfaces — brushed silver chassis (light) */
+  --paper: #F2F4F6;
+  --paper-raised: #FFF;
+  --paper-sunk: #E2E5E8;
+  --paper-glass: rgba(255, 255, 255, 0.72);
+  /* Ink — cool near-black */
+  --ink: #1A1F26;
+  --ink-soft: #3A4048;
+  --ink-faint: #5E646D;
+  --graphite: #2A2F36;
+  --muted: #878D95;
+  /* Construction lines — translucent ink hairlines */
+  --guide: rgba(26, 31, 38, 0.16);
+  --guide-soft: rgba(26, 31, 38, 0.08);
+  --hair: rgba(26, 31, 38, 0.12);
+  --hair-soft: rgba(26, 31, 38, 0.06);
+  /* Primary accent — cool blue-gray (Apple system blue, light) */
+  --ai: #4A6585;
+  --ai-ink: #2F4866;
+  --ai-wash: rgba(74, 101, 133, 0.10);
+  /* Seal — restrained warm red */
+  --shu: #C24D40;
+  --shu-wash: rgba(194, 77, 64, 0.10);
+  /* Draft / marginalia — warm gold */
+  --ochre: #B5873A;
+  --ochre-wash: rgba(181, 135, 58, 0.10);
+  /* Code surface — light Xcode */
+  --code-bg: #F6F7F9;
+  --code-ink: #1A1F26;
+  --code-muted: #656A72;
+  --code-accent: #86642B;
+  --code-green: #3F7A48;
+  --code-blue: #4A6585;
+  /* Typography — match Graphite (SF system stack) */
+  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: 'New York', 'Iowan Old Style', 'Cormorant Garamond', Georgia, serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
+  /* Radius — match Graphite (Apple UI standard) */
+  --r-sm: 6px;
+  --r-md: 10px;
+  --r-lg: 14px;
+  /* Shadows — restrained, lifted (machined precision) */
+  --shadow-sm: 0 1px 2px rgba(26, 31, 38, 0.05);
+  --shadow-md: 0 4px 14px rgba(26, 31, 38, 0.07);
+  --shadow-lg: 0 12px 32px rgba(26, 31, 38, 0.10);
+  --shadow-xl: 0 20px 50px rgba(26, 31, 38, 0.13);
+  --shadow-2xl: 0 28px 70px rgba(26, 31, 38, 0.17);
+  /* Blur — graphite doesn't use it */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow — inset rim-highlight (sells brushed metal even in light) */
+  --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.50);
+  --glow-md: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 3px rgba(26, 31, 38, 0.06);
+  --glow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 12px 32px rgba(26, 31, 38, 0.10);
+  /* Motion — Apple-snappy, match Graphite */
+  --duration-fast: 160ms;
+  --duration-normal: 220ms;
+  --duration-slow: 340ms;
+  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+  /* ----------------------------------------------------------
+     SEMANTIC ALIASES
+     ---------------------------------------------------------- */
+  /* Backgrounds */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  /* Interactive — translucent ink wash on light silver */
+  --interactive-hover: rgba(26, 31, 38, 0.04);
+  --interactive-active: rgba(26, 31, 38, 0.08);
+  /* Brand */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action triplets */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info */
+  --info-default: var(--ai);
+  --info-subtle: rgba(74, 101, 133, 0.10);
+  --info-text: var(--ai-ink);
+  /* Status — success (Apple light-mode green) */
+  --success-default: #28A745;
+  --success-subtle: rgba(40, 167, 69, 0.10);
+  --success-text: #1B7530;
+  /* Status — warning */
+  --warning-default: var(--ochre);
+  --warning-subtle: rgba(181, 135, 58, 0.10);
+  --warning-text: #7A5A22;
+  /* Status — error */
+  --error-default: var(--shu);
+  --error-subtle: rgba(194, 77, 64, 0.10);
+  --error-text: #8A2F25;
+  /* ----------------------------------------------------------
+     LIBRARY SCALES
+     ---------------------------------------------------------- */
+  /* Space scale */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  /* Typography */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+:root[data-theme=press] {
+  color-scheme: light dark;
+  /* ----------------------------------------------------------------
+     Surfaces — light: warm newsprint / dark: near-ink newsroom
+     ---------------------------------------------------------------- */
+  --paper: light-dark(#FAFAF7, #0E0E0E);
+  --paper-raised: light-dark(#FFF, #1A1A1A);
+  --paper-sunk: light-dark(#F2F1EC, #060606);
+  --paper-glass: light-dark(rgba(255, 255, 255, 0.80), rgba(26, 26, 26, 0.82));
+  /* ----------------------------------------------------------------
+     Ink — light: warm near-black / dark: warm off-white
+     ---------------------------------------------------------------- */
+  --ink: light-dark(#0A0A0A, #FAFAF7);
+  --ink-soft: light-dark(#555, #C8C6C0);
+  --ink-faint: light-dark(#727069, #8A8A86);
+  --graphite: light-dark(#1A1A1A, #ECEAE4);
+  --muted: light-dark(#8E8C86, #6B6963);
+  /* Rules / hairlines */
+  --guide: light-dark(#1A1A1A, #ECEAE4);
+  --guide-soft: light-dark(#D9D7D1, #2A2A2A);
+  --hair: light-dark(#1A1A1A, #2A2A2A);
+  --hair-soft: light-dark(#ECEAE4, #1A1A1A);
+  /* Primary accent — near-ink editorial link */
+  --ai: light-dark(#1A1A1A, #A8A8A8);
+  --ai-ink: light-dark(#0A0A0A, #ECEAE4);
+  --ai-wash: light-dark(#ECEAE4, #1F1F1F);
+  /* Seal — press red */
+  --shu: light-dark(#D93025, #FF4538);
+  --shu-wash: light-dark(#FBEAE8, rgba(255, 69, 56, 0.14));
+  /* Pull-quote / marginalia — warm gold */
+  --ochre: light-dark(#B5873A, #E8B96E);
+  --ochre-wash: light-dark(#F4EBD6, rgba(232, 185, 110, 0.12));
+  /* Code surface */
+  --code-bg: light-dark(#0A0A0A, #060606);
+  --code-ink: #FAFAF7;
+  --code-muted: #8A8A86;
+  --code-accent: #E8B96E;
+  --code-green: #B8C57A;
+  --code-blue: #94AFC9;
+  /* ----------------------------------------------------------------
+     Typography — identical across modes
+     ---------------------------------------------------------------- */
+  --font-display: 'Playfair Display', 'Tiempos', 'Fraunces', Georgia, serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: 'Playfair Display', 'Tiempos', 'Cormorant Garamond', Georgia, serif;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;
+  /* ----------------------------------------------------------------
+     Radius — identical, editorial = always tight
+     ---------------------------------------------------------------- */
+  --r-sm: 2px;
+  --r-md: 3px;
+  --r-lg: 4px;
+  /* ----------------------------------------------------------------
+     Shadows — same shape, different alpha per mode (rgba is <color>)
+     ---------------------------------------------------------------- */
+  --shadow-sm: 0 1px 2px light-dark(rgba(10, 10, 10, 0.05), rgba(0, 0, 0, 0.35));
+  --shadow-md: 0 6px 24px light-dark(rgba(10, 10, 10, 0.06), rgba(0, 0, 0, 0.45));
+  --shadow-lg: 0 18px 48px light-dark(rgba(10, 10, 10, 0.09), rgba(0, 0, 0, 0.55));
+  --shadow-xl: 0 28px 64px light-dark(rgba(10, 10, 10, 0.12), rgba(0, 0, 0, 0.65));
+  --shadow-2xl: 0 40px 96px light-dark(rgba(10, 10, 10, 0.18), rgba(0, 0, 0, 0.75));
+  /* Blur / glow — editorial doesn't use these */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* ----------------------------------------------------------------
+     Motion — editorial pace, identical across modes
+     ---------------------------------------------------------------- */
+  --duration-fast: 200ms;
+  --duration-normal: 280ms;
+  --duration-slow: 420ms;
+  --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
+  /* ----------------------------------------------------------------
+     SEMANTIC ALIASES — bridge library expected names to Press palette
+     ---------------------------------------------------------------- */
+  /* Backgrounds */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: light-dark(var(--ai), var(--ink));
+  --text-link-hover: light-dark(var(--ai-ink), var(--shu));
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: light-dark(var(--ai), var(--shu));
+  /* Interactive (hover / active wash) */
+  --interactive-hover: light-dark(rgba(10, 10, 10, 0.05), rgba(250, 250, 247, 0.05));
+  --interactive-active: light-dark(rgba(10, 10, 10, 0.10), rgba(250, 250, 247, 0.10));
+  /* Brand */
+  --brand-primary: light-dark(var(--ai), var(--ink));
+  --brand-primary-hover: light-dark(var(--ai-ink), var(--shu));
+  /* Action — three groups */
+  --action-primary-default: light-dark(var(--ai), var(--ink));
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback (high-level semantic) */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info */
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: var(--ai-ink);
+  /* Status — success (restrained editorial green) */
+  --success-default: light-dark(#2F7A3A, #6FA85A);
+  --success-subtle: light-dark(#E3EEDF, rgba(111, 168, 90, 0.14));
+  --success-text: light-dark(#1F5228, #95C97F);
+  /* Status — warning (warm editorial ochre) */
+  --warning-default: light-dark(#A86A1A, var(--ochre));
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: light-dark(#6B4512, #F0CC8E);
+  /* Status — error (press red IS the error color) */
+  --error-default: var(--shu);
+  --error-subtle: var(--shu-wash);
+  --error-text: light-dark(#8A1D15, #FF7A70);
+  /* ----------------------------------------------------------------
+     LIBRARY SCALES — identical across modes
+     ---------------------------------------------------------------- */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 6px;
+  --radius-full: 9999px;
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* ----------------------------------------------------------------
+     COMPONENT OVERRIDES — identical across modes
+     ---------------------------------------------------------------- */
+  --btn-radius: var(--r-sm); /* 2px — near-square */
+  --card-radius: var(--r-sm); /* 2px — boxed */
+  --card-shadow: none; /* editorial is flat */
+  --card-border: 1px solid var(--hair); /* thin rule instead */
+  --input-radius: var(--r-sm); /* 2px */
+  --modal-radius: var(--r-md); /* 3px */
+}
+:root[data-theme=press-dark] {
+  color-scheme: dark;
+  /* Surfaces — near-ink newsroom */
+  --paper: #0E0E0E;
+  --paper-raised: #1A1A1A;
+  --paper-sunk: #060606;
+  --paper-glass: rgba(26, 26, 26, 0.82);
+  /* Ink — warm off-white headline */
+  --ink: #FAFAF7;
+  --ink-soft: #C8C6C0;
+  --ink-faint: #8A8A86;
+  --graphite: #ECEAE4;
+  --muted: #6B6963;
+  /* Rules / hairlines — thin editorial rules on dark */
+  --guide: #ECEAE4;
+  --guide-soft: #2A2A2A;
+  --hair: #2A2A2A;
+  --hair-soft: #1A1A1A;
+  /* Primary accent — cool ink, near-mono editorial link */
+  --ai: #A8A8A8;
+  --ai-ink: #ECEAE4;
+  --ai-wash: #1F1F1F;
+  /* Seal — press red (kept hot) */
+  --shu: #FF4538;
+  --shu-wash: rgba(255, 69, 56, 0.14);
+  /* Pull-quote / marginalia — warm gold */
+  --ochre: #E8B96E;
+  --ochre-wash: rgba(232, 185, 110, 0.12);
+  /* Code surface — keep ink-slab, lifted slightly above paper */
+  --code-bg: #060606;
+  --code-ink: #FAFAF7;
+  --code-muted: #8A8A86;
+  --code-accent: #E8B96E;
+  --code-green: #B8C57A;
+  --code-blue: #94AFC9;
+  /* Typography — match Press */
+  --font-display: 'Playfair Display', 'Tiempos', 'Fraunces', Georgia, serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: 'Playfair Display', 'Tiempos', 'Cormorant Garamond', Georgia, serif;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;
+  /* Radius — match Press, very square */
+  --r-sm: 2px;
+  --r-md: 3px;
+  --r-lg: 4px;
+  /* Shadows — minimal, deeper for dark */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
+  --shadow-md: 0 6px 24px rgba(0, 0, 0, .45);
+  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
+  --shadow-xl: 0 28px 64px rgba(0, 0, 0, .65);
+  --shadow-2xl: 0 40px 96px rgba(0, 0, 0, .75);
+  /* Blur — editorial doesn't use it */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow — editorial doesn't use it */
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — editorial pace, match Press */
+  --duration-fast: 200ms;
+  --duration-normal: 280ms;
+  --duration-slow: 420ms;
+  --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
+  /* ----------------------------------------------------------
+     SEMANTIC ALIASES
+     ---------------------------------------------------------- */
+  /* Backgrounds */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ink);
+  --text-link-hover: var(--shu);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--shu);
+  /* Interactive (hover / active wash) — light wash on dark */
+  --interactive-hover: rgba(250, 250, 247, 0.05);
+  --interactive-active: rgba(250, 250, 247, 0.10);
+  /* Brand */
+  --brand-primary: var(--ink);
+  --brand-primary-hover: var(--shu);
+  /* Action triplets */
+  --action-primary-default: var(--ink);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info (near-mono editorial) */
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: var(--ai-ink);
+  /* Status — success (restrained editorial green, lifted) */
+  --success-default: #6FA85A;
+  --success-subtle: rgba(111, 168, 90, 0.14);
+  --success-text: #95C97F;
+  /* Status — warning (warm editorial ochre) */
+  --warning-default: var(--ochre);
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: #F0CC8E;
+  /* Status — error — press red IS the error color */
+  --error-default: var(--shu);
+  --error-subtle: var(--shu-wash);
+  --error-text: #FF7A70;
+  /* ----------------------------------------------------------
+     LIBRARY SCALES
+     ---------------------------------------------------------- */
+  /* Space scale */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias — Press is editorial, xl stays tight (6px) */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 6px;
+  --radius-full: 9999px;
+  /* Typography */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* ----------------------------------------------------------
+     OPTIONAL COMPONENT OVERRIDES — match Press exactly
+     ---------------------------------------------------------- */
+  --btn-radius: var(--r-sm); /* 2px — near-square */
+  --card-radius: var(--r-sm); /* 2px — boxed */
+  --card-shadow: none; /* editorial is flat */
+  --card-border: 1px solid var(--hair); /* thin rule instead */
+  --input-radius: var(--r-sm); /* 2px */
+  --modal-radius: var(--r-md); /* 3px */
+}
+:root[data-theme=press-light] {
+  color-scheme: light;
+  /* Surfaces — warm newsprint */
+  --paper: #FAFAF7;
+  --paper-raised: #FFF;
+  --paper-sunk: #F2F1EC;
+  --paper-glass: rgba(255, 255, 255, 0.80);
+  /* Ink — warm near-black */
+  --ink: #0A0A0A;
+  --ink-soft: #555;
+  --ink-faint: #727069;
+  --graphite: #1A1A1A;
+  --muted: #8E8C86;
+  /* Rules / hairlines — thin editorial rules */
+  --guide: #1A1A1A;
+  --guide-soft: #D9D7D1;
+  --hair: #1A1A1A;
+  --hair-soft: #ECEAE4;
+  /* Primary accent — near-ink editorial link (not a bright hue) */
+  --ai: #1A1A1A;
+  --ai-ink: #0A0A0A;
+  --ai-wash: #ECEAE4;
+  /* Seal — press red (the single editorial accent) */
+  --shu: #D93025;
+  --shu-wash: #FBEAE8;
+  /* Pull-quote / marginalia — warm gold */
+  --ochre: #B5873A;
+  --ochre-wash: #F4EBD6;
+  /* Code surface — keep editorial (ink slab) */
+  --code-bg: #0A0A0A;
+  --code-ink: #FAFAF7;
+  --code-muted: #8A8A86;
+  --code-accent: #E8B96E;
+  --code-green: #B8C57A;
+  --code-blue: #94AFC9;
+  /* Typography */
+  --font-display: 'Playfair Display', 'Tiempos', 'Fraunces', Georgia, serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: 'Playfair Display', 'Tiempos', 'Cormorant Garamond', Georgia, serif;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;
+  /* Radius — editorial is tight, very square */
+  --r-sm: 2px;
+  --r-md: 3px;
+  --r-lg: 4px;
+  /* Shadows — minimal, single-layer, editorial flat */
+  --shadow-sm: 0 1px 2px rgba(10, 10, 10, .05);
+  --shadow-md: 0 6px 24px rgba(10, 10, 10, .06);
+  --shadow-lg: 0 18px 48px rgba(10, 10, 10, .09);
+  --shadow-xl: 0 28px 64px rgba(10, 10, 10, .12);
+  --shadow-2xl: 0 40px 96px rgba(10, 10, 10, .18);
+  /* Blur — editorial doesn't use it; declared so swap stays lossless */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow — editorial doesn't use it; declared transparent */
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — editorial reads slower than digital */
+  --duration-fast: 200ms;
+  --duration-normal: 280ms;
+  --duration-slow: 420ms;
+  --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
+  /* ----------------------------------------------------------
+     SEMANTIC ALIASES
+     -----------------------------------------------------------
+     Bridge the library's expected names to this theme's native
+     palette. Components can now write m.color(surface-default)
+     or var(--surface-default) and reskin with the theme
+     automatically.
+     ---------------------------------------------------------- */
+  /* Backgrounds (page-level) */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  /* Interactive (hover / active wash layers) — ink overlays on paper */
+  --interactive-hover: rgba(10, 10, 10, 0.05);
+  --interactive-active: rgba(10, 10, 10, 0.10);
+  /* Brand (identity — action-primary references these) */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action (primary / secondary / tertiary) */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback / status (high-level semantic) */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info (three-part: default / subtle / text).
+     Press has no indigo; --ai is a near-ink editorial tone. */
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: var(--ai-ink);
+  /* Status — success. Restrained editorial green (desaturated). */
+  --success-default: #2F7A3A;
+  --success-subtle: #E3EEDF;
+  --success-text: #1F5228;
+  /* Status — warning. Warm editorial ochre. */
+  --warning-default: #A86A1A;
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: #6B4512;
+  /* Status — error. Press red IS the error color. */
+  --error-default: var(--shu);
+  --error-subtle: var(--shu-wash);
+  --error-text: #8A1D15;
+  /* ----------------------------------------------------------
+     LIBRARY SCALES (space / radius / type / z)
+     -----------------------------------------------------------
+     The library mixins emit var(--space-<key>), var(--radius-<key>),
+     var(--font-primary), var(--font-size-<key>), var(--z-<key>), …
+     Themes declare the slots so those mixins always resolve.
+     Numeric scales mirror Sketchbook so rhythm is consistent.
+     ---------------------------------------------------------- */
+  /* Space scale (rem for accessibility) */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias — mirrors --r-* with standard names so
+     `m.radius(size)` in the library finds --radius-<size>.
+     Press is editorial and angular: xl stays tight (4px). */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 6px;
+  --radius-full: 9999px;
+  /* Typography — base body font + key scale slots.
+     Press body is Inter (--font-sans). */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index layers */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* ----------------------------------------------------------
+     OPTIONAL COMPONENT OVERRIDES (Feature 1.3)
+     -----------------------------------------------------------
+     Press is editorial newsprint: very tight radii (2–4px),
+     shadowless cards (rules, not lifts), flat panels.
+     Overrides are sparse — only the choices that define the
+     editorial voice, defaults carry the rest.
+     ---------------------------------------------------------- */
+  --btn-radius: var(--r-sm); /* 2px — near-square control */
+  --card-radius: var(--r-sm); /* 2px — boxed layout */
+  --card-shadow: none; /* editorial is flat */
+  --card-border: 1px solid var(--hair); /* thin ink rule instead */
+  --input-radius: var(--r-sm); /* 2px — text field */
+  --modal-radius: var(--r-md); /* 3px — still tight */
+}
+:root[data-theme=prism] {
+  color-scheme: light dark;
+  /* Surfaces */
+  --paper: light-dark(#fff, #09090b);
+  --paper-raised: light-dark(#fff, #18181b);
+  --paper-sunk: light-dark(#f4f4f5, #27272a);
+  --paper-glass: light-dark(rgba(255, 255, 255, 0.80), rgba(24, 24, 27, 0.80));
+  /* Ink — zinc neutral ramp */
+  --ink: light-dark(#09090b, #fafafa);
+  --ink-soft: light-dark(#27272a, #e4e4e7);
+  --ink-faint: light-dark(#52525b, #a1a1aa);
+  --graphite: light-dark(#18181b, #f4f4f5);
+  --muted: light-dark(#71717a, #71717a);
+  /* Lines */
+  --guide: light-dark(#d4d4d8, #3f3f46);
+  --guide-soft: light-dark(#e4e4e7, #27272a);
+  --hair: light-dark(#e4e4e7, #27272a);
+  --hair-soft: light-dark(#f4f4f5, #18181b);
+  /* Primary accent — refined blue (brighter for dark) */
+  --ai: light-dark(#2563eb, #3b82f6);
+  --ai-ink: light-dark(#1d4ed8, #60a5fa);
+  --ai-wash: light-dark(#eff6ff, #1e3a8a);
+  /* Seal — red */
+  --shu: light-dark(#dc2626, #ef4444);
+  --shu-wash: light-dark(#fef2f2, #450a0a);
+  /* Tertiary — amber */
+  --ochre: light-dark(#ca8a04, #eab308);
+  --ochre-wash: light-dark(#fefce8, #422006);
+  /* Code surface */
+  --code-bg: light-dark(#fafafa, #0a0a0a);
+  --code-ink: light-dark(#18181b, #e4e4e7);
+  --code-muted: light-dark(#6B6B73, #808089);
+  --code-accent: light-dark(#C1410C, #fb923c);
+  --code-green: light-dark(#117D39, #4ade80);
+  --code-blue: light-dark(#2462EB, #60a5fa);
+  /* Typography — identical across modes */
+  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-script: 'Inter', cursive;
+  --font-serif: Georgia, 'Times New Roman', Times, serif;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', Consolas, Menlo, monospace;
+  /* Radius — identical */
+  --r-sm: 4px;
+  --r-md: 6px;
+  --r-lg: 8px;
+  /* Shadow — extremely subtle, heavier on dark */
+  --shadow-sm: 0 1px 1px light-dark(rgba(9, 9, 11, 0.03), rgba(0, 0, 0, 0.30));
+  --shadow-md: 0 1px 2px light-dark(rgba(9, 9, 11, 0.05), rgba(0, 0, 0, 0.40));
+  --shadow-lg: 0 4px 12px -4px light-dark(rgba(9, 9, 11, 0.08), rgba(0, 0, 0, 0.60));
+  --shadow-xl: 0 16px 32px -16px light-dark(rgba(9, 9, 11, 0.15), rgba(0, 0, 0, 0.70));
+  --shadow-2xl: 0 0 0 1px light-dark(#e4e4e7, #27272a), 0 8px 24px -8px light-dark(rgba(9, 9, 11, 0.12), rgba(0, 0, 0, 0.60));
+  /* Blur / glow — Prism uses neither */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — fast + crisp, identical */
+  --duration-fast: 100ms;
+  --duration-normal: 150ms;
+  --duration-slow: 250ms;
+  --ease: cubic-bezier(.32, .72, 0, 1);
+  /* Semantic aliases */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--guide);
+  --border-focus: var(--ai);
+  --interactive-hover: light-dark(rgba(9, 9, 11, 0.05), rgba(255, 255, 255, 0.05));
+  --interactive-active: light-dark(rgba(9, 9, 11, 0.10), rgba(255, 255, 255, 0.10));
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  --feedback-info: var(--ai);
+  --feedback-success: light-dark(#16a34a, #22c55e);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: light-dark(var(--ai-ink), #85BFFF);
+  --success-default: light-dark(#16a34a, #22c55e);
+  --success-subtle: light-dark(#f0fdf4, #14532d);
+  --success-text: light-dark(#15803d, #4ade80);
+  --warning-default: light-dark(#ca8a04, #eab308);
+  --warning-subtle: light-dark(#fefce8, #422006);
+  --warning-text: light-dark(#854d0e, #fde047);
+  --error-default: light-dark(#dc2626, #ef4444);
+  --error-subtle: light-dark(#fef2f2, #450a0a);
+  --error-text: light-dark(#b91c1c, #fca5a5);
+  /* Library scales — identical */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 12px;
+  --radius-full: 9999px;
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* Component overrides — border-driven, tight radii */
+  --btn-radius: var(--r-md);
+  --card-radius: var(--r-md);
+  --card-shadow: var(--shadow-sm);
+  --card-border: 1px solid var(--hair);
+  --input-radius: var(--r-md);
+  --modal-radius: var(--r-lg);
+}
+:root[data-theme=prism-dark] {
+  color-scheme: dark;
+  /* Surfaces — Zinc dark ramp */
+  --paper: #09090b;
+  --paper-raised: #18181b;
+  --paper-sunk: #27272a;
+  --paper-glass: rgba(24, 24, 27, 0.80);
+  /* Ink — inverted neutrals */
+  --ink: #fafafa;
+  --ink-soft: #e4e4e7;
+  --ink-faint: #a1a1aa;
+  --graphite: #f4f4f5;
+  --muted: #71717a;
+  /* Lines — dark borders */
+  --guide: #3f3f46;
+  --guide-soft: #27272a;
+  --hair: #27272a;
+  --hair-soft: #18181b;
+  /* Primary accent — brighter blue for dark surfaces */
+  --ai: #3b82f6;
+  --ai-ink: #60a5fa;
+  --ai-wash: #1e3a8a;
+  /* Seal — red */
+  --shu: #ef4444;
+  --shu-wash: #450a0a;
+  /* Tertiary — amber */
+  --ochre: #eab308;
+  --ochre-wash: #422006;
+  /* Code — dark syntax surface */
+  --code-bg: #0a0a0a;
+  --code-ink: #e4e4e7;
+  --code-muted: #808089;
+  --code-accent: #fb923c;
+  --code-green: #4ade80;
+  --code-blue: #60a5fa;
+  /* Typography */
+  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-script: 'Inter', cursive;
+  --font-serif: Georgia, 'Times New Roman', Times, serif;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', Consolas, Menlo, monospace;
+  /* Radius */
+  --r-sm: 4px;
+  --r-md: 6px;
+  --r-lg: 8px;
+  /* Shadow — heavier for dark backgrounds */
+  --shadow-sm: 0 1px 1px rgba(0, 0, 0, .3);
+  --shadow-md: 0 1px 2px rgba(0, 0, 0, .4);
+  --shadow-lg: 0 4px 12px -4px rgba(0, 0, 0, .6);
+  --shadow-xl: 0 16px 32px -16px rgba(0, 0, 0, .7);
+  --shadow-2xl: 0 0 0 1px #27272a, 0 8px 24px -8px rgba(0, 0, 0, .6);
+  /* Blur */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow */
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion */
+  --duration-fast: 100ms;
+  --duration-normal: 150ms;
+  --duration-slow: 250ms;
+  --ease: cubic-bezier(.32, .72, 0, 1);
+  /* Backgrounds */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces (semantic) */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--guide);
+  --border-focus: var(--ai);
+  /* Interactive overlays — light wash on dark */
+  --interactive-hover: rgba(255, 255, 255, 0.05);
+  --interactive-active: rgba(255, 255, 255, 0.10);
+  /* Brand */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action triplets */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback */
+  --feedback-info: var(--ai);
+  --feedback-success: #22c55e;
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info */
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: #85BFFF;
+  /* Status — success */
+  --success-default: #22c55e;
+  --success-subtle: #14532d;
+  --success-text: #4ade80;
+  /* Status — warning */
+  --warning-default: #eab308;
+  --warning-subtle: #422006;
+  --warning-text: #fde047;
+  /* Status — error */
+  --error-default: #ef4444;
+  --error-subtle: #450a0a;
+  --error-text: #fca5a5;
+  /* Space scale */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 12px;
+  --radius-full: 9999px;
+  /* Typography */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index layers */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* Component overrides */
+  --btn-radius: var(--r-md);
+  --card-radius: var(--r-md);
+  --card-shadow: var(--shadow-sm);
+  --card-border: 1px solid var(--hair);
+  --input-radius: var(--r-md);
+  --modal-radius: var(--r-lg);
+}
+:root[data-theme=prism-light] {
+  color-scheme: light;
+  /* Surfaces */
+  --paper: #fff;
+  --paper-raised: #fff;
+  --paper-sunk: #f4f4f5;
+  --paper-glass: rgba(255, 255, 255, 0.80);
+  /* Ink — Zinc neutral ramp */
+  --ink: #09090b;
+  --ink-soft: #27272a;
+  --ink-faint: #52525b;
+  --graphite: #18181b;
+  --muted: #71717a;
+  /* Lines */
+  --guide: #d4d4d8;
+  --guide-soft: #e4e4e7;
+  --hair: #e4e4e7;
+  --hair-soft: #f4f4f5;
+  /* Primary accent — refined blue */
+  --ai: #2563eb;
+  --ai-ink: #1d4ed8;
+  --ai-wash: #eff6ff;
+  /* Seal — red (used for error / secondary) */
+  --shu: #dc2626;
+  --shu-wash: #fef2f2;
+  /* Tertiary — amber (used for warning) */
+  --ochre: #ca8a04;
+  --ochre-wash: #fefce8;
+  /* Code — light syntax surface */
+  --code-bg: #fafafa;
+  --code-ink: #18181b;
+  --code-muted: #71717a;
+  --code-accent: #c2410c;
+  --code-green: #117C38;
+  --code-blue: #2563eb;
+  /* Typography */
+  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-script: 'Inter', cursive;
+  --font-serif: Georgia, 'Times New Roman', Times, serif;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', Consolas, Menlo, monospace;
+  /* Radius */
+  --r-sm: 4px;
+  --r-md: 6px;
+  --r-lg: 8px;
+  /* Shadow — extremely subtle */
+  --shadow-sm: 0 1px 1px rgba(9, 9, 11, .03);
+  --shadow-md: 0 1px 2px rgba(9, 9, 11, .05);
+  --shadow-lg: 0 4px 12px -4px rgba(9, 9, 11, .08);
+  --shadow-xl: 0 16px 32px -16px rgba(9, 9, 11, .15);
+  --shadow-2xl: 0 0 0 1px #e4e4e7, 0 8px 24px -8px rgba(9, 9, 11, .12);
+  /* Blur — Prism doesn't use frosted surfaces */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow — Prism doesn't use glow effects */
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — fast and crisp */
+  --duration-fast: 100ms;
+  --duration-normal: 150ms;
+  --duration-slow: 250ms;
+  --ease: cubic-bezier(.32, .72, 0, 1);
+  /* Backgrounds */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces (semantic) */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--guide);
+  --border-focus: var(--ai);
+  /* Interactive overlays */
+  --interactive-hover: rgba(9, 9, 11, 0.05);
+  --interactive-active: rgba(9, 9, 11, 0.10);
+  /* Brand */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action triplets */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback */
+  --feedback-info: var(--ai);
+  --feedback-success: #16a34a;
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info */
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: var(--ai-ink);
+  /* Status — success */
+  --success-default: #16a34a;
+  --success-subtle: #f0fdf4;
+  --success-text: #15803d;
+  /* Status — warning */
+  --warning-default: #ca8a04;
+  --warning-subtle: #fefce8;
+  --warning-text: #854d0e;
+  /* Status — error */
+  --error-default: #dc2626;
+  --error-subtle: #fef2f2;
+  --error-text: #b91c1c;
+  /* Space scale */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 12px;
+  --radius-full: 9999px;
+  /* Typography */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index layers */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* Component overrides — Prism is border-driven and tightly rounded */
+  --btn-radius: var(--r-md);
+  --card-radius: var(--r-md);
+  --card-shadow: var(--shadow-sm);
+  --card-border: 1px solid var(--hair);
+  --input-radius: var(--r-md);
+  --modal-radius: var(--r-lg);
+}
+:root[data-theme=sketchbook] {
+  color-scheme: light dark;
+  /* Surfaces — warm paper / warm charcoal paper */
+  --paper: light-dark(#F7F3EA, #1A1815);
+  --paper-raised: light-dark(#FDFAF2, #2A2520);
+  --paper-sunk: light-dark(#ECE5D3, #11100E);
+  --paper-glass: light-dark(rgba(253, 250, 242, 0.75), rgba(42, 37, 32, 0.78));
+  /* Ink — warm pencil + sumi / warm cream */
+  --ink: light-dark(#2A241E, #F4EFE2);
+  --ink-soft: light-dark(#4A4037, #D8D0BE);
+  --ink-faint: light-dark(#726858, #A89E89);
+  --graphite: light-dark(#3A332B, #E8E0CE);
+  --muted: light-dark(#948977, #7A715F);
+  /* Construction lines */
+  --guide: light-dark(#C9BDA5, #4A4239);
+  --guide-soft: light-dark(#DDD4C0, #382F27);
+  --hair: light-dark(#D4CCBB, #3F362C);
+  --hair-soft: light-dark(#E8E2D4, #2A241E);
+  /* Primary accent — indigo (lifted for dark paper) */
+  --ai: light-dark(#1F3A5F, #6E8FBF);
+  --ai-ink: light-dark(#14263F, #8DA8D1);
+  --ai-wash: light-dark(#E5EBF1, #1F2B3F);
+  /* Seal — vermilion (warm, brightens slightly on dark) */
+  --shu: light-dark(#C1272D, #E36148);
+  --shu-wash: light-dark(#F6E3E1, #3A1A14);
+  /* Draft / marginalia — warm gold */
+  --ochre: light-dark(#A37B30, #D4A04B);
+  --ochre-wash: light-dark(#F0E5CC, #382B14);
+  /* Code surface — inverts intentionally */
+  --code-bg: light-dark(#2B2420, #F7F3EA);
+  --code-ink: light-dark(#F7F3EA, #2B2420);
+  --code-muted: light-dark(#A39787, #6B5E50);
+  --code-accent: light-dark(#E5B660, #836327);
+  --code-green: light-dark(#A8B86C, #537136);
+  --code-blue: light-dark(#94AFC9, #1F3A5F);
+  /* Typography — identical across modes */
+  --font-display: 'DM Serif Display', 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: 'Noto Serif JP', 'Cormorant Garamond', Georgia, serif;
+  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;
+  /* Radius — identical */
+  --r-sm: 2px;
+  --r-md: 3px;
+  --r-lg: 6px;
+  /* Shadows — ink bleeding through paper / deep drop on charcoal */
+  --shadow-sm: 0 1px 2px light-dark(rgba(42, 36, 30, 0.06), rgba(0, 0, 0, 0.35));
+  --shadow-md: 0 4px 18px light-dark(rgba(42, 36, 30, 0.08), rgba(0, 0, 0, 0.45));
+  --shadow-lg: 0 12px 40px light-dark(rgba(42, 36, 30, 0.12), rgba(0, 0, 0, 0.55));
+  --shadow-xl: 0 20px 50px light-dark(rgba(42, 36, 30, 0.16), rgba(0, 0, 0, 0.65));
+  --shadow-2xl: 0 28px 70px light-dark(rgba(42, 36, 30, 0.22), rgba(0, 0, 0, 0.75));
+  /* Blur / glow — paper themes don't use either */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — editorial pace, identical */
+  --duration-fast: 180ms;
+  --duration-normal: 240ms;
+  --duration-slow: 380ms;
+  --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
+  /* Semantic aliases */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: light-dark(var(--ink), var(--guide));
+  --border-focus: var(--ai);
+  --interactive-hover: light-dark(rgba(42, 36, 30, 0.06), rgba(244, 239, 226, 0.06));
+  --interactive-active: light-dark(rgba(42, 36, 30, 0.12), rgba(244, 239, 226, 0.12));
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: var(--ai-ink);
+  --success-default: light-dark(#5A7A3A, #8DA86A);
+  --success-subtle: light-dark(#EAEFDC, #1F2B14);
+  --success-text: light-dark(#3F5627, #B8CC8E);
+  --warning-default: var(--ochre);
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: light-dark(#6B4E1E, #E8BF6E);
+  --error-default: var(--shu);
+  --error-subtle: var(--shu-wash);
+  --error-text: light-dark(#7A1A1F, #F08A72);
+  /* Library scales — identical */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+:root[data-theme=sketchbook-dark] {
+  color-scheme: dark;
+  /* Surfaces — warm charcoal paper */
+  --paper: #1A1815;
+  --paper-raised: #2A2520;
+  --paper-sunk: #11100E;
+  --paper-glass: rgba(42, 37, 32, 0.78);
+  /* Ink — warm cream pencil */
+  --ink: #F4EFE2;
+  --ink-soft: #D8D0BE;
+  --ink-faint: #A89E89;
+  --graphite: #E8E0CE;
+  --muted: #7A715F;
+  /* Construction lines — warm dark hairlines */
+  --guide: #4A4239;
+  --guide-soft: #382F27;
+  --hair: #3F362C;
+  --hair-soft: #2A241E;
+  /* Primary accent — lifted indigo for dark paper */
+  --ai: #6E8FBF;
+  --ai-ink: #8DA8D1;
+  --ai-wash: #1F2B3F;
+  /* Seal — vermilion (stays warm, brightened slightly) */
+  --shu: #E36148;
+  --shu-wash: #3A1A14;
+  /* Draft / marginalia — warm gold */
+  --ochre: #D4A04B;
+  --ochre-wash: #382B14;
+  /* Code surface — invert: warm cream slab */
+  --code-bg: #F7F3EA;
+  --code-ink: #2B2420;
+  --code-muted: #6B5E50;
+  --code-accent: #826226;
+  --code-green: #537035;
+  --code-blue: #1F3A5F;
+  /* Typography — match Sketchbook */
+  --font-display: 'DM Serif Display', 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: 'Noto Serif JP', 'Cormorant Garamond', Georgia, serif;
+  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;
+  /* Radius — match Sketchbook */
+  --r-sm: 2px;
+  --r-md: 3px;
+  --r-lg: 6px;
+  /* Shadows — heavier on dark, ink bleeding behind paper */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .45);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
+  --shadow-xl: 0 20px 50px rgba(0, 0, 0, .65);
+  --shadow-2xl: 0 28px 70px rgba(0, 0, 0, .75);
+  /* Blur — paper themes don't use it; declared so swap stays lossless */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow — faint warm rim (charcoal paper, not phosphor) */
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — match Sketchbook (editorial pace) */
+  --duration-fast: 180ms;
+  --duration-normal: 240ms;
+  --duration-slow: 380ms;
+  --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
+  /* ----------------------------------------------------------
+     SEMANTIC ALIASES
+     ---------------------------------------------------------- */
+  /* Backgrounds (page-level) */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--guide);
+  --border-focus: var(--ai);
+  /* Interactive (hover / active wash layers) — warm cream on charcoal */
+  --interactive-hover: rgba(244, 239, 226, 0.06);
+  --interactive-active: rgba(244, 239, 226, 0.12);
+  /* Brand */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action triplets */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info */
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: var(--ai-ink);
+  /* Status — success (lifted moss-green for dark paper) */
+  --success-default: #8DA86A;
+  --success-subtle: #1F2B14;
+  --success-text: #B8CC8E;
+  /* Status — warning */
+  --warning-default: var(--ochre);
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: #E8BF6E;
+  /* Status — error */
+  --error-default: var(--shu);
+  --error-subtle: var(--shu-wash);
+  --error-text: #F08A72;
+  /* ----------------------------------------------------------
+     LIBRARY SCALES
+     ---------------------------------------------------------- */
+  /* Space scale */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  /* Typography */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index layers */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+:root[data-theme=sketchbook-light] {
+  color-scheme: light;
+  /* Surfaces — warm paper */
+  --paper: #F7F3EA;
+  --paper-raised: #FDFAF2;
+  --paper-sunk: #ECE5D3;
+  --paper-glass: rgba(253, 250, 242, 0.75);
+  /* Ink — warm pencil + sumi */
+  --ink: #2A241E;
+  --ink-soft: #4A4037;
+  --ink-faint: #726858;
+  --graphite: #3A332B;
+  --muted: #948977;
+  /* Construction lines */
+  --guide: #C9BDA5;
+  --guide-soft: #DDD4C0;
+  --hair: #D4CCBB;
+  --hair-soft: #E8E2D4;
+  /* Primary accent — indigo */
+  --ai: #1F3A5F;
+  --ai-ink: #14263F;
+  --ai-wash: #E5EBF1;
+  /* Seal — vermilion (reserve for emphasis) */
+  --shu: #C1272D;
+  --shu-wash: #F6E3E1;
+  /* Draft / marginalia — warm gold */
+  --ochre: #A37B30;
+  --ochre-wash: #F0E5CC;
+  /* Code surface */
+  --code-bg: #2B2420;
+  --code-ink: #F7F3EA;
+  --code-muted: #A39787;
+  --code-accent: #E5B660;
+  --code-green: #A8B86C;
+  --code-blue: #94AFC9;
+  /* Typography */
+  --font-display: 'DM Serif Display', 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
+  --font-script: 'Caveat', 'Shadows Into Light', cursive;
+  --font-serif: 'Noto Serif JP', 'Cormorant Garamond', Georgia, serif;
+  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;
+  /* Radius */
+  --r-sm: 2px;
+  --r-md: 3px;
+  --r-lg: 6px;
+  /* Shadows — ink bleeding through paper */
+  --shadow-sm: 0 1px 2px rgba(42, 36, 30, .06);
+  --shadow-md: 0 4px 18px rgba(42, 36, 30, .08);
+  --shadow-lg: 0 12px 40px rgba(42, 36, 30, .12);
+  --shadow-xl: 0 20px 50px rgba(42, 36, 30, .16);
+  --shadow-2xl: 0 28px 70px rgba(42, 36, 30, .22);
+  /* Blur — paper themes don't use it; declared so swap stays lossless */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow — faint ink bleed, not phosphor */
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion */
+  --duration-fast: 180ms;
+  --duration-normal: 240ms;
+  --duration-slow: 380ms;
+  --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
+  /* ----------------------------------------------------------
+  SEMANTIC ALIASES
+  -----------------------------------------------------------
+  Bridge the library's expected names to this theme's native
+  palette. Components can now write m.color(surface-default)
+  or var(--surface-default) and reskin with the theme
+  automatically.
+  ---------------------------------------------------------- */
+  /* Backgrounds (page-level) */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  /* Interactive (hover / active wash layers) */
+  --interactive-hover: rgba(42, 36, 30, 0.06);
+  --interactive-active: rgba(42, 36, 30, 0.12);
+  /* Brand (identity — action-primary usually references these) */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action (primary / secondary / tertiary) */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback / status (high-level semantic) */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info (three-part: default / subtle / text) */
+  --info-default: var(--ai);
+  --info-subtle: var(--ai-wash);
+  --info-text: var(--ai-ink);
+  /* Status — success */
+  --success-default: #5A7A3A;
+  --success-subtle: #EAEFDC;
+  --success-text: #3F5627;
+  /* Status — warning */
+  --warning-default: var(--ochre);
+  --warning-subtle: var(--ochre-wash);
+  --warning-text: #6B4E1E;
+  /* Status — error */
+  --error-default: var(--shu);
+  --error-subtle: var(--shu-wash);
+  --error-text: #7A1A1F;
+  /* ----------------------------------------------------------
+  LIBRARY SCALES (space / radius / type / motion / z)
+  -----------------------------------------------------------
+  The library mixins emit var(--space-<key>), var(--radius-<key>),
+  var(--font-primary), var(--font-size-<key>), var(--z-<key>), …
+  Themes declare the slots so those mixins always resolve.
+  Override any of these to change the whole system's rhythm.
+  ---------------------------------------------------------- */
+  /* Space scale (rem for accessibility) */
+  --space-2xs: 0.25rem;
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  /* Radius alias — mirrors --r-* with standard names so
+  `m.radius(size)` in the library finds --radius-<size>. */
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  /* Typography — base body font + key scale slots */
+  --font-primary: var(--font-sans);
+  --font-size-base: 1rem;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index layers */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions. */
+  --space-0: 0;
+  --space-1: 0.5rem;
+  --space-2: 0.75rem;
+  --space-3: 0.875rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+  --space-9: 6rem;
+}
+:root[data-theme=terminal] {
+  color-scheme: dark;
+  /* Surfaces — deep warm black + phosphor haze */
+  --paper: #0A0E0A;
+  --paper-raised: #0F140F;
+  --paper-sunk: #070A07;
+  --paper-glass: rgba(79, 224, 120, 0.06);
+  /* Ink — phosphor green on the tube */
+  --ink: #4FE078;
+  --ink-soft: #2A8B42;
+  --ink-faint: #3DAF4F;
+  --graphite: #1A3D22;
+  --muted: #2A8B42;
+  /* Scanlines / rule lines */
+  --guide: #1E5E2F;
+  --guide-soft: #143618;
+  --hair: #2A8B42;
+  --hair-soft: #1E5E2F;
+  /* Primary accent — cyan (terminal links) */
+  --ai: #7FDBFF;
+  --ai-ink: #5AB3D4;
+  --ai-wash: rgba(127, 219, 255, 0.10);
+  /* Seal — error red */
+  --shu: #FF5A5A;
+  --shu-wash: rgba(255, 90, 90, 0.10);
+  /* Accent — warning amber */
+  --ochre: #F0A030;
+  --ochre-wash: rgba(240, 160, 48, 0.10);
+  /* Code surface */
+  --code-bg: #070A07;
+  --code-ink: #4FE078;
+  --code-muted: #2C9245;
+  --code-accent: #F0A030;
+  --code-green: #8FFCA8;
+  --code-blue: #7FDBFF;
+  /* Typography — mono everywhere */
+  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', ui-monospace, Consolas, Menlo, 'Courier New', monospace;
+  --font-sans: var(--font-mono);
+  --font-serif: var(--font-mono);
+  --font-display: var(--font-mono);
+  --font-script: var(--font-mono);
+  /* Radius — CRT pixel corners */
+  --r-sm: 0;
+  --r-md: 0;
+  --r-lg: 0;
+  /* Shadows — phosphor rings */
+  --shadow-sm: 0 0 0 1px rgba(79, 224, 120, 0.20);
+  --shadow-md: 0 0 0 1px rgba(79, 224, 120, 0.30), 0 0 12px rgba(79, 224, 120, 0.15);
+  --shadow-lg: 0 0 0 1px rgba(79, 224, 120, 0.40), 0 0 24px rgba(79, 224, 120, 0.25);
+  --shadow-xl: 0 0 0 1px rgba(79, 224, 120, 0.50), 0 0 36px rgba(79, 224, 120, 0.30);
+  --shadow-2xl: 0 0 0 1px rgba(79, 224, 120, 0.60), 0 0 56px rgba(79, 224, 120, 0.40);
+  /* Blur — terminal has no frosted glass */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow — phosphor halo */
+  --glow-sm: 0 0 4px rgba(79, 224, 120, 0.25);
+  --glow-md: 0 0 8px rgba(79, 224, 120, 0.35);
+  --glow-lg: 0 0 16px rgba(79, 224, 120, 0.45);
+  /* Motion — instant */
+  --duration-fast: 100ms;
+  --duration-normal: 140ms;
+  --duration-slow: 220ms;
+  --ease: cubic-bezier(0.2, 0.0, 0.2, 1);
+  /* Semantic aliases */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  --interactive-hover: rgba(79, 224, 120, 0.08);
+  --interactive-active: rgba(79, 224, 120, 0.15);
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  --info-default: var(--ai);
+  --info-subtle: rgba(127, 219, 255, 0.12);
+  --info-text: #7FDBFF;
+  --success-default: #8FFCA8;
+  --success-subtle: rgba(143, 252, 168, 0.12);
+  --success-text: #8FFCA8;
+  --warning-default: var(--ochre);
+  --warning-subtle: rgba(240, 160, 48, 0.12);
+  --warning-text: var(--ochre);
+  --error-default: var(--shu);
+  --error-subtle: rgba(255, 90, 90, 0.12);
+  --error-text: #FF7A7A;
+  /* Library scales */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 0;
+  --font-primary: var(--font-mono);
+  --font-size-base: 15px;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* Component overrides */
+  --btn-radius: 0;
+  --card-radius: 0;
+  --input-radius: 0;
+  --card-shadow: var(--glow-sm);
+  --card-border: 1px solid var(--ink-faint);
+}
+:root[data-theme=terminal-dark] {
+  color-scheme: dark;
+  /* Surfaces — deep warm black chassis + phosphor haze */
+  --paper: #0A0E0A;
+  --paper-raised: #0F140F;
+  --paper-sunk: #070A07;
+  --paper-glass: rgba(79, 224, 120, 0.06);
+  /* Ink — phosphor green on the tube */
+  --ink: #4FE078;
+  --ink-soft: #2A8B42;
+  --ink-faint: #3DAF4F;
+  --graphite: #1A3D22;
+  --muted: #2A8B42;
+  /* Scanlines / rule lines */
+  --guide: #1E5E2F;
+  --guide-soft: #143618;
+  --hair: #2A8B42;
+  --hair-soft: #1E5E2F;
+  /* Primary accent — cyan (interactive links in a terminal) */
+  --ai: #7FDBFF;
+  --ai-ink: #5AB3D4;
+  --ai-wash: rgba(127, 219, 255, 0.10);
+  /* Seal — error red */
+  --shu: #FF5A5A;
+  --shu-wash: rgba(255, 90, 90, 0.10);
+  /* Accent — warning amber */
+  --ochre: #F0A030;
+  --ochre-wash: rgba(240, 160, 48, 0.10);
+  /* Code surface */
+  --code-bg: #070A07;
+  --code-ink: #4FE078;
+  --code-muted: #2A8B42;
+  --code-accent: #F0A030;
+  --code-green: #8FFCA8;
+  --code-blue: #7FDBFF;
+  /* Typography — mono everywhere (see FONT NOTE in header) */
+  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', ui-monospace, Consolas, Menlo, 'Courier New', monospace;
+  --font-sans: var(--font-mono);
+  --font-serif: var(--font-mono);
+  --font-display: var(--font-mono);
+  --font-script: var(--font-mono);
+  /* Radius — a CRT has hard pixel corners */
+  --r-sm: 0;
+  --r-md: 0;
+  --r-lg: 0;
+  /* Shadows — a CRT doesn't cast, it emits. Keep subtle. */
+  --shadow-sm: 0 0 0 1px rgba(79, 224, 120, 0.20);
+  --shadow-md: 0 0 0 1px rgba(79, 224, 120, 0.30), 0 0 12px rgba(79, 224, 120, 0.15);
+  --shadow-lg: 0 0 0 1px rgba(79, 224, 120, 0.40), 0 0 24px rgba(79, 224, 120, 0.25);
+  --shadow-xl: 0 0 0 1px rgba(79, 224, 120, 0.50), 0 0 36px rgba(79, 224, 120, 0.30);
+  --shadow-2xl: 0 0 0 1px rgba(79, 224, 120, 0.60), 0 0 56px rgba(79, 224, 120, 0.40);
+  /* Blur — terminal has no frosted glass; declared so swap stays lossless */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  /* Glow — phosphor halo (this is where the theme sings) */
+  --glow-sm: 0 0 4px rgba(79, 224, 120, 0.25);
+  --glow-md: 0 0 8px rgba(79, 224, 120, 0.35);
+  --glow-lg: 0 0 16px rgba(79, 224, 120, 0.45);
+  /* Motion — terminals are instant */
+  --duration-fast: 100ms;
+  --duration-normal: 140ms;
+  --duration-slow: 220ms;
+  --ease: cubic-bezier(0.2, 0.0, 0.2, 1);
+  /* ----------------------------------------------------------
+     SEMANTIC ALIASES
+     -----------------------------------------------------------
+     Bridge the library's expected names to this theme's native
+     palette. Components can now write m.color(surface-default)
+     or var(--surface-default) and reskin with the theme
+     automatically.
+     ---------------------------------------------------------- */
+  /* Backgrounds (page-level) */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  /* Surfaces */
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  /* Text */
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  /* Borders */
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  /* Interactive (hover / active wash layers) — phosphor-green translucent overlays */
+  --interactive-hover: rgba(79, 224, 120, 0.08);
+  --interactive-active: rgba(79, 224, 120, 0.15);
+  /* Brand (identity — action-primary usually references these) */
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  /* Action (primary / secondary / tertiary) */
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  /* Feedback / status (high-level semantic) */
+  --feedback-info: var(--ai);
+  --feedback-success: var(--code-green);
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  /* Status — info (three-part: default / subtle / text) — cyan */
+  --info-default: var(--ai);
+  --info-subtle: rgba(127, 219, 255, 0.12);
+  --info-text: #7FDBFF;
+  /* Status — success — bright phosphor */
+  --success-default: #8FFCA8;
+  --success-subtle: rgba(143, 252, 168, 0.12);
+  --success-text: #8FFCA8;
+  /* Status — warning — amber */
+  --warning-default: var(--ochre);
+  --warning-subtle: rgba(240, 160, 48, 0.12);
+  --warning-text: var(--ochre);
+  /* Status — error — red */
+  --error-default: var(--shu);
+  --error-subtle: rgba(255, 90, 90, 0.12);
+  --error-text: #FF7A7A;
+  /* ----------------------------------------------------------
+     LIBRARY SCALES (space / radius / type / motion / z)
+     -----------------------------------------------------------
+     The library mixins emit var(--space-<key>), var(--radius-<key>),
+     var(--font-primary), var(--font-size-<key>), var(--z-<key>), …
+     Themes declare the slots so those mixins always resolve.
+     ---------------------------------------------------------- */
+  /* Space scale (rem for accessibility — natural scale, same as Sketchbook) */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  /* Radius alias — CRT has hard pixel corners, so every slot is 0 */
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 0;
+  /* Typography — mono body + key scale slots (15px matches CRT body setting) */
+  --font-primary: var(--font-mono);
+  --font-size-base: 15px;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  /* Z-index layers (layering is universal) */
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  /* ----------------------------------------------------------
+     OPTIONAL COMPONENT OVERRIDES (Feature 1.3)
+     -----------------------------------------------------------
+     Terminal-specific component expressions: zero radii on
+     buttons/cards/inputs and a subtle phosphor glow on cards
+     instead of a drop shadow.
+     ---------------------------------------------------------- */
+  --btn-radius: 0;
+  --card-radius: 0;
+  --input-radius: 0;
+  --card-shadow: var(--glow-sm);
+  --card-border: 1px solid var(--ink-faint);
+}
+:root[data-theme=terminal-light] {
+  color-scheme: light;
+  /* Surfaces — clear light gray paper */
+  --paper: #E8E8E8;
+  --paper-raised: #F5F5F5;
+  --paper-sunk: #D8D8D8;
+  --paper-glass: rgba(232, 232, 232, 0.85);
+  /* Ink — near-black mono */
+  --ink: #1A1A1A;
+  --ink-soft: #404040;
+  --ink-faint: #666;
+  --graphite: #0A0A0A;
+  --muted: #7C7C7C;
+  /* Hairlines — medium gray */
+  --guide: #B8B8B8;
+  --guide-soft: #C8C8C8;
+  --hair: #C0C0C0;
+  --hair-soft: #D8D8D8;
+  /* Primary accent — VS Code keyword blue */
+  --ai: #0451A5;
+  --ai-ink: #023268;
+  --ai-wash: rgba(4, 81, 165, 0.10);
+  /* Seal — error red */
+  --shu: #B91C1C;
+  --shu-wash: rgba(185, 28, 28, 0.10);
+  /* Accent — warning amber */
+  --ochre: #B45309;
+  --ochre-wash: rgba(180, 83, 9, 0.10);
+  /* Code surface */
+  --code-bg: #DDD;
+  --code-ink: #1A1A1A;
+  --code-muted: #5B5B5B;
+  --code-accent: #934407;
+  --code-green: #006A28;
+  --code-blue: #0451A5;
+  /* Typography — mono everywhere */
+  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', ui-monospace, Consolas, Menlo, 'Courier New', monospace;
+  --font-sans: var(--font-mono);
+  --font-serif: var(--font-mono);
+  --font-display: var(--font-mono);
+  --font-script: var(--font-mono);
+  /* Radius — terminals are square */
+  --r-sm: 0;
+  --r-md: 0;
+  --r-lg: 0;
+  /* Shadows — hairline rings */
+  --shadow-sm: 0 0 0 1px rgba(26, 26, 26, 0.08);
+  --shadow-md: 0 0 0 1px rgba(26, 26, 26, 0.10), 0 1px 2px rgba(26, 26, 26, 0.06);
+  --shadow-lg: 0 0 0 1px rgba(26, 26, 26, 0.12), 0 2px 4px rgba(26, 26, 26, 0.08);
+  --shadow-xl: 0 0 0 1px rgba(26, 26, 26, 0.14), 0 4px 8px rgba(26, 26, 26, 0.10);
+  --shadow-2xl: 0 0 0 1px rgba(26, 26, 26, 0.16), 0 8px 16px rgba(26, 26, 26, 0.12);
+  /* Blur / glow — daylight, no emission */
+  --blur-sm: none;
+  --blur-md: none;
+  --blur-lg: none;
+  --glow-sm: 0 0 0 transparent;
+  --glow-md: 0 0 0 transparent;
+  --glow-lg: 0 0 0 transparent;
+  /* Motion — instant */
+  --duration-fast: 100ms;
+  --duration-normal: 140ms;
+  --duration-slow: 220ms;
+  --ease: cubic-bezier(0.2, 0.0, 0.2, 1);
+  /* Semantic aliases */
+  --background-default: var(--paper);
+  --background-subtle: var(--paper-sunk);
+  --background-navbar: var(--paper-raised);
+  --surface-default: var(--paper);
+  --surface-raised: var(--paper-raised);
+  --surface-sunk: var(--paper-sunk);
+  --surface-muted: var(--paper-sunk);
+  --surface-subtle: var(--paper-raised);
+  --surface-emphasis: var(--ink);
+  --surface-glass: var(--paper-glass);
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-soft);
+  --text-muted: var(--ink-faint);
+  --text-tertiary: var(--muted);
+  --text-inverse: var(--paper);
+  --text-link: var(--ai);
+  --text-link-hover: var(--ai-ink);
+  --border-default: var(--hair);
+  --border-subtle: var(--hair-soft);
+  --border-emphasis: var(--ink);
+  --border-focus: var(--ai);
+  --interactive-hover: rgba(26, 26, 26, 0.05);
+  --interactive-active: rgba(26, 26, 26, 0.10);
+  --brand-primary: var(--ai);
+  --brand-primary-hover: var(--ai-ink);
+  --action-primary-default: var(--ai);
+  --action-primary-hover: var(--ai-ink);
+  --action-primary-active: var(--ai-ink);
+  --action-primary-wash: var(--ai-wash);
+  --action-secondary-default: var(--shu);
+  --action-secondary-hover: var(--shu);
+  --action-secondary-active: var(--shu);
+  --action-secondary-wash: var(--shu-wash);
+  --action-tertiary-default: var(--ochre);
+  --action-tertiary-hover: var(--ochre);
+  --action-tertiary-active: var(--ochre);
+  --action-tertiary-wash: var(--ochre-wash);
+  --feedback-info: var(--ai);
+  --feedback-success: #083;
+  --feedback-warning: var(--ochre);
+  --feedback-error: var(--shu);
+  --info-default: var(--ai);
+  --info-subtle: rgba(4, 81, 165, 0.10);
+  --info-text: var(--ai-ink);
+  --success-default: #083;
+  --success-subtle: rgba(0, 136, 51, 0.10);
+  --success-text: #062;
+  --warning-default: var(--ochre);
+  --warning-subtle: rgba(180, 83, 9, 0.10);
+  --warning-text: #92400E;
+  --error-default: var(--shu);
+  --error-subtle: rgba(185, 28, 28, 0.10);
+  --error-text: #7F1D1D;
+  /* Library scales */
+  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
+     The numbered scale is the source of truth: every component reads
+     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
+     are emitted by the library as references to these, so they follow
+     automatically. Change a value here and the whole page re-proportions.
+     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
+  --space-0: 0; /* flush            */
+  --space-1: 0.5rem; /* tight inner gap  */
+  --space-2: 0.75rem; /* control padding  */
+  --space-3: 0.875rem; /* (no t-shirt)     */
+  --space-4: 1rem; /* default rhythm   */
+  --space-5: 1.5rem; /* section gap      */
+  --space-6: 2rem; /* block gap        */
+  --space-7: 3rem; /* major gap        */
+  --space-8: 4rem; /* page section     */
+  --space-9: 6rem; /* hero rhythm      */
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 0;
+  --font-primary: var(--font-mono);
+  --font-size-base: 15px;
+  --line-height-normal: 1.5;
+  --font-weight-medium: 500;
+  --z-sticky: 1020;
+  --z-dropdown: 1030;
+  --z-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}