/* Self-hosted, latin subset, no external requests. Barlow Condensed is the
   silkscreen (panel labels, pad keys); Inter is the UI; JetBrains Mono is
   every LCD readout. font-display:swap so a cold cache still paints. */
@font-face {
  font-family: "Barlow Condensed";
  src: url("./fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./fonts/barlow-condensed-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --font-ui: "Inter", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Barlow Condensed", "DIN Alternate", "Avenir Next Condensed", "Arial Narrow", var(--font-ui);
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme="modern"] {
  --chassis-bg: #090a0a;
  --chassis-bezel: #151716;
  --chassis-bezel-edge: #030404;
  --chassis-highlight: rgba(255, 255, 255, 0.055);
  --chassis-text: #eef1ef;
  --chassis-muted: #8f9692;
  --screen-bg: #050706;
  --screen-border: #050505;
  --panel-bg: #1a1d1b;
  --panel-border: #323632;
  --accent: #ff4b2f;
  --accent-strong: #f03724;
  --led-off: rgba(255, 255, 255, 0.055);
  --danger: #ff364c;
  /* Global-control roles: mode toggles, data I/O, destructive edits */
  --role-mode: #ff4b2f;
  --role-data: #23d4ff;
  --role-edit: #f0a92f;
  --pad-color-0: #ff4b2f;
  --pad-color-1: #ff2d72;
  --pad-color-2: #23d4ff;
  --pad-color-3: #a56cff;
  /* MPC Live: matte black chassis, red-orange silkscreen, RGB pad light */
  --lcd-bg: #060807;
  --lcd-ink: #f7f0df;
  --lcd-dim: rgba(247, 240, 223, 0.42);
  --lcd-glow: rgba(255, 83, 48, 0.36);
  --pad-surface: #171918;
  --pad-text: rgba(229, 234, 229, 0.82);
  --pad-text-dim: rgba(229, 234, 229, 0.38);
}

html[data-theme="2000xl"] {
  --chassis-bg: #d6d5cb;
  --chassis-bezel: #e3e2d8;
  --chassis-bezel-edge: #a2a39b;
  --chassis-highlight: rgba(255, 255, 255, 0.55);
  --chassis-text: #171813;
  --chassis-muted: #4f5249;
  --screen-bg: #11161a;
  --screen-border: #141719;
  --panel-bg: #a4afae;
  --panel-border: #778381;
  --accent: #c94432;
  --accent-strong: #b9362b;
  --led-off: rgba(0, 0, 0, 0.14);
  --danger: #b92f2c;
  /* Darker than the Live theme's: these print onto cream, not black */
  --role-mode: #a93526;
  --role-data: #2f6f7d;
  --role-edit: #8a5f14;
  /* Pad bodies stay gray like the real hardware; the four column colors
     live in the LED strip, the key badge, and the sequencer, so a pad's
     identity reads the same in both views. Desaturated to sit on beige. */
  --pad-color-0: #c14a35;
  --pad-color-1: #c8913c;
  --pad-color-2: #4b8f88;
  --pad-color-3: #5b76a6;
  /* MPC2000XL: warm gray body, gray control panels, blue-green LCD */
  --lcd-bg: #081b24;
  --lcd-ink: #91d7df;
  --lcd-dim: rgba(145, 215, 223, 0.46);
  --lcd-glow: rgba(91, 184, 202, 0.46);
  --pad-surface: #696762;
  /* The pad face is the light molded cream of the button gradient, so pad
     text is dark here — cream-on-cream is what made the key unreadable. */
  --pad-text: #23241f;
  --pad-text-dim: rgba(35, 36, 31, 0.66);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-top: clamp(16px, 3vw, 32px);
  color: var(--chassis-text);
}

.theme-toggle {
  display: flex;
  gap: 6px;
}

.theme-btn {
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--chassis-muted);
  border-radius: 6px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.78rem;
  cursor: pointer;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 1px solid var(--panel-border);
  color: var(--chassis-text);
  border-radius: 8px;
  min-height: 44px;
  cursor: pointer;
}

button:active,
.pad.is-active {
  transform: translateY(1px);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
.timeline:focus-visible,
.timestamp-jog:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pad,
  button:active,
  .pad.is-active {
    transition: none;
    transform: none;
  }
}

input,
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0 12px;
}

.chassis {
  width: min(1180px, calc(100% - 16px));
  margin: 0 auto;
  padding: clamp(14px, 1.7vw, 22px);
  border: 1px solid var(--chassis-bezel-edge);
}

.chassis-top {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 16px;
  align-items: end;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--panel-border);
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.brand-sub {
  font-family: var(--font-display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chassis-muted);
}

.url-form label,
.field-label,
.slice-label-row label,
.eyebrow {
  display: block;
  color: var(--chassis-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 6px;
}

.control-col .field-label {
  font-size: 0.72rem;
  margin-bottom: 3px;
}

.url-row {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 8px;
}

.url-row.has-demo {
  grid-template-columns: 1fr 96px auto;
}

#demo-btn {
  padding: 0 14px;
  color: color-mix(in srgb, var(--chassis-text) 72%, var(--accent));
}

.status-panel {
  min-width: 190px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}

.mpc-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 44%);
  gap: 16px;
  align-items: stretch;
}

.mpc-left {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.chassis-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 0;
}

.screen-zone {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel-bg);
}

.player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--screen-bg);
  border: 1px solid var(--screen-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--chassis-highlight);
}

.player-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: var(--chassis-text);
  background: rgba(0, 0, 0, 0.85);
}

.player-error[hidden] {
  display: none;
}

#player,
#player iframe {
  width: 100%;
  height: 100%;
}

.player-pool-slot {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 160px;
  height: 90px;
  opacity: 0;
  pointer-events: none;
}

.control-zone,
.timeline-panel,
.pad-panel {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel-bg);
}

.control-zone {
  padding: 12px;
}

.control-zone button {
  min-height: 30px;
}

.control-zone input,
.control-zone select {
  min-height: 32px;
  padding: 0 8px;
  font-size: 0.9rem;
}

.control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.control-col {
  min-width: 0;
}

.jog-panel {
  margin-bottom: 6px;
}

.jog-pad-label {
  display: block;
  color: var(--chassis-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.timestamp-jog {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid var(--screen-border);
  border-radius: 8px;
  cursor: ew-resize;
  touch-action: none;
}

.jog-readout {
  font-variant-numeric: tabular-nums;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  user-select: none;
  -webkit-user-select: none;
}

.timeline-panel {
  padding: 10px 12px;
  margin-bottom: 0;
}

.seq-panel {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel-bg);
  padding: 8px;
  margin-bottom: 0;
}

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

.seq-transport {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.seq-transport button {
  min-height: 32px;
  padding: 0 14px;
}

.seq-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--chassis-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.seq-field input,
.seq-field select {
  width: 72px;
  min-height: 32px;
  padding: 0 8px;
  font-size: 0.9rem;
}

.seq-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 4px;
}

body.seq-visible .mpc-left {
  grid-template-rows: minmax(0, 1fr);
}

body.seq-visible .chassis-body,
body.seq-visible .screen-zone,
body.seq-visible .control-zone,
body.seq-visible .timeline-panel {
  display: none;
}

body.seq-visible .seq-panel {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 14px;
}

body.seq-visible .seq-transport {
  margin-bottom: 12px;
}

body.seq-visible .seq-grid {
  min-height: 0;
  justify-content: stretch;
  gap: 4px;
}

body.seq-visible .seq-row {
  flex: 1 1 0;
  min-height: 0;
}

body.seq-visible .seq-row-label,
body.seq-visible .seq-cell {
  min-height: 0;
}

.seq-row {
  display: flex;
  gap: 2px;
}

.seq-row[data-color="0"] { --pad-led: var(--pad-color-0); }
.seq-row[data-color="1"] { --pad-led: var(--pad-color-1); }
.seq-row[data-color="2"] { --pad-led: var(--pad-color-2); }
.seq-row[data-color="3"] { --pad-led: var(--pad-color-3); }

.seq-row-label {
  flex: 0 0 36px;
  min-height: 24px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pad-led);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
}

/* Cells share the row's width equally so every bar count fits the panel
   without horizontal scrolling. */
.seq-cell {
  flex: 1 1 0;
  min-width: 0;
  min-height: 24px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--panel-border);
}

/* Beats breathe apart so the groups of four are countable at a glance;
   bars break wider still. Order matters — is-bar cells are also is-beat. */
.seq-cell.is-beat {
  margin-left: 5px;
}

/* Step 0 is a downbeat too, but it butts against the row label */
.seq-row-label + .seq-cell.is-beat {
  margin-left: 0;
}

.seq-cell.is-bar {
  margin-left: 12px;
}

.seq-cell.is-playhead {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.timeline {
  position: relative;
  height: 36px;
  touch-action: none;
}

.timeline-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
}

.timeline-marker {
  position: absolute;
  top: 11px;
  width: 3px;
  height: 14px;
  border-radius: 3px;
  background: var(--pad-color-2);
  transform: translateX(-50%);
}

.timeline-marker.is-selected {
  background: var(--accent);
  height: 22px;
  top: 7px;
}

.timeline-handle {
  position: absolute;
  top: 3px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 50%;
  transform: translateX(-50%);
  touch-action: none;
}

.pad-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  gap: 8px;
  padding: 12px 14px 14px;
}

.pad-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100%;
}

/* Stacked, so the eight global buttons get the panel's full width instead
   of fighting the Bank plate for it. */
.pad-panel-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "bank"
    "controls"
    "slice";
  gap: 8px;
  align-items: start;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--panel-border);
}

.pad-panel-bank {
  grid-area: bank;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pad-panel-bank .eyebrow {
  margin-bottom: 0;
}

.global-slice {
  grid-area: slice;
  padding-top: 8px;
  border-top: 1px solid var(--panel-border);
}

.pad-panel-top h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.pad {
  --pad-led: var(--pad-color-0);
  aspect-ratio: 1;
  min-height: 0;
  display: grid;
  align-content: space-between;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: box-shadow 180ms ease, transform 80ms ease;
}

.pad[data-color="0"] { --pad-led: var(--pad-color-0); }
.pad[data-color="1"] { --pad-led: var(--pad-color-1); }
.pad[data-color="2"] { --pad-led: var(--pad-color-2); }
.pad[data-color="3"] { --pad-led: var(--pad-color-3); }

/* Deeper travel than the generic button:active 1px */
.pad.is-active {
  transform: translateY(2px);
}

.pad.is-active .pad-key {
  text-shadow: 0 0 10px var(--pad-led);
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.editor-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.timestamp-row {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 6px;
}

.nudge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.nudge-grid button {
  padding: 0 4px;
  font-size: 0.78rem;
}

/* Reset keeps danger red regardless of its group's role color */
#reset-btn {
  color: var(--danger);
}

.override-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

/* Three silkscreened sections, sized by how many buttons each holds. */
.utility-row {
  grid-area: controls;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ctrl-group {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ctrl-group[data-role="mode"] {
  flex: 2 1 0;
  --role: var(--role-mode);
}

.ctrl-group[data-role="data"] {
  flex: 3 1 0;
  --role: var(--role-data);
}

.ctrl-group[data-role="edit"] {
  flex: 3 1 0;
  --role: var(--role-edit);
}

/* Hairline between sections, like the printed rules on a real panel */
.ctrl-group + .ctrl-group {
  border-left: 1px solid var(--panel-border);
  padding-left: 10px;
}

.group-label {
  color: var(--chassis-muted);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.group-buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
}

/* Beats the blanket html[data-theme] button color rule (3 classes to its 2) */
.utility-row .ctrl-group[data-role] button {
  color: color-mix(in srgb, var(--role) 78%, var(--chassis-text));
}

.utility-row button {
  min-height: 28px;
  /* Extra right padding keeps the label clear of the corner LED */
  padding: 0 10px 0 6px;
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.utility-row button:disabled {
  opacity: 0.45;
  cursor: default;
}

.site-footer {
  width: min(1180px, calc(100% - 16px));
  margin: 10px auto 26px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px;
  color: var(--chassis-muted);
  font-size: 0.72rem;
}

.site-footer a {
  color: var(--accent);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.footer-credit:hover {
  text-decoration: underline;
}

.footer-icon {
  flex: none;
}

noscript {
  display: block;
  padding: 16px;
  text-align: center;
  color: var(--chassis-text);
}

@media (max-width: 900px) {
  .chassis-top {
    grid-template-columns: 1fr;
  }

  .mpc-deck {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
  }

  .status-panel {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  body {
    height: 100svh;
    overflow: hidden;
    padding-top: 0;
  }

  .chassis {
    width: 100%;
    height: 100svh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 7px;
    border-radius: 10px;
    box-shadow: none;
    border-width: 0;
    overflow: hidden;
  }

  .chassis-top {
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 6px;
  }

  .brand-mark {
    font-size: 1.05rem;
  }

  .brand-sub,
  .url-form label,
  .status-panel {
    display: none;
  }

  .theme-toggle {
    justify-content: end;
  }

  .theme-btn {
    min-height: 28px;
    padding: 0 8px;
    font-size: 0.68rem;
  }

  .url-form {
    grid-column: 1 / -1;
  }

  .url-row {
    grid-template-columns: 1fr 64px;
    gap: 6px;
  }

  .url-row.has-demo {
    grid-template-columns: 1fr 64px auto;
  }

  #demo-btn {
    padding: 0 8px;
  }

  /* The phone layout is a fixed 100svh instrument; no room for a footer. */
  .site-footer {
    display: none;
  }

  .url-row button {
    padding: 0 8px;
  }

  /* One column: without this the desktop minmax(360px, 44%) pad column
     survives into the phone layout and crushes the deck to a sliver. */
  .mpc-deck {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "video"
      "pads"
      "controls";
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 6px;
  }

  body.seq-visible .mpc-deck {
    grid-template-areas:
      "sequencer"
      "pads";
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .mpc-left,
  .chassis-body {
    display: contents;
  }

  body.seq-visible .mpc-left {
    display: contents;
  }

  body.seq-visible .chassis-body,
  body.seq-visible .control-zone,
  body.seq-visible .screen-zone,
  body.seq-visible .timeline-panel {
    display: none;
  }

  body.seq-visible .seq-panel {
    grid-area: sequencer;
    min-height: 0;
    padding: 6px;
  }

  body.seq-visible .seq-transport {
    gap: 4px;
    margin-bottom: 5px;
  }

  body.seq-visible .seq-transport button {
    min-height: 26px;
    padding: 0 8px;
  }

  body.seq-visible .seq-field input,
  body.seq-visible .seq-field select {
    width: 54px;
    min-height: 26px;
    font-size: 0.75rem;
  }

  body.seq-visible .seq-row-label {
    flex-basis: 24px;
    font-size: 0.62rem;
  }

  body.seq-visible .seq-cell {
    min-height: 0;
  }

  .screen-zone {
    grid-area: video;
    padding: 4px;
  }

  .player-frame {
    height: clamp(98px, 22svh, 140px);
    aspect-ratio: auto;
  }

  .pad-panel {
    grid-area: pads;
    min-height: 0;
    overflow: hidden;
  }

  /* The Bank/Program plate is desktop chrome; the phone gives its width to
     the controls. */
  .pad-panel-top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "controls"
      "slice";
    gap: 6px;
    padding: 5px 6px;
  }

  .pad-panel-bank {
    display: none;
  }

  /* No room for silkscreen headers on a phone; the hairline dividers still
     carry the grouping. */
  .utility-row {
    gap: 6px;
  }

  .group-label {
    display: none;
  }

  .ctrl-group + .ctrl-group {
    padding-left: 6px;
  }

  .group-buttons {
    gap: 3px;
  }

  .utility-row button {
    min-height: 24px;
    padding: 0 3px;
    font-size: 0.64rem;
    letter-spacing: 0.02em;
  }

  .global-slice {
    padding-top: 4px;
  }

  .global-slice .slice-slider {
    min-height: 20px;
    height: 20px;
  }

  .pad-grid {
    height: 100%;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 6px;
  }

  /* The key badge stays on phones now that it is the pad's only label —
     it still tells you which key the pad answers to on a paired keyboard. */
  .pad-key {
    padding: 2px 5px;
    font-size: 0.68rem;
  }

  .pad-time {
    font-size: 0.64rem;
  }

  .control-zone {
    grid-area: controls;
    padding: 7px;
  }

  .editor-header {
    margin-bottom: 5px;
  }

  .editor-header h1 {
    font-size: 0.78rem;
  }

  .control-zone button,
  .control-zone input,
  .control-zone select {
    min-height: 28px;
  }

  /* Selected-pad panel: keep short controls side-by-side instead of
     stacking every button/input onto its own full-width row. */
  .jog-pad-label {
    display: none;
  }

  .jog-panel {
    margin-bottom: 0;
  }

  .control-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .control-col:nth-child(2),
  .timestamp-row,
  .nudge-grid,
  .timeline-panel {
    display: none;
  }

  .timestamp-jog {
    min-height: 30px;
  }

  /* Tighter gaps so 64 steps keep usable width on phones. */
  .seq-row {
    gap: 1px;
  }

  .seq-row-label {
    flex-basis: 28px;
    padding: 0 4px;
  }

  .seq-cell.is-beat {
    margin-left: 3px;
  }

  .seq-cell.is-bar {
    margin-left: 7px;
  }
}

.slice-panel {
  margin-top: 0;
}

.slice-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
}

.slice-label-row label {
  margin-bottom: 0;
  font-size: 0.72rem;
}

#slice-length-readout {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
}

.slice-slider {
  appearance: none;
  width: 100%;
  min-height: 24px;
  height: 24px;
  background: transparent;
  padding: 0;
}

.slice-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
}

.slice-slider::-webkit-slider-thumb {
  appearance: none;
  cursor: pointer;
}

.slice-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
}

.slice-slider::-moz-range-thumb {
  cursor: pointer;
}

/* =========================================================================
   Hardware layer — materials, LCDs, and LEDs. Gradients and shadows only:
   no images. The only downloads are the four self-hosted woff2 faces.
   ========================================================================= */

body {
  background: radial-gradient(
    120% 90% at 50% 0%,
    color-mix(in srgb, var(--chassis-bg) 92%, #ffffff 8%),
    var(--chassis-bg) 75%
  );
}

/* Machined chassis: brushed face, corner screws drawn as layered gradients */
.chassis {
  border-radius: 22px;
  background:
    radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.22) 0 1px, rgba(0, 0, 0, 0.6) 1.5px 3.2px, transparent 4.2px) no-repeat 12px 12px / 10px 10px,
    radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.22) 0 1px, rgba(0, 0, 0, 0.6) 1.5px 3.2px, transparent 4.2px) no-repeat calc(100% - 22px) 12px / 10px 10px,
    radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.22) 0 1px, rgba(0, 0, 0, 0.6) 1.5px 3.2px, transparent 4.2px) no-repeat 12px calc(100% - 22px) / 10px 10px,
    radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.22) 0 1px, rgba(0, 0, 0, 0.6) 1.5px 3.2px, transparent 4.2px) no-repeat calc(100% - 22px) calc(100% - 22px) / 10px 10px,
    linear-gradient(180deg, color-mix(in srgb, var(--chassis-bezel) 96%, #fff 4%), var(--chassis-bezel) 30%, color-mix(in srgb, var(--chassis-bezel) 94%, #000 6%));
  box-shadow:
    inset 0 1px 0 var(--chassis-highlight),
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 24px 50px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Silkscreen: the small printed labels above every control */
.url-form label,
.field-label,
.control-col .field-label,
.slice-label-row label,
.eyebrow,
.jog-pad-label,
.seq-field {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.brand-mark {
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.brand-sub {
  letter-spacing: 0.2em;
}

/* Phosphor LCDs: status, duration, jog readout. Scanlines are a static
   repeating gradient; the glow is a text-shadow. */
.status-panel,
.timestamp-jog {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    radial-gradient(130% 170% at 50% -25%, color-mix(in srgb, var(--lcd-ink) 10%, transparent), transparent 62%),
    var(--lcd-bg);
  border-color: var(--chassis-bezel-edge);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.status-panel {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--lcd-dim);
}

#video-status,
#duration-status {
  color: var(--lcd-ink);
  text-shadow: 0 0 7px var(--lcd-glow);
}

.jog-readout {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--lcd-ink);
  text-shadow: 0 0 8px var(--lcd-glow);
}

/* Inputs and selects read as small LCD windows too */
input,
select {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: var(--lcd-ink);
  background: var(--lcd-bg);
  border-color: var(--chassis-bezel-edge);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
}

input::placeholder {
  color: var(--lcd-dim);
}

#slice-length-readout {
  font-family: var(--font-mono);
}

/* Convex hardware buttons */
button {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel-bg) 90%, #fff 10%) 0%,
    var(--panel-bg) 45%,
    color-mix(in srgb, var(--panel-bg) 88%, #000 12%) 100%
  );
  border-color: var(--chassis-bezel-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.35);
  font-weight: 600;
}

button:active {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}

/* Sequencer cells and row labels opt out: they are LCD wells and colored
   LEDs, not molded buttons, and this rule out-specifies their own styles. */
html[data-theme="2000xl"] button:not(.seq-cell, .seq-row-label) {
  background: linear-gradient(180deg, #f4f0df 0%, #d9d5c5 55%, #b9b6aa 100%);
  color: #252621;
  border-color: #8b8b82;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.28);
}

html[data-theme="2000xl"] .theme-btn[aria-checked="true"],
html[data-theme="2000xl"] .utility-row button[aria-pressed="true"],
html[data-theme="2000xl"] #seq-play-btn[aria-pressed="true"],
html[data-theme="2000xl"] #seq-record-btn[aria-pressed="true"] {
  color: #252621;
}

html[data-theme="modern"] .chassis-top {
  border-bottom-color: color-mix(in srgb, var(--accent) 42%, var(--panel-border));
}

html[data-theme="modern"] .control-zone,
html[data-theme="modern"] .timeline-panel,
html[data-theme="modern"] .pad-panel,
html[data-theme="modern"] .pad-panel-top,
html[data-theme="modern"] .seq-panel {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--panel-border));
  box-shadow:
    inset 0 1px 0 var(--chassis-highlight),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

/* LED state language: stateful buttons carry a corner LED that lights
   instead of the whole face changing color. Momentary buttons have none. */
.theme-btn,
#seq-btn,
#midi-btn,
#share-btn,
#export-btn,
#import-btn,
#seq-play-btn,
#seq-record-btn {
  position: relative;
}

.theme-btn::before,
#seq-btn::before,
#midi-btn::before,
#share-btn::before,
#export-btn::before,
#import-btn::before,
#seq-play-btn::before,
#seq-record-btn::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--led-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}

.theme-btn[aria-checked="true"],
.utility-row button[aria-pressed="true"],
#seq-play-btn[aria-pressed="true"],
#seq-record-btn[aria-pressed="true"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel-bg) 90%, #fff 10%) 0%,
    var(--panel-bg) 45%,
    color-mix(in srgb, var(--panel-bg) 88%, #000 12%) 100%
  );
  color: var(--chassis-text);
  border-color: var(--chassis-bezel-edge);
  font-weight: 700;
}

.theme-btn[aria-checked="true"]::before,
#seq-btn[aria-pressed="true"]::before,
#midi-btn[aria-pressed="true"]::before,
#seq-play-btn[aria-pressed="true"]::before {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent), 0 0 2px var(--accent);
}

/* Data buttons are momentary, so their LED sits at a dim standby glow in
   the group's role color rather than lighting fully. */
.ctrl-group[data-role="data"] button::before {
  background: color-mix(in srgb, var(--role) 55%, var(--led-off));
}

#seq-record-btn[aria-pressed="true"]::before {
  background: var(--danger);
  box-shadow: 0 0 6px var(--danger), 0 0 2px var(--danger);
}

/* Molded rubber pads: flatter, denser, and more modern than the old glossy
   bevel, while keeping a real pressure-sensitive hardware read. */
.pad {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  grid-template-rows: auto 1fr;
  gap: 5px;
  padding: 9px 10px 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 28%),
    radial-gradient(120% 90% at 50% 115%, rgba(0, 0, 0, 0.32), transparent 62%),
    var(--pad-surface);
  border: 1px solid var(--chassis-bezel-edge);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 1px 0 rgba(255, 255, 255, 0.035),
    0 5px 10px rgba(0, 0, 0, 0.32);
}

.pad::before,
.pad::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.pad::before {
  inset: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 48%);
  border: 1px solid rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.pad::after {
  inset: auto 7px 5px;
  height: 3px;
  border-radius: 999px;
  background: var(--pad-led);
  opacity: 0.18;
  filter: saturate(1.2);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pad-led) 35%, transparent);
  transition: opacity 160ms ease, box-shadow 160ms ease;
}

.pad-time {
  color: var(--pad-text-dim);
  align-self: end;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* The key badge is the pad's only label now, so it has to hold up on the
   2000XL's light gray rubber as well as the Live theme's black. Contrast
   comes from a dark well behind solid pad-text; the LED color is carried
   by the border, not the glyph. */
.pad-key {
  justify-self: start;
  min-width: 1.8em;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--pad-led) 55%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--pad-led) 16%, transparent);
  color: var(--pad-text);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
  text-shadow: none;
}

.pad.is-selected {
  border-color: var(--pad-led);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px color-mix(in srgb, var(--pad-led) 18%, transparent),
    0 0 0 2px color-mix(in srgb, var(--pad-led) 38%, transparent),
    0 5px 12px rgba(0, 0, 0, 0.38);
}

.pad.is-selected::after {
  opacity: 0.48;
  box-shadow: 0 0 14px color-mix(in srgb, var(--pad-led) 62%, transparent);
}

.pad.is-active {
  border-color: var(--pad-led);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.62),
    inset 0 0 18px color-mix(in srgb, var(--pad-led) 24%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 18px color-mix(in srgb, var(--pad-led) 55%, transparent);
}

.pad.is-active::after {
  opacity: 0.95;
  box-shadow:
    0 0 10px var(--pad-led),
    0 0 22px color-mix(in srgb, var(--pad-led) 70%, transparent);
}

.pad.is-active .pad-key {
  color: #fff;
  background: color-mix(in srgb, var(--pad-led) 65%, rgba(0, 0, 0, 0.3));
  border-color: color-mix(in srgb, var(--pad-led) 85%, #fff 15%);
}

/* A lit strip reads far weaker on the XL's cream rubber than on the Live
   theme's black, so it needs more opacity to carry the same signal. */
html[data-theme="2000xl"] .pad::after {
  opacity: 0.45;
}

html[data-theme="2000xl"] .pad.is-selected::after {
  opacity: 0.8;
}

html[data-theme="2000xl"] .pad.is-active::after {
  opacity: 1;
}

/* Panels: faint top light so they sit proud of the chassis */
.control-zone,
.timeline-panel,
.pad-panel,
.seq-panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 97%, #fff 3%), var(--panel-bg) 60%);
  border-color: var(--chassis-bezel-edge);
  box-shadow:
    inset 0 1px 0 var(--chassis-highlight),
    0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Display bezel around the video with a whisper of glass */
.player-frame {
  border-color: var(--chassis-bezel-edge);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    inset 0 2px 12px rgba(0, 0, 0, 0.5);
}

.player-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 28%, transparent 40%);
}

/* Groove-mounted timeline with a machined knob */
.timeline-track {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.15)), var(--screen-bg);
  border-color: var(--chassis-bezel-edge);
}

.timeline-handle {
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--accent) 70%, #fff 30%),
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 65%, #000 35%)
  );
  border: 1px solid var(--chassis-bezel-edge);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

/* Slice slider as a fader: recessed groove, rectangular cap with a
   position line */
.slice-slider::-webkit-slider-runnable-track {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), var(--screen-bg);
  border-color: var(--chassis-bezel-edge);
}

.slice-slider::-webkit-slider-thumb {
  width: 14px;
  height: 22px;
  margin-top: -7px;
  border-radius: 3px;
  border: 1px solid var(--chassis-bezel-edge);
  background:
    linear-gradient(0deg, transparent 44%, var(--accent) 44% 56%, transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 78%, #fff 12%), var(--panel-bg) 50%, color-mix(in srgb, var(--panel-bg) 78%, #000 22%));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.slice-slider::-moz-range-track {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), var(--screen-bg);
  border-color: var(--chassis-bezel-edge);
}

.slice-slider::-moz-range-thumb {
  width: 14px;
  height: 22px;
  border-radius: 3px;
  border: 1px solid var(--chassis-bezel-edge);
  background:
    linear-gradient(0deg, transparent 44%, var(--accent) 44% 56%, transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 78%, #fff 12%), var(--panel-bg) 50%, color-mix(in srgb, var(--panel-bg) 78%, #000 22%));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

/* Sequencer: recessed step wells, mono row labels. The label sits in the
   same well as its steps so the pad's LED color is what carries the row. */
.seq-row-label {
  background: var(--lcd-bg);
  border-color: var(--chassis-bezel-edge);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono);
  font-weight: 700;
  text-shadow: 0 0 7px color-mix(in srgb, var(--pad-led) 55%, transparent);
}

.seq-cell {
  background: var(--lcd-bg);
  border-color: var(--chassis-bezel-edge);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Downbeats: the well itself lifts in the phosphor tint, not just the
   border. A border alone was invisible against the XL's dark navy LCD, so
   there was nothing to count 1-2-3-4 against. */
.seq-cell.is-beat {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lcd-ink) 16%, transparent), color-mix(in srgb, var(--lcd-ink) 9%, transparent)),
    var(--lcd-bg);
  border-color: color-mix(in srgb, var(--lcd-ink) 55%, transparent);
}

.seq-cell.is-on {
  background: var(--pad-led);
  border-color: var(--pad-led);
  box-shadow: 0 0 7px var(--pad-led), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* Mobile keeps the flat chassis the earlier breakpoint established */
@media (max-width: 640px) {
  .chassis {
    box-shadow: none;
    border-width: 0;
    border-radius: 10px;
    background: var(--chassis-bezel);
  }
}