body{background-color:#000;margin:0;overflow:hidden}.controls{--green: #00ff41;position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;padding:12px 14px;width:170px;font:10px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--green);background:#00140559;border:1px solid rgba(0,255,65,.25);box-shadow:0 0 12px #00ff4126;opacity:.35;transition:opacity .3s}.controls:hover{opacity:1}.controls label{display:flex;flex-direction:column;gap:6px}.controls span{display:flex;justify-content:space-between;text-shadow:0 0 6px var(--green)}.controls input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;margin:0;background:#00ff414d;outline:none;cursor:pointer}.controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;background:var(--green);box-shadow:0 0 8px var(--green)}.controls input[type=range]::-moz-range-thumb{width:8px;height:8px;border:none;border-radius:0;background:var(--green);box-shadow:0 0 8px var(--green)}.source{display:grid;grid-template-columns:1fr 1fr;margin-top:2px;border:1px solid rgba(0,255,65,.5)}.source button{padding:6px 0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:#00ff4199;background:transparent;border:none;cursor:pointer;transition:background .15s,color .15s}.source button:hover{color:var(--green)}.source button[aria-pressed=true]{color:#000;background:var(--green);box-shadow:0 0 10px #00ff4180}:root{--green: #00ff41;--lime: #e4ff4a;--pink: #ff2d95;--cyan: #00e5ff}.controls{z-index:15}.hud{position:fixed;inset:0;z-index:10;pointer-events:none;font-family:Orbitron,sans-serif;text-transform:uppercase}.combo{position:absolute;top:6vh;left:50%;display:flex;flex-direction:column;align-items:center;transform:translate(-50%);transform-origin:center top}.combo[hidden]{display:none}.combo-value{font-size:14vmin;font-weight:900;font-style:italic;line-height:1;letter-spacing:.04em;background:linear-gradient(180deg,#ffffff 0%,var(--lime) 40%,var(--green) 52%,#0b7a2a 70%,var(--lime) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(0,255,65,.55)) drop-shadow(3px 3px 0 rgba(255,45,149,.55))}.combo-label{margin-top:.4em;margin-left:.6em;font-size:2.2vmin;letter-spacing:.6em;color:var(--green);text-shadow:0 0 8px var(--green)}.combo-max{margin-top:.6em;font-size:1.3vmin;letter-spacing:.4em;color:#00ff4199}.combo.punch{animation:combo-punch .25s cubic-bezier(.2,1.4,.4,1)}.combo.milestone{animation:combo-milestone .55s cubic-bezier(.2,1.4,.4,1)}.combo.shatter{animation:combo-shatter .5s ease-in forwards}@keyframes combo-punch{0%{transform:translate(-50%) scale(1.3)}to{transform:translate(-50%) scale(1)}}@keyframes combo-milestone{0%{transform:translate(-50%) scale(1.6) skew(-12deg);filter:brightness(2.5)}to{transform:translate(-50%) scale(1)}}@keyframes combo-shatter{0%{transform:translate(-50%) scale(1.1)}30%{transform:translate(-52%) skew(20deg);filter:hue-rotate(200deg) brightness(1.5)}to{transform:translate(-50%) scale(.6) translateY(4vh);filter:hue-rotate(200deg) blur(6px);opacity:0}}.judge{position:absolute;transform:translate(-50%,-50%);font-size:2.4vmin;font-weight:800;letter-spacing:.12em;white-space:nowrap;text-align:center;animation:judge-rise .75s ease-out forwards}.judge:after{content:attr(data-jp);display:block;margin-top:.3em;font-family:sans-serif;font-size:.5em;font-weight:400;letter-spacing:.5em;opacity:.85}.judge.good{color:var(--green);text-shadow:0 0 10px var(--green)}.judge.perfect{font-size:3vmin;color:#fff;text-shadow:-3px 0 var(--pink),3px 0 var(--cyan),0 0 14px var(--lime);animation:judge-rise .8s ease-out forwards,judge-glitch .4s steps(2) 2}.judge.miss{color:var(--pink);text-shadow:0 0 10px var(--pink);animation:judge-rise .75s ease-out forwards,judge-jitter .3s steps(3) 2}@keyframes judge-rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}30%{transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-110%) scale(1)}}@keyframes judge-glitch{0%{clip-path:inset(0 0 60% 0);translate:3px 0}50%{clip-path:inset(40% 0 0 0);translate:-3px 0}to{clip-path:none;translate:0 0}}@keyframes judge-jitter{0%{translate:-4px 0}33%{translate:4px -2px}66%{translate:-2px 2px}to{translate:0 0}}.start,.results{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5vmin;background:radial-gradient(ellipse at center,#00000040,#000c);font-family:Orbitron,sans-serif;text-transform:uppercase;text-align:center;color:var(--green);cursor:pointer;transition:opacity .6s}.start.hidden,.results.hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s,visibility 0s .6s}.start-sub{margin:0;font-family:sans-serif;font-size:2.2vmin;letter-spacing:.8em;opacity:.8}.start-title{margin:0;font-family:Monoton,Orbitron,cursive;font-weight:400;font-size:9vmin;letter-spacing:.12em;background:linear-gradient(180deg,#ffffff 0%,var(--lime) 45%,var(--green) 55%,#0b7a2a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(0,255,65,.5))}.start-help{margin:3vmin 0 0;font-size:1.8vmin;letter-spacing:.15em;text-transform:none;opacity:.85}.start-help kbd{margin:0 .1em;padding:.2em .5em;font:inherit;border:1px solid}.start-track{margin:1vmin 0 0;font-size:1.6vmin;letter-spacing:.3em;opacity:.7}.start-press{margin-top:4vmin;font-size:2vmin;letter-spacing:.5em;opacity:.5}.start.ready .start-press,.results .start-press{opacity:1;animation:blink 1.2s steps(2) infinite}.start:not(.ready){cursor:progress}.start.needs-song{cursor:default}.song-pick{margin-top:2.5vmin;padding:.8em 1.4em;font:inherit;font-size:1.5vmin;letter-spacing:.3em;text-transform:inherit;color:var(--green);background:#00000059;border:1px solid rgba(0,255,65,.5);cursor:pointer;transition:background .15s,color .15s}.song-pick:hover,.song-pick:focus-visible{color:#000;background:var(--green);outline:none}.results-title{margin:0;font-weight:900;font-style:italic;font-size:6vmin;letter-spacing:.1em;background:linear-gradient(180deg,#ffffff 0%,var(--lime) 45%,var(--green) 55%,#0b7a2a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(0,255,65,.5))}.results-values{display:grid;grid-template-columns:auto auto;gap:1.2vmin 5vmin;margin:4vmin 0 0;font-size:2.2vmin;letter-spacing:.25em}.results-values dt{text-align:right;opacity:.7}.results-values dd{margin:0;text-align:left;font-weight:800;text-shadow:0 0 8px var(--green)}@keyframes blink{to{opacity:0}}