.td-marquee-wrap {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: var(--td-lane-gap, 4px);
  background: var(--td-background, transparent);
  padding-top: var(--td-padding-top, 0);
  padding-bottom: var(--td-padding-bottom, 0);
  margin-top: var(--td-margin-top, 0);
  margin-bottom: var(--td-margin-bottom, 0);

  --td-color-1: #F3925A;
  --td-color-2: #F3925A;
  --td-font-family: inherit;
  --td-font-size-1: 1.85rem;
  --td-font-size-2: 1.85rem;
  --td-font-size-1-t: 1.55rem;
  --td-font-size-2-t: 1.55rem;
  --td-font-size-1-m: 1.35rem;
  --td-font-size-2-m: 1.35rem;
  --td-font-weight-1: 600;
  --td-font-weight-2: 600;
  --td-line-height: 1.5;
  --td-letter-spacing-1: .03em;
  --td-letter-spacing-2: .03em;
  --td-opacity-1: .95;
  --td-opacity-2: .95;
  --td-text-transform: uppercase;
  --td-seam: 1.2rem;
  --td-lane-gap: 4px;
  --td-lane-gap-t: 4px;
  --td-lane-gap-m: 4px;
  --td-fade-left: 7%;
  --td-fade-right: 7%;
  --td-motion-timing: linear;
  --td-background: transparent;
  --td-border-color: #DCE8F5;
  --td-border-width: 1px;
  --td-padding-top: 0;
  --td-padding-bottom: 0;
  --td-margin-top: 0;
  --td-margin-bottom: 0;
}

.td-marquee--border-top {
  border-top: var(--td-border-width, 1px) solid var(--td-border-color, #DCE8F5);
}

.td-marquee--border-bottom {
  border-bottom: var(--td-border-width, 1px) solid var(--td-border-color, #DCE8F5);
}

.td-marquee {
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

.td-marquee__inner {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  animation: td-marquee-left var(--td-duration, 50s) var(--td-motion-timing, linear) infinite;
}

.td-marquee--right .td-marquee__inner {
  animation-name: td-marquee-right;
}

.td-marquee__content {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-right: var(--td-seam);
  font-family: var(--td-font-family);
  line-height: var(--td-line-height);
  text-transform: var(--td-text-transform);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.td-marquee--line1 .td-marquee__content {
  color: var(--td-color-1);
  font-size: var(--td-font-size-1);
  font-weight: var(--td-font-weight-1);
  letter-spacing: var(--td-letter-spacing-1);
  opacity: var(--td-opacity-1);
}

.td-marquee--line2 .td-marquee__content {
  color: var(--td-color-2);
  font-size: var(--td-font-size-2);
  font-weight: var(--td-font-weight-2);
  letter-spacing: var(--td-letter-spacing-2);
  opacity: var(--td-opacity-2);
}

.td-marquee--pause-hover:hover .td-marquee__inner {
  animation-play-state: paused;
}

.td-marquee--fade-edges .td-marquee {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--td-fade-left, 7%),
    #000 calc(100% - var(--td-fade-right, 7%)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--td-fade-left, 7%),
    #000 calc(100% - var(--td-fade-right, 7%)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/*
 * Eight server-rendered copies provide a no-JS fallback (12.5%). When JS is
 * available it measures one real copy and supplies an exact pixel shift. This
 * keeps the loop seamless even if extra copies are added for very short text.
 */
@keyframes td-marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--td-shift-negative, -12.5%), 0, 0); }
}

@keyframes td-marquee-right {
  from { transform: translate3d(var(--td-shift-negative, -12.5%), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .td-marquee-wrap {
    gap: var(--td-lane-gap-t, var(--td-lane-gap, 4px));
  }

  .td-marquee--line1 .td-marquee__content {
    font-size: var(--td-font-size-1-t, var(--td-font-size-1));
  }

  .td-marquee--line2 .td-marquee__content {
    font-size: var(--td-font-size-2-t, var(--td-font-size-2));
  }

  .td-marquee--line1 .td-marquee__inner,
  .td-marquee--line2 .td-marquee__inner {
    animation-duration: var(--td-duration-t, var(--td-duration, 50s));
  }
}

@media (max-width: 767px) {
  .td-marquee-wrap {
    gap: var(--td-lane-gap-m, var(--td-lane-gap, 4px));
  }

  .td-marquee--line1 .td-marquee__content {
    font-size: var(--td-font-size-1-m);
  }

  .td-marquee--line2 .td-marquee__content {
    font-size: var(--td-font-size-2-m);
  }

  .td-marquee--line1 .td-marquee__inner,
  .td-marquee--line2 .td-marquee__inner {
    animation-duration: var(--td-duration-m, var(--td-duration, 50s));
  }

  .td-marquee--hide-line2-mobile .td-marquee--line2 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-marquee__inner {
    animation: none !important;
    transform: none !important;
    width: 100%;
  }

  .td-marquee__content[aria-hidden="true"] {
    display: none;
  }

  .td-marquee__content {
    white-space: normal;
    width: 100%;
    padding-right: 0;
  }
}

/* Accessible pause/resume control and automatic suspension states. */
.td-marquee-wrap {
  position: relative;
}

.td-marquee--paused .td-marquee__inner {
  animation-play-state: paused !important;
}

.td-marquee__pause {
  position: absolute;
  z-index: 3;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, Canvas 88%, transparent);
  color: CanvasText;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  opacity: .72;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .08);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.td-marquee__pause:hover,
.td-marquee__pause:focus-visible {
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}

.td-marquee__pause:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.td-marquee__pause-icon {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  pointer-events: none;
}

.td-marquee__pause-icon--play {
  display: none;
  padding-left: .08em;
}

.td-marquee__pause.is-paused .td-marquee__pause-icon--pause {
  display: none;
}

.td-marquee__pause.is-paused .td-marquee__pause-icon--play {
  display: block;
}

.td-marquee__pause[hidden] {
  display: none !important;
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  .td-marquee__pause {
    border-color: rgba(0, 0, 0, .18);
    background: rgba(255, 255, 255, .9);
    color: #111;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-marquee__pause {
    display: none !important;
  }
}
