:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #050914; color: #f7fbff; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 50% 12%, #30226c66, transparent 38%), #050914; }
main { display: grid; min-height: 100vh; padding: 1.5rem; place-items: center; }
section { width: min(100%, 25rem); padding: 2rem; border: 1px solid #7890b52b; border-radius: 1.25rem; background: #0b172ddd; box-shadow: 0 30px 80px #0008; }
.mark { display: grid; width: 3.5rem; aspect-ratio: 1; place-items: center; border: 1px solid #aa8eff70; border-radius: 50%; background: #302066; color: #cfbfff; font-weight: 700; }
.eyebrow { margin-top: 1.5rem; color: #ae98ff; font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: .14em; }
h1 { margin: .3rem 0 .6rem; font-size: 1.8rem; }
p { color: #9db0c9; line-height: 1.55; }
form { display: grid; gap: .75rem; margin-top: 1.5rem; }
label { font-size: .86rem; color: #cbd8e8; }
input { min-height: 3rem; padding: 0 .9rem; border: 1px solid #7890b545; border-radius: .7rem; background: #07101f; color: #fff; font: inherit; }
input:focus-visible { outline: 3px solid #8eeaff; outline-offset: 2px; }
button { min-height: 3rem; border: 0; border-radius: .7rem; background: linear-gradient(135deg, #7d5cff, #28bdea); color: #fff; font: inherit; font-weight: 650; cursor: pointer; transition: transform 180ms cubic-bezier(.16,1,.3,1), filter 180ms cubic-bezier(.16,1,.3,1); }
button:active { transform: scale(.97); }
@media (hover:hover) and (pointer:fine) { button:hover { filter: brightness(1.12); } }
@media (prefers-reduced-motion:reduce) { button { transition-duration: 1ms; } }