theme-scrolling {
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  
  theme-scrolling[pause-on-hover]:hover .scrolling--animated,
  .scrolling--paused .scrolling--animated {
    animation-play-state: paused;
  }
  
  .scrolling {
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  
  .scrolling-track {
    padding-inline: calc(var(--item-gap, 48px) / 2);
    flex: 0 0 auto;
  }
  
  .scrolling--left .scrolling--animated {
    animation-name: scrolling-left;
  }
  
  html[dir="rtl"] .scrolling--left .scrolling--animated {
    animation-name: rtl-scrolling-left;
  }
  
  .scrolling--right .scrolling--animated {
    animation-name: scrolling-right;
  }
  
  html[dir="rtl"] .scrolling--right .scrolling--animated {
    animation-name: rtl-scrolling-right;
  }
  
  .scrolling--animated {
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: var(--duration, 5s);
    animation-play-state: running;
    width: max-content;
    will-change: transform, width;
  }
  
  @keyframes scrolling-left {
    0% {
      transform: translate3d(0, 0, 0);
      visibility: visible;
    }
    100% {
      transform: translate3d(-100%, 0, 0);
    }
  }
  
  @keyframes rtl-scrolling-left {
    0% {
      transform: translate3d(0, 0, 0);
      visibility: visible;
    }
    100% {
      transform: translate3d(100%, 0, 0);
    }
  }
  
  @keyframes scrolling-right {
    0% {
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes rtl-scrolling-right {
    0% {
      transform: translate3d(100%, 0, 0);
      visibility: visible;
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
  
  /* 减少动画偏好支持 */
  @media (prefers-reduced-motion: reduce) {
    .scrolling-track {
      will-change: auto;
    }
  }