body { overflow: hidden; }
.loaded {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .45rem;
  padding: 1rem;
  text-align: center;
  background: var(--paper);
  visibility: hidden;
}
.page-loaded .loaded { visibility: visible; }
.loaded p { margin: 0; font: 900 clamp(2.25rem, 9vw, 4.5rem)/1 var(--display); letter-spacing: -.065em; }
.preloader {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2d2933;
  color: var(--paper);
  transition: transform .5s cubic-bezier(.86, 0, .07, 1) .65s, visibility 0s linear 1.15s;
}
.preloader::before { display: none; }
.page-loaded .preloader { left: 0; transform: translateX(-100%); }
.page-loaded .preloader .percentage { margin-left: 0; opacity: 1; }
.preloader .inner { width: 100%; height: 100%; }
.counter { text-align: center; }
.preloader .inner .percentage {
  display: block;
  position: static;
  transform: none;
  margin-top: .35rem;
  color: var(--acid);
  opacity: 1;
  font: 900 clamp(3.5rem, 17vw, 7.5rem)/.9 var(--display);
  letter-spacing: -.06em;
}
.preloader::after { content: ""; display: block; inset: auto 0 0; width: auto; height: .4rem; border: 0; background: var(--acid); }
.loader-progress { position: absolute; z-index: 1; inset: auto 0 0 auto; width: 85%; height: .4rem; background: #6a626f; }
.page-loaded .loader-progress { width: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .preloader, .preloader *, .loader-progress { transition: none !important; }
}