.pbar__head{max-width:20ch}.pbar__intro{max-width:56ch;color:var(--color-ink-2);margin-top:20px}.pbar__inst{gap:32px;margin-top:56px;display:grid}@media (min-width:63.75rem){.pbar__inst{gap:var(--gutter);grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}.pbar__fig{grid-column:1/span 4}.pbar__plot{grid-column:6/span 7}}.pbar__fig{margin:0}.pbar__num{display:block}.pbar__unit{text-transform:uppercase;color:var(--color-ink-2);margin-top:14px;display:block}.pbar__scale{color:var(--color-ink-3);margin-top:6px;display:block}.pbar__track{border-radius:var(--radius-control);height:1.25rem;position:relative;overflow:hidden}.pbar__rule{background:var(--color-surface-recessed);transform-origin:0;position:absolute;inset:0}.pbar__fill{width:calc(var(--fill) * 100%);clip-path:inset(0);display:flex;position:absolute;inset:0 auto 0 0}.pbar__seg{flex:0 0 calc(var(--w) * 100%);background:color-mix(in srgb, var(--color-ink) var(--ink,100%), var(--color-surface-page))}.pbar__seg:last-child{flex:1 0 auto}.pbar__seg+.pbar__seg{box-shadow:inset 1px 0 0 var(--color-surface-page)}.pbar__over{top:0;bottom:0;left:calc(var(--mark) * 100%);background-image:repeating-linear-gradient(45deg, var(--color-surface-page) 0 1px, transparent 1px 5px);position:absolute;right:0}.pbar__mark{top:0;bottom:0;left:calc(var(--mark) * 100%);background:var(--color-surface-page);width:2px;margin-left:-1px;position:absolute}.pbar__key{margin:28px 0 0}.pbar__row{border-top:1px solid var(--color-rule);justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;display:flex}.pbar__row dt{color:var(--color-ink-2);align-items:center;gap:12px;display:flex}.pbar__row dd{font-variant-numeric:tabular-nums;flex:none;margin:0}.pbar__swatch{background:color-mix(in srgb, var(--color-ink) var(--ink,0%), var(--color-surface-page));flex:none;width:10px;height:10px}.pbar__row--spare .pbar__swatch{background:var(--color-surface-recessed);box-shadow:inset 0 0 0 1px var(--color-rule)}.pbar__row--over .pbar__swatch{background-image:repeating-linear-gradient(45deg, var(--color-ink) 0 1px, transparent 1px 5px);box-shadow:inset 0 0 0 1px var(--color-rule)}.pbar__over-note{border-left:2px solid var(--color-ink);background:var(--color-surface-recessed);max-width:60ch;margin-top:24px;padding:16px 20px}.pbar__foot{max-width:60ch;color:var(--color-ink-2);margin-top:24px}@media (prefers-reduced-motion:no-preference){.pbar__inst[data-reveal=armed] .pbar__rule{transform:scaleX(0)}.pbar__inst[data-reveal=shown] .pbar__rule{transition:transform var(--dur-lift) var(--ease-glide)}.pbar__inst[data-reveal=armed] .pbar__fill{clip-path:inset(0 100% 0 0)}.pbar__inst[data-reveal=shown] .pbar__fill{transition:clip-path var(--dur-panel) var(--ease-glide) .15s}.pbar__inst[data-reveal=armed] .roll__col{--roll-d:0!important}.pbar__inst[data-reveal=armed] .roll__strip{transition:none}.pbar__inst[data-reveal=armed] .pbar__row{opacity:0}.pbar__inst[data-reveal=shown] .pbar__row{transition:opacity var(--dur-state) var(--ease-default) calc(.3s + var(--i) * .1s)}}