:root { color-scheme: dark; --floor: #161a1f; --plate: #1f252c; --rule: #313a45; --chalk: #eef0ea; --chalk-2: #b3bac2; --critical: #e2685a; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--floor); color: var(--chalk);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 22rem; margin: 0 auto; padding: max(18vh, env(safe-area-inset-top)) 1.25rem 2rem; }
h1 { font-size: 2rem; font-weight: 750; letter-spacing: -0.01em; margin: 0 0 1.5rem; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .4rem; font-size: .875rem; color: var(--chalk-2); }
input { font: inherit; font-size: 1.0625rem; color: var(--chalk); background: var(--plate); border: 1px solid var(--rule);
  border-radius: 10px; padding: .8rem .9rem; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
button { font: inherit; font-weight: 650; color: var(--floor); background: var(--chalk); border: 0; border-radius: 10px;
  padding: .85rem 1rem; cursor: pointer; }
#err { margin: 0; color: var(--critical); font-size: .9375rem; }
.hint { color: var(--chalk-2); font-size: .875rem; margin-top: 1.25rem; }
.offscreen { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }