.system-color-picker-module__hbSZLG__picker{width:100%;color:var(--color-ink,#161918);gap:.85rem;display:grid;position:relative}.system-color-picker-module__hbSZLG__presets{grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem;width:100%;padding:.2rem;display:grid}.system-color-picker-module__hbSZLG__picker[data-contained=true] .system-color-picker-module__hbSZLG__presets{grid-template-columns:repeat(4,3.25rem);justify-content:start}.system-color-picker-module__hbSZLG__picker[data-compact=true]{width:auto}.system-color-picker-module__hbSZLG__picker[data-compact=true] .system-color-picker-module__hbSZLG__presets{gap:.4rem;width:auto;display:flex}.system-color-picker-module__hbSZLG__picker[data-compact=true] .system-color-picker-module__hbSZLG__presets button{flex:0 0 2.75rem;width:2.75rem}.system-color-picker-module__hbSZLG__picker[data-swatch-only=true],.system-color-picker-module__hbSZLG__picker[data-swatch-only=true] .system-color-picker-module__hbSZLG__presets{width:auto}.system-color-picker-module__hbSZLG__picker[data-swatch-only=true] .system-color-picker-module__hbSZLG__presets{padding:.1rem;display:block}.system-color-picker-module__hbSZLG__picker[data-swatch-only=true] .system-color-picker-module__hbSZLG__presets button{width:2.65rem}.system-color-picker-module__hbSZLG__presets button,.system-color-picker-module__hbSZLG__customColor{aspect-ratio:1;cursor:pointer;background:0 0;border:2px solid #1414141f;border-radius:50%;width:100%;transition:border-color .16s,transform .16s;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #fffc}.system-color-picker-module__hbSZLG__presets button:hover,.system-color-picker-module__hbSZLG__customColor:hover{transform:scale(1.06)}.system-color-picker-module__hbSZLG__presets button[aria-pressed=true],.system-color-picker-module__hbSZLG__customColor[data-active=true]{border-color:var(--color-accent,#f10120)}.system-color-picker-module__hbSZLG__customColor>span{background:radial-gradient(circle,#ffffff26,#0000 58%),conic-gradient(from 15deg,#f10120,#ffb000,#f5f34c,#43cf75,#49bde8,#635bdb,#db52c8,#f10120);position:absolute;inset:0}.system-color-picker-module__hbSZLG__picker small{color:var(--color-ink-muted,#686f6b);font-size:var(--font-caption);text-align:center;display:none}.system-color-picker-module__hbSZLG__editor{z-index:5000;-webkit-backdrop-filter:blur(24px)saturate(130%);backdrop-filter:blur(24px)saturate(130%);background:linear-gradient(145deg,#ffffffe6,#f4f2edc7),#ffffffb8;border:1px solid #ffffffb8;border-radius:1rem;gap:.4rem;width:min(14rem,100vw - 1.5rem);padding:.65rem;display:grid;position:absolute;top:calc(100% + .55rem);left:0;box-shadow:inset 0 1px #ffffffe6,0 1rem 2.5rem #18141029}.system-color-picker-module__hbSZLG__editor[data-portal=true]{max-height:calc(100dvh - 1.5rem);position:fixed;overflow:auto}.system-color-picker-module__hbSZLG__editorHead{align-items:center;gap:.45rem;margin-bottom:.1rem;display:flex}.system-color-picker-module__hbSZLG__editorHead>span{flex-basis:1.5rem;width:1.5rem;height:1.5rem}.system-color-picker-module__hbSZLG__editor label{grid-template-columns:.9rem minmax(0,1fr);align-items:center;gap:.35rem;display:grid}.system-color-picker-module__hbSZLG__picker[data-contained=true] .system-color-picker-module__hbSZLG__editor{background:#ffffff80;border:0;width:min(14rem,100%);padding:.65rem;position:static;box-shadow:inset 0 1px #fffc}.system-color-picker-module__hbSZLG__editorHead>span{border:2px solid #ffffffe6;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px #1414141f}.system-color-picker-module__hbSZLG__editorHead strong{font-size:var(--font-caption);letter-spacing:.04em}.system-color-picker-module__hbSZLG__editor label{color:var(--color-ink-muted,#686f6b);font-size:.68rem;font-weight:var(--font-weight-strong);gap:.35rem;display:grid}.system-color-picker-module__hbSZLG__editor input[type=range]{appearance:none;cursor:pointer;border:0;border-radius:999px;outline:0;width:100%;height:.6rem}.system-color-picker-module__hbSZLG__editor input[type=range]::-webkit-slider-thumb{appearance:none;background:#111;border:2px solid #fff;border-radius:50%;width:1rem;height:1rem;box-shadow:0 1px .3rem #00000040}.system-color-picker-module__hbSZLG__editor input[type=range]::-moz-range-thumb{background:#111;border:2px solid #fff;border-radius:50%;width:.8rem;height:.8rem;box-shadow:0 1px .3rem #00000040}.system-color-picker-module__hbSZLG__editor input[type=range]:focus-visible{box-shadow:0 0 0 3px #f101202e}.system-color-picker-module__hbSZLG__hueRange{background:linear-gradient(90deg,#f10120,#ffb000,#f5f34c,#43cf75,#49bde8,#635bdb,#db52c8,#f10120)}.system-color-picker-module__hbSZLG__cmykC{background:linear-gradient(90deg,#fff,#00aeef)}.system-color-picker-module__hbSZLG__cmykM{background:linear-gradient(90deg,#fff,#ec008c)}.system-color-picker-module__hbSZLG__cmykY{background:linear-gradient(90deg,#fff,#fff200)}.system-color-picker-module__hbSZLG__cmykK{background:linear-gradient(90deg,#fff,#111)}@media (max-width:700px){.system-color-picker-module__hbSZLG__picker[data-compact=true] .system-color-picker-module__hbSZLG__presets{gap:.28rem}.system-color-picker-module__hbSZLG__picker[data-compact=true] .system-color-picker-module__hbSZLG__presets button{flex-basis:2.25rem;width:2.25rem}.system-color-picker-module__hbSZLG__picker[data-swatch-only=true] .system-color-picker-module__hbSZLG__presets button{flex-basis:2.4rem;width:2.4rem}.system-color-picker-module__hbSZLG__editor{left:auto;right:0}}