.road{position:relative;margin:0;padding:var(--s2) 0;list-style:none;--lane: 56px;--dot: 13px;--tl: 28px}.road:before,.road__fill{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;border-radius:2px}.road:before{background:var(--line)}.road__fill{background:linear-gradient(180deg,oklch(var(--acl) var(--acc) 40),oklch(var(--acl) var(--acc) 262),oklch(var(--acl) var(--acc) 150),oklch(var(--acl) var(--acc) 300),oklch(var(--acl) var(--acc) 75),oklch(var(--acl) var(--acc) 350),oklch(var(--acl) var(--acc) 235),oklch(var(--acl) var(--acc) 178),oklch(var(--acl) var(--acc) 205),oklch(var(--acl) var(--acc) 320),oklch(var(--acl) var(--acc) 40));background-size:100% 200%;animation:rb-down 6s linear infinite;transform-origin:top center;transform:scaleY(var(--p, 0));transition:transform .18s linear}@keyframes rb-down{0%{background-position:0 0}to{background-position:0 -200%}}.road li{position:relative;display:grid;grid-template-columns:1fr var(--lane) 1fr;align-items:start;padding:var(--s5) 0}.road__box{grid-row:1}.road li[data-side=l] .road__box{grid-column:1;padding-right:var(--s3);text-align:right}.road li[data-side=r] .road__box{grid-column:3;padding-left:var(--s3);text-align:left}.road__dot{--accent: oklch(var(--acl) var(--acc) var(--h));grid-column:2;grid-row:1;justify-self:center;align-self:start;margin-top:calc(var(--tl) / 2 - var(--dot) / 2);width:var(--dot);height:var(--dot);border-radius:50%;background:var(--paper);box-shadow:0 0 0 2px var(--line);position:relative;z-index:1;transition:box-shadow .4s var(--ease),background .4s var(--ease),transform .4s var(--ease-o)}.road li[data-on] .road__dot{background:var(--accent);box-shadow:0 0 0 2px var(--accent),0 0 0 6px color-mix(in oklab,var(--accent) 18%,transparent);transform:scale(1.15)}.road b{display:flex;align-items:center;gap:10px;min-height:var(--tl);color:var(--ink);font-weight:600;font-size:clamp(1.05rem,2vw,1.3rem);letter-spacing:-.02em;line-height:1.2}.road li[data-side=l] b{justify-content:flex-end}.road__t{display:block;margin-top:2px;max-width:42ch;color:var(--ink-2);font-size:var(--t-sm);line-height:1.5}.road li[data-side=l] .road__t{margin-left:auto}.road__plus{font-size:var(--t-xs);font-weight:700;letter-spacing:-.01em}.road li.road__grp{display:flex;justify-content:center;padding:var(--s5) 0 var(--s2)}.road__lbl{position:relative;z-index:1;display:inline-flex;align-items:baseline;gap:6px;padding:6px 14px;border-radius:var(--r-full);border:1.5px solid transparent;background:linear-gradient(var(--paper-2),var(--paper-2)) padding-box;box-shadow:0 0 0 4px var(--paper);font-size:var(--t-xs);font-weight:600;color:var(--ink);letter-spacing:-.005em;white-space:nowrap}.road__lbl small{font-size:inherit;font-weight:500;color:var(--ink-3)}.road__lbl small:before{content:"·";margin-right:6px}.road li.road__grp[data-on] .road__lbl{background:linear-gradient(var(--paper-2),var(--paper-2)) padding-box,var(--rb) border-box;background-size:auto,200% 100%;animation:rb-run 9s linear infinite}.road__date{font-size:var(--t-xs);font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}.road__link{color:inherit;text-decoration:none}.road__link:focus-visible{outline:none}.road__link--hue,.road__link--mix{position:relative;display:inline-block}.road__link--hue{--rlg: linear-gradient(90deg, oklch(var(--acl) var(--acc) var(--h)), oklch(var(--acl) var(--acc) var(--h)))}.road__link--mix{--rlg: var(--mixg, var(--rb))}.road__link--hue .rl__fx,.road__link--mix .rl__fx{position:absolute;inset:0;pointer-events:none;background:var(--rlg);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-mask-image:linear-gradient(90deg,#000 0 40%,transparent 60% 100%);mask-image:linear-gradient(90deg,#000 0 40%,transparent 60% 100%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;transition:-webkit-mask-position .9s cubic-bezier(.45,.05,.2,1),mask-position .9s cubic-bezier(.45,.05,.2,1)}.road__link--mix .rl__fx{animation:rb-run 5s linear infinite}.road__link--hue .rl__ink,.road__link--mix .rl__ink{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent 0 40%,#000 60% 100%);mask-image:linear-gradient(90deg,transparent 0 40%,#000 60% 100%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;transition:-webkit-mask-position .9s cubic-bezier(.45,.05,.2,1),mask-position .9s cubic-bezier(.45,.05,.2,1)}.road__link--hue:hover .rl__fx,.road__link--hue:hover .rl__ink,.road__link--mix:hover .rl__fx,.road__link--mix:hover .rl__ink,.road__link--hue:focus-visible .rl__fx,.road__link--hue:focus-visible .rl__ink,.road__link--mix:focus-visible .rl__fx,.road__link--mix:focus-visible .rl__ink{-webkit-mask-position:0 0;mask-position:0 0}.road b .plusq,.road b .supfx{font-size:inherit;font-weight:inherit}.road b .plusfx{font-size:inherit}.road li.road__grp--done{padding-top:var(--s7)}@media (max-width: 720px){.road:before,.road__fill{left:calc(var(--lane) / 2);margin-left:-1px}.road li{grid-template-columns:var(--lane) 1fr}.road li[data-side=l] .road__box,.road li[data-side=r] .road__box{grid-column:2;text-align:left;padding:0 0 0 var(--s2)}.road__dot{grid-column:1}.road li[data-side=l] b{justify-content:flex-start}.road li[data-side=l] .road__t{margin-left:0}.road li.road__grp{justify-content:flex-start}}@media (max-width: 420px){.road__lbl{display:inline-block}.road__lbl small{display:block;margin-top:2px}.road__lbl small:before{content:none}}@media (prefers-reduced-motion: reduce){.road__fill,.road__dot{transition:none}.road__fill,.road li.road__grp[data-on] .road__lbl{animation:none}}.road:not(.is-all)>li.is-later{display:none}.road.is-all>li.road__grp--all{display:none}.road__all{appearance:none;border:0;background:var(--paper-2);color:var(--ink);font:inherit;font-size:var(--t-sm);font-weight:600;padding:7px 16px;border-radius:999px;cursor:pointer}.road__all:hover,.road__all:focus-visible{background:var(--ink);color:var(--paper);outline:none}.road b{flex-wrap:wrap;row-gap:1px}.road b>:not(.road__date){white-space:nowrap}.road__date{flex-basis:100%;order:3;line-height:1.3}.road li[data-side=l] .road__date{text-align:right}@media (max-width: 720px){.road li[data-side=l] .road__date{text-align:left}}
