:root {
  --sc-page: #f8f5ed;
  --sc-text: #20251e;
  --sc-muted: #777b71;
  --sc-line: #deded4;
  --sc-panel: #e9e6db;
  --sc-board: #e7e4d9;
  --sc-empty: #d8d7ca;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sc-page: #171a16;
  --sc-text: #f1f2eb;
  --sc-muted: #a5aa9c;
  --sc-line: #383d35;
  --sc-panel: #30352d;
  --sc-board: #30342d;
  --sc-empty: #42473e;
}

body { color: var(--sc-text); background: radial-gradient(ellipse at 50% -30%, color-mix(in srgb, var(--sc-page) 75%, white 25%) 0, var(--sc-page) 62%); }
.topline { border-color: var(--sc-line); }
.topline a { color: var(--sc-text); }
.topline a span, .edition, .eyebrow, footer, .score-box span, .intro, .controls p { color: var(--sc-muted); }
.score-box, .undo { background: var(--sc-panel); color: var(--sc-text); }
.score-box.best { background: color-mix(in srgb, var(--sc-panel) 60%, #91ad55); }
.score-box strong { color: var(--sc-text); }
.board-shell { background: var(--sc-board); }
.cell:not([data-value]) { background: var(--sc-empty); }
.overlay { background: color-mix(in srgb, var(--sc-page) 85%, transparent); }
.mobile-controls button { border-color: var(--sc-line); background: var(--sc-panel); color: var(--sc-text); }
footer { border-color: var(--sc-line); }