.direction-hero .navigation-arrow {
  display: block;
  margin: 10px 0 18px;
  color: var(--mint);
  font-size: 72px;
  line-height: .8;
  letter-spacing: 0;
}

.direction-hero .navigation-instruction {
  max-width: 280px;
  margin: 16px auto 0;
  color: #dff7eb;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
}

.direction-hero .navigation-steps {
  display: block;
  margin-top: 7px;
  color: #9bc1b3;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .3px;
}

.route-facts {
  grid-template-columns: repeat(2, 1fr);
}

.voice-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 4px;
  padding: 14px 0;
  border-top: 1px solid #345a4f;
  color: #bdd5cc;
  font-size: 12px;
}

.voice-setting select {
  border: 1px solid #4f766b;
  border-radius: 9px;
  background: #1a4137;
  color: #fff;
  padding: 7px 9px;
  font: inherit;
}

.navigation-route-map {
  min-height: 190px;
  margin: -8px 0 18px;
  border: 1px solid #31584d;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 40%, #214b40, #14372f 72%);
  overflow: hidden;
}

.navigation-route-map svg { display: block; width: 100%; height: 190px; }
.route-corridor-wall { fill: none; stroke: #0a211b; stroke-width: 31; stroke-linecap: round; stroke-linejoin: round; }
.route-corridor-floor { fill: none; stroke: #5e8d7e; stroke-width: 23; stroke-linecap: round; stroke-linejoin: round; }
.route-map-node { fill: #f7fbf9; stroke: #14372f; stroke-width: 3; }
.route-map-node.destination { fill: #ffc44a; }
.route-map-label { fill: #d8ebe4; font-size: 9px; font-weight: 750; }
.route-corridor-arrow { fill: #b7eed1; stroke: #155e4d; stroke-width: 2; filter: drop-shadow(0 3px 4px rgba(0,0,0,.28)); opacity: .48; animation: corridor-pulse 1.6s ease-in-out infinite; animation-delay: var(--arrow-delay); transform-box: fill-box; transform-origin: center; }
.route-corridor-arrow.is-passed { fill: #53766b; opacity: .3; animation: none; }
.route-corridor-arrow.is-next { fill: #fff7c9; opacity: 1; animation-duration: .8s; }
.route-progress-marker { fill: none; stroke: #fff7c9; stroke-width: 2; opacity: .85; animation: corridor-marker 1.1s ease-in-out infinite; }
@keyframes corridor-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes corridor-marker { 0%, 100% { r: 10; opacity: .35; } 50% { r: 16; opacity: 1; } }