:root {
  color-scheme: dark;
  --ink: #f7f4ef;
  --muted: #b8bac7;
  --panel: rgba(16, 17, 29, 0.74);
  --panel-strong: rgba(24, 25, 41, 0.9);
  --line: rgba(255, 255, 255, 0.14);
  --red: #ff3d63;
  --cyan: #5bf5ff;
  --gold: #ffd166;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
  --audio-intensity: 0;
  --audio-pulse: 1;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
  scroll-behavior: smooth;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;
}

body {
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  cursor: url('cursor.svg') 2 2, auto;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 61, 99, 0.22), transparent 24rem),
    radial-gradient(circle at 92% 8%, rgba(91, 245, 255, 0.18), transparent 22rem),
    radial-gradient(circle at 50% 50%, rgba(255, 209, 102, 0.05), transparent 34rem),
    radial-gradient(circle at 15% 85%, rgba(138, 43, 226, 0.15), transparent 20rem),
    radial-gradient(circle at 85% 70%, rgba(30, 144, 255, 0.12), transparent 18rem),
    radial-gradient(circle at 35% 35%, rgba(255, 140, 0, 0.08), transparent 16rem),
    radial-gradient(circle at 75% 25%, rgba(255, 20, 147, 0.1), transparent 15rem),
    radial-gradient(circle at 25% 60%, rgba(0, 255, 127, 0.06), transparent 14rem),
    linear-gradient(145deg, #05050a 0%, #0d0e18 30%, #11101a 58%, #07070d 100%);
  background-attachment: fixed;
  color: var(--ink);
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a {
  color: inherit;
  text-decoration: none;
  cursor: url('cursor.svg') 2 2, pointer;
}

button {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: url('cursor.svg') 2 2, pointer;
}

img, svg {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

#galaxy {
  position: fixed;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  will-change: transform;
  transform: translateZ(0);
  pointer-events: none;
}

.scanline {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 100% 5px;
  mix-blend-mode: screen;
  opacity: 0.35;
  will-change: opacity, transform;
  transform: translateZ(0);
}

.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  will-change: transform;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem clamp(1rem, 4vw, 2rem);
  background: linear-gradient(180deg, rgba(5, 5, 10, 0.88), rgba(5, 5, 10, 0.18));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(0);
}

.site-header nav,
.header-actions {
  display: flex;
  align-items: center;
}

.header-actions {
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-toggle {
  display: none;
  appearance: none;
  border: none;
  color: inherit;
  background: transparent;
  font: inherit;
}


.brand > span:last-child::after {
  content: "";
  position: absolute;
  inset: -0.16em -0.2em;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0 1.6px, transparent 2px);
  background-size: 0.5rem 0.5rem;
  opacity: 0.42;
  pointer-events: none;
  mix-blend-mode: screen;
}


.site-header nav {
  gap: clamp(0.7rem, 3vw, 1.8rem);
  color: var(--muted);
  font-size: 0.92rem;
}

.site-header nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 999px;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

.site-header .platform-links {
  margin: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  gap: 0.45rem;
}

.site-header .platform-link {
  min-height: 2.35rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
}

.site-header nav a:active {
  transform: scale(0.97);
}

.hero {
  position: relative;
  min-height: 92svh;
  display: grid;
  place-items: center;
  padding: clamp(7rem, 13vw, 10rem) clamp(1rem, 5vw, 5rem) clamp(3rem, 7vw, 6rem);
  padding-top: calc(clamp(11rem, 20vw, 15rem) + 3rem);
  contain: layout paint;
}

.hero-visual {
  position: absolute;
  top: 14%;
  left: 50%;
  width: min(86vw, 38rem);
  max-width: 38rem;
  height: auto;
  transform: translate(-50%, 0);
  pointer-events: none;
  z-index: 1;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 1rem;
  font-size: clamp(3.7rem, 11vw, 8.8rem);
  line-height: 0.82;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  z-index: 3;
  transform: scale(calc(1 + var(--audio-intensity) * 0.015));
  background: linear-gradient(125deg, #fff8d7 0%, var(--cyan) 28%, #ffffff 54%, var(--red) 84%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 calc(22px + var(--audio-intensity) * 20px) rgba(91, 245, 255, 0.18), 0 0 calc(42px + var(--audio-intensity) * 24px) rgba(255, 61, 99, 0.16);
}

h1::after {
  content: "";
  position: absolute;
  inset: -0.08em -0.12em;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 1.4px, transparent 2px);
  background-size: 0.6rem 0.6rem;
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: screen;
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.96;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 0.35rem;
  font-size: 1.06rem;
}

.hero-content-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 5;
  margin-top: 10rem;
  gap: 1rem;
}

.scroll-indicator {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.2rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.scroll-indicator.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-indicator span {
  display: inline-block;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(91, 245, 255, 0.24);
  animation: scroll-bob 1.3s ease-in-out infinite;
}

@keyframes scroll-bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.78;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

.hero-text {
  max-width: 40rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 2.3vw, 1.45rem);
  line-height: 1.55;
}

.about-cta {
  margin-top: 1.5rem;
}

main section,
.section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s ease;
  will-change: opacity, transform;
}

main section.is-visible,
.section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.button,
.track button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.button {
  padding: 0.85rem 1.25rem;
  font-weight: 800;
}

.button:hover,
.track button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
}

.button.primary {
  background: linear-gradient(135deg, var(--red), var(--gold));
  color: #090911;
  border-color: transparent;
}

.platform-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: 0.68rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  transition: color 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.platform-link:hover {
  color: var(--ink);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.42);
}

.orbital-stage {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: min(34rem, 78vw);
  min-height: clamp(20rem, 34vw, 28rem);
  transform: translate(8%, -56%);
  isolation: isolate;
  z-index: 0;
  opacity: 0.92;
  pointer-events: none;
}

.orbital-stage::before {
  content: "";
  position: absolute;
  width: min(45vw, 33rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 42%, rgba(255, 255, 255, 0.18), transparent 0.5rem),
    radial-gradient(circle, rgba(139, 92, 255, 0.22), transparent 64%);
  filter: blur(2px);
}

.record {
  position: relative;
  width: min(72vw, 25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateZ(0) scale(calc(1 + var(--audio-intensity) * 0.035));
  filter: saturate(calc(0.95 + var(--audio-intensity) * 0.15));
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.86) 0 1.3%, transparent 1.7%),
    radial-gradient(circle at 78% 24%, rgba(91, 245, 255, 0.78) 0 1.1%, transparent 1.7%),
    radial-gradient(circle at 34% 72%, rgba(255, 61, 99, 0.84) 0 1.3%, transparent 1.9%),
    radial-gradient(circle at 74% 72%, rgba(255, 209, 102, 0.58) 0 1%, transparent 1.5%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0 43%, transparent 44%),
    conic-gradient(from 140deg,
      rgba(255, 255, 255, 0.08) 0deg 8deg,
      transparent 8deg 20deg,
      rgba(255, 255, 255, 0.06) 20deg 34deg,
      transparent 34deg 48deg,
      rgba(255, 255, 255, 0.08) 48deg 58deg,
      transparent 58deg 74deg,
      rgba(255, 255, 255, 0.05) 74deg 86deg,
      transparent 86deg 360deg),
    linear-gradient(140deg, #060611 0%, #1b1530 24%, #44203f 44%, #0f1e34 68%, #03040b 100%);
  box-shadow: var(--shadow), inset 0 0 28px rgba(255, 255, 255, 0.14), 0 0 calc(120px + var(--audio-intensity) * 70px) rgba(91, 245, 255, 0.16);
  overflow: hidden;
  isolation: isolate;
  animation: spin 18s linear infinite;
}

.record::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 50%, rgba(91, 245, 255, 0.12) 0 28%, transparent 29%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 9px),
    conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, 0.2) 8% 12%, transparent 12% 24%, rgba(255, 255, 255, 0.13) 24% 28%, transparent 28% 42%, rgba(255, 255, 255, 0.16) 42% 46%, transparent 46% 62%, rgba(255, 255, 255, 0.12) 62% 66%, transparent 66% 100%);
  transform: rotate(-18deg);
  opacity: 0.82;
  mix-blend-mode: screen;
}

.record::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.04), 0 0 24px rgba(91, 245, 255, 0.2);
}

.record-core {
  position: absolute;
  inset: 36%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff6d6, var(--gold) 18%, #2a1528 19%, #090911 74%);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.14), 0 0 24px rgba(255, 61, 99, 0.22);
  color: var(--ink);
  font-size: clamp(1.7rem, 5vw, 3rem);
  font-weight: 900;
  animation: counterSpin 18s linear infinite;
}

.record::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 50%, rgba(91, 245, 255, 0.12) 0 28%, transparent 29%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 9px),
    conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, 0.2) 8% 12%, transparent 12% 24%, rgba(255, 255, 255, 0.13) 24% 28%, transparent 28% 42%, rgba(255, 255, 255, 0.16) 42% 46%, transparent 46% 62%, rgba(255, 255, 255, 0.12) 62% 66%, transparent 66% 100%);
  transform: rotate(-18deg);
  opacity: 0.82;
  mix-blend-mode: screen;
}

.record::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.04), 0 0 24px rgba(91, 245, 255, 0.2);
}

.record-core {
  position: absolute;
  inset: 36%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff6d6, var(--gold) 18%, #2a1528 19%, #090911 74%);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.14), 0 0 24px rgba(255, 61, 99, 0.22);
  color: var(--ink);
  font-size: clamp(1.7rem, 5vw, 3rem);
  font-weight: 900;
  animation: counterSpin 18s linear infinite;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(91, 245, 255, 0.32);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.orbit-one {
  width: min(78vw, 31rem);
  aspect-ratio: 1 / 0.38;
}

.orbit-two {
  width: min(68vw, 27rem);
  aspect-ratio: 1 / 0.45;
  border-color: rgba(255, 61, 99, 0.3);
  transform: rotate(26deg);
}

.orbit-three {
  width: min(60vw, 23rem);
  aspect-ratio: 1 / 0.52;
  border-color: rgba(255, 209, 102, 0.32);
  transform: rotate(68deg);
}

.meteor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.45rem;
  aspect-ratio: 1;
  border-radius: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(var(--orbit-start, 0deg)) translateX(var(--orbit-radius, 11rem)) scaleY(var(--orbit-scale, 0.45));
  animation: orbit var(--orbit-duration, 10s) linear infinite;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
  transition: transform 180ms ease;
  will-change: transform;
  z-index: 1;
}

.meteor-one {
  --orbit-radius: calc(min(78vw, 31rem) / 2);
  --orbit-scale: 0.38;
  --orbit-duration: 8.5s;
  --orbit-start: 50deg;
  background: var(--cyan);
  box-shadow: -2.5rem 0 1.5rem rgba(91, 245, 255, 0.55), 0 0 22px var(--cyan);
}

.meteor-two {
  --orbit-radius: calc(min(68vw, 27rem) / 2);
  --orbit-scale: 0.45;
  --orbit-duration: 12s;
  animation-direction: reverse;
  animation-delay: -2.4s;
  --orbit-start: 170deg;
  background: var(--red);
  box-shadow: -2.5rem 0 1.5rem rgba(255, 61, 99, 0.55), 0 0 22px var(--red);
}

.meteor-three {
  --orbit-radius: calc(min(60vw, 23rem) / 2);
  --orbit-scale: 0.52;
  --orbit-duration: 10.5s;
  animation-direction: normal;
  animation-delay: -1s;
  --orbit-start: 290deg;
  background: var(--gold);
  box-shadow: -2.5rem 0 1.5rem rgba(255, 209, 102, 0.55), 0 0 22px var(--gold);
}

@keyframes orbit {
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--orbit-start, 0deg) + 360deg)) translateX(var(--orbit-radius, 11rem)) scaleY(var(--orbit-scale, 0.45));
  }
}

.section {
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem);
}

.section-heading {
  max-width: 52rem;
  margin-bottom: 2rem;
}

.music-section {
  position: relative;
  overflow: hidden;
}

.music-section .section-heading,
.music-section .track-list {
  position: relative;
  z-index: 1;
}

.music-section .section-heading {
  padding: 1.2rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(7, 10, 19, 0.86), rgba(28, 24, 44, 0.64));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 18px 50px rgba(0, 0, 0, 0.22);
}

.glow-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.glow-card > * {
  position: relative;
  z-index: 1;
}

.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms ease;
}

.glow-card:hover::before,
.glow-card.is-hovered::before {
  opacity: 1;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(91, 245, 255, 0.24) 0%, rgba(255, 61, 99, 0.16) 28%, transparent 64%);
  transform: scale(1.01);
}

.music-section .section-heading h2 {
  background: linear-gradient(120deg, #fff8d7 0%, var(--cyan) 35%, #ffffff 60%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(91, 245, 255, 0.16), 0 0 32px rgba(255, 61, 99, 0.14);
}

.music-section .track {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(8, 10, 20, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 16px 40px rgba(0, 0, 0, 0.25);
}

.music-section .track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: transparent;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms ease;
}

.music-section .track:hover::before,
.music-section .track.is-hovered::before {
  opacity: 1;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(91, 245, 255, 0.28) 0%, rgba(255, 61, 99, 0.16) 28%, transparent 64%);
  transform: scale(1.01);
}

.music-section .track:hover,
.music-section .track.is-hovered {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 48px rgba(91, 245, 255, 0.12);
}

.music-section .track-number {
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(91, 245, 255, 0.24);
}

.music-section .track button {
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.06), 0 0 12px rgba(91, 245, 255, 0.08);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.9fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  width: 100%;
  position: relative;
}

.about-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: transparent;
  z-index: 0;
  pointer-events: none;
}

.about-grid > * {
  position: relative;
  z-index: 1;
}

.about-image-wrapper {
  position: relative;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(8, 10, 20, 0.74));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.24);
  z-index: 1;
  max-width: 50%;
  margin: 0 auto;
}

.about-image-wrapper::before {
  content: "";
  position: absolute;
  inset: -0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(91, 245, 255, 0.14), transparent 70%);
  z-index: -1;
  pointer-events: none;
  filter: blur(14px);
}

.about-grid .section-heading h2,
.about-grid .signal-panel h2 {
  background: linear-gradient(120deg, #fff8d7 0%, var(--cyan) 35%, #ffffff 60%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(91, 245, 255, 0.16), 0 0 28px rgba(255, 61, 99, 0.14);
}

.about-grid .signal-panel {
  border-left: 3px solid var(--red);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  filter: contrast(1.1) brightness(0.95);
  -webkit-user-select: none;
  user-select: none;
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  touch-action: pan-y;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.track-list,
.data-grid {
  display: grid;
  gap: 0.8rem;
}

.track {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.track > * {
  position: relative;
  z-index: 1;
}

.track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(91, 245, 255, 0.18), rgba(255, 61, 99, 0.12));
  opacity: 0;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.track.is-playing::after {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 30px rgba(91, 245, 255, 0.24), 0 0 50px rgba(255, 61, 99, 0.18);
}

.track-number,
.track p,
.data-grid span,
.signal-panel p {
  color: var(--muted);
}

.track-number {
  font-weight: 900;
}

.track h3 {
  transition: color 180ms ease, text-shadow 180ms ease;
}

.track.is-playing h3 {
  color: var(--ink);
  text-shadow: 0 0 10px rgba(91, 245, 255, 0.35), 0 0 18px rgba(255, 61, 99, 0.2);
}

.track p {
  margin-bottom: 0;
}

.track button {
  width: 2.9rem;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

.track button:disabled {
  cursor: not-allowed;
  opacity: 0.32;
  transform: none;
}

.track button::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.42rem solid transparent;
  border-bottom: 0.42rem solid transparent;
  border-left: 0.66rem solid currentColor;
  transform: translateX(0.08rem);
}

.track button[data-active="true"]::before {
  content: "";
  width: 0.72rem;
  height: 0.72rem;
  border: 0;
  background: currentColor;
  transform: none;
}

.track button:disabled::before {
  width: 0.8rem;
  height: 0.12rem;
  border: 0;
  background: currentColor;
  transform: none;
}

.signal-section {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 1fr);
  gap: clamp(1rem, 5vw, 4rem);
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

.signal-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: transparent;
  z-index: 0;
  pointer-events: none;
}

.signal-panel,
.data-grid {
  position: relative;
  z-index: 1;
}

.signal-panel {
  padding: clamp(1.2rem, 4vw, 2.5rem);
  border-left: 3px solid var(--red);
  background: transparent;
  box-shadow: none;
}

.signal-panel h2 {
  background: linear-gradient(120deg, #fff8d7 0%, var(--cyan) 35%, #ffffff 60%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(91, 245, 255, 0.16), 0 0 28px rgba(255, 61, 99, 0.14);
}

.signal-panel p {
  font-size: 1.05rem;
  line-height: 1.7;
}

.data-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-grid div {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(8, 10, 20, 0.72));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 14px 30px rgba(0, 0, 0, 0.2);
}

.data-grid span,
.data-grid strong {
  display: block;
}

.data-grid span {
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
}

.data-grid strong {
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
}

.site-footer {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(5, 5, 10, 0.18), rgba(5, 5, 10, 0.88));
  backdrop-filter: blur(16px);
}

@keyframes spin {
  from {
    transform: scale(calc(1 + var(--audio-intensity) * 0.035)) rotate(0deg);
  }

  to {
    transform: scale(calc(1 + var(--audio-intensity) * 0.035)) rotate(360deg);
  }
}

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


@media (max-width: 860px) {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    align-items: flex-start;
  }

  .site-header nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .hero,
  .signal-section,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: calc(12.5rem + 2.5rem);
  }

  .hero-visual {
    width: min(90vw, 26rem);
    max-width: 26rem;
    opacity: 0.95;
  }

  .orbital-stage {
    min-height: 22rem;
    order: -1;
    margin-top: 1rem;
  }

  .about-image-wrapper {
    max-width: 100%;
    margin: 0;
    padding: 0.5rem;
  }
}

@media (max-width: 560px) {
  .site-header {
    gap: 0.8rem;
    flex-direction: column;
    align-items: stretch;
    padding: 0.9rem 0.9rem 1rem;
  }

  .site-header.is-open {
    background: linear-gradient(180deg, rgba(5, 5, 10, 0.96), rgba(5, 5, 10, 0.92));
  }

  .header-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.85rem;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background 180ms ease, transform 180ms ease;
  }

  .header-toggle:hover,
  .header-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.12);
  }

  .header-actions {
    display: none;
    width: 100%;
    gap: 0.75rem;
  }

  .site-header.is-open .header-actions {
    display: flex;
    flex-direction: column;
  }

  .brand {
    justify-content: center;
    font-size: 0.95rem;
  }

  .site-header nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    justify-content: flex-start;
    font-size: 0.86rem;
  }

  .site-header nav a {
    width: 100%;
    min-height: 2.95rem;
    padding: 0.75rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
  }

  .site-header .platform-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.6rem;
  }

  .site-header .platform-link {
    width: 100%;
    padding: 0.75rem 0.65rem;
    font-size: 0.82rem;
  }

  .hero {
    padding-top: calc(9.5rem + 3rem);
  }

  .hero-content-stack {
    margin-top: 7rem;
  }

  .hero-content-stack .eyebrow,
  .hero-content-stack .hero-text {
    color: #fdf8f0;
    text-shadow: 0 0 16px rgba(91, 245, 255, 0.22), 0 0 28px rgba(255, 61, 99, 0.18);
  }

  .hero-content-stack h1 {
    text-shadow: 0 0 24px rgba(91, 245, 255, 0.3), 0 0 40px rgba(255, 61, 99, 0.24);
  }

  .track {
    grid-template-columns: auto 1fr;
  }

  .track button {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: auto;
  }

  .data-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}