@property --draw{syntax:"<number>";inherits:false;initial-value:1}.span-track{background-image:linear-gradient(var(--border-1), var(--border-1));background-position:0;background-repeat:no-repeat;background-size:100% 1px;width:100%;height:10px;display:block;position:relative}.span-track:after{content:"";height:4px;top:3px;left:var(--from);width:max(3px, calc(var(--to) - var(--from)));background:var(--accent);transform-origin:0;transform:scaleX(var(--draw,1));position:absolute}.span-track[data-ongoing=true]:after{background:linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 25%, transparent))}.span-track[data-undated=true]:after{background:repeating-linear-gradient(90deg, var(--border-3) 0 3px, transparent 3px 7px);width:100%;height:1px;top:4px;left:0}.span-track[data-soft=true]:after{background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 35%, transparent), var(--accent) 18%, var(--accent) 82%, color-mix(in oklab, var(--accent) 35%, transparent))}.span-label{font-family:var(--font-mono);letter-spacing:.04em;color:var(--fg-faint);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:10px}@media (prefers-reduced-motion:reduce){.span-track:after{transform:none}}