.basic-demo-module__CpNK8a__root{flex-direction:column;gap:.75rem;width:20rem;margin-inline:auto;display:flex}.basic-demo-module__CpNK8a__area{aspect-ratio:4/3;background:var(--area-background);touch-action:none;forced-color-adjust:none;border-radius:.5rem;position:relative}.basic-demo-module__CpNK8a__areaBackground{z-index:0;border-radius:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;touch-action:none;forced-color-adjust:none;background:var(--area-gradient);position:absolute;inset:0;box-shadow:inset 0 0 0 1px light-dark(#0000001a,#ffffff26)}.basic-demo-module__CpNK8a__areaThumb{z-index:1;touch-action:none;forced-color-adjust:none;cursor:pointer;width:1rem;height:1rem;top:var(--thumb-position-top);left:var(--thumb-position-left);background:var(--thumb-background);border:3px solid #fff;border-radius:999px;outline:none;transition:border .1s ease-in-out;position:absolute;transform:translate(-50%,-50%);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.basic-demo-module__CpNK8a__areaThumb:focus-visible{outline-offset:2px;border:2px solid #fff;outline:2px solid #ffffff4d}.basic-demo-module__CpNK8a__controls{align-items:center;gap:.5rem;display:flex}.basic-demo-module__CpNK8a__sliders{flex-direction:column;flex:1;gap:.25rem;display:flex}.basic-demo-module__CpNK8a__slider{forced-color-adjust:none;touch-action:none;border-radius:.25rem;height:1rem;position:relative}.basic-demo-module__CpNK8a__transparencyGrid{z-index:0;border-radius:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;touch-action:none;background-color:#fff;background-image:conic-gradient(var(--p-surface-100) 0deg, var(--p-surface-100) 25%, transparent 0deg, transparent 50%, var(--p-surface-100) 0deg, var(--p-surface-100) 75%, transparent 0deg);background-size:.5rem .5rem;position:absolute;inset:0}.basic-demo-module__CpNK8a__sliderTrack{border-radius:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;touch-action:none;background:var(--slider-background);z-index:1;position:absolute;inset:0;box-shadow:inset 0 0 0 1px light-dark(#0000001a,#ffffff26)}.basic-demo-module__CpNK8a__sliderThumb{z-index:2;touch-action:none;background:var(--slider-thumb-background);cursor:pointer;border:3px solid #fff;border-radius:999px;outline:none;width:1rem;height:1rem;transition:border .1s ease-in-out;position:absolute;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.basic-demo-module__CpNK8a__sliderThumb:focus-visible{outline-offset:2px;border:2px solid #fff;outline:2px solid #ffffff4d}.basic-demo-module__CpNK8a__swatch{border-radius:.375rem;width:2.25rem;height:2.25rem;position:relative}.basic-demo-module__CpNK8a__swatchBackground{background:var(--swatch-background);z-index:1;border-radius:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;touch-action:none;forced-color-adjust:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px light-dark(#0000001a,#ffffff26)}.basic-demo-module__CpNK8a__eyeDropper{border:1px solid var(--p-content-border-color);width:2.5rem;height:2.5rem;color:var(--p-text-muted-color);cursor:pointer;background:0 0;border-radius:.375rem;justify-content:center;align-items:center;display:inline-flex}.basic-demo-module__CpNK8a__eyeDropper:hover{background:light-dark(var(--p-surface-100),var(--p-surface-800))}.basic-demo-module__CpNK8a__eyeDropper:focus-visible{outline:1px solid var(--p-primary-color);outline-offset:2px}.basic-demo-module__CpNK8a__eyeDropper[disabled]{opacity:.5;pointer-events:none}.basic-demo-module__CpNK8a__input{border:1px solid var(--p-content-border-color);width:100%;color:var(--p-text-color);background:0 0;border-radius:.375rem;padding:.5rem .75rem;font-size:.875rem}.basic-demo-module__CpNK8a__input:focus-visible{outline:1px solid var(--p-primary-color);outline-offset:-1px}.basic-demo-module__CpNK8a__input[disabled]{opacity:.5;pointer-events:none}