html.chikuwa-loading body::before,
html.chikuwa-leaving body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #f6c70c;
  opacity: 1;
  pointer-events: all;
}

html.chikuwa-loading body::after,
html.chikuwa-leaving body::after {
  content: "LOADING";
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 9999;
  width: min(260px, calc(100vw - 48px));
  padding-top: 48px;
  color: #fff;
  font-family: "Press Start 2P", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.20);
  background:
    linear-gradient(#1a1208 0 0) calc(50% - 33px) 0 / 10px 18px no-repeat,
    linear-gradient(#1a1208 0 0) calc(50% - 11px) 0 / 10px 34px no-repeat,
    linear-gradient(#1a1208 0 0) calc(50% + 11px) 0 / 10px 24px no-repeat,
    linear-gradient(#1a1208 0 0) calc(50% + 33px) 0 / 10px 40px no-repeat;
  transform: translate(-50%, -50%);
  animation: chikuwaLoaderBars 0.62s steps(2, end) infinite;
  pointer-events: none;
}

html.chikuwa-ready:not(.chikuwa-leaving) body::before,
html.chikuwa-ready:not(.chikuwa-leaving) body::after {
  animation: chikuwaLoaderOut 0.18s ease forwards;
  pointer-events: none;
}

@keyframes chikuwaLoaderBars {
  0% {
    background-size: 10px 18px, 10px 34px, 10px 24px, 10px 40px;
  }
  50% {
    background-size: 10px 38px, 10px 20px, 10px 42px, 10px 24px;
  }
}

@keyframes chikuwaLoaderOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}