:root{--sea:#2f7f86;--sea-deep:#1d5a63;--sand:#f3e3c3;--coral:#e9775f;--moss:#7fa65a;--ink:#2b2a33;--paper:#fffaf0;--stage-x:0px;--stage-y:0px;--stage-w:1280px;--stage-h:720px;--ui-scale:1}*{box-sizing:border-box}html,body{background:var(--sea-deep);height:100%;color:var(--ink);margin:0;overflow:hidden}body{-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,sans-serif}#app{position:fixed;inset:0}#stage{position:absolute;inset:0}#stage canvas{display:block}#overlay{left:var(--stage-x);top:var(--stage-y);width:1280px;height:720px;transform:scale(var(--ui-scale));transform-origin:0 0;pointer-events:none;position:absolute}#overlay>*{pointer-events:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}:root{--gold:#f2c14e;--focus:#1d5a63;--shadow:#2b2a332e;--font-game:"Isles Sans", system-ui, -apple-system, "Segoe UI", sans-serif}#overlay>.ov-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.ov-item{will-change:transform;transition:opacity .18s ease-out;position:absolute;top:0;left:0}.tl{font:800 48px/1 var(--font-game);color:var(--ink);align-items:baseline;gap:6px;display:inline-flex}.tl-ch{text-align:center;min-width:.6em;transition:opacity .16s ease-out,transform .16s ease-out;display:inline-block;position:relative}.tl-ch.is-done{opacity:.3;transform:scale(.85)}.tl-ch.is-upcoming{opacity:.75}.tl-ch.is-space{min-width:1.2em}.tl-caret{background:var(--ink);border-radius:.05em;height:.1em;animation:1.2s ease-in-out infinite tl-caret;position:absolute;bottom:-.18em;left:12%;right:12%}@keyframes tl-caret{0%,to{opacity:1}50%{opacity:.25}}.tl-ch.is-nudge{animation:.36s ease-out tl-nudge}@keyframes tl-nudge{0%,to{transform:translate(0)}25%{transform:translate(-6px)rotate(-4deg)}60%{transform:translate(5px)rotate(3deg)}}.snack-label{border:5px solid var(--ink);background:var(--paper);box-shadow:0 6px 0 var(--shadow);border-radius:28px;align-items:center;gap:14px;padding:6px 22px 12px;display:flex}.snack-lane.tl{font-size:92px}.snack-pic{font-size:72px;line-height:1}.kv svg{display:block;overflow:visible}.kv-cap{fill:var(--paper);stroke:var(--ink);stroke-width:3px}.kv-label{font:700 24px/1 var(--font-game);fill:var(--ink);text-anchor:middle;dominant-baseline:central}.kv-zone{fill:var(--zone);stroke:var(--ink);stroke-width:1.2px}.kv-bump{fill:var(--ink)}.kv-halo{fill:var(--zone);opacity:0}.kv-key.is-dim{opacity:.4}.kv-key.is-target .kv-cap{stroke:var(--zone);stroke-width:5px}.kv-key.is-target .kv-halo{opacity:.6}.kv-key.is-hint .kv-cap{stroke:var(--zone);stroke-width:7px}.kv-key.is-glow .kv-cap{stroke:var(--ink);stroke-width:4px}.kv-key.is-glow .kv-halo{animation:1.4s ease-in-out infinite kv-pulse}@keyframes kv-pulse{0%,to{opacity:.35}50%{opacity:.9}}.kv-badge[hidden]{display:none}.kv-badge-shape{fill:var(--zone);stroke:var(--ink);stroke-width:2.5px}.kv-badge-num{font:800 15px/1 var(--font-game);fill:var(--ink);text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--paper);stroke-width:3px}.kv-paw circle{fill:var(--ink)}.fg svg{display:block;overflow:visible}.fg-shape{fill:var(--zone);stroke:var(--ink);stroke-width:3px}.fg-num{font:800 24px/1 var(--font-game);fill:var(--ink);text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--paper);stroke-width:4px}.fg-paw circle{fill:var(--ink)}.fg>svg{animation:.22s ease-out fg-in}@keyframes fg-in{0%{opacity:0;transform:translateY(8px)}}#overlay>.rc{border:6px solid var(--ink);background:var(--paper);width:600px;min-height:430px;box-shadow:0 12px 0 var(--shadow);border-radius:36px;outline:none;flex-direction:column;align-items:center;gap:18px;padding:28px 28px 32px;animation:.26s ease-out rc-in;display:flex;position:absolute;top:96px;left:340px}#overlay>.rc[hidden]{display:none}@keyframes rc-in{0%{opacity:0;transform:translateY(24px)scale(.96)}}.rc-stars{gap:18px;display:flex}.rc-star path{fill:var(--paper);stroke:var(--ink);stroke-width:3px;stroke-linejoin:round;opacity:.45}.rc-star.is-on path{fill:var(--gold);opacity:1}.rc-star.is-on{animation:.42s ease-out both rc-pop;animation-delay:calc(.35s + var(--i) * .3s)}@keyframes rc-pop{0%{opacity:0;transform:scale(.3)}70%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.rc-critters{gap:10px;min-height:110px;display:flex}.rc-critters[hidden]{display:none}.rc-critter svg{display:block;overflow:visible}.rc-fur{fill:var(--zone);stroke:var(--ink);stroke-width:4px}.rc-belly{fill:var(--paper)}.rc-eye{fill:var(--ink)}.rc-badge{fill:var(--zone);stroke:var(--ink);stroke-width:2.5px}.rc-letter{font:800 22px/1 var(--font-game);fill:var(--ink);text-anchor:middle;dominant-baseline:central}.rc-shell{fill:var(--paper);stroke:var(--ink);stroke-width:4px;stroke-linejoin:round;transform-box:fill-box}.rc-critter.is-hatch .rc-body{animation:.5s ease-out both rc-hatch-body;animation-delay:calc(1.1s + var(--i) * .25s);transform-box:fill-box;transform-origin:50% 100%}.rc-critter.is-hatch .rc-shell-top{animation:.52s ease-in both rc-shell-top;animation-delay:calc(1s + var(--i) * .25s);transform-origin:50% 100%}.rc-critter.is-hatch .rc-shell-bottom{animation:.52s ease-in both rc-shell-bottom;animation-delay:calc(1s + var(--i) * .25s);transform-origin:50% 0}@keyframes rc-hatch-body{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}@keyframes rc-shell-top{to{opacity:0;transform:translate(-18px,-34px)rotate(-35deg)}}@keyframes rc-shell-bottom{to{opacity:0;transform:translate(14px,26px)rotate(20deg)}}.rc-critter.is-grow{animation:.6s ease-out both rc-grow;animation-delay:calc(1s + var(--i) * .2s)}@keyframes rc-grow{0%{transform:scale(.8)}60%{transform:scale(1.18)}to{transform:scale(1.08)}}.rc-buttons{gap:48px;margin-top:auto;display:flex}.rc-btn{border:6px solid var(--ink);background:var(--sand);width:150px;height:150px;box-shadow:0 8px 0 var(--shadow);cursor:pointer;border-radius:50%;place-items:center;transition:transform .12s ease-out;display:grid}.rc-again{background:#ffd9a8}.rc-next{background:#c9ecd9}.rc-btn:hover{transform:translateY(-3px)scale(1.04)}.rc-btn:active{transform:translateY(3px)}.rc-btn:focus{outline:none}.rc-btn:focus-visible{box-shadow:0 0 0 8px var(--paper), 0 0 0 16px var(--focus)}.rc-icon{fill:none;stroke:var(--ink);stroke-width:9px;stroke-linecap:round;stroke-linejoin:round}.lab-hud{z-index:10;max-width:340px;color:var(--ink);white-space:pre-wrap;pointer-events:none;background:#fffaf0eb;border-radius:8px;padding:8px 10px;font:12px/1.35 ui-monospace,SF Mono,Menlo,Consolas,monospace;position:fixed;top:8px;right:8px}@media (prefers-reduced-motion:reduce){.tl-caret,.kv-key.is-glow .kv-halo{opacity:1;animation:none}.kv-key.is-glow .kv-halo{opacity:.6}}.crab-note{border:5px solid var(--ink);background:var(--paper);border-radius:48px;justify-content:center;align-items:center;gap:6px;min-width:96px;height:96px;padding:0 16px;display:flex;box-shadow:0 5px #2b2a332e}.crab-note.is-armed{box-shadow:0 0 0 7px #f2c14e,0 5px #2b2a332e}.crab-note.is-assist{box-shadow:0 0 0 11px #f2c14e,0 5px #2b2a332e}.crab-lane.tl{font-size:64px}.crab-pic{font-size:46px;line-height:1}.cal{border:6px solid var(--ink);background:var(--paper);width:560px;color:var(--ink);border-radius:36px;flex-direction:column;align-items:center;gap:16px;padding:24px 28px 22px;font-family:Isles Sans,system-ui,-apple-system,Segoe UI,sans-serif;display:flex;box-shadow:0 12px #2b2a332e}.cal-stage{align-items:flex-end;gap:22px;font-size:96px;line-height:1;display:flex}.cal-drum{transform-origin:50% 85%;display:inline-block}.cal-drum.is-boom{animation:.24s ease-out cal-boom}@keyframes cal-boom{0%{transform:scale(1.2,.84)}to{transform:scale(1)}}.cal.is-done .cal-crab:after{content:"👍";font-size:64px}.cal-dots{gap:14px;display:flex}.cal-dot{border:3px solid var(--ink);background:var(--paper);opacity:.45;border-radius:50%;width:24px;height:24px}.cal-dot.is-on{opacity:1;background:#f2c14e}.cal-space{border:5px solid var(--ink);background:var(--sand);border-radius:14px;width:320px;height:56px;box-shadow:0 6px #2b2a332e}.cal-space.is-tap{animation:.2s ease-out cal-tap}@keyframes cal-tap{0%{transform:translateY(6px)}to{transform:translateY(0)}}.cal-caption{margin:0;font-size:28px;font-weight:700;line-height:1.2}.remix-lamps{gap:8px;display:flex}.remix-lamp{border:4px solid var(--ink);background:var(--paper);width:30px;height:40px;box-shadow:0 4px 0 var(--shadow);border-radius:12px 12px 15px 15px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.remix-lamp-fill{background:var(--gold);transform-origin:50% 100%;transform:scaleY(var(--fill,0));transition:transform .24s ease-out;position:absolute;inset:0}.remix-lamp-pic{font-size:17px;line-height:1;position:relative}.remix-lamp.is-current{animation:1.6s ease-in-out infinite remix-sway}.remix-lamps.is-still .remix-lamp{animation:none}.remix-lamps.is-still .remix-lamp-fill{transition:none}@keyframes remix-sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.remix-card{background:repeating-linear-gradient(135deg, var(--sand) 0 64px, #bfe6e3 64px 128px);flex-direction:column;justify-content:center;align-items:center;gap:22px;width:1280px;height:720px;display:flex}.remix-card-pic{font-size:168px;line-height:1}.remix-card-name{border:5px solid var(--ink);background:var(--paper);box-shadow:0 6px 0 var(--shadow);font:800 64px/1 var(--font-game);color:var(--ink);border-radius:30px;padding:8px 36px 14px}.remix-card-name:empty{display:none}.remix-card .remix-lamps{gap:16px}.remix-card .remix-lamp{border-radius:20px 20px 24px 24px;width:52px;height:68px}.remix-card .remix-lamp-pic{font-size:30px}.rope-label{border:5px solid var(--ink);background:var(--paper);box-shadow:0 6px 0 var(--shadow);border-radius:26px;align-items:center;gap:16px;padding:4px 24px 12px;display:flex}.rope-lane.tl{gap:4px;font-size:60px}.rope-lane.is-listen.tl{font-size:84px}.rope-pic{font-size:64px;line-height:1}.rope-pic:empty{display:none}.rope-bird{flex-direction:column;align-items:center;display:flex}.rope-bird>*{transition:transform .7s ease-in,opacity .7s ease-in}.rope-bird-pic{font-size:40px;line-height:1}.rope-bird-card{border:4px solid var(--ink);background:var(--paper);box-shadow:0 4px 0 var(--shadow);font:800 44px/1 var(--font-game);color:var(--ink);border-radius:18px;margin-top:2px;padding:2px 14px 6px}.rope-bird.is-landing>*{animation:.6s ease-out both rope-bird-in}@keyframes rope-bird-in{0%{opacity:0;transform:translate(220px,-200px)}}.rope-bird.is-leaving>*{opacity:0;transform:translate(280px,-240px)}