.mobileOrientationHint {
  display: none;
}

@media (max-width: 760px) and (pointer: coarse) and (orientation: portrait) {
  .mobileOrientationHint.is-visible {
    position: absolute;
    z-index: 50;
    top: 66px;
    left: 50%;
    width: min(280px, calc(100% - 32px));
    transform: translateX(-50%);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 16px 18px 20px;
    color: #fff4cf;
    background: linear-gradient(150deg, #182b39f5, #0b1721fa);
    border: 1px solid #c3a34b66;
    border-radius: 14px;
    box-shadow: 0 12px 40px #0006;
    font-family: var(--utility, system-ui, sans-serif);
    letter-spacing: .08em;
    pointer-events: none;
    text-align: center;
    text-transform: none;
  }

  .mobileOrientationHint strong { font-size: 19px; letter-spacing: .02em; }
  .mobileOrientationHint span:last-child { color: rgba(244, 232, 210, .76); font-size: 11px; }
  .mobileOrientationIcon { color: #cfb779; width: 80px; height: 80px; }
  .mobileOrientationIcon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .orientationArc { opacity: .5; }
  .orientationPhone { transform-origin: 50px 51px; animation: phoneTurn 2s ease-in-out 2; }
}

@keyframes phoneTurn {
  0%, 15% { transform: rotate(0); }
  55%, 85% { transform: rotate(90deg); }
  100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .orientationPhone { animation: none; transform: rotate(90deg); }
}