Context Window Usage Bar

<!-- Context Window Usage Bar — token budget indicator with a live shimmer -->
<div class="nuda-ac2-ctx" role="group" aria-label="Context window usage">
  <div class="nuda-ac2-ctx__head">
    <span class="nuda-ac2-ctx__label">Context window</span>
    <span class="nuda-ac2-ctx__value">48.2K / 128K</span>
  </div>
  <div class="nuda-ac2-ctx__track" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100"
       aria-label="Tokens used, 38 percent">
    <div class="nuda-ac2-ctx__fill"></div>
  </div>
</div>

.nuda-ac2-ctx {
  width: 300px;
  box-sizing: border-box;
  font: 12px ui-sans-serif,system-ui,sans-serif;
}

.nuda-ac2-ctx__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.nuda-ac2-ctx__label {
  color: #cfcfcf;
  font-size: 11.5px;
}

.nuda-ac2-ctx__value {
  color: #777;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.nuda-ac2-ctx__track {
  position: relative;
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
}

.nuda-ac2-ctx__fill {
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background-image: linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent),linear-gradient(90deg,#e4ff54,#e4ff54);
  background-size: 40% 100%,100% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0,0 0;
  animation: _nuda-ac2ctx 2.2s linear infinite;
}

@keyframes _nuda-ac2ctx {
  0% {
    background-position: -40% 0,0 0;
  }
  100% {
    background-position: 140% 0,0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-ac2-ctx__fill {
    animation: none !important;
    background-position: 0 0,0 0;
  }
}