:root{--m-bg: #0c0b0a;--m-elevated: #16130f;--m-surface: rgba(236, 226, 207, .03);--m-surface-raised: rgba(236, 226, 207, .06);--m-border: rgba(236, 226, 207, .14);--m-border-active: rgba(236, 226, 207, .28);--m-accent: #e35728;--m-accent-bright: #f08152;--m-accent-soft: rgba(227, 87, 40, .12);--m-ink: #1c1714;--m-text: #ece2cf;--m-text-dim: #9a8c78;--m-text-muted: var(--fl-muted, #9a9385);--m-track: rgba(236, 226, 207, .14);--m-radius: 0;--m-font: var(--fl-body, "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);--m-display: var(--fl-display, "Fraunces", Georgia, serif);--m-mono: var(--fl-mono, "Space Mono", "SF Mono", monospace);--m-ease: cubic-bezier(.2, .6, .2, 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:block;min-height:100dvh;padding:clamp(20px,4vw,48px) clamp(20px,5vw,48px);background:var(--m-bg);background-image:radial-gradient(rgba(236,226,207,.05) 1px,transparent 1.4px);background-size:22px 22px;overflow-y:auto}.metronome-app{width:100%;max-width:1320px;margin:0 auto;background:var(--m-elevated);border:1px solid var(--m-border);border-radius:var(--m-radius);display:flex;flex-direction:column;position:relative;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:20px 24px;border-bottom:1px solid var(--m-border);flex-shrink:0}.metro-logo{font-family:Archivo,Helvetica Neue,sans-serif!important;font-size:1.6rem!important;letter-spacing:-.02em;font-weight:800;font-style:italic;text-transform:uppercase;margin:0;color:var(--m-text)}.session-info{display:flex;gap:12px;font-family:var(--m-mono);font-size:.7rem;color:var(--m-text-muted);font-variant-numeric:tabular-nums;align-items:center;letter-spacing:.04em}.timer-badge{color:var(--m-text-muted);font-weight:700}.settings-toggle-btn{width:34px;height:34px;border-radius:0;background:transparent;border:1px solid var(--m-border);color:var(--m-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s var(--m-ease),color .15s var(--m-ease);flex-shrink:0;touch-action:manipulation}.settings-toggle-btn:hover,.settings-toggle-btn.active{color:var(--m-text);border-color:var(--m-border-active)}.settings-toggle-btn svg{transition:transform .3s var(--m-ease)}.settings-toggle-btn.active svg{transform:rotate(45deg)}.main-display{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:clamp(28px,5vw,56px) 20px;position:relative;min-height:0;border-bottom:1px solid var(--m-border)}.visualizer-container{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;flex-shrink:0}.visualizer-ring{position:absolute;width:0;height:0;inset:auto;pointer-events:none;opacity:0}.center-controls{text-align:center;z-index:2;-webkit-user-select:none;user-select:none}.bpm-value{font-family:var(--m-mono);font-size:clamp(4rem,9vw,6.5rem);font-weight:700;color:var(--m-text);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:color .15s}.bpm-label{font-family:var(--m-mono);font-size:.62rem;color:var(--m-text-muted);letter-spacing:.28em;margin-top:6px;font-weight:700;text-transform:uppercase}.tempo-marking{font-family:var(--m-mono);font-size:.62rem;font-weight:700;color:var(--m-text-dim);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}.bpm-value[contenteditable]{cursor:text;outline:none;caret-color:var(--m-accent);border-radius:0;padding:0 6px;transition:background .15s var(--m-ease);-webkit-user-select:text;user-select:text}.bpm-value[contenteditable]:focus{background:var(--m-accent-soft);outline:1px solid var(--m-accent);outline-offset:2px}.beat-dots-row{display:flex;justify-content:center;align-items:center;gap:8px;padding:20px 0 4px;flex-shrink:0}.beat-dot{width:12px;height:12px;border-radius:0;background:transparent;border:1px solid var(--m-border);transition:background-color .08s,border-color .08s,transform .08s;will-change:transform}.beat-dot.active{background:var(--m-text);border-color:var(--m-text);transform:scale(1.15)}.beat-dot.accent{background:var(--m-accent);border-color:var(--m-accent);transform:scale(1.35)}.subdiv-selector{display:flex;justify-content:center;align-items:center;gap:8px;padding:4px 16px;flex-shrink:0}.subdiv-cell{width:38px;height:38px;border-radius:0;background:transparent;border:1px solid var(--m-border);color:var(--m-text-muted);font-family:var(--m-mono);font-size:.9rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s var(--m-ease),border-color .15s var(--m-ease),background-color .15s var(--m-ease),color .15s var(--m-ease);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;position:relative;touch-action:manipulation}.subdiv-cell:active{transform:scale(.92)}.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)) 10%,transparent)}.subdiv-cell.playing{background:var(--m-text);border-color:var(--m-text);color:var(--m-ink)}.subdiv-cell.has-subdiv.playing{background:var(--subdiv-color, var(--m-accent));border-color:var(--subdiv-color, var(--m-accent));color:var(--m-ink)}.subdiv-legend{display:flex;justify-content:center;align-items:center;gap:6px;padding:8px 16px 0;flex-wrap:wrap;min-height:20px;flex-shrink:0}.subdiv-legend-item{font-family:var(--m-mono);font-size:.58rem;color:var(--m-text-muted);letter-spacing:.06em;text-transform:uppercase}.subdiv-legend-chip{font-family:var(--m-mono);font-size:.58rem;font-weight:700;color:var(--chip-color, var(--m-text-dim));background:color-mix(in srgb,var(--chip-color, var(--m-accent)) 10%,transparent);border:1px solid color-mix(in srgb,var(--chip-color, var(--m-accent)) 32%,transparent);padding:3px 8px;border-radius:0;letter-spacing:.04em;text-transform:uppercase}.jazz-sax-icon{position:static;margin-top:16px;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:0;border:1px solid var(--m-border);background:transparent;color:var(--m-text-muted);opacity:.5;pointer-events:none;transition:border-color .15s var(--m-ease),color .15s var(--m-ease),opacity .15s var(--m-ease);cursor:pointer;appearance:none;-webkit-appearance:none;font:inherit}.jazz-sax-icon svg{width:15px;height:15px}.jazz-sax-icon__label{font-family:var(--m-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;line-height:1}.jazz-sax-icon.visible{opacity:.72;pointer-events:auto}.jazz-sax-icon.visible:hover{opacity:1;color:var(--m-text);border-color:var(--m-border-active)}.jazz-sax-icon.active{color:var(--m-ink);background:var(--m-text);border-color:var(--m-text);opacity:1!important;pointer-events:auto}.jazz-sax-icon.active:hover{background:var(--m-accent-bright);border-color:var(--m-accent-bright);color:var(--m-ink)}.jazz-sax-icon:focus-visible{outline:2px solid var(--m-accent);outline-offset:2px}.presets-container{width:100%;padding:0;border-bottom:1px solid var(--m-border);flex-shrink:0}.presets-row{display:flex;gap:0;justify-content:stretch;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.presets-row::-webkit-scrollbar{display:none}.preset-btn{flex:1;padding:14px 12px;border-radius:0;background:transparent;border:none;border-right:1px solid var(--m-border);color:var(--m-text-dim);font-family:var(--m-mono);font-size:.66rem;cursor:pointer;transition:background-color .15s var(--m-ease),color .15s var(--m-ease);font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;flex-shrink:0;touch-action:manipulation}.preset-btn:last-child{border-right:none}.preset-btn:hover{background:var(--m-surface-raised);color:var(--m-text)}.preset-btn.active{background:var(--m-text);color:var(--m-ink);font-weight:700}.bottom-dock{flex-shrink:0;padding:20px 24px;display:flex;flex-direction:column;gap:16px}.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:2px;background:var(--m-track);border-radius:0;outline:none}.metro-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:20px;background:var(--m-text);border-radius:0;cursor:pointer;transition:background-color .15s}.metro-slider::-webkit-slider-thumb:hover{background:var(--m-accent-bright)}.metro-slider::-moz-range-thumb{width:16px;height:20px;background:var(--m-text);border:none;border-radius:0;cursor:pointer}.metro-slider::-moz-range-track{height:2px;background:var(--m-track);border-radius:0}.fine-btn{width:36px;height:36px;border-radius:0;background:transparent;border:1px solid var(--m-border);color:var(--m-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s var(--m-ease),color .15s var(--m-ease),background-color .15s var(--m-ease);font-family:var(--m-mono);font-size:1.1rem;font-weight:400;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{background:var(--m-accent);color:var(--m-ink);border-color:var(--m-accent)}.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:0;border:1px solid var(--m-border)}.time-sig-control .fine-btn{border:none;border-right:1px solid var(--m-border)}.time-sig-control .fine-btn:last-child{border-right:none;border-left:1px solid var(--m-border)}.time-sig-display{font-family:var(--m-mono);font-size:.95rem;font-weight:700;color:var(--m-text);min-width:32px;text-align:center;padding:0 6px}.sig-divider{opacity:.4}.metro-btn{border:none;cursor:pointer;transition:all .15s var(--m-ease);font-family:var(--m-mono);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.play-btn{width:72px;height:72px;border-radius:0;background:var(--m-accent);border:1px solid var(--m-accent);color:var(--m-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;transform:rotate(-1deg);position:relative}.play-btn:hover{background:var(--m-accent-bright);border-color:var(--m-accent-bright);transform:rotate(0) translateY(-1px)}.play-btn:active{transform:rotate(0) scale(.96)}.play-btn.active{background:var(--m-text);border-color:var(--m-text);color:var(--m-ink);transform:rotate(0)}.play-btn.active:hover{background:var(--m-accent-bright);border-color:var(--m-accent-bright)}.secondary-btn{background:transparent;color:var(--m-text-dim);padding:12px 20px;border-radius:0;border:1px solid var(--m-border);font-size:.7rem;letter-spacing:.1em;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{background:var(--m-text);color:var(--m-ink);border-color:var(--m-text)}.master-volume-row{display:flex;align-items:center;gap:10px;padding:0 2px}.master-volume-row .slider-wrapper{flex:1}.master-vol-label{font-size:.68rem;color:var(--m-text-muted);min-width:32px;text-align:right;font-family:var(--m-mono);font-variant-numeric:tabular-nums}.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:0;background:transparent;border:1px solid var(--m-border);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:var(--m-border-active)}.grid-cell.lit{background:var(--m-accent);color:var(--m-ink);border-color:var(--m-accent)}.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 .25s var(--m-ease)}.settings-drawer-overlay.open{opacity:1;pointer-events:auto}#settingsOverlay{z-index:10090}#settingsDrawer{z-index:10091}#presetsOverlay,#exportOverlay{z-index:10092}#presetsDrawer,#exportModal{z-index:10093}.settings-drawer{position:fixed;bottom:0;left:0;right:0;max-height:85dvh;background:var(--m-elevated);border-top:1px solid var(--m-border);border-radius:0;z-index:1000;transform:translateY(100%);transition:transform .35s var(--m-ease);display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--m-safe-bottom)}.settings-drawer.open{transform:translateY(0)}.settings-drawer-handle{width:32px;height:2px;background:var(--m-border-active);border-radius:0;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 var(--m-border)}.settings-drawer-title,.settings-drawer-header h3{font-family:var(--m-mono);font-size:.72rem;font-weight:700;color:var(--m-text);text-transform:uppercase;letter-spacing:.08em;margin:0}.settings-close-btn{width:30px;height:30px;border-radius:0;background:transparent;border:1px solid var(--m-border);color:var(--m-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .15s;touch-action:manipulation}.settings-close-btn:hover{color:var(--m-text);background:var(--m-surface-raised);border-color:var(--m-border-active)}.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:0;margin-bottom:18px;background:transparent;padding:0;border:1px solid var(--m-border);width:100%;position:sticky;top:-16px;z-index:5}.tab-btn{flex:1;background:transparent;border:none;border-right:1px solid var(--m-border);color:var(--m-text-dim);font-family:var(--m-mono);font-size:.66rem;padding:10px 6px;border-radius:0;cursor:pointer;transition:background-color .15s var(--m-ease),color .15s var(--m-ease);font-weight:700;text-align:center;letter-spacing:.06em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.tab-btn:last-child{border-right:none}.tab-btn.active{background:var(--m-text);color:var(--m-ink)}.tab-btn:hover:not(.active){color:var(--m-text);background:var(--m-surface-raised)}.tab-content{display:none}.tab-content.active{display:block}.mixer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;height:auto;background:var(--m-border);border:1px solid var(--m-border)}.mixer-channel{display:flex;flex-direction:column;align-items:center;background:var(--m-elevated);border-radius:0;padding:10px 0 6px;border:none}.track-label{font-family:var(--m-mono);font-size:.58rem;color:var(--m-text-dim);margin-bottom:8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.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:2px;background:var(--m-track);border-radius:0}.vertical-fader::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:0;background:var(--m-text-dim);margin-top:-7px;transition:background-color .15s}.vertical-fader:hover::-webkit-slider-thumb{background:var(--m-text)}.pattern-section{margin-bottom:16px}.pattern-divider{height:1px;background:var(--m-border);margin:18px 0}.clave-visual-container{margin-top:14px;padding:14px;background:transparent;border-radius:0;border:1px solid var(--m-border)}.clave-cycle-label{font-family:var(--m-mono);font-size:.6rem;font-weight:700;color:var(--m-text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;text-align:center}.clave-visual{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.clave-slot{width:24px;height:24px;border-radius:0;background:transparent;border:1px solid var(--m-border);transition:all .1s var(--m-ease)}.clave-slot.hit{background:var(--m-surface-raised);border-color:var(--m-border-active)}.clave-slot.pulse{background:var(--m-accent);border-color:var(--m-accent)}.accent-grid-container{margin-top:12px}.accent-grid{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.accent-cell{width:38px;height:38px;border-radius:0;background:transparent;border:1px solid var(--m-border);color:var(--m-text-dim);font-family:var(--m-mono);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .12s 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:var(--m-accent);color:var(--m-ink)}.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:2px;background:var(--m-track);border-radius:0;overflow:hidden}.trainer-progress-fill{height:100%;background:var(--m-accent);border-radius:0;transition:width .4s var(--m-ease)}.trainer-bpm-label{margin-top:10px;font-family:var(--m-mono);font-size:.68rem;font-weight:700;color:var(--m-accent-bright);letter-spacing:.08em;text-transform:uppercase}.stats-section{margin-top:10px}.stats-heading{font-family:var(--m-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:var(--m-text-muted);margin-bottom:14px;font-weight:700}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--m-border);border:1px solid var(--m-border)}.stat-card{background:var(--m-elevated);border:none;border-radius:0;padding:14px 10px;text-align:center}.stat-value{font-family:var(--m-mono);font-size:1.1rem;font-weight:700;color:var(--m-text);font-variant-numeric:tabular-nums}.stat-label{font-size:.55rem;color:var(--m-text-muted);text-transform:uppercase;letter-spacing:.06em;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-bright);font-weight:700;font-family:var(--m-mono)}.slider-labels{display:flex;justify-content:space-between;font-size:.62rem;color:var(--m-text-muted);margin-top:8px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}.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:44px;height:24px;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:transparent;border:1px solid var(--m-border);transition:border-color .2s var(--m-ease);border-radius:0}.slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:var(--m-text-dim);transition:transform .2s var(--m-ease),background-color .2s;border-radius:0}input:checked+.slider{border-color:var(--m-accent)}input:checked+.slider:before{transform:translate(20px);background-color:var(--m-accent)}.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%}.export-bars-input{width:60px;background:transparent;border:1px solid var(--m-border);color:var(--m-text);padding:6px 8px;border-radius:0;font-family:var(--m-mono)}.metro-select{background:transparent;border:1px solid var(--m-border);color:var(--m-text);padding:10px 14px;border-radius:0;outline:none;font-family:var(--m-font);font-size:.8rem;transition:border-color .15s;cursor:pointer;width:100%}.metro-select:focus{border-color:var(--m-accent)}.shortcuts-info{margin-top:22px;padding:16px;background:transparent;border-radius:0;border:1px solid var(--m-border)}.shortcuts-heading{font-family:var(--m-mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.14em;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:26px;height:22px;padding:0 6px;background:transparent;border:1px solid var(--m-border);border-radius:0;font-family:var(--m-mono);font-size:.62rem;font-weight:600;color:var(--m-text)}@media(max-width:480px){.metro-header,.bottom-dock{padding:16px 18px}.play-btn{width:64px;height:64px}.mixer-grid{gap:1px}.tab-btn{font-size:.6rem;padding:9px 4px}.grid-cell{width:24px;height:20px;font-size:.5rem}.clave-slot{width:20px;height:20px}.accent-cell{width:34px;height:34px;font-size:.7rem}.preset-btn{padding:12px 8px;font-size:.6rem}.stat-card{padding:10px 6px}.stat-value{font-size:1rem}.stat-label{font-size:.5rem}.fine-btn{width:32px;height:32px;font-size:1rem}.settings-drawer{max-height:80dvh}.subdiv-cell{width:34px;height:34px;font-size:.8rem}}@media(max-width:360px){.bpm-value{font-size:3.4rem}.play-btn{width:58px;height:58px}.mixer-grid{grid-template-columns:repeat(3,1fr);height:auto}.subdiv-cell{width:30px;height:30px;font-size:.72rem}.subdiv-selector{gap:4px}}@media(max-height:700px)and (min-width:481px){.main-display{padding-top:clamp(20px,3vw,32px);padding-bottom:clamp(20px,3vw,32px)}}@media(max-height:650px)and (max-width:480px){.bpm-value{font-size:3.2rem}.presets-row .preset-btn{padding:10px 8px}.beat-dots-row{padding:12px 0 4px}.metro-header{padding:12px 16px}.bottom-dock{padding:12px 16px;gap:10px}.subdiv-legend{display:none}}@media(max-width:440px){.mixer-grid{grid-template-columns:repeat(4,1fr);height:auto}.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:var(--m-border-active);border-radius:0}.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,.subdiv-cell:focus-visible{outline:2px solid var(--m-accent);outline-offset:2px}@media(max-width:600px){.tool-how-to-use{display:none}}.screen-flash-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#e357280f;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:#000000e6;z-index:10000;display:flex;align-items:center;justify-content:center}.ios-unlock-btn{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--m-elevated);border:1px solid var(--m-border);padding:32px 48px;border-radius:var(--m-radius);color:var(--m-text);cursor:pointer;font-family:var(--m-mono);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;transition:border-color .15s var(--m-ease)}.ios-unlock-btn:active{border-color:var(--m-accent)}.count-in-badge{position:absolute;top:-8px;right:-8px;background:var(--m-text);color:var(--m-ink);font-family:var(--m-mono);font-size:.55rem;font-weight:700;padding:2px 5px;border-radius:0;letter-spacing:.02em;min-width:18px;text-align:center;line-height:1.2;z-index:5;pointer-events:none}.practice-status{font-family:var(--m-mono);font-size:.72rem;color:var(--m-text);text-align:center;padding:8px 0;margin-top:8px;border-radius:0;background:transparent;border:1px solid var(--m-border);transition:all .2s var(--m-ease);text-transform:uppercase;letter-spacing:.04em}.practice-status.muted{color:var(--m-accent-bright);background:var(--m-accent-soft);border-color:var(--m-accent)}.metronome-app.practice-muted .main-display{opacity:.4;transition:opacity .3s var(--m-ease)}.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}.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:transparent;padding:12px;border-radius:0;border:1px solid var(--m-border);transition:border-color .15s ease}.preset-load{flex:1;min-width:0;min-height:44px;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.preset-item:hover{border-color:var(--m-accent)}.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);font-family:var(--m-mono)}.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-bright)}.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:transparent;border:1px solid var(--m-border);color:var(--m-text);padding:10px;border-radius:0;font-family:var(--m-font)}.empty-state{color:var(--m-text-muted);font-size:.8rem;text-align:center;padding:20px 0}.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:var(--m-elevated);border:1px solid var(--m-border);border-radius:0;z-index:1001;opacity:0;pointer-events:none;transition:opacity .2s var(--m-ease),transform .2s var(--m-ease)}.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){.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 */