.clip-path-studio{--clip-accent:#17a6a1;align-items:start}.clip-path-studio>.card{border-radius:10px;box-shadow:none}.clip-path-studio>.card>h2{border-bottom:1px solid var(--border);padding-bottom:12px;letter-spacing:-.01em}.clip-preview-actions,.clip-toolbar{display:flex;flex-wrap:wrap;gap:8px}.clip-transform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.clip-transform-grid button{min-height:38px;border:1px solid var(--border);border-radius:6px;background:color-mix(in srgb,var(--surface) 84%,#64748b);padding:7px;font-size:11px;font-weight:600;color:var(--ink)}.clip-transform-grid button:hover{border-color:var(--clip-accent);background:color-mix(in srgb,var(--surface) 88%,var(--clip-accent))}.clip-point-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px}.clip-point-strip button{display:grid;width:30px;height:30px;flex:0 0 auto;place-items:center;border:1px solid var(--border);border-radius:50%;background:var(--surface);font:600 11px ui-monospace,monospace;color:var(--muted)}.clip-point-strip button[aria-pressed=true]{border-color:var(--clip-accent);background:var(--clip-accent);color:white}.clip-link{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}.clip-link input{width:16px;height:16px;accent-color:var(--clip-accent)}.clip-preview-shell{position:relative;min-height:260px;max-height:570px;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--surface) 82%,#64748b);isolation:isolate}.clip-preview-grid{position:absolute;inset:0;background-color:#d9e0e7;background-image:linear-gradient(45deg,#b8c2cc 25%,transparent 0),linear-gradient(-45deg,#b8c2cc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#b8c2cc 0),linear-gradient(-45deg,transparent 75%,#b8c2cc 0);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;opacity:0;transition:opacity .18s}.dark .clip-preview-grid{filter:brightness(.55)}.clip-preview-grid.is-visible{opacity:1}.clip-preview-fill{position:absolute;inset:0;background-position:50%;background-size:cover;background-repeat:no-repeat}.clip-point-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;overflow:visible}.clip-point-canvas g{outline:none}.clip-point-canvas circle{fill:#fff;stroke:#102332;stroke-width:.8;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 2px #0008)}.clip-point-canvas g:focus circle,.clip-point-canvas g:hover circle{fill:#fff6a1;stroke:var(--clip-accent);stroke-width:1.5}.clip-point-canvas text{fill:#102332;font-size:3.4px;font-weight:700;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:.5px}.clip-path-studio input[type=color]{min-height:42px;padding:3px;border:1px solid var(--border);border-radius:6px;background:var(--surface)}@media(max-width:540px){.clip-transform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.clip-preview-shell{min-height:230px}.clip-preview-actions button{flex:1}}@media(prefers-reduced-motion:reduce){.clip-preview-grid{transition:none}}