/* First paint: the page is the theme's colour from the very first frame (no white flash while the app loads). Tiny and
   render-blocking on purpose; the CSP allows no inline style. */
html {
  background: #01040b;
  color-scheme: dark;
}
html.bm-light {
  background: #b4d2f6;
  color-scheme: light;
}
body {
  margin: 0;
}
/* the colour under the app's own body artwork, from the first frame to the last (the app keeps bm-light in step with its theme) */
html body {
  background-color: #01040b !important;
}
html.bm-light body {
  background-color: #b4d2f6 !important;
}

/* until the app stylesheet has arrived (boot.js) the unstyled first view stays hidden; the page shows the theme colour */
html.bm-wait body {
  visibility: hidden;
  /* whatever fails (boot.js, the stylesheet, the network), the page shows after 4 s */
  animation: bm-unhide 0s linear 4s forwards;
}
@keyframes bm-unhide {
  to {
    visibility: visible;
  }
}
/* the splash while the first view waits for its stylesheet: the brand's blue heart on the theme colour, never a bare black screen.
   An inline svg in the document (no image to decode), shown by itself inside the hidden body. */
#bm-splash {
  display: none;
}
/* the unstyled view must not widen the layout viewport (a mobile browser shrinks to fit its widest image): clip it to the screen */
html.bm-wait #root {
  width: 100%;
  max-height: 100vh;
  overflow: hidden;
}
html:not([data-live]).rs #root {
  visibility: hidden;
  /* whatever fails, the page shows after 6 s */
  animation: bm-unhide 0s linear 6s forwards;
}
html.bm-wait #bm-splash,
html:not([data-live]).rs #bm-splash {
  display: block;
  visibility: visible;
  position: fixed;
  inset: 0 0 16% 0;
  width: 72px;
  height: 67px;
  margin: auto;
}
@media (scripting: none) {
  html.bm-wait body {
    visibility: visible;
  }
}

/* the prerendered first views: the guest's banner and the signed-in plate (boot.js sets html.auth before the first paint) —
   decided here, in the first stylesheet, so no component rule and no late stylesheet can draw the other launch's view */
html.auth [data-pre='guest'],
html:not(.auth) [data-pre='auth'] {
  display: none !important;
}