.site-loader {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  background: #111311;
  color: #f1f3ed;
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader-content {
  width: min(340px, calc(100% - 48px));
}

.site-loader-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #f1f3ed;
  font-family: Arial, sans-serif;
  letter-spacing: .04em;
}

.site-loader-brand > span {
  color: #b9ed62;
  font: 600 22px/1 Consolas, monospace;
  letter-spacing: -.12em;
}

.site-loader-brand > b {
  font-size: 12px;
  font-weight: 700;
}

.site-loader-brand > small {
  margin-left: auto;
  color: #7e857a;
  font: 8px Consolas, monospace;
  letter-spacing: .12em;
}

.site-loader-label {
  margin: 36px 0 14px;
  color: #c8cec2;
  font: 12px Arial, sans-serif;
}

.site-loader-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-loader-track {
  height: 3px;
  flex: 1;
  overflow: hidden;
  border-radius: 10px;
  background: #30362e;
}

.site-loader-track > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #b9ed62;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(.2,.75,.25,1);
}

.site-loader-row > b {
  min-width: 42px;
  color: #b9ed62;
  font: 500 13px Consolas, monospace;
  text-align: right;
}

.site-loader-status {
  display: block;
  margin-top: 12px;
  color: #7e857a;
  font: 8px Consolas, monospace;
  letter-spacing: .14em;
}

@media (prefers-reduced-motion: reduce) {
  .site-loader,
  .site-loader-track > span {
    transition-duration: 0.01ms;
  }
}