:root{--bg:#17151a;--panel:#211e26;--panel-raised:#2a2631;--border:#3a3542;--text:#ede7da;--text-dim:#948d9c;--lit:#ffb000;--lit-glow:#ffb00059;--locked:#2fbf9f;--danger:#e85c4a;--font-display:"Space Grotesk", "Inter", sans-serif;--font-body:"Inter", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg)}body{font-family:var(--font-body);background:var(--bg);color:var(--text);margin:0}button{font-family:inherit}h1,h2{font-family:var(--font-display);margin:0}:root{--bg:#0b0a0f;--bg-soft:#111017;--panel:#15131b;--panel-raised:#1d1a24;--panel-hover:#24202c;--border:#332e3d;--border-light:#474151;--text:#f4f0e7;--text-dim:#918b9d;--text-muted:#625d6c;--lit:#ffb800;--lit-hot:#ffcc45;--lit-glow:#ffb80073;--purple:#b86cff;--cyan:#61d8ff;--green:#45e6a8;--danger:#ff5b61;--font-display:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace}*{box-sizing:border-box}html{background:var(--bg)}body{background:var(--bg);min-width:320px;color:var(--text);font-family:var(--font-display);margin:0}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lit);outline-offset:2px}.app{background:radial-gradient(circle at 10% 0,#ffb8000e,#0000 30%),radial-gradient(circle at 90% 20%,#b86cff0e,#0000 30%),linear-gradient(#0b0a0f,#100e14);flex-direction:column;min-height:100svh;display:flex;overflow-x:hidden}.topbar{z-index:50;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0b0a0feb;justify-content:space-between;align-items:center;gap:30px;padding:20px 40px;display:flex;position:sticky;top:0}.brand{flex-shrink:0;align-items:center;gap:14px;display:flex}.brand-mark{color:var(--lit);text-shadow:0 0 12px var(--lit), 0 0 35px var(--lit-glow);font-size:30px;animation:3s ease-in-out infinite brandPulse}.brand h1{letter-spacing:-.04em;margin:0;font-size:27px;line-height:1}.tagline{color:var(--text-dim);letter-spacing:.01em;margin:5px 0 0;font-size:12px}.transport{align-items:center;gap:14px;display:flex}.play-btn,.export-btn{cursor:pointer;letter-spacing:.02em;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:9px;height:46px;padding:0 20px;font-size:13px;font-weight:800;transition:transform .15s,box-shadow .2s,filter .2s;display:inline-flex}.play-btn{color:#171209;background:linear-gradient(135deg,#ffc21a,#ff9f00);min-width:105px;box-shadow:0 5px 25px #ffb80026}.play-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px #ffb8004d}.play-btn.is-playing{color:#fff;background:linear-gradient(135deg,#ff6868,#e43e49);animation:.8s ease-in-out infinite alternate playingGlow}.export-btn{min-width:145px;color:var(--text);background:linear-gradient(135deg,#28222e,#211d28);border-color:#ffb8004d}.export-btn:hover:not(:disabled){border-color:var(--lit);color:var(--lit-hot);transform:translateY(-2px);box-shadow:0 7px 25px #ffb8002e}.export-btn span{font-size:20px;line-height:1}.export-btn.is-exporting{cursor:wait;color:#fff;background:linear-gradient(135deg,#ff7043,#e84d25);border-color:#0000;animation:1.4s ease-in-out infinite exportPulse}.export-btn.is-exporting span{animation:.8s ease-in-out infinite recordingPulse}.bpm-readout{align-items:center;gap:10px;margin-left:6px;display:flex}.bpm-readout label{color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.12em;font-size:10px}.bpm-readout input{width:120px;accent-color:var(--lit);cursor:pointer}.bpm-value{min-width:42px;color:var(--lit);font-family:var(--font-mono);text-align:right;text-shadow:0 0 12px var(--lit-glow);font-size:20px;font-weight:800}.studio-controls{background:#110f16a6;border-bottom:1px solid #ffffff09;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 40px;display:flex}.control-group,.volume-control{align-items:center;gap:8px;display:flex}.control-label{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.12em;white-space:nowrap;font-size:8px}.control-group select{border:1px solid var(--border);background:var(--panel-raised);min-width:125px;height:34px;color:var(--text);cursor:pointer;border-radius:7px;padding:0 10px;font-size:11px}.studio-action,.reset-btn{border:1px solid var(--border);background:var(--panel-raised);height:34px;color:var(--text-dim);cursor:pointer;border-radius:7px;padding:0 13px;font-size:11px;font-weight:700;transition:border-color .15s,color .15s,background .15s}.studio-action:hover{border-color:var(--lit);color:var(--lit);background:var(--panel-hover)}.studio-action span{color:var(--lit)}.volume-control{min-width:245px;margin-left:auto}.volume-icon{font-size:13px}.volume-control input{width:105px;accent-color:var(--lit);cursor:pointer}.volume-value{min-width:40px;color:var(--text-dim);font-family:var(--font-mono);font-size:9px}.reset-btn:hover{border-color:var(--danger);color:#ff8589}.music-visualizer{border:1px solid var(--border);background:radial-gradient(circle,#ffb80014,#0000 30%),radial-gradient(circle at 80%,#b86cff14,#0000 35%),linear-gradient(135deg,#ffb80006,#b86cff09);border-radius:16px;align-items:center;gap:25px;min-height:145px;margin:22px 40px 0;padding:20px 25px;transition:border-color .15s,box-shadow .15s,transform .15s;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 60px #ffb80006}.music-visualizer:before{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff09,#0000);position:absolute;inset:0;transform:translate(-100%)}.music-visualizer.is-playing:before{animation:2.2s linear infinite visualizerSweep}.music-visualizer.is-playing{box-shadow:0 0 calc(30px * var(--beat-intensity)) #ffb80033, inset 0 0 calc(80px * var(--beat-intensity)) #ffb80009;border-color:#ffb8006b}.visualizer-info{z-index:2;align-items:center;gap:10px;min-width:145px;display:flex;position:relative}.visualizer-info strong{font-family:var(--font-mono);letter-spacing:.12em;font-size:11px;display:block}.visualizer-info small{color:var(--text-dim);margin-top:4px;font-size:10px;display:block}.live-dot{background:var(--text-muted);border-radius:50%;flex-shrink:0;width:9px;height:9px}.music-visualizer.is-playing .live-dot{background:var(--danger);box-shadow:0 0 7px var(--danger), 0 0 16px #ff5b6199;animation:.55s ease-in-out infinite alternate livePulse}.visualizer-orb{flex-shrink:0;justify-content:center;align-items:center;width:78px;height:78px;display:flex;position:relative}.orb-core{background:radial-gradient(circle at 35% 30%, #fff0a8, var(--lit) 35%, #ff8f00);width:27px;height:27px;box-shadow:0 0 12px var(--lit), 0 0 30px var(--lit-glow);border-radius:50%;transition:transform .1s,box-shadow .1s}.music-visualizer.is-playing .orb-core{transform:scale(calc(1 + var(--beat-intensity) * .5));box-shadow:0 0 15px var(--lit), 0 0 38px var(--lit), 0 0 75px var(--lit-glow)}.orb-ring{border:1px solid #ffb80033;border-radius:50%;position:absolute;inset:0}.ring-one{inset:9px}.ring-two{border-color:#ff704338;inset:17px}.ring-three{border-color:#b86cff2e}.music-visualizer.is-playing .ring-one{transform:scale(calc(1 + var(--beat-intensity) * .35))}.music-visualizer.is-playing .ring-two{transform:scale(calc(1 + var(--beat-intensity) * .55));opacity:.65}.music-visualizer.is-playing .ring-three{transform:scale(calc(1 + var(--beat-intensity) * .8));opacity:.45}.equalizer{z-index:2;flex:1;justify-content:center;align-items:center;gap:4px;height:90px;display:flex;position:relative;overflow:hidden}.eq-bar{width:5px;min-height:6px;height:var(--bar-height);background:linear-gradient(to top, var(--lit), #ff7043, var(--purple));opacity:.2;transform-origin:50%;border-radius:5px;display:block}.music-visualizer.is-playing .eq-bar{opacity:.9;animation:.55s ease-in-out infinite alternate equalizerBounce;animation-delay:var(--bar-delay)}.visualizer-stats{z-index:2;gap:14px;display:flex;position:relative}.visualizer-stats div{border-left:1px solid var(--border);text-align:center;min-width:48px;padding-left:12px}.visualizer-stats span{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.1em;font-size:7px;display:block}.visualizer-stats strong{font-family:var(--font-mono);margin-top:4px;font-size:17px;display:block}.visualizer-step{z-index:2;text-align:center;min-width:54px;position:relative}.visualizer-step span{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.12em;font-size:8px;display:block}.visualizer-step strong{color:var(--lit);font-family:var(--font-mono);text-shadow:0 0 12px var(--lit-glow);margin-top:3px;font-size:23px;display:block}.webmcp-banner{border:1px solid var(--border);background:linear-gradient(135deg,#ffffff05,#ffffff02);border-radius:11px;margin:16px 40px 0;padding:16px 20px}.webmcp-header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px;display:flex}.webmcp-status{align-items:center;gap:10px;display:flex}.webmcp-status strong{font-family:var(--font-mono);color:var(--lit);letter-spacing:.12em;font-size:10px}.webmcp-status p{color:var(--text-dim);margin:3px 0 0;font-size:11px}.status-dot{background:var(--text-muted);border-radius:50%;width:8px;height:8px}.status-dot.ready{background:var(--green);animation:1s ease-in-out infinite alternate livePulse;box-shadow:0 0 8px #45e6a8cc}.webmcp-badge{color:var(--green);font-family:var(--font-mono);letter-spacing:.12em;background:#45e6a80f;border:1px solid #45e6a833;border-radius:999px;padding:5px 9px;font-size:7px}.tool-badges{flex-wrap:wrap;gap:6px;display:flex}.tool-badge{border:1px solid var(--border);background:var(--panel);color:var(--lit);font-family:var(--font-mono);border-radius:5px;padding:5px 8px;font-size:9px;transition:border-color .15s,box-shadow .15s,transform .15s}.tool-badge:hover{border-color:var(--lit);box-shadow:0 0 12px var(--lit-glow);transform:translateY(-1px)}.workspace{flex:1;grid-template-columns:minmax(0,1fr) 330px;align-items:start;gap:20px;padding:20px 40px 30px;display:grid}.sequencer-panel{border:1px solid var(--border);background:linear-gradient(180deg, #ffffff05, transparent 20%), var(--panel);border-radius:13px;min-width:0;padding:23px;box-shadow:0 15px 50px #00000026}.sequencer-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px;display:flex}.section-eyebrow{color:var(--lit);font-family:var(--font-mono);letter-spacing:.16em;margin-bottom:5px;font-size:8px}.sequencer-header h2{letter-spacing:-.025em;margin:0;font-size:20px}.section-description{color:var(--text-dim);margin:5px 0 0;font-size:11px}.add-track-row{gap:7px;display:flex}.add-track-row select,.add-track-row button{border:1px solid var(--border);background:var(--panel-raised);height:36px;color:var(--text);border-radius:7px;font-size:11px}.add-track-row select{cursor:pointer;min-width:120px;padding:0 10px}.add-track-row button{cursor:pointer;padding:0 13px;font-weight:700;transition:border-color .15s,background .15s,color .15s}.add-track-row button:hover:not(:disabled){border-color:var(--lit);color:var(--lit);background:var(--panel-hover)}.add-track-row button:disabled{opacity:.35;cursor:not-allowed}.step-header{border-bottom:1px solid var(--border);margin-bottom:5px;padding-bottom:7px;display:flex}.track-label-spacer{width:170px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.1em;flex-shrink:0;font-size:8px}.step-numbers{flex:1;grid-template-columns:repeat(16,minmax(0,1fr));gap:6px;display:grid}.step-number{color:var(--text-muted);font-family:var(--font-mono);text-align:center;font-size:8px;transition:color .1s,text-shadow .1s}.step-number.beat-start{color:var(--text)}.step-number.is-current{color:var(--lit);text-shadow:0 0 10px var(--lit-glow);font-weight:800}.tracks{width:100%}.track-row{border-top:1px solid #ffffff09;align-items:center;min-height:58px;padding:8px 0;transition:background .15s,box-shadow .15s;display:flex}.track-row.is-active{background:linear-gradient(90deg,#ffb8000b,#0000)}.track-row.is-locked{opacity:.72}.track-label{flex-shrink:0;align-items:center;gap:8px;width:170px;display:flex}.instrument-icon{border:1px solid var(--border);background:var(--panel-raised);width:28px;height:28px;color:var(--lit);font-family:var(--font-mono);text-shadow:0 0 8px;border-radius:7px;justify-content:center;align-items:center;font-size:10px;display:flex}.instrument-bass{color:var(--cyan)}.instrument-synthpad{color:var(--purple)}.instrument-hihat{color:#9dffd0}.instrument-snare{color:#ff8969}.instrument-clap{color:#ffd36d}.track-name{flex-direction:column;gap:2px;min-width:48px;display:flex}.track-name span{white-space:nowrap;font-size:12px;font-weight:700}.track-name small{color:var(--text-muted);font-family:var(--font-mono);font-size:7px}.lock-btn,.clear-btn{cursor:pointer;background:0 0;border:none;flex-shrink:0;transition:color .15s,transform .15s}.lock-btn{filter:grayscale(.5);margin-left:auto;font-size:11px}.lock-btn:hover{filter:none;transform:scale(1.12)}.lock-btn.locked{color:var(--lit);filter:none;text-shadow:0 0 8px var(--lit-glow)}.clear-btn{color:var(--text-muted);margin-left:2px;font-size:17px;line-height:1}.clear-btn:hover{color:var(--danger);transform:scale(1.1)}.steps{flex:1;grid-template-columns:repeat(16,minmax(0,1fr));gap:6px;display:grid}.step{aspect-ratio:1;border:1px solid var(--border);cursor:pointer;background:#211e28;border-radius:5px;width:100%;min-width:0;padding:0;transition:background .1s,border-color .1s,box-shadow .1s,transform .1s}.step:hover:not(:disabled){border-color:var(--border-light);background:#292531;transform:translateY(-2px)}.step.beat-start{border-color:#48414e}.step.is-on{border-color:var(--lit);background:linear-gradient(135deg,#ffc21a,#ff9f00);box-shadow:0 0 8px #ffb80038,inset 0 1px #fff3}.step.is-current{box-shadow:0 0 0 2px #ffffffe6,0 0 15px #ffffff1f}.step.is-on.is-current{box-shadow:0 0 0 2px #fff, 0 0 18px var(--lit), 0 0 30px #ffb8004d}.step.is-playing-hit{animation:.2s ease-out stepHit}.step:disabled{cursor:not-allowed}.empty-state{color:var(--text-dim);align-items:center;gap:13px;padding:25px 10px;display:flex}.empty-state>span{color:var(--lit);font-size:25px}.empty-state strong{color:var(--text);font-size:13px;display:block}.empty-state p{margin:3px 0 0;font-size:10px}.sequencer-footer{border-top:1px solid var(--border);color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.06em;align-items:center;gap:14px;margin-top:14px;padding-top:12px;font-size:7px;display:flex}.sequencer-footer span{align-items:center;gap:5px;display:inline-flex}.legend-dot{border-radius:50%;width:6px;height:6px;display:inline-block}.legend-dot.active{background:var(--lit);box-shadow:0 0 7px var(--lit)}.legend-dot.locked{background:var(--purple)}.legend-line{background:var(--border-light);width:9px;height:1px;display:inline-block}.footer-hint{text-align:right;margin-left:auto}.activity-panel{border:1px solid var(--border);background:var(--panel);border-radius:13px;flex-direction:column;min-width:0;height:100%;min-height:510px;max-height:650px;padding:20px;display:flex;overflow:hidden}.activity-header{justify-content:space-between;align-items:flex-start;margin-bottom:14px;display:flex}.activity-header h2{margin:0;font-size:17px}.activity-live{color:var(--green);font-family:var(--font-mono);letter-spacing:.1em;align-items:center;gap:6px;font-size:7px;display:flex}.activity-live>span{background:var(--green);border-radius:50%;width:6px;height:6px;animation:.9s ease-in-out infinite alternate livePulse;box-shadow:0 0 9px #45e6a8cc}.agent-card{border:1px solid var(--border);background:linear-gradient(135deg,#ffb80009,#b86cff06);border-radius:9px;align-items:center;gap:10px;margin-bottom:12px;padding:12px;display:flex}.agent-avatar{border:1px solid var(--border);width:34px;height:34px;color:var(--lit);text-shadow:0 0 10px var(--lit);background:radial-gradient(circle,#ffb80026,#0000);border-radius:8px;justify-content:center;align-items:center;font-size:17px;display:flex}.agent-card strong{font-size:11px;display:block}.agent-card>div:nth-child(2) span{color:var(--text-dim);margin-top:3px;font-size:8px;display:block}.agent-wave{align-items:center;gap:2px;margin-left:auto;display:flex}.agent-wave i{background:var(--green);opacity:.7;border-radius:2px;width:2px;height:7px}.agent-wave i:nth-child(2){height:13px}.agent-wave i:nth-child(3){height:18px}.agent-wave i:nth-child(4){height:10px}.agent-wave i:nth-child(5){height:15px}.activity-log{flex-direction:column;flex:1;gap:6px;min-height:0;padding-right:4px;display:flex;overflow-y:auto}.activity-log::-webkit-scrollbar{width:4px}.activity-log::-webkit-scrollbar-track{background:0 0}.activity-log::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}.activity-entry{background:#ffffff03;border:1px solid #0000;border-radius:6px;grid-template-columns:23px 1fr;gap:7px;padding:8px;transition:background .15s,border-color .15s;display:grid}.activity-entry:hover{border-color:var(--border);background:#ffffff06}.activity-index{color:var(--lit);font-family:var(--font-mono);opacity:.7;font-size:7px}.activity-entry p{color:var(--text-dim);margin:0;font-size:9px;line-height:1.45}.activity-footer{border-top:1px solid var(--border);color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.05em;justify-content:space-between;gap:10px;margin-top:10px;padding-top:12px;font-size:7px;display:flex}.connection-state{color:var(--green)}.app-footer{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.12em;justify-content:space-between;align-items:center;gap:15px;padding:10px 40px 16px;font-size:7px;display:flex}@keyframes brandPulse{0%,to{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}@keyframes livePulse{0%{opacity:.65;transform:scale(.75)}to{opacity:1;transform:scale(1.15)}}@keyframes playingGlow{0%{box-shadow:0 0 #ff5b610d}to{box-shadow:0 0 25px #ff5b6147}}@keyframes exportPulse{0%,to{box-shadow:0 0 #ff70431a}50%{box-shadow:0 0 22px #ff704359}}@keyframes recordingPulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@keyframes equalizerBounce{0%{transform:scaleY(.45)}to{transform:scaleY(1.2)}}@keyframes stepHit{0%{transform:scale(.75)}65%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes visualizerSweep{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (width<=1150px){.workspace{grid-template-columns:minmax(0,1fr) 285px}.track-label,.track-label-spacer{width:145px}.visualizer-stats{display:none}}@media (width<=900px){.topbar{padding:18px 22px}.transport{flex-wrap:wrap}.studio-controls{padding-left:22px;padding-right:22px}.volume-control{margin-left:0}.music-visualizer,.webmcp-banner{margin-left:22px;margin-right:22px}.workspace{grid-template-columns:1fr;padding-left:22px;padding-right:22px}.activity-panel{max-height:430px}}@media (width<=650px){.topbar{align-items:flex-start}.brand h1{font-size:23px}.transport{width:100%}.play-btn,.export-btn{flex:1}.bpm-readout{justify-content:space-between;width:100%}.bpm-readout input{flex:1}.music-visualizer{gap:10px;min-height:120px;padding:15px}.visualizer-info{min-width:75px}.visualizer-info small{display:none}.visualizer-orb{width:52px;height:52px}.orb-core{width:20px;height:20px}.equalizer{height:60px}.eq-bar{width:3px}.visualizer-step{min-width:42px}.visualizer-step strong{font-size:18px}.track-label,.track-label-spacer{width:105px}.track-name small{display:none}.instrument-icon{width:22px;height:22px}.track-name span{font-size:10px}.steps,.step-numbers{gap:3px}.step{border-radius:3px}.sequencer-panel{padding:15px}.sequencer-footer{flex-wrap:wrap}.footer-hint{text-align:left;width:100%;margin-left:0}.app-footer{flex-wrap:wrap;padding-left:22px;padding-right:22px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}