.sg-intro{max-width:68ch}.sg-group{padding-block:var(--space-7);border-top:var(--border-keyline) solid var(--c-keyline)}.sg-group:first-of-type{border-top:0}.sg-group__title{font-family:var(--font-mono);font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--c-eyebrow);margin:0 0 var(--space-5);padding-bottom:var(--space-2);border-bottom:var(--border-keyline) solid var(--c-rule)}.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-5)}.sg-grid--wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.sg-grid--full{grid-template-columns:1fr}.sg-item{display:flex;flex-direction:column;gap:var(--space-3)}.sg-item__demo{background:var(--c-white);border:var(--border-keyline) solid var(--c-keyline);border-radius:var(--radius-card);padding:var(--space-5);overflow:auto}.sg-item__demo--flush{padding:0}.sg-item__demo--dark{background:var(--c-hero-dark);padding:0}.sg-item__name{font-family:var(--font-display);font-weight:var(--la-bold);font-size:1rem;color:var(--c-ink);margin:0}.sg-item__class{margin:0;font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--c-blue)}.sg-item__class code{font-family:inherit}.sg-meta{margin:0;font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--c-muted);word-break:break-word}.sg-swatch{display:flex;flex-direction:column;border:var(--border-keyline) solid var(--c-keyline);border-radius:var(--radius-card);overflow:hidden}.sg-swatch__fill{height:72px}.sg-swatch__body{padding:var(--space-4);background:var(--c-white)}.sg-swatch__name{margin:0 0 var(--space-1);font-weight:var(--la-bold);color:var(--c-ink);font-size:var(--fs-body)}.sg-swatch__value{font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--c-muted)}