[data-tool=color-picker] [hidden]{display:none!important}[data-tool=color-picker] .cp-ico{color:var(--color-accent-deep)}[data-tool=color-picker] .t-drop{position:relative}[data-tool=color-picker] .t-drop span:not(.t-hint){color:var(--color-muted);font-size:var(--text-sm)}[data-tool=color-picker] .t-drop.is-compact{min-block-size:0;padding:var(--space-sm);gap:var(--space-2xs) var(--space-xs);flex-flow:wrap}[data-tool=color-picker] .t-drop.is-compact strong{font-size:var(--text-base)}[data-tool=color-picker] .t-drop.is-compact .cp-ico{block-size:22px;inline-size:22px}[data-tool=color-picker] .cp-screen-hint{margin-block-start:calc(-1 * var(--space-xs))}[data-tool=color-picker] .cp-h{font-size:var(--text-base);margin:0}[data-tool=color-picker] .cp-work{gap:var(--space-xs);flex-direction:column;display:flex}[data-tool=color-picker] .cp-bar{align-items:end}[data-tool=color-picker] .cp-info{overflow-wrap:anywhere;flex:12rem;min-inline-size:0}[data-tool=color-picker] .t-seg label{min-block-size:44px}[data-tool=color-picker] .cp-stage{min-block-size:180px;padding:var(--space-xs);border:1px solid var(--color-line);border-radius:var(--radius-md);background-color:var(--color-surface-2);background-image:conic-gradient(var(--color-line) 25%, transparent 0 50%, var(--color-line) 0 75%, transparent 0);background-size:16px 16px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}[data-tool=color-picker] .cp-frame{border-radius:2px;max-inline-size:100%;line-height:0;display:inline-block;position:relative}[data-tool=color-picker] .cp-canvas{cursor:crosshair;touch-action:none;image-rendering:auto;block-size:auto;max-block-size:min(70vh,640px);inline-size:auto;max-inline-size:100%;display:block}[data-tool=color-picker] .cp-cross{pointer-events:none;border:2px solid var(--color-surface);block-size:22px;inline-size:22px;box-shadow:0 0 0 1.5px var(--color-ink), inset 0 0 0 1.5px var(--color-ink);border-radius:50%;position:absolute;translate:-50% -50%}[data-tool=color-picker] .cp-loupe{z-index:2;pointer-events:none;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-line-strong);box-shadow:var(--shadow-lift);flex-direction:column;align-items:center;gap:4px;padding:6px;display:flex;position:absolute;inset-block-start:0;inset-inline-start:0}[data-tool=color-picker] .cp-loupe canvas{border-radius:4px;block-size:132px;inline-size:132px;display:block}[data-tool=color-picker] .cp-loupe-hex{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:var(--text-xs);font-weight:700;line-height:1.2}[data-tool=color-picker] .cp-pal-panel{gap:var(--space-sm);flex-direction:column;display:flex}[data-tool=color-picker] .cp-pal-n{inline-size:auto;min-inline-size:72px}[data-tool=color-picker] .cp-pal{gap:var(--space-2xs);grid-template-columns:repeat(auto-fill,minmax(88px,1fr));margin:0;padding:0;display:grid}[data-tool=color-picker] .cp-pal button{cursor:pointer;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);inline-size:100%;color:var(--color-ink);text-align:start;flex-direction:column;align-items:stretch;gap:4px;padding:4px;display:flex}[data-tool=color-picker] .cp-pal button:hover{border-color:var(--color-accent)}[data-tool=color-picker] .cp-pal .sw{block-size:52px;box-shadow:inset 0 0 0 1px var(--color-line);border-radius:6px}[data-tool=color-picker] .cp-pal .hx{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:var(--text-xs);font-weight:700}[data-tool=color-picker] .cp-pal .pc{font-size:var(--text-xs);color:var(--color-muted)}[data-tool=color-picker] .cp-cur,[data-tool=color-picker] .cp-hist{gap:var(--space-sm);flex-direction:column;display:flex}[data-tool=color-picker] .cp-cur-top{gap:var(--space-sm);grid-template-columns:88px minmax(0,1fr);align-items:start;display:grid}[data-tool=color-picker] .cp-big{border-radius:var(--radius-md);block-size:88px;inline-size:88px;box-shadow:inset 0 0 0 1px var(--color-line-strong)}[data-tool=color-picker] .cp-in-row{gap:var(--space-2xs);display:flex}[data-tool=color-picker] .cp-in-row .t-input{flex:1;min-inline-size:0}[data-tool=color-picker] .cp-native{border:1px solid var(--color-line-strong);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;flex:none;block-size:44px;inline-size:48px;padding:3px}[data-tool=color-picker] [data-in][aria-invalid=true]{border-color:var(--color-bad)}[data-tool=color-picker] .cp-alpha{color:var(--color-warn);font-weight:600}[data-tool=color-picker] .cp-fmts{border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);flex-direction:column;margin:0;padding:0;display:flex}[data-tool=color-picker] .cp-fmts li{align-items:center;gap:var(--space-2xs);padding:4px 4px 4px var(--space-xs);border-block-end:1px solid var(--color-line);grid-template-columns:4.2rem minmax(0,1fr) auto;display:grid}[data-tool=color-picker] .cp-fmts li:last-child{border-block-end:0}[data-tool=color-picker] .cp-fk{font-size:var(--text-xs);color:var(--color-muted);font-weight:700}[data-tool=color-picker] .cp-fv{font-size:var(--text-sm);overflow-wrap:anywhere;background:0 0;padding:0}[data-tool=color-picker] .cp-fmts .t-btn{min-block-size:44px}[data-tool=color-picker] .cp-ct-grid{gap:var(--space-2xs);grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));display:grid}[data-tool=color-picker] .cp-ct{padding:var(--space-xs);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-line);flex-direction:column;gap:6px;display:flex}[data-tool=color-picker] .cp-ct-aa{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;line-height:1}[data-tool=color-picker] .cp-on-white{color:#fff}[data-tool=color-picker] .cp-on-black{color:#000}[data-tool=color-picker] .cp-ct-txt{border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink);font-size:var(--text-sm);flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 8px;display:flex}[data-tool=color-picker] .cp-ct-lab{color:var(--color-muted)}[data-tool=color-picker] .cp-hlist{gap:var(--space-2xs);flex-wrap:wrap;max-block-size:260px;margin:0;padding:0;display:flex;overflow:auto}[data-tool=color-picker] .cp-hlist:empty{display:none}[data-tool=color-picker] .cp-hlist li{border:1px solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-surface);align-items:stretch;display:inline-flex;overflow:hidden}[data-tool=color-picker] .cp-hlist li.is-cur{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}[data-tool=color-picker] .cp-hlist button{min-block-size:44px;color:var(--color-ink);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:0 8px;display:inline-flex}[data-tool=color-picker] .cp-hlist button:hover{background:var(--color-surface-2)}[data-tool=color-picker] .cp-hlist .dot{block-size:22px;inline-size:22px;box-shadow:inset 0 0 0 1px var(--color-line-strong);border-radius:50%}[data-tool=color-picker] .cp-hlist .hx{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:var(--text-xs);font-weight:700}[data-tool=color-picker] .cp-hlist .rm{color:var(--color-muted);font-size:var(--text-lg);border-inline-start:1px solid var(--color-line);padding:0 12px;line-height:1}[data-tool=color-picker] .cp-exp{max-block-size:220px;margin:0}@media (prefers-reduced-motion:reduce){[data-tool=color-picker] *{transition:none!important}}