/* For pages that start empty (spa.html): the theme's background from the first frame, and the
   mark while the app's code and styles load. Prerendered pages do not link it. */
html {
  background: #edf4ff;
  color-scheme: light;
}
html.dark {
  background: #0b1220;
  color-scheme: dark;
}
/* While the app starts (#root still empty): the mark, after a short pause so a fast start
   shows nothing. A background, so the picture is fetched only when it is shown. */
.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: boot-in 0.2s ease-out 0.3s forwards;
  pointer-events: none;
}
.boot::before {
  content: '';
  width: 44px;
  height: 44px;
  background: url('/brand/boot-mark.webp') center / contain no-repeat;
  animation: boot-breathe 1.4s ease-in-out 0.5s infinite;
}
.dark .boot::before {
  background-image: url('/brand/boot-mark-white.webp');
}
#root:not(:empty) + .boot {
  display: none;
}
@keyframes boot-in {
  to {
    opacity: 1;
  }
}
@keyframes boot-breathe {
  50% {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boot,
  .boot::before {
    animation: none;
    opacity: 1;
  }
}