.category-filter{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.category-filter.active{background:var(--mark-accent-primary);color:var(--mark-bg);font-family:var(--mark-font-display),sans-serif;border:none}.category-filter.inactive{background:var(--mark-bg-elevated);border:1px solid var(--mark-border);color:inherit}.category-filter.inactive:hover{border-color:color-mix(in srgb,var(--mark-accent-primary) 40%,transparent)}.category-filter-label{line-height:1}.category-filter-count{opacity:.7;font-size:12px;line-height:1}@media (max-width:767px){.components-showcase-layout{flex-direction:column;gap:0;padding:0 16px}}.filter-sidebar{width:220px;position:sticky;top:80px;align-self:flex-start}.filter-sidebar-heading{font-family:var(--mark-font-display),sans-serif;font-size:20px;font-weight:600;margin:0 0 16px}.filter-sidebar-options{display:flex;flex-direction:column;gap:8px}@media (max-width:767px){.filter-sidebar{width:100%;position:static;margin-bottom:24px}.filter-sidebar-heading{margin-bottom:12px}.filter-sidebar-options{flex-direction:row;flex-wrap:wrap}}.category-divider{grid-column:1/-1;display:flex;align-items:center;margin:16px 0;position:relative}.category-divider:after{content:"";flex:1;height:1px;background:var(--mark-border);opacity:.3;margin-left:12px}.category-divider-label{font-family:var(--mark-font-display),sans-serif;font-size:14px;font-weight:600;color:var(--mark-text-secondary,color-mix(in srgb,currentColor 60%,transparent));text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.component-grid{flex:1;width:100%}.component-grid-container{display:flex;flex-direction:column;gap:24px}.category-section{display:contents}.component-grid-items{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}@media (max-width:1024px){.component-grid-items{grid-template-columns:repeat(2,1fr)}}@media (max-width:767px){.component-grid-items{grid-template-columns:1fr}}.component-card{background:var(--mark-bg-elevated);border:1px solid var(--mark-border);border-radius:var(--mark-radius-lg);padding:32px;height:200px;display:flex;flex-direction:column;justify-content:space-between;transition:all .3s ease}.component-card:hover{border-color:color-mix(in srgb,var(--mark-accent-primary) 40%,transparent);transform:translateY(-4px)}.component-card.has-overlay{cursor:pointer}.component-card-preview{display:flex;align-items:center;justify-content:center;flex:1}.component-card-metadata{display:flex;flex-direction:column;gap:8px}.component-card-name{font-family:var(--mark-font-display),sans-serif;font-weight:700;font-size:18px;color:var(--mark-text,var(--mark-fg));margin:0}.component-card-footer{display:flex;align-items:center;justify-content:space-between}.component-card-category{background:var(--mark-bg);border:1px solid var(--mark-border);border-radius:var(--mark-radius-pill);padding:4px 12px;font-family:var(--mark-font-body),sans-serif;font-size:12px;color:var(--mark-text-muted,color-mix(in srgb,var(--mark-fg) 60%,transparent))}.component-card-docs-link{font-family:var(--mark-font-body),sans-serif;font-size:13px;color:var(--mark-accent-primary);text-decoration:none;opacity:0;transform:translateY(8px);transition:all .3s ease}.component-card:hover .component-card-docs-link{opacity:1;transform:translateY(0)}.preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:1000}.components-showcase-hero,.preview-overlay{display:flex;align-items:center;justify-content:center}.components-showcase-hero{flex-direction:column;text-align:center;padding:64px 24px}.hero-tag{color:var(--mark-fg);opacity:.6;font-family:var(--mark-font-body),sans-serif;font-size:14px;margin-bottom:16px}.hero-heading{font-family:var(--mark-font-display),sans-serif;font-weight:700;font-size:clamp(40px,5vw,60px);color:var(--mark-fg);margin:0 0 24px}.hero-subtext{font-family:var(--mark-font-body),sans-serif;font-size:clamp(16px,2vw,20px);color:var(--mark-fg);opacity:.8;max-width:672px;margin:0;line-height:1.5}.components-showcase-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 48px 60px;background:var(--mark-bg-surface);margin-top:80px}.cta-heading{font-family:var(--mark-font-display),sans-serif;font-size:clamp(32px,4vw,48px);color:var(--mark-fg);margin:0 0 16px}.cta-subtext{font-family:var(--mark-font-body),sans-serif;font-size:clamp(16px,2vw,20px);color:var(--mark-fg);opacity:.8;max-width:672px;margin:0 0 32px;line-height:1.5}.cta-button{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:var(--mark-radius-lg);background:var(--mark-accent-primary);color:var(--mark-bg);font-family:var(--mark-font-display),sans-serif;font-weight:600;font-size:16px;text-decoration:none;transition:all var(--mark-duration-normal) var(--mark-ease-smooth)}.cta-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px color-mix(in srgb,var(--mark-accent-primary) 30%,transparent)}.components-showcase-page{width:100%;min-height:100vh;padding-bottom:160px;overflow-x:hidden}.components-showcase-page:after{content:"";display:block;height:60px}@media (max-width:767px){.components-showcase-page{padding-bottom:120px}.components-showcase-page:after{height:40px}.components-showcase-cta{margin-top:48px;padding:60px 32px 40px}}.components-showcase-layout{display:flex;gap:48px;width:100%;padding:0 24px;max-width:1400px;margin:0 auto;box-sizing:border-box}.tooltip-popup{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease}.tooltip-trigger-group:hover .tooltip-popup{opacity:1;visibility:visible}