.cg-tool{gap:1.25rem}.cg-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:1.5rem;display:grid}.cg-side,.cg-controls{flex-direction:column;gap:1rem;min-width:0;display:flex}@media (width>=901px) and (height>=760px){.cg-side{position:sticky;top:84px}}.cg-tool .ui-section-body{gap:.9rem}.cg-tool .ui-icon-btn{width:40px;height:40px}.cg-tool .ui-segment{min-height:36px}.cg-segmented{align-self:flex-start}.cg-tool .ui-btn-sm{min-height:36px}.cg-stage-wrap{flex-direction:column;gap:.6rem;min-width:0;display:flex}.cg-stage{border:1px solid var(--border-input);border-radius:var(--radius-md);background:#eef1f6 50%/cover;height:340px;display:flex;position:relative;overflow:hidden}.cg-stage--tall{height:400px}.cg-stage-content{z-index:1;flex:1;justify-content:center;align-items:center;min-width:0;padding:1.5rem;display:flex;position:relative}.cg-art{width:100%;height:100%;position:absolute;inset:0}.cg-bd-light{background-color:#eef1f6}.cg-bd-dark{background-color:#111827}.cg-bd-grid{background-color:#fff;background-image:conic-gradient(#dfe3ea 25%, transparent 0 50%, #dfe3ea 0 75%, transparent 0);background-size:20px 20px}.cg-bd-shapes{background-color:#1e1b4b}.cg-bd-photo{background:linear-gradient(#1e3a8a 0%,#9d4edd 45%,#f472b6 70%,#fdba74 82%)}.cg-bd-image{background-color:#111827;background-position:50%;background-size:cover}.cg-bd-picker{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.cg-bd-label{color:var(--text-secondary);margin-right:.25rem;font-size:.8125rem;font-weight:600}.cg-bd-options{flex-wrap:wrap;gap:.4rem;display:flex}.cg-bd-option{border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--bg-input);cursor:pointer;place-items:center;width:40px;height:40px;padding:3px;display:grid}.cg-bd-option.is-selected{border-color:var(--accent-indigo);box-shadow:0 0 0 2px var(--accent-indigo)}.cg-bd-option:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:2px}.cg-bd-swatch{border-radius:calc(var(--radius-sm) - 3px);background-position:50%;background-size:cover;width:100%;height:100%;display:block;position:relative;overflow:hidden}.cg-bd-swatch.cg-bd-grid{background-size:10px 10px}.cg-slider-row{align-items:center;gap:.75rem;display:flex}.cg-range{appearance:none;cursor:pointer;background:0 0;flex:1;min-width:0;height:32px;margin:0}.cg-range:focus{outline:none}.cg-range::-webkit-slider-runnable-track{border-radius:var(--radius-full);background:linear-gradient(to right, var(--accent-indigo) var(--cg-fill,0%), var(--bg-tertiary) var(--cg-fill,0%));height:6px}.cg-range::-moz-range-track{border-radius:var(--radius-full);background:var(--bg-tertiary);height:6px}.cg-range::-moz-range-progress{border-radius:var(--radius-full);background:var(--accent-indigo);height:6px}.cg-range::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--bg-card-solid);background:var(--accent-indigo);width:20px;height:20px;box-shadow:0 0 0 1px var(--accent-indigo);border-radius:50%;margin-top:-7px}.cg-range::-moz-range-thumb{border:3px solid var(--bg-card-solid);background:var(--accent-indigo);width:14px;height:14px;box-shadow:0 0 0 1px var(--accent-indigo);border-radius:50%}.cg-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--accent-indigo), 0 0 0 5px var(--border-focus)}.cg-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 1px var(--accent-indigo), 0 0 0 5px var(--border-focus)}.cg-num{border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--bg-input);flex-shrink:0;align-items:center;width:92px;min-height:40px;transition:border-color .15s,box-shadow .15s;display:flex}.cg-num:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px #6366f11f}.cg-num:has(input[aria-invalid=true]){border-color:var(--accent-red)}.cg-num input{width:100%;min-width:0;color:var(--text-primary);font:500 .9rem var(--font-body);font-variant-numeric:tabular-nums;background:0 0;border:none;outline:none;flex:1;align-self:stretch;padding:.4rem .2rem .4rem .6rem}.cg-num-unit{color:var(--text-secondary);padding-right:.6rem;font-size:.8rem}.cg-num--block{width:100%}.cg-color{align-items:center;gap:.5rem;display:flex}.cg-color-swatch{appearance:none;border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--bg-input);cursor:pointer;flex-shrink:0;width:42px;height:42px;padding:3px}.cg-color-swatch::-webkit-color-swatch-wrapper{padding:0}.cg-color-swatch::-webkit-color-swatch{border-radius:calc(var(--radius-sm) - 3px);border:none}.cg-color-swatch::-moz-color-swatch{border-radius:calc(var(--radius-sm) - 3px);border:none}.cg-color-swatch:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:2px}.cg-color-hex{font-family:var(--font-mono);min-height:42px}.cg-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem;display:grid}.cg-presets-group{flex-direction:column;gap:.4rem;display:flex}.cg-presets-label{letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);font-size:.75rem;font-weight:700}.cg-presets{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:.5rem;display:grid}.cg-presets--wide{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}.cg-preset{border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--bg-input);min-width:0;color:var(--text-primary);font:600 .75rem var(--font-body);cursor:pointer;flex-direction:column;align-items:stretch;gap:.3rem;padding:.3rem .3rem .35rem;transition:border-color .15s;display:flex}.cg-preset:hover{border-color:var(--border-focus)}.cg-preset:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:2px}.cg-preset-sample{border-radius:calc(var(--radius-sm) - 2px);background:#eef1f6;place-items:center;height:36px;display:grid;position:relative;overflow:hidden}.cg-preset-name{text-overflow:ellipsis;white-space:nowrap;text-align:center;overflow:hidden}.cg-code-panel{flex-direction:column;gap:.6rem;min-width:0;display:flex}.cg-code-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.cg-code-actions{flex-wrap:wrap;gap:.4rem;display:flex}.cg-code-actions .btn{min-height:38px}.cg-code{max-height:260px}.cg-links{border-top:1px solid var(--border-card);flex-wrap:wrap;align-items:center;gap:.5rem;padding-top:1rem;display:flex}.cg-links-label{color:var(--text-secondary);margin-right:.25rem;font-size:.8125rem;font-weight:600}.cg-link{border:1px solid var(--border-input);border-radius:var(--radius-full);background:var(--bg-input);min-height:38px;color:var(--text-primary);align-items:center;gap:.4rem;padding:.4rem .8rem;font-size:.85rem;font-weight:500;text-decoration:none;transition:border-color .15s;display:inline-flex}.cg-link:hover{border-color:var(--border-focus)}.cg-link:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:2px}.cg-link>svg{color:var(--text-secondary)}.cg-row-actions{flex-wrap:wrap;align-items:center;gap:.25rem;display:flex}@media (width<=900px){.cg-layout{grid-template-columns:minmax(0,1fr)}}@media (width<=600px){.cg-tool{padding:1rem}.cg-tool .ui-section-head{padding:.9rem 1rem}.cg-tool .ui-section-body{padding:0 1rem 1rem}.cg-stage{height:280px}.cg-stage--tall{height:340px}.cg-stage-content{padding:1rem}.cg-grid-2{grid-template-columns:minmax(0,1fr)}.cg-tool input[type=text],.cg-tool .ui-input{font-size:1rem}.cg-tool .ui-segment,.cg-tool .ui-btn-sm{min-height:40px}.cg-range{height:40px}}