:root{--paper:#fff6e9;--paper-2:#ffeed8;--paper-sunk:#f3e3cd;--card:#fff;--ink:#3a2f2a;--ink-soft:#7a6a60;--ink-faint:#bfae9f;--accent:#e14434;--good:#3fa45b;--warm:#f2913d;--cool:#4c7df0;--letter-color:#e14434;--letter-color-soft:#e1443422;--r-sm:10px;--r-md:18px;--r-lg:28px;--r-xl:40px;--r-pill:999px;--sh-1:0 2px 0 #7a604a2e;--sh-2:0 4px 0 #7a604a38, 0 8px 20px #7a604a1f;--sh-3:0 8px 0 #7a604a33, 0 18px 40px #7a604a2e;--sh-key:0 4px 0 #7a604a40;--sh-key-lit:0 5px 0 color-mix(in srgb, var(--letter-color) 55%, #6b4a2e);--font-letter:"Andika", "Comic Sans MS", "Chalkboard SE", "Trebuchet MS", sans-serif;--font-ui:"Andika", system-ui, -apple-system, "Segoe UI", sans-serif;--t-fast:.12s;--t-med:.24s;--t-slow:.42s;--ease-out:cubic-bezier(.2, .9, .3, 1);--ease-pop:cubic-bezier(.34, 1.8, .5, 1);--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--hit-min:64px}@media (prefers-reduced-motion:reduce){:root{--t-fast:1ms;--t-med:1ms;--t-slow:1ms}}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{overscroll-behavior:none;height:100%}body{background:var(--paper);width:100%;height:100dvh;color:var(--ink);font-family:var(--font-ui);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;position:fixed;inset:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:none}img,svg{pointer-events:none;-webkit-user-drag:none;max-width:100%;display:block}#app{padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);flex-direction:column;display:flex;position:absolute;inset:0}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@keyframes kb-rise{0%{opacity:0;transform:translateY(calc(var(--kb-key) * .4)) scale(.8)}to{opacity:1;transform:none}}@keyframes kb-pop{0%{transform:translateY(calc(var(--kb-key) * .05)) scale(.93, .88)}40%{transform:translateY(calc(var(--kb-key) * -.07)) scale(1.07, 1.1)}to{transform:none}}@keyframes kb-pulse{0%{opacity:0;box-shadow:0 0 0 0 var(--letter-color)}35%{opacity:.5}to{opacity:0;box-shadow:0 0 0 calc(var(--kb-key) * .22) var(--letter-color)}}@keyframes kb-flash-correct{0%{filter:brightness();transform:none}25%{filter:brightness(1.22);transform:scale(1.16)}55%{transform:scale(.96)}to{filter:brightness();transform:none}}@keyframes kb-flash-wrong{0%,to{transform:none}15%{transform:translateX(calc(var(--kb-key) * -.09)) rotate(-4deg)}38%{transform:translateX(calc(var(--kb-key) * .09)) rotate(4deg)}62%{transform:translateX(calc(var(--kb-key) * -.06)) rotate(-2.5deg)}84%{transform:translateX(calc(var(--kb-key) * .04)) rotate(1.5deg)}}@keyframes kb-flash-hint{0%,to{transform:none}20%{transform:translateY(calc(var(--kb-key) * -.14))}40%{transform:none}60%{transform:translateY(calc(var(--kb-key) * -.08))}80%{transform:none}}@media (prefers-reduced-motion:reduce){.kb{--kb-stagger:0s}.kb__key.pulsing .kb__ring{opacity:.4;box-shadow:0 0 0 calc(var(--kb-key) * .06) var(--letter-color);animation:none}}.lc[data-mode=picture] .lc__ghost,.lc[data-mode=picture] .lc__glyphs,.lc[data-mode=picture] .lc__word,.lc[data-mode=empty]{display:none}@keyframes lc-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}70%{transform:scale(.98)}to{transform:scale(1)}}@keyframes lc-hop{0%{transform:translateY(0)scale(1)}45%{transform:translateY(-14%)scale(1.1)}to{transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.lc--reveal .lc__art,.lc--reveal .lc__glyphs,.lc--reveal .lc__ch{animation:none}.lc--sound .lc__ch--target{transform:none}}.lc__count[data-n="5"],.lc__count[data-n="6"]{--cols:3}.lc__count[data-n="7"],.lc__count[data-n="8"]{--cols:4}@keyframes lc-pip-in{0%{opacity:0;scale:.4}to{opacity:1;scale:1}}@media (prefers-reduced-motion:reduce){.lc__pip{animation:none}}@keyframes lc-pip-count{0%{scale:1}40%{filter:drop-shadow(0 0 12px var(--letter-color));scale:1.45}to{scale:1}}@keyframes lc-glyph-flash{0%{scale:1}35%{scale:1.3}to{scale:1}}@media (prefers-reduced-motion:reduce){.lc__pip--counting,.lc__glyph--flash{animation:none}}@keyframes m-land{0%{scale:1.09}45%{scale:1.06 .9}to{scale:1}}@media (prefers-reduced-motion:reduce){.mascot--dropped{animation:none}}@media (prefers-reduced-motion:no-preference){[data-state=idle] .m-body{animation:3.8s ease-in-out infinite m-breathe}[data-state=idle] .m-head{animation:3.8s ease-in-out infinite m-bob}[data-state=idle] .m-antenna{animation:5.2s ease-in-out infinite m-sway}[data-state=idle] .m-lid{animation:6.4s ease-in-out infinite m-blink}[data-state=listening] .m-body{animation:2.6s ease-in-out infinite m-breathe}[data-state=thinking] .m-head{animation:4.4s ease-in-out infinite m-tilt}[data-state=celebrating] .m-all{animation:m-jump .62s var(--ease-pop) 2}[data-state=encouraging] .m-head{animation:1.5s ease-in-out infinite m-nod}[data-state=sleepy] .m-body{animation:5.4s ease-in-out infinite m-breathe}[data-state=sleepy] .m-mouth{animation:6s ease-in-out infinite m-yawn}.mascot--speaking .m-mouth{animation:.26s ease-in-out infinite m-talk}}@keyframes m-breathe{0%,to{transform:scaleY(1)scaleX(1)}50%{transform:scaleY(1.035)scaleX(.99)}}@keyframes m-bob{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-3px)rotate(1.2deg)}}@keyframes m-sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}@keyframes m-blink{0%,92%,to{transform:translateY(-34px)}95%,96.5%{transform:translateY(0)}}@keyframes m-tilt{0%,to{transform:rotate(7deg)}50%{transform:rotate(13deg)}}@keyframes m-jump{0%{transform:translateY(0)scaleY(.94)scaleX(1.05)}30%{transform:translateY(-22px)scaleY(1.06)scaleX(.96)}60%{transform:translateY(0)scaleY(.96)scaleX(1.03)}to{transform:translateY(0)scaleY(1)scaleX(1)}}@keyframes m-nod{0%,to{transform:rotate(0)translateY(0)}40%{transform:rotate(-2deg)translateY(4px)}70%{transform:rotate(1deg)translateY(-1px)}}@keyframes m-yawn{0%,70%,to{transform:scaleY(.5)scaleX(.9)}82%{transform:scaleY(2.1)scaleX(1.15)}}@keyframes m-talk{0%,to{transform:scaleY(.7)scaleX(1)}50%{transform:scaleY(1.3)scaleX(.94)}}@keyframes m-hop{0%{transform:translateY(0)scaleY(.92)}22%{transform:translateY(-26%)scaleY(1.06)}55%{transform:translateY(-34%)scaleY(1)}80%{transform:translateY(0)scaleY(.94)}to{transform:translateY(0)scaleY(1)}}@media (prefers-reduced-motion:reduce){.mascot--hop{animation:none}}@media (prefers-reduced-motion:reduce){.m-pupil,.m-glint{transition:none}}@media (prefers-reduced-motion:reduce){.sb__slot,.sb__ghost,.sb__art,.sb__tag{transition:none}.sb__art{transform:none}}@media (prefers-reduced-motion:reduce){.celebrate-canvas{display:none}}.stage,.screen{flex-direction:column;flex:auto;min-height:0;display:flex;position:relative}@keyframes tap-hint{0%,to{opacity:.65;transform:scale(.88)}45%{opacity:1;transform:scale(1.08)}}@keyframes splash-breathe{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.06)}}@keyframes next-nudge{0%,to{transform:translate(0)}50%{transform:translate(8%)}}@keyframes ghost-tap{0%{opacity:0;transform:scale(.5)}30%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}@media (orientation:portrait){.home__top{flex-wrap:wrap}.parent__row--slider{grid-template-columns:1fr auto}.parent__row--slider input[type=range]{grid-column:1/-1}}@keyframes pad-hit{0%{background:var(--letter-color,var(--accent));color:var(--card);transform:scale(.9)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.pad__key--hit{animation:none}}@keyframes keyfx-pop{0%{opacity:0;scale:.5}25%{opacity:1;scale:1.15}60%{opacity:1;scale:1}to{opacity:0;scale:1.3}}@media (prefers-reduced-motion:reduce){.keyfx{animation:.76s linear forwards keyfx-fade}@keyframes keyfx-fade{0%,70%{opacity:1}to{opacity:0}}}:root[data-reduced-motion=on]{--t-fast:1ms;--t-med:1ms;--t-slow:1ms}:root[data-reduced-motion=on] *,:root[data-reduced-motion=on] :before,:root[data-reduced-motion=on] :after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}.celebrate-canvas{z-index:90;pointer-events:none;touch-action:none;width:100%;height:100%;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.celebrate-canvas{display:none}}.mascot{--m-fur:var(--warm);--m-fur-2:color-mix(in srgb, var(--warm) 74%, var(--ink));--m-belly:var(--paper-2);--m-eye:var(--card);--m-pupil:var(--ink);aspect-ratio:240/220;pointer-events:none;--drag-x:0px;--drag-y:0px;width:clamp(88px,min(20vh,22vw),190px);translate:var(--drag-x) var(--drag-y);flex:none}.mascot--grabbable{pointer-events:auto;touch-action:none;cursor:grab}.mascot--held{cursor:grabbing;z-index:40;will-change:translate;scale:1.09}.mascot--held .m-shadow{opacity:.3;scale:.82}.mascot--dropped{animation:m-land .42s var(--ease-pop) both}@media (prefers-reduced-motion:reduce){.mascot--dropped{animation:none}}.m-svg{width:100%;height:100%;overflow:visible}.m-shadow{fill:var(--ink);opacity:.1}.m-torso,.m-foot,.m-skull,.m-ear,.m-arm>ellipse,.m-paw>ellipse,.m-lid{fill:var(--m-fur)}.m-belly{fill:var(--m-belly)}.m-ear{fill:var(--m-fur-2)}.m-eye-white{fill:var(--m-eye)}.m-pupil{fill:var(--m-pupil)}.m-glint{fill:var(--card)}.m-cheek{fill:var(--accent);opacity:.22}.m-mouth{fill:var(--m-pupil);opacity:.85}.m-antenna-stem{fill:none;stroke:var(--m-fur-2);stroke-width:6px;stroke-linecap:round}.m-antenna-tip{fill:var(--letter-color)}.m-all,.m-body,.m-head,.m-arm,.m-antenna,.m-paw,.m-mouth,.m-lid,.m-eye{transform-box:fill-box;transform-origin:50%;transition:transform var(--t-slow) var(--ease-out)}.m-body{transform-origin:50% 100%}.m-head{transform-origin:50% 92%}.m-arm{transform-origin:50% 12%}.m-antenna{transform-origin:50% 100%}.m-mouth{transform-origin:50% 0}.m-paw{opacity:0;transition:transform var(--t-slow) var(--ease-out), opacity var(--t-med) var(--ease-out)}.m-lid{transition:transform var(--t-med) var(--ease-out);transform:translateY(-34px)}[data-state=listening] .m-all{transform:translateY(-4px)rotate(-3deg)}[data-state=listening] .m-antenna{transform:rotate(-12deg)scaleY(1.18)}[data-state=listening] .m-ear{transform:translateY(-3px)}[data-state=listening] .m-eye{transform:scale(1.08)}[data-state=thinking] .m-head{transform:rotate(9deg)}[data-state=thinking] .m-paw{opacity:1;transform:translate(-8px,-6px)}[data-state=thinking] .m-arm--r{transform:rotate(-26deg)}[data-state=thinking] .m-mouth{transform:scaleY(.35)scaleX(.8)}[data-state=celebrating] .m-arm--l{transform:rotate(46deg)translateY(-10px)}[data-state=celebrating] .m-arm--r{transform:rotate(-46deg)translateY(-10px)}[data-state=celebrating] .m-mouth{transform:scaleY(1.35)}[data-state=celebrating] .m-antenna{transform:rotate(8deg)scaleY(1.1)}[data-state=encouraging] .m-all{transform:translateY(-2px)}[data-state=encouraging] .m-mouth{transform:scaleY(1.15)scaleX(1.05)}[data-state=sleepy] .m-all{transform:translateY(4px)scale(.98)}[data-state=sleepy] .m-head{transform:rotate(-7deg)translateY(3px)}[data-state=sleepy] .m-lid{transform:translateY(-9px)}[data-state=sleepy] .m-antenna{transform:rotate(-18deg)scaleY(.86)}[data-state=sleepy] .m-arm{transform:rotate(0)translateY(4px)}@media (prefers-reduced-motion:no-preference){[data-state=idle] .m-body{animation:3.8s ease-in-out infinite m-breathe}[data-state=idle] .m-head{animation:3.8s ease-in-out infinite m-bob}[data-state=idle] .m-antenna{animation:5.2s ease-in-out infinite m-sway}[data-state=idle] .m-lid{animation:6.4s ease-in-out infinite m-blink}[data-state=listening] .m-body{animation:2.6s ease-in-out infinite m-breathe}[data-state=thinking] .m-head{animation:4.4s ease-in-out infinite m-tilt}[data-state=celebrating] .m-all{animation:m-jump .62s var(--ease-pop) 2}[data-state=encouraging] .m-head{animation:1.5s ease-in-out infinite m-nod}[data-state=sleepy] .m-body{animation:5.4s ease-in-out infinite m-breathe}[data-state=sleepy] .m-mouth{animation:6s ease-in-out infinite m-yawn}.mascot--speaking .m-mouth{animation:.26s ease-in-out infinite m-talk}}.mascot--hop{animation:m-hop .64s var(--ease-out)}@media (prefers-reduced-motion:reduce){.mascot--hop{animation:none}}.m-pupil,.m-glint{translate:calc(var(--look-x,0) * 1px) calc(var(--look-y,0) * 1px);transition:translate .14s var(--ease-out)}@media (prefers-reduced-motion:reduce){.m-pupil,.m-glint{transition:none}}.sb{background:var(--paper-sunk);border-radius:var(--r-lg);grid-template-columns:repeat(auto-fit,minmax(clamp(52px,9vw,104px),1fr));gap:clamp(6px,1.2vw,14px);width:100%;padding:clamp(8px,1.6vw,20px);display:grid}.sb__slot{aspect-ratio:1;border-radius:var(--r-md);border:3px dashed var(--ink-faint);box-shadow:none;transition:background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);transform-origin:50%;background:0 0;place-items:center;display:grid;position:relative}.sb__slot--have{background-color:var(--card);background-image:linear-gradient(160deg, color-mix(in srgb, var(--letter-color) 18%, transparent), color-mix(in srgb, var(--letter-color) 4%, transparent));box-shadow:var(--sh-1);border-style:solid;border-color:#0000}.sb__ghost{font-family:var(--font-letter);color:var(--ink-faint);opacity:.55;transition:opacity var(--t-med) var(--ease-out);place-items:center;font-size:clamp(18px,4.4vw,46px);line-height:1;display:grid;position:absolute;inset:0}.sb__slot--have .sb__ghost{opacity:0}.sb__art{opacity:0;transition:opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-pop);font-size:clamp(20px,5vw,52px);line-height:1;transform:scale(.7)}.sb__slot--have .sb__art{opacity:1;transform:scale(1)}.sb__tag{font-family:var(--font-letter);color:var(--letter-color);opacity:0;transition:opacity var(--t-med) var(--ease-out);font-size:clamp(10px,2.1vw,22px);font-weight:700;line-height:1;position:absolute;bottom:2%;right:4%}.sb__slot--have .sb__tag{opacity:1}.sb__flier{border-radius:var(--r-lg);background-color:var(--card);background-image:linear-gradient(160deg, color-mix(in srgb, var(--letter-color) 22%, transparent), color-mix(in srgb, var(--letter-color) 6%, transparent));box-shadow:var(--sh-2);z-index:88;pointer-events:none;transform-origin:50%;will-change:transform;place-items:center;line-height:1;display:grid;position:fixed;top:0;left:0}@media (prefers-reduced-motion:reduce){.sb__slot,.sb__ghost,.sb__art,.sb__tag{transition:none}.sb__art{transform:none}}.cursorfx{z-index:95;pointer-events:none;position:fixed;inset:0;overflow:hidden}.cursorfx__dot{color:var(--fx-color,var(--accent));will-change:transform, opacity;animation:cursorfx-fade .72s var(--ease-out) forwards;font-size:clamp(12px,2.2vh,22px);line-height:1;position:absolute;translate:-50% -50%}@keyframes cursorfx-fade{0%{opacity:.95;transform:scale(.5)rotate(0)}30%{opacity:.9;transform:scale(1.1)rotate(20deg)}to{opacity:0;transform:translate(calc(var(--fx-drift,0) * 8px), -26px) scale(.4) rotate(90deg)}}@media (hover:hover) and (pointer:fine){body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='8' fill='%23E14434' fill-opacity='.45'/%3E%3Ccircle cx='14' cy='14' r='4' fill='%23E14434'/%3E%3C/svg%3E") 14 14,auto}}@media (prefers-reduced-motion:reduce){.cursorfx{display:none}}.stage,.screen{flex-direction:column;flex:auto;min-height:0;display:flex;position:relative}.ico{width:100%;height:100%;display:block}.pic-btn{min-width:var(--hit-min);min-height:var(--hit-min);border-radius:var(--r-pill);background:var(--card);color:var(--ink-soft);box-shadow:var(--sh-2);transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);place-items:center;padding:.6em;display:grid}.pic-btn:active{box-shadow:var(--sh-1);transform:translateY(3px)scale(.94)}.pic-btn .ico{width:clamp(26px,4.4vh,44px);height:clamp(26px,4.4vh,44px)}.wake{z-index:120;background:color-mix(in srgb, var(--paper) 92%, var(--ink));place-items:center;display:grid;position:fixed;inset:0}.wake[hidden]{display:none}.wake__tap{border-radius:var(--r-xl);place-items:center;gap:2vh;padding:4vh 6vw;display:grid}.wake__ripple{width:clamp(56px,12vh,110px);height:clamp(56px,12vh,110px);color:var(--accent);animation:tap-hint 1.8s var(--ease-out) infinite;display:block}.splash{grid-auto-flow:row;place-items:center;gap:3vh;display:grid}.splash__tap{border-radius:var(--r-pill);background:var(--accent);width:min(46vh,46vw);height:min(46vh,46vw);color:var(--card);box-shadow:var(--sh-3);place-items:center;display:grid;position:relative}.splash__ring{border-radius:inherit;border:.7vh solid var(--accent);opacity:.35;animation:splash-breathe 2.6s var(--ease-out) infinite;position:absolute;inset:-3%}.splash__art{width:44%;height:44%;display:block;position:relative}.splash__tap:active{transform:scale(.96)}.splash__tap--used .splash__ring{animation:none}.splash__gatewrap{place-items:center;display:grid}.gate{--gate-p:0;width:clamp(var(--hit-min), 11vh, 108px);height:clamp(var(--hit-min), 11vh, 108px);border-radius:var(--r-pill);color:var(--warm);place-items:center;display:grid;position:relative}.gate__ring{border-radius:inherit;background:conic-gradient(var(--warm) calc(var(--gate-p) * 360deg), color-mix(in srgb, var(--warm) 16%, transparent) 0);position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 62%,#000 64%);mask:radial-gradient(circle,#0000 62%,#000 64%)}.gate__art{width:56%;height:56%;display:block;position:relative}.gate--holding .gate__art{transform:scale(.92)}.splash__gate{width:min(28vh,28vw);height:min(28vh,28vw)}.pad{grid-template-rows:auto 1fr;place-content:center;gap:2vh;padding:3vh 4vw;display:grid}.pad__display{border-bottom:4px solid var(--ink-faint);min-height:1.2em;font-family:var(--font-letter);text-align:center;color:var(--ink);padding:.2em .6em;font-size:clamp(28px,7vh,64px);line-height:1.2}.pad__grid{grid-template-columns:repeat(9,minmax(0,1fr));justify-items:stretch;gap:clamp(4px,1vh,10px);display:grid}.pad__key{border-radius:var(--r-md);background:var(--card);min-height:clamp(44px,8vh,72px);color:var(--ink);box-shadow:var(--sh-1);font-family:var(--font-letter);place-items:center;font-size:clamp(18px,3.4vh,30px);font-weight:700;display:grid}.pad__key:active{box-shadow:none;transform:translateY(2px)}.pad__key .ico{width:55%;height:55%}.pad__key--wide{grid-column:span 5}.pad__key--util{color:var(--ink-soft);grid-column:span 2}.pad__key--go{background:var(--good);color:var(--card);grid-column:span 2}.pad__key--go:disabled{opacity:.35}.pad__space{border-radius:var(--r-pill);background:var(--ink-faint);width:40%;height:4px;display:block}.home{grid-template-rows:auto 1fr;gap:1.5vh;padding:1.5vh 2vw;display:grid}.home__top{justify-content:center;align-items:center;gap:clamp(12px,3vw,48px);display:flex}.home__mascot{margin-inline-end:auto}.home__big{background:var(--accent);width:clamp(96px,20vh,190px);height:clamp(96px,20vh,190px);color:var(--card);box-shadow:var(--sh-3)}.home__big .ico{width:46%;height:46%}.home__big--num{background:var(--good)}.home__big--toy{background:var(--cool)}.home__gate{margin-inline-start:auto}.home__board{place-items:center;min-height:0;display:grid;overflow:hidden}.home__board .sb{max-width:min(96vw,1100px)}.play{grid-template-rows:minmax(0,1fr) auto;min-height:0;display:grid}.play__stage{grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);place-items:center;column-gap:clamp(4px,1.5vw,32px);min-height:0;padding:1dvh 1.5vw;display:grid;position:relative}.play__card{transition:transform var(--t-slow) var(--ease-pop);grid-area:1/2}.play--hero .play__card{transform:scale(1.12)}.play .play__mascot{grid-area:1/1;align-self:end;width:clamp(96px,min(26dvh,15vw),230px)}.play__home{opacity:.5;position:absolute;top:1dvh;left:1vw}.play__next{border-radius:var(--r-pill);background:var(--good);width:clamp(72px,min(16dvh,12vw),150px);height:clamp(72px,min(16dvh,12vw),150px);color:var(--card);box-shadow:var(--sh-3);grid-area:1/3;place-items:center;display:grid}.play__next[hidden]{display:none}.play__nextart{width:52%;height:52%;animation:next-nudge 2.4s var(--ease-out) infinite;display:block}.play__next:active{transform:translateY(3px)scale(.95)}.play__boardwrap{background:color-mix(in srgb, var(--paper) 88%, var(--ink));opacity:0;transition:opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);pointer-events:none;place-items:center;padding:2vh 3vw;display:grid;position:absolute;inset:0;transform:scale(.96)}.play__boardwrap[hidden]{display:none}.play__boardwrap.is-open{opacity:1;transform:none}.play__boardwrap.is-closing{opacity:0;transform:scale(.82)translateY(4vh)}.play .play__kb{--kb-cap:min(8.6vw, 10.2dvh, 92px);flex:none}.play--night{background:color-mix(in srgb, var(--paper) 78%, var(--ink));transition:background-color var(--t-slow) var(--ease-out)}.play--exit .play__home{opacity:1;transform:scale(1.35)}.play--toy .play__next,.play--toy .play__home{opacity:0;pointer-events:none}.ghost-tap{z-index:5;width:clamp(48px,9vh,84px);height:clamp(48px,9vh,84px);color:var(--letter-color);pointer-events:none;animation:ghost-tap 1.2s var(--ease-out) 2;margin:calc(clamp(48px,9vh,84px)/-2) 0 0 calc(clamp(48px,9vh,84px)/-2);position:absolute}.freeplay{min-height:0;transition:background-color var(--t-slow) var(--ease-out);grid-template-rows:1fr auto;display:grid}.freeplay--lit{background:color-mix(in srgb, var(--letter-color) 10%, var(--paper))}.freeplay__stage{place-items:center;min-height:0;padding:1vh 2vw;display:grid;position:relative}.freeplay__mascot{position:absolute;bottom:0;left:1vw}.freeplay__home{opacity:.5;position:absolute;top:1vh;left:1vw}.freeplay__kb{flex:none}.parent{background:var(--paper-2);grid-template-rows:auto 1fr;display:grid}.parent__header{background:var(--paper);box-shadow:var(--sh-1);align-items:center;gap:2vw;padding:1.2vh 3vw;display:flex}.parent__title{font-size:clamp(18px,3vh,28px);font-weight:700}.parent__panel{-webkit-overflow-scrolling:touch;touch-action:pan-y;align-content:start;gap:2.4vh;width:100%;max-width:900px;min-height:0;margin-inline:auto;padding:2vh 4vw 6vh;font-size:clamp(14px,2vh,17px);line-height:1.5;display:grid;overflow-y:auto}.parent__section{border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-1);gap:.9em;padding:1.4em;display:grid}.parent__section h2{font-size:1.15em;font-weight:700}.parent__note{color:var(--ink-soft);font-size:.92em}.parent__body{color:var(--ink)}.parent__row{align-items:center;gap:.8em;display:flex}.parent__row input[type=checkbox]{width:1.5em;height:1.5em;accent-color:var(--good);flex:none}.parent__row--slider{grid-template-columns:minmax(8em,1fr) 2fr auto;display:grid}.parent__row input[type=range]{width:100%;accent-color:var(--cool)}.parent__value{text-align:right;font-variant-numeric:tabular-nums;min-width:3.5em;color:var(--ink-soft)}.parent__btn{border-radius:var(--r-pill);background:var(--cool);color:var(--card);box-shadow:var(--sh-1);justify-self:start;padding:.6em 1.1em;font-size:.95em;font-weight:600}.parent__btn--danger{background:var(--accent)}.parent__btn--file{cursor:pointer;display:inline-block}.parent__table{border-collapse:collapse;width:100%;font-size:.92em}.parent__table th{text-align:left;color:var(--ink-soft);padding-bottom:.4em;font-weight:600}.parent__table td{border-top:1px solid var(--paper-sunk);padding:.3em .4em .3em 0}.parent__glyph{font-family:var(--font-letter);width:2em;font-size:1.6em;font-weight:700}.parent__list{gap:.6em;display:grid}.parent__prow{border-radius:var(--r-md);background:var(--paper-2);align-items:center;gap:.6em;padding:.5em .8em;display:flex}.parent__prow--on{background:color-mix(in srgb, var(--good) 16%, var(--card))}.parent__pname{flex:auto;font-weight:600}@media (orientation:portrait){.home__top{flex-wrap:wrap}.parent__row--slider{grid-template-columns:1fr auto}.parent__row--slider input[type=range]{grid-column:1/-1}}.ico--glyph{font-family:var(--font-letter)}.pad__key--hit{animation:pad-hit .18s var(--ease-out)}@media (prefers-reduced-motion:reduce){.pad__key--hit{animation:none}}.keyfx{z-index:30;pointer-events:none;font-family:var(--font-letter);color:var(--fx-color,var(--accent));animation:keyfx-pop .76s var(--ease-out) forwards;font-size:clamp(48px,14vh,150px);font-weight:700;line-height:1;position:absolute;top:38%;left:50%;translate:-50% -50%}@media (prefers-reduced-motion:reduce){.keyfx{animation:.76s linear forwards keyfx-fade}@keyframes keyfx-fade{0%,70%{opacity:1}to{opacity:0}}}.home__big{width:clamp(78px,15.5vh,148px);height:clamp(78px,15.5vh,148px)}.home__big--bub{background:var(--warm)}.kb{--kb-cap:min(9vw, 9.5vh, 84px);--kb-key:max(var(--hit-min), var(--kb-cap));--kb-half:calc(var(--kb-key) / 2);--kb-gap:calc(var(--kb-key) * .1);--kb-inset:max(0px, (var(--kb-key) - var(--kb-cap)) / 2);--kb-stagger:40ms;--kb-sh-pressed:0 1px 0 color-mix(in srgb, var(--letter-color) 55%, var(--ink));grid-template-columns:repeat(20, var(--kb-half));grid-auto-rows:var(--kb-key);width:100%;padding-block:calc(var(--kb-gap) / 2);font-family:var(--font-letter);touch-action:none;flex:none;place-content:end center;display:grid}.kb__key{padding:calc(var(--kb-gap) / 2 + var(--kb-inset));touch-action:none;pointer-events:none;display:grid}.kb__key.lit{pointer-events:auto}.kb__key:focus{outline:none}.kb__key:focus-visible .kb__cap{outline:3px solid var(--cool);outline-offset:3px}.kb__cap{border-radius:var(--r-md);width:100%;height:100%;font-size:calc(var(--kb-cap) * .44);background:var(--paper-sunk);color:var(--ink-faint);box-shadow:none;filter:saturate(.12);opacity:.45;transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out), filter var(--t-med) var(--ease-out);flex-direction:column;justify-content:center;align-items:center;line-height:1;display:flex;position:relative}.kb__key.lit .kb__cap{background:color-mix(in srgb, var(--letter-color) 15%, var(--card));color:color-mix(in srgb, var(--letter-color) 85%, var(--ink));box-shadow:var(--sh-key-lit);filter:none;opacity:1}.kb__key.lit.pressed .kb__cap{transform:translateY(calc(var(--kb-key) * .05)) scale(.93, .88);box-shadow:var(--kb-sh-pressed)}.kb__glyph{transition:font-size var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);font-weight:700;display:block}.kb--upper .kb__glyph--upper,.kb--lower .kb__glyph--lower{opacity:1;font-size:1em}.kb--upper .kb__glyph--lower,.kb--lower .kb__glyph--upper{opacity:.55;font-size:.48em;font-weight:600}.kb__ring{border-radius:inherit;pointer-events:none;opacity:0;position:absolute;inset:0}.kb__key.pulsing .kb__ring{animation:kb-pulse calc(var(--t-slow) * 2.4) var(--ease-out) infinite}.kb.disabled{pointer-events:none}.kb.disabled .kb__key.lit .kb__cap{box-shadow:var(--sh-1);opacity:.72}.kb__key.rising{animation:kb-rise var(--t-med) var(--ease-pop) backwards;animation-delay:calc(var(--kb-rise-i,0) * var(--kb-stagger))}.kb__key.popping .kb__cap{animation:kb-pop var(--t-med) var(--ease-out)}.kb__key.flash-correct .kb__cap{animation:kb-flash-correct var(--t-slow) var(--ease-pop)}.kb__key.flash-wrong .kb__cap{animation:kb-flash-wrong var(--t-slow) var(--ease-out)}.kb__key.flash-hint .kb__cap{animation:kb-flash-hint var(--t-slow) var(--ease-out)}@media (prefers-reduced-motion:reduce){.kb{--kb-stagger:0s}.kb__key.pulsing .kb__ring{opacity:.4;box-shadow:0 0 0 calc(var(--kb-key) * .06) var(--letter-color);animation:none}}.kb--numbers{--kb-cap:min(11vw, 15vh, 116px)}.kb__key--digit .kb__glyph--upper{font-size:calc(var(--kb-cap) * .6);transform:none}.lc{--lc-art:clamp(110px, min(30dvh, 26vw), 320px);font-family:var(--font-letter);flex-direction:column;align-items:center;gap:clamp(4px,1dvh,14px);display:flex}.lc[data-mode=picture]{--lc-art:clamp(150px, min(56dvh, 50vw), 560px)}.lc[data-mode=picture] .lc__ghost,.lc[data-mode=picture] .lc__glyphs,.lc[data-mode=picture] .lc__word,.lc[data-mode=empty]{display:none}.lc__art{width:var(--lc-art);height:var(--lc-art);border-radius:var(--r-xl);background:var(--card);background-image:linear-gradient(160deg, color-mix(in srgb, var(--letter-color) 14%, transparent), color-mix(in srgb, var(--letter-color) 3%, transparent));box-shadow:var(--sh-2);will-change:transform;place-items:center;display:grid;position:relative;overflow:hidden;container-type:size}.lc__ghost{font-size:calc(var(--lc-art) * .92);color:var(--letter-color);opacity:.13;pointer-events:none;place-items:center;line-height:1;display:grid;position:absolute;inset:0}.lc__emoji{font-size:calc(var(--lc-art) * .46);filter:drop-shadow(0 3px 4px #7a604a3d);line-height:1;position:relative}.lc[data-mode=picture] .lc__emoji{font-size:calc(var(--lc-art) * .56)}.lc__emoji--glyph{color:var(--letter-color);font-size:calc(var(--lc-art) * .6)}.lc__img{object-fit:contain;width:78%;height:78%;position:relative}.lc__img[hidden],.lc__emoji[hidden]{display:none}.lc__glyphs{color:var(--letter-color);align-items:baseline;gap:.14em;font-size:clamp(40px,min(14dvh,12vw),132px);line-height:1;display:flex}.lc__glyph--primary{font-weight:700}.lc__glyph--companion{opacity:.55;font-size:.56em}.lc__word{color:var(--ink);letter-spacing:.02em;align-items:baseline;font-size:clamp(22px,min(7.5dvh,6.5vw),68px);line-height:1.1;display:flex}.lc__ch{transition:color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-pop);transform-origin:50% 85%;display:inline-block}.lc--sound .lc__ch--target{color:var(--letter-color);transform:scale(1.15)}.lc--reveal .lc__art{animation:lc-pop .52s var(--ease-pop) both}.lc--reveal .lc__glyphs{animation:lc-pop .56s 60ms var(--ease-pop) both}.lc--reveal .lc__ch{animation:lc-hop .38s var(--ease-pop) both;animation-delay:calc(var(--i,0) * 45ms)}@media (prefers-reduced-motion:reduce){.lc--reveal .lc__art,.lc--reveal .lc__glyphs,.lc--reveal .lc__ch{animation:none}.lc--sound .lc__ch--target{transform:none}}.lc__count{grid-template-columns:repeat(var(--cols,3), 1fr);place-content:center;place-items:center;gap:clamp(2px,.9vh,10px);width:100%;height:100%;padding:6%;display:grid}.lc__count[data-n="1"],.lc__count[data-n="0"]{--cols:1}.lc__count[data-n="2"]{--cols:2}.lc__count[data-n="3"]{--cols:3}.lc__count[data-n="4"]{--cols:2}.lc__count[data-n="5"],.lc__count[data-n="6"]{--cols:3}.lc__count[data-n="7"],.lc__count[data-n="8"]{--cols:4}.lc__count[data-n="9"]{--cols:3}.lc__pip{animation:lc-pip-in .26s var(--ease-pop) both;animation-delay:calc(var(--i,0) * 90ms);font-size:min(20cqmin,74px);line-height:1}.lc__count[data-n="1"] .lc__pip,.lc__count[data-n="2"] .lc__pip,.lc__count[data-n="3"] .lc__pip{font-size:min(28cqmin,128px)}.lc__pip--none{opacity:.42;filter:grayscale(.7)}@media (prefers-reduced-motion:reduce){.lc__pip{animation:none}}.lc__pip--counting{animation:lc-pip-count .42s var(--ease-pop);z-index:1}.lc__glyph--flash{animation:lc-glyph-flash .62s var(--ease-pop)}@media (prefers-reduced-motion:reduce){.lc__pip--counting,.lc__glyph--flash{animation:none}}.bubbles{background:radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--cool) 14%, transparent), transparent 70%), var(--paper);position:relative;overflow:hidden}.bubbles__field{touch-action:none;position:absolute;inset:0}.bubbles__home{z-index:10;position:absolute;top:2vh;left:2vw}.bubbles__mascot{z-index:5;position:absolute;bottom:1vh;left:2vw}.bubble{left:var(--x);--bub:calc(clamp(74px, 14vh, 140px) * var(--size,1));width:var(--bub);aspect-ratio:1;border-radius:var(--r-pill);background:radial-gradient(circle at 32% 28%, #ffffffe6, #ffffff26 42%, transparent 60%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--letter-color) 34%, transparent), color-mix(in srgb, var(--letter-color) 14%, transparent));box-shadow:inset 0 -6px 14px color-mix(in srgb, var(--letter-color) 22%, transparent), 0 4px 14px #7a604a24;animation:bubble-rise var(--rise,9s) linear forwards;will-change:transform;place-items:center;display:grid;position:absolute;bottom:-22vh;translate:-50%}.bubble__glyph{font-family:var(--font-letter);font-size:calc(var(--bub) * .5);color:var(--letter-color);text-shadow:0 1px #ffffffb3;font-weight:700}@keyframes bubble-rise{0%{transform:translateY(0)translate(0)}50%{transform:translateY(-60vh) translateX(calc(var(--sway,0) * 6vw))}to{transform:translateY(-125vh)translate(0)}}.bubble--pop{animation:bubble-rise var(--rise,9s) linear forwards, bubble-burst .32s var(--ease-out) forwards;pointer-events:none}@keyframes bubble-burst{0%{opacity:1;scale:1}35%{opacity:.85;scale:1.35}to{opacity:0;scale:1.7}}@media (prefers-reduced-motion:reduce){.bubble{animation-duration:calc(var(--rise,9s) * 1.6);--sway:0}.bubble--pop{animation:bubble-rise calc(var(--rise,9s) * 1.6) linear forwards, bubble-fade .32s linear forwards}@keyframes bubble-fade{to{opacity:0}}}
