.saga-answer-scroll-hint {
  display: none;
}

@media (max-width: 700px) {
  .saga-answer-scroll-hint {
    align-items: center;
    background: rgb(7 11 13 / 86%);
    border: 1px solid rgb(243 240 231 / 24%);
    border-radius: 999px;
    bottom: max(0.75rem, calc(env(safe-area-inset-bottom) + 0.5rem));
    box-shadow: 0 0.5rem 1.75rem rgb(0 0 0 / 52%);
    color: rgb(243 240 231 / 94%);
    display: grid;
    height: 2.65rem;
    justify-items: center;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, 0.4rem);
    transition:
      opacity 160ms ease-out,
      transform 160ms ease-out;
    width: 2.65rem;
    z-index: 18;
  }

  .saga-answer-scroll-hint.is-visible {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }

  .saga-answer-scroll-hint svg {
    height: 1.45rem;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
    width: 1.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saga-answer-scroll-hint {
    transition: none;
  }
}