:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  background: #f4f6f8;
  color: #17212b;
}

main { max-width: 40rem; margin: 2rem auto; padding: 1.5rem; background: white; border-radius: 1rem; }
h1 { margin-top: 0; font-size: 1.65rem; }
h2 { font-size: 1.25rem; }
p, li { line-height: 1.55; }
label, audio { display: block; margin: .6rem 0; }
audio { width: 100%; }
button, input, select { font: inherit; min-height: 2.75rem; border: 1px solid #7c8995; border-radius: .5rem; padding: .35rem .65rem; }
button { background: #eef4fa; color: inherit; cursor: pointer; }
button:disabled { cursor: default; color: #606b75; background: #f4f4f4; }
input, select { max-width: 100%; box-sizing: border-box; }
a { color: #124c86; }
[hidden] { display: none !important; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }