.hue-wheel{background:#f2f3f0e0;border-radius:14px;justify-items:stretch;gap:12px;width:min(100%,230px);padding:10px;display:grid;box-shadow:0 9px 22px #161c1e24,inset 0 8px 18px #ffffff70}.hue-wheel-control{aspect-ratio:1.1;cursor:crosshair;touch-action:none;background:linear-gradient(#0000 26%,#000000bf),linear-gradient(90deg,#e45d53,#e7bd57,#77bd79,#58afca,#777bd0,#c56abf,#e45d53);border-radius:11px;width:100%;position:relative;overflow:hidden;box-shadow:0 4px 10px #2227291f,inset 0 8px 24px #ffffff40}.hue-wheel-control:active{cursor:grabbing}.hue-wheel-marker{top:26%;left:var(--hue-position);background:hsl(var(--hue-value) 65% 52%);pointer-events:none;border-radius:50%;width:19px;height:19px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #ffffffdb,0 2px 9px #0000006b}.hue-wheel-slider{appearance:none;cursor:pointer;background:linear-gradient(90deg,#e45d53,#e7bd57,#77bd79,#58afca,#777bd0,#c56abf,#e45d53);border-radius:999px;width:100%;height:14px;margin:0}.hue-wheel-slider::-webkit-slider-thumb{appearance:none;background:hsl(var(--hue-value,210) 65% 52%);border:0;border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 3px #ffffffe6,0 2px 6px #00000052}.hue-wheel-slider::-moz-range-thumb{background:hsl(var(--hue-value,210) 65% 52%);border:0;border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 3px #ffffffe6,0 2px 6px #00000052}.hue-wheel-slider:focus-visible{filter:drop-shadow(0 0 7px);outline:none}.hue-wheel-light-style{background:color-mix(in srgb, var(--appearance-accent) 16%, #93a0a66b);-webkit-backdrop-filter:blur(24px)saturate(82%);backdrop-filter:blur(24px)saturate(82%);box-shadow:0 14px 30px #34404721, inset 1px 1px 3px color-mix(in srgb, var(--appearance-accent) 26%, transparent)}.hue-wheel-light-style .hue-wheel-control{filter:saturate(.7);box-shadow:0 6px 14px #3440471f, inset 1px 1px 3px color-mix(in srgb, var(--appearance-accent) 24%, transparent)}.hue-wheel-light-style .hue-wheel-marker{box-shadow:0 0 0 3px #8f9da3ad,0 2px 8px #232d3152}.hue-wheel-light-style .hue-wheel-slider::-webkit-slider-thumb{box-shadow:0 0 0 3px #8f9da3ad,0 2px 6px #232d3147}.hue-wheel-light-style .hue-wheel-slider::-moz-range-thumb{box-shadow:0 0 0 3px #8f9da3ad,0 2px 6px #232d3147}.hue-wheel-swatches{justify-content:space-between;align-items:center;gap:8px;padding:1px 2px;display:flex}.hue-wheel-swatches button{background:hsl(var(--preset-hue) 66% 53%);cursor:pointer;border:0;border-radius:50%;width:17px;height:17px;padding:0;box-shadow:0 2px 5px #0000002e,inset 0 2px 4px #ffffff5c}.hue-wheel-swatches button[aria-pressed=true]{box-shadow:0 0 10px,0 2px 5px #0003}.hue-wheel-light-style .hue-wheel-swatches button{background:color-mix(in srgb, hsl(var(--preset-hue) 34% 59%) 62%, #919ea38a);-webkit-backdrop-filter:blur(10px)saturate(78%);backdrop-filter:blur(10px)saturate(78%);box-shadow:0 2px 5px #28333824, inset 1px 1px 3px color-mix(in srgb, var(--appearance-accent) 28%, transparent)}.hue-wheel-light-style .hue-wheel-swatches button[aria-pressed=true]{box-shadow:0 3px 7px #2833382e, inset 0 0 0 2px color-mix(in srgb, var(--appearance-accent) 58%, #53646a);transform:scale(1.12)}.hue-wheel-swatches button:focus-visible{filter:drop-shadow(0 0 6px);outline:none}.hue-wheel-dark-style{background:#191c1e;box-shadow:0 10px 24px #0000006b,inset 0 8px 18px #ffffff0a}.hue-wheel-dark-style .hue-wheel-control{box-shadow:0 4px 12px #0000006b,inset 0 8px 24px #ffffff1a}.hue-wheel-cool-style{background:linear-gradient(145deg,#e5e8e8,#adb8bc 58%,#dfe3e3);box-shadow:0 10px 20px #22313833,inset 0 9px 18px #ffffff9e,inset 0 -10px 17px #29373e1f}.hue-wheel-cool-style .hue-wheel-control{background:linear-gradient(#0000 26%,#141a1dad),linear-gradient(90deg,#b0b7b9,#c7cdcf,#e3e6e6,#9fa9ad,#778287,#aeb7ba);box-shadow:0 5px 12px #22313838,inset 0 8px 24px #ffffff8a,inset 0 -9px 16px #26343b2e}.hue-wheel-cool-style .hue-wheel-slider{filter:saturate(.72);box-shadow:0 4px 9px #23313738,inset 0 5px 9px #ffffff57}.hue-wheel-pastel-style{background:color-mix(in srgb, var(--appearance-pastel-container) 72%, transparent);box-shadow:inset 4px 5px 12px color-mix(in srgb, var(--appearance-background-one) 30%, transparent), inset -5px -7px 13px color-mix(in srgb, var(--appearance-background-three) 16%, transparent);border-radius:20px}.hue-wheel-pastel-style .hue-wheel-control{box-shadow:inset 4px 5px 12px color-mix(in srgb, var(--appearance-background-one) 26%, transparent), inset -3px -4px 8px color-mix(in srgb, var(--appearance-background-three) 16%, transparent);border-radius:15px}.hue-wheel-pastel-style .hue-wheel-marker{box-shadow:0 0 0 3px color-mix(in srgb, var(--appearance-pastel-container) 80%, transparent), 0 2px 8px #2a231d47}.hue-wheel-pastel-style .hue-wheel-slider::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in srgb, var(--appearance-pastel-container) 80%, transparent), 0 2px 6px #2a231d3d}.hue-wheel-pastel-style .hue-wheel-slider::-moz-range-thumb{box-shadow:0 0 0 3px color-mix(in srgb, var(--appearance-pastel-container) 80%, transparent), 0 2px 6px #2a231d3d}.hue-wheel-pastel-style .hue-wheel-swatches button{background:hsl(var(--preset-hue) 50% 56%);box-shadow:0 2px 5px #2a231d24, inset 1px 2px 4px color-mix(in srgb, var(--appearance-background-one) 30%, transparent)}.hue-wheel-pastel-style .hue-wheel-swatches button[aria-pressed=true]{box-shadow:0 3px 7px #2a231d33, inset 0 0 0 2px var(--appearance-pastel-ink)}.hue-wheel-pastel-style .hue-wheel-swatches button:focus-visible{filter:none;box-shadow:0 0 0 2px var(--appearance-pastel-ink), 0 2px 5px #2a231d29}.hue-wheel-retro-style{background:#d9caa5;border-radius:3px;box-shadow:4px 4px #29221952}.hue-wheel-retro-style .hue-wheel-control{box-shadow:none;background:repeating-linear-gradient(0deg,#201d1814 0 3px,#0000 3px 6px),linear-gradient(90deg,#b5443e,#d69b3d,#a8a64e,#56866e,#547c9a,#735d91,#b66b78);border-radius:2px}.hue-wheel-retro-style .hue-wheel-marker,.hue-wheel-retro-style .hue-wheel-swatches button{border-radius:2px}@media (prefers-reduced-motion:reduce){.hue-wheel-control{transition:none}}