/* The same moonlit academy identity across account entry and learning. */
body.auth-gated{background:#000;color:#ddd;overflow-x:hidden}
body.auth-gated #account:has(.auth-layout){display:grid!important;place-items:center;min-height:100vh;min-height:100svh;padding:clamp(24px,5vh,64px) max(16px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#080808;position:relative;isolation:isolate}
body.auth-gated #account:has(.auth-layout):before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(#0009,#000b),url('academy-night.jpeg') center/cover;filter:grayscale(1);pointer-events:none}
body #accountPanel:has(.auth-layout){width:100%;max-width:960px;margin:0 auto}
body #accountPanel .auth-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch;gap:0;width:100%;max-width:960px;margin:0;border:1px solid #484848;border-radius:8px;background:#101010;box-shadow:0 24px 80px #0009;overflow:hidden}
body #accountPanel .auth-layout>.auth-introduction{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;padding:32px;border-right:1px solid #343434;background:#111;position:relative}
.auth-scholar-stage{position:relative;isolation:isolate;display:grid;place-items:center;width:calc(100% + 64px);min-height:210px;margin:-32px -32px 28px;overflow:hidden;background:#191919;border-bottom:1px solid #333}
.auth-scholar-stage:before{content:'';position:absolute;inset:0;z-index:-2;background:url('academy-night.jpeg') center 30%/cover;filter:grayscale(1) brightness(.75);image-rendering:pixelated}
.auth-scholar-stage:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#0002,transparent 30%,#111)}
.auth-scholar-stage svg{display:block;width:180px;height:150px;overflow:visible;shape-rendering:crispEdges;filter:drop-shadow(0 6px 4px #0008);animation:scholar-hover 3.2s ease-in-out infinite}
.auth-scholar-stage .scholar-cap{transform-origin:48px 30px;animation:scholar-cap-nod 5s steps(4,end) infinite}
body #accountPanel .auth-introduction>.eyebrow{font:9px/1.6 'Academy Pixel',monospace;letter-spacing:1.5px;margin:0 0 12px;color:#aaa}
body #accountPanel .auth-introduction h3{font:clamp(22px,2.5vw,30px)/1.5 'Academy Pixel',monospace;letter-spacing:-.5px;margin:20px 0 14px;text-wrap:balance;color:#e0e0e0}
body #accountPanel .auth-welcome-line{font-size:13px;line-height:1.8;margin:0;max-width:32ch;color:#aaa}
body #accountPanel .auth-instagram{margin:0;font-size:11px;color:#aaa;gap:8px}
body #accountPanel .auth-layout>form,body #accountPanel .auth-layout>.auth-verification-card{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:16px;margin:0;padding:32px;background:#111}
body #accountPanel .auth-mode-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0 0 8px;padding:4px;border:1px solid #333;border-radius:5px;background:#090909}
body #accountPanel .auth-mode-tabs button{min-height:44px;padding:10px 8px;border:1px solid transparent;border-radius:3px;background:transparent;color:#999;font-size:12px;line-height:1.4;white-space:nowrap}
body #accountPanel .auth-mode-tabs button[aria-pressed=true]{border-color:#555;background:#292929;color:#eee}
body #accountPanel #authForm>label{display:block;margin:0;font-size:12px;line-height:1.6;color:#bbb;min-width:0}
body #accountPanel #authForm input{display:block;width:100%;min-width:0;min-height:48px;margin:7px 0 0;padding:12px 14px;font-size:16px;line-height:1.5;border:1px solid #454545;border-radius:5px;background:#191919;color:#eee;box-sizing:border-box;color-scheme:dark}
body #accountPanel #authForm input:focus{border-color:#aaa;outline:2px solid #ffffff14;outline-offset:2px}
body #accountPanel .auth-password-field{display:block;position:relative;width:100%}
body #accountPanel .auth-password-field input{padding-right:50px}
body #accountPanel .auth-password-toggle{position:absolute;right:2px;top:2px;bottom:2px;width:44px;min-height:44px;display:grid;place-items:center;margin:0;padding:10px;transform:none;border:0;background:transparent;color:#aaa}
body #accountPanel #authForm>.button{width:100%;min-height:48px;margin:4px 0 0;padding:12px 16px;border:1px solid #777;border-radius:5px;background:#303030;color:#eee;font-size:13px;line-height:1.5;justify-content:center;transition:background .2s,border-color .2s}
body #accountPanel #authForm>.button:hover{background:#3b3b3b;border-color:#aaa}
body #accountPanel .auth-switch{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:0}
body #accountPanel .auth-switch button{min-height:44px;padding:8px 0;font-size:11px;line-height:1.5;color:#aaa}
body #accountPanel #authStatus,body #accountPanel #passwordMatchStatus{margin:0;line-height:1.6;font-size:12px;overflow-wrap:anywhere}
body #accountPanel #authStatus:empty,body #accountPanel #passwordMatchStatus:empty{display:none}
body #accountPanel .auth-stay-note{margin:0;padding-top:12px;border-top:1px solid #333;font-size:11px;color:#777;line-height:1.6}
body #accountPanel #signupInviteCard{margin:0 0 4px;border:1px solid #414141;border-radius:6px;overflow:hidden;flex-shrink:0}
body #accountPanel #signupInviteCard[hidden]{display:none!important}
body #accountPanel .auth-layout button:focus-visible{outline:2px solid #aaa;outline-offset:3px}
@media(max-width:760px){body #accountPanel .auth-layout{grid-template-columns:minmax(0,1fr);max-width:480px}body #accountPanel:has(.auth-layout){max-width:480px}body #accountPanel .auth-layout>.auth-introduction{padding:24px;border-right:0;border-bottom:1px solid #333}body #accountPanel .auth-layout>form,body #accountPanel .auth-layout>.auth-verification-card{padding:24px;gap:14px}.auth-scholar-stage{width:calc(100% + 48px);min-height:148px;margin:-24px -24px 20px}.auth-scholar-stage svg{width:146px;height:122px}body #accountPanel .auth-introduction h3{font-size:23px;margin:14px 0 10px}body #accountPanel .auth-welcome-line{max-width:none;font-size:12px}}
@media(max-width:380px){body #accountPanel .auth-layout>.auth-introduction,body #accountPanel .auth-layout>form{padding:18px}.auth-scholar-stage{width:calc(100% + 36px);margin:-18px -18px 18px}body #accountPanel .auth-mode-tabs button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.auth-scholar-stage svg,.auth-scholar-stage .welcome-flight-wing,.auth-scholar-stage .scholar-cap{animation:none}body #accountPanel #authForm>.button{transition:none}}
/* Center the academy introduction consistently across account modes. */
body #accountPanel .auth-layout>.auth-introduction{align-items:center;text-align:center;justify-content:flex-start;gap:0}
body #accountPanel .auth-introduction>.eyebrow{width:100%;margin:0 0 8px;text-align:center;letter-spacing:1.2px;line-height:1.6}
body #accountPanel .auth-introduction>.auth-instagram{display:inline-flex;align-items:center;justify-content:center;align-self:center;width:auto;max-width:100%;margin:0 auto;padding:8px 0;gap:8px;min-height:36px;line-height:1.5;text-align:center}
body #accountPanel .auth-introduction>.auth-instagram svg{flex:0 0 16px;width:16px;height:16px}
body #accountPanel .auth-introduction>h3{width:100%;max-width:100%;margin:14px 0 0;text-align:center;line-height:1.5;letter-spacing:-.4px;font-size:clamp(20px,2.4vw,28px);text-wrap:balance;overflow-wrap:normal}
body #accountPanel .auth-scholar-stage{flex-shrink:0;margin-bottom:24px}
body #accountPanel .auth-introduction .auth-welcome-line{display:none}
@media(max-width:760px){body #accountPanel .auth-introduction>h3{font-size:clamp(19px,5.2vw,25px);margin-top:12px}body #accountPanel .auth-scholar-stage{margin-bottom:20px}}
/* A shared academy masthead and translucent account shell. */
body.auth-gated #account:has(.auth-layout){background:transparent}
body.auth-gated #account:has(.auth-layout):before{background:linear-gradient(#0005,#0009),url('academy-night.jpeg') center/cover}
body #accountPanel .auth-layout{background:rgba(15,15,15,.72);border-color:#ffffff24;box-shadow:0 20px 70px #0007;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body #accountPanel .auth-layout>.auth-academy-header{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:25px 20px 19px;background:linear-gradient(#ffffff05,transparent);border-bottom:1px solid #ffffff20;min-width:0;text-align:center}
body #accountPanel .auth-academy-header h2{font:clamp(20px,3.5vw,32px)/1.5 'Academy Pixel',monospace;margin:0;padding:0;color:#d1d1d1;letter-spacing:.5px;white-space:nowrap;animation:auth-title-shimmer 6s ease-in-out infinite;text-shadow:2px 2px #0008}
.auth-header-pixels{display:flex;align-items:center;gap:7px;height:4px}.auth-header-pixels i{display:block;width:3px;height:3px;background:#aaa;animation:auth-header-twinkle 3s steps(3,end) infinite}.auth-header-pixels i:nth-child(2){animation-delay:-1s}.auth-header-pixels i:nth-child(3){animation-delay:-2s}
body #accountPanel .auth-layout>.auth-introduction{background:rgba(12,12,12,.3);border-color:#ffffff18}
body #accountPanel .auth-layout>form,body #accountPanel .auth-layout>.auth-verification-card{background:rgba(17,17,17,.46)}
body #accountPanel .auth-scholar-stage{background:transparent;border-color:#ffffff12}
body #accountPanel .auth-scholar-stage:before{opacity:.75}
body #accountPanel .auth-scholar-stage:after{background:linear-gradient(#0001,transparent 35%,#101010b3)}
body #accountPanel .auth-introduction>.auth-instagram{display:inline-flex;flex-wrap:nowrap;justify-content:center;column-gap:5px;letter-spacing:0;width:max-content;max-width:100%;padding:8px 4px}
body #accountPanel .auth-introduction>.auth-instagram>span{flex:0 0 auto;width:auto;margin:0;letter-spacing:0}
body #accountPanel .auth-instagram>span.auth-social-arrow{display:inline-block;margin:0 0 0 -2px;padding:0;font-size:12px;line-height:1;transform:none}
body #accountPanel #authForm input{background:#151515a6;border-color:#ffffff30}
body #accountPanel .auth-mode-tabs{background:#08080885;border-color:#ffffff20}
body #accountPanel .auth-mode-tabs button[aria-pressed=true]{background:#ffffff10;border-color:#ffffff35}
@keyframes auth-title-shimmer{0%,100%{color:#b8b8b8;text-shadow:2px 2px #0008}50%{color:#e8e8e8;text-shadow:2px 2px #0008,0 0 16px #ffffff18}}
@keyframes auth-header-twinkle{0%,100%{opacity:.3}50%{opacity:.9}}
@media(max-width:760px){body #accountPanel .auth-layout>.auth-academy-header{padding:20px 16px 16px}body #accountPanel .auth-academy-header h2{font-size:clamp(19px,5.5vw,27px);letter-spacing:0}}
@media(prefers-reduced-motion:reduce){body #accountPanel .auth-academy-header h2,.auth-header-pixels i{animation:none}}
@supports not (backdrop-filter:blur(8px)){body #accountPanel .auth-layout{background:#111e}}
/* Account entry uses its own masthead, without the site navigation above it. */
body.auth-gated:is([data-auth-screen="login"],[data-auth-screen="signup"])>header{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important}
body.auth-gated:is([data-auth-screen="login"],[data-auth-screen="signup"]){--hero-header-height:0px;--academy-header-height:0px}
body.auth-gated:is([data-auth-screen="login"],[data-auth-screen="signup"]) main{margin-top:0;padding-top:0;min-height:100svh}
body.auth-gated:is([data-auth-screen="login"],[data-auth-screen="signup"]) #account:has(.auth-layout){min-height:100svh;padding-top:max(24px,env(safe-area-inset-top,0px));padding-bottom:max(24px,env(safe-area-inset-bottom,0px));align-items:center}
@media(max-width:760px){body.auth-gated:is([data-auth-screen="login"],[data-auth-screen="signup"]) #account:has(.auth-layout){align-items:start;padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}}