.login-shell{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:55px;width:min(1100px,100%);margin:45px auto;align-items:start}.login-shell .login-panel{width:100%;max-width:none;margin:0;padding:30px}.login-panel h1{margin-top:0}.login-panel form{margin-block:24px}.login-panel form button{width:100%}.login-home{display:inline-block;margin-top:20px;color:#52634e;font-size:14px}.login-demo{padding-block:12px;min-width:0}.login-demo-label{font-size:11px;letter-spacing:1.6px;color:#61705b;font-weight:700;margin:0 0 14px}.login-demo h2{font-family:Georgia,serif;font-size:34px;font-weight:400;line-height:1.15;margin:0 0 17px;color:#293d32}.login-demo>p:not(.login-demo-label){max-width:490px;font-size:15px;line-height:1.7;color:#606c5e}.login-demo .brew-button{margin:6px 0 12px;text-decoration:none}.login-demo .login-demo-note{font-size:12px!important;max-width:430px}.login-demo-images{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:24px}.login-demo-images figure{margin:0;min-width:0}.login-demo-images a{display:block;border:1px solid #d6dfd2;border-radius:8px;overflow:hidden;background:#f6f7f3}.login-demo-images img{display:block;width:100%;height:auto}.login-demo-images figcaption{font-size:11px;line-height:1.5;margin-top:7px;color:#697563}@media(max-width:800px){.login-shell{gap:25px;grid-template-columns:minmax(280px,360px) minmax(0,1fr);margin-top:25px}.login-demo h2{font-size:29px}.login-demo-images{grid-template-columns:1fr}.login-demo>p:not(.login-demo-label){font-size:13px}}@media(max-width:640px){.login-shell{grid-template-columns:1fr;width:min(460px,100%);gap:28px;margin-top:16px}.login-shell .login-panel{padding:23px}.login-demo{padding:8px 6px}.login-demo-images{grid-template-columns:1fr 1fr;gap:10px}.login-demo h2{font-size:31px}}

.login-shell-local{grid-template-columns:minmax(0,420px);justify-content:center}
.login-current-account {padding:14px;margin-block:20px;background:#eaf0e7;border:1px solid #d4d8d3;border-radius:6px;overflow-wrap:anywhere}
.login-current-account>p {margin:0}
.login-current-account>p+p {margin-top:8px}
.login-continue {display:flex;justify-content:center}

/* Keep the sign-in and logo together in the first viewport, with room to
   scroll when a small screen or the on-screen keyboard needs more space. */
.login-shell.login-screen {display:block;margin:0 auto}
.brew-page:has(>.login-screen) {padding:var(--page-gutter)}
.login-entry {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:calc(100vh - 2 * var(--page-gutter) - var(--login-header-height,0px));
  min-height:calc(100dvh - 2 * var(--page-gutter) - var(--login-header-height,0px));
  padding-block:24px;
}
.login-screen-signed-in {--login-header-height:calc(64px + var(--section-gap))}
.login-logo {display:block;flex:none;border-radius:12px}
.login-logo img {display:block;width:96px;height:96px;object-fit:contain}
.login-logo:focus-visible {outline:3px solid #7194ab;outline-offset:5px}
.login-screen .login-panel {max-width:420px}
.login-screen input {font-size:16px}
.login-screen .login-demo {width:min(780px,100%);margin-inline:auto;padding-block:32px 40px}
@media(max-width:640px) {
  .login-entry {gap:18px;padding-block:20px}
  .login-logo img {width:80px;height:80px}
}