/* Sign-up and welcome pages: the same look as the sign-in screen (scene + frosted card). Loaded after each page's own styles. */
:root{--t:#5eead4;--c:#22d3ee;--b:#60a5fa;--mut:#8ea6cc}
body{background:#030814;overflow-x:hidden}
.bg{display:none}
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(1200px 700px at 78% 38%,#0b2a52 0%,#071733 45%,#030814 80%)}
.aur{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.aur.a{width:60vmax;height:60vmax;left:-18vmax;top:-26vmax;background:radial-gradient(circle,#14b8a655,transparent 65%);animation:dr1 26s ease-in-out infinite alternate}
.aur.b{width:55vmax;height:55vmax;right:-14vmax;bottom:-22vmax;background:radial-gradient(circle,#4f46e55c,transparent 65%);animation:dr2 32s ease-in-out infinite alternate}
.aur.c{width:34vmax;height:34vmax;right:16vmax;top:-10vmax;background:radial-gradient(circle,#22d3ee38,transparent 65%);animation:dr1 38s ease-in-out infinite alternate-reverse}
@keyframes dr1{to{transform:translate(6vmax,5vmax) scale(1.12)}}@keyframes dr2{to{transform:translate(-7vmax,-4vmax) scale(1.08)}}
.floor{position:absolute;left:-30%;right:-30%;bottom:-6%;height:56%;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
background-image:linear-gradient(#5eead455 1px,transparent 1px),linear-gradient(90deg,#5eead455 1px,transparent 1px);background-size:64px 64px;animation:fl 5s linear infinite;
-webkit-mask-image:linear-gradient(to top,#000 5%,transparent 78%);mask-image:linear-gradient(to top,#000 5%,transparent 78%)}
@keyframes fl{to{background-position:0 64px,0 0}}
.vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 45%,#02060f99 100%)}
#px{position:absolute;inset:0;width:100%;height:100%}

.shell{position:relative;z-index:1}
.glass{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.card{position:relative;padding:32px 28px 26px;border-radius:26px;background:linear-gradient(165deg,#0f2142d9,#071229c4 60%,#06101fd9);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
box-shadow:0 40px 90px #000000a6,0 0 0 1px #ffffff1a,inset 0 1px 0 #ffffff29,inset 0 0 60px #22d3ee0f;animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.card:before{content:"";position:absolute;inset:-1px;border-radius:27px;padding:1px;background:linear-gradient(140deg,#5eead4aa,#60a5fa22 38%,#ffffff0d 60%,#818cf888);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@keyframes up{from{opacity:0;transform:translateY(18px)}}

.brand svg{box-shadow:0 8px 24px #22d3ee40,0 0 0 1px #ffffff1f}
.brand small{letter-spacing:2px;font-size:10.5px}
h1{font-size:27px;letter-spacing:-.8px;font-weight:700}
.f{display:block;background:#030a1c99;border:1px solid #ffffff1f;border-radius:13px;padding:9px 15px 10px;transition:border-color .2s,box-shadow .2s,background .2s}
.f:hover{border-color:#ffffff38}
.f:focus-within{border-color:#5eead4;background:#04102a99;box-shadow:0 0 0 4px #5eead42b,0 0 28px #22d3ee22}
.f span{display:block;font-size:10.5px;color:var(--mut);letter-spacing:.8px;text-transform:uppercase}
.f input{width:100%;border:0;outline:0;background:none;color:#fff;font:inherit;font-size:16px;padding:4px 0 0;-webkit-appearance:none}
/* autofill (Chrome, Safari, Edge, Firefox) must not paint its own white box over the glass field */
.f input:-webkit-autofill,.f input:-webkit-autofill:hover,.f input:-webkit-autofill:focus,.f input:-webkit-autofill:active{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px #081530 inset;box-shadow:0 0 0 1000px #081530 inset;background-color:transparent!important;background-clip:content-box;transition:background-color 600000s 0s,color 600000s 0s}
.f input:autofill{-webkit-text-fill-color:#fff;caret-color:#fff;box-shadow:0 0 0 1000px #081530 inset;background-color:transparent!important;filter:none}
.f input{color-scheme:dark}
.go{position:relative;overflow:hidden;border:0;border-radius:13px;padding:15px;font:700 16px inherit;font-family:inherit;letter-spacing:.2px;color:#031225;background:linear-gradient(95deg,#5eead4,#38bdf8 55%,#60a5fa);cursor:pointer;box-shadow:0 12px 32px #22d3ee40,inset 0 1px 0 #ffffff80;transition:transform .12s,filter .2s,box-shadow .2s}
.go:before{content:"";position:absolute;top:0;bottom:0;width:60%;left:-80%;background:linear-gradient(100deg,transparent,#ffffff66,transparent);transform:skewX(-20deg);animation:sh 4.5s 1.5s ease-in-out infinite}
@keyframes sh{0%,60%{left:-80%}100%{left:140%}}
.go:hover{filter:brightness(1.08);box-shadow:0 16px 40px #22d3ee59,inset 0 1px 0 #ffffff80}.go:active{transform:scale(.985)}

.ck{background:#030a1c99;border-color:#ffffff1f;transition:border-color .2s,background .2s,box-shadow .2s}.ck:hover{border-color:#ffffff38}
.ck:has(input:checked){border-color:#5eead4;background:#5eead41f;box-shadow:0 0 0 3px #5eead41f}
.ghost{border-color:#ffffff2e;background:#ffffff0f;transition:background .2s,border-color .2s}.ghost:hover{background:#ffffff1b;border-color:#5eead480}
.tcard{border-color:#ffffff1f;background:linear-gradient(160deg,#ffffff12,#ffffff06);box-shadow:inset 0 1px 0 #ffffff1a}
.foot{font-size:12px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}
/* choice cards: same look as the "How much detail" cards (round selector, soft card, teal when chosen) */
.ck{display:grid;grid-template-columns:18px 1fr;column-gap:12px;row-gap:0;align-items:start;padding:12px 14px;border-radius:14px;border:1px solid rgba(127,150,190,.35);background:rgba(127,150,190,.08);cursor:pointer;font-size:15px;transition:border-color .2s,background .2s,box-shadow .2s}
.ck:hover{border-color:rgba(94,234,212,.55)}
.ck input{grid-row:1/3;appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:2px 0 0;border-radius:50%;border:2px solid #fff;background:#fff;flex:none;cursor:pointer;transition:background .15s,box-shadow .15s}
.ck input:checked{background:#5eead4;box-shadow:inset 0 0 0 3px #fff}
.ck input:focus-visible{outline:2px solid #5eead4;outline-offset:2px}
.ck>span{font-weight:700;font-size:15px;min-width:0}.ck>span b{display:block;font-size:15px}
.ck small,.ck>span small{display:block;grid-column:2;margin:2px 0 0;color:#9fb4d6;font-size:12.5px;font-weight:400;line-height:1.4;opacity:.9}
.ck:has(input:checked){border-color:#5eead4;background:rgba(94,234,212,.13);box-shadow:0 0 0 3px rgba(94,234,212,.14)}
.ck:has(input:disabled){opacity:.5}