.color-swatch-box{height:3rem;border-radius:var(--ux4g-radius-m, 8px);border:var(--ux4g-border-thin, 1px) solid var(--ux4g-border-color-neutral-subtle, #e5e5e5)}.color-swatch-box-lg{height:3.5rem;border-radius:var(--ux4g-radius-m, 8px);border:var(--ux4g-border-thin, 1px) solid var(--ux4g-border-color-neutral-subtle, #e5e5e5)}@media(min-width:768px){.ux4g-grid:has(>*>.color-swatch-box-lg){grid-template-columns:repeat(13,minmax(0,1fr))}}.color-swatch-step{margin-top:var(--ux4g-space-2, .25rem);text-align:center;font-family:var(--ux4g-typography-fontFamily-mono, monospace);font-size:.625rem;font-weight:var(--ux4g-fw-semibold, 600);color:var(--ux4g-text-neutral-primary, #171717);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-swatch-hex{text-align:center;font-family:var(--ux4g-typography-fontFamily-mono, monospace);font-size:.5625rem;color:var(--ux4g-text-neutral-tertiary, #737373);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-hero-illustration{position:relative;height:16rem;width:16rem}.color-hero-illustration-bg{position:absolute;inset:0;border-radius:var(--ux4g-radius-2xl, 24px);border:var(--ux4g-border-thin, 1px) solid var(--ux4g-border-color-neutral-subtle, #e5e5e5);background-color:var(--ux4g-bg-primary-soft, #dcd4ff);opacity:.5}.color-token-cell{display:grid;grid-template-columns:1.2fr 1fr 1fr;align-items:center;gap:var(--ux4g-space-6, 1rem);border-radius:var(--ux4g-radius-m, 8px);padding:.375rem .5rem;transition:background-color var(--ux4g-transition-duration-fast, .15s) ease}.color-token-cell>:nth-child(2),.color-token-cell>:nth-child(3){justify-self:start}.color-token-cell:hover{background-color:var(--ux4g-bg-neutral-soft, #f5f5f5)}.color-token-preview-dot{width:1.25rem;height:1.25rem;border-radius:var(--ux4g-radius-s, 4px);border:var(--ux4g-border-thin, 1px) solid var(--ux4g-border-color-neutral-subtle, #e5e5e5);box-shadow:var(--ux4g-shadow-l1);flex-shrink:0}.color-link{font-size:var(--ux4g-fs-14, .875rem);font-weight:var(--ux4g-fw-medium, 500);color:var(--ux4g-text-primary, #4a2bc2);text-decoration:none;transition:color var(--ux4g-transition-duration-fast, .15s) ease}.color-link:hover{text-decoration:underline;color:var(--ux4g-text-link-default-hover, #3d239f)}.color-font-mono{font-family:var(--ux4g-typography-fontFamily-mono, monospace);font-size:var(--ux4g-size-10, .625rem)}