@tekki-forge/runtime-admin 0.2.0 → 0.3.0

package/styles.css

@@ -776,3 +776,1092 @@
   [data-forge-style="brutalist"] .forge-landing-hero { border: 3px solid var(--brut-ink); box-shadow: 8px 8px 0 var(--brut-ink); }
   [data-forge-style="terminal"] .forge-landing-hero { border: 1px solid var(--forge-line-strong); }
 }
+
+/* ── Dashboard charts (forge-chart-*): palette, legend, tables, goals and tabs ─────────────────── */
+/* The chart palette starts with the brand colours, lightened in dark mode so marks keep ≥3:1 contrast with surfaces;
+   the others are mid-tones (darker in light mode, lighter in dark mode) spread around the primary's hue. A style or the generated theme.css may override any of them. */
+@layer base {
+  :root {
+    --forge-chart-1: light-dark(var(--forge-primary), color-mix(in oklab, var(--forge-primary) 62%, white));
+    --forge-chart-2: light-dark(color-mix(in oklab, var(--forge-accent) 82%, black), color-mix(in oklab, var(--forge-accent) 80%, white));
+    --forge-chart-3: light-dark(#0d9488, #2dd4bf);
+    --forge-chart-4: light-dark(#c2410c, #fb923c);
+    --forge-chart-5: light-dark(#be185d, #f472b6);
+    --forge-chart-6: light-dark(#7c3aed, #a78bfa);
+    --forge-chart-7: light-dark(#0369a1, #38bdf8);
+    --forge-chart-8: light-dark(#4d7c0f, #a3e635);
+  }
+  /* Where relative colours work: the other hues are placed at ±90°, ±135° and ±45° from the primary hue: apart from it and from the usual accents (analogous at about ±60°, or complementary). */
+  @supports (color: oklch(from red l c h)) {
+    :root {
+      --forge-chart-3: light-dark(oklch(from var(--forge-primary) 0.56 0.15 calc(h + 90)), oklch(from var(--forge-primary) 0.78 0.13 calc(h + 90)));
+      --forge-chart-4: light-dark(oklch(from var(--forge-primary) 0.56 0.15 calc(h + 270)), oklch(from var(--forge-primary) 0.78 0.13 calc(h + 270)));
+      --forge-chart-5: light-dark(oklch(from var(--forge-primary) 0.56 0.15 calc(h + 135)), oklch(from var(--forge-primary) 0.78 0.13 calc(h + 135)));
+      --forge-chart-6: light-dark(oklch(from var(--forge-primary) 0.56 0.15 calc(h + 225)), oklch(from var(--forge-primary) 0.78 0.13 calc(h + 225)));
+      --forge-chart-7: light-dark(oklch(from var(--forge-primary) 0.56 0.15 calc(h + 45)), oklch(from var(--forge-primary) 0.78 0.13 calc(h + 45)));
+      --forge-chart-8: light-dark(oklch(from var(--forge-primary) 0.56 0.15 calc(h + 315)), oklch(from var(--forge-primary) 0.78 0.13 calc(h + 315)));
+    }
+  }
+}
+@layer components {
+  .forge-chart-legend .forge-chart-swatch { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--forge-ink) 12%, transparent); }
+  .forge-chart-table th, .forge-chart-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--forge-line); }
+  .forge-chart-table thead th { position: sticky; top: 0; background: var(--forge-surface); color: var(--forge-ink-muted); font-size: 0.75rem; font-weight: 500; }
+  .forge-chart-table tbody tr:hover { background: var(--forge-hover); }
+  .forge-chart-toggle[aria-pressed="true"] { color: var(--forge-ink); background: var(--forge-selected); }
+  .forge-goal-track { stroke: var(--forge-line); }
+  .forge-goal-value { stroke: var(--forge-chart-1); transition: stroke-dasharray 0.6s ease-out; }
+  .forge-goal-text { fill: var(--forge-ink); }
+  .forge-goal-ring[data-forge-goal="good"] .forge-goal-value { stroke: light-dark(#059669, #34d399); }
+  .forge-goal { color: var(--forge-ink-muted); font-weight: 500; }
+  .forge-goal[data-forge-goal="good"] { color: color-mix(in oklab, light-dark(#059669, #34d399) 72%, var(--forge-ink)); }
+  .forge-dashboard-tab { color: var(--forge-ink-muted); border-color: transparent; border-radius: var(--forge-radius-control) var(--forge-radius-control) 0 0; }
+  .forge-dashboard-tab:hover { color: var(--forge-ink); background: var(--forge-hover); }
+  .forge-dashboard-tab[data-active] { color: var(--forge-ink); border-color: var(--forge-chart-1); }
+  [data-forge-style="terminal"] .forge-dashboard-tab, [data-forge-style="brutalist"] .forge-dashboard-tab { border-radius: 0; }
+  @media (prefers-reduced-motion: reduce) { .forge-goal-value { transition: none; } }
+}
+/* ── Administration area (/admin) and the app's Admin entry ───────────────────────────────────────
+   Hooks: forge-admin-*. Built only from theme tokens, so every style and preset (light and dark) applies.
+   The admin sidebar keeps each style's own surface and adds a neutral ink tint on top (a pseudo-element,
+   so styles that set the sidebar's background or shadow are not overridden). */
+@layer components {
+  .forge-admin-sidebar { isolation: isolate; }
+  .forge-admin-sidebar::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    background: color-mix(in oklab, var(--forge-ink) 6%, transparent);
+  }
+  .forge-admin-badge {
+    background: var(--forge-ink);
+    color: var(--forge-surface);
+    border-radius: min(var(--forge-radius-control), 6px);
+  }
+  .forge-admin-back { color: var(--forge-ink); box-shadow: inset 0 0 0 1px var(--forge-line-strong); background: color-mix(in oklab, var(--forge-surface) 70%, transparent); }
+  .forge-admin-topbar { backdrop-filter: saturate(1.2) blur(8px); }
+  .forge-admin-scope {
+    color: var(--forge-ink-muted);
+    border-radius: 999px;
+    box-shadow: inset 0 0 0 1px var(--forge-line-strong);
+  }
+  .forge-admin-segmented { background: var(--forge-surface-muted); border-radius: var(--forge-radius-control); box-shadow: inset 0 0 0 1px var(--forge-line); }
+  .forge-admin-savebar {
+    background: color-mix(in oklab, var(--forge-surface) 92%, transparent);
+    border: 1px solid var(--forge-line);
+    border-radius: var(--forge-radius);
+    box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.25);
+    backdrop-filter: blur(8px);
+  }
+  /* The Admin entry in the app navigation: always visible, set apart from the app's own items. */
+  .forge-admin-entry.forge-nav-item { color: var(--forge-ink); box-shadow: inset 0 0 0 1px var(--forge-line-strong); }
+  .forge-admin-entry.forge-nav-item svg { color: var(--forge-primary); }
+  .forge-admin-forbidden h1 { text-wrap: balance; }
+  .forge-page-tab:focus-visible { outline: var(--forge-ring); outline-offset: -2px; }
+  .forge-usage-track { background: var(--forge-line); }
+  .forge-support-message { background: var(--forge-surface-muted); border-radius: var(--forge-radius); box-shadow: inset 0 0 0 1px var(--forge-line); }
+  .forge-support-message-own { background: color-mix(in oklab, var(--forge-primary) 10%, var(--forge-surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--forge-primary) 25%, transparent); }
+  .forge-support-row[aria-current="true"] { background: var(--forge-selected); }
+  [data-forge-style="brutalist"] .forge-admin-badge, [data-forge-style="terminal"] .forge-admin-badge,
+  [data-forge-style="brutalist"] .forge-admin-scope, [data-forge-style="terminal"] .forge-admin-scope { border-radius: 0; }
+/* ════════════════════════════════════════════════════════════════════════════════════════════════
+ * Styles: corporate, soft, luxury, retro, neon, swiss, nature, cyber, minimal, playful.
+ * Each block sets tokens first (so any component built on --forge-* tokens inherits the look, including
+ * hooks added later such as forge-site-*, forge-admin-* and forge-chart-*), then restyles the shared hooks.
+ * Text tokens are plain hex pairs checked for WCAG AA by tests/theme-contrast.test.ts.
+ * ════════════════════════════════════════════════════════════════════════════════════════════════ */
+
+}
+/* ── corporate: sober, dense, enterprise blue-grey, crisp tables ──────────────────────────────── */
+@layer components {
+  [data-forge-style="corporate"] {
+    --forge-canvas: light-dark(#f2f4f7, #0e131a);
+    --forge-surface: light-dark(#ffffff, #151b24);
+    --forge-surface-muted: light-dark(#f6f8fa, #121821);
+    --forge-line: light-dark(#dfe3ea, #263040);
+    --forge-line-strong: light-dark(#c3cad5, #364357);
+    --forge-ink: light-dark(#1a2230, #e5eaf1);
+    --forge-ink-muted: light-dark(#4a5568, #a7b2c3);
+    --forge-ink-subtle: light-dark(#5d697b, #8d99ab);
+    --forge-hover: light-dark(rgb(26 34 48 / 0.045), rgb(255 255 255 / 0.05));
+    --forge-selected: color-mix(in oklab, var(--forge-primary) 10%, transparent);
+    --forge-card-shadow: 0 1px 2px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.4));
+    --forge-card-shadow-hover: 0 1px 2px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.4)), 0 8px 20px -10px light-dark(rgb(16 24 40 / 0.25), rgb(0 0 0 / 0.7));
+    --forge-ring: 2px solid var(--forge-link);
+    --forge-ring-offset: 1px;
+  }
+  [data-forge-style="corporate"] .forge-card { border-radius: min(var(--forge-radius), 6px); }
+  [data-forge-style="corporate"] .forge-sidebar { background: var(--forge-surface); }
+  [data-forge-style="corporate"] .forge-topbar { box-shadow: 0 1px 2px light-dark(rgb(16 24 40 / 0.05), rgb(0 0 0 / 0.3)); }
+  [data-forge-style="corporate"] .forge-heading { font-weight: 600; letter-spacing: -0.01em; }
+  [data-forge-style="corporate"] .forge-btn { font-weight: 500; border-radius: min(var(--forge-radius-control), 5px); }
+  [data-forge-style="corporate"] .forge-btn-primary { box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.15), 0 1px 1px rgb(16 24 40 / 0.1); }
+  [data-forge-style="corporate"] .forge-btn-secondary { box-shadow: 0 1px 1px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.3)); }
+  [data-forge-style="corporate"] .forge-input { border-radius: min(var(--forge-radius-control), 5px); }
+  [data-forge-style="corporate"] .forge-nav-item { border-radius: min(var(--forge-radius-control), 5px); }
+  [data-forge-style="corporate"] .forge-nav-item[aria-current="page"] { color: var(--forge-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--forge-primary); border-radius: 0 min(var(--forge-radius-control), 5px) min(var(--forge-radius-control), 5px) 0; }
+  [data-forge-style="corporate"] .forge-topnav .forge-nav-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--forge-primary); border-radius: 0; }
+  [data-forge-style="corporate"] .forge-table thead tr { background: var(--forge-surface-muted); border-bottom-color: var(--forge-line-strong); letter-spacing: 0.04em; }
+  [data-forge-style="corporate"] .forge-table tbody tr:nth-child(even) { background: light-dark(rgb(26 34 48 / 0.022), rgb(255 255 255 / 0.022)); }
+  [data-forge-style="corporate"] .forge-table tbody tr:hover { background: var(--forge-selected); }
+  [data-forge-style="corporate"] .forge-badge { border-radius: 4px; }
+  [data-forge-style="corporate"] .forge-chip { border-radius: 6px; }
+  [data-forge-style="corporate"] .forge-metric::after { display: none; }
+  [data-forge-style="corporate"] .forge-metric { box-shadow: var(--forge-card-shadow), inset 0 3px 0 var(--forge-primary); }
+  [data-forge-style="corporate"] .forge-dialog { border-radius: min(var(--forge-radius), 8px); }
+  [data-forge-style="corporate"] .forge-toast { border-left: 3px solid var(--forge-info); }
+  [data-forge-style="corporate"] .forge-toast[data-forge-toast="success"] { border-left-color: var(--forge-success); }
+  [data-forge-style="corporate"] .forge-toast[data-forge-toast="error"] { border-left-color: var(--forge-danger); }
+}
+
+/* ── soft: pastel, rounded, airy, gentle shadows ──────────────────────────────────────────────── */
+@layer components {
+  [data-forge-style="soft"] {
+    --forge-canvas: light-dark(color-mix(in oklab, var(--forge-primary) 5%, #faf8fd), color-mix(in oklab, var(--forge-primary) 7%, #15131c));
+    --forge-surface: light-dark(#ffffff, #1f1c28);
+    --forge-surface-muted: light-dark(color-mix(in oklab, var(--forge-primary) 5%, #f7f5fb), color-mix(in oklab, var(--forge-primary) 6%, #1a1722));
+    --forge-line: light-dark(color-mix(in oklab, var(--forge-primary) 9%, #eceaf2), rgb(255 255 255 / 0.07));
+    --forge-line-strong: light-dark(color-mix(in oklab, var(--forge-primary) 15%, #dcd8e6), rgb(255 255 255 / 0.14));
+    --forge-ink: light-dark(#2b2838, #eeebf6);
+    --forge-ink-muted: light-dark(#585370, #bdb7cf);
+    --forge-ink-subtle: light-dark(#696482, #a39db8);
+    --forge-hover: color-mix(in oklab, var(--forge-primary) 7%, transparent);
+    --forge-selected: light-dark(color-mix(in oklab, var(--forge-accent) 24%, transparent), color-mix(in oklab, var(--forge-primary) 26%, transparent));
+    --forge-focus: color-mix(in oklab, var(--forge-primary) 22%, transparent);
+    --forge-card-shadow: 0 1px 2px light-dark(rgb(60 40 120 / 0.04), rgb(0 0 0 / 0.3)), 0 12px 32px -14px light-dark(color-mix(in oklab, var(--forge-primary) 24%, transparent), rgb(0 0 0 / 0.55));
+    --forge-card-shadow-hover: 0 1px 2px light-dark(rgb(60 40 120 / 0.05), rgb(0 0 0 / 0.3)), 0 20px 40px -16px light-dark(color-mix(in oklab, var(--forge-primary) 32%, transparent), rgb(0 0 0 / 0.65));
+    --forge-ring: 2px solid color-mix(in oklab, var(--forge-primary) 70%, transparent);
+    --forge-ring-offset: 3px;
+    --forge-pad-card: 1.5rem;
+    --forge-pad-card-lg: 1.75rem;
+    --forge-main-y: 2.5rem;
+  }
+  :root[data-forge-style="soft"][data-forge-density="compact"] { --forge-pad-card: 1rem; --forge-pad-card-lg: 1.25rem; --forge-main-y: 1.5rem; }
+  [data-forge-style="soft"] .forge-card { border-color: color-mix(in oklab, var(--forge-line) 70%, transparent); border-radius: max(var(--forge-radius), 20px); }
+  [data-forge-style="soft"] .forge-card-flat { border-radius: max(var(--forge-radius), 16px); }
+  [data-forge-style="soft"] :is(.forge-dialog, .forge-popover, .forge-toast) { border-color: transparent; border-radius: max(var(--forge-radius), 20px); box-shadow: var(--forge-card-shadow-hover); }
+  [data-forge-style="soft"] .forge-popover { border-radius: max(var(--forge-radius-control), 14px); }
+  [data-forge-style="soft"] .forge-sidebar { background: color-mix(in oklab, var(--forge-surface) 55%, transparent); border-right-color: transparent; }
+  [data-forge-style="soft"] .forge-topbar { background: color-mix(in oklab, var(--forge-surface) 75%, transparent); border-bottom-color: transparent; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
+  [data-forge-style="soft"] .forge-heading { font-weight: 700; letter-spacing: -0.015em; }
+  [data-forge-style="soft"] .forge-btn { border-radius: max(var(--forge-radius-control), 12px); font-weight: 600; }
+  [data-forge-style="soft"] .forge-btn-primary { box-shadow: 0 8px 18px -10px color-mix(in oklab, var(--forge-primary) 80%, transparent); }
+  [data-forge-style="soft"] .forge-btn-secondary { border-color: transparent; background: var(--forge-surface-muted); }
+  [data-forge-style="soft"] .forge-btn-secondary:hover:not(:disabled) { background: color-mix(in oklab, var(--forge-primary) 10%, var(--forge-surface)); }
+  [data-forge-style="soft"] .forge-input { background: var(--forge-surface-muted); border-color: transparent; border-radius: max(var(--forge-radius-control), 12px); }
+  [data-forge-style="soft"] .forge-input:focus { background: var(--forge-surface); border-color: color-mix(in oklab, var(--forge-primary) 45%, transparent); }
+  [data-forge-style="soft"] .forge-nav-item { border-radius: max(var(--forge-radius-control), 12px); }
+  [data-forge-style="soft"] .forge-nav-item[aria-current="page"] { font-weight: 600; }
+  [data-forge-style="soft"] .forge-table thead tr { border-bottom-color: transparent; background: var(--forge-surface-muted); }
+  [data-forge-style="soft"] .forge-table tbody tr { border-top-color: color-mix(in oklab, var(--forge-line) 70%, transparent); }
+  [data-forge-style="soft"] .forge-badge { border-radius: 999px; box-shadow: none; }
+  [data-forge-style="soft"] .forge-chip { border-radius: 14px; box-shadow: none; background: light-dark(color-mix(in oklab, var(--forge-accent) 26%, #ffffff), color-mix(in oklab, var(--forge-primary) 24%, transparent)); color: var(--forge-link); }
+  [data-forge-style="soft"] .forge-avatar { background: color-mix(in oklab, var(--forge-accent) 30%, var(--forge-surface)); }
+  [data-forge-style="soft"] .forge-switch-thumb { box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); }
+  [data-forge-style="soft"] .forge-alert { border-color: transparent; border-radius: max(var(--forge-radius-control), 12px); }
+}
+
+/* ── luxury: deep tones, gold accents (the primary), serif display, thin rules ────────────────── */
+@layer components {
+  [data-forge-style="luxury"] {
+    --forge-canvas: light-dark(#f7f3ea, #0c0b0a);
+    --forge-surface: light-dark(#fffdf7, #15130f);
+    --forge-surface-muted: light-dark(#f1ebdd, #100f0c);
+    --forge-line: light-dark(color-mix(in oklab, var(--forge-primary) 22%, #e6dfcf), color-mix(in oklab, var(--forge-primary) 20%, #27231d));
+    --forge-line-strong: light-dark(color-mix(in oklab, var(--forge-primary) 42%, #d6cdb8), color-mix(in oklab, var(--forge-primary) 42%, #2f2a23));
+    --forge-ink: light-dark(#1c1914, #f3ede0);
+    --forge-ink-muted: light-dark(#59513f, #bfb5a2);
+    --forge-ink-subtle: light-dark(#6e6553, #a09682);
+    --forge-hover: light-dark(rgb(28 25 20 / 0.04), rgb(255 248 230 / 0.045));
+    --forge-selected: color-mix(in oklab, var(--forge-primary) 13%, transparent);
+    --forge-card-shadow: none;
+    --forge-card-shadow-hover: 0 0 0 1px var(--forge-line-strong), 0 18px 40px -24px light-dark(rgb(60 45 10 / 0.4), rgb(0 0 0 / 0.9));
+    --forge-ring: 1px solid var(--forge-link);
+    --forge-ring-offset: 3px;
+    --forge-pad-card: 1.5rem;
+    --forge-pad-card-lg: 2rem;
+    --forge-main-y: 2.75rem;
+  }
+  :root[data-forge-style="luxury"][data-forge-density="compact"] { --forge-pad-card: 1rem; --forge-pad-card-lg: 1.25rem; --forge-main-y: 1.5rem; }
+  [data-forge-style="luxury"] .forge-card { border-radius: min(var(--forge-radius), 4px); }
+  [data-forge-style="luxury"] :is(.forge-dialog, .forge-popover, .forge-toast) { border-color: var(--forge-line-strong); border-radius: min(var(--forge-radius), 4px); }
+  [data-forge-style="luxury"] .forge-sidebar { background: var(--forge-canvas); }
+  [data-forge-style="luxury"] .forge-topbar { background: var(--forge-canvas); border-bottom-color: var(--forge-line-strong); box-shadow: 0 3px 0 -2px var(--forge-line); }
+  [data-forge-style="luxury"] .forge-heading { font-weight: 600; letter-spacing: 0.005em; }
+  [data-forge-style="luxury"] .forge-logo { background: transparent; color: var(--forge-link); box-shadow: inset 0 0 0 1px var(--forge-line-strong); border-radius: 999px; }
+  [data-forge-style="luxury"] .forge-btn { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.6875rem; font-weight: 600; border-radius: min(var(--forge-radius-control), 3px); }
+  [data-forge-style="luxury"] .forge-btn-primary { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--forge-primary) 70%, white), 0 10px 24px -14px var(--forge-primary); }
+  [data-forge-style="luxury"] .forge-btn-secondary { background: transparent; border-color: var(--forge-line-strong); }
+  [data-forge-style="luxury"] .forge-btn-secondary:hover:not(:disabled) { border-color: var(--forge-link); background: var(--forge-hover); }
+  [data-forge-style="luxury"] .forge-input { background: transparent; border-color: var(--forge-line-strong); border-radius: min(var(--forge-radius-control), 3px); }
+  [data-forge-style="luxury"] .forge-input:focus { border-color: var(--forge-link); box-shadow: 0 0 0 1px var(--forge-link); }
+  [data-forge-style="luxury"] .forge-nav-item { letter-spacing: 0.02em; border-radius: 0; }
+  [data-forge-style="luxury"] .forge-nav-item[aria-current="page"] { background: transparent; color: var(--forge-link); box-shadow: inset 1px 0 0 var(--forge-link); }
+  [data-forge-style="luxury"] .forge-topnav .forge-nav-item[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--forge-link); }
+  [data-forge-style="luxury"] .forge-nav-item[aria-current="page"] svg { color: var(--forge-link); }
+  [data-forge-style="luxury"] .forge-table thead tr { letter-spacing: 0.14em; border-bottom-color: var(--forge-line-strong); }
+  [data-forge-style="luxury"] .forge-table tbody tr:hover { background: var(--forge-selected); }
+  [data-forge-style="luxury"] .forge-badge { background: transparent; border-radius: 2px; letter-spacing: 0.04em; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 55%, transparent); }
+  [data-forge-style="luxury"] .forge-chip { background: transparent; color: var(--forge-link); box-shadow: inset 0 0 0 1px var(--forge-line-strong); border-radius: 999px; }
+  [data-forge-style="luxury"] .forge-metric::after { display: none; }
+  [data-forge-style="luxury"] .forge-metric-value { font-weight: 500; letter-spacing: 0; }
+  [data-forge-style="luxury"] .forge-avatar { background: transparent; box-shadow: inset 0 0 0 1px var(--forge-line-strong); color: var(--forge-link); }
+  [data-forge-style="luxury"] .forge-switch[aria-checked="true"] { background: var(--forge-primary); }
+  [data-forge-style="luxury"] .forge-alert { background: transparent; border-radius: 2px; }
+}
+
+/* ── retro: 90s desktop windows — bevels, title bars, pixel headings, readable body ───────────── */
+@layer components {
+  [data-forge-style="retro"] {
+    --retro-face: light-dark(#d4d0c8, #2c3034);
+    --retro-field: light-dark(#ffffff, #16191c);
+    --retro-hi: light-dark(#ffffff, #5d656c);
+    --retro-mid: light-dark(#e9e6e0, #41484e);
+    --retro-lo: light-dark(#808080, #15181a);
+    --retro-dk: light-dark(#0a0a0a, #000000);
+    --retro-raised: inset -1px -1px 0 var(--retro-dk), inset 1px 1px 0 var(--retro-hi), inset -2px -2px 0 var(--retro-lo), inset 2px 2px 0 var(--retro-mid);
+    --retro-sunken: inset 1px 1px 0 var(--retro-lo), inset -1px -1px 0 var(--retro-hi), inset 2px 2px 0 var(--retro-dk), inset -2px -2px 0 var(--retro-mid);
+    --retro-title: linear-gradient(90deg, var(--forge-primary), color-mix(in oklab, var(--forge-primary) 45%, var(--forge-accent)));
+    --forge-canvas: light-dark(#c3c7cb, #1d2023);
+    --forge-surface: var(--retro-face);
+    --forge-surface-muted: light-dark(#cbc7bf, #272a2e);
+    --forge-line: light-dark(#8a8a8a, #4a5157);
+    --forge-line-strong: light-dark(#404040, #7d858c);
+    --forge-ink: light-dark(#000000, #f0f0f0);
+    --forge-ink-muted: light-dark(#2e2e2e, #c8cdd2);
+    --forge-ink-subtle: light-dark(#3e3e3e, #acb3b9);
+    --forge-hover: color-mix(in oklab, var(--forge-primary) 12%, transparent);
+    --forge-selected: var(--forge-primary);
+    --forge-card-shadow: var(--retro-raised);
+    --forge-card-shadow-hover: var(--retro-raised), 3px 3px 0 rgb(0 0 0 / 0.25);
+    --forge-ring: 1px dotted var(--forge-ink);
+    --forge-ring-offset: -4px;
+    --forge-radius: 0px;
+    --forge-radius-control: 0px;
+  }
+  [data-forge-style="retro"] .forge-card,
+  [data-forge-style="retro"] .forge-dialog,
+  [data-forge-style="retro"] .forge-popover,
+  [data-forge-style="retro"] .forge-toast {
+    background: var(--retro-title) top / 100% 6px no-repeat, var(--retro-face);
+    border: 0;
+    border-radius: 0;
+    padding-top: 4px;
+    box-shadow: var(--retro-raised);
+  }
+  [data-forge-style="retro"] .forge-dialog { background-size: 100% 1.25rem, auto; padding-top: 1.25rem; box-shadow: var(--retro-raised), 4px 4px 0 rgb(0 0 0 / 0.35); }
+  [data-forge-style="retro"] .forge-popover { background: var(--retro-face); padding-top: 0; box-shadow: var(--retro-raised), 2px 2px 0 rgb(0 0 0 / 0.3); }
+  [data-forge-style="retro"] .forge-card-flat { background: var(--retro-field); box-shadow: var(--retro-sunken); border-radius: 0; }
+  [data-forge-style="retro"] .forge-sidebar { background: var(--retro-face); border-right: 0; box-shadow: var(--retro-raised); }
+  [data-forge-style="retro"] .forge-topbar { background: var(--retro-face); border-bottom: 0; box-shadow: var(--retro-raised); }
+  [data-forge-style="retro"] .forge-heading { letter-spacing: 0; font-weight: 400; }
+  [data-forge-style="retro"] .forge-logo { background: var(--retro-title); color: #ffffff; box-shadow: var(--retro-raised); border-radius: 0; }
+  [data-forge-style="retro"] .forge-btn { border: 0; border-radius: 0; box-shadow: var(--retro-raised); transition: none; }
+  [data-forge-style="retro"] .forge-btn:active:not(:disabled) { box-shadow: var(--retro-sunken); transform: translate(1px, 1px); }
+  [data-forge-style="retro"] .forge-btn-secondary { background: var(--retro-face); color: var(--forge-ink); }
+  [data-forge-style="retro"] .forge-btn-secondary:hover:not(:disabled) { background: var(--retro-face); }
+  [data-forge-style="retro"] .forge-btn-primary { --retro-hi: rgb(255 255 255 / 0.55); --retro-mid: rgb(255 255 255 / 0.25); }
+  [data-forge-style="retro"] .forge-btn-primary:hover:not(:disabled) { background: var(--forge-primary); }
+  [data-forge-style="retro"] .forge-btn-ghost { box-shadow: none; }
+  [data-forge-style="retro"] .forge-btn-ghost:hover:not(:disabled) { background: transparent; box-shadow: var(--retro-raised); }
+  [data-forge-style="retro"] .forge-btn-ghost[aria-current="page"] { box-shadow: var(--retro-sunken); background: var(--retro-face); border-color: transparent; }
+  [data-forge-style="retro"] .forge-btn:disabled { opacity: 1; color: var(--retro-lo); text-shadow: 1px 1px 0 var(--retro-hi); }
+  [data-forge-style="retro"] .forge-input { background: var(--retro-field); border: 0; border-radius: 0; box-shadow: var(--retro-sunken); }
+  [data-forge-style="retro"] .forge-input:focus { box-shadow: var(--retro-sunken); outline: 1px dotted var(--forge-ink); outline-offset: -4px; }
+  [data-forge-style="retro"] .forge-input:disabled { background: var(--retro-face); opacity: 1; color: var(--forge-ink-subtle); }
+  [data-forge-style="retro"] .forge-switch { border-radius: 0; box-shadow: var(--retro-sunken); background: var(--retro-field); }
+  [data-forge-style="retro"] .forge-switch[aria-checked="true"] { background: var(--forge-primary); }
+  [data-forge-style="retro"] .forge-switch-thumb { border-radius: 0; background: var(--retro-face); box-shadow: var(--retro-raised); }
+  [data-forge-style="retro"] .forge-nav-item { border-radius: 0; color: var(--forge-ink); }
+  [data-forge-style="retro"] .forge-nav-item:hover { background: var(--forge-hover); }
+  [data-forge-style="retro"] .forge-nav-item[aria-current="page"],
+  [data-forge-style="retro"] .forge-palette-item[aria-selected="true"] { background: var(--forge-primary); color: var(--forge-primary-fg); font-weight: 600; }
+  [data-forge-style="retro"] .forge-nav-item[aria-current="page"] svg { color: currentColor; }
+  [data-forge-style="retro"] .forge-table thead tr { background: var(--retro-face); border-bottom: 0; color: var(--forge-ink); }
+  [data-forge-style="retro"] .forge-table th { box-shadow: var(--retro-raised); }
+  [data-forge-style="retro"] .forge-table tbody { background: var(--retro-field); }
+  [data-forge-style="retro"] .forge-table tbody tr { border-top-color: light-dark(#e3e1dc, #262a2e); }
+  [data-forge-style="retro"] .forge-table tbody tr:hover { background: color-mix(in oklab, var(--forge-primary) 14%, var(--retro-field)); }
+  [data-forge-style="retro"] .forge-badge { border-radius: 0; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 60%, var(--forge-ink)); }
+  [data-forge-style="retro"] .forge-chip { border-radius: 0; background: var(--retro-face); box-shadow: var(--retro-raised); color: var(--forge-link); }
+  [data-forge-style="retro"] .forge-avatar { border-radius: 0; box-shadow: var(--retro-sunken); background: var(--retro-field); }
+  [data-forge-style="retro"] .forge-metric::after { display: none; }
+  [data-forge-style="retro"] .forge-alert { border-radius: 0; border: 0; box-shadow: var(--retro-sunken); }
+  [data-forge-style="retro"] .forge-skeleton { border-radius: 0; }
+  [data-forge-style="retro"] .forge-tooltip { background: light-dark(#ffffe1, #3a3a2a); color: var(--forge-ink); border-radius: 0; box-shadow: 0 0 0 1px var(--forge-ink); }
+  :root[data-forge-style="retro"][data-forge-mode="light"] .forge-sidebar .forge-nav-item[aria-current="page"] svg { color: currentColor; }
+}
+
+/* ── neon: dark, glowing accents, crisp borders (glow off for reduced motion and forced colours) ─ */
+@layer components {
+  [data-forge-style="neon"] {
+    --neon-glow: 0 0 0 1px color-mix(in oklab, var(--forge-primary) 70%, transparent), 0 0 18px -2px color-mix(in oklab, var(--forge-primary) 60%, transparent);
+    --neon-glow-soft: 0 0 22px -10px light-dark(transparent, color-mix(in oklab, var(--forge-primary) 55%, transparent));
+    --neon-text-glow: 0 0 14px light-dark(transparent, color-mix(in oklab, var(--forge-primary) 55%, transparent));
+    --forge-canvas: light-dark(#f5f5fa, #07070c);
+    --forge-surface: light-dark(#ffffff, #0e0e16);
+    --forge-surface-muted: light-dark(#f0f0f6, #0b0b12);
+    --forge-line: light-dark(#dcdce8, color-mix(in oklab, var(--forge-primary) 24%, #1c1c28));
+    --forge-line-strong: light-dark(#c4c4d4, color-mix(in oklab, var(--forge-primary) 45%, #26263a));
+    --forge-ink: light-dark(#14141f, #f1f1fa);
+    --forge-ink-muted: light-dark(#4b4b60, #b4b4cc);
+    --forge-ink-subtle: light-dark(#5e5e75, #9292ad);
+    --forge-hover: color-mix(in oklab, var(--forge-primary) 9%, transparent);
+    --forge-selected: color-mix(in oklab, var(--forge-primary) 16%, transparent);
+    --forge-card-shadow: var(--neon-glow-soft);
+    --forge-card-shadow-hover: 0 0 0 1px var(--forge-primary), 0 0 28px -6px color-mix(in oklab, var(--forge-primary) 60%, transparent);
+    --forge-ring: 2px solid var(--forge-link);
+  }
+  [data-forge-style="neon"] .forge-sidebar { background: var(--forge-canvas); border-right-color: var(--forge-line); }
+  [data-forge-style="neon"] .forge-topbar { background: color-mix(in oklab, var(--forge-canvas) 85%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
+  [data-forge-style="neon"] h1.forge-heading { text-shadow: var(--neon-text-glow); }
+  [data-forge-style="neon"] .forge-logo { box-shadow: var(--neon-glow); }
+  [data-forge-style="neon"] .forge-btn { font-weight: 600; }
+  [data-forge-style="neon"] .forge-btn-primary { box-shadow: var(--neon-glow); }
+  [data-forge-style="neon"] .forge-btn-primary:hover:not(:disabled) { background: color-mix(in oklab, var(--forge-primary) 88%, white); }
+  [data-forge-style="neon"] .forge-btn-secondary { background: transparent; border-color: var(--forge-line-strong); }
+  [data-forge-style="neon"] .forge-btn-secondary:hover:not(:disabled) { background: var(--forge-hover); border-color: var(--forge-primary); }
+  [data-forge-style="neon"] .forge-input { background: var(--forge-surface-muted); }
+  [data-forge-style="neon"] .forge-input:focus { box-shadow: var(--neon-glow); }
+  [data-forge-style="neon"] .forge-nav-item[aria-current="page"] { color: var(--forge-ink); box-shadow: inset 2px 0 0 var(--forge-primary); }
+  [data-forge-style="neon"] .forge-topnav .forge-nav-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--forge-primary); }
+  [data-forge-style="neon"] .forge-nav-item[aria-current="page"] svg { color: var(--forge-link); filter: drop-shadow(0 0 4px light-dark(transparent, var(--forge-primary))); }
+  [data-forge-style="neon"] .forge-table thead tr { color: var(--forge-link); letter-spacing: 0.08em; border-bottom-color: var(--forge-line-strong); }
+  [data-forge-style="neon"] .forge-table tbody tr:hover { background: var(--forge-selected); box-shadow: inset 2px 0 0 var(--forge-primary); }
+  [data-forge-style="neon"] .forge-badge { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 70%, transparent), 0 0 10px -4px light-dark(transparent, var(--tone)); }
+  [data-forge-style="neon"] .forge-chip { background: transparent; box-shadow: inset 0 0 0 1px var(--forge-primary), 0 0 12px -4px light-dark(transparent, var(--forge-primary)); }
+  [data-forge-style="neon"] .forge-metric::after { background: radial-gradient(closest-side, color-mix(in oklab, var(--forge-primary) 22%, transparent), transparent); }
+  [data-forge-style="neon"] .forge-metric-value { color: var(--forge-link); text-shadow: var(--neon-text-glow); }
+  [data-forge-style="neon"] .forge-switch[aria-checked="true"] { box-shadow: var(--neon-glow); }
+  [data-forge-style="neon"] :is(.forge-dialog, .forge-popover, .forge-toast) { border-color: var(--forge-line-strong); box-shadow: 0 0 0 1px color-mix(in oklab, var(--forge-primary) 30%, transparent), 0 24px 60px -20px rgb(0 0 0 / 0.6); }
+}
+
+/* ── swiss: strict grid, big type, red accent (the primary), no shadows ───────────────────────── */
+@layer components {
+  [data-forge-style="swiss"] {
+    --forge-canvas: light-dark(#ffffff, #0a0a0a);
+    --forge-surface: light-dark(#ffffff, #0a0a0a);
+    --forge-surface-muted: light-dark(#f3f3f3, #151515);
+    --forge-line: light-dark(#e0e0e0, #2b2b2b);
+    --forge-line-strong: light-dark(#111111, #f0f0f0);
+    --forge-ink: light-dark(#0a0a0a, #f5f5f5);
+    --forge-ink-muted: light-dark(#4a4a4a, #b5b5b5);
+    --forge-ink-subtle: light-dark(#5e5e5e, #9b9b9b);
+    --forge-hover: light-dark(#f3f3f3, #171717);
+    --forge-selected: transparent;
+    --forge-card-shadow: none;
+    --forge-card-shadow-hover: none;
+    --forge-ring: 2px solid var(--forge-ink);
+    --forge-ring-offset: 2px;
+    --forge-main-y: 3rem;
+    --forge-radius: 0px;
+    --forge-radius-control: 0px;
+  }
+  :root[data-forge-style="swiss"][data-forge-density="compact"] { --forge-main-y: 1.75rem; }
+  [data-forge-style="swiss"] .forge-card { border: 0; border-top: 3px solid var(--forge-ink); border-radius: 0; }
+  [data-forge-style="swiss"] .forge-card-interactive:hover { transform: none; border-top-color: var(--forge-primary); }
+  [data-forge-style="swiss"] :is(.forge-dialog, .forge-popover, .forge-toast) { border: 2px solid var(--forge-ink); border-radius: 0; box-shadow: none; }
+  [data-forge-style="swiss"] .forge-card-flat { border-radius: 0; }
+  [data-forge-style="swiss"] .forge-sidebar { background: var(--forge-surface); border-right: 1px solid var(--forge-ink); }
+  [data-forge-style="swiss"] .forge-topbar { border-bottom: 2px solid var(--forge-ink); }
+  [data-forge-style="swiss"] .forge-heading { font-weight: 700; letter-spacing: -0.03em; }
+  [data-forge-style="swiss"] h1.forge-heading::before { content: ""; display: block; width: 2.5rem; height: 0.375rem; margin-bottom: 0.75rem; background: var(--forge-primary); }
+  [data-forge-style="swiss"] .forge-logo { border-radius: 0; }
+  [data-forge-style="swiss"] .forge-btn { border-radius: 0; font-weight: 600; }
+  [data-forge-style="swiss"] .forge-btn-secondary { background: transparent; border-color: var(--forge-ink); }
+  [data-forge-style="swiss"] .forge-btn-secondary:hover:not(:disabled) { background: var(--forge-ink); color: var(--forge-surface); }
+  [data-forge-style="swiss"] .forge-input { border-radius: 0; border-color: var(--forge-line); border-bottom: 2px solid var(--forge-ink); }
+  [data-forge-style="swiss"] .forge-input:focus { box-shadow: none; border-bottom-color: var(--forge-primary); }
+  [data-forge-style="swiss"] .forge-nav-item { border-radius: 0; font-weight: 500; }
+  [data-forge-style="swiss"] .forge-nav-item[aria-current="page"] { background: transparent; color: var(--forge-ink); font-weight: 700; box-shadow: inset 4px 0 0 var(--forge-primary); }
+  [data-forge-style="swiss"] .forge-topnav .forge-nav-item[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--forge-primary); }
+  [data-forge-style="swiss"] .forge-nav-item[aria-current="page"] svg { color: var(--forge-primary); }
+  [data-forge-style="swiss"] .forge-table thead tr { color: var(--forge-ink); border-bottom: 2px solid var(--forge-ink); }
+  [data-forge-style="swiss"] .forge-table tbody tr:hover { background: var(--forge-hover); }
+  [data-forge-style="swiss"] .forge-badge { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
+  [data-forge-style="swiss"] .forge-chip { border-radius: 0; background: var(--forge-primary); color: var(--forge-primary-fg); box-shadow: none; }
+  [data-forge-style="swiss"] .forge-avatar { border-radius: 0; background: var(--forge-surface-muted); }
+  [data-forge-style="swiss"] .forge-metric::after { display: none; }
+  [data-forge-style="swiss"] .forge-metric-value { font-weight: 700; letter-spacing: -0.045em; }
+  [data-forge-style="swiss"] .forge-switch, [data-forge-style="swiss"] .forge-switch-thumb { border-radius: 0; box-shadow: none; }
+  [data-forge-style="swiss"] .forge-alert { border-radius: 0; border-width: 0 0 0 4px; background: var(--forge-surface-muted); color: var(--forge-ink); border-left-color: var(--tone); }
+  [data-forge-style="swiss"] .forge-tooltip { border-radius: 0; }
+}
+
+/* ── nature: earthy tones, organic shapes, paper texture (CSS only) ───────────────────────────── */
+@layer components {
+  [data-forge-style="nature"] {
+    --forge-canvas: light-dark(color-mix(in oklab, var(--forge-primary) 6%, #f3efe4), color-mix(in oklab, var(--forge-primary) 8%, #15140f));
+    --forge-surface: light-dark(#fbf8f0, #1e1d17);
+    --forge-surface-muted: light-dark(color-mix(in oklab, var(--forge-primary) 5%, #f1ece0), #1a1914);
+    --forge-line: light-dark(color-mix(in oklab, var(--forge-primary) 12%, #e3dccb), rgb(240 230 200 / 0.1));
+    --forge-line-strong: light-dark(color-mix(in oklab, var(--forge-primary) 22%, #cfc5ae), rgb(240 230 200 / 0.2));
+    --forge-ink: light-dark(#26241b, #efeadb);
+    --forge-ink-muted: light-dark(#565140, #beb6a1);
+    --forge-ink-subtle: light-dark(#696350, #a49c86);
+    --forge-hover: color-mix(in oklab, var(--forge-primary) 7%, transparent);
+    --forge-selected: color-mix(in oklab, var(--forge-primary) 15%, transparent);
+    --forge-card-shadow: inset 0 1px 0 light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.03)), 0 10px 24px -16px light-dark(rgb(70 55 20 / 0.4), rgb(0 0 0 / 0.75));
+    --forge-card-shadow-hover: inset 0 1px 0 light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.03)), 0 18px 34px -18px light-dark(rgb(70 55 20 / 0.5), rgb(0 0 0 / 0.85));
+    --nature-shape: var(--forge-radius) calc(var(--forge-radius) * 1.7) var(--forge-radius) calc(var(--forge-radius) * 1.3);
+    --nature-leaf: calc(var(--forge-radius-control) * 1.6) calc(var(--forge-radius-control) * 0.5);
+  }
+  [data-forge-style="nature"] .forge-card { border-radius: var(--nature-shape); }
+  [data-forge-style="nature"] :is(.forge-dialog, .forge-toast) { border-radius: var(--nature-shape); }
+  [data-forge-style="nature"] .forge-sidebar { background: color-mix(in oklab, var(--forge-surface-muted) 80%, transparent); }
+  [data-forge-style="nature"] .forge-topbar { background: color-mix(in oklab, var(--forge-surface) 85%, transparent); }
+  [data-forge-style="nature"] .forge-heading { font-weight: 600; letter-spacing: -0.01em; }
+  [data-forge-style="nature"] .forge-logo { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
+  [data-forge-style="nature"] .forge-btn { border-radius: var(--nature-leaf); font-weight: 500; }
+  [data-forge-style="nature"] .forge-btn-primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 6px 14px -8px color-mix(in oklab, var(--forge-primary) 80%, transparent); }
+  [data-forge-style="nature"] .forge-btn-secondary { background: var(--forge-surface-muted); border-color: var(--forge-line-strong); }
+  [data-forge-style="nature"] .forge-input { background: color-mix(in oklab, var(--forge-surface) 70%, transparent); border-radius: calc(var(--forge-radius-control) * 1.2); }
+  [data-forge-style="nature"] .forge-nav-item { border-radius: var(--nature-leaf); }
+  [data-forge-style="nature"] .forge-nav-item[aria-current="page"] { color: var(--forge-ink); font-weight: 600; }
+  [data-forge-style="nature"] .forge-table thead tr { border-bottom: 1px dashed var(--forge-line-strong); }
+  [data-forge-style="nature"] .forge-table tbody tr { border-top-style: dashed; }
+  [data-forge-style="nature"] .forge-table tbody tr:hover { background: var(--forge-hover); }
+  [data-forge-style="nature"] .forge-badge { border-radius: 999px; }
+  [data-forge-style="nature"] .forge-chip { border-radius: 50% 50% 50% 12% / 50% 50% 50% 12%; }
+  [data-forge-style="nature"] .forge-avatar { border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%; }
+  [data-forge-style="nature"] .forge-metric::after { background: radial-gradient(closest-side, color-mix(in oklab, var(--forge-primary) 14%, transparent), transparent); border-radius: 60% 40% 55% 45%; }
+  [data-forge-style="nature"] .forge-alert { border-radius: calc(var(--forge-radius-control) * 1.4) calc(var(--forge-radius-control) * 0.6); }
+}
+
+/* ── cyber: angled corners (clip-path), HUD accents, dark-first ───────────────────────────────── */
+@layer components {
+  [data-forge-style="cyber"] {
+    --cy-cut: 12px;
+    --cy-cut-sm: 7px;
+    --cy-shape: polygon(0 0, calc(100% - var(--cy-cut)) 0, 100% var(--cy-cut), 100% 100%, var(--cy-cut) 100%, 0 calc(100% - var(--cy-cut)));
+    --cy-shape-sm: polygon(0 0, calc(100% - var(--cy-cut-sm)) 0, 100% var(--cy-cut-sm), 100% 100%, var(--cy-cut-sm) 100%, 0 calc(100% - var(--cy-cut-sm)));
+    /* Diagonal border segments for the cut corners (clip-path removes the box border there). */
+    --cy-edges:
+      linear-gradient(to bottom left, transparent calc(50% - 1px), var(--forge-line-strong) calc(50% - 1px) calc(50% + 0.5px), transparent calc(50% + 0.5px)) top right / var(--cy-cut) var(--cy-cut) no-repeat,
+      linear-gradient(to top right, transparent calc(50% - 1px), var(--forge-line-strong) calc(50% - 1px) calc(50% + 0.5px), transparent calc(50% + 0.5px)) bottom left / var(--cy-cut) var(--cy-cut) no-repeat;
+    --forge-canvas: light-dark(#eef2f5, #05080b);
+    --forge-surface: light-dark(#ffffff, #0a1016);
+    --forge-surface-muted: light-dark(#e6ecf1, #070c11);
+    --forge-line: light-dark(#c9d3dc, color-mix(in oklab, var(--forge-accent) 20%, #121c25));
+    --forge-line-strong: light-dark(#93a3b1, color-mix(in oklab, var(--forge-accent) 45%, #18242f));
+    --forge-ink: light-dark(#0b1620, #e2f1f8);
+    --forge-ink-muted: light-dark(#3a4d5e, #9ab4c4);
+    --forge-ink-subtle: light-dark(#4f6273, #809bac);
+    --forge-hover: color-mix(in oklab, var(--forge-accent) 9%, transparent);
+    --forge-selected: color-mix(in oklab, var(--forge-primary) 14%, transparent);
+    --forge-card-shadow: none;
+    --forge-card-shadow-hover: none;
+    --forge-ring: 2px solid var(--forge-link);
+    --forge-radius: 0px;
+    --forge-radius-control: 0px;
+  }
+  [data-forge-style="cyber"] .forge-card,
+  [data-forge-style="cyber"] .forge-dialog,
+  [data-forge-style="cyber"] .forge-toast {
+    border-radius: 0;
+    border-color: var(--forge-line-strong);
+    background: var(--cy-edges), var(--forge-surface);
+    clip-path: var(--cy-shape);
+  }
+  [data-forge-style="cyber"] .forge-card-interactive:hover { border-color: var(--forge-link); transform: translateY(-1px); }
+  [data-forge-style="cyber"] .forge-sidebar { background: var(--forge-surface-muted); border-right-color: var(--forge-line-strong); }
+  [data-forge-style="cyber"] .forge-topbar { background: var(--forge-surface-muted); border-bottom-color: var(--forge-line-strong); }
+  [data-forge-style="cyber"] .forge-heading { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
+  [data-forge-style="cyber"] h1.forge-heading::before { content: "// " / ""; color: var(--forge-link); }
+  [data-forge-style="cyber"] .forge-logo { clip-path: var(--cy-shape-sm); border-radius: 0; }
+  [data-forge-style="cyber"] .forge-btn { border-radius: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; clip-path: var(--cy-shape-sm); }
+  [data-forge-style="cyber"] .forge-btn-ghost { clip-path: none; }
+  /* clip-path would hide an outline: draw the focus ring inside. */
+  [data-forge-style="cyber"] .forge-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--forge-ink), inset 0 0 0 4px var(--forge-surface); }
+  [data-forge-style="cyber"] .forge-btn-ghost:focus-visible { outline: var(--forge-ring); outline-offset: 2px; box-shadow: none; }
+  [data-forge-style="cyber"] .forge-btn-secondary { background: var(--cy-edges), transparent; border-color: var(--forge-line-strong); --cy-cut: var(--cy-cut-sm); }
+  [data-forge-style="cyber"] .forge-btn-secondary:hover:not(:disabled) { background: var(--cy-edges), var(--forge-hover); }
+  [data-forge-style="cyber"] .forge-input { border-radius: 0; background: var(--forge-surface-muted); border-color: var(--forge-line-strong); caret-color: var(--forge-link); }
+  [data-forge-style="cyber"] .forge-input:focus { border-color: var(--forge-link); box-shadow: inset 3px 0 0 var(--forge-link); }
+  [data-forge-style="cyber"] .forge-nav-item { border-radius: 0; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8125rem; }
+  [data-forge-style="cyber"] .forge-nav-item[aria-current="page"] { color: var(--forge-ink); box-shadow: inset 3px 0 0 var(--forge-primary); background: linear-gradient(90deg, var(--forge-selected), transparent); }
+  [data-forge-style="cyber"] .forge-topnav .forge-nav-item[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--forge-primary); background: var(--forge-selected); }
+  [data-forge-style="cyber"] .forge-nav-item[aria-current="page"] svg { color: var(--forge-link); }
+  [data-forge-style="cyber"] .forge-table thead tr { color: var(--forge-link); letter-spacing: 0.1em; border-bottom-color: var(--forge-line-strong); background: var(--forge-hover); }
+  [data-forge-style="cyber"] .forge-table tbody tr:nth-child(even) { background: color-mix(in oklab, var(--forge-ink) 2.5%, transparent); }
+  [data-forge-style="cyber"] .forge-table tbody tr:hover { background: var(--forge-selected); }
+  [data-forge-style="cyber"] .forge-badge { border-radius: 0; clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); text-transform: uppercase; letter-spacing: 0.05em; }
+  [data-forge-style="cyber"] .forge-chip { border-radius: 0; clip-path: var(--cy-shape-sm); background: color-mix(in oklab, var(--forge-primary) 18%, transparent); }
+  [data-forge-style="cyber"] .forge-avatar { border-radius: 0; clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%); }
+  /* HUD corner brackets on metric cards. */
+  [data-forge-style="cyber"] .forge-metric::after {
+    inset: 6px; width: auto; aspect-ratio: auto; border-radius: 0;
+    background:
+      linear-gradient(var(--forge-link) 0 0) left top / 10px 2px no-repeat, linear-gradient(var(--forge-link) 0 0) left top / 2px 10px no-repeat,
+      linear-gradient(var(--forge-link) 0 0) right bottom / 10px 2px no-repeat, linear-gradient(var(--forge-link) 0 0) right bottom / 2px 10px no-repeat;
+    opacity: 0.8;
+  }
+  [data-forge-style="cyber"] .forge-metric-value { color: var(--forge-link); font-variant-numeric: tabular-nums slashed-zero; }
+  [data-forge-style="cyber"] .forge-switch, [data-forge-style="cyber"] .forge-switch-thumb { border-radius: 0; }
+  [data-forge-style="cyber"] .forge-popover { border-radius: 0; border-color: var(--forge-line-strong); }
+  [data-forge-style="cyber"] .forge-alert { border-radius: 0; border-left-width: 3px; }
+  [data-forge-style="cyber"] .forge-tooltip { border-radius: 0; }
+}
+
+/* ── minimal: almost no chrome, lots of whitespace, hairlines ─────────────────────────────────── */
+@layer components {
+  [data-forge-style="minimal"] {
+    --forge-canvas: light-dark(#ffffff, #0b0b0c);
+    --forge-surface: light-dark(#ffffff, #0b0b0c);
+    --forge-surface-muted: light-dark(#fafafa, #111113);
+    --forge-line: light-dark(#ededf0, #1f1f23);
+    --forge-line-strong: light-dark(#dadade, #2f2f35);
+    --forge-ink: light-dark(#111113, #ededef);
+    --forge-ink-muted: light-dark(#5c5c66, #a0a0aa);
+    --forge-ink-subtle: light-dark(#6c6c76, #8b8b95);
+    --forge-hover: light-dark(#f6f6f7, #141416);
+    --forge-selected: light-dark(#f2f2f4, #19191c);
+    --forge-card-shadow: none;
+    --forge-card-shadow-hover: 0 0 0 1px var(--forge-line-strong);
+    --forge-ring: 1.5px solid var(--forge-ink);
+    --forge-ring-offset: 2px;
+    --forge-pad-card: 1.5rem;
+    --forge-pad-card-lg: 2rem;
+    --forge-main-y: 3rem;
+  }
+  :root[data-forge-style="minimal"][data-forge-density="compact"] { --forge-pad-card: 1rem; --forge-pad-card-lg: 1.25rem; --forge-main-y: 1.75rem; }
+  [data-forge-style="minimal"] .forge-sidebar { background: var(--forge-surface); }
+  [data-forge-style="minimal"] .forge-topbar { background: color-mix(in oklab, var(--forge-surface) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
+  [data-forge-style="minimal"] .forge-heading { font-weight: 500; letter-spacing: -0.02em; }
+  [data-forge-style="minimal"] .forge-logo { background: var(--forge-ink); color: var(--forge-surface); }
+  [data-forge-style="minimal"] .forge-btn { font-weight: 500; }
+  [data-forge-style="minimal"] .forge-btn-secondary { background: transparent; border-color: var(--forge-line-strong); }
+  [data-forge-style="minimal"] .forge-btn-secondary:hover:not(:disabled) { background: var(--forge-hover); }
+  [data-forge-style="minimal"] .forge-input { border-color: var(--forge-line-strong); }
+  [data-forge-style="minimal"] .forge-input:focus { border-color: var(--forge-ink); box-shadow: none; }
+  [data-forge-style="minimal"] .forge-nav-item[aria-current="page"] { background: transparent; color: var(--forge-ink); font-weight: 500; }
+  [data-forge-style="minimal"] .forge-nav-item[aria-current="page"] svg { color: var(--forge-ink); }
+  [data-forge-style="minimal"] .forge-nav-item:hover { background: transparent; color: var(--forge-ink); }
+  [data-forge-style="minimal"] .forge-table thead tr { text-transform: none; letter-spacing: 0; font-weight: 400; }
+  [data-forge-style="minimal"] .forge-table tbody tr:hover { background: var(--forge-surface-muted); }
+  [data-forge-style="minimal"] .forge-badge { background: transparent; box-shadow: inset 0 0 0 1px var(--forge-line-strong); color: var(--forge-ink-muted); }
+  [data-forge-style="minimal"] .forge-badge::before { content: ""; display: inline-block; width: 0.375rem; height: 0.375rem; margin-right: 0.375rem; border-radius: 999px; background: var(--tone); }
+  [data-forge-style="minimal"] .forge-chip { background: transparent; box-shadow: none; color: var(--forge-ink-muted); }
+  [data-forge-style="minimal"] .forge-avatar { background: var(--forge-surface-muted); box-shadow: inset 0 0 0 1px var(--forge-line); }
+  [data-forge-style="minimal"] .forge-metric::after { display: none; }
+  [data-forge-style="minimal"] .forge-metric-value { font-weight: 500; }
+  [data-forge-style="minimal"] :is(.forge-dialog, .forge-popover, .forge-toast) { box-shadow: 0 16px 48px -16px rgb(0 0 0 / 0.18); }
+  [data-forge-style="minimal"] .forge-alert { background: transparent; }
+}
+
+/* ── playful: bold colours, hand-drawn edges (CSS only), bouncy hover ─────────────────────────── */
+@layer components {
+  [data-forge-style="playful"] {
+    --play-ink: light-dark(#1f1a33, #efeaff);
+    --play-sketch: 26px 10px 22px 12px / 12px 22px 10px 26px;
+    --play-sketch-sm: 14px 5px 12px 6px / 6px 12px 5px 14px;
+    --play-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --forge-canvas: light-dark(color-mix(in oklab, var(--forge-accent) 10%, #fffaf0), color-mix(in oklab, var(--forge-primary) 10%, #141120));
+    --forge-surface: light-dark(#ffffff, #1d1930);
+    --forge-surface-muted: light-dark(color-mix(in oklab, var(--forge-primary) 6%, #fdf8ff), #191529);
+    --forge-line: light-dark(#ddd8ea, rgb(255 255 255 / 0.14));
+    --forge-line-strong: var(--play-ink);
+    --forge-ink: light-dark(#1f1a33, #f4f1ff);
+    --forge-ink-muted: light-dark(#4c4566, #c6bfe0);
+    --forge-ink-subtle: light-dark(#5e577a, #aaa3c6);
+    --forge-hover: color-mix(in oklab, var(--forge-accent) 22%, transparent);
+    --forge-selected: var(--forge-accent);
+    --forge-card-shadow: 4px 5px 0 var(--forge-primary);
+    --forge-card-shadow-hover: 6px 8px 0 var(--forge-primary);
+    --forge-ring: 3px solid var(--forge-primary);
+    --forge-ring-offset: 3px;
+  }
+  [data-forge-style="playful"] .forge-card,
+  [data-forge-style="playful"] .forge-dialog,
+  [data-forge-style="playful"] .forge-toast { border: 2px solid var(--play-ink); border-radius: var(--play-sketch); }
+  [data-forge-style="playful"] .forge-popover { border: 2px solid var(--play-ink); border-radius: var(--play-sketch-sm); box-shadow: 3px 4px 0 var(--play-ink); }
+  [data-forge-style="playful"] .forge-dialog, [data-forge-style="playful"] .forge-toast { box-shadow: 5px 6px 0 var(--play-ink); }
+  [data-forge-style="playful"] .forge-card-interactive:hover { transform: translateY(-3px) rotate(-0.6deg); }
+  [data-forge-style="playful"] .forge-card-interactive { transition: transform 260ms var(--play-bounce), box-shadow 200ms; }
+  [data-forge-style="playful"] .forge-sidebar { border-right: 2px solid var(--play-ink); }
+  [data-forge-style="playful"] .forge-topbar { border-bottom: 2px solid var(--play-ink); }
+  [data-forge-style="playful"] .forge-heading { font-weight: 600; letter-spacing: -0.01em; }
+  [data-forge-style="playful"] h1.forge-heading { text-decoration: underline wavy var(--forge-accent) 3px; text-underline-offset: 7px; text-decoration-skip-ink: none; padding-bottom: 6px; }
+  [data-forge-style="playful"] .forge-logo { border: 2px solid var(--play-ink); border-radius: var(--play-sketch-sm); transform: rotate(-4deg); }
+  [data-forge-style="playful"] .forge-btn { border: 2px solid var(--play-ink); border-radius: var(--play-sketch-sm); font-weight: 700; box-shadow: 2px 3px 0 var(--play-ink); transition: transform 220ms var(--play-bounce), box-shadow 160ms, background-color 120ms; }
+  [data-forge-style="playful"] .forge-btn:hover:not(:disabled) { transform: translateY(-2px) rotate(-1.5deg) scale(1.03); box-shadow: 3px 5px 0 var(--play-ink); }
+  [data-forge-style="playful"] .forge-btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); box-shadow: 0 0 0 var(--play-ink); }
+  [data-forge-style="playful"] .forge-btn-ghost { border-color: transparent; box-shadow: none; }
+  [data-forge-style="playful"] .forge-btn-ghost:hover:not(:disabled) { box-shadow: none; transform: rotate(-2deg); }
+  [data-forge-style="playful"] .forge-btn-primary:hover:not(:disabled) { background: var(--forge-primary); }
+  [data-forge-style="playful"] .forge-btn-secondary { border-color: var(--play-ink); }
+  [data-forge-style="playful"] .forge-input { border: 2px solid var(--play-ink); border-radius: var(--play-sketch-sm); }
+  [data-forge-style="playful"] .forge-input:focus { border-color: var(--forge-primary); box-shadow: 2px 3px 0 var(--forge-primary); }
+  [data-forge-style="playful"] .forge-nav-item { font-weight: 600; border: 2px solid transparent; border-radius: var(--play-sketch-sm); transition: transform 220ms var(--play-bounce), background-color 120ms; }
+  [data-forge-style="playful"] .forge-nav-item:hover { transform: translateX(2px) rotate(-1deg); }
+  [data-forge-style="playful"] .forge-nav-item[aria-current="page"] { background: var(--forge-accent); color: var(--forge-accent-fg); border-color: var(--play-ink); box-shadow: 2px 3px 0 var(--play-ink); }
+  [data-forge-style="playful"] .forge-nav-item[aria-current="page"] svg { color: currentColor; }
+  [data-forge-style="playful"] .forge-table thead tr { background: color-mix(in oklab, var(--forge-primary) 10%, var(--forge-surface)); border-bottom: 2px solid var(--play-ink); }
+  [data-forge-style="playful"] .forge-table tbody tr { border-top: 2px dashed var(--forge-line); }
+  [data-forge-style="playful"] .forge-table tbody tr:hover { background: var(--forge-hover); }
+  [data-forge-style="playful"] .forge-badge { border-radius: var(--play-sketch-sm); box-shadow: none; border: 1.5px solid var(--play-ink); color: var(--forge-ink); background: color-mix(in oklab, var(--tone) 24%, var(--forge-surface)); }
+  [data-forge-style="playful"] .forge-chip { background: var(--forge-accent); color: var(--forge-accent-fg); border: 2px solid var(--play-ink); border-radius: var(--play-sketch-sm); box-shadow: 2px 2px 0 var(--play-ink); transform: rotate(-5deg); }
+  [data-forge-style="playful"] .forge-avatar { border: 2px solid var(--play-ink); background: var(--forge-accent); color: var(--forge-accent-fg); }
+  [data-forge-style="playful"] .forge-metric::after { background: radial-gradient(closest-side, color-mix(in oklab, var(--forge-accent) 45%, transparent), transparent); }
+  [data-forge-style="playful"] .forge-switch { border: 2px solid var(--play-ink); }
+  [data-forge-style="playful"] .forge-alert { border-width: 2px; border-radius: var(--play-sketch-sm); }
+  [data-forge-style="playful"] .forge-tooltip { border-radius: var(--play-sketch-sm); }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════════════════════════
+ * Look and feel (theme.background, cards, buttons, motion, sidebar, iconStyle, chartPalette), selected by
+ * data-forge-background / -cards / -buttons / -motion / -sidebar / -icons / -chart on <html>.
+ * They come after the styles (and use :root for one more level of specificity) so they win over a style.
+ * ════════════════════════════════════════════════════════════════════════════════════════════════ */
+
+/* Chart palettes: --forge-chart-1 … --forge-chart-8 opt-in palettes; the default "theme" palette is defined with the dashboard charts above. */
+@layer base {
+  @supports (color: oklch(from red l c h)) {
+    :root {
+      /* Links: the primary, darkened (light mode) or lightened (dark mode) just enough to read as text. */
+      --forge-link: light-dark(oklch(from var(--forge-primary) min(l, 0.46) c h), oklch(from var(--forge-primary) max(l, 0.8) c h));
+    }
+  }
+  :root[data-forge-chart="vivid"] {
+    --forge-chart-1: light-dark(#2563eb, #60a5fa);
+    --forge-chart-2: light-dark(#ea580c, #fb923c);
+    --forge-chart-3: light-dark(#059669, #34d399);
+    --forge-chart-4: light-dark(#e11d48, #fb7185);
+    --forge-chart-5: light-dark(#7c3aed, #a78bfa);
+    --forge-chart-6: light-dark(#ca8a04, #facc15);
+    --forge-chart-7: light-dark(#0891b2, #22d3ee);
+    --forge-chart-8: light-dark(#c026d3, #e879f9);
+  }
+  :root[data-forge-chart="pastel"] {
+    --forge-chart-1: light-dark(#7aa7f0, #a5c4fb);
+    --forge-chart-2: light-dark(#f2a46c, #fcc39b);
+    --forge-chart-3: light-dark(#6cc79c, #9fe3c2);
+    --forge-chart-4: light-dark(#ef8fa3, #f9b6c4);
+    --forge-chart-5: light-dark(#a99be8, #c9bff7);
+    --forge-chart-6: light-dark(#e3c35c, #f3dd8f);
+    --forge-chart-7: light-dark(#5fc0d2, #97dce8);
+    --forge-chart-8: light-dark(#d79ad8, #ebc0eb);
+  }
+  :root[data-forge-chart="mono"] {
+    --forge-chart-1: var(--forge-primary);
+    --forge-chart-2: color-mix(in oklab, var(--forge-primary) 70%, var(--forge-surface));
+    --forge-chart-3: color-mix(in oklab, var(--forge-primary) 72%, var(--forge-ink));
+    --forge-chart-4: color-mix(in oklab, var(--forge-primary) 45%, var(--forge-surface));
+    --forge-chart-5: color-mix(in oklab, var(--forge-primary) 48%, var(--forge-ink));
+    --forge-chart-6: color-mix(in oklab, var(--forge-primary) 25%, var(--forge-surface));
+    --forge-chart-7: color-mix(in oklab, var(--forge-primary) 28%, var(--forge-ink));
+    --forge-chart-8: var(--forge-ink-subtle);
+  }
+}
+
+/* Backgrounds: subtle, static, made from the theme colours (no images). */
+@layer components {
+  :root[data-forge-background="gradient"] .forge-app-bg {
+    background:
+      linear-gradient(165deg, color-mix(in oklab, var(--forge-primary) 11%, transparent), transparent 42%, transparent 60%, color-mix(in oklab, var(--forge-accent) 12%, transparent)),
+      var(--forge-canvas);
+    background-attachment: fixed;
+  }
+  :root[data-forge-background="mesh"] .forge-app-bg {
+    background:
+      radial-gradient(42rem 32rem at 8% 0%, color-mix(in oklab, var(--forge-primary) 20%, transparent), transparent 70%),
+      radial-gradient(36rem 30rem at 95% 12%, color-mix(in oklab, var(--forge-accent) 18%, transparent), transparent 70%),
+      radial-gradient(48rem 36rem at 60% 105%, color-mix(in oklab, var(--forge-primary) 14%, var(--forge-accent) 8%), transparent 70%),
+      var(--forge-canvas);
+    background-attachment: fixed;
+  }
+  :root[data-forge-background="dots"] .forge-app-bg {
+    background:
+      radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--forge-ink) 16%, transparent) 1px, transparent 1.5px) 0 0 / 20px 20px,
+      var(--forge-canvas);
+    background-attachment: fixed;
+  }
+  :root[data-forge-background="grid"] .forge-app-bg {
+    background:
+      linear-gradient(color-mix(in oklab, var(--forge-primary) 9%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
+      linear-gradient(90deg, color-mix(in oklab, var(--forge-primary) 9%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
+      radial-gradient(60rem 40rem at 50% -10%, color-mix(in oklab, var(--forge-primary) 10%, transparent), transparent 70%),
+      var(--forge-canvas);
+    background-attachment: fixed;
+  }
+  /* Grain from aliasing tiny conic steps (a CSS-only noise), over a faint warm wash. */
+  :root[data-forge-background="noise"] .forge-app-bg {
+    background:
+      repeating-conic-gradient(color-mix(in oklab, var(--forge-ink) 3.5%, transparent) 0 0.00045%, transparent 0 0.0009%),
+      radial-gradient(60rem 40rem at 0% 0%, color-mix(in oklab, var(--forge-primary) 8%, transparent), transparent 70%),
+      var(--forge-canvas);
+    background-attachment: fixed;
+  }
+  /* The aurora drift and glass backdrop are a style's own background; an explicit one replaces them. */
+  :root[data-forge-background]:not([data-forge-background="plain"]) .forge-app-bg::before { content: none; }
+}
+
+/* Cards. */
+@layer components {
+  :root[data-forge-cards="flat"] .forge-card { background: var(--forge-surface-muted); border-color: transparent; box-shadow: none; }
+  :root[data-forge-cards="flat"] .forge-card-interactive:hover { box-shadow: 0 0 0 1px var(--forge-line-strong); }
+  :root[data-forge-cards="bordered"] .forge-card { border: 1px solid var(--forge-line-strong); box-shadow: none; }
+  :root[data-forge-cards="elevated"] .forge-card {
+    border-color: transparent;
+    box-shadow: 0 1px 2px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.45)), 0 14px 34px -14px light-dark(rgb(16 24 40 / 0.24), rgb(0 0 0 / 0.75));
+  }
+  :root[data-forge-cards="elevated"] .forge-card-interactive:hover { box-shadow: 0 2px 4px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.45)), 0 22px 44px -16px light-dark(rgb(16 24 40 / 0.3), rgb(0 0 0 / 0.8)); }
+  :root[data-forge-cards="glass"] .forge-card {
+    background: color-mix(in oklab, var(--forge-surface) 68%, transparent);
+    border-color: light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.1));
+    box-shadow: 0 10px 30px -14px light-dark(rgb(31 38 100 / 0.25), rgb(0 0 0 / 0.7)), inset 0 1px 0 light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.06));
+    -webkit-backdrop-filter: blur(16px) saturate(150%);
+    backdrop-filter: blur(16px) saturate(150%);
+  }
+}
+
+/* Buttons. */
+@layer components {
+  /* Soft buttons: the link colour pulled towards the ink, so it stays AA on the primary tint of any style. */
+  :root[data-forge-buttons] { --forge-btn-soft-ink: color-mix(in oklab, var(--forge-link) 70%, var(--forge-ink)); }
+  :root[data-forge-buttons] .forge-btn-primary { background-image: none; text-shadow: none; }
+  :root[data-forge-buttons="solid"] .forge-btn-primary { background: var(--forge-primary); color: var(--forge-primary-fg); }
+  :root[data-forge-buttons="soft"] .forge-btn-primary,
+  :root[data-forge-buttons="soft"] .forge-btn-primary:hover:not(:disabled) { color: var(--forge-btn-soft-ink); border-color: transparent; box-shadow: none; }
+  :root[data-forge-buttons="soft"] .forge-btn-primary { background: color-mix(in oklab, var(--forge-primary) 14%, var(--forge-surface)); }
+  :root[data-forge-buttons="soft"] .forge-btn-primary:hover:not(:disabled) { background: color-mix(in oklab, var(--forge-primary) 20%, var(--forge-surface)); }
+  :root[data-forge-buttons="soft"] .forge-btn-secondary { background: var(--forge-surface-muted); border-color: transparent; box-shadow: none; }
+  :root[data-forge-buttons="soft"] .forge-btn-danger { background: color-mix(in oklab, var(--forge-danger) 14%, var(--forge-surface)); color: color-mix(in oklab, var(--forge-danger) 75%, var(--forge-ink)); }
+  :root[data-forge-buttons="outline"] .forge-btn-primary,
+  :root[data-forge-buttons="outline"] .forge-btn-primary:hover:not(:disabled) { color: var(--forge-link); border: 1.5px solid var(--forge-link); box-shadow: none; }
+  :root[data-forge-buttons="outline"] .forge-btn-primary { background: transparent; }
+  :root[data-forge-buttons="outline"] .forge-btn-primary:hover:not(:disabled) { background: color-mix(in oklab, var(--forge-primary) 10%, transparent); }
+  :root[data-forge-buttons="outline"] .forge-btn-secondary { background: transparent; border: 1.5px solid var(--forge-line-strong); box-shadow: none; }
+  :root[data-forge-buttons="pill"] .forge-btn,
+  :root[data-forge-buttons="pill"] .forge-btn:hover:not(:disabled) { border-radius: 999px; clip-path: none; }
+  :root[data-forge-buttons="pill"] .forge-btn-primary,
+  :root[data-forge-buttons="pill"] .forge-btn-danger { padding-inline: max(1rem, 1em); }
+}
+
+/* Sidebar surface. Tokens are re-scoped on the sidebar, so everything inside (search, switchers, badges) follows. */
+@layer components {
+  /* "light": the page's regular surface and tokens, undoing a style's own sidebar (leather, navy…). */
+  :root[data-forge-sidebar] .forge-sidebar {
+    --forge-ink: inherit;
+    --forge-ink-muted: inherit;
+    --forge-ink-subtle: inherit;
+    --forge-line: inherit;
+    --forge-hover: inherit;
+    --forge-selected: inherit;
+    --forge-link: inherit;
+    background: var(--forge-surface);
+    color: var(--forge-ink);
+    border-right: 1px solid var(--forge-line);
+    box-shadow: none;
+  }
+  :root[data-forge-sidebar="dark"] .forge-sidebar,
+  :root[data-forge-sidebar="brand"] .forge-sidebar { -webkit-backdrop-filter: none; backdrop-filter: none; }
+  :root[data-forge-sidebar="dark"] .forge-sidebar {
+    color-scheme: dark;
+    --forge-surface: color-mix(in oklab, var(--forge-primary) 12%, #0f1117);
+    --forge-surface-muted: color-mix(in oklab, var(--forge-primary) 10%, #0c0e13);
+    --forge-ink: #f3f4f6;
+    --forge-ink-muted: #bcc1cc;
+    --forge-ink-subtle: #9ba1ae;
+    --forge-line: rgb(255 255 255 / 0.1);
+    --forge-line-strong: rgb(255 255 255 / 0.2);
+    --forge-hover: rgb(255 255 255 / 0.07);
+    --forge-selected: rgb(255 255 255 / 0.12);
+    --forge-link: color-mix(in oklab, var(--forge-primary) 45%, white);
+    border-right-color: rgb(0 0 0 / 0.4);
+  }
+  :root[data-forge-sidebar="brand"] .forge-sidebar {
+    --forge-surface: var(--forge-primary);
+    --forge-surface-muted: var(--forge-primary);
+    --forge-ink: var(--forge-primary-fg);
+    --forge-ink-muted: var(--forge-primary-fg);
+    --forge-ink-subtle: var(--forge-primary-fg);
+    --forge-line: color-mix(in oklab, var(--forge-primary-fg) 18%, transparent);
+    --forge-line-strong: color-mix(in oklab, var(--forge-primary-fg) 30%, transparent);
+    --forge-hover: color-mix(in oklab, var(--forge-primary-fg) 10%, transparent);
+    /* The current item is marked by a bar and weight: any tint would cost contrast on mid-tone brand colours. */
+    --forge-selected: transparent;
+    --forge-link: var(--forge-primary-fg);
+    border-right-color: transparent;
+  }
+  :root[data-forge-sidebar="brand"] .forge-sidebar .forge-logo { background: var(--forge-primary-fg); color: var(--forge-primary); }
+  :root[data-forge-sidebar="brand"] .forge-sidebar .forge-input,
+  :root[data-forge-sidebar="dark"] .forge-sidebar .forge-input { background: var(--forge-surface-muted); border-color: var(--forge-line-strong); box-shadow: none; }
+  :root[data-forge-sidebar] .forge-sidebar .forge-nav-item { color: var(--forge-ink-muted); }
+  :root[data-forge-sidebar] .forge-sidebar .forge-nav-item:hover { background: var(--forge-hover); color: var(--forge-ink); }
+  :root[data-forge-sidebar] .forge-sidebar .forge-nav-item[aria-current="page"] { background: var(--forge-selected); color: var(--forge-ink); border-color: transparent; }
+  :root[data-forge-sidebar] .forge-sidebar .forge-nav-item[aria-current="page"] svg { color: var(--forge-link); }
+  :root[data-forge-sidebar="brand"] .forge-sidebar :focus-visible { outline-color: var(--forge-primary-fg); }
+  :root[data-forge-sidebar="brand"] .forge-sidebar .forge-nav-item[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--forge-primary-fg); }
+}
+
+/* Navigation icons: duotone fills the shapes with a tint of their stroke colour. */
+@layer components {
+  :root[data-forge-icons="duotone"] :is(.forge-nav-item, .forge-chip) svg { fill: color-mix(in oklab, currentColor 20%, transparent); }
+  :root[data-forge-icons="duotone"] .forge-nav-item[aria-current="page"] svg { fill: color-mix(in oklab, currentColor 32%, transparent); }
+}
+
+/* Motion levels (prefers-reduced-motion always wins, see the end of the file). */
+@layer components {
+  :root[data-forge-motion="none"] :is(.forge-enter, .forge-pop, .forge-stagger > *, .forge-toast, .forge-drawer, .forge-tooltip, .forge-skeleton),
+  :root[data-forge-motion="none"] .forge-app-bg::before { animation: none; }
+  :root[data-forge-motion="none"] :is(.forge-card-interactive, .forge-btn, .forge-nav-item, .forge-rail, .forge-rail-offset, .forge-input, .forge-switch) { transition: none; }
+  :root[data-forge-motion="none"] .forge-card-interactive:hover,
+  :root[data-forge-motion="none"] .forge-btn:hover:not(:disabled),
+  :root[data-forge-motion="none"] .forge-nav-item:hover { transform: none; }
+
+  :root[data-forge-motion="lively"] .forge-enter { animation: forge-enter-lively 520ms var(--forge-ease) both; }
+  :root[data-forge-motion="lively"] .forge-stagger > * { animation: forge-enter-lively 560ms var(--forge-ease) both; }
+  :root[data-forge-motion="lively"] .forge-stagger > :nth-child(2) { animation-delay: 70ms; }
+  :root[data-forge-motion="lively"] .forge-stagger > :nth-child(3) { animation-delay: 140ms; }
+  :root[data-forge-motion="lively"] .forge-stagger > :nth-child(4) { animation-delay: 210ms; }
+  :root[data-forge-motion="lively"] .forge-stagger > :nth-child(n + 5) { animation-delay: 280ms; }
+  :root[data-forge-motion="lively"] .forge-card { transition: transform 260ms var(--forge-ease-spring), box-shadow 260ms var(--forge-ease); }
+  :root[data-forge-motion="lively"] .forge-widget:hover,
+  :root[data-forge-motion="lively"] .forge-card-interactive:hover { transform: translateY(-4px); box-shadow: var(--forge-card-shadow-hover); }
+  :root[data-forge-motion="lively"] .forge-btn:active:not(:disabled) { transform: scale(0.96); }
+  :root[data-forge-motion="lively"] .forge-nav-item { transition: background-color 140ms, color 140ms, transform 220ms var(--forge-ease-spring); }
+  :root[data-forge-motion="lively"] .forge-sidebar .forge-nav-item:hover { transform: translateX(3px); }
+  :root[data-forge-motion="lively"] .forge-toast { animation: forge-toast-lively 420ms var(--forge-ease-spring); }
+  :root { --forge-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); }
+}
+@keyframes forge-enter-lively { from { opacity: 0; transform: translateY(16px) scale(0.985); } }
+@keyframes forge-toast-lively { from { opacity: 0; transform: translateY(-16px) scale(0.92); } }
+
+/* ════════════════════════════════════════════════════════════════════════════════════════════════
+ * Polish shared by every style: focus, disabled, empty states, tables, dark-mode badges.
+ * ════════════════════════════════════════════════════════════════════════════════════════════════ */
+@layer components {
+  .forge-check:focus-visible, .forge-palette-item:focus-visible, .forge-cell-editable:focus-visible { outline: var(--forge-ring); outline-offset: var(--forge-ring-offset); }
+  .forge-input:disabled, .forge-input[aria-disabled="true"] { cursor: not-allowed; background: var(--forge-surface-muted); }
+  .forge-switch:disabled, .forge-switch[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+  .forge-check:disabled { opacity: 0.5; cursor: not-allowed; }
+  .forge-btn[aria-busy="true"] { cursor: progress; }
+  .forge-table thead th { font-weight: 500; }
+  .forge-table tbody tr[aria-selected="true"], .forge-table tbody tr[data-selected="true"] { background: var(--forge-selected); }
+  .forge-empty .forge-illustration { color: color-mix(in oklab, var(--forge-ink-subtle) 70%, var(--forge-primary)); }
+  .forge-dialog { color: var(--forge-ink); }
+  .forge-toast { border-left-width: 1px; }
+  /* Dark mode: badges and alerts mix their tone towards the light ink, so they stay readable on dark surfaces. */
+  :root[data-forge-mode="dark"] .forge-badge { color: color-mix(in oklab, var(--tone) 55%, var(--forge-ink)); background: color-mix(in oklab, var(--tone) 18%, transparent); }
+  @media (prefers-color-scheme: dark) {
+    :root[data-forge-mode="system"] .forge-badge { color: color-mix(in oklab, var(--tone) 55%, var(--forge-ink)); background: color-mix(in oklab, var(--tone) 18%, transparent); }
+  }
+}
+
+/* Links readable on every style's surfaces whatever the primary (darker on retro's grey face, terminal's own mix replaced). */
+@layer components {
+  @supports (color: oklch(from red l c h)) {
+    [data-forge-style="terminal"] { --forge-link: light-dark(oklch(from var(--forge-primary) min(l, 0.44) c h), oklch(from var(--forge-primary) max(l, 0.8) c h)); }
+    [data-forge-style="retro"] { --forge-link: light-dark(oklch(from var(--forge-primary) min(l, 0.38) c h), oklch(from var(--forge-primary) max(l, 0.82) c h)); }
+  }
+}
+
+/* Headline sizes that must beat Tailwind's text-* utilities. */
+@layer utilities {
+  [data-forge-style="swiss"] h1.forge-heading { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; }
+  [data-forge-style="swiss"] .forge-metric-value { font-size: 3rem; line-height: 1; }
+  [data-forge-style="luxury"] h1.forge-heading { font-size: 2rem; line-height: 2.375rem; font-weight: 600; }
+  [data-forge-style="luxury"] .forge-metric-value { font-size: 2.5rem; }
+  [data-forge-style="luxury"] .forge-table thead tr { font-size: 0.6875rem; }
+  [data-forge-style="retro"] h1.forge-heading { font-size: 1.25rem; line-height: 1.75rem; }
+  [data-forge-style="retro"] .forge-metric-value { font-size: 2.5rem; line-height: 2.75rem; }
+  [data-forge-style="cyber"] h1.forge-heading { font-size: 1.375rem; }
+  [data-forge-style="minimal"] h1.forge-heading { font-size: 1.5rem; line-height: 2rem; }
+  [data-forge-style="minimal"] .forge-table thead tr { font-size: 0.8125rem; }
+  [data-forge-style="playful"] h1.forge-heading { font-size: 1.625rem; line-height: 2.25rem; }
+  [data-forge-style="corporate"] .forge-table thead tr { font-size: 0.6875rem; }
+  [data-forge-style="corporate"] h1.forge-heading { font-size: 1.25rem; }
+}
+
+/* Reduced motion and forced colours: no glow, no bounce, no animated backgrounds, whatever the style or motion level. */
+@media (prefers-reduced-motion: reduce) {
+  :root[data-forge-motion] :is(.forge-enter, .forge-pop, .forge-stagger > *, .forge-toast, .forge-drawer, .forge-tooltip, .forge-skeleton),
+  :root[data-forge-motion] .forge-app-bg::before { animation: none !important; }
+  :root[data-forge-motion] :is(.forge-card, .forge-card-interactive, .forge-btn, .forge-nav-item, .forge-input, .forge-switch) { transition: none !important; }
+  :root[data-forge-motion] :is(.forge-card, .forge-card-interactive, .forge-widget, .forge-btn, .forge-nav-item, .forge-chip, .forge-logo):is(:hover, :active) { transform: none !important; }
+  [data-forge-style="neon"] { --neon-glow: 0 0 0 1px var(--forge-primary); --neon-glow-soft: 0 0 #0000; --neon-text-glow: none; }
+  [data-forge-style="neon"] .forge-nav-item[aria-current="page"] svg { filter: none; }
+  [data-forge-style="playful"] .forge-card-interactive:hover, [data-forge-style="playful"] .forge-btn:hover:not(:disabled) { transform: none; }
+}
+@media (forced-colors: active) {
+  [data-forge-style="neon"] { --neon-glow: none; --neon-glow-soft: none; --neon-text-glow: none; }
+  [data-forge-style="neon"] *, [data-forge-style="playful"] .forge-chip { text-shadow: none; filter: none; }
+  [data-forge-style="cyber"] :is(.forge-card, .forge-dialog, .forge-toast, .forge-btn, .forge-badge, .forge-chip, .forge-avatar, .forge-logo) { clip-path: none; }
+  [data-forge-style="retro"] :is(.forge-card, .forge-btn, .forge-input, .forge-sidebar) { border: 1px solid CanvasText; }
+  .forge-nav-item[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
+  .forge-btn { border: 1px solid ButtonText; }
+
+}
+/* ── Website (`site` in forge.config.ts): public pages built from sections ────────────────────────
+ * Every hook below builds on the theme tokens, so presets, styles, modes and corner radii restyle the website
+ * like the app. Layout lives in Tailwind container-query utilities in the components (@container on the page). */
+@layer components {
+  /* Header: translucent canvas over the page, menu links, dropdowns and the small-screen panel. */
+  .forge-site-header { background: color-mix(in oklab, var(--forge-canvas) 84%, transparent); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--forge-line); }
+  .forge-site-navlink { padding: 0.5rem 0.75rem; border-radius: var(--forge-radius-control); font-size: 0.9375rem; font-weight: 500; color: var(--forge-ink-muted); transition: color 120ms, background-color 120ms; }
+  .forge-site-navlink:hover, .forge-site-navlink[aria-expanded="true"] { color: var(--forge-ink); background: var(--forge-hover); }
+  .forge-site-navlink[aria-current="page"], .forge-site-navlink[data-active] { color: var(--forge-ink); box-shadow: inset 0 -2px 0 var(--forge-primary); }
+  .forge-site-chevron { transition: transform 160ms var(--forge-ease); }
+  .forge-site-navlink[aria-expanded="true"] .forge-site-chevron { transform: rotate(180deg); }
+  .forge-site-dropdown { animation: forge-enter 160ms var(--forge-ease) both; }
+  .forge-site-dropdown-link { border-radius: var(--forge-radius-control); transition: background-color 120ms; }
+  .forge-site-dropdown-link:hover, .forge-site-dropdown-link[aria-current="page"] { background: var(--forge-hover); }
+  .forge-site-mobile { background: var(--forge-surface); border-bottom: 1px solid var(--forge-line); box-shadow: 0 28px 48px -28px rgb(0 0 0 / 0.4); animation: forge-enter 180ms var(--forge-ease) both; }
+
+  /* Type and accents */
+  .forge-site-display { letter-spacing: -0.025em; }
+  .forge-site-eyebrow { color: var(--forge-link); letter-spacing: 0.02em; }
+  .forge-site-pill { border-radius: 999px; }
+  .forge-site-brand-pill { border-radius: 999px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
+  .forge-site-role { color: var(--forge-link); }
+  .forge-site-quote-mark { color: color-mix(in oklab, var(--forge-primary) 70%, var(--forge-ink)); }
+  .forge-site-check { color: color-mix(in oklab, var(--forge-primary) 72%, var(--forge-ink)); }
+  .forge-site-stat { color: color-mix(in oklab, var(--forge-primary) 55%, var(--forge-ink)); }
+  .forge-site-dot { background: var(--forge-ink-subtle); }
+  .forge-site-arrow { transition: transform 160ms var(--forge-ease); }
+  a:hover .forge-site-arrow, .forge-site-row:hover .forge-site-arrow { transform: translateX(3px); }
+
+  /* Hero glow: a soft halo of the brand colours behind the opening section. */
+  .forge-site-hero-glow::before {
+    content: ""; position: absolute; inset: -30% -10% auto; height: 130%; z-index: -1; pointer-events: none;
+    background:
+      radial-gradient(45% 45% at 50% 10%, color-mix(in oklab, var(--forge-primary) 15%, transparent), transparent 70%),
+      radial-gradient(28% 32% at 82% 25%, color-mix(in oklab, var(--forge-accent) 11%, transparent), transparent 70%);
+  }
+
+  /* Media: fixed-ratio boxes (no layout shift) on a muted backdrop while they load. */
+  .forge-site-media { border-radius: var(--forge-radius); background: var(--forge-surface-muted); }
+  .forge-site-frame { border: 1px solid var(--forge-line); box-shadow: var(--forge-card-shadow-hover); }
+  .forge-site-card-media, .forge-site-bento-media { border-radius: 0; }
+  .forge-site-media-inner { border-radius: calc(var(--forge-radius) - 4px); }
+  .forge-site-avatar { border-radius: 999px; background: var(--forge-surface-muted); }
+  .forge-site-iconpanel, .forge-site-cover-fallback {
+    background:
+      radial-gradient(circle at 25% 20%, color-mix(in oklab, var(--forge-primary) 16%, transparent), transparent 55%),
+      radial-gradient(circle at 85% 90%, color-mix(in oklab, var(--forge-accent) 14%, transparent), transparent 50%),
+      var(--forge-surface-muted);
+    color: var(--forge-ink);
+  }
+  .forge-site-iconpanel { border-radius: var(--forge-radius); border: 1px solid var(--forge-line); }
+
+  /* Cards and panels */
+  .forge-site-bento-feature { background: linear-gradient(155deg, color-mix(in oklab, var(--forge-primary) 9%, var(--forge-surface)), var(--forge-surface) 60%); }
+  .forge-site-panel { border-radius: var(--forge-radius); background: var(--forge-surface-muted); border: 1px solid var(--forge-line); }
+  .forge-site-cta-split { background: linear-gradient(115deg, color-mix(in oklab, var(--forge-primary) 9%, var(--forge-surface)), var(--forge-surface) 55%); }
+  .forge-site-row { transition: background-color 120ms; }
+  .forge-site-row:hover { background: var(--forge-hover); }
+  .forge-site-stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
+  .forge-site-post:focus-within { box-shadow: var(--forge-card-shadow-hover); }
+
+  /* Logos: muted marks that come to full colour on hover; the grid variant draws hairlines between cells. */
+  .forge-site-logo { color: var(--forge-ink-muted); opacity: 0.8; transition: opacity 160ms; }
+  .forge-site-logo-img { filter: grayscale(1); transition: filter 160ms; }
+  .forge-site-logo:hover { opacity: 1; }
+  .forge-site-logo:hover .forge-site-logo-img { filter: none; }
+  .forge-site-logo-grid { gap: 1px; background: var(--forge-line); border: 1px solid var(--forge-line); border-radius: var(--forge-radius); overflow: hidden; }
+  .forge-site-logo-grid > li { background: var(--forge-surface); }
+  .forge-site-logo-tile { border-radius: calc(var(--forge-radius-control) + 2px); background: var(--forge-surface-muted); border: 1px solid var(--forge-line); color: var(--forge-ink); }
+
+  /* Steps, stats, pricing */
+  .forge-site-step-number { border-radius: 999px; background: var(--forge-primary); color: var(--forge-primary-fg); box-shadow: 0 0 0 4px color-mix(in oklab, var(--forge-primary) 16%, transparent); }
+  .forge-site-timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 1.25rem; top: 2.75rem; bottom: 0.25rem; width: 2px; transform: translateX(-50%); background: var(--forge-line-strong); }
+  .forge-site-plan-highlight { border-color: var(--forge-primary); box-shadow: 0 0 0 1px var(--forge-primary), var(--forge-card-shadow-hover); }
+  .forge-site-plan-badge { border-radius: 999px; background: var(--forge-primary); color: var(--forge-primary-fg); }
+  .forge-site-plan-row-highlight { background: color-mix(in oklab, var(--forge-primary) 6%, transparent); }
+
+  /* FAQ disclosure */
+  .forge-site-faq-item summary::-webkit-details-marker { display: none; }
+  .forge-site-faq-icon { background: var(--forge-hover); color: var(--forge-ink); transition: transform 200ms var(--forge-ease), background-color 150ms; }
+  .forge-site-faq-item summary:hover .forge-site-faq-icon, .forge-site-faq-item[open] .forge-site-faq-icon { background: var(--forge-selected); }
+  .forge-site-faq-item[open] .forge-site-faq-icon { transform: rotate(45deg); }
+
+  /* Tables: comparison (first column = you, tinted) and markdown tables; they scroll sideways when narrow. */
+  .forge-site-table-scroll { overflow-x: auto; }
+  .forge-site-table-scroll:focus-visible { outline: var(--forge-ring); outline-offset: -2px; }
+  .forge-site-compare tr { border-top: 1px solid var(--forge-line); }
+  .forge-site-compare thead tr { border-top: 0; background: var(--forge-surface-muted); }
+  .forge-site-compare [data-highlight] { background: color-mix(in oklab, var(--forge-primary) 7%, transparent); }
+
+  /* Forms */
+  .forge-site-field-error { color: color-mix(in oklab, var(--forge-danger) 80%, var(--forge-ink)); }
+  .forge-site-success { border-radius: var(--forge-radius-control); background: color-mix(in oklab, var(--forge-success) 10%, var(--forge-surface)); color: color-mix(in oklab, var(--forge-success) 50%, var(--forge-ink)); border: 1px solid color-mix(in oklab, var(--forge-success) 30%, transparent); }
+  .forge-site-success-icon { color: color-mix(in oklab, var(--forge-success) 80%, var(--forge-ink)); }
+  .forge-site-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+  .forge-site-spin { animation: forge-site-spin 0.9s linear infinite; }
+
+  /* Hidden sections (editor preview only) */
+  .forge-site-hidden { outline: 2px dashed color-mix(in oklab, var(--forge-ink) 28%, transparent); outline-offset: -6px; }
+  .forge-site-hidden > :not(.forge-site-hidden-badge) { opacity: 0.6; }
+  .forge-site-hidden-badge { border-radius: 999px; background: var(--forge-ink); color: var(--forge-surface); }
+
+  /* Footer */
+  .forge-site-footer { border-top: 1px solid var(--forge-line); background: var(--forge-surface-muted); }
+  .forge-site-footer-link { color: var(--forge-ink-muted); transition: color 120ms; }
+  .forge-site-footer-link:hover { color: var(--forge-ink); }
+
+  /* Markdown (text sections, FAQ answers, posts): typography from the tokens. */
+  .forge-site-prose { line-height: 1.75; overflow-wrap: break-word; }
+  .forge-site-prose > * + * { margin-top: 1.1em; }
+  .forge-site-prose > :first-child { margin-top: 0; }
+  .forge-site-prose :is(h2, h3, h4, h5, h6) { font-family: var(--forge-font-display); color: var(--forge-ink); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; text-wrap: balance; }
+  .forge-site-prose > :is(h2, h3, h4, h5, h6) { margin-top: 1.9em; }
+  .forge-site-prose > :is(h2, h3, h4, h5, h6) + * { margin-top: 0.6em; }
+  .forge-site-prose h2 { font-size: 1.625em; }
+  .forge-site-prose h3 { font-size: 1.3em; }
+  .forge-site-prose h4 { font-size: 1.1em; }
+  .forge-site-prose :is(p, li) { text-wrap: pretty; }
+  .forge-site-prose a { color: var(--forge-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
+  .forge-site-prose a:hover { text-decoration-thickness: 2px; }
+  .forge-site-prose a:focus-visible { outline: var(--forge-ring); outline-offset: 2px; border-radius: 2px; }
+  .forge-site-prose strong { color: var(--forge-ink); font-weight: 600; }
+  .forge-site-prose :not(pre) > code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; background: var(--forge-surface-muted); border: 1px solid var(--forge-line); border-radius: 5px; padding: 0.1em 0.35em; color: var(--forge-ink); }
+  .forge-site-prose pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; line-height: 1.65; background: var(--forge-surface-muted); color: var(--forge-ink); border: 1px solid var(--forge-line); border-radius: var(--forge-radius-control); padding: 1rem 1.25rem; overflow-x: auto; }
+  .forge-site-prose pre:focus-visible { outline: var(--forge-ring); outline-offset: 2px; }
+  .forge-site-prose ul { list-style: disc; padding-left: 1.4em; }
+  .forge-site-prose ol { list-style: decimal; padding-left: 1.5em; }
+  .forge-site-prose li + li, .forge-site-prose li > :is(ul, ol) { margin-top: 0.4em; }
+  .forge-site-prose li::marker { color: var(--forge-ink-subtle); }
+  .forge-site-prose blockquote { border-left: 3px solid var(--forge-primary); padding-left: 1.1em; color: var(--forge-ink-muted); font-style: italic; }
+  .forge-site-prose hr { border: 0; border-top: 1px solid var(--forge-line); margin-block: 2.5em; }
+  .forge-site-prose img { max-width: 100%; height: auto; border-radius: var(--forge-radius); border: 1px solid var(--forge-line); }
+  .forge-site-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375em; }
+  .forge-site-prose :is(th, td) { border-bottom: 1px solid var(--forge-line); padding: 0.6em 0.8em; text-align: left; }
+  .forge-site-prose th { color: var(--forge-ink); font-weight: 600; }
+  .forge-site-prose-lg { font-size: 1.125rem; }
+
+  /* Style tweaks: each style's signature carried into the website. */
+  [data-forge-style="brutalist"] .forge-site-header { border-bottom: 3px solid var(--brut-ink); }
+  [data-forge-style="brutalist"] .forge-site-frame { border: 3px solid var(--brut-ink); box-shadow: 6px 6px 0 var(--brut-ink); }
+  [data-forge-style="brutalist"] :is(.forge-site-pill, .forge-site-plan-badge, .forge-site-hidden-badge, .forge-site-faq-icon) { border-radius: 0; }
+  [data-forge-style="brutalist"] .forge-site-plan-highlight { border: 3px solid var(--brut-ink); box-shadow: 8px 8px 0 var(--forge-primary); }
+  :is([data-forge-style="brutalist"], [data-forge-style="terminal"], [data-forge-style="editorial"]) .forge-site-hero-glow::before { display: none; }
+  [data-forge-style="editorial"] .forge-site-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; color: var(--forge-ink-muted); }
+  [data-forge-style="editorial"] .forge-site-frame { box-shadow: none; }
+  [data-forge-style="editorial"] .forge-site-display { letter-spacing: -0.01em; font-weight: 500; }
+  [data-forge-style="terminal"] :is(.forge-site-pill, .forge-site-plan-badge, .forge-site-step-number, .forge-site-hidden-badge, .forge-site-faq-icon, .forge-site-brand-pill) { border-radius: 2px; }
+  [data-forge-style="terminal"] .forge-site-frame { box-shadow: none; border-color: var(--forge-line-strong); }
+  [data-forge-style="terminal"] .forge-site-display { letter-spacing: 0; }
+  [data-forge-style="neumorphism"] .forge-site-header { background: var(--forge-canvas); }
+  [data-forge-style="neumorphism"] .forge-site-frame { border: 0; box-shadow: var(--forge-card-shadow); }
+  [data-forge-style="neumorphism"] .forge-site-logo-grid > li { background: var(--forge-canvas); }
+  [data-forge-style="clay"] :is(.forge-site-media, .forge-site-iconpanel, .forge-site-panel) { border-radius: calc(var(--forge-radius) + 6px); }
+  [data-forge-style="material"] .forge-site-frame { border: 0; }
+  [data-forge-style="skeuomorphism"] .forge-site-panel { box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.08); }
+}
+
+/* Website stats row: hairlines between the numbers once they sit on one line. */
+@container (min-width: 48rem) {
+  .forge-site-stats-row > * + * { border-left: 1px solid var(--forge-line); }
+}
+
+@keyframes forge-site-spin { to { transform: rotate(360deg); } }
+
+@media (prefers-reduced-motion: reduce) {
+  .forge-site-dropdown, .forge-site-mobile { animation: none !important; }
+  .forge-site-spin { animation-duration: 2.4s; }
+  .forge-site-arrow, .forge-site-chevron, .forge-site-faq-icon, .forge-site-logo, .forge-site-logo-img, .forge-site-row, .forge-site-navlink { transition: none !important; }
+  a:hover .forge-site-arrow, .forge-site-row:hover .forge-site-arrow { transform: none !important; }
+}