/* css.slopped.site exhibit: Reading progress. From css/exhibits/progress.mjs. */
.x-progress .reader { height: 340px; max-width: 640px; margin: auto; overflow-y: auto; padding: 0 22px 22px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }
.x-progress .reader h3 { margin: 16px 0 8px; font-size: 26px; }
.x-progress .reader p { max-width: 54ch; }
.x-progress .progress { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0 -22px; padding: 10px 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
.x-progress .bar { flex: 1; height: 10px; border-radius: 999px; background: linear-gradient(var(--ink), var(--ink)) left / var(--w, 0%) 100% no-repeat, var(--line); }
.x-progress .pct { min-width: 4ch; font: 700 14px var(--mono); text-align: right; }
.x-progress .no-sda { display: none; max-width: 640px; margin: 12px auto 0; color: var(--muted); }
@supports not (animation-timeline: scroll()) {
  .x-progress .progress { display: none; }
  .x-progress .no-sda { display: block; }
}
/* key */
@property --w { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --pct { syntax: "<integer>"; inherits: true; initial-value: 0; }
@keyframes read { to { --w: 100%; --pct: 100; } }

.x-progress .progress {
  animation: read linear both;
  animation-timeline: scroll(nearest block);   /* the clock is the nearest scroll box: the reader */
}
.x-progress .pct { counter-reset: pct var(--pct); }
.x-progress .pct::after { content: counter(pct) "%"; }
/* /key */

/* live support notes (built from css/exhibits.js) */
.sup-scroll-timeline .sup-no { display: none; }
@supports not (animation-timeline: scroll()) { .sup-scroll-timeline .sup-yes { display: none; } .sup-scroll-timeline .sup-no { display: inline; } .sup-scroll-timeline { --sup: var(--no); } }