:root{--surface:#0a0a0f;--text:#e0e0e8;--text-dim:#e0e0e880;--text-faint:#e0e0e847;--border:#ffffff14;--cyan:#00fff5;--lime:#39ff14;--magenta:#ff2d95;--amber:#ffb800;--font-display:"Outfit", ui-sans-serif, system-ui, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;color:var(--text);background:var(--surface);font-family:var(--font-display);font-synthesis:none}*{box-sizing:border-box}html,body{height:100%}body{background:var(--surface);min-width:320px;margin:0}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}button:disabled{cursor:not-allowed;opacity:.35}a{color:var(--cyan)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#00fff530;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#00fff561}.boot-shell{min-height:100vh;color:var(--cyan);letter-spacing:.35em;font-family:var(--font-mono);place-items:center;display:grid}.route-message{text-align:center;place-content:center;gap:10px;min-height:100vh;display:grid}.route-message h1,.route-message p{margin:0}.route-message h1,.route-message a{color:var(--cyan)}.studio-shell{background-image:linear-gradient(#00fff508 1px,#0000 1px),linear-gradient(90deg,#00fff508 1px,#0000 1px);background-size:24px 24px;flex-direction:column;height:100dvh;display:flex;position:relative;overflow:hidden}.topbar{border-bottom:1px solid var(--border);background:#0a0a0fcc;flex:none;justify-content:space-between;align-items:center;height:40px;padding:0 14px;display:flex}.brand{align-items:baseline;gap:8px;display:flex}.brand-name{color:var(--cyan);letter-spacing:.22em;text-shadow:0 0 7px var(--cyan), 0 0 20px #00fff580;font-size:14px;font-weight:700}.brand-tag{color:#00fff566;font:500 10px var(--font-mono);letter-spacing:.3em;text-transform:uppercase}.topbar-actions{align-items:center;gap:10px;display:flex}.eq-bars{align-items:flex-end;gap:2px;height:14px;display:flex}.eq-bars span{background:var(--lime);transform-origin:bottom;border-radius:2px;width:3px;height:100%;animation:.6s ease-in-out infinite bar-bounce}.status-led{background:#fff3;border-radius:50%;width:8px;height:8px}.status-led.active{background:var(--lime);animation:2s ease-in-out infinite glow-pulse;box-shadow:0 0 6px #39ff1480}.status-led.busy{background:var(--amber);animation:2s ease-in-out infinite glow-pulse;box-shadow:0 0 6px #ffb80080}@keyframes glow-pulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes bar-bounce{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.chrome{border:1px solid var(--border);color:var(--text-dim);font:500 10px var(--font-mono);letter-spacing:.14em;background:#1a1a2a59;border-radius:5px;padding:4px 9px;transition:border-color .15s,color .15s,background .15s}.chrome:hover:not(:disabled),.chrome.open{color:var(--cyan);background:#00fff514;border-color:#00fff573}.primary{color:var(--cyan);font:500 11px var(--font-mono);letter-spacing:.14em;background:#00fff51f;border:1px solid #00fff54d;border-radius:7px;padding:8px 14px;transition:border-color .15s,background .15s,box-shadow .15s}.primary:hover:not(:disabled){background:#00fff533;border-color:#00fff599;box-shadow:0 0 12px #00fff530}.transport{min-width:92px;font:600 11px var(--font-mono);letter-spacing:.12em;border-radius:7px;padding:6px 12px;transition:border-color .15s,background .15s,box-shadow .15s}.transport.start{color:var(--lime);background:#39ff1414;border:1px solid #39ff144d}.transport.start:hover:not(:disabled){border-color:#39ff1499;box-shadow:0 0 12px #39ff1430}.transport.stop{color:var(--magenta);background:#ff2d9514;border:1px solid #ff2d954d}.transport.stop:hover:not(:disabled){border-color:#ff2d9599;box-shadow:0 0 12px #ff2d9530}.studio-grid{flex:1;grid-template-columns:minmax(0,1fr) minmax(320px,400px);min-height:0;display:grid}.editor-pane{border-right:1px solid var(--border);background:#0a0a0f8c;flex-direction:column;min-width:0;min-height:0;display:flex}.editor-bar{border-bottom:1px solid var(--border);flex:none;align-items:center;gap:8px;height:46px;padding:0 10px 0 14px;display:flex}.title-input{min-width:0;color:var(--text);font:500 14px var(--font-display);background:0 0;border:0;border-bottom:1px solid #0000;outline:none;flex:1;padding:4px 0}.title-input:focus{border-bottom-color:#00fff573}.editor-surface{flex:1;min-height:0}.editor-surface>div{height:100%}.cm-editor{height:100%;font-size:14px;background:0 0!important}.cm-editor .cm-scroller{font-family:var(--font-mono)}.cm-editor .cm-gutters{background:0 0!important;border-right:1px solid #00fff514!important}.cm-editor .cm-activeLineGutter{background:#00fff50f!important}.cm-editor .cm-activeLine{background:#00fff508!important}.cm-editor .cm-cursor{border-left-color:var(--cyan)!important}.cm-playback-highlight{background:color-mix(in srgb, var(--lime) 24%, transparent);border-radius:3px;outline:1px solid #39ff14cc;box-shadow:0 0 8px #39ff1466,inset 0 0 10px #39ff141f}.editor-pane>.error{margin:10px 14px}.session-pane{background:#12121c73;flex-direction:column;min-height:0;display:flex}.composer{flex-direction:column;flex:1;gap:10px;min-height:0;padding:0 14px 14px;display:flex}.session-bar{border-bottom:1px solid var(--border);flex:none;justify-content:space-between;align-items:center;height:46px;margin:0 -14px;padding:0 10px 0 14px;display:flex}.session-label{color:#00fff599;font:600 10px var(--font-mono);letter-spacing:.3em}.chrome.reset{padding:3px 8px;font-size:13px;line-height:1}.empty-session{text-align:center;flex-direction:column;flex:1;justify-content:center;gap:18px;min-height:0;padding:8px 0;display:flex;overflow-y:auto}.empty-session h2{font:500 15px var(--font-display);color:#e0e0e8e6;margin:0}.empty-session p{color:var(--text-dim);font:400 11px var(--font-mono);margin:4px 0 0}.preset-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.preset-grid button{text-align:left;border:1px solid var(--border);background:#1a1a2a66;border-radius:8px;gap:3px;padding:10px 11px;transition:border-color .15s,background .15s;display:grid}.preset-grid button:hover:not(:disabled){background:#1a1a2acc;border-color:#00fff566}.preset-title{font:600 12px var(--font-display);color:#e0e0e8d9}.preset-genre{font:400 10px var(--font-mono);color:var(--text-faint)}.random{color:var(--cyan);font:400 11px var(--font-mono);background:#00fff514;border:1px solid #00fff54d;border-radius:999px;justify-self:center;margin:0 auto;padding:6px 14px;transition:border-color .15s,background .15s}.random:hover:not(:disabled){background:#00fff529;border-color:#00fff599}.transcript{flex:1;align-content:start;gap:8px;min-height:0;padding-top:2px;display:grid;overflow-y:auto}.transcript p{border-radius:8px;margin:0;padding:8px 11px;font-size:13px;line-height:1.45}.transcript .user{color:#e0e0e8d9;background:#1a1a2ab3;justify-self:end;max-width:88%}.transcript .assistant{background:#00fff50d;border:1px solid #00fff51a;max-width:92%}.stream-dots{width:max-content;color:var(--cyan);letter-spacing:.12em;display:inline-flex}.stream-dots span{animation:.9s infinite alternate dot-bounce}.stream-dots span:nth-child(2){animation-delay:.12s}.stream-dots span:nth-child(3){animation-delay:.24s}@keyframes dot-bounce{to{opacity:.2;transform:translateY(-2px)}}.chip-row,.mix-row{flex-wrap:wrap;flex:none;align-items:center;gap:6px;display:flex}.chip-label{color:var(--text-faint);font:600 9px var(--font-mono);letter-spacing:.22em;margin-right:2px}.chip-row.next .chip-label{color:#ff2d958c}.chip{border:1px solid var(--border);color:#e0e0e8b3;font:400 11px var(--font-mono);white-space:nowrap;background:#1a1a2a66;border-radius:999px;padding:3px 10px;transition:border-color .15s,color .15s,background .15s}.chip:hover:not(:disabled){color:var(--cyan);background:#00fff514;border-color:#00fff566}.chip-row.next .chip:hover:not(:disabled),.chip.selected{color:var(--magenta);background:#ff2d9514;border-color:#ff2d9573}.mix-row .chip-label{color:#ff2d958c}.mix-row .primary{color:var(--magenta);background:#ff2d951a;border-color:#ff2d9559;margin-left:auto;padding:4px 12px}.mix-row .primary:hover:not(:disabled){background:#ff2d952e;border-color:#ff2d95a6;box-shadow:0 0 12px #ff2d9530}.prompt-form{flex:none;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;display:grid}.prompt-form textarea,.key-card input{resize:none;width:100%;color:var(--text);border:1px solid var(--border);font:400 13px var(--font-mono);background:#1a1a2a80;border-radius:8px;outline:none;padding:9px 12px;transition:border-color .15s,box-shadow .15s}.prompt-form textarea::placeholder,.key-card input::placeholder{color:var(--text-faint)}.prompt-form textarea:focus,.key-card input:focus{border-color:#00fff566;box-shadow:0 0 8px #00fff51f}.error{color:var(--magenta);background:#ff2d9514;border:1px solid #ff2d9540;border-radius:7px;flex:none;margin:0;padding:8px 11px;font-size:12px}.muted{color:var(--text-dim);font-size:13px}.key-card{flex-direction:column;flex:1;justify-content:center;gap:12px;padding:22px;display:flex}.key-card h2{color:#00fff5b3;font:600 11px var(--font-mono);letter-spacing:.3em;margin:0}.key-card p{color:var(--text-dim);margin:0;font-size:13px;line-height:1.55}.key-card form{gap:10px;display:grid}.key-card-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.library-popover{z-index:20;border:1px solid var(--border);background:#12121cf7;border-radius:10px;gap:4px;width:min(320px,100vw - 20px);max-height:55vh;padding:10px;display:grid;position:absolute;top:44px;right:10px;overflow-y:auto;box-shadow:0 12px 34px #0000008c}.library-row{grid-template-columns:minmax(0,1fr) auto;gap:4px;display:grid}.library-row button:first-child{text-align:left;text-overflow:ellipsis;white-space:nowrap;color:#e0e0e8d9;border-radius:6px;padding:7px 9px;font-size:13px;transition:background .15s,color .15s;overflow:hidden}.library-row button:first-child:hover{color:var(--cyan);background:#00fff514}.library-row .delete{color:var(--text-faint);border-radius:6px;padding:0 9px;font-size:14px;transition:color .15s,background .15s}.library-row .delete:hover{color:var(--magenta);background:#ff2d9514}@media (width<=880px){.studio-grid{grid-template-rows:minmax(0,52%) minmax(0,48%);grid-template-columns:1fr}.editor-pane{border-right:0;border-bottom:1px solid var(--border)}.transport{min-width:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}