:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #eaf6fd;
  color: #0b2a3c;
}
main { max-width: 32rem; padding: 2rem 1.5rem; }
h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); margin: 0 0 .5rem; letter-spacing: -.02em; }
.lead { font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem; }
form { margin-top: 1.5rem; display: grid; gap: .6rem; }
label { font-weight: 600; }
input, button { font: inherit; padding: .7rem .9rem; border-radius: .5rem; border: 1px solid #7fb4d1; }
button { background: #0a6ea8; color: #fff; border-color: #0a6ea8; cursor: pointer; }
button:hover { background: #085a8a; }
button:disabled { opacity: .6; cursor: progress; }
#status { min-height: 1.4em; margin: 0; }
@media (prefers-color-scheme: dark) {
  body { background: #0b1f2c; color: #e6f3fb; }
  input { background: #12303f; color: inherit; border-color: #2c5b75; }
}