:root {
  --bg: #0b0d12;
  --panel: #141821;
  --line: #232936;
  --text: #e6e9ef;
  --dim: #8b93a5;
  --accent: #4cc9f0;
  --error: #ff7a7a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

body { display: flex; flex-direction: column; }

/* ------------------------------------------------------------- toolbar */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 9px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.group { display: flex; align-items: center; gap: 6px; }

.group > label {
  color: var(--dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  cursor: default;
}

button, select {
  background: #1d2330;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 9px;
  font: inherit;
  cursor: pointer;
}

button:hover, select:hover { border-color: #39425a; }
button:active { transform: translateY(1px); }

button.primary { border-color: #2c5f74; background: #16303c; }
button.on { background: var(--accent); color: #06222c; border-color: var(--accent); }

select.wide { max-width: 260px; }

input[type=range] { width: 88px; accent-color: var(--accent); }
.val { color: var(--dim); font-size: 11px; min-width: 2.4em; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- band meters */

.bands {
  display: flex;
  gap: 1px;
  padding: 0 14px 8px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.band {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.band-name {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--dim);
}

.band-track {
  height: 6px;
  background: #0e1219;
  border-radius: 3px;
  overflow: hidden;
}

.band-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 40ms linear;
}

/* -------------------------------------------------------------- stage */

#stage { flex: 1; position: relative; min-height: 0; }
canvas { display: block; width: 100%; height: 100%; }

.hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: start;
  text-align: left;
  padding: 0 8vw;
  color: var(--dim);
  background: linear-gradient(#0b0d12dd, #0b0d12f2);
}

.hint h2 { color: var(--text); font-size: 16px; margin: 0 0 10px; font-weight: 600; }
.hint p { margin: 5px 0; max-width: 62ch; }
.hint .lead { color: #b9c1d1; }
.hint .muted { color: #6b7386; margin-top: 12px; }

.hint code, .hint pre {
  background: #1d2330;
  color: var(--accent);
  border-radius: 4px;
}

.hint code { padding: 1px 5px; }
.hint pre { padding: 8px 12px; margin: 4px 0 10px; font-size: 12px; }

/* ------------------------------------------------------------- status */

.status {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
  padding: 7px 14px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.status b { color: var(--text); font-weight: 600; }
.status .accent, .status b.accent { color: var(--accent); font-size: 13px; min-width: 3em; display: inline-block; }
.status .muted { color: #5d6577; }
.status .error { color: var(--error); flex: 1; text-align: right; }


/* --------------------------------------------------------- simplified bar */

.toolbar { gap: 8px; }
.toolbar .spacer { flex: 1; }

/* ------------------------------------------------------------ fullscreen */
/* Fullscreen is requested on the document, so everything is inside it and the
   chrome has to be hidden explicitly -- that is the point of the mode. */

:fullscreen .toolbar,
:fullscreen .status { display: none; }

:fullscreen .bands {
  background: transparent;
  border-bottom: 0;
  padding: 10px 18px 6px;
  opacity: .55;
}

:fullscreen #stage { height: 100vh; }

/* Nudge the controls back within reach on a phone. */
@media (max-width: 640px) {
  .toolbar { padding: 8px 10px; }
  .toolbar select { max-width: 8.5em; }
  .status { gap: 12px; font-size: 10px; }
}

/* Faux fullscreen: what iOS Safari gets, since it has no Fullscreen API.
   Same hiding rules as :fullscreen, driven by a class instead. */

body.faux-fullscreen .toolbar,
body.faux-fullscreen .status { display: none; }

body.faux-fullscreen .bands {
  background: transparent;
  border-bottom: 0;
  padding: 10px 18px 6px;
  opacity: .55;
}

/* dvh rather than vh: on mobile Safari, vh counts the area behind the URL bar,
   so the bottom of the keyboard strip would sit under it. */
body.faux-fullscreen { height: 100dvh; }
body.faux-fullscreen #stage { height: 100dvh; }

/* ------------------------------------------------- fullscreen exit button */
/* Present only while fullscreen. Dim by default so it does not compete with
   the bars, solid the moment it is touched or hovered. The tap target is
   deliberately larger than it looks. */

.exit-full {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(11, 13, 18, .55);
  color: var(--dim);
  font-size: 16px;
  line-height: 1;
  opacity: .35;
  transition: opacity .18s ease, color .18s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.exit-full:hover,
.exit-full:focus-visible,
.exit-full:active {
  opacity: 1;
  color: var(--text);
  border-color: var(--accent);
}

/* Touch devices get no hover, so keep it legible without one. */
@media (hover: none) {
  .exit-full { opacity: .6; width: 44px; height: 44px; }
}

/* Compact inline knob: label, slider and readout as one unit, so two of them
   sit in the bar without it feeling like a control panel again. */
.toolbar .knob {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  cursor: default;
}

.toolbar .knob input[type=range] { width: 72px; }

@media (max-width: 860px) {
  .toolbar .knob input[type=range] { width: 54px; }
}