.stem-carousel { width:min(100%,430px); margin-top:32px; display:grid; gap:10px; }
.stem-marquee-row { overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 9%,#000 86%,transparent); }
.stem-marquee-track { display:flex; width:max-content; gap:10px; animation:stem-marquee 34s linear infinite; animation-play-state:paused; will-change:transform; }
.stem-marquee-row-2 .stem-marquee-track { animation-name:stem-marquee-reverse; animation-duration:38s; transform:translateX(calc(-50% - 5px)); }
.stem-marquee-track ul { display:flex; gap:10px; margin:0; padding:0; list-style:none; }
.stem-marquee-track li { display:flex; align-items:center; gap:9px; min-height:46px; padding:8px 14px 8px 10px; border:1px solid #393c38; border-radius:999px; background:#181a18; color:#c8cac5; font-size:12px; line-height:1; white-space:nowrap; }
.stem-marquee-track svg { width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.stem-carousel[data-in-view="true"][data-user-paused="false"] .stem-marquee-track { animation-play-state:running; }
.stem-carousel:is(:hover,:focus-within) .stem-marquee-track { animation-play-state:paused!important; }
@keyframes stem-marquee { to { transform:translateX(calc(-50% - 5px)); } }
@keyframes stem-marquee-reverse { to { transform:translateX(0); } }
@media(max-width:700px) {
  .stem-carousel { width:min(100%,360px); }
  .stem-marquee-track li { min-height:44px; padding:7px 13px 7px 9px; }
  .stem-marquee-track svg { width:22px; height:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .stem-marquee-track { animation:none!important; transform:none!important; }
  .stem-marquee-row { overflow:auto; mask-image:none; scrollbar-width:none; }
  .stem-marquee-row::-webkit-scrollbar { display:none; }
  .stem-marquee-track ul[aria-hidden="true"] { display:none; }
}