@property --meter{syntax:"<number>";inherits:true;initial-value:0}.meter{--meter-ink:var(--accent);background:var(--faint);height:8px;transition:--meter .7s var(--ease);animation:meter-fill .9s var(--ease) backwards;border-radius:999px;display:block;position:relative;overflow:hidden}.meter:before{content:"";width:calc(var(--meter) * 100%);border-radius:inherit;background:var(--meter-ink);transition:background-color .3s var(--ease);position:absolute;inset:0 auto 0 0}.meter[hidden]{display:none}.meter.still{animation:none}.meter.sm{height:6px}.meter[data-tone=up]{--meter-ink:var(--up)}.meter[data-tone=down]{--meter-ink:var(--down)}.meter[data-tone=gold]{--meter-ink:var(--gold)}.meter[data-tone=brand]{--meter-ink:var(--brand-gradient)}.meter[data-tone=muted]{--meter-ink:var(--muted)}@keyframes meter-fill{0%{--meter:0}}@media (prefers-reduced-motion:reduce){.meter,.meter:before{transition:none;animation:none}}