/* Rain-washed forest colors on the established character notebook layout. */
.theme-twilight {
  --ink: #263e43;
  --muted: #53676c;
  --paper: #f8faf6;
  --accent: #315e62;
  --accent-light: #dcebea;
  --line: #c7d7d5;
  --mint: #e3eddf;
  --rose: #eee5df;
  --gold: #d4b78a;
  color: var(--ink);
  background: radial-gradient(ellipse at 0 0, #cadbdc 0, transparent 48%), linear-gradient(135deg, #e6eeeb, #d3dddc);
}
.theme-twilight .notebook {
  border-color: #afc4c0;
  box-shadow: 8px 8px 0 #bccdca, 0 24px 70px #203e4317;
}
.theme-twilight .notebook::before { border-color: #bd9c95; }
.theme-twilight .hero { background: linear-gradient(115deg, #f8faf6, #e9f0ec); }
.theme-twilight .hero h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); }
.theme-twilight .hero-art { transform: rotate(1deg); }
.theme-twilight .art-caption { font-size: 11px; letter-spacing: 1px; fill: #36585d; }
.theme-twilight .primary { box-shadow: 0 3px 0 #203f44; }
.theme-twilight .primary:hover:not(:disabled) { background: #24494d; }
.theme-twilight :is(button, a, summary, input):focus-visible,
.theme-twilight .answer:has(input:focus-visible) { outline-color: #8a493f; }
.theme-twilight .answer:hover { background: #eef4ef; border-color: #829f9a; }
.theme-twilight .answer-letter { background: #e4ede8; }
.theme-twilight .answer:has(input:checked) { background: var(--accent-light); }
.theme-twilight .answer:has(input:checked) .answer-letter { background: var(--accent); }
.theme-twilight .scorecard { background: #e8eeea; }
.theme-twilight progress,
.theme-twilight progress::-webkit-progress-bar { background: #dce7e3; }
.theme-twilight meter,
.theme-twilight meter::-webkit-meter-bar { background: #cddcd7; }
@media (max-width: 720px) {
  .theme-twilight .hero h1 { font-size: clamp(2.2rem, 8.5vw, 3rem); }
  .theme-twilight #question-heading { font-size: clamp(1.4rem, 6vw, 1.8rem); line-height: 1.15; }
  .theme-twilight .notebook { box-shadow: 5px 5px 0 #bccdca; }
}