/* Math Galaxy: a joyful, self-contained, kid-friendly experience. */
:root {
  --ink:#263858;--muted:#61718b;--paper:#fffefa;--purple:#7354d8;
  --purple-deep:#5e3bbb;--pink:#ff79ae;--mint:#35c3af;--sky:#6bd8ff;
  --sun:#ffcd62;--line:#e7e8f4;--success:#0b8167;--error:#a84668;
  --shadow:0 10px 0 rgba(76,94,156,.08),0 19px 45px rgba(77,99,150,.1);
}
*{box-sizing:border-box}
html{min-width:320px}
body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--ink);font-family:ui-rounded,"Trebuchet MS","Arial Rounded MT Bold",system-ui,-apple-system,sans-serif;line-height:1.45;background:radial-gradient(ellipse at 83% 11%,#fff2b9 0,transparent 22%),radial-gradient(ellipse at 0% 63%,#e5d5ff 0,transparent 33%),linear-gradient(158deg,#ccf5ff 0%,#edecff 48%,#fff3ef 100%)}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
button:focus-visible{outline:4px solid #feaf40;outline-offset:4px}
.hidden{display:none!important}
.bg-stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sky-cloud{position:absolute;width:150px;height:38px;background:#ffffff80;border-radius:70px;filter:blur(1px)}
.sky-cloud:before,.sky-cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.sky-cloud:before{width:76px;height:76px;left:20px;bottom:0}.sky-cloud:after{width:87px;height:57px;left:67px;bottom:0}
.cloud-a{top:12%;left:-25px;animation:cloudDrift 14s ease-in-out infinite alternate}
.cloud-b{top:36%;right:4%;transform:scale(.72);animation:cloudDrift 19s ease-in-out infinite alternate-reverse}
.cloud-c{top:84%;left:24%;transform:scale(.55);animation:cloudDrift 22s ease-in-out infinite alternate}
.bg-sparkle{position:absolute;color:#fff;font-size:36px;animation:twinkle 3s ease-in-out infinite}
.sparkle-a{left:7%;top:33%}.sparkle-b{right:9%;top:56%;color:#efb6e2;animation-delay:.8s}.sparkle-c{left:14%;bottom:8%;color:#a0d9f8;animation-delay:1.7s}
.app{max-width:1160px;margin:auto;padding:23px 22px 54px;position:relative;z-index:1}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:21px}
.brand{display:flex;align-items:center;gap:13px}
.brand-icon{width:58px;height:58px;display:grid;place-items:center;font-size:30px;background:#fff;border:3px solid #fff;border-radius:20px;box-shadow:0 5px 0 #b7dced,0 10px 21px #94bacc5c;transform:rotate(-6deg);animation:rocketWiggle 4s ease-in-out infinite}
.brand-name{font-size:26px;line-height:1;font-weight:1000;letter-spacing:-.8px;color:#463890;text-shadow:0 2px 0 #fff}
.brand-star{color:#ffaf36;font-size:17px;vertical-align:top}
.brand-tag{margin-top:6px;color:#6b76a6;font-size:12px;font-weight:850}
.top-actions{display:flex;align-items:center;gap:12px}
.top-stat{border:2px solid #fff;background:#fff;border-radius:30px;box-shadow:0 5px 0 #cee1f0;font-weight:1000;padding:10px 17px;color:#4e408d;white-space:nowrap;font-size:18px}
.top-stat small{font-size:10px;letter-spacing:1px;color:#7180a8;margin-right:8px}
.sound-btn{border:2px solid #fff;background:#fff;border-radius:50%;height:48px;width:48px;font-size:23px;box-shadow:0 5px 0 #cee1f0}
.hero{position:relative;min-height:244px;margin-bottom:20px;display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:6px;align-items:center;border-radius:34px;background:linear-gradient(110deg,#71d9ed 0%,#92dffe 47%,#bbc0ff 100%);border:4px solid #fff;box-shadow:0 8px 0 #b2d9e6,0 18px 38px #7aabc91e;overflow:hidden;padding:23px 36px}
.hero:before{content:"";position:absolute;left:44%;top:-84px;width:190px;height:190px;border:24px solid #ffffff2e;border-radius:50%;pointer-events:none}
.hero:after{content:"";position:absolute;right:-50px;bottom:-96px;width:350px;height:170px;background:#91deb0;border-radius:50%;box-shadow:-185px 26px 0 6px #b0eaca;pointer-events:none}
.hero-copy{position:relative;z-index:3}
.hero .eyebrow{display:inline-block;margin:0 0 9px;background:#fff7d4;border:2px solid #fff;border-radius:28px;color:#89623a;font-size:11px;font-weight:1000;letter-spacing:1px;padding:6px 12px}
.hero h1{margin:0 0 7px;max-width:580px;color:#28436d;font-weight:1000;letter-spacing:-1.8px;font-size:clamp(32px,4.2vw,54px);line-height:1.07}
.hero h1 span{color:#fff;text-shadow:0 4px 0 #738bc7,0 0 12px #84ace4a0}
.hero p:not(.eyebrow){font-size:15px;color:#294d72;line-height:1.6;font-weight:850;max-width:485px;margin:8px 0}
.hero-bubbles{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.hero-bubbles span{display:inline-flex;padding:7px 12px;border-radius:30px;background:#ffffffd9;color:#6b4d9a;font-size:12px;font-weight:1000;box-shadow:0 3px 0 #99bfd644}
.hero-bubbles span:nth-child(2){background:#fff5b9;color:#805f14}.hero-bubbles span:nth-child(3){background:#ffe0ee;color:#a3477a}
.hero-sun{position:absolute;top:-46px;right:166px;width:108px;height:108px;border-radius:50%;background:#fff4a0;box-shadow:0 0 0 14px #fff3ab3e;opacity:.7}
.hero-ground{position:absolute;bottom:-36px;left:-60px;background:#a6ecbc;width:420px;height:72px;border-radius:50%;opacity:.65;z-index:1}
.planet-art{width:275px;height:215px;position:relative;z-index:4;display:grid;place-items:center;align-self:end}
.mascot-wrap{width:170px;height:175px;position:relative;z-index:2;animation:mascotFloat 2.8s ease-in-out infinite;transform-origin:50% 80%}
.mascot-body{position:absolute;top:22px;left:7px;width:157px;height:142px;border-radius:45% 46% 43% 43% / 45% 45% 52% 52%;background:linear-gradient(125deg,#fff1a5 0%,#ffe07e 62%,#ffc56d 100%);border:5px solid #f7bb56;box-shadow:inset -11px -9px 0 #eea45239,0 8px 0 #00000012;z-index:4}
.mascot-shine{position:absolute;top:16px;left:24px;width:39px;height:12px;transform:rotate(-23deg);background:#ffffff90;border-radius:50%}
.mascot-face{position:absolute;inset:34px 15px auto;height:56px}
.mascot-eye{position:absolute;top:1px;left:18px;width:16px;height:26px;background:#3c4378;border-radius:50%;animation:blink 6s infinite;transform-origin:center}
.mascot-eye:nth-child(2){left:auto;right:18px}
.mascot-eye:after{content:"";position:absolute;width:6px;height:8px;border-radius:100%;background:#fff;top:3px;left:4px}
.mascot-mouth{position:absolute;top:21px;left:50%;margin-left:-17px;width:34px;height:24px;border-radius:0 0 24px 24px;border:4px solid #6f4671;border-top:0;background:#f8879b}
.mascot-blush{position:absolute;top:29px;width:21px;height:11px;border-radius:50%;background:#ff9ca1aa}
.mascot-blush.left{left:1px}.mascot-blush.right{right:1px}
.mascot-belly{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);color:#fff;font-size:25px;text-shadow:0 2px #e79d79}
.mascot-antenna{position:absolute;top:0;left:83px;width:6px;height:28px;background:#f4ba56;transform:rotate(10deg);z-index:2;border-radius:6px}
.mascot-antenna i{display:block;position:absolute;top:-11px;left:-8px;width:22px;height:22px;background:#ff86ab;border:4px solid #ee6a90;border-radius:50%}
.mascot-ears i{position:absolute;top:48px;width:42px;height:54px;border:5px solid #eeb15a;background:#ffdf81;border-radius:40px;z-index:1}
.mascot-ears i:first-child{left:-12px;transform:rotate(-26deg)}.mascot-ears i:last-child{right:-12px;transform:rotate(26deg)}
.mascot-arms i{position:absolute;top:93px;width:45px;height:20px;background:#ffd17b;border:4px solid #e9ae55;border-radius:28px;z-index:1}
.mascot-arms i:first-child{left:-28px;transform:rotate(29deg)}.mascot-arms i:last-child{right:-28px;top:69px;transform:rotate(-49deg);transform-origin:left center;animation:waveArm 1.6s ease-in-out infinite}
.mascot-legs i{position:absolute;bottom:-4px;width:37px;height:32px;background:#f0a658;border:4px solid #d99148;border-radius:13px 13px 23px 23px;z-index:3}
.mascot-legs i:first-child{left:24px;transform:rotate(12deg)}.mascot-legs i:last-child{right:24px;transform:rotate(-12deg)}
.mascot-shadow{width:130px;height:17px;border-radius:50%;background:#68a9a05a;position:absolute;left:50%;transform:translateX(-50%);bottom:1px;animation:shadowPulse 2.8s ease-in-out infinite}
.mascot-hello{position:absolute;top:9px;left:-12px;z-index:5;color:#7452a6;background:white;padding:10px 13px;border-radius:17px;font-size:13px;font-weight:1000;box-shadow:0 4px 0 #bfa3ed;transform:rotate(-8deg)}
.mascot-hello:after{content:"";position:absolute;bottom:-8px;right:12px;border-width:9px 9px 0 0;border-style:solid;border-color:white transparent transparent transparent}
.orbit-star{position:absolute;z-index:6;animation:twinkle 2.4s ease-in-out infinite;color:#fff8a5;text-shadow:0 2px #e7a645}
.star-a{font-size:37px;right:7px;top:5px}.star-b{font-size:27px;left:20px;bottom:28px;animation-delay:.6s}.star-c{font-size:33px;right:1px;bottom:50px;color:#ff9aca;animation-delay:1.1s}
/* navigation */
.tabs{display:flex;gap:10px;background:#ffffff8c;width:max-content;padding:6px;border:2px solid #fff;border-radius:20px;box-shadow:0 5px 0 #d3d9e5b3;margin:0 0 19px}
.tab{padding:12px 23px;background:transparent;border:0;color:#635b94;border-radius:15px;font-size:14px;font-weight:1000;transition:transform .18s,background .18s}
.tab[aria-selected="true"]{background:linear-gradient(120deg,#805ff0,#a287fa);box-shadow:0 4px 0 #5b41c1;color:#fff;transform:translateY(-2px)}
.content{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:19px;align-items:start}
.main-card,.side-card{background:var(--paper);border:3px solid #fff;color:var(--ink);border-radius:29px;box-shadow:var(--shadow)}
.main-card{min-height:495px;padding:26px}.side-card{padding:23px;margin-bottom:18px}
.section-row{display:flex;align-items:center;justify-content:space-between;gap:13px;flex-wrap:wrap}
.section-title{font-weight:1000;font-size:23px;letter-spacing:-.6px;margin:0;color:#3d438b}
.pill{background:#ffeaad;color:#8a5f27;border:2px solid #ffde7d;border-radius:28px;padding:7px 13px;font-size:12px;font-weight:1000}
.settings{display:flex;align-items:end;flex-wrap:wrap;gap:16px;margin:22px 0 24px}
.select-label{font-size:11px;font-weight:1000;letter-spacing:1px;text-transform:uppercase;color:#697599;display:block;margin-bottom:8px}
.segmented{display:flex;align-items:center;gap:5px;padding:5px;background:#f0efff;border:2px solid #e9e7fb;border-radius:16px;flex-wrap:wrap}
.segmented button{border:0;border-radius:12px;padding:9px 11px;background:transparent;color:#747194;font-size:12px;font-weight:1000;white-space:nowrap}
.segmented button.active{background:#fff;box-shadow:0 3px 0 #c7c0ed;color:#6241bd}
.segmented button[data-level="starter"].active{background:#dafff2;color:#137b66;box-shadow:0 3px 0 #a6e5ce}
.segmented button[data-level="superstar"].active{background:#ffdbeb;color:#a13b70;box-shadow:0 3px 0 #ecb4cb}
.mission-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:11px}
.mission-head strong{font-size:13px;font-weight:1000;color:#415181}.mission-head span{font-size:12px;font-weight:950;color:#9a6a22}
.progress-track{height:15px;background:#ebeefe;border:2px solid #e0e5f6;border-radius:50px;overflow:hidden;margin-bottom:20px}
.progress-fill{width:0;height:100%;border-radius:50px;background:repeating-linear-gradient(115deg,#5dd5ba 0 14px,#7ee7cc 14px 28px);transition:width .4s cubic-bezier(.19,1,.22,1)}
.question-stage{position:relative;text-align:center;padding:29px 18px 24px;overflow:hidden;border-radius:26px;border:3px solid #f0dffe;background:radial-gradient(circle at 85% 15%,#ffffff99 0 15%,transparent 16%),linear-gradient(128deg,#fff0fc,#f0ecff 53%,#e9fbff)}
.question-stage:before{content:"✿";font-size:38px;position:absolute;top:12px;left:19px;color:#ffc2dd;animation:spinSway 8s ease-in-out infinite}
.question-stage:after{content:"✦";font-size:37px;position:absolute;right:14px;bottom:9px;color:#8edccc;animation:twinkle 3.6s ease-in-out infinite}
.question-sticker{position:absolute;top:12px;right:22px;font-size:26px;animation:twinkle 3.2s ease-in-out infinite;z-index:1}
.question-stage.celebrate{animation:stagePop .48s ease-out}
.question-type{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#8d5db1;font-weight:1000;position:relative;z-index:1}
.question-text{font-size:clamp(37px,5.3vw,62px);font-weight:1000;letter-spacing:-2px;margin:7px 0;line-height:1.28;color:#4b369b;position:relative;z-index:1}
.word-problem{font-size:14px;max-width:440px;line-height:1.5;color:#5c648e;font-weight:850;margin:5px auto 0;position:relative;z-index:1}
.choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0 19px}
.choice{min-height:84px;border:3px solid #e5dffa;border-bottom-width:5px;border-radius:22px;background:#f3eaff;color:#583f91;font-size:31px;font-weight:1000;box-shadow:0 5px 0 #dac8f1;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.choice:nth-child(4n+2){background:#e5faff;border-color:#b9edff;color:#286d8c;box-shadow:0 5px 0 #a3d8f3}
.choice:nth-child(4n+3){background:#fff0ce;border-color:#ffe3a0;color:#9f6c2e;box-shadow:0 5px 0 #edd090}
.choice:nth-child(4n+4){background:#ffe9f1;border-color:#ffc9de;color:#a94379;box-shadow:0 5px 0 #f0b5d1}
.choice:hover:not(:disabled){transform:translateY(-4px) rotate(-1deg);filter:saturate(1.15)}
.choice:active:not(:disabled){transform:translateY(4px);box-shadow:none}
.choice.wrong{background:#ffe9ef!important;border-color:#eeb0c2!important;color:#993d61!important;box-shadow:0 5px 0 #f2c9d4!important;animation:gentleShake .38s ease-in-out}
.choice.correct{background:#d8ffea!important;border-color:#52c89e!important;color:#087a60!important;box-shadow:0 5px 0 #91dfba!important;animation:correctPop .6s ease-out}
.choice:disabled:not(.correct):not(.wrong){opacity:.57}
.feedback{display:flex;align-items:center;gap:9px;margin-bottom:14px;padding:13px 16px;border-radius:18px;font-weight:1000;font-size:14px;line-height:1.4}
.feedback.success{background:#dffff0;color:#167154;border:2px solid #baf0d6}.feedback.success:before{content:"🎉";font-size:20px}
.feedback.error{background:#fff0f5;color:#9d4763;border:2px solid #f9ccda}.feedback.error:before{content:"💛";font-size:20px}
.feedback.neutral{background:#f0eeff;color:#6447a3;border:2px solid #dfd6f9}.feedback.neutral:before{content:"💡";font-size:20px}
.action-row{display:flex;justify-content:space-between;align-items:center;gap:9px;flex-wrap:wrap}
.hint-button,.ghost-button{border:2px solid #e9dafa;background:#f7f1ff;color:#6248ba;border-radius:16px;font-weight:1000;padding:12px 14px;font-size:13px}
.ghost-button{background:#fff;color:#76809d;border-color:#eaecf4}
.primary-button{border:0;border-radius:16px;background:linear-gradient(145deg,#7e60e9,#a37ef6);color:white;font-weight:1000;font-size:15px;box-shadow:0 5px 0 #6548bb;padding:13px 21px;transition:transform .12s ease,box-shadow .12s ease}
.primary-button:hover{transform:translateY(-2px)}.primary-button:active{transform:translateY(3px);box-shadow:0 2px 0 #6548bb}
.hint-panel{background:#fffdfd;border:2px dashed #d9baf4;border-radius:20px;margin-top:17px;padding:17px}
.hint-panel h3{color:#6542a1;margin:0 0 8px;font-size:17px}.hint-panel p{color:#62708c;font-weight:750;font-size:13px;margin:0 0 13px}
.group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:9px;max-height:306px;overflow:auto;padding:2px}
.group{background:#f6f2ff;border:2px solid #e2daf9;border-radius:16px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;animation:appearGroup .35s ease-out both}
.group:nth-child(3n + 2){background:#ebfcff;border-color:#c7eef8}.group:nth-child(3n){background:#fff9e5;border-color:#f7e5af}
.group-label{font-size:11px;font-weight:1000;color:#695f99}
.dots{display:grid;grid-template-columns:repeat(4,15px);gap:6px;align-content:start;justify-content:center;min-height:16px}
.dot{width:15px;height:15px;border-radius:50%;background:#ad8cea;box-shadow:inset -3px -3px 0 #8365b755}
.group:nth-child(3n+2) .dot{background:#5ad5cf;box-shadow:inset -3px -3px 0 #20aeab55}.group:nth-child(3n) .dot{background:#ffc263;box-shadow:inset -3px -3px 0 #d3924155}
.hint-takeaway{border-radius:13px;background:#ece7ff;color:#6348a4;font-size:13px;font-weight:950;padding:13px;margin-top:14px}
/* Sidebar stickers */
.side-card:first-child{background:linear-gradient(155deg,#fffefa,#fff5d8);border-color:white}
.side-eyebrow{font-size:11px;letter-spacing:1px;color:#8872a9;font-weight:1000;margin-bottom:9px}
.star-number{font-size:42px;line-height:1.2;font-weight:1000;color:#8651af}
.star-number span:first-child{font-size:41px;display:inline-block;animation:starWobble 3s ease-in-out infinite}
.subtle{font-size:12px;font-weight:800;color:#7d7693}
.stat-details{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:2px dashed #eadfc2;margin-top:15px;padding-top:13px;font-size:13px;font-weight:900;color:#79738e}
.stat-details strong{font-size:18px;color:#574f98}
.coach{background:#e6fff6;position:relative;overflow:hidden}
.coach:before{content:"";position:absolute;right:-36px;top:-47px;width:135px;height:135px;border-radius:50%;background:#c5f4e2}
.coach-icon{position:relative;font-size:51px;display:inline-block;transform-origin:bottom center;animation:starWobble 4s ease-in-out infinite}
.coach h3{font-size:18px;margin:9px 0;color:#217f79;line-height:1.24}
.coach p{margin:0;color:#4c7979;font-size:14px;font-weight:800;line-height:1.55}
.coach-tag{display:inline-block;padding:7px 10px;font-size:12px;font-weight:950;color:#238477;background:#fff;border-radius:22px;margin-top:14px}
/* Visual learning activity */
.learn-intro{font-size:14px;font-weight:750;color:#68768f;margin:10px 0}
.learn-tools{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
.stepper{padding:15px;flex:1;min-width:185px;border:3px solid #e8e0fd;border-radius:19px;background:#faf7ff}
.stepper:nth-child(2){background:#edfffd;border-color:#d9f6ef}
.stepper-label{font-size:12px;font-weight:950;color:#6d6796}
.stepper-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.stepper-controls strong{font-size:29px;color:#5f44b6}
.stepper-controls button{width:43px;height:43px;border:0;border-radius:13px;background:#e7dafa;color:#5d3ea5;font-size:27px;font-weight:1000;box-shadow:0 3px 0 #cab8eb}
.stepper:nth-child(2) .stepper-controls button{background:#d0f8ee;color:#138675;box-shadow:0 3px 0 #9fe2d2}
.learn-equations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:20px}
.equation-card{background:#f0e8ff;border:2px solid #decafa;border-radius:18px;padding:17px 8px;text-align:center;color:#6344b9}
.equation-card:nth-child(2){background:#e5fdf5;border-color:#baf0d8;color:#1c856b}
.equation-label{display:block;letter-spacing:1px;font-weight:1000;text-transform:uppercase;font-size:11px;margin-bottom:4px}
.equation-value{font-size:clamp(20px,3vw,29px);font-weight:1000;white-space:nowrap}
.learn-explanation{font-size:14px;color:#697292;font-weight:900;margin:0 0 15px}
.learn-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-top:17px}
.finish{text-align:center;padding:35px 4px 30px}
.finish-emoji{font-size:75px;line-height:1.3;animation:mascotFloat 2.7s ease-in-out infinite}
.finish h2{font-weight:1000;font-size:35px;letter-spacing:-1px;margin:12px 0 8px;color:#563fa1}
.finish p{font-size:15px;font-weight:850;max-width:440px;margin:0 auto 20px;color:#73738c}
.finish-stars{display:inline-block;padding:13px 23px;border-radius:19px;background:#fff0c6;border:3px solid #ffe29a;color:#a26a19;font-size:25px;font-weight:1000;margin-bottom:22px}
.finish-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden;z-index:2}
.confetti i{position:absolute;left:50%;top:43%;width:9px;height:11px;border-radius:3px;animation:burst .95s ease-out forwards;transform:translate(0,0)}
.footer{text-align:center;margin:30px auto 0;font-size:12px;color:#60759d;font-weight:900}
/* Motion is joyful but always optional. */
@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes waveArm{0%,100%{transform:rotate(-49deg)}50%{transform:rotate(-82deg)}}
@keyframes blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@keyframes shadowPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.5}50%{transform:translateX(-50%) scale(.78);opacity:.3}}
@keyframes twinkle{0%,100%{transform:scale(.9) rotate(-6deg);opacity:.8}50%{transform:scale(1.25) rotate(8deg);opacity:1}}
@keyframes rocketWiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(4deg)}}
@keyframes starWobble{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(10deg) scale(1.09)}}
@keyframes cloudDrift{to{translate:55px 0}}
@keyframes burst{to{transform:translate(var(--x),var(--y)) rotate(520deg);opacity:0}}
@keyframes stagePop{0%,100%{transform:scale(1)}40%{transform:scale(1.025)}}
@keyframes appearGroup{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes gentleShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
@keyframes correctPop{0%{transform:scale(1)}35%{transform:scale(1.07)}70%,100%{transform:scale(1)}}
@keyframes spinSway{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(28deg)}}
@keyframes happyDance{0%,100%{transform:rotate(0) translateY(0)}24%{transform:rotate(-12deg) translateY(-18px)}51%{transform:rotate(11deg) translateY(-11px)}76%{transform:rotate(-7deg) translateY(-17px)}}
@keyframes oopsNod{0%,100%{transform:rotate(0)}33%{transform:rotate(-7deg)}66%{transform:rotate(7deg)}}
.mascot-wrap.happy{animation:happyDance .75s ease-out 2}.mascot-wrap.encourage{animation:oopsNod .6s ease-in-out 2}
@media(max-width:940px){.content{grid-template-columns:minmax(0,1fr)}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.side-card{margin-bottom:0}.settings{gap:13px}}
@media(max-width:650px){
  .app{padding:15px 12px 38px}
  .topbar{margin-bottom:14px}.brand{gap:9px}.brand-icon{height:43px;width:43px;border-radius:15px;font-size:23px}.brand-name{font-size:19px}.brand-tag{font-size:10px;margin-top:4px}
  .top-actions{gap:8px}.top-stat{padding:7px 12px;font-size:14px}.top-stat small{display:none}.sound-btn{height:40px;width:40px;font-size:20px}
  .hero{min-height:180px;grid-template-columns:minmax(0,1fr) 122px;gap:0;padding:17px 11px 22px 16px;border-radius:25px;margin-bottom:17px}
  .hero .eyebrow{font-size:8px;letter-spacing:.5px;padding:4px 7px;margin-bottom:7px}
  .hero h1{font-size:clamp(25px,7.2vw,35px);letter-spacing:-1px;line-height:1.07}
  .hero p:not(.eyebrow){font-size:11px;line-height:1.42;margin:6px 0;max-width:270px}
  .hero-bubbles{gap:4px;margin-top:10px}.hero-bubbles span{padding:4px 7px;font-size:9px}
  .hero-sun{right:44px;top:-50px;width:95px;height:95px}
  .planet-art{width:134px;height:147px;transform:translate(3px,17px);align-self:end}
  .mascot-wrap{transform:scale(.67);transform-origin:center bottom;position:absolute;top:-30px;left:-16px;animation:none}
  .mascot-wrap:not(.happy):not(.encourage){animation:smallMascotFloat 2.8s ease-in-out infinite}
  .mascot-shadow{width:75px;bottom:7px;left:49%}
  .mascot-hello{font-size:9px;top:7px;left:-8px;padding:6px 8px}
  .star-a{right:-1px;top:14px;font-size:22px}.star-b{left:7px;bottom:34px;font-size:18px}.star-c{right:2px;bottom:36px;font-size:20px}
  .tabs{width:100%;padding:5px;gap:5px;margin-bottom:13px}.tab{flex:1;min-width:0;padding:11px 8px;font-size:12px;line-height:1.2}
  .main-card{border-radius:23px;padding:18px 13px;min-height:460px}.side-card{border-radius:23px;padding:17px}
  .section-title{font-size:19px}.pill{font-size:10px;padding:6px 9px}
  .settings{gap:12px;margin:17px 0 19px}.settings>div{width:100%}.select-label{margin-bottom:6px;font-size:10px}
  .segmented{width:100%;flex-wrap:nowrap;gap:4px}.segmented button{flex:1;min-width:0;padding:9px 3px;font-size:11px}
  .progress-track{margin-bottom:14px}.question-stage{padding:24px 12px 19px;border-radius:20px}.question-stage:before{font-size:22px}.question-stage:after{font-size:23px}
  .question-text{font-size:clamp(33px,10vw,48px)}.word-problem{font-size:12px}.question-type{font-size:10px}
  .choices{gap:8px;margin:15px 0}.choice{min-height:66px;border-radius:16px;font-size:25px;border-width:2px 2px 4px}
  .action-row{gap:8px}.hint-button,.ghost-button{padding:11px 12px;font-size:12px}.primary-button{font-size:13px;padding:13px 16px}
  .sidebar{grid-template-columns:minmax(0,1fr);gap:13px}.learn-equations{gap:8px}.equation-value{font-size:19px}.stepper{min-width:135px}.stepper-controls button{width:39px;height:39px}
  .footer{line-height:1.55;margin-top:23px}
}
@keyframes smallMascotFloat{0%,100%{transform:scale(.67) translateY(0) rotate(-2deg)}50%{transform:scale(.67) translateY(-7px) rotate(2deg)}}
@media(max-width:360px){.hero{grid-template-columns:minmax(0,1fr) 104px}.planet-art{width:113px;transform:translate(-2px,18px)}.hero-bubbles span:last-child{display:none}.mascot-wrap{left:-26px}.hero h1{font-size:26px}.segmented button{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@keyframes smallHappy{0%,100%{transform:scale(.67) translateY(0) rotate(0)}30%{transform:scale(.67) translateY(-22px) rotate(-12deg)}68%{transform:scale(.67) translateY(-15px) rotate(12deg)}}
@keyframes smallOops{0%,100%{transform:scale(.67) rotate(0)}35%{transform:scale(.67) rotate(-8deg)}70%{transform:scale(.67) rotate(8deg)}}
@media(max-width:650px){.mascot-wrap.happy{animation:smallHappy .7s ease-out 2}.mascot-wrap.encourage{animation:smallOops .6s ease-in-out 2}}

/* Candy builder: large touch targets, fully child-controlled drawings. */
.drawing-panel{background:linear-gradient(160deg,#fffdf5,#fffbff 58%,#effcff);border:3px dashed #efbae6;overflow:hidden}
.builder-heading{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.builder-heading h3{margin:0 0 3px;color:#8350af;font-size:21px}
.builder-heading p{margin:0;font-weight:900;color:#566888;line-height:1.5}
.builder-sticker{font-size:40px;display:grid;place-items:center;flex:0 0 59px;width:59px;height:59px;background:#ffdbed;border-radius:19px;border:3px solid #fff;box-shadow:0 4px 0 #ffc0da;animation:starWobble 3s infinite}
.builder-goal{background:#fff3c4;border:2px solid #ffdf8f;padding:12px 15px;border-radius:16px;font-weight:1000;color:#906626;font-size:14px;margin-bottom:13px}
.builder-tools{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:15px}
.builder-tools button,.builder-bottom button{min-height:49px;border-radius:14px;padding:10px 12px;font-size:13px;font-weight:1000;transition:transform .1s,background .1s}
.builder-tools button:not(:disabled):active,.builder-bottom button:not(:disabled):active{transform:scale(.97)}
.builder-add{background:#7d60e3;color:#fff;border:2px solid #7054cf;box-shadow:0 4px 0 #b7a2e8}
.builder-tool{background:#fff;border:2px solid #dad4fa;color:#6c569c}
.builder-tool.selected{background:#dcfff2;border-color:#42bfa2;color:#177e69;box-shadow:0 3px 0 #b6eada}
.builder-board{background:radial-gradient(circle,#e7dff6 1px,transparent 1px) 0 0/20px 20px,#fcfaff;min-height:162px;border:2px solid #e4d8f7;border-radius:20px;padding:15px 11px}
.builder-placeholder{padding:36px 15px;text-align:center;font-size:15px;color:#7d76a0;font-weight:900;line-height:1.6}
.builder-placeholder strong{color:#6843bd}
.builder-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;align-items:start}
.candy-box-wrap{position:relative;min-width:0;border-radius:18px;padding:9px 8px 10px;background:#f2eaff;border:2px solid #d5bfff;box-shadow:0 4px 0 #ddd0f6;display:flex;flex-direction:column;align-items:center;gap:7px;animation:appearGroup .2s ease-out both}
.candy-box-wrap:nth-child(3n+2){background:#e6fbff;border-color:#b2eafa;box-shadow:0 4px 0 #c4ebf2}
.candy-box-wrap:nth-child(3n){background:#fff3d5;border-color:#f4d695;box-shadow:0 4px 0 #f4e1ac}
.candy-box-label{color:#7352a1;font-size:11px;font-weight:1000;letter-spacing:1px}
.remove-box{position:absolute;z-index:1;top:2px;right:3px;border:0;border-radius:50%;width:28px;height:28px;background:#fff6fa;color:#9a5583;font-size:22px;line-height:22px;font-weight:1000}
.candy-box{width:100%;min-height:108px;border:3px dashed #9c7fcb;border-radius:13px;background:#ffffffc7;display:flex;justify-content:center;align-items:center;padding:8px;transition:background .12s,transform .12s;touch-action:manipulation}
.candy-box:hover:not(:disabled){background:#fff;transform:scale(1.015)}
.candy-box:active:not(:disabled){transform:scale(.985);background:#fffcea}
.candy-box-count{font-weight:1000;color:#69528c;font-size:12px;text-align:center}
.candy-pieces{display:grid;grid-template-columns:repeat(4, minmax(0,20px));gap:6px;align-items:center;justify-content:center;max-width:100%;max-height:185px;overflow:auto}
.candy-piece{display:block;width:20px;height:20px;border-radius:50%;background:#fd8aad;border:2px solid #eb6494;box-shadow:inset -3px -3px 0 #de518547,inset 3px 3px 0 #fff9,0 2px 0 #ca77aa;animation:candyBounce .17s ease-out}
.candy-color-1{background:#a993f6;border-color:#8f74e2}.candy-color-2{background:#65d7c0;border-color:#3fbca5}.candy-color-3{background:#ffc966;border-color:#e6a54e}.candy-color-4{background:#7ccdfc;border-color:#4caade}
.builder-meter{margin:13px 0;font-size:13px;color:#63498f;font-weight:1000;background:#f4edff;border-radius:12px;padding:11px 12px;text-align:center}
.builder-bottom{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.builder-quiet{background:#fff;border:2px solid #e0dcef;color:#736c9a}
.builder-check{background:#22b69a;border:2px solid #209d87;color:white;box-shadow:0 4px 0 #90dbc9;flex:1;min-width:175px}
.builder-tools button:disabled,.builder-bottom button:disabled{opacity:.45;box-shadow:none}
.builder-message{padding:13px 14px;border:2px solid #ded1fa;background:#f3efff;border-radius:13px;margin-top:14px;color:#624a9b;font-size:14px;font-weight:1000;line-height:1.5}
.builder-message.try{background:#fff2e7;border-color:#ffd39a;color:#93621f}
.builder-message.right{background:#dcfff1;border-color:#91e5c0;color:#127e61}
.drawing-panel .hint-takeaway{line-height:1.5}
@keyframes candyBounce{0%{transform:scale(.2);opacity:.4}70%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
@media(max-width:650px){.builder-heading h3{font-size:18px}.builder-sticker{width:48px;height:48px;flex-basis:48px;font-size:30px}.builder-tools button{flex:1;min-width:125px}.builder-add{flex-basis:100%!important}.builder-boxes{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.candy-box-wrap{padding:8px 5px}.candy-box{min-height:102px}.builder-check{flex-basis:100%}.builder-bottom .builder-quiet{flex:1}}
@media(max-width:370px){.builder-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}.candy-pieces{grid-template-columns:repeat(4,minmax(0,17px));gap:4px}.candy-piece{width:17px;height:17px}}

/* Count it yourself: never display a computed candy count in the drawing board. */
.builder-answer{margin:14px 0 16px;padding:15px;border-radius:18px;background:linear-gradient(135deg,#fff0bd,#ffe5f2);border:2px solid #ffdaad;display:grid;gap:9px}
.builder-answer label{font-size:16px;font-weight:1000;line-height:1.4;color:#67468d}
.builder-answer-controls{display:flex;gap:10px;align-items:stretch}
.builder-answer-input,.builder-answer input{width:100%;min-width:0;flex:1;border:3px solid #cbbaf1;border-radius:14px;background:white;color:#55428e;padding:12px 14px;font-size:20px;font-weight:1000;text-align:center;outline-offset:2px}
.builder-answer input:focus{border-color:#855fe7;outline:2px solid #f2d8ff}
.builder-answer input::placeholder{font-size:15px;color:#a39bb2;opacity:1}
.builder-submit{min-width:175px;min-height:53px;flex:1;border:2px solid #299e81;background:#25b993;border-radius:14px;padding:9px 12px;color:#fff;font-size:15px;font-weight:1000;box-shadow:0 4px 0 #a9e7d3}
.builder-answer p{font-size:12px;font-weight:800;color:#735c92;margin:0;line-height:1.45}
.remove-box{width:44px;height:44px;top:0;right:0;font-size:25px;line-height:1}
.candy-box-label{padding:0 22px;min-height:22px;display:grid;place-items:center}
.candy-box,.builder-tools button,.builder-bottom button,.builder-answer button,.tab,.choice{touch-action:manipulation}
@media(max-width:650px){
  .builder-board{padding:12px 8px}
  .builder-heading{gap:8px}
  .builder-goal{font-size:13px}
  .builder-answer{padding:12px}
  .builder-answer-controls{flex-direction:column}
  .builder-answer input,.builder-submit{width:100%;min-width:0;min-height:54px;font-size:19px}
  .builder-submit{font-size:15px}
  .builder-tools button,.builder-bottom button{min-height:52px;font-size:13px}
  .remove-box{width:44px;height:44px}
  .builder-boxes{gap:8px}
  .builder-meter{line-height:1.5}
}
@media(hover:none){.candy-box:hover:not(:disabled){transform:none}.choice:hover:not(:disabled){transform:none}}

/* Candy counters have no digits: the child counts independently. */
/* Animate appearance without shrinking tap targets while boxes are drawn. */
@keyframes appearGroup{from{transform:translateY(3px);opacity:0}to{transform:translateY(0);opacity:1}}
.candy-pieces{
  display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start;
  gap:6px; width:100%; max-width:100%; max-height:none; overflow:visible;
}
.candy-piece{
  display:flex; flex:0 0 31px; justify-content:center; align-items:center;
  width:31px; height:31px; border-radius:50%; line-height:1;
  user-select:none;
}
.candy-box{min-height:115px;padding:8px 5px; align-items:flex-start}
.candy-box-wrap{min-width:0}
.builder-meter{font-size:14px;line-height:1.5}
@media(max-width:370px){
  .candy-pieces{display:flex;gap:4px}
  .candy-piece{flex-basis:28px;width:28px;height:28px;font-size:11px}
  .candy-box{padding:6px 3px}
}
@media(max-width:650px){
  .builder-tools button{min-height:52px}
  .builder-meter{font-size:13px}
  .candy-box{min-height:112px}
}

/* Candy numbers reset at 1 inside EACH box, not across boxes. No total counter. */
.candy-piece{font-size:14px;font-weight:1000;color:#382f65;text-shadow:0 1px 0 #ffffffaa;line-height:1}
@media(max-width:370px){.candy-piece{font-size:12px}}

/* Ten-out-of-ten Times Tables: a separate memorisation journey. */
.table-intro{color:#566787;font-weight:800;font-size:14px;line-height:1.6;margin:14px 0 18px}
.table-map{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:23px}
.table-map-item{min-width:0;min-height:54px;border-radius:14px;border:2px solid #e1d6fa;background:#f6f0ff;color:#644cac;font-size:16px;font-weight:1000;transition:transform .15s}
.table-map-item.current{border-color:#9371e8;background:#8462e8;color:#fff;box-shadow:0 4px 0 #c8b6ed;transform:translateY(-2px)}
.table-map-item.mastered:not(.current){background:#e4fff3;border-color:#9cddc3;color:#167961}
.table-map-item.locked{opacity:.55;background:#f2f1f8;border-color:#e3e2ed;color:#6f7191;cursor:not-allowed}
.table-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:1000;color:#5b458d;margin-bottom:12px}
.table-head span:last-child{color:#ab6790;white-space:nowrap}
.table-numberline{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin:-7px 0 16px}
.table-step{text-align:center;padding:6px 0;font-size:12px;font-weight:1000;color:#80769a;border-radius:7px;background:#f4f1fc}
.table-step.active{background:#9274ef;color:white;box-shadow:0 2px 0 #7157c3}
.table-step.past{background:#d0fbe7;color:#238a6b}
.table-challenge-card{text-align:center;background:linear-gradient(140deg,#fff0f7,#ede8ff 58%,#e5fbff);border:3px solid #ecdffc;border-radius:24px;padding:26px 8px 24px;position:relative;overflow:hidden}
.table-sticker{position:absolute;top:12px;right:16px;font-size:25px;animation:starWobble 3s infinite}
.table-question-index{color:#8e6aa3;font-weight:1000;font-size:12px;letter-spacing:2px}
.table-equation{font-weight:1000;font-size:clamp(38px,7vw,58px);color:#6841b5;letter-spacing:-1px;margin:10px 0}
.table-challenge-card p{font-size:13px;color:#6e678e;font-weight:850;margin:0}
/* Four huge choices in a cheerful 2x2 grid, designed for little fingers. */
.table-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 18px}
.table-choice{min-width:0;min-height:94px;border:3px solid #b9a6ee;border-radius:22px;font-size:clamp(27px,7vw,38px);font-weight:1000;color:#59468d;background:#f2eaff;box-shadow:0 6px 0 #d0c2ed;touch-action:manipulation;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;cursor:pointer}
.table-choice:nth-child(2){background:#fff0dd;border-color:#ffd298;box-shadow:0 6px 0 #ebc69e;color:#86552d}
.table-choice:nth-child(3){background:#e2f9f3;border-color:#97e1d0;box-shadow:0 6px 0 #a8ddd0;color:#257665}
.table-choice:nth-child(4){background:#ffe8f2;border-color:#f0bad4;box-shadow:0 6px 0 #edbdd3;color:#994e77}
.table-choice:not(:disabled):active{transform:translateY(4px);box-shadow:0 2px 0 #c2a3dd}
.table-choice:focus-visible{outline:4px solid #5a46bb;outline-offset:4px}
.table-choice.is-correct,.table-choice:nth-child(n).is-correct{background:#c7ffdd;border-color:#22a978;color:#126345;box-shadow:0 5px 0 #8bdfb3;animation:choiceCelebration .4s ease}
.table-choice.is-incorrect,.table-choice:nth-child(n).is-incorrect{background:#ffe2de;border-color:#e88f91;color:#9f3d47;box-shadow:0 5px 0 #f3bcbe}
.table-choice:disabled{cursor:default;opacity:1}
.table-choice:disabled:not(.is-correct):not(.is-incorrect){opacity:.55}
@keyframes choiceCelebration{50%{transform:scale(1.06)}}
@media(max-width:650px){.table-choices{gap:11px;margin:17px 0}.table-choice{min-height:82px;border-radius:18px;font-size:32px}}
@media(max-width:350px){.table-choices{gap:9px}.table-choice{min-height:72px;font-size:28px}}
@media(prefers-reduced-motion:reduce){.table-choice{transition:none}.table-choice.is-correct,.table-choice:nth-child(n).is-correct{animation:none}}
.table-feedback{padding:15px 17px;border-radius:15px;font-size:15px;font-weight:1000;line-height:1.5;margin:10px 0 16px}
.table-feedback.correct{background:#dcfff0;border:2px solid #87dfb3;color:#157a60}
.table-feedback.incorrect{background:#fff2df;border:2px solid #f4d195;color:#936727}
.table-next{display:block;width:100%;margin-top:12px;min-height:51px}
.table-results{text-align:center;padding:30px 6px}
.table-results-art{font-size:60px;animation:starWobble 3s infinite}
.table-results h3{color:#5d43ae;font-size:26px;line-height:1.18;margin:14px 0}
.table-results p{max-width:475px;margin:10px auto 20px;font-size:16px;line-height:1.55;color:#62708d;font-weight:850}
.table-results-score{font-size:38px;color:#219579;font-weight:1000;background:#e6fff3;border-radius:20px;padding:10px;max-width:190px;margin:15px auto 22px}
.table-results .primary-button{min-height:54px}
.tabs{flex-wrap:wrap}
@media(max-width:650px){.table-map{gap:6px}.table-map-item{min-height:49px;font-size:14px;border-radius:10px}.table-head{font-size:13px}.table-challenge-card{padding:26px 10px}.table-equation{font-size:clamp(38px,11vw,51px)}.tabs .tab{font-size:12px;padding:10px 11px}.tabs{gap:4px}}
@media(max-width:350px){.table-map-item{font-size:12px;min-height:46px}.table-head{font-size:12px}.tabs .tab{font-size:11px;padding:9px 8px}}