.peppe-shadow-demo{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-24);justify-content:center;align-items:center;display:flex}.peppe-shadow-demo__card{justify-content:center;align-items:center;width:240px;height:88px;display:flex}.peppe-shadow-demo__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-shadow-demo--raised .peppe-shadow-demo__card{border-radius:var(--radius-xl);box-shadow:var(--shadow-raised);background:linear-gradient(to bottom, var(--color-surface-raised-top), var(--color-surface-raised-bottom)) padding-box, linear-gradient(to bottom, var(--border-raised-top), var(--border-raised-bottom)) border-box;border:1px solid #0000}.peppe-shadow-demo--floating .peppe-shadow-demo__card{border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);background:var(--color-surface-floating)}.peppe-shadow-demo--carved .peppe-shadow-demo__card{border-radius:var(--radius-md);box-shadow:var(--shadow-carved);background:linear-gradient(to bottom, var(--color-surface-carved), var(--color-surface-carved)) padding-box, linear-gradient(to bottom, var(--border-carved-top), var(--border-carved-bottom)) border-box;border:1px solid #0000}.peppe-shadow-demo--tecla,.peppe-shadow-demo--tecla-sm{min-height:120px}.peppe-tecla{background:linear-gradient(180deg, var(--color-tecla-socket-overlay-top), var(--color-tecla-socket-overlay-bottom));border-radius:var(--radius-tecla-socket);box-shadow:var(--shadow-tecla);cursor:pointer;font-family:var(--type-family-sans);-webkit-tap-highlight-color:transparent;border:0;padding:6px;line-height:1;display:inline-block}.peppe-tecla:focus-visible{outline:var(--focus-ring-width) solid var(--color-functional-info);outline-offset:var(--focus-ring-offset)}.peppe-tecla--sm{border-radius:var(--radius-tecla-md-socket);box-shadow:var(--shadow-tecla-sm);padding:5px}.peppe-tecla__rim{background:var(--color-accent-rim);border-radius:var(--radius-tecla-rim);border-top:1px solid var(--color-accent-rim-border-top);border-bottom:1px solid var(--color-accent-rim-border-bottom);transition:padding var(--duration-micro) ease, box-shadow var(--duration-micro) ease;padding:2px;display:block}.peppe-tecla--sm .peppe-tecla__rim{border-radius:var(--radius-tecla-md-rim);padding:2px}@property --tecla-cap-top{syntax:"<color>";inherits:false;initial-value:#f7692b}@property --tecla-cap-bottom{syntax:"<color>";inherits:false;initial-value:#fa4c00}.peppe-tecla__cap{isolation:isolate;--tecla-cap-top:var(--color-accent-amber-top);--tecla-cap-bottom:var(--color-accent-amber-bottom);background:linear-gradient(180deg, var(--tecla-cap-top), var(--tecla-cap-bottom));border-radius:var(--radius-tecla-cap);font-family:var(--type-family-sans);font-size:var(--type-size-md);font-weight:var(--type-weight-medium);color:#fff;letter-spacing:var(--type-tracking-normal);text-align:center;transition:--tecla-cap-top var(--duration-hover) ease-in-out, --tecla-cap-bottom var(--duration-hover) ease-in-out, box-shadow var(--duration-micro) ease, color var(--duration-micro) ease;justify-content:center;align-items:center;padding:16px 24px;line-height:1.2;display:flex;position:relative;box-shadow:inset 0 1px #fff6,inset 0 -2px #5f000040}.peppe-tecla__cap:before{content:"";border-radius:inherit;background:linear-gradient(180deg, var(--color-accent-amber-border-top), var(--color-accent-amber-border-bottom));-webkit-mask-composite:xor;pointer-events:none;z-index:-1;transition:background var(--duration-micro) ease;padding:2px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.peppe-tecla__cap>*{z-index:1;position:relative}.peppe-tecla--sm .peppe-tecla__cap{border-radius:var(--radius-tecla-md-cap);padding:10px 18px;font-size:13px}.peppe-tecla:hover .peppe-tecla__cap,.peppe-tecla--hover .peppe-tecla__cap{--tecla-cap-top:var(--color-accent-amber-hover-top);--tecla-cap-bottom:var(--color-accent-amber-hover-bottom)}.peppe-tecla:active:not(:disabled):not([aria-disabled=true]):not(.peppe-tecla--disabled) .peppe-tecla__rim,.peppe-tecla--pressed:not(.peppe-tecla--disabled) .peppe-tecla__rim{padding-top:4px;padding-bottom:0;box-shadow:inset 0 2px 3px #00000040}.peppe-tecla--sm:active:not(:disabled):not([aria-disabled=true]):not(.peppe-tecla--disabled) .peppe-tecla__rim,.peppe-tecla--sm.peppe-tecla--pressed:not(.peppe-tecla--disabled) .peppe-tecla__rim{padding-top:4px;padding-bottom:0}.peppe-tecla:active:not(:disabled):not([aria-disabled=true]):not(.peppe-tecla--disabled) .peppe-tecla__cap,.peppe-tecla--pressed:not(.peppe-tecla--disabled) .peppe-tecla__cap{box-shadow:var(--shadow-tecla-pressed)}.peppe-tecla:active:not(:disabled):not([aria-disabled=true]):not(.peppe-tecla--disabled) .peppe-tecla__cap:before,.peppe-tecla--pressed:not(.peppe-tecla--disabled) .peppe-tecla__cap:before{background:linear-gradient(#5f000059,#ff4e0099)}.peppe-tecla:disabled,.peppe-tecla[aria-disabled=true],.peppe-tecla--disabled{cursor:not-allowed}.peppe-tecla:disabled .peppe-tecla__cap,.peppe-tecla[aria-disabled=true] .peppe-tecla__cap,.peppe-tecla--disabled .peppe-tecla__cap{background:linear-gradient(180deg, var(--color-accent-amber-disabled-top), var(--color-accent-amber-disabled-bottom));color:#ffffffb3}.peppe-tecla:disabled .peppe-tecla__cap:before,.peppe-tecla[aria-disabled=true] .peppe-tecla__cap:before,.peppe-tecla--disabled .peppe-tecla__cap:before{background:linear-gradient(#ffffff4d,#00000026)}.peppe-tecla:disabled .peppe-tecla__rim,.peppe-tecla[aria-disabled=true] .peppe-tecla__rim,.peppe-tecla--disabled .peppe-tecla__rim{background:linear-gradient(to bottom, var(--color-ink-primary), var(--color-ink-primary)) padding-box, linear-gradient(to bottom, var(--color-accent-rim-border-top), var(--color-accent-rim-border-bottom)) border-box}.peppe-tecla[data-state=loading]{cursor:not-allowed;pointer-events:none}.peppe-tecla[data-state=loading] .peppe-tecla__cap,.peppe-tecla[data-state=loading]:disabled .peppe-tecla__cap,.peppe-tecla[data-state=loading][aria-disabled=true] .peppe-tecla__cap{--tecla-cap-top:var(--color-accent-amber-top);--tecla-cap-bottom:var(--color-accent-amber-bottom);color:#fff;min-height:calc(16px + calc(var(--type-size-md) * 1.2) + 16px)}.peppe-tecla[data-state=loading] .peppe-tecla__cap:before,.peppe-tecla[data-state=loading]:disabled .peppe-tecla__cap:before,.peppe-tecla[data-state=loading][aria-disabled=true] .peppe-tecla__cap:before{background:linear-gradient(180deg, var(--color-accent-amber-border-top), var(--color-accent-amber-border-bottom))}.peppe-tecla[data-state=loading] .peppe-tecla__rim,.peppe-tecla[data-state=loading]:disabled .peppe-tecla__rim,.peppe-tecla[data-state=loading][aria-disabled=true] .peppe-tecla__rim{background:var(--color-accent-rim)}.peppe-tecla[data-state=loading] .peppe-tecla__label{display:none}.peppe-tecla__spinner{width:var(--icon-size-md);height:var(--icon-size-md);flex-shrink:0;display:none}.peppe-tecla[data-state=loading] .peppe-tecla__spinner{animation:.8s linear infinite peppe-spin;display:block}.peppe-tecla--sm[data-state=loading] .peppe-tecla__cap{min-height:35.6px}.peppe-shadow-catalog{margin:var(--space-32) 0;border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);background:var(--color-surface-base);padding:0;list-style:none;overflow:hidden}.peppe-shadow-catalog__row{padding:var(--space-24) var(--space-32);border-bottom:1px solid var(--color-surface-divider);align-items:center;gap:var(--space-32);flex-direction:row;display:flex}.peppe-shadow-catalog__row:last-child{border-bottom:none}.peppe-shadow-catalog__meta{gap:var(--space-4);flex-direction:column;flex:1;min-width:0;display:flex}.peppe-shadow-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-shadow-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-shadow-catalog__value{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-regular);color:var(--color-ink-tertiary);line-height:var(--type-leading-snug);word-break:break-word}.peppe-shadow-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-shadow-catalog__usage{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)}.peppe-shadow-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)}.peppe-shadow-catalog__sample{flex-shrink:0;width:64px;height:64px}.peppe-shadow-catalog__sample--raised{border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);background:linear-gradient(to bottom, var(--color-surface-raised-top), var(--color-surface-raised-bottom)) padding-box, linear-gradient(to bottom, var(--border-raised-top), var(--border-raised-bottom)) border-box;border:1px solid #0000}.peppe-shadow-catalog__sample--floating{border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);background:var(--color-surface-floating)}.peppe-shadow-catalog__sample--carved{border-radius:var(--radius-md);box-shadow:var(--shadow-carved);background:linear-gradient(to bottom, var(--color-surface-carved), var(--color-surface-carved)) padding-box, linear-gradient(to bottom, var(--border-carved-top), var(--border-carved-bottom)) border-box;border:1px solid #0000}.peppe-shadow-catalog__sample--tecla,.peppe-shadow-catalog__sample--tecla-sm,.peppe-shadow-catalog__sample--tecla-pressed{border-radius:var(--radius-tecla-socket);background:linear-gradient(180deg, var(--color-tecla-socket-overlay-top) 0%, var(--color-tecla-socket-overlay-bottom) 100%) padding-box, linear-gradient(to bottom, var(--color-surface-raised-bottom), var(--color-surface-raised-bottom)) padding-box, linear-gradient(to bottom, var(--border-raised-top), var(--border-raised-bottom)) border-box;box-shadow:var(--shadow-tecla);border:2px solid #0000;position:relative}.peppe-shadow-catalog__sample--tecla:before,.peppe-shadow-catalog__sample--tecla-sm:before,.peppe-shadow-catalog__sample--tecla-pressed:before{content:"";border-radius:var(--radius-tecla-rim);background:linear-gradient(to bottom, var(--color-accent-rim), var(--color-accent-rim)) padding-box, linear-gradient(to bottom, var(--color-accent-rim-border-top), var(--color-accent-rim-border-bottom)) border-box;z-index:0;border:2px solid #0000;position:absolute;inset:2px}.peppe-shadow-catalog__sample--tecla:after,.peppe-shadow-catalog__sample--tecla-sm:after,.peppe-shadow-catalog__sample--tecla-pressed:after{content:"";border-radius:var(--radius-tecla-cap);background:linear-gradient(180deg, var(--color-accent-amber-top), var(--color-accent-amber-bottom)) padding-box, linear-gradient(180deg, var(--color-accent-amber-border-top), var(--color-accent-amber-border-bottom)) border-box;z-index:1;border:2px solid #0000;position:absolute;inset:6px}.peppe-shadow-catalog__sample--tecla-sm{box-shadow:var(--shadow-tecla-sm)}.peppe-shadow-catalog__sample--tecla-pressed{box-shadow:none}.peppe-shadow-catalog__sample--tecla-pressed:after{background:linear-gradient(180deg, var(--color-accent-amber-top), var(--color-accent-amber-bottom));box-shadow:var(--shadow-tecla-pressed);border:none;top:8px}.peppe-shadow-contrast-grid{gap:var(--space-32);margin-top:var(--space-32);grid-template-columns:1fr 1fr;display:grid}.peppe-shadow-contrast{border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);padding:var(--space-32);background:var(--color-surface-base);gap:var(--space-24);flex-direction:column;display:flex}.peppe-shadow-contrast__heading{font-family:var(--type-family-sans);font-size:var(--type-size-sm);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:0}.peppe-shadow-contrast__sample{padding:var(--space-32);border-radius:var(--radius-md);background:var(--color-surface-base);justify-content:center;align-items:center;display:flex}.peppe-shadow-contrast__card{border-radius:var(--radius-lg);justify-content:center;align-items:center;width:192px;height:80px;display:flex}.peppe-shadow-contrast__card-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)}.peppe-shadow-contrast__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-shadow-contrast__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-shadow-contrast__card--accepted{box-shadow:var(--shadow-raised);background:linear-gradient(to bottom, var(--color-surface-raised-top), var(--color-surface-raised-bottom)) padding-box, linear-gradient(to bottom, var(--border-raised-top), var(--border-raised-bottom)) border-box;border:1px solid #0000}.peppe-shadow-contrast__card--accepted .peppe-shadow-contrast__card-label{color:var(--color-ink-tertiary)}.peppe-shadow-contrast__sample--rejected-bg,.peppe-shadow-contrast--rejected .peppe-shadow-contrast__sample{background:#e0e0e0}.peppe-shadow-contrast__card--rejected{background:#e0e0e0;border:1px solid #d8d8d8;box-shadow:-6px -6px 12px #ffffffe6,6px 6px 12px #0000001a}.peppe-shadow-contrast__card--rejected .peppe-shadow-contrast__card-label{color:#888}.peppe-shadow-diagram{margin-top:var(--space-24);margin-bottom:0}.peppe-shadow-diagram__svg{border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);background:var(--color-surface-base);width:100%;max-width:320px;height:auto;display:block}.peppe-shadow-diagram__caption{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-regular);line-height:var(--type-leading-normal);color:var(--color-ink-tertiary);margin-top:var(--space-8);display:block}@media (max-width:1024px){.peppe-shadow-demo{padding:var(--space-32)}.peppe-shadow-catalog__row{padding:var(--space-24);gap:var(--space-24)}.peppe-shadow-contrast{padding:var(--space-24);gap:var(--space-16)}.peppe-shadow-contrast__sample{padding:var(--space-24)}}@media (max-width:768px){.peppe-shadow-demo{padding:var(--space-24)}.peppe-shadow-catalog__row{padding:var(--space-16);align-items:flex-start;gap:var(--space-16);flex-direction:column}.peppe-shadow-catalog__sample{align-self:flex-start}.peppe-shadow-contrast-grid{gap:var(--space-24);grid-template-columns:1fr}.peppe-shadow-contrast,.peppe-shadow-contrast__sample{padding:var(--space-16)}.peppe-shadow-contrast__card{width:160px;height:64px}.peppe-shadow-diagram__svg{max-width:none}}