.ClipPathMaker-module__tW0jwG__clip-workspace{max-width:1200px;color:var(--gray-dark);grid-template-columns:60% minmax(0,1fr);gap:2rem;margin:0 auto;font-family:system-ui,-apple-system,sans-serif;display:grid}.ClipPathMaker-module__tW0jwG__left-column{z-index:20;flex-direction:column;gap:1.5rem;min-width:0;display:flex;position:sticky;top:2rem}.ClipPathMaker-module__tW0jwG__canvas-section{border:1px solid var(--gray-light);background:#fff;border-radius:6px;flex:1;justify-content:center;align-items:center;width:100%;padding:3.5rem;display:flex;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -2px #0000000d}.ClipPathMaker-module__tW0jwG__canvas-wrapper{aspect-ratio:1;touch-action:none;width:100%;max-width:320px;position:relative;overflow:visible!important}.ClipPathMaker-module__tW0jwG__canvas-background{background-color:var(--color-light);background-image:radial-gradient(var(--gray-light)1px,transparent 1px);border:1px solid var(--color-light);z-index:0;background-size:20px 20px;position:absolute;inset:0;box-shadow:inset 0 2px 10px #00000005}.ClipPathMaker-module__tW0jwG__clip-target{z-index:1;border-radius:8px;transition:background .3s;position:absolute;inset:0}.ClipPathMaker-module__tW0jwG__wireframe-overlay{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.ClipPathMaker-module__tW0jwG__wireframe-overlay polygon,.ClipPathMaker-module__tW0jwG__wireframe-overlay circle,.ClipPathMaker-module__tW0jwG__wireframe-overlay ellipse,.ClipPathMaker-module__tW0jwG__wireframe-overlay rect{fill:#ffffff1a;stroke:var(--color-primary);stroke-width:.5px;stroke-dasharray:2;transition:all .1s linear}.ClipPathMaker-module__tW0jwG__node-handle{border:3px solid var(--color-primary);cursor:grab;background:#fff;border-radius:50%;width:18px;height:18px;transition:border-color .2s,transform .1s,box-shadow .2s;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 6px #00000026}.ClipPathMaker-module__tW0jwG__node-handle:hover{transform:translate(-50%,-50%)scale(1.2);box-shadow:0 4px 12px #f6ae3b4d}.ClipPathMaker-module__tW0jwG__node-handle.ClipPathMaker-module__tW0jwG__dragging{cursor:grabbing;border-color:var(--color-dark);transform:translate(-50%,-50%)scale(1.1);box-shadow:0 0 0 4px #f6bb3b33}.ClipPathMaker-module__tW0jwG__node-tooltip{background:var(--gray-dark);color:#fff;pointer-events:none;white-space:nowrap;border-radius:4px;padding:4px 8px;font-size:.75rem;font-weight:600;position:absolute;top:-35px;left:50%;transform:translate(-50%);box-shadow:0 4px 6px #0000001a}.ClipPathMaker-module__tW0jwG__css-output-container{background:#0d1117;border:1px solid #30363d;border-radius:6px;width:100%;overflow:hidden;box-shadow:0 4px 6px -1px #0003}.ClipPathMaker-module__tW0jwG__css-output-header{background:#161b22;border-bottom:1px solid #30363d;justify-content:space-between;align-items:center;padding:.75rem 1.25rem;display:flex}.ClipPathMaker-module__tW0jwG__css-output-title{color:#8b949e;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:700}.ClipPathMaker-module__tW0jwG__css-copy-btn{color:#c9d1d9;cursor:pointer;background:#21262d;border:1px solid #363b42;border-radius:6px;padding:.35rem .85rem;font-size:.75rem;font-weight:600;transition:all .2s}.ClipPathMaker-module__tW0jwG__css-copy-btn:hover{color:#fff;background:#30363d;border-color:#8b949e}.ClipPathMaker-module__tW0jwG__css-copy-btn.ClipPathMaker-module__tW0jwG__copied{color:#fff;background:#238636;border-color:#2ea043}.ClipPathMaker-module__tW0jwG__css-output-body{padding:1.25rem;font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:.95rem;line-height:1.6}.ClipPathMaker-module__tW0jwG__scrollable-code{overflow-x:auto}.ClipPathMaker-module__tW0jwG__scrollable-code::-webkit-scrollbar{height:8px}.ClipPathMaker-module__tW0jwG__scrollable-code::-webkit-scrollbar-track{background:#0d1117}.ClipPathMaker-module__tW0jwG__scrollable-code::-webkit-scrollbar-thumb{background:#30363d;border-radius:4px}.ClipPathMaker-module__tW0jwG__scrollable-code::-webkit-scrollbar-thumb:hover{background:#484f58}.ClipPathMaker-module__tW0jwG__code-prop{color:#79c0ff}.ClipPathMaker-module__tW0jwG__code-func{color:#d2a8ff}.ClipPathMaker-module__tW0jwG__code-num{color:#7ee787}.ClipPathMaker-module__tW0jwG__code-keyword{color:#ff7b72;font-style:normal}.ClipPathMaker-module__tW0jwG__code-punct{color:#c9d1d9}.ClipPathMaker-module__tW0jwG__properties-panel{flex-direction:column;gap:1.5rem;min-width:0;display:flex}.ClipPathMaker-module__tW0jwG__panel-group{border:1px solid var(--gray-light);background:#fff;border-radius:6px;padding:1rem 1.5rem;box-shadow:0 4px 6px -1px #0000000d}.ClipPathMaker-module__tW0jwG__panel-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.ClipPathMaker-module__tW0jwG__panel-title{text-transform:uppercase;letter-spacing:.05em;color:var(--gray-medium);margin:0;font-size:.85rem;font-weight:700}.ClipPathMaker-module__tW0jwG__shape-count{color:var(--gray-medium);background:var(--color-light);border-radius:99px;padding:.25rem .5rem;font-size:.75rem;font-weight:600}.ClipPathMaker-module__tW0jwG__preset-grid.ClipPathMaker-module__tW0jwG__scrollable-grid{grid-template-columns:repeat(auto-fill,minmax(75px,1fr));align-content:start;gap:.75rem;max-height:360px;padding-right:.5rem;display:grid;overflow-y:auto}.ClipPathMaker-module__tW0jwG__scrollable-grid::-webkit-scrollbar{width:6px}.ClipPathMaker-module__tW0jwG__scrollable-grid::-webkit-scrollbar-track{background:#f9f6f1;border-radius:10px}.ClipPathMaker-module__tW0jwG__scrollable-grid::-webkit-scrollbar-thumb{background:#e1d9cb;border:1px solid #f9f6f1;border-radius:10px}.ClipPathMaker-module__tW0jwG__scrollable-grid::-webkit-scrollbar-thumb:hover{background:#b8ae94}.ClipPathMaker-module__tW0jwG__preset-card{cursor:pointer;background:#fcfbf8;border:2px solid #0000;border-radius:5px;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem .25rem;transition:all .2s;display:flex}.ClipPathMaker-module__tW0jwG__preset-card:hover{background:#f9f6f1}.ClipPathMaker-module__tW0jwG__preset-card.ClipPathMaker-module__tW0jwG__active{background:var(--color-light);border-color:#fee6bf}.ClipPathMaker-module__tW0jwG__preset-visual{justify-content:center;align-items:center;width:36px;height:36px;display:flex}.ClipPathMaker-module__tW0jwG__preset-shape{background-color:var(--gray-medium);width:100%;height:100%;transition:background-color .2s}.ClipPathMaker-module__tW0jwG__preset-card.ClipPathMaker-module__tW0jwG__active .ClipPathMaker-module__tW0jwG__preset-shape{background-color:var(--color-primary)}.ClipPathMaker-module__tW0jwG__preset-name{color:var(--gray-dark);text-align:center;white-space:nowrap;text-overflow:ellipsis;width:100%;font-size:.65rem;font-weight:500;overflow:hidden}.ClipPathMaker-module__tW0jwG__preset-card.ClipPathMaker-module__tW0jwG__active .ClipPathMaker-module__tW0jwG__preset-name{color:var(--color-dark);font-weight:600}.ClipPathMaker-module__tW0jwG__bg-selector-grid{flex-wrap:wrap;gap:.75rem;padding-top:12px;display:flex}.ClipPathMaker-module__tW0jwG__bg-swatch{border:2px solid var(--gray-light);cursor:pointer;border-radius:50%;width:42px;height:42px;padding:0;transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:0 2px 4px #0000000d}.ClipPathMaker-module__tW0jwG__bg-swatch:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.ClipPathMaker-module__tW0jwG__bg-swatch.ClipPathMaker-module__tW0jwG__active{border-color:var(--gray-dark);transform:scale(1.1);box-shadow:0 4px 12px #00000026}@media (max-width:900px){.ClipPathMaker-module__tW0jwG__clip-workspace{grid-template-columns:1fr;gap:1.5rem}.ClipPathMaker-module__tW0jwG__left-column{width:100%;position:static}.ClipPathMaker-module__tW0jwG__canvas-section{padding:1.5rem}.ClipPathMaker-module__tW0jwG__node-handle{width:24px;height:24px}.ClipPathMaker-module__tW0jwG__preset-grid.ClipPathMaker-module__tW0jwG__scrollable-grid{max-height:250px}}