:root{font-family:system-ui,sans-serif;color:#183d48;background:#f4f7fa;color-scheme:light}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px}main{width:min(100%,480px);padding:34px;background:white;border:1px solid #dce6ec;border-radius:22px;box-shadow:0 20px 70px #153d4710}.brand{font-weight:800;color:#28776d;letter-spacing:.04em}h1{font-size:28px;line-height:1.2;margin:24px 0 14px}h2{font-size:21px}p{line-height:1.6;color:#5e7480}label{display:block;font-size:14px;font-weight:600;margin:24px 0 9px}input{width:100%;font-size:20px;padding:13px;border:1px solid #b9ccd5;border-radius:9px}button{cursor:pointer;width:100%;margin:16px 0 8px;padding:14px;border:0;border-radius:9px;background:#183d48;color:white;font-size:16px;font-weight:600}button:disabled{opacity:.5}button:focus-visible,input:focus-visible{outline:3px solid #83b6df;outline-offset:3px}#code{font-size:36px;letter-spacing:.16em;color:#216b61}#error{color:#aa2839}small{color:#738690;font-size:12px;line-height:1.5} [hidden]{display:none!important}@media(max-width:500px){main{padding:24px}h1{font-size:25px}}