:root{--cpm-primary:var(--main-primary);--cpm-primary-light:#eef2ff;--cpm-text:#1e293b;--cpm-text-muted:#64748b;--cpm-bg:#fff;--cpm-bg-hover:#f8fafc;--cpm-bg-active:#eef2ff;--cpm-border:#e2e8f0;--cpm-border-hover:#cbd5e1;--cpm-shadow:0 1px 3px #00000014;--cpm-shadow-lg:0 4px 12px #0000001f;--cpm-bg-code:#f8fafc;--cpm-canvas-bg:#f1f5f9;--cpm-radius:.5rem;--cpm-radius-lg:.75rem;--cpm-handle-size:14px;--cpm-handle-color:var(--main-primary)}._cpm-container{gap:var(--main-space-8);grid-template-columns:1fr 1fr;align-items:start;max-width:1100px;margin:0 auto;display:grid}._cpm-column{gap:var(--main-space-5);flex-direction:column;display:flex}._cpm-column-right{top:var(--main-space-4);position:sticky}._cpm-section-label{font-size:var(--main-text-xs);color:var(--cpm-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}@media (max-width:900px){._cpm-container{gap:var(--main-space-6);grid-template-columns:1fr;max-width:600px}._cpm-column-left{order:2}._cpm-column-right{order:1;position:static}}@media (max-width:640px){._cpm-container{padding-left:var(--main-space-3);padding-right:var(--main-space-3);gap:var(--main-space-5)}}._cpm-canvas-card{background:var(--cpm-bg);border-radius:var(--cpm-radius-lg);padding:var(--main-space-5);box-shadow:var(--cpm-shadow);border-style:solid;border-width:1px;border-color:var(--cpm-border)}._cpm-canvas{aspect-ratio:4/3;background:var(--cpm-canvas-bg);border-radius:var(--cpm-radius);cursor:crosshair;min-height:300px;position:relative;overflow:hidden}._cpm-canvas-outside,._cpm-canvas-clip{background-color:#6366f1;background-position:50%;background-size:cover;position:absolute;top:0;bottom:0;left:0;right:0}._cpm-canvas-outside{opacity:.2;z-index:1;pointer-events:none}._cpm-canvas-clip{z-index:2;pointer-events:none}._cpm-canvas-grid{pointer-events:none;z-index:3;background-image:linear-gradient(#00000014 1px,#0000 1px),linear-gradient(90deg,#00000014 1px,#0000 1px);background-size:10% 10%;position:absolute;top:0;bottom:0;left:0;right:0}._cpm-canvas-grid--hidden{display:none}._cpm-handle{width:var(--cpm-handle-size);height:var(--cpm-handle-size);border-style:solid;border-width:2.5px;border-color:var(--cpm-handle-color);cursor:grab;z-index:10;margin-left:calc(var(--cpm-handle-size) / -2);margin-top:calc(var(--cpm-handle-size) / -2);background:#fff;border-radius:50%;transition:box-shadow .15s;position:absolute;box-shadow:0 1px 4px #00000026}._cpm-handle:hover{box-shadow:0 2px 8px #6366f166}._cpm-handle:active,._cpm-handle--dragging{cursor:grabbing;box-shadow:0 2px 12px #6366f180}._cpm-handle--selected{background:var(--cpm-handle-color);border-color:#fff}._cpm-handle--center{border-style:dashed;border-width:2px;border-color:var(--cpm-handle-color);opacity:.8;width:12px;height:12px;margin-top:-6px;margin-left:-6px}._cpm-edge-line{z-index:4;pointer-events:none;position:absolute}._cpm-edge-line line{stroke:var(--cpm-handle-color);stroke-width:1.5px;stroke-dasharray:4 3;opacity:.4}._cpm-canvas-settings{align-items:center;gap:var(--main-space-4);margin-top:var(--main-space-4);padding-top:var(--main-space-4);border-top-style:solid;border-top-width:1px;border-top-color:var(--cpm-border);display:flex}._cpm-color-field{align-items:center;gap:var(--main-space-2);display:flex}._cpm-color-label{font-size:var(--main-text-xs);color:var(--cpm-text-muted);font-weight:500}._cpm-color-input{border-style:solid;border-width:1.5px;border-color:var(--cpm-border);border-radius:var(--cpm-radius);cursor:pointer;background:0 0;width:32px;height:32px;padding:2px}._cpm-color-input::-webkit-color-swatch-wrapper{padding:0}._cpm-color-input::-webkit-color-swatch{border:none;border-radius:4px}._cpm-color-input::-moz-color-swatch{border:none;border-radius:4px}._cpm-upload-label{width:32px;height:32px;color:var(--cpm-text-muted);border-radius:var(--cpm-radius);cursor:pointer;border-style:solid;border-width:1.5px;border-color:var(--cpm-border);justify-content:center;align-items:center;transition:color .15s,border-color .15s;display:flex}._cpm-upload-label:hover{color:var(--cpm-text);border-color:var(--cpm-border-hover)}@media (max-width:640px){._cpm-canvas{min-height:240px}}._cpm-type-section{justify-content:space-between;align-items:center;gap:var(--main-space-3);display:flex}._cpm-type-tabs{background:var(--cpm-bg);border-radius:var(--cpm-radius);box-shadow:var(--cpm-shadow);border-style:solid;border-width:1px;border-color:var(--cpm-border);padding:3px;display:flex}._cpm-type-tab{color:var(--cpm-text-muted);font-size:var(--main-text-xs);cursor:pointer;border-radius:calc(var(--cpm-radius) - 2px);background:0 0;border:0 solid #0000;padding:.35rem .625rem;font-weight:500;transition:color .15s,background .15s}._cpm-type-tab:hover{color:var(--cpm-text)}._cpm-type-tab--active{background:var(--cpm-primary);color:#fff}._cpm-type-tab--active:hover{color:#fff}._cpm-type-actions{gap:var(--main-space-1);display:flex}._cpm-action-btn{background:var(--cpm-bg);width:32px;height:32px;color:var(--cpm-text-muted);border-radius:var(--cpm-radius);cursor:pointer;box-shadow:var(--cpm-shadow);border-style:solid;border-width:1px;border-color:var(--cpm-border);justify-content:center;align-items:center;transition:color .15s,border-color .15s;display:flex}._cpm-action-btn:hover:not(:disabled){color:var(--cpm-text);border-color:var(--cpm-border-hover)}._cpm-action-btn:disabled{opacity:.4;cursor:not-allowed}._cpm-options-row{align-items:center;gap:var(--main-space-2);display:flex}._cpm-option-btn{background:var(--cpm-bg);color:var(--cpm-text-muted);font-size:var(--main-text-xs);cursor:pointer;border-radius:var(--cpm-radius);border-style:solid;border-width:1px;border-color:var(--cpm-border);align-items:center;gap:.375rem;padding:.35rem .75rem;font-weight:500;transition:color .15s,border-color .15s,background .15s;display:inline-flex}._cpm-option-btn:hover{color:var(--cpm-text);border-color:var(--cpm-border-hover)}._cpm-option-btn--active{background:var(--cpm-primary-light);color:var(--cpm-primary);border-color:var(--cpm-primary)}._cpm-controls{gap:var(--main-space-3);background:var(--cpm-bg);border-radius:var(--cpm-radius-lg);padding:var(--main-space-4);box-shadow:var(--cpm-shadow);border-style:solid;border-width:1px;border-color:var(--cpm-border);flex-direction:column;display:flex}._cpm-controls--hidden{display:none}._cpm-controls-header{justify-content:space-between;align-items:center;display:flex}._cpm-point-hint{color:var(--cpm-text-muted);font-size:10px;font-style:italic}._cpm-control-group{gap:var(--main-space-2);flex-direction:column;display:flex}._cpm-control-label{font-size:var(--main-text-xs);color:var(--cpm-text);font-weight:600}._cpm-control-input-row{align-items:center;gap:var(--main-space-3);display:flex}._cpm-slider{-webkit-appearance:none;appearance:none;background:var(--cpm-border);cursor:pointer;border-radius:3px;outline:none;flex:1;height:6px}._cpm-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--cpm-primary);cursor:pointer;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #6366f14d}._cpm-slider::-moz-range-thumb{background:var(--cpm-primary);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #6366f14d}._cpm-value-wrapper{flex-shrink:0;align-items:center;gap:2px;display:flex}._cpm-number-input{border-style:solid;border-width:1.5px;border-color:var(--cpm-border);border-radius:var(--cpm-radius);width:56px;font-size:var(--main-text-sm);color:var(--cpm-text);text-align:center;background:var(--cpm-bg);outline:none;padding:.3rem .5rem;font-weight:500;transition:border-color .15s}._cpm-number-input:focus{border-color:var(--cpm-primary);box-shadow:0 0 0 3px #6366f11a}._cpm-unit{font-size:var(--main-text-xs);color:var(--cpm-text-muted);font-weight:500}._cpm-inset-options{margin-bottom:var(--main-space-1);display:flex}._cpm-lock-btn{background:var(--cpm-bg);color:var(--cpm-text-muted);font-size:var(--main-text-xs);cursor:pointer;border-radius:var(--cpm-radius);border-style:solid;border-width:1px;border-color:var(--cpm-border);align-items:center;gap:.375rem;padding:.35rem .75rem;font-weight:500;transition:color .15s,border-color .15s,background .15s;display:inline-flex}._cpm-lock-btn:hover{color:var(--cpm-text);border-color:var(--cpm-border-hover)}._cpm-lock-btn--active{background:var(--cpm-primary-light);color:var(--cpm-primary);border-color:var(--cpm-primary)}._cpm-points-list{gap:var(--main-space-2);flex-direction:column;min-height:100px;max-height:320px;display:flex;overflow-y:auto}._cpm-point-row{align-items:center;gap:var(--main-space-2);border-radius:var(--cpm-radius);padding:.35rem .5rem;transition:background .1s;display:flex}._cpm-point-row:hover{background:var(--cpm-bg-hover)}._cpm-point-row--selected{background:var(--cpm-primary-light)}._cpm-point-label{font-size:var(--main-text-xs);color:var(--cpm-text-muted);flex-shrink:0;width:24px;font-weight:700}._cpm-point-inputs{gap:var(--main-space-2);flex:1;display:flex}._cpm-point-field{flex:1;align-items:center;gap:4px;display:flex}._cpm-point-axis{color:var(--cpm-text-muted);flex-shrink:0;width:12px;font-size:10px;font-weight:700}._cpm-point-input{border-style:solid;border-width:1.5px;border-color:var(--cpm-border);border-radius:var(--cpm-radius);width:100%;font-size:var(--main-text-xs);color:var(--cpm-text);text-align:center;background:var(--cpm-bg);outline:none;padding:.25rem .4rem;font-weight:500;transition:border-color .15s}._cpm-point-input:focus{border-color:var(--cpm-primary);box-shadow:0 0 0 2px #6366f11a}._cpm-point-delete{width:24px;height:24px;color:var(--cpm-text-muted);border-radius:var(--cpm-radius);cursor:pointer;background:0 0;border:0 solid #0000;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s,background .15s;display:flex}._cpm-point-delete:hover:not(:disabled){color:var(--main-error);background:#ef444414}._cpm-point-delete:disabled{opacity:.3;cursor:not-allowed}@media (max-width:640px){._cpm-type-section,._cpm-type-tabs{flex-wrap:wrap}._cpm-number-input{width:48px}}._cpm-presets-section{gap:var(--main-space-3);flex-direction:column;display:flex}._cpm-presets-header{align-items:center;display:flex}._cpm-presets-grid{gap:var(--main-space-4);flex-direction:column;display:flex}._cpm-presets-group-label{color:var(--cpm-text-muted);text-transform:uppercase;letter-spacing:.05em;padding-bottom:var(--main-space-1);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cpm-border);font-size:10px;font-weight:700}._cpm-presets-group{gap:var(--main-space-2);grid-template-columns:repeat(auto-fill,minmax(70px,1fr));display:grid}._cpm-preset-item{align-items:center;gap:var(--main-space-1);padding:var(--main-space-2);background:var(--cpm-bg);border-style:solid;border-width:1px;border-color:var(--cpm-border);border-radius:var(--cpm-radius);cursor:pointer;flex-direction:column;transition:border-color .15s,box-shadow .15s;display:flex}._cpm-preset-item:hover{border-color:var(--cpm-primary);box-shadow:0 0 0 2px #6366f11a}._cpm-preset-shape{background:var(--cpm-primary);opacity:.7;width:44px;height:44px}._cpm-preset-item:hover ._cpm-preset-shape{opacity:1}._cpm-preset-name{color:var(--cpm-text-muted);text-align:center;font-size:10px;font-weight:500;line-height:1.2}._cpm-output-card{background:var(--cpm-bg);border-radius:var(--cpm-radius-lg);padding:var(--main-space-4);box-shadow:var(--cpm-shadow);border-style:solid;border-width:1px;border-color:var(--cpm-border)}._cpm-output-header{margin-bottom:var(--main-space-3);justify-content:space-between;align-items:center;display:flex}._cpm-output-label{font-size:var(--main-text-xs);color:var(--cpm-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}._cpm-output-actions{gap:var(--main-space-2);display:flex}._cpm-copy-btn,._cpm-import-btn{border-radius:var(--cpm-radius);font-size:var(--main-text-xs);cursor:pointer;border:0 solid #0000;align-items:center;gap:.375rem;padding:.35rem .75rem;font-weight:600;transition:opacity .15s;display:inline-flex}._cpm-copy-btn{background:var(--cpm-primary);color:#fff}._cpm-copy-btn:hover{opacity:.9}._cpm-copy-btn--copied{background:var(--main-success)}._cpm-import-btn{color:var(--cpm-text-muted);border-width:1px;border-color:var(--cpm-border);background:0 0}._cpm-import-btn:hover{color:var(--cpm-text);border-color:var(--cpm-border-hover)}._cpm-code{padding:var(--main-space-3);background:var(--cpm-bg-code);border-radius:var(--cpm-radius);font-family:var(--main-font-mono);font-size:var(--main-text-sm);color:var(--cpm-text);white-space:pre-wrap;word-break:break-all;margin:0;line-height:1.6;overflow-x:auto}._cpm-import-section{gap:var(--main-space-2);margin-top:var(--main-space-3);padding-top:var(--main-space-3);border-top-style:solid;border-top-width:1px;border-top-color:var(--cpm-border);display:flex}._cpm-import-section--hidden{display:none}._cpm-import-input{border-style:solid;border-width:1.5px;border-color:var(--cpm-border);border-radius:var(--cpm-radius);font-family:var(--main-font-mono);font-size:var(--main-text-xs);color:var(--cpm-text);background:var(--cpm-bg);resize:vertical;outline:none;flex:1;padding:.5rem .75rem;transition:border-color .15s}._cpm-import-input:focus{border-color:var(--cpm-primary);box-shadow:0 0 0 3px #6366f11a}._cpm-import-apply{background:var(--cpm-primary);color:#fff;border-radius:var(--cpm-radius);font-size:var(--main-text-xs);cursor:pointer;border:0 solid #0000;flex-shrink:0;align-self:flex-start;padding:.5rem 1rem;font-weight:600;transition:opacity .15s}._cpm-import-apply:hover{opacity:.9}