@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Syne:wght@400;500;600;700&display=swap";:root{--bg-primary: #0f0d0b;--bg-secondary: #1a1714;--bg-tertiary: #252019;--bg-elevated: #302a21;--bg-panel: #1e1b17;--metal-dark: #2a2520;--metal-mid: #3d352c;--metal-light: #4a4035;--metal-highlight: #5a4d42;--accent-glucose-low: #6b9ac4;--accent-glucose-normal: #8fbc8f;--accent-glucose-high: #d4a574;--accent-glucose-danger: #c97064;--accent-primary: #e8a87c;--accent-secondary: #85677b;--accent-tertiary: #9b8a7c;--text-primary: #f0e6d8;--text-secondary: #b8a99a;--text-muted: #6b5d52;--text-label: #8a7d6d;--border-color: rgba(240, 230, 216, .08);--glow-color: rgba(232, 168, 124, .4);--screw-color: #3a3330;--led-off: #2a2520;--led-on: #e8a87c;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--font-display: "Syne", system-ui, sans-serif;--font-mono: "IBM Plex Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow-x:hidden;overflow-y:auto}body{font-family:var(--font-display);background:var(--bg-primary);background-image:radial-gradient(ellipse at 50% 0%,rgba(232,168,124,.03) 0%,transparent 50%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-blend-mode:normal,overlay;color:var(--text-primary);line-height:1.5}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:5px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--metal-light) 0%,var(--metal-dark) 100%);border-radius:5px;border:2px solid var(--bg-primary)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--metal-highlight) 0%,var(--metal-mid) 100%)}.app-container{display:flex;flex-direction:column;height:100vh;max-height:100vh;padding:var(--spacing-sm);gap:var(--spacing-sm);max-width:1500px;margin:0 auto;overflow:hidden}.app-container>.keyboard-section{margin-top:calc(-1 * var(--spacing-sm) + 16px)}.header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xs) var(--spacing-md);background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-radius:var(--radius-lg);border:1px solid rgba(0,0,0,.3);box-shadow:inset 0 1px #ffffff14,inset 0 -1px #0003,0 4px 20px #0006;flex-shrink:0}.logo{display:flex;align-items:center;gap:var(--spacing-sm)}.logo-icon{width:32px;height:32px;background:linear-gradient(145deg,var(--accent-primary),#c48a5c);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #e8a87c66,inset 0 1px #ffffff4d,inset 0 -1px #0003}.logo-icon svg{width:18px;height:18px;stroke:var(--bg-primary);fill:none}.logo-text{font-size:1.2rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);text-shadow:0 2px 4px rgba(0,0,0,.5)}.header-controls{display:flex;align-items:center;gap:var(--spacing-sm)}.file-loader-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);font-family:var(--font-mono);font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);background:linear-gradient(180deg,var(--metal-light) 0%,var(--metal-mid) 100%);border:1px solid rgba(0,0,0,.3);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;position:relative;box-shadow:inset 0 1px #ffffff1a,0 2px 6px #0000004d}.file-loader-btn:hover{background:linear-gradient(180deg,var(--metal-highlight) 0%,var(--metal-light) 100%);color:var(--text-primary);box-shadow:inset 0 1px #ffffff26,0 0 20px #e8a87c33}.file-loader-btn:active{box-shadow:inset 0 2px 4px #0006}.file-loader-btn.drag-over{border-color:var(--accent-primary);box-shadow:inset 0 1px #ffffff26,0 0 25px #e8a87c66}.file-loader-btn.loaded{border-color:var(--accent-glucose-normal);color:var(--accent-glucose-normal)}.file-loader-btn.loaded .file-icon{opacity:1}.file-loader-btn .file-icon{font-size:1rem;opacity:.7;transition:opacity .2s}.file-loader-btn .file-label{white-space:nowrap}.file-loader-btn #file-input{position:absolute;inset:0;opacity:0;cursor:pointer}.file-loader-btn.loading{pointer-events:none;opacity:.7}.file-loader-btn.loading .file-icon{animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.midi-selector{display:flex;align-items:center;gap:var(--spacing-xs);padding:2px var(--spacing-sm);background:#0000004d;border-radius:var(--radius-md);border:1px solid rgba(0,0,0,.2)}.midi-selector .midi-icon{font-size:.85rem;opacity:.7}#midi-device-select{font-family:var(--font-mono);font-size:.6rem;color:var(--text-secondary);background:linear-gradient(180deg,var(--metal-light) 0%,var(--metal-mid) 100%);border:1px solid rgba(0,0,0,.3);border-radius:var(--radius-sm);padding:3px var(--spacing-sm);padding-right:20px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a7d6d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;min-width:120px;max-width:180px;transition:all .2s ease;box-shadow:inset 0 1px #ffffff14,0 2px 4px #0000004d}#midi-device-select:hover:not(:disabled){background-color:var(--metal-highlight);color:var(--text-primary)}#midi-device-select:focus{outline:none;border-color:var(--accent-primary);box-shadow:inset 0 1px #ffffff14,0 0 8px #e8a87c4d}#midi-device-select:disabled{opacity:.5;cursor:not-allowed}#midi-device-select option{background:var(--bg-secondary);color:var(--text-primary);padding:var(--spacing-xs)}.midi-status-indicator{width:8px;height:8px;border-radius:50%;background:var(--led-off);box-shadow:inset 0 1px 2px #00000080;transition:all .3s ease;flex-shrink:0}.midi-status-indicator.connected{background:var(--accent-glucose-normal);box-shadow:0 0 10px var(--accent-glucose-normal)}.midi-info-btn{position:relative;display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:1px solid rgba(0,0,0,.3);border-radius:50%;background:linear-gradient(180deg,var(--metal-light) 0%,var(--metal-mid) 100%);color:var(--text-secondary);cursor:help;flex-shrink:0;box-shadow:inset 0 1px #ffffff14,0 1px 3px #0000004d;transition:color .2s ease,border-color .2s ease}.midi-info-btn:hover,.midi-info-btn:focus-visible,.midi-info-btn.tooltip-visible{color:var(--text-primary);border-color:var(--accent-primary);outline:none}.midi-info-icon{font-family:var(--font-mono);font-size:.65rem;font-weight:700;line-height:1}.midi-info-tooltip{position:absolute;top:calc(100% + 8px);right:0;z-index:100;width:240px;padding:var(--spacing-sm);border-radius:var(--radius-md);border:1px solid rgba(0,0,0,.4);background:var(--bg-secondary);color:var(--text-secondary);font-family:var(--font-sans);font-size:.7rem;line-height:1.45;text-align:left;box-shadow:0 8px 24px #00000073;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}.midi-info-btn:hover .midi-info-tooltip,.midi-info-btn:focus-visible .midi-info-tooltip,.midi-info-btn.tooltip-visible .midi-info-tooltip{opacity:1;visibility:visible;transform:translateY(0)}.main-content{display:flex;flex-direction:column;gap:var(--spacing-sm);min-height:0;flex:0 0 auto;overflow:hidden}.main-content #effects-panel{margin-bottom:calc(-1 * var(--spacing-sm))}.synth-rack{display:flex;gap:var(--spacing-md);background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-radius:var(--radius-lg);border:2px solid var(--metal-dark);padding:var(--spacing-md) var(--spacing-md);box-shadow:inset 0 1px #ffffff14,0 4px 20px #0000004d;flex-shrink:0}.synth-rack #oscillator-mixer{flex:1;min-width:0}.synth-rack #synth-controls{flex-shrink:0}.rack-divider{width:1px;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.1) 20%,rgba(255,255,255,.1) 80%,transparent 100%);margin:0 var(--spacing-xs)}.oscillator-mixer{background:transparent;border:none;padding:0;box-shadow:none;position:relative;display:flex;flex-direction:column}.oscillator-mixer:not(.synth-rack .oscillator-mixer){background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-radius:var(--radius-lg);border:2px solid var(--metal-dark);padding:var(--spacing-md);box-shadow:inset 0 1px #ffffff14,0 4px 20px #0000004d}.mixer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs);padding-bottom:var(--spacing-xs);border-bottom:1px solid rgba(0,0,0,.3)}.mixer-header h3{font-family:var(--font-mono);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--text-label)}.randomize-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary);background:linear-gradient(180deg,var(--metal-light) 0%,var(--metal-mid) 100%);border:1px solid rgba(0,0,0,.3);border-radius:var(--radius-sm);cursor:pointer;box-shadow:inset 0 1px #ffffff1a,0 2px 4px #0000004d;transition:all .2s ease}.randomize-btn:hover{background:linear-gradient(180deg,var(--metal-highlight) 0%,var(--metal-light) 100%)}.randomize-btn:active{box-shadow:inset 0 2px 4px #0000004d}.dice-icon{font-size:1rem}.oscillator-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.oscillator-slot{background:linear-gradient(180deg,#1a1815,#0f0d0b);border-radius:var(--radius-md);border:2px solid var(--metal-dark);padding:var(--spacing-sm) var(--spacing-md);display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:all .25s ease;position:relative;box-shadow:inset 0 2px 10px #0006,0 2px 8px #0003}.oscillator-slot:hover{border-color:var(--accent-primary);box-shadow:inset 0 2px 10px #0006,0 0 20px #e8a87c33}.oscillator-slot.selecting{border-color:var(--accent-secondary);animation:osc-pulse 1.5s ease-in-out infinite}@keyframes osc-pulse{0%,to{box-shadow:0 0 15px #85677b4d}50%{box-shadow:0 0 30px #85677b80}}.osc-label{font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--accent-primary);text-transform:uppercase;letter-spacing:.1em;padding:2px 8px;background:#e8a87c1a;border-radius:var(--radius-sm)}.osc-waveform{width:60px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--accent-glucose-normal);filter:drop-shadow(0 0 6px rgba(143,188,143,.4))}.osc-waveform svg{width:100%;height:100%}.osc-waveform .empty-slot{font-family:var(--font-mono);font-size:.55rem;color:var(--text-muted);text-transform:uppercase}.osc-day-selector{display:flex;align-items:center;gap:4px;cursor:pointer;padding:2px 6px;border-radius:var(--radius-sm);transition:all .15s ease}.osc-day-selector:hover{background:#e8a87c26}.osc-day-label{font-family:var(--font-mono);font-size:.65rem;color:var(--text-secondary)}.osc-day-selector .dropdown-arrow{color:var(--text-muted);transition:transform .2s ease}.oscillator-slot.dropdown-open .osc-day-selector .dropdown-arrow{transform:rotate(180deg)}.osc-level{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}.osc-level .level-label{font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em}.level-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:linear-gradient(180deg,#0a0908,#151210);border-radius:3px;cursor:pointer;box-shadow:inset 0 2px 4px #00000080}.level-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:linear-gradient(145deg,var(--metal-highlight),var(--metal-mid));border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0006}.osc-clear-btn{position:absolute;top:6px;right:6px;width:18px;height:18px;font-size:.65rem;color:var(--text-muted);background:transparent;border:none;border-radius:50%;cursor:pointer;opacity:0;transition:all .2s}.oscillator-slot:hover .osc-clear-btn{opacity:1}.osc-clear-btn:hover{color:var(--accent-glucose-danger);background:#c9706433}.osc-waveform-preview{position:absolute;left:0;right:0;top:100%;margin-top:8px;background:linear-gradient(180deg,#0c0a08,#080706);border:2px solid var(--metal-dark);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-md);z-index:100;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 30px #0009,inset 0 0 40px #00000080,0 0 0 1px #8fbc8f1a;pointer-events:none}.osc-waveform-preview.active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.osc-waveform-preview:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);border-radius:var(--radius-lg);z-index:1}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs);padding:0 var(--spacing-xs)}.preview-date{font-family:var(--font-mono);font-size:.75rem;font-weight:600;color:var(--text-primary);letter-spacing:.02em}.preview-stats{font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);letter-spacing:.02em}.preview-canvas{width:100%;height:100px;display:block;border-radius:var(--radius-md)}.preview-time-labels{display:flex;justify-content:space-between;padding:var(--spacing-xs) var(--spacing-xs) 0;font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);opacity:.6}.oscillator-slot:hover{border-color:var(--accent-primary);z-index:10}.osc-dropdown-panel{position:absolute;top:100%;left:-2px;right:-2px;margin-top:4px;background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);border:2px solid var(--accent-primary);border-radius:var(--radius-md);box-shadow:0 12px 40px #0009,inset 0 0 20px #0000004d;max-height:0;overflow:hidden;opacity:0;transition:all .25s cubic-bezier(.4,0,.2,1);z-index:200}.oscillator-slot.dropdown-open .osc-dropdown-panel{max-height:280px;opacity:1}.oscillator-slot.dropdown-open{border-color:var(--accent-primary);z-index:50}.dropdown-empty{padding:var(--spacing-md);text-align:center;color:var(--text-muted);font-size:.75rem;font-style:italic}.osc-day-list{max-height:260px;overflow-y:auto;padding:var(--spacing-xs)}.osc-day-list::-webkit-scrollbar{width:5px}.osc-day-list::-webkit-scrollbar-track{background:#0003;border-radius:3px}.osc-day-list::-webkit-scrollbar-thumb{background:var(--metal-light);border-radius:3px}.osc-day-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);margin-bottom:2px;border-radius:var(--radius-sm);cursor:pointer;transition:all .12s ease;border:1px solid transparent;background:transparent}.osc-day-item:hover{background:#e8a87c26;border-color:#e8a87c4d}.osc-day-item.selected{background:linear-gradient(135deg,#e8a87c33,#e8a87c14);border-color:var(--accent-primary)}.osc-day-item.selected:after{content:"✓";margin-left:var(--spacing-xs);color:var(--accent-primary);font-weight:700;font-size:.7rem}.osc-day-item .day-info{flex:1;min-width:0}.osc-day-item .day-date{font-size:.7rem;font-weight:600;color:var(--text-primary);margin-bottom:1px}.osc-day-item .day-stats{display:flex;gap:var(--spacing-xs);font-family:var(--font-mono);font-size:.55rem;color:var(--text-muted)}.osc-day-item .stat{opacity:.8}.osc-day-item .stat.tir{padding:1px 4px;border-radius:2px;font-weight:500}.osc-day-item .stat.tir.good{background:#8fbc8f40;color:var(--accent-glucose-normal)}.osc-day-item .stat.tir.warning{background:#d4a57440;color:var(--accent-glucose-high)}.osc-day-item .stat.tir.bad{background:#c9706440;color:var(--accent-glucose-danger)}.osc-day-item .day-waveform{width:40px;height:20px;opacity:.5;flex-shrink:0;color:var(--accent-primary)}.osc-day-item:hover .day-waveform,.osc-day-item.selected .day-waveform{opacity:1}.osc-day-item .day-waveform svg{width:100%;height:100%}.synth-controls{background:transparent;border:none;padding:0;box-shadow:none}.synth-controls:not(.synth-rack .synth-controls){flex:1;background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-radius:var(--radius-lg);border:2px solid var(--metal-dark);padding:var(--spacing-sm) var(--spacing-md);box-shadow:inset 0 1px #ffffff14,0 4px 20px #0000004d}.controls-faceplate{display:flex;gap:var(--spacing-md);align-items:flex-start}.controls-section{display:flex;flex-direction:column;gap:2px}.section-label{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:2px}.label-text{font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-label);white-space:nowrap}.section-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.1) 0%,transparent 100%)}.adsr-section{flex:0 0 auto}.adsr-controls{display:flex;gap:var(--spacing-sm);justify-content:center}.volume-section{padding-left:var(--spacing-sm);border-left:1px solid rgba(255,255,255,.05)}.knob-wrapper{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:40px}.knob-wrapper.knob-large .knob-container{width:44px;height:44px}.knob-wrapper.knob-large .knob{width:32px;height:32px}.knob-label{font-family:var(--font-mono);font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-label)}.knob-container{position:relative;width:38px;height:38px;display:flex;align-items:center;justify-content:center}.dial-indicators{position:absolute;top:0;left:0;width:100%;height:100%}.dial-indicators .tick-major{stroke:var(--text-secondary);stroke-width:2}.dial-indicators .tick-minor{stroke:var(--text-muted);stroke-width:1;opacity:.5}.knob{position:relative;width:24px;height:24px;background:linear-gradient(145deg,var(--metal-highlight) 0%,var(--metal-dark) 100%);border-radius:50%;cursor:pointer;box-shadow:0 3px 8px #00000080,inset 0 1px 3px #ffffff1a,inset 0 -1px 3px #0000004d;transition:box-shadow .15s ease}.knob:hover{box-shadow:0 4px 15px #0009,0 0 20px var(--glow-color),inset 0 2px 4px #ffffff26}.knob-pointer{position:absolute;top:2px;left:50%;width:2px;height:7px;margin-left:-1px;background:var(--accent-primary);border-radius:2px;box-shadow:0 0 4px var(--glow-color)}.knob-wrapper.knob-large .knob-pointer{top:3px;height:9px;width:2px;margin-left:-1px}.knob.active{box-shadow:0 2px 8px #00000080,0 0 25px var(--glow-color),inset 0 2px 4px #ffffff1a}.knob-value{font-family:var(--font-mono);font-size:.5rem;color:var(--accent-primary);padding:1px 4px;background:#0006;border-radius:var(--radius-sm);min-width:36px;text-align:center}.mini-knob-wrapper{display:flex;flex-direction:column;align-items:center;gap:2px}.mini-knob-label{font-family:var(--font-mono);font-size:.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.mini-knob-container{width:28px;height:28px;position:relative;display:flex;align-items:center;justify-content:center}.mini-knob{width:24px;height:24px;position:relative;background:linear-gradient(145deg,var(--metal-highlight) 0%,var(--metal-dark) 100%);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0006,inset 0 1px 2px #ffffff1a}.mini-knob:hover{box-shadow:0 2px 8px #00000080,0 0 12px var(--glow-color)}.mini-knob.active{box-shadow:0 1px 4px #0006,0 0 15px var(--glow-color)}.mini-knob-pointer{position:absolute;top:3px;left:50%;width:2px;height:6px;margin-left:-1px;background:var(--accent-primary);border-radius:1px;box-shadow:0 0 4px var(--accent-primary)}.effects-rack{background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:2px solid var(--metal-dark);border-bottom:none;overflow:visible;box-shadow:inset 0 1px #ffffff0d,0 4px 20px #0000004d;position:relative;z-index:10;flex:0 0 auto;min-height:0;display:flex;flex-direction:column}.rack-header{display:flex;align-items:center;padding:var(--spacing-xs) var(--spacing-md);background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-bottom:1px solid rgba(0,0,0,.3);flex-shrink:0}.rack-screws{display:flex;gap:var(--spacing-md)}.screw{width:12px;height:12px;background:linear-gradient(145deg,#4a4035,#2a2520);border-radius:50%;box-shadow:inset 0 1px 2px #00000080,0 1px #ffffff0d;position:relative}.screw:after{content:"";position:absolute;top:50%;left:50%;width:60%;height:2px;background:#0006;transform:translate(-50%,-50%) rotate(45deg)}.screw.small{width:8px;height:8px}.rack-title{flex:1;display:flex;justify-content:center;align-items:center;gap:var(--spacing-md)}.rack-label{font-family:var(--font-mono);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--text-label)}.rack-reset-btn{font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;transition:all .2s ease}.rack-reset-btn:hover{color:var(--accent-glucose-danger);border-color:var(--accent-glucose-danger)}.effects-pedalboard{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm);overflow-x:auto;position:relative;flex:1;min-height:0;align-items:flex-start}.effect-module{flex-shrink:0;width:110px;transition:opacity .25s ease,transform .25s ease,margin .2s ease;will-change:transform,opacity;contain:layout style;position:relative}.effect-module.disabled{opacity:.5}.effect-module.bypassed{opacity:.7}.effect-module.bypassed .module-faceplate{border-color:var(--metal-dark);box-shadow:inset 0 1px #ffffff14,0 4px 15px #0006}.effect-module.bypassed .module-icon{opacity:.4;filter:none}.effect-module.bypassed .module-name,.effect-module.bypassed .module-label,.effect-module.bypassed .mini-knob{opacity:.5}.effect-module.dragging{opacity:.6;transform:scale(.95) rotate(2deg);z-index:100}.drop-indicator{position:absolute;top:var(--spacing-md);bottom:var(--spacing-md);width:4px;background:var(--accent-primary);border-radius:2px;box-shadow:0 0 16px var(--accent-primary),0 0 32px #e8a87c80;opacity:0;pointer-events:none;transition:left .15s ease,opacity .15s ease;z-index:100}.drop-indicator.visible{opacity:1}.module-faceplate{position:relative;background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-radius:var(--radius-md);border:2px solid var(--metal-dark);padding:var(--spacing-xs);display:flex;flex-direction:column;gap:4px;box-shadow:inset 0 1px #ffffff14,0 4px 15px #0006}.effect-module.enabled .module-faceplate{border-color:var(--accent-color, var(--accent-primary));box-shadow:inset 0 1px #ffffff14,0 0 25px color-mix(in srgb,var(--accent-color, var(--accent-primary)) 30%,transparent)}.module-screws{display:flex;justify-content:space-between}.module-header{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0}.module-icon{width:22px;height:22px;color:var(--accent-color, var(--accent-primary));opacity:.8}.effect-module.enabled .module-icon{opacity:1;filter:drop-shadow(0 0 6px var(--accent-color, var(--accent-primary)))}.module-name{font-family:var(--font-mono);font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-primary)}.module-knobs{padding:2px 0}.knob-row{display:flex;justify-content:center;gap:4px}.module-footer{display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:4px}.footswitch{width:28px;height:28px;background:linear-gradient(180deg,#1a1815,#0f0d0b);border:2px solid var(--metal-dark);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 4px 8px #00000080,0 2px 4px #0000004d;transition:all .15s ease}.footswitch:hover{border-color:var(--accent-primary)}.footswitch:active{box-shadow:inset 0 2px 6px #0009}.footswitch-led{width:8px;height:8px;background:var(--led-off);border-radius:50%;box-shadow:inset 0 1px 2px #00000080;transition:all .2s ease}.footswitch.on .footswitch-led{background:var(--led-on);box-shadow:0 0 10px var(--led-on),0 0 20px color-mix(in srgb,var(--led-on) 50%,transparent)}.module-label{font-family:var(--font-mono);font-size:.45rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.module-remove-btn{position:absolute;top:6px;right:6px;width:20px;height:20px;font-size:1rem;line-height:1;color:var(--text-muted);background:#0006;border:1px solid transparent;border-radius:50%;cursor:pointer;opacity:0;transition:all .2s ease;display:flex;align-items:center;justify-content:center;z-index:10}.effect-module:hover .module-remove-btn{opacity:1}.module-remove-btn:hover{color:var(--accent-glucose-danger);border-color:var(--accent-glucose-danger);background:#c9706433}.no-effects-message{display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg) var(--spacing-md);color:var(--text-muted);font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6}.add-effect-dropdown{position:relative;margin-top:var(--spacing-xs);z-index:200;flex-shrink:0}.add-effect-header{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background:linear-gradient(180deg,#ffffff0d,#0000001a);border:1px dashed var(--metal-light);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease}.add-effect-header:hover{border-color:var(--accent-primary);background:linear-gradient(180deg,#e8a87c1a,#e8a87c0d)}.add-effect-dropdown.open .add-effect-header{border-color:var(--accent-primary);border-style:solid;border-top-left-radius:0;border-top-right-radius:0}.add-effect-label{font-family:var(--font-mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.add-effect-header:hover .add-effect-label{color:var(--accent-primary)}.add-effect-header .dropdown-arrow{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:transform .3s ease;transform:rotate(180deg)}.add-effect-header .dropdown-arrow svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.add-effect-dropdown.open .dropdown-arrow{transform:rotate(0)}.add-effect-panel{position:absolute;bottom:100%;left:0;right:0;background:linear-gradient(180deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);border:1px solid var(--accent-primary);border-bottom:none;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:0 -12px 40px #00000080;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;z-index:1000}.add-effect-dropdown.open .add-effect-panel{max-height:280px;opacity:1;overflow-y:auto}.add-effect-list{max-height:260px;overflow-y:auto;padding:var(--spacing-sm)}.add-effect-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-xs);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;border:1px solid transparent}.add-effect-item:hover{background:#e8a87c26;border-color:#e8a87c4d}.effect-item-icon{width:24px;height:24px;opacity:.8}.add-effect-item:hover .effect-item-icon{opacity:1}.effect-item-name{font-family:var(--font-mono);font-size:.75rem;font-weight:500;color:var(--text-secondary)}.add-effect-item:hover .effect-item-name{color:var(--text-primary)}.no-effects-available{display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);color:var(--text-muted);font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6}.add-effect-list::-webkit-scrollbar{width:6px}.add-effect-list::-webkit-scrollbar-track{background:#0003;border-radius:3px}.add-effect-list::-webkit-scrollbar-thumb{background:var(--metal-light);border-radius:3px}.add-effect-list::-webkit-scrollbar-thumb:hover{background:var(--metal-highlight)}.keyboard-section{background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-radius:0 0 var(--radius-lg) var(--radius-lg);border:2px solid var(--metal-dark);border-top:1px solid var(--metal-light);padding:var(--spacing-md);box-shadow:inset 0 1px #ffffff14,0 4px 20px #0000004d;margin-top:0}.piano-keyboard{display:flex;justify-content:center;position:relative;height:200px;-webkit-user-select:none;user-select:none;padding:10px;background:linear-gradient(180deg,#1a1815,#0f0d0b);border-radius:var(--radius-md);box-shadow:inset 0 4px 20px #00000080;overflow-x:auto;overflow-y:hidden}.piano-keyboard::-webkit-scrollbar{height:4px}.piano-keyboard::-webkit-scrollbar-track{background:transparent}.piano-keyboard::-webkit-scrollbar-thumb{background:var(--metal-mid);border-radius:2px}.piano-key{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:var(--spacing-sm);cursor:pointer;transition:all .08s ease;flex-shrink:0}.white-key{width:44px;height:190px;background:linear-gradient(180deg,#f5f0e6,#ede5d8 40%,#e8dfd0,#ddd4c4);border:1px solid #c4b8a5;border-radius:0 0 6px 6px;z-index:1;margin-right:-1px;box-shadow:inset 0 -4px 8px #0000001a,inset 2px 0 4px #fff6,0 6px 12px #0000004d}.white-key:hover{background:linear-gradient(180deg,#faf6ee,#f2ebe0 40%,#ede5d8,#e3dace)}.white-key.active{background:linear-gradient(180deg,var(--accent-primary) 0%,#c48a5c 100%);border-color:var(--accent-primary);box-shadow:0 0 30px var(--glow-color),inset 0 2px 4px #ffffff4d;transform:translateY(4px)}.black-key{width:28px;height:130px;background:linear-gradient(180deg,#3d3530,#2a2520 30%,#1f1b18 70%,#151210);border:1px solid #0a0908;border-radius:0 0 4px 4px;margin-left:-14px;margin-right:-14px;z-index:2;box-shadow:inset 0 -3px 6px #ffffff0d,inset 0 3px 4px #ffffff14,0 6px 12px #00000080}.black-key:hover{background:linear-gradient(180deg,#4a423c,#352f2a 30%,#252220 70%,#1a1715)}.black-key.active{background:linear-gradient(180deg,var(--accent-secondary) 0%,#5a4555 100%);box-shadow:0 0 20px #85677b99,inset 0 2px 4px #ffffff26;transform:translateY(3px)}.key-shortcut{font-family:var(--font-mono);font-size:.55rem;margin-bottom:2px;opacity:.6}.white-key .key-shortcut{color:#8a7d6d}.black-key .key-shortcut{color:#6b5d52}.key-note{font-family:var(--font-mono);font-size:.5rem;opacity:.4}.white-key .key-note{color:#6b5d52}.black-key .key-note{color:#9b8a7c}.piano-key .key-note{opacity:.25}.piano-key.has-shortcut .key-note{opacity:.4}.piano-key[data-note^=C]:not([data-note*="#"]) .key-note{opacity:.6;font-weight:500}.start-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at center,#0f0d0bf2,#0f0d0bfc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xl);z-index:100;transition:opacity .6s ease,visibility .6s ease}.start-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}#start-button{padding:var(--spacing-lg) var(--spacing-xl);font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bg-primary);background:linear-gradient(145deg,var(--accent-primary),#c48a5c);border:none;border-radius:var(--radius-lg);cursor:pointer;box-shadow:0 8px 30px #e8a87c80,inset 0 2px #ffffff4d;transition:all .3s ease}#start-button:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 40px #e8a87c99,inset 0 2px #fff6}#start-button:active{transform:translateY(0);box-shadow:0 4px 15px #e8a87c66,inset 0 2px 4px #0003}.start-instructions{color:var(--text-secondary);font-size:.95rem;max-width:420px;text-align:center;line-height:1.8}#error-message{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%) translateY(100px);background:linear-gradient(135deg,var(--accent-glucose-danger),#a85a52);color:var(--text-primary);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);font-weight:600;opacity:0;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);z-index:200;box-shadow:0 6px 20px #c9706480}#error-message.visible{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:1200px){.adsr-controls{gap:var(--spacing-md)}.effects-pedalboard{flex-wrap:wrap}}@media(max-width:900px){.controls-row{flex-direction:column}.controls-faceplate{flex-wrap:wrap;justify-content:center}.piano-keyboard{overflow-x:auto;justify-content:flex-start}.header-stats{display:none}.header-waveform{width:60px}}@media(max-width:600px){.app-container.desktop-view{padding:var(--spacing-sm);gap:var(--spacing-sm)}.desktop-view .header{flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md)}.desktop-view .logo-text{font-size:1.2rem}.desktop-view .oscillator-slots{grid-template-columns:1fr}.desktop-view .oscillator-slot{flex-direction:row;justify-content:space-between}.desktop-view .adsr-controls{flex-wrap:wrap;justify-content:center}.desktop-view .piano-keyboard{height:160px}.desktop-view .white-key{width:36px;height:150px}.desktop-view .black-key{width:24px;height:100px;margin-left:-12px;margin-right:-12px}.desktop-view .effect-module{width:120px}}@media(pointer:coarse){.desktop-view .knob{width:44px;height:44px}.desktop-view .mini-knob{width:32px;height:32px}.desktop-view .mini-knob-container{width:36px;height:36px}.desktop-view .footswitch{width:44px;height:44px}}.desktop-view{display:flex}.mobile-view{display:none}@media(max-width:768px)and (pointer:coarse){.desktop-view{display:none!important}.mobile-view{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100vw;max-width:100vw;overflow:hidden;background:var(--bg-primary);position:fixed;top:0;left:0;box-sizing:border-box;padding-bottom:env(safe-area-inset-bottom,0)}body{overflow:hidden;position:fixed;width:100%;height:100%}}@media(max-width:768px)and (pointer:coarse)and (orientation:portrait){.mobile-view{transform:rotate(90deg);transform-origin:top left;width:100vh;width:100dvh;max-width:100vh;height:100vw;height:100dvw;position:fixed;top:0;left:100vw;left:100dvw}.start-overlay{transform:rotate(90deg);transform-origin:top left;width:100vh;width:100dvh;height:100vw;height:100dvw;position:fixed;top:0;left:100vw;left:100dvw}}.mobile-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xs) var(--spacing-sm);background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-bottom:1px solid rgba(0,0,0,.3);flex-shrink:0;height:44px;min-height:44px}.mobile-logo{width:28px;height:28px;background:linear-gradient(145deg,var(--accent-primary),#c48a5c);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #e8a87c66,inset 0 1px #ffffff4d}.mobile-logo svg{width:16px;height:16px;stroke:var(--bg-primary)}.mobile-file-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:6px 10px;font-family:var(--font-mono);font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);background:linear-gradient(180deg,var(--metal-light) 0%,var(--metal-mid) 100%);border:1px solid rgba(0,0,0,.3);border-radius:var(--radius-sm);cursor:pointer;position:relative;box-shadow:inset 0 1px #ffffff1a,0 2px 4px #0000004d}.mobile-file-btn .file-icon{font-size:.9rem}.mobile-file-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.mobile-file-btn.loaded{border-color:var(--accent-glucose-normal);color:var(--accent-glucose-normal)}.mobile-tab-content{flex:1;min-height:0;width:100%;max-width:100%;display:flex;flex-direction:column;overflow:hidden}.mobile-tab-panel{display:none;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding:var(--spacing-xs);width:100%;max-width:100%;box-sizing:border-box}.mobile-tab-panel.active{display:flex}.mobile-tab-nav{display:flex;background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-top:1px solid rgba(255,255,255,.05);flex-shrink:0;height:56px;min-height:56px;position:relative;z-index:50}.mobile-tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:var(--spacing-xs);background:transparent;border:none;color:var(--text-muted);cursor:pointer;transition:all .2s ease;min-height:44px}.mobile-tab-btn svg{width:22px;height:22px;transition:all .2s ease}.mobile-tab-btn span{font-family:var(--font-mono);font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.mobile-tab-btn:hover{color:var(--text-secondary)}.mobile-tab-btn.active{color:var(--accent-primary);background:linear-gradient(180deg,rgba(232,168,124,.1) 0%,transparent 100%)}.mobile-tab-btn.active svg{filter:drop-shadow(0 0 6px var(--accent-primary))}.mobile-tab-panel[data-tab=keyboard]{padding:0}.mobile-tab-panel[data-tab=keyboard].active{display:flex;flex-direction:column}.mobile-tab-panel[data-tab=effects]{padding:0;overflow:hidden}.mobile-tab-panel[data-tab=effects].active{display:flex;flex-direction:column}.mobile-piano-keyboard{display:flex;align-items:flex-end;justify-content:flex-start;gap:0;flex:1;min-height:0;width:100%;max-width:100%;background:linear-gradient(180deg,#1a1815,#0f0d0b);border-radius:0;box-shadow:inset 0 4px 20px #00000080;overflow-x:auto;overflow-y:hidden;padding:var(--spacing-sm);padding-bottom:var(--spacing-md);-webkit-user-select:none;user-select:none;touch-action:pan-x;-webkit-overflow-scrolling:touch;box-sizing:border-box}.mobile-piano-keyboard .piano-key{flex-shrink:0;flex-grow:0;margin:0;padding-bottom:var(--spacing-sm)}.mobile-piano-keyboard .white-key{width:44px;min-width:44px;height:calc(100% - 20px);max-height:140px;margin-right:-1px;border:1px solid #c4b8a5;box-sizing:border-box}.mobile-piano-keyboard .black-key{width:28px;min-width:28px;height:calc(60% - 10px);max-height:85px;margin-left:-14px;margin-right:-14px;box-sizing:border-box}.mobile-piano-keyboard .key-shortcut{display:none}.mobile-piano-keyboard .key-note{font-size:.5rem;opacity:.3}.mobile-oscillators-container{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:100%;gap:var(--spacing-sm);overflow-y:auto;overflow-x:hidden;box-sizing:border-box;-webkit-overflow-scrolling:touch}#mobile-oscillator-mixer{flex-shrink:0;width:100%;max-width:100%;overflow:hidden}#mobile-oscillator-mixer .oscillator-mixer{background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-radius:var(--radius-md);border:1px solid var(--metal-dark);padding:var(--spacing-sm);width:100%;max-width:100%;box-sizing:border-box;overflow:visible;position:relative}#mobile-oscillator-mixer .oscillator-slots{display:flex;gap:var(--spacing-xs);width:100%}#mobile-oscillator-mixer .oscillator-slot{flex:1;min-width:0;padding:var(--spacing-xs);position:relative}#mobile-oscillator-mixer .osc-waveform{width:40px;height:24px}#mobile-oscillator-mixer .osc-label{font-size:.6rem;padding:2px 6px}#mobile-oscillator-mixer .osc-day-label{font-size:.55rem}#mobile-oscillator-mixer .mixer-header{padding-bottom:var(--spacing-xs);margin-bottom:var(--spacing-xs);display:flex;justify-content:space-between;align-items:center}#mobile-oscillator-mixer .mixer-header h3{font-size:.65rem}#mobile-oscillator-mixer .randomize-btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:.55rem;min-height:32px;touch-action:manipulation;z-index:10;position:relative}#mobile-oscillator-mixer .level-slider{height:4px}.mobile-controls-row{flex-shrink:0;width:100%;max-width:100%}.mobile-synth-controls{background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-radius:var(--radius-md);border:1px solid var(--metal-dark);padding:var(--spacing-sm);width:100%;max-width:100%;box-sizing:border-box}.mobile-synth-controls .controls-faceplate{flex-wrap:wrap;justify-content:center;gap:var(--spacing-xs)}.mobile-synth-controls .controls-section{flex-shrink:0}.mobile-synth-controls .adsr-controls{gap:var(--spacing-xs)}.mobile-synth-controls .knob-wrapper{min-width:32px}.mobile-synth-controls .knob-container{width:32px;height:32px}.mobile-synth-controls .knob{width:20px;height:20px}.mobile-synth-controls .knob-label{font-size:.45rem}.mobile-synth-controls .knob-value{font-size:.4rem;min-width:28px}.mobile-synth-controls .section-label{margin-bottom:1px}.mobile-synth-controls .label-text{font-size:.5rem}.mobile-synth-controls .volume-section{padding-left:var(--spacing-xs)}.mobile-effects-container{flex:1;min-height:0;width:100%;max-width:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-primary);touch-action:auto}.mobile-effects-container.effects-rack{flex:1;min-height:0;border-radius:var(--radius-md);display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);z-index:1;position:relative}.mobile-effects-container .rack-header{padding:var(--spacing-sm) var(--spacing-md);flex-shrink:0;display:flex;align-items:center;background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%);border-bottom:1px solid rgba(0,0,0,.3)}.mobile-effects-container .rack-screws{display:none}.mobile-effects-container .rack-title{flex:1;display:flex;justify-content:space-between;align-items:center}.mobile-effects-container .rack-label{font-size:.7rem}.mobile-effects-container .rack-reset-btn{padding:6px 12px;font-size:.6rem}.mobile-effects-container .effects-pedalboard{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-sm);padding-bottom:20px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}.mobile-effects-container .effect-module{width:100%;flex-shrink:0;touch-action:pan-y}.mobile-effects-container .module-faceplate{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);min-height:60px}.mobile-effects-container .module-screws{display:none}.mobile-effects-container .module-header{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-sm);min-width:80px}.mobile-effects-container .module-icon{width:24px;height:24px}.mobile-effects-container .module-name{font-size:.65rem}.mobile-effects-container .module-knobs{flex:1;display:flex;justify-content:center}.mobile-effects-container .knob-row{display:flex;gap:var(--spacing-sm)}.mobile-effects-container .mini-knob-wrapper{gap:1px}.mobile-effects-container .mini-knob{width:28px;height:28px}.mobile-effects-container .mini-knob-container{width:32px;height:32px}.mobile-effects-container .mini-knob-label{font-size:.5rem}.mobile-effects-container .module-footer{flex-direction:row;gap:var(--spacing-sm);padding:0}.mobile-effects-container .module-label{display:none}.mobile-effects-container .footswitch{width:36px;height:36px}.mobile-effects-container .module-remove-btn{opacity:1;position:static;width:28px;height:28px;font-size:1.2rem}.mobile-effects-container .no-effects-message{padding:var(--spacing-lg);text-align:center}.mobile-effects-container .add-effect-dropdown{margin:0;margin-bottom:env(safe-area-inset-bottom,0);flex-shrink:0;border-top:1px solid rgba(255,255,255,.05);background:linear-gradient(180deg,var(--metal-mid) 0%,var(--metal-dark) 100%)}.mobile-effects-container .add-effect-header{padding:var(--spacing-sm) var(--spacing-md);min-height:52px;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);border:none;border-radius:var(--radius-sm);background:#0003;cursor:pointer;touch-action:auto;-webkit-tap-highlight-color:rgba(232,168,124,.3);user-select:none;-webkit-user-select:none;margin:var(--spacing-xs)}.mobile-effects-container .add-effect-header:active{background:#e8a87c1a}.mobile-effects-container .add-effect-label{font-size:.75rem;color:var(--accent-primary)}.mobile-effects-container .dropdown-arrow{color:var(--accent-primary)}.mobile-effects-container .add-effect-panel{position:relative!important;max-height:0;overflow:hidden;background:var(--bg-secondary);transition:max-height .3s ease,opacity .3s ease;opacity:0;inset:auto!important;width:100%!important;border:none;border-radius:0;box-shadow:none;z-index:100;visibility:hidden}.mobile-effects-container .add-effect-dropdown.open .add-effect-panel{max-height:50vh;overflow-y:auto;opacity:1;visibility:visible;-webkit-overflow-scrolling:touch;touch-action:pan-y}.mobile-effects-container .add-effect-dropdown.open .add-effect-header{background:#e8a87c1a}.mobile-effects-container .add-effect-dropdown.open .dropdown-arrow{transform:rotate(180deg)}.mobile-effects-container .add-effect-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-xs);padding:var(--spacing-sm)}.mobile-effects-container .add-effect-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--spacing-sm);min-height:60px;background:#0003;border-radius:var(--radius-sm);border:1px solid transparent;transition:all .15s ease;cursor:pointer;touch-action:auto;-webkit-tap-highlight-color:rgba(232,168,124,.3);user-select:none;-webkit-user-select:none}.mobile-effects-container .add-effect-item:active{background:#e8a87c33;border-color:var(--accent-primary)}.mobile-effects-container .effect-item-icon{width:28px;height:28px}.mobile-effects-container .effect-item-name{font-size:.6rem;text-align:center}.mobile-effects-container .no-effects-available{grid-column:span 2;padding:var(--spacing-md)}@media(max-width:768px)and (pointer:coarse){.mobile-view{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.mobile-view .mobile-tab-btn,.mobile-view .mobile-file-btn,.mobile-view .footswitch{min-height:44px}.mobile-effects-container .effects-pedalboard{scroll-snap-type:y proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.mobile-effects-container .effect-module{scroll-snap-align:start;touch-action:pan-y}.mobile-effects-container .mini-knob{touch-action:none}#mobile-oscillator-mixer .oscillator-slot{min-height:80px;touch-action:manipulation}#mobile-oscillator-mixer .osc-dropdown-panel{position:fixed!important;inset:auto 8px 70px!important;z-index:500!important;max-height:0;overflow:hidden}#mobile-oscillator-mixer .oscillator-slot.dropdown-open .osc-dropdown-panel{max-height:45vh;overflow-y:auto}#mobile-oscillator-mixer .osc-day-item{padding:var(--spacing-sm) var(--spacing-md);min-height:44px}.mobile-piano-keyboard .piano-key{touch-action:manipulation}.mobile-piano-keyboard .white-key:active,.mobile-piano-keyboard .white-key.active,.mobile-piano-keyboard .black-key:active,.mobile-piano-keyboard .black-key.active{transition:all .05s ease}}.mobile-dropdown-backdrop{position:fixed;inset:0;background:#00000080;z-index:400;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.mobile-dropdown-backdrop.active{opacity:1;visibility:visible}@media(max-width:768px)and (pointer:coarse){.start-overlay{z-index:1000}#start-button{padding:var(--spacing-md) var(--spacing-lg);font-size:1.1rem}.start-instructions{font-size:.85rem;padding:0 var(--spacing-md)}}