.klain-dots {
  --klain-dots-blue: #009ee3;
  --klain-dots-orange: #f38a2d;
  --klain-dots-sand: #e4ad58;
  --klain-dots-white: #ffffff;
  --klain-dots-size: clamp(28px, 12cqw, 62px);
  --klain-dots-gap: clamp(12px, 4cqw, 30px);

  width: 100%;
  max-width: 520px;
  min-width: 0;
  height: 62px;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: var(--klain-dots-gap);
  container-type: inline-size;
  overflow: visible;
  background: transparent;
  box-sizing: border-box;
}

.klain-dots,
.klain-dots * {
  box-sizing: border-box;
}

.klain-dots--align-left {
  justify-content: flex-start;
  margin-right: auto;
}

.klain-dots--align-center {
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}

.klain-dots--align-right {
  justify-content: flex-end;
  margin-left: auto;
}

.klain-dots__mark {
  position: relative;
  flex: 0 0 auto;
  width: var(--klain-dots-size);
  height: var(--klain-dots-size);
  transform-origin: center;
  will-change: transform;
}

.klain-dots__mark::before,
.klain-dots__mark::after {
  content: "";
  position: absolute;
  display: block;
}

.klain-dots__mark--one {
  border: 2px solid var(--klain-dots-blue);
  border-top-width: 1px;
  border-left-width: 1px;
  border-radius: 0 14px 0 0;
  background: var(--klain-dots-white);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
  animation: klain-dots-corner-pop 3.6s ease-in-out infinite;
}

.klain-dots__mark--one::before {
  width: 54%;
  height: 54%;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  background: var(--klain-dots-orange);
  animation: klain-dots-dot-bloom 1.8s ease-in-out infinite;
}

.klain-dots__mark--two {
  width: calc(var(--klain-dots-size) * 0.78);
  height: calc(var(--klain-dots-size) * 0.78);
  border-radius: 50%;
  background: var(--klain-dots-orange);
  animation: klain-dots-roll-dot 2.7s cubic-bezier(.65, 0, .35, 1) infinite;
}

.klain-dots__mark--three {
  border-radius: 0 14px 32px 0;
  background: var(--klain-dots-sand);
  animation: klain-dots-soft-squeeze 3.2s ease-in-out infinite;
}

.klain-dots__mark--three::before {
  width: 29%;
  height: 29%;
  top: 11%;
  left: 12%;
  border-radius: 50%;
  background: var(--klain-dots-white);
  animation: klain-dots-small-dot-sweep 3.2s ease-in-out infinite;
}

.klain-dots__mark--four {
  width: calc(var(--klain-dots-size) * 0.72);
  height: calc(var(--klain-dots-size) * 0.72);
  border: 3px solid var(--klain-dots-blue);
  border-radius: 50%;
  animation: klain-dots-ring-spin 2.8s ease-in-out infinite;
}

.klain-dots__mark--four::before {
  width: 51%;
  height: 51%;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  background: var(--klain-dots-blue);
  animation: klain-dots-ring-core 1.4s ease-in-out infinite;
}

.klain-dots--editor {
  min-height: 0;
  height: 0;
  overflow: hidden;
}

@keyframes klain-dots-corner-pop {
  0%, 100% {
    transform: translateY(0) scale(1);
    border-radius: 0 14px 0 0;
  }

  45% {
    transform: translateY(-5px) scale(1.04);
    border-radius: 0 18px 0 0;
  }
}

@keyframes klain-dots-dot-bloom {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.16);
  }
}

@keyframes klain-dots-roll-dot {
  0%, 100% {
    transform: translateX(0) rotate(0deg) scale(1);
  }

  35% {
    transform: translateX(7px) rotate(70deg) scale(1.08);
  }

  68% {
    transform: translateX(-5px) rotate(-40deg) scale(0.96);
  }
}

@keyframes klain-dots-soft-squeeze {
  0%, 100% {
    transform: translateY(0) scaleX(1);
    border-radius: 0 14px 32px 0;
  }

  50% {
    transform: translateY(5px) scaleX(0.94);
    border-radius: 0 24px 38px 0;
  }
}

@keyframes klain-dots-small-dot-sweep {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(7px, 5px) scale(0.82);
    opacity: 0.92;
  }
}

@keyframes klain-dots-ring-spin {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.08);
  }
}

@keyframes klain-dots-ring-core {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.72);
  }
}

@media (max-width: 767px) {
  .klain-dots {
    --klain-dots-size: clamp(24px, 18cqw, 48px);
    --klain-dots-gap: clamp(10px, 5cqw, 20px);

    max-width: 100%;
    min-width: 0;
    height: 62px;
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .klain-dots {
    --klain-dots-size: clamp(20px, 17cqw, 40px);
    --klain-dots-gap: clamp(8px, 4cqw, 14px);

    min-width: 0;
    height: 62px;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .klain-dots__mark,
  .klain-dots__mark::before {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}