@layer components{.dw-gel{--gel:linear-gradient(#fff3f8 0%, #ffd8e8 18%, #f8a9ca 50%, #f29cc0 80%, #f6b0cd 100%);--gel-bd:#7a1d45;isolation:isolate;height:var(--gel-h,48px);padding:0 calc(var(--gel-h,48px) * .46) 1px;border:1px solid var(--gel-bd);background:var(--gel);color:#141413;font-size:var(--gel-fs,17px);letter-spacing:-.02em;white-space:nowrap;text-shadow:0 2px 2px #fffc;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;gap:.5em;font-weight:500;line-height:1;transition:transform .14s cubic-bezier(.2,.7,.2,1),filter .15s,opacity .2s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 10px 24px #1414131f}.dw-gel>*{z-index:2;position:relative}.dw-gel svg{flex-shrink:0;width:1.05em;height:1.05em}.dw-gel:before{content:"";border-radius:inherit;pointer-events:none;mix-blend-mode:screen;position:absolute;inset:0;box-shadow:inset 0 -15px 2px -12px #ffffff40}.dw-gel:after{content:"";border-radius:inherit;pointer-events:none;mix-blend-mode:color-burn;position:absolute;inset:0;box-shadow:inset 0 -8px 0 4px #b3b3b3}.dw-gel:hover{filter:brightness(1.04)saturate(1.06)}.dw-gel:active{transform:scale(.97)}.dw-gel:focus-visible{outline-offset:3px;outline:2px solid #141413}.dw-gel .dw-gel-gloss{z-index:1;pointer-events:none;background:linear-gradient(#fff,#ffffffc7 50%,#fff3);border-radius:999px;height:min(12px,26%);position:absolute;top:3px;left:12px;right:12px;-webkit-mask-image:linear-gradient(90deg,#0000,#000 9% 91%,#0000);mask-image:linear-gradient(90deg,#0000,#000 9% 91%,#0000)}.dw-gel.is-round{width:var(--gel-h,48px);padding:0}.dw-gel.is-round .dw-gel-gloss{left:22%;right:22%}.dw-gel.is-ghost{--gel:linear-gradient(#fff 0%, #fdfbf6 40%, #eee9de 100%);--gel-bd:#a19b8f}.dw-gel.is-dark{--gel:linear-gradient(#4b4a46 0%, #2b2a28 30%, #151514 70%, #1f1e1c 100%);--gel-bd:#000;color:#fff;text-shadow:0 -1px #0006}.dw-gel.is-dark:after{mix-blend-mode:normal;box-shadow:inset 0 -10px 10px -8px #00000080}.dw-gel.is-dark .dw-gel-gloss{opacity:.35}.dw-gel:disabled,.dw-gel[aria-disabled=true]{opacity:.55;cursor:default;filter:none;transform:none}.dw-stk{--peel:16px;--spring:cubic-bezier(.34, 1.4, .64, 1);rotate:var(--r,0deg);filter:drop-shadow(0 1px 1px #14141333)drop-shadow(0 5px 9px #14141324);transition:rotate .35s var(--spring), translate .35s var(--spring), scale .14s ease;-webkit-tap-highlight-color:transparent;flex-shrink:0;display:inline-flex;position:relative}.dw-stk-face{clip-path:polygon(0 0,100% 0,100% 0,100% 100%,0 100%);transition:clip-path .35s var(--spring);border:3px solid #fff;align-items:center;gap:8px;display:inline-flex}.dw-stk-flap{width:var(--peel);height:var(--peel);pointer-events:none;filter:drop-shadow(-1px 2px 1.5px #14141338);transform-origin:100% 0;transition:transform .35s var(--spring);position:absolute;top:0;right:0;transform:scale(0)}.dw-stk-flap:before{content:"";clip-path:polygon(0 0,100% 100%,0 100%);background:linear-gradient(225deg,#fff 0%,#f4efe4 55%,#ddd4c2 100%);border-bottom-left-radius:5px;position:absolute;inset:0}@media (hover:hover){.dw-stk.is-peel:hover{translate:0 -2px;rotate:calc(var(--r,0deg) + 1.5deg)}.dw-stk.is-peel:hover .dw-stk-face{clip-path:polygon(0 0, calc(100% - var(--peel)) 0, 100% var(--peel), 100% 100%, 0 100%)}.dw-stk.is-peel:hover .dw-stk-flap{transform:none}}.dw-stk.is-peel:focus-visible .dw-stk-face{clip-path:polygon(0 0, calc(100% - var(--peel)) 0, 100% var(--peel), 100% 100%, 0 100%)}.dw-stk.is-peel:focus-visible .dw-stk-flap{transform:none}.dw-stk:active{scale:.97}.dw-stk.is-flat{rotate:none}.dw-stk:focus-visible{outline:none}.dw-stk:focus-visible .dw-stk-face{outline-offset:2px;outline:2px solid #141413}@media (prefers-reduced-motion:reduce){.dw-gel,.dw-stk,.dw-stk-face,.dw-stk-flap{transition:none}.dw-gel:active,.dw-stk:active{transform:scale(1)}}.dw-stk.is-quiet{filter:drop-shadow(0 1px .5px #14141338)}.dw-stk-float{animation:6.5s ease-in-out infinite alternate dw-stk-float}@keyframes dw-stk-float{0%{transform:translateY(-3px)}to{transform:translateY(3px)}}@media (prefers-reduced-motion:reduce){.dw-stk-float{animation:none}}.dw-bevel{background:linear-gradient(#fffefb 0%,#fdfaf3 100%);box-shadow:inset 0 1px #fff,inset 0 -1px #1414130d,0 0 0 1px #14141321,0 1.5px 0 1px #14141312,0 18px 36px -18px #14141361}}
