/* ═══════════════════════════════════════════════
   BH Beat Studio  ·  [beat_studio] shortcode
   Scoped under #bh-bs so nothing leaks.
   Dark visual language shared with Vocal Studio:
   accent #22B6FF, DM Mono / Syne / Manrope stacks.
   ═══════════════════════════════════════════════ */

#bh-bs{
  /* palette / tokens (mirror vocal-studio.css) */
  --cb:#22B6FF; --cb-deep:#1A96E8; --cb-light:#4AB8F5; --cb-tint:#7FD0FF;
  --cbo:rgba(34,182,255,.14); --cbg:rgba(34,182,255,.06);
  --cr:#ef4444; --crh:#f87171;
  --bg:#0a0910; --panel:rgba(255,255,255,.02);
  --sur:rgba(255,255,255,.035); --sur2:rgba(255,255,255,.06);
  --bdr:rgba(255,255,255,.08); --bdr2:rgba(255,255,255,.14);
  --muted:rgba(255,255,255,.34); --txt:rgba(255,255,255,.86);
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --disp:'Syne',system-ui,sans-serif;
  --sans:'Manrope',system-ui,sans-serif;
  --r:12px; --r-sm:7px;

  box-sizing:border-box;
  width:100%;
  max-width:1040px;      /* cap the sprawl on desktop so pads stay ~channel-rack */
  margin-inline:auto;    /* and center it */
  padding:20px;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(34,182,255,.07) 0%, transparent 55%),
    var(--bg);
  border:1px solid var(--bdr);
  border-radius:16px;
  color:var(--txt);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow:hidden; /* never let inner grids push page-body scroll */
}
#bh-bs *,#bh-bs *::before,#bh-bs *::after{box-sizing:border-box;}

/* optional heading if the markup ships one */
#bh-bs .bh-bs-title{
  margin:0 0 14px;
  font-family:var(--disp);
  font-weight:800;
  font-size:20px;
  letter-spacing:-.01em;
  color:#fff;
}
#bh-bs .bh-bs-sub{
  margin:-8px 0 16px;
  font-size:11px;
  letter-spacing:.05em;
  color:var(--muted);
}

/* ─────────────────────────────────────────────
   Transport bar
   ───────────────────────────────────────────── */
#bh-bs .bh-bs-transport,
#bh-bs .bh-bs-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  margin-bottom:16px;
  background:var(--panel);
  border:1px solid var(--bdr);
  border-radius:var(--r);
}

/* labels around the number inputs */
#bh-bs .bh-bs-transport label,
#bh-bs .bh-bs-bar label,
#bh-bs .bh-bs-field{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}

/* Base for EVERY themed button (.bh-bs-btn). `button.bh-bs-btn` (0,1,1,1) beats
   the WP theme's `#main button` (0,1,0,1), so generic buttons — Save, Clear,
   cloud, publish — get the dark rounded style instead of the native grey button
   the theme was forcing. Per-button id rules below layer accent colours on top. */
#bh-bs button.bh-bs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:0 18px;
  border:1px solid var(--bdr, rgba(255,255,255,.14)); border-radius:22px;
  background:var(--sur, rgba(255,255,255,.05)); color:#f4f4f5;
  font-family:var(--mono, 'DM Mono', ui-monospace, monospace);
  font-size:12px; font-weight:700; letter-spacing:.06em; cursor:pointer;
  transition:background .14s ease, border-color .14s ease, transform .14s ease;
}
#bh-bs button.bh-bs-btn:hover{ border-color:var(--bdr2, rgba(255,255,255,.26)); }
#bh-bs button.bh-bs-btn:active{ transform:translateY(1px); }

/* generic buttons in the transport */
#bh-bs button#bh-bs-play,
#bh-bs button#bh-bs-stop,
#bh-bs button#bh-bs-export{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 20px;
  border:1px solid transparent;
  border-radius:22px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  cursor:pointer;
  transition:transform .14s ease, opacity .14s ease,
             background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
#bh-bs button#bh-bs-play:active,
#bh-bs button#bh-bs-stop:active,
#bh-bs button#bh-bs-export:active{transform:translateY(1px);}

/* Play — accent gradient */
#bh-bs button#bh-bs-play{
  color:#fff;
  background:linear-gradient(135deg,var(--cb-light) 0%,var(--cb-deep) 100%);
  box-shadow:0 4px 18px rgba(34,182,255,.32);
}
#bh-bs button#bh-bs-play:hover{opacity:.9;transform:translateY(-1px);}
#bh-bs button#bh-bs-play.is-playing{
  background:linear-gradient(135deg,var(--cb-deep) 0%,#0f6fb0 100%);
}

/* Stop — neutral surface */
#bh-bs button#bh-bs-stop{
  color:var(--txt);
  background:var(--sur);
  border-color:var(--bdr2);
}
#bh-bs button#bh-bs-stop:hover{
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.4);
  color:var(--crh);
}

/* Export — outline accent */
#bh-bs button#bh-bs-export{
  color:var(--cb-tint);
  background:transparent;
  border-color:rgba(34,182,255,.35);
}
#bh-bs button#bh-bs-export:hover{
  background:var(--cbo);
  border-color:var(--cb);
  color:#fff;
}
#bh-bs button#bh-bs-export:disabled{
  opacity:.45;cursor:not-allowed;
}

/* number inputs (tempo / bars) + wave select */
#bh-bs input#bh-bs-tempo,
#bh-bs input#bh-bs-bars,
#bh-bs select#bh-bs-wave{
  min-height:38px;
  padding:0 12px;
  background:var(--sur);
  border:1px solid var(--bdr);
  border-radius:9px;
  color:#fff;
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
#bh-bs input#bh-bs-tempo,
#bh-bs input#bh-bs-bars{
  width:66px;
  text-align:center;
}
#bh-bs input#bh-bs-tempo:focus,
#bh-bs input#bh-bs-bars:focus,
#bh-bs select#bh-bs-wave:focus{
  outline:none;
  border-color:var(--cb);
  box-shadow:0 0 0 3px var(--cbo);
  background:rgba(34,182,255,.06);
}

/* wave selector — custom caret, mono */
#bh-bs select#bh-bs-wave{
  padding-right:32px;
  min-width:132px;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237FD0FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
}
#bh-bs select#bh-bs-wave option{
  background:#12111a;color:#fff;
}

/* ─────────────────────────────────────────────
   Sequencer sections
   ───────────────────────────────────────────── */
#bh-bs .bh-bs-section{
  padding:14px;
  margin-bottom:14px;
  background:var(--panel);
  border:1px solid var(--bdr);
  border-radius:var(--r);
}
#bh-bs .bh-bs-section-label,
#bh-bs .bh-bs-heading{
  margin:0 0 10px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cb-tint);
}

/* ─────────────────────────────────────────────
   Drum grid  ·  .bh-bs-drums > .bh-bs-row[data-drum]
   Row = label + 16 .bh-bs-cell[data-step]
   ───────────────────────────────────────────── */
#bh-bs .bh-bs-drums{
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-x:auto;               /* horizontal scroll on small screens */
  -webkit-overflow-scrolling:touch;
  /* framed as a panel (channel-rack look) so it reads as its own instrument */
  padding:12px;
  margin-bottom:14px;
  background:var(--panel);
  border:1px solid var(--bdr);
  border-radius:var(--r);
}
#bh-bs .bh-bs-row{
  display:grid;
  grid-template-columns:72px repeat(16, minmax(30px,1fr));
  gap:5px;
  align-items:center;
  min-width:max-content;         /* keeps all rows scrolling in sync */
}
/* drum name label */
#bh-bs .bh-bs-row > label,
#bh-bs .bh-bs-row-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  padding-right:4px;
}
#bh-bs .bh-bs-row[data-drum="kick"]  > label{color:#ff8a5c;}
#bh-bs .bh-bs-row[data-drum="snare"] > label{color:#c58cff;}
#bh-bs .bh-bs-row[data-drum="hat"]   > label{color:var(--cb-tint);}

/* step cell */
#bh-bs .bh-bs-cell{
  height:38px;
  min-width:30px;
  padding:0;
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  background:var(--sur);
  cursor:pointer;
  transition:background .1s ease, border-color .1s ease,
             box-shadow .1s ease, transform .06s ease;
}
#bh-bs .bh-bs-cell:hover{
  background:var(--sur2);
  border-color:var(--bdr2);
}
#bh-bs .bh-bs-cell:active{transform:scale(.94);}

/* beat-group shading — every 4 steps */
#bh-bs .bh-bs-cell[data-step="4"],
#bh-bs .bh-bs-cell[data-step="5"],
#bh-bs .bh-bs-cell[data-step="6"],
#bh-bs .bh-bs-cell[data-step="7"],
#bh-bs .bh-bs-cell[data-step="12"],
#bh-bs .bh-bs-cell[data-step="13"],
#bh-bs .bh-bs-cell[data-step="14"],
#bh-bs .bh-bs-cell[data-step="15"]{
  background:rgba(255,255,255,.055);
}
/* downbeat divider on group starts */
#bh-bs .bh-bs-cell[data-step="0"],
#bh-bs .bh-bs-cell[data-step="4"],
#bh-bs .bh-bs-cell[data-step="8"],
#bh-bs .bh-bs-cell[data-step="12"]{
  box-shadow:inset 2px 0 0 rgba(34,182,255,.18);
}

/* active cell — accent fill */
#bh-bs .bh-bs-cell.is-on{
  background:linear-gradient(160deg,var(--cb-light) 0%,var(--cb-deep) 100%);
  border-color:var(--cb-light);
  box-shadow:0 0 0 1px rgba(34,182,255,.35), 0 3px 12px rgba(34,182,255,.28);
}
#bh-bs .bh-bs-cell.is-on:hover{filter:brightness(1.08);background:linear-gradient(160deg,var(--cb-light) 0%,var(--cb-deep) 100%);}

/* ─────────────────────────────────────────────
   Piano roll  ·  .bh-bs-roll (flat 16-col grid)
   13 pitch rows × 16 .bh-bs-note[data-note][data-step]
   ───────────────────────────────────────────── */
#bh-bs .bh-bs-roll{
  display:grid;
  grid-template-columns:repeat(16, minmax(30px,1fr));
  gap:4px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px;
  background:rgba(0,0,0,.22);
  border:1px solid var(--bdr);
  border-radius:var(--r);
}
#bh-bs .bh-bs-note{
  height:30px;
  min-width:30px;
  padding:0;
  border:1px solid var(--bdr);
  border-radius:5px;
  background:var(--sur);        /* white-key default */
  cursor:pointer;
  transition:background .1s ease, border-color .1s ease,
             box-shadow .1s ease, transform .06s ease;
}
#bh-bs .bh-bs-note:hover{background:var(--sur2);border-color:var(--bdr2);}
#bh-bs .bh-bs-note:active{transform:scale(.92);}

/* black-key row hinting (C#,D#,F#,G#,A# → midi 61,63,66,68,70) */
#bh-bs .bh-bs-note[data-note="61"],
#bh-bs .bh-bs-note[data-note="63"],
#bh-bs .bh-bs-note[data-note="66"],
#bh-bs .bh-bs-note[data-note="68"],
#bh-bs .bh-bs-note[data-note="70"]{
  background:rgba(0,0,0,.35);
  border-color:rgba(255,255,255,.05);
}
#bh-bs .bh-bs-note[data-note="61"]:hover,
#bh-bs .bh-bs-note[data-note="63"]:hover,
#bh-bs .bh-bs-note[data-note="66"]:hover,
#bh-bs .bh-bs-note[data-note="68"]:hover,
#bh-bs .bh-bs-note[data-note="70"]:hover{background:rgba(255,255,255,.06);}

/* octave anchors (C = midi 60 & 72) get a faint accent tick */
#bh-bs .bh-bs-note[data-note="60"],
#bh-bs .bh-bs-note[data-note="72"]{
  box-shadow:inset 0 -2px 0 rgba(34,182,255,.22);
}

/* beat-group shading in the roll — every 4 steps */
#bh-bs .bh-bs-note[data-step="4"],
#bh-bs .bh-bs-note[data-step="5"],
#bh-bs .bh-bs-note[data-step="6"],
#bh-bs .bh-bs-note[data-step="7"],
#bh-bs .bh-bs-note[data-step="12"],
#bh-bs .bh-bs-note[data-step="13"],
#bh-bs .bh-bs-note[data-step="14"],
#bh-bs .bh-bs-note[data-step="15"]{
  box-shadow:inset 0 0 0 99px rgba(255,255,255,.03);
}

/* active note — accent fill */
#bh-bs .bh-bs-note.is-on{
  background:linear-gradient(160deg,var(--cb-tint) 0%,var(--cb) 100%);
  border-color:var(--cb-tint);
  box-shadow:0 0 0 1px rgba(34,182,255,.4), 0 3px 12px rgba(34,182,255,.3);
}
#bh-bs .bh-bs-note.is-on:hover{filter:brightness(1.08);background:linear-gradient(160deg,var(--cb-tint) 0%,var(--cb) 100%);}

/* ─────────────────────────────────────────────
   Playhead column highlight (JS toggles .bh-bs-playhead)
   ───────────────────────────────────────────── */
#bh-bs .bh-bs-cell.bh-bs-playhead,
#bh-bs .bh-bs-note.bh-bs-playhead{
  border-color:rgba(127,208,255,.6);
  box-shadow:0 0 0 1px rgba(127,208,255,.45), 0 0 14px rgba(34,182,255,.4);
}
#bh-bs .bh-bs-cell.bh-bs-playhead:not(.is-on){
  background:rgba(127,208,255,.14);
}
#bh-bs .bh-bs-note.bh-bs-playhead:not(.is-on){
  background:rgba(127,208,255,.12);
}

/* ─────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────── */
@media (max-width:640px){
  #bh-bs{padding:14px;border-radius:12px;}
  #bh-bs .bh-bs-transport,
  #bh-bs .bh-bs-bar{padding:10px;gap:8px;}
  #bh-bs button#bh-bs-play,
  #bh-bs button#bh-bs-stop,
  #bh-bs button#bh-bs-export{padding:0 16px;min-height:38px;font-size:11px;}
}

/* keyboard focus visibility for all interactive controls */
#bh-bs .bh-bs-cell:focus-visible,
#bh-bs .bh-bs-note:focus-visible,
#bh-bs button#bh-bs-play:focus-visible,
#bh-bs button#bh-bs-stop:focus-visible,
#bh-bs button#bh-bs-export:focus-visible{
  outline:2px solid var(--cb-tint);
  outline-offset:2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 2 layout correction + MIDI Genius bar.
   The markup wraps each row's step buttons in a .bh-bs-cells element and labels
   rows with .bh-bs-rowlabel / .bh-bs-notelabel; the piano-roll now spans TWO
   octaves (midi 48..72). Earlier rules put the 16-col grid directly on
   .bh-bs-row / .bh-bs-roll and targeted `> label` / .bh-bs-row-label — these
   overrides restore the real structure so the grids render and the tall roll
   scrolls. (Being later in the file, they win at equal specificity.)
   ═══════════════════════════════════════════════════════════════════════════ */
#bh-bs .bh-bs-row,
#bh-bs .bh-bs-noterow{ display:flex; align-items:center; gap:8px; min-width:0; }

#bh-bs .bh-bs-cells{
  display:grid;
  grid-template-columns:repeat(16, minmax(28px, 1fr));
  gap:4px; flex:1 1 auto; min-width:0;
}

#bh-bs .bh-bs-rowlabel,
#bh-bs .bh-bs-notelabel{
  flex:0 0 62px; width:62px;
  font:600 11px/1 'DM Mono', ui-monospace, monospace;
  color:var(--muted, rgba(244,244,245,.55));
  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#bh-bs .bh-bs-row[data-drum="kick"]  .bh-bs-rowlabel{ color:#ff8a5c; }
#bh-bs .bh-bs-row[data-drum="snare"] .bh-bs-rowlabel{ color:#c58cff; }
#bh-bs .bh-bs-row[data-drum="hat"]   .bh-bs-rowlabel{ color:var(--cb-tint, #5ad0ff); }

/* piano-roll is a vertical stack of note rows; scrolls when tall (2 octaves) */
#bh-bs .bh-bs-roll{
  display:flex; flex-direction:column; gap:4px;
  max-height:340px; overflow-y:auto; overflow-x:auto;
}
/* black-key row hint — pitch-class based, covers the whole 48..72 range */
#bh-bs .bh-bs-noterow.is-black{ background:rgba(0,0,0,.24); border-radius:6px; }
#bh-bs .bh-bs-noterow.is-black .bh-bs-note{ background:rgba(0,0,0,.30); }

/* MIDI Genius "Generate melody" bar */
#bh-bs .bh-bs-gen{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:2px 0 6px; }
#bh-bs .bh-bs-generate{
  background:linear-gradient(135deg, #22B6FF, #7c5cff);
  color:#04121c; font-weight:700; border:0;
}
#bh-bs .bh-bs-generate:disabled{ opacity:.55; cursor:progress; }
#bh-bs .bh-bs-gen-status{
  font:500 12px/1.35 'DM Mono', ui-monospace, monospace;
  color:var(--muted, rgba(244,244,245,.6));
}

/* Publish-to-community bar (Phase 3) */
#bh-bs .bh-bs-publish{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
#bh-bs .bh-bs-title{
  flex:1 1 220px; min-width:160px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12); border-radius:8px;
  color:#f4f4f5; padding:9px 12px;
  font:500 13px/1.2 'DM Mono', ui-monospace, monospace;
}
#bh-bs .bh-bs-title:focus{ outline:2px solid var(--cb-tint, #5ad0ff); outline-offset:1px; }
#bh-bs .bh-bs-publish-btn{
  background:linear-gradient(135deg, #34d399, #22B6FF);
  color:#04121c; font-weight:700; border:0;
}
#bh-bs .bh-bs-publish-btn:disabled{ opacity:.55; cursor:progress; }
#bh-bs .bh-bs-publish-link{ color:var(--cb-tint, #5ad0ff); text-decoration:underline; }

/* Drag-paint: cells own the touch gesture so a swipe paints instead of scrolls
   (Phase 4). Scroll the roll by dragging its labels/gaps, not the pads. */
/* Let touch swipe-scroll the grid (mouse drag-paint is unaffected; beat-studio.js
   also skips drag-paint on touch so a tap toggles and a swipe scrolls). */
#bh-bs .bh-bs-cell, #bh-bs .bh-bs-note{ touch-action:pan-x pan-y; }

/* Expanded kit row-label colors (Phase 4) */
#bh-bs .bh-bs-row[data-drum="openhat"] .bh-bs-rowlabel{ color:#7cf5c0; }
#bh-bs .bh-bs-row[data-drum="clap"]    .bh-bs-rowlabel{ color:#ffd166; }

/* Project persistence bar (save / load / clear) */
#bh-bs .bh-bs-projects{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:2px 0 12px; }
#bh-bs .bh-bs-proj-name{
  flex:0 1 200px; min-width:120px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12); border-radius:8px;
  color:#f4f4f5; padding:8px 11px;
  font:500 13px/1.2 'DM Mono', ui-monospace, monospace;
}
#bh-bs .bh-bs-proj-name:focus{ outline:2px solid var(--cb-tint, #5ad0ff); outline-offset:1px; }
#bh-bs .bh-bs-clear{ background:transparent; border:1px solid rgba(255,255,255,.16); color:#f4f4f5; }
#bh-bs .bh-bs-clear:hover{ border-color:rgba(255,255,255,.32); }

/* Per-track mute / solo. Fixed-width gutter (matched by an invisible spacer on
   note rows) so drum columns line up with the piano-roll columns. */
#bh-bs .bh-bs-rowctl{ display:flex; align-items:center; gap:4px; flex:0 0 58px; }
#bh-bs .bh-bs-rollhdr{ display:flex; align-items:center; gap:8px; margin:0 0 8px; }
#bh-bs .bh-bs-ms{
  /* !important + border-box beats the theme's global button padding, which was
     inflating these to ~44px and blowing out the fixed control gutter. */
  box-sizing:border-box;
  width:26px !important; height:26px !important;
  min-width:0 !important; min-height:0 !important; padding:0 !important;
  flex:0 0 auto; border-radius:5px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03);
  color:rgba(244,244,245,.6);
  font:700 11px/1 'DM Mono', ui-monospace, monospace; cursor:pointer;
}
#bh-bs .bh-bs-ms:hover{ border-color:rgba(255,255,255,.28); color:#f4f4f5; }
#bh-bs .bh-bs-row.is-muted .bh-bs-ms[data-act="mute"],
#bh-bs .bh-bs-rollhdr.is-muted .bh-bs-ms[data-act="mute"]{ background:#ff5c5c; border-color:#ff5c5c; color:#160404; }
#bh-bs .bh-bs-row.is-soloed .bh-bs-ms-solo,
#bh-bs .bh-bs-rollhdr.is-soloed .bh-bs-ms-solo{ background:#ffd166; border-color:#ffd166; color:#161200; }
#bh-bs .bh-bs-row.is-muted .bh-bs-cells{ opacity:.4; }

/* ── GarageBand track lanes: inline per-channel fader in the lane header ───────
   The lane header groups label + M/S + a volume fader. Its total width MUST equal
   the note-row gutter (label + gap + rowctl) so the 16 drum columns stay aligned
   with the 16 piano-roll columns. Fader shows ≥720px; below that only label + M/S,
   and ≤640 the header dissolves (display:contents) back into the phone gutter. */
#bh-bs .bh-bs-lanehd{ display:flex; align-items:center; gap:8px; min-width:0; }
#bh-bs .bh-bs-lanevol{ display:none; }
@media (min-width:720px){
  #bh-bs .bh-bs-lanehd{ flex-direction:column; align-items:stretch; gap:5px; flex:0 0 128px; }
  #bh-bs .bh-bs-lanehd .bh-bs-rowlabel{ flex:none; width:auto; text-align:left; }
  #bh-bs .bh-bs-lanehd .bh-bs-rowctl{ flex:none; width:100%; flex-direction:row; justify-content:flex-start; gap:6px; }
  #bh-bs .bh-bs-lanevol{ display:flex; flex:1 1 auto; min-width:0; align-items:center; }
  #bh-bs .bh-bs-lanevol .bh-bs-vol{ flex:1; width:100%; min-width:0; margin:0; accent-color:var(--cb-tint); height:22px; cursor:pointer; }
}
@media (min-width:1024px){
  #bh-bs .bh-bs-lanehd{ flex-basis:150px; }
}
@media (max-width:640px){
  #bh-bs .bh-bs-lanehd{ display:contents; }
  #bh-bs .bh-bs-lanevol{ display:none; }
}

/* Swing slider */
#bh-bs .bh-bs-range{ width:120px; accent-color:var(--cb-tint, #5ad0ff); cursor:pointer; vertical-align:middle; height:24px; }

/* Cloud sync button */
#bh-bs .bh-bs-cloud-save{ background:rgba(34,182,255,.12); border:1px solid rgba(34,182,255,.4); color:#bfe9ff; }
#bh-bs .bh-bs-cloud-save:hover{ background:rgba(34,182,255,.2); }
#bh-bs .bh-bs-cloud-save:disabled{ opacity:.55; cursor:progress; }

/* ── Mobile track area — fit-to-width with ALIGNED columns ─────────────────
   The BASE rules (written for an older markup) force min-width:30px on every
   cell + min-width:max-content on drum rows + independent overflow-x scroll on
   .bh-bs-drums AND .bh-bs-roll. On a phone that blew each row past ~500px and
   scrolled the drum grid and piano roll independently and out of alignment —
   the "super buggy" look. Override all of it: no horizontal scroll, cells shrink
   to fit, and a fixed-width control gutter (label + M/S, matched by an invisible
   spacer on note rows) keeps the 16 drum columns lined up with the 16 roll
   columns. */
@media (max-width:640px){
  #bh-bs{ padding:12px; }

  /* ── Fit-to-width mobile (SINGLE model): all 16 columns are equal 1fr cells that
     shrink to fill the phone — NO per-row horizontal scroll — and labels are STATIC
     + transparent so nothing ever hides behind them. A narrow M/S gutter of the
     SAME width on drum rows and note rows keeps both 16-col grids column-aligned. ── */
  #bh-bs .bh-bs-drums{ overflow-x:hidden; padding:8px; }
  #bh-bs .bh-bs-roll{ overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px; max-height:220px; overscroll-behavior-y:contain; }
  #bh-bs .bh-bs-row,
  #bh-bs .bh-bs-noterow{ min-width:0; width:auto; gap:6px; }
  #bh-bs .bh-bs-cells{ grid-template-columns:repeat(16, 1fr); gap:2px; flex:1 1 auto; min-width:0; margin-left:0; }
  #bh-bs .bh-bs-cell{ min-width:0; width:auto; height:34px; }
  #bh-bs .bh-bs-note{ min-width:0; width:auto; height:30px; }
  #bh-bs .bh-bs-cell.is-beat, #bh-bs .bh-bs-note.is-beat{ scroll-snap-align:none; }
  /* Static, transparent labels never cover a pad; matched widths keep columns aligned. */
  #bh-bs .bh-bs-rowlabel,
  #bh-bs .bh-bs-notelabel{ position:static; z-index:auto; background:transparent; flex:0 0 34px; width:34px; font-size:9px; align-self:center; display:flex; align-items:center; }
  #bh-bs .bh-bs-rowctl{ position:static; z-index:auto; background:transparent; flex:0 0 22px; flex-direction:column; gap:2px; align-items:center; justify-content:center; align-self:center; }
  #bh-bs .bh-bs-ms{ width:20px !important; height:15px !important; font-size:9px; }

  /* Genre / Generate + Publish rows had NO mobile treatment — compact them. */
  #bh-bs .bh-bs-gen{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:2px 0 8px; }
  #bh-bs .bh-bs-gen .bh-bs-field{ grid-column:1 / -1; }
  #bh-bs #bh-bs-genre{ width:100%; height:36px; }
  #bh-bs #bh-bs-generate{ grid-column:1 / -1; height:38px; }
  #bh-bs .bh-bs-publish{ gap:8px; margin-top:10px; padding-top:10px; }
  #bh-bs .bh-bs-title{ flex:1 1 100%; min-width:0; padding:8px 11px; font-size:12px; }
  #bh-bs .bh-bs-publish-btn{ flex:1 1 100%; height:38px; }
}

/* ============================================================================
 * Compact transport v2 — BPM/Bars steppers, instrument chips, icon save row.
 * A single-screen, tap-friendly control strip. Uses the #bh-bs design tokens.
 * ========================================================================== */
#bh-bs .bh-bs-tp-play{ display:inline-flex; gap:8px; align-items:center; }
#bh-bs .bh-bs-play .bh-bs-ic, #bh-bs .bh-bs-stop .bh-bs-ic{ font-size:12px; line-height:1; }
#bh-bs button#bh-bs-stop{ min-width:46px; padding:0 14px; }
#bh-bs button#bh-bs-loop{ min-width:44px; padding:0 12px; }
#bh-bs .bh-bs-loop .bh-bs-ic{ font-size:14px; line-height:1; }
#bh-bs button#bh-bs-loop.is-active{ background:linear-gradient(135deg,var(--cb-light),var(--cb-deep)); color:#fff; border-color:transparent; box-shadow:0 2px 10px rgba(34,182,255,.3); }

/* GarageBand LCD: the two steppers + a bar.beat.16th position readout, centered */
#bh-bs .bh-bs-lcd{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
#bh-bs .bh-bs-lcd-pos{ font:700 16px/1 var(--mono); letter-spacing:.12em; color:var(--cb-tint); min-width:70px; text-align:center; }
#bh-bs .bh-bs-tp-out{ display:inline-flex; gap:10px; align-items:center; }

/* Stepper pill: [−]  value/label  [+] */
#bh-bs .bh-bs-stepper{
  display:inline-flex; align-items:center; height:40px; padding:2px;
  background:var(--sur); border:1px solid var(--bdr); border-radius:22px;
}
#bh-bs button.bh-bs-step{
  width:32px; height:34px; min-height:0; padding:0; border:0; border-radius:18px;
  background:transparent; color:var(--cb-tint); cursor:pointer;
  font:700 18px/1 var(--mono); display:inline-flex; align-items:center; justify-content:center;
}
#bh-bs button.bh-bs-step:hover{ background:var(--sur2); }
#bh-bs button.bh-bs-step:active{ transform:translateY(1px); }
#bh-bs .bh-bs-stepper-mid{ display:inline-flex; flex-direction:column; align-items:center; min-width:54px; }
#bh-bs .bh-bs-stepper-mid input#bh-bs-tempo,
#bh-bs .bh-bs-stepper-mid input#bh-bs-bars{
  width:52px; min-height:0; height:20px; padding:0; text-align:center;
  background:transparent; border:0; border-radius:0; color:#fff;
  font:700 15px/1 var(--mono); -moz-appearance:textfield;
}
#bh-bs .bh-bs-stepper-mid input::-webkit-outer-spin-button,
#bh-bs .bh-bs-stepper-mid input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#bh-bs .bh-bs-stepper-mid em{
  font:700 8px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-style:normal; margin-top:3px;
}

/* Instrument (waveform) chips */
#bh-bs .bh-bs-waves{
  display:inline-flex; gap:3px; padding:3px;
  background:var(--sur); border:1px solid var(--bdr); border-radius:22px;
}
#bh-bs button.bh-bs-wave-chip{
  min-height:0; height:30px; padding:0 11px; border:0; border-radius:16px;
  background:transparent; color:var(--muted); cursor:pointer;
  font:700 11px/1 var(--mono); letter-spacing:.04em;
}
#bh-bs button.bh-bs-wave-chip:hover{ color:var(--txt); }
#bh-bs button.bh-bs-wave-chip.is-active{
  background:linear-gradient(135deg,var(--cb-light),var(--cb-deep));
  color:#fff; box-shadow:0 2px 10px rgba(34,182,255,.3);
}

/* Compact save/project row: icon buttons + tighter fields */
#bh-bs .bh-bs-projects{ gap:6px; }
#bh-bs button#bh-bs-save, #bh-bs button#bh-bs-clear, #bh-bs button#bh-bs-cloud-save{
  min-height:0; height:36px; width:40px; padding:0; font-size:15px; border-radius:10px;
}
#bh-bs .bh-bs-projects .bh-bs-proj-name{ flex:1 1 150px; min-width:120px; height:36px; }
#bh-bs .bh-bs-projects .bh-bs-select{ height:36px; min-width:108px; }

@media (max-width:640px){
  /* GarageBand transport, phone: three stacked rows — Play/Loop/Stop · LCD · out.
     [ ▶Play | 🔁 | ■ ] · [ −BPM+  −Bars+  1.1.1 ] · [ ↓WAV | 💾Save▾ ]
     Every child min-width:0 so nothing is pushed off-screen by #bh-bs overflow.
     waves/swing now live in the tools rail, not here. Not sticky on phone. */
  #bh-bs .bh-bs-transport{
    display:grid; gap:8px; align-items:center; grid-template-columns:1fr;
    grid-template-areas:"play" "lcd" "out";
  }
  #bh-bs .bh-bs-tp-play,
  #bh-bs .bh-bs-lcd,
  #bh-bs .bh-bs-tp-out,
  #bh-bs .bh-bs-stepper{ min-width:0; }
  #bh-bs .bh-bs-tp-play{ grid-area:play; display:flex; gap:8px; }
  #bh-bs .bh-bs-tp-play > .bh-bs-btn{ flex:1; }
  #bh-bs .bh-bs-play .bh-bs-btn-tx{ display:inline; }
  #bh-bs .bh-bs-lcd{ grid-area:lcd; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  #bh-bs .bh-bs-lcd .bh-bs-stepper{ flex:1 1 40%; height:36px; justify-content:space-between; }
  #bh-bs .bh-bs-lcd .bh-bs-stepper-mid{ min-width:0; }
  #bh-bs .bh-bs-lcd button.bh-bs-step{ width:28px; height:32px; }
  #bh-bs .bh-bs-lcd-pos{ flex:1 1 100%; text-align:center; }
  #bh-bs .bh-bs-tp-out{ grid-area:out; display:flex; gap:8px; }
  #bh-bs .bh-bs-tp-out > *{ flex:1; min-width:0; }
  #bh-bs .bh-bs-tp-out .bh-bs-projmenu, #bh-bs .bh-bs-tp-out .bh-bs-projmenu-btn{ width:100%; justify-content:center; }
  #bh-bs button#bh-bs-export{ width:100%; }
  #bh-bs .bh-bs-projpop{ right:0; }
}

/* ── DAW-style Save▾ popover: one button holds save / load / clear / cloud ── */
#bh-bs .bh-bs-projmenu{ position:relative; display:inline-flex; }
#bh-bs button.bh-bs-projmenu-btn{ gap:6px; }
#bh-bs .bh-bs-caret{ font-size:9px; opacity:.7; }
#bh-bs .bh-bs-projpop{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  width:250px; max-width:80vw; display:flex; flex-direction:column; gap:8px;
  padding:12px; background:#14121d; border:1px solid var(--bdr2);
  border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.55);
}
#bh-bs .bh-bs-projpop[hidden]{ display:none; }
#bh-bs .bh-bs-projpop-row{ display:flex; gap:8px; }
#bh-bs .bh-bs-projpop-row .bh-bs-btn{ flex:1; min-height:36px; width:auto; }
#bh-bs .bh-bs-projpop .bh-bs-input,
#bh-bs .bh-bs-projpop .bh-bs-select{ width:100%; height:38px; min-width:0; }
#bh-bs .bh-bs-projpop-sep{ height:1px; background:var(--bdr); margin:2px 0; }
#bh-bs .bh-bs-projpop .bh-bs-gen-status{ font-size:11px; min-height:14px; color:var(--cb-tint); }

/* ── Desktop / Mac / iPad-landscape (≥1024): drop the narrow container, go
 *    full-view, bigger pads + taller roll so the whole DAW fits one screen. ── */
@media (min-width:1024px){
  #bh-bs{ max-width:none; width:100%; padding:22px 26px; }
  #bh-bs .bh-bs-cells{ grid-template-columns:repeat(16, minmax(40px,1fr)); }
  #bh-bs .bh-bs-cell{ height:44px; }
  #bh-bs .bh-bs-roll{ max-height:min(50vh,540px); }
  #bh-bs .bh-bs-rowlabel, #bh-bs .bh-bs-notelabel{ flex-basis:84px; width:84px; font-size:11px; }
  /* GarageBand transport: sticky frosted bar — Play/Loop/Stop · LCD · WAV/Save */
  #bh-bs .bh-bs-transport{ position:sticky; top:0; z-index:70; flex-wrap:nowrap; gap:14px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); background:rgba(12,10,20,.86); }
  #bh-bs .bh-bs-lcd{ flex:1 1 auto; justify-content:center; gap:16px; flex-wrap:nowrap;
    padding:8px 16px; background:#0c0a14; border:1px solid var(--bdr2); border-radius:12px;
    box-shadow:inset 0 1px 6px rgba(0,0,0,.6); }
  #bh-bs .bh-bs-lcd-pos{ font-size:18px; min-width:74px; }
  #bh-bs .bh-bs-tp-out{ margin-left:auto; }
}
/* Ultra-wide: cap pad growth so cells stay tap-square, left-aligned. */
@media (min-width:1500px){
  #bh-bs .bh-bs-cells{ grid-template-columns:repeat(16, minmax(48px,60px)); justify-content:start; }
}
/* Phone: the Save▾ popover opens a touch wider, clamped to the viewport, and
   scrolls internally so a tall menu is never sliced by the container. */
@media (max-width:640px){
  #bh-bs .bh-bs-projpop{ width:min(300px,86vw); max-width:calc(100vw - 24px); max-height:70vh; overflow:auto; }
}

/* ============================================================================
 * Tools strip — auto-scale · MIDI import/export · one-shot Sounds popover.
 * ========================================================================== */
#bh-bs .bh-bs-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; }
#bh-bs .bh-bs-scale{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
#bh-bs .bh-bs-tools-lbl{ font:700 9px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
#bh-bs .bh-bs-tools .bh-bs-select{ height:34px; min-width:0; }
#bh-bs #bh-bs-scale-root{ min-width:54px; }
#bh-bs #bh-bs-scale-type{ min-width:96px; }
#bh-bs button.bh-bs-scale-lock{ min-height:0; height:34px; padding:0 12px; font-size:11px; }
#bh-bs button.bh-bs-scale-lock.is-active{ background:linear-gradient(135deg,var(--cb-light),var(--cb-deep)); color:#fff; border-color:transparent; }
#bh-bs .bh-bs-tools-io{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
#bh-bs .bh-bs-tools-io .bh-bs-btn{ min-height:0; height:34px; padding:0 12px; font-size:11px; }

/* One-shot Sounds popover (reuses the DAW-menu pattern) */
#bh-bs .bh-bs-soundsmenu{ position:relative; display:inline-flex; }
#bh-bs .bh-bs-soundspop{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  width:280px; max-width:calc(100vw - 24px); display:flex; flex-direction:column; gap:6px;
  padding:12px; background:#14121d; border:1px solid var(--bdr2); border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.55); max-height:70vh; overflow:auto;
}
#bh-bs .bh-bs-soundspop[hidden]{ display:none; }
#bh-bs .bh-bs-soundspop-hd{ font:700 9px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
#bh-bs .bh-bs-sound{ display:flex; align-items:center; gap:8px; }
#bh-bs .bh-bs-sound-name{ flex:1; min-width:0; font:600 12px/1.2 var(--mono); color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#bh-bs .bh-bs-sound.has-sample .bh-bs-sound-name{ color:var(--cb-tint); }
#bh-bs .bh-bs-sound button{
  flex:0 0 auto; width:30px; height:30px; min-height:0; padding:0; border-radius:8px;
  border:1px solid var(--bdr); background:var(--sur); color:var(--txt);
  font:700 13px/1 var(--mono); cursor:pointer;
}
#bh-bs .bh-bs-sound button:hover{ border-color:var(--bdr2); }
#bh-bs .bh-bs-sound-clear{ color:#ff8a8a !important; }
#bh-bs .bh-bs-sound.has-sample .bh-bs-sound-load{ border-color:var(--cb); color:var(--cb-tint); }

/* Auto-scale highlighting on the piano roll */
#bh-bs .bh-bs-noterow.bh-out-scale{ opacity:.34; }
#bh-bs .bh-bs-noterow.bh-scale-root .bh-bs-notelabel{ color:var(--cb-tint); font-weight:700; }
#bh-bs .bh-bs-noterow .bh-bs-note:disabled{ opacity:.28; cursor:not-allowed; pointer-events:none; }

/* Mobile: tools strip stacks into full-width rows */
@media (max-width:640px){
  #bh-bs .bh-bs-tools{ gap:6px; }
  #bh-bs .bh-bs-scale{ flex:1 1 100%; }
  #bh-bs .bh-bs-scale .bh-bs-select{ flex:1 1 0; }
  #bh-bs .bh-bs-tools-io{ flex:1 1 100%; }
  #bh-bs .bh-bs-tools-io .bh-bs-btn{ flex:1 1 auto; }
  #bh-bs .bh-bs-soundsmenu{ flex:1 1 auto; }
  #bh-bs #bh-bs-sounds{ width:100%; }
  #bh-bs .bh-bs-soundspop{ right:auto; left:0; }
}

/* Master reverb ("Space") slider in the tools strip */
#bh-bs .bh-bs-mix{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
#bh-bs .bh-bs-mix .bh-bs-tools-lbl{ flex:0 0 auto; }
#bh-bs .bh-bs-mix .bh-bs-range{ width:120px; min-width:0; }
@media (max-width:640px){
  #bh-bs .bh-bs-mix{ flex:1 1 100%; }
  #bh-bs .bh-bs-mix .bh-bs-range{ flex:1; width:auto; }
}

/* Mixer popover — per-track volume faders */
#bh-bs .bh-bs-mixmenu{ position:relative; display:inline-flex; }
#bh-bs .bh-bs-mixpop{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  width:250px; max-width:calc(100vw - 24px); display:flex; flex-direction:column; gap:8px;
  padding:12px; background:#14121d; border:1px solid var(--bdr2); border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.55); max-height:70vh; overflow:auto;
}
#bh-bs .bh-bs-mixpop[hidden]{ display:none; }
#bh-bs .bh-bs-mixpop-hd{ font:700 9px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
#bh-bs .bh-bs-chan{ display:flex; align-items:center; gap:10px; }
#bh-bs .bh-bs-chan-name{ flex:0 0 64px; font:600 11px/1.2 var(--mono); color:var(--txt); }
#bh-bs .bh-bs-chan .bh-bs-vol{ flex:1; min-width:0; accent-color:var(--cb-tint,#5ad0ff); height:22px; cursor:pointer; }
@media (max-width:640px){
  #bh-bs .bh-bs-mixmenu{ flex:1 1 auto; }
  #bh-bs #bh-bs-mixer{ width:100%; }
  #bh-bs .bh-bs-mixpop{ right:auto; left:0; }
}

/* Drum grooves picker */
#bh-bs .bh-bs-groovepick{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
#bh-bs #bh-bs-groove{ min-width:96px; height:34px; }
@media (max-width:640px){
  #bh-bs .bh-bs-groovepick{ flex:1 1 100%; }
  #bh-bs #bh-bs-groove{ flex:1; }
}

/* Undo / redo */
#bh-bs .bh-bs-hist{ display:inline-flex; gap:4px; }
#bh-bs button#bh-bs-undo, #bh-bs button#bh-bs-redo{ min-height:0; height:34px; width:38px; padding:0; font-size:16px; }
#bh-bs button#bh-bs-undo:disabled, #bh-bs button#bh-bs-redo:disabled{ opacity:.38; cursor:default; }

/* Drum kit picker */
#bh-bs .bh-bs-kitpick{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
#bh-bs #bh-bs-kit{ min-width:92px; height:34px; }
@media (max-width:640px){
  #bh-bs .bh-bs-kitpick{ flex:1 1 100%; }
  #bh-bs #bh-bs-kit{ flex:1; }
}

/* Play button: unmistakable "now playing" state — green→blue glow + gentle pulse
   + the icon flips ▶→⏸ (set in JS). Clicking it again stops. */
#bh-bs button#bh-bs-play.is-active{
  background:linear-gradient(135deg,#34d399,#22B6FF);
  color:#04121c;
  box-shadow:0 0 0 3px rgba(52,211,153,.22), 0 4px 18px rgba(52,211,153,.4);
  animation:bhBsPlayPulse 1.25s ease-in-out infinite;
}
@keyframes bhBsPlayPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(52,211,153,.22), 0 4px 16px rgba(52,211,153,.35); }
  50%{ box-shadow:0 0 0 6px rgba(52,211,153,.10), 0 4px 22px rgba(52,211,153,.55); }
}
@media (prefers-reduced-motion:reduce){ #bh-bs button#bh-bs-play.is-active{ animation:none; } }

/* GarageBand-like touch response: pads flash on press (brightness only — no
   layout shift, so it can't disturb the scroll/drag-paint grid). */
#bh-bs .bh-bs-cell:active, #bh-bs .bh-bs-note:active{ filter:brightness(1.45); }
#bh-bs .bh-bs-wave-chip:active, #bh-bs button.bh-bs-step:active, #bh-bs .bh-bs-ms:active{ filter:brightness(1.3); }

/* ============================================================================
 * Play view — Grid|Play segmented tabs · live drum pads · touch keyboard.
 * The keyboard is a fit-to-width 2-octave board (no horizontal scroll): white
 * keys flex to fill, black keys overlay absolutely at a PHP-computed left%.
 * ========================================================================== */
#bh-bs .bh-bs-viewtabs{ display:inline-flex; gap:3px; padding:3px; margin:0 0 12px;
  background:var(--sur); border:1px solid var(--bdr); border-radius:22px; }
#bh-bs button.bh-bs-viewtab{ min-height:0; height:34px; padding:0 22px; border:0; border-radius:16px;
  background:transparent; color:var(--muted); cursor:pointer; font:700 12px/1 var(--mono); letter-spacing:.06em; }
#bh-bs button.bh-bs-viewtab:hover{ color:var(--txt); }
#bh-bs button.bh-bs-viewtab.is-active{ background:linear-gradient(135deg,var(--cb-light),var(--cb-deep)); color:#fff; box-shadow:0 2px 10px rgba(34,182,255,.3); }

#bh-bs .bh-bs-stage{ display:none; }
#bh-bs .bh-bs-stage.is-active{ display:block; }

/* Live bar: REC arm + step-record status readout */
#bh-bs .bh-bs-live-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
#bh-bs button.bh-bs-live-rec{ display:inline-flex; align-items:center; gap:6px; }
#bh-bs button.bh-bs-live-rec .bh-bs-ic{ color:#ff5c5c; font-size:11px; }
#bh-bs button.bh-bs-live-rec.is-armed{ background:#ff5c5c; border-color:#ff5c5c; color:#160404; }
#bh-bs button.bh-bs-live-rec.is-armed .bh-bs-ic{ color:#160404; animation:bhBsRecPulse 1s ease-in-out infinite; }
@keyframes bhBsRecPulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
@media (prefers-reduced-motion:reduce){ #bh-bs button.bh-bs-live-rec.is-armed .bh-bs-ic{ animation:none; } }
#bh-bs .bh-bs-live-step{ flex:1 1 auto; min-width:0; font:600 12px/1.3 var(--mono); color:var(--muted); }

/* Drum pads: 5-up grid, GarageBand pad-flash on hit */
#bh-bs .bh-bs-pads{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0 0 16px; }
#bh-bs button.bh-bs-pad{ min-height:96px; border:1px solid var(--bdr2); border-radius:14px;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  color:var(--txt); cursor:pointer; font:700 13px/1 var(--mono); letter-spacing:.04em;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
  transition:filter .08s, transform .06s; }
#bh-bs button.bh-bs-pad:hover{ border-color:var(--cb); }
#bh-bs button.bh-bs-pad.is-hit{ filter:brightness(1.5); transform:translateY(1px);
  background:linear-gradient(160deg,var(--cb-tint),var(--cb)); border-color:var(--cb-tint); color:#04121c; }

/* Keyboard: white keys flex fill, black keys absolute overlay via inline left% */
#bh-bs .bh-bs-keys{ position:relative; display:flex; align-items:flex-end;
  height:150px; border-radius:12px; overflow:hidden; background:#0c0a14; border:1px solid var(--bdr2); }
#bh-bs button.bh-bs-key{ flex:1 1 0; min-width:0; height:100%; margin:0;
  border:1px solid #0c0a14; border-radius:0 0 6px 6px; background:linear-gradient(#f7f6fb,#e5e1ee);
  color:#6b6678; cursor:pointer; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
#bh-bs button.bh-bs-key.is-black{ position:absolute; top:0; z-index:3; flex:0 0 auto;
  width:calc((100% / 15) * 0.62); height:62%; transform:translateX(-50%); padding:0;
  background:linear-gradient(#2c2937,#131019); border:1px solid #000; border-radius:0 0 4px 4px; }
#bh-bs button.bh-bs-key:active, #bh-bs button.bh-bs-key.is-hit{ filter:brightness(.85); }
#bh-bs button.bh-bs-key.is-black:active, #bh-bs button.bh-bs-key.is-black.is-hit{ filter:brightness(1.6); }
#bh-bs .bh-bs-key-lbl{ pointer-events:none; opacity:.45; font:600 8px/1 var(--mono); }
/* Scale feedback reuses the roll's out-of-scale styling */
#bh-bs button.bh-bs-key.bh-out-scale{ opacity:.3; }
#bh-bs button.bh-bs-key[disabled]{ pointer-events:none; }

@media (min-width:1024px){
  #bh-bs .bh-bs-pads{ gap:14px; }
  #bh-bs button.bh-bs-pad{ min-height:120px; font-size:14px; }
  #bh-bs .bh-bs-keys{ height:190px; }
}
@media (max-width:600px){
  #bh-bs .bh-bs-pads{ grid-template-columns:repeat(3,1fr); grid-auto-rows:84px; gap:10px; }
  #bh-bs button.bh-bs-pad{ min-height:0; }
  #bh-bs .bh-bs-keys{ height:132px; }
  #bh-bs .bh-bs-key-lbl{ display:none; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * Mobile "RAIL" — the tools strip becomes ONE horizontal-scroll icon rail
 * instead of ~5 stacked full-width rows. Compact 34px controls, icon-first
 * (verbose labels hidden, a leading emoji marks each group). Overrides the
 * earlier ≤640 rules that set flex:1 1 100% on scale/io/mix/mixmenu.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  #bh-bs .bh-bs-tools{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    gap:7px; padding:2px 0 5px; margin:0 0 10px;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  }
  #bh-bs .bh-bs-tools::-webkit-scrollbar{ display:none; }
  /* Every group is a fixed-size rail item — cancel the full-width stacking. */
  #bh-bs .bh-bs-tools > *{ flex:0 0 auto; width:auto; min-width:0; }
  #bh-bs .bh-bs-hist, #bh-bs .bh-bs-groovepick, #bh-bs .bh-bs-kitpick,
  #bh-bs .bh-bs-scale, #bh-bs .bh-bs-mix, #bh-bs .bh-bs-tools-io,
  #bh-bs .bh-bs-mixmenu, #bh-bs .bh-bs-soundsmenu, #bh-bs .bh-bs-waves,
  #bh-bs .bh-bs-field--swing{
    display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; width:auto;
  }
  #bh-bs .bh-bs-tools-io{ flex-wrap:nowrap; }
  #bh-bs .bh-bs-tools-io .bh-bs-btn{ flex:0 0 auto; }
  #bh-bs #bh-bs-mixer, #bh-bs #bh-bs-sounds{ width:auto; }
  #bh-bs .bh-bs-soundspop, #bh-bs .bh-bs-mixpop{ left:auto; right:0; }
  /* Icon-first: hide verbose text; a leading emoji marks each grouped control. */
  #bh-bs .bh-bs-tools .bh-bs-tools-lbl,
  #bh-bs .bh-bs-tools .bh-bs-btx,
  #bh-bs .bh-bs-field--swing > span{ display:none; }
  #bh-bs .bh-bs-groovepick::before{ content:"✨"; }
  #bh-bs .bh-bs-kitpick::before{ content:"🥁"; }
  #bh-bs .bh-bs-scale::before{ content:"🎼"; }
  #bh-bs .bh-bs-mix::before{ content:"🌫"; }
  #bh-bs .bh-bs-field--swing::before{ content:"〰"; }
  #bh-bs .bh-bs-groovepick::before, #bh-bs .bh-bs-kitpick::before,
  #bh-bs .bh-bs-scale::before, #bh-bs .bh-bs-mix::before,
  #bh-bs .bh-bs-field--swing::before{ font-size:15px; line-height:1; flex:0 0 auto; }
  /* Compact controls: 34px tap height, tighter widths, snug ranges. */
  #bh-bs .bh-bs-tools .bh-bs-select{ height:34px; font-size:11px; padding:0 7px; }
  #bh-bs #bh-bs-groove, #bh-bs #bh-bs-kit{ max-width:98px; }
  #bh-bs #bh-bs-scale-root{ min-width:44px; max-width:56px; }
  #bh-bs #bh-bs-scale-type{ min-width:78px; max-width:106px; }
  #bh-bs .bh-bs-tools .bh-bs-btn{ height:34px; min-height:0; padding:0 11px; font-size:12px; }
  #bh-bs .bh-bs-tools .bh-bs-range{ flex:0 0 68px; width:68px; height:26px; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * One-time "quest" tutorial — spotlight coach-marks + mission cards.
 * (Markup injected by assets/js/beat-studio/bs-tutorial.js.)
 * ════════════════════════════════════════════════════════════════════════════ */
.bh-bs-tour{ position:fixed; inset:0; z-index:99999; }
.bh-bs-tour[hidden]{ display:none; }
/* The hole is a target-sized box whose huge box-shadow dims everything else and
   rings + glows the spotlighted control. pointer-events:none so it's visual only. */
.bh-bs-tour-hole{
  position:fixed; top:0; left:0; width:0; height:0; border-radius:12px; pointer-events:none; opacity:0;
  box-shadow:0 0 0 9999px rgba(6,6,12,.76), 0 0 0 3px #7FD0FF, 0 0 26px 5px rgba(34,182,255,.5);
  transition:top .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1),
             width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.bh-bs-tour-card{
  box-sizing:border-box;              /* width:340 stays 340 incl. padding+border (was overflowing right) */
  position:fixed; z-index:2; width:340px; max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow-y:auto;  /* tall card on a short screen scrolls itself, never off-screen */
  background:linear-gradient(180deg,#181624,#100e18); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:18px 18px 16px; box-shadow:0 26px 64px rgba(0,0,0,.62);
  color:rgba(255,255,255,.9); font-family:'DM Mono',ui-monospace,Menlo,monospace;
  animation:bhBsTourPop .26s cubic-bezier(.2,.8,.2,1);
}
.bh-bs-tour-card.is-center{ left:50%; top:50%; transform:translate(-50%,-50%); }
@keyframes bhBsTourPop{ from{ opacity:0; transform:translateY(8px) scale(.97); } to{ opacity:1; } }
.bh-bs-tour-card.is-center{ animation:bhBsTourPopC .26s cubic-bezier(.2,.8,.2,1); }
@keyframes bhBsTourPopC{ from{ opacity:0; transform:translate(-50%,-46%) scale(.97); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
.bh-bs-tour-x{
  position:absolute; top:10px; right:10px; width:26px; height:26px; padding:0; border-radius:8px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:rgba(255,255,255,.55);
  font-size:12px; line-height:1; cursor:pointer;
}
.bh-bs-tour-x:hover{ color:#fff; border-color:rgba(255,255,255,.3); }
.bh-bs-tour-badge{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.bh-bs-tour-emoji{ font-size:23px; line-height:1; }
.bh-bs-tour-step{
  font:700 10px/1 'DM Mono',ui-monospace,monospace; letter-spacing:.14em; color:#7FD0FF;
  background:rgba(34,182,255,.13); border:1px solid rgba(34,182,255,.32); padding:4px 9px; border-radius:20px;
}
.bh-bs-tour-title{ margin:0 0 7px; font:700 17px/1.22 'DM Mono',ui-monospace,monospace; color:#fff; text-wrap:balance; }
.bh-bs-tour-body{ margin:0 0 14px; font:400 13.5px/1.55 system-ui,-apple-system,'Segoe UI',sans-serif; color:rgba(255,255,255,.7); }
.bh-bs-tour-body b{ color:#7FD0FF; font-weight:600; }
.bh-bs-tour-dots{ display:flex; gap:6px; margin-bottom:15px; }
.bh-bs-tour-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); transition:all .2s; }
.bh-bs-tour-dot.is-on{ background:#22B6FF; transform:scale(1.35); box-shadow:0 0 8px rgba(34,182,255,.7); }
.bh-bs-tour-dot.is-done{ background:#1A96E8; }
.bh-bs-tour-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bh-bs-tour-navr{ display:inline-flex; gap:8px; }
.bh-bs-tour-nav button{ font-family:'DM Mono',ui-monospace,monospace; cursor:pointer; border-radius:10px; }
.bh-bs-tour-skip{ height:36px; padding:0 12px; background:transparent; border:0; color:rgba(255,255,255,.42); font-size:12px; }
.bh-bs-tour-skip:hover{ color:rgba(255,255,255,.75); }
.bh-bs-tour-back{ height:36px; padding:0 14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.8); font-size:12px; }
.bh-bs-tour-back:hover{ border-color:rgba(255,255,255,.28); }
.bh-bs-tour-next{ height:36px; padding:0 18px; border:0; color:#04121c; font-weight:700; font-size:12px;
  background:linear-gradient(135deg,#34d399,#22B6FF); box-shadow:0 4px 16px rgba(34,182,255,.4); }
.bh-bs-tour-next:hover{ filter:brightness(1.06); }
.bh-bs-tour-next:focus-visible, .bh-bs-tour-back:focus-visible, .bh-bs-tour-skip:focus-visible, .bh-bs-tour-x:focus-visible{
  outline:2px solid #7FD0FF; outline-offset:2px; }

/* Floating "?" launcher — replay the tour any time. */
.bh-bs-tour-launch{
  position:fixed; right:16px; bottom:16px; z-index:9990; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(34,182,255,.5); background:linear-gradient(135deg,#1A96E8,#0e2340); color:#eaf7ff;
  font:700 20px/1 'DM Mono',ui-monospace,monospace; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 4px rgba(34,182,255,.12); animation:bhBsTourGlow 2.6s ease-in-out infinite;
}
.bh-bs-tour-launch:hover{ filter:brightness(1.12); transform:translateY(-1px); }
@keyframes bhBsTourGlow{ 0%,100%{ box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 4px rgba(34,182,255,.1); }
  50%{ box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 8px rgba(34,182,255,.03); } }
@media (max-width:640px){ .bh-bs-tour-launch{ width:40px; height:40px; right:12px; bottom:12px; font-size:18px; } }

@media (prefers-reduced-motion:reduce){
  .bh-bs-tour-hole{ transition:none; }
  .bh-bs-tour-card{ animation:none; }
  .bh-bs-tour-launch{ animation:none; }
  .bh-bs-tour-dot{ transition:none; }
}