/* Sampler-only styles (not part of the design system). */
.sampler-logo { color: var(--z-color-fg-default); font-weight: 500; margin-right: 12px; text-decoration: none; }
.sampler-logo b { color: var(--z-color-accent-fg); }
.sampler-rules { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--z-color-fg-muted); }
.sampler-section { display: flex; flex-direction: column; gap: var(--z-space-3); }
.sampler-demo { display: flex; flex-wrap: wrap; gap: var(--z-space-3); align-items: center; padding: var(--z-space-5); border: 1px solid var(--z-color-border-default); border-radius: var(--z-radius-lg); background: var(--z-color-bg-default); }
.sampler-demo--flush { padding: 0; overflow: hidden; display: block; }
.sampler-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--z-space-3); }
.sampler-pair > [data-theme] { background: var(--z-color-bg-default); color: var(--z-color-fg-default); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; vertical-align: -2px; border: 1px solid var(--z-color-border-default); }
.sampler-code { font-size: 11px; color: var(--z-color-fg-subtle); }