@font-face{font-family:Bravura;src:url(https://cdn.jsdelivr.net/npm/@vexflow-fonts/bravura@1.0.2/bravura.woff2)format("woff2");font-weight:400;font-style:normal;font-display:block}:root{--bg:#f8f5f0;--text:#5d5a6d;--text-muted:#b8b2a6;--cell-bg:#fff;--border-note-1:#ffb5a7;--border-note-2:#a8d8ea;--border-note-4:#ffdab9;--border-rest:#c3aed6;--border-long:#b5ead7;--active-bg:#ffdac1;--control-bg:#fff;--control-border:#e8e4df;--btn-primary:#ffb5a7;--btn-primary-text:#fff;--font:system-ui, "Segoe UI", Roboto, sans-serif}*,:before,:after{box-sizing:border-box}body{font-family:var(--font);background:var(--bg);color:var(--text);margin:0}#app{flex-direction:column;gap:24px;max-width:520px;min-height:100dvh;margin:0 auto;padding:32px 20px 48px;display:flex}h1{text-align:center;color:var(--text);margin:0;font-size:22px;font-weight:700}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.controls select{background:var(--control-bg);color:var(--text);border:1px solid var(--control-border);font-size:14px;font-family:var(--font);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235D5A6D' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;border-radius:8px;padding:8px 28px 8px 12px}.controls button{background:var(--control-bg);color:var(--text);border:1px solid var(--control-border);font-size:14px;font-family:var(--font);cursor:pointer;border-radius:8px;padding:8px 14px;transition:background .15s,border-color .15s}.controls button:hover{border-color:#ccc}.controls button.primary{background:var(--btn-primary);color:var(--btn-primary-text);border:none;font-weight:600}.controls button.primary:hover{opacity:.9}.controls button.mute-btn{padding:6px 10px;font-size:18px;line-height:1}.bpm-section{text-align:center}.bpm-display{color:var(--text);font-size:22px;font-weight:700}.bpm-slider{justify-content:center;align-items:center;gap:8px;margin-top:4px;display:flex}.bpm-slider span{color:var(--text-muted);text-align:center;width:24px;font-size:12px}.bpm-slider input[type=range]{width:180px;accent-color:var(--btn-primary);cursor:pointer}.grid{-webkit-user-select:none;user-select:none;flex-direction:column;gap:8px;display:flex}.grid-row{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.cell{background:var(--cell-bg);border:2px solid var(--border-note-1);cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:24px 8px;transition:background .15s,border-color .15s,transform .15s;display:flex}.cell.note-2{border-color:var(--border-note-2)}.cell.note-4{border-color:var(--border-note-4)}.cell.rest{border-color:var(--border-rest)}.cell.long{border-color:var(--border-long)}.cell.active{background:var(--active-bg);transform:scale(1.03)}.progress{text-align:center;flex-direction:column;align-items:center;gap:4px;font-size:14px;display:flex}.progress .beat-indicator{background:var(--active-bg);color:#8b7e6e;border-radius:8px;padding:8px 20px;font-weight:500;display:inline-block}.progress .hint{color:var(--text-muted);font-size:12px}.grid-container{position:relative}.countdown-overlay{z-index:10;background:#f8f5f0eb;border-radius:12px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.countdown-number{color:var(--btn-primary);font-size:120px;font-weight:800;animation:.3s ease-out countdown-pop}@keyframes countdown-pop{0%{opacity:.3;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}.start-btn{background:var(--btn-primary);color:var(--btn-primary-text);font-size:18px;font-weight:700;font-family:var(--font);cursor:pointer;letter-spacing:.5px;border:none;border-radius:12px;padding:14px 48px;transition:opacity .15s,transform .15s}.start-btn:hover{opacity:.9;transform:scale(1.03)}.results-accuracy{color:var(--text);font-size:64px;font-weight:800;line-height:1}.results-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;font-size:14px}.results-stats{color:var(--text);gap:12px;margin-top:12px;font-size:13px;display:flex}.results-stats span{background:var(--control-bg);border:1px solid var(--control-border);border-radius:8px;padding:4px 12px}.results-actions{gap:10px;margin-top:20px;display:flex}.results-actions button{background:var(--control-bg);color:var(--text);border:1px solid var(--control-border);font-size:14px;font-family:var(--font);cursor:pointer;border-radius:8px;padding:10px 24px;transition:background .15s,border-color .15s}.results-actions button:hover{border-color:#ccc}.results-actions button.primary{background:var(--btn-primary);color:var(--btn-primary-text);border:none;font-weight:600}.results-actions button.primary:hover{opacity:.9}.cell.perfect{background:#e8f5e9;border-color:#7bc67e}.cell.good{background:#fff8e1;border-color:#ffd54f}.cell.okay{background:#fff3e0;border-color:#ffb74d}.cell.poor{background:#ffebee;border-color:#e57373}.cell.missed{opacity:.6;background:#f5f5f5;border-color:#cfd8dc}.mode-toggle{border:1px solid var(--control-border);border-radius:8px;gap:0;display:flex;overflow:hidden}.mode-btn{background:var(--control-bg);color:var(--text);font-size:14px;font-family:var(--font);cursor:pointer;border:none;padding:8px 18px;transition:background .15s,color .15s}.mode-btn.active{background:var(--btn-primary);color:var(--btn-primary-text);font-weight:600}.mode-btn:disabled{opacity:.5;cursor:not-allowed}.stop-btn{background:var(--text-muted);color:#fff;font-size:14px;font-family:var(--font);cursor:pointer;border:none;border-radius:8px;margin-top:8px;padding:8px 24px;font-weight:600;transition:opacity .15s}.stop-btn:hover{opacity:.85}.controls select:disabled,.controls button:disabled,.bpm-slider input[type=range]:disabled{opacity:.5;cursor:not-allowed}.notation.svelte-3umz7t{width:auto;max-width:100%;height:44px;color:var(--text);display:block}