@layer utilities {
  .sb-visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  .sb-stack { display: flex; flex-direction: column; gap: var(--sb-gap, var(--sb-space-4)); }
  .sb-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-gap, var(--sb-space-2)); }
  .sb-grid { display: grid; gap: var(--sb-gap, var(--sb-space-4)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sb-min, 240px)), 1fr)); }
  .sb-spacer { flex: 1; }
  .sb-muted { color: var(--sb-ink-2); }
  .sb-nums { font-variant-numeric: tabular-nums; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
}