.cp-root{color:#1a1a1a;flex-direction:column;gap:12px;font:13px system-ui,sans-serif;display:inline-flex}.cp-plane{cursor:crosshair;touch-action:none;border-radius:6px;outline:none;flex:none;width:240px;height:240px;position:relative;overflow:hidden}.cp-plane canvas{display:block}.cp-plane-cursor{pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;box-shadow:0 0 0 1px #0006,0 1px 3px #0006}.cp-controls{flex-direction:column;gap:10px;width:240px;display:flex}.cp-hue-slider,.cp-alpha-slider{appearance:none;border-radius:7px;outline:none;width:100%;height:14px}.cp-hue-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.cp-alpha-slider{--cp-checkerboard:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;background:linear-gradient(to right, transparent, var(--cp-alpha-color,#000)), var(--cp-checkerboard)}.cp-hue-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border:2px solid #1a1a1a;border-radius:50%;width:16px;height:16px}.cp-alpha-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border:2px solid #1a1a1a;border-radius:50%;width:16px;height:16px}.cp-hue-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:2px solid #1a1a1a;border-radius:50%;width:14px;height:14px}.cp-alpha-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:2px solid #1a1a1a;border-radius:50%;width:14px;height:14px}.cp-footer{align-items:center;gap:8px;display:flex}.cp-swatch{--cp-checkerboard:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;background:linear-gradient(var(--cp-current-color,transparent), var(--cp-current-color,transparent)), var(--cp-checkerboard);border:1px solid #00000026;border-radius:5px;flex:none;width:22px;height:22px}.cp-format-select{font:inherit;padding:3px 4px}.cp-output{word-break:break-all;color:#555;font-size:11px;display:block}.cp-clamp-notice{color:#a15c00;margin:0;font-size:11px}.cp-trigger{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid #0003;border-radius:6px;width:32px;height:32px;padding:3px;display:inline-flex}.cp-trigger:focus-visible{outline-offset:2px;outline:2px solid #1a73e8}.cp-trigger-swatch{--cp-checkerboard:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;background:linear-gradient(var(--cp-current-color,transparent), var(--cp-current-color,transparent)), var(--cp-checkerboard);border-radius:3px;flex:1}.cp-popover{background:#fff;border:1px solid #00000026;border-radius:10px;margin:0;padding:12px;position:fixed;inset:auto;box-shadow:0 8px 24px #0000002e}