:root{--bg:#f5f6f8;--surface:#fff;--border:#d9dce1;--text:#1c1f24;--text-muted:#6b7280;--accent:#2f6feb;--accent-contrast:#fff;--error-bg:#fdeceb;--error-border:#e5534b;--error-text:#8a1f16;--card-bg:linear-gradient(160deg, #fff 0%, #eef1f6 100%);--card-border:#00000014;--card-shadow:0 20px 45px #1418201f;--accent-cyan:#0891b2;--accent-amber:#b45309;--dot-bg:#00000024;--start-bg:#1f9d55;--start-contrast:#fff;--stop-bg:#dc3545;--control-bg:#fff;--control-border:#c7ccd4;--track-bg:#dfe3e9;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font:16px/1.5 system-ui,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#14161a;--surface:#1b1e24;--border:#2e333c;--text:#e6e8eb;--text-muted:#9aa1ac;--accent:#5b9dff;--accent-contrast:#0b1220;--error-bg:#3a1c1c;--error-border:#e5534b;--error-text:#ffb4ac;--card-bg:linear-gradient(160deg, #1e2530 0%, #12161d 100%);--card-border:#ffffff14;--card-shadow:0 20px 45px #0006;--accent-cyan:#0dcaf0;--accent-amber:#ffc107;--dot-bg:#ffffff26;--start-bg:#1f9d55;--start-contrast:#fff;--stop-bg:#dc3545;--control-bg:#262b34;--control-border:#ffffff29;--track-bg:#ffffff1f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#14161a;--surface:#1b1e24;--border:#2e333c;--text:#e6e8eb;--text-muted:#9aa1ac;--accent:#5b9dff;--accent-contrast:#0b1220;--error-bg:#3a1c1c;--error-border:#e5534b;--error-text:#ffb4ac;--card-bg:linear-gradient(160deg, #1e2530 0%, #12161d 100%);--card-border:#ffffff14;--card-shadow:0 20px 45px #0006;--accent-cyan:#0dcaf0;--accent-amber:#ffc107;--dot-bg:#ffffff26;--start-bg:#1f9d55;--start-contrast:#fff;--stop-bg:#dc3545;--control-bg:#262b34;--control-border:#ffffff29;--track-bg:#ffffff1f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0}.site-header{align-items:center;gap:10px;margin-bottom:12px;display:flex}.site-header__brand{color:var(--accent);white-space:nowrap;font-size:15px;font-weight:700;text-decoration:none}.site-header__brand:hover{text-decoration:underline}.site-header__divider{color:var(--text-muted);font-weight:400}.site-header__title{color:var(--text-muted);white-space:nowrap;font-size:15px;font-weight:600}.toolbar-spacer{flex:1}.btn,.toggle-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:6px;padding:6px 12px;font-size:13px}.btn:hover,.toggle-btn:hover{border-color:var(--accent)}.icon-btn{padding:6px 10px}.app{max-width:640px;margin:0 auto;padding:24px 16px 40px}.metronome-main{flex-direction:column;align-items:center;display:flex}.metronome-card{background:var(--card-bg);border:1px solid var(--card-border);width:100%;max-width:34rem;box-shadow:var(--card-shadow);border-radius:1.25rem;padding:2rem 1.75rem}.bpm-block{text-align:center;margin-bottom:1.5rem}.bpm-display{font-variant-numeric:tabular-nums;color:var(--text);font-size:clamp(3rem,12vw,5.5rem);font-weight:700;line-height:1;transition:color .1s ease-in-out}.bpm-display.pulse{color:var(--accent-cyan)}.bpm-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-top:.5rem;font-size:.75rem}.bpm-controls{justify-content:center;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.bpm-step{border:1px solid var(--control-border);background:var(--control-bg);width:3rem;height:3rem;color:var(--text);cursor:pointer;border-radius:50%;flex-shrink:0;font-size:1.5rem;line-height:1}.bpm-step:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}.bpm-slider{accent-color:var(--accent-cyan);flex-grow:1;height:.35rem}.tap-row{justify-content:center;margin-bottom:1.5rem;display:flex}.btn-tap{color:var(--accent-cyan);border-color:var(--accent-cyan)}.beat-indicator{justify-content:center;align-items:center;gap:.5rem;min-height:1.25rem;margin-bottom:1.5rem;display:flex}.beat-dot{background-color:var(--dot-bg);border-radius:50%;width:1rem;height:1rem;transition:background-color 50ms ease-out,transform 50ms ease-out}.beat-dot.accent{width:1.25rem;height:1.25rem}.beat-dot.lit{background-color:var(--accent-cyan);transform:scale(1.15)}.beat-dot.accent.lit{background-color:var(--accent-amber)}.start-row{margin-bottom:1.5rem;display:grid}.btn-start{background:var(--start-bg);border-color:var(--start-bg);color:var(--start-contrast);padding:.75rem;font-size:1.1rem;font-weight:600}.btn-start.playing{background:var(--stop-bg);border-color:var(--stop-bg)}.select-row{grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;display:grid}.field{flex-direction:column;gap:.35rem;display:flex}.field label,.custom-sound-wrap label,.volume-row label{color:var(--text-muted);font-size:.75rem}.field select,.custom-sound-wrap input[type=file]{border:1px solid var(--control-border);background:var(--control-bg);width:100%;color:var(--text);border-radius:.5rem;padding:.5rem .6rem;font-size:.95rem}.custom-sound-wrap{flex-direction:column;gap:.35rem;margin-bottom:1.5rem;display:flex}.custom-sound-status{color:var(--text-muted);font-size:.8rem}.volume-row{align-items:center;gap:.75rem;display:flex}.volume-row label{flex-shrink:0}.volume-row input[type=range]{accent-color:var(--accent-cyan);flex-grow:1}.btn-mute{flex-shrink:0}.privacy-note{text-align:center;color:var(--text-muted);margin-top:1.5rem;font-size:.85rem}