:root {
  color-scheme: light;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  --page: #f4f2e9;
  --surface: #fff;
  --surface-subtle: #f8faf4;
  --ink: #1c291d;
  --muted: #4f6150;
  --link: #265b37;
  --link-hover: #183f27;
  --focus: #236d48;
  --border: #d5dbce;
  --divider: #e5e9df;
  --input-border: #82917f;
  --track: #dce5d7;
  --fill: #4e8749;
  --value: #2e6336;
  --choice: #fafcf8;
  --choice-border: #82917f;
  --choice-active: #ecf7dc;
  --choice-active-border: #478f58;
  --empty-border: #b7cdae;
  --pill: #dfedb9;
  --correct: #e8f4d9;
  --correct-border: #add08f;
  --incorrect: #fff0e6;
  --incorrect-border: #e9b996;
  --score-surface: #fffdf3;
  --score-border: #e6d59d;
  --score-ink: #735122;
  --score-fill: #ba792e;
  --action: #c1e96c;
  --action-hover: #b4df59;
  --action-active: #a7d54f;
  --action-border: #719844;
  --on-action: #1c291d;
  --quest-fill: #52894d;
  --quest-complete: #7a481c;
  --quest-complete-fill: #bd792d;
  --readiness: #f8faf3;
  --readiness-border: #d3dfc3;
  --readiness-ready: #e8f4dc;
  --readiness-ready-border: #85b364;
  --save-surface: #f7fbe9;
  --save-border: #b6c89f;
  --flame-shadow-1: #f88d2e;
  --flame-shadow-2: #f58820;
  --flame-shadow-3: #ff7c21;
  color: var(--ink);
  background: var(--page);
}
@supports (color: light-dark(black, white)) {
  :root {
    color-scheme: light dark;
    --page: light-dark(#f4f2e9, #111712);
    --surface: light-dark(#fff, #1a231b);
    --surface-subtle: light-dark(#f8faf4, #171f18);
    --ink: light-dark(#1c291d, #edf4e9);
    --muted: light-dark(#4f6150, #b7c5b4);
    --link: light-dark(#265b37, #9bd9a7);
    --link-hover: light-dark(#183f27, #c1ebc8);
    --focus: light-dark(#236d48, #82d19b);
    --border: light-dark(#d5dbce, #3b493b);
    --divider: light-dark(#e5e9df, #303d31);
    --input-border: light-dark(#82917f, #718171);
    --track: light-dark(#dce5d7, #334134);
    --fill: light-dark(#4e8749, #7fbd78);
    --value: light-dark(#2e6336, #9bd9a7);
    --choice: light-dark(#fafcf8, #182219);
    --choice-border: light-dark(#82917f, #718171);
    --choice-active: light-dark(#ecf7dc, #253a26);
    --choice-active-border: light-dark(#478f58, #73bd7f);
    --empty-border: light-dark(#b7cdae, #587159);
    --pill: light-dark(#dfedb9, #35482c);
    --correct: light-dark(#e8f4d9, #20351f);
    --correct-border: light-dark(#add08f, #628f58);
    --incorrect: light-dark(#fff0e6, #37261f);
    --incorrect-border: light-dark(#e9b996, #a66f55);
    --score-surface: light-dark(#fffdf3, #29251a);
    --score-border: light-dark(#e6d59d, #746335);
    --score-ink: light-dark(#735122, #f1cf8c);
    --score-fill: light-dark(#ba792e, #d59a4c);
    --action: light-dark(#c1e96c, #b5dd68);
    --action-hover: light-dark(#b4df59, #c5ea7d);
    --action-active: light-dark(#a7d54f, #a6cf59);
    --action-border: light-dark(#719844, #7ea34a);
    --on-action: light-dark(#1c291d, #182014);
    --quest-fill: light-dark(#52894d, #89c681);
    --quest-complete: light-dark(#7a481c, #f0b56f);
    --quest-complete-fill: light-dark(#bd792d, #d59a4c);
    --readiness: light-dark(#f8faf3, #182119);
    --readiness-border: light-dark(#d3dfc3, #435243);
    --readiness-ready: light-dark(#e8f4dc, #20341d);
    --readiness-ready-border: light-dark(#85b364, #628e54);
    --save-surface: light-dark(#f7fbe9, #202719);
    --save-border: light-dark(#b6c89f, #526747);
    --flame-shadow-1: light-dark(#f88d2e, #ffad5c);
    --flame-shadow-2: light-dark(#f58820, #ffa449);
    --flame-shadow-3: light-dark(#ff7c21, #ff9a45);
  }
}
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 760px; margin: 0 auto; padding: 24px 20px 64px; }
p { margin: 0 0 16px; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 10; padding: 8px 12px; background: var(--surface); border: 2px solid var(--focus); border-radius: 8px; }
.skip-link:focus { top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2 { text-wrap: balance; }

button, input { font: inherit; }
button { background: var(--action); color: var(--on-action); border: 1px solid var(--action-border); border-radius: 8px; font-weight: 700; min-height: 48px; padding: 10px 18px; cursor: pointer; }
button:hover { background: var(--action-hover); }
button:active { background: var(--action-active); }
form, details, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin: 16px 0; }
form > button { margin-top: 4px; }
input[type=number] { min-height: 48px; max-width: 140px; padding: 9px 12px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--surface); color: inherit; }
input[type=radio], input[type=checkbox] { width: 20px; height: 20px; flex: none; accent-color: var(--fill); }
fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
legend { font-weight: 750; font-size: clamp(1.2rem, 3.5vw, 1.55rem); line-height: 1.35; padding: 0 0 14px; }
fieldset ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
fieldset li { margin: 0; }
fieldset li label { display: flex; align-items: center; gap: 12px; border: 1px solid var(--choice-border); background: var(--choice); border-radius: 8px; padding: 13px 14px; min-height: 54px; cursor: pointer; }
fieldset li label:hover, fieldset li label:has(input:checked), fieldset li label:focus-within { border-color: var(--choice-active-border); background: var(--choice-active); }
details { padding: 0; margin: 12px 0; }
summary { cursor: pointer; font-weight: 700; padding: 14px 18px; min-height: 48px; }
details ul { padding: 0 18px 16px 38px; margin: 0; }
.empty-state { border-color: var(--empty-border); }
.empty-state p { font-size: 1.05rem; margin-bottom: 8px; }
.empty-state a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
/* Shared composition for figures on both the results page and session summary. */
.panel > h2 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 12px; }
.panel > .meta { margin: 12px 0 0; }
.fact-grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.fact-grid > div { min-width: 0; padding: 11px 0; border-top: 1px solid var(--divider); }
.fact-grid dt { color: var(--muted); font-size: .87rem; }
.fact-grid dd { margin: 2px 0 0; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; font-variant-numeric: tabular-nums; }
.fact-grid dd strong { font-size: 1.2rem; }
.panel > .fact-grid + .meta { margin-top: 12px; }
.achievement-highlights ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.achievement-highlights li { min-width: 0; margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); }
.achievement-highlights li strong, .achievement-highlights li span { display: block; }
.achievement-highlights li span { color: var(--muted); font-size: .87rem; line-height: 1.35; }
.run-list { list-style: none; padding: 0; margin: 0; }
.panel details .run-list { padding: 0 14px 12px; }
.run-list li { margin: 0; padding: 8px 0; border-top: 1px solid var(--divider); }
.run-list li:first-child { border-top: 0; }
.run-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.run-summary a { min-width: 0; }
.run-summary strong, .category-group strong { flex: none; font-variant-numeric: tabular-nums; color: var(--value); }
.run-list .meta { display: block; line-height: 1.35; }
.category-group h3 { font-size: .92rem; font-weight: 700; line-height: 1.3; color: var(--muted); margin: 16px 0 4px; }
.category-group:first-of-type h3 { margin-top: 0; }
.category-group ul { list-style: none; padding: 0; margin: 0; }
.category-group li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 7px 0; border-top: 1px solid var(--divider); }
.category-group li span { min-width: 0; overflow-wrap: anywhere; }
.test-list { list-style: none; padding: 4px 18px 16px; }
.test-list li { margin: 0; }
.test-list a { display: flex; align-items: center; min-height: 44px; padding: 5px 8px; border-bottom: 1px solid var(--divider); }
.test-list.practice, .test-list.exam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.test-overview .test-name { font-size: clamp(1.2rem, 4vw, 1.5rem); line-height: 1.3; margin-bottom: 14px; text-wrap: balance; }
.test-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
.test-facts li { margin: 0; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); }
.test-overview .meta { margin-bottom: 12px; }
.test-overview .start-form { border: 0; background: transparent; padding: 0; margin: 0; }
.test-overview .start-form button { width: 100%; }
li { margin: 4px 0; }
li a { display: inline-block; padding: 7px 0; min-height: 40px; }
ul { padding-left: 22px; overflow-wrap: anywhere; }
.pill { display: inline-block; background: var(--pill); border-radius: 99px; padding: 3px 9px; font-size: .85rem; font-weight: 700; }
.links { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0; }
.links a { min-height: 44px; display: inline-flex; align-items: center; }
.meta { color: var(--muted); font-size: .9rem; }

/* Keep the native progress element and its accessible value, but style both engines. */
progress[value] { display: block; width: 100%; height: 10px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; overflow: hidden; background: var(--track); color: var(--fill); margin: -6px 0 18px; }
progress[value]::-webkit-progress-bar { background: var(--track); border-radius: 999px; }
progress[value]::-webkit-progress-value { background: var(--fill); border-radius: 999px; }
progress[value]::-moz-progress-bar { background: var(--fill); border-radius: 999px; }
.progress-strip { display: flex; gap: 8px 22px; flex-wrap: wrap; align-items: center; font-weight: 650; font-size: .9rem; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.progress-strip > span:first-child { color: var(--value); }
.run-progress { margin-bottom: 12px; }
.daily-quest { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; font-size: .84rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quest-pips { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; flex: 1; max-width: 180px; }
.quest-pips span { display: block; height: 9px; border-radius: 3px; background: var(--track); }
.quest-pips .lit { background: var(--quest-fill); }
.quest-pips .new { animation: quest-pop .34s cubic-bezier(.2, 1.2, .4, 1) both; }
.daily-quest.complete { color: var(--quest-complete); }
.daily-quest.complete .quest-pips .lit { background: var(--quest-complete-fill); }
@keyframes quest-pop { from { transform: scale(.55); } to { transform: scale(1); } }
.question-form li label { transition: transform .12s ease-out, border-color .12s ease-out, background-color .12s ease-out; }
.question-form li label:active { transform: scale(.985); }
.question-form li label:has(input:checked) { box-shadow: inset 4px 0 var(--choice-active-border); }
.question-form > button { transition: transform .12s ease-out; }
.question-form > button:active { transform: translateY(2px) scale(.985); }
.run-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.run-head .meta { margin: 0; }
.end-inline { padding: 0; margin: 0; border: 0; background: transparent; }
.end-inline button { width: auto; background: none; border: 0; border-radius: 0; color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-weight: 400; font-size: 1rem; padding: 7px 0; min-height: 44px; white-space: nowrap; }
.end-inline button:hover { background: none; color: var(--link-hover); }
.last-result { border-radius: 8px; padding: 10px 14px; margin: 12px 0; font-size: .9rem; }
p.last-result { background: var(--correct); border: 1px solid var(--correct-border); }
details.last-result { background: var(--incorrect); border: 1px solid var(--incorrect-border); }
.last-result summary { padding: 0; min-height: 0; }
.last-result p { margin: 8px 0 0; }

/* Score is the one exceptional block; the other sections reuse panel, fact-grid and category-group. */
.session-hero { background: var(--score-surface); border-color: var(--score-border); animation: session-arrive .55s ease-out both; }
.result-page .panel { margin: 0 0 12px; }
.result-kicker { color: var(--score-ink); font-size: .9rem; font-weight: 700; margin: 0 0 6px; }
.result-score { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; font-size: 1.2rem; font-weight: 500; line-height: 1.15; margin: 0 0 14px; }
.result-score strong { font-size: clamp(2.5rem, 9vw, 3.75rem); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.result-score strong span { font-size: .55em; color: var(--score-ink); letter-spacing: 0; }
.session-hero progress { --fill: var(--score-fill); height: 12px; margin: 0 0 12px; }
.result-recap { font-weight: 650; margin: 0; }
.session-hero .meta { margin: 5px 0 0; }
.result-page .fact-grid dd { font-size: 1.2rem; }
.primary-action { margin: 18px 0; }
.primary-action a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--action-border); background: var(--action); color: var(--on-action); font-weight: 700; text-decoration: none; text-align: center; }
.primary-action a:hover { background: var(--action-hover); }
.today-progress { margin: 18px 0; }
.today-progress h2 { font-size: 1.1rem; margin: 0 0 8px; }
.today-progress .progress-strip { margin-bottom: 10px; }
.today-progress progress { margin: 0; }
.save-prompt .panel { padding: 14px 18px; }
.save-prompt .panel > h2 { margin-bottom: 6px; }
.save-prompt .panel p { font-size: .9rem; margin: 0 0 6px; }
.result-page > .links { margin: 8px 0; }
.readiness { border: 1px solid var(--readiness-border); border-radius: 12px; background: var(--readiness); padding: 16px; margin: 16px 0; }
.readiness.ready { background: var(--readiness-ready); border-color: var(--readiness-ready-border); animation: session-arrive .55s ease-out both; }
.readiness h2 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 8px; }
.readiness p { margin: 0 0 12px; }
.readiness > h2 + p strong { display: block; color: var(--value); font-size: clamp(1.45rem, 5vw, 1.8rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
.readiness .meta { margin: 10px 0 0; }
.readiness > details { background: transparent; border: 0; border-top: 1px solid var(--readiness-border); border-radius: 0; margin: 14px 0 0; }
.readiness > details summary { min-height: 40px; padding: 12px 0 0; color: var(--link); font-size: .92rem; }
.readiness > details[open] summary { padding-bottom: 10px; }
.readiness > details p { color: var(--muted); font-size: .9rem; margin: 0 0 10px; }
.readiness > details p:last-child { margin-bottom: 0; }
.milestones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.milestone-row { font-size: .92rem; font-variant-numeric: tabular-nums; }
.milestone-row progress { height: 8px; margin: 2px 0 3px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0 20px; }
.stat-tile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; min-width: 0; }
.stat-tile strong { font-size: 1.5rem; line-height: 1.2; color: var(--value); font-variant-numeric: tabular-nums; }
.stat-tile span { font-size: .9rem; line-height: 1.3; }
@keyframes session-arrive { from { transform: translateY(8px); } to { transform: translateY(0); } }

.art-credit { font-size: .75rem; color: var(--muted); margin-top: 32px; }
.art-credit a { color: inherit; }
.streak-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.streak-flame { display: inline-block; width: 20px; height: 20px; flex: none; background: url('/streak-fire.gif') center/contain no-repeat; image-rendering: pixelated; }
.streak-tier-0 { background-image: url('/streak-fire-still.png'); background-size: 300% 300%; background-position: 0 0; filter: grayscale(1) opacity(.6); }
.streak-tier-1 { filter: brightness(.85); }
.streak-tier-2 { width: 25px; height: 25px; }
.streak-tier-3, .streak-tier-4, .streak-tier-5 { background-image: url('/streak-fire-large.gif'); }
.streak-tier-3 { width: 36px; height: 36px; filter: drop-shadow(0 0 3px var(--flame-shadow-1)); }
.streak-tier-4 { width: 42px; height: 42px; filter: brightness(1.15) drop-shadow(0 0 5px var(--flame-shadow-2)); }
.streak-tier-5 { width: 48px; height: 48px; filter: brightness(1.3) drop-shadow(0 0 7px var(--flame-shadow-3)); }
@media (max-width: 520px) {
  main { padding: 16px 14px 48px; }
  form, .panel { padding: 16px; margin: 12px 0; }
  button { width: 100%; }
  fieldset li label { padding: 14px 12px; min-height: 56px; }
  summary { padding: 14px; }
  .links { gap: 12px; }
  input[type=number] { max-width: 100%; width: 100%; margin: 8px 0; }
}
@media (min-width: 620px) { .test-list.practice, .test-list.exam { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 450px) {
  .milestones { grid-template-columns: 1fr; }
  .fact-grid { gap: 0 12px; }
  .achievement-highlights ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .session-hero, .readiness.ready, .quest-pips .new { animation: none; }
  .question-form li label, .question-form > button { transition: none; }
  .streak-flame { background-image: url('/streak-fire-still.png'); background-size: 300% 300%; background-position: 0 0; }
  .streak-tier-3, .streak-tier-4, .streak-tier-5 { background-image: url('/streak-fire-large-still.png'); }
}