html {
  background-color: var(--color--main);
}
html[data-splash="true"] {
  overflow: hidden;
}
#splash {
  background-color: var(--color--splash);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 1000;
  pointer-events: none;
}
#splash.visible {
  opacity: 1;
}
#splash > .loader {
  content: var(--loader--main);
  width: 10vw; /* TV fallback */
  width: calc(max(100px, 10vw));
}
#splash > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
#splash > video.visible {
  opacity: 1;
}