.example3.svelte-19qlk0c{background-color:var(--bgColor);justify-content:center;align-items:stretch;min-height:100%;padding:1rem;display:flex;position:relative;overflow-x:hidden}.example3.svelte-19qlk0c .content:where(.svelte-19qlk0c){flex-direction:column;justify-content:center;align-items:center;row-gap:1px;width:100%;max-width:600px;min-height:100%;display:flex}.example3.svelte-19qlk0c .palette[role=main].palette__custom{background-color:#fff}@media screen and (width<=640px){.example3.svelte-19qlk0c .palette[role=main].palette__custom .palette__cells{grid-template-columns:repeat(var(--num-columns), minmax(1rem, 1fr));column-gap:0}}.example3.svelte-19qlk0c .header:where(.svelte-19qlk0c){width:100%}.example3.svelte-19qlk0c .header:where(.svelte-19qlk0c)>h1:where(.svelte-19qlk0c){margin-bottom:.5rem;font-size:1rem;font-weight:700}.example3.svelte-19qlk0c .slot:where(.svelte-19qlk0c){flex-direction:column;row-gap:.5rem;width:100%;display:flex}@media screen and (width<=320px){.example3.svelte-19qlk0c .slot:where(.svelte-19qlk0c){row-gap:0}}.example3.svelte-19qlk0c .slot__color:where(.svelte-19qlk0c){background-color:var(--color);width:100%;max-width:50px;height:50px}.example3.svelte-19qlk0c .slot__color-rank:where(.svelte-19qlk0c){font-size:0, 9rem;font-weight:700}@media screen and (width<=320px){.example3.svelte-19qlk0c .slot__color-rank:where(.svelte-19qlk0c){display:none}}.example3.svelte-19qlk0c .slot__color-label:where(.svelte-19qlk0c){font-size:.6rem;font-weight:400}@media screen and (width<=640px){.example3.svelte-19qlk0c .slot__color-label:where(.svelte-19qlk0c){display:none}}