: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}}.app{max-width:1440px;margin:auto;padding:0 32px}.topbar{height:92px;display:flex;align-items:center;gap:32px}.brand{color:#fff;text-decoration:none;font:800 26px var(--font-display);letter-spacing:1.5px}.brand span{color:var(--cyan)}.brand small{display:block;margin-top:4px;font:10px var(--font-body);letter-spacing:3px;color:var(--muted)}.song{display:flex;align-items:center;gap:12px;margin-inline:auto}.song img{width:72px;height:42px;object-fit:cover;border-radius:5px}.song strong{font-size:16px}.song span{display:block;margin-top:5px;color:var(--muted);font-size:12px}.topbar>button{font-size:12px}.arena{position:relative;aspect-ratio:16 / 9;max-height:calc(100dvh - 180px);min-height:380px;margin-inline:auto;overflow:hidden;background:#0b1322;border:1px solid #25354b;border-radius:16px;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}.controlbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0}.transport,.options{display:flex;align-items:center;gap:9px}.controlbar button,.controlbar select{padding:9px 12px;font-size:12px}.controlbar label{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}#clock{margin:0 10px;color:#8da4bf;font-size:11px;font-variant-numeric:tabular-nums}#turbo.active{background:#22534e;border-color:var(--cyan);color:var(--cyan)}.footer{display:flex;justify-content:space-between;gap:24px;padding:15px 0 22px;border-top:1px solid #1c2a3c;color:#617892;font-size:10px}.footer details{max-width:360px}.footer summary{cursor:pointer;color:#93aac4}.footer label{display:flex;align-items:center;gap:10px;padding-top:12px}.footer p{font-size:11px}@media (max-width: 760px){.app{padding:0 12px}.topbar{height:72px;gap:12px}.song img{display:none}.controlbar,.options{flex-wrap:wrap}}@media (pointer: coarse){html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0}.app{max-width:none;padding:0}.topbar,.controlbar,.footer{display:none}.arena{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-height:none;min-height:0;aspect-ratio:auto;border:0;border-radius:0;touch-action:none}}.hud{position:absolute;inset:0;pointer-events:none}.combo{position:absolute;top:4%;left:6%;display:flex;flex-direction:column;align-items:center;min-width:70px}.combo b{font:900 italic clamp(30px,4vw,54px) / 1 var(--font-display);color:#ffffe8;letter-spacing:4px;text-shadow:3px 3px #151507;transform:skew(-8deg)}.combo img{width:65px;height:auto;margin-top:3px}.precision{--size: clamp(78px, 9vw, 128px);position:absolute;top:1.5%;right:1.5%;width:var(--size);aspect-ratio:1;display:grid;place-items:center;background:url(/assets/precision-frame-D-4UhCI2.png) center / 100%;border-radius:50%;filter:drop-shadow(0 2px 2px #000)}.precision:before{content:"";position:absolute;inset:5%;border:5px solid #68edff;border-radius:50%;box-shadow:0 0 5px #44c5ff77;mask:repeating-conic-gradient(#000 0deg 37deg,transparent 37deg 45deg)}.precision__disc{position:absolute;inset:19%;border:2px solid #03182f;border-radius:50%;background:radial-gradient(circle at 30% 20%,#ccf8ff,#26a2de 45%,#064983 85%)}.precision b{position:relative;font:900 italic clamp(23px,3vw,39px) / 1 var(--font-display);color:#fff05a;letter-spacing:-1px;text-shadow:2px 2px #151300,-1px -1px #151300}.turbo-gauge{--charge: 0%;position:absolute;top:calc(2% + clamp(78px,9vw,128px));right:3%;width:58px;height:58px;padding:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:linear-gradient(to top,#e4b127 var(--charge),#152535 var(--charge));border:2px solid #8ca5bf;border-radius:10px;box-shadow:0 2px 3px #000}.turbo-gauge span{font-size:26px;line-height:1}.turbo-gauge b{font:800 10px/1.4 var(--font-body)}.turbo-gauge.ready{border-color:#fff176;box-shadow:0 0 14px #ffd53988}.turbo-gauge.boosting{background:#f59d16;animation:boost-glow .4s infinite alternate}@keyframes boost-glow{to{box-shadow:0 0 22px #ffce4b}}#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}.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){.combo{top:calc(var(--safe-top) + 10px);left:50%;transform:translate(-50%)}.combo b{font-size:clamp(28px,7vmin,48px)}.combo img{width:clamp(44px,10vmin,62px)}.precision{--size: clamp(64px, 15vmin, 104px);top:calc(var(--safe-top) + 8px);right:calc(var(--safe-right) + 8px)}.precision b{font-size:clamp(20px,5vmin,32px)}.turbo-gauge,.action-name{display:none}#feedback{top:22%}#feedback img{width:clamp(120px,34vmin,200px);max-width:45vw}}.overlay{position:absolute;inset:0;z-index:20;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;gap:12px}@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,.mobile-pause{display:none}@media (pointer: coarse){.controls{--key: clamp(46px, 11.5vmin, 86px);--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}.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: clamp(52px, 12vmin, 88px);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 100% 0) 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}}.mobile-pause{position:absolute;z-index:11;top:calc(var(--safe-top) + 10px);left:calc(var(--safe-left) + 10px);display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;background:#121a28b3;border:1px solid #ffffff26;backdrop-filter:blur(6px)}.mobile-pause svg{width:20px;height:20px;fill:#e6eefc}@media (orientation: landscape){.controls{--key: clamp(44px, 13vmin, 92px)}.controls__side{top:calc(var(--safe-top) + 12px);justify-content:space-between}.controls__side--left{top:calc(var(--safe-top) + 64px)}.controls__side--right{top:calc(var(--safe-top) + clamp(64px,15vmin,104px) + 24px)}}}