/* A touch-first world for children: pictures lead, speech gives instructions. */
:root{--paper:#edf9ff;--white:#fff;--ink:#352e62;--muted:#77728f;--green:#7754d8;--green-dark:#5a3bab;--mint:#d9f5de;--line:#e9e3f4;--peach:#ffdbca;--lavender:#e8dcff;--butter:#fff0ac;--sky:#ceefff;--radius:32px;--shadow:0 12px 0 #c9dfe94a}
body{background:#edf9ff;font-family:"Trebuchet MS",ui-rounded,"Arial Rounded MT Bold",Arial,sans-serif}button,a{touch-action:manipulation}button:disabled{opacity:.55}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:4px solid #f3ad24;outline-offset:5px}svg.icon{stroke-width:2.4}
.play-sky{min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 0,#fff 0,transparent 65%),linear-gradient(#ddf5ff,#f0fbff 70%,#def5df)}.main-wrap{position:relative;max-width:1190px;padding:0 4%;z-index:1}.topbar{height:100px;border:0;justify-content:flex-start}.home-bubble,.round{display:grid;place-items:center;width:54px;height:54px;background:white;border:3px solid white;border-radius:19px;box-shadow:0 5px 0 #c7e6f1;color:var(--green);flex-shrink:0}.home-bubble .icon{width:27px;height:27px}.brand{font-size:23px;letter-spacing:-.7px;color:#6250a1;margin-left:5px}.brand img{width:43px;height:43px}.top-actions{margin-left:auto;gap:12px}.small-pill{border:3px solid white;padding:8px 16px;background:#fff3b9;font-size:18px;box-shadow:0 4px 0 #ecdb93}.small-pill .icon{width:23px;height:23px;fill:#ffc84c;stroke:#d68d16}.round .icon{width:25px;height:25px}.parent-entry{color:#8d91ab}.cloud{position:absolute;display:block;width:190px;height:40px;background:white;border-radius:90px;opacity:.75}.cloud:before,.cloud:after{content:'';position:absolute;background:white;border-radius:50%;width:80px;height:80px;bottom:0;left:30px}.cloud:after{width:100px;height:100px;left:80px}.cloud-one{left:-80px;top:235px;transform:rotate(-8deg)}.cloud-two{right:-60px;top:410px;transform:scale(1.4)}
.content{padding:25px 0 22px;max-width:1060px}.home-hero{position:relative;grid-template-columns:1.2fr 1fr;gap:20px;min-height:350px;padding:12px 30px 40px}.rainbow-kicker{display:inline-block;padding:7px 15px;background:#fff7d9;border:2px solid white;border-radius:20px;font-size:13px;font-weight:bold;color:#a67a2d;margin-bottom:18px}.home-hero h1{font-size:clamp(32px,4vw,52px);line-height:1.13;letter-spacing:-2px}.home-hero h1 em{font-family:inherit;font-style:normal;font-weight:700;color:#9b5ac5}.button{border:0;border-radius:21px;font-size:18px;min-height:60px;padding:15px 25px;box-shadow:0 6px 0 #5536a6;transition:transform .15s,box-shadow .15s}.button:hover{transform:translateY(-2px)}.button:active{transform:translateY(4px);box-shadow:0 2px 0 #5536a6}.button .icon{width:26px;height:26px}.button.secondary{border:2px solid #e5dcf8;background:#fff;color:#7754d8;box-shadow:0 5px 0 #e0d6f0}.hero-play{margin-top:25px;padding-inline:29px;background:#ff936f;box-shadow:0 6px 0 #d26858;color:#fff}.hero-play:hover{background:#f38864}.hero-play .icon{fill:currentColor;width:27px;height:27px}.hero-art{position:relative;max-width:330px;padding:0;justify-self:center;z-index:1}.hero-art img{position:relative;width:300px;height:300px;object-fit:contain;z-index:2;filter:drop-shadow(0 14px 0 #c5dce73b)}.buddy-shadow{position:absolute;width:68%;height:28px;background:#b7dcd669;left:16%;bottom:13px;border-radius:50%;z-index:0}.float-star{position:absolute;font-size:48px;color:#ffc64e;z-index:3;text-shadow:0 4px 0 white}.star-one{left:0;top:24px;transform:rotate(-18deg)}.star-two{right:0;bottom:53px;font-size:35px;transform:rotate(16deg)}
.worlds{padding:0 2px 10px}.section-head{margin-bottom:25px;padding:0 8px}.section-head h2{font-size:23px;color:#626084;letter-spacing:-.5px}.section-head .progress-stars{font-size:27px;letter-spacing:4px;color:#d4a12f}.lesson-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.lesson-card{border:4px solid white;border-radius:30px;background:var(--card);box-shadow:0 9px 0 #adcbdc4d;overflow:visible;transform:rotate(-2deg)}.lesson-card:nth-child(even){transform:rotate(2deg)}.lesson-card:hover{transform:translateY(-8px) rotate(0);box-shadow:0 14px 0 #adcbdc4d}.card-art{height:185px;border:0;border-radius:25px 25px 0 0;overflow:visible;background:none}.card-art img{max-height:none;max-width:none;width:142px;height:142px;margin:35px 0 0 15px;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 5px 0 #fff5)}.card-letter{opacity:1;left:12px;top:2px;font-size:42px;color:#fff;text-shadow:0 3px 0 #0002;-webkit-text-stroke:1px #0001}.island-number{position:absolute;right:10px;top:10px;display:grid;place-items:center;border:2px solid white;border-radius:50%;width:25px;height:25px;background:#fff9;color:#756485;font-size:12px;font-weight:bold}.card-body{padding:8px 18px 15px;display:flex;align-items:center;gap:10px}.card-play{display:grid;place-items:center;border:3px solid white;width:40px;height:40px;border-radius:50%;background:#ffffffa8;color:#73508f;flex-shrink:0}.card-play .icon{width:18px;height:18px;fill:currentColor}.mini-track{margin:0;flex:1;height:8px;background:#fff8}.mini-track b{background:#ab7ec8}.site-footer{margin-top:30px;padding:20px 4px 25px;border:0;color:#7a7e9d;font-size:13px}.site-footer a{display:flex;align-items:center;gap:9px;min-height:48px;padding:8px 12px}.site-footer .icon{width:21px;height:21px}
.lesson-header{position:relative;justify-content:center;gap:15px;margin:0 0 24px;min-height:70px}.lesson-header .back-link{position:absolute;left:0;top:10px;margin:0;width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:white;box-shadow:0 5px 0 #cce4ef;color:#8262c7}.lesson-header .back-link .icon{width:26px;height:26px}.letter-badge{height:78px;min-width:78px;width:auto;padding:0 20px;border:4px solid white;border-radius:25px;font-size:48px;box-shadow:0 5px 0 #cce4ef;color:#7655a7;transform:rotate(-4deg)}.lesson-header .page-tag{right:2px;top:24px;font-size:11px;background:none;color:#8d8da6}.tabs{max-width:580px;margin:0 auto 28px;padding:6px;background:#d7eaf2;border:3px solid white;border-radius:24px;gap:7px;overflow:visible}.tabs a{border-radius:17px;padding:10px 20px;min-height:55px;font-size:13px;color:#6f7a9d;gap:10px}.tabs a.active{background:#fff;color:var(--green);box-shadow:0 4px 0 #bbd5df}.tabs .icon{width:27px;height:27px}.activity{max-width:850px;margin:auto;border:4px solid white;border-radius:36px;background:#ffffffd9;padding:26px 30px;box-shadow:0 10px 0 #d5e9ed8a;min-height:350px}.activity-bottom{justify-content:flex-end;margin-top:20px}.activity-bottom .button{min-width:74px}.discovery{text-align:center}.card-dots{display:flex;gap:8px;justify-content:center;margin:0 0 18px}.card-dots i{height:9px;width:9px;background:#e2dcf1;border-radius:50%}.card-dots i.active{width:26px;border-radius:10px;background:#ad86df}.flashcard-wrap{display:grid;grid-template-columns:58px minmax(0,1fr) 58px;gap:20px;align-items:center;max-width:700px;margin:auto}.nav-ball{width:56px;height:56px;border-radius:50%;background:#fff0b1;border:3px solid white;box-shadow:0 5px 0 #ead785;color:#ba9042;display:grid;place-items:center}.nav-ball.next{background:#dcc5ff;color:#8053bd;box-shadow:0 5px 0 #baa0dc}.nav-ball .icon{width:27px;height:27px}.big-flashcard{position:relative;border-radius:30px;border:3px solid #eee5fc;background:linear-gradient(145deg,#fff,#fbf6ff);width:100%;min-height:320px;padding:16px 25px 28px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 6px 0 #e4d8f1}.big-flashcard img{height:245px;width:100%;object-fit:contain;mix-blend-mode:normal}.learn-word{font-size:32px;font-weight:bold;margin-top:5px;line-height:1.25}.big-syllable{font-size:100px;line-height:1.6;color:#9270ce;letter-spacing:5px}.big-syllable+.learn-word{display:none}.sound-dot{position:absolute;bottom:17px;right:17px;color:#ae8bd7}.sound-dot .icon{width:25px;height:25px}.listen{min-height:62px;min-width:165px;background:#ffcd64;color:#825921;box-shadow:0 5px 0 #e5ae41;border:3px solid white;font-size:17px;padding:12px 22px;gap:12px;margin:23px 0 6px}.listen>.icon{width:29px;height:29px}.voice-waves{font-style:normal;display:none;letter-spacing:1px;font-size:21px}.listen.talking{background:#ffe4a4}.listen.talking .voice-waves{display:inline-block;animation:voice-wave .6s infinite alternate}.listen.talking>span{display:none}.audio-help{margin-left:15px;color:#805caa}.audio-help .icon{vertical-align:middle;margin-right:5px}
.quiz-progress{max-width:450px;margin:0 auto 20px;gap:10px}.quiz-progress i{height:10px;background:#ede7f6}.quiz-progress i.done{background:#a9dfbf}.quiz-progress i.current{background:#c8a4ee}.question{padding:0 0 12px}.question h2{font-size:24px;color:#817198}.question .listen{margin-top:13px}.choices{max-width:740px;gap:22px;margin:12px auto}.choice-wrap{position:relative;padding-bottom:22px}.choice{width:100%;height:218px;border:3px solid #e6d9f5;border-radius:29px;background:#faf6ff;box-shadow:0 6px 0 #e3d5ee;padding:18px 12px 30px;transition:transform .15s}.choice:not(:disabled):hover{transform:translateY(-4px);border-color:#b48ae0}.choice:disabled{opacity:.65}.choice img{width:100%;height:160px;object-fit:contain;mix-blend-mode:normal}.choice span{font-size:25px}.choice .glyph{font-size:64px}.choice-listen{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:grid;place-items:center;border-radius:50%;width:54px;height:54px;border:4px solid white;background:#e8d8fa;box-shadow:0 4px 0 #d0b8e8;color:#8459b6}.choice-listen .icon{width:25px;height:25px}.choice.correct{opacity:1;border-color:#72c8a1;background:#eafbf1;box-shadow:0 6px 0 #8fd8b7}.choice.wrong{border-color:#f5ba7b;background:#fff4e6;box-shadow:0 6px 0 #efc494}.feedback{background:none;margin-top:16px;padding:8px 15px;min-height:50px;text-align:center;font-size:25px;font-weight:bold}.feedback.good{color:#3a9774;background:#eaf8ef}.feedback.try{color:#be8b40;background:#fff5de}.reward-buddy{width:180px;height:180px;object-fit:contain;margin:0 auto}.quiz-result{padding:10px}.result-star{color:#ffc64c;text-shadow:0 4px 0 #e6a22e;font-size:55px;letter-spacing:10px;margin:3px 0 18px}.quiz-result h2{font-size:38px;color:#9270c9}.reward-actions{margin-top:22px}.quiz-result .button{margin:5px 10px}
.writing .activity-top{margin:0 0 5px;justify-content:center;gap:30px}.writing .activity-top h2{font-size:50px;color:#9774ce}.writing .listen{margin:5px 0}.canvas-wrap{border:4px solid #e2d9ef;border-radius:26px;max-width:700px;margin:18px auto}.canvas-wrap canvas{background:#fff;min-height:180px}.canvas-wrap.awaiting-speech{opacity:.55}.canvas-wrap.awaiting-speech canvas{pointer-events:none}.trace-tools{max-width:700px;margin:18px auto}.trace-tools .button{min-width:85px}.trace-tools [data-action=check-trace]{background:#55b989;box-shadow:0 6px 0 #358d65}.trace-complete{display:flex;justify-content:center;gap:20px;align-items:center}.build-play{display:flex;align-items:center;justify-content:center;gap:30px}.sentence-image{width:170px;height:180px;margin:0;mix-blend-mode:normal}.sentence-slots{border:3px dashed #cdb1e9;background:#f6efff;min-height:95px;border-radius:25px}.slot-arrow{font-size:30px;letter-spacing:10px;color:#bfa3d9}.token{border:3px solid #e5d5f7;border-bottom:6px solid #cab0e5;border-radius:19px;min-height:66px;padding:12px 22px;font-size:25px;color:#7852a8}.token small{display:inline-flex;margin-left:10px;vertical-align:middle;color:#b49acf}.token small .icon{width:20px;height:20px}.tokens{gap:15px}.tokens .token{background:#fff8d8;border-color:#f7e5a6;border-bottom-color:#e7cd76;color:#98723d}.review-empty{padding:35px;text-align:center}.review-empty img{width:220px;height:220px;object-fit:contain;margin:auto}.review-empty .button{margin-top:25px}
.welcome-shade{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#d1eff9ed;backdrop-filter:blur(9px);padding:25px;overflow:auto}.welcome-card{position:relative;display:flex;flex-direction:column;align-items:center;background:#fffdf8;width:min(100%,440px);padding:25px 35px 20px;border-radius:45px;border:6px solid white;box-shadow:0 15px 0 #bedee999,0 25px 70px #758fbd26;text-align:center}.welcome-stars{font-size:38px;letter-spacing:12px;color:#ffd06a;line-height:1.1}.welcome-card>img{width:220px;height:220px;object-fit:contain}.welcome-card h1{font-size:38px;color:#8a64bf;margin:0 0 23px;letter-spacing:-1px}.start-bubble{width:110px;height:96px;background:#a887dc;color:white;border:5px solid #eee2ff;border-radius:35px;box-shadow:0 8px 0 #7854b1;display:grid;place-items:center}.start-bubble .icon{width:46px;height:46px;fill:currentColor}.start-bubble:active{transform:translateY(5px);box-shadow:0 3px 0 #7854b1}.start-sound{position:absolute;right:60px;bottom:115px;transform:rotate(12deg);color:#d6ad5e}.start-sound .icon{width:28px;height:28px}.parent-shortcut{font-size:12px;color:#9692ac;display:grid;place-items:center;min-height:48px;margin-top:20px}
body[data-screen=parents] .activity{max-width:none;box-shadow:none}body[data-screen=parents] .content{padding-top:30px}body[data-screen=parents] .back-link{font-size:14px}body[data-screen=parents] .button{font-size:14px;min-height:52px}body[data-screen=parents] .parent-notes{font-size:14px;line-height:1.85}body[data-screen=parents] .help-box{background:white;padding:25px;font-size:14px}.toast{bottom:20px;background:#66518a;line-height:1.6;font-size:14px}.offline-controls{margin-top:18px;display:flex;gap:14px;flex-wrap:wrap}
@keyframes voice-wave{to{transform:scaleY(.55)}}
@media(max-width:960px){.main-wrap{padding-inline:4%}.brand{font-size:20px}.home-hero{padding-inline:10px;min-height:300px}.home-hero h1{font-size:40px}.hero-art{max-width:280px}.hero-art img{width:260px;height:260px}.lesson-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.card-art{height:155px}.card-art img{width:112px;height:112px;margin:30px 0 0 7px}.card-letter{font-size:36px;left:9px;top:3px}.card-body{padding:5px 9px 10px;gap:6px}.card-play{width:32px;height:32px}.activity{max-width:780px}.choice{height:200px}.choice img{height:145px}}
@media(max-width:640px){.main-wrap{padding-inline:4%}.topbar{height:83px;gap:10px}.brand{font-size:17px;margin:0}.brand img{display:none}.brand span{max-width:95px;line-height:1.1}.home-bubble,.round{width:48px;height:48px;border-radius:17px}.top-actions{gap:8px}.top-actions .round .icon{width:23px;height:23px}.parent-entry{display:none}.small-pill{font-size:15px;padding:8px 11px}.small-pill .icon{width:20px;height:20px}.content{padding-top:18px}.home-hero{grid-template-columns:1.2fr 1fr;padding:10px 0 30px;gap:0;min-height:250px}.home-hero h1{font-size:29px;letter-spacing:-1.2px}.rainbow-kicker{font-size:10px;padding:5px 9px;margin-bottom:12px;white-space:nowrap}.hero-art{position:relative;right:auto;top:auto;opacity:1;pointer-events:auto;max-width:none;align-self:center}.hero-art img{width:180px;height:210px;max-width:100%}.float-star{font-size:30px}.star-two{font-size:24px}.hero-play{font-size:15px;min-height:56px;padding:10px 18px;margin-top:20px;gap:8px}.hero-play .icon{width:21px;height:21px}.section-head{margin-bottom:19px;padding:0;gap:6px}.section-head h2{font-size:18px}.section-head .progress-stars{font-size:19px;letter-spacing:1px}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 17px;padding:0 4px}.lesson-card,.lesson-card:last-child{display:block;grid-column:auto;border-radius:28px}.lesson-card:last-child{grid-column:1/-1;width:calc(50% - 9px);justify-self:center}.card-art,.lesson-card:last-child .card-art{height:163px}.card-art img{height:130px;width:130px;margin:27px 0 0 15px;max-height:none}.card-letter{font-size:43px;top:0;left:12px}.card-body{padding:6px 15px 12px;gap:10px}.card-play{width:36px;height:36px}.site-footer{margin-top:20px;font-size:12px;align-items:center}.lesson-header{margin-bottom:23px;min-height:70px}.letter-badge{font-size:42px;height:70px;min-width:70px}.lesson-header .page-tag{top:26px;font-size:10px}.tabs{margin-bottom:25px;gap:5px}.tabs a{padding:10px 8px;min-height:56px;font-size:11px;gap:7px}.tabs .icon{width:24px;height:24px}.activity{padding:23px 12px;border-radius:29px;min-height:300px}.flashcard-wrap{grid-template-columns:42px minmax(0,1fr) 42px;gap:7px}.nav-ball{width:42px;height:50px;border-radius:17px}.nav-ball .icon{width:23px;height:23px}.big-flashcard{min-height:280px;padding:12px 10px 35px;border-radius:25px}.big-flashcard img{height:205px}.learn-word{font-size:25px}.big-syllable{font-size:78px}.sound-dot{bottom:10px;right:10px}.sound-dot .icon{width:20px;height:20px}.listen{font-size:16px;min-height:60px;margin-top:23px;padding:10px 17px}.activity-bottom{margin-top:18px;justify-content:flex-end}.activity-bottom .button{flex:0;min-width:72px}.button{min-height:58px;font-size:16px;padding:14px 20px}.question h2{font-size:21px}.choices{gap:9px;margin:8px 0}.choice{min-height:140px;height:150px;padding:10px 4px 24px;border-radius:22px}.choice img{height:112px;width:100%}.choice span{font-size:17px}.choice .glyph{font-size:44px}.choice-listen{height:50px;width:50px}.choice-listen .icon{width:23px;height:23px}.feedback{font-size:23px;margin-top:12px;padding:8px;min-height:47px}.quiz-result h2{font-size:31px}.result-star{font-size:43px;letter-spacing:5px}.reward-buddy{width:165px;height:165px}.writing .activity-top{gap:22px}.writing .activity-top h2{font-size:43px}.writing .listen{min-width:150px}.canvas-wrap{margin-top:17px}.canvas-wrap canvas{min-height:0}.build-play{gap:10px}.sentence-image{width:130px;height:155px}.build-play .listen{min-width:140px;padding-inline:12px}.token{font-size:21px;padding:10px 15px;min-height:62px}.token small{margin-left:6px}.sentence-slots{gap:8px;margin:17px auto}.tokens{gap:10px}.welcome-card{padding:24px 25px 13px;border-radius:38px}.welcome-card>img{height:200px;width:200px}.welcome-card h1{font-size:35px}.start-sound{right:40px}.stats{gap:8px}.stat{padding:18px 12px}.stat strong{font-size:25px}.parent-hero h1{font-size:31px}body[data-screen=parents] .activity{padding:23px 16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}