.hrudhi-guide-track {
  position: relative;
  height: 86px;
  isolation: isolate;
  color: #eee8cc;
}
.tour-hrudhi-companion {
  position: absolute;
  bottom: 65px;
  left: 5vw;
  right: 5vw;
  z-index: 4;
}
.guide-ground {
  position: absolute;
  bottom: 9px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #cbcfaa80, transparent);
  pointer-events: none;
}
.guide-traveller {
  position: absolute;
  bottom: 4px;
  left: 0;
}
.hrudhi-guide-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  min-height: 80px;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.guide-viewport {
  width: 65px;
  height: 65px;
  display: block;
  overflow: hidden;
  position: relative;
}
.guide-rest {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.guide-walk-sheet {
  position: absolute;
  left: 0;
  top: 0;
  width: 400% !important;
  max-width: none !important;
  height: 200% !important;
  display: none;
}
.guide-walking .guide-rest {
  visibility: hidden;
}
.guide-walking .guide-walk-sheet {
  display: block;
  animation: hrudhi-stride 800ms steps(1, end) infinite;
}
.guide-paused .guide-walk-sheet {
  animation-play-state: paused;
}
.guide-name {
  font:
    600 11px/1.4 Source,
    sans-serif;
  padding: 1px 8px;
  border-radius: 12px;
  background: #17392ee8;
  color: #fff5d5;
  white-space: nowrap;
}
.guide-place-caption {
  position: absolute;
  bottom: 3px;
  right: 0;
  font:
    600 9px/1.4 Source,
    sans-serif;
  letter-spacing: 0.12em;
  max-width: 48%;
  text-align: right;
  pointer-events: none;
}
.gate-covering .tour-hrudhi-companion {
  visibility: hidden;
}
.farm-map-plane .map-hrudhi-companion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.map-hrudhi-companion .guide-traveller {
  left: 0;
  top: 0;
  bottom: auto;
  width: 100%;
  height: 100%;
}
.map-hrudhi-companion .guide-viewport {
  --map-guide-size: clamp(40px, 6vw, 68px);
  width: var(--map-guide-size);
  height: var(--map-guide-size);
  position: absolute;
  left: calc(var(--map-guide-size) * -.5);
  top: calc(var(--map-guide-size) * -1);
  bottom: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 2px #203b3233);
}
.map-reading .map-hrudhi-companion { display: none; }
@keyframes hrudhi-stride {
  0%,
  100% {
    transform: translate(0, 0);
  }
  12.5% {
    transform: translate(-25%, 0);
  }
  25% {
    transform: translate(-50%, 0);
  }
  37.5% {
    transform: translate(-75%, 0);
  }
  50% {
    transform: translate(0, -50%);
  }
  62.5% {
    transform: translate(-25%, -50%);
  }
  75% {
    transform: translate(-50%, -50%);
  }
  87.5% {
    transform: translate(-75%, -50%);
  }
}
@media (max-width: 700px) {
  .guide-place-caption {
    font-size: 8px;
    max-width: 42%;
  }

}
@media (max-height: 600px) {
  .tour-hrudhi-companion {
    bottom: 58px;
    height: 66px;
  }
  .tour-hrudhi-companion .guide-viewport {
    width: 45px;
    height: 45px;
  }
  .tour-hrudhi-companion .hrudhi-guide-button {
    min-height: 62px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .guide-walk-sheet {
    animation: none !important;
    display: none !important;
  }
  .guide-rest {
    visibility: visible !important;
  }
}
@media (min-height: 701px) {
  .tour-hrudhi-companion {
    height: 112px;
  }
  .tour-hrudhi-companion .guide-viewport {
    width: 90px;
    height: 90px;
  }
  .tour-hrudhi-companion .hrudhi-guide-button {
    width: 94px;
    min-height: 108px;
  }
  .tour-hrudhi-companion .guide-name {
    font-size: 12px;
  }
}

.hrudhi-portrait {
  min-height: 300px;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse, #e6eadb, #cbd7bb);
}
.hrudhi-portrait picture {
  display: contents;
}
.hrudhi-portrait img {
  width: 100%;
  height: min(55svh, 480px);
  object-fit: contain;
  padding: 24px;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .hrudhi-portrait {
    min-height: 240px;
  }
  .hrudhi-portrait img {
    height: 280px;
  }
}
.tour-hrudhi-companion .guide-place-caption{display:none;}

/* Four actual views; pose phase follows travelled distance, not a separate clock. */
.hrudhi-guide-track[data-gait="distance"] .guide-walk-sheet { height:400% !important; animation:none !important; transform:translate(var(--guide-frame-x,0%),var(--guide-row,0%)); }
.hrudhi-guide-track[data-direction="north"] { --guide-row:-25%; }
.hrudhi-guide-track[data-direction="east"] { --guide-row:-50%; }
.hrudhi-guide-track[data-direction="west"] { --guide-row:-75%; }
.hrudhi-guide-track[data-direction="south"] { --guide-row:0%; }
.map-hrudhi-companion[data-direction-ready="true"] .guide-rest { visibility:hidden; }
.map-hrudhi-companion[data-direction-ready="true"] .guide-walk-sheet { display:block; }

.hrudhi-guide-track[data-legacy-sheet="true"] .guide-walk-sheet{height:200%!important;}
.hrudhi-guide-track[data-legacy-sheet="true"][data-direction="west"] .guide-viewport{transform:scaleX(-1);}