:root{color:#172421;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f6f8f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}#root{min-height:100svh}.app-shell{background:linear-gradient(#0a7c9014,#0000 38%),#f6f8f7;place-items:center;min-height:100svh;padding:32px 16px;display:grid}.metronome-panel{background:#fff;border:1px solid #d9e1df;border-radius:8px;width:min(760px,100%);padding:34px;box-shadow:0 18px 50px #14282a1f}.topbar{text-align:left;justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.topbar-actions{align-items:center;gap:10px;display:flex}.language-switch{position:relative}.language-button{color:#173633;white-space:nowrap;background:#fff;border:1px solid #d9e1df;border-radius:999px;min-height:34px;padding:0 12px;font-size:14px;font-weight:750}.language-menu{z-index:10;background:#fff;border:1px solid #d9e1df;border-radius:8px;width:150px;padding:6px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 14px 30px #14282a29}.language-menu button{color:#173633;text-align:left;background:0 0;border:0;border-radius:6px;width:100%;min-height:36px;padding:0 10px;font-size:14px;font-weight:700}.language-menu button:hover,.language-menu button.selected{background:#e8f5f4}.eyebrow,.label{color:#657371;letter-spacing:0;text-transform:uppercase;margin:0;font-size:13px;font-weight:700}.topbar h1{color:#172421;margin:4px 0 0;font-size:34px;font-weight:750;line-height:1.1}.status{color:#657371;white-space:nowrap;background:#f8faf9;border:1px solid #d9e1df;border-radius:999px;align-items:center;gap:8px;min-height:34px;padding:0 12px;font-size:14px;display:inline-flex}.status span{background:#a8b4b1;border-radius:999px;width:8px;height:8px}.status.playing span{background:#00a676}.tempo-control{grid-template-columns:74px minmax(0,1fr) 74px;align-items:center;gap:18px;margin-top:34px;display:grid}button,input{font:inherit}button{cursor:pointer}.step-button{color:#153532;background:#f3f7f6;border:1px solid #cdd8d5;border-radius:50%;width:74px;height:74px;font-size:42px;line-height:1;transition:transform .16s,border-color .16s,background .16s}.step-button:hover{background:#e8f5f4;border-color:#008b8f}.step-button:active,.play-button:active,.tap-button:active{transform:translateY(1px)}.tempo-display{text-align:center;min-width:0}.bpm-button{color:#101a18;background:#f7fbfa;border:0;border-radius:8px;width:100%;min-height:160px}.bpm-button strong{color:#101a18;letter-spacing:0;font-size:clamp(72px,18vw,136px);font-weight:800;line-height:.9;display:block}.bpm-button span{color:#657371;margin-top:8px;font-size:18px;font-weight:700;display:block}.bpm-form{background:#f7fbfa;border-radius:8px;grid-template-columns:minmax(0,1fr) 88px;align-items:center;gap:10px;min-height:160px;padding:18px;display:grid}.bpm-form input{color:#101a18;text-align:center;box-sizing:border-box;background:#fff;border:1px solid #b8c6c3;border-radius:8px;width:100%;min-width:0;font-size:clamp(48px,13vw,88px);font-weight:800;line-height:1}.bpm-form button,.countdown-row button{color:#fff;background:#008b8f;border:0;border-radius:6px;font-weight:750}.bpm-form button{height:52px}.slider-row{color:#657371;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:12px;margin-top:22px;font-size:13px;font-weight:700;display:grid}.slider-row input{accent-color:#008b8f;width:100%}.audio-note{color:#a4492f;text-align:center;margin:12px 0 0;font-size:14px;font-weight:700}.beat-dots{justify-content:center;gap:12px;min-height:26px;margin-top:26px;display:flex}.beat{background:#d3ddda;border-radius:999px;width:14px;height:14px;transition:transform 80ms,background 80ms}.beat.active{background:#008b8f;transform:scale(1.45)}.primary-actions{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;margin-top:28px;display:grid}.play-button,.tap-button{border-radius:8px;min-height:68px;font-weight:800}.play-button{color:#fff;background:#e04534;border:0;font-size:24px;box-shadow:0 12px 24px #e045343d}.tap-button{color:#173633;background:#fff;border:1px solid #cdd8d5;font-size:18px}.tap-button span{color:#657371;margin-top:2px;font-size:12px;font-weight:700;display:block}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px;display:grid}.control-group{text-align:left;background:#fbfcfc;border:1px solid #d9e1df;border-radius:8px;padding:16px}.control-group.inline{justify-content:space-between;align-items:center;gap:16px;display:flex}.control-group p{color:#657371;margin:4px 0 0;font-size:14px}.segmented{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px;display:grid}.segmented button{color:#173633;background:#fff;border:1px solid #cdd8d5;border-radius:6px;min-height:42px;font-weight:750}.segmented button.selected{color:#fff;background:#008b8f;border-color:#008b8f}.switch{flex:none;width:58px;height:34px;display:inline-flex;position:relative}.switch input{opacity:0;position:absolute}.switch span{background:#cdd8d5;border-radius:999px;width:100%}.switch span:before{content:"";background:#fff;border-radius:999px;width:26px;height:26px;transition:transform .16s,background .16s;position:absolute;top:4px;left:4px;box-shadow:0 2px 8px #0000002e}.switch input:checked+span{background:#008b8f}.switch input:checked+span:before{transform:translate(24px)}.countdown{grid-column:1/-1}.countdown-row{grid-template-columns:110px auto 80px 80px;align-items:center;gap:10px;margin-top:10px;display:grid}.countdown-row input{color:#173633;box-sizing:border-box;background:#fff;border:1px solid #cdd8d5;border-radius:6px;width:100%;min-width:0;height:44px;padding:0 10px}.countdown-row button{min-height:44px}.countdown-row button.quiet{color:#173633;background:#fff;border:1px solid #cdd8d5}.timer{min-height:21px}.timer.expired{color:#c43f30;font-weight:800}.countdown-hint{color:#657371;margin-top:8px;font-size:13px;line-height:1.45}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #008b8f42}@media (width<=640px){.app-shell{align-items:stretch;padding:0}.metronome-panel{min-height:100svh;box-shadow:none;box-sizing:border-box;border:0;border-radius:0;padding:22px 16px}.topbar{flex-wrap:wrap;align-items:center}.topbar h1{font-size:26px}.topbar-actions{justify-content:space-between;width:100%}.language-menu{left:0;right:auto}.status{min-height:32px;padding:0 10px;font-size:13px}.tempo-control{grid-template-columns:54px minmax(0,1fr) 54px;gap:10px;margin-top:26px}.step-button{width:54px;height:54px;font-size:34px}.bpm-button,.bpm-form{min-height:132px}.bpm-form{grid-template-columns:1fr}.bpm-form button{width:100%}.primary-actions,.control-grid{grid-template-columns:1fr}.control-group{padding:14px}.segmented{grid-template-columns:repeat(2,minmax(0,1fr))}.countdown-row{grid-template-columns:minmax(0,1fr) auto}.countdown-row button{width:100%}}