:root{--screen-t:max(env(safe-area-inset-top,0px), var(--floor-top,0px));--screen-b:max(env(safe-area-inset-bottom,0px), var(--floor-bottom,0px));--screen-l:env(safe-area-inset-left,0px);--screen-r:env(safe-area-inset-right,0px);--safe-t:var(--screen-t);--safe-r:var(--screen-r);--safe-b:var(--screen-b);--safe-l:var(--screen-l);--ink:#f5f3ee;--muted:#a9a6b5;--panel:#23212c;--panel-2:#33303f;--accent:#ffb400;--back:#17110e;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{height:100%;margin:0}body{color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;background:#17151f;font:16px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;border:0}[hidden]{display:none!important}.hub{height:100%;padding:calc(10px + var(--safe-t)) calc(16px + var(--safe-r)) calc(10px + var(--safe-b)) calc(16px + var(--safe-l));background:radial-gradient(circle at 50% 0,#3c2f6b,#17151f 70%);flex-direction:column;justify-content:center;align-items:center;gap:4vh;display:flex}.hub h1{letter-spacing:-.02em;margin:0;font-size:clamp(32px,8vh,56px)}.tiles{flex-wrap:wrap;justify-content:center;gap:clamp(12px,3vw,32px);display:flex}.tile{aspect-ratio:1;background:var(--tile);color:#fff;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:clamp(110px,min(20vw,38vh),200px);font-size:clamp(20px,3vw,28px);font-weight:700;transition:transform 80ms;display:flex;box-shadow:0 8px #00000047}.tile:active{transform:translateY(5px);box-shadow:0 3px #00000047}.tile-emoji{font-size:2.2em;line-height:1}.tile small{opacity:.9;font-size:13px;font-weight:600}.tile.soon{filter:saturate(.55);cursor:default}.hub{position:relative}.hub>.tool{top:calc(10px + var(--safe-t));left:calc(10px + var(--safe-l));position:absolute}.game-hub{padding:calc(10px + var(--safe-t)) calc(16px + var(--safe-r)) calc(10px + var(--safe-b)) calc(76px + var(--safe-l));background:linear-gradient(135deg,#5a2fd6,#2a7bff);gap:0;overflow:hidden}.game-hub .tiles{touch-action:pan-y;-webkit-overflow-scrolling:touch;align-content:flex-start;gap:10px;width:100%;max-height:100%;padding:2px;overflow-y:auto}.game-tile{color:#fff;background:linear-gradient(160deg, var(--tile-light), var(--tile));gap:0;width:clamp(84px,min(16vw,30vh),150px);box-shadow:inset 0 0 0 4px #ffffff8c;container-type:inline-size}.game-tile:active{transform:scale(.94);box-shadow:inset 0 0 0 4px #ffffffe6}.tile-art{text-align:center;font-size:60cqw;line-height:1.12;display:block}.tile-art svg{width:74cqw;display:block}.game-tile>span:last-child{white-space:nowrap;font-size:12.5cqw;font-weight:800}.piano{background:var(--back);touch-action:none;flex-direction:column;display:flex;position:fixed;inset:0}.bar{height:calc(52px + var(--safe-t));padding:var(--safe-t) max(6px, var(--safe-r)) 0 max(6px, var(--safe-l));background:linear-gradient(#34323d,#1d1c24);border-bottom:1px solid #000;flex:none;align-items:center;gap:3px;display:flex;position:relative}.tool{background:#3f3d4a;border-radius:10px;flex:none;width:42px;height:42px;font-size:18px;box-shadow:inset 0 1px #ffffff1f}.tool svg{width:26px;height:26px;margin:auto;display:block}.tool:active{background:#5b5869}.tool.on{background:var(--accent);color:#221a00}.tool.rec{background:#e0263c;animation:1s infinite pulse}@keyframes pulse{50%{opacity:.65}}.maps{flex-direction:column;flex:1 1 0;gap:2px;min-width:40px;height:42px;display:flex}.map{touch-action:none;cursor:grab;border-radius:3px;flex:1 1 0;width:100%;min-height:0}.status{z-index:3;pointer-events:none;background:#0009;border-radius:0 0 6px 6px;padding:0 8px;font-size:13px;position:absolute;top:100%;left:50%;transform:translate(-50%)}.status:empty{display:none}.keywrap{min-height:0;padding:0 var(--safe-r) 0 var(--safe-l);flex-direction:column;flex:1 1 0;gap:6px;display:flex}.keys{touch-action:none;flex:1 1 0;width:100%;min-height:0;display:block}.keywrap.with-pads{flex-direction:row;gap:0}.with-pads .keys{flex:0 0 46%;width:auto;min-width:0}.pads{flex-direction:column;flex:1 1 0;gap:6px;min-width:0;padding:6px;display:flex}.pad-top{color:var(--muted);flex:none;align-items:center;gap:4px;font-size:14px;display:flex}.pad-top .btn{min-height:38px;padding:4px 12px}.pad-top .hint{text-align:center;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:13px;overflow:hidden}.pad-grid{touch-action:none;flex:1;grid-template-columns:repeat(6,1fr);gap:6px;min-height:0;display:grid}.strip{flex-direction:column;gap:2px;min-width:0;min-height:0;display:flex}.chord-bar{background:var(--pad);opacity:.68;color:#16131f;border-radius:5px;flex:1 1 0;justify-content:center;align-items:center;min-height:0;font-size:12px;font-weight:700;display:flex}.chord-bar.on{opacity:1;filter:brightness(1.3)}.pad{background:var(--pad);color:#16131f;touch-action:none;border-radius:10px;flex-direction:column;flex:none;justify-content:center;align-items:center;min-width:0;min-height:44px;display:flex;box-shadow:0 4px #00000059}.pad b{font-size:clamp(20px,5.5vh,34px);line-height:1.1}.pad.on{filter:brightness(1.2);transform:translateY(3px);box-shadow:0 1px #00000059}.spacer{flex:0 0 0}.stage{background:#12111a;flex:1 1 0;min-height:0;position:relative}.fall{top:0;left:var(--safe-l);width:calc(100% - var(--safe-l) - var(--safe-r));height:100%;position:absolute}.hud{top:0;left:var(--safe-l);right:var(--safe-r);background:#12111ad1;align-items:center;gap:6px;padding:4px 8px;display:flex;position:absolute}.hud.game{background:linear-gradient(#0a0820d9,#0a082000)}.game-score{color:#ffe066;font-variant-numeric:tabular-nums;font-size:24px;font-weight:800}.game-mult{color:#7dffb2;font-size:15px;font-weight:800}.game-hearts{letter-spacing:1px;font-size:16px}.result-score{color:#ffe066;text-align:center;font-size:42px;font-weight:800}.hud-title{white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.progress{background:#ffffff26;border-radius:3px;flex:1;min-width:40px;height:6px;overflow:hidden}.progress i{background:#37d67a;width:0;height:100%;display:block}.btn{background:var(--panel-2);border-radius:10px;min-height:44px;padding:8px 14px;font-weight:600}.btn:active{filter:brightness(1.3)}.btn.on{background:var(--accent);color:#221a00}.scrim{z-index:5;background:#00000073;justify-content:flex-end;display:flex;position:absolute;inset:0}.panel{background:var(--panel);touch-action:pan-y;flex-direction:column;width:min(440px,100%);height:100%;display:flex}.panel-head{padding:calc(6px + var(--safe-t)) calc(14px + var(--safe-r)) 6px 14px;flex:none;justify-content:space-between;align-items:center;display:flex}.panel-head h2{margin:0;font-size:20px}.panel-body{padding:4px calc(14px + var(--safe-r)) calc(20px + var(--safe-b)) 14px;flex-direction:column;flex:1;gap:12px;display:flex;overflow-y:auto}.panel-body p{margin:0}.field{flex-direction:column;gap:6px;display:flex}.field>span,.label{color:var(--muted);font-size:14px}.field b{color:var(--ink)}input[type=range]{width:100%;height:32px;accent-color:var(--accent)}.segments,.choice-grid,.swatches{flex-wrap:wrap;gap:6px;display:flex}.segments .btn{flex:auto}.choice-grid .btn{text-align:left;flex:45%}.swatch{border-radius:50%;width:44px;height:44px;box-shadow:inset 0 0 0 2px #ffffff4d}.song-list{flex-direction:column;gap:6px;display:flex}.song-list .btn{text-align:left}.song-row{gap:6px;display:flex}.song-row .btn:first-child{flex:1;min-width:0}.rec-row{align-items:center;gap:6px;display:flex}.rec-row span{flex:1;min-width:0}.stars{text-align:center;font-size:40px}.small{color:var(--muted);font-size:12px}.toast{z-index:6;background:#000c;border-radius:10px;padding:8px 14px;position:absolute;top:60px;left:50%;transform:translate(-50%)}@media (orientation:portrait) and (width<=600px){:root{--safe-t:var(--screen-r);--safe-r:var(--screen-b);--safe-b:var(--screen-l);--safe-l:var(--screen-t)}.piano,.hub{transform-origin:0 0;width:100dvh;height:100vw;position:fixed;inset:0 auto auto 100vw;transform:rotate(90deg)}.tile{width:clamp(110px,min(20vh,38vw),200px)}.game-tile{width:clamp(84px,min(16vh,30vw),150px)}.hub h1{font-size:clamp(32px,8vw,56px)}.panel-body{touch-action:auto}}@media (width<=760px){.tool{width:36px;height:38px;font-size:16px}.bar{gap:2px}}.bar .tool{flex:0 auto;min-width:26px}.bar .tool[aria-label=Home]{flex:none;min-width:38px;padding:0}.bar .btn{flex-shrink:1;min-width:0;overflow:hidden}.drums{--shell:#b3172c;--accent-ring:#ff4560;background:radial-gradient(at 50% 18%,#4a3122,#1d120c 62%,#0d0806)}.drums[data-kit=electronic]{--shell:#5a2bd6;--accent-ring:#27e0ff;background:radial-gradient(at 50% 18%,#2a1a66,#0d0a24 62%,#05040f)}.drums .bar-gap{flex:1}.drums .beat-name{white-space:nowrap;text-overflow:ellipsis;min-width:0;min-height:42px;padding:4px 12px;overflow:hidden}.bpm{text-align:center;font-variant-numeric:tabular-nums;flex:none;width:36px;font-weight:700}.kit{min-height:0;width:calc(100% - var(--safe-l) - var(--safe-r));margin-left:var(--safe-l);touch-action:none;flex:1 1 0;display:block}.piece{cursor:pointer}.piece .stand{pointer-events:none}.shell{fill:var(--shell)}.skin{transform-box:fill-box;transform-origin:50%}.stamp,.drum-label,.cymbal-label,.kick-label,.kick-logo{pointer-events:none}.drum-label,.cymbal-label,.kick-label,.kick-logo{text-anchor:middle;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.drum-label{letter-spacing:.14em;fill:#4032229e;font-size:17px;font-weight:800}.cymbal-label{letter-spacing:.16em;fill:#422604d1;font-size:12px;font-weight:800}.stamp-edge{fill:#fffae899}.kick-label{letter-spacing:.3em;fill:#ffffff9e;font-size:15px;font-weight:700}.kick-logo{letter-spacing:-.01em;fill:var(--accent-ring);font-size:36px;font-style:italic;font-weight:800}.kick-rule{fill:var(--accent-ring);opacity:.55}.kick-ring{stroke:var(--accent-ring);opacity:.7}.hit-a .skin{animation:.16s ease-out strike-a}.hit-b .skin{animation:.16s ease-out strike-b}.cymbal.hit-a .skin{animation:.42s ease-out wobble-a}.cymbal.hit-b .skin{animation:.42s ease-out wobble-b}@keyframes strike-a{30%{filter:brightness(1.22);transform:scale(.955)}}@keyframes strike-b{30%{filter:brightness(1.22);transform:scale(.955)}}@keyframes wobble-a{18%{filter:brightness(1.3);transform:rotate(-4deg)}50%{transform:rotate(2.5deg)}76%{transform:rotate(-1deg)}}@keyframes wobble-b{18%{filter:brightness(1.3);transform:rotate(-4deg)}50%{transform:rotate(2.5deg)}76%{transform:rotate(-1deg)}}.extras{padding:6px calc(8px + var(--safe-r)) 0 calc(8px + var(--safe-l));touch-action:none;flex:none;gap:6px;display:flex}.extra{touch-action:none;background:linear-gradient(#55525f,#33313c);border-radius:9px;flex:1;min-width:0;height:38px;font-size:13px;font-weight:700;box-shadow:inset 0 1px #fff3,0 3px #0006}.extra .skin{display:block}.guitar-stage{min-height:0;padding:0 var(--safe-r) 0 var(--safe-l);flex:1 1 0;display:flex}.guitar-pads{touch-action:none;background:#17100c;flex:0 0 29%;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:6px;min-width:0;padding:6px;display:grid}.guitar-pad{touch-action:none;color:#ffe9c6;background:linear-gradient(#5b3a22,#3a2214);border-radius:10px;min-width:0;font-size:clamp(17px,5vh,26px);font-weight:800;box-shadow:inset 0 1px #fff3,0 3px #00000080}.guitar-pad.on{color:#2b1705;background:linear-gradient(#ffc75a,#f28a1e)}.guitar-pad:active{transform:translateY(2px);box-shadow:inset 0 1px #fff3,0 1px #00000080}.neck{touch-action:none;flex:1 1 0;min-width:0;height:100%;display:block}.guitar .bar-gap{flex:1}.guitar .beat-name,.guitar .rhythm-name{white-space:nowrap;text-overflow:ellipsis;flex:0 auto;min-width:0;min-height:42px;padding:4px 10px;overflow:hidden}.slots{grid-template-columns:repeat(8,1fr);gap:4px;display:grid}.slots .btn{min-width:0;padding:8px 0;font-size:18px}.little-game{color:#17324d;background:linear-gradient(#7cc8ff,#d9f2ff 62%,#bdf0b0)}.little-game.memory{background:linear-gradient(#8ed8ff,#d7f4ff 58%,#a5e887 58%,#6cc95c)}.little-game.shapes{background:linear-gradient(#d8f5d0,#fff3c4)}.little-game.copy{background:radial-gradient(at 50% 112%,#a6339f,#0000 60%),repeating-linear-gradient(90deg,#5a1228 0 34px,#72182f 34px 68px)}.race-road,.fruit-board{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.race-score{color:#fff;text-shadow:0 2px 3px #00000080}.car-picker{z-index:3;top:calc(66px + var(--safe-t));left:calc(12px + var(--safe-l));flex-direction:column;gap:4px;display:flex;position:absolute}.car-swatch{touch-action:none;background:radial-gradient(circle at 35% 30%, var(--shine), var(--paint) 62%);border-radius:50%;width:36px;height:36px;padding:0;box-shadow:inset 0 0 0 2px #ffffffb3,0 2px 3px #0000004d}.car-swatch.on{box-shadow:0 0 0 3px #fff,0 0 0 5px #00000059}.game-stage{touch-action:none;position:absolute;inset:0;overflow:hidden}.game-back{top:calc(8px + var(--safe-t));left:calc(8px + var(--safe-l));z-index:4;width:52px;height:52px;font-size:24px;position:absolute}.game-score-big{top:calc(12px + var(--safe-t));right:calc(18px + var(--safe-r));z-index:3;pointer-events:none;font-size:30px;font-weight:800;position:absolute}.confetti{z-index:5;pointer-events:none;animation:1.6s ease-in forwards confetti;position:absolute;top:-40px}@keyframes confetti{to{transform:translateY(100vmax)rotate(300deg)}}.balloon{touch-action:none;will-change:transform;transform-origin:50% 60%;background:0 0;padding:0;position:absolute;top:0;left:0}.balloon-art{pointer-events:none;width:100%;display:block;overflow:visible}.balloon-defs{position:absolute}.pop-flash{pointer-events:none;background:radial-gradient(circle,#fffffff2,#ffffff59 42%,#fff0 68%);border-radius:50%;animation:.16s ease-out forwards pop-flash;position:absolute;translate:-50% -50%}@keyframes pop-flash{0%{scale:.45}to{opacity:0;scale:1.1}}.scrap{pointer-events:none;animation-name:scrap;animation-timing-function:cubic-bezier(.12,.75,.35,1);animation-fill-mode:forwards;position:absolute;box-shadow:inset 0 0 3px #ffffff80}@keyframes scrap{62%{opacity:1}to{transform:translate(var(--dx), calc(var(--dy) + var(--fall))) rotate(var(--spin));opacity:0}}.memory-grid{inset:calc(14px + var(--safe-t)) calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(76px + var(--safe-l));grid-template-columns:repeat(var(--columns), 1fr);grid-auto-rows:1fr;gap:12px;display:grid;position:absolute}.card{perspective:800px;touch-action:none;background:0 0;min-width:0;min-height:0;padding:0}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .36s cubic-bezier(.3,1.4,.5,1);display:block;position:relative}.card.up .card-inner{transform:rotateY(180deg)}.card:active .card-inner{scale:.96}.card-back,.card-front{backface-visibility:hidden;border-radius:20px;justify-content:center;align-items:center;line-height:1;display:flex;position:absolute;inset:0;box-shadow:0 6px #0003,0 10px 18px #00000024}.card-back{background:repeating-linear-gradient(45deg,#2f9ae0 0 16px,#4dabf7 16px 32px);border:6px solid #fff}.card-front{background:radial-gradient(circle at 50% 40%, #fff 20%, var(--tint));border:6px solid #fff;transform:rotateY(180deg)}.card.done .card-inner{animation:.55s card-happy;transform:rotateY(180deg)}.card.done .card-front{border-color:#ffd43b;box-shadow:0 0 0 4px #fff,0 0 26px #ffd43b}@keyframes card-happy{40%{translate:0 -14px}}.little-game.shapes .game-stage{padding:calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) calc(10px + var(--safe-b)) calc(72px + var(--safe-l));justify-content:center;align-items:center;gap:3vmin;display:flex}.shape{width:100%;line-height:0;display:block}.shape-target{background:#ffffff8c;border:5px dashed #00000040;border-radius:22px;flex:0 0 28%;padding:14px}.shape-arrow{font-size:34px}.shape-options{flex:1;gap:12px;min-width:0;display:flex}.shape-option{touch-action:none;background:#fff;border-radius:20px;flex:1;min-width:0;padding:12px;box-shadow:0 5px #00000024}.shape-option.right{background:#c9f7d3;transition:scale .15s;scale:1.08}.shape-option.wiggle{animation:.3s wiggle}@keyframes wiggle{25%{rotate:-6deg}75%{rotate:6deg}}.copy-grid{padding:0 calc(12px + var(--safe-r)) var(--safe-b) calc(72px + var(--safe-l));grid-template-columns:repeat(4,1fr);display:grid;position:absolute;inset:0}.copy-pad{touch-action:none;background:0 0;justify-content:center;align-items:flex-end;min-width:0;padding-bottom:12%;font-size:clamp(64px,24vmin,112px);line-height:1;display:flex;position:relative}.copy-pad:before{content:"";opacity:0;pointer-events:none;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);background:linear-gradient(#fff4bed1,#fff4be1f);transition:opacity .12s;position:absolute;inset:0 -8%}.copy-pad:after{content:"";background:radial-gradient(circle at 50% 35%, #fff, var(--color) 60%);width:72%;height:8%;box-shadow:0 8px 0 #00000047, 0 0 18px var(--color);border-radius:50%;position:absolute;bottom:7%;left:50%;translate:-50%}.copy-face{z-index:1;transition:translate .12s;display:block;position:relative}.copy-pad.lit:before{opacity:1}.copy-pad.lit .copy-face{translate:0 -26%;scale:1.14}.copy-status{left:50%;top:calc(10px + var(--safe-t));pointer-events:none;background:#ffffff24;border-radius:22px;padding:2px 20px;font-size:30px;position:absolute;translate:-50%}.air-guns{z-index:3;bottom:calc(10px + var(--safe-b));left:calc(14px + var(--safe-l));letter-spacing:2px;color:#fff;pointer-events:none;font-size:22px;position:absolute}.air-boss{z-index:3;top:calc(16px + var(--safe-t));pointer-events:none;background:#00000080;border-radius:10px;width:40%;height:16px;padding:3px;position:absolute;left:50%;translate:-50%}.air-boss i{background:linear-gradient(#ff8a6b,#e8222e);border-radius:7px;width:100%;height:100%;display:block}.install-slot{top:calc(10px + var(--safe-t));right:calc(12px + var(--safe-r));position:absolute}.install-slot .btn{color:#3a2a8c;background:#fff;font-weight:800}.install-guide{z-index:8;padding:calc(18px + var(--safe-t)) calc(24px + var(--safe-r)) calc(18px + var(--safe-b)) calc(24px + var(--safe-l));touch-action:pan-y;color:#fff;-webkit-user-select:text;user-select:text;background:#221b52;flex-direction:column;justify-content:center;gap:8px;display:flex;position:absolute;inset:0;overflow-y:auto}.install-guide h2{margin:0;font-size:22px}.install-guide ol{margin:0;padding-left:22px;font-size:17px;line-height:1.5}.install-guide p{color:#cfc8ff;margin:0}.install-guide .btn{color:#221a00;background:#ffb400;align-self:flex-start}