/* Adapted from huangj17/login-animated-characters, MIT; see third-party notice. */
#login-screen .characters-scene {
  position: relative;
  width: 480px;
  height: 360px;
}#login-screen .character {
  position: absolute;
  bottom: 0;
  transition: transform .45s ease-out;
  transform-origin: bottom center;
}#login-screen .char-purple {
  left: 60px;
  width: 170px;
  height: 370px;
  background: #6C3FF5;
  border-radius: 10px 10px 0 0;
  z-index: 1;
}#login-screen .char-black {
  left: 220px;
  width: 115px;
  height: 290px;
  background: #2D2D2D;
  border-radius: 8px 8px 0 0;
  z-index: 2;
}#login-screen .char-orange {
  left: 0;
  width: 230px;
  height: 190px;
  background: #FF9B6B;
  border-radius: 115px 115px 0 0;
  z-index: 3;
}#login-screen .char-yellow {
  left: 290px;
  width: 135px;
  height: 215px;
  background: #E8D754;
  border-radius: 68px 68px 0 0;
  z-index: 4;
}#login-screen .eyes {
  position: absolute;
  display: flex;
  transition: transform .45s ease-out;
}#login-screen .eyeball {
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
  overflow: hidden;
}#login-screen .pupil {
  border-radius: 50%;
  background: #2D2D2D;
  transition: transform 0.1s ease-out;
}#login-screen .bare-pupil {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2D2D2D;
  transition: transform 0.7s ease-in-out;
}#login-screen .yellow-mouth {
  position: absolute;
  width: 50px;
  height: 4px;
  background: #2D2D2D;
  border-radius: 2px;
  transition: transform .45s ease-out;
}


#login-screen #purple-eyes{left:45px;top:40px;gap:28px;}
#login-screen #purple-eye-l{width:18px;height:18px;}
#login-screen #purple-pupil-l{width:7px;height:7px;}
#login-screen #purple-eye-r{width:18px;height:18px;}
#login-screen #purple-pupil-r{width:7px;height:7px;}
#login-screen #black-eyes{left:26px;top:32px;gap:20px;}
#login-screen #black-eye-l{width:16px;height:16px;}
#login-screen #black-pupil-l{width:6px;height:6px;}
#login-screen #black-eye-r{width:16px;height:16px;}
#login-screen #black-pupil-r{width:6px;height:6px;}
#login-screen #orange-eyes{left:82px;top:90px;gap:28px;}
#login-screen #orange-mouth{left:90px;top:120px;}
#login-screen #yellow-eyes{left:52px;top:40px;gap:20px;}
#login-screen #yellow-mouth{left:40px;top:88px;}
#login-screen{padding:0;background:#fff;min-height:100dvh;height:100dvh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;color:#18181b}
.login-visual{position:relative;min-width:0;min-height:560px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(140deg,#9ba0aa,#626b78)}
.login-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:24px 24px}
.login-brand{position:absolute;top:40px;left:40px;display:flex;align-items:center;gap:12px;color:#fff;font-size:17px;font-weight:600;letter-spacing:.2px}
.login-brand-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff50;border-radius:8px;font-size:21px}
#login-screen .characters-wrapper{height:420px;width:480px;display:flex;align-items:flex-end;justify-content:center;flex-shrink:0;position:relative}
#login-screen .characters-scene{width:480px;height:400px;transform-origin:center bottom}
#login-screen .char-purple{border-radius:0;background:#7025f4}
#login-screen .char-black{border-radius:0}
#login-screen .orange-mouth{position:absolute;width:28px;height:14px;background:#2d2d2d;border-radius:0 0 18px 18px;transition:transform .3s ease-out}
#login-screen .yellow-mouth{transition:transform .3s ease-out}
.login-form-panel{display:grid;place-items:center;padding:64px 48px;min-width:0;background:#fff}
#login-screen .login-card{width:min(390px,100%);padding:0;border:0;border-radius:0;box-shadow:none;background:none}
#login-screen .login-emblem{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 26px;border-radius:10px;background:#18181b;color:#fff;font-weight:700;font-size:28px}
#login-screen .login-card h1{font-size:28px;font-weight:700;letter-spacing:-.8px;text-align:center;margin:0 0 12px;line-height:1.4}
#login-screen .login-intro{font-size:14px;color:#71717a;text-align:center;margin:0 0 44px}
#login-screen .password-label{display:block;margin:0 0 10px;font-size:14px;font-weight:500}
.login-password-wrap{position:relative}
#login-screen #login-password{width:100%;height:52px;margin:0;border:1px solid #dedee2;border-radius:7px;padding:12px 52px 12px 14px;font-size:16px;background:#fff;color:#18181b;letter-spacing:1px}
#login-screen #login-password::placeholder{font-size:14px;letter-spacing:0;color:#8a8a93}
#login-screen #login-password:focus-visible{outline:2px solid #7025f4;outline-offset:3px}
#login-screen #login-password[aria-invalid=true]{border-color:#b42318}
#login-toggle-password{position:absolute;right:4px;top:4px;width:44px;height:44px;display:grid;place-items:center;border-radius:5px;color:#71717a}
#login-toggle-password:hover{background:#f4f4f5;color:#18181b}
#login-toggle-password svg{width:20px;height:20px}
#login-toggle-password[aria-pressed=false] .eye-off,#login-toggle-password[aria-pressed=true] .eye-on{display:none}
#login-screen .login-remember{display:flex;align-items:center;gap:9px;min-height:44px;margin:16px 0 2px;font-size:13px;cursor:pointer}
#login-screen #login-remember{width:16px;height:16px;margin:0;accent-color:#7025f4;flex-shrink:0}
#login-screen .remember-hint{display:block;margin:0 0 25px;color:#71717a;font-size:12px;line-height:1.7}
#login-screen #login-submit{width:100%;min-height:50px;justify-content:center;border-radius:7px;background:#17171f;border:1px solid #17171f;color:#fff;font-size:15px;font-weight:600}
#login-screen #login-submit:hover{background:#6020dc;border-color:#6020dc}
#login-screen #login-submit:disabled{opacity:.65;cursor:wait}
#login-screen #login-error{margin:0 0 16px;color:#b42318;font-size:13px;min-height:0}
#login-screen #login-error:empty{display:none}
#login-screen .login-card button:focus-visible,#login-screen #login-remember:focus-visible{outline:2px solid #7025f4;outline-offset:3px}
@keyframes login-shake{0%,100%{translate:0}25%{translate:-5px}75%{translate:5px}}
@media(prefers-reduced-motion:no-preference){#login-screen .has-error .eyes{animation:login-shake .35s ease-out}#login-screen #login-submit{transition:background-color .2s,border-color .2s}}
@media(max-width:1100px) and (min-width:701px){#login-screen .characters-scene{transform:scale(.77)}.login-brand{left:28px;top:30px}.login-form-panel{padding:48px 28px}#login-screen .login-card h1{font-size:24px}}
@media(max-width:700px){#login-screen{display:flex;flex-direction:column;height:100dvh}.login-visual{min-height:260px;height:30dvh;flex-shrink:0}.login-brand{top:20px;left:22px;font-size:14px}.login-brand-mark{width:27px;height:27px;font-size:17px}#login-screen .characters-wrapper{position:absolute;bottom:0;height:200px}#login-screen .characters-scene{transform:scale(.49)}.login-form-panel{flex:1;padding:32px 28px max(32px,env(safe-area-inset-bottom))}#login-screen .login-emblem{display:none}#login-screen .login-card h1{font-size:24px}#login-screen .login-intro{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){#login-screen *,#login-screen *::before{animation:none!important;transition:none!important}}
#login-screen{place-items:stretch}
#login-screen .remember-hint{text-align:left}
#login-screen #login-username{display:block;width:100%;height:52px;margin:0 0 22px;border:1px solid #dedee2;border-radius:7px;padding:12px 14px;font-size:16px;background:#fff;color:#18181b}
#login-screen #login-username::placeholder{font-size:14px;color:#8a8a93}
#login-screen #login-username:focus-visible{outline:2px solid #7025f4;outline-offset:3px}
#login-screen #login-username[aria-invalid=true]{border-color:#b42318}