:root{--bg:#0a0a12;--panel:#13131f;--panel2:#1a1a2e;--accent:#e94560;--accent3:#16c79a;--text:#e0e0e0;--dim:#777;--border:#2a2a3e}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;min-height:100vh}
#app{max-width:1100px;margin:0 auto;padding:16px}
header{text-align:center;margin-bottom:24px}
header h1{font-size:2rem;color:var(--accent)}
.subtitle{color:var(--dim);font-size:.85rem;margin-top:4px}
.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{background:var(--panel);color:var(--dim);border:1px solid var(--border);border-radius:8px 8px 0 0;padding:10px 20px;cursor:pointer;font-size:.9rem}
.tab.active{color:var(--accent);border-color:var(--accent)}
.tab:hover{color:var(--text)}
.tab-content{display:none}.tab-content.active{display:block}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
.panel h2{color:var(--accent3);font-size:1.1rem;margin-bottom:16px}
.control-group{margin-bottom:14px}
.control-group label{display:block;font-size:.8rem;color:var(--dim);margin-bottom:4px}
select,textarea{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px;font-size:.85rem}
input[type=range]{width:100%;accent-color:var(--accent)}
.row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.synth-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.btn{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:.85rem;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn-primary{border-color:var(--accent);color:var(--accent)}
.btn-play{border-color:var(--accent3);color:var(--accent3)}
.btn-stop{border-color:#e74c3c;color:#e74c3c}
.status{margin-top:8px;font-size:.8rem;color:var(--dim)}
.canvas-container{margin-top:16px;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
canvas{display:block;width:100%;height:auto;background:#000}
.storyboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:16px}
.storyboard-frame{border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer}
.storyboard-frame:hover{border-color:var(--accent)}
.storyboard-frame p{padding:6px;font-size:.75rem;color:var(--dim)}
.mixer-tracks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mixer-track{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:12px}
.mixer-track label{font-size:.8rem;color:var(--dim);display:block;margin-bottom:6px}
.timeline{margin-top:16px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.timeline-track{display:flex;align-items:center;border-bottom:1px solid var(--border);min-height:60px}
.timeline-track:last-child{border-bottom:none}
.track-label{width:60px;font-size:.75rem;color:var(--dim);padding:8px;text-align:center;border-right:1px solid var(--border)}
.timeline-clips{flex:1;display:flex;gap:4px;padding:8px}
.clip{background:#0f3460;border-radius:4px;padding:4px 8px;font-size:.7rem;color:#fff;cursor:pointer}
@media(max-width:768px){.row,.synth-grid,.mixer-tracks{grid-template-columns:1fr}}