/* =========================================================================
   MATHY SAT - THEME AND DESIGN TOKENS
   ========================================================================= */
    /* ACE Math design tokens (2026-10-14 redesign).
       Light ("paper") is the default; dark ("night") is the toggle.
       One accent: pencil amber, used as a FILL with ink text (buttons, selected
       states). --primary is the readable text/icon version of that accent. */
    :root {
      --font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --font-question: 'STIX Two Text', 'Cambria Math', Georgia, serif;
      --font-code: ui-monospace, 'Cascadia Mono', Consolas, monospace;
      --pencil: #F5B82E;
      --ink: #0E1626;

      --bg: #0E1626;
      --fg: #EAF0FA;
      --surface: #131D30;
      --surface-raised: #1A263D;
      --surface-card: #16213A;
      --border: #2A3956;
      --border-glow: rgba(245, 184, 46, 0.45);
      --primary: #F5B82E;
      --primary-hover: #FFC94D;
      --primary-fg: #0E1626;
      --primary-glow: rgba(245, 184, 46, 0.18);
      --secondary: #22304B;
      --secondary-fg: #EAF0FA;
      --muted: #1E2A42;
      --muted-fg: #9AA9C2;
      --accent: #7DB3FF;
      --accent-glow: rgba(125, 179, 255, 0.22);
      --destructive: #FF6B8A;
      --destructive-bg: rgba(255, 107, 138, 0.14);
      --success: #3DD598;
      --success-bg: rgba(61, 213, 152, 0.14);
      --gold-gradient: var(--pencil);
      --smoke-gradient: linear-gradient(180deg, rgba(125, 179, 255, 0.35), transparent);
      --grid-line: rgba(255, 255, 255, 0.04);
      --shadow-lamp: none;
      --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.3);
      --hl-color: #fef08a;
      --hl-text: #1e1b4b;
      --logo-bg: #1F2D4A;
      --focus-ring: 0 0 0 3px rgba(245, 184, 46, 0.55);
    }

    :root[data-theme="light"] {
      --pencil: #F2A900;
      --bg: #FBFCFE;
      --fg: #14213D;
      --surface: #FFFFFF;
      --surface-raised: #F2F5FA;
      --surface-card: #FFFFFF;
      --border: #DCE3EE;
      --border-glow: rgba(242, 169, 0, 0.55);
      --primary: #9A6200;
      --primary-hover: #7A4E00;
      --primary-fg: #14213D;
      --primary-glow: rgba(242, 169, 0, 0.16);
      --secondary: #EEF2F8;
      --secondary-fg: #14213D;
      --muted: #EEF2F8;
      --muted-fg: #5B6B85;
      --accent: #2F5DB3;
      --accent-glow: rgba(47, 93, 179, 0.14);
      --destructive: #C2264E;
      --destructive-bg: rgba(194, 38, 78, 0.08);
      --success: #0B7F55;
      --success-bg: rgba(11, 127, 85, 0.09);
      --gold-gradient: var(--pencil);
      --smoke-gradient: linear-gradient(180deg, rgba(47, 93, 179, 0.18), transparent);
      --grid-line: rgba(20, 33, 61, 0.05);
      --shadow-lamp: none;
      --shadow-panel: 0 1px 2px rgba(20, 33, 61, 0.06);
      --hl-color: #fef08a;
      --hl-text: #020617;
      --logo-bg: #14213D;
      --focus-ring: 0 0 0 3px rgba(47, 93, 179, 0.35);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      transition: background-color 0.25s ease, border-color 0.25s ease;
    }

    body {
      background-color: var(--bg);
      color: var(--fg);
      font-family: var(--font-ui);
      font-variant-numeric: tabular-nums;
      line-height: 1.5;
      min-height: 100vh;
      display: flex;
    }

    h1, h2, h3, h4, .brand-title {
      font-family: var(--font-ui);
      font-weight: 750;
      letter-spacing: -0.015em;
      line-height: 1.2;
    }
    code, pre, kbd { font-family: var(--font-code); }
    :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

    /* Question stems, choices, and math text must NEVER use Cinzel small-caps font */
    #question-prompt-text,
    .question-prompt,
    .daily-q-text,
    .choice-content,
    .choice-btn,
    .math-content,
    .ws-q-prompt,
    .mistake-card,
    .question-stem {
      font-family: var(--font-question) !important;
      font-variant: normal !important;
      text-transform: none !important;
      letter-spacing: normal !important;
    }

    /* Desmos-like Mathematical Typography & Powers */
    .katex {
      font-size: 1.08em;
      text-rendering: optimizeLegibility;
    }

    .katex .msupsub {
      font-size: 0.85em;
      vertical-align: 0.45em;
    }

    sup.math-power,
    sup {
      font-size: 0.78em;
      vertical-align: 0.45em;
      line-height: 0;
      font-weight: 600;
      color: inherit;
    }

    .numeric {
      font-family:var(--font-ui);
      font-variant-numeric: tabular-nums;
    }

    #app {
      display: flex;
      width: 100%;
      min-height: 100vh;
    }

    aside {
      width: 255px;
      background: var(--surface);
      border-right: 1px solid var(--border);
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      height: 100vh;
      flex-shrink: 0;
      z-index: 40;
    }