.kp-hexfield{flex-direction:column;gap:8px;display:inline-flex}.kp-hexfield-label{letter-spacing:.04em;text-transform:uppercase;color:var(--stone,#858b98);font-size:11px}.kp-hexfield-row{align-items:center;gap:6px;display:inline-flex}.kp-hexfield-hash{font:600 14px/1 var(--font-mono,monospace);color:var(--stone,#858b98)}.kp-hexfield-input{border:1px solid var(--paper-2,#e2eaf3);background:var(--paper,#f1f5fa);width:84px;color:var(--ink,#1c2a47);font:600 13px/1 var(--font-mono,monospace);letter-spacing:.04em;text-transform:uppercase;border-radius:8px;padding:7px 8px}.kp-hexfield-input:focus{border-color:var(--clay,#2f86d6);outline:none}.kp-hexfield-wheel{border:1px solid var(--paper-2,#e2eaf3);cursor:pointer;border-radius:8px;flex:none;width:32px;height:32px;position:relative;overflow:hidden}.kp-hexfield-wheel input[type=color]{cursor:pointer;background:0 0;border:0;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;position:absolute;inset:-4px}.kp-hexfield-clear{border:1px solid var(--paper-2,#e2eaf3);color:var(--stone,#858b98);cursor:pointer;background:0 0;border-radius:8px;padding:6px 10px;font-size:12px}.kp-hexfield-clear:hover{border-color:var(--clay,#2f86d6);color:var(--ink,#1c2a47)}.kp-hexfield-swatches{flex-wrap:wrap;gap:6px;display:flex}.kp-hexfield-swatch{cursor:pointer;border:1px solid #1c2a4729;border-radius:6px;width:24px;height:24px;padding:0}.kp-hexfield-swatch.is-active{box-shadow:0 0 0 2px var(--paper,#f1f5fa), 0 0 0 4px var(--clay,#2f86d6)}