:root {
  --bg: #0f1318;
  --panel: #171d24;
  --panel-2: #1e252e;
  --text: #dfe6ec;
  --muted: #8b98a5;
  --line: #2b3440;
  --grid: #26303b;
  --accent: #7fc8b8;
  --accent-dim: #3d6b62;
  --solo: #e0b86a;
  --radius: 10px;
  /* hardware look: brushed faceplates, recessed wells, lit LCD readouts */
  --plate-hi: #222a33;
  --plate-lo: #161b21;
  --well: rgb(0 0 0 / 0.22);
  --lcd-bg: #08100e;
  --lcd-text: #9ff0dc;
  --knob-hi: #56616d;
  --knob-mid: #2a323b;
  --knob-lo: #181d23;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

button, select, textarea { font: inherit; color: inherit; }

button {
  background: var(--accent-dim);
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
}
button.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
button.ghost:hover { color: var(--text); }

/* Logo, play button and tabs stay pinned at the top */
.masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
}
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px 4px;
  padding-top: max(12px, env(safe-area-inset-top));
  max-width: 1500px;
  margin: 0 auto;
}
.play {
  min-width: 88px;
  padding: 8px 18px;
  font-weight: 600;
  background: var(--accent);
  color: #0b1512;
}
.play {
  background: linear-gradient(#94d8c8, var(--accent) 45%, #5fae9c);
  border-color: #3d7b6d;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 2px 0 #24493f, 0 4px 10px rgb(0 0 0 / 0.4);
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.25);
}
.play:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 1px 0 #24493f; }
.play[aria-pressed="true"] {
  background: linear-gradient(var(--plate-lo), var(--panel-2));
  color: var(--accent);
  border-color: var(--accent);
  text-shadow: 0 0 8px rgb(127 200 184 / 0.7);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.5), 0 0 12px rgb(127 200 184 / 0.25);
}
.status {
  flex: 1 1 0;
  min-width: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- logo: logo.svg draws the letters and gloss; depth and shine are added here ---- */
.logo {
  position: relative;
  margin: 0;
  font-size: 34px; /* the logo is sized in em, so this sets its size */
  line-height: 0;
  /* depth: a dark edge below, then a soft teal glow */
  filter: drop-shadow(0 2px 0 #06221c) drop-shadow(0 4px 10px rgb(0 0 0 / 0.55))
    drop-shadow(0 0 18px rgb(127 200 184 / 0.22));
}
.logo img {
  display: block;
  height: 0.816em; /* the SVG's height in em of the letters' font size */
  width: auto;
}
/* A diagonal highlight that sweeps across every few seconds, masked to the
   letter shapes in logo.svg */
.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 38%, rgb(255 255 255 / 0.15) 44%, rgb(255 255 255 / 0.95) 50%,
    rgb(255 255 255 / 0.15) 56%, transparent 62%) 120% 0 / 300% 100% no-repeat;
  -webkit-mask: url(logo.svg) center / 100% 100% no-repeat;
  mask: url(logo.svg) center / 100% 100% no-repeat;
  animation: logo-shine 7s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes logo-shine {
  0% { background-position: 120% 0; }
  22%, 100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .logo::after { animation: none; }
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.toolbar .presets { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
.toolbar .presets select { flex: 0 1 220px; min-width: 120px; }
.toolbar-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar button { white-space: nowrap; }

.presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.presets-label { color: var(--muted); font-size: 13px; }
.presets select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
  max-width: 220px;
}
.preset-dirty { color: var(--solo); font-size: 12px; font-style: italic; }
button:disabled { opacity: 0.45; cursor: default; }

main { padding: 16px; max-width: 1500px; margin: 0 auto; }

.sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
  gap: 16px;
}

/* Each section is a faceplate: a brushed-metal gradient with a screw in each corner */
.panel {
  --screw: radial-gradient(circle, #59636f 0 1.5px, #2c343d 2px 3.2px, #0d1114 3.6px, transparent 4.2px);
  background:
    var(--screw) 3px 3px / 12px 12px no-repeat,
    var(--screw) calc(100% - 3px) 3px / 12px 12px no-repeat,
    var(--screw) 3px calc(100% - 3px) / 12px 12px no-repeat,
    var(--screw) calc(100% - 3px) calc(100% - 3px) / 12px 12px no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.012) 0 1px, transparent 1px 3px),
    linear-gradient(var(--plate-hi), var(--plate-lo));
  border: 1px solid #0b0e12;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), inset 0 -1px 0 rgb(0 0 0 / 0.4), 0 3px 10px rgb(0 0 0 / 0.35);
  min-width: 0;
}
#master .panel { margin-bottom: 16px; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid #0b0e12;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.04);
}
/* the section name, as if engraved and filled */
.panel-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9d4dc;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.7), 0 1px 0 rgb(255 255 255 / 0.06);
}
.panel-tools { display: flex; gap: 6px; }

/* hardware buttons with an LED that lights when they're on */
.toggle, .panel-tools .ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(#2c343e, #1d232a);
  color: var(--muted);
  border: 1px solid #0b0e12;
  padding: 4px 10px;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.5);
}
.toggle:active, .panel-tools .ghost:active { background: linear-gradient(#1d232a, #252c34); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.6); }
.toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4148, #15191d);
  box-shadow: inset 0 0 1px rgb(0 0 0 / 0.8);
}
.toggle[aria-pressed="true"] { color: var(--text); }
.toggle.on[aria-pressed="true"]::before {
  background: radial-gradient(circle at 35% 35%, #e6fff8, var(--accent) 45%, #2f7d6c);
  box-shadow: 0 0 6px 1px rgb(127 200 184 / 0.75);
}
.toggle.solo[aria-pressed="true"] { color: var(--solo); }
.toggle.solo[aria-pressed="true"]::before {
  background: radial-gradient(circle at 35% 35%, #fff4d6, var(--solo) 45%, #8a6420);
  box-shadow: 0 0 6px 1px rgb(224 184 106 / 0.75);
}

.panel-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 10px;
  padding: 12px;
}

/* groups are recessed into the faceplate */
.group {
  margin: 0;
  border: 1px solid rgb(0 0 0 / 0.45);
  border-radius: 8px;
  padding: 8px 10px 10px;
  min-width: 0;
  background: var(--well);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.35), 0 1px 0 rgb(255 255 255 / 0.04);
}
.group legend {
  padding: 0 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.6);
}
.group.eq { grid-column: 1 / -1; }

.param {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 8px;
  padding: 4px 0;
}
.param .label { color: var(--muted); font-size: 13px; cursor: default; user-select: none; }
/* readouts are small backlit LCDs */
.param .value, .lcd {
  justify-self: end;
  font: 11px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--lcd-text);
  background: var(--lcd-bg);
  border: 1px solid #000;
  border-radius: 3px;
  padding: 0 6px;
  text-shadow: 0 0 5px rgb(127 220 196 / 0.55);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.8), 0 1px 0 rgb(255 255 255 / 0.05);
  white-space: nowrap;
}
.param select, .presets select, .cube-corner select {
  background: linear-gradient(#262e37, #1b2128);
  border: 1px solid #0b0e12;
  border-radius: 6px;
  padding: 4px 6px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 1px 2px rgb(0 0 0 / 0.4);
}

/* Sliders as faders: a dark slot and a ridged metal cap */
.param input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 24px;
  margin: 4px 0 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.param input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.param input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: #07090b;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgb(255 255 255 / 0.06);
}
.param input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #07090b;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgb(255 255 255 / 0.06);
}
.param input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent-dim); }
.param input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 22px;
  margin-top: -8px;
  border-radius: 3px;
  border: 1px solid #07090b;
  background: linear-gradient(90deg, transparent 5px, var(--accent) 5px 6px, transparent 6px),
    linear-gradient(#77828e, #3b444e 50%, #2a3139 51%, #4b5561);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.6);
}
.param input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid #07090b;
  background: linear-gradient(90deg, transparent 4px, var(--accent) 4px 5px, transparent 5px),
    linear-gradient(#77828e, #3b444e 50%, #2a3139 51%, #4b5561);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.6);
}

/* ---- choice buttons (waveforms, noise colors): a picture and an LED on each ---- */
.buttons-param .button-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; margin-top: 6px; }
.choice-button {
  --lit: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  background: linear-gradient(#2c343e, #1d232a);
  border: 1px solid #0b0e12;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 2px 3px rgb(0 0 0 / 0.5);
}
.choice-button svg {
  width: 100%;
  max-width: 44px;
  height: 20px;
  padding: 2px 3px;
  overflow: visible;
  background: var(--lcd-bg);
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.8);
}
.choice-button path {
  fill: none;
  stroke: color-mix(in srgb, var(--lcd-text) calc(35% + var(--lit) * 65%), #3a4a46);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 calc(var(--lit) * 3px) rgb(127 220 196 / 0.8));
}
/* LED in the top-right corner */
.choice-button::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) calc(var(--lit) * 100%), #1f252b);
  box-shadow: 0 0 calc(var(--lit) * 6px) rgb(127 200 184 / calc(var(--lit) * 0.9));
}
/* a noise color, as a glossy chip that dims when not selected */
.choice-button .swatch {
  width: 100%;
  max-width: 40px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid #000;
  background: linear-gradient(rgb(255 255 255 / 0.35), transparent 50%, rgb(0 0 0 / 0.2)), var(--swatch);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.4);
  filter: saturate(calc(0.45 + var(--lit) * 0.55)) brightness(calc(0.6 + var(--lit) * 0.4));
}
.choice-button[aria-pressed="true"] {
  color: var(--text);
  background: linear-gradient(#1b2128, #232a32);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.6), 0 1px 0 rgb(255 255 255 / 0.04);
}
.choice-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- note-value buttons under the Second hit slider ---- */
.note-marks {
  grid-column: 1 / -1;
  position: relative;
  height: 56px;
  margin-top: 2px;
}
.note-button {
  --at: 0;
  position: absolute;
  /* centred under the slider's thumb at this value (the thumb is 12px wide) */
  left: calc(6px + (100% - 12px) * var(--at));
  top: 6px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  padding: 2px 3px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: linear-gradient(#2c343e, #1d232a);
  border: 1px solid #0b0e12;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.5);
}
.note-button.dotted { top: 32px; }
/* a tick up to the slider */
.note-button::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 6px;
  background: #3a444f;
}
.note-button.dotted::before { height: 32px; }
.note-button svg { width: 100%; height: 100%; }
.note-button svg ellipse, .note-button svg circle { fill: currentColor; }
.note-button svg .stem, .note-button svg .flag { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.note-button:hover { color: var(--text); }
.note-button[aria-pressed="true"] {
  color: var(--lcd-text);
  background: linear-gradient(#1b2128, #232a32);
  border-color: var(--accent-dim);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.6), 0 0 6px rgb(127 200 184 / 0.35);
}
.note-button[aria-pressed="true"]::before { background: var(--accent); }
.note-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- envelope displays above the envelope knobs ---- */
.env-display {
  position: relative;
  height: 58px;
  margin: 4px 0 4px;
  padding: 4px;
  background: var(--lcd-bg);
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.8), 0 1px 0 rgb(255 255 255 / 0.05);
}
.env-display svg { display: block; width: 100%; height: 100%; }
.env-display path { vector-effect: non-scaling-stroke; }
.env-base { stroke: #1f3a34; stroke-width: 1; }
.env-fill { fill: rgb(127 220 196 / 0.1); stroke: none; }
.env-line { fill: none; stroke: var(--lcd-text); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgb(127 220 196 / 0.7)); }
.env-caption {
  position: absolute;
  top: 3px;
  right: 6px;
  font: 9.5px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
  color: rgb(159 240 220 / 0.7);
}
.env-display.flip .env-caption { top: auto; bottom: 3px; }
/* filter curves: frequency across (20 Hz to 20 kHz), level up; the band is the LFO's sweep */
.filter-display .env-base { stroke: #173029; }
.filter-band { fill: rgb(127 220 196 / 0.08); stroke: rgb(127 220 196 / 0.25); stroke-width: 1; stroke-dasharray: 2 2; }

/* ---- knobs ---- */
.knobs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px 4px;
  padding: 6px 0 2px;
}
.param.knob-param {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  min-width: 0;
}
.knob-param .label {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 2.4em; /* two lines, so knobs line up whether or not their names wrap */
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
}
.knob-param .value { justify-self: auto; font-size: 10px; padding: 0 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.knob {
  --angle: 0deg;
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  touch-action: none;
  cursor: ns-resize;
  outline: none;
}
.knob:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.knob svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.knob-track, .knob-fill { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.knob-track { stroke: #07090b; }
.knob-fill { stroke: var(--accent); filter: drop-shadow(0 0 2px rgb(127 220 196 / 0.8)); }
/* the knurled skirt and pointer turn; the cap's highlight stays put, like a real light */
.knob-skirt, .knob-cap, .knob-pointer { position: absolute; border-radius: 50%; pointer-events: none; }
.knob-skirt {
  inset: 9px;
  background: repeating-conic-gradient(#3a434d 0 6deg, #1a1f25 6deg 12deg);
  box-shadow: 0 3px 6px rgb(0 0 0 / 0.65), 0 0 0 1px #07090b;
  transform: rotate(var(--angle));
}
.knob-cap {
  inset: 13px;
  background: radial-gradient(circle at 38% 30%, var(--knob-hi), var(--knob-mid) 55%, var(--knob-lo));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.18), inset 0 -2px 3px rgb(0 0 0 / 0.5);
}
.knob-pointer { inset: 13px; transform: rotate(var(--angle)); }
.knob-pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 2px;
  height: 9px;
  margin-left: -1px;
  border-radius: 1px;
  background: #e9fbf6;
  box-shadow: 0 0 3px rgb(127 220 196 / 0.9);
}
.knob.turning .knob-fill { stroke: #a8ecdc; }

/* ---- Main strip: a long level fader beside the reverb send ---- */
.group.main {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.group.main .param.fader { flex: 1 1 auto; }
.group.main .knob-param { flex: 0 0 auto; width: 88px; }
.param.fader input[type="range"] { height: 30px; }
.param.fader input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; }
.param.fader input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; }
.param.fader input[type="range"]::-webkit-slider-thumb { width: 16px; height: 28px; margin-top: -11px; }
.param.fader input[type="range"]::-moz-range-thumb { width: 14px; height: 26px; }

/* ---- sleep timer countdown ---- */
.sleep-countdown { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.sleep-countdown .lcd { font-size: 20px; line-height: 1.3; padding: 1px 10px; min-width: 5.2em; text-align: center; }
.sleep-countdown.off .lcd { color: #2f5a50; text-shadow: none; }
.sleep-note { color: var(--muted); font-size: 12px; }

.eq-curve {
  display: block;
  width: 100%;
  height: 110px;
  background: var(--lcd-bg);
  border: 1px solid #000;
  border-radius: 6px;
  margin: 4px 0 8px;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.8), 0 1px 0 rgb(255 255 255 / 0.05);
}
.eq-bands { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 6px; }
.param.vertical { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; }
.param.vertical .value { justify-self: auto; font-size: 10px; padding: 0 3px; text-align: center; }
.param.vertical .label { font-size: 12px; }
.param.vertical input[type="range"] {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 28px;
  height: 140px;
  margin: 0;
}
.param.vertical input[type="range"]::-webkit-slider-runnable-track { width: 6px; height: auto; }
.param.vertical input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 12px;
  margin-top: 0;
  margin-left: -8px;
  background: linear-gradient(transparent 5px, var(--accent) 5px 6px, transparent 6px),
    linear-gradient(90deg, #77828e, #3b444e 50%, #2a3139 51%, #4b5561);
}
.param.vertical input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 10px;
  background: linear-gradient(transparent 4px, var(--accent) 4px 5px, transparent 5px),
    linear-gradient(90deg, #77828e, #3b444e 50%, #2a3139 51%, #4b5561);
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px 0;
  max-width: 1500px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.tabs [role="tab"] {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 8px 16px;
  margin-bottom: -1px;
}
.tabs [role="tab"][aria-selected="true"] {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
  border-bottom: 1px solid var(--panel);
}

.cube-wrap { max-width: 560px; margin: 8px auto 0; }
/* rows sit clear of the puck, which overhangs the square's edge by its radius */
.cube-row { display: flex; justify-content: space-between; gap: 12px; margin: 24px 0; }
.cube-corner { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 220px; }
.cube-corner.right { text-align: right; align-items: flex-end; }
.cube-corner span { color: var(--muted); font-size: 12px; }
.cube-corner select {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
}
.cube {
  position: relative;
  aspect-ratio: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  touch-action: none;
  cursor: crosshair;
  user-select: none;
}
.cube:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cube-grid {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 25% 25%,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 25% 25%;
  opacity: 0.7;
}
.cube-weight { position: absolute; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--accent); }
.cube-weight.c0 { top: 8px; left: 10px; }
.cube-weight.c1 { top: 8px; right: 10px; }
.cube-weight.c2 { bottom: 8px; left: 10px; }
.cube-weight.c3 { bottom: 8px; right: 10px; }
.cube-puck {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent), 0 2px 10px rgb(0 0 0 / 0.5);
  cursor: grab;
}
.cube-puck:active { cursor: grabbing; }

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

dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: min(640px, calc(100% - 32px));
}
dialog::backdrop { background: rgb(0 0 0 / 0.6); }
dialog h2 { margin: 0 0 8px; font-size: 15px; }
dialog textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  font: 12px/1.4 ui-monospace, Menlo, monospace;
}
#ask-dialog { width: min(420px, calc(100% - 32px)); }
#ask-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* ---- topbar icon buttons, advanced settings and about dialogs ---- */
.topbar-tools { display: flex; gap: 8px; margin-left: auto; }
.icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(var(--knob-mid), var(--knob-lo));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 2px 4px rgb(0 0 0 / 0.4);
  color: var(--muted);
}
.icon-button:hover { color: var(--accent); }
.icon-button:active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.4); }
.icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.icon-button svg circle:not(.dot) { fill: var(--knob-lo); }
.icon-button svg .dot { fill: currentColor; stroke-width: 2.4; }

.info-dialog { width: min(520px, calc(100% - 32px)); padding: 20px; line-height: 1.5; }
.info-dialog h2 { font-size: 17px; margin-bottom: 12px; }
.info-dialog p { margin: 0 0 12px; }
.info-dialog a { color: var(--accent); }
.dialog-note { color: var(--muted); font-size: 13px; }
.route-options { border: 0; padding: 0; margin: 0 0 8px; }
.route-options legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.route-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--well);
  cursor: pointer;
}
.route-option:has(input:checked) { border-color: var(--accent-dim); background: rgb(127 200 184 / 0.07); }
.route-option input { margin-top: 3px; accent-color: var(--accent); }
.route-text { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.route-text strong { color: var(--text); font-size: 14px; }
.about-logo { display: block; height: 40px; margin: 4px auto 10px; filter: drop-shadow(0 2px 0 #06221c); }
.about-tagline { text-align: center; color: var(--lcd-text); font-weight: 600; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 600px) {
  .topbar { gap: 12px; }
  .logo { font-size: 26px; }
  .play { min-width: 72px; padding: 7px 12px; }
  .status { font-size: 12px; }
  /* dropdown on its own row; edited/Save/Save as… below it */
  .toolbar .presets { flex-wrap: wrap; }
  .toolbar .presets select { flex: 1 1 calc(100% - 64px); max-width: none; }
  .toolbar-tools { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .toolbar-tools button { padding: 6px 4px; font-size: 13px; }
  .param.vertical input[type="range"] { height: 120px; }
  .param.vertical .value { font-size: 9px; }
  .group.main { gap: 10px; }
  .group.main .knob-param { width: 76px; }
}