:root {
  color-scheme: light dark;
  --bg: #f4f4f2;
  --ink: #1d1d1b;
  --line: #a9a9a3;
  --focus: #1d1d1b;
  --muted: #8a8a85;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616;
    --ink: #ecece8;
    --line: #5a5a55;
    --focus: #ecece8;
    --muted: #8a8a85;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", system-ui, sans-serif;
}
form {
  width: min(280px, calc(100vw - 32px));
  margin-bottom: 12vh;
}
input {
  display: block;
  width: 100%;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  /* 16px keeps iOS Safari from zooming into the field on focus. */
  font: 16px/1.4 inherit;
  letter-spacing: 0.2em;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
}
input:focus { border-bottom-color: var(--focus); }
input:disabled { opacity: 0.5; }
p {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}