.onb-colors-wrap{flex-direction:column;gap:14px;padding:4px 8px 8px;display:flex}.onb-colors{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:14px 10px;display:grid}.onb-color{flex-direction:column;align-items:center;gap:6px;display:flex;position:relative}.onb-color-swatch{width:56px;height:56px;box-shadow:0 0 0 1px var(--lp-border), 0 10px 22px -14px #312e8180;cursor:pointer;border:3px solid #fff;border-radius:999px;display:block;position:relative}.onb-color-swatch input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.onb-color-swatch:has(input:focus-visible){outline:2px solid var(--lp-indigo);outline-offset:3px}.onb-color-hex{font-family:var(--ff-mono), ui-monospace, monospace;color:var(--lp-muted);font-size:11.5px}.onb-color-remove{border:1px solid var(--lp-border);width:24px;height:24px;color:var(--lp-muted);background:#fff;border-radius:999px;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:-6px;right:calc(50% - 38px)}.onb-color-add{width:56px;height:56px;color:var(--lp-indigo-deep);background:#fbfbfe;border:1.5px dashed #c9c6ee;border-radius:999px;justify-content:center;align-items:center;display:inline-flex}@media (pointer:coarse),(max-width:767.98px){.onb-color-remove{width:32px;height:32px;top:-10px;right:calc(50% - 44px)}.onb-color-remove:after{content:"";border-radius:999px;position:absolute;inset:-6px}}