.preloader{
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(1px);
  transition: opacity .3s ease;
}
.preloader.hidden{ opacity: 0; pointer-events: none; }
.preloader__box{ display:grid; place-items:center; }
.preloader__img{ width: 72px; height: 72px; image-rendering: -webkit-optimize-contrast; }
.preloader__ring{
  margin-top: 10px; width: 120px; height: 2px;
  background: var(--border); overflow: hidden; border-radius: 9999px; position: relative;
}
.preloader__ring::after{
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
  background: var(--brand); animation: prebar 2s linear infinite;
}
@keyframes prebar {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(50%); }
  100% { transform: translateX(200%); }
}