/* Chalk Classroom: a green board in a wooden frame, hand-lettered headings, chalk yellow and pink. */
@font-face { font-family: "Chalk Hand"; src: url("fonts/Caveat-Variable.woff2") format("woff2"); font-weight: 400 700; font-display: block; }
:root {
  --bg: #23382c;
  --surface: rgb(255 255 255 / 0.06);
  --ink: #f3f1e7;
  --muted: #b8c6b5;
  --line: rgb(243 241 231 / 0.28);
  --accent: #f4d46a;
  --accent-ink: #23382c;
  --accent-2: #f3a0a0;
  --ok: #9fe0a8;
  --bad: #f3a0a0;
  --font-display: "Chalk Hand", var(--cjk), cursive;
  --font-body: "Deck Sans", var(--cjk), system-ui, sans-serif;
  --radius: 16px;
  --pad: 150px;
  --chart-colors: #f4d46a, #f3a0a0, #9fd3f0, #f3f1e7, #9fe0a8;
  --outer: #1a120c;
}
.deck-stage > section {
  background:
    radial-gradient(ellipse at 30% 20%, rgb(255 255 255 / 0.07), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgb(255 255 255 / 0.05), transparent 50%),
    var(--bg);
  box-shadow: inset 0 0 0 26px #6e4b2f, inset 0 0 0 30px #4f3420, inset 0 0 120px rgb(0 0 0 / 0.35);
}
section h1 { font-size: 190px; font-weight: 700; line-height: 0.95; }
section h2 { font-size: 128px; font-weight: 700; line-height: 1; }
:lang(zh) section h1, :lang(zh) section h2 { font-family: var(--cjk); font-weight: 600; }
section .kicker { color: var(--accent-2); font-family: "Chalk Hand", cursive; font-size: 48px; letter-spacing: 0.02em; text-transform: none; }
section em { color: var(--accent); font-style: normal; }
section[data-layout="cover"] h1 { text-decoration: underline wavy rgb(244 212 106 / 0.7) 6px; text-underline-offset: 22px; }
section[data-layout="bullets"] li::before { content: "✓"; background: none; width: auto; height: auto; top: 0; color: var(--accent); font-size: 1em; }
.stat { border-top: 3px dashed var(--line); }
.stat b { font-family: "Chalk Hand", cursive; font-weight: 700; color: 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-color: var(--accent); }
.quiz .q { font-family: "Chalk Hand", cursive; font-size: 96px; font-weight: 700; line-height: 1; }
.quiz li::before, ol.sort li::before { border-color: var(--line); color: var(--ink); background: transparent; }
.match .item { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.quiz .check, .sort-check { background: var(--accent); color: var(--accent-ink); }
.chart-filter button { border-color: var(--line); color: var(--muted); }
.chart-filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
section blockquote { font-family: "Chalk Hand", cursive !important; font-size: 124px !important; font-weight: 700; line-height: 1 !important; }