*{box-sizing:border-box}body{margin:0;background:#fff;color:#141414;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:100vh;display:grid;place-items:center}main{width:min(420px,calc(100% - 48px));padding:48px 0}.brand{color:#3036fd;font-size:12px;font-weight:600;letter-spacing:.09em}h1{font-size:44px;letter-spacing:-.05em;margin:36px 0 12px}p,footer{color:#696970;line-height:1.6}form{margin-top:32px}label{display:block;font-size:14px;margin:20px 0}input{display:block;width:100%;padding:14px;border:1px solid #dcdce3;border-radius:8px;font:inherit;margin-top:8px}button{width:100%;background:#3036fd;color:white;border:0;border-radius:24px;padding:14px;font:inherit;cursor:pointer}button:disabled{opacity:.6}input:focus-visible,button:focus-visible{outline:3px solid #999cff;outline-offset:3px}footer{margin-top:36px;font-size:12px}#message{font-size:14px;color:#a93232}
#google-login{margin-top:24px;padding-bottom:10px;border-bottom:1px solid #e8e8ee}#google-login a{display:block;border:1px solid #dcdce3;border-radius:24px;text-align:center;padding:13px;color:#20202c;text-decoration:none;font-weight:600}#google-login p,#google-message{font-size:13px}#google-message{color:#a93232}

/* Bas Playground · Our Site, Turned Up. Scoped to sign-in, not password setup. */
.login-page {
  --login-blue: #3036fd;
  --login-ink: #151516;
  --login-gutter: clamp(34px, 5.5vw, 88px);
  background: #fff;
  color: var(--login-ink);
  display: block;
  font-family: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.login-page .login-shell {
  display: grid;
  grid-template: "brand art" auto "form art" 1fr "foot art" auto / minmax(0, .8fr) minmax(0, 1fr);
  column-gap: var(--login-gutter);
  min-height: 100svh;
  width: 100%;
  padding: 18px 18px 18px var(--login-gutter);
}
.login-brand { grid-area: brand; padding-top: 24px; }
.login-wordmark { display: block; width: 139px; height: auto; }
.login-content { grid-area: form; align-self: center; width: min(100%, 398px); margin: 0 auto; padding: 48px 0; }
.login-page h1 { margin: 0; font-size: clamp(36px, 4vw, 64px); line-height: 1.03; font-weight: 800; letter-spacing: -.055em; }
.login-content > p:first-of-type { margin: 14px 0 0; color: #62626d; font-size: 16px; }
.login-page #google-login { margin: 27px 0 0; padding: 0; border: 0; }
.login-page #google-login a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 12px 19px 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--login-blue);
  color: white;
  font-weight: 650;
  text-align: left;
}
.login-page #google-login a:hover, .login-page #login button:hover:not(:disabled) { background: #2428d9; }
.login-page #google-login a:focus-visible { outline: 3px solid var(--login-blue); outline-offset: 4px; }
.login-page #google-login p { margin: 13px 0 0; color: #646472; }
.login-page #login-status, .login-page #google-message { margin: 12px 0 0; font-size: 14px; }
.login-page #login-status:empty, .login-page #message:empty { margin: 0; }
.login-page #login { margin-top: 24px; }
.login-page #login label { margin: 16px 0; }
.login-footer { grid-area: foot; margin: 0; padding: 0 0 20px; color: #646472; }
.login-art {
  grid-area: art;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  overflow: hidden;
  min-height: min(680px, calc(100svh - 36px));
  padding: clamp(28px, 4vw, 62px);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 74% 24%, #514cff 0%, transparent 57%),
    linear-gradient(145deg, var(--login-blue) 44%, #2320d4 100%);
}
.login-art-graphic { display: grid; place-items: center; }
.login-art-graphic svg { display: block; width: min(100%, 720px); height: min(52vh, 520px); overflow: visible; }
.login-page .login-art-caption {
  position: relative;
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 5.25vw, 91px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.055em;
}
@media (max-width: 760px) {
  .login-page .login-shell {
    grid-template: "brand" auto "art" auto "form" auto "foot" 1fr / minmax(0, 1fr);
    padding: 20px 20px max(20px, env(safe-area-inset-bottom));
  }
  .login-brand { padding: 3px 4px 19px; }
  .login-wordmark { width: 122px; }
  .login-content { padding: 30px 4px 22px; }
  .login-page h1 { font-size: clamp(34px, 8vw, 48px); }
  .login-page #google-login { margin-top: 21px; }
  .login-art {
    height: clamp(146px, 39vw, 224px);
    min-height: 0;
    padding: 16px;
    border-radius: 20px;
    align-content: end;
  }
  .login-art-graphic { position: absolute; inset: 0 -4% 0 34%; }
  .login-art-graphic svg { width: 100%; height: 112%; }
  .login-page .login-art-caption {
    max-width: 70%;
    font-size: clamp(22px, 5.6vw, 40px);
    text-shadow: 0 1px 12px #2823ce, 0 1px 3px #2823ce;
  }
  .login-footer { align-self: end; padding: 0 4px; }
}
@media (forced-colors: active) {
  .login-page #google-login a { border: 1px solid LinkText; }
  .login-art { border: 1px solid CanvasText; }
}