/* Schematic Walkthrough: blueprint blue with a fine grid, white linework, yellow callouts, mono labels. */
:root {
  --bg: #0d2645;
  --surface: rgb(255 255 255 / 0.05);
  --ink: #eaf2ff;
  --muted: #9fb8d9;
  --line: rgb(234 242 255 / 0.28);
  --accent: #ffd166;
  --accent-ink: #0d2645;
  --accent-2: #6fd3ff;
  --ok: #7ee0a5;
  --bad: #ff8b7a;
  --font-display: "Deck Grotesk", var(--cjk), system-ui, sans-serif;
  --font-body: "Deck Sans", var(--cjk), system-ui, sans-serif;
  --radius: 4px;
  --pad: 140px;
  --chart-colors: #ffd166, #6fd3ff, #eaf2ff, #7ee0a5, #ff8b7a;
  --outer: #06142a;
}
.deck-stage > section {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgb(234 242 255 / 0.1) 1px, transparent 1px), linear-gradient(90deg, rgb(234 242 255 / 0.1) 1px, transparent 1px),
    linear-gradient(rgb(234 242 255 / 0.04) 1px, transparent 1px), linear-gradient(90deg, rgb(234 242 255 / 0.04) 1px, transparent 1px);
  background-size: 192px 192px, 192px 192px, 32px 32px, 32px 32px;
  outline: 2px solid rgb(234 242 255 / 0.35); outline-offset: -44px;
}
section h1, section h2 { font-weight: 500; letter-spacing: -0.02em; }
section .kicker { color: var(--accent-2); }
section .kicker::before { content: "◇ "; }
section em { color: var(--accent); font-style: normal; }
.stat { border-top: 2px dashed var(--line); }
.stat b { font-family: var(--font-mono); font-weight: 500; color: var(--accent); letter-spacing: -0.04em; }
section[data-layout="bullets"] ol li::before { color: var(--accent); }
section[data-layout="bullets"] ul li::before { background: var(--accent); }
section[data-layout="compare"] .col, .quiz li, ol.sort li, .match .target { background: var(--surface); border: 2px dashed var(--line); }
section[data-layout="compare"] .col:last-child { border: 2px solid var(--accent); }
ol.sort li::before { background: var(--accent); color: var(--accent-ink); }
.match .item { background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 32px; }
.quiz .check, .sort-check { background: var(--accent); color: var(--accent-ink); }
.chart-filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }