.peppe-component-layer__grid{gap:var(--space-24);margin-top:var(--space-32);grid-template-columns:repeat(3,1fr);display:grid}.peppe-component-card{color:inherit;background:linear-gradient(to bottom, var(--color-surface-raised-top), var(--color-surface-raised-bottom));border:1px solid;border-color:var(--border-raised-top) var(--border-raised-bottom) var(--border-raised-bottom) var(--border-raised-top);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);cursor:pointer;transition:box-shadow var(--duration-panel) ease, transform var(--duration-panel) ease;flex-direction:column;text-decoration:none;display:flex;overflow:hidden}.peppe-component-card:hover{box-shadow:var(--shadow-floating);transform:translateY(-2px)}.peppe-component-card:focus-visible{outline:var(--focus-ring-width) solid var(--color-functional-info);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-lg)}.peppe-component-card__preview{background:var(--color-surface-base);border-bottom:1px solid var(--color-surface-divider);min-height:var(--space-128);padding:var(--space-16);justify-content:center;align-items:center;display:flex;overflow:hidden}.peppe-component-card__meta{align-items:flex-start;gap:var(--space-4);padding:var(--space-16);flex-direction:column;display:flex}.peppe-component-card__name{font-family:var(--type-family-sans);font-size:var(--type-size-lg);font-weight:var(--type-weight-medium);line-height:var(--type-leading-snug);color:var(--color-ink-primary);margin:0}.peppe-component-card__layer{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-medium);letter-spacing:var(--type-tracking-loose);text-transform:uppercase;line-height:var(--type-leading-tight);color:var(--color-ink-tertiary);white-space:nowrap;flex-shrink:0}.peppe-component-card__preview-demo{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}.peppe-component-card__preview-demo--grid{justify-content:center;align-items:center;gap:var(--space-8);flex-direction:row}.peppe-component-card__preview-demo--hairline{flex-direction:column;align-items:flex-start;width:100%}.peppe-component-card__preview-demo--placeholder{background:var(--color-surface-carved);border:1px dashed var(--color-surface-divider);border-radius:var(--radius-md);min-height:var(--space-64);justify-content:center;align-items:center;width:100%;display:flex}.peppe-component-card__preview-search{align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-16);background:var(--color-surface-carved);border:1px solid var(--color-surface-divider);border-radius:var(--radius-md);box-shadow:var(--shadow-carved);display:inline-flex}.peppe-component-card__preview-label{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-medium);color:var(--color-ink-secondary);line-height:var(--type-leading-snug)}.peppe-component-card__preview-label--placeholder{color:var(--color-ink-tertiary)}.peppe-component-card__preview-placeholder-text{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-medium);letter-spacing:var(--type-tracking-loose);text-transform:uppercase;color:var(--color-ink-tertiary);line-height:var(--type-leading-tight)}@media (max-width:1024px){.peppe-component-layer__grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.peppe-component-layer__grid{gap:var(--space-16);margin-top:var(--space-24);grid-template-columns:1fr}.peppe-component-card__name{font-size:var(--type-size-md)}}