.segs{flex:none;gap:3px;width:64px;display:inline-flex}.segs i{background:var(--seg-track,color-mix(in srgb, var(--color-text-primary) 12%, var(--color-paper)));border-radius:3px;flex:1 1 0;min-width:0;height:6px}.segs i[data-state=done]{background:var(--color-text-primary)}.segs i[data-state=now]{animation:1.8s ease-in-out infinite pm-now}@keyframes pm-now{0%,to{background-color:color-mix(in srgb, var(--color-text-primary) 12%, var(--color-paper))}50%{background-color:color-mix(in srgb, var(--color-text-primary) 55%, var(--color-paper))}}@media (prefers-reduced-motion:reduce){.segs i[data-state=now]{background-color:color-mix(in srgb, var(--color-text-primary) 40%, var(--color-paper));animation:none}}.segs[data-size=sm]{width:48px}.segs[data-size=sm] i{border-radius:2px;height:4px}.segs[data-shape=bar]{border-radius:3px;gap:0;overflow:hidden}.segs[data-size=sm][data-shape=bar]{border-radius:2px}.segs[data-shape=bar] i,.segs[data-size=sm][data-shape=bar] i{border-radius:0}@property --pm-meter{syntax:"<percentage>";inherits:true;initial-value:0%}.segs[data-variant=meter]{--meter-ink:var(--color-text-primary);transition:--pm-meter var(--dur-state,.22s) var(--ease-out,ease-out);align-items:center}.segs[data-variant=meter][data-tone=at-risk]{--meter-ink:var(--status-at-risk)}.segs[data-variant=meter][data-tone=stop]{--meter-ink:var(--stop)}.segs[data-variant=meter]>i{overflow:hidden}.segs[data-variant=meter]>i>b{width:var(--pm-meter);background:var(--meter-ink);height:100%;display:block}.segs[data-variant=meter][data-kind=ring]{width:var(--icon,16px);height:var(--icon,16px)}.segs[data-variant=meter][data-kind=ring]>i{box-sizing:border-box;border:1px solid var(--meter-ink);background:conic-gradient(var(--meter-ink) var(--pm-meter), var(--seg-track,color-mix(in srgb, var(--color-text-primary) 12%, var(--color-paper))) 0);border-radius:50%;flex:none;width:100%;height:100%}.segs[data-variant=meter][data-kind=spend]{gap:var(--space-tight,6px);width:auto}.segs[data-variant=meter][data-kind=spend]>i{flex:0 0 64px}.segs[data-variant=meter][data-kind=spend][data-size=sm]>i{flex-basis:48px}.segs[data-variant=meter]>.words{font:400 var(--text-small,13px) var(--font-label);color:var(--color-text-secondary);white-space:nowrap}.segs[data-variant=meter][data-tone]>.words{color:var(--meter-ink)}@media (prefers-reduced-motion:reduce){.segs[data-variant=meter]{transition:none}}