:root{font-family:var( --ds-font-family-sans, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif );color:var(--ds-color-fg-primary, #212121);background:var(--ds-color-bg-page, #fafafa)}body{margin:0;background:var(--ds-color-bg-page, #fafafa)}#app{margin:0;max-width:none;min-height:100vh}.catalog{display:grid;grid-template-columns:minmax(240px,280px) minmax(0,1fr);min-height:100vh}.catalog__nav{background:var(--ds-color-bg-card, #ffffff);border-right:1px solid var(--ds-color-border-default, #d4d4d8);padding:32px 24px 48px;display:flex;flex-direction:column;gap:32px;box-sizing:border-box}.catalog__brand h1{margin:0;font-size:var(--ds-text-base-sizes-5, 20px);line-height:var(--ds-height-h-7, 28px);font-weight:var(--ds-font-weight-semibold, 600);color:var(--ds-color-fg-primary, #212121)}.catalog__brand p{margin:8px 0 0;color:var(--ds-color-fg-secondary, #71717a);font-size:var(--ds-text-base-sizes-2, 14px);line-height:var(--ds-line-height-md, 20px)}.catalog__links{display:flex;flex-direction:column;gap:24px;margin:0;padding:0;list-style:none}.catalog__section{display:flex;flex-direction:column;gap:4px}.catalog__section-title{font-size:11px;font-weight:var(--ds-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.5px;color:var(--ds-color-components-input-fg-placeholder, #a1a1aa);margin:0 0 8px;padding:0 16px}.catalog__section-items{display:flex;flex-direction:column;gap:2px}.catalog__link{display:flex;align-items:center;gap:var(--ds-space-2, 8px);padding:var(--ds-space-2, 8px) var(--ds-space-4, 16px);border-radius:var(--ds-radius-1-5, 6px);color:var(--ds-color-fg-primary, #212121);text-decoration:none;font-weight:var(--ds-font-weight-regular, 400);transition:background-color .15s ease,color .15s ease}.catalog__link:hover{background:var(--ds-color-bg-primaryAlt, #eef4ff);color:var(--ds-color-fg-brand, #2050f6)}.catalog__link--active{background:var(--ds-color-components-button-secondary-bg-active, #cfe1ff);color:var(--ds-color-components-button-ghost-fg-active, #182c90);font-weight:var(--ds-font-weight-medium, 500)}.catalog__link-label{font-size:var(--ds-text-base-sizes-2, 14px);line-height:var(--ds-line-height-md, 20px)}.catalog__footer{margin-top:auto;padding-top:var(--ds-space-4, 16px);border-top:1px solid var(--ds-color-border-default, #d4d4d8);font-size:var(--ds-text-base-sizes-1, 12px);color:var(--ds-color-components-input-fg-placeholder, #a1a1aa)}.catalog__main{background:var(--ds-color-bg-page, #fafafa);padding:var(--ds-space-12, 48px);box-sizing:border-box}.catalog__header h2{margin:0;font-size:var(--ds-text-base-sizes-8, 36px);line-height:44px;font-weight:var(--ds-font-weight-semibold, 600);color:var(--ds-color-fg-primary, #212121)}.catalog__header p{margin:var(--ds-space-3, 12px) 0 0;color:var(--ds-color-fg-secondary, #71717a);font-size:var(--ds-text-base-sizes-3, 16px);line-height:var(--ds-line-height-lg, 24px);max-width:560px}.catalog__content{margin-top:var(--ds-space-8, 32px)}.stack{display:grid;gap:var(--ds-space-6, 24px)}.card{background:var(--ds-color-components-card-bg, #ffffff);border-radius:var(--ds-radius-4, 16px);padding:var(--ds-space-6, 24px);box-shadow:var(--ds-shadow-lg, 0 10px 24px rgba(15, 23, 42, .08));border:1px solid var(--ds-color-components-card-border, #e4e4e7)}.card--full{grid-column:1 / -1}.card__title{margin:0 0 var(--ds-space-4, 16px);font-size:var(--ds-text-base-sizes-5, 20px);font-weight:var(--ds-font-weight-semibold, 600);line-height:var(--ds-height-h-7, 28px);color:var(--ds-color-fg-primary, #212121)}.type-sample{font-size:var(--ds-text-base-sizes-4, 18px);line-height:26px;margin:0;color:var(--ds-color-fg-primary, #212121)}.type-sample--display{font-size:var(--ds-text-base-sizes-8, 36px);line-height:44px;font-weight:var(--ds-font-weight-semibold, 600)}.type-meta{margin-top:var(--ds-space-3, 12px);font-size:var(--ds-text-base-sizes-2, 14px);color:var(--ds-color-fg-secondary, #71717a)}.horizontal{display:flex;gap:var(--ds-space-4, 16px);flex-wrap:wrap}ds-button::part(button){font-family:inherit}ds-color-swatch,ds-color-palette{--ds-color-swatch-border: var(--ds-color-border-default, #d4d4d8)}@media (max-width: 920px){.catalog{grid-template-columns:1fr}.catalog__nav{position:sticky;top:0;border-right:none;border-bottom:1px solid var(--ds-color-border-default, #d4d4d8);flex-direction:column;gap:var(--ds-space-4, 16px)}.catalog__main{padding:var(--ds-space-8, 32px) var(--ds-space-6, 24px) var(--ds-space-12, 48px)}}