.tool[data-tool=css-clip-path-generator] .stage{background:var(--c-surface-2);border-radius:var(--r-md);padding:var(--space-4);place-items:center;margin-block-end:var(--space-3);display:grid}.tool[data-tool=css-clip-path-generator] .box{aspect-ratio:1;inline-size:min(100%,18rem);position:relative}.tool[data-tool=css-clip-path-generator] .shape{background:linear-gradient(135deg, var(--c-primary), #af002d);position:absolute;inset:0}.tool[data-tool=css-clip-path-generator] .handle{cursor:grab;touch-action:none;background:0 0;border:0;block-size:2.5rem;inline-size:2.5rem;margin:-1.25rem 0 0 -1.25rem;padding:0;position:absolute}.tool[data-tool=css-clip-path-generator] .handle:after{content:"";background:#fff;border:2px solid #111;border-radius:50%;position:absolute;inset:.65rem;box-shadow:0 0 0 1px #fff}.tool[data-tool=css-clip-path-generator] .handle.active{cursor:grabbing}.tool[data-tool=css-clip-path-generator] .handle:focus-visible:after{outline:3px solid var(--c-primary);outline-offset:2px}.tool[data-tool=css-clip-path-generator] .big-output{overflow-wrap:anywhere}
