#loginDialog{max-width:min(960px,calc(100vw - 32px));width:960px;border-radius:28px;max-height:calc(100dvh - 32px)}
#loginForm{max-width:none;display:grid;grid-template-columns:1.1fr 1fr;padding:0;overflow:visible;max-height:none;gap:0}
.login-story{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:26px;padding:40px;background:radial-gradient(ellipse at 10% 0,#e4efff,transparent 75%),#f1f4f9;border-radius:26px 0 0 26px;color:#172339;min-width:0}
.login-story .section-label{color:#4e6686;font-size:10px}
#loginStoryHeading{font-size:clamp(28px,3.2vw,41px);line-height:1.08;letter-spacing:-.045em;margin:12px 0 0;font-weight:750;max-width:11ch}
.login-example{padding:23px;border:1px solid #d5dfed;border-radius:20px;background:#ffffffc7;min-height:205px;box-shadow:0 10px 30px #164d9110}
.login-example h3{font-size:20px;line-height:1.2;letter-spacing:-.025em;margin:0 0 13px}
.login-example p{font-size:14px;line-height:1.6;color:#4b5d75;margin:0}
.login-example .login-sample{margin-top:17px;border-left:3px solid #0876ee;padding-left:12px;color:#243e61;font-size:14px;font-weight:600}
.login-example.is-changing{animation:login-example-in .4s ease both}
@keyframes login-example-in{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.login-story-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.login-story-controls button{border:1px solid transparent;border-radius:12px;min-height:44px;padding:8px 12px;font:600 12px/1.2 inherit;background:transparent;color:#4b5d75;cursor:pointer}
.login-story-controls button[aria-pressed="true"]{background:#fff;border-color:#d5dfed;color:#173959;box-shadow:0 1px 4px #00000009}
.login-story-controls button:focus-visible{outline:3px solid #0068d6;outline-offset:2px}
#loginStoryPause{margin-left:auto;padding:8px;min-width:44px}
.login-fields{padding:40px;min-width:0;display:flex;flex-direction:column;justify-content:center}
#loginForm .dialog-head{flex-direction:column;gap:18px;padding-bottom:24px}
#loginForm .dialog-head .saga-logo-frame{width:110px;height:52px}
#loginForm .dialog-head .section-label{display:none}
#loginForm .dialog-head h2{font-size:30px;margin:0}
#loginForm .field input{min-height:50px;font-size:16px;border-radius:13px}
#loginForm .field>span{font-size:13px;color:var(--muted)}
#loginStatus{font-size:12px;line-height:1.5;margin:10px 0 16px;color:var(--muted)}
#loginSubmitBtn{min-height:50px;width:100%;border-radius:14px}
html[data-theme="dark"] .login-story{background:radial-gradient(ellipse at 15% 0,#173860,transparent 75%),#141e2e;color:#f2f6ff}
html[data-theme="dark"] .login-story .section-label{color:#b1c3df}
html[data-theme="dark"] .login-example{background:#1c2a40;border-color:#354967;box-shadow:none}
html[data-theme="dark"] .login-example p,html[data-theme="dark"] .login-story-controls button{color:#c2cee0}
html[data-theme="dark"] .login-example .login-sample{color:#e2edff}
html[data-theme="dark"] .login-story-controls button[aria-pressed="true"]{background:#2a405e;border-color:#49617e;color:#fff}
@media(max-width:650px){
 #loginDialog{width:calc(100vw - 24px);max-width:none;max-height:calc(100dvh - 24px);overflow:auto}
 #loginForm{grid-template-columns:1fr}
 .login-fields{grid-row:1;padding:26px 24px}
 #loginForm .dialog-head{flex-direction:row;align-items:center;gap:14px;padding-bottom:22px}
 #loginForm .dialog-head h2{font-size:27px}
 #loginForm .dialog-head .saga-logo-frame{width:92px;height:45px;flex-shrink:0}
 .login-story{grid-row:2;border-radius:0 0 26px 26px;padding:24px;gap:18px}
 #loginStoryHeading{font-size:27px;max-width:17ch}
 .login-example{min-height:178px;padding:18px}
 .login-story-controls button{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){.login-example.is-changing{animation:none}}
.login-story-controls button{font-family:inherit;font-size:12px;line-height:1.2;font-weight:600}
#loginForm .dialog-head .saga-logo-frame{width:160px;height:104px;flex:0 0 auto;overflow:visible}
#loginForm .dialog-head .saga-logo-frame img{width:160px;height:auto;left:0;top:0;object-fit:contain}
@media(max-width:650px){#loginForm .dialog-head .saga-logo-frame{width:138px;height:90px}#loginForm .dialog-head .saga-logo-frame img{width:138px;left:0;top:0}}
#loginSubmitBtn{background:#0068d6;color:#fff}
#loginSubmitBtn:hover:not(:disabled){background:#005bbb;color:#fff}