:root{color-scheme:dark;--ice:#afe1ff;--cyan:#00c4ff;--text:#d1eeff;--muted:#8faabd}*{box-sizing:border-box}body{margin:0;background:#02060c;color:var(--text);font-family:'Century Gothic','Trebuchet MS',Arial,sans-serif;font-size:16px}body:before{content:'';position:fixed;inset:74px 0 0;background:linear-gradient(0deg,#020812c9,transparent 45%),url('assets/realm.png') center center/cover no-repeat;z-index:-2}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer;color:inherit}a:focus-visible,button:focus-visible{outline:2px solid #8feaff;outline-offset:5px}svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}button span[data-icon],a span[data-icon]{display:inline-flex}input{min-width:0}.topbar{height:76px;display:flex;align-items:center;padding:0 4%;gap:55px;background:linear-gradient(90deg,#010308,#020a13);border-bottom:1px solid #10608d}.wordmark{display:flex;align-items:center;gap:19px;font-size:18px;letter-spacing:6px;white-space:nowrap}.wordmark small{display:block;font-size:10px;letter-spacing:4px;margin-top:5px}.monogram{font-family:Georgia,serif;font-weight:bold;font-size:55px;line-height:1;color:#c0e8ff;-webkit-text-stroke:1px #52a7f3;text-shadow:0 0 8px #0562bd,2px 3px 0 #193b77}.topbar nav{display:flex;gap:clamp(20px,4vw,65px);margin-left:auto;font-size:13px;letter-spacing:1.8px}.topbar nav a:hover{color:var(--cyan)}.header-login{border:1px solid var(--cyan);border-radius:4px;display:flex;align-items:center;justify-content:center;gap:15px;min-width:178px;height:43px;font-size:15px;letter-spacing:2px;background:linear-gradient(#07192a,#020710);box-shadow:inset 0 0 20px #00458744}main{max-width:1430px;margin:auto;padding:40px 45px 34px}.landing-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(400px,1fr);gap:60px;align-items:center;padding-right:clamp(0px,5vw,70px)}.brand-panel{min-width:0;position:relative;align-self:center}.brand-logo{width:100%;display:block;mix-blend-mode:screen;clip-path:inset(0 0 16% 0);margin-top:-30px;margin-bottom:-17%;filter:drop-shadow(0 0 18px #00489744)}.brand-tagline{display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;font-size:14px;font-style:italic;letter-spacing:4px;margin:14px 0 0;text-shadow:0 2px 10px #000}.brand-tagline span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#00c6ff);box-shadow:0 0 5px #008cff}.brand-tagline span:last-child{transform:rotate(180deg)}.auth-panel{position:relative;margin-top:27px;padding:42px 39px 29px;border:1px solid #59b6e3;outline:1px solid #086491;outline-offset:5px;background:linear-gradient(120deg,#020a13f5,#01050bf7 65%,#051629f0);box-shadow:inset 0 0 26px #0a447933,0 0 10px #00a2ff66;min-height:577px}.frame-gem{position:absolute;left:50%;top:-26px;transform:translateX(-50%);font-size:35px;color:#abe9ff;line-height:1;background:#041021;text-shadow:0 0 7px #00acff}.frame-corner{position:absolute;width:20px;height:20px;border-color:#92dcff;border-style:double;filter:drop-shadow(0 0 3px #068bea)}.top-left{top:4px;left:4px;border-width:3px 0 0 3px}.top-right{top:4px;right:4px;border-width:3px 3px 0 0}.bottom-left{bottom:4px;left:4px;border-width:0 0 3px 3px}.bottom-right{bottom:4px;right:4px;border-width:0 3px 3px 0}.welcome{text-align:center;font-size:14px;letter-spacing:8px;color:#a4e0ff;margin:0 0 10px}h1{font:600 24px/1.3 Georgia,'Times New Roman',serif;letter-spacing:5px;text-align:center;margin:0;color:#8dd1ff;white-space:nowrap}.ornament{display:flex;align-items:center;justify-content:center;gap:0;font-size:20px;color:var(--cyan);text-shadow:0 0 8px #009bff;height:40px}.ornament span{height:1px;background:linear-gradient(90deg,transparent,#00baff);width:36%}.ornament span:last-child{transform:rotate(180deg)}.form-subtitle{text-align:center;font-size:12px;line-height:1.6;letter-spacing:2.4px;margin:5px 0 23px}.form-row{display:flex;align-items:center;height:51px;border:1px solid #466b84;border-radius:5px;background:linear-gradient(125deg,#0b1824c4,#07111bba);padding:0 13px;gap:17px;margin-bottom:13px;transition:border-color .15s}.form-row:focus-within{border-color:var(--cyan);box-shadow:0 0 0 2px #00bbff20}.form-row input{background:transparent;border:0;outline:0;width:100%;color:#e4f5ff;font-size:14px;height:100%}.form-row input::placeholder{color:#91a8bc;opacity:1}.form-row>span{color:#bbdcf4}.eye-button{padding:0;border:0;background:none;color:#c7e5ff;display:flex}.form-options{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-top:17px;gap:10px}.form-options label{display:flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}input[type=checkbox]{appearance:none;width:18px;height:18px;border:1px solid #c0e8ff;border-radius:2px;background:#030a11;margin:0;display:grid;place-items:center;cursor:pointer}input[type=checkbox]:checked{background:#0783c6}input[type=checkbox]:checked:after{content:'✓';color:white;font-size:15px}.form-options a,.account-prompt a,.text-button{color:#02d0ff;text-decoration:underline;text-underline-offset:3px}.form-message{font-size:13px;line-height:1.5;color:#ffb7b7;margin:14px 0}.form-message:empty{height:13px;margin:7px 0}.glow-button{width:100%;min-height:55px;display:flex;align-items:center;justify-content:center;gap:18px;background:linear-gradient(#063b80,#041634 50%,#002453);border:1px solid #00c6ff;border-radius:4px;box-shadow:inset 0 0 15px #006df3,0 0 12px #009dff88;color:#c5e5ff;font-size:16px;letter-spacing:3px;padding:12px 8px;text-align:center}.glow-button:hover{filter:brightness(1.3)}.glow-button:disabled{opacity:.6;cursor:wait}.or{display:flex;align-items:center;gap:20px;font-size:12px;letter-spacing:3px;margin:23px 2px 15px}.or span{height:1px;background:#49778d;flex:1}.discord-button{border:1px solid #4e7c9c;border-radius:4px;background:linear-gradient(110deg,#0b1a2b,#091526);display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:49px;font-size:12px;letter-spacing:1.2px;color:#a2d6ff;padding:10px}.discord-button:hover{border-color:var(--cyan);background:#0d2740}.discord-button svg{width:31px;height:31px;fill:#84b8fa;stroke:none}.account-prompt{text-align:center;font-size:13px;margin:22px 0 0;line-height:1.7}.account-prompt a{margin-left:8px}.field-hint{color:var(--muted);font-size:12px;line-height:1.6;margin:0 0 12px}.destinations{display:grid;grid-template-columns:repeat(4,1fr);max-width:1030px;margin:49px 0 6px}.destinations a{display:flex;align-items:center;flex-direction:column;text-align:center;gap:9px;padding:0 15px;position:relative;text-shadow:0 2px 8px #000}.destinations a:not(:last-child):after{content:'';height:76px;width:1px;position:absolute;right:0;bottom:0;background:linear-gradient(transparent,#508b9e 20%,#508b9e)}.destinations svg{width:45px;height:45px;color:#84c9ff;filter:drop-shadow(0 0 7px #0061aa)}.destinations strong{font-weight:400;letter-spacing:3px;font-size:14px}.destinations small{font-size:10px;letter-spacing:1.5px;white-space:nowrap}.destinations a:hover{color:#24d2ff}.destinations a:hover svg{color:#ccf7ff}footer{position:relative;border-top:1px solid #075586;background:linear-gradient(#01060ded,#01040a);display:flex;justify-content:space-between;padding:35px 4%;font-size:12px;letter-spacing:4px}footer:before{content:'✧◇✧';position:absolute;top:-12px;left:50%;transform:translateX(-50%);color:#00bfff;background:#020812;padding:0 10px;text-shadow:0 0 10px #009dff}footer i{font-size:11px;letter-spacing:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}dialog{max-width:490px;width:calc(100% - 32px);background:linear-gradient(135deg,#0a192a,#02070f);color:var(--text);border:1px solid #40b5f0;border-radius:6px;padding:38px;box-shadow:0 0 50px #0066bb55}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}dialog .welcome{font-size:11px;letter-spacing:3px;text-align:left}dialog h2{font-family:Georgia,serif;color:#99d8ff;font-size:27px;line-height:1.3}dialog p{font-size:15px;line-height:1.7;color:#b8cfe0}.dialog-close{position:absolute;right:12px;top:6px;font-size:30px;background:none;border:0;color:#abdfff}dialog .glow-button{font-size:12px;letter-spacing:1.5px;margin-top:20px}#recovery-code{display:block;overflow-wrap:anywhere;padding:15px;margin:20px 0;background:#010810;border:1px solid #245a77;font-size:18px;color:#a8e8ff;line-height:1.6;user-select:all}#signed-in{text-align:center;line-height:1.6}#signed-in .glow-button{margin-top:35px}.text-button{background:none;border:0;margin:22px auto 0;font-size:14px;cursor:pointer}@media(min-width:1500px){main{padding-top:50px;padding-bottom:38px}.landing-grid{gap:70px}.auth-panel{min-height:585px}.destinations{margin-top:58px}}@media(max-width:1150px){.topbar{gap:24px;padding:0 25px}.wordmark{font-size:14px;letter-spacing:4px;gap:10px}.wordmark small{font-size:8px;letter-spacing:2px}.topbar nav{gap:23px;font-size:12px}.header-login{min-width:125px}.landing-grid{gap:25px;padding-right:6px;grid-template-columns:1fr 1fr}main{padding:30px 28px}.auth-panel{padding:34px 25px 25px}h1{font-size:20px;letter-spacing:3px}.brand-tagline{font-size:10px;letter-spacing:2px}.destinations{margin-top:45px}}@media(max-width:800px){.topbar{height:auto;min-height:75px;flex-wrap:wrap;padding:12px 20px;gap:12px;justify-content:space-between}.topbar nav{order:3;width:100%;justify-content:center;gap:30px;margin:0;padding:6px 0}.header-login{height:39px;min-width:103px;font-size:12px;gap:8px}.header-login svg{width:22px}.monogram{font-size:43px}.landing-grid{grid-template-columns:1fr;gap:10px;padding:0;max-width:460px;margin:auto}.brand-panel{width:310px;max-width:90%;margin:0 auto}.brand-logo{margin-top:-10px}.brand-tagline{font-size:9px;letter-spacing:1.8px;margin:8px -15px 0}.auth-panel{margin-top:30px;min-height:0;padding:37px 27px 28px}.destinations{grid-template-columns:repeat(2,1fr);row-gap:28px;margin-top:40px}.destinations a:nth-child(2):after{display:none}.destinations small{font-size:9px;letter-spacing:1px}.destinations svg{height:35px;width:35px}.destinations strong{font-size:13px}footer{gap:18px;align-items:center;flex-direction:column;padding:28px 15px;letter-spacing:3px}footer i{font-size:9px;letter-spacing:2px}body:before{inset:0;background-position:64% center}main{padding:12px 22px 30px}}@media(max-width:380px){.wordmark{font-size:11px;letter-spacing:2px}.wordmark small{font-size:7px;letter-spacing:1px}.header-login{min-width:80px}.auth-panel{padding:32px 18px 23px}h1{font-size:18px}.form-options{font-size:12px}.account-prompt{font-size:12px}.destinations small{font-size:8px}dialog{padding:28px}.topbar nav{gap:22px}}
/* Preserve the logo's dark robe against the scene; keep mobile branding on one row. */
.brand-panel:before{content:'';position:absolute;inset:-5% -6%;background:radial-gradient(ellipse,#01040bea 22%,#01050bba 49%,transparent 72%);z-index:-1}
@media(max-width:800px){.wordmark{font-size:11px;letter-spacing:2.5px;gap:8px}.wordmark small{font-size:7px;letter-spacing:1.3px}.header-login{min-width:88px}.topbar{column-gap:8px}.brand-panel:before{inset:0 -10%}}
@media(max-width:380px){.wordmark{font-size:10px;letter-spacing:1.7px}.wordmark small{font-size:6px;letter-spacing:1px}.header-login{min-width:74px;font-size:11px}.header-login svg{width:18px}}
.form-row input{font-size:16px}.form-options,.account-prompt{font-size:14px}.discord-button{font-size:14px}h1{white-space:normal}.destinations small{white-space:normal;line-height:1.5}
@media(max-width:800px){.discord-button{font-size:12px}.form-options,.account-prompt{font-size:13px}}
/* Compact landing layout: keep the complete login view inside desktop screens. */
@media(min-width:801px){
 body{min-height:100svh;display:flex;flex-direction:column}
 body:before{top:60px}
 .topbar{height:60px;flex-shrink:0;gap:32px}
 .wordmark{font-size:15px;letter-spacing:4px}.wordmark small{font-size:9px;letter-spacing:2.8px}
 .topbar nav{font-size:12px;gap:32px;letter-spacing:1.4px}
 .header-login{height:36px;min-width:135px;font-size:13px}.header-login svg{width:23px;height:23px}
 main{width:100%;max-width:1300px;flex:1;display:flex;flex-direction:column;justify-content:center;padding:22px 40px}
 .landing-grid{grid-template-columns:minmax(0,1.2fr) minmax(380px,1fr);gap:48px;padding-right:30px}
 .brand-panel{width:min(100%,55svh,510px);justify-self:center}
 .brand-logo{margin-top:0}.brand-tagline{font-size:11px;letter-spacing:2.5px}
 .auth-panel{min-height:0;margin-top:14px;padding:28px 30px 24px}
 .welcome{font-size:13px;margin-bottom:8px}h1{font-size:22px;letter-spacing:3.5px}
 .ornament{height:32px}.form-subtitle{margin:2px 0 18px}
 .form-row{height:47px;margin-bottom:11px}.form-options{margin-top:12px}
 .form-message:empty{height:9px;margin:6px 0}.glow-button{min-height:49px}
 .or{margin:16px 2px 12px}.discord-button{min-height:45px}.account-prompt{margin-top:17px}
 .destinations{width:100%;max-width:980px;align-self:center;margin:27px 0 0}
 .destinations svg{width:35px;height:35px}.destinations a{gap:6px}.destinations strong{font-size:13px}.destinations a:not(:last-child):after{height:62px}
 footer{padding:21px 4%;flex-shrink:0;font-size:11px}footer i{font-size:10px}
}
@media(min-width:801px) and (max-height:850px){
 main{padding:16px 35px}.landing-grid{gap:35px}.brand-panel{width:min(100%,56svh,440px)}
 .auth-panel{padding:22px 28px 20px}.welcome{font-size:12px;margin-bottom:6px}h1{font-size:20px}
 .ornament{height:26px}.form-subtitle{margin:0 0 14px;font-size:11px}
 .form-row{height:44px;margin-bottom:10px}.form-options{margin-top:8px;font-size:13px}
 .form-message:empty{height:8px;margin:4px 0}.glow-button{min-height:46px;padding:9px 8px;font-size:14px}
 .or{margin:10px 2px}.discord-button{min-height:44px;padding:7px 10px;font-size:12px}
 .account-prompt{margin-top:14px;font-size:13px}.destinations{margin-top:22px}.destinations svg{width:31px;height:31px}
 footer{padding:16px 4%}
}
@media(min-width:801px) and (max-width:1050px){.topbar{gap:20px;padding:0 24px}.wordmark{font-size:12px;letter-spacing:2.5px}.wordmark small{font-size:8px;letter-spacing:1.6px}.topbar nav{gap:18px}.header-login{min-width:105px}.landing-grid{gap:24px;padding-right:5px;grid-template-columns:minmax(0,1fr) minmax(350px,1fr)}}
@media(max-width:800px){.brand-panel{width:245px}.topbar{min-height:65px;padding:12px 20px}.topbar nav{gap:24px;font-size:11px}.header-login{height:34px}.brand-tagline{font-size:8px;letter-spacing:1.2px}}

/* Stable branding when switching between login and account forms. */
@media(min-width:801px){main{justify-content:flex-start;padding-top:clamp(20px,calc((100svh - 650px)/2),100px)}.landing-grid{align-items:start}.brand-panel{align-self:start}}