:root{--cgg-primary:var(--main-primary);--cgg-primary-light:#6366f114;--cgg-primary-border:#6366f140;--cgg-text:#1e293b;--cgg-text-muted:#64748b;--cgg-bg:#fff;--cgg-bg-secondary:#f8fafc;--cgg-border:#e2e8f0;--cgg-border-hover:#cbd5e1;--cgg-radius:var(--main-radius);--cgg-radius-lg:var(--main-radius-lg);--cgg-shadow:0 1px 3px #0000000f, 0 1px 2px #0000000a;--cgg-shadow-md:0 4px 12px #00000014}._cgg-container{width:100%;padding-left:var(--main-space-3);padding-right:var(--main-space-3);overflow:hidden}._cgg-layout{gap:var(--main-space-4);grid-template-columns:320px 1fr;align-items:start;display:grid}._cgg-controls,._cgg-right{gap:var(--main-space-4);flex-direction:column;min-width:0;display:flex}._cgg-section{background:var(--cgg-bg);border-radius:var(--cgg-radius-lg);padding:var(--main-space-4);border-style:solid;border-width:1px;border-color:var(--cgg-border);box-shadow:var(--cgg-shadow);min-width:0;overflow:hidden}._cgg-section-header{margin-bottom:var(--main-space-3);justify-content:space-between;align-items:center;display:flex}._cgg-section-title{font-size:var(--main-text-sm);color:var(--cgg-text);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--main-space-3);font-weight:600}._cgg-section-header ._cgg-section-title{margin-bottom:0}@media (max-width:900px){._cgg-layout{grid-template-columns:1fr}._cgg-container{padding-left:1rem;padding-right:1rem}._cgg-controls,._cgg-right{gap:var(--main-space-3)}._cgg-section{padding:var(--main-space-3)}}@media (max-width:480px){._cgg-container{padding-left:.75rem;padding-right:.75rem}}._cgg-control-group{margin-bottom:var(--main-space-3)}._cgg-control-group:last-child{margin-bottom:0}._cgg-label{font-size:var(--main-text-xs);color:var(--cgg-text-muted);margin-bottom:var(--main-space-1);font-weight:500;font-family:var(--main-font-mono);text-overflow:ellipsis;white-space:nowrap;min-width:0;display:block;overflow:hidden}._cgg-btn-group{flex-wrap:wrap;gap:4px;display:flex}._cgg-btn{font-size:11px;font-family:var(--main-font-mono);color:var(--cgg-text-muted);background:var(--cgg-bg-secondary);border-style:solid;border-width:1px;border-color:var(--cgg-border);border-radius:var(--cgg-radius);cursor:pointer;white-space:nowrap;padding:5px 10px;line-height:1.4;transition:all .15s}._cgg-btn:hover{color:var(--cgg-text);border-color:var(--cgg-border-hover);background:var(--cgg-bg)}._cgg-btn._cgg-btn-active{color:var(--cgg-primary);background:var(--cgg-primary-light);border-color:var(--cgg-primary-border);font-weight:600}._cgg-input{width:100%;font-size:var(--main-text-xs);font-family:var(--main-font-mono);color:var(--cgg-text);background:var(--cgg-bg);border-style:solid;border-width:1.5px;border-color:var(--cgg-border);border-radius:var(--cgg-radius);outline:none;padding:6px 10px;transition:border-color .15s}._cgg-input:focus{border-color:var(--cgg-primary);box-shadow:0 0 0 3px #6366f11a}._cgg-input-wrap{align-items:center;display:inline-flex;position:relative}._cgg-input-wrap ._cgg-input{width:70px;padding-right:28px}._cgg-input-suffix{color:var(--cgg-text-muted);font-size:10px;font-family:var(--main-font-mono);pointer-events:none;position:absolute;right:8px}._cgg-gap-inputs{align-items:center;gap:var(--main-space-2);display:flex}._cgg-gap-separator{color:var(--cgg-text-muted);font-size:var(--main-text-xs)}._cgg-icon-btn{width:28px;height:28px;color:var(--cgg-text-muted);background:var(--cgg-bg-secondary);border-style:solid;border-width:1px;border-color:var(--cgg-border);border-radius:var(--cgg-radius);cursor:pointer;justify-content:center;align-items:center;padding:0;transition:all .15s;display:inline-flex}._cgg-icon-btn:hover{color:var(--cgg-text);border-color:var(--cgg-border-hover)}._cgg-reset-btn:hover{color:var(--main-error)}._cgg-track-label{margin-bottom:var(--main-space-1);justify-content:space-between;align-items:center;display:flex}._cgg-track-label ._cgg-label{flex:1;min-width:0;margin-bottom:0}._cgg-count-control{flex-shrink:0;align-items:center;gap:2px;display:flex}._cgg-count-btn{width:22px;height:22px;color:var(--cgg-text-muted);background:var(--cgg-bg-secondary);border-style:solid;border-width:1px;border-color:var(--cgg-border);border-radius:var(--cgg-radius);cursor:pointer;justify-content:center;align-items:center;padding:0;font-size:13px;font-weight:600;line-height:1;transition:all .15s;display:inline-flex}._cgg-count-btn:hover{color:var(--cgg-primary);border-color:var(--cgg-primary-border)}._cgg-count-value{min-width:22px;font-size:12px;font-weight:600;font-family:var(--main-font-mono);color:var(--cgg-text);justify-content:center;align-items:center;display:inline-flex}._cgg-track-inputs{flex-wrap:wrap;gap:4px;min-height:26px;display:flex}._cgg-track-input{width:52px;font-size:11px;font-family:var(--main-font-mono);text-align:center;color:var(--cgg-text);background:var(--cgg-bg-secondary);border-style:solid;border-width:1.5px;border-color:var(--cgg-border);border-radius:var(--cgg-radius);outline:none;padding:4px 6px;transition:border-color .15s}._cgg-track-input:focus{border-color:var(--cgg-primary);background:var(--cgg-bg);box-shadow:0 0 0 2px #6366f11a}._cgg-presets{grid-template-columns:repeat(5,1fr);gap:6px;min-height:56px;display:grid}._cgg-preset{background:var(--cgg-bg-secondary);border-style:solid;border-width:1.5px;border-color:var(--cgg-border);border-radius:var(--cgg-radius);cursor:pointer;flex-direction:column;align-items:center;gap:4px;padding:6px;transition:all .15s;display:flex}._cgg-preset:hover{border-color:var(--cgg-primary-border);box-shadow:0 0 0 2px #6366f11a}._cgg-preset-grid{aspect-ratio:1.2;border-radius:2px;width:100%;overflow:hidden}._cgg-preset-name{color:var(--cgg-text-muted);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:9px;font-weight:500;overflow:hidden}._cgg-area-list{margin-bottom:var(--main-space-2);flex-direction:column;gap:4px;min-height:28px;display:flex}._cgg-area-item{align-items:center;gap:var(--main-space-2);background:var(--cgg-bg-secondary);border-style:solid;border-width:1.5px;border-color:var(--cgg-border);border-radius:var(--cgg-radius);cursor:pointer;padding:5px 8px;transition:all .15s;display:flex}._cgg-area-item:hover{border-color:var(--cgg-border-hover)}._cgg-area-item._cgg-area-item-active{border-color:var(--cgg-primary-border);background:var(--cgg-primary-light)}._cgg-area-swatch{border-radius:3px;flex-shrink:0;width:14px;height:14px}._cgg-area-name{font-size:12px;font-family:var(--main-font-mono);color:var(--cgg-text);text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:500;overflow:hidden}._cgg-area-delete{width:20px;height:20px;color:var(--cgg-text-muted);border-radius:var(--cgg-radius);cursor:pointer;opacity:0;background:0 0;border:0 solid #0000;justify-content:center;align-items:center;padding:0;transition:all .15s;display:inline-flex}._cgg-area-item:hover ._cgg-area-delete{opacity:1}._cgg-area-delete:hover{color:var(--main-error)}._cgg-area-hint{color:var(--cgg-text-muted);font-size:11px;font-style:italic}@media (max-width:900px){._cgg-btn{padding:6px 10px;font-size:12px}._cgg-count-btn{width:28px;height:28px;font-size:15px}._cgg-count-value{min-width:28px;font-size:14px}._cgg-icon-btn{width:34px;height:34px}._cgg-area-delete{opacity:1;width:28px;height:28px}._cgg-track-input{width:58px;padding:6px 8px;font-size:12px}}@media (max-width:480px){._cgg-presets{grid-template-columns:repeat(3,1fr)}._cgg-preset-name{font-size:10px}._cgg-track-input{width:50px}._cgg-gap-inputs{flex-wrap:wrap}._cgg-label{font-size:11px}._cgg-btn{padding:6px 8px;font-size:11px}}._cgg-preview-section{background:var(--cgg-bg);border-radius:var(--cgg-radius-lg);padding:var(--main-space-4);border-style:solid;border-width:1px;border-color:var(--cgg-border);box-shadow:var(--cgg-shadow);min-width:0;overflow:hidden}._cgg-preview-header{margin-bottom:var(--main-space-3);justify-content:space-between;align-items:center;display:flex}._cgg-preview-header ._cgg-section-title{margin-bottom:0}._cgg-preview-area{background:var(--cgg-bg-secondary);border-radius:var(--cgg-radius);padding:var(--main-space-3);border-style:solid;border-width:1px;border-color:var(--cgg-border);min-height:300px;overflow:auto}._cgg-grid-canvas{border-style:dashed;border-width:2px;border-color:var(--cgg-primary-border);border-radius:var(--cgg-radius);background:var(--cgg-bg);min-height:280px;padding:2px;display:grid}._cgg-cell{background:var(--cgg-bg-secondary);border-style:dashed;border-width:1.5px;border-color:var(--cgg-border);border-radius:var(--cgg-radius);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;min-height:50px;transition:border-color .15s,box-shadow .15s;display:flex}._cgg-cell:hover{border-color:var(--cgg-primary-border);box-shadow:0 0 0 2px #6366f126}._cgg-cell._cgg-cell-painted{border-style:solid}._cgg-cell-label{font-size:11px;font-weight:500;font-family:var(--main-font-mono);pointer-events:none}@media (max-width:900px){._cgg-preview-area{min-height:220px;padding:var(--main-space-2)}._cgg-grid-canvas{min-height:200px}._cgg-cell{min-height:40px}._cgg-cell-label{font-size:10px}}@media (max-width:480px){._cgg-preview-section{padding:var(--main-space-3)}._cgg-cell{min-height:32px}._cgg-cell-label{font-size:9px}}._cgg-code-section{background:var(--cgg-bg);border-radius:var(--cgg-radius-lg);padding:var(--main-space-4);border-style:solid;border-width:1px;border-color:var(--cgg-border);box-shadow:var(--cgg-shadow);min-width:0;overflow:hidden}._cgg-code-header{margin-bottom:var(--main-space-3);justify-content:space-between;align-items:center;display:flex}._cgg-code-tabs{gap:2px;display:flex}._cgg-code-tab{font-size:var(--main-text-xs);color:var(--cgg-text-muted);cursor:pointer;background:0 0;border:0 solid #0000;border-bottom-width:2px;padding:5px 14px;font-weight:500;transition:all .15s}._cgg-code-tab:hover{color:var(--cgg-text)}._cgg-code-tab._cgg-code-tab-active{color:var(--cgg-primary);border-bottom-color:var(--cgg-primary)}._cgg-copy-btn{font-size:var(--main-text-xs);color:var(--cgg-primary);background:var(--cgg-primary-light);border-style:solid;border-width:1px;border-color:var(--cgg-primary-border);border-radius:var(--cgg-radius);cursor:pointer;align-items:center;gap:6px;padding:6px 14px;font-weight:500;transition:all .15s;display:inline-flex}._cgg-copy-btn:hover{opacity:.85}._cgg-code-block{color:#e2e8f0;padding:var(--main-space-4);border-radius:var(--cgg-radius);font-family:var(--main-font-mono);white-space:pre;background:#1e293b;max-width:100%;min-height:80px;margin:0;font-size:13px;line-height:1.6;overflow-x:auto}@media (max-width:900px){._cgg-code-section{padding:var(--main-space-3)}._cgg-code-block{padding:var(--main-space-3);font-size:12px}}@media (max-width:480px){._cgg-code-block{padding:var(--main-space-2);font-size:11px}}