.brand-icon,
.footer-top .brand-icon,
#product-preview .tp-brand-mark {
  background: transparent;
  border-radius: 0;
}
.brand-icon img,
#product-preview .tp-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
}
.route-controls {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 8px;
  border: 1px solid #e2e1d7;
  background: #f8f7f2ef;
  backdrop-filter: blur(8px);
  border-radius: 35px;
  width: 260px;
  box-shadow: 0 6px 25px #23272008;
}
.route-play {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  flex-shrink: 0;
  transition:
    background 0.2s,
    transform 0.2s;
}
.route-play:hover {
  background: #bd3d07;
  transform: scale(1.07);
}
.route-play svg {
  width: 15px;
  height: 15px;
}
.route-play .route-pause-icon {
  display: none;
}
.route-play.is-playing .route-pause-icon {
  display: block;
}
.route-play.is-playing .route-play-icon {
  display: none;
}
.route-scrub {
  display: grid;
  gap: 3px;
  flex: 1;
}
.route-scrub label {
  font-size: 10px;
  color: #59624e;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.route-scrub label > span {
  color: #69735b;
  font-size: 8px;
  font-weight: 400;
}
.route-scrub input {
  width: 100%;
  height: 14px;
  margin: 0;
  cursor: ew-resize;
  accent-color: #b83b07;
}
.route-stat {
  width: 282px;
  height: 72px;
}
.route-stat > div {
  flex: 1;
  min-width: 0;
}
.route-stat-icon {
  flex-shrink: 0;
}
.route-stat-icon svg {
  width: 31px;
}
.route-stat strong {
  font-size: 14px;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#route-distance {
  min-width: 6ch;
}
#route-elevation {
  min-width: 13ch;
}
.route-stat-divider {
  color: #9a9f8c;
  padding-inline: 3px;
}
.hero-art:focus-within {
  z-index: 3;
}
@media (max-width: 1100px) {
  .route-stat strong {
    font-size: 12px;
  }
  .route-controls {
    bottom: 0;
  }
}
@media (max-width: 800px) {
  .route-stat {
    width: 232px;
    height: 62px;
  }
  .route-stat strong {
    font-size: 10px;
  }
  .route-controls {
    bottom: -4px;
    width: 230px;
    padding-block: 8px;
  }
}
@media (max-width: 640px) {
  .hero-art {
    height: 330px;
  }
  .route-stat {
    bottom: 57px;
  }
  .route-controls {
    bottom: -2px;
  }
  .terrain-art {
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .route-play {
    transition: none;
  }
}