#timeline .tl-chart { margin-top: 32px; max-width: 100%; overflow: hidden; --cols: 300px repeat(9, minmax(0, 1fr)) 72px; }
#timeline .tl-row { display: grid; grid-template-columns: var(--cols); align-items: center; position: relative; }
#timeline .tl-ruler { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#timeline .tl-wk { font: 600 13px/1 var(--head); color: var(--muted); text-align: center; letter-spacing: .08em; }
#timeline .tl-wk::before { content: "W"; opacity: .55; margin-right: 1px; }
#timeline .tl-w9 { color: var(--cyan); }
#timeline .tl-body { position: relative; padding: 10px 0; }
#timeline .tl-grid { position: absolute; inset: 0; display: grid; grid-template-columns: var(--cols); pointer-events: none; }
#timeline .tl-grid i { border-left: 1px dashed rgba(120,170,220,.1); }
#timeline .tl-grid i:first-child { grid-column: 2; }
#timeline .tl-body .tl-row { min-height: 72px; }
#timeline .tl-lab { padding-right: 24px; }
#timeline .tl-lab small { display: block; font: 700 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
#timeline .tl-lab b { display: block; font: 600 18px/1.2 var(--head); color: var(--white); }
#timeline .tl-lab span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }
#timeline .tl-bar { position: relative; height: 34px; margin: 0 3px; }
#timeline .tl-bar > i { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(90deg, rgba(14,165,233,.55), rgba(34,211,238,.9)); box-shadow: 0 0 24px -4px rgba(34,211,238,.6), inset 0 1px 0 rgba(255,255,255,.25);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 650ms + 200ms); }
#timeline .tl-bar > i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent) -100% 0 / 50% 100% no-repeat; }
#timeline.play .tl-bar > i { transform: none; }
#timeline.play.run .tl-bar > i::after { animation: tl-shine 3.2s linear infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes tl-shine { to { background-position: 250% 0; } }
/* open-ended arrow */
#timeline .tl-arrow { margin-right: 3px; -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent); }
#timeline .tl-arrow > i { border-radius: 10px 0 0 10px; background: linear-gradient(90deg, rgba(34,211,238,.95), rgba(34,211,238,.25) 75%, transparent); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
#timeline .tl-arrow em { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(34,211,238,.8); opacity: 0; }
#timeline .tl-arrow .p1 { left: 22%; } #timeline .tl-arrow .p2 { left: 50%; } #timeline .tl-arrow .p3 { left: 76%; }
#timeline.play .tl-arrow em { opacity: 1; transition: opacity .4s 2.6s; }
#timeline.play.run .tl-arrow em { animation: tl-ping 2.4s ease-out infinite; }
#timeline.play.run .tl-arrow .p2 { animation-delay: .8s; } #timeline.play.run .tl-arrow .p3 { animation-delay: 1.6s; }
@keyframes tl-ping { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.9); } 70%, 100% { box-shadow: 0 0 0 16px rgba(34,211,238,0); } }
/* fast track */
#timeline .tl-fast { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,197,0,.25); }
#timeline .tl-fast .tl-row { min-height: 64px; }
#timeline .tl-fast .tl-lab small { color: var(--gold); }
#timeline .tl-gold > i { background: linear-gradient(90deg, rgba(255,197,0,.45), var(--gold)); box-shadow: 0 0 28px -4px rgba(255,197,0,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition-duration: .45s; transition-timing-function: cubic-bezier(.3,1.6,.5,1); }
#timeline .tl-gold > span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 14px/1 var(--head); color: #0b1424; opacity: 0; transition: opacity .4s; transition-delay: calc(var(--i) * 650ms + 600ms); }
#timeline.play .tl-gold > span { opacity: 1; }
#timeline .tl-fine { margin-top: 26px; }
#timeline.fin * { transition: none !important; animation: none !important; }
@media (max-width: 900px) {
  #timeline .tl-chart { --cols: repeat(9, minmax(0, 1fr)) 28px; }
  #timeline .tl-ruler .tl-lab, #timeline .tl-grid i:first-child { grid-column: auto; }
  #timeline .tl-ruler .tl-lab { display: none; }
  #timeline .tl-grid i:first-child { grid-column: 1; }
  #timeline .tl-body .tl-row, #timeline .tl-fast .tl-row { min-height: 0; padding: 12px 0; row-gap: 10px; }
  #timeline .tl-lab { grid-column: 1 / -1; grid-row: 1; padding: 0; }
  #timeline .tl-bar { grid-row: 2; height: 26px; }
  #timeline .tl-row .tl-bar[style] { grid-column: var(--m) !important; }
  #timeline .tl-lab b { font-size: 16px; }
  #timeline .tl-wk::before { content: none; }
}
@media (prefers-reduced-motion: reduce) { #timeline * { transition: none !important; animation: none !important; } #timeline .tl-bar > i { transform: none; } #timeline .tl-arrow em, #timeline .tl-gold > span { opacity: 1; } }