.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-sublabel{letter-spacing:.04em;text-transform:uppercase;color:var(--stone,#858b98);font-size:10px}.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)}.kp-hexfield-modes{background:var(--paper,#f1f5fa);border:1px solid var(--paper-2,#e2eaf3);border-radius:9px;gap:4px;padding:3px;display:inline-flex}.kp-hexfield-modes button{color:var(--stone,#858b98);cursor:pointer;background:0 0;border:0;border-radius:6px;flex:1;padding:5px 12px;font-size:12px;font-weight:600}.kp-hexfield-modes button.is-active{color:var(--ink,#1c2a47);background:#fff;box-shadow:0 1px 2px #1c2a471a}.kp-hexfield-grad{flex-direction:column;gap:8px;display:inline-flex}.kp-hexfield-gradprev{border:1px solid var(--paper-2,#e2eaf3);border-radius:8px;width:100%;min-width:180px;height:40px}.kp-hexfield-gradstops{gap:12px;display:flex}.kp-hexfield-gradstops label{color:var(--ink-2,#5b6477);align-items:center;gap:6px;font-size:12px;display:inline-flex}.kp-hexfield-gradstops input[type=color],.kp-hexfield-gradstops .kp-cp-trigger{border:1px solid var(--paper-2,#e2eaf3);cursor:pointer;background:0 0;border-radius:6px;width:26px;height:26px;padding:0}.kp-hexfield-gradtype{background:var(--paper,#f1f5fa);border:1px solid var(--paper-2,#e2eaf3);border-radius:9px;gap:4px;padding:3px;display:inline-flex}.kp-hexfield-gradtype button{color:var(--stone,#858b98);cursor:pointer;background:0 0;border:0;border-radius:6px;flex:1;padding:4px 12px;font-size:12px;font-weight:600}.kp-hexfield-gradtype button.is-active{color:var(--ink,#1c2a47);background:#fff;box-shadow:0 1px 2px #1c2a471a}.kp-hexfield-gradangle{letter-spacing:.04em;text-transform:uppercase;color:var(--stone,#858b98);align-items:center;gap:8px;font-size:10px;display:inline-flex}.kp-hexfield-gradangle input[type=range]{accent-color:var(--clay,#2f86d6);cursor:pointer;flex:1}.kp-hexfield-gradpresets{flex-wrap:wrap;gap:6px;display:flex}.kp-hexfield-gradpresets button{cursor:pointer;border:1px solid #1c2a4729;border-radius:6px;width:30px;height:24px;padding:0}