/* v0.7: every colour is a theme token (custom property). The values below are the Monochrome theme (the default),
   exactly the v0.6.2 colours; other themes (themes.css) override tokens only. Canvas drawing reads the --cv-* and
   --knob-* tokens through getComputedStyle (app.js: readTheme). */
:root { --bg:#000; --win:#0b0b0b; --panel:#111; --line:#2a2a2a; --line2:#3a3a3a; --dim:#6d6d6d; --mid:#9a9a9a; --fg:#e8e8e8; --hi:#fff;
  --on-bg:var(--fg); --on-fg:#000; --face-back:#0d0d0d; --foot:#444; --hdr-bg:#070707; --field-bg:#000; --logo:var(--hi); --logo-img:none;
  --led-off:#000; --led-on:var(--hi); --led-glow:#fff8; --thumb-bg:#080808; --well-bg:#060606; --gr-fill:var(--mid); --meter-fill:var(--fg);
  --canvas-bg:#070707; --hit-bg:#0a0a0a; --hit-border:var(--fg); --hit-flash:#d8d8d8; --hit-flash-fg:#000; --hit-label:var(--hi);
  --ph:#fff; --ph-edge:#000; --dim2:#555; --rear-a:#0d0d0d; --rear-b:#0f0f0f; --screw-line:#444; --screw-hi:#3a3a3a; --screw-lo:#111; --screw-slot:#000;
  --zone-bg:#0a0a0a; --lcd-bg:#000; --lcd-fg:var(--hi); --dip-lever:#e8e8e8; --dip-nc:#555; --jack-ring:#666; --jack-a:#000; --jack-b:#2a2a2a; --jack-c:#111;
  --link:#888; --link-line:#666; --scrim:rgba(0,0,0,.72); --cc-badge-bg:#000; --cc-badge-fg:#e8e8e8; --cc-badge-line:#6d6d6d; --mbox-bg:#0b0b0b; --mbox-fg:#bbb; --cr-line:#555; --cr-req:#ddd; --mbox-a:#ccc; --td-line:#1a1a1a; --td1:#ddd;
  --read-fg:#bbb; --padbar-bg:#050505; --pad-bg:#0b0b0b; --pad-sel-border:var(--hi); --pad-sel-bg:#1d1d1d; --pad-sel-fg:#fff; --pad-hit:#fff; --pad-flash:#3a3a3a;
  --armed-bg:#fff; --armed-fg:#000; --armed-blink:#9a9a9a; --vel-bg:#000; --master-border:var(--mid);
  /* canvas tokens (read by app.js) */
  --knob-track:#2c2c2c; --knob-arc:#f2f2f2; --knob-cap:#161616; --knob-cap-big:#1b1b1b; --knob-ptr:#fff;
  --cv-grid:#1c1c1c; --cv-text:#555; --cv-zero:#444; --cv-pt-fill:#000; --cv-pt-line:#bbb; --cv-combo:#888; --cv-adsr-mark:#fff; --cv-adsr-label:#666;
  --cv-env-fill:rgba(255,255,255,0.07); --cv-env-line:#fff; --cv-env-line-1:var(--cv-env-line); --cv-env-line-2:var(--cv-env-line); --cv-env-line-3:var(--cv-env-line); --cv-env-line-m:var(--cv-env-line);
  --cv-env-fill-1:var(--cv-env-fill); --cv-env-fill-2:var(--cv-env-fill); --cv-env-fill-3:var(--cv-env-fill); --cv-env-fill-m:var(--cv-env-fill);
  --cv-stage-1:#1d1d1d; --cv-stage-2:#151515; --cv-stage-3:#0e0e0e; --cv-stage-label:#777;
  --cv-mstage-1:#202020; --cv-mstage-2:#161616; --cv-mstage-3:#0d0d0d; --cv-mlabel:#8a8a8a; --cv-mlabel-halo:#0d0d0d; --cv-wave:#5a5a5a; --cv-hint:#444; --cv-mid:#333; --cv-master-line:#fff; --cv-axis:#666; --cv-note:#777;
  --cv-spec-1:#c8c8c8; --cv-spec-2:#8c8c8c; --cv-spec-3:#707070; --cv-spec-m:#ffffff; --cv-spec-hold:#2e2e2e; --cv-spec-legend:#999; --cv-spec-fill:rgba(255,255,255,0.12);
  --cv-spec-hold1:#6a6a6a; --cv-spec-live:#fff; --cv-spec-grad:none; --cv-spec-grad-fill:none;
  --cv-thumb-fill:rgba(255,255,255,0.08); --cv-thumb-text:#666; --cv-thumb-line-1:#ddd; --cv-thumb-line-2:#ddd; --cv-thumb-line-3:#ddd; --cv-thumb-fill-1:var(--cv-thumb-fill); --cv-thumb-fill-2:var(--cv-thumb-fill); --cv-thumb-fill-3:var(--cv-thumb-fill);
  --cv-vel-diag:#333; --cv-vel-line:#fff; --cv-vel-dot:#fff;
  --inert-opacity:.35; /* v0.8.1: controls that do nothing in the current setup */ }
* { 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; align-items:safe center; justify-content:safe center; user-select:none; }
.plugin, .foot { flex-shrink:0; } /* v0.6.2: unit never squashes; a window smaller than the unit scrolls instead of clipping its left/top edge */
.plugin { width:1000px; height:744px; 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:var(--face-back); }
.card.flipped .front, .card:not(.flipped) .back { pointer-events:none; }
.foot { color:var(--foot); 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:var(--hdr-bg); }
.brand { display:flex; align-items:baseline; gap:8px; flex:0 0 auto; }
.logo { font-weight:800; font-size:16px; letter-spacing:5px; color:var(--logo); }
.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:var(--field-bg); 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:var(--on-fg); }
.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:var(--led-off); display:inline-block; margin-right:6px; }
.led.on { background:var(--led-on); border-color:var(--led-on); box-shadow:0 0 6px var(--led-glow); }
.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:var(--thumb-bg); }
.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(--on-bg); color:var(--on-fg); border-color:var(--on-bg); }

.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(--on-bg); color:var(--on-fg); border-color:var(--on-bg); 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:var(--well-bg); }
.gr i { position:absolute; left:0; right:0; top:0; background:var(--gr-fill); 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(--on-bg); color:var(--on-fg); border-color:var(--on-bg); 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:var(--well-bg); }
.meter i { position:absolute; left:0; right:0; bottom:0; background:var(--meter-fill); height:0; background-size:100% var(--meter-h, 58px); background-position:0 100%; }

.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(--master-border); }
.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(--on-bg); color:var(--on-fg); border-color:var(--on-bg); 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:var(--canvas-bg); cursor:crosshair; touch-action:none; }
#envCanvas.adsr { cursor:default; }
#masterCanvas { border:1px solid var(--line); background:var(--canvas-bg); cursor:pointer; }
#specCanvas { border:1px solid var(--line); background:var(--canvas-bg); }
.bigknobs { display:flex; justify-content:space-around; padding-top:2px; }
.master .knobrow { justify-content:space-around; }
.hitpad { flex:1; border:2px solid var(--hit-border); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; background:var(--hit-bg); transition: background .25s ease-out; min-height:70px; }
.hitpad .hitlabel { font-size:30px; font-weight:800; letter-spacing:10px; color:var(--hit-label); padding-left:10px; }
.hitpad .hitsub { font-size:8.5px; color:var(--dim); letter-spacing:1px; margin-top:2px; }
.hitpad.flash { background:var(--hit-flash); transition:none; }
.hitpad.flash .hitlabel, .hitpad.flash .hitsub { color:var(--hit-flash-fg); }

/* v0.2 */
.phwrap { position:relative; display:inline-block; line-height:0; }
.ph { position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--ph); box-shadow:0 0 4px var(--ph), 0 0 0 0.5px var(--ph-edge); 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 var(--ph); }
.modesel { display:flex; gap:3px; }
.modesel .seg button { padding:2px 3px; font-size:8px; letter-spacing:0; } /* v0.16.2: 6 buttons (MTL) fit the name column */
.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:var(--dim2); font-size:9px; }
.rear { flex:1; position:relative; display:grid; grid-template-columns:250px minmax(0,1fr) 330px; grid-template-rows:minmax(0,1fr) auto; gap:10px; padding:16px 22px 18px; min-height:0;
  background:repeating-linear-gradient(90deg, var(--rear-a) 0 2px, var(--rear-b) 2px 4px); }
.screw { position:absolute; width:12px; height:12px; border-radius:50%; border:1px solid var(--screw-line); background:radial-gradient(circle at 40% 35%, var(--screw-hi), var(--screw-lo) 70%); }
.screw::after { content:""; position:absolute; left:2px; right:2px; top:5px; height:1px; background:var(--screw-slot); 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:var(--zone-bg); 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:var(--zone-bg); 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(--lcd-fg); background:var(--lcd-bg); 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:var(--dim2); }
.dip .slot { width:16px; height:34px; background:var(--lcd-bg); border:1px solid var(--line2); position:relative; }
.dip .slot i { position:absolute; left:2px; right:2px; height:14px; background:var(--dip-lever); top:17px; transition:top .12s; }
.dip.up .slot i { top:2px; }
.dip.nc { cursor:default; opacity:.45; } .dip.nc .slot i { background:var(--dip-nc); }
.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 var(--jack-ring); background:radial-gradient(circle, var(--jack-a) 35%, var(--jack-b) 40%, var(--jack-c) 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:var(--field-bg); color:var(--fg); border:1px solid var(--line2); height:20px; width:128px; padding:0 2px; letter-spacing:.3px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.smpsel:focus { outline:1px solid var(--mid); }
.foot a { color:var(--link); text-decoration:none; border-bottom:1px dotted var(--link-line); }
.foot a:hover { color:var(--fg); }
.modal { position:fixed; inset:0; background:var(--scrim); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal[hidden] { display:none; }
.mbox { width:760px; max-height:640px; overflow:auto; background:var(--mbox-bg); border:1px solid var(--line2); padding:14px 16px; font-size:10.5px; line-height:1.45; color:var(--mbox-fg); 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 var(--cr-line); }
.mbox .cr.req { border-left-color:var(--cr-req); color:var(--cr-req); }
.mbox a { color:var(--mbox-a); }
.mbox table { border-collapse:collapse; width:100%; table-layout:fixed; }
.mbox td { padding:2px 8px 2px 0; vertical-align:top; border-bottom:1px solid var(--td-line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mbox td:nth-child(1) { width:120px; color:var(--td1); } .mbox td:nth-child(2) { width:330px; } .mbox td:nth-child(3) { width:62px; }

/* v0.5.1 humanize window: ms or note value @ BPM */
.hzwin { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:150px; }
.hzwintop .seg button { min-width:40px; }
.hzwinms, .hzwinnote { display:flex; align-items:center; gap:6px; }
.hzwinnote .stepper .lcd { min-width:40px; }
.hznote { width:62px; }
.hzwinread { font-size:9.5px; color:var(--read-fg); letter-spacing:.4px; white-space:nowrap; }

/* v0.6 kit mode: pad strip */
.padbar { display:flex; flex-direction:column; gap:4px; padding:4px 10px 5px; border-bottom:1px solid var(--line); background:var(--padbar-bg); }
.padrow1 { display:flex; align-items:center; gap:10px; height:20px; }
.kitmsg { flex:1; min-width:0; color:var(--hi); font-size:9px; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kitblk { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.kitblk .kl { color:var(--dim); font-size:8.5px; letter-spacing:1.5px; }
.kitblk select { font:inherit; font-size:9.5px; background:var(--field-bg); color:var(--fg); border:1px solid var(--line2); height:20px; padding:0 4px; width:118px; }
.pads { display:grid; grid-template-columns:repeat(16, minmax(0,1fr)); gap:3px; height:32px; }
.pad { min-width:0; height:32px; border:1px solid var(--line2); background:var(--pad-bg); color:var(--mid); font:inherit; font-size:7.5px; letter-spacing:.3px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1px; cursor:pointer; padding:0; position:relative; overflow:hidden; }
.pad b { font-size:8px; color:var(--fg); max-width:56px; overflow:hidden; white-space:nowrap; text-overflow:clip; font-weight:600; }
.pad small { font-size:7px; color:var(--dim); }
.pad.sel { border-color:var(--pad-sel-border); background:var(--pad-sel-bg); }
.pad.sel b { color:var(--pad-sel-fg); }
.pad i { position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--pad-hit); opacity:0; transition:opacity .25s; }
.pad.hit i { opacity:1; transition:none; }
.pad.ring i { opacity:.35; }
.pad.flashbg { background:var(--pad-flash); transition:none; }
.pad .ck { position:absolute; top:1px; right:2px; font-size:6.5px; color:var(--dim); }
.padops { display:flex; gap:3px; flex:0 0 auto; }
.btn.learn.on, .btn.armed { background:var(--armed-bg); color:var(--armed-fg); animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { background:var(--armed-blink); } }
.midimon { font-variant-numeric:tabular-nums; }
.midiset.grid4 { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; }
.midiset.grid4 .stepper .lcd { width:56px; font-size:17px; }
.zvel { grid-column:1 / -1; grid-row:2; }
.velrow { display:flex; gap:8px; align-items:stretch; }
.velrow .zbox { flex:0 1 auto; padding:10px 8px 5px; }
.velin { flex-direction:column; align-items:flex-start !important; gap:4px !important; max-width:110px; }
.velin .hint { white-space:normal; font-size:8px; }
.velin, .velcomp, .velcurve { display:flex; gap:7px; align-items:center; }
.velcurve .seg button { padding:0 4px; }
.velbox2 { display:flex; gap:8px; align-items:center; }
.velread { color:var(--mid); font-size:8.5px; letter-spacing:.5px; margin-top:3px; white-space:pre; }
#velCanvas { border:1px solid var(--line2); background:var(--vel-bg); display:block; }

/* v0.6.2 back panel overflow fix: the VELOCITY row is a non-wrapping flex row whose boxes kept min-width:auto, so
   once TRANSFER's readout grew ("LAST v100 → 100 · -2.7 dB" after a hit) CURVE · RESPONSE was pushed past the zone
   and the back face. CURVE may now shrink, and its TONE/ATTACK pair wraps under the curve buttons instead of
   overflowing. With room to spare the row lays out exactly as before. */
.velin { width:min-content; } /* IN was always squeezed to ~its min-content (76.45 vs 75.8 px); pin it there so it never competes */
.velrow .zbox:last-child { min-width:0; } /* CURVE is the one box that gives up width when TRANSFER's readout grows */
.velcurve { flex-wrap:wrap; justify-content:center; row-gap:4px; }
.velknobs { display:flex; gap:7px; align-items:center; }
/* v0.8.1 VELOCITY · IN: Full Level master + per-slot switches + STRICT; .inert = does nothing in the current setup */
.flslots { display:flex; gap:2px; align-items:center; }
.flslots .fll { color:var(--dim); font-size:7.5px; letter-spacing:1px; margin-right:1px; }
.btn.mini { padding:2px 3px; font-size:8px; letter-spacing:.5px; line-height:1; }
.btn.mini.wide { width:100%; }
.inert { opacity:var(--inert-opacity); }

/* v0.7 theme selector (footer, outside the unit) */
.themesel { color:var(--foot); letter-spacing:1px; }
.themesel select { font:inherit; font-size:9px; background:var(--field-bg); color:var(--link); border:1px solid var(--line); height:14px; padding:0 1px; margin:-1px 0 -1px 3px; vertical-align:top; } /* negative margins: the footer keeps its 12 px line, so the unit does not move */
.themesel select:focus { outline:1px solid var(--mid); }

/* v0.8 CC LEARN */
/* positioned only while a badge can show: a positioned .knob changes how Chrome rasterizes nearby faded text, and Monochrome must stay pixel-identical */
.knob:hover, .ccmode .knob, .knob.ccarm, .knob.cchot { position:relative; }
.knob .ccb { position:absolute; top:-3px; right:-1px; display:none; padding:0 2px; font-size:7px; line-height:9px; letter-spacing:0; background:var(--cc-badge-bg); color:var(--cc-badge-fg); border:1px solid var(--cc-badge-line); pointer-events:none; z-index:2; }
.knob:hover .ccb, .ccmode .knob .ccb { display:block; }
.knob.cchot .ccb { display:block; }
.knob .ccb.hot { background:var(--cc-badge-fg); color:var(--cc-badge-bg); }
.ccmode .knob { cursor:crosshair; }
.ccmode .knob:hover { outline:1px dashed var(--cc-badge-line); outline-offset:1px; }
.knob.ccarm, .ccmode .knob.ccarm:hover { outline:1px solid var(--armed-bg); outline-offset:1px; animation:ccarm 1s steps(2) infinite; }
@keyframes ccarm { 50% { outline-color:var(--armed-blink); } }
.btn#ccLearnBtn.on { background:var(--on-bg); color:var(--on-fg); }
.btn#ccLearnBtn.armed { background:var(--armed-bg); color:var(--armed-fg); animation:blink 1s steps(2) infinite; }
.ccmenu { position:fixed; z-index:60; display:flex; flex-direction:column; gap:2px; padding:4px; background:var(--mbox-bg); border:1px solid var(--line2); min-width:180px; }
.ccmenu[hidden] { display:none; }
.ccmenu .btn { text-align:left; }
.ccmenu .cchead { font-size:8.5px; letter-spacing:1px; color:var(--dim); padding:1px 2px 3px; }
.cctable { border-collapse:collapse; width:100%; font-size:10px; }
.cctable td { padding:2px 6px; border-top:1px solid var(--line2); white-space:nowrap; }
.cctable td:nth-child(3) { color:var(--dim); }
.cctable td:last-child { text-align:right; }
.cctable .btn { margin-left:3px; }
#ccmapBody p { font-size:10px; color:var(--dim); margin:4px 0 8px; }
.mapblk select { width:128px; }
.ccemb { display:block; font-size:10px; color:var(--mbox-fg); margin:0 0 8px; }
.ccemb input { vertical-align:-2px; margin:0 4px 0 0; }

/* v0.9.2 clarity: SOUND label, ? help popover */
.presets .soundlbl { color:var(--dim); font-size:8.5px; letter-spacing:1.5px; white-space:nowrap; max-width:96px; overflow:hidden; text-overflow:ellipsis; }
.presets select { width:132px; }
.helpbtn { min-width:16px; padding:0 4px; }
.helppop { position:fixed; z-index:120; width:330px; background:var(--field-bg); color:var(--fg); border:1px solid var(--line2); padding:8px 10px; font-size:10px; line-height:1.4; box-shadow:0 4px 18px rgba(0,0,0,.25); }
.helppop .hp-h { display:flex; justify-content:space-between; align-items:center; letter-spacing:2px; font-weight:700; margin-bottom:4px; }
.helppop dl { margin:0; display:grid; grid-template-columns:52px 1fr; gap:4px 8px; }
.helppop dt { font-weight:700; letter-spacing:1px; } .helppop dd { margin:0; color:var(--dim); }
/* v0.9.2: room for "?", RESET and "MAP (knobs/CC)" in the kit row (layout unchanged otherwise) */
.padrow1 { gap:6px; }
.kitblk select { width:98px; }
.mapblk select { width:98px; }
.mapblk .kl { letter-spacing:.5px; white-space:nowrap; }
/* v0.9.4 HUMANIZE · ENGAGE: master + this pad + one mini switch per pad */
.hzengage { display:flex; flex-direction:column; gap:3px; align-items:stretch; max-width:150px; }
.hzpads { flex-wrap:wrap; max-width:150px; }
.hzpads .hzpad { min-width:15px; }
.hzpads .hzpad.selpad { outline:1px solid var(--hi); outline-offset:-1px; }
/* v0.10 PERF (performance mode): the card is hidden; only feedback while playing. Per-hit updates are a Web Animations
   opacity/transform run on the tile's flash layer and a meter transform, batched once per animation frame (app.js perf*). */
.plugin.perfon .card { visibility:hidden; }
.perf { position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; padding:12px; background:var(--win); border:1px solid var(--line2); }
.perf[hidden] { display:none; }
.perfhdr { display:flex; align-items:stretch; gap:14px; height:112px; flex:0 0 auto; }
.perfcover { width:112px; height:112px; flex:0 0 112px; border:1px solid var(--line2); background:var(--thumb-bg); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.perfcover img { width:100%; height:100%; object-fit:cover; display:block; }
.perfcover img[hidden] { display:none; }
.perfcover span { color:var(--dim); font-size:22px; letter-spacing:2px; }
.perfkit { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.perfrom { color:var(--dim); font-size:11px; letter-spacing:3px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.perfkitname { color:var(--hi); font-size:30px; letter-spacing:3px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.perfvel { width:300px; flex:0 0 300px; border:1px solid var(--line); background:var(--zone-bg); padding:8px 10px; display:flex; flex-direction:column; gap:7px; }
.perfvl { color:var(--dim); font-size:10px; letter-spacing:2px; }
.perfvl span { color:var(--fg); margin-left:6px; }
.perfbar { display:flex; align-items:center; gap:8px; }
.perfbar .pbl { width:28px; color:var(--mid); font-size:10px; letter-spacing:1px; }
.perfbar .pbv { width:30px; text-align:right; color:var(--fg); font-size:12px; }
.pbt { position:relative; flex:1 1 auto; height:14px; background:var(--well-bg); border:1px solid var(--line); overflow:hidden; }
.pbt i { position:absolute; inset:0; background:var(--meter-fill); transform-origin:left center; transform:scaleX(0); will-change:transform; }
.pbt b { position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--hi); transform:translateX(-4px); will-change:transform; }
.perfgr { color:var(--mid); font-size:11px; letter-spacing:1px; }
.perfright { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.perfbrand { color:var(--dim); letter-spacing:3px; font-size:10px; }
.perfpads { flex:1 1 auto; display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:1fr; gap:8px; min-height:0; }
.ptile { position:relative; border:1px solid var(--line2); background:var(--pad-bg); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:8px 10px; contain:strict; }
.ptile .pfl { position:absolute; inset:0; background:var(--hit-flash); opacity:0; will-change:opacity; pointer-events:none; }
.ptile .pvb { position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--hit-flash); transform-origin:left center; transform:scaleX(0); will-change:transform; }
.ptile .pnm { position:relative; color:var(--hi); font-size:15px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% + 6px); align-self:flex-start; background:var(--pad-bg); padding:1px 6px; margin-left:-6px; box-sizing:border-box; }
.ptile .pnt { position:relative; color:var(--dim); font-size:10px; letter-spacing:1px; margin-top:3px; align-self:flex-start; background:var(--pad-bg); padding:0 6px; margin-left:-6px; }
.ptile .pvv { position:absolute; top:7px; right:9px; color:var(--mid); font-size:11px; background:var(--pad-bg); padding:0 4px; }
.ptile.sel { border-color:var(--pad-sel-border); }
.perfrecent { flex:0 0 34px; display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding-top:6px; }
.perfrl { color:var(--dim); font-size:10px; letter-spacing:2px; flex:0 0 auto; }
.perfhits { flex:1 1 auto; display:flex; gap:4px; overflow:hidden; min-width:0; }
.phit { flex:0 0 auto; border:1px solid var(--line2); padding:3px 6px; color:var(--fg); font-size:10px; letter-spacing:1px; white-space:nowrap; background:var(--pad-bg); }
.phit:first-child { border-color:var(--hi); color:var(--hi); }
#perfBtn.on { background:var(--on-bg); color:var(--on-fg); }
/* v0.11 pages spike: 4 pages (PLAY · SOUND · MIDI · SETUP) under the header and the shared pad strip; a quiet 28 px tab
   bar at the bottom. Switching is a hidden-attribute toggle (no rebuild). The back panel's zones live on SOUND / MIDI / SETUP. */
#flipBtn { display:none; }
.pages { flex:1 1 auto; position:relative; min-height:0; }
.page { position:absolute; inset:0; display:flex; flex-direction:column; min-height:0; }
.page[hidden] { display:none; }
.pg-sound, .pg-midi, .pg-setup { display:grid; gap:8px; padding:8px 10px; }
.pg-sound { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
.pg-sound #zRouting { grid-column:1; grid-row:1; }
.pg-sound #zVel { grid-column:1; grid-row:2; min-height:0; }
.pg-sound #zLoop { grid-column:2; grid-row:1; }
.pg-sound #zSynth { grid-column:2; grid-row:2; }
.pg-sound .phgrid { grid-auto-rows:minmax(44px,auto); }
.looprows { display:flex; flex-direction:column; gap:4px; }
.looprow { display:grid; grid-template-columns:22px auto repeat(3, 54px) minmax(0,1fr); align-items:center; gap:6px; }
.looprow .lname { color:var(--hi); font-size:10px; letter-spacing:1.5px; }
.looprow .lnote { color:var(--dim); font-size:9px; }
.looprow.inert { opacity:.35; }
.relrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.relrow .relhint { color:var(--dim); font-size:9px; letter-spacing:.5px; flex:1 1 120px; line-height:1.4; }
.pg-midi { grid-template-columns:236px minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto auto minmax(0,1fr) auto; }
.pg-midi .midtools { grid-column:1 / -1; flex-direction:row; align-items:center; gap:14px; padding:6px 8px; }
.pg-midi #zVelocity { grid-column:1 / -1; grid-row:2; }
.pg-midi #zControl { grid-column:1; grid-row:3; }
.pg-midi .phzone:nth-last-child(2) { grid-column:1; grid-row:4; }
.pg-midi .phzone:last-child { grid-column:1; grid-row:5; }
.pg-midi #zHumanize { grid-column:2 / 4; grid-row:3 / 6; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto auto minmax(0,1fr); gap:8px; align-content:start; }
.pg-midi #zHumanize > .ztitle { grid-column:1 / -1; }
.pg-midi #zHumanize > .zbox:nth-of-type(2) { grid-column:1; grid-row:2; }
.pg-midi #zHumanize > .zbox:nth-of-type(3) { grid-column:1; grid-row:3 / 5; }
.pg-midi #zHumanize > .zbox:nth-of-type(4) { grid-column:2; grid-row:2 / 4; }
.pg-midi #zHumanize > .zbox:nth-of-type(5) { grid-column:2; grid-row:4; }
.pg-midi .phzone .phgrid { grid-template-columns:1fr 1fr; }
.pg-setup { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); }
.pg-setup .phzone { grid-column:1 / -1; }
.page .jacks { display:none; }
.mtrow, .unitrow { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.setkit .kitblk, .setmap .kitblk { flex-wrap:wrap; }
.setkit .kitblk select, .setmap .kitblk select { width:220px; }
.romline, .devlist { color:var(--mid); font-size:10px; letter-spacing:1px; line-height:1.6; }
.phzone { border-style:dashed; background:transparent; }
.phzone .ztitle { color:var(--dim); }
.phgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:6px; }
.pg-sound .phgrid { grid-template-columns:1fr 1fr; grid-auto-rows:minmax(70px,auto); }
.phslot { border:1px dashed var(--line); padding:6px 8px; display:flex; flex-direction:column; gap:3px; }
.phslot b { color:var(--mid); font-size:10px; letter-spacing:2px; font-weight:400; }
.phslot span { color:var(--dim); font-size:9px; letter-spacing:.5px; }
.pagebar { height:28px; flex:0 0 28px; display:flex; align-items:center; gap:10px; padding:0 10px; border-top:1px solid var(--line); background:var(--padbar-bg); }
.pgtabs { display:flex; gap:2px; height:100%; }
.pgtab { font:inherit; background:none; border:0; border-top:2px solid transparent; color:var(--dim); font-size:9.5px; letter-spacing:2.5px; padding:0 12px; cursor:pointer; height:100%; }
.pgtab:hover { color:var(--fg); }
.pgtab.on { color:var(--hi); border-top-color:var(--hi); }
.pgtab.armed { color:var(--hi); outline:1px dashed var(--hi); outline-offset:-4px; }
.pgtab .k { color:var(--dim); margin-right:5px; font-size:8.5px; letter-spacing:0; }
.pagebar .kitmsg { flex:1 1 auto; min-width:0; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bankbtn[hidden] { display:none; }
.pads { grid-template-columns:repeat(var(--bank, 16), minmax(0,1fr)); }
.pg-midi .phzone { gap:5px; padding:6px 8px; }
.pg-midi .phzone .ztitle .dim { display:block; margin:2px 0 0; }
.pg-midi .phslot { padding:3px 6px; }
.pg-midi .phslot span { display:none; }
.oscrows { display:flex; flex-direction:column; gap:3px; }
.oscrow { display:grid; grid-template-columns:22px auto repeat(3, 50px) minmax(0,1fr); align-items:center; gap:6px; }
.oscrow .lname { color:var(--hi); font-size:10px; letter-spacing:1.5px; }
.oscrow .lnote { color:var(--dim); font-size:9px; }
.oscrow.inert { opacity:.35; }
.synthrow { display:flex; gap:8px; }
.synthrow .zbox { flex:1 1 0; }
.synthrow .knobrow { display:flex; gap:8px; align-items:center; }

/* v0.13.0 velocity zones (SOUND, under ROUTING) */
.vzrows { display:flex; flex-direction:column; gap:4px; }
.vzrow { display:grid; grid-template-columns:22px minmax(0,1fr) 92px; align-items:center; gap:6px; }
.vzrow .lname { color:var(--hi); font-size:10px; letter-spacing:1.5px; }
.vzrow canvas { width:100%; height:46px; display:block; cursor:ew-resize; border:1px solid var(--line); }
.vzrow .lnote { color:var(--dim); font-size:9px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vzedit { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; font-size:10px; color:var(--dim); }
.vzedit b { color:var(--hi); letter-spacing:1.5px; font-weight:normal; }
.vzedit select { max-width:150px; }
.vzedit .num { color:var(--hi); min-width:22px; display:inline-block; text-align:right; }
.vzedit .vzin { margin-left:auto; color:var(--hi); }
/* v0.13.0 fix (Damon): REL NOTE − / + / LEARN row was wider than the display and LEARN clipped. −/+ share the
   display width, LEARN gets its own full-width row. */
.relrow .stepper .btns { flex-wrap:wrap; width:66px; justify-content:space-between; row-gap:2px; }
.relrow .stepper .btns button { width:32px; padding-left:0; padding-right:0; }
.relrow .stepper .btns button:last-child { width:66px; letter-spacing:1px; }
/* v0.11.x Cassette: a second flash layer for the hardest hits (only themes with --perf-hard:1 animate it) */
.ptile .pfh { position:absolute; inset:0; background:transparent; opacity:0; pointer-events:none; display:none; }
/* v0.11.x COLOUR (UI saturation) in SETUP · UNIT; images follow it with a static filter only while it is not 100 % */
.satsel { display:inline-flex; align-items:center; gap:5px; color:var(--dim); font-size:9px; letter-spacing:1px; margin:0 6px; }
.satsel input { width:120px; height:12px; margin:0; accent-color:var(--on-bg); cursor:pointer; }
.satsel output { width:30px; color:var(--fg); font-size:9px; letter-spacing:0; }
:root[data-sat] img { filter:saturate(var(--ui-sat)); }

/* v0.13.2: fired velocity zones on the pad tile ("Z2·Z3", 0.9 s) and under HIT */
.pad em.zd { position:absolute; right:3px; bottom:2px; font-style:normal; font-size:7.5px; letter-spacing:.5px; color:var(--hi); pointer-events:none; }
.pad.sel em.zd { color:var(--pad-sel-fg, var(--hi)); }
.hitsub[data-zone]:not([data-zone=""])::after { content:" · " attr(data-zone); color:var(--hi); }

/* v0.13.3: zone-aware SOURCE (zone meter + group button) */
.zsrcw { display:flex; align-items:center; gap:4px; }
.zgrp { font:inherit; font-size:9.5px; letter-spacing:.3px; height:20px; width:150px; padding:0 3px; background:var(--field-bg); color:var(--fg); border:1px solid var(--line2);
  display:flex; align-items:center; gap:3px; cursor:pointer; text-align:left; }
.zgrp .zgt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zgrp::after { content:"▾"; color:var(--mid); }
.zgrp .zgz { font-style:normal; font-size:8px; color:var(--dim); white-space:nowrap; }
.zgrp .zgz.on { color:var(--hi); font-weight:600; }
.zmtr { display:flex; gap:2px; height:18px; padding:1px; border:1px solid var(--line2); cursor:pointer; background:var(--field-bg); }
.zmtr i { width:8px; height:100%; background:var(--hi); opacity:.06; transition:opacity .7s ease-out; }
.zmtr i.use { opacity:.22; }
.zmtr i.lit { opacity:calc(.22 + .78 * var(--zg, 0)); }
.zmtr:hover { border-color:var(--mid); }
.zpop { position:absolute; z-index:60; background:var(--panel); border:1px solid var(--mid); padding:6px; display:flex; flex-direction:column; gap:4px; font-size:9px; color:var(--fg); box-shadow:0 4px 14px rgba(0,0,0,.35); }
.zpop > b { font-size:9px; letter-spacing:.8px; }
.zprow { display:flex; align-items:center; gap:6px; }
.zprow .zpz { color:var(--hi); width:16px; } .zprow .zpr { color:var(--mid); width:44px; }
.zpop .smpsel { width:150px; }

/* v0.14.0 round-robin takes (VEL ZONES editor line 2, B zone list) */
.vztakes { flex-basis:100%; display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:3px; font-size:9px; color:var(--mid); }
.vztakes > b { color:var(--fg); font-weight:600; letter-spacing:.6px; }
.vztakes .tkn { color:var(--dim); }
.vztakes .smpsel.tk { width:112px; }
.vztakes .rrseg { margin-left:auto; display:inline-flex; gap:2px; align-items:center; }
.zprow .zpt { color:var(--dim); font-size:8px; min-width:34px; } .zprow .zpt.on { color:var(--hi); }

/* v0.15.0 HI-HAT PEDAL MOD (MIDI page, where GESTURES was reserved) + readouts */
.pg-midi #zPedal { grid-column:1; grid-row:5; }
.pedbody { display:flex; flex-direction:column; gap:5px; font-size:9px; color:var(--dim); }
.pedrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pedrow.off { opacity:.45; }
.pedl { color:var(--dim); letter-spacing:.8px; margin-right:3px; }
.pednum .num { color:var(--hi); min-width:20px; display:inline-block; text-align:right; cursor:ns-resize; }
.pedsel .smpsel { width:96px; }
.pedsel.dim, .pednum.dim { opacity:.4; }
.pedlive { color:var(--mid); font-size:9px; letter-spacing:.4px; min-height:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pedlive.on { color:var(--hi); }
.hitped { font-size:8px; letter-spacing:.6px; color:var(--mid); margin-top:2px; min-height:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.perfped.on { color:var(--hi); }
.perfped { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; font-size:8px; }

/* v0.16.0 FM · SNAP · BURST rows */
.syntabs { margin-bottom:4px; display:inline-flex; }
.synlayer .oscrow { grid-template-columns:auto repeat(5, 46px) minmax(0,1fr); }
.syntabs button.thl:not(.on) { color:var(--hi); }
.synlayer .oscrow { gap:8px; }
.synrow .inert, .synlayer .oscrow.inert { opacity:.35; }
.synburst { display:flex; gap:8px; margin-left:auto; }
.synlayer .lnote { font-size:8px; color:var(--dim); min-height:10px; }

/* v0.16.1 ALL SOUNDS OFF */
.btn.panic { letter-spacing:1px; }
.pagebar .btn.panic { margin-left:10px; flex:none; }
.btn.panic.fired { background:var(--hi); color:var(--bg); }
.perfright .btn.panic { margin-right:8px; }

/* ---- v0.15.0-art.1 art spike (UI touch-ups; visual only) ---------------------------------------------------- */
/* 1. ROM card on PLAY: the loaded kit's ROM cover + names, left of HIT. Click: SETUP · KIT. */
.hitrow { flex:1; display:flex; gap:6px; min-height:0; }
.hitrow .hitpad { flex:1 1 auto; min-width:0; }
.romcard { flex:0 0 92px; width:92px; font:inherit; display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:0; margin:0;
  background:none; border:0; cursor:pointer; text-align:left; color:var(--fg); min-width:0; }
.romcard .rcwin { width:92px; height:92px; flex:0 0 92px; border:1px solid var(--line2); background:var(--thumb-bg); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
.romcard img { width:100%; height:100%; object-fit:cover; display:block; }
.romcard img[hidden] { display:none; }
.romcard .rcwin span { color:var(--dim); font-size:18px; letter-spacing:2px; }
.romcard .rcrom { font-size:7.5px; letter-spacing:1.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.romcard .rckit { font-size:8.5px; letter-spacing:.5px; color:var(--hi); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.romcard:hover .rcwin { border-color:var(--hi); }
.romcard:focus-visible { outline-offset:1px; }
.hitrow .hitpad .hitsub { text-align:center; padding:0 4px; line-height:1.35; }
/* 4. HIT flash: a velocity bar along the bottom edge (scaleX = velocity), on top of the existing flash */
.hitpad { position:relative; overflow:hidden; }
.hitpad .hitvel { position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--hit-flash); transform-origin:0 50%; transform:scaleX(0); opacity:0; transition:opacity .5s ease-out .1s; pointer-events:none; }
.hitpad.flash .hitvel { opacity:1; transition:none; background:var(--hit-flash-fg); }
/* 2. Pad strip: the choke badge moves to the bottom-left corner so it never sits on a long pad name */
.pad .ck { top:auto; bottom:2px; left:3px; right:auto; }
/* 3. Page tabs: the page number as a small keycap (the key that selects it) */
.pgtab .k { display:inline-block; min-width:11px; height:11px; line-height:11px; text-align:center; border:1px solid var(--line2); margin-right:6px; font-size:7.5px; vertical-align:1px; }
.pgtab.on .k { border-color:var(--hi); color:var(--hi); }
/* 5. Header status: short, the full line is in its tooltip */
#audioStatus { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* A. SOUND page: SIMPLE (default) vs ADVANCED (switch in the page bar, shown on SOUND). SIMPLE hides the engine zones. */
.pagebar .sndmode { display:flex; height:18px; margin-left:4px; }
.pagebar .sndmode[hidden] { display:none; }
.sndmode button { font:inherit; font-size:8.5px; letter-spacing:1.5px; padding:0 8px; background:none; border:1px solid var(--line2); color:var(--dim); cursor:pointer; margin-left:-1px; }
.sndmode button.on { background:var(--on-bg); color:var(--on-fg); border-color:var(--on-bg); font-weight:700; }
.pg-sound.simple > .zone:not(.zsimple) { display:none; }
.pg-sound:not(.simple) > .zsimple { display:none; }
.zsimple { grid-column:1 / -1; grid-row:1 / span 2; display:flex; flex-direction:column; gap:14px; }
.zsimple .spadrow { display:flex; align-items:flex-end; gap:18px; }
.zsimple .spadname { font-size:28px; font-weight:800; letter-spacing:6px; color:var(--hi); line-height:1; }
.zsimple .spadsub { font-size:9px; color:var(--dim); letter-spacing:1px; margin-top:6px; }
.zsimple .spick { display:flex; align-items:center; gap:6px; margin-left:auto; }
.zsimple .spick .kl { color:var(--dim); font-size:8.5px; letter-spacing:1.5px; }
.zsimple .spick select { font:inherit; font-size:10px; background:var(--field-bg); color:var(--fg); border:1px solid var(--line2); height:24px; padding:0 4px; width:260px; }
.zsimple .sknobs { display:flex; gap:64px; justify-content:center; padding:22px 0 12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.zsimple .sknobs .knob .kl { font-size:10px; letter-spacing:3px; }
.zsimple .sknobs .knob .kv { font-size:10px; }
.zsimple .slayers { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.zsimple .slayer { border:1px solid var(--line); padding:6px 8px; font-size:9px; color:var(--dim); letter-spacing:1px; display:flex; gap:8px; align-items:baseline; min-width:0; }
.zsimple .slayer b { color:var(--fg); letter-spacing:2px; font-size:10px; }
.zsimple .slayer span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.zsimple .slayer.off { opacity:.45; }
.zsimple .shint { color:var(--dim); font-size:9px; letter-spacing:.5px; }
.zsimple .gloss2 b { color:var(--mid); font-weight:600; }
.zsimple .ztitle.sub { margin-top:4px; }
.zsimple .skit { display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:6px; }
.zsimple .skp { font:inherit; min-width:0; height:46px; border:1px solid var(--line2); background:var(--pad-bg); color:var(--dim); cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:3px; padding:0 8px; text-align:left; }
.zsimple .skp b { font-size:9.5px; color:var(--fg); letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.zsimple .skp span { font-size:8px; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.zsimple .skp.sel { border-color:var(--pad-sel-border); background:var(--pad-sel-bg); }
.zsimple .skp.sel b { color:var(--pad-sel-fg); }