.clp{display:flex;flex-direction:column;gap:20px}.clp__preview-wrap{padding:20px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;gap:16px}.clp__preview{background-image:linear-gradient(45deg,#e2e8f0 25%,transparent 25%),linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8f0 75%),linear-gradient(-45deg,transparent 75%,#e2e8f0 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:#f8fafc}.clp__editor-wrap{width:100%;max-width:360px;display:flex;flex-direction:column;gap:8px}.clp__editor{width:100%;height:240px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);cursor:crosshair;touch-action:none}.clp__editor-hint{font-size:12px;color:var(--color-text-soft);display:flex;flex-wrap:wrap;align-items:center;gap:8px}.clp__btn--del{padding:3px 10px;border:1px solid var(--color-error, #ef4444);border-radius:var(--radius-sm);background:transparent;color:var(--color-error, #ef4444);font-size:12px;cursor:pointer}.clp__btn--del:hover{background:var(--color-error, #ef4444);color:#fff}.clp__preview-controls{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:center}.clp__preview-size,.clp__preview-bg{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--color-text-soft)}.clp__preview-size input[type=range]{width:100px;accent-color:var(--color-primary, #2b6cff)}.clp__preview-size output{font-family:var(--font-mono);font-size:12px}.clp__presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.clp__presets-label{font-size:13px;color:var(--color-text-soft);margin-right:4px}.clp__btn{padding:7px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:13px;cursor:pointer;transition:background var(--transition-fast, .15s),border-color var(--transition-fast, .15s)}.clp__btn:hover{border-color:var(--color-primary, #2b6cff)}.clp__btn--copy{background:var(--color-primary, #2b6cff);color:#fff;border-color:var(--color-primary, #2b6cff)}.clp__btn--copy:hover{opacity:.9}.clp__controls{display:flex;flex-wrap:wrap;gap:16px}.clp__control-group{display:flex;flex-direction:column;gap:6px}.clp__control-label{font-size:12px;color:var(--color-text-soft)}.clp__seg{display:inline-flex;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}.clp__seg-btn{padding:7px 14px;border:none;background:var(--color-bg);color:var(--color-text);font-size:13px;cursor:pointer;transition:background var(--transition-fast, .15s)}.clp__seg-btn+.clp__seg-btn{border-left:1px solid var(--color-border)}.clp__seg-btn.is-active{background:var(--color-primary, #2b6cff);color:#fff}.clp__sliders{display:flex;flex-direction:column;gap:12px}.clp__sliders--grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px}.clp__slider{display:flex;align-items:center;gap:10px}.clp__slider-label{min-width:72px;font-size:13px;color:var(--color-text-soft)}.clp__slider input[type=range]{flex:1;accent-color:var(--color-primary, #2b6cff)}.clp__slider-value{min-width:48px;font-family:var(--font-mono);font-size:12px;color:var(--color-text-soft);text-align:right}.clp__params--polygon{padding:12px 16px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.clp__params-hint{font-size:13px;color:var(--color-text-soft);line-height:1.6}.clp__output{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.clp__output-head{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border-bottom:1px solid var(--color-border)}.clp__output-label{font-size:12px;color:var(--color-text-soft);font-weight:600}.clp__code{margin:0;padding:14px;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--color-text);background:var(--color-bg);overflow-x:auto;word-break:break-all}@media(max-width:768px){.clp__preview{width:180px!important;height:180px!important}.clp__editor{height:200px}.clp__sliders--grid{grid-template-columns:1fr}.clp__preview-controls{gap:12px}.clp__control-label{display:none}.clp__seg-btn{padding:6px 10px;font-size:12px}}@media(max-width:414px){.clp__preview{width:150px!important;height:150px!important}.clp__editor{height:180px}.clp__slider{flex-wrap:wrap}.clp__slider-label{min-width:100%}.clp__editor-hint{font-size:11px}}:global(html.dark) .clp__preview{background-color:#1e293b;background-image:linear-gradient(45deg,#334155 25%,transparent 25%),linear-gradient(-45deg,#334155 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#334155 75%),linear-gradient(-45deg,transparent 75%,#334155 75%)}:global(html.dark) .clp__editor rect[fill="url(#clp-grid)"]{opacity:.5}