.hwt-ct {
  --hwt-ct-text: var(--color-default-font, #ffe0fd);
  --hwt-ct-accent: var(--color-button-hover, #ffa5e7);
  --hwt-ct-duration: 6000ms;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: visible;
  color: var(--hwt-ct-text);
  background: transparent;
}
.hwt-ct__overflow {
  padding: 0 1.5rem;
}
.hwt-ct__spotlight {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: -35%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  opacity: 0.75;
  filter: blur(3.5rem);
  transform: translate3d(0, -50%, 0) rotate(-12deg);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--hwt-ct-accent) 44%, transparent) 0%,
    color-mix(in srgb, var(--hwt-ct-accent) 15%, transparent) 42%,
    transparent 72%
  );
  animation: hwt-ct-spotlight 22s ease-in-out infinite alternate;
}

.hwt-ct__viewport {
  position: relative;
  display: grid;
  min-height: 18rem;
}

.hwt-ct__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.hwt-ct__slide.is-active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.hwt-ct__stars {
  opacity: 0;
  transform: translate3d(4rem, 0, 0);
}

.hwt-ct__quote > p {
  opacity: 0;
  transform: translate3d(-4rem, 0, 0);
}

.hwt-ct__author {
  opacity: 0;
  transform: translate3d(4rem, 0, 0);
  font-weight: 300;
  text-align: left;
}

.hwt-ct__slide.is-active .hwt-ct__stars {
  animation: hwt-ct-in-right 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.hwt-ct__slide.is-active .hwt-ct__quote > p {
  animation: hwt-ct-in-left 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.12s;
}

.hwt-ct__slide.is-active .hwt-ct__author {
  animation: hwt-ct-in-right 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.24s;
}

.hwt-ct__stars {
  display: block;
  width: auto;
  height: 1.563rem !important;
  margin: 0 0 0rem 47%;
  object-fit: contain;
  object-position: left center;
}
.hwt-ct__author {
  margin-left: 47%;
}
.hwt-cs__content-inner {
  font-size: 1.125rem;
}

.hwt-ct__quote {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.hwt-ct__quote > p {
  margin: 1.5rem 0;
  color: var(--color-headline);
  font-family: "Lexend Deca", sans-serif;
  font-size: 3.3125rem;
  font-weight: 800;
  line-height: normal;
  text-align: left;
  text-shadow: var(--text-shadow-glow);
}

.hwt-ct__navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.hwt-ct__nav-button {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
}

.hwt-ct__nav-button:focus-visible {
  outline: 0.125rem solid var(--hwt-ct-accent);
  outline-offset: 0.125rem;
}

.hwt-ct__progress {
  position: relative;
  display: block;
  width: 3.125rem;
  height: 0.25rem;
  overflow: hidden;
  border-radius: 0.125rem;
  background: rgba(255, 255, 255, 0.4);
}

.hwt-ct__progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 0.125rem;
  background: var(--color-white, #fff);
}

.hwt-ct__nav-button.is-active .hwt-ct__progress-fill {
  animation: hwt-ct-progress var(--hwt-ct-duration) linear forwards;
}

@keyframes hwt-ct-in-left {
  from {
    opacity: 0;
    transform: translate3d(-4rem, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hwt-ct-in-right {
  from {
    opacity: 0;
    transform: translate3d(4rem, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hwt-ct-progress {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes hwt-ct-spotlight {
  from {
    left: -15%;
  }

  to {
    left: 60%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hwt-ct__spotlight,
  .hwt-ct__slide.is-active .hwt-ct__stars,
  .hwt-ct__slide.is-active .hwt-ct__quote > p,
  .hwt-ct__slide.is-active .hwt-ct__author,
  .hwt-ct__nav-button.is-active .hwt-ct__progress-fill {
    animation: none;
  }

  .hwt-ct__slide.is-active .hwt-ct__stars,
  .hwt-ct__slide.is-active .hwt-ct__quote > p,
  .hwt-ct__slide.is-active .hwt-ct__author {
    opacity: 1;
    transform: none;
  }

  .hwt-ct__nav-button.is-active .hwt-ct__progress-fill {
    width: 100%;
  }
}