:root{--bg:#d6d3bd;--paper:#efeee6;--ink:#111;--muted:#6f6d5e;--accent:#00f0ff;--accent-deep:#0091a6;--great:#0a9d54;--poor:#ff5a3c;--card-radius:22px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#app{flex-direction:column;justify-content:center;align-items:center;gap:22px;width:100vw;height:100vh;padding:24px;display:flex;position:relative}.stage{background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--card-radius);width:min(920px,94vw);height:min(340px,46vh);overflow:hidden;box-shadow:8px 8px #1111111f}.timing-canvas{width:100%;height:100%;display:block}.hud-bar{background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;justify-content:space-between;align-items:center;gap:16px;width:min(920px,94vw);padding:12px 18px;display:flex}.hud-bar.hidden{display:none}.hud-bar__round,.hud-bar__average{letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px;font-weight:800}.hud-bar__dots{gap:10px;display:flex}.hud-bar__dot{border:2px solid var(--ink);background:0 0;border-radius:50%;width:14px;height:14px;transition:transform .15s}.hud-bar__dot.is-empty{background:0 0}.hud-bar__dot.is-active{border-color:var(--accent-deep);transform:scale(1.3);box-shadow:0 0 0 3px #00f0ff4d}.hud-bar__dot.is-great{background:var(--great);border-color:var(--great)}.hud-bar__dot.is-ok{background:var(--accent-deep);border-color:var(--accent-deep)}.hud-bar__dot.is-poor{background:var(--poor);border-color:var(--poor)}.result-banner{border:2.5px solid var(--ink);background:var(--paper);letter-spacing:.6px;text-transform:uppercase;opacity:0;pointer-events:none;border-radius:999px;padding:8px 20px;font-size:15px;font-weight:800;position:absolute;top:8%;left:50%;transform:translate(-50%)}.result-banner.is-shown{opacity:1}.result-banner.is-anim{animation:.35s cubic-bezier(.25,1,.5,1) banner-pop}.result-banner.is-perfect{background:var(--poor);color:var(--paper);border-color:var(--poor)}.result-banner.is-good{color:var(--accent-deep);border-color:var(--accent-deep)}.result-banner.is-poor{color:var(--muted)}@keyframes banner-pop{0%{transform:translate(-50%)scale(.7)}70%{transform:translate(-50%)scale(1.08)}to{transform:translate(-50%)scale(1)}}.overlay{text-align:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:20;background:#d6d3bdeb;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:28px;display:flex;position:absolute;inset:0}.overlay.hidden{display:none}.overlay__title{letter-spacing:2px;font-size:clamp(34px,7vw,58px);font-weight:900;line-height:1}.overlay__subtitle{color:var(--muted);max-width:460px;font-size:15px}.overlay__score{letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-deep);font-size:13px;font-weight:800}.overlay__rating{border:2.5px solid var(--ink);letter-spacing:1px;text-transform:uppercase;border-radius:999px;padding:6px 16px;font-size:13px;font-weight:800;display:inline-block}.overlay__rating.rating-divine{background:var(--poor);color:var(--paper);border-color:var(--poor)}.overlay__rating.rating-ultra{background:var(--great);color:var(--paper);border-color:var(--great)}.overlay__rating.rating-fast{color:var(--accent-deep);border-color:var(--accent-deep)}.overlay__rating.rating-average,.overlay__rating.rating-slow{color:var(--muted)}.overlay__table-container{max-height:34vh;overflow-y:auto}.results-table{border-collapse:collapse;font-variant-numeric:tabular-nums}.results-table th,.results-table td{border-bottom:1.5px solid #11111124;padding:6px 22px;font-size:14px}.results-table th{letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:800}.results-table td:last-child{text-align:right;font-weight:800}.overlay__hint{color:var(--muted);margin-top:6px;font-size:13px}.countdown{color:var(--ink);pointer-events:none;opacity:0;z-index:30;justify-content:center;align-items:center;font-size:clamp(90px,22vw,200px);font-weight:900;display:flex;position:absolute;inset:0}.countdown.is-shown{animation:.75s cubic-bezier(.25,1,.5,1) countdown-pop}@keyframes countdown-pop{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}
