.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.hero{position:relative;padding-block:1.5rem 2rem;border-bottom:1px solid var(--color-border);margin-bottom:2rem}.hero__title{margin:0 0 .5rem;font-size:clamp(2rem,5vw,2.5rem);font-weight:800;letter-spacing:-.035em}.hero__lead{max-width:42rem;margin:0;color:var(--color-muted-foreground)}.hero__stats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}.stat{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem;border:1px solid var(--color-border);border-radius:999px;background:var(--color-card);font-size:.75rem;font-weight:500;color:var(--color-muted-foreground)}.stat__dot{width:.4rem;height:.4rem;border-radius:50%;background:currentColor}.stat strong{color:var(--color-foreground)}.stat--react{color:#0891b2}.stat--tailwind{color:#0284c7}.stat--vanilla{color:#d97706}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.5rem}.filters{display:flex;align-items:center;gap:.25rem;padding:.25rem;border:1px solid var(--color-border);border-radius:999px;background:var(--color-card);overflow-x:auto;flex-shrink:0}.filter{border:0;background:transparent;padding:.4rem .85rem;border-radius:999px;font-size:.75rem;font-weight:500;color:var(--color-muted-foreground);white-space:nowrap;cursor:pointer}.filter[aria-pressed=true]{background:var(--color-foreground);color:var(--color-background);font-weight:600}.toolbar__search{position:relative;display:flex;align-items:center;flex:1 1 12rem;min-width:0}.toolbar__search svg{position:absolute;inset-inline-start:.75rem;width:.9rem;color:var(--color-muted-foreground)}.toolbar__search input{width:100%;height:2.4rem;padding:0 .875rem 0 2.3rem;border:1px solid var(--color-border);border-radius:999px;background:var(--color-card);font-size:.8125rem}.toolbar__count{margin-inline-start:auto;font:.75rem var(--font-mono);color:var(--color-muted-foreground);white-space:nowrap}.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:1rem}.tcard{min-width:0}.tcard__link{display:flex;flex-direction:column;gap:.75rem;height:100%;padding:1.5rem;border:1px solid var(--color-border);border-radius:.875rem;background:var(--color-card);transition:border-color .2s,transform .2s,box-shadow .2s}.tcard__link:hover{border-color:color-mix(in srgb,var(--color-foreground) 28%,var(--color-border));transform:translateY(-2px);box-shadow:0 12px 28px -14px #00000038}.tcard__head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.badge-fw{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);background:color-mix(in srgb,currentColor 10%,transparent);font:500 .6875rem var(--font-mono)}.badge-fw:before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:currentColor}.badge-fw--react{color:#0891b2}.badge-fw--tailwind{color:#0284c7}.badge-fw--vanilla{color:#d97706}.tcard__category{font:.6875rem var(--font-mono);color:var(--color-muted-foreground);text-transform:capitalize}.tcard__category:before{content:"·";margin-inline-end:.5rem;color:var(--color-border)}.tcard__title{margin:0;font-size:1.125rem;font-weight:600;letter-spacing:-.015em}.tcard__desc{display:-webkit-box;overflow:hidden;margin:0;font-size:.8125rem;line-height:1.65;color:var(--color-muted-foreground);-webkit-box-orient:vertical;-webkit-line-clamp:3}.tcard__tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:auto 0 0;padding:.5rem 0 0;list-style:none}.tcard__tags li{padding:.15rem .55rem;border:1px solid var(--color-border);border-radius:999px;background:var(--color-subtle);font:.6875rem var(--font-mono);color:var(--color-muted-foreground)}.tcard__cta{display:inline-flex;align-items:center;gap:.4rem;padding-top:.75rem;border-top:1px solid var(--color-border);font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--color-muted-foreground)}.tcard__cta svg{width:.85rem;transition:transform .2s}.tcard__link:hover .tcard__cta svg{transform:translate(3px)}.empty{display:none;flex-direction:column;align-items:center;gap:.5rem;padding:4rem 1.5rem;border:1px dashed var(--color-border);border-radius:.875rem;text-align:center}.empty[data-visible]{display:flex}.empty:not([data-visible]){display:none}.empty__icon{width:2.5rem;height:2.5rem;color:var(--color-muted-foreground)}.empty__title{font-size:1.125rem;font-weight:600}.empty__desc{font-size:.8125rem;color:var(--color-muted-foreground)}