.demo-filter{margin-top:2.25rem}.demo-filter-controls{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.demo-filter-chip,.demo-filter-select{border:1px solid var(--border-interactive);background:var(--surface);color:var(--text);cursor:pointer;border-radius:9999px;font-family:inherit;font-size:.875rem;font-weight:500;line-height:1;transition:background-color .15s,border-color .15s,color .15s}.demo-filter-chip{align-items:center;gap:.5rem;padding:.6875rem .9375rem;display:inline-flex}.demo-filter-chip:hover{border-color:var(--accent);color:var(--accent)}.demo-filter-chip-active,.demo-filter-chip-active:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.demo-filter-count{font-family:var(--font-mono);color:var(--text-secondary);font-size:.75rem}.demo-filter-chip-active .demo-filter-count{color:var(--accent-contrast)}.demo-filter-select-wrap{align-items:center;display:inline-flex;position:relative}.demo-filter-select{appearance:none;padding:.6875rem 2.375rem .6875rem .9375rem}.demo-filter-select:hover{border-color:var(--accent)}.demo-filter-select-active{border-color:var(--accent);color:var(--accent)}.demo-filter-chevron{width:.75rem;height:.5rem;color:var(--text-secondary);pointer-events:none;position:absolute;right:.9375rem}.demo-filter-select-active+.demo-filter-chevron{color:var(--accent)}@media (pointer:coarse){.demo-filter-chip,.demo-filter-select{padding-block:.9375rem}}.demo-filter-status{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.demos-group[hidden]{display:none}
.demos-hero{padding-top:9rem;padding-bottom:3rem}.demos-hero-heading{max-width:44rem;margin-top:1.25rem}.demos-hero-subhead{max-width:38rem;margin-top:1.25rem}.demos-groups{flex-direction:column;gap:3.5rem;padding-bottom:5rem;display:flex}.demos-group-title{border-bottom:1px solid var(--border);margin-bottom:1.5rem;padding-bottom:.75rem}.demos-empty{padding-bottom:5rem}@media (min-width:768px){.demos-hero{padding-top:10rem;padding-bottom:4rem}.demos-groups{gap:4.5rem;padding-bottom:7rem}}