@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap');
.promo-image{position:absolute;right:4%;bottom:0;width:min(300px,86%);height:calc(100% - 18px);object-fit:cover;object-position:center;border-radius:34px 34px 0 0;box-shadow:-18px 10px 35px #34206b66;transform:rotate(2deg);border:7px solid #fff9;z-index:1}.hero-art .sparkle{z-index:2}
.learning-path{margin:30px 0 6px}.purple-eyebrow{color:var(--purple);opacity:1}.path-score{background:#fff0ba;color:#a36a18;border-radius:16px;padding:10px 14px;white-space:nowrap}.level-list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:18px}.level-card{border:2px solid #eee9fb;background:#fff;border-radius:20px;padding:14px 12px;text-align:left;min-height:150px;position:relative;cursor:pointer;transition:.2s}.level-card:hover{transform:translateY(-4px);border-color:#c9bdf4}.level-card.current{border-color:var(--purple);box-shadow:0 8px 20px #7857d825}.level-card.locked{opacity:.58;cursor:not-allowed;background:#f8f7fc}.level-number{font-size:11px;color:#8c86a9;font-weight:900;letter-spacing:.6px}.level-icon{font-size:35px;display:block;margin:6px 0}.level-card h3{font-size:15px;margin:0 0 4px}.level-card p{font-size:11px;color:#8b8c9d;margin:0;line-height:1.35}.level-stars{position:absolute;right:10px;top:10px;color:#f5b83d;font-size:12px}.level-progress{height:5px;background:#edeafa;border-radius:5px;margin-top:11px;overflow:hidden}.level-progress i{display:block;height:100%;background:linear-gradient(90deg,#72d8bd,#7857d8);border-radius:5px}@media(max-width:800px){.level-list{grid-template-columns:repeat(2,1fr)}.level-card:last-child{grid-column:span 2}}
.writing-controls{display:flex;justify-content:center;gap:8px;margin:4px 0 14px}.case-button,.clear-button{border:0;background:#f0edfc;color:#817a9c;border-radius:12px;padding:8px 12px;font:800 12px Nunito;cursor:pointer}.case-button.active{background:#7857d8;color:#fff}.stroke-hint{display:flex;justify-content:space-between;align-items:center;color:#8c86a9;font-size:11px;margin:0 2px 5px}.start-dot{color:#ff7891;font-size:15px}.writing-actions{display:flex;justify-content:center;align-items:center;gap:12px}.clear-button{background:#fff0f2;color:#e66f88}.writing-actions .done-button{margin-top:0}
.number-game{margin-top:20px;background:linear-gradient(145deg,#fff,#f1efff);border:2px solid #e4defb;border-radius:28px;padding:30px;text-align:center;box-shadow:0 8px 24px #54428a12}.number-stars{font-size:42px;letter-spacing:4px;min-height:58px}.number-game h2{font-size:26px;margin:13px 0 20px}.number-options{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.number-option{border:0;background:#fff;color:var(--purple);border-radius:18px;min-width:76px;padding:14px 20px;font:900 28px Nunito;box-shadow:0 5px 0 #d9d0f5;cursor:pointer;transition:.15s}.number-option:hover{transform:translateY(-3px);background:#fff8d9}.game-hint{color:#85889c;font-size:13px;margin:20px 0 0}
/* Feedback animations */
.trace-progress{height:9px;background:#ebe7fb;border-radius:9px;overflow:hidden;margin:10px auto 2px;max-width:520px}.trace-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#72d8bd,#7857d8);border-radius:9px;transition:width .2s}.feedback{position:fixed;inset:0;z-index:8;background:#fff8eefa;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;animation:feedbackIn .35s ease-out}.feedback-burst{font-size:70px;animation:burst .8s ease-out infinite alternate}.feedback-character{font-size:115px;filter:drop-shadow(0 12px 3px #432c9330);animation:celebrate 1s ease-in-out infinite}.feedback h2{font-size:34px;color:var(--purple);margin:8px 0 3px}.feedback p{color:#85889c;margin:0 0 22px;font-size:16px}.feedback.bad .feedback-burst{animation:wiggle .45s ease-in-out infinite}.feedback.bad .feedback-character{animation:confused 1s ease-in-out infinite}.feedback.bad h2{color:#ed7290}.feedback.bad .primary-button{background:#aee8d8;box-shadow:0 5px 0 #6bc4a9}@keyframes feedbackIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes burst{to{transform:scale(1.2) rotate(10deg)}}@keyframes celebrate{50%{transform:translateY(-17px) rotate(-7deg)}}@keyframes confused{50%{transform:translateX(11px) rotate(8deg)}}@keyframes wiggle{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
:root{--ink:#24304b;--purple:#7857d8;--yellow:#ffc857;--cream:#fff8e8;--pink:#ff7e91;--mint:#72d8bd}*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,#fff8e8,#f2eeff);color:var(--ink);font-family:Nunito,system-ui,sans-serif;min-height:100vh}.app-shell{max-width:1080px;margin:auto;padding:28px clamp(20px,5vw,72px) 24px}.topbar,.brand,.streak,.section-heading,footer{display:flex;align-items:center}.topbar{justify-content:space-between;margin-bottom:28px}.brand{gap:12px}.brand-mark{font-size:38px}.brand strong{display:block;font-size:22px;font-weight:900}.brand small{color:#7f8194;font-size:13px}.streak{gap:5px;background:#fff;border-radius:18px;padding:10px 15px;box-shadow:0 5px 18px #54428a18}.streak span{font-size:12px;color:#85889c}.hero-card{min-height:300px;overflow:hidden;border-radius:32px;padding:34px 40px;background:linear-gradient(110deg,#6e59d8,#9c78e9);color:#fff;display:flex;position:relative;box-shadow:0 18px 45px #6652b633}.hero-copy{position:relative;z-index:1}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:900;opacity:.75}.hero-card h1{font-size:clamp(30px,4vw,50px);line-height:1.06;margin:10px 0}.hero-card h1 em{font-style:normal;color:#ffe08a}.hero-card p{font-size:16px;opacity:.9;margin:0 0 20px}.hero-art{position:absolute;right:30px;bottom:0;width:43%;height:100%}.character{position:absolute;right:13%;bottom:18px;font-size:125px;filter:drop-shadow(0 12px 3px #432c9340);animation:bob 2.4s ease-in-out infinite}.rainbow{position:absolute;right:8%;top:20px;font-size:120px;opacity:.7;transform:rotate(15deg)}.sun{position:absolute;right:63%;top:35px;font-size:52px}.cloud{position:absolute;right:53%;top:125px;font-size:56px;opacity:.7}.sparkle{position:absolute;color:#ffe08a;font-size:30px;animation:twinkle 1.6s ease-in-out infinite}.s1{right:38%;top:80px}.s2{right:22%;top:180px;animation-delay:.5s}.primary-button,.sound-button{border:0;border-radius:16px;background:var(--yellow);color:#593c5e;padding:13px 20px;font:800 15px Nunito;cursor:pointer;box-shadow:0 5px 0 #dca33c;transition:transform .15s}.primary-button:hover,.sound-button:hover{transform:translateY(-2px)}.primary-button span{margin-left:14px;font-size:20px}.section-tabs{display:flex;gap:10px;margin:28px 0 22px;overflow:auto}.tab{border:0;background:transparent;color:#777b91;font:800 16px Nunito;padding:11px 15px;border-radius:14px;white-space:nowrap;cursor:pointer}.tab.active{color:var(--purple);background:#fff;box-shadow:0 5px 16px #54428a13}.tab.locked span{font-size:10px;background:#eeeafc;color:var(--purple);padding:3px 6px;border-radius:6px;margin-left:4px}.section-heading{justify-content:space-between}.section-heading h2{margin:0;font-size:25px}.section-heading p{margin:4px 0 0;color:#87889a}.progress-ring{width:61px;height:61px;border:6px solid #ded8fa;border-top-color:var(--purple);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;align-content:center}.progress-ring span{font-size:19px;font-weight:900;line-height:15px}.progress-ring small{font-size:10px;color:#87889a}.letter-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:20px}.letter-card{border:0;background:#fff;border-radius:22px;min-height:128px;cursor:pointer;position:relative;box-shadow:0 7px 18px #54428a12;transition:transform .2s,box-shadow .2s}.letter-card:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 12px 22px #54428a20}.letter-card .letter{font-size:46px;font-weight:900;color:var(--purple);display:block;margin-top:10px}.letter-card small{color:#87889a;font-weight:700}.letter-card .mini-emoji{font-size:23px;display:block;margin-top:7px}.letter-card.done:after{content:'✓';position:absolute;right:10px;top:8px;background:var(--mint);color:#fff;border-radius:50%;width:23px;height:23px;font-weight:900}.story-card{margin-top:20px;background:#fff;border-radius:28px;padding:18px;display:flex;gap:25px;align-items:center;box-shadow:0 8px 22px #54428a12}.story-image{min-width:210px;min-height:180px;border-radius:20px;background:#b9eddf;display:grid;place-items:center;font-size:76px}.story-card h2{margin:7px 0}.story-card p{color:#87889a}.coming-soon{text-align:center;padding:75px 15px;background:#fff;border-radius:28px;margin-top:20px}.coming-soon span{font-size:70px}.coming-soon h2{margin:10px 0 5px}.coming-soon p{color:#85889c}footer{justify-content:space-between;color:#85889c;font-size:13px;margin-top:28px;padding:0 5px}footer button{border:0;background:#fff;border-radius:12px;padding:8px;cursor:pointer}.hidden{display:none!important}.lesson-modal{position:fixed;inset:0;background:#36276b88;display:grid;place-items:center;padding:20px;z-index:5}.modal-card{width:min(620px,100%);background:#fffaf0;border-radius:30px;padding:28px;text-align:center;position:relative;box-shadow:0 20px 60px #32225c55}.close-button{position:absolute;right:18px;top:13px;border:0;background:transparent;font-size:30px;color:#777;cursor:pointer}.lesson-letter{font-size:95px;font-weight:900;color:var(--purple);line-height:1}.modal-card h2{margin:5px 0;font-size:28px}.modal-card p{color:#85889c;margin:5px 0 16px}.sound-button{background:#e5ddff;box-shadow:none;color:var(--purple)}.trace-wrap{margin:20px auto 15px;position:relative;max-width:520px}.trace-wrap canvas{width:100%;background:#fff;border:3px dashed #d8cdf9;border-radius:18px;touch-action:none}.trace-wrap span{display:block;font-size:12px;color:#999;margin-top:5px}.done-button{margin-top:2px}@keyframes bob{50%{transform:translateY(-9px)}}@keyframes twinkle{50%{transform:scale(1.35) rotate(20deg);opacity:.5}}@media(max-width:700px){.app-shell{padding:18px}.hero-card{padding:27px 24px;min-height:370px}.hero-art{width:100%;right:0;opacity:.55}.hero-copy{max-width:80%}.letter-grid{grid-template-columns:repeat(4,1fr);gap:10px}.letter-card{min-height:112px}.story-card{flex-direction:column;align-items:stretch}.story-image{min-width:0}.hero-card h1{font-size:34px}}