:root{color-scheme:dark;--bg:#050e12;--text:#edf8f5;--muted:#9baeb0;--mint:#8aefcf;--cyan:#53cbd1;--line:rgba(153,223,211,.13)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:5px}button{cursor:pointer}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.ambience{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,#10242688,transparent 62%),linear-gradient(130deg,#08151a,#050d11 65%)}.grid{position:absolute;inset:0;background-image:linear-gradient(#81bcab06 1px,transparent 1px),linear-gradient(90deg,#81bcab06 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,transparent 12%,#000 85%)}.halo{position:absolute;border-radius:50%;filter:blur(70px);opacity:.12}.halo-one{width:400px;height:400px;left:-250px;top:30%;background:#3fbd92}.halo-two{width:380px;height:380px;right:-260px;top:10%;background:#259ca7}.network{position:absolute;width:100%;height:100%;opacity:.66}.network-nodes{animation:breathe 6s ease-in-out infinite}.coordinates{position:absolute;font-size:9px;line-height:2.4;letter-spacing:2px;color:#658b8c}.coordinates span{font-size:8px;color:#466264}.coordinate-left{left:6%;top:61%}.coordinate-right{right:6%;top:35%;text-align:right}
.page{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:32px 48px;padding-top:max(28px,env(safe-area-inset-top));padding-bottom:max(25px,env(safe-area-inset-bottom))}.masthead{display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:650;letter-spacing:3px}.brand img{border-radius:10px}.network-label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}.network-label i{width:5px;height:5px;background:var(--mint);border-radius:50%;box-shadow:0 0 10px #8aefcf77}
main{width:min(100%,540px);margin:auto;display:flex;align-items:center;flex-direction:column;text-align:center;padding:32px 0}.eyebrow{display:flex;align-items:center;gap:8px;color:#a8c7c4;font-size:10px;letter-spacing:2.8px;font-weight:500}.eyebrow span{width:14px;height:1px;background:var(--mint)}.visual{position:relative;width:250px;height:250px;margin:20px 0 21px;display:grid;place-items:center}.visual-glow{position:absolute;inset:24%;border-radius:50%;background:#3fd0ae22;box-shadow:0 0 65px 30px #40d5b416;animation:breathe 5s ease-in-out infinite}.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.outer-ring,.inner-ring{fill:none;stroke:#74bcac27;stroke-width:.8}.inner-ring{stroke-dasharray:2 7;stroke:#76d4c439}.orbit{transform-origin:140px 140px;animation:orbit 18s linear infinite}.orbit-trail{fill:none;stroke:#96f9db;stroke-width:1.2;stroke-dasharray:100 680;stroke-dashoffset:240;opacity:.65}.satellite{fill:#b3ffe7;filter:drop-shadow(0 0 6px #7bedce)}.crosshair{stroke:#568f85;stroke-width:1}.satellites{fill:#4b8f84;stroke:#132d2c;stroke-width:5}.logo-core{position:relative;padding:8px;border:1px solid #92e8c82b;border-radius:32px;background:linear-gradient(150deg,#24584444,#082821);box-shadow:0 16px 45px #0005,inset 0 1px #b5ffda15;animation:logo-breathe 5s ease-in-out infinite}.logo-core img{display:block;border-radius:24px;width:112px;height:112px}.success-mark{position:absolute;bottom:51px;right:55px;width:31px;height:31px;background:#99edcd;border:4px solid #0a1b1b;border-radius:50%;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .35s,transform .35s}.success-mark svg{width:20px;fill:none;stroke:#0b3d2d;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.success-mark path{stroke-dasharray:22;stroke-dashoffset:22}
.copy{width:100%}h1{font-weight:500;letter-spacing:-1.7px;font-size:40px;line-height:1.18;margin:0}h1 span{color:var(--mint)}.copy p{font-size:14px;line-height:1.75;color:var(--muted);margin:17px auto 0;max-width:355px}.mobile-break{display:none}.connection{width:min(100%,382px);margin-top:30px;padding:20px 21px 18px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(115deg,#18333055,#0d1c2480);box-shadow:0 15px 35px #0002,inset 0 1px #b2e8d406;text-align:left}.connection-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.status-label{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:500;color:#d3e8e4}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);flex-shrink:0;box-shadow:0 0 9px #7ff6d74d;animation:breathe 1.8s ease-in-out infinite}.status-symbol{color:#75a49b;font-size:19px}.progress-track{height:3px;border-radius:5px;background:#91c3b71c;overflow:hidden;margin:18px 0}.progress-fill{height:100%;width:34%;border-radius:5px;background:linear-gradient(90deg,#308a7c,var(--mint));box-shadow:0 0 14px #8aefcf55;animation:scan 2.2s ease-in-out infinite;transition:width .45s ease}.steps{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#89a4a1}.step{display:flex;align-items:center;gap:6px;white-space:nowrap}.step i{width:4px;height:4px;border:1px solid #63847e;border-radius:50%}.step-one{color:#b6dfd3}.step-one i{background:var(--mint);border-color:var(--mint)}.connection-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:22px 0 0;color:#7e9b96;font-size:10px;letter-spacing:.2px}.connection-note svg{width:14px;height:14px;fill:none;stroke:#729e91;stroke-width:1.25;stroke-linejoin:round}.actions{width:min(100%,382px);margin-top:14px}.actions button,.no-script button{display:flex;justify-content:center;gap:20px;align-items:center;border:1px solid #b2efd147;border-radius:11px;background:#90e7c8;color:#0b2923;font-size:13px;font-weight:650;min-height:46px;width:100%;padding:10px 20px;transition:background .2s,transform .2s}.actions button:hover{background:#b3f7df;transform:translateY(-1px)}.actions button:active{transform:translateY(0)}.actions button span{font-size:21px}footer{display:flex;justify-content:space-between;gap:12px;color:#70908b;font-size:9px;letter-spacing:1.8px}footer b{padding:0 8px;font-weight:400;color:#395e55}.footer-right{letter-spacing:.3px;font-size:10px}.no-script{font-size:12px;line-height:1.6;color:var(--muted);margin:15px 0}.no-script button{margin-top:8px}
body[data-state=connected] .success-mark,body[data-state=redirecting] .success-mark{opacity:1;transform:scale(1)}body[data-state=connected] .success-mark path,body[data-state=redirecting] .success-mark path{stroke-dashoffset:0;transition:stroke-dashoffset .4s .15s}body[data-state=connected] .progress-fill,body[data-state=redirecting] .progress-fill{width:100%;animation:none}body[data-state=connected] .step,body[data-state=redirecting] .step{color:#b6dfd3}body[data-state=connected] .step i,body[data-state=redirecting] .step i{background:var(--mint);border-color:var(--mint)}body[data-state=connected] .satellites,body[data-state=redirecting] .satellites{fill:#b3ffe7}body[data-state=connected] .orbit,body[data-state=redirecting] .orbit{animation-play-state:paused}body[data-state=fallback] .progress-fill{animation:none;width:100%;background:#ad99794d;box-shadow:none}body[data-state=fallback] .status-dot{animation:none;background:#e0bb7f}body[data-state=fallback] .orbit{animation-play-state:paused;opacity:.35}body[data-state=fallback] h1{font-size:34px}body[data-state=fallback] .step{color:#89a4a1}body[data-state=fallback] .step i{background:none;border-color:#63847e}
.preview-tools{align-self:center;margin-top:22px;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px 14px;padding:10px 14px;border:1px solid #7ca59a29;border-radius:12px;background:#10221ff2;font-size:9px;color:#9db7af;max-width:100%}.preview-tools>span{letter-spacing:1px}.preview-tools>div{display:flex;gap:3px}.preview-tools button{border:1px solid transparent;padding:8px;color:#c0d9d2;background:transparent;border-radius:6px;font-size:10px;min-height:32px}.preview-tools button:hover,.preview-tools button[aria-pressed=true]{border-color:#80d6b93d;background:#7adabb14;color:#b6ffe4}.preview-tools small{flex-basis:100%;text-align:center;font-size:9px}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes breathe{50%{opacity:.45}}@keyframes logo-breathe{50%{box-shadow:0 16px 45px #0005,0 0 32px #60e4b814}}@keyframes scan{0%{transform:translateX(-110%)}100%{transform:translateX(400%)}}
@media(min-width:1600px){main{transform:scale(1.08)}}
@media(max-width:600px){.page{padding-left:23px;padding-right:23px;padding-top:max(23px,env(safe-area-inset-top));padding-bottom:max(22px,env(safe-area-inset-bottom))}.brand{font-size:12px;letter-spacing:2.2px;gap:8px}.brand img{width:28px;height:28px;border-radius:8px}.network-label{font-size:9px;gap:6px}.coordinates{display:none}.network{width:220%;left:-60%;opacity:.44}.grid{background-size:44px 44px}main{padding:28px 0}.eyebrow{font-size:9px;letter-spacing:2.5px}.visual{width:234px;height:234px;margin:19px 0 24px}.logo-core img{width:102px;height:102px}.logo-core{border-radius:30px}h1{font-size:33px;letter-spacing:-1.2px}.copy p{font-size:13px;margin-top:15px}.mobile-break{display:block}.connection{margin-top:27px;padding:18px}.connection-note{margin-top:20px}footer{justify-content:center;font-size:8px;letter-spacing:1.5px}.footer-right{display:none}.preview-tools{margin-top:15px;padding:8px 10px;gap:4px 8px}body[data-preview="1"] main{padding:16px 0}body[data-preview="1"] .visual{width:200px;height:200px;margin:14px 0}body[data-preview="1"] .logo-core img{width:90px;height:90px}body[data-preview="1"] .success-mark{bottom:34px;right:34px}body[data-state=fallback] h1{font-size:30px}}
@media(max-width:350px){.page{padding-left:18px;padding-right:18px}.network-label{font-size:8px}.brand{font-size:11px}h1{font-size:29px}.status-label{font-size:11px}.steps{font-size:9px}.connection{padding:16px}.visual{width:205px;height:205px}.success-mark{bottom:35px;right:35px}}
@media(max-height:740px){.page{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(15px,env(safe-area-inset-bottom))}main{padding:18px 0}.visual{width:190px;height:190px;margin:13px 0}.logo-core img{width:86px;height:86px}.logo-core{border-radius:26px}.logo-core img{border-radius:19px}.success-mark{bottom:32px;right:32px}h1{font-size:30px}.connection{margin-top:20px}.connection-note{margin-top:16px}body[data-preview="1"] main{padding:15px 0}body[data-preview="1"] .visual{width:155px;height:155px;margin:10px 0}body[data-preview="1"] .logo-core img{width:70px;height:70px}body[data-preview="1"] .success-mark{bottom:19px;right:19px}body[data-preview="1"] h1{font-size:28px}body[data-preview="1"] .copy p{margin-top:10px}body[data-preview="1"] .connection{margin-top:16px}}
@media(max-height:610px){.visual{width:150px;height:150px;margin:8px 0}.logo-core img{width:70px;height:70px}.success-mark{bottom:17px;right:17px}main{padding:14px 0}.copy p{margin-top:10px}.connection{margin-top:17px;padding:13px 16px}.progress-track{margin:13px 0}.connection-note{margin-top:13px}body[data-preview="1"] .visual{width:88px;height:88px;margin:6px 0}body[data-preview="1"] .logo-core{padding:5px;border-radius:20px}body[data-preview="1"] .logo-core img{width:58px;height:58px;border-radius:15px}body[data-preview="1"] h1{font-size:24px}body[data-preview="1"] .copy p{font-size:12px}body[data-preview="1"] .success-mark{bottom:3px;right:3px}body[data-preview="1"] .connection-note{margin-top:9px}body[data-preview="1"] .preview-tools{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.progress-fill{width:42%;opacity:.8}.success-mark path{stroke-dashoffset:0}.actions button:hover{transform:none}}

@media(max-height:610px){body[data-state=fallback]:not([data-preview="1"]) .visual{width:120px;height:120px}body[data-state=fallback]:not([data-preview="1"]) .logo-core img{width:62px;height:62px}}

/* Gateway timing: compositor-friendly visual milestones, completed only on success. */
.progress-fill{width:100%;transform:scaleX(.1);transform-origin:left;animation:none;transition:transform .55s cubic-bezier(.2,.65,.3,1)}
body[data-progress="0"] .progress-fill{transform:scaleX(0)}
body[data-progress="10"] .progress-fill{transform:scaleX(.1)}
body[data-progress="30"] .progress-fill{transform:scaleX(.3)}
body[data-progress="50"] .progress-fill{transform:scaleX(.5)}
body[data-progress="70"] .progress-fill{transform:scaleX(.7)}
body[data-progress="88"] .progress-fill{transform:scaleX(.88)}
body[data-progress="100"] .progress-fill{transform:scaleX(1)}