{ box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  font-family: system-ui, sans-serif; background: #f2efe9; color: #252525;
}
.card {
  width: min(720px, 92vw); padding: 28px; background: white;  border-radius: 22px; box-shadow: 0 10px 35px #0002;
}
h1 { margin: 10px 0 0; font-size: 32px; }
h2 { margin: 4px 0 20px; font-weight: 500; }
.status { padding: 10px 14px; border-radius: 10px; background: #eee; }
button {
  border: 0; border-radius: 12px; padding: 14px 18px; margin: 5px;
  font-size: 16px; cursor: pointer;

.controls { margin: 20px 0; }
audio { width: 100%; }
#lyrics { margin: 25px 0; font-size: 20px; line-height: 1.55; max-height: 55vh; overflow-y: auto; white-space: pre-wrap; -webkit-overflow-scrolling: touch; }