/* View tracker: a separate readout beside the pill. Galleries count their views as pips fill one by one;
   demos run a small timeline with a rolling timecode. Without script it reads as plain text. */
.tracker{display:inline-flex;align-items:center;gap:10px;flex:none;font:10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tracker-text{position:relative;display:inline-flex;align-items:center;gap:.5em}
.tracker-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Pips: one bar per view. Each fills left to right, then stays lit. */
.tracker-pips{display:inline-flex;gap:3px}
.tracker-pips i{position:relative;display:block;width:16px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.tracker-pips i::after{content:'';position:absolute;inset:0;border-radius:2px;background:var(--fg);transform:scaleX(var(--fill,0));transform-origin:left center}
.tracker-pips i.is-active::after{box-shadow:0 0 6px var(--fg)}
.tracker-pips i.is-done::after{opacity:.55}
/* Rolling number: a one-line window over a column of digits. */
.tracker-roll{display:inline-block;height:1em;overflow:hidden;color:var(--fg)}
.tracker-roll span{display:block;height:1em;transform:translateY(calc(var(--at,0) * -1em));transition:transform .5s cubic-bezier(.3,1.3,.4,1)}
.tracker-roll b{display:block;height:1em;font-weight:inherit}
.tracker-plural{transition:opacity .3s}
.tracker-plural.is-off{opacity:0}
/* Timeline: a hairline track, a fill and a playhead. */
.tracker-track{position:relative;display:block;width:56px;height:2px;border-radius:2px;background:var(--line)}
.tracker-track i{position:absolute;inset:0;border-radius:2px;background:var(--fg);opacity:.75;transform:scaleX(var(--at,0));transform-origin:left center}
.tracker-track b{position:absolute;top:50%;left:calc(var(--at,0) * 100%);width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--fg);box-shadow:0 0 8px var(--fg)}
.tracker-time{color:var(--fg)}
.tracker.is-resting .tracker-roll span{transition:none}
@media(max-width:600px){.tracker{font-size:9px;gap:8px}.tracker-pips i{width:12px}.tracker-track{width:40px}}
@media(prefers-reduced-motion:reduce){.tracker-roll span{transition:none}}