/* @layer-wrapped:utilities */
@layer utilities {
.ds-stack {
  display: grid;
  gap: var(--space-4);
}

.ds-stack-sm {
  display: grid;
  gap: var(--space-2);
}

.ds-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ds-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ds-surface {
  background: var(--color-surface);
  border: 1px solid var(--nz-intensity-light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--nz-intensity-light-shadow);
}

.ds-text-muted {
  color: var(--color-text-soft);
}

.ds-intensity-light {
  border-color: var(--nz-intensity-light-border);
  box-shadow: var(--nz-intensity-light-shadow);
}

.ds-intensity-medium {
  border-color: var(--nz-intensity-medium-border);
  box-shadow: var(--nz-intensity-medium-glow);
}

.ds-intensity-strong {
  border-color: var(--nz-intensity-strong-border);
  box-shadow: var(--nz-intensity-strong-glow);
}

.ds-scroll-area {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 135, 255, 0.28) transparent;
}

.ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

}