:root {
  color-scheme: dark;
  font: 100% system-ui, sans-serif;
  --ink: #edf7f4;
  --muted: #adbfbc;
  --mint: #99d6b8;
  --deep: #05131f;
  --edge: #2a4147;
  background: #10191f;
  color: var(--ink);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  padding: clamp(2rem, 7vw, 5.5rem) 1.25rem 3rem;
  background: radial-gradient(ellipse at 48% 0%, #203b3c, transparent 44rem);
}

main { width: min(100%, 44rem); margin-inline: auto; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mint);
  font-size: 0.72rem;
  font-weight: 700;
  margin: 0;
}

h1 {
  font: 650 clamp(2.6rem, 8vw, 5rem)/1.02 system-ui, sans-serif;
  letter-spacing: -0.065em;
  margin: 0.3em 0 0.23em;
}

h2 { font-size: 1.5rem; letter-spacing: -0.035em; margin: 0.35em 0; }
.intro { color: var(--muted); line-height: 1.6; max-width: 54ch; margin: 0.6rem 0 1.2rem; }

.download, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid var(--edge);
  border-radius: 100vw;
  background: #1b2c33;
  color: inherit;
  padding: 0.65rem 1rem;
  min-height: 44px;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.download, #play { background: var(--mint); color: var(--deep); border-color: transparent; font-weight: 650; }
.download:hover, button:hover:not(:disabled) { filter: brightness(1.14); }
.download:focus-visible, button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
button:disabled { opacity: 0.65; cursor: wait; }
.requirements, #status { color: var(--muted); font-size: 0.85rem; }

.listening {
  margin-top: 2rem;
  padding: clamp(1rem, 4vw, 1.5rem);
  border: 1px solid var(--edge);
  border-radius: 1.25rem;
  background: #15242c;
}

.artwork {
  height: clamp(6.5rem, 24vw, 10rem);
  border: 1px solid var(--edge);
  border-radius: 0.85rem;
  overflow: hidden;
  margin: 1.1rem 0;
  background: radial-gradient(ellipse at center, #142c35, var(--deep) 85%);
}

svg { display: block; width: 100%; height: 100%; stroke: var(--mint); }
path { opacity: 0.32; vector-effect: non-scaling-stroke; }
path:nth-child(2) { opacity: 0.62; }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; }
#play { min-width: 5.5rem; }
#status { margin-inline-start: 0.3rem; }

.about { margin-top: 2rem; }
.about ul { padding-inline-start: 1.2rem; color: var(--muted); line-height: 1.55; }
.about li { margin-bottom: 0.55rem; }
.about li::marker, .about strong { color: var(--mint); }