#account{background:linear-gradient(#060d18d9,#060c16ed),url('/assets/crownspire-moonlit.webp') center 52%/cover;isolation:isolate}
#account .navtop{position:relative;z-index:5}.letter-stage{position:relative;width:100%;max-width:430px;margin:auto;perspective:1200px;padding:30px 8px 40px;isolation:isolate}
.letter-envelope{position:absolute;inset:30% 0 5%;background:linear-gradient(145deg,#233344,#101c2b);border:1px solid #8393a477;box-shadow:0 20px 50px #0009;border-radius:2px;z-index:-1;opacity:0}
.account-letter{position:relative;border:1px solid #bcc7d3!important;border-radius:1px!important;background:radial-gradient(ellipse at 20% 10%,#e0e5e9a8,transparent 60%),repeating-linear-gradient(3deg,#9baabc08 0 1px,transparent 1px 4px),linear-gradient(115deg,#c4cdd7,#a8b7c7 60%,#bec8d2)!important;color:#192a3d;box-shadow:0 12px 32px #0007,inset 0 0 0 5px #b7c3d0,inset 0 0 0 6px #54677c88!important;padding:26px 24px 22px!important;gap:9px!important;transform:rotate(-.7deg);z-index:1}
.account-letter:before{content:'';position:absolute;inset:10px;pointer-events:none;border:1px solid #53677b70}
.letter-heading{font:36px Georgia,serif;text-align:center;line-height:1;color:#263e55}.letter-kicker{text-align:center;font:10px Cinzel,Georgia,serif;letter-spacing:.16em;color:#344c63;margin-bottom:8px}.account-letter h2{text-align:center;font-family:'Cormorant Garamond',Georgia,serif!important;font-size:31px;line-height:1.05;font-variant:small-caps;font-weight:500}.account-letter .tip{color:#354b62;font-size:14px;line-height:1.35;text-align:center;margin:6px 0 8px}.account-letter label{color:#273d55;font-family:'EB Garamond',Georgia,serif;font-size:15px;margin:2px 0}.account-letter input{background:#e4e9edb3;color:#14273d;border:1px solid #647b93;padding:12px;border-radius:0}.account-letter input:focus{outline:2px solid #415e7b;outline-offset:2px}.account-letter .orn{min-height:47px;font-size:11px;letter-spacing:.02em}.account-letter #loginError{color:#7c203b;font-size:13px;min-height:0}.account-letter #loginError:empty{display:none}
.letter-pocket{position:absolute;inset:48% 0 5%;pointer-events:none;z-index:3;background:linear-gradient(155deg,#3c4f64,#192b3f 52%,#293c50);clip-path:polygon(0 0,50% 41%,100% 0,100% 100%,0 100%);filter:drop-shadow(0 -1px 1px #b6c6d6);opacity:0}
.letter-flap{position:absolute;top:29%;left:0;right:0;height:35%;transform-origin:50% 0;backface-visibility:hidden;pointer-events:none;z-index:4;opacity:0;background:linear-gradient(160deg,#4d5e72,#263b50);clip-path:polygon(0 0,100% 0,50% 97%);filter:drop-shadow(0 2px 1px #000);display:grid;place-items:center}
.letter-wax{width:62px;height:62px;border:4px double #9d4b61;border-radius:50%;background:radial-gradient(circle at 35% 25%,#994358,#541426 70%);color:#bc8390;font:32px 'Cormorant Garamond',Georgia,serif;display:grid;place-items:center;box-shadow:0 4px 10px #0008;margin-top:15px;text-shadow:0 1px 2px #200}
#account.letter-opening .letter-stage{animation:letter-arrive 1s both}
#account.letter-opening .account-letter{animation:letter-unfold 2.2s cubic-bezier(.2,.65,.2,1) both}
#account.letter-opening .letter-flap{animation:flap-open 1.45s ease-in-out both}
#account.letter-opening .letter-pocket{animation:pocket-away 2.3s ease both}
#account.letter-opening .letter-envelope{animation:envelope-away 2.3s ease both}
#account.letter-opening .account-letter>*{animation:ink-appear 2s both}
@keyframes letter-arrive{from{opacity:0;transform:translateY(45px) scale(.86)}to{opacity:1;transform:none}}
@keyframes flap-open{0%,15%{opacity:1;transform:rotateX(0)}65%{opacity:1;transform:rotateX(-170deg)}100%{opacity:0;transform:rotateX(-180deg)}}
@keyframes letter-unfold{0%,20%{transform:translateY(48px) scale(.84,.55) rotate(-2deg);filter:brightness(.7)}65%{transform:translateY(-18px) scale(.98) rotate(-.7deg);filter:brightness(1)}100%{transform:rotate(-.7deg)}}
@keyframes pocket-away{0%,40%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(90px)}}
@keyframes envelope-away{0%,40%{opacity:1}100%{opacity:0;transform:translateY(90px)}}
@keyframes ink-appear{0%,45%{opacity:0}100%{opacity:1}}
#academyTransition{position:absolute;inset:0;z-index:50;pointer-events:none;display:none;place-items:center;background:radial-gradient(ellipse at center,#34516caa,#060d18f5 70%);opacity:0}
#academyTransition.is-transitioning{display:grid;animation:threshold-veil 1.15s ease-in-out both}
.transition-sigil{position:absolute;font:70px Georgia,serif;color:#d1deee;text-shadow:0 0 35px #c4deff}
.transition-ring{position:relative;width:145px;height:145px;border:1px solid #bdcee066;border-radius:50%;box-shadow:0 0 40px #b7d6ff22,inset 0 0 40px #b7d6ff22;animation:ring-turn 1.15s ease both}.transition-ring:before{content:'';position:absolute;inset:14px;border:1px solid #bdcee055;transform:rotate(45deg)}
@keyframes threshold-veil{0%{opacity:0}42%,62%{opacity:1}100%{opacity:0}}
@keyframes ring-turn{from{transform:scale(.7) rotate(-30deg)}to{transform:scale(1.2) rotate(25deg)}}
#entry.departing .entry-art{transition:transform 1.1s ease,filter 1.1s ease;transform:scale(1.08);filter:blur(3px)}
@media(max-height:720px){.letter-stage{padding:8px 3px 22px}.account-letter{padding:20px!important;gap:7px!important}.letter-heading{font-size:28px}.letter-kicker{margin-bottom:3px}.account-letter h2{font-size:27px}.account-letter .tip{font-size:13px}.account-letter .orn{min-height:43px}}
@media(prefers-reduced-motion:reduce){#account.letter-opening *,#academyTransition.is-transitioning{animation-duration:.01ms!important;animation-delay:0s!important}#entry.departing .entry-art{transition:none;transform:none;filter:none}}