:root {
    --bg: #020805;
    --panel: #061009;
    --inset: #03120a;
    --line: #0c2b1a;
    --line2: #14402a;
    --txt: #b8ffe0;
    --dim: #3d7a5c;
    --grn: #00ff9c;
    --grn-rgb: 0, 255, 156;
    --cyn: #00e5ff;
    --cyn-rgb: 0, 229, 255;
    --red: #ff3b4d;
    --yellow: #ffe36e;
    --cell: #08130c;
    --cell-dark: #04100a;
    --cell-hover: #0d2417;
    --cell-drum: #0a1a12;
    --cell-drum-hover: #10302a;
    --label-bg: #030a06;
    --lbl: #4d9a75;
    --lbl-dark: #33755a;
}
body[data-theme="synthwave"] {
    --bg: #0a0212; --panel: #15061f; --inset: #0d0318; --line: #2a0f47; --line2: #43196e;
    --txt: #ffd9f2; --dim: #8a5aa8; --grn: #ff4fd8; --cyn: #5b8cff;
    --grn-rgb: 255, 79, 216; --cyn-rgb: 91, 140, 255;
    --cell: #170a26; --cell-dark: #0f0519; --cell-hover: #2a1145; --cell-drum: #1b0c2e; --cell-drum-hover: #321552;
    --label-bg: #0d0318; --lbl: #b07ad0; --lbl-dark: #7a4fa0;
}
body[data-theme="ice"] {
    --bg: #020a12; --panel: #061420; --inset: #04101c; --line: #0e2a3f; --line2: #174059;
    --txt: #c9ecff; --dim: #4a86ab; --grn: #35e0ff; --cyn: #7aa2ff;
    --grn-rgb: 53, 224, 255; --cyn-rgb: 122, 162, 255;
    --cell: #081826; --cell-dark: #051019; --cell-hover: #0f2a3d; --cell-drum: #0a1c2e; --cell-drum-hover: #14344e;
    --label-bg: #04101c; --lbl: #5aa8cc; --lbl-dark: #3a7595;
}
body[data-theme="amber"] {
    --bg: #120a02; --panel: #1c1106; --inset: #150d03; --line: #3a2408; --line2: #59390f;
    --txt: #ffe9c9; --dim: #ab7a3a; --grn: #ffb347; --cyn: #ffd98a;
    --grn-rgb: 255, 179, 71; --cyn-rgb: 255, 217, 138;
    --cell: #211405; --cell-dark: #160d03; --cell-hover: #33210a; --cell-drum: #261806; --cell-drum-hover: #3d290c;
    --label-bg: #150d03; --lbl: #cc955a; --lbl-dark: #956b3a;
}
body[data-theme="bloodmoon"] {
    --bg: #0d0208; --panel: #1a0410; --inset: #12030c; --line: #3a0f26; --line2: #59193d;
    --txt: #ffd6e7; --dim: #a05a80; --grn: #ff4d6d; --cyn: #ff8fa3;
    --grn-rgb: 255, 77, 109; --cyn-rgb: 255, 143, 163;
    --cell: #200a18; --cell-dark: #150610; --cell-hover: #38122a; --cell-drum: #240b1c; --cell-drum-hover: #3d1430;
    --label-bg: #12030c; --lbl: #d07aa8; --lbl-dark: #96507a;
}
/* The intro that replaced #boot-splash lives in css/brand.css (RAZ MUSIC LABS). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; } /* readability: scales all rem-based UI text */
html, body { height: 100%; }
body {
    background: var(--bg);
    color: var(--txt);
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    overflow-x: hidden;
}
button, input, select { font-family: inherit; color: inherit; }

.crt-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 999;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: multiply;
}
.synth-container { max-width: 1180px; margin: 0 auto; padding: 14px 14px 60px; }

h1 { font-size: 1.25rem; color: var(--txt); letter-spacing: 3px; text-shadow: 0 0 12px rgba(var(--grn-rgb),0.35); font-weight: 400; }
/* Scope the accent to the WORDMARK. A bare `h1 span` also caught the language
   stepper and the About button, painting their labels green. */
h1 .title-text > span { color: var(--grn); text-shadow: 0 0 14px rgba(var(--grn-rgb),0.7); }
h1 small { color: var(--dim); font-size: 0.75rem; letter-spacing: 1px; margin-left: 8px; text-shadow: none; }
.hud-line { color: var(--dim); font-size: 0.75rem; letter-spacing: 1px; margin: 6px 0 10px; }
/* MIDI status is never allowed to be silent: a dash could mean "no keyboard",
 * "permission not granted" or "Web MIDI disabled". .warn marks the last two. */
#hud-midi.warn { color: var(--red); }
.hud-note { color: var(--yellow); font-size: 0.72rem; letter-spacing: 1px; margin: -6px 0 10px; }
.ok { color: var(--grn); }
.cyn { color: var(--cyn); }
.blink { animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
/* ---- Toast (transient status) ---- */
#toast { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 12px); background: var(--panel); border: 1px solid var(--grn); color: var(--grn); padding: 8px 18px; border-radius: 4px; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; box-shadow: 0 0 16px rgba(var(--grn-rgb),0.35); z-index: 100; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- Instrument rail ---- */
.inst-rail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.inst-rail-label { color: var(--dim); font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; margin-right: 2px; }
.inst-chip { display: flex; align-items: center; gap: 6px; background: var(--inset); border: 1px solid var(--line2); border-radius: 3px; padding: 6px 10px; cursor: pointer; transition: 0.12s; font-size: 0.8rem; color: var(--txt); }
.inst-chip:hover { border-color: var(--grn); box-shadow: 0 0 10px rgba(var(--grn-rgb),0.2); }
.inst-chip.active { background: var(--grn-soft); border-color: var(--grn); color: var(--grn); box-shadow: 0 0 12px rgba(var(--grn-rgb),0.3); }
.inst-chip .chip-type { font-size: 0.9rem; line-height: 1; }
.inst-chip .chip-name { letter-spacing: 0.5px; font-weight: bold; }
.inst-chip .chip-ms { display: flex; gap: 3px; margin-left: 4px; }
.inst-chip .chip-del { background: transparent; border: 1px solid transparent; color: var(--dim); font-size: 0.75rem; cursor: pointer; padding: 0 2px; line-height: 1; border-radius: 2px; }
.inst-chip .chip-del:hover { color: var(--red); border-color: var(--red); }
.inst-add { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.inst-add select { background: var(--inset); border: 1px dashed var(--line2); color: var(--txt); border-radius: 3px; padding: 6px 8px; font-size: 0.8rem; cursor: pointer; }
.inst-add button { background: transparent; border: 1px dashed var(--line2); color: var(--grn); border-radius: 3px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer; transition: 0.12s; }
.inst-add button:hover { border-color: var(--grn); color: var(--grn); border-style: solid; box-shadow: 0 0 8px rgba(var(--grn-rgb),0.2); }
/* The recycle button: swaps the ACTIVE unit's instrument for the selected one
   rather than adding a channel. Cyan to distinguish it from the green add, and
   the glyph turns as a hint that it replaces something. */
#swap-inst-btn { color: var(--cyn); border-style: dashed; }
#swap-inst-btn:hover { border-color: var(--cyn); color: var(--cyn); border-style: solid; box-shadow: 0 0 8px rgba(var(--cyn-rgb),0.25); }
#swap-inst-btn:active { transform: rotate(180deg); transition: transform 0.2s; }

.ms-btn { width: 20px; height: 20px; border-radius: 2px; border: 1px solid var(--line2); background: transparent; color: var(--dim); font-size: 0.7rem; cursor: pointer; line-height: 1; padding: 0; }
.ms-btn.m.on { background: rgba(255,59,77,0.25); border-color: var(--red); color: #ff8891; box-shadow: 0 0 6px rgba(255,59,77,0.4); }
.ms-btn.s.on { background: rgba(var(--cyn-rgb),0.2); border-color: var(--cyn); color: var(--cyn); box-shadow: 0 0 6px rgba(var(--cyn-rgb),0.4); }
.ms-btn.cp:hover, .ms-btn.cp:focus-visible { border-color: var(--cyn); color: var(--cyn); background: rgba(var(--cyn-rgb),0.12); }

/* ---- Transport ---- */
.transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; }
.transport label { color: var(--dim); font-size: 0.75rem; letter-spacing: 1px; }
.transport .tr-label { margin-left: 10px; }
.pr-btn { background: transparent; border: 1px solid var(--line2); color: var(--cyn); border-radius: 3px; padding: 6px 12px; font-size: 0.8rem; letter-spacing: 1px; cursor: pointer; transition: 0.12s; text-transform: uppercase; }
.pr-btn:hover { border-color: var(--cyn); box-shadow: 0 0 8px rgba(var(--cyn-rgb),0.3); }
.pr-btn.active { background: rgba(var(--cyn-rgb),0.15); border-color: var(--cyn); box-shadow: 0 0 10px rgba(var(--cyn-rgb),0.35); }
.pr-btn.clear { color: var(--red); }
.pr-btn.rec { color: var(--red); }
.pr-btn.rec.active { background: rgba(255,59,77,0.25); box-shadow: 0 0 10px rgba(255,59,77,0.5); }
.pr-btn.rec.active .dot { animation: blink 0.6s steps(2,start) infinite; }
/* Recording is parked while the drum engine is being reworked. The button is
 * greyed and inert to the eye, but the click handler and everything behind it
 * are untouched, so flipping this class off restores it exactly as it was. */
.pr-btn.rec.parked {
    color: var(--dim, #5a6472);
    border-color: var(--line2);
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
    filter: grayscale(1);
}
.pr-btn.rec.parked:hover { border-color: var(--line2); box-shadow: none; }
.transport input[type=range] { -webkit-appearance: none; appearance: none; width: 90px; height: 3px; background: var(--line2); border-radius: 2px; }
.transport input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cyn); cursor: pointer; box-shadow: 0 0 6px rgba(var(--cyn-rgb),0.8); }
.bpm-display { color: var(--grn); font-weight: bold; min-width: 34px; text-align: center; font-size: 0.9rem; text-shadow: 0 0 6px rgba(var(--grn-rgb),0.6); }
.bpm-input { width: 52px; background: var(--inset); border: 1px solid var(--line2); color: var(--grn); font-weight: bold; text-align: center; font-size: 0.9rem; padding: 2px 4px; border-radius: 3px; text-shadow: 0 0 6px rgba(var(--grn-rgb),0.6); -moz-appearance: textfield; appearance: textfield; }
.bpm-input:focus { outline: none; border-color: var(--grn); box-shadow: 0 0 8px rgba(var(--grn-rgb),0.4); }
/* No spinner arrows, in every engine: WebKit/Blink draw them as pseudo-elements,
   Firefox builds them into the widget itself — that one needs `appearance:
   textfield`, which is why the arrows survived the -webkit- rules alone. */
.bpm-input::-webkit-outer-spin-button, .bpm-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.t-step { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--cyn); font-size: 0.8rem; letter-spacing: 1px; min-width: 128px; text-shadow: 0 0 8px rgba(var(--cyn-rgb),0.5); }
.step-leds { display: inline-flex; gap: 3px; }
.step-leds .led { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: background 0.05s, box-shadow 0.05s; }
.step-leds .led.on { background: var(--cyn); box-shadow: 0 0 6px rgba(var(--cyn-rgb),0.9); }
.bar-count { min-width: 42px; text-align: left; }
.viz { background: var(--inset); border: 1px solid var(--line); border-radius: 3px; box-shadow: inset 0 0 10px rgba(var(--grn-rgb),0.07); }

/* ---- View tabs ---- */
.view-tabs { display: flex; gap: 4px; margin-top: 4px; border-bottom: 1px solid var(--line); }
.tab { background: transparent; border: 1px solid transparent; border-bottom: none; color: var(--dim); padding: 8px 22px; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; border-radius: 4px 4px 0 0; transition: 0.12s; position: relative; top: 1px; }
.tab:hover { color: var(--txt); background: rgba(var(--grn-rgb),0.05); }
.tab.active { color: var(--grn); background: var(--inset); border-color: var(--line); box-shadow: 0 -2px 8px rgba(var(--grn-rgb),0.15); }
/* A parked view: present so the feature is still visible and remembered, greyed
 * and inert so it cannot be opened while it is being reworked. Removing the
 * `parked` class from the element restores it exactly as it was. */
.tab.parked { color: var(--dim); opacity: 0.35; cursor: default; pointer-events: none; filter: grayscale(1); }
.tab.parked:hover { color: var(--dim); background: transparent; }

/* ---- Views ---- */
.view { display: none; margin-top: 12px; }
.view.active { display: block; animation: viewfade 0.18s ease-out; }
@keyframes viewfade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.view-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 12px; position: relative; }
.view-panel::before, .view-panel::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.view-panel::before { top: -1px; left: -1px; border-top: 2px solid var(--grn); border-left: 2px solid var(--grn); }
.view-panel::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--grn); border-right: 2px solid var(--grn); }
.view-panel-header { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 10px; }
.view-panel-header h2 { color: var(--grn); font-size: 1rem; font-weight: 400; letter-spacing: 1px; }
.view-panel-header .hint { color: var(--dim); font-size: 0.7rem; letter-spacing: 1px; }

/* ---- Piano roll ---- */
.pianoroll-wrapper { position: relative; background: var(--inset); border: 1px solid var(--line); border-radius: 4px; padding: 6px; }
.pianoroll-wrapper::before, .pianoroll-wrapper::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.pianoroll-wrapper::before { top: -1px; left: -1px; border-top: 2px solid var(--grn); border-left: 2px solid var(--grn); }
.pianoroll-wrapper::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--grn); border-right: 2px solid var(--grn); }
.pr-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pr-controls label { color: var(--dim); font-size: 0.75rem; letter-spacing: 1px; }
.pr-scale-select { background: var(--inset); border: 1px solid var(--line2); color: var(--txt); border-radius: 3px; padding: 5px 8px; font-size: 0.8rem; }
#midi-out-select { max-width: 150px; }
.roll-hint { color: var(--dim); font-size: 0.7rem; letter-spacing: 0.5px; margin-left: auto; }
.pr-grid-wrapper { overflow-x: auto; overflow-y: auto; max-height: 560px; position: relative; }
/* The roll is a LATTICE, not a grid of cells.
 * It is positioned absolutely: a ruler strip, a label column, one painted
 * background element, and the overlays (notes, playhead, drum hits). There is
 * no per-cell DOM, so scrolling moves nothing and costs no rebuild. */
.pr-grid { position: relative; overflow: hidden; }
.pr-grid .step-ruler { position: relative; height: 16px; }
.pr-grid .step-num { position: absolute; top: 0; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 0.58rem; color: var(--dim); user-select: none; pointer-events: none; }
.pr-grid .pr-lattice { position: absolute; pointer-events: none; }
.pr-labels { position: absolute; top: 0; left: 0; width: 0; height: 100%; pointer-events: none; z-index: 5; }
.pr-grid .note-label { position: absolute; left: 0; width: 30px; height: 22px; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; font-size: 0.72rem; color: var(--lbl); background: var(--label-bg); z-index: 5; border-radius: 2px; }
.pr-grid.drum-mode .drum-label { position: absolute; left: 0; width: 96px; height: 26px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 0.7rem; color: var(--dc, var(--txt)); background: var(--label-bg); border-radius: 2px; z-index: 5; letter-spacing: 0.5px; text-transform: uppercase; }
.pr-grid .drum-hits { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.pr-grid .drum-hit { position: absolute; background: var(--dc, var(--cyn)); border-radius: 2px; box-shadow: 0 0 8px var(--dc, rgba(var(--cyn-rgb),0.7)); opacity: 0.9; }
/* A note placed off the grid gets a dashed cap on its leading edge, so its
 * free timing is visible at a glance rather than being invisible precision. */
.pr-grid .note-bar.off-grid { box-shadow: inset 3px 0 0 rgba(var(--cyn-rgb),0.9), 0 0 10px rgba(var(--cyn-rgb),0.35); }
.pr-grid .note-bar.off-grid::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: repeating-linear-gradient(180deg, var(--cyn) 0 3px, transparent 3px 6px); }
.pr-grid, .pr-grid-wrapper, .pr-grid .note-bar { user-select: none; -webkit-user-select: none; }
.pr-grid .step-ruler-corner { height: 16px; }
.pr-grid .step-num { height: 16px; display: flex; align-items: center; justify-content: center; font-size: 0.58rem; color: var(--dim); user-select: none; pointer-events: none; }
.pr-grid .step-num.bar-num { color: var(--cyn); text-shadow: 0 0 6px rgba(var(--cyn-rgb),0.5); }
.roll-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--dim); font-size: 0.8rem; letter-spacing: 2px; opacity: 0.75; z-index: 3; text-shadow: 0 0 8px rgba(var(--grn-rgb),0.25); }
.roll-empty[hidden] { display: none; }
.pr-grid .note-label.dark { color: var(--lbl-dark); }
.pr-grid .note-label.out-scale { color: #8a5a2b; }

.pr-grid .note-label.flash { color: #020503; background: var(--grn); box-shadow: 0 0 10px rgba(var(--grn-rgb),0.8); border-radius: 2px; }
.pr-notes { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.key-hint { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 6; display: none; align-items: center; gap: 6px; padding: 3px 10px; background: rgba(var(--grn-rgb),0.14); border: 1px solid var(--grn); border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.5px; color: #b8ffe0; text-transform: uppercase; pointer-events: none; box-shadow: 0 0 12px rgba(var(--grn-rgb),0.35); white-space: nowrap; }
.key-hint.on { display: flex; animation: keyhint-pulse 1s ease-in-out infinite; }
.key-hint-bottom { top: auto; bottom: 4px; }
@keyframes keyhint-pulse { 0%,100% { box-shadow: 0 0 8px rgba(var(--grn-rgb),0.3); } 50% { box-shadow: 0 0 16px rgba(var(--grn-rgb),0.7); } }
/* ---- Note bars: a WATER TANK whose level is the velocity ----
 * The bar is the glass; the SVG inside it is the water, with a wavy crest that
 * IS the waterline. Height is fixed so the note's pitch row stays readable, and
 * only the water rises and falls. */
.note-bar { position: absolute; box-sizing: border-box; pointer-events: auto; cursor: grab;
  overflow: hidden; border-radius: 3px;
  background: rgba(0,16,10,0.9);
  border: 1px solid rgba(var(--grn-rgb),0.55);
  box-shadow: 0 0 8px rgba(var(--grn-rgb),0.35), inset 0 1px 0 rgba(255,255,255,0.08); }
.note-bar:hover { box-shadow: 0 0 14px rgba(var(--grn-rgb),0.8), inset 0 1px 0 rgba(255,255,255,0.1); }
.note-bar.dragging { opacity: 0.6; }
/* Faint measure lines so an empty tank still reads as a container. */
.note-glass { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg,
    transparent 0 5px, rgba(var(--grn-rgb),0.07) 5px 6px); }
.note-water { position: absolute; left: -6px; width: calc(100% + 12px); top: 0; height: 100%;
  display: block; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 0 5px rgba(var(--grn-rgb),0.5)); }
/* The surface travels RIGHT: the path is drawn a wavelength wider than the box on
 * each side, and shifted by exactly one wavelength per cycle, so the loop is
 * seamless. Sliding the PATH rather than the svg keeps the water body's fill and
 * the bar's clip exactly where they are - only the crest moves. */
.note-water path { animation: waterflow 1.1s linear infinite; }
@keyframes waterflow {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--wl, 60px)); }
}
@media (prefers-reduced-motion: reduce) {
  .note-water path { animation: none; }
}
.note-bar.out-scale { border-color: rgba(255,176,92,0.65);
  box-shadow: 0 0 8px rgba(255,176,92,0.3), inset 0 1px 0 rgba(255,255,255,0.08); }
.note-bar.out-scale .note-water { filter: drop-shadow(0 0 5px rgba(255,176,92,0.5)); }
.note-bar.out-scale:hover { box-shadow: 0 0 14px rgba(255,176,92,0.7), inset 0 1px 0 rgba(255,255,255,0.1); }
.note-bar.selected { border-color: var(--cyn);
  box-shadow: 0 0 12px rgba(var(--cyn-rgb),0.85), inset 0 1px 0 rgba(255,255,255,0.15); }
.note-bar.selected .note-water { filter: drop-shadow(0 0 6px rgba(var(--cyn-rgb),0.6)); }
.note-bar.selected:hover { box-shadow: 0 0 18px rgba(var(--cyn-rgb),1), inset 0 0 6px rgba(255,255,255,0.15); }

.note-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; border-radius: 0 3px 3px 0; }
.note-handle:hover { background: rgba(255,255,255,0.35); }
/* Selected: mark it with the cyan border + glow, never by repainting the bar's
   background — that background is the note's EMPTY part (the glass the water
   level reads against), so filling it hid the wave/level of every selected
   note. */
.note-bar.selected { border-color: var(--cyn); box-shadow: 0 0 12px rgba(var(--cyn-rgb),0.85), inset 0 1px 0 rgba(255,255,255,0.45); }
.note-bar.selected:hover { box-shadow: 0 0 18px rgba(var(--cyn-rgb),1), inset 0 0 6px rgba(255,255,255,0.5); }
.pr-playhead { position: absolute; top: 18px; bottom: 0; width: 2px; background: var(--cyn); box-shadow: 0 0 8px rgba(var(--cyn-rgb),0.7); pointer-events: none; z-index: 6; display: none; }
.pr-playhead.visible { display: block; animation: phpulse 0.45s ease-in-out infinite alternate; }
@keyframes phpulse { from { box-shadow: 0 0 5px rgba(var(--cyn-rgb),0.5); } to { box-shadow: 0 0 16px rgba(var(--cyn-rgb),1); } }
.pr-playhead-col { position: absolute; top: 18px; bottom: 0; pointer-events: none; z-index: 2; display: none; background: linear-gradient(90deg, rgba(var(--cyn-rgb),0.16), rgba(var(--cyn-rgb),0.03)); }
.pr-playhead-col.visible { display: block; }

.pr-ghost { position: absolute; pointer-events: none; z-index: 3; display: none; background: rgba(var(--grn-rgb),0.14); border: 1px dashed rgba(var(--grn-rgb),0.55); border-radius: 3px; }
.pr-ghost.out-scale { background: rgba(255,176,92,0.14); border-color: rgba(255,176,92,0.55); }
.note-len { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.6rem; line-height: 1; color: rgba(0,45,22,0.8); pointer-events: none; letter-spacing: 0.5px; }
.note-bar.selected .note-len { color: rgba(0,32,42,0.85); }

/* Drum grid */
.pr-grid.drum-mode { grid-template-columns: 96px repeat(var(--num-steps, 16), minmax(18px, 1fr)); gap: 3px; }
.pr-grid.drum-mode .drum-label .dl-dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--dc, var(--cyn)); box-shadow: 0 0 6px var(--dc, rgba(var(--cyn-rgb),0.7)); }
.pr-grid.drum-mode .step.on { background: linear-gradient(180deg, var(--dc, var(--cyn)), color-mix(in srgb, var(--dc, var(--cyn)) 55%, #000)); border-color: var(--dc, var(--cyn)); box-shadow: 0 0 8px color-mix(in srgb, var(--dc, var(--cyn)) 60%, transparent), inset 0 -8px 14px rgba(0,0,0,0.35); }
.pr-grid.drum-mode .step.bar-line { border-left: 2px solid color-mix(in srgb, var(--dc, var(--cyn)) 50%, transparent); }
.pr-grid.drum-mode .step.beat-line { border-left: 1px solid color-mix(in srgb, var(--dc, var(--cyn)) 28%, transparent); }

/* ---- Synth view ---- */
.inst-presets { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.inst-presets button { background: transparent; border: 1px solid var(--line2); color: var(--dim); border-radius: 3px; padding: 5px 12px; font-size: 0.7rem; letter-spacing: 1px; cursor: pointer; text-transform: uppercase; }
.inst-presets button:hover { color: var(--grn); border-color: var(--grn); }
.inst-presets button.on { color: var(--grn); border-color: var(--grn); background: rgba(var(--grn-rgb),0.12); box-shadow: 0 0 8px rgba(var(--grn-rgb),0.3); }
/* drum sound-design pad selector (Synth view, drum instruments) */
.drum-sel-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.drum-sel-row button { background: transparent; border: 1px solid var(--line2); color: var(--dim); border-radius: 3px; padding: 5px 10px; font-size: 0.7rem; letter-spacing: 1px; cursor: pointer; text-transform: uppercase; transition: 0.12s; }
.drum-sel-row button:hover { color: var(--cyn); border-color: var(--cyn); }
.drum-sel-row button.on { color: var(--cyn); border-color: var(--cyn); background: rgba(var(--cyn-rgb),0.12); box-shadow: 0 0 8px rgba(var(--cyn-rgb),0.3); }
.layer-knobs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.knob-group { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.knob { position: relative; width: 44px; height: 44px; }
.knob input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 100%; background: transparent; position: absolute; inset: 0; opacity: 0; cursor: ns-resize; margin: 0; }
.knob .pointer { position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: var(--cyn); transform-origin: 0 1px; transform: rotate(-225deg); pointer-events: none; box-shadow: 0 0 6px rgba(var(--cyn-rgb),0.6); }
.knob .center-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--inset); border: 1px solid var(--line2); pointer-events: none; }
.knob::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--line2); background: radial-gradient(circle at 35% 30%, #0b2417, #04120a); }
.knob-value { color: var(--grn); font-size: 0.78rem; min-height: 12px; }
.knob-group label { color: var(--lbl); font-size: 0.72rem; letter-spacing: 0.5px; }
.knob-select { background: var(--inset); border: 1px solid var(--line2); color: var(--cyn); border-radius: 3px; padding: 8px 6px; font-size: 0.8rem; width: 56px; text-align: center; cursor: pointer; }
.knob-select:hover { border-color: var(--cyn); box-shadow: 0 0 8px rgba(var(--cyn-rgb),0.3); }
/* A select with long option text (a General MIDI program name) cannot use the
   56px knob slot: it truncates to "1 Ac…". Widen it and left-align, so the
   number and name both read. */
.knob-select.wide {
    width: auto; min-width: 190px; max-width: 260px; text-align: left;
    text-overflow: ellipsis; padding: 8px 10px;
}
.knob-group.wide { align-items: flex-start; }

/* ---- Hardware toggle switches (Retrig / Legato / Chord / Arp) ----
 * A rocker with a lit lens: the track darkens and the knob slides right when on,
 * and the whole thing glows in the theme accent. Deliberately reads as MACHINE
 * STATE, not as a one-shot button like the presets beside it. */
.tog-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 0 0 12px; }
.tog { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.tog-label { font-size: 0.68rem; letter-spacing: 1.2px; color: var(--dim); text-transform: uppercase; }
.tog-sw { position: relative; width: 34px; height: 16px; flex: none; padding: 0; cursor: pointer;
  background: var(--inset); border: 1px solid var(--line2); border-radius: 9px; transition: 0.14s; }
.tog-sw:focus-visible { outline: 1px solid var(--cyn); outline-offset: 2px; }
.tog-knob { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--line2); transition: 0.14s; }
.tog:hover .tog-sw { border-color: var(--grn); }
.tog:hover .tog-label { color: var(--txt); }
.tog.on .tog-sw { border-color: var(--grn); background: rgba(var(--grn-rgb),0.18); box-shadow: 0 0 8px rgba(var(--grn-rgb),0.4); }
.tog.on .tog-knob { left: 19px; background: var(--grn); box-shadow: 0 0 6px rgba(var(--grn-rgb),0.9); }
.tog.on .tog-label { color: var(--grn); }
.tog-state { font-size: 0.62rem; letter-spacing: 1px; color: var(--dim); min-width: 22px; }
.tog.on .tog-state { color: var(--grn); }
.tog:not(.on) .tog-state { color: var(--line2); }

/* ---- Layer Stack panel (js/instruments/layer.js) ---- */
.layer-head { color: var(--cyn); letter-spacing: 2px; font-size: 0.78rem; margin: 14px 0 4px; }
.layer-hint { color: var(--dim); font-size: 0.75rem; line-height: 1.5; margin-bottom: 8px; }
.layer-warn { color: var(--yellow); }
.layer-row { border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px; margin-bottom: 6px; background: var(--cell); }
.layer-row.on { border-color: var(--line2); background: var(--inset); }
.layer-tick { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.layer-tick input { accent-color: var(--grn); width: 15px; height: 15px; cursor: pointer; }
.layer-name { font-size: 0.82rem; color: var(--dim); letter-spacing: 0.5px; }
.layer-row.on .layer-name { color: var(--grn); }
.layer-knobs { display: flex; gap: 14px; margin: 8px 0 2px 23px; flex-wrap: wrap; }
.layer-knob { align-items: flex-start; }
.layer-knob input[type="range"] { width: 96px; }
.layer-val { color: var(--dim); font-size: 0.68rem; letter-spacing: 0.5px; }
.layer-row.on .layer-val { color: var(--cyn); }
/* Per-layer key range: which part of the keyboard this layer answers to.
 * Sits on its own line under the knobs, indented to match them, because it is
 * a different kind of control - it decides whether the layer sounds at all for
 * a given note, rather than shaping the sound it makes. */
.layer-keys { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px 23px; flex-wrap: wrap; }
.layer-keys .layer-knob input[type="range"] { width: 118px; }
.layer-keys label { color: var(--dim); font-size: 0.68rem; }
.layer-range-val { min-width: 72px; color: var(--dim); }
.layer-row.on .layer-range-val { color: var(--cyn); }
.layer-all { background: transparent; border: 1px solid var(--line2); color: var(--dim); border-radius: 3px; padding: 2px 8px; font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: 0.12s; }
.layer-all:hover { border-color: var(--cyn); color: var(--cyn); }
.layer-row.on .layer-all { color: var(--cyn); }

/* ---- EQ canvas ---- */
.eq-canvas { display: block; width: 100%; background: var(--inset); border: 1px solid var(--line); border-radius: 3px; touch-action: none; }

/* ---- Main roll ---- */
.mainroll { display: flex; flex-direction: column; gap: 4px; padding: 4px 2px; overflow-x: auto; }
.mr-track { display: grid; grid-template-columns: 150px 1fr; gap: 6px; align-items: stretch; }
.mr-head { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 6px 10px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.75rem; color: var(--txt); transition: 0.12s; }
.mr-head:hover { border-color: var(--grn); }
.mr-head.active { border-color: var(--grn); box-shadow: 0 0 8px rgba(var(--grn-rgb),0.2); color: var(--grn); }
.mr-head .chip-ms { margin-left: auto; }
.mr-head.muted { opacity: 0.45; }
.mr-cells { display: grid; grid-template-columns: repeat(var(--num-steps, 16), 1fr); gap: 2px; position: relative; min-width: 320px; }
.mr-cell { height: 26px; border-radius: 2px; background: var(--cell); border: 1px solid rgba(var(--grn-rgb),0.08); }
.mr-cell.bar-line { border-left: 2px solid rgba(var(--grn-rgb),0.4); }
.mr-cell.beat-line { border-left: 1px solid rgba(var(--grn-rgb),0.2); }
.mr-cell.on { background: var(--c, var(--grn)); box-shadow: inset 0 0 6px rgba(0,0,0,0.4); }

/* ---- Mixer ---- */
.mixer { display: flex; gap: 8px; align-items: stretch; justify-content: center; flex-wrap: wrap; padding: 6px 2px; }
.channel-strip { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 74px; }
.channel-strip:not(.master) { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s, background 0.12s; }
.channel-strip:not(.master):hover { border-color: var(--grn); box-shadow: 0 0 10px rgba(var(--grn-rgb),0.2); }
.channel-strip.active { background: var(--grn-soft); border-color: var(--grn); box-shadow: 0 0 12px rgba(var(--grn-rgb),0.3); }
.channel-strip.master { border-color: rgba(var(--cyn-rgb),0.4); box-shadow: inset 0 0 12px rgba(var(--cyn-rgb),0.06), 0 0 10px rgba(var(--cyn-rgb),0.12); min-width: 220px; flex: 1 1 240px; }
.strip-name { color: var(--grn); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-shadow: 0 0 6px rgba(var(--grn-rgb),0.5); text-align: center; }
.channel-strip.master .strip-name { color: var(--cyn); text-shadow: 0 0 8px rgba(var(--cyn-rgb),0.6); }
.strip-mid { display: flex; align-items: stretch; gap: 8px; }
.fader { position: relative; width: 30px; height: 150px; }
.fader input[type=range] { -webkit-appearance: none; appearance: none; width: 150px; height: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); background: var(--line); border-radius: 2px; cursor: pointer; }
.fader input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 8px; border-radius: 2px; background: var(--grn); cursor: grab; box-shadow: 0 0 8px rgba(var(--grn-rgb),0.8); }
.channel-strip.master .fader input[type=range]::-webkit-slider-thumb { background: var(--cyn); box-shadow: 0 0 8px rgba(var(--cyn-rgb),0.8); }
.meter { width: 6px; height: 150px; background: #03110a; border: 1px solid var(--line); border-radius: 2px; position: relative; overflow: hidden; }
.meter-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 0%; background: linear-gradient(0deg, var(--grn), #b6ffe0 70%, #ffe36e 100%); transition: height 0.05s linear; }
.strip-pan { color: var(--dim); font-size: 0.72rem; letter-spacing: 0.5px; margin-top: 2px; }
.strip-pan input[type=range] { width: 60px; background: var(--line); height: 3px; border-radius: 2px; -webkit-appearance: none; appearance: none; vertical-align: middle; }
.strip-pan input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cyn); cursor: pointer; }
.strip-ctl { display: flex; gap: 4px; margin-top: 2px; }
.channel-strip.master .eq-canvas { margin-top: 6px; }

/* ---- FX rack ---- */
.fx-rack { display: flex; flex-direction: column; gap: 12px; }
.fx-channel { background: var(--inset); border: 1px solid var(--line); border-radius: 4px; padding: 10px; }
.fx-channel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fx-channel-head .fx-name { color: var(--grn); font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; }
.fx-channel-head select { background: var(--panel); border: 1px solid var(--line2); color: var(--txt); border-radius: 3px; padding: 5px 8px; font-size: 0.8rem; }
.fx-slot { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px; margin-bottom: 6px; flex-wrap: wrap; }
.fx-slot .fx-slot-name { color: var(--cyn); font-size: 0.8rem; min-width: 90px; letter-spacing: 1px; text-transform: uppercase; }
.fx-slot .fx-param { display: flex; align-items: center; gap: 4px; }
.fx-slot .fx-param label { color: var(--lbl); font-size: 0.72rem; }
.fx-slot .fx-param input[type=range] { width: 70px; -webkit-appearance: none; appearance: none; height: 3px; background: var(--line2); border-radius: 2px; }
.fx-slot .fx-param input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cyn); cursor: pointer; }
.fx-slot .fx-param .fx-val { color: var(--grn); font-size: 0.72rem; min-width: 22px; text-align: right; }
.fx-slot .fx-select { background: var(--inset); border: 1px solid var(--line2); color: var(--cyn); border-radius: 2px; padding: 2px 4px; font-size: 0.72rem; cursor: pointer; }
.fx-slot .fx-select:hover { border-color: var(--cyn); box-shadow: 0 0 6px rgba(var(--cyn-rgb),0.3); }
.fx-slot .fx-del { background: transparent; border: 1px solid transparent; color: var(--dim); cursor: pointer; font-size: 0.8rem; margin-left: auto; }
.fx-slot .fx-del:hover { color: var(--red); border-color: var(--red); }
.fx-slot .fx-bypass { background: transparent; border: 1px solid var(--line2); color: var(--dim); border-radius: 2px; cursor: pointer; font-size: 0.72rem; padding: 3px 7px; }
.fx-slot .fx-bypass.on { color: var(--yellow); border-color: var(--yellow); }
.fx-slot .fx-preset { margin-left: 6px; background: transparent; border: 1px solid var(--line2); color: var(--grn); border-radius: 2px; cursor: pointer; font-size: 0.62rem; letter-spacing: 0.1em; padding: 3px 7px; }
.fx-slot .fx-preset:hover { background: rgb(var(--grn-rgb) / 0.12); border-color: var(--grn); }
.fx-meter { flex: 1 1 100%; height: 6px; background: var(--inset); border: 1px solid var(--line2); border-radius: 3px; overflow: hidden; margin-top: 2px; }
.fx-meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--grn), var(--yellow)); transition: width 60ms linear; }
.fx-empty { color: var(--dim); font-size: 0.8rem; font-style: italic; }

/* ---- Modal ---- */
.modal-backdrop { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--panel); border: 1px solid var(--line2); border-radius: 6px; padding: 16px; max-width: 520px; width: 90%; box-shadow: 0 0 30px rgba(var(--grn-rgb),0.15); }
.modal-title { display: flex; justify-content: space-between; align-items: center; color: var(--grn); font-size: 1rem; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
.modal-body { font-size: 0.95rem; color: var(--txt); line-height: 1.9; }
.modal-body b { color: var(--cyn); }
.modal-body .dim { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--dim); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ---- Settings modal ---- */
.set-group { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.set-group:first-child { border-top: 0; padding-top: 2px; }
.set-head { color: var(--cyn); letter-spacing: 2px; font-size: 0.78rem; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 12px; }
.set-state { color: var(--dim); letter-spacing: 1px; }
.set-state.ok { color: var(--grn); }
.set-state.bad { color: var(--red); }
.set-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.set-row .dim { font-size: 0.8rem; color: var(--dim); }
.set-note { margin-top: 6px; font-size: 0.8rem; color: var(--yellow); line-height: 1.5; }


/* ---- Mixer strip delete (was unstyled) ---- */
.strip-del { background: transparent; border: 1px solid transparent; color: var(--dim); font-size: 0.8rem; cursor: pointer; padding: 2px 6px; line-height: 1; border-radius: 2px; }
.strip-del:hover { color: var(--red); border-color: var(--red); }

/* ---- Muted instrument chips ---- */
.inst-chip.muted { opacity: 0.45; }

/* ---- Sampler pad loader (was unstyled) ---- */
.sampler-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sampler-status { color: var(--dim); font-size: 0.75rem; letter-spacing: 0.5px; }
.sampler-bar button { background: transparent; border: 1px solid var(--line2); color: var(--cyn); border-radius: 3px; padding: 5px 12px; font-size: 0.75rem; letter-spacing: 1px; cursor: pointer; text-transform: uppercase; transition: 0.12s; }
.sampler-bar button:hover { border-color: var(--cyn); box-shadow: 0 0 8px rgba(var(--cyn-rgb),0.3); }
.sampler-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.sampler-pad { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 5px 8px; }
.sampler-pad-num { color: var(--cyn); font-size: 0.7rem; min-width: 24px; letter-spacing: 1px; }
.sampler-pad-name { color: var(--txt); font-size: 0.75rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sampler-pad button { background: transparent; border: 1px solid var(--line2); color: var(--dim); border-radius: 2px; padding: 3px 8px; font-size: 0.72rem; cursor: pointer; text-transform: uppercase; }
.sampler-pad button:hover { color: var(--cyn); border-color: var(--cyn); }
.sampler-pad input[type=range] { width: 64px; -webkit-appearance: none; appearance: none; height: 3px; background: var(--line2); border-radius: 2px; }
.sampler-pad input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cyn); cursor: pointer; }

/* ---- Main roll cell hover (piano roll steps already have one) ---- */
.mr-cell:not(.on):hover { border-color: rgba(var(--grn-rgb),0.35); background: var(--cell-hover); }

/* ---- Polish: themed scrollbars for the scrollable grids ---- */
.pr-grid-wrapper, .mainroll { scrollbar-width: thin; scrollbar-color: var(--line2) var(--inset); }
.pr-grid-wrapper::-webkit-scrollbar, .mainroll::-webkit-scrollbar { width: 9px; height: 9px; }
.pr-grid-wrapper::-webkit-scrollbar-track, .mainroll::-webkit-scrollbar-track { background: var(--inset); border-radius: 5px; }
.pr-grid-wrapper::-webkit-scrollbar-thumb, .mainroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 5px; border: 1px solid var(--line); }
.pr-grid-wrapper::-webkit-scrollbar-thumb:hover, .mainroll::-webkit-scrollbar-thumb:hover { background: #1f7a4d; box-shadow: 0 0 6px rgba(var(--grn-rgb),0.4); }
.pr-grid-wrapper::-webkit-scrollbar-corner, .mainroll::-webkit-scrollbar-corner { background: var(--inset); }

/* ---- Polish: keyboard focus ring (visible, on-theme) ---- */
.pr-btn:focus-visible, .tab:focus-visible, .inst-chip:focus-visible, .ms-btn:focus-visible,
.inst-add button:focus-visible, .sampler-bar button:focus-visible, .sampler-pad button:focus-visible,
.fx-slot .fx-del:focus-visible, .fx-slot .fx-bypass:focus-visible, .fx-slot .fx-preset:focus-visible,
.pr-scale-select:focus-visible, .knob-select:focus-visible, .bpm-input:focus-visible {
    outline: 1px solid var(--cyn);
    outline-offset: 2px;
    box-shadow: 0 0 8px rgba(var(--cyn-rgb),0.35);
}
.bpm-input:focus-visible { border-color: var(--grn); }

/* ---- Polish: themed text selection ---- */
::selection { background: rgba(var(--grn-rgb),0.3); color: #eafff5; }

/* ---- Drum pad add-voice control (OPL kit) ----
 * The chip has five hardware voices; General MIDI names about 47 percussion
 * sounds, so an imported part can call for voices the kit has no pad for. The
 * `+` grows the pad list to cover whatever the music actually uses. */
.drum-sel-row .drum-pad-add { border: 1px dashed var(--cyn); color: var(--cyn); background: transparent; font-weight: bold; min-width: 34px; }
.drum-sel-row .drum-pad-add:hover { background: rgba(var(--cyn-rgb), 0.16); }
.voice-picker { margin-top: 10px; border: 1px solid var(--line2); border-radius: 4px; background: var(--inset); max-height: 340px; display: flex; flex-direction: column; }
.voice-picker-head { padding: 6px 10px; font-size: 0.7rem; letter-spacing: 1px; color: var(--cyn); border-bottom: 1px solid var(--line2); }
.voice-picker-list { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 3px; padding: 8px; }
.voice-picker-list button { text-align: left; font-size: 0.72rem; padding: 4px 7px; background: var(--cell); border: 1px solid transparent; color: var(--txt); border-radius: 3px; cursor: pointer; }
.voice-picker-list button:hover { background: var(--cell-hover); border-color: var(--grn); }
.voice-picker-list button.used { color: var(--dim); border-style: dashed; }
.voice-picker-foot { padding: 6px 10px; border-top: 1px solid var(--line2); text-align: right; }

/* =====================================================================
 * GAME BOY SHELL — the DMG instrument's own interface.
 *
 * Deliberately NOT themed by the app's variables. The rest of the DAW is a
 * neon panel; a Game Boy is a grey plastic case with an olive LCD, and
 * recolouring it to match the theme would turn it into a costume. The one
 * exception is the focus ring, which has to stay visible against the app.
 * ===================================================================== */
.gb-shell {
    --gb-case: #c4c8b8;
    --gb-case-dark: #a8ad9c;
    --gb-case-shadow: #8b9083;
    --gb-bezel: #6a6f64;
    --gb-bezel-dark: #4e5349;
    --gb-btn: #4a2a5a;
    --gb-btn-dark: #3a1f47;
    --gb-btn-text: #2a1035;
    --gb-dpad: #2b2b2b;
    --gb-dpad-dark: #1a1a1a;

    max-width: 420px;
    margin: 0 auto;
    background: var(--gb-case);
    border-radius: 12px 12px 34px 12px;
    padding: 18px 18px 22px;
    box-shadow:
        inset 0 -3px 0 var(--gb-case-shadow),
        inset 0 2px 0 rgba(255,255,255,0.55),
        0 10px 28px rgba(0,0,0,0.55);
    font-family: 'Courier New', monospace;
    user-select: none;
}

/* The top strip, where the original printed its own brand line. */
.gb-top {
    display: flex;
    justify-content: center;
    padding: 2px 0 10px;
}
.gb-brand {
    font-size: 0.55rem;
    letter-spacing: 3px;
    color: #6d6f66;
    text-transform: uppercase;
}

/* Screen bezel. The original's most recognisable feature is the wide dark
   recess around a small LCD, with the instruction line printed below it. */
.gb-bezel {
    background: var(--gb-bezel);
    border-radius: 8px 8px 20px 8px;
    padding: 12px 14px 10px;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.5),
        inset 0 -1px 0 rgba(255,255,255,0.12);
}
.gb-bezel-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.42rem;
    letter-spacing: 1.5px;
    color: #3d4238;
    text-transform: uppercase;
    padding: 0 2px 5px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.gb-lcd {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #9bbc0f;
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px #4e5349, 0 0 12px rgba(139,172,15,0.25);
    outline: none;
}
.gb-lcd:focus-visible { box-shadow: inset 0 0 0 2px #4e5349, 0 0 0 2px var(--grn); }
.gb-power {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.45rem;
    letter-spacing: 1.5px;
    color: #3d4238;
    text-transform: uppercase;
    padding: 6px 2px 0;
}
.gb-power-led {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #d42a2a;
    box-shadow: 0 0 4px rgba(212,42,42,0.9), inset 0 -1px 0 rgba(0,0,0,0.4);
}

/* Controls: D-pad left, A/B right, exactly as the case has them. */
.gb-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 6px 4px;
}
.gb-dpad {
    position: relative;
    width: 84px; height: 84px;
    display: grid;
    grid-template-columns: repeat(3, 28px);
    grid-template-rows: repeat(3, 28px);
}
.gb-dbtn {
    background: var(--gb-dpad);
    border: none;
    color: #6a6a6a;
    font-size: 0.55rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background 0.08s;
}
.gb-dbtn:hover { background: #3a3a3a; }
.gb-dbtn:active { background: #151515; color: #8a8a8a; }
.gb-dbtn:focus-visible { outline: 2px solid var(--grn); outline-offset: 1px; }
.gb-up    { grid-area: 1 / 2; border-radius: 4px 4px 0 0; }
.gb-down  { grid-area: 3 / 2; border-radius: 0 0 4px 4px; }
.gb-left  { grid-area: 2 / 1; border-radius: 4px 0 0 4px; }
.gb-right { grid-area: 2 / 3; border-radius: 0 4px 4px 0; }
.gb-dcenter { grid-area: 2 / 2; background: var(--gb-dpad-dark); }

.gb-ab { display: flex; gap: 14px; padding-top: 14px; }
.gb-keywrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transform: rotate(-22deg);
}
.gb-key {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: radial-gradient(circle at 34% 28%, #6b3f80, var(--gb-btn) 58%, var(--gb-btn-dark));
    color: var(--gb-btn-text);
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--gb-btn-dark), 0 4px 8px rgba(0,0,0,0.4);
    transition: transform 0.06s, box-shadow 0.06s;
}
.gb-key:hover { box-shadow: 0 3px 0 var(--gb-btn-dark), 0 4px 12px rgba(160,80,200,0.5); }
.gb-key:active { transform: translateY(3px); box-shadow: 0 0 0 var(--gb-btn-dark); }
.gb-key:focus-visible { outline: 2px solid var(--grn); outline-offset: 3px; }
.gb-keycap {
    font-size: 0.55rem;
    color: #6d6f66;
    letter-spacing: 1px;
    transform: rotate(22deg);
}

/* Start and Select sit lower and at an angle on the real case. */
.gb-startselect {
    display: flex;
    justify-content: center;
    gap: 26px;
    padding: 4px 0 10px;
}
.gb-ss-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transform: rotate(-22deg);
}
.gb-ss {
    width: 42px; height: 12px;
    border-radius: 7px;
    border: none;
    background: linear-gradient(180deg, #4a4a4a, #2e2e2e);
    box-shadow: 0 2px 0 #1a1a1a, 0 3px 6px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.06s, box-shadow 0.06s;
}
.gb-ss:hover { background: linear-gradient(180deg, #585858, #383838); }
.gb-ss:active { transform: translateY(2px); box-shadow: 0 0 0 #1a1a1a; }
.gb-ss:focus-visible { outline: 2px solid var(--grn); outline-offset: 3px; }
.gb-sslabel {
    font-size: 0.5rem;
    color: #6d6f66;
    letter-spacing: 1px;
    transform: rotate(22deg);
}

/* The bottom-right wordmark, tilted as on the case. */
.gb-logos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 2px;
    transform: rotate(-6deg);
}
.gb-logo-mark { color: #6d6f66; font-size: 0.6rem; letter-spacing: -2px; }
.gb-logo-txt {
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #5a5d54;
    font-weight: bold;
    font-style: italic;
}