.guide-nav:where(.astro-pa355vqn){z-index:10;border-block:var(--stroke-hairline) solid var(--color-border-subtle);background:var(--brand-white);position:sticky;inset-block-start:0;overflow-x:auto}.guide-nav:where(.astro-pa355vqn) .site-container:where(.astro-pa355vqn){padding-block:var(--spacing-16);gap:var(--spacing-12);display:flex}.guide:where(.astro-pa355vqn){padding-block-end:var(--layout-section-space)}.guide-section:where(.astro-pa355vqn){padding-block:var(--layout-section-space);border-block-end:var(--stroke-hairline) solid var(--color-border-subtle);scroll-margin-top:9rem}.section-heading:where(.astro-pa355vqn){max-width:52rem;gap:var(--spacing-12);margin-block-end:var(--spacing-48);display:grid}.section-heading:where(.astro-pa355vqn) h2:where(.astro-pa355vqn){font-size:var(--font-size-heading-h3);line-height:var(--line-height-heading-h3)}.section-heading:where(.astro-pa355vqn) p:where(.astro-pa355vqn):last-child{color:var(--color-text-secondary);font-size:var(--font-size-copy-m);line-height:var(--line-height-copy-m)}.token-list:where(.astro-pa355vqn){gap:var(--spacing-16);margin:0 0 var(--spacing-32);display:grid}.token-list:where(.astro-pa355vqn) div:where(.astro-pa355vqn){gap:var(--spacing-4);display:grid}.token-list:where(.astro-pa355vqn) dt:where(.astro-pa355vqn){font-weight:var(--font-weight-bold);color:var(--color-text)}.token-list:where(.astro-pa355vqn) dd:where(.astro-pa355vqn){color:var(--color-text-secondary);font-size:var(--font-size-copy-m);line-height:var(--line-height-copy-m);margin:0}.guide-note:where(.astro-pa355vqn){max-width:52rem;color:var(--color-text-secondary);font-size:var(--font-size-copy-m);line-height:var(--line-height-copy-m)}.logo-grid:where(.astro-pa355vqn),.swatch-grid:where(.astro-pa355vqn),.product-grid:where(.astro-pa355vqn),.graphics-grid:where(.astro-pa355vqn){gap:var(--spacing-16);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));display:grid}.logo-card:where(.astro-pa355vqn),.graphics-grid:where(.astro-pa355vqn) figure:where(.astro-pa355vqn){border:var(--stroke-hairline) solid var(--color-border);margin:0}.logo-card:where(.astro-pa355vqn)>div:where(.astro-pa355vqn),.graphics-grid:where(.astro-pa355vqn) figure:where(.astro-pa355vqn)>div:where(.astro-pa355vqn){min-height:12rem;padding:var(--spacing-24);background:var(--color-surface-specimen);place-items:center;display:grid}.logo-card--dark:where(.astro-pa355vqn)>div:where(.astro-pa355vqn){background:var(--brand-black-k100)}.logo-card:where(.astro-pa355vqn) img:where(.astro-pa355vqn){width:min(100%,15rem);height:auto}.logo-card:where(.astro-pa355vqn) figcaption:where(.astro-pa355vqn),.graphics-grid:where(.astro-pa355vqn) figcaption:where(.astro-pa355vqn){padding:var(--spacing-12) var(--spacing-16);color:var(--color-text-secondary);font-size:var(--font-size-small-info);font-weight:var(--font-weight-roman);line-height:var(--line-height-small-info)}.swatch:where(.astro-pa355vqn){border:var(--stroke-hairline) solid var(--color-border)}.swatch__color:where(.astro-pa355vqn){aspect-ratio:16/9;background:var(--swatch)}.swatch:where(.astro-pa355vqn)>div:where(.astro-pa355vqn):last-child{padding:var(--spacing-16);gap:var(--spacing-4);display:grid}.swatch:where(.astro-pa355vqn) h3:where(.astro-pa355vqn),.product-color:where(.astro-pa355vqn) h4:where(.astro-pa355vqn){font-size:var(--font-size-copy-s);line-height:var(--line-height-copy-s)}.swatch:where(.astro-pa355vqn) p:where(.astro-pa355vqn),.product-color:where(.astro-pa355vqn) p:where(.astro-pa355vqn){color:var(--color-text-subtle);font-size:var(--font-size-small-footnote);line-height:var(--line-height-small-footnote)}.custom-page .guide-section:where(.astro-pa355vqn)>.subsection-title:where(.astro-pa355vqn){margin-block:var(--spacing-64) var(--spacing-24);font-size:var(--font-size-heading-h5);line-height:var(--line-height-heading-h5)}.application-intro:where(.astro-pa355vqn){max-width:64ch;color:var(--color-text-secondary);font-size:var(--font-size-copy-m);line-height:var(--line-height-copy-m)}.color-application-list:where(.astro-pa355vqn){gap:var(--spacing-48);margin-block-start:var(--spacing-32);display:grid}.color-application:where(.astro-pa355vqn){gap:var(--spacing-24);display:grid}.color-application:where(.astro-pa355vqn)>header:where(.astro-pa355vqn){gap:var(--spacing-4);max-width:64ch;display:grid}.color-application:where(.astro-pa355vqn) h4:where(.astro-pa355vqn){font-size:var(--font-size-heading-h6);line-height:var(--line-height-heading-h6)}.color-application:where(.astro-pa355vqn)>header:where(.astro-pa355vqn) p:where(.astro-pa355vqn),.application-role:where(.astro-pa355vqn) p:where(.astro-pa355vqn){color:var(--color-text-secondary)}.application-role-grid:where(.astro-pa355vqn){gap:var(--spacing-16);grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));display:grid}.application-role:where(.astro-pa355vqn){min-width:0;padding:var(--spacing-16);align-content:start;gap:var(--spacing-8);border:var(--stroke-hairline) solid var(--color-border);background:var(--color-surface-specimen);display:grid}.application-role__sample:where(.astro-pa355vqn){aspect-ratio:16/9;border:var(--stroke-thick) solid var(--application-border);background:var(--application-bg);color:var(--application-fg);font-size:var(--font-size-heading-h4);font-weight:var(--font-weight-bold);line-height:var(--line-height-heading-h4);place-items:center;margin-block-end:var(--spacing-4);display:grid}.application-role:where(.astro-pa355vqn) h5:where(.astro-pa355vqn){font-size:var(--font-size-copy-s);line-height:var(--line-height-copy-s)}.application-role:where(.astro-pa355vqn) p:where(.astro-pa355vqn){font-size:var(--font-size-small-info);line-height:var(--line-height-small-info)}.application-role:where(.astro-pa355vqn) .application-role__primitive:where(.astro-pa355vqn){color:var(--color-text-secondary);font-size:var(--font-size-small-footnote);font-weight:var(--font-weight-roman);line-height:var(--line-height-small-footnote)}.product-color:where(.astro-pa355vqn){padding:var(--spacing-16);gap:var(--spacing-8);border:var(--stroke-hairline) solid var(--color-border);display:grid}.product-color__scale:where(.astro-pa355vqn){grid-template-columns:2fr 1fr 1fr;height:6rem;display:grid}.product-color__scale:where(.astro-pa355vqn) span:where(.astro-pa355vqn){background:var(--swatch)}.tag-examples:where(.astro-pa355vqn){gap:var(--spacing-8);margin-block-end:var(--spacing-24);display:flex}.viewport-grid:where(.astro-pa355vqn){gap:var(--spacing-24);grid-template-columns:minmax(0,1.5fr) minmax(18rem,.7fr);display:grid}.viewport-card:where(.astro-pa355vqn){padding:var(--spacing-24);align-content:start;gap:var(--spacing-12);background:var(--color-surface-specimen);display:grid;overflow:hidden}.viewport-card:where(.astro-pa355vqn) .type-h1:where(.astro-pa355vqn){font-size:var(--font-size-heading-h1-max);line-height:var(--line-height-heading-h1-max)}.viewport-card:where(.astro-pa355vqn) .type-h2:where(.astro-pa355vqn){font-size:var(--font-size-heading-h2-max);line-height:var(--line-height-heading-h2-max)}.viewport-card:where(.astro-pa355vqn) .type-h3:where(.astro-pa355vqn){font-size:var(--font-size-heading-h3-max);line-height:var(--line-height-heading-h3-max)}.viewport-card:where(.astro-pa355vqn) .type-h4:where(.astro-pa355vqn){font-size:var(--font-size-heading-h4-max);line-height:var(--line-height-heading-h4-max)}.viewport-card:where(.astro-pa355vqn) .type-h5:where(.astro-pa355vqn){font-size:var(--font-size-heading-h5-max);line-height:var(--line-height-heading-h5-max)}.viewport-card:where(.astro-pa355vqn) .type-h6:where(.astro-pa355vqn){font-size:var(--font-size-heading-h6-max);line-height:var(--line-height-heading-h6-max)}.viewport-card--mobile:where(.astro-pa355vqn) .type-h1:where(.astro-pa355vqn){font-size:2.5rem;line-height:3rem}.viewport-card--mobile:where(.astro-pa355vqn) .type-h2:where(.astro-pa355vqn){font-size:2.125rem;line-height:2.625rem}.viewport-card--mobile:where(.astro-pa355vqn) .type-h3:where(.astro-pa355vqn){font-size:1.75rem;line-height:2.25rem}.viewport-card--mobile:where(.astro-pa355vqn) .type-h4:where(.astro-pa355vqn){font-size:1.5rem;line-height:2rem}.viewport-card:where(.astro-pa355vqn) :where(.astro-pa355vqn):is(.type-h1,.type-h2,.type-h3,.type-h4,.type-h5,.type-h6){white-space:nowrap;color:var(--color-text)}.viewport-card:where(.astro-pa355vqn) :where(.astro-pa355vqn):is(.type-h1,.type-h2,.type-h3,.type-h4,.type-h5,.type-h6) strong:where(.astro-pa355vqn){font-weight:var(--font-weight-bold)}.viewport-card:where(.astro-pa355vqn) :where(.astro-pa355vqn):is(.type-h1,.type-h2,.type-h3,.type-h4,.type-h5,.type-h6) span:where(.astro-pa355vqn){font-weight:var(--font-weight-light)}.body-style-list:where(.astro-pa355vqn){gap:var(--spacing-32);margin-block-start:var(--spacing-48);display:grid}.body-style-list:where(.astro-pa355vqn)>article:where(.astro-pa355vqn){gap:var(--spacing-24);border-block-end:var(--stroke-hairline) solid var(--color-border-subtle);grid-template-columns:12rem minmax(0,1fr);padding-block-end:var(--spacing-24);display:grid}.body-style-list:where(.astro-pa355vqn) h3:where(.astro-pa355vqn){font-size:var(--font-size-copy-s);line-height:var(--line-height-copy-s)}.weight-grid:where(.astro-pa355vqn){gap:var(--spacing-24);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.weight-grid:where(.astro-pa355vqn)>div:where(.astro-pa355vqn){gap:var(--spacing-4);min-width:0;display:grid}.weight-grid:where(.astro-pa355vqn) p:where(.astro-pa355vqn){white-space:nowrap}.button-table:where(.astro-pa355vqn){gap:var(--spacing-24);display:grid}.button-group:where(.astro-pa355vqn){gap:var(--spacing-12);display:grid}.button-group:where(.astro-pa355vqn) h3:where(.astro-pa355vqn){font-size:var(--font-size-small-info);line-height:var(--line-height-small-info);text-transform:capitalize}.button-row:where(.astro-pa355vqn){gap:var(--spacing-16);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.button-row:where(.astro-pa355vqn)>div:where(.astro-pa355vqn){min-height:6rem;padding:var(--spacing-16);background:var(--color-surface-specimen);place-items:center;display:grid}.button-row--labels:where(.astro-pa355vqn){color:var(--color-text-subtle);font-size:var(--font-size-small-footnote);line-height:var(--line-height-small-footnote)}.navlink-grid:where(.astro-pa355vqn){gap:var(--spacing-16);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));margin-block-start:var(--spacing-32);display:grid}.navlink-grid:where(.astro-pa355vqn)>div:where(.astro-pa355vqn){padding:var(--spacing-16);gap:var(--spacing-12);border:var(--stroke-hairline) solid var(--color-border);background:var(--color-surface-specimen);display:grid}.graphics-grid:where(.astro-pa355vqn) .favicon-mark:where(.astro-pa355vqn){width:7rem}.custom-page .arrow-link:where(.astro-pa355vqn){align-items:center;gap:var(--spacing-16);color:var(--brand-orangered-100);font-size:var(--font-size-small-info);font-weight:var(--font-weight-black);letter-spacing:.03125rem;text-transform:uppercase;text-decoration:none;display:inline-flex}.arrow-link:where(.astro-pa355vqn) img:where(.astro-pa355vqn){width:1.125rem;height:1rem}.spacing-list:where(.astro-pa355vqn){gap:var(--spacing-12);display:grid}.spacing-list:where(.astro-pa355vqn)>div:where(.astro-pa355vqn){align-items:center;gap:var(--spacing-16);min-height:2rem;color:var(--color-text-secondary);font-size:var(--font-size-small-info);grid-template-columns:9rem minmax(0,1fr) 3rem;display:grid}.spacing-bar:where(.astro-pa355vqn){width:max(var(--space), 1px);background:var(--brand-orangered-100);max-width:100%;height:1rem}.styling-grid:where(.astro-pa355vqn){gap:var(--spacing-24);grid-template-columns:repeat(3,minmax(0,1fr));margin-block-start:var(--spacing-48);display:grid}.styling-grid:where(.astro-pa355vqn)>article:where(.astro-pa355vqn){padding:var(--spacing-24);align-content:start;gap:var(--spacing-24);background:var(--color-surface-specimen);display:grid}.styling-grid:where(.astro-pa355vqn) h3:where(.astro-pa355vqn){font-size:var(--font-size-heading-h6);line-height:var(--line-height-heading-h6)}.radius-list:where(.astro-pa355vqn),.stroke-list:where(.astro-pa355vqn),.opacity-list:where(.astro-pa355vqn){gap:var(--spacing-16);display:grid}.radius-list:where(.astro-pa355vqn) div:where(.astro-pa355vqn),.opacity-list:where(.astro-pa355vqn) div:where(.astro-pa355vqn){padding:var(--spacing-16);border:var(--stroke-hairline) solid var(--color-border);background:var(--brand-white)}.stroke-list:where(.astro-pa355vqn) div:where(.astro-pa355vqn){border-top-style:solid;border-top-color:var(--color-border);padding-block-start:var(--spacing-8)}.implementation-note:where(.astro-pa355vqn){padding:var(--spacing-32);gap:var(--spacing-16);border-inline-start:var(--stroke-thick) solid var(--brand-orangered-100);background:var(--brand-orangered-20);margin-block-start:var(--spacing-48);display:grid}.implementation-note:where(.astro-pa355vqn) h2:where(.astro-pa355vqn){font-size:var(--font-size-heading-h5);line-height:var(--line-height-heading-h5)}.implementation-note:where(.astro-pa355vqn) ul:where(.astro-pa355vqn){gap:var(--spacing-8);margin:0;padding-inline-start:1.2em;display:grid}@media (width<=62rem){.viewport-grid:where(.astro-pa355vqn),.body-style-list:where(.astro-pa355vqn)>article:where(.astro-pa355vqn){grid-template-columns:1fr}.weight-grid:where(.astro-pa355vqn),.button-row:where(.astro-pa355vqn){grid-template-columns:repeat(2,minmax(0,1fr))}.button-row--labels:where(.astro-pa355vqn){display:none}.styling-grid:where(.astro-pa355vqn){grid-template-columns:1fr}}@media (width<=38rem){.guide-nav:where(.astro-pa355vqn){inset-block-start:0}.weight-grid:where(.astro-pa355vqn),.button-row:where(.astro-pa355vqn){grid-template-columns:1fr}.spacing-list:where(.astro-pa355vqn)>div:where(.astro-pa355vqn){gap:var(--spacing-8);grid-template-columns:7.5rem minmax(0,1fr) 2.5rem}}