.studio-container{max-width:1200px;margin:0 auto;padding:1rem 1.5rem;position:relative;z-index:1}.studio-header{text-align:center;margin-bottom:1rem;opacity:0;animation:fadeIn .8s ease forwards}.studio-title{font-size:clamp(1.2rem,4vw,2rem);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--white);text-shadow:3px 3px 0 var(--purple),-3px -3px 0 var(--blue),0 0 30px rgba(204,68,255,.4);animation:titleJitter .33s infinite;position:relative}.studio-title:before,.studio-title:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.studio-title:before{color:var(--purple);animation:glitch1 4s infinite steps(1);clip-path:polygon(0 0,100% 0,100% 45%,0 45%);mix-blend-mode:screen}.studio-title:after{color:var(--cyan);animation:glitch2 5s infinite steps(1);clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);mix-blend-mode:screen}.studio-subtitle{font-size:.6rem;color:var(--dim);letter-spacing:.12em;margin-top:.3rem}.transport-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#00140066;border:1px solid var(--dim);margin-bottom:.75rem;opacity:0;animation:fadeIn .5s ease forwards;animation-delay:.2s;flex-wrap:wrap}.transport-btn{width:36px;height:36px;background:#0009;border:1px solid var(--dim);color:var(--dim);font-family:JetBrains Mono,monospace;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;min-width:36px}.transport-btn:hover{border-color:var(--green);color:var(--green)}.transport-btn.active{background:#00ff0026;border-color:var(--green);color:var(--green);box-shadow:0 0 10px #0f03}.record-btn{color:var(--red)!important;border-color:#ff33334d!important}.record-btn:hover{border-color:var(--red)!important;color:var(--red)!important}.record-btn.active{background:#f333!important;border-color:var(--red)!important;color:var(--red)!important;box-shadow:0 0 15px #ff33334d!important;animation:recordPulse 1s ease-in-out infinite}@keyframes recordPulse{0%,to{box-shadow:0 0 10px #f333}50%{box-shadow:0 0 25px #ff333380}}.transport-info{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}.beat-counter{font-size:1.1rem;color:var(--green);font-variant-numeric:tabular-nums;min-width:5.5em;text-align:center;letter-spacing:.05em;text-shadow:0 0 8px rgba(0,255,0,.3)}.bpm-input{width:4em;background:#0009;border:1px solid var(--dim);color:var(--green);font-family:JetBrains Mono,monospace;font-size:.75rem;padding:.25rem .4rem;text-align:center}.bpm-input:focus{outline:none;border-color:var(--green)}.bpm-label{font-size:.55rem;color:var(--dim);letter-spacing:.15em}.key-select{background:#0009;border:1px solid var(--dim);color:var(--green);font-family:JetBrains Mono,monospace;font-size:.65rem;padding:.25rem .4rem;margin-left:auto;cursor:pointer}.key-select:focus{outline:none;border-color:var(--green)}.flash-status{font-size:.6rem;color:var(--red);letter-spacing:.1em;opacity:0;transition:opacity .2s;margin-left:.5rem}.flash-status.visible{opacity:1}.track-lanes{display:flex;flex-direction:column;gap:2px;margin-bottom:.5rem;opacity:0;animation:fadeIn .5s ease forwards;animation-delay:.3s}.track-lane{display:flex;align-items:center;gap:.4rem;padding:.35rem .5rem;background:#00140040;border:1px solid rgba(51,85,51,.3);cursor:pointer;transition:all .15s;min-height:44px}.track-lane:hover{background:#001e0059;border-color:#33553380}.track-lane.selected{border-color:var(--track-color, var(--green));background:#0028004d;box-shadow:inset 0 0 15px #00ff000d}.track-lane.armed{border-color:var(--red);box-shadow:inset 0 0 10px #ff333314}.track-lane.muted{opacity:.5}.track-info{display:flex;align-items:center;gap:.3rem;min-width:100px;flex-shrink:0}.track-color-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.track-name{font-size:.6rem;color:var(--green);letter-spacing:.1em;white-space:nowrap}.track-wave-label{font-size:.45rem;color:var(--dim);letter-spacing:.1em}.track-buttons{display:flex;gap:2px;flex-shrink:0}.track-btn{width:24px;height:24px;background:#00000080;border:1px solid var(--dim);color:var(--dim);font-family:JetBrains Mono,monospace;font-size:.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;padding:0;min-width:24px}.track-btn:hover{border-color:var(--green);color:var(--green)}.mute-btn.active{background:#f59e0b33;border-color:var(--amber);color:var(--amber)}.solo-btn.active{background:#00ffff26;border-color:var(--cyan);color:var(--cyan)}.arm-btn.active{background:#f333;border-color:var(--red);color:var(--red);animation:recordPulse 1.5s ease-in-out infinite}.delete-btn{border-color:#ff33334d;color:#ff333380;flex-shrink:0}.delete-btn:hover{border-color:var(--red)!important;color:var(--red)!important}.track-vol-group{display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:60px}.track-vol-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:3px;background:var(--dim);outline:none;border-radius:2px;cursor:pointer}.track-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;background:var(--green);border-radius:50%;cursor:pointer;box-shadow:0 0 4px #00ff004d}.track-vol-slider::-moz-range-thumb{width:10px;height:10px;background:var(--green);border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 4px #00ff004d}.track-vol-label{font-size:.4rem;color:var(--dim);letter-spacing:.1em}.track-clip-area{flex:1;height:28px;background:#0000004d;border:1px solid rgba(51,85,51,.15);position:relative;overflow:hidden;min-width:100px}.clip-region{position:absolute;top:2px;bottom:2px;border:1px solid;border-radius:2px;overflow:hidden}.clip-note-bar{position:absolute;top:30%;height:40%;border-radius:1px;opacity:.8}.track-playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--green);box-shadow:0 0 4px #00ff0080;left:0;z-index:2;transition:left .05s linear}.add-track-btn{width:100%;padding:.4rem;background:#00140033;border:1px dashed rgba(51,85,51,.3);color:var(--dim);font-family:JetBrains Mono,monospace;font-size:.55rem;letter-spacing:.15em;cursor:pointer;transition:all .15s;margin-bottom:.75rem}.add-track-btn:hover{border-color:var(--green);color:var(--green);background:#00280033}.viz-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem;opacity:0;animation:fadeIn .5s ease forwards;animation-delay:.4s}.viz-panel{background:#0014004d;border:1px solid var(--dim);padding:.4rem;position:relative}.viz-panel canvas{width:100%;height:120px;display:block}.viz-label{font-size:.5rem;color:var(--green);letter-spacing:.2em;margin-bottom:.2rem;opacity:.7}.keyboard-section{margin-bottom:.75rem;opacity:0;animation:fadeIn .5s ease forwards;animation-delay:.5s}.keyboard-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;padding:.3rem 0}.keyboard-header .panel-label{margin-bottom:0}.oct-btn{width:28px;height:28px;background:#00000080;border:1px solid var(--dim);color:var(--dim);font-family:JetBrains Mono,monospace;font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;min-width:28px}.oct-btn:hover{border-color:var(--green);color:var(--green)}.oct-display{font-size:.6rem;color:var(--green);letter-spacing:.1em;min-width:3.5em;text-align:center}.instrument-select{background:#00000080;border:1px solid var(--dim);color:var(--green);font-family:JetBrains Mono,monospace;font-size:.6rem;padding:.25rem .4rem;cursor:pointer;margin-left:auto}.instrument-select:focus{outline:none;border-color:var(--green)}.keyboard{display:flex;position:relative;height:110px;-webkit-user-select:none;user-select:none}.key{position:relative;cursor:pointer;transition:all .05s;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:.2rem}.key-label{font-size:.45rem;letter-spacing:.05em;pointer-events:none}.key-note{font-size:.35rem;opacity:.5;pointer-events:none}.key-white{flex:1;height:110px;background:linear-gradient(180deg,#e8e8e8,#f5f5f5,#ddd);border:1px solid #999;border-radius:0 0 4px 4px;color:#666;z-index:1;min-width:20px}.key-white:hover{background:linear-gradient(180deg,#d0ffd0,#e0ffe0,#c0e0c0)}.key-white.active{background:linear-gradient(180deg,#0f0,#0c0,#090);box-shadow:0 0 20px #00ff0080;transform:translateY(2px);color:#000}.key-black{position:absolute;width:5%;height:70px;background:linear-gradient(180deg,#333,#111);border:1px solid #000;border-radius:0 0 3px 3px;z-index:2;color:#555;font-size:.35rem;min-width:18px}.key-black .key-note{display:none}.key-black:hover{background:linear-gradient(180deg,#050,#030)}.key-black.active{background:linear-gradient(180deg,#0c0,#060);box-shadow:0 0 15px #0f06;transform:translateY(2px);color:#0f0}.mixer-panel{background:#0014004d;border:1px solid var(--dim);padding:.6rem .75rem;margin-bottom:.75rem;opacity:0;animation:fadeIn .5s ease forwards;animation-delay:.6s}.mixer-empty{text-align:center;color:var(--dim);font-size:.6rem;letter-spacing:.2em;padding:1rem}.mixer-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px solid rgba(51,85,51,.2)}.mixer-track-name{font-size:.7rem;font-weight:700;letter-spacing:.15em}.mixer-track-wave{font-size:.5rem;color:var(--dim);letter-spacing:.1em}.mixer-controls{display:grid;grid-template-columns:1fr 2fr .75fr;gap:.75rem}.mixer-section{padding:.4rem}.panel-label{font-size:.55rem;color:var(--amber);letter-spacing:.2em;margin-bottom:.4rem;font-weight:700}.knob-row{display:flex;gap:.5rem;flex-wrap:wrap}.knob-group{flex:1;min-width:45px;display:flex;flex-direction:column;align-items:center;gap:.15rem}.knob-group label{font-size:.4rem;color:var(--dim);letter-spacing:.15em}.knob-val{font-size:.45rem;color:var(--green);font-variant-numeric:tabular-nums}.knob{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:3px;background:var(--dim);outline:none;border-radius:2px;cursor:pointer}.knob::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;background:var(--green);border-radius:50%;cursor:pointer;box-shadow:0 0 5px #0f06}.knob::-moz-range-thumb{width:10px;height:10px;background:var(--green);border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 5px #0f06}.status-bar{display:flex;gap:2rem;padding:.4rem .75rem;background:#0014004d;border:1px solid var(--dim);font-size:.45rem;color:var(--dim);letter-spacing:.1em;opacity:0;animation:fadeIn .5s ease forwards;animation-delay:.8s;flex-wrap:wrap}.status-green{color:var(--green)}.status-amber{color:var(--amber)}@media(max-width:900px){.viz-row,.mixer-controls{grid-template-columns:1fr}.status-bar{flex-direction:column;gap:.3rem}.transport-info{margin-left:0}}@media(max-width:600px){.studio-container{padding:.5rem}.track-info{min-width:70px}.track-vol-group{min-width:40px}.track-vol-slider{width:35px}.transport-bar{gap:.3rem;padding:.4rem}.keyboard,.key-white{height:90px}.key-black{height:55px}.viz-panel canvas{height:90px}.mixer-controls{grid-template-columns:1fr}.keyboard-header{flex-wrap:wrap}}@media(orientation:portrait){.viz-row{grid-template-columns:1fr}.mixer-controls{grid-template-columns:1fr 1fr}}@media(pointer:coarse){.transport-btn{width:44px;height:44px;font-size:1.2rem}.track-btn{width:32px;height:32px;font-size:.6rem}.oct-btn{width:36px;height:36px}.key-white{min-width:28px}.key-black{min-width:22px}}