:root {
  color-scheme: dark;
  --mode-color: #ff4fd8;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 79, 216, 0.22), transparent 30rem),
    radial-gradient(circle at 88% 88%, rgba(115, 199, 207, 0.2), transparent 30rem),
    linear-gradient(135deg, #080711 0%, #130a2a 46%, #05131f 100%);
}

button,
input {
  font: inherit;
}

canvas {
  background: #080711;
}

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

.step-lit {
  box-shadow: 0 0 18px color-mix(in srgb, var(--mode-color), transparent 20%);
}

.step-active,
.scale-active {
  border-color: var(--mode-color);
  background: var(--mode-color);
  color: #0b1011;
}

.neon-panel {
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.08),
    0 0 38px rgba(255, 79, 216, 0.12),
    0 24px 80px rgba(0, 0, 0, 0.38);
}

.neon-title {
  color: #fff7fb;
  text-shadow:
    0 0 10px rgba(255, 79, 216, 0.8),
    0 0 30px rgba(155, 109, 255, 0.46),
    0 0 54px rgba(115, 199, 207, 0.32);
}