:root{color:#173348;font-synthesis:none;text-rendering:optimizelegibility;background:#f7f4ed;font-family:Inter,ui-rounded,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,select,input{font:inherit}button{cursor:pointer}.app-shell{background:radial-gradient(circle at 18px 18px,#267da01f 2px,#0000 3px) 0 0/42px 42px,linear-gradient(135deg,#fbf8f0 0%,#eef7f4 52%,#fff5ed 100%);min-height:100vh;padding:clamp(16px,3vw,34px)}.topbar{justify-content:space-between;align-items:end;gap:20px;max-width:1320px;margin:0 auto 18px;display:flex}.eyebrow{color:#d6533f;letter-spacing:0;text-transform:uppercase;margin:0 0 4px;font-weight:800}h1{letter-spacing:0;margin:0;font-size:clamp(2rem,5vw,4.75rem);line-height:.95}.star-meter{color:#d7cdbd;justify-content:flex-end;gap:6px;min-width:164px;font-size:30px;display:flex;position:relative}.star-meter span{transform-origin:50%;display:inline-block}.star-meter .lit{color:#f0b429;text-shadow:0 2px #8f6422}.star-meter .celebrate{animation:1s cubic-bezier(.2,.85,.25,1.25) both star-award;animation-delay:calc(var(--star-index) * 80ms)}@keyframes star-award{0%{filter:brightness();transform:translateY(0)scale(.7)rotate(-14deg)}35%{filter:brightness(1.25);transform:translateY(-12px)scale(1.45)rotate(10deg)}68%{transform:translateY(3px)scale(.92)rotate(-5deg)}to{filter:brightness();transform:translateY(0)scale(1)rotate(0)}}.full-star-celebration{z-index:30;pointer-events:none;position:fixed;inset:0;overflow:hidden}.celebration-wave{position:absolute;inset:0}.hero-star{left:var(--celebration-x);color:#f7c948;text-shadow:0 5px #8f6422,0 18px 38px #17334847;animation:2s cubic-bezier(.18,.9,.28,1.2) both hero-star-party;animation-delay:calc(var(--wave-index) * 2s);font-size:clamp(4rem,12vw,9rem);line-height:1;position:absolute;top:50%}.celebration-spark{left:var(--spark-x);top:var(--spark-y);width:var(--spark-size);height:var(--spark-size);background:var(--spark-color);animation:1.8s ease-out both celebration-sparkle;animation-delay:calc(var(--wave-index) * 2s + (var(--spark-index) % 8) * 70ms);border-radius:2px;position:absolute;box-shadow:0 2px #17334838}.celebration-ribbon{left:var(--ribbon-x);background:linear-gradient(135deg, transparent 0 18%, #ffffffb8 19% 28%, transparent 29% 48%, #ffffffa6 49% 58%, transparent 59%), var(--ribbon-color);width:14px;height:58px;animation:2s cubic-bezier(.12,.74,.24,1) both ribbon-drop;animation-delay:calc(var(--wave-index) * 2s + var(--ribbon-index) * 85ms);border-radius:999px;position:absolute;top:-14vh;box-shadow:0 4px #1733482e}.celebration-pop{left:var(--pop-x);top:var(--pop-y);aspect-ratio:1;border:8px solid var(--pop-color);opacity:0;width:clamp(76px,12vw,150px);animation:1.7s ease-out both celebration-pop;animation-delay:calc(var(--wave-index) * 2s + var(--pop-index) * .12s);border-radius:999px;position:absolute;box-shadow:inset 0 0 0 8px #ffffff9e,0 12px 30px #17334826}.celebration-zap{left:var(--zap-x);top:var(--zap-y);clip-path:polygon(45% 0,100% 0,63% 38%,100% 38%,24% 100%,43% 52%,0 52%);filter:drop-shadow(0 4px #8f6422);width:48px;height:82px;animation:1.5s steps(2,end) both zap-pop;animation-delay:calc(var(--wave-index) * 2s + var(--zap-index) * .14s);background:#f7c948;position:absolute}.celebration-toy{left:var(--toy-x);top:var(--toy-y);width:clamp(96px,14vw,150px);height:clamp(96px,14vw,150px);animation:1.85s cubic-bezier(.18,.82,.28,1) both toy-fly;animation-delay:calc(var(--wave-index) * 2s + var(--toy-index) * .19s);position:absolute}.celebration-toy>span,.celebration-toy:before,.celebration-toy:after{content:"";display:block;position:absolute}.celebration-saucer>span{background:#98b7ff;border-radius:999px;width:78%;height:27%;top:38%;left:11%;box-shadow:inset 0 -5px #4f7cff,0 5px #17334829}.celebration-saucer:before{background:#ffffffd1;border:4px solid #4f7cff;border-radius:999px 999px 8px 8px;width:40%;height:32%;top:19%;left:30%}.celebration-saucer:after{clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);background:linear-gradient(90deg,#0000,#f7c948c7,#0000);width:52%;height:24%;top:69%;left:24%}.celebration-cone>span{clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(45deg,#0000 42%,#b7791f 44% 48%,#0000 50%),linear-gradient(-45deg,#0000 42%,#b7791f 44% 48%,#0000 50%),#f6ad55;width:32%;height:54%;top:41%;left:38%}.celebration-cone:before{background:#f687b3;border-radius:999px 999px 18px 18px;width:57%;height:46%;top:9%;left:23%;box-shadow:inset -6px -5px #9a3b672e}.celebration-cone:after{background:#ef5b5b;border-radius:999px;width:14%;height:14%;top:3%;left:47%}.celebration-bear>span{background:#c08457;border-radius:999px;width:57%;height:57%;top:27%;left:23%;box-shadow:inset -6px -5px #542d1b29}.celebration-bear:before{background:#c08457;border-radius:999px;width:24%;height:24%;top:18%;left:15%;box-shadow:49px 0 #c08457,23px 34px 0 -4px #f8d7a4,14px 27px 0 -8px #173348,34px 27px 0 -8px #173348}.celebration-bear:after{border-bottom:3px solid #173348;border-radius:0 0 999px 999px;width:11%;height:7%;top:62%;left:46%}.celebration-ball>span{background:radial-gradient(circle,#173348 0 16%,#0000 17%),radial-gradient(circle at 23% 26%,#173348 0 11%,#0000 12%),radial-gradient(circle at 76% 29%,#173348 0 10%,#0000 11%),radial-gradient(circle at 30% 75%,#173348 0 10%,#0000 11%),radial-gradient(circle at 74% 72%,#173348 0 10%,#0000 11%),#fff;border:4px solid #173348;border-radius:999px;width:68%;height:68%;top:16%;left:16%;box-shadow:0 5px #17334829}.celebration-visitor{left:var(--visitor-x);top:var(--visitor-y);width:clamp(104px,15vw,164px);height:clamp(104px,15vw,164px);animation:2s cubic-bezier(.18,.82,.28,1) both visitor-float;animation-delay:calc(var(--wave-index) * 2s + var(--visitor-index) * .26s);position:absolute}.celebration-visitor>span,.celebration-visitor:before,.celebration-visitor:after{content:"";display:block;position:absolute}.celebration-martian>span{background:#51d88a;border-radius:48% 48% 44% 44%;width:60%;height:54%;top:26%;left:20%;box-shadow:inset -9px -8px #15805038,0 8px #17334824}.celebration-martian:before{background:radial-gradient(circle at 35% 58%,#173348 0 8%,#0000 9%),radial-gradient(circle at 65% 58%,#173348 0 8%,#0000 9%),#7ff0a5;border-radius:999px 999px 45% 45%;width:64%;height:36%;top:4%;left:18%;box-shadow:-18px 18px 0 -10px #51d88a,18px 18px 0 -10px #51d88a}.celebration-martian:after{border-top:5px solid #173348;border-radius:999px;width:38%;height:38%;top:16%;left:31%;box-shadow:-24px -24px 0 -13px #f7c948,24px -24px 0 -13px #f7c948}.celebration-alien>span{background:radial-gradient(at 35% 43%,#173348 0 10%,#0000 11%),radial-gradient(at 65% 43%,#173348 0 10%,#0000 11%),#b45cff;border-radius:52% 52% 46% 46%;width:64%;height:68%;top:18%;left:18%;box-shadow:inset -10px -8px #4d2a8a33,0 8px #17334824}.celebration-alien:before{border-top:5px solid #173348;border-radius:999px;width:52%;height:24%;top:6%;left:24%}.celebration-alien:after{background:#173348;border-radius:999px;width:22%;height:8%;top:63%;left:39%}.celebration-firework{left:var(--firework-x);top:var(--firework-y);background:var(--firework-color);width:16px;height:16px;box-shadow:0 -42px 0 -2px var(--firework-color), 0 42px 0 -2px var(--firework-color), 42px 0 0 -2px var(--firework-color), -42px 0 0 -2px var(--firework-color), 30px 30px 0 -2px var(--firework-color), -30px 30px 0 -2px var(--firework-color), 30px -30px 0 -2px var(--firework-color), -30px -30px 0 -2px var(--firework-color);animation:1.65s ease-out both firework-bloom;animation-delay:calc(var(--wave-index) * 2s + var(--firework-index) * .22s);border-radius:999px;position:absolute}@keyframes hero-star-party{0%{opacity:0;transform:translate(-50%, 20vh) scale(.25) rotate(calc(var(--celebration-tilt) * -1))}18%{opacity:1;transform:translate(-50%, -12vh) scale(1.12) rotate(var(--celebration-tilt))}52%{opacity:1;transform:translate(-50%, -4vh) scale(.94) rotate(calc(var(--celebration-tilt) * -.35))}to{opacity:0;transform:translate(-50%, -34vh) scale(1.28) rotate(calc(var(--celebration-tilt) * 2))}}@keyframes celebration-sparkle{0%{opacity:0;transform:translateY(32px)scale(.35)rotate(0)}25%{opacity:1;transform:translateY(-8px)scale(1)rotate(80deg)}to{opacity:0;transform:translateY(-70px)scale(.2)rotate(240deg)}}@keyframes ribbon-drop{0%{opacity:0;transform:translateY(0)rotate(0)scaleY(.65)}18%{opacity:1}to{opacity:0;transform:translateY(116vh) rotate(var(--ribbon-spin)) scaleY(1)}}@keyframes celebration-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)}32%{opacity:.85;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.7)}}@keyframes zap-pop{0%{opacity:0;transform:translate(-50%, -50%) scale(.3) rotate(var(--zap-tilt))}18%{opacity:1;transform:translate(-50%, -50%) scale(1.1) rotate(calc(var(--zap-tilt) * -1))}to{opacity:0;transform:translate(-50%, -84%) scale(.75) rotate(var(--zap-tilt))}}@keyframes toy-fly{0%{opacity:0;transform:translate(-50%, 28vh) scale(.35) rotate(calc(var(--toy-spin) * -.25))}18%{opacity:1;transform:translate(-50%,-8px)scale(1)rotate(0)}to{opacity:0;transform:translate(calc(-50% + var(--toy-drift)), -42vh) scale(.82) rotate(var(--toy-spin))}}@keyframes visitor-float{0%{opacity:0;transform:translate(-50%, 34vh) scale(.32) rotate(calc(var(--visitor-spin) * -.2))}20%{opacity:1;transform:translate(-50%,-10px)scale(1.05)rotate(0)}62%{opacity:1;transform:translate(calc(-50% + var(--visitor-drift) * .35), -18vh) scale(.95) rotate(calc(var(--visitor-spin) * .25))}to{opacity:0;transform:translate(calc(-50% + var(--visitor-drift)), -48vh) scale(.72) rotate(var(--visitor-spin))}}@keyframes firework-bloom{0%{opacity:0;filter:brightness();transform:translate(-50%,-50%)scale(.08)rotate(0)}18%{opacity:1;filter:brightness(1.25);transform:translate(-50%,-50%)scale(.45)rotate(20deg)}78%{opacity:1;transform:translate(-50%,-50%)scale(1.35)rotate(70deg)}to{opacity:0;filter:brightness();transform:translate(-50%,-50%)scale(1.85)rotate(110deg)}}.workspace{grid-template-columns:minmax(190px,260px) minmax(0,1fr);align-items:stretch;gap:16px;max-width:1320px;margin:0 auto;display:grid}.letter-panel,.practice-stage{background:#ffffffd6;border:2px solid #1733481f;border-radius:8px;box-shadow:0 18px 42px #1733481f}.letter-panel{padding:16px}.panel-title{color:#47697b;margin-bottom:12px;font-size:.9rem;font-weight:800}.word-title{margin-top:18px}.letter-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.letter-button{aspect-ratio:1;color:#173348;background:#fff;border:2px solid #17334826;border-radius:8px;font-family:Brush Script MT,Segoe Script,cursive;font-size:2.1rem;line-height:1;transition:transform .15s,border-color .15s,background .15s}.letter-button:hover,.word-button:hover{transform:translateY(-2px)}.letter-button.active{background:var(--letter-color);color:#fff;border-color:#173348}.alphabet-strip{color:#416072;background:#eff8f6;border-radius:8px;margin-top:16px;padding:12px;font-family:Segoe Script,cursive;line-height:1.8}.word-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.word-button{color:#173348;background:#fff;border:2px solid #17334826;border-radius:8px;min-height:42px;font-family:Segoe Script,cursive;font-size:1.35rem;line-height:1;transition:transform .15s,border-color .15s,background .15s}.word-button.active{background:var(--word-color);color:#fff;border-color:#173348}.practice-stage{min-width:0;padding:14px}.stage-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.tool-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.swatch{border:2px solid #fff;border-radius:999px;width:34px;height:34px;box-shadow:inset 0 0 0 1px #1733483d}.swatch.active{outline:3px solid #173348}select,.clear-button,.done-button,.listen-button{color:#173348;background:#fff;border:2px solid #17334829;border-radius:8px;padding:9px 12px;font-weight:800}.paper{touch-action:none;background:#fffef9;border:2px solid #e0d5c4;border-radius:8px;height:min(64vh,650px);min-height:430px;position:relative;overflow:hidden}.guide-lines{background:linear-gradient(#0000 0 24%,#4f7cff38 24.5% 25.5%,#0000 26%),repeating-linear-gradient(#0000 0 64px,#ef5b5b38 65px,#0000 66px);position:absolute;inset:0}.letter-model,.word-model{pointer-events:none;place-items:center;display:grid;position:absolute;inset:20px}.letter-model svg{width:min(70%,540px);height:min(88%,560px);overflow:visible}.word-model svg{width:min(98%,1120px);height:min(48%,280px);overflow:visible}.letter-model path,.word-model path{fill:none;stroke:var(--model-color);stroke-width:14px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px;opacity:.38}.letter-model .trace-fill,.word-model .trace-fill{fill:var(--model-color);stroke:none;opacity:0;animation:show-guide var(--stroke-duration,.5s) ease-out forwards;animation-delay:var(--stroke-delay,0s)}.word-model{--word-stroke-width:28;--word-transition-stroke-width:6.16;--word-stroke-opacity:.56;align-content:center;justify-items:center;gap:clamp(18px,4vh,36px)}.word-model svg path.trace-stroke{stroke-width:var(--word-stroke-width);opacity:var(--word-stroke-opacity)}.word-model svg path.smooth-join{stroke-width:var(--word-transition-stroke-width);opacity:var(--word-stroke-opacity)}.word-model .smooth-join{fill:none;stroke:var(--model-color);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px}.start-dot{background:#f9735b;border-radius:999px;width:18px;height:18px;position:absolute;transform:translate(-98px,-154px);box-shadow:0 0 0 7px #f9735b2e}.trace-canvas{width:100%;height:100%;position:absolute;inset:0}.trace-stroke{animation:draw-guide var(--stroke-duration,.5s) ease-out forwards;animation-delay:var(--stroke-delay,0s)}.letter-model path.dot-mark,.word-model svg path.dot-mark{opacity:0;stroke-dasharray:none;stroke-dashoffset:0;animation:dot-guide var(--stroke-duration,.5s) ease-out forwards;animation-delay:var(--stroke-delay,0s)}@keyframes draw-guide{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes dot-guide{0%{opacity:0}70%{opacity:var(--word-stroke-opacity,.38)}to{opacity:var(--word-stroke-opacity,.38)}}@keyframes show-guide{0%{opacity:0}to{opacity:.38}}.badge{aspect-ratio:1;background:var(--badge-color);color:#fff;border:2px solid #173348;border-radius:8px;place-items:center;width:96px;font-family:Brush Script MT,Segoe Script,cursive;font-size:4.4rem;line-height:1;display:grid}.listen-button{background:#eff8f6}.done-button{color:#fff;background:#173348;border-color:#173348}.listen-button.compact,.done-button.compact{width:auto;margin:0}@media (width<=1080px){.workspace{grid-template-columns:1fr}.letter-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.word-picker{grid-template-columns:repeat(4,minmax(0,1fr))}.stage-toolbar{align-items:flex-start}.listen-button,.done-button{width:auto;margin:0}}@media (width<=700px){.app-shell{padding:12px}.topbar{flex-direction:column;align-items:start}.star-meter{justify-content:flex-start;min-width:0;font-size:25px}.letter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.word-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.paper{height:58vh;min-height:380px}.word-model svg{height:min(44%,220px)}.listen-button,.done-button{width:100%}}.custom-word-form{grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:10px;display:grid}.custom-word-form input,.custom-word-form button,.remove-word{color:#173348;background:#fff;border:2px solid #17334829;border-radius:8px;padding:9px 10px;font-weight:800}.custom-word-form input{color:#173348;min-width:0}.custom-word-form button{color:#fff;background:#173348;border-color:#173348}.word-choice{min-width:0;position:relative}.word-choice .word-button{text-overflow:ellipsis;width:100%;padding-inline:8px;overflow:hidden}.word-choice.custom .word-button{padding-right:30px}.remove-word{color:#9a3e2f;background:#fff5ed;border-radius:999px;place-items:center;width:24px;height:24px;padding:0;font-size:.82rem;line-height:1;display:grid;position:absolute;top:-7px;right:-7px}@media (width<=700px){.custom-word-form{grid-template-columns:1fr}}.letter-case-switch{background:#f3eee4;border-radius:8px;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:12px;padding:4px;display:grid}.letter-case-switch button{color:#315064;background:0 0;border:0;border-radius:6px;min-height:36px;font-weight:800}.letter-case-switch .active{color:#fff;background:#d6533f}.picker-switch{background:#e6eee9;border-radius:8px;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:14px;padding:4px;display:grid}.picker-switch button{color:#315064;background:0 0;border:0;border-radius:6px;min-height:38px;font-weight:800}.picker-switch .active{color:#fff;background:#173348}.speed-panel{color:#315064;background:#eff8f6;border-radius:8px;grid-template-columns:1fr auto;align-items:center;gap:10px;margin:12px 0 16px;padding:10px 12px;font-weight:800;display:grid}.speed-panel span{color:#607888}.speed-panel strong{color:#173348}.current-practice{color:#173348;background:#eff8f6;border-radius:8px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 10px;min-width:min(100%,260px);padding:8px 10px;display:grid}.current-practice span{aspect-ratio:1;background:var(--model-color,#18a999);color:#fff;border-radius:8px;grid-row:span 2;place-items:center;width:42px;font-family:Brush Script MT,Segoe Script,cursive;font-size:2rem;line-height:1;display:grid}.current-practice strong{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:Segoe Script,cursive;font-size:1.35rem;font-weight:500;overflow:hidden}.current-practice em{color:#607888;font-size:.82rem;font-style:normal;font-weight:800}