.leaf-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  color: var(--muted, #666);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.leaf-loading-sprite {
  --leaf-size: 64px;
  /* Each sprite frame is 1.5 times the leaf height. */
  --leaf-frame-width: calc(var(--leaf-size) * 1.5);
  display: inline-block;
  flex: 0 0 auto;
  width: var(--leaf-frame-width);
  height: var(--leaf-size);
  background: url('/static/loading/leaf-playful-v1.png') 0 0 / calc(var(--leaf-frame-width) * 42) var(--leaf-size) no-repeat;
  image-rendering: pixelated;
  animation: leaf-playful 4.2s steps(42, end) infinite;
}
.leaf-loading.is-compact {
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
  padding: 0;
  text-align: left;
  vertical-align: middle;
}
.leaf-loading.is-compact .leaf-loading-sprite { --leaf-size: 32px; }
/* Step through all 42 frames; no blending between poses. */
@keyframes leaf-playful {
  to { background-position: calc(var(--leaf-frame-width) * -42) 0; }
}
/* Keep a still leaf when reduced motion is on. */
@media (prefers-reduced-motion: reduce) {
  .leaf-loading-sprite { animation: none; }
}