.kvs-scrollfill {
  --fill-pct: 0%;
  --fill-color: #000000;
  --base-color: #8a8a8a;
  display: inline-block;
  color: var(--base-color);
  background-image: linear-gradient(
    to right,
    var(--fill-color) 0%,
    var(--fill-color) var(--fill-pct),
    var(--base-color) var(--fill-pct),
    var(--base-color) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-image 0.06s linear;
}
.kvs-scrollfill[data-direction="rl"] {
  background-image: linear-gradient(
    to left,
    var(--fill-color) 0%,
    var(--fill-color) var(--fill-pct),
    var(--base-color) var(--fill-pct),
    var(--base-color) 100%
  );
}

/* Sequential mode — underline/link friendly */
.kvs-scrollfill--seq {
  background-image: none !important;
  -webkit-text-fill-color: initial;
  color: var(--base-color);
  white-space: pre-wrap;
}
.kvs-scrollfill--seq .kvs-unit {
  display: inline;
  color: var(--base-color);
  text-decoration: inherit;
  transition: color 0.08s linear;
}