html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f4f1e8; --muted: #b1adb0; --line: #44454d;
  --surface: #24262c; --surface-soft: #2a2c33; --surface-accent: #303035;
  --accent: #e6b66c; --accent-ink: #29221a; --warm: #c8d3ce; --warm-ink: #1c3027;
  --purple: var(--accent); --purple-dark: var(--accent); --yellow: var(--warm);
  --green: #afd2b6; --red: #edaaa5; --shadow: 4px 5px 0 #0c0d10;
}
.theme-toggle { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 8px; background: #fff; color: var(--purple-dark); border: 2px solid var(--line); border-radius: 12px; box-shadow: 2px 3px 0 var(--line); }
.theme-toggle:hover { background: #eee8ff; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 18px; }
.theme-choice { display: flex; align-items: center; flex-direction: column; gap: 8px; min-height: 120px; padding: 14px 6px; background: #f7f5fc; border: 2px solid #d6d0e3; border-radius: 16px; }
.theme-choice > span { font-size: 26px; line-height: 1; }
.theme-choice strong { font-size: 15px; }
.theme-choice small { font-size: 10px; color: var(--muted); font-weight: 700; }
.theme-choice[aria-pressed="true"] { background: #e9e0ff; border-color: #7650cf; box-shadow: 0 0 0 2px #7650cf; color: #4d279d; }
.theme-status { min-height: 40px; }
@media (max-width: 620px) {
  .site-header { gap: 10px; }
  .site-header nav { gap: 7px; }
  .site-header .nav-link[data-action="help"] { width: 40px; padding: 0; font-size: 0; }
  .site-header .nav-link[data-action="help"]::after { content: '?'; display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid currentColor; border-radius: 50%; font-size: 17px; margin: auto; }
  .site-header .record-button { width: 40px; padding: 6px; }
  .theme-toggle { width: 40px; box-shadow: 2px 2px 0 var(--line); }
  .theme-options { gap: 8px; }
  .theme-choice { padding: 14px 4px; }
  .theme-choice small { font-size: 9px; }
}
@media (max-width: 360px) { .site-header .brand { font-size: 18px; gap: 7px; } .site-header .brand-symbol { width: 32px; height: 35px; } .site-header nav { gap: 5px; } .site-header { gap: 5px; padding-left: 12px; padding-right: 12px; } }

/* Graphite and honey: warm charcoal surfaces, amber actions and sage timers. */
html[data-theme="dark"] body { background-color: #17181c; background-image: radial-gradient(#303137 1.2px, transparent 1.2px); }
html[data-theme="dark"] :is(.record-button,.theme-toggle,.feature,.game-wheel-card,.question-card,.review-item,dialog,.round-ready-card,.practice-mode,.review-controls,.home-faq details,.guide-steps li,.wheel-caption,.close-button,.sound-toggle) { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] :is(.mode-card,.question-card,.game-wheel-card,.result-summary,.round-ready-card,dialog,.feature) { box-shadow: 4px 5px 0 #0c0d10; }
html[data-theme="dark"] :is(.daily-mode,.result-share,.question-top,.mode-message) { background: var(--surface-accent); color: var(--ink); border-color: #62616a; }
html[data-theme="dark"] .result-summary { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] :is(.home-copy,.mode-card p,.share-invitation,.share-note,.share-legend,.review-count,.section-intro p,.guide-steps p,.home-faq p,.guide-page p,.countdown-note,.countdown-intro,.countdown-caption,.under-cta,.wheel-preview-heading > span:last-child,.keyboard-hint,.dialog-note,.how-list p,.record-item small,.share-status) { color: var(--muted); }
html[data-theme="dark"] :is(.home-description,.guide-link,.home-rules-link:hover,.share-copy,.theme-toggle,.wheel-preview-heading > span:first-child,.share-card-heading) { color: #e6c797; }
html[data-theme="dark"] .home-heading .marked:after { background: #665135; }
html[data-theme="dark"] :is(.primary-button,.start-button,.countdown-value,.small-letter) { background: #e6b66c; color: #29221a; }
html[data-theme="dark"] .primary-button:hover { background: #f0c98f; color: #29221a; }
html[data-theme="dark"] :is(.secondary-button,.answer-input,.share-manual,.theme-choice,.countdown-steps span,.review-letter,.guide-steps li > span,.help-icon,.how-list > li > span,kbd) { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .answer-input { background: #1c1e24; border-color: #62616a; }
html[data-theme="dark"] .answer-input::placeholder { color: #a5a2ac; }
html[data-theme="dark"] .clear-answer { color: #c8c4ca; }
html[data-theme="dark"] .clear-answer:hover { background: #393b43; color: var(--ink); }
html[data-theme="dark"] .answer-input[aria-invalid="true"] { background: #503438; border-color: #edaaa5; }
html[data-theme="dark"] :is(.sticker,.mode-icon,.pass-button) { background: #c8d3ce; color: #1c3027; }
html[data-theme="dark"] :is(.intro-badge,.wheel-tag,.result-sticker,.timer,.mobile-timer) { background: #c8d3ce; color: #1c3027; border-color: #626e67; }
html[data-theme="dark"] .brand-symbol { color: #29221a; background: #e6b66c; }
html[data-theme="dark"] .brand-symbol > span { color: #1c3027; }
html[data-theme="dark"] :is(.feature:nth-child(1) .feature-icon,.theme-choice[aria-pressed="true"]) { background: #4c3d2c; border-color: #e6b66c; color: #f1dab8; }
html[data-theme="dark"] :is(.feature:nth-child(2) .feature-icon,.ready-letters span:nth-child(2)) { background: #c8d3ce; color: #1c3027; }
html[data-theme="dark"] :is(.feature:nth-child(3) .feature-icon,.practice-mode .mode-icon,.ready-letters span:nth-child(3)) { background: #343b38; color: #d3ddd6; }
html[data-theme="dark"] .ready-letters span:first-child { background: #e6b66c; color: #29221a; }
html[data-theme="dark"] .letter { background: var(--surface-soft); color: var(--ink); }
html[data-theme="dark"] :is(.letter.correct,.review-letter.correct,.share-tile.correct,.share-legend i.correct,.feedback.success,.review-empty) { background: #304a3e; color: #d0efda; border-color: #58715d; }
html[data-theme="dark"] :is(.letter.wrong,.review-letter.wrong,.share-tile.wrong,.share-legend i.wrong,.feedback.error,.mode-message.error) { background: #503438; color: #ffd5d4; border-color: #7c5155; }
html[data-theme="dark"] :is(.letter.passed,.review-letter.passed,.share-tile.passed,.share-legend i.passed,.feedback.pass) { background: #514933; color: #f7e3ae; border-color: #7c7051; }
html[data-theme="dark"] :is(.share-tile.pending,.share-legend i.pending) { background: #2a2c33; color: #c8c4ca; border-color: #62616a; }
html[data-theme="dark"] .letter.active { background: #e6b66c; color: #29221a; box-shadow: 0 0 0 4px #63503b,2px 3px 0 #0c0d10; }
html[data-theme="dark"] :is(.feedback,.dialog-note,.no-script-note,.round-reminder) { background: var(--surface-soft); color: #e1dde1; border-color: var(--line); }
html[data-theme="dark"] .feedback.success { background: #304a3e; color: #d0efda; }
html[data-theme="dark"] .feedback.error { background: #503438; color: #ffd5d4; }
html[data-theme="dark"] .feedback.pass { background: #514933; color: #f7e3ae; }
html[data-theme="dark"] :is(.game-counts,.result-summary .game-counts,.home-guide,.feature-strip,.wheel-preview-heading,.record-item,.how-list li) { border-color: #44454d; }
html[data-theme="dark"] :is(.game-counts > div:nth-child(1) strong,.review-item[data-status="correct"] .review-status) { color: #afd2b6; }
html[data-theme="dark"] :is(.game-counts > div:nth-child(2) strong,.review-item[data-status="wrong"] .review-status,.finish-round) { color: #edaaa5; }
html[data-theme="dark"] :is(.game-counts > div:nth-child(3) strong,.review-item[data-status="passed"] .review-status) { color: #e6c98c; }
html[data-theme="dark"] .review-content .your-guess { background: #503438; color: #ffd5d4; }
html[data-theme="dark"] .review-controls button[aria-pressed="true"] { background: #e6b66c; color: #29221a; }
html[data-theme="dark"] .review-controls button > span { background: #3c3b40; color: #e5e0e3; }
html[data-theme="dark"] .countdown-steps .current { background: #c8d3ce; color: #1c3027; }
html[data-theme="dark"] .countdown-steps .done { background: #304a3e; color: #d0efda; }
html[data-theme="dark"] .countdown-card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .countdown-number.ready { color: #29221a; }
html[data-theme="dark"] .countdown-orbit { color: #29221a; }
html[data-theme="dark"] dialog::backdrop { background: #0c0d10dc; }
html[data-theme="dark"] .theme-choice[aria-pressed="true"] { box-shadow: 0 0 0 2px #e6b66c; }
html[data-theme="dark"] :is(.timer.low,.mobile-timer.low) { background: #503438; color: #ffd5d4; border-color: #7c5155; }
html[data-theme="dark"] .round-reminder div > span { color: var(--muted); }
html[data-theme="dark"] .reminder-icon { color: #1c3027; }
html[data-theme="dark"] .home-faq details[open] { background: var(--surface-accent); border-color: #62616a; }
html[data-theme="dark"] .home-art .wheel-card { background: var(--surface-accent); border-color: #62616a; }

html[data-theme="dark"] :is(.theme-toggle:hover,.secondary-button:hover,.sound-toggle:hover,.close-button:hover) { background: #393b43; color: var(--ink); }
html[data-theme="dark"] .pass-button:hover { background: #dce5df; color: var(--warm-ink); }
html[data-theme="dark"] .theme-choice:hover { background: #393b43; }
html[data-theme="dark"] .game-pill { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .yellow-dot { background: #e6c98c; }
html[data-theme="dark"] .challenge-card { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
html[data-theme="dark"] :is(.community-input,.report-context,.challenge-comparison > div) { background: var(--surface-soft); color: var(--ink); border-color: #62616a; }
html[data-theme="dark"] :is(.challenge-note,.challenge-card label small,.challenge-invite label small) { color: var(--muted); }
html[data-theme="dark"] .report-question-button { color: var(--accent); }
html[data-theme="dark"] .report-question-button:disabled { color: var(--muted); }
html[data-theme="dark"] .admin-report blockquote { background: #514933; color: #f7e3ae; }
html[data-theme="dark"] .challenge-rank { border-color: var(--line); }

html[data-theme="dark"] .round-return-notice { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .round-return-notice.error { background: #503438; color: #ffd5d4; border-color: #7c5155; }

html[data-theme="dark"] :is(.hand-toggle,.hand-settings-link,.hand-options button) { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .hand-options button[aria-pressed="true"] { background: #4c3d2c; color: #f1dab8; border-color: #e6b66c; box-shadow: 0 0 0 1px #e6b66c; }
html[data-theme="dark"] .hand-preview { border-color: #62616a; }
html[data-theme="dark"] .hand-preview-answer { color: #29221a; }
html[data-theme="dark"] .hand-preview-pass { color: #1c3027; }

html[data-theme="dark"] :is(.daily-mode .daily-ranking-link,.daily-result-ranking,.daily-rank-row,.daily-rank-empty) { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] :is(.daily-your-score,.daily-rank-row.is-mine) { background: #4c3d2c; border-color: #e6b66c; color: var(--ink); }