.cg-layout{display:grid;grid-template-columns:340px 1fr;gap:1.25rem;align-items:start;margin-top:1.5rem}@media(max-width:860px){.cg-layout{grid-template-columns:1fr}}.cg-left{display:flex;flex-direction:column;gap:1rem;position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto;padding-right:2px}@media(max-width:860px){.cg-left{position:static;max-height:none}}.cg-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem 1.1rem}.cg-section-label{font-family:var(--font-accent);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}.cg-type-tabs{display:flex;gap:4px;background:var(--bg);border-radius:var(--radius-sm);padding:3px}.cg-type-btn{flex:1;padding:.38rem 0;border:none;border-radius:6px;background:transparent;font-family:var(--font-accent);font-size:.75rem;font-weight:700;color:var(--mid);cursor:pointer;transition:all .15s}.cg-type-btn.is-active{background:var(--black);color:var(--white)}.cg-track-bg{height:36px;border-radius:18px;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;background-color:#fff;position:relative}.cg-track{height:100%;border-radius:18px;position:relative;cursor:crosshair}.cg-track-handles{position:absolute;inset:0;pointer-events:none}.cg-handle{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;border:3px solid var(--white);box-shadow:0 0 0 1.5px #0000004d,0 2px 4px #0003;cursor:grab;transform:translate(-50%,-50%);touch-action:none;pointer-events:all;z-index:2;transition:box-shadow .1s;box-sizing:border-box}.cg-handle:active{cursor:grabbing}.cg-handle.is-active{box-shadow:0 0 0 2px var(--blue),0 2px 8px #0000004d;z-index:3}.cg-stop-list{display:flex;flex-direction:column;gap:5px}.cg-stop-row{display:grid;grid-template-columns:26px 1fr auto 44px 24px;gap:6px;align-items:center;padding:5px 7px;background:var(--bg);border:1.5px solid transparent;border-radius:var(--radius-sm);transition:border-color .12s}.cg-stop-row.is-active{border-color:var(--blue);background:#f0f5ff}.cg-swatch-wrap{position:relative;width:22px;height:22px;flex-shrink:0}.cg-stop-swatch{position:absolute;inset:0;border-radius:50%;border:2px solid var(--white);box-shadow:0 0 0 1px var(--border);overflow:hidden;pointer-events:none;box-sizing:border-box}.cg-stop-swatch-checker{position:absolute;inset:0;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0;background-color:#fff}.cg-stop-swatch-color{position:absolute;inset:0}.cg-stop-picker{position:absolute;top:0;left:0;width:22px;height:22px;opacity:.01;cursor:pointer;border:none;padding:0;border-radius:50%}.cg-stop-alpha-wrap{display:flex;align-items:center;gap:4px}.cg-stop-alpha-label{font-family:var(--font-accent);font-size:.65rem;color:var(--muted);white-space:nowrap}.cg-stop-alpha-range{flex:1;min-width:0;accent-color:var(--blue);cursor:pointer}.cg-stop-pos-input{width:40px;border:1px solid var(--border);border-radius:4px;padding:2px 4px;font-family:var(--font-accent);font-size:.75rem;text-align:center;background:var(--white);color:var(--text)}.cg-stop-del{width:20px;height:20px;border:none;background:none;font-size:1rem;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:0;line-height:1}.cg-stop-del:hover{color:var(--red);background:#fff0f0}.cg-stop-del:disabled{opacity:.3;cursor:default}.cg-add-stop-btn{width:100%;padding:.45rem;border:1.5px dashed var(--border);border-radius:var(--radius-sm);background:none;font-family:var(--font-accent);font-size:.75rem;font-weight:700;color:var(--mid);cursor:pointer;transition:all .15s}.cg-add-stop-btn:hover{border-color:var(--blue);color:var(--blue);background:#f0f5ff}.cg-ctrl-panel{display:flex;flex-direction:column;gap:.75rem}.cg-ctrl-panel[hidden]{display:none}.cg-ctrl-row{display:flex;align-items:center;gap:.6rem}.cg-ctrl-label{font-family:var(--font-accent);font-size:.7rem;font-weight:700;color:var(--mid);min-width:52px;flex-shrink:0}.cg-angle-range{flex:1;accent-color:var(--black);cursor:pointer}.cg-angle-num{width:48px;border:1px solid var(--border);border-radius:4px;padding:3px 5px;font-family:var(--font-accent);font-size:.75rem;text-align:center}.cg-dir-grid{display:grid;grid-template-columns:repeat(3,28px);gap:2px;margin-left:52px}.cg-dir-btn{width:28px;height:28px;border:1.5px solid var(--border);border-radius:4px;background:var(--bg);font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;padding:0;line-height:1}.cg-dir-btn:hover{border-color:var(--blue);background:var(--white)}.cg-dir-btn.is-active{background:var(--black);color:var(--white);border-color:var(--black)}.cg-dir-center{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.6rem}.cg-shape-btns{display:flex;gap:4px}.cg-shape-btn{padding:.25rem .65rem;border:1.5px solid var(--border);border-radius:var(--radius-pill);background:var(--bg);font-family:var(--font-accent);font-size:.7rem;font-weight:700;cursor:pointer;transition:all .12s}.cg-shape-btn.is-active{background:var(--black);color:var(--white);border-color:var(--black)}.cg-select{flex:1;border:1px solid var(--border);border-radius:4px;padding:3px 5px;font-family:var(--font-accent);font-size:.73rem;background:var(--white);color:var(--text)}.cg-pos-inputs{display:flex;gap:6px;align-items:center}.cg-pos-label{font-family:var(--font-accent);font-size:.68rem;color:var(--muted)}.cg-pos-num{width:52px;border:1px solid var(--border);border-radius:4px;padding:3px 5px;font-family:var(--font-accent);font-size:.75rem;text-align:center}.cg-preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.cg-preset-btn{border:1.5px solid var(--border);border-radius:6px;padding:0;overflow:hidden;cursor:pointer;transition:all .12s;background:none;display:flex;flex-direction:column}.cg-preset-btn:hover{border-color:var(--blue);transform:scale(1.03)}.cg-preset-swatch{height:32px;width:100%}.cg-preset-name{font-family:var(--font-accent);font-size:.58rem;font-weight:700;color:var(--mid);padding:3px 2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--white)}.cg-right{display:flex;flex-direction:column;gap:1rem}.cg-preview-controls{display:flex;gap:.5rem;flex-wrap:wrap}.cg-toggle-group{display:flex;gap:3px}.cg-toggle-btn{padding:.28rem .65rem;border:1.5px solid var(--border);border-radius:var(--radius-pill);background:var(--bg);font-family:var(--font-accent);font-size:.68rem;font-weight:700;cursor:pointer;transition:all .12s;color:var(--mid)}.cg-toggle-btn.is-active{background:var(--black);color:var(--white);border-color:var(--black)}.cg-preview-outer{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);position:relative;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;background-color:#fff}.cg-preview-outer.bg-white{background-image:none;background-color:#fff}.cg-preview-outer.bg-black{background-image:none;background-color:#111}.cg-preview{width:100%;aspect-ratio:1 / 1;transition:aspect-ratio .2s}.cg-preview.ratio-wide{aspect-ratio:16 / 9}.cg-preview.ratio-tall{aspect-ratio:9 / 16}.cg-preview.ratio-square{aspect-ratio:1 / 1}.cg-output-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}.cg-css-out{font-family:Courier New,Courier,monospace;font-size:.8rem;line-height:1.6;resize:vertical;min-height:100px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem .9rem;background:#fafafa;color:var(--text);box-sizing:border-box;width:100%}.cg-copy-btn{padding:.4rem 1.1rem;border:none;border-radius:var(--radius-pill);background:var(--black);color:var(--white);font-family:var(--font-accent);font-size:.73rem;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:all .15s;white-space:nowrap}.cg-copy-btn:hover{background:#333}.cg-copy-btn.cg-copied{background:var(--green);color:var(--black)}.cg-tw-out{font-family:Courier New,Courier,monospace;font-size:.78rem;line-height:1.55;color:var(--mid);word-break:break-all;background:#fafafa;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .9rem;white-space:pre-wrap}