:root{--sticker-rotation: 30deg;--sticker-padding: 10px;--peel-hover: 30%;--peel-active: 40%;--peel-easing: power3.out;--peel-hover-easing: power2.out;--clip-start: calc(-1 * var(--sticker-padding));--clip-end: calc(100% + var(--sticker-padding));--shadow-opacity: .6;--lighting-intensity: .1;--peel-angle: 0deg}.sticker-container{position:relative;transform:rotate(var(--peel-angle));transform-origin:center}.sticker-container *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.sticker-main{clip-path:polygon(var(--clip-start) var(--clip-start),var(--clip-end) var(--clip-start),var(--clip-end) var(--clip-end),var(--clip-start) var(--clip-end));transition:clip-path .6s cubic-bezier(.16,1,.3,1),filter .6s cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 4px 6px rgba(0,0,0,var(--shadow-opacity)))}.sticker-main>*{transform:rotate(calc(-1 * var(--peel-angle)))}.sticker-lighting{filter:url(#pointLight)}.sticker-container:hover .sticker-main,.sticker-container.touch-active .sticker-main{clip-path:polygon(var(--clip-start) var(--peel-hover),var(--clip-end) var(--peel-hover),var(--clip-end) var(--clip-end),var(--clip-start) var(--clip-end));filter:drop-shadow(0 12px 16px rgba(0,0,0,calc(var(--shadow-opacity) * .8)))}.sticker-container:active .sticker-main{clip-path:polygon(var(--clip-start) var(--peel-active),var(--clip-end) var(--peel-active),var(--clip-end) var(--clip-end),var(--clip-start) var(--clip-end));filter:drop-shadow(0 16px 20px rgba(0,0,0,calc(var(--shadow-opacity) * .7)))}.flap{position:absolute;width:100%;height:100%;left:0;top:calc(-100% - var(--sticker-padding) - var(--sticker-padding));clip-path:polygon(var(--clip-start) var(--clip-start),var(--clip-end) var(--clip-start),var(--clip-end) var(--clip-start),var(--clip-start) var(--clip-start));transform:translateY(0) scaleY(-1);transition:transform .6s cubic-bezier(.16,1,.3,1),clip-path .6s cubic-bezier(.16,1,.3,1);pointer-events:none}.flap>*{transform:rotate(calc(-1 * var(--peel-angle)))}.sticker-container:hover .flap,.sticker-container.touch-active .flap{clip-path:polygon(var(--clip-start) var(--clip-start),var(--clip-end) var(--clip-start),var(--clip-end) var(--peel-hover),var(--clip-start) var(--peel-hover));transform:translateY(calc(2 * var(--peel-hover) + 2 * var(--sticker-padding) - 1px)) scaleY(-1)}.sticker-container:active .flap{clip-path:polygon(var(--clip-start) var(--clip-start),var(--clip-end) var(--clip-start),var(--clip-end) var(--peel-active),var(--clip-start) var(--peel-active));transform:translateY(calc(2 * var(--peel-active) + 2 * var(--sticker-padding) - 1px)) scaleY(-1)}.flap-lighting{filter:url(#pointLightFlipped)}.flap-image{filter:url(#expandAndFill)}.draggable{position:absolute;cursor:grab;-webkit-transform:translateZ(0);transform:translateZ(0)}.draggable:active{cursor:grabbing}@media(hover:none)and (pointer:coarse){.draggable{cursor:default}.sticker-container{touch-action:none}}.sticker-image,.flap-image{width:var(--sticker-size, 200px)}.sticker-main,.flap{will-change:clip-path,transform}.sticker-ripple{position:absolute;border-radius:50%;background:#fff9;pointer-events:none;z-index:10}