.audio-custom-element,.audio-player-container,.audio-track-reset{margin:0;padding:0;box-sizing:border-box}[data-slot=tabs-trigger][data-state=active]{background-color:var(--color-interactive-primary)!important;color:white!important;border-color:var(--color-interactive-primary)!important}.fixed.inset-0,.fixed.inset-0 .modal-content,.fixed.inset-0>div{margin:revert!important;padding:revert!important}.fixed.inset-0 .p-6{padding:1.5rem!important}.fixed.inset-0 .p-4{padding:1rem!important}.skip-link{position:absolute;top:-40px;left:0;background:var(--color-interactive-primary);color:white;padding:8px;z-index:100;text-decoration:none;border-radius:0 0 4px 0}.skip-link:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}[data-slot=dialog-content]{max-height:85vh;max-height:85svh}h2{font-size:1.2rem;margin-bottom:1rem;color:var(--color-text-muted)}h3{font-size:1rem;margin-bottom:.5rem;color:var(--color-text-muted-secondary)}h3.track-title{color:#ffffff;font-weight:500;transition:all .3s ease}h3.track-title.loading{color:var(--color-audio-warning);animation:pulse 1s infinite;cursor:not-allowed;opacity:.6}h3.track-title.loading:hover{transform:none;box-shadow:0 2px 4px rgba(0,0,0,.2)}h3.track-title.ready{color:var(--color-audio-success);animation:readyFlash .5s ease}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}@keyframes readyFlash{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.controls-section{flex:1;display:flex;flex-direction:column;overflow:hidden}.master-controls{background-color:var(--color-surface-hover);padding:.75rem;border-radius:8px;margin-bottom:1rem;display:flex;align-items:center;gap:1rem}.control-button{color:white;border:none;padding:.5rem;font-size:1.2rem;border-radius:50%;cursor:pointer;transition:all .3s;width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.control-button,.control-button:hover{background-color:var(--color-interactive-primary)}.control-button:hover{opacity:.9;transform:scale(1.1)}.control-button.playing,.control-button.playing:hover{background-color:var(--color-interactive-destructive)}.control-button.playing:hover{opacity:.9}.control-button.touching{transform:scale(.95);box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}.control-button.loading{opacity:.6;cursor:not-allowed}.control-button:focus,.control-button:focus-visible{outline:2px solid var(--color-interactive-primary);outline-offset:2px}.control-button.playing:focus,.control-button.playing:focus-visible{outline-color:var(--color-interactive-destructive)}.beat-counter-placeholder{font-size:1rem;white-space:nowrap;padding:0 1rem}.tempo-control{display:flex;align-items:center;gap:1rem;width:100%}.tempo-control label{font-size:1rem;white-space:nowrap;min-width:80px}#tempo-slider{flex:1}.beat-counter{display:flex;align-items:center;gap:.5rem;background-color:var(--color-surface);padding:.5rem 1rem;border-radius:6px;min-width:100px;font-family:SF Mono,Monaco,Consolas,monospace}.beat-label{color:var(--color-text-muted-secondary);font-size:.9rem}.beat-value{color:var(--color-interactive-primary);font-size:1.2rem;font-weight:600;min-width:2ch;text-align:right}.metronome-control{display:flex;align-items:center;gap:.5rem}.metronome-toggle{display:flex;align-items:center;gap:.25rem;background-color:var(--color-surface);color:var(--color-text-muted-secondary);border:1px solid var(--color-surface-elevated);padding:.4rem .8rem;border-radius:6px;cursor:pointer;transition:all .2s ease;font-size:.9rem}.metronome-toggle:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-muted)}.metronome-toggle.enabled{background-color:var(--color-interactive-primary);color:white;border-color:var(--color-interactive-primary)}.metronome-toggle.enabled:hover{background-color:var(--color-interactive-primary-hover)}.metronome-icon{font-size:1rem}.metronome-status{font-weight:500}.metronome-volume{display:flex;align-items:center;gap:.5rem}.metronome-volume-slider{width:60px;height:4px;-webkit-appearance:none;appearance:none;background:var(--color-surface-elevated);border-radius:2px;outline:none}.metronome-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:var(--color-interactive-primary);border-radius:50%;cursor:pointer}.metronome-volume-slider::-moz-range-thumb{width:12px;height:12px;background:var(--color-interactive-primary);border-radius:50%;cursor:pointer;border:none}.tracks-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:1rem;padding:1rem;background-color:var(--color-app-bg);flex:1;width:100%;overflow:visible}.track{isolation:isolate}.track,.track-title{position:relative;overflow:visible;z-index:1}.track-title{cursor:pointer;user-select:none;transition:all .2s ease;margin:0;text-align:center;padding:1rem;border-radius:8px;width:100%;height:100%;background-color:var(--color-track-background);border:2px solid var(--color-track-border);box-shadow:0 2px 4px rgba(0,0,0,.2);font-weight:600;text-transform:uppercase;letter-spacing:.5px;flex-direction:column;gap:.5rem;font-size:1rem;display:flex;align-items:center;justify-content:center;min-height:40px}.track-title:hover{background-color:var(--color-track-hover);border-color:var(--color-track-border-hover);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.3)}.track-title.touching,.track-title:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.2)}.track-title.touching{background-color:oklch(.456 0 0);border-color:#888888;animation:touchPulse .3s ease}@keyframes touchPulse{0%{transform:scale(.95)}50%{transform:scale(.98)}to{transform:scale(1)}}.track-title:focus,.track-title:focus-visible{outline:2px solid var(--color-interactive-primary);outline-offset:2px}.track-title.armed{background-color:var(--color-track-hover);border-color:var(--color-track-border-hover);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.3)}.track-title.armed:hover{background-color:#5a5a5a;border-color:#707070;box-shadow:0 4px 10px rgba(0,0,0,.35)}.track-title.stopped{background-color:oklch(.25 0 0);border-color:var(--color-track-background);color:#999999;opacity:.8}.track-title.stopped:hover{background-color:var(--color-track-background);border-color:var(--color-track-border);color:#bbbbbb}.track-title.stopped:focus,.track-title.stopped:focus-visible{outline-color:var(--color-text-muted-secondary)}.track-title.playing:focus,.track-title.playing:focus-visible{outline-color:var(--color-interactive-primary)}.track-title:before{content:"";position:absolute;bottom:0;left:0;right:0;height:0;background:var(--color-level-safe);transition:height .05s ease-out;z-index:-1}.track-title.playing:before{height:var(--level-height,0)}.track-title.playing.has-signal:before{background:var(--color-level-safe)}.track-title.playing.level-yellow:before{background:var(--color-level-moderate)}.track-title.playing.level-orange:before{background:var(--color-level-high)}.track-title.playing.level-red:before{background:var(--color-level-peak)}.play-pause-button:before{content:"";position:absolute;bottom:0;left:0;right:0;height:0;background:var(--color-level-safe);transition:height .05s ease-out;z-index:0;border-radius:inherit;opacity:.4;pointer-events:none}.play-pause-button.playing:before{height:var(--master-level-height,0)}.play-pause-button.playing.has-signal:before{background:var(--color-level-safe)}.play-pause-button.playing.level-yellow:before{background:var(--color-level-moderate)}.play-pause-button.playing.level-orange:before{background:var(--color-level-high)}.play-pause-button.playing.level-red:before{background:var(--color-level-peak)}.track-title.empty-slot{background-color:transparent;border:2px dashed var(--color-track-border);color:#888888;opacity:.6;transition:all .3s ease;display:flex;flex-direction:column;gap:.5rem;cursor:pointer}.track-title.empty-slot:hover{border-color:var(--color-interactive-primary);color:var(--color-interactive-primary);opacity:1;background-color:var(--color-interactive-primary-subtle);transform:translateY(-1px);box-shadow:0 4px 8px var(--color-interactive-primary-subtle)}.track-title.empty-slot:disabled{cursor:not-allowed;opacity:.3}.track-title.empty-slot:disabled:hover{border-color:var(--color-border-muted);color:var(--color-text-muted-secondary);background-color:transparent;transform:none;box-shadow:none}.track-title.empty-slot.loading-stem{background-color:var(--color-track-background);border:2px solid var(--color-audio-success);opacity:1;cursor:wait;animation:pulse-border-green 1.5s ease-in-out infinite}.loading-dots{display:flex;gap:.3rem;justify-content:center;align-items:center;height:100%}.loading-dots .dot{width:10px;height:10px;background-color:var(--color-audio-success);border-radius:50%;animation:dot-pulse-green 1.4s ease-in-out infinite}.loading-dots .dot:first-child{animation-delay:0s}.loading-dots .dot:nth-child(2){animation-delay:.2s}.loading-dots .dot:nth-child(3){animation-delay:.4s}@keyframes dot-pulse-green{0%,80%,to{opacity:.4;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}@keyframes pulse-border-green{0%,to{border-color:var(--color-audio-success);box-shadow:0 0 0 0 rgba(68,255,68,0)}50%{border-color:var(--color-audio-success);box-shadow:0 0 15px 1px rgba(68,255,68,.2)}}.add-icon{font-size:2rem;font-weight:300;line-height:1}.add-text{font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.track-title .track-title-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.track-title:not(.controls-visible) .stem-name{font-size:1.5rem;font-weight:600}@media (max-width:600px){.track-title:not(.controls-visible) .stem-name{font-size:1.25rem}}.track-title.controls-visible{background-color:oklch(.18 0 0);border-color:var(--color-border)}.track-title .song-title{color:rgba(255,255,255,.6);font-size:.85em;font-weight:400;opacity:.8}.track-title .stem-name{color:rgba(255,255,255,.95);font-size:1em;font-weight:500}.track-title.ready .song-title{color:var(--color-audio-success-muted)}.track-title.ready .stem-name{color:var(--color-audio-success)}.track-title .track-name{flex:1;display:flex;align-items:center;justify-content:center}.level-meter,.vertical-controls,.volume-slider{display:none}.info-section{text-align:center;padding:.5rem;background-color:var(--color-surface-hover);border-radius:8px;font-size:.9rem;margin-top:1rem}.debug-counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;text-align:left}.debug-counters p{background-color:var(--color-surface);padding:.5rem;border-radius:4px;font-family:monospace;font-size:.9rem;border-left:3px solid var(--color-interactive-primary)}input[type=range]{-webkit-appearance:none;appearance:none;height:6px;background:var(--color-border-muted);outline:none;opacity:.7;transition:opacity .2s;border-radius:3px}input[type=range]:hover{opacity:1}input[type=range]:focus,input[type=range]:focus-visible{outline:2px solid var(--color-interactive-primary);outline-offset:2px;opacity:1}input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:var(--color-interactive-primary);border-radius:50%}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--color-interactive-primary);border-radius:50%;border:none}@media (max-width:768px) and (orientation:landscape){.container{padding:.5rem}.control-button{width:35px;height:35px;font-size:1rem}.master-controls{padding:.4rem;margin-bottom:.4rem}.tempo-control label{font-size:.8rem}.beat-counter{padding:.4rem .8rem;min-width:80px}.beat-label{font-size:.8rem}.beat-value{font-size:1rem}.tracks-container{gap:.3rem;padding:.3rem;grid-template-rows:1fr 1fr;min-height:0}.track{min-height:0}.track-title{padding:.5rem;font-size:.75rem;min-height:35px}.info-section{display:none}}@media (max-width:600px){.container{width:100%;padding:1rem}.tracks-container{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);width:100%}.track-title{padding:1.5rem 1rem;font-size:.9rem}.info-section{display:none}}input[type=range]{-webkit-user-select:auto;user-select:auto;cursor:pointer}input[type=range]::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none;width:20px;height:20px}input[type=range]::-moz-range-thumb{cursor:pointer}.complexity-view-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:20;pointer-events:all}.complexity-slider{--slider-track-height:8px;--slider-thumb-size:24px}.complexity-slider [data-slot=slider-track]{height:var(--slider-track-height)}.complexity-slider [data-slot=slider-thumb]{width:var(--slider-thumb-size);height:var(--slider-thumb-size);background-color:var(--color-interactive-primary);border-color:var(--color-interactive-primary)}@media (max-width:768px){.complexity-view-overlay{padding:1rem}.complexity-slider{--slider-track-height:10px;--slider-thumb-size:28px}}