.tbk-cp{width:100%;min-width:200px;color:var(--tb-text);flex-direction:column;gap:10px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;display:flex}.tbk-cp__area.react-colorful{flex-direction:column;gap:8px;width:100%;height:auto;display:flex}.tbk-cp__area .react-colorful__saturation{height:132px;box-shadow:inset 0 0 0 1px var(--tb-swborder);border-bottom:0;border-radius:10px}.tbk-cp__area .react-colorful__hue,.tbk-cp__area .react-colorful__alpha{height:12px;box-shadow:inset 0 0 0 1px var(--tb-swborder);border-radius:9999px}.tbk-cp__area .react-colorful__alpha{background:var(--tb-checker)}.tbk-cp__area .react-colorful__pointer{border-width:2px;border-color:#fff;width:14px;height:14px;box-shadow:0 0 0 1px #00000059,0 1px 4px #0006}.tbk-cp__area .react-colorful__saturation-pointer{width:16px;height:16px}.tbk-cp__value{align-items:center;gap:6px;display:flex}.tbk-cp__value>.tbk-seg{flex:none}.tbk-cp__input{box-sizing:border-box;border:1px solid var(--tb-border);background:var(--tb-field);min-width:0;height:30px;color:var(--tb-text);font:inherit;font-variant-numeric:tabular-nums;border-radius:9px;outline:none;flex:1;padding:0 9px;font-size:12.5px;font-weight:500;transition:border-color .12s,box-shadow .12s}.tbk-cp__input:focus{border-color:var(--tb-accent);box-shadow:0 0 0 3px #ffca2d2e}.tbk-cp__presets{flex-direction:column;gap:6px;display:flex}.tbk-cp__caps{letter-spacing:.04em;text-transform:uppercase;color:var(--tb-muted2);font-size:11px;font-weight:600}.tbk-cp__swatches{flex-wrap:wrap;gap:6px;display:flex}.tbk-cp__swatch{box-sizing:border-box;cursor:pointer;width:22px;height:22px;box-shadow:inset 0 0 0 1px var(--tb-swborder);border:0;border-radius:7px;padding:0;transition:box-shadow .12s}.tbk-cp__swatch:hover{box-shadow:inset 0 0 0 1px var(--tb-swborder), 0 0 0 2px var(--tb-bg), 0 0 0 3px var(--tb-border)}.tbk-cp__swatch[data-on=true]{box-shadow:inset 0 0 0 1px var(--tb-swborder), 0 0 0 2px var(--tb-bg), 0 0 0 3.5px var(--tb-accent)}.tbk-cp__saved{flex-direction:column;gap:6px;display:flex}.tbk-cp__saved-head{justify-content:space-between;align-items:center;display:flex}.tbk-cp__saved-count{font-variant-numeric:tabular-nums;color:var(--tb-muted2);font-size:11px;font-weight:500}.tbk-cp__saved-row{align-items:center;gap:6px;min-height:22px;display:flex}.tbk-cp__saved-add{box-sizing:border-box;border:1px dashed var(--tb-muted2);width:22px;height:22px;color:var(--tb-text2);cursor:pointer;background:0 0;border-radius:7px;flex:none;justify-content:center;align-items:center;padding:0;transition:background-color .12s,border-color .12s,opacity .12s;display:inline-flex}.tbk-cp__saved-add:hover{background:var(--tb-hover)}.tbk-cp__saved-add[data-saved=true]{border-color:var(--tb-border);opacity:.4;cursor:default}.tbk-cp__saved-list{scrollbar-width:none;flex:1;gap:6px;min-width:0;margin:-5px -5px -4px -3px;padding:5px 5px 4px 3px;display:flex;overflow:auto hidden}.tbk-cp__saved-list::-webkit-scrollbar{display:none}.tbk-cp__saved-swatch{cursor:pointer;background:var(--tb-checker);width:22px;height:22px;box-shadow:inset 0 0 0 1px var(--tb-swborder);border-radius:7px;flex:none;transition:box-shadow .12s;display:block;position:relative}.tbk-cp__saved-fill{border-radius:inherit;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;position:absolute;inset:0}.tbk-cp__saved-swatch:hover{box-shadow:inset 0 0 0 1px var(--tb-swborder), 0 0 0 2px var(--tb-bg), 0 0 0 3px var(--tb-border)}.tbk-cp__saved-swatch[data-on=true]{box-shadow:inset 0 0 0 1px var(--tb-swborder), 0 0 0 2px var(--tb-bg), 0 0 0 3.5px var(--tb-accent)}.tbk-cp__saved-remove{z-index:1;background:var(--tb-active);width:14px;height:14px;color:var(--tb-strong);opacity:0;border-radius:50%;justify-content:center;align-items:center;transition:opacity .12s,background-color .12s;display:inline-flex;position:absolute;top:-5px;right:-5px;box-shadow:0 1px 3px #0006}.tbk-cp__saved-swatch:hover .tbk-cp__saved-remove{opacity:1}.tbk-cp__saved-remove:hover{background:var(--tb-danger);color:#fff}.tbk-cp__saved-next{width:18px;height:22px;color:var(--tb-muted);cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.tbk-cp__saved-next:hover{background:var(--tb-hover);color:var(--tb-strong)}.tbk-cp__saved-empty{color:var(--tb-muted2);font-size:11.5px;line-height:1.3}.tbk-cp__reset{background:var(--tb-field);height:32px;color:var(--tb-text2);font:inherit;cursor:pointer;border:0;border-radius:10px;justify-content:center;align-items:center;gap:7px;font-size:12.5px;font-weight:500;transition:background-color .12s,color .12s;display:inline-flex}.tbk-cp__reset:hover{background:var(--tb-hover);color:var(--tb-strong)}.tbk-grad{flex-direction:column;gap:8px;display:flex}.tbk-grad__head{justify-content:space-between;align-items:center;gap:8px;display:flex}.tbk-grad__bar{height:26px;position:relative}.tbk-grad__track{box-shadow:inset 0 0 0 1px var(--tb-swborder);cursor:copy;border-radius:9px;position:absolute;inset:0}.tbk-grad__stop{cursor:grab;border:2px solid #fff;border-radius:50%;width:16px;height:16px;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000059,0 1px 4px #0006}.tbk-grad__stop:active{cursor:grabbing}.tbk-grad__stop[data-on=true]{box-shadow:0 0 0 1px #00000059, 0 0 0 3.5px var(--tb-accent)}.tbk-grad__preview{height:22px;box-shadow:inset 0 0 0 1px var(--tb-swborder);border-radius:9px}