.gradient-text {
  display: inline-block;
  color: #ce4e69;
  padding-inline: 0.025em;
  margin-inline: -0.025em;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    /* Four flowing color fields from the reference, without its white rectangle. */
    background-color: #ce4e69;
    background-image:
      radial-gradient(ellipse, #d94f70 0%, #d94f70 15%, transparent 62%),
      radial-gradient(ellipse, #de674f 0%, #de674f 18%, transparent 63%),
      radial-gradient(ellipse, #da6e49 0%, #da6e49 10%, transparent 55%),
      radial-gradient(ellipse, #ca4263 0%, #ca4263 25%, transparent 68%);
    background-size:
      85% 230%,
      90% 240%,
      75% 220%,
      100% 250%;
    background-position:
      -130% 0%,
      160% 65%,
      260% 40%,
      10% 50%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: launchColorFlow 18s ease-in-out infinite alternate;
  }
}
@keyframes launchColorFlow {
  0%,
  100% {
    background-position:
      -130% 0%,
      160% 65%,
      260% 40%,
      10% 50%;
  }
  40% {
    background-position:
      180% 60%,
      -70% 10%,
      20% 90%,
      70% 20%;
  }
  75% {
    background-position:
      20% 90%,
      70% 90%,
      -120% 5%,
      -40% 70%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-text {
    animation: none;
  }
}
@media (forced-colors: active) {
  .gradient-text {
    animation: none;
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}