/* A warm classroom palette; all motion is brief and optional. */
:root{background:#fffaf0;color:#244b43}body{background:linear-gradient(160deg,#fff9e9 0%,#f1f9f2 75%,#fff4ed 100%);min-height:100vh}header{border-color:#d6e5d5}.brand-icon{background:#287764;box-shadow:3px 3px 0 #c7dcc7}.eyebrow{color:#2a715e;letter-spacing:.1em}h1{color:#245b4b}.level{border:2px solid #9fcabc;background:#eff9f2;box-shadow:0 5px 0 #d5e6d9;transition:transform .15s,box-shadow .15s}.level:nth-of-type(2){background:#fff5d7;border-color:#dfbf6d;box-shadow:0 5px 0 #f0ddb0}.level:hover{transform:translateY(-2px)}.level:has(input:checked){background:#e4f5e9;border-color:#226752;box-shadow:0 5px 0 #94bdaa}.level:nth-of-type(2):has(input:checked){background:#fff0bb;border-color:#8b661e;box-shadow:0 5px 0 #d8b55d}.level strong{color:#245b4b}.level .tag{background:#fff9;color:#3c6556}.primary{background:#287764;border-color:#246e5c;box-shadow:0 4px 0 #175442;transition:transform .15s}.primary:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #175442}.primary:disabled{box-shadow:none}.secondary{border-color:#91b7a6;background:#f5faf4}.panel{border:2px solid #bdd5c6;box-shadow:0 7px 0 #e0e9da;border-radius:28px}.options{gap:12px}.option{background:#fffdf7;border-color:#dedfd1;position:relative;flex-wrap:wrap}.option>span:not(.answer-tag){flex:1;min-width:0}.option:has(input:disabled){cursor:default;opacity:1}.option.answer-correct{background:#eaf7ec;border-color:#378363}.option.answer-wrong{background:#fff0e6;border-color:#b77443}.answer-tag{font-size:12px;font-weight:800;padding:2px 9px;border-radius:8px;background:white;color:#2d634e;margin-left:auto}.answer-wrong .answer-tag{color:#8d4826}.feedback{margin:16px 0;padding:19px 22px;border-radius:18px;border:2px solid #8db69a;background:#edf8ed;text-align:left;animation:feedback-in .25s ease-out}.feedback[hidden]{display:none}.feedback strong{font-size:21px;display:block}.feedback p{font-size:17px;line-height:1.75}.feedback-wrong{background:#fff3dd;border-color:#dfb867}.feedback:focus{outline:3px solid #bb8139;outline-offset:3px}.feedback p:last-child{margin-bottom:0}.hero-art{width:100%;max-width:340px;height:210px;object-fit:contain;display:block;margin:0 auto 12px;border-radius:22px}.intro{position:relative}.intro h1{font-size:clamp(30px,4vw,45px)}main{padding-top:34px}.intro .levels{margin-top:24px}.result{position:relative;isolation:isolate;overflow:hidden;padding-top:38px}.result>*:not(.celebration){position:relative;z-index:1}.result.passed{border-color:#72aa88;background:linear-gradient(160deg,#fffdf6,#f1faed)}.result.try-again{background:#fffaf0}.result .score{margin:12px 0}.achievement{display:flex;justify-content:center;gap:12px;margin:18px 0 5px;font-size:clamp(27px,6vw,44px);color:#8b8f7d}.achievement .earned{color:#b47608;text-shadow:0 2px 0 #ffe3a1}.celebrate .achievement span{animation:star-pop .7s both;animation-delay:calc(var(--i)*.13s)}.celebration{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}.celebration span{position:absolute;left:var(--left);top:-35px;font-size:22px;opacity:0}.celebrate .celebration span{animation:confetti 2.2s ease-out both;animation-delay:var(--delay)}.replay{margin-top:20px;min-height:44px;font-size:14px;border:0;background:#fff8df;color:#735019}.result-message{word-break:keep-all}.result .tag{background:#ffe7aa}.steps span{background:#fff9;padding:6px 10px;border-radius:9px}.explain{background:#f0f7e8}button:disabled{cursor:not-allowed}.nav .secondary:disabled{opacity:.5}
@keyframes feedback-in{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes star-pop{0%{opacity:0;transform:scale(.6)}65%{opacity:1;transform:scale(1.16)}100%{opacity:1;transform:scale(1)}}@keyframes confetti{0%{opacity:0;transform:translate(0,-20px) rotate(0deg)}12%{opacity:.8}100%{opacity:0;transform:translate(var(--drift),520px) rotate(var(--turn))}}
@media(min-width:800px){.intro{display:grid;grid-template-columns:1.15fr .85fr;column-gap:28px;text-align:left}.intro .eyebrow,.intro h1,.intro>.muted{grid-column:1}.intro .hero-art{grid-column:2;grid-row:1/4;height:240px;max-width:330px;align-self:center}.intro .levels,.intro>.start,.intro>.steps,.intro>.helper{grid-column:1/-1}.intro>.helper{text-align:center}.intro>.start{width:100%}.intro .levels legend{text-align:left}.intro>.muted{margin-bottom:0}}
@media(max-width:580px){.hero-art{height:135px;max-width:230px;margin-bottom:10px}.intro h1{font-size:30px}.intro .eyebrow{margin-bottom:8px}.feedback{padding:16px}.feedback strong{font-size:19px}.feedback p{font-size:17px}.steps{gap:5px}.steps span{padding:5px;font-size:11px}.achievement{gap:9px}.result .score{font-size:27px}.result{padding:25px 16px}.result .tag{font-size:11px}.result-message{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.celebration{display:none}.replay{display:none}}

.confirm-answer{width:100%;margin-top:10px}.confirm-answer:disabled{box-shadow:none}
.word-help{margin:16px 0;border:1px solid #b8d2bf;border-radius:14px;background:#f5faf1;text-align:left;color:#294d40}.word-help summary{cursor:pointer;min-height:48px;padding:12px 16px;font-size:17px;font-weight:700;line-height:1.6;overflow-wrap:anywhere}.word-help dl{padding:0 18px 16px;margin:0}.word-help dt{font-size:18px;font-weight:800;margin-top:12px}.word-help dd{margin:3px 0 0;font-size:18px;line-height:1.8}.word-help summary:focus-visible{outline:3px solid #b16c2e;outline-offset:2px;border-radius:12px}.feedback-content .word-help{background:#fffdf6}.feedback-content .word-help summary{font-size:16px}
.modal-open{overflow:hidden}.feedback-dialog{position:fixed;inset:0;width:min(620px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:2px solid #83b59b;border-radius:24px;background:#f0faef;color:#244b43;box-shadow:0 18px 70px #163d3840;overflow:hidden}.feedback-dialog:not([open]){display:none}.feedback-dialog[open]{display:flex;flex-direction:column;animation:feedback-in .18s ease-out}.feedback-dialog::backdrop{background:#17382f88}.feedback-dialog.feedback-wrong{background:#fff6e5;border-color:#d7af5b}.feedback-content{padding:28px;overflow-y:auto;min-height:0;overscroll-behavior:contain}.feedback-content h2{font-size:25px;margin:0 0 20px;line-height:1.55;word-break:keep-all}.feedback-content h2:focus{outline:none}.feedback-content p{font-size:19px;line-height:1.8;overflow-wrap:anywhere}.feedback-answer{font-weight:700}.feedback-actions{display:flex;gap:12px;justify-content:flex-end;padding:18px 24px;border-top:1px solid #cad6bf;background:#fffdf6;flex-shrink:0}.feedback-actions button{min-height:52px}.option.answer-wrong:has(input:checked){background:#fff0e6;border-color:#b77443}@media(max-width:580px){.feedback-content{padding:22px 20px}.feedback-content h2{font-size:22px}.feedback-content p{font-size:18px}.feedback-actions{padding:14px;gap:9px}.feedback-actions button{flex:1;padding:12px 8px;font-size:16px}}@media(max-height:450px){.feedback-content{padding:16px 20px}.feedback-content h2{font-size:20px;margin-bottom:10px}.feedback-content p{font-size:17px;margin:8px 0}.feedback-actions{padding:10px 16px}}