.login{max-width:480px;margin:5vh auto}.login form{display:grid;gap:10px;margin:28px 0}.login form button[type=submit]{margin-top:12px}.login label:not(:first-child){margin-top:8px}.login p{color:var(--muted)}.login h2{font-size:30px}.login details{border-top:1px solid var(--line);padding:10px 0}.login summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:13px}.login details .hint{margin:0}.login-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);max-width:1120px;margin:4vh auto 0;align-items:center}.login-story{min-width:0}.login-story h1{font-size:clamp(44px,5vw,68px);line-height:1.08;max-width:520px}.login-story>p:not(.eyebrow){max-width:360px;font-size:15px;line-height:1.8}.login-story .login-caption{font-size:12px;color:var(--indigo);margin-top:20px}.login-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px;box-shadow:0 20px 70px -40px #30256d25;min-width:0}.login-card>p{font-size:13px}.login-card .eyebrow{font-size:10px;color:var(--indigo)}.password-field{position:relative}.password-field input{padding-right:76px}.password-toggle{position:absolute;right:4px;top:3px;min-height:42px;padding:8px 12px;border:0;background:transparent;color:var(--indigo);font-size:11px}.form-error{background:#fbf2f1;border-left:2px solid #a14037;padding:12px 16px;color:#87382f!important;font-size:13px}.login-card:has(#invite-login[open]) #account-login-form,.login-card:has(#invite-login[open])>h2{display:none}
@media(max-width:800px){.login-layout{gap:32px;grid-template-columns:1fr;max-width:480px;margin:8px auto}.login-story h1{font-size:40px}.login-story>p:not(.eyebrow){font-size:14px;max-width:420px}.login-caption{display:none}.login-card{padding:28px}.login-story{padding:8px 0}.login-card h2{font-size:27px}.login{margin:20px auto}}@media(max-width:400px){.login-card{padding:22px}.login-story h1{font-size:36px}}

/* Use the same full-page liquid scene as mietti.fi, held completely still. */
.login-layout{isolation:isolate;min-height:calc(100svh - 220px);margin-top:0}
.login-liquid-surface{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 25% 45%,#dce1ff,transparent 65%),radial-gradient(ellipse at 80% 30%,#eee1f8,transparent 60%),#f5f8ff}
.login-liquid-surface canvas{display:block;width:100%;height:100%}
.login-liquid-surface:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#ffffff80,transparent 30%,transparent 70%,#fff)}
.login-card{background:#fffffff2;border-color:#ffffffb3;box-shadow:0 20px 70px -35px #42398020}
.login .eyebrow{color:var(--indigo)}
body:has(#login:not([hidden])) .topbar{position:relative;z-index:1;border-color:#ffffff80;background:transparent}
@media(max-width:800px){.login-layout{min-height:0;gap:24px;margin-top:0}.login-card{background:#fffffff2}.login-liquid-surface:after{background:linear-gradient(180deg,#ffffff80,transparent 40%,#ffffffc0)}}

.login-layout.login-leaving{position:fixed;margin:0;z-index:2;pointer-events:none}

.login-footer{margin:16px 0 0;text-align:right}.login-footer a{font-size:10px;color:var(--muted);text-decoration:none;padding:8px 0;display:inline-block}.login-footer a:hover{text-decoration:underline}
#key-login{border-top:0;padding:0}#key-login>summary{display:none}