@font-face {
  font-family: "Manrope";
  src: url("/assets/manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  color-scheme: light;
  font-family: "Manrope", system-ui, sans-serif;
  color: #102e50;
  background: #f4fbff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
[hidden] {
  display: none !important;
}
a {
  color: #0064a2;
}
.login {
  --u: min(1px, calc(100vw / 846));
  width: 100%;
  min-height: max(100svh, calc(1859 * var(--u)));
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 61%, #e8f7ff77 0%, transparent 48%),
    linear-gradient(115deg, #f5fcff, #f1faff 72%, #f6fcff);
}
.login::before,
.login::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: #e3f3fb80;
}
.login::before {
  width: calc(1000 * var(--u));
  height: calc(1000 * var(--u));
  bottom: calc(-650 * var(--u));
  left: calc(50% - 1040 * var(--u));
}
.login::after {
  width: calc(890 * var(--u));
  height: calc(890 * var(--u));
  bottom: calc(-570 * var(--u));
  right: calc(50% - 1030 * var(--u));
}
.brand {
  margin-top: calc(84 * var(--u));
  height: calc(133 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(19 * var(--u));
  text-decoration: none;
  flex-shrink: 0;
}
.brand-mark {
  width: calc(120 * var(--u));
  height: calc(120 * var(--u));
}
.brand-type {
  display: flex;
  flex-direction: column;
  padding-top: calc(8 * var(--u));
  align-items: center;
}
.wordmark {
  font-size: calc(70 * var(--u));
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: calc(-1.7 * var(--u));
  color: #257d96;
}
.wordmark span {
  color: #834905;
}
.product {
  color: #405c7d;
  font-size: calc(33 * var(--u));
  letter-spacing: calc(6.3 * var(--u));
  line-height: 1.2;
  margin-top: calc(-3 * var(--u));
  transform: translateX(calc(-52 * var(--u)));
}
.introduction {
  margin-top: calc(229 * var(--u));
  width: 100%;
  text-align: center;
}
h1 {
  font-size: calc(81 * var(--u));
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: calc(-2.6 * var(--u));
  margin: 0;
}
.introduction p {
  margin: calc(16 * var(--u)) 0 0;
  color: #607c9d;
  font-size: calc(41 * var(--u));
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: calc(-0.7 * var(--u));
}
.google-signin {
  margin-top: calc(103 * var(--u));
  position: relative;
}
.google-button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: #006bb8;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.google-label {
  font-size: calc(39 * var(--u));
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: calc(-0.3 * var(--u));
}
.google-disc {
  display: grid;
  place-items: center;
  margin-top: calc(35 * var(--u));
  width: calc(486 * var(--u));
  height: calc(486 * var(--u));
  border-radius: 50%;
  background: linear-gradient(150deg, #fff 2%, #fbfdff 63%, #eaf7ff);
  border: 1px solid #fff;
  box-shadow:
    0 calc(7 * var(--u)) calc(3 * var(--u)) #c4e0ef5c,
    0 calc(20 * var(--u)) calc(22 * var(--u)) #94bfd844,
    0 0 calc(85 * var(--u)) calc(38 * var(--u)) #76caff66;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}
.google-mark {
  width: 65%;
  height: 65%;
}
.google-button:hover .google-disc {
  transform: translateY(-3px);
  box-shadow:
    0 8px 4px #c4e0ef60,
    0 20px 25px #94bfd844,
    0 0 calc(90 * var(--u)) calc(42 * var(--u)) #76caff80;
}
.google-button:active .google-disc {
  transform: translateY(2px) scale(0.99);
}
.google-button:focus-visible {
  outline: 3px solid #006bb8;
  outline-offset: 12px;
  border-radius: 12px;
}
.google-button[aria-busy="true"] {
  cursor: progress;
}
.login-status {
  position: absolute;
  top: 100%;
  width: calc(690 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: max(13px, calc(23 * var(--u)));
  color: #84451e;
  margin: calc(20 * var(--u)) 0 0;
}
.promise {
  margin: calc(72 * var(--u)) 0 0;
  font-size: calc(36 * var(--u));
  line-height: 1.42;
  letter-spacing: calc(-0.5 * var(--u));
  font-weight: 500;
  text-align: center;
  color: #415d7f;
}
.legal {
  margin-top: auto;
  padding: calc(205 * var(--u)) calc(25 * var(--u)) calc(61 * var(--u));
  font-size: calc(25 * var(--u));
  line-height: 1.4;
  text-align: center;
  color: #7695b5;
}
.legal a {
  text-underline-offset: calc(5 * var(--u));
  text-decoration-thickness: 1px;
}
@media (min-width: 700px) and (max-height: 1250px) {
  .login {
    --u: min(0.64px, calc(100svh / 1859));
    min-height: max(720px, 100svh);
  }
  .legal {
    font-size: max(13px, calc(25 * var(--u)));
    padding-bottom: 22px;
    padding-top: 60px;
  }
  .introduction p {
    font-size: max(18px, calc(40 * var(--u)));
  }
  .google-label {
    font-size: max(19px, calc(39 * var(--u)));
  }
  .promise {
    font-size: max(18px, calc(36 * var(--u)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .google-disc {
    transition: none;
  }
}