@property --glow {
  syntax: '<color>';
  inherits: true;
  initial-value: rgb(120, 170, 255);
}

:root {
  color-scheme: dark;
  --bg: #07060a;
  --ink: #f3ede2;
  --ink-soft: rgba(243, 237, 226, 0.68);
  --ink-faint: rgba(243, 237, 226, 0.42);
  --line: rgba(255, 240, 220, 0.08);
  --line-strong: rgba(255, 240, 220, 0.16);
  --gold: #e3c993;
  --gold-deep: #b18f57;
  --panel: rgba(20, 16, 24, 0.38);
  --radius: 28px;
  --energy: 0;
  --glow: rgb(120, 170, 255);
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-ui: 'Manrope', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(70, 50, 90, 0.35), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(40, 28, 20, 0.6), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button,
a {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* ───────── atmosphere ───────── */

.app {
  position: relative;
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transition: --glow 1.6s ease;
}

.aura {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}

.aura-a {
  width: 56vmax;
  height: 56vmax;
  left: 18%;
  top: -18%;
  background: radial-gradient(circle, color-mix(in srgb, var(--glow) 55%, transparent), transparent 65%);
  animation: drift-a 34s ease-in-out infinite alternate;
}

.aura-b {
  width: 46vmax;
  height: 46vmax;
  right: -12%;
  bottom: -22%;
  background: radial-gradient(circle, rgba(227, 201, 147, 0.22), transparent 65%);
  animation: drift-b 42s ease-in-out infinite alternate;
}

.aura-c {
  width: 40vmax;
  height: 40vmax;
  left: -14%;
  bottom: -10%;
  background: radial-gradient(circle, rgba(150, 90, 200, 0.22), transparent 65%);
  animation: drift-c 38s ease-in-out infinite alternate;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────── header ───────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(18px, 3vw, 44px) 10px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  letter-spacing: 0.42em;
  color: var(--ink);
  background: linear-gradient(100deg, #fff8ea 10%, var(--gold) 45%, #fff3dc 60%, var(--gold-deep) 95%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 12s ease-in-out infinite;
}

.brand-sub {
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.socials {
  display: flex;
  gap: 6px;
}

.social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: color 300ms ease, border-color 300ms ease, background 300ms ease, transform 300ms var(--ease);
}

.social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.social:hover {
  color: var(--gold);
  border-color: rgba(227, 201, 147, 0.4);
  background: rgba(227, 201, 147, 0.06);
  transform: translateY(-2px);
}

.social[aria-disabled='true'] {
  opacity: 0.55;
}

/* ───────── layout ───────── */

.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) minmax(310px, 380px);
  gap: clamp(14px, 1.6vw, 24px);
  padding: 8px clamp(18px, 3vw, 44px) clamp(18px, 2.4vw, 32px);
}

.panel {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.045), rgba(255, 245, 230, 0.01)), var(--panel);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 245, 230, 0.06);
  padding: 22px;
}

.panel-list,
.panel-console {
  z-index: 2;
}

.panel-stage {
  z-index: 1;
  background: none;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 22px 8px 14px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.panel-head > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-stage .panel-head {
  padding: 0 14px;
}

.reveal {
  animation: rise 1.4s var(--ease) both;
  animation-delay: var(--d, 0s);
}

/* ───────── intro + tracks ───────── */

.intro {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.intro-logo {
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(227, 201, 147, 0.3);
  box-shadow: 0 0 0 4px rgba(227, 201, 147, 0.05), 0 12px 30px rgba(0, 0, 0, 0.5);
}

.intro-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-copy {
  display: grid;
  gap: 6px;
}

.eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}

.intro-copy p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.tracklist {
  list-style: none;
  margin: 12px -10px 0;
  padding: 4px 10px 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(227, 201, 147, 0.25) transparent;
  mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 26px), transparent 100%);
}

.track {
  position: relative;
  display: grid;
  grid-template-columns: 22px 40px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 10px;
  border-radius: 16px;
  transition: background 400ms ease;
}

.track-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  padding: 0;
  border-radius: inherit;
  background: none;
}

.track:hover {
  background: rgba(255, 245, 230, 0.035);
}

.track.is-active {
  background: linear-gradient(90deg, rgba(227, 201, 147, 0.1), rgba(227, 201, 147, 0.02));
}

.track-no {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-faint);
  transition: color 300ms ease;
}

.track.is-active .track-no {
  color: var(--gold);
}

.track-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.track-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.85);
  transition: filter 400ms ease, transform 600ms var(--ease);
}

.track-thumb::after {
  content: '';
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.track:hover .track-thumb img,
.track.is-active .track-thumb img {
  filter: none;
  transform: scale(1.06);
}

.track.is-active.is-playing .track-thumb img {
  animation: spin 4s linear infinite;
}

.track-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.track-meta strong {
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.track-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  opacity: 0;
  transition: opacity 300ms ease;
}

.track-eq i {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--gold);
  transform-origin: bottom;
  transform: scaleY(0.3);
}

.track.is-active.is-playing .track-eq {
  opacity: 1;
}

.track.is-active.is-playing .track-eq i {
  animation: eq 1s ease-in-out infinite;
}

.track-eq i:nth-child(2) {
  animation-delay: -0.4s !important;
}

.track-eq i:nth-child(3) {
  animation-delay: -0.7s !important;
}

.track-link {
  position: relative;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 300ms ease, border-color 300ms ease;
}

.track-link:hover {
  color: var(--gold);
  border-color: rgba(227, 201, 147, 0.4);
}

.track-link[aria-disabled='true'] {
  opacity: 0.6;
}

/* ───────── stage / turntable ───────── */

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}

.stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(86cqw, 86cqh);
  aspect-ratio: 1;
  translate: -50% -50%;
  scale: calc(1 + var(--energy) * 0.08 + var(--beat, 0) * 0.07);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--glow) 40%, transparent) 0%, transparent 62%);
  filter: blur(30px);
  opacity: calc(0.35 + var(--energy) * 0.65 + var(--beat, 0) * 0.3);
  pointer-events: none;
}

.spotlight {
  position: absolute;
  inset: -10% 10% 0;
  background:
    conic-gradient(from 180deg at 50% -8%, transparent 160deg, rgba(255, 244, 222, 0.07) 172deg, rgba(255, 244, 222, 0.1) 180deg, rgba(255, 244, 222, 0.07) 188deg, transparent 200deg);
  filter: blur(10px);
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 20%, transparent 90%);
}

.smoke {
  position: absolute;
  inset: -8% -14%;
  width: 128%;
  height: 116%;
  pointer-events: none;
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}

.smoke-back {
  opacity: 0.9;
}

.sparkle {
  position: absolute;
  inset: -8% -14%;
  width: 128%;
  height: 116%;
  pointer-events: none;
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}

.smoke-front {
  mix-blend-mode: screen;
  opacity: 0.55;
  z-index: 3;
}

.turntable {
  --size: min(94cqw, 94cqh);
  position: relative;
  z-index: 2;
  width: var(--size);
  aspect-ratio: 1;
  font-size: calc(var(--size) / 100);
}

.plinth {
  position: absolute;
  inset: 0;
  border-radius: 5em;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 245, 230, 0.07), transparent 50%),
    linear-gradient(160deg, #19161b 0%, #0d0b0f 55%, #08070a 100%);
  box-shadow:
    0 6em 12em rgba(0, 0, 0, 0.65),
    0 1.6em 3em rgba(0, 0, 0, 0.5),
    inset 0 0.12em 0 rgba(255, 245, 230, 0.1),
    inset 0 -0.6em 1.6em rgba(0, 0, 0, 0.6);
}

.plinth-trim {
  position: absolute;
  inset: 1.4em;
  border-radius: 3.8em;
  border: 0.1em solid rgba(227, 201, 147, 0.16);
  pointer-events: none;
}

.platter {
  position: absolute;
  left: 3.5em;
  top: 9.5em;
  width: 81em;
  height: 81em;
  border-radius: 50%;
  background:
    conic-gradient(from 20deg, #2a2724, #8c857b, #2a2724, #5f5a53, #2a2724, #9b948a, #2a2724),
    #1a1817;
  box-shadow:
    0 1.4em 3em rgba(0, 0, 0, 0.7),
    inset 0 0 0 0.25em rgba(0, 0, 0, 0.4);
}

.vinyl {
  position: absolute;
  left: 5em;
  top: 11em;
  width: 78em;
  height: 78em;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle closest-side, #0e0d10 0 49%, #09080b 50% 100%);
  box-shadow:
    0 0 0 0.15em rgba(0, 0, 0, 0.8),
    0 0.8em 2em rgba(0, 0, 0, 0.6);
  will-change: transform;
}

.vinyl-tint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2.2em) saturate(1.6);
  opacity: 0.16;
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle closest-side, transparent 0 48%, #000 56%, #000 90%, transparent 97%);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 48%, #000 56%, #000 90%, transparent 97%);
  transition: opacity 1s ease;
}

.vinyl-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side,
      transparent 0 49.4%,
      rgba(255, 255, 255, 0.05) 50%, transparent 50.8%,
      transparent 63.5%, rgba(0, 0, 0, 0.55) 64%, rgba(255, 255, 255, 0.04) 64.6%, transparent 65.2%,
      transparent 76.5%, rgba(0, 0, 0, 0.55) 77%, rgba(255, 255, 255, 0.04) 77.6%, transparent 78.2%,
      transparent 87.5%, rgba(0, 0, 0, 0.55) 88%, rgba(255, 255, 255, 0.04) 88.6%, transparent 89.2%,
      transparent 96%, rgba(255, 255, 255, 0.07) 96.6%, rgba(0, 0, 0, 0.6) 98%, rgba(255, 255, 255, 0.05) 99.4%, transparent 100%),
    repeating-radial-gradient(circle closest-side,
      rgba(255, 255, 255, 0.035) 0 0.35%,
      rgba(0, 0, 0, 0.25) 0.45% 0.8%,
      rgba(255, 255, 255, 0.015) 0.9% 1.05%),
    conic-gradient(from 0deg, rgba(255, 255, 255, 0.015), transparent 12%, rgba(255, 255, 255, 0.025) 30%, transparent 47%, rgba(255, 255, 255, 0.02) 70%, transparent 88%, rgba(255, 255, 255, 0.015));
  mask-image: radial-gradient(circle closest-side, transparent 0 49%, #000 49.4%);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 49%, #000 49.4%);
}

.vinyl-etching {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vinyl-etching text {
  font-family: var(--font-ui);
  font-size: 1.7px;
  font-weight: 500;
  letter-spacing: 0.55px;
  fill: rgba(227, 201, 147, 0.42);
}

.vinyl-label {
  position: absolute;
  left: 30%;
  top: 30%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  overflow: hidden;
  background: #111;
  box-shadow:
    0 0 0 0.2em rgba(0, 0, 0, 0.6),
    0 0 0 0.45em rgba(227, 201, 147, 0.08);
}

.vinyl-label img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 900ms ease, filter 900ms ease;
}

.vinyl-label img.is-hidden {
  opacity: 0;
  filter: blur(6px);
}

.vinyl-label::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 60%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

.vinyl-sheen {
  position: absolute;
  left: 5em;
  top: 11em;
  width: 78em;
  height: 78em;
  border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(from 205deg,
      transparent 0deg,
      rgba(255, 248, 235, 0.18) 16deg,
      rgba(255, 248, 235, 0.04) 30deg,
      transparent 44deg,
      transparent 180deg,
      rgba(255, 248, 235, 0.12) 196deg,
      rgba(255, 248, 235, 0.03) 210deg,
      transparent 226deg),
    conic-gradient(from 110deg, transparent 0deg, color-mix(in srgb, var(--glow) 22%, transparent) 20deg, transparent 50deg);
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle closest-side, transparent 0 50%, #000 52% 96%, transparent 99%);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 50%, #000 52% 96%, transparent 99%);
}

.spindle {
  position: absolute;
  left: calc(5em + 39em - 1.1em);
  top: calc(11em + 39em - 1.1em);
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8ea, #b6ad9f 40%, #3d3a36 100%);
  box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.7);
}

.tonearm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0.4em 0.9em 0.5em rgba(0, 0, 0, 0.65));
  transition: filter 600ms ease;
}

.turntable.is-lifted .tonearm {
  filter: drop-shadow(1.2em 2.4em 1.2em rgba(0, 0, 0, 0.45));
}

.cue-lever circle {
  transition: transform 500ms var(--ease);
}

.turntable.is-lifted .cue-lever circle {
  transform: translateY(2.2px);
}

.plinth-marquee {
  position: absolute;
  left: 6em;
  right: 23em;
  top: 2.4em;
  height: 6em;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.plinth-marquee > div {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  align-items: center;
  gap: 2.4em;
  white-space: nowrap;
  will-change: transform;
}

.mq-tag {
  font-family: var(--font-ui);
  font-size: max(1.3em, 8px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(243, 237, 226, 0.5);
}

.plinth-marquee em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: max(3.2em, 15px);
  color: var(--gold);
  text-shadow:
    0 0 0.3em rgba(255, 240, 210, 0.45),
    0 0 1em rgba(227, 201, 147, 0.55);
}

.plinth-marquee em.mq-lyric {
  font-size: max(4.2em, 18px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #fff3dc;
  text-shadow:
    0 0 0.25em rgba(255, 240, 210, 0.6),
    0 0 0.9em color-mix(in srgb, var(--glow) 70%, transparent),
    0 0 1.6em rgba(227, 201, 147, 0.45);
}

.mq-note {
  font-size: max(2em, 10px);
  color: var(--gold);
  opacity: 0.7;
  text-shadow: 0 0 0.6em var(--gold);
}

.mq-dot {
  width: max(0.6em, 3px);
  height: max(0.6em, 3px);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0.8em var(--gold);
}

.plinth-buttons {
  position: absolute;
  right: 5.5em;
  bottom: 3.2em;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: max(2em, 8px);
}

.deck-btn {
  height: max(5.4em, 28px);
  border: 1px solid rgba(227, 201, 147, 0.22);
  background: linear-gradient(180deg, #241f26, #0e0c10);
  color: rgba(243, 237, 226, 0.62);
  box-shadow:
    0 0.6em 1.4em rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 245, 230, 0.12);
  transition: color 300ms ease, border-color 300ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.deck-btn:hover {
  color: var(--gold);
  border-color: rgba(227, 201, 147, 0.55);
}

.deck-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 0.2em 0.6em rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 245, 230, 0.08);
}

.deck-start {
  display: flex;
  align-items: center;
  gap: max(1.2em, 6px);
  padding: 0 max(2.2em, 10px);
  border-radius: max(1.2em, 7px);
}

.deck-btn-text {
  font-size: max(1.3em, 8px);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.deck-btn-led {
  width: max(0.9em, 5px);
  height: max(0.9em, 5px);
  border-radius: 50%;
  background: #3a2f26;
  transition: background 400ms ease, box-shadow 400ms ease;
}

.turntable[data-state='playing'] .deck-btn-led,
.turntable[data-state='cueing'] .deck-btn-led {
  background: #ffd79a;
  box-shadow: 0 0 0.8em rgba(255, 200, 120, 0.9);
}

.deck-next {
  width: max(5.4em, 28px);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
}

.deck-next svg {
  width: max(2.2em, 12px);
  height: max(2.2em, 12px);
  fill: currentColor;
}

.plinth-controls {
  position: absolute;
  left: 6em;
  bottom: 3.6em;
  display: flex;
  align-items: center;
  gap: 1.8em;
  font-size: 1.5em;
  letter-spacing: 0.2em;
  color: rgba(243, 237, 226, 0.3);
}

.plinth-controls .speed.is-on {
  color: var(--gold);
}

.led {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #2a2420;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  transition: background 500ms ease, box-shadow 500ms ease;
}

.turntable[data-state='playing'] .led {
  background: #ffd79a;
  box-shadow: 0 0 0.8em rgba(255, 200, 120, 0.9), 0 0 2em rgba(255, 200, 120, 0.4);
}

.turntable[data-state='paused'] .led {
  background: #8a6a3d;
}

.stage-caption {
  display: flex;
  justify-content: space-between;
  padding: 6px 14px 0;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ───────── console ───────── */

.panel-console {
  gap: 0;
}

.deck-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.deck-state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(243, 237, 226, 0.25);
  transition: background 400ms ease, box-shadow 400ms ease;
}

.deck-state.is-live {
  color: var(--gold);
}

.deck-state.is-live::before {
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  animation: pulse 2s ease-in-out infinite;
}

.now {
  margin: 22px 0 10px;
}

.now-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2rem, 2.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 500ms ease, transform 700ms var(--ease), filter 500ms ease;
}

.now-title.is-swapping {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(6px);
}

.now-artist {
  margin: 10px 0 0;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

.now-artist span {
  color: var(--ink-faint);
  margin-left: 8px;
}

.viz {
  position: relative;
  flex: 1;
  min-height: 120px;
  max-height: 260px;
  margin: 6px -22px 0;
}

.viz canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.viz-scale {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 2px;
  display: flex;
  justify-content: space-between;
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  color: rgba(243, 237, 226, 0.26);
}

.seek-block {
  margin-top: 14px;
}

.seek-bar {
  position: relative;
  height: 22px;
  cursor: pointer;
  touch-action: none;
}

.seek-track,
.seek-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
}

.seek-track {
  background: rgba(243, 237, 226, 0.1);
}

.seek-progress {
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(227, 201, 147, 0.2), var(--gold) 70%, #fff3dc);
  box-shadow: 0 0 12px rgba(227, 201, 147, 0.45);
}

.seek-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  translate: -50% -50%;
  background: #fff6e4;
  box-shadow: 0 0 0 4px rgba(227, 201, 147, 0.14), 0 0 18px rgba(227, 201, 147, 0.7);
  transition: scale 200ms ease;
}

.seek-bar:hover .seek-thumb,
.seek-bar.is-dragging .seek-thumb {
  scale: 1.3;
}

.seek-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.transport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 18px 0 6px;
}

.t-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-soft);
  transition: color 300ms ease, background 300ms ease, border-color 300ms ease, transform 300ms var(--ease);
}

.t-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.t-btn:hover {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 245, 230, 0.04);
}

.t-btn:active {
  transform: scale(0.94);
}

.t-play {
  width: 70px;
  height: 70px;
  color: #1a140c;
  background: radial-gradient(circle at 35% 25%, #fff8ea, var(--gold) 55%, var(--gold-deep));
  box-shadow:
    0 0 0 6px rgba(227, 201, 147, 0.07),
    0 14px 40px rgba(227, 201, 147, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.t-play:hover {
  color: #1a140c;
  background: radial-gradient(circle at 35% 25%, #fffaf0, #ecd6a6 55%, var(--gold-deep));
  box-shadow:
    0 0 0 8px rgba(227, 201, 147, 0.1),
    0 18px 50px rgba(227, 201, 147, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.t-play svg {
  width: 26px;
  height: 26px;
}

.t-play .i-pause,
.app.is-playing .t-play .i-play {
  display: none;
}

.app.is-playing .t-play .i-pause {
  display: block;
}

.knobs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.knob {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.knob-dial {
  --v: 0.5;
  position: relative;
  width: 62px;
  height: 62px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  touch-action: none;
  cursor: ns-resize;
}

.knob-dial::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -135deg,
    var(--gold) 0deg,
    #fff3dc calc(var(--v) * 270deg),
    rgba(243, 237, 226, 0.08) calc(var(--v) * 270deg),
    rgba(243, 237, 226, 0.08) 270deg,
    transparent 270deg
  );
  mask: radial-gradient(circle closest-side, transparent 0 86%, #000 88% 98%, transparent 100%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 86%, #000 88% 98%, transparent 100%);
  filter: drop-shadow(0 0 4px rgba(227, 201, 147, 0.5));
}

.knob-cap {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(255, 255, 255, 0.04) 0 2deg, transparent 2deg 6deg),
    radial-gradient(circle at 35% 25%, #3a3439, #17141a 60%, #0c0a0e);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 245, 230, 0.18),
    inset 0 -4px 10px rgba(0, 0, 0, 0.5);
  transform: rotate(calc(-135deg + var(--v) * 270deg));
}

.knob-cap i {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 2px;
  height: 9px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(227, 201, 147, 0.8);
}

.knob-label {
  margin-top: 6px;
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.knob-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ───────── animations ───────── */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(14px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

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

@keyframes eq {
  0%,
  100% {
    transform: scaleY(0.25);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.4;
  }
}

@keyframes shimmer {
  0%,
  100% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0% 0;
  }
}

@keyframes drift-a {
  to {
    transform: translate3d(-8vw, 6vh, 0) scale(1.15);
  }
}

@keyframes drift-b {
  to {
    transform: translate3d(-10vw, -8vh, 0) scale(1.1);
  }
}

@keyframes drift-c {
  to {
    transform: translate3d(8vw, -10vh, 0) scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aura,
  .brand-mark {
    animation: none;
  }
}

/* ───────── responsive ───────── */

@media (max-width: 1180px) {
  body {
    overflow-y: auto;
  }

  .app {
    height: auto;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'stage stage'
      'list console';
  }

  .panel-stage {
    grid-area: stage;
  }

  .panel-list {
    grid-area: list;
    max-height: 640px;
  }

  .panel-console {
    grid-area: console;
  }

  .stage {
    flex: none;
    height: min(78vw, 620px);
  }

  .viz {
    flex: none;
    height: 170px;
  }
}

@media (max-width: 760px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 16px 6px;
  }

  .brand {
    flex-direction: column;
    gap: 6px;
  }

  .brand-mark {
    letter-spacing: 0.32em;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'stage'
      'console'
      'list';
    padding: 4px 16px 24px;
  }

  .panel {
    padding: 18px;
    border-radius: 22px;
  }

  .panel-stage {
    padding: 12px 0 8px;
  }

  .panel-stage .panel-head,
  .stage-caption {
    padding-left: 4px;
    padding-right: 4px;
  }

  .stage {
    height: min(100vw, 520px);
  }

  .smoke {
    inset: -6% -4%;
    width: 108%;
    height: 112%;
  }

  .viz {
    margin: 6px -18px 0;
    height: 140px;
  }

  .panel-list {
    max-height: none;
  }

  .tracklist {
    overflow: visible;
    mask-image: none;
  }

  .t-btn {
    width: 42px;
    height: 42px;
  }

  .t-play {
    width: 64px;
    height: 64px;
  }

  .deck-btn-text {
    display: none;
  }

  .deck-start {
    padding: 0 9px;
  }

  .plinth-buttons {
    right: 4em;
    bottom: 2.6em;
  }
}