:root {
  color-scheme: dark;
  --bg: #12151a;
  --card: #1b2027;
  --text: #e8ecf1;
  --dim: #97a3b1;
  --accent: #4da3ff;
  --accent-b: #57d98a;
  --border: #2b333d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, "Segoe UI", sans-serif;
}

main {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

h1 { margin: 0 0 6px; font-size: 26px; }
.lede { color: var(--dim); margin: 0 0 22px; }

section { margin-bottom: 18px; }

.track-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.track-title { font-size: 18px; font-weight: 600; }
.track-subtitle { color: var(--dim); font-size: 13px; }
.status { color: var(--dim); font-size: 13px; }

.controls {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.controls.disabled { opacity: 0.45; pointer-events: none; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.row:last-child { margin-bottom: 0; }

.transport input[type="range"] { flex: 1; min-width: 200px; }
.time { font-variant-numeric: tabular-nums; color: var(--dim); min-width: 96px; text-align: right; }

label, .label { color: var(--dim); font-size: 13px; }
select {
  background: #232a33;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
}

.btn {
  background: #232a33;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.play { min-width: 110px; font-weight: 600; }

.ab-row { gap: 10px; }
.btn.arm {
  min-width: 150px;
  padding: 10px 16px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.btn.arm span { font-size: 11px; font-weight: 400; color: var(--dim); }
#armA.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#armB.active { border-color: var(--accent-b); box-shadow: 0 0 0 1px var(--accent-b); }
#armC.active { border-color: #e0a34d; box-shadow: 0 0 0 1px #e0a34d; }
#armD.active { border-color: #b98cf0; box-shadow: 0 0 0 1px #b98cf0; }

.arm-status { font-size: 13px; flex: 1; min-width: 220px; }
.arm-status.arm-a { color: var(--accent); }
.arm-status.arm-b { color: var(--accent-b); }
.arm-status.arm-c { color: #e0a34d; }
.arm-status.arm-d { color: #b98cf0; }

.btn.arm { min-width: 132px; }
.row.tuning { gap: 8px; }

.btn.stem.muted { opacity: 0.4; text-decoration: line-through; }

.hint { color: var(--dim); font-size: 12px; }
kbd {
  background: #232a33;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 11px;
}

details summary { cursor: pointer; color: var(--dim); font-size: 13px; }
pre {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre;
  color: var(--dim);
}