@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Lexend:wght@400;600;700&display=swap";:root{--bg:#fff1d6;--bg-2:#ffe0a8;--ink:#3d2c1e;--ink-soft:#6b5344;--paper:#fffdf8;--primary:#2f80ed;--primary-dark:#1b5fcc;--cta:#f97316;--success:#16a34a;--danger:#e11d48;--listen:#0f766e;--shadow:4px 7px 0 #3d2c1e29;--shadow-pressed:1px 2px 0 #3d2c1e29;--radius:28px;--font-ui:"Baloo 2", system-ui, sans-serif;--font-read:"Lexend", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}html,body{max-width:100%;overflow-x:clip}body{font-family:var(--font-ui);color:var(--ink);background:radial-gradient(circle at top left, #ffe9b8, var(--bg) 42%, #ffd7a0);line-height:1.5}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}h1,h2,p{margin:0}svg{max-width:100%;height:auto}.app-shell{isolation:isolate;width:min(1120px,100%);padding:max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));min-height:100dvh;margin:0 auto;position:relative}.blob{z-index:-1;filter:blur(8px);opacity:.45;pointer-events:none;border-radius:50%;position:fixed}.blob-a{background:#93c5fd;width:min(220px,55vw);height:min(220px,55vw);top:-40px;right:-40px}.blob-b{background:#fdba74;width:min(260px,60vw);height:min(260px,60vw);bottom:10%;left:-80px}.clay-card,.clay-btn{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow), inset 0 -6px 0 #3d2c1e12}.clay-btn{min-width:52px;min-height:52px;color:var(--ink);justify-content:center;align-items:center;gap:8px;padding:12px 18px;transition:transform .18s,box-shadow .18s;display:inline-flex}.clay-btn:hover:not(:disabled){transform:translate(-1px,-1px)}.clay-btn:active:not(:disabled){box-shadow:var(--shadow-pressed), inset 0 -2px 0 #3d2c1e12;transform:translate(2px,4px)}.clay-btn:focus-visible{outline:4px solid var(--primary);outline-offset:3px}.clay-btn:disabled{opacity:.55;cursor:not-allowed}.clay-btn-primary{background:var(--cta);color:#fffdf8}.clay-btn-listen{background:var(--listen);color:#fffdf8}.clay-btn-success{background:var(--success);color:#fffdf8}.clay-btn-danger{background:#fecaca}.clay-btn-ghost{box-shadow:none;background:0 0}.screen{gap:16px;min-width:0;display:grid}.top-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.top-bar>div{flex:12rem;min-width:0}.eyebrow,.instruction,.track-copy span,.level-copy span{color:var(--ink-soft);font-family:var(--font-read)}.hero-card,.track-hero,.lesson-stage,.settings-card{padding:16px}.hero-card{text-align:center;grid-template-columns:1fr;place-items:center;gap:16px;display:grid}.hero-card .clay-btn{width:min(100%,28rem)}.greeting{margin-bottom:12px;font-size:clamp(1.15rem,4vw,1.6rem)}.section-title,.level-kicker{overflow-wrap:anywhere;font-size:clamp(1.2rem,3.4vw,1.7rem)}.track-grid,.level-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.track-card,.level-card{text-align:left;width:100%;min-height:88px;color:inherit;align-items:center;gap:12px;min-width:0;padding:14px;display:flex}.track-card{border-color:var(--track-accent,var(--ink))}.track-index,.level-num{background:var(--track-accent,#fde68a);border:3px solid var(--ink);border-radius:16px;flex:none;place-items:center;width:48px;height:48px;font-size:1.3rem;display:grid}.track-copy,.level-copy{flex:1;gap:2px;min-width:0;display:grid}.track-copy strong,.level-copy strong,.track-copy span,.level-copy span{overflow-wrap:anywhere}.track-meta{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.lesson-stage{overflow-wrap:anywhere;justify-items:center;gap:12px;width:100%;min-height:min(280px,52dvh);display:grid}.giant-letter{font-family:var(--font-read);letter-spacing:.04em;text-align:center;color:var(--letter-color,inherit);background:0 0;border:0;border-radius:24px;min-width:88px;min-height:88px;padding:0 12px;font-size:clamp(4rem,28vw,9rem);font-weight:700;line-height:1.05}.giant-letter:focus-visible{outline:4px solid var(--primary);outline-offset:4px}.letter-pair{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(16px,6vw,40px);animation:.42s letter-enter;display:flex}.letter-wait .giant-letter{animation:.9s ease-in-out infinite letter-pulse}.letter-caught .giant-letter{animation:.72s cubic-bezier(.22,1.4,.36,1) letter-cheer}.letter-caught .letter-glyph:last-child .giant-letter{animation-delay:.11s}.stage-playful{background:color-mix(in srgb, var(--letter-color,#ffe08a) 22%, var(--paper));cursor:pointer}.stage-caught{animation:.62s ease-out stage-squash}.lesson-mascot{width:min(120px,34vw);margin-bottom:-8px}.letter-glyph{justify-items:center;gap:4px;display:grid}.giant-letter-lower{font-size:clamp(3rem,22vw,7rem)}.letter-case-label{font-family:var(--font-read);color:var(--ink-soft);font-size:1rem}.letter-check-lower{margin-left:.25em;font-size:.78em;font-weight:700}.tap-hint{font-family:var(--font-read);color:var(--ink-soft);font-size:1rem}.alphabet-board{justify-items:center;gap:12px;width:100%;display:grid}.alphabet-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px;width:100%;display:grid}.alphabet-key{border:3px solid var(--ink);background:var(--paper);min-width:44px;min-height:48px;box-shadow:var(--shadow);font-family:var(--font-read);color:inherit;border-radius:16px;padding:0;font-size:clamp(1.2rem,5vw,1.7rem);font-weight:700}.alphabet-key.active{background:#ffe08a;transform:translateY(-2px)}.alphabet-key:hover,.alphabet-key:focus-visible{background:#f9731629}.alphabet-key:focus-visible{outline:4px solid var(--primary);outline-offset:2px}.stage-alphabet{min-height:0}.letter-check{justify-items:center;gap:16px;width:100%;display:grid}.letter-check-prompt{font-family:var(--font-read);text-align:center;font-size:clamp(1.15rem,4vw,1.5rem);font-weight:700}.letter-check-choices{grid-template-columns:repeat(3,minmax(72px,1fr));gap:10px;width:min(100%,360px);display:grid}.letter-check-choice{min-height:72px;font-family:var(--font-read);font-size:clamp(1.8rem,8vw,2.6rem);font-weight:700}.letter-check-type{width:min(100%,280px);font-family:var(--font-read);color:var(--ink-soft);text-align:center;gap:8px;display:grid}.letter-check-input{border:4px solid var(--ink);width:100%;min-height:64px;box-shadow:var(--shadow);font-family:var(--font-read);text-align:center;text-transform:uppercase;color:var(--ink);background:#fff;border-radius:20px;font-size:2rem;font-weight:700}.letter-check-input:focus-visible{outline:4px solid var(--primary);outline-offset:3px}.letter-check-input:disabled{background:#ecfdf3}.glyph-tap{appearance:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;background:0 0;border:0;border-radius:12px;min-width:44px;min-height:44px;padding:.08em .06em}.glyph-tap:hover,.giant-letter:hover{background:#f973161f}.spelled-text{font-family:var(--font-read);letter-spacing:.04em;text-align:center;flex-wrap:wrap;justify-content:center;gap:.08em;max-width:100%;font-size:clamp(2.2rem,12vw,5.5rem);font-weight:700;line-height:1.2;display:flex}.stage-word .spelled-text{font-size:clamp(2.4rem,14vw,6rem)}.stage-long .spelled-text{letter-spacing:.01em;font-size:clamp(1.25rem,5.6vw,2.6rem);line-height:1.35}.glyph-active{color:var(--cta);display:inline-block;transform:translateY(-6px)}.example-line{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.4rem;font-size:clamp(1.1rem,3.5vw,1.5rem);display:flex}.example-line .spelled-text{font-size:clamp(1.4rem,5vw,2rem)}.action-row,.choice-row,.choice-stack{flex-wrap:wrap;gap:12px;display:flex}.choice-stack,.choice-row{width:100%;display:grid}.choice-stack{gap:10px}.choice-stack .clay-btn,.quiz-screen>.clay-btn,.action-row .clay-btn{width:100%}.progress-pill{border:3px solid var(--ink);white-space:nowrap;background:#fff;border-radius:999px;padding:6px 14px;font-weight:700}.progress-track{border:3px solid var(--ink);background:#fff;border-radius:999px;flex:1;max-width:16rem;height:14px;overflow:hidden}.progress-fill{background:var(--cta);border-radius:inherit;height:100%;transition:width .24s;display:block}.icon-only{gap:0;min-width:52px;padding-left:12px;padding-right:12px}.question-prompt{text-align:center;overflow-wrap:anywhere;max-width:40rem;font-size:clamp(1.25rem,4.5vw,2rem)}.quiz-screen,.celebration-screen{text-align:center;justify-items:center}.quiz-screen{width:100%}.celebration-screen{padding-top:12px}.confetti-layer{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.confetti-flash{background:radial-gradient(circle at 50% 28%,#ffe08ab3,#0000 58%);animation:.52s ease-out confetti-flash;position:absolute;inset:0}.confetti-piece{border:2px solid var(--ink);animation-name:confetti-fall;animation-timing-function:cubic-bezier(.2,.7,.25,1);animation-fill-mode:forwards;position:absolute;top:-28px;box-shadow:1px 2px #3d2c1e2e}.confetti-circle{border-radius:50%}.confetti-rect{border-radius:4px}.confetti-strip{border-radius:999px}.choice-correct-pop{animation:.56s pop}.letter-live{color:var(--cta);animation:.52s infinite letter-bounce}.celebration-screen h1{animation:.64s pop}@keyframes confetti-fall{0%{opacity:1;transform:translate(0,0)rotate(0)scale(1)}to{transform:translate3d(var(--confetti-drift), 110vh, 0) rotate(var(--confetti-spin)) scale(.85);opacity:.2}}@keyframes letter-bounce{0%,to{transform:scale(1)rotate(-3deg)}50%{transform:scale(1.1)rotate(3deg)}}@keyframes letter-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)rotate(-4deg)}}@keyframes letter-cheer{0%{transform:scale(1)rotate(0)}25%{transform:scale(1.24)rotate(-7deg)}45%{transform:scale(1.1)rotate(6deg)}65%{transform:scale(1.16)rotate(-4deg)}85%{transform:scale(1.02)rotate(2deg)}to{transform:scale(1)rotate(0)}}@keyframes stage-squash{0%{transform:scale(1)}30%{transform:scale(1.03,.96)}60%{transform:scale(.99,1.02)}to{transform:scale(1)}}@keyframes letter-enter{0%{opacity:.2;transform:scale(.6)rotate(-8deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes confetti-flash{0%{opacity:0}35%{opacity:1}to{opacity:0}}.score-line{font-size:1.4rem}.stars{color:#d97706;flex-shrink:0;gap:4px;display:inline-flex}.star-off{color:#d6c4ae}.mascot{width:min(160px,42vw);height:auto}.mascot-hello{animation:2.8s ease-in-out infinite bob}.mascot-cheer{animation:.5s pop}.lesson-illustration{width:min(160px,48vw);height:auto}.modal-scrim{padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));z-index:20;background:#3d2c1e73;place-items:end center;display:grid;position:fixed;inset:0;overflow:auto}.settings-card{gap:16px;width:min(520px,100%);max-height:min(92dvh,100%);display:grid;overflow:auto}.setting-block{border:0;gap:8px;padding:0;display:grid}.setting-toggle{align-items:center;gap:10px;min-height:44px;font-size:1.1rem;display:flex}.setting-toggle input{width:1.35rem;height:1.35rem}.visually-hidden,.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.finished-note{font-size:1.2rem}.feedback{min-height:1.4em}@media (width>=640px){.hero-card{text-align:left;grid-template-columns:140px 1fr;justify-items:start}.hero-card .clay-btn{width:auto}.choice-stack .clay-btn,.quiz-screen>.clay-btn,.action-row .clay-btn{width:auto;min-width:10rem}.action-row{justify-content:center}.choice-row{grid-template-columns:repeat(3,minmax(0,1fr))}.modal-scrim{place-items:center}}@media (width>=768px){.app-shell{padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left))}.screen{gap:20px}.track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.clay-btn{min-height:56px}.lesson-stage,.hero-card,.settings-card{padding:24px}.mascot,.lesson-illustration{width:min(200px,30vw)}}@media (width>=1024px){.lesson-stage{min-height:320px}.stage-long .spelled-text{max-width:42rem;font-size:clamp(1.6rem,2.4vw,2.4rem)}}@media (width>=1280px){.app-shell{width:min(1180px,100%)}}@media (height<=520px) and (orientation:landscape){.app-shell{padding-top:max(8px, env(safe-area-inset-top));padding-bottom:max(12px, env(safe-area-inset-bottom))}.hero-card{text-align:left;grid-template-columns:88px 1fr;justify-items:start}.mascot,.lesson-illustration{width:88px}.lesson-stage{min-height:0;padding:12px}.giant-letter{font-size:clamp(2.4rem,18vh,4.5rem)}.alphabet-key{min-height:40px;font-size:1.1rem}.letter-check-choice{min-height:52px;font-size:1.6rem}.letter-check-input{min-height:48px;font-size:1.5rem}.blob{display:none}}@media (prefers-reduced-motion:reduce){.mascot-hello,.mascot-cheer,.clay-btn,.glyph-active,.alphabet-key.active,.confetti-piece,.confetti-flash,.letter-live,.letter-wait .giant-letter,.letter-caught .giant-letter,.letter-caught .letter-glyph:last-child .giant-letter,.stage-caught,.letter-pair,.choice-correct-pop,.celebration-screen h1{transition:none;animation:none;transform:none}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pop{0%{transform:scale(.92)}to{transform:scale(1)}}.stage-pairs{align-content:center;gap:clamp(18px,5vh,40px)}.pair-board{gap:clamp(14px,4vh,32px);width:100%;display:grid}.pair-row{flex-wrap:wrap;justify-content:center;gap:clamp(10px,3vw,22px);display:flex}.pair-key{font-family:var(--font-read);border:4px solid var(--ink);background:var(--paper);min-width:clamp(64px,19vw,104px);min-height:clamp(64px,19vw,104px);color:var(--ink);box-shadow:0 5px 0 var(--ink);border-radius:24px;font-size:clamp(2.2rem,11vw,3.6rem);font-weight:700;line-height:1;transition:transform .14s,background .18s,box-shadow .14s}.pair-row-lower .pair-key{font-size:clamp(1.5rem,7.4vw,2.5rem)}.pair-key:hover:not(:disabled){transform:translateY(-3px)}.pair-key:focus-visible{outline:4px solid var(--primary);outline-offset:4px}.pair-picked{box-shadow:0 10px 0 var(--ink);background:#ffe08a;transform:translateY(-6px)scale(1.06)}.pair-matched{color:var(--paper);opacity:1;box-shadow:0 3px 0 var(--ink);background:#16a34a;animation:.46s cubic-bezier(.22,1.4,.36,1) pair-lock}.pair-wobble{animation:.4s pair-wobble}@keyframes pair-lock{0%{transform:scale(1)}45%{transform:scale(1.22)rotate(-5deg)}to{transform:scale(1)rotate(0)}}@keyframes pair-wobble{0%,to{transform:translate(0)}25%{transform:translate(-8px)}50%{transform:translate(8px)}75%{transform:translate(-4px)}}@media (prefers-reduced-motion:reduce){.pair-key,.pair-picked,.pair-matched,.pair-wobble{transition:none;animation:none;transform:none}}