.quiz-top{display:flex;justify-content:space-between;gap:1rem;padding:1.2rem 5%;border-bottom:1px solid var(--line);background:var(--surface)}.quiz-shell{max-width:1000px;padding-top:2rem;padding-bottom:3rem}.quiz-clock{position:sticky;top:8px;z-index:5;display:flex;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:.7rem 1.2rem;width:fit-content;box-shadow:0 8px 25px #0002}.quiz-clock small{display:block}.quiz-clock output{font-size:1.7rem;font-variant-numeric:tabular-nums;font-weight:700}.clock-face{position:relative;font-size:3rem;line-height:1;color:var(--accent)}.clock-face i{position:absolute;left:30%;top:42%;font-size:.7rem;font-style:normal}.quiz-clock.urgent{border-color:#ed7878}.quiz-clock #save-status{font-size:.8rem;max-width:12rem}.quiz-unit{margin:1.5rem 0}.quiz-question{border-top:1px solid var(--line);padding-top:1rem;margin-top:1.5rem}.quiz-rich{display:flow-root;line-height:1.8;overflow-wrap:anywhere}.quiz-rich img{max-width:100%;height:auto}.quiz-rich table{max-width:100%}.quiz-rich mjx-container[display=true]{overflow-x:auto;overflow-y:hidden;max-width:100%}.quiz-answer{border:1px solid var(--line);border-radius:12px;padding:1rem;margin-top:1rem;display:flex;gap:1rem;flex-wrap:wrap}.quiz-answer label{display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem;background:var(--surface2);border-radius:8px;cursor:pointer}.quiz-answer input{width:1.15rem;height:1.15rem;accent-color:var(--accent)}.quiz-answer textarea{width:100%;background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:.8rem;font:inherit}.quiz-bottom{display:flex;gap:1rem;flex-wrap:wrap}.quiz-review{margin-top:1rem;padding:1rem;background:var(--surface2);border-radius:12px}.quiz-review select{font:inherit;background:var(--surface);color:var(--text);padding:.5rem}.quiz-ai{color:var(--muted);font-size:.7em}.quiz-celebrate{display:flex;align-items:center;gap:2rem;margin-bottom:1.5rem}.quiz-thumbs{font-size:5rem;animation:quiz-pop .6s ease-out}.quiz-thumbs span{font-size:1.4rem;display:block;text-align:center;color:var(--accent)}.teacher-art{width:200px;max-width:40%;animation:quiz-collect 1s ease-out}@keyframes quiz-pop{from{transform:scale(.5) rotate(-15deg)}to{transform:scale(1)}}@keyframes quiz-collect{from{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}@media(max-width:600px){.quiz-clock{gap:.6rem;padding:.5rem .8rem}.quiz-clock #save-status{max-width:7rem}.quiz-celebrate{gap:1rem}.quiz-shell{padding-top:1rem}.quiz-answer{gap:.5rem}}@media(prefers-reduced-motion:reduce){.teacher-art,.quiz-thumbs{animation:none}}
/* Keep the countdown to the right, away from the main reading column. */
.quiz-clock{margin-left:auto;margin-right:0}
.quiz-unit[hidden],.quiz-question[hidden]{display:none!important}
.quiz-question-nav{margin:1.5rem 0;scroll-margin-top:1rem}
.quiz-position{text-align:right;font-weight:700;color:var(--accent)}
.quiz-progress{display:block;width:100%;height:8px;margin:0 0 1rem;border:0;border-radius:8px;overflow:hidden;accent-color:var(--accent);background:var(--line)}
.quiz-progress::-webkit-progress-bar{background:var(--line)}.quiz-progress::-webkit-progress-value{background:var(--accent)}.quiz-progress::-moz-progress-bar{background:var(--accent)}
.quiz-question-numbers{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;gap:.6rem}
.quiz-question-numbers .button{min-width:44px;min-height:44px;padding:.5rem .8rem;justify-content:center}
.quiz-question-numbers .is-answered{box-shadow:inset 0 -3px var(--accent)}
.quiz-question-numbers [aria-current=step]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.quiz-page-controls{display:flex;justify-content:space-between;gap:1rem;margin:1.5rem 0}
.quiz-page-controls .button:disabled{opacity:.4;cursor:default}
.quiz-bottom{align-items:center;justify-content:center;margin-top:1.5rem}
.quiz-bottom button[type="submit"]{font-size:1.25rem}
.quiz-clock.urgent{border-color:#e53935;animation:quiz-clock-warning 1.2s ease-in-out infinite}
.quiz-clock.urgent .clock-face,.quiz-clock.urgent output{color:#e53935}
@keyframes quiz-clock-warning{
  0%,100%{transform:translateX(0);box-shadow:0 0 0 0 #e5393500}
  12%,36%{transform:translateX(-3px) rotate(-1deg)}
  24%,48%{transform:translateX(3px) rotate(1deg)}
  50%{border-color:#ff9b98;box-shadow:0 0 0 5px #e5393540,0 0 20px #e5393580}
  60%,90%{transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){.quiz-clock.urgent{animation:none;box-shadow:0 0 0 3px #e5393540}}
@media(min-width:1320px){.quiz-clock{position:fixed;right:18px;top:100px;width:140px;box-sizing:border-box;flex-wrap:wrap;justify-content:center;gap:.4rem;padding:.8rem}.quiz-clock #save-status{width:100%;text-align:center;font-size:.7rem}.quiz-clock output{font-size:1.5rem}}
@media(max-width:600px){.quiz-clock{gap:.4rem;padding:.35rem .65rem;border-radius:16px}.quiz-clock .clock-face{font-size:2rem}.quiz-clock output{font-size:1.2rem}.quiz-clock small{font-size:.65rem}.quiz-clock #save-status{display:none}}
.quiz-certificate{--award:#c9a256;position:relative;border:3px double var(--award);outline:1px solid var(--line);outline-offset:-12px;border-radius:20px;padding:2rem;text-align:center;background:var(--surface);margin:1.5rem 0;color:var(--text)}.quiz-certificate.level-1{--award:#cb997e}.quiz-certificate.level-2{--award:#78a978}.quiz-certificate.level-3{--award:#75a4c6}.quiz-certificate.level-4{--award:#a18cce}.quiz-certificate.level-5{--award:#c9a256}.certificate-top,.certificate-footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.8rem}.certificate-medal{font-size:4rem;margin:1rem 0}.certificate-level{letter-spacing:.2em;font-size:.8rem;color:var(--award)}.quiz-certificate h2{font-size:clamp(1.5rem,4vw,2.4rem);margin:.5rem 0;color:var(--award)}.certificate-score{font-size:4rem;font-weight:700;color:var(--award);line-height:1.3}.certificate-score small{font-size:1.2rem;margin-left:.4rem}.certificate-motto{font-weight:600}.certificate-footer{border-top:1px solid var(--line);padding-top:1rem;margin-top:2rem}.quiz-next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.quiz-next-grid h3{font-size:1.1rem}.quiz-next-grid .button{white-space:normal}.quiz-result-actions{margin-bottom:1.5rem}@media(max-width:700px){.quiz-next-grid{grid-template-columns:1fr}.quiz-certificate{padding:1.5rem}.certificate-top,.certificate-footer{justify-content:center}}
.quiz-unit-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;box-sizing:border-box}.quiz-unit-heading h2{margin:0}

.quiz-rich table:not([border="0"]){border-collapse:collapse;border:1px solid var(--muted)}
.quiz-rich table:not([border="0"])>tr>td,.quiz-rich table:not([border="0"])>tr>th,.quiz-rich table:not([border="0"])>:is(thead,tbody,tfoot)>tr>:is(td,th){border:1px solid var(--muted);padding:.25em .5em}

.qbank-inline-option{margin-block:.2em;display:inline-flex;align-items:center;gap:.35em;padding:.15em .45em;border:1px solid var(--line);border-radius:.4em;background:var(--surface2);color:var(--text);cursor:pointer;vertical-align:baseline;line-height:1.4;white-space:nowrap}.qbank-inline-option input{margin:0;width:1.1em;height:1.1em;accent-color:var(--accent)}.qbank-inline-option:has(input:checked){border-color:var(--accent);background:var(--glow);color:var(--accent)}.qbank-inline-option:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* A real overlay avoids native progress shadow-tree animation limitations. */
.quiz-progress-track{position:relative;height:8px;margin:0 0 1rem;border-radius:8px;background:var(--line);overflow:hidden}
.quiz-progress-track .quiz-progress{position:absolute;inset:0;margin:0;opacity:0}
.quiz-progress-fill{display:block;position:relative;height:100%;background:var(--accent);border-radius:inherit;overflow:hidden;transition:width .3s ease}
.quiz-progress-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 15%,#00000030 30%,#ffffffee 50%,#00000030 70%,transparent 85%);transform:translateX(-100%);animation:quiz-progress-shine 8s linear infinite}
@keyframes quiz-progress-shine{0%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}
.quiz-clock[role=button]{cursor:pointer;user-select:none}
.quiz-clock .clock-face{display:inline-block;transform-origin:50% 60%;border-radius:8px}
.quiz-clock[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.quiz-progress-fill{transition:none}.quiz-progress-fill::after{animation:none;display:none}}

@media(max-width:600px){#quiz-sheet .quiz-question-numbers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}#quiz-sheet .quiz-question-numbers .button{min-width:0;width:100%;padding:.5rem .25rem}}

#quiz-sheet>.quiz-page-controls{position:sticky;bottom:0;z-index:10;padding:.75rem 0;background:transparent;pointer-events:none}
#quiz-sheet>.quiz-page-controls .button{pointer-events:auto;background:var(--surface)}