:root{--ink: #0a0f18;--workshop-deep: #111827;--workshop-mid: #1e293b;--workshop-sky: #334155;--surface-glass: rgba(255, 255, 255, .055);--surface-glass-strong: rgba(255, 255, 255, .09);--surface-border: rgba(255, 255, 255, .1);--key-cap: #f8fafc;--key-cap-shadow: #94a3b8;--key-label: #0f172a;--left-zone: #fb7185;--right-zone: #2dd4bf;--glow-warm: #fbbf24;--accent-bright: #38bdf8;--accent-violet: #a78bfa;--sprout: #4ade80;--oops: #c084fc;--font-display: "Outfit", system-ui, sans-serif;--font-body: "DM Sans", system-ui, sans-serif;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-key: .55rem;--radius-panel: 1rem;--radius-pill: 999px;--shadow-key: 0 4px 0 var(--key-cap-shadow), 0 8px 20px rgba(0, 0, 0, .35);--shadow-key-press: 0 2px 0 var(--key-cap-shadow), 0 4px 10px rgba(0, 0, 0, .25);--shadow-glow: 0 0 0 1px rgba(251, 191, 36, .35), 0 0 32px rgba(251, 191, 36, .28);--transition-fast: .12s ease;--transition-medium: .28s cubic-bezier(.34, 1.3, .64, 1)}@media(prefers-reduced-motion:reduce){:root{--transition-fast: 0ms;--transition-medium: 0ms}}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--font-body);color:var(--key-cap);background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(56,189,248,.14),transparent),radial-gradient(circle at 100% 100%,rgba(45,212,191,.08),transparent 40%),linear-gradient(180deg,var(--ink) 0%,var(--workshop-deep) 50%,#0f172a 100%);overflow:hidden}button{font:inherit;cursor:pointer;border:none}.app{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;padding:var(--space-md) var(--space-lg) var(--space-lg);gap:var(--space-md)}.top-bar{display:grid;gap:var(--space-xs)}.eyebrow,.start-eyebrow,.complete-eyebrow{margin:0;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#f3ebe0a6}.title{margin:0;font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.02em}.step-rail{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0}.step-rail li{font-size:.7rem;font-weight:600;padding:.25rem .6rem;border-radius:var(--radius-pill);background:var(--surface-glass);border:1px solid var(--surface-border);color:#f8fafc8c}.step-rail li.is-current{background:#fbbf2429;border-color:#fbbf2459;color:var(--glow-warm)}.step-rail li.is-done{background:#4ade801f;border-color:#4ade8047;color:var(--sprout)}.stage{display:grid;grid-template-rows:auto minmax(160px,1fr) auto;gap:var(--space-md);min-height:0}.instruction-card{text-align:center;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-panel);background:var(--surface-glass-strong);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 40px #00000038}.instruction-card.mode-find{border-color:#fbbf2459;background:linear-gradient(180deg,rgba(251,191,36,.1),transparent 55%),var(--surface-glass-strong)}.instruction-card.mode-type{border-color:#38bdf847}.instruction-eyebrow{margin:0 0 var(--space-sm);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright)}.instruction-card.mode-find .instruction-eyebrow{color:var(--glow-warm)}.instruction-body{display:flex;align-items:center;justify-content:center;gap:clamp(var(--space-md),4vw,var(--space-xl));flex-wrap:wrap}.instruction-copy{flex:1 1 12rem;min-width:0}.target-key-hero{flex-shrink:0;display:grid;gap:.35rem;justify-items:center}.target-key-cap{display:grid;place-items:center;width:clamp(4.75rem,14vw,6.75rem);height:clamp(4.75rem,14vw,6.75rem);border-radius:calc(var(--radius-key) + .15rem);background:linear-gradient(180deg,#ffffff 0%,var(--key-cap) 55%,#e2e8f0 100%);color:var(--key-label);font-family:var(--font-display);font-size:clamp(2.75rem,8vw,4rem);font-weight:800;line-height:1;box-shadow:var(--shadow-key),var(--shadow-glow);animation:target-hero-pulse 1.1s ease-in-out infinite}.target-key-label{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#f8fafca6}.instruction-card.has-target .prompt-text{font-size:clamp(1.05rem,2.4vw,1.45rem);font-weight:600}.prompt-panel{text-align:center;padding:var(--space-sm) var(--space-md)}.prompt-text{margin:0;font-family:var(--font-display);font-size:clamp(1.35rem,3.2vw,2rem);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--key-cap)}.prompt-sub{margin:var(--space-xs) 0 0;font-size:clamp(.95rem,2vw,1.05rem);line-height:1.45;color:#f8fafcb8}.habitat{position:relative;border-radius:var(--radius-panel);overflow:hidden;border:2px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#4a7a99,#2f5875 55%,#23455f);min-height:180px}.habitat-sky{position:absolute;top:0;right:0;bottom:45%;left:0;background:linear-gradient(180deg,rgba(255,200,87,.15),transparent)}.habitat-ground{position:absolute;inset:auto 0 0 0;height:42%;background:repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0,rgba(0,0,0,.04) 12px,transparent 12px,transparent 24px),linear-gradient(180deg,#6b5344,#4a3729);border-top:3px solid rgba(0,0,0,.15)}.creature-stage{position:relative;z-index:1;height:100%;display:grid;place-items:center;padding:var(--space-lg)}.creature{width:clamp(72px,14vw,120px);height:clamp(72px,14vw,120px);position:relative;transition:transform var(--transition-medium)}.creature.idle:before{content:"💤";font-size:clamp(2.5rem,8vw,4rem);display:block;text-align:center;animation:float 2.4s ease-in-out infinite}.creature-caption{margin:var(--space-sm) 0 0;font-size:.95rem;color:#f3ebe0d9;text-align:center;min-height:1.4em}.combo-meter{position:absolute;top:var(--space-sm);right:var(--space-sm);display:flex;align-items:baseline;gap:.35rem;padding:.35rem .65rem;border-radius:999px;background:#14263673;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.combo-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}.combo-count{font-family:var(--font-display);font-size:1.25rem;color:var(--glow-warm)}.keyboard-wrap{position:relative;padding:var(--space-md) var(--space-sm) var(--space-sm);padding-top:calc(var(--space-md) + .75rem);border-radius:var(--radius-panel);background:var(--surface-glass);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hand-zones{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-bottom:var(--space-sm);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}.zone{padding:.25rem .5rem;border-radius:.4rem;text-align:center}.zone-left{color:var(--left-zone);background:#ff7f5c1f}.zone-right{color:var(--right-zone);background:#3ecfb21f}.finger-guide{position:absolute;inset:0 0 auto 0;height:70px;pointer-events:none;opacity:.85}.finger-path{fill:none;stroke:var(--glow-warm);stroke-width:3;stroke-dasharray:6 6;stroke-linecap:round}.finger-dot{fill:var(--glow-warm)}@media(prefers-reduced-motion:no-preference){.finger-path{animation:dash 1.8s linear infinite}}.keyboard{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(.35rem,1.2vw,.65rem);max-width:720px;margin:0 auto}.key{aspect-ratio:1 / 1.05;border:none;border-radius:var(--radius-key);background:var(--key-cap);color:var(--key-label);font-family:var(--font-display);font-size:clamp(1rem,2.5vw,1.45rem);box-shadow:var(--shadow-key);position:relative;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);touch-action:manipulation}.key:focus-visible{outline:3px solid var(--glow-warm);outline-offset:3px}.key:after{content:attr(data-creature-name);position:absolute;bottom:.25rem;left:50%;transform:translate(-50%);font-family:var(--font-body);font-size:.55rem;letter-spacing:.04em;text-transform:uppercase;opacity:0;transition:opacity var(--transition-fast);white-space:nowrap;color:#2b21188c}.key.show-habitat:after{opacity:1}.key.is-left-zone{box-shadow:var(--shadow-key),inset 0 0 0 2px #ff7f5c59}.key.is-right-zone{box-shadow:var(--shadow-key),inset 0 0 0 2px #3ecfb259}.key.is-target{position:relative;z-index:2;background:#fff8eb;outline:3px solid rgba(255,200,87,.95);outline-offset:2px;animation:key-hint-blink .85s ease-in-out infinite}.key.is-target:before{content:"▼";position:absolute;top:-1.1rem;left:50%;transform:translate(-50%);font-size:.65rem;line-height:1;color:var(--glow-warm);text-shadow:0 0 8px rgba(255,200,87,.8);animation:hint-arrow-blink .85s ease-in-out infinite;pointer-events:none}.key.is-pressed{transform:translateY(4px);box-shadow:var(--shadow-key-press)}.key.is-wiggle{animation:wiggle .42s ease}.key.is-lit{background:#fff3c4;box-shadow:var(--shadow-key),0 0 18px #ffc8578c}.key.is-discovered{background:linear-gradient(180deg,#fff8eb,#e8f5d8)}.bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:2.75rem}.bottom-actions{display:flex;align-items:center;gap:var(--space-sm)}.sound-toggle{padding:.55rem .85rem;border-radius:999px;background:#ffffff1a;color:#f3ebe0d9;font-size:.85rem;font-weight:700;border:1px solid rgba(255,255,255,.12);transition:background var(--transition-fast),color var(--transition-fast)}.sound-toggle[aria-pressed=true]{background:#ffc8572e;color:var(--glow-warm)}.sound-toggle:focus-visible{outline:3px solid var(--glow-warm);outline-offset:3px}.assist-hint{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.85rem;font-weight:500;color:#f8fafc9e}.assist-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--glow-warm);box-shadow:0 0 8px #fbbf24cc;animation:assist-dot-pulse 1.1s ease-in-out infinite;flex-shrink:0}.cta{padding:.75rem 1.25rem;border-radius:999px;background:var(--glow-warm);color:var(--ink);font-weight:700;box-shadow:0 4px #c9972e;transition:transform var(--transition-fast)}.cta:hover{transform:translateY(-1px)}.cta:active{transform:translateY(2px);box-shadow:0 2px #c9972e}.cta:focus-visible{outline:3px solid var(--key-cap);outline-offset:3px}.start-sheet,.complete-sheet{border:none;padding:0;max-width:none;width:100%;height:100%;background:#142636d1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.start-sheet::backdrop,.complete-sheet::backdrop{background:#14263680}.start-card,.complete-card{margin:auto;width:min(420px,calc(100% - 2rem));padding:var(--space-xl);border-radius:var(--radius-panel);background:var(--workshop-deep);border:1px solid rgba(255,255,255,.1);color:var(--key-cap);text-align:center}.start-card h2,.complete-card h2{margin:0 0 var(--space-sm);font-family:var(--font-display);font-size:1.75rem;font-weight:400}.start-card p,.complete-card p{margin:0 0 var(--space-md);line-height:1.5;color:#f3ebe0d9}.cta-start{width:100%}.discovered-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm);margin:var(--space-lg) 0 var(--space-md)}.discovered-key{aspect-ratio:1;display:grid;place-items:center;border-radius:var(--radius-key);background:var(--key-cap);color:var(--key-label);font-family:var(--font-display);font-size:1.25rem;box-shadow:var(--shadow-key);animation:pop-in .4s cubic-bezier(.34,1.3,.64,1) both}.discovered-count{font-family:var(--font-display);font-size:1.15rem}.mastered-badge{display:inline-block;padding:.35rem .75rem;border-radius:999px;background:#8bc34a33;color:var(--sprout);font-size:.9rem}.creature[data-creature=ant]:before{content:"🐜";font-size:clamp(2.5rem,8vw,4rem)}.creature[data-creature=snake]:before{content:"🐍";font-size:clamp(2.5rem,8vw,4rem)}.creature[data-creature=frog]:before{content:"🐸";font-size:clamp(2.5rem,8vw,4rem)}.creature[data-creature=dino]:before{content:"🦕";font-size:clamp(2.5rem,8vw,4rem)}.creature[data-creature=jelly]:before{content:"🍮";font-size:clamp(2.5rem,8vw,4rem)}.creature[data-creature=kangaroo]:before{content:"🦘";font-size:clamp(2.5rem,8vw,4rem)}.creature[data-creature=lion]:before{content:"🦁";font-size:clamp(2.5rem,8vw,4rem)}.creature[data-creature=spark]:before{content:"✨";font-size:clamp(2.5rem,8vw,4rem)}.creature.react-jump{animation:jump .52s cubic-bezier(.34,1.4,.64,1)}.creature.react-kick{animation:kick .48s ease}.creature.react-wobble{animation:wobble .6s ease}.creature.react-pop{animation:pop .45s ease}.creature.react-slither{animation:slither .55s ease}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes dash{to{stroke-dashoffset:-24}}@keyframes target-hero-pulse{0%,to{transform:scale(1);box-shadow:var(--shadow-key),var(--shadow-glow)}50%{transform:scale(1.04);box-shadow:var(--shadow-key),0 0 0 4px #fbbf2440,0 0 48px #fbbf2473}}@keyframes assist-dot-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}@keyframes target-pulse{0%,to{box-shadow:var(--shadow-key),0 0 #ffc85773}50%{box-shadow:var(--shadow-key),0 0 0 8px #ffc85700}}@keyframes key-hint-blink{0%,to{background:#fff8eb;outline-color:#ffc857f2;box-shadow:var(--shadow-key),0 0 14px #ffc85773;transform:scale(1)}50%{background:#ffe084;outline-color:#ff7f5cf2;box-shadow:var(--shadow-key),0 0 0 4px #ffc85759,0 0 24px #ffc857b3;transform:scale(1.07)}}@keyframes hint-arrow-blink{0%,to{opacity:1;transform:translate(-50%) translateY(0)}50%{opacity:.45;transform:translate(-50%) translateY(3px)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}@keyframes jump{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-36px) scale(1.08)}to{transform:translateY(0) scale(1)}}@keyframes kick{0%,to{transform:translate(0)}30%{transform:translate(18px) rotate(8deg)}60%{transform:translate(-8px)}}@keyframes wobble{0%,to{transform:scale(1)}30%{transform:scale(1.15,.85)}60%{transform:scale(.9,1.1)}}@keyframes pop{0%{transform:scale(.6);opacity:.5}60%{transform:scale(1.15);opacity:1}to{transform:scale(1)}}@keyframes slither{0%{transform:translate(-20px)}to{transform:translate(20px)}}@keyframes pop-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.level-placeholder{display:grid;place-items:center;min-height:60dvh}.placeholder-card{width:min(460px,100%);padding:var(--space-xl);border-radius:var(--radius-panel);background:#1426368c;border:1px solid rgba(255,255,255,.08);text-align:center}.placeholder-eyebrow{margin:0 0 var(--space-xs);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#f3ebe0a6}.placeholder-card h2{margin:0 0 var(--space-sm);font-family:var(--font-display);font-size:1.65rem;font-weight:400}.placeholder-card p{margin:0 0 var(--space-lg);line-height:1.5;color:#f3ebe0d1}.stage-words{grid-template-rows:auto auto 1fr}.word-stage{display:grid;place-items:center;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-panel);background:var(--surface-glass);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-height:140px}.word-progress{margin:0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#f3ebe08c}.word-target{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .4rem;font-family:var(--font-display);font-size:clamp(2.25rem,8vw,3.75rem);font-weight:800;line-height:1.05;letter-spacing:-.02em}.word-letter{display:inline-block;padding:.1rem .2rem;border-radius:.35rem;color:#f3ebe059;transition:color var(--transition-fast),background var(--transition-fast),transform var(--transition-medium)}.word-letter.is-done{color:var(--sprout)}.word-letter.is-current{color:var(--glow-warm);background:#ffc85726;transform:scale(1.08);animation:target-pulse 1.2s ease-in-out infinite}.word-caption{margin:0;font-size:.9rem;color:#f3ebe0a6}.keyboard-wrap-full{overflow-x:auto;overflow-y:visible;padding-top:calc(var(--space-md) + .85rem);padding-bottom:var(--space-sm)}.keyboard-full-mount{width:100%}.keyboard-layout-label{margin:0 0 var(--space-xs);text-align:center;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#f3ebe08c}.keyboard-full{display:flex;flex-direction:column;gap:var(--space-xs);min-width:min(100%,720px);max-width:920px;margin:0 auto}.keyboard-row{display:flex;gap:clamp(.18rem,.45vw,.32rem);width:100%}.key-full{flex:var(--key-units, 1) 1 0;min-width:0;aspect-ratio:auto;min-height:clamp(1.65rem,3.8vw,2.35rem);font-size:clamp(.62rem,1.5vw,.88rem)}.key-decor,.key-modifier{font-family:var(--font-body);font-size:clamp(.42rem,.95vw,.58rem);opacity:.42;background:#f3ebe0b8;color:#2b21187a;box-shadow:none;cursor:default}.keyboard-focus-home .key-full.is-dimmed{opacity:.26;filter:saturate(.55)}.keyboard-focus-home .key-full.is-home-active{opacity:1;filter:none}.key-full.show-habitat:after{opacity:1}.key-full.is-left-zone{box-shadow:var(--shadow-key),inset 0 0 0 2px #ff7f5c59}.key-full.is-right-zone{box-shadow:var(--shadow-key),inset 0 0 0 2px #3ecfb259}.key-full.is-pressed{transform:translateY(3px);box-shadow:var(--shadow-key-press)}.key-full.is-wiggle{animation:wiggle .42s ease}.key-full.is-lit{background:#fff3c4;box-shadow:var(--shadow-key),0 0 18px #ffc8578c}.key-full.is-discovered{background:linear-gradient(180deg,#fff8eb,#e8f5d8)}.key-full.is-home-row{box-shadow:var(--shadow-key),inset 0 0 0 2px #ffc85733}.key-full.is-target{position:relative;z-index:2;background:#fffbeb;outline:3px solid rgba(251,191,36,.95);outline-offset:2px;transform:scale(1.06);animation:key-hint-blink .75s ease-in-out infinite}.key-full.is-target:before{content:"▼";position:absolute;top:-1.05rem;left:50%;transform:translate(-50%);font-size:.65rem;line-height:1;color:var(--glow-warm);text-shadow:0 0 10px rgba(251,191,36,.9);animation:hint-arrow-blink .75s ease-in-out infinite;pointer-events:none}.key-space.is-target{outline-color:#3ecfb2f2;animation:key-hint-blink-space .85s ease-in-out infinite}.key-space.is-target:before{color:var(--right-zone);text-shadow:0 0 8px rgba(62,207,178,.8)}@keyframes key-hint-blink-space{0%,to{background:#e8faf5;outline-color:#3ecfb2f2;box-shadow:var(--shadow-key),0 0 14px #3ecfb266}50%{background:#ccf5ea;outline-color:#3ecfb2b3;box-shadow:var(--shadow-key),0 0 0 4px #3ecfb24d,0 0 22px #3ecfb28c}}@media(prefers-reduced-motion:reduce){.key.is-target,.key-full.is-target,.key-space.is-target,.target-key-cap,.assist-dot{animation:none;outline-width:3px;box-shadow:var(--shadow-key),0 0 12px #fbbf2480}.key.is-target:before,.key-full.is-target:before{animation:none;opacity:1}}.discovered-word{font-size:.85rem;padding:.35rem;word-break:break-word}.cta-secondary{background:#ffffff1f;color:var(--key-cap);box-shadow:none;border:1px solid rgba(255,255,255,.14)}.cta-secondary:hover{background:#ffffff2e}.complete-card .cta-secondary{margin-top:var(--space-sm)}.habitat-compact{width:100%;min-height:110px;margin-bottom:var(--space-sm);position:relative}.habitat-compact .creature-stage{padding:var(--space-sm)}.habitat-compact .creature{width:clamp(56px,10vw,88px);height:clamp(56px,10vw,88px)}.word-celebration{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.celebration-bit{position:absolute;top:55%;left:var(--x);font-size:1.1rem;color:var(--color);opacity:0;transform:translateY(0)}.celebration-active .celebration-bit{animation:celebration-rise 1s ease-out var(--delay) forwards}.celebration-parade .celebration-bit{font-size:1.45rem;animation:celebration-parade 1.1s ease-out var(--delay) forwards}.celebration-bounce .word-target{animation:celebration-bounce .55s ease}.sticker-shelf{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;min-height:1.75rem;margin-top:var(--space-xs)}.sticker-shelf-large{margin:var(--space-md) 0;padding:var(--space-sm);border-radius:var(--radius-panel);background:#ffffff0f}.sticker-chip{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.5rem;background:#ffffff1a;font-size:1.15rem;animation:pop-in .32s cubic-bezier(.34,1.3,.64,1) both}.sticker-empty{font-size:.8rem;color:#f3ebe073}.sticker-picker-sheet{border:none;padding:0;max-width:none;width:100%;height:100%;background:#142636d1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.sticker-picker-sheet::backdrop{background:#14263680}.sticker-picker-card{margin:auto;width:min(460px,calc(100% - 2rem));padding:var(--space-xl);border-radius:var(--radius-panel);background:var(--workshop-deep);border:1px solid rgba(255,255,255,.1);color:var(--key-cap);text-align:center}.sticker-picker-card h2{margin:0 0 var(--space-xs);font-family:var(--font-display);font-size:1.75rem;font-weight:400}.picker-hint{margin:0 0 var(--space-lg);color:#f3ebe0bf}.sticker-options{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}.sticker-option{display:grid;gap:.35rem;place-items:center;padding:var(--space-md) var(--space-sm);border-radius:var(--radius-panel);background:#ffffff14;border:2px solid transparent;color:var(--key-cap);transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast)}.sticker-option:hover{transform:translateY(-2px);border-color:#ffc85773;background:#ffc8571f}.sticker-option-num{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.65}.sticker-option-emoji{font-size:2rem}@keyframes celebration-rise{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}to{opacity:0;transform:translateY(-70px) translate(var(--drift)) scale(1.1)}}@keyframes celebration-parade{0%{opacity:0;transform:translate(-30px) scale(.7)}20%{opacity:1}to{opacity:0;transform:translate(40px) scale(1.05)}}@keyframes celebration-bounce{0%,to{transform:scale(1)}40%{transform:scale(1.06)}70%{transform:scale(.98)}}.home-shell{gap:var(--space-lg)}.home-header .home-sub{margin:0;color:#f3ebe0b8;max-width:36rem}.keyboard-layout-picker{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-top:var(--space-sm)}.layout-picker-label{font-size:.85rem;color:#f3ebe0bf}.layout-picker-select{font:inherit;font-size:.9rem;padding:.4rem .65rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.14);background:#142636a6;color:var(--key-cap);cursor:pointer}.layout-picker-select:focus-visible{outline:3px solid var(--glow-warm);outline-offset:2px}.level-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-md);align-content:start;overflow-y:auto;min-height:0}.level-card{display:grid;gap:var(--space-sm);padding:var(--space-lg);border-radius:var(--radius-panel);background:var(--surface-glass-strong);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 32px #0000002e;text-align:left}.level-card-complete{border-color:#8bc34a59}.level-card-progress{border-color:#ffc85759}.level-card-eyebrow{margin:0;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#f3ebe099}.level-card-icon{font-size:2rem}.level-card-title{margin:0;font-family:var(--font-display);font-size:1.45rem;font-weight:400}.level-card-blurb{margin:0;color:#f3ebe0c7;line-height:1.45;flex:1}.level-badge{display:inline-block;width:fit-content;padding:.2rem .55rem;border-radius:999px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;background:#ffffff14;color:#f3ebe0b3}.level-card-complete .level-badge{background:#8bc34a33;color:var(--sprout)}.level-card-progress .level-badge{background:#ffc8572e;color:var(--glow-warm)}.level-card-cta{width:100%;margin-top:var(--space-xs)}.home-footer{flex-direction:column;align-items:stretch;gap:var(--space-sm)}.home-footer .sticker-shelf{justify-content:flex-start}.word-target-phrase{max-width:100%;font-size:clamp(1.5rem,5vw,2.5rem)}.word-letter.word-space{min-width:1.1em;text-align:center;color:#3ecfb28c}.word-letter.word-space.is-current{color:var(--right-zone);background:#3ecfb226}.word-letter.word-space.is-done{color:var(--right-zone)}.key-space{aspect-ratio:auto;min-height:clamp(1.65rem,3.8vw,2.35rem);font-family:var(--font-body);font-size:clamp(.5rem,1.1vw,.72rem);letter-spacing:.04em;text-transform:lowercase}@media(max-width:640px){.app{padding:var(--space-sm)}.key:after{display:none}.bottom-bar,.bottom-actions{flex-direction:column;align-items:stretch}.sound-toggle,.cta{width:100%;text-align:center}}