.cp-picker{display:grid;gap:var(--cp-gap, 1rem);min-width:0}.cp-area{width:100%;border-radius:var(--cp-surface-radius, .5rem);cursor:crosshair;outline-offset:4px}.cp-wheel{max-width:var(--cp-wheel-size, 240px);margin-inline:auto;cursor:crosshair;outline-offset:5px}.cp-slider,.cp-input,.cp-channel{display:grid;gap:var(--cp-label-gap, 8px);min-width:0;font:inherit;font-size:var(--cp-label-size, .8rem);line-height:1.4}.cp-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cp-channel-gap, .5rem)}.cp-channel>span:first-child{font-weight:500}.cp-input input,.cp-channel-field,.cp-mode,.cp-format select{box-sizing:border-box;min-height:var(--cp-control-height, 2.5rem);border:1px solid var(--cp-control-border, #8886);border-radius:var(--cp-control-radius, .375rem);background:var(--cp-control-background, transparent);color:inherit;font:inherit}.cp-input input{width:100%;min-width:0;padding:.5rem .75rem;font-variant-numeric:tabular-nums}.cp-channel-field{display:flex;align-items:center;gap:.25rem;min-width:0;padding-inline:.625rem}.cp-channel-field input{box-sizing:border-box;width:100%;min-width:0;min-height:calc(var(--cp-control-height, 2.5rem) - 2px);margin:0;padding:.375rem 0;border:0;border-radius:0;outline:0;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums}.cp-channel-field>span{flex:none;opacity:.65;font-size:.75rem}.cp-channel-field input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.cp-channel-field input::-webkit-inner-spin-button,.cp-channel-field input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.cp-channel-field:focus-within,.cp-input input:focus-visible,.cp-mode:focus-visible,.cp-format select:focus-visible,.cp-area:focus-visible,.cp-wheel:focus-visible,.cp-swatch:focus-visible{outline:2px solid var(--cp-focus-color, currentColor);outline-offset:3px}.cp-channel-field:has(input[aria-invalid=true]),.cp-input input[aria-invalid=true]{border-color:var(--cp-invalid-color, #dc2626);outline:2px solid var(--cp-invalid-color, #dc2626);outline-offset:2px}.cp-format{display:flex;justify-content:space-between;align-items:center;gap:.75rem;min-width:0;font-size:var(--cp-label-size, .8rem)}.cp-format select{min-width:0;max-width:65%;padding:.5rem .625rem;cursor:pointer}.cp-mode{justify-self:start;padding:.5rem .75rem;font-size:.75rem;cursor:pointer}.cp-mode:hover,.cp-format select:hover{border-color:currentColor}.cp-slider input{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:var(--cp-track-height, .75rem);margin:.25rem 0;padding:0;border:0;border-radius:var(--cp-track-radius, 1rem);cursor:pointer;outline-offset:5px}.cp-slider[data-channel=h] input{background:var( --cp-hue-gradient, linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red) )}.cp-slider[data-channel=s] input{background:linear-gradient(to right,var(--cp-saturation-start, white),var(--cp-saturation-end, red))}.cp-slider[data-channel=v] input{background:linear-gradient(to right,black,var(--cp-brightness-end, white))}.cp-slider[data-channel=alpha] input{background:linear-gradient(to right,transparent,var(--cp-alpha-color, #6366f1)),repeating-conic-gradient(#ddd,#ddd 25%,#fff 0%,#fff 50%) 0/12px 12px}.cp-slider input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--cp-slider-thumb-size, 1rem);height:var(--cp-slider-thumb-size, 1rem);border:var(--cp-thumb-border, 2px solid white);border-radius:var(--cp-thumb-radius, 50%);background:var(--cp-slider-thumb-background, transparent);box-shadow:var(--cp-thumb-shadow, 0 0 0 1px #555)}.cp-slider input::-moz-range-thumb{width:var(--cp-slider-thumb-size, 1rem);height:var(--cp-slider-thumb-size, 1rem);border:var(--cp-thumb-border, 2px solid white);border-radius:var(--cp-thumb-radius, 50%);background:var(--cp-slider-thumb-background, transparent);box-shadow:var(--cp-thumb-shadow, 0 0 0 1px #555)}.cp-slider input:focus-visible{outline:2px solid var(--cp-focus-color, currentColor)}.cp-wheel .cp-wheel-marker{position:absolute;transform:translate(-50%,-50%);width:var(--cp-marker-size, 30px);height:var(--cp-marker-size, 30px);padding:0;border:var(--cp-marker-border, 2px solid white);border-radius:var(--cp-marker-radius, 50%);box-shadow:var(--cp-marker-shadow, 0 0 0 1px #222);color:var(--cp-marker-text-color, white);font-size:var(--cp-marker-text-size, 11px);font-weight:700;text-shadow:0 1px 3px black;cursor:grab;touch-action:none}.cp-wheel .cp-wheel-marker[data-small=true]{width:var(--cp-thumb-size, 12px);height:var(--cp-thumb-size, 12px)}.cp-wheel .cp-wheel-marker[aria-pressed=true]{box-shadow:var(--cp-marker-active-shadow, 0 0 0 3px #111, 0 0 0 5px white)}.cp-wheel .cp-wheel-marker[data-small=true][aria-pressed=true]{box-shadow:var(--cp-thumb-shadow, 0 0 0 1px #000)}.cp-wheel .cp-wheel-marker:focus-visible{outline:3px solid var(--cp-focus-color, #111);outline-offset:4px}.cp-swatch{flex:none;width:var(--cp-swatch-size, 2rem);height:var(--cp-swatch-size, 2rem);padding:0;border:2px solid white;box-shadow:0 0 0 1px #8886;border-radius:var(--cp-swatch-radius, 50%);cursor:pointer}.cp-preview{display:grid;place-items:center;box-sizing:border-box;min-height:2.5rem;padding:.5rem .75rem;border-radius:var(--cp-control-radius, .375rem);font-size:.8rem;font-variant-numeric:tabular-nums}.cp-collection{display:flex;flex-wrap:wrap;gap:.625rem;min-width:0;margin:0;padding:0;border:0}.cp-collection legend{margin-bottom:.625rem;padding:0;font-size:.8rem}.cp-provider-controls{display:contents;min-width:0;margin:0;padding:0;border:0}:where(.cp-provider-controls,cp-provider)[aria-disabled=true]>*{opacity:var(--cp-disabled-opacity, .55)}:where(.cp-provider-controls,cp-provider)[aria-disabled=true] :is(.cp-area,.cp-wheel,input,select,button){cursor:not-allowed}cp-channel-input,cp-text-input,cp-alpha-input,cp-surface{display:block;min-width:0}cp-surface [hidden]{display:none!important}@media(forced-colors:active){.cp-slider input,.cp-swatch{border:1px solid ButtonText}}.cp-thumb{width:var(--cp-thumb-size,12px);height:var(--cp-thumb-size,12px);border:var(--cp-thumb-border,2px solid white);border-radius:var(--cp-thumb-radius,50%);box-shadow:var(--cp-thumb-shadow,0 0 0 1px #000);display:grid;place-items:center;color:var(--cp-thumb-text-color,white);font-size:var(--cp-thumb-text-size,10px)}.tk-scope{color:hsl(var(--foreground));background:hsl(var(--background))}.tk-generator{display:grid;gap:var(--tk-gap, 1rem);width:100%;min-width:0}.tk-name,.tk-harmony{display:grid;gap:.5rem;min-width:0;font-size:.8rem}.tk-name{margin:0}.tk-name small{font-size:.75rem;opacity:.65}.tk-name input,.tk-harmony select,.tk-harmony button,.tk-role-tabs button,.tk-border-field{box-sizing:border-box;min-height:var(--tk-control-height, 2.5rem);border:1px solid var(--tk-control-border, #8886);border-radius:var(--tk-control-radius, .375rem);background:var(--tk-control-background, transparent);color:inherit;font:inherit}.tk-name input{width:100%;min-width:0;padding:.5rem .75rem}.tk-harmony label,.tk-border{display:flex;justify-content:space-between;align-items:center;gap:.75rem;min-width:0;font-size:.8rem}.tk-harmony select{min-width:0;max-width:65%;padding:.5rem .625rem;cursor:pointer}.tk-harmony button{padding:.5rem .75rem;text-align:left;cursor:pointer}.tk-harmony button:hover,.tk-role-tabs button:hover{border-color:currentColor}.tk-border-field{display:flex;align-items:center;flex:0 0 7rem;gap:.375rem;padding-inline:.625rem}.tk-border-field input{width:100%;min-width:0;min-height:calc(var(--tk-control-height, 2.5rem) - 2px);margin:0;padding:.375rem 0;border:0;border-radius:0;outline:0;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.tk-border-field input::-webkit-inner-spin-button,.tk-border-field input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.tk-border-field>span{font-size:.75rem;opacity:.65}.tk-name input:focus-visible,.tk-harmony select:focus-visible,.tk-harmony button:focus-visible,.tk-role-tabs button:focus-visible,.tk-border-field:focus-within{outline:2px solid var(--tk-focus-color, currentColor);outline-offset:3px}.tk-border-field:has(input[aria-invalid=true]){border-color:var(--tk-invalid-color, #dc2626);outline:2px solid var(--tk-invalid-color, #dc2626);outline-offset:2px}.tk-border>input{box-sizing:border-box;width:5rem;margin-left:auto;padding:.5rem;border:1px solid var(--tk-control-border, #8886);border-radius:var(--tk-control-radius, .375rem);background:transparent;color:inherit;font:inherit}.tk-background{display:flex;align-items:center;gap:.5rem;font-size:.8rem;cursor:pointer}.tk-background input,.tk-role-options input{accent-color:var(--tk-controls-color, currentColor);width:1rem;height:1rem;margin:0;flex:none}.tk-role-options{display:flex;flex-wrap:wrap;gap:.625rem 1rem;min-width:0;margin:0;padding:0;border:0;font-size:.8rem}.tk-role-options legend{margin-bottom:.5rem;padding:0}.tk-role-options label{display:flex;align-items:center;gap:.375rem;text-transform:capitalize;cursor:pointer}.tk-role-tabs{display:flex;flex-wrap:wrap;gap:.375rem}.tk-role-tabs button{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.8rem;text-transform:capitalize;cursor:pointer}.tk-role-tabs button[aria-pressed=true]{border-color:currentColor;box-shadow:inset 0 -2px 0 currentColor}.tk-role-tabs span{width:.75rem;height:.75rem;border:1px solid #8886;border-radius:50%;flex:none}.tk-editing{margin:0;font-size:.8rem;text-transform:capitalize;opacity:.7}.tk-shared-wheel{max-width:var(--cp-wheel-size, 280px);margin:.5rem auto;isolation:isolate}.tk-wheel-marker{position:absolute;transform:translate(-50%,-50%);width:var(--cp-marker-size, 30px);height:var(--cp-marker-size, 30px);padding:0;border:var(--cp-marker-border, 2px solid white);border-radius:var(--cp-marker-radius, 50%);box-shadow:var(--cp-marker-shadow, 0 0 0 1px #222);color:var(--cp-marker-text-color, white);font-size:var(--cp-marker-text-size, 11px);font-weight:700;text-shadow:0 1px 3px black;cursor:grab;touch-action:none}.tk-wheel-marker[aria-pressed=true]{box-shadow:var(--cp-marker-active-shadow, 0 0 0 3px #111, 0 0 0 5px white)}.tk-wheel-marker:focus-visible{outline:3px solid var(--tk-focus-color, #111);outline-offset:4px}.tk-palette{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:var(--tk-palette-gap, 4px);width:100%;min-width:0}.tk-palette [data-palette-part=item]{min-width:0}.tk-palette [data-palette-part=label]{display:block;margin-bottom:6px;font-size:var(--tk-shade-label-size, 11px);text-align:center;overflow-wrap:anywhere;opacity:.7}.tk-palette .tk-shade{height:var(--tk-swatch-height, 48px);border-radius:var(--tk-swatch-radius, 4px)}.tk-palette[data-shape=circle] .tk-shade{aspect-ratio:1;width:min(100%,var(--tk-swatch-height, 48px));height:auto;margin-inline:auto;border-radius:50%}.tk-palette[data-shape=joined]{gap:0}.tk-palette[data-shape=joined] .tk-shade{border-radius:0}.tk-palette[data-shape=joined] [data-palette-part=item]:first-child .tk-shade{border-radius:var(--tk-swatch-radius, 8px) 0 0 var(--tk-swatch-radius, 8px)}.tk-palette[data-shape=joined] [data-palette-part=item]:last-child .tk-shade{border-radius:0 var(--tk-swatch-radius, 8px) var(--tk-swatch-radius, 8px) 0}.tk-export{box-sizing:border-box;max-width:100%;max-height:24rem;margin:0;padding:1rem;overflow:auto;white-space:pre;border:1px solid var(--tk-control-border, #8886);border-radius:var(--tk-control-radius, .375rem);font-size:.75rem;line-height:1.6}.tk-provider-controls{display:contents;min-width:0;margin:0;padding:0;border:0}.tk-scope[data-disabled=true]{opacity:var(--tk-disabled-opacity, .55);cursor:not-allowed}.tk-picker [hidden]{display:none!important}.tk-scope[data-disabled=true] :is(.cp-provider-controls,cp-provider)[aria-disabled=true]>*{opacity:1}