:root{--bg:#07060a;--fg:#f4ede4;--muted:#a99d92;--accent:#ffb454;--perfect:#7dffb0;--good:#ffe07a;--miss:#9a9a9a;--wrong:#ff5c5c;color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:8px;padding:10px 18px}button:hover{background:#ffffff24}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);color:#221400;border-color:#0000;font-weight:700}button.primary:hover{filter:brightness(1.08)}input[type=number]{font:inherit;color:inherit;background:#ffffff14;border:1px solid #ffffff26;border-radius:6px;width:90px;padding:6px 10px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}#gl{width:100%;height:100%;display:block;position:fixed;inset:0}#cam{z-index:-1;pointer-events:none;width:160px;height:120px;position:fixed;top:0;left:0}.screen{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:20;text-align:center;background:#07060adb;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:none;position:fixed;inset:0}.screen.show{display:flex}.screen h1{letter-spacing:.2em;margin:0;font-size:64px;font-weight:800}.screen h1 span{letter-spacing:.4em;color:var(--accent);vertical-align:super;margin-left:12px;font-size:18px}.screen h2{letter-spacing:.1em;margin:0;font-size:28px}.sub{color:var(--muted);margin:0 0 8px}.hint{color:var(--muted);max-width:560px;font-size:13px;line-height:1.5}.status{color:var(--muted);min-height:1.4em}.row{align-items:center;gap:12px;display:flex}.row.center{justify-content:center}.row label{text-align:right;width:110px;color:var(--muted);font-size:14px}.unit{color:var(--muted);font-size:13px}.seg{border:1px solid #ffffff26;border-radius:8px;display:inline-flex;overflow:hidden}.seg button{background:0 0;border:0;border-radius:0}.seg button.active{color:var(--accent);background:#ffb45440}.calib-preview{aspect-ratio:16/9;background:#000;border-radius:12px;width:min(720px,80vw);position:relative;overflow:hidden}.calib-preview video,.calib-preview canvas{object-fit:contain;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.calib-ring{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.calib-ring svg{width:45%;height:45%;transform:rotate(-90deg)}.calib-ring circle{fill:none;stroke-width:4px}.calib-ring .bg{stroke:#ffffff26}.calib-ring .fg{stroke:var(--accent);stroke-dasharray:283;stroke-dashoffset:283px;transition:stroke-dashoffset .1s linear}#calib-axes{text-align:left;color:var(--muted);min-height:3em;margin:0}.hud{pointer-events:none;z-index:10;display:none;position:fixed;inset:0}.hud.show{display:block}.hud-focus{letter-spacing:.3em;color:#ffecc8bf;text-transform:uppercase;text-shadow:0 1px 8px #000c;font-family:Georgia,Times New Roman,serif;font-size:15px;position:absolute;top:18px;left:50%;transform:translate(-50%)}.hud-stand{align-items:flex-end;gap:18vw;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.plaque{background:linear-gradient(160deg,#e9c877 0%,#b8893a 35%,#7a5620 70%,#c79e4f 100%);border-radius:5px;padding:7px;box-shadow:0 4px 14px #0009,inset 0 1px #fff5d2b3,inset 0 -2px #3c230599}.gauge{background:linear-gradient(90deg,#e2433a 0%,#f0a33a 38%,#d8e04a 60%,#3fd46a 100%);border-radius:3px;width:150px;height:26px;position:relative;overflow:hidden;box-shadow:inset 0 2px 5px #0000008c}.gauge:after{content:"";background:linear-gradient(#ffffff59,#fff0 45%,#0003);position:absolute;inset:0}.gauge-cover{background:#151210;width:0;transition:width .25s;position:absolute;top:0;bottom:0;right:0}.plaque-score{min-width:150px}.counter{color:#f6efe2;text-align:center;font-variant-numeric:tabular-nums;background:#0d0c0b;border-radius:3px;height:26px;padding:0 12px;font-family:Georgia,Times New Roman,serif;font-size:19px;font-weight:700;line-height:26px;box-shadow:inset 0 2px 5px #000c}.combo{text-align:center;color:#ffe2a0;text-shadow:0 1px 6px #000000e6;margin-bottom:6px;font-family:Georgia,serif;font-size:14px;font-style:italic;position:absolute;bottom:100%;left:0;right:0}.plaque-score{position:relative}.hud-progress{background:#ffffff14;height:3px;position:absolute;bottom:0;left:0;right:0}.hud-progress div{background:#ffd278b3;width:0;height:100%}.hud-popup{letter-spacing:.18em;opacity:0;text-shadow:0 2px 12px #000c;font-family:Georgia,Times New Roman,serif;font-size:24px;font-weight:700;transition:opacity .1s,transform .12s;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)scale(.85)}.hud-popup.show{opacity:.9;transform:translate(-50%,-50%)scale(1)}.hud-popup.perfect{color:#ffd35a}.hud-popup.good{color:#fff1c8}.hud-popup.miss{color:var(--miss)}.hud-popup.wrong{color:var(--wrong)}.hud-countdown{opacity:0;color:#fff6e0;text-shadow:0 0 30px #ffc86e99;font-family:Georgia,serif;font-size:110px;font-weight:700;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.hud-countdown.show{opacity:.9}.hud-cues{position:absolute;inset:0}.cue-marker{will-change:transform, opacity;position:absolute;top:0;left:0}.cue-halo{background:radial-gradient(circle,#ffffff47 0%,#c8d2e124 40%,#0000 70%);border-radius:50%;width:150px;height:150px;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.cue-inner{background:radial-gradient(circle,#fff 0 60%,#ffffffd9 72%,#fff0 100%);border-radius:50%;width:44px;height:44px;position:absolute;top:0;left:0;transform:translate(-50%,-50%);box-shadow:0 0 24px 6px #ffffff73}.cue-outer{border:3px solid #fffffff2;border-radius:50%;width:44px;height:44px;position:absolute;top:0;left:0;transform:translate(-50%,-50%);box-shadow:0 0 10px #fff9}.cue-marker.due .cue-inner{box-shadow:0 0 36px 12px #ffffffb3}.cue-marker.hit .cue-inner{box-shadow:0 0 50px 22px #fffffff2}.cue-marker.hit .cue-outer{box-shadow:0 0 24px 6px #ffffffe6}.cue-marker.miss .cue-inner{background:radial-gradient(circle,#ff3b30 0 60%,#ff3b30d9 72%,#ff3b3000 100%);box-shadow:0 0 30px 10px #ff3b3099}.cue-marker.miss .cue-outer{border-color:#ff3b30;box-shadow:0 0 12px #ff3b30b3}.cue-marker.miss .cue-halo{background:radial-gradient(circle,#ff3b3040 0%,#ff3b3000 70%)}.pip{aspect-ratio:16/9;z-index:11;background:#000;border:1px solid #ffffff26;border-radius:10px;width:240px;display:none;position:fixed;bottom:16px;right:16px;overflow:hidden}.pip.show{display:block}.pip video,.pip canvas{object-fit:contain;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.pip.big{width:400px}.debug-panel{color:#cfe;white-space:pre;z-index:11;background:#0009;border-radius:8px;max-width:60vw;margin:0;padding:10px 12px;display:none;position:fixed;bottom:16px;left:16px}.debug-panel.show{display:block}.result-rank{color:var(--accent);font-size:120px;font-weight:900;line-height:1}.result-score{font-variant-numeric:tabular-nums;font-size:40px;font-weight:700}.result-grid{grid-template-columns:repeat(3,140px);gap:10px 20px;margin-top:10px;display:grid}.result-grid div{border-bottom:1px solid #ffffff1f;justify-content:space-between;padding:6px 0;display:flex}.result-grid span{color:var(--muted)}.result-offset{color:var(--muted);margin:14px 0 0;font-size:14px}