:root {
  color-scheme: dark;
  --background: #07080b;
  --surface: #0a0b0ff2;
  --flagrant-red: #ff4300;
  --male: #79d6ff;
  --female: #d8a1ff;
  --both-pink: #ff91c9;
  --text: #ffffff;
  --muted: #aeb0b8;
  --track: #393b42;
  --player-height: 168px;
  --system-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--background);
}

body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--text);
  font-family: var(--system-font);
  -webkit-font-smoothing: antialiased;
}

button,
input { -webkit-tap-highlight-color: transparent; }

button {
  cursor: pointer;
  font: inherit;
}

button:disabled {
  cursor: wait;
  opacity: .4;
}

button:focus-visible,
input:focus-visible,
.downloads-row a:focus-visible {
  outline: 2px solid var(--flagrant-red);
  outline-offset: 5px;
}

.symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.atmosphere {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.atmosphere::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, #07080b 84%);
  content: "";
}

.voice-glow {
  position: absolute;
  top: -34vh;
  width: min(78vw, 1050px);
  height: min(78vw, 1050px);
  border-radius: 50%;
  filter: blur(46px);
  opacity: .14;
  transition: opacity .7s ease;
}

.voice-glow-male {
  left: -28vw;
  background: radial-gradient(circle, #2eabff 0, #174b8a88 34%, transparent 68%);
}

.voice-glow-female {
  right: -28vw;
  background: radial-gradient(circle, #d65bff 0, #7c286e78 34%, transparent 68%);
}

body[data-speaker="male"] .voice-glow-male,
body[data-speaker="female"] .voice-glow-female,
body[data-speaker="both"] .voice-glow { opacity: .22; }

body[data-speaker="male"] .voice-glow-female,
body[data-speaker="female"] .voice-glow-male { opacity: .065; }

.duet-mark {
  position: absolute;
  z-index: 1;
  top: clamp(23px, 4.6vh, 48px);
  left: 50%;
  width: clamp(82px, 8vw, 112px);
  transform: translateX(-50%);
  opacity: .78;
}

.duet-mark svg {
  display: block;
  width: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.mark-male {
  stroke: var(--male);
  filter: drop-shadow(0 0 7px #79d6ff70);
}

.mark-female {
  stroke: var(--female);
  filter: drop-shadow(0 0 7px #d8a1ff70);
}

.stage {
  position: relative;
  display: grid;
  min-height: calc(100svh - var(--player-height));
  padding: clamp(88px, 14vh, 138px) clamp(24px, 7vw, 128px) 66px;
  place-items: center;
}

.intro,
#lyric { grid-area: 1 / 1; }

.intro {
  position: relative;
  z-index: 1;
  width: min(100%, 1040px);
  margin: 0;
  visibility: hidden;
  opacity: 0;
  text-align: center;
}

.intro.is-visible { visibility: visible; }

.eyebrow {
  margin: 0 0 16px;
  color: #c6c8cf;
  font-size: clamp(.72rem, .85vw, .84rem);
  font-weight: 560;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.intro h1 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 7.3rem);
  font-weight: 660;
  letter-spacing: -.06em;
  line-height: .96;
  text-wrap: balance;
}

.voice-key {
  display: flex;
  margin-top: clamp(28px, 5vh, 48px);
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 36px);
  color: #b9bbc3;
  font-size: clamp(.7rem, .82vw, .82rem);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.voice-key span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-key i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.male-swatch {
  background: var(--male);
  box-shadow: 0 0 9px #79d6ff9c;
}

.female-swatch {
  background: var(--female);
  box-shadow: 0 0 9px #d8a1ff9c;
}

.both-swatch {
  background: linear-gradient(90deg, var(--male), var(--both-pink));
  box-shadow: -3px 0 8px #79d6ff70, 3px 0 8px #ff91c970;
}

#lyric {
  position: relative;
  z-index: 1;
  width: min(100%, 1380px);
  margin: 0;
  opacity: 0;
  color: var(--text);
  font-size: clamp(2.05rem, 4.75vw, 5.15rem);
  font-weight: 560;
  letter-spacing: -.04em;
  line-height: 1.17;
  overflow-wrap: anywhere;
  text-align: center;
  text-wrap: balance;
  will-change: opacity, transform, filter;
}

.lyric-visual {
  white-space: pre-wrap;
}

.lyric-word {
  --word-unfilled: 100%;
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: var(--text);
  overflow-wrap: anywhere;
  vertical-align: baseline;
}

.lyric-word::after {
  position: absolute;
  inset: 0;
  content: attr(data-word);
  clip-path: inset(0 var(--word-unfilled) 0 0);
  pointer-events: none;
  will-change: clip-path;
}

#lyric[data-speaker="male"] .lyric-word::after {
  color: var(--male);
  text-shadow: 0 0 16px #79d6ff42, 0 0 36px #168fd12b;
}

#lyric[data-speaker="female"] .lyric-word::after {
  color: var(--female);
  text-shadow: 0 0 16px #d8a1ff42, 0 0 36px #bd54ff2b;
}

#lyric[data-speaker="both"] .lyric-word::after {
  color: transparent;
  background: linear-gradient(92deg, var(--male) 5%, #bfaeff 49%, var(--both-pink) 95%);
  background-clip: text;
  filter: drop-shadow(0 0 11px #ad8dff45);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.player {
  position: fixed;
  z-index: 3;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: var(--player-height);
  padding: 21px clamp(20px, 5vw, 80px) calc(17px + env(safe-area-inset-bottom));
  border-top: 1px solid #ffffff14;
  background: var(--surface);
  box-shadow: 0 -20px 60px #0008;
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
}

.progress-row {
  display: flex;
  max-width: 1420px;
  margin: 0 auto 13px;
  align-items: center;
  gap: 19px;
}

.time {
  min-width: 36px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .045em;
}

.time:last-child { text-align: right; }

.range {
  --fill: 0%;
  appearance: none;
  -webkit-appearance: none;
  height: 24px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--flagrant-red) 0 var(--fill), var(--track) var(--fill) 100%);
}

.range::-moz-range-track {
  height: 3px;
  border-radius: 4px;
  background: var(--track);
}

.range::-moz-range-progress {
  height: 3px;
  border-radius: 4px;
  background: var(--flagrant-red);
}

.range::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 50%;
  background: var(--flagrant-red);
  box-shadow: 0 0 0 4px #ff43001f, 0 0 14px #ff430088;
}

.range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--flagrant-red);
  box-shadow: 0 0 14px #ff430088;
}

.seek {
  flex: 1;
  min-width: 0;
}

.volume {
  width: 74px;
  --fill: 100%;
}

.controls-row {
  display: grid;
  max-width: 1420px;
  margin: auto;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.player-state {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .075em;
  text-transform: uppercase;
}

#state {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.state-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #8e8e8e;
}

body.playing .state-dot {
  background: var(--flagrant-red);
  box-shadow: 0 0 12px #ff4300bb;
}

.transport {
  display: flex;
  align-items: center;
  gap: 22px;
}

.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 8px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #e8e8e8;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.icon-button:hover {
  color: var(--text);
  background: #ffffff10;
}

.icon-button:active { transform: scale(.93); }

.icon-button[aria-pressed="true"] {
  color: var(--flagrant-red);
  background: #ff430021;
  box-shadow: inset 0 0 0 1px #ff43002b;
}

button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.play-button {
  display: grid;
  width: 56px;
  height: 56px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--flagrant-red);
  border-radius: 50%;
  background: var(--flagrant-red);
  color: #170500;
  box-shadow: 0 0 24px #ff430052;
  transition: transform .2s ease, box-shadow .2s ease;
}

.play-button svg {
  width: 24px;
  height: 24px;
}

.play-button:hover {
  transform: scale(1.055);
  box-shadow: 0 0 34px #ff430080;
}

.play-button:active { transform: scale(.96); }

.extras {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 12px;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 5px;
}

.downloads-row {
  display: flex;
  margin-top: 8px;
  justify-content: center;
}

.downloads-row a {
  color: #c7c7c7;
  font-size: 11px;
  letter-spacing: .025em;
  text-decoration-color: #ff430080;
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.downloads-row a:hover {
  color: var(--text);
  text-decoration-color: var(--flagrant-red);
}

#audio { display: none; }

@media (max-width: 700px) {
  :root { --player-height: 165px; }

  .stage {
    min-height: calc(100svh - var(--player-height) - env(safe-area-inset-bottom));
    padding: 76px 22px 56px;
  }

  #lyric {
    font-size: clamp(1.72rem, 7.75vw, 2.8rem);
    line-height: 1.19;
    letter-spacing: -.034em;
  }

  .intro h1 { font-size: clamp(2.7rem, 14vw, 4.25rem); }
  .eyebrow { margin-bottom: 12px; font-size: .67rem; }
  .voice-key { margin-top: 28px; gap: 17px; font-size: .62rem; }
  .voice-key span { gap: 6px; }
  .duet-mark { top: 21px; width: 77px; }
  .voice-glow { top: -16vh; width: 105vw; height: 105vw; }
  .voice-glow-male { left: -68vw; }
  .voice-glow-female { right: -68vw; }
  .player { padding: 16px 18px calc(14px + env(safe-area-inset-bottom)); }
  .progress-row { margin-bottom: 10px; gap: 12px; }
  .controls-row { gap: 4px; }
  .player-state { gap: 6px; font-size: 9px; letter-spacing: .035em; }
  .transport { gap: 6px; }
  .extras { gap: 0; }
  .volume { display: none; }
  .icon-button { width: 35px; height: 40px; padding: 6px; }
  .play-button { width: 51px; height: 51px; }
  .downloads-row { margin-top: 6px; }
  .downloads-row a { font-size: 10px; }
}

@media (max-width: 350px) {
  #lyric { font-size: 1.58rem; }
  .player-state { max-width: 63px; letter-spacing: 0; }
  .transport { gap: 2px; }
  .extras .icon-button { width: 31px; }
  .voice-key { gap: 11px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root { --player-height: 124px; }
  .stage { padding: 42px 8vw 25px; }
  #lyric { font-size: clamp(1.38rem, 5.7vh, 2.35rem); line-height: 1.14; }
  .intro h1 { font-size: clamp(2rem, 12vh, 3.25rem); }
  .eyebrow { margin-bottom: 6px; font-size: .58rem; }
  .voice-key { margin-top: 13px; font-size: .57rem; }
  .duet-mark { top: 8px; width: 60px; }
  .player { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .progress-row { margin-bottom: 0; }
  .play-button { width: 42px; height: 42px; }
  .icon-button { height: 36px; }
  .downloads-row { margin-top: 1px; }
  .downloads-row a { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-glow,
  button { transition: none !important; }
}