/* Only the arrangement of examples lives here. Shared component styles live in components.css. */
.design-system__intro { display: flex; flex-direction: column; gap: 24px; }
.design-system__intro .lede { max-width: 68ch; }
.design-system__alternate { background: var(--bg2); }
.design-system__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.design-system__rule { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 16px; border-top: 1px solid rgba(var(--ink-rgb), .14); font-size: 14px; color: var(--ink-2); }
.design-system__rule code { overflow-wrap: anywhere; color: var(--ink); }
.design-system__swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.design-system__swatch { min-height: 110px; display: flex; align-items: flex-end; padding: 16px; border: 1px solid rgba(var(--ink-rgb), .2); }
.design-system__swatch--bg { background: var(--bg); color: var(--ink); }
.design-system__swatch--bg2 { background: var(--bg2); color: var(--ink); }
.design-system__swatch--brand { background: var(--brand); color: var(--white); }
@media (max-width: 560px) { .design-system__swatches { grid-template-columns: 1fr; } }