.map-loading-guide {
  width: 100%; max-width: 100%; min-width: 0; margin: 22px 0 0;
  color: #294746; font-family: inherit; text-align: center;
}
.map-loading-guide .map-guide-variant {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  width: 100%; max-width: 100%; min-width: 0;
}
.map-loading-guide .map-guide-touch { display: grid; }
.map-loading-guide .map-guide-desktop { display: none; }
.map-loading-guide .map-guide-card {
  display: flex; flex-direction: column; align-items: center;
  min-width: 0; margin: 0; padding: 10px 6px 12px;
  border: 1px solid rgba(154, 131, 61, .26); border-radius: 12px;
  background: rgba(255, 255, 255, .34);
}
.map-loading-guide .map-guide-svg {
  display: block; width: 100%; max-width: 120px; height: auto;
  aspect-ratio: 6 / 5; overflow: visible; flex: none;
}
.map-loading-guide .map-guide-outline,
.map-loading-guide .map-guide-directions,
.map-loading-guide .map-guide-contact {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.map-loading-guide .map-guide-directions { color: #9a833d; }
.map-loading-guide .map-guide-active { fill: #9a833d; fill-opacity: .3; }
.map-loading-guide .map-guide-contact { color: #9a833d; stroke-width: 1.2; }
.map-loading-guide .map-guide-caption {
  display: grid; gap: 4px; width: 100%; min-width: 0;
  font-size: 14px; line-height: 1.4; overflow-wrap: anywhere;
}
.map-loading-guide .map-guide-caption strong { font-size: inherit; font-weight: 600; }
.map-loading-guide .map-guide-caption span { font-size: inherit; }
.map-loading-guide .map-guide-motion { transform-box: fill-box; transform-origin: center; }
.map-loading-guide .map-guide-slide { animation: map-guide-slide 2.8s ease-in-out infinite; }
.map-loading-guide .map-guide-spread-left { animation: map-guide-spread-left 2.8s ease-in-out infinite; }
.map-loading-guide .map-guide-spread-right { animation: map-guide-spread-right 2.8s ease-in-out infinite; }
.map-loading-guide .map-guide-contact { animation: map-guide-contact 2.8s ease-in-out infinite; }
@keyframes map-guide-slide { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes map-guide-spread-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes map-guide-spread-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes map-guide-contact { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }

[data-guide-playing="false"] .map-guide-motion,
.map-loading-guide[hidden] .map-guide-motion,
[hidden] .map-loading-guide .map-guide-motion,
.map-loading-guide [hidden] .map-guide-motion,
.map-loading-guide .map-guide-motion[hidden] { animation-play-state: paused; }
.map-loading-guide[hidden], [hidden] .map-loading-guide,
.map-loading-guide [hidden] { display: none !important; }

@media (hover: hover) and (pointer: fine) {
  .map-loading-guide .map-guide-touch { display: none; }
  .map-loading-guide .map-guide-desktop { display: grid; }
}
@media (max-width: 480px) {
  .map-loading-guide .map-guide-variant { gap: 6px; }
  .map-loading-guide .map-guide-card { padding: 8px 4px 10px; }
  .map-loading-guide .map-guide-caption { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-loading-guide .map-guide-motion { animation: none !important; transition: none !important; }
}

/* The guide lands beside the original help node. Pointer-mode changes can
   replace that node's text without removing these decorative icons. */
.map-ui > footer .map-guide-help {
  display: flex; align-items: center; gap: 6px; order: 2;
  flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0;
}
.map-ui > footer .map-guide-help #map-help {
  flex: 1 1 auto; min-width: 0; margin: 0;
  white-space: normal; overflow-wrap: anywhere;
}
.map-loading-guide.map-guide-dock {
  width: 66px; height: 24px; max-width: 66px; flex: 0 0 66px;
  margin: 0; color: inherit; text-align: left; pointer-events: none;
}
.map-guide-dock .map-guide-variant { gap: 3px; width: 66px; height: 24px; align-items: center; }
.map-loading-guide.map-guide-dock .map-guide-card {
  position: relative; width: 20px; height: 24px; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent;
}
.map-loading-guide.map-guide-dock .map-guide-svg { width: 20px; height: 20px; max-width: 20px; }
.map-guide-dock .map-guide-outline,
.map-guide-dock .map-guide-directions,
.map-guide-dock .map-guide-contact { vector-effect: non-scaling-stroke; stroke-width: .75px; }
.map-guide-dock .map-guide-caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
}
.map-guide-flight {
  position: fixed; left: 0; top: 0; z-index: 20; margin: 0;
  pointer-events: none; transform-origin: 0 0; will-change: transform, opacity;
}
.map-guide-flight > .map-loading-guide.map-guide-flight-guide { width: 100%; max-width: none; height: 100%; margin: 0; }
.map-guide-flight[hidden] { display: none !important; }
@media (max-width: 760px) {
  .map-ui > footer .map-guide-help { grid-column: 2; align-items: flex-start; line-height: 1.35; }
  .map-ui > footer .map-guide-help #map-help { font-size: inherit; }
}