/* ============================================================
   HEEL·X PRO — a studio interface.
   Deliberately single-theme: a mixing surface is a dark room.
   ============================================================ */
:root{
  color-scheme: dark;

  /* neutrals, biased cool toward the selection blue */
  --well:      #0b0e13;
  --bg:        #101318;
  --panel:     #171b22;
  --panel-2:   #1d222a;
  --chrome:    #23282f;
  --chrome-hi: #2e343d;
  --line:      #333a45;
  --line-soft: #232830;

  --text:   #dfe4ec;
  --text-2: #99a2b1;
  --text-3: #666e7c;

  --accent:     #4f9bf0;
  --accent-dim: #2a5589;
  --lcd:        #7fe0ff;
  --lcd-dim:    #24596e;

  --rec:  #f0524a;
  --solo: #f2c14e;
  --mute: #5fa8e8;
  --good: #57c98a;

  --row: 34px;
  --head-w: 238px;
  --ruler-h: 26px;

  --ui: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
html,body{height:100%; overflow:hidden; max-width:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--ui); font-size:12px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-radius:3px}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.hidden{display:none !important}

#app{
  height:100vh; height:100dvh;
  display:grid; grid-template-rows:auto 1fr auto;
  min-width:0;
}

/* ---------------- Boot ---------------- */
#boot{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center;
  background:
    radial-gradient(900px 520px at 50% 32%, #1b2431 0%, #0c0f14 62%, #080a0e 100%);
}
.boot-card{
  width:min(460px, calc(100vw - 40px));
  padding:34px 34px 28px;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(#1b2029, #14181e);
  box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  text-align:center;
}
.boot-logo{
  font-size:30px; font-weight:700; letter-spacing:.30em;
  padding-left:.30em;
  background:linear-gradient(#f2f6ff, #93a4bd);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.boot-logo span{
  display:block; margin-top:8px;
  font-size:9px; font-weight:600; letter-spacing:.52em; padding-left:.52em;
  color:var(--text-3); -webkit-text-fill-color:var(--text-3);
}
.boot-meta{
  margin:26px 0 24px; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft); border-radius:6px; overflow:hidden;
}
.boot-meta div{background:var(--panel); padding:10px 12px; text-align:left}
.boot-meta span{display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}
.boot-meta b{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--text)}
#bootBtn{
  width:100%; padding:12px; border-radius:6px;
  background:linear-gradient(#4f9bf0,#2f74c4);
  color:#fff; font-weight:600; font-size:13px; letter-spacing:.02em;
  box-shadow:0 2px 10px rgba(50,120,210,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
#bootBtn:hover{filter:brightness(1.08)}
#bootBtn:active{transform:translateY(1px)}
.boot-note{margin:14px 0 0; font-size:10.5px; color:var(--text-3); line-height:1.6}
.boot-note kbd{
  font-family:var(--mono); font-size:10px; padding:1px 5px; border-radius:3px;
  background:var(--well); border:1px solid var(--line); color:var(--text-2);
}

/* ---------------- Control bar ---------------- */
.ctrlbar{
  display:flex; align-items:center; gap:14px; padding:0 12px; height:56px;
  background:linear-gradient(#31373f, #23272e 52%, #1c2027);
  border-bottom:1px solid #0a0c0f;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 2px 8px rgba(0,0,0,.4);
  min-width:0; overflow:hidden;
}
.brand{display:flex; align-items:baseline; gap:7px; padding-right:6px; flex:0 0 auto}
.tgroup, .lcd, .masterzone{flex:0 0 auto}
.lcd{min-width:0; overflow:hidden}
.brand b{font-size:13px; font-weight:700; letter-spacing:.19em}
.brand i{font-style:normal; font-size:8.5px; letter-spacing:.2em; color:var(--text-3)}

/* project selector — the template registry, reachable from the control bar */
.songbtn{
  display:flex; align-items:center; gap:8px; padding:5px 9px; border-radius:5px; flex:0 0 auto;
  background:linear-gradient(#3b424c,#282d35); box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 1px 2px rgba(0,0,0,.5);
  max-width:190px;
}
.songbtn:hover{filter:brightness(1.12)}
.songbtn .st{min-width:0; text-align:left}
.songbtn b{display:block; font-size:11.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.songbtn i{display:block; font-style:normal; font-size:8.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.songbtn svg{width:9px;height:9px;fill:var(--text-3);flex:0 0 9px}
.songmenu{
  position:fixed; z-index:8000; width:326px; max-height:70vh; overflow:auto;
  border-radius:8px; padding:6px; background:linear-gradient(#232830,#191d24);
  border:1px solid #0a0d11; box-shadow:0 24px 60px rgba(0,0,0,.7);
}
.songmenu button{
  display:flex; align-items:center; gap:10px; width:100%; padding:7px 9px; border-radius:5px; text-align:left;
}
.songmenu button:hover{background:#2b323c}
.songmenu button.on{background:#22364d; box-shadow:inset 0 0 0 1px #2f5a86}
.songmenu .sw{width:4px; align-self:stretch; border-radius:2px; flex:0 0 4px}
.songmenu .sm-t{flex:1; min-width:0}
.songmenu .sm-t b{display:block; font-size:11.5px; font-weight:600}
.songmenu .sm-t span{display:block; font-size:10px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.songmenu .sm-n{font-family:var(--mono); font-size:9.5px; color:var(--text-3); text-align:right; flex:0 0 auto; font-variant-numeric:tabular-nums}

/* boot: pick a template before you start */
.boot-pick{
  margin:22px 0 18px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.boot-pick button{
  padding:8px 7px; border-radius:6px; text-align:left; background:#12161c;
  box-shadow:inset 0 0 0 1px #242a33; transition:background .14s, box-shadow .14s;
}
.boot-pick button:hover{background:#191f27}
.boot-pick button.on{background:#1c2b3d; box-shadow:inset 0 0 0 1px var(--accent)}
.boot-pick .bp-n{display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; letter-spacing:-.005em}
.boot-pick .bp-d{width:5px;height:5px;border-radius:50%;flex:0 0 5px}
.boot-pick .bp-g{font-size:8.5px; color:var(--text-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.boot-pick .bp-m{font-family:var(--mono); font-size:8.5px; color:var(--lcd-dim); margin-top:1px}

.tgroup{display:flex; align-items:center; gap:3px}
.tbtn{
  width:32px; height:28px; border-radius:4px; display:grid; place-items:center;
  background:linear-gradient(#3b424c,#282d35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 1px 2px rgba(0,0,0,.5);
  color:var(--text-2); transition:color .12s, background .12s;
}
.tbtn:hover{color:var(--text)}
.tbtn svg{width:14px;height:14px;fill:currentColor}
.tbtn.on{color:#fff; background:linear-gradient(#4f9bf0,#2f74c4); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 12px rgba(79,155,240,.35)}
.tbtn.play.on{background:linear-gradient(#57c98a,#2f9a63); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 12px rgba(87,201,138,.35)}
.tbtn.rec.on{background:linear-gradient(#f0524a,#b8322c); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 12px rgba(240,82,74,.4)}

.lcd{
  display:flex; align-items:stretch; gap:0; height:38px;
  border-radius:5px; overflow:hidden;
  background:linear-gradient(#0a0e12,#070a0d);
  border:1px solid #05070a;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06);
}
.lcd .cell{
  display:flex; flex-direction:column; justify-content:center; padding:0 12px;
  border-right:1px solid rgba(127,224,255,.09);
}
.lcd .cell:last-child{border-right:0}
.lcd .cell u{
  text-decoration:none; font-size:7.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lcd-dim); margin-bottom:1px;
}
.lcd .cell b{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:500; color:var(--lcd);
  text-shadow:0 0 8px rgba(127,224,255,.45);
}
.lcd .cell.wide b{font-size:15px; letter-spacing:.06em}

.spacer{flex:1}

.masterzone{display:flex; align-items:center; gap:10px}
#masterMeter{width:86px; height:22px; border-radius:3px; background:var(--well); box-shadow:inset 0 0 0 1px #05070a}
.vol{display:flex; align-items:center; gap:7px}
.vol svg{width:14px;height:14px;fill:var(--text-3)}
input[type=range].slim{
  -webkit-appearance:none; appearance:none; width:82px; height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent) var(--f,70%), #2b313a var(--f,70%));
  cursor:pointer;
}
input[type=range].slim::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
  background:linear-gradient(#e8edf5,#a9b3c2); box-shadow:0 1px 3px rgba(0,0,0,.7);
}
input[type=range].slim::-moz-range-thumb{
  width:12px;height:12px;border:0;border-radius:50%;background:#dfe4ec;box-shadow:0 1px 3px rgba(0,0,0,.7)
}
.seg{display:flex; border-radius:4px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.5)}
.seg button{
  padding:6px 10px; font-size:10.5px; font-weight:600; letter-spacing:.04em;
  background:linear-gradient(#3b424c,#282d35); color:var(--text-2);
  border-right:1px solid #14171c;
}
.seg button:last-child{border-right:0}
.seg button.on{background:linear-gradient(#4f9bf0,#2f74c4); color:#fff}

/* ---------------- Arrange ---------------- */
.arrange{display:flex; min-height:0; background:var(--well); overflow:hidden}
.tracklist{
  width:var(--head-w); flex:0 0 var(--head-w);
  background:var(--panel); border-right:1px solid #05070a;
  display:flex; flex-direction:column; overflow:hidden; position:relative; z-index:2;
}
.tl-head{
  height:var(--ruler-h); flex:0 0 var(--ruler-h);
  display:flex; align-items:center; justify-content:space-between; padding:0 10px;
  font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
  background:linear-gradient(#272c34,#1e222a); border-bottom:1px solid #05070a;
}
.tl-head b{font-family:var(--mono); font-size:10px; color:var(--text-2); letter-spacing:0}
#trackHeads{flex:1; overflow:hidden; position:relative}
#trackHeadsInner{position:absolute; inset:0 0 auto 0; will-change:transform}

.th{
  height:var(--row); display:flex; align-items:center; gap:7px; padding:0 8px 0 0;
  border-bottom:1px solid var(--line-soft); position:relative; cursor:pointer;
  background:var(--panel);
}
.th:hover{background:var(--panel-2)}
.th.sel{background:#232c39}
.th.sel::after{content:''; position:absolute; right:0; top:0; bottom:0; width:2px; background:var(--accent)}
.th-color{width:5px; align-self:stretch; flex:0 0 5px}
.th-n{
  width:15px; text-align:right; font-family:var(--mono); font-size:9.5px; color:var(--text-3);
  flex:0 0 15px;
}
.th-name{flex:1; min-width:0}
.th-name b{display:block; font-size:11.5px; font-weight:600; letter-spacing:.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.th-name span{display:block; font-size:9px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.th-btns{display:flex; gap:3px}
.mini{
  width:19px; height:17px; border-radius:3px; font-size:9px; font-weight:700;
  display:grid; place-items:center; color:var(--text-3);
  background:#20242b; box-shadow:inset 0 0 0 1px #2c323b;
}
.mini:hover{color:var(--text-2)}
.mini.m.on{background:var(--mute); color:#08131f; box-shadow:0 0 8px rgba(95,168,232,.45)}
.mini.s.on{background:var(--solo); color:#241c00; box-shadow:0 0 8px rgba(242,193,78,.45)}

.timeline{flex:1; min-width:0; overflow:auto; position:relative; background:var(--well)}
.timeline::-webkit-scrollbar{width:11px;height:11px}
.timeline::-webkit-scrollbar-track{background:#0a0d11}
.timeline::-webkit-scrollbar-thumb{background:#333a45; border-radius:6px; border:2px solid #0a0d11}
.timeline::-webkit-scrollbar-thumb:hover{background:#414958}
#tlSizer{pointer-events:none}
#arrCanvas{position:absolute; top:0; left:0; pointer-events:none; will-change:transform}

/* ---------------- Splitter ---------------- */
.splitter{
  height:6px; background:linear-gradient(#1b1f26,#141820); border-top:1px solid #05070a;
  border-bottom:1px solid #05070a; cursor:ns-resize; position:relative;
}
.splitter::after{
  content:''; position:absolute; left:50%; top:50%; width:44px; height:2px; margin:-1px 0 0 -22px;
  border-radius:1px; background:#3a4250;
}
.splitter:hover::after{background:var(--accent)}

/* ---------------- Drawer ---------------- */
.drawer{
  height:var(--drawer-h, 356px); display:flex; flex-direction:column;
  background:var(--panel); overflow:hidden;
}
.drawer-tabs{
  display:flex; align-items:center; gap:2px; padding:0 8px; height:32px; flex:0 0 32px;
  background:linear-gradient(#272c34,#1e222a); border-bottom:1px solid #05070a;
}
.drawer-tabs button{
  padding:5px 12px; border-radius:4px 4px 0 0; font-size:11px; font-weight:600;
  color:var(--text-3);
}
.drawer-tabs button.on{color:var(--text); background:var(--panel); box-shadow:0 -1px 0 var(--accent) inset, 0 -2px 0 var(--accent) inset}
.drawer-info{
  margin-left:auto; display:flex; align-items:center; gap:10px;
  font-size:10px; color:var(--text-3);
}
.drawer-info b{font-family:var(--mono); color:var(--text-2); font-weight:500}
.pane{flex:1; min-height:0; overflow:auto; position:relative}
.pane::-webkit-scrollbar{width:11px;height:11px}
.pane::-webkit-scrollbar-track{background:#0f1217}
.pane::-webkit-scrollbar-thumb{background:#333a45;border-radius:6px;border:2px solid #0f1217}

/* ---------------- Mixer ---------------- */
.mixer{display:flex; height:100%; min-width:min-content; background:var(--well)}
.strip{
  width:88px; flex:0 0 88px; display:flex; flex-direction:column; align-items:center;
  padding:7px 6px 0; gap:5px; border-right:1px solid var(--line-soft); background:var(--panel);
  position:relative; min-height:0;
}
.strip.sel{background:#20272f}
.strip.master{background:linear-gradient(#212832,#191e26); border-left:1px solid var(--line); width:96px; flex-basis:96px}
/* three knobs on one row — two rows pushed the fader off the bottom of the drawer */
.strip .sends{gap:3px}
.strip .fadrow{min-height:0}
.strip .fader,.strip .vmeter{min-height:56px}
.strip .knob-body{width:24px; height:24px}
.strip .knob-body i{height:8px; transform-origin:50% 8px}
.strip-top{width:100%; height:3px; border-radius:2px}
.ins{width:100%; display:flex; flex-direction:column; gap:2px}
.ins button{
  width:100%; height:16px; border-radius:2px; font-size:8.5px; font-weight:600;
  letter-spacing:.05em; text-align:left; padding:0 5px; color:var(--text-3);
  background:#171b21; box-shadow:inset 0 0 0 1px #262c35; white-space:nowrap; overflow:hidden;
}
.ins button:hover{color:var(--text-2); background:#1d222a}
.ins button.on{color:#cfe6ff; background:#1c2b3d; box-shadow:inset 0 0 0 1px #2f5a86}
.sends{width:100%; display:flex; gap:6px; justify-content:center}
.fadrow{display:flex; align-items:flex-end; gap:5px; flex:1; padding-bottom:6px}
.fader{position:relative; width:24px; height:100%; min-height:70px; cursor:ns-resize; touch-action:none}
.fader-track{
  position:absolute; left:50%; top:5px; bottom:5px; width:5px; margin-left:-2.5px;
  border-radius:3px; background:#080a0e; box-shadow:inset 0 0 0 1px #262c35;
}
.fader-fill{position:absolute; left:50%; width:5px; margin-left:-2.5px; bottom:5px; border-radius:3px; background:linear-gradient(var(--accent), var(--accent-dim))}
.fader-cap{
  position:absolute; left:0; width:24px; height:14px; border-radius:2.5px;
  background:linear-gradient(#525a67 0%, #3a414b 48%, #262b33 52%, #1d2129 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.18);
}
.fader-cap::after{content:''; position:absolute; left:2px; right:2px; top:6px; height:1px; background:rgba(0,0,0,.75)}
.vmeter{width:9px; height:100%; min-height:70px; border-radius:2px; background:#080a0e; box-shadow:inset 0 0 0 1px #262c35}
.strip-val{font-family:var(--mono); font-size:9.5px; color:var(--text-2); font-variant-numeric:tabular-nums}
.strip-btns{display:flex; gap:4px}
.strip-name{
  width:100%; padding:4px 3px; margin-top:auto; text-align:center;
  font-size:9.5px; font-weight:600; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-top:1px solid var(--line-soft);
}
.lbl{font-size:8px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3)}

/* Knob */
.knob{display:flex; flex-direction:column; align-items:center; gap:2px; user-select:none}
.knob-body{
  width:26px; height:26px; border-radius:50%; position:relative; cursor:ns-resize; touch-action:none;
  background:radial-gradient(circle at 50% 34%, #414954, #262b33 60%, #171b21 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.6);
}
.knob-body::before{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:conic-gradient(from 220deg,
    var(--kc, var(--accent)) calc(var(--p,0) * 280deg),
    rgba(255,255,255,.08) calc(var(--p,0) * 280deg) 280deg,
    transparent 280deg);
  -webkit-mask:radial-gradient(circle, transparent 0 62%, #000 63%);
          mask:radial-gradient(circle, transparent 0 62%, #000 63%);
}
.knob-body i{
  position:absolute; left:50%; top:4px; width:2px; height:9px; margin-left:-1px;
  border-radius:1px; background:#e4e9f1;
  transform-origin:50% 9px; transform:rotate(calc(-140deg + var(--p,0) * 280deg));
}
.knob.big .knob-body{width:40px;height:40px}
.knob.big .knob-body i{height:13px; top:5px; transform-origin:50% 15px}
.knob-val{font-family:var(--mono); font-size:8.5px; color:var(--text-3); font-variant-numeric:tabular-nums}

/* ---------------- Piano roll ---------------- */
#paneRoll{display:flex; flex-direction:column; overflow:hidden}
.roll-bar{
  display:flex; align-items:center; gap:14px; padding:0 12px; height:30px; flex:0 0 30px;
  background:var(--panel-2); border-bottom:1px solid var(--line-soft); font-size:10.5px; color:var(--text-2);
}
.roll-bar .chip{
  display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:10px;
  background:var(--well); box-shadow:inset 0 0 0 1px var(--line-soft); font-size:10px;
}
.roll-bar .dot{width:7px;height:7px;border-radius:2px}
.roll-bar .hint{margin-left:auto; color:var(--text-3); font-size:10px}
.roll-bar .hint b{font-family:var(--mono); color:var(--text-2); font-weight:500}
.roll-wrap{flex:1; min-height:0; position:relative; background:var(--well); overflow:hidden}
#rollCanvas{position:absolute; inset:0; cursor:crosshair; touch-action:none}
.roll-empty{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  color:var(--text-3); font-size:11.5px; line-height:1.7; padding:20px;
}

/* ---------------- Plugin windows ---------------- */
#plugLayer{position:fixed; inset:0; pointer-events:none; z-index:500}
.plug{
  position:absolute; pointer-events:auto; width:340px;
  border-radius:8px; overflow:hidden;
  background:linear-gradient(#20252d, #171b22);
  border:1px solid #0a0d11;
  box-shadow:0 22px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.plug-bar{
  display:flex; align-items:center; gap:8px; padding:0 9px; height:30px; cursor:move;
  background:linear-gradient(#333944,#252a33); border-bottom:1px solid #0a0d11; user-select:none;
}
.plug-x{
  width:11px;height:11px;border-radius:50%; background:#f0524a;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35); flex:0 0 11px;
}
.plug-x:hover{filter:brightness(1.2)}
.plug-title{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}
.plug-on{
  margin-left:auto; font-size:8.5px; letter-spacing:.1em; padding:2px 7px; border-radius:3px;
  background:#1a1f26; color:var(--text-3); box-shadow:inset 0 0 0 1px #2b323c;
}
.plug-on.on{background:var(--good); color:#04160c; box-shadow:0 0 9px rgba(87,201,138,.45)}
.plug-sub{
  padding:5px 11px; font-size:9px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3); background:#12161c; border-bottom:1px solid #0a0d11;
  display:flex; justify-content:space-between;
}
.plug-sub b{font-family:var(--mono); letter-spacing:0; text-transform:none; color:var(--text-2); font-weight:500}
.plug-body{padding:12px 13px 14px}
.plug-canvas{
  width:100%; display:block; border-radius:4px; background:#080a0e;
  box-shadow:inset 0 0 0 1px #232830; margin-bottom:12px; touch-action:none;
}
.krow{display:flex; justify-content:space-between; gap:6px; flex-wrap:wrap}
.krow .knob{flex:1 1 0; min-width:44px}
.krow .knob .lbl{white-space:nowrap}
.plug-rows{display:flex; flex-direction:column; gap:8px}
.prow{display:flex; align-items:center; gap:9px}
.prow>.lbl{width:64px; flex:0 0 64px; text-align:right}
.prow input[type=range]{flex:1 1 auto; width:auto; min-width:0}
.prow .val{width:52px; flex:0 0 52px; font-family:var(--mono); font-size:10px; color:var(--text-2); text-align:right; font-variant-numeric:tabular-nums}
.pillrow{display:flex; gap:3px}
.pillrow button{
  flex:1; padding:4px 0; border-radius:3px; font-size:9.5px; font-family:var(--mono);
  background:#171b21; color:var(--text-3); box-shadow:inset 0 0 0 1px #262c35;
}
.pillrow button.on{background:var(--accent); color:#04121f; box-shadow:none}

/* ---------------- Toast ---------------- */
#toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%, 14px);
  padding:8px 15px; border-radius:6px; font-size:11.5px;
  background:#2b323c; border:1px solid var(--line); color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:9500;
}
#toast.show{opacity:1; transform:translate(-50%, 0)}

/* The control bar sheds its least-load-bearing readouts first, so the transport
   and the position display survive every width. */
@media (max-width:1240px){ .lcd .cell.opt1{display:none} }
@media (max-width:1080px){ .lcd .cell.opt2{display:none} .brand i{display:none} }
@media (max-width:940px) { .brand{display:none} #masterMeter{width:58px} .ctrlbar{gap:10px} }
@media (max-width:840px) { .vol{display:none} }
@media (max-width:760px) { :root{--head-w:180px} .th-n{display:none} }

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}