.image-edit-demo{min-width:0}.image-edit-options{gap:8px;margin-bottom:14px;display:flex}.image-edit-options button{color:#a8a9af;cursor:pointer;background:#1a1b1d;border:1px solid #343538;border-radius:999px;padding:9px 16px;font-size:14px;transition:color .16s ease-out,border-color .16s ease-out}.image-edit-options button[aria-pressed=true]{color:#fff;border-color:var(--primary);background:#302019}.image-edit-options button:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.image-edit-canvas{aspect-ratio:16/9;isolation:isolate;background:#171717;border-radius:24px;width:100%;margin:0;position:relative;overflow:hidden}.image-edit-canvas>img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.image-edit-canvas>.image-edit-after{clip-path:inset(0 0 0 var(--edit-split));opacity:0}.image-edit-canvas>.image-edit-after[data-active=true]{opacity:1}.image-edit-label{color:#fff;pointer-events:none;background:#0e0f10b8;border-radius:999px;padding:6px 11px;font-size:12px;line-height:1.4;position:absolute;top:16px}.image-edit-before-label{left:16px}.image-edit-after-label{right:16px}.image-edit-divider{inset:0 auto 0 var(--edit-split);pointer-events:none;background:#fff;width:2px;position:absolute;transform:translate(-50%);box-shadow:0 0 8px #00000038}.image-edit-divider span{color:#171717;background:#fff;border-radius:50%;place-items:center;width:42px;height:42px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 16px #0003}.image-edit-canvas input{opacity:0;cursor:ew-resize;touch-action:pan-y;width:100%;height:100%;margin:0;position:absolute;inset:0}.image-edit-canvas:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:4px}.image-edit-instruction{color:#c6c7cd;align-items:center;gap:9px;margin-top:14px;font-size:14px;line-height:1.5;display:flex}.image-edit-instruction svg{color:var(--link);flex:none}@media (max-width:767px){.image-edit-canvas{border-radius:18px}.image-edit-label{padding:5px 8px;font-size:11px;top:10px}.image-edit-before-label{left:10px}.image-edit-after-label{right:10px}.image-edit-options button{padding:8px 13px;font-size:13px}.image-edit-instruction{font-size:13px}}@media (prefers-reduced-motion:reduce){.image-edit-options button{transition:none}}
