@import url("./classroom-fonts.css");

/* =========================================================
   SEMANTIC TOKEN SYSTEM — CANONICAL LAYER

   Architecture:
   1. Foundation: legacy tokens (--bg, --text, --muted, etc.)
   2. Bridge: semantic aliases (--text-primary, --surface-panel, etc.)
   3. Themes: override all of the above with values
   4. Components: consume ONLY semantic tokens, never hardcode

   Selectors (canonical):
   - :root (fallback)
   - html[data-lighting="..."] (day/night system preference)
   - html[data-theme="..."] (flavor themes: sakura, cherry, etc.)
   - html[data-site-theme="..."] (temporary compatibility alias only)

   Migration path:
   - old: components hardcode colors per theme (broken)
   - new: themes define variables, components consume them
   ========================================================= */

/* =========================================================
   PHASE 0: DAY MODE (morning/day/dusk)
   ========================================================= */

:root,
html[data-lighting="morning"],
html[data-lighting="day"],
html[data-lighting="dusk"] {
  /* Legacy foundation (keep for backwards compat) */
  --bg: #f5f5f7;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --white: #ffffff;
  --radius: 26px;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
  --blue: #0071e3;
  --page-wash:
    radial-gradient(1200px 600px at -10% -10%, rgba(0, 113, 227, 0.10), transparent 50%),
    radial-gradient(900px 420px at 110% 0%, rgba(120, 180, 255, 0.12), transparent 45%);
  --header-bg: rgba(245, 245, 247, 0.86);
  --header-border: rgba(210, 210, 215, 0.8);
  --nav-ink: #3a3a3c;
  --nav-ink-strong: #111111;
  --nav-hover-bg: rgba(0, 0, 0, 0.06);
  --surface-1: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(248, 250, 252, 0.95);
  --theme-accent: #0071e3;
  --theme-accent-strong: #005ec3;
  --theme-accent-soft: rgba(0, 113, 227, 0.12);
  --surface-0: var(--bg);
  --surface-3: rgba(255, 255, 255, 0.98);
  --text-strong: var(--text);
  --text-body: var(--text);
  --text-inverse: #ffffff;
  --text-on-image: #ffffff;
  --border-subtle: var(--line);
  --border-strong: #8a8a90;
  --accent: var(--theme-accent);
  --accent-hover: var(--theme-accent-strong);
  --accent-contrast: #ffffff;
  --danger: #c32235;
  --danger-contrast: #ffffff;
  --success: #167a3c;
  --success-contrast: #ffffff;
  --warning: #8f5a00;
  --warning-contrast: #ffffff;
  --info: #0066cc;
  --info-contrast: #ffffff;
  --focus-ring: #006edb;
  --font-sans: "Classroom Chicago", "Chicago", "ChicagoFLF", "Charcoal", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Classroom Univers", "Classroom Chicago", "Univers", "Chicago", "ChicagoFLF", "Charcoal", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Launchpad Animation (preserve as-is) */
  --lp-card-radius: 24px;
  --lp-transition-snappy: 140ms cubic-bezier(0.2, 0, 0, 1);
  --lp-transition-fluid: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --lp-specular-highlight: inset 0 1px 1px rgba(255, 255, 255, 0.15);
  --lp-gutter-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  /* ============= NEW: SEMANTIC TOKEN CONTRACT ============= */

  /* Text hierarchy */
  --text-primary: #1d1d1f;
  --text-secondary: #434349;
  --text-muted: #6e6e73;
  --text-subtle: #8a8a91;
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;

  /* Surface hierarchy (page depth) */
  --surface-page: #f5f5f7;
  --surface-page-alt: #eef2f7;
  --surface-panel: rgba(255, 255, 255, 0.92);
  --surface-panel-alt: rgba(248, 250, 252, 0.95);
  --surface-elevated: #ffffff;
  --surface-overlay: rgba(255, 255, 255, 0.82);

  /* Borders & dividers */
  --border-subtle: rgba(210, 210, 215, 0.5);
  --border-default: #d2d2d7;
  --border-strong: rgba(160, 160, 168, 0.95);
  --divider: rgba(210, 210, 215, 0.5);

  /* Brand / interactive accent */
  --accent: #0071e3;
  --accent-hover: #005ec3;
  --accent-active: #004da1;
  --accent-soft: rgba(0, 113, 227, 0.12);
  --accent-strong: #005ec3;
  --accent-glow: rgba(0, 113, 227, 0.22);
  --focus-ring: rgba(0, 113, 227, 0.34);

  /* State & utility */
  --shadow-color: rgba(0, 0, 0, 0.12);
  --success: #1f8f5f;
  --warning: #b7791f;
  --danger: #c23b3b;
  --info: #0071e3;

  /* Module-specific accents (modular synth patch bay) */
  --module-osc: #0071e3;
  --module-vca: #1f8f5f;
  --module-out: #b7791f;

  /* ============= BACKWARDS COMPAT ALIASES ============= */
  /* Old code can use these; new code should use semantic tokens above */
  --bg-default: var(--surface-page);
  --panel-bg: var(--surface-panel);
  --panel-bg-alt: var(--surface-panel-alt);
  --card-bg: var(--surface-elevated);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-muted: var(--text-muted);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --brand: var(--accent);
  --brand-strong: var(--accent-strong);
  --brand-soft: var(--accent-soft);
  --cos-range-accent: #0071e3;
  --cos-range-accent-strong: #005ec3;
}

/* =========================================================
   PHASE 1: NIGHT MODE
   ========================================================= */

html[data-lighting="night"] {
  /* Legacy foundation */
  --bg: #1c1c1e;
  --text: #f5f5f7;
  --muted: #98989d;
  --line: #3a3a3c;
  --white: #2c2c2e;
  --page-wash:
    radial-gradient(1200px 600px at -10% -10%, rgba(34, 120, 255, 0.14), transparent 50%),
    radial-gradient(900px 420px at 110% 0%, rgba(100, 90, 220, 0.14), transparent 45%);
  --header-bg: rgba(28, 28, 30, 0.88);
  --header-border: rgba(58, 58, 60, 0.9);
  --nav-ink: #e5e5ea;
  --nav-ink-strong: #ffffff;
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
  --surface-1: rgba(33, 34, 38, 0.94);
  --surface-2: rgba(26, 27, 31, 0.96);
  --theme-accent: #69a8ff;
  --theme-accent-strong: #8ec0ff;
  --theme-accent-soft: rgba(105, 168, 255, 0.16);
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.4);

  /* NEW: SEMANTIC TOKEN CONTRACT (dark mode overrides) */
  --text-primary: #f5f5f7;
  --text-secondary: #dddde4;
  --text-muted: #98989d;
  --text-subtle: #b3b3ba;
  --text-inverse: #111111;
  --text-on-accent: #08111d;

  --surface-page: #1c1c1e;
  --surface-page-alt: #16171a;
  --surface-panel: rgba(33, 34, 38, 0.94);
  --surface-panel-alt: rgba(26, 27, 31, 0.96);
  --surface-elevated: #2a2b30;
  --surface-overlay: rgba(20, 21, 24, 0.82);

  --border-subtle: rgba(95, 95, 102, 0.45);
  --border-default: #3a3a3c;
  --border-strong: rgba(120, 120, 128, 0.95);
  --divider: rgba(95, 95, 102, 0.45);

  --accent: #69a8ff;
  --accent-hover: #8ec0ff;
  --accent-active: #b9d7ff;
  --accent-soft: rgba(105, 168, 255, 0.16);
  --accent-strong: #8ec0ff;
  --accent-glow: rgba(105, 168, 255, 0.28);
  --focus-ring: rgba(142, 192, 255, 0.4);

  --shadow-color: rgba(0, 0, 0, 0.45);
  --success: #4dbd87;
  --warning: #e0a84b;
  --danger: #f06a6a;
  --info: #69a8ff;

  /* Module-specific accents (modular synth patch bay) */
  --module-osc: #69a8ff;
  --module-vca: #4dbd87;
  --module-out: #e0a84b;

  /* BACKWARDS COMPAT */
  --bg-default: var(--surface-page);
  --panel-bg: var(--surface-panel);
  --panel-bg-alt: var(--surface-panel-alt);
  --card-bg: var(--surface-elevated);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-muted: var(--text-muted);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --brand: var(--accent);
  --brand-strong: var(--accent-strong);
  --brand-soft: var(--accent-soft);
  --cos-range-accent: #69a8ff;
  --cos-range-accent-strong: #8ec0ff;
}

/* =========================================================
   PHASE 2: FLAVOR THEMES

   Rules:
   1. Use canonical selector: html[data-theme="..."]
   2. Keep legacy alias for migration: html[data-site-theme="..."]
   3. Only override token values, never component styles
   4. Every theme must provide complete token set
   ========================================================= */

/* --------- SAKURA (rewritten: variables only) --------- */

html[data-theme="sakura"],
html[data-site-theme="sakura"] {
  /* Legacy foundation */
  --bg: #fff6f8;
  --text: #341822;
  --muted: #7d5f69;
  --line: #efc6d3;
  --header-bg: rgba(255, 246, 248, 0.9);
  --header-border: rgba(239, 198, 211, 0.92);
  --nav-ink: #9a4160;
  --nav-ink-strong: #6f1f3c;
  --surface-1: rgba(255, 252, 253, 0.95);
  --surface-2: rgba(255, 243, 247, 0.98);
  --theme-accent: #e05a8d;
  --theme-accent-strong: #b83f6e;
  --theme-accent-soft: rgba(224, 90, 141, 0.14);
  --page-wash:
    radial-gradient(980px 520px at 50% 100%, rgba(255, 133, 178, 0.22), transparent 56%),
    radial-gradient(1200px 600px at -10% -10%, rgba(255, 196, 219, 0.3), transparent 52%),
    radial-gradient(900px 420px at 110% 0%, rgba(255, 231, 241, 0.38), transparent 45%);

  /* NEW: SEMANTIC TOKEN CONTRACT */
  --text-primary: #341822;
  --text-secondary: #5d3a48;
  --text-muted: #7d5f69;
  --text-subtle: #9b7d87;
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;

  --surface-page: #fff6f8;
  --surface-page-alt: #fff0f4;
  --surface-panel: rgba(255, 252, 253, 0.95);
  --surface-panel-alt: rgba(255, 243, 247, 0.98);
  --surface-elevated: #fffdfd;
  --surface-overlay: rgba(255, 248, 250, 0.82);

  --border-subtle: rgba(224, 90, 141, 0.18);
  --border-default: rgba(224, 90, 141, 0.28);
  --border-strong: rgba(184, 63, 110, 0.42);
  --divider: rgba(224, 90, 141, 0.18);

  --accent: #e05a8d;
  --accent-hover: #b83f6e;
  --accent-active: #982b56;
  --accent-soft: rgba(224, 90, 141, 0.14);
  --accent-strong: #8b224c;
  --accent-glow: rgba(224, 90, 141, 0.22);
  --focus-ring: rgba(224, 90, 141, 0.36);

  --shadow-color: rgba(224, 90, 141, 0.15);
  --success: #4a8f5f;
  --warning: #c4843a;
  --danger: #d85050;
  --info: #e05a8d;

  /* Module-specific accents (modular synth patch bay) */
  --module-osc: #e05a8d;
  --module-vca: #4a8f5f;
  --module-out: #c4843a;

  /* BACKWARDS COMPAT */
  --bg-default: var(--surface-page);
  --panel-bg: var(--surface-panel);
  --panel-bg-alt: var(--surface-panel-alt);
  --card-bg: var(--surface-elevated);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-muted: var(--text-muted);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --brand: var(--accent);
  --brand-strong: var(--accent-strong);
  --brand-soft: var(--accent-soft);
}

/* --------- CHERRY (already correct, but make explicit) --------- */

html[data-theme="cherry"],
html[data-site-theme="cherry"] {
  --bg: #fff2f4;
  --text: #31141e;
  --muted: #77515f;
  --line: #edc4cf;
  --header-bg: rgba(255, 243, 246, 0.9);
  --header-border: rgba(227, 181, 194, 0.92);
  --nav-ink: #8f294a;
  --nav-ink-strong: #66132e;
  --surface-1: rgba(255, 251, 252, 0.94);
  --surface-2: rgba(255, 241, 244, 0.98);
  --theme-accent: #c61f4d;
  --theme-accent-strong: #990f36;
  --theme-accent-soft: rgba(198, 31, 77, 0.14);
  --page-wash:
    radial-gradient(1200px 600px at -10% -10%, rgba(235, 94, 133, 0.22), transparent 50%),
    radial-gradient(900px 420px at 110% 0%, rgba(255, 196, 212, 0.28), transparent 45%);

  --text-primary: #31141e;
  --text-secondary: #554149;
  --text-muted: #77515f;
  --text-subtle: #956d7d;
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;

  --surface-page: #fff2f4;
  --surface-page-alt: #ffebef;
  --surface-panel: rgba(255, 251, 252, 0.94);
  --surface-panel-alt: rgba(255, 241, 244, 0.98);
  --surface-elevated: #fffcfd;
  --surface-overlay: rgba(255, 245, 248, 0.82);

  --border-subtle: rgba(198, 31, 77, 0.18);
  --border-default: rgba(198, 31, 77, 0.28);
  --border-strong: rgba(153, 15, 54, 0.42);
  --divider: rgba(198, 31, 77, 0.18);

  --accent: #c61f4d;
  --accent-hover: #990f36;
  --accent-active: #7a0827;
  --accent-soft: rgba(198, 31, 77, 0.14);
  --accent-strong: #8b0632;
  --accent-glow: rgba(198, 31, 77, 0.22);
  --focus-ring: rgba(198, 31, 77, 0.36);

  --shadow-color: rgba(198, 31, 77, 0.15);
  --success: #4a8f5f;
  --warning: #c4843a;
  --danger: #d85050;
  --info: #c61f4d;

  /* Module-specific accents (modular synth patch bay) */
  --module-osc: #c61f4d;
  --module-vca: #4a8f5f;
  --module-out: #c4843a;

  --bg-default: var(--surface-page);
  --panel-bg: var(--surface-panel);
  --panel-bg-alt: var(--surface-panel-alt);
  --card-bg: var(--surface-elevated);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-muted: var(--text-muted);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --brand: var(--accent);
  --brand-strong: var(--accent-strong);
  --brand-soft: var(--accent-soft);
}

/* --------- OBSIDIAN (already correct, make explicit) --------- */

html[data-theme="obsidian"],
html[data-site-theme="obsidian"] {
  --bg: #101214;
  --text: #edf0f4;
  --muted: #9aa3ad;
  --line: #2f353c;
  --header-bg: rgba(14, 16, 19, 0.9);
  --header-border: rgba(47, 53, 60, 0.92);
  --nav-ink: #cad1d8;
  --nav-ink-strong: #ffffff;
  --surface-1: rgba(24, 27, 31, 0.94);
  --surface-2: rgba(16, 18, 20, 0.98);
  --theme-accent: #8aa2bb;
  --theme-accent-strong: #b7c9dc;
  --theme-accent-soft: rgba(138, 162, 187, 0.14);
  --page-wash:
    radial-gradient(1200px 600px at -10% -10%, rgba(115, 128, 145, 0.18), transparent 50%),
    radial-gradient(900px 420px at 110% 0%, rgba(61, 70, 81, 0.22), transparent 45%);

  --text-primary: #edf0f4;
  --text-secondary: #d0d4db;
  --text-muted: #9aa3ad;
  --text-subtle: #7d8692;
  --text-inverse: #111111;
  --text-on-accent: #0d1117;

  --surface-page: #101214;
  --surface-page-alt: #0a0c0e;
  --surface-panel: rgba(24, 27, 31, 0.94);
  --surface-panel-alt: rgba(16, 18, 20, 0.98);
  --surface-elevated: #1c2229;
  --surface-overlay: rgba(16, 18, 20, 0.82);

  --border-subtle: rgba(138, 162, 187, 0.2);
  --border-default: rgba(138, 162, 187, 0.28);
  --border-strong: rgba(110, 130, 155, 0.45);
  --divider: rgba(138, 162, 187, 0.2);

  --accent: #8aa2bb;
  --accent-hover: #b7c9dc;
  --accent-active: #c7d5e5;
  --accent-soft: rgba(138, 162, 187, 0.14);
  --accent-strong: #a8b8cc;
  --accent-glow: rgba(138, 162, 187, 0.24);
  --focus-ring: rgba(183, 201, 220, 0.4);

  --shadow-color: rgba(0, 0, 0, 0.5);
  --success: #5fc894;
  --warning: #d9a85f;
  --danger: #e08686;
  --info: #8aa2bb;

  /* Module-specific accents (modular synth patch bay) */
  --module-osc: #8aa2bb;
  --module-vca: #5fc894;
  --module-out: #d9a85f;

  --bg-default: var(--surface-page);
  --panel-bg: var(--surface-panel);
  --panel-bg-alt: var(--surface-panel-alt);
  --card-bg: var(--surface-elevated);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-muted: var(--text-muted);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --brand: var(--accent);
  --brand-strong: var(--accent-strong);
  --brand-soft: var(--accent-soft);
}

/* --------- MAHOGANY (already correct, make explicit) --------- */

html[data-theme="mahogany"],
html[data-site-theme="mahogany"] {
  --bg: #211310;
  --text: #f6eee9;
  --muted: #c4a79a;
  --line: #5a3327;
  --header-bg: rgba(30, 18, 15, 0.9);
  --header-border: rgba(90, 51, 39, 0.94);
  --nav-ink: #e4cbc1;
  --nav-ink-strong: #fff7f2;
  --surface-1: rgba(43, 25, 20, 0.94);
  --surface-2: rgba(30, 18, 15, 0.98);
  --theme-accent: #da845a;
  --theme-accent-strong: #f0a47c;
  --theme-accent-soft: rgba(218, 132, 90, 0.16);
  --page-wash:
    radial-gradient(1200px 600px at -10% -10%, rgba(155, 84, 55, 0.24), transparent 50%),
    radial-gradient(900px 420px at 110% 0%, rgba(88, 45, 29, 0.28), transparent 45%);

  --text-primary: #f6eee9;
  --text-secondary: #ddd2c9;
  --text-muted: #c4a79a;
  --text-subtle: #a68b7f;
  --text-inverse: #111111;
  --text-on-accent: #0d0a07;

  --surface-page: #211310;
  --surface-page-alt: #19110d;
  --surface-panel: rgba(43, 25, 20, 0.94);
  --surface-panel-alt: rgba(30, 18, 15, 0.98);
  --surface-elevated: #352419;
  --surface-overlay: rgba(30, 18, 15, 0.82);

  --border-subtle: rgba(218, 132, 90, 0.2);
  --border-default: rgba(218, 132, 90, 0.3);
  --border-strong: rgba(180, 100, 60, 0.45);
  --divider: rgba(218, 132, 90, 0.2);

  --accent: #da845a;
  --accent-hover: #f0a47c;
  --accent-active: #f5b895;
  --accent-soft: rgba(218, 132, 90, 0.16);
  --accent-strong: #e89a6f;
  --accent-glow: rgba(218, 132, 90, 0.26);
  --focus-ring: rgba(240, 164, 124, 0.42);

  --shadow-color: rgba(0, 0, 0, 0.45);
  --success: #5fc894;
  --warning: #d9a85f;
  --danger: #e08686;
  --info: #da845a;

  /* Module-specific accents (modular synth patch bay) */
  --module-osc: #da845a;
  --module-vca: #5fc894;
  --module-out: #d9a85f;

  --bg-default: var(--surface-page);
  --panel-bg: var(--surface-panel);
  --panel-bg-alt: var(--surface-panel-alt);
  --card-bg: var(--surface-elevated);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-muted: var(--text-muted);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --brand: var(--accent);
  --brand-strong: var(--accent-strong);
  --brand-soft: var(--accent-soft);
}

/* --------- KIWI / EMERALD (already correct, make explicit) --------- */

html[data-theme="kiwi"],
html[data-theme="emerald"],
html[data-site-theme="kiwi"],
html[data-site-theme="emerald"] {
  --bg: #f0fff4;
  --text: #1a3a2a;
  --muted: #4f725c;
  --line: #9ee3b7;
  --header-bg: rgba(251, 255, 252, 0.92);
  --header-border: rgba(56, 155, 101, 0.5);
  --nav-ink: #427053;
  --nav-ink-strong: #1a3a2a;
  --surface-1: rgba(255, 255, 255, 0.96);
  --surface-2: rgba(246, 255, 249, 0.99);
  --theme-accent: #50db82;
  --theme-accent-strong: #389b65;
  --theme-accent-soft: rgba(80, 219, 130, 0.2);
  --page-wash:
    radial-gradient(980px 520px at 50% 100%, rgba(80, 219, 130, 0.22), transparent 56%),
    radial-gradient(1200px 600px at -10% -10%, rgba(169, 255, 209, 0.32), transparent 52%),
    radial-gradient(900px 420px at 110% 0%, rgba(226, 255, 236, 0.4), transparent 45%);

  --text-primary: #1a3a2a;
  --text-secondary: #345844;
  --text-muted: #4f725c;
  --text-subtle: #6a8f7a;
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;

  --surface-page: #f0fff4;
  --surface-page-alt: #e8fbf2;
  --surface-panel: rgba(255, 255, 255, 0.96);
  --surface-panel-alt: rgba(246, 255, 249, 0.99);
  --surface-elevated: #ffffff;
  --surface-overlay: rgba(250, 255, 252, 0.82);

  --border-subtle: rgba(80, 219, 130, 0.18);
  --border-default: rgba(80, 219, 130, 0.28);
  --border-strong: rgba(56, 155, 101, 0.42);
  --divider: rgba(80, 219, 130, 0.18);

  --accent: #50db82;
  --accent-hover: #389b65;
  --accent-active: #276b49;
  --accent-soft: rgba(80, 219, 130, 0.2);
  --accent-strong: #2a8f56;
  --accent-glow: rgba(80, 219, 130, 0.24);
  --focus-ring: rgba(80, 219, 130, 0.38);

  --shadow-color: rgba(80, 219, 130, 0.12);
  --success: #50db82;
  --warning: #c4843a;
  --danger: #d85050;
  --info: #0071e3;

  /* Module-specific accents (modular synth patch bay) */
  --module-osc: #0071e3;
  --module-vca: #50db82;
  --module-out: #c4843a;

  --bg-default: var(--surface-page);
  --panel-bg: var(--surface-panel);
  --panel-bg-alt: var(--surface-panel-alt);
  --card-bg: var(--surface-elevated);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-muted: var(--text-muted);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --brand: var(--accent);
  --brand-strong: var(--accent-strong);
  --brand-soft: var(--accent-soft);
}

/* --------- HONEY (rewritten: variables only) --------- */

html[data-theme="honey"],
html[data-theme="topaz"],
html[data-site-theme="honey"],
html[data-site-theme="topaz"] {
  --bg: #fff9e3;
  --text: #5c3c00;
  --muted: #8a6412;
  --line: #ffd86a;
  --header-bg: rgba(255, 252, 244, 0.92);
  --header-border: rgba(244, 169, 0, 0.56);
  --nav-ink: #8a6200;
  --nav-ink-strong: #5c3c00;
  --surface-1: rgba(255, 255, 255, 0.96);
  --surface-2: rgba(255, 251, 235, 0.99);
  --theme-accent: #ffb900;
  --theme-accent-strong: #f4a900;
  --theme-accent-soft: rgba(244, 169, 0, 0.2);
  --page-wash:
    radial-gradient(980px 520px at 50% 100%, rgba(255, 215, 0, 0.24), transparent 56%),
    radial-gradient(1200px 600px at -10% -10%, rgba(255, 247, 173, 0.32), transparent 52%),
    radial-gradient(900px 420px at 110% 0%, rgba(255, 243, 190, 0.42), transparent 45%);

  --text-primary: #5c3c00;
  --text-secondary: #7a5710;
  --text-muted: #8a6412;
  --text-subtle: #a0771d;
  --text-inverse: #ffffff;
  --text-on-accent: #000000;

  --surface-page: #fff9e3;
  --surface-page-alt: #fff3cc;
  --surface-panel: rgba(255, 255, 255, 0.96);
  --surface-panel-alt: rgba(255, 251, 235, 0.99);
  --surface-elevated: #fffef9;
  --surface-overlay: rgba(255, 254, 245, 0.82);

  --border-subtle: rgba(244, 169, 0, 0.18);
  --border-default: rgba(244, 169, 0, 0.28);
  --border-strong: rgba(212, 134, 0, 0.42);
  --divider: rgba(244, 169, 0, 0.18);

  --accent: #ffb900;
  --accent-hover: #f4a900;
  --accent-active: #d99700;
  --accent-soft: rgba(244, 169, 0, 0.2);
  --accent-strong: #e09800;
  --accent-glow: rgba(244, 169, 0, 0.26);
  --focus-ring: rgba(244, 169, 0, 0.4);

  --shadow-color: rgba(244, 169, 0, 0.14);
  --success: #4a8f5f;
  --warning: #ffb900;
  --danger: #d85050;
  --info: #ffb900;

  /* Module-specific accents (modular synth patch bay) */
  --module-osc: #ffb900;
  --module-vca: #4a8f5f;
  --module-out: #ffb900;

  --bg-default: var(--surface-page);
  --panel-bg: var(--surface-panel);
  --panel-bg-alt: var(--surface-panel-alt);
  --card-bg: var(--surface-elevated);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-muted: var(--text-muted);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --brand: var(--accent);
  --brand-strong: var(--accent-strong);
  --brand-soft: var(--accent-soft);
}

/* --------- VAPORWAVE (rewritten: variables only) --------- */

html[data-theme="vaporwave"],
html[data-site-theme="vaporwave"] {
  --bg: #050505;
  --text: #ffffff;
  --muted: #9ae9f7;
  --line: rgba(255, 0, 255, 0.44);
  --header-bg: rgba(0, 0, 0, 0.9);
  --header-border: rgba(255, 0, 255, 0.66);
  --nav-ink: #8af7ff;
  --nav-ink-strong: #ffffff;
  --surface-1: rgba(0, 0, 0, 0.88);
  --surface-2: rgba(10, 0, 22, 0.96);
  --theme-accent: #ff00ff;
  --theme-accent-strong: #00ffff;
  --theme-accent-soft: rgba(255, 0, 255, 0.22);
  --page-wash:
    radial-gradient(980px 520px at 50% 100%, rgba(255, 255, 0, 0.18), transparent 50%),
    radial-gradient(1200px 600px at -10% -10%, rgba(255, 0, 255, 0.18), transparent 52%),
    radial-gradient(900px 420px at 110% 0%, rgba(0, 255, 255, 0.16), transparent 42%);

  --text-primary: #ffffff;
  --text-secondary: #d9e9ff;
  --text-muted: #9ae9f7;
  --text-subtle: #6dd4e8;
  --text-inverse: #050505;
  --text-on-accent: #000000;

  --surface-page: #050505;
  --surface-page-alt: #0a0a0a;
  --surface-panel: rgba(0, 0, 0, 0.88);
  --surface-panel-alt: rgba(10, 0, 22, 0.96);
  --surface-elevated: #1a0033;
  --surface-overlay: rgba(10, 0, 22, 0.82);

  --border-subtle: rgba(255, 0, 255, 0.2);
  --border-default: rgba(255, 0, 255, 0.44);
  --border-strong: rgba(0, 255, 255, 0.6);
  --divider: rgba(255, 0, 255, 0.2);

  --accent: #ff00ff;
  --accent-hover: #00ffff;
  --accent-active: #00e6ff;
  --accent-soft: rgba(255, 0, 255, 0.22);
  --accent-strong: #00ffff;
  --accent-glow: rgba(255, 0, 255, 0.3);
  --focus-ring: rgba(0, 255, 255, 0.5);

  --shadow-color: rgba(0, 0, 0, 0.8);
  --success: #00ff00;
  --warning: #ffff00;
  --danger: #ff0066;
  --info: #ff00ff;

  /* Module-specific accents (modular synth patch bay) */
  --module-osc: #ff00ff;
  --module-vca: #00ff00;
  --module-out: #ffff00;

  --bg-default: var(--surface-page);
  --panel-bg: var(--surface-panel);
  --panel-bg-alt: var(--surface-panel-alt);
  --card-bg: var(--surface-elevated);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-muted: var(--text-muted);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --brand: var(--accent);
  --brand-strong: var(--accent-strong);
  --brand-soft: var(--accent-soft);
}

/* --------- DIAMOND (rewritten: variables only) --------- */

html[data-theme="diamond"],
html[data-site-theme="diamond"] {
  --bg: #eafcff;
  --text: #12343b;
  --muted: #3d6970;
  --line: rgba(8, 121, 133, 0.22);
  --white: #ffffff;
  --shadow: 0 18px 38px rgba(8, 121, 133, 0.14);
  --header-bg: rgba(247, 254, 255, 0.88);
  --header-border: rgba(8, 121, 133, 0.18);
  --nav-ink: #315e66;
  --nav-ink-strong: #082b32;
  --surface-1: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(238, 253, 255, 0.96);
  --surface-3: rgba(255, 255, 255, 0.98);
  --theme-accent: #087985;
  --theme-accent-strong: #055c66;
  --theme-accent-soft: rgba(96, 232, 240, 0.26);
  --page-wash:
    radial-gradient(920px 520px at 50% -12%, rgba(96, 232, 240, 0.36), transparent 56%),
    radial-gradient(760px 420px at 0% 100%, rgba(196, 246, 250, 0.62), transparent 48%),
    radial-gradient(680px 360px at 100% 12%, rgba(96, 232, 240, 0.28), transparent 42%);

  --text-primary: #12343b;
  --text-secondary: #254f57;
  --text-muted: #3d6970;
  --text-subtle: #5f858c;
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;

  --surface-page: #eafcff;
  --surface-page-alt: #d9f9fc;
  --surface-panel: rgba(255, 255, 255, 0.92);
  --surface-panel-alt: rgba(238, 253, 255, 0.96);
  --surface-elevated: #ffffff;
  --surface-overlay: rgba(247, 254, 255, 0.88);

  --border-subtle: rgba(8, 121, 133, 0.18);
  --border-default: rgba(8, 121, 133, 0.26);
  --border-strong: #087985;
  --divider: rgba(8, 121, 133, 0.18);

  --accent: #087985;
  --accent-hover: #055c66;
  --accent-active: #60e8f0;
  --accent-soft: rgba(96, 232, 240, 0.26);
  --accent-strong: #055c66;
  --accent-glow: rgba(96, 232, 240, 0.32);
  --focus-ring: #087985;

  --shadow-color: rgba(8, 121, 133, 0.14);
  --success: #177245;
  --warning: #8b5a00;
  --danger: #ff7687;
  --info: #7bb7ff;

  /* Module-specific accents (modular synth patch bay) */
  --module-osc: #3da3db;
  --module-vca: #4a8f5f;
  --module-out: #c4843a;

  --bg-default: var(--surface-page);
  --panel-bg: var(--surface-panel);
  --panel-bg-alt: var(--surface-panel-alt);
  --card-bg: var(--surface-elevated);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-muted: var(--text-muted);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --brand: var(--accent);
  --brand-strong: var(--accent-strong);
  --brand-soft: var(--accent-soft);
}

* {
  box-sizing: border-box;
}

input[type="range"] {
  accent-color: var(--cos-range-accent, #0071e3);
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--page-wash), var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
}

html[data-theme="diamond"] body,
html[data-site-theme="diamond"] body {
  background:
    linear-gradient(135deg, rgba(96, 232, 240, 0.22) 0 10%, transparent 10% 20%, rgba(255, 255, 255, 0.44) 20% 30%, transparent 30% 40%),
    linear-gradient(45deg, transparent 0 18%, rgba(8, 121, 133, 0.08) 18% 20%, transparent 20% 46%, rgba(96, 232, 240, 0.18) 46% 50%, transparent 50%),
    var(--page-wash),
    linear-gradient(180deg, #f7feff 0%, #eafcff 48%, #d8f9fc 100%);
  background-size: 96px 96px, 64px 64px, auto, auto;
  background-attachment: fixed, fixed, fixed, fixed;
}

[hidden],
.hidden {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 200;
  background: var(--surface-elevated);
  color: var(--text-primary);
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: saturate(160%) blur(12px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.nav-wrap {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  min-height: 62px;
  padding: 0.45rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  color: var(--nav-ink-strong);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  min-width: 0;
  max-width: min(100%, 28rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.brand-text {
  display: inline;
}

.brand-os {
  color: var(--theme-accent);
  font-style: normal;
}

.brand::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-accent) 52%, white),
    var(--theme-accent-strong)
  );
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--theme-accent-soft) 72%, transparent),
    0 8px 18px color-mix(in srgb, var(--theme-accent) 28%, transparent);
  flex-shrink: 0;
}

.site-nav {
  min-width: 0;
}

.site-nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.38rem;
  list-style: none;
  flex-wrap: wrap;
}

.site-nav ul > li {
  display: flex;
  align-items: center;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.82rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--nav-ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.site-nav a[aria-current="page"] {
  color: var(--nav-ink-strong);
  font-weight: 600;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.3)),
    var(--surface-1);
  border-color: color-mix(in srgb, var(--theme-accent) 28%, rgba(255, 255, 255, 0.88));
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.site-nav a:hover {
  color: var(--nav-ink-strong);
  background: color-mix(in srgb, var(--nav-hover-bg) 88%, rgba(255, 255, 255, 0.44));
  border-color: color-mix(in srgb, var(--line) 72%, rgba(255, 255, 255, 0.36));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

/* ── Topbar (lesson pages) — mirrors .site-header / .nav-wrap / .site-nav ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: saturate(160%) blur(12px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.topbar-inner {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  min-height: 62px;
  padding: 0.45rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.topbar nav {
  display: flex;
  gap: 0.38rem;
  flex-wrap: wrap;
  align-items: center;
}

.topbar nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.82rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--nav-ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.topbar nav a[aria-current="page"] {
  color: var(--nav-ink-strong);
  font-weight: 600;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.3)),
    var(--surface-1);
  border-color: color-mix(in srgb, var(--theme-accent) 28%, rgba(255, 255, 255, 0.88));
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.topbar nav a:hover {
  color: var(--nav-ink-strong);
  background: color-mix(in srgb, var(--nav-hover-bg) 88%, rgba(255, 255, 255, 0.44));
  border-color: color-mix(in srgb, var(--line) 72%, rgba(255, 255, 255, 0.36));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

/* ── Hamburger toggle (hidden at desktop widths) ─────────────────────────── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0.46rem;
  color: var(--nav-ink);
  border-radius: 999px;
  line-height: 1;
  margin-left: auto;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-toggle:hover {
  background: color-mix(in srgb, var(--nav-hover-bg) 88%, rgba(255, 255, 255, 0.44));
  border-color: color-mix(in srgb, var(--line) 72%, rgba(255, 255, 255, 0.36));
  color: var(--nav-ink-strong);
  transform: translateY(-1px);
}

.nav-settings {
  position: relative;
}

.nav-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
  min-height: 2.35rem;
  padding: 0.36rem 0.46rem 0.36rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--line) 70%, rgba(255, 255, 255, 0.88));
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.24)),
    var(--surface-1);
  color: var(--nav-ink-strong);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    0 18px 42px rgba(19, 28, 22, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.nav-settings-toggle:hover,
.nav-settings.is-open .nav-settings-toggle {
  border-color: color-mix(in srgb, var(--theme-accent) 42%, rgba(255, 255, 255, 0.76));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.28)),
    var(--surface-2);
}

.nav-settings-toggle svg {
  pointer-events: none;
  opacity: 0.8;
}

.nav-toggle svg {
  pointer-events: none;
}

.nav-settings-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  padding: 0.16rem 0.54rem;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--theme-accent) 24%, rgba(255, 255, 255, 0.8)),
      color-mix(in srgb, var(--theme-accent) 38%, rgba(255, 255, 255, 0.18))
    );
  color: var(--theme-accent-strong);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-settings-panel {
  position: absolute;
  top: calc(100% + 0.72rem);
  right: 0;
  width: min(440px, calc(100vw - 2rem));
  max-height: min(82vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--line) 68%, rgba(255, 255, 255, 0.88));
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent) 18%, rgba(255, 255, 255, 0.72)), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24)),
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
  box-shadow:
    0 30px 84px rgba(19, 28, 22, 0.18),
    0 14px 36px rgba(82, 97, 84, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  backdrop-filter: blur(24px) saturate(155%);
  z-index: 160;
}

.nav-settings-head {
  display: grid;
  gap: 0.34rem;
  margin-bottom: 0.9rem;
}

.nav-settings-eyebrow,
.nav-settings-current {
  margin: 0;
}

.nav-settings-eyebrow {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-settings-current {
  margin-top: 0.18rem;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.42rem;
  line-height: 1.02;
  font-weight: 650;
}

.nav-settings-note {
  margin: 0 0 0.95rem;
  color: var(--muted);
  font-size: 0.81rem;
  line-height: 1.55;
}

.nav-settings-section {
  display: grid;
  gap: 0.78rem;
}

.nav-settings-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.72rem;
  padding: 0.28rem;
  border: 1px solid color-mix(in srgb, var(--line) 62%, rgba(255, 255, 255, 0.76));
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

.nav-mode-pill {
  border: none;
  border-radius: 16px;
  padding: 0.72rem 0.8rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.nav-mode-pill:hover {
  transform: translateY(-1px);
  color: var(--text);
}

.nav-mode-pill.is-active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.54)),
    color-mix(in srgb, var(--theme-accent) 16%, rgba(255, 255, 255, 0.9));
  color: var(--theme-accent-strong);
  box-shadow:
    0 10px 24px rgba(12, 24, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.nav-tone-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
  margin-bottom: 0.98rem;
}

.nav-tone-pill {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-height: 3.2rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--line) 66%, rgba(255, 255, 255, 0.82));
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.34);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.nav-tone-pill:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--theme-accent) 34%, rgba(255, 255, 255, 0.84));
}

.nav-tone-pill.is-active {
  border-color: color-mix(in srgb, var(--theme-accent) 44%, rgba(255, 255, 255, 0.88));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 20%, rgba(255, 255, 255, 0.66)), rgba(255, 255, 255, 0.24)),
    rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.nav-tone-pill.is-muted {
  opacity: 0.64;
}

.nav-tone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--theme-accent-strong);
  font-size: 1rem;
  font-weight: 700;
}

.nav-tone-copy {
  font-size: 0.9rem;
  font-weight: 700;
}

.nav-theme-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.68rem;
}

.nav-theme-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.88rem;
  min-height: 4.35rem;
  padding: 0.92rem 0.96rem;
  border: 1px solid color-mix(in srgb, var(--line) 66%, rgba(255, 255, 255, 0.82));
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.24)),
    rgba(255, 255, 255, 0.22);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
}

.nav-theme-chip:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--theme-accent) 38%, rgba(255, 255, 255, 0.8));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.28)),
    rgba(255, 255, 255, 0.28);
}

.nav-theme-chip.is-active {
  border-color: color-mix(in srgb, var(--theme-accent) 44%, rgba(255, 255, 255, 0.8));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--theme-accent) 24%, rgba(255, 255, 255, 0.76)),
      color-mix(in srgb, var(--theme-accent) 14%, rgba(255, 255, 255, 0.22))
    ),
    rgba(255, 255, 255, 0.42);
  box-shadow:
    0 14px 32px color-mix(in srgb, var(--theme-accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.nav-theme-chip.is-muted {
  opacity: 0.62;
}

.nav-theme-label {
  display: grid;
  gap: 0.18rem;
  text-align: left;
}

.nav-theme-label strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.08;
}

.nav-theme-label small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.nav-theme-swatch {
  width: 2.7rem;
  height: 1.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  flex-shrink: 0;
}

.nav-theme-chip[data-theme="day"] .nav-theme-swatch   { background: linear-gradient(135deg, #dff1ff, #6eb6ff); }
.nav-theme-chip[data-theme="night"] .nav-theme-swatch { background: linear-gradient(135deg, #445c93, #111827); }
.nav-theme-chip[data-theme="sakura"] .nav-theme-swatch { background: linear-gradient(135deg, #fff7fb, #ff85b2); }
.nav-theme-chip[data-theme="diamond"] .nav-theme-swatch { background: linear-gradient(135deg, #091224, #00c6ff); }
.nav-theme-chip[data-theme="emerald"] .nav-theme-swatch { background: linear-gradient(135deg, #f4fff7, #50db82); }
.nav-theme-chip[data-theme="topaz"] .nav-theme-swatch { background: linear-gradient(135deg, #fff9e3, #ffb900); }
.nav-theme-chip[data-theme="vaporwave"] .nav-theme-swatch { background: linear-gradient(135deg, #050505 12%, #ff00ff 52%, #00ffff 100%); }

/* ── Mobile nav (≤ 680 px) ───────────────────────────────────────────────── */
@media (max-width: 680px) {
  .nav-toggle {
    display: flex;
  }

  /* Allow header row to wrap so collapsed nav appears below brand + toggle */
  .nav-wrap,
  .topbar-inner {
    flex-wrap: wrap;
  }

  .brand {
    max-width: calc(100% - 4.75rem);
    font-size: 0.92rem;
  }

  /* site-header pattern: collapse .site-nav */
  .site-nav {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    width: 100%;
    order: 3;
    transition: max-height 0.28s ease, opacity 0.2s ease;
  }

  .site-nav.is-open {
    max-height: min(1800px, 90vh);
    opacity: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: 0.7rem;
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--line) 72%, rgba(255, 255, 255, 0.72));
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28)),
      linear-gradient(180deg, var(--surface-1), var(--surface-2));
    box-shadow:
      0 22px 52px rgba(15, 23, 42, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .site-nav a {
    display: block;
    padding: 0.72rem 0.88rem;
    font-size: 0.95rem;
    border-bottom: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: none;
    transform: none;
  }

  .site-nav ul li:last-child a {
    border-bottom: none;
  }

  .site-nav ul li.nav-settings,
  .topbar nav .nav-settings {
    width: 100%;
  }

  .nav-settings-toggle {
    width: 100%;
    justify-content: space-between;
    margin-top: 0.45rem;
  }

  .nav-settings-panel {
    position: static;
    width: 100%;
    margin-top: 0.6rem;
  }

  /* topbar pattern: collapse nav */
  .topbar nav {
    display: flex;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    width: 100%;
    order: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    transition: max-height 0.28s ease, opacity 0.2s ease;
  }

  .topbar nav.is-open {
    max-height: 960px;
    opacity: 1;
    overflow: visible;
    margin-top: 0.7rem;
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--line) 72%, rgba(255, 255, 255, 0.72));
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28)),
      linear-gradient(180deg, var(--surface-1), var(--surface-2));
    box-shadow:
      0 22px 52px rgba(15, 23, 42, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  .topbar nav a {
    display: block;
    padding: 0.72rem 0.88rem;
    font-size: 0.95rem;
    border-bottom: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: none;
    transform: none;
    width: 100%;
  }

  .topbar nav a:last-child {
    border-bottom: none;
  }
}

main,
.site-footer {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

main {
  padding: 2.2rem 0 1.2rem;
}

.hero {
  text-align: center;
  padding: 1rem 0 2.2rem;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

h1 {
  margin: 0.55rem auto 0.8rem;
  font-size: clamp(2rem, 5vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 22ch;
}

.hero > p:last-of-type {
  margin: 0 auto;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.02rem;
}

.home-weather-card-container {
  width: fit-content;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.6rem auto 0;
}

.home-weather-card {
  position: relative;
  width: 220px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 20px 10px;
  border-radius: 18px;
  backdrop-filter: blur(30px);
  background:
    linear-gradient(180deg, rgba(54, 73, 77, 0.34), rgba(28, 39, 42, 0.28)),
    rgba(65, 65, 65, 0.308);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 18px 44px rgba(18, 31, 35, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.home-hero-banner {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
}

.section-banner {
  --banner-size: min(250px, 62vw);
  height: var(--banner-size);
  width: var(--banner-size);
  position: relative;
  transition: left 0.3s linear;
  background: url("data:image/jpeg;base64,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");
  background-size: cover;
  background-position: left;
  border-radius: 50%;
  animation: earthRotate 30s linear infinite;
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.2),
    -5px 0 8px #c3f4ff inset,
    15px 2px 25px #000 inset,
    -24px -2px 34px #c3f4ff99 inset,
    250px 0 44px #00000066 inset,
    150px 0 38px #000000aa inset;
}

@keyframes earthRotate {
  0% { background-position: 0 0; }
  100% { background-position: 400px 0; }
}

@keyframes twinkling {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 1; }
}

.section-banner-star {
  position: absolute;
}

.section-banner-star--1 {
  left: -20px;
  animation: twinkling 3s infinite;
}

.section-banner-star--2 {
  left: -40px;
  top: 30px;
  animation: twinkling 2s infinite;
}

.section-banner-star--3 {
  left: 350px;
  top: 90px;
  animation: twinkling 4s infinite;
}

.section-banner-star--4 {
  left: 200px;
  top: 290px;
  animation: twinkling 3s infinite;
}

.section-banner-star--5 {
  left: 50px;
  top: 270px;
  animation: twinkling 1.5s infinite;
}

.section-banner-star--6 {
  left: 250px;
  top: -50px;
  animation: twinkling 4s infinite;
}

.section-banner-star--7 {
  left: 290px;
  top: 60px;
  animation: twinkling 2s infinite;
}

@media (max-width: 700px) {
  .section-banner {
    --banner-size: min(220px, 66vw);
  }

  .section-banner-star--3 {
    left: calc(var(--banner-size) + 16px);
    top: 72px;
  }

  .section-banner-star--4 {
    left: calc(var(--banner-size) * 0.72);
    top: calc(var(--banner-size) + 28px);
  }

  .section-banner-star--5 {
    left: 36px;
    top: calc(var(--banner-size) + 12px);
  }

  .section-banner-star--6 {
    left: calc(var(--banner-size) * 0.92);
    top: -34px;
  }

  .section-banner-star--7 {
    left: calc(var(--banner-size) * 1.08);
    top: 52px;
  }
}

.home-weather-city {
  margin: 0;
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 1.2px;
  color: white;
}

.home-weather-condition {
  margin: 0;
  font-weight: 500;
  font-size: 0.7em;
  letter-spacing: 1.2px;
  color: rgb(197, 197, 197);
}

.home-weather-icon {
  display: block;
}

.home-weather-temp {
  margin: 0;
  font-size: 1.8em;
  color: white;
}

.home-weather-minmax {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-weather-min,
.home-weather-max {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  gap: 4px;
}

.home-weather-min {
  align-items: flex-end;
}

.home-weather-max {
  align-items: flex-start;
  border-left: 2px solid rgba(255, 255, 255, 0.9);
}

.home-weather-label {
  margin: 0;
  font-size: 0.7em;
  font-weight: 600;
  color: white;
}

.home-weather-value {
  margin: 0;
  font-size: 0.6em;
  font-weight: 500;
  color: rgb(197, 197, 197);
}

.home-weather-card-container::before {
  width: 100px;
  height: 100px;
  content: "";
  position: absolute;
  background-color: rgb(144, 161, 255);
  z-index: -1;
  border-radius: 50%;
  left: 100px;
  top: 50px;
  transition: all 1s;
}

.home-weather-card-container:hover::before {
  transform: translate(-50px, 50px);
}

.section {
  margin-bottom: 1.1rem;
}

.section-head h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.section-head p {
  margin: 0.25rem 0 0.95rem;
  color: var(--muted);
}

.activity-shell {
  --activity-shell-min-height: clamp(520px, calc(100dvh - 14rem), 760px);
}

.activity-shell__head {
  display: grid;
  gap: 0.72rem;
}

.activity-shell__body {
  min-height: var(--activity-shell-min-height);
  display: grid;
  gap: 0.82rem;
  align-items: stretch;
}

.activity-shell__stage,
.activity-shell__side {
  min-height: 0;
}

.activity-shell__side {
  display: grid;
  gap: 0.72rem;
  align-content: start;
}

.activity-tabs {
  display: none;
}

.activity-tab-stack {
  display: grid;
  gap: 0.72rem;
  min-height: 0;
  align-content: start;
}

.activity-tab-panel {
  display: grid;
  gap: 0.72rem;
  min-height: 0;
  align-content: start;
}

.activity-tab-panel[hidden] {
  display: none !important;
}

.activity-tab {
  min-height: 2.65rem;
  border: 1px solid #c6d5e3;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #23486e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.activity-tab.is-active {
  background: linear-gradient(180deg, #e8f2ff 0%, #f8fbff 100%);
  border-color: #7fa6d3;
  box-shadow: 0 12px 24px rgba(45, 97, 151, 0.12);
}

.activity-tab:hover {
  transform: translateY(-1px);
}

.activity-tab:focus-visible {
  outline: 3px solid rgba(0, 113, 227, 0.28);
  outline-offset: 2px;
}

.tile-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tile {
  min-height: 200px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid rgba(210, 210, 215, 0.66);
  box-shadow: var(--shadow);
  padding: 1.1rem;
  color: #111;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
}

.card,
.card-shell {
  --card-radius: clamp(16px, 1.8vw, 24px);
  --card-padding: 1rem;
  --card-border: rgba(210, 210, 215, 0.66);
  --card-background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  --card-shadow-rest: 0 10px 24px rgba(15, 23, 42, 0.06);
  --card-shadow-hover: 0 16px 32px rgba(15, 23, 42, 0.11);
  position: relative;
  min-width: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-background);
  box-shadow: var(--card-shadow-rest);
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

a.card-shell,
button.card-shell {
  color: inherit;
  text-decoration: none;
}

.card:hover,
.card-shell:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

.card-shell--border {
  border-color: color-mix(in srgb, var(--card-border) 88%, var(--theme-accent-soft));
}

.card-shell--featured {
  display: grid;
  gap: 0;
}

@media (min-width: 1024px) {
  .card-shell--featured {
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
  }

  .card-shell--featured.card-shell--reverse {
    grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.08fr);
  }

  .card-shell--featured.card-shell--reverse > .card-media {
    order: 2;
  }

  .card-shell--featured.card-shell--reverse > .card-body {
    order: 1;
  }
}

.card-media {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-2) 92%, white);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body {
  padding: var(--card-padding);
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.card-kicker {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.card-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.2rem;
}

.tile-fallback {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.tile-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, transparent 42%),
    radial-gradient(circle at 18% 18%, var(--tile-fallback-accent, rgba(255, 255, 255, 0.2)), transparent 34%),
    radial-gradient(circle at 84% 78%, var(--tile-fallback-glow, rgba(255, 255, 255, 0.14)), transparent 38%),
    linear-gradient(180deg, rgba(7, 10, 18, 0.16) 0%, rgba(7, 10, 18, 0.86) 100%),
    var(--tile-fallback-bg, linear-gradient(135deg, #263245 0%, #131926 100%));
  pointer-events: none;
}

.tile-fallback::after {
  content: "";
  position: absolute;
  inset: auto 1rem 1rem auto;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
  opacity: 0.38;
  transform: rotate(18deg);
  pointer-events: none;
}

.tile-fallback > * {
  position: relative;
  z-index: 1;
}

.tile-fallback .tile-kicker {
  color: var(--tile-fallback-kicker, rgba(224, 235, 255, 0.9));
  font-weight: 700;
}

.tile-fallback strong {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.56);
}

.tile-fallback small {
  color: var(--tile-fallback-copy, rgba(232, 238, 248, 0.82));
}

.cs-tile-grid .tile-fallback {
  --tile-fallback-bg: linear-gradient(135deg, #15274f 0%, #0a1530 54%, #13264c 100%);
  --tile-fallback-accent: rgba(76, 139, 255, 0.34);
  --tile-fallback-glow: rgba(112, 199, 255, 0.2);
  --tile-fallback-kicker: #cfe0ff;
  --tile-fallback-copy: rgba(224, 233, 248, 0.84);
}

.space-tile-grid .tile-fallback {
  --tile-fallback-bg: linear-gradient(135deg, #180b33 0%, #090514 56%, #15244d 100%);
  --tile-fallback-accent: rgba(160, 110, 255, 0.34);
  --tile-fallback-glow: rgba(96, 176, 255, 0.18);
  --tile-fallback-kicker: #e1d7ff;
  --tile-fallback-copy: rgba(227, 232, 248, 0.82);
}

.chemistry-tile-grid .tile-fallback {
  --tile-fallback-bg: linear-gradient(135deg, #17330f 0%, #0d1e0b 52%, #30460e 100%);
  --tile-fallback-accent: rgba(158, 255, 120, 0.26);
  --tile-fallback-glow: rgba(255, 217, 72, 0.18);
  --tile-fallback-kicker: #d8f7be;
  --tile-fallback-copy: rgba(233, 242, 219, 0.82);
}

.physics-tile-grid .tile-fallback {
  --tile-fallback-bg: linear-gradient(135deg, #351302 0%, #180802 52%, #48210b 100%);
  --tile-fallback-accent: rgba(255, 149, 0, 0.34);
  --tile-fallback-glow: rgba(255, 92, 62, 0.18);
  --tile-fallback-kicker: #ffd4a6;
  --tile-fallback-copy: rgba(248, 227, 212, 0.82);
}

.systems-tile-grid .tile-fallback {
  --tile-fallback-bg: linear-gradient(135deg, #0f2528 0%, #081216 52%, #14403c 100%);
  --tile-fallback-accent: rgba(46, 212, 191, 0.26);
  --tile-fallback-glow: rgba(135, 240, 207, 0.18);
  --tile-fallback-kicker: #bdf4df;
  --tile-fallback-copy: rgba(220, 242, 235, 0.82);
}

/* ── Physics Additions ── */
.physics-newton-tile, .physics-archimedes-tile, .physics-prism-tile, .physics-pendulum-tile, .physics-motion-tile, .physics-coulomb-tile, .physics-coil-tile, .physics-faraday-law-tile, .physics-vande-tile, .physics-crt-tile {
  position: relative; overflow: hidden;
  background: linear-gradient(170deg, rgba(26,8,0,0.05) 0%, rgba(26,8,0,0.88) 100%), radial-gradient(circle at 80% 20%, rgba(255,100,50,0.15), transparent 40%), #1a0800;
  border: 1px solid rgba(255,149,0,0.24); color: #fff;
}
.physics-newton-tile::before { content: 'F=ma'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; font-weight: 900; opacity: 0.04; pointer-events: none; }
.physics-archimedes-tile::before { content: 'ρ'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.physics-prism-tile::before { content: 'λ'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.physics-pendulum-tile::before { content: 'T'; position: absolute; top: 50%; right: 10%; transform: translateY(-50%); font-size: 6rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.physics-motion-tile::before { content: 'x,y,z'; position: absolute; bottom: 10%; right: 10%; font-size: 3rem; font-weight: 900; opacity: 0.05; pointer-events: none; }
.physics-coulomb-tile::before { content: 'q₁q₂'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; font-weight: 900; opacity: 0.04; pointer-events: none; }
.physics-coil-tile::before { content: 'Φ'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.physics-faraday-law-tile::before { content: 'ε'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.physics-vande-tile::before { content: 'V'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.physics-crt-tile::before { content: 'e⁻'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; font-weight: 900; opacity: 0.05; pointer-events: none; }

.physics-newton-tile > *, .physics-archimedes-tile > *, .physics-prism-tile > *, .physics-pendulum-tile > *, .physics-motion-tile > *, .physics-coulomb-tile > *, .physics-coil-tile > *, .physics-faraday-law-tile > *, .physics-vande-tile > *, .physics-crt-tile > * { position: relative; z-index: 1; }
.physics-newton-tile .tile-kicker, .physics-archimedes-tile .tile-kicker, .physics-prism-tile .tile-kicker, .physics-pendulum-tile .tile-kicker, .physics-motion-tile .tile-kicker, .physics-coulomb-tile .tile-kicker, .physics-coil-tile .tile-kicker, .physics-faraday-law-tile .tile-kicker, .physics-vande-tile .tile-kicker, .physics-crt-tile .tile-kicker { color: rgba(255,200,100,0.85); font-weight: 700; }
.physics-newton-tile strong, .physics-archimedes-tile strong, .physics-prism-tile strong, .physics-pendulum-tile strong, .physics-motion-tile strong, .physics-coulomb-tile strong, .physics-coil-tile strong, .physics-faraday-law-tile strong, .physics-vande-tile strong, .physics-crt-tile strong { color: #fff; }
.physics-newton-tile small, .physics-archimedes-tile small, .physics-prism-tile small, .physics-pendulum-tile small, .physics-motion-tile small, .physics-coulomb-tile small, .physics-coil-tile small, .physics-faraday-law-tile small, .physics-vande-tile small, .physics-crt-tile small { color: rgba(255,255,255,0.62); }
.physics-newton-tile:hover, .physics-archimedes-tile:hover, .physics-prism-tile:hover, .physics-pendulum-tile:hover, .physics-motion-tile:hover, .physics-coulomb-tile:hover, .physics-coil-tile:hover, .physics-faraday-law-tile:hover, .physics-vande-tile:hover, .physics-crt-tile:hover { border-color: rgba(255,149,0,0.6); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,149,0,0.22); }

/* ── Math Additions ── */
.math-clocks-tile, .math-rubiks-tile, .math-length-tile { position: relative; overflow: hidden; background: linear-gradient(170deg, rgba(26,12,0,0.04) 0%, rgba(26,12,0,0.88) 100%), radial-gradient(circle at 18% 22%, rgba(255,149,0,0.25), transparent 38%), #1a0c00; border: 1px solid rgba(255,149,0,0.28); color: #fff; }
.math-clocks-tile::before { content: '◷'; position: absolute; top: 50%; right: 10%; transform: translateY(-50%); font-size: 7rem; opacity: 0.05; pointer-events: none; }
.math-rubiks-tile::before { content: 'G'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; opacity: 0.04; pointer-events: none; }
.math-length-tile::before { content: '10ⁿ'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; font-weight: 900; opacity: 0.04; pointer-events: none; }
.math-clocks-tile > *, .math-rubiks-tile > *, .math-length-tile > * { position: relative; z-index: 1; }
.math-clocks-tile .tile-kicker, .math-rubiks-tile .tile-kicker, .math-length-tile .tile-kicker { color: rgba(255,190,90,0.9); font-weight: 700; }
.math-clocks-tile strong, .math-rubiks-tile strong, .math-length-tile strong { color: #fff; }
.math-clocks-tile small, .math-rubiks-tile small, .math-length-tile small { color: rgba(255,255,255,0.62); }
.math-clocks-tile:hover, .math-rubiks-tile:hover, .math-length-tile:hover { border-color: rgba(255,149,0,0.65); box-shadow: 0 12px 38px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,149,0,0.22); }

.tile-coming-soon {
  min-height: 120px;
  opacity: 0.55;
  border-style: dashed;
  cursor: default;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.tile-coming-soon:hover {
  transform: none;
  box-shadow: var(--shadow);
}

.tile-hero {
  grid-column: 1 / -1;
  min-height: 320px;
  background:
    radial-gradient(900px 380px at -10% 0%, rgba(0, 113, 227, 0.22), transparent 60%),
    radial-gradient(800px 300px at 110% 100%, rgba(0, 113, 227, 0.18), transparent 60%),
    #fff;
}

.life-lab-tile {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.7) 100%),
    url("../thumbs/life-lab-thumb.svg") center 52% / cover no-repeat,
    #000;
}

.life-lab-tile .tile-kicker {
  color: #eaf2ff;
}

.life-lab-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.life-lab-tile small {
  color: #d8dbe0;
}

.eliza-tile {
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.24) 0%, rgba(5, 8, 12, 0.78) 100%),
    url("../thumbs/eliza-thumb.svg") center 48% / cover no-repeat,
    #1a2026;
}

.eliza-tile .tile-kicker {
  color: #dff1ff;
}

.eliza-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.66);
}

.eliza-tile small {
  color: #d5dee8;
}

.origins-tile {
  background:
    linear-gradient(180deg, rgba(10, 11, 16, 0.2) 0%, rgba(10, 11, 16, 0.78) 100%),
    radial-gradient(120% 80% at 10% 12%, rgba(214, 164, 88, 0.45), transparent 58%),
    radial-gradient(130% 76% at 86% 88%, rgba(70, 110, 178, 0.4), transparent 60%),
    #161b27;
}

.origins-tile .tile-kicker {
  color: #efe2c4;
}

.origins-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.62);
}

.origins-tile small {
  color: #dde4ef;
}

.turing-tile {
  background:
    linear-gradient(180deg, rgba(7, 9, 14, 0.22) 0%, rgba(7, 9, 14, 0.76) 100%),
    radial-gradient(120% 78% at 72% 14%, rgba(88, 146, 255, 0.4), transparent 60%),
    radial-gradient(110% 80% at 20% 90%, rgba(97, 222, 224, 0.32), transparent 66%),
    #101725;
}

.turing-tile .tile-kicker {
  color: #d8ebff;
}

.turing-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.62);
}

.turing-tile small {
  color: #d5deea;
}

.lessons-home-tile {
  position: relative;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0f0f10;
  color: #fff;
}

.lessons-home-thumb {
  position: absolute;
  inset: 0;
  display: block;
}

.lessons-home-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% center;
}

.thumb {
  object-fit: cover;
}

.thumb.thumb--einstein {
  object-position: left top;
}

.lessons-home-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.lessons-home-copy {
  position: relative;
  z-index: 1;
  min-height: 320px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
}

.lessons-home-tile .tile-kicker {
  color: #dbe9ff;
}

.lessons-home-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.58);
}

.lessons-home-tile small {
  color: #e2e4e8;
}

.perceptron-tile {
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.16) 0%, rgba(5, 8, 12, 0.74) 100%),
    url("../thumbs/perceptron-lab.jpeg") 50% 32% / cover no-repeat,
    #161a1f;
}

.perceptron-tile .tile-kicker {
  color: #c9e5ff;
}

.perceptron-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.58);
}

.perceptron-tile small {
  color: #f2f2f7;
}

.minimax-tile {
  background:
    linear-gradient(180deg, rgba(6, 9, 16, 0.2) 0%, rgba(6, 9, 16, 0.78) 100%),
    url("../thumbs/minimax-thumb.svg") center 46% / cover no-repeat,
    #1b1f24;
}

.minimax-tile .tile-kicker {
  color: #dce6ff;
}

.minimax-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.62);
}

.minimax-tile small {
  color: #dde4ef;
}

.chess-tile {
  background:
    linear-gradient(180deg, rgba(8, 10, 12, 0.22) 0%, rgba(8, 10, 12, 0.78) 100%),
    url("../thumbs/chess-ai-thumb.png") center 44% / cover no-repeat,
    #1b1f24;
}

.chess-tile .tile-kicker {
  color: #e7edf7;
}

.chess-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.62);
}

.chess-tile small {
  color: #dce2ea;
}

.astar-tile {
  background:
    linear-gradient(180deg, rgba(7, 10, 16, 0.16) 0%, rgba(7, 10, 16, 0.76) 100%),
    url("../thumbs/astar-thumb.svg") center 44% / contain no-repeat,
    #1a1f26;
}

.astar-tile .tile-kicker {
  color: #d8e8ff;
}

.astar-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.58);
}

.astar-tile small {
  color: #e2e7ef;
}

.expert-system-tile {
  background:
    linear-gradient(180deg, rgba(20, 18, 10, 0.2) 0%, rgba(20, 18, 10, 0.78) 100%),
    url("../thumbs/expert-systems-thumb.jpg") center 28% / cover no-repeat,
    #1b1f24;
}

.expert-system-tile .tile-kicker {
  color: #f1e7c3;
}

.expert-system-tile strong {
  color: #fffef6;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.56);
}

.expert-system-tile small {
  color: #ece5d3;
}

.showcase-tile {
  background:
    linear-gradient(180deg, rgba(8, 11, 16, 0.2) 0%, rgba(8, 11, 16, 0.76) 100%),
    url("../thumbs/showcase/student-showcase-thumb.png") center / cover no-repeat,
    #1a1f26;
}

.showcase-tile .tile-kicker {
  color: #d9e9ff;
}

.showcase-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.58);
}

.showcase-tile small {
  color: #e6e9ee;
}

.panel-pledge {
  background:
    linear-gradient(180deg, rgba(7, 10, 16, 0.22) 0%, rgba(7, 10, 16, 0.78) 100%),
    url("../thumbs/pledge-thumb.jpg") center 42% / cover no-repeat,
    #19202b;
}

.panel-pledge .tile-kicker {
  color: #d4e7ff;
}

.panel-pledge strong {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.panel-pledge small {
  color: #dde2ec;
}

.music-lab-tile {
  background:
    linear-gradient(180deg, rgba(14, 11, 7, 0.2) 0%, rgba(14, 11, 7, 0.76) 100%),
    url("../thumbs/music-lab-thumb.png") center 46% / cover no-repeat,
    #262018;
}

.music-lab-tile .tile-kicker {
  color: #f8e5c3;
}

.music-lab-tile strong {
  color: #fffef9;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52);
}

.music-lab-tile small {
  color: #efe3d1;
}

/* ── Quizzes tile ─────────────────────────────── */

.quizzes-tile {
  background:
    linear-gradient(180deg, rgba(16, 9, 23, 0.2) 0%, rgba(16, 9, 23, 0.76) 100%),
    linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
}

.quizzes-tile .tile-kicker {
  color: #e9d5ff;
}

.quizzes-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52);
}

.quizzes-tile small {
  color: #ddd6fe;
}

.applications-tile {
  background:
    linear-gradient(180deg, rgba(8, 14, 23, 0.2) 0%, rgba(8, 14, 23, 0.78) 100%),
    url("../thumbs/applications-thumb.png") center / cover no-repeat,
    #121c2b;
}

.applications-tile .tile-kicker {
  color: #d2eaff;
}

.applications-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.applications-tile small {
  color: #e2edf8;
}

/* ── Space Science Additions ── */
.space-helio-tile, .arecibo-tile, .space-planetary-tile { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(8,8,28,0.12) 0%, rgba(8,8,28,0.92) 100%), radial-gradient(circle at 22% 28%, rgba(88,86,214,0.35), transparent 38%), #08081c; border: 1px solid rgba(88,86,214,0.28); color: #fff; }
.space-helio-tile::before { content: '☉'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; opacity: 0.05; pointer-events: none; }
.arecibo-tile::before { content: '010'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; font-weight: 900; opacity: 0.05; pointer-events: none; }
.space-planetary-tile::before { content: '♄'; position: absolute; top: 50%; right: 10%; transform: translateY(-50%); font-size: 7rem; opacity: 0.05; pointer-events: none; }
.space-helio-tile > *, .arecibo-tile > *, .space-planetary-tile > * { position: relative; z-index: 1; }
.space-helio-tile .tile-kicker, .arecibo-tile .tile-kicker, .space-planetary-tile .tile-kicker { color: rgba(160,140,255,0.9); font-weight: 700; }
.space-helio-tile strong, .arecibo-tile strong, .space-planetary-tile strong { color: #fff; }
.space-helio-tile small, .arecibo-tile small, .space-planetary-tile small { color: rgba(220,215,255,0.72); }
.space-helio-tile:hover, .arecibo-tile:hover, .space-planetary-tile:hover { border-color: rgba(88,86,214,0.6); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(88,86,214,0.22); }

/* ── Systems Thinking Additions ── */
.systems-cave-tile, .systems-babel-tile, .systems-copyright-tile { position: relative; overflow: hidden; background: linear-gradient(160deg, #061812 0%, #0d2a1e 100%); border: 1px solid rgba(16, 185, 129, 0.22); color: #fff; }
.systems-cave-tile::before { content: '👁'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 6rem; opacity: 0.03; pointer-events: none; }
.systems-babel-tile::before { content: 'A'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; font-family: serif; opacity: 0.03; pointer-events: none; }
.systems-copyright-tile::before { content: '©'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; opacity: 0.03; pointer-events: none; }
.systems-cave-tile > *, .systems-babel-tile > *, .systems-copyright-tile > * { position: relative; z-index: 1; }
.systems-cave-tile .tile-kicker, .systems-babel-tile .tile-kicker, .systems-copyright-tile .tile-kicker { color: #6ee7b7; font-weight: 700; }
.systems-cave-tile strong, .systems-babel-tile strong, .systems-copyright-tile strong { color: #fff; }
.systems-cave-tile small, .systems-babel-tile small, .systems-copyright-tile small { color: #a7f3d0; }
.systems-cave-tile:hover, .systems-babel-tile:hover, .systems-copyright-tile:hover { border-color: rgba(16, 185, 129, 0.6); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(16, 185, 129, 0.22); }

/* ── Computer Science Additions ── */
.cs-ngram-tile, .cs-blocks-tile, .cs-sorting-tile, .cs-automata-tile, .cs-mst-tile, .cs-perlin-tile { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(0, 60, 200, 0.15) 0%, rgba(0, 20, 100, 0.4) 100%), #08102a; border: 1px solid rgba(80, 130, 255, 0.3); color: #fff; }
.cs-ngram-tile::before { content: 'N'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 6rem; font-family: var(--font-mono); opacity: 0.05; pointer-events: none; }
.cs-blocks-tile::before { content: '[]'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; font-family: var(--font-mono); opacity: 0.05; pointer-events: none; }
.cs-sorting-tile::before { content: 'O(n)'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.cs-automata-tile::before { content: 'S₀'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; font-family: var(--font-mono); opacity: 0.05; pointer-events: none; }
.cs-mst-tile::before { content: 'G'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 6rem; font-family: serif; opacity: 0.05; pointer-events: none; }
.cs-perlin-tile::before { content: '≈'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; opacity: 0.05; pointer-events: none; }

.cs-ngram-tile > *, .cs-blocks-tile > *, .cs-sorting-tile > *, .cs-automata-tile > *, .cs-mst-tile > *, .cs-perlin-tile > * { position: relative; z-index: 1; }
.cs-ngram-tile .tile-kicker, .cs-blocks-tile .tile-kicker, .cs-sorting-tile .tile-kicker, .cs-automata-tile .tile-kicker, .cs-mst-tile .tile-kicker, .cs-perlin-tile .tile-kicker { color: #8bb4ff; font-weight: 700; }
.cs-ngram-tile strong, .cs-blocks-tile strong, .cs-sorting-tile strong, .cs-automata-tile strong, .cs-mst-tile strong, .cs-perlin-tile strong { color: #fff; }
.cs-ngram-tile small, .cs-blocks-tile small, .cs-sorting-tile small, .cs-automata-tile small, .cs-mst-tile small, .cs-perlin-tile small { color: rgba(220, 235, 255, 0.72); }
.cs-ngram-tile:hover, .cs-blocks-tile:hover, .cs-sorting-tile:hover, .cs-automata-tile:hover, .cs-mst-tile:hover, .cs-perlin-tile:hover { border-color: rgba(80, 130, 255, 0.6); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(80, 130, 255, 0.22); }

.recipe-book-tile {
  background:
    linear-gradient(180deg, rgba(10, 7, 3, 0.2) 0%, rgba(10, 7, 3, 0.76) 100%),
    url('../thumbs/librarian.jpg') center / cover no-repeat;
}

.recipe-book-tile .tile-kicker {
  color: #fde3c0;
}

.recipe-book-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52);
}

.recipe-book-tile small {
  color: #f2d9b8;
}

/* ── Class Downloads tile ─────────────────────── */

.class-downloads-tile {
  background:
    linear-gradient(180deg, rgba(8, 6, 18, 0.2) 0%, rgba(8, 6, 18, 0.76) 100%),
    url('../thumbs/downloads.png') center / cover no-repeat;
}

.class-downloads-tile .tile-kicker {
  color: #d8c7ff;
}

.class-downloads-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52);
}

.class-downloads-tile small {
  color: #c4b5fd;
}

/* ── Video Library tile ───────────────────────── */

.video-library-tile {
  background:
    linear-gradient(180deg, rgba(5, 10, 5, 0.2) 0%, rgba(5, 10, 5, 0.76) 100%),
    url('../thumbs/classvideos.png') center / cover no-repeat;
}

.video-library-tile .tile-kicker {
  color: #a7f3d0;
}

.video-library-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52);
}

.video-library-tile small {
  color: #6ee7b7;
}

/* ── Video of the Day (home page) ────────────── */

.vod-card {
  border-radius: var(--radius);
  background: #0d0d0e;
  border: 1px solid rgba(60, 60, 65, 0.6);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem 1.3rem;
}

.vod-eyebrow {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #555;
  margin: 0 0 0.85rem;
}

.vod-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.4rem;
  align-items: center;
}

@media (max-width: 640px) {
  .vod-inner { grid-template-columns: 1fr; }
}

.vod-thumb-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
  cursor: pointer;
  flex-shrink: 0;
}

.vod-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}

.vod-thumb-wrap:hover .vod-thumb { opacity: 0.78; }

.vod-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 0.28rem;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(10, 14, 22, 0.08) 0%, rgba(10, 14, 22, 0.82) 100%),
    radial-gradient(circle at top right, rgba(90, 160, 240, 0.3), transparent 32%),
    linear-gradient(135deg, #1d2633 0%, #10151d 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.vod-thumb-wrap--fallback .vod-fallback {
  opacity: 1;
}

.vod-thumb-wrap--fallback .vod-thumb {
  opacity: 0;
}

.vod-fallback-kicker {
  margin: 0;
  color: rgba(206, 223, 247, 0.82);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.vod-fallback-title {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  max-width: 14ch;
}

.vod-thumb-wrap:focus-visible {
  outline: 2px solid #5aa0f0;
  outline-offset: 4px;
}

.vod-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
}

.vod-play-btn svg {
  width: 42px;
  height: 42px;
  opacity: 0.88;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65));
  transition: transform 0.15s, opacity 0.15s;
}

.vod-thumb-wrap:hover .vod-play-btn svg {
  transform: scale(1.1);
  opacity: 1;
}

.vod-duration {
  position: absolute;
  bottom: 5px;
  right: 6px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
}

.vod-copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.vod-category {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #555;
  margin: 0;
}

.vod-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: #f0f0f0;
  margin: 0;
  line-height: 1.3;
}

.vod-desc {
  font-size: 0.81rem;
  color: #6e6e73;
  margin: 0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vod-link {
  display: inline-block;
  font-size: 0.77rem;
  color: #5aa0f0;
  text-decoration: none;
  font-weight: 600;
  margin-top: 0.2rem;
}

.vod-link:hover { text-decoration: underline; }

/* VOD modal */
.vod-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.vod-modal-backdrop.open { display: flex; }

.vod-modal {
  width: 100%;
  max-width: 880px;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.75);
  position: relative;
}

.vod-modal video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.vod-modal-info {
  padding: 0.8rem 1rem 1rem;
}

.vod-modal-category {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
  margin: 0 0 0.15rem;
}

.vod-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.vod-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Recipe Book page ─────────────────────────── */

.recipe-hero-lead {
  margin: 0 auto;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.02rem;
}

.recipe-hero-note {
  width: min(760px, 100%);
  margin: 1rem auto 0;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(32, 73, 126, 0.12);
  box-shadow: 0 12px 26px rgba(16, 30, 48, 0.06);
  color: #44536a;
  line-height: 1.55;
}

.recipe-hero-note strong {
  color: #1d3554;
}

.recipe-hero-note a {
  color: #1d4ed8;
  font-weight: 700;
}

.recipe-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recipe-card {
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid rgba(210, 210, 215, 0.66);
  border-top-width: 3px;
  box-shadow: var(--shadow);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.recipe-card--electronics { border-top-color: #3b82f6; }
.recipe-card--circuits    { border-top-color: #f59e0b; }
.recipe-card--coding      { border-top-color: #10b981; }
.recipe-card--making      { border-top-color: #ef4444; }

.recipe-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.recipe-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.08rem;
}

.recipe-title {
  margin: 0 0 0.22rem;
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  line-height: 1.25;
}

.recipe-desc {
  margin: 0;
  font-size: 0.84rem;
  color: #44536a;
  line-height: 1.5;
}

.recipe-desc code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: #f0f4f8;
  border-radius: 4px;
  padding: 0.1em 0.32em;
  color: #1d4ed8;
}

.recipe-materials {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.recipe-materials li {
  font-size: 0.73rem;
  background: #f0f4f8;
  color: #3a4a5c;
  border-radius: 20px;
  padding: 0.17rem 0.58rem;
  white-space: nowrap;
}

.recipe-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 0.14rem 0.52rem;
}

.recipe-badge--beginner     { background: #dcfce7; color: #166534; }
.recipe-badge--intermediate { background: #fef9c3; color: #854d0e; }
.recipe-badge--advanced     { background: #fee2e2; color: #991b1b; }

.applications-page {
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(61, 131, 213, 0.14), transparent 58%),
    linear-gradient(180deg, #f7f7f3 0%, #eef4f7 52%, #edf1f8 100%);
}

.applications-page .site-header {
  background: rgba(247, 247, 243, 0.9);
}

.applications-page main {
  display: grid;
  gap: 1.25rem;
}

.applications-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 1rem;
  align-items: stretch;
  text-align: left;
  padding-bottom: 0.4rem;
}

.applications-hero-copy {
  padding-top: 0.65rem;
}

.applications-hero h1 {
  margin-left: 0;
  margin-right: 0;
  max-width: 8ch;
}

.applications-hero-lead {
  margin: 0;
  max-width: 62ch;
  color: #516272;
  font-size: 1.05rem;
  line-height: 1.62;
}

.applications-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  background: #143a67;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 14px 28px rgba(20, 58, 103, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.applications-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(20, 58, 103, 0.22);
}

.applications-chip--secondary {
  background: rgba(255, 255, 255, 0.78);
  color: #143a67;
  border: 1px solid rgba(20, 58, 103, 0.14);
  box-shadow: none;
}

.applications-hero-panel {
  border-radius: 28px;
  padding: 1.15rem;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(109, 180, 255, 0.18), transparent 48%),
    linear-gradient(160deg, #0f2136 0%, #162f4e 100%);
  color: #edf4ff;
  box-shadow: 0 18px 38px rgba(16, 29, 48, 0.18);
}

.applications-panel-kicker {
  margin: 0;
  color: #a7c8ee;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.applications-hero-panel h2 {
  margin: 0.4rem 0 0.9rem;
  font-size: 1.7rem;
  line-height: 1.08;
}

.applications-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.applications-hero-note {
  margin: 0.9rem 0 0;
  color: #d6e6f7;
  line-height: 1.55;
}

.applications-brief {
  margin-top: -0.15rem;
}

.applications-brief-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.applications-brief-card {
  border-radius: 22px;
  padding: 1rem;
  border: 1px solid rgba(36, 64, 98, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 252, 0.98));
  box-shadow: 0 12px 28px rgba(16, 30, 48, 0.06);
}

.applications-brief-card span {
  display: block;
  color: #607286;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.applications-brief-card strong {
  display: block;
  margin-top: 0.4rem;
  color: #19314d;
  line-height: 1.45;
}

.applications-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.applications-stack {
  display: grid;
  gap: 2rem;
}

.applications-cluster {
  display: grid;
  gap: 1rem;
}

.applications-subhead {
  display: grid;
  gap: 0.35rem;
  padding: 0 0.1rem;
}

.applications-subhead h3 {
  margin: 0;
  color: #19314d;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  letter-spacing: -0.02em;
}

.applications-subhead p {
  margin: 0;
  color: #607286;
  max-width: 62ch;
  line-height: 1.6;
}

.app-link-feature {
  grid-column: 1 / -1;
  min-height: 320px;
}

.app-copy {
  display: grid;
  gap: 0.35rem;
}

.app-link-feature .app-copy {
  max-width: 34ch;
}

.app-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-bottom: 0.15rem;
}

.app-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.24rem 0.56rem;
  border-radius: 999px;
  background: rgba(20, 58, 103, 0.08);
  border: 1px solid rgba(20, 58, 103, 0.12);
  color: #1f3550;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.app-tag--soft {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(20, 58, 103, 0.12);
  color: #23354d;
}

.applications-grid--assets .tile {
  min-height: 210px;
}

.applications-grid--games .tile {
  min-height: 220px;
}

.app-link-scratch .app-tag,
.app-link-tinkercad .app-tag,
.app-link-clever .app-tag,
.app-link-codeorg .app-tag {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.applications-chip:focus-visible {
  outline: 2px solid #1d6fd4;
  outline-offset: 3px;
}

.app-link {
  min-height: 220px;
}

.app-link-button {
  width: 100%;
  border: 1px solid rgba(210, 210, 215, 0.66);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.app-link-diode {
  background:
    linear-gradient(180deg, rgba(4, 8, 20, 0.18) 0%, rgba(4, 8, 20, 0.62) 100%),
    #0d1b2e;
}

.app-link-diode .tile-kicker,
.app-link-diode strong,
.app-link-diode small {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.app-link-diode .app-tag {
  background: rgba(0, 180, 255, 0.22);
  color: #7dd6ff;
  border-color: rgba(0, 180, 255, 0.28);
}

.app-link-scratch {
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.16) 0%, rgba(8, 12, 18, 0.58) 100%),
    url("../thumbs/scratch-thumb.jpg") center / cover no-repeat,
    #2ea6df;
}

.app-link-scratch .tile-kicker,
.app-link-scratch strong,
.app-link-scratch small {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
}

.app-link-tinkercad {
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.14) 0%, rgba(8, 12, 18, 0.48) 100%),
    url("../thumbs/tinkercad-thumb.svg") center / cover no-repeat,
    #ffffff;
}

.app-link-clever {
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.14) 0%, rgba(8, 12, 18, 0.46) 100%),
    url("../thumbs/clever-thumb.jpg") center / cover no-repeat,
    #ffffff;
}

.app-link-codeorg {
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.14) 0%, rgba(8, 12, 18, 0.5) 100%),
    url("../thumbs/code-org-thumb.jpg") center / cover no-repeat,
    #ffffff;
}

.app-link-tinkercad .tile-kicker,
.app-link-tinkercad strong,
.app-link-tinkercad small,
.app-link-clever .tile-kicker,
.app-link-clever strong,
.app-link-clever small,
.app-link-codeorg .tile-kicker,
.app-link-codeorg strong,
.app-link-codeorg small {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.app-link-github {
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.15) 0%, rgba(17, 24, 39, 0.06) 100%),
    #ffffff;
}

.app-link-bloxels {
  background:
    radial-gradient(circle at 18% 20%, rgba(250, 204, 21, 0.24) 0 16%, transparent 17%),
    radial-gradient(circle at 42% 28%, rgba(249, 115, 22, 0.18) 0 14%, transparent 15%),
    radial-gradient(circle at 68% 40%, rgba(59, 130, 246, 0.2) 0 16%, transparent 17%),
    linear-gradient(180deg, rgba(22, 24, 35, 0.08) 0%, rgba(22, 24, 35, 0.02) 100%),
    #fffdf5;
}

.app-link-danball {
  background:
    radial-gradient(circle at 22% 24%, rgba(56, 189, 248, 0.22) 0 14%, transparent 15%),
    radial-gradient(circle at 72% 30%, rgba(34, 197, 94, 0.2) 0 13%, transparent 14%),
    radial-gradient(circle at 52% 72%, rgba(249, 115, 22, 0.18) 0 15%, transparent 16%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.02) 100%),
    #f7fcff;
}

.app-link-khan {
  background:
    linear-gradient(180deg, rgba(22, 163, 74, 0.15) 0%, rgba(22, 163, 74, 0.06) 100%),
    #ffffff;
}

.app-link-duolingo {
  background:
    linear-gradient(180deg, rgba(236, 72, 153, 0.15) 0%, rgba(236, 72, 153, 0.06) 100%),
    #ffffff;
}

.app-link-canva {
  background:
    linear-gradient(180deg, rgba(6, 182, 212, 0.16) 0%, rgba(14, 116, 144, 0.08) 100%),
    #ffffff;
}

.app-link-opengameart {
  background:
    linear-gradient(180deg, rgba(26, 107, 160, 0.15) 0%, rgba(26, 107, 160, 0.06) 100%),
    #ffffff;
}

.app-link-kenney {
  background:
    linear-gradient(180deg, rgba(45, 163, 77, 0.15) 0%, rgba(45, 163, 77, 0.06) 100%),
    #ffffff;
}

.app-link-itch {
  background:
    linear-gradient(180deg, rgba(250, 68, 84, 0.15) 0%, rgba(250, 68, 84, 0.06) 100%),
    #ffffff;
}

.app-link-polypizza {
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.06) 100%),
    #ffffff;
}

.app-link-craftpix {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.15) 0%, rgba(124, 58, 237, 0.06) 100%),
    #ffffff;
}

.app-link-freesound {
  background:
    linear-gradient(180deg, rgba(13, 148, 136, 0.15) 0%, rgba(13, 148, 136, 0.06) 100%),
    #ffffff;
}

.class-picker {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.class-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 22, 0.58);
}

.class-picker-panel {
  position: relative;
  z-index: 1;
  width: min(680px, 96vw);
  background: #ffffff;
  border: 1px solid #d8e1ef;
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(12, 22, 40, 0.25);
  padding: 1rem;
}

.class-picker-panel h2 {
  margin: 0 0 0.35rem;
  font-size: 1.4rem;
}

.class-picker-panel p {
  margin: 0 0 0.85rem;
  color: #44536a;
}

.class-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.class-picker-grid button,
.class-picker-actions button {
  border: 1px solid #c4d2e7;
  border-radius: 10px;
  background: #f7faff;
  color: #143760;
  font: 600 0.95rem/1.2 var(--font-sans);
  padding: 0.66rem 0.74rem;
  cursor: pointer;
}

.class-picker-grid button:hover,
.class-picker-actions button:hover {
  background: #edf3fb;
}

.class-picker-grid button:focus-visible,
.class-picker-actions button:focus-visible,
.app-link-button:focus-visible {
  outline: 2px solid #1d6fd4;
  outline-offset: 2px;
}

.class-picker-actions {
  margin-top: 0.8rem;
  display: flex;
  justify-content: flex-end;
}

.tile-kicker {
  font-size: 0.79rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  font-weight: 600;
}

.tile strong {
  font-size: clamp(1.14rem, 2.8vw, 1.9rem);
  letter-spacing: -0.02em;
}

.tile small {
  color: var(--muted);
  font-size: 0.93rem;
}

[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.78;
}

.columns {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1.2fr 1fr;
}

.card {
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid rgba(210, 210, 215, 0.66);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.card h3 {
  margin: 0 0 0.8rem;
  font-size: 1.15rem;
}

.rhythm {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.42rem;
}

.rhythm li {
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  padding: 0.64rem 0.74rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.rhythm span {
  color: var(--muted);
}

/* Homepage weekly rhythm mission-control cards */
.card--weekly {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(208, 216, 228, 0.92);
  background:
    radial-gradient(circle at top right, rgba(120, 164, 255, 0.18), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  box-shadow:
    0 22px 50px rgba(15, 32, 61, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.weekly-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.weekly-kicker {
  margin: 0 0 0.28rem;
  color: #667792;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card--weekly h3 {
  margin: 0;
  color: #101828;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
}

.home-widget--schedule {
  --schedule-active: #00d9f5;
  --schedule-idle: #94a3b8;
  --schedule-focus: #ffd76a;
  --schedule-bg: linear-gradient(180deg, rgba(9, 17, 31, 0.9), rgba(16, 29, 49, 0.84));
  background: var(--schedule-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 38px rgba(0, 0, 0, 0.26);
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  backdrop-filter: blur(12px);
}

.home-widget--schedule .home-widget-eyebrow {
  margin-bottom: 0.4rem;
  font-family: var(--font-sans);
  color: var(--schedule-active);
  letter-spacing: 0.1em;
}

.home-widget--schedule .home-widget-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f8fbff;
}

.weekly-focus {
  margin: 0;
  align-self: center;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-sans);
  color: var(--schedule-focus);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.weekly-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.weekly-day-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, opacity 180ms ease;
}

.weekly-day-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 28px rgba(0, 0, 0, 0.16);
}

.weekly-day-card:hover .weekly-day-what {
  opacity: 1;
}

.weekly-day-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 42%);
  opacity: 0.55;
}

.weekly-day-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  margin-bottom: 0.2rem;
  background: #334155;
  box-shadow: none;
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease, opacity 220ms ease;
}

.weekly-day-card.is-current-day {
  transform: translateY(-5px);
  border-color: rgba(0, 217, 245, 0.7);
  background: rgba(0, 217, 245, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 20px rgba(0, 217, 245, 0.12);
}

.weekly-day-card.is-current-day .weekly-day-dot {
  background: var(--schedule-active);
  box-shadow: 0 0 10px rgba(0, 217, 245, 0.7);
  transform: scale(1.2);
}

.weekly-day-card h4 {
  margin: 0;
  font-family: var(--font-sans);
  color: rgba(165, 182, 210, 1);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weekly-day-label {
  margin: 0.1rem 0 0;
  font-family: var(--font-sans);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.weekly-day-what {
  margin: 0.3rem 0 0;
  font-family: var(--font-sans);
  color: rgba(214, 225, 242, 0.58);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.5;
  max-width: 16ch;
  opacity: 1;
}

.weekly-day-card--off {
  opacity: 0.72;
  background: transparent;
  box-shadow: none;
}

.weekly-day-card--off .weekly-day-dot {
  background: #475569;
  box-shadow: none;
}

.weekly-day-card--off .weekly-day-label {
  color: var(--schedule-idle);
  font-weight: 500;
}

.weekly-day-card--off .weekly-day-what {
  color: rgba(148, 163, 184, 0.86);
}

.weekly-day-card--off.is-current-day {
  border-color: rgba(0, 217, 245, 0.45);
  background: rgba(0, 217, 245, 0.04);
  opacity: 1;
}

.weekly-day-card--off.is-current-day .weekly-day-dot {
  background: var(--schedule-active);
  box-shadow: 0 0 8px rgba(0, 217, 245, 0.55);
  opacity: 1;
}

@keyframes weekly-led-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0, 217, 245, 0.6);
    transform: scale(1.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 217, 245, 1), 0 0 36px rgba(0, 217, 245, 0.38);
    transform: scale(1.55);
  }
}

.weekly-day-card.is-current-day .weekly-day-dot {
  animation: weekly-led-pulse 2.4s ease-in-out infinite;
}

.home-widget--schedule .home-widget-schedule-header {
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 600px) {
  .weekly-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .home-widget--schedule .home-widget-title {
    font-size: 1.32rem;
  }

  .weekly-focus {
    width: 100%;
    align-self: flex-start;
  }

  .home-widget--schedule .home-widget-schedule-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
  }

  .weekly-day-card {
    min-height: 0;
  }
}

.quick-links {
  display: grid;
  gap: 0.48rem;
}

.quick-links a {
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  text-decoration: none;
  color: #111;
  padding: 0.64rem 0.74rem;
}

/* ── Bible Verse of the Day ───────────────────── */
.votd-card {
  border-radius: var(--radius);
  background:
    radial-gradient(130% 70% at 0% 0%, rgba(255, 210, 100, 0.17), transparent 58%),
    radial-gradient(110% 70% at 100% 100%, rgba(255, 175, 60, 0.13), transparent 58%),
    #fffcf2;
  border: 1px solid rgba(210, 180, 110, 0.48);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem 1.25rem;
}

.sidepanel-component .votd-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8a5c00;
  margin: 0 0 1rem;
}

.votd-eyebrow-dot {
  color: rgba(138, 92, 0, 0.35);
}

/* ── Verse of the Day: Immersive Book Widget ──────────────────── */
.home-widget--votd {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: none;
  width: 100%;
}

.home-widget--votd .votd-immersion-container {
  width: 100%;
  max-width: none;
  position: relative;
  padding: 0.5rem;
  background: #f0e6d2;
  border-radius: 0;
}

.home-widget--votd .bible-page {
  position: relative;
  overflow: hidden;
  border-radius: 4px 10px 10px 4px;
  border: 1px solid #e8dfcc;
  padding: 1.5rem 1.5rem 1.25rem 2rem;
  background-color: #fdfaf3;
  background-image: radial-gradient(circle at 2px 2px, rgba(0, 0, 0, 0.02) 1px, transparent 0);
  background-size: 40px 40px;
}

.home-widget--votd .bible-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.05) 40%, transparent 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.03);
}

.home-widget--votd .red-letter-header {
  margin: 0 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #8b0000;
}

.home-widget--votd .red-letter-header::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  opacity: 0.2;
  background: linear-gradient(to right, #8b0000, transparent);
}

.home-widget--votd .votd-verse {
  margin: 0;
  display: block;
  overflow: visible;
  max-width: 42ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #1a1006;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.home-widget--votd .votd-verse::first-letter {
  float: left;
  margin-top: 0.06em;
  margin-right: 0.12em;
  margin-bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 0.78;
  color: #1a1006;
  text-shadow: 1px 1px 0 #fdfaf3, 3px 3px 0 #b08d57;
}

.home-widget--votd .votd-ref {
  margin: 0.85rem 0 0;
  text-align: right;
  max-width: 42ch;
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: #9a7840;
}

.home-widget--votd .fleuron {
  margin: 0.35rem 0;
  text-align: center;
  font-size: 1rem;
  color: #e8dfcc;
  user-select: none;
}

.home-widget--votd .votd-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.home-widget--votd .votd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border-radius: 5px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.14s ease;
}

.home-widget--votd .votd-btn--primary,
.home-widget--votd .votd-btn--chapter {
  background-color: #1a1006;
  color: #fdfaf3;
  border-color: #1a1006;
}

.home-widget--votd .votd-btn--ai {
  background: #fff;
  color: #4285f4;
  border-color: rgba(66, 133, 244, 0.15);
}

.home-widget--votd .votd-btn--secondary,
.home-widget--votd .votd-btn--youversion {
  background: transparent;
  color: #b08d57;
  border-color: #e8dfcc;
}

.home-widget--votd .votd-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 520px) {
  .home-widget--votd .bible-page {
    padding: 1.5rem 1rem 1rem 1.5rem;
  }

  .home-widget--votd .votd-verse {
    font-size: 0.95rem;
    max-width: none;
  }

  .home-widget--votd .votd-verse::first-letter {
    font-size: 2.2rem;
  }

  .home-widget--votd .votd-actions {
    justify-content: flex-start;
  }
}

.eliza-lab {
  display: grid;
  gap: 0.72rem;
  font-family: var(--font-mono);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--term-line, #2b3742);
  background: var(--term-bg, #171d22);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  color: var(--term-text, #eef3f8);
  --term-bg: #171d22;
  --term-panel: #10161b;
  --term-text: #eef3f8;
  --term-muted: #9fb0bf;
  --term-line: #2b3742;
  --term-accent: #d7e2ef;
  --term-user-bg: #1e2933;
  --term-bot-bg: #151d24;
  --term-action-bg: #303d49;
  --term-action-text: #f2f5f8;
  --term-input-bg: #0f161c;
  --term-input-text: #f3f7fb;
  --scan-opacity: 0;
  --text-glow: none;
}

.eliza-lab[data-theme="agent"] {
  --term-bg: #070b14;
  --term-panel: #090f1d;
  --term-text: #ffffff;
  --term-muted: #c2c9d7;
  --term-line: #1e2e69;
  --term-accent: #0b35f1;
  --term-user-bg: #101831;
  --term-bot-bg: #0c1325;
  --term-action-bg: #0b35f1;
  --term-action-text: #ffffff;
  --term-input-bg: #060d1d;
  --term-input-text: #ffffff;
}

.eliza-lab[data-theme="effect"] {
  --term-bg: #071008;
  --term-panel: #040a05;
  --term-text: #99ff8f;
  --term-muted: #7cd97f;
  --term-line: #1f4d25;
  --term-accent: #c8ffbf;
  --term-user-bg: #0a170c;
  --term-bot-bg: #081208;
  --term-action-bg: #1c4520;
  --term-action-text: #ceffd6;
  --term-input-bg: #020703;
  --term-input-text: #b7ffaf;
  --scan-opacity: 0.16;
  --text-glow: 0 0 5px rgba(97, 255, 107, 0.5);
}

.eliza-lab::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, var(--scan-opacity)) 0,
      rgba(255, 255, 255, var(--scan-opacity)) 1px,
      transparent 2px,
      transparent 4px
    );
}

.terminal-head,
.terminal-theme-controls,
.terminal-mode-note,
.chat-log,
.chat-controls {
  position: relative;
  z-index: 1;
}

.terminal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.2rem 0.15rem;
}

.terminal-lights {
  display: flex;
  gap: 0.35rem;
}

.terminal-lights span {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background: #3f4a55;
  border: 1px solid #5f6a76;
}

.terminal-lights span:nth-child(1) {
  background: #8f6a45;
}

.terminal-lights span:nth-child(2) {
  background: #7a7a41;
}

.terminal-lights span:nth-child(3) {
  background: #497956;
}

.terminal-title {
  margin: 0;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
  text-transform: uppercase;
  color: var(--term-muted);
}

.terminal-theme-controls {
  display: flex;
  gap: 0.46rem;
  flex-wrap: wrap;
}

.theme-chip {
  border: 1px solid var(--term-line);
  background: var(--term-panel);
  color: var(--term-muted);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.theme-chip.is-active {
  color: var(--term-action-text);
  background: var(--term-action-bg);
  border-color: var(--term-action-bg);
}

.terminal-mode-note {
  margin: 0;
  color: var(--term-muted);
  font-size: 0.86rem;
  line-height: 1.35;
  text-shadow: var(--text-glow);
}

.history-columns {
  grid-template-columns: 1.15fr 1fr;
}

.history-card .rhythm li,
.timeline-card .rhythm li {
  align-items: center;
}

.history-note {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.ai-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.ai-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  border: 1px solid #e4e4ea;
  border-radius: 12px;
  padding: 0.58rem 0.64rem;
  background: #fff;
}

.ai-timeline time {
  display: inline-block;
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.ai-timeline strong {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.timeline-eliza {
  border-color: #91b8f5;
  background: linear-gradient(180deg, #f5f9ff 0%, #eef4ff 100%);
  box-shadow: inset 3px 0 0 #0a5fc8;
}

.perceptron-lab {
  display: grid;
  gap: 1rem;
}

.perceptron-console {
  font-family: var(--font-sans);
  border-radius: 18px;
  box-shadow: 0 18px 38px rgba(28, 40, 52, 0.08);
  border: 1px solid #cfd8e0;
  background: linear-gradient(180deg, #eef4f1 0%, #e4ece7 100%);
  color: #12161a;
}

.perceptron-live-head {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.perceptron-framing {
  margin: 0.1rem 0 0;
  font-weight: 700;
  font-size: 1.05rem;
  max-width: 34ch;
  color: #324455;
}

.perceptron-live-note {
  margin: 0;
  max-width: 58ch;
  color: #53687d;
  font-size: 0.96rem;
  line-height: 1.48;
}

.perceptron-shell-body {
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.92fr);
}

.perceptron-stage {
  display: grid;
  min-height: 0;
  align-items: start;
}

.perceptron-side {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.perceptron-tab-stack {
  min-height: 0;
  overflow: auto;
  padding-right: 0.12rem;
}

.perceptron-tab-panel[data-compact-panel-group="play"] .perceptron-retina-panel {
  order: 1;
}

.perceptron-tab-panel[data-compact-panel-group="play"] > .perceptron-panel:first-child {
  order: 2;
}

.perceptron-tab-panel[data-compact-panel-group="tune"] .perceptron-advanced-panel {
  order: 1;
}

.perceptron-tab-panel[data-compact-panel-group="tune"] .perceptron-control-strip {
  order: 2;
}

.perceptron-tab-panel[data-compact-panel-group="tune"] .perceptron-guidance {
  order: 3;
}

.perceptron-tab-panel[data-compact-panel-group="tune"] .perceptron-era-details {
  order: 4;
}

.perceptron-walkthrough {
  margin: 0.15rem 0 0;
  display: grid;
  gap: 0.42rem;
  max-width: 78ch;
}

.perceptron-walkthrough p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.perceptron-walkthrough-rule {
  border-left: 3px solid #2f363d;
  padding-left: 0.55rem;
}

.perceptron-onboarding {
  margin: 0.2rem 0 0;
  display: grid;
  gap: 0.45rem;
  max-width: 100%;
  grid-template-columns: 1fr;
  align-items: stretch;
}

.perceptron-onboarding-summary {
  margin: 0;
  border: 1px solid #cbd8e2;
  background: rgba(255, 255, 255, 0.86);
  padding: 0.85rem 0.95rem;
  line-height: 1.55;
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(38, 70, 102, 0.08);
}

.perceptron-onboarding-block {
  border: 1px solid #d3dce4;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.75rem 0.82rem;
  display: grid;
  gap: 0.38rem;
  border-radius: 16px;
}

.perceptron-onboarding-block h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.perceptron-onboarding-block p,
.perceptron-onboarding-block li {
  font-size: 0.92rem;
  line-height: 1.42;
}

.perceptron-onboarding-list,
.perceptron-onboarding-steps {
  margin: 0;
  padding-left: 1.08rem;
  display: grid;
  gap: 0.28rem;
}

.perceptron-missions {
  display: grid;
  gap: 0.45rem;
}

.perceptron-missions article {
  border: 1px solid #d5dde5;
  background: #f8fbfb;
  padding: 0.55rem 0.62rem;
  border-radius: 14px;
}

.perceptron-missions h4 {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.perceptron-missions p {
  margin: 0.18rem 0 0;
}

#p-math-details {
  border: 1px solid #d3dde5;
  background: #f8faf8;
  padding: 0.45rem 0.52rem;
  border-radius: 14px;
}

#p-math-details summary {
  cursor: pointer;
  font-weight: 700;
}

.perceptron-console-stamp {
  margin: 0;
  padding: 0.55rem 0.68rem;
  border: 1px solid #c0cbd5;
  background: linear-gradient(180deg, #d8e0dd 0%, #cdd5d2 100%);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 14px;
  font-family: var(--font-mono);
}

.perceptron-control-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  border: 1px solid #ced8e1;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.68rem 0.8rem;
  border-radius: 16px;
}

.perceptron-mode-group {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
}

.perceptron-mode-group span {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d7082;
}

.perceptron-mode-group button.is-active {
  background: #17314b;
  color: #f7fbff;
}

.perceptron-toggle-group {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.84rem;
}

.perceptron-status {
  margin: 0;
  border: 1px solid #bed3e4;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%);
  padding: 0.78rem 0.88rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #173b60;
  border-radius: 16px;
}

.perceptron-mission-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.72rem;
}

.perceptron-mission-block {
  border: 1px solid #ccd8e2;
  background: rgba(255, 255, 255, 0.82);
  padding: 0.78rem 0.85rem;
  border-radius: 16px;
  display: grid;
  gap: 0.55rem;
}

.perceptron-mission-block h3 {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}

.perceptron-mission-note {
  margin: 0;
  color: #52687e;
  font-size: 0.88rem;
}

.perceptron-era-details {
  border: 1px solid #ced9e2;
  background: rgba(255, 255, 255, 0.74);
  border-radius: 16px;
  padding: 0.4rem;
}

.perceptron-era-details summary {
  cursor: pointer;
  padding: 0.45rem 0.55rem;
  font-weight: 700;
  color: #274764;
}

.perceptron-era-details-body {
  display: grid;
  gap: 0.7rem;
  padding: 0.25rem 0.18rem 0.18rem;
}

.perceptron-toggle-group label {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.perceptron-guidance,
.perceptron-era-note {
  margin: 0;
  border: 1px solid #d0dbe4;
  background: rgba(255, 255, 255, 0.74);
  padding: 0.58rem 0.68rem;
  font-size: 0.88rem;
  border-radius: 16px;
}

.perceptron-grid {
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.perceptron-panel {
  border: 1px solid #d2dbe3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.82rem;
  display: grid;
  gap: 0.58rem;
  align-content: start;
  box-shadow: 0 14px 28px rgba(31, 54, 76, 0.07);
}

.perceptron-panel h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.perceptron-note {
  margin: 0;
  font-size: 0.86rem;
  color: #53687d;
}

.perceptron-panel-hero {
  grid-column: auto;
}

.perceptron-field {
  display: grid;
  gap: 0.24rem;
  font-size: 0.86rem;
}

.perceptron-field span {
  letter-spacing: 0.02em;
  font-weight: 700;
}

.perceptron-field-hint {
  margin-top: -0.05rem;
  font-size: 0.75rem;
}

.perceptron-field input,
.perceptron-panel button,
.perceptron-mode-group button {
  font: inherit;
  border-radius: 12px;
}

.perceptron-field input[type="number"] {
  border: 1px solid #c7d4dd;
  padding: 0.54rem 0.62rem;
  background: #f9fbfb;
  color: #0e1317;
}

.perceptron-field input[type="range"] {
  width: 100%;
  accent-color: #242c33;
}

.perceptron-dual-input {
  display: grid;
  gap: 0.3rem;
  grid-template-columns: minmax(0, 1fr) 74px;
}

.perceptron-inline-values {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.perceptron-inline-values p {
  margin: 0;
  border: 1px solid #d3dbe3;
  padding: 0.45rem 0.54rem;
  font-size: 0.86rem;
  background: #f7faf8;
}

.perceptron-panel button,
.perceptron-presets button,
.perceptron-actions button,
.perceptron-mode-group button,
.perceptron-toggle-group button {
  border: 1px solid #bfcfdc;
  background: linear-gradient(180deg, #ffffff 0%, #f0f6fa 100%);
  color: #11161a;
  padding: 0.58rem 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.perceptron-panel button:focus-visible,
.perceptron-presets button:focus-visible,
.perceptron-actions button:focus-visible,
.perceptron-mode-group button:focus-visible,
.perceptron-toggle-group button:focus-visible,
.perceptron-era-details summary:focus-visible,
.perceptron-field input:focus-visible {
  outline: 3px solid rgba(0, 113, 227, 0.28);
  outline-offset: 2px;
}

.perceptron-progress-wrap {
  border: 1px solid #cdd7df;
  background: #f3f6f8;
  height: 0.78rem;
  border-radius: 999px;
  overflow: hidden;
}

.perceptron-progress-bar {
  width: 0%;
  height: 100%;
  background: #3a6a45;
  transition: width 180ms linear;
}

.perceptron-progress-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.perceptron-accuracy-note {
  margin: 0;
  font-size: 0.8rem;
}

.perceptron-graph-panel canvas,
.perceptron-xor-proof canvas {
  width: 100%;
  height: auto;
  max-height: min(46vh, 420px);
  border: 1px solid #c9d7e2;
  background: #f8fbff;
  border-radius: 14px;
}

.perceptron-equation-panel {
  grid-column: auto;
}

.perceptron-graph-legend {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.perceptron-graph-legend li {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  color: #4d657d;
  font-size: 0.82rem;
}

.perceptron-legend-dot,
.perceptron-legend-ring {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.perceptron-legend-zero {
  background: #2f3b47;
}

.perceptron-legend-one {
  border-radius: 999px;
  background: #1b5fcb;
}

.perceptron-legend-ring {
  border-radius: 999px;
  border: 2px solid rgba(211, 34, 34, 0.65);
}

.perceptron-equation {
  margin: 0;
  border: 1px solid #d0d9e0;
  background: #f7faf8;
  padding: 0.52rem 0.62rem;
  line-height: 1.45;
  font-size: 0.86rem;
  border-radius: 14px;
}

.perceptron-equation .is-active {
  background: #ffefb5;
  padding: 0.04rem 0.14rem;
}

.perceptron-analyst,
.perceptron-architect {
  display: grid;
  gap: 0.3rem;
}

.perceptron-analyst p,
.perceptron-architect p {
  margin: 0;
  font-size: 0.84rem;
}

.perceptron-hidden-diagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.perceptron-hidden-diagram span {
  border: 1px solid #2f363d;
  background: #f0f3f0;
  padding: 0.3rem 0.35rem;
  text-align: center;
  font-size: 0.8rem;
}

.perceptron-presets {
  border: 1px solid #d0d8de;
  padding: 0.62rem;
  background: #e0e5e0;
  border-radius: 16px;
}

.perceptron-presets h3 {
  margin: 0 0 0.48rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.perceptron-presets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.perceptron-presets button.is-active {
  background: #17314b;
  color: #f7fbff;
}

.perceptron-xor-proof {
  border: 1px solid #d2dbe3;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.72rem;
  display: grid;
  gap: 0.5rem;
  border-radius: 16px;
}

.perceptron-xor-proof h3,
.perceptron-xor-proof p {
  margin: 0;
}

.perceptron-proof-text {
  font-size: 0.84rem;
}

.perceptron-diagnostics {
  margin-top: 0.62rem;
  border: 1px solid #cbd5de;
  background: rgba(248, 251, 249, 0.9);
  font-family: var(--font-mono);
  border-radius: 16px;
}

.perceptron-diagnostics summary {
  cursor: pointer;
  padding: 0.65rem 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.perceptron-diagnostics-body {
  padding: 0.72rem;
  border-top: 1px solid #d1d9df;
  display: grid;
  gap: 0.62rem;
}

.perceptron-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.perceptron-metrics {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}

.perceptron-metrics li {
  border: 1px solid #d2dbe3;
  border-radius: 12px;
  padding: 0.44rem 0.56rem;
  font-size: 0.86rem;
  background: #f7faf9;
}

.instrument {
  display: inline-block;
  min-width: 9ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

.perceptron-table-wrap {
  border: 1px solid #cfd8df;
  border-radius: 14px;
  overflow: auto;
  background: #f5f7f5;
}

.perceptron-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.perceptron-table caption {
  text-align: left;
  padding: 0.52rem 0.62rem 0.36rem;
  color: #2c333a;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.perceptron-table th,
.perceptron-table td {
  border-top: 1px solid #c7cdca;
  padding: 0.4rem 0.5rem;
  text-align: left;
}

.perceptron-table th {
  background: #dbe0db;
  color: #20262c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.perceptron-row-error td {
  background: #f0d7d7;
}

.perceptron-console[data-grade-mode="starter"] .perceptron-advanced-panel {
  display: none;
}

.perceptron-brief-grid {
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.perceptron-prompts {
  margin: 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.34rem;
}

.perceptron-console.perceptron-high-contrast {
  background: #111;
  color: #f5f5f5;
  border-color: #f5f5f5;
}

.perceptron-console.perceptron-high-contrast .perceptron-panel,
.perceptron-console.perceptron-high-contrast .perceptron-presets,
.perceptron-console.perceptron-high-contrast .perceptron-mission-block,
.perceptron-console.perceptron-high-contrast .perceptron-era-details,
.perceptron-console.perceptron-high-contrast .perceptron-control-strip,
.perceptron-console.perceptron-high-contrast .perceptron-guidance,
.perceptron-console.perceptron-high-contrast .perceptron-status,
.perceptron-console.perceptron-high-contrast .perceptron-era-note,
.perceptron-console.perceptron-high-contrast .perceptron-onboarding-summary,
.perceptron-console.perceptron-high-contrast .perceptron-onboarding-block,
.perceptron-console.perceptron-high-contrast .perceptron-missions article,
.perceptron-console.perceptron-high-contrast #p-math-details,
.perceptron-console.perceptron-high-contrast .perceptron-xor-proof,
.perceptron-console.perceptron-high-contrast .perceptron-diagnostics {
  background: #000;
  color: #fff;
  border-color: #fff;
}

.perceptron-console.perceptron-high-contrast button,
.perceptron-console.perceptron-high-contrast input,
.perceptron-console.perceptron-high-contrast .perceptron-equation,
.perceptron-console.perceptron-high-contrast .perceptron-inline-values p,
.perceptron-console.perceptron-high-contrast .perceptron-metrics li,
.perceptron-console.perceptron-high-contrast .perceptron-mission-note,
.perceptron-console.perceptron-high-contrast .perceptron-note,
.perceptron-console.perceptron-high-contrast .perceptron-graph-legend li {
  background: #111;
  color: #fff;
  border-color: #fff;
}

.perceptron-console.perceptron-dyslexic {
  font-family: var(--font-sans);
}

@media (min-width: 981px) {
  .perceptron-shell-body {
    height: clamp(560px, calc(100dvh - 15.5rem), 760px);
    max-height: clamp(560px, calc(100dvh - 15.5rem), 760px);
  }

  .perceptron-stage,
  .perceptron-side,
  .perceptron-tab-stack {
    max-height: 100%;
  }
}

@media (max-width: 980px), (max-height: 820px) {
  .activity-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .activity-tab-panel {
    display: none;
  }

  .activity-tab-panel.is-active {
    display: grid;
  }

  .perceptron-shell-body {
    grid-template-columns: 1fr;
    min-height: clamp(500px, calc(100dvh - 13.5rem), 700px);
  }

  .perceptron-live-head {
    gap: 0.28rem;
    margin-bottom: 0.6rem;
  }

  .perceptron-live-head .eyebrow {
    font-size: 0.8rem;
  }

  .perceptron-live-head h1 {
    margin: 0.2rem 0 0.12rem;
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    line-height: 1.02;
  }

  .perceptron-framing {
    font-size: 0.94rem;
  }

  .perceptron-live-note,
  .perceptron-console-stamp {
    display: none;
  }

  .perceptron-shell-head {
    gap: 0.55rem;
  }

  .perceptron-status {
    padding: 0.62rem 0.74rem;
    font-size: 0.88rem;
  }

  .perceptron-mission-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
  }

  .perceptron-mission-block {
    padding: 0.62rem 0.68rem;
    gap: 0.38rem;
  }

  .perceptron-mission-block h3 {
    font-size: 0.86rem;
  }

  .perceptron-mission-note {
    display: none;
  }

  .perceptron-side {
    max-height: clamp(220px, 31dvh, 360px);
  }

  .perceptron-tab-stack {
    overflow: hidden;
  }

  .perceptron-tab-panel.is-active {
    min-height: 0;
    overflow: auto;
    padding-right: 0.12rem;
  }

  .perceptron-graph-panel canvas {
    max-height: min(32dvh, 320px);
  }
}

.expert-lab {
  display: grid;
  gap: 0.72rem;
}

.expert-mode-toggle {
  border: 1px solid #d6dbe3;
  border-radius: 14px;
  background: #fbfcff;
  padding: 0.76rem;
  display: grid;
  gap: 0.56rem;
}

.expert-mode-toggle h3 {
  margin: 0;
  font-size: 1rem;
}

.expert-mode-toggle button.is-active {
  border-color: #5e88c3;
  background: #e9f1ff;
  color: #143e71;
}

.expert-identity {
  margin: 0.26rem 0 0;
  color: #1b2f4c;
  font-size: 0.92rem;
}

.expert-identity-sub {
  margin: 0.12rem 0 0;
  color: #3b4c63;
  font-size: 0.84rem;
}

.expert-pipeline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.22rem 0.34rem;
  margin-top: 0.32rem;
  padding: 0.26rem 0.52rem;
  border: 1px solid #d7deea;
  border-radius: 999px;
  background: #f5f8fe;
  color: #1d3f67;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}

.expert-purpose-block {
  padding: 0.54rem 0.64rem;
}

.expert-purpose-block h3 {
  font-size: 0.92rem;
}

.expert-workspace {
  display: grid;
  gap: 0.62rem;
  grid-template-columns: 1fr;
}

.expert-side {
  display: grid;
  gap: 0.62rem;
  align-content: start;
  min-height: 0;
}

.expert-panel {
  border: 1px solid #d6dbe3;
  border-radius: 14px;
  background: #fbfcff;
  padding: 0.64rem;
  display: grid;
  gap: 0.52rem;
  align-content: start;
}

.expert-panel h3 {
  margin: 0;
  font-size: 1rem;
}

@media (min-width: 1024px) {
  .expert-workspace {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: stretch;
  }

  .expert-panel-evidence,
  .expert-side {
    max-height: clamp(430px, calc(100vh - 260px), 560px);
  }

  .expert-panel-evidence {
    overflow: hidden;
  }

  .expert-side {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .expert-output {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }
}

.expert-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.35;
}

.expert-panel-evidence {
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.expert-facts {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: 1fr;
  min-height: 0;
  overflow: auto;
  padding-right: 0.15rem;
}

.expert-evidence-card {
  display: block;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 0.38rem 0.46rem;
  background: #fff;
}

.expert-evidence-card.is-inactive {
  opacity: 0.74;
}

.expert-evidence-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(130px, 1fr) auto auto;
  align-items: center;
  gap: 0.36rem;
}

.expert-evidence-icon {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 6px;
  border: 1px solid #dae2ef;
  background: #f4f8ff;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
}

.expert-evidence-label-wrap {
  display: grid;
  gap: 0.02rem;
  min-width: 0;
}

.expert-evidence-name {
  margin: 0;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.15;
}

.expert-evidence-key {
  color: var(--muted);
  font-size: 0.71rem;
  font-family: var(--font-mono);
  line-height: 1.1;
}

.expert-evidence-toggle {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
}

.expert-evidence-confidence-inline {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
}

.expert-evidence-confidence-inline input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.expert-evidence-preset {
  border: 1px solid #c3cfe2;
  background: #fff;
  color: #1f416c;
  border-radius: 8px;
  padding: 0.22rem 0.34rem;
  font: inherit;
  font-size: 0.74rem;
  height: 1.75rem;
  min-width: 4.9rem;
}

.expert-evidence-preset:disabled {
  opacity: 0.5;
}

.expert-evidence-value {
  min-width: 2.2rem;
  text-align: right;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: #23486f;
}

.expert-lab .expert-evidence-info {
  border: 1px solid #c9d4e6;
  background: #f5f8fe;
  color: #244a75;
  border-radius: 50%;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;
  font: 700 0.72rem/1 "SFMono-Regular", Menlo, Consolas, monospace;
  padding: 0;
}

.expert-panel-engine {
  gap: 0.48rem;
}

.expert-engine-advanced {
  display: grid;
  gap: 0.42rem;
}

.expert-subhead {
  margin: 0.12rem 0 0;
  font-size: 0.88rem;
}

.expert-subhead small {
  color: var(--muted);
  font-weight: 500;
}

.expert-lab[data-mode="easy"] [data-expert-advanced="true"] {
  display: none;
}

.expert-actions {
  display: flex;
  gap: 0.42rem;
  flex-wrap: wrap;
}

.expert-lab button {
  border: 1px solid #b9c6da;
  background: #fff;
  color: #0a2f5c;
  border-radius: 10px;
  padding: 0.42rem 0.58rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
}

#expert-rules-details {
  border: 1px solid #dce2ec;
  border-radius: 10px;
  padding: 0.34rem 0.44rem;
  background: #fff;
}

#expert-rules-details summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: #23486f;
  font-weight: 600;
}

#expert-rules-details[open] summary {
  margin-bottom: 0.42rem;
}

#expert-rules-editor {
  width: 100%;
  min-height: 180px;
  max-height: 230px;
  border: 1px solid #cfd6e1;
  border-radius: 10px;
  padding: 0.44rem 0.52rem;
  font: 0.82rem/1.35 "SFMono-Regular", Menlo, Consolas, monospace;
  resize: vertical;
  background: #fff;
  color: #1d2330;
}

.expert-status {
  margin: 0;
  font-size: 0.81rem;
  color: #275c2b;
}

.expert-status.is-error {
  color: #8b1f1f;
}

.expert-field {
  display: grid;
  gap: 0.22rem;
  font-size: 0.82rem;
}

.expert-field input,
.expert-field select {
  border: 1px solid #cfd6e1;
  border-radius: 10px;
  padding: 0.34rem 0.42rem;
  font: inherit;
  background: #fff;
}

.expert-metrics {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.28rem;
  grid-template-columns: 1fr 1fr;
}

.expert-metrics li {
  border: 1px solid #e3e8f0;
  border-radius: 10px;
  padding: 0.33rem 0.42rem;
  font-size: 0.78rem;
}

.expert-output {
  display: grid;
  gap: 0.58rem;
  grid-template-columns: 1fr;
  min-height: 0;
}

.expert-output-block {
  border: 1px solid #d6dbe3;
  border-radius: 14px;
  background: #fff;
  padding: 0.54rem;
  display: grid;
  gap: 0.42rem;
  align-content: start;
  min-height: 0;
}

.expert-output-block h3 {
  margin: 0;
  font-size: 0.98rem;
}

.expert-output-block h3 small,
.expert-panel h3 small {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.74em;
}

.expert-table-wrap {
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  overflow: auto;
  max-height: 180px;
}

.expert-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.expert-table th,
.expert-table td {
  border-top: 1px solid #edf1f6;
  padding: 0.34rem 0.42rem;
  text-align: left;
  font-size: 0.82rem;
}

.expert-table th {
  background: #f7f9fc;
  color: #36475f;
  font-weight: 600;
}

.expert-why {
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  background: #fbfcff;
  padding: 0.5rem 0.58rem;
  display: grid;
  gap: 0.34rem;
  max-height: 170px;
  overflow: auto;
}

.expert-why h4 {
  margin: 0;
  font-size: 0.94rem;
}

.expert-why p {
  margin: 0;
  font-size: 0.82rem;
  color: #2d3e57;
}

.expert-why-list {
  margin: 0;
  padding-left: 1.08rem;
  display: grid;
  gap: 0.32rem;
}

.expert-why-list li {
  font-size: 0.81rem;
  line-height: 1.3;
}

.expert-why-trigger {
  border: 1px solid #c3cfe2;
  background: #f4f8ff;
  color: #163e70;
  border-radius: 8px;
  padding: 0.24rem 0.42rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.expert-why-trigger:hover {
  background: #e8f1ff;
}

.expert-why-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.expert-trace {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.34rem;
  max-height: 140px;
  overflow: auto;
}

.expert-trace li {
  font-size: 0.88rem;
  line-height: 1.35;
}

.chess-timeline-page {
  --chess-page-wash: rgba(37, 90, 211, 0.12);
  background:
    radial-gradient(1000px 360px at 50% -6%, var(--chess-page-wash), transparent 60%),
    var(--bg);
  transition: background 0.28s ease;
}

.chess-timeline-page[data-chess-theme="turochamp1951"] {
  --chess-page-wash: rgba(164, 114, 44, 0.16);
}

.chess-timeline-page[data-chess-theme="machack1967"] {
  --chess-page-wash: rgba(42, 133, 96, 0.14);
}

.chess-timeline-page[data-chess-theme="deepblue1997"] {
  --chess-page-wash: rgba(37, 90, 211, 0.12);
}

.chess-timeline-page[data-chess-theme="modern2020s"] {
  --chess-page-wash: rgba(41, 123, 107, 0.14);
}

.chess-lab {
  --chess-accent: #255ad3;
  --chess-accent-soft: rgba(37, 90, 211, 0.12);
  --chess-lab-bg:
    radial-gradient(120% 110% at 100% 0%, rgba(37, 90, 211, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 255, 0.98));
  --chess-shell-bg: #f3f7ff;
  --chess-shell-border: #c6d5f0;
  --chess-light-square: #edf3ff;
  --chess-dark-square: #cadcf8;
  --chess-selected: #4f83ef;
  --chess-target: #8dcf6e;
  --chess-piece-white: #194f9e;
  --chess-piece-black: #7b1932;
  --chess-status-bg: linear-gradient(180deg, #eff5ff 0%, #e4efff 100%);
  --chess-status-fg: #18355c;
  --chess-note-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.98));
  --chess-note-border: #d4e0f3;
  --chess-note-kicker: #58729b;
  --chess-note-title: #15355d;
  --chess-control-bg: #ffffff;
  --chess-control-fg: #1a4072;
  --chess-log-bg: #ffffff;
  --chess-log-border: #dde5f2;
  padding: 0.95rem;
  background: var(--chess-lab-bg);
  transition: background 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.chess-lab[data-model-theme="turochamp1951"] {
  --chess-accent: #936126;
  --chess-accent-soft: rgba(147, 97, 38, 0.14);
  --chess-lab-bg:
    radial-gradient(120% 110% at 100% 0%, rgba(196, 152, 84, 0.18), transparent 40%),
    linear-gradient(180deg, rgba(255, 251, 243, 0.98), rgba(247, 239, 222, 0.98));
  --chess-shell-bg: #faf2df;
  --chess-shell-border: #d8c39d;
  --chess-light-square: #f7ead0;
  --chess-dark-square: #e2c18b;
  --chess-selected: #bb7a22;
  --chess-target: #87a84f;
  --chess-piece-white: #7b4d17;
  --chess-piece-black: #332316;
  --chess-status-bg: linear-gradient(180deg, #fff5e2 0%, #f7e8ca 100%);
  --chess-status-fg: #5c3d17;
  --chess-note-bg: linear-gradient(180deg, rgba(255, 250, 241, 0.98), rgba(248, 238, 218, 0.98));
  --chess-note-border: #dcc8a5;
  --chess-note-kicker: #7d6338;
  --chess-note-title: #5b4020;
  --chess-control-bg: #fffaf1;
  --chess-control-fg: #6a471d;
  --chess-log-bg: #fffaf2;
  --chess-log-border: #e4d7bf;
}

.chess-lab[data-model-theme="machack1967"] {
  --chess-accent: #1f7b58;
  --chess-accent-soft: rgba(31, 123, 88, 0.14);
  --chess-lab-bg:
    radial-gradient(120% 110% at 100% 0%, rgba(87, 188, 138, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(247, 255, 250, 0.98), rgba(239, 248, 243, 0.98));
  --chess-shell-bg: #eef8f1;
  --chess-shell-border: #c4decf;
  --chess-light-square: #e4f3e9;
  --chess-dark-square: #b2d9c2;
  --chess-selected: #2f9770;
  --chess-target: #7bb55a;
  --chess-piece-white: #166a4c;
  --chess-piece-black: #20362a;
  --chess-status-bg: linear-gradient(180deg, #eefbf3 0%, #dbf3e4 100%);
  --chess-status-fg: #154634;
  --chess-note-bg: linear-gradient(180deg, rgba(250, 255, 252, 0.98), rgba(235, 247, 240, 0.98));
  --chess-note-border: #cae1d5;
  --chess-note-kicker: #4c7a68;
  --chess-note-title: #154634;
  --chess-control-bg: #f9fffb;
  --chess-control-fg: #15533c;
  --chess-log-bg: #fafffb;
  --chess-log-border: #d8e8df;
}

.chess-lab[data-model-theme="deepblue1997"] {
  --chess-accent: #255ad3;
  --chess-accent-soft: rgba(37, 90, 211, 0.12);
}

.chess-lab[data-model-theme="modern2020s"] {
  --chess-accent: #217b71;
  --chess-accent-soft: rgba(33, 123, 113, 0.14);
  --chess-lab-bg:
    radial-gradient(120% 110% at 100% 0%, rgba(90, 184, 167, 0.17), transparent 42%),
    linear-gradient(180deg, rgba(247, 255, 254, 0.98), rgba(240, 248, 247, 0.98));
  --chess-shell-bg: #eef8f6;
  --chess-shell-border: #c8dfdb;
  --chess-light-square: #e7f1ef;
  --chess-dark-square: #c3dcd7;
  --chess-selected: #26998d;
  --chess-target: #82be68;
  --chess-piece-white: #0f665c;
  --chess-piece-black: #243039;
  --chess-status-bg: linear-gradient(180deg, #eefbf9 0%, #d8f0ec 100%);
  --chess-status-fg: #184943;
  --chess-note-bg: linear-gradient(180deg, rgba(250, 255, 254, 0.98), rgba(237, 247, 245, 0.98));
  --chess-note-border: #cee1de;
  --chess-note-kicker: #4e7872;
  --chess-note-title: #184943;
  --chess-control-bg: #fbfffe;
  --chess-control-fg: #18564f;
  --chess-log-bg: #fbfffe;
  --chess-log-border: #d7e6e4;
}

.chess-lab-grid {
  display: grid;
  gap: 0.84rem;
  grid-template-columns: minmax(320px, 560px) minmax(0, 1fr);
  align-items: start;
}

.chess-board-wrap {
  border: 1px solid var(--chess-shell-border);
  border-radius: 18px;
  padding: 0.6rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent 24%),
    var(--chess-shell-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: background 0.24s ease, border-color 0.24s ease;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.2rem;
}

.chess-square {
  border: 1px solid rgba(97, 119, 147, 0.2);
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  font: 700 1.24rem/1 "Segoe UI Symbol", "Noto Sans Symbols", "SFMono-Regular", Menlo, Consolas, monospace;
  cursor: pointer;
  padding: 0;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.chess-square.dark {
  background: var(--chess-dark-square);
}

.chess-square.light {
  background: var(--chess-light-square);
}

.chess-square:hover:not(:disabled) {
  transform: translateY(-1px);
}

.chess-square.selected {
  outline: 3px solid var(--chess-selected);
  outline-offset: -2px;
}

.chess-square.target {
  box-shadow: inset 0 0 0 3px var(--chess-target);
}

.chess-square.in-check {
  box-shadow: inset 0 0 0 3px #d96b6b;
}

.chess-square:disabled {
  cursor: default;
  color: #2d3e57;
}

.chess-piece-white {
  color: var(--chess-piece-white);
}

.chess-piece-black {
  color: var(--chess-piece-black);
}

.chess-side {
  display: grid;
  gap: 0.62rem;
}

.chess-status {
  margin: 0;
  border: 1px solid var(--chess-shell-border);
  border-radius: 16px;
  background: var(--chess-status-bg);
  color: var(--chess-status-fg);
  padding: 0.68rem 0.78rem;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.42;
}

.chess-model-note {
  margin: 0;
  display: grid;
  gap: 0.44rem;
  border: 1px solid var(--chess-note-border);
  border-radius: 16px;
  background: var(--chess-note-bg);
  color: var(--chess-status-fg);
  padding: 0.72rem 0.78rem;
  line-height: 1.42;
  transition: background 0.24s ease, border-color 0.24s ease;
}

.chess-model-kicker {
  color: var(--chess-note-kicker);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chess-model-title {
  color: var(--chess-note-title);
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}

.chess-model-summary,
.chess-model-prompt {
  margin: 0;
  font-size: 0.88rem;
}

.chess-model-prompt {
  color: #415668;
}

.chess-model-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chess-model-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 1.72rem;
  padding: 0.26rem 0.54rem;
  border-radius: 999px;
  background: var(--chess-accent-soft);
  color: var(--chess-control-fg);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.chess-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.46rem;
}

.chess-controls label {
  font-size: 0.86rem;
  color: var(--muted);
}

.chess-controls select,
.chess-controls button {
  border: 1px solid var(--chess-shell-border);
  border-radius: 10px;
  background: var(--chess-control-bg);
  color: var(--chess-control-fg);
  font: inherit;
  padding: 0.4rem 0.52rem;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.chess-controls button {
  background: var(--chess-accent);
  border-color: var(--chess-accent);
  color: #fff;
  font-weight: 600;
}

.chess-controls select:focus-visible,
.chess-controls button:focus-visible {
  outline: 2px solid var(--chess-selected);
  outline-offset: 2px;
}

.chess-rules h3 {
  margin: 0 0 0.45rem;
  font-size: 0.96rem;
}

.chess-log {
  margin: 0;
  padding-left: 1.15rem;
  border: 1px solid var(--chess-log-border);
  border-radius: 14px;
  background: var(--chess-log-bg);
  min-height: 130px;
  max-height: 180px;
  overflow: auto;
  display: grid;
  gap: 0.3rem;
  padding-top: 0.48rem;
  padding-bottom: 0.48rem;
}

.chess-log li {
  font-size: 0.84rem;
  line-height: 1.34;
}

.minimax-lab {
  display: grid;
  gap: 0.85rem;
  background-image:
    linear-gradient(rgba(18, 41, 66, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 41, 66, 0.045) 1px, transparent 1px);
  background-size: 18px 18px;
}

.minimax-grid {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.minimax-board-panel,
.minimax-side-panel {
  display: grid;
  gap: 0.62rem;
}

.minimax-turnline {
  border: 1px solid #d7deea;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.58rem 0.64rem;
  display: grid;
  gap: 0.26rem;
}

.minimax-role-tag {
  margin: 0;
  font-weight: 700;
}

.minimax-ai-choice {
  margin: 0;
  color: #354c67;
  font-size: 0.9rem;
}

.minimax-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.minimax-cell {
  border: 1px solid #b8c7dd;
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  background: #fff;
  color: #0b315e;
  font: 700 1.7rem/1 "SFMono-Regular", Menlo, Consolas, monospace;
  cursor: pointer;
}

.minimax-cell:disabled {
  cursor: not-allowed;
  opacity: 0.96;
}

.minimax-cell.is-max {
  color: #1f6feb;
}

.minimax-cell.is-min {
  color: #b2382b;
}

.minimax-cell.is-ai-choice {
  box-shadow: inset 0 0 0 3px #d8ad2a;
}

.minimax-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  align-items: end;
}

.minimax-controls button,
.minimax-debug-controls button {
  border: 1px solid #b9c6da;
  background: #fff;
  color: #0a2f5c;
  border-radius: 10px;
  padding: 0.42rem 0.62rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.minimax-field {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
}

.minimax-field select {
  border: 1px solid #cfd6e1;
  border-radius: 10px;
  padding: 0.35rem 0.46rem;
  background: #fff;
  font: inherit;
}

.minimax-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.87rem;
}

.minimax-panel {
  border: 1px solid #d6dbe3;
  border-radius: 12px;
  background: #fff;
  padding: 0.58rem 0.66rem;
  display: grid;
  gap: 0.38rem;
}

.minimax-panel h3 {
  margin: 0;
  font-size: 0.98rem;
}

.minimax-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.minimax-log {
  border: 1px solid #e2e7ef;
  border-radius: 10px;
  background: #fbfdff;
  max-height: 180px;
  overflow: auto;
  padding: 0.45rem 0.52rem;
  display: grid;
  gap: 0.25rem;
  font: 0.78rem/1.33 "SFMono-Regular", Menlo, Consolas, monospace;
  color: #2f4258;
}

.minimax-role-max,
.minimax-tree-node.is-max .minimax-tree-node-title {
  color: #1f6feb;
}

.minimax-role-min,
.minimax-tree-node.is-min .minimax-tree-node-title {
  color: #c0392b;
}

.minimax-terminal,
.minimax-tree-node-terminal {
  color: #b58900;
  font-weight: 700;
}

.minimax-tree-panel {
  border: 1px solid #d6dbe3;
  border-radius: 12px;
  background: #fff;
  padding: 0.62rem;
  display: grid;
  gap: 0.42rem;
}

.minimax-tree-panel h3 {
  margin: 0;
  font-size: 1rem;
}

.minimax-tree {
  display: grid;
  gap: 0.56rem;
}

.minimax-tree-level {
  display: grid;
  gap: 0.34rem;
}

.minimax-tree-level h4 {
  margin: 0;
  font-size: 0.86rem;
  color: #4a617e;
  letter-spacing: 0.02em;
}

.minimax-tree-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.34rem;
}

.minimax-tree-node {
  border: 1px solid #d6dbe3;
  border-radius: 10px;
  background: #f9fbff;
  padding: 0.4rem 0.46rem;
  display: grid;
  gap: 0.18rem;
}

.minimax-tree-node.is-terminal {
  border-color: #e4cf90;
  background: #fffaf0;
}

.minimax-tree-node-title,
.minimax-tree-node-board,
.minimax-tree-node-score,
.minimax-tree-node-pick {
  margin: 0;
  font-size: 0.76rem;
}

.minimax-tree-node-board {
  font-family: var(--font-mono);
  color: #455b75;
}

.minimax-tree-node-score,
.minimax-tree-node-pick {
  color: #324b68;
}

.minimax-debug {
  border: 1px solid #d6dbe3;
  border-radius: 12px;
  background: #fff;
  padding: 0.52rem 0.58rem;
}

.minimax-debug summary {
  cursor: pointer;
  font-weight: 600;
  color: #2a486d;
}

.minimax-debug-controls {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.58rem;
  align-items: center;
  font-size: 0.86rem;
}

.minimax-debug-log {
  margin: 0.48rem 0 0;
  border: 1px solid #e2e7ef;
  border-radius: 10px;
  background: #fbfdff;
  max-height: 200px;
  overflow: auto;
  padding: 0.5rem 0.55rem;
  font: 0.77rem/1.35 "SFMono-Regular", Menlo, Consolas, monospace;
  color: #2f4258;
  white-space: pre-wrap;
}

.ngram-lesson-main {
  padding-top: 0.95rem;
}

.ngram-live-head {
  display: grid;
  gap: 0.24rem;
  margin-bottom: 0.6rem;
}

.ngram-live-head .eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ngram-live-head h1 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(1.58rem, 3.5vw, 2.45rem);
  line-height: 1.05;
}

.ngram-live-copy {
  margin: 0;
  max-width: 54ch;
  color: #59718a;
  font-size: 0.92rem;
  line-height: 1.4;
}

.ngram-history-card {
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(116, 176, 255, 0.16), transparent 45%),
    radial-gradient(120% 90% at 100% 100%, rgba(255, 181, 112, 0.14), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.ngram-history-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.ngram-history-step {
  border: 1px solid #d7e4f1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  padding: 1rem;
  box-shadow: 0 12px 24px rgba(27, 73, 118, 0.08);
}

.ngram-history-step h3 {
  margin: 0 0 0.45rem;
}

.ngram-history-step p {
  margin: 0;
  color: #39516a;
  line-height: 1.48;
}

.ngram-history-year {
  margin: 0 0 0.38rem;
  color: #6e88a3;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ngram-lab {
  display: grid;
  gap: 1rem;
  background:
    radial-gradient(1000px 440px at 0% 0%, rgba(115, 193, 255, 0.14), transparent 55%),
    radial-gradient(900px 400px at 100% 100%, rgba(255, 204, 126, 0.14), transparent 58%),
    linear-gradient(180deg, #f9fcff 0%, #f1f7ff 100%);
  border: 1px solid #d6e5f2;
}

.ngram-shell-head {
  display: grid;
  gap: 0.52rem;
}

.ngram-shell-note {
  margin: 0;
  color: #5b7692;
  font-size: 0.9rem;
  line-height: 1.35;
}

.ngram-shell-body {
  grid-template-columns: minmax(0, 1.24fr) minmax(340px, 0.96fr);
}

.ngram-stage {
  display: grid;
  grid-template-rows: minmax(0, 1.25fr) minmax(240px, 0.85fr);
  gap: 0.9rem;
  min-height: 0;
}

.ngram-stage-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 0.9rem;
  min-height: 0;
}

.ngram-side {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.ngram-tab-stack {
  min-height: 0;
  overflow: auto;
  padding-right: 0.12rem;
}

.ngram-stage-output,
.ngram-prediction-panel,
.ngram-metrics-panel,
.ngram-metrics-detail-panel,
.ngram-teach-panel,
.ngram-run-panel {
  min-height: 0;
}

.ngram-run-panel {
  order: 1;
}

.ngram-teach-panel {
  order: 2;
}

.ngram-stage-output {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.ngram-onboarding {
  display: grid;
  grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: stretch;
}

.ngram-onboarding-summary,
.ngram-onboarding-block {
  border: 1px solid #d8e4ef;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  padding: 1rem;
}

.ngram-onboarding-summary {
  margin: 0;
  color: #24415f;
  font-size: 1.03rem;
  line-height: 1.55;
  box-shadow: 0 14px 30px rgba(28, 82, 133, 0.08);
}

.ngram-onboarding-block h3 {
  margin: 0 0 0.55rem;
  font-size: 1rem;
}

.ngram-onboarding-block p,
.ngram-onboarding-block li {
  color: #36526e;
  line-height: 1.48;
}

.ngram-step-list,
.ngram-mini-list {
  margin: 0;
  padding-left: 1.1rem;
}

.ngram-control-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #d3e1ee;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  padding: 0.85rem 0.95rem;
}

.ngram-mode-group,
.ngram-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  align-items: center;
}

.ngram-mode-group > span {
  color: #5b7794;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ngram-mode-group button {
  min-height: 2.45rem;
  padding: 0.52rem 0.82rem;
  border: 1px solid #c7d8e8;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #23486e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.ngram-mode-group button.is-active {
  background: linear-gradient(180deg, #e4f1ff 0%, #f6fbff 100%);
  border-color: #7aa5d6;
  box-shadow: 0 12px 24px rgba(46, 110, 175, 0.14);
}

.ngram-toggle-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #2d4f72;
  font-size: 0.94rem;
  font-weight: 600;
}

.ngram-guidance,
.ngram-status {
  margin: 0;
  border-radius: 16px;
  padding: 0.72rem 0.82rem;
}

.ngram-guidance {
  border: 1px solid #d7e4ef;
  background: rgba(255, 255, 255, 0.75);
  color: #2b4b6f;
}

.ngram-status {
  border: 1px solid #cfe0f3;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  color: #153d65;
  font-weight: 700;
}

.ngram-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.ngram-output-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
}

.ngram-panel {
  border: 1px solid #d7e1ec;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  padding: 1rem;
  display: grid;
  gap: 0.65rem;
  box-shadow: 0 16px 32px rgba(29, 76, 120, 0.08);
}

.ngram-panel h3,
.ngram-panel h4 {
  margin: 0;
}

.ngram-panel h4 {
  font-size: 0.98rem;
  color: #365879;
  letter-spacing: 0.01em;
}

.ngram-panel-note {
  margin: -0.2rem 0 0;
  color: #5a7188;
  font-size: 0.9rem;
}

.ngram-field {
  display: grid;
  gap: 0.24rem;
  color: #28496b;
  font-size: 0.92rem;
  font-weight: 700;
}

.ngram-field small {
  color: #67819a;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.38;
}

.ngram-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.62rem;
}

.ngram-stack-field {
  flex: 1 1 160px;
  min-width: 150px;
}

.ngram-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.ngram-preset-card,
.ngram-controls select,
.ngram-controls input,
.ngram-controls button,
.ngram-panel textarea,
.ngram-panel input[type="text"] {
  border: 1px solid #c7d8e7;
  border-radius: 14px;
  background: #fff;
  color: #143c69;
  font: inherit;
}

.ngram-preset-card,
.ngram-controls button {
  cursor: pointer;
}

.ngram-preset-card {
  display: grid;
  gap: 0.24rem;
  padding: 0.9rem;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 255, 0.98)),
    #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.ngram-preset-card strong {
  color: #204a76;
  font-size: 0.98rem;
}

.ngram-preset-card span {
  color: #5f7a94;
  font-size: 0.84rem;
  line-height: 1.4;
}

.ngram-preset-card.is-active {
  border-color: #6f9fd4;
  box-shadow: 0 14px 28px rgba(44, 108, 172, 0.14);
}

.ngram-controls select,
.ngram-controls input,
.ngram-panel input[type="text"] {
  min-height: 3rem;
  padding: 0.62rem 0.72rem;
}

.ngram-panel textarea {
  min-height: 210px;
  resize: vertical;
  line-height: 1.5;
  padding: 0.8rem 0.85rem;
}

.ngram-controls button {
  min-height: 3rem;
  padding: 0.65rem 0.9rem;
  font-weight: 700;
  background:
    linear-gradient(180deg, #ebf6ff 0%, #ffffff 100%),
    #fff;
}

.ngram-controls button:hover,
.ngram-preset-card:hover,
.ngram-mode-group button:hover {
  transform: translateY(-1px);
}

.ngram-preset-card:focus-visible,
.ngram-mode-group button:focus-visible,
.ngram-controls button:focus-visible,
.ngram-controls select:focus-visible,
.ngram-controls input:focus-visible,
.ngram-panel textarea:focus-visible,
.ngram-panel input[type="text"]:focus-visible,
.ngram-prediction-chip:focus-visible {
  outline: 3px solid rgba(0, 113, 227, 0.28);
  outline-offset: 2px;
}

.ngram-predictions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.ngram-prediction-empty {
  border: 1px dashed #cfdeec;
  border-radius: 14px;
  background: #f8fbff;
  padding: 0.9rem;
  color: #5b7591;
}

.ngram-prediction-chip {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 90px) minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  border: 1px solid #d2e0ec;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 0.78rem 0.8rem;
  color: #23486d;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.ngram-prediction-chip:hover {
  transform: translateY(-1px);
  border-color: #7ba6d6;
  box-shadow: 0 12px 24px rgba(42, 102, 162, 0.12);
}

.ngram-prediction-token {
  font-weight: 700;
  word-break: break-word;
}

.ngram-prediction-bar {
  position: relative;
  height: 0.65rem;
  border-radius: 999px;
  background: #e7eff7;
  overflow: hidden;
}

.ngram-prediction-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #5ea0ff 0%, #80d7ff 100%);
}

.ngram-prediction-prob {
  color: #54718d;
  font-size: 0.84rem;
  font-weight: 700;
}

.ngram-output {
  margin: 0;
  border: 1px solid #dbe6f1;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f9ff 100%);
  padding: 0.85rem 0.9rem;
  min-height: 190px;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 0.9rem/1.55 "SFMono-Regular", Menlo, Consolas, monospace;
  color: #274762;
}

.ngram-stage-output .ngram-output,
.ngram-metrics-details .ngram-output {
  min-height: 0;
  height: 100%;
  max-height: none;
}

.ngram-prediction-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.ngram-prediction-panel .ngram-predictions,
.ngram-metrics-detail-panel .ngram-metrics-details,
.ngram-metrics-panel .ngram-metric-cards {
  min-height: 0;
}

.ngram-prediction-panel .ngram-predictions,
.ngram-metrics-detail-panel .ngram-metrics-details {
  overflow: auto;
}

.ngram-metric-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
  align-content: start;
}

.ngram-metric-card {
  border: 1px solid #d6e3ef;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.96));
  padding: 0.9rem;
  display: grid;
  gap: 0.3rem;
}

.ngram-metric-label {
  color: #5f7992;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ngram-metric-value {
  color: #163e66;
  font-size: 1.25rem;
  line-height: 1.15;
}

.ngram-metric-detail {
  margin: 0;
  color: #58728a;
  font-size: 0.82rem;
  line-height: 1.42;
}

.ngram-metrics-details {
  border: 1px solid #d6e1ec;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  padding: 0.4rem;
}

.ngram-metrics-details summary {
  cursor: pointer;
  padding: 0.45rem 0.55rem;
  color: #2e5379;
  font-weight: 700;
}

.ngram-teach-panel textarea {
  min-height: 150px;
  max-height: 220px;
}

.ngram-run-note {
  margin-top: -0.1rem;
}

.ngram-lab.ngram-high-contrast {
  background: #111;
  color: #fff;
  border-color: #fff;
}

@media (min-width: 981px) {
  .ngram-shell-body {
    height: clamp(600px, calc(100dvh - 15rem), 820px);
    max-height: clamp(600px, calc(100dvh - 15rem), 820px);
  }

  .ngram-stage,
  .ngram-side,
  .ngram-tab-stack {
    max-height: 100%;
  }
}

.ngram-lab.ngram-high-contrast .ngram-onboarding-summary,
.ngram-lab.ngram-high-contrast .ngram-onboarding-block,
.ngram-lab.ngram-high-contrast .ngram-control-strip,
.ngram-lab.ngram-high-contrast .ngram-guidance,
.ngram-lab.ngram-high-contrast .ngram-status,
.ngram-lab.ngram-high-contrast .ngram-panel,
.ngram-lab.ngram-high-contrast .ngram-metric-card,
.ngram-lab.ngram-high-contrast .ngram-metrics-details {
  background: #000;
  color: #fff;
  border-color: #fff;
}

.ngram-lab.ngram-high-contrast .ngram-field,
.ngram-lab.ngram-high-contrast .ngram-panel-note,
.ngram-lab.ngram-high-contrast .ngram-onboarding-block p,
.ngram-lab.ngram-high-contrast .ngram-onboarding-block li,
.ngram-lab.ngram-high-contrast .ngram-metric-label,
.ngram-lab.ngram-high-contrast .ngram-metric-detail,
.ngram-lab.ngram-high-contrast .ngram-prediction-prob {
  color: #fff;
}

.ngram-lab.ngram-high-contrast .ngram-preset-card,
.ngram-lab.ngram-high-contrast .ngram-controls select,
.ngram-lab.ngram-high-contrast .ngram-controls input,
.ngram-lab.ngram-high-contrast .ngram-controls button,
.ngram-lab.ngram-high-contrast .ngram-panel textarea,
.ngram-lab.ngram-high-contrast .ngram-panel input[type="text"],
.ngram-lab.ngram-high-contrast .ngram-prediction-chip,
.ngram-lab.ngram-high-contrast .ngram-output {
  background: #111;
  color: #fff;
  border-color: #fff;
}

.ngram-lab.ngram-high-contrast .ngram-prediction-bar {
  background: #2f2f2f;
}

.ngram-lab.ngram-dyslexic {
  font-family: var(--font-sans);
}

@media (max-width: 980px) {
  .ngram-history-grid,
  .ngram-onboarding {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-height: 820px) {
  .ngram-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .ngram-tab-panel {
    display: none;
  }

  .ngram-tab-panel.is-active {
    display: grid;
  }

  .ngram-live-head {
    gap: 0.16rem;
    margin-bottom: 0.45rem;
  }

  .ngram-live-head h1 {
    max-width: 15ch;
    font-size: clamp(1.36rem, 2.6vw, 1.85rem);
  }

  .ngram-live-copy {
    display: none;
  }

  .ngram-shell-note {
    display: none;
  }

  .ngram-shell-body {
    grid-template-columns: minmax(0, 1.14fr) minmax(300px, 0.92fr);
    height: clamp(500px, calc(100dvh - 11rem), 660px);
    min-height: clamp(500px, calc(100dvh - 11rem), 660px);
    max-height: clamp(500px, calc(100dvh - 11rem), 660px);
  }

  .ngram-stage {
    grid-template-rows: minmax(0, 1fr) minmax(165px, 0.72fr);
  }

  .ngram-stage-output .ngram-output {
    min-height: 130px;
  }

  .ngram-side {
    max-height: 100%;
  }

  .ngram-tab-stack {
    overflow: hidden;
  }

  .ngram-tab-panel.is-active {
    min-height: 0;
    overflow: auto;
    padding-right: 0.12rem;
  }

  .ngram-status {
    padding: 0.58rem 0.72rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 980px) {
  .ngram-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .ngram-tab-panel {
    display: none;
  }

  .ngram-tab-panel.is-active {
    display: grid;
  }

  .ngram-live-head {
    gap: 0.16rem;
    margin-bottom: 0.45rem;
  }

  .ngram-live-head h1 {
    max-width: 16ch;
    font-size: clamp(1.32rem, 5vw, 1.85rem);
  }

  .ngram-live-copy,
  .ngram-shell-note {
    display: none;
  }

  .ngram-shell-head {
    gap: 0.42rem;
  }

  .ngram-shell-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(210px, 0.88fr) minmax(245px, 1.12fr);
    height: clamp(480px, calc(100dvh - 10.5rem), 620px);
    min-height: clamp(480px, calc(100dvh - 10.5rem), 620px);
    max-height: clamp(480px, calc(100dvh - 10.5rem), 620px);
  }

  .ngram-stage {
    grid-template-rows: minmax(0, 1fr) minmax(112px, 138px);
  }

  .ngram-stage-bottom {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .ngram-run-panel {
    gap: 0.5rem;
    padding: 0.82rem;
  }

  .ngram-run-panel .ngram-field small,
  .ngram-run-panel .ngram-run-note {
    display: none;
  }

  .ngram-run-panel .ngram-controls select,
  .ngram-run-panel .ngram-controls input,
  .ngram-run-panel .ngram-controls button,
  .ngram-run-panel input[type="text"] {
    min-height: 2.7rem;
  }

  .ngram-stage-output .ngram-output {
    min-height: 130px;
  }

  .ngram-side {
    min-height: 0;
    max-height: none;
  }

  .ngram-tab-stack {
    overflow: hidden;
  }

  .ngram-tab-panel.is-active {
    min-height: 0;
    overflow: auto;
    padding-right: 0.12rem;
  }

  .ngram-status {
    padding: 0.58rem 0.72rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 780px) {
  .ngram-history-grid,
  .ngram-onboarding,
  .ngram-preset-grid,
  .ngram-metric-cards {
    grid-template-columns: 1fr;
  }

  .ngram-control-strip {
    align-items: stretch;
  }

  .ngram-mode-group,
  .ngram-toggle-group {
    width: 100%;
  }

  .ngram-prediction-chip {
    grid-template-columns: 1fr;
  }
}

.astar-mission-lab {
  display: grid;
  gap: 0.95rem;
  background:
    linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%),
    linear-gradient(90deg, rgba(19, 54, 92, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(19, 54, 92, 0.04) 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
}

.astar-control-bar {
  display: grid;
  gap: 0.58rem;
}

.astar-control-group {
  border: 1px solid #d2deee;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.62rem 0.68rem;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.45rem;
}

.astar-control-group label,
.astar-control-group .astar-label {
  font-size: 0.84rem;
  color: #375170;
  font-weight: 600;
}

.astar-control-group select,
.astar-control-group input,
.astar-control-group button {
  border: 1px solid #bccbdd;
  border-radius: 10px;
  background: #fff;
  color: #13385f;
  font: inherit;
  padding: 0.42rem 0.56rem;
}

#astar-ai-name {
  min-width: 8.6rem;
}

.astar-control-group button {
  cursor: pointer;
  font-weight: 650;
}

.astar-tool.is-active {
  background: #0f4e96;
  color: #fff;
  border-color: #0f4e96;
}

.astar-grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 0.72rem;
  align-items: start;
}

.astar-grid-panel,
.astar-side-panel {
  display: grid;
  gap: 0.62rem;
  min-width: 0;
}

.astar-grid {
  --astar-cols: 12;
  border: 1px solid #ced9ea;
  border-radius: 14px;
  background: #f7faff;
  padding: 0.52rem;
  display: grid;
  grid-template-columns: repeat(var(--astar-cols), minmax(28px, 1fr));
  gap: 0.26rem;
}

.astar-cell {
  border: 1px solid #d8e0ed;
  border-radius: 7px;
  min-height: 32px;
  background: #ffffff;
  color: #0e325f;
  font: 700 0.9rem/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "SFMono-Regular", Menlo, Consolas, monospace;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.astar-cell.is-clear:hover {
  background: #eef5ff;
}

.astar-cell.is-debris {
  background: #303740;
  color: #e8edf8;
  border-color: #303740;
}

.astar-cell.is-sand {
  background: #f6e7c5;
  border-color: #ddc08a;
  color: #6c5120;
}

.astar-cell.is-rover {
  background: #d8ecff;
  border-color: #95bdec;
  color: #103f72;
}

.astar-cell.is-beacon {
  background: #e9ffe7;
  border-color: #a7d89f;
  color: #1f5b1b;
}

.astar-cell.is-open {
  box-shadow: inset 0 0 0 2px #5fa0ed;
}

.astar-cell.is-closed {
  background-image: linear-gradient(135deg, rgba(116, 136, 163, 0.2) 0%, rgba(116, 136, 163, 0.2) 50%, transparent 50%, transparent 100%);
  background-size: 8px 8px;
}

.astar-cell.is-current {
  box-shadow: inset 0 0 0 3px #f0ae2f;
}

.astar-cell.is-path {
  background: #cdf4d3;
  border-color: #8bcf98;
}

.astar-status {
  margin: 0;
  border: 1px solid #d7deea;
  border-radius: 12px;
  background: #f9fbff;
  padding: 0.55rem 0.62rem;
  color: #26476b;
  font-size: 0.9rem;
}

.astar-legend {
  margin: 0;
  padding: 0.55rem 0.6rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.36rem 0.52rem;
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  background: #fff;
  font-size: 0.83rem;
}

.astar-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: #2e4968;
}

.astar-legend .swatch {
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid #c9d4e6;
  border-radius: 4px;
  display: inline-block;
}

.astar-legend .swatch.rover {
  background: #d8ecff;
}

.astar-legend .swatch.beacon {
  background: #e9ffe7;
}

.astar-legend .swatch.debris {
  background: #303740;
  border-color: #303740;
}

.astar-legend .swatch.sand {
  background: #f6e7c5;
}

.astar-legend .swatch.open {
  background: #ffffff;
  box-shadow: inset 0 0 0 2px #5fa0ed;
}

.astar-legend .swatch.closed {
  background: repeating-linear-gradient(135deg, #dce3ef 0, #dce3ef 2px, #ffffff 2px, #ffffff 4px);
}

.astar-legend .swatch.path {
  background: #cdf4d3;
}

/* ── Per-theme grid graphics ─────────────────────────────────────────────── */
/*  data-theme is set on .astar-grid and .astar-grid-panel by a-star-lab.js  */

/* ── MARS ROVER ───────────────────────────────────────────────────────────── */
.astar-grid[data-theme="mars"],
.astar-grid-panel[data-theme="mars"] {
  --astar-rover-bg:#1a56b0;   --astar-rover-bd:#4a8aff;
  --astar-beacon-bg:#0a7840;  --astar-beacon-bd:#18e868;
  --astar-debris-bg:#0d0808;  --astar-debris-bd:#2a1808;
  --astar-sand-bg:#c86820;    --astar-sand-bd:#a84810;
  --astar-open-bg:#2e1a0a;    --astar-open-shadow:#e08000;  --astar-stripe:rgba(180,80,20,0.45);
  --astar-path-bg:#00c8c0;    --astar-path-bd:#00a0b8;
}
.astar-grid[data-theme="mars"] {
  background: #180e06;
  border-color: #7a3510;
}
.astar-grid[data-theme="mars"] .astar-cell {
  background: #2e1a0a;
  border-color: #5c3018;
  color: #e8cca8;
}
.astar-grid[data-theme="mars"] .astar-cell.is-clear:hover { background: #3e2410; }
.astar-grid[data-theme="mars"] .astar-cell.is-rover   { background: #1a56b0; border-color: #4a8aff; box-shadow: 0 0 8px rgba(74,138,255,0.55); }
.astar-grid[data-theme="mars"] .astar-cell.is-beacon  { background: #0a7840; border-color: #18e868; box-shadow: 0 0 8px rgba(24,232,104,0.45); }
.astar-grid[data-theme="mars"] .astar-cell.is-debris  { background: #0d0808; border-color: #2a1808; }
.astar-grid[data-theme="mars"] .astar-cell.is-sand    { background: #c86820; border-color: #a84810; }
.astar-grid[data-theme="mars"] .astar-cell.is-open    { box-shadow: inset 0 0 0 2.5px #e08000; background: #3a2010; }
.astar-grid[data-theme="mars"] .astar-cell.is-closed  { background-image: repeating-linear-gradient(135deg, rgba(180,80,20,0.25) 0, rgba(180,80,20,0.25) 2px, transparent 2px, transparent 6px); }
.astar-grid[data-theme="mars"] .astar-cell.is-path    { background: #00c8c0; border-color: #00a0b8; }
.astar-grid[data-theme="mars"] .astar-cell.is-current { box-shadow: inset 0 0 0 3px #ff7000; }

/* ── RESTAURANT ──────────────────────────────────────────────────────────── */
.astar-grid[data-theme="restaurant"],
.astar-grid-panel[data-theme="restaurant"] {
  --astar-rover-bg:#1855c0;   --astar-rover-bd:#4878e8;
  --astar-beacon-bg:#7c3a14;  --astar-beacon-bd:#b05c28;
  --astar-debris-bg:#3c2414;  --astar-debris-bd:#6a4028;
  --astar-sand-bg:#e89820;    --astar-sand-bd:#c07800;
  --astar-open-bg:#fffcf5;    --astar-open-shadow:#d49000;  --astar-stripe:rgba(180,140,80,0.4);
  --astar-path-bg:#f0c030;    --astar-path-bd:#c8a010;
}
.astar-grid[data-theme="restaurant"] {
  background: #f8f2e6;
  border-color: #c9a878;
}
.astar-grid[data-theme="restaurant"] .astar-cell {
  background: #fffcf5;
  border-color: #e0d4c0;
  color: #5a3a1a;
}
.astar-grid[data-theme="restaurant"] .astar-cell.is-clear:hover { background: #fff5e0; }
.astar-grid[data-theme="restaurant"] .astar-cell.is-rover   { background: #1855c0; border-color: #4878e8; box-shadow: 0 0 8px rgba(72,120,232,0.4); }
.astar-grid[data-theme="restaurant"] .astar-cell.is-beacon  { background: #7c3a14; border-color: #b05c28; box-shadow: 0 0 6px rgba(176,92,40,0.4); }
.astar-grid[data-theme="restaurant"] .astar-cell.is-debris  { background: #3c2414; border-color: #6a4028; }
.astar-grid[data-theme="restaurant"] .astar-cell.is-sand    { background: #e89820; border-color: #c07800; }
.astar-grid[data-theme="restaurant"] .astar-cell.is-open    { box-shadow: inset 0 0 0 2.5px #d49000; background: #fff8e8; }
.astar-grid[data-theme="restaurant"] .astar-cell.is-closed  { background-image: repeating-linear-gradient(135deg, rgba(180,140,80,0.22) 0, rgba(180,140,80,0.22) 2px, transparent 2px, transparent 6px); }
.astar-grid[data-theme="restaurant"] .astar-cell.is-path    { background: #f0c030; border-color: #c8a010; }
.astar-grid[data-theme="restaurant"] .astar-cell.is-current { box-shadow: inset 0 0 0 3px #ff8000; }

/* ── SELF-DRIVING CAR ────────────────────────────────────────────────────── */
.astar-grid[data-theme="car"],
.astar-grid-panel[data-theme="car"] {
  --astar-rover-bg:#cc2020;   --astar-rover-bd:#ff5050;
  --astar-beacon-bg:#147840;  --astar-beacon-bd:#20c060;
  --astar-debris-bg:#d06010;  --astar-debris-bd:#ff8020;
  --astar-sand-bg:#c89000;    --astar-sand-bd:#e0b400;
  --astar-open-bg:#22242e;    --astar-open-shadow:#20c860;  --astar-stripe:rgba(100,108,140,0.5);
  --astar-path-bg:#e8d800;    --astar-path-bd:#b8b000;
}
.astar-grid[data-theme="car"] {
  background: #1a1c24;
  border-color: #3a3e50;
}
.astar-grid[data-theme="car"] .astar-cell {
  background: #22242e;
  border-color: #363848;
  color: #c8ccdc;
}
.astar-grid[data-theme="car"] .astar-cell.is-clear:hover { background: #2c3040; }
.astar-grid[data-theme="car"] .astar-cell.is-rover   { background: #cc2020; border-color: #ff5050; box-shadow: 0 0 8px rgba(255,80,80,0.45); }
.astar-grid[data-theme="car"] .astar-cell.is-beacon  { background: #147840; border-color: #20c060; box-shadow: 0 0 8px rgba(32,192,96,0.4); }
.astar-grid[data-theme="car"] .astar-cell.is-debris  { background: #d06010; border-color: #ff8020; }
.astar-grid[data-theme="car"] .astar-cell.is-sand    { background: #c89000; border-color: #e0b400; }
.astar-grid[data-theme="car"] .astar-cell.is-open    { box-shadow: inset 0 0 0 2.5px #20c860; background: #1c2830; }
.astar-grid[data-theme="car"] .astar-cell.is-closed  { background-image: repeating-linear-gradient(135deg, rgba(100,108,140,0.3) 0, rgba(100,108,140,0.3) 2px, transparent 2px, transparent 6px); }
.astar-grid[data-theme="car"] .astar-cell.is-path    { background: #e8d800; border-color: #b8b000; color: #1a1c24; }
.astar-grid[data-theme="car"] .astar-cell.is-current { box-shadow: inset 0 0 0 3px #ffffff; }

/* ── DELIVERY DRONE ──────────────────────────────────────────────────────── */
.astar-grid[data-theme="drone"],
.astar-grid-panel[data-theme="drone"] {
  --astar-rover-bg:#2080d0;   --astar-rover-bd:#60b8ff;
  --astar-beacon-bg:#8a5018;  --astar-beacon-bd:#c07830;
  --astar-debris-bg:#1e3050;  --astar-debris-bd:#304868;
  --astar-sand-bg:#78b8e0;    --astar-sand-bd:#4898cc;
  --astar-open-bg:#d0eaff;    --astar-open-shadow:#00b8ff;  --astar-stripe:rgba(80,140,200,0.45);
  --astar-path-bg:#e8f8ff;    --astar-path-bd:#80d0ff;
}
.astar-grid[data-theme="drone"] {
  background: #b8dcff;
  border-color: #78b4e8;
}
.astar-grid[data-theme="drone"] .astar-cell {
  background: #d0eaff;
  border-color: #a0c8f0;
  color: #1a3a5c;
}
.astar-grid[data-theme="drone"] .astar-cell.is-clear:hover { background: #e0f2ff; }
.astar-grid[data-theme="drone"] .astar-cell.is-rover   { background: #2080d0; border-color: #60b8ff; box-shadow: 0 0 8px rgba(96,184,255,0.5); }
.astar-grid[data-theme="drone"] .astar-cell.is-beacon  { background: #8a5018; border-color: #c07830; box-shadow: 0 0 6px rgba(192,120,48,0.4); }
.astar-grid[data-theme="drone"] .astar-cell.is-debris  { background: #1e3050; border-color: #304868; }
.astar-grid[data-theme="drone"] .astar-cell.is-sand    { background: #78b8e0; border-color: #4898cc; }
.astar-grid[data-theme="drone"] .astar-cell.is-open    { box-shadow: inset 0 0 0 2.5px #00b8ff; background: #c0e8ff; }
.astar-grid[data-theme="drone"] .astar-cell.is-closed  { background-image: repeating-linear-gradient(135deg, rgba(80,140,200,0.28) 0, rgba(80,140,200,0.28) 2px, transparent 2px, transparent 6px); }
.astar-grid[data-theme="drone"] .astar-cell.is-path    { background: #e8f8ff; border-color: #80d0ff; box-shadow: 0 0 4px rgba(0,180,255,0.3); }
.astar-grid[data-theme="drone"] .astar-cell.is-current { box-shadow: inset 0 0 0 3px #00a0ff; }

/* ── FIREFIGHTER RESCUE ──────────────────────────────────────────────────── */
.astar-grid[data-theme="firefighter"],
.astar-grid-panel[data-theme="firefighter"] {
  --astar-rover-bg:#c01818;   --astar-rover-bd:#f04040;
  --astar-beacon-bg:#e04000;  --astar-beacon-bd:#ff6800;
  --astar-debris-bg:#0e0c0a;  --astar-debris-bd:#201a14;
  --astar-sand-bg:#102878;    --astar-sand-bd:#1840c0;
  --astar-open-bg:#1c1510;    --astar-open-shadow:#e86000;  --astar-stripe:rgba(160,60,20,0.5);
  --astar-path-bg:#e85800;    --astar-path-bd:#c83800;
}
.astar-grid[data-theme="firefighter"] {
  background: #130e0a;
  border-color: #7a2808;
}
.astar-grid[data-theme="firefighter"] .astar-cell {
  background: #1c1510;
  border-color: #3a2418;
  color: #e8d0b8;
}
.astar-grid[data-theme="firefighter"] .astar-cell.is-clear:hover { background: #281c14; }
.astar-grid[data-theme="firefighter"] .astar-cell.is-rover   { background: #c01818; border-color: #f04040; box-shadow: 0 0 10px rgba(240,64,64,0.5); }
.astar-grid[data-theme="firefighter"] .astar-cell.is-beacon  { background: #e04000; border-color: #ff6800; box-shadow: 0 0 12px rgba(255,104,0,0.65); }
.astar-grid[data-theme="firefighter"] .astar-cell.is-debris  { background: #0e0c0a; border-color: #201a14; }
.astar-grid[data-theme="firefighter"] .astar-cell.is-sand    { background: #102878; border-color: #1840c0; }
.astar-grid[data-theme="firefighter"] .astar-cell.is-open    { box-shadow: inset 0 0 0 2.5px #e86000; background: #281808; }
.astar-grid[data-theme="firefighter"] .astar-cell.is-closed  { background-image: repeating-linear-gradient(135deg, rgba(160,60,20,0.3) 0, rgba(160,60,20,0.3) 2px, transparent 2px, transparent 6px); }
.astar-grid[data-theme="firefighter"] .astar-cell.is-path    { background: #e85800; border-color: #c83800; box-shadow: 0 0 6px rgba(232,88,0,0.4); }
.astar-grid[data-theme="firefighter"] .astar-cell.is-current { box-shadow: inset 0 0 0 3px #ffa000; }

/* ── HOSPITAL ROBOT ──────────────────────────────────────────────────────── */
.astar-grid[data-theme="hospital"],
.astar-grid-panel[data-theme="hospital"] {
  --astar-rover-bg:#0e5abf;   --astar-rover-bd:#3c8aff;
  --astar-beacon-bg:#148a44;  --astar-beacon-bd:#20c868;
  --astar-debris-bg:#506878;  --astar-debris-bd:#789aad;
  --astar-sand-bg:#e08a50;    --astar-sand-bd:#c06030;
  --astar-open-bg:#f8feff;    --astar-open-shadow:#2870e0;  --astar-stripe:rgba(100,150,190,0.4);
  --astar-path-bg:#20c060;    --astar-path-bd:#10a040;
}
.astar-grid[data-theme="hospital"] {
  background: #edf5fe;
  border-color: #a8c8e0;
}
.astar-grid[data-theme="hospital"] .astar-cell {
  background: #f8feff;
  border-color: #d0e8f4;
  color: #1a3a5c;
}
.astar-grid[data-theme="hospital"] .astar-cell.is-clear:hover { background: #e8f5ff; }
.astar-grid[data-theme="hospital"] .astar-cell.is-rover   { background: #0e5abf; border-color: #3c8aff; box-shadow: 0 0 8px rgba(60,138,255,0.4); }
.astar-grid[data-theme="hospital"] .astar-cell.is-beacon  { background: #148a44; border-color: #20c868; box-shadow: 0 0 8px rgba(32,200,104,0.4); }
.astar-grid[data-theme="hospital"] .astar-cell.is-debris  { background: #506878; border-color: #789aad; }
.astar-grid[data-theme="hospital"] .astar-cell.is-sand    { background: #e08a50; border-color: #c06030; }
.astar-grid[data-theme="hospital"] .astar-cell.is-open    { box-shadow: inset 0 0 0 2.5px #2870e0; background: #e0f0ff; }
.astar-grid[data-theme="hospital"] .astar-cell.is-closed  { background-image: repeating-linear-gradient(135deg, rgba(100,150,190,0.22) 0, rgba(100,150,190,0.22) 2px, transparent 2px, transparent 6px); }
.astar-grid[data-theme="hospital"] .astar-cell.is-path    { background: #20c060; border-color: #10a040; }
.astar-grid[data-theme="hospital"] .astar-cell.is-current { box-shadow: inset 0 0 0 3px #0060d0; }

/* ── TREASURE HUNTER ─────────────────────────────────────────────────────── */
.astar-grid[data-theme="treasure"],
.astar-grid-panel[data-theme="treasure"] {
  --astar-rover-bg:#a87c28;   --astar-rover-bd:#e0b040;
  --astar-beacon-bg:#d4a800;  --astar-beacon-bd:#ffd800;
  --astar-debris-bg:#050f08;  --astar-debris-bd:#0a1a10;
  --astar-sand-bg:#3c4c14;    --astar-sand-bd:#5c6e24;
  --astar-open-bg:#0e2416;    --astar-open-shadow:#d4a000;  --astar-stripe:rgba(80,130,60,0.5);
  --astar-path-bg:#f0c800;    --astar-path-bd:#c8a400;
}
.astar-grid[data-theme="treasure"] {
  background: #081a10;
  border-color: #1a5028;
}
.astar-grid[data-theme="treasure"] .astar-cell {
  background: #0e2416;
  border-color: #184030;
  color: #c8e0b0;
}
.astar-grid[data-theme="treasure"] .astar-cell.is-clear:hover { background: #162e1e; }
.astar-grid[data-theme="treasure"] .astar-cell.is-rover   { background: #a87c28; border-color: #e0b040; box-shadow: 0 0 8px rgba(224,176,64,0.45); }
.astar-grid[data-theme="treasure"] .astar-cell.is-beacon  { background: #d4a800; border-color: #ffd800; box-shadow: 0 0 12px rgba(255,216,0,0.6); }
.astar-grid[data-theme="treasure"] .astar-cell.is-debris  { background: #050f08; border-color: #0a1a10; }
.astar-grid[data-theme="treasure"] .astar-cell.is-sand    { background: #3c4c14; border-color: #5c6e24; }
.astar-grid[data-theme="treasure"] .astar-cell.is-open    { box-shadow: inset 0 0 0 2.5px #d4a000; background: #162810; }
.astar-grid[data-theme="treasure"] .astar-cell.is-closed  { background-image: repeating-linear-gradient(135deg, rgba(80,130,60,0.28) 0, rgba(80,130,60,0.28) 2px, transparent 2px, transparent 6px); }
.astar-grid[data-theme="treasure"] .astar-cell.is-path    { background: #f0c800; border-color: #c8a400; color: #0e2416; }
.astar-grid[data-theme="treasure"] .astar-cell.is-current { box-shadow: inset 0 0 0 3px #ffcc00; }

/* ── MARIO ADVENTURE ─────────────────────────────────────────────────────── */
.astar-grid[data-theme="mario"],
.astar-grid-panel[data-theme="mario"] {
  --astar-rover-bg:#d01818;   --astar-rover-bd:#ff4040;
  --astar-beacon-bg:#18a030;  --astar-beacon-bd:#30e050;
  --astar-debris-bg:#c04818;  --astar-debris-bd:#983010;
  --astar-sand-bg:#8c3010;    --astar-sand-bd:#b85030;
  --astar-open-bg:#6888ff;    --astar-open-shadow:#e8c000;  --astar-stripe:rgba(30,50,170,0.6);
  --astar-path-bg:#f8e800;    --astar-path-bd:#d0c000;
}
.astar-grid[data-theme="mario"] {
  background: #5070f0;
  border-color: #3050d0;
}
.astar-grid[data-theme="mario"] .astar-cell {
  background: #6888ff;
  border-color: #4868e0;
  color: #ffffff;
}
.astar-grid[data-theme="mario"] .astar-cell.is-clear:hover { background: #7898ff; }
.astar-grid[data-theme="mario"] .astar-cell.is-rover   { background: #d01818; border-color: #ff4040; box-shadow: 0 0 8px rgba(255,64,64,0.5); }
.astar-grid[data-theme="mario"] .astar-cell.is-beacon  { background: #18a030; border-color: #30e050; box-shadow: 0 0 8px rgba(48,224,80,0.45); }
.astar-grid[data-theme="mario"] .astar-cell.is-debris  { background: #c04818; border-color: #983010; }
.astar-grid[data-theme="mario"] .astar-cell.is-sand    { background: #8c3010; border-color: #b85030; }
.astar-grid[data-theme="mario"] .astar-cell.is-open    { box-shadow: inset 0 0 0 2.5px #e8c000; background: #5878e8; }
.astar-grid[data-theme="mario"] .astar-cell.is-closed  { background-image: repeating-linear-gradient(135deg, rgba(30,50,170,0.4) 0, rgba(30,50,170,0.4) 2px, transparent 2px, transparent 6px); }
.astar-grid[data-theme="mario"] .astar-cell.is-path    { background: #f8e800; border-color: #d0c000; color: #3050d0; }
.astar-grid[data-theme="mario"] .astar-cell.is-current { box-shadow: inset 0 0 0 3px #ffe800; }

/* ── Panel swatches (colours set via per-theme vars above) ─────────────── */
.astar-grid-panel .swatch.rover   { background: var(--astar-rover-bg);  border-color: var(--astar-rover-bd); }
.astar-grid-panel .swatch.beacon  { background: var(--astar-beacon-bg); border-color: var(--astar-beacon-bd); }
.astar-grid-panel .swatch.debris  { background: var(--astar-debris-bg); border-color: var(--astar-debris-bd); }
.astar-grid-panel .swatch.sand    { background: var(--astar-sand-bg);   border-color: var(--astar-sand-bd); }
.astar-grid-panel .swatch.open    { background: var(--astar-open-bg);   box-shadow: inset 0 0 0 2px var(--astar-open-shadow); }
.astar-grid-panel .swatch.closed  { background: repeating-linear-gradient(135deg, var(--astar-stripe) 0, var(--astar-stripe) 2px, var(--astar-open-bg) 2px, var(--astar-open-bg) 5px); }
.astar-grid-panel .swatch.path    { background: var(--astar-path-bg);   border-color: var(--astar-path-bd); }

.astar-panel {
  border: 1px solid #d7deea;
  border-radius: 12px;
  background: #fff;
  padding: 0.58rem 0.64rem;
  display: grid;
  gap: 0.42rem;
}

.astar-panel h3 {
  margin: 0;
  font-size: 1rem;
}

.astar-panel-note {
  margin: 0;
  color: #4a617f;
  font-size: 0.85rem;
}

.astar-instrument-list,
.astar-metric-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.astar-instrument-list li,
.astar-metric-list li {
  border: 1px solid #e1e7f1;
  border-radius: 10px;
  background: #f9fbff;
  padding: 0.38rem 0.44rem;
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  align-items: center;
}

.astar-instrument-list li span,
.astar-metric-list li span {
  color: #38516f;
  font-size: 0.84rem;
}

.astar-instrument-list li strong,
.astar-metric-list li strong {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: #0b315d;
  font-variant-numeric: tabular-nums;
}

.astar-table-wrap {
  overflow-x: auto;
}

.astar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.astar-table th,
.astar-table td {
  border: 1px solid #d9e3ef;
  padding: 0.34rem 0.4rem;
  text-align: left;
}

.astar-table th {
  background: #f3f8ff;
  color: #25486f;
}

.astar-table tr.is-selected {
  background: #edf5ff;
}

.chat-log {
  border: 1px solid var(--term-line);
  border-radius: 12px;
  background: var(--term-panel);
  padding: 0.85rem;
  min-height: 230px;
  max-height: 380px;
  overflow-y: auto;
  display: grid;
  gap: 0.55rem;
  text-shadow: var(--text-glow);
}

.chat-row {
  padding: 0.48rem 0.58rem;
  border-radius: 8px;
  max-width: 100%;
  line-height: 1.42;
  border: 1px solid var(--term-line);
  background: var(--term-bot-bg);
}

.chat-row strong {
  font-size: 0.78rem;
  display: inline-block;
  margin: 0 0.46rem 0 0;
  color: var(--term-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat-row span {
  color: var(--term-text);
  font-size: 0.93rem;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.chat-row.bot {
  justify-self: start;
}

.chat-row.user {
  background: var(--term-user-bg);
}

.eliza-lab[data-theme="doctor"] .chat-row span,
.eliza-lab[data-theme="effect"] .chat-row span {
  letter-spacing: 0.02em;
}

.chat-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.55rem;
}

.chat-controls input {
  min-width: 0;
  border: 1px solid var(--term-line);
  border-radius: 10px;
  padding: 0.62rem 0.7rem;
  font: inherit;
  background: var(--term-input-bg);
  color: var(--term-input-text);
  text-shadow: var(--text-glow);
}

.chat-controls input::placeholder {
  color: var(--term-muted);
  opacity: 1;
}

.chat-controls button {
  border: 1px solid var(--term-line);
  background: var(--term-panel);
  color: var(--term-text);
  border-radius: 10px;
  padding: 0.6rem 0.78rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-shadow: var(--text-glow);
}

.chat-controls button[type="submit"] {
  background: var(--term-action-bg);
  color: var(--term-action-text);
  border-color: var(--term-action-bg);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.site-footer {
  padding: 1.1rem 0 2rem;
  color: var(--muted);
  font-size: 0.89rem;
}

:focus-visible {
  outline: 3px solid #7cc3ff;
  outline-offset: 2px;
  border-radius: 10px;
}

body.downloads-page {
  --downloads-accent: #0f6fd6;
  --downloads-accent-strong: #0b58ad;
  --downloads-accent-soft: rgba(15, 111, 214, 0.12);
  --downloads-mint: #148067;
  --downloads-mint-soft: rgba(20, 128, 103, 0.12);
  --downloads-gold: #9a6a08;
}

body.downloads-page[data-lighting="night"] {
  --downloads-accent: #83bbff;
  --downloads-accent-strong: #9dcbff;
  --downloads-accent-soft: rgba(131, 187, 255, 0.18);
  --downloads-mint: #8be7c4;
  --downloads-mint-soft: rgba(139, 231, 196, 0.16);
  --downloads-gold: #efc978;
}

.downloads-main {
  display: grid;
  gap: 1rem;
}

.downloads-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.92fr);
  gap: 1rem;
  align-items: stretch;
  padding: 0.45rem 0 0.25rem;
}

.downloads-hero-copy,
.downloads-hero-panel,
.downloads-command,
.downloads-featured-card,
.downloads-catalog-card,
.downloads-empty {
  border-radius: var(--radius);
  border: 1px solid rgba(210, 210, 215, 0.74);
  box-shadow: var(--shadow);
}

.downloads-hero-copy,
.downloads-hero-panel,
.downloads-command,
.downloads-featured-card,
.downloads-catalog-card {
  background:
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
}

.downloads-hero-copy {
  padding: 1.4rem;
  background:
    radial-gradient(110% 120% at 0% 0%, var(--downloads-accent-soft), transparent 52%),
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
}

.downloads-hero-copy h1 {
  margin-left: 0;
  margin-right: 0;
  max-width: 11ch;
}

.downloads-hero-lede {
  margin: 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.62;
}

.downloads-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.downloads-chip-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 204, 214, 0.95);
  background: var(--white);
  color: var(--text);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.downloads-chip-link:hover {
  transform: translateY(-1px);
  border-color: var(--downloads-accent);
}

.downloads-chip-link.is-primary {
  background: var(--downloads-accent);
  border-color: var(--downloads-accent);
  color: #ffffff;
}

.downloads-chip-link.is-primary:hover {
  background: var(--downloads-accent-strong);
  border-color: var(--downloads-accent-strong);
}

.downloads-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.downloads-stat {
  border-radius: 18px;
  border: 1px solid rgba(198, 208, 220, 0.85);
  background: rgba(255, 255, 255, 0.7);
  padding: 0.82rem 0.88rem;
  display: grid;
  gap: 0.2rem;
}

.downloads-stat strong {
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.downloads-stat span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.downloads-hero-panel {
  padding: 1.25rem;
  display: grid;
  gap: 0.9rem;
  align-content: start;
  background:
    radial-gradient(120% 120% at 100% 0%, var(--downloads-mint-soft), transparent 48%),
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
}

.downloads-panel-kicker,
.downloads-card-kicker,
.downloads-featured-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.downloads-hero-panel h2 {
  margin: 0;
  font-size: 1.32rem;
  letter-spacing: -0.03em;
}

.downloads-panel-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.55rem;
  color: var(--text);
  line-height: 1.58;
}

.downloads-command {
  padding: 1rem 1.05rem;
  display: grid;
  gap: 0.8rem;
}

.downloads-command-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.downloads-tabs,
.downloads-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.downloads-tab,
.downloads-filter {
  border: 1px solid rgba(190, 201, 214, 0.94);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.52rem 0.82rem;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.downloads-tab:hover,
.downloads-filter:hover,
.downloads-tab.is-active,
.downloads-filter.is-active {
  transform: translateY(-1px);
  border-color: var(--downloads-accent);
  background: var(--downloads-accent-soft);
}

.downloads-tab.is-active {
  background: var(--downloads-accent);
  border-color: var(--downloads-accent);
  color: #ffffff;
}

.downloads-search-wrap {
  display: grid;
  gap: 0.32rem;
  min-width: min(100%, 280px);
}

.downloads-search-wrap span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.downloads-search-wrap input {
  min-height: 2.7rem;
  border-radius: 14px;
  border: 1px solid rgba(194, 204, 216, 0.96);
  background: var(--white);
  padding: 0.72rem 0.9rem;
  font: inherit;
  color: var(--text);
}

.downloads-results {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.downloads-featured-card {
  padding: 1.2rem 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.8fr);
  gap: 1rem;
  align-items: start;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(154, 106, 8, 0.1), transparent 44%),
    radial-gradient(120% 120% at 0% 0%, var(--downloads-accent-soft), transparent 46%),
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
}

.downloads-featured-title {
  margin: 0.35rem 0 0.42rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.downloads-featured-copy {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  line-height: 1.64;
}

.downloads-featured-side {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.downloads-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.downloads-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(194, 205, 216, 0.86);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
}

.downloads-pill.is-file {
  color: var(--downloads-accent-strong);
}

.downloads-pill.is-app {
  color: var(--downloads-mint);
}

.downloads-card-actions,
.downloads-featured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.downloads-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0.55rem 0.92rem;
  border-radius: 12px;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.downloads-btn:hover {
  transform: translateY(-1px);
}

.downloads-btn--primary {
  background: var(--downloads-accent);
  border: 1px solid var(--downloads-accent);
  color: #ffffff;
}

.downloads-btn--primary:hover {
  background: var(--downloads-accent-strong);
  border-color: var(--downloads-accent-strong);
}

.downloads-btn--secondary {
  background: var(--white);
  border: 1px solid rgba(190, 201, 214, 0.94);
  color: var(--text);
}

.downloads-btn--secondary:hover {
  border-color: var(--downloads-accent);
  background: var(--downloads-accent-soft);
}

.downloads-catalog-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.downloads-catalog-card {
  padding: 1rem 1.05rem;
  display: grid;
  gap: 0.8rem;
  align-content: start;
  position: relative;
  overflow: hidden;
}

.downloads-catalog-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--downloads-accent);
  opacity: 0.9;
}

.downloads-catalog-card--app::before {
  background: var(--downloads-mint);
}

.downloads-card-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.downloads-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(193, 204, 216, 0.92);
}

.downloads-card-title {
  margin: 0.18rem 0 0;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.downloads-card-summary {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.downloads-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.downloads-card-date {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.downloads-empty {
  grid-column: 1 / -1;
  padding: 2.4rem 1rem;
  text-align: center;
  background:
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
}

.downloads-empty strong {
  display: block;
  font-size: 1.18rem;
  margin-bottom: 0.35rem;
}

.downloads-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.downloads-skeleton-card {
  min-height: 220px;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.downloads-skeleton-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
}

.downloads-skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.08) 35%,
      rgba(255, 255, 255, 0.32) 50%,
      rgba(255, 255, 255, 0.08) 65%,
      rgba(255, 255, 255, 0.08) 100%
    );
  background-size: 240% 100%;
  animation: ui-skeleton-shimmer 1.4s ease-in-out infinite;
}

body.downloads-page[data-lighting="night"] .downloads-hero-copy,
body.downloads-page[data-lighting="night"] .downloads-hero-panel,
body.downloads-page[data-lighting="night"] .downloads-command,
body.downloads-page[data-lighting="night"] .downloads-featured-card,
body.downloads-page[data-lighting="night"] .downloads-catalog-card,
body.downloads-page[data-lighting="night"] .downloads-empty {
  border-color: rgba(70, 74, 84, 0.92);
}

body.downloads-page[data-lighting="night"] .downloads-stat,
body.downloads-page[data-lighting="night"] .downloads-pill,
body.downloads-page[data-lighting="night"] .downloads-card-icon,
body.downloads-page[data-lighting="night"] .downloads-tab,
body.downloads-page[data-lighting="night"] .downloads-filter,
body.downloads-page[data-lighting="night"] .downloads-btn--secondary,
body.downloads-page[data-lighting="night"] .downloads-search-wrap input {
  border-color: rgba(79, 86, 96, 0.96);
  background: rgba(36, 38, 44, 0.94);
}

body.downloads-page[data-lighting="night"] .downloads-btn--secondary:hover,
body.downloads-page[data-lighting="night"] .downloads-filter:hover,
body.downloads-page[data-lighting="night"] .downloads-filter.is-active {
  background: rgba(49, 62, 82, 0.78);
}

body.downloads-page[data-lighting="night"] .downloads-card-summary,
body.downloads-page[data-lighting="night"] .downloads-featured-copy,
body.downloads-page[data-lighting="night"] .downloads-hero-lede,
body.downloads-page[data-lighting="night"] .downloads-empty p,
body.downloads-page[data-lighting="night"] .downloads-panel-list {
  color: #bcc5d1;
}

@media (max-width: 900px) {
  .tile-grid,
  .recipe-grid,
  .columns {
    grid-template-columns: 1fr;
  }

  .downloads-hero,
  .downloads-featured-card,
  .downloads-catalog-grid {
    grid-template-columns: 1fr;
  }

  .downloads-command-top {
    align-items: stretch;
  }

  .downloads-search-wrap {
    width: 100%;
  }

  .weekly-grid {
    grid-template-columns: 1fr;
  }

  .weekly-header {
    flex-direction: column;
  }

  .weekly-focus {
    min-width: 0;
    width: 100%;
  }

  .home-weather-card {
    width: min(220px, calc(100vw - 3rem));
  }

  .tile-hero {
    min-height: 250px;
  }

  .lessons-home-copy {
    min-height: 250px;
  }

  .lessons-home-thumb img {
    object-position: 20% center;
  }

  .lessons-home-thumb img.thumb--einstein {
    object-position: left top;
  }

  .perceptron-tile {
    background-position: center, 50% 24%, center;
  }

  .history-columns {
    grid-template-columns: 1fr;
  }

  .perceptron-onboarding {
    grid-template-columns: 1fr;
  }

  .ai-timeline li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .perceptron-grid {
    grid-template-columns: 1fr;
  }

  .perceptron-panel-hero {
    grid-column: span 1;
  }

  .perceptron-mode-group {
    flex-direction: row;
    align-items: center;
  }

  .perceptron-dual-input {
    grid-template-columns: 1fr;
  }

  .perceptron-equation-panel {
    grid-column: span 1;
  }

  .perceptron-presets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .perceptron-brief-grid {
    grid-template-columns: 1fr;
  }

  .perceptron-graph-legend {
    grid-template-columns: 1fr;
  }

  .expert-workspace,
  .expert-output {
    grid-template-columns: 1fr;
  }

  .minimax-grid {
    grid-template-columns: 1fr;
  }

  .minimax-tree-nodes {
    grid-template-columns: 1fr;
  }

  .astar-grid-layout {
    grid-template-columns: 1fr;
  }

  .ngram-grid,
  .ngram-output-grid {
    grid-template-columns: 1fr;
  }

  .astar-grid {
    grid-template-columns: repeat(var(--astar-cols), minmax(22px, 1fr));
  }

  .astar-legend {
    grid-template-columns: 1fr;
  }

  .astar-control-group {
    align-items: stretch;
  }

  .expert-facts {
    grid-template-columns: 1fr;
  }

  .chess-lab-grid {
    grid-template-columns: 1fr;
  }

  .expert-evidence-main {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 0.32rem;
  }

  .expert-evidence-confidence-inline {
    grid-column: 1 / 4;
    padding-left: 1.85rem;
  }

  .expert-evidence-preset {
    grid-column: 2;
    justify-self: start;
    margin-left: 1.85rem;
  }

  .expert-lab .expert-evidence-info {
    grid-column: 3;
    justify-self: end;
  }

  .perceptron-actions {
    grid-template-columns: 1fr;
  }

  .chat-controls {
    grid-template-columns: 1fr;
  }

  .terminal-theme-controls {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .downloads-hero-copy,
  .downloads-hero-panel,
  .downloads-command,
  .downloads-featured-card,
  .downloads-catalog-card {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }

  .downloads-hero-stats {
    grid-template-columns: 1fr;
  }

  .downloads-card-footer {
    align-items: stretch;
  }

  .downloads-card-actions,
  .downloads-featured-actions {
    width: 100%;
  }

  .downloads-btn,
  .downloads-chip-link {
    width: 100%;
  }
}

@media print {
  .topbar,
  .site-footer,
  .perceptron-control-strip,
  .perceptron-mission-bar,
  .perceptron-era-details,
  .perceptron-presets,
  .perceptron-diagnostics,
  .tile-grid {
    display: none !important;
  }

  .perceptron-console {
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }

  .perceptron-panel,
  .perceptron-equation,
  .perceptron-inline-values p,
  .perceptron-metrics li {
    border-color: #000;
    background: #fff;
    color: #000;
  }
}

/* ══════════════════════════════════════════════════════
   GO AI LESSON  (Lesson 10)
   ══════════════════════════════════════════════════════ */

/* Tile on the STEAM Lessons shelf */
.go-tile {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  background:
    linear-gradient(180deg, rgba(4, 16, 8, 0.18) 0%, rgba(4, 16, 8, 0.86) 100%),
    radial-gradient(128% 78% at 82% 10%, rgba(224, 190, 104, 0.34), transparent 44%),
    radial-gradient(110% 75% at 14% 88%, rgba(36, 130, 77, 0.44), transparent 56%),
    linear-gradient(145deg, #0d2216 0%, #07120e 100%);
}

.go-tile::before {
  content: "";
  position: absolute;
  top: 0.95rem;
  right: 1rem;
  width: min(42%, 180px);
  aspect-ratio: 1;
  border-radius: 24px;
  background:
    linear-gradient(rgba(103, 64, 18, 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 64, 18, 0.34) 1px, transparent 1px),
    linear-gradient(180deg, #ddb861 0%, #c8943a 100%);
  background-size:
    calc(100% / 9) calc(100% / 9),
    calc(100% / 9) calc(100% / 9),
    100% 100%;
  box-shadow:
    inset 0 0 0 3px rgba(122, 80, 17, 0.86),
    0 18px 30px rgba(0, 0, 0, 0.22);
  transform: rotate(9deg);
  opacity: 0.96;
}

.go-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at calc(100% - 126px) 72px, rgba(18, 19, 20, 0.92) 0 15px, transparent 16px),
    radial-gradient(circle at calc(100% - 88px) 108px, rgba(248, 248, 247, 0.96) 0 14px, transparent 15px),
    radial-gradient(circle at calc(100% - 58px) 142px, rgba(18, 19, 20, 0.92) 0 13px, transparent 14px),
    radial-gradient(circle at calc(100% - 130px) 142px, rgba(101, 62, 17, 0.44) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 89px) 89px, rgba(101, 62, 17, 0.44) 0 3px, transparent 4px);
  pointer-events: none;
}

.go-tile > * {
  position: relative;
  z-index: 1;
}

.go-tile .tile-kicker { color: #b5e8c8; }
.go-tile strong       { color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.64); }
.go-tile small        { color: #c8e8d6; max-width: 32ch; }

.go-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.go-tile-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(201, 232, 214, 0.14);
  color: #eef7f0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.go-lesson-page {
  position: relative;
  background:
    radial-gradient(1100px 480px at 50% -10%, rgba(47, 117, 79, 0.18), transparent 60%),
    linear-gradient(180deg, #f6f2e7 0%, #f4f6f7 34%, #eef2f5 100%);
  color: #16202a;
}

.go-lesson-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(19, 67, 43, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 67, 43, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.46), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.go-lesson-page .topbar {
  background: rgba(246, 242, 231, 0.84);
  border-bottom-color: rgba(122, 133, 138, 0.24);
}

.go-lesson-page .topbar nav a[aria-current="page"] {
  color: #163923;
}

.go-lesson-page main,
.go-lesson-page .site-footer {
  position: relative;
  z-index: 1;
}

.go-lesson-page main {
  display: grid;
  gap: 1.25rem;
  padding-top: 2.5rem;
}

.go-lesson-page .site-footer {
  padding-bottom: 1.4rem;
}

.go-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 1rem;
  align-items: stretch;
  padding: 0 0 0.3rem;
  text-align: left;
}

.go-hero-copy {
  padding-top: 1rem;
}

.go-hero h1 {
  margin: 0.3rem 0 0.65rem;
  max-width: 10ch;
}

.go-hero-lead {
  margin: 0;
  max-width: 62ch;
  color: #4a5a68;
  font-size: 1.08rem;
  line-height: 1.6;
}

.go-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.go-chip-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  background: #173f29;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 12px 26px rgba(23, 63, 41, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.go-chip-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(23, 63, 41, 0.24);
}

.go-chip-link.is-secondary {
  background: rgba(255, 255, 255, 0.78);
  color: #173f29;
  border: 1px solid rgba(23, 63, 41, 0.16);
  box-shadow: none;
}

.go-chip-link.is-secondary:hover {
  background: #fff;
}

.go-hero-panel {
  border-radius: 32px;
  padding: 1.2rem;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(226, 197, 116, 0.34), transparent 52%),
    linear-gradient(160deg, rgba(18, 56, 37, 0.98), rgba(14, 36, 25, 0.96));
  color: #eef7f1;
  border: 1px solid rgba(26, 72, 47, 0.32);
  box-shadow: 0 26px 54px rgba(17, 31, 22, 0.18);
}

.go-panel-kicker {
  margin: 0;
  color: #b7e1c4;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.go-hero-panel h2 {
  margin: 0.55rem 0 1rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.go-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.go-metric {
  border-radius: 22px;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(209, 235, 217, 0.12);
}

.go-metric strong {
  display: block;
  font-size: 1.5rem;
  line-height: 1;
}

.go-metric span {
  display: block;
  margin-top: 0.4rem;
  color: #d4e4d8;
  font-size: 0.9rem;
  line-height: 1.4;
}

.go-hero-note {
  margin: 1rem 0 0;
  color: #dbe8de;
  line-height: 1.55;
}

.go-entry-section {
  display: grid;
  gap: 0.9rem;
}

.go-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 1rem;
  align-items: start;
}

.go-entry-column {
  padding: 1.15rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 249, 0.98));
}

.go-entry-column--history {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(70, 145, 98, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(252, 253, 251, 0.98), rgba(243, 247, 244, 0.98));
  border-color: rgba(44, 77, 56, 0.12);
}

.go-section-head--tight p {
  margin-bottom: 0.72rem;
}

.go-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.go-start-card {
  border-radius: 24px;
  border: 1px solid rgba(44, 77, 56, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 249, 0.98));
  padding: 1rem;
}

.go-start-card--goal {
  grid-column: span 2;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(70, 145, 98, 0.14), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 244, 0.98));
}

.go-start-kicker {
  margin: 0;
  color: #4f6a58;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.go-start-card h3 {
  margin: 0.32rem 0 0.45rem;
  font-size: 1.14rem;
}

.go-start-card p {
  margin: 0;
  color: #52626f;
  line-height: 1.55;
}

.go-start-card p + p {
  margin-top: 0.5rem;
}

.go-start-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #173f29;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}

.go-start-cta-wrap {
  margin-top: 0.85rem;
}

.go-details {
  border: 1px solid rgba(44, 77, 56, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  padding: 0.95rem 1rem;
}

.go-details summary,
.go-ai-explainer summary {
  cursor: pointer;
  font-weight: 700;
  color: #173f29;
  list-style: none;
}

.go-details summary::-webkit-details-marker,
.go-ai-explainer summary::-webkit-details-marker {
  display: none;
}

.go-details summary::after,
.go-ai-explainer summary::after {
  content: "+";
  float: right;
  color: #24613c;
  font-size: 1.1rem;
  line-height: 1;
}

.go-details[open] summary::after,
.go-ai-explainer[open] summary::after {
  content: "-";
}

.go-details[open] summary,
.go-ai-explainer[open] summary {
  margin-bottom: 0.75rem;
}

.go-details--inline {
  margin-top: 0.9rem;
}

.go-story-peek-grid {
  display: grid;
  gap: 0.75rem;
}

.go-story-peek-card {
  border-radius: 22px;
  border: 1px solid rgba(44, 77, 56, 0.1);
  background: rgba(255, 255, 255, 0.78);
  padding: 0.92rem;
}

.go-story-peek-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.04rem;
}

.go-story-peek-card p:last-child {
  margin: 0;
  color: #4f6270;
  line-height: 1.55;
}

.go-story-peek-card--blue {
  border-left: 4px solid #3267a6;
}

.go-story-peek-card--green {
  border-left: 4px solid #2c8a52;
}

.go-story-peek-card--gold {
  border-left: 4px solid #a56d16;
}

.go-story-peek-note {
  margin: 0.9rem 0 0;
  color: #4f6270;
  line-height: 1.55;
}

.go-start-list {
  margin: 0.8rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.55rem;
  color: #435665;
  line-height: 1.58;
}

.go-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.95rem;
}

.go-story-section,
#go-breakthrough {
  border-radius: 30px;
  padding: 1.05rem;
  border: 1px solid rgba(44, 77, 56, 0.1);
  box-shadow: 0 18px 32px rgba(14, 29, 20, 0.06);
}

.go-story-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 251, 0.98));
}

#go-breakthrough {
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(70, 145, 98, 0.1), transparent 48%),
    linear-gradient(180deg, rgba(252, 253, 251, 0.98), rgba(244, 248, 244, 0.98));
}

.go-story-card {
  padding: 1.15rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 250, 251, 0.98));
  border: 1px solid rgba(44, 77, 56, 0.08);
  box-shadow: 0 14px 26px rgba(16, 29, 22, 0.05);
}

.go-story-card--blue {
  border-top: 4px solid #3267a6;
}

.go-story-card--green {
  border-top: 4px solid #2c8a52;
}

.go-story-card--gold {
  border-top: 4px solid #a56d16;
}

.go-story-step {
  margin: 0 0 0.5rem;
  color: #5b6f7e;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.go-story-card h3 {
  margin: 0 0 0.85rem;
  font-size: 1.26rem;
  line-height: 1.15;
}

.go-story-card .rhythm li {
  align-items: flex-start;
}

.go-story-card .rhythm strong {
  max-width: 22ch;
  line-height: 1.45;
}

.go-stack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.go-stack-card {
  border-radius: 24px;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 248, 244, 0.95));
  border: 1px solid rgba(34, 84, 52, 0.12);
  box-shadow: 0 14px 26px rgba(16, 29, 22, 0.06);
}

.go-stack-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #224a32, #173720);
  color: #fff;
  font-weight: 700;
}

.go-stack-card h3 {
  margin: 0.75rem 0 0.45rem;
  font-size: 1.08rem;
}

.go-stack-card p {
  margin: 0;
  color: #4a5c57;
  line-height: 1.55;
}

.go-lab {
  padding: 1.2rem;
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(70, 145, 98, 0.12), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 249, 0.98));
}

.go-lab-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
}

.go-lab-kicker {
  margin: 0;
  color: #4f6a58;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.go-lab-topline h3 {
  margin: 0.28rem 0 0;
  font-size: 1.45rem;
}

.go-lab-note {
  margin: 0;
  max-width: 37ch;
  color: #586976;
  line-height: 1.5;
}

.go-lab-grid {
  display: grid;
  grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}

.go-board-column {
  display: grid;
  gap: 0.8rem;
}

.go-board-stage {
  display: flex;
  gap: 0.85rem;
  align-items: stretch;
}

.go-board-frame {
  position: relative;
  width: min(100%, 460px);
  margin: 0;
  flex: 1 1 auto;
  padding: 2rem;
  border-radius: 28px;
  background:
    linear-gradient(145deg, #8a5c18 0%, #6c4615 100%);
  box-shadow:
    0 20px 40px rgba(70, 48, 20, 0.22),
    inset 0 1px 0 rgba(255, 230, 183, 0.24);
}

.go-axis {
  position: absolute;
  color: rgba(255, 238, 206, 0.86);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.go-axis--horizontal {
  left: 2rem;
  right: 2rem;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.go-axis--horizontal span {
  justify-self: center;
}

.go-axis--top {
  top: 0.6rem;
}

.go-axis--bottom {
  bottom: 0.6rem;
}

.go-axis--vertical {
  top: 2rem;
  bottom: 2rem;
  width: 1rem;
  display: grid;
  grid-template-rows: repeat(9, minmax(0, 1fr));
  align-items: center;
}

.go-axis--vertical span {
  justify-self: center;
}

.go-axis--left {
  left: 0.6rem;
}

.go-axis--right {
  right: 0.6rem;
}

.go-board-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.go-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 100%;
  aspect-ratio: 1;
  background:
    linear-gradient(180deg, rgba(255, 244, 206, 0.18), transparent 24%),
    linear-gradient(180deg, #d8b35c, #c79f48);
  border: 3px solid #7a5011;
  border-radius: 14px;
  box-shadow:
    0 10px 20px rgba(54, 34, 8, 0.24),
    inset 0 0 16px rgba(255, 243, 214, 0.2);
  user-select: none;
}

.go-intersection {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s ease;
}

.go-intersection:hover:not(:disabled) {
  background: radial-gradient(circle, rgba(20, 68, 44, 0.16) 0%, rgba(20, 68, 44, 0) 58%);
}

.go-intersection:focus-visible {
  outline: none;
  background: radial-gradient(circle, rgba(20, 68, 44, 0.2) 0%, rgba(20, 68, 44, 0) 58%);
  box-shadow: inset 0 0 0 2px rgba(20, 68, 44, 0.7);
}

.go-intersection:disabled {
  cursor: default;
}

.go-intersection::before,
.go-intersection::after {
  content: "";
  position: absolute;
  background: rgba(94, 58, 13, 0.72);
  pointer-events: none;
}

.go-intersection::before {
  width: 1.5px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.go-intersection::after {
  height: 1.5px;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.go-intersection[data-row="0"]::before { top: 50%; height: 50%; }
.go-intersection[data-row="8"]::before { top: 0; height: 50%; }
.go-intersection[data-col="0"]::after  { left: 50%; width: 50%; }
.go-intersection[data-col="8"]::after  { left: 0; width: 50%; }

.go-hoshi {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(102, 59, 7, 0.72);
  pointer-events: none;
  z-index: 1;
}

.go-stone {
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.go-stone.black {
  background: radial-gradient(circle at 36% 30%, #8b8f97, #17181b 72%);
  box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.5);
}

.go-stone.white {
  background: radial-gradient(circle at 34% 28%, #ffffff, #d7d7d7 72%);
  box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.26);
  outline: 1px solid rgba(0, 0, 0, 0.14);
}

.go-stone.last {
  box-shadow: 0 0 0 2.5px #f2b13f, 1px 4px 8px rgba(0, 0, 0, 0.34);
  animation: go-last-stone 0.35s ease-out;
}

@keyframes go-last-stone {
  from {
    transform: scale(0.82);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.go-board-caption {
  margin: 0;
  border: 1px solid rgba(121, 94, 41, 0.15);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: #425564;
  padding: 0.9rem 1rem;
  line-height: 1.55;
}

.go-board-caption strong {
  color: #1f3827;
  margin-right: 0.35rem;
}

.go-live-rail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 0 0 170px;
  max-width: 170px;
}

.go-live-card {
  border-radius: 22px;
  padding: 0.9rem 0.95rem;
  background:
    linear-gradient(180deg, #173f29 0%, #102d1d 100%);
  color: #f0f8f3;
  border: 1px solid rgba(40, 87, 60, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.go-live-card span {
  display: block;
  margin-bottom: 0.35rem;
  color: #bfd9c7;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.go-live-card strong {
  display: block;
  line-height: 1.35;
}

.go-side {
  display: grid;
  gap: 0.78rem;
  align-content: start;
}

.go-status {
  margin: 0;
  min-height: 3.25rem;
  border-radius: 18px;
  padding: 0.9rem 1rem;
  background:
    linear-gradient(180deg, #163f29 0%, #102d1d 100%);
  color: #f0f8f3;
  border: 1px solid rgba(40, 87, 60, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 0.95rem;
  line-height: 1.45;
}

.go-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.go-dashboard-card {
  border-radius: 18px;
  padding: 0.82rem 0.9rem;
  border: 1px solid rgba(44, 77, 56, 0.12);
  background: rgba(255, 255, 255, 0.86);
}

.go-dashboard-card span {
  display: block;
  margin-bottom: 0.38rem;
  color: #66806c;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.go-dashboard-card strong {
  display: block;
  color: #182530;
  line-height: 1.35;
}

.go-score-note {
  margin: -0.2rem 0 0;
  color: #5d6f7d;
  font-size: 0.88rem;
  line-height: 1.5;
}

.go-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.go-control {
  min-height: 42px;
  border: 1px solid rgba(35, 67, 47, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #173f29;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.go-control:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 10px 18px rgba(29, 55, 39, 0.1);
}

.go-control--primary {
  background: #173f29;
  color: #fff;
  border-color: #173f29;
}

.go-control--primary:hover:not(:disabled) {
  background: #1d4d33;
}

.go-control--quiet {
  color: #6a4f33;
}

.go-control:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.go-captures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.go-capture-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.82rem 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(44, 77, 56, 0.12);
  background: rgba(255, 255, 255, 0.86);
}

.go-capture-label {
  color: #5f7380;
}

.go-capture-row strong {
  margin-left: auto;
}

.go-capture-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.go-capture-dot.black { background: #111; }
.go-capture-dot.white { background: #ddd; outline: 1px solid #999; }

.go-rules,
.go-ai-explainer,
.go-note-card,
.go-next-card {
  border-radius: 24px;
}

.go-rules,
.go-ai-explainer {
  border: 1px solid rgba(44, 77, 56, 0.12);
  background: rgba(255, 255, 255, 0.88);
  padding: 1rem;
}

.go-rules h3,
.go-ai-explainer h3,
.go-note-card h3,
.go-next-card h3 {
  margin: 0 0 0.7rem;
  font-size: 1.02rem;
}

.go-rules .rhythm li,
.go-foundations-grid .rhythm li,
.go-next-card .rhythm li {
  align-items: flex-start;
}

.go-rules .rhythm strong,
.go-foundations-grid .rhythm strong,
.go-next-card .rhythm strong {
  max-width: 24ch;
  line-height: 1.45;
}

.go-quick-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.52rem;
  color: #435665;
  line-height: 1.55;
}

.go-mini-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.5rem;
  color: #435665;
  line-height: 1.55;
}

.go-mini-list li::marker {
  color: #24613c;
}

.go-foundations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.go-note-card {
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(225, 194, 109, 0.16), transparent 50%),
    #fff;
}

.go-note-card p {
  margin: 0 0 0.85rem;
  color: #576978;
}

.go-next-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.go-cta-wrap {
  margin: 1rem 0 0;
}

.go-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: #1e5d3a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.go-cta:hover {
  background: #256f45;
}

.go-output-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0.9rem;
}

.go-output-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.go-output-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
}

.go-output-card--feature {
  border: none;
  background:
    radial-gradient(150% 120% at 100% 0%, rgba(230, 196, 110, 0.24), transparent 48%),
    linear-gradient(145deg, #173c29 0%, #10281c 100%);
  color: #eef8f2;
}

.go-output-card--feature h3 {
  margin-bottom: 0.2rem;
}

.go-output-label {
  color: #79b895;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.go-output-card:not(.go-output-card--feature) .go-output-label {
  color: #58706c;
}

.go-output-card p {
  margin: 0;
  color: #576978;
  line-height: 1.55;
}

.go-output-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.48rem;
  line-height: 1.55;
}

.go-output-card--feature .go-output-list {
  color: #deece3;
}

@media (max-width: 1100px) {
  .applications-hero,
  .applications-brief-bar {
    grid-template-columns: 1fr;
  }

  .applications-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-link-feature {
    min-height: 280px;
  }

  .go-hero {
    grid-template-columns: 1fr;
  }

  .go-entry-grid,
  .go-story-grid,
  .go-foundations-grid,
  .go-output-grid {
    grid-template-columns: 1fr;
  }

  .go-stack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .go-lab-grid,
  .go-next-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .applications-mini-grid {
    grid-template-columns: 1fr;
  }

  .go-start-grid,
  .go-dashboard,
  .go-captures,
  .go-metric-grid {
    grid-template-columns: 1fr;
  }

  .go-start-card--goal {
    grid-column: auto;
  }

  .go-lab-topline {
    flex-direction: column;
    align-items: flex-start;
  }

  .go-board-stage {
    flex-direction: column;
  }

  .go-board-frame {
    padding: 1.6rem;
    border-radius: 24px;
  }

  .go-live-rail {
    flex: 1 1 auto;
    max-width: none;
    flex-direction: row;
  }

  .go-live-card {
    flex: 1 1 0;
  }

  .go-axis--horizontal {
    left: 1.6rem;
    right: 1.6rem;
  }

  .applications-chip {
    width: 100%;
  }

  .go-axis--vertical {
    top: 1.6rem;
    bottom: 1.6rem;
  }

  .go-rules .rhythm li,
  .go-foundations-grid .rhythm li,
  .go-next-card .rhythm li,
  .go-story-card .rhythm li {
    flex-direction: column;
    gap: 0.35rem;
  }

  .go-rules .rhythm strong,
  .go-foundations-grid .rhythm strong,
  .go-next-card .rhythm strong,
  .go-story-card .rhythm strong {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .go-lesson-page main {
    gap: 1rem;
  }

  .go-chip-link,
  .go-control,
  .go-cta {
    width: 100%;
  }

  .go-stack-grid {
    grid-template-columns: 1fr;
  }

  .go-live-rail {
    flex-direction: column;
  }

  .go-board-frame {
    padding: 1.25rem;
  }

  .go-axis {
    font-size: 0.63rem;
    letter-spacing: 0.08em;
  }

  .go-axis--horizontal {
    left: 1.25rem;
    right: 1.25rem;
  }

  .go-axis--vertical {
    top: 1.25rem;
    bottom: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Deep Blue Chess Lesson (Lesson 10)
   ═══════════════════════════════════════════════════════════════════════════ */

.deep-blue-tile {
  background:
    linear-gradient(180deg, rgba(4, 8, 22, 0.18) 0%, rgba(4, 8, 22, 0.82) 100%),
    radial-gradient(130% 70% at 76% 16%, rgba(15, 98, 254, 0.48), transparent 62%),
    radial-gradient(100% 65% at 18% 88%, rgba(40, 100, 200, 0.36), transparent 64%),
    #04091e;
}

.deep-blue-tile .tile-kicker { color: #b5c8f0; }
.deep-blue-tile strong       { color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.64); }
.deep-blue-tile small        { color: #c4d4f0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Skeleton loading shimmer
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes ui-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton {
  display: block;
  border-radius: 0.55rem;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--surface-2) 88%, white) 0%,
      color-mix(in srgb, var(--surface-2) 88%, white) 35%,
      color-mix(in srgb, var(--surface-1) 72%, white 28%) 50%,
      color-mix(in srgb, var(--surface-2) 88%, white) 65%,
      color-mix(in srgb, var(--surface-2) 88%, white) 100%
    );
  background-size: 240% 100%;
  animation: ui-skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-text {
  height: 0.92rem;
  margin: 0;
}

.skeleton-text[data-width="short"] {
  width: 38%;
}

.skeleton-text[data-width="medium"] {
  width: 62%;
}

.skeleton-text[data-width="long"] {
  width: 88%;
}

.skeleton-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
}

.skeleton-chip {
  width: 5.4rem;
  height: 2rem;
  border-radius: 999px;
}

.skeleton-card {
  --card-padding: 1rem;
  display: grid;
  gap: 0;
  min-width: 0;
  border: 1px solid color-mix(in srgb, rgba(210, 210, 215, 0.66) 88%, rgba(84, 171, 255, 0.18));
  border-radius: var(--card-radius, clamp(14px, 1.8vw, 22px));
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  pointer-events: none;
}

.skeleton-card > * {
  min-width: 0;
}

.skeleton-card--featured {
  display: grid;
  gap: 0;
}

@media (min-width: 1024px) {
  .skeleton-card--featured {
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
  }
}

.skeleton-media {
  min-height: 11.25rem;
  border-bottom: 1px solid rgba(210, 210, 215, 0.52);
}

.skeleton-card--featured .skeleton-media {
  min-height: 100%;
}

.skeleton-media[data-ratio="video"] {
  aspect-ratio: 16 / 9;
}

.skeleton-media[data-ratio="feature"] {
  aspect-ratio: 16 / 10;
}

.skeleton-body {
  padding: var(--card-padding);
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.skeleton-meta {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.skeleton-meta-copy {
  flex: 1;
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.skeleton-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.2rem;
}

.skeleton-grid {
  display: grid;
  gap: 1rem;
}

.skeleton-grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.skeleton-grid--videos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 0.85rem;
}

.skeleton-card--video-feature {
  grid-column: span 2;
}

.skeleton-timeline {
  display: grid;
  gap: 1rem;
}

.skeleton-timeline-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.skeleton-timeline-rail {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-height: 100%;
}

.skeleton-timeline-rail::after {
  content: "";
  width: 2px;
  min-height: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 80%, var(--line, #d2d2d7));
}

.skeleton-timeline-dot {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
}

@media (max-width: 1200px) {
  .skeleton-grid--videos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .skeleton-grid--videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skeleton-card--video-feature {
    grid-column: 1 / -1;
  }
}

@media (max-width: 380px) {
  .skeleton-grid--videos {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .downloads-skeleton-card::after {
    animation: none;
    background-position: 50% 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark mode
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #1c1c1e;
    --text:   #f5f5f7;
    --muted:  #98989d;
    --line:   #3a3a3c;
    --white:  #2c2c2e;
    --shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
    --page-wash:
      radial-gradient(1200px 600px at -10% -10%, rgba(34, 120, 255, 0.14), transparent 50%),
      radial-gradient(900px 420px at 110% 0%, rgba(100, 90, 220, 0.14), transparent 45%);
    --header-bg: rgba(28, 28, 30, 0.88);
    --header-border: rgba(58, 58, 60, 0.9);
    --nav-ink: #e5e5ea;
    --nav-ink-strong: #ffffff;
    --nav-hover-bg: rgba(255, 255, 255, 0.08);
    --surface-1: rgba(33, 34, 38, 0.94);
    --surface-2: rgba(26, 27, 31, 0.96);
    --theme-accent: #69a8ff;
    --theme-accent-strong: #8ec0ff;
    --theme-accent-soft: rgba(105, 168, 255, 0.16);
  }

  /* Header / nav */
  .site-header,
  .topbar {
    background: rgba(28, 28, 30, 0.88);
    border-bottom-color: rgba(58, 58, 60, 0.9);
  }

  .brand {
    color: #f5f5f7;
  }

  .site-nav a,
  .topbar nav a,
  .nav-toggle {
    color: var(--nav-ink);
  }

  .site-nav a[aria-current="page"],
  .topbar nav a[aria-current="page"],
  .site-nav a:hover,
  .topbar nav a:hover {
    color: var(--nav-ink-strong);
  }

  .site-nav a,
  .topbar nav a {
    border-bottom-color: rgba(58, 58, 60, 0.6);
  }

  /* Cards & rhythm rows */
  .card {
    border-color: rgba(58, 58, 60, 0.8);
  }

  .rhythm li {
    border-color: #3a3a3c;
  }

  /* Light tile-hero (white background) */
  .tile-hero {
    background:
      radial-gradient(900px 380px at -10% 0%, rgba(0, 113, 227, 0.16), transparent 60%),
      radial-gradient(800px 300px at 110% 100%, rgba(0, 113, 227, 0.12), transparent 60%),
      #1e1e20;
  }

  .tile {
    border-color: rgba(58, 58, 60, 0.8);
  }

  /* VOTD card */
  .votd-card {
    background:
      radial-gradient(130% 70% at 0% 0%, rgba(170, 120, 30, 0.10), transparent 58%),
      #18120a;
    border-color: rgba(110, 82, 20, 0.45);
  }

  .votd-eyebrow {
    color: #c49a30;
  }

  .votd-eyebrow-dot {
    color: rgba(196, 154, 48, 0.35);
  }

  .votd-verse {
    color: #f2e8d0;
  }

  .votd-ref {
    color: #b08030;
  }

  /* Weekly schedule cards */
  .weekly-day-card {
    background: #2c2c2e;
    border-color: #3a3a3c;
  }

  .weekly-day-card--off {
    background: #232325;
  }

  .card--weekly {
    background:
      radial-gradient(circle at top right, rgba(89, 134, 240, 0.18), transparent 34%),
      linear-gradient(180deg, #1f2023 0%, #18191c 100%);
    border-color: rgba(63, 66, 72, 0.9);
  }

  /* dl-cards (class downloads) */
    border-color: rgba(58, 58, 60, 0.8);
  }

  /* Buttons */
  button.secondary,
  .button.secondary {
    background: #3a3a3c;
    border-color: #555;
    color: #f5f5f7;
  }

  /* Inputs */
  input[type="search"],
  input[type="text"],
  select {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #f5f5f7;
  }

  /* Go / Chess game UI panels */
  .go-status,
  .chess-status {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #e5e5ea;
  }

  .go-captures,
  .chess-rules {
    background: #232325;
    border-color: #3a3a3c;
  }

  .chess-log {
    background: #232325;
    border-color: #3a3a3c;
  }

  /* Chess squares — keep them recognisable in dark */
  .chess-square.light {
    background: #b8c4d0;
  }

  .chess-square.dark {
    background: #6e8496;
  }

  /* Go board keeps its bamboo colour (already dark enough) */

  /* Skeleton shimmer — darker palette */
  .skeleton {
    background: linear-gradient(
      90deg,
      #2c2c2e 25%,
      #3a3a3c 50%,
      #2c2c2e 75%
    );
    background-size: 1200px 100%;
  }

  /* Footer */
  .site-footer a {
    color: #6e9ecf;
  }
}

@media (prefers-color-scheme: dark) {
  .go-lesson-page {
    background:
      radial-gradient(1100px 480px at 50% -10%, rgba(47, 117, 79, 0.14), transparent 60%),
      linear-gradient(180deg, #101514 0%, #11181a 34%, #12181d 100%);
    color: #edf2ef;
  }

  .go-lesson-page .topbar {
    background: rgba(16, 21, 20, 0.86);
    border-bottom-color: rgba(88, 104, 97, 0.28);
  }

  .go-lesson-page .topbar nav a[aria-current="page"] {
    color: #c3e1d0;
  }

  .go-lesson-page .section-head p,
  .go-lesson-page .eyebrow,
  .go-hero-lead,
  .go-lab-note,
  .go-note-card p,
  .go-output-card p,
  .go-mini-list {
    color: #b8c9c3;
  }

  .go-chip-link.is-secondary,
  .go-story-card,
  .go-stack-card,
  .go-dashboard-card,
  .go-capture-row,
  .go-rules,
  .go-ai-explainer,
  .go-board-caption,
  .go-note-card,
  .go-next-card,
  .go-output-card:not(.go-output-card--feature) {
    background: rgba(23, 31, 29, 0.88);
    border-color: rgba(82, 98, 90, 0.34);
    color: #edf2ef;
  }

  .go-story-step,
  .go-capture-label,
  .go-dashboard-card span,
  .go-output-card:not(.go-output-card--feature) .go-output-label {
    color: #9fb6ae;
  }

  .go-control {
    background: rgba(23, 31, 29, 0.92);
    border-color: rgba(82, 98, 90, 0.34);
    color: #e8f1eb;
  }

  .go-control--primary {
    background: #2e7b50;
    border-color: #2e7b50;
  }

  .go-control--quiet {
    color: #d8c19b;
  }

  .go-rules .rhythm li,
  .go-foundations-grid .rhythm li,
  .go-next-card .rhythm li,
  .go-story-card .rhythm li {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(82, 98, 90, 0.32);
  }

  .go-rules .rhythm span,
  .go-foundations-grid .rhythm span,
  .go-next-card .rhythm span,
  .go-story-card .rhythm span {
    color: #8fa49d;
  }

  .go-dashboard-card strong,
  .go-board-caption strong,
  .go-output-card:not(.go-output-card--feature) h3,
  .go-output-card:not(.go-output-card--feature) p,
  .go-output-card:not(.go-output-card--feature) .go-output-label,
  .go-chip-link.is-secondary {
    color: #edf2ef;
  }

  .go-status {
    background: linear-gradient(180deg, #173f29 0%, #102d1d 100%);
    border-color: rgba(40, 87, 60, 0.34);
  }
}

/* ═══════════════════════════════════════════════
   MODULE BANNERS  (steam-lessons.html)
   ═══════════════════════════════════════════════ */

.module-section {
  margin-bottom: 3rem;
}

.module-banner {
  border-radius: 18px;
  padding: 1.3rem 1.6rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  cursor: pointer;
  user-select: none;
  transition: border-radius 0s 0.38s;
}
.module-banner.open {
  border-radius: 18px 18px 0 0;
  transition: border-radius 0s 0s;
}

.module-banner-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.module-banner-text {
  flex: 1;
  min-width: 0;
}

.module-banner-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.18rem;
  letter-spacing: -0.01em;
}

.module-banner-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.45;
}

.module-banner-count {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.82);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Accordion chevron */
.module-chevron {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 0.15rem;
}
.module-banner.open .module-chevron {
  transform: rotate(180deg);
}

/* Accordion drawer — slide animation */
.module-drawer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.44s cubic-bezier(0.4, 0, 0.2, 1);
}

.module-tile-grid {
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  padding: 0.9rem;
  gap: 0.9rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .module-tile-grid { grid-template-columns: 1fr; }
}

/* Computer Science module */
.cs-banner {
  background:
    linear-gradient(135deg, rgba(0, 60, 200, 0.55) 0%, rgba(0, 20, 100, 0.8) 100%),
    #08102a;
  border: 1px solid rgba(80, 130, 255, 0.3);
}
.cs-banner.open {
  border-bottom: none;
}

.cs-tile-grid {
  background:
    linear-gradient(180deg, #08102a 0%, #060d1f 100%);
  border: 1px solid rgba(80, 130, 255, 0.18);
  border-top: none;
}

/* Space Science module */
.space-banner {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(120, 50, 220, 0.5), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(30, 100, 200, 0.35), transparent 55%),
    #050510;
  border: 1px solid rgba(140, 80, 255, 0.3);
}
.space-banner.open {
  border-bottom: none;
}

.space-tile-grid {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(80, 30, 160, 0.25), transparent 50%),
    #050510;
  border: 1px solid rgba(140, 80, 255, 0.18);
  border-top: none;
}

/* ── Pale Blue Dot tile ───────────────────────── */

.pale-blue-dot-tile {
  background:
    linear-gradient(180deg, rgba(0, 5, 20, 0.12) 0%, rgba(0, 5, 30, 0.85) 100%),
    radial-gradient(ellipse 80% 60% at 65% 25%, rgba(60, 120, 255, 0.45), transparent 65%),
    radial-gradient(ellipse 50% 40% at 25% 70%, rgba(20, 50, 160, 0.3), transparent 55%),
    #020510;
}

.pale-blue-dot-tile .tile-kicker { color: #a8c8ff; }
.pale-blue-dot-tile strong       { color: #ffffff; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
.pale-blue-dot-tile small        { color: #c0d8ff; }

/* ── Mars Rover Lander tile ───────────────────── */

.mars-rover-tile {
  background:
    linear-gradient(180deg, rgba(30, 8, 2, 0.12) 0%, rgba(30, 8, 2, 0.86) 100%),
    radial-gradient(ellipse 75% 55% at 40% 25%, rgba(210, 80, 30, 0.5), transparent 62%),
    radial-gradient(ellipse 55% 45% at 75% 72%, rgba(160, 50, 15, 0.38), transparent 55%),
    #1a0803;
}

.mars-rover-tile .tile-kicker { color: #ffcba8; }
.mars-rover-tile strong       { color: #ffffff; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
.mars-rover-tile small        { color: #f5c0a0; }

.event-horizon-tile {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  background:
    linear-gradient(180deg, rgba(3, 5, 20, 0.1) 0%, rgba(5, 8, 28, 0.9) 100%),
    radial-gradient(circle at 20% 24%, rgba(118, 92, 255, 0.26), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(255, 170, 94, 0.18), transparent 34%),
    linear-gradient(145deg, #060818 0%, #09142f 56%, #070c1b 100%);
  border: 1px solid rgba(132, 122, 255, 0.22);
  color: #fff;
}

.event-horizon-tile::before {
  content: "EHT";
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-size: 3.6rem;
  font-weight: 900;
  letter-spacing: -0.08em;
  opacity: 0.08;
  pointer-events: none;
  line-height: 1;
}

.event-horizon-tile::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 58% 44%, rgba(255, 223, 164, 0.85) 0 14%, rgba(255, 166, 88, 0.82) 14% 38%, rgba(0, 0, 0, 0.92) 39% 58%, transparent 60%),
    radial-gradient(circle, rgba(255, 177, 88, 0.18), transparent 68%);
  opacity: 0.3;
  pointer-events: none;
}

.event-horizon-tile > * {
  position: relative;
  z-index: 1;
}

.event-horizon-tile .tile-kicker {
  color: #b9c7ff;
  font-weight: 700;
}

.event-horizon-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.72);
}

.event-horizon-tile small {
  color: rgba(224, 232, 255, 0.76);
  max-width: 32ch;
}

.event-horizon-tile:hover {
  border-color: rgba(132, 122, 255, 0.52);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(132, 122, 255, 0.18);
}

.event-horizon-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.3rem;
}

.event-horizon-tile-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(219, 228, 255, 0.14);
  color: #f1f4ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Earth Science module ─────────────────────── */

.earth-banner {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(20, 140, 60, 0.45), transparent 55%),
    radial-gradient(ellipse at 75% 25%, rgba(30, 100, 200, 0.35), transparent 50%),
    #020e08;
  border: 1px solid rgba(40, 180, 80, 0.3);
}
.earth-banner.open {
  border-bottom: none;
}

.earth-tile-grid {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(20, 100, 40, 0.22), transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(20, 60, 140, 0.18), transparent 50%),
    #020e08;
  border: 1px solid rgba(40, 180, 80, 0.18);
  border-top: none;
}

/* ── Climate Simulator tile ───────────────────── */

.climate-sim-tile {
  background:
    linear-gradient(180deg, rgba(2, 12, 8, 0.08) 0%, rgba(2, 20, 10, 0.88) 100%),
    radial-gradient(ellipse 85% 60% at 50% 20%, rgba(30, 160, 80, 0.4), transparent 65%),
    radial-gradient(ellipse 60% 50% at 20% 75%, rgba(20, 80, 180, 0.3), transparent 55%),
    radial-gradient(ellipse 40% 35% at 80% 65%, rgba(60, 180, 100, 0.2), transparent 50%),
    #020e08;
}

.climate-sim-tile .tile-kicker { color: #80e0a0; }
.climate-sim-tile strong       { color: #ffffff; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
.climate-sim-tile small        { color: #a8d8b8; }

.earth-drift-tile {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  background:
    linear-gradient(180deg, rgba(2, 12, 8, 0.08) 0%, rgba(3, 16, 24, 0.9) 100%),
    radial-gradient(circle at 18% 22%, rgba(68, 184, 98, 0.28), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(86, 156, 255, 0.22), transparent 38%),
    linear-gradient(145deg, #04131e 0%, #092533 52%, #061a23 100%);
  border: 1px solid rgba(96, 182, 126, 0.22);
  color: #fff;
}

.earth-drift-tile::before {
  content: "240 Ma";
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  opacity: 0.08;
  pointer-events: none;
  line-height: 1;
}

.earth-drift-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 90%);
  pointer-events: none;
}

.earth-drift-tile > * {
  position: relative;
  z-index: 1;
}

.earth-drift-tile .tile-kicker {
  color: #98edb5;
  font-weight: 700;
}

.earth-drift-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.68);
}

.earth-drift-tile small {
  color: rgba(214, 232, 246, 0.78);
  max-width: 33ch;
}

.earth-drift-tile:hover {
  border-color: rgba(96, 182, 126, 0.52);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(96, 182, 126, 0.18);
}

.earth-drift-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.3rem;
}

.earth-drift-tile-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(219, 241, 229, 0.14);
  color: #eff9ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Physics module ─────────────────────────────── */

.physics-banner {
  background:
    radial-gradient(ellipse at 15% 44%, rgba(255,149,0,0.38), transparent 52%),
    radial-gradient(ellipse at 84% 22%, rgba(255,59,48,0.24), transparent 50%),
    #1a0800;
  border: 1px solid rgba(255,149,0,0.26);
}

.physics-banner.open { border-bottom: none; }

.physics-tile-grid {
  background:
    radial-gradient(ellipse at 8% 0%, rgba(255,149,0,0.16), transparent 44%),
    radial-gradient(ellipse at 94% 100%, rgba(255,59,48,0.12), transparent 50%),
    #1a0800;
  border: 1px solid rgba(255,149,0,0.14);
  border-top: none;
}

.physics-sol-tile {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  background:
    linear-gradient(170deg, rgba(26,8,0,0.05) 0%, rgba(26,8,0,0.88) 100%),
    radial-gradient(circle at 12% 18%, rgba(255,200,60,0.3), transparent 36%),
    radial-gradient(circle at 88% 72%, rgba(255,80,40,0.22), transparent 38%),
    radial-gradient(circle at 52% 8%, rgba(255,149,0,0.18), transparent 30%),
    #1a0800;
  border: 1px solid rgba(255,149,0,0.24);
  color: #fff;
}

.physics-sol-tile::before {
  content: 'c';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  font-size: 7.5rem;
  font-weight: 900;
  font-style: italic;
  opacity: 0.05;
  pointer-events: none;
  line-height: 1;
}

.physics-sol-tile > * { position: relative; z-index: 1; }
.physics-sol-tile .tile-kicker { color: rgba(255,200,100,0.85); font-weight: 700; }
.physics-sol-tile strong { color: #fff; font-size: 1.12rem; }
.physics-sol-tile small  { color: rgba(255,255,255,0.62); }

.physics-sol-tile:hover {
  border-color: rgba(255,149,0,0.6);
  box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,149,0,0.22);
}

.physics-faraday-tile {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(14,16,24,0.16) 0%, rgba(14,16,24,0.94) 100%),
    radial-gradient(circle at 18% 22%, rgba(255,149,0,0.26), transparent 32%),
    radial-gradient(circle at 84% 72%, rgba(0,122,255,0.18), transparent 34%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.05) 0,
      rgba(255,255,255,0.05) 11px,
      transparent 11px,
      transparent 22px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 0,
      rgba(255,255,255,0.04) 11px,
      transparent 11px,
      transparent 22px
    ),
    #11141f;
  border: 1px solid rgba(255,149,0,0.24);
  color: #fff;
}

.physics-faraday-tile::before {
  content: 'E = 0';
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(255,212,107,0.14);
  pointer-events: none;
}

.physics-faraday-tile .tile-kicker { color: rgba(255,212,107,0.9); font-weight: 700; }
.physics-faraday-tile strong { color: #ffffff; }
.physics-faraday-tile small { color: rgba(235,240,255,0.72); }

.physics-faraday-tile:hover {
  border-color: rgba(255,149,0,0.55);
  box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,149,0,0.18);
}

.physics-breadboard-tile {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10,20,14,0.14) 0%, rgba(10,20,14,0.92) 100%),
    radial-gradient(circle at 20% 30%, rgba(52,199,89,0.28), transparent 36%),
    radial-gradient(circle at 78% 68%, rgba(255,149,0,0.18), transparent 34%),
    repeating-linear-gradient(
      90deg,
      rgba(52,199,89,0.06) 0,
      rgba(52,199,89,0.06) 2px,
      transparent 2px,
      transparent 22px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(52,199,89,0.04) 0,
      rgba(52,199,89,0.04) 2px,
      transparent 2px,
      transparent 22px
    ),
    #0e1811;
  border: 1px solid rgba(52,199,89,0.28);
  color: #fff;
}

.physics-breadboard-tile::before {
  content: '⬛⬛⬛⬛';
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: rgba(52,199,89,0.12);
  pointer-events: none;
}

.physics-breadboard-tile .tile-kicker { color: rgba(100,240,130,0.9); font-weight: 700; }
.physics-breadboard-tile strong { color: #ffffff; }
.physics-breadboard-tile small { color: rgba(210,240,215,0.72); }

.physics-breadboard-tile:hover {
  border-color: rgba(52,199,89,0.55);
  box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(52,199,89,0.22);
}

.physics-gravity-tile {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,8,28,0.12) 0%, rgba(8,8,28,0.92) 100%),
    radial-gradient(circle at 22% 28%, rgba(88,86,214,0.35), transparent 38%),
    radial-gradient(circle at 80% 66%, rgba(0,122,255,0.22), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(180,100,255,0.10), transparent 50%),
    #08081c;
  border: 1px solid rgba(88,86,214,0.28);
  color: #fff;
}

.physics-gravity-tile::before {
  content: 'F=Gm₁m₂/r²';
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(160,140,255,0.15);
  pointer-events: none;
  white-space: nowrap;
}

.physics-gravity-tile > * { position: relative; z-index: 1; }
.physics-gravity-tile .tile-kicker { color: rgba(160,140,255,0.9); font-weight: 700; }
.physics-gravity-tile strong { color: #ffffff; }
.physics-gravity-tile small { color: rgba(220,215,255,0.72); }

.physics-gravity-tile:hover {
  border-color: rgba(88,86,214,0.6);
  box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(88,86,214,0.22);
}

/* ── Mathematics module ─────────────────────────── */

.math-banner {
  background:
    radial-gradient(ellipse at 16% 44%, rgba(88, 86, 214, 0.42), transparent 52%),
    radial-gradient(ellipse at 85% 24%, rgba(0, 122, 255, 0.30), transparent 50%),
    #06061a;
  border: 1px solid rgba(88, 86, 214, 0.28);
}

.math-banner.open {
  border-bottom: none;
}

.math-tile-grid {
  background:
    radial-gradient(ellipse at 8% 0%, rgba(88, 86, 214, 0.18), transparent 44%),
    radial-gradient(ellipse at 94% 100%, rgba(0, 122, 255, 0.14), transparent 50%),
    #06061a;
  border: 1px solid rgba(88, 86, 214, 0.16);
  border-top: none;
}

.math-numbers-tile {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  background:
    linear-gradient(170deg, rgba(26,12,0,0.04) 0%, rgba(26,12,0,0.88) 100%),
    radial-gradient(circle at 18% 22%, rgba(255,149,0,0.35), transparent 38%),
    radial-gradient(circle at 82% 68%, rgba(255,69,0,0.22), transparent 36%),
    radial-gradient(circle at 55% 8%, rgba(255,200,50,0.14), transparent 28%),
    #1a0c00;
  border: 1px solid rgba(255,149,0,0.28);
  color: #fff;
}

.math-numbers-tile::before {
  content: '∞';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -56%);
  font-size: 8rem;
  font-weight: 900;
  opacity: 0.05;
  pointer-events: none;
  line-height: 1;
}

.math-numbers-tile > * { position: relative; z-index: 1; }
.math-numbers-tile .tile-kicker { color: rgba(255,190,90,0.9); font-weight: 700; }
.math-numbers-tile strong { color: #fff; font-size: 1.12rem; }
.math-numbers-tile small  { color: rgba(255,255,255,0.62); }

.math-numbers-tile:hover {
  border-color: rgba(255,149,0,0.65);
  box-shadow: 0 12px 38px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,149,0,0.22);
}

.math-pythagoras-tile {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  background:
    linear-gradient(170deg, rgba(6,6,26,0.05) 0%, rgba(6,6,26,0.88) 100%),
    radial-gradient(circle at 14% 18%, rgba(120,120,255,0.3), transparent 35%),
    radial-gradient(circle at 86% 72%, rgba(0,122,255,0.22), transparent 38%),
    radial-gradient(circle at 52% 8%, rgba(180,100,255,0.16), transparent 30%),
    #06061a;
  border: 1px solid rgba(88,86,214,0.25);
  color: #fff;
}

.math-pythagoras-tile::before {
  content: '△';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  font-size: 7rem;
  opacity: 0.05;
  pointer-events: none;
  line-height: 1;
}

.math-pythagoras-tile > * { position: relative; z-index: 1; }

.math-pythagoras-tile .tile-kicker {
  color: rgba(140,140,255,0.85);
  font-weight: 700;
}

.math-pythagoras-tile strong {
  color: #fff;
  font-size: 1.12rem;
}

.math-pythagoras-tile small {
  color: rgba(255,255,255,0.62);
}

.math-pythagoras-tile:hover {
  border-color: rgba(88,86,214,0.6);
  box-shadow: 0 12px 38px rgba(0,0,0,0.55), 0 0 0 1px rgba(88,86,214,0.22);
}

.math-pi-tile {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  background:
    linear-gradient(170deg, rgba(6,6,26,0.04) 0%, rgba(6,6,26,0.84) 100%),
    radial-gradient(circle at 20% 24%, rgba(175,82,222,0.32), transparent 38%),
    radial-gradient(circle at 80% 70%, rgba(52,199,89,0.20), transparent 36%),
    #06061a;
  border: 1px solid rgba(175,82,222,0.22);
  color: #fff;
}

.math-pi-tile::before {
  content: 'π';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -56%);
  font-size: 6.5rem;
  font-weight: 900;
  opacity: 0.06;
  pointer-events: none;
  line-height: 1;
}

.math-pi-tile > * { position: relative; z-index: 1; }
.math-pi-tile .tile-kicker { color: rgba(200,140,255,0.85); font-weight: 700; }
.math-pi-tile strong { color: #fff; font-size: 1.05rem; }
.math-pi-tile small  { color: rgba(255,255,255,0.6); }

.math-pi-tile:hover {
  border-color: rgba(175,82,222,0.6);
  box-shadow: 0 10px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(175,82,222,0.2);
}

.math-graphing-tile {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,12,26,0.12) 0%, rgba(8,12,26,0.92) 100%),
    radial-gradient(circle at 25% 40%, rgba(0,122,255,0.28), transparent 40%),
    radial-gradient(circle at 80% 65%, rgba(88,86,214,0.22), transparent 38%),
    repeating-linear-gradient(
      90deg,
      rgba(0,122,255,0.05) 0,
      rgba(0,122,255,0.05) 1px,
      transparent 1px,
      transparent 28px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,122,255,0.05) 0,
      rgba(0,122,255,0.05) 1px,
      transparent 1px,
      transparent 28px
    ),
    #080c1a;
  border: 1px solid rgba(0,122,255,0.28);
  color: #fff;
}

.math-graphing-tile::before {
  content: 'f(x)';
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(0,122,255,0.14);
  pointer-events: none;
}

.math-graphing-tile > * { position: relative; z-index: 1; }
.math-graphing-tile .tile-kicker { color: rgba(100,170,255,0.9); font-weight: 700; }
.math-graphing-tile strong { color: #ffffff; }
.math-graphing-tile small  { color: rgba(200,220,255,0.68); }

.math-graphing-tile:hover {
  border-color: rgba(0,122,255,0.6);
  box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,122,255,0.22);
}

.math-riemann-tile {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.38), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(14,165,233,0.22), transparent 48%),
    radial-gradient(ellipse at 80% 60%, rgba(245,158,11,0.14), transparent 40%),
    #07030f;
  border: 1px solid rgba(124,58,237,0.26);
  color: #fff;
}

.math-riemann-tile::before {
  content: 'ζ';
  position: absolute;
  top: 50%; right: 16px;
  transform: translateY(-56%);
  font-size: 7rem;
  font-weight: 900;
  opacity: 0.07;
  pointer-events: none;
  line-height: 1;
}

.math-riemann-tile > * { position: relative; z-index: 1; }
.math-riemann-tile .tile-kicker { color: rgba(167,139,250,0.9); font-weight: 700; }
.math-riemann-tile strong { color: #fff; }
.math-riemann-tile small  { color: rgba(220,210,255,0.62); }

.math-riemann-tile:hover {
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,58,237,0.22);
}

.math-fibonacci-tile {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  background:
    linear-gradient(170deg, rgba(3,18,10,0.05) 0%, rgba(3,18,10,0.9) 100%),
    radial-gradient(circle at 20% 22%, rgba(16,185,129,0.32), transparent 38%),
    radial-gradient(circle at 82% 70%, rgba(14,165,233,0.20), transparent 36%),
    radial-gradient(circle at 52% 8%, rgba(250,204,21,0.12), transparent 28%),
    #03120a;
  border: 1px solid rgba(16,185,129,0.25);
  color: #fff;
}

.math-fibonacci-tile::before {
  content: '1,1,2,3,5';
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(110,231,183,0.14);
  pointer-events: none;
  white-space: nowrap;
}

.math-fibonacci-tile > * { position: relative; z-index: 1; }
.math-fibonacci-tile .tile-kicker { color: rgba(110,231,183,0.9); font-weight: 700; }
.math-fibonacci-tile strong { color: #fff; }
.math-fibonacci-tile small  { color: rgba(220,255,240,0.68); }

.math-fibonacci-tile:hover {
  border-color: rgba(16,185,129,0.58);
  box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(16,185,129,0.22);
}

/* ── Chemistry module ───────────────────────────── */

.chemistry-banner {
  background:
    radial-gradient(ellipse at 14% 48%, rgba(52, 199, 89, 0.38), transparent 52%),
    radial-gradient(ellipse at 84% 22%, rgba(0, 199, 190, 0.30), transparent 50%),
    #03120a;
  border: 1px solid rgba(52, 199, 89, 0.25);
}

.chemistry-banner.open {
  border-bottom: none;
}

.chemistry-tile-grid {
  background:
    radial-gradient(ellipse at 8% 0%, rgba(52, 199, 89, 0.15), transparent 45%),
    radial-gradient(ellipse at 94% 100%, rgba(0, 199, 190, 0.12), transparent 50%),
    #03120a;
  border: 1px solid rgba(52, 199, 89, 0.14);
  border-top: none;
}

.chemistry-pt-tile {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  background:
    linear-gradient(170deg, rgba(3, 18, 10, 0.05) 0%, rgba(3, 18, 10, 0.85) 100%),
    radial-gradient(circle at 12% 20%, rgba(52, 255, 120, 0.28), transparent 36%),
    radial-gradient(circle at 88% 75%, rgba(0, 220, 200, 0.22), transparent 38%),
    radial-gradient(circle at 55% 10%, rgba(100, 220, 255, 0.18), transparent 30%),
    #03120a;
  border: 1px solid rgba(52, 199, 89, 0.22);
  color: #fff;
}

.chemistry-pt-tile::before {
  content: '⚛';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  font-size: 6.5rem;
  opacity: 0.06;
  pointer-events: none;
  line-height: 1;
}

.chemistry-pt-tile > * { position: relative; z-index: 1; }

.chemistry-pt-tile .tile-kicker {
  color: rgba(52, 255, 120, 0.85);
  font-weight: 700;
}

.chemistry-pt-tile strong {
  color: #fff;
  font-size: 1.12rem;
}

.chemistry-pt-tile small {
  color: rgba(255, 255, 255, 0.65);
}

.chemistry-pt-tile:hover {
  border-color: rgba(52, 199, 89, 0.55);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(52, 199, 89, 0.2);
}

.chemistry-bonding-tile {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  background:
    linear-gradient(180deg, rgba(4, 19, 11, 0.08) 0%, rgba(4, 19, 11, 0.9) 100%),
    radial-gradient(circle at 18% 22%, rgba(255, 186, 102, 0.28), transparent 32%),
    radial-gradient(circle at 82% 72%, rgba(61, 221, 197, 0.2), transparent 36%),
    linear-gradient(145deg, #08160f 0%, #0c2318 55%, #0b1c15 100%);
  border: 1px solid rgba(82, 211, 142, 0.22);
  color: #fff;
}

.chemistry-bonding-tile::before,
.chemistry-bonding-tile::after {
  position: absolute;
  font-weight: 900;
  letter-spacing: -0.05em;
  opacity: 0.08;
  pointer-events: none;
  line-height: 1;
}

.chemistry-bonding-tile::before {
  content: "Na+";
  left: 1rem;
  top: 1rem;
  font-size: 3.9rem;
}

.chemistry-bonding-tile::after {
  content: "Cl-";
  right: 1rem;
  bottom: 0.8rem;
  font-size: 3.6rem;
}

.chemistry-bonding-tile > * {
  position: relative;
  z-index: 1;
}

.chemistry-bonding-tile .tile-kicker {
  color: rgba(164, 255, 194, 0.88);
  font-weight: 700;
}

.chemistry-bonding-tile strong {
  color: #fff;
  font-size: 1.05rem;
}

.chemistry-bonding-tile small {
  color: rgba(226, 246, 238, 0.76);
  max-width: 32ch;
}

.chemistry-bonding-tile:hover {
  border-color: rgba(82, 211, 142, 0.56);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(82, 211, 142, 0.18);
}

.chemistry-bonding-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.3rem;
}

.chemistry-bonding-tile-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(219, 241, 229, 0.14);
  color: #f0fffa;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Life Sciences module ───────────────────────── */

.lifesci-banner {
  background:
    radial-gradient(ellipse at 18% 52%, rgba(80, 220, 140, 0.36), transparent 52%),
    radial-gradient(ellipse at 80% 24%, rgba(160, 230, 60, 0.24), transparent 50%),
    #030e06;
  border: 1px solid rgba(80, 220, 140, 0.26);
}

.lifesci-banner.open {
  border-bottom: none;
}

.lifesci-tile-grid {
  background:
    radial-gradient(ellipse at 6% 0%, rgba(80, 220, 140, 0.14), transparent 44%),
    radial-gradient(ellipse at 92% 100%, rgba(160, 230, 60, 0.10), transparent 50%),
    #030e06;
  border: 1px solid rgba(80, 220, 140, 0.14);
  border-top: none;
}

/* Tinted coming-soon previews for Life Sciences */
.lifesci-cell-preview {
  border-color: rgba(80, 220, 140, 0.28) !important;
}
.lifesci-cell-preview .tile-kicker { color: rgba(100, 240, 160, 0.85); }

.lifesci-cell-tile {
  background:
    radial-gradient(circle at 18% 22%, rgba(130, 245, 170, 0.22), transparent 22%),
    radial-gradient(circle at 78% 78%, rgba(210, 255, 110, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(7, 28, 15, 0.98), rgba(7, 32, 17, 0.95));
  border-color: rgba(90, 228, 145, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.lifesci-cell-tile .tile-kicker {
  color: rgba(132, 248, 183, 0.92);
}

.lifesci-cell-tile strong {
  color: #f3fff4;
}

.lifesci-cell-tile small {
  color: rgba(220, 243, 224, 0.82);
}

.lifesci-dna-preview {
  border-color: rgba(180, 100, 255, 0.28) !important;
}
.lifesci-dna-preview .tile-kicker { color: rgba(200, 140, 255, 0.85); }

.lifesci-axolotl-tile {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 140, 174, 0.34), transparent 30%),
    radial-gradient(circle at 84% 22%, rgba(66, 214, 198, 0.26), transparent 28%),
    linear-gradient(160deg, rgba(8, 38, 42, 0.98), rgba(7, 62, 58, 0.95));
  border-color: rgba(255, 155, 184, 0.32) !important;
}

.lifesci-axolotl-tile::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 7rem;
  height: 3.2rem;
  border-radius: 52% 48% 45% 55%;
  background:
    radial-gradient(circle at 22% 42%, #173135 0 4px, transparent 5px),
    linear-gradient(90deg, rgba(255, 209, 222, 0.95), rgba(246, 126, 162, 0.88));
  box-shadow:
    -5.4rem -0.25rem 0 -1.3rem rgba(255, 185, 204, 0.86),
    -6.2rem -1rem 0 -1.65rem rgba(238, 92, 135, 0.8),
    -6.2rem 0.55rem 0 -1.65rem rgba(238, 92, 135, 0.8);
  opacity: 0.82;
}

.lifesci-axolotl-tile .tile-kicker {
  color: rgba(255, 185, 204, 0.92);
}

.lifesci-axolotl-tile strong,
.lifesci-axolotl-tile small {
  position: relative;
  z-index: 1;
}

.lifesci-eco-preview {
  border-color: rgba(160, 220, 50, 0.28) !important;
}
.lifesci-eco-preview .tile-kicker { color: rgba(190, 240, 80, 0.85); }

/* ── Systems and Society module ────────────────── */

.systems-banner {
  background:
    radial-gradient(ellipse at 18% 45%, rgba(50, 190, 168, 0.42), transparent 55%),
    radial-gradient(ellipse at 82% 26%, rgba(74, 127, 255, 0.34), transparent 48%),
    #04141d;
  border: 1px solid rgba(76, 188, 175, 0.28);
}

.systems-banner.open {
  border-bottom: none;
}

.systems-tile-grid {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(50, 190, 168, 0.18), transparent 48%),
    radial-gradient(ellipse at 92% 100%, rgba(74, 127, 255, 0.16), transparent 50%),
    #04141d;
  border: 1px solid rgba(76, 188, 175, 0.16);
  border-top: none;
}

.ten-eighty-ten-tile {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  background:
    linear-gradient(180deg, rgba(6, 18, 30, 0.14) 0%, rgba(6, 18, 30, 0.88) 100%),
    radial-gradient(circle at 18% 22%, rgba(109, 213, 255, 0.34), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(255, 215, 120, 0.24), transparent 28%),
    radial-gradient(circle at 68% 82%, rgba(72, 214, 138, 0.3), transparent 38%),
    linear-gradient(160deg, #081826 0%, #0f2c43 100%);
}

.ten-eighty-ten-tile::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  height: 18px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(168, 220, 255, 0.95) 0 10%,
      rgba(95, 218, 150, 0.96) 10% 90%,
      rgba(255, 219, 132, 0.96) 90% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 24px rgba(4, 10, 18, 0.26);
}

.ten-eighty-ten-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 90%);
  pointer-events: none;
}

.ten-eighty-ten-tile > * {
  position: relative;
  z-index: 1;
}

.ten-eighty-ten-tile .tile-kicker {
  color: #b6e7ff;
}

.ten-eighty-ten-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.64);
}

.ten-eighty-ten-tile small {
  color: #d0e5f6;
  max-width: 31ch;
}

.ten-eighty-ten-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.3rem;
}

.ten-eighty-ten-tile-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(194, 228, 245, 0.14);
  color: #f1f8ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Engineering module ────────────────────────── */

.engineering-banner {
  background:
    radial-gradient(ellipse at 16% 46%, rgba(255, 204, 0, 0.34), transparent 52%),
    radial-gradient(ellipse at 84% 22%, rgba(0, 122, 255, 0.18), transparent 50%),
    #15130a;
  border: 1px solid rgba(255, 204, 0, 0.22);
}

.engineering-banner.open {
  border-bottom: none;
}

.engineering-tile-grid {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255, 204, 0, 0.14), transparent 46%),
    radial-gradient(ellipse at 94% 100%, rgba(0, 122, 255, 0.1), transparent 50%),
    #15130a;
  border: 1px solid rgba(255, 204, 0, 0.12);
  border-top: none;
}

.engineering-bridge-tile {
  position: relative;
  overflow: hidden;
  min-height: 236px;
  background:
    linear-gradient(180deg, rgba(21, 19, 10, 0.14) 0%, rgba(21, 19, 10, 0.92) 100%),
    radial-gradient(circle at 15% 20%, rgba(255, 204, 0, 0.28), transparent 34%),
    radial-gradient(circle at 88% 72%, rgba(0, 122, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(120, 186, 226, 0.18) 0 44%, rgba(34, 80, 117, 0.36) 44% 100%),
    #15130a;
  border: 1px solid rgba(255, 204, 0, 0.22);
  color: #fff;
}

.engineering-bridge-tile::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 34px;
  height: 52px;
  background:
    linear-gradient(
      135deg,
      transparent 0 7%,
      rgba(255, 255, 255, 0.1) 7% 10%,
      transparent 10% 17%,
      rgba(255, 255, 255, 0.1) 17% 20%,
      transparent 20% 27%,
      rgba(255, 255, 255, 0.1) 27% 30%,
      transparent 30% 37%,
      rgba(255, 255, 255, 0.1) 37% 40%,
      transparent 40% 47%,
      rgba(255, 255, 255, 0.1) 47% 50%,
      transparent 50% 57%,
      rgba(255, 255, 255, 0.1) 57% 60%,
      transparent 60% 67%,
      rgba(255, 255, 255, 0.1) 67% 70%,
      transparent 70% 77%,
      rgba(255, 255, 255, 0.1) 77% 80%,
      transparent 80% 100%
    );
  border-top: 6px solid rgba(245, 247, 250, 0.64);
  border-bottom: 6px solid rgba(245, 247, 250, 0.44);
  border-radius: 10px;
  opacity: 0.9;
  pointer-events: none;
}

.engineering-bridge-tile::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 20px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 204, 0, 0.2), rgba(255, 204, 0, 0.6), rgba(255, 204, 0, 0.2));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.engineering-bridge-tile > * {
  position: relative;
  z-index: 1;
}

.engineering-bridge-tile .tile-kicker {
  color: rgba(255, 228, 132, 0.9);
  font-weight: 700;
}

.engineering-bridge-tile strong {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.62);
}

.engineering-bridge-tile small {
  color: #d9e7f5;
  max-width: 33ch;
}

.engineering-bridge-tile:hover {
  border-color: rgba(255, 204, 0, 0.52);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 204, 0, 0.16);
}

.engineering-bridge-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.35rem;
}

.engineering-bridge-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(230, 236, 243, 0.14);
  color: #f5f7fa;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Fabrication module ────────────────────────── */

.fabrication-banner {
  background:
    radial-gradient(ellipse at 16% 48%, rgba(255, 150, 82, 0.42), transparent 52%),
    radial-gradient(ellipse at 84% 24%, rgba(68, 214, 197, 0.28), transparent 48%),
    #0d1318;
  border: 1px solid rgba(255, 161, 96, 0.24);
}

.fabrication-banner.open {
  border-bottom: none;
}

.fabrication-tile-grid {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255, 150, 82, 0.18), transparent 46%),
    radial-gradient(ellipse at 94% 100%, rgba(68, 214, 197, 0.12), transparent 50%),
    #0d1318;
  border: 1px solid rgba(255, 161, 96, 0.14);
  border-top: none;
}

.fabrication-cad-tile {
  position: relative;
  overflow: hidden;
  min-height: 236px;
  background:
    linear-gradient(180deg, rgba(13, 19, 24, 0.1) 0%, rgba(13, 19, 24, 0.9) 100%),
    radial-gradient(circle at 14% 18%, rgba(255, 160, 82, 0.3), transparent 34%),
    radial-gradient(circle at 84% 74%, rgba(84, 220, 206, 0.22), transparent 36%),
    linear-gradient(135deg, #121920 0%, #15222c 48%, #10212a 100%);
  border: 1px solid rgba(255, 161, 96, 0.22);
  color: #fff;
}

.fabrication-cad-tile::before {
  content: "3D";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  font-size: 6.6rem;
  font-weight: 900;
  letter-spacing: -0.08em;
  opacity: 0.06;
  pointer-events: none;
  line-height: 1;
}

.fabrication-cad-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 88%);
  pointer-events: none;
}

.fabrication-cad-tile > * {
  position: relative;
  z-index: 1;
}

.fabrication-cad-tile .tile-kicker {
  color: rgba(255, 197, 146, 0.88);
}

.fabrication-cad-tile strong {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.58);
}

.fabrication-cad-tile small {
  color: rgba(233, 243, 249, 0.8);
  max-width: 34ch;
}

.fabrication-cad-tile:hover {
  border-color: rgba(255, 161, 96, 0.56);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 161, 96, 0.2);
}

.fabrication-cad-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.32rem;
}

.fabrication-cad-tile-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(233, 243, 249, 0.14);
  color: #f6fbff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Fabrication VR tile ───────────────────────── */

.fabrication-vr-tile {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(111, 76, 255, 0.82), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 212, 255, 0.62), transparent 52%),
    linear-gradient(135deg, #1a0533 0%, #0d1b3e 100%);
  border: 1px solid rgba(111, 76, 255, 0.32);
  color: #fff;
}

.fabrication-vr-tile::before {
  content: "VR";
  position: absolute;
  top: 50%;
  right: -0.12em;
  transform: translateY(-50%);
  font-size: 9rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  line-height: 1;
}

.fabrication-vr-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(111, 76, 255, 0.18) 0%, rgba(0, 212, 255, 0.08) 100%);
  pointer-events: none;
}

.fabrication-vr-tile > * { position: relative; z-index: 1; }

.fabrication-vr-tile .tile-kicker { color: rgba(180, 160, 255, 0.88); }
.fabrication-vr-tile strong { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.58); }
.fabrication-vr-tile small  { color: rgba(210, 230, 255, 0.8); max-width: 34ch; }

.fabrication-vr-tile:hover {
  border-color: rgba(111, 76, 255, 0.56);
  box-shadow: 0 14px 38px rgba(0,0,0,0.55), 0 0 0 1px rgba(111, 76, 255, 0.22);
}

.fabrication-vr-tile-meta {
  display: flex; flex-wrap: wrap; gap: 0.42rem; margin-top: 0.32rem;
}

.fabrication-vr-tile-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(210, 230, 255, 0.14);
  color: #e8f0ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Fabrication 3D Print tile ─────────────────── */

.fabrication-print-tile {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  background:
    radial-gradient(ellipse at 18% 40%, rgba(255, 107, 53, 0.80), transparent 52%),
    radial-gradient(ellipse at 82% 60%, rgba(255, 196, 0, 0.55), transparent 50%),
    linear-gradient(135deg, #1c0a00 0%, #2a1500 100%);
  border: 1px solid rgba(255, 107, 53, 0.30);
  color: #fff;
}

.fabrication-print-tile::before {
  content: "FDM";
  position: absolute;
  top: 50%;
  right: -0.08em;
  transform: translateY(-50%);
  font-size: 8rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  line-height: 1;
}

.fabrication-print-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,107,53,0.15) 0%, rgba(255,196,0,0.08) 100%);
  pointer-events: none;
}

.fabrication-print-tile > * { position: relative; z-index: 1; }

.fabrication-print-tile .tile-kicker { color: rgba(255, 200, 160, 0.88); }
.fabrication-print-tile strong { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.58); }
.fabrication-print-tile small  { color: rgba(255, 235, 210, 0.8); max-width: 34ch; }

.fabrication-print-tile:hover {
  border-color: rgba(255, 107, 53, 0.55);
  box-shadow: 0 14px 38px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,107,53,0.22);
}

.fabrication-print-tile-meta {
  display: flex; flex-wrap: wrap; gap: 0.42rem; margin-top: 0.32rem;
}

.fabrication-print-tile-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 235, 210, 0.14);
  color: #fff3e8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Fabrication XR tile ───────────────────────── */

.fabrication-xr-tile {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  background:
    radial-gradient(ellipse at 22% 35%, rgba(0, 200, 160, 0.78), transparent 52%),
    radial-gradient(ellipse at 78% 70%, rgba(124, 92, 255, 0.55), transparent 50%),
    linear-gradient(135deg, #00120e 0%, #0d1230 100%);
  border: 1px solid rgba(0, 200, 160, 0.30);
  color: #fff;
}

.fabrication-xr-tile::before {
  content: "XR";
  position: absolute;
  top: 50%;
  right: -0.10em;
  transform: translateY(-50%);
  font-size: 7rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  line-height: 1;
}

.fabrication-xr-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,200,160,0.16) 0%, rgba(124,92,255,0.08) 100%);
  pointer-events: none;
}

.fabrication-xr-tile > * { position: relative; z-index: 1; }

.fabrication-xr-tile .tile-kicker { color: rgba(150, 255, 230, 0.88); }
.fabrication-xr-tile strong { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.58); }
.fabrication-xr-tile small  { color: rgba(210, 245, 240, 0.8); max-width: 34ch; }

.fabrication-xr-tile:hover {
  border-color: rgba(0, 200, 160, 0.56);
  box-shadow: 0 14px 38px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,200,160,0.22);
}

.fabrication-xr-tile-meta {
  display: flex; flex-wrap: wrap; gap: 0.42rem; margin-top: 0.32rem;
}

.fabrication-xr-tile-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: rgba(0, 200, 160, 0.15);
  border: 1px solid rgba(0, 200, 160, 0.28);
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(150, 255, 230, 0.9);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Art and Design module ─────────────────────── */

.art-banner {
  background:
    radial-gradient(ellipse at 16% 48%, rgba(255, 153, 84, 0.44), transparent 52%),
    radial-gradient(ellipse at 52% 18%, rgba(67, 210, 197, 0.28), transparent 42%),
    radial-gradient(ellipse at 86% 72%, rgba(255, 95, 109, 0.26), transparent 44%),
    #140d14;
  border: 1px solid rgba(255, 166, 108, 0.26);
}

.art-banner.open {
  border-bottom: none;
}

.art-tile-grid {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255, 153, 84, 0.16), transparent 46%),
    radial-gradient(ellipse at 92% 100%, rgba(67, 210, 197, 0.12), transparent 48%),
    #140d14;
  border: 1px solid rgba(255, 166, 108, 0.14);
  border-top: none;
}

/* ── Language and Literature module ───────────── */

.language-banner {
  background:
    radial-gradient(ellipse at 18% 42%, rgba(80, 180, 132, 0.36), transparent 52%),
    radial-gradient(ellipse at 70% 18%, rgba(238, 196, 104, 0.24), transparent 44%),
    radial-gradient(ellipse at 88% 78%, rgba(86, 138, 210, 0.22), transparent 46%),
    #11140d;
  border: 1px solid rgba(206, 188, 122, 0.24);
}

.language-banner.open {
  border-bottom: none;
}

.language-tile-grid {
  background:
    radial-gradient(ellipse at 8% 0%, rgba(80, 180, 132, 0.14), transparent 46%),
    radial-gradient(ellipse at 94% 98%, rgba(238, 196, 104, 0.12), transparent 50%),
    #11140d;
  border: 1px solid rgba(206, 188, 122, 0.14);
  border-top: none;
}

.language-tile-grid .module-cluster-label {
  border-color: rgba(206, 188, 122, 0.2);
}

.language-tile-grid .module-cluster-label strong {
  color: rgba(242, 230, 188, 0.92);
}

.language-tile-grid .module-cluster-label small {
  color: rgba(224, 229, 213, 0.68);
}

.art-color-tile {
  position: relative;
  overflow: hidden;
  min-height: 236px;
  background:
    linear-gradient(180deg, rgba(20, 13, 20, 0.08) 0%, rgba(20, 13, 20, 0.92) 100%),
    radial-gradient(circle at 16% 20%, rgba(255, 171, 83, 0.28), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(73, 215, 208, 0.22), transparent 36%),
    linear-gradient(145deg, #1d1120 0%, #23172a 52%, #18121c 100%);
  border: 1px solid rgba(255, 166, 108, 0.22);
  color: #fff;
}

.art-color-tile::before {
  content: "";
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(20, 13, 20, 0.94) 0 26%, transparent 28%),
    conic-gradient(
      #ff6b5b 0deg,
      #ffb347 60deg,
      #ffd95c 105deg,
      #43d2c5 180deg,
      #4da1ff 250deg,
      #ef7aa8 320deg,
      #ff6b5b 360deg
    );
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
  opacity: 0.9;
  pointer-events: none;
}

.art-color-tile::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  height: 18px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 107, 91, 0.9) 0 20%,
      rgba(255, 179, 71, 0.92) 20% 40%,
      rgba(255, 217, 92, 0.88) 40% 58%,
      rgba(67, 210, 197, 0.88) 58% 78%,
      rgba(77, 161, 255, 0.9) 78% 100%
    );
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
  pointer-events: none;
}

.art-color-tile > * {
  position: relative;
  z-index: 1;
}

.art-color-tile .tile-kicker {
  color: rgba(255, 209, 176, 0.9);
  font-weight: 700;
}

.art-color-tile strong {
  color: #fff7ef;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.58);
}

.art-color-tile small {
  color: rgba(240, 232, 239, 0.78);
  max-width: 33ch;
}

.art-color-tile:hover {
  border-color: rgba(255, 166, 108, 0.56);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 166, 108, 0.18);
}

.art-color-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.32rem;
}

.art-color-tile-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(242, 231, 239, 0.14);
  color: #fff6ef;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Recipe Book overhaul
   ═══════════════════════════════════════════════════════════════════════════ */

.recipe-catalog-hero {
  text-align: left;
}

.recipe-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 1rem;
  margin-top: 1.4rem;
}

.recipe-hero-panel {
  border: 1px solid rgba(202, 214, 229, 0.92);
  border-radius: 24px;
  padding: 1.15rem 1.2rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.98));
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.recipe-hero-panel--accent {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(249, 252, 255, 0.98), rgba(239, 246, 255, 0.98));
}

.recipe-hero-label {
  margin: 0 0 0.55rem;
  color: #5e7088;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.recipe-hero-list,
.recipe-hero-copy {
  margin: 0;
  color: #354557;
  line-height: 1.58;
}

.recipe-hero-list {
  padding-left: 1.2rem;
}

.recipe-command-center {
  padding-top: 1.15rem;
}

.recipe-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.recipe-filter {
  border: 1px solid rgba(197, 207, 220, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #2b3a4c;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.58rem 0.9rem;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.recipe-filter:hover,
.recipe-filter.is-active {
  transform: translateY(-1px);
  border-color: rgba(54, 116, 243, 0.55);
  background: rgba(236, 245, 255, 0.96);
}

.recipe-stats {
  margin-top: 0.85rem;
  color: #5d6a79;
  font-size: 0.92rem;
  font-weight: 600;
}

.recipe-pathway-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.recipe-pathway-card {
  min-height: 180px;
  border-radius: 24px;
  padding: 1.15rem;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

.recipe-pathway-card h3,
.recipe-pathway-card p {
  margin: 0;
}

.recipe-pathway-card h3 {
  margin-bottom: 0.55rem;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}

.recipe-pathway-kicker {
  margin-bottom: 0.55rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.recipe-pathway-card--robots {
  background:
    radial-gradient(circle at top right, rgba(116, 190, 255, 0.35), transparent 34%),
    linear-gradient(135deg, #153454, #0f2238);
}

.recipe-pathway-card--electronics {
  background:
    radial-gradient(circle at top right, rgba(253, 224, 71, 0.24), transparent 34%),
    linear-gradient(135deg, #4b3407, #231f15);
}

.recipe-pathway-card--gamedev {
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.22), transparent 34%),
    linear-gradient(135deg, #0e3c38, #0d2529);
}

.recipe-pathway-card--design {
  background:
    radial-gradient(circle at top right, rgba(244, 114, 182, 0.22), transparent 34%),
    linear-gradient(135deg, #442346, #24162f);
}

.recipe-catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.recipe-catalog-card {
  border: 1px solid rgba(206, 214, 226, 0.95);
  border-radius: 24px;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 252, 0.98));
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.recipe-catalog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.recipe-catalog-path {
  margin: 0;
  color: #5c6d83;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.recipe-level {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.73rem;
  font-weight: 800;
}

.recipe-level--beginner {
  background: #dcfce7;
  color: #166534;
}

.recipe-level--intermediate {
  background: #fef3c7;
  color: #92400e;
}

.recipe-level--advanced {
  background: #fee2e2;
  color: #991b1b;
}

.recipe-catalog-card h3 {
  margin: 0;
  color: #142132;
  font-size: 1.22rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.recipe-catalog-hook,
.recipe-catalog-outcome,
.recipe-checklist {
  margin: 0;
}

.recipe-catalog-hook {
  color: #425161;
  line-height: 1.55;
}

.recipe-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.recipe-meta-row span {
  border-radius: 999px;
  background: #edf3f9;
  color: #486077;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.26rem 0.56rem;
}

.recipe-catalog-outcome {
  color: #243446;
  line-height: 1.5;
}

.recipe-checklist {
  padding-left: 1.1rem;
  color: #526173;
  line-height: 1.55;
}

.recipe-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.recipe-template-card {
  border: 1px solid rgba(205, 214, 226, 0.92);
  border-radius: 22px;
  padding: 1rem 1.1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 252, 0.98));
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
}

.recipe-template-card h3,
.recipe-template-list {
  margin: 0;
}

.recipe-template-card h3 {
  margin-bottom: 0.75rem;
  color: #192a3f;
}

.recipe-template-list {
  padding-left: 1.1rem;
  color: #506073;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .recipe-catalog,
  .recipe-pathway-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .recipe-hero-grid,
  .recipe-template-grid,
  .recipe-catalog,
  .recipe-pathway-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Volcano Simulator tile ───────────────────── */

.volcano-sim-tile {
  background:
    linear-gradient(180deg, rgba(15, 4, 2, 0.10) 0%, rgba(20, 5, 2, 0.90) 100%),
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(220, 70, 10, 0.55), transparent 65%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(180, 40, 5, 0.35), transparent 55%),
    radial-gradient(ellipse 40% 30% at 80% 60%, rgba(255, 120, 20, 0.25), transparent 50%),
    #0e0201;
}

.volcano-sim-tile .tile-kicker { color: #ff9060; }
.volcano-sim-tile strong       { color: #ffffff; text-shadow: 0 2px 14px rgba(0,0,0,0.8); }
.volcano-sim-tile small        { color: #f0c098; }

html[data-site-theme]:not([data-site-theme="sakura"]) body:not(.theme-liquid-woodland) {
  background: var(--page-wash), var(--bg);
}

html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) {
  background-image:
    radial-gradient(ellipse 8px 14px at 22px 24px, rgba(255, 183, 197, 0.8) 0 60%, transparent 64%),
    radial-gradient(ellipse 7px 13px at 112px 40px, rgba(255, 250, 252, 0.92) 0 58%, transparent 63%),
    radial-gradient(ellipse 9px 15px at 72px 122px, rgba(255, 133, 178, 0.28) 0 58%, transparent 63%),
    radial-gradient(ellipse 8px 13px at 170px 78px, rgba(255, 224, 236, 0.8) 0 58%, transparent 63%),
    radial-gradient(circle at 50% 100%, rgba(255, 183, 197, 0.46), transparent 42%),
    var(--page-wash),
    linear-gradient(var(--bg), var(--bg));
  background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: 220px 220px, 280px 280px, 260px 260px, 320px 320px, auto, auto, auto;
  background-position: 0 -140px, 110px -240px, 160px -180px, 240px -300px, 0 100%, 0 0, 0 0;
  animation: sakura-petals-fall 30s linear infinite;
}

html[data-site-theme] body:not(.theme-liquid-woodland) button.secondary,
html[data-site-theme] body:not(.theme-liquid-woodland) .button.secondary,
html[data-site-theme] body:not(.theme-liquid-woodland) input[type="search"],
html[data-site-theme] body:not(.theme-liquid-woodland) input[type="text"],
html[data-site-theme] body:not(.theme-liquid-woodland) select,
html[data-site-theme] body:not(.theme-liquid-woodland) .go-status,
html[data-site-theme] body:not(.theme-liquid-woodland) .chess-status,
html[data-site-theme] body:not(.theme-liquid-woodland) .go-captures,
html[data-site-theme] body:not(.theme-liquid-woodland) .chess-rules,
html[data-site-theme] body:not(.theme-liquid-woodland) .chess-log {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border-color: var(--line);
  color: var(--text);
}

html[data-site-theme] body:not(.theme-liquid-woodland) .site-footer a {
  color: var(--theme-accent);
}

@keyframes sakura-petals-fall {
  from {
    background-position: 0 -140px, 110px -240px, 160px -180px, 240px -300px, 0 0, 0 0;
  }
  to {
    background-position: 96px 920px, 8px 1080px, 232px 980px, 172px 1180px, 0 0, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) {
    animation: none;
  }
}

html[data-site-theme] body:not(.theme-liquid-woodland) .site-header,
html[data-site-theme] body:not(.theme-liquid-woodland) .topbar {
  background: var(--header-bg);
  border-bottom-color: var(--header-border);
}

html[data-site-theme] body:not(.theme-liquid-woodland) .brand,
html[data-site-theme] body:not(.theme-liquid-woodland) .site-nav a[aria-current="page"],
html[data-site-theme] body:not(.theme-liquid-woodland) .site-nav a:hover,
html[data-site-theme] body:not(.theme-liquid-woodland) .topbar nav a[aria-current="page"],
html[data-site-theme] body:not(.theme-liquid-woodland) .topbar nav a:hover,
html[data-site-theme] body:not(.theme-liquid-woodland) .nav-settings-toggle {
  color: var(--nav-ink-strong);
}

html[data-site-theme] body:not(.theme-liquid-woodland) .site-nav a,
html[data-site-theme] body:not(.theme-liquid-woodland) .topbar nav a,
html[data-site-theme] body:not(.theme-liquid-woodland) .nav-toggle {
  color: var(--nav-ink);
}

html[data-site-theme] body:not(.theme-liquid-woodland) .card,
html[data-site-theme] body:not(.theme-liquid-woodland) .lesson-section,
html[data-site-theme] body:not(.theme-liquid-woodland) .terminal.eliza-app,
html[data-site-theme] body:not(.theme-liquid-woodland) .quick-links a,
html[data-site-theme] body:not(.theme-liquid-woodland) .weekly-day-card,
html[data-site-theme] body:not(.theme-liquid-woodland) .weekly-focus {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border-color: var(--line);
}

html[data-site-theme] body:not(.theme-liquid-woodland) a,
html[data-site-theme] body:not(.theme-liquid-woodland) .vod-link {
  color: var(--theme-accent);
}

html[data-site-theme] body:not(.theme-liquid-woodland) a:hover,
html[data-site-theme] body:not(.theme-liquid-woodland) .vod-link:hover {
  color: var(--theme-accent-strong);
}

html[data-site-theme="day"] {
  --bg: #edf5ff;
  --text: #182235;
  --muted: #61728c;
  --line: #c6d6ec;
  --header-bg: rgba(239, 247, 255, 0.88);
  --header-border: rgba(192, 210, 232, 0.92);
  --nav-ink: #37506d;
  --nav-ink-strong: #0f203b;
  --surface-1: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(244, 249, 255, 0.98);
  --theme-accent: #2376ff;
  --theme-accent-strong: #0b58d6;
  --theme-accent-soft: rgba(35, 118, 255, 0.14);
  --page-wash:
    radial-gradient(1200px 600px at -10% -10%, rgba(103, 177, 255, 0.26), transparent 50%),
    radial-gradient(900px 420px at 110% 0%, rgba(180, 223, 255, 0.28), transparent 45%);
}

html[data-site-theme="night"] {
  --bg: #0e1524;
  --text: #eef3ff;
  --muted: #93a2bd;
  --line: #2b3b58;
  --header-bg: rgba(11, 18, 31, 0.86);
  --header-border: rgba(43, 59, 88, 0.92);
  --nav-ink: #c8d5ef;
  --nav-ink-strong: #ffffff;
  --surface-1: rgba(19, 29, 47, 0.94);
  --surface-2: rgba(13, 20, 34, 0.98);
  --theme-accent: #7fb4ff;
  --theme-accent-strong: #a3cbff;
  --theme-accent-soft: rgba(127, 180, 255, 0.16);
  --page-wash:
    radial-gradient(1200px 600px at -10% -10%, rgba(62, 109, 255, 0.20), transparent 50%),
    radial-gradient(900px 420px at 110% 0%, rgba(117, 73, 255, 0.18), transparent 45%);
}

html[data-site-theme="sakura"] {
  --bg: #fff0f5;
  --text: #5d1224;
  --muted: #8d4f63;
  --line: #ffc2d7;
  --header-bg: rgba(255, 251, 253, 0.9);
  --header-border: rgba(255, 133, 178, 0.58);
  --nav-ink: #9a4964;
  --nav-ink-strong: #5d1224;
  --surface-1: rgba(255, 255, 255, 0.95);
  --surface-2: rgba(255, 247, 250, 0.99);
  --theme-accent: #ff85b2;
  --theme-accent-strong: #d94d84;
  --theme-accent-soft: rgba(255, 133, 178, 0.2);
  --page-wash:
    radial-gradient(980px 520px at 50% 100%, rgba(255, 133, 178, 0.22), transparent 56%),
    radial-gradient(1200px 600px at -10% -10%, rgba(255, 196, 219, 0.3), transparent 52%),
    radial-gradient(900px 420px at 110% 0%, rgba(255, 231, 241, 0.38), transparent 45%);
}

html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) .site-header,
html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) .topbar,
html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) button.secondary,
html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) .button.secondary,
html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) input[type="search"],
html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) input[type="text"],
html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) select,
html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) .go-status,
html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) .chess-status,
html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) .go-captures,
html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) .chess-rules,
html[data-site-theme="sakura"] body:not(.theme-liquid-woodland) .chess-log {
  border-color: rgba(255, 133, 178, 0.58);
  box-shadow:
    0 12px 28px rgba(213, 108, 149, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(255, 133, 178, 0.08);
}

html[data-theme="sakura"] .home-widget,
html[data-theme="sakura"] .home-launch-card,
html[data-site-theme="sakura"] .home-widget,
html[data-site-theme="sakura"] .home-launch-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 246, 250, 0.86));
  border-color: rgba(255, 133, 178, 0.66);
  box-shadow:
    0 14px 30px rgba(213, 108, 149, 0.12),
    inset 2px 2px 0 rgba(255, 255, 255, 1),
    inset -2px -2px 0 rgba(255, 133, 178, 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="sakura"] .home-launch-card:hover,
html[data-theme="sakura"] .home-launch-card:focus-visible,
html[data-site-theme="sakura"] .home-launch-card:hover,
html[data-site-theme="sakura"] .home-launch-card:focus-visible {
  background: #ffffff;
  box-shadow: 0 15px 30px rgba(255, 133, 178, 0.22);
}

html[data-site-theme="cherry"] {
  --bg: #fff2f4;
  --text: #31141e;
  --muted: #77515f;
  --line: #edc4cf;
  --header-bg: rgba(255, 243, 246, 0.9);
  --header-border: rgba(227, 181, 194, 0.92);
  --nav-ink: #8f294a;
  --nav-ink-strong: #66132e;
  --surface-1: rgba(255, 251, 252, 0.94);
  --surface-2: rgba(255, 241, 244, 0.98);
  --theme-accent: #c61f4d;
  --theme-accent-strong: #990f36;
  --theme-accent-soft: rgba(198, 31, 77, 0.14);
  --page-wash:
    radial-gradient(1200px 600px at -10% -10%, rgba(235, 94, 133, 0.22), transparent 50%),
    radial-gradient(900px 420px at 110% 0%, rgba(255, 196, 212, 0.28), transparent 45%);
}

html[data-site-theme="obsidian"] {
  --bg: #101214;
  --text: #edf0f4;
  --muted: #9aa3ad;
  --line: #2f353c;
  --header-bg: rgba(14, 16, 19, 0.9);
  --header-border: rgba(47, 53, 60, 0.92);
  --nav-ink: #cad1d8;
  --nav-ink-strong: #ffffff;
  --surface-1: rgba(24, 27, 31, 0.94);
  --surface-2: rgba(16, 18, 20, 0.98);
  --theme-accent: #8aa2bb;
  --theme-accent-strong: #b7c9dc;
  --theme-accent-soft: rgba(138, 162, 187, 0.14);
  --page-wash:
    radial-gradient(1200px 600px at -10% -10%, rgba(115, 128, 145, 0.18), transparent 50%),
    radial-gradient(900px 420px at 110% 0%, rgba(61, 70, 81, 0.22), transparent 45%);
}

html[data-site-theme="mahogany"] {
  --bg: #211310;
  --text: #f6eee9;
  --muted: #c4a79a;
  --line: #5a3327;
  --header-bg: rgba(30, 18, 15, 0.9);
  --header-border: rgba(90, 51, 39, 0.94);
  --nav-ink: #e4cbc1;
  --nav-ink-strong: #fff7f2;
  --surface-1: rgba(43, 25, 20, 0.94);
  --surface-2: rgba(30, 18, 15, 0.98);
  --theme-accent: #da845a;
  --theme-accent-strong: #f0a47c;
  --theme-accent-soft: rgba(218, 132, 90, 0.16);
  --page-wash:
    radial-gradient(1200px 600px at -10% -10%, rgba(155, 84, 55, 0.24), transparent 50%),
    radial-gradient(900px 420px at 110% 0%, rgba(88, 45, 29, 0.28), transparent 45%);
}

html[data-site-theme="kiwi"],
html[data-site-theme="emerald"] {
  --bg: #f0fff4;
  --text: #1a3a2a;
  --muted: #4f725c;
  --line: #9ee3b7;
  --header-bg: rgba(251, 255, 252, 0.92);
  --header-border: rgba(56, 155, 101, 0.5);
  --nav-ink: #427053;
  --nav-ink-strong: #1a3a2a;
  --surface-1: rgba(255, 255, 255, 0.96);
  --surface-2: rgba(246, 255, 249, 0.99);
  --theme-accent: #50db82;
  --theme-accent-strong: #389b65;
  --theme-accent-soft: rgba(80, 219, 130, 0.2);
  --page-wash:
    radial-gradient(980px 520px at 50% 100%, rgba(80, 219, 130, 0.22), transparent 56%),
    radial-gradient(1200px 600px at -10% -10%, rgba(169, 255, 209, 0.32), transparent 52%),
    radial-gradient(900px 420px at 110% 0%, rgba(226, 255, 236, 0.4), transparent 45%);
}

html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) .site-header,
html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) .topbar,
html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) button.secondary,
html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) .button.secondary,
html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) input[type="search"],
html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) input[type="text"],
html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) select,
html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) .go-status,
html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) .chess-status,
html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) .go-captures,
html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) .chess-rules,
html[data-site-theme="kiwi"] body:not(.theme-liquid-woodland) .chess-log,
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) .site-header,
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) .topbar,
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) button.secondary,
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) .button.secondary,
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) input[type="search"],
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) input[type="text"],
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) select,
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) .go-status,
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) .chess-status,
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) .go-captures,
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) .chess-rules,
html[data-site-theme="emerald"] body:not(.theme-liquid-woodland) .chess-log {
  border-color: rgba(56, 155, 101, 0.56);
  box-shadow:
    0 12px 28px rgba(56, 155, 101, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(80, 219, 130, 0.08);
}

html[data-theme="emerald"] .home-widget,
html[data-theme="emerald"] .home-launch-card,
html[data-site-theme="kiwi"] .home-widget,
html[data-site-theme="kiwi"] .home-launch-card,
html[data-site-theme="emerald"] .home-widget,
html[data-site-theme="emerald"] .home-launch-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 255, 247, 0.88));
  border-color: rgba(56, 155, 101, 0.66);
  box-shadow:
    0 14px 30px rgba(56, 155, 101, 0.12),
    inset 2px 2px 0 rgba(169, 255, 209, 0.82),
    inset -2px -2px 0 rgba(56, 155, 101, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="emerald"] .home-launch-card:hover,
html[data-theme="emerald"] .home-launch-card:focus-visible,
html[data-site-theme="kiwi"] .home-launch-card:hover,
html[data-site-theme="kiwi"] .home-launch-card:focus-visible,
html[data-site-theme="emerald"] .home-launch-card:hover,
html[data-site-theme="emerald"] .home-launch-card:focus-visible {
  background: #ffffff;
  box-shadow: 0 15px 30px rgba(80, 219, 130, 0.22);
}

html[data-site-theme="mango"],
html[data-site-theme="topaz"] {
  --bg: #fff9e3;
  --text: #5c3c00;
  --muted: #8a6412;
  --line: #ffd86a;
  --header-bg: rgba(255, 252, 244, 0.92);
  --header-border: rgba(244, 169, 0, 0.56);
  --nav-ink: #8a6200;
  --nav-ink-strong: #5c3c00;
  --surface-1: rgba(255, 255, 255, 0.96);
  --surface-2: rgba(255, 251, 235, 0.99);
  --theme-accent: #ffb900;
  --theme-accent-strong: #f4a900;
  --theme-accent-soft: rgba(244, 169, 0, 0.2);
  --page-wash:
    radial-gradient(980px 520px at 50% 100%, rgba(255, 215, 0, 0.24), transparent 56%),
    radial-gradient(1200px 600px at -10% -10%, rgba(255, 247, 173, 0.32), transparent 52%),
    radial-gradient(900px 420px at 110% 0%, rgba(255, 243, 190, 0.42), transparent 45%);
}

html[data-site-theme="vaporwave"] {
  --bg: #050505;
  --text: #ffffff;
  --muted: #9ae9f7;
  --line: rgba(255, 0, 255, 0.44);
  --header-bg: rgba(0, 0, 0, 0.9);
  --header-border: rgba(255, 0, 255, 0.66);
  --nav-ink: #8af7ff;
  --nav-ink-strong: #ffffff;
  --surface-1: rgba(0, 0, 0, 0.88);
  --surface-2: rgba(10, 0, 22, 0.96);
  --theme-accent: #ff00ff;
  --theme-accent-strong: #00ffff;
  --theme-accent-soft: rgba(255, 0, 255, 0.22);
  --page-wash:
    radial-gradient(980px 520px at 50% 100%, rgba(255, 255, 0, 0.18), transparent 50%),
    radial-gradient(1200px 600px at -10% -10%, rgba(255, 0, 255, 0.18), transparent 52%),
    radial-gradient(900px 420px at 110% 0%, rgba(0, 255, 255, 0.16), transparent 42%);
}

html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) {
  position: relative;
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      rgba(0, 0, 0, 0) 1px 3px
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 255, 0.06),
      rgba(0, 255, 255, 0.02),
      rgba(255, 255, 0, 0.05)
    ),
    radial-gradient(circle at 50% 112%, rgba(255, 255, 0, 0.15), transparent 30%),
    var(--page-wash),
    linear-gradient(var(--bg), var(--bg));
  background-attachment: fixed;
}

html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland)::before,
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland)::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland)::before {
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.42) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 78% 32%, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 48% 62%, rgba(255, 255, 255, 0.3) 0 1px, transparent 1px 100%);
  background-size: 160px 160px, 220px 220px, 180px 180px;
  mix-blend-mode: screen;
  animation: vaporwave-static-shift 1.2s steps(2) infinite;
}

html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland)::after {
  bottom: -10vh;
  left: 50%;
  z-index: 0;
  width: 180vw;
  height: 34vh;
  transform: translateX(-50%) perspective(640px) rotateX(68deg);
  background: linear-gradient(90deg, #ff00ff 0%, #00ffff 35%, #ffff00 68%, #ff00ff 100%);
  opacity: 0.16;
  filter: blur(36px);
  -webkit-mask-image: linear-gradient(to top, black 56%, transparent 100%);
  mask-image: linear-gradient(to top, black 56%, transparent 100%);
  animation: vaporwave-road-flicker 4s ease-in-out infinite;
}

html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) .site-header,
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) .topbar,
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) button.secondary,
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) .button.secondary,
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) input[type="search"],
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) input[type="text"],
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) select,
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) .go-status,
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) .chess-status,
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) .go-captures,
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) .chess-rules,
html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland) .chess-log {
  background: linear-gradient(180deg, rgba(20, 0, 38, 0.96), rgba(0, 0, 0, 0.98));
  border-color: rgba(255, 0, 255, 0.58);
  color: #ffffff;
  box-shadow:
    5px 5px 0 rgba(255, 0, 255, 0.45),
    -3px -3px 0 rgba(0, 255, 255, 0.22);
}

html[data-theme="vaporwave"] .home-widget,
html[data-theme="vaporwave"] .home-launch-card,
html[data-site-theme="vaporwave"] .home-widget,
html[data-site-theme="vaporwave"] .home-launch-card {
  background: linear-gradient(180deg, rgba(20, 0, 38, 0.96), rgba(0, 0, 0, 0.98));
  border-color: rgba(255, 0, 255, 0.58);
  border-radius: 8px;
  box-shadow:
    5px 5px 0 rgba(255, 0, 255, 0.45),
    -3px -3px 0 rgba(0, 255, 255, 0.22);
  color: #ffffff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html[data-theme="vaporwave"] .home-widget-eyebrow,
html[data-theme="vaporwave"] .home-launch-desc,
html[data-theme="vaporwave"] .vod-category,
html[data-site-theme="vaporwave"] .home-widget-eyebrow,
html[data-site-theme="vaporwave"] .home-launch-desc,
html[data-site-theme="vaporwave"] .vod-category {
  color: #8ffcff;
}

html[data-theme="vaporwave"] .home-widget-title,
html[data-theme="vaporwave"] .home-launch-title,
html[data-theme="vaporwave"] .vod-title,
html[data-theme="vaporwave"] .home-hero-title,
html[data-theme="vaporwave"] .home-hero-subtitle,
html[data-site-theme="vaporwave"] .home-widget-title,
html[data-site-theme="vaporwave"] .home-launch-title,
html[data-site-theme="vaporwave"] .vod-title,
html[data-site-theme="vaporwave"] .home-hero-title,
html[data-site-theme="vaporwave"] .home-hero-subtitle {
  color: #ffffff;
  text-shadow:
    1px 0 0 rgba(255, 0, 255, 0.55),
    -1px 0 0 rgba(0, 255, 255, 0.55);
}

html[data-theme="vaporwave"] .home-launch-card:hover,
html[data-theme="vaporwave"] .home-launch-card:focus-visible,
html[data-site-theme="vaporwave"] .home-launch-card:hover,
html[data-site-theme="vaporwave"] .home-launch-card:focus-visible {
  background: linear-gradient(180deg, rgba(32, 0, 60, 0.98), rgba(0, 0, 0, 1));
  box-shadow:
    5px 5px 0 rgba(255, 0, 255, 0.52),
    -3px -3px 0 rgba(0, 255, 255, 0.28);
}

html[data-theme="vaporwave"] .home-widget--weather .home-weather-shell,
html[data-site-theme="vaporwave"] .home-widget--weather .home-weather-shell {
  background: linear-gradient(180deg, rgba(20, 0, 38, 0.98), rgba(0, 0, 0, 1));
  border-color: rgba(255, 0, 255, 0.52);
}

@keyframes vaporwave-static-shift {
  0% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(1px, -1px, 0); }
  66% { transform: translate3d(-1px, 1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes vaporwave-road-flicker {
  0%, 100% {
    opacity: 0.18;
    transform: translateX(-50%) perspective(640px) rotateX(68deg) scale(1);
  }
  50% {
    opacity: 0.3;
    transform: translateX(-50%) perspective(640px) rotateX(70deg) scale(1.04);
  }
}

html[data-site-theme="mango"] body:not(.theme-liquid-woodland) .site-header,
html[data-site-theme="mango"] body:not(.theme-liquid-woodland) .topbar,
html[data-site-theme="mango"] body:not(.theme-liquid-woodland) button.secondary,
html[data-site-theme="mango"] body:not(.theme-liquid-woodland) .button.secondary,
html[data-site-theme="mango"] body:not(.theme-liquid-woodland) input[type="search"],
html[data-site-theme="mango"] body:not(.theme-liquid-woodland) input[type="text"],
html[data-site-theme="mango"] body:not(.theme-liquid-woodland) select,
html[data-site-theme="mango"] body:not(.theme-liquid-woodland) .go-status,
html[data-site-theme="mango"] body:not(.theme-liquid-woodland) .chess-status,
html[data-site-theme="mango"] body:not(.theme-liquid-woodland) .go-captures,
html[data-site-theme="mango"] body:not(.theme-liquid-woodland) .chess-rules,
html[data-site-theme="mango"] body:not(.theme-liquid-woodland) .chess-log,
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) .site-header,
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) .topbar,
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) button.secondary,
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) .button.secondary,
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) input[type="search"],
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) input[type="text"],
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) select,
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) .go-status,
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) .chess-status,
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) .go-captures,
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) .chess-rules,
html[data-site-theme="topaz"] body:not(.theme-liquid-woodland) .chess-log {
  border-color: rgba(244, 169, 0, 0.6);
  box-shadow:
    0 12px 28px rgba(196, 133, 0, 0.12),
    inset 0 1px 0 rgba(255, 247, 173, 0.92),
    inset 0 -2px 0 rgba(244, 169, 0, 0.08);
}

html[data-theme="topaz"] .home-widget,
html[data-theme="topaz"] .home-launch-card,
html[data-site-theme="mango"] .home-widget,
html[data-site-theme="mango"] .home-launch-card,
html[data-site-theme="topaz"] .home-widget,
html[data-site-theme="topaz"] .home-launch-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 229, 0.9));
  border-color: rgba(244, 169, 0, 0.68);
  box-shadow:
    0 14px 30px rgba(196, 133, 0, 0.12),
    inset 2px 2px 0 rgba(255, 247, 173, 0.88),
    inset -2px -2px 0 rgba(244, 169, 0, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="topaz"] .home-launch-card:hover,
html[data-theme="topaz"] .home-launch-card:focus-visible,
html[data-site-theme="mango"] .home-launch-card:hover,
html[data-site-theme="mango"] .home-launch-card:focus-visible,
html[data-site-theme="topaz"] .home-launch-card:hover,
html[data-site-theme="topaz"] .home-launch-card:focus-visible {
  background: var(--surface-1);
  box-shadow: 0 15px 30px rgba(244, 169, 0, 0.22);
}

html[data-site-theme="diamond"] {
  --bg: #eafcff;
  --text: #12343b;
  --muted: #3d6970;
  --line: rgba(8, 121, 133, 0.22);
  --header-bg: rgba(247, 254, 255, 0.88);
  --header-border: rgba(8, 121, 133, 0.18);
  --nav-ink: #315e66;
  --nav-ink-strong: #082b32;
  --surface-1: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(238, 253, 255, 0.96);
  --theme-accent: #087985;
  --theme-accent-strong: #055c66;
  --theme-accent-soft: rgba(96, 232, 240, 0.26);
  --page-wash:
    radial-gradient(920px 520px at 50% -12%, rgba(96, 232, 240, 0.36), transparent 56%),
    radial-gradient(760px 420px at 0% 100%, rgba(196, 246, 250, 0.62), transparent 48%),
    radial-gradient(680px 360px at 100% 12%, rgba(96, 232, 240, 0.28), transparent 42%);
}

/* ── Stock Exchange tile (Systems & Society) ────────── */
.sx-exchange-tile {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(16, 185, 129, 0.35), transparent 50%),
    radial-gradient(ellipse at 85% 75%, rgba(245, 158, 11, 0.28), transparent 48%),
    linear-gradient(160deg, #061812 0%, #0d2a1e 100%);
  border: 1px solid rgba(16, 185, 129, 0.22);
}

.sx-exchange-tile .tile-kicker { color: #6ee7b7; }
.sx-exchange-tile strong { color: #ffffff; }
.sx-exchange-tile small  { color: #a7f3d0; max-width: 32ch; }

.sx-exchange-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.4rem;
}

.sx-exchange-tile-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.55rem;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #6ee7b7;
}

/* ── Phase 4: Scroll reveal ───────────────────────────────────────
   Add class="reveal" to animate an element in as it enters view.
   Wrap siblings in class="reveal-group" for auto stagger.
   ──────────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity  0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Hero canvas background ───────────────────────────────────────
   canvas-bg.js inserts #hero-canvas as the first child of .hero.
   ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
}

.hero > *:not(#hero-canvas) {
  position: relative;
  z-index: 1;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

/* ── Settings panel: Background section ──────────────────────────
   Divider + canvas grid reuse existing nav-theme-chip styles.
   ──────────────────────────────────────────────────────────────── */
.nav-settings-divider {
  height: 1px;
  margin: 1rem 0 0.35rem;
  background: linear-gradient(90deg, transparent, var(--line, rgba(210,210,215,0.5)), transparent);
  opacity: 0.72;
}

.nav-canvas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.68rem;
}

.nav-canvas-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.94rem;
  height: 0.94rem;
  margin-top: 0.1rem;
  font-size: 0.82rem;
  line-height: 1;
  color: var(--theme-accent);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   3-COLUMN DRAG-AND-DROP LAYOUT
   ════════════════════════════════════════════════════════════════ */

.homepage-main {
  overflow-x: hidden;
}

/* Primary CTA Button */
.hero-cta {
  margin: 2rem auto 3rem;
  padding: 1rem;
  text-align: center;
  max-width: 600px;
}

/* Secondary Tools Grid */
.secondary-tools .section-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 2rem;
}

.secondary-tools h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.tile-grid--secondary-simplified {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

.homepage-grid {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 1.25rem;
  max-width: 1440px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 3rem;
  padding: 0 1rem;
  align-items: start;
}

/* ── Sidepanels ─────────────────────────────────────────────────── */

.sidepanel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 300px;
}

.sidepanel-left {
  min-width: 0;
}

.sidepanel-right {
  min-width: 0;
}

/* ── Sidepanel Components ───────────────────────────────────────── */

.sidepanel-component {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: hidden;
  background: var(--glass-fill-soft, rgba(255, 255, 255, 0.34));
  border: 1px solid rgba(15, 46, 90, 0.22);
  box-shadow:
    0 8px 28px rgba(35, 68, 121, 0.13),
    0 2px 6px rgba(35, 68, 121, 0.07);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: grab;
}

.sidepanel-component:hover {
  cursor: grab;
  background: var(--glass-fill, rgba(255, 255, 255, 0.55));
  box-shadow: var(--glass-shadow-soft);
  transform: translateY(-1px);
}

.sidepanel-component:active {
  cursor: grabbing;
}

/* Drag states */
.sidepanel-component.dragging {
  opacity: 0.6;
  border: 2px dashed rgba(0, 113, 227, 0.5);
  background: rgba(0, 113, 227, 0.05);
}

.sidepanel.drag-over {
  border: 2px solid rgba(0, 113, 227, 0.3);
  border-radius: 8px;
  background: rgba(0, 113, 227, 0.02);
  transition: all 0.15s ease;
}

/* ── Center Column ──────────────────────────────────────────────── */

.homepage-center {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
  container-type: inline-size;
}

/* ── Responsive Design ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .homepage-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sidepanel-left,
  .sidepanel-right {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .homepage-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 0.75rem;
  }

  .sidepanel {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1rem;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
  }

  .sidepanel-component {
    flex-shrink: 0;
    width: 280px;
    scroll-snap-align: start;
  }

  .sidepanel-left,
  .sidepanel-right {
    display: flex;
    flex-direction: row;
    grid-template-columns: unset;
  }
}

@media (max-width: 640px) {
  .homepage-grid {
    padding: 0 0.5rem;
  }

  .sidepanel-component {
    width: 100%;
    flex-shrink: 1;
  }

  .sidepanel {
    flex-direction: column;
    overflow: visible;
    gap: 1rem;
  }
}

/* ── VOTD Card Styling ──────────────────────────────────────────── */

.sidepanel-component .votd-card {
  padding: 1rem;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
}

.votd-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #999);
  margin: 0 0 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidepanel-component .votd-verse {
  font-size: 0.9rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--text, #111);
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidepanel-component .votd-ref {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--theme-accent, #0071e3);
  margin: 0 0 0.75rem;
}

.sidepanel-component .votd-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidepanel-component .votd-btn {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 113, 227, 0.08);
  color: #0071e3;
  transition: all 0.15s ease;
  cursor: pointer;
  text-align: center;
}

.sidepanel-component .votd-btn:hover {
  background: rgba(0, 113, 227, 0.15);
  border-color: rgba(0, 113, 227, 0.2);
}

/* ── Weather Widget Styling ────────────────────────────────────── */

.sidepanel-component .home-weather-card {
  padding: 1rem;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 0;
  min-height: unset;
}

.home-weather-city {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #999);
  margin: 0 0 0.5rem;
}

.home-weather-condition {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #111);
  margin: 0 0 0.5rem;
}

.home-weather-icon {
  width: 40px;
  height: 40px;
  margin: 0.5rem 0;
}

.home-weather-temp {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text, #111);
  margin: 0.5rem 0;
}

.home-weather-minmax {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
}

.home-weather-min,
.home-weather-max {
  flex: 1;
  text-align: center;
}

.home-weather-label {
  font-weight: 600;
  color: var(--muted, #999);
  margin: 0 0 0.25rem;
}

.home-weather-value {
  font-weight: 700;
  color: var(--text, #111);
  margin: 0;
}

/* ── VOD Card in Sidepanel ──────────────────────────────────────── */

.sidepanel-component .home-vod-card {
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
}

.sidepanel-component .vod-inner,
body.theme-liquid-woodland.theme-home .sidepanel-component .vod-inner {
  grid-template-columns: 1fr;
  padding: 0;
  gap: 0;
  align-items: stretch;
}

.sidepanel-component .vod-thumb-wrap {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sidepanel-component .vod-copy {
  padding: 0.75rem;
}

.sidepanel-component .vod-copy .vod-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.65rem;
}

.sidepanel-component .vod-copy .vod-category {
  font-size: 0.7rem;
  margin: 0;
}

.sidepanel-component .vod-copy .vod-title {
  font-size: 0.9rem;
  margin: 0.25rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidepanel-component .vod-copy .vod-desc {
  display: none; /* Hide description in sidepanel */
}

.sidepanel-component .vod-link {
  font-size: 0.7rem;
}

/* ════════════════════════════════════════════════════════════════ */

/* Weekly Schedule Enhanced Styling */
.card--weekly {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  background: var(--glass-fill-soft, rgba(255, 255, 255, 0.34));
  border: 1px solid var(--glass-stroke, rgba(15, 46, 90, 0.12));
  border-radius: 16px;
}

.card--weekly .weekly-header {
  margin-bottom: 2rem;
}

.card--weekly h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.card--weekly .weekly-focus {
  color: #06b6d4;
  font-size: 0.95rem;
  font-weight: 600;
}

.card--weekly .weekly-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
  align-items: stretch;
  gap: clamp(0.55rem, 1vw, 0.85rem);
}

.card--weekly .weekly-day-card {
  min-height: 150px;
  box-sizing: border-box;
  justify-content: flex-start;
  padding: clamp(0.85rem, 1.4vw, 1.15rem) clamp(0.65rem, 1vw, 0.95rem);
}

.card--weekly .weekly-day-card.is-current-day {
  transform: none;
}

.card--weekly .weekly-day-card h4,
.card--weekly .weekly-day-label,
.card--weekly .weekly-day-what {
  overflow-wrap: anywhere;
}

.card--weekly .weekly-day-what {
  max-width: 18ch;
}

@media (max-width: 430px) {
  .card--weekly .weekly-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive adjustments for primary button */
@media (max-width: 768px) {
  .hero-cta {
    margin: 1.5rem auto 2rem;
  }

  .tile-grid--secondary-simplified {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* ─── Home Widget Grid ───────────────────────────────────────────────────── */

.home-widgets {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 1280px;
  margin: 1.5rem auto 3rem;
  padding: 0 1.5rem;
}

.home-widget {
  background: var(--glass-fill-soft, rgba(255, 255, 255, 0.34));
  border: 1px solid var(--glass-stroke, rgba(15, 46, 90, 0.12));
  border-radius: 16px;
  box-shadow: var(--glass-shadow-soft, 0 4px 16px rgba(35, 68, 121, 0.08));
  padding: 1.25rem;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  grid-column: span 4;
}

.home-widget--votd {
  grid-column: span 7;
}

.home-widget--weather {
  grid-column: span 5;
}

.home-widget--schedule {
  grid-column: 1 / -1;
}

.home-widget-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #6b7fa3);
  margin: 0 0 0.25rem;
}

.home-widget-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-main, #17233a);
}

.home-widget-schedule-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

/* Weather widget internals */
.home-widget--weather {
  --weather-cyan: #00d9f5;
  --weather-pink: #ff61d8;
  --weather-panel-bg: linear-gradient(180deg, rgba(7, 15, 28, 0.96), rgba(13, 25, 43, 0.92));
  --weather-panel-border: rgba(143, 212, 255, 0.22);
  --weather-text-strong: #f7fbff;
  --weather-text-soft: rgba(205, 220, 245, 0.92);
  --weather-text-dim: rgba(165, 182, 210, 1);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  width: 100%;
  min-width: 0;
  container-type: inline-size;
}

.home-widget--weather .home-weather-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 3cqw, 1rem);
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(0.9rem, 4cqw, 1.25rem);
  border-radius: 0;
  background: var(--weather-panel-bg);
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.home-widget--weather .home-weather-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(143, 212, 255, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%);
}

.home-widget--weather .weather-header,
.home-widget--weather .home-weather-condition,
.home-widget--weather .home-weather-range,
.home-widget--weather .home-weather-station,
.home-widget--weather .home-weather-status,
.home-widget--weather .stat-label,
.home-widget--weather .forecast-day {
  font-family: var(--font-mono);
}

.home-widget--weather .weather-header,
.home-widget--weather .home-weather-dashboard,
.home-widget--weather .weather-forecast {
  position: relative;
  z-index: 1;
}

.home-widget--weather .weather-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(0, 217, 245, 0.22);
  font-size: clamp(0.68rem, 2.7cqw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--weather-cyan);
  text-transform: uppercase;
}

.home-widget--weather .home-weather-station {
  color: var(--weather-text-strong);
}

.home-widget--weather .home-weather-station-wrap,
.home-widget--weather .home-weather-city {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-widget--weather .home-weather-station-wrap {
  flex: 1 1 auto;
}

.home-widget--weather .home-weather-city {
  flex: 0 1 auto;
  max-width: 48%;
  font-size: clamp(0.7rem, 2.8cqw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--weather-cyan);
  text-transform: uppercase;
}

.home-widget--weather .home-weather-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1rem;
  align-items: center;
}

.home-widget--weather .weather-primary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.home-widget--weather .home-weather-condition {
  font-size: clamp(0.72rem, 2.7cqw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--weather-cyan);
  margin: 0.55rem 0 0;
}

.home-widget--weather .home-weather-temp {
  font-size: clamp(2.5rem, 18cqw, 3.6rem);
  font-weight: 900;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, #ffffff 0%, #9ef6ff 38%, var(--weather-cyan) 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(0, 217, 245, 0.24));
}

.home-widget--weather .home-weather-status {
  margin: 0.25rem 0 0;
  font-size: clamp(0.68rem, 2.6cqw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--weather-text-soft);
}

.home-widget--weather .home-weather-range {
  margin: 0.65rem 0 0;
  font-size: clamp(0.72rem, 2.8cqw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--weather-text-dim);
}

.home-widget--weather .weather-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
  gap: 0.5rem;
  min-width: 0;
}

.home-widget--weather .telemetry-stat {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
  min-height: 58px;
  justify-content: center;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  border-left: 2px solid var(--weather-cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.home-widget--weather .telemetry-stat--alert {
  border-left-color: var(--weather-pink);
}

.home-widget--weather .telemetry-stat--alert .stat-value {
  color: var(--weather-pink);
}

.home-widget--weather .stat-label {
  font-size: clamp(0.62rem, 2.6cqw, 0.68rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--weather-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-widget--weather .stat-value {
  font-size: clamp(0.78rem, 3cqw, 0.85rem);
  font-weight: 700;
  color: var(--weather-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-widget--weather .weather-forecast {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.home-widget--weather .forecast-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  text-align: center;
  min-width: 0;
  min-height: 72px;
  padding: 0.42rem 0.28rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.home-widget--weather .forecast-day {
  font-size: clamp(0.62rem, 2.5cqw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--weather-text-soft);
  text-transform: uppercase;
}

.home-widget--weather .forecast-icon {
  font-size: clamp(1.1rem, 5cqw, 1.4rem);
  line-height: 1;
}

.home-widget--weather .forecast-temp {
  font-size: clamp(0.82rem, 3.4cqw, 0.98rem);
  font-weight: 700;
  color: var(--weather-text-strong);
}

@container (max-width: 420px) {
  .home-widget--weather .home-weather-dashboard {
    grid-template-columns: 1fr;
  }

  .home-widget--weather .weather-primary {
    padding-right: 0;
    padding-bottom: 1rem;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
}

@container (max-width: 380px) {
  .home-widget--weather .weather-telemetry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 310px) {
  .home-widget--weather .weather-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-widget--weather .home-weather-city {
    max-width: 100%;
  }

  .home-widget--weather .weather-telemetry-grid,
  .home-widget--weather .weather-forecast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-widget--weather .forecast-slot {
    min-height: 68px;
  }
}

/* VOD widget internals */
.home-widget--vod {
  grid-column: 1 / -1;
  --vod-bg: linear-gradient(180deg, rgba(12, 19, 32, 0.92), rgba(20, 32, 52, 0.86));
  --vod-border: rgba(255, 255, 255, 0.1);
  --vod-title: #f8fbff;
  --vod-muted: rgba(205, 216, 234, 0.78);
  --vod-badge-bg: rgba(255, 255, 255, 0.08);
  --vod-badge-border: rgba(255, 255, 255, 0.1);
  --vod-link: #ffffff;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 1.6rem;
  border-radius: 18px;
  background: var(--vod-bg);
  border: 1px solid var(--vod-border);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 38px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
}

/* VOD in sidepanel: collapse to single-column, stacked layout */
.sidepanel-component .home-widget--vod {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.sidepanel-component .home-widget--vod .vod-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  box-shadow: none;
}

.sidepanel-component .home-widget--vod .vod-content {
  padding: 1rem 1.1rem 1.15rem;
  gap: 0.55rem;
}

.sidepanel-component .home-widget--vod .vod-title {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  -webkit-line-clamp: 2;
  font-weight: 700;
}

.sidepanel-component .home-widget--vod .vod-desc {
  font-size: 0.82rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidepanel-component .home-widget--vod .vod-link {
  font-size: 0.72rem;
  margin-top: 0.25rem;
}

.home-widget--vod .vod-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

.home-widget--vod .vod-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1);
}

.home-widget--vod .vod-thumb-wrap:hover .vod-thumb {
  transform: scale(1.04);
}

.home-widget--vod .vod-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
}

.home-widget--vod .home-widget-eyebrow {
  margin: 0;
  color: rgba(173, 189, 214, 0.82);
  letter-spacing: 0.09em;
}

.home-widget--vod .vod-category {
  margin: 0;
}

.home-widget--vod .vod-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  background: var(--vod-badge-bg);
  border: 1px solid var(--vod-badge-border);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vod-muted);
}

.home-widget--vod .vod-title {
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--vod-title);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-widget--vod .vod-desc {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--vod-muted);
}

.home-widget--vod .vod-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--vod-link);
  text-decoration: none;
  opacity: 0.84;
  transition: opacity 0.18s ease, gap 0.18s ease;
}

.home-widget--vod .vod-link:hover {
  text-decoration: underline;
  opacity: 1;
  gap: 0.55rem;
}

@media (max-width: 1024px) {
  .home-widget--vod {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    padding: 1.35rem;
  }
}

@media (max-width: 700px) {
  .home-widgets {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .home-widget         { grid-column: span 3; }
  .home-widget--votd   { grid-column: span 6; }
  .home-widget--weather { grid-column: span 3; }
  .home-widget--vod,
  .home-widget--schedule { grid-column: span 6; }
}

@media (max-width: 480px) {
  .home-widgets { grid-template-columns: 1fr; }
  .home-widget,
  .home-widget--votd,
  .home-widget--weather,
  .home-widget--vod,
  .home-widget--schedule { grid-column: span 1; }
}

/* ─── Home Launchpad ─────────────────────────────────────────────────────── */

.home-launchpad {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  text-align: center;
}

.home-hero-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.home-hero-left,
.home-hero-right {
  flex: 1;
}

.home-hero-left {
  text-align: right;
}

.home-hero-right {
  text-align: left;
}

.home-hero-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.home-hero-subtitle {
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-secondary, #4a6080);
}

@media (max-width: 600px) {
  .home-hero-row {
    flex-direction: column;
    gap: 0;
  }
  .home-hero-left { text-align: center; }
  .home-hero-right { text-align: center; }
  .home-hero-banner { order: -1; }
}

.home-launchpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-launch-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.75rem 1rem;
  border-radius: 20px;
  background: var(--glass-fill-soft, rgba(255, 255, 255, 0.34));
  border: 1px solid var(--glass-stroke, rgba(15, 46, 90, 0.12));
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: center;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.home-launch-card:hover,
.home-launch-card:focus-visible {
  transform: translateY(-3px);
  background: var(--glass-fill, rgba(255, 255, 255, 0.55));
  box-shadow: 0 12px 28px rgba(35, 68, 121, 0.16), 0 4px 8px rgba(35, 68, 121, 0.08);
  outline: none;
}

.home-launch-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.6);
}

.home-launch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}

.home-launch-title {
  font-size: 1rem;
  font-weight: 700;
  display: block;
}

.home-launch-desc {
  font-size: 0.8rem;
  opacity: 0.65;
  display: block;
  line-height: 1.4;
}

/* Card accent colours */
.home-launch-card--lessons  { border-color: rgba(99, 179, 237, 0.3); }
.home-launch-card--apps     { border-color: rgba(251, 191, 36, 0.3); }
.home-launch-card--downloads{ border-color: rgba(110, 231, 183, 0.3); }
.home-launch-card--showcase { border-color: rgba(196, 181, 253, 0.3); }
.home-launch-card--library  { border-color: rgba(252, 165, 165, 0.3); }
.home-launch-card--settings { border-color: rgba(209, 213, 219, 0.3); }

/* Icon badge backgrounds */
.home-launch-card--lessons  .card-emoji { background: rgba(99, 179, 237, 0.18); }
.home-launch-card--apps     .card-emoji { background: rgba(251, 191, 36, 0.18); }
.home-launch-card--downloads .card-emoji { background: rgba(110, 231, 183, 0.18); }
.home-launch-card--showcase .card-emoji { background: rgba(196, 181, 253, 0.18); }
.home-launch-card--library  .card-emoji { background: rgba(252, 165, 165, 0.18); }
.home-launch-card--settings .card-emoji { background: rgba(209, 213, 219, 0.18); }

/* ── Holographic Launchpad System ────────────────────────────────────────── */

/* Glow color mapping per card */
.home-launch-card[data-card="lessons"]   { --lp-glow-color: hsla(271, 91%, 61%, 0.45); }
.home-launch-card[data-card="apps"]      { --lp-glow-color: hsla(176, 67%, 42%, 0.45); }
.home-launch-card[data-card="downloads"] { --lp-glow-color: hsla(217, 89%, 61%, 0.45); }
.home-launch-card[data-card="showcase"]  { --lp-glow-color: hsla(340, 100%, 71%, 0.45); }
.home-launch-card[data-card="library"]   { --lp-glow-color: hsla(27, 100%, 65%, 0.45); }
.home-launch-card[data-card="settings"]  { --lp-glow-color: hsla(215, 16%, 47%, 0.45); }

/* Holographic emoji with continuous float animation */
.card-emoji {
  display: inline-block;
  font-size: 4.5rem;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none !important;
  margin-bottom: 0 !important;
  will-change: transform, filter;
  animation: lp-float-ambient 4s ease-in-out infinite;
  filter: drop-shadow(0 0 10px var(--lp-glow-color));
  transition: filter var(--lp-transition-snappy);
  user-select: none;
}

.home-launch-card:hover .card-emoji {
  animation: lp-float-hover 2s ease-in-out infinite;
  filter:
    drop-shadow(0 0 15px var(--lp-glow-color))
    drop-shadow(0 0 35px var(--lp-glow-color));
}

/* Shimmer effect layer */
.card-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: lp-shimmer-ambient 8s linear infinite;
  border-radius: 16px;
  z-index: 1;
}

.home-launch-card:hover .card-shimmer {
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: lp-shimmer-active 1.2s ease-out forwards;
}

/* Ensure card is positioned relative for shimmer overlay */
.home-launch-card {
  position: relative;
}

html[data-theme="diamond"] .home-widget,
html[data-theme="diamond"] .home-launch-card {
  background:
    radial-gradient(circle at top right, rgba(96, 232, 240, 0.24), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 253, 255, 0.96));
  border-color: rgba(8, 121, 133, 0.18);
  box-shadow:
    0 18px 38px rgba(8, 121, 133, 0.14),
    0 0 18px rgba(96, 232, 240, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
}

html[data-theme="diamond"] .home-widget-eyebrow,
html[data-theme="diamond"] .home-launch-desc,
html[data-theme="diamond"] .vod-category {
  color: #3d6970;
}

html[data-theme="diamond"] .home-widget-title,
html[data-theme="diamond"] .home-launch-title,
html[data-theme="diamond"] .vod-title,
html[data-theme="diamond"] .home-hero-title,
html[data-theme="diamond"] .home-hero-subtitle {
  color: #09292f;
}

html[data-theme="diamond"] .home-launch-card:hover,
html[data-theme="diamond"] .home-launch-card:focus-visible {
  transform: translateY(-3px);
  background:
    radial-gradient(circle at top right, rgba(96, 232, 240, 0.34), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(229, 251, 253, 0.98));
  box-shadow:
    0 24px 44px rgba(8, 121, 133, 0.18),
    0 0 26px rgba(96, 232, 240, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="diamond"] .home-launch-card:focus-visible {
  box-shadow:
    0 0 0 3px rgba(8, 121, 133, 0.44),
    0 24px 44px rgba(8, 121, 133, 0.18),
    0 0 26px rgba(96, 232, 240, 0.24);
}

html[data-theme="diamond"] .card-emoji {
  filter:
    drop-shadow(0 0 8px rgba(96, 232, 240, 0.34))
    drop-shadow(0 0 20px rgba(8, 121, 133, 0.14));
}

html[data-theme="diamond"] .home-launch-card:hover .card-emoji,
html[data-theme="diamond"] .home-launch-card:focus-visible .card-emoji {
  filter:
    drop-shadow(0 0 12px rgba(96, 232, 240, 0.42))
    drop-shadow(0 0 30px rgba(96, 232, 240, 0.24));
}

html[data-theme="diamond"] .home-widget--weather .home-weather-shell {
  background:
    radial-gradient(circle at top right, rgba(96, 232, 240, 0.28), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 253, 255, 0.96));
  border-color: rgba(8, 121, 133, 0.18);
}

/* Animation keyframes */
@keyframes lp-float-ambient {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes lp-float-hover {
  0%, 100% { transform: translateY(-8px) scale(1.1); }
  50% { transform: translateY(-15px) scale(1.15) rotate(3deg); }
}

@keyframes lp-shimmer-ambient {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes lp-shimmer-active {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

/* Low Power Mode: Disable animations and heavy effects */
@media (prefers-reduced-motion: reduce) {
  .card-emoji,
  .card-shimmer {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland)::before,
  html[data-site-theme="vaporwave"] body:not(.theme-liquid-woodland)::after {
    animation: none !important;
  }
}

.is-low-power .card-emoji,
.is-low-power .card-shimmer {
  animation: none !important;
  transition: opacity 0.2s ease !important;
  transform: none !important;
}

/* Responsive */
@media (max-width: 640px) {
  .home-launchpad-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .home-launchpad-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Rocket Launch Animation ─────────────────────────────────────────────── */

@keyframes rocket-shoot {
  0% { transform: translate(0, 0) scale(1); }
  15% { transform: translate(-15px, 15px) scale(0.9); }
  100% { transform: translate(120vw, -120vh) scale(2.5); }
}

.rocket-launching {
  animation: rocket-shoot 1.2s cubic-bezier(0.5, 0, 0.2, 1) forwards !important;
  z-index: 9999;
  pointer-events: none;
}

.rocket-particle {
  position: fixed;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff9500;
  pointer-events: none;
  z-index: 9998;
  will-change: transform, opacity;
  animation: particle-fade 0.6s ease-out forwards;
  mix-blend-mode: screen;
}

@keyframes particle-fade {
  0% {
    transform: scale(1);
    opacity: 1;
    background: #ffcc00;
    box-shadow: 0 0 10px #ffcc00;
  }
  50% {
    background: #ff3b30;
    box-shadow: 0 0 20px #ff3b30;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0);
    opacity: 0;
  }
}

/* =========================================================
   BELOW-FOLD PANEL UNIFICATION
   Problem: VOTD (warm cream), Schedule (light white), and
   Weather (near-opaque dark navy) are three completely
   different visual languages in adjacent columns.
   Fix: shared container borders, rounded inner shells,
   softened weather opacity, section divider above grid.
   ========================================================= */

/* Section divider above the grid */
.homepage-grid {
  position: relative;
  padding-top: 2.5rem;
}

.homepage-grid::before {
  content: "DAILY CONTEXT";
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted, #8a8a91);
  white-space: nowrap;
}

/* Shared container: consistent border depth */
.sidepanel-component {
  border-color: var(--border-default, rgba(210, 210, 215, 0.75));
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.07),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

/* VOTD: round the inner parchment so it fits its rounded wrapper */
.home-widget--votd .votd-immersion-container {
  border-radius: 12px;
}

/* Weather: soften opacity and give the inner shell its own radius
   so it reads as glass-dark, not a void */
.home-widget--weather .home-weather-shell {
  background: linear-gradient(
    160deg,
    rgba(8, 18, 32, 0.82) 0%,
    rgba(14, 26, 46, 0.76) 100%
  );
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(143, 212, 255, 0.12);
}

/* Night mode: keep weather readable at reduced opacity */
html[data-lighting="night"] .home-widget--weather .home-weather-shell {
  background: linear-gradient(
    160deg,
    rgba(4, 10, 20, 0.88) 0%,
    rgba(10, 18, 34, 0.84) 100%
  );
}

/* =========================================================
   ClassroomOS Home Remaster — Launch Console
   ========================================================= */

.cos-home {
  --cos-home-w: 1180px;
  --cos-card-radius: 18px;
  --cos-card-border: color-mix(in srgb, var(--border-default, #d2d2d7) 76%, transparent);
  --cos-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5)),
    var(--surface-panel, rgba(255, 255, 255, 0.92));
  --cos-card-shadow:
    0 18px 44px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.66);
  color: var(--text-primary, var(--text));
  padding-bottom: 3rem;
}

.cos-home .home-launchpad,
.cos-home .today-panel,
.cos-home .launch-grid-section,
.cos-home .media-spotlight-grid {
  width: min(var(--cos-home-w), calc(100% - 2rem));
  margin-inline: auto;
}

.cos-home .home-launchpad {
  max-width: none;
  padding: clamp(2rem, 5vw, 4.25rem) 0 1.6rem;
  text-align: left;
}

.cos-home .home-launchpad::before {
  content: "";
  position: absolute;
  inset: 1rem 0 auto;
  height: min(36vw, 360px);
  background:
    linear-gradient(rgba(20, 58, 92, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 58, 92, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  opacity: 0.55;
  pointer-events: none;
}

.cos-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
}

.cos-hero-copy,
.mission-card,
.cos-home .home-widget,
.cos-home .home-launch-card {
  border-radius: var(--cos-card-radius);
  border: 1px solid var(--cos-card-border);
  background: var(--cos-card-bg);
  box-shadow: var(--cos-card-shadow);
}

.cos-hero-copy {
  min-height: clamp(420px, 52vw, 570px);
  padding: clamp(1.25rem, 4vw, 2.35rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}

.cos-hero-copy::after {
  content: "";
  position: absolute;
  inset: auto -6% -22% 32%;
  height: 55%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.5), transparent 28%),
    radial-gradient(circle at 52% 58%, color-mix(in srgb, var(--theme-accent, #0071e3) 26%, transparent), transparent 46%);
  opacity: 0.65;
  pointer-events: none;
}

.cos-home .eyebrow {
  margin: 0 0 0.7rem;
  color: var(--text-muted, var(--muted));
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cos-home .home-hero-title {
  margin: 0;
  max-width: 100%;
  font-size: clamp(2.35rem, 6vw, 5rem);
  line-height: 0.92;
  letter-spacing: 0;
  color: var(--text-primary, var(--text));
}

.cos-home .home-hero-subtitle {
  margin: 0.95rem 0 0;
  color: var(--text-secondary, var(--muted));
  font-size: clamp(1.35rem, 3vw, 2.3rem);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: 0;
}

.class-mode-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.25rem 0 auto;
  max-width: 46rem;
}

.class-mode-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid color-mix(in srgb, var(--theme-accent, #0071e3) 22%, rgba(255, 255, 255, 0.74));
  color: var(--text-secondary, var(--muted));
  font-size: 0.78rem;
  font-weight: 750;
}

.cos-home .home-start-class {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  min-height: 118px;
  margin-top: 2rem;
  padding: 1.05rem 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-items: start;
  gap: 1rem;
  color: #fff;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.34), transparent 30%),
    linear-gradient(135deg, #11324a, #0d6b7f 54%, #159957);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 22px 50px rgba(13, 107, 127, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  text-align: left;
}

.cos-home .home-start-class:hover,
.cos-home .home-start-class:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 28px 62px rgba(13, 107, 127, 0.34),
    0 0 0 4px color-mix(in srgb, var(--theme-accent, #0071e3) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cos-home .home-start-class .card-emoji {
  font-size: clamp(3rem, 7vw, 4.8rem);
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.28));
}

.cos-home .home-start-class .home-launch-title {
  color: #fff;
  font-size: clamp(1.55rem, 4vw, 2.35rem);
  line-height: 1;
}

.cos-home .home-start-class .home-launch-desc {
  color: rgba(255, 255, 255, 0.83);
  font-size: 0.92rem;
  opacity: 1;
}

.mission-card {
  padding: clamp(1.1rem, 3vw, 1.55rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mission-card .home-widget-title {
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.mission-date {
  margin: 0;
  color: var(--theme-accent-strong, var(--accent));
  font-weight: 800;
}

.mission-list {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.mission-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-secondary, var(--muted));
  font-weight: 650;
}

.mission-list span {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--theme-accent-soft, rgba(0, 113, 227, 0.12));
  color: var(--theme-accent-strong, var(--accent));
  font-size: 0.74rem;
  font-weight: 850;
}

.command-anchor {
  margin-top: auto;
  width: 100%;
  min-height: 3.65rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.72rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--cos-card-border);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-secondary, var(--muted));
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.command-anchor:hover,
.command-anchor:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--theme-accent, #0071e3) 42%, white);
  background: rgba(255, 255, 255, 0.78);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, #0071e3) 18%, transparent);
}

.command-anchor kbd {
  padding: 0.18rem 0.48rem;
  border-radius: 8px;
  border: 1px solid var(--cos-card-border);
  background: rgba(255, 255, 255, 0.76);
  color: var(--text-muted, var(--muted));
  font: 700 0.75rem var(--font-sans);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin: 0 0 0.85rem;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2.05rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.today-panel,
.launch-grid-section,
.media-spotlight-grid {
  padding-top: 1.6rem;
}

.today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.82fr);
  gap: 1rem;
  align-items: stretch;
}

.today-grid .home-widget--schedule {
  grid-column: 1 / -1;
}

.cos-hero-grid > .home-widget,
.today-grid > .home-widget,
.media-spotlight-grid > .home-widget {
  grid-column: auto;
}

.today-grid > .home-widget--schedule {
  grid-column: 1 / -1;
}

.cos-home .home-widget {
  padding: clamp(1rem, 2vw, 1.25rem);
}

.cos-home .home-widget-title {
  color: var(--text-primary, var(--text));
}

.cos-home .home-widget-eyebrow {
  color: var(--text-muted, var(--muted));
  letter-spacing: 0.12em;
}

.cos-home .card--weekly {
  border-radius: var(--cos-card-radius);
  background: var(--cos-card-bg);
}

.cos-home .weekly-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cos-home .weekly-day-card {
  min-height: 132px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.48);
}

.cos-home .weekly-day-card.is-current-day {
  border-color: color-mix(in srgb, var(--theme-accent, #0071e3) 52%, white);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-accent-soft, rgba(0, 113, 227, 0.12)) 64%, white), rgba(255, 255, 255, 0.7));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #0071e3) 16%, transparent);
}

.cos-home .home-widget--weather,
.cos-home .home-widget--votd,
.cos-home .home-widget--vod {
  border: 1px solid var(--cos-card-border);
  box-shadow: var(--cos-card-shadow);
  background: var(--cos-card-bg);
  border-radius: var(--cos-card-radius);
}

.cos-home .home-widget--weather {
  padding: 0;
  overflow: hidden;
}

.cos-home .home-widget--weather .home-weather-shell {
  border-radius: var(--cos-card-radius);
  min-height: 100%;
}

.cos-home .home-widget--votd {
  padding: clamp(0.7rem, 1.4vw, 0.9rem);
  overflow: hidden;
}

.cos-home .home-widget--votd .bible-page {
  border-radius: 14px;
  min-height: 100%;
  box-shadow: none;
}

.tile-grid--secondary-simplified {
  max-width: none;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cos-home .tile-grid--secondary-simplified .home-launch-card {
  min-height: 210px;
  align-items: flex-start;
  text-align: left;
  padding: 1.25rem;
}

.cos-home .tile-grid--secondary-simplified .card-emoji {
  font-size: 2.7rem;
}

.cos-home .tile-grid--secondary-simplified .home-launch-title {
  font-size: 1.18rem;
}

.cos-home .tile-grid--secondary-simplified .home-launch-desc {
  color: var(--text-secondary, var(--muted));
  opacity: 1;
}

.media-spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: 1rem;
  align-items: stretch;
}

.cos-home .home-widget--vod {
  grid-column: auto;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
}

.student-spotlight {
  justify-content: space-between;
}

.student-spotlight p:not(.home-widget-eyebrow) {
  color: var(--text-secondary, var(--muted));
  line-height: 1.58;
}

.spotlight-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin: 0.4rem 0;
}

.spotlight-preview span {
  min-height: 76px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.28)),
    color-mix(in srgb, var(--theme-accent-soft, rgba(0, 113, 227, 0.12)) 72%, transparent);
  border: 1px solid var(--cos-card-border);
  color: var(--text-secondary, var(--muted));
  font-weight: 800;
}

.spotlight-link {
  display: inline-flex;
  width: fit-content;
  color: var(--theme-accent-strong, var(--accent));
  font-weight: 800;
  text-decoration: none;
}

.spotlight-link:hover {
  text-decoration: underline;
}

.cos-home :is(a, button, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-accent, #0071e3) 58%, white);
  outline-offset: 3px;
}

html[data-lighting="night"] .cos-home {
  --cos-card-bg:
    linear-gradient(180deg, rgba(38, 40, 46, 0.82), rgba(25, 27, 32, 0.78)),
    var(--surface-panel, rgba(33, 34, 38, 0.94));
  --cos-card-shadow:
    0 18px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-lighting="night"] .class-mode-badges span,
html[data-lighting="night"] .command-anchor,
html[data-lighting="night"] .command-anchor kbd,
html[data-lighting="night"] .cos-home .weekly-day-card {
  background: rgba(255, 255, 255, 0.08);
}

body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .home-widget--schedule {
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 232, 240, 0.28), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 253, 255, 0.96));
  border-color: rgba(8, 121, 133, 0.2);
  box-shadow:
    0 18px 36px rgba(8, 121, 133, 0.14),
    0 0 18px rgba(96, 232, 240, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .weekly-day-card,
body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .weekly-day-card--off {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(238, 253, 255, 0.74));
  border-color: rgba(8, 121, 133, 0.18);
  color: #12343b;
}

body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .weekly-day-card h4,
body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .weekly-day-label {
  color: #09292f;
}

body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .weekly-day-what,
body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .weekly-day-card--off .weekly-day-label,
body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .weekly-day-card--off .weekly-day-what {
  color: #315e66;
}

body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .weekly-focus {
  background: rgba(238, 253, 255, 0.78);
  border-color: rgba(8, 121, 133, 0.16);
  color: #315e66;
}

body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .home-widget--weather .home-weather-shell {
  background:
    radial-gradient(circle at top right, rgba(96, 232, 240, 0.24), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(238, 253, 255, 0.96));
  color: #12343b;
}

body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .home-widget--weather :is(.home-weather-condition, .home-weather-range, .home-weather-station, .home-weather-status, .stat-label, .forecast-day) {
  color: #315e66;
}

body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .home-widget--weather :is(.weather-header, .home-weather-dashboard, .weather-forecast),
body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .home-widget--weather .telemetry-stat {
  background: rgba(255, 255, 255, 0.48);
  border-color: rgba(8, 121, 133, 0.14);
}

body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .home-widget--votd .votd-immersion-container {
  background:
    radial-gradient(circle at top right, rgba(96, 232, 240, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(8, 121, 133, 0.12);
  border-radius: 14px;
  padding: clamp(0.45rem, 1vw, 0.6rem);
  box-shadow: none;
}

body.theme-liquid-woodland.theme-home[data-theme="diamond"] .cos-home .home-widget--votd .bible-page {
  background: rgba(255, 252, 244, 0.94);
  border-color: rgba(8, 121, 133, 0.12);
}

@media (max-width: 1100px) {
  .tile-grid--secondary-simplified {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-spotlight-grid,
  .today-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .cos-home .home-launchpad,
  .cos-home .today-panel,
  .cos-home .launch-grid-section,
  .cos-home .media-spotlight-grid {
    width: min(100% - 1rem, var(--cos-home-w));
  }

  .cos-hero-grid {
    grid-template-columns: 1fr;
  }

  .cos-hero-copy {
    min-height: auto;
  }

  .cos-home .weekly-grid {
    grid-template-columns: 1fr;
  }

  .cos-home .home-widget--vod {
    grid-template-columns: 1fr;
  }

  .today-grid > .home-widget--schedule {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .nav-wrap {
    width: min(100% - 1rem, 1180px);
  }

  .brand {
    max-width: calc(100vw - 5rem);
  }

  .tile-grid--secondary-simplified,
  .spotlight-preview {
    grid-template-columns: 1fr;
  }

  .cos-home .home-start-class {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .cos-home .home-hero-title {
    font-size: clamp(1.85rem, 8.6vw, 2.6rem);
  }

  .command-anchor {
    grid-template-columns: auto 1fr;
  }

  .command-anchor kbd {
    display: none;
  }
}

/* ClassroomOS universal typography guard.
   Keep this late so page-specific display stacks do not mask the system font. */
body {
  font-family: var(--font-sans) !important;
}

body :where(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, legend, summary, details, li, dt, dd, th, td, caption, small, strong, em, b, i, span, div) {
  font-family: var(--font-sans) !important;
}

body :where(code, pre, samp, kbd, code *, pre *, samp *, kbd *, .mono, .font-mono, [class*="mono"], [class*="code"], [class*="terminal"], [class*="console"]) {
  font-family: var(--font-mono) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LESSON TILE STYLES — replaces tile-fallback across all modules
   ═══════════════════════════════════════════════════════════════ */

/* ── Physics additions ──────────────────────────────────────── */

.physics-vdg-generator-tile,
.physics-wave-tile,
.physics-music-tile,
.physics-atoms-music-tile,
.physics-huygens-tile,
.physics-tem-tile,
.physics-thermo-tile,
.physics-entropy-tile,
.physics-feynman-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(170deg, rgba(26,8,0,0.05) 0%, rgba(26,8,0,0.88) 100%),
    radial-gradient(circle at 80% 20%, rgba(255,100,50,0.15), transparent 40%),
    #1a0800;
  border: 1px solid rgba(255,149,0,0.24); color: #fff;
}
.physics-vdg-generator-tile::before { content: 'kV'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 5rem; font-weight: 900; opacity: 0.05; pointer-events: none; }
.physics-wave-tile::before         { content: '∿'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 7rem; opacity: 0.05; pointer-events: none; }
.physics-music-tile::before        { content: '♪'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 6rem; opacity: 0.05; pointer-events: none; }
.physics-atoms-music-tile::before  { content: 'Hz'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 5rem; font-weight: 900; opacity: 0.05; pointer-events: none; }
.physics-huygens-tile::before      { content: '⊙'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 6.5rem; opacity: 0.05; pointer-events: none; }
.physics-tem-tile::before          { content: 'e⁻'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 5rem; font-weight: 900; opacity: 0.05; pointer-events: none; }
.physics-thermo-tile::before       { content: 'Q→W'; position: absolute; bottom: 10%; right: 8%; font-size: 2rem; font-weight: 900; opacity: 0.06; pointer-events: none; }
.physics-entropy-tile::before      { content: 'ΔS'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 6rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.physics-feynman-tile::before      { content: '⚛'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 6.5rem; opacity: 0.04; pointer-events: none; }

.physics-vdg-generator-tile > *, .physics-wave-tile > *, .physics-music-tile > *, .physics-atoms-music-tile > *, .physics-huygens-tile > *, .physics-tem-tile > *, .physics-thermo-tile > *, .physics-entropy-tile > *, .physics-feynman-tile > * { position: relative; z-index: 1; }
.physics-vdg-generator-tile .tile-kicker, .physics-wave-tile .tile-kicker, .physics-music-tile .tile-kicker, .physics-atoms-music-tile .tile-kicker, .physics-huygens-tile .tile-kicker, .physics-tem-tile .tile-kicker, .physics-thermo-tile .tile-kicker, .physics-entropy-tile .tile-kicker, .physics-feynman-tile .tile-kicker { color: rgba(255,200,100,0.85); font-weight: 700; }
.physics-vdg-generator-tile strong, .physics-wave-tile strong, .physics-music-tile strong, .physics-atoms-music-tile strong, .physics-huygens-tile strong, .physics-tem-tile strong, .physics-thermo-tile strong, .physics-entropy-tile strong, .physics-feynman-tile strong { color: #fff; }
.physics-vdg-generator-tile small, .physics-wave-tile small, .physics-music-tile small, .physics-atoms-music-tile small, .physics-huygens-tile small, .physics-tem-tile small, .physics-thermo-tile small, .physics-entropy-tile small, .physics-feynman-tile small { color: rgba(255,255,255,0.62); }
.physics-vdg-generator-tile:hover, .physics-wave-tile:hover, .physics-music-tile:hover, .physics-atoms-music-tile:hover, .physics-huygens-tile:hover, .physics-tem-tile:hover, .physics-thermo-tile:hover, .physics-entropy-tile:hover, .physics-feynman-tile:hover { border-color: rgba(255,149,0,0.6); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,149,0,0.22); }

/* Quantum Day — distinct purple/blue palette */
.physics-quantum-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(10,6,30,0.05) 0%, rgba(10,6,30,0.90) 100%),
    radial-gradient(circle at 72% 22%, rgba(120,80,255,0.28), transparent 44%),
    radial-gradient(circle at 20% 70%, rgba(40,120,255,0.18), transparent 36%),
    #0a061e;
  border: 1px solid rgba(120,80,255,0.28); color: #fff;
}
.physics-quantum-tile::before { content: 'ℏ'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 7.5rem; font-style: italic; opacity: 0.07; pointer-events: none; }
.physics-quantum-tile > * { position: relative; z-index: 1; }
.physics-quantum-tile .tile-kicker { color: rgba(180,160,255,0.9); font-weight: 700; }
.physics-quantum-tile strong { color: #fff; }
.physics-quantum-tile small { color: rgba(220,215,255,0.65); }
.physics-quantum-tile:hover { border-color: rgba(120,80,255,0.65); box-shadow: 0 12px 38px rgba(0,0,0,0.65), 0 0 0 1px rgba(120,80,255,0.24); }

/* DSP — shared between Physics and Engineering cross-listing */
.physics-dsp-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(0,16,40,0.05) 0%, rgba(0,16,40,0.90) 100%),
    radial-gradient(circle at 78% 24%, rgba(0,200,180,0.22), transparent 40%),
    radial-gradient(circle at 18% 72%, rgba(0,122,255,0.18), transparent 36%),
    #001028;
  border: 1px solid rgba(0,200,180,0.26); color: #fff;
}
.physics-dsp-tile::before { content: 'f(ω)'; position: absolute; bottom: 10%; right: 8%; font-size: 2.2rem; font-weight: 900; letter-spacing: -0.02em; color: rgba(0,220,200,0.14); pointer-events: none; }
.physics-dsp-tile > * { position: relative; z-index: 1; }
.physics-dsp-tile .tile-kicker { color: rgba(120,240,220,0.88); font-weight: 700; }
.physics-dsp-tile strong { color: #fff; }
.physics-dsp-tile small { color: rgba(200,240,235,0.65); }
.physics-dsp-tile:hover { border-color: rgba(0,200,180,0.6); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,200,180,0.2); }

/* ── Chemistry additions ────────────────────────────────────── */

.chem-titration-tile,
.chem-catalyst-tile,
.chem-steam-machines-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(3,18,10,0.05) 0%, rgba(3,18,10,0.90) 100%),
    radial-gradient(circle at 76% 20%, rgba(52,199,89,0.28), transparent 42%),
    radial-gradient(circle at 18% 74%, rgba(0,199,190,0.18), transparent 38%),
    #03120a;
  border: 1px solid rgba(52,199,89,0.28); color: #fff;
}
.chem-titration-tile::before    { content: 'pH'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 5.5rem; font-weight: 900; opacity: 0.05; pointer-events: none; }
.chem-catalyst-tile::before     { content: 'Ea'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 5.5rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.chem-steam-machines-tile::before { content: 'H₂O'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 4.5rem; font-weight: 900; opacity: 0.05; pointer-events: none; }

.chem-titration-tile > *, .chem-catalyst-tile > *, .chem-steam-machines-tile > * { position: relative; z-index: 1; }
.chem-titration-tile .tile-kicker, .chem-catalyst-tile .tile-kicker, .chem-steam-machines-tile .tile-kicker { color: rgba(120,240,160,0.88); font-weight: 700; }
.chem-titration-tile strong, .chem-catalyst-tile strong, .chem-steam-machines-tile strong { color: #fff; }
.chem-titration-tile small, .chem-catalyst-tile small, .chem-steam-machines-tile small { color: rgba(200,245,220,0.65); }
.chem-titration-tile:hover, .chem-catalyst-tile:hover, .chem-steam-machines-tile:hover { border-color: rgba(52,199,89,0.64); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(52,199,89,0.22); }

/* ── Life Sciences additions ────────────────────────────────── */

.life-amino-tile,
.life-kpg-tile,
.life-crispr-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(3,14,6,0.05) 0%, rgba(3,14,6,0.90) 100%),
    radial-gradient(circle at 74% 22%, rgba(80,220,140,0.30), transparent 42%),
    radial-gradient(circle at 20% 72%, rgba(160,230,60,0.18), transparent 36%),
    #030e06;
  border: 1px solid rgba(80,220,140,0.28); color: #fff;
}
.life-amino-tile::before  { content: 'NH₂'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 4.5rem; font-weight: 900; opacity: 0.05; pointer-events: none; }
.life-kpg-tile::before    { content: 'K-Pg'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 3.5rem; font-weight: 900; letter-spacing: -0.02em; opacity: 0.06; pointer-events: none; }
.life-crispr-tile::before { content: '✂'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 5.5rem; opacity: 0.05; pointer-events: none; }

.life-amino-tile > *, .life-kpg-tile > *, .life-crispr-tile > * { position: relative; z-index: 1; }
.life-amino-tile .tile-kicker, .life-kpg-tile .tile-kicker, .life-crispr-tile .tile-kicker { color: rgba(140,245,180,0.88); font-weight: 700; }
.life-amino-tile strong, .life-kpg-tile strong, .life-crispr-tile strong { color: #fff; }
.life-amino-tile small, .life-kpg-tile small, .life-crispr-tile small { color: rgba(200,248,225,0.65); }
.life-amino-tile:hover, .life-kpg-tile:hover, .life-crispr-tile:hover { border-color: rgba(80,220,140,0.64); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(80,220,140,0.22); }

/* ── Earth Science additions ────────────────────────────────── */

.earth-rocks-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(2,14,8,0.05) 0%, rgba(2,14,8,0.90) 100%),
    radial-gradient(circle at 70% 24%, rgba(20,140,60,0.34), transparent 42%),
    radial-gradient(circle at 20% 70%, rgba(140,100,40,0.22), transparent 38%),
    #020e08;
  border: 1px solid rgba(40,180,80,0.28); color: #fff;
}
.earth-rocks-tile::before { content: 'SiO₂'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 4rem; font-weight: 900; opacity: 0.05; pointer-events: none; }
.earth-rocks-tile > * { position: relative; z-index: 1; }
.earth-rocks-tile .tile-kicker { color: rgba(120,220,140,0.88); font-weight: 700; }
.earth-rocks-tile strong { color: #fff; }
.earth-rocks-tile small { color: rgba(200,240,215,0.65); }
.earth-rocks-tile:hover { border-color: rgba(40,180,80,0.64); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(40,180,80,0.22); }

/* ── Space / Cosmology additions ────────────────────────────── */

.space-constellations-tile,
.space-apollo-tile,
.space-asteroids-tile,
.space-expansion-tile,
.space-arecibo-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(5,5,16,0.05) 0%, rgba(5,5,16,0.92) 100%),
    radial-gradient(circle at 76% 22%, rgba(120,50,220,0.30), transparent 42%),
    radial-gradient(circle at 18% 70%, rgba(30,100,200,0.22), transparent 38%),
    #050510;
  border: 1px solid rgba(140,80,255,0.26); color: #fff;
}
.space-constellations-tile::before { content: '★'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 6rem; opacity: 0.05; pointer-events: none; }
.space-apollo-tile::before         { content: '⌖'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 6rem; opacity: 0.05; pointer-events: none; }
.space-asteroids-tile::before      { content: '○'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 7.5rem; opacity: 0.05; pointer-events: none; }
.space-expansion-tile::before      { content: 'H₀'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 5.5rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.space-arecibo-tile::before        { content: '◉'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 6rem; opacity: 0.05; pointer-events: none; }

.space-constellations-tile > *, .space-apollo-tile > *, .space-asteroids-tile > *, .space-expansion-tile > *, .space-arecibo-tile > * { position: relative; z-index: 1; }
.space-constellations-tile .tile-kicker, .space-apollo-tile .tile-kicker, .space-asteroids-tile .tile-kicker, .space-expansion-tile .tile-kicker, .space-arecibo-tile .tile-kicker { color: rgba(180,160,255,0.88); font-weight: 700; }
.space-constellations-tile strong, .space-apollo-tile strong, .space-asteroids-tile strong, .space-expansion-tile strong, .space-arecibo-tile strong { color: #fff; }
.space-constellations-tile small, .space-apollo-tile small, .space-asteroids-tile small, .space-expansion-tile small, .space-arecibo-tile small { color: rgba(220,215,255,0.65); }
.space-constellations-tile:hover, .space-apollo-tile:hover, .space-asteroids-tile:hover, .space-expansion-tile:hover, .space-arecibo-tile:hover { border-color: rgba(140,80,255,0.62); box-shadow: 0 12px 38px rgba(0,0,0,0.65), 0 0 0 1px rgba(140,80,255,0.24); }

/* ── Engineering additions ──────────────────────────────────── */

.eng-soldering-tile,
.eng-components-tile,
.eng-ohms-tile,
.eng-schematics-tile,
.eng-sensors-tile,
.eng-pid-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(21,19,10,0.05) 0%, rgba(21,19,10,0.90) 100%),
    radial-gradient(circle at 72% 20%, rgba(255,204,0,0.24), transparent 42%),
    radial-gradient(circle at 18% 72%, rgba(0,122,255,0.16), transparent 38%),
    #15130a;
  border: 1px solid rgba(255,204,0,0.26); color: #fff;
}
.eng-soldering-tile::before   { content: 'Sn'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 6.5rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.eng-components-tile::before  { content: 'RCL'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 3.5rem; font-weight: 900; letter-spacing: 0.08em; opacity: 0.06; pointer-events: none; }
.eng-ohms-tile::before        { content: 'V=IR'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 3.2rem; font-weight: 900; letter-spacing: -0.02em; opacity: 0.06; pointer-events: none; }
.eng-schematics-tile::before  { content: '⊕'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 7rem; opacity: 0.05; pointer-events: none; }
.eng-sensors-tile::before     { content: 'mV'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 5rem; font-weight: 900; opacity: 0.05; pointer-events: none; }
.eng-pid-tile::before         { content: 'PID'; position: absolute; bottom: 10%; right: 8%; font-size: 2.4rem; font-weight: 900; letter-spacing: 0.06em; color: rgba(255,220,60,0.14); pointer-events: none; }

.eng-soldering-tile > *, .eng-components-tile > *, .eng-ohms-tile > *, .eng-schematics-tile > *, .eng-sensors-tile > *, .eng-pid-tile > * { position: relative; z-index: 1; }
.eng-soldering-tile .tile-kicker, .eng-components-tile .tile-kicker, .eng-ohms-tile .tile-kicker, .eng-schematics-tile .tile-kicker, .eng-sensors-tile .tile-kicker, .eng-pid-tile .tile-kicker { color: rgba(255,220,100,0.88); font-weight: 700; }
.eng-soldering-tile strong, .eng-components-tile strong, .eng-ohms-tile strong, .eng-schematics-tile strong, .eng-sensors-tile strong, .eng-pid-tile strong { color: #fff; }
.eng-soldering-tile small, .eng-components-tile small, .eng-ohms-tile small, .eng-schematics-tile small, .eng-sensors-tile small, .eng-pid-tile small { color: rgba(255,240,200,0.62); }
.eng-soldering-tile:hover, .eng-components-tile:hover, .eng-ohms-tile:hover, .eng-schematics-tile:hover, .eng-sensors-tile:hover, .eng-pid-tile:hover { border-color: rgba(255,204,0,0.62); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,204,0,0.22); }

/* ── Computer Science additions ─────────────────────────────── */

.cs-cgi-tile,
.cs-enigma-tile,
.cs-chess-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(8,16,42,0.05) 0%, rgba(8,16,42,0.90) 100%),
    radial-gradient(circle at 74% 22%, rgba(80,130,255,0.28), transparent 42%),
    radial-gradient(circle at 18% 70%, rgba(0,60,200,0.22), transparent 38%),
    #08102a;
  border: 1px solid rgba(80,130,255,0.28); color: #fff;
}
.cs-cgi-tile::before    { content: '∇'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 7.5rem; opacity: 0.05; pointer-events: none; }
.cs-enigma-tile::before { content: 'XOR'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 3.8rem; font-weight: 900; letter-spacing: 0.04em; opacity: 0.06; pointer-events: none; }
.cs-chess-tile::before  { content: '♟'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 6.5rem; opacity: 0.05; pointer-events: none; }

.cs-cgi-tile > *, .cs-enigma-tile > *, .cs-chess-tile > * { position: relative; z-index: 1; }
.cs-cgi-tile .tile-kicker, .cs-enigma-tile .tile-kicker, .cs-chess-tile .tile-kicker { color: rgba(130,180,255,0.88); font-weight: 700; }
.cs-cgi-tile strong, .cs-enigma-tile strong, .cs-chess-tile strong { color: #fff; }
.cs-cgi-tile small, .cs-enigma-tile small, .cs-chess-tile small { color: rgba(210,225,255,0.65); }
.cs-cgi-tile:hover, .cs-enigma-tile:hover, .cs-chess-tile:hover { border-color: rgba(80,130,255,0.62); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(80,130,255,0.22); }

/* ── Applied Physics / Materials (Fabrication) additions ────── */

.mat-viscosity-tile,
.mat-squishy-tile,
.mat-optics-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(13,19,24,0.05) 0%, rgba(13,19,24,0.90) 100%),
    radial-gradient(circle at 72% 22%, rgba(255,150,82,0.28), transparent 42%),
    radial-gradient(circle at 18% 72%, rgba(68,214,197,0.20), transparent 38%),
    #0d1318;
  border: 1px solid rgba(255,150,82,0.26); color: #fff;
}
.mat-viscosity-tile::before { content: 'η'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 7.5rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.mat-squishy-tile::before   { content: 'E'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 7.5rem; font-style: italic; opacity: 0.05; pointer-events: none; }
.mat-optics-tile::before    { content: 'n'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 7.5rem; font-style: italic; opacity: 0.05; pointer-events: none; }

.mat-viscosity-tile > *, .mat-squishy-tile > *, .mat-optics-tile > * { position: relative; z-index: 1; }
.mat-viscosity-tile .tile-kicker, .mat-squishy-tile .tile-kicker, .mat-optics-tile .tile-kicker { color: rgba(255,190,130,0.88); font-weight: 700; }
.mat-viscosity-tile strong, .mat-squishy-tile strong, .mat-optics-tile strong { color: #fff; }
.mat-viscosity-tile small, .mat-squishy-tile small, .mat-optics-tile small { color: rgba(255,235,210,0.62); }
.mat-viscosity-tile:hover, .mat-squishy-tile:hover, .mat-optics-tile:hover { border-color: rgba(255,150,82,0.62); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,150,82,0.22); }

/* ── Language & Literature additions ────────────────────────── */

.lang-foundations-tile,
.lang-baloney-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(17,20,13,0.05) 0%, rgba(17,20,13,0.90) 100%),
    radial-gradient(circle at 72% 22%, rgba(80,180,132,0.28), transparent 42%),
    radial-gradient(circle at 18% 72%, rgba(238,196,104,0.20), transparent 38%),
    #11140d;
  border: 1px solid rgba(206,188,122,0.28); color: #fff;
}
.lang-foundations-tile::before { content: 'αβγ'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 4rem; font-style: italic; opacity: 0.06; pointer-events: none; }
.lang-baloney-tile::before     { content: '≠'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 7.5rem; opacity: 0.05; pointer-events: none; }

.lang-foundations-tile > *, .lang-baloney-tile > * { position: relative; z-index: 1; }
.lang-foundations-tile .tile-kicker, .lang-baloney-tile .tile-kicker { color: rgba(230,210,150,0.88); font-weight: 700; }
.lang-foundations-tile strong, .lang-baloney-tile strong { color: #fff; }
.lang-foundations-tile small, .lang-baloney-tile small { color: rgba(240,230,200,0.65); }
.lang-foundations-tile:hover, .lang-baloney-tile:hover { border-color: rgba(206,188,122,0.64); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(206,188,122,0.22); }

/* ── Complex Systems / Humanities additions ─────────────────── */

.sys-ten-eighty-tile,
.sys-ages-tile,
.sys-commons-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(4,20,29,0.05) 0%, rgba(4,20,29,0.90) 100%),
    radial-gradient(circle at 72% 22%, rgba(50,190,168,0.28), transparent 42%),
    radial-gradient(circle at 18% 72%, rgba(74,127,255,0.20), transparent 38%),
    #04141d;
  border: 1px solid rgba(76,188,175,0.28); color: #fff;
}
.sys-ten-eighty-tile::before { content: '80%'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 4.5rem; font-weight: 900; opacity: 0.05; pointer-events: none; }
.sys-ages-tile::before       { content: '∞'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 7.5rem; opacity: 0.05; pointer-events: none; }
.sys-commons-tile::before    { content: '∀'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 7.5rem; opacity: 0.05; pointer-events: none; }

.sys-ten-eighty-tile > *, .sys-ages-tile > *, .sys-commons-tile > * { position: relative; z-index: 1; }
.sys-ten-eighty-tile .tile-kicker, .sys-ages-tile .tile-kicker, .sys-commons-tile .tile-kicker { color: rgba(120,230,215,0.88); font-weight: 700; }
.sys-ten-eighty-tile strong, .sys-ages-tile strong, .sys-commons-tile strong { color: #fff; }
.sys-ten-eighty-tile small, .sys-ages-tile small, .sys-commons-tile small { color: rgba(200,240,238,0.65); }
.sys-ten-eighty-tile:hover, .sys-ages-tile:hover, .sys-commons-tile:hover { border-color: rgba(76,188,175,0.64); box-shadow: 0 12px 38px rgba(0,0,0,0.6), 0 0 0 1px rgba(76,188,175,0.22); }