/* ------------------------------
   Global theming via CSS variables
   ------------------------------ */
:root {
  --dc-size: 54px; /* Base size of loaders (can be changed from UI) */
  --dc-speed: 1s; /* Base animation speed */
  --dc-color: #ff4d6d; /* Primary color (pinkish, donut vibe) */
  --dc-bg: #0b0c10; /* Dark preview background */
  --dc-card: #111318; /* Card background */
  --dc-text: #e6e6e6; /* Text color */
  --dc-muted: #9aa0a6; /* Muted label color */
  --dc-radius: 14px; /* Card radius */
  --dc-gap: 14px; /* Grid gap */
  --dc-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Inter",
    sans-serif;
  color: var(--dc-text);
  background: conic-gradient(
    from 180deg at 0% 0%,
    #0b0c10,
    #0e1016 25%,
    #0b0c10 50%,
    #0e1016 75%,
    #0b0c10 100%
  );
  min-height: 100svh;
}

header {
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(8px);
  background: rgba(11, 12, 16, 0.7);
  border-bottom: 1px solid #1b1f2a;
}

.wrap {
  max-width: 95%;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 30px);
}
.subtitle {
  color: var(--dc-muted);
  margin-bottom: 14px;
}

/* Control panel */
.panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
  align-items: center;
  background: var(--dc-card);
  border: 1px solid #202532;
  border-radius: var(--dc-radius);
  padding: 12px 14px;
  box-shadow: var(--dc-shadow);
}
.panel label {
  font-size: 12px;
  color: var(--dc-muted);
  display: block;
  margin-bottom: 6px;
}
.panel input[type="range"],
.panel input[type="color"],
.panel select {
  width: 100%;
  background: #0f1218;
  color: var(--dc-text);
  border: 1px solid #2a2f3d;
  border-radius: 10px;
  padding: 6px 8px;
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--dc-gap);
  padding: 18px 20px 50px;
}

.card {
  background: var(--dc-card);
  border: 1px solid #1f2431;
  border-radius: var(--dc-radius);
  padding: 16px;
  box-shadow: var(--dc-shadow);
  display: grid;
  gap: 12px;
  grid-template-rows: auto 1fr auto;
}

.stage {
  background: #0c0f15;
  border: 1px dashed #263047;
  border-radius: 12px;
  height: 170px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.label {
  font-size: 13px;
  color: var(--dc-muted);
}
.copy {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.copy button {
  appearance: none;
  border: 1px solid #2b3142;
  background: #121724;
  color: var(--dc-text);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

/* Utility for ring borders */
.ring {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  border: calc(var(--dc-size) / 10) solid transparent;
  border-top-color: var(--dc-color);
}

/* 1) Classic spinner (border-top rotates) */
.l1 {
  animation: spin var(--dc-speed) linear infinite;
}

/* 2) Dual ring (two borders opposite) */
.l2 {
  --size: 80px;
  --color: var(--dc-color);
  --speed: var(--dc-speed);

  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}

.l2:before,
.l2:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: calc(var(--size) / 12) solid transparent;
  box-sizing: border-box;
}

.l2:before {
  border-top-color: var(--color);
  animation: spin calc(var(--speed) * 1.1) linear infinite;
}

.l2:after {
  border-bottom-color: var(--color);
  animation: spinReverse calc(var(--speed) * 1.1) linear infinite;
}

/* 3) Dots bounce (3 dots scale) */
.l3 {
  display: flex;
  gap: calc(var(--dc-size) / 8);
}
.l3 i {
  width: calc(var(--dc-size) / 6);
  height: calc(var(--dc-size) / 6);
  background: var(--dc-color);
  border-radius: 50%;
  display: block;
  animation: bounce var(--dc-speed) ease-in-out infinite;
}
.l3 i:nth-child(2) {
  animation-delay: 0.15s;
}
.l3 i:nth-child(3) {
  animation-delay: 0.3s;
}

/* 4) Pulse ring (ripple out) */
.l4 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l4:before,
.l4:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--dc-color);
  border-radius: 50%;
  animation: pulse calc(var(--dc-speed) * 2) ease-out infinite;
}
.l4:after {
  animation-delay: calc(var(--dc-speed) / 2);
}

/* 5) Bar progress (indeterminate sweeping bar) */
/* 5) Bar progress (indeterminate sweeping bar) */
.l5 {
  position: relative;
  width: calc(var(--dc-size) * 1.8);
  height: 8px;
  background: #151a26;
  border-radius: 100px;
  overflow: hidden;
}
.l5:before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--dc-color), transparent);
  animation: slideX calc(var(--dc-speed) * 1.8) ease-in-out infinite;
}

/* 6) Ripple dots circle */
.l6 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l6 i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px dotted var(--dc-color);
  animation: spin var(--dc-speed) linear infinite;
}
.l6 i:nth-child(2) {
  inset: 6px;
  opacity: 0.6;
  animation-duration: calc(var(--dc-speed) * 1.3);
}
.l6 i:nth-child(3) {
  inset: 12px;
  opacity: 0.3;
  animation-duration: calc(var(--dc-speed) * 1.6);
}

/* 7) Rotating square */
.l7 {
  width: var(--dc-size);
  height: var(--dc-size);
  border: 4px solid var(--dc-color);
  animation: tilt var(--dc-speed) ease-in-out infinite;
}

/* 8) Cube flip (3D) */
.l8 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  transform-style: preserve-3d;
  animation: flip3d calc(var(--dc-speed) * 1.5) infinite ease-in-out;
}

/* 9) Folding cube (4 squares folding) */
.l9 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l9 i {
  position: absolute;
  width: 48%;
  height: 48%;
  background: var(--dc-color);
  transform-origin: 100% 100%;
  animation: fold calc(var(--dc-speed) * 2) infinite linear;
}
.l9 i:nth-child(1) {
  left: 0;
  top: 0;
}
.l9 i:nth-child(2) {
  right: 0;
  top: 0;
  animation-delay: 0.15s;
}
.l9 i:nth-child(3) {
  left: 0;
  bottom: 0;
  animation-delay: 0.3s;
}
.l9 i:nth-child(4) {
  right: 0;
  bottom: 0;
  animation-delay: 0.45s;
}

/* 10) Chasing dots */
.l10 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l10 i {
  position: absolute;
  width: 20%;
  height: 20%;
  background: var(--dc-color);
  border-radius: 50%;
  top: 40%;
  left: 0;
  animation: chase var(--dc-speed) linear infinite;
}
.l10 i:nth-child(2) {
  animation-delay: calc(var(--dc-speed) / 4);
}
.l10 i:nth-child(3) {
  animation-delay: calc(var(--dc-speed) / 2);
}

/* 11) Wave (bars up/down) */
.l11 {
  display: flex;
  align-items: end;
  gap: 6px;
  height: calc(var(--dc-size) / 1.3);
}
.l11 i {
  width: 6px;
  height: 30%;
  background: var(--dc-color);
  animation: wave var(--dc-speed) ease-in-out infinite;
}
.l11 i:nth-child(2) {
  animation-delay: 0.1s;
}
.l11 i:nth-child(3) {
  animation-delay: 0.2s;
}
.l11 i:nth-child(4) {
  animation-delay: 0.3s;
}
.l11 i:nth-child(5) {
  animation-delay: 0.4s;
}

/* 12) Heartbeat */
.l12 {
  width: var(--dc-size);
  height: calc(var(--dc-size) * 0.8);
  background: linear-gradient(
    90deg,
    transparent 0 20%,
    var(--dc-color) 33% 67%,
    transparent 80% 100%
  );
  clip-path: polygon(
    0 60%,
    20% 60%,
    30% 30%,
    40% 80%,
    50% 20%,
    60% 80%,
    70% 30%,
    80% 60%,
    100% 60%,
    100% 100%,
    0 100%
  );
  animation: slideX calc(var(--dc-speed) * 1.6) ease-in-out infinite;
}

/* 13) Hourglass */
.l13 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
  border: 3px solid var(--dc-color);
  border-radius: 10px;
  clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%, 40% 50%);
  animation: spin calc(var(--dc-speed) * 1.5) linear infinite;
}

/* 14) Comet orbit */
.l14 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l14:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.08);
}
.l14 i {
  position: absolute;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: var(--dc-color);
  top: 50%;
  left: 50%;
  transform-origin: -120% -120%;
  animation: spin calc(var(--dc-speed) * 1.2) linear infinite;
}

/* 15) Dashed ring */
.l15 {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  border: 6px dashed var(--dc-color);
  animation: spin var(--dc-speed) linear infinite;
}

/* 16) Gradient sweep (conic) */
.l16 {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: conic-gradient(var(--dc-color), transparent);
  animation: spin calc(var(--dc-speed) * 0.9) linear infinite;
  mask: radial-gradient(circle at center, transparent 52%, black 53%);
}

/* 17) Flip card */
.l17 {
  width: calc(var(--dc-size) * 0.9);
  height: calc(var(--dc-size) * 0.9);
  background: var(--dc-color);
  animation: flipY calc(var(--dc-speed) * 1.1) ease-in-out infinite;
  border-radius: 8px;
}

/* 18) Zigzag */
.l18 {
  width: calc(var(--dc-size) * 1.6);
  height: calc(var(--dc-size) * 0.8);
  background: repeating-linear-gradient(
    135deg,
    var(--dc-color) 0 12px,
    transparent 12px 24px
  );
  animation: slideX calc(var(--dc-speed) * 1.3) linear infinite;
}

/* 19) Snake (border marching ants) */
.l19 {
  width: var(--dc-size);
  height: var(--dc-size);
  border: 4px dashed var(--dc-color);
  border-radius: 10px;
  animation: dash calc(var(--dc-speed) * 1.2) linear infinite;
}

/* 20) Atom (electron orbits) */
.l20 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l20 i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  transform: rotate(0deg) skewY(20deg);
}
.l20 i:nth-child(2) {
  transform: rotate(60deg) skewY(20deg);
}
.l20 i:nth-child(3) {
  transform: rotate(120deg) skewY(20deg);
}
.l20 b {
  position: absolute;
  width: 18%;
  height: 18%;
  background: var(--dc-color);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform-origin: -130% -130%;
  animation: spin calc(var(--dc-speed) * 1.2) linear infinite;
}

/* 21) Star spin */
.l21 {
  --size: 80px;
  --color: var(--dc-color);
  --speed: 2s;

  position: relative;
  width: var(--size);
  height: var(--size);
  background: var(--color);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  animation: spin var(--speed) linear infinite;
}

/* 22) Gear illusion */
.l22 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px var(--dc-color);
}
.l22:before {
  content: "";
  position: absolute;
  inset: -8px;
  background: conic-gradient(
    from 0deg,
    transparent 0 10deg,
    var(--dc-color) 10deg 20deg,
    transparent 20deg 30deg,
    var(--dc-color) 30deg 40deg,
    transparent 40deg 50deg,
    var(--dc-color) 50deg 60deg,
    transparent 60deg 70deg,
    var(--dc-color) 70deg 80deg,
    transparent 80deg 90deg,
    var(--dc-color) 90deg 100deg,
    transparent 100deg 110deg,
    var(--dc-color) 110deg 120deg,
    transparent 120deg 360deg
  );
  border-radius: 50%;
  animation: spinR calc(var(--dc-speed) * 1.4) linear infinite;
  mask: radial-gradient(circle at center, black 46%, transparent 47%);
}

/* 23) Triangle spin */
.l23 {
  width: 0;
  height: 0;
  border-left: calc(var(--dc-size) / 2) solid transparent;
  border-right: calc(var(--dc-size) / 2) solid transparent;
  border-bottom: var(--dc-size) solid var(--dc-color);
  animation: spin calc(var(--dc-speed) * 1.2) linear infinite;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
}

/* 24) Hexagon ring */
.l24 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: conic-gradient(
    var(--dc-color) 0 60deg,
    transparent 60deg 120deg,
    var(--dc-color) 120deg 180deg,
    transparent 180deg 240deg,
    var(--dc-color) 240deg 300deg,
    transparent 300deg 360deg
  );
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  animation: spin var(--dc-speed) linear infinite;
}

/* 25) Infinity loop */
.l25 {
  position: relative;
  width: calc(var(--dc-size) * 1.8);
  height: calc(var(--dc-size) * 0.9);
}
.l25:before,
.l25:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  border: 6px solid var(--dc-color);
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}
.l25:before {
  left: 0;
  transform: rotate(45deg);
  animation: spin var(--dc-speed) linear infinite;
  transform-origin: 60% 50%;
}
.l25:after {
  right: 0;
  transform: rotate(-45deg);
  animation: spinR var(--dc-speed) linear infinite;
  transform-origin: 40% 50%;
}

/* 26) Book pages flip */
.l26 {
  position: relative;
  width: calc(var(--dc-size) * 1.2);
  height: calc(var(--dc-size) * 0.9);
  background: var(--dc-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #263047;
}
.l26 i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--dc-color), transparent);
  transform: translateX(-100%);
  animation: slideX calc(var(--dc-speed) * 1.2) infinite ease-in-out;
}

/* 27) Typing dots (elastic) */
.l27 {
  display: flex;
  gap: 8px;
}
.l27 i {
  width: calc(var(--dc-size) - 30px);
  height: calc(var(--dc-size) - 30px);
  border-radius: 50%;
  background: var(--dc-color);
  animation: bounce2 calc(var(--dc-speed) * 0.9) ease-in-out infinite;
}
.l27 i:nth-child(2) {
  animation-delay: 0.12s;
}
.l27 i:nth-child(3) {
  animation-delay: 0.24s;
}

/* 28) Shimmer skeleton */
.l28 {
  width: calc(var(--dc-size) * 1.8);
  height: calc(var(--dc-size) * 0.9);
  border-radius: 10px;
  background: linear-gradient(90deg, #1a1f2b, #22293a, #1a1f2b);
  background-size: 200% 100%;
  animation: shimmer calc(var(--dc-speed) * 2) infinite;
}

/* 29) Circular conic fill */
.l29 {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: conic-gradient(var(--dc-color) 0 15%, #202636 15% 100%);
  animation: sweep calc(var(--dc-speed) * 2) linear infinite;
}

/* 30) Multi-ring spinner */
.l30 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l30 i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: var(--dc-color);
  animation: spin linear infinite;
}
.l30 i:nth-child(1) {
  animation-duration: calc(var(--dc-speed) * 0.8);
}
.l30 i:nth-child(2) {
  inset: 8px;
  opacity: 0.7;
  animation-duration: calc(var(--dc-speed) * 1.2);
}
.l30 i:nth-child(3) {
  inset: 16px;
  opacity: 0.4;
  animation-duration: calc(var(--dc-speed) * 1.6);
}

.l31 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--dc-size) / 2);
}

/* 31) Pulse Grid */
.l31 i {
  display: block;
  width: max(calc(var(--dc-size) - 10px), 1px);
  height: max(calc(var(--dc-size) - 10px), 1px);
  background-color: var(--dc-color);
  border-radius: 50%;
  animation: pulse var(--dc-speed) infinite ease-in-out;
}

.l31 i:nth-child(1) {
  animation-delay: 0s;
}
.l31 i:nth-child(2) {
  animation-delay: calc(var(--dc-speed) * 0.125);
}
.l31 i:nth-child(3) {
  animation-delay: calc(var(--dc-speed) * 0.25);
}
.l31 i:nth-child(4) {
  animation-delay: calc(var(--dc-speed) * 0.375);
}
.l31 i:nth-child(5) {
  animation-delay: calc(var(--dc-speed) * 0.5);
}
.l31 i:nth-child(6) {
  animation-delay: calc(var(--dc-speed) * 0.625);
}
.l31 i:nth-child(7) {
  animation-delay: calc(var(--dc-speed) * 0.75);
}
.l31 i:nth-child(8) {
  animation-delay: calc(var(--dc-speed) * 0.875);
}

/* 32) Liquid Blob */
.l32 {
  width: calc(var(--dc-size));
  height: calc(var(--dc-size));
  background: var(--dc-color);
  border-radius: 50%;
  animation: blob var(--dc-speed) ease-in-out infinite;
}

/* 33) Meteor Shower */
.l33 i {
  width: calc(var(--dc-size) - 30px);
  height: calc(var(--dc-size) - 30px);
  background: var(--dc-color);
  display: inline-block;
  margin: 0 3px;
  border-radius: 50%;
  animation: meteor var(--dc-speed) linear infinite;
}
.l33 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l33 i:nth-child(3) {
  animation-delay: 0.4s;
}

/* 34) Rotating Triangles */
.l34 {
  --size: var(--dc-size, 20px);
  --color: var(--dc-color, #e67e22);
  --speed: var(--dc-speed, 2s);

  position: relative;
  width: calc(var(--size) - 300px);
  height: calc(var(--size) - 300px);
  animation: spin var(--speed) linear infinite;
}

.l34 i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: calc(var(--size) / 2) solid transparent;
  border-right: calc(var(--size) / 2) solid transparent;
  border-bottom: var(--size) solid var(--color);
}

.l34 i:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg)
    translateY(calc(-1.5 * var(--size)));
}
.l34 i:nth-child(2) {
  transform: translate(-50%, -50%) rotate(120deg)
    translateY(calc(-1.5 * var(--size)));
}
.l34 i:nth-child(3) {
  transform: translate(-50%, -50%) rotate(240deg)
    translateY(calc(-1.5 * var(--size)));
}

/* 35) Spiral Dots */
.l35 i {
  width: calc(var(--dc-size) - 45px);
  height: calc(var(--dc-size) - 45px);
  background: var(--dc-color);
  display: inline-block;
  border-radius: 50%;
  margin: 2px;
  animation: spiralDots var(--dc-speed) ease-in-out infinite;
}
.l35 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l35 i:nth-child(3) {
  animation-delay: 0.4s;
}
.l35 i:nth-child(4) {
  animation-delay: 0.6s;
}

.l36 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
  border: 3px solid var(--dc-color);
  border-radius: 50%;
  background: transparent;
}

.l36 i {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  width: 3px;
  background: #3e7ab6;
  border-radius: 2px;
}

.l36 i:first-child {
  height: 35%;
  animation: hand1 var(--dc-speed) linear infinite;
}

.l36 i:last-child {
  height: 45%;
  animation: hand2 60s linear infinite;
  background: var(--dc-color);
}

/* 37) Neon Pulse */
.l37 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  border-radius: 50%;
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
  animation: neon var(--dc-speed) ease-in-out infinite;
}

/* 38) Sphere Spin */
.l38 {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  border: 4px solid var(--dc-color);
  border-top-color: transparent;
  border-right-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  animation: spin 1.5s linear infinite;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
  perspective: 200px;
}

/* 39) Particle Ring */
.l39 i {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  display: inline-block;
  border-radius: 50%;
  animation: particle var(--dc-speed) ease-in-out infinite;
}
.l39 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l39 i:nth-child(3) {
  animation-delay: 0.4s;
}
.l39 i:nth-child(4) {
  animation-delay: 0.6s;
}
.l39 i:nth-child(5) {
  animation-delay: 0.8s;
}

/* 40) Jelly Bounce */
.l40 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  border-radius: 30%;
  animation: jelly var(--dc-speed) ease-in-out infinite;
}

/* 41) Flame Flicker */
.l41 {
  width: calc(var(--dc-size));
  height: calc(var(--dc-size) + 10px);
  background: linear-gradient(#f39c12, var(--dc-color));
  border-radius: 50% 50% 50% 0;
  animation: flicker var(--dc-speed) infinite;
}

/* 42) Wi-Fi Signal */
.l42 i {
  display: block;
  width: var(--dc-size);
  height: var(--dc-size);
  border: 3px solid var(--dc-color);
  border-radius: 50%;
  margin: 5px auto;
  animation: wifi var(--dc-speed) ease-out infinite;
}
.l42 i:nth-child(2) {
  animation-delay: 0.3s;
}
.l42 i:nth-child(3) {
  animation-delay: 0.6s;
}

/* 43) Sync Bars */
.l43 i {
  width: var(--dc-size);
  height: calc(var(--dc-size) - 5px);
  background: var(--dc-color);
  display: inline-block;
  margin: 2px;
  animation: bars var(--dc-speed) ease-in-out infinite;
}
.l43 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l43 i:nth-child(3) {
  animation-delay: 0.4s;
}
.l43 i:nth-child(4) {
  animation-delay: 0.6s;
}

/* 44) Pixel Grid */
.l44 i {
  width: calc(var(--dc-size) - 30px);
  height: calc(var(--dc-size) - 30px);
  background: var(--dc-color);
  display: inline-block;
  margin: 1px;
  animation: pixel var(--dc-speed) infinite alternate;
}
.l44 i:nth-child(even) {
  animation-delay: 0.3s;
}

/* 45) Pulse Dots */
.l45 i {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: var(--dc-color);
  display: inline-block;
  margin: 3px;
  animation: pulseDots var(--dc-speed) ease-in-out infinite;
}
.l45 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l45 i:nth-child(3) {
  animation-delay: 0.4s;
}

/* 46) DNA Helix */
.l46 i {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: var(--dc-color);
  display: inline-block;
  animation: dna var(--dc-speed) linear infinite;
}
.l46 i:nth-child(2) {
  animation-delay: 0.3s;
}
.l46 i:nth-child(3) {
  animation-delay: 0.6s;
}
.l46 i:nth-child(4) {
  animation-delay: 0.9s;
}

/* 47) Compass Spin */
.l47 {
  width: var(--dc-size, 60px);
  height: var(--dc-size, 60px);
  border: 3px solid var(--dc-color, #3498db);
  border-radius: 50%;
  border-top-color: transparent;
  border-right-color: rgba(0, 0, 0, 0.1);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  animation: spin var(--dc-speed, 1s) linear infinite;
  box-shadow: 0 0 8px var(--dc-color, #3498db);
}

/* 48) Rising Bubbles */
.l48 i {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: var(--dc-color);
  display: inline-block;
  margin: 2px;
  animation: bubble var(--dc-speed) ease-in-out infinite;
}
.l48 i:nth-child(2) {
  animation-delay: 0.3s;
}
.l48 i:nth-child(3) {
  animation-delay: 0.6s;
}

/* 49) 3D Rotating Rings */
.l49 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
  transform-style: preserve-3d;
  animation: rotateScene var(--dc-speed) linear infinite;
}

.l49 i {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: var(--dc-size);
  height: var(--dc-size);
  border: 4px solid transparent;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

.l49 i:nth-child(1) {
  border-top-color: #f39c12;
  animation-duration: 2s;
  transform: rotateX(0deg);
}
.l49 i:nth-child(2) {
  border-right-color: var(--dc-color);
  animation-duration: 3s;
  transform: rotateY(60deg);
}
.l49 i:nth-child(3) {
  border-left-color: #3498db;
  animation-duration: 4s;
  transform: rotateZ(120deg);
}

/* 50) Aurora Wave */
.l50 {
  width: calc(var(--dc-size) + 30px);
  height: calc(var(--dc-size) - 20px);
  background: linear-gradient(90deg, #3498db, #9b59b6, var(--dc-color));
  background-size: 200% 100%;
  animation: aurora var(--dc-speed) linear infinite;
}

/* 51) Pyramid Spin */
.l51 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: conic-gradient(var(--dc-color), #feca57);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: pyramidSpin var(--dc-speed) linear infinite;
  margin: auto;
}

/* 52) Tornado */
.l52 {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: var(--dc-color);
  border-bottom-color: #ff9f43;
  animation: tornadoSpin var(--dc-speed) linear infinite;
  margin: auto;
}

/* 53) Infinite Steps */
.l53 {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.l53 i {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  animation: infiniteSteps var(--dc-speed) infinite;
}
.l53 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l53 i:nth-child(3) {
  animation-delay: 0.4s;
}

/* 54) Pulse Circle */
.l54 {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: var(--dc-color);
  animation: pulseCircle var(--dc-speed) ease-in-out infinite;
  margin: auto;
}

/* 55) Glowing Pulse Rings */
.l55 {
  position: relative;
  width: var(--dc-size, 60px);
  height: var(--dc-size, 60px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.l55 i {
  position: absolute;
  inset: 0;
  border: 3px solid var(--dc-color, #00ffea);
  border-radius: 50%;
  animation: glowingPulse 1.5s infinite ease-in-out;
  box-shadow: 0 0 15px var(--dc-color, #00ffea),
    0 0 30px var(--dc-color, #00ffea);
  opacity: 0.6;
}

.l55 i:nth-child(2) {
  animation-delay: 0.75s;
}

/* 56) Loading Arrow */
.l56 {
  width: var(--dc-size);
  height: var(--dc-size);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  background: var(--dc-color);
  animation: loadingArrow var(--dc-speed) infinite linear;
  margin: auto;
}

/* 57) Yin Yang Loader */
.l57 {
  --size: var(--dc-size, 80px);
  --color: var(--dc-color, #2ecc71);
  --speed: var(--dc-speed, 1.2s);

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--color) 0 180deg, transparent 180deg 360deg);
  position: relative;
  animation: spin var(--speed) linear infinite;
  margin: auto;
}
.l57::before,
.l57::after {
  content: "";
  position: absolute;
  top: 25%;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background: var(--color);
}
.l57::before {
  left: 25%;
}
.l57::after {
  right: 25%;
  background: white;
}

/* 58) Fire Dots */
.l58 {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.l58 i {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: var(--dc-color);
  animation: fireDots var(--dc-speed) infinite;
}
.l58 i:nth-child(2) {
  animation-delay: 0.2s;
  background: var(--dc-color);
}
.l58 i:nth-child(3) {
  animation-delay: 0.4s;
  background: var(--dc-color);
}

/* 59) Line Grow */
.l59 {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.l59 i {
  width: calc(var(--dc-size) - 15px);
  height: calc(var(--dc-size) - 15px);
  background: var(--dc-color);
  animation: lineGrow var(--dc-speed) infinite;
}
.l59 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l59 i:nth-child(3) {
  animation-delay: 0.4s;
}

/* 60) Clock Spin */
.l60 {
  width: var(--dc-size);
  height: var(--dc-size);
  border: 4px solid var(--dc-color);
  border-radius: 50%;
  position: relative;
}
.l60::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 3px;
  height: 15px;
  background: var(--dc-color);
  transform-origin: bottom center;
  animation: clockSpin var(--dc-speed) linear infinite;
}

.l61 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  animation: hexPulse var(--dc-speed) infinite;
  margin: auto;
}

/* 62) DNA Helix */
.l62 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size - 20px);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.l62 i {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: var(--dc-color);
  animation: dnaHelix var(--dc-speed) infinite ease-in-out;
}

.l62 i:nth-child(2) {
  animation-delay: 0.2s;
  background: var(--dc-color);
}

.l62 i:nth-child(3) {
  animation-delay: 0.4s;
  background: var(--dc-color);
}

/* 63) Square Jump */
.l63 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  animation: squareJump var(--dc-speed) infinite;
  margin: auto;
}

/* 64) Orbiting Ripples */
.l64 {
  position: relative;
  width: var(--dc-size, 80px);
  height: var(--dc-size, 80px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.l64 i {
  position: absolute;
  inset: 0;
  border: 3px solid var(--dc-color, #ff6f61);
  border-radius: 50%;
  animation: orbitRipple var(--dc-speed, 1.5s) infinite ease-in-out;
  opacity: 0.6;
  box-shadow: 0 0 10px var(--dc-color, #ff6f61),
    0 0 20px var(--dc-color, #ff6f61);
}

.l64 i:nth-child(2) {
  animation-delay: 0.5s;
}

.l64 i:nth-child(3) {
  animation-delay: 1s;
}

/* 65) Spiral Loader */
.l65 {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  border: 4px dotted var(--dc-color);
  animation: spiralLoader var(--dc-speed) linear infinite;
  margin: auto;
}

/* 66) Snake Dots */
.l66 {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.l66 i {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: var(--dc-color);
  animation: snakeDots var(--dc-speed) infinite;
}
.l66 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l66 i:nth-child(3) {
  animation-delay: 0.4s;
}
.l66 i:nth-child(4) {
  animation-delay: 0.6s;
}

/* 67) Zoom Square */
.l67 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  animation: zoomSquare var(--dc-speed) infinite;
  margin: auto;
}

/* 68) Meteor Shower */
.l68 {
  position: relative;
  width: 40px;
  height: 40px;
}
.l68 i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dc-color);
  animation: meteorShower var(--dc-speed) infinite;
}
.l68 i:nth-child(2) {
  animation-delay: 0.3s;
}
.l68 i:nth-child(3) {
  animation-delay: 0.6s;
}

/* 69) Pulse Bars */
.l69 {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.l69 i {
  width: calc(var(--dc-size) - 25px);
  height: var(--dc-size);
  background: var(--dc-color);
  animation: pulseBars var(--dc-speed) infinite;
}
.l69 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l69 i:nth-child(3) {
  animation-delay: 0.4s;
}

/* 70) Rotating Diamond */
.l70 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  transform: rotate(45deg);
  animation: rotatingDiamond var(--dc-speed) linear infinite;
  margin: auto;
}

/* 71) Neon Circle Sweep */
.l71 {
  width: var(--dc-size, 60px);
  height: var(--dc-size, 60px);
  border: 4px solid transparent;
  border-top: 4px solid var(--dc-color, #00ffea);
  border-radius: 50%;
  animation: neonSweep var(--dc-speed, 1s) linear infinite;
  margin: auto;
  box-shadow: 0 0 8px var(--dc-color, #00ffea),
    0 0 20px var(--dc-color, #00ffea);
  position: relative;
}

/* Optional: small inner glow ring */
.l71::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--dc-color, #00ffea);
  border-radius: 50%;
  opacity: 0.3;
}

/* 72) Bouncing Triangles */
.l72 {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.l72 i {
  width: 0;
  height: 0;
  border-left: calc(var(--dc-size) - 10px) solid transparent;
  border-right: calc(var(--dc-size) - 10px) solid transparent;
  border-bottom: calc(var(--dc-size) + 15px) solid var(--dc-color);
  animation: bounceTriangles var(--dc-speed) infinite;
}
.l72 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l72 i:nth-child(3) {
  animation-delay: 0.4s;
}

/* 73) Orbiting Glow Dots */
.l73 {
  position: relative;
  width: var(--dc-size, 60px);
  height: var(--dc-size, 60px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.l73 i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dc-color, #ff6f61);
  transform-origin: -20px;
  animation: orbitDots var(--dc-speed, 1.2s) linear infinite;
  box-shadow: 0 0 8px var(--dc-color, #ff6f61),
    0 0 16px var(--dc-color, #ff6f61);
}

/* Different orbit positions for each dot */
.l73 i:nth-child(2) {
  transform-origin: 20px;
  animation-delay: 0.4s;
}

.l73 i:nth-child(3) {
  transform-origin: 0 -20px;
  animation-delay: 0.8s;
}

/* 74) Rotating Bars */
.l74 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l74 i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 16px;
  background: var(--dc-color);
  transform-origin: center -10px;
  animation: rotatingBars var(--dc-speed) linear infinite;
}
.l74 i:nth-child(2) {
  transform: rotate(90deg);
  animation-delay: 0.25s;
}
.l74 i:nth-child(3) {
  transform: rotate(180deg);
  animation-delay: 0.5s;
}
.l74 i:nth-child(4) {
  transform: rotate(270deg);
  animation-delay: 0.75s;
}

/* 75) Orbit Rings */
.l75 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l75 i {
  position: absolute;
  border: 2px solid var(--dc-color);
  border-radius: 50%;
  animation: orbitRings var(--dc-speed) linear infinite;
}
.l75 i:nth-child(1) {
  inset: 0;
}
.l75 i:nth-child(2) {
  inset: 5px;
  animation-delay: 0.3s;
}
.l75 i:nth-child(3) {
  inset: 10px;
  animation-delay: 0.6s;
}

/* 76) Wave Loader */
.l76 {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.l76 i {
  width: calc(var(--dc-size) - 10px);
  height: var(--dc-size);
  background: var(--dc-color);
  animation: waveLoader var(--dc-speed) infinite;
}
.l76 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l76 i:nth-child(3) {
  animation-delay: 0.4s;
}
.l76 i:nth-child(4) {
  animation-delay: 0.6s;
}

/* 77) Pulse Ring */
.l77 {
  width: var(--dc-size);
  height: var(--dc-size);
  border: 4px solid var(--dc-color);
  border-radius: 50%;
  animation: pulseRing var(--dc-speed) infinite;
  margin: auto;
}

/* 78) Flip Square */
.l78 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  animation: flipSquare var(--dc-speed) infinite;
  margin: auto;
}

/* 79) Growing Bars */
.l79 {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.l79 i {
  width: calc(var(--dc-size) - 4px);
  height: var(--dc-size);
  background: var(--dc-color);
  animation: growingBars var(--dc-speed) infinite;
}
.l79 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l79 i:nth-child(3) {
  animation-delay: 0.4s;
}

/* 80) Rotating Cross */
.l80 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: linear-gradient(var(--dc-color), #48dbfb);
  clip-path: polygon(
    40% 0,
    60% 0,
    60% 40%,
    100% 40%,
    100% 60%,
    60% 60%,
    60% 100%,
    40% 100%,
    40% 60%,
    0 60%,
    0 40%,
    40% 40%
  );
  animation: rotatingCross var(--dc-speed) linear infinite;
  margin: auto;
}

/* 81) Double Bounce */
.l81 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l81 i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dc-color);
  opacity: 0.6;
  animation: doubleBounce var(--dc-speed) infinite;
}
.l81 i:nth-child(2) {
  animation-delay: -1s;
}

/* 82)  Cube Pulse */
.l82 i {
  display: block;
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  border-radius: 4px;
  animation: pulse var(--dc-speed) infinite ease-in-out;
}

/* Animate cubes with delay */
.l82 i:nth-child(1) {
  animation-delay: 0s;
}
.l82 i:nth-child(2) {
  animation-delay: 0.1s;
}
.l82 i:nth-child(3) {
  animation-delay: 0.2s;
}
.l82 i:nth-child(4) {
  animation-delay: 0.3s;
}
.l82 i:nth-child(5) {
  animation-delay: 0.4s;
}
.l82 i:nth-child(6) {
  animation-delay: 0.5s;
}
.l82 i:nth-child(7) {
  animation-delay: 0.6s;
}
.l82 i:nth-child(8) {
  animation-delay: 0.7s;
}

/* 83) Ripple Circle */
.l83 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l83 i {
  position: absolute;
  inset: 0;
  border: 3px solid var(--dc-color);
  border-radius: 50%;
  animation: rippleCircle var(--dc-speed) infinite;
}
.l83 i:nth-child(2) {
  animation-delay: 0.5s;
}

/* 84) Zigzag Dots */
.l84 {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.l84 i {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: var(--dc-color);
  animation: zigzagDots var(--dc-speed) infinite;
}
.l84 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l84 i:nth-child(3) {
  animation-delay: 0.4s;
}

/* 85) Rolling Square */
.l85 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  animation: rollingSquare var(--dc-speed) infinite;
  margin: auto;
}

/* 86) Wave Circle */
.l86 {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  border: 4px solid var(--dc-color);
  border-top-color: transparent;
  animation: waveCircle var(--dc-speed) linear infinite;
  margin: auto;
}

/* 87) Electric Spark Loader */
.l87 {
  position: relative;
  width: var(--dc-size, 60px);
  height: var(--dc-size, 60px);
}

.l87 i {
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 6px;
  height: 20px;
  background: var(--dc-color, #00ffff);
  border-radius: 3px;
  transform: translateX(-50%) scaleY(0.5);
  animation: sparkJump var(--dc-speed, 1s) ease-in-out infinite;
}

.l87 i:nth-child(1) {
  animation-delay: 0s;
}
.l87 i:nth-child(2) {
  animation-delay: 0.2s;
  left: 40%;
}
.l87 i:nth-child(3) {
  animation-delay: 0.4s;
  left: 60%;
}

/* 88) Expand Square */
.l88 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  animation: expandSquare var(--dc-speed) infinite;
  margin: auto;
}

/* 89) Triple Circle Bounce */
.l89 {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.l89 i {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: var(--dc-color);
  animation: tripleCircleBounce var(--dc-speed) infinite;
}
.l89 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l89 i:nth-child(3) {
  animation-delay: 0.4s;
}

/* 90) Spin Hexagon */
.l90 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  animation: spinHexagon var(--dc-speed) linear infinite;
  margin: auto;
}

/* 91) Diagonal Move */
.l91 {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  animation: diagonalMove var(--dc-speed) infinite;
  margin: auto;
}

/* 92) Twin Pulses */
.l92 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l92 i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dc-color);
  opacity: 0.6;
  animation: twinPulses var(--dc-speed) infinite;
}
.l92 i:nth-child(2) {
  animation-delay: -0.8s;
}

/* 93) Rotate Lines */
.l93 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l93 i {
  position: absolute;
  width: calc(var(--dc-size));
  height: calc(var(--dc-size));
  background: var(--dc-color);
  top: 10px;
  left: 10px;
  animation: rotateLines var(--dc-speed) linear infinite;
}
.l93 i:nth-child(2) {
  transform: rotate(90deg);
}
.l93 i:nth-child(3) {
  transform: rotate(180deg);
}
.l93 i:nth-child(4) {
  transform: rotate(270deg);
}

/* 94) Pop Dots */
.l94 {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.l94 i {
  width: var(--dc-size);
  height: var(--dc-size);
  border-radius: 50%;
  background: var(--dc-color);
  animation: popDots var(--dc-speed) infinite;
}
.l94 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l94 i:nth-child(3) {
  animation-delay: 0.4s;
}

/* 95) Rotating Sun */
.l95 {
  --size: var(--dc-size, 80px);
  --color: var(--dc-color, #f39c12);
  --speed: var(--dc-speed, 3s);

  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color) 70%, transparent 71%);
  margin: auto;
  animation: spin var(--speed) linear infinite;
}

.l95::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 4px dotted var(--color);
  animation: spin calc(var(--speed) * 1.5) linear infinite;
}

.l95::after {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top: 2px solid var(--color);
  border-right: 2px solid var(--color);
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  animation: spin calc(var(--speed) * 2) linear infinite reverse;
}

/* 96) Pulse Triangle */
.l96 {
  width: 0;
  height: 0;
  border-left: calc(var(--dc-size)) solid transparent;
  border-right: calc(var(--dc-size)) solid transparent;
  border-bottom: calc(var(--dc-size) + 20px) solid var(--dc-color);
  animation: pulseTriangle var(--dc-speed) infinite;
  margin: auto;
}

/* 97) Spin Orbit */
.l97 {
  position: relative;
  width: var(--dc-size);
  height: var(--dc-size);
}
.l97 i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--dc-size) - 20px);
  height: calc(var(--dc-size) - 20px);
  border-radius: 50%;
  background: var(--dc-color);
  transform-origin: -15px;
  animation: spinOrbit var(--dc-speed) linear infinite;
}

/* 98) Falling Squares */
.l98 {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.l98 i {
  width: var(--dc-size);
  height: var(--dc-size);
  background: var(--dc-color);
  animation: fallingSquares var(--dc-speed) infinite;
}
.l98 i:nth-child(2) {
  animation-delay: 0.2s;
}
.l98 i:nth-child(3) {
  animation-delay: 0.4s;
}

/* 99) Glow Loader */
.l99 {
  width: calc(var(--dc-size));
  height: calc(var(--dc-size));
  border-radius: 50%;
  background: var(--dc-color);
  animation: glowLoader var(--dc-speed) infinite alternate;
  margin: auto;
}

/* 100) Firefly Glow */
.l100 {
  position: relative;
  width: 40px;
  height: 40px;
}
.l100 i {
  position: absolute;
  width: calc(var(--dc-size) - 50px);
  height: calc(var(--dc-size) - 50px);
  border-radius: 50%;
  background: var(--dc-color);
  animation: fireflyGlow var(--dc-speed) infinite alternate;
}
.l100 i:nth-child(2) {
  left: 30px;
  top: 5px;
  animation-delay: 0.5s;
}
.l100 i:nth-child(3) {
  left: 10px;
  top: 30px;
  animation-delay: 1s;
}

/* Small helper element for pretty labels */
.name {
  font-weight: 700;
  letter-spacing: 0.2px;
}