.swatches.svelte-1n4bufv{gap:calc(var(--size) / 4);flex-wrap:wrap;display:flex}.swatch.svelte-1n4bufv{cursor:pointer;display:inline-flex;position:relative}.swatch.svelte-1n4bufv input:where(.svelte-1n4bufv){z-index:1;opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.dot.svelte-1n4bufv{width:var(--size);height:var(--size);background:var(--c);box-shadow:inset 0 0 0 1px #0000001f, 0 0 0 3px var(--ring-gap,var(--color-bg)), 0 0 0 4px transparent;transition:box-shadow .25s ease, transform .25s var(--ease-out);border-radius:50%}.dot.auto.svelte-1n4bufv{background:linear-gradient(135deg,#edb98a 50%,#7df9ff 50%)}.swatch.svelte-1n4bufv:hover .dot:where(.svelte-1n4bufv){transform:scale(1.06)}.swatch.svelte-1n4bufv input:where(.svelte-1n4bufv):checked+.dot:where(.svelte-1n4bufv){box-shadow:inset 0 0 0 1px #0000001f, 0 0 0 3px var(--ring-gap,var(--color-bg)), 0 0 0 5px var(--color-text), 0 0 calc(var(--size) / 2) var(--c,rgba(var(--eye-rgb), .6))}.swatch.svelte-1n4bufv input:where(.svelte-1n4bufv):focus-visible+.dot:where(.svelte-1n4bufv){outline:2px solid var(--color-accent);outline-offset:6px}@media (prefers-reduced-motion:reduce){.dot.svelte-1n4bufv{transition:none}}