:root { color-scheme: dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; min-height: 100svh; display: grid; place-items: center; background: #070b16; color: #eef3ff; }
main { width: min(100%, 420px); padding: clamp(20px, 6vw, 36px); background: #0f1730; border: 1px solid #1f2b4d; border-radius: 20px; }
.mark { display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid #3b8cff; border-radius: 50%; color: #78afff; font-weight: 800; font-size: 30px; }
h1 { margin-bottom: 0; }
p { color: #a9b8d8; }
label { display: block; margin-top: 16px; }
input, button { width: 100%; min-height: 48px; border-radius: 10px; font: inherit; padding: 10px 12px; }
input { margin-top: 6px; background: #070b16; color: #eef3ff; border: 1px solid #52668d; }
button { margin-top: 20px; background: #3b8cff; color: #070b16; border: 0; font-weight: 750; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
a { color: #9ac3ff; }
:focus-visible { outline: 3px solid #9ac3ff; outline-offset: 3px; }
#feedback:not(:empty) { color: #ffbbc5; }