.account-world{--aw-evening:0;--aw-night:0;--aw-sun:1;--aw-sun-x:800px;--aw-sun-y:150px;--aw-moon-x:550px;--aw-moon-y:150px;position:relative;width:min(100%,420px);margin:20px 0 0;isolation:isolate}
.account-world svg{display:block;width:100%;height:auto;overflow:hidden;border-radius:9%;box-shadow:0 16px 38px #00000020;-webkit-user-select:none;user-select:none;cursor:default}
.account-world svg text{-webkit-user-select:none;user-select:none;cursor:default}
.aw-evening{opacity:var(--aw-evening)}.aw-night,.aw-stars{opacity:var(--aw-night)}
.aw-sun{transform:translate(var(--aw-sun-x),var(--aw-sun-y));opacity:var(--aw-sun)}
.aw-moon{transform:translate(var(--aw-moon-x),var(--aw-moon-y));opacity:var(--aw-night)}
.aw-cloud{opacity:calc(.85 - var(--aw-night)*.6);filter:brightness(calc(1 - var(--aw-night)*.4));animation:aw-cloud-drift 58s linear infinite}
.aw-cloud-a{animation-delay:-12s;transform:translateX(65px)}
.aw-cloud-b{animation-duration:76s;animation-delay:-49s;transform:translateX(800px)}
.aw-traffic{filter:brightness(calc(1 - var(--aw-night)*.4));animation:aw-flight 14s linear infinite}
.aw-traffic-near{animation-delay:-5s;transform:translate(345px,0)}
.aw-traffic-far{animation-duration:22s;animation-delay:-18s;opacity:.85;transform:translate(1000px,0)}
.aw-water{opacity:.72;animation:aw-water 4.4s ease-in-out infinite alternate;transform-origin:50% 65%}
.aw-ripples{opacity:.22;animation:aw-ripple 3.6s ease-in-out infinite alternate}
.aw-clock{font:500 24px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.4px;fill:#e1ebc9;font-variant-numeric:tabular-nums}
.aw-motion{position:absolute;right:14px;top:14px;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid #ffffff65;background:#19343bbf;color:#f5ead0;font:14px system-ui;cursor:pointer;box-shadow:none}
.aw-motion:hover{background:#19343b}.aw-motion:focus-visible{outline:2px solid #ffe4a0;outline-offset:3px}
.aw-caption{font-size:10px;letter-spacing:.07em;color:var(--muted);text-align:center;margin-top:12px}
.account-world[data-paused] :is(.aw-cloud,.aw-traffic,.aw-water,.aw-ripples){animation-play-state:paused}
@keyframes aw-flight{from{transform:translate(-230px,28px)}to{transform:translate(1320px,-35px)}}
@keyframes aw-cloud-drift{from{transform:translateX(-580px)}to{transform:translateX(1300px)}}
@keyframes aw-water{from{transform:translate(-3px,-1px) scaleY(.998)}to{transform:translate(4px,2px) scaleY(1.003)}}
@keyframes aw-ripple{from{transform:translate(-9px,0);opacity:.07}to{transform:translate(12px,3px);opacity:.3}}
@media(prefers-reduced-motion:reduce){.account-world :is(.aw-cloud,.aw-traffic,.aw-water,.aw-ripples){animation:none}.aw-motion{display:none}}
@media(min-width:761px) and (max-height:820px){.account-page .account-world{width:min(100%,clamp(220px,43svh,350px));margin-top:12px}.aw-caption{margin-top:8px}}
.aw-dawn{opacity:var(--aw-dawn,0)}

/* Login: one scene shared by the desktop column and the cropped mobile header. */
.account-page .account-login{grid-template-columns:minmax(0,460px) minmax(0,500px);grid-template-areas:"intro form" "art form";column-gap:clamp(32px,5vw,72px);row-gap:20px;max-width:1032px;align-items:start}
.account-login .account-intro{grid-area:intro}
.account-login .account-intro h1{margin:16px 0 20px}
.account-login .account-intro p{margin:0;max-width:410px}
.account-page .account-login>.account-world{grid-area:art;align-self:end;width:100%;margin:0}
.account-login>.account-world .aw-caption{position:absolute;top:100%;width:100%;margin-top:12px}
.account-login>.account-card{grid-area:form;align-self:end;min-width:0}
@media(min-width:701px) and (max-height:820px){
 .account-page .account-login{grid-template-columns:minmax(0,clamp(260px,43svh,350px)) minmax(0,500px);max-width:calc(clamp(260px,43svh,350px) + 500px + clamp(32px,5vw,72px));row-gap:14px}
 .account-page .account-login>.account-world{width:min(100%,clamp(260px,43svh,350px))}
 .account-login .account-intro h1{font-size:clamp(30px,2.5vw,36px);margin:10px 0 14px}
}
@media(max-width:700px){
 .account-page .account-login{grid-template-columns:minmax(0,1fr);grid-template-areas:"form";gap:0;max-width:460px;isolation:isolate}
 .account-login>.account-card{align-self:start}
 .account-page .account-login>.account-world{grid-area:form;align-self:start;justify-self:center;width:calc(100% - 2px);height:112px;margin:1px 0 0;overflow:hidden;border-radius:21px 21px 0 0;z-index:1}
 .account-login>.account-world svg{position:absolute;top:0;left:0;transform:translateY(-12%);border-radius:0;box-shadow:none}
 .account-login .aw-traffic-near{animation-name:aw-mobile-flight;transform:translate(345px,65px)}
 .account-login>.account-world::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#101e2cdd 0%,#101e2ca8 44%,#101e2c15 100%);pointer-events:none}
 .account-login>.account-world .aw-caption{display:none}
 .account-login .aw-motion{z-index:1;width:34px;height:34px;top:10px;right:10px}
 .account-login>.account-card>.eyebrow,.account-login>.account-card>h2{position:relative;z-index:2;width:fit-content;max-width:calc(100% - 44px);color:#fff3dd;text-shadow:0 1px 5px #0008;pointer-events:none}
 .account-login>.account-card>.eyebrow{color:#f4dca8}
 .account-login>.account-card>.account-subtitle{margin-top:30px}
 .account-login:has(.account-form :is(input,select,textarea):focus) :is(.aw-cloud,.aw-traffic,.aw-water,.aw-ripples){animation-play-state:paused}
}

@keyframes aw-mobile-flight{from{transform:translate(-230px,65px)}to{transform:translate(1320px,65px)}}