.timeline::before {
  background: linear-gradient(var(--cyan), rgba(87, 221, 255, .2));
  box-shadow: 0 0 8px rgba(87, 221, 255, .35);
  pointer-events: none;
}

.timeline::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background-image: linear-gradient(to bottom, transparent 15%, rgba(87, 221, 255, .08) 45%, rgba(87, 221, 255, .8) 72%, #d9faff 80%, transparent 92%);
  background-size: 100% 240px;
  background-repeat: repeat-y;
  filter: drop-shadow(0 0 5px rgba(87, 221, 255, .85));
  pointer-events: none;
  animation: timeline-energy-flow 4s linear infinite;
}

@keyframes timeline-energy-flow {
  from { background-position: 0 0; }
  to { background-position: 0 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline::after { animation: none; opacity: .45; }
}

.timeline-item-rich {
  padding-bottom: 24px;
}

.timeline-event-layout {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 17px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid rgba(87, 221, 255, .13);
  background: linear-gradient(105deg, rgba(7, 26, 47, .74), rgba(4, 15, 30, .42));
  transition: border-color .18s ease, background .18s ease;
}

.timeline-item > .timeline-event-content {
  padding: 12px;
  border: 1px solid transparent;
}

.timeline-item > .timeline-event-content,
.timeline-item > .timeline-event-layout {
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.timeline-marker {
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.timeline-item:focus-within {
  --event-border: rgba(87, 221, 255, .55);
  --event-glow: inset 3px 0 0 var(--cyan), 0 0 22px rgba(87, 221, 255, .12);
  --event-background: rgba(31, 105, 143, .13);
  --event-shift: translateX(3px);
  --event-marker-color: var(--cyan);
  --event-marker-glow: 0 0 16px rgba(87, 221, 255, .85);
}

@media (hover: hover) {
  .timeline-item:hover {
    --event-border: rgba(87, 221, 255, .55);
    --event-glow: inset 3px 0 0 var(--cyan), 0 0 22px rgba(87, 221, 255, .12);
    --event-background: rgba(31, 105, 143, .13);
    --event-shift: translateX(3px);
    --event-marker-color: var(--cyan);
    --event-marker-glow: 0 0 16px rgba(87, 221, 255, .85);
  }
}

.timeline-item > .timeline-event-content,
.timeline-item > .timeline-event-layout {
  border-color: var(--event-border, rgba(87, 221, 255, .13));
  background-color: var(--event-background, transparent);
  box-shadow: var(--event-glow, none);
  transform: var(--event-shift, none);
}

.timeline-item > .timeline-marker {
  background-color: var(--event-marker-color, #061726);
  box-shadow: var(--event-marker-glow, 0 0 9px rgba(87, 221, 255, .5));
}

@media (prefers-reduced-motion: reduce) {
  .timeline-item > .timeline-event-content,
  .timeline-item > .timeline-event-layout,
  .timeline-item > .timeline-marker,
  .timeline-item .timeline-event-thumbnail img,
  .timeline-item .timeline-event-thumbnail:hover img {
    transition: none;
    transform: none;
  }
}

.timeline-event-thumbnail {
  position: relative;
  display: block;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 1px solid rgba(87, 221, 255, .3);
  background: radial-gradient(circle, rgba(87, 221, 255, .12), rgba(3, 12, 24, .95));
}

.timeline-event-thumbnail::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-top: 1px solid rgba(87, 221, 255, .25);
  border-left: 1px solid rgba(87, 221, 255, .25);
  pointer-events: none;
}

.timeline-event-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease, filter .2s ease;
}

.timeline-event-thumbnail:hover img {
  filter: brightness(1.08);
  transform: scale(1.06);
}

.timeline-event-thumbnail > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #417b98;
  font-size: 27px;
}

.timeline-event-thumbnail > span[hidden] {
  display: none;
}

.timeline-event-content {
  min-width: 0;
}

.timeline-item-rich h3 {
  margin-top: 8px;
}

@media (max-width: 620px) {
  .timeline-event-layout {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 11px;
    padding: 9px;
  }

  .timeline-event-thumbnail {
    width: 64px;
    height: 64px;
  }
}