/* ============================================================
   Velouria 1200 — Hi-Fi MP3 Player
   Wood, brushed aluminum, amber LED, analog VU
   ============================================================ */

:root {
  /* Wood palette (walnut + teak) */
  --wood-1: #3a1f12;
  --wood-2: #5b3520;
  --wood-3: #7a4a2c;
  --wood-4: #a06a3e;
  --wood-edge: #1d0e07;

  /* Brushed metal */
  --metal-1: #d8d2c4;
  --metal-2: #b9b2a2;
  --metal-3: #8a8478;
  --metal-shadow: rgba(0, 0, 0, 0.45);

  /* Cream / paper */
  --cream-1: #efe6d2;
  --cream-2: #d9cfb8;

  /* Amber LED display */
  --amber: #ffae3d;
  --amber-glow: #ffd084;
  --amber-dim: #6b3d10;
  --amber-bg: #1c0d04;

  /* Red transport LEDs */
  --red-led: #ff4438;
  --red-glow: rgba(255, 68, 56, 0.55);

  /* Green power */
  --green-led: #6bff7a;
  --green-glow: rgba(107, 255, 122, 0.55);

  --ink: #1a1208;
  --ink-soft: #4a3520;
  --paper: #f5ecd6;

  --ease-mech: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #1a0f08;
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   ROOM (background)
   ============================================================ */
.room {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 0%, #5a3520 0%, #2e1a0d 45%, #120904 100%);
}
.room::before {
  /* soft wallpaper texture */
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.05) 0 1px, transparent 1px 22px);
  pointer-events: none;
}
.room-light {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 60vh;
  background: radial-gradient(ellipse at center, rgba(255, 200, 130, 0.18) 0%, transparent 65%);
  filter: blur(20px);
  pointer-events: none;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.hifi {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  padding: 36px 20px 60px;
  display: grid;
  gap: 22px;
}

/* ============================================================
   BRAND PLATE
   ============================================================ */
.brand {
  display: flex;
  justify-content: center;
}
.brand-plate {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 28px;
  background: linear-gradient(180deg, var(--metal-1) 0%, var(--metal-2) 50%, var(--metal-3) 100%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.5);
  /* brushed metal effect */
  background-image:
    linear-gradient(180deg, var(--metal-1) 0%, var(--metal-2) 50%, var(--metal-3) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 2px);
  background-blend-mode: overlay;
}
.brand-name {
  font-family: "Playfair Display", "Inter", serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 6px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.brand-model {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--ink-soft);
  font-weight: 600;
}

/* ============================================================
   WOOD CASE (shared)
   ============================================================ */
.plinth,
.amp-case,
.track-index {
  --grain: 0;
  background-color: var(--wood-2);
  background-image:
    /* dark grain streaks */
    repeating-linear-gradient(
      92deg,
      rgba(0, 0, 0, 0.28) 0 1px,
      transparent 1px 6px,
      rgba(0, 0, 0, 0.18) 6px 7px,
      transparent 7px 14px,
      rgba(0, 0, 0, 0.12) 14px 15px,
      transparent 15px 28px
    ),
    /* warm highlights */
    repeating-linear-gradient(
      88deg,
      rgba(255, 200, 140, 0.05) 0 2px,
      transparent 2px 9px,
      rgba(255, 180, 110, 0.04) 9px 11px,
      transparent 11px 22px
    ),
    /* knot-like blobs */
    radial-gradient(ellipse 80px 12px at 20% 30%, rgba(0,0,0,0.18), transparent 70%),
    radial-gradient(ellipse 120px 14px at 75% 70%, rgba(0,0,0,0.15), transparent 70%),
    radial-gradient(ellipse 60px 10px at 45% 85%, rgba(0,0,0,0.12), transparent 70%),
    /* base wood gradient */
    linear-gradient(180deg, var(--wood-3) 0%, var(--wood-2) 50%, var(--wood-1) 100%);
  border: 2px solid var(--wood-edge);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 140, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 18px 40px -10px rgba(0, 0, 0, 0.7),
    0 6px 0 rgba(0, 0, 0, 0.4);
  position: relative;
}
.plinth::after,
.amp-case::after,
.track-index::after {
  /* inner bevel */
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 180, 0.07);
  pointer-events: none;
}

/* ============================================================
   TURNTABLE / PLINTH
   ============================================================ */
.turntable {
  display: flex;
  justify-content: center;
}
.plinth {
  width: 100%;
  padding: 22px;
}
.deck-top {
  position: relative;
  background: linear-gradient(180deg, #1a1209 0%, #0c0703 100%);
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  padding: 28px 22px;
  min-height: 380px;
  /* metal speckle */
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px),
    linear-gradient(180deg, #1a1209 0%, #0c0703 100%);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 200, 140, 0.05);
  display: grid;
  grid-template-columns: 130px 1fr 130px;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  align-items: start;
}

/* clusters for deck-top corners */
.cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cluster-label {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--metal-2);
  font-weight: 700;
}

.cluster-power { grid-column: 1; grid-row: 1; }
.cluster-speed { grid-column: 3; grid-row: 1; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cluster-speed .cluster-label { width: 100%; text-align: center; margin-top: 4px; }

.led-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a2a2a 0%, #0a0a0a 70%);
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transition: background 0.3s var(--ease-mech), box-shadow 0.3s var(--ease-mech);
}
.led-dot.is-on {
  background: radial-gradient(circle at 35% 35%, var(--green-led) 0%, #1f8a2a 80%);
  box-shadow:
    0 0 8px var(--green-glow),
    0 0 18px var(--green-glow),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Speed buttons 33/45 */
.speed-btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.7);
  background: linear-gradient(180deg, #2a2a2e 0%, #15151a 100%);
  color: var(--metal-2);
  font-family: "VT323", monospace;
  font-size: 16px;
  letter-spacing: 1px;
  width: 38px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.12s var(--ease-mech), box-shadow 0.12s var(--ease-mech), color 0.2s, background 0.2s;
}
.speed-btn:hover { color: var(--metal-1); }
.speed-btn:active,
.speed-btn.is-active {
  transform: translateY(2px);
  background: linear-gradient(180deg, #1a1a1f 0%, #0a0a0d 100%);
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber-glow);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.7),
    0 0 0 rgba(0, 0, 0, 0);
}

/* ---- Platter well ---- */
.platter-well {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 380px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1a1209 60%, #0a0604 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 200, 140, 0.04),
    inset 0 8px 16px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.strobe-ring {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      var(--metal-2) 0 1.5deg,
      transparent 1.5deg 4.5deg
    );
  -webkit-mask-image: radial-gradient(circle, transparent 92%, #000 92%, #000 100%);
          mask-image: radial-gradient(circle, transparent 92%, #000 92%, #000 100%);
  opacity: 0.5;
  pointer-events: none;
}

.platter {
  position: relative;
  width: 92%;
  height: 92%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #2a2a2e 0%,
      #1a1a1e 50%,
      #0c0c10 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 30px rgba(0, 0, 0, 0.6),
    0 6px 14px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  /* concentric machined rings */
  background-image:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.04) 0 1px,
      transparent 1px 4px),
    radial-gradient(circle at 50% 50%, #2a2a2e 0%, #1a1a1e 50%, #0c0c10 100%);
}

.slipmat {
  width: 95%;
  height: 95%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #5a1a1a 0%, #3a0e0e 70%, #1c0606 100%);
  background-image:
    repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 50%, #5a1a1a 0%, #3a0e0e 70%, #1c0606 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.vinyl {
  position: relative;
  width: 92%;
  height: 92%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1a1a1a 0%, #0a0a0a 50%, #050505 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 4px 10px rgba(0, 0, 0, 0.5);
  /* one rotation each var(--spin-duration), paused by default */
  animation: spin var(--spin-duration, 1.81s) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.vinyl.is-playing { animation-play-state: running; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.vinyl-grooves {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.06) 0 1px,
      transparent 1px 5px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.vinyl-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 220deg at 50% 50%,
      transparent 0deg,
      rgba(255, 220, 180, 0.10) 30deg,
      transparent 70deg,
      rgba(255, 220, 180, 0.06) 180deg,
      transparent 220deg,
      rgba(255, 220, 180, 0.10) 280deg,
      transparent 320deg);
  pointer-events: none;
}
.vinyl-label {
  position: absolute;
  top: 50%; left: 50%;
  width: 38%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--cream-1) 0%, var(--cream-2) 70%, #b09a72 100%);
  /* paper texture */
  background-image:
    repeating-radial-gradient(circle at 50% 50%, rgba(122, 74, 44, 0.08) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%, var(--cream-1) 0%, var(--cream-2) 70%, #b09a72 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 4px rgba(122, 74, 44, 0.25),
    inset 0 0 14px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.label-ring {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(122, 74, 44, 0.5);
}
.label-ring::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(122, 74, 44, 0.35);
}
.label-text {
  position: relative;
  text-align: center;
  padding: 0 8%;
  display: grid;
  gap: 4px;
  z-index: 1;
}
.label-title {
  font-family: "Playfair Display", "Inter", serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.label-artist {
  font-family: "Inter", sans-serif;
  font-size: 8px;
  letter-spacing: 1.6px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
  text-transform: uppercase;
}
.label-spindle {
  position: absolute;
  top: 50%; left: 50%;
  width: 12%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #888 0%, #2a2a2a 70%);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---- Tonearm ---- */
.tonearm-mount {
  position: absolute;
  top: 32px;
  right: 36px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.tonearm-pivot {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--metal-1) 0%, var(--metal-2) 50%, var(--metal-3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.5);
}
.tonearm-pivot::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a2e 0%, #0c0c10 80%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}

.tonearm {
  position: absolute;
  width: 220px;
  height: 14px;
  top: 50%;
  right: 50%;
  transform-origin: right center;
  /* parked position: arm pulled away to upper-right */
  transform: translate(0, -50%) rotate(-32deg);
  transition: transform 1.1s var(--ease-spring);
  pointer-events: none;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6));
  z-index: 4;
}
.tonearm.is-playing {
  /* swung onto the record */
  transform: translate(0, -50%) rotate(-12deg);
}

.tonearm-tube {
  position: absolute;
  left: 30px;
  right: 22px;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: linear-gradient(180deg,
    var(--metal-1) 0%,
    var(--metal-2) 45%,
    var(--metal-3) 55%,
    var(--metal-1) 100%);
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
.tonearm-counterweight {
  position: absolute;
  right: 0;
  top: 50%;
  width: 26px;
  height: 18px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #2a2a2e 0%, #0c0c10 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.tonearm-headshell {
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 16px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--metal-1) 0%, var(--metal-3) 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.tonearm-headshell::before {
  /* cartridge body */
  content: "";
  position: absolute;
  bottom: -6px;
  left: 4px;
  width: 22px;
  height: 8px;
  background: linear-gradient(180deg, #4a1a1a 0%, #2a0808 100%);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.tonearm-headshell::after {
  /* stylus dot */
  content: "";
  position: absolute;
  bottom: -7px;
  left: 8px;
  width: 2px;
  height: 3px;
  background: var(--metal-1);
}

/* Cueing lever */
.cueing {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cueing-label {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--metal-2);
  font-weight: 700;
}
.cueing-lever {
  width: 18px;
  height: 56px;
  background: linear-gradient(180deg, var(--metal-1) 0%, var(--metal-2) 50%, var(--metal-3) 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 4px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform 0.5s var(--ease-spring);
  position: relative;
}
.cueing-lever::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--wood-3);
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.cueing-lever.is-down {
  transform: rotate(20deg);
}

/* Pitch fader (decorative) */
.pitch-fader {
  grid-column: 3;
  grid-row: 3;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pitch-label {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--metal-2);
  font-weight: 700;
}
.pitch-track {
  position: relative;
  width: 14px;
  height: 70px;
  background: linear-gradient(90deg, #0a0604 0%, #1a1209 50%, #0a0604 100%);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.pitch-mark {
  position: absolute;
  left: -6px;
  right: -6px;
  height: 1px;
  background: var(--metal-2);
  opacity: 0.5;
}
.pitch-mark-top { top: 6px; }
.pitch-mark-mid { top: 50%; }
.pitch-mark-bot { bottom: 6px; }
.pitch-handle {
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 14px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--metal-1) 0%, var(--metal-3) 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 3px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   AMP / RECEIVER
   ============================================================ */
.amp-case {
  padding: 18px;
}
.amp-face {
  background: linear-gradient(180deg, var(--metal-1) 0%, var(--metal-2) 50%, var(--metal-3) 100%);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, var(--metal-1) 0%, var(--metal-2) 50%, var(--metal-3) 100%);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  padding: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "vu      vu"
    "display display"
    "transport knob";
  gap: 16px;
  align-items: center;
}

/* ---- VU meters ---- */
.vu-section {
  grid-area: vu;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.vu-meter {
  position: relative;
  background: linear-gradient(180deg, var(--cream-1) 0%, var(--cream-2) 100%);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  padding: 6px 8px 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 6px rgba(122, 74, 44, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.3);
  height: 120px;
  overflow: hidden;
}
.vu-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.vu-channel {
  position: absolute;
  bottom: 4px;
  left: 8px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 11px;
  color: var(--ink);
  opacity: 0.8;
}

/* ---- LED amber display ---- */
.led-display {
  grid-area: display;
  background: var(--amber-bg);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  padding: 12px 14px;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 174, 61, 0.12);
  position: relative;
  overflow: hidden;
}
.led-display::before {
  /* scanlines */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 174, 61, 0.04) 0 1px,
    transparent 1px 3px);
  pointer-events: none;
}
.led-window {
  display: grid;
  gap: 8px;
  font-family: "VT323", monospace;
}
.led-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.led-track-num {
  font-size: 28px;
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber-glow), 0 0 14px rgba(255, 174, 61, 0.4);
  letter-spacing: 2px;
  min-width: 48px;
}
.led-marquee {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
}
.led-title {
  font-size: 22px;
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber-glow);
  letter-spacing: 2px;
  display: inline-block;
  padding-right: 60px; /* gap before re-loop */
}
.led-marquee.is-scrolling .led-title {
  animation: marquee 14s linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.led-time {
  font-size: 18px;
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber-glow);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: center;
}
.led-bar {
  flex: 1;
  position: relative;
  height: 16px;
  cursor: pointer;
  outline: none;
}
.led-bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 174, 61, 0.18) 0 6px,
      var(--amber-bg) 6px 8px);
  border-radius: 1px;
  border: 1px solid rgba(0, 0, 0, 0.6);
}
.led-bar-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  width: 0%;
  background:
    repeating-linear-gradient(90deg,
      var(--amber) 0 6px,
      transparent 6px 8px);
  box-shadow: 0 0 6px var(--amber-glow);
  pointer-events: none;
  transition: width 0.1s linear;
}
.led-bar-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 4px;
  height: 14px;
  transform: translate(-50%, -50%) scaleY(0.6);
  background: var(--amber);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--amber-glow);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s var(--ease-spring);
  pointer-events: none;
}
.led-bar:hover .led-bar-thumb,
.led-bar:focus-visible .led-bar-thumb,
.led-bar.is-dragging .led-bar-thumb {
  opacity: 1;
  transform: translate(-50%, -50%) scaleY(1);
}

/* ---- Transport buttons ---- */
.transport {
  grid-area: transport;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.tx-btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #2a2a2e 0%, #0e0e12 100%);
  color: var(--metal-1);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 3px 0 rgba(0, 0, 0, 0.55),
    0 5px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s var(--ease-mech), box-shadow 0.1s var(--ease-mech), color 0.2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tx-btn:hover { color: var(--metal-1); }
.tx-btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 rgba(0, 0, 0, 0);
}
.tx-icon {
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1;
}
.tx-text {
  font-size: 9px;
  opacity: 0.85;
}

.tx-play {
  min-width: 78px;
  background: linear-gradient(180deg, #3a2418 0%, #1a0e08 100%);
  color: var(--amber);
}
.tx-play.is-playing {
  background: linear-gradient(180deg, #4a1818 0%, #1c0808 100%);
  color: var(--red-led);
  text-shadow: 0 0 6px var(--red-glow);
}
.tx-play.is-playing .tx-icon { text-shadow: 0 0 8px var(--red-glow); }

/* Toggle buttons (shuf/repeat) get a small LED */
.tx-toggle {
  min-width: 50px;
  padding: 8px 8px 14px;
}
.tx-led {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a1a1a 0%, #0a0606 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.tx-toggle.is-active .tx-led {
  background: radial-gradient(circle at 30% 30%, var(--red-led) 0%, #8a1a14 80%);
  box-shadow: 0 0 6px var(--red-glow), 0 0 12px var(--red-glow);
}
.tx-toggle[data-mode="one"] .tx-led {
  background: radial-gradient(circle at 30% 30%, var(--amber) 0%, #8a4a10 80%);
  box-shadow: 0 0 6px var(--amber-glow), 0 0 12px var(--amber-glow);
}
.tx-toggle[data-mode="one"]::after {
  content: "1";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 8px;
  color: var(--amber);
  text-shadow: 0 0 4px var(--amber-glow);
}

/* ---- Volume knob ---- */
.knob-cluster {
  grid-area: knob;
  display: flex;
  justify-content: flex-end;
}
.knob {
  position: relative;
  width: 90px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  outline: none;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.knob:active { cursor: grabbing; }

.knob-body {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #4a4a52 0%, #2a2a30 60%, #0e0e12 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -3px 6px rgba(0, 0, 0, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}
.knob-dial {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1a1a1e 0%, #0a0a0e 100%);
  /* knurled texture */
  background-image:
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0.06) 0 2deg,
      transparent 2deg 6deg),
    radial-gradient(circle at 50% 50%, #1a1a1e 0%, #0a0a0e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.08);
  transform: rotate(var(--knob-angle, -135deg));
  transition: transform 0.05s linear;
  will-change: transform;
}
.knob-indicator {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 14px;
  transform: translateX(-50%);
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber-glow);
  border-radius: 1px;
  pointer-events: none;
  /* lives inside knob-dial via CSS variable rotation chain */
}
/* Move indicator inside the dial so it rotates with it */
.knob-dial::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 14px;
  transform: translateX(-50%);
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber-glow), 0 0 12px rgba(255, 174, 61, 0.4);
  border-radius: 1px;
}
.knob-indicator { display: none; } /* replaced by ::after above */

.knob-ticks {
  position: absolute;
  top: -2px; left: -2px;
  width: 80px; height: 80px;
  border-radius: 50%;
  pointer-events: none;
  background:
    /* tick marks every 30deg around knob */
    conic-gradient(
      from 225deg,
      rgba(0,0,0,0.6) 0 1deg, transparent 1deg 27deg,
      rgba(0,0,0,0.6) 27deg 28deg, transparent 28deg 54deg,
      rgba(0,0,0,0.6) 54deg 55deg, transparent 55deg 81deg,
      rgba(0,0,0,0.6) 81deg 82deg, transparent 82deg 108deg,
      rgba(0,0,0,0.6) 108deg 109deg, transparent 109deg 135deg,
      rgba(0,0,0,0.6) 135deg 136deg, transparent 136deg 162deg,
      rgba(0,0,0,0.6) 162deg 163deg, transparent 163deg 189deg,
      rgba(0,0,0,0.6) 189deg 190deg, transparent 190deg 216deg,
      rgba(0,0,0,0.6) 216deg 217deg, transparent 217deg 270deg);
  -webkit-mask-image: radial-gradient(circle, transparent 46%, #000 47%, #000 50%, transparent 51%);
          mask-image: radial-gradient(circle, transparent 46%, #000 47%, #000 50%, transparent 51%);
  opacity: 0.7;
}

.knob-label {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--ink);
  font-weight: 700;
  margin-top: 2px;
}
.knob-value {
  position: absolute;
  bottom: -2px;
  font-size: 10px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-family: "VT323", monospace;
  letter-spacing: 1px;
}

/* ============================================================
   TRACK INDEX (playlist)
   ============================================================ */
.track-index {
  padding: 18px 20px 20px;
}
.ti-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.ti-title h2 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 18px;
  letter-spacing: 5px;
  color: var(--cream-1);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.ti-count {
  display: block;
  margin-top: 2px;
  font-family: "VT323", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--amber);
  text-shadow: 0 0 4px var(--amber-glow);
}
.ti-actions { display: flex; gap: 8px; }

.btn-mech {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--metal-1) 0%, var(--metal-2) 50%, var(--metal-3) 100%);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 3px 0 rgba(0, 0, 0, 0.4),
    0 5px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s var(--ease-mech), box-shadow 0.1s var(--ease-mech);
  -webkit-tap-highlight-color: transparent;
}
.btn-mech:hover { background-image: linear-gradient(180deg, #e3dccd 0%, var(--metal-2) 100%); }
.btn-mech:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 0 rgba(0, 0, 0, 0);
}
.btn-mech.ghost {
  background: transparent;
  background-image: none;
  color: var(--cream-2);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.btn-mech.ghost:hover { color: var(--cream-1); border-color: rgba(255, 255, 255, 0.35); }

.dropzone {
  border: 2px dashed rgba(239, 230, 210, 0.25);
  border-radius: 6px;
  padding: 18px 14px;
  text-align: center;
  color: var(--cream-2);
  background: rgba(0, 0, 0, 0.18);
  font-family: "VT323", monospace;
  letter-spacing: 2px;
  transition: background 0.25s var(--ease-mech), border-color 0.25s var(--ease-mech), transform 0.3s var(--ease-spring);
  margin-bottom: 12px;
}
.dropzone.is-dragging {
  background: rgba(255, 174, 61, 0.08);
  border-color: var(--amber);
  transform: scale(1.005);
}
.dz-icon {
  display: inline-block;
  font-size: 22px;
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber-glow);
}
.dropzone p {
  margin: 4px 0 2px;
  font-size: 14px;
}
.dropzone small {
  font-size: 11px;
  color: rgba(239, 230, 210, 0.55);
  letter-spacing: 1.5px;
}

.track-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wood-4) transparent;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  padding: 6px;
}
.track-list::-webkit-scrollbar { width: 8px; }
.track-list::-webkit-scrollbar-thumb {
  background: var(--wood-4);
  border-radius: 4px;
}

.tl-item {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 3px;
  background: rgba(239, 230, 210, 0.04);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition:
    background 0.2s var(--ease-mech),
    border-color 0.2s var(--ease-mech),
    transform 0.3s var(--ease-spring);
  animation: itemEnter 0.45s var(--ease-spring) both;
}
@keyframes itemEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tl-item:hover {
  background: rgba(239, 230, 210, 0.09);
  transform: translateX(2px);
}
.tl-item.is-current {
  background: linear-gradient(90deg, rgba(255, 174, 61, 0.15), rgba(255, 174, 61, 0.04) 60%);
  border-left-color: var(--amber);
}

.tl-num {
  font-family: "VT323", monospace;
  font-size: 18px;
  color: var(--cream-2);
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: 1px;
}
.tl-item.is-current .tl-num {
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber-glow);
}
.tl-info { min-width: 0; }
.tl-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cream-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-sub {
  font-size: 10px;
  color: rgba(239, 230, 210, 0.55);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-duration {
  font-family: "VT323", monospace;
  font-size: 14px;
  color: var(--cream-2);
  font-variant-numeric: tabular-nums;
}
.tl-remove {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(239, 230, 210, 0.4);
  cursor: pointer;
  width: 24px; height: 24px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-spring);
}
.tl-remove:hover {
  background: rgba(255, 68, 56, 0.18);
  color: var(--red-led);
  transform: scale(1.15);
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(239, 230, 210, 0.4);
  margin-top: 8px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .deck-top {
    grid-template-columns: 80px 1fr 80px;
    padding: 18px 12px;
    min-height: 320px;
  }
  .tonearm-mount { right: 18px; top: 22px; width: 50px; height: 50px; }
  .tonearm { width: 170px; }
  .amp-face {
    grid-template-columns: 1fr;
    grid-template-areas:
      "vu"
      "display"
      "transport"
      "knob";
  }
  .knob-cluster { justify-content: center; }
  .transport { justify-content: center; }
}

@media (max-width: 480px) {
  .hifi { padding: 18px 12px 40px; }
  .brand-name { font-size: 18px; letter-spacing: 4px; }
  .brand-model { font-size: 8px; letter-spacing: 2px; }
  .led-track-num { font-size: 22px; }
  .led-title { font-size: 18px; }
  .tx-btn { min-width: 48px; padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}



/* ============================================================
   ===== VINTAGE HI-FI SUITE (added) =========================
   Theme variants, preamp panel, EQ, tone knobs, spectrum,
   tape counter, quartz lock, source selector, tuner mode,
   dust cover, vinyl dust, counterweight, anti-skating,
   serigrafia, power-on animation, auto-return.
   ============================================================ */

/* ---------- Theme tokens (default = walnut/silver) ---------- */
:root {
  --bg-room-1: #5a3520;
  --bg-room-2: #2e1a0d;
  --bg-room-3: #120904;
  --bg-light: rgba(255, 200, 130, 0.18);
  --frontplate-1: var(--metal-1);
  --frontplate-2: var(--metal-2);
  --frontplate-3: var(--metal-3);
  --frontplate-ink: var(--ink);
  --label-ink: var(--ink-soft);
  --plinth-1: var(--wood-3);
  --plinth-2: var(--wood-2);
  --plinth-3: var(--wood-1);
  --plinth-edge: var(--wood-edge);
  --plinth-grain: rgba(0, 0, 0, 0.28);
  --plinth-warm: rgba(255, 200, 140, 0.05);
  --accent-led: var(--amber);
  --accent-glow: var(--amber-glow);
  --accent-bg: var(--amber-bg);
}

html[data-theme="rosewood"] {
  --bg-room-1: #4a1a14;
  --bg-room-2: #2a0e0a;
  --bg-room-3: #100604;
  --bg-light: rgba(255, 180, 110, 0.20);
  --wood-1: #3a0a06;
  --wood-2: #5b1a10;
  --wood-3: #7a2c1c;
  --wood-4: #a04a2c;
  --wood-edge: #1a0604;
  --metal-1: #f0e5c8;
  --metal-2: #d4b87a;
  --metal-3: #8a6a30;
  --frontplate-1: #f0e5c8;
  --frontplate-2: #d4b87a;
  --frontplate-3: #8a6a30;
  --plinth-1: #7a2c1c;
  --plinth-2: #5b1a10;
  --plinth-3: #3a0a06;
  --plinth-edge: #1a0604;
  --accent-led: #ffc24a;
  --accent-glow: #ffe0a0;
}
html[data-theme="black"] {
  --bg-room-1: #2a2a2e;
  --bg-room-2: #15151a;
  --bg-room-3: #0a0a0d;
  --bg-light: rgba(180, 220, 255, 0.10);
  --wood-1: #18120a;
  --wood-2: #2a1f12;
  --wood-3: #3a2818;
  --wood-4: #5a3e22;
  --wood-edge: #050300;
  --metal-1: #5e5e62;
  --metal-2: #38383c;
  --metal-3: #1c1c20;
  --frontplate-1: #2a2a2e;
  --frontplate-2: #1a1a1e;
  --frontplate-3: #0c0c10;
  --frontplate-ink: #e0d6c0;
  --label-ink: #b0a690;
  --plinth-1: #3a2818;
  --plinth-2: #2a1f12;
  --plinth-3: #18120a;
  --plinth-edge: #050300;
  --accent-led: #6bdcff;
  --accent-glow: #b8efff;
}

html[data-theme="black"] .brand-name,
html[data-theme="black"] .brand-model { color: var(--frontplate-ink); text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
html[data-theme="black"] .knob-label,
html[data-theme="black"] .tk-label,
html[data-theme="black"] .src-title,
html[data-theme="black"] .eq-title,
html[data-theme="black"] .spectrum-label,
html[data-theme="black"] .tc-label,
html[data-theme="black"] .ql-label { color: var(--frontplate-ink); }

/* Re-tint the room based on theme */
.room {
  background:
    radial-gradient(ellipse at 50% 0%, var(--bg-room-1) 0%, var(--bg-room-2) 45%, var(--bg-room-3) 100%);
  transition: background 0.6s ease;
}
.room-light {
  background: radial-gradient(ellipse at center, var(--bg-light) 0%, transparent 65%);
  transition: background 0.6s ease;
}

/* ============================================================
   THEME SWITCHER (top right corner)
   ============================================================ */
.theme-switcher {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 50;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(20,12,6,0.7) 0%, rgba(8,4,2,0.85) 100%);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.theme-btn {
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, var(--metal-1) 0%, var(--metal-3) 100%);
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 0 rgba(0,0,0,0.5);
  transition: transform 0.1s, box-shadow 0.1s;
}
.theme-btn[data-theme="walnut"]   span { background: linear-gradient(180deg, #7a4a2c, #3a1f12); }
.theme-btn[data-theme="rosewood"] span { background: linear-gradient(180deg, #d4b87a, #3a0a06); }
.theme-btn[data-theme="black"]    span { background: linear-gradient(180deg, #5e5e62, #18120a); }
.theme-btn span {
  position: absolute;
  inset: 2px;
  border-radius: 3px;
  z-index: 0;
  opacity: 0.5;
}
.theme-btn { z-index: 1; isolation: isolate; }
.theme-btn::before {
  /* keep the letter on top */
  content: "";
  position: absolute; inset: 0;
}
.theme-btn:hover { transform: translateY(-1px); }
.theme-btn:active,
.theme-btn.is-active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
}
.theme-btn.is-active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-led);
  box-shadow: 0 0 6px var(--accent-glow);
}

/* ============================================================
   DUST COVER (translucent plexiglass over turntable)
   ============================================================ */
.turntable {
  position: relative;
}
.dust-cover {
  position: absolute;
  inset: -8px -10px -8px -10px;
  z-index: 6;
  pointer-events: none;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 1.2s var(--ease-spring);
  perspective: 1200px;
}
.dust-cover-glass {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(180, 200, 220, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.10) 30%,
      rgba(255, 255, 255, 0.02) 50%,
      rgba(255, 255, 255, 0.08) 70%,
      rgba(255, 255, 255, 0.03) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 0 60px rgba(255, 255, 255, 0.04),
    0 8px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(0.5px);
}
.dust-cover-glass::before {
  /* glare line */
  content: "";
  position: absolute;
  top: 6%;
  left: 8%;
  width: 30%;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  border-radius: 2px;
  filter: blur(1px);
  opacity: 0.6;
}
.dust-cover-glass::after {
  /* second glare */
  content: "";
  position: absolute;
  top: 38%;
  right: 12%;
  width: 18%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  border-radius: 1px;
  filter: blur(0.5px);
  opacity: 0.7;
}
.dust-cover-hinge {
  position: absolute;
  top: -2px;
  left: 8%;
  right: 8%;
  height: 4px;
  background: linear-gradient(180deg, var(--metal-3) 0%, #0c0c10 100%);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.dust-cover.is-open {
  transform: rotateX(-65deg);
  transition: transform 0.7s var(--ease-spring);
}

/* ============================================================
   COUNTERWEIGHT NUMBERED MARKS
   ============================================================ */
.cw-marks {
  position: absolute;
  inset: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.cw-marks span {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  width: 100%;
}
.cw-marks span:nth-child(odd) { background: rgba(255, 255, 255, 0.10); }

/* ============================================================
   ANTI-SKATING KNOB
   ============================================================ */
.anti-skating {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 3;
}
.as-label {
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--metal-2);
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
.as-knob {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--metal-1) 0%, var(--metal-3) 80%);
  background-image:
    repeating-conic-gradient(from 0deg, rgba(0,0,0,0.25) 0 2deg, transparent 2deg 8deg),
    radial-gradient(circle at 30% 30%, var(--metal-1) 0%, var(--metal-3) 80%);
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.5);
  position: relative;
  cursor: grab;
  touch-action: none;
  transform: rotate(var(--knob-angle, -135deg));
  transition: transform 0.05s linear;
}
.as-knob:active { cursor: grabbing; }
.as-knob::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 2px;
  height: 6px;
  background: var(--accent-led);
  box-shadow: 0 0 4px var(--accent-glow);
  transform: translateX(-50%);
}
.as-marks {
  display: flex;
  gap: 2px;
  font-size: 6px;
  color: var(--metal-2);
  font-family: "VT323", monospace;
  letter-spacing: 1px;
}

/* ============================================================
   VINYL DUST particles
   ============================================================ */
.vinyl-dust {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.vinyl-dust span {
  position: absolute;
  width: 2px;
  height: 1px;
  background: rgba(220, 220, 220, 0.35);
  border-radius: 50%;
  filter: blur(0.3px);
}
.vinyl-dust span:nth-child(1) { top: 14%; left: 28%; }
.vinyl-dust span:nth-child(2) { top: 32%; left: 72%; width: 3px; }
.vinyl-dust span:nth-child(3) { top: 58%; left: 18%; }
.vinyl-dust span:nth-child(4) { top: 76%; left: 64%; width: 2px; height: 2px; }
.vinyl-dust span:nth-child(5) { top: 22%; left: 56%; }
.vinyl-dust span:nth-child(6) { top: 84%; left: 30%; }

/* ============================================================
   SOURCE TAG in LED display
   ============================================================ */
.led-source-tag {
  font-family: "VT323", monospace;
  font-size: 13px;
  color: var(--accent-led);
  text-shadow: 0 0 4px var(--accent-glow);
  letter-spacing: 2px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 174, 61, 0.35);
  border-radius: 2px;
  margin-left: auto;
}

/* ============================================================
   PREAMP SECTION
   ============================================================ */
.preamp {
  display: flex;
  justify-content: center;
}
.preamp-case {
  width: 100%;
  background: linear-gradient(180deg, var(--frontplate-1) 0%, var(--frontplate-2) 50%, var(--frontplate-3) 100%);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, var(--frontplate-1) 0%, var(--frontplate-2) 50%, var(--frontplate-3) 100%);
  border: 2px solid var(--plinth-edge);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 14px 30px -8px rgba(0, 0, 0, 0.6);
  display: grid;
  gap: 16px;
}
.preamp-row {
  display: grid;
  align-items: center;
  gap: 14px;
}
.preamp-top {
  grid-template-columns: 110px 1fr 90px;
}
.preamp-mid {
  grid-template-columns: 1fr auto;
}
.preamp-bot {
  grid-template-columns: auto 1fr auto;
}

/* ---- Tape counter ---- */
.tape-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tc-label {
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--ink-soft);
  font-weight: 700;
}
.tc-display {
  font-family: "VT323", monospace;
  font-size: 28px;
  letter-spacing: 6px;
  background: #2a0606;
  color: #ff4438;
  text-shadow: 0 0 6px #ff8478, 0 0 14px rgba(255, 68, 56, 0.5);
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 68, 56, 0.15);
  font-variant-numeric: tabular-nums;
  min-width: 88px;
  text-align: center;
}

/* ---- Spectrum analyzer ---- */
.spectrum-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px;
  background: #060606;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.spectrum-label {
  font-size: 8px;
  letter-spacing: 3px;
  color: rgba(180, 180, 180, 0.7);
  font-weight: 700;
}
.spectrum {
  display: block;
  width: 100%;
  height: 90px;
  image-rendering: pixelated;
}
.spectrum-scale {
  display: grid;
  grid-template-columns: repeat(7, 1fr) auto;
  gap: 4px;
  font-size: 7px;
  letter-spacing: 1px;
  color: rgba(150, 150, 150, 0.7);
  font-family: "VT323", monospace;
}
.spectrum-scale .spectrum-units {
  margin-left: 6px;
  color: rgba(120, 120, 120, 0.7);
}

/* ---- Quartz lock LED ---- */
.quartz-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ql-led {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1a2a1a 0%, #0a0a0a 70%);
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transition: background 0.3s, box-shadow 0.3s;
}
.ql-led.is-blinking {
  animation: quartz-blink 0.18s linear infinite;
}
.ql-led.is-locked {
  background: radial-gradient(circle at 35% 35%, var(--green-led) 0%, #1f8a2a 80%);
  box-shadow: 0 0 8px var(--green-glow), 0 0 16px var(--green-glow);
}
@keyframes quartz-blink {
  0%, 49%   { background: radial-gradient(circle at 35% 35%, #1a2a1a 0%, #0a0a0a 70%); box-shadow: none; }
  50%, 100% { background: radial-gradient(circle at 35% 35%, var(--green-led) 0%, #1f8a2a 80%); box-shadow: 0 0 8px var(--green-glow); }
}
.ql-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--ink-soft);
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
}

/* ============================================================
   EQ (5-band graphic equalizer)
   ============================================================ */
.eq-bands {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: 6px 14px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.20) 100%);
  border: 1px solid rgba(0,0,0,0.4);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.eq-title {
  grid-column: 1 / -1;
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--ink);
  font-weight: 700;
  opacity: 0.85;
}
.eq-sliders {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  height: 130px;
}
.eq-slider {
  --eq-pct: 50%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  height: 100%;
}
.eq-slider input[type="range"] {
  -webkit-appearance: slider-vertical;
  writing-mode: bt-lr;
  appearance: slider-vertical;
  width: 28px;
  height: 100%;
  background: transparent;
  cursor: ns-resize;
  margin: 0;
  padding: 0;
}
/* Custom track */
.eq-slider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  background:
    linear-gradient(180deg,
      rgba(255, 68, 56, 0.18) 0%,
      transparent 30%,
      rgba(255, 174, 61, 0.18) 45%,
      rgba(255, 174, 61, 0.18) 55%,
      transparent 70%,
      rgba(80, 200, 90, 0.18) 100%);
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}
.eq-slider::after {
  /* center line */
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% - 12px);
  width: 24px;
  height: 1px;
  background: rgba(0,0,0,0.5);
  z-index: 1;
  pointer-events: none;
  transform: translateY(-50%);
}
/* WebKit thumb */
.eq-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--metal-1) 0%, var(--metal-3) 100%);
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.5);
  cursor: ns-resize;
}
.eq-slider input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--metal-1) 0%, var(--metal-3) 100%);
  border: 1px solid rgba(0,0,0,0.7);
  cursor: ns-resize;
}
.eq-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.eq-slider input[type="range"]::-moz-range-track { background: transparent; }

.eq-freq {
  font-family: "VT323", monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-soft);
  font-weight: 700;
}
.eq-slider.is-boost .eq-freq {
  color: #c0381f;
  text-shadow: 0 0 4px rgba(255, 68, 56, 0.4);
}
.eq-slider.is-cut .eq-freq {
  color: #2a8a3a;
  text-shadow: 0 0 4px rgba(80, 200, 90, 0.3);
}

.eq-scale {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  font-family: "VT323", monospace;
  font-size: 9px;
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 0 18px;
}
.eq-scale .eq-units {
  font-size: 8px;
  margin-top: 2px;
  opacity: 0.7;
}

/* ============================================================
   TONE KNOBS (Bass/Treble/Balance/Reverb)
   ============================================================ */
.tone-knobs {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 6px;
}
.tone-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.tk-knob {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4a52 0%, #2a2a30 60%, #0e0e12 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.1),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 4px 8px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.5);
  cursor: grab;
  outline: none;
  touch-action: none;
}
.tk-knob:active { cursor: grabbing; }
.tk-knob:focus-visible { box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.1),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 0 0 2px var(--accent-led),
    0 4px 8px rgba(0,0,0,0.5); }
.tk-dial {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.06) 0 2deg, transparent 2deg 6deg),
    radial-gradient(circle at 50% 50%, #1a1a1e 0%, #0a0a0e 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.08);
  transform: rotate(var(--knob-angle, -135deg));
  transition: transform 0.05s linear;
}
.tk-dial::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2.5px;
  height: 11px;
  transform: translateX(-50%);
  background: var(--accent-led);
  box-shadow: 0 0 5px var(--accent-glow);
  border-radius: 1px;
}
.tk-indicator { display: none; }

.tk-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--ink);
  font-weight: 700;
}
.tk-value {
  font-family: "VT323", monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: center;
}

/* Reverb knob: detent ring */
.tone-knob-detents .tk-knob::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background:
    conic-gradient(from 225deg,
      rgba(0,0,0,0.7) 0 1deg, transparent 1deg 90deg,
      rgba(0,0,0,0.7) 90deg 91deg, transparent 91deg 180deg,
      rgba(0,0,0,0.7) 180deg 181deg, transparent 181deg 270deg,
      rgba(0,0,0,0.7) 270deg 271deg, transparent 271deg 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 50%, #000 51%, #000 54%, transparent 55%);
          mask-image: radial-gradient(circle, transparent 50%, #000 51%, #000 54%, transparent 55%);
  pointer-events: none;
  opacity: 0.7;
}

/* ============================================================
   SOURCE SELECTOR (PHONO/TUNER/AUX/TAPE)
   ============================================================ */
.source-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.18));
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 4px;
}
.src-title {
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--ink);
  font-weight: 700;
}
.src-knob-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.src-knob {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4a52 0%, #2a2a30 60%, #0e0e12 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.1),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 3px 6px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.5);
  cursor: grab;
  outline: none;
  touch-action: none;
}
.src-dial {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.06) 0 2deg, transparent 2deg 6deg),
    radial-gradient(circle at 50% 50%, #1a1a1e 0%, #0a0a0e 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
  transform: rotate(var(--knob-angle, -135deg));
  transition: transform 0.05s linear;
}
.src-dial::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 2.5px;
  height: 10px;
  transform: translateX(-50%);
  background: var(--accent-led);
  box-shadow: 0 0 5px var(--accent-glow);
  border-radius: 1px;
}
.src-indicator { display: none; }

.src-positions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 8px;
}
.src-btn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.src-btn:hover { background: rgba(0,0,0,0.05); }
.src-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a1a06 0%, #0a0604 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}
.src-btn.is-active .src-led {
  background: radial-gradient(circle at 30% 30%, var(--accent-led) 0%, #6b3d10 80%);
  box-shadow: 0 0 5px var(--accent-glow), 0 0 10px var(--accent-glow);
}
.src-btn.is-active {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.4);
}

/* ============================================================
   FILTER ROCKER SWITCHES (Loudness/Sub/Hi/Warm)
   ============================================================ */
.filter-switches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.rocker {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 28px;
  background: linear-gradient(180deg, #2a2a2e 0%, #0e0e12 100%);
  color: var(--metal-1);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.1s var(--ease-mech), box-shadow 0.1s;
}
.rocker:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    0 0 0 rgba(0, 0, 0, 0);
}
.rk-led {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a1a1a 0%, #0a0606 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.rocker.is-active .rk-led {
  background: radial-gradient(circle at 30% 30%, var(--red-led) 0%, #8a1a14 80%);
  box-shadow: 0 0 6px var(--red-glow), 0 0 12px var(--red-glow);
}
.rocker.is-active {
  color: var(--accent-led);
}
.rk-label { white-space: nowrap; }

/* ============================================================
   SERIGRAFIA (decorative text)
   ============================================================ */
.serigrafia {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--label-ink);
  opacity: 0.55;
}
.serig-line {
  font-size: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.serig-mark {
  border: 1px solid currentColor;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 7px;
  letter-spacing: 1.5px;
}
.serig-dot { opacity: 0.5; }
.serig-serial {
  font-size: 7px;
  font-family: "VT323", monospace;
  letter-spacing: 1.5px;
  opacity: 0.65;
}

/* ============================================================
   TUNER PANEL (visible only when source = TUNER)
   ============================================================ */
.tuner-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--amber-bg);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 174, 61, 0.12);
  position: relative;
  overflow: hidden;
}
.tuner-panel::before {
  /* scanlines */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,174,61,0.05) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.tuner-title {
  font-family: "Playfair Display", serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--accent-led);
  text-shadow: 0 0 4px var(--accent-glow);
}
.tuner-display {
  font-family: "VT323", monospace;
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--accent-led);
  text-shadow: 0 0 6px var(--accent-glow), 0 0 14px rgba(255, 174, 61, 0.4);
  font-variant-numeric: tabular-nums;
  min-width: 130px;
  text-align: center;
}
.tuner-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "VT323", monospace;
  font-size: 11px;
  color: var(--accent-led);
  text-shadow: 0 0 4px var(--accent-glow);
}
.tuner-track {
  position: relative;
  width: 200px;
  height: 8px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 174, 61, 0.15) 0 6px,
      transparent 6px 8px);
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 1px;
}
.tuner-needle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: var(--accent-led);
  box-shadow: 0 0 6px var(--accent-glow), 0 0 12px var(--accent-glow);
  transition: left 0.15s linear;
}
.tuner-band {
  font-size: 9px;
  letter-spacing: 1px;
}
.tuner-dial-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tuner-dial-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--accent-led);
  text-shadow: 0 0 3px var(--accent-glow);
}
.tuner-dial {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4a52 0%, #2a2a30 60%, #0e0e12 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.1),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 4px 8px rgba(0,0,0,0.5);
  cursor: grab;
  touch-action: none;
}
.tuner-dial:active { cursor: grabbing; }
.td-dial {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.06) 0 2deg, transparent 2deg 6deg),
    radial-gradient(circle at 50% 50%, #1a1a1e 0%, #0a0a0e 100%);
  transform: rotate(var(--knob-angle, 0deg));
  transition: transform 0.05s linear;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
}
.td-dial::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2.5px;
  height: 10px;
  transform: translateX(-50%);
  background: var(--accent-led);
  box-shadow: 0 0 5px var(--accent-glow);
  border-radius: 1px;
}
.td-indicator { display: none; }

.tuner-stereo-led {
  font-family: "Inter", sans-serif;
  font-size: 8px;
  letter-spacing: 2px;
  font-weight: 700;
  color: rgba(255, 174, 61, 0.3);
  border: 1px solid rgba(255, 174, 61, 0.3);
  padding: 3px 6px;
  border-radius: 2px;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.tuner-stereo-led.is-on {
  color: var(--accent-led);
  border-color: var(--accent-led);
  text-shadow: 0 0 4px var(--accent-glow);
  box-shadow: 0 0 6px rgba(255, 174, 61, 0.3);
}

/* ============================================================
   STROBE RING SYNC TO RPM
   The strobe pattern is set up so it appears stationary
   when the platter spins at the matching RPM.
   ============================================================ */
:root { --strobe-rpm: 33; }
.vinyl.is-playing ~ * .strobe-ring,
.platter:has(.vinyl.is-playing) + .strobe-ring,
.vinyl.is-playing { /* no-op marker */ }

/* ============================================================
   AUTO-RETURN ANIMATION
   ============================================================ */
.tonearm.is-returning {
  transition: transform 1.2s var(--ease-spring) !important;
  transform: translate(0, -50%) rotate(-32deg) !important;
}

/* ============================================================
   POWER-ON ANIMATION
   ============================================================ */
body.powering-on .led-display,
body.powering-on .tape-counter .tc-display,
body.powering-on .led-track-num,
body.powering-on .led-title,
body.powering-on .led-time {
  filter: brightness(0.15);
  transition: filter 1.0s ease-out;
}
body.power-on .led-display,
body.power-on .tape-counter .tc-display,
body.power-on .led-track-num,
body.power-on .led-title,
body.power-on .led-time {
  filter: brightness(1);
}
body.powering-on .vu-canvas,
body.powering-on .spectrum {
  filter: brightness(0.3);
  transition: filter 1.2s ease-out;
}
body.power-on .vu-canvas,
body.power-on .spectrum {
  filter: brightness(1);
}
body.powering-on .theme-switcher,
body.powering-on .preamp-case,
body.powering-on .amp-case,
body.powering-on .plinth {
  filter: brightness(0.85) saturate(0.7);
  transition: filter 1.0s ease-out;
}
body.power-on .theme-switcher,
body.power-on .preamp-case,
body.power-on .amp-case,
body.power-on .plinth {
  filter: brightness(1) saturate(1);
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 760px) {
  .preamp-top { grid-template-columns: 1fr; gap: 10px; }
  .preamp-mid { grid-template-columns: 1fr; }
  .preamp-bot { grid-template-columns: 1fr; gap: 10px; }
  .eq-sliders { gap: 6px; }
  .tone-knobs { justify-content: center; flex-wrap: wrap; }
  .filter-switches { justify-content: center; }
  .serigrafia { align-items: center; }
  .theme-switcher { top: 8px; right: 8px; }
}