.swatch{gap:var(--space-2);inline-size:220px;padding:var(--space-3);background:var(--bg-surface);border:var(--border-1) solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;text-align:start;transition:border-color var(--duration-sm) var(--ease-out),box-shadow var(--duration-sm) var(--ease-out);flex-direction:column;display:flex;position:relative}.swatch:hover{border-color:var(--border-default);box-shadow:var(--shadow-2,0 4px 8px -2px #0000000f)}.swatch:focus-visible{outline:var(--border-2) solid var(--accent);outline-offset:2px}.swatch-tile{border-radius:var(--radius-sm);border:var(--border-0_5) solid var(--border-subtle);flex-shrink:0;block-size:56px;inline-size:100%}.swatch-tile-text{background:var(--bg-inset);justify-content:center;align-items:center;inline-size:21px;display:inline-flex}.swatch-aa{font-family:var(--font-sans);font-size:var(--text-md);letter-spacing:-.01em;font-weight:500;line-height:1.5}.swatch-labels{font-family:var(--font-mono);flex-direction:column;gap:2px;display:flex}.swatch-token{color:var(--fg-primary);white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:18px;overflow:hidden}.swatch-hex{font-size:var(--text-xs);color:var(--fg-tertiary);text-transform:uppercase;line-height:16px}.swatch-feedback{font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;background:var(--fg-primary);color:var(--bg-surface);border-radius:var(--radius-xs);opacity:0;pointer-events:none;transition:opacity var(--duration-sm) var(--ease-out);padding:4px 6px;font-size:10px;font-weight:500;line-height:14px;position:absolute;top:var(--space-3)}.swatch-feedback:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--space-3)}.swatch-feedback:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--space-3)}.swatch-feedback:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--space-3)}.swatch-feedback:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--space-3)}.swatch-feedback:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--space-3)}.swatch-feedback:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--space-3)}.swatch[data-copied=true] .swatch-feedback{opacity:1}@media(prefers-reduced-motion:reduce){.swatch,.swatch-feedback{transition:none}}.colors-page[data-astro-cid-tuhb5zz2]{gap:var(--space-16);padding-block:var(--space-8);flex-direction:column;display:flex}.colors-page-header[data-astro-cid-tuhb5zz2]{gap:var(--space-2);flex-direction:column;display:flex}.eyebrow[data-astro-cid-tuhb5zz2]{font-family:var(--font-mono);font-weight:500;font-size:var(--text-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-tertiary);line-height:14px}.colors-page-header[data-astro-cid-tuhb5zz2] h1[data-astro-cid-tuhb5zz2]{font-family:var(--font-sans);font-weight:700;font-size:var(--text-2xl);letter-spacing:-.02em;color:var(--fg-primary);margin:0;line-height:48px}.description[data-astro-cid-tuhb5zz2]{font-family:var(--font-sans);font-weight:400;font-size:var(--text-base);letter-spacing:-.01em;color:var(--fg-secondary);max-inline-size:60ch;line-height:22px}.colors-group[data-astro-cid-tuhb5zz2]{gap:var(--space-3);flex-direction:column;display:flex}.colors-group-label[data-astro-cid-tuhb5zz2]{font-family:var(--font-mono);font-weight:500;font-size:var(--text-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-secondary);margin:0;line-height:14px}.colors-row[data-astro-cid-tuhb5zz2]{gap:var(--space-3);flex-wrap:wrap;display:flex}