:root{--colors-width:196px}
#colors{display:flex;flex-direction:column;gap:24px;position:absolute;inset:0 auto 0 0;width:var(--colors-width);padding:14px 12px;background:#211f25;border-right:1px solid #443d4b;overflow-y:auto;scrollbar-width:thin;user-select:none}
#colors header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}#colors header strong{font-size:13px}.color-icon{display:grid;place-items:center;width:30px;height:30px;padding:5px}.color-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.color-icon[aria-pressed=true]{background:#72528d;border-color:#d7b2ff}
#color-sv{position:relative;height:142px;border-radius:6px;border:1px solid #ffffff30;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),#f00;cursor:crosshair;touch-action:none;outline-offset:3px}#color-marker{position:absolute;left:0;top:100%;width:10px;height:10px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #0009;transform:translate(-50%,-50%);pointer-events:none}
#colors .color-range{position:relative;display:block;font-size:11px;color:#bfb6ca;margin:13px 0}#colors .color-range output{float:right;font-variant-numeric:tabular-nums}#colors input[type=range]{display:block;width:100%;height:12px;margin:8px 0 0;appearance:none;border-radius:6px;border:1px solid #ffffff30;cursor:pointer}#color-hue{background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}#color-alpha{background:linear-gradient(to right,transparent,#000),repeating-conic-gradient(#bbb 0 25%,#eee 0 50%) 0 0/8px 8px}#colors input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:18px;background:#fff;border:1px solid #413a49;border-radius:4px}#colors input[type=range]::-moz-range-thumb{width:9px;height:17px;background:#fff;border:1px solid #413a49;border-radius:4px}
.color-current{display:flex;align-items:center;gap:9px;margin-top:16px}#color-preview{flex-shrink:0;width:38px;height:38px;border:1px solid #ffffff40;border-radius:6px;background:var(--selected-color,#000);box-shadow:inset 0 0 0 1px #0003}#colors .color-current label{display:block;flex:1;min-width:0;font-size:10px;color:#bfb6ca}#color-hex{display:block;width:100%;min-width:0;margin-top:4px;padding:6px;background:#302b37;border:1px solid #62576e;border-radius:4px;color:#fff;font:11px ui-monospace,monospace;user-select:text}#color-error{font-size:11px;color:#ffb4b4;margin:0}#color-error:empty{display:none}#colors h2{margin:20px 0 10px;font-size:11px;font-weight:600;color:#bfb6ca;letter-spacing:.03em}.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.color-swatch{height:23px;min-width:0;padding:0;border:1px solid #ffffff35;border-radius:4px;background:var(--swatch);cursor:pointer}.color-swatch:hover{background:var(--swatch);transform:scale(1.1)}.color-swatch[aria-pressed=true]{outline:2px solid #d7b2ff;outline-offset:1px}#color-help{display:block;margin-top:14px;line-height:1.6;font-size:10px}
#viewport{left:var(--colors-width)}#viewport.picking{cursor:crosshair}#status{left:calc(var(--colors-width) + 16px);max-width:calc(100% - var(--colors-width) - 96px)}
@media(max-width:700px){:root{--colors-width:144px}#colors{padding:10px 8px}#color-sv{height:112px}.swatches{gap:4px}.color-swatch{height:20px}#color-preview{width:28px;height:34px}.color-current{gap:6px}#color-hex{font-size:10px;padding:5px 3px}}

#image-palette,#color-selector{flex-shrink:0}
#color-selector{margin-top:auto}
#colors #palette-title{margin:0 0 12px;font-size:13px;color:inherit}