.cp{display:flex;flex-direction:column;width:288px;max-width:100%;margin-left:auto;margin-right:auto;color:var(--ink);font-size:var(--text-small)}.cp>*+*{margin-top:10px}.cp-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:8px}.cp-tab{min-height:36px;border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);background:transparent}.cp-tab.is-on{background:var(--bar);border-color:var(--bar);color:var(--on-dark)}.cp-panes{display:grid}.cp-panes>.cp-pane{grid-area:1 / 1}.cp-pane{display:flex;flex-direction:column;justify-content:space-between}.cp-pane>*+*{margin-top:10px}.cp-picker{align-self:center}.cp-area{position:relative;touch-action:none;cursor:crosshair}.cp-wheel-canvas{display:block}.cp-square{border:var(--border-w) solid var(--line);border-radius:var(--radius-sm)}.cp-marker{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #111,inset 0 0 0 1px #111;pointer-events:none}.cp-row{display:grid;grid-template-columns:40px minmax(0,1fr) 56px;grid-gap:8px;align-items:center}.cp-row-plain{grid-template-columns:40px minmax(0,1fr)}.cp-row-name{color:var(--ink-2)}.cp-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:16px;margin:0;padding:0;border:var(--border-w) solid var(--line);border-radius:8px;touch-action:none}.cp-range::-webkit-slider-runnable-track{height:12px;background:transparent}.cp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-6px;border:var(--border-w) solid var(--line);border-radius:50%;background:#fff}.cp-range::-moz-range-track{height:12px;background:transparent}.cp-range::-moz-range-thumb{width:18px;height:18px;border:var(--border-w) solid var(--line);border-radius:50%;background:#fff}.cp-input{min-width:0;width:100%;min-height:36px;padding:0 4px;text-align:center;border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);background:var(--field)}.cp-input:focus{border-color:var(--ink)}.cp-hexrow{display:grid;grid-template-columns:40px minmax(0,1fr) 30px;grid-gap:8px;align-items:center}.cp-group{display:flex;flex-direction:column}.cp-label{margin-bottom:6px;color:var(--ink-2)}.cp-grid{display:grid;grid-template-columns:repeat(6,30px);grid-gap:8px 0;justify-content:space-between}.cp-swatch,.cp-preview{width:30px;height:30px;padding:0;border:var(--border-w) solid var(--line);border-radius:50%}.cp-swatch.is-selected{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--line)}.cp-swatch-empty{display:block;border-style:dashed;border-color:var(--ink-3);background:transparent;cursor:default}.cp-preview{pointer-events:none}.cp-actions{display:flex;align-items:center;justify-content:space-between}.cp-clear{min-height:36px;padding:0 12px;border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);background:transparent}.cp-bottom{display:grid;grid-template-columns:1fr 1fr 1.25fr;grid-gap:6px}.cp-bottom .cp-clear{min-width:0;padding:0 4px;white-space:nowrap}.cp-confirm{grid-column:3;display:flex;align-items:center;justify-content:center}.cp-dot{flex:none;width:16px;height:16px;margin-left:5px;border:2px solid var(--line);border-radius:50%}.cp-dot.is-empty{border-style:dashed}.cp-recent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.cp-recent-head .cp-label{margin-bottom:0}.cp-mini-row{display:flex}.cp-mini{min-height:28px;margin-left:4px;padding:0 8px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:transparent;font-size:12px;white-space:nowrap}.cp-mini[disabled]{border-color:var(--ink-3);color:var(--ink-3);cursor:default}.cp-swatch.is-pinned{position:relative}.cp-swatch.is-pinned::after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;border:2px solid var(--surface);border-radius:50%;background:var(--line)}.color-button{position:relative;width:var(--touch);height:var(--touch);border:var(--border-w) solid var(--line);border-radius:50%;background:var(--field)}.color-button.is-empty{border-style:dashed}.color-button.is-open{box-shadow:0 0 0 3px var(--accent)}.color-bar{display:flex;align-items:center;min-width:0}.color-list{display:flex;flex:1 1 auto;min-width:0;padding:var(--gap-1)}.color-list>*{margin-right:var(--gap-2)}.color-chip{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:var(--touch);height:var(--touch);border:var(--border-w) solid var(--line);border-radius:50%;background:var(--field);color:var(--ink)}.color-chip.is-on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--line)}.color-chip .pin{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border:2px solid var(--surface);border-radius:50%;background:var(--line)}.add-chip{margin:0 var(--gap-1);font-size:calc(var(--u) * 6);line-height:1}.eraser-chip{background-color:#ffffff;background-image:linear-gradient(45deg,#c9c9c9 25%,transparent 25%,transparent 75%,#c9c9c9 75%),linear-gradient(45deg,#c9c9c9 25%,transparent 25%,transparent 75%,#c9c9c9 75%);background-size:12px 12px;background-position:0 0,6px 6px}.cp-pop{width:288px;max-width:100%;margin-left:auto;margin-right:auto}.cp-pop>.cp{width:100%}.cp-pop-confirm{display:flex;width:100%;margin-top:var(--gap-3)}.picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--gap-3)}.stack{display:grid}.stack>*{grid-area:1 / 1}.stack>.is-hidden{visibility:hidden}.swatch-pane>*+*{margin-top:var(--gap-2)}