#drawShapeSeg{flex-wrap:wrap}#drawShapeSeg button{flex:28%}.draw-color-row{align-items:flex-start;gap:10px;margin-bottom:10px;display:flex}.jscolor-btn{cursor:pointer;background:#f22;border:1px solid #ffffff1f;border-radius:10px;flex-shrink:0;width:44px;height:44px;padding:0;transition:all .15s;box-shadow:inset 0 1px #ffffff26,0 2px 6px #0000004d}.jscolor-btn:hover{border-color:#4ade80;transform:scale(1.05)}.jscolor-pop{background:linear-gradient(#ffffff0f,#ffffff05),#16171dd9;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;gap:8px;margin:-2px 0 10px;padding:10px;display:flex;box-shadow:inset 0 1px #ffffff14,0 10px 26px #00000080}.jscolor-pop[hidden]{display:none}.jscolor-sv{cursor:crosshair;touch-action:none;background-color:red;border:1px solid #ffffff1f;border-radius:10px;width:100%;height:130px;position:relative;overflow:hidden}.jscolor-sv:before,.jscolor-sv:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}.jscolor-sv:before{background:linear-gradient(90deg,#fff,#fff0)}.jscolor-sv:after{background:linear-gradient(#0000,#000)}.jscolor-sv-dot{pointer-events:none;z-index:1;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0009,0 2px 6px #00000080}.jscolor-hue{-webkit-appearance:none;appearance:none;cursor:pointer;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border:1px solid #ffffff1f;border-radius:5px;outline:none;width:100%;height:10px}.jscolor-hue::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border:2px solid #000000b3;border-radius:50%;width:16px;height:16px;box-shadow:0 0 0 1px #ffffff80}.jscolor-hue::-moz-range-thumb{cursor:pointer;background:#fff;border:2px solid #000000b3;border-radius:50%;width:14px;height:14px}.jscolor-hex-row{align-items:center;gap:8px;display:flex}.jscolor-preview{border:1px solid #ffffff24;border-radius:8px;flex-shrink:0;width:28px;height:28px}.jscolor-hex{color:#4ade80;letter-spacing:.5px;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:9px;outline:none;flex:1;min-width:0;padding:7px 10px;font-family:monospace;font-size:12px;font-weight:700;box-shadow:inset 0 1px 3px #00000059}.jscolor-hex:focus{border-color:#4ade80;box-shadow:0 0 0 3px #4ade802e}.draw-color-meta{flex:1;min-width:0}.draw-color-meta span{color:#4ade80;font-variant-numeric:tabular-nums;letter-spacing:.5px;font-size:12px;font-weight:700}.draw-swatches{flex-wrap:wrap;gap:5px;margin-top:6px;display:flex}.draw-swatch{cursor:pointer;border:2px solid #ffffff26;border-radius:7px;width:22px;height:22px;padding:0;transition:all .15s;box-shadow:inset 0 1px #ffffff40}.draw-swatch:hover{transform:scale(1.12)}.draw-swatch.active{border-color:#4ade80;box-shadow:0 0 0 2px #4ade8040}