:root{--cag-primary:var(--main-primary);--cag-text:#1f2937;--cag-text-muted:#64748b;--cag-bg:#fff;--cag-bg-hover:#f8fafc;--cag-bg-active:#6366f114;--cag-border:#e2e8f0;--cag-border-hover:#cbd5e1;--cag-shadow:0 1px 3px #0000001a;--cag-radius:.5rem;--cag-radius-lg:.75rem;--cag-slider-track:#e2e8f0;--cag-slider-thumb:var(--main-primary)}._cag-container{grid-template-columns:340px 1fr;gap:1.25rem;max-width:1080px;margin:0 auto;display:grid}._cag-col-left{flex-direction:column;gap:.75rem;display:flex}._cag-col-right{flex-direction:column;gap:1rem;display:flex}@media (max-width:860px){._cag-container{grid-template-columns:1fr;max-width:640px}._cag-col-left{order:2}._cag-col-right{order:1}}@media (max-width:768px){._cag-container{padding-left:1rem;padding-right:1rem}}._cag-presets-card{background:var(--cag-bg);border-radius:var(--cag-radius-lg);border-style:solid;border-width:1px;border-color:var(--cag-border);box-shadow:var(--cag-shadow);padding:var(--main-space-3)}._cag-presets-header{margin-bottom:var(--main-space-2)}._cag-presets-title{font-size:var(--main-text-sm);color:var(--cag-text);font-weight:600}._cag-category-tabs{margin-bottom:var(--main-space-3);background:var(--cag-bg-hover);border-radius:var(--cag-radius);gap:4px;padding:3px;display:flex}._cag-tab{font-size:var(--main-text-xs);color:var(--cag-text-muted);cursor:pointer;white-space:nowrap;background:0 0;border-style:none;border-width:0;border-radius:5px;flex:1;padding:5px 8px;font-family:inherit;font-weight:500}._cag-tab:hover{color:var(--cag-text)}._cag-tab.is-active{background:var(--cag-bg);color:var(--cag-text);box-shadow:0 1px 2px #00000014}._cag-presets-grid{grid-template-columns:repeat(3,1fr);gap:6px;min-height:200px;display:grid}._cag-preset-item{aspect-ratio:1;background:var(--cag-bg-hover);border-radius:var(--cag-radius);cursor:pointer;border-style:solid;border-width:1.5px;border-color:var(--cag-border);flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px;display:flex;position:relative;overflow:hidden}._cag-preset-item:hover{border-color:var(--cag-primary)}._cag-preset-item.is-active{border-color:var(--cag-primary);background:var(--cag-bg-active)}._cag-preset-dot{background:var(--cag-primary);border-radius:4px;flex-shrink:0;width:28px;height:28px}._cag-preset-name{color:var(--cag-text-muted);text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:9px;font-weight:500;line-height:1;overflow:hidden}@media (max-width:860px){._cag-presets-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:480px){._cag-presets-grid{grid-template-columns:repeat(3,1fr)}}._cag-props-card{background:var(--cag-bg);border-radius:var(--cag-radius-lg);border-style:solid;border-width:1px;border-color:var(--cag-border);box-shadow:var(--cag-shadow);padding:var(--main-space-4);gap:var(--main-space-4);flex-direction:column;display:flex}._cag-props-header{margin-bottom:-4px}._cag-props-title{font-size:var(--main-text-sm);color:var(--cag-text);font-weight:600}._cag-control-group{gap:var(--main-space-2);flex-direction:column;display:flex}._cag-control-row{justify-content:space-between;align-items:center;display:flex}._cag-control-label{font-size:var(--main-text-sm);color:var(--cag-text);font-weight:500}._cag-control-input-wrap{align-items:center;gap:2px;display:flex}._cag-num-input{border-style:solid;border-width:1.5px;border-color:var(--cag-border);border-radius:var(--cag-radius);text-align:center;width:64px;height:30px;font-size:var(--main-text-sm);color:var(--cag-text);background:var(--cag-bg);padding:0 4px;font-family:inherit}._cag-num-input:focus{border-color:var(--cag-primary);outline:none;box-shadow:0 0 0 2px #6366f126}._cag-unit{font-size:var(--main-text-xs);color:var(--cag-text-muted);min-width:14px}._cag-slider{-webkit-appearance:none;appearance:none;background:var(--cag-slider-track);cursor:pointer;border-radius:3px;outline:none;width:100%;height:6px}._cag-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--cag-slider-thumb);cursor:pointer;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #0003}._cag-slider::-moz-range-thumb{background:var(--cag-slider-thumb);cursor:pointer;border-style:none;border-width:0;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #0003}._cag-select{border-style:solid;border-width:1.5px;border-color:var(--cag-border);border-radius:var(--cag-radius);height:30px;font-size:var(--main-text-xs);color:var(--cag-text);background:var(--cag-bg);cursor:pointer;font-family:var(--main-font-mono);min-width:130px;padding:0 8px}._cag-select:focus{border-color:var(--cag-primary);outline:none;box-shadow:0 0 0 2px #6366f126}._cag-toggle-btns{border-style:solid;border-width:1.5px;border-color:var(--cag-border);border-radius:var(--cag-radius);gap:0;display:flex;overflow:hidden}._cag-toggle-btn{background:var(--cag-bg);font-size:var(--main-text-xs);color:var(--cag-text-muted);cursor:pointer;border-style:none solid none none;border-width:0 1px 0 0;border-right-color:var(--cag-border);padding:4px 10px;font-family:inherit;font-weight:500}._cag-toggle-btn:last-child{border-right-style:none;border-right-width:0}._cag-toggle-btn:hover{color:var(--cag-text);background:var(--cag-bg-hover)}._cag-toggle-btn.is-active{background:var(--cag-bg-active);color:var(--cag-primary);font-weight:600}._cag-color-input{border-style:solid;border-width:2px;border-color:var(--cag-border);border-radius:var(--cag-radius);cursor:pointer;background:var(--cag-bg);width:32px;height:32px;padding:2px}._cag-color-input::-webkit-color-swatch-wrapper{padding:0}._cag-color-input::-webkit-color-swatch{border:none;border-radius:3px}._cag-keyframes-card{background:var(--cag-bg);border-radius:var(--cag-radius-lg);border-style:solid;border-width:1px;border-color:var(--cag-border);box-shadow:var(--cag-shadow);overflow:hidden}._cag-keyframes-header{padding:var(--main-space-3);cursor:pointer;justify-content:space-between;align-items:center;display:flex}._cag-keyframes-header:hover{background:var(--cag-bg-hover)}._cag-keyframes-title{font-size:var(--main-text-sm);color:var(--cag-text);font-weight:600}._cag-keyframes-chevron{color:var(--cag-text-muted);align-items:center;transition:transform .2s;display:flex}._cag-keyframes-card.is-open ._cag-keyframes-chevron{transform:rotate(180deg)}._cag-keyframes-body{padding:0 var(--main-space-3) var(--main-space-3);gap:var(--main-space-3);flex-direction:column;display:none}._cag-keyframes-card.is-open ._cag-keyframes-body{display:flex}._cag-kf-timeline{background:var(--cag-bg-hover);border-radius:var(--cag-radius);border-style:solid;border-width:1px;border-color:var(--cag-border);height:40px;margin-bottom:var(--main-space-4);margin-left:10px;margin-right:10px;position:relative}._cag-kf-marker{background:var(--cag-primary);cursor:pointer;border-style:solid;border-width:2px;border-color:var(--cag-bg);z-index:1;border-radius:50%;width:16px;height:16px;margin-top:-8px;margin-left:-8px;position:absolute;top:50%;box-shadow:0 1px 3px #0003}._cag-kf-marker.is-active{width:20px;height:20px;margin-top:-10px;margin-left:-10px;box-shadow:0 0 0 3px #6366f140}._cag-kf-marker-label{color:var(--cag-text-muted);white-space:nowrap;font-size:9px;font-weight:500;position:absolute;bottom:-16px;left:50%;transform:translate(-50%)}._cag-kf-controls{gap:var(--main-space-3);flex-direction:column;display:flex}._cag-kf-step{border-style:solid;border-width:1px;border-color:var(--cag-border);border-radius:var(--cag-radius);padding:var(--main-space-2) var(--main-space-3);gap:var(--main-space-2);flex-direction:column;display:flex}._cag-kf-step.is-active{border-color:var(--cag-primary);background:var(--cag-bg-active)}._cag-kf-step-header{justify-content:space-between;align-items:center;display:flex}._cag-kf-step-label{font-size:var(--main-text-xs);color:var(--cag-primary);font-weight:600}._cag-kf-step-actions{gap:4px;display:flex}._cag-kf-delete-btn{cursor:pointer;width:22px;height:22px;color:var(--cag-text-muted);background:0 0;border-style:none;border-width:0;border-radius:4px;justify-content:center;align-items:center;padding:0;display:flex}._cag-kf-delete-btn:hover{color:var(--main-error);background:var(--cag-bg-hover)}._cag-kf-prop-row{align-items:center;gap:var(--main-space-2);display:flex}._cag-kf-prop-label{font-size:var(--main-text-xs);color:var(--cag-text-muted);min-width:64px;font-weight:500}._cag-kf-prop-input{border-style:solid;border-width:1.5px;border-color:var(--cag-border);border-radius:var(--cag-radius);text-align:center;width:64px;height:26px;font-size:var(--main-text-xs);color:var(--cag-text);background:var(--cag-bg);padding:0 4px;font-family:inherit}._cag-kf-prop-input:focus{border-color:var(--cag-primary);outline:none;box-shadow:0 0 0 2px #6366f126}._cag-kf-prop-unit{color:var(--cag-text-muted);font-size:10px}._cag-kf-add-btn{border-style:dashed;border-width:1.5px;border-color:var(--cag-border);border-radius:var(--cag-radius);cursor:pointer;width:100%;font-size:var(--main-text-xs);color:var(--cag-text-muted);background:0 0;justify-content:center;align-items:center;gap:6px;padding:8px;font-family:inherit;font-weight:500;display:flex}._cag-kf-add-btn:hover{color:var(--cag-primary);border-color:var(--cag-primary)}._cag-preview-card{background:var(--cag-bg);border-radius:var(--cag-radius-lg);border-style:solid;border-width:1px;border-color:var(--cag-border);box-shadow:var(--cag-shadow);overflow:hidden}._cag-preview-area{background:#e2e8f0;justify-content:center;align-items:center;min-height:280px;transition:background-color .2s;display:flex}._cag-preview-element{background:var(--cag-primary);border-radius:var(--cag-radius-lg);width:100px;height:100px}._cag-preview-element.is-circle{border-radius:50%}._cag-preview-element.is-text{width:auto;height:auto;color:var(--cag-primary);background:0 0;border-radius:0;justify-content:center;align-items:center;font-size:2rem;font-weight:700;display:flex}._cag-preview-toolbar{padding:var(--main-space-2) var(--main-space-3);border-top-style:solid;border-top-width:1px;border-top-color:var(--cag-border);justify-content:space-between;align-items:center;gap:var(--main-space-3);flex-wrap:wrap;display:flex}._cag-playback-controls{gap:4px;display:flex}._cag-play-btn{border-style:solid;border-width:1.5px;border-color:var(--cag-border);border-radius:var(--cag-radius);background:var(--cag-bg);cursor:pointer;width:32px;height:32px;color:var(--cag-text-muted);justify-content:center;align-items:center;padding:0;display:flex}._cag-play-btn:hover{color:var(--cag-primary);border-color:var(--cag-primary)}._cag-play-btn.is-playing{color:var(--cag-primary);background:var(--cag-bg-active);border-color:var(--cag-primary)}._cag-preview-options{align-items:center;gap:var(--main-space-4);flex-wrap:wrap;display:flex}._cag-option-group{align-items:center;gap:var(--main-space-2);display:flex}._cag-option-label{font-size:var(--main-text-xs);color:var(--cag-text-muted);white-space:nowrap;font-weight:500}._cag-shape-btns{gap:4px;display:flex}._cag-shape-btn{border-style:solid;border-width:1.5px;border-color:var(--cag-border);border-radius:var(--cag-radius);background:var(--cag-bg);cursor:pointer;width:32px;height:32px;color:var(--cag-text-muted);justify-content:center;align-items:center;padding:0;display:flex}._cag-shape-btn:hover{border-color:var(--cag-border-hover);color:var(--cag-text)}._cag-shape-btn.is-active{border-color:var(--cag-primary);color:var(--cag-primary);background:var(--cag-bg-active)}._cag-shape-icon{border:2px solid;width:14px;height:14px;display:block}._cag-shape-rounded{border-radius:3px}._cag-shape-circle{border-radius:50%}._cag-shape-icon-text{font-size:14px;font-weight:700;line-height:1}@media (max-width:768px){._cag-preview-area{min-height:220px}._cag-preview-element{width:80px;height:80px}}._cag-code-card{background:var(--cag-bg);border-radius:var(--cag-radius-lg);border-style:solid;border-width:1px;border-color:var(--cag-border);box-shadow:var(--cag-shadow);overflow:hidden}._cag-code-header{padding:var(--main-space-2) var(--main-space-3);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cag-border);justify-content:space-between;align-items:center;display:flex}._cag-code-title{font-size:var(--main-text-xs);color:var(--cag-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}._cag-copy-btn{border-radius:var(--cag-radius);border-style:solid;border-width:1.5px;border-color:var(--cag-border);background:var(--cag-bg);cursor:pointer;font-size:var(--main-text-xs);color:var(--cag-text-muted);align-items:center;gap:4px;padding:4px 10px;font-family:inherit;font-weight:500;display:inline-flex}._cag-copy-btn:hover{color:var(--cag-primary);border-color:var(--cag-primary)}._cag-copy-btn.is-copied{color:var(--main-success);border-color:var(--main-success)}._cag-code-block{padding:var(--main-space-4);font-family:var(--main-font-mono);font-size:var(--main-text-sm);color:#1e293b;white-space:pre-wrap;word-break:break-word;background:#f8fafc;max-height:300px;margin:0;line-height:1.7;overflow-x:auto}._cag-code-block code{color:inherit}