:root{font-family:"Segoe UI",Arial,sans-serif;line-height:1.5;color:#18243a;background:#f6f8fc}*{box-sizing:border-box}body{margin:0}.login-layout{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}.welcome{background:radial-gradient(ellipse at 0 90%,#23467a55,transparent 60%),linear-gradient(140deg,#172332,#102139);padding:48px 64px;color:white;display:flex;flex-direction:column;overflow:hidden}.brand{display:flex;gap:13px;align-items:center;color:#f4f7fc;text-decoration:none;font-size:25px;letter-spacing:-.8px;font-weight:300}.brand-mark{display:grid;place-items:center;width:42px;height:45px;background:linear-gradient(140deg,#4395ff,#1454cf);border-radius:11px;font-weight:750;color:#fff;font-size:22px;box-shadow:0 8px 25px #006bff30}.welcome-copy{margin:auto 0;padding:70px 0 50px;max-width:470px}.eyebrow{font-size:11px;color:#89b6fa;letter-spacing:2.3px;font-weight:600}.welcome h1{font-size:50px;line-height:1.14;letter-spacing:-1.8px;margin:22px 0}.welcome p{font-size:16px;line-height:1.9;color:#a9bad1}.welcome small{color:#768ba8;font-size:11px}.illustration{position:relative;margin-top:44px;padding:0 0 24px 12px}.mini-card{border:1px solid #ffffff1d;background:#ffffff09;border-radius:13px;padding:23px 28px;max-width:370px;transform:rotate(-3deg);box-shadow:0 15px 40px #030b1920}.mini-card span{font-size:12px;color:#d4e3f9}.mini-bars{display:flex;align-items:end;gap:14px;height:135px;margin-top:18px;border-bottom:1px solid #ffffff17}.mini-bars i{flex:1;background:linear-gradient(#4b9fff,#2468e7);border-radius:4px 4px 0 0;height:25%}.mini-bars i:nth-child(2){height:35%}.mini-bars i:nth-child(3){height:46%}.mini-bars i:nth-child(4){height:42%}.mini-bars i:nth-child(5){height:62%}.mini-bars i:nth-child(6){height:75%}.mini-bars i:nth-child(7){height:92%;background:linear-gradient(#78c2ff,#4088ff)}.floating-note{position:absolute;bottom:0;right:0;border:1px solid #ffffff22;background:#243d5b;border-radius:8px;padding:15px 20px;font-size:12px;box-shadow:0 15px 40px #050c2330;color:#c8eddf}.login-panel{display:flex;align-items:center;justify-content:center;padding:48px}.login-card{width:100%;max-width:390px}.login-pill{display:inline-block;color:#4e80c5;background:#eaf2ff;font-size:11px;border-radius:5px;padding:5px 9px;margin-bottom:18px}.login-card h2{font-size:30px;letter-spacing:-.8px;margin:0 0 8px}.login-card p{color:#8290a4;font-size:13px;margin:0 0 34px}label{display:block;font-size:12px;font-weight:600;color:#51637e;margin-bottom:22px}input{display:block;width:100%;font:14px "Segoe UI",sans-serif;color:#263c5d;padding:14px;border:1px solid #dbe4ef;background:white;border-radius:7px;margin-top:8px}input:focus{outline:3px solid #2674f51a;border-color:#669cf5}.password-wrap{position:relative}.password-wrap input{padding-right:76px}.password-wrap button{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:none;color:#7c8ca4;font-size:11px;cursor:pointer}#submit{width:100%;background:#2674f5;border:0;border-radius:7px;font:600 13px "Segoe UI",sans-serif;color:white;padding:15px 18px;display:flex;justify-content:space-between;cursor:pointer;box-shadow:0 5px 14px #2674f51f}#submit:hover{background:#1c65de}#submit:disabled{opacity:.6;cursor:wait}.login-help{text-align:center;color:#8b97a9;font-size:11px;line-height:1.8;margin-top:26px}.test-note{border-top:1px solid #e4eaf3;margin-top:36px;padding-top:19px;text-align:center;color:#98a5b7;font-size:10px}#error{background:#fff0ee;border:1px solid #f4d6d1;color:#ae524b;border-radius:6px;padding:10px 12px;font-size:12px;margin-bottom:18px}button:focus-visible{outline:3px solid #8bb7ff;outline-offset:3px}@media(max-width:1000px){.welcome{padding:40px}.welcome h1{font-size:42px}.login-panel{padding:35px}}@media(max-width:720px){.login-layout{grid-template-columns:1fr}.welcome{padding:25px 28px;min-height:180px}.brand{font-size:22px}.brand-mark{width:34px;height:37px}.welcome-copy{padding:18px 0 0}.welcome h1{font-size:25px;letter-spacing:-.5px;margin:4px 0}.welcome h1 br{display:none}.welcome-copy .eyebrow,.welcome p,.illustration,.welcome small{display:none}.login-panel{padding:35px 28px 50px;align-items:flex-start}.login-card h2{font-size:27px}}

/* The artwork blends into the whole welcome panel, without a banner frame. */
.login-layout{grid-template-columns:minmax(0,1.2fr) minmax(400px,1fr)}
.welcome{position:relative;isolation:isolate;padding:32px 0 20px;gap:20px;background:#0c1e35;justify-content:space-between}
.welcome::before{content:"";position:absolute;inset:-50px;z-index:-1;background:radial-gradient(ellipse at 70% 70%,#0d4180 0,transparent 60%),radial-gradient(ellipse at 15% 25%,#102b4b 0,transparent 65%);opacity:.55;pointer-events:none}
.welcome .brand{position:relative;align-self:flex-start;margin:0 36px;gap:12px;font-size:26px;letter-spacing:-.8px}
.login-brand-icon{width:44px;height:44px;flex:none;filter:drop-shadow(0 5px 14px #0656ef30)}
.login-hero{display:block;width:100%;height:auto;flex-shrink:0;margin:auto 0;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 89%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 89%,transparent);-webkit-mask-composite:source-in}
.welcome small{position:relative;margin:0 36px;color:#8ca4c1}
@media(min-width:901px) and (max-height:700px){.welcome{padding-top:24px;gap:12px}.welcome .brand{font-size:23px}.login-brand-icon{width:38px;height:38px}.login-panel{padding:30px}}
@media(max-width:900px){.login-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}.welcome{min-height:auto;padding:24px 28px}.welcome .brand{margin:0;font-size:24px}.login-brand-icon{width:40px;height:40px}.welcome::before,.login-hero,.welcome small{display:none}.login-panel{padding:36px 28px 48px;align-items:center}}