:root{
  /* ---- Design tokens (ui_look aesthetic + DESIGN_PHILOSOPHY) ---- */
  --bg:#0c0a12;
  --bg-deep:var(--bg);
  --panel:#14121c;
  --panel-hover:#1a1724;
  --panel-raised:#1c1828;
  --border:rgba(255,255,255,0.07);
  --border-strong:rgba(255,255,255,0.12);

  /* Accent: cool violet (mockup); ember kept for play warmth */
  --accent:#a78bfa;
  --accent-dim:rgba(167,139,250,0.22);
  --accent-glow:rgba(167,139,250,0.45);
  --ember:#e8a26b;
  --ember-dim:rgba(232,162,107,0.35);
  --danger:#e08080;
  --danger-dim:rgba(224,128,128,0.15);
  --ok:#8fbc8f;
  --mod:#8eb6ff;
  --mod-dim:rgba(100,149,237,0.18);

  --text:#ede7f2;
  --text-primary:var(--text);
  --muted:#8a8299;
  --text-muted:var(--muted);

  --glow-1:#2a1848;
  --glow-2:#1e1438;
  --shadow-soft:0 8px 28px rgba(0,0,0,0.4);

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:999px;

  --space-xs:4px;
  --space-sm:8px;
  --space-md:14px;
  --space-lg:22px;

  --font-ui:'Manrope',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-display:'Fraunces',serif;

  --aura-scale:1;
  --aura-opacity:0.28;
  /* Compact dial (insert EQ width, tiny chrome) */
  --ctrl-line:15px;
  /*
   * Panel knobs: one size (Sat/Tilt look) for Source, Tone, Mod, color.
   * Insert FX keep a smaller compact dial via --ctrl-line (15px).
   */
  --knob-small:28px;
  --panel-knob:var(--knob-small);
  --macro-knob:var(--knob-small);
  --knob-cell-small:50px;
  /* Label only under dials (no % values) */
  --knob-caption-small:14px;
  --knob-caption:var(--knob-caption-small);
}

*{box-sizing:border-box;}

html{
  height:100%;
}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}

/*
 * Vertical layout: center the app when it fits; when content is taller than the
 * viewport (e.g. antic track 1 with many FX), pin to the top so the play button
 * stays reachable via normal scroll. `align-items:center` alone clipped the top.
 */
body{
  min-height:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:24px;
  box-sizing:border-box;
  /* Soft room glow — instrument in a dark hall, not flat void */
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(42,24,72,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(30,20,50,0.35) 0%, transparent 50%),
    var(--bg);
}

/*
 * Page starfield — travel *through* space (depth), not a side pan.
 * Stars approach from the distance and pass the viewer. Behind chrome only.
 */
.page-starfield{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  /* Camera looking into the void */
  perspective:480px;
  perspective-origin:50% 48%;
}
.page-starfield-space{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}
.page-star{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  background:#cbb8f7;
  box-shadow:0 0 5px rgba(203,184,247,0.4);
  /* --tx/--ty: direction off-center; duration/delay set in JS */
  animation-name:page-star-through;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform, opacity;
  transform:translate3d(-50%, -50%, -900px) scale(0.15);
  opacity:0;
}
/* Far → near along Z; slight radial spread so paths feel 3D */
@keyframes page-star-through{
  0%{
    transform:translate3d(-50%, -50%, -1100px)
      translate3d(calc(var(--tx) * 0.08), calc(var(--ty) * 0.08), 0)
      scale(0.12);
    opacity:0;
  }
  6%{
    opacity:0.35;
  }
  55%{
    opacity:0.85;
  }
  92%{
    opacity:0.55;
  }
  100%{
    transform:translate3d(-50%, -50%, 180px)
      translate3d(var(--tx), var(--ty), 0)
      scale(1.35);
    opacity:0;
  }
}
/* Keep interactive chrome above the field (do not override position:fixed on tools) */
body > .app{
  position:relative;
  z-index:1;
}
body > .corner-tools{
  z-index:1000;
}
body > .app-modal{
  z-index:2000;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .page-star{
    animation:none !important;
    /* Static deep field if motion is reduced */
    transform:translate3d(-50%, -50%, -400px)
      translate3d(calc(var(--tx) * 0.4), calc(var(--ty) * 0.4), 0)
      scale(0.5);
    opacity:0.35;
  }
}

.app{
  position:relative;
  width:100%;
  max-width:460px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  /* Center in viewport when short; collapses to 0 free space when tall */
  margin-block:auto;
}

/* Play → title → rec → init (player-first stack) */
.player-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
  flex-shrink:0;
}
.player-stack .stage{ margin:0; }
.player-stack .preset-title{
  order:0;
  margin:0;
  font-size:11px;
  letter-spacing:0.12em;
  opacity:0.75;
  max-width:min(320px, 85vw);
}
.player-stack .timer{
  margin:-4px 0 0;
  min-height:12px;
}
.player-stack .live-rec{
  margin-top:2px;
}
.player-stack .session-init-btn{
  margin-top:2px;
  opacity:0.55;
}

.stage{
  position:relative;
  width:min(62vw,260px);
  height:min(62vw,260px);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Listen / Make mode switch */
.mode-toggle{
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:2px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.28);
  flex-shrink:0;
}
.mode-toggle-btn{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:5px 14px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:color 0.12s, background 0.12s;
}
.mode-toggle-btn:hover{ color:var(--text); }
.mode-toggle-btn.active{
  color:var(--ember);
  background:rgba(232,162,107,0.12);
}
.mode-toggle-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Listen mode: hide studio chrome; keep player + mode + light preset access */
body.mode-listen .track-list,
body.mode-listen .track-panel,
body.mode-listen #exportFold,
body.mode-listen #jamFold,
body.mode-listen .session-init-btn,
body.mode-listen .live-rec,
body.mode-listen #liveRec{
  display:none !important;
}
body.mode-listen .app{
  gap:14px;
}
body.mode-listen .player-stack .preset-title{
  font-size:12px;
  opacity:0.85;
  letter-spacing:0.14em;
}
/* Presets fold stays for loading music in Listen */
body.mode-listen #cornerTools .foldable:not(#presetFold){
  display:none;
}
/* Listen: hide draft WIP chrome; keep final preset load / export */
body.mode-listen .preset-hint,
body.mode-listen .preset-section-lab,
body.mode-listen #presetRow > div:has(#draftName),
body.mode-listen #presetRow > div:has(#draftSelect),
body.mode-listen #presetRow > div:has(#presetName){
  display:none !important;
}

/* App-styled modal (Init confirm) */
.app-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
}
.app-modal.hidden,
.app-modal[hidden]{
  display:none !important;
}
.app-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,6,12,0.72);
  backdrop-filter:blur(6px);
}
.app-modal-card{
  position:relative;
  width:min(340px, 100%);
  padding:22px 20px 16px;
  border-radius:var(--radius-md, 10px);
  border:1px solid var(--border);
  background:linear-gradient(165deg, rgba(36,30,44,0.98) 0%, rgba(18,14,24,0.98) 100%);
  box-shadow:0 24px 64px rgba(0,0,0,0.55);
}
.app-modal-title{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text);
}
.app-modal-body{
  margin:0 0 8px;
  font-size:13px;
  line-height:1.45;
  color:var(--text);
  opacity:0.88;
}
.app-modal-note{
  margin:0 0 18px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.04em;
  line-height:1.4;
  color:var(--text-muted);
}
.app-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.app-modal-danger{
  border-color:rgba(224,128,128,0.4) !important;
  color:#e8a0a0 !important;
  background:rgba(224,128,128,0.1) !important;
}
.app-modal-danger:hover{
  border-color:rgba(224,128,128,0.7) !important;
  background:rgba(224,128,128,0.18) !important;
}

.aura{
  position:absolute;
  inset:-40%;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, var(--glow-1) 0%, transparent 60%),
    radial-gradient(circle at 65% 70%, var(--glow-2) 0%, transparent 62%);
  filter:blur(28px);
  transform:scale(var(--aura-scale));
  opacity:var(--aura-opacity);
  transition:opacity 0.6s ease;
  pointer-events:none;
}

.play-btn{
  position:relative;
  width:112px;
  height:112px;
  border-radius:50%;
  border:1px solid var(--ember-dim);
  background:radial-gradient(circle at 35% 30%, #3a2b28 0%, #1c1620 70%);
  color:var(--ember);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color 0.3s ease, transform 0.15s ease;
}
.play-btn:hover{ border-color:rgba(232,162,107,0.7); }
.play-btn:active{ transform:scale(0.97); }
.play-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.play-btn svg{ width:34px; height:34px; }

/* Live record — always under play (solo or jam) */
.live-rec{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin-top:-6px;
  min-height:36px;
}
.live-rec-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.25);
  color:var(--text-muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:border-color 0.15s, color 0.15s, background 0.15s;
}
.live-rec-btn:hover{
  border-color:rgba(224,128,128,0.45);
  color:var(--text-primary);
}
.live-rec-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.live-rec-btn.recording{
  border-color:rgba(224,128,128,0.65);
  color:#e08080;
  background:rgba(224,128,128,0.1);
}
.live-rec-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  flex-shrink:0;
}
.live-rec-btn.recording .live-rec-dot{
  background:#e08080;
  box-shadow:0 0 8px rgba(224,128,128,0.75);
  animation:jam-rec-pulse 1s ease-in-out infinite;
}
.live-rec-timer{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.08em;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
  min-height:1em;
  opacity:0.55;
}
.live-rec-timer.live{
  color:#e08080;
  opacity:1;
}

.preset-title{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.08em;
  color:var(--text-muted);
  min-height:12px;
  text-align:center;
  opacity:0.6;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:min(280px, 70vw);
}

.timer{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--text-muted);
  min-height:14px;
  opacity:0.5;
  transition:opacity 0.4s ease;
}
.timer.visible{ opacity:1; }

/* ---- volume ---- */
.volume-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:360px;
}
.vol-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--text-muted);
  text-transform:uppercase;
  white-space:nowrap;
}

/* ---- foldable sections ---- */
.fold-row{
  display:flex;
  gap:10px;
  width:100%;
  max-width:360px;
  margin-top:-6px;
}
/*
 * Presets / Jam / Export — pinned to the *viewport* top-left.
 * Must stay put when the main app scrolls (page scroll must not move these).
 * Direct child of body (not .app) so no transform ancestor can break fixed.
 * Three equal columns (grid 1fr 1fr 1fr) so labels stay evenly spaced.
 */
#cornerTools.corner-tools.fold-row,
.corner-tools.fold-row{
  position:fixed;
  top:max(12px, env(safe-area-inset-top, 0px));
  left:max(12px, env(safe-area-inset-left, 0px));
  z-index:1000;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:start;
  gap:0;
  width:min(288px, calc(100vw - 24px));
  max-width:min(288px, calc(100vw - 24px));
  overflow:visible;
  pointer-events:none; /* bar doesn't block clicks through empty space */
}
#cornerTools.corner-tools .foldable,
.corner-tools.fold-row .foldable{
  pointer-events:auto;
  position:relative;
  width:100%;
  max-width:none;
  min-width:0;
  overflow:visible;
  z-index:1001;
}
#cornerTools.corner-tools .fold-toggle,
.corner-tools.fold-row .fold-toggle{
  width:100%;
  justify-content:center;
  gap:4px;
  padding:5px 2px;
  text-align:center;
  /* Even optical weight across unequal label lengths */
  letter-spacing:0.08em;
}
/* All dropdowns share the left edge of the tools bar (containing block = #cornerTools) */
#cornerTools.corner-tools .foldable{
  position:static;
}
#cornerTools.corner-tools .fold-content,
.corner-tools.fold-row .fold-content{
  position:absolute;
  top:100%;
  left:0;
  right:auto;
  transform:none;
  width:min(280px, calc(100vw - 24px));
  z-index:1001;
}
.session-init-btn{
  flex:0 0 auto;
  margin:0;
  padding:2px 8px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  line-height:1.4;
  opacity:0.65;
  transition:color 0.12s, opacity 0.12s;
}
.session-init-btn:hover{
  color:var(--ember);
  opacity:1;
}
.session-init-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.preset-hint{
  margin:0 0 8px;
  font-size:10px;
  line-height:1.35;
  color:var(--text-muted);
  letter-spacing:0.02em;
}
.preset-section-lab{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin:8px 0 4px;
}
.preset-section-lab:first-of-type{ margin-top:0; }
.foldable{
  position:relative;
  width:100%;
  max-width:280px;
}
.fold-toggle{
  width:100%;
  background:none;
  border:none;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 0;
  transition:color 0.2s;
}
.fold-toggle:hover{ color:var(--text); }
.fold-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.fold-content{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:10;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  padding:0 10px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height 0.3s ease, opacity 0.25s ease;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.foldable.open .fold-content{
  /* Jam panel is tall (host record, advanced) — allow scroll, don't clip */
  max-height:min(75vh, 560px);
  opacity:1;
  padding:10px;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
}
.foldable.open{ z-index:20; }

/* ---- chevron (CSS only) ---- */
.chevron{
  display:inline-block;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform 0.25s ease;
}
[aria-expanded="true"] > .chevron{
  transform:rotate(180deg);
}

/* ---- track list (fixed chrome — one card row height) ---- */
.track-list{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:6px;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  max-width:360px;
  min-height:80px;
  flex-shrink:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}

.track-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:6px 2px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  cursor:pointer;
  width:30px;
  min-height:80px;
  flex-shrink:0;
  transition:border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.track-card:hover{ border-color:var(--border-strong); background:var(--panel-hover); }
.track-card.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-dim), 0 0 16px var(--accent-dim);
  background:var(--panel-raised);
}
.track-card.master{ border-color:rgba(148,138,163,0.3); background:var(--panel-raised); min-height:80px; }
.track-card.master.selected{ border-color:var(--accent); }

/* Alt-drag duplicate: floating ghost + drop markers */
.track-card.dup-ghost{
  position:fixed;
  z-index:10050;
  pointer-events:none;
  opacity:0.78;
  box-shadow:0 10px 28px rgba(0,0,0,0.45);
  border-color:rgba(100,149,237,0.65);
  margin:0;
}
.track-list.dup-dragging{
  cursor:copy;
}
.track-card.dup-drop-before{
  box-shadow:inset 3px 0 0 0 #8eb6ff;
}
.track-card.dup-drop-after{
  box-shadow:inset -3px 0 0 0 #8eb6ff;
}

.track-name{
  font-size:10px;
  font-weight:500;
  color:var(--text-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  width:100%;
  text-align:center;
}

.track-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--ember);
  animation:pulse 1.5s ease-in-out infinite;
  flex-shrink:0;
  align-self:center;
  visibility:hidden;
}
.track-dot:not(.hidden){
  visibility:visible;
}
@keyframes pulse{
  0%,100%{ opacity:0.4; }
  50%{ opacity:1; }
}

/* ---- solo / mute ---- */
.track-solo, .track-mute{
  width:14px;
  height:13px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,0.08);
  background:none;
  color:var(--text-muted);
  font-size:6px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:all 0.15s;
  flex-shrink:0;
}
.track-solo:hover{ border-color:rgba(76,175,80,0.5); color:rgba(76,175,80,0.8); }
.track-mute:hover{ border-color:rgba(244,67,54,0.5); color:rgba(244,67,54,0.8); }
.track-solo.active{
  background:rgba(76,175,80,0.2);
  border-color:rgba(76,175,80,0.6);
  color:#4caf50;
}
.track-mute.active{
  background:rgba(244,67,54,0.2);
  border-color:rgba(244,67,54,0.6);
  color:#f44336;
}
.track-bypass{
  width:14px;
  height:13px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,0.08);
  background:none;
  color:var(--text-muted);
  font-size:6px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:all 0.15s;
  flex-shrink:0;
}
.track-bypass:hover{ border-color:rgba(100,149,237,0.5); color:rgba(100,149,237,0.8); }
.track-bypass.active{
  background:rgba(100,149,237,0.2);
  border-color:rgba(100,149,237,0.7);
  color:#6495ed;
}

.master-disable{
  width:14px;
  height:13px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,0.08);
  background:none;
  color:var(--text-muted);
  font-size:6px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:all 0.15s;
  flex-shrink:0;
}
.master-disable:hover{ border-color:rgba(148,138,163,0.5); color:rgba(148,138,163,0.8); }
.master-disable.active{
  background:rgba(148,138,163,0.2);
  border-color:rgba(148,138,163,0.6);
  color:var(--text-primary);
}

.track-remove{
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:9px;
  cursor:pointer;
  padding:0;
  line-height:1;
  flex-shrink:0;
}
.track-remove.hidden{
  visibility:hidden;
}
.track-remove:hover{ color:var(--ember); }

.add-track-btn{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px dashed rgba(255,255,255,0.12);
  background:none;
  color:var(--text-muted);
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:border-color 0.2s, color 0.2s;
}
.add-track-btn:hover{ border-color:var(--ember); color:var(--ember); }
.add-track-btn.disabled{
  opacity:0.3;
  pointer-events:none;
}

/* ---- presets ---- */
.preset-row{
  display:flex;
  flex-direction:column;
  gap:3px;
  width:100%;
  max-width:280px;
}
.preset-row input[type="text"],
.preset-row select{
  font-size:11px;
  padding:5px 8px;
  border-radius:6px;
}

/* ---- shared button style ---- */
.btn{
  background:#2c1c4a;
  color:var(--text-primary);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
  padding:6px 10px;
  font-family:'Manrope',sans-serif;
  font-size:11px;
  cursor:pointer;
  white-space:nowrap;
}
.btn-sm{
  padding:4px 8px;
  font-size:10px;
}
.btn-alt{
  background:#3a2440;
}
.btn:hover{ border-color:rgba(255,255,255,0.2); }

/* ---- range inputs (Vol / Mix — horizontal only) ---- */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:2px;
  background:rgba(148,138,163,0.28);
  border-radius:2px;
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--accent);
  cursor:pointer;
  box-shadow:0 0 0 3px var(--accent-dim);
}
input[type="range"]::-moz-range-thumb{
  width:13px;
  height:13px;
  border:none;
  border-radius:50%;
  background:var(--accent);
  cursor:pointer;
  box-shadow:0 0 0 3px var(--accent-dim);
}
input[type="range"]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- track panel ---- */
.track-panel{
  width:100%;
  max-width:360px;
  min-height:0;
  display:grid;
  /* minmax(0,1fr): grid items must never exceed the fixed 360px track — their
     min-content (e.g. an LFO card's shape row + link label) must not resize the
     panel when text length changes (link dot click / label swap). */
  grid-template-columns:minmax(0,1fr);
}
.track-panel > *{
  grid-area:1/1;
}
.master-controls, .track-controls{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  /* Panel sections keep stable height when switching tracks/master */
  width:100%;
  box-sizing:border-box;
  box-shadow:var(--shadow-soft);
}
.track-controls > *,
.master-controls > *{
  flex-shrink:0;
}
.track-panel > .hidden-panel{
  visibility:hidden;
  pointer-events:none;
}

/* Local input / future remote strips (jam Phase 0) */
.track-card.input-card{
  border-color:rgba(100,149,237,0.35);
  background:#171c28;
}
.track-card.input-card.selected{ border-color:#8eb6ff; }
.track-card.input-card .track-name{ color:#8eb6ff; font-size:9px; }
.input-controls{
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;
  padding:18px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  box-sizing:border-box;
}
.input-controls > *{ flex-shrink:0; }
.input-check-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.04em;
  color:var(--text-muted);
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
}
.input-hint{
  margin:0;
  font-size:10px;
  line-height:1.4;
  color:var(--text-muted);
  opacity:0.75;
}
.add-menu{
  position:fixed;
  z-index:10000;
  padding:4px;
  border-radius:8px;
  background:#1e1a28;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 12px 40px rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:140px;
}
.add-menu.hidden{ display:none; }
.add-menu button{
  border:none;
  background:transparent;
  color:var(--text-primary);
  font-family:'Manrope',sans-serif;
  font-size:12px;
  text-align:left;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
}
.add-menu button:hover{
  background:rgba(232,162,107,0.12);
  color:var(--ember);
}

/* Remote peer strips (jam Phase 1) */
.track-card.remote-card{
  border-color:rgba(160,120,200,0.4);
  background:#1a1624;
}
.track-card.remote-card.selected{ border-color:#c4a0e8; }
.track-card.remote-card .track-name{ color:#c4a0e8; font-size:9px; }

.jam-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:220px;
  max-width:280px;
}
.jam-section{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top:2px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.jam-section:first-of-type{ border-top:none; padding-top:0; }
.jam-section-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  opacity:0.85;
}
.jam-status{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.04em;
  color:var(--text-muted);
  min-height:1.2em;
  line-height:1.35;
}
.jam-status.ok{ color:#8fbc8f; }
.jam-status.warn{ color:var(--ember); }
.jam-status.err{ color:#e08080; }
.jam-role{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  color:#8eb6ff;
  letter-spacing:0.06em;
}
.jam-row{
  display:flex;
  gap:4px;
  align-items:center;
}
.jam-row input[type="text"]{
  flex:1;
  min-width:0;
  background:#221e2c;
  color:var(--text-primary);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;
  padding:5px 8px;
  font-family:'Manrope',sans-serif;
  font-size:11px;
}
.jam-code-input{
  font-family:'IBM Plex Mono',monospace !important;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:13px !important;
  text-align:center;
}
.jam-actions{ flex-wrap:wrap; }
.jam-send-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}
.jam-hint{
  margin:0;
  font-size:9px;
  line-height:1.35;
  color:var(--text-muted);
  opacity:0.8;
}
.jam-hint-tight{ margin-top:2px; }
.jam-hint code{
  font-size:9px;
  color:var(--ember);
}
.jam-advanced{
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:8px;
  font-size:10px;
  color:var(--text-muted);
}
.jam-advanced summary{
  cursor:pointer;
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  user-select:none;
  list-style:none;
}
.jam-advanced summary::-webkit-details-marker{ display:none; }
.jam-advanced[open] summary{ margin-bottom:6px; color:var(--ember); }
.jam-advanced .jam-row{ margin-top:4px; }

@keyframes jam-rec-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.35; }
}
.master-section{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
/* Master uses panel-block chrome — drop nested box to match track panel */
.master-controls > .panel-block.master-section{
  padding:8px 0 6px;
  border:none;
  border-top:1px solid var(--border);
  border-radius:0;
}
.master-controls > .panel-block.master-section:first-child{
  border-top:none;
  padding-top:4px;
}
.master-section-label{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
}

.control-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.control-row label{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--text-muted);
  text-transform:uppercase;
}

select{
  background:#221e2c;
  color:var(--text-primary);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  padding:8px 10px;
  font-family:'Manrope',sans-serif;
  font-size:13px;
  cursor:pointer;
}
select:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }

.divider{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.divider::before, .divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,255,255,0.08);
}

/* ---- piano roll (fixed height chrome) ---- */
.piano-roll{
  display:block;
  gap:0;
  width:100%;
  height:52px;
  min-height:52px;
  max-height:52px;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  box-sizing:border-box;
  /* keys are absolutely positioned to fill this box exactly */
  flex-shrink:0;
  background:rgba(0,0,0,0.15);
}
.piano-key{
  position:absolute;
  cursor:pointer;
  flex-shrink:0;
  transition:background 0.1s;
  box-sizing:border-box;
}
.piano-key.white{
  height:52px;
  top:0;
  background:#2a2535;
  /* Divider drawn inside the key (box-shadow) so borders never open a gap */
  box-shadow:inset -1px 0 0 rgba(255,255,255,0.06);
  z-index:1;
}
.piano-key.white:last-of-type,
.piano-key.white.last{
  box-shadow:none;
}
.piano-key.black{
  height:32px;
  background:#1a1520;
  box-shadow:inset -1px 0 0 rgba(255,255,255,0.04);
  top:0;
  z-index:2;
}
.piano-key.white.active{
  background:var(--ember);
  box-shadow:inset -1px 0 0 rgba(0,0,0,0.12);
}
.piano-key.white.active.last,
.piano-key.white.active:last-of-type{
  box-shadow:none;
}
.piano-key.black.active{
  background:#c47a42;
  box-shadow:inset -1px 0 0 rgba(0,0,0,0.15);
}
/* Interval 0 = root (always the reference key for chords) */
.piano-key.white.root:not(.active){
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,0.06),
    inset 0 -2px 0 rgba(232,162,107,0.55);
}
.piano-key.white.root.last:not(.active),
.piano-key.white.root:last-of-type:not(.active){
  box-shadow:inset 0 -2px 0 rgba(232,162,107,0.55);
}
.piano-key.black.root:not(.active){
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,0.04),
    inset 0 -2px 0 rgba(232,162,107,0.7);
}
.piano-key:hover{ opacity:0.85; }

/* ---- freehand harmony steps (under piano, no BPM) ---- */
.harmony-steps{
  width:100%;
  flex-shrink:0;
  margin:0;
  padding:6px 0 4px;
  border-top:1px solid rgba(255,255,255,0.05);
  box-sizing:border-box;
}
.harmony-steps.is-hidden{ display:none; }
.harmony-steps-head{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:22px;
  margin-bottom:4px;
}
.harmony-steps-label{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  flex-shrink:0;
}
.harmony-steps-status{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--font-mono);
  font-size:9px;
  color:var(--text-muted);
  opacity:0.75;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.harmony-steps-actions{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
/* Attack — capture crossfade (only when steps exist) */
.harmony-attack-wrap{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
  margin-left:2px;
}
.harmony-attack-wrap.is-hidden{ display:none !important; }
.harmony-attack-lab{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  opacity:0.8;
}
.harmony-attack-host{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.harmony-attack-host .rotary-knob{
  /* Compact dial in steps header */
  --ctrl-line:13px;
}
.harmony-attack-host .rotary-knob-dial{
  width:22px;
  height:22px;
}
.harmony-attack-host .rotary-knob-label,
.harmony-attack-host .rotary-knob-value{
  display:none;
}
.harmony-steps-btn{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.04em;
  padding:2px 7px;
  border:none;
  border-radius:4px;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  line-height:1.3;
  transition:color 0.12s, background 0.12s;
}
.harmony-steps-btn:hover{
  color:var(--accent);
  background:var(--accent-dim);
}
.harmony-auto-btn.active{
  color:var(--ember);
  background:rgba(232,162,107,0.12);
}
.harmony-seq-btn.active{
  color:var(--mod, #8eb6ff);
  background:rgba(100,149,237,0.14);
}
.harmony-seq-rate-wrap{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.harmony-seq-rate-wrap.is-hidden{ display:none !important; }
.harmony-step-row.is-seq-skip{
  opacity:0.38;
}
.harmony-step-dur.is-seq-disabled{
  opacity:0.45;
  cursor:not-allowed;
  pointer-events:none;
}
.harmony-steps.is-seq .harmony-step-sec{
  opacity:0.45;
}
/* Horizontal strip of thin step columns — dwell + delete only */
.harmony-steps-list{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:3px;
  width:100%;
  max-height:52px; /* layout contract: fixed chrome — short strip */
  overflow-x:auto;
  overflow-y:hidden;
  box-sizing:border-box;
  padding:1px 0 2px;
  scrollbar-width:thin;
  scrollbar-color:var(--accent-dim) transparent;
}
.harmony-steps-list::-webkit-scrollbar{ height:4px; }
.harmony-steps-list::-webkit-scrollbar-track{ background:transparent; }
.harmony-steps-list::-webkit-scrollbar-thumb{
  background:var(--accent-dim);
  border-radius:2px;
}
.harmony-steps-list::-webkit-scrollbar-thumb:hover{
  background:rgba(167,139,250,0.4);
}
.harmony-steps-empty{
  font-size:10px;
  color:var(--muted);
  opacity:0.55;
  padding:6px 2px;
  letter-spacing:0.03em;
  flex:1 1 auto;
}
/* Thin pill: dwell + × fully inside border */
.harmony-step-row,
.harmony-step-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:28px;
  min-width:28px;
  max-width:30px;
  height:48px;
  min-height:48px;
  max-height:48px;
  padding:4px 2px 3px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--panel);
  box-sizing:border-box;
  flex-shrink:0;
  overflow:hidden;
  cursor:grab;
  transition:border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.harmony-step-row:hover{
  border-color:var(--border-strong);
  background:var(--panel-hover);
}
.harmony-step-row.is-current{
  border-color:rgba(232,162,107,0.45);
  background:rgba(232,162,107,0.08);
  box-shadow:0 0 0 1px rgba(232,162,107,0.12);
}
.harmony-step-row.drag-over{
  border-color:var(--accent);
  background:var(--accent-dim);
}
.harmony-step-row.dragging{ opacity:0.4; cursor:grabbing; }
.harmony-step-time{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  width:100%;
  flex:0 0 auto;
  min-height:0;
}
.harmony-step-dur{
  width:100%;
  max-width:24px;
  box-sizing:border-box;
  font-family:var(--font-mono);
  font-size:8px;
  text-align:center;
  padding:1px 0;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:3px;
  background:rgba(0,0,0,0.25);
  color:var(--text);
  cursor:ns-resize;
  touch-action:none;
  -moz-appearance:textfield;
  line-height:1.2;
}
.harmony-step-dur.dragging{
  border-color:var(--accent);
  color:var(--accent);
}
.harmony-step-dur::-webkit-outer-spin-button,
.harmony-step-dur::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.harmony-step-sec{
  font-family:var(--font-mono);
  font-size:6px;
  color:var(--text-muted);
  line-height:1;
  margin-top:0;
  opacity:0.65;
  pointer-events:none;
}
.harmony-step-remove{
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:14px;
  min-height:14px;
  margin:0;
  border:none;
  border-radius:3px;
  background:transparent;
  color:var(--text-muted);
  font-size:11px;
  line-height:1;
  cursor:pointer;
  opacity:0.55;
  padding:0;
  flex:0 0 auto;
  box-sizing:border-box;
}
.harmony-step-remove:hover{
  color:var(--ember);
  opacity:1;
  background:rgba(232,162,107,0.1);
}

/* ---- chord context menu (right-click piano key) ---- */
.chord-menu{
  position:fixed;
  z-index:10000;
  padding:4px;
  border-radius:8px;
  background:#1e1a28;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 12px 40px rgba(0,0,0,0.55);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  overflow:visible;
}
.chord-menu.hidden{ display:none; }
.chord-menu-item{
  display:block;
  width:100%;
  text-align:left;
  padding:6px 12px;
  border:none;
  border-radius:5px;
  background:transparent;
  color:var(--text-primary);
  font-family:'Manrope',sans-serif;
  font-size:12px;
  cursor:pointer;
  letter-spacing:0.02em;
  white-space:nowrap;
}
.chord-menu-item:hover{
  background:rgba(232,162,107,0.15);
  color:var(--ember);
}
.chord-menu-item.active{
  color:var(--ember);
  background:rgba(232,162,107,0.1);
}

/* ---- insert FX stack (between tone and volume) ---- */
.insert-section{
  width:100%;
  margin:0;
  padding:8px 0 6px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* When also a panel-block, avoid double top padding from both rules */
.panel-block.insert-section{
  padding-top:8px;
  gap:8px;
}
/* Master panel: already inside a section card — no extra rules lines */
.master-insert-section{
  margin:0;
  padding:0;
  border:none;
}
.insert-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.insert-section-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.insert-add-btn{
  width:22px;
  height:22px;
  border:none;
  border-radius:0;
  background:transparent;
  color:var(--text-muted);
  font-size:16px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:color 0.12s, opacity 0.12s;
}
.insert-add-btn:hover{
  color:var(--accent);
  background:transparent;
}
.insert-add-btn:disabled{
  opacity:0.35;
  cursor:default;
  color:var(--text-muted);
  background:transparent;
}
/*
 * FX list — FIXED height box (scroll inside). Never grows the page.
 * Rebuild with replaceChildren only (app.js). Tall stacks (antic) scroll.
 */
.insert-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  /* Fixed scroll box — keep compact so one EQ doesn't leave a dead well */
  height:min(28vh, 200px);
  min-height:min(28vh, 200px);
  max-height:min(28vh, 200px);
  overflow-x:hidden;
  overflow-y:auto;
  flex-shrink:0;
  padding-right:2px;
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:var(--accent-dim) transparent;
}
.insert-list::-webkit-scrollbar{ width:6px; }
.insert-list::-webkit-scrollbar-thumb{
  background:var(--accent-dim);
  border-radius:3px;
}
.insert-empty{
  font-size:10px;
  color:var(--muted);
  opacity:0.55;
  letter-spacing:0.04em;
  padding:2px 0;
}
.insert-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 8px 8px 6px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:rgba(0,0,0,0.22);
  transition:border-color 0.12s, background 0.12s, opacity 0.12s;
}
/* Collapsed strip: drag zone + enable + delete (params / head extras hidden) */
.insert-card.is-collapsed{
  gap:0;
  padding:5px 8px 5px 6px;
}
/* Wider grab target for reorder when collapsed */
.insert-drag-zone{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
  cursor:grab;
  user-select:none;
}
.insert-drag-zone:active{ cursor:grabbing; }
.insert-card.is-collapsed .insert-drag-zone .insert-grip{
  cursor:inherit;
}
.insert-card.is-collapsed .insert-drag-zone .insert-name{
  cursor:inherit;
  flex:0 1 auto;
}
.insert-card.drag-over{
  border-color:var(--accent);
  background:var(--accent-dim);
}
.insert-card.dragging{ opacity:0.45; }
.insert-card-head{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  min-width:0;
}
/* Grip only starts a drag — title and sliders stay free */
.insert-grip{
  color:var(--text-muted);
  font-size:11px;
  letter-spacing:-1px;
  opacity:0.45;
  user-select:none;
  flex-shrink:0;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:grab;
  border-radius:4px;
  transition:opacity 0.12s, color 0.12s, background 0.12s;
}
.insert-grip:hover{
  opacity:1;
  color:var(--accent);
  background:var(--accent-dim);
}
.insert-grip:active{ cursor:grabbing; }
.insert-name{
  flex:0 1 auto;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-primary);
  min-width:0;
  max-width:100%;
  margin-right:4px;
  cursor:pointer;
  user-select:none;
  border-radius:3px;
  padding:1px 2px;
  /* No full-width stretch — hover highlight stays on the label only */
  width:max-content;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color 0.12s;
}
.insert-name:hover{
  color:var(--accent);
  /* Color only — background band looked like a full-strip highlight when collapsed */
}
.insert-name:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:1px;
}
.insert-card.disabled{
  opacity:0.55;
}
.insert-card.disabled .insert-params{
  pointer-events:none;
  opacity:0.45;
}
/* Green / red status dot — margin-left:auto pins it (and × after) to the right */
.insert-enable{
  margin-left:auto;
  width:18px;
  height:18px;
  border-radius:50%;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.12s, opacity 0.12s;
}
.insert-enable::after{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c45c5c;
  box-shadow:0 0 0 1px rgba(0,0,0,0.25);
  transition:background 0.12s, box-shadow 0.12s;
}
.insert-enable.active::after{
  background:#6dba6d;
  box-shadow:0 0 6px rgba(109,186,109,0.45);
}
.insert-enable:hover{
  transform:scale(1.15);
  opacity:0.95;
}
.insert-enable:hover::after{
  box-shadow:0 0 0 2px rgba(255,255,255,0.12);
}
.insert-enable.active:hover::after{
  box-shadow:0 0 8px rgba(109,186,109,0.55), 0 0 0 2px rgba(255,255,255,0.1);
}
.insert-remove{
  width:18px;
  height:18px;
  border:none;
  border-radius:4px;
  background:transparent;
  color:var(--text-muted);
  font-size:12px;
  line-height:1;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  transition:color 0.12s, background 0.12s;
}
.insert-remove:hover{
  color:#e07a7a;
  background:rgba(224,122,122,0.12);
}
.insert-params{
  display:flex;
  flex-wrap:wrap;
  align-items:center; /* dials + range thumbs share one mid-line */
  gap:8px 10px;
  padding-left:18px;
  /* room for hanging Dec captions under dials (not on the wrap) */
  padding-bottom:14px;
}
.insert-params .slider-pair{
  flex:1 1 120px;
  min-width:100px;
  align-items:center;
}
/* Rate / Cut / Tail / Time: longer track for fine control */
.insert-params .slider-pair.insert-param-wide{
  flex:1.6 1 140px;
  min-width:130px;
}
.insert-params .slider-pair.insert-param-short{
  flex:0.7 1 80px;
  min-width:72px;
  max-width:120px;
}
.insert-params .slider-pair label{
  width:28px;
}
/* Shared shape row (LFO etc.) — bordered chips */
.insert-mode-btns{
  display:flex;
  gap:4px;
  padding:0 4px 0 18px;
}
.insert-mode-btn{
  width:28px;
  height:22px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.08);
  background:none;
  color:var(--text-muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:all 0.15s;
}
.insert-mode-btn:hover{
  border-color:rgba(232,162,107,0.5);
  color:rgba(232,162,107,0.85);
}
.insert-mode-btn.active{
  background:rgba(232,162,107,0.2);
  border-color:var(--ember);
  color:var(--ember);
}

/* Bare shape / mode glyphs — only the active character is lit (no button chrome) */
.filter-mode-text,
.shape-glyph-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.filter-mode-text{ margin-right:2px; }
/* body-level shape rows (if any) keep a little left pad */
.shape-glyph-row:not(.lfo-shape-inline){
  padding:0 4px 2px 18px;
}
.filter-mode-glyph,
.shape-glyph{
  border:none;
  background:none;
  padding:0 2px;
  margin:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:15px;
  font-weight:500;
  line-height:1;
  color:var(--text-muted);
  opacity:0.35;
  cursor:pointer;
  transition:color 0.12s, opacity 0.12s;
}
.filter-mode-glyph:hover,
.shape-glyph:hover{
  opacity:0.7;
  color:var(--text-primary);
}
.filter-mode-glyph.active,
.shape-glyph.active{
  opacity:1;
  color:var(--ember);
}
/* Letter (R for random) is a capital letter styled like the effect title, not a bare glyph.
   No color here: the base .shape-glyph rules handle idle/hover/active (ember) states. */
.shape-glyph.random-glyph{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0 2px;
  /* R is a capital letter — nudge down to match the visual middle of the 15px glyph row */
  transform:translateY(1px);
}

/* Filter cutoff LFO enable (∿) — lit when modulating */
.filter-lfo-toggle{
  border:none;
  background:none;
  padding:0 3px;
  margin:0 0 0 2px;
  font-family:'IBM Plex Mono',monospace;
  font-size:15px;
  font-weight:500;
  line-height:1;
  color:var(--text-muted);
  opacity:0.35;
  cursor:pointer;
  flex-shrink:0;
  transition:color 0.12s, opacity 0.12s, text-shadow 0.12s;
}
.filter-lfo-toggle:hover{
  opacity:0.75;
  color:var(--text-primary);
}
.filter-lfo-toggle.active{
  opacity:1;
  color:#8eb6ff;
  text-shadow:0 0 10px rgba(100,149,237,0.55);
}
/* Freeze Hold latch — pill next to insert name */
.freeze-hold-btn{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.25);
  color:var(--text-muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:999px;
  cursor:pointer;
  flex-shrink:0;
  margin-left:4px;
  transition:border-color 0.12s, color 0.12s, background 0.12s, box-shadow 0.12s;
}
.freeze-hold-btn:hover{
  border-color:rgba(142,182,255,0.4);
  color:var(--text-primary);
}
.freeze-hold-btn.active{
  border-color:rgba(142,182,255,0.65);
  color:#8eb6ff;
  background:rgba(100,149,237,0.12);
  box-shadow:0 0 10px rgba(100,149,237,0.25);
}
.freeze-hold-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
/* Reverb room presets — Wash / Hall / Church / Cath */
.reverb-room-group{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-left:6px;
  flex-shrink:0;
  flex-wrap:wrap;
  max-width:100%;
}
.reverb-room-btn{
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.22);
  color:var(--text-muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:8px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:4px;
  cursor:pointer;
  transition:border-color 0.12s, color 0.12s, background 0.12s;
}
.reverb-room-btn:hover{
  border-color:rgba(200,180,140,0.4);
  color:var(--text-primary);
}
.reverb-room-btn.active{
  border-color:rgba(210,185,130,0.7);
  color:#e0c994;
  background:rgba(180,150,90,0.14);
  box-shadow:0 0 8px rgba(180,150,90,0.2);
}
.reverb-room-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
/* Chaos shape glyph on LFO header */
.shape-glyph.chaos-glyph{
  letter-spacing:0;
}
/* Right-click → Unlink LFO */
.lfo-unlink-menu{
  position:fixed;
  z-index:10000;
  min-width:9rem;
  padding:4px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(22,24,30,0.96);
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
  backdrop-filter:blur(8px);
}
.lfo-unlink-menu-item{
  display:block;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:var(--text-primary);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.03em;
  padding:7px 10px;
  border-radius:4px;
  cursor:pointer;
}
.lfo-unlink-menu-item:hover{
  background:rgba(100,149,237,0.18);
  color:#8eb6ff;
}
.insert-params .slider-pair.insert-param-dim,
.insert-params .insert-knob-wrap.insert-param-dim{
  opacity:0.4;
}

/*
 * Rotary knobs — flat dial + optional value readout.
 *
 * Alignment contract (everywhere: Mod row, insert FX, EQ width):
 * - Flex size of a knob is ONLY the dial (--ctrl-line).
 * - Caption/value hang under the dial (not in flex height).
 * - Parent rows use align-items:center so dial center = range thumb center.
 * - Caption clearance is padding on the ROW, not on the knob wrap.
 */
.rotary-knob{
  position:relative;
  display:block;
  width:var(--ctrl-line);
  /* Dial only for flex size; captions hang below (parent cell reserves --knob-caption) */
  height:var(--ctrl-line);
  flex-shrink:0;
  user-select:none;
  box-sizing:border-box;
  overflow:visible;
}
.rotary-knob-dial{
  width:var(--ctrl-line);
  height:var(--ctrl-line);
  border-radius:50%;
  position:relative;
  box-sizing:border-box;
  border:1px solid var(--border-strong);
  background:
    radial-gradient(circle at 40% 32%, rgba(255,255,255,0.06) 0%, transparent 55%),
    var(--panel-raised);
  cursor:ns-resize;
  touch-action:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  transition:border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.rotary-knob-dial:hover,
.rotary-knob-dial:focus-visible{
  border-color:var(--accent);
  background:
    radial-gradient(circle at 40% 32%, var(--accent-dim) 0%, transparent 60%),
    var(--panel-raised);
  outline:none;
  box-shadow:0 0 0 1px var(--accent-dim);
}
.rotary-knob-dial.dragging{
  border-color:var(--accent);
  background:
    radial-gradient(circle at 40% 32%, var(--accent-dim) 0%, transparent 55%),
    var(--panel-hover);
  box-shadow:0 0 12px var(--accent-dim);
}
/* Full-size layer that rotates; pointer stays fixed at top of rotor */
.rotary-knob-rotor{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.rotary-knob-pointer{
  position:absolute;
  left:50%;
  top:2px;
  width:2px;
  height:calc(var(--ctrl-line) * 0.32);
  min-height:5px;
  margin-left:-1px;
  border-radius:1px;
  background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
}
.rotary-knob-label{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin-top:4px;
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}
.rotary-knob-label:empty{
  display:none;
}
/* Value sits under label (label ~8px + 4px gap → start at 16px below dial) */
/* Values under knobs disabled (noise) — keep class for optional future debug */
.rotary-knob-value{
  display:none !important;
}
.ui-slider-value{
  display:none !important;
}
/*
 * Panel blocks — logical groups (Source / Tone / Mod / FX).
 * Panel knobs: one size (knob-grid--small) — Source, Tone, Sat/Tilt, Mod.
 */
.panel-block{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  flex-shrink:0;
  padding:12px 0 10px;
  border-top:1px solid var(--border);
  box-sizing:border-box;
}
.panel-block:first-of-type,
.track-controls > .compact-row + .panel-block,
.track-controls > .piano-roll + .panel-block{
  border-top:none;
  padding-top:6px;
}
.panel-block--source.is-empty + .panel-block{
  border-top:none;
  padding-top:6px;
}
.panel-block-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:14px;
}
.panel-block-label{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1;
}
/* Tone block label slightly stronger */
.panel-block--tone > .panel-block-head .panel-block-label{
  color:var(--text);
  opacity:0.72;
  letter-spacing:0.16em;
}
.panel-block--source.is-empty{
  display:none;
}
.panel-block--fx{
  border-top:1px solid var(--border);
  padding-top:12px;
}
/* Color row (Sat/Tilt) sits closer under Tone macros (same block) */
.panel-block--tone #colorKnobs{
  margin-top:2px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.04);
}

/* ---- Panel knob grid (one size: Source / Tone / Sat / Tilt / Mod) ---- */
.knob-grid{
  display:grid;
  width:100%;
  justify-items:center;
  align-items:start;
  box-sizing:border-box;
  padding-bottom:2px;
  overflow:visible;
}
.knob-grid--small{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  column-gap:12px;
  row-gap:12px;
  justify-items:center;
}

.knob-cell{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  box-sizing:border-box;
  overflow:visible;
}
.knob-cell .rotary-knob{
  width:var(--ctrl-line);
  height:var(--ctrl-line);
}

/* Panel dial — Sat/Tilt look (28px), used for all track panel knobs */
.knob-cell--small{
  max-width:var(--knob-cell-small);
  height:calc(var(--knob-small) + var(--knob-caption-small));
  min-height:calc(var(--knob-small) + var(--knob-caption-small));
  --ctrl-line:var(--knob-small);
  --knob-caption:var(--knob-caption-small);
}
.knob-cell--small .rotary-knob-label{ font-size:7px; letter-spacing:0.05em; }
.knob-cell--small .rotary-knob-dial{
  border-color:var(--border);
  background:var(--panel);
  box-shadow:none;
}
.knob-cell--small .rotary-knob-pointer{
  width:1.5px;
  box-shadow:none;
  opacity:0.9;
}

/* Legacy host alias — prefer knob-cell--small */
.macro-knob-host{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  max-width:var(--knob-cell-small);
  height:calc(var(--knob-small) + var(--knob-caption-small));
  min-height:calc(var(--knob-small) + var(--knob-caption-small));
  --ctrl-line:var(--knob-small);
  overflow:visible;
}
.macro-knob-host .rotary-knob{
  width:var(--knob-small);
  height:var(--knob-small);
}
.field-input{
  background:var(--panel-raised);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:5px 8px;
  font-family:var(--font-ui);
  font-size:11px;
}
/* js/ui/slider — level/mix horizontal */
.level-slider-host{
  width:100%;
  flex-shrink:0;
  min-height:28px;
  display:flex;
  align-items:center;
}
.ui-slider{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
}
.ui-slider label{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  flex-shrink:0;
  width:28px;
}
.ui-slider-track{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
}
.ui-slider-track input[type="range"]{
  width:100%;
}
.ui-slider-value{
  font-family:var(--font-mono);
  font-size:9px;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  opacity:0.85;
  flex-shrink:0;
  min-width:2.4em;
  text-align:right;
}
.ui-slider.lfo-modulating label,
.ui-slider.lfo-modulating .ui-slider-value{
  color:var(--mod);
}
.insert-ui-slider-wrap{
  flex:1 1 100%;
  min-width:0;
  width:100%;
}
.insert-params .insert-ui-slider-wrap .ui-slider{
  width:100%;
}
/* Insert motion graphics — LFO wave/chaos strip */
.insert-viz{
  width:100%;
  height:72px;
  min-height:72px;
  max-height:72px;
  margin:2px 0 6px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:rgba(0,0,0,0.28);
  overflow:hidden;
  flex-shrink:0;
  box-sizing:border-box;
}
.insert-viz-canvas{
  display:block;
  width:100%;
  height:100%;
}
.insert-card.disabled .insert-viz{
  opacity:0.35;
}
@media (prefers-reduced-motion: reduce){
  .insert-viz{ display:none; }
}
/* Host next to horizontal ranges — same height as dial, no extra padding */
.insert-knob-wrap,
.mod-rotary-host{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  flex-shrink:0;
  height:var(--ctrl-line);
  min-height:var(--ctrl-line);
  max-height:var(--ctrl-line);
  padding:0 3px;
  margin:0;
  box-sizing:border-box;
  overflow:visible; /* caption may hang below */
}
/* Linked LFO: cool mod blue */
.rotary-knob.lfo-modulating .rotary-knob-dial{
  border-color:var(--mod);
  background:var(--mod-dim);
  box-shadow:0 0 10px var(--mod-dim);
}
.rotary-knob.lfo-modulating .rotary-knob-pointer{
  background:var(--mod);
  box-shadow:0 0 6px var(--mod);
}
.rotary-knob.lfo-modulating .rotary-knob-label,
.rotary-knob.lfo-modulating .rotary-knob-value{
  color:var(--mod);
}

/* AM shapes — in Mod header next to title (one row, saves vertical space) */
.panel-block-head--mod{
  align-items:center;
  gap:12px;
}
.panel-block-head--mod .panel-block-label{
  flex-shrink:0;
}
.am-shapes{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  height:auto;
  min-height:0;
  max-height:none;
  margin:0;
  margin-left:auto;
  padding:0;
  box-sizing:border-box;
}
.am-shape-btn{
  border:none;
  background:none;
  padding:4px 6px;
  margin:0;
  width:auto;
  height:auto;
  min-width:22px;
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:500;
  line-height:1;
  color:var(--muted);
  opacity:0.38;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  transition:color 0.12s, opacity 0.12s, background 0.12s;
}
.am-shape-btn:hover{
  opacity:0.8;
  color:var(--text);
  background:var(--accent-dim);
}
.am-shape-btn.active{
  opacity:1;
  color:var(--accent);
  background:var(--accent-dim);
  text-shadow:0 0 10px var(--accent-glow);
}

/* LFO shapes + link sit in card header (one row with title) */
.insert-card-head .lfo-shape-inline{
  padding:0;
  gap:6px;
  flex-shrink:0;
}
.insert-card-head .lfo-link-inline{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  flex:1 1 auto;
  padding:0;
  margin:0 2px;
  /* don't steal the margin-left:auto from enable */
}
.insert-card-head .filter-mode-text{
  flex-shrink:0;
}
.insert-card-head .lfo-link-label{
  font-size:9px;
}
.lfo-link-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.lfo-link-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(100,149,237,0.55);
  background:transparent;
  padding:0;
  cursor:pointer;
  flex-shrink:0;
  transition:all 0.15s;
  box-shadow:none;
}
.lfo-link-dot:hover{
  border-color:#7aa2f0;
  box-shadow:0 0 8px rgba(100,149,237,0.45);
}
.lfo-link-dot.assigned{
  background:#6495ed;
  border-color:#8eb6ff;
  box-shadow:0 0 8px rgba(100,149,237,0.5);
}
.lfo-link-dot.linking{
  background:rgba(100,149,237,0.35);
  border-color:#a8c5ff;
  box-shadow:0 0 12px rgba(100,149,237,0.7);
  animation:lfo-link-pulse 0.9s ease-in-out infinite;
}
@keyframes lfo-link-pulse{
  0%,100%{ opacity:1; box-shadow:0 0 8px rgba(100,149,237,0.55); }
  50%{ opacity:0.72; box-shadow:0 0 16px rgba(100,149,237,0.9); }
}
.lfo-link-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.04em;
  color:var(--text-muted);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* While linking: highlight source sliders that can be modulated.
   outline-offset 0 + a small glow — a ring that hugs the control so it
   never overlaps adjacent rows or scroll containers (no visible movement). */
body.lfo-link-mode .mod-targetable{
  outline:1px solid rgba(100,149,237,0.55);
  outline-offset:0;
  box-shadow:0 0 8px rgba(100,149,237,0.2);
  cursor:crosshair !important;
}
body.lfo-link-mode .mod-targetable:hover{
  outline-color:#8eb6ff;
  box-shadow:0 0 12px rgba(100,149,237,0.4);
}

/* Linked LFO: control tracks modulated value */
input[type="range"].lfo-modulating{
  background:rgba(100,149,237,0.35);
}
input[type="range"].lfo-modulating::-webkit-slider-thumb{
  background:#8eb6ff;
  box-shadow:
    0 0 0 3px rgba(100,149,237,0.35),
    0 0 14px rgba(100,149,237,0.55);
  transition: box-shadow 0.05s linear;
}
input[type="range"].lfo-modulating::-moz-range-thumb{
  background:#8eb6ff;
  box-shadow:
    0 0 0 3px rgba(100,149,237,0.35),
    0 0 14px rgba(100,149,237,0.55);
}

/* Dense knob rows (tone / color / source params) */
.knob-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px 12px;
  width:100%;
  padding:2px 0 4px;
}
/*
 * TRACK / SOURCE PARAMETERS — only section allowed to change height
 * ----------------------------------------------------------------
 * Sizes to content (grows for granular/ring, collapses when empty).
 * Everything else in the panel is fixed chrome. Never display:none
 * mid-rebuild — use replaceChildren + .is-empty (height:0 when no knobs).
 */
.source-params{
  display:block;
  width:100%;
  padding:6px 0 4px;
  height:auto;
  min-height:0;
  max-height:none;
  overflow:visible;
  box-sizing:border-box;
  flex-shrink:0;
}
.source-params.is-empty{
  /* No gap between piano and Bri/Move when source has no family knobs */
  height:0;
  min-height:0;
  max-height:0;
  padding:0;
  margin:0;
  gap:0;
  overflow:hidden;
  pointer-events:none;
}
/* Source family knobs: same panel size as Tone / Sat / Tilt / Mod */
.source-param-knobs{
  padding:0;
  min-height:0;
}
.source-param-host .rotary-knob-label{
  max-width:48px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.source-params .rotary-knob,
.knob-row .rotary-knob{
  flex:0 0 auto;
}
body.lfo-link-mode .rotary-knob.mod-targetable .rotary-knob-dial{
  outline:1px solid rgba(100,149,237,0.55);
  outline-offset:0;
  box-shadow:0 0 8px rgba(100,149,237,0.2);
  cursor:crosshair !important;
}
body.lfo-link-mode .rotary-knob.mod-targetable:hover .rotary-knob-dial{
  outline-color:#8eb6ff;
  box-shadow:0 0 12px rgba(100,149,237,0.4);
}
.track-vol-row{
  margin-top:2px;
}

/* add-effect picker (same family as chord menu) */
.insert-menu{
  position:fixed;
  z-index:10000;
  padding:4px;
  border-radius:8px;
  background:#1e1a28;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 12px 40px rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:132px;
}
.insert-menu.hidden{ display:none; }
.insert-menu-item{
  display:block;
  width:100%;
  text-align:left;
  padding:7px 12px;
  border:none;
  border-radius:5px;
  background:transparent;
  color:var(--text-primary);
  font-family:'Manrope',sans-serif;
  font-size:12px;
  cursor:pointer;
  letter-spacing:0.02em;
}
.insert-menu-item:hover{
  background:rgba(232,162,107,0.15);
  color:var(--ember);
}

/* ---- compact rows ---- */
.compact-row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}
.compact-select{
  flex:1;
  font-size:11px;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  min-width:0;
  font-family:var(--font-ui);
}
.compact-select-sm{
  flex:0 0 42px;
  text-align:center;
  padding:6px 2px;
}
.compact-row select{
  background:var(--panel-raised);
  color:var(--text);
  border:1px solid var(--border);
  cursor:pointer;
  transition:border-color 0.12s;
}
.compact-row select:hover{ border-color:var(--border-strong); }
.compact-row select:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-dim);
}

.semitone-inline{
  display:flex;
  align-items:center;
  gap:3px;
  flex-shrink:0;
  /* sits where root note dropdown was */
  min-width:72px;
  justify-content:center;
}
.semitone-btn{
  width:22px;
  height:22px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:none;
  color:var(--text-muted);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:color 0.12s, transform 0.12s;
  flex-shrink:0;
}
.semitone-btn:hover{ color:var(--ember); }
.semitone-btn:active{ transform:scale(0.92); }
.semitone-display{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--text-primary);
  min-width:24px;
  text-align:center;
  cursor:pointer;
  user-select:none;
}
.semitone-display:hover{ color:var(--ember); }
.semitone-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.05em;
  color:var(--text-muted);
}
.sliders-row{
  gap:12px;
}
/* (source-params base + min-height: see block above with .is-empty) */
.source-params .slider-pair{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 calc(50% - 8px);
  min-width:120px;
}
.source-params .slider-pair label{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.05em;
  color:var(--text-muted);
  text-transform:uppercase;
  white-space:nowrap;
  flex-shrink:0;
  width:36px;
}
.source-params .slider-pair input[type="range"]{
  flex:1;
  min-width:0;
}
.slider-pair{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
}
.slider-pair.wide{ flex:2; }
.slider-pair label{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.05em;
  color:var(--text-muted);
  text-transform:uppercase;
  white-space:nowrap;
  flex-shrink:0;
  width:28px;
}
.slider-pair input[type="range"]{
  flex:1;
  min-width:0;
}

/* legacy mod-row classes unused */
.mod-row{ display:contents; }

/* ---- EQ (8-band + width on peaking) ---- */
.eq-row{
  display:flex;
  justify-content:space-between;
  gap:2px;
  width:100%;
}
.eq-band{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0; /* tight: label → fader → dial; no text between fader and dial */
  flex:1 1 0;
  min-width:0;
}
/* Band name above fader — fixed height so all columns share one baseline */
.eq-band .eq-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:8px;
  letter-spacing:0.02em;
  color:var(--text-muted);
  text-transform:uppercase;
  text-align:center;
  line-height:1;
  height:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-bottom:2px;
}
/*
 * Vertical fader: track length = wrap height so the line ends flush at the
 * bottom of this box — knobs sit clearly below that edge, not “inside” padding.
 */
.eq-slider-wrap{
  height:68px;
  width:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.eq-slider-wrap input[type="range"]{
  width:68px;
  height:2px;
  margin:0;
  transform:rotate(-90deg);
  transform-origin:center center;
}
.eq-slider-wrap input[type="range"]::-webkit-slider-thumb{
  width:10px;
  height:10px;
  background:var(--accent);
  box-shadow:0 0 0 2px var(--accent-dim);
}
.eq-slider-wrap input[type="range"]::-moz-range-thumb{
  width:10px;
  height:10px;
  background:var(--accent);
  box-shadow:0 0 0 2px var(--accent-dim);
}
/* Width dial under vertical fader — same column axis; dial-only (no caption) */
.eq-width-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:var(--ctrl-line);
  margin-top:8px;
  flex-shrink:0;
}
.eq-width-wrap .rotary-knob{
  width:var(--ctrl-line);
  height:var(--ctrl-line);
}
.eq-width-wrap .rotary-knob-label{
  display:none !important;
}
.eq-width-spacer{
  width:24px;
  height:var(--ctrl-line);
  margin-top:8px;
  flex-shrink:0;
}
.insert-eq-row{
  width:100%;
  padding:2px 2px 4px 8px;
  box-sizing:border-box;
}

/* Curve EQ — Ableton-style response canvas (fixed height) */
.eq-curve-wrap{
  width:100%;
  padding:4px 8px 6px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.eq-curve-canvas{
  display:block;
  width:100%;
  height:132px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.22);
  cursor:crosshair;
  touch-action:none;
  flex-shrink:0;
}
.eq-curve-canvas:focus-visible{
  outline:2px solid rgba(232,162,107,0.45);
  outline-offset:1px;
}
.eq-curve-readout{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.04em;
  color:var(--text-muted);
  min-height:12px;
  line-height:1.2;
  padding:0 2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  user-select:none;
}
.eq-curve-modes{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:0 2px;
}
.eq-curve-mode-group{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.eq-curve-mode-lab{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.06em;
  color:var(--text-muted);
  text-transform:uppercase;
}
.eq-curve-mode-btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.04em;
  padding:2px 7px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.2);
  color:var(--text-muted);
  cursor:pointer;
  transition:border-color 0.12s, color 0.12s, background 0.12s;
}
.eq-curve-mode-btn:hover{
  border-color:rgba(232,162,107,0.4);
  color:var(--text-primary);
}
.eq-curve-mode-btn.active{
  border-color:rgba(232,162,107,0.55);
  color:#e8a26b;
  background:rgba(232,162,107,0.12);
}
.eq-curve-mode-group:last-child .eq-curve-mode-btn.active{
  border-color:rgba(142,182,255,0.55);
  color:#8eb6ff;
  background:rgba(142,182,255,0.12);
}

.title{
  font-family:'Fraunces',serif;
  font-weight:450;
  font-size:15px;
  letter-spacing:0.02em;
  color:var(--text-muted);
  position:absolute;
  top:-46px;
}

@media (prefers-reduced-motion: reduce){
  .aura{ transition:none; }
  .track-dot{ animation:none; }
}