@font-face{font-family:'Baloo 2';font-style:normal;font-display:swap;font-weight:800;src:url(/app/assets/baloo-2-latin-800-normal-BbF3Etk1.woff2) format('woff2');}

body {
  margin: 0;
  background: #f9f6ef;
}

#boot-logo {
  position: absolute;
  z-index: 5;
  top: 16px;
  left: 0;
  right: 0;
  width: min(160px, calc(100vw - 2rem));
  height: auto;
  aspect-ratio: 200 / 66;
  margin-inline: auto;
  object-fit: contain;
}

@media (min-width: 390px) {
  #boot-logo {
    width: min(200px, calc(100vw - 2rem));
  }
}

/* The wide layout writes inline left/width. Those must not win at 320,
   or the 270px logo stays at its desktop offset (64 + 270 = 334) until
   the resize listener runs. */
@media (max-width: 389px) {
  #boot-logo {
    left: 0 !important;
    right: 0 !important;
    width: min(160px, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
    margin-inline: auto !important;
    transform: none !important;
  }
}

/* Painted before JavaScript on /student so this heading is the LCP
   element. The sign-in page moves the same node into the form. */
#boot-student {
  position: absolute;
  z-index: 4;
  top: 28%;
  left: 0;
  right: 0;
  /* Wider than the form column on a 412px screen, so moving it later
     shrinks the text and the first paint stays the LCP timestamp. */
  width: min(20.5rem, calc(100vw - 2rem));
  min-height: 5rem;
  margin-inline: auto;
  font-family: 'Baloo 2', Nunito, 'Noto Sans SC', sans-serif;
  /* Figma 15:594: Baloo 2 ExtraBold 44px at every width. */
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.15;
  color: #20409a;
  text-align: center;
}

/* Painted before JavaScript on /chat. Both lines are one heading so the
   text area stays larger than a one-line message, and that message cannot
   become LCP when the thread arrives. Chat moves this same node into the
   header. 24px + 16px Baloo is about 12900px²; the seeded announcement is
   about 6500px². */
#boot-chat {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 16px;
  right: 16px;
  margin: 0;
  font-family: 'Baloo 2', Nunito, 'Noto Sans SC', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  color: #20409a;
  text-align: left;
}

#boot-chat span:first-of-type {
  font-size: 1.5rem;
}

#boot-chat span:last-of-type {
  font-size: 1rem;
  color: #4a4f57;
}