:root{--cgg-primary:var(--main-primary);--cgg-text:#1f2937;--cgg-text-muted:#64748b;--cgg-bg:#fff;--cgg-bg-hover:#f8fafc;--cgg-bg-active:#eef2ff;--cgg-border:#e2e8f0;--cgg-border-hover:#cbd5e1;--cgg-shadow:0 1px 3px #00000014;--cgg-shadow-lg:0 4px 12px #0000001f;--cgg-radius:.5rem;--cgg-radius-lg:.75rem;--cgg-checkerboard:repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 50% / 12px 12px;--cgg-output-bg:#f8faff;--cgg-output-header-bg:#f0f4ff;--cgg-output-border:#c7d2fe;--cgg-output-glow:#6366f114;--cgg-code-bg:#1e1e2e;--cgg-code-text:#cdd6f4;--cgg-code-keyword:#cba6f7;--cgg-code-value:#a6e3a1;--cgg-code-punctuation:#6c7086;--cgg-code-function:#89b4fa}._cgg-container{grid-template-columns:1fr 340px;gap:1.25rem;max-width:1080px;margin:0 auto;display:grid}._cgg-col-left{flex-direction:column;gap:1rem;display:flex}._cgg-col-right{flex-direction:column;gap:.75rem;display:flex}@media (max-width:860px){._cgg-container{grid-template-columns:1fr;max-width:640px}}@media (max-width:768px){._cgg-container{padding-left:1rem;padding-right:1rem}}._cgg-preview-card{border-radius:var(--cgg-radius-lg);box-shadow:var(--cgg-shadow-lg);border-style:solid;border-width:1px;border-color:var(--cgg-border);overflow:hidden}._cgg-preview-checkerboard{background:var(--cgg-checkerboard);border-radius:var(--cgg-radius-lg)}._cgg-preview{border-radius:var(--cgg-radius-lg);background:linear-gradient(90deg,#3b82f6 0%,#8b5cf6 100%);width:100%;height:280px;transition:none}@media (max-width:860px){._cgg-preview{height:200px}}@media (max-width:480px){._cgg-preview{height:160px}}._cgg-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}._cgg-type-tabs{background:var(--cgg-bg);border-radius:var(--cgg-radius);border-style:solid;border-width:1px;border-color:var(--cgg-border);box-shadow:var(--cgg-shadow);gap:.25rem;padding:.2rem;display:flex}._cgg-tab{color:var(--cgg-text-muted);border-radius:calc(var(--cgg-radius) - 2px);cursor:pointer;background:0 0;border:none;padding:.4rem 1rem;font-family:inherit;font-size:.8125rem;font-weight:500;transition:color .15s,background .15s}._cgg-tab:hover{color:var(--cgg-text);background:var(--cgg-bg-hover)}._cgg-tab._cgg-tab--active{color:#fff;background:var(--cgg-primary);box-shadow:0 1px 3px #6366f14d}._cgg-actions{gap:.25rem;display:flex}._cgg-action-btn{background:var(--cgg-bg);width:2rem;height:2rem;color:var(--cgg-text-muted);border-radius:var(--cgg-radius);cursor:pointer;border:1px solid;border-color:var(--cgg-border);box-shadow:var(--cgg-shadow);justify-content:center;align-items:center;transition:color .15s,background .15s;display:inline-flex}._cgg-action-btn:hover:not(:disabled){color:var(--cgg-text);background:var(--cgg-bg-hover)}._cgg-action-btn:disabled{opacity:.35;cursor:not-allowed}._cgg-action-btn svg{width:16px;height:16px}._cgg-bar-section{flex-direction:column;gap:.375rem;display:flex}._cgg-bar-wrapper{padding:0 10px;position:relative}._cgg-bar-checkerboard{background:var(--cgg-checkerboard);border-radius:var(--cgg-radius);border-style:solid;border-width:1px;border-color:var(--cgg-border);box-shadow:var(--cgg-shadow);overflow:hidden}._cgg-bar{border-radius:var(--cgg-radius);cursor:crosshair;background:linear-gradient(90deg,#3b82f6 0%,#8b5cf6 100%);height:28px;position:relative}._cgg-bar-stops{position:absolute;top:0;bottom:0;left:0;right:0}._cgg-stop-handle{cursor:grab;z-index:2;border:2.5px solid #fff;border-radius:50%;width:18px;height:18px;transition:box-shadow .15s;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0000004d,inset 0 0 0 1px #0000001a}._cgg-stop-handle:hover{box-shadow:0 2px 8px #00000059,inset 0 0 0 1px #00000026}._cgg-stop-handle._cgg-stop-handle--active{border-color:var(--cgg-primary);z-index:3;box-shadow:0 0 0 2px #6366f166,0 2px 8px #00000040}._cgg-stop-handle:active{cursor:grabbing}._cgg-bar-hint{color:var(--cgg-text-muted);text-align:center;font-size:.6875rem}._cgg-stoplist{background:var(--cgg-bg);border-radius:var(--cgg-radius-lg);border-style:solid;border-width:1px;border-color:var(--cgg-border);box-shadow:var(--cgg-shadow);overflow:hidden}._cgg-stoplist-header{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cgg-border);justify-content:space-between;align-items:center;padding:.625rem 1rem;display:flex}._cgg-stoplist-add{background:var(--cgg-bg-hover);width:1.75rem;height:1.75rem;color:var(--cgg-primary);border-radius:var(--cgg-radius);cursor:pointer;border:none;justify-content:center;align-items:center;transition:background .15s;display:inline-flex}._cgg-stoplist-add:hover{background:var(--cgg-bg-active)}._cgg-stoplist-items{flex-direction:column;min-height:2.5rem;display:flex}._cgg-stoplist-item{cursor:pointer;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cgg-border);align-items:center;gap:.625rem;padding:.5rem 1rem;transition:background .1s;display:flex}._cgg-stoplist-item:last-child{border-bottom:none}._cgg-stoplist-item:hover{background:var(--cgg-bg-hover)}._cgg-stoplist-item._cgg-stoplist-item--active{background:var(--cgg-bg-active)}._cgg-stoplist-swatch{cursor:pointer;border-radius:6px;flex-shrink:0;width:28px;height:28px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001a}._cgg-stoplist-swatch-bg{background:var(--cgg-checkerboard);border-radius:6px;position:absolute;top:0;bottom:0;left:0;right:0}._cgg-stoplist-swatch-color{border-radius:6px;position:absolute;top:0;bottom:0;left:0;right:0}._cgg-stoplist-swatch input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;top:0;bottom:0;left:0;right:0}._cgg-stoplist-hex{font-family:var(--main-font-mono);color:var(--cgg-text);border-radius:calc(var(--cgg-radius) - 2px);text-transform:lowercase;background:0 0;border:1px solid #0000;width:72px;padding:.25rem .4rem;font-size:.8125rem;transition:border-color .15s,background .15s}._cgg-stoplist-hex:hover{border-color:var(--cgg-border);background:var(--cgg-bg)}._cgg-stoplist-hex:focus{border-color:var(--cgg-primary);background:var(--cgg-bg);outline:none;box-shadow:0 0 0 2px #6366f11f}._cgg-stoplist-pos{font-family:var(--main-font-mono);color:var(--cgg-text-muted);text-align:center;border-radius:calc(var(--cgg-radius) - 2px);background:0 0;border:1px solid #0000;width:46px;padding:.25rem;font-size:.75rem;transition:border-color .15s,background .15s}._cgg-stoplist-pos:hover{border-color:var(--cgg-border);background:var(--cgg-bg)}._cgg-stoplist-pos:focus{border-color:var(--cgg-primary);background:var(--cgg-bg);color:var(--cgg-text);outline:none;box-shadow:0 0 0 2px #6366f11f}._cgg-stoplist-opacity{font-family:var(--main-font-mono);color:var(--cgg-text-muted);text-align:center;border-radius:calc(var(--cgg-radius) - 2px);background:0 0;border:1px solid #0000;width:46px;padding:.25rem;font-size:.75rem;transition:border-color .15s,background .15s}._cgg-stoplist-opacity:hover{border-color:var(--cgg-border);background:var(--cgg-bg)}._cgg-stoplist-opacity:focus{border-color:var(--cgg-primary);background:var(--cgg-bg);color:var(--cgg-text);outline:none;box-shadow:0 0 0 2px #6366f11f}._cgg-stoplist-spacer{flex:1}._cgg-stoplist-delete{width:1.5rem;height:1.5rem;color:var(--cgg-border-hover);border-radius:calc(var(--cgg-radius) - 2px);cursor:pointer;opacity:0;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s,background .15s;display:inline-flex}._cgg-stoplist-item:hover ._cgg-stoplist-delete{opacity:1}._cgg-stoplist-delete:hover{color:#ef4444;background:#ef444414}@media (max-width:480px){._cgg-stoplist-item{gap:.5rem;padding:.5rem .75rem}._cgg-stoplist-delete{opacity:1}}._cgg-controls-card{background:var(--cgg-bg);border-radius:var(--cgg-radius-lg);border-style:solid;border-width:1px;border-color:var(--cgg-border);box-shadow:var(--cgg-shadow);padding:1rem 1.25rem}._cgg-controls{flex-wrap:wrap;gap:1.5rem;display:flex}._cgg-controls._cgg-controls--hidden{display:none}._cgg-control-group{flex-direction:column;gap:.5rem;display:flex}._cgg-label{color:var(--cgg-text);text-transform:uppercase;letter-spacing:.03em;font-size:.75rem;font-weight:600}._cgg-angle-row{align-items:center;gap:.75rem;display:flex}._cgg-angle-knob-wrapper{flex-shrink:0}._cgg-angle-knob{background:var(--cgg-bg);border-style:solid;border-width:2px;border-color:var(--cgg-border);cursor:pointer;width:48px;height:48px;box-shadow:var(--cgg-shadow);border-radius:50%;position:relative}._cgg-angle-knob:hover{border-color:var(--cgg-border-hover)}._cgg-angle-indicator{background:var(--cgg-primary);transform-origin:bottom;pointer-events:none;border-radius:2px;width:3px;height:40%;position:absolute;top:4px;left:50%;transform:translate(-50%)}._cgg-angle-input-wrapper{align-items:center;display:inline-flex;position:relative}._cgg-input{border-style:solid;border-width:1.5px;border-color:var(--cgg-border);border-radius:var(--cgg-radius);width:70px;color:var(--cgg-text);background:var(--cgg-bg);text-align:center;padding:.4rem 1.5rem .4rem .5rem;font-family:inherit;font-size:.8125rem}._cgg-input:focus{border-color:var(--cgg-primary);outline:none;box-shadow:0 0 0 2px #6366f126}._cgg-input-suffix{color:var(--cgg-text-muted);pointer-events:none;font-size:.75rem;position:absolute;right:.5rem}._cgg-direction-grid{grid-template-columns:repeat(3,1fr);gap:.25rem;width:-moz-fit-content;width:fit-content;display:grid}._cgg-dir-btn{background:var(--cgg-bg-hover);width:32px;height:32px;color:var(--cgg-text-muted);border-radius:var(--cgg-radius);cursor:pointer;border:none;justify-content:center;align-items:center;font-size:.875rem;transition:color .15s,background .15s;display:inline-flex}._cgg-dir-btn:hover{color:var(--cgg-text);background:var(--cgg-bg-active)}._cgg-dir-btn._cgg-dir-btn--active{color:#fff;background:var(--cgg-primary)}._cgg-dir-center{background:var(--cgg-border);border-radius:50%;width:32px;height:32px}._cgg-toggle-group{background:var(--cgg-bg-hover);border-radius:var(--cgg-radius);gap:.25rem;padding:.2rem;display:flex}._cgg-toggle{color:var(--cgg-text-muted);border-radius:calc(var(--cgg-radius) - 2px);cursor:pointer;background:0 0;border:none;padding:.35rem .875rem;font-family:inherit;font-size:.8125rem;font-weight:500;transition:color .15s,background .15s}._cgg-toggle:hover{color:var(--cgg-text)}._cgg-toggle._cgg-toggle--active{color:var(--cgg-primary);background:var(--cgg-bg);box-shadow:var(--cgg-shadow)}._cgg-position-grid{grid-template-columns:repeat(3,1fr);gap:.25rem;width:-moz-fit-content;width:fit-content;display:grid}._cgg-pos-btn{border-style:solid;border-width:2px;border-color:var(--cgg-border);background:var(--cgg-bg);cursor:pointer;border-radius:50%;width:24px;height:24px;padding:0;transition:border-color .15s,background .15s}._cgg-pos-btn:hover{border-color:var(--cgg-primary)}._cgg-pos-btn._cgg-pos-btn--active{background:var(--cgg-primary);border-color:var(--cgg-primary)}@media (max-width:480px){._cgg-controls{flex-direction:column;gap:1rem}}._cgg-stop-editor{border-top-style:solid;border-top-width:1px;border-top-color:var(--cgg-border);margin-top:1rem;padding-top:1rem}._cgg-stop-editor-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}._cgg-stop-delete{width:1.75rem;height:1.75rem;color:var(--cgg-text-muted);border-radius:var(--cgg-radius);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:color .15s,background .15s;display:inline-flex}._cgg-stop-delete:hover{color:#ef4444;background:#ef444414}._cgg-stop-controls{flex-wrap:wrap;align-items:flex-end;gap:1rem;display:flex}._cgg-stop-field{flex-direction:column;gap:.35rem;display:flex}._cgg-stop-label{color:var(--cgg-text-muted);font-size:.6875rem;font-weight:500}._cgg-color-input-wrapper{align-items:center;gap:.375rem;display:flex}._cgg-color-input{cursor:pointer;border-radius:var(--cgg-radius);background:0 0;border:none;width:36px;height:36px;padding:0}._cgg-color-input::-webkit-color-swatch-wrapper{padding:2px}._cgg-color-input::-webkit-color-swatch{border-radius:calc(var(--cgg-radius) - 2px);box-shadow:0 0 0 1px var(--cgg-border);border:none}._cgg-hex-input{border-style:solid;border-width:1.5px;border-color:var(--cgg-border);border-radius:var(--cgg-radius);width:76px;font-size:.8125rem;font-family:var(--main-font-mono);color:var(--cgg-text);background:var(--cgg-bg);text-transform:lowercase;padding:.4rem .5rem}._cgg-hex-input:focus{border-color:var(--cgg-primary);outline:none;box-shadow:0 0 0 2px #6366f126}._cgg-range-wrapper{align-items:center;gap:.5rem;display:flex}._cgg-range{-webkit-appearance:none;appearance:none;background:var(--cgg-border);cursor:pointer;border-radius:3px;outline:none;width:120px;height:6px}._cgg-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--cgg-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0003}._cgg-range::-moz-range-thumb{background:var(--cgg-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0003}._cgg-range-value{font-size:.75rem;font-family:var(--main-font-mono);color:var(--cgg-text-muted);text-align:right;min-width:2.5rem}@media (max-width:480px){._cgg-stop-controls{flex-direction:column;align-items:stretch}._cgg-range{width:100%}}._cgg-output-card{background:var(--cgg-output-bg);border-radius:var(--cgg-radius-lg);border-style:solid;border-width:1.5px;border-color:var(--cgg-output-border);box-shadow:var(--cgg-shadow-lg), 0 0 0 1px var(--cgg-output-glow);overflow:hidden}._cgg-output-header{background:var(--cgg-output-header-bg);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cgg-output-border);justify-content:space-between;align-items:center;padding:.625rem 1rem;display:flex}._cgg-output-header ._cgg-label{color:var(--cgg-primary);letter-spacing:.05em;font-size:.8125rem;font-weight:700}._cgg-copy-btn{background:var(--cgg-primary);color:#fff;border-radius:var(--cgg-radius);cursor:pointer;border:none;align-items:center;gap:.375rem;padding:.4rem .875rem;font-family:inherit;font-size:.75rem;font-weight:600;transition:opacity .15s;display:inline-flex;box-shadow:0 1px 4px #6366f14d}._cgg-copy-btn:hover{opacity:.88}._cgg-copy-btn svg{width:14px;height:14px}._cgg-code{font-family:var(--main-font-mono);color:var(--cgg-code-text);background:var(--cgg-code-bg);white-space:pre-wrap;word-break:break-all;border-bottom-left-radius:var(--cgg-radius-lg);border-bottom-right-radius:var(--cgg-radius-lg);min-height:3rem;margin:0;padding:2rem 1.125rem;font-size:.8125rem;line-height:1.7}._cgg-code code{font-family:inherit}._cgg-code .hl-prop{color:var(--cgg-code-keyword)}._cgg-code .hl-func{color:var(--cgg-code-function)}._cgg-code .hl-value{color:var(--cgg-code-value)}._cgg-code .hl-punc{color:var(--cgg-code-punctuation)}._cgg-presets-section{flex-direction:column;gap:.5rem;display:flex}._cgg-presets-title{color:var(--cgg-text);text-transform:uppercase;letter-spacing:.03em;padding-left:.125rem;font-size:.75rem;font-weight:600}._cgg-presets-grid{scrollbar-width:thin;scrollbar-color:var(--cgg-border) transparent;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.5rem;max-height:240px;padding:.25rem;display:grid;overflow-y:auto}._cgg-presets-grid::-webkit-scrollbar{width:5px}._cgg-presets-grid::-webkit-scrollbar-track{background:0 0}._cgg-presets-grid::-webkit-scrollbar-thumb{background:var(--cgg-border);border-radius:3px}._cgg-preset-item{aspect-ratio:1.3;border-radius:var(--cgg-radius);cursor:pointer;box-shadow:var(--cgg-shadow);border:2px solid #0000;transition:border-color .15s,box-shadow .15s}._cgg-preset-item:hover{border-color:var(--cgg-primary);box-shadow:0 2px 8px #6366f140}