.kf-game{--kf-gap:clamp(3px, .8vw, 8px);--kf-pad:clamp(4px, 1.2vw, 16px);--kf-reserve:250px;--kf-k:calc((100% - 9 * var(--kf-gap)) / 10);--kf-font:max(.85rem, min(calc(4.6vw - 3px), calc((100vh - var(--kf-reserve)) * .15), 1.95rem));flex-direction:column;flex:auto;align-self:stretch;width:100%;min-height:0;display:flex;position:relative}.kf-game>.game-prompt{margin:auto}.kf-hud{flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:.4rem .6rem;padding:.35rem .5rem;font-weight:800;display:flex}.kf-level{background:#ffffff14;border:1px solid #ffffff29;border-radius:999px;align-items:center;gap:.45rem;min-width:0;padding:.3rem .8rem;font-size:.95rem;line-height:1.2;display:inline-flex}.kf-level-new{animation:.7s cubic-bezier(.3,1.5,.5,1) kfChip}.kf-level-critter{font-size:1.2rem;line-height:1}.kf-dots{align-items:center;gap:3px;display:inline-flex}.kf-dot{background:#ffffff3d;border-radius:50%;width:8px;height:8px}.kf-dot-on{background:#ffd166;box-shadow:0 0 6px #ffd166b3}.kf-score{white-space:nowrap;font-size:1rem}.kf-score strong{color:#ffd166;font-variant-numeric:tabular-nums;font-size:1.4rem}.kf-score-label{opacity:.72;font-size:.8rem}.kf-main{flex-direction:column;flex:auto;align-items:center;gap:clamp(.9rem,3vh,1.8rem);min-height:0;padding:.25rem 0 .5rem;display:flex}.kf-ask{text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem .7rem;margin-top:auto;display:flex}.kf-ask-text{font-size:clamp(1.1rem,3vw,1.6rem);font-weight:800}.kf-ask-letter{color:#3a2500;background:linear-gradient(#ffe38a,#ffc53d);border-radius:.3em;justify-content:center;align-items:center;min-width:1.5em;height:1.5em;padding:0 .2em;font-size:clamp(1.8rem,6vw,3rem);font-weight:900;line-height:1;animation:.42s cubic-bezier(.3,1.6,.5,1) kfPop;display:inline-flex;box-shadow:0 4px #b7791f,0 0 22px #ffd16673}.kf-hear{width:44px;height:44px;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#ffffff14;border:1px solid #ffffff38;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1.25rem;line-height:1;display:inline-flex}.kf-hear:active{background:#ffffff2e}.kf-board{width:100%;max-width:max(300px, min(calc(680px + 9 * var(--kf-gap) + 2 * var(--kf-pad)), calc((100vh - var(--kf-reserve) - 2 * var(--kf-gap) - 2 * var(--kf-pad)) * 10 / 3 + 9 * var(--kf-gap) + 2 * var(--kf-pad))));padding:var(--kf-pad);border-radius:calc(var(--kf-pad) + 10px);background:linear-gradient(#252c47,#161b2e);flex:none;margin-bottom:auto;position:relative;box-shadow:0 12px 32px #00000073,inset 0 1px #ffffff17,inset 0 0 0 1px #ffffff0f}.kf-keys{gap:var(--kf-gap);flex-direction:column;display:flex;position:relative}.kf-row{align-items:flex-start;gap:var(--kf-gap);display:flex}.kf-row-1>.kf-key:first-child{margin-left:calc(.25 * (var(--kf-k) + var(--kf-gap)))}.kf-row-2>.kf-key:first-child{margin-left:calc(.75 * (var(--kf-k) + var(--kf-gap)))}.kf-key{width:var(--kf-k);height:0;padding:var(--kf-k) 0 0;color:#f4f6ff;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:linear-gradient(#434c72,#2c3352);border:0;border-radius:22%;flex:none;margin:0;transition:opacity .3s;position:relative;box-shadow:0 3px #12162a,inset 0 1px #ffffff29}.kf-cap{font-size:var(--kf-font);pointer-events:none;justify-content:center;align-items:center;font-weight:900;line-height:1;display:flex;position:absolute;inset:0}.kf-bump{opacity:.5;pointer-events:none;background:currentColor;border-radius:2px;width:26%;height:3px;margin-left:-13%;position:absolute;bottom:13%;left:50%}@media (hover:hover){.kf-key:hover{filter:brightness(1.18)}}.kf-key:focus-visible{outline-offset:2px;outline:3px solid #7dd3fc}.kf-hear:focus-visible{outline-offset:2px;outline:3px solid #7dd3fc}.kf-key:before{content:"";border-radius:inherit;opacity:0;pointer-events:none;background:#a5b4fc99;transition:opacity .7s;position:absolute;inset:0;box-shadow:0 0 16px 2px #a5b4fc8c}.kf-key.kf-key-soft:before{opacity:1;transition-duration:90ms}.kf-key.kf-key-off{opacity:.42}.kf-key.kf-key-off.kf-key-soft{opacity:1;transition-duration:90ms}.kf-key.kf-key-target{z-index:2;color:#3a2500;opacity:1;background:linear-gradient(#ffe38a,#ffc53d);animation:1.3s ease-in-out infinite alternate kfBreathe;box-shadow:0 3px #b7791f}.kf-key.kf-key-target:after{content:"";pointer-events:none;border-radius:26%;animation:1.1s ease-in-out infinite alternate kfGlow;position:absolute;inset:-5px;box-shadow:0 0 0 3px #ffe38af2,0 0 24px 8px #ffc53d8c}.kf-key.kf-key-found{z-index:2;color:#063b2a;opacity:1;background:linear-gradient(#b7f5d8,#34d399);animation:.6s cubic-bezier(.3,1.5,.5,1) kfFound;box-shadow:0 3px #0f7a55}.kf-key.kf-key-found:before{box-shadow:none;opacity:0;background:radial-gradient(circle,#b7f5d8d9 0%,#b7f5d800 70%);border-radius:50%;transition:none;animation:.6s ease-out kfBurst;inset:-35%}.kf-critter{z-index:3;width:var(--kf-k);height:0;padding-top:var(--kf-k);transform:translate(calc(var(--kf-col,0) * (100% + var(--kf-gap))), calc(var(--kf-row,0) * (100% + var(--kf-gap))));pointer-events:none;transition:transform .48s cubic-bezier(.34,1.25,.64,1);position:absolute;top:0;left:0}.kf-bug{width:1em;height:1em;font-size:calc(var(--kf-font) * 1.35);text-align:center;text-shadow:0 3px 5px #00000073;transform-origin:50% 60%;line-height:1;position:absolute;top:-.5em;right:-.5em}.kf-bug-land{animation:.7s cubic-bezier(.3,1.2,.5,1) kfLand,2.4s ease-in-out .7s infinite alternate kfBob}.kf-bug-spin{animation:.64s cubic-bezier(.3,1.3,.5,1) kfSpin}.kf-bug-nudge{animation:.42s ease-in-out kfNudge,2.4s ease-in-out .42s infinite alternate kfBob}@keyframes kfGlow{0%{opacity:.45}to{opacity:1}}@keyframes kfBreathe{0%{transform:scale(1)}to{transform:scale(1.07)}}@keyframes kfFound{0%{transform:scale(1)}35%{transform:scale(1.24)}to{transform:scale(1)}}@keyframes kfBurst{0%{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(1.3)}}@keyframes kfLand{0%{transform:translateY(-35%)rotate(-14deg)scale(1.15)}60%{transform:translateY(6%)rotate(6deg)scale(1.05,.92)}to{transform:none}}@keyframes kfBob{0%{transform:translateY(0)rotate(-4deg)}to{transform:translateY(-10%)rotate(4deg)}}@keyframes kfSpin{0%{transform:rotate(0)scale(1)}55%{transform:rotate(220deg)scale(1.4)}to{transform:rotate(360deg)scale(1)}}@keyframes kfNudge{0%,to{transform:rotate(0)}25%{transform:rotate(-16deg)}75%{transform:rotate(16deg)}}@keyframes kfPop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes kfChip{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes kfFadeIn{0%{opacity:0}to{opacity:1}}@keyframes kfFadeOut{0%{opacity:1}to{opacity:0}}@keyframes kfFadePulse{0%,to{opacity:1}50%{opacity:.35}}@media (max-height:520px){.kf-game{--kf-reserve:190px}.kf-hud{padding:.15rem .4rem}.kf-level{padding:.15rem .6rem;font-size:.85rem}.kf-main{gap:.75rem;padding:0}.kf-ask-text{font-size:1rem}.kf-ask-letter{font-size:1.6rem}.kf-hear{width:36px;height:36px;font-size:1rem}}@media (max-width:480px){.kf-hud{padding:.25rem .1rem}.kf-level{gap:.35rem;padding:.25rem .6rem;font-size:.85rem}.kf-dots{gap:2px}.kf-dot{width:7px;height:7px}}html[data-theme=light] .kf-game{color:var(--text-1)}@media (prefers-reduced-motion:reduce){.kf-critter{transition:none}.kf-bug-land{animation:.36s ease-out kfFadeIn}.kf-bug-spin,.kf-bug-nudge{animation:.5s ease-in-out kfFadePulse}.kf-key.kf-key-target{animation:none}.kf-key.kf-key-target:after{animation:2.2s ease-in-out infinite alternate kfGlow}.kf-key.kf-key-found{animation:none}.kf-key.kf-key-found:before{animation:.6s ease-out kfFadeOut}.kf-ask-letter{animation:.3s ease-out kfFadeIn}.kf-level-new{animation:.4s ease-out kfFadeIn}}