.peppe-component{padding-bottom:var(--space-64)}.peppe-component__dodont{gap:var(--space-24);margin-top:var(--space-32);grid-template-columns:1fr 1fr;display:grid}.peppe-component__do,.peppe-component__dont{border-radius:var(--radius-lg);padding:var(--space-24);background:var(--color-surface-base);border:1px solid var(--color-surface-divider);gap:var(--space-16);flex-direction:column;display:flex}.peppe-component__do{border-top:3px solid var(--color-functional-success)}.peppe-component__dont{border-top:3px solid var(--color-functional-error)}.peppe-component__dodont-header{align-items:center;gap:var(--space-8);display:flex}.peppe-component__dodont-icon{width:var(--icon-size-sm);height:var(--icon-size-sm);flex-shrink:0}.peppe-component__do .peppe-component__dodont-icon{color:var(--color-functional-success)}.peppe-component__dont .peppe-component__dodont-icon{color:var(--color-functional-error)}.peppe-component__dodont-title{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-snug);margin:0}.peppe-component__do .peppe-component__dodont-title{color:var(--color-functional-success)}.peppe-component__dont .peppe-component__dodont-title{color:var(--color-functional-error)}.peppe-component__dodont-sample{padding:var(--space-24);background:var(--color-surface-base);border:1px solid var(--color-surface-divider);border-radius:var(--radius-md);justify-content:center;align-items:center;min-height:80px;display:flex}.peppe-component__dodont-desc{font-family:var(--type-family-sans);font-size:var(--type-size-sm);font-weight:var(--type-weight-regular);line-height:var(--type-leading-normal);color:var(--color-ink-secondary);margin:0}.peppe-component__dodont-desc 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-component__markup{background:var(--color-surface-carved);border:1px solid var(--color-surface-divider);border-radius:var(--radius-md);padding:var(--space-24);margin-top:var(--space-24);font-family:ui-monospace,SF Mono,Consolas,Liberation Mono,monospace;font-size:var(--type-size-sm);font-weight:var(--type-weight-regular);line-height:var(--type-leading-normal);color:var(--color-ink-secondary);white-space:pre;tab-size:2;display:block;overflow-x:auto}.peppe-component__variants-grid,.peppe-component__states-grid{gap:var(--space-24);margin-top:var(--space-32);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));display:grid}.peppe-component__variant-item,.peppe-component__state-item{gap:var(--space-12);flex-direction:column;align-items:flex-start;display:flex}.peppe-component__sample-wrap{width:100%;padding:var(--space-24);background:var(--color-surface-base);border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);justify-content:center;align-items:center;min-height:96px;display:flex}.peppe-component__sample-label{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-component__anatomy{padding:var(--space-48);background:var(--color-surface-base);border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);margin-top:var(--space-32);justify-content:center;align-items:center;display:flex}.peppe-component__storybook-link{align-items:center;gap:var(--space-4);margin-top:var(--space-16);font-family:var(--type-family-sans);font-size:var(--type-size-sm);font-weight:var(--type-weight-medium);color:var(--color-ink-primary);text-underline-offset:3px;text-decoration:underline;display:inline-flex}.peppe-component__storybook-link:hover,.peppe-component__storybook-link:focus-visible{color:var(--color-functional-info)}@media (max-width:768px){.peppe-component__dodont{grid-template-columns:1fr}.peppe-component__variants-grid,.peppe-component__states-grid{gap:var(--space-16);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.peppe-component__anatomy{padding:var(--space-32)}.peppe-component__markup{font-size:var(--type-size-xs);padding:var(--space-16)}}.peppe-chip__tones-grid{gap:var(--space-24);margin-top:var(--space-32);grid-template-columns:repeat(4,1fr);display:grid}.peppe-chip__tone-group{gap:var(--space-8);flex-direction:column;align-items:flex-start;display:flex}@media (max-width:1024px){.peppe-chip__tones-grid{gap:var(--space-16);grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.peppe-chip__tones-grid{gap:var(--space-16);grid-template-columns:1fr}}.peppe-hairline-list-demo{border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);background:var(--color-surface-base);margin-top:var(--space-32);margin-bottom:0;margin-left:0;margin-right:0;padding:0;list-style:none;overflow:hidden}.peppe-hairline-list-demo__item{padding:var(--space-16) var(--space-24);border-bottom:1px solid var(--color-surface-divider);justify-content:space-between;align-items:center;display:flex}.peppe-hairline-list-demo__item:last-child{border-bottom:none}.peppe-hairline-list-demo__label{font-family:var(--type-family-sans);font-size:var(--type-size-md);font-weight:var(--type-weight-regular);color:var(--color-ink-primary);line-height:var(--type-leading-snug)}.peppe-hairline-list-demo__value{font-family:var(--type-family-sans);font-size:var(--type-size-md);font-weight:var(--type-weight-medium);color:var(--color-ink-primary);line-height:var(--type-leading-snug)}.peppe-hairline-list-demo__sub{font-family:var(--type-family-sans);font-size:var(--type-size-sm);font-weight:var(--type-weight-regular);color:var(--color-ink-tertiary);line-height:var(--type-leading-snug);margin-top:var(--space-2);display:block}.peppe-hairline-section-demo{border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);background:var(--color-surface-base);margin-top:var(--space-32);padding:var(--space-24);overflow:hidden}.peppe-hairline-section-demo__block-label{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);margin-bottom:var(--space-8)}.peppe-hairline-section-demo__block-content{font-family:var(--type-family-sans);font-size:var(--type-size-md);font-weight:var(--type-weight-regular);color:var(--color-ink-secondary);line-height:var(--type-leading-normal)}.peppe-hairline-section-demo .peppe-hairline{margin:var(--space-24) 0}@media (max-width:768px){.peppe-hairline-list-demo__item{padding:var(--space-12) var(--space-16)}.peppe-hairline-section-demo{padding:var(--space-16)}}.peppe-search-field__icon-leading{width:var(--icon-size-sm);height:var(--icon-size-sm);color:var(--color-ink-tertiary);pointer-events:none;flex-shrink:0}.peppe-search-field__icon-trailing{width:var(--icon-size-sm);height:var(--icon-size-sm);cursor:pointer;color:var(--color-ink-tertiary);border-radius:var(--radius-sm);transition:color var(--duration-micro) ease;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.peppe-search-field__icon-trailing svg{width:var(--icon-size-sm);height:var(--icon-size-sm);flex-shrink:0}.peppe-search-field__icon-trailing:hover{color:var(--color-ink-primary)}.peppe-search-field__icon-trailing:focus-visible{outline:var(--focus-ring-width) solid var(--color-functional-info);outline-offset:var(--focus-ring-offset)}.peppe-search-field--focused-demo{background:linear-gradient(to bottom, var(--color-surface-base), var(--color-surface-base)) padding-box, linear-gradient(to bottom, var(--border-carved-top), var(--border-carved-bottom)) border-box;box-shadow:inset 0 0 0 1px var(--color-ink-primary), inset 0 4px 12px 0 #0000001a, inset 0 1px 2px 0 #0000000f}.peppe-search-field--raised-demo{background:var(--color-surface-raised-top);box-shadow:var(--shadow-raised);border-top:1px solid var(--border-raised-top);border-right:1px solid var(--border-raised-bottom);border-bottom:1px solid var(--border-raised-bottom);border-left:1px solid var(--border-raised-top)}.peppe-search-field__no-results-wrap{gap:var(--space-8);flex-direction:column;width:100%;display:flex}.peppe-sf-demo__no-results{font-family:var(--type-family-sans);font-size:var(--type-size-sm);font-weight:var(--type-weight-regular);line-height:var(--type-leading-normal);color:var(--color-ink-secondary);padding-left:var(--space-16);margin:0}.peppe-sf__states-grid{gap:var(--space-24);margin-top:var(--space-32);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.peppe-sf__states-grid .peppe-component__state-item{align-items:stretch}.peppe-sf__states-grid .peppe-component__sample-wrap{padding:var(--space-24);justify-content:stretch;align-items:flex-start}.peppe-sf__states-grid .peppe-search-field,.peppe-sf__states-grid .peppe-search-field__no-results-wrap{width:100%}@media (max-width:1024px){.peppe-sf__states-grid{gap:var(--space-16);grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}}@media (max-width:768px){.peppe-sf__states-grid{gap:var(--space-16);grid-template-columns:1fr}}.peppe-card__variants-grid{gap:var(--space-24);margin-top:var(--space-32);grid-template-columns:repeat(3,1fr);display:grid}.peppe-card__variants-grid .peppe-component__sample-wrap{min-height:240px;padding:var(--space-32);align-items:flex-start}.peppe-card__states-grid{gap:var(--space-24);margin-top:var(--space-32);grid-template-columns:repeat(2,1fr);display:grid}.peppe-card__states-grid .peppe-component__sample-wrap{min-height:200px;padding:var(--space-32);align-items:flex-start}.peppe-card__body-placeholder{font-family:var(--type-family-sans);font-size:var(--type-size-sm);font-weight:var(--type-weight-regular);line-height:var(--type-leading-normal);color:var(--color-ink-tertiary);margin:0}.peppe-card__sample-wrap--floating-bg{background:var(--color-surface-carved)!important}.peppe-card__sample-wrap--pending{align-items:center}.peppe-card__pending-note{font-family:var(--type-family-sans);font-size:var(--type-size-sm);font-weight:var(--type-weight-regular);line-height:var(--type-leading-normal);color:var(--color-ink-secondary);text-align:center;margin:0}.peppe-card__pending-note 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-card__dodont-demo{width:100%;max-width:240px}.peppe-card__dodont-input-demo{padding:var(--space-8) var(--space-16);background:var(--color-surface-carved);border:1px solid var(--color-surface-divider);border-radius:var(--radius-md);font-family:var(--type-family-sans);font-size:var(--type-size-sm);color:var(--color-ink-tertiary)}.peppe-card__dodont-input-demo--radius-sm{border-radius:var(--radius-sm)}@media (max-width:1024px){.peppe-card__variants-grid{gap:var(--space-16);grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.peppe-card__variants-grid,.peppe-card__states-grid{gap:var(--space-16);grid-template-columns:1fr}}.peppe-card-grid__sample-wrap--wide{padding:var(--space-32);background:var(--color-surface-base);border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);margin-top:var(--space-16)}.peppe-card-grid__sample-wrap--mid{padding:var(--space-32);background:var(--color-surface-base);border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);margin-top:var(--space-16);max-width:640px}.peppe-card-grid__sample-wrap--narrow{padding:var(--space-24);background:var(--color-surface-base);border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);margin-top:var(--space-16);max-width:360px}.peppe-card-grid__doc-section-label{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-snug);color:var(--color-ink-tertiary);margin-top:var(--space-32);display:block}.peppe-card-grid__states-doc{gap:var(--space-24);margin-top:var(--space-32);grid-template-columns:repeat(3,1fr);display:grid}.peppe-card-grid__states-doc .peppe-component__sample-wrap{min-height:200px;padding:var(--space-24);align-items:flex-start}.peppe-card-grid__dodont-demo{width:100%}.peppe-card-grid__dodont-demo--bad-gap{gap:15px}@media (max-width:1024px){.peppe-card-grid__states-doc{gap:var(--space-16);grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.peppe-card-grid__states-doc{gap:var(--space-16);grid-template-columns:1fr}.peppe-card-grid__sample-wrap--mid{max-width:100%}}.peppe-section-hero__doc-section-label{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);margin-top:var(--space-24);margin-bottom:var(--space-8)}.peppe-section-hero__sample-wrap{min-height:240px;padding:var(--space-48) var(--space-48) var(--space-32);align-items:flex-start}.peppe-section-hero__sample-wrap--lg{min-height:320px}.peppe-section-hero__sample-wrap .peppe-section-hero{width:100%;padding-top:0;padding-bottom:0}.peppe-section-hero--display-lg .peppe-section-hero__title{font-size:var(--type-size-display-lg)}.peppe-section-hero--dodont{width:100%;padding-top:0;padding-bottom:0}.peppe-section-hero--dodont .peppe-section-hero__title{font-size:var(--type-size-xl);margin-bottom:var(--space-8)}.peppe-section-hero--dodont .peppe-section-hero__subtitle{font-size:var(--type-size-md)}.peppe-section-hero__dodont-sample{min-height:120px;padding:var(--space-16);align-items:flex-start}.peppe-section-hero__dodont-sample--actions{min-height:80px;padding:var(--space-16);align-items:center}.peppe-section-hero__actions--dodont{gap:var(--space-8);flex-wrap:wrap}.peppe-section-hero__actions--bad{gap:var(--space-8)}@media (max-width:768px){.peppe-section-hero__sample-wrap{min-height:200px;padding:var(--space-32) var(--space-24) var(--space-24)}.peppe-section-hero__sample-wrap--lg{min-height:260px}.peppe-section-hero--dodont .peppe-section-hero__title{font-size:var(--type-size-xl)}}@media (max-width:480px){.peppe-section-hero__sample-wrap{padding:var(--space-24) var(--space-16) var(--space-16)}}