.csg-wrap{display:flex;flex-direction:column;min-width:0;min-height:0}.csg-layout{display:grid;grid-template-columns:clamp(270px,26vw,320px) minmax(0,1fr);gap:1.5rem;flex:1 1 0;min-width:0;min-height:0}.csg-rail{overflow:auto;padding:2px;scrollbar-width:thin}.csg-primary,.csg-secondary{display:flex;flex-direction:column;gap:.9rem;min-width:0}.csg-label-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.csg-preview{display:flex;flex-direction:column;gap:.5rem;min-width:0;min-height:0}.csg-empty{display:none;flex:1;align-items:center;justify-content:center;margin:0;color:var(--color-text-secondary)}.csg-preview:has(.csg-scale:empty) .csg-empty{display:flex}.csg-preview:has(.csg-scale:empty) .csg-scale,.csg-preview:has(.csg-scale:empty) .csg-copy-hint{display:none}.csg-field{display:flex;flex-direction:column;gap:.35rem;min-width:0}.csg-color-row{display:flex;gap:.6rem;align-items:center}.csg-picker{width:44px;height:40px;flex:0 0 44px;padding:3px;border:0;border-radius:var(--radius-md);cursor:pointer;background:var(--color-bg-secondary);box-shadow:inset 0 0 0 1px var(--color-border-soft)}.csg-picker::-webkit-color-swatch-wrapper{padding:0}.csg-picker::-webkit-color-swatch{border:0;border-radius:6px}.csg-picker::-moz-color-swatch{border:0;border-radius:6px}.csg-picker:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.csg-input,.csg-select,.csg-name{width:100%}.csg-input.csg-invalid{box-shadow:inset 0 0 0 1px var(--color-danger),0 0 0 4px color-mix(in oklch,var(--color-danger) 14%,transparent)}.csg-hint{margin:0;color:var(--color-text-muted);font-size:.8rem;line-height:1.4}.csg-more{align-self:stretch;min-width:0}.csg-more summary{display:list-item;min-height:40px;padding:0 .2rem;color:var(--color-text-secondary);font-size:.85rem;font-weight:600;cursor:pointer}.csg-more summary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}.csg-more-body{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:end;padding:.2rem .2rem .4rem}.csg-num{display:flex;flex-direction:column;gap:.3rem;color:var(--color-text-secondary);font-size:.8rem;font-weight:600}.csg-num .tool-input{width:7.5rem}.csg-more-body .csg-hint{flex:1 1 16rem}.csg-status{margin:0;height:6em;overflow:auto;flex:none;font-size:.8rem;line-height:1.35}.csg-scale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(105px,1fr);flex:1 1 0;min-height:0;overflow:auto;scrollbar-width:thin;gap:.45rem;margin:0;padding:0;list-style:none}.csg-item{min-width:0;min-height:0}.csg-card{display:flex;flex-direction:row;width:100%;height:100%;overflow:hidden;padding:0;border:0;border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);cursor:pointer;font:inherit;text-align:left;box-shadow:inset 0 0 0 1px var(--color-border-soft),var(--shadow-card);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}@media(hover:hover){.csg-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 26%,transparent),var(--shadow-card-hover)}}.csg-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.csg-card:active{transform:scale(.985)}.csg-card.csg-is-base{box-shadow:inset 0 0 0 2px var(--color-text),var(--shadow-card)}.csg-swatch{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.3rem;min-height:64px;width:4.4rem;flex:none;padding:.4rem}.csg-step,.csg-badge{display:inline-flex;justify-content:center;padding:.2rem .36rem;border-radius:var(--radius-pill);font-size:.7rem;font-weight:800;line-height:1}.csg-badge{font-weight:700}.csg-info{min-width:0;display:flex;flex:1;flex-direction:column;gap:.2rem;padding:.45rem .4rem .5rem;background:var(--color-surface);box-shadow:inset 0 1px 0 var(--color-border-soft)}.csg-hex{font-family:var(--font-mono);font-size:.78rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere}.csg-meta{color:var(--color-text-secondary);font-family:var(--font-mono);font-size:.62rem;line-height:1.3}.csg-contrast{display:flex;flex-direction:column;gap:.15rem;margin-top:.1rem}.csg-cr{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .3rem;color:var(--color-text-secondary);font-size:.66rem;line-height:1.3}.csg-cr-num{color:var(--color-text);font-family:var(--font-mono);font-weight:700}.csg-grade{padding:0 .25rem;border-radius:var(--radius-sm);background:color-mix(in oklch,var(--color-success) 16%,transparent);color:var(--color-text);font-weight:700}.csg-grade-large{background:color-mix(in oklch,var(--color-accent) 18%,transparent)}.csg-copy-hint{margin-top:-.4rem}.csg-export{padding:.9rem;border-radius:var(--radius-md);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-soft)}.csg-export-bar{display:flex;flex-direction:column;gap:.65rem;padding-top:.7rem}.csg-export-actions{display:flex;gap:.5rem;align-items:center;min-height:40px}.csg-code{margin:0;height:12rem;max-height:12rem;overflow:auto;padding:.85rem 1rem;border-radius:var(--radius-md);background:var(--color-bg-secondary);box-shadow:inset 0 0 0 1px var(--color-border-soft);font-family:var(--font-mono);font-size:.8rem;line-height:1.5;white-space:pre}.csg-code code{background:transparent;color:inherit;padding:0;font:inherit}.csg-code-box{min-width:0}#csg-export-note{height:4em;overflow:auto}.csg-secondary summary{cursor:pointer;min-height:24px;color:var(--color-text-secondary)}.csg-export-actions{flex-wrap:wrap}.csg-export-actions button{flex:1}.csg-copy-hint{height:4em;overflow:auto;flex:none}@media(min-width:1700px){.csg-scale{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:860px){.csg-layout{grid-template-columns:minmax(0,1fr);flex:none;gap:.8rem}.csg-rail{display:contents}.csg-primary{order:1}.csg-preview{order:2}.csg-secondary{order:3}.csg-scale{flex:none;height:27rem;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:135px}.csg-preview:has(.csg-scale:empty)>:not(.csg-status){display:none}.csg-status{height:7em}}@media(max-width:640px){.csg-primary{gap:.55rem}.csg-card{flex-direction:column}.csg-swatch{width:auto;min-height:35px;flex-direction:row;align-items:center}.csg-info{padding:.35rem .45rem;gap:.15rem}.csg-hex{font-size:.78rem}.csg-oklch{font-size:.64rem}.csg-contrast{font-size:.63rem;gap:.1rem}.csg-export-actions button,.csg-select,.csg-picker{min-height:44px}}