.routeProgress {
  --route-progress: 0;
  --route-progress-accent: #ff9900;
  --route-progress-paper: #fbfbfa;
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease, visibility 0s linear .14s;
}
.routeProgress.isVisible {
  opacity: 1;
  visibility: visible;
  transition: opacity .14s ease;
}
.routeProgressRing {
  width: 52px;
  height: 52px;
  padding: 3px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    from -90deg,
    var(--route-progress-accent) calc(var(--route-progress) * 1%),
    color-mix(in srgb, var(--route-progress-accent) 14%, transparent) 0
  );
  box-shadow: 0 7px 24px rgba(20, 18, 15, .08);
  transform: scale(.94);
  transition: transform .16s ease, background .12s linear, opacity .16s ease;
}
.routeProgress.isVisible .routeProgressRing { transform: scale(1); }
.routeProgressInner {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--route-progress-paper) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--route-progress-accent) 12%, transparent);
  backdrop-filter: blur(3px);
}
.routeProgressMark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--route-progress-accent);
  opacity: .74;
}
.routeProgress.isComplete .routeProgressRing {
  transform: scale(1.04);
  opacity: .82;
}
@media (max-width: 560px) {
  .routeProgressRing { width: 46px; height: 46px; padding: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .routeProgress,
  .routeProgressRing { transition: none !important; }
}