:root{--ink: #2a2150;--cream: #fffaf0;--sun: #ffd84d;--leaf: #5fd36a;--pond: #38b6d8;--deep: #1f5f8a;--sky: #d8f6ff;--font: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--font);color:var(--ink);background:linear-gradient(#9fe0ff 0,#d8f6ff 320px,#bfeedd);min-height:100vh}a{color:inherit}button{font:inherit}:focus-visible{outline:4px solid #ff8a00;outline-offset:3px}.home{max-width:1100px;margin:0 auto;padding:14px 20px 40px}.brand{display:flex;align-items:center;gap:12px}.brand .froggy{width:64px;flex:none}.brand-text{display:flex;flex-direction:column}.brand-name{font-size:34px;font-weight:800;color:#1f8a3e;line-height:1}.tagline{font-size:17px;font-weight:800;color:var(--deep)}.brand .fs-btn{margin-left:auto}.hero{display:flex;align-items:center;gap:26px;margin:14px 0 4px;padding:18px 22px;background:var(--cream);border:4px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--ink)}.hero-art{flex:none;width:240px}.hero-art svg{display:block;width:100%;height:auto}.hero-froggy{animation:bob 3s ease-in-out infinite}.hero-fly{animation:bob 2.2s ease-in-out infinite reverse}.hero h1{margin:0;font-size:clamp(34px,5vw,50px);color:#1f8a3e;line-height:1.05}.hero-sub{margin:8px 0 12px;font-size:20px;line-height:1.35;max-width:560px}.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.hero-actions .go{margin:0;font-size:22px;padding:12px 28px;background:var(--leaf)}.nudge{font-weight:800;font-size:17px;color:var(--deep)}.hero-small{margin:10px 0 0;font-size:15px;opacity:.8}.needs-kb{background:#fff3c4;border:3px solid var(--sun);border-radius:18px;padding:12px 16px;font-size:18px;font-weight:700}.chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 14px;scroll-margin-top:12px}.chips-label{font-weight:800;font-size:18px}.chip{font-weight:800;font-size:18px;padding:10px 20px;border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}.chip[aria-pressed=true]{background:var(--ink);color:#fff}.chip:hover{transform:translateY(-2px)}.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}.card{display:flex;flex-direction:column;height:100%;text-decoration:none;background:var(--cream);border:4px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 6px 0 var(--ink);transition:transform .12s,box-shadow .12s}.card:hover,.card:focus-visible{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 12px 0 var(--ink)}.card-art{position:relative;overflow:hidden;border-bottom:4px solid var(--ink)}.card-art svg{display:block;width:100%;height:auto;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}.card-art:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translate(-100%);transition:transform .5s ease}.card:hover .card-art svg,.card:focus-visible .card-art svg{transform:scale(1.08) rotate(-1deg)}.card:hover .card-art:after,.card:focus-visible .card-art:after{transform:translate(100%)}.card:focus-visible{outline:4px solid #ff8a00;outline-offset:4px}.card:hover .play,.card:focus-visible .play{background:#ffd84d}.card-body{padding:12px 16px 4px;flex:1}.card h3{margin:0 0 4px;font-size:26px}.nobr{white-space:nowrap}.blurb{margin:0 0 10px;font-size:16px;line-height:1.35}.badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}.badge{font-weight:800;font-size:14px;padding:4px 10px;border-radius:999px}.badge.age{background:#ffe08a}.badge.time{background:#bdf0c9}.badge.diff-easy{background:#c3f5a6}.badge.diff-medium{background:#a6d8ff}.badge.diff-challenge{background:#f0b8ff}.start-here{display:flex;align-items:center;gap:18px;margin:0 0 22px;padding:14px 18px;text-decoration:none;color:inherit;background:#fff6c2;border:4px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--ink);transition:transform .12s,box-shadow .12s}.start-here:hover,.start-here:focus-visible{transform:translateY(-4px);box-shadow:0 10px 0 var(--ink)}.start-here:focus-visible{outline:4px solid #ff8a00;outline-offset:4px}.start-art{flex:none;width:150px;border:3px solid var(--ink);border-radius:16px;overflow:hidden}.start-art svg{display:block;width:100%;height:auto}.start-copy{display:flex;flex-direction:column;gap:4px;flex:1}.start-tag{align-self:flex-start;background:#ff9a00;color:#fff;font-weight:900;font-size:15px;padding:3px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}.start-title{font-weight:900;font-size:26px}.start-sub{font-size:17px}.start-here .play{flex:none;border:3px solid var(--ink);border-radius:999px;padding:10px 28px}.start-here:hover .play,.start-here:focus-visible .play{background:#ffd84d}.path{display:flex;flex-direction:column;gap:48px}.step-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 24px}.step-num{background:var(--ink);color:#fff6d8;font-weight:900;font-size:16px;padding:4px 12px;border-radius:999px}.step-head h2{margin:0;font-size:28px}.step-head p{margin:0;font-size:17px;opacity:.85}.skills{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}.skills span{font-size:13px;font-weight:700;padding:3px 8px;border-radius:8px;background:#e4f4ff}.mine{margin:0 0 6px;font-weight:800;font-size:15px}.stars{color:#f0a500;letter-spacing:2px}.play{display:block;text-align:center;font-weight:800;font-size:20px;padding:10px;background:var(--leaf);border-top:4px solid var(--ink)}.foot{margin-top:28px;text-align:center;font-size:15px;opacity:.8}.player{width:min(100%,calc((100vh - 360px) * 960 / 540),1100px);min-width:320px;margin:0 auto;padding:10px;display:flex;flex-direction:column;gap:8px}.pbar{display:flex;align-items:center;gap:8px}.pbar h1{margin:0 auto 0 6px;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}.pbar .btn{white-space:nowrap;flex:none}.pbar [data-act=pause]{min-width:104px}.pbar .timer{flex:none;width:88px}.icon-btn{width:44px;height:44px;padding:0;display:inline-grid;place-items:center}.icon-btn svg{display:block}.btn{display:inline-block;text-decoration:none;font-weight:800;font-size:16px;padding:8px 16px;border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}.btn:disabled{opacity:.4;cursor:default}.timer{position:relative;width:120px;height:34px;border-radius:999px;border:3px solid var(--ink);background:#fff;overflow:hidden}.timer-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:#9be8a8;transform-origin:left}.timer-text{position:relative;display:block;text-align:center;line-height:28px;font-weight:800}.stage{position:relative}.stage canvas{display:block;width:100%;aspect-ratio:960 / 540;border-radius:22px;border:4px solid var(--ink);background:#2b2160;touch-action:manipulation}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#14103259;border-radius:22px;padding:12px}.overlay[hidden]{display:none}.card-panel{background:var(--cream);border:5px solid var(--ink);border-radius:26px;padding:18px 26px;max-width:520px;width:100%;text-align:center;box-shadow:0 8px 0 var(--ink);max-height:100%;overflow:auto;animation:pop .25s ease-out}.card-panel h2{margin:2px 0 8px;font-size:34px}.card-panel p{margin:6px 0;font-size:17px}.card-panel .badges,.card-panel .skills{justify-content:center}.intro-froggy svg{width:84px}.howto{text-align:left;margin:8px auto;padding-left:22px;font-size:17px;line-height:1.45;max-width:400px}.best{font-weight:800}.small{font-size:14px!important;opacity:.8}.go{font-weight:800;font-size:20px;padding:12px 24px;border-radius:999px;border:3px solid var(--ink);background:var(--sun);color:var(--ink);cursor:pointer;margin-top:8px}.row{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}.stars-big{font-size:52px;margin:0!important}.star{color:#d9d3f0;display:inline-block}.star.on{color:#f0a500;animation:pop .4s ease-out both}.cheer{font-weight:800;font-size:22px!important;color:#1f8a3e}.stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0}.stats div{background:#e4f4ff;border-radius:14px;padding:6px 12px}.stats dt{font-size:13px;font-weight:700}.stats dd{margin:0;font-size:22px;font-weight:800}.tech-title{margin:8px 0 0!important;font-weight:800;color:#1f8a3e}.stats.tech div{background:#e8fbe0}.card-panel.intro{display:flex;flex-direction:column;padding:12px 22px 14px;max-width:500px;overflow:hidden}.intro-body{flex:0 1 auto;min-height:0;overflow:auto}.intro-head{display:flex;align-items:center;justify-content:center;gap:10px}.intro-head .intro-froggy svg{width:48px;display:block}.card-panel.intro h2{margin:0;font-size:28px}.card-panel.intro .badges{margin:6px 0 4px}.intro .lead{font-weight:800;font-size:18px;line-height:1.3;margin:6px 0 2px}.intro .howto{margin:4px auto 0;font-size:16px;line-height:1.35}.intro .best{margin:4px 0 0;font-size:15px}.intro-foot{flex:none;padding-top:8px}.intro .go{margin-top:0;padding:9px 24px;font-size:19px}.touch-input{position:fixed;opacity:0;left:-100px;top:0;width:1px;height:1px}.guide{container-type:inline-size;--k: clamp(24px, 4.3cqw, 42px);background:#1b1446;border-radius:22px;padding:8px 10px 10px;overflow:hidden;display:flex;flex-direction:column;gap:4px;-webkit-user-select:none;user-select:none}.guide-top{display:flex;align-items:center;justify-content:center;gap:12px;min-height:34px}.guide-body{display:flex;align-items:flex-end;justify-content:center;gap:6px}.kb{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 1 auto}.kb-row{display:flex;gap:5px}.kb-row-1{margin-left:calc(var(--k) * .52)}.kb-row-2{margin-left:calc(var(--k) * .86)}.kb-row-3{margin-left:0}.key{min-width:var(--k);height:calc(var(--k) * .95);padding:0 calc(var(--k) * .14);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--k) * .45);color:#1b1446;border-bottom:4px solid rgba(0,0,0,.25);position:relative}.key-space{width:calc(var(--k) * 6.6)}.key-shift{min-width:calc(var(--k) * 1.5);font-size:calc(var(--k) * .33)}.key-bump{padding-bottom:calc(var(--k) * .2)}.key-bump:after{content:"";position:absolute;bottom:calc(var(--k) * .1);width:calc(var(--k) * .34);height:calc(var(--k) * .09);min-height:3px;border-radius:99px;background:#1b1446;box-shadow:0 -1px #ffffffb3}.f-L-pinky{background:#ffb3c7}.f-L-ring{background:#ffd59e}.f-L-middle{background:#fff09e}.f-L-index{background:#c3f5a6}.f-R-index{background:#a6f0e0}.f-R-middle{background:#a6d8ff}.f-R-ring{background:#c9b8ff}.f-R-pinky{background:#f0b8ff}.f-thumb{background:#e6e6f0}.key-next{outline:5px solid #fff;transform:translateY(-4px) scale(1.18);box-shadow:0 0 22px #fff6a0;z-index:1;animation:glow 1s ease-in-out infinite}.key-press{animation:press .2s ease-out}.key-wrong{animation:wrong .5s ease-out}.kb-hint{margin:0;color:#fff6d8;font-weight:800;font-size:21px;text-align:center;line-height:1.2;text-wrap:balance}.kb-hint-oops{color:#ffb3c7}.clean-run{flex:none;background:#2f2766;color:#c3f5a6;font-weight:800;font-size:15px;padding:4px 12px;border-radius:999px}.clean-run[hidden]{display:none}.clean-run-cheer{animation:pop .4s ease-out;background:#ffd84d;color:#1b1446}.hand{width:clamp(60px,15cqw,150px);min-width:0;height:auto;flex:0 1 auto;overflow:visible}.hand .palm{fill:#ffe2c6;stroke:#1b1446;stroke-width:5}.hand .palm-shine{fill:#ffffff8c}.hand .palm-line{fill:none;stroke:#e9b994;stroke-width:4;stroke-linecap:round}.hand .finger-body{stroke:#1b1446;stroke-width:5}.hand .shine{fill:#fff9}.hand .finger-key{font:900 30px ui-rounded,Nunito,system-ui,sans-serif;fill:#1b1446}.hand .bump{fill:#1b1446}.hand .finger-tip{font:900 36px ui-rounded,Nunito,system-ui,sans-serif;fill:#fff6a0;stroke:#1b1446;stroke-width:6;paint-order:stroke}.hand .finger{transition:transform .15s ease-out,opacity .15s,filter .15s;transform-box:fill-box;transform-origin:50% 100%}.hand.has-next .finger:not(.finger-next):not(.finger-shift):not(.finger-thumb){opacity:.82}.hand .finger-next{transform:translateY(-10px);filter:drop-shadow(0 0 8px #fff6a0) drop-shadow(0 0 3px #fff6a0)}.hand .finger-next .finger-body{stroke:#fff;stroke-width:6}.hand .finger-shift .finger-body{stroke:#fff;stroke-width:5;stroke-dasharray:9 6}@keyframes bob{50%{transform:translateY(-8px) rotate(-2deg)}}@keyframes pop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}@keyframes glow{50%{box-shadow:0 0 4px #fff6a0}}@keyframes press{50%{transform:translateY(2px);filter:brightness(1.2)}}@keyframes wrong{0%,to{background-color:inherit}20%,60%{background:#ff5f7f;transform:translate(-3px)}40%,80%{transform:translate(3px)}}@media (max-width: 700px){.hero,.start-here{flex-direction:column;text-align:center}.start-tag{align-self:center}.hero-actions{justify-content:center}.hero-art{width:180px}.guide{display:none}.pbar h1{font-size:18px}.pbar .timer{width:80px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}.key-next,.hand .finger-next{transform:none}}.fs-btn[hidden]{display:none}:fullscreen .player,:-webkit-full-screen .player{width:min(100%,calc((100vh - 320px) * 960 / 540))}:fullscreen body{background:#9fe0ff}