:root{--bg:#f5f1e8;--fg:#2a2a2a;--muted:#6b6b6b;--accent:#c8632d;--accent-hover:#b35727;--surface:#fff;--surface-stroke:#d8d2c5;--shadow:0 8px 32px #00000014;--body-light:#d4a574;--body-dark:#8b5a3c;--body-stroke:#5a3a26;--window:#f8f3e8;--window-stroke:#b89968;--tick-mark:#b89968;--arm:#2a2a2a;--weight-light:#e8c896;--weight-dark:#8b5a3c;--weight-stroke:#5a3a26;--pivot:#1a1a1a;--base:#8b5a3c}[data-theme=dark]{--bg:#1a1612;--fg:#f0ebe0;--muted:#9a9388;--accent:#e8884d;--accent-hover:#d97a3d;--surface:#2a241e;--surface-stroke:#3d3528;--shadow:0 8px 32px #0006;--body-light:#6b4a36;--body-dark:#3d2818;--body-stroke:#1a0f08;--window:#1f1a14;--window-stroke:#6b4a36;--tick-mark:#6b4a36;--arm:#e8d8b8;--weight-light:#b8946a;--weight-dark:#5a3a26;--weight-stroke:#1a0f08;--pivot:#f0ebe0;--base:#3d2818}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:background-color .3s,color .3s}#root{justify-content:center;align-items:center;padding:24px;display:flex}.metronome{background:var(--surface);border:1px solid var(--surface-stroke);width:100%;max-width:420px;box-shadow:var(--shadow);border-radius:24px;flex-direction:column;align-items:center;gap:20px;padding:24px 28px 32px;display:flex}.metronome-header{justify-content:space-between;align-items:center;width:100%;display:flex}.metronome-header h1{letter-spacing:.5px;color:var(--muted);text-transform:uppercase;margin:0;font-size:20px;font-weight:600}.theme-toggle{border:1px solid var(--surface-stroke);color:var(--fg);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:background-color .2s,transform .1s;display:inline-flex}.theme-toggle:hover{background:var(--bg)}.theme-toggle:active{transform:scale(.95)}.pendulum-wrapper{justify-content:center;align-items:center;width:240px;height:320px;display:flex}.pendulum{width:100%;height:100%;display:block}.bpm-display{text-align:center;flex-direction:column;align-items:center;gap:2px;display:flex}.bpm-number{font-variant-numeric:tabular-nums;color:var(--fg);font-size:72px;font-weight:700;line-height:1}.bpm-unit{letter-spacing:2px;color:var(--muted);text-transform:uppercase;font-size:12px;font-weight:600}.bpm-term{color:var(--accent);margin-top:6px;font-size:14px;font-style:italic}.bpm-controls{align-items:center;gap:12px;width:100%;display:flex}.bpm-step{border:1px solid var(--surface-stroke);background:var(--surface);width:40px;height:40px;color:var(--fg);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:22px;font-weight:500;transition:background-color .2s,transform .1s;display:inline-flex}.bpm-step:hover:not(:disabled){background:var(--bg)}.bpm-step:active:not(:disabled){transform:scale(.92)}.bpm-step:disabled{opacity:.4;cursor:not-allowed}.bpm-slider{appearance:none;background:var(--surface-stroke);cursor:pointer;border-radius:2px;outline:none;flex:1;height:4px}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:20px;height:20px;transition:background-color .2s,transform .1s}.bpm-slider::-webkit-slider-thumb:hover{background:var(--accent-hover);transform:scale(1.1)}.bpm-slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:20px;height:20px}.play-button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;transition:background-color .2s,transform .1s;display:inline-flex;box-shadow:0 4px 12px #c8632d4d}.play-button:hover:not(:disabled){background:var(--accent-hover)}.play-button:active:not(:disabled){transform:scale(.95)}.play-button:disabled{opacity:.5;cursor:wait}.loading{color:var(--muted);margin:0;font-size:13px}