/* pro88.css — PRO-88 Workstation styles, lifted verbatim from the original
   PRO-88 Workstation.html. The ONLY changes: the :root variable block is scoped
   to .pn-synth, and the full-page html/body layout/background rules are removed,
   so the workstation drops cleanly into the shared cosmic shell without its dense
   internal layout being altered in any way. */

  .pn-synth {
    --bg: #0a0907;
    --chassis-0: #15130f;
    --chassis-1: #1d1b17;
    --chassis-2: #26221d;
    --chassis-3: #302b25;
    --chassis-edge: #423c34;
    --slot: #060503;
    --ink: #e6dfd2;
    --ink-dim: #a89e8c;   /* raised from #8a8276 for legibility on the dark chassis */
    --ink-faint: #766d5d; /* raised from #4a443c */
    --label: #c9c0b0;
    --amber: #ffb347;
    --amber-hot: #ffd28a;
    --amber-glow: rgba(255, 138, 44, 0.55);
    --cyan: #6fe6e6;
    --cyan-glow: rgba(111, 230, 230, 0.55);
    --red: #ff4d4d;
    --red-glow: rgba(255, 77, 77, 0.6);
    --green: #7cef9b;
    --green-glow: rgba(124, 239, 155, 0.55);
    --lcd-bg: #102117;
    --lcd-ink: #8effa8;
    --lcd-dim: #2f5a40;
  }
  * { box-sizing: border-box; }
  /* Synth typography/vars are scoped to .pn-synth so the cosmic shell theme
     (which sets --ink/--bg on :root) cannot bleed into the workstation palette. */
  .pn-synth {
    color: var(--ink);
    font-family: "Saira Condensed", "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.04em;
    user-select: none;
    -webkit-user-select: none;
  }
  .stage {
    width: 1640px;
    flex: 0 0 auto;
  }
  /* === Chassis ============================================ */
  .chassis {
    position: relative;
    background:
      linear-gradient(180deg, #2a251f 0%, #1d1a16 5%, #1d1a16 95%, #100e0b 100%),
      var(--chassis-1);
    border-radius: 22px;
    padding: 18px 22px 22px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 0 rgba(0, 0, 0, 0.6),
      0 30px 60px -20px rgba(0, 0, 0, 0.9),
      0 6px 0 #07060a;
    border: 1px solid #3a342c;
  }
  .chassis::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 16px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.04);
  }
  /* Brushed metal */
  .brushed {
    background-color: var(--chassis-2);
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.25));
    border: 1px solid #3a342c;
    border-top-color: #4d463c;
    border-bottom-color: #1a1714;
    border-radius: 10px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 -1px 0 rgba(0,0,0,0.6);
  }
  .screws { position: absolute; }
  .screw {
    width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #5a5249 0%, #2a2520 60%, #100d0a 100%);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
  }
  .screw::after {
    content: "";
    position: absolute; inset: 2px;
    background: linear-gradient(135deg, transparent 45%, #1a1612 45% 55%, transparent 55%);
  }
  /* === Header ============================================= */
  .header {
    display: grid;
    grid-template-columns: 340px 1fr 360px 260px;
    gap: 16px;
    margin-bottom: 14px;
    height: 138px;
  }
  .brand {
    position: relative;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .brand-mark {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
  }
  .brand-logo {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 8px;
    background:
      conic-gradient(from 35deg, var(--amber) 0deg, #ff6a00 90deg, var(--amber) 180deg, #ff6a00 270deg, var(--amber) 360deg);
    box-shadow:
      inset 0 0 0 2px #1a1410,
      inset 0 0 0 4px var(--amber-hot),
      0 0 12px var(--amber-glow);
    display: grid; place-items: center;
    color: #1a1410;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    font-size: 18px;
  }
  .brand-text { line-height: 1; min-width: 0; }
  .brand-text .name { font-size: 13px; color: var(--ink); letter-spacing: 0.18em; font-weight: 600; white-space: nowrap; }
  .brand-text .model { font-size: 10px; color: var(--ink-dim); letter-spacing: 0.14em; margin-top: 4px; white-space: nowrap; }
  .serial {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-faint);
    letter-spacing: 0.15em;
    line-height: 1.6;
  }
  .badges { display: flex; gap: 6px; }
  .badge {
    font-family: "JetBrains Mono", monospace;
    font-size: 8.5px;
    padding: 3px 7px;
    border: 1px solid var(--chassis-edge);
    border-radius: 3px;
    color: var(--ink-dim);
    letter-spacing: 0.18em;
    background: rgba(0,0,0,0.3);
  }
  /* LCD */
  .lcd-wrap {
    position: relative;
    padding: 10px;
    background: #0a0908;
    border: 1px solid #3a342c;
    border-radius: 10px;
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.9),
      inset 0 -1px 0 rgba(255,255,255,0.04);
  }
  .lcd {
    height: 100%;
    background:
      linear-gradient(180deg, #0e2018 0%, #122a1d 100%);
    border-radius: 6px;
    padding: 12px 16px;
    font-family: "Share Tech Mono", monospace;
    color: var(--lcd-ink);
    text-shadow: 0 0 6px rgba(142, 255, 168, 0.5);
    position: relative;
    overflow: hidden;
  }
  .lcd::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.18) 2px 3px);
    pointer-events: none;
  }
  .lcd-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 14px;
    line-height: 1.3;
  }
  .lcd-title {
    font-size: 22px;
    letter-spacing: 0.12em;
    margin-bottom: 2px;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px;
    white-space: nowrap;
  }
  .lcd-title > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .lcd-dim { color: var(--lcd-dim); }
  .lcd-meter {
    display: flex; gap: 2px; margin-top: 6px;
  }
  .lcd-bar {
    width: 6px; height: 10px;
    background: var(--lcd-dim);
    opacity: 0.4;
  }
  .lcd-bar.on { opacity: 1; background: var(--lcd-ink); box-shadow: 0 0 4px var(--lcd-ink); }
  .lcd-bar.hot { background: #ffb24a; box-shadow: 0 0 4px #ffb24a; }
  .lcd-bar.peak { background: #ff5050; box-shadow: 0 0 4px #ff5050; }

  /* Transport */
  .transport-block {
    padding: 12px 14px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .transport-row {
    display: flex; gap: 8px; align-items: center;
  }
  .tbtn {
    width: 44px; height: 36px;
    border-radius: 6px;
    background: linear-gradient(180deg, #3a342c 0%, #1f1c18 100%);
    border: 1px solid #4a423a;
    border-top-color: #5e564b;
    border-bottom-color: #14110d;
    color: var(--ink);
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -2px 0 rgba(0,0,0,0.4),
      0 2px 0 #0a0807;
    transition: transform 0.05s, box-shadow 0.05s;
  }
  .tbtn:active, .tbtn.active {
    transform: translateY(2px);
    box-shadow:
      inset 0 1px 4px rgba(0,0,0,0.7),
      inset 0 0 0 1px rgba(0,0,0,0.3);
  }
  .tbtn.rec { color: var(--red); text-shadow: 0 0 6px var(--red-glow); }
  .tbtn.play.active { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }
  .tbtn.rec.active { color: var(--red); text-shadow: 0 0 10px var(--red); background: linear-gradient(180deg, #4a2424 0%, #2a1010 100%); border-color: #6a2828; }
  .tbtn svg { width: 14px; height: 14px; fill: currentColor; }
  .tlabel {
    font-size: 9.5px; letter-spacing: 0.18em; color: var(--ink-dim);
    margin-top: 6px;
    display: flex; gap: 8px; justify-content: space-between;
    font-family: "JetBrains Mono", monospace;
  }
  .tempo {
    display: flex; align-items: center; gap: 10px;
    margin-left: auto;
  }
  .tempo-readout {
    background: #0a0908;
    border: 1px solid #2a2520;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: "Share Tech Mono", monospace;
    color: var(--amber);
    text-shadow: 0 0 6px var(--amber-glow);
    font-size: 16px;
    letter-spacing: 0.08em;
    min-width: 56px;
    text-align: center;
  }

  /* Master block */
  .master {
    padding: 12px 16px;
    display: flex; align-items: center; gap: 16px;
  }
  .master-knob-area { flex: 0 0 auto; }
  .master-meters {
    flex: 1;
    display: flex; flex-direction: column; gap: 4px;
  }
  .meter-track {
    height: 10px;
    background: #0a0908;
    border-radius: 2px;
    border: 1px solid #2a2520;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
    position: relative;
    overflow: hidden;
  }
  .meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green) 0%, #c0e84a 55%, var(--amber-hot) 75%, var(--red) 92%);
    transition: width 0.06s linear;
  }
  .meter-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-dim);
    letter-spacing: 0.18em;
    display: flex; justify-content: space-between;
  }

  /* === Main panel grid =================================== */
  .panel {
    display: grid;
    grid-template-columns: 280px 230px 260px 230px 360px;
    gap: 12px;
    margin-bottom: 14px;
  }
  .module {
    position: relative;
    padding: 14px 14px 12px;
    min-height: 280px;
  }
  .module-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #3a342c;
  }
  .module-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    color: var(--ink);
  }
  .module-title .num {
    color: var(--amber);
    text-shadow: 0 0 4px var(--amber-glow);
    margin-right: 8px;
    font-family: "JetBrains Mono", monospace;
  }
  .module-sub {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-faint);
    letter-spacing: 0.18em;
  }

  /* Knob */
  .knob-cell {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
  }
  .knob {
    width: 64px; height: 64px;
    position: relative;
    cursor: ns-resize;
    touch-action: none;
  }
  .knob-track {
    position: absolute; inset: 0;
    pointer-events: none;
  }
  .knob-body {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 25%, #5a5046 0%, #2a2520 55%, #100d0a 100%);
    box-shadow:
      inset 0 2px 3px rgba(255,255,255,0.12),
      inset 0 -3px 5px rgba(0,0,0,0.7),
      0 3px 6px rgba(0,0,0,0.6),
      0 0 0 1px #0c0a08;
    transform: rotate(0deg);
  }
  .knob-body::before {
    content: ""; position: absolute; inset: 6px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.03) 0deg 5deg, transparent 5deg 10deg);
  }
  .knob-pointer {
    position: absolute;
    top: 3px; left: 50%;
    width: 3px; height: 14px;
    background: var(--amber);
    border-radius: 2px;
    transform: translateX(-50%);
    box-shadow: 0 0 6px var(--amber-glow);
  }
  .knob.cyan .knob-pointer { background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); }
  .knob-label {
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--label);
    text-align: center;
  }
  .knob-value {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-dim);
    letter-spacing: 0.1em;
  }
  .knob.lg { width: 86px; height: 86px; }
  .knob.lg .knob-pointer { height: 18px; width: 4px; }

  /* Knob arc track svg */
  .arc-bg, .arc-fg {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
  }
  .arc-bg { stroke: #2a2520; }
  .arc-fg { stroke: var(--amber); filter: drop-shadow(0 0 4px var(--amber-glow)); }
  .knob.cyan .arc-fg { stroke: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan-glow)); }

  /* Selector buttons */
  .selector {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
  }
  .selector.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .selector.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .sbtn {
    padding: 6px 4px;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    font-family: "Saira Condensed", sans-serif;
    font-weight: 600;
    background: linear-gradient(180deg, #2a2620 0%, #181612 100%);
    border: 1px solid #3a342c;
    border-top-color: #4a4239;
    border-bottom-color: #100d0a;
    color: var(--ink-dim);
    cursor: pointer;
    border-radius: 3px;
    position: relative;
    transition: all 0.1s;
  }
  .sbtn.active {
    color: var(--amber-hot);
    text-shadow: 0 0 6px var(--amber-glow);
    background: linear-gradient(180deg, #3a2a1a 0%, #1a1208 100%);
    border-color: #6a4a20;
  }
  .sbtn.cyan.active {
    color: #b8f5f5;
    text-shadow: 0 0 6px var(--cyan-glow);
    background: linear-gradient(180deg, #1a3434 0%, #0a1818 100%);
    border-color: #2a6a6a;
  }
  .sbtn::before {
    content: "";
    position: absolute;
    top: 4px; left: 4px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #0a0908;
    box-shadow: inset 0 0 0 1px #2a2520;
  }
  .sbtn.active::before {
    background: var(--amber);
    box-shadow: 0 0 4px var(--amber-glow), inset 0 0 0 1px #1a1208;
  }
  .sbtn.cyan.active::before {
    background: var(--cyan);
    box-shadow: 0 0 4px var(--cyan-glow), inset 0 0 0 1px #0a1818;
  }

  /* Knob grid */
  .knob-grid {
    display: grid;
    gap: 12px 8px;
  }
  .knob-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .knob-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

  /* ADSR Sliders */
  .adsr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .slider-cell {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
  }
  .slider {
    width: 30px; height: 140px;
    background: #0a0908;
    border: 1px solid #2a2520;
    border-radius: 3px;
    position: relative;
    cursor: ns-resize;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
    touch-action: none;
  }
  .slider::before {
    content: "";
    position: absolute;
    top: 6px; bottom: 6px;
    left: 50%;
    width: 2px;
    background: #1a1714;
    transform: translateX(-50%);
  }
  .slider-thumb {
    position: absolute;
    left: -7px; right: -7px;
    height: 22px;
    background:
      linear-gradient(180deg, #6a5e50 0%, #3a3228 45%, #1a1612 100%);
    border: 1px solid #1a1612;
    border-top-color: #7a6e60;
    border-radius: 3px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.15),
      inset 0 -2px 0 rgba(0,0,0,0.5),
      0 2px 4px rgba(0,0,0,0.6);
    transform: translateY(-50%);
  }
  .slider-thumb::after {
    content: "";
    position: absolute;
    top: 50%; left: 4px; right: 4px;
    height: 2px;
    background: var(--amber);
    box-shadow: 0 0 4px var(--amber-glow);
    transform: translateY(-50%);
  }
  .slider-scale {
    position: absolute;
    left: 100%; top: 0; bottom: 0;
    margin-left: 4px;
    width: 6px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .slider-tick {
    height: 1px; width: 4px;
    background: var(--ink-faint);
  }
  .slider-tick.maj { width: 6px; background: var(--ink-dim); }

  /* Envelope visualizer */
  .env-viz {
    height: 50px;
    background: #0a0908;
    border: 1px solid #2a2520;
    border-radius: 3px;
    padding: 4px;
    margin-bottom: 10px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
  }
  .env-viz svg { width: 100%; height: 100%; }

  /* Pads */
  .pads-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 6px;
    height: 220px;
  }
  .pad {
    background:
      linear-gradient(180deg, #2c2925 0%, #18161300 100%),
      #1a1813;
    border: 1px solid #2e2823;
    border-top-color: #423a30;
    border-bottom-color: #100e0a;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      inset 0 -2px 0 rgba(0,0,0,0.5),
      0 2px 0 #0a0807;
    transition: background 0.1s, box-shadow 0.1s, transform 0.05s;
  }
  .pad-label {
    position: absolute;
    bottom: 4px; left: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
  }
  .pad-name {
    position: absolute;
    top: 6px; left: 6px; right: 6px;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--ink-dim);
    font-weight: 600;
  }
  .pad.hit {
    background: linear-gradient(180deg, #ff9a40 0%, #d6661c 100%);
    box-shadow:
      inset 0 0 0 1px #ffb870,
      inset 0 0 18px rgba(255, 240, 200, 0.5),
      0 0 22px var(--amber-glow);
    transform: translateY(1px);
  }
  .pad.hit .pad-label, .pad.hit .pad-name {
    color: #1a1208;
  }
  .pad.bank2.hit {
    background: linear-gradient(180deg, #4ad1d1 0%, #1c8a8a 100%);
    box-shadow:
      inset 0 0 0 1px #80e8e8,
      inset 0 0 18px rgba(220, 250, 250, 0.5),
      0 0 22px var(--cyan-glow);
  }

  /* Step sequencer indicator */
  .steps {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 4px;
    margin-bottom: 12px;
  }
  .step {
    height: 14px;
    background: #0a0908;
    border: 1px solid #2a2520;
    border-radius: 2px;
    position: relative;
  }
  .step.on::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber-glow);
    border-radius: 1px;
  }
  .step.cur::after {
    background: var(--green);
    box-shadow: 0 0 6px var(--green-glow);
  }

  /* === Keys row ========================================== */
  .keys-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px;
  }
  .perf {
    padding: 14px 14px 16px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .perf-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #3a342c;
  }
  .wheels-row {
    display: flex; gap: 14px; justify-content: center;
  }
  .wheel-col {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
  }
  .wheel-slot {
    width: 32px; height: 150px;
    background: var(--slot);
    border-radius: 6px;
    border: 1px solid #2a2520;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
    position: relative;
    cursor: ns-resize;
    touch-action: none;
  }
  .wheel-thumb {
    position: absolute;
    left: -8px; right: -8px;
    height: 46px;
    background:
      linear-gradient(180deg, #4a423a 0%, #2a251f 50%, #100d0a 100%);
    border: 1px solid #100d0a;
    border-top-color: #5e564b;
    border-radius: 5px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.15),
      inset 0 -2px 0 rgba(0,0,0,0.6),
      0 2px 4px rgba(0,0,0,0.6);
    transform: translateY(-50%);
    display: flex; flex-direction: column; justify-content: space-around;
    padding: 4px 0;
  }
  .wheel-grip {
    height: 1px;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05);
    margin: 0 4px;
  }
  .wheel-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--label);
  }
  .wheel-val {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
  }
  .oct-row { display: flex; gap: 6px; justify-content: center; }
  .oct-btn {
    flex: 1;
    padding: 8px 0;
    font-size: 11px;
    letter-spacing: 0.16em;
    font-weight: 600;
    background: linear-gradient(180deg, #2a2620 0%, #181612 100%);
    border: 1px solid #3a342c;
    border-top-color: #4a4239;
    border-bottom-color: #100d0a;
    color: var(--ink);
    cursor: pointer;
    border-radius: 4px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 -2px 0 rgba(0,0,0,0.4),
      0 2px 0 #0a0807;
  }
  .oct-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 4px rgba(0,0,0,0.7); }
  .oct-readout {
    text-align: center;
    font-family: "Share Tech Mono", monospace;
    font-size: 14px;
    color: var(--amber);
    text-shadow: 0 0 4px var(--amber-glow);
    letter-spacing: 0.1em;
  }

  /* Piano */
  .piano-frame {
    padding: 10px 10px 12px;
    position: relative;
  }
  .piano {
    position: relative;
    height: 200px;
    background: #050403;
    border-radius: 6px;
    padding: 0;
    border: 1px solid #2a2520;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
    overflow: hidden;
  }
  .piano-keys {
    position: relative;
    height: 100%;
    display: flex;
  }
  .key-white {
    flex: 1 0 0;
    background:
      linear-gradient(180deg, #faf6ee 0%, #eee5d4 92%, #c8bca3 100%);
    border: 1px solid #1a1612;
    border-radius: 0 0 4px 4px;
    margin-right: 1px;
    position: relative;
    cursor: pointer;
    box-shadow:
      inset 0 -6px 0 rgba(0,0,0,0.05),
      inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .key-white:last-child { margin-right: 0; }
  .key-white.down {
    background:
      linear-gradient(180deg, #e8dec6 0%, #d6c9ac 100%);
    box-shadow:
      inset 0 4px 8px rgba(0,0,0,0.25),
      inset 0 0 0 1px rgba(255,180,71,0.3);
  }
  .key-white .key-name {
    position: absolute;
    bottom: 8px; left: 0; right: 0;
    text-align: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: rgba(0,0,0,0.4);
    letter-spacing: 0.05em;
  }
  .key-white .key-qwerty {
    position: absolute;
    bottom: 22px; left: 0; right: 0;
    text-align: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    color: rgba(0,0,0,0.25);
  }
  .key-black {
    position: absolute;
    top: 0;
    height: 62%;
    background:
      linear-gradient(180deg, #2a2520 0%, #100d0a 90%, #060503 100%);
    border: 1px solid #000;
    border-radius: 0 0 3px 3px;
    cursor: pointer;
    box-shadow:
      inset 0 -3px 0 rgba(255,255,255,0.08),
      inset 0 1px 0 rgba(255,255,255,0.04),
      0 2px 3px rgba(0,0,0,0.5);
    z-index: 2;
  }
  .key-black.down {
    background:
      linear-gradient(180deg, #3a2e1a 0%, #1a1208 100%);
    box-shadow:
      inset 0 -2px 0 rgba(255,180,71,0.3),
      inset 0 0 8px rgba(255,138,44,0.3);
  }
  .key-black .key-qwerty {
    position: absolute;
    bottom: 6px; left: 0; right: 0;
    text-align: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    color: rgba(255,255,255,0.4);
  }

  /* Piano top accents */
  .piano-strip {
    height: 8px;
    background: linear-gradient(180deg, var(--chassis-1) 0%, #0a0807 100%);
    border-radius: 4px 4px 0 0;
    margin-bottom: 2px;
    box-shadow: inset 0 -1px 0 rgba(255,138,44,0.2);
  }
  .vent {
    display: grid;
    grid-template-columns: repeat(40, 1fr);
    gap: 2px;
    height: 6px;
    margin-bottom: 4px;
  }
  .vent-slit { background: #060503; border-radius: 1px; }

  /* Status pill */
  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-dim);
    letter-spacing: 0.18em;
    padding: 3px 8px;
    border: 1px solid #3a342c;
    border-radius: 99px;
    background: rgba(0,0,0,0.3);
  }
  .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green-glow);
  }
  .dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
  .dot.cyan { background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); }
  .dot.off { background: #2a2520; box-shadow: none; }

  /* IO strip */
  .io {
    margin-top: 14px;
    padding: 10px 16px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 18px;
  }
  .io-group {
    display: flex; align-items: center; gap: 14px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-dim);
    letter-spacing: 0.18em;
  }
  .jack {
    width: 22px; height: 22px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, #050403 0%, #050403 35%, #1a1612 38%, #1a1612 100%);
    border: 1px solid #2a2520;
    box-shadow:
      inset 0 1px 2px rgba(0,0,0,0.9),
      inset 0 0 0 4px #050403,
      0 1px 0 rgba(255,255,255,0.04);
    position: relative;
  }
  .jack::after {
    content: "";
    position: absolute;
    inset: 7px;
    background: #2a2520;
    border-radius: 50%;
  }

  /* small helpers */
  .stack { display: flex; flex-direction: column; gap: 10px; }
  .row { display: flex; gap: 8px; align-items: center; }
  .spacer { flex: 1; }

  /* Scale / Tuning module */
  .scale-row {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }
  .scale-presets {
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
  .preset-grid .sbtn { padding: 7px 4px; }
  .tuning-strip {
    padding: 12px 16px 14px;
  }
  .tuning-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #3a342c;
  }
  .tuning-cells {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
  }
  .tcell {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    padding: 6px 4px;
    background: rgba(0,0,0,0.25);
    border: 1px solid #2a2520;
    border-radius: 4px;
    cursor: ns-resize;
    touch-action: none;
    position: relative;
  }
  .tcell.black {
    background: rgba(0,0,0,0.45);
    border-color: #1a1612;
  }
  .tcell.touched {
    border-color: #6a4a20;
    box-shadow: 0 0 8px rgba(255,138,44,0.3) inset;
  }
  .tcell-pc {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--ink);
    letter-spacing: 0.06em;
    font-weight: 600;
  }
  .tcell.black .tcell-pc { color: var(--ink-dim); }
  .tcell-bar {
    width: 100%; height: 40px;
    background: #0a0908;
    border: 1px solid #2a2520;
    border-radius: 2px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
    position: relative;
    overflow: hidden;
  }
  .tcell-bar::before {
    content: "";
    position: absolute;
    top: 50%; left: 2px; right: 2px;
    height: 1px;
    background: var(--ink-faint);
  }
  .tcell-fill {
    position: absolute;
    left: 2px; right: 2px;
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber-glow);
    border-radius: 1px;
  }
  .tcell-fill.up { bottom: 50%; }
  .tcell-fill.down { top: 50%; }
  .tcell-val {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-dim);
    letter-spacing: 0.04em;
  }
  .tcell-val.nonzero { color: var(--amber); text-shadow: 0 0 4px var(--amber-glow); }

  .scale-info {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--ink-dim);
    letter-spacing: 0.12em;
    line-height: 1.5;
  }
  .scale-info .root { color: var(--cyan); }
  .scale-info .accidental { color: var(--amber); }

  /* === Patch browser strip ============================== */
  .patch-strip {
    display: grid;
    grid-template-columns: 200px 160px 1fr 80px;
    gap: 12px;
    margin-bottom: 14px;
    align-items: stretch;
    height: 240px;
  }
  .patch-strip-label {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .now-playing {
    border: 1px solid #2a2520;
    background: #0a0908;
    border-radius: 5px;
    padding: 10px 12px;
    font-family: "Share Tech Mono", monospace;
    color: var(--lcd-ink);
    text-shadow: 0 0 4px rgba(142,255,168,0.5);
  }
  .now-playing .np-cat {
    font-size: 10px;
    color: var(--lcd-dim);
    letter-spacing: 0.2em;
    margin-bottom: 4px;
  }
  .now-playing .np-name {
    font-size: 16px;
    letter-spacing: 0.06em;
    line-height: 1.1;
  }
  .now-playing .np-id {
    font-size: 10px;
    color: var(--lcd-dim);
    letter-spacing: 0.15em;
    margin-top: 6px;
  }
  .patch-strip-label .lbl-big {
    font-size: 14px;
    letter-spacing: 0.28em;
    color: var(--ink);
    font-weight: 600;
  }
  .patch-strip-label .lbl-sm {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
  }
  /* Engine toggle inside the INSTRUMENT panel */
  .engine-toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .engine-toggle .et-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--ink-dim);
  }
  .engine-toggle .et-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .et-btn {
    padding: 6px 4px;
    font-size: 10px;
    letter-spacing: 0.16em;
    font-weight: 600;
    background: linear-gradient(180deg, #2a2620 0%, #181612 100%);
    border: 1px solid #3a342c;
    border-top-color: #4a4239;
    border-bottom-color: #100d0a;
    color: var(--ink-dim);
    cursor: pointer;
    border-radius: 3px;
    font-family: "Saira Condensed", sans-serif;
  }
  .et-btn.active {
    color: var(--amber-hot);
    text-shadow: 0 0 4px var(--amber-glow);
    background: linear-gradient(180deg, #3a2a1a 0%, #1a1208 100%);
    border-color: #6a4a20;
  }
  .et-btn.cyan.active {
    color: #b8f5f5;
    text-shadow: 0 0 4px var(--cyan-glow);
    background: linear-gradient(180deg, #1a3434 0%, #0a1818 100%);
    border-color: #2a6a6a;
  }
  .engine-toggle .et-status {
    font-family: "JetBrains Mono", monospace;
    font-size: 8.5px;
    letter-spacing: 0.12em;
    color: var(--ink-dim);
    padding: 4px 6px;
    background: #0a0908;
    border: 1px solid #2a2520;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* category column */
  .cat-list {
    padding: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .cat-list::-webkit-scrollbar { width: 6px; }
  .cat-list::-webkit-scrollbar-track { background: #0a0908; }
  .cat-list::-webkit-scrollbar-thumb { background: #2a2520; border-radius: 3px; }
  .cat-btn {
    padding: 5px 8px;
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--ink-dim);
    cursor: pointer;
    text-align: left;
    display: flex; justify-content: space-between; align-items: center;
    font-family: "Saira Condensed", sans-serif;
  }
  .cat-btn:hover { color: var(--ink); background: rgba(255,255,255,0.03); }
  .cat-btn.active {
    color: var(--amber-hot);
    background: linear-gradient(90deg, rgba(255,138,44,0.18) 0%, rgba(255,138,44,0.02) 100%);
    border-color: rgba(255,138,44,0.35);
    text-shadow: 0 0 4px var(--amber-glow);
  }
  .cat-btn .cat-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 8.5px;
    color: var(--ink-faint);
    letter-spacing: 0.06em;
  }
  .cat-btn.active .cat-count { color: var(--amber); }

  /* patches grid */
  .patch-cards-wrap {
    padding: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .patch-cards-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 4px 6px;
    border-bottom: 1px solid #2a2520;
    margin-bottom: 6px;
  }
  .patch-cards-head .pch-title {
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--ink);
    font-weight: 600;
  }
  .patch-cards-head .pch-meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
  }
  .patch-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 38px;
    gap: 5px;
    overflow-y: auto;
    padding-right: 4px;
  }
  .patch-cards::-webkit-scrollbar { width: 6px; }
  .patch-cards::-webkit-scrollbar-track { background: #0a0908; border-radius: 3px; }
  .patch-cards::-webkit-scrollbar-thumb { background: #3a342c; border-radius: 3px; }
  .patch-cards::-webkit-scrollbar-thumb:hover { background: #4a4239; }

  .patch-card {
    position: relative;
    padding: 5px 8px 4px 18px;
    border-radius: 3px;
    background: linear-gradient(180deg, #1a1813 0%, #0e0d0a 100%);
    border: 1px solid #2a2520;
    border-top-color: #3a342c;
    border-bottom-color: #100d0a;
    cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.04),
      inset 0 -1px 0 rgba(0,0,0,0.5);
    transition: all 0.1s;
    text-align: left;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
  }
  .patch-card:hover {
    border-color: #4a4239;
    background: linear-gradient(180deg, #221f1a 0%, #14120e 100%);
  }
  .patch-card.active {
    background: linear-gradient(180deg, #3a2a1a 0%, #1a1208 100%);
    border-color: #6a4a20;
    box-shadow:
      inset 0 1px 0 rgba(255,200,140,0.15),
      inset 0 0 12px rgba(255,138,44,0.15),
      0 0 12px rgba(255,138,44,0.2);
  }
  .patch-card .pc-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    color: var(--ink-faint);
    letter-spacing: 0.05em;
    line-height: 1;
  }
  .patch-card.active .pc-num { color: var(--amber); }
  .patch-card .pc-name {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .patch-card.active .pc-name {
    color: var(--amber-hot);
    text-shadow: 0 0 6px var(--amber-glow);
  }
  .patch-card .pc-led {
    position: absolute;
    top: 50%; left: 6px;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #2a2520;
    box-shadow: inset 0 0 0 1px #0a0908;
  }
  .patch-card.active .pc-led {
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber-glow), inset 0 0 0 1px #1a1208;
  }
  .patch-nav {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .pn-btn {
    width: 100%; height: 30px;
    border-radius: 4px;
    background: linear-gradient(180deg, #3a342c 0%, #1f1c18 100%);
    border: 1px solid #4a423a;
    border-top-color: #5e564b;
    border-bottom-color: #14110d;
    color: var(--ink);
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 13px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -2px 0 rgba(0,0,0,0.4),
      0 2px 0 #0a0807;
  }
  .pn-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 4px rgba(0,0,0,0.7); }
  .pn-readout {
    width: 100%;
    font-family: "Share Tech Mono", monospace;
    color: var(--amber);
    text-shadow: 0 0 4px var(--amber-glow);
    font-size: 13px;
    letter-spacing: 0.05em;
    padding: 4px 0;
    border: 1px solid #2a2520;
    background: #0a0908;
    border-radius: 3px;
    text-align: center;
    line-height: 1.1;
  }
  .pn-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    color: var(--ink-faint);
    letter-spacing: 0.15em;
  }


  .scale-row {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }
  .scale-presets {
    padding: 14px 14px 12px;
  }
  .scale-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 6px;
  }
  .scale-info {
    margin-top: 10px;
    padding: 8px 10px;
    background: #0a0908;
    border: 1px solid #2a2520;
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--lcd-ink);
    text-shadow: 0 0 4px rgba(142,255,168,0.4);
    letter-spacing: 0.06em;
    line-height: 1.5;
  }
  .scale-info .lbl { color: var(--lcd-dim); margin-right: 6px; }
  .tuning-bay {
    padding: 14px 14px 12px;
    display: flex; flex-direction: column;
  }
  .cents-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    flex: 1;
    margin-top: 6px;
  }
  .cent-cell {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: #0a0908;
    border: 1px solid #2a2520;
    border-radius: 6px;
    padding: 10px 6px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  }
  .cent-cell.black-note { background: #050403; }
  .cent-cell.tuned { border-color: #5a4322; box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 10px rgba(255,138,44,0.12); }
  .cent-note {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--ink);
  }
  .cent-cell.black-note .cent-note { color: var(--ink-dim); }
  /* The fader track now FILLS the cell height — a big, obviously-draggable control. */
  .cent-track {
    position: relative;
    width: 34px;
    flex: 1;
    min-height: 96px;
    background: linear-gradient(180deg, rgba(255,138,44,0.08) 0%, rgba(0,0,0,0.35) 50%, rgba(111,230,230,0.08) 100%);
    border: 1px solid #1a1612;
    border-radius: 5px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
    cursor: ns-resize;
    touch-action: none;
  }
  .cent-axis {
    /* centre line (0 cents) */
    position: absolute;
    left: 4px; right: 4px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--ink-faint);
    border-radius: 1px;
  }
  .cent-fill {
    position: absolute;
    left: 7px; right: 7px;
    background: var(--amber);
    box-shadow: 0 0 8px var(--amber-glow);
    border-radius: 2px;
  }
  .cent-fill.neg { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
  /* The visible handle that tracks the value. */
  .cent-thumb {
    position: absolute;
    left: -3px; right: -3px;
    height: 16px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #6a5e50 0%, #3a3228 45%, #1a1612 100%);
    border: 1px solid #100d0a;
    border-top-color: #7a6e60;
    border-radius: 4px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -2px 0 rgba(0,0,0,0.5),
      0 2px 5px rgba(0,0,0,0.6);
    pointer-events: none;
  }
  .cent-thumb::after {
    content: "";
    position: absolute;
    left: 5px; right: 5px; top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: var(--ink-dim);
    border-radius: 1px;
  }
  .cent-thumb.on::after { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
  .cent-thumb.on.neg::after { background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); }
  .cent-value {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-dim);
    letter-spacing: 0.04em;
    min-height: 16px;
  }
  .cent-value.active { color: var(--amber); text-shadow: 0 0 5px var(--amber-glow); }
  .cent-value.active.neg { color: var(--cyan); text-shadow: 0 0 5px var(--cyan-glow); }
  .scale-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: var(--ink-faint);
    letter-spacing: 0.16em;
  }
  /* Detuned key indicator */
  .key-detune-dot {
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan-glow);
    z-index: 3;
  }
  .key-detune-dot.pos { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
  .key-black .key-detune-dot { top: auto; bottom: 22px; }


  .hint {
    margin-top: 16px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: 0.1em;
    text-align: center;
  }
  .hint kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid #3a342c;
    border-bottom-width: 2px;
    border-radius: 3px;
    color: var(--ink);
    background: #1a1612;
    margin: 0 2px;
    font-size: 10px;
  }
  /* === Rhythm styles ==================================== */
  .rhythm-styles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
  }
  .rhythm-bar {
    display: grid;
    grid-template-columns: 1fr 70px;
    gap: 6px;
    margin-bottom: 8px;
  }
  .rhythm-start {
    padding: 8px 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    font-weight: 700;
    font-family: "Saira Condensed", sans-serif;
    background: linear-gradient(180deg, #2a2620 0%, #181612 100%);
    border: 1px solid #3a342c;
    border-top-color: #4a4239;
    border-bottom-color: #100d0a;
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
    cursor: pointer;
    border-radius: 4px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 -2px 0 rgba(0,0,0,0.4),
      0 2px 0 #0a0807;
  }
  .rhythm-start.active {
    color: var(--red);
    text-shadow: 0 0 10px var(--red);
    background: linear-gradient(180deg, #3a1a1a 0%, #1a0a0a 100%);
    border-color: #6a2828;
  }
  .rhythm-start:active { transform: translateY(2px); box-shadow: inset 0 1px 4px rgba(0,0,0,0.7); }
  .mini-tog {
    font-size: 10px; letter-spacing: 0.15em; font-weight: 600;
    background: linear-gradient(180deg, #2a2620 0%, #181612 100%);
    border: 1px solid #3a342c;
    border-top-color: #4a4239;
    border-bottom-color: #100d0a;
    color: var(--ink-dim);
    cursor: pointer; border-radius: 4px;
    font-family: "Saira Condensed", sans-serif;
  }
  .mini-tog.active {
    color: var(--cyan);
    text-shadow: 0 0 6px var(--cyan-glow);
    border-color: #2a6a6a;
    background: linear-gradient(180deg, #1a3434 0%, #0a1818 100%);
  }
  .rhythm-viz {
    background: #0a0908;
    border: 1px solid #2a2520;
    border-radius: 4px;
    padding: 6px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
  }
  .rv-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 6px;
  }
  .rv-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 8.5px;
    color: var(--ink-faint);
    letter-spacing: 0.12em;
    text-align: right;
  }
  .rv-cells {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 2px;
  }
  .rv-cell {
    height: 10px;
    border-radius: 2px;
    background: #15120e;
    border: 1px solid #1f1a14;
  }
  .rv-cell.beat { background: #1c1812; }
  .rv-cell.on.kck { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); border-color: var(--amber); }
  .rv-cell.on.snr { background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); border-color: var(--cyan); }
  .rv-cell.on.hat { background: #d0c890; box-shadow: 0 0 4px rgba(208, 200, 144, 0.6); border-color: #d0c890; }
  .rv-cell.cur { outline: 1px solid var(--green); outline-offset: -1px; }
  .rv-cell.cur:not(.on) { background: #1a2c20; box-shadow: inset 0 0 4px var(--green-glow); }

  .pads-wrap.compact { height: 130px; gap: 4px; }
  .pads-wrap.compact .pad-name { font-size: 9px; top: 4px; left: 4px; }
  .pads-wrap.compact .pad-label { font-size: 8px; bottom: 3px; left: 4px; }

  /* ===== Re-integrated workstation features (Scale Assist, MIDI, chord pads) ===== */

  /* ── Keybed glows ─────────────────────────────────────────────────────────
     The keyboard stays a normal white & black. SCALE notes glow across all
     octaves; a HELD CHORD's notes glow in their own hue (chord rule is later,
     so it wins); the KEY NOTE (scale tonic / chord root) gets a brighter,
     stroked glow in a third hue. All four hues are USER-TUNABLE from the
     Tweaks panel via the --kb-* custom properties (fallbacks = defaults:
     scale red #ff2740, chord green #14e16e, both key notes azure #2b7fff);
     every tint/bloom/edge shade is derived from them with color-mix().
     The glow is "lit from the base": a sharp LED edge + a soft inset bloom
     rising from the bottom + a faint tint — crisp, not a muddy whole-key wash.
     (Inset shadows are used because the .piano wrapper clips outer glows.) ── */
  /* DEFAULT mode "solid": white keys take the SAME half-full colour treatment
     as black keys — crisp opaque fill on the front (lower) portion, no bloom.
     The alternative "glow" mode (soft gradient bloom) is opt-in from the
     Tweaks panel via html[data-kb-style="glow"]. */
  .key-white.in-scale,
  .key-white.scale-root {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%,
      var(--kb-scale, #ff2740) 62%,
      color-mix(in srgb, var(--kb-scale, #ff2740) 84%, #000000) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }
  html[data-kb-style="glow"] .key-white.in-scale,
  html[data-kb-style="glow"] .key-white.scale-root {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 44%,
      color-mix(in srgb, var(--kb-scale, #ff2740) 17%, #ffffff) 100%);
    box-shadow:
      inset 0 -3px 0 var(--kb-scale, #ff2740),
      inset 0 -18px 20px -9px color-mix(in srgb, var(--kb-scale, #ff2740) 62%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.7);
  }
  /* Black keys, solid mode: clean solid colour fill on the FRONT (lower) half —
     opaque, sharp. Top half stays black. In GLOW mode they take the same soft
     bloom-from-the-base treatment as the white keys (LED edge + rising glow). */
  .key-black.in-scale,
  .key-black.scale-root {
    background: linear-gradient(180deg, #2a2520 0%, #14110d 50%,
      var(--kb-scale, #ff2740) 50%,
      color-mix(in srgb, var(--kb-scale, #ff2740) 82%, #000000) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 3px rgba(0,0,0,0.5);
  }
  html[data-kb-style="glow"] .key-black.in-scale,
  html[data-kb-style="glow"] .key-black.scale-root {
    background: linear-gradient(180deg, #2a2520 0%, #14110d 45%,
      color-mix(in srgb, var(--kb-scale, #ff2740) 50%, #14110d) 100%);
    box-shadow:
      inset 0 -3px 0 var(--kb-scale, #ff2740),
      inset 0 -16px 18px -8px color-mix(in srgb, var(--kb-scale, #ff2740) 72%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 3px rgba(0,0,0,0.5);
  }
  /* KEY NOTE of the SCALE (tonic). Solid default: EXACTLY the same half-fill
     geometry as the other in-scale keys — the blue hue alone marks the root
     (no taller fill, no stroke ring). Glow mode keeps its brighter bloom. */
  .key-white.scale-root {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%,
      var(--kb-scale-root, #2b7fff) 62%,
      color-mix(in srgb, var(--kb-scale-root, #2b7fff) 84%, #000000) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }
  html[data-kb-style="glow"] .key-white.scale-root {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 34%,
      color-mix(in srgb, var(--kb-scale-root, #2b7fff) 20%, #ffffff) 100%);
    box-shadow:
      inset 0 0 0 3px color-mix(in srgb, var(--kb-scale-root, #2b7fff) 95%, transparent),
      inset 0 -3px 0 var(--kb-scale-root, #2b7fff),
      inset 0 -26px 26px -8px color-mix(in srgb, var(--kb-scale-root, #2b7fff) 85%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .key-black.scale-root {
    background: linear-gradient(180deg, #2a2520 0%, #14110d 50%,
      var(--kb-scale-root, #2b7fff) 50%,
      color-mix(in srgb, var(--kb-scale-root, #2b7fff) 82%, #000000) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 3px rgba(0,0,0,0.5);
  }
  html[data-kb-style="glow"] .key-black.scale-root {
    background: linear-gradient(180deg, #2a2520 0%, #14110d 40%,
      color-mix(in srgb, var(--kb-scale-root, #2b7fff) 55%, #14110d) 100%);
    box-shadow:
      inset 0 -3px 0 var(--kb-scale-root, #2b7fff),
      inset 0 -22px 22px -8px color-mix(in srgb, var(--kb-scale-root, #2b7fff) 80%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 3px rgba(0,0,0,0.5);
  }

  /* Native select styled for the brushed chassis (MIDI device picker) */
  .pn-select {
    flex: 1;
    min-width: 0;
    background: #0a0908;
    color: var(--ink);
    border: 1px solid #2a2520;
    border-radius: 4px;
    padding: 7px 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    cursor: pointer;
  }
  .pn-select:disabled { opacity: 0.5; cursor: default; }
  .pn-select:focus { outline: 1px solid var(--amber); border-color: var(--amber); }

  /* ════════════════════════════════════════════════════════════════════════
     LAYOUT REWORK — split chassis (sticky controls+piano / scrolling modules),
     rebalanced Scale Assist + Chord Pads, and unified Studio I/O buttons.
     ════════════════════════════════════════════════════════════════════════ */

  /* ── Split chassis: a top deck and a lower deck that read as one console.
        The seam is where the top deck pins (see piano-skin.css .pn-mount-fixed). */
  .chassis-top {
    border-radius: 22px 22px 0 0;
    border-bottom: none;
    padding-bottom: 16px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 30px 60px -20px rgba(0, 0, 0, 0.9);
  }
  .chassis-bottom {
    border-radius: 0 0 22px 22px;
    border-top: 1px solid #14110d;
    padding-top: 16px;
  }
  .chassis-top::before    { inset: 6px 6px 0; border-radius: 16px 16px 0 0; border-bottom: none; }
  .chassis-bottom::before { inset: 0 6px 6px; border-radius: 0 0 16px 16px; border-top: none; }

  /* ── 09/10 row: CHORD PADS dominant (right 920 > left 664), balanced, tall so pads are big ── */
  .scale-row.chord-row {
    grid-template-columns: 664px 920px;   /* 664 + 12 gap + 920 = 1596 inner */
    gap: 12px;
    align-items: stretch;
    min-height: 480px;
  }

  /* ── 09 SCALE ASSIST: controls + a modest notes display, centered as a group so
        the panel never feels lopsided regardless of how tall the pad bay is ── */
  /* MODE list — the full scale catalogue lives in a fixed-height internal
     scroll (~3 button rows visible on desktop) so module 02 keeps the same
     height as the Chord Pads bay beside it. Groups ordered by popularity. */
  .mode-scroll {
    max-height: 104px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #3a342c transparent;
  }
  .mode-scroll::-webkit-scrollbar { width: 8px; }
  .mode-scroll::-webkit-scrollbar-track { background: transparent; }
  .mode-scroll::-webkit-scrollbar-thumb {
    background: #3a342c; border-radius: 4px;
    border: 2px solid transparent; background-clip: content-box;
  }
  .mode-group + .mode-group { margin-top: 10px; }
  .mode-group-lbl {
    font-family: "JetBrains Mono", monospace;
    font-size: 8.5px; letter-spacing: 0.22em;
    color: var(--ink-dim); opacity: 0.75;
  }
  .mode-grid { grid-template-columns: repeat(7, 1fr); }

  .scale-assist { display: flex; flex-direction: column; }
  .scale-assist .sa-cols {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 16px;
    align-items: stretch;
    justify-content: center;
  }
  .scale-assist .sa-controls { min-width: 0; flex: 0 0 auto; }

  /* Scale/notes readout = a fixed-height strip (NOT stretched), so the tone bars
     stay a comfortable size; it adapts horizontally to the scale's tone count. */
  .scale-readout {
    flex: 0 0 auto;
    background: linear-gradient(180deg, #0e2018 0%, #0a1611 100%);
    border: 1px solid #2a4a38;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
    display: flex; flex-direction: column; gap: 12px;
  }
  .scale-readout .sr-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    border-bottom: 1px solid #1d3a2a;
    padding-bottom: 10px;
  }
  .scale-readout .sr-head-l { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .scale-readout .sr-lbl {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px; letter-spacing: 0.2em; color: var(--lcd-dim);
  }
  .scale-readout .sr-name {
    font-family: "Share Tech Mono", monospace;
    font-size: 24px; letter-spacing: 0.04em; line-height: 1;
    color: var(--lcd-ink); text-shadow: 0 0 8px rgba(142, 255, 168, 0.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .scale-readout .sr-notes-lbl {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px; letter-spacing: 0.18em; color: var(--ink-dim);
    white-space: nowrap; flex: 0 0 auto;
  }

  /* ONE non-wrapping line of tone bars at a fixed comfortable height; the chips
     flex to share the width, so 5 tones or 12 tones both fit on one line. */
  .scale-readout .sr-notes {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    height: 150px;
    overflow: hidden;
  }
  .sr-chip {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Saira Condensed", sans-serif;
    font-weight: 700;
    font-size: 24px; letter-spacing: 0.02em; line-height: 1;
    color: var(--lcd-ink);
    background: linear-gradient(180deg, #143226 0%, #0c1e16 100%);
    border: 1px solid #2a5a40;
    border-radius: 6px;
    text-shadow: 0 0 6px rgba(142, 255, 168, 0.4);
  }
  .sr-chip.root {
    color: #1a1208;
    background: linear-gradient(180deg, #ffd28a 0%, #ffb347 100%);
    border-color: #ffcf78;
    text-shadow: none;
    box-shadow: 0 0 12px var(--amber-glow);
  }

  /* ── 10 CHORD PADS: large taller-than-wide pads, 4×2, fill the tall bay ── */
  .chord-bay { display: flex; flex-direction: column; }
  .pads-wrap.chord-pads {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Reset the base .pads-wrap `grid-template-rows: 1fr 1fr 1fr 1fr` (it reserves
       4 rows AND 1fr won't size to a flex grid in Chromium); then let the pads
       flow into as many fixed-height rows as the scale needs — 2 rows for ≤8 pads
       (major/pentatonic), 3 rows for the 12-tone chromatic scale. */
    grid-template-rows: none;
    grid-auto-rows: 200px;
    gap: 14px;
    height: auto;
    flex: 1;
    align-content: center;        /* vertically centre the pad rows in the bay */
    min-height: 0;
    margin-top: 10px;
  }
  .chord-pad {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 22px 12px;
    gap: 6px;
  }
  .chord-pad .cp-roman {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px; letter-spacing: 0.18em; line-height: 1;
    color: var(--ink-dim);
  }
  .chord-pad .cp-name {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 700;
    font-size: 50px; letter-spacing: 0.01em; line-height: 1;
    color: var(--cyan);
    text-shadow: 0 0 12px var(--cyan-glow);
    white-space: nowrap;
  }
  .chord-pad .cp-notes {
    font-family: "Share Tech Mono", monospace;
    font-size: 16px; letter-spacing: 0.14em; line-height: 1;
    color: var(--ink-dim);
    text-shadow: 0 0 6px rgba(111, 230, 230, 0.25);
  }
  .chord-pad.hit .cp-roman,
  .chord-pad.hit .cp-name,
  .chord-pad.hit .cp-notes { color: #1a1208; text-shadow: none; }

  /* ── Studio I/O (12): uniform button sizing across layout + recording ── */
  .studio-io { gap: 28px; }
  .studio-btns { gap: 8px; }
  .studio-btn {
    height: 34px;
    min-width: 104px;
    padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: "Saira Condensed", sans-serif;
    font-weight: 600;
    font-size: 11px; letter-spacing: 0.16em;
    background: linear-gradient(180deg, #2a2620 0%, #181612 100%);
    border: 1px solid #3a342c;
    border-top-color: #4a4239;
    border-bottom-color: #100d0a;
    color: var(--ink);
    cursor: pointer;
    border-radius: 4px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 -2px 0 rgba(0, 0, 0, 0.4),
      0 2px 0 #0a0807;
    transition: all 0.1s;
  }
  .studio-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7); }
  .studio-btn.active {
    color: var(--amber-hot);
    text-shadow: 0 0 6px var(--amber-glow);
    background: linear-gradient(180deg, #3a2a1a 0%, #1a1208 100%);
    border-color: #6a4a20;
  }

  /* ════════════ PHASE 2 — UX quick wins (focus, dim, badge, ruler) ════════════ */

  /* Keyboard focus rings on the real <button>/<select> controls. */
  .pn-synth button:focus-visible,
  .pn-synth select:focus-visible,
  .sbtn:focus-visible, .tbtn:focus-visible, .oct-btn:focus-visible, .studio-btn:focus-visible,
  .cat-btn:focus-visible, .et-btn:focus-visible, .pn-btn:focus-visible, .mini-tog:focus-visible,
  .rhythm-start:focus-visible, .patch-card:focus-visible, .pad:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
    z-index: 2;
  }

  /* Modules that the SAMPLE engine ignores are dimmed + tagged. */
  .module.dim { opacity: 0.5; }
  .module .module-dim-tag {
    position: absolute;
    bottom: 10px; right: 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 8px; letter-spacing: 0.14em;
    color: var(--cyan);
    border: 1px solid #2a6a6a;
    border-radius: 3px;
    padding: 2px 6px;
    background: rgba(10, 24, 24, 0.6);
    pointer-events: none;
  }

  /* Always-visible active key / scale / voice-mode badge on the piano frame. */
  .piano-badge {
    position: absolute;
    top: 12px; right: 16px;
    z-index: 4;
    display: flex; gap: 6px; align-items: center;
    pointer-events: none;
  }
  .pb-key {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 0.12em;
    color: var(--ink-dim);
    padding: 4px 10px;
    border: 1px solid #3a342c; border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
  }
  .pb-key.on { color: var(--amber); border-color: #6a4a20; text-shadow: 0 0 6px var(--amber-glow); }
  .pb-tag {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px; letter-spacing: 0.12em;
    color: var(--ink-dim);
    padding: 3px 7px;
    border: 1px solid #3a342c; border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
  }
  .pb-tag.cyan { color: var(--cyan); border-color: #2a6a6a; }

  /* Tuning ruler — faint ±25¢ guide lines behind each cent fader (0¢ is .cent-axis). */
  .cent-track {
    background-image:
      linear-gradient(180deg, transparent calc(25% - 1px), rgba(230,225,210,0.10) 25%, transparent calc(25% + 1px)),
      linear-gradient(180deg, transparent calc(75% - 1px), rgba(230,225,210,0.10) 75%, transparent calc(75% + 1px)),
      linear-gradient(180deg, rgba(255,138,44,0.08) 0%, rgba(0,0,0,0.35) 50%, rgba(111,230,230,0.08) 100%);
  }

  /* ════════════ PHASE 3 — features + visualizations ════════════ */

  /* Scale-degree numbers on highlighted keys (1..7), root in warm amber. */
  .key-white .key-degree {
    position: absolute;
    top: 5px; left: 0; right: 0;
    text-align: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px; font-weight: 700;
    color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
  }
  .key-white .key-degree.root { color: color-mix(in srgb, var(--kb-scale-root, #2b7fff) 65%, #000000); }
  .key-white.chord-key .key-degree { color: color-mix(in srgb, var(--kb-chord, #14e16e) 42%, #000000); }

  /* Notes of the currently-held chord pad glow in the chord hue — same crisp
     "lit from the base" treatment as the scale glow. Placed after the scale
     rules so a chord note overrides its scale glow. */
  .key-white.chord-key {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%,
      var(--kb-chord, #14e16e) 62%,
      color-mix(in srgb, var(--kb-chord, #14e16e) 84%, #000000) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }
  html[data-kb-style="glow"] .key-white.chord-key {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 44%,
      color-mix(in srgb, var(--kb-chord, #14e16e) 18%, #ffffff) 100%);
    box-shadow:
      inset 0 0 0 2px color-mix(in srgb, var(--kb-chord, #14e16e) 90%, transparent),
      inset 0 -3px 0 var(--kb-chord, #14e16e),
      inset 0 -18px 20px -9px color-mix(in srgb, var(--kb-chord, #14e16e) 66%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .key-black.chord-key {
    background: linear-gradient(180deg, #2a2520 0%, #14110d 50%,
      var(--kb-chord, #14e16e) 50%,
      color-mix(in srgb, var(--kb-chord, #14e16e) 78%, #000000) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 3px rgba(0,0,0,0.5);
  }
  html[data-kb-style="glow"] .key-black.chord-key {
    background: linear-gradient(180deg, #2a2520 0%, #14110d 45%,
      color-mix(in srgb, var(--kb-chord, #14e16e) 50%, #14110d) 100%);
    box-shadow:
      inset 0 -3px 0 var(--kb-chord, #14e16e),
      inset 0 -16px 18px -8px color-mix(in srgb, var(--kb-chord, #14e16e) 72%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 3px rgba(0,0,0,0.5);
  }
  /* KEY NOTE of the CHORD (root) — same brighter/stroked treatment in its own
     hue. Lives after .chord-key so it wins on the shared keys. */
  .key-white.chord-key.chord-root {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%,
      var(--kb-chord-root, #2b7fff) 62%,
      color-mix(in srgb, var(--kb-chord-root, #2b7fff) 84%, #000000) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }
  html[data-kb-style="glow"] .key-white.chord-key.chord-root {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 34%,
      color-mix(in srgb, var(--kb-chord-root, #2b7fff) 20%, #ffffff) 100%);
    box-shadow:
      inset 0 0 0 3px color-mix(in srgb, var(--kb-chord-root, #2b7fff) 95%, transparent),
      inset 0 -3px 0 var(--kb-chord-root, #2b7fff),
      inset 0 -26px 26px -8px color-mix(in srgb, var(--kb-chord-root, #2b7fff) 85%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.7);
  }
  /* Solid mode paints the label zone — flip the dark key labels to white on
     any colour-filled white key so they stay readable. */
  html:not([data-kb-style="glow"]) .key-white.in-scale .key-name,
  html:not([data-kb-style="glow"]) .key-white.scale-root .key-name,
  html:not([data-kb-style="glow"]) .key-white.chord-key .key-name {
    color: rgba(255,255,255,0.92);
  }
  html:not([data-kb-style="glow"]) .key-white.in-scale .key-qwerty,
  html:not([data-kb-style="glow"]) .key-white.scale-root .key-qwerty,
  html:not([data-kb-style="glow"]) .key-white.chord-key .key-qwerty {
    color: rgba(255,255,255,0.55);
  }
  .key-black.chord-key.chord-root {
    background: linear-gradient(180deg, #2a2520 0%, #14110d 50%,
      var(--kb-chord-root, #2b7fff) 50%,
      color-mix(in srgb, var(--kb-chord-root, #2b7fff) 82%, #000000) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 3px rgba(0,0,0,0.5);
  }
  html[data-kb-style="glow"] .key-black.chord-key.chord-root {
    background: linear-gradient(180deg, #2a2520 0%, #14110d 40%,
      color-mix(in srgb, var(--kb-chord-root, #2b7fff) 55%, #14110d) 100%);
    box-shadow:
      inset 0 -3px 0 var(--kb-chord-root, #2b7fff),
      inset 0 -22px 22px -8px color-mix(in srgb, var(--kb-chord-root, #2b7fff) 80%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 3px rgba(0,0,0,0.5);
  }
  .key-white.chord-key.chord-root .key-degree { color: color-mix(in srgb, var(--kb-chord-root, #2b7fff) 65%, #000000); }

  /* ── Keybed colour pickers — piano-only section inside the shared Tweaks
     panel (rendered as MzTweaksPanel children; base row styles come from the
     panel's own .mzp-* CSS). ── */
  /* .mzp-row.kbc-row (2 classes) so this outranks the panel's own inline
     .mzp-row { flex-direction: column } which comes later in document order. */
  .mzp-row.kbc-row { display: flex; flex-direction: row; align-items: center; gap: 8px; }
  .mzp-row.kbc-row .mzp-lbl { flex: 1; min-width: 0; }
  .kbc-hex {
    font-family: "JetBrains Mono", monospace; font-size: 11px;
    color: var(--sub); font-variant-numeric: tabular-nums; letter-spacing: .02em;
  }
  .kbc-swatch {
    appearance: none; -webkit-appearance: none;
    width: 36px; height: 26px; padding: 0; flex-shrink: 0;
    border: 1px solid var(--line); border-radius: 8px;
    background: transparent; cursor: pointer;
  }
  .kbc-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
  .kbc-swatch::-webkit-color-swatch { border: none; border-radius: 5px; }
  .kbc-swatch::-moz-color-swatch { border: none; border-radius: 5px; }
  .kbc-reset {
    appearance: none; width: 100%; height: 30px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 50%, transparent);
    color: var(--sub); font: inherit; font-weight: 600;
  }
  .kbc-reset:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }

  /* Pressed state — a brightness knock-down that COMPOSES over any highlight
     (scale or chord), so you always see which keys are sounding. */
  .key-white.down, .key-black.down { filter: brightness(0.82); }

  /* ════════════ Section-03 view switch + FL-style PIANO ROLL ════════════ */
  .area-select {
    background: #0a0908; color: var(--ink);
    border: 1px solid #3a342c; border-radius: 4px;
    padding: 4px 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px; letter-spacing: 0.06em; cursor: pointer;
  }
  .area-select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

  .roll-toolbar { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; }
  .roll-toolbar .roll-meta {
    font-family: "JetBrains Mono", monospace; font-size: 10px;
    color: var(--ink-dim); letter-spacing: 0.1em;
  }
  .roll-toolbar .spacer { flex: 1; }
  .rt-btn {
    height: 28px; min-width: 34px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #2a2620 0%, #181612 100%);
    border: 1px solid #3a342c; border-top-color: #4a4239; border-bottom-color: #100d0a;
    color: var(--ink); border-radius: 4px; cursor: pointer;
    font-family: "Saira Condensed", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.1em;
  }
  .rt-btn:active { transform: translateY(1px); }
  .rt-btn.quant { color: var(--cyan); border-color: #2a6a6a; }

  .roll {
    flex: 1; min-height: 380px; margin-top: 4px;
    background: #080706; border: 1px solid #2a2520; border-radius: 6px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
    overflow: hidden; position: relative;
    display: flex; flex-direction: column;
  }
  .roll-empty { align-items: center; justify-content: center; text-align: center; padding: 24px; }
  .roll-empty-big {
    font-family: "Saira Condensed", sans-serif; font-weight: 700;
    font-size: 20px; letter-spacing: 0.2em; color: var(--ink-dim);
  }
  .roll-empty-sub {
    font-family: "JetBrains Mono", monospace; font-size: 11px;
    color: var(--ink-faint); letter-spacing: 0.05em; line-height: 1.7;
    margin-top: 10px; max-width: 470px;
  }

  /* Two-axis scroller holding the zoomable timeline. Frozen panes via sticky:
     the ruler sticks to the top, the keyboard gutter sticks to the left. */
  .roll-scroll {
    flex: 1; min-height: 0;
    overflow: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #4a4239 #0a0908;
  }
  .roll-scroll::-webkit-scrollbar { height: 9px; width: 9px; }
  .roll-scroll::-webkit-scrollbar-track { background: #0a0908; }
  .roll-scroll::-webkit-scrollbar-thumb { background: #3a342c; border-radius: 5px; }
  .roll-scroll::-webkit-scrollbar-thumb:hover { background: #4a4239; }
  .roll-scroll::-webkit-scrollbar-corner { background: #0a0908; }
  .roll-canvas { position: relative; min-width: 100%; }

  /* header row (frozen to top) = corner (frozen to left too) + bar ruler */
  .roll-headrow { display: flex; position: sticky; top: 0; z-index: 4; }
  .roll-corner {
    position: sticky; left: 0; z-index: 6; flex: 0 0 auto;
    background: #100d0a;
    border-right: 1px solid #2a2520; border-bottom: 1px solid #2a2520;
  }
  .roll-ruler {
    position: relative; flex: 0 0 auto;
    background: #0c0b0a; border-bottom: 1px solid #2a2520;
    overflow: hidden;
  }
  .roll-barnum {
    position: absolute; top: 3px; transform: translateX(4px);
    font-family: "JetBrains Mono", monospace; font-size: 9px;
    color: var(--ink-dim); letter-spacing: 0.08em; pointer-events: none;
  }
  .roll-rhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff4d4d; opacity: 0.8; }

  /* body row = frozen keyboard gutter + scrolling grid */
  .roll-bodyrow { display: flex; }
  .roll-gutter {
    position: sticky; left: 0; z-index: 5; flex: 0 0 auto;
    background: #0a0908; border-right: 1px solid #2a2520;
    display: flex; flex-direction: column;
  }
  .roll-key {
    box-sizing: border-box; flex: 0 0 auto; position: relative;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 5px; cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.55);
  }
  .roll-key.wht { background: linear-gradient(90deg, #968f84 0%, #cfc8b8 100%); }
  .roll-key.blk { background: linear-gradient(90deg, #0d0b08 0%, #1b1712 100%); }
  .roll-key.c   { background: linear-gradient(90deg, #b0a07e 0%, #e6dabe 100%); }
  .roll-key:active { filter: brightness(0.85); }
  .roll-key-lbl { font-family: "JetBrains Mono", monospace; font-size: 8px; letter-spacing: 0.02em; }
  .roll-key.wht .roll-key-lbl, .roll-key.c .roll-key-lbl { color: rgba(0,0,0,0.62); }
  .roll-key.blk .roll-key-lbl { color: rgba(255,255,255,0.5); }

  .roll-grid { position: relative; flex: 0 0 auto; cursor: crosshair; overflow: hidden; }
  .roll-row { position: absolute; left: 0; right: 0; }
  .roll-row.blk { background: rgba(255,255,255,0.025); }
  .roll-row.oct { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
  /* grid lines: sub-beat (faint) · beat (medium) · bar (strong) */
  .roll-line { position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; }
  .roll-line.sub  { background: rgba(255,255,255,0.045); }
  .roll-line.beat { background: rgba(255,255,255,0.11); }
  .roll-line.bar  { background: rgba(255,255,255,0.22); }
  .roll-note {
    position: absolute; border-radius: 2px; min-width: 2px;
    background: linear-gradient(180deg, #ffc04a 0%, #ff8a2c 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 0 4px rgba(255,138,44,0.35);
    cursor: grab; touch-action: none;
  }
  .roll-note.on {
    background: linear-gradient(180deg, #9bffb6 0%, #34d06a 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 0 9px var(--green-glow);
  }
  .roll-note.drag {
    cursor: grabbing; z-index: 7;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 0 10px rgba(255,170,60,0.7);
  }
  .roll-note-resize {
    position: absolute; right: 0; top: 0; bottom: 0; width: 8px;
    cursor: ew-resize; border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.25));
    touch-action: none;
  }
  .roll-pad {
    position: absolute; bottom: 0; width: 3px; height: 9px;
    background: var(--cyan); box-shadow: 0 0 4px var(--cyan-glow);
    transform: translateX(-1px); pointer-events: none;
  }
  .roll-head {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: #ff4d4d; box-shadow: 0 0 9px var(--red-glow);
    pointer-events: none; z-index: 5;
  }

  /* LCD oscilloscope — sits beside the level meter. */
  .lcd-scope {
    flex: 1;
    height: 18px;
    min-width: 60px;
    margin-left: 8px;
    align-self: center;
    border-left: 1px solid var(--lcd-dim);
    padding-left: 6px;
    opacity: 0.95;
  }
  .lcd-meter { align-items: center; }