.peel{position:relative;opacity:0}.peel-ready{opacity:1}.peel-svg-clip-element{position:absolute;top:-10000px;left:-10000px;width:1px;height:1px;opacity:0}.peel-layer{position:absolute;z-index:1;width:100%;height:100%;inset:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left}.peel-top{background-color:#81afcb}.peel-back{background-color:#a0c7df}.peel-bottom{background-color:#688394}html{font:300 16px/1.3em Roboto,sans-serif;background-color:#302f30;background-color:#e7e5dd;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:Roboto Slab,serif}ul,ol{list-style:none;padding:0}#intro-peel{width:200px;height:200px}#intro-peel .peel-top{background:url(../../../images/texture-1.png) no-repeat;background-size:cover;text-indent:-10000px}#intro-peel .peel-back{background:url(../../../images/texture-2.png) no-repeat;background-size:cover}#intro-peel .peel-bottom{background:url(../../../images/texture-3.png) no-repeat;background-size:cover;line-height:1.3em;text-align:center;padding:55px 30px;color:#dedede;box-sizing:border-box;font-family:Roboto Slab}.peel{width:200px;height:200px}.tap-me{cursor:pointer;position:relative}.tap-me:after{content:"Tap!";position:absolute;top:70%;left:50%;transform:translate(-50%,-50%);z-index:1000;background-color:#ffffff4d;color:#00000080;font-size:13px;font-weight:700;padding:2px 12px;border-radius:2px;pointer-events:none;transition:opacity .1s linear}.tap-me.tapped:after{opacity:0}.tap-me.book:after{background-color:#d9d0c3}.tap-me.azure:after{background-color:#82bbd0}.peel-top,.peel-back,.peel-bottom{text-align:center}.peel-top{background-color:#86aecb}.peel-back{background-color:#b5bec5}.peel-bottom{color:#eaefe0;background-color:#555}.yellow .peel-top{background-color:#ddd87d}.yellow .peel-back{background-color:#eae69f}.purple .peel-top{background-color:#9e7698}.purple .peel-back{background-color:#d5b5d0}.azure .peel-top{background-color:#4ea0be}.azure .peel-back{background-color:#99bfcd}.aqua .peel-top{background-color:#409ca0}.aqua .peel-back{background-color:#7cb8af}.plum .peel-top{background-color:#b64a67}.plum .peel-back{background-color:#cd7e92}.heart .peel-top{background-color:#cd5454}.heart .peel-back{background-color:#ed8484}.peel.book{left:65px;width:130px;height:160px;box-shadow:0 1px 5px #00000080}.book .peel-top{background-color:#cabdab}.book .peel-top-shadow{box-shadow:0 1px 5px #00000080!important}.book .peel-back{background-color:#f2f2f2}.book .peel-bottom{background-color:#f2f2f2;color:#302f30}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial}}}h2,h3{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}h2{padding-block:calc(var(--spacing,.25rem)*3.5);font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)))}h3{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75/1.125)))}.peel-layer{justify-content:center;align-items:center;display:flex}:is(#static-examples,#dynamic-examples) .peel-layer{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)))}.demos{gap:calc(var(--spacing,.25rem)*6);display:grid}@media(min-width:64rem){.demos{grid-template-columns:repeat(2,minmax(0,1fr))}}.demos>div{border-radius:var(--radius-sm,.25rem);background-color:var(--color-neutral-50,oklch(98.5% 0 0));padding:calc(var(--spacing,.25rem)*3);flex-direction:column;display:flex}.demos>div>p{flex-grow:1}.peel{margin-inline:auto;margin-block:calc(var(--spacing,.25rem)*8)}@property --tw-font-weight{syntax:"*";inherits:false}