:root{color-scheme:light dark;--bg: #fbfaf8;--panel: #ffffff;--fg: #17171a;--muted: #6c6c78;--border: #e3e1dd;--border-strong: #c9c6c0;--accent: #c8402f;--accent-soft: rgba(200, 64, 47, .12);--upbeat: #8d8a84;--danger: #b3261e}@media(prefers-color-scheme:dark){:root{--bg: #131316;--panel: #1b1b1f;--fg: #ececf0;--muted: #9a99a4;--border: #2b2b31;--border-strong: #45444d;--accent: #ff6b53;--accent-soft: rgba(255, 107, 83, .16);--upbeat: #74727c;--danger: #ff7a6e}}*{box-sizing:border-box}html,body{margin:0;background:var(--bg)}body{color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.55}.app{min-height:100vh;max-width:44rem;margin:0 auto;padding:3rem 1.5rem 2rem;display:flex;flex-direction:column;gap:1.75rem}header h1{margin:0;font-size:clamp(1.9rem,5vw,2.6rem);letter-spacing:-.03em}header h1:after{content:".";color:var(--accent)}header p{margin:.5rem 0 0;max-width:34rem;color:var(--muted)}.tempo{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 1.25rem 1.25rem;background:var(--panel);border:1px solid var(--border);border-radius:14px}.readout{display:flex;align-items:baseline;gap:.5rem}.bpm{width:6ch;padding:0;font:inherit;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:clamp(3rem,13vw,4.5rem);font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.04em;text-align:center;color:var(--fg);background:none;border:none;border-bottom:2px solid transparent}.bpm:focus{outline:none;border-bottom-color:var(--accent)}.bpm[aria-invalid=true]{color:var(--danger);border-bottom-color:var(--danger)}.unit{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.nudges{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}.nudges button{min-width:4rem;padding:.35rem .5rem;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:.8rem}.lights{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;min-height:2.5rem}.dot{border-radius:50%;background:transparent;border:2px solid var(--border-strong)}.dot.downbeat{width:1.5rem;height:1.5rem;border-color:var(--accent)}.dot.upbeat{width:1rem;height:1rem}.dot.lit{animation:pulse .24s ease-out}.dot.downbeat.lit{background:var(--accent)}.dot.upbeat.lit{background:var(--upbeat);border-color:var(--upbeat)}@keyframes pulse{0%{transform:scale(1.45)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.dot.lit{animation:none}}.transport{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}button{font:inherit;font-size:.9rem;color:var(--bg);background:var(--accent);border:1px solid var(--accent);border-radius:8px;padding:.5rem 1rem;cursor:pointer}button:hover:not(:disabled){filter:brightness(1.08)}button:disabled{opacity:.4;cursor:not-allowed}button.ghost{color:var(--muted);background:transparent;border-color:var(--border-strong)}button.ghost:hover:not(:disabled){color:var(--fg);border-color:var(--fg)}.play{min-width:8rem;padding:.7rem 1.5rem;font-size:1.05rem}.taps{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.controls{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;padding:1.25rem;background:var(--panel);border:1px solid var(--border);border-radius:14px}.controls label{display:flex;flex-direction:column;gap:.35rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.controls label:has(input:disabled){opacity:.5}.value{color:var(--fg);font-variant-numeric:tabular-nums}select{font:inherit;font-size:.95rem;letter-spacing:normal;text-transform:none;color:var(--fg);background:var(--bg);border:1px solid var(--border-strong);border-radius:8px;padding:.5rem .65rem;min-width:11rem}input[type=range]{accent-color:var(--accent);width:11rem;margin:.35rem 0}.hint{flex:1 1 14rem;margin:0;align-self:flex-end;font-size:.85rem;letter-spacing:normal;text-transform:none;color:var(--muted)}.tempo .hint{flex:none;align-self:center;text-align:center;font-variant-numeric:tabular-nums}.notice{min-height:1.4rem;margin:-1rem 0 0;font-size:.9rem;color:var(--accent)}footer{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--border);font-size:.8rem;color:var(--muted)}footer span{flex:1 1 16rem}@media(max-width:30rem){.app{padding:2rem 1rem;gap:1.5rem}.controls label,select,input[type=range]{width:100%;min-width:0}.nudges{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.nudges button{min-width:0}}