:root{
  --bg:#0a0c0b; --panel:#10140f; --panel2:#141a14;
  --ink:#d8ebe0; --dim:#62806e; --line:rgba(120,170,140,.13);
  --accent:#45f5a6; --accent2:#ffce5a; --danger:#ff7a6b; --violet:#b58bff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Mono",ui-monospace,monospace}
body{
  min-height:100vh;padding:22px 20px 40px;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(69,245,166,.06), transparent 60%),
    radial-gradient(900px 400px at 0% 110%, rgba(255,206,90,.05), transparent 55%),
    var(--bg);
}
.wrap{max-width:1240px;margin:0 auto}

header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
h1{font-family:"Syne",sans-serif;font-weight:800;letter-spacing:-.03em;font-size:clamp(30px,6vw,54px);line-height:.9;margin:0}
h1 .blip{color:var(--accent)}
h1 .twelve{color:var(--accent2)}
.tag{color:var(--dim);font-size:12px;max-width:360px;text-align:right;line-height:1.5}
.tag b{color:var(--accent);font-weight:500}

.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:13px;padding:10px;margin-bottom:14px}
button{font-family:inherit;cursor:pointer;color:var(--ink);border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);transition:.12s ease;padding:8px 13px;font-size:12px}
button:hover{border-color:rgba(120,170,140,.45)}
button.primary{color:var(--accent);border-color:rgba(69,245,166,.4)}
button.warn:hover{border-color:var(--danger);color:var(--danger)}
button.set{border-color:var(--accent2);color:var(--accent2)}
select{font-family:inherit;background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;font-size:12px;cursor:pointer}
.spacer{flex:1 1 auto}
.pill{font-size:11px;color:var(--dim);letter-spacing:.06em;padding:6px 10px;border:1px solid var(--line);border-radius:20px}
.pill b{color:var(--accent2);font-weight:500}
#patchName{color:var(--accent);font-weight:500}

/* segmented view switch */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg-btn{border:none;border-radius:0;padding:8px 13px;background:var(--panel2);color:var(--dim)}
.seg-btn[aria-pressed=true]{background:rgba(69,245,166,.16);color:var(--accent)}
.seg-btn+.seg-btn{border-left:1px solid var(--line)}

/* options dropdown */
.opts-wrap{position:relative;display:inline-flex}
.opts-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:var(--panel2);
  border:1px solid var(--accent);border-radius:11px;padding:12px 14px;box-shadow:0 12px 34px rgba(0,0,0,.55);
  width:280px}
.opts-title{font-family:"Syne",sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.opt-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink);cursor:pointer;line-height:1.4}
.opt-row input{width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto}

/* tab bar */
.tabbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.tab-btn{padding:9px 16px;font-size:12.5px}
.tab-btn.active{background:rgba(69,245,166,.16);border-color:var(--accent);color:var(--accent)}

/* a slider currently animated by modulation */
.ctl.modulating .val{color:var(--accent2)}

/* morph endpoint buttons */
#morphSetA.active,#morphSetB.active{background:rgba(181,139,255,.18);border-color:var(--violet);color:var(--violet)}
#morphSetA.set,#morphSetB.set{color:var(--violet)}

.scope-card{position:relative;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,#0c100c,#080a08);padding:12px;margin-bottom:14px;overflow:hidden}
.scope-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.5}
canvas#scope{display:block;width:100%;height:170px;border-radius:8px}

.strip{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:12px 14px}
.strip .field{display:flex;align-items:center;gap:8px}
.strip label{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.12em}
.morph-wrap{display:flex;align-items:center;gap:10px}
.morph-wrap .ends{font-family:"Syne";font-weight:700;color:var(--violet)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:12px}
.panel{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:14px}
.panel h2{font-family:"Syne",sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:0 0 12px}
.ctl{margin-bottom:12px}
.ctl:last-child{margin-bottom:0}
.ctl .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.ctl label{font-size:12px;color:var(--ink)}
.ctl .val{font-size:11.5px;color:var(--accent);font-weight:500}
.rowright{display:flex;align-items:center;gap:6px}
.reset{padding:0;width:18px;height:18px;line-height:1;font-size:11px;border-radius:5px;background:transparent;
  border:1px solid var(--line);color:var(--dim);opacity:.45;display:flex;align-items:center;justify-content:center}
.reset:hover{opacity:1;color:var(--accent);border-color:var(--accent)}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
  background:var(--line);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:3px solid #0a0c0b;box-shadow:0 0 8px rgba(69,245,166,.5);cursor:pointer}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);
  border:3px solid #0a0c0b;box-shadow:0 0 8px rgba(69,245,166,.5);cursor:pointer}
input[type=range]:disabled{opacity:.35;cursor:not-allowed}

.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.toggle span{font-size:12px}
.sw{position:relative;width:42px;height:23px;border-radius:20px;background:var(--line);
  border:1px solid var(--line);transition:.15s;flex:0 0 auto;padding:0}
.sw[aria-pressed=true]{background:rgba(69,245,166,.25);border-color:var(--accent)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--dim);transition:.15s}
.sw[aria-pressed=true]::after{background:var(--accent);transform:translateX(19px)}
.panel-body select{width:100%}

/* modulation matrix grid (rows = sources, each cell independently assignable) */
.mtx-card{margin-top:14px}
.mtx-hint{font-size:10.5px;color:var(--dim);line-height:1.4;margin-bottom:10px}
.mtx-scroll{overflow-x:auto}
.mtx-grid{display:grid;gap:4px;align-items:stretch;min-width:560px}
.mtx-corner{font-size:9.5px;color:var(--dim);display:flex;align-items:flex-end;letter-spacing:.03em}
.mtx-colhead{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;text-align:center;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px}
.mtx-rowhead{font-size:11px;color:var(--ink);display:flex;align-items:center;padding-right:6px}
.mtx-cell{position:relative;height:42px;padding:3px 4px;border:1px dashed var(--line);border-radius:7px;
  background:var(--panel2);overflow:hidden;display:flex;align-items:flex-start;justify-content:center;cursor:pointer}
.mtx-cell:hover{border-color:rgba(120,170,140,.5)}
.mtx-cell.assigned{border-style:solid;border-color:rgba(120,170,140,.3)}
.mtx-cell-d{position:relative;z-index:1;font-size:9.5px;line-height:1.1;text-align:center;color:var(--dim)}
.mtx-cell.assigned .mtx-cell-d{color:var(--ink)}
.mtx-bar{position:absolute;left:0;right:0;bottom:0;width:100%;height:0}
.mtx-cell.pos .mtx-bar{background:linear-gradient(0deg,rgba(69,245,166,.5),transparent)}
.mtx-cell.neg .mtx-bar{background:linear-gradient(0deg,rgba(255,206,90,.5),transparent)}
.mtx-cell.active.pos{border-color:rgba(69,245,166,.6)}
.mtx-cell.active.neg{border-color:rgba(255,206,90,.6)}

/* matrix popout */
.mtx-popout{position:absolute;z-index:50;background:var(--panel2);border:1px solid var(--accent);border-radius:10px;
  padding:10px;box-shadow:0 12px 34px rgba(0,0,0,.55)}
.mtx-pop-title{font-size:11px;color:var(--accent);margin-bottom:8px}
.mtx-pop-dest{width:100%;margin-bottom:9px}
.mtx-pop-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mtx-pop-amt{flex:1}
.mtx-pop-val{font-size:11px;color:var(--ink);min-width:44px;text-align:right}
.mtx-pop-clear{width:100%;font-size:11px}

/* piano */
.kbd-card{margin-top:14px;position:relative}
.kbd-scroll{overflow-x:auto;padding:8px 8px 4px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}
.piano{position:relative;height:150px;margin:0 auto}
.key{position:absolute;top:0;border-radius:0 0 5px 5px;cursor:pointer;user-select:none}
.key.white{position:relative;display:inline-block;width:34px;height:150px;background:linear-gradient(180deg,#e9f4ee,#bcd0c4);
  border:1px solid #0a0c0b;margin:0;vertical-align:top}
.key.black{width:22px;height:92px;background:linear-gradient(180deg,#1a221c,#050705);border:1px solid #000;z-index:3}
.key.white.active{background:linear-gradient(180deg,var(--accent),#2bbd7d)}
.key.black.active{background:linear-gradient(180deg,var(--accent2),#c9971f)}
.key-label{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:9px;color:#5b7065;pointer-events:none}

.hint{color:var(--dim);font-size:11.5px;margin-top:14px;line-height:1.7}
.hint kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--ink);font-size:11px}
.hint b{color:var(--accent2);font-weight:500}
.start-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,8,.72);border-radius:13px;font-size:13px;color:var(--accent);z-index:5;letter-spacing:.04em}
.hidden{display:none}
a{color:var(--accent)}