body splash-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 999999;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Orkhon loader — two orbiting tiles (yellow + light gray, white glyphs) */
body splash-screen .orkhon-loader {
  position: relative;
  width: 170px;
  height: 170px;
}

body splash-screen .orkhon-loader .el {
  position: absolute;
  top: 50%;
  left: 50%;
  will-change: transform;
}

body splash-screen .orkhon-loader .inner {
  transform: translate(-50%, -50%);
}

body splash-screen .orkhon-loader .box {
  width: 66px;
  height: 66px;
  border-radius: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

body splash-screen .orkhon-loader .box svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Glyphs use fill="currentColor", so colour is inherited from the box. */
body splash-screen .orkhon-loader .solid {
  background: linear-gradient(to bottom right, #7EE362 0%, #32CE5A 100%);
  color: #ffffff;
}

body splash-screen .orkhon-loader .light {
  background: #333971;
  color: #ffffff;
}

body:not(.splash-screen-hidden) {
  overflow: hidden;
}

body.splash-screen-hidden splash-screen {
  visibility: hidden;
  opacity: 0;
}