:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #17130f;
  color: #f2e7d4;
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 80% 15%, #794b2738, transparent 30rem),
    linear-gradient(135deg, #17130f, #211a14 60%, #15120f);
}
main { width: min(880px, calc(100% - 40px)); }
.eyebrow, .label, .status, .volume { letter-spacing: .18em; font-size: .68rem; }
.eyebrow { color: #b99872; margin-bottom: 1.5rem; }
h1 { font-family: Georgia, serif; font-size: clamp(4.2rem, 12vw, 8rem); font-weight: 400; line-height: .78; margin: 0 0 3.5rem; letter-spacing: -.06em; }
h1 em { color: #c8884b; font-weight: 400; }
.player { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 1.4rem; border: 1px solid #70573c; background: #221b14dd; box-shadow: 0 24px 90px #0008; }
button { width: 62px; height: 62px; border: 1px solid #d5a873; border-radius: 50%; color: #17130f; background: #d5a873; font-size: 1.25rem; cursor: pointer; }
button:hover { background: #edc18d; }
.track p { margin: 0; }
.label { color: #a78463; margin-bottom: .4rem !important; }
#title { font-family: Georgia, serif; font-size: clamp(1.2rem, 3vw, 1.7rem); }
#category { color: #ac9a85; font-size: .85rem; margin-top: .3rem !important; }
.volume { display: grid; gap: .5rem; color: #a78463; }
input { accent-color: #c8884b; width: 110px; }
.status { color: #a78463; margin-top: 1.4rem; display: flex; gap: .6rem; align-items: center; }
#dot { width: 7px; height: 7px; border-radius: 50%; background: #c8884b; box-shadow: 0 0 12px #c8884b; }
@media (max-width: 600px) {
  .player { grid-template-columns: auto 1fr; }
  .volume { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; }
  input { width: 100%; }
}