#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0e0d0b;
  color: #f2f0ea;
  display: grid;
  place-items: center;
  font-family:
    "Geist",
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  animation: loaderFadeOut 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-play-state: paused;
}
#loader.done {
  animation-play-state: running;
}
#loader.gone {
  display: none;
}
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: min(360px, 80vw);
}
.loader-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242, 240, 234, 0.6);
}
.loader-row .loader-right {
  color: #f2f0ea;
}
.loader-bar {
  width: 100%;
  height: 1px;
  background: rgba(242, 240, 234, 0.1);
  overflow: hidden;
}
.loader-bar::after {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  background: #2a6fdb;
  animation: loaderFill 1.4s cubic-bezier(0.6, 0.05, 0.3, 1) forwards;
}
@keyframes loaderFill {
  to {
    width: 100%;
  }
}
@keyframes loaderFadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
body.loading {
  overflow: hidden;
}