.clip-path-generator{touch-action:none}.clip-path-generator .bg-grid-pattern{background-color:#fff;background-image:none;overflow:visible;position:relative}.clip-path-generator .grid-snap-point{width:6px;height:6px;border-radius:50%;background-color:hsla(0,0%,100%,.4);position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:1}.clip-path-generator .draggable-point{width:18px;height:18px;border-radius:50%;background-color:rgba(239,71,170,.9);position:absolute;transform:translate(-50%,-50%);cursor:grab;box-shadow:0 0 0 2px hsla(0,0%,100%,.8),0 0 0 3px rgba(0,0,0,.1);z-index:30;transition:transform .1s ease-in-out,box-shadow .1s ease-in-out,background-color .2s ease;touch-action:none;display:flex;align-items:center;justify-content:center;will-change:transform,left,top}.clip-path-generator .draggable-point:hover{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 0 2px hsla(0,0%,100%,.9),0 0 6px 2px rgba(239,71,170,.5);z-index:40}.clip-path-generator .draggable-point:active{cursor:grabbing;background-color:rgba(249,115,22,.9);transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 0 2px #fff,0 0 8px 3px rgba(249,115,22,.6)}.clip-path-generator .snap-line{position:absolute;pointer-events:none;transition:opacity .2s ease-in-out}.clip-path-generator .snap-line-horizontal{width:100%;height:1px;background-color:rgba(59,130,246,.5)}.clip-path-generator .snap-line-vertical{height:100%;width:1px;background-color:rgba(59,130,246,.5)}.clip-path-generator .snap-line-circular{border:1px dashed rgba(59,130,246,.5);border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.clip-path-generator .guide-line{position:absolute;pointer-events:none;z-index:15;transition:opacity .2s ease;overflow:visible}.clip-path-generator .guide-horizontal{width:100%;height:1px;background-color:rgba(99,102,241,.4);box-shadow:none;left:0;right:0}.clip-path-generator .guide-vertical{height:100%;width:1px;background-color:rgba(99,102,241,.4);box-shadow:none;top:0;bottom:0}.clip-path-generator .guide-circular{border:1px solid rgba(99,102,241,.3);border-radius:50%;position:absolute;box-shadow:none;pointer-events:none;z-index:10;transform:translateZ(0);will-change:top,left,width,height}.clip-path-generator .guide-point{width:5px;height:5px;background-color:rgba(99,102,241,.7);box-shadow:none;opacity:.7}.clip-path-generator .angle-indicator{position:absolute;width:24px;height:24px;pointer-events:none;z-index:15;border:1px solid rgba(59,130,246,.8);transform:translate(-50%,-50%) rotate(45deg)}.clip-path-generator .circle-circle-intersection,.clip-path-generator .circle-line-intersection,.clip-path-generator .guide-intersection{position:absolute;width:10px;height:10px;background-color:rgba(56,189,248,.8);border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:28;box-shadow:0 0 5px rgba(56,189,248,.7)}.clip-path-generator .circle-circle-intersection.guide-intersection-snapped,.clip-path-generator .circle-line-intersection.guide-intersection-snapped,.clip-path-generator .guide-intersection-snapped{width:12px;height:12px;background-color:rgba(6,182,212,.9);box-shadow:0 0 8px rgba(6,182,212,.8);z-index:30}.clip-path-generator .guide-snapped{animation:clip-path-generator-guide-pulse 1.5s infinite}.clip-path-generator .guide-horizontal.guide-snapped{background-color:rgba(239,71,170,.4);box-shadow:0 0 3px rgba(239,71,170,.3);z-index:19;height:1px}.clip-path-generator .guide-vertical.guide-snapped{background-color:rgba(239,71,170,.4);box-shadow:0 0 3px rgba(239,71,170,.3);z-index:19;width:1px}.clip-path-generator .guide-circular.guide-snapped{border-color:rgba(239,71,170,.4);border-width:1px;box-shadow:0 0 3px rgba(239,71,170,.3);z-index:18}.clip-path-generator .angle-guide.guide-snapped{border-top:2px solid rgba(239,71,170,.9);box-shadow:0 0 5px rgba(239,71,170,.7);z-index:16}@keyframes clip-path-generator-guide-pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.clip-path-generator .guide-intersections{position:absolute;width:100%;height:100%;top:0;left:0;overflow:visible;pointer-events:none}.clip-path-generator .guide-point{position:absolute;width:6px;height:6px;border-radius:50%;background-color:rgba(99,102,241,.9);transform:translate(-50%,-50%);z-index:16;pointer-events:none;box-shadow:0 0 4px rgba(99,102,241,.9)}.clip-path-generator .guides-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:14;pointer-events:none;overflow:visible!important}.clip-path-generator .guide-snapped .guide-point{background-color:#ef47aa;box-shadow:0 0 5px rgba(239,71,170,.9);width:7px;height:7px;opacity:1}.clip-path-generator .guide-circle-center{position:absolute;width:3px;height:3px;border-radius:50%;background-color:rgba(167,139,250,.5);transform:translate(-50%,-50%);z-index:11;pointer-events:none}.clip-path-generator .angle-guide,.clip-path-generator .angle-guide.angle-135,.clip-path-generator .angle-guide.angle-225,.clip-path-generator .angle-guide.angle-315,.clip-path-generator .angle-guide.angle-45,.clip-path-generator .angle-guide.guide-snapped,.clip-path-generator .diagonal-intersection{display:none}@keyframes clip-path-generator-diagonal-pulse{0%,50%,to{transform:translate(-50%,-50%) scale(0)}}.clip-path-generator .canvas-container{position:relative;overflow:hidden;z-index:1;height:500px!important;min-height:500px!important;max-height:500px!important;box-sizing:border-box}.clip-path-generator .canvas-container>*{overflow:visible}.clip-path-generator .canvas-container .bg-grid-pattern{position:absolute;inset:0;overflow:visible;z-index:1}.clip-path-generator .canvas-container .guides-container{z-index:14;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible!important}.clip-path-generator .guide-intersection-snapped{background-color:rgba(239,71,170,.5);width:7px;height:7px;border:1px solid #fff;box-shadow:0 0 4px rgba(239,71,170,.4);z-index:26}.clip-path-generator .diagonal-intersection{display:none}.clip-path-generator .guide-intersection-circle{position:absolute;width:8px;height:8px;background-color:rgba(99,102,241,.7);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:20;border:1px solid #fff;box-shadow:0 0 4px rgba(99,102,241,.6)}.clip-path-generator .guide-intersection-circle.guide-intersection-snapped{background-color:rgba(239,71,170,.5);width:7px;height:7px;border:1px solid #fff;box-shadow:0 0 4px rgba(239,71,170,.4);z-index:26}.clip-path-generator .polygon-point-snap-indicator{position:absolute;width:24px;height:24px;border-radius:50%;border:2px dashed rgba(255,69,0,.8);background-color:rgba(255,69,0,.1);transform:translate(-50%,-50%);pointer-events:none;z-index:15}.clip-path-generator .point-snap-highlight{box-shadow:0 0 0 4px rgba(255,69,0,.5),0 0 12px 5px rgba(255,69,0,.3);z-index:35;transform:translate(-50%,-50%) scale(1.2)}.clip-path-generator .guide-line.guide-angle{position:absolute;transform-origin:center;height:1px;background-color:rgba(99,102,241,.5);width:200%;left:-50%;transform:rotate(var(--angle-deg,45deg));pointer-events:none;z-index:14}.clip-path-generator .guide-line.guide-angle.guide-snapped{background-color:rgba(239,71,170,.9);box-shadow:0 0 7px rgba(239,71,170,.8);z-index:18}.clip-path-generator .original-position-indicator{position:absolute;width:8px;height:8px;background-color:rgba(255,192,0,.4);border:1px solid hsla(0,0%,100%,.7);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:20;box-shadow:0 0 3px rgba(255,192,0,.3)}.clip-path-generator .original-position-area{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(239,71,170,.6);width:20px;height:20px;pointer-events:none;z-index:5}@media (pointer:coarse){.clip-path-generator .draggable-point{width:24px;height:24px;box-shadow:0 0 0 3px hsla(0,0%,100%,.8),0 0 0 4px rgba(0,0,0,.1)}.clip-path-generator .draggable-point:active{transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 0 3px #fff,0 0 10px 5px rgba(249,115,22,.6)}}