@media (max-width: 980px) {
  .mobile-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    color: #5d746d;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 850;
  }

  .mobile-scroll-hint::before,
  .mobile-scroll-hint::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
  }

  .mobile-scroll-hint::before {
    transform: rotate(-45deg);
  }

  .mobile-scroll-hint::after {
    transform: rotate(135deg);
  }

  [data-mobile-scroll-affordance] {
    --scroll-fade-bg: #fff;
    --scroll-progress: 0;
    --scroll-thumb-ratio: 0.35;
    --scroll-track: rgba(0, 153, 99, 0.14);
    --scroll-thumb: rgba(0, 153, 99, 0.82);
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
  }

  [data-mobile-scroll-affordance].scroll-affordance-enhanced {
    scrollbar-width: none;
  }

  [data-mobile-scroll-affordance].scroll-affordance-native {
    scrollbar-width: thin;
  }

  [data-mobile-scroll-affordance][data-scroll-surface="dark"] {
    --scroll-fade-bg: #071f19;
    --scroll-track: rgba(219, 255, 240, 0.16);
    --scroll-thumb: rgba(0, 200, 128, 0.88);
  }

  [data-mobile-scroll-affordance]::-webkit-scrollbar {
    height: 4px;
  }

  [data-mobile-scroll-affordance].scroll-affordance-enhanced::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  [data-mobile-scroll-affordance].scroll-affordance-native::-webkit-scrollbar {
    height: 4px;
  }

  [data-mobile-scroll-affordance]::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 999px;
  }

  [data-mobile-scroll-affordance]::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
  }

  [data-mobile-scroll-affordance].is-scrollable.can-scroll-left,
  [data-mobile-scroll-affordance].is-scrollable.can-scroll-right {
    background-repeat: no-repeat;
    background-size: 26px 100%, 26px 100%;
    background-position: left top, right top;
  }

  [data-mobile-scroll-affordance].is-scrollable.can-scroll-left.can-scroll-right {
    background-image:
      linear-gradient(to right, var(--scroll-fade-bg) 0%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(to left, var(--scroll-fade-bg) 0%, rgba(255, 255, 255, 0) 100%);
  }

  [data-mobile-scroll-affordance].is-scrollable.can-scroll-left:not(.can-scroll-right) {
    background-image:
      linear-gradient(to right, var(--scroll-fade-bg) 0%, rgba(255, 255, 255, 0) 100%),
      none;
  }

  [data-mobile-scroll-affordance].is-scrollable.can-scroll-right:not(.can-scroll-left) {
    background-image:
      none,
      linear-gradient(to left, var(--scroll-fade-bg) 0%, rgba(255, 255, 255, 0) 100%);
  }

  [data-mobile-scroll-affordance][data-scroll-surface="dark"].is-scrollable.can-scroll-left.can-scroll-right {
    background-image:
      linear-gradient(to right, var(--scroll-fade-bg) 0%, rgba(7, 31, 25, 0) 100%),
      linear-gradient(to left, var(--scroll-fade-bg) 0%, rgba(7, 31, 25, 0) 100%);
  }

  .mobile-scroll-track {
    position: relative;
    display: none;
    width: 100% !important;
    height: 3px !important;
    margin: 8px 0 0;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 999px;
    background: var(--scroll-track, rgba(0, 153, 99, 0.14));
    pointer-events: none;
  }

  [data-mobile-scroll-affordance].is-scrollable + .mobile-scroll-track {
    display: block;
  }

  .mobile-scroll-thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 100% !important;
    width: var(--scroll-thumb-width, 40px) !important;
    border-radius: inherit;
    background: var(--scroll-thumb, rgba(0, 153, 99, 0.82));
    transform: translateX(var(--scroll-thumb-x, 0px));
    will-change: transform;
  }

  [data-mobile-scroll-affordance].has-scroll-interaction + .mobile-scroll-track {
    opacity: 0.9;
  }

  [data-scroll-kind="code"].scroll-affordance-native + .mobile-scroll-track {
    display: none !important;
  }
}

@media (min-width: 981px) {
  .mobile-scroll-hint,
  .mobile-scroll-track {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-scroll-hint,
  .mobile-scroll-track {
    transition: none !important;
  }
}