:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #F2EFE7; }
body {
  display: flex; align-items: center; justify-content: center; padding: 24px;
  color: #16150F; font-family: 'Space Grotesk', sans-serif;
}
.card {
  width: 100%; max-width: 360px; border: 2px solid #16150F; background: #FBFAF6;
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
}
.kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #8A857A;
}
h1 { margin: 6px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8A857A;
}
input {
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; padding: 10px 12px;
  border: 2px solid #16150F; background: #F2EFE7; color: #16150F;
}
input:focus { outline: 2px solid #1F6F53; outline-offset: 1px; }
button {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; border: 2px solid #16150F; background: #16150F;
  color: #F2EFE7; padding: 12px; cursor: pointer;
}
button:hover { background: #1F6F53; border-color: #1F6F53; }
.error {
  border: 2px solid #B4531F; background: #FAF2EC; color: #B4531F;
  padding: 10px 12px; font-size: 13px; font-family: 'IBM Plex Mono', monospace;
}