.standalone-color-picker{width:min(365px,100%);background:#2a3341;border:1px solid #4c5563;border-radius:12px;padding:16px;box-shadow:0 14px 28px rgba(0,0,0,.24);font-family:Avenir Next,Segoe UI,Tahoma,sans-serif}.standalone-color-picker__saturation{position:relative;height:196px;min-width:120px;border-bottom:12px solid #4c5563;border-radius:8px 8px 0 0;cursor:crosshair;touch-action:none}.standalone-color-picker__hue{position:relative;height:24px;border-radius:0 0 8px 8px;cursor:pointer;touch-action:none}.standalone-color-picker__hue-track{position:absolute;inset:0;border-radius:0 0 8px 8px;background:linear-gradient(90deg,rgb(255,0,0) 0,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0))}.standalone-color-picker__thumb{--thumb-transform:translate(-16px,-16px);position:absolute;z-index:1;width:28px;height:28px;border:2px solid #fff;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgb(0 0 0/20%);transform:var(--thumb-transform);transition:transform .14s ease-out;pointer-events:none}.standalone-color-picker__thumb>div{width:100%;height:100%;border-radius:50%}.standalone-color-picker__thumb--hue{--thumb-transform:translate(-16px,-50%);top:50%}.standalone-color-picker__hue:focus-visible,.standalone-color-picker__saturation:focus-visible{outline:2px solid #bbb;outline-offset:0}.standalone-color-picker__hue,.standalone-color-picker__saturation{outline:2px solid #4c5563;outline-offset:0}.standalone-color-picker__hue:active .standalone-color-picker__thumb,.standalone-color-picker__saturation:active .standalone-color-picker__thumb{transform:var(--thumb-transform) scale(1.32);transition-timing-function:ease-in}.standalone-color-picker__values{display:grid;grid-template-columns:minmax(120px,1fr) minmax(194px,1.55fr);align-items:flex-end;gap:18px;margin-top:16px;font-family:Roboto,Avenir Next,Segoe UI,Tahoma,sans-serif}.standalone-color-picker__rgb-fields{display:grid;grid-template-columns:repeat(3,minmax(58px,1fr));gap:10px}.standalone-color-picker__field{display:flex;flex-direction:column-reverse;min-width:0}.standalone-color-picker__field span{color:#9ca3af;font-size:13px;line-height:1.2;text-transform:capitalize}.standalone-color-picker__field input{width:100%;height:30px;padding:0;background:transparent;border:0 #4c5563;border-bottom:1px solid #4c5563;box-shadow:none;outline:0;color:#e6e6e8;caret-color:#e6e6e8;font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.standalone-color-picker__values>.standalone-color-picker__field>input{border-bottom-width:2px;text-transform:uppercase}.standalone-color-picker__field input:focus,.standalone-color-picker__field input:focus-visible{border-bottom-color:#bbb}.standalone-color-picker__rgb-fields input{border-bottom-width:2px;min-width:3ch;text-align:center}@media (max-width:480px){.standalone-color-picker{width:min(365px,100%)}.standalone-color-picker__field span{font-size:12px}}