:root{--m-bg: #080706;--m-elevated: #14110f;--m-surface: rgba(244, 239, 233, .03);--m-surface-raised: rgba(244, 239, 233, .055);--m-border: rgba(244, 239, 233, .08);--m-border-active: rgba(244, 239, 233, .18);--m-accent: #ff7a45;--m-accent-warm: #ffb36b;--m-accent-glow: rgba(255, 122, 69, .45);--m-accent-soft: rgba(255, 122, 69, .12);--m-jazz: #ffb36b;--m-pink: #ff7a45;--m-green: #a8c5a0;--m-text: #f4efe9;--m-text-dim: #b9aca2;--m-text-muted: rgba(185, 172, 162, .55);--m-track: rgba(244, 239, 233, .07);--m-radius: 10px;--m-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--m-mono: "SF Mono", "JetBrains Mono", "Fira Code", "Roboto Mono", monospace;--m-ease: cubic-bezier(.16, 1, .3, 1);--m-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--m-safe-bottom: env(safe-area-inset-bottom, 0px)}.metronome-wrapper *{box-sizing:border-box}body.metronome-app-mode .metronome-wrapper{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}body.metronome-settings-open .metronome-wrapper{overflow-y:auto}.metronome-wrapper{display:flex;justify-content:center;align-items:flex-start;min-height:100dvh;padding:0;background:var(--m-bg);overflow-y:auto}.metronome-app{width:100%;max-width:440px;min-height:100dvh;background:linear-gradient(168deg,#14110ff7,#080706fc);display:flex;flex-direction:column;position:relative;overflow-y:auto;padding:0;padding-bottom:var(--m-safe-bottom);touch-action:manipulation}.metro-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 20px 8px;flex-shrink:0}.metro-logo{font-family:var(--m-font);font-size:.76rem;letter-spacing:.18em;font-weight:650;margin:0;color:#ffffffbd;text-transform:uppercase;opacity:.92}.session-info{display:flex;gap:12px;font-family:var(--m-mono);font-size:.68rem;color:#ffffff8f;font-variant-numeric:tabular-nums;align-items:center;letter-spacing:.04em}.timer-badge{color:var(--m-accent);font-weight:700}.settings-toggle-btn{width:36px;height:36px;border-radius:50%;background:var(--m-surface);border:1px solid var(--m-border);color:var(--m-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s var(--m-ease);flex-shrink:0;touch-action:manipulation}.settings-toggle-btn:hover,.settings-toggle-btn.active{color:var(--m-accent);border-color:var(--m-accent);background:var(--m-accent-soft)}.settings-toggle-btn svg{transition:transform .4s var(--m-ease)}.settings-toggle-btn.active svg{transform:rotate(60deg)}.main-display{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 20px;position:relative;min-height:0}.visualizer-container{position:relative;width:clamp(180px,42vw,240px);height:clamp(180px,42vw,240px);display:flex;justify-content:center;align-items:center;flex-shrink:0}.visualizer-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2.5px solid rgba(255,255,255,.06);transition:border-color .08s,box-shadow .08s,transform .08s;will-change:transform,box-shadow}.visualizer-ring:before{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;border:1px solid rgba(255,255,255,.03)}.visualizer-ring:after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:50%;border:1px solid rgba(255,255,255,.03)}.visualizer-ring.pulse-downbeat{border-color:var(--m-accent);box-shadow:0 0 40px var(--m-accent-glow),0 0 80px #ff7a4526,inset 0 0 40px #ff7a4514;transform:scale(1.025)}.visualizer-ring.pulse-beat{border-color:#ffffff40;box-shadow:inset 0 0 20px #ffffff0a;transform:scale(1.008)}.visualizer-ring.pulse-jazz{border-color:var(--m-jazz);box-shadow:0 0 50px #fbbf2466,inset 0 0 40px #fbbf240f;transform:scale(1.035)}.visualizer-ring.pulse-accent{border-color:var(--m-accent-warm);box-shadow:0 0 40px #ffb36b66,inset 0 0 30px #ffb36b0f;transform:scale(1.02)}.center-controls{text-align:center;z-index:2;-webkit-user-select:none;user-select:none}.bpm-value{font-family:var(--m-font);font-size:clamp(4rem,14vw,5.5rem);font-weight:800;color:var(--m-text);line-height:1;letter-spacing:-4px;font-variant-numeric:tabular-nums;text-shadow:0 0 60px rgba(255,255,255,.06);transition:color .15s}.bpm-label{font-family:var(--m-mono);font-size:.55rem;color:var(--m-text-muted);letter-spacing:6px;margin-top:2px;font-weight:600;text-transform:uppercase}.bpm-value[contenteditable]{cursor:text;outline:none;caret-color:var(--m-accent);border-radius:8px;padding:0 6px;transition:background .2s var(--m-ease);-webkit-user-select:text;user-select:text}.bpm-value[contenteditable]:focus{background:#ff7a450f;outline:2px solid rgba(255,122,69,.35);outline-offset:2px}.jazz-sax-icon{position:absolute;bottom:-10px;right:0;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px 0 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#0c0a08d1;color:#ffffff73;opacity:0;pointer-events:none;transition:all .25s var(--m-ease);cursor:pointer;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);appearance:none;-webkit-appearance:none;font:inherit}.jazz-sax-icon svg{width:16px;height:16px}.jazz-sax-icon__label{font-family:var(--m-mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;line-height:1;opacity:.92}.jazz-sax-icon.visible{opacity:.72;pointer-events:auto}.jazz-sax-icon.visible:hover{opacity:.95;color:#ffffffe6;border-color:#ffffff38;transform:translateY(-1px)}.jazz-sax-icon.active{color:var(--m-jazz);opacity:1!important;pointer-events:auto;border-color:#fbbf2466;background:linear-gradient(135deg,#fbbf2433,#fbbf241a);box-shadow:0 0 24px #fbbf2433,inset 0 1px #ffffff29;transform:translateY(-2px)}.jazz-sax-icon.active:hover{box-shadow:0 0 30px #fbbf244d,inset 0 1px #ffffff38}.jazz-sax-icon:focus-visible{outline:2px solid rgba(251,191,36,.8);outline-offset:2px}.beat-dots-row{display:flex;justify-content:center;align-items:center;gap:10px;padding:10px 0 6px;flex-shrink:0}.beat-dot{width:9px;height:9px;border-radius:50%;background:#ffffff1a;transition:all .1s var(--m-ease-bounce);will-change:transform}.beat-dot.active{transform:scale(1.8);background:var(--m-text);box-shadow:0 0 14px #ffffffb3}.beat-dot.accent{background:var(--m-accent);box-shadow:0 0 18px var(--m-accent-glow),0 0 4px var(--m-accent);transform:scale(2.2)}.presets-container{width:100%;padding:4px 0 2px;flex-shrink:0}.presets-row{display:flex;gap:5px;justify-content:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 4px}.presets-row::-webkit-scrollbar{display:none}.preset-btn{padding:5px 12px;border-radius:100px;background:var(--m-surface);border:1px solid var(--m-border);color:var(--m-text-dim);font-family:var(--m-font);font-size:.62rem;cursor:pointer;transition:all .25s var(--m-ease);font-weight:600;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;flex-shrink:0;touch-action:manipulation}.preset-btn:hover{background:var(--m-surface-raised);color:var(--m-text);border-color:var(--m-border-active)}.preset-btn.active{background:var(--m-accent);border-color:transparent;color:#000;font-weight:700;box-shadow:0 4px 20px var(--m-accent-glow)}.bottom-dock{flex-shrink:0;padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}.bpm-control-row{display:flex;align-items:center;gap:10px}.slider-wrapper{flex:1;height:36px;display:flex;align-items:center}.metro-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--m-track);border-radius:3px;outline:none;transition:height .15s}.metro-slider:hover{height:8px}.metro-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:var(--m-text);border-radius:50%;cursor:pointer;box-shadow:0 2px 12px #00000080,0 0 0 2px #ffffff14;transition:transform .15s var(--m-ease-bounce),box-shadow .15s}.metro-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 2px 16px #0009,0 0 0 4px var(--m-accent-soft)}.metro-slider::-moz-range-thumb{width:24px;height:24px;background:var(--m-text);border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 12px #00000080}.fine-btn{width:38px;height:38px;border-radius:12px;background:var(--m-surface);border:1px solid var(--m-border);color:var(--m-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--m-ease);font-size:1.2rem;font-weight:300;flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.fine-btn:hover{background:var(--m-surface-raised);color:var(--m-text);border-color:var(--m-border-active)}.fine-btn:active{transform:scale(.9);background:var(--m-accent);color:#000;border-color:transparent}.primary-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:4px 0}.time-sig-control{display:flex;align-items:center;justify-content:center;gap:4px;background:var(--m-surface);padding:6px 10px;border-radius:100px;border:1px solid var(--m-border)}.time-sig-display{font-family:var(--m-mono);font-size:1rem;font-weight:700;color:var(--m-text);min-width:28px;text-align:center}.sig-divider{opacity:.3}.metro-btn{border:none;cursor:pointer;transition:all .2s var(--m-ease);font-family:var(--m-font);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.play-btn{width:72px;height:72px;border-radius:50%;background:linear-gradient(160deg,#ffffff1a,#ffffff08);border:1.5px solid rgba(255,255,255,.12);color:#fff;box-shadow:0 8px 32px #0006,inset 0 1px #ffffff1a;display:flex;align-items:center;justify-content:center;flex-shrink:0}.play-btn:hover{transform:scale(1.05);border-color:#fff3}.play-btn:active{transform:scale(.96)}.play-btn.active{background:linear-gradient(160deg,var(--m-accent),#e05a28);border-color:#ffc8964d;color:#000;box-shadow:0 0 26px var(--m-accent-glow),0 8px 24px #ff7a453d,inset 0 1px #ffffff4d;animation:playPulse 1.5s ease-in-out infinite}@keyframes playPulse{0%,to{box-shadow:0 0 26px var(--m-accent-glow),0 8px 24px #ff7a453d}50%{box-shadow:0 0 36px var(--m-accent-glow),0 8px 32px #ff7a454d}}.secondary-btn{background:var(--m-surface);color:var(--m-text-dim);padding:12px 20px;border-radius:100px;border:1px solid var(--m-border);font-size:.72rem;letter-spacing:1.5px;font-weight:700;text-transform:uppercase;-webkit-tap-highlight-color:transparent}.secondary-btn:hover{color:var(--m-text);background:var(--m-surface-raised);border-color:var(--m-border-active)}.secondary-btn:active{transform:scale(.95);background:var(--m-accent);color:#000;border-color:transparent}.master-volume-row{display:flex;align-items:center;gap:10px;padding:0 4px}.master-volume-row .slider-wrapper{flex:1}.mixer-strip{display:flex;gap:6px;justify-content:center;padding:4px 0;flex-shrink:0}.mixer-chip{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:44px}.mixer-chip-label{font-family:var(--m-mono);font-size:.5rem;color:var(--m-text-muted);font-weight:700;letter-spacing:.5px;text-transform:uppercase}.mixer-chip-knob{width:40px;height:40px;border-radius:50%;background:var(--m-surface);border:2px solid var(--m-border);display:flex;align-items:center;justify-content:center;font-family:var(--m-mono);font-size:.6rem;font-weight:700;color:var(--m-text-dim);cursor:pointer;transition:all .2s var(--m-ease);position:relative;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.mixer-chip-knob.active{border-color:var(--m-accent);color:var(--m-accent);background:var(--m-accent-soft);box-shadow:0 0 12px var(--m-accent-glow)}.mixer-chip-knob:active{transform:scale(.92)}.subdiv-grid-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0;flex-shrink:0;display:none}.subdiv-grid-container::-webkit-scrollbar{display:none}.subdiv-grid{display:flex;gap:4px;justify-content:center;min-width:fit-content}.grid-beat-col{display:flex;flex-direction:column;gap:3px;align-items:center}.grid-cell{width:30px;height:24px;border-radius:6px;background:var(--m-surface);border:1px solid rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-family:var(--m-mono);font-size:.55rem;font-weight:700;color:var(--m-text-muted);transition:all .08s}.grid-cell[data-sub="0"]{background:var(--m-surface-raised);color:var(--m-text-dim);border-color:#ffffff0f}.grid-cell.lit{background:var(--m-accent);color:#000;box-shadow:0 0 10px var(--m-accent-glow);transform:scale(1.08);border-color:transparent}.settings-drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:999;opacity:0;pointer-events:none;transition:opacity .35s var(--m-ease);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.settings-drawer-overlay.open{opacity:1;pointer-events:auto}.settings-drawer{position:fixed;bottom:0;left:0;right:0;max-height:85dvh;background:linear-gradient(168deg,#120f0cfa,#080706fc);border-top:1px solid rgba(255,255,255,.08);border-radius:24px 24px 0 0;z-index:1000;transform:translateY(100%);transition:transform .45s var(--m-ease);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -20px 60px #0009;padding-bottom:var(--m-safe-bottom)}.settings-drawer.open{transform:translateY(0)}.settings-drawer-handle{width:36px;height:4px;background:#fff3;border-radius:2px;margin:12px auto 8px;flex-shrink:0}.settings-drawer-header{display:flex;justify-content:space-between;align-items:center;padding:4px 20px 14px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05)}.settings-drawer-title{font-family:var(--m-font);font-size:1rem;font-weight:700;color:var(--m-text);margin:0}.settings-close-btn{width:32px;height:32px;border-radius:50%;background:var(--m-surface);border:1px solid var(--m-border);color:var(--m-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .2s;touch-action:manipulation}.settings-close-btn:hover{color:var(--m-text);background:var(--m-surface-raised)}.settings-drawer-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 20px 24px}.secondary-panel{background:transparent;border-radius:0;padding:0;border:none}.panel-tabs{display:flex;gap:2px;margin-bottom:18px;background:#0000004d;padding:3px;border-radius:14px;width:100%;position:sticky;top:-16px;z-index:5}.tab-btn{flex:1;background:none;border:none;color:var(--m-text-dim);font-family:var(--m-font);font-size:.72rem;padding:9px 6px;border-radius:11px;cursor:pointer;transition:all .25s var(--m-ease);font-weight:600;text-align:center;letter-spacing:.3px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.tab-btn.active{background:#ffffff1a;color:var(--m-text);box-shadow:0 2px 8px #0003}.tab-btn:hover:not(.active){color:#ffffffa6}.tab-content{display:none;animation:tabReveal .35s var(--m-ease)}.tab-content.active{display:block}@keyframes tabReveal{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.mixer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;height:auto}.mixer-channel{display:flex;flex-direction:column;align-items:center;background:#0003;border-radius:14px;padding:10px 0 6px;border:1px solid rgba(255,255,255,.03);transition:border-color .2s}.mixer-channel:hover{border-color:#ffffff14}.track-label{font-family:var(--m-mono);font-size:.6rem;color:var(--m-text-dim);margin-bottom:8px;font-weight:700;letter-spacing:.5px}.vertical-fader{-webkit-appearance:none;appearance:none;width:90px;height:28px;background:transparent;transform:rotate(-90deg);margin-top:30px;margin-bottom:30px}.vertical-fader::-webkit-slider-runnable-track{width:100%;height:4px;background:linear-gradient(90deg,var(--m-track),var(--m-track));border-radius:2px}.vertical-fader::-webkit-slider-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;background:var(--m-text-dim);margin-top:-7px;box-shadow:0 0 8px #00000080;transition:all .15s}.vertical-fader:hover::-webkit-slider-thumb{background:var(--m-text);box-shadow:0 0 12px #0009,0 0 0 3px var(--m-accent-soft)}.pattern-section{margin-bottom:16px}.pattern-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);margin:18px 0}.clave-visual-container{margin-top:14px;padding:14px;background:#0003;border-radius:14px;border:1px solid rgba(255,255,255,.04)}.clave-cycle-label{font-family:var(--m-mono);font-size:.6rem;font-weight:700;color:var(--m-text-dim);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;text-align:center}.clave-visual{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.clave-slot{width:26px;height:26px;border-radius:6px;background:var(--m-surface);border:1px solid rgba(255,255,255,.06);transition:all .12s var(--m-ease-bounce)}.clave-slot.hit{background:var(--m-accent);border-color:#ff7a4580;box-shadow:0 0 10px var(--m-accent-glow)}.clave-slot.pulse{transform:scale(1.35);box-shadow:0 0 20px var(--m-accent-glow)}.accent-grid-container{margin-top:12px}.accent-grid{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.accent-cell{width:40px;height:40px;border-radius:10px;background:var(--m-surface);border:1px solid var(--m-border);color:var(--m-text-dim);font-family:var(--m-mono);font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s var(--m-ease);display:flex;align-items:center;justify-content:center}.accent-cell:hover{background:var(--m-surface-raised);color:var(--m-text);border-color:var(--m-border-active)}.accent-cell.active{background:var(--m-accent);border-color:#ff7a4580;color:#000;box-shadow:0 0 16px var(--m-accent-glow)}.trainer-field{margin-bottom:16px}.trainer-field label{display:flex;justify-content:space-between;color:var(--m-text-dim);font-size:.78rem;margin-bottom:8px;font-weight:500}.trainer-progress-container{margin-top:20px;text-align:center}.trainer-progress-bar{width:100%;height:6px;background:var(--m-track);border-radius:3px;overflow:hidden}.trainer-progress-fill{height:100%;background:linear-gradient(90deg,var(--m-accent),var(--m-jazz));border-radius:3px;transition:width .5s var(--m-ease)}.trainer-bpm-label{margin-top:10px;font-family:var(--m-mono);font-size:.7rem;font-weight:700;color:var(--m-accent);letter-spacing:1.5px;text-transform:uppercase}.stats-section{margin-top:10px}.stats-heading{font-family:var(--m-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:2.5px;color:var(--m-text-muted);margin-bottom:14px;font-weight:700}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.stat-card{background:#0003;border:1px solid rgba(255,255,255,.04);border-radius:14px;padding:14px 10px;text-align:center}.stat-value{font-family:var(--m-mono);font-size:1.15rem;font-weight:800;color:var(--m-text);font-variant-numeric:tabular-nums}.stat-label{font-size:.55rem;color:var(--m-text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px;font-weight:600}.setting-group{margin-bottom:20px}.setting-group label{display:flex;justify-content:space-between;color:var(--m-text-dim);font-size:.82rem;margin-bottom:8px;font-weight:500}.value-highlight{color:var(--m-accent);font-weight:700;font-family:var(--m-mono)}.slider-labels{display:flex;justify-content:space-between;font-size:.65rem;color:var(--m-text-muted);margin-top:8px;font-weight:500}.humanize-slider::-webkit-slider-thumb{background:var(--m-accent)!important}.setting-row-group{display:flex;flex-direction:column;gap:18px}.setting-row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--m-text);font-weight:500}.switch,.toggle-switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}.switch input,.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background-color:var(--m-track);transition:background-color .3s var(--m-ease);border-radius:26px}.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:#ffffff80;transition:transform .3s var(--m-ease-bounce),background-color .3s;border-radius:50%}input:checked+.slider{background-color:var(--m-accent)}input:checked+.slider:before{transform:translate(20px);background-color:#fff}.setting-item{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--m-text);font-weight:500;margin-bottom:14px;gap:12px}.setting-item label:first-child{flex:1;margin-bottom:0}.full-width{width:100%}.metro-select{background:#0000004d;border:1px solid var(--m-border);color:var(--m-text);padding:10px 14px;border-radius:12px;outline:none;font-family:var(--m-font);font-size:.8rem;transition:border-color .2s;cursor:pointer;width:100%}.metro-select:focus{border-color:var(--m-accent)}.shortcuts-info{margin-top:22px;padding:16px;background:#0003;border-radius:14px;border:1px solid rgba(255,255,255,.04)}.shortcuts-heading{font-family:var(--m-mono);font-size:.55rem;text-transform:uppercase;letter-spacing:2.5px;color:var(--m-text-muted);margin-bottom:12px;font-weight:700}.shortcut-row{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--m-text-dim);margin-bottom:6px;font-weight:500}.shortcut-row kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;background:#ffffff12;border:1px solid rgba(255,255,255,.1);border-radius:6px;font-family:var(--m-mono);font-size:.65rem;font-weight:600;color:var(--m-text);box-shadow:0 2px #0000004d}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:480px){.metronome-app{border-radius:0}.visualizer-container{width:clamp(160px,38vw,200px);height:clamp(160px,38vw,200px)}.bpm-value{font-size:clamp(3.5rem,12vw,4.5rem);letter-spacing:-3px}.play-btn{width:64px;height:64px}.mixer-grid{gap:3px;height:150px}.mixer-channel{border-radius:10px}.vertical-fader{width:80px;margin-top:26px;margin-bottom:26px}.tab-btn{font-size:.64rem;padding:8px 4px}.grid-cell{width:24px;height:20px;font-size:.5rem;border-radius:4px}.clave-slot{width:22px;height:22px}.accent-cell{width:36px;height:36px;font-size:.72rem}.preset-btn{padding:5px 10px;font-size:.58rem}.stat-card{padding:10px 6px;border-radius:10px}.stat-value{font-size:1rem}.stat-label{font-size:.5rem}.fine-btn{width:34px;height:34px;border-radius:10px;font-size:1rem}.settings-drawer{max-height:80dvh}}@media(max-width:360px){.bpm-value{font-size:3.2rem}.visualizer-container{width:150px;height:150px}.play-btn{width:58px;height:58px}.mixer-grid{grid-template-columns:repeat(3,1fr);height:auto;gap:6px}.mixer-channel{padding:8px 0}.vertical-fader{width:70px;margin-top:20px;margin-bottom:20px}}@media(min-width:481px){.metronome-wrapper{align-items:center;padding:24px 16px}.metronome-app{min-height:auto;max-height:92dvh;border-radius:var(--m-radius);border:1px solid var(--m-border);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);box-shadow:0 40px 80px -12px #000000b3,0 0 0 1px #ffffff0a inset,0 1px #ffffff0f inset;padding-bottom:0}.metronome-app:before{content:"";position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}.settings-drawer{max-width:440px;left:50%;transform:translate(-50%) translateY(100%);border-radius:24px 24px 0 0}.settings-drawer.open{transform:translate(-50%) translateY(0)}.bottom-dock{padding-bottom:20px}}@media(min-height:750px)and (max-width:480px){.main-display{padding-top:8px;padding-bottom:8px}}@media(max-height:650px)and (max-width:480px){.visualizer-container{width:140px;height:140px}.bpm-value{font-size:3rem}.presets-container{display:none}.beat-dots-row{padding:4px 0}.metro-header{padding:8px 16px 4px}.bottom-dock{padding:0 12px 10px;gap:8px}}.subdiv-selector{display:flex;justify-content:center;align-items:center;gap:8px;padding:4px 16px;flex-shrink:0}.subdiv-cell{width:42px;height:42px;border-radius:50%;background:var(--m-surface);border:2px solid var(--m-border);color:var(--m-text-muted);font-family:var(--m-mono);font-size:1rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .16s var(--m-ease),box-shadow .2s var(--m-ease),border-color .2s var(--m-ease),background-color .2s var(--m-ease),color .2s var(--m-ease);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;position:relative;touch-action:manipulation;box-shadow:inset 0 1px #ffffff0f}.subdiv-cell:active{transform:scale(.88)}.subdiv-cell.has-subdiv{border-color:var(--subdiv-color, var(--m-accent));color:var(--subdiv-color, var(--m-accent));background:color-mix(in srgb,var(--subdiv-color, var(--m-accent)) 12%,rgba(12,14,20,.95));box-shadow:0 0 16px color-mix(in srgb,var(--subdiv-color, var(--m-accent)) 24%,transparent),inset 0 1px #ffffff1f}.subdiv-cell.playing{transform:translateY(-1px) scale(1.08);box-shadow:0 0 20px color-mix(in srgb,var(--subdiv-color, var(--m-text)) 30%,transparent)}.subdiv-cell.has-subdiv.playing{box-shadow:0 0 24px color-mix(in srgb,var(--subdiv-color, var(--m-accent)) 38%,transparent),inset 0 1px #ffffff29}.subdiv-legend{display:flex;justify-content:center;align-items:center;gap:6px;padding:0 16px 4px;flex-wrap:wrap;min-height:20px;flex-shrink:0}.subdiv-legend-item{font-family:var(--m-mono);font-size:.55rem;color:var(--m-text-muted);letter-spacing:1px;text-transform:uppercase}.subdiv-legend-chip{font-family:var(--m-font);font-size:.6rem;font-weight:600;color:var(--chip-color, var(--m-text-dim));background:color-mix(in srgb,var(--chip-color, var(--m-accent)) 12%,rgba(16,18,26,.9));border:1px solid color-mix(in srgb,var(--chip-color, var(--m-accent)) 28%,transparent);padding:3px 9px;border-radius:100px;letter-spacing:.5px}.mixer-hint{font-size:.72rem;color:var(--m-text-muted);margin:0 0 14px;line-height:1.5;font-weight:400}@media(max-width:480px){.subdiv-cell{width:36px;height:36px;font-size:.85rem}.subdiv-selector{gap:6px;padding:2px 12px}}@media(max-width:360px){.subdiv-cell{width:32px;height:32px;font-size:.78rem}.subdiv-selector{gap:4px}}@media(max-height:650px)and (max-width:480px){.subdiv-cell{width:30px;height:30px;font-size:.72rem;border-width:1.5px}.subdiv-selector{gap:4px;padding:2px 8px}.subdiv-legend{display:none}}@media(max-width:440px){.mixer-grid{grid-template-columns:repeat(4,1fr);height:auto;gap:4px}.mixer-channel{padding:8px 0 4px}.vertical-fader{width:70px;margin-top:22px;margin-bottom:22px}}.settings-drawer-body::-webkit-scrollbar{width:4px}.settings-drawer-body::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.play-btn:focus-visible,.fine-btn:focus-visible,.tab-btn:focus-visible,.preset-btn:focus-visible,.accent-cell:focus-visible,.secondary-btn:focus-visible,.settings-toggle-btn:focus-visible,.settings-close-btn:focus-visible,.mixer-chip-knob:focus-visible,.subdiv-cell:focus-visible{outline:2px solid var(--m-accent);outline-offset:2px}@media(max-width:600px){.tool-how-to-use{display:none}}.tempo-marking{font-family:var(--m-font);font-size:.7rem;font-weight:600;color:var(--m-text-muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px;transition:color .3s ease}.screen-flash-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#ff7a450f;pointer-events:none;z-index:9999;opacity:0;transition:opacity .08s ease}.screen-flash-overlay.flash{opacity:1}.ios-audio-unlock{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;z-index:10000;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.ios-unlock-btn{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--m-surface-raised);border:1px solid var(--m-border);padding:32px 48px;border-radius:var(--m-radius);color:var(--m-text);cursor:pointer;font-family:var(--m-font);font-size:.9rem;font-weight:600;transition:all .2s var(--m-ease)}.ios-unlock-btn:active{transform:scale(.95);background:var(--m-accent-soft)}.count-in-badge{position:absolute;top:-6px;right:-6px;background:var(--m-accent);color:#000;font-family:var(--m-mono);font-size:.55rem;font-weight:900;padding:2px 5px;border-radius:8px;letter-spacing:.5px;min-width:18px;text-align:center;line-height:1.2;z-index:5;pointer-events:none;animation:countInPulse .6s infinite alternate}@keyframes countInPulse{0%{transform:scale(1)}to{transform:scale(1.15)}}.practice-status{font-family:var(--m-mono);font-size:.75rem;color:var(--m-green);text-align:center;padding:8px 0;margin-top:8px;border-radius:8px;background:color-mix(in srgb,var(--m-green) 10%,transparent);border:1px solid color-mix(in srgb,var(--m-green) 22%,transparent);transition:all .3s var(--m-ease)}.practice-status.muted{color:var(--m-accent);background:#ff7a4514;border-color:#ff7a4526}.metronome-app.practice-muted .main-display{opacity:.4;transition:opacity .3s var(--m-ease)}.metronome-app.practice-muted .visualizer-ring{box-shadow:0 0 0 2px #ff7a454d!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.swing-slider::-webkit-slider-thumb{background:var(--m-accent)!important}.swing-slider::-moz-range-thumb{background:var(--m-accent)!important}.poly-controls{background:var(--m-surface-raised);padding:12px;border-radius:8px;border:1px solid var(--m-border)}.poly-ratio-display{display:flex;justify-content:center;align-items:center;font-family:var(--m-mono);font-size:1.8rem;font-weight:700;color:var(--m-accent);margin-bottom:12px}.poly-sep{color:var(--m-text-muted);margin:0 12px}.presets-list{display:flex;flex-direction:column;gap:8px;margin-top:16px;max-height:400px;overflow-y:auto}.preset-item{display:flex;justify-content:space-between;align-items:center;background:var(--m-surface-raised);padding:12px;border-radius:6px;border:1px solid var(--m-border);cursor:pointer;transition:all .2s ease}.preset-item:hover{border-color:var(--m-accent);background:var(--m-surface)}.preset-info{display:flex;flex-direction:column;gap:2px}.preset-name{font-weight:600;color:var(--m-text)}.preset-meta{font-size:.75rem;color:var(--m-text-muted)}.preset-delete{background:transparent;border:none;color:var(--m-text-muted);font-size:1.2rem;padding:4px 8px;cursor:pointer}.preset-delete:hover{color:var(--m-accent)}.new-preset-box{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--m-border)}#newPresetName{background:var(--m-surface);border:1px solid var(--m-border);color:var(--m-text);padding:10px;border-radius:6px;font-family:var(--m-font)}.bouncing-ball-canvas{position:fixed;bottom:20px;left:50%;transform:translate(-50%);width:300px;height:100px;pointer-events:none;z-index:9998;display:none}.export-modal{position:fixed;top:50%;left:50%;width:90%;max-width:400px;transform:translate(-50%,-48%);background:linear-gradient(168deg,#120f0cfa,#080706fc);border:1px solid rgba(255,255,255,.1);border-radius:16px;z-index:1001;opacity:0;pointer-events:none;transition:opacity .25s var(--m-ease),transform .25s var(--m-ease);box-shadow:0 24px 64px #000000b3}.export-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}#exportStatus{text-align:center;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@media(prefers-reduced-motion:reduce){.visualizer-ring,.beat-dot,.subdiv-cell,.play-btn,.settings-drawer,.settings-drawer-overlay,.tab-content{transition-duration:.01ms!important;animation:none!important}}
/*# sourceMappingURL=/cdn/shop/t/342/assets/metronome.css.map */