.colors{width:95%}.colors
.top{display:flex}.colors
#preview{width:100px;max-width:15vw}.colors
.picker{flex:1;cursor:crosshair;position:relative;touch-action:none}.colors #preview,
.colors
.picker{height:310px}.colors
.white{inset:0;position:absolute;background:linear-gradient(to right,#fff,transparent)}.colors
.black{inset:0;position:absolute;background:linear-gradient(to top,#000,transparent)}.colors
.selector{width:16px;height:16px;border-radius:50%;position:absolute;transform:translate(-50%, -50%);border:2px
solid #fff;box-shadow:0 0 6px rgba(0,0,0,0.9)}.colors
.hue{height:14px;border-radius:8px;background:linear-gradient(to right, red,yellow,lime,cyan,blue,magenta,red);position:relative;cursor:pointer;touch-action:none}.colors
.knob{width:18px;height:18px;border-radius:50%;position:absolute;top:50%;transform:translate(-50%, -50%);border:2px
solid #000;box-shadow:0 0 5px rgba(0,0,0,0.7)}.colors
.grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}@media (max-width:991.98px){.colors{width:100%;margin-bottom:1rem}.colors #preview,
.colors
.picker{height:180px}}