@font-face{font-family:"Baloo 2";src:url(/keyquest/fonts/baloo2.woff2)format("woff2");font-weight:500 700;font-display:swap}:root{--bg:#fff8e7;--ink:#343a40;--muted:#666b71;--accent:#ff8c42;--card:#fff;--ok:#3cb371;--bad:#e5484d;--lp:#f28b82;--lr:#fbbc04;--lm:#81c995;--li:#8ab4f8;--ri:#c58af9;--rm:#ff8bcb;--rr:#78d9ec;--rp:#fdd663;--th:#bdc1c6;--strip:linear-gradient(90deg, var(--lp), var(--lr), var(--lm), var(--li), var(--ri), var(--rm), var(--rr), var(--rp));--shadow:0 3px 0 #0000000d, 0 20px 40px #00000024, inset 0 2px 0 #ffffffb3;--pop:cubic-bezier(.34,1.56,.64,1)}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);flex-direction:column;min-height:100vh;margin:0;padding:0 16px 24px;font-family:"Baloo 2",Segoe UI,system-ui,sans-serif;font-size:18px;display:flex}#app{flex:1}h1{margin:0;font-size:1.6rem}h2{margin:.2rem 0}button{font:inherit;background:var(--accent);color:var(--ink);cursor:pointer;border:0;border-radius:12px;padding:.6rem 1.2rem;font-weight:700;transition:transform .12s ease-out;box-shadow:0 4px #00000024}button:active{transform:scale(.94)}button.link{color:var(--muted);min-height:44px;box-shadow:none;background:0 0;padding:.3rem .5rem;text-decoration:underline}button:disabled{opacity:.5;cursor:default}.muted{color:var(--muted)}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}h1[tabindex="-1"]:focus{outline:none}@media (prefers-reduced-motion:reduce){:not(.fuse i){transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.scenery .cloud{left:var(--x,20vw);animation:none}.props,.props *{animation:none}}.card,.world,.intro,.result{background:var(--card);box-shadow:var(--shadow);animation:card-in .5s var(--pop) both;border-radius:28px;position:relative}.card:before,.world:before,.intro:before,.result:before{content:"";background:var(--strip);border-radius:28px 28px 0 0;height:8px;position:absolute;top:0;left:0;right:0}@keyframes card-in{0%{opacity:0;transform:translateY(24px)scale(.92)}}.card{max-width:420px;margin:8vh auto;padding:2.4rem 1.5rem 1.5rem;overflow:visible}.card .badge{background:var(--card);color:var(--ink);border:3px solid var(--card);white-space:nowrap;border-radius:999px;align-items:center;gap:.4rem;padding:.55rem 1.5rem;font-size:1.15rem;display:inline-flex;position:absolute;top:-1.15rem;left:50%;transform:translate(-50%);box-shadow:0 4px #00000026,0 10px 18px #0000002e}.card .muted{text-align:center;margin-top:.3rem;display:block}label{margin:.8rem 0;display:block}input{width:100%;font:inherit;border:3px solid #ddd;border-radius:12px;margin-top:.2rem;padding:.5rem;transition:border-color .15s;display:block}input:focus{border-color:var(--accent)}.card button[type=submit]{width:100%;margin-top:.9rem;padding:.8rem;font-size:1.15rem;display:block}.card button.link{margin:.6rem auto 0;display:block}.pin-wrap{padding-right:2.8rem;display:block;position:relative}.pin-boxes{gap:.5rem;margin-top:.2rem;display:flex}.pin-boxes input{text-align:center;appearance:textfield;width:3rem;height:3.2rem;margin:0;padding:0;font-size:1.6rem}.pin-boxes input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pin-boxes input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pin-wrap .eye{width:2.5rem;height:2.5rem;box-shadow:none;background:0 0;place-items:center;padding:0;font-size:1.3rem;display:grid;position:absolute;top:50%;right:.25rem;transform:translateY(-50%)}.pin-wrap .eye:active{transform:translateY(-50%)scale(.9)}.err{color:var(--bad);text-align:center;min-height:1.4em;margin:.4rem 0}.err.shake{animation:.3s shake}.wordmark{background:linear-gradient(90deg,#e0483e,#e6931a,#2f9e44,#1f7fd6,#8b4fd6,#d63d8a,#e0483e) 0 0/300% 100%;color:#0000;-webkit-background-clip:text;background-clip:text;animation:7s linear infinite rainbow}@keyframes rainbow{to{background-position:300% 0}}.top h1{align-items:center;gap:.4rem;display:inline-flex}.ico{font-size:1.15em;line-height:1;display:inline-block}.top{z-index:20;background:var(--bg);flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 -16px;padding:.8rem 16px;display:flex;position:sticky;top:0;box-shadow:0 1px #00000012}.top .me{flex-wrap:wrap;align-items:center;gap:.5rem;margin-left:auto;display:flex}.chip{background:var(--card);border-radius:999px;align-items:center;gap:.3rem;padding:.3rem .85rem;font-weight:700;display:inline-flex;box-shadow:0 3px #00000014}.chip.bump{animation:bump .3s var(--pop)}@keyframes bump{50%{scale:1.15}}.chip.tip{cursor:help;position:relative}.chip.tip:after{content:attr(data-tip);z-index:30;background:var(--ink);color:#fff;white-space:normal;opacity:0;pointer-events:none;width:max-content;max-width:min(19rem,100vw - 2rem);transition:opacity .15s, translate .15s var(--pop);border-radius:14px;padding:.6rem .8rem;font-size:.85rem;font-weight:600;line-height:1.35;position:absolute;top:calc(100% + .7rem);right:0;translate:0 -4px;box-shadow:0 8px 24px #0000002e}.chip.tip:before{content:"";z-index:31;border:.45rem solid #0000;border-bottom-color:var(--ink);opacity:0;pointer-events:none;border-top:0;transition:opacity .15s;position:absolute;top:calc(100% + .25rem);right:1.1rem}.chip.tip:hover:after,.chip.tip:focus-visible:after,.chip.tip.open:after,.chip.tip:hover:before,.chip.tip:focus-visible:before,.chip.tip.open:before{opacity:1;translate:0}@media (prefers-reduced-motion:reduce){.chip.tip:after{transition:none}}@media (width<=719px){.chip.tip:after{top:var(--tip-top,5rem);width:auto;max-width:none;position:fixed;left:1rem;right:1rem}}.sky{padding:.8rem 0 5.5rem;position:relative}.sky[data-world]{--sky:#cfeacb;--land:#6ab04c}.sky[data-world=top]{--sky:#1d2b53;--land:#3b4a7a}.sky[data-world=bottom]{--sky:#a8dcf5;--land:#2f8fd3}.sky[data-world=shift]{--sky:#d9ccf0;--land:#8a7bc4}.sky[data-world=punct]{--sky:#ffd6e7;--land:#ff8bcb}.sky[data-world=numbers]{--sky:#efe6b9;--land:#b0a05a}.sky[data-world=symbols]{--sky:#cfd8e3;--land:#6b7c93}.sky[data-world=farm]{--sky:#dff3c8;--land:#8fc94a}.sky[data-world=pirates]{--sky:#b5dff2;--land:#2d7fa6}.sky[data-world=arctic]{--sky:#e6f3fb;--land:#b7d9ea}.sky[data-world=volcano]{--sky:#ffd4b0;--land:#b04a2a}.sky[data-world=dragon]{--sky:#d4c7e8;--land:#5e4b8b}.sky[data-world=galaxy]{--sky:#2a1f4d;--land:#6a4fb0}.scenery{z-index:-1;background:var(--sky);transition:background-color .7s;position:fixed;inset:0;overflow:hidden}.scenery:before{content:"";background:var(--land);opacity:.8;border-radius:50%;height:65vh;transition:background-color .7s;position:absolute;bottom:-45vh;left:-15%;right:-15%}.sun{background:#ffd66b;border-radius:50%;width:92px;height:92px;position:absolute;top:9%;right:9%;box-shadow:0 0 44px 12px #ffd66b73}.sky[data-world=top] .sun,.sky[data-world=galaxy] .sun{display:none}.cloud,.cloud:before,.cloud:after{background:#fff;border-radius:999px}.cloud{top:var(--y);opacity:.92;width:150px;height:50px;scale:var(--s,1);animation:drift var(--t,70s) linear var(--d,0s) infinite;position:absolute;left:-30vw}.cloud:before,.cloud:after{content:"";position:absolute}.cloud:before{width:66px;height:66px;top:-34px;left:24px}.cloud:after{width:48px;height:48px;top:-22px;left:78px}@keyframes drift{to{translate:150vw}}.props{opacity:.85;--d:color-mix(in srgb, var(--land) 62%, #000);--l:color-mix(in srgb, var(--land) 50%, #fff);position:absolute;bottom:0;left:0;right:0}.sky[data-world=top] .props,.sky[data-world=galaxy] .props{--d:color-mix(in srgb, var(--land) 55%, #fff);--l:#f4f0e0}.props svg{width:100%;height:auto;animation:.3s props-in;display:block;overflow:visible}.props .sway,.props .flap,.props .bob,.props .roll,.props .glide,.props .spin,.props .spin-r,.props .blink,.props .pulse,.props .twinkle,.props .puff,.props .comet,.props .jump,.props .wobble,.props .waddle,.props .drift{transform-box:fill-box;transform-origin:50%}@keyframes props-in{0%{opacity:0}}.props .sway{transform-origin:50% 100%;animation:3.5s ease-in-out infinite alternate p-sway}.props .flap{transform-origin:0;animation:3s ease-in-out infinite alternate p-flap}.props .bob{animation:5s ease-in-out infinite alternate p-bob}.props .roll{animation:6s ease-in-out infinite alternate p-roll}.props .glide{animation:12s ease-in-out infinite alternate p-glide}.props .spin{animation:7s linear infinite p-spin}.props .spin-r{animation:8s linear infinite reverse p-spin}.props .blink{animation:3s infinite p-blink}.props .pulse{animation:4s ease-in-out infinite p-pulse}.props .twinkle{animation:4s ease-in-out infinite p-twinkle}.props .puff{animation:6s ease-out infinite p-puff}.props .comet{animation:10s linear infinite p-comet}.props .jump{animation:5s ease-in-out infinite p-jump}.props .wobble{animation:2.4s ease-in-out infinite p-wobble}.props .waddle{animation:1.6s ease-in-out infinite alternate p-waddle}.props .drift{animation:14s ease-in-out infinite alternate p-drift}@keyframes p-sway{0%{transform:rotate(-7deg)}to{transform:rotate(7deg)}}@keyframes p-flap{to{transform:scaleX(.55)skewY(8deg)}}@keyframes p-bob{0%{transform:translateY(0)rotate(-4deg)}to{transform:translateY(-12px)rotate(4deg)}}@keyframes p-roll{to{transform:translate(110px)}}@keyframes p-glide{50%{transform:translate(140px,-30px)}to{transform:translate(280px)}}@keyframes p-spin{to{transform:rotate(360deg)}}@keyframes p-blink{0%,40%{opacity:1}50%,90%{opacity:.15}}@keyframes p-pulse{50%{opacity:.35;transform:scale(1.08)}}@keyframes p-twinkle{50%{opacity:.1;transform:scale(.6)}}@keyframes p-puff{to{opacity:0;transform:translateY(-70px)}}@keyframes p-jump{0%,55%,to{opacity:0;transform:translateY(40px)rotate(0)}65%{opacity:1}78%{opacity:1;transform:translate(-30px,-60px)rotate(-20deg)}92%{opacity:0;transform:translate(-60px,40px)rotate(-70deg)}}@keyframes p-wobble{0%,60%,to{transform:rotate(0)}70%{transform:rotate(-9deg)}80%{transform:rotate(9deg)}90%{transform:rotate(-5deg)}}@keyframes p-waddle{0%{transform:rotate(-6deg)translate(-3px)}to{transform:rotate(6deg)translate(3px)}}@keyframes p-drift{to{transform:translate(40px,-14px)rotate(6deg)}}@keyframes p-comet{0%{opacity:0}5%{opacity:1}35%,to{opacity:0;transform:translate(-220px,110px)}}.track{scroll-snap-type:x mandatory;scrollbar-width:none;padding:.4rem 0 1rem;display:flex;overflow-x:auto}.track::-webkit-scrollbar{display:none}.slide{scroll-snap-align:start;flex:0 0 100%;justify-content:center;align-items:flex-start;padding:0 2px;display:flex}.slide:not(.is-current){content-visibility:auto}.world{width:min(860px,100%);animation:card-in .5s var(--pop) both, floaty 6s ease-in-out 1s infinite;padding:1rem 1.2rem}@keyframes floaty{50%{translate:0 -7px}}.world .emoji{text-align:center;filter:drop-shadow(0 8px 8px #0000002e);font-size:3.6rem;line-height:1.05}.world h2{text-align:center;justify-content:center;align-items:center;gap:.5rem;margin:.2rem 0 0;font-size:1.6rem;display:flex}.world .medal{animation:pulse .6s .4s var(--pop) both;font-size:1.6rem}.world.done{box-shadow:0 0 0 4px var(--accent), var(--shadow)}.world .muted{text-align:center;max-width:60ch;margin:.2rem auto .6rem;line-height:1.35}@keyframes pulse{50%{scale:1.3}}.arrow{z-index:20;background:var(--card);width:4rem;height:4rem;color:var(--ink);transition:scale .15s var(--pop), opacity .2s;border-radius:50%;place-items:center;padding:0;display:grid;position:fixed;top:50%;translate:0 -50%;box-shadow:0 4px #0000001f,0 10px 20px #00000026}.arrow svg{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;width:2rem;height:2rem}.arrow.left{left:1rem}.arrow.right{right:1rem}.arrow:hover{scale:1.08}.arrow:active{transform:scale(.92)}.arrow:disabled{opacity:.3;box-shadow:none;scale:.85}.where{clip-path:inset(50%);width:1px;height:1px;margin:0;position:absolute;overflow:hidden}@media (height<=820px){.world{padding:.7rem 1rem}.world .emoji{font-size:2.6rem}.world h2{margin-top:.1rem;font-size:1.35rem}.world .muted{margin:.1rem auto .45rem;font-size:.9rem}.lessons{gap:.5rem}.lesson{min-height:3.3rem;padding:.35rem .7rem}.track{padding:.3rem 0 .6rem}body{padding-bottom:12px}}.dots{align-items:center;gap:7px;display:flex}.dots i{width:10px;height:10px;transition:scale .2s var(--pop), background-color .2s;background:#d9cfbf;border-radius:50%}.dots i.done{background:var(--ok)}.dots i.on{background:var(--accent);scale:1.5}.sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@media (width>=720px){.world{width:min(860px,100% - 9rem)}}@media (width<=719px){.arrow{width:3.4rem;height:3.4rem;top:auto;bottom:.7rem;translate:none}.where{padding:.5rem .7rem;bottom:1.25rem}.dots{gap:5px}.dots i{width:8px;height:8px}.world{padding:1rem .8rem}}.lessons{flex-wrap:wrap;gap:.7rem;display:flex}.lesson{text-align:left;background:var(--card);max-width:14rem;min-height:3.8rem;color:var(--ink);box-shadow:none;border:2px solid #f1e4cf;border-bottom-width:5px;border-radius:16px;flex-direction:column;flex:9.5rem;justify-content:center;gap:.1rem;padding:.45rem .8rem;scroll-margin-top:6rem;transition:translate .15s ease-out,scale .12s ease-out;display:flex;position:relative}.lesson:hover,.lesson:focus-visible{translate:0 -2px}.lesson:active{transform:translate(0,0)scale(.97)}.lesson>span:first-child{font-size:.95rem;line-height:1.2}.lesson .stars{color:var(--accent);letter-spacing:.1em;font-size:1rem;line-height:1.1}.lesson.locked{opacity:.5;background:var(--bg);pointer-events:none;padding-right:2.2rem;font-weight:600}.lesson.locked:after{content:"🔒";font-size:1rem;position:absolute;top:.3rem;right:.5rem}.lesson.next{border-color:var(--accent);animation:2s ease-in-out infinite breathe}.lesson:before{content:attr(data-key);letter-spacing:.06em;color:var(--ink);background:#f1e4cf;border-radius:6px;padding:.1rem .45rem;font-size:.62rem;font-weight:700;line-height:1.2;position:absolute;top:0;left:50%;transform:translate(-50%,-55%);box-shadow:0 2px #0000001f}.lesson.next:before{content:"ENTER";background:var(--accent)}.lesson.locked:before{opacity:.45}@keyframes breathe{50%{box-shadow:0 0 0 9px #ff8c424d}}.play{max-width:900px;margin:0 auto}#stage{min-height:12rem}.intro,.result{text-align:center;padding:1.6rem 1rem 1.4rem;overflow:hidden}.intro p,.result p{margin:.5rem 0}.intro .keys{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:700;display:flex}.intro button,.result #next{margin-top:.6rem;padding:.8rem 1.7rem;font-size:1.25rem}kbd.hint{vertical-align:middle;color:var(--muted);background:#fff;border-bottom-width:3px;margin-left:.35rem;padding:0 .4rem;font-size:.7rem}kbd{min-width:2.8rem;color:var(--ink);border:3px solid var(--c,#cfd4d9);animation:drop .25s calc(var(--i,0) * .25s) var(--pop) both;background:#fff;border-bottom-width:6px;border-radius:12px;padding:.15rem .7rem;font-size:1.8rem;font-weight:700;line-height:1.3;display:inline-block}@keyframes drop{0%{opacity:0;translate:0 -28px}}.play:has(.intro) .finger.next{animation:.6s ease-out pulse}.hud{align-items:center;gap:.8rem;margin:.6rem 0;display:flex}.bar{background:var(--card);border-radius:999px;flex:1;height:1.2rem;overflow:hidden;box-shadow:inset 0 2px 5px #00000024}.fill{background:linear-gradient(90deg, var(--accent), #ffb347);border-radius:999px;width:0;height:100%;transition:width .15s ease-out}.stream{grid-template-columns:minmax(0,1fr) fit-content(64%) minmax(0,1fr);align-items:center;gap:.8rem;min-height:7.5rem;padding:.6rem 0;display:grid;overflow:hidden}.past,.queue{align-items:center;gap:.6rem;display:flex;overflow:visible}.past{justify-content:flex-end}.item{white-space:nowrap;background:var(--card);color:var(--muted);border-radius:14px;padding:.25rem .8rem;font-size:1.8rem;font-weight:700;line-height:1.25;transition:opacity .25s;box-shadow:0 3px #00000014}.item span,.item b{display:inline-block}.item b{white-space:nowrap}.item span.ok{color:#1f7a45;animation:.12s ease-out ok-pulse}.item span.now{color:#b8480b;text-underline-offset:.18em;text-decoration:underline;text-decoration-thickness:3px}.item.miss{animation:.25s shake;background:#ffcdd2!important}@keyframes ok-pulse{50%{scale:1.35}}@keyframes shake{25%{translate:-4px}75%{translate:4px}}.now .item{color:var(--ink);box-shadow:0 4px 0 var(--accent);background:#fff3e0}.stream.words .now .item{white-space:normal;text-align:center}.stream.words .item{letter-spacing:.12em;word-spacing:.35em}.stream.words .now .item{letter-spacing:.2em;padding:.3rem 1.1rem;font-size:2rem}@media (width<=719px){.stream.words .now .item{font-size:1.4rem}}.queue .item{opacity:.8;transform-origin:0;scale:.85}.past .item{opacity:.5;color:#6b6259;box-shadow:none;transform-origin:100%;background:#e9e1d4;scale:.7}.past .item.expired{color:#a33a3a;background:#f6d3d0}.past .item span{color:inherit;text-decoration:none}.stream:not(.words) .item{border-radius:50%;place-items:center;width:3.7rem;height:3.7rem;padding:0;font-size:2.6rem;display:grid}.fuse{background:#00000014;border-radius:999px;height:6px;margin:.3rem 0 .1rem;display:none;overflow:hidden}.now .fuse{display:block}.fuse i{background:linear-gradient(90deg, var(--accent), #ffb347);transform-origin:0;border-radius:999px;height:100%;display:block}.now .fuse i{animation:fuse var(--dur,8s) linear forwards}@keyframes fuse{to{scale:0 1}}.big{color:var(--accent);letter-spacing:.05em;font-size:3.4rem;line-height:1.1}.big span{animation:star-in .45s calc(var(--i,0) * .2s) var(--pop) both;display:inline-block}.big span:not(.on){color:#e3dccd}@keyframes star-in{0%{opacity:0;rotate:-40deg;scale:0}}.result .earned{background:var(--accent);color:var(--ink);animation:slide-in .5s .7s var(--pop) both;border-radius:999px;padding:.4rem 1.1rem;font-weight:700;display:inline-block;box-shadow:0 4px #00000026}@keyframes slide-in{0%{opacity:0;translate:-48px}}.result i{pointer-events:none;background:var(--c,var(--accent));border-radius:3px;width:10px;height:14px;animation:.9s ease-out forwards confetti;position:absolute;top:35%;left:50%}@keyframes confetti{to{translate:var(--dx) var(--dy);opacity:0;rotate:720deg}}.kb{-webkit-user-select:none;user-select:none;margin-top:1rem}.kb .row{justify-content:center;gap:4px;margin:4px 0;display:flex}.key{border:2px solid var(--c,#e0e0e0);width:2.2rem;height:2.2rem;color:var(--muted);background:#fff;border-bottom-width:4px;border-radius:6px;place-items:center;font-size:.95rem;display:grid}.key.wide{width:5rem}.key.space{width:16rem}.key.next{background:var(--c,var(--accent));color:var(--ink);border-bottom-width:2px;transform:translateY(2px)}.caps{color:#5b4600;background:#fff1a8;border-radius:10px;flex-basis:100%;margin:.2rem 0 0;padding:.4rem .8rem;font-weight:600;animation:.25s ease-out caps-in;box-shadow:0 2px #00000014}.caps kbd{margin-right:.2rem;padding:0 .4rem;font-size:1rem}.caps-host .caps{text-align:center;margin:.2rem 0 .6rem}@keyframes caps-in{0%{opacity:0;translate:0 -6px}}body.caps-on .key.next{background:#ffd54a;border-color:#e0a800}.hands{width:min(100%,420px);margin:.5rem auto 0;display:block}.palm,.finger{fill:#fde7d3;stroke:#e0b08a;stroke-width:2px}.finger.next{fill:var(--c)}.finger{transform-box:fill-box;transform-origin:50% 100%}.finger[data-finger=th]{transform-origin:50% 0;transform:rotate(-35deg)}.finger[data-finger=th]~[data-finger=th]{transform:rotate(35deg)}[data-finger=lp]{--c:var(--lp)}[data-finger=lr]{--c:var(--lr)}[data-finger=lm]{--c:var(--lm)}[data-finger=li]{--c:var(--li)}[data-finger=ri]{--c:var(--ri)}[data-finger=rm]{--c:var(--rm)}[data-finger=rr]{--c:var(--rr)}[data-finger=rp]{--c:var(--rp)}[data-finger=th]{--c:var(--th)}.foot{text-align:center;color:var(--muted);margin:1rem auto 0;font-size:.85rem}@media (height<=820px){.foot{margin-top:.5rem}}@media (width>=720px){body:has(.where) .foot{z-index:20;background:var(--card);white-space:nowrap;text-overflow:ellipsis;border-radius:999px;max-width:calc(100% - 2rem);margin:0;padding:.35rem .9rem;position:fixed;bottom:1.1rem;left:50%;overflow:hidden;translate:-50%;box-shadow:0 3px #00000014}}.foot a{color:var(--muted)}