:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #d8d8d8; font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; }
body { display: grid; place-items: center; padding: 16px; }
form { width: min(340px, 100%); display: grid; gap: 14px; }
h1 { margin: 0 0 18px; font-size: 13px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: #8a8a8a; text-align: center; }
input { width: 100%; padding: 13px 14px; border: 1px solid #262626; border-radius: 2px; background: #0a0a0a; color: #eee; font: inherit; outline: none; }
input:focus { border-color: #5a5a5a; }
button { padding: 13px; border: 1px solid #3a3a3a; border-radius: 2px; background: #141414; color: #ddd; font: inherit; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; cursor: pointer; }
button:hover { background: #1c1c1c; }
.error { min-height: 1.4em; margin: 0; color: #c66; font-size: 13px; text-align: center; }
label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }