:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101311; color: #f2f6f3; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; background: radial-gradient(ellipse at center, #1d2921 0, #101311 70%); }
main { width: min(90vw, 480px); text-align: center; padding: 32px 0; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; border: 0; background: #b9f779; color: #15200d; font-weight: 750; }
button:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 8px; }
button:disabled { cursor: wait; opacity: .6; }
#next { width: min(82vw, 380px); aspect-ratio: 1; margin: auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; font-size: clamp(26px, 6vw, 38px); box-shadow: 0 0 85px #a2fa5010, 0 16px 50px #0004; transition: transform .15s, background .15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#next:not(:disabled):hover { background: #caff95; transform: scale(1.025); }
#next:not(:disabled):active { transform: scale(.96); }
#next svg { width: 76px; height: 76px; }
#status { color: #bac7bd; line-height: 1.6; margin: 28px auto 0; max-width: 400px; }
#status:empty { display: none; }
form { text-align: left; }
h1 { font-size: clamp(30px, 7vw, 42px); letter-spacing: -.05em; margin: 0 0 12px; }
form p { color: #bac7bd; line-height: 1.6; }
label { display: block; margin: 32px 0 10px; font-size: 14px; }
input { width: 100%; padding: 16px; border-radius: 12px; border: 1px solid #49564c; background: #1a211c; color: white; font: inherit; }
.hint { font-size: 13px; margin-top: 24px; }
code { display: block; color: #c5eaa5; overflow-wrap: anywhere; font-size: 13px; }
form button { width: 100%; padding: 19px; border-radius: 12px; margin-top: 30px; }
form button span { margin-left: 10px; }
@media (prefers-reduced-motion: reduce) { #next { transition: none; } }