.scene-nav {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  top: 50%;
  z-index: 45;
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translateY(-50%);
}
.scene-nav__button {
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(188,145,53,.55);
  border-radius: 50%;
  color: #725621;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.96), rgba(250,235,199,.9));
  box-shadow:
    0 7px 22px rgba(103,74,24,.13),
    0 0 18px rgba(239,201,111,.18);
  font: 400 19px/1 var(--serif);
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity .25s ease, transform .2s ease, box-shadow .2s ease;
}
.scene-nav__button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow:
    0 9px 26px rgba(103,74,24,.16),
    0 0 22px rgba(239,201,111,.28);
}
.scene-nav__button:focus-visible {
  outline: 3px solid rgba(175,125,34,.42);
  outline-offset: 3px;
}
.scene-nav__button:disabled {
  opacity: .22;
  cursor: default;
}
.scene-nav__position {
  min-width: 48px;
  padding: 4px 6px;
  border-radius: 999px;
  color: rgba(104,82,47,.72);
  background: rgba(255,252,247,.7);
  font: 500 10px/1.3 var(--sans);
  letter-spacing: .06em;
  text-align: center;
  text-shadow: 0 0 10px rgba(255,252,247,.98);
}
.scene-nav.is-moving .scene-nav__button:not(:disabled) {
  opacity: .58;
}
.scene-nav.is-away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 899px) {
  .scene-nav[data-placement="low"] {
    top: 75%;
  }
  .scene-nav[data-placement="bottom"] {
    top: 84%;
  }
  .scene-nav[data-avoid="media"] {
    top: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: none;
  }
}
@media (min-width: 900px) {
  .scene-nav {
    right: 24px;
    gap: 12px;
  }
  .scene-nav__button {
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .scene-nav__button {
    transition: none;
  }
}