:root { color-scheme: dark; font-family: "Segoe UI", Arial, sans-serif; background: #2b252f; color: #f0edf2; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 44px, 380px); margin: 12vh auto; }
h1 { font-size: 28px; font-weight: 600; }
form { display: grid; gap: 20px; }
label { display: grid; gap: 8px; }
input, button { font: inherit; min-height: 44px; border-radius: 5px; padding: 10px 14px; }
input { width: 100%; background: #252029; color: #f0edf2; border: 1px solid #8f7e97; }
button { border: 0; background: #efe9e1; color: #332b36; font-weight: 600; cursor: pointer; }
button:hover { background: #d9cec4; }
:focus-visible { outline: 3px solid #edb991; outline-offset: 5px; }
p { margin: 0; color: #e6ca89; line-height: 1.5; }
@media (max-width: 370px) { main { width: calc(100% - 32px); } }