*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:#1c2025;color:#e7ebee;font:16px/1.5 system-ui,sans-serif}main{width:min(420px,calc(100% - 40px));padding:32px;border:1px solid #3b4249;border-radius:12px;background:#22272c}h1{font-size:24px;margin:0 0 8px}p{color:#b8c3cc;margin:0 0 24px}label{display:block;margin-bottom:6px;font-size:13px}input{width:100%;padding:11px;border:1px solid #66727c;border-radius:5px;background:#15191c;color:white;font:inherit}button{margin-top:16px;padding:10px 17px;border:1px solid #be8942;border-radius:5px;background:#a15e0d;color:white;font:inherit;cursor:pointer}input:focus-visible,button:focus-visible{outline:2px solid #f3c075;outline-offset:3px}