Table Skeleton

<div class="nuda-sktbl" aria-hidden="true">
  <div class="nuda-sktbl__row">
    <span style="width:30%"></span>
    <span style="width:22%"></span>
    <span style="width:18%"></span>
    <span style="width:15%"></span>
  </div>
  <!-- repeat rows; first row reads as the header -->
</div>

/* Table Skeleton
   Rows and columns placeholder; rows pulse in staggered opacity.
   The first row is tinted to read as a header.
   Customize: --sktbl-block, --sktbl-head */

.nuda-sktbl {
  --sktbl-block: rgba(255, 255, 255, 0.07);
  --sktbl-head: rgba(228, 255, 84, 0.18);
  display: flex;
  flex-direction: column;
  gap: 9px;
  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: 280px;
}

.nuda-sktbl__row {
  display: flex;
  gap: 12px;
  align-items: center;
  animation: nuda-sktbl-pulse 1.6s ease-in-out infinite;
}

.nuda-sktbl__row:first-child span { background: var(--sktbl-head); }
.nuda-sktbl__row span { height: 10px; border-radius: 3px; background: var(--sktbl-block); }

@keyframes nuda-sktbl-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-sktbl__row { animation: none; opacity: 0.6; }
}