.cp.svelte-13rslnh{--cp-surface: #ffffff;--cp-border: #d4d4d8;--cp-text: #18181b;--cp-muted: #71717a;--cp-ring: #3b82f6;--cp-handle-stroke: #ffffff;--cp-shadow: 0 1px 3px rgba(0, 0, 0, .12);display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:19rem;padding:.875rem;background:var(--cp-surface);border:1px solid var(--cp-border);border-radius:.75rem;box-shadow:var(--cp-shadow);color:var(--cp-text);font-family:inherit;box-sizing:border-box}.cp-fields.svelte-13rslnh{display:flex;gap:.75rem}.cp-plane.svelte-13rslnh{position:relative;flex:1 1 auto;aspect-ratio:4 / 3;min-height:9rem;border-radius:.5rem;background:var(--hue-color);cursor:crosshair;touch-action:none;overflow:hidden;outline:none}.cp-plane-white.svelte-13rslnh,.cp-plane-black.svelte-13rslnh{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit}.cp-plane-white.svelte-13rslnh{background:linear-gradient(to right,#fff,#fff0)}.cp-plane-black.svelte-13rslnh{background:linear-gradient(to top,#000,#0000)}.cp-plane-handle.svelte-13rslnh{position:absolute;width:.9rem;height:.9rem;border-radius:50%;background:var(--handle-color);border:2px solid var(--cp-handle-stroke);box-shadow:0 0 0 1px #00000059;transform:translate(-50%,-50%);pointer-events:none;transition:left .04s linear,top .04s linear}.cp-hue.svelte-13rslnh{position:relative;flex:0 0 1.25rem;border-radius:.5rem;cursor:ns-resize;touch-action:none;outline:none;background:linear-gradient(to bottom,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cp-hue-handle.svelte-13rslnh{position:absolute;left:50%;width:1.5rem;height:.55rem;border-radius:.3rem;background:var(--handle-color);border:2px solid var(--cp-handle-stroke);box-shadow:0 0 0 1px #00000059;transform:translate(-50%,-50%);pointer-events:none;transition:top .04s linear}.cp-readout.svelte-13rslnh{display:flex;align-items:center;gap:.5rem}.cp-preview.svelte-13rslnh{flex:0 0 auto;width:2rem;height:2rem;border-radius:.5rem;background:var(--preview-color);border:1px solid var(--cp-border);box-shadow:inset 0 0 0 1px #ffffff40}.cp-hex.svelte-13rslnh{display:flex;align-items:center;gap:.4rem;flex:1 1 auto}.cp-hex-label.svelte-13rslnh{font-size:.75rem;font-weight:600;color:var(--cp-muted)}.cp-hex-input.svelte-13rslnh{flex:1 1 auto;min-width:0;width:100%;padding:.4rem .55rem;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.85rem;color:var(--cp-text);background:var(--cp-surface);border:1px solid var(--cp-border);border-radius:.4rem;box-sizing:border-box}.cp-eyedropper.svelte-13rslnh{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2rem;height:2rem;padding:0;color:var(--cp-text);background:var(--cp-surface);border:1px solid var(--cp-border);border-radius:.4rem;cursor:pointer}.cp-eyedropper.svelte-13rslnh:hover{border-color:var(--cp-ring);color:var(--cp-ring)}.cp-swatches.svelte-13rslnh{display:flex;flex-wrap:wrap;gap:.4rem}.cp-swatch.svelte-13rslnh{width:1.5rem;height:1.5rem;padding:0;border-radius:.35rem;background:var(--swatch-color);border:1px solid var(--cp-border);cursor:pointer}.cp-swatch.is-active.svelte-13rslnh{box-shadow:0 0 0 2px var(--cp-surface),0 0 0 4px var(--cp-ring)}.cp-plane.svelte-13rslnh:focus-visible,.cp-hue.svelte-13rslnh:focus-visible,.cp-hex-input.svelte-13rslnh:focus-visible,.cp-eyedropper.svelte-13rslnh:focus-visible,.cp-swatch.svelte-13rslnh:focus-visible{outline:2px solid var(--cp-ring);outline-offset:2px}@media(prefers-color-scheme:dark){.cp.svelte-13rslnh{--cp-surface: #18181b;--cp-border: #3f3f46;--cp-text: #f4f4f5;--cp-muted: #a1a1aa;--cp-ring: #60a5fa;--cp-handle-stroke: #ffffff;--cp-shadow: 0 1px 3px rgba(0, 0, 0, .5)}}@media(prefers-reduced-motion:reduce){.cp-plane-handle.svelte-13rslnh,.cp-hue-handle.svelte-13rslnh{transition:none}}.cp-demo.svelte-wip8uq{display:flex;flex-wrap:wrap;gap:1.5rem}.cp-demo-section.svelte-wip8uq{flex:1 1 16rem;min-width:0}.cp-demo-section.svelte-wip8uq h3:where(.svelte-wip8uq){margin:0 0 .25rem;font-size:1rem}.cp-demo-hint.svelte-wip8uq{margin:0 0 .75rem;font-size:.85rem;opacity:.75}.cp-demo-stage.svelte-wip8uq{display:flex;justify-content:flex-start}.cp-demo-state.svelte-wip8uq{margin:.75rem 0 0;font-size:.85rem}.cp-demo-state.svelte-wip8uq code:where(.svelte-wip8uq){font-weight:700}