*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:#131313;color:#f0f0f0;height:100vh;display:flex;align-items:center;justify-content:center}#root{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.title{font-size:3rem;font-weight:700;letter-spacing:-.02em}.description{font-size:1.1rem;color:#aaa;max-width:340px;text-align:center;line-height:1.6}.start-button{margin-top:1rem;padding:.75rem 2.5rem;font-size:1.1rem;background:#f0f0f0;color:#0f0f0f;border:none;border-radius:999px;cursor:pointer;transition:transform .1s,background .2s}.start-button:hover{background:#fff;transform:scale(1.04)}.mode-selector{display:flex;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:4px;border-radius:999px;margin-top:1rem;width:240px}.mode-btn{flex:1;background:transparent;border:none;color:#888;padding:.6rem 1.2rem;font-size:.95rem;font-weight:600;border-radius:999px;cursor:pointer;transition:all .25s ease}.mode-btn:hover{color:#fff}.mode-btn.active{background:#f0f0f0;color:#0f0f0f;box-shadow:0 4px 12px #00000040}.info-hint{font-size:.85rem;opacity:.6}.circle-countdown{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;border-radius:50%}.countdown-text{font-size:3rem;font-weight:700;position:absolute}.countdown-text.slide-in{animation:slideIn .3s ease forwards}.countdown-text.slide-out{animation:slideOut .3s ease forwards}@keyframes slideIn{0%{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-60px);opacity:0}}.header-hint{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#777}.turn-hint{font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase}.task-hint{font-size:.9rem}.circle-inner{display:flex;flex-direction:column;align-items:center;gap:.25rem}.tap-count{font-size:3rem;font-weight:700}.circle-label{font-size:.85rem;color:#aaa;text-transform:uppercase;letter-spacing:.1em}.circle-below{display:flex;flex-direction:column;align-items:center;gap:1rem}.input-hint{font-size:.8rem;color:#777;letter-spacing:.03em}.beat-dots{display:flex;gap:.5rem}.beat-dot{width:10px;height:10px;border-radius:50%;border:2px solid #555;transition:background .1s,border-color .1s}.beat-dot.filled{background:#f0f0f0;border-color:#f0f0f0}.results-screen{gap:1.25rem;padding:2rem}.results-title{font-size:1.5rem;font-weight:600}.results-meta{display:flex;gap:2rem;color:#aaa;font-size:.95rem}.timelines{width:100%;max-width:560px;display:flex;flex-direction:column;gap:.25rem}.timeline-label{font-size:.72rem;color:#aaa;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.2rem;margin-top:.75rem}.timeline-track{position:relative;height:32px;background:#1a1a1a;border:1px solid #2a2a2a}.timeline-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;pointer-events:none}.metronome-dot{background:#888}.user-dot{background:#f0f0f0}.playback-line{position:absolute;top:0;bottom:0;width:2px;background:#fff;border-radius:1px;transform:translate(-50%);pointer-events:none;transition:opacity .2s}.offset-labels{position:relative;min-height:16px;margin-top:6px;margin-bottom:.5rem}.offset-label{position:absolute;transform:translate(-50%);font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}.offset-label.good{color:#4caf50}.offset-label.ok{color:#ff9800}.offset-label.miss{color:#f44336}.exceeded-labels{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.exceeded-labels .offset-label{position:static;transform:translate(+50%)}.replay-buttons{display:flex;gap:1rem}.replay-buttons button{padding:.5rem 1.25rem;background:transparent;color:#f0f0f0;border:1px solid #444;border-radius:999px;cursor:pointer;font-size:.9rem;transition:border-color .2s}.replay-buttons button:hover{border-color:#f0f0f0}.replay-buttons button.active{border-color:#f0f0f0;background:#1a1a1a}.dot-flash{background:#ff0;box-shadow:0 0 8px #ff0;transition:background .2s,box-shadow .2s}.reference-bar{position:absolute;top:0;bottom:0;width:1px;background:#ffffff80;transform:translate(-50%);pointer-events:none}.action-buttons{display:flex;gap:1rem;margin-top:1rem}.secondary-button{margin-top:1rem;padding:.75rem 2.5rem;font-size:1.1rem;background:transparent;color:#f0f0f0;border:1px solid #444;border-radius:999px;cursor:pointer;transition:transform .1s,background .2s}.secondary-button:hover{border-color:#fff;background:#ffffff0d;transform:scale(1.04)}.grade-info{display:flex;flex-direction:column;align-items:center;gap:.5rem}.grade-letter{font-size:3.3rem;font-weight:600;padding-bottom:.4rem}.grade-message{font-size:1.3rem;padding-bottom:.4rem}.app{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;height:100%;width:100%}.game-circle{width:220px;height:220px;border-radius:50%;border:3px solid #f0f0f0;display:flex;align-items:center;justify-content:center;transition:transform .08s ease,border-color .08s ease;-webkit-user-select:none;user-select:none}.game-circle.pulse{transform:scale(1.15);border-color:#fff;box-shadow:0 0 30px #ffffff4d}.game-circle.input-mode{cursor:pointer;border-color:#aaa}.game-circle.input-mode:hover{border-color:#fff}