:root{font-family:ui-rounded,"Trebuchet MS", "Arial Rounded MT Bold",system-ui,sans-serif;color:#493066;background:#bce8ff;--ink:#493066;--blue:#238df4;--pink:#fa5aa8;--gold:#ffbf38;--green:#48c98f;--purple:#9958ed;--shadow:0 13px 28px rgba(82,70,142,.17);--profile:#268cf5}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;scroll-behavior:smooth}body{overflow-x:hidden;background:radial-gradient(circle at 10% 0%,#effbff 0,transparent 34%),radial-gradient(circle at 93% 14%,#ffdfeb 0,transparent 27%),linear-gradient(170deg,#90d7ff,#d1eaff 32%,#ffe5ef 76%,#fff6dd);background-attachment:fixed}button,select,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,[tabindex]:focus-visible{outline:4px solid #ffb81f;outline-offset:3px}button:disabled{opacity:.55;cursor:not-allowed}h1,h2,h3,p{margin:0}h1{font-size:clamp(1.75rem,4.4vw,3.1rem);line-height:1.09}h2{font-size:clamp(1.55rem,3vw,2.3rem)}h3{font-size:1.1rem}p{line-height:1.42}.app-shell{position:relative;z-index:2;width:min(1120px,100% - 28px);margin:0 auto;min-height:100dvh;padding:15px 0 96px}.ambient{pointer-events:none;position:fixed;inset:auto;z-index:0;border-radius:50%;filter:blur(42px);opacity:.56}.ambient-one{width:440px;height:440px;left:-200px;top:25%;background:#ffb5e5}.ambient-two{width:400px;height:400px;right:-180px;bottom:8%;background:#fbeb83}#sky-sparkles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}.sky-star{position:absolute;color:#fff1a2;opacity:.8;animation:twinkle 3.2s ease-in-out infinite;filter:drop-shadow(0 0 4px #ffc559)}@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.7) rotate(-15deg)}50%{opacity:1;transform:scale(1.25) rotate(15deg)}}
.topbar{display:flex;align-items:center;gap:12px;min-height:70px;padding:8px 4px 14px}.brand{display:flex;align-items:center;gap:10px;margin-right:auto}.brand-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:linear-gradient(145deg,#fff9c8,#ffc25a);font-size:2rem;box-shadow:0 6px 0 #e99f53,0 11px 17px #c48b5755;border:3px solid white}.brand-titles strong{display:block;font-size:clamp(1.05rem,2.6vw,1.5rem);line-height:1.2;color:#543575}.brand-titles small{font-size:.75rem;font-weight:800;color:#956f9f}.top-actions{display:flex;align-items:center;gap:8px}.icon-button{position:relative;min-width:49px;height:49px;padding:0 10px;border-radius:18px;border:3px solid white;background:linear-gradient(160deg,#fff8dc,#ffe6a3);box-shadow:0 5px 0 #dfa96e;color:#77517c;font-size:1.33rem;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:5px}.icon-button:active,.tile:active,.pill:active,.key:active{transform:translateY(4px)!important;box-shadow:0 2px 0 #c69c87!important}.star-total{min-width:75px;color:#975114;font-size:1rem}.profile-chip{background:linear-gradient(145deg,#fff,#ecf8ff);color:var(--profile);font-weight:950;letter-spacing:.02em;font-size:.86rem;min-width:90px}
.hero{border:5px solid rgba(255,255,255,.92);box-shadow:0 15px 0 #d5aede,0 24px 32px #685a9860;overflow:hidden;position:relative;background:linear-gradient(160deg,#53adf8 2%,#cee9ff 60%,#ffe5a6);border-radius:35px;min-height:370px}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 95%,#fff4ce 0,transparent 35%);pointer-events:none;z-index:1}.hero-photo{position:absolute;inset:0;width:100%;height:100%;background-image:url('/assets/storybook-friends.webp');background-repeat:no-repeat;background-position:center 45%;background-size:cover;filter:saturate(1.13);animation:hero-breathe 7s ease-in-out infinite alternate}@keyframes hero-breathe{to{transform:scale(1.035)}}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,48,92,.06) 0,transparent 34%,rgba(31,33,79,.1) 62%,rgba(49,25,75,.73));pointer-events:none}.hero-headline{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;gap:10px;z-index:2;align-items:start}.storybook-plaque{background:linear-gradient(160deg,#b36b31,#774329);color:#fff6d8;display:inline-block;padding:11px 19px 13px;border:3px solid #fbd883;border-radius:24px;box-shadow:0 5px 0 #542c29,0 8px 20px #432a4c77;text-shadow:0 2px #673b3d;max-width:88%}.storybook-plaque h1{font-size:clamp(1.4rem,3vw,2.35rem)}.storybook-plaque p{font-size:clamp(.76rem,1.8vw,1rem);font-weight:900;margin-top:4px}.floating-star{display:block;color:#ffe55b;font-size:2.7rem;animation:bob 2.5s ease-in-out infinite;filter:drop-shadow(0 0 8px #ffef80)}@keyframes bob{50%{transform:translateY(-9px) rotate(7deg)}}.hero-footer{position:absolute;bottom:19px;left:20px;right:20px;z-index:3;display:flex;gap:10px;align-items:center;justify-content:space-between;color:white}.hero-footer strong{font-size:clamp(1.18rem,2.5vw,1.7rem);text-shadow:0 3px 6px #48304f}.hero-footer small{display:block;color:#fff6dc;font-size:.83rem;margin-top:5px;font-weight:800}.hero-cta{border:3px solid #fff;border-radius:24px;background:linear-gradient(180deg,#74ee9c,#1cc46d);color:#fff;font-size:1.04rem;font-weight:1000;padding:14px 22px;box-shadow:0 6px 0 #12884f;text-shadow:0 2px #13874d;white-space:nowrap}.hero-cta:active{transform:translateY(5px);box-shadow:0 1px #12884f}.character-sticker{position:absolute;z-index:3;font-size:2.4rem;filter:drop-shadow(0 3px 2px #513e7e88);animation:character-bob 2.8s ease-in-out infinite;pointer-events:none}.character-sticker.sticker-one{top:120px;left:14px;animation-delay:-1s}.character-sticker.sticker-two{top:122px;right:10px;animation-delay:-1.8s}@keyframes character-bob{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-13px) rotate(8deg)}}
.section-title{margin:27px 6px 15px;display:flex;justify-content:space-between;align-items:center;gap:10px}.section-title h2{color:#654087}.section-title span{font-weight:900;font-size:.85rem;color:#a17baa}.activity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:7px;text-align:left;min-height:186px;padding:18px 20px 16px;border-radius:28px;border:4px solid #fff;color:#5d3d7a;box-shadow:0 9px 0 var(--depth),0 14px 21px #8b72a966;transition:transform .15s;overflow:hidden}.tile:hover{transform:translateY(-4px)}.tile:before{content:"";position:absolute;right:-18px;top:-20px;width:120px;height:120px;background:rgba(255,255,255,.3);border-radius:50%}.tile:after{content:"✦";position:absolute;top:13px;right:16px;font-size:1.1rem;color:#fff;animation:twinkle 2.2s ease-in-out infinite}.tile.blue{--depth:#76b5ef;background:linear-gradient(130deg,#e9f7ff,#a6d9ff)}.tile.gold{--depth:#e8b565;background:linear-gradient(130deg,#fffad6,#ffe3a1)}.tile.purple{--depth:#bea0f5;background:linear-gradient(130deg,#faf0ff,#d8bdff)}.tile.green{--depth:#86cf9c;background:linear-gradient(130deg,#f0ffe5,#b5edb6)}.tile.pink{--depth:#eea4a0;background:linear-gradient(130deg,#fff5da,#ffc4c2)}.tile-icon{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.2;display:block;transform-origin:center;animation:bob 3.5s ease-in-out infinite}.tile strong{font-size:clamp(1.14rem,2.2vw,1.53rem);line-height:1.12}.tile small{font-size:.81rem;font-weight:700;opacity:.78}.tile .go{position:absolute;right:13px;bottom:14px;background:#fff8;color:#7352ac;border-radius:50%;padding:4px 10px;font-size:1.5rem;font-weight:900}.tile.wide{grid-column:span 1}.mini-status{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:15px 17px;border-radius:22px;background:#fffd;border:3px solid white;box-shadow:var(--shadow);margin-top:21px;font-size:.92rem;font-weight:900}.mini-status strong{color:#288f8a}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:20;padding:8px max(12px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-right));background:rgba(255,255,255,.94);box-shadow:0 -6px 30px #6e68a024;backdrop-filter:blur(12px);display:flex;justify-content:center;gap:clamp(4px,3vw,28px)}.nav-button{display:flex;flex-direction:column;gap:2px;align-items:center;min-width:70px;padding:4px 9px 5px;border:0;background:transparent;color:#896e92;font-size:.73rem;font-weight:900;border-radius:14px}.nav-button span{font-size:1.45rem}.nav-button.active{background:#e9f5ff;color:#1688e5}
.screen{animation:rise-in .25s ease both}@keyframes rise-in{from{opacity:.1;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.page-banner{margin:6px 0 18px;padding:19px 22px;border-radius:28px;background:linear-gradient(130deg,#6b9dff,#a673e3);color:white;border:4px solid #fff;box-shadow:0 8px 0 #7d7ccd,0 14px 20px #727bac55;display:flex;align-items:center;gap:14px}.page-banner .banner-emoji{font-size:3rem;animation:bob 3s ease-in-out infinite}.page-banner p{font-weight:800;opacity:.95;margin-top:6px}.page-banner h1{font-size:clamp(1.5rem,3vw,2rem)}.page-banner .teacher-mini{margin-left:auto;flex:none;font-size:2.8rem;animation:character-bob 3s ease-in-out infinite}.panel{background:rgba(255,255,255,.92);border:4px solid #fff;border-radius:30px;padding:22px;box-shadow:0 10px 0 #d4c6ed,0 16px 28px #8b72a944;margin-bottom:22px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.panel-heading h2{font-size:clamp(1.22rem,3vw,1.7rem)}.pill-row{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0 20px}.pill{border:3px solid #fff;border-radius:16px;background:#f1ebff;color:#775996;padding:11px 15px;font-weight:950;font-size:.92rem;box-shadow:0 5px 0 #d2c1ed}.pill.selected{color:white;background:linear-gradient(160deg,#65b5ff,#277fe9);box-shadow:0 5px 0 #2770be}.pill.green{background:linear-gradient(150deg,#54d98f,#31b671);color:white;box-shadow:0 5px 0 #219457}.prompt-bubble{padding:16px 18px;border-radius:22px;background:linear-gradient(135deg,#fff6ce,#ffeca4);border:3px solid #fff;color:#704376;font-weight:950;text-align:center;font-size:clamp(1.16rem,2.7vw,1.55rem);box-shadow:0 6px 0 #ebc777;line-height:1.3}.prompt-bubble b{color:#fa4e78}.prompt-row{display:flex;gap:12px;align-items:center;margin-bottom:17px}.prompt-row .prompt-bubble{flex:1}.bear-avatar{width:62px;height:62px;border-radius:23px;display:grid;place-items:center;font-size:2.8rem;background:#fce4c2;border:3px solid white;box-shadow:0 5px 0 #e2ba85;transform-origin:bottom;animation:bearwave 3.1s ease-in-out infinite}@keyframes bearwave{0%,100%{transform:rotate(-6deg)}45%{transform:rotate(9deg)}}.help-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:16px 0 0}.small-action{border:2px solid #fff;border-radius:16px;background:#e7f8ff;color:#3a7cb1;font-size:.88rem;font-weight:950;padding:10px 14px;box-shadow:0 4px 0 #badff2}.small-action.primary{background:#52cf89;color:#fff;box-shadow:0 4px 0 #24a75f}.small-action.pink{background:#fba3c9;color:#802e7d;box-shadow:0 4px 0 #e37dad}.subtext{font-size:.87rem;color:#926fa4;font-weight:800}.center{text-align:center}.feedback{min-height:28px;text-align:center;color:#55965d;font-weight:950;padding:10px 0 0}.feedback.oops{color:#b8768e}.feedback.good{color:#188c57}
.keyboard{padding:16px 10px;background:linear-gradient(160deg,#bd8c61,#895c51);border:4px solid #ffeacb;border-radius:27px;box-shadow:inset 0 7px #d4a57a,0 11px 0 #654d5d;touch-action:manipulation}.key-row{display:flex;justify-content:center;gap:clamp(3px,.8vw,9px);margin:6px 0}.key{width:clamp(24px,7.3vw,70px);height:clamp(48px,8vw,70px);flex:0 1 70px;min-width:0;border:2px solid #fff9;border-radius:clamp(7px,1.6vw,14px);color:white;text-shadow:0 2px #402b6e88;font-size:clamp(.8rem,3.3vw,1.75rem);font-weight:1000;background:linear-gradient(160deg,var(--key-bright),var(--key-deep));box-shadow:0 5px 0 var(--key-base),inset 0 2px #fff8;transition:transform .1s,box-shadow .1s}.key:active{transform:translateY(4px);box-shadow:0 1px var(--key-base)}.key.hint{animation:key-glow 1s ease-in-out infinite}.key.correct{animation:key-pop .45s ease;filter:brightness(1.25)}.key.wrong{animation:shake .2s ease}.key-0{--key-bright:#ff7c8c;--key-deep:#f14367;--key-base:#b82751}.key-1{--key-bright:#5bbcff;--key-deep:#227cef;--key-base:#2055ba}.key-2{--key-bright:#ffdf68;--key-deep:#ffaa2e;--key-base:#ca7e25}.key-3{--key-bright:#6fdf9b;--key-deep:#24b972;--key-base:#168751}.key-4{--key-bright:#c083ff;--key-deep:#8955e9;--key-base:#6335b0}.key-5{--key-bright:#ffa0d3;--key-deep:#e961ac;--key-base:#aa4481}@keyframes key-glow{50%{filter:brightness(1.4);transform:translateY(-5px);box-shadow:0 7px 0 #b27c22,0 0 0 8px #ffed66a8,0 0 20px #ffe635}}@keyframes key-pop{50%{transform:scale(1.18)}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.letter-slots{display:flex;gap:7px;justify-content:center;margin:17px 0 8px;flex-wrap:wrap}.slot{display:grid;place-items:center;min-width:clamp(36px,8vw,64px);height:clamp(48px,9vw,70px);padding:5px 10px;border:3px dashed #d5aee9;border-radius:14px;background:#fff9f7;font-size:clamp(1.3rem,4vw,2rem);font-weight:1000;color:#197cde}.slot.filled{background:#d8ffea;border-color:#7cd9a8;color:#23946b;animation:key-pop .45s ease}.slot.next{border-color:#ffb43e;box-shadow:0 0 0 4px #fff2b7}.letter-tray{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0}.letter-chip{border:3px solid #fff;border-radius:17px;background:#e5d4ff;padding:10px 17px;font-size:1.4rem;font-weight:1000;color:#714bc0;box-shadow:0 5px 0 #bea4e7}.letter-chip:active{transform:translateY(4px)}
.number-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:19px 0 4px}.number-btn{min-height:90px;font-size:clamp(2rem,6vw,3rem);font-weight:1000;border:4px solid #fff;border-radius:20px;color:white;background:linear-gradient(145deg,var(--num-light),var(--num-dark));box-shadow:0 7px 0 var(--num-bottom);text-shadow:0 3px #7b438355}.number-btn:active{transform:translateY(5px);box-shadow:0 2px var(--num-bottom)}.number-btn.hint{animation:key-glow 1s infinite}.count-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:18px auto;max-width:560px}.count-star{border:3px solid #fff;border-radius:21px;min-height:86px;font-size:clamp(1.9rem,6vw,3.2rem);background:linear-gradient(135deg,#e9ebff,#fff3d6);box-shadow:0 6px 0 #d0c2d9;transition:transform .18s;filter:grayscale(.65);opacity:.72}.count-star.on{background:linear-gradient(135deg,#fff8ae,#ffc66d);filter:none;opacity:1;transform:scale(1.05);box-shadow:0 5px 0 #ffb632,0 0 22px #ffdb61aa}.big-count{font-weight:1000;font-size:3rem;color:#4c9eee;text-align:center}
.shape-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:20px}.shape-tile{border:4px solid white;min-height:156px;border-radius:25px;background:linear-gradient(140deg,#ffffff,#f0e6ff);box-shadow:0 7px 0 #cfc1e4;display:flex;align-items:center;justify-content:center;transition:transform .15s}.shape-tile:active{transform:translateY(6px);box-shadow:0 1px #cfc1e4}.shape-tile.success{animation:key-pop .45s}.shape-svg{width:min(78%,110px);height:110px;filter:drop-shadow(0 7px 1px #0002);transition:transform .3s}.shape-tile:hover .shape-svg{transform:rotate(-6deg) scale(1.07)}
.trace-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;align-items:start}.trace-board{border:4px solid #fff;background:radial-gradient(circle at 50% 10%,#fffefa,#f9e6ff);border-radius:27px;box-shadow:0 7px 0 #d3b9e9;overflow:hidden;padding:10px}.trace-svg{width:100%;height:clamp(300px,40vw,445px);display:block;touch-action:none;user-select:none;-webkit-user-select:none}.trace-ghost{fill:none;stroke:#e3d6ed;stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.trace-dash{fill:none;stroke:#ae95c5;stroke-width:3;stroke-dasharray:4 12;stroke-linecap:round;stroke-linejoin:round}.trace-current{fill:none;stroke:#ffcf68;stroke-width:20;opacity:.36;stroke-linecap:round;stroke-linejoin:round}.trace-ink{fill:none;stroke:#269bee;stroke-width:19;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 2px #4d94d466)}.trace-dot{fill:#ff658d;stroke:#fff;stroke-width:4;filter:drop-shadow(0 0 4px #fb639e)}.trace-guide{fill:#fff;stroke:#ffa133;stroke-width:3}.trace-guide-text{fill:#ad6623;font-weight:1000;font-size:12px}.trace-sidebar{background:#fff0c7;border:3px solid white;border-radius:24px;padding:17px;text-align:center;box-shadow:0 5px 0 #f2d8a2}.trace-sidebar .big-emoji{font-size:4.3rem;animation:character-bob 3s infinite}.trace-sidebar h3{font-size:1.2rem;margin:9px 0}.trace-sidebar p{font-weight:800;font-size:.9rem;color:#836287}.trace-sidebar .small-action{margin-top:14px}.trace-chooser{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.trace-choice{padding:9px 12px;border:2px solid white;border-radius:12px;background:#eee2ff;color:#7c5f8c;font-size:1.1rem;font-weight:1000;min-width:39px}.trace-choice.active{background:#428ef7;color:white}.trace-feedback{font-weight:1000;color:#32936a;text-align:center;padding:10px}
.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.game-card{min-height:220px;border:4px solid white;border-radius:25px;padding:20px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;box-shadow:0 8px 0 #b3a1dc;font-weight:950;background:linear-gradient(150deg,#e0eeff,#fff3d3)}.game-card .game-emoji{font-size:4.4rem;animation:character-bob 3s ease-in-out infinite}.game-card strong{font-size:1.3rem;color:#684987}.game-card small{color:#987c98}.bubble-field{position:relative;min-height:430px;border:3px dashed #b8cff3;border-radius:22px;background:linear-gradient(180deg,#dff6ff,#fbf5ff);overflow:hidden}.bubble{position:absolute;display:grid;place-items:center;border:4px solid #fff8;border-radius:50%;width:clamp(63px,11vw,90px);height:clamp(63px,11vw,90px);font-weight:1000;font-size:2rem;color:#fff;text-shadow:0 2px 3px #5c5f96aa;background:radial-gradient(circle at 30% 23%,#fff9,transparent 40%),linear-gradient(145deg,var(--key-bright),var(--key-deep));box-shadow:inset 0 -7px #ffffff3c,0 7px 12px #9084c055;animation:bubble-float var(--float-dur,3s) ease-in-out infinite;animation-delay:var(--float-delay,0s)}@keyframes bubble-float{50%{transform:translateY(-17px) rotate(6deg)}}.bubble.popped{animation:popaway .32s ease forwards}@keyframes popaway{to{transform:scale(1.4);opacity:0}}.memory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;max-width:560px;margin:24px auto}.memory-card{min-height:120px;border:4px solid #fff;border-radius:22px;background:linear-gradient(140deg,#b5a4fa,#8170e5);box-shadow:0 7px 0 #6052ab;color:white;font-size:3.4rem;transition:transform .22s}.memory-card.open{background:linear-gradient(140deg,#fff8d6,#ffd8e3);transform:rotateY(180deg);box-shadow:0 7px 0 #e2bdd8}.memory-card.open span{display:block;transform:rotateY(180deg)}.memory-card.matched{background:#b5f6d5;box-shadow:0 7px 0 #81cead;transform:none}.memory-card.matched span{transform:none}.dino-picnic{font-size:clamp(5rem,13vw,9rem);text-align:center;animation:character-bob 3s ease-in-out infinite;margin:8px 0}.dino-picnic.chomp{animation:chomp .45s ease}@keyframes chomp{25%,70%{transform:scale(1.16) rotate(-7deg)}}.feed-options{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.food-choice{min-width:90px;min-height:100px;border:4px solid #fff;border-radius:20px;background:#fff6d8;font-size:1.7rem;box-shadow:0 6px 0 #efc57f;font-weight:1000;color:#81556c}.food-choice span{display:block;font-size:1rem;margin-top:4px}
.profile-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:16px 0}.profile-card{border:4px solid white;border-radius:28px;padding:23px 17px;min-height:170px;display:flex;align-items:center;gap:13px;text-align:left;background:linear-gradient(125deg,#e7f5ff,#d2e7ff);box-shadow:0 7px 0 #9acdf4}.profile-card.arjan{background:linear-gradient(125deg,#fff4e0,#ffe0b6);box-shadow:0 7px 0 #efc08c}.profile-card.active{outline:4px solid #ffdc61;outline-offset:-6px}.profile-card .pf-emoji{font-size:3.6rem;animation:bob 3s infinite}.profile-card strong{display:block;font-size:1.4rem;color:#604276}.profile-card small{font-size:.9rem;color:#977a9f;font-weight:800}.reward-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:14px}.reward-item{min-height:135px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(140deg,#f8f2ff,#fffbdc);border:3px solid white;border-radius:20px;box-shadow:0 5px 0 #d5c7e8;text-align:center;padding:12px}.reward-item .reward-emoji{font-size:2.9rem}.reward-item.locked{filter:grayscale(1);opacity:.45}.reward-item strong{font-size:.88rem}.progress-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.progress-item{border:3px solid white;border-radius:22px;background:#f9f2ff;padding:16px;box-shadow:0 5px 0 #d6c2f1}.progress-item strong{display:block;font-size:1rem}.progress-item .value{font-size:2rem;font-weight:1000;color:#358ddd;margin-top:8px}.progress-track{height:12px;border-radius:9px;background:#e6dcee;margin-top:9px;overflow:hidden}.progress-fill{height:100%;border-radius:9px;background:linear-gradient(90deg,#42bdff,#6c8bff)}.advice{background:#effaf2;border:2px solid #d3f4dc;padding:17px;border-radius:21px;color:#416b5f;font-size:.92rem;font-weight:800;line-height:1.5}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:2px solid #f0e8f7;padding:17px 0;font-size:1rem;font-weight:950}.toggle{position:relative;width:65px;height:38px;border-radius:22px;background:#d9d1dd;border:3px solid #fff;box-shadow:0 2px 2px #9b8baf44}.toggle:before{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 2px 3px #0002;transition:transform .2s}.toggle.on{background:#4dcf83}.toggle.on:before{transform:translateX(26px)}.footnote{margin-top:20px;color:#967e99;font-size:.82rem;text-align:center;font-weight:700}.install-note{padding:18px;border-radius:19px;background:#eef7ff;border:2px solid white;color:#567fa8;margin-top:16px;font-size:.92rem;line-height:1.5}.toast{position:fixed;left:50%;bottom:100px;z-index:60;transform:translateX(-50%);min-width:200px;max-width:min(90vw,550px);text-align:center;background:#573d7d;color:white;padding:13px 23px;border-radius:22px;border:3px solid white;box-shadow:0 8px 20px #57487a55;font-size:1rem;font-weight:950}.toast[hidden]{display:none}.celebration{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:90}.confetti{position:absolute;top:-40px;width:12px;height:21px;border-radius:4px;animation:confetti-fall 2.2s ease-in forwards;background:var(--piece);left:var(--left);transform:rotate(var(--angle));animation-delay:var(--delay)}@keyframes confetti-fall{100%{transform:translate(var(--drift),110vh) rotate(900deg);opacity:0}}
@media (max-width:770px){.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.tile{min-height:176px;padding:15px}.tile:last-child{grid-column:span 2;min-height:150px}.hero{min-height:360px}.trace-layout{grid-template-columns:1fr}.trace-sidebar{display:flex;align-items:center;gap:14px;text-align:left}.trace-sidebar .big-emoji{font-size:3.1rem}.trace-sidebar h3{margin:0}.games-grid{grid-template-columns:1fr 1fr}.games-grid .game-card:last-child{grid-column:span 2;min-height:150px}.page-banner{padding:13px}.page-banner .teacher-mini{font-size:2.2rem}.number-btn{min-height:75px}.shape-tile{min-height:133px}}
@media (max-width:460px){.app-shell{width:calc(100% - 18px);padding-top:8px}.topbar{gap:6px;padding-bottom:9px}.brand-mark{width:42px;height:42px;font-size:1.55rem;border-radius:13px}.brand-titles strong{font-size:.93rem}.brand-titles small{font-size:.66rem}.icon-button{min-width:42px;height:42px;border-radius:14px;padding:0 7px;font-size:1.1rem}.profile-chip{min-width:58px;font-size:.73rem}.star-total{min-width:57px;font-size:.85rem}.hero{min-height:320px;border-radius:28px}.hero-headline{left:10px;right:8px;top:12px}.storybook-plaque{padding:7px 12px;max-width:88%;border-radius:16px}.storybook-plaque h1{font-size:1.25rem}.storybook-plaque p{font-size:.7rem}.hero-photo{background-size:auto 100%;background-position:center center}.hero-footer{left:10px;right:10px;bottom:15px}.hero-footer strong{font-size:1.07rem}.hero-footer small{font-size:.7rem}.hero-cta{padding:10px 12px;font-size:.83rem;border-radius:16px}.character-sticker{font-size:1.7rem;top:140px!important}.tile{min-height:158px;padding:13px;gap:4px;border-radius:23px}.tile-icon{font-size:2.8rem}.tile strong{font-size:1.14rem}.tile small{font-size:.75rem}.section-title{margin-top:24px}.panel{padding:14px;border-radius:24px}.page-banner h1{font-size:1.45rem}.page-banner .banner-emoji{font-size:2.3rem}.page-banner .teacher-mini{display:none}.prompt-bubble{padding:12px;font-size:1.12rem}.bear-avatar{width:50px;height:50px;font-size:2.2rem}.key-row{gap:3px}.keyboard{padding:11px 3px;border-radius:20px}.key{height:48px;border-width:1px;font-size:.9rem;border-radius:8px}.number-grid{gap:6px}.number-btn{min-height:63px;border-radius:13px;border-width:2px}.count-grid{gap:6px}.count-star{min-height:64px;border-radius:12px;font-size:2rem}.shape-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shape-tile{min-height:130px}.shape-svg{width:84px;height:90px}.games-grid{gap:10px}.game-card{min-height:170px;padding:10px}.game-card .game-emoji{font-size:3.4rem}.game-card strong{font-size:1.04rem}.profile-card{padding:11px;min-height:125px;gap:8px}.profile-card .pf-emoji{font-size:2.6rem}.profile-card strong{font-size:1.13rem}.profile-card small{font-size:.78rem}.reward-grid{grid-template-columns:repeat(2,1fr)}.progress-grid{gap:10px}.bottom-nav{gap:2px}.nav-button{min-width:0;flex:1;font-size:.69rem}.nav-button span{font-size:1.25rem}.bubble-field{min-height:440px}.memory-card{min-height:90px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}

@media(min-width:771px){.bottom-nav{left:50%;right:auto;bottom:13px;transform:translateX(-50%);width:min(740px,calc(100vw - 40px));border:2px solid white;border-radius:26px;box-shadow:0 6px 30px #594c8a40}.nav-button{min-width:115px}.app-shell{padding-bottom:136px}}

/* Animated teachers: independently clickable characters, not decorative video. */
.friends-strip{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:23px 0 10px}.friend-fun{display:flex;align-items:center;gap:9px;justify-content:center;flex:1;min-width:155px;padding:10px 15px;border:3px solid white;border-radius:21px;background:linear-gradient(120deg,#fffbe0,#ffe6c0);box-shadow:0 5px 0 #eac391;color:#8a5b5f;font-weight:950;font-size:clamp(.78rem,2vw,1rem)}.friend-dino{background:linear-gradient(120deg,#e6fff0,#bffbdb);box-shadow:0 5px 0 #82d6ad;color:#3b7b6b}.friend-fun span{font-size:2.6rem;display:block;animation:friend-wiggle 2.3s ease-in-out infinite}.friend-dino span{animation-delay:-1.25s}.bear-teacher{border:0;cursor:pointer;background:linear-gradient(160deg,#fff7d6,#ffe6ad)}.teacher-mini{background:none;border:0;color:inherit;cursor:pointer;line-height:1}.friend-celebrate{animation:friend-pop .6s ease-in-out 1!important}@keyframes friend-wiggle{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(9deg) translateY(-9px)}}@keyframes friend-pop{0%,100%{transform:scale(1)}45%{transform:scale(1.3) rotate(12deg)}}@media(max-width:460px){.friend-fun{min-width:135px;padding:8px;font-size:.75rem;border-radius:16px}.friend-fun span{font-size:2rem}.friends-strip{gap:8px;margin:16px 0 8px}}

/* v1.2 surgical polish and new learning worlds */
.hero-headline,.storybook-plaque{display:none!important}
.hero{min-height:370px}
.hero-photo{transition:opacity .65s ease;filter:saturate(1.12)}
.hero::after{background:linear-gradient(180deg,transparent 54%,rgba(24,18,56,.78))}
.hero:before{background:none}
.hero-dots{position:absolute;z-index:5;bottom:6px;left:50%;transform:translateX(-50%);display:flex;gap:9px}
.hero-dot{width:13px;height:13px;background:#fff9;border-radius:50%;border:2px solid white;padding:0;box-shadow:0 2px 8px #34224a88}
.hero-dot.active{width:30px;border-radius:13px;background:#ffdc56}
.hero-footer{bottom:24px;padding-bottom:8px}.hero-footer>div{max-width:60%}
.welcome-strip{display:flex;justify-content:space-between;gap:12px;align-items:center;background:linear-gradient(115deg,#fff6c7,#fbe2ff);border:3px solid white;border-radius:17px;padding:10px 18px;margin:23px 0 0;box-shadow:0 5px 0 #d8bdeb;color:#7549a2;font-size:1.07rem}
.welcome-strip span{font-size:.89rem;font-weight:800}
.tile{padding-right:50px;min-height:184px;justify-content:flex-end;gap:10px}
.tile-icon{margin-bottom:auto}.tile strong,.tile small{max-width:100%;overflow-wrap:anywhere}
.tile .go{right:12px;bottom:16px}
.pill-row{gap:12px;row-gap:15px}.pill{padding:13px 16px}
.help-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px 0 7px}
.help-row .small-action{margin:0;min-height:44px}
.prompt-row{gap:12px;align-items:center}.prompt-bubble{flex:1;min-width:0;line-height:1.4}
.page-banner{min-height:95px}.page-banner>div{min-width:0}.page-banner h1,.page-banner p{overflow-wrap:break-word}
.number-grid.extended{grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.number-grid.extended .number-btn{min-height:60px;padding:4px 0;font-size:clamp(1rem,2.2vw,1.45rem)}
.limit-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 22px;padding:10px 12px;border-radius:18px;background:#ecfaff}
.limit-bar b{margin-right:auto;font-size:.95rem}
.limit-choice{border:2px solid white;border-radius:14px;background:#d7eaff;color:#573983;padding:9px 16px;font-weight:950;min-width:53px}
.limit-choice.active{background:#187de8;color:white;box-shadow:0 4px 0 #1763b4}
.count-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.count-grid .count-star{min-height:54px;font-size:1.7rem}
.dino-panel{text-align:center}.dino-scene{position:relative;height:205px;border-radius:24px;overflow:hidden;background:#c1f8d6;margin-bottom:15px}
.dino-scene img{width:100%;height:100%;object-fit:cover;opacity:.78}
.dino-focus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:6rem;filter:drop-shadow(0 12px 8px #14492c80);animation:bob 2.7s ease-in-out infinite}
.dino-fact{margin:14px auto;max-width:640px;font-size:1.2rem;font-weight:850;color:#654a83}
.dino-chooser{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:25px 0}
.dino-thumb,.story-choice{border:3px solid #fff;background:#ecfcff;border-radius:20px;padding:10px;display:flex;flex-direction:column;gap:7px;align-items:center;color:#62448a;box-shadow:0 5px 0 #c2d5ee;font-weight:850}
.dino-thumb.chosen,.story-choice.chosen{outline:3px solid #ffca48;background:#fff8d9}
.dino-thumb span{font-size:2.3rem}.dino-thumb small{font-size:.82rem}
.subsection-title{margin:24px 0 10px;color:#683f9d}.dino-quiz{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.dino-quiz button{border:3px solid #fff;background:linear-gradient(#f4e8ff,#e0d4ff);border-radius:18px;min-width:135px;padding:12px 10px;display:grid;gap:5px;place-items:center;font-weight:900;color:#653c90}
.dino-quiz button span{font-size:2.5rem}
.story-art{display:flex;gap:16px;align-items:center;padding:20px;border-radius:24px;background:linear-gradient(120deg,#baeaff,#ffe7ae,#e4c3ff);margin-bottom:18px}
.story-art>span{font-size:5rem}.story-art small{font-weight:900;letter-spacing:.09em;color:#875eb0}
.story-page{min-height:170px;background:#fff9e8;border:3px solid #f9e1a2;border-radius:20px;padding:26px 24px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:18px}
.story-page p{font-size:clamp(1.27rem,2.7vw,1.8rem);font-weight:900;color:#6c4886;line-height:1.5}
.story-counter{font-size:.82rem;font-weight:900;color:#a07f98}
.story-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.story-choice{flex-direction:row;text-align:left;min-height:75px}.story-choice span{font-size:2rem}
.pattern-stage{border-radius:24px;padding:20px;background:linear-gradient(135deg,#fff2c5,#f2dfff);text-align:center}
.pattern-sequence{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.pattern-sequence span{width:clamp(44px,10vw,92px);height:clamp(54px,10vw,92px);display:grid;place-items:center;border-radius:18px;background:white;border:3px solid #fff;box-shadow:0 5px 0 #ceabe1;font-size:clamp(2rem,4vw,3.4rem)}
.pattern-options{display:flex;gap:14px;justify-content:center;margin:25px 0}.pattern-options button{font-size:3rem;min-width:85px;min-height:85px;border:4px solid #fff;border-radius:20px;background:#d9faff;box-shadow:0 5px 0 #9cccdb}
.voice-controls{padding:16px;margin:22px 0;border:2px solid #e1daf7;background:#f8f6ff;border-radius:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.voice-controls label{display:flex;flex-direction:column;gap:5px;flex:1 1 210px}.voice-controls label small{line-height:1.4}
.voice-controls select{max-width:100%;min-height:47px;padding:9px;border-radius:10px;border:2px solid #beacdf;background:#fff;flex:1 1 200px}
@media(max-width:770px){.number-grid.extended{grid-template-columns:repeat(5,minmax(0,1fr))}.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tile:last-child{grid-column:auto;min-height:176px}.dino-chooser{grid-template-columns:repeat(3,1fr)} }
@media(max-width:460px){.hero{min-height:275px}.hero-photo{background-position:center!important}.hero-footer{left:10px;right:10px;bottom:21px}.hero-footer strong{font-size:.94rem}.hero-footer small{font-size:.71rem}.hero-cta{font-size:.78rem}.welcome-strip{padding:10px;display:block}.welcome-strip span{display:block;font-size:.75rem;margin-top:4px}.tile{padding:12px 37px 16px 12px;min-height:160px}.tile:last-child{min-height:160px}.tile-icon{font-size:2.7rem}.tile small{line-height:1.25}.number-grid.extended{gap:5px}.number-grid.extended .number-btn{min-height:54px;font-size:1.1rem}.count-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.count-grid .count-star{min-height:50px;font-size:1.5rem}.dino-thumb small{font-size:.7rem}.story-choices{grid-template-columns:1fr}.pattern-options button{font-size:2.3rem;min-width:74px;min-height:74px}}

/* v1.2.1 surgical visual polish */
.hero-photo{will-change:transform,opacity;background-color:#d9efff}
.number-btn{position:relative;overflow:hidden;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 0 rgba(80,36,103,.35),0 0 10px rgba(255,255,255,.18)}
.number-btn::after{content:'';position:absolute;left:12%;right:12%;top:10%;height:34%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));pointer-events:none}
.number-grid.extended .number-btn{font-size:clamp(1.1rem,2.4vw,1.55rem);font-weight:1000}
.limit-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#eef9ff;border:2px solid #fff;border-radius:18px;padding:10px 12px;margin:10px 0 14px}
.limit-bar b{color:#76598d}
@media(max-width:460px){.limit-bar{padding:8px 10px}.limit-bar b{width:100%}}


/* v1.2.2 surgical hero and trace layout polish */
.hero{min-height:0;aspect-ratio:1375/370;border-radius:33px}
.hero-photo{background-size:cover;background-position:center center;animation:none;transform:none;transition:opacity .5s ease;background-color:#d8ecff}
.hero::after{background:linear-gradient(180deg,transparent 50%,rgba(24,18,56,.72))}
.hero-footer{bottom:18px}
.hero-footer>div{max-width:52%}
.hero-footer strong{line-height:1.02}
.hero-dots{bottom:12px}
.trace-chooser{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:8px;margin:14px 0}
.trace-choice{width:100%;min-width:0;padding:10px 0;text-align:center}
@media (max-width:770px){.hero{aspect-ratio:3.45/1}.trace-chooser{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:460px){.hero{aspect-ratio:auto;min-height:250px}.hero-footer{bottom:18px}.hero-footer>div{max-width:61%}.trace-chooser{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.trace-choice{padding:9px 0;font-size:1rem}}

/* v1.2.3 fresh hero art pack */
.hero{aspect-ratio:3/1;border-radius:32px;overflow:hidden;background:linear-gradient(180deg,#d8ecff,#f2e8ff)}
.hero-photo{background-size:cover;background-position:center center;background-repeat:no-repeat;transition:opacity .45s ease;filter:none}
.hero-footer{padding-right:200px}
.hero-cta{right:18px}
@media (max-width:900px){.hero{aspect-ratio:2.6/1}.hero-footer{padding-right:160px}}
@media (max-width:580px){.hero{aspect-ratio:auto;min-height:255px}.hero-footer{padding-right:0}.hero-cta{right:auto}}