:root{font-family:system-ui,sans-serif;color:#ece7dd;background:#12171c;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(ellipse at top,#293544,transparent 70%),#12171c}.card{width:min(100%,510px);padding:36px;border:1px solid #47505a;border-radius:16px;background:#192028;box-shadow:0 20px 70px #0006}.brand{font-size:12px;letter-spacing:3px;color:#d6b77c}h1{font-size:28px;margin:16px 0}h2{font-size:22px}.intro,p{line-height:1.65;color:#bfc7cf}#message{padding:12px;background:#25323b;border-radius:8px}.error{color:#ffc2bb!important;background:#472c30!important}nav{display:flex;gap:10px;margin:22px 0}button,input{font:inherit}button{padding:12px 16px;border:1px solid #56616c;border-radius:8px;background:#28323d;color:#f4efe5;cursor:pointer}button[aria-pressed=true]{border-color:#d6b77c;color:#edcd92}button:disabled{opacity:.55;cursor:wait}label{display:block;margin:20px 0 8px}input{width:100%;margin-top:8px;padding:13px;background:#111820;color:#fff;border:1px solid #52606c;border-radius:8px}input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #edcd92;outline-offset:3px}small{display:block;color:#a7b3bf;line-height:1.6;font-size:12px}.primary{width:100%;background:#cfad6f;color:#171b20;font-weight:700;border:0;margin:24px 0 10px}.demo{display:block;margin-top:28px;color:#edcd92}.note{margin-top:8px}[hidden]{display:none!important}@media(max-width:480px){body{padding:14px}.card{padding:22px}h1{font-size:24px}}