.cr-pal-bar{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr) minmax(150px,190px) auto;align-items:end;gap:var(--space-4);padding:var(--space-4) var(--space-5)}.cr-pal-gen{align-self:end}.cr-pal-strip{display:flex;margin:0;padding:0;list-style:none;min-height:380px}.cr-pal-swatch{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-3);transition:flex-grow .2s}.cr-pal-swatch:focus-within,.cr-pal-swatch:hover{flex-grow:1.35}.cr-pal-tools{display:flex;flex-wrap:wrap;gap:2px;opacity:.78}.cr-pal-swatch:focus-within .cr-pal-tools,.cr-pal-swatch:hover .cr-pal-tools,.cr-pal-swatch[data-locked] .cr-pal-tools{opacity:1}.cr-pal-icon{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;color:inherit;background:transparent;border:1.5px solid transparent;border-radius:var(--radius-m);cursor:pointer}.cr-pal-icon:hover:not(:disabled){background:color-mix(in srgb,currentColor 14%,transparent);border-color:color-mix(in srgb,currentColor 40%,transparent)}.cr-pal-icon[aria-pressed=true]{background:color-mix(in srgb,currentColor 18%,transparent);border-color:currentColor}.cr-pal-edit:focus-within,.cr-pal-swatch :focus-visible{outline:3px solid currentColor;outline-offset:1px}.cr-pal-edit input[type=color]{position:absolute;inset:0;width:100%;height:100%;min-width:0;opacity:0;cursor:pointer;padding:0;border:0}.cr-pal-edit:before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid;background:conic-gradient(from 0deg,#f66,#fd6,#6d6,#6df,#96f,#f66)}.cr-pal-values{display:grid;gap:2px;min-width:0}.cr-pal-values button{justify-content:flex-start;gap:6px;min-height:36px;padding:4px 6px;color:inherit;background:transparent;border-color:transparent;font:600 var(--text-xs)/1.25 var(--font-mono);text-align:left;min-width:0}.cr-pal-values button>span:not(.cr-pal-k){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.cr-pal-values button:hover:not(:disabled){background:color-mix(in srgb,currentColor 12%,transparent);border-color:transparent}.cr-pal-values .cr-pal-hex{min-height:44px;font-size:var(--text-l);letter-spacing:.02em}.cr-pal-k{opacity:.7;font-size:var(--text-2xs)}.cr-pal-copy{opacity:0}.cr-pal-values button:focus-visible .cr-pal-copy,.cr-pal-values button:hover .cr-pal-copy{opacity:.8}.cr-pal-use{display:flex;gap:4px;margin-top:4px}.cr-pal-use button{flex:1;color:inherit;background:transparent;justify-content:center;min-height:36px;border:1.5px solid color-mix(in srgb,currentColor 35%,transparent);font-family:var(--font-body);font-size:var(--text-2xs);text-align:center}.cr-pal-hint{margin:0;padding:var(--space-3) var(--space-5) var(--space-2);color:var(--color-muted);font-size:var(--text-xs);border-top:1.5px solid var(--color-line)}.cr-pal-lower{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-bottom:var(--space-8)}.cr-pal-lower .cr-tool{margin-bottom:0}.cr-pal-card .cr-panel{border:0}.cr-pal-sample{display:grid;gap:var(--space-2);padding:var(--space-5);border-radius:var(--radius-m);border:1.5px solid var(--color-line-strong)}.cr-pal-sample p{margin:0}.cr-pal-large{font:800 24px/1.2 var(--font-display)}.cr-pal-ui{justify-self:start;padding:8px 14px;border:2px solid;border-radius:var(--radius-m);font-weight:700;font-size:var(--text-s)}.cr-pal-ratio{margin:0;display:flex;align-items:baseline;gap:var(--space-2)}.cr-pal-ratio strong{font:800 var(--text-2xl)/1 var(--font-display)}.cr-pal-ratio span{color:var(--color-muted);font-size:var(--text-s)}.cr-pal-levels{display:grid;gap:4px;margin:0;padding:0;list-style:none}.cr-pal-levels li{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;align-items:center;gap:var(--space-2);padding:7px 10px;border-radius:var(--radius-m);font-size:var(--text-s);border:1px solid var(--color-line)}.cr-pal-levels small{color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-2xs)}.cr-pal-levels .is-pass{color:var(--color-success);background:var(--color-success-soft)}.cr-pal-levels .is-fail{color:var(--color-danger);background:var(--color-danger-soft)}.cr-pal-levels strong{min-width:3.2em;text-align:right}@media (max-width:1100px){.cr-pal-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cr-pal-mode{grid-row:2}.cr-pal-gen,.cr-pal-mode{grid-column:1/-1}}@media (max-width:900px){.cr-pal-lower{grid-template-columns:minmax(0,1fr)}}@media (max-width:640px){.cr-pal-bar{grid-template-columns:minmax(0,1fr);padding:var(--space-4)}.cr-pal-strip{flex-direction:column;min-height:0}.cr-pal-swatch,.cr-pal-swatch:focus-within,.cr-pal-swatch:hover{flex:none;flex-direction:row-reverse;align-items:center;gap:var(--space-2);min-height:96px}.cr-pal-values{flex:1}.cr-pal-values button{min-height:32px}.cr-pal-tools{flex-direction:column;opacity:1}.cr-pal-copy{opacity:.7}}@media (prefers-reduced-motion:reduce){.cr-pal-swatch{transition:none}}