:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1f2328;
  background: #f6f5f2;
}
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main {
  width: min(360px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #e3e1dc;
  border-radius: 12px;
  padding: 28px 24px;
}
h1 { font-size: 20px; font-weight: 600; margin: 0 0 20px; }
label { display: block; font-size: 13px; color: #57606a; margin: 14px 0 6px; }
input {
  box-sizing: border-box; width: 100%; padding: 10px 12px; font: inherit;
  border: 1px solid #d0cec8; border-radius: 8px; background: #fff;
}
input:focus { outline: 2px solid #3b6fd8; outline-offset: -1px; }
button {
  margin-top: 20px; width: 100%; padding: 10px 12px; font: inherit; font-weight: 600;
  color: #fff; background: #1f2328; border: 0; border-radius: 8px; cursor: pointer;
}
button:disabled { opacity: .6; cursor: default; }
[data-message] { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; color: #b42318; }
nav { margin-top: 18px; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
a { color: #3b6fd8; text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: #57606a; font-size: 14px; }