body {
  font-family: "Inter", sans-serif;
  background-color: #0f172a;
  color: #e2e8f0;
}
.path-line {
  height: 100%;
  width: 4px;
  background-color: #4b5563;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}
.path-milestone {
  position: relative;
  background-color: #1f2937;
  border: 2px solid #4b5563;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  z-index: 10;
}
.milestone-content {
  background-color: #1f2937;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #374151;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /* Initial state for animation */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* Final state for animation */
.milestone-visible {
  opacity: 1;
  transform: translateY(0);
}
.footprint {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}