html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100%;
}

#app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: #f8f9fb;
  overflow: hidden;
}

#app-splash .app-splash-logo {
  display: block;
  flex-shrink: 0;
  height: 68px;
  width: auto;
  max-width: none;
}

#app-splash .app-splash-progress {
  position: relative;
  flex-shrink: 0;
  width: 140px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(72, 63, 63, 0.12);
}

#app-splash .app-splash-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: #483f3f;
  animation: app-splash-progress 1.35s ease-in-out infinite;
}

@keyframes app-splash-progress {
  0% {
    left: -40%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: -40%;
  }
}
