@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');
*{box-sizing:border-box}
:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eee;background:#0d0d0d}
body{margin:0;background:#0d0d0d}
button{font:inherit}
.app{width:min(1180px,96vw);margin:0 auto;padding:16px 0 22px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:9px}
h1{font-size:24px;line-height:1;margin:0 0 5px;letter-spacing:.02em}
.top p{margin:0;color:#666;font-size:11px}
.midi-pill{border:1px solid #2b2b2b;border-radius:999px;padding:6px 10px;color:#727272;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}


.toolbar{display:grid;grid-template-columns:1.15fr 1.4fr auto;gap:9px;margin-bottom:9px}
.preset-box,.routing-box,.velocity-box{border:1px solid #292929;background:#111;border-radius:9px;padding:8px;display:flex;align-items:center;gap:7px;min-width:0}
.toolbar label{font:8px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:#5f5f5f;white-space:nowrap}
.toolbar select,.toolbar input,.toolbar button{height:30px;border:1px solid #333;border-radius:6px;background:#151515;color:#999;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}
.toolbar select{padding:0 25px 0 8px;min-width:0}
#presetSelect{flex:1}
#savePreset{padding:0 10px;cursor:pointer}
#savePreset:hover,.toggle:hover{color:#ddd;border-color:#555}
.routing-box select{flex:1}
#midiChannelSelect{max-width:72px}
.velocity-box{justify-content:flex-end}
.toggle{min-width:58px;padding:0 10px;cursor:pointer}
.toggle.fixed{background:#e8e8e8;color:#111;border-color:#e8e8e8}
#fixedVelocity{width:54px;padding:0 7px}
#fixedVelocity:disabled{opacity:.35}

.instrument{display:grid;grid-template-columns:42% 58%;gap:9px;min-height:388px}
.visual{display:grid;grid-template-rows:minmax(0,1fr) auto;border:1px solid #292929;background:#111;border-radius:12px;overflow:hidden;min-width:0}
.shape-stage{position:relative;min-height:295px;background:radial-gradient(circle at 50% 45%,#171717 0,#111 58%,#0b0b0b 100%)}
#shapeCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.shape-meta{padding:0 14px 14px;text-align:center}
.vertex{font:500 clamp(31px,4.2vw,52px)/.95 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;color:#f1f1f1}
.shape-name{font-size:13px;color:#999;margin-top:7px}
.shape-stats{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#555;margin-top:5px}

.panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:9px}
.control{position:relative;background:#111;border:1px solid #292929;border-radius:11px;padding:9px 5px 7px;text-align:center;min-width:0;display:flex;flex-direction:column;justify-content:center}
.label-row{display:flex;justify-content:center;align-items:center;gap:4px}
.label{font-size:9px;letter-spacing:.08em;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info{position:relative;color:#555;font-size:10px;cursor:help;line-height:1}
.info:hover{color:#bbb}
.info:after{content:attr(data-tip);position:absolute;z-index:20;bottom:calc(100% + 9px);left:50%;transform:translate(-50%,4px);width:215px;padding:9px 10px;background:#e8e8e8;color:#111;border-radius:7px;font:11px/1.35 system-ui,sans-serif;text-align:left;box-shadow:0 8px 24px #0008;opacity:0;pointer-events:none;transition:.12s}
.info:before{content:"";position:absolute;z-index:21;bottom:calc(100% + 4px);left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:#e8e8e8;opacity:0;pointer-events:none;transition:.12s}
.info:hover:after,.info:hover:before{opacity:1;transform:translate(-50%,0)}
.knob{width:70px;height:70px;margin:8px auto 4px;border:2px solid #464646;border-radius:50%;position:relative;background:radial-gradient(circle at 38% 34%,#242424,#151515 62%,#101010);cursor:ns-resize;touch-action:none;box-shadow:inset 0 0 0 1px #0b0b0b}
.knob:before{content:"";position:absolute;width:2px;height:23px;background:#f0f0f0;left:50%;top:6px;transform-origin:50% 29px;transform:translateX(-50%) rotate(var(--angle,-135deg));border-radius:2px}
.knob.geometry:after{content:"";position:absolute;inset:9px;border:1px solid #353535;border-radius:50%}
.knob-value{height:17px;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learn{align-self:center;margin-top:5px;padding:3px 5px;border:1px solid #343434;border-radius:5px;background:#151515;color:#5e5e5e;font-size:8px;cursor:pointer}
.learn.mapped{color:#999;border-color:#454545}
.learn.learning{background:#eee;color:#111}
.control.geometry-control{border-color:#383838}
.control.geometry-control .label{color:#aaa}

.lower{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:stretch;margin-top:9px}
.monitor{min-height:46px;border:1px solid #292929;border-radius:9px;background:#090909;padding:8px 11px;font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#5e5e5e}
.monitor strong{color:#aaa}
.actions{display:flex;gap:7px}
.actions button{border:1px solid #303030;border-radius:8px;background:#131313;color:#696969;padding:0 10px;font-size:9px;cursor:pointer}
.actions button:hover{color:#aaa;border-color:#444}

.keyboard-wrap{margin-top:9px;border:1px solid #292929;border-radius:10px;padding:8px;background:#101010}
.keyboard-head{display:flex;justify-content:space-between;gap:20px;color:#5f5f5f;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.03em;margin:0 2px 7px}
.keyboard-head strong{color:#aaa}
.keyboard{position:relative;height:80px;display:flex;user-select:none}
.key{position:relative;flex:1;background:#d9d9d9;color:#111;border:1px solid #555;border-radius:0 0 4px 4px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;font-size:8px}
.key.black{position:absolute;z-index:2;width:8%;height:49px;background:#1c1c1c;color:#999;border-color:#000;top:0}
.key.active{background:#aaa}
.key.black.active{background:#666}
footer{margin-top:7px;color:#444;font-size:9px}

.audio-gate{position:fixed;inset:0;z-index:100;background:#0b0b0bee;display:grid;place-items:center;backdrop-filter:blur(5px)}
.audio-gate.hidden{display:none}
.audio-gate button{width:min(430px,88vw);padding:25px 28px;border:1px solid #3a3a3a;border-radius:14px;background:#121212;color:#eee;cursor:pointer;text-align:center}
.audio-gate span{display:block;color:#666;font-size:10px;letter-spacing:.18em;margin-bottom:10px}
.audio-gate strong{display:block;font-size:16px;letter-spacing:.04em}
.audio-gate small{display:block;color:#666;margin-top:9px;line-height:1.4}

@media(max-width:900px){
.instrument{grid-template-columns:1fr;min-height:0}
.shape-stage{min-height:310px}
.panel{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,145px);margin-top:0}
}
@media(max-width:570px){
.panel{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
.keyboard-head{flex-direction:column;gap:3px}
}

@media(max-width:760px){.toolbar{grid-template-columns:1fr}.routing-box,.velocity-box{justify-content:flex-start}}
.syncbar{display:grid;grid-template-columns:1fr 2fr;gap:9px;margin-bottom:9px}.clock-box,.lfo-box{border:1px solid #292929;background:#111;border-radius:9px;padding:8px;display:flex;align-items:center;gap:7px;min-width:0}.syncbar label{font:8px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:#5f5f5f;white-space:nowrap}.syncbar select,.syncbar button{height:30px;border:1px solid #333;border-radius:6px;background:#151515;color:#999;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}.syncbar select{padding:0 24px 0 8px}.bpm{margin-left:auto;font:600 12px ui-monospace,SFMono-Regular,Consolas,monospace;color:#aaa;white-space:nowrap}.lfo-box input[type=range]{min-width:80px;flex:1;accent-color:#aaa}.lfo-box output{width:52px;color:#999;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}@media(max-width:760px){.syncbar{grid-template-columns:1fr}.clock-box,.lfo-box{flex-wrap:wrap}}

.sync-note{font:8px ui-monospace,SFMono-Regular,Consolas,monospace;color:#555}
.spectrum-wrap{margin-top:9px;border:1px solid #292929;border-radius:10px;background:#090909;padding:8px 10px}
.spectrum-head{display:flex;justify-content:space-between;color:#555;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;margin-bottom:5px}
#spectrumCanvas{display:block;width:100%;height:112px}
@media(max-width:900px){
.panel{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,145px)}
}
@media(max-width:700px){
.panel{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
}

.beat-box{border:1px solid #292929;background:#111;border-radius:9px;padding:8px;display:flex;align-items:center;gap:7px;min-width:0}
.beat-box label{font:8px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:#5f5f5f;white-space:nowrap}
.beat-box select,.beat-box button{height:30px;border:1px solid #333;border-radius:6px;background:#151515;color:#999;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}
.beat-box select{padding:0 25px 0 8px}

.lfo-box,.beat-box{display:none!important}



/* v11.5: master volume lives outside the 8-control sound-design grid */
.master-volume-control{
 width:min(180px,22vw);
 margin:14px 0 0 auto;
 border:1px solid rgba(255,255,255,.14);
 border-radius:14px;
 padding:12px;
}
.master-volume-control .master-volume-knob{
 transform:scale(1.12);
 margin-top:5px;
 margin-bottom:5px;
}

/* v11.6 layout */
.instrument{grid-template-columns:38% 62%}
.panel{
 grid-template-columns:repeat(4,minmax(0,1fr)) minmax(82px,.78fr);
 grid-template-rows:repeat(2,minmax(0,1fr));
}
.panel>.control:nth-child(1){grid-column:1;grid-row:1}
.panel>.control:nth-child(2){grid-column:2;grid-row:1}
.panel>.control:nth-child(3){grid-column:3;grid-row:1}
.panel>.control:nth-child(4){grid-column:4;grid-row:1}
.panel>.control:nth-child(5){grid-column:1;grid-row:2}
.panel>.control:nth-child(6){grid-column:2;grid-row:2}
.panel>.control:nth-child(7){grid-column:3;grid-row:2}
.panel>.control:nth-child(8){grid-column:4;grid-row:2}
.master-volume-control{
 grid-column:5!important;
 grid-row:1 / span 2!important;
 width:auto;
 margin:0;
 padding:12px 7px;
 border:1px solid rgba(255,255,255,.18);
 border-radius:11px;
 display:flex;
 align-items:center;
 justify-content:center;
}
.master-volume-control .master-volume-knob{
 transform:scale(1.18);
 margin:12px 0;
}

/* v11.7 logo */
.top h1,
#audioGateButton span{
 font-family:"Michroma",sans-serif;
 font-weight:400;
 font-style:normal;
 letter-spacing:.18em;
 text-transform:uppercase;
}


/* ---------- TESLA VIEW ---------- */
.tesla-view .midi-pill,
.tesla-view .routing-box,
.tesla-view .velocity-box,
.tesla-view .syncbar,
.tesla-view .lower,
.tesla-view .keyboard-wrap,
.tesla-view footer,
.tesla-view .learn{display:none!important}
.tesla-view .toolbar{grid-template-columns:minmax(300px,520px);justify-content:start}
.tesla-view .preset-box{width:100%}
.tesla-view .control{grid-template-rows:auto 1fr auto}
.tesla-view .tesla-root{
 display:grid;
 grid-template-columns:auto auto auto;
 grid-template-rows:auto auto;
 align-items:baseline;
 column-gap:10px;
 padding:8px 14px;
 border:1px solid rgba(255,255,255,.18);
 border-radius:10px;
 background:rgba(255,255,255,.035);
}
.tesla-view .tesla-root span{
 grid-column:1;
 grid-row:1 / span 2;
 align-self:center;
 font:700 10px ui-monospace,monospace;
 letter-spacing:.12em;
 color:rgba(255,255,255,.42);
}
.tesla-view .tesla-root strong{
 font:700 26px ui-monospace,monospace;
 line-height:1;
}
.tesla-view .tesla-root small{
 font:12px ui-monospace,monospace;
 color:rgba(255,255,255,.58);
}
.tesla-view .tesla-root em{
 grid-column:2 / span 2;
 font:10px ui-monospace,monospace;
 letter-spacing:.08em;
 color:rgba(255,255,255,.35);
 font-style:normal;
}
.tesla-view .instrument{min-height:0}
.tesla-view .panel{min-height:0}
@media (max-width:900px){
 .tesla-view .top{gap:8px}
 .tesla-view .top p{display:none}
 .tesla-view .toolbar{grid-template-columns:1fr}
}

/* v13.19 vocal + general refinements */
.mixer-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.mixer-title-row h2{margin:0}.unmute-all{font:inherit;font-size:11px;letter-spacing:.08em;padding:7px 10px;border:1px solid #3b414b;border-radius:7px;background:#11151b;color:#d9e0e8;cursor:pointer}.unmute-all:hover{border-color:#7e8a99}.mixer-effects{border-top:1px solid #303640;margin-top:14px;padding-top:14px;gap:12px}.mixer-effects>div{border:1px solid #2c333d;border-radius:10px;padding:12px;background:#0e1116}.mixer-effects h2{margin:0 0 10px;font-size:11px;letter-spacing:.12em;color:#9ba8b8}
.vocal-work{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(360px,1.25fr);gap:14px}.vocal-card{border:1px solid #303640;border-radius:12px;background:#0e1116;padding:16px}.vocal-card h2{margin:0 0 14px;font-size:12px;letter-spacing:.12em}.vocal-controls{display:grid;gap:12px}.vocal-controls label{display:grid;gap:6px;font-size:10px;letter-spacing:.1em;color:#9ba8b8}.vocal-controls select,.vocal-controls input[type=text]{background:#0a0d11;color:#e8edf2;border:1px solid #343b46;border-radius:7px;padding:9px}.vocal-buttons{display:flex;gap:8px;flex-wrap:wrap}.vocal-buttons button{background:#12171e;color:#edf1f5;border:1px solid #3a424e;border-radius:8px;padding:10px 13px;cursor:pointer}.vocal-buttons button.primary{background:#e7eaee;color:#0a0d11}.vocal-phrase{min-height:110px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(24px,4vw,52px);line-height:1.02;text-transform:uppercase;letter-spacing:.02em;padding:20px}.vocal-meta{display:flex;justify-content:space-between;gap:10px;color:#84909f;font-size:10px;letter-spacing:.08em;margin-top:10px}.vocal-status{min-height:18px;color:#aab5c2;font-size:11px}.vocal-ai-note{font-size:10px;color:#707b89;line-height:1.45}.vocal-quick{display:flex;gap:12px;align-items:end}.vocal-quick label{min-width:86px}.vocal-quick input[type=range]{width:100%}@media(max-width:800px){.vocal-work{grid-template-columns:1fr}}