.demo-browser{display:grid;gap:1.25rem}.demo-browser__heading{margin:0}.demo-browser__summary{display:flex;align-items:center;gap:.75rem;margin-inline-start:auto;font-size:.875rem;white-space:nowrap}.demo-browser__status{margin:0;opacity:.75;font-variant-numeric:tabular-nums}.demo-browser__clear{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.15em;cursor:pointer}.demo-browser__controls[hidden],.demo-card[hidden],.demo-browser__empty[hidden],.demo-browser__clear[hidden],.demo-browser__pill-count[hidden]{display:none}.demo-browser__controls{position:relative;display:flex;min-width:0;flex-wrap:wrap;gap:.5rem}.demo-browser__search{position:relative;flex:1 1 16rem;max-width:22rem}.demo-browser__search svg{position:absolute;top:50%;left:.75rem;width:1.125rem;height:1.125rem;transform:translateY(-50%);opacity:.6;pointer-events:none}.demo-browser__search-input{width:100%;height:2.5rem;padding:0 .875rem 0 2.25rem;border:1px solid rgb(var(--color-foreground-rgb) / .2);border-radius:999px;background:var(--color-input-background, transparent);color:var(--color-input-text, inherit);font:inherit;font-size:.875rem}.demo-browser__search-input:focus-visible{outline:2px solid var(--color-foreground);outline-offset:1px}.demo-browser__filters{display:flex;flex-wrap:wrap;gap:.5rem}.demo-browser__filter{position:relative}.demo-browser__pill{display:inline-flex;align-items:center;gap:.375rem;height:2.5rem;padding:0 .75rem 0 .875rem;border:1px solid rgb(var(--color-foreground-rgb) / .2);border-radius:999px;font-size:.875rem;white-space:nowrap;list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none}.demo-browser__pill::-webkit-details-marker{display:none}.demo-browser__pill:hover{border-color:rgb(var(--color-foreground-rgb) / .6)}.demo-browser__pill:focus-visible{outline:2px solid var(--color-foreground);outline-offset:2px}.demo-browser__pill svg{width:.75rem;height:.75rem}.demo-browser__filter[open] .demo-browser__pill svg{transform:rotate(180deg)}.demo-browser__filter.is-active .demo-browser__pill{border-color:var(--color-foreground);background:var(--color-foreground);color:var(--color-background)}.demo-browser__pill-count{min-width:1.25rem;padding:0 .375rem;border-radius:999px;background:var(--color-background);color:var(--color-foreground);font-size:.75rem;font-weight:600;line-height:1.25rem;text-align:center}.demo-browser__group{position:absolute;z-index:3;top:calc(100% + .375rem);left:0;display:grid;min-width:14rem;max-height:min(22rem,60vh);overflow-y:auto;margin:0;padding:.375rem;border:1px solid rgb(var(--color-foreground-rgb) / .15);border-radius:.75rem;background:var(--color-background);box-shadow:0 8px 24px #0000001f}.demo-browser__option{display:flex;align-items:center;gap:.625rem;min-height:2.5rem;padding:0 .625rem;border-radius:.5rem;font-size:.875rem;cursor:pointer}.demo-browser__option:hover{background:rgb(var(--color-foreground-rgb) / .06)}.demo-browser__checkbox{flex:none;width:1rem;height:1rem;margin:0;accent-color:var(--color-foreground);cursor:pointer}.demo-browser__option-text{flex:1;white-space:nowrap}.demo-browser__count{opacity:.6;font-variant-numeric:tabular-nums}.demo-browser__option:has(.demo-browser__checkbox:disabled){opacity:.4;cursor:default}.demo-browser__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}@media(min-width:750px){.demo-browser__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}}@media(min-width:990px){.demo-browser__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.demo-card{display:flex;flex-direction:column;gap:.5rem;min-width:0}.demo-card__link{display:grid;gap:.25rem;color:inherit;text-decoration:none}.demo-card__link:focus-visible{outline:2px solid var(--color-foreground);outline-offset:3px}.demo-card__media{display:block;overflow:hidden;aspect-ratio:16 / 9;margin-bottom:.25rem;border-radius:.5rem;background:rgb(var(--color-foreground-rgb) / .05)}.demo-card__media img,.demo-card__media svg{display:block;width:100%;height:100%;object-fit:cover}.demo-card__title{font-weight:600;line-height:1.3}.demo-card__link:hover .demo-card__title{text-decoration:underline;text-underline-offset:.15em}.demo-card__subtitle{font-size:.875rem;line-height:1.4;opacity:.75}.demo-card__chips{display:flex;flex-wrap:wrap;gap:.25rem;margin:0;padding:0;list-style:none}.demo-card__chip{padding:.125rem .5rem;border-radius:999px;background:rgb(var(--color-foreground-rgb) / .07);font-size:.75rem;line-height:1.5}.demo-card__chip--type{background:rgb(var(--color-foreground-rgb) / .14);font-weight:600}.demo-browser__empty{margin:0}@media(max-width:749px){.demo-browser__search{flex-basis:100%;max-width:none}.demo-browser__filters{flex:1 1 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--page-margin, 1rem) * -1);padding-inline:var(--page-margin, 1rem);scrollbar-width:none}.demo-browser__filters::-webkit-scrollbar{display:none}.demo-browser__filter{position:static;flex:none}.demo-browser__group{right:0;min-width:0}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/demo-browser.css.map */