.tl-path{--cols:5;--node:14px;--gap:24px;--lava-end:var(--red);position:relative}html.dark .tl-path,.surface-ink .tl-path{--lava-end:#ee4034}.tl-path ol{grid-template-columns:repeat(var(--cols), minmax(0, 1fr));gap:0 var(--gap);margin:0;padding:0;list-style:none;display:grid}.tl-path:before,.tl-path .lava{content:"";left:0;right:0;top:calc(var(--node) / 2 - 1px);pointer-events:none;height:2px;position:absolute}.tl-path:before{top:calc(var(--node) / 2 - .5px);background:var(--line);height:1px;-webkit-mask-image:linear-gradient(90deg,#000 88%,#0000);mask-image:linear-gradient(90deg,#000 88%,#0000)}.tl-path .lava{background:linear-gradient(90deg, var(--purple), var(--lava-end) var(--last,calc((var(--cols) - 1) / var(--cols) * (100% + var(--gap)) + var(--node) / 2)), transparent)}.tl-path li{padding-top:calc(var(--node) + 22px);position:relative}.tl-path .node{z-index:1;width:var(--node);height:var(--node);background:linear-gradient(var(--bg), var(--bg)) padding-box, var(--lava) border-box;border:2px solid #0000;border-radius:50%;transition:box-shadow .4s;position:absolute;top:0;left:0}.tl-path .n{letter-spacing:.08em;color:var(--accent-text);font-size:13px;display:block}.tl-path h3{letter-spacing:-.01em;margin-top:8px;font-size:18px;font-weight:700;line-height:1.3}.tl-path p{color:var(--muted);max-width:30ch;margin-top:8px;font-size:15px;line-height:1.5}.tl-path.pre .lava{clip-path:inset(0 100% 0 0)}.tl-path.pre li:not(.lit) .node{background:var(--bg);border-color:var(--line-strong)}.tl-path.pre li.lit .node{box-shadow:0 0 0 4px #7009a31f}html.dark .tl-path.pre li.lit .node{box-shadow:0 0 0 4px #c084f529,0 0 14px #c084f580}@media (width<=960px){.tl-path ol{grid-template-columns:minmax(0,1fr);gap:0}.tl-path:before,.tl-path .lava{left:calc(var(--node) / 2 - 1px);width:2px;height:auto;top:0;bottom:0;right:auto}.tl-path:before{left:calc(var(--node) / 2 - .5px);width:1px;-webkit-mask-image:linear-gradient(#000 88%,#0000);mask-image:linear-gradient(#000 88%,#0000)}.tl-path .lava{background:linear-gradient(180deg, var(--purple), var(--lava-end) var(--last,85%), transparent)}.tl-path.pre .lava{clip-path:inset(0 0 100%)}.tl-path li{padding:0 0 28px calc(var(--node) + 20px)}.tl-path li:last-child{padding-bottom:0}.tl-path .node{top:3px}.tl-path h3{margin-top:4px}.tl-path p{max-width:52ch}}@media (prefers-reduced-motion:reduce){.tl-path .node{transition:none}}