@font-face{font-family:Bravura Text;src:url(/fonts/BravuraText.woff2)format("woff2");font-weight:400;font-style:normal}.font-music{font-feature-settings:"liga" 1,"dlig" 1;font-family:Bravura Text,sans-serif}:root{--bg-primary:#e0e5ec;--bg-secondary:#e0e5ec;--bg-card:#e0e5ec;--accent-primary:#e07a3d;--accent-secondary:#f5a361;--accent-tertiary:#ffd4b8;--text-primary:#4a5568;--text-secondary:#718096;--text-muted:#a0aec0;--border:#fff6;--neu-bg-deep:var(--bg-primary);--neu-bg-base:var(--bg-primary);--neu-bg-elevated:var(--bg-primary);--neu-bg-surface:var(--bg-primary);--neu-text-primary:var(--text-primary);--neu-text-secondary:var(--text-secondary);--neu-text-muted:var(--text-muted);--neu-text-accent:var(--accent-primary);--neu-accent:var(--accent-primary);--neu-accent-light:var(--accent-secondary);--neu-accent-dark:#b86432;--neu-accent-pale:var(--accent-tertiary);--neu-accent-glow:#e07a3d4d;--neu-border:#fff3;--neu-border-accent:#e07a3d66;--neu-shadow-raised:9px 9px 16px #a3b1c699,-9px -9px 16px #ffffff80;--neu-shadow-raised-sm:5px 5px 10px #a3b1c699,-5px -5px 10px #ffffff80;--neu-shadow-inset:inset 6px 6px 10px 0 #a3b1c6b3,inset -6px -6px 10px 0 #fffc;--neu-shadow-inset-sm:inset 3px 3px 6px 0 #a3b1c6b3,inset -3px -3px 6px 0 #fffc;--neu-shadow-pressed:var(--neu-shadow-inset);--neu-radius-sm:12px;--neu-radius-md:16px;--neu-radius-lg:20px;--neu-radius-xl:32px;--neu-radius-full:9999px;--neu-transition-fast:.1s cubic-bezier(.4,0,.2,1);--neu-transition-normal:.2s cubic-bezier(.4,0,.2,1)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.pb-safe{padding-bottom:env(safe-area-inset-bottom)}.pt-safe{padding-top:env(safe-area-inset-top)}.neu-app{background:var(--neu-bg-deep);color:var(--neu-text-primary);-webkit-font-smoothing:antialiased;flex-direction:column;min-height:100vh;padding:24px 12px;font-family:Noto Sans SC,PingFang SC,Inter,-apple-system,sans-serif;display:flex;overflow-x:hidden}@media (max-width:640px){.neu-app{padding:12px 6px}}.neu-container{max-width:1200px;margin:0 auto}.neu-title-gradient{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:12px;font-size:32px;font-weight:600}.neu-subtitle{color:var(--text-secondary);margin-bottom:24px;font-size:16px}.stat-value{color:var(--accent-primary);font-family:Space Grotesk,monospace;font-size:36px;font-weight:500}.neu-btn-raised{background:var(--neu-bg-surface);box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);border-radius:var(--neu-radius-md);color:var(--neu-text-primary);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.neu-btn-raised:hover{border-color:var(--neu-accent);transform:translateY(-4px);box-shadow:0 12px 32px #e07a3d26}.neu-btn-raised:active,.neu-btn-raised.neu-pressed{box-shadow:var(--neu-shadow-pressed);transform:translateY(1px)}.neu-inset{background:var(--neu-bg-deep);box-shadow:var(--neu-shadow-inset);border:1px solid var(--neu-border);border-radius:var(--neu-radius-md)}.neu-inset-sm{box-shadow:var(--neu-shadow-inset-sm)}.neu-btn-accent{background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent-dark));box-shadow:var(--neu-shadow-raised),var(--neu-glow-accent);border-radius:var(--neu-radius-full);color:#fff;transition:all var(--neu-transition-normal);border:none;font-weight:600}.neu-btn-accent:hover{box-shadow:var(--neu-shadow-raised),var(--neu-glow-strong);transform:scale(1.02)}.neu-btn-accent:active{box-shadow:var(--neu-shadow-pressed);transform:scale(.98)}.neu-card{background:linear-gradient(145deg,var(--neu-bg-elevated),var(--neu-bg-surface));box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg);position:relative}.neu-card:before{content:"";border-radius:var(--neu-radius-lg)var(--neu-radius-lg)0 0;background:linear-gradient(90deg,#0000,#ffffff14,#0000);height:1px;position:absolute;top:0;left:0;right:0}.metronome-new-layout{background:var(--bg-primary);flex-direction:column;max-width:1440px;min-height:100dvh;margin:0 auto;display:flex;position:relative;overflow-y:auto}.main-dial-section{z-index:10;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:32px;min-height:0;padding:0 24px;display:flex;position:relative;overflow-y:auto}.bottom-controls{padding:0 32px;padding-bottom:calc(110px + env(safe-area-inset-bottom));flex-shrink:0;justify-content:space-between;align-items:center;gap:32px;width:100%;max-width:480px;margin:0 auto;display:flex}.status-bar{z-index:20;background:0 0;justify-content:center;width:100%;padding:16px 24px;display:flex}.status-bar-config{border-radius:var(--neu-radius-full);background:var(--neu-bg-elevated);box-shadow:var(--neu-shadow-inset-sm);color:var(--neu-text-secondary);align-items:center;gap:8px;padding:8px 16px;font-size:.875rem;font-weight:600;display:flex}.status-bar-playing{align-items:center;gap:12px;display:flex}.status-playing-indicator{color:var(--neu-accent);animation:1s infinite pulse}.time-pattern-bar{justify-content:center;align-items:center;width:100%;max-width:480px;margin:0 auto;padding:8px 24px;display:flex}@media (max-width:640px){.time-pattern-bar{padding:8px 12px}}.time-sig-group{background:var(--neu-bg-elevated);border-radius:var(--neu-radius-md);box-shadow:var(--neu-shadow-raised-sm);flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;display:flex}.time-sig-pill{border-radius:var(--neu-radius-sm);color:var(--neu-text-muted);cursor:pointer;transition:all var(--neu-transition-fast);background:0 0;border:none;padding:6px 12px;font-size:.8rem;font-weight:700}.time-sig-pill.active{background:var(--neu-accent);color:#fff;box-shadow:0 2px 8px var(--neu-accent-glow)}.pattern-entry-btn{border-radius:var(--neu-radius-full);border:1px solid var(--border);background:var(--neu-bg-elevated);color:var(--neu-text-primary);box-shadow:var(--neu-shadow-raised-sm);cursor:pointer;transition:all var(--neu-transition-normal);align-items:center;gap:8px;padding:8px 16px;font-size:.875rem;font-weight:600;display:flex}.pattern-entry-btn:active{box-shadow:var(--neu-shadow-pressed);transform:scale(.96)}.play-button-large{background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent));color:#fff;width:72px;height:72px;box-shadow:6px 6px 12px #a6968a33,-6px -6px 12px #fffc,0 0 20px var(--neu-accent-glow);cursor:pointer;transition:all var(--neu-transition-normal);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.play-button-large:active,.play-button-large.playing{background:var(--neu-bg-elevated);color:var(--neu-accent);box-shadow:var(--neu-shadow-inset);transform:scale(.95)}.satellite-wheel-wrapper{justify-content:center;align-items:center;width:280px;height:280px;display:flex;position:relative}.satellite-wheel-center{background:var(--neu-bg-elevated);width:140px;height:140px;box-shadow:var(--neu-shadow-raised);z-index:20;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute}.satellite-wheel{background:conic-gradient(from 0deg,var(--neu-bg-surface)0deg,var(--neu-bg-elevated)90deg,var(--neu-bg-surface)180deg,var(--neu-bg-deep)270deg,var(--neu-bg-surface)360deg);cursor:grab;touch-action:none;border-radius:50%;position:absolute;inset:10px;box-shadow:-4px -4px 10px #fffc,4px 4px 10px #a6968a33,inset 0 0 0 2px #ff6b000d}.satellite-wheel-ticks{pointer-events:none;border-radius:50%;position:absolute;inset:0}.editor-drawer{background:var(--neu-bg-elevated);border-top-left-radius:var(--neu-radius-xl);border-top-right-radius:var(--neu-radius-xl);z-index:50;min-height:280px;margin-top:auto;padding:16px 24px;box-shadow:0 -4px 20px #0000000d}.drawer-tabs{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.tabs-primary{background:var(--neu-bg-deep);border-radius:var(--neu-radius-full);gap:8px;padding:4px;display:flex}.drawer-tab{border-radius:var(--neu-radius-full);color:var(--neu-text-muted);cursor:pointer;transition:all var(--neu-transition-fast);background:0 0;border:none;align-items:center;gap:6px;padding:8px 16px;font-size:.8rem;font-weight:600;display:flex}.drawer-tab.active{background:var(--neu-bg-surface);color:var(--neu-accent);box-shadow:var(--neu-shadow-raised-sm)}.advanced-toggle{border:1px solid var(--border);background:var(--neu-bg-surface);width:32px;height:32px;color:var(--neu-text-secondary);cursor:pointer;transition:all var(--neu-transition-normal);border-radius:50%;justify-content:center;align-items:center;display:flex}.advanced-toggle.open{background:var(--neu-accent);color:#fff;border-color:var(--neu-accent);transform:rotate(180deg)}.tabs-advanced{background:var(--neu-bg-deep);border-radius:var(--neu-radius-lg);gap:8px;margin-bottom:24px;padding:12px;display:flex;overflow-x:auto}.tap-pad-container{flex-direction:column;align-items:center;display:flex}.tap-pad{border:1px solid var(--border);background:var(--neu-bg-surface);width:64px;height:64px;color:var(--neu-text-muted);box-shadow:var(--neu-shadow-raised-sm);cursor:pointer;transition:all var(--neu-transition-fast);border-radius:16px;justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:flex}.tap-pad:active,.tap-pad.active{background:var(--neu-bg-elevated);box-shadow:var(--neu-shadow-inset);border-color:var(--neu-accent);color:var(--neu-accent);transform:scale(.95)}.jog-wheel-container{justify-content:center;align-items:center;display:flex;position:relative}.jog-wheel{background:conic-gradient(from 0deg,var(--neu-bg-surface)0deg,var(--neu-bg-elevated)90deg,var(--neu-bg-surface)180deg,var(--neu-bg-deep)270deg,var(--neu-bg-surface)360deg);border:2px solid var(--neu-border);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;width:280px;height:280px;position:relative;box-shadow:12px 12px 30px #000000b3,-8px -8px 25px #3c3c441a,inset 0 0 0 2px #ffffff0d,inset 0 0 60px #0000004d}.jog-wheel:active{cursor:grabbing}.jog-wheel-center{background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-deep));width:160px;height:160px;box-shadow:var(--neu-shadow-inset),0 0 20px #00000080;border:1px solid var(--neu-border);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.jog-wheel-play-btn{background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent-dark));width:56px;height:56px;box-shadow:var(--neu-shadow-raised-sm),0 0 15px var(--neu-accent-glow);color:#fff;cursor:pointer;transition:all var(--neu-transition-normal);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.jog-wheel-play-btn:before{content:"";background:linear-gradient(#ffffff4d,#0000);border-radius:50%/100% 100% 0% 0%;height:30%;position:absolute;top:3px;left:15%;right:15%}.jog-wheel-play-btn .play-icon{width:24px;height:24px}.jog-wheel-play-btn:hover{box-shadow:var(--neu-shadow-raised-sm),0 0 25px var(--neu-accent-glow);transform:scale(1.08)}.jog-wheel-play-btn:active{box-shadow:var(--neu-shadow-pressed);transform:scale(.95)}.jog-wheel-play-btn.playing{background:linear-gradient(145deg,var(--neu-bg-elevated),var(--neu-bg-surface));box-shadow:var(--neu-shadow-inset-sm);color:var(--neu-accent)}.jog-wheel-play-btn.playing:before{display:none}.jog-wheel-bpm{flex-direction:column;align-items:center;display:flex}.jog-wheel-value{color:var(--neu-accent);text-shadow:0 0 15px var(--neu-accent-glow);font-size:1.5rem;font-weight:800;line-height:1}.jog-wheel-label{color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.15em;margin-top:2px;font-size:.625rem;font-weight:600}.jog-wheel-ticks{pointer-events:none;width:260px;height:260px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.jog-wheel-tick{background:var(--neu-text-muted);transform-origin:bottom;border-radius:1px;width:2px;height:12px;position:absolute;top:0;left:50%}.jog-wheel-tick.major{background:var(--neu-text-secondary);width:3px;height:18px}.jog-wheel-indicator{background:var(--neu-accent);width:8px;height:8px;box-shadow:var(--neu-glow-accent);border-radius:50%;position:absolute;top:15px;left:50%;transform:translate(-50%)}.beat-flash{pointer-events:none;z-index:100;opacity:0;transition:opacity 50ms ease-out;position:fixed;inset:0}.beat-flash.active{opacity:1}.beat-flash-edge{background:radial-gradient(ellipse at center,var(--neu-accent-glow)0%,transparent 70%);position:absolute}.beat-flash-edge.top{height:100%;top:-50%;left:0;right:0}.beat-flash-edge.bottom{height:100%;bottom:-50%;left:0;right:0}.beat-flash-edge.left{width:100%;top:0;bottom:0;left:-50%}.beat-flash-edge.right{width:100%;top:0;bottom:0;right:-50%}.beat-flash.strong .beat-flash-edge{background:radial-gradient(#ff6d1b99 0%,#0000 70%)}@keyframes breathe{0%,to{opacity:.3}50%{opacity:.6}}.neu-value-display{font-variant-numeric:tabular-nums;color:var(--neu-accent);text-shadow:0 0 20px var(--neu-accent-glow);font-weight:800}.neu-label{color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;font-weight:600}.neu-heading{color:var(--neu-text-primary);font-weight:700}.neu-input{background:var(--neu-bg-deep);box-shadow:var(--neu-shadow-inset-sm);border:1px solid var(--neu-border);border-radius:var(--neu-radius-md);color:var(--neu-text-primary);transition:all var(--neu-transition-fast);padding:12px 16px}.neu-input:focus{border-color:var(--neu-accent);box-shadow:var(--neu-shadow-inset-sm),0 0 0 2px var(--neu-accent-subtle);outline:none}.neu-input::placeholder{color:var(--neu-text-muted)}.neu-input-sm{background:var(--neu-bg-deep);box-shadow:var(--neu-shadow-inset-sm);border:1px solid var(--neu-border);border-radius:var(--neu-radius-sm);color:var(--neu-text-primary);transition:all var(--neu-transition-fast);padding:6px 8px}.neu-input-sm:focus{border-color:var(--neu-accent);outline:none}.neu-range{appearance:none;background:var(--neu-bg-deep);width:100%;height:8px;box-shadow:var(--neu-shadow-inset-sm);border-radius:4px;outline:none}.neu-range::-webkit-slider-thumb{appearance:none;background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent-dark));width:24px;height:24px;box-shadow:var(--neu-shadow-raised-sm),var(--neu-glow-accent);cursor:pointer;transition:transform var(--neu-transition-fast);border:2px solid #fff3;border-radius:50%}.neu-range::-webkit-slider-thumb:hover{transform:scale(1.1)}.neu-range::-webkit-slider-thumb:active{transform:scale(.95)}.neu-tabs{background:var(--neu-bg-deep);box-shadow:var(--neu-shadow-inset);border-radius:var(--neu-radius-xl);gap:8px;padding:6px;display:flex}.neu-tab{border-radius:var(--neu-radius-lg);color:var(--neu-text-muted);cursor:pointer;transition:all var(--neu-transition-normal);background:0 0;border:none;flex:1;padding:10px 16px;font-size:.875rem;font-weight:500}.neu-tab:hover{color:var(--neu-text-secondary)}.neu-tab.active{background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));box-shadow:var(--neu-shadow-raised-sm);color:var(--neu-accent)}.neu-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000d9}.neu-modal{background:linear-gradient(145deg,var(--neu-bg-elevated),var(--neu-bg-base));box-shadow:0 25px 80px #000c,var(--neu-shadow-raised);border:1px solid var(--neu-border-light);border-radius:var(--neu-radius-xl)}.neu-rhythm-card{background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);border-radius:var(--neu-radius-md);transition:all var(--neu-transition-normal)}.neu-rhythm-card:hover{border-color:var(--neu-border-light);transform:translateY(-1px)}.neu-rhythm-card.active{border-color:var(--neu-accent);box-shadow:var(--neu-shadow-raised-sm),var(--neu-glow-accent);transform:scale(1.05)}.neu-rhythm-card.active .rhythm-icon{filter:drop-shadow(0 0 8px var(--neu-accent-glow))}.neu-rhythm-card svg{fill:var(--neu-text-muted);transition:fill var(--neu-transition-fast)}.neu-rhythm-card:hover svg{fill:var(--neu-text-secondary)}.neu-rhythm-card.active svg{fill:var(--neu-accent)}.rhythm-card{background:var(--bg-card);box-shadow:0 4px 24px var(--shadow);border:1px solid var(--border);cursor:pointer;border-radius:16px;transition:all .25s}.rhythm-card:hover{border-color:var(--accent-primary);transform:translateY(-4px);box-shadow:0 12px 32px #e07a3d26}.rhythm-card-active,.rhythm-card.rhythm-card-active{border-color:var(--accent-primary);transform:scale(1.02);box-shadow:0 0 0 3px #e07a3d33,0 12px 32px #e07a3d26}.notation-box{background:#ffffff6b;border:1px solid #ffffff94;border-radius:8px;justify-content:center;align-items:center;min-height:40px;display:flex;overflow:hidden}.notation-box svg{display:block}.shadow-glow{box-shadow:0 0 10px var(--accent-primary),0 0 20px #e07a3d4d}.neu-play-btn{background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent-dark));width:80px;height:80px;box-shadow:var(--neu-shadow-raised),var(--neu-glow-accent);color:#fff;cursor:pointer;transition:all var(--neu-transition-normal);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.neu-play-btn:before{content:"";background:linear-gradient(#ffffff4d,#0000);border-radius:50%/100% 100% 0% 0%;height:30%;position:absolute;top:4px;left:15%;right:15%}.neu-play-btn:hover{box-shadow:var(--neu-shadow-raised),var(--neu-glow-strong);transform:scale(1.05)}.neu-play-btn:active{box-shadow:var(--neu-shadow-pressed);transform:scale(.95)}.neu-play-btn.playing{background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));box-shadow:var(--neu-shadow-inset);color:var(--neu-accent)}.neu-play-btn.playing:before{display:none}.neu-glow{box-shadow:var(--neu-glow-accent)}.neu-glow-strong{box-shadow:var(--neu-glow-strong)}.neu-text-accent{color:var(--neu-accent)}.neu-text-muted{color:var(--neu-text-muted)}.piano-container{background:linear-gradient(145deg,var(--neu-bg-deep)0%,var(--neu-bg-base)100%);width:100%;height:100%;color:var(--neu-text-primary);flex-direction:column;display:flex}.piano-controls{background:var(--neu-bg-elevated);border-bottom:1px solid var(--neu-border);flex-direction:column;flex-shrink:0;gap:12px;padding:12px 16px;display:flex}.piano-controls-row{align-items:center;gap:12px;display:flex}.piano-title{color:var(--neu-text-primary);font-size:1.125rem;font-weight:700}.piano-select{background:var(--neu-bg-deep);box-shadow:var(--neu-shadow-inset-sm);border:1px solid var(--neu-border);border-radius:var(--neu-radius-sm);color:var(--neu-text-primary);cursor:pointer;min-width:80px;transition:all var(--neu-transition-fast);padding:8px 12px;font-size:.75rem;font-weight:600}.piano-select:focus{border-color:var(--neu-accent);box-shadow:var(--neu-shadow-inset-sm),0 0 0 2px var(--neu-accent-subtle);outline:none}.piano-btn-sm{border-radius:var(--neu-radius-sm);background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));width:36px;height:36px;box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);color:var(--neu-text-secondary);cursor:pointer;transition:all var(--neu-transition-normal);justify-content:center;align-items:center;display:flex}.piano-btn-sm:hover{color:var(--neu-text-primary);transform:translateY(-1px)}.piano-btn-sm:active{box-shadow:var(--neu-shadow-pressed);transform:translateY(1px)}.piano-btn-sm.active{background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent-dark));color:#fff;box-shadow:var(--neu-shadow-raised-sm),0 0 10px var(--neu-accent-glow)}.piano-btn-action{border-radius:var(--neu-radius-md);background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);color:var(--neu-text-primary);cursor:pointer;transition:all var(--neu-transition-normal);padding:8px 16px;font-size:.75rem;font-weight:700}.piano-btn-action:hover{transform:translateY(-1px)}.piano-btn-action:active{box-shadow:var(--neu-shadow-pressed);transform:translateY(1px)}.piano-btn-action.primary{background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent-dark));color:#fff;box-shadow:var(--neu-shadow-raised-sm),var(--neu-glow-accent);border:none}.piano-keyboards{background:var(--neu-bg-deep);box-shadow:var(--neu-shadow-inset);border-radius:var(--neu-radius-lg);flex-direction:column;flex:1;gap:12px;padding:12px;display:flex;overflow:hidden}.piano-keyboard-row{border-radius:var(--neu-radius-md);-webkit-overflow-scrolling:touch;background:#1a1a1e;flex:1;align-items:center;padding:4px 0;display:flex;position:relative;overflow:auto hidden;box-shadow:0 4px 10px #0000004d}.piano-keyboard-row::-webkit-scrollbar{display:none}.piano-keyboard-inner{box-sizing:content-box;border-left:4px solid #1a1a1e;border-right:4px solid #1a1a1e;height:100%;margin:0 auto;display:flex;position:relative}.piano-octave-label{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--neu-text-secondary);text-transform:uppercase;z-index:40;pointer-events:none;border:1px solid var(--neu-border);background:#1a1a1ecc;border-top:none;border-left:none;border-radius:0 0 4px;padding:2px 6px;font-size:.625rem;font-weight:700;position:sticky;top:0;left:0}.piano-key-white{cursor:pointer;z-index:1;background:linear-gradient(#fff 0%,#f8f8fa 85%,#e8e8ea 100%);border-bottom:4px solid #ccc;border-left:1px solid #00000026;border-radius:0 0 4px 4px;flex-direction:column;flex-shrink:0;justify-content:flex-end;align-items:center;height:100%;padding-bottom:8px;transition:transform 50ms ease-out,background .1s;display:flex;position:relative}.piano-key-white:first-child{border-left:none}.piano-key-white:active,.piano-key-white.active{background:linear-gradient(#f0f0f0 0%,#e0e0e0 100%);border-bottom-width:2px;transform:translateY(2px);box-shadow:inset 0 2px 5px #0000001a}.piano-key-white.highlighted{background:linear-gradient(#f0f8ff 0%,#d0e8ff 100%)}.piano-key-white.highlighted.active{background:#b0d8ff}.piano-key-label{color:#0006;pointer-events:none;margin-bottom:2px;font-size:.55rem;font-weight:700}.piano-key-dot{background:var(--neu-accent);width:6px;height:6px;box-shadow:0 0 4px var(--neu-accent-glow);pointer-events:none;border-radius:50%;margin-bottom:4px}.piano-keys-black-layer{pointer-events:none;height:60%;position:absolute;top:0;left:0;right:0}.piano-key-black{cursor:pointer;pointer-events:auto;z-index:10;background:linear-gradient(#333 0%,#111 90%,#000 100%);border:1px solid #000;border-bottom:5px solid #1a1a1a;border-radius:0 0 3px 3px;height:100%;transition:transform 50ms ease-out;position:absolute;box-shadow:3px 3px 5px #0006,inset 1px 1px #ffffff1a}.piano-key-black:active,.piano-key-black.active{box-shadow:1px 1px 3px #00000080,inset 0 0 10px var(--neu-accent-glow);background:linear-gradient(#222,#000);border-bottom-width:2px;transform:translateY(3px)}.piano-key-black.highlighted{box-shadow:0 0 0 1px var(--neu-accent),0 0 10px var(--neu-accent-glow)}.piano-empty-area{color:var(--neu-text-muted);flex:1;justify-content:center;align-items:center;font-size:.875rem;display:flex}.piano-key-white.compact{width:36px}.piano-key-black.compact{width:24px}.piano-key-white.normal{width:40px}.piano-key-black.normal{width:28px}.tuner-container{background:linear-gradient(145deg,var(--neu-bg-deep)0%,var(--neu-bg-base)100%);width:100%;max-width:1024px;height:100%;color:var(--neu-text-primary);flex-direction:column;margin:0 auto;display:flex;position:relative;overflow:hidden}.tuner-in-tune-glow{pointer-events:none;opacity:0;z-index:1;background:radial-gradient(#22c55e26 0%,#0000 70%);transition:opacity .2s ease-out;position:absolute;inset:0}.tuner-in-tune-glow.active{opacity:1}.tuner-edge-glow{pointer-events:none;opacity:0;z-index:1;transition:opacity .2s ease-out;position:absolute;inset:0}.tuner-edge-glow.active{opacity:1}.tuner-edge-glow:before,.tuner-edge-glow:after{content:"";background:linear-gradient(90deg,#22c55e66,#0000);position:absolute}.tuner-edge-glow:before{background:linear-gradient(90deg,#22c55e4d,#0000);width:40px;top:0;bottom:0;left:0}.tuner-edge-glow:after{background:linear-gradient(270deg,#22c55e4d,#0000);width:40px;top:0;bottom:0;right:0}.tuner-controls{background:var(--neu-bg-elevated);border-bottom:1px solid var(--neu-border);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;padding:16px;display:flex}.tuner-instrument-btn{cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:flex-start;padding:0;display:flex}.tuner-instrument-name{color:var(--neu-text-primary);align-items:center;gap:4px;font-size:.875rem;font-weight:700;display:flex}.tuner-tuning-name{color:var(--neu-text-muted);font-size:.75rem}.tuner-tuning-btn{border-radius:var(--neu-radius-md);background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);color:var(--neu-accent);cursor:pointer;transition:all var(--neu-transition-normal);padding:8px 16px;font-size:.75rem;font-weight:700}.tuner-tuning-btn:active{box-shadow:var(--neu-shadow-pressed);transform:translateY(1px)}.tuner-strobe-area{z-index:5;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:0;display:flex;position:relative;overflow:hidden}.tuner-info-row{color:var(--neu-text-muted);z-index:10;pointer-events:none;justify-content:space-between;font-family:JetBrains Mono,monospace;font-size:.75rem;display:flex;position:absolute;top:16px;left:16px;right:16px}.tuner-note-display{z-index:10;pointer-events:none;flex-direction:column;align-items:center;margin-bottom:32px;display:flex;position:relative}.tuner-note-name{letter-spacing:-.05em;color:var(--neu-text-muted);font-size:7rem;font-weight:900;line-height:1;transition:color .15s ease-out,text-shadow .15s ease-out}.tuner-note-name.flat{color:#eab308}.tuner-note-name.sharp{color:#ef4444}.tuner-note-name.perfect{color:#22c55e;text-shadow:0 0 40px #22c55e80}.tuner-note-octave{color:var(--neu-text-muted);vertical-align:super;margin-left:4px;font-size:2rem;font-weight:500}.tuner-strobe-container{z-index:0;width:100%;max-width:none;height:100%;margin:0;position:absolute;inset:0}.tuner-strobe-wheel{background:var(--neu-bg-deep);box-shadow:none;border-radius:0;position:absolute;inset:0;overflow:hidden}.tuner-strobe-bars{align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.tuner-strobe-bar{background:linear-gradient(180deg,var(--neu-text-muted)0%,var(--neu-text-secondary)50%,var(--neu-text-muted)100%);opacity:.6;flex-shrink:0;height:100%}.tuner-strobe-bar.highlight{background:linear-gradient(180deg,var(--neu-accent)0%,var(--neu-accent-light)50%,var(--neu-accent)100%);opacity:.9}.tuner-strobe-center{background:var(--neu-accent);width:4px;box-shadow:0 0 15px var(--neu-accent-glow);z-index:10;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.tuner-strobe-center.perfect{background:#22c55e;box-shadow:0 0 20px #22c55ecc}.tuner-strobe-mask{pointer-events:none;background:linear-gradient(to right,var(--neu-bg-deep)0%,transparent 20%,transparent 80%,var(--neu-bg-deep)100%);z-index:5;position:absolute;inset:0}.tuner-status{text-transform:uppercase;letter-spacing:.1em;color:var(--neu-text-muted);z-index:10;pointer-events:none;margin-bottom:24px;font-size:.875rem;font-weight:600;transition:color .15s ease-out;position:relative}.tuner-status.flat{color:#eab308}.tuner-status.sharp{color:#ef4444}.tuner-status.perfect{color:#22c55e}.tuner-toggle-btn{border-radius:var(--neu-radius-lg);cursor:pointer;width:100%;transition:all var(--neu-transition-normal);justify-content:center;align-items:center;gap:8px;padding:16px;font-size:1rem;font-weight:700;display:flex}.tuner-toggle-btn.start{background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent-dark));box-shadow:var(--neu-shadow-raised),var(--neu-glow-accent);color:#fff;border:none}.tuner-toggle-btn.start:active{box-shadow:var(--neu-shadow-pressed);transform:scale(.98)}.tuner-toggle-btn.stop{background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);color:var(--neu-text-secondary)}.tuner-toggle-btn.stop:hover{color:var(--neu-text-primary)}.tuner-toggle-btn.stop:active{box-shadow:var(--neu-shadow-pressed);transform:translateY(1px)}.tuner-strings-panel{background:var(--neu-bg-elevated);border-top:1px solid var(--neu-border);z-index:10;flex-shrink:0;padding:16px}.tuner-strings-row{flex-wrap:nowrap;justify-content:center;gap:4px;width:100%;max-width:100%;display:flex;overflow:hidden}.tuner-string-btn{border-radius:var(--neu-radius-md);background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));min-width:0;max-width:56px;box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);cursor:pointer;transition:all var(--neu-transition-normal);flex-direction:column;flex:1 1 0;align-items:center;gap:2px;padding:8px 4px;display:flex}.tuner-string-btn:hover{border-color:var(--neu-border-accent);transform:translateY(-2px)}.tuner-string-btn:active{box-shadow:var(--neu-shadow-pressed);transform:translateY(1px)}.tuner-string-note{background:var(--neu-bg-deep);width:36px;height:36px;box-shadow:var(--neu-shadow-inset-sm);color:var(--neu-text-primary);border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:800;display:flex}.tuner-string-btn:hover .tuner-string-note{color:var(--neu-accent)}.tuner-string-label{color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.625rem;font-weight:600}@keyframes strobe-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.tuner-strobe-bars.moving{animation:strobe-scroll var(--strobe-duration,2s)linear infinite}.tuner-strobe-bars.moving.reverse{animation-direction:reverse}.tuner-permission-screen{justify-content:center;align-items:center;min-height:100vh;display:flex}.tuner-permission-content{text-align:center;flex-direction:column;align-items:center;max-width:320px;padding:40px 24px;display:flex}.tuner-permission-icon{color:var(--neu-accent);opacity:.8;margin-bottom:24px}.tuner-permission-title{color:var(--neu-text-primary);margin:0 0 12px;font-size:1.75rem;font-weight:800}.tuner-permission-desc{color:var(--neu-text-muted);margin:0 0 32px;font-size:.875rem;line-height:1.6}.tuner-permission-btn{border-radius:var(--neu-radius-lg);background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent-dark));width:100%;box-shadow:var(--neu-shadow-raised),var(--neu-glow-accent);color:#fff;cursor:pointer;transition:all var(--neu-transition-normal);border:none;padding:16px 32px;font-size:1rem;font-weight:700}.tuner-permission-btn:hover{box-shadow:var(--neu-shadow-raised),var(--neu-glow-strong);transform:scale(1.02)}.tuner-permission-btn:active{box-shadow:var(--neu-shadow-pressed);transform:scale(.98)}.tuner-permission-btn:disabled{opacity:.6;cursor:not-allowed}.tuner-permission-error{color:#ef4444;margin-top:16px;font-size:.75rem;font-weight:500}.tuner-mode-tabs{background:var(--neu-bg-elevated);border-bottom:1px solid var(--neu-border);gap:8px;padding:12px 16px;display:flex}.tuner-mode-tab{border-radius:var(--neu-radius-md);background:var(--neu-bg-deep);box-shadow:var(--neu-shadow-inset-sm);border:1px solid var(--neu-border);color:var(--neu-text-muted);cursor:pointer;transition:all var(--neu-transition-normal);flex:1;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-size:.875rem;font-weight:600;display:flex}.tuner-mode-tab:hover{color:var(--neu-text-secondary)}.tuner-mode-tab.active{background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));box-shadow:var(--neu-shadow-raised-sm);color:var(--neu-accent);border-color:var(--neu-border-accent)}.tuner-mode-tab svg{opacity:.8}.tuner-mode-tab.active svg{opacity:1;filter:drop-shadow(0 0 4px var(--neu-accent-glow))}.pitch-pipe-view{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:32px;padding:24px 16px;display:flex}.pitch-pipe-octave-row{align-items:center;gap:16px;display:flex}.pitch-pipe-octave-label{color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;font-weight:600}.pitch-pipe-octave-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:40px;height:40px;color:var(--neu-text-secondary);cursor:pointer;transition:all var(--neu-transition-normal);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 4px 12px #0000004d}.pitch-pipe-octave-btn:hover:not(:disabled){color:var(--neu-accent);border-color:#ff6d1b4d;transform:scale(1.08)}.pitch-pipe-octave-btn:active:not(:disabled){transform:scale(.95)}.pitch-pipe-octave-btn:disabled{opacity:.3;cursor:not-allowed}.pitch-pipe-octave-value{color:var(--neu-accent);text-align:center;min-width:48px;text-shadow:0 0 20px var(--neu-accent-glow);font-size:2rem;font-weight:800}.pitch-pipe-wheel{justify-content:center;align-items:center;width:300px;height:300px;display:flex;position:relative}.pitch-pipe-center{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10;background:#141416d9;border:1px solid #ffffff1a;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:140px;height:140px;display:flex;position:absolute;box-shadow:inset 0 0 40px #00000080,0 8px 32px #0006}.pitch-pipe-center-note{color:var(--neu-accent);text-shadow:0 0 30px var(--neu-accent-glow);font-size:2.5rem;font-weight:800;line-height:1}.pitch-pipe-center-freq{color:var(--neu-text-secondary);font-family:JetBrains Mono,monospace;font-size:.875rem;font-weight:600}.pitch-pipe-center-idle{color:var(--neu-text-muted);text-align:center;padding:0 16px;font-size:.75rem}.pitch-pipe-segment{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff14;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s ease-out;display:flex;position:absolute;box-shadow:0 4px 16px #0000004d,inset 0 1px #ffffff1a}.pitch-pipe-segment.black-key{background:#0006;border-color:#ffffff0d}.pitch-pipe-segment:hover{transform:translate(var(--x,0),var(--y,0))scale(1.15);background:#ffffff1f;border-color:#ff6d1b66;box-shadow:0 6px 24px #0006,0 0 20px #ff6d1b33}.pitch-pipe-segment.active{background:linear-gradient(145deg,var(--neu-accent),var(--neu-accent-dark));border-color:var(--neu-accent);animation:2s ease-in-out infinite pitch-segment-glow;box-shadow:0 4px 20px #ff6d1b80,0 0 40px #ff6d1b4d,inset 0 1px #fff3}.pitch-pipe-segment.active .pitch-pipe-segment-label{color:#fff;text-shadow:0 1px 2px #0000004d}@keyframes pitch-segment-glow{0%,to{box-shadow:0 4px 20px #ff6d1b80,0 0 40px #ff6d1b4d}50%{box-shadow:0 4px 30px #ff6d1bb3,0 0 60px #ff6d1b66}}.pitch-pipe-segment-label{color:var(--neu-text-primary);font-size:.875rem;font-weight:700;transition:all .2s ease-out}.tuner-giant-note-area{z-index:10;flex-direction:column;flex:none;justify-content:center;align-items:center;min-height:33vh;padding:24px;display:flex;position:relative}.tuner-freq-display{color:var(--neu-text-muted);margin-bottom:8px;font-family:JetBrains Mono,monospace;font-size:.75rem}.tuner-giant-note-wrapper{flex-direction:column;align-items:center;gap:16px;display:flex}.tuner-giant-note-idle{justify-content:center;align-items:center;display:flex}.tuner-idle-dots{color:var(--neu-text-muted);letter-spacing:.2em;font-size:5rem;font-weight:300;animation:2s ease-in-out infinite tuner-breathe}@keyframes tuner-breathe{0%,to{opacity:.3;transform:scale(.95)}50%{opacity:.7;transform:scale(1)}}.tuner-giant-note{align-items:baseline;transition:all .15s ease-out;display:flex}.tuner-giant-note-text{letter-spacing:-.05em;color:var(--neu-text-muted);font-size:8rem;font-weight:900;line-height:1;transition:color .15s ease-out,text-shadow .15s ease-out}.tuner-giant-note-octave{color:var(--neu-text-muted);margin-left:4px;font-size:2.5rem;font-weight:600}.tuner-giant-note.flat .tuner-giant-note-text{color:#eab308}.tuner-giant-note.sharp .tuner-giant-note-text{color:#ef4444}.tuner-giant-note.perfect .tuner-giant-note-text{color:#22c55e;text-shadow:0 0 60px #22c55e80}.tuner-cents-display{color:var(--neu-text-muted);margin-top:8px;font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:700}.tuner-cents-display.flat{color:#eab308}.tuner-cents-display.sharp{color:#ef4444}.tuner-cents-display.perfect{color:#22c55e}.tuner-status-text{text-transform:uppercase;letter-spacing:.1em;color:var(--neu-text-muted);margin-top:8px;font-size:.875rem;font-weight:600}.tuner-status-text.flat{color:#eab308}.tuner-status-text.sharp{color:#ef4444}.tuner-status-text.perfect{color:#22c55e}.tuner-needle-gauge{width:100%;max-width:280px;height:80px;margin-top:16px;position:relative}.tuner-gauge-scale{justify-content:space-between;margin-bottom:8px;padding:0 8px;display:flex}.tuner-gauge-mark{color:var(--neu-text-muted);font-family:JetBrains Mono,monospace;font-size:.625rem;font-weight:600}.tuner-gauge-mark.center{color:var(--neu-text-secondary)}.tuner-gauge-track{background:var(--neu-bg-deep);width:100%;height:8px;box-shadow:var(--neu-shadow-inset-sm);border-radius:4px;display:flex;position:relative;overflow:hidden}.tuner-gauge-zone{flex:1;height:100%}.tuner-gauge-zone.flat{opacity:.3;background:linear-gradient(90deg,#eab308 0%,#0000 100%)}.tuner-gauge-zone.center-zone{opacity:.5;background:linear-gradient(90deg,#0000 0%,#22c55e 50%,#0000 100%)}.tuner-gauge-zone.sharp{opacity:.3;background:linear-gradient(270deg,#ef4444 0%,#0000 100%)}.tuner-gauge-needle{transform-origin:bottom;z-index:10;width:4px;height:50px;transition:transform .1s ease-out;position:absolute;bottom:0;left:50%;transform:translate(-50%)rotate(0)}.tuner-needle-tip{background:linear-gradient(to top,var(--neu-accent)0%,var(--neu-accent-light)60%,transparent 100%);width:100%;height:100%;box-shadow:0 0 8px var(--neu-accent-glow);border-radius:2px 2px 0 0}.tuner-gauge-needle.perfect .tuner-needle-tip{background:linear-gradient(#0000 0%,#34d399 40%,#22c55e 100%);box-shadow:0 0 12px #22c55e99}.tuner-gauge-center-dot{background:var(--neu-bg-surface);border:2px solid var(--neu-border);width:12px;height:12px;box-shadow:var(--neu-shadow-raised-sm);z-index:15;border-radius:50%;position:absolute;bottom:-4px;left:50%;transform:translate(-50%)}.tuner-gauge-center-dot.perfect{background:#22c55e;border-color:#22c55e;box-shadow:0 0 12px #22c55e99}.tuner-bottom-controls{background:var(--neu-bg-elevated);border-top:1px solid var(--neu-border);z-index:10;flex-direction:column;flex-shrink:0;gap:12px;padding:16px;display:flex}.tuner-instrument-select-btn{border-radius:var(--neu-radius-md);background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));width:100%;box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);cursor:pointer;transition:all var(--neu-transition-normal);align-items:center;gap:12px;padding:12px 16px;display:flex}.tuner-instrument-select-btn:hover{border-color:var(--neu-border-accent)}.tuner-instrument-select-btn:active{box-shadow:var(--neu-shadow-pressed);transform:translateY(1px)}.tuner-instrument-icon{font-size:1.5rem}.tuner-instrument-info{flex-direction:column;flex:1;align-items:flex-start;gap:2px;display:flex}.tuner-instrument-label{color:var(--neu-text-primary);font-size:.875rem;font-weight:700}.tuner-tuning-label{color:var(--neu-text-muted);font-size:.75rem}.tuner-selectors-row{gap:8px;display:flex}.tuner-selectors-row .tuner-instrument-select-btn{flex:1}.tuner-tuning-select-btn{border-radius:var(--neu-radius-md);background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);cursor:pointer;transition:all var(--neu-transition-normal);flex:1;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;display:flex}.tuner-tuning-select-btn:hover{border-color:var(--neu-border-accent)}.tuner-tuning-select-btn:active{box-shadow:var(--neu-shadow-pressed);transform:translateY(1px)}.tuner-tuning-info{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.tuner-tuning-mode-label{color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.625rem;font-weight:600}.tuner-tuning-current{color:var(--neu-accent);font-size:.75rem;font-weight:700}.tuner-string-btn.active{border-color:var(--neu-accent);box-shadow:0 0 10px var(--neu-accent-glow);background:#ff6d1b26}.tuner-string-btn.active .tuner-string-note{color:var(--neu-accent)}.tuner-string-btn.in-tune{background:#22c55e26;border-color:#22c55e;box-shadow:0 0 12px #22c55e66}.tuner-string-btn.in-tune .tuner-string-note{color:#22c55e}.rhythm-container{background:var(--neu-bg-deep);width:100%;max-width:1024px;height:100%;color:var(--neu-text-primary);flex-direction:column;margin:0 auto;padding:16px 8px;display:flex;position:relative;overflow:hidden}@media (max-width:640px){.rhythm-container{box-sizing:border-box;width:100%;padding:8px 4px}}.rhythm-config{background:var(--neu-bg-surface);border-radius:var(--neu-radius-md);box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);flex-direction:column;flex-shrink:0;gap:16px;margin-bottom:24px;padding:20px;display:flex}.rhythm-config-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.rhythm-difficulty-tabs{background:var(--neu-bg-deep);box-shadow:var(--neu-shadow-inset-sm);border-radius:var(--neu-radius-md);gap:4px;padding:4px;display:flex}.rhythm-difficulty-tab{border-radius:var(--neu-radius-sm);color:var(--neu-text-muted);cursor:pointer;transition:all var(--neu-transition-normal);background:0 0;border:none;padding:8px 16px;font-size:.75rem;font-weight:700}.rhythm-difficulty-tab:hover{color:var(--neu-text-secondary)}.rhythm-difficulty-tab.active{background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));box-shadow:var(--neu-shadow-raised-sm);color:var(--neu-accent)}.rhythm-bpm-input{text-align:center;background:var(--neu-bg-deep);width:60px;box-shadow:var(--neu-shadow-inset-sm);border:1px solid var(--neu-border);border-radius:var(--neu-radius-sm);color:var(--neu-text-primary);padding:8px;font-size:.875rem;font-weight:700}.rhythm-bpm-input:focus{border-color:var(--neu-accent);outline:none}.rhythm-start-btn{border-radius:var(--neu-radius-lg);cursor:pointer;width:100%;transition:all var(--neu-transition-normal);background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent-dark));box-shadow:var(--neu-shadow-raised),var(--neu-glow-accent);color:#fff;border:none;justify-content:center;align-items:center;gap:8px;padding:14px;font-size:1rem;font-weight:700;display:flex}.rhythm-start-btn:active{box-shadow:var(--neu-shadow-pressed);transform:scale(.98)}.rhythm-start-btn.stop{background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));box-shadow:var(--neu-shadow-raised-sm);color:#ef4444;border:1px solid #ef44444d}.rhythm-timeline-container{background:var(--neu-bg-deep);box-shadow:var(--neu-shadow-inset);border-radius:var(--neu-radius-lg);margin:16px;padding:16px;position:relative;overflow:hidden}.rhythm-timeline{background:linear-gradient(90deg,#0000 0%,#ffffff05 50%,#0000 100%);height:80px;position:relative}.rhythm-playhead{background:var(--neu-accent);width:3px;box-shadow:0 0 15px var(--neu-accent-glow);z-index:10;transition:left 16ms linear;position:absolute;top:0;bottom:0}.rhythm-ghost-note{border:2px dashed var(--neu-text-muted);opacity:.5;border-radius:50%;width:24px;height:24px;position:absolute;top:50%;transform:translate(-50%,-50%)}.rhythm-ghost-note.active{border-color:var(--neu-accent);opacity:1;box-shadow:0 0 10px var(--neu-accent-glow);border-style:solid}.rhythm-hit-marker{z-index:5;border-radius:50%;width:16px;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%)}.rhythm-hit-marker.perfect{background:#0ff;box-shadow:0 0 15px #0ff9}.rhythm-hit-marker.great{background:#22c55e;box-shadow:0 0 10px #22c55e80}.rhythm-hit-marker.good{background:#eab308;box-shadow:0 0 10px #eab30880}.rhythm-hit-marker.rushing{background:#ef4444;box-shadow:0 0 10px #ef444480}.rhythm-hit-marker.dragging{background:#f97316;box-shadow:0 0 10px #f9731680}.rhythm-error-label{white-space:nowrap;font-family:JetBrains Mono,monospace;font-size:.625rem;font-weight:700;position:absolute;top:calc(50% + 18px);transform:translate(-50%)}.rhythm-error-label.early{color:#ef4444}.rhythm-error-label.late{color:#f97316}.rhythm-error-label.perfect{color:#0ff}.rhythm-pad-container{flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:200px;padding:16px;display:flex;position:relative;overflow:hidden}.rhythm-pad{border-radius:var(--neu-radius-xl);background:  repeating-linear-gradient(0deg,transparent,transparent 2px,#ffffff05 2px,#ffffff05 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,#ffffff05 2px,#ffffff05 4px),linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-deep));box-shadow:var(--neu-shadow-inset),inset 0 0 60px #0000004d;border:2px solid var(--neu-border);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition:all 50ms ease-out;display:flex;position:absolute;inset:0}.rhythm-pad:active,.rhythm-pad.pressed{background:repeating-linear-gradient(0deg,transparent,transparent 2px,#00ffff08 2px,#00ffff08 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,#00ffff08 2px,#00ffff08 4px),linear-gradient(145deg,var(--neu-bg-deep),var(--neu-bg-base));box-shadow:var(--neu-shadow-pressed),inset 0 0 80px #00ffff1a;border-color:#00ffff4d;transform:scale(.995)}.rhythm-pad.disabled{opacity:.5;cursor:not-allowed}.rhythm-pad-label{color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.2em;pointer-events:none;font-size:1.5rem;font-weight:800;transition:all .1s ease-out}.rhythm-pad:active .rhythm-pad-label,.rhythm-pad.pressed .rhythm-pad-label{color:#0ff;text-shadow:0 0 20px #00ffff80}.rhythm-ripple{pointer-events:none;background:radial-gradient(circle,#0ff6 0%,#0000 70%);border-radius:50%;animation:.6s ease-out forwards rhythm-ripple-expand;position:absolute}@keyframes rhythm-ripple-expand{0%{opacity:1;width:0;height:0}to{opacity:0;width:300px;height:300px}}.rhythm-status-overlay{color:var(--neu-text-secondary);pointer-events:none;z-index:10;align-items:center;gap:8px;font-size:.875rem;font-weight:600;display:flex;position:absolute;top:24px;left:50%;transform:translate(-50%)}.rhythm-status-dot{background:#ef4444;border-radius:50%;width:8px;height:8px;animation:1s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.rhythm-score-display{text-align:center;flex-direction:column;align-items:center;gap:16px;animation:.3s ease-out rhythm-score-pop;display:flex}@keyframes rhythm-score-pop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.rhythm-score-value{color:var(--neu-accent);text-shadow:0 0 40px var(--neu-accent-glow);font-size:5rem;font-weight:900;line-height:1}.rhythm-score-feedback{color:var(--neu-text-secondary);font-size:1.25rem;font-weight:600}.rhythm-score-feedback.excellent{color:#22c55e}.rhythm-score-feedback.good{color:#3b82f6}.rhythm-diagnosis{background:var(--neu-bg-elevated);border-radius:var(--neu-radius-md);box-shadow:var(--neu-shadow-raised-sm);flex-wrap:wrap;justify-content:center;gap:32px;margin-top:24px;padding:24px;display:flex}.rhythm-diagnosis-item{flex-direction:column;align-items:center;gap:4px;display:flex}.rhythm-diagnosis-value{font-family:Space Grotesk,monospace;font-size:32px;font-weight:600;line-height:1.2;display:block}.rhythm-diagnosis-value.perfect{color:#0ff}.rhythm-diagnosis-value.great{color:#22c55e}.rhythm-diagnosis-value.good{color:#eab308}.rhythm-diagnosis-value.miss{color:#ef4444}.rhythm-diagnosis-label{color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.625rem;font-weight:600}.rhythm-score-actions{gap:12px;margin-top:24px;display:flex}.rhythm-action-btn{border-radius:var(--neu-radius-md);cursor:pointer;transition:all var(--neu-transition-normal);padding:12px 24px;font-size:.875rem;font-weight:700}.rhythm-action-btn.primary{background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent-dark));box-shadow:var(--neu-shadow-raised-sm),var(--neu-glow-accent);color:#fff;border:none}.rhythm-action-btn.secondary{background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);color:var(--neu-text-secondary)}.rhythm-action-btn:active{transform:scale(.98)}.rhythm-pad.countdown{background:linear-gradient(145deg,#fff,var(--neu-bg-surface));box-shadow:var(--neu-shadow-raised-sm),inset 0 0 20px #ff6b000d;border-color:var(--neu-accent-light)}@keyframes rhythm-countdown-pulse{0%{opacity:0;transform:scale(1.5)}50%{opacity:1}to{opacity:1;transform:scale(1)}}.rhythm-infinite-dashboard{background:var(--neu-bg-surface);border-radius:var(--neu-radius-md);box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);justify-content:center;align-items:center;gap:24px;width:100%;margin-bottom:16px;padding:16px;display:flex}@media (max-width:640px){.rhythm-infinite-dashboard{gap:12px;padding:12px 8px}.rhythm-infinite-stat-value{font-size:20px}}.rhythm-infinite-stat{flex-direction:column;align-items:center;min-width:40px;display:flex}.rhythm-infinite-stat-label{color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.625rem;font-weight:700}.rhythm-infinite-stat-value{font-family:JetBrains Mono,monospace;font-size:1.125rem;font-weight:800}.rhythm-infinite-stat-value.time{color:var(--neu-accent)}.rhythm-infinite-stat-value.score{color:#eab308}.rhythm-infinite-stat-value.accuracy{color:#22c55e}.rhythm-divider{background:var(--neu-border);width:1px;height:32px}.rhythm-idle{color:var(--neu-text-muted);opacity:.6;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.rhythm-patterns-grid{grid-template-columns:repeat(4,1fr);gap:12px;width:100%;margin-bottom:20px;padding:4px;display:grid}@media (max-width:640px){.rhythm-patterns-grid{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}}.rhythm-pattern-card{background:var(--neu-bg-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius-md);box-shadow:var(--neu-shadow-raised-sm);cursor:pointer;flex-direction:column;min-height:100px;padding:12px 8px;transition:all .25s;display:flex;position:relative}@media (max-width:640px){.rhythm-pattern-card{border-radius:8px;min-height:70px;padding:6px 4px}.rhythm-notation-wrapper{min-height:40px;margin-bottom:6px}}.rhythm-pattern-card:hover{border-color:var(--neu-accent);transform:translateY(-4px);box-shadow:0 12px 32px #e07a3d26}.rhythm-notation-wrapper{background:#ffffff6b;border:1px solid #ffffff94;border-radius:8px;justify-content:center;align-items:center;min-height:80px;margin-bottom:12px;display:flex;overflow:hidden}@media (min-width:640px){.rhythm-patterns-grid{grid-template-columns:repeat(8,1fr)}}.rhythm-pattern-card.active{border-color:var(--neu-accent);box-shadow:var(--neu-shadow-raised-sm),0 0 20px var(--neu-accent-glow);transform:scale(1.05)}.rhythm-pattern-card-index{color:var(--neu-text-muted);font-family:Space Grotesk,monospace;font-size:14px;font-weight:600;position:absolute;top:8px;left:8px}.rhythm-pattern-card.active .rhythm-pattern-card-index{color:var(--neu-accent)}.rhythm-pattern-card svg{width:100%;height:auto;fill:var(--neu-text-secondary)}.rhythm-pattern-card.active svg{fill:var(--neu-accent)}.rhythm-subbeat-row{border-top:1px solid var(--neu-border);justify-content:center;gap:6px;width:100%;padding-top:12px;display:flex}.rhythm-subbeat-dot{background:var(--neu-bg-deep);border:1px solid var(--neu-border);border-radius:50%;width:8px;height:8px;transition:all .2s}.rhythm-subbeat-dot.hit-perfect{background:#22c55e;border-color:#22c55e;box-shadow:0 0 12px #22c55e80}.rhythm-subbeat-dot.hit-great{background:#34d399;border-color:#34d399}.rhythm-subbeat-dot.hit-good{background:#eab308;border-color:#eab308}.rhythm-subbeat-dot.hit-miss{background:#ef4444;border-color:#ef4444}.rhythm-subbeat-dot.on{background:var(--neu-text-muted)}.rhythm-subbeat-dot.active{background:var(--neu-accent);box-shadow:0 0 8px var(--neu-accent-glow);transform:scale(1.25)}.rhythm-subbeat-dot.hit-perfect{background:#0ff}.rhythm-subbeat-dot.hit-great{background:#22c55e}.rhythm-subbeat-dot.hit-good{background:#eab308}.rhythm-subbeat-dot.hit-miss{background:#ef4444}.satellite-container{justify-content:space-between;align-items:center;gap:20px;width:100%;height:100%;min-height:280px;padding:20px;display:flex;position:relative}.satellite-container.centered{justify-content:center}.satellite-container.centered .controls-group-left{flex-direction:row;gap:24px}.satellite-container.centered .satellite-play-btn{width:100px;height:100px}.satellite-container.centered .satellite-play-icon{width:40px;height:40px}.controls-group-left{z-index:5;flex-direction:column;align-items:center;gap:16px;display:flex}.satellite-settings-btn{background:linear-gradient(145deg,var(--neu-bg-elevated),var(--neu-bg-surface));width:44px;height:44px;box-shadow:var(--neu-shadow-raised-sm);border:1px solid var(--neu-border);color:var(--neu-text-muted);cursor:pointer;transition:all var(--neu-transition-normal);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.satellite-settings-btn svg{width:18px;height:18px}.satellite-settings-btn:hover{color:var(--neu-accent);box-shadow:var(--neu-shadow-raised),0 0 12px var(--neu-accent-glow);transform:scale(1.08)}.satellite-settings-btn:active{box-shadow:var(--neu-shadow-pressed);transform:scale(.95)}.satellite-play-btn{background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-elevated));width:80px;height:80px;box-shadow:var(--neu-shadow-raised),inset 0 1px 0 #ffffff1a;border:2px solid var(--neu-border);color:var(--neu-text-primary);cursor:pointer;transition:all var(--neu-transition-normal);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.satellite-wheel-container{flex-shrink:0;justify-content:center;align-items:center;display:flex}.satellite-wheel-wrapper{background:var(--neu-bg-base);border-radius:50%;justify-content:center;align-items:center;width:220px;height:220px;display:flex;position:relative;box-shadow:8px 8px 24px #00000026,-4px -4px 16px #ffffffb3,inset 0 0 0 2px #ffffff1a}.satellite-wheel{background:conic-gradient(from 0deg,var(--neu-bg-surface)0deg,var(--neu-bg-elevated)90deg,var(--neu-bg-surface)180deg,var(--neu-bg-deep)270deg,var(--neu-bg-surface)360deg);border:2px solid var(--neu-border);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;width:220px;height:220px;position:absolute;box-shadow:inset 0 0 0 2px #ffffff14,inset 0 0 40px #0000001a}.satellite-wheel:active{cursor:grabbing}.satellite-wheel-ticks{pointer-events:none;width:200px;height:200px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.jog-wheel-tick{background:var(--neu-text-muted);transform-origin:bottom;opacity:.6;border-radius:1px;width:2px;height:10px;position:absolute;top:0;left:50%}.jog-wheel-tick.major{background:var(--neu-text-secondary);opacity:.8;width:3px;height:16px}.satellite-wheel-indicator{background:var(--neu-accent);width:8px;height:8px;box-shadow:0 0 15px var(--neu-accent-glow);border-radius:50%;position:absolute;top:10px;left:50%;transform:translate(-50%)}.satellite-wheel-center{background:linear-gradient(145deg,var(--neu-bg-surface),var(--neu-bg-deep));width:100px;height:100px;box-shadow:var(--neu-shadow-inset),0 0 16px #00000080;border:1px solid var(--neu-border);pointer-events:auto;cursor:pointer;transition:all var(--neu-transition-normal);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.satellite-wheel-center:hover{box-shadow:var(--neu-shadow-inset),0 0 30px #00000080,0 0 15px var(--neu-accent-glow)}.satellite-wheel-value{color:var(--neu-accent);text-shadow:0 0 15px var(--neu-accent-glow);font-size:2rem;font-weight:900;line-height:1}.satellite-wheel-label{color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.15em;font-size:.65rem;font-weight:700}.satellite-wheel-center.tap-active{border-color:var(--neu-accent);box-shadow:var(--neu-shadow-inset),0 0 20px var(--neu-accent-glow),inset 0 0 10px #00ffff1a;animation:.15s ease-out tap-pulse}.satellite-wheel-center.tap-success{box-shadow:var(--neu-shadow-inset),0 0 30px #22c55e80;border-color:#22c55e}@keyframes tap-pulse{0%{transform:translate(-50%,-50%)scale(.95)}50%{transform:translate(-50%,-50%)scale(1.02)}to{transform:translate(-50%,-50%)scale(1)}}.tap-indicator-dots{gap:4px;display:flex;position:absolute;top:8px}.tap-dot{background:var(--neu-accent);width:6px;height:6px;box-shadow:0 0 6px var(--neu-accent-glow);border-radius:50%;animation:.2s ease-out dot-appear}@keyframes dot-appear{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.satellite-play-glow{pointer-events:none;background:radial-gradient(circle,#0ff6 0%,#0000 70%);border-radius:50%;transition:opacity .3s ease-out;position:absolute;inset:-8px}.satellite-play-btn:hover{box-shadow:var(--neu-shadow-raised),0 0 30px #00ffff4d;border-color:#00ffff4d;transform:scale(1.05)}.satellite-play-btn:active{box-shadow:var(--neu-shadow-pressed);transform:scale(.95)}.satellite-play-btn.playing{background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent-dark));box-shadow:var(--neu-shadow-raised),0 0 30px var(--neu-accent-glow);border-color:var(--neu-accent);color:#fff}.satellite-play-btn.playing:hover{box-shadow:var(--neu-shadow-raised),0 0 40px var(--neu-accent-glow)}.satellite-play-icon{z-index:2;width:32px;height:32px;position:relative}.sound-selector-inline{flex-direction:column;gap:8px;padding:8px 0;display:flex}.sound-track-tabs{justify-content:center;gap:8px;padding:0 12px;display:flex}.sound-track-tab{background:var(--neu-bg-surface);color:var(--neu-text-secondary);cursor:pointer;border:none;border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .2s;display:flex;box-shadow:2px 2px 6px #00000014,-2px -2px 6px #fff9}.sound-track-tab:hover{background:var(--neu-bg-elevated)}.sound-track-tab.active{background:var(--neu-accent);color:var(--neu-bg-deep);box-shadow:0 0 12px var(--neu-accent-glow),inset 0 1px 0 #fff3}.sound-track-tab .tab-icon{font-size:14px}.sound-track-tab .tab-label{font-size:12px}.sound-chips-container{-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0;overflow-x:auto}.sound-chips-container::-webkit-scrollbar{display:none}.sound-chips-scroll{gap:8px;min-width:max-content;padding:4px 16px;display:flex}.sound-chip{border:1px solid var(--neu-border);background:var(--neu-bg-surface);color:var(--neu-text-secondary);cursor:pointer;white-space:nowrap;border-radius:16px;flex-shrink:0;padding:8px 14px;font-size:12px;font-weight:500;transition:all .2s;box-shadow:2px 2px 6px #0000000f,-1px -1px 4px #ffffff80}.sound-chip:hover{background:var(--neu-bg-elevated);border-color:var(--neu-text-muted)}.sound-chip.selected{background:linear-gradient(135deg,var(--neu-accent)0%,#00b3b3 100%);color:var(--neu-bg-deep);border-color:var(--neu-accent);box-shadow:0 0 10px var(--neu-accent-glow),inset 0 1px 0 #fff3}.sound-chip .chip-name{display:block}.metronome-layout{flex-direction:column;gap:24px;height:100%;padding-bottom:20px;display:flex;position:relative}.metronome-dashboard{-webkit-backdrop-filter:blur(16px);z-index:10;background:#ecf0f3a6;border-radius:32px;flex-direction:column;gap:16px;padding:20px 16px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;box-shadow:8px 8px 16px #a6b4c866,-8px -8px 16px #fffc,inset 0 0 0 1px #fff6}.metronome-deck{flex:1;justify-content:center;align-items:center;min-height:200px;margin-bottom:60px;display:flex;position:relative}.metronome-dashboard .rhythm-sequencer{box-shadow:none;background:0 0;margin:0;padding:0}.metronome-dashboard .sound-selector-inline{padding:0}@media (max-height:700px){.metronome-layout{gap:16px}.metronome-dashboard{border-radius:24px;gap:12px;padding:16px}}.bpm-slider-container{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:360px;padding:0 16px;display:flex}.bpm-display{background:var(--neu-bg-elevated);border-radius:var(--neu-radius-xl);box-shadow:var(--neu-shadow-raised);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;padding:24px 32px;transition:all .2s;display:flex}.bpm-display.tap-active{box-shadow:var(--neu-shadow-raised),0 0 20px var(--neu-accent-glow)}.bpm-display.tap-success{transform:scale(.98)}.bpm-value-container{flex-direction:column;align-items:center;gap:2px;display:flex}.bpm-value{color:var(--neu-text-primary);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:center;letter-spacing:-.02em;min-width:100px;font-family:Outfit,Inter,SF Pro Display,-apple-system,sans-serif;font-size:3.5rem;font-weight:800;line-height:1}.bpm-label{color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;font-weight:600}.bpm-adjust-btn{background:var(--neu-bg-surface);width:40px;height:40px;color:var(--neu-text-muted);cursor:pointer;box-shadow:var(--neu-shadow-raised-sm);border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .15s;display:flex}.bpm-adjust-btn:hover{color:var(--neu-accent)}.bpm-adjust-btn:active{box-shadow:var(--neu-shadow-inset-sm);transform:scale(.95)}.tap-btn{border-radius:var(--neu-radius-full);border:1px solid var(--neu-text-muted);color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;background:0 0;margin-top:12px;padding:6px 20px;font-size:.75rem;font-weight:700;transition:all .15s}.tap-btn:hover{border-color:var(--neu-accent);color:var(--neu-accent)}.tap-btn.active{background:var(--neu-accent);border-color:var(--neu-accent);color:#fff;box-shadow:0 0 12px var(--neu-accent-glow)}.tap-hint{color:var(--neu-text-muted);opacity:.6;margin-top:4px;font-size:.625rem}.beat-indicator{background:var(--neu-bg-deep);border-radius:var(--neu-radius-full);gap:8px;padding:8px 16px;display:flex}.beat-dot{background:var(--neu-text-muted);opacity:.3;border-radius:50%;width:8px;height:8px;transition:all .1s}.beat-dot.active{background:var(--neu-accent);opacity:1;box-shadow:0 0 8px var(--neu-accent-glow);transform:scale(1.3)}.beat-dot.downbeat{background:var(--neu-accent);box-shadow:0 0 12px var(--neu-accent-glow);transform:scale(1.5)}.bpm-slider-track{background:var(--neu-bg-deep);border-radius:var(--neu-radius-full);width:100%;height:40px;box-shadow:var(--neu-shadow-inset);cursor:pointer;touch-action:none;outline:none;position:relative}.bpm-slider-track:focus{box-shadow:var(--neu-shadow-inset),0 0 0 2px var(--neu-accent-glow)}.bpm-slider-fill{background:linear-gradient(90deg,var(--neu-accent-light),var(--neu-accent));border-radius:var(--neu-radius-full);pointer-events:none;height:calc(100% - 8px);transition:width 50ms ease-out;position:absolute;top:4px;left:4px}.bpm-slider-thumb{background:var(--neu-bg-elevated);width:32px;height:32px;box-shadow:var(--neu-shadow-raised-sm),0 0 0 2px var(--neu-accent);pointer-events:none;border-radius:50%;transition:transform .1s,box-shadow .15s;position:absolute;top:50%;transform:translate(-50%,-50%)}.bpm-slider-thumb.dragging{box-shadow:var(--neu-shadow-raised),0 0 0 3px var(--neu-accent),0 0 20px var(--neu-accent-glow);transform:translate(-50%,-50%)scale(1.1)}.bpm-preset-tick{cursor:pointer;z-index:5;padding-top:8px;position:absolute;top:100%;transform:translate(-50%)}.bpm-preset-tick:before{content:"";background:var(--neu-text-muted);opacity:.4;border-radius:1px;width:2px;height:6px;position:absolute;top:0;left:50%;transform:translate(-50%)}.bpm-preset-label{color:var(--neu-text-muted);opacity:.6;font-size:.625rem;font-weight:600;transition:all .15s}.bpm-preset-tick:hover .bpm-preset-label{color:var(--neu-accent);opacity:1}.bpm-range-labels{width:100%;color:var(--neu-text-muted);opacity:.5;justify-content:space-between;margin-top:24px;padding:0 4px;font-size:.625rem;font-weight:600;display:flex}.mode-panel{width:100%;max-width:400px}.mode-action-btn{border-radius:var(--neu-radius-full);background:linear-gradient(145deg,var(--neu-accent-light),var(--neu-accent));color:#fff;cursor:pointer;box-shadow:var(--neu-shadow-raised-sm),0 0 12px var(--neu-accent-glow);border:none;padding:12px 24px;font-size:.875rem;font-weight:700;transition:all .15s}.mode-action-btn:hover{box-shadow:var(--neu-shadow-raised),0 0 20px var(--neu-accent-glow);transform:translateY(-1px)}.mode-action-btn:active{box-shadow:var(--neu-shadow-pressed);transform:translateY(1px)}.bpm-slider-flat{flex-direction:column;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex}.bpm-controls-row{background:var(--neu-bg-elevated);border-radius:var(--neu-radius-lg);box-shadow:var(--neu-shadow-raised-sm);justify-content:center;align-items:center;gap:12px;padding:12px 16px;display:flex}@media (max-width:360px){.bpm-controls-row{gap:6px;padding:8px}}.tap-btn-inline{border-radius:var(--neu-radius-full);border:1px solid var(--neu-text-muted);color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;background:0 0;margin-left:8px;padding:6px 16px;font-size:.7rem;font-weight:700;transition:all .15s}.tap-btn-inline:hover{border-color:var(--neu-accent);color:var(--neu-accent)}.tap-btn-inline.active{background:var(--neu-accent);border-color:var(--neu-accent);color:#fff;box-shadow:0 0 8px var(--neu-accent-glow)}.bpm-display-simple{background:var(--neu-bg-elevated);border-radius:var(--neu-radius-lg);box-shadow:var(--neu-shadow-raised-sm);flex-direction:column;justify-content:center;align-items:center;padding:16px 24px;display:flex}.bpm-value-large{color:var(--neu-text-primary);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:center;letter-spacing:-.01em;min-width:100px;font-family:Outfit,Inter,SF Pro Display,-apple-system,sans-serif;font-size:2.5rem;font-weight:800;line-height:1}.bpm-label-large{color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.15em;font-size:.875rem;font-weight:600}