:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:oklch(15% .008 250);color:oklch(94% .006 250)}
*{box-sizing:border-box}body{margin:0;padding:24px;min-height:100svh;display:grid;place-items:center}
main{width:min(100%,440px);padding:28px;background:oklch(20% .008 250);border:1px solid oklch(32% .008 250);border-radius:12px}
.brand{font-size:.8rem;letter-spacing:.08em;font-weight:700;margin-bottom:28px}.brand span{color:oklch(78% .1 210)}
h1{font-size:1.6rem;line-height:1.2;margin:0 0 12px}p{font-size:1rem;line-height:1.5;color:oklch(78% .008 250);overflow-wrap:anywhere}
form{display:grid;gap:10px;margin:24px 0}label{font-size:.9rem;font-weight:600}input,button,.button{font:inherit;min-height:46px;border-radius:6px;padding:10px 12px}
input{width:100%;min-width:0;border:1px solid oklch(45% .008 250);background:oklch(16% .008 250);color:inherit;margin-bottom:10px}
button,.button{border:1px solid transparent;background:oklch(79% .11 210);color:oklch(17% .01 250);font-weight:650;cursor:pointer;text-align:center;text-decoration:none;display:block}
button:hover,.button:hover{background:oklch(86% .08 210)}button:active,.button:active{transform:translateY(1px)}
:focus-visible{outline:2px solid oklch(78% .09 65);outline-offset:3px}.secondary{background:transparent;color:inherit;border-color:oklch(48% .008 250)}.secondary:hover{background:oklch(30% .008 250)}
.error{padding:12px;border:1px solid oklch(65% .12 25);border-radius:6px;color:oklch(88% .07 25)}.hint,footer{font-size:.83rem;line-height:1.5;color:oklch(72% .008 250)}footer{border-top:1px solid oklch(33% .008 250);padding-top:16px;margin-top:24px}
@media(max-width:400px){body{padding:12px}main{padding:22px 18px}}