.catalog-page{padding:56px 0 96px;max-width:1280px;margin:0 auto}.catalog-page-hero{margin-bottom:48px;padding:0 32px;display:flex;flex-direction:column;gap:12px}.catalog-page-eyebrow{font-family:var(--font-mono, "Geist Mono", ui-monospace, monospace);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3, var(--ink-soft))}.catalog-page-title{font-family:var(--font-display, var(--font-serif, "Instrument Serif", Georgia, serif));font-weight:400;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-.015em;margin:0;color:var(--ink)}.catalog-page-title em{font-style:italic}.catalog-page-lead{font-size:15px;line-height:1.55;color:var(--ink-2, var(--ink));max-width:64ch;margin:0}.catalog-page .matrix-controls{display:flex;gap:6px;flex-wrap:wrap;padding:0 32px;margin-bottom:12px}.catalog-page input[type=search]{width:100%;max-width:480px;padding:10px 14px;border:1px solid var(--rule, color-mix(in srgb, var(--ink) 14%, transparent));border-radius:999px;background:var(--paper);font-size:14px;font-family:inherit;color:var(--ink);margin:0 32px 16px}.catalog-page input[type=search]:focus{outline:2px solid var(--ink);outline-offset:2px}.catalog-page .pill{background:transparent;border:1px solid var(--rule, color-mix(in srgb, var(--ink) 12%, transparent));padding:6px 14px;border-radius:999px;font-family:var(--font-mono, "Geist Mono", ui-monospace, monospace);font-size:11px;letter-spacing:.04em;color:var(--ink-soft);cursor:pointer;transition:background .12s,color .12s,border-color .12s}.catalog-page .pill:hover{background:var(--paper-2, color-mix(in srgb, var(--paper) 94%, var(--ink) 6%));color:var(--ink)}.catalog-page .pill.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.catalog-page .catalog-grid{padding:24px 32px 0;min-height:360px}.catalog-page .catalog-grid-row{padding-bottom:16px}.catalog-page .catalog-empty{padding:48px 0;text-align:center;color:var(--ink-soft, #45413a);font-size:14px}.catalog-page .component-card{display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--paper);border:1px solid var(--rule, color-mix(in srgb, var(--ink) 12%, transparent));border-radius:12px;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .12s,transform .12s}.catalog-page .component-card:hover{border-color:var(--ink)}.catalog-page .component-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.catalog-page .component-card-preview{display:flex;align-items:center;justify-content:center;height:96px;background:var(--paper-2, color-mix(in srgb, var(--paper) 94%, var(--ink) 6%));border-radius:8px;overflow:hidden}.catalog-page .component-card-glyph{font-family:var(--font-display, var(--font-serif, "Instrument Serif", Georgia, serif));font-size:32px;color:var(--component-accent, var(--ink-3));letter-spacing:-.02em}.catalog-page .component-card--with-demo .component-card-preview{background:transparent}.catalog-page .component-card-header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.catalog-page .component-card-header h4{font-size:15px;font-weight:500;letter-spacing:-.01em;margin:0;color:var(--ink);display:flex;align-items:center;gap:6px}.catalog-page .category-dot{display:inline-block;width:8px;height:8px;border-radius:50%}.catalog-page .variant-count{font-family:var(--font-mono, "Geist Mono", ui-monospace, monospace);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3, var(--ink-soft))}.catalog-page .component-package{font-family:var(--font-mono, "Geist Mono", ui-monospace, monospace);font-size:11px;letter-spacing:.04em;color:var(--ink-3, var(--ink-soft))}.catalog-page .component-desc{font-size:12.5px;line-height:1.5;color:var(--ink-2, var(--ink));margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.catalog-page .component-card-footer{display:flex;justify-content:space-between;font-family:var(--font-mono, "Geist Mono", ui-monospace, monospace);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3, var(--ink-soft));padding-top:8px;border-top:1px solid var(--rule-soft, color-mix(in srgb, var(--ink) 8%, transparent))}.catalog-page .component-dialog-backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 65%,transparent);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}.catalog-page .component-dialog{background:var(--paper);border-radius:16px;max-width:880px;width:100%;max-height:80vh;overflow-y:auto;padding:32px 40px;position:relative}.catalog-page .dialog-close{position:absolute;top:20px;right:24px;background:transparent;border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font-family:var(--font-mono, "Geist Mono", ui-monospace, monospace);font-size:11px;letter-spacing:.04em;cursor:pointer}.catalog-page .component-dialog-grid{display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:768px){.catalog-page .component-dialog-grid{grid-template-columns:1fr 1fr}}.catalog-page .component-dialog h3{font-family:var(--font-display, var(--font-serif, "Instrument Serif", Georgia, serif));font-size:28px;margin:0 0 12px}.catalog-page .project-focus{font-family:var(--font-mono, "Geist Mono", ui-monospace, monospace);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}.catalog-page .component-detail-list{margin:16px 0 0;display:flex;flex-direction:column;gap:8px;font-size:13px}.catalog-page .component-detail-list dt{font-family:var(--font-mono, "Geist Mono", ui-monospace, monospace);font-size:11px;color:var(--ink-3);margin:0}.catalog-page .component-detail-list dd{margin:0;color:var(--ink-2)}@media(max-width:640px){.catalog-page-hero,.catalog-page input[type=search],.catalog-page .matrix-controls,.catalog-page .catalog-grid{padding-left:16px;padding-right:16px}.catalog-page input[type=search],.catalog-page .matrix-controls{margin-left:16px;margin-right:16px}}