:root {
  color-scheme: dark;
  /* Two colours are the user's, the highlight and the background (Settings →
     Colours). theme.js derives every other token from them onto <html>
     before the first paint; these are the night defaults for a page that
     has not run it. One surface, raised or sunken by a shadow pair; the
     highlight is the only colour; the signal triad (green, amber, red) is
     reserved for level and state. */
  --hl: #ff5a1f;
  --on-hl: #ffffff;
  --hl-soft: #5c3324;
  --back: #24272c;
  --surf: #2b2e34;
  --surf-hi: #32363d;
  --well: #24272c;
  --txt: #dcdee3;
  --lbl: #878c95;
  --disc-txt: #c9ccd2;
  --disc-a: #33373e;
  --disc-b: #282b31;
  --thumb-a: #3a3e46;
  --thumb-b: #2a2d33;
  --rule: rgba(0, 0, 0, 0.4);
  --rule2: rgba(255, 255, 255, 0.08);
  --rule-strong: rgba(255, 255, 255, 0.16);
  --ex: 10px 10px 22px rgba(0, 0, 0, 0.55), -8px -8px 18px rgba(255, 255, 255, 0.045);
  --ex-sm: 5px 5px 12px rgba(0, 0, 0, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.045);
  --in: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -4px -4px 8px rgba(255, 255, 255, 0.04);
  --in-sm: inset 3px 3px 6px rgba(0, 0, 0, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.04);
  --drop: 0 4px 10px rgba(0, 0, 0, 0.35);
  --wheel-dark: #1b1d22;
  --wheel-light: #4d525b;
  --beat-dim: #5c3324;
  --ok: #43c46a;
  --warn: #e2c93a;
  --bad: #ff4b3e;
  --ok-dim: #2d5a3a;
  --warn-dim: #5c5a2c;
  --bad-dim: #5e2f2b;
  --raised: linear-gradient(145deg, var(--surf-hi), var(--surf));
  --disc: linear-gradient(145deg, var(--disc-a), var(--disc-b));
  --thumb: linear-gradient(145deg, var(--thumb-a), var(--thumb-b));
  /* The older names, so every rule below reads the pair. */
  --bg: var(--back);
  --surface: var(--surf);
  --surface-2: var(--surf-hi);
  --surface-3: var(--disc-a);
  --page: #eef0e9;
  --text: var(--txt);
  --muted: var(--lbl);
  --muted-strong: var(--disc-txt);
  --line: var(--rule2);
  --line-strong: var(--rule-strong);
  --cream: var(--hl);
  --cyan: var(--hl);
  --danger: var(--bad);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --radius: 22px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --shadow: 0 24px 80px rgba(40, 35, 30, 0.2);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  font-size: 16px;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--back);
  color: var(--text);
  font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

button,
input,
select {
  font: inherit;
}

button,
label,
select,
input[type="range"],
input[type="color"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
label.button:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.app-shell {
  min-height: 100vh;
  padding: 0 18px 16px;
}

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  max-width: 1540px;
  margin: 0 auto;
}

.topbar-primary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 18px;
}

.brand {
  --brand-height: 38px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

/* The earspasm mark and the PLBK wordmark share one height. The wordmark is
   outlined Futura PT Heavy with its viewBox trimmed to the letters, so the
   height is the cap height. */
:root[data-theme="light"] .brand img {
  filter: invert(1) hue-rotate(180deg);
}

.brand img {
  display: block;
  width: auto;
  height: var(--brand-height);
  object-fit: contain;
}

.now-playing {
  display: grid;
  min-width: 0;
  max-width: min(420px, 34vw);
  gap: 1px;
  border: 0;
  border-radius: 12px;
  padding: 7px 14px 8px;
  background: var(--well);
  box-shadow: var(--in-sm);
}

.now-playing span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 720;
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-transform: uppercase;
}

.now-playing strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Live audio input on/off in the header. The dot is dim green while off
   and lit green while the mic is connected. */
.audio-toggle {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.audio-toggle:hover {
  filter: brightness(1.08);
}

.audio-toggle i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok-dim);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.audio-toggle em {
  min-width: 22px;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.audio-toggle.is-on i {
  background: var(--ok);
}

.audio-toggle.is-on em {
  color: var(--text);
}

.button,
.icon-button,
.transport-button,
.number-stepper button {
  border: 0;
  cursor: pointer;
}

.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.button svg,
.icon-button svg,
.transport-button svg,
.volume-line svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.button-secondary {
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.button-secondary:hover,
.icon-button:hover {
  filter: brightness(1.08);
}

.button-primary {
  background: var(--hl);
  box-shadow: var(--drop), 0 0 0 1px rgba(0, 0, 0, 0.12);
  color: var(--on-hl);
}

.button-primary:hover {
  filter: brightness(1.06);
}

.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  max-width: 1540px;
  margin: 0 auto;
}

.reader-panel,
.control-panel {
  min-width: 0;
}

.score-stage {
  position: relative;
  display: grid;
  height: calc(100vh - 82px);
  min-height: 620px;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 720;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 780px;
  margin-bottom: 0;
  overflow: hidden;
  font-size: clamp(1.35rem, 2.1vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h2 {
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.visual-metronome {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

/* At rest the light is the highlight at a low opacity, so over the page it
   is a faint wash of the colour, never a dark disc (Mike, 2026-10-17). */
.visual-metronome i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hl) 24%, transparent);
}

.visual-metronome.is-pulsing i {
  background: var(--hl);
  box-shadow: 0 0 14px 4px color-mix(in srgb, var(--hl) 80%, transparent), 0 0 30px 8px color-mix(in srgb, var(--hl) 30%, transparent);
  transform: scale(1.12);
}

.visual-metronome.is-downbeat.is-pulsing i {
  box-shadow: 0 0 18px 6px color-mix(in srgb, var(--hl) 90%, transparent), 0 0 40px 12px color-mix(in srgb, var(--hl) 40%, transparent);
  transform: scale(1.22);
}

.visual-metronome.is-disabled {
  visibility: hidden;
}

/* Undocked metronome: the docked light dims to a placeholder and a floating
   disc takes over. The disc is sized by --metro-size and everything inside
   scales with it (font-size carries the size so em units follow). */
.metro-dock-slot {
  position: relative;
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.metro-dock-hint {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 8px;
  padding: 3px 8px;
  background: var(--raised);
  box-shadow: var(--ex-sm);
  color: var(--text);
  font-size: 0.64rem;
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.metro-dock-hint svg {
  width: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metro-dock-slot:hover .metro-dock-hint,
.metro-dock-slot:focus-visible .metro-dock-hint {
  opacity: 1;
}

.metro-dock-slot:hover .visual-metronome {
  border-color: color-mix(in srgb, var(--hl) 60%, transparent);
}

.transport .visual-metronome.is-undocked {
  opacity: 0.22;
}

.transport .visual-metronome.is-undocked.is-pulsing {
  transform: none;
}

.metro-float {
  --metro-size: 96px;
  position: fixed;
  z-index: 40;
  width: var(--metro-size);
  height: var(--metro-size);
  font-size: var(--metro-size);
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.metro-float.is-dragging {
  cursor: grabbing;
}

.metro-float.is-disabled {
  display: none;
}

.metro-float {
  --metro-opacity: 0.85;
}

.metro-float .visual-metronome {
  width: 100%;
  height: 100%;
  flex: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: var(--metro-opacity);
}

.metro-float .visual-metronome i {
  width: 72%;
  height: 72%;
  background: color-mix(in srgb, var(--hl) 24%, transparent);
  transition: none;
}

.metro-float .visual-metronome.is-pulsing {
  transform: none;
  background: transparent;
}

.metro-float .visual-metronome.is-pulsing i {
  background: var(--hl);
  box-shadow: 0 0 0.35em 0.08em color-mix(in srgb, var(--hl) 70%, transparent);
  transform: scale(1.12);
}

.metro-float .visual-metronome.is-downbeat.is-pulsing i {
  box-shadow: 0 0 0.45em 0.12em color-mix(in srgb, var(--hl) 80%, transparent);
  transform: scale(1.2);
}

/* Hover (or tap) tab: size, opacity, flash timing. Kept as small as it
   can be read. Each row's icon turns into a "?" on hover and toggles a help
   line below the slider. */
.metro-float-tab {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  display: grid;
  gap: 3px;
  width: 136px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 12px;
  padding: 7px 8px;
  background: var(--raised);
  box-shadow: var(--ex);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.metro-float.is-flipped .metro-float-tab {
  top: auto;
  bottom: calc(100% + 3px);
}

/* Invisible bridges over the 6px gap, above and below the tab, so moving
   the pointer from the disc onto the tab never counts as leaving. */
.metro-float-tab::before,
.metro-float-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
}

.metro-float-tab::before {
  top: -10px;
}

.metro-float-tab::after {
  bottom: -10px;
}

.metro-float:hover .metro-float-tab,
.metro-float.is-editing .metro-float-tab,
.metro-float:focus-within .metro-float-tab {
  opacity: 1;
  pointer-events: auto;
}

.metro-tab-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 5px;
  cursor: default;
}

.metro-help-toggle {
  position: relative;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted-strong);
  cursor: help;
}

.metro-help-toggle svg {
  width: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The "?" covers the icon on hover and stays while the help is open. */
.metro-help-toggle::after {
  content: "?";
  position: absolute;
  inset: -1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hl);
  color: var(--on-hl);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transition: opacity 100ms ease;
}

.metro-help-toggle:hover::after,
.metro-tab-row.is-help-open .metro-help-toggle::after {
  opacity: 1;
}

.metro-help {
  display: none;
  grid-column: 1 / -1;
  margin: 1px 0 2px;
  color: var(--muted-strong);
  font-size: 10px;
  line-height: 1.35;
}

.metro-tab-row.is-help-open .metro-help {
  display: block;
}

.metro-tab-row input[type="range"] {
  height: 14px;
  min-width: 0;
  cursor: ew-resize;
}

.metro-tab-row.has-readout {
  grid-template-columns: 14px 1fr 38px;
}

.metro-tab-row output {
  color: var(--muted-strong);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}


.position-readout span {
  display: grid;
  gap: 1px;
  text-align: left;
}

.position-readout b {
  color: var(--text);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.score-viewport {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 12px 16px;
  background: var(--well);
  box-shadow: var(--in);
  /* The page is sized from this box (container units), not from the window
     height: the bar and the timeline below can be any height. */
  container-type: size;
}

.page-frame {
  position: relative;
  width: min(100%, calc((100cqh - 2px) * 0.77295));
  max-height: 100%;
  aspect-ratio: 640 / 828;
  overflow: visible;
  border-radius: 3px;
  background: var(--page);
  box-shadow: 0 14px 54px rgba(0, 0, 0, 0.48);
  transform: translateZ(0);
}

.page-frame::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(8, 15, 24, 0.16);
  content: "";
  pointer-events: none;
}

#scoreImage {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  object-fit: contain;
  opacity: 1;
  user-select: none;
  transition: opacity 120ms ease;
}

#scoreImage.is-loading {
  opacity: 0.35;
}

.measure-overlay {
  position: absolute;
  z-index: 2;
  border: 1.5px solid var(--hl);
  border-radius: 3px;
  background: color-mix(in srgb, var(--hl) 34%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: left 90ms linear, top 90ms linear, width 90ms linear, opacity 100ms ease;
}

.measure-overlay.is-visible {
  opacity: 1;
}

.page-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--page) 82%, transparent);
  color: #293142;
  font-size: 0.85rem;
  font-weight: 650;
}

.empty-state {
  max-width: 420px;
  padding: 48px 28px;
  text-align: center;
}

.empty-state .empty-mark {
  display: grid;
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--cream);
  font-size: 2rem;
}

.empty-state h2 {
  margin-bottom: 8px;
  font-size: 1.45rem;
}

.empty-state p {
  margin-bottom: 22px;
  color: var(--muted);
}

.timeline-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.timeline-row span:last-child {
  text-align: right;
}

input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--hl);
}

/* Horizontal sliders: a sunken track, the highlight filled up to the value
   (--p, painted by app.js), a raised disc as the thumb. Console faders and
   knobs keep their own drawing. */
.slider,
.parameter-rack input[type="range"],
.volume-line input[type="range"],
.range-field input[type="range"],
.tempo-panel input[type="range"],
.timeline-row input[type="range"] {
  --p: 0%;
  height: 22px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.slider::-webkit-slider-runnable-track,
.parameter-rack input[type="range"]::-webkit-slider-runnable-track,
.volume-line input[type="range"]::-webkit-slider-runnable-track,
.range-field input[type="range"]::-webkit-slider-runnable-track,
.tempo-panel input[type="range"]::-webkit-slider-runnable-track,
.timeline-row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--hl) 0 var(--p), var(--well) var(--p) 100%);
  box-shadow: var(--in-sm);
}

.slider::-webkit-slider-thumb,
.parameter-rack input[type="range"]::-webkit-slider-thumb,
.volume-line input[type="range"]::-webkit-slider-thumb,
.range-field input[type="range"]::-webkit-slider-thumb,
.tempo-panel input[type="range"]::-webkit-slider-thumb,
.timeline-row input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--hl) 0 4px, transparent 4.5px), var(--thumb);
  box-shadow: var(--drop), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-appearance: none;
  appearance: none;
}

.timeline-row input[type="range"] {
  height: 18px;
  cursor: ew-resize;
  touch-action: none;
}

/* Transport bar. One wrapping row: transport buttons, tempo, start measure,
   then the status cluster (measure/page readout, metronome light, master
   volume) pushed to the right. Below 1120px it folds into two rows: buttons
   with the readout and metronome on top, tempo, start measure and volume
   below. Nothing leaves the bar at any width. */
.transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-height: 70px;
  padding: 12px 18px 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--raised);
  box-shadow: var(--ex);
}

.transport-buttons {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.transport .number-control {
  flex: 0 0 auto;
}

/* Left: transport, tempo, start measure, then the measure and page readout
   beside them. Right: the beat light, Click and master volume as one group,
   so a narrow bar wraps the three together and keeps them at the right. */
.transport-right {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 10px 14px;
  margin-left: auto;
}

.transport .volume-control {
  flex: 0 1 200px;
  min-width: 128px;
}

/* Every control in the bar sits on one line. Tempo, Start measure and
   Master volume carry a label above their control (an 18 px row and a
   5 px gap); the buttons, the readout, the beat light and the Click pill
   get the same room above, so centring the bar lines up the controls
   rather than the boxes. Every control row is 38 px, the buttons' height. */
.transport {
  --bar-label: 23px;
}

.transport .number-control,
.transport .volume-control {
  grid-template-rows: 18px 38px;
  gap: 5px;
  align-items: center;
}

/* The wheel hangs under its stepper as a third row; the rest of the bar
   stays on the stepper's line. */
.transport .number-control {
  grid-template-rows: 18px 38px 24px;
  align-self: start;
}

.transport {
  align-items: start;
}

.transport .transport-buttons,
.transport .position-readout,
.transport .metro-dock-slot,
.transport .click-toggle {
  margin-top: var(--bar-label);
}

.transport .position-readout {
  min-height: 38px;
  align-items: center;
  align-content: center;
}

/* The master volume sits in the same box as the Tempo and Start measure
   steppers. */
.transport .volume-line {
  box-sizing: border-box;
  height: 36px;
  border: 0;
  padding: 0 4px 0 2px;
  background: transparent;
}

/* The click's mute, beside the master volume: lit green while the click
   sounds, red when it is muted (the mixer's M shows the same). */
.transport .click-toggle {
  min-height: 38px;
  flex: 0 0 auto;
}

.click-toggle i {
  background: var(--beat-dim);
}

.click-toggle.is-on i {
  background: var(--hl);
}

.click-toggle.is-muted i {
  background: var(--bad);
}

.click-toggle.is-muted em {
  color: var(--text);
}

.transport-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
}

.transport-button:hover {
  filter: brightness(1.08);
}

.play-button {
  background: var(--hl);
  box-shadow: var(--drop), 0 0 0 1px rgba(0, 0, 0, 0.12);
  color: var(--on-hl);
}

.play-button:hover {
  filter: brightness(1.06);
}

.play-button .pause-icon,
.is-playing .play-button .play-icon {
  display: none;
}

.is-playing .play-button .pause-icon {
  display: block;
}

.number-control,
.volume-control {
  display: grid;
  align-items: center;
  gap: 5px;
}

.number-control {
  grid-template-rows: auto 36px;
}

.control-label-row {
  display: flex;
  min-height: 18px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.control-label,
.color-field > span,
.range-field > span,
.select-field > span {
  color: var(--muted-strong);
  font-size: 0.71rem;
  font-weight: 650;
  letter-spacing: 0.025em;
}

.number-stepper {
  display: flex;
  align-items: center;
  gap: 7px;
}

.number-stepper .use-current-button {
  height: 32px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
}

.number-stepper .use-current-button:hover,
.number-stepper button:hover {
  filter: brightness(1.08);
}

.number-stepper button[data-step] {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  font-size: 1.05rem;
  line-height: 1;
}

.number-stepper input {
  width: 58px;
  min-width: 0;
  height: 36px;
  border: 0;
  border-radius: 11px;
  padding: 0 6px;
  background: var(--well);
  box-shadow: var(--in);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}

.position-readout {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.05;
}

.number-stepper input::-webkit-inner-spin-button,
.number-stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.control-unit {
  justify-self: end;
  margin-top: -23px;
  transform: translateX(1px);
  color: var(--muted);
  font-size: 0.64rem;
  pointer-events: none;
}

.control-unit-inline {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.055em;
}

.volume-line {
  display: grid;
  grid-template-columns: 20px minmax(80px, 1fr);
  align-items: center;
  gap: 8px;
}

.volume-line svg {
  color: var(--disc-txt);
}

.control-panel {
  height: calc(100vh - 94px);
  min-height: 680px;
  overflow: auto;
  border: 0;
  border-radius: var(--radius);
  background: var(--raised);
  box-shadow: var(--ex);
  scrollbar-color: var(--disc-a) transparent;
}

.side-section {
  padding: 16px;
  border-bottom: 1px solid var(--rule);
}

/* The Settings accordion: five sections nested inside one, drawn a step
   in and a shade darker so the level reads at a glance. */
.settings-group {
  display: grid;
  margin: 0 -16px -16px;
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--well) 55%, transparent);
}

.settings-group > .side-section {
  padding: 13px 16px 13px 26px;
}

.settings-group > .side-section:last-child {
  border-bottom: 0;
}

.settings-group > .side-section .section-heading h2 {
  font-size: 0.92em;
}

.side-section:last-child {
  border-bottom: 0;
}

/* Every side section collapses from its heading. The chevron is the
   control; the heading itself is also clickable except on its own
   switches and pills. */
.side-section[data-section] .section-heading {
  cursor: pointer;
  user-select: none;
}

.section-toggle {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  cursor: pointer;
}

.section-toggle svg {
  width: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.section-toggle:hover {
  filter: brightness(1.08);
  color: var(--text);
}

.side-section.is-collapsed > :not(.section-heading) {
  display: none;
}

.side-section.is-collapsed .section-heading {
  margin-bottom: 0;
}

.side-section.is-collapsed .section-toggle svg {
  transform: rotate(-90deg);
}

/* Setlist strip in the header: only present while a setlist is active. */
.setlist-strip {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 14px;
  padding: 5px 8px 5px 6px;
  background: var(--well);
  box-shadow: var(--in-sm);
}

.setlist-nav {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  cursor: pointer;
}

.setlist-nav svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.setlist-nav:hover:not(:disabled) {
  filter: brightness(1.08);
}

.setlist-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.setlist-nav.is-armed {
  background: var(--warn);
  box-shadow: var(--drop);
  color: #1d1b14;
}

.setlist-position {
  min-width: 46px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.setlist-upnext {
  min-width: 0;
  max-width: 260px;
  overflow: hidden;
  margin-left: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setlist-strip.is-armed .setlist-upnext {
  color: var(--warn);
}

/* Setlist section. */
.setlist-panel {
  display: grid;
  gap: 10px;
}

.setlist-panel .helper-text {
  margin: 0;
}

.setlist-picker,
.setlist-add-select {
  min-height: 36px;
  border-radius: 8px;
  padding: 0 30px 0 10px;
  font-size: 0.8rem;
}

.setlist-manage,
.setlist-add-row,
.setlist-file-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.setlist-add-row .setlist-add-select {
  flex: 1 1 140px;
  min-width: 0;
}

.setlist-file-row .button {
  flex: 1 1 0;
  min-height: 34px;
  font-size: 0.74rem;
}

.setlist-small-button,
.setlist-icon-button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 11px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.setlist-small-button:hover,
.setlist-icon-button:hover:not(:disabled) {
  filter: brightness(1.08);
}

.setlist-small-button.is-danger,
.setlist-icon-button.is-danger {
  color: var(--danger);
}

.setlist-icon-button {
  width: 28px;
  padding: 0;
  font-size: 0.85rem;
}

.setlist-icon-button:disabled {
  opacity: 0.3;
  cursor: default;
}

.setlist-entries {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.setlist-entries .is-empty {
  color: var(--muted);
  font-size: 0.74rem;
}

.setlist-entry {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  padding: 7px 7px 7px 9px;
  background: var(--well);
  box-shadow: var(--in-sm);
}

.setlist-entry.is-current {
  background: color-mix(in srgb, var(--hl) 14%, var(--well));
  box-shadow: var(--in-sm), inset 0 0 0 1.5px var(--hl);
}

.setlist-entry.is-missing {
  opacity: 0.6;
}

.setlist-entry-index {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.setlist-entry.is-current .setlist-entry-index {
  color: var(--cream);
}

.setlist-entry-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.setlist-entry-title {
  overflow: hidden;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 650;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.setlist-entry-title:hover:not(:disabled) {
  color: var(--cream);
}

.setlist-entry-title:disabled {
  cursor: default;
}

.setlist-entry-missing {
  color: var(--danger);
  font-size: 0.66rem;
}

.setlist-entry-note {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 2px 5px;
  background: transparent;
  color: var(--muted-strong);
  font-size: 0.7rem;
}

.setlist-entry-note::placeholder {
  color: var(--lbl);
  opacity: 0.7;
}

.setlist-entry-note:hover,
.setlist-entry-note:focus {
  border-color: transparent;
  background: var(--surf);
  box-shadow: var(--ex-sm);
  outline: none;
}

.setlist-entry-actions {
  display: flex;
  gap: 3px;
}

/* MIDI control section. */
.midi-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.midi-status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lbl);
  opacity: 0.6;
}

.midi-status-pill.is-live {
  color: var(--text);
}

.midi-status-pill.is-live i {
  background: var(--ok);
  opacity: 1;
}

.midi-panel {
  display: grid;
  gap: 12px;
}

.midi-panel .helper-text {
  margin: 0;
}

.midi-device-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted-strong);
  font-size: 0.76rem;
}

.midi-device-list li::before {
  content: "● ";
  color: var(--ok);
  font-size: 0.6rem;
  vertical-align: 2px;
}

.midi-device-list li.is-empty {
  color: var(--muted);
}

.midi-device-list li.is-empty::before {
  content: none;
}

.midi-map-list {
  display: grid;
}

.midi-group-label {
  margin: 8px 0 2px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* One compact row per function: name and buttons on the first line, the
   learned message and (for faders and buttons) the small type dropdown on
   the second. Nothing overlaps because the dropdown lives in its own line. */
.midi-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label actions" "detail detail";
  align-items: center;
  column-gap: 6px;
  row-gap: 1px;
  border: 0;
  border-radius: 10px;
  box-shadow: var(--in-sm);
  padding: 4px 7px 5px;
  background: var(--well);
}

.midi-map-row.is-mapped {
  box-shadow: var(--in-sm), inset 0 0 0 1px color-mix(in srgb, var(--hl) 45%, transparent);
}

.midi-map-row.is-learning {
  background: color-mix(in srgb, var(--hl) 12%, var(--well));
  box-shadow: var(--in-sm), inset 0 0 0 1.5px var(--hl);
}

.midi-map-label {
  grid-area: label;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.midi-map-detail {
  grid-area: detail;
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.64rem;
  white-space: nowrap;
}

.midi-map-row:not(.is-mapped):not(.is-learning) .midi-map-detail {
  display: none;
}

.midi-map-row.is-mapped .midi-map-detail {
  color: var(--muted-strong);
}

.midi-map-row.is-learning .midi-map-detail {
  color: var(--cyan);
}

.midi-takeover {
  color: var(--cream);
  font-style: normal;
}

.midi-map-actions {
  grid-area: actions;
  display: flex;
  gap: 3px;
}

.midi-small-button {
  min-height: 20px;
  border: 0;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.midi-small-button:hover {
  filter: brightness(1.08);
}

.midi-small-button.is-danger {
  color: var(--danger);
}

.midi-feedback-select {
  width: auto;
  max-width: 60%;
  min-height: 30px;
  border-radius: 7px;
  padding: 0 26px 0 8px;
  font-size: 0.72rem;
}

.midi-mode-select,
.midi-test-type {
  width: auto;
  max-width: 100%;
  min-height: 20px;
  border-radius: 5px;
  padding: 0 20px 0 6px;
  font-size: 0.62rem;
  line-height: 1;
}

.midi-map-detail .midi-mode-select {
  flex: 0 1 auto;
  min-width: 0;
}

.midi-map-list {
  gap: 3px;
}

.midi-group-label {
  margin: 6px 0 1px;
}

.midi-file-row {
  display: flex;
  gap: 8px;
}

.midi-file-row .button {
  flex: 1 1 0;
  min-height: 34px;
  font-size: 0.74rem;
}

.midi-test summary {
  color: var(--muted-strong);
  font-size: 0.72rem;
  cursor: pointer;
}

.midi-test-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.midi-test-row label {
  color: var(--muted);
  font-size: 0.66rem;
}

.midi-test-row input[type="number"] {
  width: 50px;
  min-height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 4px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.7rem;
  text-align: center;
}

/* Map-controller mode: every mappable control on screen is outlined and
   clicking it starts learning; the one being learned pulses. */
body.is-midi-mapping [data-midi-target] {
  outline: 2px solid color-mix(in srgb, var(--hl) 75%, transparent);
  outline-offset: 2px;
  cursor: crosshair;
}

body.is-midi-mapping [data-midi-target].is-midi-learning {
  outline-color: var(--cyan);
  animation: midi-learn-pulse 900ms ease-in-out infinite;
}

@keyframes midi-learn-pulse {
  50% { outline-color: color-mix(in srgb, var(--hl) 20%, transparent); }
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.section-heading h2 {
  margin: 0;
}

.section-heading.compact {
  align-items: flex-start;
}

/* Part picker: the written parts of a piece as pills in a sunken row. The
   active part is the highlight; the others are raised discs. */
.part-picker {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding: 5px;
  border-radius: 14px;
  background: var(--well);
  box-shadow: var(--in-sm);
}

.part-pill {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.part-pill:hover {
  filter: brightness(1.08);
}

.part-pill.is-active {
  background: var(--hl);
  box-shadow: var(--drop), 0 0 0 1px rgba(0, 0, 0, 0.12);
  color: var(--on-hl);
}

.ready-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lbl);
  font-size: 0.72rem;
  font-weight: 600;
}

.ready-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.ready-pill.is-loading {
  color: var(--lbl);
}

.ready-pill.is-loading i {
  background: var(--warn);
  animation: pulse 1s ease-in-out infinite;
}

.ready-pill.is-error {
  color: var(--bad);
}

.ready-pill.is-error i {
  background: var(--danger);
}

@keyframes pulse {
  50% { opacity: 0.38; }
}

select {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  padding: 0 35px 0 13px;
  background-color: var(--well);
  box-shadow: var(--in-sm);
  color: var(--text);
}

.helper-text {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch span {
  position: relative;
  width: 35px;
  height: 20px;
  border-radius: 999px;
  background: var(--well);
  box-shadow: var(--in-sm);
  transition: background 140ms ease;
}

.switch span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--thumb);
  box-shadow: var(--drop);
  content: "";
  transition: transform 140ms ease, background 140ms ease;
}

.switch input:checked + span::after {
  background: var(--hl);
  transform: translateX(15px);
}

.switch em {
  min-width: 18px;
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 650;
}

.overlay-controls {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 15px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
  color: var(--muted-strong);
  font-size: 0.75rem;
  font-weight: 650;
}

.color-field,
.range-field,
.select-field {
  display: grid;
  gap: 8px;
}

.color-field input {
  width: 100%;
  height: 32px;
  border: 0;
  border-radius: 10px;
  padding: 4px;
  background: var(--well);
  box-shadow: var(--in-sm);
  cursor: pointer;
}

.color-field input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-field input::-webkit-color-swatch {
  border: 0;
  border-radius: 7px;
}

/* Settings → Colours: the two colours side by side. */
.theme-controls {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 13px;
}

.range-field + .range-field,
.select-field {
  margin-top: 16px;
}

.range-field > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

output {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Live meters in the side panel: a thin bar per channel with its name,
   fed the console's own VU reading. Like an LED ladder: dim green,
   yellow and red segments that light up to the level (green to 0 VU at
   70 %, yellow to 90 %, red above), with the red end held lit on a
   full-scale peak. Read-only; levels are changed in the console. */
.mixer-meters {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin: 2px 0 12px;
}

.mixer-meter {
  --level: 0%;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.mixer-meter i {
  position: relative;
  height: 9px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(to right, var(--ok-dim) 0 70%, var(--warn-dim) 70% 90%, var(--bad-dim) 90% 100%);
  box-shadow: var(--in-sm);
}

/* The lit part: the bright colours, clipped at the level. */
.mixer-meter i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--ok) 0 70%, var(--warn) 70% 90%, var(--bad) 90% 100%);
  clip-path: inset(0 calc(100% - var(--level)) 0 0);
  transition: clip-path 40ms linear;
}

/* Segment gaps over both layers, so it reads as a ladder of lights. */
.mixer-meter i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to right, transparent 0 5px, var(--well) 5px 6px);
  pointer-events: none;
}

.mixer-meter.is-clip i {
  box-shadow: var(--in-sm), inset -6px 0 0 var(--bad);
}

.mixer-open-button {
  width: 100%;
}

.mixer-dialog {
  width: min(1120px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100vh - 28px);
  margin: auto;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: var(--surf);
  box-shadow: var(--ex), 0 38px 120px rgba(0, 0, 0, 0.5);
  color: var(--txt);
}

.mixer-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(7px);
}

.mixer-window {
  display: grid;
  max-height: calc(100vh - 30px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.mixer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 17px;
  background: transparent;
}

.mixer-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}

.mixer-header h2 {
  font-size: 1.02rem;
}

.mixer-heading {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
}

.mixer-heading span {
  color: var(--lbl);
  font-size: 0.7rem;
  font-weight: 600;
}

/* The note that used to be the footer: one or two lines beside the title. */
.mixer-note {
  flex: 1 1 auto;
  max-width: 560px;
  margin: 0;
  color: var(--lbl);
  font-size: 0.66rem;
  line-height: 1.35;
}

.mixer-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
}

.mixer-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--disc-a) transparent;
}

/* Five raised strips on the surface. A strip is known by its title bar
   (a well at the foot) and its place; the channel colours are gone. */
.mixer-console {
  display: grid;
  min-width: 880px;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(250px, 1.5fr) minmax(150px, 1fr) minmax(150px, 0.9fr);
  align-items: stretch;
  gap: 12px;
  padding: 14px 16px 16px;
  background: transparent;
}

.channel-strip {
  --channel-color: #377ec2;
  display: grid;
  grid-template-rows: 1fr auto 38px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--raised);
  box-shadow: var(--ex-sm);
}

.channel-reverb { --channel-color: #a4b30c; }
.channel-mains { --channel-color: #7736be; }

.channel-top {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 13px 10px 10px;
}

.channel-top select {
  min-height: 31px;
  border: 0;
  border-radius: 9px;
  padding-right: 24px;
  padding-left: 9px;
  background-color: var(--well);
  box-shadow: var(--in-sm);
  color: var(--txt);
  font-size: 0.68rem;
}

.channel-top select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.knob-control {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--lbl);
  font-size: 0.66rem;
  font-weight: 600;
}

.knob-control output {
  min-width: 62px;
  border-radius: 8px;
  padding: 4px 6px;
  background: var(--well);
  box-shadow: var(--in-sm);
  color: var(--txt);
  text-align: center;
}

.knob-shell {
  --knob-angle: -135deg;
  --knob-sweep: 0deg;
  position: relative;
  isolation: isolate;
  display: block;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 225deg,
    var(--hl) 0deg var(--knob-sweep),
    var(--well) var(--knob-sweep) 270deg,
    var(--well) 270deg 360deg
  );
  box-shadow: var(--in-sm);
}

.knob-shell::before {
  position: absolute;
  inset: 5px;
  z-index: 0;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: var(--drop), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  content: "";
  pointer-events: none;
}

.knob-shell::after {
  position: absolute;
  top: 7px;
  left: calc(50% - 1px);
  z-index: 1;
  width: 2px;
  height: 12px;
  transform: rotate(var(--knob-angle));
  transform-origin: 1px 15px;
  border-radius: 2px;
  background: var(--hl);
  content: "";
  pointer-events: none;
}

.knob-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: 0;
}

.knob-input:focus-visible {
  outline: 0;
}

.knob-shell:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* The send sits on one row: its name, the knob, the value. */
.send-control {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  justify-items: start;
  gap: 8px;
  padding-top: 1px;
}

/* The instrument's input device and input channel side by side. */
.channel-field-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.62fr);
  gap: 7px;
}

.send-knob {
  width: 38px;
  height: 38px;
}

.send-knob::after {
  top: 6px;
  height: 10px;
  transform-origin: 1px 13px;
}

.channel-field,
.routing-badge {
  display: grid;
  gap: 5px;
  color: var(--lbl);
  font-size: 0.64rem;
  font-weight: 600;
}

.channel-field > span,
.insert-bank > span,
.routing-badge > span {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.channel-field output {
  color: var(--txt);
}

.insert-bank {
  display: grid;
  gap: 6px;
  color: var(--lbl);
  font-size: 0.64rem;
  font-weight: 600;
}

.insert-slot {
  width: 100%;
  min-height: 31px;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  padding: 0 9px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--txt);
  font-size: 0.67rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

select.insert-slot.is-active {
  background: var(--hl);
  color: var(--on-hl);
}

.routing-badge strong {
  display: block;
  min-height: 31px;
  border: 0;
  border-radius: 9px;
  padding: 7px 9px;
  background: var(--well);
  box-shadow: var(--in-sm);
  color: var(--txt);
  font-size: 0.68rem;
  font-weight: 600;
}

.channel-fader-zone {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 10px;
  border-top: 0;
  padding: 8px 14px 12px;
  background: transparent;
}

.fader-readout {
  min-width: 66px;
  border: 0;
  border-radius: 8px;
  padding: 4px 8px;
  background: var(--well);
  box-shadow: var(--in-sm);
  color: var(--txt);
  font-size: 0.76rem;
  text-align: right;
}

/* --meter-height (190 px, shorter when the window is low: see fitMixer in
   app.js) sets the fader's travel and the meter beside it. */
.fader-meter-pair {
  display: grid;
  width: 55px;
  height: var(--meter-height, 190px);
  grid-template-columns: 34px 9px;
  align-items: stretch;
  justify-content: start;
  gap: 12px;
}

.channel-fader {
  box-sizing: border-box;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: var(--meter-height, 190px);
  margin: 0;
  direction: rtl;
  writing-mode: vertical-lr;
  accent-color: var(--hl);
  cursor: ns-resize;
  --p: 0%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.channel-fader::-webkit-slider-runnable-track {
  width: 6px;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(to top, var(--hl) 0 var(--p), var(--well) var(--p) 100%);
  box-shadow: var(--in-sm);
}

.channel-fader::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-left: -8px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--hl) 0 4px, transparent 4.5px), var(--thumb);
  box-shadow: var(--drop), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-appearance: none;
  appearance: none;
}

/* Unity mark: 0 dB sits at 70% of the fader travel, level with the meter's
   0 VU line. The thumb travels inside the track by half its own height, so
   the mark is placed on the thumb's centre line, not on the raw 70%. */
.fader-meter-pair {
  --fader-thumb: 22px;
  position: relative;
}

.fader-meter-pair::before {
  content: "";
  position: absolute;
  top: calc(var(--fader-thumb) / 2 + (100% - var(--fader-thumb)) * 0.3);
  left: 0;
  width: 34px;
  height: 1px;
  background: var(--rule-strong);
  pointer-events: none;
}

.level-meter {
  --level: 0%;
  position: relative;
  width: 9px;
  min-width: 9px;
  max-width: 9px;
  /* The meter spans the fader thumb's travel, not the whole track, so its
     0 VU line at 70% is level with the fader's unity mark at 70%. */
  height: calc(100% - var(--fader-thumb, 16px));
  margin: calc(var(--fader-thumb, 16px) / 2) 0;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: var(--well);
  box-shadow: var(--in-sm);
}

/* VU scale: 0 VU (-18 dBFS) sits at 70% of the bar. Green below it, yellow
   above it. The bar's gradient is fixed to the bar's own height, so the
   colour boundary never moves with the level. */
.level-meter i {
  position: absolute;
  right: 1px;
  bottom: 1px;
  left: 1px;
  height: var(--level);
  max-height: calc(100% - 2px);
  background: linear-gradient(to top, var(--ok) 0 70%, var(--warn) 70% 100%);
  background-size: 100% calc(var(--meter-height, 190px) - 2px);
  background-position: bottom;
  transition: height 40ms linear;
}

/* 0 VU tick */
.level-meter::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  border-top: 1px solid var(--rule-strong);
  pointer-events: none;
  z-index: 1;
}

/* Overload cap: lit red when the sample peak reaches full scale, held 1.2 s. */
.level-meter::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  height: 5px;
  border-radius: 1px;
  background: var(--bad-dim);
  z-index: 2;
}

.level-meter.is-clip::after {
  background: var(--bad);
}

/* The mains meter is two bars side by side. The shared meter rule pins the
   width to 9px, which left both bars with no room and the meter blank. */
.level-meter.stereo {
  --left-level: var(--level);
  --right-level: var(--level);
  width: 17px;
  min-width: 17px;
  max-width: 17px;
}

.channel-mains .fader-meter-pair,
.fader-meter-pair:has(.level-meter.stereo) {
  width: 63px;
  grid-template-columns: 34px 17px;
}

.level-meter.stereo i:first-child {
  right: 9px;
  height: var(--left-level);
}

.level-meter.stereo i:last-child {
  left: 9px;
  height: var(--right-level);
}

.channel-buttons {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.channel-buttons button {
  min-height: 31px;
  border: 0;
  border-radius: 999px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  cursor: pointer;
  font-weight: 700;
}

.channel-buttons button:hover {
  filter: brightness(1.08);
}

.channel-buttons [data-action="mute"][aria-pressed="true"] {
  background: var(--bad);
  box-shadow: var(--drop);
  color: #ffffff;
}

.channel-buttons [data-action="solo"][aria-pressed="true"] {
  background: var(--warn);
  box-shadow: var(--drop);
  color: #1d1b14;
}

/* The title bar: a well at the foot of the strip. */
.channel-strip > h3 {
  display: grid;
  place-items: center;
  margin: 0;
  border-top: 0;
  background: var(--well);
  box-shadow: var(--in-sm);
  color: var(--txt);
  font-size: 0.78rem;
  font-weight: 600;
}

.shortcut-grid {
  display: grid;
  gap: 8px;
  margin: 0;
}

.shortcut-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shortcut-grid dt,
.shortcut-grid dd {
  margin: 0;
}

.shortcut-grid dd {
  color: var(--muted);
  font-size: 0.74rem;
}

kbd {
  display: inline-grid;
  min-width: 26px;
  min-height: 24px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  padding: 0 7px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--txt);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
}

.toast {
  position: fixed;
  z-index: 50;
  right: 26px;
  bottom: 26px;
  max-width: min(420px, calc(100vw - 40px));
  transform: translateY(16px);
  border: 0;
  border-radius: 14px;
  padding: 11px 16px;
  background: var(--raised);
  box-shadow: var(--ex);
  color: var(--text);
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1120px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr) 292px;
  }

  .transport {
    gap: 10px 12px;
  }

  /* Two rows: the right group (light, Click, master volume) wraps whole
     and stays at the right. */
  .transport .volume-control {
    flex: 1 1 128px;
    max-width: 260px;
  }

}

@media (max-width: 820px) {
  .app-shell {
    padding: 0 12px 12px;
  }

  .topbar {
    min-height: 64px;
  }


  .brand {
    --brand-height: 30px;
  }

  .now-playing {
    max-width: 36vw;
  }

  .setlist-upnext {
    display: none;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .score-stage {
    height: auto;
    min-height: calc(100vh - 78px);
  }

  .score-viewport {
    min-height: 58vh;
    padding-right: 12px;
    padding-left: 12px;
  }

  .control-panel {
    height: auto;
    min-height: 0;
  }

  .shortcuts-section {
    display: none;
  }
}

@media (max-width: 620px) {
  .mixer-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
  }

  .mixer-window {
    max-height: calc(100vh - 14px);
  }

  .mixer-header {
    padding: 11px;
  }

  .mixer-header .button {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.7rem;
  }


  .import-button {
    width: 40px;
    padding: 0;
    font-size: 0;
  }

  .topbar-primary {
    gap: 10px;
  }

  .brand {
    --brand-height: 26px;
  }

  .now-playing {
    max-width: 40vw;
    padding: 6px 9px;
  }

  .now-playing strong {
    font-size: 0.78rem;
  }

  .score-viewport {
    min-height: 64vh;
  }

  .timeline-row {
    padding-right: 14px;
    padding-left: 14px;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 8px;
    padding-bottom: 8px;
  }

  /* Brand, Now playing, and the action buttons share the first row; Now
     playing gives way. The setlist strip takes the second row. */
  .topbar-primary {
    flex: 1 1 0;
    min-width: 0;
    gap: 10px;
  }

  .topbar-primary .now-playing {
    flex: 1 1 0;
    max-width: none;
  }

  .setlist-strip {
    order: 3;
    flex: 1 1 100%;
  }

  .setlist-upnext {
    display: block;
    flex: 1 1 0;
    max-width: none;
  }

  .transport {
    gap: 12px;
    padding: 13px 14px 15px;
  }

  .transport-buttons {
    flex: 1 1 100%;
    justify-content: center;
  }

  .transport .position-readout {
    margin-left: 0;
  }

  .transport .volume-control {
    flex: 1 1 100%;
    max-width: none;
    margin-left: 0;
  }

  .transport-button {
    width: 44px;
    height: 44px;
  }
}

/* Web-native audio effects. The restrained graphite treatment deliberately
   follows desktop studio conventions without reproducing any vendor UI. */
/* One line per effect: its light and its name. The preset and whether it
   is this piece's own setting are in the effect's editor. */
.plugin-slot {
  display: grid;
  min-height: 31px;
  grid-template-columns: 7px minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  padding: 0 10px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.plugin-slot:hover {
  filter: brightness(1.08);
}

.plugin-slot:focus-visible {
  outline: 2px solid var(--hl);
  outline-offset: 2px;
}

.plugin-slot i {
  position: relative;
  cursor: pointer;
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--lbl);
  opacity: 0.45;
}

/* The light is the bypass switch; give it a hit area well beyond its 9 px. */
.plugin-slot i::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}

.plugin-slot i:hover {
  transform: scale(1.25);
}

.plugin-slot.is-active i {
  background: var(--hl);
  opacity: 1;
}

.plugin-slot > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plugin-slot > span {
  color: #f2f4f5;
  font-size: .7rem;
  font-style: normal;
  font-weight: 650;
}

.plugin-slot.is-bypassed {
  filter: saturate(.15);
  opacity: .72;
}

.plugin-dialog {
  width: min(1180px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100vh - 28px);
  margin: auto;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: var(--surf);
  box-shadow: var(--ex), 0 42px 140px rgba(0, 0, 0, 0.5);
  color: var(--txt);
}

.plugin-dialog::backdrop,
.preset-name-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
}

.plugin-window {
  display: grid;
  max-height: calc(100vh - 30px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.plugin-header {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--rule);
  padding: 12px 16px 10px;
  background: transparent;
}

/* Row one: power, title, the preset and its library. */
.plugin-header-main {
  display: grid;
  grid-template-columns: auto auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px;
}

/* Row two: two labelled groups, "This piece" and "All pieces", so the
   difference between piece settings and the default explains itself. */
.plugin-apply-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 22px;
}

.plugin-apply-group {
  gap: 5px;
}

.plugin-apply-label {
  margin-right: 4px;
  color: var(--lbl);
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

.plugin-heading {
  min-width: 150px;
}

.plugin-heading .eyebrow {
  margin-bottom: 2px;
  color: var(--lbl);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.plugin-heading h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 670;
}

.plugin-power {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.plugin-power span {
  position: relative;
  width: 15px;
  height: 15px;
  border: 2px solid var(--disc-txt);
  border-top-color: transparent;
  border-radius: 50%;
}

.plugin-power span::before {
  position: absolute;
  top: -4px;
  left: 5px;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: var(--disc-txt);
  content: "";
}

.plugin-power.is-on {
  background: var(--hl);
  box-shadow: var(--drop), 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.plugin-power.is-on span {
  border-color: var(--on-hl);
  border-top-color: transparent;
}

.plugin-power.is-on span::before { background: var(--on-hl); }

.plugin-preset-bar {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(160px, 340px) auto auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.plugin-preset-bar label {
  color: var(--lbl);
  font-size: .72rem;
}

/* Every select keeps a solid background-color under any gradient: Chrome
   builds the native dropdown list from the select's background-color and
   falls back to white when it is transparent, which left the plugin
   dropdowns showing white text on white. The option rows are coloured
   explicitly for the same reason. */
select {
  background-color: var(--well);
}

select option {
  background-color: var(--surf);
  color: var(--txt);
}

.plugin-preset-bar select,
.reverb-routing select,
.parameter-rack select {
  min-height: 31px;
  border: 0;
  border-radius: 9px;
  background-color: var(--well);
  box-shadow: var(--in-sm);
  color: var(--txt);
  font: inherit;
  font-size: .72rem;
}

.plugin-header-actions button,
.ir-load-button {
  min-height: 31px;
  border: 0;
  border-radius: 999px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
}

.plugin-preset-bar select {
  width: 100%;
  padding: 0 30px 0 9px;
}

.plugin-modified {
  border: 0;
  border-radius: 999px;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--hl) 18%, transparent);
  color: var(--hl);
  font-size: .66rem;
  font-weight: 600;
}

.plugin-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.plugin-header-actions button {
  min-width: 0;
  padding: 0 11px;
  cursor: pointer;
}

.plugin-header-actions button:hover:not(:disabled),
.ir-load-button:hover {
  filter: brightness(1.08);
}

.plugin-header-actions button:disabled {
  cursor: default;
  opacity: .38;
}

.plugin-header-actions .icon-button {
  display: grid;
  width: 33px;
  min-width: 33px;
  height: 33px;
  margin-left: 4px;
  padding: 0;
  place-items: center;
}

.plugin-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: transparent;
  scrollbar-color: var(--disc-a) transparent;
}

.plugin-panel {
  min-height: 580px;
  padding: 18px;
}

.plugin-panel[hidden] { display: none; }

.plugin-display {
  position: relative;
  border: 0;
  border-radius: 16px;
  background: var(--well);
  box-shadow: var(--in);
}

.plugin-display canvas {
  display: block;
  width: 100%;
  height: 340px;
  border-radius: inherit;
  touch-action: none;
}

.eq-display canvas { cursor: crosshair; }
.feedback-display canvas { height: 340px; }
.compressor-display canvas { height: 300px; }
.reverb-display canvas { height: 280px; }
.reverb-display canvas.is-disabled { opacity: .42; }

.eq-band-tabs {
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  gap: 4px;
}

.eq-band-tabs button {
  width: 29px;
  height: 29px;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  cursor: pointer;
  font-size: .7rem;
  font-weight: 700;
}

.eq-band-tabs button.is-selected {
  background: var(--hl);
  box-shadow: var(--drop);
  color: var(--on-hl);
}

.eq-band-tabs button:focus-visible,
.feedback-filter-tabs button:focus-visible,
.toggle-parameter:focus-within em {
  outline: 2px solid var(--hl);
  outline-offset: 2px;
}

.parameter-rack {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
  border: 0;
  background: transparent;
}

.parameter-rack > label,
.reverb-routing > label,
.reverb-routing > .ir-field {
  display: grid;
  min-width: 0;
  gap: 8px;
  align-content: start;
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--raised);
  box-shadow: var(--ex-sm);
  color: var(--lbl);
  font-size: .72rem;
  font-weight: 600;
}

.parameter-rack input[type="range"] {
  width: 100%;
  margin: 2px 0 0;
  accent-color: var(--hl);
  cursor: ew-resize;
}

.parameter-rack input[type="range"]:disabled { opacity: .3; }

.parameter-rack output,
.reverb-routing em {
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  padding: 6px 9px;
  background: var(--well);
  box-shadow: var(--in-sm);
  color: var(--txt);
  font-size: .74rem;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.toggle-parameter {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.toggle-parameter input {
  position: absolute;
  opacity: 0;
}

.toggle-parameter em {
  display: grid;
  min-width: 46px;
  min-height: 28px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--hl);
  box-shadow: var(--drop);
  color: var(--on-hl);
  cursor: pointer;
  font-size: .68rem;
  font-style: normal;
  font-weight: 600;
}

.toggle-parameter input:not(:checked) + em {
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
}

.toggle-parameter input:disabled + em {
  cursor: not-allowed;
  opacity: .42;
}

.compressor-rack,
.reverb-rack,
.feedback-rack { grid-template-columns: repeat(4, minmax(150px, 1fr)); }

.feedback-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, .8fr)) repeat(5, auto) minmax(170px, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.feedback-toolbar label {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--lbl);
  font-size: .68rem;
  font-weight: 600;
}

.feedback-toolbar button,
.feedback-delete {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  cursor: pointer;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 600;
}

.feedback-toolbar button:hover:not(:disabled) {
  filter: brightness(1.08);
}

.feedback-toolbar select {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  padding: 0 10px;
  background-color: var(--well);
  box-shadow: var(--in-sm);
  color: var(--txt);
  cursor: pointer;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 600;
}

/* The status is the one place the signal triad appears in the editor:
   green listening or locked with the input live, amber while calibrating
   or finding one, red when the input is not connected. */
.feedback-toolbar output {
  display: grid;
  min-height: 34px;
  align-items: center;
  justify-content: end;
  border: 0;
  border-radius: 9px;
  padding: 0 11px;
  background: var(--well);
  box-shadow: var(--in-sm);
  color: var(--ok);
  font-family: inherit;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.feedback-toolbar output.is-warn { color: var(--warn); }
.feedback-toolbar output.is-bad { color: var(--bad); }

.plugin-origin {
  border: 0;
  border-radius: 999px;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--hl) 18%, transparent);
  color: var(--hl);
  font-size: .66rem;
  font-weight: 600;
  white-space: nowrap;
}

.plugin-origin.is-piece {
  background: var(--hl);
  color: var(--on-hl);
}

.feedback-toolbar button.is-calibrating {
  background: var(--warn);
  box-shadow: var(--drop);
  color: #1d1b14;
}

.feedback-toolbar button.is-held {
  background: var(--hl);
  box-shadow: var(--drop);
  color: var(--on-hl);
}

.feedback-filter-tabs {
  display: grid;
  grid-template-columns: repeat(20, minmax(26px, 1fr));
  gap: 4px;
  margin-top: 10px;
}

.feedback-filter-tabs button {
  min-width: 0;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: var(--well);
  box-shadow: var(--in-sm);
  color: var(--lbl);
  cursor: pointer;
  font-family: inherit;
  font-size: .64rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.feedback-filter-tabs button.is-engaged {
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--txt);
}

.feedback-filter-tabs button.is-selected {
  background: var(--hl);
  box-shadow: var(--drop);
  color: var(--on-hl);
}

.feedback-filter-tabs button:disabled { cursor: default; opacity: .45; }

.feedback-meter-bank {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 190px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surf) 82%, transparent);
  box-shadow: var(--ex-sm);
}

.feedback-meter-bank > div { display: grid; gap: 5px; color: var(--lbl); font-size: .64rem; font-weight: 600; }
.feedback-meter-bank meter { width: 100%; height: 7px; cursor: pointer; }
.feedback-meter-bank output { color: var(--txt); font-size: .66rem; font-variant-numeric: tabular-nums; text-align: right; }
.feedback-delete { align-self: stretch; background: var(--bad); box-shadow: var(--drop); color: #ffffff; }

/* Meters in the editors: a well with the signal triad. */
.plugin-dialog meter {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 4px;
  background: var(--well);
  box-shadow: var(--in-sm);
}

.plugin-dialog meter::-webkit-meter-bar {
  height: 7px;
  border: 0;
  border-radius: 4px;
  background: var(--well);
}

.plugin-dialog meter::-webkit-meter-optimum-value { border-radius: 4px; background: var(--ok); }
.plugin-dialog meter::-webkit-meter-suboptimum-value { border-radius: 4px; background: var(--warn); }
.plugin-dialog meter::-webkit-meter-even-less-good-value { border-radius: 4px; background: var(--bad); }

.compressor-meter-bank {
  position: absolute;
  right: 15px;
  bottom: 44px;
  display: grid;
  width: min(340px, 46%);
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  border: 0;
  border-radius: 12px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surf) 82%, transparent);
  box-shadow: var(--ex-sm);
  backdrop-filter: blur(6px);
}

.compressor-meter-bank > div {
  display: grid;
  gap: 5px;
  color: var(--lbl);
  font-size: .64rem;
  font-weight: 600;
}

.compressor-meter-bank meter {
  width: 100%;
  height: 7px;
}

.compressor-meter-bank output {
  color: var(--txt);
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.reverb-routing {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.45fr;
  gap: 8px;
  border: 0;
  background: transparent;
}

.reverb-routing > label,
.reverb-routing > .ir-field {
  grid-template-columns: auto minmax(100px, 1fr);
  align-items: center;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surf) 90%, transparent);
}

.reverb-routing select,
.ir-load-button {
  width: 100%;
  padding: 0 8px;
}

.reverb-routing > .ir-field {
  grid-template-columns: auto minmax(110px, .8fr) minmax(90px, 1fr);
}

.reverb-routing em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.freeze-control em {
  background: var(--warn);
  color: #1d1b14;
}

.plugin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--rule);
  padding: 10px 16px;
  background: transparent;
  color: var(--lbl);
  font-size: .68rem;
}

.plugin-footer p { margin: 0; }
.plugin-footer span { flex: 0 0 auto; color: var(--txt); font-weight: 600; }

.preset-name-dialog {
  width: min(410px, calc(100vw - 30px));
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: var(--surf);
  box-shadow: var(--ex), 0 30px 90px rgba(0, 0, 0, 0.5);
  color: var(--txt);
}

.preset-name-dialog form { display: grid; gap: 18px; padding: 20px; }
.preset-name-dialog h2 { margin: 0; font-size: 1rem; }
.preset-name-dialog label { display: grid; gap: 7px; color: var(--lbl); font-size: .76rem; }
.preset-name-dialog input {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  padding: 0 12px;
  background: var(--well);
  box-shadow: var(--in-sm);
  color: var(--txt);
  font: inherit;
}
.preset-name-dialog form > div { display: flex; justify-content: flex-end; gap: 8px; }
.preset-name-dialog button { min-height: 36px; border: 0; border-radius: 999px; padding: 0 16px; background: var(--disc); box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07); color: var(--disc-txt); cursor: pointer; font: inherit; font-weight: 600; }
.preset-name-dialog button[type="submit"] { background: var(--hl); box-shadow: var(--drop); color: var(--on-hl); }

@media (max-width: 980px) {
  .plugin-header-main {
    grid-template-columns: auto minmax(140px, auto) 1fr;
  }
  .plugin-header-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .parameter-rack,
  .compressor-rack,
  .reverb-rack,
  .feedback-rack { grid-template-columns: repeat(3, minmax(145px, 1fr)); }
  .feedback-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feedback-toolbar output { justify-content: start; }
  .feedback-filter-tabs { grid-template-columns: repeat(10, 1fr); }
  .reverb-routing { grid-template-columns: 1fr 1fr; }
  .reverb-routing > .ir-field { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
  .plugin-dialog { width: calc(100vw - 10px); max-height: calc(100vh - 10px); }
  .plugin-window { max-height: calc(100vh - 12px); }
  .plugin-header { gap: 6px; padding: 9px; }
  .plugin-header-main { grid-template-columns: auto 1fr; gap: 9px; }
  .plugin-apply-row { justify-content: flex-start; }
  .plugin-preset-bar { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; }
  .plugin-header-actions { justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .plugin-header-actions button { flex: 0 0 auto; }
  .plugin-panel { min-height: 0; padding: 9px; }
  .plugin-display canvas,
  .compressor-display canvas { height: 250px; }
  .reverb-display canvas { height: 310px; }
  .parameter-rack,
  .compressor-rack,
  .reverb-rack,
  .feedback-rack { grid-template-columns: repeat(2, minmax(135px, 1fr)); }
  .feedback-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feedback-toolbar output { grid-column: 1 / -1; }
  .feedback-filter-tabs { grid-template-columns: repeat(5, 1fr); }
  .compressor-meter-bank { top: 9px; right: 9px; width: calc(100% - 18px); }
  .reverb-routing { grid-template-columns: 1fr; }
  .reverb-routing > .ir-field { grid-column: auto; grid-template-columns: 1fr; }
  .plugin-footer span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---- Remote section on the computer ---- */
.remote-panel {
  display: grid;
  gap: 10px;
}

.remote-panel .helper-text {
  margin: 0;
}

/* The address as a QR code: scanning opens the Remote with the code filled in. */
.remote-qr {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 10px;
}

.remote-qr svg {
  width: 168px;
  height: 168px;
  border-radius: 8px;
}

.remote-qr span {
  color: var(--muted-strong);
  font-size: 0.72rem;
}

.remote-code-display {
  display: grid;
  gap: 4px;
  justify-items: center;
  border: 0;
  border-radius: 14px;
  padding: 12px 10px 10px;
  background: var(--well);
  box-shadow: var(--in-sm);
}

.remote-code-display b {
  color: var(--text);
  font-size: 2.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.22em;
  line-height: 1;
}

.remote-code-display span {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}

.remote-code-display code {
  color: var(--muted-strong);
  font-size: 0.72rem;
  word-break: break-all;
}

.remote-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.remote-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 7px 10px;
  background: var(--well);
  box-shadow: var(--in-sm);
  font-size: 0.78rem;
}

.remote-list li span em {
  color: var(--muted);
  font-size: 0.66rem;
  font-style: normal;
}

.remote-list button {
  min-height: 26px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--bad);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---- Tablet chooser ---- */
.tablet-chooser {
  border: 0;
  padding: 0;
  background: transparent;
}

.tablet-chooser::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}

.tablet-chooser-card {
  display: grid;
  width: min(92vw, 460px);
  gap: 14px;
  border: 0;
  border-radius: 22px;
  padding: 26px 24px;
  background: var(--surf);
  color: var(--text);
  box-shadow: var(--ex), var(--shadow);
}

.tablet-chooser-card h2 {
  margin: 4px 0 2px;
  font-size: 1.2rem;
}

.tablet-choice {
  display: grid;
  gap: 4px;
  border: 0;
  border-radius: 16px;
  padding: 18px 18px;
  background: var(--raised);
  box-shadow: var(--ex-sm);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.tablet-choice strong {
  font-size: 1.05rem;
}

.tablet-choice span {
  color: var(--muted-strong);
  font-size: 0.82rem;
}

.tablet-choice:hover,
.tablet-choice:focus-visible {
  outline: 2px solid var(--hl);
  outline-offset: 2px;
}

/* ---- Remote page ---- */
.remote-body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--back);
  -webkit-user-select: none;
  user-select: none;
}

.remote-shell {
  position: fixed;
  inset: 0;
}

.remote-pair {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: 24px;
}

.remote-pair-card {
  display: grid;
  width: min(92vw, 520px);
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.remote-brand {
  gap: 12px;
}

.remote-word {
  color: var(--hl);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.remote-pair-card h1 {
  margin: 8px 0 0;
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  white-space: normal;
}

.remote-hint {
  max-width: 420px;
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.95rem;
}

.remote-code {
  display: flex;
  gap: 12px;
}

.remote-digit {
  width: 64px;
  height: 80px;
  border: 0;
  border-radius: 16px;
  background: var(--well);
  box-shadow: var(--in);
  color: var(--text);
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
}

.remote-digit:focus {
  outline: 2px solid var(--hl);
  outline-offset: 2px;
}

.remote-connect,
.remote-reconnect {
  min-width: 220px;
  min-height: 52px;
  font-size: 1rem;
}

.remote-status {
  min-height: 1.4em;
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
}

.remote-score {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--back);
}

.remote-page-frame {
  position: relative;
  width: min(100vw, calc(100vh * 0.77295));
  height: min(100vh, calc(100vw / 0.77295));
  background: var(--page);
}

.remote-page-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.remote-page-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--lbl);
  font-size: 1.1rem;
}

/* The Remote's flash is the app's floating light (.metro-float), sized for
   fingers: no hover, a tap opens a tab with one big size control, drag moves
   it, a tap anywhere else closes the tab. Opacity comes from the computer. */
.remote-metro-float {
  --metro-size: 56px;
  --metro-opacity: 0.85;
}

.remote-metro-float:hover .metro-float-tab {
  opacity: 0;
  pointer-events: none;
}

.remote-metro-float.is-editing .metro-float-tab {
  opacity: 1;
  pointer-events: auto;
}

.remote-metro-tab {
  width: 300px;
  gap: 8px;
  padding: 12px;
  font-size: 14px;
}

.remote-metro-row {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 10px;
}

.remote-metro-step {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.remote-metro-step:active {
  filter: brightness(1.12);
}

.remote-metro-row input[type="range"] {
  height: 44px;
  min-width: 0;
  accent-color: var(--cyan);
}

.remote-metro-hint {
  margin: 0;
  color: var(--muted-strong);
  font-size: 12px;
  text-align: center;
}

.remote-lost {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  background: var(--bad);
  box-shadow: var(--drop);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}

/* The toolbar floats over the lower edge of the page, raised from the
   backdrop; it hides as before and a tap brings it back. */
.remote-bar {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(14px, env(safe-area-inset-left));
  display: grid;
  gap: 10px;
  border: 0;
  border-radius: 22px;
  padding: 12px 16px;
  background: var(--raised);
  box-shadow: var(--ex);
}

.remote-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.remote-big {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  cursor: pointer;
}

.remote-big svg {
  width: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.remote-play {
  width: 84px;
  height: 84px;
  background: var(--hl);
  box-shadow: var(--drop), 0 0 0 1px rgba(0, 0, 0, 0.12);
  color: var(--on-hl);
}

.remote-play .pause-icon,
.is-playing .remote-play .play-icon {
  display: none;
}

/* The click's mute on the Remote: icon and a word, red when muted. */
.remote-click {
  grid-template-rows: auto auto;
  gap: 1px;
  font-size: 0.62rem;
  font-weight: 600;
}

.remote-click svg {
  width: 26px;
}

.remote-click.is-muted {
  color: var(--bad);
}

.remote-click.is-muted svg {
  opacity: 0.5;
}

.is-playing .remote-play .pause-icon {
  display: block;
}

.remote-readout {
  display: flex;
  gap: 18px;
  border-radius: 14px;
  padding: 6px 14px;
  background: var(--well);
  box-shadow: var(--in-sm);
  color: var(--muted);
  font-size: 0.7rem;
}

.remote-readout span {
  display: grid;
  gap: 2px;
}

.remote-readout b {
  color: var(--text);
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.remote-setlist {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  border: 0;
  border-radius: 16px;
  padding: 6px 10px;
  background: var(--well);
  box-shadow: var(--in-sm);
}

.remote-nav {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  cursor: pointer;
}

.remote-nav svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.remote-nav:disabled {
  opacity: 0.3;
}

.remote-setlist-position {
  min-width: 60px;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.remote-upnext {
  max-width: 260px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-gear {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--disc-txt);
  cursor: pointer;
}

.remote-gear svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.remote-settings {
  display: grid;
  gap: 8px;
  max-width: 480px;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}

/* The part this tablet follows: a label and the same pills as the computer. */
.remote-part {
  display: grid;
  gap: 4px;
  color: var(--lbl);
  font-size: 0.78rem;
  font-weight: 600;
}

.remote-part .part-picker {
  margin-top: 0;
}

/* ---- Backup section ---- */
.backup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.backup-row + .backup-row {
  margin-top: 13px;
}

.backup-row .button {
  flex: 1 1 0;
  min-height: 36px;
  font-size: 0.76rem;
}

/* ---- Panic calibrate in the header ---- */
.panic-calibrate {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: var(--disc);
  box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.panic-calibrate:hover {
  filter: brightness(1.08);
}

.panic-calibrate i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warn-dim);
}

.panic-calibrate.is-calibrating {
  color: var(--warn);
}

.panic-calibrate.is-calibrating i {
  background: var(--warn);
  animation: panic-pulse 900ms ease-in-out infinite;
}

@keyframes panic-pulse {
  50% { opacity: 0.45; }
}

@media (max-width: 620px) {
  .panic-calibrate span,
  .audio-toggle span {
    display: none;
  }
}

/* ---- Noise gate editor ---- */
.gate-display {
  display: grid;
  align-items: center;
  min-height: 92px;
}

.gate-lamp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
}

.gate-lamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--lbl);
  font-size: 0.78rem;
  font-weight: 600;
}

.gate-lamp i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bad-dim);
}

.gate-lamp.is-open i {
  background: var(--ok);
}

.gate-lamp.is-bypassed i {
  background: var(--warn);
}

.gate-meter {
  display: grid;
  min-width: 150px;
  gap: 2px;
  color: var(--lbl);
  font-size: 0.68rem;
}

.gate-meter meter {
  width: 100%;
  height: 8px;
}

.gate-note {
  color: var(--lbl);
  font-size: 0.7rem;
  font-style: normal;
}

/* ---- Guided tour ---- */
.tour-layer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.tour-dim { position: absolute; background: rgba(0, 0, 0, 0.6); pointer-events: auto; cursor: pointer; }
.tour-ring { position: absolute; border: 2px solid var(--cyan); border-radius: 10px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hl) 25%, transparent), 0 0 32px color-mix(in srgb, var(--hl) 35%, transparent); pointer-events: none; }
.tour-card {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 8px;
  border: 0;
  border-radius: 18px;
  padding: 16px 18px;
  background: var(--surf);
  color: var(--text);
  box-shadow: var(--ex), var(--shadow);
  pointer-events: auto;
}
.tour-card h3 { margin: 0; font-size: 1.05rem; }
.tour-card p { margin: 0; color: var(--muted-strong); font-size: 0.92rem; line-height: 1.45; }
.tour-card .tour-count { color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.tour-card .tour-count:empty { display: none; }
.tour-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.tour-buttons .button { min-height: 36px; }
.tour-wait { color: var(--cyan); font-size: 0.85rem; font-weight: 700; }
.tour-skip { margin-left: auto; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.82rem; cursor: pointer; text-decoration: underline; }
.tour-skip:hover { color: var(--text); }
.tour-layer.is-centered .tour-card { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.tips-toggle[aria-pressed="true"] { background: var(--hl); box-shadow: var(--drop); color: var(--on-hl); }

/* ---- Manual ---- */
.manual-dialog { width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; border-radius: var(--radius); padding: 0; background: var(--surf); color: var(--text); box-shadow: var(--ex), var(--shadow); }
.manual-dialog::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); }
.manual-window { display: grid; grid-template-rows: auto 1fr; max-height: calc(100vh - 34px); }
.manual-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule); padding: 14px 18px; }
.manual-header h2 { margin: 0; font-size: 1.05rem; }
.manual-tour-button { margin-left: auto; margin-right: 10px; }
.manual-body { overflow: auto; padding: 18px 22px 28px; line-height: 1.55; }

/* ---- Manual content ---- */
.manual-toc { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 18px; }
.manual-toc a { border: 0; border-radius: 999px; padding: 5px 12px; background: var(--disc); box-shadow: var(--ex-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07); color: var(--disc-txt); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.manual-toc a:hover { filter: brightness(1.08); color: var(--text); }
.manual-section { margin-bottom: 30px; padding-top: 6px; }
.manual-section h3 { margin: 0 0 8px; font-size: 1.15rem; }
.manual-section p, .manual-section li { color: var(--muted-strong); font-size: 0.92rem; }
.manual-section strong { color: var(--text); }
.manual-section a { color: var(--cyan); }
.manual-section code { border-radius: 6px; padding: 1px 6px; background: var(--well); box-shadow: var(--in-sm); font-size: 0.85em; }
.manual-steps li, .manual-legend li { margin-bottom: 6px; }
.manual-figure { position: relative; margin: 10px 0 12px; border: 0; border-radius: 14px; overflow: hidden; background: var(--well); box-shadow: var(--in-sm); }
.manual-figure img { display: block; width: 100%; height: auto; }
.manual-figure .callout {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; display: grid; place-items: center;
  border: 2px solid var(--on-hl); border-radius: 50%; background: var(--hl); color: var(--on-hl); font-size: 0.78rem; font-weight: 800;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); pointer-events: none;
}
.manual-legend { padding-left: 1.4em; }
.manual-legend li::marker { color: var(--hl); font-weight: 800; }
.manual-table { border-collapse: collapse; }
.manual-table td { padding: 5px 14px 5px 0; color: var(--muted-strong); font-size: 0.92rem; }
.manual-faq dt { margin-top: 10px; color: var(--text); font-weight: 700; }
.manual-faq dd { margin: 4px 0 0; color: var(--muted-strong); font-size: 0.92rem; }

/* ---- Tips ---- */
.tip-popover {
  position: fixed; z-index: 210; display: none; gap: 6px; border: 0; border-radius: 14px;
  padding: 10px 14px; background: var(--raised); color: var(--text); box-shadow: var(--ex), var(--shadow); font-size: 0.86rem; line-height: 1.4;
}
.tip-popover.is-visible { display: grid; }
.tip-more { justify-self: start; border: 0; padding: 0; background: transparent; color: var(--cyan); font: inherit; font-size: 0.8rem; cursor: pointer; text-decoration: underline; }
.tour-card kbd { border: 0; border-radius: 6px; padding: 0 6px; background: var(--disc); box-shadow: var(--ex-sm); font: inherit; font-size: 0.85em; }

/* ---- Thumbwheels under Tempo and Start measure (wheel.js) ----
   A slot in the surface with a knurled wheel showing through it: the rim is
   drawn by wheel.js (ribs crowding toward the ends, bright in the middle),
   the slot is a well, the highlight mark is on the rim and turns with it. Drag left or right. */
.wheel {
  position: relative;
  width: 100%;
  height: 24px;
  border-radius: 12px;
  background: var(--well);
  box-shadow: var(--in-sm);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.wheel.is-turning {
  cursor: grabbing;
}

.wheel-rim {
  position: absolute;
  inset: 3px 5px;
  display: block;
  border-radius: 9px;
  overflow: hidden;
}

.wheel-rim svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wheel:focus-visible {
  outline: 2px solid var(--hl);
  outline-offset: 2px;
}

.wheel-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Our own dropdown arrow, inset from the edge: Chrome draws its native
   arrow a few pixels from the border whatever the padding. Rules above that
   paint a select with the background shorthand get the arrow back here. */
:root {
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e6e9ee' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

select {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
}

:root[data-theme="light"] {
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232a2b2e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.setlist-add-select,
.midi-feedback-select {
  background-position: right 11px center;
}

.midi-mode-select,
.midi-test-type {
  background-position: right 6px center;
  background-size: 8px 5px;
}

.channel-top select {
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 9px 5px;
}

.plugin-preset-bar select,
.reverb-routing select,
.parameter-rack select {
  padding-right: 26px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 5px;
}

.feedback-toolbar select {
  padding-right: 26px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 5px;
}