/* Original liquid-light treatment inspired by dexter-st's Neon liquid button.
   https://uiverse.io/dexter-st/breezy-zebra-94; not a copy of its unavailable source. */
.unlock-card.connect-stage{align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:470px;min-height:300px;margin:0;padding:30px 12px;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
.connect-stage .connect-block{width:100%;padding:0;text-align:center}
.connect-stage .preview-link{margin-top:28px;color:#27496b;font-size:12px;text-decoration:none;border:0;opacity:.8;transition:opacity .2s}
.connect-stage .preview-link:hover{opacity:1}
.connect-liquid{position:relative;isolation:isolate;display:block;width:100%;max-width:410px;min-height:88px;margin:auto;padding:0;border:1px solid #91dfff;border-radius:28px;background:#092c4e;color:white;cursor:pointer;box-shadow:inset 0 2px 2px #c0f0ff88,inset 0 -2px 6px #001b39,0 14px 32px -12px #06325988,0 0 0 5px #e9f8ff38;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s;-webkit-tap-highlight-color:transparent}
.connect-liquid::before{content:"";position:absolute;inset:-12px;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse,#00baff45,transparent 70%);filter:blur(10px);opacity:.5;transition:opacity .4s}
.connect-liquid::after{content:"";position:absolute;inset:1px;border-radius:27px;background:linear-gradient(180deg,#e3faff29,transparent 45%,#001a3340);pointer-events:none;box-shadow:inset 0 1px #edfcffc9}
.connect-liquid__flow{position:absolute;inset:1px;overflow:hidden;border-radius:27px;background:linear-gradient(115deg,#092846,#104166 55%,#072b4b);pointer-events:none}
.connect-liquid__flow i{position:absolute;width:80%;height:180%;border-radius:43%;background:radial-gradient(ellipse at center,#12c5ee99,#008ed244 50%,transparent 70%);filter:blur(14px);left:-30%;top:18%;animation:connect-liquid-drift 7s ease-in-out infinite alternate;opacity:.5}
.connect-liquid__flow i:nth-child(2){left:55%;top:-120%;animation-delay:-3s;animation-duration:9s;background:radial-gradient(ellipse,#8fe9ff99,#029ed244 50%,transparent 70%)}
.connect-liquid__flow i:nth-child(3){left:30%;top:65%;width:50%;height:80%;animation-delay:-5s;animation-duration:6s}
.connect-liquid__content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:20px;min-height:86px;padding:20px 26px;font:650 24px/1.2 Geist,Arial,sans-serif;letter-spacing:-.6px;text-shadow:0 1px 5px #00274666}
.connect-liquid__content>.icon{width:26px;height:26px;flex:none}
.connect-liquid__content>.connect-liquid__arrow{width:22px;height:22px;margin-left:8px;color:#9de8ff;transition:transform .35s cubic-bezier(.22,1,.36,1),color .3s}
@media(hover:hover){.connect-liquid:not(:disabled):hover{transform:translateY(-3px);border-color:#d0f5ff;box-shadow:inset 0 2px 3px #c0f0ff99,inset 0 -2px 6px #001b39,0 20px 40px -13px #06325999,0 0 0 5px #e9f8ff66}.connect-liquid:not(:disabled):hover::before{opacity:1}.connect-liquid:not(:disabled):hover .connect-liquid__arrow{transform:translateX(5px);color:#fff}.connect-liquid:not(:disabled):hover .connect-liquid__flow i{opacity:.9}}
.connect-liquid:not(:disabled):active{transform:translateY(1px) scale(.985);transition-duration:.12s}
.connect-liquid:focus-visible{outline:3px solid #008dd0;outline-offset:8px}
.connect-liquid:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.connect-liquid:disabled .connect-liquid__flow i{animation:none}
.connect-note{font-size:12px;line-height:1.5;color:#294862;margin:20px auto 0;max-width:310px}
@keyframes connect-liquid-drift{from{transform:translate3d(-9%,0,0) rotate(-16deg)}to{transform:translate3d(30%,-18%,0) rotate(32deg)}}
@media(max-width:760px){.unlock-card.connect-stage{min-height:150px;padding:12px 10px;max-width:390px}.connect-liquid{min-height:74px;border-radius:24px}.connect-liquid::after,.connect-liquid__flow{border-radius:23px}.connect-liquid__content{min-height:72px;font-size:21px;padding:16px 20px;gap:16px}.connect-stage .preview-link{margin-top:20px}}
@media(max-height:650px) and (max-width:760px){.unlock-card.connect-stage{min-height:115px;padding:6px 10px}.connect-stage .preview-link{margin-top:16px}}
@media(max-width:360px){.connect-liquid__content{font-size:18px;gap:12px;padding-inline:16px;white-space:nowrap}.connect-liquid__content>.icon{width:22px;height:22px}.connect-liquid__content>.connect-liquid__arrow{width:18px;margin-left:0}}
@media(prefers-reduced-motion:reduce){.connect-liquid,.connect-liquid::before,.connect-liquid__arrow{transition:none}.connect-liquid__flow i{animation:none}.connect-liquid:not(:disabled):hover{transform:none}}
/* Keep the signed-out introduction on short phone viewports (including browser bars). */
@media(max-width:760px){
 .unlock-screen:has(.connect-stage){justify-content:flex-start;gap:clamp(28px,7dvh,62px);padding:clamp(24px,7dvh,58px) 24px 20px}
 .unlock-screen:has(.connect-stage) .unlock-intro{display:block;width:100%;padding:0;text-align:center}
 .unlock-screen:has(.connect-stage) .unlock-intro>.section-kicker{display:block;font-size:9px;letter-spacing:.14em;margin:0 0 16px}
 .unlock-screen:has(.connect-stage) .unlock-intro h1{font-size:clamp(38px,11vw,52px);line-height:1.04;letter-spacing:-.055em;margin:0}
 .unlock-screen:has(.connect-stage) .unlock-intro h1 br{display:block}
 .unlock-screen:has(.connect-stage) .unlock-intro h1 em{margin-left:0}
 .unlock-screen:has(.connect-stage) .unlock-intro>.subtitle{display:block;max-width:290px;margin:18px auto 0;font-size:14px;line-height:1.55;color:#304d69}
 .unlock-screen:has(.connect-stage) .original-orbit{display:none}
 .unlock-screen .unlock-card.connect-stage{min-height:0;padding:0;max-width:340px;flex-shrink:0}
 .connect-stage .connect-liquid{min-height:64px;border-radius:22px}
 .connect-stage .connect-liquid__content{min-height:62px;font-size:19px;padding:14px 18px;gap:14px}
 .connect-stage .connect-liquid__flow,.connect-stage .connect-liquid::after{border-radius:21px}
 body[data-stage=unlock]:has(.connect-stage) .world-wash{background:linear-gradient(180deg,#edf7ffe8, #e8f5ff94 38%,transparent 72%)}
}
@media(max-width:760px) and (max-height:540px){
 .unlock-screen:has(.connect-stage){padding-top:12px;gap:20px}
 .unlock-screen:has(.connect-stage) .unlock-intro h1{font-size:34px}
 .unlock-screen:has(.connect-stage) .unlock-intro>.subtitle{margin-top:10px;font-size:12px}
 .unlock-screen:has(.connect-stage) .unlock-intro>.section-kicker{margin-bottom:10px}
}