:root{color-scheme:light dark;font:16px system-ui,sans-serif;color:#252b35;background:#f3f4f6}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px}main{width:min(100%,360px);padding:32px;border:1px solid #e0e3e8;border-radius:18px;background:#fff;box-shadow:0 12px 40px #17203308}h1{font-size:28px;margin:0 0 28px;font-weight:650}form{display:grid;gap:10px}label{font-size:14px;font-weight:550}input,button{width:100%;font:inherit;border-radius:8px;padding:12px}input{border:1px solid #b4bcc8;background:transparent;color:inherit;margin-bottom:10px}button{border:0;background:#285ed6;color:white;cursor:pointer;font-weight:600}input:focus-visible,button:focus-visible{outline:3px solid #8aa9ef;outline-offset:3px}p{font-size:14px;color:#b52c26;margin:0 0 6px}p:empty{display:none}@media(prefers-color-scheme:dark){:root{background:#15171c;color:#eef0f5}main{background:#20242c;border-color:#363c47}input{border-color:#667080}p{color:#ff9992}}