:root{--hue:45;--ink:#4a4560;--paper:#fffdf8;--font:"Baloo 2", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{font-family:var(--font);color:var(--ink);background:hsl(var(--hue) 70% 90%);background-image:radial-gradient(circle at 20% 20%, hsl(calc(var(--hue) + 40) 75% 94%) 0 12%, transparent 13%), radial-gradient(circle at 85% 30%, hsl(calc(var(--hue) - 40) 70% 92%) 0 9%, transparent 10%), radial-gradient(circle at 70% 85%, hsl(calc(var(--hue) + 90) 70% 93%) 0 14%, transparent 15%), radial-gradient(circle at 10% 80%, hsl(calc(var(--hue) + 160) 70% 94%) 0 7%, transparent 8%);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .4s}#app{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);grid-template-rows:auto 1fr auto;display:grid}.bar{justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;display:flex}.logo{background:var(--paper);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:14px;padding:0 12px;font-size:clamp(1.1rem,4vmin,1.8rem);font-weight:800;transform:rotate(-3deg)}.logo span{color:hsl(var(--hue) 45% 58%);margin-left:4px}.tools{gap:8px;display:flex}.tool{font:inherit;color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;border-radius:999px;padding:6px 14px;font-size:clamp(.9rem,3vmin,1.15rem);font-weight:800}.tool:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.tool[aria-pressed=true]{background:#f6b8c4}@media (width<=480px){.tool span{display:none}}#stage{place-items:center;min-height:0;padding:8px 16px;display:grid;position:relative}.hint{color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink);margin:0;font-size:clamp(1.6rem,7vmin,3.5rem);font-weight:800;animation:1.6s ease-in-out infinite bob}.card{background:var(--paper);border:5px solid var(--ink);max-width:100%;max-height:100%;box-shadow:10px 10px 0 var(--ink);border-radius:32px;justify-items:center;padding:clamp(8px,2vmin,20px) clamp(20px,5vmin,56px);display:grid}.card.pop{animation:.45s cubic-bezier(.2,1.6,.4,1) pop}.glyph{color:hsl(var(--hue) 55% 66%);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;font-size:clamp(3rem,16vmin,10rem);font-weight:800;line-height:1}.pic{text-align:center;min-height:1.15em;font-size:clamp(4rem,26vmin,14rem);line-height:1.15}.pic img,.fly{vertical-align:middle;-webkit-user-drag:none;width:1em;height:1em}.pic img{pointer-events:none}.pic.many img{margin:.03em}.pic.many{flex-wrap:wrap;place-content:center;max-width:5.6em;min-height:2.3em;font-size:clamp(2rem,9vmin,5rem);display:flex}.word{text-align:center;font-size:clamp(1.6rem,8vmin,4.5rem);font-weight:800;line-height:1.1}.word b{color:hsl(var(--hue) 55% 66%);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}.fly{z-index:5;pointer-events:none;font-size:clamp(2rem,8vmin,4.5rem);animation:1.1s cubic-bezier(.15,.7,.4,1) forwards fly;position:fixed;translate:-50% -50%}.vkb{padding:8px max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));border-top:4px solid var(--ink);background:#ffffff8c;gap:6px;display:grid}.keys{gap:6px;display:grid}.letters{grid-template-columns:repeat(9,1fr)}.numbers{grid-template-columns:repeat(10,1fr)}@media (aspect-ratio>=4/3){.letters{grid-template-columns:repeat(13,1fr)}}.keys button{font:inherit;height:clamp(42px,9vmin,76px);color:var(--ink);background:hsl(var(--h) 70% 86%);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);touch-action:manipulation;cursor:pointer;border-radius:14px;padding:0;font-size:clamp(1.3rem,5.5vmin,2.4rem);font-weight:800;line-height:1}.keys button:active,.keys button.down{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.stop{z-index:20;color:#fff;pointer-events:none;background:radial-gradient(circle,#ffc9c9 0 35%,#f2939b 75%);align-content:center;place-items:center;font-size:clamp(5rem,30vmin,18rem);line-height:1;animation:.5s ease-out blast,.12s linear .5s 6 shake;display:grid;position:fixed;inset:0}.stop b{-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:8px 8px 0 var(--ink);font-size:.6em}.start{z-index:30;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fdeec8e0;place-items:center;display:grid;position:fixed;inset:0}#startBtn{font:inherit;color:var(--ink);border:5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);cursor:pointer;background:#f6b8c4;border-radius:28px;padding:16px 40px;font-size:clamp(2rem,9vmin,4.5rem);font-weight:800;animation:1.4s ease-in-out infinite bob}@keyframes pop{0%{transform:scale(.4)rotate(-8deg)}to{transform:scale(1)rotate(0)}}@keyframes bob{50%{transform:translateY(-10px)rotate(2deg)}}@keyframes fly{0%{opacity:1;transform:translate(0)scale(.3)rotate(0)}80%{opacity:1}to{transform:translate(var(--dx), var(--dy)) scale(1.3) rotate(var(--rot));opacity:0}}@keyframes blast{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.15)}to{transform:scale(1)}}@keyframes shake{25%{transform:translate(-14px,6px)rotate(-3deg)}75%{transform:translate(14px,-6px)rotate(3deg)}}@media (prefers-reduced-motion:reduce){.hint,#startBtn,.stop{animation:none}}