:root{--black: #000000;--white: #ffffff;--cyan: #00e5ff;--magenta: #ff2bd6;--danger: #ff3b30;--dim: rgba(255, 255, 255, .42);--font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--black);color:var(--white);font-family:var(--font);overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}#app{position:fixed;inset:0}#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#ui{position:absolute;inset:0;pointer-events:none;user-select:none}.ui-clickable{pointer-events:auto}.hud{position:absolute;inset:0;padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));opacity:0;transition:opacity .25s ease}.hud[data-visible=true]{opacity:1}.hud__score{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));font-size:clamp(28px,5vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1;text-shadow:0 0 22px rgba(0,229,255,.55)}.hud__distance{margin-top:6px;font-size:13px;font-weight:300;color:var(--dim);letter-spacing:.16em}.hud__multiplier{position:absolute;top:max(18px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));text-align:right;font-size:clamp(24px,4.2vw,38px);font-weight:800;color:var(--cyan);line-height:1;transition:color .15s ease}.hud__multiplier[data-hot=true]{color:var(--magenta);text-shadow:0 0 26px rgba(255,43,214,.7)}.hud__combo{margin-top:6px;font-size:12px;font-weight:300;letter-spacing:.2em;color:var(--dim)}.hud__focus{position:absolute;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(320px,52vw)}.hud__focus-bar{height:3px;background:#ffffff24;overflow:hidden}.hud__focus-fill{height:100%;width:100%;transform-origin:left center;background:var(--cyan);transition:background .15s ease}.hud__focus[data-active=true] .hud__focus-fill{background:var(--magenta);box-shadow:0 0 18px var(--magenta)}.hud__focus-label{margin-top:8px;text-align:center;font-size:10px;letter-spacing:.42em;color:var(--dim)}.hud__track{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));font-size:11px;letter-spacing:.22em;color:var(--dim)}.hud__intensity{display:inline-flex;gap:3px;margin-left:10px;vertical-align:middle}.hud__intensity span{width:12px;height:3px;background:#ffffff2e}.hud__intensity span[data-on=true]{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.hud__fps{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));font-size:11px;letter-spacing:.16em;color:var(--dim)}.hud__praise{position:absolute;left:50%;top:34%;transform:translate(-50%);font-size:clamp(13px,2.4vw,20px);font-weight:800;letter-spacing:.34em;color:var(--magenta);text-shadow:0 0 28px rgba(255,43,214,.75);opacity:0;white-space:nowrap}.hud__praise[data-tone=bad]{color:var(--danger);text-shadow:0 0 28px rgba(255,59,48,.75)}.hud__stems{display:inline-flex;align-items:flex-end;gap:4px;margin-left:14px;height:12px;vertical-align:middle}.hud__stems i{position:relative;display:block;width:4px;height:12px;background:#ffffff1f}.hud__stems i b{position:absolute;inset:0;transform-origin:bottom center;transform:scaleY(.08)}.hud__stems i:nth-child(1) b{background:var(--white);box-shadow:0 0 8px var(--white)}.hud__stems i:nth-child(2) b{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.hud__stems i:nth-child(3) b{background:var(--magenta);box-shadow:0 0 8px var(--magenta)}.hud__praise.is-on{animation:praise .85s cubic-bezier(.16,1,.3,1) forwards}@keyframes praise{0%{opacity:0;transform:translate(-50%,14px) scale(.9)}22%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%,-26px) scale(1.04)}}.hud__focus-touch{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(64px,env(safe-area-inset-bottom));width:92px;height:92px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:none;align-items:center;justify-content:center;font-size:10px;letter-spacing:.28em;color:var(--dim);touch-action:none}body[data-touch=true] .hud__focus-touch{display:flex}.hud__focus-touch[data-active=true]{border-color:var(--magenta);color:var(--magenta);box-shadow:0 0 30px #ff2bd666 inset}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:clamp(12px,3.2vh,26px);padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 55%,#00000040,#000000d1 70%);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}.overlay>*{flex:0 0 auto;max-width:100%}.overlay[data-visible=true]{opacity:1;visibility:visible;pointer-events:auto}.overlay__logo{text-align:center;line-height:1}.overlay__logo b{display:block;font-size:clamp(32px,min(9vw,11vh),96px);font-weight:800;letter-spacing:-.04em}.overlay__logo i{display:block;margin-top:10px;font-style:normal;font-size:clamp(10px,2vw,13px);letter-spacing:.5em;color:var(--cyan)}.overlay__tagline{font-size:clamp(11px,2.2vw,14px);letter-spacing:.28em;color:var(--dim);text-align:center}.btn{appearance:none;border:1px solid rgba(255,255,255,.35);background:transparent;color:var(--white);font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:.32em;padding:16px 42px;cursor:pointer;transition:border-color .18s ease,color .18s ease,box-shadow .18s ease,background .18s ease}.btn:hover,.btn:focus-visible{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 32px #00e5ff40;outline:none}.btn--primary{font-size:16px;padding:20px 62px;border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 44px #00e5ff38}.btn--primary:hover{background:var(--cyan);color:var(--black)}.btn--ghost{border-color:#ffffff29;color:var(--dim);padding:12px 24px;font-size:11px}.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.result{text-align:center}.result__label{font-size:11px;letter-spacing:.4em;color:var(--dim)}.result__score{font-size:clamp(34px,min(12vw,13vh),108px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:8px 0}.result__meta{font-size:12px;letter-spacing:.2em;color:var(--dim)}.result__badge{display:inline-block;margin-top:14px;padding:7px 16px;border:1px solid var(--magenta);color:var(--magenta);font-size:10px;letter-spacing:.36em}.tracks{display:flex;flex-wrap:nowrap;gap:10px;justify-content:center;justify-content:safe center;width:100%;max-width:1180px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:6px}.tracks>*{flex:0 0 auto;scroll-snap-align:center}.tracks::-webkit-scrollbar{height:3px}.tracks::-webkit-scrollbar-thumb{background:#ffffff3d}.track{position:relative;border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--white);font-family:var(--font);padding:14px 18px;min-width:148px;text-align:left;cursor:pointer;transition:border-color .18s ease,transform .18s ease}.track:hover:not([disabled]){border-color:currentColor;transform:translateY(-2px)}.track[data-selected=true]{border-color:currentColor;box-shadow:0 0 30px -8px currentColor}.track[disabled]{cursor:not-allowed;opacity:.35}.track__title{font-size:13px;font-weight:500;letter-spacing:.08em}.track__meta{margin-top:6px;font-size:10px;letter-spacing:.18em;color:var(--dim)}.track__lock{margin-top:6px;font-size:9px;letter-spacing:.22em;color:var(--dim)}.links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:10px;letter-spacing:.28em}.links a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:color .18s ease,border-color .18s ease}.links a:hover{color:var(--cyan);border-color:var(--cyan)}.hint{font-size:10px;letter-spacing:.24em;color:#ffffff47;text-align:center;line-height:1.9}.notice{position:absolute;top:max(18px,env(safe-area-inset-top));left:50%;transform:translate(-50%);font-size:10px;letter-spacing:.24em;color:#ffffff4d;border:1px solid rgba(255,255,255,.12);padding:8px 14px;text-align:center}.fullscreen{position:absolute;inset:0;pointer-events:none}.fullscreen__btn{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:40px;height:40px;display:grid;place-items:center;padding:0;background:transparent;border:1px solid rgba(255,255,255,.18);color:var(--dim);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s,border-color .18s ease,color .18s ease}.fullscreen[data-visible=true] .fullscreen__btn{opacity:1;visibility:visible;pointer-events:auto}.fullscreen__btn:hover,.fullscreen__btn:focus-visible{border-color:var(--cyan);color:var(--cyan);outline:none}.fullscreen__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}.fullscreen__hint{line-height:1.9;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}.fullscreen__hint[data-visible=true]{opacity:1;visibility:visible}@media (max-width: 640px){.btn{padding:14px 26px;letter-spacing:.22em}.btn--primary{padding:18px 46px}.track{min-width:130px;padding:12px 14px}.overlay__tagline{letter-spacing:.18em}.hint{letter-spacing:.16em;line-height:1.7}.links{gap:12px;letter-spacing:.18em}}@media (max-height: 560px){.btn{padding:11px 22px;font-size:12px;letter-spacing:.2em}.btn--primary{padding:13px 34px;font-size:13px}.btn--ghost{padding:10px 18px}.overlay__logo i{margin-top:6px;letter-spacing:.34em}.result__score{margin:4px 0}.result__badge{margin-top:8px;padding:5px 12px}.track{padding:10px 12px;min-width:118px}.track__meta,.track__lock{margin-top:4px}.hint{font-size:9px;line-height:1.5}}@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms!important}}