@layer equip{.eq-color-field{--_checker:repeating-conic-gradient(var(--eq-tint-strong) 0 25%, transparent 0 50%) 0 0 / 8px 8px;justify-items:start;gap:var(--eq-space-1);min-width:0;display:grid}.eq-color-field-label{color:var(--eq-ink);font:var(--eq-weight-strong) var(--eq-text-s) / 1.3 var(--eq-font)}.eq-color-field-trigger{anchor-name:var(--_anchor);align-items:center;gap:var(--eq-space-2);height:var(--eq-h-m);padding-inline:var(--eq-space-1) var(--eq-space-3);border:1px solid var(--eq-line-strong);border-radius:var(--eq-radius-m);background:var(--eq-raised);color:var(--eq-ink);cursor:pointer;transition:border-color var(--eq-dur) var(--eq-ease), scale var(--eq-dur) var(--eq-ease);display:inline-flex}@media (hover:hover){.eq-color-field-trigger:hover:not(:disabled){border-color:var(--eq-ink-3)}}.eq-color-field-trigger:active:not(:disabled){scale:var(--eq-press)}.eq-color-field-trigger:focus-visible{outline:2px solid var(--eq-focus);outline-offset:2px}.eq-color-field-swatch{border-radius:var(--eq-radius-s);background:linear-gradient(var(--_color), var(--_color)), var(--_checker);width:24px;height:24px;box-shadow:inset 0 0 0 1px var(--eq-line);transition:background-color var(--eq-dur) var(--eq-ease);flex:none}.eq-color-field-value{font:var(--eq-weight) var(--eq-text-m) / 1 var(--eq-font-mono);font-variation-settings:var(--eq-font-mono-settings);font-variant-numeric:tabular-nums;text-transform:lowercase}.eq-color-field-panel{position-anchor:var(--_anchor);position-area:block-end span-inline-end;position-try-fallbacks:flip-block, flip-inline;box-sizing:border-box;width:232px;margin:var(--eq-space-1) 0 0;padding:var(--eq-space-4);border:1px solid var(--eq-line-strong);border-radius:var(--eq-radius-l);background:var(--eq-raised);color:var(--eq-ink);box-shadow:var(--eq-shadow);-webkit-backdrop-filter:var(--eq-blur);backdrop-filter:var(--eq-blur);opacity:0;transform-origin:0 0;transition:opacity var(--eq-dur) var(--eq-ease), scale var(--eq-dur) var(--eq-ease), translate var(--eq-dur) var(--eq-ease), display var(--eq-dur) allow-discrete, overlay var(--eq-dur) allow-discrete;inset:auto;translate:0 4px;scale:.96}.eq-color-field-panel:popover-open{gap:var(--eq-space-3);opacity:1;transition:opacity var(--eq-dur) var(--eq-ease), scale var(--eq-dur-move) var(--eq-spring), translate var(--eq-dur-move) var(--eq-spring), display var(--eq-dur-move) allow-discrete, overlay var(--eq-dur-move) allow-discrete;display:grid;translate:0;scale:1}@starting-style{.eq-color-field-panel:popover-open{opacity:0;translate:0 4px;scale:.96}}.eq-color-field-area,.eq-color-field-strip{border-radius:var(--eq-radius-s);box-shadow:inset 0 0 0 1px var(--eq-line);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;position:relative}.eq-color-field-area{height:132px}.eq-color-field-strip{cursor:pointer;height:12px;margin-inline:6px}.eq-color-field-strip:before{content:"";position:absolute;inset:-6px 0}.eq-color-field-strip[data-strip=alpha]{background:linear-gradient(to right, transparent, var(--_opaque)), var(--_checker)}.eq-color-field-area:focus-visible,.eq-color-field-strip:focus-visible{outline:2px solid var(--eq-focus);outline-offset:2px}.eq-color-field-thumb{box-sizing:border-box;border:2px solid var(--eq-solid-ink);border-radius:var(--eq-radius-full);background:var(--_color);width:16px;height:16px;box-shadow:0 0 0 1px var(--eq-solid);pointer-events:none;transition:left var(--eq-dur-move) var(--eq-spring), top var(--eq-dur-move) var(--eq-spring), scale var(--eq-dur-move) var(--eq-spring);position:absolute;top:50%;translate:-50% -50%}:is(.eq-color-field-area,.eq-color-field-strip)[data-dragging] .eq-color-field-thumb{transition:scale var(--eq-dur-move) var(--eq-spring);scale:1.15}.eq-color-field-hex{height:var(--eq-h-m);box-sizing:border-box;min-width:0;padding-inline:var(--eq-space-3);border:1px solid var(--eq-line-strong);border-radius:var(--eq-radius-m);background:var(--eq-raised);color:var(--eq-ink);font:var(--eq-weight) var(--eq-text-m) / 1 var(--eq-font-mono);font-variation-settings:var(--eq-font-mono-settings);transition:border-color var(--eq-dur) var(--eq-ease)}.eq-color-field-hex:focus-visible{outline:2px solid var(--eq-focus);outline-offset:-1px}.eq-color-field-hex[aria-invalid=true]{border-color:var(--eq-danger)}.eq-color-field-presets{gap:var(--eq-space-1);flex-wrap:wrap;display:flex}.eq-color-field-preset{border-radius:var(--eq-radius-s);background:linear-gradient(var(--_color), var(--_color)), var(--_checker);width:24px;height:24px;box-shadow:inset 0 0 0 1px var(--eq-line);cursor:pointer;transition:box-shadow var(--eq-dur) var(--eq-ease), scale var(--eq-dur) var(--eq-ease);border:0;padding:0}.eq-color-field-preset[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--eq-solid), inset 0 0 0 4px var(--eq-solid-ink)}.eq-color-field-preset:active{scale:var(--eq-press)}.eq-color-field-preset:focus-visible{outline:2px solid var(--eq-focus);outline-offset:2px}.eq-color-field[data-disabled]{opacity:.45}.eq-color-field-trigger:disabled{cursor:not-allowed}}