:root { color-scheme: light; background: var(--neutral-2); }
* { box-sizing: border-box; }
html body.login-page {
  min-height: 100svh;
  margin: 0;
  display: flex;
  padding: max(var(--space-xl), env(safe-area-inset-top)) max(var(--space-l), env(safe-area-inset-right)) max(var(--space-xl), env(safe-area-inset-bottom)) max(var(--space-l), env(safe-area-inset-left));
  background: var(--neutral-2);
}
.login-page main { width: min(100%, 380px); margin: auto; }
.login-page h1 {
  margin: 0 0 var(--space-s);
  font: var(--weight-ui-heavy) var(--size-l)/var(--line-l) var(--font-ui);
  letter-spacing: var(--tracking-s);
  text-align: center;
}
.login-page main > p {
  margin: 0;
  color: var(--neutral-7);
  font-size: var(--size-s);
  line-height: var(--line-s);
  text-align: center;
}
.login-page #sign-in { margin-top: var(--space-xl); }
html .login-page :is(.cl-rootBox, .cl-cardBox) { width: 100%; max-width: 100%; min-width: 0; }
html .login-page .cl-cardBox {
  border: 0;
  border-radius: var(--radius-m);
  background: var(--neutral-1);
  box-shadow: var(--border-shadow-s);
}
html .login-page .cl-card {
  width: 100%;
  min-width: 0;
  padding: var(--space-xl);
  border-radius: var(--radius-m);
  box-shadow: none;
}
html .login-page .cl-headerTitle {
  font-size: var(--size-m);
  line-height: var(--line-m);
}
html .login-page :is(.cl-headerSubtitle, .cl-formFieldLabel, .cl-formFieldInput, .cl-formButtonPrimary) {
  font-size: var(--size-s);
  line-height: var(--line-s);
}
html .login-page :is(.cl-formFieldInput, .cl-formButtonPrimary) { min-height: 40px; }
html .login-page .cl-formButtonPrimary { background: var(--neutral-10); box-shadow: none; }
.login-page #login-status:not(:empty) { margin-top: var(--space-l); }
@media (max-width: 600px) {
  html .login-page .cl-formFieldInput { font-size: var(--size-m); }
  html .login-page :is(.cl-formFieldInput, .cl-formButtonPrimary) { min-height: 44px; }
}