Home
ACSS 4 Variables and Classes

ACSS 4 Variables and Classes

This is from ACSS 4 RC3 used on this website and a Bricks website. There is also a legacy ACSS 3 version.

Note: If the data appears empty, reload the page.

ACSS RC3 for Etch

This is the ACSS file for this site. Remember, your output will vary based on your settings.

Type :

CSS Reference/Name :

Query Rule :

Category	Type	CSS Reference/Name	Default Value	Query Rule
Text, Headings, & Spacing	Variable	–root-font-size	–root-font-size: 100%;
Palette	Variable	–primary	–primary: oklch(0.2783333333 0.0432837646 262.4538043773);
Palette	Variable	–primary-hover	–primary-hover: oklch(0.32 0.043 262.4538043773);
Palette	Variable	–primary-ultra-light	–primary-ultra-light: oklch(0.8 0.043 262.4538043773);
Palette	Variable	–primary-light	–primary-light: oklch(0.7 0.043 262.4538043773);
Palette	Variable	–primary-semi-light	–primary-semi-light: oklch(0.6 0.043 262.4538043773);
Palette	Variable	–primary-semi-dark	–primary-semi-dark: oklch(0.4 0.043 262.4538043773);
Palette	Variable	–primary-dark	–primary-dark: oklch(0.3 0.043 262.4538043773);
Palette	Variable	–primary-ultra-dark	–primary-ultra-dark: oklch(0.2 0.043 262.4538043773);
Palette	Variable	–secondary	–secondary: oklch(0.5275333993 0.0247362536 143.0956106885);
Palette	Variable	–secondary-hover	–secondary-hover: oklch(0.607 0.025 143.0956106885);
Palette	Variable	–secondary-ultra-light	–secondary-ultra-light: oklch(0.95 0.025 143.0956106885);
Palette	Variable	–secondary-light	–secondary-light: oklch(0.85 0.025 143.0956106885);
Palette	Variable	–secondary-semi-light	–secondary-semi-light: oklch(0.65 0.025 143.0956106885);
Palette	Variable	–secondary-semi-dark	–secondary-semi-dark: oklch(0.35 0.025 143.0956106885);
Palette	Variable	–secondary-dark	–secondary-dark: oklch(0.25 0.025 143.0956106885);
Palette	Variable	–secondary-ultra-dark	–secondary-ultra-dark: oklch(0.1 0.025 143.0956106885);
Palette	Variable	–accent	–accent: oklch(0.7137031053 0.1228974602 49.0706744092);
Palette	Variable	–accent-hover	–accent-hover: oklch(0.821 0.123 49.0706744092);
Palette	Variable	–accent-ultra-light	–accent-ultra-light: oklch(0.95 0.036 49.0706744092);
Palette	Variable	–accent-light	–accent-light: oklch(0.85 0.115 49.0706744092);
Palette	Variable	–accent-semi-light	–accent-semi-light: oklch(0.65 0.123 49.0706744092);
Palette	Variable	–accent-semi-dark	–accent-semi-dark: oklch(0.35 0.107 49.0644171952);
Palette	Variable	–accent-dark	–accent-dark: oklch(0.25 0.076 49.0706744092);
Palette	Variable	–accent-ultra-dark	–accent-ultra-dark: oklch(0.1 0.03 49.0706744092);
Palette	Variable	–base	–base: oklch(0.7 0.013147902 82.4018002689);
Palette	Variable	–base-hover	–base-hover: oklch(0.805 0.013 82.4018002689);
Palette	Variable	–base-ultra-light	–base-ultra-light: oklch(0.95 0.013 82.4018002689);
Palette	Variable	–base-light	–base-light: oklch(0.85 0.013 82.4018002689);
Palette	Variable	–base-semi-light	–base-semi-light: oklch(0.65 0.013 82.4018002689);
Palette	Variable	–base-semi-dark	–base-semi-dark: oklch(0.35 0.013 82.4018002689);
Palette	Variable	–base-dark	–base-dark: oklch(0.25 0.013 82.4018002689);
Palette	Variable	–base-ultra-dark	–base-ultra-dark: oklch(0.15 0.013 82.4018002689);
Palette	Variable	–neutral	–neutral: oklch(0 0 0);
Palette	Variable	–neutral-hover	–neutral-hover: oklch(0 0 0);
Palette	Variable	–neutral-ultra-light	–neutral-ultra-light: oklch(0.97 0 0);
Palette	Variable	–neutral-light	–neutral-light: oklch(0.85 0 0);
Palette	Variable	–neutral-semi-light	–neutral-semi-light: oklch(0.65 0 0);
Palette	Variable	–neutral-semi-dark	–neutral-semi-dark: oklch(0.35 0 0);
Palette	Variable	–neutral-dark	–neutral-dark: oklch(0.25 0 0);
Palette	Variable	–neutral-ultra-dark	–neutral-ultra-dark: oklch(0.1 0 0);
Palette	Variable	–white	–white: #fff;
Palette	Variable	–black	–black: #000;
Palette	Variable	–danger	–danger: oklch(0.5093424529 0.2087963773 28.9232951058);
Palette	Variable	–danger-hover	–danger-hover: oklch(0.55 0.213 28.9232951058);
Palette	Variable	–danger-ultra-light	–danger-ultra-light: oklch(0.95 0.213 28.9232951058);
Palette	Variable	–danger-light	–danger-light: oklch(0.85 0.213 28.9232951058);
Palette	Variable	–danger-semi-light	–danger-semi-light: oklch(0.65 0.213 28.9232951058);
Palette	Variable	–danger-semi-dark	–danger-semi-dark: oklch(0.35 0.213 28.9319793148);
Palette	Variable	–danger-dark	–danger-dark: oklch(0.25 0.213 28.9319793148);
Palette	Variable	–danger-ultra-dark	–danger-ultra-dark: oklch(0.15 0.213 28.9319793148);
Palette	Variable	–warning	–warning: oklch(0.8641798373 0.1769834965 93.2046789295);
Palette	Variable	–warning-hover	–warning-hover: oklch(0.994 0.011 93.2046789295);
Palette	Variable	–warning-ultra-light	–warning-ultra-light: oklch(0.95 0.088 93.2055632761);
Palette	Variable	–warning-light	–warning-light: oklch(0.85 0.177 93.2046789295);
Palette	Variable	–warning-semi-light	–warning-semi-light: oklch(0.75 0.177 93.2046789295);
Palette	Variable	–warning-semi-dark	–warning-semi-dark: oklch(0.65 0.154 93.1952172512);
Palette	Variable	–warning-dark	–warning-dark: oklch(0.35 0.083 93.1952172512);
Palette	Variable	–warning-ultra-dark	–warning-ultra-dark: oklch(0.25 0.059 93.1952172512);
Palette	Variable	–info	–info: oklch(0.8383333333 0.0424041806 252);
Palette	Variable	–info-hover	–info-hover: oklch(0.964 0.019 251.9268325599);
Palette	Variable	–info-ultra-light	–info-ultra-light: oklch(0.95 0.027 252);
Palette	Variable	–info-light	–info-light: oklch(0.85 0.042 252);
Palette	Variable	–info-semi-light	–info-semi-light: oklch(0.65 0.042 252);
Palette	Variable	–info-semi-dark	–info-semi-dark: oklch(0.35 0.042 252);
Palette	Variable	–info-dark	–info-dark: oklch(0.25 0.042 252);
Palette	Variable	–info-ultra-dark	–info-ultra-dark: oklch(0.1 0.039 252.0073585304);
Palette	Variable	–success	–success: oklch(0.64 0.175 147);
Palette	Variable	–success-hover	–success-hover: oklch(0.747 0.175 147);
Palette	Variable	–success-ultra-light	–success-ultra-light: oklch(0.95 0.096 147);
Palette	Variable	–success-light	–success-light: oklch(0.85 0.175 147);
Palette	Variable	–success-semi-light	–success-semi-light: oklch(0.65 0.175 147);
Palette	Variable	–success-semi-dark	–success-semi-dark: oklch(0.35 0.146 147);
Palette	Variable	–success-dark	–success-dark: oklch(0.15 0.062 147);
Palette	Variable	–success-ultra-dark	–success-ultra-dark: oklch(0.1 0.042 147);
Palette	Variable	–heading-color	–heading-color: var(–text-dark);
Default Section Styles	Variable	–content-width	–content-width: 100rem;
Default Section Styles	Variable	–content-width-safe	–content-width-safe: min(var(–content-width), calc(100% – var(–gutter) * 2));
Focus Styles	Variable	–focus-color	–focus-color: var(–primary);
Focus Styles	Variable	–focus-width	–focus-width: 2px;
Focus Styles	Variable	–focus-offset	–focus-offset: 2px;
Text Defaults	Variable	–text-xxl-max-width	–text-xxl-max-width: 100%;
Text Defaults	Variable	–text-xl-max-width	–text-xl-max-width: 100%;
Text Defaults	Variable	–text-l-max-width	–text-l-max-width: 100%;
Text Defaults	Variable	–text-m-line-height	–text-m-line-height: calc(10px + 2ex);
Text Defaults	Variable	–text-m-max-width	–text-m-max-width: 100%;
Text Defaults	Variable	–text-s-max-width	–text-s-max-width: 100%;
Text Defaults	Variable	–text-xs-max-width	–text-xs-max-width: 100%;
Text Defaults	Variable	–base-text-lh	–base-text-lh: calc(10px + 2ex);
Text Defaults	Variable	–text-font-family	–text-font-family: var(–sans);
Text Defaults	Variable	–text-color	–text-color: var(–text-dark-muted);
Text Defaults	Variable	–text-line-height	–text-line-height: calc(10px + 2ex);
Text Defaults	Variable	–text-max-width	–text-max-width: 70ch;
Text Defaults	Variable	–text-text-wrap	–text-text-wrap: pretty;
Heading Defaults	Variable	–heading-font-family	–heading-font-family: var(–sans);
Heading Defaults	Variable	–heading-color	–heading-color: var(–text-dark);
Heading Defaults	Variable	–heading-line-height	–heading-line-height: calc(4px + 2ex);
Heading Defaults	Variable	–heading-font-weight	–heading-font-weight: 700;
Heading Defaults	Variable	–heading-text-wrap	–heading-text-wrap: balance;
Heading Defaults	Variable	–base-heading-lh	–base-heading-lh: calc(4px + 2ex);
Heading Defaults	Variable	–h1-max-width	–h1-max-width: 40ch;
Heading Defaults	Variable	–h4-line-height	–h4-line-height: calc(4px + 2ex);
Text Size Variables	Variable	–text-xs	–text-xs: clamp(0.8125rem, calc(0.0806451613vw + 0.7943548387rem), 0.875rem);
Text Size Variables	Variable	–text-s	–text-s: clamp(0.875rem, calc(0.1612903226vw + 0.8387096774rem), 1rem);
Text Size Variables	Variable	–text-m	–text-m: clamp(1rem, calc(0.1612903226vw + 0.9637096774rem), 1.125rem);
Text Size Variables	Variable	–text-l	–text-l: clamp(1.2rem, calc(0.3866129032vw + 1.1130120968rem), 1.499625rem);
Text Size Variables	Variable	–text-xl	–text-xl: clamp(1.44rem, calc(0.7212904839vw + 1.2777096411rem), 1.999000125rem);
Text Size Variables	Variable	–text-xxl	–text-xxl: clamp(1.728rem, calc(1.2086027956vw + 1.456064371rem), 2.6646671666rem);
Text Size Variables	Variable	–text-s-to-xs	–text-s-to-xs: clamp(0.8125rem, calc(0.2419354839vw + 0.7580645161rem), 1rem);
Text Size Variables	Variable	–text-m-to-s	–text-m-to-s: clamp(0.875rem, calc(0.3225806452vw + 0.8024193548rem), 1.125rem);
Text Size Variables	Variable	–text-m-to-xs	–text-m-to-xs: clamp(0.8125rem, calc(0.4032258065vw + 0.7217741935rem), 1.125rem);
Text Size Variables	Variable	–text-l-to-m	–text-l-to-m: clamp(1rem, calc(0.6446774194vw + 0.8549475806rem), 1.499625rem);
Text Size Variables	Variable	–text-l-to-s	–text-l-to-s: clamp(0.875rem, calc(0.8059677419vw + 0.6936572581rem), 1.499625rem);
Text Size Variables	Variable	–text-l-to-xs	–text-l-to-xs: clamp(0.8125rem, calc(0.8866129032vw + 0.6130120968rem), 1.499625rem);
Text Size Variables	Variable	–text-xl-to-l	–text-xl-to-l: clamp(1.2rem, calc(1.0309679032vw + 0.9680322218rem), 1.999000125rem);
Text Size Variables	Variable	–text-xl-to-m	–text-xl-to-m: clamp(1rem, calc(1.2890324194vw + 0.7099677056rem), 1.999000125rem);
Text Size Variables	Variable	–text-xl-to-s	–text-xl-to-s: clamp(0.875rem, calc(1.4503227419vw + 0.5486773831rem), 1.999000125rem);
Text Size Variables	Variable	–text-xl-to-xs	–text-xl-to-xs: clamp(0.8125rem, calc(1.5309679032vw + 0.4680322218rem), 1.999000125rem);
Text Size Variables	Variable	–text-xxl-to-xl	–text-xxl-to-xl: clamp(1.44rem, calc(1.5802156989vw + 1.0844514678rem), 2.6646671666rem);
Text Size Variables	Variable	–text-xxl-to-l	–text-xxl-to-l: clamp(1.2rem, calc(1.8898931182vw + 0.7747740484rem), 2.6646671666rem);
Text Size Variables	Variable	–text-xxl-to-m	–text-xxl-to-m: clamp(1rem, calc(2.1479576344vw + 0.5167095323rem), 2.6646671666rem);
Text Size Variables	Variable	–text-xxl-to-s	–text-xxl-to-s: clamp(0.875rem, calc(2.3092479569vw + 0.3554192097rem), 2.6646671666rem);
Text Size Variables	Variable	–text-xxl-to-xs	–text-xxl-to-xs: clamp(0.8125rem, calc(2.3898931182vw + 0.2747740484rem), 2.6646671666rem);
Heading Size Variables	Variable	–h6	–h6: clamp(0.8125rem, calc(0.0806451613vw + 0.7943548387rem), 0.875rem);
Heading Size Variables	Variable	–h5	–h5: clamp(0.875rem, calc(0.0806451613vw + 0.8568548387rem), 0.9375rem);
Heading Size Variables	Variable	–h4	–h4: clamp(1.125rem, calc(0.4838709677vw + 1.0161290323rem), 1.5rem);
Heading Size Variables	Variable	–h3	–h3: clamp(1.35rem, calc(0.9948387097vw + 1.1261612903rem), 2.121rem);
Heading Size Variables	Variable	–h2	–h2: clamp(1.62rem, calc(1.779476129vw + 1.219617871rem), 2.999094rem);
Heading Size Variables	Variable	–h1	–h1: clamp(1.944rem, calc(2.9635082787vw + 1.2772106373rem), 4.240718916rem);
Heading Size Variables	Variable	–h5-to-h6	–h5-to-h6: clamp(0.8125rem, calc(0.1612903226vw + 0.7762096774rem), 0.9375rem);
Heading Size Variables	Variable	–h4-to-h5	–h4-to-h5: clamp(0.875rem, calc(0.8064516129vw + 0.6935483871rem), 1.5rem);
Heading Size Variables	Variable	–h4-to-h6	–h4-to-h6: clamp(0.8125rem, calc(0.8870967742vw + 0.6129032258rem), 1.5rem);
Heading Size Variables	Variable	–h3-to-h4	–h3-to-h4: clamp(1.125rem, calc(1.2851612903vw + 0.8358387097rem), 2.121rem);
Heading Size Variables	Variable	–h3-to-h5	–h3-to-h5: clamp(0.875rem, calc(1.6077419355vw + 0.5132580645rem), 2.121rem);
Heading Size Variables	Variable	–h3-to-h6	–h3-to-h6: clamp(0.8125rem, calc(1.6883870968vw + 0.4326129032rem), 2.121rem);
Heading Size Variables	Variable	–h2-to-h3	–h2-to-h3: clamp(1.35rem, calc(2.1278632258vw + 0.8712307742rem), 2.999094rem);
Heading Size Variables	Variable	–h2-to-h4	–h2-to-h4: clamp(1.125rem, calc(2.4181858065vw + 0.5809081935rem), 2.999094rem);
Heading Size Variables	Variable	–h2-to-h5	–h2-to-h5: clamp(0.875rem, calc(2.7407664516vw + 0.2583275484rem), 2.999094rem);
Heading Size Variables	Variable	–h2-to-h6	–h2-to-h6: clamp(0.8125rem, calc(2.8214116129vw + 0.1776823871rem), 2.999094rem);
Heading Size Variables	Variable	–h1-to-h2	–h1-to-h2: clamp(1.62rem, calc(3.3815727948vw + 0.8591461212rem), 4.240718916rem);
Heading Size Variables	Variable	–h1-to-h3	–h1-to-h3: clamp(1.35rem, calc(3.7299598916vw + 0.5107590244rem), 4.240718916rem);
Heading Size Variables	Variable	–h1-to-h4	–h1-to-h4: clamp(1.125rem, calc(4.0202824723vw + 0.2204364437rem), 4.240718916rem);
Heading Size Variables	Variable	–h1-to-h5	–h1-to-h5: clamp(0.875rem, calc(4.3428631174vw + -0.1021442014rem), 4.240718916rem);
Heading Size Variables	Variable	–h1-to-h6	–h1-to-h6: clamp(0.8125rem, calc(4.4235082787vw + -0.1827893627rem), 4.240718916rem);
Default Section Styles	Variable	–section-padding-block	–section-padding-block: var(–section-space-m);
Default Section Styles	Variable	–gutter	–gutter: clamp(1rem, calc(5.1612903226vw + -0.1612903226rem), 5rem);
Space Variables	Variable	–space-xs	–space-xs: clamp(0.8333333333rem, calc(-0.0139854193vw + 0.8473187526rem), 0.8441720333rem);
Space Variables	Variable	–space-s	–space-s: clamp(1.1252813203rem, calc(0.1609273286vw + 1.0890726714rem), 1.25rem);
Space Variables	Variable	–space-s-to-xs	–space-s-to-xs: clamp(0.8441720333rem, calc(0.5236489893vw + 0.7263510107rem), 1.25rem);
Space Variables	Variable	–space-m	–space-m: clamp(1.5rem, calc(0.4838709677vw + 1.3911290323rem), 1.875rem);
Space Variables	Variable	–space-m-to-s	–space-m-to-s: clamp(1.1252813203rem, calc(0.9673789415vw + 0.9076210585rem), 1.875rem);
Space Variables	Variable	–space-m-to-xs	–space-m-to-xs: clamp(0.8441720333rem, calc(1.3301006023vw + 0.5448993977rem), 1.875rem);
Space Variables	Variable	–space-l	–space-l: clamp(1.9995rem, calc(1.0490322581vw + 1.7634677419rem), 2.8125rem);
Space Variables	Variable	–space-l-to-m	–space-l-to-m: clamp(1.5rem, calc(1.6935483871vw + 1.1189516129rem), 2.8125rem);
Space Variables	Variable	–space-l-to-s	–space-l-to-s: clamp(1.1252813203rem, calc(2.1770563609vw + 0.6354436391rem), 2.8125rem);
Space Variables	Variable	–space-l-to-xs	–space-l-to-xs: clamp(0.8441720333rem, calc(2.5397780216vw + 0.2727219784rem), 2.8125rem);
Space Variables	Variable	–space-xl	–space-xl: clamp(2.6653335rem, calc(2.0044083871vw + 2.2143416129rem), 4.21875rem);
Space Variables	Variable	–space-xl-to-l	–space-xl-to-l: clamp(1.9995rem, calc(2.8635483871vw + 1.3552016129rem), 4.21875rem);
Space Variables	Variable	–space-xl-to-m	–space-xl-to-m: clamp(1.5rem, calc(3.5080645161vw + 0.7106854839rem), 4.21875rem);
Space Variables	Variable	–space-xl-to-s	–space-xl-to-s: clamp(1.1252813203rem, calc(3.9915724899vw + 0.2271775101rem), 4.21875rem);
Space Variables	Variable	–space-xl-to-xs	–space-xl-to-xs: clamp(0.8441720333rem, calc(4.3542941506vw + -0.1355441506rem), 4.21875rem);
Space Variables	Variable	–space-xxl	–space-xxl: clamp(3.5528895555rem, calc(3.5809489606vw + 2.7471760394rem), 6.328125rem);
Space Variables	Variable	–space-xxl-to-xl	–space-xxl-to-xl: clamp(2.6653335rem, calc(4.7261825806vw + 1.6019424194rem), 6.328125rem);
Space Variables	Variable	–space-xxl-to-l	–space-xxl-to-l: clamp(1.9995rem, calc(5.5853225806vw + 0.7428024194rem), 6.328125rem);
Space Variables	Variable	–space-xxl-to-m	–space-xxl-to-m: clamp(1.5rem, calc(6.2298387097vw + 0.0982862903rem), 6.328125rem);
Space Variables	Variable	–space-xxl-to-s	–space-xxl-to-s: clamp(1.1252813203rem, calc(6.7133466834vw + -0.3852216834rem), 6.328125rem);
Space Variables	Variable	–space-xxl-to-xs	–space-xxl-to-xs: clamp(0.8441720333rem, calc(7.0760683442vw + -0.7479433442rem), 6.328125rem);
Section Space Variables	Variable	–section-space-xs	–section-space-xs: clamp(1.6883440665rem, calc(1.0472979787vw + 1.4527020213rem), 2.5rem);
Section Space Variables	Variable	–section-space-s	–section-space-s: clamp(2.2505626407rem, calc(1.934757883vw + 1.815242117rem), 3.75rem);
Section Space Variables	Variable	–section-space-s-to-xs	–section-space-s-to-xs: clamp(1.6883440665rem, calc(2.6602012045vw + 1.0897987955rem), 3.75rem);
Section Space Variables	Variable	–section-space-m	–section-space-m: clamp(3rem, calc(3.3870967742vw + 2.2379032258rem), 5.625rem);
Section Space Variables	Variable	–section-space-m-to-s	–section-space-m-to-s: clamp(2.2505626407rem, calc(4.3541127217vw + 1.2708872783rem), 5.625rem);
Section Space Variables	Variable	–section-space-m-to-xs	–section-space-m-to-xs: clamp(1.6883440665rem, calc(5.0795560432vw + 0.5454439568rem), 5.625rem);
Section Space Variables	Variable	–section-space-l	–section-space-l: clamp(3.999rem, calc(5.7270967742vw + 2.7104032258rem), 8.4375rem);
Section Space Variables	Variable	–section-space-l-to-m	–section-space-l-to-m: clamp(3rem, calc(7.0161290323vw + 1.4213709677rem), 8.4375rem);
Section Space Variables	Variable	–section-space-l-to-s	–section-space-l-to-s: clamp(2.2505626407rem, calc(7.9831449798vw + 0.4543550202rem), 8.4375rem);
Section Space Variables	Variable	–section-space-l-to-xs	–section-space-l-to-xs: clamp(1.6883440665rem, calc(8.7085883013vw + -0.2710883013rem), 8.4375rem);
Section Space Variables	Variable	–section-space-xl	–section-space-xl: clamp(5.330667rem, calc(9.4523651613vw + 3.2038848387rem), 12.65625rem);
Section Space Variables	Variable	–section-space-xl-to-l	–section-space-xl-to-l: clamp(3.999rem, calc(11.1706451613vw + 1.4856048387rem), 12.65625rem);
Section Space Variables	Variable	–section-space-xl-to-m	–section-space-xl-to-m: clamp(3rem, calc(12.4596774194vw + 0.1965725806rem), 12.65625rem);
Section Space Variables	Variable	–section-space-xl-to-s	–section-space-xl-to-s: clamp(2.2505626407rem, calc(13.4266933669vw + -0.7704433669rem), 12.65625rem);
Section Space Variables	Variable	–section-space-xl-to-xs	–section-space-xl-to-xs: clamp(1.6883440665rem, calc(14.1521366884vw + -1.4958866884rem), 12.65625rem);
Section Space Variables	Variable	–section-space-xxl	–section-space-xxl: clamp(7.105779111rem, calc(15.3272205019vw + 3.6571544981rem), 18.984375rem);
Section Space Variables	Variable	–section-space-xxl-to-xl	–section-space-xxl-to-xl: clamp(5.330667rem, calc(17.6176877419vw + 1.3666872581rem), 18.984375rem);
Section Space Variables	Variable	–section-space-xxl-to-l	–section-space-xxl-to-l: clamp(3.999rem, calc(19.3359677419vw + -0.3515927419rem), 18.984375rem);
Section Space Variables	Variable	–section-space-xxl-to-m	–section-space-xxl-to-m: clamp(3rem, calc(20.625vw + -1.640625rem), 18.984375rem);
Section Space Variables	Variable	–section-space-xxl-to-s	–section-space-xxl-to-s: clamp(2.2505626407rem, calc(21.5920159475vw + -2.6076409475rem), 18.984375rem);
Section Space Variables	Variable	–section-space-xxl-to-xs	–section-space-xxl-to-xs: clamp(1.6883440665rem, calc(22.317459269vw + -3.333084269rem), 18.984375rem);
Contextual Space Variables	Variable	–content-gap	–content-gap: var(–space-m);
Contextual Space Variables	Variable	–container-gap	–container-gap: var(–space-xl);
Contextual Space Variables	Variable	–grid-gap	–grid-gap: var(–space-m);
Width Variables	Variable	–width-10	–width-10: calc(var(–content-width) * 0.1);
Width Variables	Variable	–width-20	–width-20: calc(var(–content-width) * 0.2);
Width Variables	Variable	–width-30	–width-30: calc(var(–content-width) * 0.3);
Width Variables	Variable	–width-40	–width-40: calc(var(–content-width) * 0.4);
Width Variables	Variable	–width-50	–width-50: calc(var(–content-width) * 0.5);
Width Variables	Variable	–width-60	–width-60: calc(var(–content-width) * 0.6);
Width Variables	Variable	–width-70	–width-70: calc(var(–content-width) * 0.7);
Width Variables	Variable	–width-80	–width-80: calc(var(–content-width) * 0.8);
Width Variables	Variable	–width-90	–width-90: calc(var(–content-width) * 0.9);
Width Variables	Variable	–width-full	–width-full: calc(var(–content-width) * 100%);
Grid Variables	Variable	–grid-1	–grid-1: repeat(1, minmax(0, 1fr));
Grid Variables	Variable	–grid-2	–grid-2: repeat(2, minmax(0, 1fr));
Grid Variables	Variable	–grid-3	–grid-3: repeat(3, minmax(0, 1fr));
Grid Variables	Variable	–grid-4	–grid-4: repeat(4, minmax(0, 1fr));
Grid Variables	Variable	–grid-5	–grid-5: repeat(5, minmax(0, 1fr));
Grid Variables	Variable	–grid-6	–grid-6: repeat(6, minmax(0, 1fr));
Grid Variables	Variable	–grid-7	–grid-7: repeat(7, minmax(0, 1fr));
Grid Variables	Variable	–grid-8	–grid-8: repeat(8, minmax(0, 1fr));
Grid Variables	Variable	–grid-9	–grid-9: repeat(9, minmax(0, 1fr));
Grid Variables	Variable	–grid-10	–grid-10: repeat(10, minmax(0, 1fr));
Grid Variables	Variable	–grid-11	–grid-11: repeat(11, minmax(0, 1fr));
Grid Variables	Variable	–grid-12	–grid-12: repeat(12, minmax(0, 1fr));
Grid Variables	Variable	–grid-1-2	–grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
Grid Variables	Variable	–grid-1-3	–grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
Grid Variables	Variable	–grid-2-1	–grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
Grid Variables	Variable	–grid-2-3	–grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
Grid Variables	Variable	–grid-3-1	–grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
Grid Variables	Variable	–grid-3-2	–grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
Auto Grid Variables	Variable	–grid-auto-2	–grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(–content-width) – ((2 – 1) * var(–grid-gap))) / 2) * 0.7, (100% – (2 – 1) * var(–grid-gap)) / 2)), 1fr));
Auto Grid Variables	Variable	–grid-auto-3	–grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(–content-width) – ((3 – 1) * var(–grid-gap))) / 3) * 0.7, (100% – (3 – 1) * var(–grid-gap)) / 3)), 1fr));
Auto Grid Variables	Variable	–grid-auto-4	–grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(–content-width) – ((4 – 1) * var(–grid-gap))) / 4) * 0.7, (100% – (4 – 1) * var(–grid-gap)) / 4)), 1fr));
Auto Grid Variables	Variable	–grid-auto-5	–grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(–content-width) – ((5 – 1) * var(–grid-gap))) / 5) * 0.7, (100% – (5 – 1) * var(–grid-gap)) / 5)), 1fr));
Auto Grid Variables	Variable	–grid-auto-6	–grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(–content-width) – ((6 – 1) * var(–grid-gap))) / 6) * 0.7, (100% – (6 – 1) * var(–grid-gap)) / 6)), 1fr));
Auto Grid Variables	Variable	–grid-auto-7	–grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(–content-width) – ((7 – 1) * var(–grid-gap))) / 7) * 0.7, (100% – (7 – 1) * var(–grid-gap)) / 7)), 1fr));
Auto Grid Variables	Variable	–grid-auto-8	–grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(–content-width) – ((8 – 1) * var(–grid-gap))) / 8) * 0.7, (100% – (8 – 1) * var(–grid-gap)) / 8)), 1fr));
Auto Grid Variables	Variable	–grid-auto-9	–grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(–content-width) – ((9 – 1) * var(–grid-gap))) / 9) * 0.7, (100% – (9 – 1) * var(–grid-gap)) / 9)), 1fr));
Auto Grid Variables	Variable	–grid-auto-10	–grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(–content-width) – ((10 – 1) * var(–grid-gap))) / 10) * 0.7, (100% – (10 – 1) * var(–grid-gap)) / 10)), 1fr));
Auto Grid Variables	Variable	–grid-auto-11	–grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(–content-width) – ((11 – 1) * var(–grid-gap))) / 11) * 0.7, (100% – (11 – 1) * var(–grid-gap)) / 11)), 1fr));
Auto Grid Variables	Variable	–grid-auto-12	–grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(–content-width) – ((12 – 1) * var(–grid-gap))) / 12) * 0.7, (100% – (12 – 1) * var(–grid-gap)) / 12)), 1fr));
Auto Grid Variables	Variable	–auto-grid-aggressiveness	–auto-grid-aggressiveness: 0.7;
Header Height Variables	Variable	–header-height	–header-height: clamp(0rem, calc(0vw + 0rem), 0rem);
Header Height Variables	Variable	–admin-bar-height	–admin-bar-height: var(–wp-admin–admin-bar–height, 0px);
Header Height Variables	Variable	–scroll-margin	–scroll-margin: clamp(0rem, calc(0vw + 0rem), 0rem);
Header Height Variables	Variable	–offset	–offset: calc(var(–scroll-margin) + var(–header-height));
Smart Spacing	Variable	–paragraph-spacing	–paragraph-spacing: 1em;
Smart Spacing	Variable	–heading-spacing	–heading-spacing: 1.2em;
Smart Spacing	Variable	–list-spacing	–list-spacing: var(–paragraph-spacing);
Smart Spacing	Variable	–list-indent-spacing	–list-indent-spacing: 2em;
Smart Spacing	Variable	–list-item-spacing	–list-item-spacing: 0.75em;
Smart Spacing	Variable	–nested-list-indent-spacing	–nested-list-indent-spacing: 1em;
Smart Spacing	Variable	–flow-spacing	–flow-spacing: var(–paragraph-spacing);
Smart Spacing	Variable	–figure-spacing	–figure-spacing: var(–paragraph-spacing);
Smart Spacing	Variable	–figcaption-spacing	–figcaption-spacing: 0.5em;
Smart Spacing	Variable	–blockquote-spacing	–blockquote-spacing: var(–paragraph-spacing);
Buttons	Variable	–option-primary-btn-outline	–option-primary-btn-outline: on;
Buttons	Variable	–option-secondary-btn-outline	–option-secondary-btn-outline: on;
Buttons	Variable	–option-accent-btn-outline	–option-accent-btn-outline: on;
Buttons	Variable	–option-neutral-btn-outline	–option-neutral-btn-outline: on;
Buttons	Variable	–btn-padding-block	–btn-padding-block: 0.5em;
Buttons	Variable	–btn-padding-inline	–btn-padding-inline: 1em;
Buttons	Variable	–btn-min-width	–btn-min-width: 8.75rem;
Buttons	Variable	–btn-width	–btn-width: max-content;
Buttons	Variable	–btn-line-height	–btn-line-height: 1;
Buttons	Variable	–btn-font-size	–btn-font-size: var(–text-m);
Buttons	Variable	–btn-font-weight	–btn-font-weight: 400;
Buttons	Variable	–btn-font-family	–btn-font-family: var(–sans-alt);
Buttons	Variable	–btn-font-style	–btn-font-style: normal;
Buttons	Variable	–btn-text-decoration	–btn-text-decoration: none;
Buttons	Variable	–btn-text-decoration-hover	–btn-text-decoration-hover: none;
Buttons	Variable	–btn-letter-spacing	–btn-letter-spacing: 0;
Buttons	Variable	–btn-text-transform	–btn-text-transform: none;
Buttons	Variable	–btn-border-width	–btn-border-width: 1px;
Buttons	Variable	–btn-border-style	–btn-border-style: solid;
Buttons	Variable	–btn-border-radius	–btn-border-radius: var(–radius-s);
Buttons	Variable	–btn-radius	–btn-radius: var(–radius-s);
Buttons	Variable	–btn-justify-content	–btn-justify-content: center;
Buttons	Variable	–btn-align-items	–btn-align-items: center;
Buttons	Variable	–btn-text-align	–btn-text-align: center;
Link Variables	Variable	–link-color	–link-color: var(–primary-semi-dark);
Link Variables	Variable	–link-color-hover	–link-color-hover: var(–primary-dark);
Link Variables	Variable	–link-transition	–link-transition: var(–transition);
Link Variables	Variable	–link-decoration	–link-decoration: underline;
Link Variables	Variable	–link-decoration-hover	–link-decoration-hover: inherit;
Link Variables	Variable	–link-underline-offset	–link-underline-offset: 2px;
Link Variables	Variable	–link-weight	–link-weight: inherit;
Link Variables	Variable	–link-decoration-color	–link-decoration-color: currentcolor;
Link Variables	Variable	–link-decoration-thickness	–link-decoration-thickness: 1px;
Card Variables	Variable	–card-padding	–card-padding: var(–space-m);
Card Variables	Variable	–card-gap	–card-gap: calc(var(–content-gap) / 2);
Card Variables	Variable	–card-border-width	–card-border-width: var(–border-width);
Card Variables	Variable	–card-border-style	–card-border-style: solid;
Card Variables	Variable	–card-display	–card-display: flex;
Card Variables	Variable	–card-radius	–card-radius: var(–radius);
Card Variables	Variable	–card-min-radius	–card-min-radius: 4px;
Card Variables	Variable	–card-heading-size	–card-heading-size: var(–h3);
Card Variables	Variable	–card-text-size	–card-text-size: var(–text-s);
Card Variables	Variable	–card-button-font-size	–card-button-font-size: var(–text-s);
Card Variables	Variable	–card-icon-size	–card-icon-size: var(–icon-size-l);
Card Variables	Variable	–card-icon-padding	–card-icon-padding: var(–icon-padding);
Card Variables	Variable	–card-icon-border-width	–card-icon-border-width: var(–icon-border-width);
Card Variables	Variable	–card-icon-border-style	–card-icon-border-style: var(–icon-border-style);
Card Variables	Variable	–card-icon-radius	–card-icon-radius: var(–icon-radius);
Card Variables	Variable	–card-icon-background	–card-icon-background: var(–icon-background);
Card Variables	Variable	–card-icon-color	–card-icon-color: var(–icon-color);
Card Variables	Variable	–card-icon-border-color	–card-icon-border-color: var(–icon-border-color);
Card Variables	Variable	–card-line-height	–card-line-height: 1.4;
Card Variables	Variable	–card-avatar-radius	–card-avatar-radius: var(–radius);
Card Variables	Variable	–card-avatar-border-width	–card-avatar-border-width: var(–border-width);
Card Variables	Variable	–card-avatar-border-style	–card-avatar-border-style: var(–border-style);
Card Variables	Variable	–card-avatar-size	–card-avatar-size: 140px;
Card Variables	Variable	–card-avatar-aspect-ratio	–card-avatar-aspect-ratio: 1;
Card Variables	Variable	–card-media-radius	–card-media-radius: var(–radius);
Card Variables	Variable	–card-media-aspect-ratio	–card-media-aspect-ratio: 1.3333333333;
Card Variables	Variable	–card-media-object-fit	–card-media-object-fit: cover;
Card Variables	Variable	–card-background	–card-background: var(–base-light);
Card Variables	Variable	–card-heading-color	–card-heading-color: var(–text-dark);
Card Variables	Variable	–card-text-color	–card-text-color: var(–text-dark-muted);
Card Variables	Variable	–card-link-color	–card-link-color: var(–primary);
Card Variables	Variable	–card-link-color-hover	–card-link-color-hover: var(–primary-hover);
Card Variables	Variable	–card-button-style	–card-button-style: primary;
Card Variables	Variable	–card-border-color	–card-border-color: var(–border-color-dark);
Column Variables	Variable	–col-width-s	–col-width-s: 13rem;
Column Variables	Variable	–col-width-m	–col-width-m: 25rem;
Column Variables	Variable	–col-width-l	–col-width-l: 38rem;
Column Variables	Variable	–col-rule-width-s	–col-rule-width-s: 0.5px;
Column Variables	Variable	–col-rule-width-m	–col-rule-width-m: 1px;
Column Variables	Variable	–col-rule-width-l	–col-rule-width-l: 3px;
Sticky Variables	Variable	–sticky-offset-custom	–sticky-offset-custom: 60px;
Sticky Variables	Variable	–sticky-offset	–sticky-offset: var(–header-height, var(–sticky-offset-custom, 0));
Contextual Color Variables	Variable	–body-bg-color	–body-bg-color: var(–bg-ultra-light);
Contextual Color Variables	Variable	–bg-ultra-light	–bg-ultra-light: var(–base-ultra-light);
Contextual Color Variables	Variable	–bg-light	–bg-light: var(–base-light);
Contextual Color Variables	Variable	–bg-dark	–bg-dark: var(–primary-dark);
Contextual Color Variables	Variable	–bg-ultra-dark	–bg-ultra-dark: var(–primary-ultra-dark);
Contextual Color Variables	Variable	–text-light	–text-light: var(–base-light);
Contextual Color Variables	Variable	–text-light-muted	–text-light-muted: color-mix(in srgb, var(–text-light) 80%, transparent);
Contextual Color Variables	Variable	–text-dark	–text-dark: var(–secondary-ultra-dark);
Contextual Color Variables	Variable	–text-dark-muted	–text-dark-muted: color-mix(in srgb, var(–text-dark) 80%, transparent);
Contextual Relationship Variables	Variable	–bg-ultra-light-text	–bg-ultra-light-text: var(–text-dark);
Contextual Relationship Variables	Variable	–bg-light-text	–bg-light-text: var(–text-dark);
Contextual Relationship Variables	Variable	–bg-dark-text	–bg-dark-text: var(–text-light);
Contextual Relationship Variables	Variable	–bg-ultra-dark-text	–bg-ultra-dark-text: var(–text-light);
Contextual Relationship Variables	Variable	–bg-ultra-light-heading	–bg-ultra-light-heading: var(–text-dark);
Contextual Relationship Variables	Variable	–bg-light-heading	–bg-light-heading: var(–text-dark);
Contextual Relationship Variables	Variable	–bg-dark-heading	–bg-dark-heading: var(–text-light);
Contextual Relationship Variables	Variable	–bg-ultra-dark-heading	–bg-ultra-dark-heading: var(–text-light);
Contextual Relationship Variables	Variable	–bg-ultra-light-link	–bg-ultra-light-link: var(–primary-semi-dark);
Contextual Relationship Variables	Variable	–bg-ultra-light-link-hover	–bg-ultra-light-link-hover: var(–primary-dark);
Contextual Relationship Variables	Variable	–bg-dark-link	–bg-dark-link: var(–accent);
Contextual Relationship Variables	Variable	–bg-dark-link-hover	–bg-dark-link-hover: var(–accent-hover);
Contextual Relationship Variables	Variable	–bg-ultra-dark-link	–bg-ultra-dark-link: var(–accent);
Contextual Relationship Variables	Variable	–bg-ultra-dark-link-hover	–bg-ultra-dark-link-hover: var(–accent-hover);
Contextual Relationship Variables	Variable	–bg-dark-focus	–bg-dark-focus: var(–accent);
Contextual Relationship Variables	Variable	–bg-ultra-dark-focus	–bg-ultra-dark-focus: var(–accent);
Contextual Relationship Variables	Variable	–bg-ultra-light-button	–bg-ultra-light-button: ;
Contextual Relationship Variables	Variable	–bg-light-button	–bg-light-button: ;
Contextual Relationship Variables	Variable	–bg-dark-button	–bg-dark-button: ;
Contextual Relationship Variables	Variable	–bg-ultra-dark-button	–bg-ultra-dark-button: ;
Contextual Relationship Variables	Variable	–bg-ultra-light-icon	–bg-ultra-light-icon: light;
Contextual Relationship Variables	Variable	–bg-light-icon	–bg-light-icon: light;
Contextual Relationship Variables	Variable	–bg-dark-icon	–bg-dark-icon: dark;
Contextual Relationship Variables	Variable	–bg-ultra-dark-icon	–bg-ultra-dark-icon: dark;
Radius Variables	Variable	–radius	–radius: 10px;
Radius Variables	Variable	–radius-50	–radius-50: 50%;
Radius Variables	Variable	–radius-circle	–radius-circle: 50vw;
Radius Variables	Variable	–radius-none	–radius-none: 0;
Radius Variables	Variable	–radius-xs	–radius-xs: 4.4444444444px;
Radius Variables	Variable	–radius-s	–radius-s: 6.6666666667px;
Radius Variables	Variable	–radius-m	–radius-m: 10px;
Radius Variables	Variable	–radius-l	–radius-l: 15px;
Radius Variables	Variable	–radius-xl	–radius-xl: 22.5px;
Radius Variables	Variable	–radius-xxl	–radius-xxl: 33.75px;
Border Variables	Variable	–border-size	–border-size: 1px;
Border Variables	Variable	–border-width	–border-width: 1px;
Border Variables	Variable	–border-style	–border-style: solid;
Border Variables	Variable	–border-color-dark	–border-color-dark: color-mix(in oklch, var(–primary) 20%, transparent);
Border Variables	Variable	–border-color-light	–border-color-light: color-mix(in oklch, var(–white) 20%, transparent);
Border Variables	Variable	–border	–border: var(–border-size) var(–border-style) var(–border-color-dark);
Border Variables	Variable	–border-light	–border-light: var(–border-size) var(–border-style) var(–border-color-light);
Border Variables	Variable	–border-dark	–border-dark: var(–border-size) var(–border-style) var(–border-color-dark);
Divider Variables	Variable	–divider-size	–divider-size: 1px;
Divider Variables	Variable	–divider-style	–divider-style: solid;
Divider Variables	Variable	–divider-inline-size	–divider-inline-size: 100%;
Divider Variables	Variable	–divider-gap	–divider-gap: var(–content-gap);
Divider Variables	Variable	–divider-color-dark	–divider-color-dark: color-mix(in srgb, var(–black) 20%, transparent);
Divider Variables	Variable	–divider-color-light	–divider-color-light: color-mix(in srgb, var(–white) 20%, transparent);
Divider Variables	Variable	–divider	–divider: var(–divider-size) var(–divider-style) var(–divider-color-dark);
Divider Variables	Variable	–divider-light	–divider-light: var(–divider-size) var(–divider-style) var(–divider-color-light);
Divider Variables	Variable	–divider-dark	–divider-dark: var(–divider-size) var(–divider-style) var(–divider-color-dark);
Transition Variables	Variable	–transition-duration	–transition-duration: 0.3s;
Transition Variables	Variable	–transition-timing	–transition-timing: ease-in-out;
Transition Variables	Variable	–transition-delay	–transition-delay: 0s;
Transition Variables	Variable	–transition	–transition: 0.3s ease-in-out 0s;
Transition Variables	Variable	–overlay-1-name	–overlay-1-name: crosshatch;
Transition Variables	Variable	–overlay-1-type	–overlay-1-type: gradient;
Transition Variables	Variable	–overlay-1-background	–overlay-1-background: repeating-linear-gradient(45deg, color-mix(in oklch, var(–primary-dark) 20%, transparent) 0, color-mix(in oklch, var(–primary-dark) 20%, transparent) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(-45deg, color-mix(in oklch, var(–primary-dark) 20%, transparent) 0, color-mix(in oklch, var(–primary-dark) 20%, transparent) 1px, transparent 1px, transparent 40px);
Transition Variables	Variable	–overlay-1-opacity	–overlay-1-opacity: 0.7;
Transition Variables	Variable	–overlay-1-background-attachment	–overlay-1-background-attachment: static;
Transition Variables	Variable	–overlay-1-background-repeat	–overlay-1-background-repeat: repeat;
Transition Variables	Variable	–overlay-1-inset	–overlay-1-inset: 0;
Transition Variables	Variable	–overlay-1-isActive	–overlay-1-isActive: true;
Transition Variables	Variable	–overlay-2-name	–overlay-2-name: graphpaper;
Transition Variables	Variable	–overlay-2-type	–overlay-2-type: gradient;
Transition Variables	Variable	–overlay-2-background	–overlay-2-background: linear-gradient(var(–primary) 1.5px, transparent 1.5px), linear-gradient(90deg, var(–primary) 1.5px, transparent 1.5px), linear-gradient(var(–neutral) 1px, transparent 1px), linear-gradient(90deg, var(–neutral) 1px, transparent 1px);
Transition Variables	Variable	–overlay-2-opacity	–overlay-2-opacity: 0.7;
Transition Variables	Variable	–overlay-2-background-attachment	–overlay-2-background-attachment: static;
Transition Variables	Variable	–overlay-2-background-repeat	–overlay-2-background-repeat: repeat;
Transition Variables	Variable	–overlay-2-inset	–overlay-2-inset: 0;
Transition Variables	Variable	–overlay-2-isActive	–overlay-2-isActive: true;
Icon Variables	Variable	–icon-scheme	–icon-scheme: inherit;
Icon Variables	Variable	–icon-size	–icon-size: 24px;
Icon Variables	Variable	–icon-padding	–icon-padding: 0.15em;
Icon Variables	Variable	–icon-radius	–icon-radius: var(–radius);
Icon Variables	Variable	–icon-background	–icon-background: var(–neutral-ultra-light);
Icon Variables	Variable	–icon-background-hover	–icon-background-hover: var(–neutral-light);
Icon Variables	Variable	–icon-border-color	–icon-border-color: var(–border-color-dark);
Icon Variables	Variable	–icon-border-color-hover	–icon-border-color-hover: inherit;
Icon Variables	Variable	–icon-border-width	–icon-border-width: var(–border-width);
Icon Variables	Variable	–icon-border-style	–icon-border-style: var(–border-style);
Icon Variables	Variable	–icon-color	–icon-color: var(–text-dark-muted);
Icon Variables	Variable	–icon-color-hover	–icon-color-hover: var(–primary);
Icon Variables	Variable	–icon-list-icon-size	–icon-list-icon-size: 1em;
Icon Variables	Variable	–icon-list-gap	–icon-list-gap: 1em;
Icon Variables	Variable	–icon-size-xs	–icon-size-xs: 12px;
Icon Variables	Variable	–icon-size-s	–icon-size-s: 18px;
Icon Variables	Variable	–icon-size-m	–icon-size-m: 24px;
Icon Variables	Variable	–icon-size-l	–icon-size-l: 48px;
Icon Variables	Variable	–icon-size-xl	–icon-size-xl: 64px;
Icon Variables	Variable	–icon-padding-xs	–icon-padding-xs: var(–icon-padding);
Icon Variables	Variable	–icon-padding-s	–icon-padding-s: var(–icon-padding);
Icon Variables	Variable	–icon-padding-m	–icon-padding-m: var(–icon-padding);
Icon Variables	Variable	–icon-padding-l	–icon-padding-l: var(–icon-padding);
Icon Variables	Variable	–icon-padding-xl	–icon-padding-xl: var(–icon-padding);
Box Shadow Variables	Variable	–box-shadow-1	–box-shadow-1: 0 1px 1px color-mix(in oklch, var(–base) 3%, transparent), 0 2px 2px color-mix(in oklch, var(–base) 3%, transparent), 0 4px 4px color-mix(in oklch, var(–base) 3%, transparent), 0 8px 8px color-mix(in oklch, var(–base) 3%, transparent), 0 16px 16px color-mix(in oklch, var(–base) 3%, transparent), 0 24px 24px color-mix(in oklch, var(–base) 3%, transparent);
Box Shadow Variables	Variable	–box-shadow-2	–box-shadow-2: 0 0 60px color-mix(in srgb, black 20%, transparent);
Box Shadow Variables	Variable	–box-shadow-3	–box-shadow-3: 0 0 80px color-mix(in srgb, black 30%, transparent);
Box Shadow Variables	Variable	–box-shadow-4	–box-shadow-4: 0px 1px 1px 0px rgba(0, 0, 0, 0.11), 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 4px 0px rgba(0, 0, 0, 0.11), 0px 8px 8px 0px rgba(0, 0, 0, 0.11), 0px 16px 16px 0px rgba(0, 0, 0, 0.11), 0px 32px 32px 0px rgba(0, 0, 0, 0.11);
Box Shadow Variables	Variable	–box-shadow-5	–box-shadow-5: 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24);
Text Shadow Variables	Variable	–text-shadow-1	–text-shadow-1: 0 1px 2px color-mix(in srgb, black 20%, transparent);
Text Shadow Variables	Variable	–text-shadow-2	–text-shadow-2: 0 2px 4px color-mix(in srgb, black 30%, transparent);
Text Shadow Variables	Variable	–text-shadow-3	–text-shadow-3: 0 4px 8px color-mix(in srgb, black 40%, transparent);
Drop Shadow Variables	Variable	–drop-shadow-1	–drop-shadow-1: drop-shadow(0 1px 2px color-mix(in srgb, black 15%, transparent));
Drop Shadow Variables	Variable	–drop-shadow-2	–drop-shadow-2: drop-shadow(0 4px 6px color-mix(in srgb, black 20%, transparent));
Drop Shadow Variables	Variable	–drop-shadow-3	–drop-shadow-3: drop-shadow(0 10px 15px color-mix(in srgb, black 25%, transparent));
Blockquote Variables	Variable	–blockquote-padding	–blockquote-padding: var(–space-m);
Blockquote Variables	Variable	–blockquote-gap	–blockquote-gap: 1em;
Blockquote Variables	Variable	–blockquote-border-width	–blockquote-border-width: 0 0 0 5px;
Blockquote Variables	Variable	–blockquote-border-style	–blockquote-border-style: solid;
Blockquote Variables	Variable	–blockquote-border-color	–blockquote-border-color: var(–primary);
Blockquote Variables	Variable	–blockquote-border-radius	–blockquote-border-radius: 0;
Blockquote Variables	Variable	–blockquote-background	–blockquote-background: var(–base-light);
Blockquote Variables	Variable	–blockquote-box-shadow	–blockquote-box-shadow: none;
Blockquote Variables	Variable	–blockquote-text-color	–blockquote-text-color: inherit;
Blockquote Variables	Variable	–blockquote-text-font-family	–blockquote-text-font-family: var(–serif);
Blockquote Variables	Variable	–blockquote-text-font-style	–blockquote-text-font-style: italic;
Blockquote Variables	Variable	–blockquote-text-font-size	–blockquote-text-font-size: var(–text-xl);
Blockquote Variables	Variable	–blockquote-text-font-weight	–blockquote-text-font-weight: normal;
Blockquote Variables	Variable	–blockquote-text-line-height	–blockquote-text-line-height: 1.2;
Blockquote Variables	Variable	–blockquote-text-text-align	–blockquote-text-text-align: left;
Blockquote Variables	Variable	–blockquote-text-text-transform	–blockquote-text-text-transform: none;
Blockquote Variables	Variable	–blockquote-footer-padding	–blockquote-footer-padding: 0;
Blockquote Variables	Variable	–blockquote-footer-margin-block	–blockquote-footer-margin-block: 1em 0;
Blockquote Variables	Variable	–blockquote-footer-font-family	–blockquote-footer-font-family: inherit;
Blockquote Variables	Variable	–blockquote-footer-font-size	–blockquote-footer-font-size: var(–text-s);
Blockquote Variables	Variable	–blockquote-footer-font-weight	–blockquote-footer-font-weight: normal;
Blockquote Variables	Variable	–blockquote-footer-font-style	–blockquote-footer-font-style: normal;
Blockquote Variables	Variable	–blockquote-footer-line-height	–blockquote-footer-line-height: 1.5;
Blockquote Variables	Variable	–blockquote-footer-text-transform	–blockquote-footer-text-transform: none;
Blockquote Variables	Variable	–blockquote-footer-color	–blockquote-footer-color: currentColor;
Blockquote Variables	Variable	–blockquote-cite-font-family	–blockquote-cite-font-family: inherit;
Blockquote Variables	Variable	–blockquote-cite-font-size	–blockquote-cite-font-size: inherit;
Blockquote Variables	Variable	–blockquote-cite-font-weight	–blockquote-cite-font-weight: inherit;
Blockquote Variables	Variable	–blockquote-cite-font-style	–blockquote-cite-font-style: inherit;
Blockquote Variables	Variable	–blockquote-cite-line-height	–blockquote-cite-line-height: inherit;
Blockquote Variables	Variable	–blockquote-cite-text-transform	–blockquote-cite-text-transform: inherit;
Blockquote Variables	Variable	–blockquote-cite-color	–blockquote-cite-color: currentColor;
Color Scheme	Other Rule	:root	color-scheme: light only;
Color Scheme	Class	.scheme–light	color-scheme: light;
Color Scheme	Class	.scheme–dark	color-scheme: dark;
Reset	Other Rule	:root	interpolate-size: allow-keywords;
Reset	Other Rule	, ::before, *::after	box-sizing: border-box;
Reset	Other Rule	body	min-block-size: 100svh;
Reset	Other Rule	input, button, textarea, select	font: inherit;
Reset	Attribute Style	button:not(nav button, [class*=”btn–“])	line-height: var(–btn-line-height); letter-spacing: var(–btn-letter-spacing); text-transform: var(–btn-text-transform); text-decoration: var(–btn-text-decoration); text-align: var(–btn-text-align); font-weight: var(–btn-font-weight); font-style: var(–btn-font-style); font-family: var(–btn-font-family);
Reset	Other Rule	:where(dd)	margin-inline-start: 0;
Body, Heading, or Text Defaults	Other Rule	html	font-size: var(–root-font-size) !important;
Body Defaults	Other Rule	:where(body)	font-size: var(–text-m); overflow-x: clip; font-family: var(–text-font-family); color: var(–text-color); line-height: var(–text-line-height); text-wrap: var(–text-text-wrap); background: var(–body-bg-color); transition: background var(–transition);
Body Defaults	Attribute Style	:where(body) p, :where(body) :where(ul:not([class], ol:not([class])) li)	max-inline-size: var(–text-m-length, 70ch); width: 100%;
Body Defaults	Other Rule	:where(p)	line-height: var(–text-line-height, calc(10px + 2ex));
Link Defaults	Attribute Style	body a:where(:not([class*= btn–], header a, footer a))	color: var(–link-color, var(–primary-semi-dark)); font-weight: var(–link-weight, inherit); -webkit-text-decoration: var(–link-decoration, underline); text-decoration: var(–link-decoration, underline); text-underline-offset: var(–link-underline-offset, 2px); text-decoration-color: var(–link-decoration-color); text-decoration-thickness: var(–link-decoration-thickness); transition: var(–link-transition, var(–transition));
Link Defaults	Attribute Style	body a:where(:not([class*= btn–], header a, footer a)):hover	color: var(–link-color-hover, var(–primary-dark)); text-decoration-thickness: var(–link-decoration-thickness);	@media (hover: hover) and (pointer: fine)
Heading Defaults	Class	h1, :where(.h1), h2, :where(.h2), h3, :where(.h3), h4, :where(.h4), h5, :where(.h5), h6, :where(.h6)	font-family: var(–heading-font-family); color: var(–heading-color); line-height: var(–heading-line-height); font-weight: var(–heading-font-weight); text-wrap: var(–heading-text-wrap);
Heading Defaults	Other Rule	h1	font-size: var(–h1); max-width: var(–h1-max-width);
Heading Defaults	Other Rule	h2	font-size: var(–h2);
Heading Defaults	Other Rule	h3	font-size: var(–h3);
Heading Defaults	Other Rule	h4	font-size: var(–h4); line-height: var(–h4-line-height);
Heading Defaults	Other Rule	h5	font-size: var(–h5);
Heading Defaults	Other Rule	h6	font-size: var(–h6);
Blockquote Styling	Attribute Style	:where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class=”-card”] blockquote, figure[class=”-card”], figure[class*=”-card”] blockquote))))	display: flex; flex-direction: column; gap: var(–blockquote-gap); inline-size: 100%; padding: var(–blockquote-padding); gap: var(–blockquote-gap); border-width: var(–blockquote-border-width); border-style: var(–blockquote-border-style); border-color: var(–blockquote-border-color); border-radius: var(–blockquote-border-radius); background: var(–blockquote-background); box-shadow: var(–blockquote-box-shadow);
Blockquote Styling	Attribute Style	:where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class=”-card”] blockquote, figure[class=”-card”], figure[class*=”-card”] blockquote)))) p	color: var(–blockquote-text-color); font-family: var(–blockquote-text-font-family); font-style: var(–blockquote-text-font-style); font-size: var(–blockquote-text-font-size); font-weight: var(–blockquote-text-font-weight); line-height: var(–blockquote-text-line-height); text-align: var(–blockquote-text-text-align); text-transform: var(–blockquote-text-text-transform);
Blockquote Styling	Attribute Style	:where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class=”-card”] blockquote, figure[class=”-card”], figure[class=”-card”] blockquote)))) footer, :where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class=”-card”] blockquote, figure[class=”-card”], figure[class=”-card”] blockquote)))) figcaption	display: var(–blockquote-footer-display, flex); flex-direction: var(–blockquote-footer-flex-direction, row); align-items: var(–blockquote-footer-align-items, center); gap: var(–blockquote-footer-gap, calc(var(–content-gap) / 2)); padding: var(–blockquote-footer-padding); margin-block: var(–blockquote-footer-margin-block); font-family: var(–blockquote-footer-font-family); font-size: var(–blockquote-footer-font-size); font-weight: var(–blockquote-footer-font-weight); font-style: var(–blockquote-footer-font-style); line-height: var(–blockquote-footer-line-height); text-transform: var(–blockquote-footer-text-transform); color: var(–blockquote-footer-color);
Blockquote Styling	Attribute Style	:where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class=”-card”] blockquote, figure[class=”-card”], figure[class=”-card”] blockquote)))) cite, :where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class=”-card”] blockquote, figure[class=”-card”], figure[class=”-card”] blockquote)))) figcaption cite	font-family: var(–blockquote-cite-font-family); font-size: var(–blockquote-cite-font-size); font-weight: var(–blockquote-cite-font-weight); font-style: var(–blockquote-cite-font-style); line-height: var(–blockquote-cite-line-height); text-transform: var(–blockquote-cite-text-transform); color: var(–blockquote-cite-color);
Blockquote Styling	Class	.btn–primary	–btn-background: color-mix(in oklch, var(–primary), white 10%); –btn-background-hover: color-mix(in oklch, var(–primary), blue 40%); –btn-text-color: var(–white); –btn-text-color-hover: var(–primary-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Blockquote Styling	Class	.btn–primary-dark	–btn-background: var(–primary-dark); –btn-background-hover: var(–primary-ultra-dark); –btn-text-color: var(–white); –btn-text-color-hover: var(–primary-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-semi-dark);
Blockquote Styling	Class	.btn–primary-light	–btn-background: var(–primary-ultra-light); –btn-background-hover: var(–primary-light); –btn-text-color: var(–primary-ultra-dark); –btn-text-color-hover: var(–primary-ultra-dark); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Blockquote Styling	Class	.btn–primary.btn–outline	–btn-background: transparent; –btn-background-hover: var(–primary-light); –btn-text-color: var(–primary); –btn-text-color-hover: var(–primary-ultra-dark); –btn-border-width: 1px; –btn-border-color: var(–primary); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Blockquote Styling	Class	.btn–primary-dark.btn–outline	–btn-background: transparent; –btn-background-hover: var(–primary-dark); –btn-text-color: var(–primary-dark); –btn-text-color-hover: var(–primary-ultra-light); –btn-border-width: 1px; –btn-border-color: var(–primary-dark); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Blockquote Styling	Class	.btn–primary-light.btn–outline	–btn-background: transparent; –btn-background-hover: var(–primary-light); –btn-text-color: var(–primary-light); –btn-text-color-hover: var(–primary-dark); –btn-border-width: 1px; –btn-border-color: var(–primary-light); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Blockquote Styling	Class	.btn–secondary	–btn-background: var(–secondary); –btn-background-hover: var(–secondary-hover); –btn-text-color: var(–secondary-ultra-light); –btn-text-color-hover: var(–secondary-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–secondary-light);
Blockquote Styling	Class	.btn–secondary-dark	–btn-background: var(–secondary-dark); –btn-background-hover: var(–secondary-ultra-dark); –btn-text-color: var(–secondary-ultra-light); –btn-text-color-hover: var(–secondary-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–secondary-semi-dark);
Blockquote Styling	Class	.btn–secondary-light	–btn-background: var(–secondary-ultra-light); –btn-background-hover: var(–secondary-light); –btn-text-color: var(–secondary); –btn-text-color-hover: var(–secondary-ultra-dark); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–secondary-light);
Blockquote Styling	Class	.btn–secondary.btn–outline	–btn-background: transparent; –btn-background-hover: var(–secondary-hover); –btn-text-color: var(–secondary); –btn-text-color-hover: var(–secondary-ultra-light); –btn-border-width: 1px; –btn-border-color: var(–secondary); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–secondary-light);
Blockquote Styling	Class	.btn–secondary-dark.btn–outline	–btn-background: transparent; –btn-background-hover: var(–secondary-dark); –btn-text-color: var(–secondary-dark); –btn-text-color-hover: var(–secondary-ultra-light); –btn-border-width: 1px; –btn-border-color: var(–secondary-dark); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–secondary-light);
Blockquote Styling	Class	.btn–secondary-light.btn–outline	–btn-background: transparent; –btn-background-hover: var(–secondary-light); –btn-text-color: var(–secondary-light); –btn-text-color-hover: var(–secondary-dark); –btn-border-width: 1px; –btn-border-color: var(–secondary-light); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–secondary-light);
Blockquote Styling	Class	.btn–accent	–btn-background: var(–accent); –btn-background-hover: var(–accent-hover); –btn-text-color: var(–accent-ultra-dark); –btn-text-color-hover: var(–accent-ultra-dark); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–accent-light);
Blockquote Styling	Class	.btn–accent-dark	–btn-background: var(–accent-dark); –btn-background-hover: var(–accent-ultra-dark); –btn-text-color: var(–accent-ultra-light); –btn-text-color-hover: var(–accent-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–accent-semi-dark);
Blockquote Styling	Class	.btn–accent-light	–btn-background: var(–accent-ultra-light); –btn-background-hover: var(–accent-light); –btn-text-color: var(–accent); –btn-text-color-hover: var(–accent-ultra-dark); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–accent-light);
Blockquote Styling	Class	.btn–accent.btn–outline	–btn-background: transparent; –btn-background-hover: var(–accent-hover); –btn-text-color: var(–accent); –btn-text-color-hover: var(–accent-ultra-light); –btn-border-width: 1px; –btn-border-color: var(–accent); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–accent-light);
Blockquote Styling	Class	.btn–accent-dark.btn–outline	–btn-background: transparent; –btn-background-hover: var(–accent-dark); –btn-text-color: var(–accent-dark); –btn-text-color-hover: var(–accent-ultra-light); –btn-border-width: 1px; –btn-border-color: var(–accent-dark); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–accent-light);
Blockquote Styling	Class	.btn–accent-light.btn–outline	–btn-background: transparent; –btn-background-hover: var(–accent-light); –btn-text-color: var(–accent-light); –btn-text-color-hover: var(–accent-dark); –btn-border-width: 1px; –btn-border-color: var(–accent-light); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–accent-light);
Blockquote Styling	Class	.btn–neutral	–btn-background: var(–neutral); –btn-background-hover: var(–neutral-dark); –btn-text-color: var(–neutral-ultra-light); –btn-text-color-hover: var(–neutral-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary);
Blockquote Styling	Class	.btn–neutral-dark	–btn-background: var(–neutral-dark); –btn-background-hover: var(–neutral-ultra-dark); –btn-text-color: var(–neutral-ultra-light); –btn-text-color-hover: var(–neutral-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–neutral-semi-dark);
Blockquote Styling	Class	.btn–neutral-light	–btn-background: var(–neutral-ultra-light); –btn-background-hover: var(–neutral-light); –btn-text-color: var(–neutral); –btn-text-color-hover: var(–neutral-ultra-dark); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–neutral-light);
Blockquote Styling	Class	.btn–neutral.btn–outline	–btn-background: transparent; –btn-background-hover: var(–neutral-hover); –btn-text-color: var(–neutral); –btn-text-color-hover: var(–neutral-ultra-light); –btn-border-width: 1px; –btn-border-color: var(–neutral); –btn-border-color-hover: var(–neutral-hover); –focus-color: var(–neutral-semi-light);
Blockquote Styling	Class	.btn–neutral-dark.btn–outline	–btn-background: transparent; –btn-background-hover: var(–neutral-dark); –btn-text-color: var(–neutral-dark); –btn-text-color-hover: var(–neutral-ultra-light); –btn-border-width: 1px; –btn-border-color: var(–neutral-dark); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–neutral-semi-dark);
Blockquote Styling	Class	.btn–neutral-light.btn–outline	–btn-background: transparent; –btn-background-hover: var(–neutral-light); –btn-text-color: var(–neutral-light); –btn-text-color-hover: var(–neutral-dark); –btn-border-width: 1px; –btn-border-color: var(–neutral-light); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–neutral-light);
Blockquote Styling	Attribute Style	[class=”btn–“]:where(:not(.btn–none, .wp-block-button)), [class=”btn–“].wp-block-button > .wp-block-button__link	background: var(–btn-background); color: var(–btn-text-color); padding-block: var(–btn-padding-block); padding-inline: var(–btn-padding-inline); inline-size: var(–btn-width, auto); min-inline-size: var(–btn-min-width); line-height: var(–btn-line-height); font-family: var(–btn-font-family); font-size: var(–btn-font-size, var(–text-m)); font-weight: var(–btn-font-weight); font-style: var(–btn-font-style); text-transform: var(–btn-text-transform); letter-spacing: var(–btn-letter-spacing); text-decoration: var(–btn-text-decoration); border-width: var(–btn-border-width); border-style: var(–btn-border-style); border-radius: var(–btn-border-radius); border-color: var(–btn-border-color); transition: var(–btn-transition, var(–transition)); justify-content: var(–btn-justify-content, center); align-items: var(–btn-align-items, center); text-align: var(–btn-text-align, center); display: var(–btn-display, inline-flex);
Blockquote Styling	Attribute Style	[class=”btn–“]:where(:not(.btn–none, .wp-block-button)):hover, [class=”btn–“].wp-block-button > .wp-block-button__link:hover	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Blockquote Styling	Attribute Style	[class=”btn–“]:where(:not(.btn–none, .wp-block-button)):where(:focus-visible), [class=”btn–“].wp-block-button > .wp-block-button__link:where(:focus-visible)	outline-style: solid; outline-color: var(–focus-color); outline-width: var(–focus-width); outline-offset: var(–focus-offset);
Blockquote Styling	Attribute Style	[class=”btn–“]:where(:not(.btn–none, .wp-block-button)), [class=”btn–“].wp-block-button > .wp-block-button__link	–btn-width: 100%; –btn-min-width: 100%;	@media (max-width: 37.5rem)
Blockquote Styling	Class	.btn–xs	–btn-font-size: var(–text-xs);
Blockquote Styling	Class	.btn–s	–btn-font-size: var(–text-s);
Blockquote Styling	Class	.btn–m	–btn-font-size: var(–text-m);
Blockquote Styling	Class	.btn–l	–btn-font-size: var(–text-l);
Blockquote Styling	Class	.btn–xl	–btn-font-size: var(–text-xl);
Blockquote Styling	Class	.btn–xxl	–btn-font-size: var(–text-xxl);
Blockquote Styling	Class	.btn–none	background: none; border: none;
Blockquote Styling	Class	.card	–concentric-radius: calc(var(–radius) + var(–card-padding)); color-scheme: inherit; display: var(–card-display, flex) !important; flex-direction: var(–card-flex-direction, column); position: relative; overflow: var(–card-overflow, clip); background-clip: padding-box; transition: var(–card-transition, var(–transition)); font-size: var(–card-text-size, var(–text-s)); –card-radius: var(–concentric-radius); border-width: var(–card-border-width, var(–border-width)); border-style: var(–card-border-style, var(–border-style)); border-color: var(–card-border-color, transparent); border-radius: var(–card-radius, var(–radius, 0)); padding: var(–card-padding, var(–space-m)); gap: var(–card-gap, var(–content-gap)); background: var(–card-background, var(–white)); color: var(–card-text-color, var(–text-dark)); line-height: var(–card-line-height, inherit); box-shadow: var(–card-shadow, none);
Blockquote Styling	Attribute Style	.card :where([class=”__media”]:not([class=”wrapper”]))	border-radius: var(–card-media-radius, var(–radius, 0)); aspect-ratio: var(–card-media-aspect-ratio, 16/9); object-fit: var(–card-media-object-fit, fill); overflow: clip; inline-size: 100%;
Blockquote Styling	Attribute Style	.card :where([class=”__media”]:not([class=”wrapper”])) img	object-fit: var(–card-media-object-fit, fill);
Blockquote Styling	Attribute Style	.card :where(img[class=”__avatar”]:not([class=”wrapper”])), .card :where([class*=”__avatar”] img)	border-radius: var(–card-avatar-radius, 50vw); border-width: var(–card-avatar-border-width, 0); border-style: var(–card-avatar-border-style, solid); border-color: var(–card-avatar-border-color, transparent); inline-size: var(–card-avatar-size, 48px); block-size: var(–card-avatar-size, 48px); align-self: center; aspect-ratio: var(–card-avatar-aspect-ratio, 1); object-fit: cover; overflow: clip;
Blockquote Styling	Attribute Style	.card :where(img[class=”__avatar”]:not([class=”wrapper”])) img, .card :where([class*=”__avatar”] img) img	object-fit: cover;
Blockquote Styling	Class	.card :is(h1, h2, h3, h4, h5, h6)	font-size: var(–card-heading-size, var(–h3)); color: var(–card-heading-color, var(–text-dark));
Blockquote Styling	Attribute Style	.card a:where(:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, [class*=”btn–“], [data-icon]))	–link-color: var(–card-link-color, var(–primary)); –link-color-hover: var(–card-link-color-hover, var(–primary-hover));
Blockquote Styling	Attribute Style	.card :where([data-icon])	–icon-radius: var(–card-icon-radius, var(–radius, 0)); –icon-size: var(–card-icon-size, 48px); –icon-color: var(–card-icon-color, var(–icon-color, var(–text-dark)));
Blockquote Styling	Attribute Style	.card [class*=”btn–“]	–btn-font-size: var(–card-button-font-size, var(–text-s)); –btn-background: color-mix(in oklch, var(–primary), white 10%); –btn-background-hover: color-mix(in oklch, var(–primary), blue 40%); –btn-text-color: var(–white); –btn-text-color-hover: var(–primary-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Blockquote Styling	Attribute Style	.card:where([class*=”–light”])	color-scheme: light;
Blockquote Styling	Attribute Style	.card:where([class*=”–dark”])	color-scheme: dark;
Blockquote Styling	Attribute Style	[data-icon]:is(svg, i, a)	color-scheme: var(–icon-scheme, default); display: flex; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: content-box; color: var(–icon-color, var(–neutral-dark)); font-size: var(–icon-size); height: var(–icon-height, var(–icon-size, 24px)); width: var(–icon-width, var(–icon-size, 24px)); transition: var(–icon-transition, var(–transition)); box-shadow: var(–icon-shadow, none); overflow: visible;
Blockquote Styling	Attribute Style	[data-icon]:is(i)::before	width: 100%; height: 100%; text-align: center; font-size: var(–icon-size);
Blockquote Styling	Attribute Style	[data-icon] svg	color: var(–icon-color);
Blockquote Styling	Attribute Style	[data-icon]:is(a):hover, a:hover [data-icon], [data-icon] [data-icon-hover]:hover, [data-icon] [data-icon-hover]:hover [data-icon]	–icon-background: var(–icon-background-hover); –icon-color: var(–icon-color-hover); –icon-border-color: var(–icon-border-color-hover);
Blockquote Styling	Attribute Style	.icon–xs, [data-icon-size=”xs”]	–icon-size: var(–icon-size-xs); –icon-padding: var(–icon-padding-xs);
Blockquote Styling	Attribute Style	.icon–s, [data-icon-size=”s”]	–icon-size: var(–icon-size-s); –icon-padding: var(–icon-padding-s);
Blockquote Styling	Attribute Style	.icon–m, [data-icon-size=”m”]	–icon-size: var(–icon-size-m); –icon-padding: var(–icon-padding-m);
Blockquote Styling	Attribute Style	.icon–l, [data-icon-size=”l”]	–icon-size: var(–icon-size-l); –icon-padding: var(–icon-padding-l);
Blockquote Styling	Attribute Style	.icon–xl, [data-icon-size=”xl”]	–icon-size: var(–icon-size-xl); –icon-padding: var(–icon-padding-xl);
Blockquote Styling	Attribute Style	.icon–2xl, [data-icon-size=”2xl”]	–icon-size: var(–icon-size-2xl); –icon-padding: var(–icon-padding-2xl);
Blockquote Styling	Attribute Style	.icon–boxed, [data-icon-style=”boxed”]	padding: var(–icon-padding, 12px); border-width: var(–icon-border-width, 0); border-style: var(–icon-border-style, solid); border-radius: var(–icon-radius, var(–radius)); background: var(–icon-background, var(–neutral-ultra-light)); border-color: var(–icon-border-color, transparent);
Blockquote Styling	Attribute Style	.icon–plain, [data-icon-style=”plain”]	–icon-background: transparent; –icon-border-width: 0; –icon-padding: 0;
Blockquote Styling	Attribute Style	:is([data-icon-list], .icon-list)	display: flex; flex-direction: column; gap: var(–icon-list-gap, 1em);
Blockquote Styling	Attribute Style	:is([data-icon-list], .icon-list) :where(svg, i)	–icon-size: var(–icon-list-icon-size, 1em); position: relative; translate: var(–icon-inline-offset, 0) var(–icon-block-offset, 0); flex-shrink: 0;
Blockquote Styling	Attribute Style	:is([data-icon-list], .icon-list) :where(svg, i):is(svg, i, a)	color-scheme: var(–icon-scheme, default); display: flex; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: content-box; color: var(–icon-color, var(–neutral-dark)); font-size: var(–icon-size); height: var(–icon-height, var(–icon-size, 24px)); width: var(–icon-width, var(–icon-size, 24px)); transition: var(–icon-transition, var(–transition)); box-shadow: var(–icon-shadow, none); overflow: visible;
Blockquote Styling	Attribute Style	:is([data-icon-list], .icon-list) :where(svg, i):is(i)::before	width: 100%; height: 100%; text-align: center; font-size: var(–icon-size);
Blockquote Styling	Attribute Style	:is([data-icon-list], .icon-list) :where(svg, i) svg	color: var(–icon-color);
Blockquote Styling	Attribute Style	:is([data-icon-list], .icon-list) :where(svg, i):is(a):hover, a:hover :is([data-icon-list], .icon-list) :where(svg, i), :is([data-icon-list], .icon-list) :where(svg, i) [data-icon-hover]:hover, :is([data-icon-list], .icon-list) :where(svg, i) [data-icon-hover]:hover [data-icon]	–icon-background: var(–icon-background-hover); –icon-color: var(–icon-color-hover); –icon-border-color: var(–icon-border-color-hover);
Blockquote Styling	Attribute Style	:is([data-icon-list], .icon-list) a:hover	–icon-color: var(–icon-color-hover, var(–primary)); –icon-background: var(–icon-background-hover, var(–primary-hover));
Blockquote Styling	Other Rule	:where(a, button):has(> svg, > i):hover	–icon-color: var(–icon-color-hover, var(–primary)); –icon-background: var(–icon-background-hover, var(–primary-hover));
Scroll offset	Attribute Style	[id]	scroll-margin-top: var(–offset, 0);
Smooth Scrolling	Other Rule	html	scroll-behavior: smooth;
Smooth Scrolling	Other Rule	html:focus-within	scroll-behavior: auto;
Smooth Scrolling	Class	.hidden-accessible	position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(100%); white-space: nowrap; border: 0;
Smooth Scrolling	Other Rule	html:focus-within	scroll-behavior: auto;	@media (prefers-reduced-motion: reduce)
Smooth Scrolling	Other Rule	, ::before, *::after	-webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;	@media (prefers-reduced-motion: reduce)
Smooth Scrolling	Class	.skip-link	position: absolute !important; inset-block-start: 1rem; inset-inline-start: 1rem; transform: translateY(-250%); –btn-min-width: fit-content; z-index: 100; background: var(–btn-background); color: var(–btn-text-color); padding-block: var(–btn-padding-block); padding-inline: var(–btn-padding-inline); inline-size: var(–btn-width, auto); min-inline-size: var(–btn-min-width); line-height: var(–btn-line-height); font-family: var(–btn-font-family); font-size: var(–btn-font-size, var(–text-m)); font-weight: var(–btn-font-weight); font-style: var(–btn-font-style); text-transform: var(–btn-text-transform); letter-spacing: var(–btn-letter-spacing); text-decoration: var(–btn-text-decoration); border-width: var(–btn-border-width); border-style: var(–btn-border-style); border-radius: var(–btn-border-radius); border-color: var(–btn-border-color); transition: var(–btn-transition, var(–transition)); justify-content: var(–btn-justify-content, center); align-items: var(–btn-align-items, center); text-align: var(–btn-text-align, center); display: var(–btn-display, inline-flex); –btn-background: color-mix(in oklch, var(–primary), white 10%); –btn-background-hover: color-mix(in oklch, var(–primary), blue 40%); –btn-text-color: var(–white); –btn-text-color-hover: var(–primary-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Smooth Scrolling	Class	.skip-link:hover	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Smooth Scrolling	Class	.skip-link:where(:focus-visible)	outline-style: solid; outline-color: var(–focus-color); outline-width: var(–focus-width); outline-offset: var(–focus-offset);
Smooth Scrolling	Class	.skip-link:focus-visible	transform: translateY(0);
Focus Styles	Other Rule	:focus	outline: none; box-shadow: none;
Focus Styles	Other Rule	:focus-visible	outline-style: solid; outline-color: var(–focus-color); outline-width: var(–focus-width); outline-offset: var(–focus-offset);
Focus Styles	Other Rule	:focus	outline-style: solid; outline-color: var(–focus-color); outline-width: var(–focus-width); outline-offset: var(–focus-offset);	@supports not selector(:focus-visible)
Default Section Styles	Other Rule	:where(section:not(section section))	display: flex; flex-direction: column; padding-block: var(–section-padding-block); padding-inline: var(–gutter);
Default Section Styles	Other Rule	:where(body > header)	padding-block: var(–space-xs); padding-inline: var(–gutter);
Default Section Styles	Other Rule	:where(body > footer)	padding-block: var(–section-padding-block); padding-inline: var(–gutter);
Default Section Styles	Class	.overlay-1, .overlay-crosshatch	position: relative; isolation: isolate;
Default Section Styles	Class	.overlay-1::before, .overlay-crosshatch::before	content: “”; display: flex; position: absolute; background-image: var(–overlay-background, var(–overlay-1-background)); background-size: var(–overlay-background-size, var(–overlay-1-background-size)); background-position: var(–overlay-background-position, var(–overlay-1-background-position)); background-repeat: var(–overlay-background-repeat, var(–overlay-1-background-repeat)); background-attachment: var(–overlay-background-attachment, var(–overlay-1-background-attachment)); opacity: var(–overlay-opacity, var(–overlay-1-opacity)); inset: var(–overlay-inset, var(–overlay-1-inset, 0)); z-index: var(–overlay-z-index, var(–overlay-1-z-index, -1));
Default Section Styles	Class	figure:where(:has(> img, > picture, > svg, > video, > iframe)):where(.overlay-1, .overlay-crosshatch)	–overlay-z-index: 0;
Default Section Styles	Class	.overlay-2, .overlay-graphpaper	position: relative; isolation: isolate;
Default Section Styles	Class	.overlay-2::before, .overlay-graphpaper::before	content: “”; display: flex; position: absolute; background-image: var(–overlay-background, var(–overlay-2-background)); background-size: var(–overlay-background-size, var(–overlay-2-background-size)); background-position: var(–overlay-background-position, var(–overlay-2-background-position)); background-repeat: var(–overlay-background-repeat, var(–overlay-2-background-repeat)); background-attachment: var(–overlay-background-attachment, var(–overlay-2-background-attachment)); opacity: var(–overlay-opacity, var(–overlay-2-opacity)); inset: var(–overlay-inset, var(–overlay-2-inset, 0)); z-index: var(–overlay-z-index, var(–overlay-2-z-index, -1));
Default Section Styles	Class	figure:where(:has(> img, > picture, > svg, > video, > iframe)):where(.overlay-2, .overlay-graphpaper)	–overlay-z-index: 0;
Default Section Styles	Class	.bg–ultra-light	background: var(–bg-ultra-light);
Default Section Styles	Class	.bg–light	background: var(–bg-light);
Default Section Styles	Class	.bg–dark	background: var(–bg-dark);
Default Section Styles	Class	.bg–ultra-dark	background: var(–bg-ultra-dark);
Default Section Styles	Class	.text–light	color: var(–text-light);
Default Section Styles	Class	.text–light-muted	color: var(–text-light-muted);
Default Section Styles	Class	.text–dark	color: var(–text-dark);
Default Section Styles	Class	.text–dark-muted	color: var(–text-dark-muted);
Default Section Styles	Class	:where(.bg–ultra-light)	–relative-text-color: var(–bg-ultra-light-text); color: var(–relative-text-color, inherit);
Default Section Styles	Class	:where(.bg–light)	–relative-text-color: var(–bg-light-text); color: var(–relative-text-color, inherit);
Default Section Styles	Class	:where(.bg–dark)	–relative-text-color: var(–bg-dark-text); color: var(–relative-text-color, inherit);
Default Section Styles	Class	:where(.bg–ultra-dark)	–relative-text-color: var(–bg-ultra-dark-text); color: var(–relative-text-color, inherit);
Default Section Styles	Class	.bg–ultra-light :where(h1, h2, h3, h4, h5, h6)	color: var(–relative-heading-color, inherit);
Default Section Styles	Class	.bg–light :where(h1, h2, h3, h4, h5, h6)	color: var(–relative-heading-color, inherit);
Default Section Styles	Class	.bg–dark :where(h1, h2, h3, h4, h5, h6)	color: var(–relative-heading-color, inherit);
Default Section Styles	Class	.bg–ultra-dark :where(h1, h2, h3, h4, h5, h6)	color: var(–relative-heading-color, inherit);
Default Section Styles	Class	.bg–ultra-light	–relative-heading-color: var(–bg-ultra-light-heading);
Default Section Styles	Class	.bg–light	–relative-heading-color: var(–bg-light-heading);
Default Section Styles	Class	.bg–dark	–relative-heading-color: var(–bg-dark-heading);
Default Section Styles	Class	.bg–ultra-dark	–relative-heading-color: var(–bg-ultra-dark-heading);
Default Section Styles	Attribute Style	.bg–ultra-light :is(a):where(:not([class*= btn–], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a))	color: var(–relative-link-color);
Default Section Styles	Attribute Style	.bg–ultra-light :is(a):where(:not([class*= btn–], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover	color: var(–relative-link-color-hover);
Default Section Styles	Attribute Style	.bg–dark :is(a):where(:not([class*= btn–], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a))	color: var(–relative-link-color);
Default Section Styles	Attribute Style	.bg–dark :is(a):where(:not([class*= btn–], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover	color: var(–relative-link-color-hover);
Default Section Styles	Attribute Style	.bg–ultra-dark :is(a):where(:not([class*= btn–], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a))	color: var(–relative-link-color);
Default Section Styles	Attribute Style	.bg–ultra-dark :is(a):where(:not([class*= btn–], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover	color: var(–relative-link-color-hover);
Default Section Styles	Class	.bg–ultra-light	–relative-link-color: var(–bg-ultra-light-link); –relative-link-color-hover: var(–bg-ultra-light-link-hover);
Default Section Styles	Class	.bg–dark	–relative-link-color: var(–bg-dark-link); –relative-link-color-hover: var(–bg-dark-link-hover);
Default Section Styles	Class	.bg–ultra-dark	–relative-link-color: var(–bg-ultra-dark-link); –relative-link-color-hover: var(–bg-ultra-dark-link-hover);
Default Section Styles	Class	.bg–dark	–focus-color: var(–bg-dark-focus);
Default Section Styles	Attribute Style	.bg–dark [class*=”btn”]:not(.unrelate)	–focus-color: var(–bg-dark-focus);
Default Section Styles	Class	.bg–ultra-dark	–focus-color: var(–bg-ultra-dark-focus);
Default Section Styles	Attribute Style	.bg–ultra-dark [class*=”btn”]:not(.unrelate)	–focus-color: var(–bg-ultra-dark-focus);
Default Section Styles	Class	.bg–ultra-light	–icon-scheme: var(–bg-ultra-light-icon);
Default Section Styles	Class	.bg–light	–icon-scheme: var(–bg-light-icon);
Default Section Styles	Class	.bg–dark	–icon-scheme: var(–bg-dark-icon);
Default Section Styles	Class	.bg–ultra-dark	–icon-scheme: var(–bg-ultra-dark-icon);
Section Padding	Class	.section–xs	padding-block: var(–section-space-xs); padding-inline: var(–gutter);
Section Padding	Class	.section–s	padding-block: var(–section-space-s); padding-inline: var(–gutter);
Section Padding	Class	.section–s-to-xs	padding-block: var(–section-space-s-to-xs); padding-inline: var(–gutter);
Section Padding	Class	.section–m	padding-block: var(–section-space-m); padding-inline: var(–gutter);
Section Padding	Class	.section–m-to-s	padding-block: var(–section-space-m-to-s); padding-inline: var(–gutter);
Section Padding	Class	.section–m-to-xs	padding-block: var(–section-space-m-to-xs); padding-inline: var(–gutter);
Section Padding	Class	.section–l	padding-block: var(–section-space-l); padding-inline: var(–gutter);
Section Padding	Class	.section–l-to-m	padding-block: var(–section-space-l-to-m); padding-inline: var(–gutter);
Section Padding	Class	.section–l-to-s	padding-block: var(–section-space-l-to-s); padding-inline: var(–gutter);
Section Padding	Class	.section–l-to-xs	padding-block: var(–section-space-l-to-xs); padding-inline: var(–gutter);
Section Padding	Class	.section–xl	padding-block: var(–section-space-xl); padding-inline: var(–gutter);
Section Padding	Class	.section–xl-to-l	padding-block: var(–section-space-xl-to-l); padding-inline: var(–gutter);
Section Padding	Class	.section–xl-to-m	padding-block: var(–section-space-xl-to-m); padding-inline: var(–gutter);
Section Padding	Class	.section–xl-to-s	padding-block: var(–section-space-xl-to-s); padding-inline: var(–gutter);
Section Padding	Class	.section–xl-to-xs	padding-block: var(–section-space-xl-to-xs); padding-inline: var(–gutter);
Section Padding	Class	.section–xxl	padding-block: var(–section-space-xxl); padding-inline: var(–gutter);
Section Padding	Class	.section–xxl-to-xl	padding-block: var(–section-space-xxl-to-xl); padding-inline: var(–gutter);
Section Padding	Class	.section–xxl-to-l	padding-block: var(–section-space-xxl-to-l); padding-inline: var(–gutter);
Section Padding	Class	.section–xxl-to-m	padding-block: var(–section-space-xxl-to-m); padding-inline: var(–gutter);
Section Padding	Class	.section–xxl-to-s	padding-block: var(–section-space-xxl-to-s); padding-inline: var(–gutter);
Section Padding	Class	.section–xxl-to-xs	padding-block: var(–section-space-xxl-to-xs); padding-inline: var(–gutter);
Section Padding	Class	.section–none	padding-block: 0; padding-inline: var(–gutter);
Section Padding	Class	.header–xs	padding-block: var(–space-xs); padding-inline: var(–gutter);
Section Padding	Class	.header–s	padding-block: var(–space-s); padding-inline: var(–gutter);
Section Padding	Class	.header–m	padding-block: var(–space-m); padding-inline: var(–gutter);
Section Padding	Class	.header–l	padding-block: var(–space-l); padding-inline: var(–gutter);
Section Padding	Class	.header–xl	padding-block: var(–space-xl); padding-inline: var(–gutter);
Section Padding	Class	.header–xxl	padding-block: var(–space-xxl); padding-inline: var(–gutter);
Overlays	Attribute Style	[class*=”overlay–“], .overlay	position: relative; z-index: 0; isolation: isolate;
Overlays	Attribute Style	[class*=”overlay–“]::before, .overlay::before	content: “”; background: var(–overlay-color, rgba(0, 0, 0, 0.7)); position: absolute; inset: 0; z-index: var(–overlay-z-index, -1);
Overlays	Attribute Style	figure:where(:has(> img, > picture, > svg, > video, > iframe)):where(.overlay), figure:where(:has(> img, > picture, > svg, > video, > iframe)):where([class*=”overlay–“])	–overlay-z-index: 0;
Overlays	Class	:is(.text–xxl, .text–xl, .text–l, .text–m, .text–s, .text–xs)	font-family: var(–text-font-family); line-height: var(–text-line-height); text-wrap: var(–text-text-wrap);
Overlays	Class	.text–xxl	font-size: var(–text-xxl);
Overlays	Class	.text–xxl:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite)	max-width: var(–text-xxl-max-width);
Overlays	Class	.text–xl	font-size: var(–text-xl);
Overlays	Class	.text–xl:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite)	max-width: var(–text-xl-max-width);
Overlays	Class	.text–l	font-size: var(–text-l);
Overlays	Class	.text–l:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite)	max-width: var(–text-l-max-width);
Overlays	Class	.text–m	font-size: var(–text-m); line-height: var(–text-m-line-height);
Overlays	Class	.text–m:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite)	max-width: var(–text-m-max-width);
Overlays	Class	.text–s	font-size: var(–text-s);
Overlays	Class	.text–s:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite)	max-width: var(–text-s-max-width);
Overlays	Class	.text–xs	font-size: var(–text-xs);
Overlays	Class	.text–xs:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite)	max-width: var(–text-xs-max-width);
Overlays	Class	.h1	font-size: var(–h1); max-width: var(–h1-max-width);
Overlays	Class	.h2	font-size: var(–h2);
Overlays	Class	.h3	font-size: var(–h3);
Overlays	Class	.h4	font-size: var(–h4); line-height: var(–h4-line-height);
Overlays	Class	.h5	font-size: var(–h5);
Overlays	Class	.h6	font-size: var(–h6);
Overlays	Other Rule	body blockquote	text-wrap: pretty;
Position & Sticky	Class	.sticky	position: -webkit-sticky; position: sticky; inset-block-start: var(–sticky-offset, 0);
Auto Object Fit	Other Rule	img	object-fit: var(–object-fit, cover); object-position: var(–object-position, 50% 50%);
Width	Class	.width–10	inline-size: 100%; max-inline-size: calc(var(–content-width) * 0.1);
Width	Class	.width–20	inline-size: 100%; max-inline-size: calc(var(–content-width) * 0.2);
Width	Class	.width–30	inline-size: 100%; max-inline-size: calc(var(–content-width) * 0.3);
Width	Class	.width–40	inline-size: 100%; max-inline-size: calc(var(–content-width) * 0.4);
Width	Class	.width–50	inline-size: 100%; max-inline-size: calc(var(–content-width) * 0.5);
Width	Class	.width–60	inline-size: 100%; max-inline-size: calc(var(–content-width) * 0.6);
Width	Class	.width–70	inline-size: 100%; max-inline-size: calc(var(–content-width) * 0.7);
Width	Class	.width–80	inline-size: 100%; max-inline-size: calc(var(–content-width) * 0.8);
Width	Class	.width–90	inline-size: 100%; max-inline-size: calc(var(–content-width) * 0.9);
Width	Class	.width–full	inline-size: 100%; max-inline-size: 100%;
Width	Attribute Style	figure[class*=”width–“] img	inline-size: 100%;
Width	Class	.width–auto	inline-size: auto !important; max-inline-size: 100%;
Width	Class	.content-width	inline-size: 100%; max-inline-size: var(–content-width); margin-inline: auto;
Width	Class	.content-width–safe	inline-size: 100%; max-inline-size: var(–content-width-safe); margin-inline: auto;
Width	Class	.width–max-content	inline-size: max-content; max-inline-size: 100%;
Width	Class	.width–min-content	inline-size: min-content; max-inline-size: 100%;
Width	Class	.width–fit-content	inline-size: fit-content; max-inline-size: 100%;
Width	Class	.gap–none	–row-gap: 0; –col-gap: 0; gap: 0;
Width	Class	.container-gap	–row-gap: var(–container-gap); –col-gap: var(–container-gap); gap: var(–container-gap);
Width	Class	.content-gap	–row-gap: var(–content-gap); –col-gap: var(–content-gap); gap: var(–content-gap);
Width	Class	.grid-gap	–row-gap: var(–grid-gap); –col-gap: var(–grid-gap); gap: var(–grid-gap);
Auto Container Gap	Other Rule	:where(section:not(section section))	gap: var(–container-gap);
Auto Content Gap	Other Rule	:where(section:not(section section)) > :where(div, ul, ol)	gap: var(–content-gap);
Auto Container Gap	Attribute Style	:where([data-etch-element=”flex-div”]:not(main))	gap: var(–content-gap);
Auto Grid Gap	Attribute Style	section > div:where([class=”grid–“]), :where([class=”grid–“])	gap: var(–grid-gap);
Auto Grid Gap	Other Rule	:where(img:not(header img), figure:not(figure:has(img)))	border-radius: var(–radius);
Auto Grid Gap	Variable	–transition-duration	–transition-duration: 0.3s;
Auto Grid Gap	Variable	–transition-timing	–transition-timing: ease-in-out;
Auto Grid Gap	Variable	–transition-delay	–transition-delay: 0s;
Auto Grid Gap	Variable	–transition	–transition: 0.3s ease-in-out 0s;
Auto Grid Gap	Variable	–ease-smooth	–ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
Auto Grid Gap	Variable	–ease-snappy	–ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
Auto Grid Gap	Variable	–ease-gentle	–ease-gentle: cubic-bezier(0.65, 0, 0.35, 1);
Auto Grid Gap	Variable	–ease-bouncy	–ease-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
Auto Grid Gap	Variable	–ease-elastic	–ease-elastic: linear(0, 0.029 1.6%, 0.123 3.5%, 0.651 10.6%, 0.862 14.1%, 1.002 17.7%, 1.046 19.6%, 1.074 21.6%, 1.087 23.9%, 1.086 26.6%, 1.014 38.5%, 0.994 46.3%, 1);
Auto Grid Gap	Class	.transition	transition: var(–transition);
Auto Grid Gap	Variable	–hover-duration	–hover-duration: var(–transition-duration, 0.3s);
Auto Grid Gap	Variable	–hover-timing	–hover-timing: var(–transition-timing, ease-in-out);
Auto Grid Gap	Variable	–hover-grow-amount	–hover-grow-amount: 1.05;
Auto Grid Gap	Variable	–hover-shrink-amount	–hover-shrink-amount: 0.95;
Auto Grid Gap	Variable	–hover-float-amount	–hover-float-amount: -8px;
Auto Grid Gap	Variable	–hover-sink-amount	–hover-sink-amount: 8px;
Auto Grid Gap	Variable	–hover-slide-right-amount	–hover-slide-right-amount: 8px;
Auto Grid Gap	Variable	–hover-slide-left-amount	–hover-slide-left-amount: -8px;
Auto Grid Gap	Variable	–hover-shadow	–hover-shadow: var(–box-shadow-4);
Auto Grid Gap	Variable	–hover-glow-color	–hover-glow-color: var(–primary);
Auto Grid Gap	Variable	–hover-glow-spread	–hover-glow-spread: 20px;
Auto Grid Gap	Variable	–hover-glow-opacity	–hover-glow-opacity: 0.3;
Auto Grid Gap	Attribute Style	[class*=”on-hover–“]	transition-property: scale, translate, opacity, box-shadow, filter; transition-duration: var(–hover-duration); transition-timing-function: var(–hover-timing);
Auto Grid Gap	Class	.on-hover–grow:hover	scale: var(–hover-grow-amount);
Auto Grid Gap	Class	.on-hover–shrink:hover	scale: var(–hover-shrink-amount);
Auto Grid Gap	Class	.on-hover–float	translate: 0 0;
Auto Grid Gap	Class	.on-hover–float:hover	translate: 0 var(–hover-float-amount);
Auto Grid Gap	Class	.on-hover–sink	translate: 0 0;
Auto Grid Gap	Class	.on-hover–sink:hover	translate: 0 var(–hover-sink-amount);
Auto Grid Gap	Class	.on-hover–slide-right	translate: 0 0;
Auto Grid Gap	Class	.on-hover–slide-right:hover	translate: var(–hover-slide-right-amount) 0;
Auto Grid Gap	Class	.on-hover–slide-left	translate: 0 0;
Auto Grid Gap	Class	.on-hover–slide-left:hover	translate: var(–hover-slide-left-amount) 0;
Auto Grid Gap	Class	.on-hover–shadow:hover	box-shadow: var(–hover-shadow);
Auto Grid Gap	Class	.on-hover–glow:hover	box-shadow: 0 0 var(–hover-glow-spread) color-mix(in srgb, var(–hover-glow-color) calc(var(–hover-glow-opacity) * 100%), transparent);
Auto Grid Gap	Class	.on-hover–fade:hover	opacity: 0.8;
Auto Grid Gap	Class	.on-hover–brighten:hover	filter: brightness(1.1);
Auto Grid Gap	Variable	–border-ripple-color	–border-ripple-color: currentColor;
Auto Grid Gap	Variable	–border-ripple-width	–border-ripple-width: 4px;
Auto Grid Gap	Variable	–border-ripple-duration	–border-ripple-duration: 1s;
Auto Grid Gap	Variable	–border-ripple-distance	–border-ripple-distance: 12px;
Auto Grid Gap	Variable	–border-outline-color	–border-outline-color: currentColor;
Auto Grid Gap	Variable	–border-outline-width	–border-outline-width: 4px;
Auto Grid Gap	Variable	–border-outline-duration	–border-outline-duration: 0.3s;
Auto Grid Gap	Variable	–border-underline-color	–border-underline-color: currentColor;
Auto Grid Gap	Variable	–border-underline-width	–border-underline-width: 3px;
Auto Grid Gap	Variable	–border-underline-duration	–border-underline-duration: 0.3s;
Auto Grid Gap	Animation	@keyframes border-ripple-out	0% { top: calc(var(–border-ripple-width, 4px) * -1); right: calc(var(–border-ripple-width, 4px) * -1); bottom: calc(var(–border-ripple-width, 4px) * -1); left: calc(var(–border-ripple-width, 4px) * -1); opacity: 1; } 100% { top: calc((var(–border-ripple-width, 4px) + var(–border-ripple-distance, 12px)) * -1); right: calc((var(–border-ripple-width, 4px) + var(–border-ripple-distance, 12px)) * -1); bottom: calc((var(–border-ripple-width, 4px) + var(–border-ripple-distance, 12px)) * -1); left: calc((var(–border-ripple-width, 4px) + var(–border-ripple-distance, 12px)) * -1); opacity: 0; }
Auto Grid Gap	Animation	@keyframes border-ripple-in	0% { top: calc((var(–border-ripple-width, 4px) + var(–border-ripple-distance, 12px)) * -1); right: calc((var(–border-ripple-width, 4px) + var(–border-ripple-distance, 12px)) * -1); bottom: calc((var(–border-ripple-width, 4px) + var(–border-ripple-distance, 12px)) * -1); left: calc((var(–border-ripple-width, 4px) + var(–border-ripple-distance, 12px)) * -1); opacity: 0; } 100% { top: calc(var(–border-ripple-width, 4px) * -1); right: calc(var(–border-ripple-width, 4px) * -1); bottom: calc(var(–border-ripple-width, 4px) * -1); left: calc(var(–border-ripple-width, 4px) * -1); opacity: 1; }
Auto Grid Gap	Class	.on-hover–ripple-out	position: relative; overflow: visible; border: none; outline: none;
Auto Grid Gap	Class	.on-hover–ripple-out::before	content: “”; position: absolute; z-index: 1; top: calc(var(–border-ripple-width, 4px) * -1); right: calc(var(–border-ripple-width, 4px) * -1); bottom: calc(var(–border-ripple-width, 4px) * -1); left: calc(var(–border-ripple-width, 4px) * -1); border: var(–border-ripple-width, 4px) solid var(–border-ripple-color, currentColor); border-radius: inherit; pointer-events: none; opacity: 0; animation-duration: var(–border-ripple-duration, 1s);
Auto Grid Gap	Class	.on-hover–ripple-out:hover::before, .on-hover–ripple-out:focus::before, .on-hover–ripple-out:active::before	animation-name: border-ripple-out; animation-fill-mode: backwards;
Auto Grid Gap	Class	.on-hover–ripple-in	position: relative; overflow: visible; border: none; outline: none;
Auto Grid Gap	Class	.on-hover–ripple-in::before	content: “”; position: absolute; z-index: 1; top: calc(var(–border-ripple-width, 4px) * -1); right: calc(var(–border-ripple-width, 4px) * -1); bottom: calc(var(–border-ripple-width, 4px) * -1); left: calc(var(–border-ripple-width, 4px) * -1); border: var(–border-ripple-width, 4px) solid var(–border-ripple-color, currentColor); border-radius: inherit; pointer-events: none; opacity: 0; animation-duration: var(–border-ripple-duration, 1s);
Auto Grid Gap	Class	.on-hover–ripple-in:hover::before, .on-hover–ripple-in:focus::before, .on-hover–ripple-in:active::before	animation-name: border-ripple-in; animation-fill-mode: both;
Auto Grid Gap	Class	.on-hover–outline-out	position: relative; overflow: visible; border: none; outline: none;
Auto Grid Gap	Class	.on-hover–outline-out::before	content: “”; position: absolute; inset: 0; border: var(–border-outline-width, 4px) solid var(–border-outline-color, currentColor); border-radius: inherit; opacity: 0; transition: inset var(–border-outline-duration, 0.3s) ease-out, opacity var(–border-outline-duration, 0.3s) ease-out; pointer-events: none;
Auto Grid Gap	Class	.on-hover–outline-out:hover::before	inset: calc(var(–border-outline-width, 4px) * -2); opacity: 1;
Auto Grid Gap	Class	.on-hover–outline-in	position: relative; overflow: visible; border: none; outline: none;
Auto Grid Gap	Class	.on-hover–outline-in::before	content: “”; position: absolute; inset: calc(var(–border-outline-width, 4px) * -4); border: var(–border-outline-width, 4px) solid var(–border-outline-color, currentColor); border-radius: inherit; opacity: 0; transition: inset var(–border-outline-duration, 0.3s) ease-out, opacity var(–border-outline-duration, 0.3s) ease-out; pointer-events: none;
Auto Grid Gap	Class	.on-hover–outline-in:hover::before	inset: calc(var(–border-outline-width, 4px) * -2); opacity: 1;
Auto Grid Gap	Class	.on-hover–underline-left	position: relative; border: none; outline: none;
Auto Grid Gap	Class	.on-hover–underline-left::before	content: “”; position: absolute; left: 0; right: 100%; bottom: 0; height: var(–border-underline-width, 3px); background: var(–border-underline-color, currentColor); transition: right var(–border-underline-duration, 0.3s) ease-out; pointer-events: none;
Auto Grid Gap	Class	.on-hover–underline-left:hover::before	right: 0;
Auto Grid Gap	Class	.on-hover–underline-center	position: relative; border: none; outline: none;
Auto Grid Gap	Class	.on-hover–underline-center::before	content: “”; position: absolute; left: 50%; right: 50%; bottom: 0; height: var(–border-underline-width, 3px); background: var(–border-underline-color, currentColor); transition: left var(–border-underline-duration, 0.3s) ease-out, right var(–border-underline-duration, 0.3s) ease-out; pointer-events: none;
Auto Grid Gap	Class	.on-hover–underline-center:hover::before	left: 0; right: 0;
Auto Grid Gap	Class	.on-hover–underline-right	position: relative; border: none; outline: none;
Auto Grid Gap	Class	.on-hover–underline-right::before	content: “”; position: absolute; left: 100%; right: 0; bottom: 0; height: var(–border-underline-width, 3px); background: var(–border-underline-color, currentColor); transition: left var(–border-underline-duration, 0.3s) ease-out; pointer-events: none;
Auto Grid Gap	Class	.on-hover–underline-right:hover::before	left: 0;
Auto Grid Gap	Variable	–scroll-animation-duration	–scroll-animation-duration: 0.6s;
Auto Grid Gap	Variable	–scroll-animation-timing	–scroll-animation-timing: var(–ease-snappy);
Auto Grid Gap	Variable	–scroll-animation-delay	–scroll-animation-delay: 0s;
Auto Grid Gap	Variable	–animate-range-start	–animate-range-start: entry 20%;
Auto Grid Gap	Variable	–animate-range-end	–animate-range-end: entry 100%;
Auto Grid Gap	Variable	–enter-opacity-start	–enter-opacity-start: 0;
Auto Grid Gap	Variable	–enter-float-distance	–enter-float-distance: 40px;
Auto Grid Gap	Variable	–enter-sink-distance	–enter-sink-distance: 40px;
Auto Grid Gap	Variable	–enter-slide-distance	–enter-slide-distance: 40px;
Auto Grid Gap	Variable	–enter-scale-start	–enter-scale-start: 0.9;
Auto Grid Gap	Variable	–enter-scale-shrink	–enter-scale-shrink: 1.1;
Auto Grid Gap	Variable	–enter-blur-amount	–enter-blur-amount: 8px;
Auto Grid Gap	Variable	–enter-parallax-distance	–enter-parallax-distance: 150px;
Auto Grid Gap	Variable	–enter-stagger-interval	–enter-stagger-interval: 5%;
Auto Grid Gap	Animation	@keyframes enter-animate	from { opacity: var(–animate-opacity, 1); transform: translateY(var(–animate-block, 0)) translateX(var(–animate-inline, 0)) scale(var(–animate-scale, 1)); filter: blur(var(–animate-blur, 0)); } to { opacity: 1; transform: translateY(0) translateX(0) scale(1); filter: blur(0); }
Auto Grid Gap	Attribute Style	[class=”on-enter–“]:not([class=”on-enter–delay”]):not([class*=”on-enter-all”])	animation-name: enter-animate; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: var(–animate-range-start, entry 20%) var(–animate-range-end, entry 100%);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter–fade	–animate-opacity: var(–enter-opacity-start, 0);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter–float	–animate-block: var(–enter-float-distance, 40px);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter–sink	–animate-block: calc(var(–enter-sink-distance, 40px) * -1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter–slide-left	–animate-inline: var(–enter-slide-distance, 40px);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter–slide-right	–animate-inline: calc(var(–enter-slide-distance, 40px) * -1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter–grow	–animate-scale: var(–enter-scale-start, 0.9);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter–shrink	–animate-scale: var(–enter-scale-shrink, 1.1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter–blur	–animate-blur: var(–enter-blur-amount, 8px);	@supports (animation-timeline: view())
Auto Grid Gap	Animation	@keyframes parallax-animate	from { translate: 0 calc(var(–enter-parallax-distance, 150px) / 2); } to { translate: 0 calc(var(–enter-parallax-distance, 150px) / -2); }	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter–parallax	animation-name: parallax-animate; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: cover 0% cover 100%;	@supports (animation-timeline: view())
Auto Grid Gap	Attribute Style	[class=”on-enter-all–“] >	animation-name: enter-animate; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: var(–animate-range-start, entry 20%) var(–animate-range-end, entry 100%);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter-all–fade > *	–animate-opacity: var(–enter-opacity-start, 0);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter-all–float > *	–animate-block: var(–enter-float-distance, 40px);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter-all–sink > *	–animate-block: calc(var(–enter-sink-distance, 40px) * -1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter-all–slide-left > *	–animate-inline: var(–enter-slide-distance, 40px);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter-all–slide-right > *	–animate-inline: calc(var(–enter-slide-distance, 40px) * -1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter-all–grow > *	–animate-scale: var(–enter-scale-start, 0.9);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter-all–shrink > *	–animate-scale: var(–enter-scale-shrink, 1.1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-enter-all–blur > *	–animate-blur: var(–enter-blur-amount, 8px);	@supports (animation-timeline: view())
Auto Grid Gap	Attribute Style	[class=”on-enter-all–“].on-enter–stagger >	animation-delay: calc(sibling-index() * var(–enter-stagger-interval, 5%));	@supports (animation-timeline: view())
Auto Grid Gap	Attribute Style	[class=”on-enter–“], [class=”on-enter-all–“] > *	opacity: 1; transform: none; filter: none;	@supports not (animation-timeline: view())
Auto Grid Gap	Variable	–exit-range-start	–exit-range-start: cover 50%;
Auto Grid Gap	Variable	–exit-range-end	–exit-range-end: cover 100%;
Auto Grid Gap	Variable	–exit-opacity-target	–exit-opacity-target: 0;
Auto Grid Gap	Variable	–exit-float-distance	–exit-float-distance: 40px;
Auto Grid Gap	Variable	–exit-sink-distance	–exit-sink-distance: 40px;
Auto Grid Gap	Variable	–exit-slide-distance	–exit-slide-distance: 40px;
Auto Grid Gap	Variable	–exit-scale-amount	–exit-scale-amount: 0.9;
Auto Grid Gap	Variable	–exit-scale-grow	–exit-scale-grow: 1.1;
Auto Grid Gap	Variable	–exit-blur-amount	–exit-blur-amount: 8px;
Auto Grid Gap	Variable	–exit-stagger-interval	–exit-stagger-interval: 5%;
Auto Grid Gap	Animation	@keyframes exit-animate	from { opacity: 1; transform: translateY(0) translateX(0) scale(1); filter: blur(0); } to { opacity: var(–exit-opacity, 1); transform: translateY(var(–exit-block, 0)) translateX(var(–exit-inline, 0)) scale(var(–exit-scale, 1)); filter: blur(var(–exit-blur, 0)); }
Auto Grid Gap	Attribute Style	[class=”on-exit–“]:not([class=”on-exit–delay”]):not([class*=”on-exit-all”])	animation-name: exit-animate; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: var(–exit-range-start, exit 0%) var(–exit-range-end, exit 80%);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit–fade	–exit-opacity: var(–exit-opacity-target, 0);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit–float	–exit-block: calc(var(–exit-float-distance, 40px) * -1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit–sink	–exit-block: var(–exit-sink-distance, 40px);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit–slide-left	–exit-inline: calc(var(–exit-slide-distance, 40px) * -1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit–slide-right	–exit-inline: var(–exit-slide-distance, 40px);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit–grow	–exit-scale: var(–exit-scale-grow, 1.1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit–shrink	–exit-scale: var(–exit-scale-amount, 0.9);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit–blur	–exit-blur: var(–exit-blur-amount, 8px);	@supports (animation-timeline: view())
Auto Grid Gap	Attribute Style	[class=”on-exit-all–“] >	animation-name: exit-animate; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: var(–exit-range-start, exit 0%) var(–exit-range-end, exit 80%);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit-all–fade > *	–exit-opacity: var(–exit-opacity-target, 0);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit-all–float > *	–exit-block: calc(var(–exit-float-distance, 40px) * -1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit-all–sink > *	–exit-block: var(–exit-sink-distance, 40px);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit-all–slide-left > *	–exit-inline: calc(var(–exit-slide-distance, 40px) * -1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit-all–slide-right > *	–exit-inline: var(–exit-slide-distance, 40px);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit-all–grow > *	–exit-scale: var(–exit-scale-grow, 1.1);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit-all–shrink > *	–exit-scale: var(–exit-scale-amount, 0.9);	@supports (animation-timeline: view())
Auto Grid Gap	Class	.on-exit-all–blur > *	–exit-blur: var(–exit-blur-amount, 8px);	@supports (animation-timeline: view())
Auto Grid Gap	Attribute Style	[class=”on-exit-all–“].on-exit–stagger >	animation-delay: calc(sibling-index() * var(–exit-stagger-interval, 5%));	@supports (animation-timeline: view())
Auto Grid Gap	Attribute Style	[class=”on-exit–“], [class=”on-exit-all–“] > *	opacity: 1; transform: none; filter: none;	@supports not (animation-timeline: view())
Auto Grid Gap	Variable	–visible-duration	–visible-duration: 0.6s;
Auto Grid Gap	Variable	–visible-timing	–visible-timing: var(–ease-smooth);
Auto Grid Gap	Variable	–visible-delay	–visible-delay: 0s;
Auto Grid Gap	Variable	–visible-threshold	–visible-threshold: 0.2;
Auto Grid Gap	Variable	–visible-opacity-start	–visible-opacity-start: 0;
Auto Grid Gap	Variable	–visible-float-distance	–visible-float-distance: 40px;
Auto Grid Gap	Variable	–visible-sink-distance	–visible-sink-distance: 40px;
Auto Grid Gap	Variable	–visible-slide-distance	–visible-slide-distance: 40px;
Auto Grid Gap	Variable	–visible-scale-start	–visible-scale-start: 0.9;
Auto Grid Gap	Variable	–visible-scale-shrink	–visible-scale-shrink: 1.1;
Auto Grid Gap	Variable	–visible-blur-amount	–visible-blur-amount: 8px;
Auto Grid Gap	Variable	–visible-stagger-interval	–visible-stagger-interval: 0.1s;
Auto Grid Gap	Attribute Style	[class=”on-visible–“]:not([class=”on-visible-all”])	transition-property: opacity, translate, scale, filter; transition-duration: var(–visible-duration, 0.6s); transition-timing-function: var(–visible-timing, cubic-bezier(0.4, 0, 0.2, 1)); transition-delay: var(–visible-delay, 0s);
Auto Grid Gap	Class	.on-visible–fade	opacity: var(–visible-opacity-start, 0);
Auto Grid Gap	Class	.on-visible–fade.acss-visible	opacity: 1;
Auto Grid Gap	Class	.on-visible–float	translate: 0 var(–visible-float-distance, 40px);
Auto Grid Gap	Class	.on-visible–float.acss-visible	translate: 0 0;
Auto Grid Gap	Class	.on-visible–sink	translate: 0 calc(var(–visible-sink-distance, 40px) * -1);
Auto Grid Gap	Class	.on-visible–sink.acss-visible	translate: 0 0;
Auto Grid Gap	Class	.on-visible–slide-left	translate: var(–visible-slide-distance, 40px) 0;
Auto Grid Gap	Class	.on-visible–slide-left.acss-visible	translate: 0 0;
Auto Grid Gap	Class	.on-visible–slide-right	translate: calc(var(–visible-slide-distance, 40px) * -1) 0;
Auto Grid Gap	Class	.on-visible–slide-right.acss-visible	translate: 0 0;
Auto Grid Gap	Class	.on-visible–grow	scale: var(–visible-scale-start, 0.9);
Auto Grid Gap	Class	.on-visible–grow.acss-visible	scale: 1;
Auto Grid Gap	Class	.on-visible–shrink	scale: var(–visible-scale-shrink, 1.1);
Auto Grid Gap	Class	.on-visible–shrink.acss-visible	scale: 1;
Auto Grid Gap	Class	.on-visible–blur	filter: blur(var(–visible-blur-amount, 8px));
Auto Grid Gap	Class	.on-visible–blur.acss-visible	filter: blur(0);
Auto Grid Gap	Attribute Style	[class=”on-visible-all–“] >	transition-property: opacity, translate, scale, filter; transition-duration: var(–visible-duration, 0.6s); transition-timing-function: var(–visible-timing, cubic-bezier(0.4, 0, 0.2, 1)); transition-delay: var(–visible-delay, 0s);
Auto Grid Gap	Class	.on-visible-all–fade > *	opacity: var(–visible-opacity-start, 0);
Auto Grid Gap	Class	.on-visible-all–fade.acss-visible > *	opacity: 1;
Auto Grid Gap	Class	.on-visible-all–float > *	translate: 0 var(–visible-float-distance, 40px);
Auto Grid Gap	Class	.on-visible-all–float.acss-visible > *	translate: 0 0;
Auto Grid Gap	Class	.on-visible-all–sink > *	translate: 0 calc(var(–visible-sink-distance, 40px) * -1);
Auto Grid Gap	Class	.on-visible-all–sink.acss-visible > *	translate: 0 0;
Auto Grid Gap	Class	.on-visible-all–slide-left > *	translate: var(–visible-slide-distance, 40px) 0;
Auto Grid Gap	Class	.on-visible-all–slide-left.acss-visible > *	translate: 0 0;
Auto Grid Gap	Class	.on-visible-all–slide-right > *	translate: calc(var(–visible-slide-distance, 40px) * -1) 0;
Auto Grid Gap	Class	.on-visible-all–slide-right.acss-visible > *	translate: 0 0;
Auto Grid Gap	Class	.on-visible-all–grow > *	scale: var(–visible-scale-start, 0.9);
Auto Grid Gap	Class	.on-visible-all–grow.acss-visible > *	scale: 1;
Auto Grid Gap	Class	.on-visible-all–shrink > *	scale: var(–visible-scale-shrink, 1.1);
Auto Grid Gap	Class	.on-visible-all–shrink.acss-visible > *	scale: 1;
Auto Grid Gap	Class	.on-visible-all–blur > *	filter: blur(var(–visible-blur-amount, 8px));
Auto Grid Gap	Class	.on-visible-all–blur.acss-visible > *	filter: blur(0);
Auto Grid Gap	Attribute Style	[class=”on-visible-all–“].on-visible–stagger >	transition-delay: calc(sibling-index() * var(–visible-stagger-interval, 0.1s));
Auto Grid Gap	Attribute Style	[class=”on-enter–“], [class=”on-enter-all–“] > , [class=”on-exit–“], [class=”on-exit-all–“] >	animation: none !important; opacity: 1; transform: none; filter: none;	@media (prefers-reduced-motion: reduce)
Auto Grid Gap	Attribute Style	[class=”on-visible–“], [class=”on-visible-all–“] > *	transition: none !important; opacity: 1; translate: none; scale: none; filter: none;	@media (prefers-reduced-motion: reduce)
Auto Grid Gap	Attribute Style	[class*=”on-hover–“]	transition: none;	@media (prefers-reduced-motion: reduce)
Auto Grid Gap	Attribute Style	[class*=”on-hover–“]:hover	transform: none; translate: none; scale: none; box-shadow: initial; filter: none;	@media (prefers-reduced-motion: reduce)
Inverted Radius Framework	Attribute Style	[data-inverted-radius-1-position], [data-inverted-radius-2-position]	position: var(–inverted-radius-parent-position, absolute); background: var(–bg, var(–white)); z-index: 1; isolation: isolate; –slice-top-left: var(–radius) 0 0 0; –slice-top-right: 0 var(–radius) 0 0; –slice-bottom-right: 0 0 var(–radius) 0; –slice-bottom-left: 0 0 0 var(–radius); –position-top-left: 0 auto auto 0; –position-top-right: 0 0 auto auto; –position-bottom-left: auto auto 0 0; –position-bottom-right: auto 0 0 auto; –position-top-left-outside: 0 auto auto calc(var(–radius) * -1); –position-top-right-outside: 0 calc(var(–radius) * -1) auto auto; –position-bottom-left-outside: auto 0 0 calc(var(–radius) * -1); –position-bottom-right-outside: auto calc(var(–radius) * -1) 0 auto; –position-top-outside-left: calc(var(–radius) * -1) auto auto 0; –position-top-outside-right: calc(var(–radius) * -1) 0 auto auto; –position-bottom-outside-left: auto 0 calc(var(–radius) * -1) 0; –position-bottom-outside-right: auto 0 calc(var(–radius) * -1) auto; –position-top-outside-left-outside: calc(var(–radius) * -1) auto auto calc(var(–radius) * -1); –position-top-outside-right-outside: calc(var(–radius) * -1) calc(var(–radius) * -1) auto auto; –position-bottom-outside-left-outside: auto auto calc(var(–radius) * -1) calc(var(–radius) * -1); –position-bottom-outside-right-outside: auto calc(var(–radius) * -1) calc(var(–radius) * -1) auto; –shadow-bottom-right: var(–radius) var(–radius) 0 var(–radius) var(–bg, var(–white)); –shadow-bottom-left: calc(var(–radius) * -1) var(–radius) 0 var(–radius) var(–bg, var(–white)); –shadow-top-right: var(–radius) calc(var(–radius) * -1) 0 var(–radius) var(–bg, var(–white)); –shadow-top-left: calc(var(–radius) * -1) calc(var(–radius) * -1) 0 var(–radius) var(–bg, var(–white)); –inverted-radius-1-shadow: var(–shadow-top-left); –inverted-radius-2-shadow: var(–shadow-top-left);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”top-left”]	–inverted-radius-1-position: var(–position-top-left);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”top-right”]	–inverted-radius-1-position: var(–position-top-right);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”bottom-left”]	–inverted-radius-1-position: var(–position-bottom-left);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”bottom-right”]	–inverted-radius-1-position: var(–position-bottom-right);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”top-outside-left”]	–inverted-radius-1-position: var(–position-top-outside-left);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”top-outside-right”]	–inverted-radius-1-position: var(–position-top-outside-right);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”bottom-outside-left”]	–inverted-radius-1-position: var(–position-bottom-outside-left);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”bottom-outside-right”]	–inverted-radius-1-position: var(–position-bottom-outside-right);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”top-left-outside”]	–inverted-radius-1-position: var(–position-top-left-outside);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”top-right-outside”]	–inverted-radius-1-position: var(–position-top-right-outside);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”bottom-left-outside”]	–inverted-radius-1-position: var(–position-bottom-left-outside);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”bottom-right-outside”]	–inverted-radius-1-position: var(–position-bottom-right-outside);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”top-outside-left-outside”]	–inverted-radius-1-position: var(–position-top-outside-left-outside);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”top-outside-right-outside”]	–inverted-radius-1-position: var(–position-top-outside-right-outside);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”bottom-outside-left-outside”]	–inverted-radius-1-position: var(–position-bottom-outside-left-outside);
First corner positions	Attribute Style	[data-inverted-radius-1-position=”bottom-outside-right-outside”]	–inverted-radius-1-position: var(–position-bottom-outside-right-outside);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”top-left”]	–inverted-radius-2-position: var(–position-top-left);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”top-right”]	–inverted-radius-2-position: var(–position-top-right);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”bottom-left”]	–inverted-radius-2-position: var(–position-bottom-left);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”bottom-right”]	–inverted-radius-2-position: var(–position-bottom-right);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”top-outside-left”]	–inverted-radius-2-position: var(–position-top-outside-left);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”top-outside-right”]	–inverted-radius-2-position: var(–position-top-outside-right);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”bottom-outside-left”]	–inverted-radius-2-position: var(–position-bottom-outside-left);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”bottom-outside-right”]	–inverted-radius-2-position: var(–position-bottom-outside-right);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”top-left-outside”]	–inverted-radius-2-position: var(–position-top-left-outside);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”top-right-outside”]	–inverted-radius-2-position: var(–position-top-right-outside);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”bottom-left-outside”]	–inverted-radius-2-position: var(–position-bottom-left-outside);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”bottom-right-outside”]	–inverted-radius-2-position: var(–position-bottom-right-outside);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”top-outside-left-outside”]	–inverted-radius-2-position: var(–position-top-outside-left-outside);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”top-outside-right-outside”]	–inverted-radius-2-position: var(–position-top-outside-right-outside);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”bottom-outside-left-outside”]	–inverted-radius-2-position: var(–position-bottom-outside-left-outside);
Second corner positions	Attribute Style	[data-inverted-radius-2-position=”bottom-outside-right-outside”]	–inverted-radius-2-position: var(–position-bottom-outside-right-outside);
Corner types	Attribute Style	[data-inverted-radius-1-slice=”top-left”]	–inverted-radius-1-slice: var(–slice-top-left); –inverted-radius-1-shadow: var(–shadow-top-left);
Corner types	Attribute Style	[data-inverted-radius-1-slice=”top-right”]	–inverted-radius-1-slice: var(–slice-top-right); –inverted-radius-1-shadow: var(–shadow-top-right);
Corner types	Attribute Style	[data-inverted-radius-1-slice=”bottom-left”]	–inverted-radius-1-slice: var(–slice-bottom-left); –inverted-radius-1-shadow: var(–shadow-bottom-left);
Corner types	Attribute Style	[data-inverted-radius-1-slice=”bottom-right”]	–inverted-radius-1-slice: var(–slice-bottom-right); –inverted-radius-1-shadow: var(–shadow-bottom-right);
Corner types	Attribute Style	[data-inverted-radius-2-slice=”top-left”]	–inverted-radius-2-slice: var(–slice-top-left); –inverted-radius-2-shadow: var(–shadow-top-left);
Corner types	Attribute Style	[data-inverted-radius-2-slice=”top-right”]	–inverted-radius-2-slice: var(–slice-top-right); –inverted-radius-2-shadow: var(–shadow-top-right);
Corner types	Attribute Style	[data-inverted-radius-2-slice=”bottom-left”]	–inverted-radius-2-slice: var(–slice-bottom-left); –inverted-radius-2-shadow: var(–shadow-bottom-left);
Corner types	Attribute Style	[data-inverted-radius-2-slice=”bottom-right”]	–inverted-radius-2-slice: var(–slice-bottom-right); –inverted-radius-2-shadow: var(–shadow-bottom-right);
Pseudo-elements	Attribute Style	[data-inverted-radius-1-position]::before	content: “”; position: absolute; inset: var(–inverted-radius-1-position); border-radius: var(–inverted-radius-1-slice); box-shadow: var(–inverted-radius-1-shadow); width: var(–radius); height: var(–radius); aspect-ratio: 1; z-index: -1; background: transparent;
Pseudo-elements	Attribute Style	[data-inverted-radius-2-position]::after	content: “”; position: absolute; inset: var(–inverted-radius-2-position); border-radius: var(–inverted-radius-2-slice); box-shadow: var(–inverted-radius-2-shadow); width: var(–radius); height: var(–radius); aspect-ratio: 1; z-index: -1; background: transparent;
Pseudo-elements	Variable	–wsf-form-border-radius	–wsf-form-border-radius: 0;
Pseudo-elements	Variable	–wsf-form-border-width	–wsf-form-border-width: 0px;
Pseudo-elements	Variable	–wsf-form-border-style	–wsf-form-border-style: solid;
Pseudo-elements	Variable	–wsf-form-grid-gap	–wsf-form-grid-gap: 20px;
Pseudo-elements	Variable	–wsf-form-padding-horizontal	–wsf-form-padding-horizontal: 0px;
Pseudo-elements	Variable	–wsf-form-padding-vertical	–wsf-form-padding-vertical: 0px;
Pseudo-elements	Variable	–wsf-form-transition-enabled	–wsf-form-transition-enabled: 1;
Pseudo-elements	Variable	–wsf-form-transition-speed	–wsf-form-transition-speed: var(–transition-duration);
Pseudo-elements	Variable	–wsf-form-transition-timing-function	–wsf-form-transition-timing-function: var(–transition-timing);
Pseudo-elements	Variable	–wsf-form-font-family	–wsf-form-font-family: var(–text-font-family);
Pseudo-elements	Variable	–wsf-form-font-size	–wsf-form-font-size: var(–text-m);
Pseudo-elements	Variable	–wsf-form-font-size-small	–wsf-form-font-size-small: var(–text-s);
Pseudo-elements	Variable	–wsf-form-font-size-large	–wsf-form-font-size-large: var(–text-l);
Pseudo-elements	Variable	–wsf-form-font-style	–wsf-form-font-style: normal;
Pseudo-elements	Variable	–wsf-form-font-weight	–wsf-form-font-weight: normal;
Pseudo-elements	Variable	–wsf-form-letter-spacing	–wsf-form-letter-spacing: var(–text-letter-spacing);
Pseudo-elements	Variable	–wsf-form-line-height	–wsf-form-line-height: var(–text-line-height);
Pseudo-elements	Variable	–wsf-form-text-decoration	–wsf-form-text-decoration: none;
Pseudo-elements	Variable	–wsf-form-text-transform	–wsf-form-text-transform: none;
Pseudo-elements	Variable	–wsf-group-li-border-radius	–wsf-group-li-border-radius: var(–btn-border-radius);
Pseudo-elements	Variable	–wsf-group-ul-border-width	–wsf-group-ul-border-width: 1px;
Pseudo-elements	Variable	–wsf-group-ul-border-style	–wsf-group-ul-border-style: solid;
Pseudo-elements	Variable	–wsf-group-li-border-width	–wsf-group-li-border-width: 1px;
Pseudo-elements	Variable	–wsf-group-li-border-style	–wsf-group-li-border-style: solid;
Pseudo-elements	Variable	–wsf-group-li-gap	–wsf-group-li-gap: 0px;
Pseudo-elements	Variable	–wsf-group-li-padding-horizontal	–wsf-group-li-padding-horizontal: 1.5em;
Pseudo-elements	Variable	–wsf-group-li-padding-vertical	–wsf-group-li-padding-vertical: 0.75em;
Pseudo-elements	Variable	–wsf-group-li-font-size	–wsf-group-li-font-size: var(–f-form-font-size);
Pseudo-elements	Variable	–wsf-group-li-font-weight	–wsf-group-li-font-weight: ;
Pseudo-elements	Variable	–wsf-group-li-font-style	–wsf-group-li-font-style: inherit;
Pseudo-elements	Variable	–wsf-group-li-letter-spacing	–wsf-group-li-letter-spacing: 0;
Pseudo-elements	Variable	–wsf-group-li-line-height	–wsf-group-li-line-height: var(–f-form-line-height);
Pseudo-elements	Variable	–wsf-group-li-text-decoration	–wsf-group-li-text-decoration: inherit;
Pseudo-elements	Variable	–wsf-group-li-text-transform	–wsf-group-li-text-transform: inherit;
Pseudo-elements	Variable	–wsf-group-li-steps-size	–wsf-group-li-steps-size: var(–space-l);
Pseudo-elements	Variable	–wsf-group-li-steps-font-size	–wsf-group-li-steps-font-size: var(–f-form-font-size);
Pseudo-elements	Variable	–wsf-group-li-steps-font-weight	–wsf-group-li-steps-font-weight: ;
Pseudo-elements	Variable	–wsf-group-li-steps-font-style	–wsf-group-li-steps-font-style: normal;
Pseudo-elements	Variable	–wsf-group-li-steps-text-decoration	–wsf-group-li-steps-text-decoration: none;
Pseudo-elements	Variable	–wsf-section-legend-font-size	–wsf-section-legend-font-size: var(–f-form-font-size);
Pseudo-elements	Variable	–wsf-section-legend-font-style	–wsf-section-legend-font-style: normal;
Pseudo-elements	Variable	–wsf-section-legend-font-weight	–wsf-section-legend-font-weight: 600;
Pseudo-elements	Variable	–wsf-section-legend-line-height	–wsf-section-legend-line-height: var(–f-form-line-height);
Pseudo-elements	Variable	–wsf-section-legend-text-decoration	–wsf-section-legend-text-decoration: none;
Pseudo-elements	Variable	–wsf-section-legend-text-transform	–wsf-section-legend-text-transform: none;
Pseudo-elements	Variable	–wsf-section-legend-gap	–wsf-section-legend-gap: 1rem;
Pseudo-elements	Variable	–wsf-section-icon-size	–wsf-section-icon-size: var(–text-m);
Pseudo-elements	Variable	–wsf-field-height	–wsf-field-height: calc((var(–wsf-field-padding-vertical) * 2) + (var(–wsf-field-border-width) * 2) + 1lh);
Pseudo-elements	Variable	–wsf-field-border-radius	–wsf-field-border-radius: var(–radius);
Pseudo-elements	Variable	–wsf-field-border-width	–wsf-field-border-width: 1px;
Pseudo-elements	Variable	–wsf-field-border-style	–wsf-field-border-style: solid;
Pseudo-elements	Variable	–wsf-field-box-shadow-width-focus	–wsf-field-box-shadow-width-focus: 0px;
Pseudo-elements	Variable	–wsf-field-fieldset-legend-font-size	–wsf-field-fieldset-legend-font-size: var(–f-form-font-size);
Pseudo-elements	Variable	–wsf-field-fieldset-legend-font-style	–wsf-field-fieldset-legend-font-style: normal;
Pseudo-elements	Variable	–wsf-field-fieldset-legend-font-weight	–wsf-field-fieldset-legend-font-weight: 400;
Pseudo-elements	Variable	–wsf-field-fieldset-legend-text-decoration	–wsf-field-fieldset-legend-text-decoration: none;
Pseudo-elements	Variable	–wsf-field-fieldset-legend-text-transform	–wsf-field-fieldset-legend-text-transform: none;
Pseudo-elements	Variable	–wsf-field-fieldset-legend-gap	–wsf-field-fieldset-legend-gap: 0.5em;
Pseudo-elements	Variable	–wsf-field-help-font-size	–wsf-field-help-font-size: var(–text-s);
Pseudo-elements	Variable	–wsf-field-help-font-style	–wsf-field-help-font-style: normal;
Pseudo-elements	Variable	–wsf-field-help-font-weight	–wsf-field-help-font-weight: 400;
Pseudo-elements	Variable	–wsf-field-help-line-height	–wsf-field-help-line-height: 1.5;
Pseudo-elements	Variable	–wsf-field-help-text-decoration	–wsf-field-help-text-decoration: none;
Pseudo-elements	Variable	–wsf-field-help-text-transform	–wsf-field-help-text-transform: none;
Pseudo-elements	Variable	–wsf-field-help-gap	–wsf-field-help-gap: 0.5em;
Pseudo-elements	Variable	–wsf-field-invalid-feedback-font-size	–wsf-field-invalid-feedback-font-size: var(–text-s);
Pseudo-elements	Variable	–wsf-field-invalid-feedback-font-style	–wsf-field-invalid-feedback-font-style: normal;
Pseudo-elements	Variable	–wsf-field-invalid-feedback-font-weight	–wsf-field-invalid-feedback-font-weight: 400;
Pseudo-elements	Variable	–wsf-field-invalid-feedback-letter-spacing	–wsf-field-invalid-feedback-letter-spacing: var(–text-letter-spacing);
Pseudo-elements	Variable	–wsf-field-invalid-feedback-line-height	–wsf-field-invalid-feedback-line-height: var(–text-line-height);
Pseudo-elements	Variable	–wsf-field-invalid-feedback-text-decoration	–wsf-field-invalid-feedback-text-decoration: none;
Pseudo-elements	Variable	–wsf-field-invalid-feedback-text-transform	–wsf-field-invalid-feedback-text-transform: none;
Pseudo-elements	Variable	–wsf-field-invalid-feedback-gap	–wsf-field-invalid-feedback-gap: 0.5em;
Pseudo-elements	Variable	–wsf-field-label-font-family	–wsf-field-label-font-family: var(–f-form-font-family);
Pseudo-elements	Variable	–wsf-field-label-font-size	–wsf-field-label-font-size: var(–f-form-font-size);
Pseudo-elements	Variable	–wsf-field-label-font-style	–wsf-field-label-font-style: normal;
Pseudo-elements	Variable	–wsf-field-label-font-weight	–wsf-field-label-font-weight: 400;
Pseudo-elements	Variable	–wsf-field-label-letter-spacing	–wsf-field-label-letter-spacing: var(–text-letter-spacing);
Pseudo-elements	Variable	–wsf-field-label-line-height	–wsf-field-label-line-height: var(–text-line-height);
Pseudo-elements	Variable	–wsf-field-label-text-decoration	–wsf-field-label-text-decoration: none;
Pseudo-elements	Variable	–wsf-field-label-text-transform	–wsf-field-label-text-transform: none;
Pseudo-elements	Variable	–wsf-field-label-gap	–wsf-field-label-gap: 0.5em;
Pseudo-elements	Variable	–wsf-field-label-inside-offset	–wsf-field-label-inside-offset: -20px;
Pseudo-elements	Variable	–wsf-field-label-inside-scale	–wsf-field-label-inside-scale: 0.9;
Pseudo-elements	Variable	–wsf-field-padding-horizontal	–wsf-field-padding-horizontal: 10px;
Pseudo-elements	Variable	–wsf-field-padding-vertical	–wsf-field-padding-vertical: 8.5px;
Pseudo-elements	Variable	–wsf-field-prefix-suffix-font-size	–wsf-field-prefix-suffix-font-size: var(–text-s);
Pseudo-elements	Variable	–wsf-field-prefix-suffix-font-style	–wsf-field-prefix-suffix-font-style: normal;
Pseudo-elements	Variable	–wsf-field-prefix-suffix-font-weight	–wsf-field-prefix-suffix-font-weight: 400;
Pseudo-elements	Variable	–wsf-field-prefix-suffix-letter-spacing	–wsf-field-prefix-suffix-letter-spacing: var(–text-letter-spacing);
Pseudo-elements	Variable	–wsf-field-prefix-suffix-line-height	–wsf-field-prefix-suffix-line-height: var(–text-line-height);
Pseudo-elements	Variable	–wsf-field-prefix-suffix-text-decoration	–wsf-field-prefix-suffix-text-decoration: none;
Pseudo-elements	Variable	–wsf-field-prefix-suffix-text-transform	–wsf-field-prefix-suffix-text-transform: none;
Pseudo-elements	Variable	–wsf-field-tooltip-font-size	–wsf-field-tooltip-font-size: var(–text-xs);
Pseudo-elements	Variable	–wsf-field-tooltip-font-weight	–wsf-field-tooltip-font-weight: 400;
Pseudo-elements	Variable	–wsf-field-tooltip-line-height	–wsf-field-tooltip-line-height: var(–text-line-height);
Pseudo-elements	Variable	–wsf-field-tooltip-border-radius	–wsf-field-tooltip-border-radius: var(–radius-s);
Pseudo-elements	Variable	–wsf-field-tooltip-gap	–wsf-field-tooltip-gap: 5px;
Pseudo-elements	Variable	–wsf-field-font-size	–wsf-field-font-size: var(–text-m);
Pseudo-elements	Variable	–wsf-field-font-style	–wsf-field-font-style: normal;
Pseudo-elements	Variable	–wsf-field-font-weight	–wsf-field-font-weight: 400;
Pseudo-elements	Variable	–wsf-field-letter-spacing	–wsf-field-letter-spacing: var(–text-letter-spacing);
Pseudo-elements	Variable	–wsf-field-line-height	–wsf-field-line-height: var(–text-line-height);
Pseudo-elements	Variable	–wsf-field-text-decoration	–wsf-field-text-decoration: none;
Pseudo-elements	Variable	–wsf-field-text-transform	–wsf-field-text-transform: none;
Pseudo-elements	Variable	–wsf-field-checkbox-border-radius	–wsf-field-checkbox-border-radius: 4px;
Pseudo-elements	Variable	–wsf-field-checkbox-gap-horizontal	–wsf-field-checkbox-gap-horizontal: 6px;
Pseudo-elements	Variable	–wsf-field-checkbox-gap-vertical	–wsf-field-checkbox-gap-vertical: 10px;
Pseudo-elements	Variable	–wsf-field-checkbox-size	–wsf-field-checkbox-size: 1lh;
Pseudo-elements	Variable	–wsf-field-radio-gap-horizontal	–wsf-field-radio-gap-horizontal: 6px;
Pseudo-elements	Variable	–wsf-field-radio-gap-vertical	–wsf-field-radio-gap-vertical: 10px;
Pseudo-elements	Variable	–wsf-field-radio-size	–wsf-field-radio-size: 1lh;
Pseudo-elements	Variable	–wsf-field-datetime-calendar-border-style	–wsf-field-datetime-calendar-border-style: solid;
Pseudo-elements	Variable	–wsf-field-datetime-calendar-border-width	–wsf-field-datetime-calendar-border-width: 1px;
Pseudo-elements	Variable	–wsf-field-datetime-calendar-font-size	–wsf-field-datetime-calendar-font-size: var(–text-s);
Pseudo-elements	Variable	–wsf-field-datetime-calendar-font-style	–wsf-field-datetime-calendar-font-style: normal;
Pseudo-elements	Variable	–wsf-field-datetime-calendar-font-weight	–wsf-field-datetime-calendar-font-weight: 400;
Pseudo-elements	Variable	–wsf-field-datetime-calendar-letter-spacing	–wsf-field-datetime-calendar-letter-spacing: var(–text-letter-spacing);
Pseudo-elements	Variable	–wsf-field-datetime-calendar-line-height	–wsf-field-datetime-calendar-line-height: var(–text-line-height);
Pseudo-elements	Variable	–wsf-field-datetime-calendar-text-decoration	–wsf-field-datetime-calendar-text-decoration: none;
Pseudo-elements	Variable	–wsf-field-datetime-calendar-text-transform	–wsf-field-datetime-calendar-text-transform: none;
Pseudo-elements	Variable	–wsf-field-datetime-padding-vertical	–wsf-field-datetime-padding-vertical: 6px;
Pseudo-elements	Variable	–wsf-field-datetime-padding-horizontal	–wsf-field-datetime-padding-horizontal: 8px;
Pseudo-elements	Variable	–wsf-field-file-dropzonejs-border-style	–wsf-field-file-dropzonejs-border-style: solid;
Pseudo-elements	Variable	–wsf-field-file-dropzonejs-border-width	–wsf-field-file-dropzonejs-border-width: 1px;
Pseudo-elements	Variable	–wsf-field-file-dropzonejs-border-radius	–wsf-field-file-dropzonejs-border-radius: var(–radius);
Pseudo-elements	Variable	–wsf-field-file-dropzonejs-padding-inline	–wsf-field-file-dropzonejs-padding-inline: var(–wsf-form-grid-gap);
Pseudo-elements	Variable	–wsf-field-file-dropzonejs-padding-block	–wsf-field-file-dropzonejs-padding-block: var(–wsf-form-grid-gap);
Pseudo-elements	Variable	–wsf-field-file-dropzonejs-progress-radius	–wsf-field-file-dropzonejs-progress-radius: var(–radius);
Pseudo-elements	Variable	–wsf-field-file-dropzonejs-progress-gap	–wsf-field-file-dropzonejs-progress-gap: 5px;
Pseudo-elements	Variable	–wsf-field-file-dropzonejs-progress-height	–wsf-field-file-dropzonejs-progress-height: 10px;
Pseudo-elements	Variable	–wsf-field-range-track-border-radius	–wsf-field-range-track-border-radius: 50px;
Pseudo-elements	Variable	–wsf-field-range-tickmark-label-font-size	–wsf-field-range-tickmark-label-font-size: var(–text-s);
Pseudo-elements	Variable	–wsf-field-range-tickmark-label-font-style	–wsf-field-range-tickmark-label-font-style: normal;
Pseudo-elements	Variable	–wsf-field-range-tickmark-label-font-weight	–wsf-field-range-tickmark-label-font-weight: 400;
Pseudo-elements	Variable	–wsf-field-range-tickmark-label-letter-spacing	–wsf-field-range-tickmark-label-letter-spacing: var(–text-letter-spacing);
Pseudo-elements	Variable	–wsf-field-range-tickmark-label-line-height	–wsf-field-range-tickmark-label-line-height: var(–text-line-height);
Pseudo-elements	Variable	–wsf-field-range-tickmark-label-text-decoration	–wsf-field-range-tickmark-label-text-decoration: none;
Pseudo-elements	Variable	–wsf-field-range-tickmark-label-text-transform	–wsf-field-range-tickmark-label-text-transform: none;
Pseudo-elements	Variable	–wsf-field-select-arrow-width	–wsf-field-select-arrow-width: 12px;
Pseudo-elements	Variable	–wsf-field-select-arrow-height	–wsf-field-select-arrow-height: 6px;
Pseudo-elements	Variable	–wsf-field-texteditor-font-size	–wsf-field-texteditor-font-size: var(–text-s);
Pseudo-elements	Variable	–wsf-field-texteditor-font-style	–wsf-field-texteditor-font-style: normal;
Pseudo-elements	Variable	–wsf-field-texteditor-font-weight	–wsf-field-texteditor-font-weight: 400;
Pseudo-elements	Variable	–wsf-field-texteditor-letter-spacing	–wsf-field-texteditor-letter-spacing: var(–text-letter-spacing);
Pseudo-elements	Variable	–wsf-field-texteditor-line-height	–wsf-field-texteditor-line-height: var(–text-line-height);
Pseudo-elements	Variable	–wsf-field-texteditor-text-decoration	–wsf-field-texteditor-text-decoration: none;
Pseudo-elements	Variable	–wsf-field-texteditor-text-transform	–wsf-field-texteditor-text-transform: none;
Pseudo-elements	Variable	–wsf-field-texteditor-p-margin-bottom	–wsf-field-texteditor-p-margin-bottom: 1em;
Pseudo-elements	Variable	–wsf-form-color-background	–wsf-form-color-background: transparent;
Pseudo-elements	Variable	–wsf-form-color-base	–wsf-form-color-base: var(–text-dark);
Pseudo-elements	Variable	–wsf-form-color-base-contrast	–wsf-form-color-base-contrast: var(–text-light);
Pseudo-elements	Variable	–wsf-form-color-accent	–wsf-form-color-accent: var(–primary);
Pseudo-elements	Variable	–wsf-form-color-neutral	–wsf-form-color-neutral: var(–neutral-light);
Pseudo-elements	Variable	–wsf-form-color-primary	–wsf-form-color-primary: var(–primary);
Pseudo-elements	Variable	–wsf-form-color-secondary	–wsf-form-color-secondary: var(–secondary);
Pseudo-elements	Variable	–wsf-form-color-success	–wsf-form-color-success: var(–success, #2e8540);
Pseudo-elements	Variable	–wsf-form-color-danger	–wsf-form-color-danger: var(–danger, #bb0000);
Pseudo-elements	Variable	–wsf-form-color-warning	–wsf-form-color-warning: var(–warning, #fdb81e);
Pseudo-elements	Variable	–wsf-form-color-info	–wsf-form-color-info: var(–info, #02bfe7);
Pseudo-elements	Variable	–wsf-form-border-color	–wsf-form-border-color: transparent;
Pseudo-elements	Variable	–wsf-group-li-color-background	–wsf-group-li-color-background: transparent;
Pseudo-elements	Variable	–wsf-group-li-color-background-active	–wsf-group-li-color-background-active: var(–text-light);
Pseudo-elements	Variable	–wsf-group-li-color-background-focus	–wsf-group-li-color-background-focus: var(–text-light);
Pseudo-elements	Variable	–wsf-group-li-color-background-disabled	–wsf-group-li-color-background-disabled: color-mix(in oklch, var(–neutral) 60%, transparent);
Pseudo-elements	Variable	–wsf-group-li-border-color	–wsf-group-li-border-color: var(–primary-light);
Pseudo-elements	Variable	–wsf-group-li-border-color-active	–wsf-group-li-border-color-active: var(–primary);
Pseudo-elements	Variable	–wsf-group-li-border-color-focus	–wsf-group-li-border-color-focus: var(–primary);
Pseudo-elements	Variable	–wsf-group-li-border-color-disabled	–wsf-group-li-border-color-disabled: color-mix(in oklch, var(–neutral) 60%, transparent);
Pseudo-elements	Variable	–wsf-group-ul-border-color	–wsf-group-ul-border-color: var(–neutral);
Pseudo-elements	Variable	–wsf-group-li-color	–wsf-group-li-color: var(–f-form-color-base);
Pseudo-elements	Variable	–wsf-group-li-color-active	–wsf-group-li-color-active: var(–f-form-color-base);
Pseudo-elements	Variable	–wsf-group-li-color-focus	–wsf-group-li-color-focus: var(–f-form-color-base);
Pseudo-elements	Variable	–wsf-group-li-color-disabled	–wsf-group-li-color-disabled: color-mix(in oklch, var(–neutral) 60%, transparent);
Pseudo-elements	Variable	–wsf-group-li-steps-color-background	–wsf-group-li-steps-color-background: var(–white);
Pseudo-elements	Variable	–wsf-group-li-steps-color-background-active	–wsf-group-li-steps-color-background-active: var(–primary-light);
Pseudo-elements	Variable	–wsf-group-li-steps-color-background-complete	–wsf-group-li-steps-color-background-complete: var(–primary);
Pseudo-elements	Variable	–wsf-group-li-steps-border-color	–wsf-group-li-steps-border-color: var(–primary-light);
Pseudo-elements	Variable	–wsf-group-li-steps-border-color-active	–wsf-group-li-steps-border-color-active: var(–primary);
Pseudo-elements	Variable	–wsf-group-li-steps-border-color-complete	–wsf-group-li-steps-border-color-complete: var(–primary);
Pseudo-elements	Variable	–wsf-group-li-steps-color	–wsf-group-li-steps-color: var(–f-form-color-base);
Pseudo-elements	Variable	–wsf-group-li-steps-color-active	–wsf-group-li-steps-color-active: var(–f-form-color-base);
Pseudo-elements	Variable	–wsf-group-li-steps-color-complete	–wsf-group-li-steps-color-complete: var(–text-light);
Pseudo-elements	Variable	–wsf-section-color-background	–wsf-section-color-background: transparent;
Pseudo-elements	Variable	–wsf-section-legend-color-background	–wsf-section-legend-color-background: transparent;
Pseudo-elements	Variable	–wsf-section-legend-color	–wsf-section-legend-color: var(–f-form-color-base);
Pseudo-elements	Variable	–wsf-field-fieldset-legend-color-background	–wsf-field-fieldset-legend-color-background: transparent;
Pseudo-elements	Variable	–wsf-field-fieldset-legend-color	–wsf-field-fieldset-legend-color: var(–f-form-color-base);
Pseudo-elements	Variable	–wsf-field-label-color	–wsf-field-label-color: var(–neutral-dark);
Pseudo-elements	Variable	–wsf-field-label-color-background	–wsf-field-label-color-background: ;
Pseudo-elements	Variable	–wsf-field-help-color	–wsf-field-help-color: var(–f-form-color-base);
Pseudo-elements	Variable	–wsf-field-help-color-background	–wsf-field-help-color-background: transparent;
Pseudo-elements	Variable	–wsf-field-color-background	–wsf-field-color-background: var(–white);
Pseudo-elements	Variable	–wsf-field-color-background-hover	–wsf-field-color-background-hover: var(–f-field-color-background);
Pseudo-elements	Variable	–wsf-field-color-background-focus	–wsf-field-color-background-focus: var(–f-field-color-background);
Pseudo-elements	Variable	–wsf-field-color-background-disabled	–wsf-field-color-background-disabled: color-mix(in oklch, var(–neutral) 80%, transparent);
Pseudo-elements	Variable	–wsf-field-color-background-invalid	–wsf-field-color-background-invalid: var(–f-field-color-background);
Pseudo-elements	Variable	–wsf-field-border-color	–wsf-field-border-color: var(–border-color-dark);
Pseudo-elements	Variable	–wsf-field-border-color-hover	–wsf-field-border-color-hover: var(–border-color-dark);
Pseudo-elements	Variable	–wsf-field-border-color-focus	–wsf-field-border-color-focus: var(–primary);
Pseudo-elements	Variable	–wsf-field-border-color-disabled	–wsf-field-border-color-disabled: color-mix(in oklch, var(–neutral) 60%, transparent);
Pseudo-elements	Variable	–wsf-field-border-color-invalid	–wsf-field-border-color-invalid: var(–danger);
Pseudo-elements	Variable	–wsf-field-box-shadow-color-focus	–wsf-field-box-shadow-color-focus: var(–primary);
Pseudo-elements	Variable	–wsf-field-color	–wsf-field-color: var(–f-form-color-base);
Pseudo-elements	Variable	–wsf-field-color-hover	–wsf-field-color-hover: var(–f-field-color);
Pseudo-elements	Variable	–wsf-field-color-focus	–wsf-field-color-focus: var(–f-field-color);
Pseudo-elements	Variable	–wsf-field-color-disabled	–wsf-field-color-disabled: color-mix(in oklch, var(–neutral) 80%, transparent);
Pseudo-elements	Variable	–wsf-field-color-invalid	–wsf-field-color-invalid: var(–danger);
Pseudo-elements	Variable	–wsf-field-color-placeholder	–wsf-field-color-placeholder: var(–neutral-light);
Pseudo-elements	Variable	–wsf-field-invalid-feedback-color	–wsf-field-invalid-feedback-color: var(–danger);
Pseudo-elements	Variable	–wsf-field-invalid-feedback-color-background	–wsf-field-invalid-feedback-color-background: transparent;
Pseudo-elements	Variable	–wsf-field-prefix-suffix-color	–wsf-field-prefix-suffix-color: var(–f-form-color-base);
Pseudo-elements	Variable	–wsf-field-prefix-suffix-color-background	–wsf-field-prefix-suffix-color-background: var(–neutral-semi-light);
Pseudo-elements	Variable	–wsf-field-checkbox-color-background	–wsf-field-checkbox-color-background: var(–white);
Pseudo-elements	Variable	–wsf-field-checkbox-checked-color-background	–wsf-field-checkbox-checked-color-background: var(–primary);
Pseudo-elements	Variable	–wsf-field-checkbox-checkmark-color	–wsf-field-checkbox-checkmark-color: var(–white);
Pseudo-elements	Variable	–wsf-field-checkbox-button-color-background	–wsf-field-checkbox-button-color-background: var(–neutral-light);
Pseudo-elements	Variable	–wsf-field-checkbox-button-color	–wsf-field-checkbox-button-color: var(–neutral);
Pseudo-elements	Variable	–wsf-field-checkbox-checked-button-color-background	–wsf-field-checkbox-checked-button-color-background: var(–primary);
Pseudo-elements	Variable	–wsf-field-checkbox-checked-button-color	–wsf-field-checkbox-checked-button-color: var(–white);
Pseudo-elements	Variable	–wsf-field-checkbox-switch-color	–wsf-field-checkbox-switch-color: var(–neutral-light);
Pseudo-elements	Variable	–wsf-field-checkbox-checked-switch-color-background	–wsf-field-checkbox-checked-switch-color-background: var(–primary);
Pseudo-elements	Variable	–wsf-field-checkbox-checked-switch-color	–wsf-field-checkbox-checked-switch-color: var(–white);
Pseudo-elements	Variable	–wsf-field-radio-color-background	–wsf-field-radio-color-background: var(–white);
Pseudo-elements	Variable	–wsf-field-radio-checked-color	–wsf-field-radio-checked-color: var(–primary);
Pseudo-elements	Variable	–wsf-field-radio-button-color-background	–wsf-field-radio-button-color-background: var(–neutral-light);
Pseudo-elements	Variable	–wsf-field-radio-button-color	–wsf-field-radio-button-color: var(–neutral);
Pseudo-elements	Variable	–wsf-field-radio-checked-button-color-background	–wsf-field-radio-checked-button-color-background: var(–primary);
Pseudo-elements	Variable	–wsf-field-radio-checked-button-color	–wsf-field-radio-checked-button-color: var(–white);
Pseudo-elements	Variable	–wsf-field-radio-switch-color	–wsf-field-radio-switch-color: var(–neutral-light);
Pseudo-elements	Variable	–wsf-field-radio-checked-switch-color-background	–wsf-field-radio-checked-switch-color-background: var(–primary);
Pseudo-elements	Variable	–wsf-field-radio-checked-switch-color	–wsf-field-radio-checked-switch-color: var(–white);
Pseudo-elements	Variable	–wsf-field-select-arrow-color	–wsf-field-select-arrow-color: var(–neutral);
Pseudo-elements	Variable	–wsf-field-select-select2-choice-color-background	–wsf-field-select-select2-choice-color-background: var(–neutral-light);
Pseudo-elements	Variable	–wsf-field-select-select2-choice-color	–wsf-field-select-select2-choice-color: var(–neutral);
Pseudo-elements	Variable	–wsf-field-select-select2-choice-color-remove	–wsf-field-select-select2-choice-color-remove: var(–neutral);
Pseudo-elements	Variable	–wsf-field-select-select2-result-color-background	–wsf-field-select-select2-result-color-background: var(–neutral-light);
Pseudo-elements	Variable	–wsf-field-select-select2-result-color-background-selected	–wsf-field-select-select2-result-color-background-selected: var(–primary);
Pseudo-elements	Variable	–wsf-field-select-select2-result-color-background-highlighted	–wsf-field-select-select2-result-color-background-highlighted: var(–primary);
Pseudo-elements	Variable	–wsf-field-select-select2-result-color	–wsf-field-select-select2-result-color: var(–neutral);
Pseudo-elements	Variable	–wsf-field-select-select2-result-color-selected	–wsf-field-select-select2-result-color-selected: var(–white);
Pseudo-elements	Variable	–wsf-field-select-select2-result-color-highlighted	–wsf-field-select-select2-result-color-highlighted: var(–white);
Pseudo-elements	Variable	–wsf-field-progress-color-background	–wsf-field-progress-color-background: var(–neutral-ultra-light);
Pseudo-elements	Variable	–wsf-field-progress-color-background-bar	–wsf-field-progress-color-background-bar: var(–primary-light);
Pseudo-elements	Variable	–wsf-field-progress-color-background-complete	–wsf-field-progress-color-background-complete: var(–primary);
Pseudo-elements	Variable	–wsf-field-range-track-color	–wsf-field-range-track-color: var(–neutral-ultra-light);
Pseudo-elements	Variable	–wsf-field-range-track-lower-color	–wsf-field-range-track-lower-color: var(–neutral-light);
Pseudo-elements	Variable	–wsf-field-range-track-upper-color	–wsf-field-range-track-upper-color: var(–neutral-ultra-light);
Pseudo-elements	Variable	–wsf-field-range-thumb-color	–wsf-field-range-thumb-color: var(–primary);
Pseudo-elements	Variable	–wsf-field-range-tickmark-color	–wsf-field-range-tickmark-color: var(–neutral);
Pseudo-elements	Variable	–wsf-field-range-tickmark-label-color	–wsf-field-range-tickmark-label-color: var(–neutral);
Pseudo-elements	Class	form.wsf-form.form–light, .form–light .wsf-form	color-scheme: light;
Pseudo-elements	Class	form.wsf-form.form–dark, .form–dark .wsf-form	color-scheme: dark;
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button.wsf-button-primary[type=”submit”]	background: var(–btn-background); color: var(–btn-text-color); padding-block: var(–btn-padding-block); padding-inline: var(–btn-padding-inline); inline-size: var(–btn-width, auto); min-inline-size: var(–btn-min-width); line-height: var(–btn-line-height); font-family: var(–btn-font-family); font-size: var(–btn-font-size, var(–text-m)); font-weight: var(–btn-font-weight); font-style: var(–btn-font-style); text-transform: var(–btn-text-transform); letter-spacing: var(–btn-letter-spacing); text-decoration: var(–btn-text-decoration); border-width: var(–btn-border-width); border-style: var(–btn-border-style); border-radius: var(–btn-border-radius); border-color: var(–btn-border-color); transition: var(–btn-transition, var(–transition)); justify-content: var(–btn-justify-content, center); align-items: var(–btn-align-items, center); text-align: var(–btn-text-align, center); display: var(–btn-display, inline-flex); –btn-background: color-mix(in oklch, var(–primary), white 10%); –btn-background-hover: color-mix(in oklch, var(–primary), blue 40%); –btn-text-color: var(–white); –btn-text-color-hover: var(–primary-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button.wsf-button-primary[type=”submit”]:hover	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button.wsf-button-primary[type=”submit”]:where(:focus-visible)	outline-style: solid; outline-color: var(–focus-color); outline-width: var(–focus-width); outline-offset: var(–focus-offset);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button.wsf-button-primary[type=”submit”].wsf-button-full	inline-size: 100%;
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-tab_next”]	background: var(–btn-background); color: var(–btn-text-color); padding-block: var(–btn-padding-block); padding-inline: var(–btn-padding-inline); inline-size: var(–btn-width, auto); min-inline-size: var(–btn-min-width); line-height: var(–btn-line-height); font-family: var(–btn-font-family); font-size: var(–btn-font-size, var(–text-m)); font-weight: var(–btn-font-weight); font-style: var(–btn-font-style); text-transform: var(–btn-text-transform); letter-spacing: var(–btn-letter-spacing); text-decoration: var(–btn-text-decoration); border-width: var(–btn-border-width); border-style: var(–btn-border-style); border-radius: var(–btn-border-radius); border-color: var(–btn-border-color); transition: var(–btn-transition, var(–transition)); justify-content: var(–btn-justify-content, center); align-items: var(–btn-align-items, center); text-align: var(–btn-text-align, center); display: var(–btn-display, inline-flex); –btn-background: color-mix(in oklch, var(–primary), white 10%); –btn-background-hover: color-mix(in oklch, var(–primary), blue 40%); –btn-text-color: var(–white); –btn-text-color-hover: var(–primary-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-tab_next”]:hover	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-tab_next”]:where(:focus-visible)	outline-style: solid; outline-color: var(–focus-color); outline-width: var(–focus-width); outline-offset: var(–focus-offset);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-tab_previous”]	background: var(–btn-background); color: var(–btn-text-color); padding-block: var(–btn-padding-block); padding-inline: var(–btn-padding-inline); inline-size: var(–btn-width, auto); min-inline-size: var(–btn-min-width); line-height: var(–btn-line-height); font-family: var(–btn-font-family); font-size: var(–btn-font-size, var(–text-m)); font-weight: var(–btn-font-weight); font-style: var(–btn-font-style); text-transform: var(–btn-text-transform); letter-spacing: var(–btn-letter-spacing); text-decoration: var(–btn-text-decoration); border-width: var(–btn-border-width); border-style: var(–btn-border-style); border-radius: var(–btn-border-radius); border-color: var(–btn-border-color); transition: var(–btn-transition, var(–transition)); justify-content: var(–btn-justify-content, center); align-items: var(–btn-align-items, center); text-align: var(–btn-text-align, center); display: var(–btn-display, inline-flex); –btn-background: transparent; –btn-background-hover: var(–primary-light); –btn-text-color: var(–primary); –btn-text-color-hover: var(–primary-ultra-dark); –btn-border-width: 1px; –btn-border-color: var(–primary); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-tab_previous”]:hover	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-tab_previous”]:where(:focus-visible)	outline-style: solid; outline-color: var(–focus-color); outline-width: var(–focus-width); outline-offset: var(–focus-offset);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-save”]	background: var(–btn-background); color: var(–btn-text-color); padding-block: var(–btn-padding-block); padding-inline: var(–btn-padding-inline); inline-size: var(–btn-width, auto); min-inline-size: var(–btn-min-width); line-height: var(–btn-line-height); font-family: var(–btn-font-family); font-size: var(–btn-font-size, var(–text-m)); font-weight: var(–btn-font-weight); font-style: var(–btn-font-style); text-transform: var(–btn-text-transform); letter-spacing: var(–btn-letter-spacing); text-decoration: var(–btn-text-decoration); border-width: var(–btn-border-width); border-style: var(–btn-border-style); border-radius: var(–btn-border-radius); border-color: var(–btn-border-color); transition: var(–btn-transition, var(–transition)); justify-content: var(–btn-justify-content, center); align-items: var(–btn-align-items, center); text-align: var(–btn-text-align, center); display: var(–btn-display, inline-flex); –btn-background: color-mix(in oklch, var(–primary), white 10%); –btn-background-hover: color-mix(in oklch, var(–primary), blue 40%); –btn-text-color: var(–white); –btn-text-color-hover: var(–primary-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-save”]:hover	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-save”]:where(:focus-visible)	outline-style: solid; outline-color: var(–focus-color); outline-width: var(–focus-width); outline-offset: var(–focus-offset);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-reset”]	background: var(–btn-background); color: var(–btn-text-color); padding-block: var(–btn-padding-block); padding-inline: var(–btn-padding-inline); inline-size: var(–btn-width, auto); min-inline-size: var(–btn-min-width); line-height: var(–btn-line-height); font-family: var(–btn-font-family); font-size: var(–btn-font-size, var(–text-m)); font-weight: var(–btn-font-weight); font-style: var(–btn-font-style); text-transform: var(–btn-text-transform); letter-spacing: var(–btn-letter-spacing); text-decoration: var(–btn-text-decoration); border-width: var(–btn-border-width); border-style: var(–btn-border-style); border-radius: var(–btn-border-radius); border-color: var(–btn-border-color); transition: var(–btn-transition, var(–transition)); justify-content: var(–btn-justify-content, center); align-items: var(–btn-align-items, center); text-align: var(–btn-text-align, center); display: var(–btn-display, inline-flex); –btn-background: color-mix(in oklch, var(–primary), white 10%); –btn-background-hover: color-mix(in oklch, var(–primary), blue 40%); –btn-text-color: var(–white); –btn-text-color-hover: var(–primary-ultra-light); –btn-border-color: var(–btn-background); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-reset”]:hover	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-reset”]:where(:focus-visible)	outline-style: solid; outline-color: var(–focus-color); outline-width: var(–focus-width); outline-offset: var(–focus-offset);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-clear”]	background: var(–btn-background); color: var(–btn-text-color); padding-block: var(–btn-padding-block); padding-inline: var(–btn-padding-inline); inline-size: var(–btn-width, auto); min-inline-size: var(–btn-min-width); line-height: var(–btn-line-height); font-family: var(–btn-font-family); font-size: var(–btn-font-size, var(–text-m)); font-weight: var(–btn-font-weight); font-style: var(–btn-font-style); text-transform: var(–btn-text-transform); letter-spacing: var(–btn-letter-spacing); text-decoration: var(–btn-text-decoration); border-width: var(–btn-border-width); border-style: var(–btn-border-style); border-radius: var(–btn-border-radius); border-color: var(–btn-border-color); transition: var(–btn-transition, var(–transition)); justify-content: var(–btn-justify-content, center); align-items: var(–btn-align-items, center); text-align: var(–btn-text-align, center); display: var(–btn-display, inline-flex); –btn-background: transparent; –btn-background-hover: var(–primary-light); –btn-text-color: var(–primary); –btn-text-color-hover: var(–primary-ultra-dark); –btn-border-width: 1px; –btn-border-color: var(–primary); –btn-border-color-hover: var(–btn-background-hover); –focus-color: var(–primary-light);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-clear”]:hover	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-clear”]:where(:focus-visible)	outline-style: solid; outline-color: var(–focus-color); outline-width: var(–focus-width); outline-offset: var(–focus-offset);
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button.wsf-button-primary[type=”submit”]:hover:enabled:not(:checked):not(:focus)	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-tab_next”]:hover:enabled:not(:checked):not(:focus)	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-tab_previous”]:hover:enabled:not(:checked):not(:focus)	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-save”]:hover:enabled:not(:checked):not(:focus)	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-reset”]:hover:enabled:not(:checked):not(:focus)	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Pseudo-elements	Attribute Style	.wsf-form button.wsf-button[data-action=”wsf-clear”]:hover:enabled:not(:checked):not(:focus)	background: var(–btn-background-hover); color: var(–btn-text-color-hover); border-color: var(–btn-border-color-hover); text-decoration: var(–btn-text-decoration-hover);	@media (hover: hover) and (pointer: fine)
Is Background	Class	:has(> .is-bg)	position: relative; isolation: isolate;
Is Background	Class	:is(*, img, figure, picture).is-bg	position: var(–bg-position, absolute) !important; inset: var(–bg-inset, 0); inline-size: var(–bg-width, 100%); max-inline-size: 100%; block-size: var(–bg-height, 100%); border-radius: var(–bg-radius, 0); object-fit: var(–bg-object-fit, cover); object-position: var(–bg-object-position, center); z-index: var(–bg-z-index, -2); border-radius: var(–bg-radius, 0); pointer-events: none;
Is Background	Class	:is(*, img, figure, picture).is-bg > img	object-fit: var(–bg-object-fit, cover); object-position: var(–bg-object-position, center); inline-size: 100%; block-size: 100%; border-radius: var(–bg-radius, 0);
Is Background	Class	.content-grid > :is(*, img, figure, picture).is-bg	grid-column: full;
Content Grid	Class	:where(.content-grid)	–full: minmax(var(–gutter), 1fr); padding-inline: 0; column-gap: 0 !important; display: grid !important; grid-template-columns: [full-start] var(–full) [feature-max-start] minmax(0, var(–feature-max-width, 150px)) [feature-start] minmax(0, var(–feature-width, 75px)) [content-start] min(var(–content-width), 100% – var(–gutter) * 2) [content-end] minmax(0, var(–feature-width, 75px)) [feature-end] minmax(0, var(–feature-max-width, 150px)) [feature-max-end] var(–full) [full-end];
Content Grid	Class	:where(.content-grid) > :not(.content–feature, .content–feature-max, .content–full, .content–full-safe)	width: 100%; max-width: 100%;
Content Grid	Class	:where(.content-grid) > :where(:not(.content–feature, .content–feature-max, .content–full, .content–full-safe))	grid-column: content;
Content Grid	Class	.content–feature	grid-column: feature;
Content Grid	Class	.content–feature-max	grid-column: feature-max;
Content Grid	Class	.content–full	grid-column: full;
Content Grid	Class	.content–full-safe	grid-column: full; padding-inline: var(–gutter);
Content Grid	Class	.content-grid:where(.content–full-safe)	padding-inline: var(–gutter);
Content Grid	Class	:is(.content–feature, .content–feature-max, .content–full, .content–full-safe):not(.content-grid–off :is(.content–feature, .content–feature-max, .content–full, .content–full-safe))	width: 100% !important; max-width: 100%;
Content Grid	Class	:is(.content–feature, .content–feature-max, .content–full, .content–full-safe) :is(figure img, picture img)	width: 100%;
Content Grid	Attribute Style	.content-grid:is([class=”padding–“], [class=”section–“], [class*=”header–“])	padding-inline: 0;
Smart Spacing	Other Rule	body :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li)	margin-block: 0;
Smart Spacing	Class	.smart-spacing-normalize :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li)	margin-block: 0;
Smart Spacing	Class	.smart-spacing	row-gap: 0 !important;
Smart Spacing	Class	.smart-spacing > * + *	margin-block-start: var(–flow-spacing, initial); margin-block-end: 0;
Smart Spacing	Class	.smart-spacing > * + :where(h1, h2, h3, h4, h5, h6)	margin-block-start: var(–heading-spacing, var(–flow-spacing, initial)); margin-block-end: 0;
Smart Spacing	Class	.smart-spacing > :where(* + h2)	margin-block-start: var(–h2-spacing, var(–heading-spacing)); margin-block-end: 0;
Smart Spacing	Class	.smart-spacing > :where(* + h3)	margin-block-start: var(–h3-spacing, var(–heading-spacing)); margin-block-end: 0;
Smart Spacing	Class	.smart-spacing > :where(* + h4)	margin-block-start: var(–h4-spacing, var(–heading-spacing)); margin-block-end: 0;
Smart Spacing	Class	.smart-spacing > :where(* + h5)	margin-block-start: var(–h5-spacing, var(–heading-spacing)); margin-block-end: 0;
Smart Spacing	Class	.smart-spacing > :where(* + h6)	margin-block-start: var(–h6-spacing, var(–heading-spacing)); margin-block-end: 0;
Smart Spacing	Class	.smart-spacing > * + p	margin-block-start: var(–paragraph-spacing, var(–flow-spacing, initial)); margin-block-end: 0;
Smart Spacing	Class	.smart-spacing > :is(* + ul, * + ol)	margin-block: var(–list-spacing, var(–flow-spacing, initial));
Smart Spacing	Class	.smart-spacing > :is(ul, ol)	padding-inline-start: var(–list-indent-spacing, var(–flow-spacing, initial));
Smart Spacing	Class	.smart-spacing > ul * + li, .smart-spacing > ol * + li	margin-block-start: var(–list-item-spacing, var(–flow-spacing, initial)); margin-block-end: 0;
Smart Spacing	Class	.smart-spacing > ul ul, .smart-spacing > ol ol, .smart-spacing > ul ol, .smart-spacing > ol ul	margin-block: var(–nested-list-spacing, var(–list-item-spacing, initial)); padding-inline-start: var(–nested-list-indent-spacing, initial);
Smart Spacing	Class	.smart-spacing > :is(ul, ol) :is(ul, ol) li	margin-block-start: var(–nested-list-item-spacing, var(–list-item-spacing, initial));
Smart Spacing	Class	.smart-spacing > * + figure, .smart-spacing > * + picture	margin-block: var(–figure-spacing, var(–flow-spacing, initial));
Smart Spacing	Class	.smart-spacing figcaption	margin-block: var(–figcaption-spacing, var(–flow-spacing, initial));
Smart Spacing	Class	.smart-spacing > * + blockquote:where(:not(figure > blockquote))	margin-block: var(–blockquote-spacing, var(–flow-spacing, initial));
Smart Spacing	Class	.smart-spacing > blockquote * + *	margin-block-start: var(–paragraph-spacing, var(–flow-spacing, initial)); margin-block-end: 0;
Smart Spacing	Class	.smart-spacing > :is(figure, blockquote, ul, ol):where(:not(:first-child)) + *	–paragraph-spacing: 0; –flow-spacing: 0;
Smart Spacing	Class	.smart-spacing–off :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li)	margin-block: 0;
Default Section Styles	Other Rule	#shadow-host-companion	padding: 0;
	Type	CSS Reference/Name		Query Rule

ACSS for Bricks

This is ACSS 4 RC3 for Bricks.

Type :

CSS Reference/Name :

Query Rule :