#app-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  transition: opacity 200ms ease-out;
}

#app-splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

#app-splash .app-splash-logo {
  width: 220px;
  max-width: 60vw;
  height: auto;
}

#app-splash .app-splash-logo.app-splash-logo-dark {
  display: none;
}

#app-splash .app-splash-tagline {
  margin-top: 20px;
  font: 500 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: rgba(0, 0, 0, 0.55);
}

#app-splash .app-splash-spinner {
  margin-top: 28px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--brand-theme-color, #002049);
  animation: app-splash-spin 800ms linear infinite;
}

#app-splash .app-splash-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: auto;
  color: var(--brand-theme-color, #002049);
  opacity: 0.5;
  z-index: -1;
}

@keyframes app-splash-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-color-scheme: dark) {
  #app-splash { background: #101418; }

  #app-splash .app-splash-logo.app-splash-logo-light { display: none; }
  #app-splash .app-splash-logo.app-splash-logo-dark { display: block; }

  #app-splash .app-splash-tagline { color: rgba(255, 255, 255, 0.6); }

  #app-splash .app-splash-spinner {
    border-color: rgba(255, 255, 255, 0.16);
    border-top-color: var(--brand-theme-color, #002049);
  }

  #app-splash .app-splash-wave { color: var(--brand-theme-color, #002049); }
}