@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-var.woff2") format("woff2");
}

#auth-bootstrap {
  position: fixed;
  z-index: 2;
  inset: 0 50% 0 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 40px 48px;
  background:
    radial-gradient(720px 480px at 15% 8%, color-mix(in srgb, var(--brand-coral, #cc785c) 14%, transparent), transparent 60%),
    var(--fixed-dark, #161513);
  color: var(--on-dark, #f7f6f3);
  font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

#auth-bootstrap[hidden] {
  display: none;
}

#auth-bootstrap .auth-bootstrap-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--type-label-size, 13px);
  font-weight: 600;
  line-height: var(--type-label-line, 18px);
}

#auth-bootstrap .auth-bootstrap-brand img {
  width: 28px;
  height: 28px;
}

#auth-bootstrap .auth-bootstrap-copy {
  max-width: 440px;
}

#auth-bootstrap h1 {
  margin: 0 0 20px;
  color: var(--on-dark, #f7f6f3);
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: var(--type-display-size, 30px);
  font-weight: 500;
  letter-spacing: var(--type-h1-tracking, -0.018em);
  line-height: var(--type-display-line, 36px);
}

#auth-bootstrap p {
  margin: 0;
  color: var(--on-dark-soft, #a3a099);
  font-size: var(--type-body-size, 14px);
  line-height: var(--type-body-line, 22px);
}

html.auth-bootstrap-visible [data-auth-region="identity"] {
  visibility: hidden;
}

@media (max-width: 1023px) {
  #auth-bootstrap {
    display: none;
  }
}