.color-btn{border:1px solid var(--ink-faint,#aaa9a3);cursor:pointer;border-radius:3px;flex:none;width:34px;height:20px;padding:0}.color-btn:disabled{opacity:.4;cursor:default}.color-btn.is-off{background:linear-gradient(to top right, transparent calc(50% - 1px), var(--ink-muted,#707070) calc(50% - 1px), var(--ink-muted,#707070) calc(50% + 1px), transparent calc(50% + 1px)), var(--surface,#fff)}.color-btn.is-mixed{background:repeating-linear-gradient(45deg, var(--surface,#fff) 0 3px, var(--line,#deddd7) 3px 6px)}.cp-backdrop{z-index:100010;position:fixed;inset:0}.cp-win{background:var(--surface,#fff);border:1px solid var(--line,#deddd7);border-radius:var(--radius,8px);width:252px;color:var(--ink,#222);flex-direction:column;gap:7px;padding:8px;display:flex;position:fixed;box-shadow:0 10px 30px #141a1e38}.cp-head{align-items:center;gap:8px;font-size:13px;display:flex}.cp-preview{border:1px solid var(--ink-faint,#aaa9a3);border-radius:3px;width:22px;height:16px}.cp-close{color:var(--ink-muted,#707070);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;margin-left:auto;padding:1px 6px}.cp-close:hover{color:var(--ink,#222);border-color:var(--line,#deddd7)}.cp-sv{cursor:crosshair;touch-action:none;border-radius:5px;height:128px;position:relative}.cp-hue{cursor:crosshair;touch-action:none;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:6px;height:12px;position:relative}.cp-sv-dot,.cp-hue-dot{pointer-events:none;border:2px solid #fff;border-radius:50%;width:11px;height:11px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000073}.cp-hue-dot{top:50%}.cp-swatches{grid-template-columns:repeat(8,1fr);gap:4px;display:grid}.cp-swatch{border:1px solid var(--line,#deddd7);cursor:pointer;border-radius:3px;height:20px;padding:0}.cp-swatch.is-on{outline:2px solid var(--ink,#222);outline-offset:1px}.cp-store{justify-content:space-between;align-items:center;gap:6px;display:flex}.cp-hint{color:var(--ink-muted,#707070);font-size:11px}.cp-reset{border:1px solid var(--line,#deddd7);background:var(--surface,#fff);color:var(--ink-muted,#707070);cursor:pointer;border-radius:4px;flex:none;padding:1px 6px;font-size:11px}.cp-reset:hover{color:var(--ink,#222)}.cp-sys{gap:4px;display:flex}.cp-sys button{border:1px solid var(--line,#deddd7);background:var(--surface,#fff);color:var(--ink-muted,#707070);cursor:pointer;border-radius:4px;flex:1 1 0;padding:3px 0;font-size:11px}.cp-sys button.is-on{background:var(--ink,#222);border-color:var(--ink,#222);color:var(--surface,#fff)}.cp-nums{gap:6px;display:flex}.cp-num{color:var(--ink-muted,#707070);flex-direction:column;flex:1 1 0;gap:2px;font-size:11px;display:flex}.cp-num.is-wide{flex-direction:row;align-items:center;gap:4px}.cp-num input{width:100%;font:inherit;color:var(--ink,#222);background:var(--surface,#fff);border:1px solid var(--line,#deddd7);border-radius:4px;padding:3px 6px}