:root{--cbg-primary:var(--main-primary);--cbg-text:#1f2937;--cbg-text-muted:#64748b;--cbg-bg:#fff;--cbg-bg-hover:#f8fafc;--cbg-border:#e2e8f0;--cbg-border-hover:#cbd5e1;--cbg-shadow:0 1px 3px #0000001a;--cbg-radius:.5rem;--cbg-radius-lg:.75rem;--cbg-slider-track:#e2e8f0;--cbg-slider-thumb:var(--main-primary);--cbg-tab-active:#6366f114;--cbg-tab-active-border:var(--main-primary)}._cbg-container{grid-template-columns:340px 1fr;gap:1.25rem;max-width:1080px;margin:0 auto;display:grid}._cbg-col-left{flex-direction:column;gap:.75rem;min-width:0;display:flex}._cbg-col-right{flex-direction:column;gap:1rem;min-width:0;display:flex}@media (max-width:860px){._cbg-container{grid-template-columns:1fr;gap:1rem;max-width:640px}._cbg-col-left{order:2}._cbg-col-right{order:1}}@media (max-width:768px){._cbg-container{gap:.75rem;padding-left:1rem;padding-right:1rem}._cbg-col-left{gap:.5rem}._cbg-col-right{gap:.75rem}}._cbg-preview-area{border-radius:var(--cbg-radius-lg);border-style:solid;border-width:1px;border-color:var(--cbg-border);background:#f1f5f9;justify-content:center;align-items:center;min-height:240px;transition:background-color .2s;display:flex}._cbg-preview-btn{outline:none}._cbg-preview-options{align-items:center;gap:var(--main-space-5);flex-wrap:wrap;display:flex}._cbg-option-group{align-items:center;gap:var(--main-space-2);display:flex}._cbg-option-label{font-size:var(--main-text-xs);color:var(--cbg-text-muted);white-space:nowrap;font-weight:500}._cbg-bg-switcher{gap:4px;display:flex}._cbg-bg-switch-btn{border-style:solid;border-width:1.5px;border-color:var(--cbg-border);border-radius:var(--cbg-radius);background:var(--cbg-bg);cursor:pointer;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:flex;overflow:hidden}._cbg-bg-switch-btn:hover{border-color:var(--cbg-border-hover)}._cbg-bg-switch-btn.is-active{border-color:var(--cbg-primary)}._cbg-bg-dot{border-radius:50%;width:14px;height:14px;display:block}._cbg-bg-dot-light{background:#f1f5f9;border:1px solid #e2e8f0}._cbg-bg-dot-dark{background:#1e293b}._cbg-bg-custom-color{cursor:pointer;background:0 0;border-style:none;border-width:0;width:28px;height:28px;padding:0}._cbg-bg-custom-color::-webkit-color-swatch-wrapper{padding:2px}._cbg-bg-custom-color::-webkit-color-swatch{border-style:none;border-width:0;border-radius:3px}._cbg-text-input{border-style:solid;border-width:1.5px;border-color:var(--cbg-border);border-radius:var(--cbg-radius);width:140px;height:30px;font-size:var(--main-text-sm);color:var(--cbg-text);background:var(--cbg-bg);padding:0 8px;font-family:inherit}._cbg-text-input:focus{border-color:var(--cbg-primary);outline:none;box-shadow:0 0 0 2px #6366f126}@media (max-width:768px){._cbg-preview-area{min-height:200px}._cbg-text-input{width:120px}}._cbg-state-tabs{background:var(--cbg-bg);border-radius:var(--cbg-radius-lg);border-style:solid;border-width:1px;border-color:var(--cbg-border);box-shadow:var(--cbg-shadow);gap:4px;padding:4px;display:flex}._cbg-state-tab{border-radius:var(--cbg-radius);cursor:pointer;font-size:var(--main-text-sm);color:var(--cbg-text-muted);text-align:center;background:0 0;border:1.5px solid #0000;flex:1;padding:8px 16px;font-family:inherit;font-weight:600}._cbg-state-tab:hover{color:var(--cbg-text);background:var(--cbg-bg-hover)}._cbg-state-tab.is-active{color:var(--cbg-primary);background:var(--cbg-tab-active);border-color:var(--cbg-tab-active-border)}._cbg-controls-card{background:var(--cbg-bg);border-radius:var(--cbg-radius-lg);border-style:solid;border-width:1px;border-color:var(--cbg-border);box-shadow:var(--cbg-shadow);padding:var(--main-space-4);gap:var(--main-space-4);flex-direction:column;display:flex;overflow:hidden}._cbg-section{gap:var(--main-space-2);padding-bottom:var(--main-space-4);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cbg-border);flex-direction:column;display:flex}._cbg-section:last-child{border-bottom-style:none;border-bottom-width:0;padding-bottom:0}._cbg-section-header{justify-content:space-between;align-items:center;display:flex}._cbg-section-title{font-size:var(--main-text-sm);color:var(--cbg-text);font-weight:600}._cbg-bg-type-toggle{background:var(--cbg-bg-hover);border-radius:var(--cbg-radius);gap:2px;padding:2px;display:flex}._cbg-bg-type-btn{cursor:pointer;font-size:var(--main-text-xs);color:var(--cbg-text-muted);background:0 0;border-style:none;border-width:0;border-radius:4px;padding:4px 10px;font-family:inherit;font-weight:500}._cbg-bg-type-btn:hover{color:var(--cbg-text)}._cbg-bg-type-btn.is-active{background:var(--cbg-bg);color:var(--cbg-primary);box-shadow:0 1px 2px #00000014}._cbg-control-group{gap:var(--main-space-1);flex-direction:column;display:flex}._cbg-control-row{justify-content:space-between;align-items:center;display:flex}._cbg-control-label{font-size:var(--main-text-xs);color:var(--cbg-text-muted);font-weight:500}._cbg-control-input-wrap{align-items:center;gap:2px;display:flex}._cbg-num-input{border-style:solid;border-width:1.5px;border-color:var(--cbg-border);border-radius:var(--cbg-radius);text-align:center;width:52px;height:28px;font-size:var(--main-text-xs);color:var(--cbg-text);background:var(--cbg-bg);padding:0 4px;font-family:inherit}._cbg-num-input:focus{border-color:var(--cbg-primary);outline:none;box-shadow:0 0 0 2px #6366f126}._cbg-unit{color:var(--cbg-text-muted);min-width:16px;font-size:10px}._cbg-color-row{justify-content:space-between;align-items:center;display:flex}._cbg-color-input{border-style:solid;border-width:2px;border-color:var(--cbg-border);border-radius:var(--cbg-radius);cursor:pointer;background:var(--cbg-bg);width:32px;height:32px;padding:2px}._cbg-color-input::-webkit-color-swatch-wrapper{padding:0}._cbg-color-input::-webkit-color-swatch{border:none;border-radius:3px}._cbg-color-controls{align-items:center;gap:var(--main-space-3);margin-left:var(--main-space-3);flex:1;display:flex}._cbg-opacity-wrap{align-items:center;gap:var(--main-space-2);flex:1;display:flex}._cbg-opacity-slider{flex:1}._cbg-opacity-value{font-size:var(--main-text-xs);color:var(--cbg-text-muted);text-align:right;min-width:32px;font-weight:500}._cbg-slider{-webkit-appearance:none;appearance:none;background:var(--cbg-slider-track);cursor:pointer;border-radius:3px;outline:none;width:100%;height:6px}._cbg-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--cbg-slider-thumb);cursor:pointer;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #0003}._cbg-slider::-moz-range-thumb{background:var(--cbg-slider-thumb);cursor:pointer;border-style:none;border-width:0;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #0003}._cbg-inline-controls{align-items:flex-start;gap:var(--main-space-3);display:flex}._cbg-flex-1{flex:1}._cbg-bold-group{align-items:center;gap:var(--main-space-1);flex-direction:column;padding-top:2px;display:flex}._cbg-toggle{cursor:pointer;width:36px;height:20px;display:inline-block;position:relative}._cbg-toggle input{opacity:0;width:0;height:0}._cbg-toggle-slider{background:var(--cbg-slider-track);border-radius:10px;transition:background-color .2s;position:absolute;top:0;bottom:0;left:0;right:0}._cbg-toggle-slider:before{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:left .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}._cbg-toggle input:checked+._cbg-toggle-slider{background:var(--cbg-primary)}._cbg-toggle input:checked+._cbg-toggle-slider:before{left:19px}._cbg-grid-2{gap:var(--main-space-2);grid-template-columns:1fr 1fr;display:grid}._cbg-select{border-style:solid;border-width:1.5px;border-color:var(--cbg-border);border-radius:var(--cbg-radius);width:100%;height:30px;font-size:var(--main-text-xs);color:var(--cbg-text);background:var(--cbg-bg);cursor:pointer;padding:0 8px;font-family:inherit}._cbg-select:focus{border-color:var(--cbg-primary);outline:none;box-shadow:0 0 0 2px #6366f126}._cbg-duration-value{font-size:var(--main-text-xs);color:var(--cbg-text-muted);font-weight:500;font-family:var(--main-font-mono)}@media (max-width:768px){._cbg-controls-card{padding:var(--main-space-3);gap:var(--main-space-3)}._cbg-section{padding-bottom:var(--main-space-3)}}._cbg-presets-bar{align-items:center;gap:var(--main-space-3);display:flex}._cbg-presets-label{font-size:var(--main-text-xs);color:var(--cbg-text-muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;font-weight:600}._cbg-presets-list{scrollbar-width:none;gap:6px;min-height:56px;padding:4px 0;display:flex;overflow-x:auto}._cbg-presets-list::-webkit-scrollbar{display:none}._cbg-preset-btn{border-style:solid;border-width:1.5px;border-color:var(--cbg-border);border-radius:var(--cbg-radius);background:var(--cbg-bg);cursor:pointer;flex-direction:column;flex-shrink:0;align-items:center;gap:4px;min-width:64px;padding:6px 8px;font-family:inherit;display:flex}._cbg-preset-btn:hover{border-color:var(--cbg-primary)}._cbg-preset-mini{white-space:nowrap;justify-content:center;align-items:center;padding:3px 8px;font-size:11px;font-weight:600;line-height:1.3;display:inline-flex}._cbg-preset-name{color:var(--cbg-text-muted);white-space:nowrap;font-size:9px;font-weight:500;line-height:1}._cbg-code-card{background:var(--cbg-bg);border-radius:var(--cbg-radius-lg);border-style:solid;border-width:1px;border-color:var(--cbg-border);box-shadow:var(--cbg-shadow);overflow:hidden}._cbg-code-header{padding:var(--main-space-2) var(--main-space-3);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cbg-border);justify-content:space-between;align-items:center;display:flex}._cbg-code-title{font-size:var(--main-text-xs);color:var(--cbg-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}._cbg-code-actions{gap:6px;display:flex}._cbg-copy-btn{border-radius:var(--cbg-radius);border-style:solid;border-width:1.5px;border-color:var(--cbg-border);background:var(--cbg-bg);cursor:pointer;font-size:var(--main-text-xs);color:var(--cbg-text-muted);align-items:center;gap:4px;padding:4px 10px;font-family:inherit;font-weight:500;display:inline-flex}._cbg-copy-btn:hover{color:var(--cbg-primary);border-color:var(--cbg-primary)}._cbg-copy-btn.is-copied{color:var(--main-success);border-color:var(--main-success)}._cbg-code-block{padding:var(--main-space-3);font-family:var(--main-font-mono);font-size:var(--main-text-sm);color:var(--cbg-text);white-space:pre-wrap;word-break:break-all;min-height:120px;margin:0;line-height:1.6;overflow-x:auto}@media (max-width:768px){._cbg-code-block{padding:var(--main-space-2);font-size:var(--main-text-xs)}}@media (max-width:480px){._cbg-code-actions{flex-direction:column;gap:4px}}