@media (max-width: 760px) {
  .mobile-swipe-hint {
    position: fixed;
    z-index: 15;
    inset: 0;
    pointer-events: none;
    user-select: none;
  }
  .mobile-swipe-hint[hidden], .mobile-swipe-hint span[hidden], .menu-open .mobile-swipe-hint { display: none; }
  .mobile-swipe-hint span {
    position: absolute;
    top: 52%;
    display: grid;
    place-items: center;
    width: 28px;
    height: 40px;
    border: 1px solid rgba(73, 105, 104, .16);
    border-radius: 999px;
    background: rgba(255, 253, 248, .46);
    box-shadow: 0 2px 12px rgba(28, 51, 51, .06);
    color: rgba(55, 91, 92, .55);
    font: 400 1.45rem/1 Georgia, serif;
    transform: translateY(-50%);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .mobile-swipe-hint__prev { left: max(2px, env(safe-area-inset-left)); }
  .mobile-swipe-hint__next { right: max(2px, env(safe-area-inset-right)); }
}
@media (min-width: 761px) { .mobile-swipe-hint { display: none; } }

.mobile-gesture-hint { display: none; }
@media (max-width: 900px) {
  .mobile-gesture-hint {
    position: fixed;
    z-index: 130;
    top: 38%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: .75rem;
    width: min(320px, calc(100vw - 2rem));
    padding: .8rem .9rem;
    border: 1px solid rgba(76, 112, 110, .2);
    border-radius: 20px;
    background: rgba(255, 253, 248, .76);
    box-shadow: 0 14px 42px rgba(49, 72, 68, .13);
    color: #435b58;
    opacity: 0;
    transform: translate(-50%, 10px) scale(.98);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
  .mobile-gesture-hint[hidden], .menu-open .mobile-gesture-hint { display: none; }
  .mobile-gesture-hint.is-visible { opacity: .94; transform: translate(-50%, 0) scale(1); }
  .mobile-gesture-hint__visual {
    position: relative;
    display: grid;
    flex: 0 0 68px;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(227, 237, 231, .68);
    color: #537e7d;
  }
  .mobile-gesture-hint__hand {
    width: 35px;
    height: 35px;
    overflow: visible;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .68;
    animation: mobile-gesture-drift 2.7s ease-in-out infinite;
  }
  .mobile-gesture-hint__axis {
    position: absolute;
    display: grid;
    place-items: center;
    color: #a66f5c;
    font: 400 1.15rem/1 Georgia, serif;
    opacity: .48;
  }
  .mobile-gesture-hint__axis--horizontal { top: 1px; right: 2px; animation: mobile-gesture-horizontal 2.7s ease-in-out infinite; }
  .mobile-gesture-hint__axis--vertical { bottom: 0; left: 0; animation: mobile-gesture-vertical 2.7s ease-in-out infinite; }
  .mobile-gesture-hint__copy { display: grid; gap: .26rem; min-width: 0; }
  .mobile-gesture-hint__copy strong { color: #405f5e; font: 600 .75rem/1.2 var(--font-sans); letter-spacing: .025em; }
  .mobile-gesture-hint__copy span { color: #626c66; font: 400 .66rem/1.4 var(--font-sans); }
}
@keyframes mobile-gesture-drift {
  0%, 100% { transform: translate(0, 1px); }
  22% { transform: translate(7px, 1px); }
  44% { transform: translate(7px, -4px); }
  62% { transform: translate(7px, 4px); }
  82% { transform: translate(-3px, 4px); }
}
@keyframes mobile-gesture-horizontal {
  0%, 100% { transform: translateX(0); opacity: .35; }
  25%, 55% { transform: translateX(3px); opacity: .78; }
}
@keyframes mobile-gesture-vertical {
  0%, 100% { transform: translateY(0); opacity: .35; }
  42%, 70% { transform: translateY(-3px); opacity: .78; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-gesture-hint__hand, .mobile-gesture-hint__axis { animation: none !important; }
  .mobile-gesture-hint, .mobile-gesture-hint.is-visible { transition: none; }
}
@media (min-width: 901px) { .mobile-gesture-hint { display: none !important; } }