.dt-skeleton {
  animation: dt-skeleton-pulse 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, var(--dt-color-border, #d9ddd8) 25%, var(--dt-color-surface-muted, #eef1ed) 50%, var(--dt-color-border, #d9ddd8) 75%);
  background-size: 200% 100%;
  border-radius: .375rem;
  display: block;
}

.dt-skeleton-variant {
  background: var(--dt-color-surface, #fff);
  border: 1px solid var(--dt-color-border, #d9ddd8);
  border-radius: 1.125rem;
  min-width: 0;
  padding: 1rem;
}

.dt-skeleton-variant__content,
.dt-skeleton-variant__content > * {
  min-width: 0;
}

.dt-skeleton-variant__content { width: 100%; }

.dt-skeleton-copy {
  display: grid;
  gap: .625rem;
}

.dt-skeleton-variant--chart .dt-skeleton-chart-plot { min-height: 12.5rem; }

.dt-skeleton-list {
  display: grid;
  gap: .75rem;
}

.dt-skeleton-list__content { display: grid; gap: .625rem; }

.dt-skeleton-table {
  background: var(--dt-color-surface, #fff);
  border: 1px solid var(--dt-color-border, #d9ddd8);
  border-radius: 1.125rem;
  overflow: hidden;
}

.dt-skeleton-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(var(--dt-skeleton-columns, 3), minmax(0, 1fr));
}

@keyframes dt-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 48rem) {
  .dt-skeleton-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .dt-skeleton { animation: none; }
}