:root{
  --bg:#070b0c; --bg2:#0c1416; --panel:#0d1719; --line:#15282b;
  --ink:#cfe9e3; --mut:#5d7d7a; --real:#39e6a0; --virt:#7c8cff;
  --micro:#ffd24a; --macro:#ff7a59; --wet:#37c6ff; --hot:#ff4d6d;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 600px at 70% -10%,#0e1f1d,var(--bg)) fixed;
  color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.45;
  display:flex;flex-direction:column;min-height:100vh;
}
h1,h2{margin:0;font-weight:600;letter-spacing:.06em}
h2{font-size:11px;color:var(--mut);text-transform:uppercase;margin-bottom:8px}
.muted{color:var(--mut);font-weight:400}
.hint{color:var(--mut);font-size:11px;margin:0 0 10px}
.mt{margin-top:18px}

header{display:flex;align-items:center;gap:22px;padding:12px 18px;
  border-bottom:1px solid var(--line);background:rgba(8,14,15,.85);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.logo{font-size:26px;color:var(--real);text-shadow:0 0 18px var(--real)}
h1{font-size:18px;letter-spacing:.18em}
.sub{margin:2px 0 0;color:var(--mut);font-size:11px;letter-spacing:.04em}
.transport,.out{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.out{gap:12px}
.out label{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:11px}
.masterv input{width:90px}

.btn{background:var(--bg2);color:var(--ink);border:1px solid var(--line);
  padding:7px 12px;border-radius:7px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.04em;transition:.12s}
.btn:hover{border-color:var(--real);color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#10463a,#0c2e28);border-color:#1c6e5b;color:#cffff0}
.btn.on{border-color:var(--wet);color:var(--wet);box-shadow:0 0 14px -4px var(--wet)}
.btn.rec{border-color:var(--hot);color:var(--hot)}
.pill{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:20px;padding:3px 10px}

main{display:grid;grid-template-columns:300px 1fr 320px;gap:14px;padding:14px;flex:1;align-items:start}
.panel{background:linear-gradient(180deg,var(--panel),#0a1213);border:1px solid var(--line);
  border-radius:12px;padding:14px}
.center{display:flex;flex-direction:column;align-items:center}
canvas{background:#060c0d;border:1px solid var(--line);border-radius:10px;touch-action:none;max-width:100%}
#stage{cursor:grab}

/* stems */
.stem{border:1px solid var(--line);border-radius:9px;padding:8px 9px;margin-bottom:8px;background:#0a1314}
.stem.real{border-left:3px solid var(--real)} .stem.virtual{border-left:3px solid var(--virt)}
.stem .row1{display:flex;align-items:center;gap:7px}
.stem .nm{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stem .src{font-size:9px;color:var(--mut);border:1px solid var(--line);border-radius:4px;padding:1px 4px}
.stem .meter{height:4px;background:#0c1c1d;border-radius:3px;margin:6px 0 5px;overflow:hidden}
.stem .meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--real),var(--wet));transition:width .08s}
.stem .ctl{display:flex;align-items:center;gap:6px}
.stem .ctl input[type=range]{flex:1}
.chip{font-size:9px;padding:1px 5px;border-radius:10px;border:1px solid var(--line);color:var(--mut)}
.chip.A{border-color:var(--real);color:var(--real)} .chip.B{border-color:var(--macro);color:var(--macro)}
.mini{font-size:10px;background:#0a1314;border:1px solid var(--line);color:var(--mut);border-radius:5px;padding:2px 6px;cursor:pointer}
.mini.on{color:var(--hot);border-color:var(--hot)}
.mini.solo.on{color:var(--micro);border-color:var(--micro)}

/* contrasts */
.contrast{border:1px solid var(--line);border-radius:9px;padding:10px;margin-bottom:10px;background:#0a1314}
.contrast .ttl{display:flex;justify-content:space-between;font-weight:600;font-size:12px;margin-bottom:4px}
.contrast .poles{display:flex;justify-content:space-between;font-size:10px;color:var(--mut);margin-bottom:6px}
.bar{height:8px;border-radius:5px;background:linear-gradient(90deg,#0c2622,#241016);position:relative;overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px #fff;left:50%}
.contrast .drv{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:10px;color:var(--mut)}
.contrast select{background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:5px;font-family:var(--mono);font-size:11px;padding:3px 5px}
.contrast .man{width:100%;margin-top:6px;display:none}

.sensorrow{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;width:100%;max-width:520px}
.readout{margin-left:auto;color:var(--mut);font-size:11px}
.readout b{color:var(--ink)}
label.rv,label.masterv{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--mut)}
label.rv input{flex:1}
.scbtns{display:flex;gap:8px}

footer{display:flex;justify-content:space-between;gap:14px;padding:9px 18px;border-top:1px solid var(--line);
  color:var(--ink);font-size:11px;background:rgba(8,14,15,.85)}
input[type=range]{-webkit-appearance:none;height:4px;background:#13262a;border-radius:3px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--real);cursor:pointer;box-shadow:0 0 8px -2px var(--real)}
@media(max-width:1100px){main{grid-template-columns:1fr}}