:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0c0c0d;
  color: #f4f4f4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top, #29292b, #0c0c0d 58%);
}

main {
  width: min(92vw, 1180px);
  padding: 7vh 4vw;
}

.track-meta {
  margin: 0 0 6vh;
}

.track-title {
  font-size: clamp(2.2rem, 5.2vw, 5.4rem);
  letter-spacing: -.045em;
  line-height: 1.04;
  margin: 0;
}

.track-artist,
.track-album {
  line-height: 1.25;
  margin: .55rem 0 0;
}

.track-artist {
  color: #d0d0d2;
  font-size: clamp(1.25rem, 2.7vw, 2.2rem);
}

.track-album {
  color: #99999c;
  font-size: clamp(1rem, 2.1vw, 1.65rem);
}

.eyebrow {
  color: #9b9b9e;
  font-size: clamp(.8rem, 1.4vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .2em;
  margin: 0 0 4vh;
}

.status {
  color: #c2c2c4;
  font-size: clamp(1rem, 2vw, 1.5rem);
  margin: 0 0 1.5vh;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 6rem);
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 0;
}

.artist {
  color: #c2c2c4;
  font-size: clamp(1.25rem, 3vw, 2.4rem);
  margin: 2vh 0 8vh;
}

.lyrics {
  border-left: 4px solid #858588;
  color: #cacacc;
  font-size: clamp(1.35rem, 3.4vw, 3rem);
  line-height: 1.55;
  padding-left: 1.2rem;
  scroll-margin-block: 30vh;
}

.muted { margin: 0; }

.lyrics-note {
  color: #a5a5a8;
  font-size: .52em;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 1em;
  text-transform: uppercase;
}

.line {
  margin: .55em 0;
  opacity: .42;
  transition: opacity .2s ease, color .2s ease, transform .2s ease;
}

.line.current {
  color: #fff;
  opacity: 1;
  transform: scale(1.025);
  transform-origin: left center;
}

.line.plain {
  opacity: .92;
}

.lyric-actions {
  margin: 3rem 0 0 1.2rem;
  max-width: 62rem;
}

.lyric-button,
.lyric-choice {
  appearance: none;
  background: transparent;
  border: 1px solid #77777a;
  border-radius: .65rem;
  color: #e4e4e5;
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: clamp(.95rem, 1.8vw, 1.3rem);
  margin: .7rem 0;
  padding: .75rem 1rem;
  text-align: left;
}

.lyric-button:hover,
.lyric-choice:hover,
.lyric-button:focus-visible,
.lyric-choice:focus-visible {
  background: #303033;
  border-color: #d0d0d2;
}

.choice-message {
  color: #c2c2c4;
  font-size: clamp(.9rem, 1.7vw, 1.25rem);
  margin: 0 0 1rem;
}

/* Tesla Browser can expose the vehicle display preference through this
   standard browser media query. No vehicle data or command permission is
   required, and a theme change is applied by CSS without reloading lyrics. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    background: #f4f6f8;
    color: #14171c;
  }

  body {
    background: radial-gradient(circle at top, #ffffff, #e6ebf1 58%);
  }

  .eyebrow { color: #52647a; }
  .status, .artist, .choice-message { color: #4d6179; }

  .track-artist { color: #40546d; }
  .track-album { color: #687b91; }

  .lyrics {
    border-color: #667e9e;
    color: #536274;
  }

  .lyrics-note { color: #52647a; }

  .line.current { color: #101419; }

  .lyric-button,
  .lyric-choice {
    background: rgba(255, 255, 255, .62);
    border-color: #7187a3;
    color: #20344e;
  }

  .lyric-button:hover,
  .lyric-choice:hover,
  .lyric-button:focus-visible,
  .lyric-choice:focus-visible {
    background: #dce7f3;
    border-color: #405d80;
  }
}