.color-picker{display:flex;flex-direction:column;gap:8px}.cp-square-row{display:flex;gap:8px;align-items:stretch}.cp-sv{position:relative;flex:1 1;aspect-ratio:1;border-radius:6px;overflow:hidden;cursor:crosshair;touch-action:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.25)}.cp-sv-white{background:linear-gradient(90deg,#fff,transparent)}.cp-sv-black,.cp-sv-white{position:absolute;inset:0;pointer-events:none}.cp-sv-black{background:linear-gradient(0deg,#000,transparent)}.cp-sv-marker{position:absolute;width:12px;height:12px;margin-left:-6px;margin-top:-6px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.6);pointer-events:none}.cp-hue{position:relative;width:14px;border-radius:6px;cursor:ns-resize;touch-action:none;background:linear-gradient(180deg,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.25)}.cp-hue-marker{position:absolute;left:-2px;right:-2px;height:4px;margin-top:-2px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.7);pointer-events:none}.cp-inputs{display:flex;gap:6px;align-items:stretch}.cp-hex{flex:1 1;display:flex;align-items:center;height:24px;padding:0 8px;background:rgba(14,14,18,.65);border:1px solid rgba(255,255,255,.06);border-radius:8px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.25)}.cp-hex:focus-within{border-color:var(--accent-2)}.cp-hex .cp-hash{color:var(--text-dim);margin-right:4px;font-size:11px}.cp-hex input{flex:1 1;background:none;border:none;outline:none;color:var(--text);font:inherit;font-size:11px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-transform:uppercase;width:100%;padding:0}.cp-eyedrop{display:flex;align-items:center;justify-content:center;width:26px;height:24px;padding:0;background:rgba(14,14,18,.65);border:1px solid rgba(255,255,255,.06);border-radius:8px;color:var(--text-dim);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.25)}.cp-eyedrop:hover{color:var(--text);border-color:rgba(255,255,255,.12)}.cp-channels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}.cp-alpha-row{display:grid;grid-template-columns:12px minmax(0,1fr) 58px;gap:6px;align-items:center}.cp-alpha-row>span{color:var(--text-dim);font-size:10px}.cp-alpha{position:relative;height:14px;overflow:hidden;border-radius:7px;cursor:ew-resize;touch-action:none;background:linear-gradient(45deg,rgba(255,255,255,.1) 25%,transparent 0),linear-gradient(-45deg,rgba(255,255,255,.1) 25%,transparent 0),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.1) 0),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.1) 0);background-color:rgba(0,0,0,.28);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.25)}.cp-alpha-gradient{position:absolute;inset:0}.cp-alpha-marker{position:absolute;top:-2px;width:4px;height:18px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.7);pointer-events:none}.cp-recents{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.cp-swatch{aspect-ratio:1;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:4px;cursor:pointer;background:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.3);transition:transform 60ms ease,border-color 80ms ease}.cp-swatch:hover{border-color:rgba(255,255,255,.25);transform:scale(1.06)}.cp-swatch.empty{background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 4px,transparent 4px 8px);cursor:default}.cp-swatch.empty:hover{transform:none;border-color:rgba(255,255,255,.08)}.color-picker-popover-trigger{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:24px;padding:0;border:0;background:transparent;color:var(--text-dim);font:inherit;cursor:pointer}.color-picker-popover-trigger:hover{color:var(--text)}.color-picker-popover-trigger>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-picker-popover-swatch{position:relative;width:30px;height:18px;flex:0 0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:3px;background:linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 0),linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 0),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.12) 0),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.12) 0);background-color:rgba(0,0,0,.32);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.35)}.color-picker-popover-swatch-fill{position:absolute;inset:0}.color-picker-popover{position:fixed;z-index:80;width:248px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:color-mix(in srgb,var(--panel) 94%,#050508);box-shadow:0 18px 48px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.05)}