*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:#131313;color:#e8e9e7;font-family:system-ui,-apple-system,Segoe UI,sans-serif}
.stage{min-height:100svh;display:grid;place-items:center;padding:32px}
.verification-content{width:min(100%,360px);display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(-2vh)}
.emblem{position:relative;width:clamp(108px,27vw,140px);aspect-ratio:1;color:#a8b7a0}
.emblem svg{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:visible}
.raven-base{fill:#181a18}
.raven-hatch{opacity:.3;animation:hatch 3s ease forwards}
.raven-outline{fill:none;stroke:#a8b7a0;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.07 .93;animation:trace 3s ease forwards}
.raven-fill{fill:#a8b7a0;transform:translateY(100%);animation:bird-reveal 3s cubic-bezier(.42,0,.27,1) forwards}
.motes{position:absolute;inset:-24%;pointer-events:none}
.motes i{position:absolute;left:var(--x);top:var(--y);width:2px;height:2px;border-radius:50%;background:#a8b7a0;opacity:0;animation:mote var(--duration) ease-in-out var(--delay) infinite}
.motes i:nth-child(3n){width:1px;height:1px}
.status{margin-top:36px;min-height:58px}
h1{font-size:clamp(18px,4vw,21px);line-height:1.3;letter-spacing:-.02em;font-weight:650;margin:0}
#detail{font-size:12px;line-height:1.5;color:#969a95;margin:8px 0 0}
.progress{width:180px;height:3px;border-radius:3px;background:#303230;overflow:hidden;margin-top:22px}
.progress span{display:block;background:#a8b7a0;width:38%;height:100%;border-radius:inherit;animation:slide 1.8s cubic-bezier(.55,0,.45,1) infinite}
.verification-content[data-state="complete"] .raven-hatch{animation:none;opacity:0}
.verification-content[data-state="complete"] .raven-outline{animation:none;opacity:0;transition:opacity .5s}
.verification-content[data-state="complete"] .raven-fill{animation:none;transform:translateY(0);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.verification-content[data-state="complete"] .progress span{animation:none;transform:scaleX(2.64);transform-origin:left;transition:transform .6s ease}
.verification-content[data-state="complete"] .motes,.verification-content[data-state="error"] .motes{opacity:0;transition:opacity .7s}
.verification-content[data-state="error"] .raven-hatch,.verification-content[data-state="error"] .raven-fill,.verification-content[data-state="error"] .raven-outline,.verification-content[data-state="error"] .progress span{animation-play-state:paused}
.verification-content[data-state="error"] .progress{opacity:.4}
button{margin-top:24px;padding:10px 20px;border:1px solid #899c82;border-radius:4px;color:#e6ebe4;background:#282d28;font:inherit;cursor:pointer}
button:hover{background:#384137}button:focus-visible,a:focus-visible{outline:2px solid #a8b7a0;outline-offset:4px}
.legal{max-width:700px;margin:0 auto;padding:72px 24px 100px;color:#c9cbc8;line-height:1.75}.legal h1{font-size:32px;color:#f0f1ef;margin:48px 0 28px}.legal h2{font-size:18px;color:#f0f1ef;margin:32px 0 8px}.legal a{color:#b8c8b0;text-underline-offset:4px}
@keyframes trace{0%{stroke-dashoffset:0;stroke-dasharray:.025 .975;opacity:.3}45%{stroke-dashoffset:-.4;stroke-dasharray:.4 .6;opacity:.75}85%,100%{stroke-dashoffset:-1;stroke-dasharray:1 0;opacity:0}}
@keyframes hatch{0%{opacity:0}30%{opacity:.35}85%,100%{opacity:0}}
@keyframes bird-reveal{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes slide{0%{transform:translateX(-105%)}100%{transform:translateX(270%)}}
@keyframes mote{0%,100%{opacity:0;transform:translate3d(0,0,0)}30%{opacity:.38}75%{opacity:.2}90%{opacity:0;transform:translate3d(var(--dx),var(--dy),0)}}
@media(prefers-reduced-motion:reduce){.motes{display:none}.raven-outline{animation:none;stroke-dasharray:none;opacity:.45}.raven-hatch{animation:none;opacity:.2}.raven-fill{animation:bird-reveal 3s linear forwards}.progress span{animation:slide 3s linear infinite}.verification-content[data-state="complete"] .raven-outline{opacity:0}}

/* Finish the moving indicator before retiring the track. */
.verification-content[data-state="complete"] .progress{animation:progress-retire .55s cubic-bezier(.65,0,.35,1) .5s forwards;transform-origin:center}
.verification-content[data-state="complete"] .progress span{width:100%;transform-origin:center;animation:progress-complete .5s cubic-bezier(.22,1,.36,1) both;transition:none}
@keyframes progress-complete{from{transform:translateX(var(--segment-offset, 0px)) scaleX(.38)}to{transform:translateX(0) scaleX(1)}}
@keyframes progress-retire{0%{transform:scaleX(1);opacity:1}80%{opacity:1}100%{transform:scaleX(0);opacity:0}}
@media(prefers-reduced-motion:reduce){.verification-content[data-state="complete"] .progress{animation:progress-retire .55s ease .5s forwards}.verification-content[data-state="complete"] .progress span{animation:progress-complete .5s ease both}}

/* Keep the typed heading stable and announce only whole states to assistive technology. */
.status h1{min-height:1.3em;font-weight:600;letter-spacing:-.025em}
.caret{display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-.08em;background:#a8b7a0;animation:caret-blink 1.05s step-end infinite}
.verification-content[data-state="complete"] .caret{animation:caret-finish 1.2s ease 1.5s forwards}
#detail{transition:opacity .22s ease,transform .22s ease}
#detail.changing{opacity:0;transform:translateY(3px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes caret-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes caret-finish{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.caret{animation:none}.verification-content[data-state="complete"] .caret{animation:none;opacity:0}#detail{transition:opacity .15s ease}}

/* Keep the typewriter caret visible in either motion preference. */
.status h1{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.035em}
.status .caret,.verification-content[data-state="complete"] .caret{width:2px;height:1em;margin-left:4px;vertical-align:-.12em;background:#a8b7a0;opacity:1;animation:caret-blink 1s steps(1,end) infinite}
/* Keep the product voice lowercase without altering typed values. */
body{text-transform:lowercase}input,textarea,select,.entry strong{text-transform:none}button{ text-transform:lowercase }
@media(min-width:701px){.emblem{width:clamp(108px,27vw,280px)}}
/* Align the raven, rather than the whole status block, with the dashboard. */
@media(min-width:701px){.verification-content{position:absolute;left:50%;top:calc(50svh - 46.5px);transform:translate(-50%,calc(-.5 * clamp(108px,27vw,280px)))}}

.verification-content[data-state="error"] .status h1{color:#dba8a3}.verification-content[data-state="error"] .caret{background:#dba8a3}.verification-content[data-state="error"] .progress{opacity:1;animation:progress-retire .55s ease forwards}.verification-content[data-state="error"] .progress span{background:#dba8a3}
@media(min-width:701px){.verification-content{top:50svh}}
@media(max-width:700px){.verification-content{position:absolute;left:50%;top:50svh;transform:translate(-50%,calc(-.5 * clamp(108px,27vw,140px)))}}
/* Keep the completed silhouette visible as its color shifts at the failure transition. */
.verification-content[data-state="error"] .raven-fill{animation:none;transform:translateY(0);fill:#dba8a3;transition:fill 1.2s ease}
.verification-content[data-state="error"] .raven-hatch,.verification-content[data-state="error"] .raven-outline{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.verification-content[data-state="error"] .raven-fill{transition:fill .7s ease}}