.peppe-space-catalog{margin:var(--space-32) 0 var(--space-32) 0;border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);background:var(--color-surface-base);flex-direction:column;gap:0;padding:0;list-style:none;display:flex;overflow:hidden}.peppe-space-catalog__row{padding:var(--space-16) var(--space-24);border-bottom:1px solid var(--color-surface-divider);align-items:center;gap:var(--space-16);grid-template-columns:120px 1fr 64px;display:grid}.peppe-space-catalog__row:last-child{border-bottom:none}.peppe-space-catalog__token{font-family:var(--type-family-sans);font-size:var(--type-size-sm);font-weight:var(--type-weight-medium);color:var(--color-ink-primary);line-height:var(--type-leading-snug)}.peppe-space-catalog__token code{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-medium);color:var(--color-ink-tertiary);background:var(--color-surface-carved);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--color-surface-divider)}.peppe-space-catalog__value{font-family:var(--type-family-sans);font-size:var(--type-size-sm);font-weight:var(--type-weight-regular);color:var(--color-ink-secondary);line-height:var(--type-leading-snug);text-align:right}.peppe-space-catalog__value code{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-medium);color:var(--color-ink-tertiary);background:var(--color-surface-carved);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--color-surface-divider)}.peppe-space-catalog__usage{padding-top:var(--space-8);font-family:var(--type-family-sans);font-size:var(--type-size-sm);font-weight:var(--type-weight-regular);color:var(--color-ink-secondary);line-height:var(--type-leading-normal);grid-column:1/-1;max-width:65ch;margin:0}.peppe-space-catalog__usage code{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-medium);color:var(--color-ink-tertiary);background:var(--color-surface-carved);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--color-surface-divider);font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-medium);background:var(--color-surface-carved);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--color-surface-divider)}.peppe-space-catalog__sample-wrap{scrollbar-width:thin;scrollbar-color:var(--color-surface-divider) transparent;overflow-x:auto}.peppe-space-catalog__sample-wrap:focus-visible{outline:var(--focus-ring-width) solid var(--color-functional-info);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}.peppe-space-catalog__sample-wrap::-webkit-scrollbar{height:var(--space-4)}.peppe-space-catalog__sample-wrap::-webkit-scrollbar-thumb{background:var(--color-surface-divider);border-radius:var(--radius-sm)}.peppe-space-sample{height:var(--space-16);background:color-mix(in srgb, var(--color-ink-primary) 20%, transparent);border-radius:var(--radius-sm);flex-shrink:0;display:block}.peppe-space-sample--space-2{width:var(--space-2)}.peppe-space-sample--space-4{width:var(--space-4)}.peppe-space-sample--space-8{width:var(--space-8)}.peppe-space-sample--space-12{width:var(--space-12)}.peppe-space-sample--space-16{width:var(--space-16)}.peppe-space-sample--space-24{width:var(--space-24)}.peppe-space-sample--space-32{width:var(--space-32)}.peppe-space-sample--space-48{width:var(--space-48)}.peppe-space-sample--space-64{width:var(--space-64)}.peppe-space-sample--space-96{width:var(--space-96)}.peppe-space-sample--space-128{width:var(--space-128)}.peppe-space-demo{gap:var(--space-32);margin-top:var(--space-32);grid-template-columns:1fr 1fr;align-items:start;display:grid}.peppe-space-demo__card{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);padding:var(--space-32);gap:var(--space-16);flex-direction:column;display:flex}.peppe-space-demo__title{font-family:var(--type-family-sans);font-size:var(--type-size-lg);font-weight:var(--type-weight-medium);line-height:var(--type-leading-snug);letter-spacing:var(--type-tracking-normal);color:var(--color-ink-primary);margin:0}.peppe-space-demo__body{font-family:var(--type-family-sans);font-size:var(--type-size-md);font-weight:var(--type-weight-regular);line-height:var(--type-leading-normal);color:var(--color-ink-secondary);margin:0}.peppe-space-demo__actions{padding-top:var(--space-8);border-top:1px solid var(--color-surface-divider)}.peppe-space-demo__actions span{font-family:var(--type-family-sans);font-size:var(--type-size-sm);font-weight:var(--type-weight-medium);line-height:var(--type-leading-snug);color:var(--color-functional-info);letter-spacing:var(--type-tracking-normal)}.peppe-space-demo__legend{background:var(--color-surface-base);border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);padding:var(--space-24);gap:var(--space-16);flex-direction:column;margin:0;display:flex}.peppe-space-demo__legend-item{align-items:center;gap:var(--space-8);grid-template-columns:96px 1fr;display:grid}.peppe-space-demo__legend-item dt{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-snug)}.peppe-space-demo__legend-item dd{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-regular);color:var(--color-ink-secondary);line-height:var(--type-leading-snug);margin:0}.peppe-space-demo__legend-item dd code{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-medium);color:var(--color-ink-tertiary);background:var(--color-surface-carved);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--color-surface-divider)}@media (max-width:1024px){.peppe-space-catalog__row{padding:var(--space-24)}.peppe-space-demo{gap:var(--space-24);grid-template-columns:1fr}}@media (max-width:768px){.peppe-space-catalog__row{padding:var(--space-16);gap:var(--space-8)}.peppe-space-catalog__usage{max-width:none}.peppe-space-demo{gap:var(--space-16)}.peppe-space-demo__card{padding:var(--space-24);gap:var(--space-16)}.peppe-space-demo__legend{padding:var(--space-16);gap:var(--space-8)}.peppe-space-demo__legend-item{grid-template-columns:80px 1fr}}