.timeline{--guiding-color: var(--color-primary-light);--dot-size: .5em;--line-thickness: .3em;--line-br: .1em}.timeline>article{display:grid;grid-template-areas:"line-before void1" "dot date" "line-after description";grid-template-columns:var(--dot-size) 1fr;gap:.2em .5em}.timeline>article:before,.timeline>article:after{place-self:stretch center;content:"";display:block;width:var(--line-thickness);background-color:var(--guiding-color)}.timeline>article:before{grid-area:line-before;border-bottom-left-radius:var(--line-br);border-bottom-right-radius:var(--line-br);min-height:1em}.timeline>article:after{grid-area:line-after;border-top-left-radius:var(--line-br);border-top-right-radius:var(--line-br)}.timeline>article:first-child:before{border-top-left-radius:var(--line-br);border-top-right-radius:var(--line-br)}.timeline>article:last-child:after{border-bottom-left-radius:var(--line-br);border-bottom-right-radius:var(--line-br)}.timeline>article .dot{grid-area:dot;place-self:center;--size: var(--dot-size);display:block;width:var(--size);height:var(--size);border:4px solid var(--guiding-color);border-radius:calc(var(--dot-size) * .5)}.timeline>article:first-child .dot{background-color:var(--guiding-color)}.timeline>article .date{grid-area:date;font-weight:700}.timeline>article .description{grid-area:description}.timeline ul{margin:0;padding-inline-start:1em}.timeline.-spinning-dots{--spin-duration: 5s}.timeline.-spinning-dots .dot{animation:spin var(--spin-duration) forwards infinite linear;animation-delay:calc(-1 * var(--rng) * var(--spin-duration))}@keyframes spin{0%{rotate:0turn}to{rotate:1turn}}