:root{color-scheme:dark;--bg: #090e19;--surface: #111b2d;--surface-2: #16243a;--border: #2b3c55;--text: #f2f5fd;--muted: #91a4bc;--cyan: #79f4e2;--danger: #ff8096;--key-up: #ffc83d;--key-down: #ff57d8;--key-left: #ff4f6d;--key-right: #3fa1ff;--font-display: "Barlow Condensed", system-ui, sans-serif;--font-body: Inter, system-ui, sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px var(--font-body);-webkit-font-smoothing:antialiased}button,select,input{font:inherit}button,select{color:inherit;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px 16px}button{cursor:pointer;touch-action:manipulation}button:hover{border-color:var(--cyan);background:#1b3045}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.primary{background:var(--cyan);color:#071c22;border:0;font-weight:800;min-width:160px;padding:14px 25px}.primary:hover{background:#b3ffef;color:#071c22}.hidden{display:none!important}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;background:#233449;border:1px solid #435369;border-bottom-width:3px;border-radius:5px;font:16px system-ui}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body,.app{position:fixed;inset:0}.arena{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#0b1322;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#game,#labels{position:absolute;inset:0;display:block;width:100%;height:100%}#labels{pointer-events:none}@media (pointer: coarse){.arena{touch-action:none}}.hud{position:absolute;inset:0;pointer-events:none}#feedback{position:absolute;top:26%;left:0;right:0;text-align:center;pointer-events:none;transition:opacity .2s}#feedback img{display:inline-block;width:159px;max-width:30vw;height:auto;filter:drop-shadow(0 3px 6px #0008)}.action-name{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:2px;color:#c8dae9;pointer-events:none}.clock{position:absolute;right:calc(var(--safe-right) + 14px);bottom:calc(var(--safe-bottom) + 10px);font-size:11px;font-variant-numeric:tabular-nums;color:#8da4bf;pointer-events:none}.progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#203047}.progress i{display:block;width:0;height:100%;background:var(--cyan)}@media (pointer: coarse){.action-name,.clock{display:none}#feedback{top:22%}#feedback img{width:clamp(120px,34vmin,200px);max-width:45vw}}.sync-tools{position:absolute;top:calc(var(--safe-top) + 64px);left:50%;z-index:25;display:grid;gap:4px;width:min(300px,calc(100vw - 150px));padding:6px 10px 8px;transform:translate(-50%);border-radius:10px;background:#000b;color:#e6f4ff}.times{margin:0;font:600 11px/1.45 ui-monospace,Consolas,monospace;white-space:pre;pointer-events:none}.sync-slider{display:grid;gap:2px;font-size:11px;font-weight:700}.sync-slider output{margin-left:4px;color:var(--cyan);font-variant-numeric:tabular-nums}.sync-slider__row{display:flex;align-items:center;gap:6px}.sync-step{flex:none;width:26px;height:22px;padding:0;border-radius:6px;font-size:15px;line-height:1}.sync-slider input{flex:1;min-width:0;width:100%;margin:0;accent-color:var(--cyan);touch-action:pan-x}@media (orientation: landscape) and (max-height: 500px){.sync-tools{top:calc(var(--safe-top) + 8px);width:240px;padding:4px 8px 6px}}.overlay{position:absolute;inset:0;z-index:35;display:flex;align-items:center;padding:5% 6%;overflow-y:auto;background:linear-gradient(90deg,#08121af2,#08121adc 45%,#08121a10);touch-action:pan-y}.card{max-width:560px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;color:var(--cyan)}h1{margin:18px 0 20px;font:800 clamp(32px,4vw,59px) / 1 var(--font-display);letter-spacing:-.5px}h2{margin:16px 0;font:800 48px var(--font-display)}p{margin:14px 0;line-height:1.7;color:#b4c5d8}.instructions{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin:24px 0;font-size:12px}.hint{max-width:430px;font-size:12px}.hint--touch{display:none}.startrow{display:flex;gap:12px;margin:24px 0 14px}#loading{font-size:11px;color:var(--muted)}#loading.error{color:var(--danger)}.paused{position:absolute;inset:0;z-index:15;display:grid;place-content:center;justify-items:center;gap:24px;background:#07111bb3;backdrop-filter:blur(3px)}.paused strong{font:700 36px var(--font-display);letter-spacing:8px}.paused__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0 16px}@media (pointer: coarse){.overlay{align-items:safe center;padding:calc(var(--safe-top) + 20px) calc(var(--safe-right) + 24px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 24px);background:#08121ae6}h1{font-size:clamp(30px,8vmin,48px);margin:10px 0 12px}.card p{font-size:13px;margin:8px 0}.instructions--keys,.hint--keys{display:none}.hint--touch{display:block}.startrow{margin:16px 0 10px}}.controls{display:none}.pause-btn{position:absolute;z-index:11;top:calc(var(--safe-top) + 12px);left:calc(var(--safe-left) + 12px);display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;background:#121a28b3;border:1px solid #ffffff26;backdrop-filter:blur(6px)}.pause-btn svg{width:20px;height:20px;fill:#e6eefc}@media (pointer: coarse){.controls{--key: calc(clamp(46px, 11.5vmin, 86px) * var(--control-scale, 1));--diag: calc(var(--key) * 1.4142);--step: calc(var(--diag) * .8);--gap: clamp(8px, 2vmin, 18px);position:absolute;inset:0;z-index:10;display:block;pointer-events:none;opacity:var(--control-opacity, .85);container-type:size}.controls__side{position:absolute;bottom:calc(var(--safe-bottom) + var(--gap));display:flex;flex-direction:column;gap:clamp(10px,4vmin,40px)}.controls__side--left{left:calc(var(--safe-left) + var(--gap));align-items:flex-start}.controls__side--right{right:calc(var(--safe-right) + var(--gap));align-items:flex-end}.pad{position:relative;width:calc(var(--diag) + var(--step));height:calc(var(--diag) + var(--step) * 2);pointer-events:auto;touch-action:none}.pad__key{--color: #fff;--x: 0px;--y: 0px;position:absolute;left:calc(var(--x) + (var(--diag) - var(--key)) / 2);top:calc(var(--y) + (var(--diag) - var(--key)) / 2);width:var(--key);height:var(--key);padding:0;border:1.5px solid #ffffff38;border-radius:14%;background:linear-gradient(135deg,#ffffff2e,#ffffff0a 55%,#00000026),#1a2333a8;box-shadow:inset 0 1px #ffffff30,0 6px 16px #0008;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transform:rotate(45deg);transition:transform 80ms ease-out,background 80ms,box-shadow 80ms,border-color 80ms;pointer-events:none}.pad__key:after{content:"";position:absolute;inset:22%;background:var(--color);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--color) 55%,transparent));mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 12h6v10h6V12h6z'/%3E%3C/svg%3E") center / contain no-repeat;transform:rotate(var(--arrow))}.pad__key--up{--color: var(--key-up);--arrow: -45deg}.pad__key--down{--color: var(--key-down);--arrow: 135deg}.pad__key--left{--color: var(--key-left);--arrow: -135deg}.pad__key--right{--color: var(--key-right);--arrow: 45deg}.pad--left .pad__key--left,.pad--right .pad__key--right{--y: var(--step)}.pad--left .pad__key--left{--x: 0px}.pad--right .pad__key--right,.pad--left .pad__key--up,.pad--left .pad__key--down{--x: var(--step)}.pad__key--down{--y: calc(var(--step) * 2)}.pad__key.is-held{border-color:color-mix(in srgb,var(--color) 80%,white);background:radial-gradient(circle,color-mix(in srgb,var(--color) 45%,transparent),transparent 75%),#1a2333d0;box-shadow:0 0 0 2px color-mix(in srgb,var(--color) 50%,transparent),0 0 24px color-mix(in srgb,var(--color) 70%,transparent);transform:rotate(45deg) scale(.92)}.turbo-btn{--charge: 0%;--size: calc(clamp(52px, 12vmin, 88px) * var(--control-scale, 1));position:relative;display:grid;place-items:center;width:var(--size);height:var(--size);padding:0;border:0;border-radius:50%;color:#fff;background:radial-gradient(circle at 50% 35%,#2b3a52,#121a28 70%) padding-box,conic-gradient(#ffd23f var(--charge),#ffffff1f var(--charge)) border-box;border:4px solid transparent;box-shadow:0 6px 18px #0009;pointer-events:auto;touch-action:none;transition:transform 80ms ease-out}.turbo-btn svg{width:46%;height:46%;fill:currentColor}.turbo-btn span{position:absolute;top:calc(100% + 4px);font:800 clamp(9px,2.2vmin,13px) var(--font-body);letter-spacing:1.5px;color:#dbe6f5;text-shadow:0 1px 3px #000}.turbo-btn:disabled{opacity:.55}.turbo-btn.ready{color:#ffe066;opacity:1;animation:turbo-ready .9s ease-in-out infinite alternate}.turbo-btn.active{color:#1a1200;background:radial-gradient(circle at 50% 35%,#ffe27a,#f59d16 70%) padding-box,conic-gradient(#fff3b0 var(--charge),#ffffff2a var(--charge)) border-box;animation:turbo-boost .35s ease-in-out infinite alternate}.turbo-btn:active{transform:scale(.92)}@keyframes turbo-ready{to{box-shadow:0 0 0 3px #ffd23f55,0 0 26px #ffd23faa}}@keyframes turbo-boost{to{box-shadow:0 0 34px #ffb31f}}@media (orientation: landscape){.controls{--key: calc(clamp(30px, (64dvh - var(--safe-bottom) - 16px) / 3.7, 92px) * var(--control-scale, 1))}.controls__side{flex-direction:row;align-items:flex-end;gap:var(--gap)}.controls__side--left{flex-direction:row-reverse}.turbo-btn{--size: calc(var(--key) * 1.1);margin-bottom:calc(var(--key) * .2 + 16px)}}.grid9,.controls[data-layout=grid] .controls__side{display:none}.controls[data-layout=grid] .grid9{--cell: calc(clamp(54px, 19vw, 96px) * var(--control-scale, 1));position:absolute;bottom:calc(var(--safe-bottom) + var(--gap));display:grid;grid-template-columns:repeat(3,var(--cell));grid-template-rows:repeat(3,var(--cell));gap:calc(var(--cell) * .08);pointer-events:auto;touch-action:none;translate:calc(var(--grid-x, 0) * 1cqw) calc(var(--grid-y, 0) * -1cqh)}.controls[data-position=left] .grid9{left:calc(var(--safe-left) + var(--gap))}.controls[data-position=right] .grid9{right:calc(var(--safe-right) + var(--gap))}.controls[data-position=center] .grid9{left:50%;transform:translate(-50%)}.grid9__key{--color: #e6eefc;--angle: 0deg;display:grid;place-items:center;padding:0;border:1px solid #ffffff2e;border-radius:22%;background:linear-gradient(160deg,#26324a,#121a28);box-shadow:inset 0 1px #ffffff1f,0 4px 12px #0008;pointer-events:none;transition:transform 60ms ease-out,box-shadow 60ms ease-out}.grid9__key svg{width:52%;height:52%;fill:var(--color);transform:rotate(var(--angle));filter:drop-shadow(0 1px 2px #000a)}.grid9__key.is-held{background:linear-gradient(160deg,color-mix(in srgb,var(--color) 45%,#26324a),#121a28);box-shadow:0 0 0 2px color-mix(in srgb,var(--color) 55%,transparent),0 0 22px color-mix(in srgb,var(--color) 65%,transparent);transform:scale(.93)}.grid9__key--up{--color: var(--key-up)}.grid9__key--down{--color: var(--key-down);--angle: 180deg}.grid9__key--left{--color: var(--key-left);--angle: -90deg}.grid9__key--right{--color: var(--key-right);--angle: 90deg}.grid9__key--upleft{--angle: -45deg}.grid9__key--upright{--angle: 45deg}.grid9__key--downleft{--angle: -135deg}.grid9__key--downright{--angle: 135deg}.grid9__turbo.turbo-btn{--size: var(--cell);width:var(--cell);height:var(--cell)}@media (orientation: landscape){.controls[data-layout=grid] .grid9{--cell: calc(clamp(34px, (62dvh - var(--safe-bottom) - 16px) / 3.2, 92px) * var(--control-scale, 1))}}}.menu{position:absolute;inset:0;z-index:30;display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,1fr);gap:12px;padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 18px) calc(var(--safe-bottom) + 14px) calc(var(--safe-left) + 18px);background:radial-gradient(120% 80% at 80% 0%,#17305255 0%,transparent 60%),linear-gradient(180deg,#0a1220,#070d17);overflow:hidden;touch-action:pan-y}.menu__top{display:flex;align-items:center;justify-content:space-between}.menu__brand{font:900 26px var(--font-display);letter-spacing:1.5px}.menu__brand span{color:var(--cyan)}.menu__tools{display:flex;gap:8px}.menu__settings{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px}.menu__settings svg{width:18px;height:18px;fill:currentColor}.menu__categories{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.menu__categories::-webkit-scrollbar{display:none}.tab{--accent: #9fb4cc;flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;border:1px solid #ffffff1c;background:#ffffff0a;font-size:13px;font-weight:700;white-space:nowrap}.tab small{min-width:20px;padding:1px 6px;border-radius:999px;background:#ffffff14;font-size:11px;color:#b9c7d8}.tab__star{width:20px;height:20px}.song-card__level{display:flex;align-items:center;gap:6px}.song-card__level img{flex:none;width:auto;height:18px}.tab__icon{width:18px;height:18px;background:var(--accent);mask:var(--icon) center / contain no-repeat}.tab[aria-selected=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);color:#fff}.tab--novato{--accent: #8ee08a;--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C7 8 5 11 5 14a7 7 0 0 0 14 0c0-3-2-6-7-11z'/%3E%3C/svg%3E")}.tab--novato-estrella,.tab--estrella{--accent: #ffd23f;--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 2.9 6.9 7.1.6-5.4 4.7 1.7 7.3L12 17.8 5.7 21.5l1.7-7.3L2 9.5l7.1-.6z'/%3E%3C/svg%3E")}.tab--novato-lunar,.tab--luna{--accent: #8fc8ff;--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5A9 9 0 0 1 8.5 4a9 9 0 1 0 11.5 11.5z'/%3E%3C/svg%3E")}.tab--novato-solar,.tab--solar{--accent: #ff9a3d;--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M4.2 19.8 7 17M17 7l2.8-2.8' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}.tab--novato-estrella .tab__icon,.tab--novato-lunar .tab__icon,.tab--novato-solar .tab__icon{opacity:.6}.menu__songs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));align-content:start;gap:10px;overflow-y:auto;overscroll-behavior:contain;padding:2px}.song-card{min-width:0;display:flex;align-items:center;gap:12px;padding:8px;text-align:left;border-radius:12px;border:1px solid #ffffff14;background:#ffffff08;transition:border-color .15s,background .15s,transform .1s}.song-card:active{transform:scale(.98)}.song-card__cover{flex:none;width:96px;height:56px;object-fit:cover;border-radius:8px;background:#0f1a2b}.song-card__info{display:grid;gap:2px;min-width:0}.song-card strong{overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}.song-card span,.song-card em{overflow:hidden;font-size:12px;font-style:normal;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}.song-card[aria-selected=true]{border-color:var(--cyan);background:#79f4e214;box-shadow:inset 0 0 0 1px #79f4e255}.menu__empty{grid-column:1 / -1;max-width:460px;color:var(--muted)}.menu__bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid #ffffff14}.menu__selected{display:flex;align-items:center;gap:10px;min-width:0}.menu__selected img{width:64px;height:38px;object-fit:cover;border-radius:6px}.menu__selected div{display:grid;min-width:0}.menu__selected strong,.menu__selected span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu__selected span{font-size:12px;color:var(--muted)}.menu__actions{display:flex;flex:none;gap:10px}.menu__actions .primary{min-width:130px}.menu__progress{position:absolute;left:0;right:0;top:-4px;height:3px;overflow:hidden;border-radius:3px;background:#ffffff12}.menu__progress i{display:block;width:0;height:100%;background:var(--cyan);transition:width .15s}.menu__progress.indeterminate i{width:40%!important;animation:indeterminate 1s ease-in-out infinite}.menu__progress span{position:absolute;top:6px;left:0;font-size:11px;color:var(--muted)}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media (max-width: 560px){.menu__selected img{display:none}.menu__actions .primary{min-width:100px}.menu__settings span{display:none}}@media (orientation: landscape) and (max-height: 500px){.menu{gap:8px;padding-top:calc(var(--safe-top) + 10px)}.menu__brand{font-size:20px}.song-card__cover{width:72px;height:42px}}.settings{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;color:var(--text);background:#0e1726;border:1px solid #ffffff1f;border-radius:16px;box-shadow:0 24px 64px #000a}.settings::backdrop{background:#03070dcc;backdrop-filter:blur(4px)}.settings__form{display:grid;gap:14px;padding:18px 20px 20px}.settings__head{display:flex;align-items:center;justify-content:space-between}.settings__head h2{margin:0;font-size:30px}.settings__close{width:38px;height:38px;padding:0;border-radius:50%}.setting{display:grid;gap:8px;margin:0;padding:0;border:0}.setting legend{margin-bottom:8px;font-size:13px;font-weight:700;color:#cdd9e8}.setting output{margin-left:6px;color:var(--cyan)}.setting__hint{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}.setting input[type=range]{width:100%;accent-color:var(--cyan)}.segmented{display:flex;gap:4px;padding:4px;border-radius:12px;background:#ffffff0d}.segmented label{flex:1;cursor:pointer}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented span{display:block;padding:9px 6px;border-radius:9px;text-align:center;font-size:13px;font-weight:600;color:#b9c7d8;transition:background .15s}.segmented input:checked+span{background:var(--cyan);color:#062027}.segmented input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}.settings__tabs{position:sticky;top:-18px;z-index:1;display:flex;gap:4px;margin:0 -20px;padding:6px 20px 8px;overflow-x:auto;scrollbar-width:none;background:#0e1726;border-bottom:1px solid #ffffff14}.settings__tabs::-webkit-scrollbar{display:none}.settings__tab{flex:1 0 auto;padding:8px;border:0;border-radius:999px;background:transparent;font-size:13px;font-weight:700;color:#b9c7d8}.settings__tab[aria-selected=true]{background:var(--cyan);color:#062027}.settings__panel{display:grid;gap:14px}.setting[hidden],.settings__panel[hidden]{display:none}.controls-preview{position:relative;overflow:hidden;border:1px solid #ffffff1f;border-radius:12px;margin-inline:auto;background:#070b14;pointer-events:none}.controls-preview__screen{position:absolute;top:0;left:0;overflow:hidden;transform-origin:0 0;border-inline:1px solid #ffffff14;background:#070b14 center / cover no-repeat}.controls-preview .controls{--safe-top: 0px;--safe-bottom: 0px;--safe-left: 0px;--safe-right: 0px}.setting__slider{display:grid;gap:4px;margin-top:4px;font-size:12px;font-weight:600;color:#b9c7d8}.setting__slider output{margin-left:6px;color:var(--cyan)}.setting__slider input{width:100%;accent-color:var(--cyan)}.settings__done{justify-self:end}