:root {
  color-scheme: light;
  --navy: #172554;
  --blue: #1d4ed8;
  --blue-dark: #1e3a8a;
  --sky: #e0f2fe;
  --ink: #172033;
  --muted: #526078;
  --line: #c8d2e1;
  --surface: #ffffff;
  --background: #f4f7fb;
  --danger: #a11212;
  --focus: #f59e0b;
  --purple: #6d28d9;
  --pink: #be185d;
  --teal: #0f766e;
  --gold: #b45309;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 112.5%;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 5%, #fce7f3 0, transparent 22rem),
    radial-gradient(circle at 92% 18%, #dbeafe 0, transparent 24rem),
    radial-gradient(circle at 45% 90%, #ccfbf1 0, transparent 24rem),
    var(--background);
  line-height: 1.6;
}

body.large-text { font-size: 125%; }

body.high-contrast {
  --navy: #000;
  --blue: #0000b5;
  --blue-dark: #000;
  --sky: #fff;
  --ink: #000;
  --muted: #111;
  --line: #000;
  --surface: #fff;
  --background: #fff;
  --focus: #ffbf00;
  background: #fff;
}

button, input, select, textarea { font: inherit; }
button, select, textarea, input { color: inherit; }

button {
  min-height: 2.75rem;
  padding: .65rem 1rem;
  border: 2px solid var(--blue);
  border-radius: .5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  font-weight: 700;
  cursor: pointer;
}

button:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
button.secondary { color: var(--blue-dark); background: var(--surface); }
button.secondary:hover { color: #fff; background: var(--blue-dark); }
button.danger { background: var(--danger); border-color: var(--danger); }

:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: .75rem;
  top: -5rem;
  z-index: 10;
  padding: .75rem;
  color: #fff;
  background: #000;
}
.skip-link:focus { top: .75rem; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem max(1rem, calc((100% - 72rem) / 2));
  color: #fff;
  background: linear-gradient(115deg, #172554 0%, #4338ca 48%, #9d174d 100%);
}
.site-header h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.5rem); }
.site-header .eyebrow { color: #dbeafe; }

.eyebrow {
  margin: 0 0 .2rem;
  color: var(--blue-dark);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

nav { background: var(--surface); border-bottom: 1px solid var(--line); }
.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: .5rem 1rem;
  list-style: none;
}
.nav-list button {
  min-height: 2.5rem;
  padding: .4rem .75rem;
  color: var(--blue-dark);
  background: transparent;
  border-color: transparent;
}
.nav-list button:hover, .nav-list button[aria-current="page"] {
  color: #fff;
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

main { max-width: 72rem; min-height: 65vh; margin: 0 auto; padding: 2rem 1rem 4rem; }
.view { max-width: 58rem; }
h2 { margin-top: .15rem; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.2; }
h3 { margin-top: 1.8rem; line-height: 1.3; }
.hero { max-width: 48rem; padding: clamp(1.2rem, 4vw, 2.5rem); background: var(--sky); border-left: .5rem solid var(--blue); border-radius: .5rem; }
.hero { background: linear-gradient(135deg, #e0f2fe, #ede9fe 58%, #fce7f3); box-shadow: 0 16px 40px #312e8120; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.stats div { padding: 1rem; background: linear-gradient(145deg, #fff, #eef2ff); border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 8px 24px #1e3a8a12; }
.stats div:nth-child(4n+1) { border-top: .4rem solid var(--purple); }
.stats div:nth-child(4n+2) { border-top: .4rem solid var(--teal); }
.stats div:nth-child(4n+3) { border-top: .4rem solid var(--pink); }
.stats div:nth-child(4n) { border-top: .4rem solid var(--gold); }
.stats dt { color: var(--muted); font-weight: 700; }
.stats dd { margin: .25rem 0 0; font-size: 1.5rem; font-weight: 800; }
.tip { margin-top: 2rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; }
.tip h3 { margin-top: 0; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.card { padding: 1.25rem; background: linear-gradient(155deg, #fff, #f8fafc); border: 1px solid var(--line); border-top: .5rem solid var(--blue); border-radius: .8rem; box-shadow: 0 12px 30px #1e3a8a16; transition: transform .18s ease, box-shadow .18s ease; }
.card:nth-child(4n+2) { border-top-color: var(--purple); }
.card:nth-child(4n+3) { border-top-color: var(--pink); }
.card:nth-child(4n) { border-top-color: var(--teal); }
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px #1e3a8a24; }
.card h3 { margin-top: 0; }
.card p { margin-bottom: 1rem; }

form { max-width: 44rem; }
fieldset { margin: 1.5rem 0; padding: 1rem; border: 2px solid var(--line); border-radius: .5rem; }
legend { padding: 0 .35rem; font-weight: 800; }
.choice-list { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.choice-list.vertical { flex-direction: column; }
.choice-list label { display: flex; align-items: flex-start; gap: .45rem; }
input[type="radio"], input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: .25rem; }
input[type="range"] { width: min(100%, 28rem); min-height: 2.5rem; }
.field { margin: 1.25rem 0; }
.field > label { display: block; margin-bottom: .35rem; font-weight: 800; }
select, textarea, input[type="text"] {
  width: 100%;
  padding: .7rem;
  background: var(--surface);
  border: 2px solid var(--muted);
  border-radius: .4rem;
}
textarea { resize: vertical; }
.hint { color: var(--muted); font-size: .92rem; }

.session-status { display: flex; flex-wrap: wrap; gap: .75rem 2rem; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; }
.session-status p { margin: 0; }
.prompt { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--sky); border: 2px solid var(--blue-dark); border-radius: .5rem; }
.prompt h3 { margin: 0 0 .5rem; }
#passage-text { margin: 0; white-space: pre-wrap; }
progress { width: 100%; height: 1rem; margin-top: 1rem; accent-color: var(--purple); }
.current-words { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--surface); border: 2px solid var(--line); border-radius: .5rem; }
.current-words h3 { margin: 0 0 .35rem; }
#current-words-text { font-size: 1.15rem; font-weight: 700; }
.result-summary { padding: 1rem; background: var(--sky); border-left: .5rem solid var(--blue); font-size: 1.1rem; }
.download-panel { margin: 2rem 0; padding: 1.25rem; background: linear-gradient(135deg, #ecfeff, #eef2ff, #fdf2f8); border: 2px solid var(--purple); border-radius: .8rem; }
.download-panel h3 { margin-top: 0; }
.lesson-intro { padding: clamp(1rem, 4vw, 2rem); background: linear-gradient(145deg, #fff, #eef2ff); border-left: .6rem solid var(--purple); border-radius: .8rem; box-shadow: 0 14px 38px #312e8120; }

.history-list { padding: 0; list-style: none; }
.history-list li { margin: .75rem 0; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; }
.history-list p { margin: .15rem 0; }
.prose { max-width: 48rem; }

footer { padding: 1.5rem 1rem; color: #fff; background: var(--navy); text-align: center; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 40rem) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .nav-list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .nav-list button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .card:hover { transform: none; }
}

@media (forced-colors: active) {
  button { border: 2px solid ButtonText; }
  .hero, .prompt, .result-summary { border: 2px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
}

body.high-contrast button { color: #fff; background: #000; border-color: #000; }
body.high-contrast .hero,
body.high-contrast .card,
body.high-contrast .stats div,
body.high-contrast .download-panel,
body.high-contrast .lesson-intro { color: #000; background: #fff; box-shadow: none; }