.az-demo{width:100%;min-width:0}.az-demo-image{aspect-ratio:1;background:#fff7e9;border-radius:8px;width:100%;position:relative;overflow:hidden}.az-demo-image>img,.az-demo-image>canvas{object-fit:contain;width:100%;height:100%;display:block}.az-demo-image>canvas{position:absolute;inset:0}.az-demo-before,.az-demo-after{color:#444;background:#ffffffd9;border-radius:5px;padding:5px 10px;font-size:12px;font-weight:600;position:absolute;top:16px}.az-demo-before{left:16px}.az-demo-after{right:16px}.az-demo-divider{pointer-events:none;border-left:2px solid #fff;position:absolute;top:0;bottom:0}.az-demo-divider svg{color:#555;background:#fff;border:1px solid #eee;border-radius:50%;width:32px;height:32px;padding:6px;position:absolute;top:50%;left:-17px;box-shadow:0 2px 8px #0002}.az-demo-image>input{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.az-demo-image:focus-within{outline-offset:3px;outline:2px solid #c2410c}.az-demo figcaption{color:#666;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:14px 0 0;font-size:12px;display:flex}.az-demo-swatches{align-items:center;gap:6px;display:flex}.az-demo-swatches i{border-radius:50%;width:14px;height:14px}.az-logo-demo{border-radius:8px;width:100%;height:auto;display:block}.az-demo-checker{background-color:#fff;background-image:linear-gradient(45deg,#e7e7e7 25%,#0000 25%),linear-gradient(-45deg,#e7e7e7 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e7e7e7 75%),linear-gradient(-45deg,#0000 75%,#e7e7e7 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}