.ds-loader{ display: none; }

.ds-loading .ds-loader,
.ds-unveil .ds-loader{
  display: block;
  position: fixed;
  inset: 0;
  z-index: 3000;
  overflow: hidden;
  container-type: size;
  isolation: isolate;
  pointer-events: auto;
  -webkit-user-select: none;
          user-select: none;
}
.ds-unveil .ds-loader{ pointer-events: none; }

.ds-loader__measure,
.ds-loader__line{
  font-family: "Funnel Display", var(--ds-font-alt, system-ui), sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.02em;
  line-height: 1;
}
.ds-loader__measure{
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  white-space: pre;
  font-size: 100px;
}

.ds-loader__panel{
  position: absolute;
  inset: 0;
  background: #171717;
  color: #F0F0F0;
}

.ds-loader__box{
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  top: 50%;
  transform: translateY(-50%);
}

.ds-loader__line{
  font-size: 18cqw;
  white-space: nowrap;
  padding: .12em 0;
  display: flex;
  justify-content: center;
  clip-path: inset(0 -10% 0 -10%);
}
.ds-loader__word{ display: inline-block; }
.ds-loader__word > span{
  display: inline-block;
  transform: translateY(130%);
  will-change: transform;
}

.ds-loader__meta{ opacity: 0; }

.ds-loader__rule{
  position: relative;
  height: 1px;
  margin-top: 2.2cqh;
}
.ds-loader__track,
.ds-loader__fill{
  position: absolute;
  inset: 0;
  background: currentColor;
}
.ds-loader__track{ opacity: .16; }
.ds-loader__fill{
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.ds-loader__count{
  display: block;
  margin-top: 1.6cqh;
  text-align: right;
  font-family: "Funnel Display", var(--ds-font-alt, system-ui), sans-serif;
  font-size: max(11px, 1.6cqh);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}