.color-picker-workspace,.color-picker-workspace section{min-width:0}.color-picker-workspace [hidden]{display:none!important}.color-picker-workspace .btn{min-height:44px}.color-picker-label{gap:8px;font-size:13px;display:grid}.color-picker-label select{width:100%;min-height:44px}.color-picker-input-row{grid-template-columns:56px minmax(0,1fr) 44px;align-items:center;gap:8px;display:grid}.color-native{background:var(--color-paper);border:var(--rule);cursor:pointer;border-radius:10px;width:56px;height:56px;padding:4px}.color-hex{width:100%;min-width:0;height:48px;font-family:var(--font-mono)}.color-random{width:44px;padding:0}.color-picker-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}.color-picker-heading h3{margin:0;font-size:13px}.color-picker-heading .btn{padding-inline:12px;font-size:12px}.color-palettes{scrollbar-gutter:stable;gap:20px;max-height:420px;padding:3px;display:grid;overflow:auto}.color-palettes h4,.color-harmonies h3,.color-variations h4{margin:0 0 8px;font-size:12px;font-weight:600}.color-palette-grid{grid-template-columns:repeat(6,minmax(44px,1fr));gap:8px;display:grid}.color-swatch{border:1px solid var(--color-rule);cursor:pointer;border-radius:9px;justify-content:center;align-items:flex-end;min-width:44px;min-height:56px;padding:3px;transition:box-shadow .15s;display:flex;box-shadow:0 2px 4px #0001}.color-swatch code{font:10px var(--font-mono);white-space:nowrap;color:inherit}.color-swatch:hover{box-shadow:0 4px 10px #0003}.color-swatch[aria-pressed=true],.color-swatch:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.color-palette{min-height:44px}.color-picker-tips{border-top:var(--rule);padding-top:10px}.color-picker-tips summary{cursor:pointer;min-height:44px;font-size:13px}.color-preview{border:var(--rule);height:128px;font:600 18px var(--font-mono);border-radius:12px;place-items:center;width:100%;display:grid}.color-picker-workspace[data-valid=false] .color-preview{color:#172036;background-image:repeating-conic-gradient(#d1d5db 0% 25%,#e5e7eb 0% 50%);background-size:20px 20px}.color-contrast{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.color-contrast>span{background:var(--color-paper);border:var(--rule);border-radius:10px;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:10px;font-size:12px;display:flex}.color-contrast strong{font:12px var(--font-mono)}.color-contrast-link{min-height:44px;color:var(--color-accent-ink);align-items:center;gap:6px;font-size:12px;display:flex}.color-formats{gap:8px;min-width:0;display:grid}.color-formats>div{background:var(--color-paper);border:var(--rule);border-radius:10px;grid-template-columns:46px minmax(0,1fr) 44px;align-items:center;gap:8px;min-height:62px;padding:8px 10px;display:grid}.color-formats>div>span{font:10px var(--font-mono);color:var(--color-muted)}.color-formats code{font:12px/1.5 var(--font-mono);overflow-wrap:anywhere;white-space:pre-wrap;min-width:0}.color-formats .btn{width:44px;padding:0;position:relative}.color-harmonies{gap:16px;min-width:0;display:grid}.color-harmony-swatches{gap:8px;min-width:0;display:flex}.color-harmony-swatches .color-swatch{flex:1}.color-variations{min-width:0}.color-variation-swatches{grid-template-columns:repeat(5,minmax(44px,1fr));gap:4px;display:grid}.color-variation-swatches .color-swatch{min-height:44px}.color-base-divider{align-items:center;gap:10px;padding-block:12px;display:flex}.color-base-divider:before,.color-base-divider:after{content:"";background:var(--color-rule);flex:1;height:1px}.color-base-divider span{border:2px solid var(--color-accent);border-radius:50%;width:32px;height:32px}@media (width<=767px){.color-hex,.color-picker-workspace select{font-size:16px}.color-picker-input-row{grid-template-columns:44px minmax(0,1fr) 44px}.color-native{width:44px;height:44px}.color-palettes{max-height:360px}.color-palette-grid{grid-template-columns:repeat(4,minmax(44px,1fr))}.color-formats>div{grid-template-columns:36px minmax(0,1fr) 44px;gap:6px;padding:8px}.color-formats code{font-size:11px}.color-contrast>span{padding:8px;font-size:11px}.color-variation-swatches{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}}