:root {
  color-scheme: light dark;
  --bg: oklch(1 0 0);
  --surface: oklch(0.97 0.008 110);
  --ink: oklch(0.23 0.015 110);
  --muted: oklch(0.45 0.02 110);
  --line: oklch(0.88 0.012 110);
  --line-strong: oklch(0.62 0.02 110);
  --primary: oklch(0.42 0.085 110);
  --primary-hover: oklch(0.36 0.08 110);
  --on-primary: oklch(1 0 0);
  --tint: oklch(0.94 0.04 110);
  --seed: oklch(0.75 0.09 110);
  --flag: oklch(0.42 0.12 330);
  --flag-tint: oklch(0.94 0.03 330);
  --good: oklch(0.42 0.11 150);
  --good-tint: oklch(0.95 0.04 150);
  --bad: oklch(0.48 0.16 28);
  --bad-tint: oklch(0.95 0.03 28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.17 0.006 110);
    --surface: oklch(0.21 0.008 110);
    --ink: oklch(0.94 0.008 110);
    --muted: oklch(0.73 0.015 110);
    --line: oklch(0.32 0.01 110);
    --line-strong: oklch(0.52 0.015 110);
    --primary: oklch(0.75 0.09 110);
    --primary-hover: oklch(0.81 0.09 110);
    --on-primary: oklch(0.18 0.02 110);
    --tint: oklch(0.29 0.04 110);
    --flag: oklch(0.78 0.11 330);
    --flag-tint: oklch(0.29 0.04 330);
    --good: oklch(0.78 0.12 150);
    --good-tint: oklch(0.27 0.04 150);
    --bad: oklch(0.75 0.13 28);
    --bad-tint: oklch(0.28 0.05 28);
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums; }
main { outline: none; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--flag); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--bg); padding: 4px 8px; z-index: 30; }

/* top bar */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 10px max(16px, calc((100vw - 880px) / 2)); border-bottom: 1px solid var(--line); }
.top:empty { display: none; }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
.nav { display: flex; gap: 2px; }
.nav a { padding: 4px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; transition: background 180ms var(--ease), color 180ms var(--ease); }
.nav a:hover { background: var(--surface); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--tint); color: var(--ink); font-weight: 600; }
.countdown { margin-left: auto; color: var(--muted); font-size: 0.88rem; }

/* pages */
.page { max-width: 880px; margin: 0 auto; padding: 32px 16px 72px; display: grid; gap: 28px; }
.prose { max-width: 68ch; display: grid; gap: 14px; }
.intro { display: grid; gap: 10px; }
.intro .note { max-width: 68ch; }

/* buttons */
button, .btn { font: inherit; color: inherit; cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); text-decoration: none; font-weight: 600; transition: background 180ms var(--ease), border-color 180ms var(--ease); }
.btn:hover { background: var(--surface); color: var(--ink); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn.quiet { border-color: transparent; background: none; color: var(--muted); font-weight: 500; }
.btn.quiet:hover { background: var(--surface); color: var(--ink); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn[aria-pressed="true"] { background: var(--flag-tint); border-color: var(--flag); color: var(--flag); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* routine */
.routine { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.routine li { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.routine .why { grid-column: 2 / 4; font-size: 0.88rem; color: var(--muted); max-width: 62ch; }
.routine .title { font-weight: 600; color: var(--ink); text-decoration: none; }
.routine a.title:hover { text-decoration: underline; }
.routine .meta { color: var(--muted); font-size: 0.88rem; white-space: nowrap; }
.routine li.next { background: var(--tint); margin: 0 -12px; padding-inline: 12px; border-radius: 8px; border-bottom-color: transparent; }
.tick { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; }
.tick.done { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tick.skip { border-style: dashed; color: var(--muted); }
.tick.active { border-color: var(--primary); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 10px var(--primary); }
.notice { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px; max-width: 68ch; }
.bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--seed); border-radius: 3px; transition: width 240ms var(--ease); }

/* plain tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
th, td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); }
td.num, th.num { text-align: right; padding-right: 0; padding-left: 12px; }

/* rich text */
.rich { display: grid; gap: 13px; max-width: 68ch; }
.rich ul, .rich ol { margin: 0; padding-left: 1.2em; display: grid; gap: 5px; }
.formula { white-space: pre-wrap; padding: 9px 12px; background: var(--surface); border-radius: 6px; font-weight: 600; overflow-x: auto; }
.example { border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px; display: grid; gap: 8px; }
.example ol { padding-left: 1.3em; }
.demo { border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 12px; overflow-x: auto; max-width: none; }

/* test shell */
.exam { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.exam-head { position: sticky; top: 0; z-index: 10; background: var(--bg); display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.exam-head .name { font-weight: 600; }
.clock { margin-left: auto; font-size: 1.15rem; font-weight: 700; }
.clock.low { color: var(--bad); }
.exam-body { padding: 24px 16px 40px; max-width: 1120px; width: 100%; margin: 0 auto; display: grid; gap: 22px; align-content: start; }
.exam-foot { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.exam-foot .spacer { flex: 1; }
.progress { display: flex; flex-wrap: wrap; gap: 4px; }
.progress button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-size: 0.8rem; position: relative; }
.progress button.answered { background: var(--tint); border-color: var(--seed); }
.progress button.current { border-color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--ink); }
.progress button.flagged::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--flag); }
.progress button.right { background: var(--good-tint); border-color: var(--good); }
.progress button.wrong { background: var(--bad-tint); border-color: var(--bad); }

.q-title { font-size: 1.05rem; font-weight: 600; max-width: 68ch; }
.choices { display: grid; gap: 8px; max-width: 68ch; }
.choice { display: flex; gap: 12px; text-align: left; align-items: baseline; width: 100%; min-height: 44px; padding: 9px 12px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px; transition: background 150ms var(--ease), border-color 150ms var(--ease); }
.choice:hover:not(:disabled) { background: var(--surface); }
.choice .key { font-weight: 700; color: var(--muted); flex: none; }
.choice.selected { background: var(--tint); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.choice.right { background: var(--good-tint); border-color: var(--good); }
.choice.wrong { background: var(--bad-tint); border-color: var(--bad); }
.choice:disabled { cursor: default; color: inherit; }

.feedback { padding: 13px 14px; border-radius: 8px; max-width: 68ch; display: grid; gap: 4px; }
.feedback.right { background: var(--good-tint); }
.feedback.wrong { background: var(--bad-tint); }
.feedback strong.r { color: var(--good); }
.feedback strong.w { color: var(--bad); }

/* matrix, always on white */
.matrix { display: block; width: 100%; aspect-ratio: 1; background: oklch(1 0 0); border: 1px solid oklch(0.45 0.01 110); border-radius: 3px; }
.matrix .grid { stroke: oklch(0.8 0.005 110); stroke-width: 0.7; fill: none; }
.matrix .fig { stroke: oklch(0.15 0 0); stroke-width: 1.3; stroke-linejoin: round; }
.c-black { fill: oklch(0.18 0 0); } .c-white { fill: oklch(1 0 0); } .c-pink { fill: oklch(0.72 0.17 350); } .c-yellow { fill: oklch(0.9 0.17 100); }
.c-green { fill: oklch(0.62 0.16 150); } .c-orange { fill: oklch(0.72 0.17 55); } .c-blue { fill: oklch(0.58 0.15 250); }
.seq { display: grid; gap: 18px; max-width: 980px; }
.frames, .slots { display: grid; gap: 12px; }
.frames { grid-template-columns: repeat(6, 1fr); }
.slots { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.frame-label { font-size: 0.8rem; color: var(--muted); margin-bottom: 3px; }
.slot-empty { display: grid; place-items: center; aspect-ratio: 1; border: 1.5px dashed var(--line-strong); border-radius: 3px; font-size: 1.5rem; font-weight: 700; color: var(--muted); }
.slot-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mat-choice { padding: 5px; border: 1.5px solid var(--line); background: var(--bg); border-radius: 6px; width: 100%; display: block; transition: border-color 150ms var(--ease); }
.mat-choice:hover:not(:disabled) { border-color: var(--line-strong); }
.mat-choice.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.mat-choice.right { border-color: var(--good); box-shadow: 0 0 0 2px var(--good); }
.mat-choice.wrong { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad); }
.mat-choice:disabled { cursor: default; }

/* latin */
.latin-wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.latin { display: grid; grid-template-columns: repeat(5, 54px); grid-auto-rows: 54px; border: 2px solid var(--ink); width: max-content; }
.latin div { display: grid; place-items: center; border: 1px solid var(--line-strong); font-weight: 700; font-size: 1.15rem; background: oklch(1 0 0); color: oklch(0.2 0 0); }
.latin .target { color: oklch(0.5 0.2 28); font-size: 1.5rem; background: oklch(0.96 0.03 28); }
.latin-opts { display: grid; gap: 6px; }
.latin-opts .choice { width: 56px; justify-content: center; }

/* equations */
.eq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 1.2rem; font-weight: 600; }
.letters { display: flex; flex-wrap: wrap; gap: 14px; }
.letters label { display: flex; align-items: center; gap: 7px; font-weight: 700; }
input[type="text"], input[type="number"], textarea, select { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px; padding: 7px 10px; }
.letters input { width: 66px; text-align: center; }
input.big { width: 150px; font-size: 1.25rem; }
.mental-prompt { font-size: 1.9rem; font-weight: 700; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { appearance: none; margin: 0; }
input[type="number"] { appearance: textfield; }

/* reading */
.reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.passage { position: sticky; top: 62px; max-height: calc(100dvh - 140px); overflow-y: auto; padding-right: 14px; display: grid; gap: 12px; }
.q-side { display: grid; gap: 16px; }

/* forms */
.form { display: grid; gap: 18px; max-width: 60ch; }
.field { display: grid; gap: 5px; }
.field label, .field legend { font-weight: 600; }
.field textarea { min-height: 76px; width: 100%; }
fieldset { border: 0; padding: 0; margin: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.radios label { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; font-weight: 500; }
.radios label:has(input:checked) { background: var(--tint); border-color: var(--primary); }
.practice-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.practice-row .field select { min-width: 150px; }

.review-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.review-item > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.review-item > summary::before { content: "▸"; color: var(--muted); }
.review-item[open] > summary::before { content: "▾"; }
.review-item[open] > summary { margin-bottom: 12px; }
.review-item > p { margin-top: 12px; }
.badge { display: inline-block; padding: 0 7px; border-radius: 5px; font-size: 0.82rem; font-weight: 600; }
.badge.right { background: var(--good-tint); color: var(--good); }
.badge.wrong { background: var(--bad-tint); color: var(--bad); }
.badge.none { background: var(--surface); color: var(--muted); }
.mini { max-width: 360px; }

.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: 8px; z-index: 20; animation: rise 220ms var(--ease); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

@media (max-width: 860px) {
  .reading { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .passage { position: static; max-height: none; padding-right: 0; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.55rem; }
  .frames { grid-template-columns: repeat(3, 1fr); }
  .slots { grid-template-columns: 1fr; }
  .exam-foot { padding: 8px 12px; gap: 6px; }
  .exam-foot .spacer { display: none; }
  .exam-foot .btn { padding: 6px 10px; min-height: 38px; font-size: 0.9rem; }
  .progress { order: -1; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .progress button { flex: none; }
  .latin { grid-template-columns: repeat(5, 46px); grid-auto-rows: 46px; }
  .countdown { margin-left: 0; width: 100%; }
  .routine .meta { grid-column: 2; grid-row: 2; }
  .routine .why { grid-column: 2 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}