.demo-grid{grid-template-columns:1fr;gap:1.25rem;padding:0;list-style:none;display:grid}@media (min-width:768px){.demo-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1100px){.demo-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}.demo-card{flex-direction:column;height:100%;transition:border-color .15s;display:flex;overflow:hidden}.demo-card:hover{border-color:var(--accent)}.demo-card-thumb{aspect-ratio:16/10;background:var(--surface-sunken);border-bottom:1px solid var(--border);position:relative;overflow:hidden}.demo-card-image{object-fit:cover;object-position:top center}.demo-card-placeholder{border:0;border-radius:0;justify-content:center;align-items:center;height:100%;display:flex}.demo-card-placeholder img{opacity:.55;width:3rem;height:auto}.demo-card-body{flex-direction:column;align-items:flex-start;gap:.75rem;padding:1.25rem 1.25rem 1.5rem;display:flex}.demo-card-title{margin:0}.demo-card-description{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:.9375rem;display:-webkit-box;overflow:hidden}
.demo-filter{width:min(100%,21rem);margin-top:2.25rem}.demo-filter-label{color:var(--text-secondary);margin-bottom:.5rem;font-size:.8125rem;font-weight:500;display:block}.demo-filter-select-wrap{position:relative}.demo-filter-select{border:1px solid var(--border-interactive);background:var(--surface);width:100%;min-height:48px;color:var(--text);font:inherit;text-align:left;cursor:pointer;border-radius:.75rem;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.9375rem;display:flex}.demo-filter-select:hover,.demo-filter-select-open{border-color:var(--accent)}.demo-filter-select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.demo-filter-value,.demo-filter-option-label{flex:1;min-width:0}.demo-filter-count{color:var(--text-secondary);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.75rem}.demo-filter-chevron{color:var(--text-secondary);flex-shrink:0}.demo-filter-select-open .demo-filter-chevron{transform:rotate(180deg)}.demo-filter-menu{z-index:30;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-interactive)transparent;border:1px solid var(--border-interactive);background:var(--surface-raised);width:100%;max-height:min(20rem,50dvh - 4.5rem);color:var(--text);box-shadow:var(--shadow-card);border-radius:.875rem;margin:0;padding:.375rem;list-style:none;position:absolute;top:calc(100% + .5rem);left:0;overflow-y:auto}.demo-filter-menu[hidden]{display:none}.demo-filter-menu-above{top:auto;bottom:calc(100% + .5rem)}.demo-filter-option{cursor:pointer;border-radius:.5rem;align-items:center;gap:.75rem;min-height:44px;padding:.625rem .75rem;font-size:.875rem;line-height:1.4;display:flex}.demo-filter-option+.demo-filter-option{margin-top:.125rem}.demo-filter-option:first-child{border-bottom:1px solid var(--border)}.demo-filter-option-highlighted{background:var(--surface-sunken)}.demo-filter-option[aria-selected=true]{color:var(--accent);font-weight:600}.demo-filter-check{visibility:hidden;flex-shrink:0}.demo-filter-option[aria-selected=true] .demo-filter-check{visibility:visible}@media (hover:hover){.demo-filter-option:hover{background:var(--surface-sunken)}}.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}}