/* Strictly monochrome: black, white, grays. */
:root { --bg:#000; --win:#0b0b0b; --panel:#111; --line:#2a2a2a; --line2:#3a3a3a; --dim:#6d6d6d; --mid:#9a9a9a; --fg:#e8e8e8; --hi:#fff; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font: 11px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace; }
body { display:flex; flex-direction:column; align-items:center; justify-content:center; user-select:none; }
.plugin { width:1000px; height:680px; perspective:2600px; position:relative; }
/* v0.4: two-faced unit; FLIP rotates the card */
.card { position:absolute; inset:0; transition:transform .75s cubic-bezier(.55,.05,.3,1); transform-style:preserve-3d; }
.card.flipped { transform:rotateY(180deg); }
.face { position:absolute; inset:0; background:var(--win); border:1px solid var(--line2); display:flex; flex-direction:column; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.face.back { transform:rotateY(180deg); background:#0d0d0d; }
.card.flipped .front, .card:not(.flipped) .back { pointer-events:none; }
.foot { color:#444; margin-top:10px; font-size:10px; }
button { font:inherit; }
:focus-visible { outline:1px solid var(--hi); outline-offset:1px; }

.hdr { height:38px; display:flex; align-items:center; padding:0 14px; border-bottom:1px solid var(--line); gap:16px; background:#070707; }
.brand { display:flex; align-items:baseline; gap:8px; flex:0 0 auto; }
.logo { font-weight:800; font-size:16px; letter-spacing:5px; color:var(--hi); }
.ver { color:var(--dim); font-size:9px; letter-spacing:1px; }
.status { color:var(--mid); flex:1; min-width:0; text-align:center; letter-spacing:.5px; font-size:9.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status.right { text-align:right; flex:0 1 auto; }
.presets { display:flex; align-items:center; gap:4px; flex:0 0 auto; position:relative; }
.presets select, .presets input[type=text] { font:inherit; font-size:9.5px; background:#000; color:var(--fg); border:1px solid var(--line2); height:20px; padding:0 4px; letter-spacing:.5px; }
.presets select { width:150px; }
.presets input[type=text] { width:104px; }
.presets select:focus, .presets input:focus { outline:1px solid var(--mid); }
.pmsg { position:absolute; left:0; top:22px; font-size:8.5px; color:var(--dim); white-space:nowrap; pointer-events:none; }
.midiblk { display:flex; align-items:center; gap:6px; flex:0 1 auto; min-width:0; }
.chip.gate { width:auto; padding:2px 4px; font-size:7.5px; color:var(--dim); border-color:var(--line); }
.chip.gate.on { color:#000; }
.status.on { color:var(--hi); }

.tracks { padding:4px 10px 6px; border-bottom:1px solid var(--line); }
.colhdr, .row { display:grid; grid-template-columns: 146px 262px 150px 132px 146px 1fr; gap:8px; align-items:center; }
.colhdr { color:var(--dim); font-size:9px; letter-spacing:1.5px; height:16px; }
.row { height:78px; border:1px solid var(--line); background:var(--panel); margin-top:5px; padding:0 8px; }
.row .name { display:flex; flex-direction:column; gap:4px; }
.row .name b { color:var(--hi); font-size:13px; letter-spacing:2px; }
.row .name small { color:var(--dim); font-size:9px; letter-spacing:1px; }
.led { width:8px; height:8px; border:1px solid var(--line2); background:#000; display:inline-block; margin-right:6px; }
.led.on { background:var(--hi); border-color:var(--hi); box-shadow:0 0 6px #fff8; }
.src, .knobrow, .compblk, .fxblk, .volblk { display:flex; align-items:center; gap:6px; }
.envblk { display:flex; flex-direction:column; gap:3px; }
.envthumb { display:flex; align-items:center; gap:4px; cursor:pointer; }
.envthumb canvas { border:1px solid var(--line); background:#080808; }
.envthumb.sel canvas { border-color:var(--mid); }
.chip { font-size:8px; letter-spacing:1px; border:1px solid var(--line2); color:var(--mid); padding:2px 3px; width:38px; text-align:center; background:none; cursor:pointer; }
.chip.on { background:var(--fg); color:#000; border-color:var(--fg); }

.knob { display:flex; flex-direction:column; align-items:center; width:46px; cursor:ns-resize; touch-action:none; }
.knob canvas { display:block; }
.knob .kl { color:var(--dim); font-size:8.5px; letter-spacing:1px; margin-top:1px; text-transform:uppercase; }
.knob .kv { color:var(--fg); font-size:9px; margin-top:1px; white-space:nowrap; }
.knob.big { width:96px; }
.knob.big .kl { font-size:11px; color:var(--fg); letter-spacing:3px; font-weight:700; }
.knob.big .kv { font-size:11px; }
.knob.dis { opacity:.35; }

.btn { background:none; border:1px solid var(--line2); color:var(--mid); padding:4px 6px; cursor:pointer; letter-spacing:1px; font-size:9px; }
.btn.small { padding:2px 6px; font-size:8.5px; }
.btn.on { background:var(--fg); color:#000; border-color:var(--fg); font-weight:700; }
.compbtn { width:62px; }
.compbtn.byp { color:var(--dim); border-style:dashed; text-decoration:line-through; }
.gr { width:6px; height:52px; border:1px solid var(--line); position:relative; background:#060606; }
.gr i { position:absolute; left:0; right:0; top:0; background:var(--mid); height:0; }
.seg { display:flex; }
.seg button { background:none; border:1px solid var(--line2); color:var(--dim); font-size:8.5px; padding:3px 5px; cursor:pointer; letter-spacing:1px; margin-left:-1px; }
.seg button.on { background:var(--fg); color:#000; border-color:var(--fg); position:relative; }
.fxblk { flex-direction:row; }
.fxblk .seg { flex-direction:column; }
.fxblk .seg button { margin:0 0 -1px 0; width:42px; }
.meter { width:8px; height:60px; border:1px solid var(--line); position:relative; background:#060606; }
.meter i { position:absolute; left:0; right:0; bottom:0; background:var(--fg); height:0; }

.lower { flex:1; display:grid; grid-template-columns: 352px 338px 1fr; gap:8px; padding:8px 10px 10px; min-height:0; }
.panel { border:1px solid var(--line); background:var(--panel); padding:8px; display:flex; flex-direction:column; gap:6px; min-height:0; }
.ptitle { color:var(--hi); font-weight:700; letter-spacing:2.5px; font-size:10.5px; }
.ptitle .dim { color:var(--dim); font-weight:400; letter-spacing:1px; font-size:9px; margin-left:6px; }
.master { border-color:var(--mid); }
.master .ptitle { font-size:12px; letter-spacing:4px; }
.tabs { display:flex; }
.tabs button { flex:1; background:none; border:1px solid var(--line2); color:var(--dim); font-size:9px; padding:3px 0; cursor:pointer; letter-spacing:1px; margin-left:-1px; }
.tabs button.on { background:var(--fg); color:#000; border-color:var(--fg); font-weight:700; }
.envtools { display:flex; align-items:center; gap:8px; }
.hint { color:var(--dim); font-size:9px; }
#envCanvas { border:1px solid var(--line); background:#070707; cursor:crosshair; touch-action:none; }
#envCanvas.adsr { cursor:default; }
#masterCanvas { border:1px solid var(--line); background:#070707; cursor:pointer; }
#specCanvas { border:1px solid var(--line); background:#070707; }
.bigknobs { display:flex; justify-content:space-around; padding-top:2px; }
.master .knobrow { justify-content:space-around; }
.hitpad { flex:1; border:2px solid var(--fg); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; background:#0a0a0a; transition: background .25s ease-out; min-height:70px; }
.hitpad .hitlabel { font-size:30px; font-weight:800; letter-spacing:10px; color:var(--hi); padding-left:10px; }
.hitpad .hitsub { font-size:8.5px; color:var(--dim); letter-spacing:1px; margin-top:2px; }
.hitpad.flash { background:#d8d8d8; transition:none; }
.hitpad.flash .hitlabel, .hitpad.flash .hitsub { color:#000; }

/* v0.2 */
.phwrap { position:relative; display:inline-block; line-height:0; }
.ph { position:absolute; left:0; top:0; bottom:0; width:1px; background:#fff; box-shadow:0 0 4px #fff, 0 0 0 0.5px #000; display:none; pointer-events:none; will-change:transform; }
.ph::before { content:""; position:absolute; top:0; left:-3px; border:3.5px solid transparent; border-top:5px solid #fff; }
.modesel { display:flex; gap:4px; }
.modesel .seg button { padding:2px 4px; font-size:8px; }
.seg.off button { opacity:.3; pointer-events:none; }
.srcgrp { display:flex; align-items:center; gap:6px; }
.segk { display:flex; flex-direction:column; align-items:center; gap:2px; }
.segk .seg { flex-direction:column; }
.segk .seg button { margin:0 0 -1px 0; width:34px; padding:2px 0; font-size:8px; }
.segk .kl { color:var(--dim); font-size:8.5px; letter-spacing:1px; margin-top:2px; text-transform:uppercase; }
.row .name small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:146px; }

/* v0.4 back panel */
.flipbtn { letter-spacing:1.5px; }
.dim2 { color:#555; font-size:9px; }
.rear { flex:1; position:relative; display:grid; grid-template-columns:250px minmax(0,1fr) 330px; gap:10px; padding:16px 22px 18px; min-height:0;
  background:repeating-linear-gradient(90deg, #0d0d0d 0 2px, #0f0f0f 2px 4px); }
.screw { position:absolute; width:12px; height:12px; border-radius:50%; border:1px solid #444; background:radial-gradient(circle at 40% 35%, #3a3a3a, #111 70%); }
.screw::after { content:""; position:absolute; left:2px; right:2px; top:5px; height:1px; background:#000; transform:rotate(35deg); }
.screw.tl { left:5px; top:5px; } .screw.tr { right:5px; top:5px; } .screw.bl { left:5px; bottom:5px; } .screw.br { right:5px; bottom:5px; }
.zone { border:1px solid var(--line2); background:#0a0a0a; padding:8px; display:flex; flex-direction:column; gap:8px; min-height:0; }
.ztitle { color:var(--hi); font-weight:700; letter-spacing:3px; font-size:10.5px; }
.ztitle .dim { color:var(--dim); font-weight:400; letter-spacing:1px; font-size:8.5px; margin-left:6px; }
.zbox { border:1px solid var(--line); padding:8px 8px 6px; position:relative; }
.zlabel { position:absolute; top:-6px; left:8px; background:#0a0a0a; padding:0 4px; color:var(--mid); font-size:8px; letter-spacing:2px; }
.midiset { display:flex; gap:14px; justify-content:center; }
.stepper { display:flex; flex-direction:column; align-items:center; gap:3px; }
.stepper .lcd { font-size:20px; font-weight:700; color:var(--hi); background:#000; border:1px solid var(--line2); width:64px; text-align:center; padding:3px 0; letter-spacing:2px; }
.stepper .sub { color:var(--dim); font-size:8px; letter-spacing:1px; height:9px; }
.stepper .btns { display:flex; gap:2px; } .stepper .btns button { width:30px; }
.stepper .kl { color:var(--dim); font-size:8.5px; letter-spacing:1.5px; }
.dipbank { display:flex; gap:10px; justify-content:center; padding:4px 0; }
.dip { display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; width:52px; }
.dip .num { color:var(--mid); font-size:8px; }
.dip .lbl { color:var(--fg); font-size:7.5px; letter-spacing:1px; text-align:center; line-height:1.15; height:18px; }
.dip .lbl.dim { color:#555; }
.dip .slot { width:16px; height:34px; background:#000; border:1px solid var(--line2); position:relative; }
.dip .slot i { position:absolute; left:2px; right:2px; height:14px; background:#e8e8e8; top:17px; transition:top .12s; }
.dip.up .slot i { top:2px; }
.dip.nc { cursor:default; opacity:.45; } .dip.nc .slot i { background:#555; }
.jacks { display:flex; gap:18px; align-items:center; }
.jack { display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--dim); font-size:8px; letter-spacing:1px; }
.jack i { width:22px; height:22px; border-radius:50%; border:2px solid #666; background:radial-gradient(circle, #000 35%, #2a2a2a 40%, #111 70%); }
.jack.off { opacity:.4; }
.buscomp { display:flex; align-items:center; gap:2px; } .buscomp .compbtn { width:54px; }
.buscomp .gr { height:56px; }
.sends { display:flex; flex-direction:column; gap:6px; }
.sendrow { display:grid; grid-template-columns:96px 52px 1fr; align-items:center; gap:6px; }
.sendrow .sname { color:var(--hi); font-size:10px; letter-spacing:1.5px; }
.sendrow .sname small { display:block; color:var(--dim); font-size:8px; letter-spacing:1px; }
.sendrow .linkk { display:flex; flex-direction:column; gap:2px; } .sendrow .linkk .kl { color:var(--dim); font-size:8px; letter-spacing:1px; }
.hzmode { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hzdepth { flex-wrap:wrap; justify-content:space-around; row-gap:6px; }
.hzlast { font-size:9.5px; color:var(--fg); line-height:1.5; white-space:pre; min-height:44px; }

/* v0.5 sample picker + credits */
.smpsel { font:inherit; font-size:9.5px; background:#000; color:var(--fg); border:1px solid var(--line2); height:20px; width:128px; padding:0 2px; letter-spacing:.3px; }
.smpsel:focus { outline:1px solid var(--mid); }
.foot a { color:#888; text-decoration:none; border-bottom:1px dotted #666; }
.foot a:hover { color:var(--fg); }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal[hidden] { display:none; }
.mbox { width:760px; max-height:640px; overflow:auto; background:#0b0b0b; border:1px solid var(--line2); padding:14px 16px; font-size:10.5px; line-height:1.45; color:#bbb; user-select:text; }
.mhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:var(--fg); letter-spacing:1px; }
.mbox h4 { margin:12px 0 4px; font-size:10px; letter-spacing:1px; color:var(--fg); font-weight:600; }
.mbox .cr { margin:0 0 7px; padding-left:8px; border-left:2px solid #555; }
.mbox .cr.req { border-left-color:#ddd; color:#ddd; }
.mbox a { color:#ccc; }
.mbox table { border-collapse:collapse; width:100%; table-layout:fixed; }
.mbox td { padding:2px 8px 2px 0; vertical-align:top; border-bottom:1px solid #1a1a1a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mbox td:nth-child(1) { width:120px; color:#ddd; } .mbox td:nth-child(2) { width:330px; } .mbox td:nth-child(3) { width:62px; }