.mq-container {
  width: 100%;
  overflow: hidden;
  padding: 14px 0;
  border-radius: 10px;
  /* 替换原来的 background: var(--primary) */
  background-color: var(--primary);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 2px,
      color-mix(in srgb, var(--theme) 3.5%, transparent) 2px,
      color-mix(in srgb, var(--theme) 3.5%, transparent) 3px
    ),
    radial-gradient(ellipse 50% 100% at 0% 50%,
      color-mix(in srgb, var(--theme) 9%, transparent), transparent 100%),
    radial-gradient(ellipse 50% 100% at 100% 50%,
      color-mix(in srgb, var(--theme) 9%, transparent), transparent 100%);

  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--theme) 22%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--theme) 8%, transparent),
    0 0 24px color-mix(in srgb, var(--theme) 6%, transparent);

  border: 1px solid color-mix(in srgb, var(--theme) 12%, transparent);
}
.mq-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  width: max-content;
  will-change: transform;
}
.mq-track img {
  flex-shrink: 0;
  height: 28px;
  display: block;
}
@keyframes mq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--mq-shift)); }
}