.p-xy{background-image:radial-gradient(1px at 1px 1px,var(--pocky-color-ui-contrast-30) 100%,transparent);background-repeat:repeat;background-size:1rem 1rem;border:var(--pocky-border-std);border-radius:var(--pocky-radius-m);display:flex;box-sizing:border-box;font-size:1rem;height:var(--height);padding:var(--padding);position:relative;-webkit-user-select:none;user-select:none;width:var(--width)}.p-xy:before,.p-xy:after{background:var(--pocky-color-ui-contrast-90);box-sizing:border-box;content:"";display:block;height:100%;left:50%;opacity:.4;pointer-events:none;position:absolute;top:0;width:1px}.p-xy:after{transform:rotate(90deg)}.p-xy-handle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;cursor:pointer;display:inline-flex;outline:none;padding:0;border:var(--pocky-border-std);border-radius:50%;box-sizing:border-box;cursor:grab;height:var(--pocky-gap-l);left:50%;margin-left:calc(-.5 * var(--pocky-gap-l));margin-top:calc(-.5 * var(--pocky-gap-l));position:absolute;top:50%;transform:translate3d(var(--x),var(--y),0);transition:transform var(--pocky-timing-moderate) var(--pocky-ease-circ-out);width:var(--pocky-gap-l)}.p-xy-handle:after{border:3px solid var(--pocky-color-ui-focus);border-radius:.5rem;box-sizing:border-box;left:-3px;filter:blur(.5rem);opacity:0;position:absolute;pointer-events:none;top:-3px;transition:filter var(--pocky-timing-moderate) var(--pocky-ease-circ-out),opacity var(--pocky-timing-moderate) var(--pocky-ease-linear);z-index:var(--pocky-layer-focus);height:calc(100% + 6px);width:calc(100% + 6px);content:"";display:block}.p-xy-handle:focus-visible:after,.p-xy-handle:focus-within:after{opacity:1;filter:blur(0);transition:filter var(--pocky-timing-moderate) var(--pocky-ease-circ-out),opacity var(--pocky-timing-quick) var(--pocky-ease-linear)}.p-xy-range{box-sizing:border-box;height:100%;position:relative;width:100%}.p-xy.is-circle,.p-xy.is-circle .p-xy-range{border-radius:50%}.p-xy.is-dragging .p-xy-handle{cursor:grabbing;transition:none}.p-xy.is-circle .p-range{border-radius:50%}body.is-dragging{cursor:grabbing}