@layer colorshot{[data-colorshot],[data-colorshot-field]{--cs-width:280px;--cs-padding:12px;--cs-gap:10px;--cs-radius:12px;--cs-radius-sm:8px;--cs-radius-control:6px;--cs-radius-inner:4px;--cs-gap-inline:6px;--cs-gap-row:6px;--cs-area-height:184px;--cs-area-height-gradient:var(--cs-area-height);--cs-thumb:18px;--cs-track-height:12px;--cs-control:28px;--cs-font-size:12px;--cs-font-size-sm:11px;--cs-font-size-xs:10px;--cs-swatch-columns:8;--cs-bg:#fff;--cs-fg:#18181b;--cs-muted:#5f5f68;--cs-border:#00000014;--cs-surface:#f4f4f5;--cs-surface-hover:#e9e9ec;--cs-raised:#fff;--cs-divider:#0000000f;--cs-danger:#dc2626;--cs-accent:#2563eb;--cs-shadow:0 1px 2px #0000000f,0 4px 8px -2px #0000000f,0 16px 36px -8px #0003;--cs-checker-a:#e4e4e7;--cs-checker-b:#fff;--cs-checker:repeating-conic-gradient(var(--cs-checker-a) 0% 25%,var(--cs-checker-b) 0% 50%) 0 0 / 8px 8px;--cs-hairline:#0000001a;--cs-edge:#0000001a;--cs-ease:cubic-bezier(.2,0,0,1);--cs-motion-fast:.12s;--cs-motion:.16s}[data-colorshot]{box-sizing:border-box;gap:var(--cs-gap);width:var(--cs-width);max-width:100%;padding:var(--cs-padding);background:var(--cs-bg);color:var(--cs-fg);border:1px solid var(--cs-border);border-radius:var(--cs-radius);box-shadow:var(--cs-shadow);font-size:var(--cs-font-size);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;flex-direction:column;line-height:1.2;display:flex;position:relative}[data-colorshot]:not([data-settled]) *,[data-colorshot]:not([data-settled]) :before,[data-colorshot]:not([data-settled]) :after{transition:none!important}[data-colorshot][data-theme=dark],[data-colorshot-field][data-theme=dark]{--cs-bg:#18181b;--cs-fg:#f4f4f5;--cs-muted:#a1a1aa;--cs-border:#ffffff1c;--cs-surface:#27272a;--cs-surface-hover:#323236;--cs-raised:#303036;--cs-danger:#f87171;--cs-divider:#ffffff12;--cs-accent:#60a5fa;--cs-shadow:0 1px 2px #0006,0 6px 12px -2px #00000059,0 20px 48px -8px #000000b3;--cs-checker-a:#3f3f46;--cs-checker-b:#27272a;--cs-hairline:#ffffff1f;--cs-edge:#ffffff24}@media (prefers-color-scheme:dark){[data-colorshot]:not([data-theme=light]),[data-colorshot-field]:not([data-theme=light]){--cs-bg:#18181b;--cs-fg:#f4f4f5;--cs-muted:#a1a1aa;--cs-border:#ffffff1c;--cs-surface:#27272a;--cs-surface-hover:#323236;--cs-raised:#303036;--cs-danger:#f87171;--cs-divider:#ffffff12;--cs-accent:#60a5fa;--cs-shadow:0 1px 2px #0006,0 6px 12px -2px #00000059,0 20px 48px -8px #000000b3;--cs-checker-a:#3f3f46;--cs-checker-b:#27272a;--cs-hairline:#ffffff1f;--cs-edge:#ffffff24}}[data-colorshot] *,[data-colorshot] :before,[data-colorshot] :after{box-sizing:border-box}[data-colorshot] button,[data-colorshot] input,[data-colorshot] select{font:inherit;color:inherit;margin:0}[data-colorshot] button{cursor:pointer;background:0 0;border:0;padding:0}[data-colorshot] :focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}[data-colorshot] [data-part=sr-only]{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}[data-colorshot] [data-part=eye-dropper] svg,[data-colorshot] [data-part=icon-button] svg,[data-colorshot] [data-part=select-chevron],[data-colorshot] [data-part=swatch-add] svg,[data-colorshot] [data-part=swatch-search] svg,[data-colorshot] [data-part=select-check] svg,[data-colorshot] [data-part=select-action] svg,[data-colorshot] [data-part=mode-tabs] button svg{flex:none;width:14px;height:14px}[data-colorshot] [data-tooltip]{position:relative}[data-colorshot] [data-tooltip]:after{content:attr(data-tooltip);z-index:40;border-radius:var(--cs-radius-control);background:var(--cs-fg);color:var(--cs-bg);font-size:var(--cs-font-size-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--cs-motion-fast),transform var(--cs-motion-fast) var(--cs-ease);padding:4px 7px;font-weight:500;line-height:1.2;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,3px)}[data-colorshot] [data-tooltip]:hover:after,[data-colorshot] [data-tooltip]:focus-visible:after{opacity:1;transition-delay:.4s;transform:translate(-50%)}[data-colorshot] [data-part=slider-row]>[data-tooltip]:first-child:after,[data-colorshot] [data-part=current]>[data-tooltip]:first-child:after{left:0;transform:translateY(3px)}[data-colorshot] [data-part=gradient-controls]>:last-child [data-tooltip]:after,[data-colorshot] [data-part=gradient-controls]>[data-tooltip]:last-child:after,[data-colorshot] [data-part=swatch-header]>[data-tooltip]:last-child:after{left:auto;right:0;transform:translateY(3px)}[data-colorshot] [data-part=slider-row]>[data-tooltip]:first-child:is(:hover,:focus-visible):after,[data-colorshot] [data-part=current]>[data-tooltip]:first-child:is(:hover,:focus-visible):after,[data-colorshot] [data-part=gradient-controls]>:last-child [data-tooltip]:is(:hover,:focus-visible):after,[data-colorshot] [data-part=gradient-controls]>[data-tooltip]:last-child:is(:hover,:focus-visible):after,[data-colorshot] [data-part=swatch-header]>[data-tooltip]:last-child:is(:hover,:focus-visible):after{transform:translate(0)}[data-colorshot] [data-tooltip]:active:after,[data-colorshot] [data-tooltip][data-tooltip-hidden]:after{opacity:0;transition-delay:0s}[data-colorshot] [data-part=gamut-badge]{top:6px;min-height:24px;font-size:var(--cs-font-size-xs);letter-spacing:.02em;color:#fff;cursor:pointer;background:#0009;border-radius:999px;padding-inline:7px;font-weight:600;position:absolute;inset-inline-end:6px}[data-colorshot] [data-part=gamut-badge]:hover{background:#000000bf}@media (prefers-reduced-motion:reduce){[data-colorshot] *,[data-colorshot],[data-colorshot-field]{transition:none!important;animation:none!important}}[data-colorshot] [data-part=area],[data-colorshot] [data-slider],[data-colorshot] [data-part=gradient-bar],[data-colorshot] [data-part=center-pad]{container-type:size}[data-colorshot] [data-part=area-thumb],[data-colorshot] [data-part=slider-thumb],[data-colorshot] [data-part=stop],[data-colorshot] [data-part=center-handle]{width:var(--cs-thumb);height:var(--cs-thumb);background:var(--_cs-thumb-color);translate:calc(var(--_cs-x) * 100cqw - 50%) calc(var(--_cs-y,.5) * 100cqh - 50%);transition:translate var(--cs-motion) var(--cs-ease),scale var(--cs-motion) var(--cs-ease),box-shadow var(--cs-motion-fast),opacity var(--cs-motion-fast);border:2.5px solid #fff;border-radius:50%;outline:none;position:absolute;top:0;left:0;scale:1;box-shadow:0 0 0 1px #0000003d,0 2px 6px #00000038}[data-colorshot] [data-part=center-handle]{translate:calc(clamp(0,var(--_cs-x),1) * 100cqw - 50%) calc(clamp(0,var(--_cs-y),1) * 100cqh - 50%)}[data-colorshot] [data-part=area-thumb]:focus-visible,[data-colorshot] [data-part=slider-thumb]:focus-visible,[data-colorshot] [data-part=stop]:focus-visible,[data-colorshot] [data-part=center-handle]:focus-visible{box-shadow:0 0 0 1px #0000003d,0 0 0 3px var(--cs-bg),0 0 0 5px var(--cs-accent)}[data-colorshot] [data-dragging]>[data-part],[data-colorshot] [data-wheeling]>[data-part],[data-colorshot] [data-part=area]:hover>[data-part=area-thumb],[data-colorshot] [data-slider]:hover>[data-part=slider-thumb],[data-colorshot] [data-part=gradient-bar]:hover>[data-part=stop],[data-colorshot] [data-part=center-pad]:hover>[data-part=center-handle],[data-colorshot] [data-part=area-thumb]:focus-visible,[data-colorshot] [data-part=slider-thumb]:focus-visible,[data-colorshot] [data-part=stop]:focus-visible,[data-colorshot] [data-part=center-handle]:focus-visible{will-change:translate}[data-colorshot] [data-dragging]>[data-part],[data-colorshot] [data-wheeling]>[data-part]{transition:scale var(--cs-motion) var(--cs-ease),box-shadow var(--cs-motion-fast),opacity var(--cs-motion-fast)}[data-colorshot] [data-part=area][data-dragging]:not([data-outside]),[data-colorshot] [data-slider][data-dragging]:not([data-outside]),[data-colorshot][data-colorshot] [data-wheeling][data-wheeling],[data-colorshot][data-colorshot] [data-wheeling][data-wheeling] *{cursor:none}[data-colorshot] [data-dragging]>[data-part=area-thumb],[data-colorshot] [data-wheeling]>[data-part=area-thumb]{border-width:2px;scale:1.55;box-shadow:0 0 0 1px #0000002e,0 6px 18px #00000052}[data-colorshot] [data-dragging]>[data-part=slider-thumb],[data-colorshot] [data-wheeling]>[data-part=slider-thumb]{scale:1.3;box-shadow:0 0 0 1px #0000002e,0 4px 12px #0000004d}[data-colorshot] [data-part=area]:hover:not([data-dragging],[data-wheeling])>[data-part=area-thumb],[data-colorshot] [data-slider]:hover:not([data-dragging],[data-wheeling])>[data-part=slider-thumb]{scale:1.08}[data-colorshot] [data-part=area-label]{z-index:2;translate:clamp(30px,calc(var(--_cs-x) * 100cqw),calc(100cqw - 30px)) calc(var(--_cs-y) * 100cqh);border-radius:var(--cs-radius-inner);color:#fff;font-size:var(--cs-font-size-xs);letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--cs-motion-fast);background:#000000b8;padding:3px 6px;font-weight:600;position:absolute;top:0;left:0;transform:translate(-50%,calc(-100% - 22px))}[data-colorshot] [data-part=area][data-label-below]>[data-part=area-label]{transform:translate(-50%,22px)}[data-colorshot] [data-part=area][data-dragging]>[data-part=area-label],[data-colorshot] [data-part=area][data-wheeling]>[data-part=area-label]{opacity:1}[data-colorshot] [data-slider]:before,[data-colorshot] [data-part=gradient-bar]:before{content:"";inset:-6px calc(var(--cs-thumb) / -2);position:absolute}[data-colorshot]:not([data-mode=solid]) [data-part=area]{height:var(--cs-area-height-gradient)}[data-colorshot] [data-part=area]{height:var(--cs-area-height);transition:height var(--cs-motion) var(--cs-ease);border-radius:var(--cs-radius-sm);background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--_cs-area-hue);box-shadow:inset 0 0 0 1px var(--cs-edge);touch-action:none;cursor:crosshair;contain:layout;position:relative}[data-colorshot]>[data-part=area]:first-child{--_cs-edge-room:calc(var(--cs-thumb) / 2 + 2px);margin:calc(-1 * var(--cs-padding) - 1px) calc(-1 * var(--cs-padding) - 1px) 0;border-radius:var(--cs-radius) var(--cs-radius) 0 0;box-shadow:none}[data-colorshot]>[data-part=area]:first-child>[data-part=area-thumb]{translate:calc(clamp(var(--_cs-edge-room),var(--_cs-x) * 100cqw,100cqw - var(--_cs-edge-room)) - 50%) calc(max(var(--_cs-edge-room),var(--_cs-y) * 100cqh) - 50%)}[data-colorshot][data-variant=inset]{--cs-area-height:168px}[data-colorshot][data-variant=inset][data-size=sm]{--cs-area-height:140px}[data-colorshot]>[data-part=area]:first-child>[data-part=gamut-badge]{top:8px;inset-inline-end:8px}[data-colorshot] [data-part=area][data-space=oklch]{background:#000}[data-colorshot] [data-part=area-canvas],[data-colorshot] [data-part=area-edge]{border-radius:inherit;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}[data-colorshot] [data-part=area-edge] path{fill:none;stroke:#ffffffbf;stroke-width:1.25px;stroke-dasharray:3 3}[data-colorshot] [data-part=area][data-space=oklch] [data-part=area-thumb]{z-index:1}[data-colorshot] [data-part=area-contrast]{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}[data-colorshot] [data-part=area-contrast] path{fill:none;stroke:#fff;stroke-width:1.5px;stroke-dasharray:4 3;filter:drop-shadow(0 0 1px #000000b3)}[data-colorshot] [data-part=sliders]{gap:var(--cs-gap);flex-direction:column;display:flex}[data-colorshot] [data-slider]{height:var(--cs-track-height);background:var(--_cs-track);box-shadow:inset 0 0 0 1px var(--cs-edge);touch-action:none;cursor:pointer;border-radius:999px;position:relative}[data-colorshot] [data-slider][data-checker]{background:var(--_cs-track),var(--cs-checker)}[data-colorshot] [data-slider]>[data-part=slider-thumb]{translate:calc(var(--cs-thumb) / 2 + var(--_cs-x) * (100cqw - var(--cs-thumb)) - 50%) calc(50cqh - 50%)}[data-colorshot] [data-part=mode-tabs],[data-colorshot] [data-part=segmented]{height:var(--cs-control);background:var(--cs-surface);border-radius:var(--cs-radius-control);isolation:isolate;grid-auto-columns:1fr;grid-auto-flow:column;gap:2px;padding:2px;display:grid;position:relative}[data-colorshot] [data-part=mode-indicator],[data-colorshot] [data-part=segmented-indicator]{z-index:-1;top:2px;bottom:2px;width:calc((100% - 4px - (var(--_cs-count) - 1) * 2px) / var(--_cs-count));border-radius:var(--cs-radius-inner);background:var(--cs-raised);box-shadow:0 1px 2px #0000001f,0 0 0 .5px var(--cs-border);transform:translateX(calc(var(--_cs-index) * (100% + 2px)));transition:transform var(--cs-motion) var(--cs-ease);position:absolute;inset-inline-start:2px}:is([data-colorshot] [data-part=mode-indicator]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),[data-colorshot] [data-part=segmented-indicator]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){transform:translateX(calc(var(--_cs-index) * (-100% - 2px)))}[data-colorshot] [data-part=mode-tabs] button,[data-colorshot] [data-part=segmented] button{border-radius:var(--cs-radius-inner);height:100%;color:var(--cs-muted);font-size:var(--cs-font-size);transition:color var(--cs-motion-fast);justify-content:center;align-items:center;gap:5px;font-weight:500;display:flex}[data-colorshot] [data-part=mode-tabs] button svg{flex:none;width:14px;height:14px}[data-colorshot] [data-part=mode-tabs] button:hover,[data-colorshot] [data-part=segmented] button:hover,[data-colorshot] [data-part=mode-tabs] button[data-state=active],[data-colorshot] [data-part=segmented] button[data-state=active]{color:var(--cs-fg)}[data-colorshot] [data-part=mode-tabs] button:focus-visible,[data-colorshot] [data-part=segmented] button:focus-visible{outline-offset:-1px}[data-colorshot] [data-part=gradient-editor]{grid-template-rows:1fr;display:grid}[data-colorshot] [data-part=gradient-editor][data-reveal]{animation:cs-reveal var(--cs-motion) var(--cs-ease)}@keyframes cs-reveal{0%{opacity:0;grid-template-rows:0fr;margin-block-start:calc(-1 * var(--cs-gap))}}[data-colorshot] [data-part=gradient-editor-inner]{gap:var(--cs-gap);flex-direction:column;min-height:0;display:flex}[data-colorshot] [data-part=gradient-editor][data-reveal]>[data-part=gradient-editor-inner]{animation:cs-clip var(--cs-motion)}@keyframes cs-clip{0%,to{overflow:visible clip}}[data-colorshot] [data-part=gradient-bar]{--_cs-pin:18px;--_cs-cap:calc(var(--_cs-pin) / 2 + 3px);height:calc(var(--_cs-pin) + 6px);padding-inline:var(--_cs-cap);border-radius:var(--_cs-cap);background:var(--_cs-track) var(--_cs-cap) 0 / calc(100% - 2 * var(--_cs-cap)) 100% no-repeat,linear-gradient(90deg,var(--_cs-track-start,transparent) 50%,var(--_cs-track-end,transparent) 50%),var(--cs-checker);box-shadow:inset 0 0 0 1px var(--cs-edge);touch-action:none;cursor:copy;position:relative}[data-colorshot] [data-part=gradient-bar]:before{inset:-6px 0}[data-colorshot] [data-part=gradient-bar]>[data-part=stop]{--cs-thumb:var(--_cs-pin);translate:calc(var(--_cs-cap) + var(--_cs-x) * 100cqw - 50%) calc(50cqh - 50%);background:linear-gradient(var(--_cs-stop-color),var(--_cs-stop-color)),var(--cs-checker);cursor:grab}[data-colorshot] [data-part=gradient-bar]>[data-part=stop]:hover{scale:1.08}[data-colorshot] [data-part=gradient-bar]>[data-part=stop][data-state=selected]{z-index:1;box-shadow:0 0 0 2px var(--cs-accent),0 3px 10px #00000047;scale:1.12}[data-colorshot] [data-part=gradient-bar]>[data-part=stop][data-state=selected]:focus-visible{box-shadow:0 0 0 2px var(--cs-accent),0 0 0 4px var(--cs-bg),0 0 0 6px var(--cs-accent)}[data-colorshot] [data-part=gradient-bar][data-dragging],[data-colorshot] [data-part=gradient-bar][data-dragging] *{cursor:grabbing}[data-colorshot] [data-part=gradient-bar][data-dragging]>[data-part=stop][data-state=selected]{cursor:grabbing;scale:1.2}[data-colorshot] [data-part=stop][data-enter]{animation:cs-stop-in var(--cs-motion-fast) var(--cs-ease)}@keyframes cs-stop-in{0%{opacity:0;scale:.6}}[data-colorshot] [data-part=stop][data-removing]{opacity:.35;scale:.8}[data-colorshot] [data-part=gradient-bar]:after{content:"";translate:calc(var(--_cs-cap) + var(--_cs-hover-x,0) * 100cqw - 50%) 0;opacity:0;pointer-events:none;width:2px;height:100%;transition:opacity var(--cs-motion-fast);background:#fff;border-radius:2px;position:absolute;top:0;left:0;box-shadow:0 0 0 1px #00000040}[data-colorshot] [data-part=gradient-bar]:hover:after{opacity:.95}[data-colorshot] [data-part=gradient-bar][data-dragging]:after{opacity:0}[data-colorshot] [data-part=gradient-bar]:has([data-part=stop]:hover):after{opacity:0}[data-colorshot] [data-part=stop-label]{border-radius:var(--cs-radius-inner);background:var(--cs-fg);color:var(--cs-bg);font-size:var(--cs-font-size-xs);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--cs-motion-fast),transform var(--cs-motion-fast) var(--cs-ease);padding:2px 5px;font-weight:600;line-height:1.3;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,3px)}[data-colorshot] [data-part=stop][data-active] [data-part=stop-label],[data-colorshot] [data-part=stop]:focus-visible [data-part=stop-label]{opacity:1;transform:translate(-50%)}[data-colorshot] [data-part=gradient-controls]{align-items:center;gap:var(--cs-gap-inline);min-width:0;display:flex}[data-colorshot] [data-part=spacer]{flex:1 1 0;min-width:0}[data-colorshot] [data-part=angle-dial]{width:var(--cs-control);height:var(--cs-control);box-shadow:inset 0 0 0 1px var(--cs-hairline);touch-action:none;cursor:grab;background:0 0;border-radius:50%;flex:none;position:relative}[data-colorshot] [data-part=angle-dial][data-dragging]{cursor:grabbing}[data-colorshot] [data-part=angle-handle]{transform:rotate(var(--_cs-angle));border-radius:50%;outline:none;position:absolute;inset:0}[data-colorshot] [data-part=angle-handle]:before{content:"";background:var(--cs-muted);width:1.5px;margin-left:-.75px;position:absolute;top:7px;bottom:50%;left:50%}[data-colorshot] [data-part=angle-handle]:after{content:"";background:var(--cs-fg);border-radius:50%;width:6px;height:6px;margin-left:-3px;position:absolute;top:3px;left:50%}[data-colorshot] [data-part=angle-handle]:focus-visible{box-shadow:0 0 0 2px var(--cs-bg),0 0 0 4px var(--cs-accent)}[data-colorshot] [data-part=center-pad]{width:var(--cs-control);height:var(--cs-control);border-radius:var(--cs-radius-control);background:var(--_cs-preview),var(--cs-checker);box-shadow:inset 0 0 0 1px var(--cs-border);touch-action:none;cursor:move;flex:none;position:relative}[data-colorshot] [data-part=center-pad][data-disabled]{cursor:default}[data-colorshot] [data-part=center-handle]{--cs-thumb:9px;--_cs-thumb-color:transparent;border-width:1.5px}[data-colorshot] [data-part=gradient-controls] [data-part=segmented]{flex:0 156px;min-width:0}[data-colorshot] [data-part=gradient-controls] [data-part=segmented] button{font-size:var(--cs-font-size-sm);gap:6px;padding-inline:8px}[data-colorshot] [data-part=shape-icon]{border:1.5px solid;border-radius:50%;width:11px;height:11px}[data-colorshot] [data-part=shape-icon][data-shape=ellipse]{width:14px;height:9px}[data-colorshot] [data-part=icon-button]{width:var(--cs-control);height:var(--cs-control);border-radius:var(--cs-radius-control);color:var(--cs-muted);transition:background var(--cs-motion-fast),color var(--cs-motion-fast),transform var(--cs-motion-fast);flex:none;place-items:center;display:grid}[data-colorshot] [data-part=icon-button]:hover:not(:disabled),[data-colorshot] [data-part=icon-button][data-state=open]{background:var(--cs-surface);color:var(--cs-fg)}[data-colorshot] [data-part=icon-button]:disabled{opacity:.35;cursor:default}[data-colorshot] [data-part=icon-button][data-size=sm]{width:calc(var(--cs-control) - 6px);height:calc(var(--cs-control) - 6px)}[data-colorshot] [data-part=menu]{flex:none;position:relative}[data-colorshot] [data-part=menu][data-align=end] [data-part=select-menu]{transform-origin:100% 0;left:auto;right:0}[data-colorshot] [data-part=menu] [data-part=select-menu]:focus:not(:focus-visible){outline:none}[data-colorshot] [data-part=menu-separator]{background:var(--cs-border);height:1px;margin:4px 2px}[data-colorshot] [data-part=select-option][aria-disabled=true]{opacity:.4;cursor:default}[data-colorshot] [data-part=select-option] [data-part=select-check] svg{width:14px;height:14px}[data-colorshot] [data-part=eye-dropper]{width:var(--cs-control);height:var(--cs-control);border-radius:var(--cs-radius-control);color:var(--cs-fg);box-shadow:inset 0 0 0 1px var(--cs-hairline);transition:background var(--cs-motion-fast);background:0 0;flex:none;place-items:center;display:grid}[data-colorshot] [data-part=eye-dropper]:hover{background:var(--cs-surface)}[data-colorshot] [data-part=eye-dropper][data-state=active]{background:var(--cs-accent);color:#fff;animation:1.4s ease-out infinite cs-pulse}@keyframes cs-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cs-accent) 55%,transparent)}to{box-shadow:0 0 0 10px #0000}}[data-colorshot] [data-part=eye-dropper]:active,[data-colorshot] [data-part=icon-button]:active:not(:disabled),[data-colorshot] [data-part=mode-tabs] button:active,[data-colorshot] [data-part=segmented] button:active{transform:scale(.94)}[data-colorshot] [data-part=eye-dropper],[data-colorshot] [data-part=icon-button]{transition:background var(--cs-motion-fast),color var(--cs-motion-fast),transform var(--cs-motion-fast)}[data-colorshot] [data-part=inputs]{align-items:center;gap:var(--cs-gap-inline);display:flex}[data-colorshot] [data-part=fields]{gap:var(--cs-gap-inline);flex:1;min-width:0;display:flex}[data-colorshot] [data-part=field]{min-width:0;height:var(--cs-control);border-radius:var(--cs-radius-control);box-shadow:inset 0 0 0 1px var(--cs-hairline);transition:box-shadow var(--cs-motion-fast);background:0 0;flex:1 1 0;align-items:center;gap:3px;padding-inline:8px;display:flex}[data-colorshot] [data-part=field]:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cs-fg) 24%,transparent)}[data-colorshot] [data-part=field]:focus-within{box-shadow:inset 0 0 0 1.5px var(--cs-accent)}[data-colorshot] [data-part=field][data-field=hex]{flex-grow:3}[data-colorshot] [data-part=field-sizer]{flex:auto;min-width:0;display:inline-grid}[data-colorshot] [data-part=field-ghost]{visibility:hidden;white-space:pre;grid-area:1/1;height:0;padding-inline-end:2px;overflow:hidden}[data-colorshot] [data-part=field-sizer]>[data-part=field-input]{grid-area:1/1;width:0;min-width:100%}[data-colorshot] [data-part=field][data-field=alpha],[data-colorshot] [data-part=field][data-field=angle],[data-colorshot] [data-part=field][data-field=stop]{flex:none;gap:1px}[data-colorshot] [data-part=field][data-field=alpha]{padding-inline:7px}[data-colorshot] [data-part=field-sizer]:has(+[data-part=field-label])>[data-part=field-input]{text-align:right}[data-colorshot] [data-part=field-label]{color:var(--cs-muted);font-size:var(--cs-font-size-sm);cursor:ew-resize;touch-action:none;flex:none}[data-colorshot] [data-field=hex] [data-part=field-label]{cursor:default}[data-colorshot] [data-part=field-input]{-webkit-user-select:text;user-select:text;text-transform:none;background:0 0;border:0;outline:none;flex:1;width:100%;min-width:0;padding:0}[data-colorshot] [data-field=channel]{flex:auto;padding-inline:4px}[data-colorshot] [data-field=channel] [data-part=field-input]{text-align:center}[data-colorshot] [data-field=hex] [data-part=field-input]{text-transform:uppercase}[data-colorshot] [data-part=preview][data-compare]{width:var(--cs-control);height:calc(var(--cs-track-height) * 2 + var(--cs-gap));flex-direction:column;flex:none}[data-colorshot] [data-part=preview][data-compare] [data-part=preview-swatch]{width:100%}[data-colorshot] [data-part=header]{align-items:center;gap:var(--cs-gap-inline);display:flex}[data-colorshot] [data-part=header]>[data-part=mode-tabs]{flex:1;min-width:0}[data-colorshot] [data-part=current]{width:var(--cs-control);height:var(--cs-control);border-radius:var(--cs-radius-control);box-shadow:inset 0 0 0 1px var(--cs-border);transition:width var(--cs-motion) var(--cs-ease);flex:none;display:flex}[data-colorshot] [data-part=current][data-compare]{width:calc(var(--cs-control) * 1.7)}[data-colorshot] [data-part=current-value],[data-colorshot] [data-part=current-original]{background:var(--cs-checker);cursor:pointer;flex:1;min-width:0;position:relative}[data-colorshot] [data-part=current-value]:before,[data-colorshot] [data-part=current-original]:before{content:"";border-radius:inherit;background:var(--_cs-swatch);box-shadow:inset 0 0 0 1px var(--cs-edge);position:absolute;inset:0}[data-colorshot] [data-part=current-morph]{border-radius:inherit;background:var(--cs-checker);animation:cs-morph var(--cs-motion) var(--cs-ease) both;pointer-events:none;position:absolute;inset:0}[data-colorshot] [data-part=current-morph]:before{content:"";border-radius:inherit;background:var(--_cs-swatch);box-shadow:inset 0 0 0 1px var(--cs-edge);position:absolute;inset:0}@keyframes cs-morph{0%{clip-path:circle(0%)}to{clip-path:circle(72%)}}[data-colorshot] [data-part=current]>:first-child{border-radius:var(--cs-radius-control) 0 0 var(--cs-radius-control)}[data-colorshot] [data-part=current]>:last-child{border-radius:0 var(--cs-radius-control) var(--cs-radius-control) 0}[data-colorshot] [data-part=current]>:only-child{border-radius:var(--cs-radius-control)}[data-colorshot] [data-part=slider-row]{align-items:center;gap:var(--cs-gap-inline);display:flex}[data-colorshot] [data-part=slider-row]>[data-part=sliders]{flex:1;min-width:0}[data-colorshot] [data-part=slider-row]>[data-part=eye-dropper]{box-shadow:none;color:var(--cs-muted);background:0 0;margin-inline-start:-4px}[data-colorshot] [data-part=slider-row]>[data-part=eye-dropper]:hover{background:var(--cs-surface);color:var(--cs-fg)}[data-colorshot] [data-part=slider-row]>[data-part=eye-dropper][data-state=active]{background:var(--cs-accent);color:#fff}[data-colorshot] [data-part=inputs]{border-radius:var(--cs-radius-control);box-shadow:inset 0 0 0 1px var(--cs-hairline);transition:box-shadow var(--cs-motion-fast);background:0 0;gap:0}[data-colorshot] [data-part=inputs]:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cs-fg) 24%,transparent)}[data-colorshot] [data-part=inputs] [data-part=fields]{gap:0}[data-colorshot] [data-part=inputs] [data-part=field],[data-colorshot] [data-part=inputs] [data-part=select-trigger]{background:0 0;border-radius:0}[data-colorshot] [data-part=inputs] [data-part=field],[data-colorshot] [data-part=inputs] [data-part=field]:hover{box-shadow:inset 1px 0 0 var(--cs-hairline)}[data-colorshot] [data-part=inputs] [data-part=field]:focus-within{border-radius:var(--cs-radius-control);box-shadow:inset 0 0 0 1.5px var(--cs-accent)}[data-colorshot] [data-part=inputs] [data-part=select-trigger]{border-radius:var(--cs-radius-control) 0 0 var(--cs-radius-control);box-shadow:none}[data-colorshot] [data-part=inputs] [data-part=select-trigger]:hover{background:var(--cs-surface)}[data-colorshot] [data-part=inputs] [data-part=select-trigger]:focus-visible{border-radius:var(--cs-radius-control)}[data-colorshot] [data-part=inputs] [data-field=alpha]{justify-content:center}[data-colorshot] [data-part=field]:has([data-part=field-sizer]+[data-part=field-label]){justify-content:center}[data-colorshot] [data-part=field][data-invalid]{box-shadow:inset 0 0 0 1.5px var(--cs-danger);animation:.36s cubic-bezier(.36,.07,.19,.97) cs-shake}@keyframes cs-shake{20%,60%{translate:-3px}40%,80%{translate:3px}}[data-colorshot] [data-part=header]:not(:has([data-part=mode-tabs]))>[data-part=current]{flex:1;width:auto}[data-colorshot] [data-part=select]{flex:none;min-width:0;position:relative}[data-colorshot] [data-part=select][data-kind=format]{flex:none}[data-colorshot] [data-part=select-trigger]{width:100%;height:var(--cs-control);border-radius:var(--cs-radius-control);box-shadow:inset 0 0 0 1px var(--cs-hairline);transition:background var(--cs-motion-fast),box-shadow var(--cs-motion-fast);background:0 0;align-items:center;gap:2px;padding:0 3px 0 8px;display:flex}[data-colorshot] [data-part=select-trigger]:hover{background:var(--cs-surface)}[data-colorshot] [data-part=select-trigger]:focus-visible{box-shadow:0 0 0 1.5px var(--cs-accent);outline:none}[data-colorshot] [data-part=select-value]{white-space:nowrap;text-overflow:ellipsis;text-align:left;flex:1;min-width:0;display:inline-grid;overflow:hidden}[data-colorshot] [data-part=select-value]:after{content:attr(data-widest);visibility:hidden;grid-area:1/1;height:0;overflow:hidden}[data-colorshot] [data-part=select-chevron]{width:14px;height:14px;color:var(--cs-muted);transition:transform var(--cs-motion) var(--cs-ease);flex:none}[data-colorshot] [data-part=select][data-state=open] [data-part=select-chevron]{transform:rotate(180deg)}[data-colorshot] [data-part=select-menu]{z-index:30;background:var(--cs-raised);border:1px solid var(--cs-border);border-radius:calc(var(--cs-radius-control) + 4px);min-width:100%;max-height:360px;box-shadow:var(--cs-shadow);transform-origin:0 0;animation:cs-pop var(--cs-motion) var(--cs-ease);padding:4px;position:absolute;top:calc(100% + 4px);left:0;overflow:auto}[data-colorshot] [data-part=select-menu][data-placement=top]{transform-origin:0 100%;top:auto;bottom:calc(100% + 4px)}@keyframes cs-pop{0%{opacity:0;transform:scale(.96)translateY(-2px)}}[data-colorshot] [data-part=select-option],[data-colorshot] [data-part=select-action]{border-radius:var(--cs-radius-control);cursor:pointer;white-space:nowrap;text-align:left;grid-template-columns:16px 1fr auto;align-items:center;gap:6px;width:100%;height:28px;padding:0 8px 0 5px;display:grid}[data-colorshot] [data-part=select-trigger][data-kind=icon]{width:var(--cs-control);box-shadow:none;color:var(--cs-muted);background:0 0;justify-content:center;padding:0}[data-colorshot] [data-part=select-trigger][data-kind=icon]:hover,[data-colorshot] [data-part=select][data-state=open] [data-part=select-trigger][data-kind=icon]{background:var(--cs-surface);color:var(--cs-fg)}[data-colorshot] [data-part=select][data-kind=more] [data-part=select-menu]{transform-origin:100% 0;left:auto;right:0}[data-colorshot] [data-part=select-option][data-active],[data-colorshot] [data-part=select-action]:hover,[data-colorshot] [data-part=select-action]:focus-visible{background:var(--cs-surface);outline:none}[data-colorshot] [data-part=select-menu][data-nav=keyboard] [data-part=select-option][data-active],[data-colorshot] [data-part=select-action]:focus-visible{box-shadow:inset 0 0 0 1.5px var(--cs-accent)}[data-colorshot] [data-part=select-check] svg,[data-colorshot] [data-part=select-action] svg{width:14px;height:14px;color:var(--cs-accent)}[data-colorshot] [data-part=select-action] svg{color:var(--cs-muted)}[data-colorshot] [data-part=select-hint]{color:var(--cs-muted);font-size:var(--cs-font-size-sm);padding-left:12px}[data-colorshot] [data-part=select-heading]{color:var(--cs-muted);font-size:var(--cs-font-size-xs);letter-spacing:.02em;text-transform:uppercase;padding:4px 8px 6px;font-weight:600}[data-colorshot] [data-part=select-footer]{border-top:1px solid var(--cs-border);margin-top:4px;padding-top:4px}[data-colorshot] [data-part=toast]{z-index:50;background:var(--cs-fg);color:var(--cs-bg);font-size:var(--cs-font-size-sm);pointer-events:none;opacity:0;transition:opacity var(--cs-motion-fast),transform var(--cs-motion-fast) var(--cs-ease);border-radius:999px;align-items:center;gap:4px;padding:3px 8px;font-weight:500;display:flex;position:absolute;bottom:12px;left:50%;transform:translateY(3px)}[data-colorshot] [data-part=toast][data-state=visible]{opacity:1;transform:none}[data-colorshot] [data-part=toast] svg{width:12px;height:12px}[data-colorshot] [data-part=swatches]{gap:var(--cs-gap);flex-direction:column;margin-top:4px;display:flex}[data-colorshot]>[data-part=swatches]:first-child{margin-top:0}[data-colorshot] [data-part=swatch-group]{gap:var(--cs-gap-row);flex-direction:column;display:flex}[data-colorshot] [data-part=swatch-group-header]{align-items:center;gap:var(--cs-gap-inline);min-height:20px;display:flex}[data-colorshot] [data-part=swatch-group-header]>:first-child{margin-inline-end:auto}[data-colorshot] [data-part=swatch-group-label]{color:var(--cs-muted);font-size:var(--cs-font-size-sm);font-weight:500}[data-colorshot] [data-part=link-button]{color:var(--cs-accent);font-size:var(--cs-font-size-sm)}[data-colorshot] [data-part=swatch-grid]{grid-template-columns:repeat(var(--cs-swatch-columns,8),minmax(0,1fr));gap:var(--cs-gap-row);display:grid}[data-colorshot] [data-part=swatch-cell]{aspect-ratio:1;position:relative}[data-colorshot] [data-part=swatch]{--_cs-ring:transparent;--_cs-band:1.5px;border-radius:var(--cs-radius-control);background:var(--cs-checker);width:100%;height:100%;box-shadow:0 0 0 2px var(--cs-bg),0 0 0 3.5px var(--_cs-ring);transition:box-shadow var(--cs-motion-fast),transform var(--cs-motion-fast) var(--cs-ease);outline:none;display:block;position:relative}[data-colorshot] [data-part=swatch]:before{content:"";padding:var(--_cs-band);border-radius:inherit;background:linear-gradient(#00000024,#00000024),var(--_cs-swatch);-webkit-mask-composite:xor;opacity:0;transition:opacity var(--cs-motion) var(--cs-ease);position:absolute;inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}[data-colorshot] [data-part=swatch]:after{content:"";--_cs-gap-size:0px;inset:var(--_cs-inner,0px);border-radius:max(2px,calc(var(--cs-radius-control) - var(--_cs-inner,0px)));background:var(--_cs-swatch);box-shadow:0 0 0 var(--_cs-gap-size) var(--cs-bg),inset 0 0 0 1px var(--cs-edge);transition:inset var(--cs-motion) var(--cs-ease),border-radius var(--cs-motion) var(--cs-ease),box-shadow var(--cs-motion) var(--cs-ease);position:absolute}[data-colorshot] [data-part=swatch]:hover:before,[data-colorshot] [data-part=swatch][data-state=selected]:before{opacity:1}[data-colorshot] [data-part=swatch]:hover:after{--_cs-inner:calc(var(--_cs-band) + 1px);--_cs-gap-size:1px}[data-colorshot] [data-part=swatch][data-state=selected]:after{--_cs-inner:calc(var(--_cs-band) + 1.5px);--_cs-gap-size:1.5px}[data-colorshot] [data-part=swatch]:focus-visible{--_cs-ring:var(--cs-accent)}[data-colorshot] [data-part=swatch]:active{transition-duration:var(--cs-motion-fast),60ms;transform:scale(.92)}[data-colorshot] [data-part=swatch-remove]{z-index:1;width:24px;height:24px;color:var(--cs-bg);opacity:0;pointer-events:none;transform-origin:8.5px 15.5px;transition:opacity var(--cs-motion-fast),transform var(--cs-motion-fast) var(--cs-ease);position:absolute;top:-13px;right:-13px;transform:scale(.7)}[data-colorshot] [data-part=swatch-remove]:before{content:"";background:var(--cs-fg);border-radius:50%;position:absolute;inset:8px 8px 1px 1px}[data-colorshot] [data-part=swatch-remove] svg{width:10px;height:10px;position:absolute;top:10.5px;left:3.5px}[data-colorshot] [data-part=swatch-cell]:hover [data-part=swatch-remove],[data-colorshot] [data-part=swatch-cell]:focus-within [data-part=swatch-remove]{opacity:1;pointer-events:auto;transform:scale(1)}@media (hover:none){[data-colorshot] [data-part=swatch-remove]{opacity:1;pointer-events:auto;transform:scale(1)}}[data-colorshot] [data-part=swatch-add]{aspect-ratio:1;border-radius:var(--cs-radius-control);color:var(--cs-muted);box-shadow:inset 0 0 0 1px var(--cs-border);border:1px dashed var(--cs-border);place-items:center;display:grid}[data-colorshot] [data-part=swatch-add]:hover{color:var(--cs-fg);background:var(--cs-surface)}[data-colorshot] [data-part=preview]{border-radius:var(--cs-radius-sm);box-shadow:inset 0 0 0 1px var(--cs-border);min-height:var(--cs-control);display:flex;overflow:hidden}[data-colorshot] [data-part=preview-swatch]{background:var(--cs-checker);flex:1;position:relative}[data-colorshot] [data-part=preview-swatch]:after{content:"";background:var(--_cs-swatch);position:absolute;inset:0}[data-colorshot] [data-part=notice]{border-radius:var(--cs-radius-control);background:var(--cs-surface);color:var(--cs-muted);font-size:var(--cs-font-size-sm);margin:0;padding:7px 9px;line-height:1.4}[data-colorshot] [data-part=swatch-header]{min-height:calc(var(--cs-control) - 6px);box-shadow:inset 0 -1px 0 var(--cs-border);align-items:center;gap:2px;display:flex}[data-colorshot] [data-part=swatch-header][data-align=end]{box-shadow:none;justify-content:flex-end}[data-colorshot] [data-part=swatch-header]>[data-part=swatch-tabs]{background:0 0;border-bottom:0;flex:1;align-self:stretch;align-items:flex-end;min-width:0;margin-bottom:0}[data-colorshot] [data-part=swatch-header]>[data-part=icon-button]{margin-bottom:3px}[data-colorshot] [data-part=swatch-search]{height:var(--cs-control);animation:cs-pop var(--cs-motion) var(--cs-ease);border-radius:var(--cs-radius-control);background:var(--cs-surface);color:var(--cs-muted);align-items:center;gap:6px;padding:0 3px 0 8px;display:flex}[data-colorshot] [data-part=swatch-search]:focus-within{box-shadow:0 0 0 1.5px var(--cs-accent)}[data-colorshot] [data-part=swatch-search] svg{flex:none;width:14px;height:14px}[data-colorshot] [data-part=swatch-search-input]{min-width:0;color:var(--cs-fg);-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:none;flex:1;padding:0}[data-colorshot] [data-part=swatch-search-input]::placeholder{color:var(--cs-muted)}[data-colorshot] [data-part=swatch-search-input]::-webkit-search-cancel-button{display:none}[data-colorshot] [data-part=swatch-empty]{color:var(--cs-muted);font-size:var(--cs-font-size-sm);text-align:center;margin:0;padding:6px 0}:is([data-colorshot] [data-part=swatches]:has([data-part=swatch-group]) [data-part=swatch-empty],[data-colorshot] [data-part=swatch-empty]:empty){display:none}[data-colorshot] [data-part=swatch]{cursor:pointer}[data-colorshot] [data-part=gradient-bar][data-dropping]{box-shadow:inset 0 0 0 1px var(--cs-edge),0 0 0 2px var(--cs-accent)}[data-colorshot] [data-part=gradient-bar][data-dropping]:after{opacity:1}[data-colorshot] [data-part=swatch-tabs]{overscroll-behavior-x:contain;scrollbar-width:none;background:linear-gradient(var(--cs-border),var(--cs-border)) 2px 100% / calc(100% - 4px) 1px no-repeat;gap:9px;margin:-2px -2px 1px;padding:2px;display:flex;overflow:auto hidden}[data-colorshot] [data-part=swatch-tabs]::-webkit-scrollbar{display:none}[data-colorshot] [data-part=swatch-tabs] button{color:var(--cs-muted);font-size:var(--cs-font-size-sm);transition:color var(--cs-motion-fast);flex:none;padding:0 0 7px;font-weight:500;position:relative}[data-colorshot] [data-part=swatch-tabs] button:after{content:"";background:var(--cs-fg);height:2px;transition:scale var(--cs-motion) var(--cs-ease);border-radius:2px;position:absolute;bottom:-2px;left:0;right:0;scale:0 1}[data-colorshot] [data-part=swatch-tabs] button:hover,[data-colorshot] [data-part=swatch-tabs] button[data-state=active]{color:var(--cs-fg)}[data-colorshot] [data-part=swatch-tabs] button[data-state=active]:after{scale:1}[data-colorshot] [data-part=swatch-tabs] button:focus-visible{outline-offset:0;border-radius:3px}[data-colorshot] [data-part=swatch-group][data-tabbed] [data-part=swatch-grid]{max-height:calc(var(--cs-swatch-rows,3) * (var(--cs-control) + var(--cs-gap-row)));scrollbar-width:thin;margin:-4px;padding:4px;overflow:hidden auto}[data-colorshot] [data-part=swatch-empty-hint]{color:var(--cs-muted);font-size:var(--cs-font-size-sm);grid-column:2/-1;align-self:center;margin:0;line-height:1.3}[data-colorshot] [data-part=swatch-grid]:not(:has([data-part=swatch-add])) [data-part=swatch-empty-hint]{grid-column:1/-1}[data-colorshot] [data-part=swatch-cell][data-drop]:before{content:"";z-index:1;top:2px;bottom:2px;left:calc(var(--cs-gap-row) / -2 - 1px);background:var(--cs-accent);border-radius:2px;width:2px;position:absolute}[data-colorshot] [data-part=swatch-rename]{align-items:center;gap:var(--cs-gap-row);height:var(--cs-control);border-radius:var(--cs-radius-control);background:var(--cs-surface);box-shadow:0 0 0 1.5px var(--cs-accent);padding:0 6px 0 4px;display:flex}[data-colorshot] [data-part=swatch-rename-swatch]{border-radius:var(--cs-radius-inner);background:var(--_cs-swatch);width:20px;height:20px;box-shadow:inset 0 0 0 1px var(--cs-edge);flex:none}[data-colorshot] [data-part=swatch-rename-input]{min-width:0;color:var(--cs-fg);-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:none;flex:1;padding:0}[data-colorshot] [data-part=swatch-tabs][data-overflow=end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000)}[data-colorshot] [data-part=swatch-tabs][data-overflow=start]{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 28px),#0000);mask-image:linear-gradient(270deg,#000 calc(100% - 28px),#0000)}[data-colorshot] [data-part=swatch-tabs][data-overflow=both]{-webkit-mask-image:linear-gradient(90deg,#0000,#000 28px calc(100% - 28px),#0000);mask-image:linear-gradient(90deg,#0000,#000 28px calc(100% - 28px),#0000)}[data-colorshot-field]{box-sizing:border-box;border:1px solid var(--cs-border);border-radius:var(--cs-radius-sm);background:var(--cs-bg);min-width:0;height:32px;color:var(--cs-fg);font:inherit;font-size:var(--cs-field-font-size,13px);font-variant-numeric:tabular-nums;text-align:left;cursor:pointer;transition:border-color var(--cs-motion-fast),box-shadow var(--cs-motion-fast);align-items:center;gap:8px;padding:0 10px 0 5px;display:inline-flex}[data-colorshot-field]:hover{border-color:color-mix(in srgb,var(--cs-fg) 22%,transparent)}[data-colorshot-field][data-state=open]{border-color:var(--cs-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--cs-accent) 22%,transparent);outline:none}[data-colorshot-field]:focus-visible{border-color:var(--cs-accent);box-shadow:0 0 0 2px var(--cs-bg),0 0 0 4px var(--cs-accent);outline:none}[data-colorshot-field]:disabled{opacity:.5;cursor:not-allowed}[data-colorshot-field] [data-part=field-swatch]{border-radius:calc(var(--cs-radius-sm) - 5px);background:var(--cs-checker);flex:none;width:22px;height:22px;position:relative;overflow:hidden}[data-colorshot-field] [data-part=field-swatch]:after{content:"";background:var(--_cs-swatch);box-shadow:inset 0 0 0 1px var(--cs-edge);border-radius:inherit;position:absolute;inset:0}[data-colorshot-field] [data-part=field-text]{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}[data-colorshot-field] [data-part=field-alpha]{color:var(--cs-muted);flex:none}[data-colorshot-popover]{z-index:1000;position:fixed;top:0;left:0}[data-colorshot-popover]>[data-colorshot]{animation:cs-pop var(--cs-motion) var(--cs-ease)}[data-colorshot-popover][data-side=top]>[data-colorshot]{transform-origin:0 100%}[data-colorshot] [data-part=contrast]{align-items:center;gap:var(--cs-gap-row);height:var(--cs-control);border-radius:var(--cs-radius-control);background:var(--cs-surface);font-size:var(--cs-font-size-sm);padding:0 8px 0 5px;display:flex}[data-colorshot] [data-part=contrast-sample]{border-radius:var(--cs-radius-inner);background:var(--_cs-swatch);width:18px;height:18px;box-shadow:inset 0 0 0 1px var(--cs-border);position:relative}[data-colorshot] [data-part=contrast-label]{color:var(--cs-muted)}[data-colorshot] [data-part=contrast-ratio]{margin-inline-start:auto;font-weight:600}[data-colorshot] [data-part=contrast-level]{font-size:var(--cs-font-size-xs);color:#fff;background:#15803d;border-radius:999px;padding:1px 6px;font-weight:600}[data-colorshot] [data-part=contrast][data-level=large] [data-part=contrast-level]{background:#a16207}[data-colorshot] [data-part=contrast][data-level=fail] [data-part=contrast-level]{background:#b91c1c}[data-colorshot][data-size=sm]{--cs-width:240px;--cs-padding:10px;--cs-gap:8px;--cs-control:24px;--cs-thumb:16px;--cs-track-height:10px;--cs-area-height:152px;--cs-font-size:11px;--cs-font-size-sm:10.5px;--cs-font-size-xs:9.5px;--cs-radius:10px;--cs-radius-control:5px}[data-colorshot][data-size=sm] [data-part=field],[data-colorshot][data-size=sm] [data-part=field][data-field=alpha]{padding-inline:5px}[data-colorshot][data-size=sm] [data-field=channel]{padding-inline:1px}[data-colorshot][data-size=sm] [data-part=gradient-bar]{--_cs-pin:16px}[data-colorshot][data-size=sm] [data-part=shape-icon]{display:none}[data-colorshot][data-size=sm] [data-part=select-trigger]{padding-left:6px}[data-colorshot][data-size=sm] [data-part=current][data-compare]{width:max(calc(var(--cs-control) * 1.7),48px)}[data-colorshot][data-size=sm] [data-part=current][data-compare]>*{min-width:24px}@media (pointer:coarse){[data-colorshot]{--cs-thumb:24px;--cs-track-height:16px;--cs-control:34px;--cs-gap:12px}[data-colorshot] [data-slider]:before{inset:-10px calc(var(--cs-thumb) / -2)}[data-colorshot] [data-part=gradient-bar]{--_cs-pin:24px}[data-colorshot] [data-part=gradient-bar]:before{inset:-10px 0}}@media (forced-colors:active){[data-colorshot] [data-part=area],[data-colorshot] [data-slider],[data-colorshot] [data-part=gradient-bar],[data-colorshot] [data-part=swatch],[data-colorshot] [data-part=swatch]:after,[data-colorshot] [data-part=current-value],[data-colorshot] [data-part=current-original],[data-colorshot] [data-part=center-pad],[data-colorshot] [data-part=stop],[data-colorshot] [data-part=area-thumb],[data-colorshot] [data-part=slider-thumb],[data-colorshot] [data-part=contrast-sample],[data-colorshot] [data-part=swatch-rename-swatch],[data-colorshot] [data-part=preview-swatch],[data-colorshot-field] [data-part=field-swatch]{forced-color-adjust:none}[data-colorshot] :focus-visible,[data-colorshot] [data-part]:focus-visible,[data-colorshot] [data-part=field]:focus-within,[data-colorshot] [data-part=swatch-search]:focus-within,[data-colorshot-field]:focus-visible{outline-offset:2px;outline:2px solid highlight}[data-colorshot] [data-part=field-input]:focus-visible,[data-colorshot] [data-part=swatch-search-input]:focus-visible,[data-colorshot] [data-part=swatch-rename-input]:focus-visible{outline:none}[data-colorshot] [data-part=mode-indicator],[data-colorshot] [data-part=segmented-indicator]{border:2px solid highlight}[data-colorshot] [data-part=swatch][data-state=selected],[data-colorshot] [data-part=stop][data-state=selected]{outline-offset:2px;outline:2px solid highlight}[data-colorshot] [data-part=select-option][data-active]{outline-offset:-2px;outline:2px solid highlight}}}