:root { color-scheme: light; font-family: system-ui, -apple-system, sans-serif; color: #192722; background: #f3f2ed; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 24px; }
main { width: min(100%, 460px); padding: 40px; background: #fffefa; border: 1px solid #d8ded5; border-radius: 20px; box-shadow: 0 12px 50px #26392f08; }
.eyebrow { letter-spacing: .16em; font-size: 11px; font-weight: 700; color: #557164; margin: 0 0 38px; }
h1 { font-size: clamp(28px, 5vw, 36px); line-height: 1.15; font-weight: 650; letter-spacing: -.04em; margin: 0 0 16px; }
.intro { color: #56645c; line-height: 1.6; margin-bottom: 30px; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
input, button { font: inherit; width: 100%; border-radius: 8px; min-height: 48px; padding: 12px 14px; }
input { background: white; border: 1px solid #a8b5ab; color: #192722; margin-bottom: 14px; }
input:focus-visible, button:focus-visible { outline: 3px solid #88bda5; outline-offset: 3px; }
button { background: #204d3a; border: 1px solid #204d3a; color: white; cursor: pointer; font-weight: 600; }
button span { float: right; }
button:hover { background: #153c2b; }
button:disabled { opacity: .55; cursor: wait; }
.secondary { background: transparent; color: #204d3a; margin-top: 10px; border-color: #d1d9d2; }
.secondary:hover { background: #edf3ee; }
.hint { font-size: 12px; color: #69786e; margin-top: 24px; line-height: 1.5; }
#status { font-size: 14px; line-height: 1.5; margin-bottom: 0; }
#code { letter-spacing: .3em; font-size: 24px; }
[hidden] { display: none !important; }
@media(max-width: 480px) { main { padding: 28px; } }