.ldr-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  border: calc(var(--s) / 10) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
  border-top-color: var(--c);
  border-radius: 50%;
  animation: ldr-ring-spin 0.8s linear infinite;
}
@keyframes ldr-ring-spin {
  to { transform: rotate(360deg); }
}

.ldr-dual-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  border: calc(var(--s) / 10) solid transparent;
  border-top-color: var(--c);
  border-bottom-color: var(--c);
  border-radius: 50%;
  animation: ldr-dual-ring-spin 1s linear infinite;
}
@keyframes ldr-dual-ring-spin {
  to { transform: rotate(360deg); }
}

.ldr-dashed-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  border: calc(var(--s) / 14) dashed var(--c);
  border-radius: 50%;
  animation: ldr-dashed-ring-spin 2.4s linear infinite;
}
@keyframes ldr-dashed-ring-spin {
  to { transform: rotate(360deg); }
}

.ldr-conic-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --t: calc(var(--s) / 9);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20%, var(--c) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
  animation: ldr-conic-ring-spin 1s linear infinite;
}
@keyframes ldr-conic-ring-spin {
  to { transform: rotate(360deg); }
}

.ldr-bouncing-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--s) / 6);
  height: calc(var(--s) * 0.75);
}
.ldr-bouncing-dots span {
  width: calc(var(--s) / 4);
  height: calc(var(--s) / 4);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-bouncing-dots-bounce 0.5s ease-in-out infinite alternate;
}
.ldr-bouncing-dots span:nth-child(2) { animation-delay: 0.16s; }
.ldr-bouncing-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes ldr-bouncing-dots-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--s) / -2)); }
}

.ldr-pulsing-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  gap: calc(var(--s) / 8);
}
.ldr-pulsing-dots span {
  width: calc(var(--s) / 3.5);
  height: calc(var(--s) / 3.5);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-pulsing-dots-scale 1.4s ease-in-out infinite both;
}
.ldr-pulsing-dots span:nth-child(1) { animation-delay: -0.32s; }
.ldr-pulsing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes ldr-pulsing-dots-scale {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}

.ldr-flashing-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  gap: calc(var(--s) / 8);
}
.ldr-flashing-dots span {
  width: calc(var(--s) / 4);
  height: calc(var(--s) / 4);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-flashing-dots-fade 1s ease-in-out infinite;
}
.ldr-flashing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ldr-flashing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ldr-flashing-dots-fade {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

.ldr-typing-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--s) / 10);
  padding: calc(var(--s) / 5) calc(var(--s) / 3.5);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
}
.ldr-typing-dots span {
  width: calc(var(--s) / 6);
  height: calc(var(--s) / 6);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-typing-dots-lift 1.2s ease-in-out infinite;
}
.ldr-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.ldr-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ldr-typing-dots-lift {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(calc(var(--s) / -8)); opacity: 1; }
}

.ldr-wave-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: center;
  gap: calc(var(--s) / 8);
  height: var(--s);
}
.ldr-wave-dots span {
  width: calc(var(--s) / 5);
  height: calc(var(--s) / 5);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-wave-dots-rise 1.2s ease-in-out infinite;
}
.ldr-wave-dots span:nth-child(2) { animation-delay: 0.1s; }
.ldr-wave-dots span:nth-child(3) { animation-delay: 0.2s; }
.ldr-wave-dots span:nth-child(4) { animation-delay: 0.3s; }
.ldr-wave-dots span:nth-child(5) { animation-delay: 0.4s; }
@keyframes ldr-wave-dots-rise {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(calc(var(--s) / -2.5)); }
}

.ldr-bars {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: center;
  gap: calc(var(--s) / 12);
  height: var(--s);
}
.ldr-bars span {
  width: calc(var(--s) / 8);
  height: 100%;
  border-radius: calc(var(--s) / 24);
  background: var(--c);
  animation: ldr-bars-stretch 1.2s ease-in-out infinite;
}
.ldr-bars span:nth-child(2) { animation-delay: -1.1s; }
.ldr-bars span:nth-child(3) { animation-delay: -1.0s; }
.ldr-bars span:nth-child(4) { animation-delay: -0.9s; }
.ldr-bars span:nth-child(5) { animation-delay: -0.8s; }
@keyframes ldr-bars-stretch {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20%           { transform: scaleY(1); }
}

.ldr-ripple {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-ripple span {
  position: absolute;
  inset: 0;
  border: calc(var(--s) / 16) solid var(--c);
  border-radius: 50%;
  animation: ldr-ripple-expand 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.ldr-ripple span:nth-child(2) { animation-delay: -0.75s; }
@keyframes ldr-ripple-expand {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.ldr-pulse {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) / 2);
  height: calc(var(--s) / 2);
  margin: calc(var(--s) / 4);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-pulse-throb 1.4s ease-out infinite;
}
@keyframes ldr-pulse-throb {
  0%   { transform: scale(0.85); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 calc(var(--s) / 3) transparent; }
  100% { transform: scale(0.85); box-shadow: 0 0 0 0 transparent; }
}

.ldr-orbit {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border: 2px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  border-radius: 50%;
  animation: ldr-orbit-spin 1.2s linear infinite;
}
.ldr-orbit::before {
  content: "";
  position: absolute;
  top: calc(var(--s) / -8);
  left: 50%;
  width: calc(var(--s) / 4);
  height: calc(var(--s) / 4);
  margin-left: calc(var(--s) / -8);
  border-radius: 50%;
  background: var(--c);
}
@keyframes ldr-orbit-spin {
  to { transform: rotate(360deg); }
}

.ldr-spokes {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-spokes span {
  position: absolute;
  top: 0;
  left: calc(50% - var(--s) / 20);
  width: calc(var(--s) / 10);
  height: calc(var(--s) / 3.5);
  border-radius: 999px;
  background: var(--c);
  transform-origin: 50% calc(var(--s) / 2);
  animation: ldr-spokes-fade 1s linear infinite;
}
.ldr-spokes span:nth-child(1) { transform: rotate(0deg);   animation-delay: -0.875s; }
.ldr-spokes span:nth-child(2) { transform: rotate(45deg);  animation-delay: -0.75s; }
.ldr-spokes span:nth-child(3) { transform: rotate(90deg);  animation-delay: -0.625s; }
.ldr-spokes span:nth-child(4) { transform: rotate(135deg); animation-delay: -0.5s; }
.ldr-spokes span:nth-child(5) { transform: rotate(180deg); animation-delay: -0.375s; }
.ldr-spokes span:nth-child(6) { transform: rotate(225deg); animation-delay: -0.25s; }
.ldr-spokes span:nth-child(7) { transform: rotate(270deg); animation-delay: -0.125s; }
.ldr-spokes span:nth-child(8) { transform: rotate(315deg); animation-delay: 0s; }
@keyframes ldr-spokes-fade {
  0%   { opacity: 1; }
  100% { opacity: 0.15; }
}

.ldr-flip-square {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 0.8);
  height: calc(var(--s) * 0.8);
  margin: calc(var(--s) * 0.1);
  background: var(--c);
  border-radius: calc(var(--s) / 16);
  animation: ldr-flip-square-flip 1.2s ease-in-out infinite;
}
@keyframes ldr-flip-square-flip {
  0%   { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50%  { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
  100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}

.ldr-spinning-square {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 0.75);
  height: calc(var(--s) * 0.75);
  margin: calc(var(--s) * 0.125);
  background: var(--c);
  animation: ldr-spinning-square-morph 2s ease-in-out infinite;
}
@keyframes ldr-spinning-square-morph {
  0%   { transform: rotate(0deg);   border-radius: 0; }
  25%  { transform: rotate(180deg); border-radius: 50%; }
  50%  { transform: rotate(180deg); border-radius: 50%; }
  75%  { transform: rotate(360deg); border-radius: 0; }
  100% { transform: rotate(360deg); border-radius: 0; }
}

.ldr-cube-grid {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--s) / 24);
  width: var(--s);
  height: var(--s);
}
.ldr-cube-grid span {
  background: var(--c);
  animation: ldr-cube-grid-scale 1.3s ease-in-out infinite;
}
.ldr-cube-grid span:nth-child(1) { animation-delay: 0.2s; }
.ldr-cube-grid span:nth-child(2) { animation-delay: 0.3s; }
.ldr-cube-grid span:nth-child(3) { animation-delay: 0.4s; }
.ldr-cube-grid span:nth-child(4) { animation-delay: 0.1s; }
.ldr-cube-grid span:nth-child(5) { animation-delay: 0.2s; }
.ldr-cube-grid span:nth-child(6) { animation-delay: 0.3s; }
.ldr-cube-grid span:nth-child(7) { animation-delay: 0s; }
.ldr-cube-grid span:nth-child(8) { animation-delay: 0.1s; }
.ldr-cube-grid span:nth-child(9) { animation-delay: 0.2s; }
@keyframes ldr-cube-grid-scale {
  0%, 70%, 100% { transform: scale(1); }
  35%           { transform: scale(0); }
}

.ldr-four-squares {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  animation: ldr-four-squares-spin 2s ease-in-out infinite;
}
.ldr-four-squares span {
  position: absolute;
  width: 44%;
  height: 44%;
  border-radius: 15%;
  background: var(--c);
  animation: ldr-four-squares-breathe 2s ease-in-out infinite;
}
.ldr-four-squares span:nth-child(1) { top: 0;    left: 0; }
.ldr-four-squares span:nth-child(2) { top: 0;    right: 0;  animation-delay: -0.5s; }
.ldr-four-squares span:nth-child(3) { bottom: 0; right: 0;  animation-delay: -1s; }
.ldr-four-squares span:nth-child(4) { bottom: 0; left: 0;   animation-delay: -1.5s; }
@keyframes ldr-four-squares-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-four-squares-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.55); }
}

.ldr-skeleton {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--s) / 5);
  width: calc(var(--s) * 5);
}
.ldr-skeleton span {
  height: calc(var(--s) / 4);
  border-radius: calc(var(--s) / 12);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent) 25%, color-mix(in srgb, var(--ldr-color, #3b82f6) 28%, transparent) 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent) 75%);
  background-size: 200% 100%;
  animation: ldr-skeleton-shimmer 1.5s ease-in-out infinite;
}
.ldr-skeleton span:nth-child(2) { width: 80%; }
.ldr-skeleton span:nth-child(3) { width: 55%; }
@keyframes ldr-skeleton-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

.ldr-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 5);
  height: calc(var(--s) / 8);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 15%, transparent);
  overflow: hidden;
}
.ldr-progress-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: inherit;
  background: var(--c);
  animation: ldr-progress-bar-slide 1.2s ease-in-out infinite;
}
@keyframes ldr-progress-bar-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

.ldr-bouncing-ball {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: calc(var(--s) * 1.6);
}
.ldr-bouncing-ball::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-bouncing-ball-drop 0.55s cubic-bezier(0.5, 0.05, 1, 0.5) infinite alternate;
}
.ldr-bouncing-ball::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  height: calc(var(--s) / 6);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  animation: ldr-bouncing-ball-shadow 0.55s cubic-bezier(0.5, 0.05, 1, 0.5) infinite alternate;
}
@keyframes ldr-bouncing-ball-drop {
  from { transform: translateY(0) scale(1, 1); }
  to   { transform: translateY(calc(var(--s) * 0.45)) scale(1.08, 0.88); }
}
@keyframes ldr-bouncing-ball-shadow {
  from { transform: scale(0.5); opacity: 0.4; }
  to   { transform: scale(1);   opacity: 1; }
}

.ldr-clock {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border: calc(var(--s) / 16) solid var(--c);
  border-radius: 50%;
}
.ldr-clock::before,
.ldr-clock::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: calc(var(--s) / 16);
  margin-left: calc(var(--s) / -32);
  border-radius: 999px;
  background: var(--c);
  transform-origin: 50% 100%;
}
.ldr-clock::before {
  height: 28%;
  animation: ldr-clock-sweep 6s linear infinite;
}
.ldr-clock::after {
  height: 38%;
  animation: ldr-clock-sweep 1s linear infinite;
}
@keyframes ldr-clock-sweep {
  to { transform: rotate(360deg); }
}

.ldr-heart {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: calc(var(--s) * 0.9);
  animation: ldr-heart-beat 1.2s ease-in-out infinite;
}
.ldr-heart::before,
.ldr-heart::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 80%;
  background: var(--c);
  border-radius: calc(var(--s) / 2) calc(var(--s) / 2) 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.ldr-heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
@keyframes ldr-heart-beat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.12); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.12); }
  70%      { transform: scale(1); }
}

.ldr-hourglass {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  box-sizing: content-box;
  width: 0;
  height: 0;
  border: calc(var(--s) / 2) solid var(--c);
  border-color: var(--c) transparent var(--c) transparent;
  border-radius: 50%;
  animation: ldr-hourglass-flip 1.4s infinite;
}
@keyframes ldr-hourglass-flip {
  0%   { transform: rotate(0deg);    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  50%  { transform: rotate(900deg);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  100% { transform: rotate(1800deg); }
}

.ldr-loading-text {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  font: 600 calc(var(--s) / 2.4) / 1 system-ui, sans-serif;
  color: var(--c);
  letter-spacing: 0.02em;
}
.ldr-loading-text span {
  animation: ldr-loading-text-dot 1.2s steps(1, end) infinite;
  opacity: 0;
}
.ldr-loading-text span:nth-child(2) { animation-delay: 0.3s; }
.ldr-loading-text span:nth-child(3) { animation-delay: 0.6s; }
@keyframes ldr-loading-text-dot {
  0%   { opacity: 0; }
  25%, 75% { opacity: 1; }
  100% { opacity: 0; }
}

.ldr-button-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--s) / 5);
  padding: calc(var(--s) / 4) calc(var(--s) / 2);
  border: 0;
  border-radius: calc(var(--s) / 6);
  background: var(--c);
  color: #fff;
  font: 600 calc(var(--s) / 3) system-ui, sans-serif;
  cursor: progress;
  opacity: 0.85;
}
.ldr-button-spinner span {
  width: calc(var(--s) / 3);
  height: calc(var(--s) / 3);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: ldr-button-spinner-spin 0.7s linear infinite;
}
@keyframes ldr-button-spinner-spin {
  to { transform: rotate(360deg); }
}

.ldr-page-overlay {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: absolute; /* use fixed to cover the whole viewport */
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) / 3);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font: 500 calc(var(--s) / 3.5) system-ui, sans-serif;
  color: var(--c);
}
.ldr-page-overlay::before {
  content: "";
  width: var(--s);
  height: var(--s);
  border: calc(var(--s) / 10) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
  border-top-color: var(--c);
  border-radius: 50%;
  animation: ldr-page-overlay-spin 0.8s linear infinite;
}
@keyframes ldr-page-overlay-spin {
  to { transform: rotate(360deg); }
}

.ldr-top-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: absolute; /* use fixed to pin it to the viewport */
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: max(3px, calc(var(--s) / 16));
  overflow: hidden;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
}
.ldr-top-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  border-radius: 0 999px 999px 0;
  background: var(--c);
  box-shadow: 0 0 10px var(--c), 0 0 4px var(--c);
  animation: ldr-top-bar-run 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ldr-top-bar-run {
  from { transform: translateX(-100%); }
  to   { transform: translateX(340%); }
}

.ldr-material-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  animation: ldr-material-spinner-rotate 2s linear infinite;
}
.ldr-material-spinner circle {
  stroke: var(--c);
  stroke-linecap: round;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: ldr-material-spinner-dash 1.5s ease-in-out infinite;
}
@keyframes ldr-material-spinner-rotate {
  to { transform: rotate(360deg); }
}
@keyframes ldr-material-spinner-dash {
  0%   { stroke-dasharray: 1, 200;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90, 200; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 200; stroke-dashoffset: -124; }
}

.ldr-windows-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-windows-dots span {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: ldr-windows-dots-orbit 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.ldr-windows-dots span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) / 8);
  height: calc(var(--s) / 8);
  margin-left: calc(var(--s) / -16);
  border-radius: 50%;
  background: var(--c);
}
.ldr-windows-dots span:nth-child(2) { animation-delay: 0.1s; }
.ldr-windows-dots span:nth-child(3) { animation-delay: 0.2s; }
.ldr-windows-dots span:nth-child(4) { animation-delay: 0.3s; }
.ldr-windows-dots span:nth-child(5) { animation-delay: 0.4s; }
@keyframes ldr-windows-dots-orbit {
  0%   { transform: rotate(0deg);   opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: rotate(720deg); opacity: 0; }
}

@property --ldr-p {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
.ldr-circular-progress {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --t: calc(var(--s) / 9);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  font: 600 calc(var(--s) / 4.5) system-ui, sans-serif;
  color: var(--c);
  animation: ldr-circular-progress-count 3s ease-in-out infinite;
}
.ldr-circular-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--ldr-p) * 1%), color-mix(in srgb, var(--ldr-color, #3b82f6) 15%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
}
.ldr-circular-progress::after {
  counter-reset: ldr-p var(--ldr-p);
  content: counter(ldr-p) "%";
}
@keyframes ldr-circular-progress-count {
  0%        { --ldr-p: 0; }
  85%, 100% { --ldr-p: 100; }
}

.ldr-skeleton-card {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: calc(var(--s) * 0.8) 1fr;
  gap: calc(var(--s) / 4);
  align-items: center;
  width: calc(var(--s) * 5);
  padding: calc(var(--s) / 4);
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 15%, transparent);
  border-radius: calc(var(--s) / 6);
}
.ldr-skeleton-card-avatar {
  width: calc(var(--s) * 0.8);
  height: calc(var(--s) * 0.8);
  border-radius: 50%;
}
.ldr-skeleton-card-lines {
  display: grid;
  gap: calc(var(--s) / 6);
}
.ldr-skeleton-card-lines span {
  display: block;
  height: calc(var(--s) / 5);
  border-radius: calc(var(--s) / 12);
}
.ldr-skeleton-card-lines span:nth-child(2) { width: 60%; }
.ldr-skeleton-card-image {
  grid-column: 1 / -1;
  height: calc(var(--s) * 1.6);
  border-radius: calc(var(--s) / 8);
}
.ldr-skeleton-card-avatar,
.ldr-skeleton-card-lines span,
.ldr-skeleton-card-image {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent) 25%, color-mix(in srgb, var(--ldr-color, #3b82f6) 28%, transparent) 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent) 75%);
  background-size: 200% 100%;
  animation: ldr-skeleton-card-shimmer 1.5s ease-in-out infinite;
}
@keyframes ldr-skeleton-card-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

.ldr-ai-shimmer-text {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  font: 500 calc(var(--s) / 2.4) system-ui, sans-serif;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 0%, var(--c) 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ldr-ai-shimmer-text-sweep 1.6s linear infinite;
}
@keyframes ldr-ai-shimmer-text-sweep {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

.ldr-blinking-cursor {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  font: 500 calc(var(--s) / 2.4) / 1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--c);
}
.ldr-blinking-cursor span {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 0.15em;
  vertical-align: text-bottom;
  background: var(--c);
  animation: ldr-blinking-cursor-blink 1s steps(2, start) infinite;
}
@keyframes ldr-blinking-cursor-blink {
  to { visibility: hidden; }
}

.ldr-neon-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  border: calc(var(--s) / 12) solid transparent;
  border-top-color: var(--c);
  border-right-color: var(--c);
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--s) / 4) color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent), inset 0 0 calc(var(--s) / 4) color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  filter: drop-shadow(0 0 calc(var(--s) / 10) var(--c));
  animation: ldr-neon-ring-spin 1s linear infinite;
}
@keyframes ldr-neon-ring-spin {
  to { transform: rotate(360deg); }
}

.ldr-cube-3d {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --h: calc(var(--s) * 0.35);
  width: calc(var(--s) * 0.7);
  height: calc(var(--s) * 0.7);
  margin: calc(var(--s) * 0.15);
  perspective: calc(var(--s) * 4);
}
.ldr-cube-3d > div {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: ldr-cube-3d-turn 3s linear infinite;
}
.ldr-cube-3d span {
  position: absolute;
  inset: 0;
  border: 1px solid var(--c);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
}
.ldr-cube-3d span:nth-child(1) { transform: rotateY(0deg)   translateZ(var(--h)); }
.ldr-cube-3d span:nth-child(2) { transform: rotateY(90deg)  translateZ(var(--h)); }
.ldr-cube-3d span:nth-child(3) { transform: rotateY(180deg) translateZ(var(--h)); }
.ldr-cube-3d span:nth-child(4) { transform: rotateY(-90deg) translateZ(var(--h)); }
.ldr-cube-3d span:nth-child(5) { transform: rotateX(90deg)  translateZ(var(--h)); }
.ldr-cube-3d span:nth-child(6) { transform: rotateX(-90deg) translateZ(var(--h)); }
@keyframes ldr-cube-3d-turn {
  from { transform: rotateX(-25deg) rotateY(0deg); }
  to   { transform: rotateX(-25deg) rotateY(360deg); }
}

.ldr-coin-flip {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.55), transparent 45%), var(--c);
  box-shadow: inset 0 0 0 calc(var(--s) / 12) color-mix(in srgb, var(--c) 70%, #000);
  font: 700 calc(var(--s) / 2) system-ui, sans-serif;
  color: #fff;
  animation: ldr-coin-flip-spin 1.4s ease-in-out infinite;
}
.ldr-coin-flip::before {
  content: "$";
}
@keyframes ldr-coin-flip-spin {
  from { transform: perspective(200px) rotateY(0deg); }
  to   { transform: perspective(200px) rotateY(360deg); }
}

.ldr-newton-cradle {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-newton-cradle span {
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  transform-origin: 50% 0;
}
.ldr-newton-cradle span:nth-child(1) { left: 0; }
.ldr-newton-cradle span:nth-child(2) { left: 20%; }
.ldr-newton-cradle span:nth-child(3) { left: 40%; }
.ldr-newton-cradle span:nth-child(4) { left: 60%; }
.ldr-newton-cradle span:nth-child(5) { left: 80%; }
.ldr-newton-cradle span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 80%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
.ldr-newton-cradle span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
}
.ldr-newton-cradle span:first-child { animation: ldr-newton-cradle-left 1.2s ease-in-out infinite; }
.ldr-newton-cradle span:last-child  { animation: ldr-newton-cradle-right 1.2s ease-in-out infinite; }
@keyframes ldr-newton-cradle-left {
  0%, 50%, 100% { transform: rotate(0deg); }
  25%           { transform: rotate(50deg); }
}
@keyframes ldr-newton-cradle-right {
  0%, 50%, 100% { transform: rotate(0deg); }
  75%           { transform: rotate(-50deg); }
}

.ldr-dna-helix {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  gap: calc(var(--s) / 10);
  height: var(--s);
}
.ldr-dna-helix span {
  position: relative;
  width: calc(var(--s) / 10);
  height: 100%;
}
.ldr-dna-helix span::before,
.ldr-dna-helix span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  animation: ldr-dna-helix-weave 1.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.ldr-dna-helix span::after {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
  animation-delay: calc(var(--d, 0s) - 0.8s);
}
.ldr-dna-helix span:nth-child(2) { --d: -0.15s; }
.ldr-dna-helix span:nth-child(3) { --d: -0.3s; }
.ldr-dna-helix span:nth-child(4) { --d: -0.45s; }
.ldr-dna-helix span:nth-child(5) { --d: -0.6s; }
.ldr-dna-helix span:nth-child(6) { --d: -0.75s; }
.ldr-dna-helix span:nth-child(7) { --d: -0.9s; }
.ldr-dna-helix span:nth-child(8) { --d: -1.05s; }
@keyframes ldr-dna-helix-weave {
  0%, 100% { transform: translateY(0) scale(1); }
  25%      { transform: translateY(calc(var(--s) * 0.45)) scale(0.55); }
  50%      { transform: translateY(calc(var(--s) * 0.9)) scale(1); }
  75%      { transform: translateY(calc(var(--s) * 0.45)) scale(1.25); }
}

.ldr-liquid-fill {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border: calc(var(--s) / 16) solid var(--c);
  border-radius: 50%;
  overflow: hidden;
}
.ldr-liquid-fill::before,
.ldr-liquid-fill::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 200%;
  aspect-ratio: 1;
  border-radius: 42%;
  background: var(--c);
  animation: ldr-liquid-fill-wave 4s linear infinite, ldr-liquid-fill-rise 5s ease-in-out infinite alternate;
}
.ldr-liquid-fill::after {
  border-radius: 40%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  animation-duration: 6s, 5s;
}
@keyframes ldr-liquid-fill-wave {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
@keyframes ldr-liquid-fill-rise {
  from { top: 95%; }
  to   { top: 30%; }
}

.ldr-gooey-blobs {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 2);
  height: var(--s);
}
.ldr-gooey-blobs > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  filter: url(#ldr-goo);
}
.ldr-gooey-blobs span {
  width: calc(var(--s) / 2.6);
  height: calc(var(--s) / 2.6);
  margin: 0 calc(var(--s) / -24);
  border-radius: 50%;
  background: var(--c);
}
.ldr-gooey-blobs span:nth-child(1) { animation: ldr-gooey-blobs-left 1.6s ease-in-out infinite; }
.ldr-gooey-blobs span:nth-child(3) { animation: ldr-gooey-blobs-right 1.6s ease-in-out infinite; }
@keyframes ldr-gooey-blobs-left {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(calc(var(--s) * -0.5)); }
}
@keyframes ldr-gooey-blobs-right {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(calc(var(--s) * 0.5)); }
}

.ldr-radar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 33%, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 33% calc(33% + 1px), transparent 0 66%, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 66% calc(66% + 1px), transparent 0);
}
.ldr-radar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 72%, color-mix(in srgb, var(--ldr-color, #3b82f6) 65%, transparent) 100%);
  animation: ldr-radar-sweep 2s linear infinite;
}
.ldr-radar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 78%;
  width: calc(var(--s) / 9);
  height: calc(var(--s) / 9);
  margin: calc(var(--s) / -18);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 8) var(--c);
  animation: ldr-radar-blip 2s ease-out infinite;
}
@keyframes ldr-radar-sweep {
  to { transform: rotate(360deg); }
}
@keyframes ldr-radar-blip {
  0%, 22%  { opacity: 0; }
  27%      { opacity: 1; }
  70%, 100% { opacity: 0; }
}

.ldr-gear {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, transparent calc(var(--s) * 0.17), var(--c) calc(var(--s) * 0.17 + 1px) calc(var(--s) * 0.36), transparent calc(var(--s) * 0.36 + 1px));
  animation: ldr-gear-turn 4s linear infinite;
}
.ldr-gear::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(var(--c) 0 22deg, transparent 22deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent calc(var(--s) * 0.3), #000 calc(var(--s) * 0.3 + 1px));
  mask: radial-gradient(circle, transparent calc(var(--s) * 0.3), #000 calc(var(--s) * 0.3 + 1px));
}
@keyframes ldr-gear-turn {
  to { transform: rotate(360deg); }
}

.ldr-infinity {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 1.6);
  height: calc(var(--s) * 0.8);
}
.ldr-infinity-track {
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-infinity-run {
  stroke: var(--c);
  stroke-linecap: round;
  stroke-dasharray: 28 72;
  animation: ldr-infinity-run 1.6s linear infinite;
}
@keyframes ldr-infinity-run {
  to { stroke-dashoffset: -100; }
}

.ldr-circle-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-circle-dots span {
  position: absolute;
  top: 0;
  left: calc(50% - var(--s) / 14);
  width: calc(var(--s) / 7);
  height: calc(var(--s) / 7);
  border-radius: 50%;
  background: var(--c);
  transform-origin: 50% calc(var(--s) / 2);
  animation: ldr-circle-dots-pulse 1.2s ease-in-out infinite;
}
.ldr-circle-dots span:nth-child(1) { --r: 0deg;   animation-delay: -1.05s; }
.ldr-circle-dots span:nth-child(2) { --r: 45deg;  animation-delay: -0.9s; }
.ldr-circle-dots span:nth-child(3) { --r: 90deg;  animation-delay: -0.75s; }
.ldr-circle-dots span:nth-child(4) { --r: 135deg; animation-delay: -0.6s; }
.ldr-circle-dots span:nth-child(5) { --r: 180deg; animation-delay: -0.45s; }
.ldr-circle-dots span:nth-child(6) { --r: 225deg; animation-delay: -0.3s; }
.ldr-circle-dots span:nth-child(7) { --r: 270deg; animation-delay: -0.15s; }
.ldr-circle-dots span:nth-child(8) { --r: 315deg; animation-delay: 0s; }
@keyframes ldr-circle-dots-pulse {
  0%, 100% { transform: rotate(var(--r)) scale(0.4); opacity: 0.35; }
  50%      { transform: rotate(var(--r)) scale(1);   opacity: 1; }
}

.ldr-pacman {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 2);
  height: var(--s);
}
.ldr-pacman::before,
.ldr-pacman::after {
  content: "";
  position: absolute;
  left: 0;
  width: var(--s);
  height: calc(var(--s) / 2);
  background: var(--c);
}
.ldr-pacman::before {
  top: 0;
  border-radius: var(--s) var(--s) 0 0;
  transform-origin: 50% 100%;
  animation: ldr-pacman-top 0.5s ease-in-out infinite alternate;
}
.ldr-pacman::after {
  top: 50%;
  border-radius: 0 0 var(--s) var(--s);
  transform-origin: 50% 0;
  animation: ldr-pacman-bottom 0.5s ease-in-out infinite alternate;
}
.ldr-pacman span {
  position: absolute;
  top: calc(50% - var(--s) / 12);
  right: 0;
  width: calc(var(--s) / 6);
  height: calc(var(--s) / 6);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  animation: ldr-pacman-dot 1.5s linear infinite;
}
.ldr-pacman span:nth-child(2) { animation-delay: -0.5s; }
.ldr-pacman span:nth-child(3) { animation-delay: -1s; }
@keyframes ldr-pacman-top    { to { transform: rotate(-35deg); } }
@keyframes ldr-pacman-bottom { to { transform: rotate(35deg); } }
@keyframes ldr-pacman-dot {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(calc(var(--s) * -0.9)); opacity: 0; }
}

.ldr-solar-system {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
}
.ldr-solar-system::before {
  content: "";
  width: calc(var(--s) / 4);
  height: calc(var(--s) / 4);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 6) color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
}
.ldr-solar-system span {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  border-radius: 50%;
  animation: ldr-solar-system-orbit linear infinite;
}
.ldr-solar-system span:nth-child(1) { inset: 0;   animation-duration: 3s; }
.ldr-solar-system span:nth-child(2) { inset: 24%; animation-duration: 1.4s; animation-direction: reverse; }
.ldr-solar-system span::before {
  content: "";
  position: absolute;
  top: calc(var(--s) / -20);
  left: calc(50% - var(--s) / 20);
  width: calc(var(--s) / 10);
  height: calc(var(--s) / 10);
  border-radius: 50%;
  background: var(--c);
}
@keyframes ldr-solar-system-orbit {
  to { transform: rotate(360deg); }
}

.ldr-wave-text {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  font: 700 calc(var(--s) / 2.2) system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: var(--c);
}
.ldr-wave-text span {
  display: inline-block;
  animation: ldr-wave-text-hop 1.4s ease-in-out infinite;
}
.ldr-wave-text span:nth-child(2) { animation-delay: 0.08s; }
.ldr-wave-text span:nth-child(3) { animation-delay: 0.16s; }
.ldr-wave-text span:nth-child(4) { animation-delay: 0.24s; }
.ldr-wave-text span:nth-child(5) { animation-delay: 0.32s; }
.ldr-wave-text span:nth-child(6) { animation-delay: 0.4s; }
.ldr-wave-text span:nth-child(7) { animation-delay: 0.48s; }
@keyframes ldr-wave-text-hop {
  0%, 40%, 100% { transform: translateY(0); }
  20%           { transform: translateY(-0.4em); }
}

.ldr-battery {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: calc(var(--s) / 2);
  padding: calc(var(--s) / 20);
  border: calc(var(--s) / 20) solid var(--c);
  border-radius: calc(var(--s) / 10);
}
.ldr-battery::before {
  content: "";
  position: absolute;
  top: 30%;
  right: calc(var(--s) / -7);
  width: calc(var(--s) / 12);
  height: 40%;
  border-radius: 0 calc(var(--s) / 30) calc(var(--s) / 30) 0;
  background: var(--c);
}
.ldr-battery::after {
  content: "";
  display: block;
  height: 100%;
  border-radius: calc(var(--s) / 24);
  background: var(--c);
  transform-origin: 0 50%;
  animation: ldr-battery-charge 2.4s ease-in-out infinite;
}
@keyframes ldr-battery-charge {
  0%        { transform: scaleX(0); }
  80%, 100% { transform: scaleX(1); }
}

.ldr-hue-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  border: calc(var(--s) / 10) solid transparent;
  border-top-color: var(--c);
  border-right-color: var(--c);
  border-radius: 50%;
  animation: ldr-hue-ring-spin 1s linear infinite, ldr-hue-ring-hue 3s linear infinite;
}
@keyframes ldr-hue-ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-hue-ring-hue {
  to { filter: hue-rotate(360deg); }
}

.ldr-wifi {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-wifi::before {
  content: "";
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: calc(var(--s) / 8);
  height: calc(var(--s) / 8);
  margin-left: calc(var(--s) / -16);
  border-radius: 50%;
  background: var(--c);
}
.ldr-wifi span {
  position: absolute;
  bottom: calc(8% + var(--s) / 16 - var(--s) * var(--r) / 2);
  left: 50%;
  width: calc(var(--s) * var(--r));
  height: calc(var(--s) * var(--r));
  border: calc(var(--s) / 12) solid transparent;
  border-top-color: var(--c);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: ldr-wifi-light 1.6s ease-in-out infinite;
}
.ldr-wifi span:nth-child(1) { --r: 0.38; }
.ldr-wifi span:nth-child(2) { --r: 0.68; animation-delay: 0.2s; }
.ldr-wifi span:nth-child(3) { --r: 0.98; animation-delay: 0.4s; }
@keyframes ldr-wifi-light {
  0%, 100% { opacity: 0.15; }
  25%, 65% { opacity: 1; }
}

.ldr-segmented-wheel {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --t: calc(var(--s) / 5);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 15%, transparent) 0 60%, var(--c) 100%);
  -webkit-mask:
    repeating-conic-gradient(#000 0 20deg, transparent 20deg 30deg),
    radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
  -webkit-mask-composite: source-in;
  mask:
    repeating-conic-gradient(#000 0 20deg, transparent 20deg 30deg),
    radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
  mask-composite: intersect;
  animation: ldr-segmented-wheel-tick 1.2s steps(12) infinite;
}
@keyframes ldr-segmented-wheel-tick {
  to { transform: rotate(360deg); }
}

.ldr-material-track-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  animation: ldr-material-track-spinner-rotate 2.4s linear infinite;
}
.ldr-material-track-spinner circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
/* The track always covers what the arc leaves free, minus a gap of 7 at each end. */
.ldr-material-track-spinner-track {
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  animation: ldr-material-track-spinner-track 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ldr-material-track-spinner-arc {
  stroke: var(--c);
  animation: ldr-material-track-spinner-arc 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ldr-material-track-spinner-rotate {
  to { transform: rotate(360deg); }
}
@keyframes ldr-material-track-spinner-arc {
  0%   { stroke-dasharray: 5 95;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 70 30; stroke-dashoffset: -5; }
  100% { stroke-dasharray: 5 95;  stroke-dashoffset: -100; }
}
@keyframes ldr-material-track-spinner-track {
  0%   { stroke-dasharray: 81 19; stroke-dashoffset: -12; }
  50%  { stroke-dasharray: 16 84; stroke-dashoffset: -82; }
  100% { stroke-dasharray: 81 19; stroke-dashoffset: -112; }
}

.ldr-double-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-double-ring circle {
  fill: none;
  stroke: var(--c);
  stroke-width: 4;
  stroke-linecap: round;
  transform-origin: center;
}
.ldr-double-ring-outer {
  stroke-dasharray: 30 70;
  animation: ldr-double-ring-spin 1s linear infinite;
}
.ldr-double-ring-inner {
  stroke-dasharray: 40 60;
  opacity: 0.5;
  animation: ldr-double-ring-spin 0.75s linear infinite reverse;
}
@keyframes ldr-double-ring-spin {
  to { transform: rotate(360deg); }
}

.ldr-comet-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --t: calc(var(--s) / 11);
  position: relative;
  width: var(--s);
  height: var(--s);
  animation: ldr-comet-spinner-spin 1s linear infinite;
}
.ldr-comet-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 12%, var(--c));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
}
/* The head sits on the ring's centre line at 12 o'clock, where the gradient peaks. */
.ldr-comet-spinner::after {
  content: "";
  position: absolute;
  top: calc(var(--t) / 2);
  left: 50%;
  width: calc(var(--s) / 5);
  height: calc(var(--s) / 5);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 6) color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  transform: translate(-50%, -50%);
}
@keyframes ldr-comet-spinner-spin {
  to { transform: rotate(360deg); }
}

.ldr-eclipse-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
  box-shadow: 0 calc(var(--s) / 12) 0 0 var(--c);
  animation: ldr-eclipse-spinner-spin 1s linear infinite;
}
@keyframes ldr-eclipse-spinner-spin {
  to { transform: rotate(360deg); }
}

.ldr-circle-notch {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  animation: ldr-circle-notch-spin 0.75s linear infinite;
}
.ldr-circle-notch circle {
  fill: none;
  stroke: var(--c);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 70 30;
}
@keyframes ldr-circle-notch-spin {
  to { transform: rotate(360deg); }
}

@property --ldr-pie-spinner-from {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --ldr-pie-spinner-to {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.ldr-pie-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border: calc(var(--s) / 16) solid var(--c);
  border-radius: 50%;
}
.ldr-pie-spinner::before {
  content: "";
  position: absolute;
  inset: calc(var(--s) / 12);
  border-radius: 50%;
  background: conic-gradient(transparent calc(var(--ldr-pie-spinner-from) - 0.5deg), var(--c) var(--ldr-pie-spinner-from) var(--ldr-pie-spinner-to), transparent calc(var(--ldr-pie-spinner-to) + 0.5deg));
  animation: ldr-pie-spinner-sweep 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* The angles overshoot 0 and 360 by 15deg, so the slow ends of the easing happen off the disc. */
@keyframes ldr-pie-spinner-sweep {
  0%   { --ldr-pie-spinner-from: -15deg;  --ldr-pie-spinner-to: -15deg; }
  50%  { --ldr-pie-spinner-from: -15deg;  --ldr-pie-spinner-to: 375deg; }
  100% { --ldr-pie-spinner-from: 375deg;  --ldr-pie-spinner-to: 375deg; }
}

.ldr-aperture-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  overflow: hidden;
  animation: ldr-aperture-spinner-twist 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-aperture-spinner span {
  position: absolute;
  inset: 0;
  background: var(--c);
  transform: rotate(calc(var(--i) * 60deg));
  animation: ldr-aperture-spinner-iris 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ldr-aperture-spinner-iris {
  0%, 100% { clip-path: polygon(53% 50.58%, 169.91% -16.92%, 169.91% 118.08%); }
  50%      { clip-path: polygon(53% 24.02%, 169.91% -43.48%, 169.91% 91.52%); }
}
@keyframes ldr-aperture-spinner-twist {
  to { transform: rotate(60deg); }
}

.ldr-yin-yang-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  animation: ldr-yin-yang-spinner-spin 1.6s cubic-bezier(0.65, 0.05, 0.35, 0.95) infinite;
}
.ldr-yin-yang-spinner-disc {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  stroke: var(--c);
  stroke-width: 2;
}
.ldr-yin-yang-spinner-half,
.ldr-yin-yang-spinner-dot {
  fill: var(--c);
}
@keyframes ldr-yin-yang-spinner-spin {
  to { transform: rotate(360deg); }
}

.ldr-squircle-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-squircle-spinner rect {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
}
.ldr-squircle-spinner-track {
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-squircle-spinner-run {
  stroke: var(--c);
  animation: ldr-squircle-spinner-run 1.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes ldr-squircle-spinner-run {
  0%   { stroke-dasharray: 8 92;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 45 55; stroke-dashoffset: -10; }
  100% { stroke-dasharray: 8 92;  stroke-dashoffset: -100; }
}

.ldr-activity-rings {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-activity-rings-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: hue-rotate(calc(var(--i) * 120deg));
}
.ldr-activity-rings circle {
  fill: none;
  stroke: var(--c);
  stroke-width: 5;
  stroke-linecap: round;
}
.ldr-activity-rings circle:first-child {
  opacity: 0.2;
}
/* A 100 long dash on a path of length 112 fills 89% of the ring. */
.ldr-activity-rings circle + circle {
  stroke-dasharray: 100 200;
  animation: ldr-activity-rings-fill 2.6s infinite both;
  animation-delay: calc(var(--i) * 0.14s);
}
@keyframes ldr-activity-rings-fill {
  0%       { stroke-dashoffset: 101; animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); }
  45%, 70% { stroke-dashoffset: 0;   animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  95%, 100% { stroke-dashoffset: 101; }
}

.ldr-circle-draw {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  transform: rotate(-90deg);
}
/* Dash 100, gap 120: offset 105 hides it, 0 shows all of it, -105 has run past the end. */
.ldr-circle-draw circle {
  fill: none;
  stroke: var(--c);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 100 120;
  animation: ldr-circle-draw-trace 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ldr-circle-draw-trace {
  0%       { stroke-dashoffset: 105; }
  45%, 55% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: -105; }
}

.ldr-snake-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-snake-spinner circle {
  fill: none;
  stroke: var(--c);
  stroke-width: calc(6 - var(--i) * 0.9);
  stroke-linecap: round;
  stroke-dasharray: 16 84;
  transform-origin: center;
  animation: ldr-snake-spinner-slither 1.3s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
  animation-delay: calc((var(--i) - 5) * 0.05s);
}
@keyframes ldr-snake-spinner-slither {
  to { transform: rotate(360deg); }
}

.ldr-wavy-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  animation: ldr-wavy-ring-rotate 2.8s linear infinite;
}
.ldr-wavy-ring path {
  fill: none;
  stroke: var(--c);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: ldr-wavy-ring-dash 1.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes ldr-wavy-ring-rotate {
  to { transform: rotate(360deg); }
}
@keyframes ldr-wavy-ring-dash {
  0%   { stroke-dasharray: 4 96;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 62 38; stroke-dashoffset: -8; }
  100% { stroke-dasharray: 4 96;  stroke-dashoffset: -100; }
}

.ldr-hud-rings {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-hud-rings circle {
  fill: none;
  stroke: var(--c);
  transform-origin: center;
}
.ldr-hud-rings-rim {
  stroke-width: 2;
  stroke-dasharray: 22 11.33;
  opacity: 0.75;
  animation: ldr-hud-rings-spin 4s linear infinite;
}
.ldr-hud-rings-ticks {
  stroke-width: 3;
  stroke-dasharray: 1 2.5;
  opacity: 0.55;
  animation: ldr-hud-rings-spin 8s linear infinite reverse;
}
.ldr-hud-rings-arcs {
  stroke-width: 3.5;
  stroke-dasharray: 20 30;
  animation: ldr-hud-rings-spin 1.4s cubic-bezier(0.6, 0.05, 0.4, 0.95) infinite;
}
.ldr-hud-rings-core {
  stroke-width: 2;
  stroke-dasharray: 9 3.5;
  opacity: 0.85;
  animation: ldr-hud-rings-spin 2.4s linear infinite reverse;
}
.ldr-hud-rings-dot {
  fill: var(--c);
  stroke: none;
  animation: ldr-hud-rings-blink 1.4s steps(2, jump-none) infinite;
}
@keyframes ldr-hud-rings-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-hud-rings-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.ldr-elastic-arc {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-elastic-arc circle {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  transform-origin: center;
}
.ldr-elastic-arc-track {
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
}
.ldr-elastic-arc-arc {
  stroke: var(--c);
  stroke-dasharray: 22 78;
  animation: ldr-elastic-arc-step 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes ldr-elastic-arc-step {
  0%   { transform: rotate(-101deg); }
  25%  { transform: rotate(-11deg); }
  50%  { transform: rotate(79deg); }
  75%  { transform: rotate(169deg); }
  100% { transform: rotate(259deg); }
}

.ldr-swinging-arc {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-swinging-arc circle {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}
.ldr-swinging-arc-track {
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
}
/* The dash is centred on 6 o'clock (25 of 100), then the circle rocks either side of it. */
.ldr-swinging-arc-arc {
  stroke: var(--c);
  transform-origin: center;
  animation:
    ldr-swinging-arc-swing 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate,
    ldr-swinging-arc-stretch 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ldr-swinging-arc-swing {
  from { transform: rotate(-105deg); }
  to   { transform: rotate(105deg); }
}
@keyframes ldr-swinging-arc-stretch {
  0%, 100% { stroke-dasharray: 8 92;  stroke-dashoffset: -21; }
  50%      { stroke-dasharray: 30 70; stroke-dashoffset: -10; }
}

.ldr-split-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  animation: ldr-split-ring-turn 1.6s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.ldr-split-ring span {
  position: absolute;
  inset: 0;
  border: calc(var(--s) / 8) solid var(--c);
  border-radius: 50%;
  clip-path: inset(0 calc(50% + var(--s) / 32) 0 0);
  animation: ldr-split-ring-part 1.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.ldr-split-ring span + span {
  border-color: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  clip-path: inset(0 0 0 calc(50% + var(--s) / 32));
}
@keyframes ldr-split-ring-turn {
  0%, 15%   { transform: rotate(0deg); }
  85%, 100% { transform: rotate(180deg); }
}
@keyframes ldr-split-ring-part {
  0%, 100% { transform: translateX(0); }
  35%, 65% { transform: translateX(calc(var(--d) * var(--s) / 7)); }
}

.ldr-rainbow-arcs {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-rainbow-arcs path {
  fill: none;
  stroke: var(--c);
  stroke-width: 4.5;
  stroke-linecap: round;
  opacity: calc(1 - var(--i) * 0.28);
  transform-origin: center;
  animation: ldr-rainbow-arcs-flip 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
  animation-delay: calc(var(--i) * 0.12s);
}
@keyframes ldr-rainbow-arcs-flip {
  0%        { transform: rotate(0deg); }
  35%, 50%  { transform: rotate(180deg); }
  85%, 100% { transform: rotate(360deg); }
}

.ldr-donut-chart {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  animation: ldr-donut-chart-turn 7.2s linear infinite;
}
.ldr-donut-chart circle {
  fill: none;
  stroke-width: 8;
  animation: 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* Shares go 50/30/20, then 22/43/35, then 36/18/46, with a gap of 2.5 between segments. */
.ldr-donut-chart .ldr-donut-chart-a { stroke: var(--c); animation-name: ldr-donut-chart-a; }
.ldr-donut-chart .ldr-donut-chart-b { stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent); animation-name: ldr-donut-chart-b; }
.ldr-donut-chart .ldr-donut-chart-c { stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent); animation-name: ldr-donut-chart-c; }
@keyframes ldr-donut-chart-turn {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}
@keyframes ldr-donut-chart-a {
  0%, 20%, 100% { stroke-dasharray: 47.5 52.5; stroke-dashoffset: 0; }
  33%, 53%      { stroke-dasharray: 19.5 80.5; stroke-dashoffset: 0; }
  66%, 86%      { stroke-dasharray: 33.5 66.5; stroke-dashoffset: 0; }
}
@keyframes ldr-donut-chart-b {
  0%, 20%, 100% { stroke-dasharray: 27.5 72.5; stroke-dashoffset: -50; }
  33%, 53%      { stroke-dasharray: 40.5 59.5; stroke-dashoffset: -22; }
  66%, 86%      { stroke-dasharray: 15.5 84.5; stroke-dashoffset: -36; }
}
@keyframes ldr-donut-chart-c {
  0%, 20%, 100% { stroke-dasharray: 17.5 82.5; stroke-dashoffset: -80; }
  33%, 53%      { stroke-dasharray: 32.5 67.5; stroke-dashoffset: -65; }
  66%, 86%      { stroke-dasharray: 43.5 56.5; stroke-dashoffset: -54; }
}

.ldr-spinner-to-check {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  fill: none;
  stroke: var(--c);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: ldr-spinner-to-check-pop 3.2s ease-in-out infinite;
}
.ldr-spinner-to-check-ring {
  transform: rotate(-90deg);
  transform-origin: center;
  animation: ldr-spinner-to-check-ring 3.2s infinite;
}
.ldr-spinner-to-check-tick {
  stroke-dasharray: 100 100;
  animation: ldr-spinner-to-check-tick 3.2s infinite;
}
@keyframes ldr-spinner-to-check-ring {
  0%       { stroke-dasharray: 25 75;  stroke-dashoffset: 0;    opacity: 0; animation-timing-function: linear; }
  5%       { opacity: 1; }
  40%      { stroke-dasharray: 25 75;  stroke-dashoffset: -175; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  52%, 88% { stroke-dasharray: 100 0;  stroke-dashoffset: -175; opacity: 1; }
  96%, 100% { stroke-dasharray: 100 0; stroke-dashoffset: -175; opacity: 0; }
}
@keyframes ldr-spinner-to-check-tick {
  0%, 54%  { stroke-dashoffset: 100; opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  68%, 88% { stroke-dashoffset: 0;   opacity: 1; }
  96%, 100% { stroke-dashoffset: 0;  opacity: 0; }
}
@keyframes ldr-spinner-to-check-pop {
  0%, 52%, 70%, 100% { transform: scale(1); }
  60%                { transform: scale(1.1); }
}

.ldr-dash-morph-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  animation: ldr-dash-morph-ring-turn 3.2s linear infinite;
}
/* Eight segments of 12.5 each; the offset keeps every dash centred on its dot. */
.ldr-dash-morph-ring circle {
  fill: none;
  stroke: var(--c);
  stroke-width: 4.5;
  stroke-linecap: round;
  animation: ldr-dash-morph-ring-morph 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ldr-dash-morph-ring-turn {
  to { transform: rotate(360deg); }
}
@keyframes ldr-dash-morph-ring-morph {
  0%, 100% { stroke-dasharray: 0 12.5; stroke-dashoffset: 0; }
  50%      { stroke-dasharray: 8 4.5;  stroke-dashoffset: 4; }
}

.ldr-spiral-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  animation: ldr-spiral-spinner-spin 1s linear infinite;
}
.ldr-spiral-spinner path {
  fill: none;
  stroke: var(--c);
  stroke-width: 3;
  stroke-linecap: round;
}
@keyframes ldr-spiral-spinner-spin {
  to { transform: rotate(360deg); }
}

.ldr-pinwheel-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  animation: ldr-pinwheel-spinner-whirl 1.6s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}
/* Each blade fills half of a quadrant; transform-origin is the hub at the centre. */
.ldr-pinwheel-spinner span {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 36%;
  height: 36%;
  background: linear-gradient(135deg, var(--c) 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent) 50%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform-origin: 0 100%;
  transform: rotate(calc(var(--i) * 90deg));
}
.ldr-pinwheel-spinner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) / 8);
  height: calc(var(--s) / 8);
  border: calc(var(--s) / 32) solid var(--c);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  transform: translate(-50%, -50%);
}
@keyframes ldr-pinwheel-spinner-whirl {
  to { transform: rotate(360deg); }
}

.ldr-beach-ball-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  overflow: hidden;
}
.ldr-beach-ball-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(var(--c) 0 60deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent) 0 120deg, var(--c) 0 180deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent) 0 240deg, var(--c) 0 300deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent) 0);
  background: conic-gradient(
    var(--c) 0 60deg,
    oklch(from var(--c) l c calc(h + 60)) 0 120deg,
    oklch(from var(--c) l c calc(h + 120)) 0 180deg,
    oklch(from var(--c) l c calc(h + 180)) 0 240deg,
    oklch(from var(--c) l c calc(h + 240)) 0 300deg,
    oklch(from var(--c) l c calc(h + 300)) 0
  );
  animation: ldr-beach-ball-spinner-spin 0.9s linear infinite;
}
/* The shine stays put while the colors turn underneath it. */
.ldr-beach-ball-spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0) 38%),
    radial-gradient(circle at 50% 50%, rgb(0 0 0 / 0) 60%, rgb(0 0 0 / 0.22));
}
@keyframes ldr-beach-ball-spinner-spin {
  to { transform: rotate(360deg); }
}

.ldr-mirrored-arcs {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  animation: ldr-mirrored-arcs-turn 1.4s linear infinite;
}
.ldr-mirrored-arcs circle {
  fill: none;
  stroke: var(--c);
  stroke-width: 4.5;
  stroke-linecap: round;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: ldr-mirrored-arcs-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ldr-mirrored-arcs circle + circle {
  transform: scaleX(-1) rotate(-90deg);
}
/* Each arc runs from the top (0) to the bottom (50); a half turn per loop hands over seamlessly. */
@keyframes ldr-mirrored-arcs-turn {
  to { transform: rotate(180deg); }
}
@keyframes ldr-mirrored-arcs-sweep {
  0%   { stroke-dasharray: 0 100;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 42 58;  stroke-dashoffset: -6; }
  100% { stroke-dasharray: 0 100;  stroke-dashoffset: -50; }
}

.ldr-gauge-loader {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  fill: none;
  stroke-linecap: round;
}
.ldr-gauge-loader-track,
.ldr-gauge-loader-fill {
  stroke-width: 5;
}
.ldr-gauge-loader-track {
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-gauge-loader-fill {
  stroke: var(--c);
  stroke-dasharray: 100 110;
  animation: ldr-gauge-loader-fill 2.4s infinite;
}
/* The hub sits at 24,28 of the 48 box, which is 50% 58.33%. */
.ldr-gauge-loader-needle {
  stroke: var(--c);
  stroke-width: 3;
  transform-origin: 50% 58.33%;
  animation: ldr-gauge-loader-needle 2.4s infinite;
}
.ldr-gauge-loader-hub {
  fill: var(--c);
}
@keyframes ldr-gauge-loader-fill {
  0%       { stroke-dashoffset: 101; animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1); }
  45%, 60% { stroke-dashoffset: 12;  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  92%, 100% { stroke-dashoffset: 101; }
}
@keyframes ldr-gauge-loader-needle {
  0%       { transform: rotate(-122deg); animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1); }
  45%, 60% { transform: rotate(91deg);   animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  92%, 100% { transform: rotate(-122deg); }
}

.ldr-refresh-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  animation: ldr-refresh-spinner-turn 0.9s cubic-bezier(0.55, 0, 0.35, 1) infinite;
}
.ldr-refresh-spinner path {
  fill: none;
  stroke: var(--c);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes ldr-refresh-spinner-turn {
  to { transform: rotate(180deg); }
}

.ldr-chasing-arcs {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-chasing-arcs circle {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  transform-origin: center;
}
.ldr-chasing-arcs-long {
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  stroke-dasharray: 32 68;
  animation: ldr-chasing-arcs-spin 1.8s linear infinite;
}
/* Two laps for every one of the long arc, eased so it surges past and drifts off. */
.ldr-chasing-arcs-short {
  stroke: var(--c);
  stroke-dasharray: 12 88;
  animation: ldr-chasing-arcs-spin 0.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes ldr-chasing-arcs-spin {
  to { transform: rotate(360deg); }
}

.ldr-aligning-rings {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-aligning-rings circle {
  fill: none;
  stroke: var(--c);
  stroke-width: 3.5;
  stroke-linecap: round;
  transform-origin: center;
  animation: ldr-aligning-rings-turn 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* Every gap is the same width in pixels and sits at 12 o'clock (75 of 100) when aligned. */
.ldr-aligning-rings-outer  { stroke-dasharray: 93 7;  stroke-dashoffset: -78.5; --a: 200deg;  --b: -70deg; --z: 360deg; }
.ldr-aligning-rings-middle { stroke-dasharray: 90 10; stroke-dashoffset: -80;   --a: -150deg; --b: 95deg;  --z: 0deg; opacity: 0.75; }
.ldr-aligning-rings-inner  { stroke-dasharray: 83 17; stroke-dashoffset: -83.5; --a: 110deg;  --b: -160deg; --z: -360deg; opacity: 0.5; }
.ldr-aligning-rings .ldr-aligning-rings-dot {
  fill: var(--c);
  stroke: none;
  animation-name: ldr-aligning-rings-lit;
}
@keyframes ldr-aligning-rings-turn {
  0%, 12%  { transform: rotate(0deg); }
  38%, 48% { transform: rotate(var(--a)); }
  74%, 84% { transform: rotate(var(--b)); }
  100%     { transform: rotate(var(--z)); }
}
@keyframes ldr-aligning-rings-lit {
  0%, 12%   { opacity: 1; transform: scale(1.2); }
  22%, 90%  { opacity: 0.25; transform: scale(0.8); }
  100%      { opacity: 1; transform: scale(1.2); }
}

.ldr-avatar-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-avatar-ring-arcs {
  fill: none;
  stroke: var(--c);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 30 20;
  transform-origin: center;
  animation: ldr-avatar-ring-spin 1.4s linear infinite;
}
.ldr-avatar-ring-face circle:first-child {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
}
.ldr-avatar-ring-face circle + circle,
.ldr-avatar-ring-face path {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 38%, transparent);
  animation: ldr-avatar-ring-breathe 1.4s ease-in-out infinite alternate;
}
@keyframes ldr-avatar-ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-avatar-ring-breathe {
  from { opacity: 1; }
  to   { opacity: 0.45; }
}

.ldr-dot-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  animation: ldr-dot-spinner-spin 1.1s linear infinite;
}
.ldr-dot-spinner span {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--i) * -45deg));
}
.ldr-dot-spinner span::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - var(--s) / 9);
  width: calc(var(--s) / 4.5);
  height: calc(var(--s) / 4.5);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--i) * 0.11);
  transform: scale(calc(1 - var(--i) * 0.09));
}
@keyframes ldr-dot-spinner-spin {
  to { transform: rotate(360deg); }
}

.ldr-elastic-dot {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --r: calc(var(--s) / 2);
  position: relative;
  display: flex;
  justify-content: space-between;
  width: calc(var(--s) * 1.5);
  height: calc(var(--s) * 0.24);
}
.ldr-elastic-dot span {
  width: 16%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
}
.ldr-elastic-dot-blob {
  position: absolute;
  inset: 0;
  background: var(--c);
  clip-path: inset(0 84% 0 0 round var(--r));
  animation: ldr-elastic-dot-hop 2.4s cubic-bezier(0.6, 0, 0.25, 1) infinite;
}
@keyframes ldr-elastic-dot-hop {
  0%, 100%       { clip-path: inset(0 84% 0 0 round var(--r)); }
  6.67%          { clip-path: inset(0 56% 0 0 round var(--r)); }
  13.33%, 16.67% { clip-path: inset(0 56% 0 28% round var(--r)); }
  23.33%         { clip-path: inset(0 28% 0 28% round var(--r)); }
  30%, 33.33%    { clip-path: inset(0 28% 0 56% round var(--r)); }
  40%            { clip-path: inset(0 0 0 56% round var(--r)); }
  46.67%, 50%    { clip-path: inset(0 0 0 84% round var(--r)); }
  56.67%         { clip-path: inset(0 0 0 56% round var(--r)); }
  63.33%, 66.67% { clip-path: inset(0 28% 0 56% round var(--r)); }
  73.33%         { clip-path: inset(0 28% 0 28% round var(--r)); }
  80%, 83.33%    { clip-path: inset(0 56% 0 28% round var(--r)); }
  90%            { clip-path: inset(0 56% 0 0 round var(--r)); }
  96.67%         { clip-path: inset(0 84% 0 0 round var(--r)); }
}

.ldr-shuffling-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 4.5);
  --g: calc(var(--s) / 2.4);
  position: relative;
  width: calc(var(--g) * 2 + var(--d));
  height: var(--s);
}
.ldr-shuffling-dots span {
  position: absolute;
  top: calc(50% - var(--d) / 2);
  left: 0;
  width: var(--d);
  height: var(--d);
  animation: ldr-shuffling-dots-x 2.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.ldr-shuffling-dots span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  animation: ldr-shuffling-dots-y 2.4s infinite;
}
.ldr-shuffling-dots span:nth-child(2),
.ldr-shuffling-dots span:nth-child(2)::before { animation-delay: -1.6s; }
.ldr-shuffling-dots span:nth-child(3),
.ldr-shuffling-dots span:nth-child(3)::before { animation-delay: -0.8s; }
@keyframes ldr-shuffling-dots-x {
  0%, 80%, 100%                  { transform: translateX(0); }
  13.33%, 16.67%, 63.33%, 66.67% { transform: translateX(var(--g)); }
  30%, 50%                       { transform: translateX(calc(var(--g) * 2)); }
}
@keyframes ldr-shuffling-dots-y {
  0%, 13.33%, 16.67%, 30%, 50%, 63.33%, 66.67%, 80%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
  }
  6.67%, 23.33% {
    transform: translateY(calc(var(--g) / -2));
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
  }
  56.67%, 73.33% {
    transform: translateY(calc(var(--g) / 2));
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
  }
}

.ldr-morphing-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 7);
  position: relative;
  width: calc(var(--s) * 1.6);
  height: var(--s);
  animation: ldr-morphing-dots-turn 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-morphing-dots span {
  position: absolute;
  top: calc(50% - var(--d) / 2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-morphing-dots-shape 2.8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes ldr-morphing-dots-shape {
  0%, 15%, 85%, 100% { transform: translate(calc(var(--lx) * var(--s)), 0); }
  40%, 60%           { transform: translate(calc(var(--cx) * var(--s)), calc(var(--cy) * var(--s))); }
}
@keyframes ldr-morphing-dots-turn {
  0%, 30%   { transform: rotate(0deg); }
  80%, 100% { transform: rotate(180deg); }
}

.ldr-leapfrog-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 4.5);
  --g: calc(var(--s) / 2.6);
  position: relative;
  width: calc(var(--g) * 2 + var(--d));
  height: var(--s);
}
.ldr-leapfrog-dots span {
  position: absolute;
  bottom: calc(var(--s) / 8);
  left: 0;
  width: var(--d);
  height: var(--d);
  animation: ldr-leapfrog-dots-x 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-leapfrog-dots span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: ldr-leapfrog-dots-y 1.8s infinite;
}
.ldr-leapfrog-dots span:nth-child(2),
.ldr-leapfrog-dots span:nth-child(2)::before { animation-delay: -0.6s; }
.ldr-leapfrog-dots span:nth-child(3),
.ldr-leapfrog-dots span:nth-child(3)::before { animation-delay: -1.2s; }
@keyframes ldr-leapfrog-dots-x {
  0%, 90%, 100%  { transform: translateX(calc(var(--g) * 2)); }
  23.33%, 33.33% { transform: translateX(var(--g)); }
  56.67%, 66.67% { transform: translateX(0); }
}
@keyframes ldr-leapfrog-dots-y {
  0%, 58%, 100% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-in-out; }
  66.67% { transform: translateY(0) scale(1.25, 0.72); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  78.33% { transform: translateY(calc(var(--s) * -0.55)) scale(0.9, 1.12); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  90%    { transform: translateY(0) scale(1.3, 0.7); animation-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1); }
  96%    { transform: translateY(0) scale(1, 1); }
}

.ldr-splitting-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 3.4);
  --g: calc(var(--s) * 0.27);
  position: relative;
  width: var(--s);
  height: var(--s);
  animation: ldr-splitting-dots-turn 2.2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.ldr-splitting-dots span {
  position: absolute;
  top: calc(50% - var(--d) / 2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-splitting-dots-split 2.2s cubic-bezier(0.7, 0, 0.25, 1.25) infinite;
}
@keyframes ldr-splitting-dots-split {
  0%, 8%, 94%, 100% { transform: translate(0, 0); }
  30%, 42%          { transform: translate(calc(var(--x) * var(--g)), 0); }
  64%, 74%          { transform: translate(calc(var(--x) * var(--g)), calc(var(--y) * var(--g))); }
}
@keyframes ldr-splitting-dots-turn {
  0%, 74%   { transform: rotate(0deg); }
  94%, 100% { transform: rotate(90deg); }
}

.ldr-colliding-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 3.5);
  position: relative;
  width: calc(var(--s) * 1.5);
  height: calc(var(--s) * 0.6);
}
.ldr-colliding-dots::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--d) * 0.6);
  left: calc(50% - var(--d) * 0.6);
  width: calc(var(--d) * 1.2);
  height: calc(var(--d) * 1.2);
  border: calc(var(--s) / 24) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  border-radius: 50%;
  opacity: 0;
  animation: ldr-colliding-dots-shock 1.1s ease-out infinite;
}
.ldr-colliding-dots span {
  position: absolute;
  top: calc(50% - var(--d) / 2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  transform-origin: calc(50% - var(--dir) * 50%) 50%;
  animation: ldr-colliding-dots-hit 1.1s infinite;
}
@keyframes ldr-colliding-dots-hit {
  0%, 100% {
    transform: translateX(calc(var(--dir) * var(--s) * 0.6)) scale(1, 1);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  42% {
    transform: translateX(calc(var(--dir) * var(--d) / 2)) scale(1, 1);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateX(calc(var(--dir) * var(--d) / 2)) scale(0.7, 1.22);
    animation-timing-function: ease-in-out;
  }
  58% {
    transform: translateX(calc(var(--dir) * var(--d) / 2)) scale(1.06, 0.95);
    animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
  }
}
@keyframes ldr-colliding-dots-shock {
  0%, 44% { transform: scale(0.6); opacity: 0; }
  48%     { transform: scale(0.8); opacity: 1; }
  75%     { transform: scale(1.9); opacity: 0; }
  100%    { transform: scale(1.9); opacity: 0; }
}

.ldr-spiral-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-spiral-dots span {
  position: absolute;
  inset: 0;
  rotate: calc(var(--i) * -24deg);
  animation: ldr-spiral-dots-spin 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i) * 0.07s - 2s);
}
.ldr-spiral-dots span::before {
  content: "";
  --d: calc(var(--s) * (0.06 + var(--i) * 0.009));
  position: absolute;
  top: calc(50% - var(--s) * (0.07 + var(--i) * 0.038) - var(--d) / 2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
}
@keyframes ldr-spiral-dots-spin {
  to { transform: rotate(360deg); }
}

.ldr-dot-burst {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 6.5);
  position: relative;
  width: var(--s);
  height: var(--s);
  animation: ldr-dot-burst-drift 1.6s linear infinite;
}
.ldr-dot-burst::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--d));
  left: calc(50% - var(--d));
  width: calc(var(--d) * 2);
  height: calc(var(--d) * 2);
  border-radius: 50%;
  background: var(--c);
  transform: scale(0);
  animation: ldr-dot-burst-core 1.6s infinite;
}
.ldr-dot-burst span {
  position: absolute;
  top: calc(50% - var(--d) / 2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  rotate: calc(var(--i) * 45deg);
  animation: ldr-dot-burst-fly 1.6s infinite;
}
@keyframes ldr-dot-burst-fly {
  0%, 82%, 100% { transform: translateY(calc(var(--s) * -0.42)) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  38%, 50%      { transform: translateY(0) scale(0.4); animation-timing-function: cubic-bezier(0.15, 0.9, 0.3, 1.25); }
}
@keyframes ldr-dot-burst-core {
  0%, 32%  { transform: scale(0); }
  40%      { transform: scale(0.9); animation-timing-function: ease-in; }
  49%      { transform: scale(1.15); animation-timing-function: cubic-bezier(0.3, 0, 0.8, 0.2); }
  56%, 100% { transform: scale(0); }
}
@keyframes ldr-dot-burst-drift {
  to { transform: rotate(45deg); }
}

.ldr-flipping-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 3.6);
  display: flex;
  gap: calc(var(--s) / 8);
  perspective: calc(var(--s) * 3);
}
.ldr-flipping-dots span {
  position: relative;
  width: var(--d);
  height: var(--d);
  transform-style: preserve-3d;
  animation: ldr-flipping-dots-flip 2s cubic-bezier(0.6, -0.2, 0.3, 1.25) infinite;
  animation-delay: calc(var(--i) * 0.12s - 2s);
}
.ldr-flipping-dots span::before,
.ldr-flipping-dots span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.ldr-flipping-dots span::before {
  background: var(--c);
}
.ldr-flipping-dots span::after {
  border: calc(var(--s) / 16) solid var(--c);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
  transform: rotateY(180deg);
}
@keyframes ldr-flipping-dots-flip {
  0%, 12%   { transform: rotateY(0deg); }
  38%, 62%  { transform: rotateY(180deg); }
  88%, 100% { transform: rotateY(360deg); }
}

.ldr-pendulum-wave-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 7.5);
  position: relative;
  width: calc(var(--s) * 1.1);
  height: calc(var(--s) + var(--d));
}
.ldr-pendulum-wave-dots::before {
  content: "";
  position: absolute;
  top: calc(var(--d) / -4);
  left: calc(50% - var(--d) / 4);
  width: calc(var(--d) / 2);
  height: calc(var(--d) / 2);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
.ldr-pendulum-wave-dots span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: calc(var(--l) * var(--s));
  border-left: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  transform-origin: 50% 0;
  transform: rotate(26deg);
  animation: ldr-pendulum-wave-dots-swing calc(var(--t) * 1s) cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.ldr-pendulum-wave-dots span::after {
  content: "";
  position: absolute;
  bottom: calc(var(--d) / -2);
  left: calc(var(--d) / -2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
}
@keyframes ldr-pendulum-wave-dots-swing {
  from { transform: rotate(26deg); }
  to   { transform: rotate(-26deg); }
}

.ldr-carousel-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 3.6);
  position: relative;
  width: calc(var(--s) * 1.4);
  height: calc(var(--s) * 0.6);
}
.ldr-carousel-dots span {
  position: absolute;
  top: calc(50% - var(--d) / 2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  animation:
    ldr-carousel-dots-x 0.9s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate,
    ldr-carousel-dots-layer 1.8s step-end infinite;
}
.ldr-carousel-dots span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  animation: ldr-carousel-dots-depth 1.8s infinite;
}
.ldr-carousel-dots span:nth-child(2),
.ldr-carousel-dots span:nth-child(2)::before { animation-delay: -0.6s; }
.ldr-carousel-dots span:nth-child(3),
.ldr-carousel-dots span:nth-child(3)::before { animation-delay: -1.2s; }
@keyframes ldr-carousel-dots-x {
  from { transform: translateX(calc(var(--s) * -0.5)); }
  to   { transform: translateX(calc(var(--s) * 0.5)); }
}
@keyframes ldr-carousel-dots-layer {
  0%   { z-index: 2; }
  50%  { z-index: 1; }
}
@keyframes ldr-carousel-dots-depth {
  0%, 50%, 100% { transform: scale(0.75); opacity: 0.7; animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
  25%           { transform: scale(1.12); opacity: 1; animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
  75%           { transform: scale(0.45); opacity: 0.35; animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
}

.ldr-ellipsis-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: center;
  gap: calc(var(--s) / 7);
  height: calc(var(--s) / 1.5);
}
.ldr-ellipsis-dots span {
  width: calc(var(--s) / 4.5);
  height: calc(var(--s) / 4.5);
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: ldr-ellipsis-dots-count 2.2s infinite;
  animation-delay: calc(var(--i) * 0.25s - 2.2s);
}
@keyframes ldr-ellipsis-dots-count {
  0%       { transform: translateY(0) scale(0); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.6); }
  9%, 55%  { transform: translateY(0) scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4); }
  66%      { transform: translateY(calc(var(--s) / -4)) scale(0.5); opacity: 0; }
  100%     { transform: translateY(0) scale(0); opacity: 0; }
}

.ldr-chasing-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  animation: ldr-chasing-dots-spin 2s linear infinite;
}
.ldr-chasing-dots span {
  position: absolute;
  top: 0;
  left: 21%;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  background: var(--c);
  animation: ldr-chasing-dots-grow 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-chasing-dots span:last-child {
  top: auto;
  bottom: 0;
  animation-delay: -1s;
}
@keyframes ldr-chasing-dots-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-chasing-dots-grow {
  0%, 100% { transform: scale(0); }
  50%      { transform: scale(1); }
}

.ldr-tumbling-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 3.4);
  --g: calc(var(--d) * 1.08);
  position: relative;
  width: calc(var(--s) * 1.4);
  height: calc(var(--g) + var(--d));
  animation: ldr-tumbling-dots-drift 1.6s linear infinite;
}
.ldr-tumbling-dots span {
  position: absolute;
  bottom: 0;
  left: calc(50% - var(--g) * 0.8 - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  transform-origin: calc(50% + var(--g)) 50%;
  animation: ldr-tumbling-dots-first 1.6s infinite;
}
.ldr-tumbling-dots span:last-child {
  left: calc(50% + var(--g) * 0.2 - var(--d) / 2);
  animation-name: ldr-tumbling-dots-second;
}
@keyframes ldr-tumbling-dots-first {
  0%        { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1); }
  38%, 100% { transform: rotate(180deg); }
}
@keyframes ldr-tumbling-dots-second {
  0%, 50%   { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1); }
  88%, 100% { transform: rotate(180deg); }
}
@keyframes ldr-tumbling-dots-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--g) * -2)); }
}

.ldr-dot-grid-ripple {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  place-items: center;
  width: calc(var(--s) * 1.1);
  height: calc(var(--s) * 1.1);
}
.ldr-dot-grid-ripple span {
  width: calc(var(--s) / 6.5);
  height: calc(var(--s) / 6.5);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-dot-grid-ripple-pulse 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: calc(var(--d) * 0.24s - 1.8s);
}
@keyframes ldr-dot-grid-ripple-pulse {
  0%, 40%, 100% { transform: scale(0.45); opacity: 0.3; }
  14%           { transform: scale(1.1); opacity: 1; }
}

.ldr-snake-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --u: calc(var(--s) / 4);
  position: relative;
  width: var(--s);
  height: var(--s);
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent) 66%, transparent 72%) 0 0 / 25% 25%;
}
.ldr-snake-dots span {
  position: absolute;
  top: calc(var(--u) * 0.16);
  left: calc(var(--u) * 0.16);
  width: calc(var(--u) * 0.68);
  height: calc(var(--u) * 0.68);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--k) * 0.22);
  animation: ldr-snake-dots-move 2.24s steps(1, end) infinite;
  animation-delay: calc(var(--k) * 0.14s - 2.24s);
}
@keyframes ldr-snake-dots-move {
  0%, 100% { transform: translate(0, 0); }
  6.25%  { transform: translate(var(--u), 0); }
  12.5%  { transform: translate(calc(var(--u) * 2), 0); }
  18.75% { transform: translate(calc(var(--u) * 3), 0); }
  25%    { transform: translate(calc(var(--u) * 3), var(--u)); }
  31.25% { transform: translate(calc(var(--u) * 3), calc(var(--u) * 2)); }
  37.5%  { transform: translate(calc(var(--u) * 3), calc(var(--u) * 3)); }
  43.75% { transform: translate(calc(var(--u) * 2), calc(var(--u) * 3)); }
  50%    { transform: translate(var(--u), calc(var(--u) * 3)); }
  56.25% { transform: translate(0, calc(var(--u) * 3)); }
  62.5%  { transform: translate(0, calc(var(--u) * 2)); }
  68.75% { transform: translate(var(--u), calc(var(--u) * 2)); }
  75%    { transform: translate(calc(var(--u) * 2), calc(var(--u) * 2)); }
  81.25% { transform: translate(calc(var(--u) * 2), var(--u)); }
  87.5%  { transform: translate(var(--u), var(--u)); }
  93.75% { transform: translate(0, var(--u)); }
}

.ldr-stacking-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 3.6);
  --h: calc(var(--s) * 0.75);
  position: relative;
  width: calc(var(--d) * 2);
  height: calc(var(--h) + var(--d) * 1.9);
}
.ldr-stacking-dots span {
  position: absolute;
  bottom: 0;
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  animation: ldr-stacking-dots-drop 2.4s cubic-bezier(0.55, 0, 1, 0.45) infinite;
}
.ldr-stacking-dots span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: ldr-stacking-dots-show 2.4s cubic-bezier(0, 0.7, 0.3, 1) infinite;
}
@keyframes ldr-stacking-dots-drop {
  0%, 100% { transform: translate(calc(var(--x) * var(--d)), calc(var(--y) * var(--d) - var(--h))); }
  15%      { transform: translate(calc(var(--x) * var(--d)), calc(var(--y) * var(--d) - var(--h) * clamp(0, var(--i), 1))); }
  30%      { transform: translate(calc(var(--x) * var(--d)), calc(var(--y) * var(--d) - var(--h) * clamp(0, var(--i) - 1, 1))); }
  45%, 72% { transform: translate(calc(var(--x) * var(--d)), calc(var(--y) * var(--d))) scale(1); }
  86%      { transform: translate(calc(var(--x) * var(--d)), calc(var(--y) * var(--d))) scale(0); }
}
@keyframes ldr-stacking-dots-show {
  0%, 86%, 100% { opacity: 0; }
  15%           { opacity: calc(1 - clamp(0, var(--i), 1)); }
  30%           { opacity: calc(1 - clamp(0, var(--i) - 1, 1)); }
  45%, 72%      { opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
}

.ldr-trampoline-dot {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 4);
  --t: calc(var(--s) / 18);
  position: relative;
  width: calc(var(--s) * 1.3);
  height: calc(var(--s) * 1.2);
}
.ldr-trampoline-dot::before,
.ldr-trampoline-dot::after {
  content: "";
  position: absolute;
  bottom: calc(var(--s) * 0.2);
  width: 50.5%;
  height: var(--t);
  border-radius: var(--t);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
}
.ldr-trampoline-dot::before {
  --dir: 1;
  left: 0;
  transform-origin: calc(var(--t) / 2) 50%;
  animation: ldr-trampoline-dot-bed 1.2s infinite;
}
.ldr-trampoline-dot::after {
  --dir: -1;
  right: 0;
  transform-origin: calc(100% - var(--t) / 2) 50%;
  animation: ldr-trampoline-dot-bed 1.2s infinite;
}
.ldr-trampoline-dot span {
  position: absolute;
  bottom: calc(var(--s) * 0.2 + var(--t));
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: ldr-trampoline-dot-ball 1.2s infinite;
}
@keyframes ldr-trampoline-dot-ball {
  0%, 100% { transform: translateY(calc(var(--s) * -0.62)) scale(1, 1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  40%      { transform: translateY(0) scale(0.92, 1.08); animation-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1); }
  50%      { transform: translateY(calc(var(--s) * 0.13)) scale(1.28, 0.74); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5); }
  60%      { transform: translateY(0) scale(0.9, 1.12); animation-timing-function: cubic-bezier(0.1, 0.5, 0.5, 1); }
}
@keyframes ldr-trampoline-dot-bed {
  0%, 40%, 84%, 100% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1); }
  50%      { transform: rotate(calc(var(--dir) * 12deg)); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5); }
  60%      { transform: rotate(0deg); animation-timing-function: ease-out; }
  67%      { transform: rotate(calc(var(--dir) * -4deg)); animation-timing-function: ease-in-out; }
  75%      { transform: rotate(calc(var(--dir) * 1.5deg)); animation-timing-function: ease-in-out; }
}

.ldr-figure-eight-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 5.5);
  position: relative;
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) * 1.2);
}
.ldr-figure-eight-dots span {
  position: absolute;
  top: calc(50% - var(--d) / 2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  animation: ldr-figure-eight-dots-y 1s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
  animation-delay: calc(var(--k) * 0.1s - 0.6s);
}
.ldr-figure-eight-dots span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--k) * 0.15);
  animation: ldr-figure-eight-dots-x 0.5s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
  animation-delay: calc(var(--k) * 0.1s - 0.85s);
}
@keyframes ldr-figure-eight-dots-y {
  from { transform: translateY(calc(var(--s) * -0.5)); }
  to   { transform: translateY(calc(var(--s) * 0.5)); }
}
@keyframes ldr-figure-eight-dots-x {
  from { transform: translateX(calc(var(--s) * -0.34)) scale(calc(1 - var(--k) * 0.12)); }
  to   { transform: translateX(calc(var(--s) * 0.34)) scale(calc(1 - var(--k) * 0.12)); }
}

.ldr-shuttle-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 4.5);
  --w: calc(var(--s) * 1.5);
  --k: calc(var(--d) * 0.6);
  position: relative;
  width: calc(var(--w) + var(--d));
  height: var(--d);
}
.ldr-shuttle-dots span {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--i) * 0.14);
  animation: ldr-shuttle-dots-shuttle 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i) * 0.06s - 1.8s);
}
@keyframes ldr-shuttle-dots-shuttle {
  0%, 15%, 100% { transform: translateX(calc(var(--i) * var(--k))); }
  50%, 65%      { transform: translateX(calc(var(--w) - var(--i) * var(--k))); }
}

.ldr-jelly-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--s) / 6);
  height: calc(var(--s) / 2);
}
.ldr-jelly-dots span {
  width: calc(var(--s) / 3.6);
  height: calc(var(--s) / 3.6);
  border-radius: 50%;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: ldr-jelly-dots-wobble 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.16s - 1.5s);
}
@keyframes ldr-jelly-dots-wobble {
  0%, 52%, 100% { transform: scale(1, 1); }
  9%  { transform: scale(1.38, 0.66); }
  19% { transform: scale(0.8, 1.28); }
  28% { transform: scale(1.14, 0.88); }
  37% { transform: scale(0.95, 1.06); }
  45% { transform: scale(1.02, 0.98); }
}

.ldr-triangle-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 4);
  --x: calc(var(--s) * 0.33);
  --y: calc(var(--s) * 0.285);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-triangle-dots span {
  position: absolute;
  top: calc(50% - var(--d) / 2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  animation: ldr-triangle-dots-path 1.8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.ldr-triangle-dots span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  animation: ldr-triangle-dots-size 0.6s ease-in-out infinite;
}
.ldr-triangle-dots span:nth-child(2),
.ldr-triangle-dots span:nth-child(2)::before { animation-delay: -0.6s; }
.ldr-triangle-dots span:nth-child(3),
.ldr-triangle-dots span:nth-child(3)::before { animation-delay: -1.2s; }
@keyframes ldr-triangle-dots-path {
  0%, 91.67%, 100% { transform: translate(0, calc(var(--y) * -1)); }
  25%, 33.33%      { transform: translate(var(--x), var(--y)); }
  58.33%, 66.67%   { transform: translate(calc(var(--x) * -1), var(--y)); }
}
@keyframes ldr-triangle-dots-size {
  0%, 75%, 100% { transform: scale(1); }
  37.5%         { transform: scale(0.6); }
}

.ldr-popping-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 3.2);
  display: flex;
  gap: calc(var(--s) / 5);
}
.ldr-popping-dots span {
  position: relative;
  width: var(--d);
  height: var(--d);
}
.ldr-popping-dots span::before,
.ldr-popping-dots span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.ldr-popping-dots span::before {
  background: var(--c);
  animation: ldr-popping-dots-fill 2.1s infinite;
  animation-delay: calc(var(--i) * 0.7s - 2.1s);
}
.ldr-popping-dots span::after {
  border: calc(var(--s) / 22) solid var(--c);
  opacity: 0;
  animation: ldr-popping-dots-ring 2.1s infinite;
  animation-delay: calc(var(--i) * 0.7s - 2.1s);
}
@keyframes ldr-popping-dots-fill {
  0%       { transform: scale(0); animation-timing-function: cubic-bezier(0.3, 1.4, 0.6, 1); }
  12%      { transform: scale(0.35); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  70%      { transform: scale(0.95); animation-timing-function: ease-out; }
  74%      { transform: scale(1.12, 1.02); animation-timing-function: ease-in; }
  76%, 100% { transform: scale(0); }
}
@keyframes ldr-popping-dots-ring {
  0%, 74%  { transform: scale(0.9); opacity: 0; }
  76%      { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  94%, 100% { transform: scale(1.7); opacity: 0; }
}

.ldr-dot-circle-fill {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 6.5);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-dot-circle-fill span {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--i) * 30deg));
}
.ldr-dot-circle-fill span::before,
.ldr-dot-circle-fill span::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
}
.ldr-dot-circle-fill span::before {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
}
.ldr-dot-circle-fill span::after {
  background: var(--c);
  transform: scale(0);
  animation: ldr-dot-circle-fill-pop 2.4s infinite;
  animation-delay: calc(var(--i) * 0.1s - 2.4s);
}
@keyframes ldr-dot-circle-fill-pop {
  0%        { transform: scale(0); animation-timing-function: cubic-bezier(0.3, 1.6, 0.6, 1); }
  8%, 50%   { transform: scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  58%, 100% { transform: scale(0); }
}

.ldr-marching-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 4);
  position: relative;
  width: calc(var(--s) * 1.7);
  height: var(--d);
}
.ldr-marching-dots span {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--d);
  height: var(--d);
  animation: ldr-marching-dots-move 1.5s linear infinite;
}
.ldr-marching-dots span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  animation: ldr-marching-dots-size 0.75s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.ldr-marching-dots span:nth-child(2),
.ldr-marching-dots span:nth-child(2)::before { animation-delay: -0.3s; }
.ldr-marching-dots span:nth-child(3),
.ldr-marching-dots span:nth-child(3)::before { animation-delay: -0.6s; }
.ldr-marching-dots span:nth-child(4),
.ldr-marching-dots span:nth-child(4)::before { animation-delay: -0.9s; }
.ldr-marching-dots span:nth-child(5),
.ldr-marching-dots span:nth-child(5)::before { animation-delay: -1.2s; }
@keyframes ldr-marching-dots-move {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--s) * 1.7 - var(--d))); }
}
@keyframes ldr-marching-dots-size {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.ldr-sunflower-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 1.2);
  animation: ldr-sunflower-dots-turn 9.6s linear infinite;
}
.ldr-sunflower-dots span {
  --d: calc(var(--s) * (0.09 + var(--i) * 0.0022));
  position: absolute;
  top: calc(50% - var(--d) / 2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  transform: rotate(calc(var(--i) * 137.508deg)) translateY(calc(var(--r) * var(--s) * -1.2));
}
.ldr-sunflower-dots span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  transform: scale(0);
  animation: ldr-sunflower-dots-bloom 3.2s infinite;
  animation-delay: calc(var(--i) * 0.05s - 3.2s);
}
@keyframes ldr-sunflower-dots-bloom {
  0%        { transform: scale(0); animation-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1); }
  10%, 58%  { transform: scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  70%, 100% { transform: scale(0); }
}
@keyframes ldr-sunflower-dots-turn {
  to { transform: rotate(360deg); }
}

.ldr-dot-tunnel {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-dot-tunnel::before {
  content: "";
  position: absolute;
  top: calc(50% - var(--s) / 24);
  left: calc(50% - var(--s) / 24);
  width: calc(var(--s) / 12);
  height: calc(var(--s) / 12);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
.ldr-dot-tunnel span {
  position: absolute;
  inset: 0;
  border: calc(var(--s) / 11) dotted var(--c);
  border-radius: 50%;
  opacity: 0;
  animation: ldr-dot-tunnel-zoom 1.8s cubic-bezier(0.6, 0, 0.9, 0.5) infinite;
}
.ldr-dot-tunnel span:nth-child(2) { animation-delay: -0.6s; }
.ldr-dot-tunnel span:nth-child(3) { animation-delay: -1.2s; }
@keyframes ldr-dot-tunnel-zoom {
  0%   { transform: scale(0.12) rotate(0deg); opacity: 0; }
  30%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: scale(1.15) rotate(60deg); opacity: 0; }
}

.ldr-binary-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  gap: calc(var(--s) / 7);
}
.ldr-binary-dots span {
  width: calc(var(--s) / 4);
  height: calc(var(--s) / 4);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-binary-dots-bit calc(var(--p) * 0.25s) steps(1, end) infinite;
}
@keyframes ldr-binary-dots-bit {
  0%        { opacity: 0.25; transform: scale(0.7); }
  50%, 100% { opacity: 1; transform: scale(1); }
}

.ldr-rotating-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) / 10);
  width: var(--s);
  height: var(--s);
  animation: ldr-rotating-dots-spin 1.2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.ldr-rotating-dots span {
  width: calc(var(--s) / 4.5);
  height: calc(var(--s) / 4.5);
  border-radius: 50%;
  background: var(--c);
}
.ldr-rotating-dots span:nth-child(2) {
  width: calc(var(--s) / 3.4);
  height: calc(var(--s) / 3.4);
}
@keyframes ldr-rotating-dots-spin {
  to { transform: rotate(360deg); }
}

.ldr-music-equalizer {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--s) / 12);
  width: var(--s);
  height: var(--s);
}
.ldr-music-equalizer span {
  flex: 1;
  height: 100%;
  border-radius: calc(var(--s) / 24);
  background: var(--c);
  transform-origin: 50% 100%;
  animation: ldr-music-equalizer-play 1.3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-music-equalizer span:nth-child(2) { animation-duration: 0.9s; animation-delay: -0.4s; }
.ldr-music-equalizer span:nth-child(3) { animation-duration: 1.5s; animation-delay: -1.1s; }
.ldr-music-equalizer span:nth-child(4) { animation-duration: 1.1s; animation-delay: -0.2s; }
.ldr-music-equalizer span:nth-child(5) { animation-duration: 1.7s; animation-delay: -0.8s; }
@keyframes ldr-music-equalizer-play {
  0%, 100% { transform: scaleY(0.25); }
  15%      { transform: scaleY(0.9); }
  30%      { transform: scaleY(0.45); }
  48%      { transform: scaleY(1); }
  62%      { transform: scaleY(0.35); }
  80%      { transform: scaleY(0.75); }
}

.ldr-sound-wave {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: center;
  gap: calc(var(--s) / 14);
  height: var(--s);
}
.ldr-sound-wave span {
  width: calc(var(--s) / 14);
  height: calc(var(--s) * var(--h));
  border-radius: var(--s);
  background: var(--c);
  animation: ldr-sound-wave-pulse 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: calc(var(--d) * 0.13s - 1.1s);
}
@keyframes ldr-sound-wave-pulse {
  0%, 100% { transform: scaleY(0.3); opacity: 0.55; }
  50%      { transform: scaleY(1); opacity: 1; }
}

.ldr-ecg-heartbeat-line {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 2.4);
  height: calc(var(--s) * 0.8);
}
.ldr-ecg-heartbeat-line svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ldr-ecg-heartbeat-line-track { stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent); }
.ldr-ecg-heartbeat-line-tail {
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  stroke-dasharray: 45 100;
  animation: ldr-ecg-heartbeat-line-tail 1.8s linear infinite;
}
.ldr-ecg-heartbeat-line-head {
  stroke: var(--c);
  stroke-dasharray: 18 127;
  animation: ldr-ecg-heartbeat-line-head 1.8s linear infinite;
}
@keyframes ldr-ecg-heartbeat-line-tail {
  from { stroke-dashoffset: 45; }
  to   { stroke-dashoffset: -100; }
}
@keyframes ldr-ecg-heartbeat-line-head {
  from { stroke-dashoffset: 18; }
  to   { stroke-dashoffset: -127; }
}

.ldr-barcode-scanner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --k: color-mix(in srgb, currentColor 72%, transparent);
  --l: calc(var(--s) / 4);
  --t: calc(var(--s) / 16);
  position: relative;
  width: calc(var(--s) * 1.5);
  height: var(--s);
}
.ldr-barcode-scanner::before {
  content: "";
  position: absolute;
  inset: calc(var(--s) / 6) calc(var(--s) / 5);
  background: linear-gradient(90deg,
    var(--k) 0 4%, transparent 0 7%, var(--k) 0 9%, transparent 0 13%,
    var(--k) 0 19%, transparent 0 22%, var(--k) 0 24%, transparent 0 29%,
    var(--k) 0 31%, transparent 0 33%, var(--k) 0 39%, transparent 0 43%,
    var(--k) 0 45%, transparent 0 48%, var(--k) 0 54%, transparent 0 56%,
    var(--k) 0 58%, transparent 0 63%, var(--k) 0 67%, transparent 0 69%,
    var(--k) 0 71%, transparent 0 75%, var(--k) 0 81%, transparent 0 84%,
    var(--k) 0 86%, transparent 0 90%, var(--k) 0 92%, transparent 0 95%,
    var(--k) 0 100%);
}
.ldr-barcode-scanner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) 0 0 / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) 0 100% / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) 0 100% / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--t) var(--l);
  background-repeat: no-repeat;
}
.ldr-barcode-scanner-laser {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(var(--s) / 10);
  right: calc(var(--s) / 10);
  height: calc(var(--s) / 18);
  border-radius: var(--s);
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 6) calc(var(--s) / 40) var(--c);
  animation: ldr-barcode-scanner-sweep 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ldr-barcode-scanner-sweep {
  0%, 100% { transform: translateY(calc(var(--s) * 0.14)); }
  50%      { transform: translateY(calc(var(--s) * 0.8)); }
}

.ldr-knight-rider-scanner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --p: calc(var(--s) / 4.4);
  --g: calc(var(--s) / 18);
  position: relative;
  overflow: hidden;
  width: calc(var(--p) * 8 - var(--g));
  height: calc(var(--s) / 3.2);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(var(--p) - var(--g)), transparent 0 var(--p));
  mask: repeating-linear-gradient(90deg, #000 0 calc(var(--p) - var(--g)), transparent 0 var(--p));
}
.ldr-knight-rider-scanner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--p) * 3);
  background: linear-gradient(90deg, transparent, var(--c) 38% 62%, transparent);
  animation: ldr-knight-rider-scanner-sweep 0.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes ldr-knight-rider-scanner-sweep {
  from { transform: translateX(calc(var(--p) * -1)); }
  to   { transform: translateX(calc(var(--p) * 6)); }
}

.ldr-audio-waveform {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 2.4);
  height: calc(var(--s) * 0.93);
}
.ldr-audio-waveform svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ldr-audio-waveform-track { fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent); }
.ldr-audio-waveform-fill {
  fill: var(--c);
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: ldr-audio-waveform-play 2.6s linear infinite;
}
@keyframes ldr-audio-waveform-play {
  0%       { transform: scaleX(0); opacity: 1; }
  78%      { transform: scaleX(1); opacity: 1; }
  86%      { transform: scaleX(1); opacity: 1; }
  96%, 100% { transform: scaleX(1); opacity: 0; }
}

.ldr-signal-strength {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--s) / 10);
  width: var(--s);
  height: var(--s);
}
.ldr-signal-strength span {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: calc(var(--s) / 20);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-signal-strength span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  animation: ldr-signal-strength-fill 2s infinite;
}
.ldr-signal-strength span:nth-child(1) { height: 30%; }
.ldr-signal-strength span:nth-child(2) { height: 53%; }
.ldr-signal-strength span:nth-child(3) { height: 76%; }
.ldr-signal-strength span:nth-child(4) { height: 100%; }
.ldr-signal-strength span:nth-child(2)::before { animation-delay: 0.2s; }
.ldr-signal-strength span:nth-child(3)::before { animation-delay: 0.4s; }
.ldr-signal-strength span:nth-child(4)::before { animation-delay: 0.6s; }
@keyframes ldr-signal-strength-fill {
  0%   { transform: scaleY(0); opacity: 1; animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
  15%  { transform: scaleY(1); opacity: 1; }
  54%  { transform: scaleY(1); opacity: 1; }
  66%  { transform: scaleY(1); opacity: 0; }
  66.1%, 100% { transform: scaleY(0); opacity: 0; }
}

.ldr-bar-chart {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--s) / 9);
  box-sizing: border-box;
  width: calc(var(--s) * 1.2);
  height: var(--s);
  padding: 0 calc(var(--s) / 10) calc(var(--s) / 12);
}
.ldr-bar-chart::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--s) / 20);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
}
.ldr-bar-chart span {
  flex: 1;
  height: var(--h);
  border-radius: calc(var(--s) / 20) calc(var(--s) / 20) 0 0;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  animation: ldr-bar-chart-grow 2.4s infinite;
}
.ldr-bar-chart span:nth-child(1) { --h: 42%; }
.ldr-bar-chart span:nth-child(2) { --h: 68%; animation-delay: 0.15s; }
.ldr-bar-chart span:nth-child(3) { --h: 54%; animation-delay: 0.3s; }
.ldr-bar-chart span:nth-child(4) { --h: 92%; animation-delay: 0.45s; background: var(--c); }
@keyframes ldr-bar-chart-grow {
  0%       { transform: scaleY(0); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  22%      { transform: scaleY(1); }
  68%      { transform: scaleY(1); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  80%, 100% { transform: scaleY(0); }
}

.ldr-jumping-bars {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--s) / 8);
  width: calc(var(--s) * 1.3);
  height: var(--s);
}
.ldr-jumping-bars span {
  width: calc(var(--s) / 6);
  height: calc(var(--s) / 2.6);
  border-radius: calc(var(--s) / 20);
  background: var(--c);
  transform-origin: 50% 100%;
  animation: ldr-jumping-bars-jump 1.2s infinite;
}
.ldr-jumping-bars span:nth-child(2) { animation-delay: 0.12s; }
.ldr-jumping-bars span:nth-child(3) { animation-delay: 0.24s; }
.ldr-jumping-bars span:nth-child(4) { animation-delay: 0.36s; }
@keyframes ldr-jumping-bars-jump {
  0%, 74%, 100% { transform: translateY(0) scale(1, 1); }
  10% { transform: translateY(0) scale(1.28, 0.7); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  18% { transform: translateY(calc(var(--s) * -0.26)) scale(0.84, 1.2); animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); }
  32% { transform: translateY(calc(var(--s) * -0.52)) scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  46% { transform: translateY(calc(var(--s) * -0.14)) scale(0.88, 1.14); animation-timing-function: linear; }
  52% { transform: translateY(0) scale(1.34, 0.64); animation-timing-function: ease-out; }
  61% { transform: translateY(0) scale(0.92, 1.08); animation-timing-function: ease-in-out; }
  68% { transform: translateY(0) scale(1.04, 0.97); }
}

.ldr-wavy-line {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  overflow: hidden;
  width: calc(var(--s) * 2);
  height: calc(var(--s) * 0.6);
  -webkit-mask: linear-gradient(90deg, transparent, #000 22% 78%, transparent);
  mask: linear-gradient(90deg, transparent, #000 22% 78%, transparent);
}
.ldr-wavy-line svg {
  display: block;
  width: calc(var(--s) * 2.5);
  height: calc(var(--s) * 0.5);
  margin-top: calc(var(--s) * 0.05);
  overflow: visible;
  fill: none;
  stroke: var(--c);
  stroke-width: 3;
  stroke-linecap: round;
  animation: ldr-wavy-line-scroll 0.9s linear infinite;
}
@keyframes ldr-wavy-line-scroll {
  to { transform: translateX(-20%); }
}

.ldr-code-lines {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.3);
  height: var(--s);
}
.ldr-code-lines-code {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  height: 100%;
  animation: ldr-code-lines-type 4s steps(7, end) -1.3s infinite;
}
.ldr-code-lines-code span {
  display: flex;
  align-items: center;
  gap: calc(var(--s) / 14);
  padding-left: calc(var(--in, 0) * var(--s) / 5);
}
.ldr-code-lines-code i {
  width: calc(var(--s) * var(--w));
  height: calc(var(--s) / 10);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
}
.ldr-code-lines-code .ldr-code-lines-key { background: var(--c); }
.ldr-code-lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s) / 16);
  height: calc(var(--s) / 7);
  border-radius: calc(var(--s) / 60);
  background: var(--c);
  animation: ldr-code-lines-caret 4s steps(7, end) -1.3s infinite;
}
@keyframes ldr-code-lines-type {
  0%, 2%       { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0, 0 20%, 0 20%); opacity: 1; }
  14%          { clip-path: polygon(0 0, 100% 0, 100% 0, 76% 0, 76% 20%, 0 20%); }
  14.01%, 17%  { clip-path: polygon(0 0, 100% 0, 100% 20%, 15% 20%, 15% 40%, 0 40%); animation-timing-function: steps(8, end); }
  30%          { clip-path: polygon(0 0, 100% 0, 100% 20%, 93% 20%, 93% 40%, 0 40%); }
  30.01%, 33%  { clip-path: polygon(0 0, 100% 0, 100% 40%, 31% 40%, 31% 60%, 0 60%); animation-timing-function: steps(6, end); }
  46%          { clip-path: polygon(0 0, 100% 0, 100% 40%, 92% 40%, 92% 60%, 0 60%); }
  46.01%, 49%  { clip-path: polygon(0 0, 100% 0, 100% 60%, 15% 60%, 15% 80%, 0 80%); animation-timing-function: steps(7, end); }
  60%          { clip-path: polygon(0 0, 100% 0, 100% 60%, 80% 60%, 80% 80%, 0 80%); }
  60.01%, 63%  { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%, 0 100%, 0 100%); animation-timing-function: steps(2, end); }
  67%, 84%     { clip-path: polygon(0 0, 100% 0, 100% 80%, 17% 80%, 17% 100%, 0 100%); opacity: 1; animation-timing-function: ease-in; }
  94%, 100%    { clip-path: polygon(0 0, 100% 0, 100% 80%, 17% 80%, 17% 100%, 0 100%); opacity: 0; }
}
@keyframes ldr-code-lines-caret {
  0%, 2%       { transform: translate(0, calc(var(--s) * 0.03)); opacity: 1; }
  14%          { transform: translate(calc(var(--s) * 0.99), calc(var(--s) * 0.03)); }
  14.01%, 17%  { transform: translate(calc(var(--s) * 0.2), calc(var(--s) * 0.23)); animation-timing-function: steps(8, end); }
  30%          { transform: translate(calc(var(--s) * 1.21), calc(var(--s) * 0.23)); }
  30.01%, 33%  { transform: translate(calc(var(--s) * 0.4), calc(var(--s) * 0.43)); animation-timing-function: steps(6, end); }
  46%          { transform: translate(calc(var(--s) * 1.2), calc(var(--s) * 0.43)); }
  46.01%, 49%  { transform: translate(calc(var(--s) * 0.2), calc(var(--s) * 0.63)); animation-timing-function: steps(7, end); }
  60%          { transform: translate(calc(var(--s) * 1.04), calc(var(--s) * 0.63)); }
  60.01%, 63%  { transform: translate(0, calc(var(--s) * 0.83)); animation-timing-function: steps(2, end); }
  67%          { transform: translate(calc(var(--s) * 0.22), calc(var(--s) * 0.83)); opacity: 1; animation-timing-function: step-end; }
  71%          { opacity: 0; animation-timing-function: step-end; }
  75%          { opacity: 1; animation-timing-function: step-end; }
  79%          { opacity: 0; animation-timing-function: step-end; }
  83%, 84%     { opacity: 1; animation-timing-function: ease-in; }
  94%, 100%    { transform: translate(calc(var(--s) * 0.22), calc(var(--s) * 0.83)); opacity: 0; }
}

.ldr-square-line-chase {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --t: calc(var(--s) / 10);
  position: relative;
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) * 0.9);
}
.ldr-square-line-chase::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--t) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 15%, transparent);
  border-radius: calc(var(--t) / 2);
}
.ldr-square-line-chase span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--t);
  border-radius: calc(var(--t) / 2);
  background: var(--c);
  transform: rotate(calc(var(--i) * 90deg));
  transform-origin: 50% calc(var(--s) * 0.45);
  clip-path: inset(0 100% 0 0);
  animation: ldr-square-line-chase-draw 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i) * 0.6s - 2.4s);
}
@keyframes ldr-square-line-chase-draw {
  0%        { clip-path: inset(0 100% 0 0); }
  25%       { clip-path: inset(0 0 0 0); }
  50%, 100% { clip-path: inset(0 0 0 100%); }
}

.ldr-flip-bars-3d {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  gap: calc(var(--s) / 12);
  height: calc(var(--s) * 0.9);
  perspective: calc(var(--s) * 3);
}
.ldr-flip-bars-3d span {
  position: relative;
  width: calc(var(--s) / 5);
  transform-style: preserve-3d;
  animation: ldr-flip-bars-3d-flip 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-flip-bars-3d span::before,
.ldr-flip-bars-3d span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--s) / 24);
  background: var(--c);
  backface-visibility: hidden;
}
.ldr-flip-bars-3d span::after {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  transform: rotateY(180deg);
}
.ldr-flip-bars-3d span:nth-child(2) { animation-delay: 0.09s; }
.ldr-flip-bars-3d span:nth-child(3) { animation-delay: 0.18s; }
.ldr-flip-bars-3d span:nth-child(4) { animation-delay: 0.27s; }
.ldr-flip-bars-3d span:nth-child(5) { animation-delay: 0.36s; }
@keyframes ldr-flip-bars-3d-flip {
  0%, 8%    { transform: rotateY(0deg); }
  38%, 58%  { transform: rotateY(180deg); }
  88%, 100% { transform: rotateY(360deg); }
}

.ldr-vu-meter {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  gap: calc(var(--s) / 7);
  height: var(--s);
}
.ldr-vu-meter span {
  position: relative;
  width: calc(var(--s) / 2.6);
  -webkit-mask: repeating-linear-gradient(to top, #000 0 calc(var(--s) / 14), transparent 0 calc(var(--s) / 10));
  mask: repeating-linear-gradient(to top, #000 0 calc(var(--s) / 14), transparent 0 calc(var(--s) / 10));
}
.ldr-vu-meter span::before,
.ldr-vu-meter span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
}
.ldr-vu-meter span::after {
  background: linear-gradient(to top, color-mix(in srgb, var(--ldr-color, #3b82f6) 65%, transparent), var(--c) 70%);
  animation: ldr-vu-meter-level 1.6s step-end infinite;
}
.ldr-vu-meter span:nth-child(2)::after {
  animation-duration: 1.36s;
  animation-delay: -0.5s;
}
@keyframes ldr-vu-meter-level {
  0%, 100% { clip-path: inset(60% 0 0 0); }
  8%   { clip-path: inset(30% 0 0 0); }
  16%  { clip-path: inset(20% 0 0 0); }
  24%  { clip-path: inset(40% 0 0 0); }
  32%  { clip-path: inset(50% 0 0 0); }
  40%  { clip-path: inset(20% 0 0 0); }
  48%  { clip-path: inset(0% 0 0 0); }
  56%  { clip-path: inset(30% 0 0 0); }
  64%  { clip-path: inset(50% 0 0 0); }
  72%  { clip-path: inset(70% 0 0 0); }
  80%  { clip-path: inset(40% 0 0 0); }
  88%  { clip-path: inset(50% 0 0 0); }
}

.ldr-tally-marks {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) / 7);
  width: calc(var(--s) * 1.2);
  height: var(--s);
  animation: ldr-tally-marks-fade 3s -0.9s infinite;
}
.ldr-tally-marks span {
  width: calc(var(--s) / 11);
  height: var(--h);
  border-radius: var(--s);
  background: var(--c);
  transform: rotate(var(--r)) scaleY(0);
  transform-origin: 50% 0;
  animation: ldr-tally-marks-stroke 3s -0.9s infinite;
}
.ldr-tally-marks span:nth-child(1) { --r: 4deg; --h: 78%; }
.ldr-tally-marks span:nth-child(2) { --r: -2deg; --h: 84%; animation-delay: -0.75s; }
.ldr-tally-marks span:nth-child(3) { --r: 3deg; --h: 80%; animation-delay: -0.6s; }
.ldr-tally-marks span:nth-child(4) { --r: -3deg; --h: 86%; animation-delay: -0.45s; }
.ldr-tally-marks span:nth-child(5) {
  position: absolute;
  top: calc(var(--s) * 0.74);
  left: calc(var(--s) * 0.05);
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) / 11);
  transform: rotate(-26deg) scaleX(0);
  transform-origin: 0 50%;
  animation-name: ldr-tally-marks-slash;
}
@keyframes ldr-tally-marks-fade {
  0%, 16%   { opacity: 0; }
  18%, 88%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes ldr-tally-marks-stroke {
  0%, 19%   { transform: rotate(var(--r)) scaleY(0); animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
  25%, 100% { transform: rotate(var(--r)) scaleY(1); }
}
@keyframes ldr-tally-marks-slash {
  0%, 42%   { transform: rotate(-26deg) scaleX(0); animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
  49%, 100% { transform: rotate(-26deg) scaleX(1); }
}

.ldr-ascii-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) / 8);
  height: calc(var(--s) * 0.8);
  border-radius: var(--s);
  background: var(--c);
  animation: ldr-ascii-spinner-tick 1s steps(8) infinite;
}
@keyframes ldr-ascii-spinner-tick {
  to { transform: rotate(360deg); }
}

.ldr-rotating-lines-grid {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  width: var(--s);
  height: var(--s);
}
.ldr-rotating-lines-grid span {
  width: calc(var(--s) / 4);
  height: calc(var(--s) / 14);
  border-radius: var(--s);
  background: var(--c);
  animation: ldr-rotating-lines-grid-turn 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--d) * 0.1s - 1.6s);
}
@keyframes ldr-rotating-lines-grid-turn {
  to { transform: rotate(360deg); }
}

.ldr-crossing-lines {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-crossing-lines span {
  position: absolute;
  top: calc(50% - var(--s) / 18);
  left: 0;
  width: 100%;
  height: calc(var(--s) / 9);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  animation: ldr-crossing-lines-b 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-crossing-lines span:first-child {
  z-index: 1;
  background: var(--c);
  animation-name: ldr-crossing-lines-a;
}
@keyframes ldr-crossing-lines-a {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(90deg); }
  100% { transform: rotate(180deg); }
}
@keyframes ldr-crossing-lines-b {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-90deg); }
  100% { transform: rotate(-180deg); }
}

@property --ldr-morse-code-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.ldr-morse-code {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --u: calc(var(--s) / 10);
  position: relative;
  width: calc(var(--u) * 23);
  height: calc(var(--u) * 1.3);
  animation: ldr-morse-code-send 3.4s linear -1.1s infinite;
}
.ldr-morse-code span {
  position: absolute;
  top: 0;
  left: calc(var(--a) * var(--u));
  width: calc(var(--n) * var(--u));
  height: 100%;
  border-radius: var(--s);
  background: var(--c);
  transform-origin: 0 50%;
  transform: scaleX(clamp(0, (var(--ldr-morse-code-t) - var(--a)) / var(--n), 1));
  opacity: clamp(0.5, 1.5 - (var(--ldr-morse-code-t) - var(--a) - var(--n)) * 0.25, 1);
}
@keyframes ldr-morse-code-send {
  0%   { --ldr-morse-code-t: -3; opacity: 1; }
  86%  { opacity: 1; }
  96%  { opacity: 0; }
  100% { --ldr-morse-code-t: 40; opacity: 0; }
}

.ldr-radio-tuner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --tw: calc(var(--s) / 24);
  position: relative;
  width: calc(var(--s) * 2 + var(--tw));
  height: calc(var(--s) * 0.9);
}
.ldr-radio-tuner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent) 0 var(--tw), transparent 0 calc(var(--s) / 2)),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 38%, transparent) 0 var(--tw), transparent 0 calc(var(--s) / 10)) 0 100% / 100% 50% no-repeat;
}
.ldr-radio-tuner span {
  position: absolute;
  bottom: 0;
  left: calc(var(--tw) / 2 - var(--s) / 32);
  width: calc(var(--s) / 16);
  height: 100%;
  border-radius: var(--s);
  background: var(--c);
  animation: ldr-radio-tuner-seek 4.8s infinite;
}
.ldr-radio-tuner span::before,
.ldr-radio-tuner span::after {
  content: "";
  position: absolute;
  top: calc(var(--s) / -14);
  left: calc(50% - var(--s) / 14);
  width: calc(var(--s) / 7);
  height: calc(var(--s) / 7);
  border-radius: 50%;
  background: var(--c);
}
.ldr-radio-tuner span::after {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  animation: ldr-radio-tuner-lock 4.8s ease-out infinite;
}
@keyframes ldr-radio-tuner-seek {
  0%, 16%  { transform: translateX(calc(var(--s) * 0.3)); animation-timing-function: cubic-bezier(0.34, 1.35, 0.64, 1); }
  28%, 41% { transform: translateX(calc(var(--s) * 1.4)); animation-timing-function: cubic-bezier(0.34, 1.35, 0.64, 1); }
  53%, 66% { transform: translateX(calc(var(--s) * 0.8)); animation-timing-function: cubic-bezier(0.34, 1.35, 0.64, 1); }
  78%, 91% { transform: translateX(calc(var(--s) * 1.7)); animation-timing-function: cubic-bezier(0.34, 1.35, 0.64, 1); }
  100%     { transform: translateX(calc(var(--s) * 0.3)); }
}
@keyframes ldr-radio-tuner-lock {
  0%, 26%, 51%, 76%  { transform: scale(1); opacity: 0.9; }
  12%, 38%, 63%, 88% { transform: scale(2.6); opacity: 0; }
  25.9%, 50.9%, 75.9%, 99.9% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0.9; }
}

.ldr-sine-wave-bars {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: center;
  gap: calc(var(--s) / 16);
  height: var(--s);
}
.ldr-sine-wave-bars span {
  width: calc(var(--s) / 16);
  height: calc(var(--s) / 3.2);
  border-radius: var(--s);
  background: var(--c);
  animation: ldr-sine-wave-bars-sway 1.6s infinite;
  animation-delay: calc(var(--i) * 0.1333s - 1.6s);
}
@keyframes ldr-sine-wave-bars-sway {
  0%, 100% { transform: translateY(calc(var(--s) * -0.3)) scaleY(0.85); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
  25%      { transform: translateY(0) scaleY(1.2); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
  50%      { transform: translateY(calc(var(--s) * 0.3)) scaleY(0.85); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
  75%      { transform: translateY(0) scaleY(1.2); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
}

.ldr-piano-keys {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) / 4.2);
  --g: calc(var(--s) / 28);
  position: relative;
  display: flex;
  gap: var(--g);
  height: calc(var(--s) * 0.9);
}
.ldr-piano-keys span {
  position: relative;
  width: var(--w);
  overflow: hidden;
  border-radius: 0 0 calc(var(--s) / 20) calc(var(--s) / 20);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
  animation: ldr-piano-keys-press 1.4s infinite;
  animation-delay: calc(var(--i) * 0.14s);
}
.ldr-piano-keys span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  opacity: 0;
  animation: ldr-piano-keys-light 1.4s infinite;
  animation-delay: calc(var(--i) * 0.14s);
}
.ldr-piano-keys i {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(var(--k) * (var(--w) + var(--g)) - var(--g) / 2 - var(--w) * 0.3);
  width: calc(var(--w) * 0.6);
  height: 56%;
  border-radius: 0 0 calc(var(--s) / 30) calc(var(--s) / 30);
  background: color-mix(in srgb, var(--c) 30%, currentColor);
}
@keyframes ldr-piano-keys-press {
  0%, 100% { transform: translateY(0); }
  6%       { transform: translateY(calc(var(--s) / 30)); animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
  30%      { transform: translateY(0); }
}
@keyframes ldr-piano-keys-light {
  0%, 100% { opacity: 0; }
  6%       { opacity: 1; animation-timing-function: ease-out; }
  40%      { opacity: 0; }
}

.ldr-plucked-string {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  display: flex;
  align-items: center;
  width: calc(var(--s) * 2);
  height: var(--s);
}
.ldr-plucked-string::before,
.ldr-plucked-string::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--s) / 6);
  left: calc(var(--s) / -12);
  width: calc(var(--s) / 12);
  height: calc(var(--s) / 3);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
.ldr-plucked-string::after {
  left: auto;
  right: calc(var(--s) / -12);
}
.ldr-plucked-string span {
  flex: 1;
  height: calc(var(--s) / 16);
  margin: 0 calc(var(--s) / -120);
  background: var(--c);
  animation: ldr-plucked-string-pluck 2.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.ldr-plucked-string span:first-child { border-radius: var(--s) 0 0 var(--s); }
.ldr-plucked-string span:last-child { border-radius: 0 var(--s) var(--s) 0; }
@keyframes ldr-plucked-string-pluck {
  0%        { transform: translateY(0) rotate(0deg); }
  14%       { transform: translateY(calc(var(--k) * var(--s) * -0.3)) rotate(calc(var(--q) * -27deg)); }
  20%       { transform: translateY(calc(var(--k) * var(--s) * -0.3)) rotate(calc(var(--q) * -27deg)); }
  24%       { transform: translateY(calc(var(--k) * var(--s) * 0.26)) rotate(calc(var(--q) * 23.4deg)); }
  28%       { transform: translateY(calc(var(--k) * var(--s) * -0.2)) rotate(calc(var(--q) * -18deg)); }
  32%       { transform: translateY(calc(var(--k) * var(--s) * 0.15)) rotate(calc(var(--q) * 13.5deg)); }
  36%       { transform: translateY(calc(var(--k) * var(--s) * -0.1)) rotate(calc(var(--q) * -9deg)); }
  40%       { transform: translateY(calc(var(--k) * var(--s) * 0.065)) rotate(calc(var(--q) * 5.85deg)); }
  44%       { transform: translateY(calc(var(--k) * var(--s) * -0.035)) rotate(calc(var(--q) * -3.15deg)); }
  48%       { transform: translateY(calc(var(--k) * var(--s) * 0.015)) rotate(calc(var(--q) * 1.35deg)); }
  52%, 100% { transform: translateY(0) rotate(0deg); }
}

.ldr-pong {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --pw: calc(var(--s) / 10);
  --ph: calc(var(--s) / 2.8);
  --b: calc(var(--s) / 8);
  position: relative;
  width: calc(var(--s) * 1.8);
  height: var(--s);
}
.ldr-pong::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--s) / 60);
  width: calc(var(--s) / 30);
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 0 calc(var(--s) / 12), transparent 0 calc(var(--s) / 6));
}
.ldr-pong span {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pw);
  height: var(--ph);
  border-radius: calc(var(--s) / 40);
  background: var(--c);
  animation: ldr-pong-left 3.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.ldr-pong span + span {
  left: auto;
  right: 0;
  animation-name: ldr-pong-right;
}
.ldr-pong i {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--b);
  height: var(--b);
  border-radius: calc(var(--s) / 50);
  background: var(--c);
  animation: ldr-pong-ball 3.2s linear infinite;
}
@keyframes ldr-pong-ball {
  0%, 100% { transform: translate(var(--pw), calc(var(--s) * 0.219)); }
  25%      { transform: translate(calc(var(--s) * 1.8 - var(--pw) - var(--b)), calc(var(--s) * 0.656)); }
  50%      { transform: translate(var(--pw), calc(var(--s) * 0.525)); }
  75%      { transform: translate(calc(var(--s) * 1.8 - var(--pw) - var(--b)), calc(var(--s) * 0.131)); }
}
@keyframes ldr-pong-left {
  0%, 100% { transform: translateY(calc(var(--s) * 0.103)); }
  50%      { transform: translateY(calc(var(--s) * 0.409)); }
}
@keyframes ldr-pong-right {
  0%, 100% { transform: translateY(calc(var(--s) * 0.278)); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
  25%      { transform: translateY(calc(var(--s) * 0.54)); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  75%      { transform: translateY(calc(var(--s) * 0.015)); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
}

.ldr-twisting-ribbon {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: center;
  gap: calc(var(--s) / 36);
  height: var(--s);
}
.ldr-twisting-ribbon span {
  position: relative;
  width: calc(var(--s) / 14);
  height: calc(var(--s) * 0.8);
  transform-style: preserve-3d;
  animation: ldr-twisting-ribbon-twist 2.4s linear infinite;
  animation-delay: calc(var(--i) * 0.15s - 2.4s);
}
.ldr-twisting-ribbon span::before,
.ldr-twisting-ribbon span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--s);
  background: var(--c);
  backface-visibility: hidden;
}
.ldr-twisting-ribbon span::after {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  transform: rotateX(180deg);
}
@keyframes ldr-twisting-ribbon-twist {
  to { transform: rotateX(360deg); }
}

.ldr-stack-shuffle {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 0.78);
}
.ldr-stack-shuffle span {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w);
  height: calc(var(--s) / 7);
  border-radius: var(--s);
  background: var(--c);
  animation: ldr-stack-shuffle-cycle 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-stack-shuffle span:nth-child(2) { animation-delay: -0.8s; }
.ldr-stack-shuffle span:nth-child(3) { animation-delay: -1.6s; }
@keyframes ldr-stack-shuffle-cycle {
  0%       { transform: translate(-30%, 0); opacity: 0; }
  8%, 25%  { transform: translate(0, 0); opacity: 1; }
  33%, 58% { transform: translate(0, calc(var(--s) * 0.32)); opacity: 0.55; }
  66%, 91% { transform: translate(0, calc(var(--s) * 0.64)); opacity: 0.25; }
  100%     { transform: translate(30%, calc(var(--s) * 0.64)); opacity: 0; }
}

.ldr-sorting-bars {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --p: calc(var(--s) * 0.3);
  position: relative;
  width: calc(var(--s) * 1.1);
  height: var(--s);
  animation: ldr-sorting-bars-fade 3.6s infinite;
}
.ldr-sorting-bars span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(var(--s) * 0.2);
  height: var(--h);
  border-radius: calc(var(--s) / 24) calc(var(--s) / 24) 0 0;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-sorting-bars span:nth-child(1) { animation-name: ldr-sorting-bars-a; }
.ldr-sorting-bars span:nth-child(2) { animation-name: ldr-sorting-bars-b; }
.ldr-sorting-bars span:nth-child(3) { animation-name: ldr-sorting-bars-c; }
.ldr-sorting-bars span:nth-child(4) { animation-name: ldr-sorting-bars-d; }
@keyframes ldr-sorting-bars-fade {
  0%        { opacity: 0; }
  4%, 86%   { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes ldr-sorting-bars-a {
  0%   { transform: translateX(0) scaleY(1); opacity: 0.45; }
  6%   { opacity: 0.45; }
  9%   { opacity: 1; }
  10%  { transform: translateX(0) scaleY(1); }
  20%  { transform: translateX(var(--p)) scaleY(1); }
  21%  { opacity: 1; }
  24%  { opacity: 0.45; }
  42%  { opacity: 0.45; }
  45%  { opacity: 1; }
  46%  { transform: translateX(var(--p)) scaleY(1); }
  56%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  66%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  69%  { transform: translateX(calc(var(--p) * 2)) scaleY(1.1); }
  73%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  100% { transform: translateX(calc(var(--p) * 2)) scaleY(1); opacity: 1; }
}
@keyframes ldr-sorting-bars-b {
  0%   { transform: translateX(var(--p)) scaleY(1); opacity: 0.45; }
  6%   { opacity: 0.45; }
  9%   { opacity: 1; }
  10%  { transform: translateX(var(--p)) scaleY(1); }
  20%  { transform: translateX(0) scaleY(1); }
  21%  { opacity: 1; }
  24%  { opacity: 0.45; }
  57%  { opacity: 0.45; }
  60%  { transform: translateX(0) scaleY(1); opacity: 1; }
  63%  { transform: translateX(0) scaleY(1.1); }
  67%  { transform: translateX(0) scaleY(1); }
  100% { transform: translateX(0) scaleY(1); opacity: 1; }
}
@keyframes ldr-sorting-bars-c {
  0%   { transform: translateX(calc(var(--p) * 2)) scaleY(1); opacity: 0.45; }
  24%  { opacity: 0.45; }
  27%  { opacity: 1; }
  28%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  38%  { transform: translateX(calc(var(--p) * 3)) scaleY(1); }
  39%  { opacity: 1; }
  42%  { opacity: 0.45; }
  57%  { opacity: 0.45; }
  60%  { opacity: 1; }
  69%  { transform: translateX(calc(var(--p) * 3)) scaleY(1); }
  72%  { transform: translateX(calc(var(--p) * 3)) scaleY(1.1); }
  76%  { transform: translateX(calc(var(--p) * 3)) scaleY(1); }
  100% { transform: translateX(calc(var(--p) * 3)) scaleY(1); opacity: 1; }
}
@keyframes ldr-sorting-bars-d {
  0%   { transform: translateX(calc(var(--p) * 3)) scaleY(1); opacity: 0.45; }
  24%  { opacity: 0.45; }
  27%  { opacity: 1; }
  28%  { transform: translateX(calc(var(--p) * 3)) scaleY(1); }
  38%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  46%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  56%  { transform: translateX(var(--p)) scaleY(1); }
  63%  { transform: translateX(var(--p)) scaleY(1); }
  66%  { transform: translateX(var(--p)) scaleY(1.1); }
  70%  { transform: translateX(var(--p)) scaleY(1); }
  100% { transform: translateX(var(--p)) scaleY(1); opacity: 1; }
}

.ldr-zigzag-fold {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) / 3);
  --t: calc(var(--s) / 10);
  position: relative;
  width: calc(var(--s) * 1.7);
  height: var(--s);
}
.ldr-zigzag-fold i {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: ldr-zigzag-fold-lift 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-zigzag-fold i + i { scale: -1 1; }
.ldr-zigzag-fold span {
  position: absolute;
  top: calc(var(--t) / -2);
  left: calc(var(--t) / -2);
  width: var(--w);
  height: var(--t);
  border-radius: var(--s);
  background: var(--c);
  transform-origin: calc(var(--t) / 2) 50%;
  animation: ldr-zigzag-fold-a 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-zigzag-fold span span {
  top: 0;
  left: calc(100% - var(--t));
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
  animation-name: ldr-zigzag-fold-b;
}
.ldr-zigzag-fold span span span {
  background: var(--c);
  animation-name: ldr-zigzag-fold-c;
}
@keyframes ldr-zigzag-fold-a {
  0%, 12%, 100% { transform: rotate(0deg); }
  45%, 62%      { transform: rotate(70deg); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
}
@keyframes ldr-zigzag-fold-b {
  0%, 12%, 100% { transform: rotate(0deg); }
  45%, 62%      { transform: rotate(-140deg); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
}
@keyframes ldr-zigzag-fold-c {
  0%, 12%, 100% { transform: rotate(0deg); }
  45%, 62%      { transform: rotate(140deg); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
}
@keyframes ldr-zigzag-fold-lift {
  0%, 12%, 100% { transform: translateY(0); }
  45%, 62%      { transform: translateY(calc((var(--w) - var(--t)) * -0.47)); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
}

.ldr-line-chart {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 1.8);
  height: var(--s);
}
.ldr-line-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ldr-line-chart-axis {
  fill: none;
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
}
.ldr-line-chart-area {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  animation: ldr-line-chart-area 2.8s ease infinite;
}
.ldr-line-chart-line {
  fill: none;
  stroke: var(--c);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  animation: ldr-line-chart-draw 2.8s infinite;
}
.ldr-line-chart-dot {
  fill: var(--c);
  transform-box: fill-box;
  transform-origin: center;
  animation: ldr-line-chart-dot 2.8s infinite;
}
@keyframes ldr-line-chart-draw {
  0%        { stroke-dashoffset: 100; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  45%, 84%  { stroke-dashoffset: 0; opacity: 1; animation-timing-function: ease-in; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ldr-line-chart-area {
  0%, 30%   { opacity: 0; }
  55%, 84%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes ldr-line-chart-dot {
  0%, 42%   { transform: scale(0); opacity: 1; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  52%, 84%  { transform: scale(1); opacity: 1; animation-timing-function: ease-in; }
  95%, 100% { transform: scale(1); opacity: 0; }
}

.ldr-chevron-arrows {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: center;
  gap: calc(var(--s) / 16);
  height: var(--s);
}
.ldr-chevron-arrows span {
  width: calc(var(--s) / 2.6);
  height: calc(var(--s) / 2.6);
  border-top: calc(var(--s) / 9) solid var(--c);
  border-right: calc(var(--s) / 9) solid var(--c);
  border-top-right-radius: calc(var(--s) / 14);
  opacity: 0.15;
  transform: translateX(calc(var(--s) / -14)) rotate(45deg);
  animation: ldr-chevron-arrows-run 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-chevron-arrows span:nth-child(2) { animation-delay: 0.15s; }
.ldr-chevron-arrows span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ldr-chevron-arrows-run {
  0%, 70%, 100% { opacity: 0.15; transform: translateX(calc(var(--s) / -14)) rotate(45deg); }
  30%           { opacity: 1; transform: translateX(0) rotate(45deg); }
}

.ldr-material-linear-progress {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 6);
  height: calc(var(--s) / 10);
  overflow: hidden;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
}
.ldr-material-linear-progress > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
.ldr-material-linear-progress > span > span {
  position: absolute;
  inset: 0;
  background: var(--c);
}
.ldr-material-linear-progress-primary {
  left: -145.166611%;
  animation: ldr-material-linear-progress-primary-move 2s linear infinite;
}
.ldr-material-linear-progress-primary > span {
  animation: ldr-material-linear-progress-primary-scale 2s linear infinite;
}
.ldr-material-linear-progress-secondary {
  left: -54.888891%;
  animation: ldr-material-linear-progress-secondary-move 2s linear infinite;
}
.ldr-material-linear-progress-secondary > span {
  animation: ldr-material-linear-progress-secondary-scale 2s linear infinite;
}
@keyframes ldr-material-linear-progress-primary-move {
  0%     { transform: translateX(0); }
  20%    { transform: translateX(0); animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819); }
  59.15% { transform: translateX(83.67142%); animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352); }
  100%   { transform: translateX(200.611057%); }
}
@keyframes ldr-material-linear-progress-primary-scale {
  0%     { transform: scaleX(0.08); }
  36.65% { transform: scaleX(0.08); animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1); }
  69.15% { transform: scaleX(0.661479); animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1); }
  100%   { transform: scaleX(0.08); }
}
@keyframes ldr-material-linear-progress-secondary-move {
  0%     { transform: translateX(0); animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685); }
  25%    { transform: translateX(37.651913%); animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712); }
  48.35% { transform: translateX(84.386165%); animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026); }
  100%   { transform: translateX(160.277782%); }
}
@keyframes ldr-material-linear-progress-secondary-scale {
  0%     { transform: scaleX(0.08); animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971); }
  19.15% { transform: scaleX(0.457104); animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315); }
  44.15% { transform: scaleX(0.72796); animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179); }
  100%   { transform: scaleX(0.08); }
}

.ldr-striped-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  box-sizing: border-box;
  width: calc(var(--s) * 6);
  height: calc(var(--s) / 3.5);
  padding: calc(var(--s) / 28);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 15%, transparent);
}
.ldr-striped-progress-bar span {
  display: block;
  height: 100%;
  border-radius: var(--s);
  background-color: var(--c);
  background-image: linear-gradient(135deg, rgb(255 255 255 / 0.3) 25%, transparent 25% 50%, rgb(255 255 255 / 0.3) 50% 75%, transparent 75%);
  background-size: calc(var(--s) / 2.5) calc(var(--s) / 2.5);
  animation:
    ldr-striped-progress-bar-scroll 0.7s linear infinite,
    ldr-striped-progress-bar-fill 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ldr-striped-progress-bar-scroll {
  to { background-position: calc(var(--s) / 2.5) 0; }
}
@keyframes ldr-striped-progress-bar-fill {
  0%       { clip-path: inset(0 100% 0 0 round var(--s)); }
  18%      { clip-path: inset(0 74% 0 0 round var(--s)); }
  30%      { clip-path: inset(0 66% 0 0 round var(--s)); }
  50%      { clip-path: inset(0 34% 0 0 round var(--s)); }
  62%      { clip-path: inset(0 26% 0 0 round var(--s)); }
  80%, 90% { clip-path: inset(0 0 0 0 round var(--s)); opacity: 1; }
  100%     { clip-path: inset(0 0 0 0 round var(--s)); opacity: 0; }
}

@property --ldr-percentage-progress-bar-p {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
.ldr-percentage-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) * 6);
  --h: calc(var(--s) / 8);
  position: relative;
  width: var(--w);
  height: calc(var(--s) * 0.9);
  animation: ldr-percentage-progress-bar-count 4s infinite;
}
.ldr-percentage-progress-bar::before,
.ldr-percentage-progress-bar-fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--h);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-percentage-progress-bar-fill {
  background: var(--c);
  clip-path: inset(0 calc(100% - var(--ldr-percentage-progress-bar-p) * 1%) 0 0 round var(--s));
}
.ldr-percentage-progress-bar-label {
  position: absolute;
  left: 0;
  bottom: calc(var(--h) + var(--s) / 5);
  width: calc(var(--s) * 0.95);
  padding: calc(var(--s) / 14) 0;
  border-radius: calc(var(--s) / 8);
  background: var(--c);
  color: #fff;
  font: 600 calc(var(--s) / 4) / 1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transform: translateX(calc(var(--ldr-percentage-progress-bar-p) * var(--w) / 100 - 50%));
}
.ldr-percentage-progress-bar-label::before {
  counter-reset: ldr-percentage-progress-bar var(--ldr-percentage-progress-bar-p);
  content: counter(ldr-percentage-progress-bar) "%";
}
.ldr-percentage-progress-bar-label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: calc(var(--s) / 14) solid transparent;
  border-top-color: var(--c);
  transform: translateX(-50%);
}
.ldr-percentage-progress-bar-fill,
.ldr-percentage-progress-bar-label {
  animation: ldr-percentage-progress-bar-fade 4s infinite;
}
@keyframes ldr-percentage-progress-bar-count {
  0%        { --ldr-percentage-progress-bar-p: 0; animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1); }
  22%       { --ldr-percentage-progress-bar-p: 24; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  38%       { --ldr-percentage-progress-bar-p: 41; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
  60%       { --ldr-percentage-progress-bar-p: 83; animation-timing-function: cubic-bezier(0.5, 0, 0.4, 1); }
  76%, 100% { --ldr-percentage-progress-bar-p: 100; }
}
@keyframes ldr-percentage-progress-bar-fade {
  0%, 88%   { opacity: 1; }
  97%, 100% { opacity: 0; }
}

@property --ldr-stepper-progress-bar-t {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
.ldr-stepper-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) * 0.6);
  --b: calc(var(--s) / 16);
  --t: var(--ldr-stepper-progress-bar-t);
  display: flex;
  align-items: center;
  width: calc(var(--s) * 6);
  animation: ldr-stepper-progress-bar-run 4.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-stepper-progress-bar-step {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--b) color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  animation: ldr-stepper-progress-bar-pop 4.8s calc(var(--i) * 1.056s) infinite;
}
.ldr-stepper-progress-bar-step::before,
.ldr-stepper-progress-bar-step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.ldr-stepper-progress-bar-step::before {
  box-shadow: inset 0 0 0 var(--b) var(--c);
  background: radial-gradient(circle, var(--c) 0 26%, transparent 29%);
  opacity: clamp(0, calc((var(--t) - var(--i) + 0.05) * 20), 1);
}
.ldr-stepper-progress-bar-step::after {
  background: var(--c);
  opacity: clamp(0, calc((var(--t) - var(--i) - 0.95) * 20), 1);
}
.ldr-stepper-progress-bar-step > span {
  position: relative;
  z-index: 1;
  width: calc(var(--d) * 0.2);
  height: calc(var(--d) * 0.4);
  margin-top: calc(var(--d) * -0.08);
  border: solid #fff;
  border-width: 0 var(--b) var(--b) 0;
  transform: rotate(45deg);
  opacity: clamp(0, calc((var(--t) - var(--i) - 0.95) * 20), 1);
}
.ldr-stepper-progress-bar-line {
  position: relative;
  flex: 1;
  height: var(--b);
  margin: 0 calc(var(--s) / 10);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  overflow: hidden;
}
.ldr-stepper-progress-bar-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  transform-origin: left;
  transform: scaleX(clamp(0, calc(var(--t) - var(--i)), 1));
}
@keyframes ldr-stepper-progress-bar-run {
  0%        { --ldr-stepper-progress-bar-t: 0; opacity: 0; }
  4%        { opacity: 1; }
  8%        { --ldr-stepper-progress-bar-t: 0; }
  22%, 30%  { --ldr-stepper-progress-bar-t: 1; }
  44%, 52%  { --ldr-stepper-progress-bar-t: 2; }
  66%, 72%  { --ldr-stepper-progress-bar-t: 3; }
  82%, 90%  { --ldr-stepper-progress-bar-t: 4; opacity: 1; }
  98%, 100% { --ldr-stepper-progress-bar-t: 4; opacity: 0; }
}
@keyframes ldr-stepper-progress-bar-pop {
  0%, 12%, 100% { transform: scale(1); }
  4%            { transform: scale(1.22); }
  8%            { transform: scale(0.94); }
}

.ldr-buffering-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) * 6);
  position: relative;
  width: var(--w);
  height: calc(var(--s) / 10);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
}
.ldr-buffering-progress-bar::before,
.ldr-buffering-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: left;
}
.ldr-buffering-progress-bar::before {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 36%, transparent);
  animation: ldr-buffering-progress-bar-buffer 6s infinite;
}
.ldr-buffering-progress-bar::after {
  background: var(--c);
  animation: ldr-buffering-progress-bar-play 6s linear infinite;
}
.ldr-buffering-progress-bar span {
  position: absolute;
  top: 50%;
  left: calc(var(--s) / -7);
  width: calc(var(--s) / 3.5);
  height: calc(var(--s) / 3.5);
  margin-top: calc(var(--s) / -7);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 calc(var(--s) / 14) color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  animation: ldr-buffering-progress-bar-knob 6s linear infinite;
}
@keyframes ldr-buffering-progress-bar-buffer {
  0%        { transform: scaleX(0.04); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  4%, 24%   { transform: scaleX(0.32); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  28%, 44%  { transform: scaleX(0.58); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  49%, 66%  { transform: scaleX(0.86); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  69%, 92%  { transform: scaleX(1); opacity: 1; }
  100%      { transform: scaleX(1); opacity: 0; }
}
@keyframes ldr-buffering-progress-bar-play {
  0%        { transform: scaleX(0); }
  18%, 26%  { transform: scaleX(0.3); }
  41%, 47%  { transform: scaleX(0.55); }
  64%, 68%  { transform: scaleX(0.83); }
  78%, 92%  { transform: scaleX(1); opacity: 1; }
  100%      { transform: scaleX(1); opacity: 0; }
}
@keyframes ldr-buffering-progress-bar-knob {
  0%        { transform: translateX(0); }
  18%, 26%  { transform: translateX(calc(var(--w) * 0.3)) scale(1.2); }
  41%, 47%  { transform: translateX(calc(var(--w) * 0.55)) scale(1.2); }
  64%, 68%  { transform: translateX(calc(var(--w) * 0.83)) scale(1.2); }
  78%, 92%  { transform: translateX(var(--w)); opacity: 1; }
  100%      { transform: translateX(var(--w)); opacity: 0; }
}

.ldr-skeleton-list {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 6);
}
.ldr-skeleton-list-row {
  display: flex;
  align-items: center;
  gap: calc(var(--s) / 4);
  padding: calc(var(--s) / 7) 0;
  animation: ldr-skeleton-list-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.ldr-skeleton-list-row + .ldr-skeleton-list-row {
  border-top: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
}
.ldr-skeleton-list-row:nth-child(2) { animation-delay: 0.2s; }
.ldr-skeleton-list-row:nth-child(3) { animation-delay: 0.4s; }
.ldr-skeleton-list-avatar {
  flex: none;
  width: calc(var(--s) * 0.72);
  height: calc(var(--s) * 0.72);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
}
.ldr-skeleton-list-text {
  flex: 1;
  display: grid;
  gap: calc(var(--s) / 7);
}
.ldr-skeleton-list-text span {
  height: calc(var(--s) / 6);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
}
.ldr-skeleton-list-text span:first-child { width: 52%; }
.ldr-skeleton-list-text span:last-child { width: 86%; background: color-mix(in srgb, var(--ldr-color, #3b82f6) 15%, transparent); }
.ldr-skeleton-list-row:nth-child(2) .ldr-skeleton-list-text span:first-child { width: 38%; }
.ldr-skeleton-list-row:nth-child(3) .ldr-skeleton-list-text span:first-child { width: 64%; }
.ldr-skeleton-list-row:nth-child(3) .ldr-skeleton-list-text span:last-child { width: 70%; }
.ldr-skeleton-list-action {
  flex: none;
  width: calc(var(--s) * 1.1);
  height: calc(var(--s) * 0.42);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 15%, transparent);
}
@keyframes ldr-skeleton-list-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.ldr-skeleton-article {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --u: calc(var(--s) / 10);
  --m:
    linear-gradient(#000 0 0) 0 0 / 74% calc(var(--u) * 3),
    linear-gradient(#000 0 0) 0 calc(var(--u) * 4.4) / 48% calc(var(--u) * 3),
    radial-gradient(closest-side, #000 94%, transparent) 0 calc(var(--u) * 10) / calc(var(--u) * 4) calc(var(--u) * 4),
    linear-gradient(#000 0 0) calc(var(--u) * 5.4) calc(var(--u) * 11.2) / 30% calc(var(--u) * 1.6),
    linear-gradient(#000 0 0) 0 calc(var(--u) * 17) / 100% calc(var(--u) * 1.6),
    linear-gradient(#000 0 0) 0 calc(var(--u) * 20.5) / 93% calc(var(--u) * 1.6),
    linear-gradient(#000 0 0) 0 calc(var(--u) * 24) / 97% calc(var(--u) * 1.6),
    linear-gradient(#000 0 0) 0 calc(var(--u) * 27.5) / 58% calc(var(--u) * 1.6);
  width: calc(var(--s) * 6);
  height: calc(var(--s) * 3);
  background: linear-gradient(100deg, transparent 42%, color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent) 50%, transparent 58%) 100% 0 / 300% 100% no-repeat color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: ldr-skeleton-article-shine 1.7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ldr-skeleton-article-shine {
  to { background-position: 0% 0; }
}

.ldr-skeleton-product-grid {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --wave: linear-gradient(105deg, rgb(0 0 0 / 0.5) 38%, #000 50%, rgb(0 0 0 / 0.5) 62%) 100% 0 / 300% 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--s) / 5);
  width: calc(var(--s) * 6.4);
  -webkit-mask: var(--wave);
  mask: var(--wave);
  animation: ldr-skeleton-product-grid-wave 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-skeleton-product-grid-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--s) / 8);
  padding: calc(var(--s) / 8);
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 32%, transparent);
  border-radius: calc(var(--s) / 6);
}
.ldr-skeleton-product-grid-card > span {
  height: calc(var(--s) / 6);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 38%, transparent);
}
.ldr-skeleton-product-grid-card > span:nth-child(3) { width: 62%; }
.ldr-skeleton-product-grid-card > .ldr-skeleton-product-grid-img {
  height: calc(var(--s) * 1.45);
  margin-bottom: calc(var(--s) / 16);
  border-radius: calc(var(--s) / 10);
}
.ldr-skeleton-product-grid-card > .ldr-skeleton-product-grid-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  margin-top: calc(var(--s) / 16);
  background: none;
}
.ldr-skeleton-product-grid-foot span {
  width: 42%;
  height: calc(var(--s) / 4.5);
  border-radius: calc(var(--s) / 16);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 38%, transparent);
}
.ldr-skeleton-product-grid-foot span + span {
  width: calc(var(--s) / 2.6);
  height: calc(var(--s) / 2.6);
  border-radius: 50%;
}
@keyframes ldr-skeleton-product-grid-wave {
  to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}

.ldr-skeleton-table {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 7);
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
  border-radius: calc(var(--s) / 7);
  overflow: hidden;
}
.ldr-skeleton-table > div {
  --y: 0;
  display: grid;
  grid-template-columns: calc(var(--s) * 0.3) 2.2fr 1fr 1fr;
  align-items: center;
  gap: calc(var(--s) / 3);
  height: calc(var(--s) * 0.56);
  padding: 0 calc(var(--s) / 4);
}
.ldr-skeleton-table-head { background: color-mix(in srgb, var(--ldr-color, #3b82f6) 8%, transparent); }
.ldr-skeleton-table-row { border-top: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent); }
.ldr-skeleton-table > div:nth-child(2) { --y: 1; }
.ldr-skeleton-table > div:nth-child(3) { --y: 2; }
.ldr-skeleton-table > div:nth-child(4) { --y: 3; }
.ldr-skeleton-table > div:nth-child(5) { --y: 4; }
.ldr-skeleton-table > div > span {
  --x: 0;
  height: calc(var(--s) / 6);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent);
  animation: ldr-skeleton-table-wave 1.6s ease-in-out calc((var(--x) + var(--y)) * 0.09s) infinite backwards;
}
.ldr-skeleton-table > div > span:nth-child(1) {
  height: calc(var(--s) * 0.3);
  border-radius: calc(var(--s) / 14);
  background: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
.ldr-skeleton-table > div > span:nth-child(2) { --x: 1; width: 78%; }
.ldr-skeleton-table > div > span:nth-child(3) { --x: 2; width: 80%; height: calc(var(--s) / 3.6); }
.ldr-skeleton-table > div > span:nth-child(4) { --x: 3; width: 64%; justify-self: end; }
.ldr-skeleton-table-row:nth-child(odd) > span:nth-child(2) { width: 58%; }
.ldr-skeleton-table-row:nth-child(3) > span:nth-child(4) { width: 82%; }
.ldr-skeleton-table-head > span:nth-child(n + 2) {
  width: 44%;
  height: calc(var(--s) / 7);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 42%, transparent);
}
.ldr-skeleton-table-head > span:nth-child(4) { justify-self: end; }
@keyframes ldr-skeleton-table-wave {
  0%, 100% { opacity: 0.45; }
  35%      { opacity: 1; }
}

.ldr-skeleton-video {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  gap: calc(var(--s) / 5);
  width: calc(var(--s) * 4.1);
}
.ldr-skeleton-video-thumb,
.ldr-skeleton-video-avatar,
.ldr-skeleton-video-lines span {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-skeleton-video-thumb::after,
.ldr-skeleton-video-avatar::after,
.ldr-skeleton-video-lines span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: ldr-skeleton-video-sheen 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ldr-skeleton-video-meta ::after { animation-delay: 0.12s; }
.ldr-skeleton-video-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--s) / 6);
}
.ldr-skeleton-video-thumb::before {
  content: "";
  width: calc(var(--s) * 0.42);
  height: calc(var(--s) * 0.48);
  margin-left: calc(var(--s) / 12);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ldr-skeleton-video-time {
  position: absolute;
  right: calc(var(--s) / 8);
  bottom: calc(var(--s) / 8);
  width: calc(var(--s) * 0.55);
  height: calc(var(--s) / 4.5);
  border-radius: calc(var(--s) / 16);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent);
}
.ldr-skeleton-video-meta {
  display: flex;
  gap: calc(var(--s) / 5);
}
.ldr-skeleton-video-avatar {
  flex: none;
  width: calc(var(--s) * 0.6);
  height: calc(var(--s) * 0.6);
  border-radius: 50%;
}
.ldr-skeleton-video-lines {
  flex: 1;
  display: grid;
  gap: calc(var(--s) / 9);
  align-content: start;
  padding-top: calc(var(--s) / 24);
}
.ldr-skeleton-video-lines span {
  height: calc(var(--s) / 6);
  border-radius: var(--s);
}
.ldr-skeleton-video-lines span:nth-child(2) { width: 68%; }
.ldr-skeleton-video-lines span:nth-child(3) { width: 42%; height: calc(var(--s) / 8); margin-top: calc(var(--s) / 20); background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent); }
@keyframes ldr-skeleton-video-sheen {
  60%, 100% { transform: translateX(100%); }
}

.ldr-gradient-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) * 6);
  width: var(--w);
  height: calc(var(--s) / 5);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  overflow: hidden;
}
.ldr-gradient-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-image: linear-gradient(90deg, var(--c), oklch(from var(--c) l c calc(h + 70)), oklch(from var(--c) l c calc(h + 140)), oklch(from var(--c) l c calc(h + 70)), var(--c));
  background-size: var(--w) 100%;
  animation:
    ldr-gradient-progress-bar-flow 1.4s linear infinite,
    ldr-gradient-progress-bar-run 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@supports not (color: oklch(from red l c h)) {
  .ldr-gradient-progress-bar span {
    background-image: linear-gradient(90deg, var(--c), color-mix(in oklch, var(--c), #ec4899), color-mix(in oklch, var(--c), #f59e0b), color-mix(in oklch, var(--c), #ec4899), var(--c));
  }
}
@keyframes ldr-gradient-progress-bar-flow {
  to { background-position: var(--w) 0; }
}
@keyframes ldr-gradient-progress-bar-run {
  0%       { transform: translateX(-100%); }
  55%, 72% { transform: translateX(0); }
  100%     { transform: translateX(100%); }
}

.ldr-segmented-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  gap: calc(var(--s) / 12);
  width: calc(var(--s) * 6);
}
.ldr-segmented-progress-bar span {
  position: relative;
  flex: 1;
  height: calc(var(--s) / 3.5);
  border-radius: calc(var(--s) / 16);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
}
.ldr-segmented-progress-bar span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  opacity: 0;
  animation: ldr-segmented-progress-bar-light 3.6s calc(var(--i) * 0.15s) infinite;
}
@keyframes ldr-segmented-progress-bar-light {
  0%       { opacity: 0; transform: scaleY(0.3); animation-timing-function: cubic-bezier(0.3, 1.8, 0.6, 1); }
  5%       { opacity: 1; transform: scaleY(1); }
  60%      { opacity: 1; transform: scale(1); animation-timing-function: ease-in; }
  66%      { opacity: 0; transform: scale(0.8, 0.6); }
  100%     { opacity: 0; transform: scaleY(0.3); }
}

.ldr-glowing-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) * 6);
  position: relative;
  width: var(--w);
  height: calc(var(--s) / 12);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
}
.ldr-glowing-progress-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 15%, transparent), var(--c));
  box-shadow: 0 0 calc(var(--s) / 6) color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  transform-origin: left;
  animation: ldr-glowing-progress-bar-fill 3.2s infinite;
}
.ldr-glowing-progress-bar span {
  position: absolute;
  top: 50%;
  left: calc(var(--s) / -8);
  width: calc(var(--s) / 4);
  height: calc(var(--s) / 4);
  margin-top: calc(var(--s) / -8);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 25%, #fff) 0 30%, var(--c) 70%);
  box-shadow: 0 0 calc(var(--s) / 6) calc(var(--s) / 20) var(--c), 0 0 calc(var(--s) / 2) calc(var(--s) / 8) color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  animation: ldr-glowing-progress-bar-head 3.2s infinite;
}
@keyframes ldr-glowing-progress-bar-fill {
  0%       { transform: scaleX(0); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  20%      { transform: scaleX(0.24); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  32%      { transform: scaleX(0.3); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  54%      { transform: scaleX(0.66); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  64%      { transform: scaleX(0.72); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  82%, 90% { transform: scaleX(1); opacity: 1; }
  100%     { transform: scaleX(1); opacity: 0; }
}
@keyframes ldr-glowing-progress-bar-head {
  0%       { transform: translateX(0); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  20%      { transform: translateX(calc(var(--w) * 0.24)); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  32%      { transform: translateX(calc(var(--w) * 0.3)); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  54%      { transform: translateX(calc(var(--w) * 0.66)); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  64%      { transform: translateX(calc(var(--w) * 0.72)); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  82%      { transform: translateX(var(--w)) scale(1); opacity: 1; }
  88%      { transform: translateX(var(--w)) scale(1.7); opacity: 1; }
  100%     { transform: translateX(var(--w)) scale(2.4); opacity: 0; }
}

.ldr-shimmer-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 6);
  height: calc(var(--s) / 4);
  border-radius: calc(var(--s) / 16);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 24%, transparent);
  overflow: hidden;
}
.ldr-shimmer-progress-bar span {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(color-mix(in srgb, var(--c) 80%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 85%, #000));
  transform-origin: left;
  animation: ldr-shimmer-progress-bar-fill 5s infinite;
}
.ldr-shimmer-progress-bar span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.6), transparent);
  transform: translateX(-100%);
  animation: ldr-shimmer-progress-bar-shine 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ldr-shimmer-progress-bar-fill {
  0%       { transform: scaleX(0); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  10%, 26% { transform: scaleX(0.22); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  36%, 52% { transform: scaleX(0.48); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  62%, 72% { transform: scaleX(0.74); animation-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1); }
  82%, 94% { transform: scaleX(1); opacity: 1; }
  100%     { transform: scaleX(1); opacity: 0; }
}
@keyframes ldr-shimmer-progress-bar-shine {
  70%, 100% { transform: translateX(260%); }
}

.ldr-wavy-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) * 6);
  --g: calc(var(--s) / 6);
  position: relative;
  width: var(--w);
  height: calc(var(--s) * 0.4);
}
.ldr-wavy-progress-bar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: calc(var(--s) / 12);
  margin-top: calc(var(--s) / -24);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  animation: ldr-wavy-progress-bar-track 4s infinite;
}
.ldr-wavy-progress-bar::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: calc(var(--s) / 10);
  height: calc(var(--s) / 10);
  margin-top: calc(var(--s) / -20);
  border-radius: 50%;
  background: var(--c);
}
.ldr-wavy-progress-bar-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: ldr-wavy-progress-bar-fill 4s infinite;
}
.ldr-wavy-progress-bar svg {
  display: block;
  width: calc(var(--w) * 10 / 9);
  height: 100%;
  fill: none;
  stroke: var(--c);
  stroke-width: 2.5;
  stroke-linecap: round;
  animation: ldr-wavy-progress-bar-flow 0.9s linear infinite;
}
@keyframes ldr-wavy-progress-bar-flow {
  to { transform: translateX(calc(var(--w) / -9)); }
}
@keyframes ldr-wavy-progress-bar-fill {
  0%       { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  20%      { clip-path: inset(0 76% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  32%      { clip-path: inset(0 70% 0 0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  55%      { clip-path: inset(0 36% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  66%      { clip-path: inset(0 30% 0 0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  84%, 94% { clip-path: inset(0 0 0 0); opacity: 1; }
  100%     { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes ldr-wavy-progress-bar-track {
  0%       { clip-path: inset(0 0 0 var(--g)); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  20%      { clip-path: inset(0 0 0 calc(24% + var(--g))); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  32%      { clip-path: inset(0 0 0 calc(30% + var(--g))); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  55%      { clip-path: inset(0 0 0 calc(64% + var(--g))); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  66%      { clip-path: inset(0 0 0 calc(70% + var(--g))); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  84%, 100% { clip-path: inset(0 0 0 100%); }
}

.ldr-skeleton-chat {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --r: calc(var(--s) / 4);
  display: grid;
  gap: calc(var(--s) / 6);
  width: calc(var(--s) * 5.4);
}
.ldr-skeleton-chat > div {
  --i: 0;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--s) / 7);
  opacity: 0;
  animation: ldr-skeleton-chat-pop 5s calc(var(--i) * 0.36s) infinite;
}
.ldr-skeleton-chat > div:nth-child(2) { --i: 1; }
.ldr-skeleton-chat > div:nth-child(3) { --i: 2; }
.ldr-skeleton-chat > div:nth-child(4) { --i: 3; }
.ldr-skeleton-chat-in { transform-origin: 0 100%; }
.ldr-skeleton-chat-out {
  justify-content: flex-end;
  transform-origin: 100% 100%;
}
.ldr-skeleton-chat-avatar {
  flex: none;
  width: calc(var(--s) * 0.42);
  height: calc(var(--s) * 0.42);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent);
}
.ldr-skeleton-chat-bubble {
  width: calc(var(--s) * 2.8);
  height: calc(var(--s) * 0.5);
  border-radius: var(--r) var(--r) var(--r) calc(var(--s) / 16);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-skeleton-chat-out .ldr-skeleton-chat-bubble {
  width: calc(var(--s) * 2.1);
  border-radius: var(--r) var(--r) calc(var(--s) / 16) var(--r);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 38%, transparent);
}
.ldr-skeleton-chat > div:nth-child(3) .ldr-skeleton-chat-bubble { width: calc(var(--s) * 2); height: calc(var(--s) * 0.82); }
.ldr-skeleton-chat > div:nth-child(4) .ldr-skeleton-chat-bubble { width: calc(var(--s) * 1.4); }
@keyframes ldr-skeleton-chat-pop {
  0%       { opacity: 0; transform: translateY(calc(var(--s) / 5)) scale(0.6); animation-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1); }
  8%       { opacity: 1; transform: none; }
  70%      { opacity: 1; transform: none; animation-timing-function: ease-in; }
  78%, 100% { opacity: 0; transform: translateY(calc(var(--s) / -6)) scale(0.96); }
}

.ldr-skeleton-gallery {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: calc(var(--s) * 0.92);
  gap: calc(var(--s) / 8);
  width: calc(var(--s) * 6);
}
.ldr-skeleton-gallery span {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: calc(var(--s) / 8);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
  animation: ldr-skeleton-gallery-twinkle var(--dur, 2.4s) ease-in-out var(--d, 0s) infinite;
}
.ldr-skeleton-gallery span::before {
  content: "";
  width: calc(var(--s) * 0.46);
  height: calc(var(--s) * 0.3);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  clip-path: polygon(0 100%, 34% 22%, 54% 60%, 70% 38%, 100% 100%);
}
.ldr-skeleton-gallery span::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--s) * 0.24);
  left: calc(50% + var(--s) * 0.08);
  width: calc(var(--s) * 0.12);
  height: calc(var(--s) * 0.12);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
}
.ldr-skeleton-gallery span:nth-child(1) { grid-area: span 2 / span 2; --d: -0.4s; --dur: 2.8s; }
.ldr-skeleton-gallery span:nth-child(1)::before { transform: scale(1.6); }
.ldr-skeleton-gallery span:nth-child(1)::after { transform: translate(calc(var(--s) * 0.08), calc(var(--s) * -0.1)) scale(1.6); }
.ldr-skeleton-gallery span:nth-child(2) { --d: -1.3s; --dur: 2.2s; }
.ldr-skeleton-gallery span:nth-child(3) { --d: -0.2s; --dur: 2.6s; }
.ldr-skeleton-gallery span:nth-child(4) { --d: -1.9s; --dur: 2.3s; }
.ldr-skeleton-gallery span:nth-child(5) { --d: -0.9s; --dur: 2.9s; }
.ldr-skeleton-gallery span:nth-child(6) { --d: -1.6s; --dur: 2.5s; }
.ldr-skeleton-gallery span:nth-child(7) { grid-column: span 2; --d: -0.7s; --dur: 2.2s; }
.ldr-skeleton-gallery span:nth-child(8) { --d: -2.2s; --dur: 2.7s; }
@keyframes ldr-skeleton-gallery-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.ldr-skeleton-dashboard {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--s) / 6);
  width: calc(var(--s) * 7);
}
.ldr-skeleton-dashboard-kpi,
.ldr-skeleton-dashboard-chart {
  display: grid;
  gap: calc(var(--s) / 10);
  padding: calc(var(--s) / 6);
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
  border-radius: calc(var(--s) / 8);
}
.ldr-skeleton-dashboard-kpi:nth-child(2) span { animation-delay: 0.15s; }
.ldr-skeleton-dashboard-kpi:nth-child(3) span { animation-delay: 0.3s; }
.ldr-skeleton-dashboard span {
  height: calc(var(--s) / 8);
  width: 45%;
  border-radius: var(--s);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 30%, color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent) 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 70%) 100% 0 / 300% 100%;
  animation: ldr-skeleton-dashboard-shimmer 1.6s ease-in-out infinite;
}
.ldr-skeleton-dashboard-kpi span:nth-child(2) {
  width: 72%;
  height: calc(var(--s) / 3.5);
  border-radius: calc(var(--s) / 16);
}
.ldr-skeleton-dashboard-kpi span:nth-child(3) {
  width: 32%;
  height: calc(var(--s) / 6.5);
}
.ldr-skeleton-dashboard-chart {
  grid-column: 1 / -1;
}
.ldr-skeleton-dashboard-chart span { width: 24%; }
.ldr-skeleton-dashboard svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  background: repeating-linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent) 0 1px, transparent 1px 33.3%);
}
.ldr-skeleton-dashboard-area {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  animation: ldr-skeleton-dashboard-area 3s ease-in-out infinite;
}
.ldr-skeleton-dashboard-line {
  fill: none;
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: ldr-skeleton-dashboard-draw 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ldr-skeleton-dashboard-shimmer {
  to { background-position: 0% 0; }
}
@keyframes ldr-skeleton-dashboard-draw {
  0%       { stroke-dashoffset: 100; opacity: 1; }
  60%, 86% { stroke-dashoffset: 0; opacity: 1; }
  100%     { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ldr-skeleton-dashboard-area {
  0%, 25%  { opacity: 0; }
  65%, 86% { opacity: 1; }
  100%     { opacity: 0; }
}

.ldr-skeleton-form {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  gap: calc(var(--s) / 10);
  width: calc(var(--s) * 4.6);
  animation: ldr-skeleton-form-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.ldr-skeleton-form-label {
  width: calc(var(--s) * 1.3);
  height: calc(var(--s) / 7);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 24%, transparent);
}
.ldr-skeleton-form-label:nth-child(3) { width: calc(var(--s) * 1.7); }
.ldr-skeleton-form-input {
  position: relative;
  height: calc(var(--s) * 0.56);
  margin-bottom: calc(var(--s) / 14);
  border-radius: calc(var(--s) / 8);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
}
.ldr-skeleton-form-input span {
  position: absolute;
  top: 28%;
  bottom: 28%;
  left: calc(var(--s) / 6);
  width: max(1px, calc(var(--s) / 28));
  background: var(--c);
  animation: ldr-skeleton-form-caret 1s steps(1) infinite;
}
.ldr-skeleton-form-check {
  display: flex;
  align-items: center;
  gap: calc(var(--s) / 7);
  margin-bottom: calc(var(--s) / 14);
}
.ldr-skeleton-form-check::before,
.ldr-skeleton-form-check::after {
  content: "";
  width: calc(var(--s) * 0.3);
  height: calc(var(--s) * 0.3);
  border-radius: calc(var(--s) / 16);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
}
.ldr-skeleton-form-check::after {
  width: calc(var(--s) * 1.9);
  height: calc(var(--s) / 7);
  border-radius: var(--s);
  box-shadow: none;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 24%, transparent);
}
.ldr-skeleton-form-button {
  height: calc(var(--s) * 0.56);
  border-radius: calc(var(--s) / 8);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 32%, transparent);
}
@keyframes ldr-skeleton-form-pulse {
  50% { opacity: 0.5; }
}
@keyframes ldr-skeleton-form-caret {
  50% { opacity: 0; }
}

.ldr-skeleton-comments {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  gap: calc(var(--s) / 5);
  width: calc(var(--s) * 5.6);
}
.ldr-skeleton-comments-item {
  --i: 0;
  --a: calc(var(--s) * 0.56);
  position: relative;
  display: flex;
  gap: calc(var(--s) / 5);
}
.ldr-skeleton-comments-item:nth-child(2) { --i: 1; }
.ldr-skeleton-comments-item:nth-child(3) { --i: 2; }
.ldr-skeleton-comments-item:nth-child(4) { --i: 3; }
.ldr-skeleton-comments-reply {
  --a: calc(var(--s) * 0.42);
  margin-left: calc(var(--s) * 0.7);
}
.ldr-skeleton-comments-reply::before {
  content: "";
  position: absolute;
  left: calc(var(--s) * -0.42);
  top: calc(var(--s) * -0.3);
  width: calc(var(--s) * 0.32);
  height: calc(var(--s) * 0.3 + var(--a) / 2);
  border: solid color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  border-width: 0 0 1px 1px;
  border-bottom-left-radius: calc(var(--s) / 4);
}
.ldr-skeleton-comments-reply + .ldr-skeleton-comments-reply::before {
  top: calc(var(--s) * -0.52);
  height: calc(var(--s) * 0.52 + var(--a) / 2);
}
.ldr-skeleton-comments-avatar {
  flex: none;
  width: var(--a);
  height: var(--a);
  border-radius: 50%;
}
.ldr-skeleton-comments-body {
  flex: 1;
  display: grid;
  gap: calc(var(--s) / 9);
  align-content: start;
  padding-top: calc(var(--s) / 24);
}
.ldr-skeleton-comments-body span {
  height: calc(var(--s) / 7);
  border-radius: var(--s);
}
.ldr-skeleton-comments-body span:first-child { width: 30%; height: calc(var(--s) / 6); }
.ldr-skeleton-comments-body span:nth-child(2) { width: 92%; }
.ldr-skeleton-comments-body span:nth-child(3) { width: 62%; }
.ldr-skeleton-comments-reply .ldr-skeleton-comments-body span:nth-child(2) { width: 74%; }
.ldr-skeleton-comments-item:nth-child(4) .ldr-skeleton-comments-body span:nth-child(2) { width: 80%; }
.ldr-skeleton-comments-avatar,
.ldr-skeleton-comments-body span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 30%, color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent) 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 70%) 100% 0 / 300% 100%;
  animation: ldr-skeleton-comments-shimmer 1.8s ease-in-out calc(var(--i) * 0.16s) infinite;
}
@keyframes ldr-skeleton-comments-shimmer {
  to { background-position: 0% 0; }
}

.ldr-stacked-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --c2: oklch(from var(--c) l c calc(h + 55));
  --c3: oklch(from var(--c) l c calc(h + 110));
  --c4: oklch(from var(--c) calc(l + 0.08) c calc(h + 165));
  --g: calc(var(--s) / 24);
  display: grid;
  gap: calc(var(--s) / 4);
  width: calc(var(--s) * 6);
}
@supports not (color: oklch(from red l c h)) {
  .ldr-stacked-progress-bar {
    --c2: color-mix(in oklch, var(--c), #a855f7);
    --c3: color-mix(in oklch, var(--c), #ec4899);
    --c4: color-mix(in oklch, var(--c), #f59e0b);
  }
}
.ldr-stacked-progress-bar-track {
  height: calc(var(--s) / 4);
  overflow: hidden;
  border-radius: calc(var(--s) / 10);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
}
.ldr-stacked-progress-bar-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,
    var(--c) 0 calc(32% - var(--g)), transparent 0 32%,
    var(--c2) 0 calc(52% - var(--g)), transparent 0 52%,
    var(--c3) 0 calc(66% - var(--g)), transparent 0 66%,
    var(--c4) 0 76%, transparent 0);
  animation: ldr-stacked-progress-bar-measure 4.2s infinite;
}
.ldr-stacked-progress-bar-legend {
  display: flex;
  gap: calc(var(--s) / 3);
}
.ldr-stacked-progress-bar-legend span {
  --k: var(--c);
  width: calc(var(--s) * 0.95);
  height: calc(var(--s) / 6);
  background:
    radial-gradient(circle closest-side, var(--k) 90%, transparent) 0 50% / calc(var(--s) / 6) 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent) 0 0) 100% 50% / calc(100% - var(--s) / 4) 70% no-repeat;
}
.ldr-stacked-progress-bar-legend span:nth-child(2) { --k: var(--c2); width: calc(var(--s) * 0.8); }
.ldr-stacked-progress-bar-legend span:nth-child(3) { --k: var(--c3); width: calc(var(--s) * 1.1); }
.ldr-stacked-progress-bar-legend span:nth-child(4) { --k: var(--c4); width: calc(var(--s) * 0.7); }
@keyframes ldr-stacked-progress-bar-measure {
  0%       { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  18%, 24% { clip-path: inset(0 68% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  36%, 42% { clip-path: inset(0 48% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  52%, 58% { clip-path: inset(0 34% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  66%, 92% { clip-path: inset(0 24% 0 0); opacity: 1; }
  100%     { clip-path: inset(0 24% 0 0); opacity: 0; }
}

.ldr-bouncing-dot-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) * 0.3);
  --p: calc(var(--s) * 0.07);
  --run: calc(var(--s) * 4.5 - var(--d) - var(--p) * 2);
  position: relative;
  width: calc(var(--s) * 4.5);
  height: calc(var(--d) + var(--p) * 2);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
}
.ldr-bouncing-dot-progress-bar::before,
.ldr-bouncing-dot-progress-bar span {
  position: absolute;
  top: var(--p);
  left: var(--p);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-bouncing-dot-progress-bar-rally 1.4s infinite;
}
.ldr-bouncing-dot-progress-bar::before {
  content: "";
  opacity: 0.3;
  animation-delay: -1.365s;
}
@keyframes ldr-bouncing-dot-progress-bar-rally {
  0%   { transform: translateX(calc(var(--d) * -0.12)) scale(0.72, 1.2); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  6%   { transform: translateX(calc(var(--d) * 0.2)) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  25%  { transform: translateX(calc(var(--run) / 2)) scale(1.7, 0.78); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  44%  { transform: translateX(calc(var(--run) - var(--d) * 0.2)) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  50%  { transform: translateX(calc(var(--run) + var(--d) * 0.12)) scale(0.72, 1.2); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  56%  { transform: translateX(calc(var(--run) - var(--d) * 0.2)) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  75%  { transform: translateX(calc(var(--run) / 2)) scale(1.7, 0.78); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  94%  { transform: translateX(calc(var(--d) * 0.2)) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  100% { transform: translateX(calc(var(--d) * -0.12)) scale(0.72, 1.2); }
}

.ldr-liquid-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --r: calc(var(--s) / 9);
  position: relative;
  width: calc(var(--s) * 6);
  height: calc(var(--s) * 0.56);
  border-radius: var(--s);
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent);
}
.ldr-liquid-progress-bar > span {
  position: absolute;
  inset: 0;
  z-index: -1;
  animation: ldr-liquid-progress-bar-fill 4.4s infinite;
}
.ldr-liquid-progress-bar > span::after {
  --wave:
    radial-gradient(circle var(--r) at var(--r) var(--r), #000 96%, transparent) 0 0 / 100% calc(var(--r) * 4),
    radial-gradient(circle var(--r) at var(--r) calc(var(--r) * 3), transparent 96%, #000) 0 0 / 100% calc(var(--r) * 4),
    linear-gradient(90deg, #000 50%, transparent 0);
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: calc(var(--r) * 2);
  background: inherit;
  -webkit-mask: var(--wave);
  -webkit-mask-composite: source-over, source-in;
  mask: var(--wave);
  mask-composite: add, intersect;
  animation: ldr-liquid-progress-bar-wave 0.8s linear infinite;
}
.ldr-liquid-progress-bar > .ldr-liquid-progress-bar-front {
  background: var(--c);
}
.ldr-liquid-progress-bar > .ldr-liquid-progress-bar-back {
  left: calc(var(--s) / 4);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 38%, transparent);
}
.ldr-liquid-progress-bar > .ldr-liquid-progress-bar-back::after {
  animation-duration: 1.3s;
  animation-direction: reverse;
}
.ldr-liquid-progress-bar::after {
  content: "";
  position: absolute;
  top: 18%;
  left: calc(var(--s) / 4);
  right: calc(var(--s) / 4);
  height: calc(var(--s) / 14);
  border-radius: var(--s);
  background: rgb(255 255 255 / 0.4);
}
@keyframes ldr-liquid-progress-bar-fill {
  0%       { transform: translateX(calc(-100% - var(--r) * 2)); animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  30%      { transform: translateX(calc(-64% - var(--r))); animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  52%      { transform: translateX(-40%); animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  76%, 92% { transform: translateX(0); opacity: 1; }
  100%     { transform: translateX(0); opacity: 0; }
}
@keyframes ldr-liquid-progress-bar-wave {
  to {
    -webkit-mask-position: 0 calc(var(--r) * 4), 0 calc(var(--r) * 4), 0 0;
    mask-position: 0 calc(var(--r) * 4), 0 calc(var(--r) * 4), 0 0;
  }
}

.ldr-skeleton-profile {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --ch: calc(var(--s) * 1.1);
  --a: calc(var(--s) * 0.96);
  --ax: calc(var(--s) * 0.3);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: calc(var(--s) / 10);
  width: calc(var(--s) * 5.6);
  padding-bottom: calc(var(--s) / 4);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
  border-radius: calc(var(--s) / 6);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 4%, transparent);
}
.ldr-skeleton-profile > :where(span) {
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-skeleton-profile-cover {
  grid-column: 1 / -1;
  height: var(--ch);
  border-radius: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent));
  -webkit-mask: radial-gradient(circle at calc(var(--ax) + var(--a) / 2) 100%, transparent calc(var(--a) / 2 + var(--s) / 12), #000 calc(var(--a) / 2 + var(--s) / 12 + 1px));
  mask: radial-gradient(circle at calc(var(--ax) + var(--a) / 2) 100%, transparent calc(var(--a) / 2 + var(--s) / 12), #000 calc(var(--a) / 2 + var(--s) / 12 + 1px));
}
.ldr-skeleton-profile-avatar {
  position: absolute;
  top: calc(var(--ch) - var(--a) / 2);
  left: var(--ax);
  width: var(--a);
  height: var(--a);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
}
.ldr-skeleton-profile-avatar::before {
  content: "";
  position: absolute;
  inset: calc(var(--s) / -14);
  border-radius: 50%;
  background: conic-gradient(transparent 0 35%, var(--c));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--s) / 20), #000 calc(100% - var(--s) / 20 + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--s) / 20), #000 calc(100% - var(--s) / 20 + 1px));
  animation: ldr-skeleton-profile-ring 1.1s linear infinite;
}
.ldr-skeleton-profile-button {
  grid-column: 2;
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 0.42);
  margin: calc(var(--s) / 20) calc(var(--s) / 4) calc(var(--s) / 20) 0;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent);
}
.ldr-skeleton-profile-name,
.ldr-skeleton-profile-handle,
.ldr-skeleton-profile-stats {
  grid-column: 1 / -1;
  margin-left: calc(var(--s) / 4);
}
.ldr-skeleton-profile-name { width: calc(var(--s) * 2); height: calc(var(--s) / 5); margin-top: calc(var(--s) / 10); }
.ldr-skeleton-profile-handle { width: calc(var(--s) * 1.2); height: calc(var(--s) / 7); background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent); }
.ldr-skeleton-profile > .ldr-skeleton-profile-stats {
  display: flex;
  gap: calc(var(--s) / 3);
  margin-top: calc(var(--s) / 10);
  background: none;
}
.ldr-skeleton-profile-stats span {
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) / 6);
  border-radius: var(--s);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent) 0 32%, transparent 32% 42%, color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent) 42%);
}
.ldr-skeleton-profile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ldr-skeleton-profile-sheen 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ldr-skeleton-profile-ring {
  to { transform: rotate(360deg); }
}
@keyframes ldr-skeleton-profile-sheen {
  70%, 100% { transform: translateX(100%); }
}

.ldr-skeleton-product-page {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --bone: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 30%, color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent) 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 70%) 100% 0 / 300% 100%;
  display: grid;
  grid-template-columns: calc(var(--s) * 2.8) 1fr;
  gap: calc(var(--s) / 3);
  width: calc(var(--s) * 7);
}
.ldr-skeleton-product-page-media,
.ldr-skeleton-product-page-info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--s) / 8);
}
.ldr-skeleton-product-page-info { --delay: 0.2s; gap: calc(var(--s) / 7); padding-top: calc(var(--s) / 20); }
.ldr-skeleton-product-page :where(span) {
  flex: none;
  border-radius: var(--s);
}
.ldr-skeleton-product-page-hero,
.ldr-skeleton-product-page-thumbs span,
.ldr-skeleton-product-page-info > span:not([class]),
.ldr-skeleton-product-page-swatches span,
.ldr-skeleton-product-page-buy span {
  background: var(--bone);
  animation: ldr-skeleton-product-page-shimmer 1.8s ease-in-out var(--delay, 0s) infinite;
}
.ldr-skeleton-product-page-hero {
  height: calc(var(--s) * 2.3);
  border-radius: calc(var(--s) / 8);
}
.ldr-skeleton-product-page-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--s) / 9);
}
.ldr-skeleton-product-page-thumbs span {
  aspect-ratio: 1;
  border-radius: calc(var(--s) / 12);
}
.ldr-skeleton-product-page-thumbs span:first-child { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent); }
.ldr-skeleton-product-page-info > span:nth-child(1) { width: 40%; height: calc(var(--s) / 9); }
.ldr-skeleton-product-page-info > span:nth-child(2) { width: 94%; height: calc(var(--s) / 4); }
.ldr-skeleton-product-page-info > span:nth-child(3) { width: 58%; height: calc(var(--s) / 4); margin-top: calc(var(--s) / -20); }
.ldr-skeleton-product-page-info > span:nth-child(5) { width: 32%; height: calc(var(--s) / 3); border-radius: calc(var(--s) / 14); }
.ldr-skeleton-product-page-stars {
  display: flex;
  gap: calc(var(--s) / 30);
}
.ldr-skeleton-product-page-stars span {
  width: calc(var(--s) / 4.5);
  height: calc(var(--s) / 4.5);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.ldr-skeleton-product-page-stars span:last-child { background: color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent); }
.ldr-skeleton-product-page-swatches {
  display: flex;
  gap: calc(var(--s) / 7);
  padding: calc(var(--s) / 30);
}
.ldr-skeleton-product-page-swatches span {
  width: calc(var(--s) * 0.3);
  height: calc(var(--s) * 0.3);
}
.ldr-skeleton-product-page-swatches span:first-child { box-shadow: 0 0 0 calc(var(--s) / 30) transparent, 0 0 0 calc(var(--s) / 15) color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent); }
.ldr-skeleton-product-page-buy {
  display: flex;
  gap: calc(var(--s) / 8);
  margin-top: calc(var(--s) / 20);
}
.ldr-skeleton-product-page-buy span {
  height: calc(var(--s) * 0.5);
  border-radius: calc(var(--s) / 8);
}
.ldr-skeleton-product-page-buy span:first-child { width: calc(var(--s) * 0.9); background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 32%, transparent); }
.ldr-skeleton-product-page-buy span:last-child { flex: 1; }
@keyframes ldr-skeleton-product-page-shimmer {
  to { background-position: 0% 0; }
}

.ldr-skeleton-social-post {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  gap: calc(var(--s) / 8);
  width: calc(var(--s) * 4.8);
  padding: calc(var(--s) / 5);
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
  border-radius: calc(var(--s) / 5);
}
.ldr-skeleton-social-post-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: calc(var(--s) / 6);
  row-gap: calc(var(--s) / 12);
  align-items: center;
  margin-bottom: calc(var(--s) / 20);
}
.ldr-skeleton-social-post :where(span) {
  display: block;
  height: calc(var(--s) / 7);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
}
.ldr-skeleton-social-post-head span:nth-child(1) {
  grid-row: span 2;
  width: calc(var(--s) * 0.52);
  height: calc(var(--s) * 0.52);
}
.ldr-skeleton-social-post-head span:nth-child(2) { width: 46%; align-self: end; }
.ldr-skeleton-social-post-head span:nth-child(3) {
  grid-row: span 2;
  width: calc(var(--s) / 2.4);
  height: calc(var(--s) / 12);
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent) 90%, transparent) 0 0 / 33.4% 100% repeat-x;
}
.ldr-skeleton-social-post-head span:nth-child(4) { width: 26%; height: calc(var(--s) / 9); align-self: start; background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent); }
.ldr-skeleton-social-post-text,
.ldr-skeleton-social-post-head span:nth-child(2),
.ldr-skeleton-social-post-head span:nth-child(4) {
  animation: ldr-skeleton-social-post-breathe 2s ease-in-out infinite;
}
.ldr-skeleton-social-post-text + .ldr-skeleton-social-post-text { width: 68%; }
.ldr-skeleton-social-post-media {
  height: calc(var(--s) * 1.15);
  margin: calc(var(--s) / 20) 0;
  border-radius: calc(var(--s) / 8);
  background:
    radial-gradient(38% 60% at 50% 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent), transparent 70%) 10% 20% / 170% 170% no-repeat,
    radial-gradient(34% 55% at 50% 50%, color-mix(in oklch, var(--c) 50%, rgb(236 72 153 / 0.45)), transparent 70%) 90% 80% / 170% 170% no-repeat,
    radial-gradient(40% 60% at 50% 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent), transparent 70%) 60% 0% / 170% 170% no-repeat,
    color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  animation: ldr-skeleton-social-post-drift 5s ease-in-out infinite;
}
.ldr-skeleton-social-post-actions {
  display: flex;
  gap: calc(var(--s) / 2.5);
}
.ldr-skeleton-social-post-actions span {
  width: calc(var(--s) * 0.6);
  height: calc(var(--s) / 5);
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 28%, transparent) 92%, transparent) 0 50% / calc(var(--s) / 5) 100% no-repeat, linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 0 0) 100% 50% / 50% 60% no-repeat;
}
@keyframes ldr-skeleton-social-post-breathe {
  50% { opacity: 0.5; }
}
@keyframes ldr-skeleton-social-post-drift {
  0%, 100% { background-position: 10% 20%, 90% 80%, 60% 0%, 0 0; }
  33%      { background-position: 80% 40%, 20% 70%, 30% 100%, 0 0; }
  66%      { background-position: 40% 90%, 60% 10%, 90% 40%, 0 0; }
}

.ldr-skeleton-notifications {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --h: calc(var(--s) * 0.68);
  --slot: calc(var(--h) + var(--s) / 7);
  position: relative;
  width: calc(var(--s) * 5.4);
  height: calc(var(--slot) * 2 + var(--h));
}
.ldr-skeleton-notifications-row {
  --i: 0;
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr 1fr;
  column-gap: calc(var(--s) / 5);
  row-gap: calc(var(--s) / 12);
  align-items: center;
  box-sizing: border-box;
  height: var(--h);
  padding: calc(var(--s) / 8) calc(var(--s) / 5) calc(var(--s) / 8) calc(var(--s) / 8);
  border-radius: calc(var(--s) / 7);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
  opacity: 0;
  animation: ldr-skeleton-notifications-feed 6s calc(var(--i) * -1.5s) infinite;
}
.ldr-skeleton-notifications-row:nth-child(2) { --i: 1; }
.ldr-skeleton-notifications-row:nth-child(3) { --i: 2; }
.ldr-skeleton-notifications-row:nth-child(4) { --i: 3; }
.ldr-skeleton-notifications-row span {
  height: calc(var(--s) / 7);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent);
}
.ldr-skeleton-notifications-row span:nth-child(1) {
  grid-row: span 2;
  width: calc(var(--s) * 0.44);
  height: calc(var(--s) * 0.44);
  border-radius: calc(var(--s) / 8);
}
.ldr-skeleton-notifications-row span:nth-child(2) { width: 58%; align-self: end; }
.ldr-skeleton-notifications-row span:nth-child(3) { grid-column: 2; width: 86%; height: calc(var(--s) / 9); align-self: start; background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent); }
.ldr-skeleton-notifications-row:nth-child(2n) span:nth-child(2) { width: 44%; }
.ldr-skeleton-notifications-row:nth-child(3) span:nth-child(3) { width: 70%; }
.ldr-skeleton-notifications-row::after {
  content: "";
  grid-area: 1 / 3 / 3 / 4;
  width: calc(var(--s) / 7);
  height: calc(var(--s) / 7);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-skeleton-notifications-unread 6s calc(var(--i) * -1.5s) infinite;
}
@keyframes ldr-skeleton-notifications-feed {
  0%, 3%    { opacity: 0; transform: translateY(calc(var(--s) / -5)) scale(0.94); animation-timing-function: cubic-bezier(0.3, 1.3, 0.6, 1); }
  8%, 25%   { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  30%, 50%  { opacity: 1; transform: translateY(var(--slot)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  55%, 75%  { opacity: 1; transform: translateY(calc(var(--slot) * 2)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  80%, 100% { opacity: 0; transform: translateY(calc(var(--slot) * 2 + var(--s) / 3)) scale(0.96); }
}
@keyframes ldr-skeleton-notifications-unread {
  0%, 26%   { transform: scale(1); }
  32%, 100% { transform: scale(0); }
}

@property --ldr-skeleton-pricing-a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.ldr-skeleton-pricing {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: calc(var(--s) / 5);
  width: calc(var(--s) * 6.6);
  padding-top: calc(var(--s) / 5);
}
.ldr-skeleton-pricing-plan {
  position: relative;
  display: grid;
  gap: calc(var(--s) / 8);
  padding: calc(var(--s) / 5);
  border-radius: calc(var(--s) / 7);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-skeleton-pricing-plan > span {
  height: calc(var(--s) / 8);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
  animation: ldr-skeleton-pricing-pulse 1.8s ease-in-out infinite;
}
.ldr-skeleton-pricing-featured > span { animation-delay: 0.25s; }
.ldr-skeleton-pricing-plan:last-child > span { animation-delay: 0.5s; }
.ldr-skeleton-pricing-plan > span:nth-child(1) { width: 50%; }
.ldr-skeleton-pricing-plan > span:nth-child(2) { width: 72%; height: calc(var(--s) / 3); margin-bottom: calc(var(--s) / 12); border-radius: calc(var(--s) / 14); }
.ldr-skeleton-pricing-plan > span:nth-child(n + 3):nth-child(-n + 5) {
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 36%, transparent) 90%, transparent) 0 50% / calc(var(--s) / 6) 100% no-repeat, linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent) 0 0) 100% 0 / calc(100% - var(--s) / 4) 100% no-repeat;
}
.ldr-skeleton-pricing-plan > span:nth-child(4) { width: 82%; }
.ldr-skeleton-pricing-plan > span:nth-child(5) { width: 64%; }
.ldr-skeleton-pricing-plan > span:nth-child(6) { height: calc(var(--s) * 0.4); margin-top: calc(var(--s) / 12); border-radius: calc(var(--s) / 10); }
.ldr-skeleton-pricing-featured { padding-block: calc(var(--s) / 3.5); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent); }
.ldr-skeleton-pricing-featured > span:nth-child(6) { background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent); }
.ldr-skeleton-pricing-featured::before {
  content: "";
  position: absolute;
  top: calc(var(--s) / -12);
  left: 50%;
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) / 6);
  margin-left: calc(var(--s) * -0.45);
  border-radius: var(--s);
  background: var(--c);
}
.ldr-skeleton-pricing-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: max(1px, calc(var(--s) / 30));
  border-radius: inherit;
  background: conic-gradient(from var(--ldr-skeleton-pricing-a), transparent 0 72%, var(--c) 88%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ldr-skeleton-pricing-trace 2.8s linear infinite;
}
@keyframes ldr-skeleton-pricing-pulse {
  50% { opacity: 0.45; }
}
@keyframes ldr-skeleton-pricing-trace {
  to { --ldr-skeleton-pricing-a: 360deg; }
}

.ldr-skeleton-inbox {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --row: calc(var(--s) * 0.7);
  display: grid;
  grid-template-columns: calc(var(--s) * 2.9) 1fr;
  width: calc(var(--s) * 7.4);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
  border-radius: calc(var(--s) / 7);
}
.ldr-skeleton-inbox-list {
  position: relative;
  border-right: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
}
.ldr-skeleton-inbox-list::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--row);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
  box-shadow: inset calc(var(--s) / 16) 0 0 var(--c);
  animation: ldr-skeleton-inbox-select 4.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-skeleton-inbox-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: calc(var(--s) / 12) calc(var(--s) / 6);
  box-sizing: border-box;
  height: var(--row);
  padding: 0 calc(var(--s) / 5);
}
.ldr-skeleton-inbox-row + .ldr-skeleton-inbox-row { border-top: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent); }
.ldr-skeleton-inbox-row span {
  height: calc(var(--s) / 9);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
}
.ldr-skeleton-inbox-row span:nth-child(1) { width: 62%; height: calc(var(--s) / 7); background: color-mix(in srgb, var(--ldr-color, #3b82f6) 28%, transparent); }
.ldr-skeleton-inbox-row span:nth-child(2) { width: calc(var(--s) * 0.4); }
.ldr-skeleton-inbox-row span:nth-child(3) { grid-column: 1 / -1; width: 88%; }
.ldr-skeleton-inbox-row:nth-child(2) span:nth-child(1) { width: 48%; }
.ldr-skeleton-inbox-row:nth-child(3) span:nth-child(3) { width: 70%; }
.ldr-skeleton-inbox-row:nth-child(4) span:nth-child(1) { width: 56%; }
.ldr-skeleton-inbox-row:nth-child(odd)::before {
  content: "";
  position: absolute;
  top: calc(var(--row) / 2 - var(--s) / 5);
  left: calc(var(--s) / 14);
  width: calc(var(--s) / 12);
  height: calc(var(--s) / 12);
  border-radius: 50%;
  background: var(--c);
}
.ldr-skeleton-inbox-pane {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: calc(var(--s) / 9) calc(var(--s) / 6);
  padding: calc(var(--s) / 4);
}
.ldr-skeleton-inbox-pane span {
  grid-column: 1 / -1;
  height: calc(var(--s) / 9);
  border-radius: var(--s);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 30%, color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent) 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 70%) 100% 0 / 300% 100%;
  animation: ldr-skeleton-inbox-read 1.2s ease-out infinite;
}
.ldr-skeleton-inbox-pane span:nth-child(1) { width: 78%; height: calc(var(--s) / 5); margin-bottom: calc(var(--s) / 12); }
.ldr-skeleton-inbox-pane span:nth-child(2) {
  grid-column: 1;
  grid-row: span 2;
  width: calc(var(--s) * 0.4);
  height: calc(var(--s) * 0.4);
  border-radius: 50%;
}
.ldr-skeleton-inbox-pane span:nth-child(3) { grid-column: 2; width: 46%; height: calc(var(--s) / 7); align-self: end; }
.ldr-skeleton-inbox-pane span:nth-child(4) { grid-column: 2; width: 64%; margin-bottom: calc(var(--s) / 8); }
.ldr-skeleton-inbox-pane span:nth-child(6) { width: 94%; }
.ldr-skeleton-inbox-pane span:nth-child(7) { width: 58%; }
@keyframes ldr-skeleton-inbox-select {
  0%, 20%  { transform: translateY(0); }
  25%, 45% { transform: translateY(var(--row)); }
  50%, 70% { transform: translateY(calc(var(--row) * 2)); }
  75%, 95% { transform: translateY(calc(var(--row) * 3)); }
  100%     { transform: translateY(0); }
}
@keyframes ldr-skeleton-inbox-read {
  70%, 100% { background-position: 0% 0; }
}

.ldr-skeleton-map-card {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 5);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
  border-radius: calc(var(--s) / 6);
}
.ldr-skeleton-map-card-map {
  position: relative;
  height: calc(var(--s) * 1.6);
  background:
    linear-gradient(transparent 60%, color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent) 0 calc(60% + var(--s) / 10), transparent 0),
    linear-gradient(90deg, transparent 28%, color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent) 0 calc(28% + var(--s) / 14), transparent 0),
    linear-gradient(118deg, transparent 62%, color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent) 0 calc(62% + var(--s) / 8), transparent 0),
    radial-gradient(closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent) 70%, transparent) 88% 12% / calc(var(--s) * 1.3) calc(var(--s) * 0.8) no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent) 70%, transparent) 6% 100% / calc(var(--s) * 1) calc(var(--s) * 0.7) no-repeat,
    color-mix(in srgb, var(--ldr-color, #3b82f6) 8%, transparent);
}
.ldr-skeleton-map-card-pin {
  position: absolute;
  left: 50%;
  top: 22%;
  width: calc(var(--s) * 0.4);
  height: calc(var(--s) * 0.4);
  margin-left: calc(var(--s) * -0.2);
  transform-origin: 50% 130%;
  animation: ldr-skeleton-map-card-drop 2.6s infinite;
}
.ldr-skeleton-map-card-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, #fff) 0 22%, var(--c) 25%);
  transform: rotate(-45deg);
}
.ldr-skeleton-map-card-map::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(22% + var(--s) * 0.5);
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) * 0.3);
  margin: calc(var(--s) * -0.15) 0 0 calc(var(--s) * -0.45);
  border-radius: 50%;
  box-shadow: inset 0 0 0 max(1px, calc(var(--s) / 30)) var(--c);
  opacity: 0;
  animation: ldr-skeleton-map-card-ripple 2.6s ease-out infinite;
}
.ldr-skeleton-map-card-info {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: calc(var(--s) / 9) calc(var(--s) / 4);
  padding: calc(var(--s) / 5);
}
.ldr-skeleton-map-card-info span {
  grid-column: 1;
  height: calc(var(--s) / 8);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
  animation: ldr-skeleton-map-card-breathe 2.6s ease-in-out infinite;
}
.ldr-skeleton-map-card-info span:nth-child(1) { width: 58%; height: calc(var(--s) / 5.5); margin-bottom: calc(var(--s) / 20); background: color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent); }
.ldr-skeleton-map-card-info span:nth-child(2) { width: 88%; }
.ldr-skeleton-map-card-info span:nth-child(3) { width: 46%; }
.ldr-skeleton-map-card-info .ldr-skeleton-map-card-go {
  grid-area: 1 / 2 / 4 / 3;
  display: grid;
  place-items: center;
  width: calc(var(--s) * 0.6);
  height: calc(var(--s) * 0.6);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
  animation: none;
}
.ldr-skeleton-map-card-go::before {
  content: "";
  width: calc(var(--s) * 0.24);
  height: calc(var(--s) * 0.24);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  clip-path: polygon(0 45%, 100% 0, 55% 100%, 48% 52%);
}
@keyframes ldr-skeleton-map-card-drop {
  0%       { transform: translateY(calc(var(--s) * -0.9)); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  8%       { opacity: 1; }
  20%      { transform: translateY(0) scale(1.18, 0.8); animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
  28%      { transform: translateY(calc(var(--s) * -0.16)) scale(0.94, 1.08); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  36%      { transform: translateY(0) scale(1.06, 0.94); animation-timing-function: ease-out; }
  42%, 86% { transform: none; opacity: 1; }
  100%     { transform: translateY(calc(var(--s) * -0.2)); opacity: 0; }
}
@keyframes ldr-skeleton-map-card-ripple {
  0%, 19% { transform: scale(0.2); opacity: 0; }
  21%     { transform: scale(0.3); opacity: 1; }
  60%     { transform: scale(1.4); opacity: 0; }
  100%    { transform: scale(1.4); opacity: 0; }
}
@keyframes ldr-skeleton-map-card-breathe {
  50% { opacity: 0.5; }
}

.ldr-folding-cube {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.68);
  height: calc(var(--s) * 0.68);
  margin: calc(var(--s) * 0.16);
  transform: rotate(45deg);
}
.ldr-folding-cube span {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
  transform: rotate(calc(var(--i) * 90deg));
}
.ldr-folding-cube span::before {
  content: "";
  position: absolute;
  inset: calc(var(--s) / 60);
  border-radius: calc(var(--s) / 30);
  background: var(--c);
  transform-origin: 100% 100%;
  animation: ldr-folding-cube-fold 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite both;
  animation-delay: calc(var(--i) * 0.3s);
}
.ldr-folding-cube span:nth-child(even)::before {
  background: color-mix(in srgb, var(--c) 72%, #000);
}
@keyframes ldr-folding-cube-fold {
  0%, 10% { transform: perspective(calc(var(--s) * 3)) rotateX(-180deg) rotateY(0deg); opacity: 0; }
  25%, 75% { transform: perspective(calc(var(--s) * 3)) rotateX(0deg) rotateY(0deg); opacity: 1; }
  90%, 100% { transform: perspective(calc(var(--s) * 3)) rotateX(0deg) rotateY(180deg); opacity: 0; }
}

.ldr-hexagon-honeycomb {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) * 0.36);
  --h: calc(var(--w) * 1.1547);
  position: relative;
  width: calc(var(--w) * 3);
  height: calc(var(--h) * 2.5);
}
.ldr-hexagon-honeycomb span {
  position: absolute;
  left: calc(50% + var(--x) * var(--w) - var(--w) / 2);
  top: calc(50% + var(--y) * var(--h) * 0.75 - var(--h) / 2);
  width: var(--w);
  height: var(--h);
  background: var(--c);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: ldr-hexagon-honeycomb-pop 2.1s infinite both;
  animation-delay: calc(var(--i) * 0.1s);
}
.ldr-hexagon-honeycomb span:last-child {
  background: color-mix(in srgb, var(--c) 70%, #000);
}
@keyframes ldr-hexagon-honeycomb-pop {
  0%   { transform: scale(0); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  14%  { transform: scale(0.9); }
  50%  { transform: scale(0.9); animation-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56); }
  64%, 100% { transform: scale(0); }
}

.ldr-triangle-path {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-triangle-path svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 62.1%;
  animation: ldr-triangle-path-turn 1.8s linear infinite;
}
.ldr-triangle-path polygon {
  fill: none;
  stroke-width: 9;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ldr-triangle-path-track {
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
}
.ldr-triangle-path-line {
  stroke: var(--c);
  stroke-dasharray: 100 100;
  animation: ldr-triangle-path-draw 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ldr-triangle-path-turn {
  to { transform: rotate(120deg); }
}
@keyframes ldr-triangle-path-draw {
  0%       { stroke-dashoffset: 100; }
  45%, 55% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: -100; }
}

.ldr-polygon-morph {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) * 0.9);
  margin: calc(var(--s) * 0.05);
  background: var(--c);
  animation: ldr-polygon-morph-shift 3.2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes ldr-polygon-morph-shift {
  0%, 12% {
    transform: rotate(0deg);
    clip-path: polygon(50% 11%, 72.5% 50%, 95% 89%, 50% 89%, 5% 89%, 27.5% 50%);
  }
  25%, 37% {
    transform: rotate(90deg);
    clip-path: polygon(50% 12%, 88% 12%, 88% 88%, 50% 88%, 12% 88%, 12% 12%);
  }
  50%, 62% {
    transform: rotate(180deg);
    clip-path: polygon(50% 8.4%, 93.75% 40.2%, 77% 91.6%, 50% 91.6%, 23% 91.6%, 6.25% 40.2%);
  }
  75%, 87% {
    transform: rotate(270deg);
    clip-path: polygon(50% 6%, 88.1% 28%, 88.1% 72%, 50% 94%, 11.9% 72%, 11.9% 28%);
  }
  100% {
    transform: rotate(360deg);
    clip-path: polygon(50% 11%, 72.5% 50%, 95% 89%, 50% 89%, 5% 89%, 27.5% 50%);
  }
}

.ldr-sliding-puzzle {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --p: calc(var(--s) * 0.48);
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: calc(var(--s) / 8);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
}
.ldr-sliding-puzzle span {
  position: absolute;
  top: calc(var(--s) * 0.04);
  left: calc(var(--s) * 0.04);
  width: calc(var(--s) * 0.44);
  height: calc(var(--s) * 0.44);
  border-radius: calc(var(--s) / 12);
  background: var(--c);
  animation: ldr-sliding-puzzle-slide 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-sliding-puzzle span:nth-child(2) {
  background: color-mix(in srgb, var(--c) 62%, #fff);
  animation-delay: -2.4s;
}
.ldr-sliding-puzzle span:nth-child(3) {
  background: color-mix(in srgb, var(--c) 70%, #000);
  animation-delay: -1.2s;
}
@keyframes ldr-sliding-puzzle-slide {
  0%        { transform: translate(0, 0); }
  5%, 25%   { transform: translate(0, var(--p)); }
  30%, 50%  { transform: translate(var(--p), var(--p)); }
  55%, 75%  { transform: translate(var(--p), 0); }
  80%, 100% { transform: translate(0, 0); }
}

.ldr-pyramid-3d {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --b: calc(var(--s) * 0.74);
  position: relative;
  width: var(--s);
  height: var(--s);
  perspective: calc(var(--s) * 5);
}
.ldr-pyramid-3d > div {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: ldr-pyramid-3d-turn 3.2s linear infinite;
}
.ldr-pyramid-3d span {
  position: absolute;
  left: calc(50% - var(--b) / 2);
  bottom: calc(var(--s) * 0.19);
  width: var(--b);
  height: var(--b);
  background: var(--c);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  backface-visibility: hidden;
  transform-origin: 50% 100%;
  transform: rotateY(calc(var(--i) * 90deg)) translateZ(calc(var(--b) / 2)) rotateX(30deg);
}
.ldr-pyramid-3d span:nth-child(2) { background: color-mix(in srgb, var(--c) 70%, #000); }
.ldr-pyramid-3d span:nth-child(3) { background: color-mix(in srgb, var(--c) 50%, #000); }
.ldr-pyramid-3d span:nth-child(4) { background: color-mix(in srgb, var(--c) 65%, #fff); }
@keyframes ldr-pyramid-3d-turn {
  from { transform: rotateX(-16deg) rotateY(0deg); }
  to   { transform: rotateX(-16deg) rotateY(360deg); }
}

.ldr-isometric-layers {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-isometric-layers span {
  --f: var(--c);
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s) * 0.92);
  height: calc(var(--s) * 0.46);
  margin: calc(var(--s) * -0.23) 0 0 calc(var(--s) * -0.46);
  translate: 0 calc(var(--y) * var(--s) * 0.2);
  filter: drop-shadow(0 calc(var(--s) / 16) 0 color-mix(in srgb, var(--f) 62%, #000));
  animation: ldr-isometric-layers-lift 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite both;
  animation-delay: calc(var(--i) * 0.14s);
}
.ldr-isometric-layers span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--f);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ldr-isometric-layers span:nth-child(1) { --f: color-mix(in srgb, var(--c) 45%, #fff); }
.ldr-isometric-layers span:nth-child(2) { --f: color-mix(in srgb, var(--c) 72%, #fff); }
@keyframes ldr-isometric-layers-lift {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(calc(var(--s) * -0.12 * var(--a))); }
}

.ldr-wandering-cubes {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) * 0.64);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-wandering-cubes span {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s) * 0.36);
  height: calc(var(--s) * 0.36);
  border-radius: calc(var(--s) / 20);
  background: var(--c);
  animation: ldr-wandering-cubes-move 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-wandering-cubes span:nth-child(2) {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  animation-delay: -0.9s;
}
@keyframes ldr-wandering-cubes-move {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate(var(--d), 0) rotate(-90deg) scale(0.5); }
  50%  { transform: translate(var(--d), var(--d)) rotate(-180deg) scale(1); }
  75%  { transform: translate(0, var(--d)) rotate(-270deg) scale(0.5); }
  100% { transform: translate(0, 0) rotate(-360deg) scale(1); }
}

.ldr-rubiks-cube {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) * 0.62);
  --h: calc(var(--w) / 3);
  --k: color-mix(in srgb, var(--c) 22%, #0b0b0f);
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  perspective: calc(var(--s) * 8);
}
.ldr-rubiks-cube-cube {
  position: relative;
  width: var(--w);
  height: var(--w);
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(-45deg);
}
.ldr-rubiks-cube-slab {
  position: absolute;
  left: 0;
  top: calc(var(--n) * var(--h));
  width: 100%;
  height: var(--h);
  transform-style: preserve-3d;
  animation: ldr-rubiks-cube-twist 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
  animation-delay: calc(var(--n) * 0.35s);
}
.ldr-rubiks-cube-slab span {
  --f: var(--c);
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--k) 0 5%, transparent 5% 28.33%, var(--k) 28.33% 33.33%),
    linear-gradient(var(--k) 0 15%, transparent 15% 85%, var(--k) 85%),
    var(--f);
  backface-visibility: hidden;
  transform: rotateY(calc(var(--r) * 90deg)) translateZ(calc(var(--w) / 2));
}
.ldr-rubiks-cube-slab span:nth-child(1) { --r: 0; }
.ldr-rubiks-cube-slab span:nth-child(2) { --r: 1; --f: color-mix(in srgb, var(--c) 58%, #fff); }
.ldr-rubiks-cube-slab span:nth-child(3) { --r: 2; --f: color-mix(in srgb, var(--c) 55%, #000); }
.ldr-rubiks-cube-slab span:nth-child(4) { --r: 3; --f: color-mix(in srgb, var(--c) 30%, #fff); }
.ldr-rubiks-cube-slab span:nth-child(5) {
  top: calc((var(--h) - var(--w)) / 2);
  bottom: auto;
  height: var(--w);
  background: var(--k);
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
}
.ldr-rubiks-cube-slab:first-child span:nth-child(5) {
  background:
    repeating-linear-gradient(90deg, var(--k) 0 5%, transparent 5% 28.33%, var(--k) 28.33% 33.33%),
    repeating-linear-gradient(0deg, var(--k) 0 5%, transparent 5% 28.33%, var(--k) 28.33% 33.33%),
    color-mix(in srgb, var(--c) 80%, #fff);
}
@keyframes ldr-rubiks-cube-twist {
  0%        { transform: rotateY(0deg); }
  6%, 25%   { transform: rotateY(calc(var(--d) * 90deg)); }
  31%, 50%  { transform: rotateY(calc(var(--d) * 180deg)); }
  56%, 75%  { transform: rotateY(calc(var(--d) * 270deg)); }
  81%, 100% { transform: rotateY(calc(var(--d) * 360deg)); }
}

.ldr-falling-blocks {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --p: calc(var(--s) * 0.32);
  position: relative;
  width: var(--s);
  height: var(--s);
  padding: calc(var(--s) * 0.02);
  border-radius: calc(var(--s) / 14);
  box-shadow: inset 0 calc(var(--s) / -22) 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  animation: ldr-falling-blocks-thud 3.2s infinite;
}
.ldr-falling-blocks-stack {
  position: relative;
  width: 100%;
  height: 100%;
  animation: ldr-falling-blocks-clear 3.2s linear infinite;
}
.ldr-falling-blocks-piece {
  --f: var(--c);
  position: absolute;
  inset: 0;
}
.ldr-falling-blocks-piece span {
  position: absolute;
  left: calc(var(--x) * var(--p));
  top: calc(var(--y) * var(--p));
  width: calc(var(--p) - var(--s) * 0.03);
  height: calc(var(--p) - var(--s) * 0.03);
  border-radius: calc(var(--s) / 28);
  background: var(--f);
}
.ldr-falling-blocks-piece:nth-child(1) {
  animation: ldr-falling-blocks-drop1 3.2s infinite;
}
.ldr-falling-blocks-piece:nth-child(2) {
  --f: color-mix(in srgb, var(--c) 60%, #fff);
  transform-origin: 33.3% 33.3%;
  animation: ldr-falling-blocks-drop2 3.2s infinite, ldr-falling-blocks-snap 3.2s step-end infinite;
}
.ldr-falling-blocks-piece:nth-child(3) {
  --f: color-mix(in srgb, var(--c) 68%, #000);
  animation: ldr-falling-blocks-drop3 3.2s infinite, ldr-falling-blocks-shift 3.2s step-end infinite;
}
@keyframes ldr-falling-blocks-drop1 {
  0%        { translate: 0 calc(var(--p) * -1.9); opacity: 0; }
  3%        { translate: 0 calc(var(--p) * -1.75); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  11%, 100% { translate: 0 0; opacity: 1; }
}
@keyframes ldr-falling-blocks-drop2 {
  0%, 19%   { translate: 0 calc(var(--p) * -1.9); opacity: 0; }
  22%       { translate: 0 calc(var(--p) * -1.75); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  30%, 100% { translate: 0 0; opacity: 1; }
}
@keyframes ldr-falling-blocks-drop3 {
  0%, 38%   { translate: 0 calc(var(--p) * -1.9); opacity: 0; }
  41%       { translate: 0 calc(var(--p) * -1.75); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  49%, 100% { translate: 0 0; opacity: 1; }
}
@keyframes ldr-falling-blocks-snap {
  0%        { rotate: -90deg; }
  26%, 100% { rotate: 0deg; }
}
@keyframes ldr-falling-blocks-shift {
  0%        { transform: translateX(calc(var(--p) * -1)); }
  45%, 100% { transform: translateX(0); }
}
@keyframes ldr-falling-blocks-thud {
  0%, 11%, 15%, 30%, 34%, 49%, 53%, 100% { transform: translateY(0); }
  12%, 31%, 50% { transform: translateY(calc(var(--s) * 0.04)); }
}
@keyframes ldr-falling-blocks-clear {
  0%, 68%   { opacity: 1; transform: translateY(0); }
  72%       { opacity: 0.25; }
  76%       { opacity: 1; }
  80%       { opacity: 0.25; }
  84%       { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  94%, 100% { opacity: 0; transform: translateY(calc(var(--p) * 0.5)); }
}

.ldr-nested-squares {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-nested-squares span {
  position: absolute;
  inset: 0;
  border: calc(var(--s) / 12) solid var(--c);
  border-radius: calc(var(--s) / 24);
  animation: ldr-nested-squares-spin 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-nested-squares span:nth-child(2) {
  inset: calc(var(--s) / 6);
  border-color: color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent);
  animation-delay: 120ms;
}
.ldr-nested-squares span:nth-child(3) {
  inset: calc(var(--s) / 3);
  border-color: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  animation-delay: 240ms;
}
@keyframes ldr-nested-squares-spin {
  to { transform: rotate(360deg); }
}

.ldr-checkerboard-flip {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--s) / 24);
  width: var(--s);
  height: var(--s);
}
.ldr-checkerboard-flip span {
  position: relative;
  transform-style: preserve-3d;
  animation: ldr-checkerboard-flip-turn 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
  animation-delay: calc(var(--d) * 0.08s);
}
.ldr-checkerboard-flip span::before,
.ldr-checkerboard-flip span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--s) / 40);
  backface-visibility: hidden;
}
.ldr-checkerboard-flip span::before {
  background: var(--c);
}
.ldr-checkerboard-flip span::after {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  transform: rotateY(180deg);
}
@keyframes ldr-checkerboard-flip-turn {
  0%, 12%   { transform: perspective(calc(var(--s) * 2)) rotate3d(1, -1, 0, calc(var(--p) * 180deg)); }
  42%, 62%  { transform: perspective(calc(var(--s) * 2)) rotate3d(1, -1, 0, calc(var(--p) * 180deg + 180deg)); }
  92%, 100% { transform: perspective(calc(var(--s) * 2)) rotate3d(1, -1, 0, calc(var(--p) * 180deg + 360deg)); }
}

.ldr-isometric-grid-wave {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --t: calc(var(--s) * 0.2);
  display: grid;
  place-items: center;
  width: calc(var(--s) * 1.4);
  height: var(--s);
}
.ldr-isometric-grid-wave-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--t));
  gap: calc(var(--s) * 0.05);
  margin-top: calc(var(--s) * 0.2);
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(45deg);
}
.ldr-isometric-grid-wave span {
  position: relative;
  width: var(--t);
  height: var(--t);
  background: color-mix(in srgb, var(--c) 82%, #fff);
  transform-style: preserve-3d;
  animation: ldr-isometric-grid-wave-rise 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite both;
  animation-delay: calc(var(--d) * 0.1s);
}
.ldr-isometric-grid-wave span::before,
.ldr-isometric-grid-wave span::after {
  content: "";
  position: absolute;
}
.ldr-isometric-grid-wave span::before {
  left: 0;
  top: 100%;
  width: 100%;
  height: var(--t);
  background: var(--c);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}
.ldr-isometric-grid-wave span::after {
  left: 100%;
  top: 0;
  width: var(--t);
  height: 100%;
  background: color-mix(in srgb, var(--c) 62%, #000);
  transform-origin: 0 50%;
  transform: rotateY(90deg);
}
@keyframes ldr-isometric-grid-wave-rise {
  0%, 60%, 100% { transform: translateZ(0); }
  30%           { transform: translateZ(calc(var(--s) * 0.26)); }
}

.ldr-triangle-trio {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --a: calc(var(--s) * 0.52);
  --h: calc(var(--a) * 0.866);
  --g: calc(var(--s) * 0.05);
  position: relative;
  width: calc(var(--a) * 2 + var(--g));
  height: calc(var(--h) * 2 + var(--g));
}
.ldr-triangle-trio span {
  position: absolute;
  bottom: 0;
  width: var(--a);
  height: var(--h);
  background: var(--c);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: 50% 66.67%;
  animation: ldr-triangle-trio-spin 1.8s infinite;
}
.ldr-triangle-trio span:nth-child(1) {
  top: 0;
  bottom: auto;
  left: calc(var(--a) / 2 + var(--g) / 2);
}
.ldr-triangle-trio span:nth-child(2) {
  right: 0;
  background: color-mix(in srgb, var(--c) 72%, #000);
  animation-delay: 0.2s;
}
.ldr-triangle-trio span:nth-child(3) {
  left: 0;
  background: color-mix(in srgb, var(--c) 60%, #fff);
  animation-delay: 0.4s;
}
@keyframes ldr-triangle-trio-spin {
  0%        { transform: rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  16%       { transform: rotate(60deg) scale(0.5); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  34%, 100% { transform: rotate(120deg) scale(1); }
}

.ldr-star-morph {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  background: var(--c);
  animation: ldr-star-morph-shift 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ldr-star-morph-shift {
  0%, 8% {
    transform: rotate(0deg) scale(1);
    clip-path: polygon(50% 2%, 60.8% 35.2%, 95.7% 35.2%, 67.4% 55.7%, 78.2% 88.8%, 50% 68.3%, 21.8% 88.8%, 32.6% 55.7%, 4.3% 35.2%, 39.2% 35.2%);
  }
  42%, 58% {
    transform: rotate(72deg) scale(0.86);
    clip-path: polygon(50% 2%, 72.8% 18.6%, 95.7% 35.2%, 86.9% 62%, 78.2% 88.8%, 50% 88.8%, 21.8% 88.8%, 13.1% 62%, 4.3% 35.2%, 27.2% 18.6%);
  }
  92%, 100% {
    transform: rotate(144deg) scale(1);
    clip-path: polygon(50% 2%, 60.8% 35.2%, 95.7% 35.2%, 67.4% 55.7%, 78.2% 88.8%, 50% 68.3%, 21.8% 88.8%, 32.6% 55.7%, 4.3% 35.2%, 39.2% 35.2%);
  }
}

.ldr-tumbling-cube {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) * 0.56);
  position: relative;
  width: var(--s);
  height: calc(var(--s) * 1.3);
}
.ldr-tumbling-cube::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--s) * 0.04);
  width: calc(var(--s) * 0.62);
  height: calc(var(--s) * 0.1);
  margin-left: calc(var(--s) * -0.31);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  animation: ldr-tumbling-cube-shadow 0.8s infinite;
}
.ldr-tumbling-cube span {
  position: absolute;
  left: 50%;
  bottom: calc(var(--s) * 0.08);
  width: var(--w);
  height: calc(var(--w) * 1.1547);
  margin-left: calc(var(--w) / -2);
  transform-origin: 50% 100%;
  animation: ldr-tumbling-cube-hop 0.8s infinite;
}
.ldr-tumbling-cube span::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: conic-gradient(from -60deg, color-mix(in srgb, var(--c) 55%, #fff) 0 120deg, var(--c) 0 240deg, color-mix(in srgb, var(--c) 62%, #000) 0);
  animation: ldr-tumbling-cube-turn 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ldr-tumbling-cube-hop {
  0%   { transform: translateY(0) scale(1.14, 0.82); animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); }
  12%  { transform: translateY(0) scale(0.9, 1.1); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  50%  { transform: translateY(calc(var(--s) * -0.42)) scale(1, 1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  88%  { transform: translateY(0) scale(0.94, 1.06); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  100% { transform: translateY(0) scale(1.14, 0.82); }
}
@keyframes ldr-tumbling-cube-turn {
  0%, 4%     { transform: rotate(0deg); }
  29%, 37%   { transform: rotate(120deg); }
  62%, 70%   { transform: rotate(240deg); }
  96%, 100%  { transform: rotate(360deg); }
}
@keyframes ldr-tumbling-cube-shadow {
  0%, 100% { transform: scale(1.1); opacity: 1; }
  50%      { transform: scale(0.55); opacity: 0.45; }
}

.ldr-rolling-square {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) * 0.42);
  position: relative;
  width: calc(var(--w) * 3);
  height: var(--s);
}
.ldr-rolling-square::before {
  content: "";
  position: absolute;
  left: calc(var(--s) * -0.04);
  right: calc(var(--s) * -0.04);
  bottom: calc(var(--s) * 0.12);
  height: calc(var(--s) / 20);
  border-radius: calc(var(--s) / 40);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
}
.ldr-rolling-square span {
  position: absolute;
  left: 0;
  bottom: calc(var(--s) * 0.17);
  width: var(--w);
  height: var(--w);
  animation: ldr-rolling-square-step 2.4s step-end infinite;
}
.ldr-rolling-square span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--s) / 30);
  background: var(--c);
  animation: ldr-rolling-square-roll 2.4s infinite;
}
@keyframes ldr-rolling-square-step {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(var(--w)); }
  50%  { transform: translateX(calc(var(--w) * 2)); }
  75%  { transform: translateX(var(--w)); }
  100% { transform: translateX(0); }
}
@keyframes ldr-rolling-square-roll {
  0%   { transform: rotate(0deg); transform-origin: 100% 100%; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.9); }
  19%  { transform: rotate(90deg); transform-origin: 100% 100%; animation-timing-function: step-end; }
  25%  { transform: rotate(0deg); transform-origin: 100% 100%; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.9); }
  44%  { transform: rotate(90deg); transform-origin: 100% 100%; animation-timing-function: step-end; }
  50%  { transform: rotate(0deg); transform-origin: 0% 100%; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.9); }
  69%  { transform: rotate(-90deg); transform-origin: 0% 100%; animation-timing-function: step-end; }
  75%  { transform: rotate(0deg); transform-origin: 0% 100%; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.9); }
  94%  { transform: rotate(-90deg); transform-origin: 0% 100%; animation-timing-function: step-end; }
  100% { transform: rotate(0deg); transform-origin: 0% 100%; }
}

.ldr-hexagon-segments {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) * 1.04);
  animation: ldr-hexagon-segments-turn 2.4s linear infinite;
}
.ldr-hexagon-segments span {
  position: absolute;
  inset: 0;
  background: var(--c);
  animation: ldr-hexagon-segments-grow 2.4s infinite both;
  animation-delay: calc(var(--i) * 0.1s);
}
.ldr-hexagon-segments span:nth-child(even) {
  background: color-mix(in srgb, var(--c) 65%, #000);
}
.ldr-hexagon-segments span:nth-child(1) { clip-path: polygon(50% 50%, 50% 0, 100% 25%); }
.ldr-hexagon-segments span:nth-child(2) { clip-path: polygon(50% 50%, 100% 25%, 100% 75%); }
.ldr-hexagon-segments span:nth-child(3) { clip-path: polygon(50% 50%, 100% 75%, 50% 100%); }
.ldr-hexagon-segments span:nth-child(4) { clip-path: polygon(50% 50%, 50% 100%, 0 75%); }
.ldr-hexagon-segments span:nth-child(5) { clip-path: polygon(50% 50%, 0 75%, 0 25%); }
.ldr-hexagon-segments span:nth-child(6) { clip-path: polygon(50% 50%, 0 25%, 50% 0); }
@keyframes ldr-hexagon-segments-grow {
  0%        { transform: scale(0); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  15%, 50%  { transform: scale(0.94); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  64%, 100% { transform: scale(0); }
}
@keyframes ldr-hexagon-segments-turn {
  to { transform: rotate(120deg); }
}

.ldr-tangram {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.8);
  height: calc(var(--s) * 0.8);
  margin: calc(var(--s) * 0.1);
}
.ldr-tangram span {
  position: absolute;
  inset: 0;
  background: var(--c);
  animation: ldr-tangram-burst 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-tangram span:nth-child(1) {
  --x: 0; --y: -0.2; --r: -30deg;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
  transform-origin: 50% 16.7%;
}
.ldr-tangram span:nth-child(2) {
  --x: -0.2; --y: 0; --r: 30deg;
  background: color-mix(in srgb, var(--c) 70%, #000);
  clip-path: polygon(0 0, 50% 50%, 0 100%);
  transform-origin: 16.7% 50%;
}
.ldr-tangram span:nth-child(3) {
  --x: 0.2; --y: 0.2; --r: 45deg;
  background: color-mix(in srgb, var(--c) 60%, #fff);
  clip-path: polygon(100% 50%, 100% 100%, 50% 100%);
  transform-origin: 83.3% 83.3%;
}
.ldr-tangram span:nth-child(4) {
  --x: 0.12; --y: 0; --r: -90deg;
  background: color-mix(in srgb, var(--c) 40%, #fff);
  clip-path: polygon(50% 50%, 75% 25%, 75% 75%);
  transform-origin: 66.7% 50%;
}
.ldr-tangram span:nth-child(5) {
  --x: 0; --y: 0.16; --r: 45deg;
  background: color-mix(in srgb, var(--c) 52%, #000);
  clip-path: polygon(50% 50%, 75% 75%, 50% 100%, 25% 75%);
  transform-origin: 50% 75%;
}
.ldr-tangram span:nth-child(6) {
  --x: -0.15; --y: 0.22; --r: -60deg;
  background: color-mix(in srgb, var(--c) 80%, #fff);
  clip-path: polygon(0 100%, 25% 75%, 50% 100%);
  transform-origin: 25% 91.7%;
}
.ldr-tangram span:nth-child(7) {
  --x: 0.24; --y: -0.08; --r: 60deg;
  background: color-mix(in srgb, var(--c) 82%, #000);
  clip-path: polygon(75% 25%, 100% 0, 100% 50%, 75% 75%);
  transform-origin: 87.5% 37.5%;
}
@keyframes ldr-tangram-burst {
  0%, 18%, 88%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.94); }
  44%, 62%           { transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)) rotate(var(--r)) scale(0.94); }
}

.ldr-origami-fold {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  perspective: calc(var(--s) * 3);
}
.ldr-origami-fold span {
  --a: 0;
  --b: 0;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: ldr-origami-fold-fold 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-origami-fold span::before,
.ldr-origami-fold span::after {
  content: "";
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.ldr-origami-fold span::before {
  background: var(--c);
  clip-path: var(--p);
}
.ldr-origami-fold span::after {
  background: color-mix(in srgb, var(--c) 55%, #fff);
  clip-path: var(--q);
  transform: rotateY(180deg);
}
.ldr-origami-fold span:nth-child(1) {
  --p: polygon(100% 50%, 50% 100%, 50% 50%);
  --q: polygon(0 50%, 50% 100%, 50% 50%);
}
.ldr-origami-fold span:nth-child(2) {
  --a: 1;
  --p: polygon(50% 100%, 0 50%, 50% 50%);
  --q: polygon(50% 100%, 100% 50%, 50% 50%);
}
.ldr-origami-fold span:nth-child(3) {
  --b: 1;
  --p: polygon(50% 0, 100% 50%, 50% 50%);
  --q: polygon(50% 0, 0 50%, 50% 50%);
}
.ldr-origami-fold span:nth-child(4) {
  --a: 1;
  --b: 1;
  --p: polygon(50% 0, 50% 50%, 0 50%);
  --q: polygon(50% 0, 50% 50%, 100% 50%);
}
.ldr-origami-fold span:nth-child(1)::before {
  background: color-mix(in srgb, var(--c) 66%, #000);
}
.ldr-origami-fold span:nth-child(2)::before,
.ldr-origami-fold span:nth-child(3)::before {
  background: color-mix(in srgb, var(--c) 82%, #000);
}
@keyframes ldr-origami-fold-fold {
  0%, 8%   { transform: rotateY(0deg) rotateX(0deg); }
  28%, 40% { transform: rotateY(calc(var(--a) * 180deg)) rotateX(0deg); }
  56%      { transform: rotateY(0deg) rotateX(0deg); }
  76%, 88% { transform: rotateY(0deg) rotateX(calc(var(--b) * -180deg)); }
  100%     { transform: rotateY(0deg) rotateX(0deg); }
}

.ldr-wireframe-cube {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  perspective: calc(var(--s) * 4);
  transform-style: preserve-3d;
}
.ldr-wireframe-cube-outer,
.ldr-wireframe-cube-inner {
  --e: calc(var(--s) * 0.56);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--e);
  height: var(--e);
  margin: calc(var(--e) / -2) 0 0 calc(var(--e) / -2);
  transform-style: preserve-3d;
  animation: ldr-wireframe-cube-tumble 4.8s linear infinite;
}
.ldr-wireframe-cube-inner {
  --e: calc(var(--s) * 0.26);
  animation-direction: reverse;
}
.ldr-wireframe-cube span {
  position: absolute;
  inset: 0;
  border: calc(var(--s) / 28) solid var(--c);
}
.ldr-wireframe-cube-inner span {
  border-width: calc(var(--s) / 40);
  border-color: color-mix(in srgb, var(--ldr-color, #3b82f6) 80%, transparent);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent);
}
.ldr-wireframe-cube span:nth-child(1) { transform: translateZ(calc(var(--e) / 2)); }
.ldr-wireframe-cube span:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--e) / 2)); }
.ldr-wireframe-cube span:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--e) / 2)); }
.ldr-wireframe-cube span:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--e) / 2)); }
.ldr-wireframe-cube span:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--e) / 2)); }
.ldr-wireframe-cube span:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--e) / 2)); }
@keyframes ldr-wireframe-cube-tumble {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}

.ldr-kaleidoscope {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  animation: ldr-kaleidoscope-turn 6s linear infinite;
}
.ldr-kaleidoscope span {
  --m: 1;
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 50%, 21.1% 0, 78.9% 0);
  transform: rotate(calc(var(--i) * 60deg)) scaleX(var(--m));
}
.ldr-kaleidoscope span:nth-child(even) {
  --m: -1;
}
.ldr-kaleidoscope span::before {
  content: "";
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(circle, var(--c) 0 38%, transparent 40%) 0 0 / calc(var(--s) * 0.5) calc(var(--s) * 0.5),
    radial-gradient(circle, color-mix(in srgb, var(--c) 50%, #fff) 0 22%, transparent 24%) calc(var(--s) * 0.25) calc(var(--s) * 0.25) / calc(var(--s) * 0.5) calc(var(--s) * 0.5),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent) 0 calc(var(--s) * 0.04), transparent 0 calc(var(--s) * 0.177));
  animation: ldr-kaleidoscope-drift 3s linear infinite;
}
@keyframes ldr-kaleidoscope-drift {
  to { transform: translate(calc(var(--s) * 0.5), calc(var(--s) * 0.5)); }
}
@keyframes ldr-kaleidoscope-turn {
  to { transform: rotate(120deg); }
}

.ldr-filling-square {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 0.8);
  height: calc(var(--s) * 0.8);
  margin: calc(var(--s) * 0.1);
  padding: calc(var(--s) / 24);
  border: calc(var(--s) / 14) solid var(--c);
  border-radius: calc(var(--s) / 20);
  animation: ldr-filling-square-flip 2.4s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.ldr-filling-square::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--s) / 60);
  background: var(--c);
  animation: ldr-filling-square-fill 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ldr-filling-square-flip {
  0%        { transform: rotate(0deg); }
  25%, 50%  { transform: rotate(180deg); }
  75%, 100% { transform: rotate(360deg); }
}
@keyframes ldr-filling-square-fill {
  0%, 25% { transform: scaleY(0); transform-origin: 50% 0; }
  50%     { transform: scaleY(1); transform-origin: 50% 0; }
  75%     { transform: scaleY(1); transform-origin: 50% 100%; }
  100%    { transform: scaleY(0); transform-origin: 50% 100%; }
}

.ldr-unfolding-cube {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --a: calc(var(--s) * 0.44);
  display: grid;
  place-items: center;
  width: calc(var(--s) * 2);
  height: calc(var(--s) * 1.3);
  perspective: calc(var(--s) * 8);
}
.ldr-unfolding-cube-floor {
  position: relative;
  width: var(--a);
  height: var(--a);
  margin-top: calc(var(--s) * 0.3);
  transform-style: preserve-3d;
  animation: ldr-unfolding-cube-spin 7.2s linear infinite;
}
.ldr-unfolding-cube span {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--a);
  height: var(--a);
  background: var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, #000);
  transform-style: preserve-3d;
  animation: ldr-unfolding-cube-hinge 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-unfolding-cube-floor > span:nth-child(1) {
  background: color-mix(in srgb, var(--c) 45%, #000);
  animation: none;
}
.ldr-unfolding-cube-floor > span:nth-child(2) {
  top: 100%;
  transform-origin: 50% 0;
}
.ldr-unfolding-cube-floor > span:nth-child(3) {
  left: 100%;
  transform-origin: 0 50%;
  background: color-mix(in srgb, var(--c) 72%, #000);
}
.ldr-unfolding-cube-floor > span:nth-child(4) {
  left: -100%;
  transform-origin: 100% 50%;
  background: color-mix(in srgb, var(--c) 68%, #fff);
}
.ldr-unfolding-cube-floor > span:nth-child(5) {
  top: -100%;
  transform-origin: 50% 100%;
  background: color-mix(in srgb, var(--c) 58%, #000);
}
.ldr-unfolding-cube span span {
  top: -100%;
  transform-origin: 50% 100%;
  background: color-mix(in srgb, var(--c) 50%, #fff);
  animation-delay: -3.42s;
}
@keyframes ldr-unfolding-cube-hinge {
  0%, 14%, 84%, 100% { transform: rotateX(calc(var(--x) * 90deg)) rotateY(calc(var(--y) * 90deg)); }
  38%, 60%           { transform: rotateX(0deg) rotateY(0deg); }
}
@keyframes ldr-unfolding-cube-spin {
  from { transform: rotateX(58deg) rotateZ(0deg); }
  to   { transform: rotateX(58deg) rotateZ(360deg); }
}

.ldr-cube-assemble {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.8);
  height: calc(var(--s) * 0.924);
  animation: ldr-cube-assemble-pop 2.8s infinite;
}
.ldr-cube-assemble span {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c) 55%, #fff);
  clip-path: polygon(50% 0, 100% 25%, 50% 50%, 0 25%);
  animation: ldr-cube-assemble-fly 2.8s infinite both;
  animation-delay: calc(var(--i) * 0.12s);
}
.ldr-cube-assemble span:nth-child(2) {
  background: var(--c);
  clip-path: polygon(100% 25%, 100% 75%, 50% 100%, 50% 50%);
}
.ldr-cube-assemble span:nth-child(3) {
  background: color-mix(in srgb, var(--c) 62%, #000);
  clip-path: polygon(0 25%, 50% 50%, 50% 100%, 0 75%);
}
@keyframes ldr-cube-assemble-fly {
  0%        { transform: translate(calc(var(--x) * var(--s) * 0.5), calc(var(--y) * var(--s) * 0.5)); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  24%, 62%  { transform: translate(0, 0); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.3); }
  86%, 100% { transform: translate(calc(var(--x) * var(--s) * 0.5), calc(var(--y) * var(--s) * 0.5)); opacity: 0; }
}
@keyframes ldr-cube-assemble-pop {
  0%, 32%, 46%, 100% { transform: scale(1); }
  38%                { transform: scale(1.08); }
}

.ldr-card-stack {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  perspective: calc(var(--s) * 3);
  transform-style: preserve-3d;
}
.ldr-card-stack span {
  position: absolute;
  left: calc(50% - var(--s) * 0.46);
  bottom: calc(var(--s) * 0.14);
  width: calc(var(--s) * 0.92);
  height: calc(var(--s) * 0.6);
  border-radius: calc(var(--s) / 12);
  background-color: var(--c);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.6) 0 0),
    linear-gradient(rgba(255, 255, 255, 0.35) 0 0);
  background-size: 42% 11%, 64% 9%;
  background-position: 16% 32%, 16% 66%;
  background-repeat: no-repeat;
  animation: ldr-card-stack-cycle 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-card-stack span:nth-child(2) { animation-delay: -2s; }
.ldr-card-stack span:nth-child(3) { animation-delay: -1s; }
@keyframes ldr-card-stack-cycle {
  0%, 18% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
    background-color: var(--c);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  28% {
    transform: translate3d(calc(var(--s) * 0.9), calc(var(--s) * 0.04), 0) rotate(18deg);
    opacity: 0;
    background-color: var(--c);
  }
  29% {
    transform: translate3d(0, calc(var(--s) * -0.28), calc(var(--s) * -0.6)) rotate(0deg);
    opacity: 0;
    background-color: color-mix(in srgb, var(--c) 40%, #fff);
  }
  38%, 51% {
    transform: translate3d(0, calc(var(--s) * -0.28), calc(var(--s) * -0.6)) rotate(0deg);
    opacity: 1;
    background-color: color-mix(in srgb, var(--c) 40%, #fff);
  }
  61%, 85% {
    transform: translate3d(0, calc(var(--s) * -0.14), calc(var(--s) * -0.3)) rotate(0deg);
    opacity: 1;
    background-color: color-mix(in srgb, var(--c) 68%, #fff);
  }
  95%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
    background-color: var(--c);
  }
}

.ldr-tile-ring-3d {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  place-items: center;
  width: calc(var(--s) * 1.4);
  height: var(--s);
  perspective: calc(var(--s) * 5);
}
.ldr-tile-ring-3d-ring {
  position: relative;
  width: calc(var(--s) * 0.26);
  height: calc(var(--s) * 0.26);
  transform-style: preserve-3d;
  animation: ldr-tile-ring-3d-turn 4s linear infinite;
}
.ldr-tile-ring-3d span {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(calc(var(--s) * 0.5));
  animation: ldr-tile-ring-3d-wave 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: calc(var(--i) * -0.4s);
}
.ldr-tile-ring-3d span::before,
.ldr-tile-ring-3d span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--s) / 40);
  backface-visibility: hidden;
}
.ldr-tile-ring-3d span::before {
  background: var(--c);
}
.ldr-tile-ring-3d span::after {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 28%, transparent);
  transform: rotateY(180deg);
}
@keyframes ldr-tile-ring-3d-wave {
  0%, 100% { translate: 0 calc(var(--s) * -0.09); }
  50%      { translate: 0 calc(var(--s) * 0.09); }
}
@keyframes ldr-tile-ring-3d-turn {
  from { transform: rotateX(-14deg) rotateY(0deg); }
  to   { transform: rotateX(-14deg) rotateY(360deg); }
}

.ldr-split-square {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.66);
  height: calc(var(--s) * 0.66);
  margin: calc(var(--s) * 0.17);
  animation: ldr-split-square-turn 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-split-square span {
  --k: 1;
  position: absolute;
  inset: 0;
  background: var(--c);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  animation: ldr-split-square-slide 0.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-split-square span:nth-child(2) {
  --k: -1;
  background: color-mix(in srgb, var(--c) 58%, #fff);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
@keyframes ldr-split-square-slide {
  0%, 100% { transform: translate(0, 0); }
  30%, 70% { transform: translate(calc(var(--k) * var(--s) * 0.1), calc(var(--k) * var(--s) * -0.16)); }
}
@keyframes ldr-split-square-turn {
  0%, 7.5%     { transform: rotate(0deg); }
  17.5%, 32.5% { transform: rotate(90deg); }
  42.5%, 57.5% { transform: rotate(180deg); }
  67.5%, 82.5% { transform: rotate(270deg); }
  92.5%, 100%  { transform: rotate(360deg); }
}

.ldr-pixel-hourglass {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --p: calc(var(--s) / 8);
  position: relative;
  width: calc(var(--p) * 7);
  height: var(--s);
  animation: ldr-pixel-hourglass-flip 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-pixel-hourglass::before,
.ldr-pixel-hourglass::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ldr-pixel-hourglass::before {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  clip-path: polygon(14.29% 12.5%, 85.71% 12.5%, 85.71% 25%, 71.43% 25%, 71.43% 37.5%, 57.14% 37.5%, 57.14% 62.5%, 71.43% 62.5%, 71.43% 75%, 85.71% 75%, 85.71% 87.5%, 14.29% 87.5%, 14.29% 75%, 28.57% 75%, 28.57% 62.5%, 42.86% 62.5%, 42.86% 37.5%, 28.57% 37.5%, 28.57% 25%, 14.29% 25%);
}
.ldr-pixel-hourglass::after {
  background:
    linear-gradient(var(--c) 0 0) top / 100% 11% no-repeat,
    linear-gradient(var(--c) 0 0) bottom / 100% 11% no-repeat;
}
.ldr-pixel-hourglass span {
  --o: 0;
  position: absolute;
  left: calc(var(--x) * var(--p));
  top: calc(var(--y) * var(--p));
  width: var(--p);
  height: var(--p);
  border: calc(var(--p) * 0.08) solid transparent;
  background: var(--c) padding-box;
  animation: ldr-pixel-hourglass-grain 4s step-end infinite;
  animation-delay: calc(var(--i) * 0.16s + var(--o) * 2.08s - 3.88s);
}
@keyframes ldr-pixel-hourglass-grain {
  0%       { opacity: 0; }
  50%, 100% { opacity: 1; }
}
@keyframes ldr-pixel-hourglass-flip {
  0%, 40%  { transform: rotate(0deg); }
  50%, 90% { transform: rotate(180deg); }
  100%     { transform: rotate(360deg); }
}

.ldr-bouncing-shapes {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: calc(var(--s) * 1.5);
  height: var(--s);
  padding-bottom: calc(var(--s) * 0.1);
}
.ldr-bouncing-shapes span {
  position: relative;
  width: calc(var(--s) * 0.34);
  height: calc(var(--s) * 0.34);
  transform-origin: 50% 100%;
  animation: ldr-bouncing-shapes-hop 1.5s infinite both;
  animation-delay: calc(var(--i) * 0.16s);
}
.ldr-bouncing-shapes span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  animation: ldr-bouncing-shapes-spin 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite both;
  animation-delay: calc(var(--i) * 0.16s);
}
.ldr-bouncing-shapes span:nth-child(1)::before {
  clip-path: polygon(50% 6.7%, 100% 93.3%, 0 93.3%);
  transform-origin: 50% 64.4%;
}
.ldr-bouncing-shapes span:nth-child(2)::before {
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 70%, #000);
}
.ldr-bouncing-shapes span:nth-child(3)::before {
  inset: 6%;
  border-radius: calc(var(--s) / 30);
  background: color-mix(in srgb, var(--c) 60%, #fff);
}
@keyframes ldr-bouncing-shapes-hop {
  0%, 44%, 100% { transform: translateY(0) scale(1, 1); }
  6%  { transform: translateY(0) scale(1.18, 0.8); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  22% { transform: translateY(calc(var(--s) * -0.5)) scale(0.94, 1.06); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  36% { transform: translateY(0) scale(1.14, 0.84); animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
}
@keyframes ldr-bouncing-shapes-spin {
  0%, 6%    { transform: rotate(0deg); }
  36%, 100% { transform: rotate(var(--r)); }
}

.ldr-atom {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-atom::before {
  content: "";
  position: absolute;
  inset: 39%;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 8) color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  animation: ldr-atom-core 1.2s ease-in-out infinite;
}
.ldr-atom > span {
  position: absolute;
  top: 33%;
  left: 0;
  width: 100%;
  height: 34%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  border-radius: 50%;
}
.ldr-atom > span:nth-child(2) { transform: rotate(60deg); }
.ldr-atom > span:nth-child(3) { transform: rotate(-60deg); }
.ldr-atom > span > span {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: ldr-atom-x 0.6s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.ldr-atom > span > span > span {
  position: absolute;
  width: calc(var(--s) / 8);
  height: calc(var(--s) / 8);
  margin: calc(var(--s) / -16);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-atom-y 0.6s cubic-bezier(0.37, 0, 0.63, 1) -0.3s infinite alternate;
}
.ldr-atom > span:nth-child(2) > span { animation-delay: -0.4s; }
.ldr-atom > span:nth-child(2) > span > span { animation-delay: -0.7s; }
.ldr-atom > span:nth-child(3) > span { animation-delay: -0.8s; }
.ldr-atom > span:nth-child(3) > span > span { animation-delay: -1.1s; }
@keyframes ldr-atom-x {
  from { transform: translateX(calc(var(--s) * -0.5)); }
  to   { transform: translateX(calc(var(--s) * 0.5)); }
}
@keyframes ldr-atom-y {
  from { transform: translateY(calc(var(--s) * -0.17)); }
  to   { transform: translateY(calc(var(--s) * 0.17)); }
}
@keyframes ldr-atom-core {
  0%, 100% { transform: scale(0.8); }
  50%      { transform: scale(1); }
}

.ldr-saturn {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.5);
  height: var(--s);
  transform: rotate(-16deg);
  transform-style: preserve-3d;
}
.ldr-saturn-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 0.62);
  height: calc(var(--s) * 0.62);
  margin: calc(var(--s) * -0.31);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 65%, #000));
}
.ldr-saturn-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 1.4);
  height: calc(var(--s) * 1.4);
  margin: calc(var(--s) * -0.7);
  border-radius: 50%;
  background: conic-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent) 0 35%, var(--c));
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 63% 80%, transparent 81% 85%, #000 86% 99%, transparent);
  mask: radial-gradient(closest-side, transparent 62%, #000 63% 80%, transparent 81% 85%, #000 86% 99%, transparent);
  animation: ldr-saturn-spin 3s linear infinite;
}
@keyframes ldr-saturn-spin {
  from { transform: rotateX(70deg) rotateZ(0deg); }
  to   { transform: rotateX(70deg) rotateZ(360deg); }
}

.ldr-moon-phases {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --dark: color-mix(in srgb, var(--c) 22%, #0f172a);
  position: relative;
  width: var(--s);
  height: var(--s);
  overflow: hidden;
  border-radius: 50%;
  background: var(--dark);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
}
/* The lit half: right while waxing, left while waning. */
.ldr-moon-phases::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  background: var(--c);
  animation: ldr-moon-phases-half 3.2s step-end infinite;
}
/* The terminator: a dark ellipse (crescent) or a lit one (gibbous). */
.ldr-moon-phases::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--dark);
  animation:
    ldr-moon-phases-terminator 3.2s infinite,
    ldr-moon-phases-tone 3.2s step-end infinite;
}
@keyframes ldr-moon-phases-half {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-100%); }
}
@keyframes ldr-moon-phases-terminator {
  0%, 50%  { transform: scaleX(1); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
  25%, 75% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
  100%     { transform: scaleX(1); }
}
@keyframes ldr-moon-phases-tone {
  0%, 75%, 100% { background: var(--dark); }
  25%           { background: var(--c); }
}

.ldr-eclipse {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --moon: radial-gradient(circle, transparent calc(var(--s) * 0.52), #000 calc(var(--s) * 0.52 + 0.5px)) 0 0 / 320% 100% no-repeat;
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-eclipse-corona {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--s) / 40) var(--c), 0 0 calc(var(--s) / 4) calc(var(--s) / 16) color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  opacity: 0;
  animation: ldr-eclipse-corona 3s infinite;
}
.ldr-eclipse-sun {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  -webkit-mask: var(--moon);
  mask: var(--moon);
  animation: ldr-eclipse-transit 3s infinite;
}
@keyframes ldr-eclipse-transit {
  0%       { -webkit-mask-position: 0% 0; mask-position: 0% 0; animation-timing-function: cubic-bezier(0.3, 0, 0.45, 1); }
  42%, 58% { -webkit-mask-position: 50% 0; mask-position: 50% 0; animation-timing-function: cubic-bezier(0.55, 0, 0.7, 1); }
  100%     { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
@keyframes ldr-eclipse-corona {
  0%, 34%, 66%, 100% { opacity: 0; }
  42%, 58%           { opacity: 1; }
}

.ldr-domino {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 2.1);
  height: calc(var(--s) * 0.6);
}
.ldr-domino::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
}
.ldr-domino span {
  position: absolute;
  bottom: 1px;
  left: calc(var(--i) * var(--s) * 0.36);
  width: calc(var(--s) / 10);
  height: calc(var(--s) / 2);
  border-radius: calc(var(--s) / 40);
  background: var(--c);
  transform-origin: 100% 100%;
  animation: ldr-domino-topple 2.4s infinite;
  animation-delay: calc(var(--i) * 0.14s);
}
.ldr-domino span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 20%;
  right: 20%;
  height: 1px;
  background: color-mix(in srgb, var(--c) 45%, #fff);
}
.ldr-domino span:last-child { animation-name: ldr-domino-land; }
/* Leans 31deg: its top corner comes to rest on the next domino. */
@keyframes ldr-domino-topple {
  0%       { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  6%       { transform: rotate(31deg); animation-timing-function: ease-out; }
  8%       { transform: rotate(26deg); animation-timing-function: ease-in; }
  10%, 52% { transform: rotate(31deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  62%, 100% { transform: rotate(0deg); }
}
@keyframes ldr-domino-land {
  0%       { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  9%       { transform: rotate(90deg); animation-timing-function: ease-out; }
  11%      { transform: rotate(80deg); animation-timing-function: ease-in; }
  13%, 52% { transform: rotate(90deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  62%, 100% { transform: rotate(0deg); }
}

.ldr-water-drop {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.4);
  height: calc(var(--s) * 1.1);
}
.ldr-water-drop-drop {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) / 5);
  height: calc(var(--s) / 5);
  margin-left: calc(var(--s) / -10);
  border-radius: 0 50% 50% 50%;
  background: var(--c);
  animation: ldr-water-drop-fall 1.8s infinite;
}
.ldr-water-drop-ring {
  position: absolute;
  top: 84%;
  left: 50%;
  width: var(--s);
  height: calc(var(--s) * 0.3);
  margin: calc(var(--s) * -0.15) 0 0 calc(var(--s) * -0.5);
  box-sizing: border-box;
  border: calc(var(--s) / 20) solid var(--c);
  border-radius: 50%;
  opacity: 0;
  animation: ldr-water-drop-ring 1.8s cubic-bezier(0.15, 0.6, 0.35, 1) -1.15s infinite;
}
/* Each ripple starts at impact (0.65s) and lives a full cycle, overlapping the next fall. */
.ldr-water-drop-ring + .ldr-water-drop-ring { animation-delay: -0.9s; }
.ldr-water-drop-jet {
  position: absolute;
  top: 84%;
  left: 50%;
  width: calc(var(--s) / 9);
  height: calc(var(--s) / 9);
  margin: calc(var(--s) / -18);
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: ldr-water-drop-jet 1.8s infinite;
}
@keyframes ldr-water-drop-fall {
  0%   { transform: translateY(0) scale(0.3) rotate(45deg); opacity: 0; animation-timing-function: ease-out; }
  10%  { transform: translateY(0) scale(1) rotate(45deg); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  36%  { transform: translateY(calc(var(--s) * 0.76)) scale(0.85, 1.15) rotate(45deg); opacity: 1; }
  37%, 100% { transform: translateY(calc(var(--s) * 0.76)) scale(0.85, 1.15) rotate(45deg); opacity: 0; }
}
@keyframes ldr-water-drop-ring {
  0%   { transform: scale(0.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes ldr-water-drop-jet {
  0%, 38% { transform: translateY(0) scale(0.3); opacity: 0; animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  52%     { transform: translateY(calc(var(--s) * -0.32)) scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  66%     { transform: translateY(0) scale(0.6); opacity: 0.8; }
  68%, 100% { transform: translateY(0) scale(0.6); opacity: 0; }
}

.ldr-ferris-wheel {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.1);
  height: calc(var(--s) * 1.12);
}
.ldr-ferris-wheel::before,
.ldr-ferris-wheel::after {
  content: "";
  position: absolute;
  top: calc(var(--s) * 0.5);
  left: 50%;
  width: calc(var(--s) / 20);
  height: calc(var(--s) * 0.66);
  margin-left: calc(var(--s) / -40);
  border-radius: calc(var(--s) / 40);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  transform: rotate(24deg);
  transform-origin: 50% 0;
}
.ldr-ferris-wheel::after { transform: rotate(-24deg); }
.ldr-ferris-wheel-wheel {
  position: absolute;
  z-index: 1;
  top: calc(var(--s) * 0.05);
  left: 50%;
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) * 0.9);
  margin-left: calc(var(--s) * -0.45);
  box-sizing: border-box;
  border: calc(var(--s) / 20) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--c) 0 calc(var(--s) / 16), transparent 0),
    linear-gradient(0deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent) 0 calc(50% + 1px), transparent 0),
    linear-gradient(60deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent) 0 calc(50% + 1px), transparent 0),
    linear-gradient(120deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent) 0 calc(50% + 1px), transparent 0);
  animation: ldr-ferris-wheel-turn 6s linear infinite;
}
.ldr-ferris-wheel-wheel span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(calc(var(--i) * 60deg)) translateY(calc(var(--s) * -0.42));
}
.ldr-ferris-wheel-wheel span::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--s) / -14);
  width: calc(var(--s) / 7);
  height: calc(var(--s) / 8);
  border-radius: calc(var(--s) / 50) calc(var(--s) / 50) calc(var(--s) / 16) calc(var(--s) / 16);
  background: var(--c);
  transform-origin: 50% 0;
  animation: ldr-ferris-wheel-level 6s linear infinite;
}
@keyframes ldr-ferris-wheel-turn {
  to { transform: rotate(360deg); }
}
@keyframes ldr-ferris-wheel-level {
  from { transform: rotate(calc(var(--i) * -60deg)); }
  to   { transform: rotate(calc(var(--i) * -60deg - 360deg)); }
}

.ldr-magnet {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.6);
  height: var(--s);
}
.ldr-magnet-field,
.ldr-magnet-field::after {
  position: absolute;
  top: calc(var(--s) * 0.235);
  left: calc(var(--s) * 0.5);
  width: calc(var(--s) * 0.34);
  height: calc(var(--s) * 0.53);
  box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  border-left: 0;
  border-radius: 0 50% 50% 0 / 0 50% 50% 0;
  animation: ldr-magnet-field 1.8s ease-in-out infinite;
}
.ldr-magnet-field::after {
  content: "";
  top: -1px;
  left: 0;
  width: calc(var(--s) * 0.7);
  height: calc(100% + 2px);
  animation-delay: -0.9s;
}
.ldr-magnet-horseshoe {
  position: absolute;
  top: calc(var(--s) * 0.15);
  left: 0;
  width: calc(var(--s) * 0.56);
  height: calc(var(--s) * 0.7);
  box-sizing: border-box;
  border: calc(var(--s) * 0.17) solid var(--c);
  border-right: 0;
  border-radius: calc(var(--s) * 0.35) 0 0 calc(var(--s) * 0.35);
}
.ldr-magnet-horseshoe::before,
.ldr-magnet-horseshoe::after {
  content: "";
  position: absolute;
  top: calc(var(--s) * -0.17);
  right: 0;
  width: calc(var(--s) * 0.13);
  height: calc(var(--s) * 0.17);
  background: color-mix(in srgb, var(--c) 40%, #fff);
}
.ldr-magnet-horseshoe::after {
  top: auto;
  bottom: calc(var(--s) * -0.17);
}
.ldr-magnet-dot {
  position: absolute;
  top: calc(var(--s) * (0.235 + var(--lane) * 0.53));
  left: calc(var(--s) * 1.45);
  width: calc(var(--s) / 9);
  height: calc(var(--s) / 9);
  margin: calc(var(--s) / -18);
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: ldr-magnet-pull 1.8s infinite;
  animation-delay: calc(var(--i) * -0.3s);
}
@keyframes ldr-magnet-pull {
  0%   { transform: translate(0, calc(var(--s) * var(--dy))) scale(0.6); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  20%  { opacity: 1; }
  80%  { transform: translate(calc(var(--s) * -0.83), 0) scale(1); opacity: 1; }
  100% { transform: translate(calc(var(--s) * -0.83), 0) scale(1); opacity: 0; }
}
@keyframes ldr-magnet-field {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.ldr-cycloid {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.9);
  height: calc(var(--s) * 0.62);
}
.ldr-cycloid::after {
  content: "";
  position: absolute;
  top: calc(var(--s) * 0.57);
  left: 0;
  right: 0;
  height: calc(var(--s) / 24);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent) 0 calc(var(--s) * 0.16), transparent 0 calc(var(--s) * 0.2618));
  animation: ldr-cycloid-road 0.2s linear infinite;
}
.ldr-cycloid-wheel {
  position: absolute;
  top: calc(var(--s) * 0.06);
  left: calc(var(--s) * 1.3);
  width: calc(var(--s) * 0.5);
  height: calc(var(--s) * 0.5);
  box-sizing: border-box;
  border: calc(var(--s) / 24) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(0deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 0 calc(50% + 1px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 0 calc(50% + 1px), transparent 0);
  animation: ldr-cycloid-roll 1.2s linear infinite;
}
/* Trace k shows the rim point from k tenths of a second ago, moved back with the road. */
.ldr-cycloid-trace {
  --d: calc(var(--s) * (0.12 - var(--k) * 0.006));
  position: absolute;
  top: calc(var(--s) * 0.31);
  left: calc(var(--s) * (1.55 - var(--k) * 0.1309));
  animation: ldr-cycloid-roll 1.2s linear infinite;
  animation-delay: calc(var(--k) * 0.1s - 1.2s);
}
.ldr-cycloid-trace::before {
  content: "";
  position: absolute;
  top: calc(var(--s) * 0.25 - var(--d) / 2);
  left: calc(var(--d) / -2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--k) * 0.075);
}
@keyframes ldr-cycloid-roll {
  to { transform: rotate(360deg); }
}
@keyframes ldr-cycloid-road {
  to { background-position: calc(var(--s) * -0.2618) 0; }
}

.ldr-doppler-effect {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 2);
  height: calc(var(--s) * 1.2);
}
.ldr-doppler-effect-wave {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--s) * var(--x));
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 1.2);
  margin: calc(var(--s) * -0.6);
  box-sizing: border-box;
  border: calc(var(--s) / 22) solid var(--c);
  border-radius: 50%;
  opacity: 0;
  animation: ldr-doppler-effect-wave 3.2s linear infinite;
  animation-delay: var(--t);
}
/* The source moves at 0.5 --s per second, the waves at about 0.67. */
.ldr-doppler-effect-source {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) / 5);
  height: calc(var(--s) / 5);
  margin: calc(var(--s) / -10);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-doppler-effect-glide 1.6s linear infinite alternate;
}
@keyframes ldr-doppler-effect-glide {
  from { transform: translateX(calc(var(--s) * -0.4)); }
  to   { transform: translateX(calc(var(--s) * 0.4)); }
}
@keyframes ldr-doppler-effect-wave {
  0%        { transform: scale(0); opacity: 1; }
  28%, 100% { transform: scale(1); opacity: 0; }
}

.ldr-metronome {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.9);
  height: var(--s);
}
.ldr-metronome::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
}
.ldr-metronome::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--s) * 0.16);
  width: calc(var(--s) / 6);
  height: calc(var(--s) / 6);
  margin-left: calc(var(--s) / -12);
  border-radius: 50%;
  background: var(--c);
}
.ldr-metronome-arm {
  position: absolute;
  left: 50%;
  bottom: calc(var(--s) * 0.24);
  width: calc(var(--s) / 16);
  height: calc(var(--s) * 0.72);
  margin-left: calc(var(--s) / -32);
  border-radius: calc(var(--s) / 32);
  background: var(--c);
  transform-origin: 50% 100%;
  animation: ldr-metronome-swing 0.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.ldr-metronome-arm::before {
  content: "";
  position: absolute;
  top: 18%;
  left: 50%;
  width: calc(var(--s) / 4.5);
  height: calc(var(--s) / 8);
  margin-left: calc(var(--s) / -9);
  border-radius: calc(var(--s) / 30);
  background: var(--c);
}
@keyframes ldr-metronome-swing {
  from { transform: rotate(-28deg); }
  to   { transform: rotate(28deg); }
}

.ldr-seesaw {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.8);
  height: calc(var(--s) * 0.92);
}
.ldr-seesaw::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--s) * 0.36);
  height: calc(var(--s) * 0.32);
  margin-left: calc(var(--s) * -0.18);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ldr-seesaw-plank {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: calc(var(--s) * 0.3);
  height: calc(var(--s) / 14);
  border-radius: calc(var(--s) / 28);
  background: var(--c);
  animation: ldr-seesaw-tilt 2.4s infinite;
}
.ldr-seesaw-ball {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: calc(var(--s) / 4);
  height: calc(var(--s) / 4);
  border-radius: 50%;
  background: conic-gradient(var(--c) 0 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent) 0);
  animation: ldr-seesaw-roll 2.4s cubic-bezier(0.33, 0, 0.67, 0.33) infinite;
}
@keyframes ldr-seesaw-tilt {
  0%   { transform: rotate(-12deg); animation-timing-function: cubic-bezier(0.3, 1.6, 0.6, 1); }
  10%  { transform: rotate(12deg); }
  50%  { transform: rotate(12deg); animation-timing-function: cubic-bezier(0.3, 1.6, 0.6, 1); }
  60%  { transform: rotate(-12deg); }
  100% { transform: rotate(-12deg); }
}
@keyframes ldr-seesaw-roll {
  0%, 12%  { transform: translateX(0) rotate(0deg); }
  46%, 62% { transform: translateX(calc(var(--s) * 1.37)) rotate(630deg); }
  96%, 100% { transform: translateX(0) rotate(0deg); }
}

.ldr-spring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.7);
  height: calc(var(--s) * 1.05);
}
.ldr-spring::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--s) / 14);
  border-radius: calc(var(--s) / 28);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
}
.ldr-spring-coil {
  position: absolute;
  top: calc(var(--s) / 14);
  left: 50%;
  width: calc(var(--s) * 0.34);
  height: calc(var(--s) * 0.66);
  margin-left: calc(var(--s) * -0.17);
  overflow: visible;
}
.ldr-spring-coil polyline {
  fill: none;
  stroke: var(--c);
  stroke-width: calc(var(--s) / 22);
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: ldr-spring-coil 2.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.ldr-spring-mass {
  position: absolute;
  top: calc(var(--s) / 14);
  left: 50%;
  width: calc(var(--s) * 0.44);
  height: calc(var(--s) * 0.26);
  margin-left: calc(var(--s) * -0.22);
  border-radius: calc(var(--s) / 16);
  background: var(--c);
  animation: ldr-spring-mass 2.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@keyframes ldr-spring-coil {
  0%, 86%, 100% { transform: scaleY(0.7); }
  16% { transform: scaleY(1); }
  26% { transform: scaleY(0.46); }
  36% { transform: scaleY(0.88); }
  46% { transform: scaleY(0.58); }
  56% { transform: scaleY(0.78); }
  66% { transform: scaleY(0.65); }
  76% { transform: scaleY(0.72); }
}
@keyframes ldr-spring-mass {
  0%, 86%, 100% { transform: translateY(calc(var(--s) * 0.462)); }
  16% { transform: translateY(calc(var(--s) * 0.66)); }
  26% { transform: translateY(calc(var(--s) * 0.304)); }
  36% { transform: translateY(calc(var(--s) * 0.581)); }
  46% { transform: translateY(calc(var(--s) * 0.383)); }
  56% { transform: translateY(calc(var(--s) * 0.515)); }
  66% { transform: translateY(calc(var(--s) * 0.429)); }
  76% { transform: translateY(calc(var(--s) * 0.475)); }
}

.ldr-comet-orbit {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.4);
  height: var(--s);
}
.ldr-comet-orbit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 1.24);
  height: calc(var(--s) * 0.91);
  margin: calc(var(--s) * -0.455) 0 0 calc(var(--s) * -0.62);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 28%, transparent);
  border-radius: 50%;
}
.ldr-comet-orbit-sun {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--s) * 0.42);
  width: calc(var(--s) / 5);
  height: calc(var(--s) / 5);
  margin: calc(var(--s) / -10);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 6) color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
}
.ldr-comet-orbit-comet {
  --d: calc(var(--s) * (0.13 - var(--i) * 0.02));
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--i) * 0.18);
  animation: ldr-comet-orbit-path 2.4s linear infinite;
  animation-delay: calc(var(--i) * 0.035s - 0.5s);
}
@keyframes ldr-comet-orbit-path {
  0% { transform: translate(calc(var(--s) * -0.620), calc(var(--s) * 0.000)); }
  6.97% { transform: translate(calc(var(--s) * -0.599), calc(var(--s) * -0.118)); }
  13.74% { transform: translate(calc(var(--s) * -0.537), calc(var(--s) * -0.227)); }
  20.15% { transform: translate(calc(var(--s) * -0.438), calc(var(--s) * -0.321)); }
  26.04% { transform: translate(calc(var(--s) * -0.310), calc(var(--s) * -0.394)); }
  31.29% { transform: translate(calc(var(--s) * -0.160), calc(var(--s) * -0.439)); }
  35.82% { transform: translate(calc(var(--s) * -0.000), calc(var(--s) * -0.455)); }
  39.62% { transform: translate(calc(var(--s) * 0.160), calc(var(--s) * -0.439)); }
  42.71% { transform: translate(calc(var(--s) * 0.310), calc(var(--s) * -0.394)); }
  45.15% { transform: translate(calc(var(--s) * 0.438), calc(var(--s) * -0.321)); }
  47.08% { transform: translate(calc(var(--s) * 0.537), calc(var(--s) * -0.227)); }
  48.63% { transform: translate(calc(var(--s) * 0.599), calc(var(--s) * -0.118)); }
  50% { transform: translate(calc(var(--s) * 0.620), calc(var(--s) * -0.000)); }
  51.37% { transform: translate(calc(var(--s) * 0.599), calc(var(--s) * 0.118)); }
  52.92% { transform: translate(calc(var(--s) * 0.537), calc(var(--s) * 0.227)); }
  54.85% { transform: translate(calc(var(--s) * 0.438), calc(var(--s) * 0.321)); }
  57.29% { transform: translate(calc(var(--s) * 0.310), calc(var(--s) * 0.394)); }
  60.38% { transform: translate(calc(var(--s) * 0.160), calc(var(--s) * 0.439)); }
  64.18% { transform: translate(calc(var(--s) * 0.000), calc(var(--s) * 0.455)); }
  68.71% { transform: translate(calc(var(--s) * -0.160), calc(var(--s) * 0.439)); }
  73.96% { transform: translate(calc(var(--s) * -0.310), calc(var(--s) * 0.394)); }
  79.85% { transform: translate(calc(var(--s) * -0.438), calc(var(--s) * 0.321)); }
  86.26% { transform: translate(calc(var(--s) * -0.537), calc(var(--s) * 0.227)); }
  93.03% { transform: translate(calc(var(--s) * -0.599), calc(var(--s) * 0.118)); }
  100% { transform: translate(calc(var(--s) * -0.620), calc(var(--s) * 0.000)); }
}

.ldr-gyroscope {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  perspective: calc(var(--s) * 3);
}
.ldr-gyroscope::after {
  content: "";
  position: absolute;
  inset: 41%;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 8) color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
}
.ldr-gyroscope span {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: calc(var(--s) / 16) solid var(--c);
  border-radius: 50%;
  animation: ldr-gyroscope-tumble 2.4s linear infinite;
}
.ldr-gyroscope span:nth-child(2) {
  --axis: 60deg;
  inset: 12%;
  border-color: color-mix(in srgb, var(--ldr-color, #3b82f6) 75%, transparent);
  animation-duration: 1.8s;
  animation-delay: -0.6s;
}
.ldr-gyroscope span:nth-child(3) {
  --axis: 120deg;
  inset: 24%;
  border-color: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  animation-duration: 1.2s;
  animation-delay: -0.8s;
}
@keyframes ldr-gyroscope-tumble {
  from { transform: rotate(var(--axis, 0deg)) rotateX(0deg); }
  to   { transform: rotate(var(--axis, 0deg)) rotateX(360deg); }
}

.ldr-plinko {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 1.1);
}
.ldr-plinko::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--s) / 24);
  border-radius: calc(var(--s) / 48);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
}
/* Row r holds r + 1 pegs, 0.24 --s apart, centered. */
.ldr-plinko-pegs {
  position: absolute;
  top: calc(var(--s) * (0.25 + var(--r) * 0.2));
  left: calc(50% - (var(--r) + 1) * var(--s) * 0.12);
  width: calc((var(--r) + 1) * var(--s) * 0.24);
  height: calc(var(--s) * 0.1);
  background: radial-gradient(circle, color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent) 0 calc(var(--s) * 0.035), transparent calc(var(--s) * 0.035 + 0.5px)) 0 0 / calc(var(--s) * 0.24) 100% repeat-x;
}
.ldr-plinko-ball {
  position: absolute;
  top: 0;
  left: 50%;
  animation: ldr-plinko-path-a 2.4s linear infinite;
}
.ldr-plinko-ball > span {
  position: absolute;
  width: calc(var(--s) * 0.14);
  height: calc(var(--s) * 0.14);
  margin: calc(var(--s) * -0.07);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-plinko-drop 2.4s infinite;
}
.ldr-plinko-ball:nth-child(6) { animation-name: ldr-plinko-path-b; }
.ldr-plinko-ball:nth-child(7) { animation-name: ldr-plinko-path-c; }
.ldr-plinko-ball:nth-child(6),
.ldr-plinko-ball:nth-child(6) > span { animation-delay: -0.8s; }
.ldr-plinko-ball:nth-child(7),
.ldr-plinko-ball:nth-child(7) > span { animation-delay: -1.6s; }
/* Each hop: a small rise off the peg (ease out), then a fall to the next row (ease in). */
@keyframes ldr-plinko-drop {
  0%   { transform: translateY(calc(var(--s) * 0.04)); opacity: 0; animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  5%   { opacity: 1; }
  10%  { transform: translateY(calc(var(--s) * 0.195)); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  16%  { transform: translateY(calc(var(--s) * 0.15)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  25%  { transform: translateY(calc(var(--s) * 0.395)); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  31%  { transform: translateY(calc(var(--s) * 0.35)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  40%  { transform: translateY(calc(var(--s) * 0.595)); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  46%  { transform: translateY(calc(var(--s) * 0.55)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  55%  { transform: translateY(calc(var(--s) * 0.795)); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  61%  { transform: translateY(calc(var(--s) * 0.75)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  72%, 88% { transform: translateY(calc(var(--s) * 0.99)); opacity: 1; }
  96%, 100% { transform: translateY(calc(var(--s) * 0.99)); opacity: 0; }
}
@keyframes ldr-plinko-path-a {
  0%, 10%   { transform: translateX(0); }
  25%       { transform: translateX(calc(var(--s) * 0.12)); }
  40%       { transform: translateX(0); }
  55%       { transform: translateX(calc(var(--s) * 0.12)); }
  72%, 100% { transform: translateX(calc(var(--s) * 0.24)); }
}
@keyframes ldr-plinko-path-b {
  0%, 10%   { transform: translateX(0); }
  25%       { transform: translateX(calc(var(--s) * -0.12)); }
  40%       { transform: translateX(calc(var(--s) * -0.24)); }
  55%       { transform: translateX(calc(var(--s) * -0.12)); }
  72%, 100% { transform: translateX(calc(var(--s) * -0.24)); }
}
@keyframes ldr-plinko-path-c {
  0%, 10%   { transform: translateX(0); }
  25%       { transform: translateX(calc(var(--s) * 0.12)); }
  40%       { transform: translateX(calc(var(--s) * 0.24)); }
  55%       { transform: translateX(calc(var(--s) * 0.12)); }
  72%, 100% { transform: translateX(0); }
}

.ldr-juggling-balls {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.3);
  height: calc(var(--s) * 1.1);
}
.ldr-juggling-balls::before,
.ldr-juggling-balls::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - var(--s) * 0.49);
  width: calc(var(--s) * 0.34);
  height: calc(var(--s) * 0.1);
  box-sizing: border-box;
  border-bottom: calc(var(--s) / 20) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  border-radius: 0 0 50% 50%;
}
.ldr-juggling-balls::after { left: calc(50% + var(--s) * 0.15); }
.ldr-juggling-balls > span {
  position: absolute;
  bottom: calc(var(--s) * 0.19);
  left: 50%;
  animation: ldr-juggling-balls-x 1.5s linear infinite;
}
.ldr-juggling-balls > span > span {
  position: absolute;
  width: calc(var(--s) * 0.18);
  height: calc(var(--s) * 0.18);
  margin: calc(var(--s) * -0.09);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-juggling-balls-y 1.5s infinite;
}
.ldr-juggling-balls > span:nth-child(2),
.ldr-juggling-balls > span:nth-child(2) > span { animation-delay: -0.5s; }
.ldr-juggling-balls > span:nth-child(3),
.ldr-juggling-balls > span:nth-child(3) > span { animation-delay: -1s; }
/* Flights are linear in x; the hand carries the ball back inward. */
@keyframes ldr-juggling-balls-x {
  0%, 100% { transform: translateX(calc(var(--s) * 0.14)); }
  38%      { transform: translateX(calc(var(--s) * -0.5)); }
  50%      { transform: translateX(calc(var(--s) * -0.14)); }
  88%      { transform: translateX(calc(var(--s) * 0.5)); }
}
/* Exact parabolas: quadratic ease out on the way up, quadratic ease in on the way down. */
@keyframes ldr-juggling-balls-y {
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  19%  { transform: translateY(calc(var(--s) * -0.72)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  38%  { transform: translateY(0); animation-timing-function: ease-out; }
  44%  { transform: translateY(calc(var(--s) * 0.06)); animation-timing-function: ease-in; }
  50%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  69%  { transform: translateY(calc(var(--s) * -0.72)); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  88%  { transform: translateY(0); animation-timing-function: ease-out; }
  94%  { transform: translateY(calc(var(--s) * 0.06)); animation-timing-function: ease-in; }
  100% { transform: translateY(0); }
}

.ldr-yo-yo {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.6);
  height: calc(var(--s) * 1.1);
}
.ldr-yo-yo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) * 0.3);
  height: calc(var(--s) / 10);
  margin-left: calc(var(--s) * -0.15);
  border-radius: calc(var(--s) / 20);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
}
.ldr-yo-yo-string {
  position: absolute;
  top: calc(var(--s) / 20);
  left: 50%;
  width: 1px;
  height: calc(var(--s) * 0.82);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent);
  transform-origin: 50% 0;
  animation: ldr-yo-yo-string 1.6s infinite;
}
.ldr-yo-yo-disc {
  --slot: color-mix(in srgb, var(--c) 40%, #fff);
  position: absolute;
  top: calc(var(--s) / 20);
  left: 50%;
  width: calc(var(--s) * 0.38);
  height: calc(var(--s) * 0.38);
  margin: calc(var(--s) * -0.19) 0 0 calc(var(--s) * -0.19);
  animation: ldr-yo-yo-drop 1.6s infinite;
}
.ldr-yo-yo-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: calc(var(--s) / 24) solid var(--c);
  border-radius: 50%;
  background: conic-gradient(var(--c) 0 19%, var(--slot) 0 25%, var(--c) 0 44%, var(--slot) 0 50%, var(--c) 0 69%, var(--slot) 0 75%, var(--c) 0 94%, var(--slot) 0);
  animation: ldr-yo-yo-spin 0.45s linear infinite;
}
.ldr-yo-yo-disc::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 calc(var(--s) / 40) var(--slot);
}
@keyframes ldr-yo-yo-drop {
  0%   { transform: translateY(calc(var(--s) * 0.22)); animation-timing-function: cubic-bezier(0.4, 0, 0.9, 0.5); }
  44%  { transform: translateY(calc(var(--s) * 0.82)); animation-timing-function: ease-out; }
  50%  { transform: translateY(calc(var(--s) * 0.77)); animation-timing-function: ease-in; }
  56%  { transform: translateY(calc(var(--s) * 0.82)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.3, 1); }
  100% { transform: translateY(calc(var(--s) * 0.22)); }
}
@keyframes ldr-yo-yo-string {
  0%   { transform: scaleY(0.268); animation-timing-function: cubic-bezier(0.4, 0, 0.9, 0.5); }
  44%  { transform: scaleY(1); animation-timing-function: ease-out; }
  50%  { transform: scaleY(0.939); animation-timing-function: ease-in; }
  56%  { transform: scaleY(1); animation-timing-function: cubic-bezier(0.25, 0.6, 0.3, 1); }
  100% { transform: scaleY(0.268); }
}
@keyframes ldr-yo-yo-spin {
  to { transform: rotate(360deg); }
}

.ldr-spinning-top {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.9);
  height: var(--s);
}
.ldr-spinning-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--s) * 0.5);
  height: calc(var(--s) / 12);
  margin-left: calc(var(--s) * -0.25);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  animation: ldr-spinning-top-shadow 1.2s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.ldr-spinning-top-body {
  position: absolute;
  bottom: calc(var(--s) / 24);
  left: 50%;
  width: calc(var(--s) * 0.7);
  height: calc(var(--s) * 0.84);
  margin-left: calc(var(--s) * -0.35);
  transform-origin: 50% 100%;
  animation: ldr-spinning-top-wobble 1.2s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.ldr-spinning-top-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) / 10);
  height: calc(var(--s) * 0.2);
  margin-left: calc(var(--s) / -20);
  border-radius: calc(var(--s) / 40);
  background: var(--c);
}
.ldr-spinning-top-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  background: repeating-linear-gradient(90deg, var(--c) 0 calc(var(--s) * 0.09), color-mix(in srgb, var(--c) 55%, #fff) 0 calc(var(--s) * 0.18));
  clip-path: polygon(50% 100%, 0 40%, 4% 26%, 14% 14%, 30% 5%, 50% 2%, 70% 5%, 86% 14%, 96% 26%, 100% 40%);
  animation: ldr-spinning-top-spin 0.3s linear infinite;
}
@keyframes ldr-spinning-top-spin {
  from { background-position: 0 0; }
  to   { background-position: calc(var(--s) * 0.18) 0; }
}
@keyframes ldr-spinning-top-wobble {
  from { transform: translateX(calc(var(--s) * -0.05)) rotate(-8deg); }
  to   { transform: translateX(calc(var(--s) * 0.05)) rotate(8deg); }
}
@keyframes ldr-spinning-top-shadow {
  from { transform: translateX(calc(var(--s) * -0.05)) scaleX(0.9); }
  to   { transform: translateX(calc(var(--s) * 0.05)) scaleX(1.1); }
}

.ldr-pulley {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) * 1.2);
}
.ldr-pulley::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: calc(var(--s) / 16);
  border-radius: calc(var(--s) / 32);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
.ldr-pulley::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) / 20);
  height: calc(var(--s) * 0.3);
  margin-left: calc(var(--s) / -40);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
.ldr-pulley-wheel {
  position: absolute;
  top: calc(var(--s) * 0.05);
  left: 50%;
  width: calc(var(--s) * 0.5);
  height: calc(var(--s) * 0.5);
  margin-left: calc(var(--s) * -0.25);
  box-sizing: border-box;
  border: calc(var(--s) / 16) solid var(--c);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--c) 0 calc(var(--s) / 16), transparent 0),
    linear-gradient(0deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent) 0 calc(50% + 1px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 1px), color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent) 0 calc(50% + 1px), transparent 0);
  animation: ldr-pulley-turn 1.2s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.ldr-pulley-rope {
  position: absolute;
  top: calc(var(--s) * 0.3);
  left: calc(50% - var(--s) * 0.25);
  width: 1px;
  height: calc(var(--s) * 0.6);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent);
  transform-origin: 50% 0;
  animation: ldr-pulley-rope 1.2s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.ldr-pulley-weight {
  position: absolute;
  top: calc(var(--s) * 0.3);
  left: calc(50% - var(--s) * 0.38);
  width: calc(var(--s) * 0.26);
  height: calc(var(--s) * 0.26);
  border-radius: calc(var(--s) / 24);
  background: var(--c);
  animation: ldr-pulley-lift 1.2s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
/* The right-hand rope and weight run the same keyframes backwards. */
.ldr-pulley-rope + .ldr-pulley-rope {
  left: calc(50% + var(--s) * 0.25 - 1px);
  animation-direction: alternate-reverse;
}
.ldr-pulley-weight + .ldr-pulley-weight {
  left: calc(50% + var(--s) * 0.15);
  width: calc(var(--s) * 0.2);
  height: calc(var(--s) * 0.2);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
  animation-direction: alternate-reverse;
}
@keyframes ldr-pulley-rope {
  from { transform: scaleY(0.4167); }
  to   { transform: scaleY(1); }
}
@keyframes ldr-pulley-lift {
  from { transform: translateY(calc(var(--s) * 0.25)); }
  to   { transform: translateY(calc(var(--s) * 0.6)); }
}
/* 0.35 --s of rope over a 0.25 --s radius wheel is 80 degrees. */
@keyframes ldr-pulley-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-80deg); }
}

.ldr-foucault-pendulum {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-foucault-pendulum::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  border-radius: 50%;
}
.ldr-foucault-pendulum-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(calc(var(--k) * 30deg)) translateX(calc(var(--s) * 0.42));
}
.ldr-foucault-pendulum-pin::before {
  content: "";
  position: absolute;
  top: calc(var(--s) / -24);
  left: calc(var(--s) / -24);
  width: calc(var(--s) / 12);
  height: calc(var(--s) / 12);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent);
  animation: ldr-foucault-pendulum-knock 6s infinite;
  animation-delay: var(--t);
}
/* The swing plane turns once every 6s; the bob reaches a pin every half swing. */
.ldr-foucault-pendulum-plane {
  position: absolute;
  inset: 0;
  animation: ldr-foucault-pendulum-precess 6s linear infinite;
}
.ldr-foucault-pendulum-plane::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12%;
  right: 12%;
  height: 1px;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
}
.ldr-foucault-pendulum-bob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) / 6);
  height: calc(var(--s) / 6);
  margin: calc(var(--s) / -12);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-foucault-pendulum-swing 0.5s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
@keyframes ldr-foucault-pendulum-precess {
  to { transform: rotate(360deg); }
}
@keyframes ldr-foucault-pendulum-swing {
  from { transform: translateX(calc(var(--s) * -0.295)); }
  to   { transform: translateX(calc(var(--s) * 0.295)); }
}
@keyframes ldr-foucault-pendulum-knock {
  0%       { transform: translateX(0) scale(1); opacity: 1; animation-timing-function: ease-out; }
  4%, 78%  { transform: translateX(calc(var(--s) / 20)) scale(0.5); opacity: 0.3; animation-timing-function: cubic-bezier(0.3, 1.6, 0.6, 1); }
  88%, 100% { transform: translateX(0) scale(1); opacity: 1; }
}

.ldr-gravity-well {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.05);
  height: calc(var(--s) * 0.72);
}
/* Rim to throat: each ring sits 0.055 / r lower, the 1/r shape of a gravity well. */
.ldr-gravity-well-ring {
  position: absolute;
  top: calc(50% + var(--s) * (0.055 / var(--r) - 0.266));
  left: 50%;
  width: calc(var(--s) * var(--r) * 2);
  height: calc(var(--s) * var(--r) * 0.64);
  margin: calc(var(--s) * var(--r) * -0.32) 0 0 calc(var(--s) * var(--r) * -1);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  border-radius: 50%;
}
.ldr-gravity-well-ring:nth-child(5) {
  border: 0;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
}
.ldr-gravity-well-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) / 8);
  height: calc(var(--s) / 8);
  margin: calc(var(--s) / -16);
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: ldr-gravity-well-spiral 3s linear infinite;
}
.ldr-gravity-well-ball:last-child { animation-delay: -1.5s; }
@keyframes ldr-gravity-well-spiral {
  0% { transform: translate(calc(var(--s) * 0.460), calc(var(--s) * -0.146)) scale(1.00); opacity: 0; }
  6% { transform: translate(calc(var(--s) * 0.460), calc(var(--s) * -0.146)) scale(1.00); opacity: 1; }
  10.37% { transform: translate(calc(var(--s) * 0.409), calc(var(--s) * -0.088)) scale(1.00); opacity: 1; }
  14.54% { transform: translate(calc(var(--s) * 0.301), calc(var(--s) * -0.041)) scale(0.99); opacity: 1; }
  18.53% { transform: translate(calc(var(--s) * 0.157), calc(var(--s) * -0.011)) scale(0.99); opacity: 1; }
  22.34% { transform: translate(calc(var(--s) * 0.000), calc(var(--s) * -0.000)) scale(0.98); opacity: 1; }
  25.98% { transform: translate(calc(var(--s) * -0.145), calc(var(--s) * -0.009)) scale(0.98); opacity: 1; }
  29.45% { transform: translate(calc(var(--s) * -0.259), calc(var(--s) * -0.033)) scale(0.98); opacity: 1; }
  32.77% { transform: translate(calc(var(--s) * -0.325), calc(var(--s) * -0.067)) scale(0.97); opacity: 1; }
  35.94% { transform: translate(calc(var(--s) * -0.339), calc(var(--s) * -0.104)) scale(0.97); opacity: 1; }
  38.97% { transform: translate(calc(var(--s) * -0.301), calc(var(--s) * -0.137)) scale(0.96); opacity: 1; }
  41.87% { transform: translate(calc(var(--s) * -0.222), calc(var(--s) * -0.162)) scale(0.96); opacity: 1; }
  44.63% { transform: translate(calc(var(--s) * -0.116), calc(var(--s) * -0.173)) scale(0.95); opacity: 1; }
  47.27% { transform: translate(calc(var(--s) * -0.000), calc(var(--s) * -0.170)) scale(0.94); opacity: 1; }
  49.8% { transform: translate(calc(var(--s) * 0.107), calc(var(--s) * -0.152)) scale(0.94); opacity: 1; }
  52.21% { transform: translate(calc(var(--s) * 0.191), calc(var(--s) * -0.123)) scale(0.93); opacity: 1; }
  54.51% { transform: translate(calc(var(--s) * 0.240), calc(var(--s) * -0.086)) scale(0.93); opacity: 1; }
  56.71% { transform: translate(calc(var(--s) * 0.250), calc(var(--s) * -0.046)) scale(0.92); opacity: 1; }
  58.81% { transform: translate(calc(var(--s) * 0.222), calc(var(--s) * -0.008)) scale(0.91); opacity: 1; }
  60.81% { transform: translate(calc(var(--s) * 0.164), calc(var(--s) * 0.024)) scale(0.91); opacity: 1; }
  62.73% { transform: translate(calc(var(--s) * 0.085), calc(var(--s) * 0.047)) scale(0.90); opacity: 1; }
  64.56% { transform: translate(calc(var(--s) * 0.000), calc(var(--s) * 0.059)) scale(0.89); opacity: 1; }
  66.31% { transform: translate(calc(var(--s) * -0.079), calc(var(--s) * 0.061)) scale(0.88); opacity: 1; }
  67.98% { transform: translate(calc(var(--s) * -0.141), calc(var(--s) * 0.056)) scale(0.87); opacity: 1; }
  69.58% { transform: translate(calc(var(--s) * -0.177), calc(var(--s) * 0.045)) scale(0.87); opacity: 1; }
  71.1% { transform: translate(calc(var(--s) * -0.184), calc(var(--s) * 0.033)) scale(0.86); opacity: 1; }
  72.56% { transform: translate(calc(var(--s) * -0.164), calc(var(--s) * 0.023)) scale(0.85); opacity: 1; }
  73.95% { transform: translate(calc(var(--s) * -0.121), calc(var(--s) * 0.018)) scale(0.84); opacity: 1; }
  75.28% { transform: translate(calc(var(--s) * -0.063), calc(var(--s) * 0.020)) scale(0.83); opacity: 1; }
  76.55% { transform: translate(calc(var(--s) * -0.000), calc(var(--s) * 0.031)) scale(0.82); opacity: 1; }
  77.76% { transform: translate(calc(var(--s) * 0.058), calc(var(--s) * 0.051)) scale(0.81); opacity: 1; }
  78.92% { transform: translate(calc(var(--s) * 0.104), calc(var(--s) * 0.076)) scale(0.80); opacity: 1; }
  80.02% { transform: translate(calc(var(--s) * 0.130), calc(var(--s) * 0.107)) scale(0.78); opacity: 1; }
  81.08% { transform: translate(calc(var(--s) * 0.136), calc(var(--s) * 0.139)) scale(0.77); opacity: 1; }
  82.09% { transform: translate(calc(var(--s) * 0.121), calc(var(--s) * 0.171)) scale(0.76); opacity: 1; }
  83.05% { transform: translate(calc(var(--s) * 0.089), calc(var(--s) * 0.200)) scale(0.75); opacity: 1; }
  83.98% { transform: translate(calc(var(--s) * 0.046), calc(var(--s) * 0.224)) scale(0.73); opacity: 1; }
  84.86% { transform: translate(calc(var(--s) * 0.000), calc(var(--s) * 0.243)) scale(0.72); opacity: 1; }
  85.7% { transform: translate(calc(var(--s) * -0.043), calc(var(--s) * 0.258)) scale(0.70); opacity: 1; }
  86.5% { transform: translate(calc(var(--s) * -0.076), calc(var(--s) * 0.268)) scale(0.69); opacity: 1; }
  87.27% { transform: translate(calc(var(--s) * -0.096), calc(var(--s) * 0.276)) scale(0.67); opacity: 1; }
  88% { transform: translate(calc(var(--s) * -0.100), calc(var(--s) * 0.284)) scale(0.66); opacity: 1; }
  94%, 100% { transform: translate(0, calc(var(--s) * 0.3)) scale(0.2); opacity: 0; }
}

.ldr-circle-bounce {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
  border: calc(var(--s) / 24) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  border-radius: 50%;
}
.ldr-circle-bounce-star {
  position: absolute;
  top: calc(var(--s) / -24);
  left: calc(var(--s) / -24);
  width: var(--s);
  height: var(--s);
  overflow: visible;
}
.ldr-circle-bounce-star polygon {
  fill: none;
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  stroke-width: 1px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Steps round the rim by 144deg per bounce, and flares on each one. */
.ldr-circle-bounce-flash {
  position: absolute;
  inset: 0;
  animation: ldr-circle-bounce-step 2s steps(5) infinite;
}
.ldr-circle-bounce-flash::before {
  content: "";
  position: absolute;
  top: calc(var(--s) / -10);
  left: calc(50% - var(--s) / 10);
  width: calc(var(--s) / 5);
  height: calc(var(--s) / 5);
  box-sizing: border-box;
  border: calc(var(--s) / 30) solid var(--c);
  border-radius: 50%;
  animation: ldr-circle-bounce-flare 0.4s ease-out infinite;
}
.ldr-circle-bounce-ball {
  --d: calc(var(--s) * (0.15 - var(--k) * 0.02));
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--k) * 0.2);
  animation: ldr-circle-bounce-path 2s linear infinite;
  animation-delay: calc(var(--k) * 0.04s - 2s);
}
@keyframes ldr-circle-bounce-path {
  0% { transform: translate(calc(var(--s) * 0.000), calc(var(--s) * -0.385)); }
  20% { transform: translate(calc(var(--s) * 0.226), calc(var(--s) * 0.311)); }
  40% { transform: translate(calc(var(--s) * -0.366), calc(var(--s) * -0.119)); }
  60% { transform: translate(calc(var(--s) * 0.366), calc(var(--s) * -0.119)); }
  80% { transform: translate(calc(var(--s) * -0.226), calc(var(--s) * 0.311)); }
  100% { transform: translate(calc(var(--s) * -0.000), calc(var(--s) * -0.385)); }
}
@keyframes ldr-circle-bounce-step {
  from { transform: rotate(0deg); }
  to   { transform: rotate(720deg); }
}
@keyframes ldr-circle-bounce-flare {
  from { transform: scale(0.3); opacity: 0.9; }
  to   { transform: scale(1.3); opacity: 0; }
}

.ldr-binary-star {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.1);
  height: var(--s);
}
.ldr-binary-star::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) * 0.26);
  margin: calc(var(--s) * -0.13) 0 0 calc(var(--s) * -0.45);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  border-radius: 50%;
}
.ldr-binary-star-body {
  --r: 0.1;
  position: absolute;
  top: 50%;
  left: 50%;
  animation:
    ldr-binary-star-x 0.8s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate,
    ldr-binary-star-z 1.6s step-end infinite;
}
.ldr-binary-star-body > span {
  position: absolute;
  width: calc(var(--s) * 0.3);
  height: calc(var(--s) * 0.3);
  margin: calc(var(--s) * -0.15);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 5) color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  animation: ldr-binary-star-y 0.8s cubic-bezier(0.37, 0, 0.63, 1) -0.4s infinite alternate;
}
/* The companion: a wider orbit, half a period out of phase. */
.ldr-binary-star-body + .ldr-binary-star-body {
  --r: 0.45;
  animation-delay: -0.8s;
}
.ldr-binary-star-body + .ldr-binary-star-body > span {
  width: calc(var(--s) / 7);
  height: calc(var(--s) / 7);
  margin: calc(var(--s) / -14);
  box-shadow: none;
  animation-delay: -1.2s;
}
@keyframes ldr-binary-star-x {
  from { transform: translateX(calc(var(--s) * var(--r) * -1)); }
  to   { transform: translateX(calc(var(--s) * var(--r))); }
}
@keyframes ldr-binary-star-y {
  from { transform: translateY(calc(var(--s) * var(--r) * -0.28)) scale(calc(1 - var(--r) * 0.5)); }
  to   { transform: translateY(calc(var(--s) * var(--r) * 0.28)) scale(calc(1 + var(--r) * 0.5)); }
}
@keyframes ldr-binary-star-z {
  0%, 100% { z-index: 2; }
  50%      { z-index: 1; }
}

.ldr-heartbeat-pulse {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-heartbeat-pulse::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: var(--c);
  animation: ldr-heartbeat-pulse-beat 1.2s infinite;
}
.ldr-heartbeat-pulse span {
  position: absolute;
  inset: 32%;
  box-sizing: border-box;
  border: calc(var(--s) / 18) solid var(--c);
  border-radius: 50%;
  opacity: 0;
  animation: ldr-heartbeat-pulse-ring 1.2s cubic-bezier(0.1, 0.6, 0.4, 1) 0.08s infinite;
}
.ldr-heartbeat-pulse span + span { animation-delay: 0.34s; }
@keyframes ldr-heartbeat-pulse-beat {
  0%, 42%, 100% { transform: scale(1); }
  10% { transform: scale(1.3); }
  20% { transform: scale(0.94); }
  30% { transform: scale(1.2); }
}
@keyframes ldr-heartbeat-pulse-ring {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2.7); opacity: 0; }
}

.ldr-screensaver-bounce {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.9);
  height: calc(var(--s) * 1.1);
  box-sizing: border-box;
  border: calc(var(--s) / 20) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  border-radius: calc(var(--s) / 8);
}
.ldr-screensaver-bounce-x {
  position: absolute;
  top: calc(var(--s) * 0.04);
  left: calc(var(--s) * 0.04);
  animation: ldr-screensaver-bounce-x 1.6s linear infinite alternate;
}
.ldr-screensaver-bounce-badge {
  position: absolute;
  width: calc(var(--s) * 0.44);
  height: calc(var(--s) * 0.26);
  border-radius: 50%;
  background: var(--c);
  animation:
    ldr-screensaver-bounce-y 0.9s linear infinite alternate,
    ldr-screensaver-bounce-hue 6.4s steps(4) infinite;
}
.ldr-screensaver-bounce-badge::after {
  content: "";
  position: absolute;
  inset: 34% 24%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 40%, #fff);
}
@keyframes ldr-screensaver-bounce-x {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--s) * 1.28)); }
}
@keyframes ldr-screensaver-bounce-y {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--s) * 0.66)); }
}
/* One hue step per side-wall hit, since the x trip takes exactly 1.6s. */
@keyframes ldr-screensaver-bounce-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

.ldr-rain-ripple {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 2);
  height: calc(var(--s) * 0.9);
}
.ldr-rain-ripple span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: calc(var(--s) * 0.8);
  height: calc(var(--s) * 0.28);
  margin: calc(var(--s) * -0.14) 0 0 calc(var(--s) * -0.4);
  box-sizing: border-box;
  border: calc(var(--s) / 22) solid var(--c);
  border-radius: 50%;
  opacity: 0;
  animation:
    ldr-rain-ripple-spread 2s cubic-bezier(0.2, 0.7, 0.4, 1) infinite,
    ldr-rain-ripple-fade 2s linear infinite;
  animation-delay: var(--d);
}
.ldr-rain-ripple span::after {
  content: "";
  position: absolute;
  inset: 26%;
  box-sizing: border-box;
  border: calc(var(--s) / 30) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 75%, transparent);
  border-radius: 50%;
}
@keyframes ldr-rain-ripple-spread {
  from { transform: scale(0.08); }
  to   { transform: scale(1); }
}
@keyframes ldr-rain-ripple-fade {
  0%, 30% { opacity: 1; }
  100%    { opacity: 0; }
}

.ldr-epicycle {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-epicycle::before {
  content: "";
  position: absolute;
  inset: 20%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  border-radius: 50%;
}
.ldr-epicycle::after {
  content: "";
  position: absolute;
  inset: 44%;
  border-radius: 50%;
  background: var(--c);
}
.ldr-epicycle > span {
  position: absolute;
  inset: 0;
  animation: ldr-epicycle-turn 3s linear infinite;
  animation-delay: calc(var(--i) * 0.05s - 3s);
}
.ldr-epicycle > span > span {
  position: absolute;
  top: 20%;
  left: 50%;
  animation: ldr-epicycle-turn 1s linear infinite reverse;
  animation-delay: inherit;
}
.ldr-epicycle > span > span::before {
  --d: calc(var(--s) * (0.14 - var(--i) * 0.018));
  content: "";
  position: absolute;
  top: calc(var(--s) * -0.17 - var(--d) / 2);
  left: calc(var(--d) / -2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--i) * 0.18);
}
/* The small circle the moon rides, drawn once. */
.ldr-epicycle > span:first-child > span::after {
  content: "";
  position: absolute;
  top: calc(var(--s) * -0.17);
  left: calc(var(--s) * -0.17);
  width: calc(var(--s) * 0.34);
  height: calc(var(--s) * 0.34);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  border-radius: 50%;
}
@keyframes ldr-epicycle-turn {
  to { transform: rotate(360deg); }
}

.ldr-double-pendulum {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 1.2);
}
.ldr-double-pendulum::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) / 10);
  height: calc(var(--s) / 10);
  margin: calc(var(--s) / -20);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
}
.ldr-double-pendulum > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) / 20);
  height: calc(var(--s) * 0.3);
  margin-left: calc(var(--s) / -40);
  border-radius: calc(var(--s) / 44);
  transform-origin: 50% 0;
  animation: ldr-double-pendulum-upper 4.8s linear infinite;
  animation-delay: calc(var(--i) * 0.05s - 4.8s);
}
.ldr-double-pendulum > span > span {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(var(--s) * 0.26);
  border-radius: inherit;
  transform-origin: 50% 0;
  animation: ldr-double-pendulum-lower 4.8s linear infinite;
  animation-delay: inherit;
}
.ldr-double-pendulum > span > span::after {
  --d: calc(var(--s) * (0.17 - var(--i) * 0.025));
  content: "";
  position: absolute;
  bottom: calc(var(--d) / -2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  opacity: calc(1 - var(--i) * 0.28);
}
/* Only the lead copy draws the rods and the middle joint; the rest are the trail. */
.ldr-double-pendulum > span:first-child,
.ldr-double-pendulum > span:first-child > span { background: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent); }
.ldr-double-pendulum > span:first-child::after {
  content: "";
  position: absolute;
  bottom: calc(var(--s) / -18);
  left: calc(50% - var(--s) / 18);
  width: calc(var(--s) / 9);
  height: calc(var(--s) / 9);
  border-radius: 50%;
  background: var(--c);
}
@keyframes ldr-double-pendulum-upper {
  0% { transform: rotate(17.2deg); }
  2.08% { transform: rotate(26.7deg); }
  4.17% { transform: rotate(34.7deg); }
  6.25% { transform: rotate(41.0deg); }
  8.33% { transform: rotate(45.5deg); }
  10.42% { transform: rotate(48.1deg); }
  12.5% { transform: rotate(49.0deg); }
  14.58% { transform: rotate(48.4deg); }
  16.67% { transform: rotate(46.5deg); }
  18.75% { transform: rotate(43.7deg); }
  20.83% { transform: rotate(40.2deg); }
  22.92% { transform: rotate(36.5deg); }
  25% { transform: rotate(32.8deg); }
  27.08% { transform: rotate(29.4deg); }
  29.17% { transform: rotate(26.5deg); }
  31.25% { transform: rotate(24.3deg); }
  33.33% { transform: rotate(22.8deg); }
  35.42% { transform: rotate(22.0deg); }
  37.5% { transform: rotate(21.7deg); }
  39.58% { transform: rotate(21.7deg); }
  41.67% { transform: rotate(21.8deg); }
  43.75% { transform: rotate(21.6deg); }
  45.83% { transform: rotate(21.0deg); }
  47.92% { transform: rotate(19.6deg); }
  50% { transform: rotate(17.2deg); }
  52.08% { transform: rotate(13.7deg); }
  54.17% { transform: rotate(8.8deg); }
  56.25% { transform: rotate(2.7deg); }
  58.33% { transform: rotate(-4.5deg); }
  60.42% { transform: rotate(-12.8deg); }
  62.5% { transform: rotate(-21.7deg); }
  64.58% { transform: rotate(-30.9deg); }
  66.67% { transform: rotate(-40.1deg); }
  68.75% { transform: rotate(-48.7deg); }
  70.83% { transform: rotate(-56.4deg); }
  72.92% { transform: rotate(-62.7deg); }
  75% { transform: rotate(-67.2deg); }
  77.08% { transform: rotate(-69.8deg); }
  79.17% { transform: rotate(-70.1deg); }
  81.25% { transform: rotate(-68.0deg); }
  83.33% { transform: rotate(-63.8deg); }
  85.42% { transform: rotate(-57.3deg); }
  87.5% { transform: rotate(-49.0deg); }
  89.58% { transform: rotate(-39.2deg); }
  91.67% { transform: rotate(-28.2deg); }
  93.75% { transform: rotate(-16.6deg); }
  95.83% { transform: rotate(-4.9deg); }
  97.92% { transform: rotate(6.6deg); }
  100% { transform: rotate(17.2deg); }
}
@keyframes ldr-double-pendulum-lower {
  0% { transform: rotate(89.9deg); }
  2.08% { transform: rotate(106.2deg); }
  4.17% { transform: rotate(103.1deg); }
  6.25% { transform: rotate(81.9deg); }
  8.33% { transform: rotate(48.5deg); }
  10.42% { transform: rotate(11.2deg); }
  12.5% { transform: rotate(-22.7deg); }
  14.58% { transform: rotate(-48.4deg); }
  16.67% { transform: rotate(-65.3deg); }
  18.75% { transform: rotate(-75.3deg); }
  20.83% { transform: rotate(-81.6deg); }
  22.92% { transform: rotate(-85.8deg); }
  25% { transform: rotate(-87.2deg); }
  27.08% { transform: rotate(-82.7deg); }
  29.17% { transform: rotate(-68.3deg); }
  31.25% { transform: rotate(-41.6deg); }
  33.33% { transform: rotate(-3.6deg); }
  35.42% { transform: rotate(40.4deg); }
  37.5% { transform: rotate(81.7deg); }
  39.58% { transform: rotate(111.0deg); }
  41.67% { transform: rotate(121.0deg); }
  43.75% { transform: rotate(109.5deg); }
  45.83% { transform: rotate(79.9deg); }
  47.92% { transform: rotate(40.4deg); }
  50% { transform: rotate(1.1deg); }
  52.08% { transform: rotate(-29.1deg); }
  54.17% { transform: rotate(-45.1deg); }
  56.25% { transform: rotate(-47.0deg); }
  58.33% { transform: rotate(-39.1deg); }
  60.42% { transform: rotate(-27.8deg); }
  62.5% { transform: rotate(-18.9deg); }
  64.58% { transform: rotate(-15.3deg); }
  66.67% { transform: rotate(-16.2deg); }
  68.75% { transform: rotate(-18.4deg); }
  70.83% { transform: rotate(-18.0deg); }
  72.92% { transform: rotate(-12.8deg); }
  75% { transform: rotate(-3.7deg); }
  77.08% { transform: rotate(5.7deg); }
  79.17% { transform: rotate(10.4deg); }
  81.25% { transform: rotate(6.7deg); }
  83.33% { transform: rotate(-5.9deg); }
  85.42% { transform: rotate(-23.8deg); }
  87.5% { transform: rotate(-40.1deg); }
  89.58% { transform: rotate(-47.2deg); }
  91.67% { transform: rotate(-39.5deg); }
  93.75% { transform: rotate(-15.8deg); }
  95.83% { transform: rotate(19.6deg); }
  97.92% { transform: rotate(58.2deg); }
  100% { transform: rotate(89.9deg); }
}

.ldr-slinky {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.3);
  height: calc(var(--s) * 0.72);
}
.ldr-slinky span {
  position: absolute;
  top: calc(var(--s) * 0.56);
  right: calc(50% + var(--s) * 0.14);
  width: calc(var(--s) * 0.44);
  height: calc(var(--s) * 0.16);
  box-sizing: border-box;
  border: calc(var(--s) / 30) solid var(--c);
  border-radius: 50%;
  transform-origin: calc(100% + var(--s) * 0.14) 50%;
  animation: ldr-slinky-flip 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
  animation-delay: calc(var(--i) * 0.05s);
}
@keyframes ldr-slinky-flip {
  from { transform: rotate(0deg); }
  to   { transform: rotate(180deg); }
}

.ldr-aurora-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --t: calc(var(--s) / 8);
  --ring: conic-gradient(from 0deg, var(--c), oklch(from var(--c) l c calc(h + 70)), oklch(from var(--c) l c calc(h - 70)), var(--c));
  --hole: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
  position: relative;
  width: var(--s);
  height: var(--s);
  animation: ldr-aurora-ring-spin 1.4s linear infinite;
}
.ldr-aurora-ring::after,
.ldr-aurora-ring-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ring);
  -webkit-mask: var(--hole);
  mask: var(--hole);
}
.ldr-aurora-ring-glow {
  position: absolute;
  inset: 0;
  filter: blur(calc(var(--s) / 7));
  animation: ldr-aurora-ring-breathe 2.8s ease-in-out infinite;
}
@keyframes ldr-aurora-ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-aurora-ring-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50%      { opacity: 0.95; transform: scale(1.12); }
}

.ldr-neon-sign {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--s) / 20) var(--c)) drop-shadow(0 0 calc(var(--s) / 6) color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent));
}
.ldr-neon-sign circle {
  fill: none;
  stroke: var(--c);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 86 14;
  stroke-dashoffset: 68;
}
.ldr-neon-sign-tube {
  opacity: 0.2;
}
.ldr-neon-sign .ldr-neon-sign-core {
  stroke: color-mix(in srgb, var(--c) 35%, #fff);
  stroke-width: 3;
}
.ldr-neon-sign-lit {
  animation: ldr-neon-sign-buzz 3.2s steps(1, end) infinite;
}
@keyframes ldr-neon-sign-buzz {
  0%        { opacity: 0; }
  4%        { opacity: 1; }
  6%        { opacity: 0.2; }
  9%        { opacity: 1; }
  10%       { opacity: 0; }
  14%       { opacity: 1; }
  62%       { opacity: 0.55; }
  63%       { opacity: 1; }
  90%, 100% { opacity: 0; }
}

.ldr-morphing-blob {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --fill: linear-gradient(140deg, oklch(from var(--c) l c calc(h - 45)), var(--c) 50%, oklch(from var(--c) l c calc(h + 55)));
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  animation: ldr-morphing-blob-morph 4.8s ease-in-out infinite, ldr-morphing-blob-turn 9.6s linear infinite;
}
.ldr-morphing-blob::before,
.ldr-morphing-blob::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill);
}
.ldr-morphing-blob::before {
  filter: blur(calc(var(--s) / 5));
  opacity: 0.6;
  transform: scale(0.95);
}
@keyframes ldr-morphing-blob-morph {
  0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
  25%      { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; }
  50%      { border-radius: 38% 62% 33% 67% / 62% 35% 65% 38%; }
  75%      { border-radius: 55% 45% 62% 38% / 42% 68% 32% 58%; }
}
@keyframes ldr-morphing-blob-turn {
  to { transform: rotate(360deg); }
}

.ldr-lava-lamp {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  box-sizing: border-box;
  width: calc(var(--s) * 0.62);
  height: calc(var(--s) * 1.2);
  border: calc(var(--s) / 26) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  border-radius: calc(var(--s) * 0.31);
  background: linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 4%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent));
  box-shadow: 0 0 calc(var(--s) / 4) color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  overflow: hidden;
}
.ldr-lava-lamp > svg {
  position: absolute;
}
.ldr-lava-lamp-wax {
  position: absolute;
  inset: 0;
  filter: url(#ldr-lava-lamp-goo);
}
.ldr-lava-lamp-wax::before,
.ldr-lava-lamp-wax::after,
.ldr-lava-lamp-wax span {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--c);
}
.ldr-lava-lamp-wax::before {
  left: -10%;
  right: -10%;
  bottom: -14%;
  height: 30%;
}
.ldr-lava-lamp-wax::after {
  left: 18%;
  right: 18%;
  top: -8%;
  height: 16%;
}
.ldr-lava-lamp-wax span {
  bottom: 6%;
  left: var(--x);
  width: var(--d);
  height: var(--d);
  animation: ldr-lava-lamp-rise var(--t) ease-in-out var(--delay) infinite;
}
.ldr-lava-lamp-wax span:nth-child(1) { --x: 16%; --d: calc(var(--s) * 0.26); --t: 4.2s; --delay: 0s; }
.ldr-lava-lamp-wax span:nth-child(2) { --x: 46%; --d: calc(var(--s) * 0.2); --t: 5.4s; --delay: -2.1s; }
.ldr-lava-lamp-wax span:nth-child(3) { --x: 28%; --d: calc(var(--s) * 0.3); --t: 6.2s; --delay: -4.4s; }
.ldr-lava-lamp-wax span:nth-child(4) { --x: 54%; --d: calc(var(--s) * 0.17); --t: 3.6s; --delay: -1.2s; }
@keyframes ldr-lava-lamp-rise {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(calc(var(--s) * -0.82)) scale(0.88, 1.14); }
}

.ldr-rising-bubbles {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(to top, color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 6%, transparent));
  box-shadow: inset 0 0 0 calc(var(--s) / 22) color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent), 0 0 calc(var(--s) / 4) color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
}
.ldr-rising-bubbles span {
  position: absolute;
  bottom: 0;
  left: var(--x);
  box-sizing: border-box;
  width: var(--d);
  height: var(--d);
  border: calc(var(--s) / 32) solid var(--c);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--c) 25%, #fff) 0 16%, color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent) 24%);
  opacity: 0;
  animation: ldr-rising-bubbles-rise var(--t) cubic-bezier(0.45, 0, 0.75, 0.6) var(--delay) infinite,
    ldr-rising-bubbles-wobble 0.7s ease-in-out var(--delay) infinite alternate;
}
.ldr-rising-bubbles span:nth-child(1) { --x: 16%; --d: calc(var(--s) * 0.2); --t: 2.4s; --delay: 0s; }
.ldr-rising-bubbles span:nth-child(2) { --x: 54%; --d: calc(var(--s) * 0.13); --t: 1.9s; --delay: -0.8s; }
.ldr-rising-bubbles span:nth-child(3) { --x: 34%; --d: calc(var(--s) * 0.25); --t: 2.8s; --delay: -1.6s; }
.ldr-rising-bubbles span:nth-child(4) { --x: 62%; --d: calc(var(--s) * 0.17); --t: 2.2s; --delay: -1.2s; }
.ldr-rising-bubbles span:nth-child(5) { --x: 26%; --d: calc(var(--s) * 0.11); --t: 1.7s; --delay: -0.4s; }
.ldr-rising-bubbles span:nth-child(6) { --x: 46%; --d: calc(var(--s) * 0.18); --t: 2.5s; --delay: -2s; }
.ldr-rising-bubbles span:nth-child(7) { --x: 70%; --d: calc(var(--s) * 0.1); --t: 1.6s; --delay: -0.9s; }
@keyframes ldr-rising-bubbles-rise {
  0%   { transform: translateY(100%) scale(0.5); opacity: 0; }
  12%  { opacity: 1; }
  82%  { transform: translateY(calc(var(--s) * -0.72)) scale(1); opacity: 1; }
  100% { transform: translateY(calc(var(--s) * -0.82)) scale(1.5); opacity: 0; }
}
@keyframes ldr-rising-bubbles-wobble {
  from { translate: calc(var(--s) * -0.04) 0; }
  to   { translate: calc(var(--s) * 0.04) 0; }
}

.ldr-gradient-border {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 0.92);
  height: calc(var(--s) * 0.92);
  filter: drop-shadow(0 0 calc(var(--s) / 10) color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent));
}
.ldr-gradient-border span {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: calc(var(--s) / 11);
  border-radius: calc(var(--s) / 4);
  overflow: hidden;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.ldr-gradient-border span::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg, transparent 0 30%, oklch(from var(--c) l c calc(h - 60)) 55%, var(--c) 78%, oklch(from var(--c) l c calc(h + 60)) 100%);
  animation: ldr-gradient-border-spin 1.8s linear infinite;
}
@keyframes ldr-gradient-border-spin {
  to { transform: rotate(360deg); }
}

.ldr-frosted-glass {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-frosted-glass-orbit {
  position: absolute;
  inset: 0;
  animation: ldr-frosted-glass-spin 2.4s linear infinite;
}
.ldr-frosted-glass-orbit::before,
.ldr-frosted-glass-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 0.44);
  height: calc(var(--s) * 0.44);
  margin: calc(var(--s) * -0.22);
  border-radius: 50%;
  background: var(--c);
  transform: translateX(calc(var(--s) * 0.3));
}
.ldr-frosted-glass-orbit::after {
  background: oklch(from var(--c) l c calc(h + 90));
  transform: translateX(calc(var(--s) * -0.3));
}
.ldr-frosted-glass-pane {
  position: absolute;
  inset: 10%;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  border-radius: 30%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
  -webkit-backdrop-filter: blur(calc(var(--s) / 8));
  backdrop-filter: blur(calc(var(--s) / 8));
}
@keyframes ldr-frosted-glass-spin {
  to { transform: rotate(360deg); }
}

.ldr-breathing-glow {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-breathing-glow::before,
.ldr-breathing-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.ldr-breathing-glow::before {
  inset: -35%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent) 55%, transparent);
  animation: ldr-breathing-glow-halo 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-breathing-glow::after {
  inset: 12%;
  border: calc(var(--s) / 12) solid var(--c);
  box-shadow: 0 0 calc(var(--s) / 6) color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent), inset 0 0 calc(var(--s) / 6) color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  animation: ldr-breathing-glow-ring 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ldr-breathing-glow-halo {
  0%, 100% { transform: scale(0.5); opacity: 0.2; }
  40%      { transform: scale(1); opacity: 1; }
}
@keyframes ldr-breathing-glow-ring {
  0%, 100% { transform: scale(0.88); }
  40%      { transform: scale(1); }
}

.ldr-plasma-ball {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--s) / 22) var(--c));
}
.ldr-plasma-ball-glass {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  stroke-width: 3;
}
.ldr-plasma-ball-bolt {
  transform-box: view-box;
  transform-origin: 50% 50%;
  fill: oklch(from var(--c) l c calc(h + 50));
  stroke: oklch(from var(--c) l c calc(h + 50));
  animation: ldr-plasma-ball-wander var(--t) ease-in-out infinite alternate, ldr-plasma-ball-flicker 0.4s steps(1, end) infinite;
}
.ldr-plasma-ball-bolt path {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
}
.ldr-plasma-ball-bolt:nth-of-type(1) { --r: 0deg; --t: 2.4s; }
.ldr-plasma-ball-bolt:nth-of-type(2) { --r: 75deg; --t: 3.1s; animation-delay: -1s, -0.1s; }
.ldr-plasma-ball-bolt:nth-of-type(3) { --r: 150deg; --t: 2.7s; animation-delay: -2s, -0.25s; }
.ldr-plasma-ball-bolt:nth-of-type(4) { --r: 220deg; --t: 3.5s; animation-delay: -0.6s, -0.15s; }
.ldr-plasma-ball-bolt:nth-of-type(5) { --r: 290deg; --t: 2.9s; animation-delay: -1.6s, -0.3s; }
.ldr-plasma-ball-core {
  fill: var(--c);
  stroke: color-mix(in srgb, var(--c) 40%, #fff);
  stroke-width: 4;
}
@keyframes ldr-plasma-ball-wander {
  from { transform: rotate(calc(var(--r) - 30deg)); }
  to   { transform: rotate(calc(var(--r) + 30deg)); }
}
@keyframes ldr-plasma-ball-flicker {
  0%, 100% { opacity: 1; }
  30%      { opacity: 0.55; }
  45%      { opacity: 0.9; }
  70%      { opacity: 0.4; }
}

.ldr-bokeh {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.8);
  height: var(--s);
}
.ldr-bokeh span {
  --k: oklch(from var(--c) l c calc(h + var(--h)));
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--k) 40%, transparent) 62%, color-mix(in srgb, var(--k) 85%, transparent) 90%, transparent);
  filter: blur(calc(var(--s) / 60));
  opacity: 0.25;
  animation: ldr-bokeh-drift var(--t) ease-in-out var(--delay) infinite;
}
.ldr-bokeh span:nth-child(1) { --x: 4%; --y: 22%; --d: calc(var(--s) * 0.56); --h: 0; --t: 3.2s; --delay: 0s; }
.ldr-bokeh span:nth-child(2) { --x: 30%; --y: 46%; --d: calc(var(--s) * 0.4); --h: 45; --t: 2.6s; --delay: -0.8s; }
.ldr-bokeh span:nth-child(3) { --x: 46%; --y: 4%; --d: calc(var(--s) * 0.5); --h: -45; --t: 3.6s; --delay: -1.9s; }
.ldr-bokeh span:nth-child(4) { --x: 64%; --y: 36%; --d: calc(var(--s) * 0.58); --h: 80; --t: 3s; --delay: -1.2s; }
.ldr-bokeh span:nth-child(5) { --x: 22%; --y: 0%; --d: calc(var(--s) * 0.3); --h: -80; --t: 2.8s; --delay: -2.3s; }
@keyframes ldr-bokeh-drift {
  0%, 100% { transform: translate(0, 0) scale(0.85); opacity: 0.25; }
  50%      { transform: translate(calc(var(--s) * 0.08), calc(var(--s) * -0.06)) scale(1.05); opacity: 1; }
}

.ldr-holo-disc {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --a: oklch(from var(--c) calc(l + 0.08) c calc(h - 70));
  --b: oklch(from var(--c) calc(l + 0.08) c calc(h + 70));
  --y: oklch(from var(--c) calc(l + 0.12) c calc(h + 150));
  --hole: radial-gradient(closest-side, transparent 22%, #000 calc(22% + 1px));
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
  -webkit-mask: var(--hole);
  mask: var(--hole);
}
.ldr-holo-disc::before,
.ldr-holo-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.ldr-holo-disc::before {
  background: conic-gradient(transparent 0 5%, var(--a) 11%, var(--c) 15%, var(--b) 19%, var(--y) 23%, transparent 29% 55%, var(--a) 61%, var(--c) 65%, var(--b) 69%, var(--y) 73%, transparent 79%);
  animation: ldr-holo-disc-spin 1.4s linear infinite;
}
.ldr-holo-disc::after {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent) 34%, transparent calc(34% + 1px));
  box-shadow: inset 0 0 0 calc(var(--s) / 26) color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
@keyframes ldr-holo-disc-spin {
  to { transform: rotate(360deg); }
}

.ldr-box-shadow-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --d: calc(var(--s) / 7);
  --r: calc(var(--s) * 0.38);
  --q: calc(var(--s) * 0.269);
  width: var(--d);
  height: var(--d);
  margin: calc((var(--s) - var(--d)) / 2);
  border-radius: 50%;
  box-shadow:
    0 calc(var(--r) * -1) calc(var(--s) / 6) 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent),
    calc(var(--q) * -1) calc(var(--q) * -1) calc(var(--s) / 8) 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent),
    0 calc(var(--r) * -1) 0 0 var(--c),
    calc(var(--q) * -1) calc(var(--q) * -1) 0 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 80%, transparent),
    calc(var(--r) * -1) 0 0 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 62%, transparent),
    calc(var(--q) * -1) var(--q) 0 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 46%, transparent),
    0 var(--r) 0 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent),
    var(--q) var(--q) 0 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 24%, transparent),
    var(--r) 0 0 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 17%, transparent),
    var(--q) calc(var(--q) * -1) 0 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
  animation: ldr-box-shadow-spinner-spin 0.9s steps(8) infinite;
}
@keyframes ldr-box-shadow-spinner-spin {
  to { transform: rotate(360deg); }
}

.ldr-spotlight {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.8);
  height: calc(var(--s) * 1.1);
}
.ldr-spotlight-beam {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 1);
  margin-left: calc(var(--s) * -0.6);
  background: conic-gradient(from 162deg at 50% calc(var(--s) * 0.06), transparent, color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent) 12deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 65%, transparent) 18deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent) 24deg, transparent 36deg);
  -webkit-mask: linear-gradient(#000 25%, rgba(0, 0, 0, 0.25));
  mask: linear-gradient(#000 25%, rgba(0, 0, 0, 0.25));
  transform-origin: 50% calc(var(--s) * 0.06);
  animation: ldr-spotlight-sweep 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.ldr-spotlight-beam::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) * 0.24);
  height: calc(var(--s) * 0.14);
  margin-left: calc(var(--s) * -0.12);
  border-radius: calc(var(--s) * 0.04) calc(var(--s) * 0.04) calc(var(--s) * 0.12) calc(var(--s) * 0.12);
  background: var(--c);
}
.ldr-spotlight-spot {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--s) * 0.6);
  height: calc(var(--s) * 0.16);
  margin-left: calc(var(--s) * -0.3);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 75%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent) 60%, transparent);
  animation: ldr-spotlight-slide 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes ldr-spotlight-sweep {
  from { transform: rotate(28deg); }
  to   { transform: rotate(-28deg); }
}
@keyframes ldr-spotlight-slide {
  from { transform: translateX(calc(var(--s) * -0.52)); }
  to   { transform: translateX(calc(var(--s) * 0.52)); }
}

.ldr-electric-arc {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 2);
  height: calc(var(--s) * 0.84);
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--s) / 16) var(--c));
}
.ldr-electric-arc-bolts {
  animation: ldr-electric-arc-burst 1.6s steps(1, end) infinite;
}
.ldr-electric-arc-bolts polyline {
  fill: none;
  stroke: var(--c);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0;
  animation: ldr-electric-arc-jump 0.24s steps(1, end) infinite;
}
.ldr-electric-arc-bolts polyline:nth-child(2) { animation-delay: -0.08s; }
.ldr-electric-arc-bolts polyline:nth-child(3) { animation-delay: -0.16s; }
.ldr-electric-arc-node {
  fill: var(--c);
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  stroke-width: 6;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ldr-electric-arc-charge 1.6s cubic-bezier(0.5, 0, 0.9, 0.6) infinite;
}
@keyframes ldr-electric-arc-jump {
  0%          { opacity: 1; }
  33.3%, 100% { opacity: 0; }
}
@keyframes ldr-electric-arc-burst {
  0%        { opacity: 1; }
  55%, 100% { opacity: 0; }
}
@keyframes ldr-electric-arc-charge {
  0%   { transform: scale(1.15); }
  12%  { transform: scale(0.85); }
  55%  { transform: scale(0.85); }
  100% { transform: scale(1.15); }
}

.ldr-light-trail {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--s) / 20) var(--c));
}
.ldr-light-trail use {
  fill: none;
  stroke: var(--c);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ldr-light-trail-track {
  stroke-width: 3;
  opacity: 0.14;
}
.ldr-light-trail-tail {
  animation: ldr-light-trail-run 2.4s linear infinite;
}
.ldr-light-trail-tail:nth-of-type(2) { stroke-dasharray: 34 66; stroke-width: 4; opacity: 0.3; animation-delay: -1.584s; }
.ldr-light-trail-tail:nth-of-type(3) { stroke-dasharray: 18 82; stroke-width: 5; opacity: 0.55; animation-delay: -1.968s; }
.ldr-light-trail-tail:nth-of-type(4) { stroke-dasharray: 6 94; stroke-width: 6.5; animation-delay: -2.256s; }
@keyframes ldr-light-trail-run {
  to { stroke-dashoffset: -100; }
}

.ldr-sunburst {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-sunburst::before,
.ldr-sunburst::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: ldr-sunburst-flare 2.4s ease-in-out infinite;
}
.ldr-sunburst::before {
  inset: -14%;
  background: repeating-conic-gradient(from -4deg, var(--c) 0 7deg, transparent 9deg 28deg, var(--c) 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 36%, #000 44%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 36%, #000 44%, transparent 100%);
  animation: ldr-sunburst-spin 8s linear infinite, ldr-sunburst-flare 2.4s ease-in-out infinite;
}
.ldr-sunburst::after {
  inset: 29%;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--c) 35%, #fff), var(--c) 70%);
  box-shadow: 0 0 calc(var(--s) / 5) color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent);
}
@keyframes ldr-sunburst-spin {
  to { rotate: 360deg; }
}
@keyframes ldr-sunburst-flare {
  0%, 100% { scale: 0.9; }
  50%      { scale: 1.06; }
}

.ldr-neon-cube {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--s) / 24) var(--c)) drop-shadow(0 0 calc(var(--s) / 8) color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent));
}
.ldr-neon-cube use {
  fill: none;
  stroke: var(--c);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ldr-neon-cube-tube {
  opacity: 0.2;
}
.ldr-neon-cube-lit,
.ldr-neon-cube .ldr-neon-cube-core {
  stroke-dasharray: 16 34;
  animation: ldr-neon-cube-race 1.6s linear infinite;
}
.ldr-neon-cube .ldr-neon-cube-core {
  stroke: color-mix(in srgb, var(--c) 35%, #fff);
  stroke-width: 2;
}
@keyframes ldr-neon-cube-race {
  to { stroke-dashoffset: -50; }
}

.ldr-gooey-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-gooey-spinner::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: calc(var(--s) / 24) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
  border-radius: 50%;
}
.ldr-gooey-spinner > svg {
  position: absolute;
}
.ldr-gooey-spinner-drops {
  position: absolute;
  inset: 0;
  filter: url(#ldr-gooey-spinner-goo);
}
.ldr-gooey-spinner-drops span {
  position: absolute;
  inset: 0;
  animation: ldr-gooey-spinner-spin var(--t) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.ldr-gooey-spinner-drops span::before {
  content: "";
  position: absolute;
  top: 16%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  background: var(--c);
}
.ldr-gooey-spinner-drops span:nth-child(1) { --d: calc(var(--s) * 0.26); --t: 1.5s; }
.ldr-gooey-spinner-drops span:nth-child(2) { --d: calc(var(--s) * 0.2); --t: 2s; }
.ldr-gooey-spinner-drops span:nth-child(3) { --d: calc(var(--s) * 0.22); --t: 2.5s; }
.ldr-gooey-spinner-drops span:nth-child(4) { --d: calc(var(--s) * 0.17); --t: 3s; }
@keyframes ldr-gooey-spinner-spin {
  to { transform: rotate(360deg); }
}

.ldr-firework {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  filter: drop-shadow(0 0 calc(var(--s) / 20) color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent));
}
.ldr-firework::before {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 45%, transparent);
  animation: ldr-firework-flash 1.8s ease-out infinite;
}
.ldr-firework span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 0.06);
  height: calc(var(--s) * 0.2);
  margin: calc(var(--s) * -0.2) 0 0 calc(var(--s) * -0.03);
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--i) * 30deg));
}
.ldr-firework span::before,
.ldr-firework span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--s) * 0.03);
  background: linear-gradient(var(--k, var(--c)), transparent);
  opacity: 0;
  animation: ldr-firework-burst 1.8s cubic-bezier(0.1, 0.75, 0.3, 1) infinite;
}
.ldr-firework span::after {
  --k: oklch(from var(--c) l c calc(h - 60));
  transform-origin: 50% 100%;
  rotate: 15deg;
  scale: 0.7;
  animation-delay: -0.9s;
}
.ldr-firework span:nth-child(odd) {
  --k: oklch(from var(--c) l c calc(h + 70));
}
@keyframes ldr-firework-flash {
  0%        { transform: scale(0.2); opacity: 1; }
  25%, 100% { transform: scale(1.4); opacity: 0; }
}
@keyframes ldr-firework-burst {
  0%   { transform: translateY(0) scaleY(0.2); opacity: 0; }
  6%   { opacity: 1; }
  50%  { transform: translateY(calc(var(--s) * -0.24)) scaleY(1); opacity: 1; }
  100% { transform: translateY(calc(var(--s) * -0.3)) scaleY(0.1); opacity: 0; }
}

.ldr-synthwave-sun {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  filter: drop-shadow(0 0 calc(var(--s) / 8) color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent));
}
.ldr-synthwave-sun span {
  --band: calc(var(--s) / 8);
  --stripes: repeating-linear-gradient(#000 0 calc(var(--band) * 0.62), transparent calc(var(--band) * 0.62) var(--band));
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(oklch(from var(--c) calc(l + 0.2) c calc(h + 190)), oklch(from var(--c) l c calc(h + 80)) 50%, var(--c));
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 48% no-repeat, var(--stripes) 0 0 / 100% var(--band);
  mask: linear-gradient(#000 0 0) 0 0 / 100% 48% no-repeat, var(--stripes) 0 0 / 100% var(--band);
  animation: ldr-synthwave-sun-sink 0.9s linear infinite;
}
@keyframes ldr-synthwave-sun-sink {
  from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
  to   { -webkit-mask-position: 0 0, 0 var(--band); mask-position: 0 0, 0 var(--band); }
}

.ldr-dripping-goo {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.4);
  height: calc(var(--s) * 1.2);
}
.ldr-dripping-goo > svg {
  position: absolute;
}
.ldr-dripping-goo-goo {
  position: absolute;
  inset: 0;
  filter: url(#ldr-dripping-goo-filter);
}
.ldr-dripping-goo-goo::before,
.ldr-dripping-goo-goo::after,
.ldr-dripping-goo-goo span {
  content: "";
  position: absolute;
  border-radius: calc(var(--s) * 0.1);
  background: var(--c);
}
.ldr-dripping-goo-goo::before {
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--s) * 0.2);
}
.ldr-dripping-goo-goo::after {
  bottom: 0;
  left: 12%;
  right: 12%;
  height: calc(var(--s) * 0.14);
}
.ldr-dripping-goo-goo span {
  top: calc(var(--s) * 0.04);
  left: var(--x);
  width: calc(var(--s) * 0.24);
  height: calc(var(--s) * 0.24);
  border-radius: 50%;
  animation: ldr-dripping-goo-drip var(--t) infinite;
  animation-delay: var(--delay);
}
.ldr-dripping-goo-goo span:nth-child(1) { --x: 16%; --t: 2.2s; --delay: 0s; }
.ldr-dripping-goo-goo span:nth-child(2) { --x: 43%; --t: 2.6s; --delay: -0.9s; }
.ldr-dripping-goo-goo span:nth-child(3) { --x: 70%; --t: 2.4s; --delay: -1.7s; }
@keyframes ldr-dripping-goo-drip {
  0%   { transform: translateY(0) scale(0.3); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
  45%  { transform: translateY(calc(var(--s) * 0.14)) scale(0.95, 1.12); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.6); }
  78%  { transform: translateY(calc(var(--s) * 0.82)) scale(0.85, 1.15); animation-timing-function: ease-out; }
  100% { transform: translateY(calc(var(--s) * 0.9)) scale(0.2); }
}

.ldr-soap-bubble {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ldr-color, #3b82f6) 6%, transparent) 45%, color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent) 68%, color-mix(in srgb, var(--ldr-color, #3b82f6) 75%, transparent) 92%, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 100%);
  animation: ldr-soap-bubble-wobble 0.9s ease-in-out infinite alternate, ldr-soap-bubble-bob 2.4s ease-in-out infinite;
}
.ldr-soap-bubble::before,
.ldr-soap-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.ldr-soap-bubble::before {
  background: conic-gradient(oklch(from var(--c) l c calc(h - 70)), transparent 18%, oklch(from var(--c) l c calc(h + 60)) 34%, transparent 52%, oklch(from var(--c) l c calc(h + 150)) 70%, transparent 86%, oklch(from var(--c) l c calc(h - 70)));
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 96%, transparent);
  mask: radial-gradient(closest-side, transparent 62%, #000 96%, transparent);
  opacity: 0.85;
  animation: ldr-soap-bubble-film 3s linear infinite;
}
.ldr-soap-bubble::after {
  background:
    radial-gradient(ellipse 20% 13% at 32% 27%, color-mix(in srgb, var(--c) 15%, #fff), transparent),
    radial-gradient(ellipse 9% 6% at 71% 76%, color-mix(in srgb, var(--c) 25%, #fff), transparent);
  transform: rotate(-20deg);
}
@keyframes ldr-soap-bubble-wobble {
  from { scale: 1.05 0.95; }
  to   { scale: 0.96 1.04; }
}
@keyframes ldr-soap-bubble-bob {
  0%, 100% { translate: 0 calc(var(--s) * 0.05); }
  50%      { translate: 0 calc(var(--s) * -0.05); }
}
@keyframes ldr-soap-bubble-film {
  to { transform: rotate(360deg); }
}

.ldr-smoke {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) * 1.2);
}
.ldr-smoke::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--s) * 0.1);
  height: calc(var(--s) * 0.1);
  margin-left: calc(var(--s) * -0.05);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 6) color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent);
}
.ldr-smoke span {
  position: absolute;
  bottom: calc(var(--s) * 0.02);
  left: 50%;
  width: calc(var(--s) * 0.44);
  height: calc(var(--s) * 0.44);
  margin-left: calc(var(--s) * -0.22);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 75%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 60%, transparent);
  filter: blur(calc(var(--s) / 28));
  opacity: 0;
  animation: ldr-smoke-rise 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.4s);
}
@keyframes ldr-smoke-rise {
  0%   { transform: translate(0, 0) scale(0.2); opacity: 0; }
  10%  { opacity: 1; }
  35%  { transform: translate(calc(var(--s) * 0.1), calc(var(--s) * -0.26)) scale(0.55); }
  65%  { transform: translate(calc(var(--s) * -0.1), calc(var(--s) * -0.54)) scale(0.95); opacity: 0.75; }
  100% { transform: translate(calc(var(--s) * 0.06), calc(var(--s) * -0.8)) scale(1.4); opacity: 0; }
}

.ldr-ink-drop {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.1);
  height: calc(var(--s) * 1.2);
  border-radius: 0 0 calc(var(--s) * 0.22) calc(var(--s) * 0.22);
  background: linear-gradient(transparent 30%, color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent) 30%);
  overflow: hidden;
}
.ldr-ink-drop::before,
.ldr-ink-drop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
}
.ldr-ink-drop::before {
  height: 1px;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
.ldr-ink-drop::after {
  left: 50%;
  right: auto;
  width: calc(var(--s) * 0.5);
  height: calc(var(--s) * 0.1);
  margin: calc(var(--s) * -0.05) 0 0 calc(var(--s) * -0.25);
  border: calc(var(--s) / 30) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
  border-radius: 50%;
  opacity: 0;
  animation: ldr-ink-drop-ripple 2.8s ease-out infinite;
}
.ldr-ink-drop-drop {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) * 0.12);
  height: calc(var(--s) * 0.16);
  margin-left: calc(var(--s) * -0.06);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: var(--c);
  animation: ldr-ink-drop-fall 2.8s infinite;
}
.ldr-ink-drop-cloud {
  position: absolute;
  top: 30%;
  left: 50%;
  width: calc(var(--s) * 0.4);
  height: calc(var(--s) * 0.4);
  margin: calc(var(--s) * -0.08) 0 0 calc(var(--s) * -0.2);
  border-radius: 45% 55% 60% 40%;
  background: var(--c);
  filter: blur(calc(var(--s) / 16));
  opacity: 0;
  animation: ldr-ink-drop-bloom 2.8s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.ldr-ink-drop-cloud:nth-of-type(2) { --dx: calc(var(--s) * -0.26); --dy: calc(var(--s) * 0.42); --r: -60deg; }
.ldr-ink-drop-cloud:nth-of-type(3) { --dx: calc(var(--s) * 0.02); --dy: calc(var(--s) * 0.56); --r: 40deg; }
.ldr-ink-drop-cloud:nth-of-type(4) { --dx: calc(var(--s) * 0.28); --dy: calc(var(--s) * 0.36); --r: 80deg; }
@keyframes ldr-ink-drop-fall {
  0%       { transform: translateY(calc(var(--s) * -0.2)); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
  22%      { transform: translateY(calc(var(--s) * 0.24)); opacity: 1; }
  24%, 100% { transform: translateY(calc(var(--s) * 0.3)); opacity: 0; }
}
@keyframes ldr-ink-drop-ripple {
  0%, 21% { transform: scale(0.2); opacity: 0; }
  24%     { opacity: 1; }
  55%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes ldr-ink-drop-bloom {
  0%, 21% { transform: translate(0, 0) scale(0.1) rotate(0deg); opacity: 0; }
  28%     { opacity: 0.9; }
  70%     { opacity: 0.55; }
  100%    { transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(var(--r)); opacity: 0; }
}

.ldr-fireflies {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.8);
  height: var(--s);
}
.ldr-fireflies span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s) * 0.11);
  height: calc(var(--s) * 0.11);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 8) calc(var(--s) / 30) color-mix(in srgb, var(--ldr-color, #3b82f6) 65%, transparent);
  animation: ldr-fireflies-wander var(--t) ease-in-out infinite, ldr-fireflies-blink 1.8s ease-in-out infinite;
  animation-delay: var(--delay), calc(var(--delay) * 0.7);
}
.ldr-fireflies span:nth-child(1) { --x: 12%; --y: 30%; --ax: calc(var(--s) * 0.2); --ay: calc(var(--s) * 0.14); --t: 3.4s; --delay: 0s; }
.ldr-fireflies span:nth-child(2) { --x: 34%; --y: 62%; --ax: calc(var(--s) * -0.18); --ay: calc(var(--s) * 0.16); --t: 4.1s; --delay: -1.3s; }
.ldr-fireflies span:nth-child(3) { --x: 52%; --y: 22%; --ax: calc(var(--s) * 0.22); --ay: calc(var(--s) * -0.12); --t: 3.8s; --delay: -2.2s; }
.ldr-fireflies span:nth-child(4) { --x: 70%; --y: 58%; --ax: calc(var(--s) * -0.2); --ay: calc(var(--s) * -0.16); --t: 4.4s; --delay: -0.7s; }
.ldr-fireflies span:nth-child(5) { --x: 84%; --y: 32%; --ax: calc(var(--s) * -0.16); --ay: calc(var(--s) * 0.14); --t: 3.6s; --delay: -2.9s; }
.ldr-fireflies span:nth-child(6) { --x: 24%; --y: 46%; --ax: calc(var(--s) * 0.14); --ay: calc(var(--s) * -0.18); --t: 4.8s; --delay: -1.9s; }
@keyframes ldr-fireflies-wander {
  0%, 100% { translate: 0 0; }
  25%      { translate: var(--ax) calc(var(--ay) * -1); }
  50%      { translate: calc(var(--ax) * 0.4) calc(var(--ay) * 0.8); }
  75%      { translate: calc(var(--ax) * -0.8) calc(var(--ay) * 0.3); }
}
@keyframes ldr-fireflies-blink {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  50%      { opacity: 1; transform: scale(1); }
}

.ldr-glossy-sphere {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: calc(var(--s) * 1.05);
}
.ldr-glossy-sphere-ball {
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: calc(var(--s) * 0.8);
  border-radius: 50%;
  overflow: hidden;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 5) color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  animation: ldr-glossy-sphere-float 2.4s ease-in-out infinite alternate;
}
.ldr-glossy-sphere-ball::before,
.ldr-glossy-sphere-shadow::before {
  content: "";
  position: absolute;
  animation: ldr-glossy-sphere-orbit 3.2s linear infinite;
}
.ldr-glossy-sphere-ball::before {
  inset: -30%;
  background:
    radial-gradient(circle at 36% 34%, color-mix(in srgb, var(--c) 10%, #fff), color-mix(in srgb, var(--c) 55%, #fff) 6%, transparent 22%),
    radial-gradient(circle at 36% 34%, transparent 18%, color-mix(in srgb, var(--c) 55%, #000) 60%);
}
.ldr-glossy-sphere-shadow {
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  height: calc(var(--s) * 0.7);
  margin-bottom: calc(var(--s) * -0.28);
  transform: scaleY(0.22);
}
.ldr-glossy-sphere-shadow::before {
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 62%, color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent), transparent 42%);
}
@keyframes ldr-glossy-sphere-orbit {
  to { transform: rotate(360deg); }
}
@keyframes ldr-glossy-sphere-float {
  from { translate: 0 0; }
  to   { translate: 0 calc(var(--s) * -0.05); }
}

.ldr-spirit-level {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  box-sizing: border-box;
  width: calc(var(--s) * 2.2);
  height: calc(var(--s) * 0.46);
  border: calc(var(--s) / 22) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  border-radius: calc(var(--s) * 0.23);
  background: linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent));
  box-shadow: 0 0 calc(var(--s) / 4) color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  animation: ldr-spirit-level-tilt 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.ldr-spirit-level::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 50%;
  width: calc(var(--s) * 0.58);
  margin-left: calc(var(--s) * -0.29);
  border-left: calc(var(--s) / 26) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 65%, transparent);
  border-right: calc(var(--s) / 26) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 65%, transparent);
}
.ldr-spirit-level span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 0.5);
  height: calc(var(--s) * 0.24);
  margin: calc(var(--s) * -0.12) 0 0 calc(var(--s) * -0.25);
  border-radius: 50%;
  background: radial-gradient(ellipse at 38% 32%, color-mix(in srgb, var(--c) 8%, #fff), color-mix(in srgb, var(--c) 32%, #fff) 75%);
  box-shadow: inset 0 0 0 calc(var(--s) / 36) color-mix(in srgb, var(--ldr-color, #3b82f6) 75%, transparent);
  animation: ldr-spirit-level-slide 2.6s cubic-bezier(0.5, 0, 0.4, 1) 0.15s infinite alternate backwards;
}
@keyframes ldr-spirit-level-tilt {
  from { transform: rotate(4deg); }
  to   { transform: rotate(-4deg); }
}
@keyframes ldr-spirit-level-slide {
  from { transform: translateX(calc(var(--s) * -0.68)) scale(1, 1); }
  50%  { transform: translateX(0) scale(1.25, 0.84); }
  to   { transform: translateX(calc(var(--s) * 0.68)) scale(1, 1); }
}

.ldr-diamond-shine {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--s) / 12) color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent));
}
.ldr-diamond-shine-gem {
  animation: ldr-diamond-shine-bob 2.4s ease-in-out infinite;
}
.ldr-diamond-shine-gem polygon {
  fill: var(--c);
  stroke: color-mix(in srgb, var(--c) 40%, #fff);
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.ldr-diamond-shine-gem .ldr-diamond-shine-light {
  fill: color-mix(in srgb, var(--c) 55%, #fff);
}
.ldr-diamond-shine-gem .ldr-diamond-shine-dark {
  fill: color-mix(in srgb, var(--c) 70%, #000);
}
.ldr-diamond-shine-band {
  fill: color-mix(in srgb, #fff 75%, transparent);
  animation: ldr-diamond-shine-sweep 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
.ldr-diamond-shine-glint {
  fill: var(--c);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ldr-diamond-shine-glint 2.4s ease-out infinite;
}
@keyframes ldr-diamond-shine-bob {
  0%, 100% { transform: translateY(2%); }
  50%      { transform: translateY(-2%); }
}
@keyframes ldr-diamond-shine-sweep {
  0%        { transform: skewX(-20deg) translateX(0); }
  50%, 100% { transform: skewX(-20deg) translateX(160%); }
}
@keyframes ldr-diamond-shine-glint {
  0%, 38%   { transform: scale(0) rotate(0deg); opacity: 0; }
  50%       { transform: scale(1) rotate(45deg); opacity: 1; }
  68%, 100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

.ldr-hologram {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 1.3);
}
.ldr-hologram::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: calc(var(--s) * 0.08);
  clip-path: polygon(0 0, 100% 0, 68% 100%, 32% 100%);
  background: linear-gradient(to top, color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent), transparent 90%);
  animation: ldr-hologram-flicker 3s steps(1, end) infinite;
}
.ldr-hologram::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--s) * 0.5);
  height: calc(var(--s) * 0.16);
  margin-left: calc(var(--s) * -0.25);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 5) color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
}
.ldr-hologram-globe {
  --line: calc(var(--s) / 28);
  position: absolute;
  top: 0;
  left: 50%;
  box-sizing: border-box;
  width: calc(var(--s) * 0.74);
  height: calc(var(--s) * 0.74);
  margin-left: calc(var(--s) * -0.37);
  border: var(--line) solid var(--c);
  border-radius: 50%;
  background: linear-gradient(transparent calc(50% - var(--line) / 2), var(--c) 0 calc(50% + var(--line) / 2), transparent 0), color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  -webkit-mask: repeating-linear-gradient(#000 0 calc(var(--s) / 40), rgba(0, 0, 0, 0.35) 0 calc(var(--s) / 20));
  mask: repeating-linear-gradient(#000 0 calc(var(--s) / 40), rgba(0, 0, 0, 0.35) 0 calc(var(--s) / 20));
  animation: ldr-hologram-glitch 3s steps(1, end) infinite, ldr-hologram-scan 1.2s linear infinite;
}
.ldr-hologram-globe::before,
.ldr-hologram-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--line) solid var(--c);
  border-radius: 50%;
  animation: ldr-hologram-spin 2.4s ease-in-out infinite;
}
.ldr-hologram-globe::after {
  animation-delay: -1.2s;
}
@keyframes ldr-hologram-spin {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(-1); }
}
@keyframes ldr-hologram-scan {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to   { -webkit-mask-position: 0 calc(var(--s) / 20); mask-position: 0 calc(var(--s) / 20); }
}
@keyframes ldr-hologram-glitch {
  0%   { transform: none; opacity: 1; }
  60%  { transform: translateX(calc(var(--s) * 0.05)) skewX(-10deg); opacity: 0.6; }
  62%  { transform: translateX(calc(var(--s) * -0.03)); opacity: 1; }
  64%  { transform: none; }
  86%  { transform: translateX(calc(var(--s) * 0.02)); opacity: 0.75; }
  87%  { transform: none; opacity: 1; }
}
@keyframes ldr-hologram-flicker {
  0%  { opacity: 1; }
  60% { opacity: 0.45; }
  64% { opacity: 1; }
  86% { opacity: 0.7; }
  87% { opacity: 1; }
}

.ldr-crt-screen {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  box-sizing: border-box;
  width: calc(var(--s) * 1.5);
  height: calc(var(--s) * 1.14);
  padding: calc(var(--s) * 0.08);
  border: calc(var(--s) / 18) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  border-radius: calc(var(--s) * 0.18);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 8%, transparent);
}
.ldr-crt-screen span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--s) * 0.1);
  background:
    repeating-linear-gradient(transparent 0 calc(var(--s) / 40), color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent) 0 calc(var(--s) / 20)),
    radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 75%);
  box-shadow: 0 0 calc(var(--s) / 5) color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  animation: ldr-crt-screen-power 3s infinite, ldr-crt-screen-roll 0.8s linear infinite;
}
@keyframes ldr-crt-screen-power {
  0%        { transform: scale(0, 0); opacity: 0; animation-timing-function: ease-out; }
  6%        { transform: scale(0.05, 0.06); opacity: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  14%       { transform: scale(1, 0.04); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.1); }
  22%, 70%  { transform: scale(1, 1); animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.4); }
  77%       { transform: scale(1, 0.04); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  85%       { transform: scale(0.05, 0.06); opacity: 1; animation-timing-function: ease-in; }
  92%, 100% { transform: scale(0, 0); opacity: 0; }
}
@keyframes ldr-crt-screen-roll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 calc(var(--s) / 20), 0 0; }
}

.ldr-ai-sparkle {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  color: var(--c);
}
.ldr-ai-sparkle-star {
  position: absolute;
  fill: currentColor;
}
.ldr-ai-sparkle-star:nth-child(1) {
  left: 4%;
  bottom: 4%;
  width: 68%;
  height: 68%;
  animation: ldr-ai-sparkle-breathe 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-ai-sparkle-star:nth-child(2) {
  top: 2%;
  right: 2%;
  width: 36%;
  height: 36%;
  animation: ldr-ai-sparkle-twinkle 2s infinite;
}
.ldr-ai-sparkle-star:nth-child(3) {
  top: 8%;
  left: 6%;
  width: 22%;
  height: 22%;
  animation: ldr-ai-sparkle-twinkle 2s -1s infinite;
}
@keyframes ldr-ai-sparkle-breathe {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(0.78) rotate(45deg); }
  100% { transform: scale(1) rotate(90deg); }
}
@keyframes ldr-ai-sparkle-twinkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  35% {
    transform: scale(1) rotate(45deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  70%, 100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

.ldr-ai-gradient-orb {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 65%, var(--c), color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent));
  box-shadow: 0 0 calc(var(--s) / 5) color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  animation: ldr-ai-gradient-orb-breathe 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-ai-gradient-orb span {
  position: absolute;
  left: 34.5%;
  top: 12.5%;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background: var(--c);
  transform-origin: 20.7% 50%;
  filter: blur(calc(var(--s) / 9));
  animation: ldr-ai-gradient-orb-drift 3s linear infinite;
}
.ldr-ai-gradient-orb span:nth-child(2) {
  filter: blur(calc(var(--s) / 9)) hue-rotate(50deg);
  animation-duration: 4.2s;
  animation-direction: reverse;
  animation-delay: -1.4s;
}
.ldr-ai-gradient-orb span:nth-child(3) {
  filter: blur(calc(var(--s) / 9)) hue-rotate(-45deg) brightness(1.3);
  animation-duration: 5.4s;
  animation-delay: -3.6s;
}
.ldr-ai-gradient-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.6), transparent 38%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}
@keyframes ldr-ai-gradient-orb-drift {
  to { transform: rotate(360deg); }
}
@keyframes ldr-ai-gradient-orb-breathe {
  0%, 100% { transform: scale(0.9); }
  50%      { transform: scale(1); }
}

@property --ldr-streaming-response-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.ldr-streaming-response {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  gap: calc(var(--s) / 8);
  animation: ldr-streaming-response-stream 3.6s linear infinite;
}
.ldr-streaming-response-line {
  display: flex;
  gap: calc(var(--s) / 10);
}
.ldr-streaming-response-line span {
  /* r: 0 to 1 as this token arrives; fresh: 1 right after it lands, fading to 0 */
  --r: clamp(0, calc(var(--ldr-streaming-response-t) * 11 - var(--i)), 1);
  --fresh: calc(1 - clamp(0, calc((var(--ldr-streaming-response-t) * 11 - var(--i) - 1) / 2), 1));
  width: calc(var(--s) * var(--w) / 6);
  height: calc(var(--s) / 7);
  border-radius: calc(var(--s) / 14);
  background: color-mix(in srgb, var(--c) calc(40% + var(--fresh) * 60%), transparent);
  opacity: var(--r);
  transform: translateY(calc((1 - var(--r)) * var(--s) / 10));
  filter: blur(calc((1 - var(--r)) * var(--s) / 14));
}
@keyframes ldr-streaming-response-stream {
  0%   { --ldr-streaming-response-t: 0; opacity: 1; }
  18%  { --ldr-streaming-response-t: 0.32; }
  28%  { --ldr-streaming-response-t: 0.36; }
  52%  { --ldr-streaming-response-t: 0.8; }
  60%  { --ldr-streaming-response-t: 0.84; }
  72%  { --ldr-streaming-response-t: 1; }
  88%  { opacity: 1; }
  100% { --ldr-streaming-response-t: 1; opacity: 0; }
}

.ldr-ai-agent-steps {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --row: 1.8em;
  position: relative;
  isolation: isolate;
  font: 500 calc(var(--s) / 3) / 1 system-ui, sans-serif;
}
.ldr-ai-agent-steps-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ldr-ai-agent-steps-list li {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--row);
  padding: 0 0.8em 0 var(--row);
  color: color-mix(in srgb, currentColor 78%, transparent);
  white-space: nowrap;
}
.ldr-ai-agent-steps-list li::before {
  content: "";
  position: absolute;
  left: calc(var(--row) / 2 - 0.16em);
  top: calc(50% - 0.16em);
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
}
.ldr-ai-agent-steps-checks {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  width: var(--row);
  animation: ldr-ai-agent-steps-done 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-ai-agent-steps-checks i {
  position: relative;
  height: var(--row);
}
.ldr-ai-agent-steps-checks i::before {
  content: "";
  position: absolute;
  inset: calc(50% - 0.5em);
  border-radius: 50%;
  background: var(--c);
}
.ldr-ai-agent-steps-checks i::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.12em);
  top: calc(50% - 0.3em);
  width: 0.22em;
  height: 0.44em;
  border: solid #fff;
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
}
.ldr-ai-agent-steps-cursor {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  height: var(--row);
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
  animation: ldr-ai-agent-steps-walk 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-ai-agent-steps-cursor::before {
  content: "";
  position: absolute;
  left: calc(var(--row) / 2 - 0.5em);
  top: calc(50% - 0.5em);
  width: 1em;
  height: 1em;
  box-sizing: border-box;
  border: 0.14em solid color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  border-top-color: var(--c);
  border-right-color: var(--c);
  border-radius: 50%;
  animation: ldr-ai-agent-steps-spin 0.7s linear infinite;
}
@keyframes ldr-ai-agent-steps-walk {
  0%       { transform: translateY(0); opacity: 0; }
  4%, 24%  { transform: translateY(0); opacity: 1; }
  30%, 54% { transform: translateY(100%); opacity: 1; }
  60%, 84% { transform: translateY(200%); opacity: 1; }
  90%, 100% { transform: translateY(200%); opacity: 0; }
}
@keyframes ldr-ai-agent-steps-done {
  0%, 24%  { clip-path: inset(0 0 100% 0); opacity: 1; }
  30%, 54% { clip-path: inset(0 0 66.667% 0); opacity: 1; }
  60%, 84% { clip-path: inset(0 0 33.333% 0); opacity: 1; }
  90%, 95% { clip-path: inset(0 0 0 0); opacity: 1; }
  100%     { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes ldr-ai-agent-steps-spin {
  to { transform: rotate(360deg); }
}

.ldr-neural-network {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 1.8);
  height: calc(var(--s) * 1.08);
}
.ldr-neural-network svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ldr-neural-network-wire {
  fill: none;
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  stroke-width: 0.8;
}
.ldr-neural-network-pulse {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 5 60;
  stroke-dashoffset: 5;
  animation: ldr-neural-network-travel 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-neural-network-p1 { animation-delay: 0.1s; }
.ldr-neural-network-p2 { animation-delay: 0.64s; }
.ldr-neural-network circle {
  fill: var(--c);
  opacity: 0.35;
  transform-box: fill-box;
  transform-origin: center;
  animation: ldr-neural-network-fire 1.8s ease-out infinite;
}
.ldr-neural-network-l1 circle { animation-delay: 0s; }
.ldr-neural-network-l2 circle { animation-delay: 0.5s; }
.ldr-neural-network-l3 circle { animation-delay: 1.04s; }
@keyframes ldr-neural-network-travel {
  0%        { stroke-dashoffset: 5; }
  30%, 100% { stroke-dashoffset: -36; }
}
@keyframes ldr-neural-network-fire {
  0%, 30%, 100% { opacity: 0.35; transform: scale(1); }
  8%            { opacity: 1; transform: scale(1.3); }
}

.ldr-voice-assistant-orb {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) / 16);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--c);
}
.ldr-voice-assistant-orb::before,
.ldr-voice-assistant-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--c);
  animation: ldr-voice-assistant-orb-ripple 2s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.ldr-voice-assistant-orb::after { animation-delay: -1s; }
.ldr-voice-assistant-orb span {
  width: calc(var(--s) / 14);
  height: calc(var(--s) / 2);
  border-radius: calc(var(--s) / 14);
  background: #fff;
  transform: scaleY(0.3);
  animation: ldr-voice-assistant-orb-talk 0.9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-voice-assistant-orb span:nth-child(1) { --h: 0.5; animation-delay: -0.2s; }
.ldr-voice-assistant-orb span:nth-child(2) { --h: 0.85; animation-delay: -0.55s; }
.ldr-voice-assistant-orb span:nth-child(3) { --h: 1; animation-delay: 0s; }
.ldr-voice-assistant-orb span:nth-child(4) { --h: 0.75; animation-delay: -0.35s; }
.ldr-voice-assistant-orb span:nth-child(5) { --h: 0.45; animation-delay: -0.7s; }
@keyframes ldr-voice-assistant-orb-talk {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(var(--h)); }
}
@keyframes ldr-voice-assistant-orb-ripple {
  0%   { transform: scale(1); opacity: 0.35; }
  100% { transform: scale(1.6); opacity: 0; }
}

.ldr-ai-image-generating {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.3);
  height: calc(var(--s) * 1.3);
  border-radius: calc(var(--s) / 7);
  overflow: hidden;
  background: repeating-conic-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent) 0 25%, color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent) 0 50%) 0 0 / calc(var(--s) / 6.5) calc(var(--s) / 6.5);
}
.ldr-ai-image-generating::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 50%, transparent 65%) 0 0 / 300% 100%;
  animation: ldr-ai-image-generating-shimmer 1.6s linear infinite;
}
.ldr-ai-image-generating-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 30%, color-mix(in srgb, var(--c) 45%, #fff) 0 12%, transparent 13%),
    conic-gradient(from 135deg at 34% 52%, var(--c) 0 90deg, transparent 0),
    conic-gradient(from 130deg at 72% 64%, color-mix(in srgb, var(--c) 70%, #000) 0 100deg, transparent 0),
    linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent));
  animation: ldr-ai-image-generating-reveal 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-ai-image-generating-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--s) / 24);
  margin-top: calc(var(--s) / -48);
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 6) calc(var(--s) / 24) color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
  animation: ldr-ai-image-generating-scan 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ldr-ai-image-generating-reveal {
  0%       { clip-path: inset(0 0 100% 0); filter: blur(calc(var(--s) / 12)); opacity: 1; }
  65%      { clip-path: inset(0 0 0 0); filter: blur(0); }
  88%      { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; }
  100%     { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 0; }
}
@keyframes ldr-ai-image-generating-scan {
  0%       { transform: translateY(0); opacity: 1; }
  65%      { transform: translateY(calc(var(--s) * 1.3)); opacity: 1; }
  70%, 100% { transform: translateY(calc(var(--s) * 1.3)); opacity: 0; }
}
@keyframes ldr-ai-image-generating-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

@property --ldr-ai-generating-badge-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.ldr-ai-generating-badge {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.65em 1.15em 0.65em 0.95em;
  border-radius: 2em;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
  font: 600 calc(var(--s) / 3) / 1 system-ui, sans-serif;
  color: var(--c);
}
.ldr-ai-generating-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: max(1px, calc(var(--s) / 24));
  border-radius: inherit;
  background: conic-gradient(from var(--ldr-ai-generating-badge-a), transparent 0 8%, var(--c) 25%, transparent 38% 58%, var(--c) 75%, transparent 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ldr-ai-generating-badge-turn 2.4s linear infinite;
}
.ldr-ai-generating-badge-icon {
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
  animation: ldr-ai-generating-badge-twinkle 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ldr-ai-generating-badge-turn {
  to { --ldr-ai-generating-badge-a: 360deg; }
}
@keyframes ldr-ai-generating-badge-twinkle {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(0.7) rotate(45deg); }
  100% { transform: scale(1) rotate(90deg); }
}

.ldr-imessage-typing-bubble {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--s) / 10);
  padding: calc(var(--s) / 4.5) calc(var(--s) / 3.2);
  border-radius: calc(var(--s) / 2);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
  transform-origin: 0 100%;
  animation: ldr-imessage-typing-bubble-breathe 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-imessage-typing-bubble::before,
.ldr-imessage-typing-bubble::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
}
.ldr-imessage-typing-bubble::before {
  left: calc(var(--s) / -9);
  bottom: calc(var(--s) / -9);
  width: calc(var(--s) / 5.5);
  height: calc(var(--s) / 5.5);
}
.ldr-imessage-typing-bubble::after {
  left: calc(var(--s) / -4.2);
  bottom: calc(var(--s) / -4.2);
  width: calc(var(--s) / 11);
  height: calc(var(--s) / 11);
}
.ldr-imessage-typing-bubble span {
  width: calc(var(--s) / 6.5);
  height: calc(var(--s) / 6.5);
  border-radius: 50%;
  background: var(--c);
  opacity: 0.35;
  animation: ldr-imessage-typing-bubble-dot 1.5s ease-in-out infinite;
}
.ldr-imessage-typing-bubble span:nth-child(2) { animation-delay: 0.2s; }
.ldr-imessage-typing-bubble span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ldr-imessage-typing-bubble-dot {
  0%, 55%, 100% { opacity: 0.35; transform: scale(0.9); }
  25%           { opacity: 1; transform: scale(1.05); }
}
@keyframes ldr-imessage-typing-bubble-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.ldr-submit-button-loading {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-grid;
  place-items: center;
  padding: calc(var(--s) / 4) calc(var(--s) / 1.5);
  border: 0;
  border-radius: calc(var(--s) / 6);
  background: var(--c);
  color: #fff;
  font: 600 calc(var(--s) / 2.8) / 1.2 system-ui, sans-serif;
  overflow: hidden;
  cursor: progress;
  animation: ldr-submit-button-loading-press 2.8s ease-out infinite;
}
.ldr-submit-button-loading > * { grid-area: 1 / 1; }
.ldr-submit-button-loading-label {
  animation: ldr-submit-button-loading-label 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-submit-button-loading-spinner {
  width: 1.1em;
  height: 1.1em;
  box-sizing: border-box;
  border: 0.15em solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation:
    ldr-submit-button-loading-spin 0.7s linear infinite,
    ldr-submit-button-loading-swap 2.8s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
}
@keyframes ldr-submit-button-loading-press {
  0%, 14%, 28%, 100% { scale: 1; }
  20%                { scale: 0.95; }
}
@keyframes ldr-submit-button-loading-label {
  0%, 20%  { opacity: 1; transform: translateY(0); }
  30%      { opacity: 0; transform: translateY(-80%); }
  31%, 76% { opacity: 0; transform: translateY(80%); }
  86%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes ldr-submit-button-loading-swap {
  0%, 24%  { opacity: 0; scale: 0.4; }
  34%, 72% { opacity: 1; scale: 1; }
  80%, 100% { opacity: 0; scale: 0.4; }
}
@keyframes ldr-submit-button-loading-spin {
  to { transform: rotate(360deg); }
}

.ldr-progress-fill-button {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: calc(var(--s) / 4) calc(var(--s) / 1.8);
  border: 0;
  border-radius: calc(var(--s) / 6);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  color: var(--c);
  font: 600 calc(var(--s) / 2.8) / 1.2 system-ui, sans-serif;
  overflow: hidden;
  cursor: progress;
}
.ldr-progress-fill-button-label,
.ldr-progress-fill-button-fill {
  white-space: nowrap;
}
.ldr-progress-fill-button-fill {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--c);
  color: #fff;
  clip-path: inset(0 100% 0 0);
  animation: ldr-progress-fill-button-fill 3.4s infinite;
}
@keyframes ldr-progress-fill-button-fill {
  0%       { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
  24%      { clip-path: inset(0 60% 0 0); animation-timing-function: linear; }
  36%      { clip-path: inset(0 55% 0 0); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
  66%      { clip-path: inset(0 14% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  80%, 92% { clip-path: inset(0 0 0 0); opacity: 1; }
  100%     { clip-path: inset(0 0 0 0); opacity: 0; }
}

.ldr-button-loading-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) / 10);
  min-width: calc(var(--s) * 2.6);
  height: calc(var(--s) * 0.95);
  padding: 0 calc(var(--s) / 2);
  border: 0;
  border-radius: calc(var(--s) / 6);
  background: var(--c);
  cursor: progress;
}
.ldr-button-loading-dots span {
  width: calc(var(--s) / 7);
  height: calc(var(--s) / 7);
  border-radius: 50%;
  background: #fff;
  animation: ldr-button-loading-dots-hop 1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-button-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.ldr-button-loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes ldr-button-loading-dots-hop {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30%           { transform: translateY(-70%); opacity: 1; }
}

.ldr-stop-generating-button {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  cursor: pointer;
}
.ldr-stop-generating-button::before {
  content: "";
  position: absolute;
  inset: calc(var(--s) / 16);
  box-sizing: border-box;
  border: calc(var(--s) / 16) solid transparent;
  border-top-color: var(--c);
  border-radius: 50%;
  animation: ldr-stop-generating-button-spin 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}
.ldr-stop-generating-button span {
  width: 32%;
  height: 32%;
  border-radius: calc(var(--s) / 18);
  background: var(--c);
  animation: ldr-stop-generating-button-pulse 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ldr-stop-generating-button-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-stop-generating-button-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.82); }
}

.ldr-send-message-button {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  display: grid;
  width: var(--s);
  height: var(--s);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  cursor: progress;
  animation: ldr-send-message-button-press 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-send-message-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: max(1px, calc(var(--s) / 28)) solid var(--c);
  opacity: 0;
  animation: ldr-send-message-button-ring 1.8s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.ldr-send-message-button-plane {
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
}
.ldr-send-message-button-plane svg {
  width: 52%;
  height: 52%;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  animation: ldr-send-message-button-fly 1.8s infinite;
}
@keyframes ldr-send-message-button-fly {
  0%, 18% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  30%     { transform: translate(-12%, 12%) scale(0.9); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  52%     { transform: translate(150%, -150%) scale(0.6); }
  52.01%  { transform: translate(-150%, 150%) scale(0.6); animation-timing-function: cubic-bezier(0.2, 0.8, 0.35, 1.15); }
  80%, 100% { transform: translate(0, 0) scale(1); }
}
@keyframes ldr-send-message-button-press {
  0%, 20%, 44%, 100% { transform: scale(1); }
  32%                { transform: scale(0.92); }
}
@keyframes ldr-send-message-button-ring {
  0%, 34%  { transform: scale(1); opacity: 0; }
  36%      { transform: scale(1); opacity: 0.6; }
  75%, 100% { transform: scale(1.55); opacity: 0; }
}

.ldr-loading-toggle-switch {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --pad: calc(var(--s) / 12);
  --knob: calc(var(--s) * 0.9 - var(--pad) * 2);
  position: relative;
  width: calc(var(--s) * 1.6);
  height: calc(var(--s) * 0.9);
  padding: 0;
  border: 0;
  border-radius: calc(var(--s) * 0.45);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 28%, transparent);
  cursor: progress;
}
.ldr-loading-toggle-switch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  opacity: 0;
  animation: ldr-loading-toggle-switch-fill 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-loading-toggle-switch-knob {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  animation: ldr-loading-toggle-switch-slide 3.6s cubic-bezier(0.5, 0, 0.2, 1.2) infinite;
}
.ldr-loading-toggle-switch-knob::after {
  content: "";
  position: absolute;
  inset: 22%;
  box-sizing: border-box;
  border: max(1px, calc(var(--s) / 24)) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  border-top-color: var(--c);
  border-radius: 50%;
  animation:
    ldr-loading-toggle-switch-spin 0.7s linear infinite,
    ldr-loading-toggle-switch-busy 3.6s ease infinite;
}
@keyframes ldr-loading-toggle-switch-slide {
  0%, 8%   { transform: translateX(0); }
  20%, 66% { transform: translateX(calc(var(--s) * 0.7)); }
  78%, 100% { transform: translateX(0); }
}
@keyframes ldr-loading-toggle-switch-busy {
  0%, 14%  { opacity: 0; scale: 0.4; }
  20%, 44% { opacity: 1; scale: 1; }
  50%, 100% { opacity: 0; scale: 0.4; }
}
@keyframes ldr-loading-toggle-switch-fill {
  0%, 44%  { opacity: 0; }
  52%, 68% { opacity: 1; }
  76%, 100% { opacity: 0; }
}
@keyframes ldr-loading-toggle-switch-spin {
  to { transform: rotate(360deg); }
}

.ldr-spinning-o-text {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  font: 700 calc(var(--s) / 2) / 1 system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: var(--c);
}
.ldr-spinning-o-text span {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin: 0 0.05em 0 0.03em;
  box-sizing: border-box;
  border: 0.13em solid color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  border-top-color: var(--c);
  border-right-color: var(--c);
  border-radius: 50%;
  animation: ldr-spinning-o-text-spin 0.8s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
}
@keyframes ldr-spinning-o-text-spin {
  to { transform: rotate(360deg); }
}

.ldr-scramble-text {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  font: 700 calc(var(--s) / 2.2) / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  color: var(--c);
}
.ldr-scramble-text span {
  position: relative;
  animation: ldr-scramble-text-lock 2.8s steps(1, end) infinite;
  animation-delay: calc(var(--i, 0) * 0.09s - 2.8s);
}
.ldr-scramble-text span::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  color: color-mix(in srgb, var(--ldr-color, #3b82f6) 65%, transparent);
  animation: ldr-scramble-text-glyph 2.8s steps(1, end) infinite;
  animation-delay: calc(var(--i, 0) * 0.09s - 2.8s);
}
.ldr-scramble-text span:nth-child(2) { --i: 1; }
.ldr-scramble-text span:nth-child(3) { --i: 2; }
.ldr-scramble-text span:nth-child(4) { --i: 3; }
.ldr-scramble-text span:nth-child(5) { --i: 4; }
.ldr-scramble-text span:nth-child(6) { --i: 5; }
.ldr-scramble-text span:nth-child(7) { --i: 6; }
@keyframes ldr-scramble-text-lock {
  0%   { color: transparent; }
  30%  { color: var(--c); }
  86%, 100% { color: transparent; }
}
@keyframes ldr-scramble-text-glyph {
  0%   { content: "#"; }
  5%   { content: "%"; }
  10%  { content: "&"; }
  15%  { content: "@"; }
  20%  { content: "$"; }
  25%  { content: "?"; }
  30%  { content: ""; }
  86%  { content: "*"; }
  91%  { content: "/"; }
  96%  { content: "+"; }
}

.ldr-split-flap-text {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --dark: color-mix(in srgb, var(--c), #000 40%);
  display: inline-flex;
  gap: 0.12em;
  font: 700 calc(var(--s) / 2.4) / 1.4em ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fff;
}
.ldr-split-flap-text span {
  position: relative;
  width: 0.95em;
  height: 1.4em;
  border-radius: 0.14em;
  text-align: center;
  background: linear-gradient(var(--c) 0 calc(50% - 0.5px), var(--dark) 0 calc(50% + 0.5px), var(--c) 0);
  perspective: 4em;
}
.ldr-split-flap-text span::before,
.ldr-split-flap-text span::after {
  content: attr(data-l);
  position: absolute;
  left: 0;
  right: 0;
  height: calc(50% - 0.5px);
  overflow: hidden;
  background: var(--c);
  animation-duration: 2.6s;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i, 0) * 0.1s - 2.6s);
}
.ldr-split-flap-text span::before {
  top: 0;
  border-radius: 0.14em 0.14em 0 0;
  transform-origin: 50% 100%;
  animation-name: ldr-split-flap-text-fall;
}
.ldr-split-flap-text span::after {
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 0 0 0.14em 0.14em;
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  animation-name: ldr-split-flap-text-land;
}
.ldr-split-flap-text span:nth-child(2) { --i: 1; }
.ldr-split-flap-text span:nth-child(3) { --i: 2; }
.ldr-split-flap-text span:nth-child(4) { --i: 3; }
.ldr-split-flap-text span:nth-child(5) { --i: 4; }
.ldr-split-flap-text span:nth-child(6) { --i: 5; }
.ldr-split-flap-text span:nth-child(7) { --i: 6; }
@keyframes ldr-split-flap-text-fall {
  0%       { transform: rotateX(0deg); filter: brightness(1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  9.9%     { transform: rotateX(-86deg); filter: brightness(0.6); visibility: visible; }
  10%      { transform: rotateX(-90deg); visibility: hidden; }
  10.01%, 100% { transform: rotateX(0deg); filter: brightness(1); visibility: visible; }
}
@keyframes ldr-split-flap-text-land {
  0%, 9.9% { transform: rotateX(90deg); visibility: hidden; }
  10%      { transform: rotateX(90deg); visibility: visible; filter: brightness(0.6); animation-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1); }
  20%      { transform: rotateX(0deg); filter: brightness(1); }
  100%     { transform: rotateX(0deg); visibility: visible; filter: brightness(1); }
}

.ldr-dropping-letters {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  font: 800 calc(var(--s) / 2.1) / 1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: var(--c);
}
.ldr-dropping-letters span {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: ldr-dropping-letters-drop 3s infinite;
  animation-delay: calc(var(--i, 0) * 0.07s - 3s);
}
.ldr-dropping-letters span:nth-child(2) { --i: 1; }
.ldr-dropping-letters span:nth-child(3) { --i: 2; }
.ldr-dropping-letters span:nth-child(4) { --i: 3; }
.ldr-dropping-letters span:nth-child(5) { --i: 4; }
.ldr-dropping-letters span:nth-child(6) { --i: 5; }
.ldr-dropping-letters span:nth-child(7) { --i: 6; }
@keyframes ldr-dropping-letters-drop {
  0% {
    transform: translateY(-0.9em);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  11% {
    transform: translateY(0) scale(1.12, 0.8);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  19%, 68% {
    transform: translateY(0) scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  82%, 100% { transform: translateY(0.9em); opacity: 0; }
}

.ldr-text-fill-loading {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  font: 900 calc(var(--s) / 1.7) / 1 "Arial Black", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1px, calc(var(--s) / 36)) var(--c);
  background: linear-gradient(90deg, transparent 33.34%, var(--c) 33.34% 66.66%, transparent 66.66%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ldr-text-fill-loading-fill 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ldr-text-fill-loading-fill {
  0%       { background-position: 100% 0; }
  45%, 60% { background-position: 50% 0; }
  100%     { background-position: 0% 0; }
}

.ldr-rotating-status-text {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 1em 0.5em 0.75em;
  border-radius: 2em;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  font: 500 calc(var(--s) / 3) / 1.3 system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 85%, transparent);
}
.ldr-rotating-status-text-spinner {
  width: 1em;
  height: 1em;
  box-sizing: border-box;
  border: 0.17em dotted var(--c);
  border-radius: 50%;
  animation: ldr-rotating-status-text-spin 1.6s linear infinite;
}
.ldr-rotating-status-text-window {
  height: 1.3em;
  overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.ldr-rotating-status-text-words {
  display: grid;
  animation: ldr-rotating-status-text-roll 4.8s cubic-bezier(0.6, 0, 0.3, 1.25) infinite;
}
@keyframes ldr-rotating-status-text-roll {
  0%, 26%       { transform: translateY(0); }
  33.33%, 59%   { transform: translateY(-25%); }
  66.67%, 92%   { transform: translateY(-50%); }
  100%          { transform: translateY(-75%); }
}
@keyframes ldr-rotating-status-text-spin {
  to { transform: rotate(360deg); }
}

.ldr-braille-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font: 500 calc(var(--s) / 2.6) / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.ldr-braille-spinner span {
  font-size: 1.5em;
  color: var(--c);
}
.ldr-braille-spinner span::before {
  content: "⠋";
  animation: ldr-braille-spinner-frames 0.8s steps(1, end) infinite;
}
@keyframes ldr-braille-spinner-frames {
  0%   { content: "⠋"; }
  10%  { content: "⠙"; }
  20%  { content: "⠹"; }
  30%  { content: "⠸"; }
  40%  { content: "⠼"; }
  50%  { content: "⠴"; }
  60%  { content: "⠦"; }
  70%  { content: "⠧"; }
  80%  { content: "⠇"; }
  90%  { content: "⠏"; }
  100% { content: "⠋"; }
}

.ldr-text-to-speech {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font: 500 calc(var(--s) / 3) / 1.5 system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 72%, transparent);
  white-space: nowrap;
}
.ldr-text-to-speech-icon {
  width: 1.4em;
  height: 1.4em;
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ldr-text-to-speech-body { fill: var(--c); }
.ldr-text-to-speech-wave {
  animation: ldr-text-to-speech-wave 0.9s ease-in-out infinite;
}
.ldr-text-to-speech-wave + .ldr-text-to-speech-wave { animation-delay: 0.15s; }
.ldr-text-to-speech-words span {
  padding: 0.1em 0.2em;
  margin: 0 -0.2em;
  border-radius: 0.35em;
  animation: ldr-text-to-speech-read 2s infinite;
}
.ldr-text-to-speech-words span:nth-child(2) { animation-delay: 0.5s; }
.ldr-text-to-speech-words span:nth-child(3) { animation-delay: 1s; }
.ldr-text-to-speech-words span:nth-child(4) { animation-delay: 1.5s; }
@keyframes ldr-text-to-speech-read {
  0%, 21%  { background-color: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent); color: var(--c); }
  25%, 100% { background-color: transparent; color: inherit; }
}
@keyframes ldr-text-to-speech-wave {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

.ldr-ai-summarizing {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --row: calc(var(--s) / 5);
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  width: calc(var(--s) * 1.15);
  padding: calc(var(--s) / 5) calc(var(--s) / 6);
  border-radius: calc(var(--s) / 9);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 28%, transparent);
}
.ldr-ai-summarizing-line {
  height: var(--row);
  background: linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent)) 0 50% / 100% calc(var(--s) / 14) no-repeat;
  border-radius: calc(var(--s) / 28);
}
.ldr-ai-summarizing-line:nth-of-type(3) { width: 82%; }
.ldr-ai-summarizing-line:nth-of-type(5) { width: 90%; }
.ldr-ai-summarizing-line:nth-of-type(6) { width: 55%; }
.ldr-ai-summarizing-mark {
  position: absolute;
  left: calc(var(--s) / 8);
  right: calc(var(--s) / 8);
  top: calc(var(--s) / 5);
  z-index: -1;
  height: var(--row);
  animation: ldr-ai-summarizing-down 3s steps(5, end) infinite;
}
.ldr-ai-summarizing-mark i {
  position: absolute;
  inset: 12% 0;
  border-radius: calc(var(--s) / 20);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  transform-origin: left;
  animation: ldr-ai-summarizing-sweep 0.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ldr-ai-summarizing-badge {
  position: absolute;
  right: calc(var(--s) / -7);
  top: calc(var(--s) / -7);
  width: calc(var(--s) / 2.6);
  height: calc(var(--s) / 2.6);
  fill: var(--c);
  animation: ldr-ai-summarizing-twinkle 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ldr-ai-summarizing-down {
  from { transform: translateY(0); }
  to   { transform: translateY(500%); }
}
@keyframes ldr-ai-summarizing-sweep {
  0%        { transform: scaleX(0); opacity: 1; }
  75%       { transform: scaleX(1); opacity: 1; }
  100%      { transform: scaleX(1); opacity: 0.4; }
}
@keyframes ldr-ai-summarizing-twinkle {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(0.72) rotate(45deg); }
  100% { transform: scale(1) rotate(90deg); }
}

.ldr-ai-thinking-hop {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  align-items: flex-end;
  gap: 0.6em;
  padding-top: 1.2em;
  font: 500 calc(var(--s) / 2.8) / 1 system-ui, sans-serif;
}
.ldr-ai-thinking-hop-glyph {
  position: relative;
  width: 0.9em;
  height: 0.9em;
}
.ldr-ai-thinking-hop-glyph i {
  position: absolute;
  inset: 0;
  border-radius: 24%;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: ldr-ai-thinking-hop-hop 1.1s infinite;
}
.ldr-ai-thinking-hop-glyph::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -0.2em;
  height: 0.14em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  animation: ldr-ai-thinking-hop-shadow 1.1s infinite;
}
.ldr-ai-thinking-hop-label {
  color: color-mix(in srgb, currentColor 70%, transparent);
}
@keyframes ldr-ai-thinking-hop-hop {
  0% {
    transform: translateY(0) scale(1.25, 0.75) rotate(0deg);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  }
  12% {
    transform: translateY(-0.1em) scale(0.85, 1.15) rotate(10deg);
    animation-timing-function: cubic-bezier(0.25, 0.6, 0.45, 1);
  }
  48% {
    transform: translateY(-1.15em) scale(1) rotate(90deg);
    border-radius: 50%;
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.4);
  }
  86% {
    transform: translateY(0) scale(0.9, 1.1) rotate(170deg);
    border-radius: 24%;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  }
  100% { transform: translateY(0) scale(1.25, 0.75) rotate(180deg); }
}
@keyframes ldr-ai-thinking-hop-shadow {
  0%, 86%, 100% { transform: scaleX(1.15); opacity: 1; }
  48%           { transform: scaleX(0.5); opacity: 0.35; }
}

.ldr-magic-wand {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 1.25);
  height: calc(var(--s) * 1.25);
}
.ldr-magic-wand svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ldr-magic-wand-wand {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: ldr-magic-wand-wave 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-magic-wand-stick {
  fill: none;
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  stroke-width: 3;
  stroke-linecap: round;
}
.ldr-magic-wand-tip {
  fill: var(--c);
  transform-box: fill-box;
  transform-origin: center;
  animation: ldr-magic-wand-glint 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-magic-wand-spark {
  fill: var(--c);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: ldr-magic-wand-pop 1.6s infinite;
}
.ldr-magic-wand-late { animation-delay: 0.53s; }
.ldr-magic-wand-later { animation-delay: 1.07s; }
@keyframes ldr-magic-wand-wave {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(6deg); }
}
@keyframes ldr-magic-wand-glint {
  0%, 100% { transform: scale(0.85) rotate(0deg); }
  50%      { transform: scale(1.1) rotate(45deg); }
}
@keyframes ldr-magic-wand-pop {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  30% {
    transform: scale(1) rotate(45deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  65%, 100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

.ldr-autosave-indicator {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font: 500 calc(var(--s) / 2.8) / 1.3 system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 70%, transparent);
}
.ldr-autosave-indicator-icon {
  position: relative;
  width: 1.1em;
  height: 1.1em;
}
.ldr-autosave-indicator-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 0.14em solid color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  border-top-color: var(--c);
  border-radius: 50%;
  animation:
    ldr-autosave-indicator-spin 0.7s linear infinite,
    ldr-autosave-indicator-ring 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-autosave-indicator-icon i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  scale: 0;
  animation: ldr-autosave-indicator-check 3.2s infinite;
}
.ldr-autosave-indicator-icon i::after {
  content: "";
  position: absolute;
  left: 38%;
  top: 22%;
  width: 22%;
  height: 42%;
  border: solid #fff;
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
}
.ldr-autosave-indicator-text {
  display: grid;
  height: 1.3em;
  overflow: hidden;
}
.ldr-autosave-indicator-text span {
  grid-area: 1 / 1;
  animation: ldr-autosave-indicator-saving 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-autosave-indicator-text span + span {
  color: var(--c);
  animation-name: ldr-autosave-indicator-saved;
}
@keyframes ldr-autosave-indicator-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-autosave-indicator-ring {
  0%, 52%   { opacity: 1; scale: 1; }
  60%, 92%  { opacity: 0; scale: 0.5; }
  100%      { opacity: 1; scale: 1; }
}
@keyframes ldr-autosave-indicator-check {
  0%, 54%  { scale: 0; animation-timing-function: cubic-bezier(0.34, 1.7, 0.64, 1); }
  64%, 88% { scale: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  95%, 100% { scale: 0; }
}
@keyframes ldr-autosave-indicator-saving {
  0%, 52%   { transform: translateY(0); opacity: 1; }
  60%       { transform: translateY(-100%); opacity: 0; }
  61%, 90%  { transform: translateY(100%); opacity: 0; }
  98%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes ldr-autosave-indicator-saved {
  0%, 54%   { transform: translateY(100%); opacity: 0; }
  62%, 88%  { transform: translateY(0); opacity: 1; }
  96%, 100% { transform: translateY(-100%); opacity: 0; }
}

.ldr-upload-toast {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.5em 1.1em 0.5em 0.5em;
  border-radius: 2em;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  font: 500 calc(var(--s) / 3.2) / 1 system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 85%, transparent);
}
.ldr-upload-toast-icon {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--c);
  overflow: hidden;
}
.ldr-upload-toast-icon svg {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: ldr-upload-toast-launch 1.6s infinite;
}
.ldr-upload-toast-body {
  display: grid;
  gap: 0.45em;
}
.ldr-upload-toast-label {
  white-space: nowrap;
}
.ldr-upload-toast-bar {
  position: relative;
  height: 0.28em;
  border-radius: 0.28em;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
  overflow: hidden;
}
.ldr-upload-toast-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  transform-origin: left;
  animation: ldr-upload-toast-fill 3.2s infinite;
}
@keyframes ldr-upload-toast-launch {
  0%, 25% { transform: translateY(0); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  50%     { transform: translateY(-150%); }
  50.01%  { transform: translateY(150%); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1.2); }
  80%, 100% { transform: translateY(0); }
}
@keyframes ldr-upload-toast-fill {
  0%        { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
  45%       { transform: scaleX(0.55); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  85%, 94%  { transform: scaleX(1); opacity: 1; }
  100%      { transform: scaleX(1); opacity: 0; }
}

.ldr-search-input-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: flex;
  align-items: center;
  gap: 0.55em;
  box-sizing: border-box;
  width: calc(var(--s) * 4.6);
  height: 2.7em;
  padding: 0 0.85em;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent), 0 0 0 0.25em color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  font: 400 calc(var(--s) / 3) / 1 system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 88%, transparent);
}
.ldr-search-input-spinner-icon {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: color-mix(in srgb, currentColor 55%, transparent);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.ldr-search-input-spinner-field {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.ldr-search-input-spinner-field::-webkit-search-cancel-button { display: none; }
.ldr-search-input-spinner-ring {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  box-sizing: border-box;
  border: 0.15em solid color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  border-top-color: var(--c);
  border-radius: 50%;
  animation: ldr-search-input-spinner-spin 0.7s linear infinite;
}
@keyframes ldr-search-input-spinner-spin {
  to { transform: rotate(360deg); }
}

.ldr-reconnecting-countdown {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em 0.5em 0.7em;
  border-radius: 2em;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  font: 500 calc(var(--s) / 3) / 1.2 system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 80%, transparent);
}
.ldr-reconnecting-countdown-ring {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  stroke-width: 2.6;
  transform: rotate(-90deg);
}
.ldr-reconnecting-countdown-time {
  stroke: var(--c);
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: ldr-reconnecting-countdown-drain 1s linear infinite;
}
.ldr-reconnecting-countdown-n {
  display: inline-block;
  min-width: 0.6em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--c);
}
.ldr-reconnecting-countdown-n::before {
  content: "3";
  animation: ldr-reconnecting-countdown-tick 3s steps(1, end) infinite;
}
@keyframes ldr-reconnecting-countdown-drain {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 100; }
}
@keyframes ldr-reconnecting-countdown-tick {
  0%      { content: "3"; }
  33.333% { content: "2"; }
  66.667% { content: "1"; }
  100%    { content: "3"; }
}

.ldr-coffee-cup {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-coffee-cup::before {
  content: "";
  position: absolute;
  left: 14%;
  bottom: 16%;
  width: 56%;
  height: 40%;
  border-radius: 6% 6% 45% 45% / 8% 8% 60% 60%;
  background: var(--c);
}
.ldr-coffee-cup::after {
  content: "";
  position: absolute;
  left: 60%;
  bottom: 28%;
  width: 26%;
  height: 24%;
  box-sizing: border-box;
  border: calc(var(--s) / 14) solid var(--c);
  border-radius: 50%;
}
.ldr-coffee-cup-saucer {
  position: absolute;
  left: 6%;
  bottom: 9%;
  width: 72%;
  height: calc(var(--s) / 14);
  border-radius: var(--s);
  background: var(--c);
}
.ldr-coffee-cup-steam {
  position: absolute;
  left: 14%;
  top: 0;
  width: 56%;
  height: 44%;
  fill: none;
  stroke: var(--c);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.ldr-coffee-cup-steam path {
  stroke-dasharray: 7 10;
  stroke-dashoffset: 7;
  animation: ldr-coffee-cup-rise 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.ldr-coffee-cup-steam path:nth-child(2) { animation-delay: -0.4s; }
.ldr-coffee-cup-steam path:nth-child(3) { animation-delay: -0.15s; }
@keyframes ldr-coffee-cup-rise {
  0%   { stroke-dashoffset: 7; opacity: 0; }
  25%  { opacity: 1; }
  60%  { opacity: 0.9; }
  100% { stroke-dashoffset: -10; opacity: 0; }
}

.ldr-cloud-upload {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-cloud-upload svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--c);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ldr-cloud-upload-cloud {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
}
.ldr-cloud-upload-arrow {
  animation: ldr-cloud-upload-lift 1.6s infinite;
}
@keyframes ldr-cloud-upload-lift {
  0%   { transform: translateY(24%); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  35%  { transform: translateY(0); opacity: 1; }
  65%  { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  100% { transform: translateY(-22%); opacity: 0; }
}

.ldr-download-arrow {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-download-arrow-lane {
  position: absolute;
  inset: 0 0 26% 0;
  overflow: hidden;
}
.ldr-download-arrow-arrow {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--s) / 11);
  height: calc(var(--s) * 0.4);
  margin-left: calc(var(--s) / -22);
  border-radius: var(--s);
  background: var(--c);
  animation: ldr-download-arrow-drop 1.4s infinite;
}
.ldr-download-arrow-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--s) * 0.02);
  width: calc(var(--s) * 0.26);
  height: calc(var(--s) * 0.26);
  margin-left: calc(var(--s) * -0.13);
  box-sizing: border-box;
  border: solid var(--c);
  border-width: 0 calc(var(--s) / 11) calc(var(--s) / 11) 0;
  border-radius: 0 0 calc(var(--s) / 30) 0;
  transform: rotate(45deg);
}
.ldr-download-arrow-tray {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8%;
  height: 30%;
  box-sizing: border-box;
  border: calc(var(--s) / 11) solid var(--c);
  border-top: 0;
  border-radius: 0 0 calc(var(--s) / 7) calc(var(--s) / 7);
  transform-origin: 50% 100%;
  animation: ldr-download-arrow-catch 1.4s infinite;
}
@keyframes ldr-download-arrow-drop {
  0%       { transform: translateY(calc(var(--s) * -0.5)); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  26%, 42% { transform: translateY(0); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.35); }
  70%, 100% { transform: translateY(calc(var(--s) * 0.8)); }
}
@keyframes ldr-download-arrow-catch {
  0%, 58% { transform: scale(1); }
  66%     { transform: scale(1.06, 0.78); }
  78%     { transform: scale(0.98, 1.06); }
  88%, 100% { transform: scale(1); }
}

.ldr-rocket {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-rocket svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--c);
}
.ldr-rocket-ship {
  animation: ldr-rocket-surge 1.2s ease-in-out infinite alternate;
}
.ldr-rocket-flame {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: ldr-rocket-flicker 0.14s ease-in-out infinite alternate;
}
.ldr-rocket-star {
  fill: none;
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  animation: ldr-rocket-streak 0.9s linear infinite;
}
.ldr-rocket-star:nth-child(2) { animation-delay: -0.3s; }
.ldr-rocket-star:nth-child(3) { animation-delay: -0.55s; }
.ldr-rocket-star:nth-child(4) { animation-delay: -0.75s; }
@keyframes ldr-rocket-surge {
  from { transform: translateY(3%); }
  to   { transform: translateY(-4%); }
}
@keyframes ldr-rocket-flicker {
  from { transform: scaleY(0.6); }
  to   { transform: scaleY(1.1); }
}
@keyframes ldr-rocket-streak {
  0%   { transform: translateY(-40%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(70%); opacity: 0; }
}

.ldr-paper-plane {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 1.5);
  height: var(--s);
}
.ldr-paper-plane svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--c);
}
.ldr-paper-plane-flight {
  transform-origin: 70% 50%;
  animation: ldr-paper-plane-glide 2.4s ease-in-out infinite;
}
.ldr-paper-plane-fold {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
}
.ldr-paper-plane-trail {
  fill: none;
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 3 4;
  animation: ldr-paper-plane-dash 0.6s linear infinite;
}
@keyframes ldr-paper-plane-glide {
  0%, 100% { transform: translateY(4%) rotate(3deg); }
  50%      { transform: translateY(-8%) rotate(-5deg); }
}
@keyframes ldr-paper-plane-dash {
  to { stroke-dashoffset: 7; }
}

.ldr-pizza {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-pizza span {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 50%, 51.9% -22%, 99.6% -2.2%);
  background:
    radial-gradient(circle calc(var(--s) * 0.065) at 61% 25%, color-mix(in srgb, var(--c) 55%, #000) 92%, transparent),
    radial-gradient(closest-side, var(--c) 78%, color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent) 80% 97%, transparent 99%);
  transform: rotate(calc(var(--i) * 45deg));
  animation: ldr-pizza-eat 3.2s cubic-bezier(0.5, 0, 0.3, 1) calc(var(--i) * 0.2s) infinite;
}
@keyframes ldr-pizza-eat {
  0%, 4% {
    transform: rotate(calc(var(--i) * 45deg));
    opacity: 1;
  }
  14%, 50% {
    transform: rotate(calc(var(--i) * 45deg)) translate(calc(var(--s) * 0.06), calc(var(--s) * -0.15)) scale(0.7);
    opacity: 0;
  }
  60%, 100% {
    transform: rotate(calc(var(--i) * 45deg));
    opacity: 1;
  }
}

.ldr-frying-pan {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.3);
  height: var(--s);
}
.ldr-frying-pan-pan {
  position: absolute;
  left: 36%;
  bottom: 18%;
  width: 56%;
  height: 17%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: var(--c);
  transform-origin: -40% 20%;
  animation: ldr-frying-pan-toss 1.8s infinite;
}
.ldr-frying-pan-pan::before {
  content: "";
  position: absolute;
  right: 96%;
  top: 8%;
  width: 66%;
  height: calc(var(--s) / 11);
  border-radius: var(--s);
  background: var(--c);
  transform: rotate(-6deg);
  transform-origin: 100% 50%;
}
.ldr-frying-pan-cake {
  position: absolute;
  left: 42%;
  bottom: 35%;
  width: 44%;
  height: calc(var(--s) / 8);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
  animation: ldr-frying-pan-flip 1.8s infinite;
}
@keyframes ldr-frying-pan-toss {
  0%, 10% { transform: rotate(0); }
  18%     { transform: rotate(5deg); }
  25%     { transform: rotate(-12deg); }
  36%     { transform: rotate(0); }
  68%     { transform: rotate(0); }
  73%     { transform: rotate(4deg); }
  82%, 100% { transform: rotate(0); }
}
@keyframes ldr-frying-pan-flip {
  0%, 12% { transform: translateY(0) rotate(0); }
  19%     { transform: translateY(calc(var(--s) * 0.04)) rotate(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  45%     { transform: translateY(calc(var(--s) * -0.5)) rotate(-190deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  70%     { transform: translateY(0) rotate(-360deg) scale(1, 1); }
  74%     { transform: translateY(calc(var(--s) * 0.02)) rotate(-360deg) scale(1.1, 0.7); }
  82%, 100% { transform: translateY(0) rotate(-360deg) scale(1, 1); }
}

.ldr-ghost {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-ghost-body {
  position: absolute;
  left: 22%;
  top: 8%;
  width: 56%;
  height: 56%;
  border-radius: calc(var(--s) * 0.28) calc(var(--s) * 0.28) 0 0;
  background: var(--c);
  animation: ldr-ghost-float 2.4s ease-in-out infinite;
}
.ldr-ghost-body::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(var(--s) * 0.1);
  background: radial-gradient(circle calc(var(--s) * 0.094) at 50% 0, var(--c) 96%, transparent) 0 0 / calc(100% / 3) 100% repeat-x;
  animation: ldr-ghost-hem 0.9s linear infinite;
}
.ldr-ghost-eyes {
  position: absolute;
  top: 36%;
  left: 24%;
  width: 16%;
  height: 22%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 25%, #000);
  box-shadow: calc(var(--s) * 0.16) 0 0 color-mix(in srgb, var(--c) 25%, #000);
  animation: ldr-ghost-look 2.4s ease-in-out infinite;
}
.ldr-ghost-shadow {
  position: absolute;
  left: 30%;
  bottom: 4%;
  width: 40%;
  height: 7%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  animation: ldr-ghost-shadow 2.4s ease-in-out infinite;
}
@keyframes ldr-ghost-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(calc(var(--s) * -0.1)) rotate(3deg); }
}
@keyframes ldr-ghost-hem {
  to { background-position: calc(var(--s) * 0.56 / 3) 0; }
}
@keyframes ldr-ghost-look {
  0%, 20%, 100% { transform: translateX(0) scaleY(1); }
  30%, 45%      { transform: translateX(calc(var(--s) * 0.05)) scaleY(1); }
  48%           { transform: translateX(calc(var(--s) * 0.05)) scaleY(0.1); }
  51%, 65%      { transform: translateX(calc(var(--s) * 0.05)) scaleY(1); }
  75%, 90%      { transform: translateX(calc(var(--s) * -0.03)) scaleY(1); }
}
@keyframes ldr-ghost-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50%      { transform: scaleX(0.7); opacity: 0.6; }
}

.ldr-book-pages {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --page: color-mix(in srgb, var(--c) 14%, #fff);
  --lines: repeating-linear-gradient(to bottom, transparent 0 calc(var(--s) * 0.07), color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent) 0 calc(var(--s) * 0.095)) 22% 26% / 62% 56% no-repeat;
  position: relative;
  width: var(--s);
  height: var(--s);
  perspective: calc(var(--s) * 3);
}
.ldr-book-pages::before,
.ldr-book-pages::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
}
.ldr-book-pages::before {
  left: 2%;
  right: 2%;
  border-radius: calc(var(--s) / 14);
  background:
    var(--lines),
    linear-gradient(var(--page) 0 0) calc(var(--s) * 0.04) calc(var(--s) * 0.035) / calc(50% - var(--s) * 0.055) calc(100% - var(--s) * 0.1) no-repeat,
    var(--c);
}
.ldr-book-pages::after {
  left: 50%;
  width: calc(48% - var(--s) * 0.04);
  margin-left: calc(var(--s) * 0.015);
  margin-top: calc(var(--s) * 0.035);
  bottom: calc(20% + var(--s) * 0.065);
  border-radius: 0 calc(var(--s) / 30) calc(var(--s) / 30) 0;
  background: var(--lines), var(--page);
}
.ldr-book-pages span {
  position: absolute;
  z-index: 1;
  left: calc(50% + var(--s) * 0.015);
  top: calc(20% + var(--s) * 0.035);
  bottom: calc(20% + var(--s) * 0.065);
  width: calc(48% - var(--s) * 0.04);
  border-radius: 0 calc(var(--s) / 30) calc(var(--s) / 30) 0;
  background: var(--lines), linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent), transparent 45%), var(--page);
  transform-origin: 0 50%;
  animation: ldr-book-pages-turn 1.8s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
}
.ldr-book-pages span:nth-child(2) { animation-delay: 0.3s; }
.ldr-book-pages span:nth-child(3) { animation-delay: 0.6s; }
@keyframes ldr-book-pages-turn {
  0%        { transform: rotateY(0); }
  50%, 100% { transform: rotateY(-180deg); }
}

.ldr-envelope {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-envelope-body {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 14%;
  height: 54%;
  border-radius: calc(var(--s) / 20);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  animation: ldr-envelope-send 2.4s infinite;
}
.ldr-envelope-letter {
  position: absolute;
  z-index: 1;
  left: 12%;
  right: 12%;
  top: 8%;
  height: 80%;
  box-sizing: border-box;
  border: calc(var(--s) / 40) solid var(--c);
  border-radius: calc(var(--s) / 40);
  background:
    repeating-linear-gradient(to bottom, var(--c) 0 calc(var(--s) / 30), transparent 0 calc(var(--s) * 0.08)) 50% 30% / 64% 36% no-repeat,
    color-mix(in srgb, var(--c) 10%, #fff);
  animation: ldr-envelope-letter 2.4s infinite;
}
.ldr-envelope-pocket {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: calc(var(--s) / 20);
  background: var(--c);
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
}
.ldr-envelope-flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 62%;
  background: color-mix(in srgb, var(--c) 72%, #000);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  animation: ldr-envelope-flap 2.4s infinite;
}
@keyframes ldr-envelope-letter {
  0%   { transform: translateY(-70%); opacity: 0; }
  10%  { transform: translateY(-70%); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  36%  { transform: translateY(6%); opacity: 1; }
  58%  { transform: translateY(6%); opacity: 1; }
  60%  { transform: translateY(6%); opacity: 0; }
  100% { transform: translateY(-70%); opacity: 0; }
}
@keyframes ldr-envelope-flap {
  0%, 38%   { transform: scaleY(-1); z-index: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  39%       { z-index: 3; }
  48%, 84%  { transform: scaleY(1); z-index: 3; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  93%, 100% { transform: scaleY(-1); z-index: 0; }
}
@keyframes ldr-envelope-send {
  0%, 50%   { transform: translate(0, 0) rotate(0); }
  56%       { transform: translate(0, calc(var(--s) * 0.03)) rotate(0); }
  64%       { transform: translate(calc(var(--s) * 0.04), calc(var(--s) * -0.1)) rotate(-6deg); }
  74%, 100% { transform: translate(0, 0) rotate(0); }
}

.ldr-magnifying-glass {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-magnifying-glass::before {
  content: "";
  position: absolute;
  inset: 20% 6% 22%;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent) 0 calc(var(--s) / 16), transparent 0 calc(var(--s) * 0.16));
}
.ldr-magnifying-glass-track {
  position: absolute;
  left: 40%;
  top: 40%;
  animation: ldr-magnifying-glass-circle 2s linear infinite;
}
.ldr-magnifying-glass-lens {
  position: absolute;
  left: calc(var(--s) * -0.12);
  top: calc(var(--s) * -0.22);
  width: calc(var(--s) * 0.44);
  height: calc(var(--s) * 0.44);
  box-sizing: border-box;
  border: calc(var(--s) / 11) solid var(--c);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent) 0 12%, transparent 13%),
    color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  animation: ldr-magnifying-glass-circle 2s linear infinite reverse;
}
.ldr-magnifying-glass-lens::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s) / 8);
  height: calc(var(--s) * 0.24);
  margin-left: calc(var(--s) / -16);
  border-radius: var(--s);
  background: var(--c);
  transform: rotate(-45deg) translateY(calc(var(--s) * 0.16));
  transform-origin: 50% 0;
}
@keyframes ldr-magnifying-glass-circle {
  to { transform: rotate(360deg); }
}

.ldr-traffic-light {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 0.5);
  height: var(--s);
}
.ldr-traffic-light::before {
  content: "";
  position: absolute;
  inset: 0 0 12%;
  box-sizing: border-box;
  border: calc(var(--s) / 16) solid var(--c);
  border-radius: calc(var(--s) * 0.14);
}
.ldr-traffic-light::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--s) / 10);
  height: 12%;
  margin-left: calc(var(--s) / -20);
  background: var(--c);
}
.ldr-traffic-light span {
  position: absolute;
  left: 50%;
  width: calc(var(--s) * 0.22);
  height: calc(var(--s) * 0.22);
  margin-left: calc(var(--s) * -0.11);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
}
.ldr-traffic-light span:nth-child(1) { top: 10%; }
.ldr-traffic-light span:nth-child(2) { top: 33%; }
.ldr-traffic-light span:nth-child(3) { top: 56%; }
.ldr-traffic-light span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 calc(var(--s) / 22) color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  opacity: 0;
  animation: ldr-traffic-light-lamp 2.4s ease-in-out var(--d) infinite backwards;
}
@keyframes ldr-traffic-light-lamp {
  0%        { opacity: 0; transform: scale(0.8); }
  4%, 30%   { opacity: 1; transform: scale(1); }
  36%, 100% { opacity: 0; transform: scale(0.8); }
}

.ldr-candle {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  background: linear-gradient(var(--c) 0 0) 50% calc(var(--s) * 0.42) / calc(var(--s) / 26) calc(var(--s) * 0.09) no-repeat;
}
.ldr-candle::before {
  content: "";
  position: absolute;
  left: 38%;
  bottom: 10%;
  width: 24%;
  height: 42%;
  border-radius: calc(var(--s) / 30) calc(var(--s) / 30) 0 0;
  background: linear-gradient(90deg, transparent 18%, color-mix(in srgb, var(--c) 55%, #fff) 18% 34%, transparent 34%), var(--c);
}
.ldr-candle::after {
  content: "";
  position: absolute;
  left: 22%;
  bottom: 6%;
  width: 56%;
  height: calc(var(--s) / 14);
  border-radius: var(--s);
  background: var(--c);
}
.ldr-candle-glow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: calc(var(--s) * 0.8);
  height: calc(var(--s) * 0.8);
  margin: calc(var(--s) * -0.4) 0 0 calc(var(--s) * -0.4);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 28%, transparent), transparent);
  animation: ldr-candle-glow 2.4s ease-in-out infinite;
}
.ldr-candle-flame {
  position: absolute;
  left: 50%;
  bottom: 53%;
  width: calc(var(--s) * 0.18);
  height: calc(var(--s) * 0.3);
  margin-left: calc(var(--s) * -0.09);
  transform-origin: 50% 100%;
  animation: ldr-candle-flicker 1.3s ease-in-out infinite;
}
.ldr-candle-flame::before,
.ldr-candle-flame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--s) * 0.18);
  height: calc(var(--s) * 0.18);
  margin-left: calc(var(--s) * -0.09);
  border-radius: 50% 0 50% 50%;
  background: var(--c);
  transform: scaleY(1.45) rotate(-45deg);
  transform-origin: 50% 100%;
}
.ldr-candle-flame::after {
  bottom: calc(var(--s) * 0.015);
  width: calc(var(--s) * 0.09);
  height: calc(var(--s) * 0.09);
  margin-left: calc(var(--s) * -0.045);
  background: color-mix(in srgb, var(--c) 25%, #fff);
}
@keyframes ldr-candle-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0); }
  20%      { transform: scale(0.94, 1.1) skewX(4deg); }
  40%      { transform: scale(1.04, 0.92) skewX(-3deg); }
  60%      { transform: scale(0.96, 1.06) skewX(2deg); }
  80%      { transform: scale(1.02, 0.96) skewX(-4deg); }
}
@keyframes ldr-candle-glow {
  0%, 100% { transform: scale(0.85); opacity: 0.7; }
  50%      { transform: scale(1.05); opacity: 1; }
}

.ldr-burger {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --light: color-mix(in srgb, var(--c) 35%, #fff);
  position: relative;
  width: var(--s);
  height: var(--s);
  animation: ldr-burger-serve 3s ease-in-out infinite;
}
.ldr-burger span {
  position: absolute;
  transform-origin: 50% 100%;
  animation: ldr-burger-drop 3s calc(var(--i) * 0.2s) infinite backwards;
}
.ldr-burger-bun {
  left: 14%;
  bottom: 14%;
  width: 72%;
  height: 14%;
  border-radius: calc(var(--s) / 30) calc(var(--s) / 30) calc(var(--s) / 8) calc(var(--s) / 8);
  background: var(--c);
}
.ldr-burger-patty {
  left: 9%;
  bottom: 30%;
  width: 82%;
  height: 13%;
  border-radius: var(--s);
  background: color-mix(in srgb, var(--c) 55%, #000);
}
.ldr-burger-lettuce {
  left: 7%;
  bottom: 43%;
  width: 86%;
  height: 8%;
  background:
    linear-gradient(var(--light) 0 0) 0 0 / 100% 50% no-repeat,
    radial-gradient(circle calc(var(--s) * 0.05) at 50% 50%, var(--light) 94%, transparent) 0 100% / calc(100% / 7) 100% repeat-x;
}
.ldr-burger-top {
  left: 14%;
  bottom: 51%;
  width: 72%;
  height: 28%;
  border-radius: 50% 50% calc(var(--s) / 30) calc(var(--s) / 30) / 90% 90% calc(var(--s) / 30) calc(var(--s) / 30);
  background:
    radial-gradient(circle calc(var(--s) * 0.028) at 30% 42%, var(--light) 90%, transparent),
    radial-gradient(circle calc(var(--s) * 0.028) at 52% 26%, var(--light) 90%, transparent),
    radial-gradient(circle calc(var(--s) * 0.028) at 70% 48%, var(--light) 90%, transparent),
    var(--c);
}
@keyframes ldr-burger-drop {
  0%     { transform: translateY(calc(var(--s) * -0.7)); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
  5%     { opacity: 1; }
  12%    { transform: translateY(0) scale(1, 1); }
  16%    { transform: translateY(0) scale(1.06, 0.78); }
  23%    { transform: translateY(0) scale(1, 1); opacity: 1; }
  76%    { transform: translateY(0); opacity: 1; }
  76.5%  { opacity: 0; }
  100%   { transform: translateY(calc(var(--s) * -0.7)); opacity: 0; }
}
@keyframes ldr-burger-serve {
  0%, 65%   { opacity: 1; transform: translateY(0); }
  75%, 100% { opacity: 0; transform: translateY(calc(var(--s) * -0.08)); }
}

.ldr-fish {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.3);
  height: var(--s);
}
.ldr-fish-body {
  position: absolute;
  left: 31%;
  top: 34%;
  width: calc(var(--s) * 0.64);
  height: calc(var(--s) * 0.42);
  border-radius: 55% 45% 45% 55% / 50%;
  background:
    radial-gradient(circle calc(var(--s) * 0.045) at 76% 40%, color-mix(in srgb, var(--c) 25%, #000) 92%, transparent),
    var(--c);
  animation: ldr-fish-bob 1.6s ease-in-out infinite;
}
.ldr-fish-body::before {
  content: "";
  position: absolute;
  left: 30%;
  bottom: 84%;
  width: calc(var(--s) * 0.2);
  height: calc(var(--s) * 0.12);
  background: var(--c);
  clip-path: polygon(0 100%, 26% 0, 100% 100%);
}
.ldr-fish-body::after {
  content: "";
  position: absolute;
  left: 44%;
  top: 52%;
  width: calc(var(--s) * 0.13);
  height: calc(var(--s) * 0.08);
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 40%, #fff);
  transform-origin: 100% 0;
  animation: ldr-fish-wag 0.4s ease-in-out infinite alternate-reverse;
}
.ldr-fish-tail {
  position: absolute;
  right: 88%;
  top: 12%;
  width: calc(var(--s) * 0.28);
  height: 76%;
  background: var(--c);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
  transform-origin: 100% 50%;
  animation: ldr-fish-wag 0.4s ease-in-out infinite alternate;
}
.ldr-fish-bubble {
  position: absolute;
  left: 82%;
  top: 30%;
  width: calc(var(--s) * 0.1);
  height: calc(var(--s) * 0.1);
  box-sizing: border-box;
  border: calc(var(--s) / 30) solid var(--c);
  border-radius: 50%;
  opacity: 0;
  animation: ldr-fish-bubble 1.8s ease-out infinite;
}
.ldr-fish-bubble:nth-of-type(3) { animation-delay: 0.6s; }
.ldr-fish-bubble:nth-of-type(4) { animation-delay: 1.2s; }
@keyframes ldr-fish-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(calc(var(--s) * -0.06)) rotate(3deg); }
}
@keyframes ldr-fish-wag {
  from { transform: scaleX(1) rotate(-12deg); }
  to   { transform: scaleX(0.75) rotate(12deg); }
}
@keyframes ldr-fish-bubble {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(var(--s) * 0.08), calc(var(--s) * -0.34)) scale(1.2); opacity: 0; }
}

.ldr-footsteps {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.7);
  height: var(--s);
}
.ldr-footsteps span {
  position: absolute;
  left: calc(3% + var(--i) * 15.5%);
  top: 26%;
  width: calc(var(--s) * 0.26);
  height: calc(var(--s) * 0.15);
  border-radius: 40% 60% 60% 40% / 50%;
  background: var(--c);
  opacity: 0;
  transform: rotate(-8deg);
  animation: ldr-footsteps-step 2.4s ease-out calc(var(--i) * 0.4s - 2.4s) infinite;
}
.ldr-footsteps span:nth-child(even) {
  top: 56%;
  transform: rotate(8deg);
}
.ldr-footsteps span::before {
  content: "";
  position: absolute;
  right: calc(100% + var(--s) * 0.035);
  top: 14%;
  width: calc(var(--s) * 0.12);
  height: 76%;
  border-radius: 50%;
  background: var(--c);
}
@keyframes ldr-footsteps-step {
  0%        { opacity: 0; scale: 1.25; }
  5%        { opacity: 1; scale: 1; }
  40%       { opacity: 1; }
  70%, 100% { opacity: 0; scale: 1; }
}

.ldr-car {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --glass: color-mix(in srgb, var(--c) 25%, #fff);
  --tyre: color-mix(in srgb, var(--c) 45%, #000);
  position: relative;
  width: calc(var(--s) * 1.6);
  height: var(--s);
}
.ldr-car-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  height: calc(var(--s) / 22);
  overflow: hidden;
  border-radius: var(--s);
}
.ldr-car-road::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--s) * -0.4) 0 0;
  background: repeating-linear-gradient(to right, color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent) 0 calc(var(--s) * 0.2), transparent 0 calc(var(--s) * 0.4));
  animation: ldr-car-road 0.5s linear infinite;
}
.ldr-car-body {
  position: absolute;
  left: 22%;
  bottom: 26%;
  width: calc(var(--s) * 0.94);
  height: calc(var(--s) * 0.24);
  border-radius: calc(var(--s) * 0.07) calc(var(--s) * 0.12) calc(var(--s) * 0.05) calc(var(--s) * 0.05);
  background: var(--c);
  animation: ldr-car-bounce 0.5s ease-in-out infinite alternate;
}
.ldr-car-body::before {
  content: "";
  position: absolute;
  left: 14%;
  bottom: 90%;
  width: 58%;
  height: calc(var(--s) * 0.2);
  border-radius: calc(var(--s) * 0.1) calc(var(--s) * 0.14) 0 0;
  background:
    linear-gradient(var(--glass) 0 0) 16% 70% / 36% 58% no-repeat,
    linear-gradient(var(--glass) 0 0) 84% 70% / 36% 58% no-repeat,
    var(--c);
}
.ldr-car-body::after {
  content: "";
  position: absolute;
  right: 2%;
  top: 22%;
  width: calc(var(--s) * 0.06);
  height: calc(var(--s) * 0.05);
  border-radius: 50%;
  background: var(--glass);
}
.ldr-car-wheel {
  position: absolute;
  left: 12%;
  bottom: calc(var(--s) * -0.11);
  width: calc(var(--s) * 0.22);
  height: calc(var(--s) * 0.22);
  box-sizing: border-box;
  border: calc(var(--s) / 22) solid var(--tyre);
  border-radius: 50%;
  background: conic-gradient(var(--glass) 0 10%, var(--tyre) 0 25%, var(--glass) 0 35%, var(--tyre) 0 50%, var(--glass) 0 60%, var(--tyre) 0 75%, var(--glass) 0 85%, var(--tyre) 0);
  animation: ldr-car-spin 0.5s linear infinite;
}
.ldr-car-wheel + .ldr-car-wheel {
  left: auto;
  right: 12%;
}
.ldr-car-wind {
  position: absolute;
  left: 2%;
  top: 44%;
  width: calc(var(--s) * 0.22);
  height: calc(var(--s) / 22);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
  box-shadow: calc(var(--s) * 0.06) calc(var(--s) * 0.12) 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  animation: ldr-car-wind 0.8s ease-out infinite;
}
@keyframes ldr-car-road {
  to { transform: translateX(calc(var(--s) * -0.4)); }
}
@keyframes ldr-car-bounce {
  from { transform: translateY(0) rotate(0); }
  to   { transform: translateY(calc(var(--s) * -0.03)) rotate(-1.5deg); }
}
@keyframes ldr-car-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-car-wind {
  0%   { transform: translateX(calc(var(--s) * 0.12)); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(calc(var(--s) * -0.12)); opacity: 0; }
}

.ldr-windmill {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-windmill::before {
  content: "";
  position: absolute;
  left: 33%;
  bottom: 2%;
  width: 34%;
  height: 56%;
  background:
    radial-gradient(circle calc(var(--s) * 0.06) at 50% 72%, color-mix(in srgb, var(--c) 35%, #fff) 92%, transparent) 50% 0 / 100% 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--c) 35%, #fff) 0 0) 50% 100% / calc(var(--s) * 0.12) 28% no-repeat,
    var(--c);
  clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
}
.ldr-windmill::after {
  content: "";
  position: absolute;
  left: 36%;
  bottom: 56%;
  width: 28%;
  height: 16%;
  background: var(--c);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ldr-windmill-sails {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 44%;
  animation: ldr-windmill-turn 3s linear infinite;
}
.ldr-windmill-sails::after {
  content: "";
  position: absolute;
  left: calc(var(--s) * -0.06);
  top: calc(var(--s) * -0.06);
  width: calc(var(--s) * 0.12);
  height: calc(var(--s) * 0.12);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 calc(var(--s) / 40) color-mix(in srgb, var(--c) 35%, #fff);
}
.ldr-windmill-sails span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--s) * 0.14);
  height: calc(var(--s) * 0.42);
  box-sizing: border-box;
  border: calc(var(--s) / 36) solid var(--c);
  border-left-width: calc(var(--s) / 18);
  background:
    repeating-linear-gradient(to bottom, var(--c) 0 calc(var(--s) / 36), transparent 0 calc(var(--s) * 0.075)),
    color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
  transform: rotate(calc(var(--i) * 90deg));
  transform-origin: 0 100%;
}
@keyframes ldr-windmill-turn {
  to { transform: rotate(360deg); }
}

.ldr-sun-cloud {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.25);
  height: var(--s);
}
.ldr-sun-cloud-sun {
  position: absolute;
  left: 22%;
  top: 14%;
  width: calc(var(--s) * 0.42);
  height: calc(var(--s) * 0.42);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
  animation: ldr-sun-cloud-peek 3.2s ease-in-out infinite;
}
.ldr-sun-cloud-sun::before {
  content: "";
  position: absolute;
  inset: calc(var(--s) * -0.16);
  border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent) 0 14deg, transparent 0 45deg);
  -webkit-mask: radial-gradient(closest-side, transparent 66%, #000 69% 97%, transparent);
  mask: radial-gradient(closest-side, transparent 66%, #000 69% 97%, transparent);
  animation: ldr-sun-cloud-rays 6s linear infinite;
}
.ldr-sun-cloud-cloud {
  position: absolute;
  left: 30%;
  bottom: 18%;
  width: calc(var(--s) * 0.74);
  height: calc(var(--s) * 0.26);
  border-radius: var(--s);
  background: var(--c);
  animation: ldr-sun-cloud-drift 3.2s ease-in-out infinite;
}
.ldr-sun-cloud-cloud::before,
.ldr-sun-cloud-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--c);
}
.ldr-sun-cloud-cloud::before {
  left: 14%;
  bottom: 40%;
  width: calc(var(--s) * 0.28);
  height: calc(var(--s) * 0.28);
}
.ldr-sun-cloud-cloud::after {
  left: 38%;
  bottom: 30%;
  width: calc(var(--s) * 0.38);
  height: calc(var(--s) * 0.38);
}
@keyframes ldr-sun-cloud-peek {
  0%, 100% { transform: translate(calc(var(--s) * 0.08), calc(var(--s) * 0.08)) scale(0.9); }
  50%      { transform: translate(calc(var(--s) * -0.04), calc(var(--s) * -0.04)) scale(1); }
}
@keyframes ldr-sun-cloud-rays {
  to { transform: rotate(360deg); }
}
@keyframes ldr-sun-cloud-drift {
  0%, 100% { transform: translateX(calc(var(--s) * -0.03)); }
  50%      { transform: translateX(calc(var(--s) * 0.05)); }
}

.ldr-hamster-wheel {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-hamster-wheel::before {
  content: "";
  position: absolute;
  left: 30%;
  bottom: 0;
  width: 40%;
  height: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  clip-path: polygon(50% 0, 60% 0, 100% 100%, 0 100%, 40% 0);
}
.ldr-hamster-wheel-wheel {
  position: absolute;
  left: 5%;
  top: 2%;
  width: 90%;
  height: 90%;
  box-sizing: border-box;
  border: calc(var(--s) / 20) solid var(--c);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0 calc(var(--s) * 0.032), transparent calc(var(--s) * 0.037));
}
.ldr-hamster-wheel-wheel::before {
  content: "";
  position: absolute;
  inset: calc(var(--s) / 40);
  box-sizing: border-box;
  border: calc(var(--s) / 14) dashed color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  border-radius: 50%;
  animation: ldr-hamster-wheel-spin 1s linear infinite;
}
.ldr-hamster-wheel-hamster {
  position: absolute;
  left: 30%;
  bottom: 18%;
  width: calc(var(--s) * 0.4);
  height: calc(var(--s) * 0.23);
  border-radius: 60% 70% 45% 45% / 75% 85% 35% 35%;
  background:
    radial-gradient(circle calc(var(--s) * 0.022) at 78% 40%, color-mix(in srgb, var(--c) 25%, #000) 90%, transparent),
    var(--c);
  transform-origin: 50% 100%;
  animation: ldr-hamster-wheel-run 0.25s ease-in-out infinite alternate;
}
.ldr-hamster-wheel-hamster::before {
  content: "";
  position: absolute;
  right: 22%;
  top: calc(var(--s) * -0.04);
  width: calc(var(--s) * 0.08);
  height: calc(var(--s) * 0.08);
  border-radius: 50%;
  background: var(--c);
}
.ldr-hamster-wheel-hamster::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 88%;
  width: calc(var(--s) / 22);
  height: calc(var(--s) * 0.07);
  border-radius: var(--s);
  background: var(--c);
  box-shadow: calc(var(--s) * 0.18) 0 0 var(--c);
  transform-origin: 50% 0;
  animation: ldr-hamster-wheel-legs 0.25s linear infinite alternate;
}
@keyframes ldr-hamster-wheel-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-hamster-wheel-run {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(calc(var(--s) * -0.03)) rotate(2deg); }
}
@keyframes ldr-hamster-wheel-legs {
  from { transform: skewX(35deg); }
  to   { transform: skewX(-35deg); }
}

.ldr-music-notes {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --stem: calc(var(--s) / 16);
  position: relative;
  width: calc(var(--s) * 1.4);
  height: var(--s);
}
.ldr-music-notes span {
  position: absolute;
  bottom: 18%;
  height: calc(var(--s) * 0.52);
  transform-origin: 50% 100%;
  animation: ldr-music-notes-hop 1.2s ease-in-out infinite;
}
.ldr-music-notes span::before,
.ldr-music-notes-pair::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--s) * 0.2);
  height: calc(var(--s) * 0.15);
  border-radius: 50%;
  background: var(--c);
  transform: rotate(-24deg);
}
.ldr-music-notes-single {
  width: calc(var(--s) * 0.22);
  background: linear-gradient(var(--c) 0 0) 100% 0 / var(--stem) 88% no-repeat;
}
.ldr-music-notes-single:first-child { left: 4%; }
.ldr-music-notes-single:last-child {
  left: 72%;
  bottom: 24%;
  animation-delay: 0.3s;
}
.ldr-music-notes-single::after {
  content: "";
  position: absolute;
  left: calc(100% - var(--stem));
  top: 0;
  width: calc(var(--s) * 0.12);
  height: calc(var(--s) * 0.22);
  box-sizing: border-box;
  border: solid var(--c);
  border-width: var(--stem) var(--stem) 0 0;
  border-radius: 0 100% 0 0 / 0 70% 0 0;
}
.ldr-music-notes-pair {
  left: 34%;
  bottom: 30%;
  width: calc(var(--s) * 0.4);
  background:
    linear-gradient(var(--c) 0 0) calc(var(--s) * 0.1375) 0 / calc(var(--s) * 0.2625) calc(var(--s) / 11) no-repeat,
    linear-gradient(var(--c) 0 0) calc(var(--s) * 0.1375) 0 / var(--stem) 88% no-repeat,
    linear-gradient(var(--c) 0 0) 100% 0 / var(--stem) 88% no-repeat;
  animation-delay: 0.15s;
}
.ldr-music-notes-pair::after {
  left: calc(var(--s) * 0.2);
}
@keyframes ldr-music-notes-hop {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  30%      { transform: translateY(calc(var(--s) * -0.16)) rotate(-10deg) scale(1); }
  55%      { transform: translateY(0) rotate(4deg) scale(1.06, 0.9); }
  70%      { transform: translateY(0) rotate(0) scale(1); }
}

.ldr-light-bulb {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-light-bulb svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--c);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ldr-light-bulb-glow {
  fill: var(--c);
  stroke: none;
  opacity: 0;
  animation: ldr-light-bulb-on 2.4s infinite;
}
.ldr-light-bulb-filament {
  stroke-width: 1.8;
  animation: ldr-light-bulb-filament 2.4s infinite;
}
.ldr-light-bulb-rays {
  transform-origin: 50% 41.7%;
  opacity: 0;
  animation: ldr-light-bulb-rays 2.4s infinite;
}
@keyframes ldr-light-bulb-on {
  0%, 26%   { opacity: 0.12; }
  29%       { opacity: 1; }
  32%       { opacity: 0.2; }
  36%, 80%  { opacity: 1; }
  90%, 100% { opacity: 0.12; }
}
@keyframes ldr-light-bulb-filament {
  0%, 35%   { stroke: var(--c); }
  36%, 80%  { stroke: color-mix(in srgb, var(--c) 25%, #fff); }
  81%, 100% { stroke: var(--c); }
}
@keyframes ldr-light-bulb-rays {
  0%, 36%   { opacity: 0; transform: scale(0.7); }
  44%       { opacity: 1; transform: scale(1.12); animation-timing-function: ease-in-out; }
  52%       { opacity: 1; transform: scale(1); }
  66%       { opacity: 1; transform: scale(1.06); }
  80%       { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(0.85); }
}

.ldr-pencil {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --wave: calc(var(--s) * 0.075);
  position: relative;
  width: calc(var(--s) * 1.5);
  height: var(--s);
}
.ldr-pencil svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--c);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.ldr-pencil path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  animation: ldr-pencil-draw 3s linear infinite;
}
.ldr-pencil-move {
  position: absolute;
  left: calc(var(--s) * 0.15);
  top: calc(var(--s) * 0.75);
  animation: ldr-pencil-move 3s infinite;
}
.ldr-pencil-bob {
  position: absolute;
  animation: ldr-pencil-bob 3s infinite;
}
.ldr-pencil-body {
  position: absolute;
  left: calc(var(--s) / -16);
  bottom: 0;
  width: calc(var(--s) / 8);
  height: calc(var(--s) * 0.52);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--c) 40%, #000) 0 8%,
    color-mix(in srgb, var(--c) 22%, #fff) 8% 23%,
    var(--c) 23% 80%,
    color-mix(in srgb, var(--c) 45%, #fff) 80% 86%,
    color-mix(in srgb, var(--c) 60%, #fff) 86%);
  clip-path: polygon(0 0, 100% 0, 100% 77%, 50% 100%, 0 77%);
  transform: rotate(40deg);
  transform-origin: 50% 100%;
}
@keyframes ldr-pencil-draw {
  0%        { stroke-dashoffset: 1; opacity: 1; }
  50%, 70%  { stroke-dashoffset: 0; opacity: 1; }
  84%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ldr-pencil-move {
  0%   { transform: translate(0, 0); animation-timing-function: linear; }
  50%  { transform: translate(calc(var(--s) * 0.9), 0); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  56%  { transform: translate(calc(var(--s) * 0.92), calc(var(--s) * -0.12)); animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); }
  86%  { transform: translate(0, calc(var(--s) * -0.12)); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  94%, 100% { transform: translate(0, 0); }
}
@keyframes ldr-pencil-bob {
  0%, 8.333%, 16.667%, 25%, 33.333%, 41.667% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
  }
  4.167%, 20.833%, 37.5% {
    transform: translateY(calc(var(--wave) * -1));
    animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.34);
  }
  12.5%, 29.167%, 45.833% {
    transform: translateY(var(--wave));
    animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.34);
  }
  50%, 100% { transform: translateY(0); }
}

.ldr-gift-box {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-gift-box-box {
  position: absolute;
  left: 18%;
  bottom: 6%;
  width: 64%;
  height: 44%;
  border-radius: 0 0 calc(var(--s) / 24) calc(var(--s) / 24);
  background: linear-gradient(var(--c) 0 0) 50% 0 / 20% 100% no-repeat, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  transform-origin: 50% 100%;
  animation: ldr-gift-box-squash 2s infinite;
}
.ldr-gift-box-lid {
  position: absolute;
  left: 12%;
  bottom: 50%;
  width: 76%;
  height: 15%;
  border-radius: calc(var(--s) / 30);
  background: linear-gradient(var(--c) 0 0) 50% 0 / 17% 100% no-repeat, color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  animation: ldr-gift-box-lid 2s infinite;
}
.ldr-gift-box-lid::before,
.ldr-gift-box-lid::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 88%;
  width: calc(var(--s) * 0.2);
  height: calc(var(--s) * 0.15);
  margin-left: calc(var(--s) * -0.2);
  box-sizing: border-box;
  border: calc(var(--s) / 16) solid var(--c);
  border-radius: 50%;
  transform: rotate(-22deg);
  transform-origin: 100% 100%;
}
.ldr-gift-box-lid::after {
  margin-left: 0;
  transform: rotate(22deg);
  transform-origin: 0 100%;
}
.ldr-gift-box-sparks {
  position: absolute;
  left: 50%;
  bottom: 52%;
  width: calc(var(--s) / 12);
  height: calc(var(--s) / 12);
  margin-left: calc(var(--s) / -24);
  border-radius: 50%;
  background: var(--c);
  box-shadow:
    calc(var(--s) * -0.22) calc(var(--s) * 0.04) 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent),
    calc(var(--s) * 0.22) calc(var(--s) * 0.02) 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent);
  opacity: 0;
  animation: ldr-gift-box-sparks 2s infinite;
}
@keyframes ldr-gift-box-squash {
  0%, 28%   { transform: scale(1); }
  36%       { transform: scale(1.04, 0.92); }
  42%       { transform: scale(0.98, 1.03); }
  50%       { transform: scale(1.03, 0.95); }
  58%, 100% { transform: scale(1); }
}
@keyframes ldr-gift-box-lid {
  0%, 28%   { transform: translateY(0) rotate(0); }
  36%       { transform: translateY(calc(var(--s) * 0.035)) rotate(0); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  44%       { transform: translateY(calc(var(--s) * -0.2)) rotate(-9deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  50%       { transform: translateY(calc(var(--s) * 0.022)) rotate(0); }
  55%       { transform: translateY(calc(var(--s) * -0.06)) rotate(4deg); }
  60%       { transform: translateY(0) rotate(0); }
  64%       { transform: translateY(calc(var(--s) * -0.015)) rotate(-1deg); }
  68%, 100% { transform: translateY(0) rotate(0); }
}
@keyframes ldr-gift-box-sparks {
  0%, 38%   { opacity: 0; transform: translateY(0) scale(0.3); }
  45%       { opacity: 1; transform: translateY(calc(var(--s) * -0.14)) scale(1); }
  58%, 100% { opacity: 0; transform: translateY(calc(var(--s) * -0.26)) scale(0.6); }
}

.ldr-shopping-cart {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-shopping-cart svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ldr-shopping-cart-cart {
  fill: none;
  stroke: var(--c);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ldr-shopping-cart-dip 2.4s infinite;
}
.ldr-shopping-cart-cart circle {
  fill: var(--c);
  stroke: none;
}
.ldr-shopping-cart-grid {
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  stroke-width: 1.6;
}
.ldr-shopping-cart-item {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
  opacity: 0;
  animation: ldr-shopping-cart-drop 2.4s infinite;
}
.ldr-shopping-cart-item + .ldr-shopping-cart-item {
  animation-delay: 0.8s;
}
@keyframes ldr-shopping-cart-drop {
  0%   { transform: translateY(-60%); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
  6%   { opacity: 1; }
  24%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  30%  { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  36%  { transform: translateY(0); }
  80%  { transform: translateY(0); opacity: 1; }
  90%  { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(-60%); opacity: 0; }
}
@keyframes ldr-shopping-cart-dip {
  0%, 22%   { transform: translateY(0) rotate(0); }
  26%       { transform: translateY(2%) rotate(-2deg); }
  33%, 55%  { transform: translateY(0) rotate(0); }
  59%       { transform: translateY(2%) rotate(2deg); }
  66%, 100% { transform: translateY(0) rotate(0); }
}

.ldr-dice {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --die: calc(var(--s) * 0.44);
  position: relative;
  width: calc(var(--s) * 1.2);
  height: var(--s);
}
.ldr-dice::before,
.ldr-dice::after {
  content: "";
  position: absolute;
  bottom: 8%;
  left: calc(var(--s) * 0.136);
  width: calc(var(--s) * 0.36);
  height: calc(var(--s) * 0.06);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  animation: ldr-dice-shadow 2.4s infinite;
}
.ldr-dice::after {
  left: auto;
  right: calc(var(--s) * 0.136);
  animation-delay: -0.6s;
}
.ldr-dice span {
  position: absolute;
  z-index: 1;
  bottom: 13%;
  left: 8%;
  width: var(--die);
  height: var(--die);
  box-sizing: border-box;
  border: calc(var(--s) / 18) solid var(--c);
  border-radius: calc(var(--s) / 9);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent);
  animation: ldr-dice-hop 2.4s infinite;
}
.ldr-dice span + span {
  left: auto;
  right: 8%;
  animation-delay: -0.6s;
}
.ldr-dice span::before,
.ldr-dice span::after {
  content: "";
  position: absolute;
  inset: 0;
  --pip: calc(var(--s) * 0.042);
  animation: ldr-dice-face-a 2.4s infinite;
  animation-delay: inherit;
}
.ldr-dice span::after {
  animation-name: ldr-dice-face-b;
}
.ldr-dice span:first-child::before {
  background:
    radial-gradient(circle var(--pip) at 24% 24%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 76% 24%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 50% 50%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 24% 76%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 76% 76%, var(--c) 94%, transparent);
}
.ldr-dice span:first-child::after {
  background:
    radial-gradient(circle var(--pip) at 26% 26%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 74% 74%, var(--c) 94%, transparent);
}
.ldr-dice span + span::before {
  background:
    radial-gradient(circle var(--pip) at 24% 24%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 50% 50%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 76% 76%, var(--c) 94%, transparent);
}
.ldr-dice span + span::after {
  background:
    radial-gradient(circle var(--pip) at 27% 22%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 27% 50%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 27% 78%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 73% 22%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 73% 50%, var(--c) 94%, transparent),
    radial-gradient(circle var(--pip) at 73% 78%, var(--c) 94%, transparent);
}
@keyframes ldr-dice-hop {
  0%       { transform: translateY(0) rotate(0) scale(1); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
  6%       { transform: translateY(calc(var(--die) * 0.075)) rotate(0) scale(1.1, 0.85); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  20%      { transform: translateY(calc(var(--s) * -0.36)) rotate(180deg) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  34%      { transform: translateY(0) rotate(360deg) scale(1); }
  38%      { transform: translateY(calc(var(--die) * 0.06)) rotate(360deg) scale(1.08, 0.88); }
  44%, 50% { transform: translateY(0) rotate(360deg) scale(1); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
  56%      { transform: translateY(calc(var(--die) * 0.075)) rotate(360deg) scale(1.1, 0.85); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  70%      { transform: translateY(calc(var(--s) * -0.36)) rotate(540deg) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  84%      { transform: translateY(0) rotate(720deg) scale(1); }
  88%      { transform: translateY(calc(var(--die) * 0.06)) rotate(720deg) scale(1.08, 0.88); }
  94%, 100% { transform: translateY(0) rotate(720deg) scale(1); }
}
@keyframes ldr-dice-face-a {
  0%, 19.9%   { opacity: 1; }
  20%, 69.9%  { opacity: 0; }
  70%, 100%   { opacity: 1; }
}
@keyframes ldr-dice-face-b {
  0%, 19.9%   { opacity: 0; }
  20%, 69.9%  { opacity: 1; }
  70%, 100%   { opacity: 0; }
}
@keyframes ldr-dice-shadow {
  0%, 6%, 34%, 56%, 84%, 100% { transform: scaleX(1); opacity: 1; }
  20%, 70%                    { transform: scaleX(0.5); opacity: 0.4; }
}

.ldr-basketball {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.5);
  height: var(--s);
}
.ldr-basketball::before {
  content: "";
  position: absolute;
  right: 4%;
  top: 6%;
  width: calc(var(--s) / 16);
  height: calc(var(--s) * 0.5);
  border-radius: var(--s);
  background: var(--c);
}
.ldr-basketball::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2%;
  height: calc(var(--s) / 30);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
}
.ldr-basketball-rim {
  position: absolute;
  z-index: 2;
  right: calc(4% + var(--s) / 16);
  top: 38%;
  width: calc(var(--s) * 0.36);
  height: calc(var(--s) / 18);
  border-radius: var(--s);
  background: var(--c);
}
.ldr-basketball-net {
  position: absolute;
  top: 100%;
  left: 6%;
  right: 6%;
  height: calc(var(--s) * 0.24);
  background:
    repeating-linear-gradient(60deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent) 0 calc(var(--s) / 36), transparent 0 calc(var(--s) * 0.07)),
    repeating-linear-gradient(-60deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent) 0 calc(var(--s) / 36), transparent 0 calc(var(--s) * 0.07));
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
  transform-origin: 50% 0;
  animation: ldr-basketball-swish 2.4s infinite;
}
.ldr-basketball-x {
  position: absolute;
  z-index: 1;
  left: calc(var(--s) * 0.06);
  bottom: calc(var(--s) * 0.04);
  width: calc(var(--s) * 0.28);
  height: calc(var(--s) * 0.28);
  animation: ldr-basketball-x 2.4s infinite;
}
.ldr-basketball-y {
  position: absolute;
  inset: 0;
  animation: ldr-basketball-y 2.4s infinite;
}
.ldr-basketball-ball {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent calc(50% - var(--s) / 70), var(--line) 0 calc(50% + var(--s) / 70), transparent 0),
    radial-gradient(circle at -30% 50%, transparent calc(var(--s) * 0.132), var(--line) calc(var(--s) * 0.137) calc(var(--s) * 0.152), transparent calc(var(--s) * 0.157)),
    radial-gradient(circle at 130% 50%, transparent calc(var(--s) * 0.132), var(--line) calc(var(--s) * 0.137) calc(var(--s) * 0.152), transparent calc(var(--s) * 0.157)),
    var(--c);
  --line: color-mix(in srgb, var(--c) 40%, #000);
  animation: ldr-basketball-spin 1.2s linear infinite;
}
@keyframes ldr-basketball-x {
  0%       { transform: translateX(0); opacity: 0; animation-timing-function: cubic-bezier(0.3, 0.1, 0.6, 1); }
  5%       { opacity: 1; }
  38%, 84% { transform: translateX(calc(var(--s) * 1)); opacity: 1; }
  92%      { transform: translateX(calc(var(--s) * 1)); opacity: 0; }
  100%     { transform: translateX(0); opacity: 0; }
}
@keyframes ldr-basketball-y {
  0%       { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  21%      { transform: translateY(calc(var(--s) * -0.72)); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  38%      { transform: translateY(calc(var(--s) * -0.57)); animation-timing-function: cubic-bezier(0.4, 0.3, 0.85, 0.6); }
  52%      { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  61%      { transform: translateY(calc(var(--s) * -0.16)); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  70%      { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  75%      { transform: translateY(calc(var(--s) * -0.04)); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  80%, 100% { transform: translateY(0); }
}
@keyframes ldr-basketball-spin {
  to { transform: rotate(-360deg); }
}
@keyframes ldr-basketball-swish {
  0%, 38%   { transform: scale(1, 1); }
  45%       { transform: scale(0.9, 1.3); }
  54%       { transform: scale(1.04, 0.92); }
  62%, 100% { transform: scale(1, 1); }
}

.ldr-watering-can {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 1.3);
  height: var(--s);
}
.ldr-watering-can svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--c);
}
.ldr-watering-can-line {
  fill: none;
  stroke: var(--c);
  stroke-width: 3.4;
  stroke-linecap: round;
}
.ldr-watering-can-can {
  transform-origin: 29.8% 43.75%;
  animation: ldr-watering-can-tip 2.8s infinite;
}
.ldr-watering-can-drop {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 80%, transparent);
  opacity: 0;
  animation: ldr-watering-can-drop 2.8s infinite;
}
.ldr-watering-can-drop:nth-child(2) { animation-delay: 0.14s; }
.ldr-watering-can-drop:nth-child(3) { animation-delay: 0.28s; }
.ldr-watering-can-sprout {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ldr-watering-can-grow 2.8s infinite;
}
.ldr-watering-can-soil {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
}
.ldr-watering-can-stem {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
}
@keyframes ldr-watering-can-tip {
  0%, 16%   { transform: rotate(0); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1.4); }
  30%, 64%  { transform: rotate(22deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  80%, 100% { transform: rotate(0); }
}
@keyframes ldr-watering-can-drop {
  0%, 30% { transform: translateY(0); opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  31%     { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  43%     { transform: translateY(16%); opacity: 1; }
  45%     { transform: translateY(16%); opacity: 0; }
  46%     { transform: translateY(0); opacity: 0; }
  47%     { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  59%     { transform: translateY(16%); opacity: 1; }
  61%, 100% { transform: translateY(16%); opacity: 0; }
}
@keyframes ldr-watering-can-grow {
  0%, 40%   { transform: scale(0.8); }
  52%       { transform: scale(1.1); }
  60%, 84%  { transform: scale(1); }
  100%      { transform: scale(0.8); }
}

@property --ldr-cookie-a { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ldr-cookie-b { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ldr-cookie-c { syntax: "<length>"; inherits: false; initial-value: 0px; }
.ldr-cookie {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --chip: color-mix(in srgb, var(--c) 40%, #000);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-cookie-cookie {
  --bite: calc(var(--s) * 0.2);
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle calc(var(--s) * 0.045) at 30% 28%, var(--chip) 92%, transparent),
    radial-gradient(circle calc(var(--s) * 0.038) at 56% 36%, var(--chip) 92%, transparent),
    radial-gradient(circle calc(var(--s) * 0.04) at 24% 55%, var(--chip) 92%, transparent),
    radial-gradient(circle calc(var(--s) * 0.045) at 46% 62%, var(--chip) 92%, transparent),
    radial-gradient(circle calc(var(--s) * 0.038) at 70% 60%, var(--chip) 92%, transparent),
    radial-gradient(circle calc(var(--s) * 0.035) at 50% 84%, var(--chip) 92%, transparent),
    radial-gradient(circle calc(var(--s) * 0.032) at 76% 40%, var(--chip) 92%, transparent),
    var(--c);
  -webkit-mask:
    radial-gradient(circle var(--ldr-cookie-a) at 91% 9%, transparent 96%, #000),
    radial-gradient(circle calc(var(--ldr-cookie-a) * 0.7) at 102% 26%, transparent 96%, #000),
    radial-gradient(circle var(--ldr-cookie-b) at 98% 78%, transparent 96%, #000),
    radial-gradient(circle calc(var(--ldr-cookie-b) * 0.7) at 89% 93%, transparent 96%, #000),
    radial-gradient(circle var(--ldr-cookie-c) at 30% 102%, transparent 96%, #000),
    radial-gradient(circle calc(var(--ldr-cookie-c) * 0.7) at 14% 94%, transparent 96%, #000);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--ldr-cookie-a) at 91% 9%, transparent 96%, #000),
    radial-gradient(circle calc(var(--ldr-cookie-a) * 0.7) at 102% 26%, transparent 96%, #000),
    radial-gradient(circle var(--ldr-cookie-b) at 98% 78%, transparent 96%, #000),
    radial-gradient(circle calc(var(--ldr-cookie-b) * 0.7) at 89% 93%, transparent 96%, #000),
    radial-gradient(circle var(--ldr-cookie-c) at 30% 102%, transparent 96%, #000),
    radial-gradient(circle calc(var(--ldr-cookie-c) * 0.7) at 14% 94%, transparent 96%, #000);
  mask-composite: intersect;
  animation: ldr-cookie-eat 3s infinite;
}
.ldr-cookie-crumb {
  position: absolute;
  left: 76%;
  top: 30%;
  width: calc(var(--s) * 0.06);
  height: calc(var(--s) * 0.06);
  border-radius: 30%;
  background: var(--c);
  opacity: 0;
  animation: ldr-cookie-crumb 3s 0.5s infinite;
}
.ldr-cookie-crumb:nth-child(3) {
  left: 86%;
  top: 72%;
  animation-delay: 1.22s;
}
.ldr-cookie-crumb:nth-child(4) {
  left: 30%;
  top: 88%;
  animation-delay: 1.94s;
}
@keyframes ldr-cookie-eat {
  0%, 14%  { --ldr-cookie-a: 0px; transform: scale(1) rotate(0); opacity: 1; }
  16%      { transform: scale(0.94) rotate(-6deg); }
  18%      { --ldr-cookie-a: var(--bite); }
  21%, 38% { --ldr-cookie-b: 0px; transform: scale(1) rotate(0); }
  40%      { transform: scale(0.94) rotate(-6deg); }
  42%      { --ldr-cookie-b: var(--bite); }
  45%, 62% { --ldr-cookie-c: 0px; transform: scale(1) rotate(0); }
  64%      { transform: scale(0.94) rotate(-6deg); }
  66%      { --ldr-cookie-c: var(--bite); }
  69%, 80% { transform: scale(1) rotate(0); opacity: 1; }
  86%      { --ldr-cookie-a: var(--bite); --ldr-cookie-b: var(--bite); --ldr-cookie-c: var(--bite); transform: scale(0.5); opacity: 0; }
  87%, 92% { --ldr-cookie-a: 0px; --ldr-cookie-b: 0px; --ldr-cookie-c: 0px; transform: scale(0.5); opacity: 0; animation-timing-function: cubic-bezier(0.3, 1.6, 0.6, 1); }
  100%     { transform: scale(1); opacity: 1; }
}
@keyframes ldr-cookie-crumb {
  0%        { transform: translateY(0) rotate(0); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  20%, 100% { transform: translateY(calc(var(--s) * 0.2)) rotate(90deg); opacity: 0; }
}

.ldr-snail {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 1.5);
  height: var(--s);
}
.ldr-snail svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--c);
}
.ldr-snail-snail {
  animation: ldr-snail-glide 4s linear infinite;
}
.ldr-snail-body {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  transform-box: fill-box;
  transform-origin: 0 100%;
  animation: ldr-snail-stretch 1s ease-in-out infinite;
}
.ldr-snail-body circle {
  fill: var(--c);
}
.ldr-snail-feelers {
  fill: none;
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.ldr-snail-shell {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ldr-snail-shell 1s ease-in-out infinite;
}
.ldr-snail-spiral {
  fill: none;
  stroke: color-mix(in srgb, var(--c) 35%, #fff);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.ldr-snail-trail {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: ldr-snail-trail 4s linear infinite;
}
@keyframes ldr-snail-glide {
  0%   { transform: translateX(-4%); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(10%); opacity: 0; }
}
@keyframes ldr-snail-stretch {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.07); }
}
@keyframes ldr-snail-shell {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50%      { transform: translate(3%, -3%) rotate(4deg); }
}
@keyframes ldr-snail-trail {
  0%   { transform: scaleX(0.4); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}