Chart Skeleton

<div class="nuda-skchart" aria-hidden="true">
  <div class="nuda-skchart__bars">
    <span style="height:40%"></span>
    <span style="height:70%"></span>
    <span style="height:50%"></span>
    <span style="height:90%"></span>
    <span style="height:60%"></span>
    <span style="height:80%"></span>
  </div>
  <span class="nuda-skchart__axis"></span>
</div>

/* Chart Skeleton
   Bar-chart placeholder; bars breathe via scaleY (their heights are inline).
   Customize: --skchart-bar */

.nuda-skchart {
  --skchart-bar: rgba(228, 255, 84, 0.28);
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  width: 100%;
  max-width: 220px;
}

.nuda-skchart__bars { display: flex; align-items: flex-end; gap: 8px; height: 88px; }

.nuda-skchart__bars span {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--skchart-bar), rgba(255, 255, 255, 0.05));
  transform-origin: bottom;
  animation: nuda-skchart 1.5s ease-in-out infinite;
  will-change: transform, opacity;
}

.nuda-skchart__axis {
  display: block;
  height: 2px;
  margin-top: 6px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.1);
}

@keyframes nuda-skchart {
  0%, 100% { transform: scaleY(0.7); opacity: 0.5; }
  50%      { transform: scaleY(1);   opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-skchart__bars span { animation: none; transform: scaleY(1); opacity: 0.6; }
}