:root {
  color-scheme: light;
  font-family: Inter, system-ui, sans-serif;
  background: #faf6f2;
  color: #352b3c;
}
body { margin: 0; padding: clamp(1rem, 8vw, 5rem) 1rem; }
main {
  max-width: 32rem;
  margin: auto;
  padding: clamp(1.25rem, 6vw, 3rem);
  border: 1px solid #e6dce5;
  border-radius: 1.5rem;
  background: #fffdfb;
}
a { color: #7b365e; }
h1 { font-size: clamp(2rem, 8vw, 3.5rem); margin: 0 0 1.5rem; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { margin-bottom: .75rem; color: #65566d; }
.music { margin-bottom: 1.25rem; }
.music button {
  width: 100%;
  text-align: left;
  background: #fbeaf0;
  border-color: #aa718a;
}
.music button span { display: block; margin-top: .3rem; font-size: .875rem; }
button {
  background: #f2edf8;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border: 1px solid #927da4;
  border-radius: .6rem;
  padding: .75rem 1rem;
  margin: 0 .35rem .35rem 0;
}
button[aria-pressed="true"] { background: #e3d5f5; border-color: #684884; color: #352049; }
.music button[aria-pressed="true"] { background: #f5cbdc; border-color: #923e65; color: #542039; }
:focus-visible { outline: 2px solid #74518e; outline-offset: 4px; }
audio { width: 100%; margin-bottom: 1.25rem; }
a { display: inline-block; }