:root {
  --nt-bg: #ffffff;
  --nt-accent: #000;
  --nt-text: #111;
  --nt-muted: #666;
}

#z-loader {
  position: fixed;
  inset: 0;
  background: var(--nt-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
  transition: opacity .5s ease;
}

#z-loader.hide {
  opacity: 0;
  pointer-events: none;
}

.z-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

#z-loader .loader {
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,var(--nt-accent) 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: zloader 1s infinite linear;
}

@keyframes zloader {
  20%{background-position:0%   0%, 50%  50%,100%  50%}
  40%{background-position:0% 100%, 50%   0%,100%  50%}
  60%{background-position:0%  50%, 50% 100%,100%   0%}
  80%{background-position:0%  50%, 50%  50%,100% 100%}
}

.z-loader-text {
  font-size: 14px;
  color: var(--nt-muted);
  font-family: Inter, system-ui, sans-serif;
  letter-spacing: .2px;
}