:root{--bg: #05030d;--panel: rgba(12, 8, 30, .82);--line: rgba(120, 90, 255, .35);--cyan: #22e6ff;--magenta: #ff2bd6;--violet: #8f5bff;--lime: #b6ff3a;--red: #ff2e5c;--text: #eaf6ff;--muted: #9aa4d0;--font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0}.stage-wrap{position:absolute;inset:0}#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0px,rgba(255,255,255,.035) 1px,transparent 1px,transparent 3px);mix-blend-mode:overlay;opacity:.5;animation:flicker 6s infinite steps(60)}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,0,0,.72) 100%)}@keyframes flicker{0%,97%,to{opacity:.5}98%{opacity:.35}99%{opacity:.6}}.hud{position:absolute;inset:0;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));pointer-events:none;display:flex;flex-direction:column;gap:10px}.hud-top{display:flex;justify-content:center;gap:clamp(14px,4vw,42px);align-items:flex-start}.stat{display:flex;flex-direction:column;align-items:center;min-width:64px}.stat-label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}.stat-value{font-family:var(--mono);font-size:clamp(20px,3.4vw,32px);font-weight:700;line-height:1.1;text-shadow:0 0 12px rgba(34,230,255,.55)}.stat-combo .stat-value{color:var(--lime);text-shadow:0 0 16px rgba(182,255,58,.6)}.stat-combo .stat-value.hot{color:var(--magenta);text-shadow:0 0 22px rgba(255,43,214,.8)}.shield{display:flex;align-items:center;gap:10px;max-width:620px;width:100%;margin:0 auto}.shield-bar{flex:1;height:8px;background:#ffffff14;border:1px solid var(--line);border-radius:99px;overflow:hidden}.shield-bar i{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(1);background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta));box-shadow:0 0 14px #22e6ff99;transition:transform .18s ease}.shield-bar i.low{background:linear-gradient(90deg,#ff6a3d,var(--red));box-shadow:0 0 16px #ff2e5cbf}.shield-label,.beat-label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}.beat-label{min-width:46px;text-align:right}.preview{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));width:clamp(150px,22vw,260px);background:#060310b3;border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 0 24px #8f5bff59,inset 0 0 30px #22e6ff0f;backdrop-filter:blur(6px)}.preview canvas{display:block;width:100%;height:auto;aspect-ratio:4 / 3;border-radius:8px;background:#0a0618}.preview-meta{display:flex;justify-content:space-between;align-items:center;padding:5px 3px 1px}.chip{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:2px 7px;border-radius:99px;border:1px solid transparent}.chip.ok{color:var(--lime);border-color:#b6ff3a66}.chip.bad{color:var(--red);border-color:#ff2e5c66}.preview-fps{font-family:var(--mono);font-size:10px;color:var(--muted)}.countdown{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;pointer-events:none}.countdown-num{font-size:clamp(72px,18vw,180px);font-weight:800;color:var(--text);text-shadow:0 0 30px var(--cyan),0 0 70px var(--magenta)}.countdown-num.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1)}@keyframes pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.countdown-hint{letter-spacing:.4em;text-transform:uppercase;font-size:11px;color:var(--muted)}.screen{position:absolute;inset:0;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 30%,#1e083c80,#03020adb);backdrop-filter:blur(3px);overflow-y:auto}.panel{width:min(460px,94vw);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,4vw,34px);box-shadow:0 0 60px #8f5bff40,inset 0 1px #ffffff0f;text-align:center}.brand h1{margin:0;font-size:clamp(34px,9vw,54px);font-weight:800;letter-spacing:.06em;text-shadow:0 0 22px rgba(34,230,255,.6),0 0 50px rgba(255,43,214,.35)}.brand h1 span{color:var(--magenta)}.brand p{margin:4px 0 22px;color:var(--muted);letter-spacing:.32em;text-transform:uppercase;font-size:11px}.how{display:flex;gap:8px;margin-bottom:22px}.how-item{flex:1;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px}.how-item b{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#05030d;font-size:12px}.how-item span{font-size:10px;color:var(--muted);letter-spacing:.04em;line-height:1.3}.field{text-align:left;margin-bottom:16px}.field-label{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.seg{display:flex;gap:6px;padding:4px;background:#0000004d;border:1px solid rgba(255,255,255,.06);border-radius:12px}.seg button{flex:1;padding:10px 6px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:all .15s ease}.seg button:hover{color:var(--text)}.seg button.selected{color:#05030d;background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 18px #22e6ff73}.seg.flash{animation:seg-flash .7s ease-in-out 2;border-color:var(--cyan)}@keyframes seg-flash{0%,to{box-shadow:0 0 #22e6ff00}50%{box-shadow:0 0 22px 3px #22e6ff8c}}.track-panel{margin-top:10px}.track-pick{display:block;font-size:11px;color:var(--muted);cursor:pointer}.track-pick input[type=file]{display:none}.track-pick:hover{color:var(--text)}.track-pick:has(input:disabled){opacity:.5;cursor:default}.track-status{margin:8px 0 0;font-size:11px;line-height:1.45;color:var(--muted);min-height:1em}.track-status.busy{color:var(--cyan)}.track-status.ready{color:var(--lime)}.track-status.error{color:var(--red)}.cta{width:100%;margin-top:6px;padding:15px;border:0;border-radius:12px;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#05030d;cursor:pointer;background:linear-gradient(135deg,var(--cyan),var(--magenta));box-shadow:0 0 28px #ff2bd666;transition:transform .12s ease,box-shadow .2s ease}.cta:hover{transform:translateY(-1px);box-shadow:0 0 40px #22e6ff8c}.cta:active{transform:translateY(1px) scale(.99)}.ghost{padding:14px 20px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text);font-family:inherit;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.ghost:hover{background:#ffffff0d}.footnote{margin:16px 0 0;font-size:11px;color:var(--muted);line-height:1.5}.credit{margin:14px 0 0;font-size:11px;letter-spacing:.06em;color:var(--muted)}.credit a{color:var(--cyan);text-decoration:none}.credit a:hover{text-decoration:underline}.loading-panel h2{margin:18px 0 6px;letter-spacing:.08em}.loading-panel p{color:var(--muted);margin:4px 0}.spinner{width:54px;height:54px;margin:0 auto;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--cyan);border-right-color:var(--magenta);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-kicker{letter-spacing:.34em;text-transform:uppercase;font-size:11px;color:var(--muted);margin:0 0 10px}.rank-badge{width:96px;height:96px;margin:0 auto 6px;display:grid;place-items:center;font-size:52px;font-weight:800;border-radius:24px;border:2px solid var(--cyan);color:var(--text);text-shadow:0 0 22px currentColor;box-shadow:0 0 34px #22e6ff66,inset 0 0 24px #22e6ff2e;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}.rank-badge[data-rank=S]{border-color:var(--magenta);color:var(--magenta);box-shadow:0 0 40px #ff2bd680,inset 0 0 24px #ff2bd633}.rank-badge[data-rank=A]{border-color:var(--lime);color:var(--lime);box-shadow:0 0 34px #b6ff3a6b}.rank-badge[data-rank=B]{border-color:var(--cyan);color:var(--cyan)}.rank-badge[data-rank=C]{border-color:var(--violet);color:var(--violet)}.rank-badge[data-rank=D]{border-color:var(--muted);color:var(--muted)}.result-score{font-family:var(--mono);font-size:clamp(34px,10vw,52px);font-weight:800}.result-highscore{font-family:var(--mono);font-size:13px;color:var(--muted);margin:6px 0 0;letter-spacing:.06em}.result-best{color:var(--lime);letter-spacing:.2em;text-transform:uppercase;font-size:11px;margin:4px 0 0}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.result-stats div{background:#ffffff08;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px}.result-stats dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}.result-stats dd{margin:4px 0 0;font-family:var(--mono);font-size:22px;font-weight:700}.result-actions{display:flex;gap:10px;flex-wrap:wrap}.result-actions .cta{margin-top:0}.mute{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#06031099;color:var(--text);font-size:18px;cursor:pointer;backdrop-filter:blur(6px)}.mute:hover{border-color:var(--cyan)}.modal{position:absolute;inset:0;display:grid;place-items:center;background:#03020ab3;backdrop-filter:blur(4px);padding:16px;z-index:50}.modal-card{width:min(400px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}.modal-card h3{margin:0 0 8px}.modal-card p{color:var(--muted);white-space:pre-line;line-height:1.5}.hidden{display:none!important}.hidden-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}@media (max-width: 560px){.how{gap:6px}.how-item span{font-size:9px}.preview{width:clamp(120px,34vw,168px)}.result-stats{gap:8px}}@media (max-height: 480px) and (orientation: landscape){.preview{width:clamp(110px,16vw,150px)}.brand p{margin-bottom:12px}}