:root{color:#263859;background:#f4f3ff;font-family:ui-rounded,"Segoe UI",system-ui,sans-serif}
body{min-height:100vh;min-height:100svh;background:radial-gradient(ellipse at 0 10%,#e4f6f4 0,transparent 45%),radial-gradient(ellipse at 100% 80%,#fff0d4 0,transparent 45%),#f4f3ff}
header{max-width:1020px;padding:16px 28px;border:0}.brand{font-size:23px;letter-spacing:-.5px}.logo{background:#6452b7;transform:rotate(-7deg);box-shadow:3px 3px 0 #ddd4ff}header>span{color:#62657c}
main{max-width:960px;display:flex;flex-direction:column;gap:16px;margin:4px auto 14px;padding:0 28px;position:relative}
.intro{display:flex;gap:17px;align-items:center;padding:4px 4px 0}.mascot{display:grid;place-items:center;flex-shrink:0;width:70px;height:70px;font-size:44px;border-radius:23px;background:#ffde89;transform:rotate(-5deg)}h1{font-size:28px;letter-spacing:-.8px;margin:0 0 4px}.intro p{font-size:15px;margin:0;color:#5b647b;line-height:1.5}
.parent-settings{order:3;margin:0;align-self:flex-start;background:#ffffffb8;border:1px solid #dcdfee;border-radius:12px;padding:0 16px;max-width:100%;font-size:15px}.parent-settings>summary{min-height:44px;display:flex;align-items:center;color:#565a76}.parent-settings>summary::before{content:'▸';margin-right:10px}.parent-settings[open]>summary::before{content:'▾'}.parent-settings[open]{width:100%;padding-bottom:16px}.source{border-top:1px solid #dcdfee}.source .upload{max-width:360px;background:#6452b7}.parent-settings details{margin-top:14px}.small{font-size:13px!important}
.workspace{width:100%;padding:22px 28px;border:2px solid #e0ddf3;border-radius:24px;box-shadow:0 7px 0 #e7e3f4}.eyebrow{color:#6452b7;font-size:12px;letter-spacing:1.5px}.text-button{color:#595099;min-height:44px;padding:10px 8px}.quiz-top{min-height:44px}.progress-label{margin-top:4px;font-size:14px;color:#5b647b}progress{height:10px;margin-top:8px}progress::-webkit-progress-value{background:#8873da}progress::-moz-progress-bar{background:#8873da}
#question{font-size:clamp(23px,3vw,29px);margin:18px 0 7px;color:#263859;line-height:1.25}.hint{font-size:15px;color:#62657c;margin-bottom:15px}.answers{grid-template-columns:1fr 1fr;gap:12px}.answer{min-height:83px;border:2px solid #dcd6f5;background:#f7f4ff;border-radius:15px;font-size:18px;font-weight:600;gap:13px;padding:14px;color:#303750;transition:transform .12s,border-color .12s}.answer:nth-child(2){background:#edf7ff;border-color:#cfe4f3}.answer:nth-child(3){background:#fff8e8;border-color:#f0dfb9}.answer:nth-child(4){background:#fff0f4;border-color:#f0d4df}.letter{height:36px;width:36px;border-radius:11px;background:#ffffffc9;color:#505775;font-size:16px}.answer:hover:not(:disabled){background:#eeebff;border-color:#8873da;transform:translateY(-2px)}.answer.selected,.answer.correct{padding:14px;background:#e6f6eb;border-color:#31825b;color:#204d36}.answer.wrong{background:#fff3e1;border-color:#c68731;color:#654319}.answer:disabled{opacity:1}.feedback{margin-top:14px;padding:13px 17px;background:#eff6eb;border-left-color:#70a15a}.feedback h3{font-size:17px;color:#315237}.feedback p{font-size:16px;line-height:1.5;color:#415341;margin-top:5px}
nav{padding-top:14px;margin-top:17px}.primary,.secondary{min-height:48px;font-size:16px;border-radius:12px;padding:12px 20px}.primary{background:#6452b7;border-color:#6452b7;box-shadow:0 3px 0 #49398e}.secondary{color:#565a76;border-color:#dadbea}.finish-icon{background:#fff1bf;font-size:38px;width:72px;height:72px}#result{padding:25px 0}#result h2{font-size:27px}#result p{font-size:17px}footer{font-size:13px;color:#65697f;padding:4px 20px 16px}
@media(min-width:700px) and (max-height:850px){header{padding-top:10px;padding-bottom:10px}main{gap:10px}.mascot{width:54px;height:54px;font-size:35px}h1{font-size:25px}.workspace{padding:14px 24px}#question{margin-top:12px;font-size:25px}.answer{min-height:70px;padding:11px;font-size:17px}.answer.selected,.answer.correct{padding:11px}.feedback{padding:10px 15px;margin-top:12px}nav{margin-top:12px;padding-top:12px}footer{padding-bottom:8px}}
@media(max-width:650px){header{padding:15px 20px}.brand{font-size:21px}main{margin-top:0;padding:0 14px;gap:13px}.intro{gap:12px}.intro p{font-size:14px}h1{font-size:24px}.mascot{width:56px;height:56px;font-size:35px}.workspace{padding:17px 16px}.quiz-top .eyebrow{font-size:11px;letter-spacing:.5px}.answers{gap:10px}.answer{padding:11px;gap:9px;font-size:16px;min-height:90px;align-items:flex-start;flex-direction:column}.answer.selected,.answer.correct{padding:11px}#question{font-size:23px}.letter{width:29px;height:29px;font-size:14px}.primary,.secondary{font-size:14px;padding:11px 14px}.feedback p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.answer{transition:none}.answer:hover:not(:disabled){transform:none}}
.encouragement{display:flex;align-items:center;gap:12px;background:#fff6d9;border:1px solid #e9d394;border-radius:13px;padding:10px 14px;margin-top:12px;animation:encourage-in .25s ease-out}.encouragement>span{font-size:28px;flex-shrink:0}.encouragement p{margin:0;color:#654e22;font-size:15px;font-weight:600;line-height:1.45}@keyframes encourage-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.encouragement{animation:none}}
#lesson-select{display:block;width:100%;min-height:48px;font:inherit;font-size:16px;padding:10px;border:1px solid #b8b1d3;border-radius:10px;background:white;color:#303750;margin:8px 0 16px}.source>label:not(.upload){display:block;font-size:14px;margin-top:12px}#lesson-select:focus-visible{outline:3px solid #8873da;outline-offset:2px}