/* A bright, character-led learning world. */
:root{--green:#58cc02;--green-dark:#46a302;--ink:#3c3c3c;--muted:#777;--line:#e5e5e5}
body{font-variant-numeric:tabular-nums}h1,h2{text-wrap:balance}p{text-wrap:pretty}
.primary{background:#58cc02;border-color:#46a302}.primary:hover{background:#61d50b}.primary:active:not(:disabled){transform:translateY(2px) scale(.96)}
.outline:active,.option:active:not(:disabled),.nav-item:active,.guide-button:active{transform:scale(.96)}
.nav-item.active{background:#ddf4ff;border-color:#84d8ff;color:#1899d6}.unit-banner{border-radius:18px}.unit-banner h1{font-size:27px}.unit-banner p{font-size:13px}
.path-stop>strong{color:#58654e;font-size:14px}.path-stop>small{font-size:11px}.path-intro b{font-weight:750}.learning-path{height:630px}.path-dots{border-color:#e9f2de}.path-character{left:calc(50% + 48px);top:168px;transform:none}.path-character>div{transform:none;font-size:12px;color:#658549;margin-top:4px;font-weight:650}.path-character>.corn{animation:none}.path-character .mascot{--mascot-size:158px!important}
.corn.mascot{display:inline-block;position:relative;width:var(--mascot-size);height:var(--mascot-size);flex-shrink:0;vertical-align:middle;isolation:isolate;transform-origin:50% 88%}
.mascot-sprite{position:absolute;inset:0;background-image:url('media/motion/corn-atlas.webp');background-size:400% 300%;background-repeat:no-repeat;background-position:0% 0%;animation:corn-idle 4.8s step-end infinite;transform-origin:50% 85%}
.mascot-shadow{position:absolute;width:59%;height:7%;left:21%;bottom:0;background:#dcebc9;border-radius:50%;z-index:-1;opacity:.65}
.mascot-spark{position:absolute;opacity:0;color:#ffc800;font-size:calc(var(--mascot-size)*.14);pointer-events:none}.spark-one{top:12%;left:-5%}.spark-two{top:32%;right:-3%;color:#58cc02}
.mood-celebrate .mascot-sprite{background-position:66.6667% 50%;animation:corn-celebrate .85s step-end 3 both}.mood-celebrate .mascot-shadow{animation:shadow-jump .85s ease-in-out 3}.mood-celebrate .mascot-spark{animation:spark-pop .75s ease-out 3}.mood-celebrate .spark-two{animation-delay:.15s}
.mood-think .mascot-sprite{background-position:0% 100%;animation:corn-think 5s step-end infinite}.mood-encourage .mascot-sprite{background-position:100% 100%;animation:corn-encourage 1.4s step-end 2 both}
@keyframes corn-idle{0%,60%,100%{background-position:0% 0%}65%,78%{background-position:33.3333% 0%}70%{background-position:66.6667% 0%}85%,92%{background-position:100% 0%}}
@keyframes corn-celebrate{0%,100%{background-position:0% 50%}22%{background-position:33.3333% 50%}48%{background-position:66.6667% 50%}76%{background-position:100% 50%}}
@keyframes corn-think{0%,100%{background-position:0% 100%}45%,65%{background-position:33.3333% 100%}55%{background-position:66.6667% 100%}80%,94%{background-position:100% 100%}}
@keyframes corn-encourage{0%{background-position:33.3333% 100%}30%{background-position:66.6667% 100%}50%,100%{background-position:100% 100%}}
@keyframes shadow-jump{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.72);opacity:.35}}
@keyframes spark-pop{0%,100%{opacity:0;transform:translateY(8px) scale(.5)}35%{opacity:1;transform:translateY(-8px) scale(1.15)}75%{opacity:.5;transform:translateY(-18px) scale(.8)}}
.reward-art{display:inline-block!important;width:var(--reward-size);height:var(--reward-size);min-width:var(--reward-size);flex-shrink:0;vertical-align:middle;background:url('media/motion/reward-atlas.webp') var(--reward-x) var(--reward-y)/400% 200% no-repeat}
.reward-flame{transform-origin:50% 90%;animation:flame-dance 3.6s ease-in-out infinite}.reward-gem{animation:gem-glint 4s ease-in-out infinite}.reward-xp{animation:energy-pulse 4.6s ease-in-out infinite}.reward-trophy{animation:trophy-sway 5s ease-in-out infinite}.reward-sprout{transform-origin:50% 90%;animation:trophy-sway 5s ease-in-out infinite}.reward-medal{animation:medal-in .5s cubic-bezier(.2,.8,.25,1) both}
@keyframes flame-dance{0%,75%,100%{transform:rotate(0) scale(1)}82%{transform:rotate(-6deg) scale(.98,1.06)}91%{transform:rotate(5deg) scale(1.04,.98)}}
@keyframes gem-glint{0%,75%,100%{transform:translateY(0) rotate(0);filter:brightness(1)}85%{transform:translateY(-3px) rotate(7deg);filter:brightness(1.14)}}
@keyframes energy-pulse{0%,82%,100%{transform:scale(1)}90%{transform:scale(1.13) rotate(-6deg)}}
@keyframes trophy-sway{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-7deg)}94%{transform:rotate(7deg)}}
@keyframes medal-in{from{opacity:0;transform:translateY(12px) scale(.75)}to{opacity:1;transform:translateY(0) scale(1)}}
.brand>.mascot{margin-left:-8px}.brand{gap:6px}.stats{gap:19px}.stats button{min-height:40px}.stats .motion-toggle{font-size:25px;color:#9babc0}.stats .motion-toggle[aria-pressed=false]{color:#b6b6b6}.stats .reward-art{margin-right:-5px}.card-head>.reward-art{margin:-10px}.quest-line>.reward-art{margin-left:-5px;margin-right:-5px}.quests-hero>.reward-art,.badge>.reward-art{display:block!important;margin:auto}
.level.current:before{animation:path-ring 3s ease-in-out infinite}.level.current:after{content:'';position:absolute;top:7px;left:14px;width:34px;height:6px;transform:rotate(-18deg);background:#ffffff45;border-radius:10px}.level.done svg{animation:medal-in .4s ease-out}.level:active{transform:translateY(5px) scale(.96)}
@keyframes path-ring{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.chest{top:519px;left:calc(50% + 30px);filter:none;padding:0;display:flex;align-items:center;flex-direction:column}.chest>.reward-art{margin:0}.chest>span:last-child{font-size:11px;font-weight:650;color:#89977a}.chest.ready>.reward-art{animation:chest-wiggle 3.4s ease-in-out infinite}.chest:not(.ready):not(.claimed)>.reward-art{filter:saturate(.55);opacity:.75}.chest.claimed>span:last-child{color:#58a700}
@keyframes chest-wiggle{0%,74%,100%{transform:rotate(0) translateY(0)}79%{transform:rotate(-8deg) translateY(-2px)}85%{transform:rotate(8deg) translateY(-3px)}92%{transform:rotate(-4deg) translateY(0)}}
.question-stage{display:flex;align-items:center;gap:22px;margin:5px 0 24px;position:relative;min-height:120px}.question-speech{position:relative;border:2px solid #e5e5e5;border-radius:18px;padding:20px 24px;flex:1;background:white}.question-speech:before{content:'';position:absolute;left:-9px;top:45%;width:14px;height:14px;background:inherit;border-left:2px solid #e5e5e5;border-bottom:2px solid #e5e5e5;transform:rotate(45deg)}.question-speech h1{font-size:23px;line-height:1.5;margin:0}.question-speech small{display:block;margin-top:9px;color:#80966c;font-size:12px}.question-stage.is-correct .question-speech{border-color:#b8e885;background:#f7ffed}.question-stage.is-correct .question-speech:before{border-color:#b8e885}.question-stage.is-wrong .question-speech{background:#fff8ef;border-color:#f5d6a9}.question-stage.is-wrong .question-speech:before{border-color:#f5d6a9}
.option{border-radius:15px;border-bottom-width:4px;transition:background-color .16s,border-color .16s,transform .16s}.option.correct{animation:answer-pop .3s ease-out;border-color:#58cc02;background:#d7ffb8;color:#438a00}.option.incorrect{animation:answer-shake .27s ease-in-out;border-color:#ffb2b2;background:#fff0f0}.option.correct>span{background:#58cc02;color:white;border-color:#58cc02}.option.incorrect>span{background:#ff7c7c;color:white;border-color:#ff7c7c}.lesson-footer.good{background:#d7ffb8;border-color:#b8e885}.lesson-footer.bad{background:#fff1e8;border-color:#f6d3b7}.feedback{display:flex;align-items:center;gap:17px;position:relative;flex:1}.feedback>div{flex:1}.feedback strong{color:#58a700}.lesson-footer.bad .feedback strong{color:#cc7c28}.feedback p{margin:5px 0 0}.feedback-badge{display:grid;place-items:center;background:#fff;border-radius:50%;width:62px;height:62px;flex-shrink:0;animation:medal-in .28s ease-out}.feedback-badge svg{color:#58cc02;width:30px;height:30px}.lesson-footer.bad .feedback-badge{background:#fff7ef;color:#e99e4d;font-size:29px;font-weight:900}
.combo-pill{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:850;color:#e28a00;white-space:nowrap;animation:combo-enter .4s ease-out}.lesson-kicker{align-items:center}.combo-pill .reward-art{margin:-8px 0}.progress-track>div{position:relative;background:#58cc02;transition:width .35s cubic-bezier(.2,.8,.25,1)}.progress-track>div:after{content:'';position:absolute;top:3px;left:6px;right:6px;height:4px;background:#ffffff35;border-radius:9px}.lesson-top>.progress-track{background:#e5e5e5}
@keyframes combo-enter{0%{opacity:0;transform:translateY(5px) scale(.85)}65%{transform:translateY(-2px) scale(1.05)}100%{opacity:1;transform:none}}
.completion{position:relative}.completion-scene{position:relative;width:250px;height:240px;margin:0 auto 16px;display:grid;place-items:center;isolation:isolate}.completion-scene:before{content:'';position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,#efffd7 0%,#f7ffe9 60%,#fff 70%);z-index:-2;animation:halo-in .7s ease-out both}.completion-scene>.mascot{--mascot-size:208px!important}.completion-scene>.reward-art{position:absolute;right:0;bottom:0;animation:medal-in .5s .15s ease-out both}.celebration-orbit{position:absolute;inset:0;border:2px dashed #dbefbc;border-radius:50%;z-index:-1;animation:orbit-turn 24s linear infinite}.completion h1{color:#58a700;font-size:31px}.completion .result-stats{margin-top:28px}.result-stats>div{border-radius:14px;overflow:hidden;animation:medal-in .45s both}.result-stats>div:nth-child(2){animation-delay:.1s}.result-stats>div:nth-child(3){animation-delay:.2s}.result-stats>div>b{display:flex;justify-content:center;align-items:center;gap:3px;font-size:20px}.result-stats .reward-art{margin:-7px 0}.result-stats em{font-style:normal}.completion .confetti{display:none}
@keyframes halo-in{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes orbit-turn{to{transform:rotate(360deg)}}
.motion-particles{position:absolute;left:50%;top:40%;pointer-events:none;z-index:4;width:0;height:0}.motion-particles i{position:absolute;width:8px;height:12px;border-radius:3px;animation:confetti-burst 1.2s var(--delay) cubic-bezier(.15,.6,.3,1) both}.motion-particles i:nth-child(3n){border-radius:50%;height:8px}.motion-particles i:nth-child(4n){width:5px;height:15px}@keyframes confetti-burst{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.3)}10%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.8)}}
.reward-modal{width:440px;text-align:center;padding:30px 28px}.reward-scene{height:190px;display:grid;place-items:center;position:relative;background:radial-gradient(ellipse,#fff6c6,transparent 67%)}.reward-scene>.reward-art{animation:reward-reveal .65s cubic-bezier(.2,.8,.25,1) both}.reward-modal h2{font-size:26px;color:#58a700;margin:12px 0}.reward-modal p{color:#82916f;font-size:14px}.reward-modal .primary{width:100%;margin-top:12px}.reward-amount{display:flex;align-items:center;justify-content:center;gap:8px;color:#1cb0f6;font-size:28px;font-weight:850}.streak-days{font-size:54px;font-weight:900;color:#ff9600;line-height:1.2}.streak-days small{font-size:18px}.preference-buttons{display:flex;gap:10px;flex-wrap:wrap}.reward-modal .reward-flame{animation:flame-dance 2.5s infinite ease-in-out}
@keyframes reward-reveal{0%{opacity:0;transform:translateY(20px) scale(.6) rotate(-8deg)}65%{opacity:1;transform:translateY(-6px) scale(1.06) rotate(3deg)}100%{transform:none;opacity:1}}
.mascot-button{padding:0;border-radius:50%;position:relative}.mascot-button:hover .mascot-sprite{filter:brightness(1.03)}.mascot-button:focus-visible{outline-offset:4px}.mascot-button:active{transform:scale(.96)}.editor-heading-actions .mascot{margin:-7px 0}.code-editor[data-run-state=running] .file-dot{animation:energy-pulse .8s infinite}.code-editor[data-run-state=success] .console-dot{background:#58cc02}.code-editor[data-run-state=error] .console-dot{background:#ff9600}.preference-buttons .outline{min-height:44px}
.motion-offscreen,.motion-offscreen *,html.motion-hidden *,html.motion-hidden *:before,html.motion-hidden *:after{animation-play-state:paused!important}
html[data-motion=reduced] *,html[data-motion=reduced] *:before,html[data-motion=reduced] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html[data-motion=reduced] .motion-particles{display:none}
@media(max-width:1100px){.brand>.mascot{--mascot-size:44px!important;margin:0}.stats{gap:13px}}
@media(max-width:600px){.stats{gap:9px}.stats .reward-art{--reward-size:31px!important}.stats button{gap:3px}.stats .motion-toggle{font-size:21px}.topbar{gap:8px}.course-selector{gap:5px}.course-selector b{font-size:10px}.course-selector .chevron{margin:0}.path-character{left:calc(50% + 43px);top:181px}.path-character .mascot{--mascot-size:115px!important}.path-character>div{font-size:10px}.learning-path{height:610px}.chest{top:515px;left:calc(50% + 23px)}.chest>.reward-art{--reward-size:76px!important}.chest>span:last-child{font-size:9px}.question-stage{gap:12px;margin:0 0 20px;min-height:105px}.question-stage>.mascot{--mascot-size:80px!important}.question-speech{padding:15px 17px;border-radius:15px}.question-speech h1{font-size:17px;letter-spacing:0}.question-speech small{font-size:10px}.lesson-kicker{font-size:11px;gap:8px}.combo-pill{font-size:10px}.combo-pill .reward-art{--reward-size:28px!important}.feedback{gap:12px}.feedback-badge{width:44px;height:44px}.feedback-badge .reward-art{--reward-size:40px!important}.feedback strong{font-size:18px}.feedback p{font-size:12px}.completion-scene{width:205px;height:200px}.completion-scene>.mascot{--mascot-size:173px!important}.completion-scene>.reward-art{--reward-size:70px!important}.completion h1{font-size:25px}.result-stats>div>b{font-size:16px;gap:0}.result-stats .reward-art{--reward-size:30px!important}.reward-modal{padding:24px}.reward-modal h2{font-size:23px}.lesson-title .corn{height:var(--mascot-size)}.completion>.corn{height:var(--mascot-size)}.editor-heading-actions .mascot{display:none}.unit-banner h1{font-size:23px}.unit-banner p{font-size:11px}.brand>.mascot{--mascot-size:42px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-particles{display:none}}
@media(min-width:601px) and (max-height:850px){.lesson-top{padding:22px 32px}.lesson-body{margin:12px auto}.lesson-body:has(.question-stage) .lesson-kicker{margin-bottom:12px}.question-stage{min-height:85px;margin-bottom:12px;gap:18px}.question-stage>.mascot{--mascot-size:85px!important}.question-speech{padding:13px 20px}.question-speech h1{font-size:21px}.question-speech small{margin-top:4px;font-size:11px}.question-code{padding:12px 20px;font-size:15px;margin:12px 0;line-height:1.65}.options{gap:9px;margin-top:16px}.option{min-height:51px;padding:10px 16px}.lesson-footer>div{min-height:98px;padding:17px 35px}.completion-scene{width:205px;height:190px;margin-bottom:8px}.completion-scene>.mascot{--mascot-size:175px!important}.completion-scene>.reward-art{--reward-size:72px!important}.completion h1{margin-bottom:10px}.completion .result-stats{margin-top:18px}}
.result-stats .reward-art{background:transparent url('media/motion/reward-atlas.webp') var(--reward-x) var(--reward-y)/400% 200% no-repeat;padding:0}
.stats .motion-toggle{font-size:17px;font-weight:850;width:32px;min-height:34px;justify-content:center;border-radius:9px;background:#f1f7e9;color:#78a447}.stats .motion-toggle[aria-pressed=false]{background:#f4f4f4;color:#999}.course-selector b{white-space:nowrap}
@media(max-width:600px){.stats{gap:7px}.stats .motion-toggle{width:27px;min-height:32px;font-size:14px}.course-selector b{font-size:10px}}