/* Notifly foundations, adapted to the study app. */
:root {
  color-scheme: light;
  --bg:#f3f6f5; --surface:#fff; --ink:#171717; --strong:#171717;
  --muted:#5a6864; --border:#d6e0dc; --accent:#166b5f; --accent-soft:#ddeeea;
  --selected:#c8f7d4; --green:#18864b; --green-soft:#ecfdf5;
  --red:#c24132; --red-soft:#fef2f2; --amber:#b7791f; --amber-soft:#fffbeb;
  --radius:13.6px; --radius-control:9.6px; --radius-button:7.6px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none; font-size:14px;
}
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:var(--bg); color:var(--ink); display:flex; flex-direction:column; line-height:24px; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:not-allowed; opacity:.5; }
a { color:var(--accent); text-underline-offset:3px; overflow-wrap:anywhere; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { color:var(--strong); font-weight:600; }
h1 { font-size:30px; line-height:36px; letter-spacing:-.6px; margin-bottom:12px; }
h2 { font-size:24px; line-height:32px; }
h3 { font-size:16px; line-height:24px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:20px; top:-100px; background:var(--surface); padding:12px 16px; border:1px solid var(--accent); border-radius:var(--radius-button); z-index:50; }
.skip-link:focus { top:12px; }

/* Shared shell */
.site-header { min-height:72px; flex-shrink:0; background:var(--surface); border-bottom:1px solid var(--border); padding:12px max(32px,calc((100vw - 1200px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:12px; color:var(--strong); text-decoration:none; font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.5px; }
.brand svg { width:32px; height:32px; color:var(--accent); }
.text-button { border:0; background:transparent; color:var(--accent); padding:8px 0; font-size:14px; line-height:20px; font-weight:500; border-radius:2px; }
.text-button:hover { text-decoration:underline; text-underline-offset:4px; }
.header-home { min-height:40px; }
main { flex:1; width:calc(100% - 64px); max-width:1200px; margin:0 auto; padding:40px 0 48px; outline:0; }
.page-heading { margin-bottom:32px; max-width:1000px; }
.breadcrumb { font-size:12px; line-height:18px; color:var(--muted); margin-bottom:12px; }
.breadcrumb span { padding:0 8px; color:var(--border); }
.page-subtitle { color:var(--muted); font-size:14px; line-height:24px; margin:0; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.site-footer { background:var(--surface); border-top:1px solid var(--border); padding:20px max(32px,calc((100vw - 1200px)/2)); display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:12px; line-height:18px; }

/* Notifly button states: unchanged fill, hard shadow and lift. */
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:9px 16px; border:1px solid var(--ink); border-radius:var(--radius-button); font-size:14px; line-height:20px; font-weight:500; text-decoration:none; text-align:center; box-shadow:0 2px 0 var(--ink); transition:transform .15s ease,box-shadow .15s ease; }
.primary { color:var(--surface); background:var(--accent); }
.secondary { background:var(--surface); color:var(--ink); }
@media(hover:hover) { .button:not(:disabled):hover { transform:translate(-4px,-4px); box-shadow:6px 6px 0 var(--ink); } }
.button:not(:disabled):active { transform:none; box-shadow:0 1px 0 var(--ink); }
.full { width:100%; }

/* Setup */
.home-heading { max-width:960px; margin:8px auto 32px; }
.home-heading h1 { font-size:40px; line-height:44px; letter-spacing:-1px; }
.setup-layout { max-width:960px; margin:0 auto; }
.setup-panel { padding:32px; }
.form-label { display:block; color:var(--strong); font-size:14px; line-height:20px; font-weight:500; margin-bottom:12px; }
.subject-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:32px; }
.subject-choice:last-child:nth-child(odd) { grid-column:1 / -1; }
.subject-choice { display:flex; align-items:center; gap:16px; text-align:left; padding:20px; min-height:100px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--ink); transition:border-color .15s ease; }
.subject-choice:hover { border-color:var(--accent); }
.subject-choice[aria-pressed=true] { background:var(--accent-soft); border-color:var(--accent); }
.subject-symbol { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface); color:var(--accent); font-size:16px; line-height:24px; font-weight:600; flex-shrink:0; }
.subject-choice strong { display:block; font-size:16px; line-height:24px; font-weight:600; }
.subject-choice small { display:block; color:var(--muted); font-size:12px; line-height:18px; margin-top:4px; }
.form-row { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px; margin-bottom:24px; }
.select { min-width:0; width:100%; }
.select-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:40px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface); padding:7px 12px; color:var(--ink); font-size:14px; line-height:24px; text-align:left; }
.select-trigger:hover,.select-trigger[aria-expanded=true] { border-color:var(--accent); }
.select-trigger[aria-expanded=true] { outline:2px solid var(--accent); outline-offset:4px; }
.select-value { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.select-chevron { flex-shrink:0; line-height:20px; transition:transform .15s; }
.select-trigger[aria-expanded=true] .select-chevron { transform:rotate(180deg); }
.select-menu { position:fixed; z-index:40; overflow-y:auto; overscroll-behavior:contain; padding:4px; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:var(--radius-control); box-shadow:0 4px 16px #17171714; scrollbar-width:thin; }
.select-option { display:flex; align-items:flex-start; gap:8px; padding:8px; min-height:40px; border-radius:var(--radius-button); font-size:14px; line-height:24px; cursor:pointer; overflow-wrap:anywhere; }
.select-option.active { background:var(--bg); }
.select-option[aria-selected=true] { color:var(--accent); background:var(--accent-soft); font-weight:500; }
.select-check { width:20px; flex-shrink:0; text-align:center; }
.choice-group { display:flex; gap:4px; padding:4px; border-radius:var(--radius-control); background:var(--bg); min-height:44px; }
.count-choice { flex:1; min-width:0; border:0; border-radius:var(--radius-button); background:transparent; min-height:36px; padding:6px 8px; color:var(--muted); font-size:14px; line-height:20px; font-weight:500; }
.count-choice[aria-pressed=true] { background:var(--surface); color:var(--ink); }
.toggle-row { display:flex; gap:16px 24px; flex-wrap:wrap; margin-bottom:32px; }
.check-label { display:flex; align-items:center; gap:8px; font-size:14px; line-height:20px; cursor:pointer; }
.check-label input { appearance:none; -webkit-appearance:none; display:grid; place-content:center; width:24px; height:24px; margin:0; flex-shrink:0; border:1px solid var(--border); border-radius:var(--radius-button); background:var(--surface); cursor:pointer; }
.check-label input:checked { background:var(--accent); border-color:var(--accent); }
.check-label input:checked::before { content:"✓"; color:var(--surface); font-size:14px; line-height:20px; font-weight:500; }
.setup-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px 24px; padding-top:24px; border-top:1px solid var(--border); }
.pool-note { color:var(--muted); font-size:12px; line-height:18px; margin:0; }
.study-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.data-note { font-size:12px; line-height:20px; color:var(--muted); margin:20px 0; }
.data-note summary { cursor:pointer; width:fit-content; color:var(--muted); font-weight:500; }
.data-note[open] summary { color:var(--ink); margin-bottom:12px; }
.data-note p { margin:8px 0 0; }
.resume-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; margin-bottom:20px; background:var(--surface); border-color:var(--accent); }
.resume-banner h2 { font-size:16px; line-height:24px; margin:0 0 4px; }
.resume-banner p { font-size:14px; line-height:24px; margin:0; color:var(--muted); }
.resume-banner .button { flex-shrink:0; }
.recent { margin-top:32px; }
.recent h2 { font-size:24px; line-height:32px; margin-bottom:16px; }
.recent-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--border); }
.recent-list li { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--border); }
.recent-list strong { font-size:14px; line-height:24px; font-weight:500; }
.recent-list small { display:block; font-size:12px; line-height:18px; color:var(--muted); margin-top:4px; }
.recent-score { font-size:16px; line-height:24px; font-weight:600; white-space:nowrap; color:var(--accent); }

/* Continuous question list */
.quiz-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
.question-list { display:grid; gap:24px; min-width:0; }
.question-panel { scroll-margin-top:24px; }
.question-body { padding:24px; }
.question-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; min-height:32px; }
.question-number { font-size:14px; line-height:20px; color:var(--muted); overflow-wrap:anywhere; }
.question-number strong { color:var(--ink); font-weight:500; }
.flag-button { display:flex; align-items:center; gap:8px; font-size:12px; line-height:18px; font-weight:500; flex-shrink:0; }
.flag-button svg { width:16px; height:20px; flex-shrink:0; }
.flag-button[aria-pressed=true] { color:var(--amber); }
.question-prompt { font-size:24px; line-height:32px; font-weight:600; margin-bottom:24px; white-space:pre-wrap; overflow-wrap:anywhere; outline:0; }
.options { display:grid; gap:12px; border:0; margin:0; padding:0; min-width:0; }
.option { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--border); border-radius:var(--radius-control); padding:16px; background:var(--surface); min-height:56px; cursor:pointer; transition:border-color .15s ease,background-color .15s ease; }
.option:hover { border-color:var(--accent); }
.option:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.option input { width:20px; height:20px; accent-color:var(--accent); margin:2px 0 0; flex-shrink:0; cursor:pointer; }
.option-letter { font-weight:600; width:24px; flex-shrink:0; }
.option-text { font-size:16px; line-height:24px; white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }
.numeric-field { margin-top:8px; }
.numeric-field .form-label { margin-bottom:8px; }
.numeric-answer { display:block; width:min(100%,280px); min-height:44px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface); color:var(--ink); font-size:16px; line-height:24px; }
.numeric-answer:hover { border-color:var(--accent); }
.numeric-answer[aria-invalid=true] { border-color:var(--red); }
.numeric-hint,.numeric-error { font-size:12px; line-height:20px; margin:8px 0 0; }
.numeric-hint { color:var(--muted); }
.numeric-error { color:var(--red); }
.question-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 24px; border-top:1px solid var(--border); }
.context { padding:16px; border:1px solid var(--border); border-left:3px solid var(--accent); background:var(--bg); border-radius:0 var(--radius-button) var(--radius-button) 0; margin-bottom:24px; font-size:14px; line-height:24px; white-space:pre-wrap; overflow-wrap:anywhere; }
.context-table-wrap { width:100%; overflow-x:auto; margin-bottom:24px; }
.context-table { width:100%; border-collapse:collapse; font-size:12px; line-height:18px; text-align:center; }
.context-table caption { text-align:left; color:var(--muted); margin-bottom:8px; }
.context-table th,.context-table td { padding:10px 8px; border:1px solid var(--border); font-weight:400; }
.context-table thead { background:var(--bg); }
.context-table th:first-child { text-align:left; width:40%; }
.question-image { display:block; max-width:100%; max-height:520px; width:auto; margin:20px auto 24px; object-fit:contain; border-radius:var(--radius-button); }
.image-zoom { display:block; width:fit-content; margin:-8px 0 20px; font-size:12px; line-height:20px; }
.image-error { border:1px solid #fde68a; padding:12px 16px; border-radius:var(--radius-control); background:var(--amber-soft); color:#451a03; margin:12px 0; }
.progress-panel { padding:24px; position:sticky; top:24px; }
.progress-panel h2 { font-size:16px; line-height:24px; margin-bottom:12px; }
.progress-copy { font-size:14px; line-height:24px; color:var(--muted); margin-bottom:12px; }
.progress-copy strong { color:var(--ink); font-weight:500; }
.progress-track { height:8px; background:var(--bg); border-radius:4px; overflow:hidden; margin-bottom:24px; }
.progress-fill { height:100%; background:var(--accent); border-radius:4px; transition:width .15s; }
.question-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:20px; max-height:280px; overflow-y:auto; padding:4px; }
.question-jump { position:relative; aspect-ratio:1; min-height:36px; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:var(--radius-button); font-size:14px; line-height:20px; }
.question-jump:hover { border-color:var(--accent); }
.question-jump.answered { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.question-jump.current { background:var(--accent); border-color:var(--accent); color:var(--surface); }
.question-jump.flagged::after { content:''; position:absolute; right:3px; top:3px; width:7px; height:7px; background:var(--amber); border:1px solid var(--surface); border-radius:50%; }
.legend { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:11px; line-height:16px; color:var(--muted); margin:0 0 24px; }
.legend span { display:flex; align-items:center; gap:6px; }
.legend i { display:inline-block; width:14px; height:14px; border:1px solid var(--border); border-radius:4px; }
.legend .filled { background:var(--accent-soft); border-color:var(--accent); }
.legend .flagged-dot { height:8px; width:8px; border-radius:50%; background:var(--amber); border:0; }
.submit-hint { font-size:11px; line-height:16px; text-align:center; color:var(--muted); margin:12px 0 0; }
.list-submit { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:8px 0 16px; }
.list-submit .button { flex-shrink:0; }

/* Results and answer review */
.results { max-width:1040px; margin:0 auto; }
.result-summary { padding:24px 32px; display:grid; grid-template-columns:1fr 2fr; gap:24px; align-items:center; margin-bottom:24px; }
.score-display { font-size:48px; line-height:56px; font-weight:600; letter-spacing:-1.2px; color:var(--accent); }
.score-display span { font-size:24px; line-height:32px; color:var(--muted); font-weight:400; letter-spacing:0; }
.score-caption { font-size:12px; line-height:18px; color:var(--muted); margin:8px 0 0; }
.score-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; border-left:1px solid var(--border); padding-left:32px; margin:0; }
.score-stats dt { font-size:14px; line-height:24px; color:var(--muted); }
.score-stats dd { font-size:30px; line-height:36px; font-weight:600; margin:4px 0 0; }
.score-stats .correct { color:var(--green); }
.score-stats .wrong { color:var(--red); }
.score-stats .unanswered { color:var(--muted); }
.result-actions { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.review-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; border-top:1px solid var(--border); padding-top:24px; margin:32px 0 24px; }
.review-toolbar h2 { font-size:24px; line-height:32px; margin:0; }
.review-tabs { display:flex; gap:4px; padding:4px; border-radius:var(--radius-control); background:var(--bg); }
.review-tab { border:0; background:transparent; padding:8px 12px; min-height:36px; border-radius:var(--radius-button); color:var(--muted); font-size:14px; line-height:20px; font-weight:500; }
.review-tab[aria-pressed=true] { background:var(--surface); color:var(--ink); }
.review-card { padding:24px; margin-bottom:20px; }
.review-card .question-prompt { font-size:20px; line-height:28px; margin-bottom:20px; }
.review-option { display:flex; align-items:flex-start; gap:12px; padding:12px 16px; border:1px solid var(--border); border-radius:var(--radius-control); margin-bottom:8px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:24px; }
.review-option.correct { background:var(--green-soft); border-color:#a7f3d0; }
.review-option.wrong { background:var(--red-soft); border-color:#fecaca; }
.review-option-copy { flex:1; min-width:0; }
.answer-label { display:block; font-size:12px; line-height:18px; font-weight:500; color:var(--green); margin-top:4px; }
.wrong .answer-label { color:var(--red); }
.status-label { display:inline-block; font-size:12px; line-height:18px; font-weight:500; }
.status-correct { color:var(--green); }
.status-wrong { color:var(--red); }
.status-unanswered { color:var(--muted); }
.source-note { font-size:12px; line-height:18px; color:var(--muted); margin:16px 0 0; overflow-wrap:anywhere; }

/* Full source library */
.library-list { max-width:1040px; margin:0 auto 32px; }
.library-lesson { margin-bottom:40px; }
.library-lesson>h2 { font-size:24px; line-height:32px; margin-bottom:8px; }
.library-lesson>.pool-note { margin-bottom:20px; }
.library-card { padding:24px; margin-bottom:20px; }
.library-card .question-top { margin-bottom:20px; flex-wrap:wrap; gap:8px 16px; }
.library-card .question-number { font-size:12px; line-height:18px; }
.library-card .question-prompt { font-size:20px; line-height:28px; margin-bottom:20px; }
.library-option { white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:8px; padding:12px 16px; background:var(--bg); border-radius:var(--radius-control); font-size:14px; line-height:24px; }
.review-reason { font-size:14px; line-height:24px; border:1px solid #fde68a; background:var(--amber-soft); color:#451a03; padding:12px 16px; border-radius:var(--radius-control); margin:20px 0 0; }
.source-variants { font-size:14px; line-height:24px; margin-top:20px; color:var(--muted); }
.source-variants summary { cursor:pointer; font-weight:500; }
.source-variants[open] summary { margin-bottom:12px; }
.lesson-coverage { border-collapse:collapse; width:100%; max-width:700px; margin:24px 0; font-size:12px; line-height:18px; font-variant-numeric:tabular-nums; }
.lesson-coverage caption { text-align:left; font-weight:600; margin-bottom:12px; color:var(--ink); }
.lesson-coverage th,.lesson-coverage td { padding:12px; border-bottom:1px solid var(--border); text-align:right; }
.lesson-coverage th:first-child { text-align:left; }
.lesson-coverage thead { color:var(--ink); background:var(--accent-soft); }

/* Dialogs, notices and recovery */
dialog { width:min(560px,calc(100% - 32px)); border:1px solid var(--border); padding:24px; border-radius:var(--radius); color:var(--ink); background:var(--surface); max-height:calc(100dvh - 48px); overflow-y:auto; }
dialog::backdrop { background:#17171766; }
dialog h2 { font-size:24px; line-height:32px; margin-bottom:20px; }
dialog p { color:var(--muted); font-size:14px; line-height:24px; margin-bottom:24px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:16px; padding-top:4px; padding-bottom:4px; }
.notice { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); width:max-content; max-width:min(580px,calc(100% - 32px)); background:var(--surface); border:1px solid var(--border); color:var(--ink); border-radius:var(--radius); padding:16px 20px; z-index:30; font-size:14px; line-height:24px; }
.loading,.empty-state { text-align:center; padding:80px 24px; color:var(--muted); }
.loading-dot { display:inline-block; width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.loading p { margin-top:16px; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-panel { max-width:600px; margin:48px auto; padding:40px; text-align:center; }
.error-panel p { color:var(--muted); margin-bottom:24px; }

@media(max-width:1100px) {
  .quiz-layout { grid-template-columns:minmax(0,1fr) 272px; gap:20px; }
  .progress-panel { padding:20px; }
  .question-prompt { font-size:20px; line-height:28px; }
  .question-grid { gap:6px; }
  .list-submit { flex-wrap:wrap; gap:16px; }
}
@media(max-width:800px) {
  main { width:calc(100% - 48px); padding-top:32px; }
  .site-header,.site-footer { padding-left:24px; padding-right:24px; }
  .home-heading h1 { font-size:30px; line-height:36px; letter-spacing:-.6px; }
  .quiz-layout { grid-template-columns:1fr; }
  .progress-panel { position:static; grid-row:1; }
  .question-grid { grid-template-columns:repeat(10,minmax(0,1fr)); gap:8px; max-height:160px; }
  .question-jump { min-height:40px; }
  .legend { margin-bottom:20px; }
  .progress-panel .submit-hint { text-align:left; }
  .setup-panel { padding:24px; }
  .subject-options { grid-template-columns:1fr; }
  .subject-choice { padding:16px; gap:12px; min-height:80px; }
  .subject-symbol { width:36px; height:36px; }
  .form-row { grid-template-columns:1fr; gap:20px; }
  .setup-bottom { align-items:stretch; flex-direction:column; }
  .study-actions { justify-content:flex-start; }
  .result-summary { grid-template-columns:1fr 1.7fr; padding:24px; }
  .score-stats { padding-left:24px; gap:16px; }
}
@media(max-width:540px) {
  .site-header { min-height:64px; padding:10px 20px; gap:12px; }
  .brand { font-size:20px; line-height:28px; gap:8px; }
  .brand svg { width:28px; height:28px; }
  .header-home { font-size:12px; line-height:18px; }
  main { width:calc(100% - 32px); padding:24px 0 32px; }
  .page-heading { margin-bottom:24px; }
  h1,.home-heading h1 { font-size:30px; line-height:36px; letter-spacing:-.6px; }
  .home-heading { margin-top:4px; }
  .breadcrumb { margin-bottom:8px; }
  .button { min-height:44px; padding:11px 16px; }
  .select-trigger,.select-option { min-height:44px; }
  .setup-panel { padding:20px; }
  .subject-options { gap:12px; margin-bottom:24px; }
  .subject-choice { padding:12px; min-height:80px; align-items:center; flex-direction:row; gap:12px; }
  .subject-symbol { width:32px; height:32px; font-size:14px; line-height:20px; }
  .subject-choice strong { font-size:14px; line-height:20px; }
  .subject-choice small { font-size:11px; line-height:16px; }
  .choice-group { min-height:48px; }
  .count-choice { min-height:40px; }
  .toggle-row { gap:16px; margin-bottom:24px; }
  .check-label { font-size:12px; line-height:18px; min-height:28px; }
  .setup-bottom { gap:16px; padding-top:20px; }
  .study-actions { flex-direction:column; align-items:stretch; width:100%; gap:16px; }
  .resume-banner { padding:20px; align-items:flex-start; flex-direction:column; gap:16px; }
  .resume-banner .button { width:100%; }
  .recent-list li { gap:12px; }
  .recent-score { font-size:14px; line-height:24px; }
  .question-list { gap:20px; }
  .question-panel { scroll-margin-top:16px; }
  .question-body { padding:20px 16px; }
  .question-top { gap:12px; align-items:flex-start; margin-bottom:16px; }
  .question-number { font-size:12px; line-height:20px; }
  .flag-button { font-size:11px; line-height:16px; padding:2px 0 8px; gap:6px; }
  .flag-button svg { width:14px; height:18px; }
  .question-prompt { font-size:20px; line-height:28px; margin-bottom:20px; }
  .option { gap:8px; padding:12px; min-height:56px; }
  .option-letter { width:20px; }
  .option-text { font-size:14px; line-height:24px; }
  .question-footer { padding:20px 16px; }
  .question-footer .button { flex:1; }
  .context { padding:12px; margin-bottom:20px; }
  .question-image { max-height:360px; }
  .quiz-list-layout .progress-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; padding:16px; }
  .quiz-list-layout .progress-panel h2,.quiz-list-layout .question-grid,.quiz-list-layout .legend,.quiz-list-layout .submit-hint { display:none; }
  .quiz-list-layout .progress-copy { grid-column:1; grid-row:1; margin:0; font-size:12px; line-height:18px; }
  .quiz-list-layout .progress-track { grid-column:1; grid-row:2; margin:0; height:6px; }
  .quiz-list-layout .progress-panel>.button { grid-column:2; grid-row:1 / span 2; align-self:center; padding:11px 12px; width:auto; }
  .list-submit { flex-direction:column; align-items:stretch; gap:16px; padding-bottom:8px; }
  .result-summary { grid-template-columns:1fr; gap:24px; padding:24px; }
  .score-display { font-size:40px; line-height:44px; }
  .score-stats { border-left:0; padding:20px 0 0; border-top:1px solid var(--border); }
  .score-stats dt { font-size:12px; line-height:18px; }
  .score-stats dd { font-size:24px; line-height:32px; }
  .result-actions { gap:16px; flex-direction:column; }
  .review-toolbar { gap:16px; margin-top:24px; }
  .review-tabs { width:100%; }
  .review-tab { flex:1; padding:10px 8px; min-height:40px; font-size:12px; line-height:20px; }
  .review-card,.library-card { padding:20px 16px; }
  .review-option { padding:12px; gap:8px; }
  .status-label { font-size:11px; line-height:18px; }
  .source-note { font-size:11px; line-height:16px; }
  .library-option { padding:12px; }
  .review-reason { font-size:12px; line-height:20px; padding:12px; }
  .lesson-coverage { font-size:11px; line-height:16px; }
  .lesson-coverage th,.lesson-coverage td { padding:10px 5px; }
  .site-footer { padding:20px; display:block; }
  .site-footer span { display:block; }
  .site-footer span+span { margin-top:4px; }
  dialog { padding:24px 20px; }
  .dialog-actions { gap:12px; flex-wrap:wrap; }
  .dialog-actions .button { flex:1; min-width:100px; }
  .error-panel { padding:24px; margin:24px auto; }
  .notice { bottom:16px; padding:12px 16px; font-size:12px; line-height:20px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .button:not(:disabled):hover { transform:none; }
}
@media(forced-colors:active) {
  .check-label input:checked { background:Highlight; }
  .check-label input:checked::before { color:HighlightText; }
}

/* Study paths, worked mathematics and mobile-readable knowledge diagrams. */
.study-paths {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:28px;padding:5px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-control)}
.path-choice {border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted);font-weight:500;padding:12px;line-height:22px;min-height:48px}
.path-choice[aria-pressed="true"] {background:var(--surface);color:var(--accent);border-color:var(--accent)}
.exam-intro {color:var(--muted);line-height:26px;margin:0 0 24px}
.exam-breakdown {display:flex;flex-wrap:wrap;gap:12px;margin:-8px 0 24px}
.exam-breakdown p {padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);margin:0}
.math-block {display:block;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:6px 0}
.math-inline {white-space:normal}
.katex {font-size:1.12em}
.katex-display {margin:.5em 0;text-align:left}
.katex-display>.katex {text-align:left}
.question-prompt,.context,.option-text,.review-option-copy,.solution-body {overflow-wrap:anywhere;min-width:0}
.worked-solution {border-top:1px solid var(--border);margin-top:24px;padding-top:20px}
.worked-solution>summary {cursor:pointer;color:var(--accent);font-size:16px;font-weight:600;line-height:26px;padding:8px 0}
.solution-body {padding-top:20px;font-size:15px;line-height:28px}
.solution-body h4 {font-size:17px;line-height:26px;margin:24px 0 12px}
.solution-body h5 {font-size:15px;line-height:26px;margin:0 0 8px}
.solution-body p {white-space:pre-line}
.topic-label {display:inline-block;color:var(--accent);background:var(--accent-soft);padding:4px 12px;border-radius:6px;font-size:13px;line-height:22px;margin-bottom:0}
.solution-idea {max-width:78ch}
.thinking-flow {list-style:none;padding:0;margin:20px 0;display:flex;flex-wrap:wrap;gap:22px;align-items:stretch}
.thinking-flow li {position:relative;flex:1 1 135px;min-width:0;padding:12px;border:1px solid #86b7ab;background:#eff8f5;border-radius:8px;font-size:13px;line-height:22px}
.thinking-flow li:not(:last-child)::after {content:'→';position:absolute;right:-19px;top:calc(50% - 12px);color:var(--accent)}
.solution-steps {list-style:none;margin:0;padding:0;counter-reset:steps}
.solution-steps li {padding:16px 0;border-bottom:1px solid var(--border)}
.solution-steps li p {margin:0;max-width:80ch}
.knowledge-map {display:grid;grid-template-columns:minmax(130px,1fr) minmax(0,3fr);gap:28px;align-items:center;padding:20px;background:var(--bg);border-radius:10px}
.map-center {border:1px solid var(--accent);border-radius:8px;padding:16px;color:var(--accent);font-weight:600;background:var(--surface);text-align:center;position:relative}
.map-center::after {content:'';position:absolute;width:15px;border-top:1px solid #8fafa5;right:-16px;top:50%}
.map-branches {list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid #8fafa5;display:grid;gap:12px}
.map-branches li {position:relative;padding:12px 16px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.map-branches li::before {content:'';position:absolute;left:-15px;top:50%;width:14px;border-top:1px solid #8fafa5}
.map-branches p {margin:4px 0 0;font-size:14px;line-height:24px}
.solution-check,.solution-trap {padding:16px 20px;margin:20px 0;border-left:3px solid var(--accent);background:#eff8f5;border-radius:0 8px 8px 0}
.solution-trap {border-left-color:var(--amber);background:var(--amber-soft)}
.solution-check p,.solution-trap p {margin:6px 0 0}
.learning-summary {padding:28px;margin:28px 0}
.topic-map {list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.topic-map li {border:1px solid var(--border);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:4px;background:var(--bg);line-height:22px}
.topic-map span {font-size:12px;color:var(--muted)}
.topic-map .topic-needs-work {border-left:3px solid var(--amber)}
.topic-map .topic-complete {border-left:3px solid var(--accent)}
.solution-visual {margin:20px 0}.solution-visual img {display:block;width:100%;max-width:560px;height:auto;border:1px solid var(--border);border-radius:8px;background:white}.solution-visual figcaption {font-size:12px;color:var(--muted);line-height:20px;margin-top:8px}
@media(max-width:650px) {
 .study-paths {grid-template-columns:1fr}.path-choice {text-align:left}
 .thinking-flow {display:grid;grid-template-columns:1fr;gap:24px}
 .thinking-flow li:not(:last-child)::after {content:'↓';right:auto;left:calc(50% - 6px);top:auto;bottom:-25px}
 .knowledge-map {grid-template-columns:1fr;padding:14px;gap:16px}
 .map-center::after {display:none}.map-branches {margin-left:12px}
 .topic-map {grid-template-columns:1fr}.learning-summary {padding:20px}
 .solution-body {font-size:14px;line-height:26px}
}
.learning-summary>summary {cursor:pointer;font-size:18px;font-weight:600;line-height:28px;color:var(--accent)}
.learning-summary[open]>summary {margin-bottom:16px}