:root{--void:#01030a;--ink:#e8eefc;--metal-hi:#f6f9fe;--metal-lo:#a7b3c9;--mute:rgba(232,238,252,.62);--faint:rgba(232,238,252,.46);--rule:rgba(232,238,252,.2);--glint:#aacdff;--alert:#f3aaa1}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--void);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;color:var(--ink);background:var(--void);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:1px solid rgba(170,205,255,.8);outline-offset:4px;border-radius:2px}
[hidden]{display:none!important}

.door{flex:1;width:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;padding:calc(36px + env(safe-area-inset-top)) clamp(24px,7vw,40px) 24px}

.crest{position:relative;display:block;align-self:center;width:min(58vw,232px);margin-bottom:clamp(44px,9vh,76px);line-height:0;-webkit-tap-highlight-color:transparent}
.crest svg{display:block;width:100%;height:auto;overflow:visible}
.crest-glint{position:absolute;left:-9.48%;top:-18.655%;width:118.96%!important;height:137.31%!important;color:#fff;opacity:0;-webkit-mask-image:linear-gradient(100deg,transparent 36%,#000 50%,transparent 64%);mask-image:linear-gradient(100deg,transparent 36%,#000 50%,transparent 64%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(170,205,255,.8));pointer-events:none}

.panel{transition:opacity .5s ease}
.door[data-state="check"] .panel{opacity:0}
.door[data-state="check"] #ask{animation:failsafe .5s ease 2.6s forwards}
@keyframes failsafe{to{opacity:1}}

h1{font-size:clamp(1.75rem,1.35rem + 1.6vw,2.125rem);font-weight:300;letter-spacing:-.012em;line-height:1.15;color:#fff;text-align:center;text-wrap:balance}
#ask h1{margin-bottom:clamp(30px,5vh,44px)}

.field{margin-bottom:26px}
label{display:block;margin-bottom:4px;font-size:.8125rem;letter-spacing:.02em;color:var(--mute)}
input{display:block;width:100%;padding:10px 0 11px;font:inherit;font-size:1.0625rem;font-weight:400;letter-spacing:.01em;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;outline:0;caret-color:var(--glint);-webkit-appearance:none;appearance:none;transition:border-color .3s ease}
input:hover{border-bottom-color:rgba(232,238,252,.34)}
input:focus{border-bottom-color:rgba(170,205,255,.85)}
input[aria-invalid="true"]{border-bottom-color:rgba(243,170,161,.75)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--void) inset;box-shadow:0 0 0 1000px var(--void) inset;caret-color:var(--glint);transition:background-color 9999s ease 0s}

.msg{font-size:.875rem;line-height:1.45;color:var(--alert)}
.msg:not(:empty){margin-top:9px}
.note{text-align:center;color:var(--mute)}
.note[data-tone="alert"]{color:var(--alert)}

.go{display:block;width:100%;height:50px;margin-top:10px;border:0;border-radius:999px;font:inherit;font-size:1rem;font-weight:500;letter-spacing:.01em;color:var(--void);background:linear-gradient(180deg,var(--metal-hi),var(--metal-lo));cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .3s ease,transform .2s ease,opacity .3s ease}
.go:hover{filter:brightness(1.07)}
.go:active{transform:scale(.985)}
.go:disabled{opacity:.42;cursor:default;filter:none;transform:none}
.go:focus-visible{outline-offset:5px}
#ask .note:not(:empty){margin-top:18px}

#wait,#done{text-align:center}
#wait h1{font-size:clamp(1.375rem,1.15rem + 1vw,1.75rem)}
.code{display:flex;justify-content:center;gap:.32em;margin:clamp(30px,5vh,44px) 0 22px;font-size:clamp(3.1rem,15vw,4.6rem);font-weight:200;line-height:1;letter-spacing:.12em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--metal-hi);background:linear-gradient(180deg,var(--metal-hi) 20%,var(--metal-lo) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.code span{margin-right:-.12em}
.beam{position:relative;height:1px;margin:0 auto;width:min(100%,280px);overflow:hidden;background:rgba(232,238,252,.12)}
.beam::after{content:"";position:absolute;top:0;left:0;width:34%;height:1px;background:linear-gradient(90deg,rgba(246,249,254,0),var(--metal-hi) 50%,rgba(246,249,254,0));opacity:.9;transform:translateX(-100%)}
.lede{margin-top:26px;font-size:1rem;line-height:1.6;color:rgba(232,238,252,.8);text-wrap:pretty}
.fine{margin-top:14px;font-size:.875rem;line-height:1.5;color:var(--faint)}
#wait .note:not(:empty){margin-top:14px}
#done h1{margin-bottom:6px}
#done .lede{margin-top:14px;margin-bottom:34px}
.door[data-state="approved"] .beam::after{animation:none;width:100%;transform:none;opacity:1}

.nojs{display:none;margin-top:8px;font-size:1rem;line-height:1.6;text-align:center;color:rgba(232,238,252,.8)}

footer{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;padding:28px clamp(20px,5vw,48px) calc(22px + env(safe-area-inset-bottom));font-size:.75rem;line-height:1.5;text-align:center;color:rgba(232,238,252,.45)}
footer a{text-decoration:none;color:rgba(232,238,252,.62)}
footer a:hover{color:#fff}

@media (prefers-reduced-motion:no-preference){
.crest-logo{animation:arrive 1s cubic-bezier(.2,.7,.2,1) .05s both}
.crest-glint{animation:sweep 1.3s cubic-bezier(.45,0,.2,1) .9s both}
.beam::after{animation:travel 2.4s cubic-bezier(.45,0,.25,1) infinite}
@keyframes arrive{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@keyframes sweep{from{opacity:1;-webkit-mask-position:100% 0;mask-position:100% 0}to{opacity:1;-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes travel{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
}
@media (prefers-reduced-motion:reduce){
.panel{transition:none}
.beam::after{left:33%;transform:none;opacity:.6}
}
@media (max-height:640px){
.crest{margin-bottom:32px;width:min(48vw,200px)}
}