:root{--density-0:0;--density-1:var(--space-1);--density-2:var(--space-2);--density-3:var(--space-3);--density-4:var(--space-4);--density-5:var(--space-5);--density-6:var(--space-6);--density-7:var(--space-7);--density-8:var(--space-8);--density-9:var(--space-9);--density-10:var(--space-10);--density-11:var(--space-11);--density-12:var(--space-12);--density-13:var(--space-13);--density-14:var(--space-14);--density-15:var(--space-15);--ds__color__blue-50:#e3f2fd;--ds__color__blue-100:#bbdefb;--ds__color__blue-200:#90caf9;--ds__color__blue-300:#64b5f6;--ds__color__blue-400:#3b82f6;--ds__color__blue-500:#2563eb;--ds__color__blue-600:#2e86c1;--ds__color__blue-700:#1976d2;--ds__color__blue-800:#1565c0;--ds__color__blue-900:#0d47a1;--ds__color__blue-contrast:#fff;--ds__color__indigo-50:#e8eaf6;--ds__color__indigo-100:#c5cae9;--ds__color__indigo-200:#9fa8da;--ds__color__indigo-300:#7986cb;--ds__color__indigo-400:#5c6bc0;--ds__color__indigo-500:#3f51b5;--ds__color__indigo-600:#3949ab;--ds__color__indigo-700:#303f9f;--ds__color__indigo-800:#283593;--ds__color__indigo-900:#1a237e;--ds__color__indigo-contrast:#fff;--ds__color__purple-50:#faf5ff;--ds__color__purple-100:#f3e8ff;--ds__color__purple-200:#e9d5ff;--ds__color__purple-300:#d8b4fe;--ds__color__purple-400:#a855f7;--ds__color__purple-500:#9333ea;--ds__color__purple-600:#7e22ce;--ds__color__purple-700:#6b21a8;--ds__color__purple-800:#581c87;--ds__color__purple-900:#3b0764;--ds__color__purple-contrast:#fff;--ds__color__pink-50:#fce4ec;--ds__color__pink-100:#f8bbd0;--ds__color__pink-200:#f48fb1;--ds__color__pink-300:#f06292;--ds__color__pink-400:#ec407a;--ds__color__pink-500:#e91e63;--ds__color__pink-600:#d81b60;--ds__color__pink-700:#c2185b;--ds__color__pink-800:#ad1457;--ds__color__pink-900:#880e4f;--ds__color__pink-contrast:#fff;--ds__color__red-50:#ffebee;--ds__color__red-100:#ffcdd2;--ds__color__red-200:#ef9a9a;--ds__color__red-300:#e57373;--ds__color__red-400:#ef5350;--ds__color__red-500:#ec1b2e;--ds__color__red-600:#c61625;--ds__color__red-700:#d32f2f;--ds__color__red-800:#c62828;--ds__color__red-900:#771010;--ds__color__red-contrast:#fff;--ds__color__orange-50:#fff3e0;--ds__color__orange-100:#ffe0b2;--ds__color__orange-200:#ffcc80;--ds__color__orange-300:#ffb74d;--ds__color__orange-400:#ffa726;--ds__color__orange-500:#f59e0b;--ds__color__orange-600:#d97706;--ds__color__orange-700:#f57c00;--ds__color__orange-800:#ef6c00;--ds__color__orange-900:#bb4600;--ds__color__orange-contrast:#000;--ds__color__yellow-50:#fffde7;--ds__color__yellow-100:#fff9c4;--ds__color__yellow-200:#fff59d;--ds__color__yellow-300:#fff176;--ds__color__yellow-400:#ffee58;--ds__color__yellow-500:#ffeb3b;--ds__color__yellow-600:#fdd835;--ds__color__yellow-700:#fbc02d;--ds__color__yellow-800:#f9a825;--ds__color__yellow-900:#f57f17;--ds__color__yellow-contrast:#000;--ds__color__green-50:#e8f5e9;--ds__color__green-100:#c8e6c9;--ds__color__green-200:#a5d6a7;--ds__color__green-300:#81c784;--ds__color__green-400:#66bb6a;--ds__color__green-500:#4caf50;--ds__color__green-600:#15803d;--ds__color__green-700:#166534;--ds__color__green-800:#2e7d32;--ds__color__green-900:#1b5e20;--ds__color__green-contrast:#fff;--ds__color__teal-50:#f0fdfa;--ds__color__teal-100:#ccfbf1;--ds__color__teal-200:#99f6e4;--ds__color__teal-300:#5eead4;--ds__color__teal-400:#2dd4bf;--ds__color__teal-500:#14b8a6;--ds__color__teal-600:#0d9488;--ds__color__teal-700:#0f766e;--ds__color__teal-800:#115e59;--ds__color__teal-900:#134e4a;--ds__color__teal-contrast:#fff;--ds__color__cyan-50:#e0f7fa;--ds__color__cyan-100:#b2ebf2;--ds__color__cyan-200:#80deea;--ds__color__cyan-300:#4dd0e1;--ds__color__cyan-400:#26c6da;--ds__color__cyan-500:#00bcd4;--ds__color__cyan-600:#00acc1;--ds__color__cyan-700:#0097a7;--ds__color__cyan-800:#00838f;--ds__color__cyan-900:#006064;--ds__color__cyan-contrast:#000;--ds__color__gray-50:#f8fafc;--ds__color__gray-100:#f1f5f9;--ds__color__gray-200:#e2e8f0;--ds__color__gray-700:#334155;--ds__color__gray-800:#1f2937;--ds__color__gray-900:#0b1220;--ds__color__gray-contrast:#000;--ds__color__black:#000;--ds__color__white:#fff;--ds__color__slate-50:#f5f8fa;--ds__color__slate-100:#dde5eb;--ds__color__slate-200:#bcccdc;--ds__color__slate-300:#9fb3c8;--ds__color__slate-400:#829ab1;--ds__color__slate-500:#627d98;--ds__color__slate-600:#486581;--ds__color__slate-700:#334e68;--ds__color__slate-800:#2c415c;--ds__color__slate-900:#102a43;--ds__color__slate-contrast:#fff;--ds__palette__primary-main:var(--ds__color__purple-600);--ds__palette__primary-light:var(--ds__color__purple-400);--ds__palette__primary-dark:var(--ds__color__purple-800);--ds__palette__primary-contrast:var(--ds__color__white);--ds__palette__surface-main:var(--ds__color__white);--ds__palette__surface-light:var(--ds__color__slate-50);--ds__palette__surface-dark:var(--ds__color__slate-100);--ds__palette__surface-contrast:var(--ds__color__slate-900);--ds__palette__secondary-main:var(--ds__color__pink-600);--ds__palette__secondary-light:var(--ds__color__pink-400);--ds__palette__secondary-dark:var(--ds__color__pink-700);--ds__palette__secondary-contrast:var(--ds__color__white);--ds__palette__tertiary-main:var(--ds__color__slate-200);--ds__palette__tertiary-light:var(--ds__color__slate-100);--ds__palette__tertiary-dark:var(--ds__color__slate-300);--ds__palette__tertiary-contrast:var(--ds__color__slate-900);--ds__palette__success-main:var(--ds__color__green-700);--ds__palette__success-light:var(--ds__color__green-600);--ds__palette__success-dark:var(--ds__color__green-800);--ds__palette__success-contrast:var(--ds__color__white);--ds__palette__info-main:var(--ds__color__blue-600);--ds__palette__info-light:var(--ds__color__blue-500);--ds__palette__info-dark:var(--ds__color__blue-700);--ds__palette__info-contrast:var(--ds__color__white);--ds__palette__warning-main:var(--ds__color__orange-500);--ds__palette__warning-light:var(--ds__color__orange-400);--ds__palette__warning-dark:var(--ds__color__orange-600);--ds__palette__warning-contrast:var(--ds__color__gray-900);--ds__palette__error-main:var(--ds__color__red-600);--ds__palette__error-light:var(--ds__color__red-500);--ds__palette__error-dark:var(--ds__color__red-700);--ds__palette__error-contrast:var(--ds__color__white);--ds__palette__dark-main:var(--ds__color__slate-900);--ds__palette__dark-light:var(--ds__color__slate-800);--ds__palette__dark-dark:var(--ds__color__black);--ds__palette__dark-contrast:var(--ds__color__white);--ds__palette__neutral-main:var(--ds__color__gray-200);--ds__palette__neutral-light:var(--ds__color__gray-50);--ds__palette__neutral-dark:var(--ds__color__gray-300);--ds__palette__neutral-contrast:var(--ds__color__gray-900);--ds__palette__light-main:var(--ds__color__white);--ds__palette__light-light:var(--ds__color__gray-50);--ds__palette__light-dark:var(--ds__color__gray-100);--ds__palette__light-contrast:var(--ds__color__slate-900)}@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");html{color-scheme:light dark}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ds__palette__primary-main:var(--ds__color__slate-400);--ds__palette__primary-light:var(--ds__color__slate-300);--ds__palette__primary-dark:var(--ds__color__slate-500);--ds__palette__primary-contrast:var(--ds__color__slate-900);--ds__palette__surface-main:var(--ds__color__slate-900);--ds__palette__surface-light:var(--ds__color__slate-800);--ds__palette__surface-dark:#0a1b2a;--ds__palette__surface-contrast:var(--ds__color__white);--ds__palette__secondary-main:var(--ds__color__gray-400);--ds__palette__secondary-contrast:var(--ds__color__gray-900);--ds__palette__neutral-main:var(--ds__color__gray-400);--ds__palette__neutral-light:var(--ds__color__gray-300);--ds__palette__neutral-dark:var(--ds__color__gray-500);--ds__palette__neutral-contrast:var(--ds__color__gray-900);--ds__palette__light-main:var(--ds__color__slate-800);--ds__palette__light-contrast:var(--ds__color__white)}}:root[data-theme=dark]{--ds__palette__primary-main:var(--ds__color__slate-400);--ds__palette__primary-light:var(--ds__color__slate-300);--ds__palette__primary-dark:var(--ds__color__slate-500);--ds__palette__primary-contrast:var(--ds__color__slate-900);--ds__palette__surface-main:var(--ds__color__slate-900);--ds__palette__surface-light:var(--ds__color__slate-800);--ds__palette__surface-dark:#0a1b2a;--ds__palette__surface-contrast:var(--ds__color__white);--ds__palette__secondary-main:var(--ds__color__gray-400);--ds__palette__secondary-contrast:var(--ds__color__gray-900);--ds__palette__neutral-main:var(--ds__color__gray-400);--ds__palette__neutral-light:var(--ds__color__gray-300);--ds__palette__neutral-dark:var(--ds__color__gray-500);--ds__palette__neutral-contrast:var(--ds__color__gray-900);--ds__palette__light-main:var(--ds__color__slate-800);--ds__palette__light-contrast:var(--ds__color__white)}:root{--font-ui:Inter,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-ui-2:Roboto,"Helvetica Neue",Arial,sans-serif;--font-code:Menlo,"SF Mono",Monaco,Inconsolata,"Roboto Mono","Source Code Pro",monospace;--default-transform:none;--default-decoration:none;--default-style:normal;--default-margin-block-start:auto;--default-margin-block-end:auto;--h1-line:1.1;--h1-font-family:var(--font-ui);--h1-transform:var(--default-transform,none);--h1-decoration:var(--default-decoration,none);--h1-style:var(--default-style,normal);--h1-margin-block-start:var(--default-margin-block-start,auto);--h1-margin-block-end:var(--default-margin-block-end,auto);--h2-font-family:var(--font-ui);--h2-transform:var(--default-transform,none);--h2-decoration:var(--default-decoration,none);--h2-style:var(--default-style,normal);--h2-margin-block-start:var(--default-margin-block-start,auto);--h2-margin-block-end:var(--default-margin-block-end,auto);--h3-font-family:var(--font-ui);--h3-transform:var(--default-transform,none);--h3-decoration:var(--default-decoration,none);--h3-style:var(--default-style,normal);--h3-margin-block-start:var(--default-margin-block-start,auto);--h3-margin-block-end:var(--default-margin-block-end,auto);--h4-font-family:var(--font-ui);--h4-transform:var(--default-transform,none);--h4-decoration:var(--default-decoration,none);--h4-style:var(--default-style,normal);--h4-margin-block-start:var(--default-margin-block-start,auto);--h4-margin-block-end:var(--default-margin-block-end,auto);--h5-font-family:var(--font-ui-2,var(--font-ui));--h5-transform:var(--default-transform,none);--h5-decoration:var(--default-decoration,none);--h5-style:var(--default-style,normal);--h5-margin-block-start:var(--default-margin-block-start,auto);--h5-margin-block-end:var(--default-margin-block-end,auto);--h6-font-family:var(--font-ui-2,var(--font-ui));--h6-transform:var(--default-transform,none);--h6-decoration:var(--default-decoration,none);--h6-style:var(--default-style,normal);--h6-margin-block-start:var(--default-margin-block-start,auto);--h6-margin-block-end:var(--default-margin-block-end,auto);--p-font-family:var(--font-ui);--p-transform:var(--default-transform,none);--p-decoration:var(--default-decoration,none);--p-style:var(--default-style,normal);--p-margin-block-start:var(--default-margin-block-start,auto);--p-margin-block-end:var(--default-margin-block-end,auto);--span-line:1.5;--span-font-family:var(--font-ui);--span-transform:var(--default-transform,none);--span-decoration:var(--default-decoration,none);--span-style:var(--default-style,normal);--span-margin-block-start:var(--default-margin-block-start,auto);--span-margin-block-end:var(--default-margin-block-end,auto);--body-font-family:var(--font-ui);--body-transform:var(--default-transform,none);--body-decoration:var(--default-decoration,none);--body-style:var(--default-style,normal);--body-margin-block-start:var(--default-margin-block-start,auto);--body-margin-block-end:var(--default-margin-block-end,auto);--caption-opacity:0.8;--caption-font-family:var(--font-ui-2,var(--font-ui));--caption-transform:var(--default-transform,none);--caption-decoration:var(--default-decoration,none);--caption-style:var(--default-style,normal);--caption-margin-block-start:var(--default-margin-block-start,auto);--caption-margin-block-end:var(--default-margin-block-end,auto);--small-font-family:var(--font-ui-2,var(--font-ui));--small-transform:var(--default-transform,none);--small-decoration:var(--default-decoration,none);--small-style:var(--default-style,normal);--small-margin-block-start:var(--default-margin-block-start,auto);--small-margin-block-end:var(--default-margin-block-end,auto);--pre-line:1.5;--pre-font-family:var(--font-code);--pre-transform:var(--default-transform,none);--pre-decoration:var(--default-decoration,none);--pre-style:var(--default-style,normal);--pre-margin-block-start:var(--default-margin-block-start,auto);--pre-margin-block-end:var(--default-margin-block-end,auto)}@media (min-width:768px){:root{--h1-size:var(--space-8);--h2-line:1.15;--h3-size:var(--space-7);--h3-line:1.25;--h4-size:var(--space-6)}}.ds-typo{font-family:var(--font-ui),sans-serif;color:inherit;margin-block-start:auto;margin-block-end:auto}:where(h1).ds-typo{font-size:var(--h1-size);font-weight:var(--h1-weight,700);font-family:var(--h1-font-family,var(--font-ui));line-height:var(--h1-line);letter-spacing:var(--h1-spacing);text-transform:var(--h1-transform,none);text-decoration:var(--h1-decoration,none);font-style:var(--h1-style,normal);margin-block-start:var(--h1-margin-block-start,auto);margin-block-end:var(--h1-margin-block-end,auto)}:where(h2).ds-typo{font-size:var(--h2-size);font-weight:var(--h2-weight,700);font-family:var(--h2-font-family,var(--font-ui));line-height:var(--h2-line);letter-spacing:var(--h2-spacing);text-transform:var(--h2-transform,none);text-decoration:var(--h2-decoration,none);font-style:var(--h2-style,normal);margin-block-start:var(--h2-margin-block-start,auto);margin-block-end:var(--h2-margin-block-end,auto)}:where(h3).ds-typo{font-size:var(--h3-size);font-weight:var(--h3-weight,600);font-family:var(--h3-font-family,var(--font-ui));line-height:var(--h3-line);letter-spacing:var(--h3-spacing);text-transform:var(--h3-transform,none);text-decoration:var(--h3-decoration,none);font-style:var(--h3-style,normal);margin-block-start:var(--h3-margin-block-start,auto);margin-block-end:var(--h3-margin-block-end,auto)}:where(h4).ds-typo{font-size:var(--h4-size);font-weight:var(--h4-weight,600);font-family:var(--h4-font-family,var(--font-ui));line-height:var(--h4-line);letter-spacing:var(--h4-spacing);text-transform:var(--h4-transform,none);text-decoration:var(--h4-decoration,none);font-style:var(--h4-style,normal);margin-block-start:var(--h4-margin-block-start,auto);margin-block-end:var(--h4-margin-block-end,auto)}:where(h5).ds-typo{font-size:var(--h5-size);font-weight:var(--h5-weight,600);font-family:var(--h5-font-family,var(--font-ui-2,var(--font-ui)));line-height:var(--h5-line);letter-spacing:var(--h5-spacing);text-transform:var(--h5-transform,none);text-decoration:var(--h5-decoration,none);font-style:var(--h5-style,normal);margin-block-start:var(--h5-margin-block-start,auto);margin-block-end:var(--h5-margin-block-end,auto)}:where(h6).ds-typo{font-size:var(--h6-size);font-weight:var(--h6-weight,600);font-family:var(--h6-font-family,var(--font-ui-2,var(--font-ui)));line-height:var(--h6-line);letter-spacing:var(--h6-spacing);text-transform:var(--h6-transform,none);text-decoration:var(--h6-decoration,none);font-style:var(--h6-style,normal);margin-block-start:var(--h6-margin-block-start,auto);margin-block-end:var(--h6-margin-block-end,auto)}:where(p).ds-typo{font-size:var(--p-size);line-height:var(--p-line,normal);font-weight:var(--p-weight,400);font-family:var(--p-font-family,var(--font-ui));letter-spacing:var(--p-spacing);text-transform:var(--p-transform,none);text-decoration:var(--p-decoration,none);font-style:var(--p-style,normal);margin-block-start:var(--p-margin-block-start,auto);margin-block-end:var(--p-margin-block-end,auto)}:where(span).ds-typo{font-size:var(--span-size);font-weight:var(--span-weight,400);font-family:var(--span-font-family,var(--font-ui));line-height:var(--span-line);letter-spacing:var(--span-spacing);text-transform:var(--span-transform,none);text-decoration:var(--span-decoration,none);font-style:var(--span-style,normal);margin-block-start:var(--span-margin-block-start,auto);margin-block-end:var(--span-margin-block-end,auto)}:where(small).ds-typo{font-size:var(--small-size);opacity:var(--caption-opacity,1);font-family:var(--small-font-family,var(--font-ui-2,var(--font-ui)));line-height:var(--small-line);letter-spacing:var(--small-spacing);text-transform:var(--small-transform,none);text-decoration:var(--small-decoration,none);font-style:var(--small-style,normal);margin-block-start:var(--small-margin-block-start,auto);margin-block-end:var(--small-margin-block-end,auto)}:where(.caption).ds-typo,:where(caption).ds-typo{font-size:var(--caption-size);opacity:var(--caption-opacity,.8);font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));line-height:var(--caption-line);letter-spacing:var(--caption-spacing);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto)}:where(code).ds-typo,:where(pre).ds-typo{font-family:var(--pre-font-family,var(--font-code)),monospace;font-size:var(--pre-size);line-height:var(--pre-line)}.ds-typo[data-typo=h1]{font-family:var(--h1-font-family,var(--font-ui));font-size:var(--h1-size);line-height:var(--h1-line,1.1);font-weight:var(--h1-weight,700);letter-spacing:var(--h1-spacing,-.02em);text-transform:var(--h1-transform,none);text-decoration:var(--h1-decoration,none);font-style:var(--h1-style,normal);margin-block-start:var(--h1-margin-block-start,auto);margin-block-end:var(--h1-margin-block-end,auto)}.ds-typo[data-typo=h2]{font-family:var(--h2-font-family,var(--font-ui));font-size:var(--h2-size);line-height:var(--h2-line,1.2);font-weight:var(--h2-weight,700);letter-spacing:var(--h2-spacing,-.01em);text-transform:var(--h2-transform,none);text-decoration:var(--h2-decoration,none);font-style:var(--h2-style,normal);margin-block-start:var(--h2-margin-block-start,auto);margin-block-end:var(--h2-margin-block-end,auto)}.ds-typo[data-typo=h3]{font-family:var(--h3-font-family,var(--font-ui));font-size:var(--h3-size);line-height:var(--h3-line,1.3);font-weight:var(--h3-weight,600);letter-spacing:var(--h3-spacing,normal);text-transform:var(--h3-transform,none);text-decoration:var(--h3-decoration,none);font-style:var(--h3-style,normal);margin-block-start:var(--h3-margin-block-start,auto);margin-block-end:var(--h3-margin-block-end,auto)}.ds-typo[data-typo=h4]{font-family:var(--h4-font-family,var(--font-ui));font-size:var(--h4-size);line-height:var(--h4-line,1.4);font-weight:var(--h4-weight,600);letter-spacing:var(--h4-spacing,normal);text-transform:var(--h4-transform,none);text-decoration:var(--h4-decoration,none);font-style:var(--h4-style,normal);margin-block-start:var(--h4-margin-block-start,auto);margin-block-end:var(--h4-margin-block-end,auto)}.ds-typo[data-typo=h5]{font-family:var(--h5-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h5-size);line-height:var(--h5-line,1.4);font-weight:var(--h5-weight,600);letter-spacing:var(--h5-spacing,normal);text-transform:var(--h5-transform,none);text-decoration:var(--h5-decoration,none);font-style:var(--h5-style,normal);margin-block-start:var(--h5-margin-block-start,auto);margin-block-end:var(--h5-margin-block-end,auto)}.ds-typo[data-typo=h6]{font-family:var(--h6-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h6-size);line-height:var(--h6-line,1.4);font-weight:var(--h6-weight,600);letter-spacing:var(--h6-spacing,normal);text-transform:var(--h6-transform,none);text-decoration:var(--h6-decoration,none);font-style:var(--h6-style,normal);margin-block-start:var(--h6-margin-block-start,auto);margin-block-end:var(--h6-margin-block-end,auto)}.ds-typo[data-typo=p]{font-family:var(--p-font-family,var(--font-ui));font-size:var(--p-size);line-height:var(--p-line,1.6);font-weight:var(--p-weight,400);letter-spacing:var(--p-spacing,normal);text-transform:var(--p-transform,none);text-decoration:var(--p-decoration,none);font-style:var(--p-style,normal);margin-block-start:var(--p-margin-block-start,auto);margin-block-end:var(--p-margin-block-end,auto)}.ds-typo[data-typo=body]{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto)}.ds-typo[data-typo=span]{font-family:var(--span-font-family,var(--font-ui));font-size:var(--span-size);line-height:var(--span-line,1.5);font-weight:var(--span-weight,400);letter-spacing:var(--span-spacing,normal);text-transform:var(--span-transform,none);text-decoration:var(--span-decoration,none);font-style:var(--span-style,normal);margin-block-start:var(--span-margin-block-start,auto);margin-block-end:var(--span-margin-block-end,auto)}.ds-typo[data-typo=small]{font-family:var(--small-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--small-size);line-height:var(--small-line,1.4);letter-spacing:var(--small-spacing,normal);text-transform:var(--small-transform,none);text-decoration:var(--small-decoration,none);font-style:var(--small-style,normal);margin-block-start:var(--small-margin-block-start,auto);margin-block-end:var(--small-margin-block-end,auto);opacity:var(--small-opacity,.8)}.ds-typo[data-typo=caption]{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8)}.ds-typo[data-typo=pre]{font-family:var(--pre-font-family,var(--font-code),monospace);font-size:var(--pre-size);line-height:var(--pre-line,1.5);text-transform:var(--pre-transform,none);text-decoration:var(--pre-decoration,none);font-style:var(--pre-style,normal);margin-block-start:var(--pre-margin-block-start,auto);margin-block-end:var(--pre-margin-block-end,auto)}.ds-typo[data-typo=code]{font-family:var(--code-font-family,var(--font-code),monospace);font-size:var(--code-size);line-height:var(--code-line,1.5);text-transform:var(--code-transform,none);text-decoration:var(--code-decoration,none);font-style:var(--code-style,normal);margin-block-start:var(--code-margin-block-start,auto);margin-block-end:var(--code-margin-block-end,auto)}.ds-typo[data-typo=default]{font-family:var(--default-font-family,var(--font-ui));font-size:var(--default-size);line-height:var(--default-line,1.5);font-weight:var(--default-weight,400);letter-spacing:var(--default-spacing,normal);text-transform:var(--default-transform,none);text-decoration:var(--default-decoration,none);font-style:var(--default-style,normal);margin-block-start:var(--default-margin-block-start,auto);margin-block-end:var(--default-margin-block-end,auto)}.concentric-content,.concentric-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.concentric-content{z-index:100;background:var(--ds__palette__surface-main);padding:var(--density-2);border-radius:var(--radius-1);min-width:80px;min-height:40px;box-shadow:var(--shadow-2);font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);font-weight:700;color:var(--ds__palette__primary-dark);border:1px solid var(--ds__palette__neutral-light)}.concentric-ring{position:absolute;border-radius:var(--radius-2);border:1px solid color-mix(in srgb,var(--ds__palette__primary-main) 20%,transparent);background:color-mix(in srgb,var(--ds__palette__primary-main) 3%,transparent);pointer-events:auto;transition:all .2s ease;display:flex;justify-content:center;align-items:flex-start;cursor:pointer}.concentric-ring.is-hovered,.concentric-ring:hover{border-color:var(--ds__palette__secondary-main);background:color-mix(in srgb,var(--ds__palette__secondary-main) 10%,transparent);box-shadow:0 0 0 1px var(--ds__palette__secondary-main)}.ring-label{background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);font-size:.6rem;padding:1px 4px;border-radius:0 0 4px 4px;opacity:0;transition:opacity .2s;margin-top:-1px}.concentric-ring.is-hovered .ring-label,.concentric-ring:hover .ring-label{opacity:1}.concentric-ring--density-1{inset:calc(var(--density-1) * -1);z-index:calc(20 - 1)}.concentric-ring--density-2{inset:calc(var(--density-2) * -1);z-index:calc(20 - 2)}.concentric-ring--density-3{inset:calc(var(--density-3) * -1);z-index:calc(20 - 3)}.concentric-ring--density-4{inset:calc(var(--density-4) * -1);z-index:calc(20 - 4)}.concentric-ring--density-5{inset:calc(var(--density-5) * -1);z-index:calc(20 - 5)}.concentric-ring--density-6{inset:calc(var(--density-6) * -1);z-index:calc(20 - 6)}.concentric-ring--density-7{inset:calc(var(--density-7) * -1);z-index:calc(20 - 7)}.concentric-ring--density-8{inset:calc(var(--density-8) * -1);z-index:calc(20 - 8)}.concentric-ring--density-9{inset:calc(var(--density-9) * -1);z-index:calc(20 - 9)}.concentric-ring--density-10{inset:calc(var(--density-10) * -1);z-index:calc(20 - 10)}.concentric-ring--density-11{inset:calc(var(--density-11) * -1);z-index:calc(20 - 11)}.concentric-ring--density-12{inset:calc(var(--density-12) * -1);z-index:calc(20 - 12)}.concentric-ring--density-13{inset:calc(var(--density-13) * -1);z-index:calc(20 - 13)}.concentric-ring--density-14{inset:calc(var(--density-14) * -1);z-index:calc(20 - 14)}.concentric-ring--density-15{inset:calc(var(--density-15) * -1);z-index:calc(20 - 15)}.concentric-ring--density-16{inset:calc(var(--density-16) * -1);z-index:calc(20 - 16)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--ds__palette__neutral-light);border-radius:9999px;outline:none;opacity:.8;transition:opacity .2s;cursor:pointer;margin:var(--density-1) 0}input[type=range]:hover{opacity:1}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:9999px;background:var(--ds__palette__primary-main);cursor:pointer;transition:background .15s ease-in-out,transform .1s;border:2px solid var(--ds__palette__surface-main);box-shadow:var(--shadow-1)}input[type=range]::-webkit-slider-thumb:hover{background:var(--ds__palette__primary-light);transform:scale(1.1)}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:9999px;background:var(--ds__palette__primary-main);cursor:pointer;transition:background .15s ease-in-out,transform .1s;border:2px solid var(--ds__palette__surface-main);box-shadow:var(--shadow-1)}input[type=range]::-moz-range-thumb:hover{background:var(--ds__palette__primary-light);transform:scale(1.1)}*,:after,:before{box-sizing:border-box}body,html{min-height:100%;margin:0!important;padding:0!important;width:100%;font-family:var(--font-ui,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast)}.main{display:block;min-height:100vh;padding:var(--space-6) var(--space-4);background:var(--ds__palette__surface-light)}.container{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3)}.layout{display:grid;grid-template-columns:100%;gap:var(--space-4);padding:var(--space-2);margin:0 auto;max-width:1400px;align-items:start}@media (min-width:1024px){.layout{grid-template-columns:max-content 1fr}}@media (min-width:768px){.layout{gap:var(--space-6);padding:var(--space-4)}}.layout__nav{position:absolute;width:0;height:0;@media (min-width:1024px){position:static;width:auto;height:auto;min-width:0}}.layout__content{min-width:0}:root{--radius-full:9999px}@ds-surface ai-prompt-container{margin-top:var(--space-4);width:100%;max-width:600px;background:transparent;position:relative;z-index:10}.ai-prompt-form{width:100%}@ds-surface input-wrapper{display:flex;align-items:center;padding:var(--space-2);border-radius:9999px;background:var(--ds__palette__surface-paper);border:1px solid var(--ds__palette__divider-main);transition:border-color .2s ease;position:relative;z-index:1;&:focus-within{border-color:var(--ds__palette__primary-main);box-shadow:0 0 0 2px var(--ds__palette__primary-light)}}.ai-icon{color:var(--ds__palette__primary-main);margin-right:var(--space-2)}.ai-input{flex:1;border:none;background:transparent;color:var(--ds__palette__text-primary);font-size:1rem;outline:none;&::placeholder{color:var(--ds__palette__text-secondary)}}.ai-submit-btn{padding:var(--surface-flat-padding);border-radius:var(--surface-flat-radius);background:transparent;color:var(--ds__palette__primary-main);border:var(--surface-flat-border);box-shadow:var(--surface-flat-shadow);--button-tone-main:var(--ds__palette__primary-main);--button-tone-dark:var(--ds__palette__primary-dark);--button-tone-contrast:var(--ds__palette__primary-contrast);&:disabled{color:var(--ds__palette__action-disabled);border-color:var(--ds__palette__action-disabled)}}.ai-submit-btn:hover{color:var(--button-flat-tone-primary-hover-color,var(--button-flat-hover-color))}.ai-submit-btn.is-selected,.ai-submit-btn[aria-pressed=true],.ai-submit-btn[aria-selected=true]{color:var(--button-flat-tone-primary-selected-color,var(--button-flat-selected-color))}@ds-surface ai-response{margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-3);background:var(--ds__palette__surface-paper);border:1px solid var(--ds__palette__divider-main);color:var(--ds__palette__text-primary);font-size:.95rem;line-height:1.6}.theme-loading-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:grid;place-items:center;animation:fadeIn .2s ease-out}.loading-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);color:#fff}.loading-spinner{animation:spin 1s linear infinite;color:var(--ds__palette__primary-light)}.loading-text{font-size:1.25rem;font-weight:500;color:#fff;text-align:center}.loading-theme-name{font-family:monospace;background:hsla(0,0%,100%,.1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-2);color:var(--ds__palette__primary-light)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}#AppHeader{width:100%;margin:0;padding:0;background:linear-gradient(135deg,var(--ds__palette__primary-dark) 0,var(--ds__palette__primary-main) 100%);background-color:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);position:relative;z-index:1000;box-shadow:var(--shadow-2);border-bottom:1px solid color-mix(in srgb,var(--ds__palette__primary-light) 30%,transparent)}#AppHeader .app-header__container{max-width:1400px;margin:0 auto;padding:var(--density-2) var(--space-2);display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}@media (min-width:768px){#AppHeader .app-header__container{padding:var(--density-2) var(--space-4)}}#AppHeader .app-header__inner{padding:var(--surface-contained-padding);border-radius:var(--surface-contained-radius);background:var(--ds__palette__light-main);color:var(--ds__palette__light-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);display:flex;flex-direction:row;align-items:flex-end;gap:8px;background:color-mix(in srgb,var(--ds__palette__surface-light) 90%,transparent);text-decoration:none;cursor:pointer;color:inherit;transition:transform .2s;&:hover{transform:translateY(-1px)}}#AppHeader .app-header__logo-img{display:block;width:40px;height:40px}@media (min-width:480px){#AppHeader .app-header__logo-img{width:50px;height:50px}}@media (min-width:768px){#AppHeader .app-header__logo-img{width:60px;height:60px}}#AppHeader .app-header__title-text{font-family:var(--h6-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h6-size);line-height:var(--h6-line,1.4);font-weight:var(--h6-weight,600);letter-spacing:var(--h6-spacing,normal);text-transform:var(--h6-transform,none);text-decoration:var(--h6-decoration,none);font-style:var(--h6-style,normal);margin-block-start:var(--h6-margin-block-start,auto);margin-block-end:var(--h6-margin-block-end,auto);color:var(--ds__palette__primary-dark);font-weight:800;line-height:1;letter-spacing:-.5px;white-space:nowrap;margin-bottom:var(--space-1)}#AppHeader .app-header__subtitle-text{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);opacity:.8;font-weight:500;font-size:.5rem;line-height:1.1;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}#AppHeader .app-header__actions,#AppHeader .app-header__settings{display:flex;align-items:center;gap:var(--density-2)}#AppHeader .theme-color-btn{width:32px;height:32px;border-radius:50%;border:3px solid var(--theme-color);background:hsla(0,0%,100%,.1);cursor:pointer;transition:all .2s ease;padding:0;box-sizing:border-box}#AppHeader .theme-color-btn:hover{transform:scale(1.1);background:hsla(0,0%,100%,.2)}#AppHeader .theme-color-btn.is-active{box-shadow:0 0 0 2px hsla(0,0%,100%,.8);background:hsla(0,0%,100%,.15)}#AppHeader .divider-vertical{width:1px;height:20px;background-color:hsla(0,0%,100%,.2);margin:0 var(--density-1)}#AppHeader .theme-toggle{width:32px;height:32px;border-radius:50%;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0;box-sizing:border-box}#AppHeader .theme-toggle:hover{background:hsla(0,0%,100%,.2);transform:scale(1.05)}.editor-content{padding:var(--density-6);display:grid;gap:var(--density-4);max-height:60vh;overflow-y:auto}.font-selector{display:flex;flex-direction:column;gap:var(--density-2)}#ButtonDemo{.btn{padding:var(--surface-contained-padding);border-radius:var(--surface-contained-radius);background:var(--surface-contained-bg);color:var(--surface-contained-color);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);cursor:pointer;transition:all .2s ease}.btn:hover{background:var(--button-contained-hover-bg);color:var(--button-contained-hover-color)}.btn.is-selected,.btn[aria-pressed=true],.btn[aria-selected=true]{background:var(--button-contained-selected-bg);color:var(--button-contained-selected-color)}.btn:hover{transform:translateY(-1px)}.btn--outlined{padding:var(--surface-outlined-padding);border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:var(--surface-outlined-shadow);--button-tone-main:var(--ds__palette__primary-main);--button-tone-dark:var(--ds__palette__primary-dark);--button-tone-contrast:var(--ds__palette__primary-contrast)}.btn--outlined:hover{color:var(--button-outlined-tone-primary-hover-color,var(--button-outlined-hover-color));border:var(--button-outlined-tone-primary-hover-border,var(--button-outlined-hover-border))}.btn--outlined.is-selected,.btn--outlined[aria-pressed=true],.btn--outlined[aria-selected=true]{background:var(--button-outlined-tone-primary-selected-bg,var(--button-outlined-selected-bg));color:var(--button-outlined-tone-primary-selected-color,var(--button-outlined-selected-color));border:var(--button-outlined-tone-primary-selected-border,var(--button-outlined-selected-border))}.btn--flat{padding:var(--surface-flat-padding);border-radius:var(--surface-flat-radius);background:transparent;color:var(--ds__palette__primary-main);border:var(--surface-flat-border);box-shadow:var(--surface-flat-shadow);--button-tone-main:var(--ds__palette__primary-main);--button-tone-dark:var(--ds__palette__primary-dark);--button-tone-contrast:var(--ds__palette__primary-contrast)}.btn--flat:hover{color:var(--button-flat-tone-primary-hover-color,var(--button-flat-hover-color))}.btn--flat.is-selected,.btn--flat[aria-pressed=true],.btn--flat[aria-selected=true]{color:var(--button-flat-tone-primary-selected-color,var(--button-flat-selected-color))}.btn--secondary{padding:var(--surface-contained-padding);border-radius:var(--surface-contained-radius);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);--button-tone-main:var(--ds__palette__secondary-main);--button-tone-dark:var(--ds__palette__secondary-dark);--button-tone-contrast:var(--ds__palette__secondary-contrast)}.btn--secondary:hover{background:var(--button-contained-tone-secondary-hover-bg,var(--button-contained-hover-bg));color:var(--button-contained-tone-secondary-hover-color,var(--button-contained-hover-color))}.btn--secondary.is-selected,.btn--secondary[aria-pressed=true],.btn--secondary[aria-selected=true]{background:var(--button-contained-tone-secondary-selected-bg,var(--button-contained-selected-bg));color:var(--button-contained-tone-secondary-selected-color,var(--button-contained-selected-color))}.btn--outlined.btn--secondary{padding:var(--surface-outlined-padding);border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main);box-shadow:var(--surface-outlined-shadow);--button-tone-main:var(--ds__palette__secondary-main);--button-tone-dark:var(--ds__palette__secondary-dark);--button-tone-contrast:var(--ds__palette__secondary-contrast)}.btn--outlined.btn--secondary:hover{color:var(--button-outlined-tone-secondary-hover-color,var(--button-outlined-hover-color));border:var(--button-outlined-tone-secondary-hover-border,var(--button-outlined-hover-border))}.btn--outlined.btn--secondary.is-selected,.btn--outlined.btn--secondary[aria-pressed=true],.btn--outlined.btn--secondary[aria-selected=true]{background:var(--button-outlined-tone-secondary-selected-bg,var(--button-outlined-selected-bg));color:var(--button-outlined-tone-secondary-selected-color,var(--button-outlined-selected-color));border:var(--button-outlined-tone-secondary-selected-border,var(--button-outlined-selected-border))}.btn--flat.btn--secondary{padding:var(--surface-flat-padding);border-radius:var(--surface-flat-radius);background:transparent;color:var(--ds__palette__secondary-main);border:var(--surface-flat-border);box-shadow:var(--surface-flat-shadow);--button-tone-main:var(--ds__palette__secondary-main);--button-tone-dark:var(--ds__palette__secondary-dark);--button-tone-contrast:var(--ds__palette__secondary-contrast)}.btn--flat.btn--secondary:hover{color:var(--button-flat-tone-secondary-hover-color,var(--button-flat-hover-color))}.btn--flat.btn--secondary.is-selected,.btn--flat.btn--secondary[aria-pressed=true],.btn--flat.btn--secondary[aria-selected=true]{color:var(--button-flat-tone-secondary-selected-color,var(--button-flat-selected-color))}.btn--sm{padding:var(--density-1);border-radius:var(--radius-1);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);--button-tone-main:var(--ds__palette__primary-main);--button-tone-dark:var(--ds__palette__primary-dark);--button-tone-contrast:var(--ds__palette__primary-contrast)}.btn--sm:hover{background:var(--button-contained-tone-primary-hover-bg,var(--button-contained-hover-bg));color:var(--button-contained-tone-primary-hover-color,var(--button-contained-hover-color))}.btn--sm.is-selected,.btn--sm[aria-pressed=true],.btn--sm[aria-selected=true]{background:var(--button-contained-tone-primary-selected-bg,var(--button-contained-selected-bg));color:var(--button-contained-tone-primary-selected-color,var(--button-contained-selected-color))}.btn--md{padding:var(--density-2);border-radius:var(--radius-2);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);--button-tone-main:var(--ds__palette__primary-main);--button-tone-dark:var(--ds__palette__primary-dark);--button-tone-contrast:var(--ds__palette__primary-contrast)}.btn--md:hover{background:var(--button-contained-tone-primary-hover-bg,var(--button-contained-hover-bg));color:var(--button-contained-tone-primary-hover-color,var(--button-contained-hover-color))}.btn--md.is-selected,.btn--md[aria-pressed=true],.btn--md[aria-selected=true]{background:var(--button-contained-tone-primary-selected-bg,var(--button-contained-selected-bg));color:var(--button-contained-tone-primary-selected-color,var(--button-contained-selected-color))}.btn--lg{padding:var(--density-3);border-radius:var(--radius-3);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);--button-tone-main:var(--ds__palette__primary-main);--button-tone-dark:var(--ds__palette__primary-dark);--button-tone-contrast:var(--ds__palette__primary-contrast)}.btn--lg:hover{background:var(--button-contained-tone-primary-hover-bg,var(--button-contained-hover-bg));color:var(--button-contained-tone-primary-hover-color,var(--button-contained-hover-color))}.btn--lg.is-selected,.btn--lg[aria-pressed=true],.btn--lg[aria-selected=true]{background:var(--button-contained-tone-primary-selected-bg,var(--button-contained-selected-bg));color:var(--button-contained-tone-primary-selected-color,var(--button-contained-selected-color))}}#CardDemo{.card{border-radius:var(--surface-contained-radius);background:var(--surface-contained-bg);color:var(--surface-contained-color);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);padding:var(--space-4);border-radius:var(--radius-2);transition:all .3s ease}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}.card__title{font-family:var(--h3-font-family,var(--font-ui));font-size:var(--h3-size);line-height:var(--h3-line,1.3);font-weight:var(--h3-weight,600);letter-spacing:var(--h3-spacing,normal);text-transform:var(--h3-transform,none);text-decoration:var(--h3-decoration,none);font-style:var(--h3-style,normal);margin-block-start:var(--h3-margin-block-start,auto);margin-block-end:var(--h3-margin-block-end,auto);margin:0 0 var(--space-2) 0}.card__content{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);margin:0;color:color-mix(in srgb,var(--ds__palette__surface-contrast) 80%,transparent)}}#DemoBorders{.demo-borders{gap:var(--space-8);padding:var(--space-4)}.demo-borders,.section{display:flex;flex-direction:column}.section{gap:var(--space-4)}.section-title{font:font(h4);color:var(--ds__palette__text-main);margin-bottom:var(--space-2)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}.card{flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:var(--border-1);border-radius:var(--radius-2)}.card,.preview-box{display:flex;background:var(--ds__palette__surface-main)}.preview-box{width:100%;height:100px;align-items:center;justify-content:center}.label,.preview-box{color:var(--ds__palette__text-secondary);font:font(body-sm)}.label{font-family:monospace}.playground{display:flex;flex-direction:column;background:var(--ds__palette__surface-main);padding:var(--space-6);border-radius:var(--radius-3);border:var(--border-1)}@media (min-width:768px){.playground{display:grid;grid-template-columns:300px 1fr}}.controls{gap:var(--space-4);padding:var(--density-2)}.control-group,.controls{display:flex;flex-direction:column}.control-group{gap:var(--space-2)}.control-label{font:font(label);color:var(--ds__palette__text-secondary)}.select{box-sizing:border-box;font:inherit;width:100%;border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow);caret-color:var(--input-outlined-tone-neutral-base-caret,var(--input-outlined-base-caret));--input-tone-main:var(--ds__palette__neutral-main);--input-tone-dark:var(--ds__palette__neutral-dark);--input-tone-contrast:var(--ds__palette__neutral-contrast);padding:var(--space-2)}.select::placeholder{color:var(--input-outlined-tone-neutral-base-placeholder,var(--input-outlined-base-placeholder))}.select:focus{border:var(--input-outlined-tone-neutral-focus-border,var(--input-outlined-focus-border))}.select:invalid,.select[aria-invalid=true]{border:var(--input-outlined-tone-neutral-invalid-border,var(--input-outlined-invalid-border))}.select:disabled,.select[aria-disabled=true]{opacity:var(--input-outlined-tone-neutral-disabled-opacity,var(--input-outlined-disabled-opacity))}.preview-area{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;padding:var(--density-2)}.live-preview{flex:1;border-radius:var(--radius-2);border:var(--border-1);min-height:300px;padding:var(--space-8)}.demo-element,.live-preview{display:flex;align-items:center;justify-content:center}.demo-element{width:200px;height:200px;max-width:100%;background:var(--ds__palette__surface-main);color:var(--ds__palette__text-main);font:font(h5);transition:all .2s ease}.demo-code-block{border-radius:var(--radius-2);overflow:hidden;font-size:14px;border:var(--border-1)}}#DemoBreakpoints{.breakpoints-section{display:flex;flex-direction:column;gap:var(--density-4)}.breakpoints-playground-wrapper{display:flex;flex-direction:column;gap:var(--density-2)}.breakpoints-playground-container{border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);padding:var(--density-4);border-radius:var(--radius-3);display:flex;flex-direction:column;gap:var(--density-6);background:var(--ds__palette__surface-light)}.breakpoints-viz-container{display:flex;flex-direction:column;gap:var(--density-2)}.breakpoints-bar-wrapper{width:100%;overflow-x:auto;padding-bottom:var(--density-2)}.breakpoints-bar{display:flex;height:60px;width:100%;min-width:600px;border-radius:var(--radius-2);overflow:hidden;box-shadow:var(--shadow-1)}.breakpoints-segment{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;transition:all .3s ease;position:relative;padding:0 var(--density-1);overflow:hidden;white-space:nowrap}.breakpoints-segment.is-active{box-shadow:inset 0 0 0 2px var(--ds__palette__surface-main);z-index:1}.breakpoints-segment-label{text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.breakpoints-segment-val{font-size:.7rem;opacity:.9;font-family:font(code);margin-top:2px}.breakpoints-segment--xs{background:var(--ds__palette__tertiary-light);color:var(--ds__palette__tertiary-dark)}.breakpoints-segment--sm{background:var(--ds__palette__secondary-light);color:var(--ds__palette__secondary-dark)}.breakpoints-segment--md{background:var(--ds__palette__primary-light);color:var(--ds__palette__primary-dark)}.breakpoints-segment--lg{background:var(--ds__palette__info-light);color:var(--ds__palette__info-dark)}.breakpoints-segment--xl{background:var(--ds__palette__error-light);color:var(--ds__palette__error-dark)}.breakpoints-grid{display:grid;grid-template-columns:1fr;gap:var(--density-6)}@media (min-width:768px){.breakpoints-grid{grid-template-columns:2fr 1fr;align-items:start}}.breakpoints-controls{display:flex;flex-direction:column;gap:var(--density-3)}.breakpoints-subtitle{font-size:1rem;font-weight:600;color:var(--ds__palette__text-secondary);margin-bottom:var(--density-1);text-transform:uppercase;letter-spacing:.05em}.breakpoints-control-row{display:flex;align-items:center;gap:var(--density-3);padding:var(--density-2);background:var(--ds__palette__surface-main);border-radius:var(--radius-2);border:1px solid var(--ds__palette__neutral-light);transition:border-color .2s}.breakpoints-control-row:hover{border-color:var(--ds__palette__primary-light)}.breakpoints-control-label{width:30px;font-weight:700;text-transform:uppercase;font-size:.85rem;color:var(--ds__palette__text-secondary)}.breakpoints-slider{flex:1;cursor:pointer;margin:0 var(--density-2)}.breakpoints-input-wrapper{display:flex;align-items:center;gap:var(--density-1)}.breakpoints-input-val{width:80px;padding:4px 8px;border:1px solid var(--ds__palette__neutral-light);border-radius:var(--radius-1);font-family:font(code);text-align:right;font-size:.9rem;color:var(--ds__palette__text-main);background:transparent}.breakpoints-unit{font-size:.8rem;color:var(--ds__palette__text-secondary)}.breakpoints-info-panel{gap:var(--density-3);padding:var(--density-4);background:var(--ds__palette__surface-main);height:100%}.breakpoints-info-card,.breakpoints-info-panel{display:flex;flex-direction:column;border-radius:var(--radius-2);border:1px solid var(--ds__palette__neutral-light)}.breakpoints-info-card{align-items:center;justify-content:center;padding:var(--density-3);background:var(--ds__palette__surface-light);text-align:center}.breakpoints-info-card.is-compact{flex-direction:row;gap:var(--density-3);padding:var(--density-2) var(--density-3)}.breakpoints-icon{color:var(--ds__palette__text-secondary)}.breakpoints-info-content{display:flex;flex-direction:column;align-items:flex-start}.breakpoints-info-card.is-highlighted{background:var(--ds__palette__primary-light);border-color:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast)}.breakpoints-info-card.is-highlighted .breakpoints-info-label{color:var(--ds__palette__primary-contrast);opacity:.9}.breakpoints-info-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ds__palette__text-secondary);margin-bottom:2px}.breakpoints-info-value{font-family:font(code);font-size:1.1rem;font-weight:700}.breakpoints-info-value.is-large{font-size:2rem}.breakpoints-info-desc{font-size:.85rem;color:var(--ds__palette__text-secondary);text-align:center;line-height:1.5;margin-top:auto}}#DemoBreakpointsCards{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--surface-contained-padding);border-radius:var(--surface-contained-radius);background:var(--ds__palette__light-main);color:var(--ds__palette__light-contrast);box-shadow:var(--surface-contained-shadow);border:1px solid var(--ds__palette__surface-contrast);border-radius:var(--radius-3);.demo-breakpoints-card-item{border-radius:var(--surface-contained-radius);background:var(--surface-contained-bg);color:var(--surface-contained-color);box-shadow:var(--surface-contained-shadow);flex:1;padding:var(--space-6);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);border:1px solid var(--ds__palette__surface-dark);border-radius:var(--radius-2);box-shadow:var(--shadow-1)}.demo-breakpoints-card-title{font-weight:600;color:var(--ds__palette__surface-contrast)}.demo-breakpoints-card-text{font-size:.875rem;color:var(--ds__palette__tertiary-dark)}.demo-breakpoints-card-icon--primary{color:var(--ds__palette__primary-main)}.demo-breakpoints-card-icon--secondary{color:var(--ds__palette__secondary-main)}.demo-breakpoints-card-icon--info{color:var(--ds__palette__info-main)}}@media (min-width:768px){#DemoBreakpointsCards{flex-direction:row;gap:var(--space-4);padding:var(--space-6)}}#DemoButtons{background:transparent;.section,.surfaces-grid{margin-block:var(--density-3)}.surfaces-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--density-3)}pre{overflow-x:auto}label{margin-inline-end:var(--density-2)}}#DemoColors{.demo-section{gap:var(--density-3)}.demo-header,.demo-section{display:flex;flex-direction:column}.demo-header{gap:var(--density-2)}.demo-title{font-family:var(--h4-font-family,var(--font-ui));font-size:var(--h4-size);line-height:var(--h4-line,1.4);font-weight:var(--h4-weight,600);letter-spacing:var(--h4-spacing,normal);text-transform:var(--h4-transform,none);text-decoration:var(--h4-decoration,none);font-style:var(--h4-style,normal);margin-block-start:var(--h4-margin-block-start,auto);margin-block-end:var(--h4-margin-block-end,auto);margin:0}.demo-subtitle{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);max-width:720px}.colors-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--density-4)}.color-family{display:flex;flex-direction:column;gap:var(--density-2)}.family-title{font-family:var(--h5-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h5-size);line-height:var(--h5-line,1.4);font-weight:var(--h5-weight,600);letter-spacing:var(--h5-spacing,normal);text-transform:var(--h5-transform,none);text-decoration:var(--h5-decoration,none);font-style:var(--h5-style,normal);margin-block-start:var(--h5-margin-block-start,auto);margin-block-end:var(--h5-margin-block-end,auto);margin:0;text-transform:capitalize}.family-grid{list-style:none;padding:0;margin:0;gap:var(--density-1)}.color-token,.family-grid{display:flex;flex-direction:column}.color-token{border-radius:var(--radius-1);padding:var(--density-1);background:color-mix(in srgb,var(--ds__palette__surface-main) 20%,transparent);justify-content:center;align-items:center;position:relative;height:var(--density-8);min-width:0;transition:transform .2s ease,box-shadow .2s ease}.color-token:hover{transform:scale(1.05);z-index:1;box-shadow:var(--shadow-2)}.token-shade{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);font-weight:700;opacity:.9;pointer-events:none}.token-values{display:flex;flex-direction:column;align-items:flex-end;gap:2px;position:absolute;bottom:var(--density-1);right:var(--density-1);pointer-events:none}.token-hex{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);font-family:monospace;font-weight:700;font-size:.75em}.token-rgb{font-family:var(--tag-font-family,var(--font-ui));font-size:var(--tag-size);line-height:var(--tag-line,1.5);font-weight:var(--tag-weight,400);letter-spacing:var(--tag-spacing,normal);text-transform:var(--tag-transform,none);text-decoration:var(--tag-decoration,none);font-style:var(--tag-style,normal);margin-block-start:var(--tag-margin-block-start,auto);margin-block-end:var(--tag-margin-block-end,auto);font-family:monospace;opacity:.7;font-size:.65em}.surfaces-playground-container{display:flex;flex-direction:column;gap:var(--density-2)}.surface-playground{display:flex;flex-direction:column;gap:var(--density-3);border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}@media (min-width:768px){.surface-playground{flex-direction:row;align-items:flex-start}}.surface-playground__controls{display:flex;flex-direction:column;gap:var(--density-2);min-width:250px}.surface-playground__controls label{display:flex;flex-direction:column;gap:var(--density-1);font-size:.9rem;font-weight:500}.surface-playground__controls select{box-sizing:border-box;font:inherit;width:100%;border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow);caret-color:var(--input-outlined-tone-neutral-base-caret,var(--input-outlined-base-caret));--input-tone-main:var(--ds__palette__neutral-main);--input-tone-dark:var(--ds__palette__neutral-dark);--input-tone-contrast:var(--ds__palette__neutral-contrast);padding:var(--density-1)}.surface-playground__controls select::placeholder{color:var(--input-outlined-tone-neutral-base-placeholder,var(--input-outlined-base-placeholder))}.surface-playground__controls select:focus{border:var(--input-outlined-tone-neutral-focus-border,var(--input-outlined-focus-border))}.surface-playground__controls select:invalid,.surface-playground__controls select[aria-invalid=true]{border:var(--input-outlined-tone-neutral-invalid-border,var(--input-outlined-invalid-border))}.surface-playground__controls select:disabled,.surface-playground__controls select[aria-disabled=true]{opacity:var(--input-outlined-tone-neutral-disabled-opacity,var(--input-outlined-disabled-opacity))}.surface-playground__preview{flex:1;display:flex;flex-direction:column;gap:var(--density-2)}.demo-code-block{padding:var(--surface-outlined-padding);border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);border-radius:var(--radius-2);overflow:hidden}.code-header{display:flex;justify-content:space-between;align-items:center;padding:var(--density-1) var(--density-2);background:var(--ds__palette__neutral-dark);color:var(--ds__palette__neutral-contrast)}.code-file{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);opacity:.8}.chip--blue-50{background:var(--ds__color__blue-50)}.chip--blue-100{background:var(--ds__color__blue-100)}.chip--blue-200{background:var(--ds__color__blue-200)}.chip--blue-300{background:var(--ds__color__blue-300)}.chip--blue-400{background:var(--ds__color__blue-400)}.chip--blue-500{background:var(--ds__color__blue-500)}.chip--blue-600{background:var(--ds__color__blue-600)}.chip--blue-700{background:var(--ds__color__blue-700)}.chip--blue-800{background:var(--ds__color__blue-800)}.chip--blue-900{background:var(--ds__color__blue-900)}.chip--indigo-50{background:var(--ds__color__indigo-50)}.chip--indigo-100{background:var(--ds__color__indigo-100)}.chip--indigo-200{background:var(--ds__color__indigo-200)}.chip--indigo-300{background:var(--ds__color__indigo-300)}.chip--indigo-400{background:var(--ds__color__indigo-400)}.chip--indigo-500{background:var(--ds__color__indigo-500)}.chip--indigo-600{background:var(--ds__color__indigo-600)}.chip--indigo-700{background:var(--ds__color__indigo-700)}.chip--indigo-800{background:var(--ds__color__indigo-800)}.chip--indigo-900{background:var(--ds__color__indigo-900)}.chip--purple-50{background:var(--ds__color__purple-50)}.chip--purple-100{background:var(--ds__color__purple-100)}.chip--purple-200{background:var(--ds__color__purple-200)}.chip--purple-300{background:var(--ds__color__purple-300)}.chip--purple-400{background:var(--ds__color__purple-400)}.chip--purple-500{background:var(--ds__color__purple-500)}.chip--purple-600{background:var(--ds__color__purple-600)}.chip--purple-700{background:var(--ds__color__purple-700)}.chip--purple-800{background:var(--ds__color__purple-800)}.chip--purple-900{background:var(--ds__color__purple-900)}.chip--pink-50{background:var(--ds__color__pink-50)}.chip--pink-100{background:var(--ds__color__pink-100)}.chip--pink-200{background:var(--ds__color__pink-200)}.chip--pink-300{background:var(--ds__color__pink-300)}.chip--pink-400{background:var(--ds__color__pink-400)}.chip--pink-500{background:var(--ds__color__pink-500)}.chip--pink-600{background:var(--ds__color__pink-600)}.chip--pink-700{background:var(--ds__color__pink-700)}.chip--pink-800{background:var(--ds__color__pink-800)}.chip--pink-900{background:var(--ds__color__pink-900)}.chip--red-50{background:var(--ds__color__red-50)}.chip--red-100{background:var(--ds__color__red-100)}.chip--red-200{background:var(--ds__color__red-200)}.chip--red-300{background:var(--ds__color__red-300)}.chip--red-400{background:var(--ds__color__red-400)}.chip--red-500{background:var(--ds__color__red-500)}.chip--red-600{background:var(--ds__color__red-600)}.chip--red-700{background:var(--ds__color__red-700)}.chip--red-800{background:var(--ds__color__red-800)}.chip--red-900{background:var(--ds__color__red-900)}.chip--orange-50{background:var(--ds__color__orange-50)}.chip--orange-100{background:var(--ds__color__orange-100)}.chip--orange-200{background:var(--ds__color__orange-200)}.chip--orange-300{background:var(--ds__color__orange-300)}.chip--orange-400{background:var(--ds__color__orange-400)}.chip--orange-500{background:var(--ds__color__orange-500)}.chip--orange-600{background:var(--ds__color__orange-600)}.chip--orange-700{background:var(--ds__color__orange-700)}.chip--orange-800{background:var(--ds__color__orange-800)}.chip--orange-900{background:var(--ds__color__orange-900)}.chip--yellow-50{background:var(--ds__color__yellow-50)}.chip--yellow-100{background:var(--ds__color__yellow-100)}.chip--yellow-200{background:var(--ds__color__yellow-200)}.chip--yellow-300{background:var(--ds__color__yellow-300)}.chip--yellow-400{background:var(--ds__color__yellow-400)}.chip--yellow-500{background:var(--ds__color__yellow-500)}.chip--yellow-600{background:var(--ds__color__yellow-600)}.chip--yellow-700{background:var(--ds__color__yellow-700)}.chip--yellow-800{background:var(--ds__color__yellow-800)}.chip--yellow-900{background:var(--ds__color__yellow-900)}.chip--green-50{background:var(--ds__color__green-50)}.chip--green-100{background:var(--ds__color__green-100)}.chip--green-200{background:var(--ds__color__green-200)}.chip--green-300{background:var(--ds__color__green-300)}.chip--green-400{background:var(--ds__color__green-400)}.chip--green-500{background:var(--ds__color__green-500)}.chip--green-600{background:var(--ds__color__green-600)}.chip--green-700{background:var(--ds__color__green-700)}.chip--green-800{background:var(--ds__color__green-800)}.chip--green-900{background:var(--ds__color__green-900)}.chip--teal-50{background:var(--ds__color__teal-50)}.chip--teal-100{background:var(--ds__color__teal-100)}.chip--teal-200{background:var(--ds__color__teal-200)}.chip--teal-300{background:var(--ds__color__teal-300)}.chip--teal-400{background:var(--ds__color__teal-400)}.chip--teal-500{background:var(--ds__color__teal-500)}.chip--teal-600{background:var(--ds__color__teal-600)}.chip--teal-700{background:var(--ds__color__teal-700)}.chip--teal-800{background:var(--ds__color__teal-800)}.chip--teal-900{background:var(--ds__color__teal-900)}.chip--cyan-50{background:var(--ds__color__cyan-50)}.chip--cyan-100{background:var(--ds__color__cyan-100)}.chip--cyan-200{background:var(--ds__color__cyan-200)}.chip--cyan-300{background:var(--ds__color__cyan-300)}.chip--cyan-400{background:var(--ds__color__cyan-400)}.chip--cyan-500{background:var(--ds__color__cyan-500)}.chip--cyan-600{background:var(--ds__color__cyan-600)}.chip--cyan-700{background:var(--ds__color__cyan-700)}.chip--cyan-800{background:var(--ds__color__cyan-800)}.chip--cyan-900{background:var(--ds__color__cyan-900)}.chip--gray-50{background:var(--ds__color__gray-50)}.chip--gray-100{background:var(--ds__color__gray-100)}.chip--gray-200{background:var(--ds__color__gray-200)}.chip--gray-300{background:var(--ds__color__gray-300)}.chip--gray-400{background:var(--ds__color__gray-400)}.chip--gray-500{background:var(--ds__color__gray-500)}.chip--gray-600{background:var(--ds__color__gray-600)}.chip--gray-700{background:var(--ds__color__gray-700)}.chip--gray-800{background:var(--ds__color__gray-800)}.chip--gray-900{background:var(--ds__color__gray-900)}}#DemoDensity{.density-section{gap:var(--density-4)}.density-header,.density-section{display:flex;flex-direction:column}.density-header{gap:var(--density-2)}.density-code-snippet{background:var(--ds__palette__surface-dark);color:var(--ds__palette__surface-contrast);padding:var(--density-2);border-radius:var(--radius-1);font-family:monospace;font-size:.9rem;border-left:4px solid var(--ds__palette__primary-main);margin-top:var(--density-1)}.density-doll-container{display:flex;flex-direction:column;gap:var(--density-2)}.density-doll-controls{display:flex;gap:var(--density-2);align-items:center;position:relative;z-index:10}.density-slider{width:200px}.density-doll-wrapper{height:auto;overflow-x:auto;overflow-y:hidden;padding:var(--density-4);background:var(--ds__palette__surface-light);border-radius:var(--radius-2);border:1px solid var(--ds__palette__neutral-light);z-index:0}.concentric-content,.concentric-wrapper,.density-doll-wrapper{display:flex;justify-content:center;align-items:center;position:relative}.concentric-content{z-index:100;background:var(--ds__palette__surface-main);padding:var(--density-2);border-radius:var(--radius-1);min-width:80px;min-height:40px;box-shadow:var(--shadow-2);font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);font-weight:700;color:var(--ds__palette__primary-dark);border:1px solid var(--ds__palette__neutral-light)}.concentric-ring{position:absolute;border-radius:var(--radius-2);border:1px solid color-mix(in srgb,var(--ds__palette__primary-main) 20%,transparent);background:color-mix(in srgb,var(--ds__palette__primary-main) 3%,transparent);pointer-events:auto;transition:all .2s ease;display:flex;justify-content:center;align-items:flex-start;cursor:pointer}.concentric-ring.is-hovered,.concentric-ring:hover{border-color:var(--ds__palette__secondary-main);background:color-mix(in srgb,var(--ds__palette__secondary-main) 10%,transparent);box-shadow:0 0 0 1px var(--ds__palette__secondary-main)}.ring-label{background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);font-size:.6rem;padding:1px 4px;border-radius:0 0 4px 4px;opacity:0;transition:opacity .2s;margin-top:-1px}.concentric-ring.is-hovered .ring-label,.concentric-ring:hover .ring-label{opacity:1}.concentric-ring--density-1{inset:calc(var(--density-1) * -1);z-index:calc(20 - 1)}.concentric-ring--density-2{inset:calc(var(--density-2) * -1);z-index:calc(20 - 2)}.concentric-ring--density-3{inset:calc(var(--density-3) * -1);z-index:calc(20 - 3)}.concentric-ring--density-4{inset:calc(var(--density-4) * -1);z-index:calc(20 - 4)}.concentric-ring--density-5{inset:calc(var(--density-5) * -1);z-index:calc(20 - 5)}.concentric-ring--density-6{inset:calc(var(--density-6) * -1);z-index:calc(20 - 6)}.concentric-ring--density-7{inset:calc(var(--density-7) * -1);z-index:calc(20 - 7)}.concentric-ring--density-8{inset:calc(var(--density-8) * -1);z-index:calc(20 - 8)}.concentric-ring--density-9{inset:calc(var(--density-9) * -1);z-index:calc(20 - 9)}.concentric-ring--density-10{inset:calc(var(--density-10) * -1);z-index:calc(20 - 10)}.concentric-ring--density-11{inset:calc(var(--density-11) * -1);z-index:calc(20 - 11)}.concentric-ring--density-12{inset:calc(var(--density-12) * -1);z-index:calc(20 - 12)}.concentric-ring--density-13{inset:calc(var(--density-13) * -1);z-index:calc(20 - 13)}.concentric-ring--density-14{inset:calc(var(--density-14) * -1);z-index:calc(20 - 14)}.concentric-ring--density-15{inset:calc(var(--density-15) * -1);z-index:calc(20 - 15)}.concentric-ring--density-16{inset:calc(var(--density-16) * -1);z-index:calc(20 - 16)}.density-card,.density-grid,.density-grid-container{display:flex;flex-direction:column;gap:var(--density-2)}.density-card{border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);padding:var(--density-2);border-radius:var(--radius-1);height:auto;overflow-x:auto}.density-card__header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--density-2);border-bottom:1px solid color-mix(in srgb,var(--ds__palette__neutral-light) 50%,transparent)}.density-card__header-col{display:flex;flex-direction:column;gap:var(--space-1)}.density-card__header-col--bps,.density-card__header-col--main{justify-content:center}.density-card__header-col--right{flex-direction:row;align-items:center;gap:var(--density-2);justify-content:flex-end}.density-metric-group{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.density-card__viz{padding-top:var(--density-2);display:flex;justify-content:center;align-items:center;min-height:120px}.density-card__token{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);font-weight:700;font-family:monospace;color:var(--ds__palette__primary-main);background:color-mix(in srgb,var(--ds__palette__primary-main) 10%,transparent);padding:2px 6px;border-radius:4px;width:fit-content}.density-def-list{display:flex;flex-direction:column;gap:2px}.density-def-item{display:flex;gap:4px;font-family:monospace;font-size:.75rem;background:color-mix(in srgb,var(--ds__palette__neutral-light) 30%,transparent);padding:2px 4px;border-radius:2px;transition:all .2s ease}.density-def-item--active{background:color-mix(in srgb,var(--ds__palette__primary-main) 15%,transparent);color:var(--ds__palette__primary-dark);font-weight:700;box-shadow:0 0 0 1px color-mix(in srgb,var(--ds__palette__primary-main) 30%,transparent)}.density-def-bp{font-weight:700;opacity:.7}.density-def-val{opacity:.9}.density-card__edit-btn{padding:var(--density-1);border-radius:var(--radius-1);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main);box-shadow:var(--surface-outlined-shadow);--button-tone-main:var(--ds__palette__secondary-main);--button-tone-dark:var(--ds__palette__secondary-dark);--button-tone-contrast:var(--ds__palette__secondary-contrast);white-space:nowrap}.density-card__edit-btn:hover{color:var(--button-outlined-tone-secondary-hover-color,var(--button-outlined-hover-color));border:var(--button-outlined-tone-secondary-hover-border,var(--button-outlined-hover-border))}.density-card__edit-btn.is-selected,.density-card__edit-btn[aria-pressed=true],.density-card__edit-btn[aria-selected=true]{background:var(--button-outlined-tone-secondary-selected-bg,var(--button-outlined-selected-bg));color:var(--button-outlined-tone-secondary-selected-color,var(--button-outlined-selected-color));border:var(--button-outlined-tone-secondary-selected-border,var(--button-outlined-selected-border))}.density-metric-item{display:flex;align-items:baseline;gap:4px;font-family:monospace;font-size:.9rem}.density-metric-label{font-size:.75rem;opacity:.6}.density-metric-value{font-weight:500}.density-metric-value--highlight{color:var(--ds__palette__secondary-dark);font-weight:700}.density-concentric-viz{position:relative;width:100%;height:auto;min-height:100px;display:grid;place-items:center}.density-concentric-center{width:4px;height:4px;background:var(--ds__palette__primary-dark);border-radius:50%;position:relative;grid-area:1/1;z-index:10}.density-concentric-box{position:relative;grid-area:1/1;border:1px dashed;display:flex;align-items:center;justify-content:center;pointer-events:none}.density-concentric-inner{width:4px;height:4px;opacity:0}.density-concentric-label{position:absolute;top:2px;left:2px;font-size:.6rem;font-family:monospace;opacity:.8;line-height:1}.density-concentric-box--0{border-color:var(--ds__palette__secondary-main);background:color-mix(in srgb,var(--ds__palette__secondary-main) 5%,transparent);color:var(--ds__palette__secondary-dark);z-index:3}.density-concentric-box--1{border-color:var(--ds__palette__tertiary-main);background:color-mix(in srgb,var(--ds__palette__tertiary-main) 5%,transparent);color:var(--ds__palette__tertiary-dark);z-index:2}.density-concentric-box--2{border-color:var(--ds__palette__primary-main);background:color-mix(in srgb,var(--ds__palette__primary-main) 5%,transparent);color:var(--ds__palette__primary-dark);z-index:1}.density-concentric-box--active{border-style:solid;border-width:2px;border-color:var(--ds__palette__secondary-dark);background:color-mix(in srgb,var(--ds__palette__secondary-main) 15%,transparent);z-index:10;box-shadow:0 0 0 1px var(--ds__palette__surface-main)}}#DemoPalette,.demo-palette{.palette-header,.palette-section{display:flex;flex-direction:column;gap:var(--density-2)}.demo-title{font-family:var(--h4-font-family,var(--font-ui));font-size:var(--h4-size);line-height:var(--h4-line,1.4);font-weight:var(--h4-weight,600);letter-spacing:var(--h4-spacing,normal);text-transform:var(--h4-transform,none);text-decoration:var(--h4-decoration,none);font-style:var(--h4-style,normal);margin-block-start:var(--h4-margin-block-start,auto);margin-block-end:var(--h4-margin-block-end,auto);margin:0}.demo-subtitle{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);opacity:.75;margin:0;max-width:720px}.palette-stack{gap:var(--density-2)}.palette-card,.palette-stack{display:flex;flex-direction:column}.palette-card{padding:var(--surface-contained-padding);border-radius:var(--surface-contained-radius);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);gap:var(--density-1)}.palette-card__header{display:flex;flex-direction:column;gap:var(--density-2)}.palette-card__title{font-family:var(--h5-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h5-size);line-height:var(--h5-line,1.4);font-weight:var(--h5-weight,600);letter-spacing:var(--h5-spacing,normal);text-transform:var(--h5-transform,none);text-decoration:var(--h5-decoration,none);font-style:var(--h5-style,normal);margin-block-start:var(--h5-margin-block-start,auto);margin-block-end:var(--h5-margin-block-end,auto);margin:0}.palette-card__detail{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);margin:0;opacity:.85}.palette-token-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--density-2)}.palette-token{border-radius:var(--radius-1);padding:var(--density-1);background:color-mix(in srgb,var(--ds__palette__surface-main) 20%,transparent);display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;height:var(--density-11);min-width:0;transition:transform .2s ease,box-shadow .2s ease}.palette-token:hover{transform:scale(1.02);z-index:1;box-shadow:var(--shadow-2)}.palette-token:last-child{grid-column:1/-1;height:auto;flex-direction:column;justify-content:center;align-items:flex-start;padding:var(--density-2);gap:var(--density-1)}.palette-token:last-child .token-values{position:static;align-items:flex-start}.token-name{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);opacity:.8}.token-values{display:flex;flex-direction:column;align-items:flex-end;gap:2px;position:absolute;bottom:var(--density-1);right:var(--density-1)}.token-hex{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);font-family:monospace;opacity:.8}.token-rgb{font-family:var(--tag-font-family,var(--font-ui));font-size:var(--tag-size);line-height:var(--tag-line,1.5);font-weight:var(--tag-weight,400);letter-spacing:var(--tag-spacing,normal);text-transform:var(--tag-transform,none);text-decoration:var(--tag-decoration,none);font-style:var(--tag-style,normal);margin-block-start:var(--tag-margin-block-start,auto);margin-block-end:var(--tag-margin-block-end,auto);font-family:monospace;opacity:.7;font-size:.7em}.surfaces-playground-container{display:flex;flex-direction:column;gap:var(--density-2)}.surface-playground{display:flex;flex-direction:column;gap:var(--density-3);border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}@media (min-width:768px){.surface-playground{flex-direction:row;align-items:flex-start}}.surface-playground__controls{display:flex;flex-direction:column;gap:var(--density-2);min-width:250px}.surface-playground__controls label{display:flex;flex-direction:column;gap:var(--density-1);font-size:.9rem;font-weight:500}.surface-playground__controls select{box-sizing:border-box;font:inherit;width:100%;border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow);caret-color:var(--input-outlined-tone-neutral-base-caret,var(--input-outlined-base-caret));--input-tone-main:var(--ds__palette__neutral-main);--input-tone-dark:var(--ds__palette__neutral-dark);--input-tone-contrast:var(--ds__palette__neutral-contrast);padding:var(--density-1)}.surface-playground__controls select::placeholder{color:var(--input-outlined-tone-neutral-base-placeholder,var(--input-outlined-base-placeholder))}.surface-playground__controls select:focus{border:var(--input-outlined-tone-neutral-focus-border,var(--input-outlined-focus-border))}.surface-playground__controls select:invalid,.surface-playground__controls select[aria-invalid=true]{border:var(--input-outlined-tone-neutral-invalid-border,var(--input-outlined-invalid-border))}.surface-playground__controls select:disabled,.surface-playground__controls select[aria-disabled=true]{opacity:var(--input-outlined-tone-neutral-disabled-opacity,var(--input-outlined-disabled-opacity))}.surface-playground__preview{flex:1;display:flex;flex-direction:column;gap:var(--density-2)}.demo-code-block{padding:var(--surface-outlined-padding);border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);border-radius:var(--radius-2);overflow:hidden}.code-header{display:flex;justify-content:space-between;align-items:center;padding:var(--density-1) var(--density-2);background:var(--ds__palette__neutral-dark);color:var(--ds__palette__neutral-contrast)}.code-file{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);opacity:.8}.palette-card-primary-light,.palette-card-primary-main{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__primary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__primary-main);box-shadow:var(--shadow-1)}.palette-card-primary-light{background:var(--ds__palette__primary-light)}.palette-card-primary-dark{background:var(--ds__palette__primary-main);background:var(--ds__palette__primary-dark)}.palette-card-primary-contrast,.palette-card-primary-dark{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__primary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);box-shadow:var(--shadow-1)}.palette-card-primary-contrast{background:var(--ds__palette__primary-main);background:var(--ds__palette__primary-contrast);color:var(--ds__palette__primary-dark)}.palette-card-secondary-light,.palette-card-secondary-main{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__secondary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__secondary-main);box-shadow:var(--shadow-1)}.palette-card-secondary-light{background:var(--ds__palette__secondary-light)}.palette-card-secondary-dark{background:var(--ds__palette__secondary-main);background:var(--ds__palette__secondary-dark)}.palette-card-secondary-contrast,.palette-card-secondary-dark{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__secondary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);box-shadow:var(--shadow-1)}.palette-card-secondary-contrast{background:var(--ds__palette__secondary-main);background:var(--ds__palette__secondary-contrast);color:var(--ds__palette__secondary-dark)}.palette-card-tertiary-light,.palette-card-tertiary-main{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__tertiary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__tertiary-main);box-shadow:var(--shadow-1)}.palette-card-tertiary-light{background:var(--ds__palette__tertiary-light)}.palette-card-tertiary-dark{background:var(--ds__palette__tertiary-main);background:var(--ds__palette__tertiary-dark)}.palette-card-tertiary-contrast,.palette-card-tertiary-dark{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__tertiary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);box-shadow:var(--shadow-1)}.palette-card-tertiary-contrast{background:var(--ds__palette__tertiary-main);background:var(--ds__palette__tertiary-contrast);color:var(--ds__palette__tertiary-dark)}.palette-card-success-light,.palette-card-success-main{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__success-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__success-main);box-shadow:var(--shadow-1)}.palette-card-success-light{background:var(--ds__palette__success-light)}.palette-card-success-dark{background:var(--ds__palette__success-main);background:var(--ds__palette__success-dark)}.palette-card-success-contrast,.palette-card-success-dark{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__success-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);box-shadow:var(--shadow-1)}.palette-card-success-contrast{background:var(--ds__palette__success-main);background:var(--ds__palette__success-contrast);color:var(--ds__palette__success-dark)}.palette-card-info-light,.palette-card-info-main{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__info-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__info-main);box-shadow:var(--shadow-1)}.palette-card-info-light{background:var(--ds__palette__info-light)}.palette-card-info-dark{background:var(--ds__palette__info-main);background:var(--ds__palette__info-dark)}.palette-card-info-contrast,.palette-card-info-dark{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__info-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);box-shadow:var(--shadow-1)}.palette-card-info-contrast{background:var(--ds__palette__info-main);background:var(--ds__palette__info-contrast);color:var(--ds__palette__info-dark)}.palette-card-warning-light,.palette-card-warning-main{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__warning-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__warning-main);box-shadow:var(--shadow-1)}.palette-card-warning-light{background:var(--ds__palette__warning-light)}.palette-card-warning-dark{background:var(--ds__palette__warning-main);background:var(--ds__palette__warning-dark)}.palette-card-warning-contrast,.palette-card-warning-dark{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__warning-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);box-shadow:var(--shadow-1)}.palette-card-warning-contrast{background:var(--ds__palette__warning-main);background:var(--ds__palette__warning-contrast);color:var(--ds__palette__warning-dark)}.palette-card-error-light,.palette-card-error-main{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__error-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__error-main);box-shadow:var(--shadow-1)}.palette-card-error-light{background:var(--ds__palette__error-light)}.palette-card-error-dark{background:var(--ds__palette__error-main);background:var(--ds__palette__error-dark)}.palette-card-error-contrast,.palette-card-error-dark{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__error-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);box-shadow:var(--shadow-1)}.palette-card-error-contrast{background:var(--ds__palette__error-main);background:var(--ds__palette__error-contrast);color:var(--ds__palette__error-dark)}.palette-card-dark-light,.palette-card-dark-main{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__dark-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__dark-main);box-shadow:var(--shadow-1)}.palette-card-dark-light{background:var(--ds__palette__dark-light)}.palette-card-dark-dark{background:var(--ds__palette__dark-main);background:var(--ds__palette__dark-dark)}.palette-card-dark-contrast,.palette-card-dark-dark{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__dark-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);box-shadow:var(--shadow-1)}.palette-card-dark-contrast{background:var(--ds__palette__dark-main);background:var(--ds__palette__dark-contrast);color:var(--ds__palette__dark-dark)}.palette-card-neutral-light,.palette-card-neutral-main{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__neutral-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__neutral-main);box-shadow:var(--shadow-1)}.palette-card-neutral-light{background:var(--ds__palette__neutral-light)}.palette-card-neutral-dark{background:var(--ds__palette__neutral-main);background:var(--ds__palette__neutral-dark)}.palette-card-neutral-contrast,.palette-card-neutral-dark{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__neutral-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);box-shadow:var(--shadow-1)}.palette-card-neutral-contrast{background:var(--ds__palette__neutral-main);background:var(--ds__palette__neutral-contrast);color:var(--ds__palette__neutral-dark)}.palette-card-light-light,.palette-card-light-main{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__light-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__light-main);box-shadow:var(--shadow-1)}.palette-card-light-light{background:var(--ds__palette__light-light)}.palette-card-light-dark{background:var(--ds__palette__light-main);background:var(--ds__palette__light-dark)}.palette-card-light-contrast,.palette-card-light-dark{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__light-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);box-shadow:var(--shadow-1)}.palette-card-light-contrast{background:var(--ds__palette__light-main);background:var(--ds__palette__light-contrast);color:var(--ds__palette__light-dark)}.palette-card-surface-light,.palette-card-surface-main{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__surface-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__surface-main);box-shadow:var(--shadow-1)}.palette-card-surface-light{background:var(--ds__palette__surface-light)}.palette-card-surface-dark{background:var(--ds__palette__surface-main);background:var(--ds__palette__surface-dark)}.palette-card-surface-contrast,.palette-card-surface-dark{padding:var(--density-1);border-radius:var(--radius-1);color:var(--ds__palette__surface-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);box-shadow:var(--shadow-1)}.palette-card-surface-contrast{background:var(--ds__palette__surface-main);background:var(--ds__palette__surface-contrast);color:var(--ds__palette__surface-dark)}}#DemoProductivity{.prod-container{display:grid;grid-template-columns:1fr;gap:var(--density-4)}@media (min-width:1024px){.prod-container{grid-template-columns:1fr 1fr}}.prod-card{border-radius:var(--surface-contained-radius);background:var(--surface-contained-bg);color:var(--surface-contained-color);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);display:flex;flex-direction:column;gap:var(--density-4);width:100%;padding:var(--density-3);margin:0 auto}@media (min-width:768px){.prod-card{width:480px;padding:var(--density-5)}}.prod-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--density-3)}@media (min-width:480px){.prod-header{flex-direction:row;text-align:left}}.prod-avatar{width:80px;height:80px;border-radius:9999px;background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:2rem;box-shadow:var(--shadow-2);border:4px solid var(--ds__palette__surface-main)}.prod-info{display:flex;flex-direction:column;gap:var(--density-1)}.prod-title{font-family:var(--h4-font-family,var(--font-ui));font-size:var(--h4-size);line-height:var(--h4-line,1.4);font-weight:var(--h4-weight,600);letter-spacing:var(--h4-spacing,normal);text-transform:var(--h4-transform,none);text-decoration:var(--h4-decoration,none);font-style:var(--h4-style,normal);margin-block-start:var(--h4-margin-block-start,auto);margin-block-end:var(--h4-margin-block-end,auto);color:var(--ds__palette__text-primary);margin:0}.prod-subtitle{font-family:var(--body-sm-font-family,var(--font-ui));font-size:var(--body-sm-size);line-height:var(--body-sm-line,1.5);font-weight:var(--body-sm-weight,400);letter-spacing:var(--body-sm-spacing,normal);text-transform:var(--body-sm-transform,none);text-decoration:var(--body-sm-decoration,none);font-style:var(--body-sm-style,normal);margin-block-start:var(--body-sm-margin-block-start,auto);margin-block-end:var(--body-sm-margin-block-end,auto);color:var(--ds__palette__text-secondary);margin:0;text-transform:uppercase;letter-spacing:1px;font-weight:600}.prod-stats{display:flex;justify-content:space-around;padding:var(--density-3) 0;border-top:1px solid var(--ds__palette__neutral-light);border-bottom:1px solid var(--ds__palette__neutral-light);background:var(--ds__palette__surface-subtle);border-radius:var(--radius-2)}.prod-stat{display:flex;flex-direction:column;align-items:center;gap:var(--density-1)}.prod-stat-val{font-family:var(--h5-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h5-size);line-height:var(--h5-line,1.4);font-weight:var(--h5-weight,600);letter-spacing:var(--h5-spacing,normal);text-transform:var(--h5-transform,none);text-decoration:var(--h5-decoration,none);font-style:var(--h5-style,normal);margin-block-start:var(--h5-margin-block-start,auto);margin-block-end:var(--h5-margin-block-end,auto);color:var(--ds__palette__primary-main);margin:0;line-height:1}.prod-stat-label{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);color:var(--ds__palette__text-secondary);font-weight:600}.prod-actions{display:flex;flex-direction:column;gap:var(--density-2)}@media (min-width:480px){.prod-actions{flex-direction:row}}.prod-btn-primary{border-radius:var(--surface-contained-radius);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);--button-tone-main:var(--ds__palette__primary-main);--button-tone-dark:var(--ds__palette__primary-dark);--button-tone-contrast:var(--ds__palette__primary-contrast);flex:1;justify-content:center;padding:var(--density-3)}.prod-btn-primary:hover{background:var(--button-contained-tone-primary-hover-bg,var(--button-contained-hover-bg));color:var(--button-contained-tone-primary-hover-color,var(--button-contained-hover-color))}.prod-btn-primary.is-selected,.prod-btn-primary[aria-pressed=true],.prod-btn-primary[aria-selected=true]{background:var(--button-contained-tone-primary-selected-bg,var(--button-contained-selected-bg));color:var(--button-contained-tone-primary-selected-color,var(--button-contained-selected-color))}.prod-btn-secondary{border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main);box-shadow:var(--surface-outlined-shadow);--button-tone-main:var(--ds__palette__secondary-main);--button-tone-dark:var(--ds__palette__secondary-dark);--button-tone-contrast:var(--ds__palette__secondary-contrast);flex:1;justify-content:center;padding:var(--density-3)}.prod-btn-secondary:hover{color:var(--button-outlined-tone-secondary-hover-color,var(--button-outlined-hover-color));border:var(--button-outlined-tone-secondary-hover-border,var(--button-outlined-hover-border))}.prod-btn-secondary.is-selected,.prod-btn-secondary[aria-pressed=true],.prod-btn-secondary[aria-selected=true]{background:var(--button-outlined-tone-secondary-selected-bg,var(--button-outlined-selected-bg));color:var(--button-outlined-tone-secondary-selected-color,var(--button-outlined-selected-color));border:var(--button-outlined-tone-secondary-selected-border,var(--button-outlined-selected-border))}.prod-code-block{background:#1e1e1e;color:#d4d4d4;padding:var(--density-2);border-radius:var(--radius-2);font-family:monospace;font-size:.85rem;overflow-x:auto;border:1px solid #333}.prod-code-title{color:#9cdcfe;font-weight:700;margin-bottom:var(--density-1);display:block}.prod-highlight{color:#ce9178}.prod-comment{color:#6a9955}.prod-tab-btn:hover{color:var(--ds__palette__text-primary)}.prod-code-section{display:flex;flex-direction:column;gap:var(--density-3)}.prod-form,.prod-tab-content{margin-top:var(--density-3)}.prod-form{padding:var(--density-3);border:1px solid var(--ds__palette__neutral-light);border-radius:var(--radius-2);background:var(--ds__palette__surface-light);display:flex;flex-direction:column;gap:var(--space-2)}@media (min-width:768px){.prod-form{gap:var(--space-4)}}.prod-form-title{font-family:var(--h6-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h6-size);line-height:var(--h6-line,1.4);font-weight:var(--h6-weight,600);letter-spacing:var(--h6-spacing,normal);text-transform:var(--h6-transform,none);text-decoration:var(--h6-decoration,none);font-style:var(--h6-style,normal);margin-block-start:var(--h6-margin-block-start,auto);margin-block-end:var(--h6-margin-block-end,auto);margin:0;color:var(--ds__palette__text-primary)}.prod-form-row{display:flex;flex-direction:column;gap:var(--density-2)}@media (min-width:768px){.prod-form-row{flex-direction:row}}.prod-input-group{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}.prod-label{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);font-weight:700;color:var(--ds__palette__text-secondary)}.prod-input{box-sizing:border-box;font:inherit;width:100%;padding:var(--surface-outlined-padding);border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow);caret-color:var(--input-outlined-tone-neutral-base-caret,var(--input-outlined-base-caret));--input-tone-main:var(--ds__palette__neutral-main);--input-tone-dark:var(--ds__palette__neutral-dark);--input-tone-contrast:var(--ds__palette__neutral-contrast);font-size:.875rem}@media (min-width:768px){.prod-input{font-size:1rem}}.prod-input::placeholder{color:var(--input-outlined-tone-neutral-base-placeholder,var(--input-outlined-base-placeholder))}.prod-input:focus{border:var(--input-outlined-tone-neutral-focus-border,var(--input-outlined-focus-border))}.prod-input:invalid,.prod-input[aria-invalid=true]{border:var(--input-outlined-tone-neutral-invalid-border,var(--input-outlined-invalid-border))}.prod-input:disabled,.prod-input[aria-disabled=true]{opacity:var(--input-outlined-tone-neutral-disabled-opacity,var(--input-outlined-disabled-opacity))}.demo-grid-hero{display:grid;grid-template-columns:1fr;align-items:start;gap:var(--density-4);margin-top:var(--density-4)}@media (min-width:1024px){.demo-grid-hero{grid-template-columns:1fr 1fr}}.demo-preview{display:flex;justify-content:center;padding:var(--density-4);background:var(--ds__palette__surface-subtle);border-radius:var(--radius-3);border:1px solid var(--ds__palette__neutral-light)}.code-header{background:#252526;padding:var(--density-2) var(--density-3);border-bottom:1px solid #333;display:flex;align-items:center}.code-lang{font-size:.8rem;color:#9cdcfe;font-weight:700;text-transform:uppercase;letter-spacing:1px}.demo-code pre{margin:0;padding:var(--density-3);overflow-x:auto;line-height:1.5}.demo-code code{font-family:Fira Code,Consolas,monospace}.prod-tabs{display:flex;gap:var(--density-2);margin-bottom:var(--density-4);border-bottom:1px solid var(--ds__palette__neutral-light);padding-bottom:var(--density-2)}.prod-tab-btn{background:none;border:none;padding:var(--density-2) var(--density-4);font-size:1rem;font-weight:600;color:var(--ds__palette__text-secondary);cursor:pointer;border-radius:var(--radius-2);transition:all .2s ease}.prod-tab-btn:hover{background:var(--ds__palette__surface-subtle);color:var(--ds__palette__primary-main)}.prod-tab-btn.active{background:var(--ds__palette__primary-light);color:var(--ds__palette__primary-dark)}.prod-comparison-grid{display:flex;flex-direction:column;align-items:center;gap:var(--density-4)}.demo-code{background:#1e1e1e;border-radius:var(--radius-3);overflow:hidden;color:#d4d4d4;font-family:monospace;font-size:.9rem;border:1px solid var(--ds__palette__neutral-light);box-shadow:var(--shadow-2);width:100%;max-width:600px}}#DemoShadows{.demo-shadows{gap:var(--space-8);padding:var(--space-4)}.demo-shadows,.section{display:flex;flex-direction:column}.section{gap:var(--space-4)}.section-title{font:font(h4);color:var(--ds__palette__text-main);margin-bottom:var(--space-2)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}.card{flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:var(--border-1);border-radius:var(--radius-2)}.card,.preview-box{display:flex;background:var(--ds__palette__surface-main)}.preview-box{width:100%;height:100px;align-items:center;justify-content:center}.label,.preview-box{color:var(--ds__palette__text-secondary);font:font(body-sm)}.label{font-family:monospace}.playground{display:flex;flex-direction:column;background:var(--ds__palette__surface-main);padding:var(--space-6);border-radius:var(--radius-3);border:var(--border-1)}@media (min-width:768px){.playground{display:grid;grid-template-columns:300px 1fr}}.controls{gap:var(--space-4);padding:var(--density-2)}.control-group,.controls{display:flex;flex-direction:column}.control-group{gap:var(--space-2)}.control-label{font:font(label);color:var(--ds__palette__text-secondary)}.select{box-sizing:border-box;font:inherit;width:100%;border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow);caret-color:var(--input-outlined-tone-neutral-base-caret,var(--input-outlined-base-caret));--input-tone-main:var(--ds__palette__neutral-main);--input-tone-dark:var(--ds__palette__neutral-dark);--input-tone-contrast:var(--ds__palette__neutral-contrast);padding:var(--space-2)}.select::placeholder{color:var(--input-outlined-tone-neutral-base-placeholder,var(--input-outlined-base-placeholder))}.select:focus{border:var(--input-outlined-tone-neutral-focus-border,var(--input-outlined-focus-border))}.select:invalid,.select[aria-invalid=true]{border:var(--input-outlined-tone-neutral-invalid-border,var(--input-outlined-invalid-border))}.select:disabled,.select[aria-disabled=true]{opacity:var(--input-outlined-tone-neutral-disabled-opacity,var(--input-outlined-disabled-opacity))}.preview-area{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;padding:var(--density-2)}.live-preview{flex:1;background:var(--ds__palette__surface-light);border-radius:var(--radius-2);min-height:300px;padding:var(--space-8)}.demo-element,.live-preview{display:flex;align-items:center;justify-content:center}.demo-element{width:200px;height:200px;background:var(--ds__palette__surface-main);color:var(--ds__palette__text-main);font-weight:700;transition:all .3s ease}.demo-code-block{border-radius:var(--radius-2);overflow:hidden;border:var(--border-1)}}#DemoSpacing{.spacing-section{display:flex;flex-direction:column;gap:var(--density-4)}.spacing-doll-container,.spacing-header{display:flex;flex-direction:column;gap:var(--density-2)}.spacing-doll-controls{display:flex;gap:var(--density-2);align-items:center}.spacing-doll-wrapper{overflow:auto;padding:var(--density-4);background:var(--ds__palette__surface-light);border-radius:var(--radius-2);border:1px solid var(--ds__palette__neutral-light);transition:all .3s ease}.concentric-content,.concentric-wrapper,.spacing-doll-wrapper{display:flex;justify-content:center;align-items:center;position:relative}.concentric-content{z-index:100;background:var(--ds__palette__surface-main);padding:var(--density-2);border-radius:var(--radius-1);min-width:80px;min-height:40px;box-shadow:var(--shadow-2);font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);font-weight:700;color:var(--ds__palette__primary-dark);border:1px solid var(--ds__palette__neutral-light)}.concentric-ring{position:absolute;border-radius:var(--radius-2);border:1px solid color-mix(in srgb,var(--ds__palette__primary-main) 20%,transparent);background:color-mix(in srgb,var(--ds__palette__primary-main) 3%,transparent);pointer-events:auto;transition:all .2s ease;display:flex;justify-content:center;align-items:flex-start;cursor:pointer}.concentric-ring.is-hovered,.concentric-ring:hover{border-color:var(--ds__palette__secondary-main);background:color-mix(in srgb,var(--ds__palette__secondary-main) 10%,transparent);box-shadow:0 0 0 1px var(--ds__palette__secondary-main)}.ring-label{background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);font-size:.6rem;padding:1px 4px;border-radius:0 0 4px 4px;opacity:0;transition:opacity .2s;margin-top:-1px}.concentric-ring.is-hovered .ring-label,.concentric-ring:hover .ring-label{opacity:1}.concentric-ring--1{inset:calc(var(--space-1) * -1);z-index:calc(20 - 1)}.concentric-ring--2{inset:calc(var(--space-2) * -1);z-index:calc(20 - 2)}.concentric-ring--3{inset:calc(var(--space-3) * -1);z-index:calc(20 - 3)}.concentric-ring--4{inset:calc(var(--space-4) * -1);z-index:calc(20 - 4)}.concentric-ring--5{inset:calc(var(--space-5) * -1);z-index:calc(20 - 5)}.concentric-ring--6{inset:calc(var(--space-6) * -1);z-index:calc(20 - 6)}.concentric-ring--7{inset:calc(var(--space-7) * -1);z-index:calc(20 - 7)}.concentric-ring--8{inset:calc(var(--space-8) * -1);z-index:calc(20 - 8)}.concentric-ring--9{inset:calc(var(--space-9) * -1);z-index:calc(20 - 9)}.concentric-ring--10{inset:calc(var(--space-10) * -1);z-index:calc(20 - 10)}.concentric-ring--11{inset:calc(var(--space-11) * -1);z-index:calc(20 - 11)}.concentric-ring--12{inset:calc(var(--space-12) * -1);z-index:calc(20 - 12)}.concentric-ring--13{inset:calc(var(--space-13) * -1);z-index:calc(20 - 13)}.concentric-ring--14{inset:calc(var(--space-14) * -1);z-index:calc(20 - 14)}.concentric-ring--15{inset:calc(var(--space-15) * -1);z-index:calc(20 - 15)}.concentric-ring--16{inset:calc(var(--space-16) * -1);z-index:calc(20 - 16)}.spacing-grid{display:flex;flex-direction:column;gap:var(--density-1)}.spacing-card{border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);padding:var(--density-2);display:grid;gap:var(--density-2);border-radius:var(--radius-2);transition:all .2s ease;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"token input" "sep sep" "preview preview"}@media (min-width:768px){.spacing-card{grid-template-columns:120px 1fr auto;grid-template-areas:"token input preview";padding:var(--density-1) var(--density-3)}}.spacing-card:hover{border-color:var(--ds__palette__primary-main);box-shadow:var(--shadow-1)}.spacing-card__token{grid-area:token;font-family:var(--subtitle2-font-family,var(--font-ui));font-size:var(--subtitle2-size);line-height:var(--subtitle2-line,1.5);font-weight:var(--subtitle2-weight,400);letter-spacing:var(--subtitle2-spacing,normal);text-transform:var(--subtitle2-transform,none);text-decoration:var(--subtitle2-decoration,none);font-style:var(--subtitle2-style,normal);margin-block-start:var(--subtitle2-margin-block-start,auto);margin-block-end:var(--subtitle2-margin-block-end,auto);font-family:monospace;font-weight:700;color:var(--ds__palette__primary-dark)}.spacing-card__input-wrapper{grid-area:input;display:flex;justify-content:flex-end}.spacing-card__input{width:100%;max-width:120px;padding:var(--space-1) var(--density-1);background:transparent;border:1px solid var(--ds__palette__neutral-main);border-radius:var(--radius-1);font-family:monospace;font-size:.85rem;text-align:right;color:var(--ds__palette__surface-contrast)}@media (min-width:768px){.spacing-card__input-wrapper{justify-content:flex-start}.spacing-card__input{text-align:left;max-width:200px}}.spacing-card__input:focus{border-color:var(--ds__palette__primary-main);outline:none}.spacing-card__separator{grid-area:sep;height:1px;background:color-mix(in srgb,var(--ds__palette__neutral-light) 50%,transparent);width:100%;margin:var(--space-1) 0}@media (min-width:768px){.spacing-card__separator{display:none}}.spacing-card__preview{grid-area:preview;display:flex;justify-content:center;align-items:center;padding:var(--density-1) 0;min-height:40px}@media (min-width:768px){.spacing-card__preview{justify-content:flex-end;padding:0;min-width:60px}}.spacing-box{background:var(--ds__palette__primary-main);border-radius:2px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ds__palette__primary-main) 20%,transparent)}.spacing-box--1{width:var(--space-1);height:var(--space-1)}.spacing-box--2{width:var(--space-2);height:var(--space-2)}.spacing-box--3{width:var(--space-3);height:var(--space-3)}.spacing-box--4{width:var(--space-4);height:var(--space-4)}.spacing-box--5{width:var(--space-5);height:var(--space-5)}.spacing-box--6{width:var(--space-6);height:var(--space-6)}.spacing-box--7{width:var(--space-7);height:var(--space-7)}.spacing-box--8{width:var(--space-8);height:var(--space-8)}.spacing-box--9{width:var(--space-9);height:var(--space-9)}.spacing-box--10{width:var(--space-10);height:var(--space-10)}.spacing-box--11{width:var(--space-11);height:var(--space-11)}.spacing-box--12{width:var(--space-12);height:var(--space-12)}.spacing-box--13{width:var(--space-13);height:var(--space-13)}.spacing-box--14{width:var(--space-14);height:var(--space-14)}.spacing-box--15{width:var(--space-15);height:var(--space-15)}.spacing-box--16{width:var(--space-16);height:var(--space-16)}}#DemoSurfaces{.surfaces-section{display:flex;flex-direction:column;gap:var(--density-4);--space-0:0px}.surfaces-header,.surfaces-viz-container{display:flex;flex-direction:column;gap:var(--density-2)}.surfaces-viz-wrapper{display:flex;justify-content:center;align-items:center;padding:var(--density-4);background:var(--ds__palette__surface-light);border-radius:var(--radius-2);border:1px solid var(--ds__palette__neutral-light);min-height:300px}.surfaces-stack{position:relative;width:300px;height:200px}.surface-card-viz{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .3s ease;cursor:pointer}.surface-card-viz:hover{transform:translateY(-5px)}.surface-card-viz--contained{top:0;left:0;z-index:1}.surface-card-viz--outlined{top:20px;left:20px;z-index:2;backdrop-filter:blur(4px)}.surface-card-viz--flat{top:40px;left:40px;z-index:3}.surfaces-grid-container{display:flex;flex-direction:column;gap:var(--density-2)}.surfaces-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--density-2)}.surface-card{border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);padding:var(--density-2);display:flex;flex-direction:column;gap:var(--density-2);border-radius:var(--radius-1)}.surface-card__header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--density-1);border-bottom:1px solid color-mix(in srgb,var(--ds__palette__neutral-light) 50%,transparent)}.surface-card__title-group{display:flex;flex-direction:column;gap:var(--density-1)}.surface-card__desc{font-size:.85rem;color:var(--ds__palette__neutral-dark);line-height:1.4;max-width:90%}.surface-card__token{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);font-weight:700;font-family:monospace;color:var(--ds__palette__primary-main);background:color-mix(in srgb,var(--ds__palette__primary-main) 10%,transparent);padding:2px 6px;border-radius:4px;width:fit-content}.surfaces-doc-container{display:flex;flex-direction:column;gap:var(--density-2)}.surface-doc-card{border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}.surface-doc-intro{margin-bottom:var(--density-2);line-height:1.5}.surface-doc-subtitle{font-weight:700;margin-bottom:var(--density-1);color:var(--ds__palette__primary-dark)}.surface-doc-list{list-style:disc;padding-left:var(--density-3);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--density-1)}.surface-doc-list li{font-size:.9rem}.surface-card__edit-btn{padding:4px 12px;font-size:.8rem;cursor:pointer;background:var(--ds__palette__surface-light);border:1px solid var(--ds__palette__neutral-light);border-radius:var(--radius-1);transition:all .2s ease}.surface-card__edit-btn:hover{border-color:var(--ds__palette__primary-main);color:var(--ds__palette__primary-main)}.surface-card__preview{height:120px;background:color-mix(in srgb,var(--ds__palette__neutral-light) 10%,transparent);border-radius:var(--radius-1);padding:var(--density-2)}.surface-card__preview,.surface-preview-box{display:flex;justify-content:center;align-items:center}.surface-preview-box{min-width:120px;min-height:60px;font-size:.9rem;font-weight:500}.surface-props-list{display:flex;flex-direction:column;gap:4px;font-family:monospace;font-size:.8rem;color:var(--ds__palette__neutral-dark)}.surface-prop{display:flex;gap:8px}.surface-prop-key{opacity:.7;min-width:60px}.surfaces-playground-container{display:flex;flex-direction:column;gap:var(--density-2)}.surface-playground{display:flex;flex-direction:column;gap:var(--density-3);border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}@media (min-width:768px){.surface-playground{flex-direction:row;align-items:flex-start}}.surface-playground__controls{display:flex;flex-direction:column;gap:var(--density-2);min-width:250px}.surface-playground__controls label{display:flex;flex-direction:column;gap:var(--density-1);font-size:.9rem;font-weight:500}.surface-playground__controls select{box-sizing:border-box;font:inherit;width:100%;border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow);caret-color:var(--input-outlined-tone-neutral-base-caret,var(--input-outlined-base-caret));--input-tone-main:var(--ds__palette__neutral-main);--input-tone-dark:var(--ds__palette__neutral-dark);--input-tone-contrast:var(--ds__palette__neutral-contrast);padding:var(--density-1)}.surface-playground__controls select::placeholder{color:var(--input-outlined-tone-neutral-base-placeholder,var(--input-outlined-base-placeholder))}.surface-playground__controls select:focus{border:var(--input-outlined-tone-neutral-focus-border,var(--input-outlined-focus-border))}.surface-playground__controls select:invalid,.surface-playground__controls select[aria-invalid=true]{border:var(--input-outlined-tone-neutral-invalid-border,var(--input-outlined-invalid-border))}.surface-playground__controls select:disabled,.surface-playground__controls select[aria-disabled=true]{opacity:var(--input-outlined-tone-neutral-disabled-opacity,var(--input-outlined-disabled-opacity))}.surface-playground__preview{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ds__palette__neutral-light) 10%,transparent);border-radius:var(--radius-2);padding:var(--density-4);min-height:300px}.surface-playground__box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--density-2)}.surface-playground__box--contained-primary-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-contained-border)}.surface-playground__box--contained-primary-0,.surface-playground__box--contained-primary-1{background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-primary-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-contained-border)}.surface-playground__box--contained-primary-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-contained-border)}.surface-playground__box--contained-primary-2,.surface-playground__box--contained-primary-3{background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-primary-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-contained-border)}.surface-playground__box--contained-primary-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-contained-border)}.surface-playground__box--contained-primary-4,.surface-playground__box--contained-primary-5{background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-primary-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-contained-border)}.surface-playground__box--contained-secondary-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-contained-border)}.surface-playground__box--contained-secondary-0,.surface-playground__box--contained-secondary-1{background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-secondary-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-contained-border)}.surface-playground__box--contained-secondary-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-contained-border)}.surface-playground__box--contained-secondary-2,.surface-playground__box--contained-secondary-3{background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-secondary-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-contained-border)}.surface-playground__box--contained-secondary-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-contained-border)}.surface-playground__box--contained-secondary-4,.surface-playground__box--contained-secondary-5{background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-secondary-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-contained-border)}.surface-playground__box--contained-success-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-contained-border)}.surface-playground__box--contained-success-0,.surface-playground__box--contained-success-1{background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-success-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-contained-border)}.surface-playground__box--contained-success-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-contained-border)}.surface-playground__box--contained-success-2,.surface-playground__box--contained-success-3{background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-success-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-contained-border)}.surface-playground__box--contained-success-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-contained-border)}.surface-playground__box--contained-success-4,.surface-playground__box--contained-success-5{background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-success-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-contained-border)}.surface-playground__box--contained-info-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-contained-border)}.surface-playground__box--contained-info-0,.surface-playground__box--contained-info-1{background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-info-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-contained-border)}.surface-playground__box--contained-info-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-contained-border)}.surface-playground__box--contained-info-2,.surface-playground__box--contained-info-3{background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-info-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-contained-border)}.surface-playground__box--contained-info-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-contained-border)}.surface-playground__box--contained-info-4,.surface-playground__box--contained-info-5{background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-info-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-contained-border)}.surface-playground__box--contained-warning-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-contained-border)}.surface-playground__box--contained-warning-0,.surface-playground__box--contained-warning-1{background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-warning-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-contained-border)}.surface-playground__box--contained-warning-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-contained-border)}.surface-playground__box--contained-warning-2,.surface-playground__box--contained-warning-3{background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-warning-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-contained-border)}.surface-playground__box--contained-warning-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-contained-border)}.surface-playground__box--contained-warning-4,.surface-playground__box--contained-warning-5{background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-warning-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-contained-border)}.surface-playground__box--contained-error-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-contained-border)}.surface-playground__box--contained-error-0,.surface-playground__box--contained-error-1{background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-error-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-contained-border)}.surface-playground__box--contained-error-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-contained-border)}.surface-playground__box--contained-error-2,.surface-playground__box--contained-error-3{background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-error-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-contained-border)}.surface-playground__box--contained-error-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-contained-border)}.surface-playground__box--contained-error-4,.surface-playground__box--contained-error-5{background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-error-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-contained-border)}.surface-playground__box--contained-neutral-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-contained-border)}.surface-playground__box--contained-neutral-0,.surface-playground__box--contained-neutral-1{background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-neutral-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-contained-border)}.surface-playground__box--contained-neutral-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-contained-border)}.surface-playground__box--contained-neutral-2,.surface-playground__box--contained-neutral-3{background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-neutral-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-contained-border)}.surface-playground__box--contained-neutral-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-contained-border)}.surface-playground__box--contained-neutral-4,.surface-playground__box--contained-neutral-5{background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-neutral-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-contained-border)}.surface-playground__box--contained-none-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-contained-border)}.surface-playground__box--contained-none-0,.surface-playground__box--contained-none-1{background:var(--surface-contained-bg);color:var(--surface-contained-color);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-none-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-contained-border)}.surface-playground__box--contained-none-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-contained-border)}.surface-playground__box--contained-none-2,.surface-playground__box--contained-none-3{background:var(--surface-contained-bg);color:var(--surface-contained-color);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-none-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-contained-border)}.surface-playground__box--contained-none-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-contained-border)}.surface-playground__box--contained-none-4,.surface-playground__box--contained-none-5{background:var(--surface-contained-bg);color:var(--surface-contained-color);box-shadow:var(--surface-contained-shadow)}.surface-playground__box--contained-none-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-contained-border)}.surface-playground__box--outlined-primary-0{padding:var(--density-0);border-radius:var(--radius-0);border:1px solid var(--ds__palette__primary-main)}.surface-playground__box--outlined-primary-0,.surface-playground__box--outlined-primary-1{background:transparent;color:var(--ds__palette__primary-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-primary-1{padding:var(--density-1);border-radius:var(--radius-1);border:1px solid var(--ds__palette__primary-main)}.surface-playground__box--outlined-primary-2{padding:var(--density-2);border-radius:var(--radius-2);border:1px solid var(--ds__palette__primary-main)}.surface-playground__box--outlined-primary-2,.surface-playground__box--outlined-primary-3{background:transparent;color:var(--ds__palette__primary-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-primary-3{padding:var(--density-3);border-radius:var(--radius-3);border:1px solid var(--ds__palette__primary-main)}.surface-playground__box--outlined-primary-4{padding:var(--density-4);border-radius:var(--radius-4);border:1px solid var(--ds__palette__primary-main)}.surface-playground__box--outlined-primary-4,.surface-playground__box--outlined-primary-5{background:transparent;color:var(--ds__palette__primary-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-primary-5{padding:var(--density-5);border-radius:var(--radius-5);border:1px solid var(--ds__palette__primary-main)}.surface-playground__box--outlined-secondary-0{padding:var(--density-0);border-radius:var(--radius-0);border:1px solid var(--ds__palette__secondary-main)}.surface-playground__box--outlined-secondary-0,.surface-playground__box--outlined-secondary-1{background:transparent;color:var(--ds__palette__secondary-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-secondary-1{padding:var(--density-1);border-radius:var(--radius-1);border:1px solid var(--ds__palette__secondary-main)}.surface-playground__box--outlined-secondary-2{padding:var(--density-2);border-radius:var(--radius-2);border:1px solid var(--ds__palette__secondary-main)}.surface-playground__box--outlined-secondary-2,.surface-playground__box--outlined-secondary-3{background:transparent;color:var(--ds__palette__secondary-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-secondary-3{padding:var(--density-3);border-radius:var(--radius-3);border:1px solid var(--ds__palette__secondary-main)}.surface-playground__box--outlined-secondary-4{padding:var(--density-4);border-radius:var(--radius-4);border:1px solid var(--ds__palette__secondary-main)}.surface-playground__box--outlined-secondary-4,.surface-playground__box--outlined-secondary-5{background:transparent;color:var(--ds__palette__secondary-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-secondary-5{padding:var(--density-5);border-radius:var(--radius-5);border:1px solid var(--ds__palette__secondary-main)}.surface-playground__box--outlined-success-0{padding:var(--density-0);border-radius:var(--radius-0);border:1px solid var(--ds__palette__success-main)}.surface-playground__box--outlined-success-0,.surface-playground__box--outlined-success-1{background:transparent;color:var(--ds__palette__success-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-success-1{padding:var(--density-1);border-radius:var(--radius-1);border:1px solid var(--ds__palette__success-main)}.surface-playground__box--outlined-success-2{padding:var(--density-2);border-radius:var(--radius-2);border:1px solid var(--ds__palette__success-main)}.surface-playground__box--outlined-success-2,.surface-playground__box--outlined-success-3{background:transparent;color:var(--ds__palette__success-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-success-3{padding:var(--density-3);border-radius:var(--radius-3);border:1px solid var(--ds__palette__success-main)}.surface-playground__box--outlined-success-4{padding:var(--density-4);border-radius:var(--radius-4);border:1px solid var(--ds__palette__success-main)}.surface-playground__box--outlined-success-4,.surface-playground__box--outlined-success-5{background:transparent;color:var(--ds__palette__success-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-success-5{padding:var(--density-5);border-radius:var(--radius-5);border:1px solid var(--ds__palette__success-main)}.surface-playground__box--outlined-info-0{padding:var(--density-0);border-radius:var(--radius-0);border:1px solid var(--ds__palette__info-main)}.surface-playground__box--outlined-info-0,.surface-playground__box--outlined-info-1{background:transparent;color:var(--ds__palette__info-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-info-1{padding:var(--density-1);border-radius:var(--radius-1);border:1px solid var(--ds__palette__info-main)}.surface-playground__box--outlined-info-2{padding:var(--density-2);border-radius:var(--radius-2);border:1px solid var(--ds__palette__info-main)}.surface-playground__box--outlined-info-2,.surface-playground__box--outlined-info-3{background:transparent;color:var(--ds__palette__info-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-info-3{padding:var(--density-3);border-radius:var(--radius-3);border:1px solid var(--ds__palette__info-main)}.surface-playground__box--outlined-info-4{padding:var(--density-4);border-radius:var(--radius-4);border:1px solid var(--ds__palette__info-main)}.surface-playground__box--outlined-info-4,.surface-playground__box--outlined-info-5{background:transparent;color:var(--ds__palette__info-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-info-5{padding:var(--density-5);border-radius:var(--radius-5);border:1px solid var(--ds__palette__info-main)}.surface-playground__box--outlined-warning-0{padding:var(--density-0);border-radius:var(--radius-0);border:1px solid var(--ds__palette__warning-main)}.surface-playground__box--outlined-warning-0,.surface-playground__box--outlined-warning-1{background:transparent;color:var(--ds__palette__warning-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-warning-1{padding:var(--density-1);border-radius:var(--radius-1);border:1px solid var(--ds__palette__warning-main)}.surface-playground__box--outlined-warning-2{padding:var(--density-2);border-radius:var(--radius-2);border:1px solid var(--ds__palette__warning-main)}.surface-playground__box--outlined-warning-2,.surface-playground__box--outlined-warning-3{background:transparent;color:var(--ds__palette__warning-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-warning-3{padding:var(--density-3);border-radius:var(--radius-3);border:1px solid var(--ds__palette__warning-main)}.surface-playground__box--outlined-warning-4{padding:var(--density-4);border-radius:var(--radius-4);border:1px solid var(--ds__palette__warning-main)}.surface-playground__box--outlined-warning-4,.surface-playground__box--outlined-warning-5{background:transparent;color:var(--ds__palette__warning-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-warning-5{padding:var(--density-5);border-radius:var(--radius-5);border:1px solid var(--ds__palette__warning-main)}.surface-playground__box--outlined-error-0{padding:var(--density-0);border-radius:var(--radius-0);border:1px solid var(--ds__palette__error-main)}.surface-playground__box--outlined-error-0,.surface-playground__box--outlined-error-1{background:transparent;color:var(--ds__palette__error-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-error-1{padding:var(--density-1);border-radius:var(--radius-1);border:1px solid var(--ds__palette__error-main)}.surface-playground__box--outlined-error-2{padding:var(--density-2);border-radius:var(--radius-2);border:1px solid var(--ds__palette__error-main)}.surface-playground__box--outlined-error-2,.surface-playground__box--outlined-error-3{background:transparent;color:var(--ds__palette__error-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-error-3{padding:var(--density-3);border-radius:var(--radius-3);border:1px solid var(--ds__palette__error-main)}.surface-playground__box--outlined-error-4{padding:var(--density-4);border-radius:var(--radius-4);border:1px solid var(--ds__palette__error-main)}.surface-playground__box--outlined-error-4,.surface-playground__box--outlined-error-5{background:transparent;color:var(--ds__palette__error-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-error-5{padding:var(--density-5);border-radius:var(--radius-5);border:1px solid var(--ds__palette__error-main)}.surface-playground__box--outlined-neutral-0{padding:var(--density-0);border-radius:var(--radius-0);border:1px solid var(--ds__palette__neutral-main)}.surface-playground__box--outlined-neutral-0,.surface-playground__box--outlined-neutral-1{background:transparent;color:var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-neutral-1{padding:var(--density-1);border-radius:var(--radius-1);border:1px solid var(--ds__palette__neutral-main)}.surface-playground__box--outlined-neutral-2{padding:var(--density-2);border-radius:var(--radius-2);border:1px solid var(--ds__palette__neutral-main)}.surface-playground__box--outlined-neutral-2,.surface-playground__box--outlined-neutral-3{background:transparent;color:var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-neutral-3{padding:var(--density-3);border-radius:var(--radius-3);border:1px solid var(--ds__palette__neutral-main)}.surface-playground__box--outlined-neutral-4{padding:var(--density-4);border-radius:var(--radius-4);border:1px solid var(--ds__palette__neutral-main)}.surface-playground__box--outlined-neutral-4,.surface-playground__box--outlined-neutral-5{background:transparent;color:var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-neutral-5{padding:var(--density-5);border-radius:var(--radius-5);border:1px solid var(--ds__palette__neutral-main)}.surface-playground__box--outlined-none-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-outlined-border)}.surface-playground__box--outlined-none-0,.surface-playground__box--outlined-none-1{background:var(--surface-outlined-bg);color:var(--surface-outlined-color);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-none-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-outlined-border)}.surface-playground__box--outlined-none-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-outlined-border)}.surface-playground__box--outlined-none-2,.surface-playground__box--outlined-none-3{background:var(--surface-outlined-bg);color:var(--surface-outlined-color);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-none-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-outlined-border)}.surface-playground__box--outlined-none-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-outlined-border)}.surface-playground__box--outlined-none-4,.surface-playground__box--outlined-none-5{background:var(--surface-outlined-bg);color:var(--surface-outlined-color);box-shadow:var(--surface-outlined-shadow)}.surface-playground__box--outlined-none-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-outlined-border)}.surface-playground__box--flat-primary-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-flat-border)}.surface-playground__box--flat-primary-0,.surface-playground__box--flat-primary-1{background:transparent;color:var(--ds__palette__primary-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-primary-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-flat-border)}.surface-playground__box--flat-primary-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-flat-border)}.surface-playground__box--flat-primary-2,.surface-playground__box--flat-primary-3{background:transparent;color:var(--ds__palette__primary-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-primary-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-flat-border)}.surface-playground__box--flat-primary-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-flat-border)}.surface-playground__box--flat-primary-4,.surface-playground__box--flat-primary-5{background:transparent;color:var(--ds__palette__primary-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-primary-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-flat-border)}.surface-playground__box--flat-secondary-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-flat-border)}.surface-playground__box--flat-secondary-0,.surface-playground__box--flat-secondary-1{background:transparent;color:var(--ds__palette__secondary-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-secondary-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-flat-border)}.surface-playground__box--flat-secondary-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-flat-border)}.surface-playground__box--flat-secondary-2,.surface-playground__box--flat-secondary-3{background:transparent;color:var(--ds__palette__secondary-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-secondary-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-flat-border)}.surface-playground__box--flat-secondary-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-flat-border)}.surface-playground__box--flat-secondary-4,.surface-playground__box--flat-secondary-5{background:transparent;color:var(--ds__palette__secondary-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-secondary-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-flat-border)}.surface-playground__box--flat-success-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-flat-border)}.surface-playground__box--flat-success-0,.surface-playground__box--flat-success-1{background:transparent;color:var(--ds__palette__success-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-success-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-flat-border)}.surface-playground__box--flat-success-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-flat-border)}.surface-playground__box--flat-success-2,.surface-playground__box--flat-success-3{background:transparent;color:var(--ds__palette__success-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-success-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-flat-border)}.surface-playground__box--flat-success-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-flat-border)}.surface-playground__box--flat-success-4,.surface-playground__box--flat-success-5{background:transparent;color:var(--ds__palette__success-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-success-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-flat-border)}.surface-playground__box--flat-info-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-flat-border)}.surface-playground__box--flat-info-0,.surface-playground__box--flat-info-1{background:transparent;color:var(--ds__palette__info-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-info-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-flat-border)}.surface-playground__box--flat-info-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-flat-border)}.surface-playground__box--flat-info-2,.surface-playground__box--flat-info-3{background:transparent;color:var(--ds__palette__info-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-info-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-flat-border)}.surface-playground__box--flat-info-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-flat-border)}.surface-playground__box--flat-info-4,.surface-playground__box--flat-info-5{background:transparent;color:var(--ds__palette__info-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-info-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-flat-border)}.surface-playground__box--flat-warning-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-flat-border)}.surface-playground__box--flat-warning-0,.surface-playground__box--flat-warning-1{background:transparent;color:var(--ds__palette__warning-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-warning-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-flat-border)}.surface-playground__box--flat-warning-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-flat-border)}.surface-playground__box--flat-warning-2,.surface-playground__box--flat-warning-3{background:transparent;color:var(--ds__palette__warning-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-warning-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-flat-border)}.surface-playground__box--flat-warning-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-flat-border)}.surface-playground__box--flat-warning-4,.surface-playground__box--flat-warning-5{background:transparent;color:var(--ds__palette__warning-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-warning-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-flat-border)}.surface-playground__box--flat-error-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-flat-border)}.surface-playground__box--flat-error-0,.surface-playground__box--flat-error-1{background:transparent;color:var(--ds__palette__error-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-error-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-flat-border)}.surface-playground__box--flat-error-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-flat-border)}.surface-playground__box--flat-error-2,.surface-playground__box--flat-error-3{background:transparent;color:var(--ds__palette__error-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-error-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-flat-border)}.surface-playground__box--flat-error-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-flat-border)}.surface-playground__box--flat-error-4,.surface-playground__box--flat-error-5{background:transparent;color:var(--ds__palette__error-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-error-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-flat-border)}.surface-playground__box--flat-neutral-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-flat-border)}.surface-playground__box--flat-neutral-0,.surface-playground__box--flat-neutral-1{background:transparent;color:var(--ds__palette__neutral-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-neutral-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-flat-border)}.surface-playground__box--flat-neutral-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-flat-border)}.surface-playground__box--flat-neutral-2,.surface-playground__box--flat-neutral-3{background:transparent;color:var(--ds__palette__neutral-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-neutral-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-flat-border)}.surface-playground__box--flat-neutral-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-flat-border)}.surface-playground__box--flat-neutral-4,.surface-playground__box--flat-neutral-5{background:transparent;color:var(--ds__palette__neutral-main);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-neutral-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-flat-border)}.surface-playground__box--flat-none-0{padding:var(--density-0);border-radius:var(--radius-0);border:var(--surface-flat-border)}.surface-playground__box--flat-none-0,.surface-playground__box--flat-none-1{background:var(--surface-flat-bg);color:var(--surface-flat-color);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-none-1{padding:var(--density-1);border-radius:var(--radius-1);border:var(--surface-flat-border)}.surface-playground__box--flat-none-2{padding:var(--density-2);border-radius:var(--radius-2);border:var(--surface-flat-border)}.surface-playground__box--flat-none-2,.surface-playground__box--flat-none-3{background:var(--surface-flat-bg);color:var(--surface-flat-color);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-none-3{padding:var(--density-3);border-radius:var(--radius-3);border:var(--surface-flat-border)}.surface-playground__box--flat-none-4{padding:var(--density-4);border-radius:var(--radius-4);border:var(--surface-flat-border)}.surface-playground__box--flat-none-4,.surface-playground__box--flat-none-5{background:var(--surface-flat-bg);color:var(--surface-flat-color);box-shadow:var(--surface-flat-shadow)}.surface-playground__box--flat-none-5{padding:var(--density-5);border-radius:var(--radius-5);border:var(--surface-flat-border)}.demo-radius-0{border-radius:0!important}.demo-radius-1{border-radius:var(--radius-1)!important}.demo-radius-2{border-radius:var(--radius-2)!important}.demo-radius-3{border-radius:var(--radius-3)!important}.demo-radius-4{border-radius:var(--radius-4)!important}.demo-radius-5{border-radius:var(--radius-5)!important}.demo-shadow-0{box-shadow:none!important}.demo-shadow-1{box-shadow:var(--shadow-1)!important}.demo-shadow-2{box-shadow:var(--shadow-2)!important}.demo-shadow-3{box-shadow:var(--shadow-3)!important}.demo-shadow-4{box-shadow:var(--shadow-4)!important}.demo-shadow-5{box-shadow:var(--shadow-5)!important}}#DemoTypography{.typo-header,.typo-section{display:flex;flex-direction:column;gap:var(--density-2)}.demo-title{font-family:var(--h4-font-family,var(--font-ui));font-size:var(--h4-size);line-height:var(--h4-line,1.4);font-weight:var(--h4-weight,600);letter-spacing:var(--h4-spacing,normal);text-transform:var(--h4-transform,none);text-decoration:var(--h4-decoration,none);font-style:var(--h4-style,normal);margin-block-start:var(--h4-margin-block-start,auto);margin-block-end:var(--h4-margin-block-end,auto);margin:0}.demo-subtitle{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);opacity:.75;margin:0;max-width:720px}.typo-stack{display:flex;flex-direction:column;gap:0}.typo-row{gap:var(--density-4);padding:var(--density-3) 0;border-bottom:1px solid var(--ds__palette__surface-dark);&:last-child{border-bottom:none}}.typo-row,.typo-row__meta{display:flex;align-items:flex-start}.typo-row__meta{width:50px;flex-shrink:0;flex-direction:column;gap:var(--space-1);border-right:1px solid var(--ds__palette__surface-dark);padding-right:var(--density-1)}.typo-row__label{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);font-size:.6rem;font-weight:400;color:var(--ds__palette__text-secondary);opacity:.6;line-height:1.2;text-transform:none}.typo-row__edit{background:transparent;border:none;cursor:pointer;padding:0;color:var(--ds__palette__secondary-main);display:flex;align-items:center;justify-content:center;opacity:.6;transition:all .2s;margin-top:var(--space-2);&:hover{opacity:1;border-color:var(--ds__palette__secondary-main);background:color-mix(in srgb,var(--ds__palette__surface-dark) 10%,transparent)}}.typo-row__content{flex:1}.sample-h1{font-family:var(--h1-font-family,var(--font-ui));font-size:var(--h1-size);line-height:var(--h1-line,1.1);font-weight:var(--h1-weight,700);letter-spacing:var(--h1-spacing,-.02em);text-transform:var(--h1-transform,none);text-decoration:var(--h1-decoration,none);font-style:var(--h1-style,normal);margin-block-start:var(--h1-margin-block-start,auto);margin-block-end:var(--h1-margin-block-end,auto);margin:0}.sample-h2{font-family:var(--h2-font-family,var(--font-ui));font-size:var(--h2-size);line-height:var(--h2-line,1.2);font-weight:var(--h2-weight,700);letter-spacing:var(--h2-spacing,-.01em);text-transform:var(--h2-transform,none);text-decoration:var(--h2-decoration,none);font-style:var(--h2-style,normal);margin-block-start:var(--h2-margin-block-start,auto);margin-block-end:var(--h2-margin-block-end,auto);margin:0;font-weight:var(--p-weight)}.sample-h2,.sample-h3{font-size:var(--h3-size)}.sample-h3{font-family:var(--h3-font-family,var(--font-ui));line-height:var(--h3-line,1.3);font-weight:var(--h3-weight,600);letter-spacing:var(--h3-spacing,normal);text-transform:var(--h3-transform,none);text-decoration:var(--h3-decoration,none);font-style:var(--h3-style,normal);margin-block-start:var(--h3-margin-block-start,auto);margin-block-end:var(--h3-margin-block-end,auto);margin:0}.sample-h4{font-family:var(--h4-font-family,var(--font-ui));font-size:var(--h4-size);line-height:var(--h4-line,1.4);font-weight:var(--h4-weight,600);letter-spacing:var(--h4-spacing,normal);text-transform:var(--h4-transform,none);text-decoration:var(--h4-decoration,none);font-style:var(--h4-style,normal);margin-block-start:var(--h4-margin-block-start,auto);margin-block-end:var(--h4-margin-block-end,auto);margin:0}.sample-h5{font-family:var(--h5-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h5-size);line-height:var(--h5-line,1.4);font-weight:var(--h5-weight,600);letter-spacing:var(--h5-spacing,normal);text-transform:var(--h5-transform,none);text-decoration:var(--h5-decoration,none);font-style:var(--h5-style,normal);margin-block-start:var(--h5-margin-block-start,auto);margin-block-end:var(--h5-margin-block-end,auto);margin:0}.sample-h6{font-family:var(--h6-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h6-size);line-height:var(--h6-line,1.4);font-weight:var(--h6-weight,600);letter-spacing:var(--h6-spacing,normal);text-transform:var(--h6-transform,none);text-decoration:var(--h6-decoration,none);font-style:var(--h6-style,normal);margin-block-start:var(--h6-margin-block-start,auto);margin-block-end:var(--h6-margin-block-end,auto);margin:0}.sample-p{font-family:var(--p-font-family,var(--font-ui));font-size:var(--p-size);line-height:var(--p-line,1.6);font-weight:var(--p-weight,400);letter-spacing:var(--p-spacing,normal);text-transform:var(--p-transform,none);text-decoration:var(--p-decoration,none);font-style:var(--p-style,normal);margin-block-start:var(--p-margin-block-start,auto);margin-block-end:var(--p-margin-block-end,auto);margin:0}.sample-span{font-family:var(--span-font-family,var(--font-ui));font-size:var(--span-size);line-height:var(--span-line,1.5);font-weight:var(--span-weight,400);letter-spacing:var(--span-spacing,normal);text-transform:var(--span-transform,none);text-decoration:var(--span-decoration,none);font-style:var(--span-style,normal);margin-block-start:var(--span-margin-block-start,auto);margin-block-end:var(--span-margin-block-end,auto)}.sample-body{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);margin:0}.sample-caption{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);margin:0}.sample-small{font-family:var(--small-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--small-size);line-height:var(--small-line,1.4);letter-spacing:var(--small-spacing,normal);text-transform:var(--small-transform,none);text-decoration:var(--small-decoration,none);font-style:var(--small-style,normal);margin-block-start:var(--small-margin-block-start,auto);margin-block-end:var(--small-margin-block-end,auto);opacity:var(--small-opacity,.8);margin:0}.sample-pre{font-family:var(--pre-font-family,var(--font-code),monospace);font-size:var(--pre-size);line-height:var(--pre-line,1.5);text-transform:var(--pre-transform,none);text-decoration:var(--pre-decoration,none);font-style:var(--pre-style,normal);margin-block-start:var(--pre-margin-block-start,auto);margin-block-end:var(--pre-margin-block-end,auto);margin:0;background:color-mix(in srgb,var(--ds__palette__surface-dark) 5%,transparent);padding:var(--density-2);border-radius:var(--radius-1)}}.level-controls{display:flex;align-items:center;gap:var(--density-4);padding:0 var(--density-2);margin-left:auto}.level-label{font-size:.8rem;font-weight:600;color:var(--ds__palette__text-secondary);text-transform:uppercase}.level-input-wrapper{display:flex;align-items:center;gap:var(--density-2)}.level-value{font-family:font(code);font-size:.9rem;font-weight:700;color:var(--ds__palette__primary-main);min-width:20px;text-align:center}.playground-layout{display:flex;flex-direction:column;height:100%;gap:var(--density-6)}.viz-container{flex:1;display:flex;justify-content:center;background:var(--ds__palette__surface-dark);border-radius:var(--radius-2);padding:var(--density-8) var(--density-4);overflow:hidden;min-height:300px}.density-playground-wrapper{width:100%;transition:width .3s ease;border-left:1px solid var(--ds__palette__divider-main);border-right:1px solid var(--ds__palette__divider-main);display:flex;align-items:center;justify-content:center;position:relative;container-type:inline-size}.auto-width-label{position:absolute;top:-1.5rem;font-size:.7rem;color:var(--ds__palette__text-disabled);text-transform:uppercase}.density-doll-wrapper{border:none;background:transparent}.json-editor{background:var(--ds__palette__surface-main);padding:var(--density-4);border-radius:var(--radius-1);border:1px dashed var(--ds__palette__neutral-main);font-family:font(code);font-size:.9rem;color:var(--ds__palette__primary-dark);overflow-x:auto;display:flex;flex-direction:column;gap:var(--density-1)}.json-header{display:flex;align-items:center;justify-content:space-between}.json-key{font-weight:600}.json-line{display:flex;align-items:center;justify-content:space-between;width:100%;padding-left:2ch}.json-value-wrapper{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.json-prop-key{color:var(--ds__palette__secondary-main)}.edit-button{background:transparent;border:1px solid var(--ds__palette__divider-main);border-radius:var(--radius-1);padding:var(--density-1);cursor:pointer;color:var(--ds__palette__text-secondary);display:flex;align-items:center;justify-content:center;transition:all .2s;margin-left:var(--density-4);&:hover{color:var(--ds__palette__primary-main);border-color:var(--ds__palette__primary-main)}}.level-range-input{width:100px;cursor:pointer}.highlighter-base{color:var(--ds__palette__info-main)}.highlighter-active{color:var(--ds__palette__secondary-light);text-shadow:0 0 8px rgba(255,77,77,.4);font-weight:700;text-decoration:underline}.hero-background{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:0}.hero-background__blob{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}.hero-background__blob--secondary{width:600px;height:600px;background:radial-gradient(circle,var(--ds__palette__secondary-main) 0,transparent 60%);opacity:var(--blob-opacity,.05);filter:blur(80px)}.hero-background__blob--primary{width:500px;height:500px;background:radial-gradient(circle,var(--ds__palette__primary-main) 0,transparent 60%);opacity:var(--blob-opacity,.08);filter:blur(60px)}.hero-background__blob--dark{width:400px;height:400px;background:radial-gradient(circle,var(--ds__palette__primary-dark) 0,transparent 70%);opacity:0;filter:blur(40px);mix-blend-mode:multiply}.hero-background__overlay{position:absolute;inset:0;backdrop-filter:blur(20px);opacity:.5}#HomeDemo{.home-demo{display:flex;flex-direction:column;align-items:center;gap:var(--density-6);margin-top:var(--density-6)}.home-code{background:#1e1e1e;border-radius:var(--radius-3);overflow:hidden;color:#d4d4d4;font-family:monospace;font-size:.85rem;border:1px solid var(--ds__palette__neutral-light);box-shadow:var(--shadow-2);width:100%;max-width:500px}.code-header{background:#252526;padding:var(--density-2) var(--density-3);border-bottom:1px solid #333;display:flex;align-items:center}.code-lang{font-size:.75rem;color:#9cdcfe;font-weight:700;text-transform:uppercase;letter-spacing:1px}.home-code pre{margin:0;overflow-x:auto;line-height:1.5}.home-code pre,.mb-card{padding:var(--density-3)}.mb-card{border-radius:var(--surface-contained-radius);background:var(--surface-contained-bg);color:var(--surface-contained-color);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);width:100%;gap:var(--density-4);display:flex;flex-direction:column;.mb-header{display:flex;justify-content:space-between;align-items:center;h3{font-family:var(--h5-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h5-size);line-height:var(--h5-line,1.4);font-weight:var(--h5-weight,600);letter-spacing:var(--h5-spacing,normal);text-transform:var(--h5-transform,none);text-decoration:var(--h5-decoration,none);font-style:var(--h5-style,normal);margin-block-start:var(--h5-margin-block-start,auto);margin-block-end:var(--h5-margin-block-end,auto);margin:0}}.mb-badge{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);background:color-mix(in srgb,var(--ds__palette__success-light) 20%,transparent);color:var(--ds__palette__success-dark);padding:var(--density-1) var(--density-2);border-radius:9999px;font-weight:700;margin-left:var(--density-2)}.mb-title-group{display:flex;align-items:center}.mb-status-dot{width:12px;height:12px;background:var(--ds__palette__success-main);border-radius:9999px;box-shadow:0 0 0 4px color-mix(in srgb,var(--ds__palette__success-light) 20%,transparent);animation:pulse 2s infinite}.mb-stat{display:flex;flex-direction:column;gap:var(--density-1);margin-bottom:var(--density-3);.mb-stat-header{display:flex;justify-content:space-between;font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);font-weight:600}}.mb-bar{height:8px;background:var(--ds__palette__neutral-light);border-radius:9999px;overflow:hidden;div{height:100%;background:var(--ds__palette__primary-main);border-radius:9999px}}.mb-action{padding:var(--surface-contained-padding);border-radius:var(--surface-contained-radius);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);--button-tone-main:var(--ds__palette__primary-main);--button-tone-dark:var(--ds__palette__primary-dark);--button-tone-contrast:var(--ds__palette__primary-contrast);width:100%;justify-content:center}.mb-action:hover{background:var(--button-contained-tone-primary-hover-bg,var(--button-contained-hover-bg));color:var(--button-contained-tone-primary-hover-color,var(--button-contained-hover-color))}.mb-action.is-selected,.mb-action[aria-pressed=true],.mb-action[aria-selected=true]{background:var(--button-contained-tone-primary-selected-bg,var(--button-contained-selected-bg));color:var(--button-contained-tone-primary-selected-color,var(--button-contained-selected-color))}}@media (min-width:768px){.mb-card{width:420px;padding:var(--density-5)}}}.demos-grid{display:grid;grid-template-columns:1fr;gap:var(--density-4);width:100%;@media (min-width:1024px){grid-template-columns:repeat(2,1fr)}}.demo-item{min-width:0}.demo-item-full{@media (min-width:1024px){grid-column:span 2}}.home-demos{width:100%;display:flex;flex-direction:column;gap:var(--density-3)}.home-demos__actions{width:100%;display:flex;justify-content:center}.home-demos__toggle{padding:var(--density-1);border-radius:var(--radius-1);background:transparent;color:var(--ds__palette__secondary-main);border:var(--surface-flat-border);box-shadow:var(--surface-flat-shadow);--button-tone-main:var(--ds__palette__secondary-main);--button-tone-dark:var(--ds__palette__secondary-dark);--button-tone-contrast:var(--ds__palette__secondary-contrast);min-width:6rem;opacity:.85;&:hover{opacity:1}}.home-demos__toggle:hover{color:var(--button-flat-tone-secondary-hover-color,var(--button-flat-hover-color))}.home-demos__toggle.is-selected,.home-demos__toggle[aria-pressed=true],.home-demos__toggle[aria-selected=true]{color:var(--button-flat-tone-secondary-selected-color,var(--button-flat-selected-color))}#InputDemo{.section,.surfaces-grid{margin-block:var(--density-3)}.surfaces-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--density-3)}pre{overflow-x:auto}label{margin-inline-end:var(--density-2)}}.InteractiveDemoContainer{padding:var(--surface-outlined-padding);border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--radius-2)}.InteractiveDemoContainer__header{display:flex;justify-content:space-between;align-items:center;gap:var(--density-4);padding:var(--density-3) var(--density-4);border-bottom:1px solid var(--ds__palette__neutral-light);background:var(--ds__palette__surface-main);flex-shrink:0}.InteractiveDemoContainer__headerLeft{display:flex;align-items:center;gap:var(--density-4);flex:1;min-width:0}.InteractiveDemoContainer__title{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);font-weight:700;letter-spacing:.05em;color:var(--ds__palette__text-secondary);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.InteractiveDemoContainer__action{margin-left:var(--density-4);flex-shrink:0}.InteractiveDemoContainer__toolbar{padding:var(--density-3) var(--density-4);border-bottom:1px solid var(--ds__palette__neutral-light);background:var(--ds__palette__surface-light);display:flex;flex-direction:column;gap:var(--density-2);flex-shrink:0}.InteractiveDemoContainer__bodyScroll{flex:1;overflow:auto;position:relative;display:flex;flex-direction:column}.InteractiveDemoContainer__bodyInner{padding:var(--density-4);flex:1}.navigation-card-link{border-radius:var(--surface-contained-radius);background:var(--surface-contained-bg);color:var(--surface-contained-color);box-shadow:var(--surface-contained-shadow);width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:var(--density-4);gap:var(--density-4);border-radius:var(--radius-2);text-decoration:none;color:inherit;transition:all .2s ease-in-out;border:1px solid transparent;background:var(--ds__palette__surface-main);&:hover{transform:translateY(-2px);box-shadow:var(--shadow-3);border-color:color-mix(in srgb,var(--ds__palette__primary-light) 30%,transparent);.nav-card-arrow{transform:translateX(4px);color:var(--ds__palette__primary-main)}}.nav-card-content{display:flex;align-items:center;gap:var(--density-4);flex:1}.nav-card-icon{display:grid;place-items:center;width:var(--density-10);height:var(--density-10);border-radius:var(--radius-2);flex-shrink:0;&.primary{background:color-mix(in srgb,var(--ds__palette__primary-light) 10%,transparent);color:var(--ds__palette__primary-main)}&.secondary{background:transparent;border:1px solid color-mix(in srgb,var(--ds__palette__secondary-main) 30%,transparent);color:var(--ds__palette__secondary-main)}}.nav-card-text{display:flex;flex-direction:column;gap:var(--density-1);text-align:left}.nav-card-title{font-family:var(--h4-font-family,var(--font-ui));font-size:var(--h4-size);line-height:var(--h4-line,1.4);font-weight:var(--h4-weight,600);letter-spacing:var(--h4-spacing,normal);text-transform:var(--h4-transform,none);text-decoration:var(--h4-decoration,none);font-style:var(--h4-style,normal);margin-block-start:var(--h4-margin-block-start,auto);margin-block-end:var(--h4-margin-block-end,auto);margin:0;color:var(--ds__palette__surface-contrast)}.nav-card-desc{font-family:var(--span-font-family,var(--font-ui));font-size:var(--span-size);line-height:var(--span-line,1.5);font-weight:var(--span-weight,400);letter-spacing:var(--span-spacing,normal);text-transform:var(--span-transform,none);text-decoration:var(--span-decoration,none);font-style:var(--span-style,normal);margin-block-start:var(--span-margin-block-start,auto);margin-block-end:var(--span-margin-block-end,auto);margin:0;color:var(--ds__palette__secondary-main)}.nav-card-arrow{color:var(--ds__palette__secondary-light);transition:all .2s}&.variant-secondary{background:transparent;border:var(--border-1);box-shadow:none;&:hover{background:color-mix(in srgb,var(--ds__palette__surface-light) 50%,transparent);border-color:var(--ds__palette__primary-main);box-shadow:var(--shadow-2)}}}#PageTitle{.page-title{text-align:center;display:flex;flex-direction:column;gap:var(--density-2);padding:var(--density-6) 0 var(--density-4)}.page-title__text{font-family:var(--h1-font-family,var(--font-ui));font-size:var(--h1-size);line-height:var(--h1-line,1.1);font-weight:var(--h1-weight,700);letter-spacing:var(--h1-spacing,-.02em);text-transform:var(--h1-transform,none);text-decoration:var(--h1-decoration,none);font-style:var(--h1-style,normal);margin-block-start:var(--h1-margin-block-start,auto);margin-block-end:var(--h1-margin-block-end,auto);margin:0;background:linear-gradient(135deg,var(--ds__palette__primary-main) 0,var(--ds__palette__primary-light) 50%,var(--ds__palette__secondary-main) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:var(--ds__palette__primary-main)}.page-title__subtitle{font-family:var(--h4-font-family,var(--font-ui));font-size:var(--h4-size);line-height:var(--h4-line,1.4);font-weight:var(--h4-weight,600);letter-spacing:var(--h4-spacing,normal);text-transform:var(--h4-transform,none);text-decoration:var(--h4-decoration,none);font-style:var(--h4-style,normal);margin-block-start:var(--h4-margin-block-start,auto);margin-block-end:var(--h4-margin-block-end,auto);color:var(--ds__palette__surface-contrast);margin:0;line-height:1.4;font-weight:400}.page-title__subtext{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);color:color-mix(in srgb,var(--ds__palette__surface-contrast) 85%,transparent);margin-top:var(--density-1);display:block}}#PageToolbar{width:100%;background:var(--ds__palette__surface-light);border-bottom:1px solid var(--ds__palette__neutral-light);position:-webkit-sticky;position:sticky;top:0;z-index:1100}#PageToolbar .page-toolbar{max-width:1400px;margin:0 auto;padding:var(--density-1) var(--density-4);display:flex;justify-content:space-between;align-items:center;min-height:var(--density-7);flex-wrap:nowrap}#PageToolbar .page-toolbar__left{display:flex;align-items:center;gap:var(--density-2);flex:1;min-width:0;overflow:hidden}#PageToolbar .page-toolbar__title{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);color:var(--ds__palette__text-secondary);display:flex;align-items:center;gap:var(--density-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#PageToolbar .breadcrumb-link-brand{text-decoration:none;color:inherit;font-weight:800;text-transform:uppercase;letter-spacing:.5px;transition:transform .2s;display:flex;align-items:center;gap:var(--density-1);flex-shrink:0;&:hover{transform:translateY(-1px);color:var(--ds__palette__primary-main)}}#PageToolbar .page-toolbar__brand-text{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);color:var(--ds__palette__primary-main);font-weight:800}#PageToolbar .breadcrumb-link{color:inherit;text-decoration:none;transition:color .2s;&:hover{color:var(--ds__palette__primary-main);text-decoration:underline}}#PageToolbar .breadcrumb-separator{color:var(--ds__palette__neutral-dark);opacity:.5}#PageToolbar .page-toolbar__burger{background:transparent;border:none;color:var(--ds__palette__secondary-main);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}#PageToolbar .page-toolbar__burger:hover{color:var(--ds__palette__secondary-dark);background:transparent}@media (min-width:1024px){#PageToolbar .page-toolbar__burger{display:none}}#PageToolbar .page-toolbar__right{flex-direction:row;margin-left:var(--density-2);flex-shrink:0;font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8)}#PageToolbar .page-toolbar__info-row,#PageToolbar .page-toolbar__right{display:flex;align-items:center;gap:var(--density-4)}#PageToolbar .page-toolbar__theme-row{display:flex;align-items:center;gap:var(--density-2);opacity:0;transform:translateX(10px);pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);&.visible{opacity:1;transform:translateX(0);pointer-events:auto}}#PageToolbar .page-toolbar__bp{background:color-mix(in srgb,var(--ds__palette__secondary-light) 10%,transparent);padding:var(--density-1) var(--density-2);border-radius:var(--radius-1)}#PageToolbar .page-toolbar__bp,#PageToolbar .page-toolbar__width{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);line-height:1}#PageToolbar .page-toolbar__width{opacity:.7;display:none;@media (min-width:768px){display:block}}#PageToolbar .mini-theme-btn{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.1);padding:0;cursor:pointer;opacity:.5;transition:all .2s;&.active,&:hover{opacity:1;transform:scale(1.2);border-color:color-mix(in srgb,var(--ds__palette__surface-contrast) 50%,transparent)}&.default{background:#2c415c}&.green{background:#15803d}&.purple{background:#7b1fa2}}#PageToolbar .mini-theme-toggle{width:12px;height:12px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:pointer;color:var(--ds__palette__text-secondary);opacity:.7;transition:color .2s;&:hover{opacity:1;color:var(--ds__palette__primary-main)}}#PalettePlayground{.playground-wrapper{display:flex;flex-direction:column;gap:var(--density-3)}.playground-controls{display:flex;flex-wrap:wrap;gap:var(--density-2);align-items:center;width:100%}.control-group{display:flex;flex-direction:column;gap:var(--density-1);flex:1;min-width:140px}.control-label{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);color:var(--ds__palette__neutral-dark);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.control-select{padding:var(--density-1) var(--density-2);border:1px solid var(--ds__palette__neutral-light);border-radius:var(--radius-1);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);font-size:.9rem;cursor:pointer;width:100%;&:focus,&:hover{border-color:var(--ds__palette__primary-main)}&:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--ds__palette__primary-main) 20%,transparent)}}.preview-container{display:flex;flex-direction:column;gap:var(--density-3);background:var(--ds__palette__surface-light);padding:var(--density-3);border:1px dashed var(--ds__palette__neutral-light);border-radius:var(--radius-2)}.live-preview{min-height:120px;display:grid;place-items:center;border-radius:var(--radius-2);box-shadow:var(--shadow-1);transition:all .3s ease}.code-block{padding:var(--surface-contained-padding);border-radius:var(--surface-contained-radius);background:var(--surface-contained-bg);color:var(--surface-contained-color);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);background:var(--ds__palette__neutral-dark);border-radius:var(--radius-2);overflow:hidden}.code-header{background:color-mix(in srgb,var(--ds__palette__neutral-dark) 50%,transparent);padding:var(--density-1) var(--density-2);border-bottom:1px solid color-mix(in srgb,var(--ds__palette__neutral-main) 10%,transparent)}.code-filename{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);font-family:monospace;color:var(--ds__palette__neutral-light)}}.inspector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--density-4)}.selector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--density-3)}.inspector-item{display:flex;align-items:center;gap:var(--density-4);background:var(--ds__palette__surface-main);padding:.75rem;border-radius:6px;border:1px solid var(--ds__palette__neutral-light)}.inspector-item-details{display:flex;flex-direction:column}.inspector-item-meta{display:flex;gap:var(--density-2);align-items:center}.live-preview-box{background:color-mix(in srgb,var(--ds__palette__surface-dark) 5%,transparent);border-radius:var(--radius-1);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;border-top:1px dashed color-mix(in srgb,var(--ds__palette__neutral-light) 50%,transparent);border-bottom:1px dashed color-mix(in srgb,var(--ds__palette__neutral-light) 50%,transparent);&:after,&:before,.bottom-left-corner:after,.top-right-corner:before{content:"";position:absolute;width:10px;height:10px;border-color:color-mix(in srgb,var(--ds__palette__neutral-main) 30%,transparent);border-style:solid;z-index:1}&:before{top:0;left:0;border-width:1px 0 0 1px}&:after{bottom:0;right:0;border-width:0 1px 1px 0}.top-right-corner:before{top:0;right:0;border-color:color-mix(in srgb,var(--ds__palette__neutral-main) 30%,transparent);border-style:solid;border-width:1px 1px 0 0}.bottom-left-corner:after,.top-right-corner:before{content:"";position:absolute;width:10px;height:10px;z-index:1}.bottom-left-corner:after{bottom:0;left:0;border-color:color-mix(in srgb,var(--ds__palette__neutral-main) 30%,transparent);border-style:solid;border-width:0 0 1px 1px}}.demo-layout-grid{display:flex;flex-direction:column;gap:var(--density-4)}.demo-logic-column{display:grid;grid-template-columns:1fr;gap:var(--density-4);align-items:start}@media (min-width:1024px){.demo-logic-column{grid-template-columns:2fr 1fr;gap:var(--density-6)}}.typography-showcase{margin-top:var(--density-6);padding:var(--density-4);background:var(--ds__palette__surface-main);border-radius:var(--radius-2);border:1px solid var(--ds__palette__divider-main)}.showcase-title{font-size:.9rem;font-weight:600;color:var(--ds__palette__text-secondary);text-transform:uppercase;margin-bottom:var(--density-4);letter-spacing:.05em}.showcase-grid{display:flex;flex-direction:column;width:100%}.showcase-item{display:grid;grid-template-columns:4rem 1fr;align-items:center;gap:var(--density-4);padding:var(--density-2) 0;border-bottom:1px dashed var(--ds__palette__divider-main);&:last-child{border-bottom:none}}.showcase-tag{font-family:font(code);font-size:.75rem;color:var(--ds__palette__text-secondary);text-align:right;padding-right:var(--density-2);border-right:2px solid var(--ds__palette__primary-main);height:100%;display:flex;align-items:center;justify-content:flex-end}.showcase-text{color:var(--ds__palette__text-primary);margin:0!important;padding:0!important;border:1px solid color-mix(in srgb,var(--ds__palette__neutral-main) 20%,transparent);background:var(--ds__palette__surface-main);width:100%;text-align:left}.live-preview-section{margin-bottom:1.5rem;border-bottom:1px solid var(--ds__palette__neutral-light);display:flex;justify-content:flex-start;background:var(--ds__palette__surface-dark);border-radius:8px;padding:2rem 1rem;overflow:hidden}.live-preview-box{transition:all .3s cubic-bezier(.4,0,.2,1);margin:0 auto;background:transparent;border-left:1px solid var(--ds__palette__divider-main);border-right:1px solid var(--ds__palette__divider-main);min-height:120px;padding:0}.architectural-guide-center{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--ds__palette__divider-main);opacity:.1;pointer-events:none}.text-container-wrapper{position:relative;width:100%;max-width:100%;display:flex;justify-content:flex-start}.line-height-indicator{left:-8px;width:4px;border-left:1px solid var(--ds__palette__primary-main);border-top:1px solid var(--ds__palette__primary-main);border-bottom:1px solid var(--ds__palette__primary-main);opacity:.3}.content-bounds-indicator,.line-height-indicator{position:absolute;top:0;bottom:0;pointer-events:none}.content-bounds-indicator{left:0;right:0;border:1px dashed var(--ds__palette__primary-light);opacity:.15}.controls-section{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem;width:100%}.controls-row-bottom{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;width:100%;gap:1rem}.controls-group{display:flex;align-items:center;gap:.25rem;background:var(--ds__palette__surface-main);padding:2px;border-radius:6px;border:1px solid var(--ds__palette__neutral-main);flex:1 1 auto;min-width:0}.control-button{padding:4px 12px;background:transparent;color:var(--ds__palette__text-secondary);border:none;border-radius:4px;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;&.active{background:var(--ds__palette__primary-light);color:var(--ds__palette__primary-contrast)}&.is-default{padding:4px 8px}}.element-select-group{display:flex;align-items:center;gap:.5rem;flex:1 1 180px;min-width:0;label{font-size:.8rem;opacity:.7}select{box-sizing:border-box;font:inherit;width:100%;padding:var(--density-2);border-radius:var(--radius-2);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);caret-color:var(--input-outlined-base-caret);width:auto;cursor:pointer;min-width:120px;max-width:100%}select::placeholder{color:var(--input-outlined-base-placeholder)}select:focus{border:var(--input-outlined-focus-border)}select:invalid,select[aria-invalid=true]{border:var(--input-outlined-invalid-border)}select:disabled,select[aria-disabled=true]{opacity:var(--input-outlined-disabled-opacity)}}.ai-prompt-group{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0;flex-wrap:nowrap;.input-wrapper{position:relative;flex:0 1 66%;min-width:0;display:flex;align-items:center;.ai-icon-btn{position:absolute;left:4px;background:transparent;border:none;cursor:pointer;color:var(--ds__palette__neutral-main);opacity:.5;padding:2px;display:flex;align-items:center;justify-content:center;z-index:2;&:hover{opacity:1;color:var(--ds__palette__primary-main)}}input{min-width:0;box-sizing:border-box;font:inherit;width:100%;padding:var(--density-2);border-radius:var(--radius-2);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);caret-color:var(--input-outlined-base-caret);height:32px;padding-left:30px}input::placeholder{color:var(--input-outlined-base-placeholder)}input:focus{border:var(--input-outlined-focus-border)}input:invalid,input[aria-invalid=true]{border:var(--input-outlined-invalid-border)}input:disabled,input[aria-disabled=true]{opacity:var(--input-outlined-disabled-opacity)}}.actions{display:flex;gap:.25rem;flex-shrink:0;flex:0 0 33%;justify-content:flex-end;button.fix-single{background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:none;border-radius:6px}button.fix-all,button.fix-single{padding:6px 10px;cursor:pointer;font-size:.75rem;font-weight:600;white-space:nowrap}button.fix-all{background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);border-radius:6px}}.loading{display:flex;align-items:center;gap:.5rem;color:var(--ds__palette__primary-main);font-size:.8rem}}.json-preview-container{background:var(--ds__palette__surface-main);padding:1rem;border-radius:6px;margin-bottom:1.5rem;border:1px dashed var(--ds__palette__neutral-main);color:var(--ds__palette__primary-dark);text-align:left;overflow-x:auto;display:flex;flex-direction:column;gap:.25rem}.json-preview-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;span{font-size:.8rem;color:var(--ds__palette__text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.05em}}.css-usage-container{margin-bottom:1.5rem;padding:1rem;background:var(--ds__palette__surface-light);border:1px solid var(--ds__palette__neutral-light);border-radius:6px}.css-usage-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;span{font-size:.8rem;color:var(--ds__palette__text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.05em}}.css-code-block{background:var(--ds__palette__surface-dark);padding:.75rem;border-radius:6px;color:var(--ds__palette__text-primary);display:flex;align-items:center;overflow-x:auto;border:1px solid var(--ds__palette__neutral-dark);.selector{color:var(--ds__palette__secondary-light)}.bracket{color:var(--ds__palette__text-disabled)}.bracket,.mixin{margin-left:.5rem}.mixin{color:var(--ds__palette__primary-light)}.paren{color:var(--ds__palette__text-primary)}.argument{color:var(--ds__palette__warning-light)}.semicolon{color:var(--ds__palette__text-disabled)}}.css-usage-description{margin-top:.75rem;font-size:.8rem;color:var(--ds__palette__text-secondary);line-height:1.5;strong{color:var(--ds__palette__text-primary)}}.editable-typography-element{&.default{font-size:var(--default-size);font-family:var(--default-font-family);font-weight:var(--default-weight);line-height:var(--default-line);letter-spacing:var(--default-spacing);text-transform:var(--default-transform);text-decoration:var(--default-decoration);font-style:var(--default-style);margin-block-start:var(--default-margin-block-start);margin-block-end:var(--default-margin-block-end)}&.h1{font-size:var(--h1-size);font-family:var(--h1-font-family);font-weight:var(--h1-weight);line-height:var(--h1-line);letter-spacing:var(--h1-spacing);text-transform:var(--h1-transform);text-decoration:var(--h1-decoration);font-style:var(--h1-style);margin-block-start:var(--h1-margin-block-start);margin-block-end:var(--h1-margin-block-end)}&.h2{font-size:var(--h2-size);font-family:var(--h2-font-family);font-weight:var(--h2-weight);line-height:var(--h2-line);letter-spacing:var(--h2-spacing);text-transform:var(--h2-transform);text-decoration:var(--h2-decoration);font-style:var(--h2-style);margin-block-start:var(--h2-margin-block-start);margin-block-end:var(--h2-margin-block-end)}&.h3{font-size:var(--h3-size);font-family:var(--h3-font-family);font-weight:var(--h3-weight);line-height:var(--h3-line);letter-spacing:var(--h3-spacing);text-transform:var(--h3-transform);text-decoration:var(--h3-decoration);font-style:var(--h3-style);margin-block-start:var(--h3-margin-block-start);margin-block-end:var(--h3-margin-block-end)}&.h4{font-size:var(--h4-size);font-family:var(--h4-font-family);font-weight:var(--h4-weight);line-height:var(--h4-line);letter-spacing:var(--h4-spacing);text-transform:var(--h4-transform);text-decoration:var(--h4-decoration);font-style:var(--h4-style);margin-block-start:var(--h4-margin-block-start);margin-block-end:var(--h4-margin-block-end)}&.h5{font-size:var(--h5-size);font-family:var(--h5-font-family);font-weight:var(--h5-weight);line-height:var(--h5-line);letter-spacing:var(--h5-spacing);text-transform:var(--h5-transform);text-decoration:var(--h5-decoration);font-style:var(--h5-style);margin-block-start:var(--h5-margin-block-start);margin-block-end:var(--h5-margin-block-end)}&.h6{font-size:var(--h6-size);font-family:var(--h6-font-family);font-weight:var(--h6-weight);line-height:var(--h6-line);letter-spacing:var(--h6-spacing);text-transform:var(--h6-transform);text-decoration:var(--h6-decoration);font-style:var(--h6-style);margin-block-start:var(--h6-margin-block-start);margin-block-end:var(--h6-margin-block-end)}&.p{font-size:var(--p-size);font-family:var(--p-font-family);font-weight:var(--p-weight);line-height:var(--p-line);letter-spacing:var(--p-spacing);text-transform:var(--p-transform);text-decoration:var(--p-decoration);font-style:var(--p-style);margin-block-start:var(--p-margin-block-start);margin-block-end:var(--p-margin-block-end)}&.body{font-size:var(--body-size);font-family:var(--body-font-family);font-weight:var(--body-weight);line-height:var(--body-line);letter-spacing:var(--body-spacing);text-transform:var(--body-transform);text-decoration:var(--body-decoration);font-style:var(--body-style);margin-block-start:var(--body-margin-block-start);margin-block-end:var(--body-margin-block-end)}&.caption{font-size:var(--caption-size);font-family:var(--caption-font-family);font-weight:var(--caption-weight);line-height:var(--caption-line);letter-spacing:var(--caption-spacing);text-transform:var(--caption-transform);text-decoration:var(--caption-decoration);font-style:var(--caption-style);margin-block-start:var(--caption-margin-block-start);margin-block-end:var(--caption-margin-block-end)}&.span{font-size:var(--span-size);font-family:var(--span-font-family);font-weight:var(--span-weight);line-height:var(--span-line);letter-spacing:var(--span-spacing);text-transform:var(--span-transform);text-decoration:var(--span-decoration);font-style:var(--span-style);margin-block-start:var(--span-margin-block-start);margin-block-end:var(--span-margin-block-end)}&.small{font-size:var(--small-size);font-family:var(--small-font-family);font-weight:var(--small-weight);line-height:var(--small-line);letter-spacing:var(--small-spacing);text-transform:var(--small-transform);text-decoration:var(--small-decoration);font-style:var(--small-style);margin-block-start:var(--small-margin-block-start);margin-block-end:var(--small-margin-block-end)}&.pre{font-size:var(--pre-size);font-family:var(--pre-font-family);font-weight:var(--pre-weight);line-height:var(--pre-line);letter-spacing:var(--pre-spacing);text-transform:var(--pre-transform);text-decoration:var(--pre-decoration);font-style:var(--pre-style);margin-block-start:var(--pre-margin-block-start);margin-block-end:var(--pre-margin-block-end)}&.code{font-size:var(--code-size);font-family:var(--code-font-family);font-weight:var(--code-weight);line-height:var(--code-line);letter-spacing:var(--code-spacing);text-transform:var(--code-transform);text-decoration:var(--code-decoration);font-style:var(--code-style);margin-block-start:var(--code-margin-block-start);margin-block-end:var(--code-margin-block-end)}}.showcase-text{&.sample-default{font-size:var(--default-size);font-family:var(--default-font-family);font-weight:var(--default-weight);line-height:var(--default-line);letter-spacing:var(--default-spacing);text-transform:var(--default-transform);text-decoration:var(--default-decoration);font-style:var(--default-style);margin-block-start:var(--default-margin-block-start);margin-block-end:var(--default-margin-block-end)}&.sample-h1{font-size:var(--h1-size);font-family:var(--h1-font-family);font-weight:var(--h1-weight);line-height:var(--h1-line);letter-spacing:var(--h1-spacing);text-transform:var(--h1-transform);text-decoration:var(--h1-decoration);font-style:var(--h1-style);margin-block-start:var(--h1-margin-block-start);margin-block-end:var(--h1-margin-block-end)}&.sample-h2{font-size:var(--h2-size);font-family:var(--h2-font-family);font-weight:var(--h2-weight);line-height:var(--h2-line);letter-spacing:var(--h2-spacing);text-transform:var(--h2-transform);text-decoration:var(--h2-decoration);font-style:var(--h2-style);margin-block-start:var(--h2-margin-block-start);margin-block-end:var(--h2-margin-block-end)}&.sample-h3{font-size:var(--h3-size);font-family:var(--h3-font-family);font-weight:var(--h3-weight);line-height:var(--h3-line);letter-spacing:var(--h3-spacing);text-transform:var(--h3-transform);text-decoration:var(--h3-decoration);font-style:var(--h3-style);margin-block-start:var(--h3-margin-block-start);margin-block-end:var(--h3-margin-block-end)}&.sample-h4{font-size:var(--h4-size);font-family:var(--h4-font-family);font-weight:var(--h4-weight);line-height:var(--h4-line);letter-spacing:var(--h4-spacing);text-transform:var(--h4-transform);text-decoration:var(--h4-decoration);font-style:var(--h4-style);margin-block-start:var(--h4-margin-block-start);margin-block-end:var(--h4-margin-block-end)}&.sample-h5{font-size:var(--h5-size);font-family:var(--h5-font-family);font-weight:var(--h5-weight);line-height:var(--h5-line);letter-spacing:var(--h5-spacing);text-transform:var(--h5-transform);text-decoration:var(--h5-decoration);font-style:var(--h5-style);margin-block-start:var(--h5-margin-block-start);margin-block-end:var(--h5-margin-block-end)}&.sample-h6{font-size:var(--h6-size);font-family:var(--h6-font-family);font-weight:var(--h6-weight);line-height:var(--h6-line);letter-spacing:var(--h6-spacing);text-transform:var(--h6-transform);text-decoration:var(--h6-decoration);font-style:var(--h6-style);margin-block-start:var(--h6-margin-block-start);margin-block-end:var(--h6-margin-block-end)}&.sample-p{font-size:var(--p-size);font-family:var(--p-font-family);font-weight:var(--p-weight);line-height:var(--p-line);letter-spacing:var(--p-spacing);text-transform:var(--p-transform);text-decoration:var(--p-decoration);font-style:var(--p-style);margin-block-start:var(--p-margin-block-start);margin-block-end:var(--p-margin-block-end)}&.sample-body{font-size:var(--body-size);font-family:var(--body-font-family);font-weight:var(--body-weight);line-height:var(--body-line);letter-spacing:var(--body-spacing);text-transform:var(--body-transform);text-decoration:var(--body-decoration);font-style:var(--body-style);margin-block-start:var(--body-margin-block-start);margin-block-end:var(--body-margin-block-end)}&.sample-caption{font-size:var(--caption-size);font-family:var(--caption-font-family);font-weight:var(--caption-weight);line-height:var(--caption-line);letter-spacing:var(--caption-spacing);text-transform:var(--caption-transform);text-decoration:var(--caption-decoration);font-style:var(--caption-style);margin-block-start:var(--caption-margin-block-start);margin-block-end:var(--caption-margin-block-end)}&.sample-span{font-size:var(--span-size);font-family:var(--span-font-family);font-weight:var(--span-weight);line-height:var(--span-line);letter-spacing:var(--span-spacing);text-transform:var(--span-transform);text-decoration:var(--span-decoration);font-style:var(--span-style);margin-block-start:var(--span-margin-block-start);margin-block-end:var(--span-margin-block-end)}&.sample-small{font-size:var(--small-size);font-family:var(--small-font-family);font-weight:var(--small-weight);line-height:var(--small-line);letter-spacing:var(--small-spacing);text-transform:var(--small-transform);text-decoration:var(--small-decoration);font-style:var(--small-style);margin-block-start:var(--small-margin-block-start);margin-block-end:var(--small-margin-block-end)}&.sample-pre{font-size:var(--pre-size);font-family:var(--pre-font-family);font-weight:var(--pre-weight);line-height:var(--pre-line);letter-spacing:var(--pre-spacing);text-transform:var(--pre-transform);text-decoration:var(--pre-decoration);font-style:var(--pre-style);margin-block-start:var(--pre-margin-block-start);margin-block-end:var(--pre-margin-block-end)}&.sample-code{font-size:var(--code-size);font-family:var(--code-font-family);font-weight:var(--code-weight);line-height:var(--code-line);letter-spacing:var(--code-spacing);text-transform:var(--code-transform);text-decoration:var(--code-decoration);font-style:var(--code-style);margin-block-start:var(--code-margin-block-start);margin-block-end:var(--code-margin-block-end);font-size:var(--pre-size);font-family:var(--pre-font-family);font-weight:var(--pre-weight);line-height:var(--pre-line);letter-spacing:var(--pre-spacing);text-transform:var(--pre-transform);text-decoration:var(--pre-decoration);font-style:var(--pre-style);margin-block-start:var(--pre-margin-block-start);margin-block-end:var(--pre-margin-block-end)}}.json-property-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding-left:2ch}.json-key{color:var(--ds__palette__secondary-main)}.json-comment,.json-value-inherited{color:var(--ds__palette__text-disabled)}.json-comment{font-size:.75rem;margin-left:.5rem}.json-action-group{display:flex;gap:.25rem}.json-action-button{background:transparent;border:1px solid var(--ds__palette__divider-main);border-radius:4px;padding:4px;cursor:pointer;color:var(--ds__palette__text-secondary);display:flex;align-items:center;justify-content:center;transition:all .2s;&:hover{color:var(--ds__palette__primary-main);border-color:var(--ds__palette__primary-main)}&.delete-button{border:none;color:var(--ds__palette__text-disabled);&:hover{color:var(--ds__palette__error-main);background:transparent}}}.editable-typography-element{margin:0;transition:all .2s ease;outline:none;min-width:10px;cursor:text;text-align:left;width:100%;position:relative;z-index:2}#SideNav{.side-nav__backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1100;opacity:0;pointer-events:none;transition:opacity .15s ease;&.is-open{display:block;opacity:1;pointer-events:auto}}.side-nav__menu{display:none;position:fixed;top:0;left:0;bottom:0;width:280px;z-index:1200;transform:translateX(-100%);transition:transform .15s cubic-bezier(.4,0,.2,1);background:var(--ds__palette__surface-main);box-shadow:var(--shadow-1);border:none;padding:var(--space-4);height:100%;overflow-y:auto;&.is-open{display:block;transform:translateX(0)}}.side-nav__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.side-nav__title{font-family:var(--h5-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h5-size);line-height:var(--h5-line,1.4);font-weight:var(--h5-weight,600);letter-spacing:var(--h5-spacing,normal);text-transform:var(--h5-transform,none);text-decoration:var(--h5-decoration,none);font-style:var(--h5-style,normal);margin-block-start:var(--h5-margin-block-start,auto);margin-block-end:var(--h5-margin-block-end,auto);margin:0}.side-nav__close{font-family:var(--h4-font-family,var(--font-ui));font-size:var(--h4-size);line-height:var(--h4-line,1.4);font-weight:var(--h4-weight,600);letter-spacing:var(--h4-spacing,normal);text-transform:var(--h4-transform,none);text-decoration:var(--h4-decoration,none);font-style:var(--h4-style,normal);margin-block-start:var(--h4-margin-block-start,auto);margin-block-end:var(--h4-margin-block-end,auto);background:transparent;border:none;cursor:pointer;color:color-mix(in srgb,var(--ds__palette__surface-contrast) 70%,transparent);padding:var(--space-1)}.side-nav__section+.side-nav__section{margin-top:var(--density-4)}.side-nav__section-title{font-family:var(--span-font-family,var(--font-ui));font-size:var(--span-size);line-height:var(--span-line,1.5);font-weight:var(--span-weight,400);letter-spacing:var(--span-spacing,normal);text-transform:var(--span-transform,none);text-decoration:var(--span-decoration,none);font-style:var(--span-style,normal);margin-block-start:var(--span-margin-block-start,auto);margin-block-end:var(--span-margin-block-end,auto);text-transform:uppercase;opacity:.6;margin:0 0 var(--density-1) 0;padding-left:var(--density-1)}.side-nav__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--density-1)}.side-nav__link{font-family:var(--span-font-family,var(--font-ui));font-size:var(--span-size);line-height:var(--span-line,1.5);font-weight:var(--span-weight,400);letter-spacing:var(--span-spacing,normal);text-transform:var(--span-transform,none);text-decoration:var(--span-decoration,none);font-style:var(--span-style,normal);margin-block-start:var(--span-margin-block-start,auto);margin-block-end:var(--span-margin-block-end,auto);text-decoration:none;padding:var(--density-1) var(--density-2);border-radius:var(--radius-1);display:block;transition:all .1s ease;color:color-mix(in srgb,var(--ds__palette__surface-contrast) 80%,transparent);&:hover{background:var(--ds__palette__neutral-light);color:var(--ds__palette__neutral-contrast)}&[aria-current=page]{background:color-mix(in srgb,var(--ds__palette__primary-main) 10%,transparent);color:var(--ds__palette__primary-main)}}@media (min-width:1024px){display:block;--side-nav-sticky-top:calc(var(--space-12) + var(--space-7));position:sticky;top:var(--side-nav-sticky-top);width:auto;height:auto;align-self:start;margin-left:0;margin-bottom:0;margin-right:0;margin-top:0;max-height:calc(100vh - var(--side-nav-sticky-top) - var(--space-3));overflow-y:auto;.side-nav__backdrop,.side-nav__burger,.side-nav__header{display:none}.side-nav__menu{display:block;position:static;width:auto;z-index:auto;transform:none;height:auto;overflow-y:visible;padding:var(--surface-flat-padding);border-radius:var(--surface-flat-radius);background:var(--surface-flat-bg);color:var(--surface-flat-color);border:var(--surface-flat-border);box-shadow:var(--surface-flat-shadow);box-shadow:var(--shadow-1);border-radius:var(--radius-2)}}}.theme-background-container{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none;background:var(--ds__palette__surface-main)}.theme-background-image{width:100%;height:100%;object-fit:cover;filter:saturate(1.1);transition:opacity 1s ease-in-out,transform 1s ease}.theme-background-loading{position:absolute;top:65%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-code,monospace);font-size:.75rem;color:var(--ds__palette__text-secondary);z-index:1;opacity:.8;animation:pulse 1.5s ease-in-out infinite;letter-spacing:.05em;text-transform:uppercase}.theme-background-tint{position:absolute;inset:0;background:var(--ds__palette__primary-main);opacity:.5;mix-blend-mode:color;z-index:2}.theme-background-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--ds__palette__surface-light) 50%,transparent) 0,color-mix(in srgb,var(--ds__palette__surface-main) 5%,transparent) 50%,color-mix(in srgb,var(--ds__palette__surface-main) 50%,transparent) 100%);z-index:3}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.uxdsl-demo-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--density-6);width:100%;margin-top:var(--density-4);.uxdsl-card{padding:var(--surface-contained-padding);border-radius:var(--surface-contained-radius);background:var(--surface-contained-bg);color:var(--surface-contained-color);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);width:100%;border-radius:var(--radius-3);box-shadow:var(--shadow-3);transition:all .2s;overflow:hidden}@media (min-width:768px){.uxdsl-card{width:400px}}.card-header{background:linear-gradient(135deg,var(--ds__palette__primary-main),var(--ds__palette__primary-dark));padding:var(--density-6);display:grid;place-items:center}.logo-circle{padding:var(--surface-contained-padding);border-radius:var(--surface-contained-radius);background:var(--ds__palette__light-main);color:var(--ds__palette__light-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);width:var(--density-10);height:var(--density-10);border-radius:9999px;display:grid;place-items:center;box-shadow:var(--shadow-2)}.card-logo{width:60%;height:auto}.card-body{padding:var(--density-5);text-align:center;display:flex;flex-direction:column;gap:var(--density-3)}.card-title{font-family:var(--h5-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h5-size);line-height:var(--h5-line,1.4);font-weight:var(--h5-weight,600);letter-spacing:var(--h5-spacing,normal);text-transform:var(--h5-transform,none);text-decoration:var(--h5-decoration,none);font-style:var(--h5-style,normal);margin-block-start:var(--h5-margin-block-start,auto);margin-block-end:var(--h5-margin-block-end,auto)}.card-desc,.card-title{color:var(--ds__palette__primary-main)}.card-desc{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto)}.card-actions{padding:var(--density-4);border-top:var(--border-1);display:flex;gap:var(--density-2)}.btn-primary{padding:var(--surface-contained-padding);border-radius:var(--surface-contained-radius);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);--button-tone-main:var(--ds__palette__primary-main);--button-tone-dark:var(--ds__palette__primary-dark);--button-tone-contrast:var(--ds__palette__primary-contrast);width:100%;justify-content:center}.btn-primary:hover{background:var(--button-contained-tone-primary-hover-bg,var(--button-contained-hover-bg));color:var(--button-contained-tone-primary-hover-color,var(--button-contained-hover-color))}.btn-primary.is-selected,.btn-primary[aria-pressed=true],.btn-primary[aria-selected=true]{background:var(--button-contained-tone-primary-selected-bg,var(--button-contained-selected-bg));color:var(--button-contained-tone-primary-selected-color,var(--button-contained-selected-color))}.btn-secondary{padding:var(--surface-outlined-padding);border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow);--button-tone-main:var(--ds__palette__neutral-main);--button-tone-dark:var(--ds__palette__neutral-dark);--button-tone-contrast:var(--ds__palette__neutral-contrast);width:100%;justify-content:center}.btn-secondary:hover{color:var(--button-outlined-tone-neutral-hover-color,var(--button-outlined-hover-color));border:var(--button-outlined-tone-neutral-hover-border,var(--button-outlined-hover-border))}.btn-secondary.is-selected,.btn-secondary[aria-pressed=true],.btn-secondary[aria-selected=true]{background:var(--button-outlined-tone-neutral-selected-bg,var(--button-outlined-selected-bg));color:var(--button-outlined-tone-neutral-selected-color,var(--button-outlined-selected-color));border:var(--button-outlined-tone-neutral-selected-border,var(--button-outlined-selected-border))}.demo-code-block{width:100%;max-width:600px;background:var(--ds__palette__surface-main);border-radius:var(--radius-2);overflow:hidden;border:var(--border-1);box-shadow:var(--shadow-2)}.code-header{background:var(--ds__palette__primary-main);padding:var(--density-2) var(--density-3);border-bottom:var(--border-1);display:flex;align-items:center}.code-file{font-family:monospace;font-size:.8rem;font-weight:700}.code-content,.code-file{color:var(--ds__palette__neutral-light)}.code-content{font-family:var(--pre-font-family,var(--font-code),monospace);font-size:var(--pre-size);line-height:var(--pre-line,1.5);text-transform:var(--pre-transform,none);text-decoration:var(--pre-decoration,none);font-style:var(--pre-style,normal);margin-block-start:var(--pre-margin-block-start,auto);margin-block-end:var(--pre-margin-block-end,auto);padding:var(--density-4);overflow-x:auto}}#BreakpointsPage{.demo-section{display:flex;flex-direction:column;gap:var(--density-3);margin-bottom:var(--density-6)}.demo-subtitle{font-size:1.25rem;font-weight:600;color:var(--ds__palette__neutral-dark);margin-bottom:var(--density-2)}.demo-description{font-size:1rem;color:var(--ds__palette__neutral-main);line-height:1.6;max-width:800px;margin-bottom:var(--density-3)}.demo-card{border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);padding:var(--density-4);border-radius:var(--radius-3);background:var(--ds__palette__surface-main);display:flex;flex-direction:column;gap:var(--density-3)}.demo-card-title{font-size:1.1rem;font-weight:600;color:var(--ds__palette__neutral-dark);margin-bottom:var(--density-2);border-bottom:1px solid var(--ds__palette__neutral-light);padding-bottom:var(--density-2)}.demo-grid-2{display:grid;grid-template-columns:1fr;gap:var(--density-4)}@media (min-width:768px){.demo-grid-2{grid-template-columns:1fr 1fr}}.demo-code{background:var(--ds__palette__neutral-light);padding:var(--density-3);border-radius:var(--radius-2);font-family:font(code);font-size:.9rem;color:var(--ds__palette__neutral-dark);overflow-x:auto;border:1px solid var(--ds__palette__neutral-main)}.demo-table{width:100%;border-collapse:collapse;font-size:.9rem}.demo-table th{text-align:left;padding:var(--density-2);border-bottom:2px solid var(--ds__palette__neutral-light);color:var(--ds__palette__neutral-dark);font-weight:600}.demo-table td{padding:var(--density-2);border-bottom:1px solid var(--ds__palette__neutral-light);color:var(--ds__palette__neutral-main)}.demo-table code{background:var(--ds__palette__neutral-light);padding:2px 6px;border-radius:var(--radius-1);font-family:font(code);font-size:.85em;color:var(--ds__palette__primary-dark)}}#QuickStartPage{.section{gap:var(--density-6);margin-bottom:var(--density-6);margin-top:var(--density-4)}.section,.step-card{display:flex;flex-direction:column}.step-card{border-radius:var(--surface-flat-radius);background:var(--surface-flat-bg);color:var(--surface-flat-color);border:var(--surface-flat-border);box-shadow:var(--surface-flat-shadow);padding:0;gap:var(--density-3);position:relative;border-left:2px solid var(--ds__palette__neutral-light);padding-left:var(--density-4);transition:all .3s ease}.step-card:hover{border-left-color:var(--ds__palette__primary-main)}.step-header{display:flex;align-items:baseline;gap:var(--density-4)}.step-number{font-family:var(--h6-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h6-size);line-height:var(--h6-line,1.4);font-weight:var(--h6-weight,600);letter-spacing:var(--h6-spacing,normal);text-transform:var(--h6-transform,none);text-decoration:var(--h6-decoration,none);font-style:var(--h6-style,normal);margin-block-start:var(--h6-margin-block-start,auto);margin-block-end:var(--h6-margin-block-end,auto);color:var(--ds__palette__secondary-main);font-family:font(code);font-weight:700;line-height:1}.step-title{font-family:var(--h5-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h5-size);line-height:var(--h5-line,1.4);font-weight:var(--h5-weight,600);letter-spacing:var(--h5-spacing,normal);text-transform:var(--h5-transform,none);text-decoration:var(--h5-decoration,none);font-style:var(--h5-style,normal);margin-block-start:var(--h5-margin-block-start,auto);margin-block-end:var(--h5-margin-block-end,auto);margin:0;font-weight:600;letter-spacing:-.5px}.step-desc,.step-title{color:var(--ds__palette__surface-contrast)}.step-desc{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);font-weight:400;max-width:60ch;margin:0}.info-box{border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow);padding:var(--density-3);border-radius:var(--radius-1);display:flex;gap:var(--density-2);align-items:flex-start;background:color-mix(in srgb,var(--ds__palette__surface-light) 50%,transparent);border:1px dashed var(--ds__palette__neutral-main)}.info-icon{color:var(--ds__palette__primary-main);margin-top:2px}.info-text{font-family:var(--body-sm-font-family,var(--font-ui));font-size:var(--body-sm-size);line-height:var(--body-sm-line,1.5);font-weight:var(--body-sm-weight,400);letter-spacing:var(--body-sm-spacing,normal);text-transform:var(--body-sm-transform,none);text-decoration:var(--body-sm-decoration,none);font-style:var(--body-sm-style,normal);margin-block-start:var(--body-sm-margin-block-start,auto);margin-block-end:var(--body-sm-margin-block-end,auto);margin:0;color:color-mix(in srgb,var(--ds__palette__surface-contrast) 80%,transparent)}.code-wrapper{margin-top:var(--density-4);box-shadow:var(--shadow-2)}.warning-blockquote{border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:var(--surface-outlined-shadow);padding:var(--density-4);border-radius:var(--radius-1);margin-bottom:var(--density-8);color:var(--ds__palette__text-primary)}}#TypographyPage{.doc-content{display:flex;flex-direction:column;gap:var(--density-3)}.doc-divider{border:0;border-top:1px solid var(--ds__palette__neutral-light);opacity:.6;margin:var(--density-10) 0}.doc-content h2.ds-typo{font-family:var(--h2-font-family,var(--font-ui));font-size:var(--h2-size);line-height:var(--h2-line,1.2);font-weight:var(--h2-weight,700);letter-spacing:var(--h2-spacing,-.01em);text-transform:var(--h2-transform,none);text-decoration:var(--h2-decoration,none);font-style:var(--h2-style,normal);margin-block-start:var(--h2-margin-block-start,auto);margin-block-end:var(--h2-margin-block-end,auto);margin:0;color:var(--ds__palette__surface-contrast)}.doc-content h3.ds-typo{font-family:var(--h3-font-family,var(--font-ui));font-size:var(--h3-size);line-height:var(--h3-line,1.3);font-weight:var(--h3-weight,600);letter-spacing:var(--h3-spacing,normal);text-transform:var(--h3-transform,none);text-decoration:var(--h3-decoration,none);font-style:var(--h3-style,normal);margin-block-start:var(--h3-margin-block-start,auto);margin-block-end:var(--h3-margin-block-end,auto);margin:var(--density-4) 0 var(--density-2);color:var(--ds__palette__surface-contrast)}.doc-paragraph{font-family:var(--p-font-family,var(--font-ui));font-size:var(--p-size);line-height:var(--p-line,1.6);font-weight:var(--p-weight,400);letter-spacing:var(--p-spacing,normal);text-transform:var(--p-transform,none);text-decoration:var(--p-decoration,none);font-style:var(--p-style,normal);margin-block-start:var(--p-margin-block-start,auto);margin-block-end:var(--p-margin-block-end,auto);margin:0;color:color-mix(in srgb,var(--ds__palette__surface-contrast) 85%,transparent);max-width:75ch}.code-wrapper{margin-top:var(--density-3);box-shadow:var(--shadow-2)}.table-card{border-radius:var(--surface-outlined-radius);background:var(--surface-outlined-bg);color:var(--surface-outlined-color);border:var(--surface-outlined-border);box-shadow:var(--surface-outlined-shadow);padding:var(--density-3);border-radius:var(--radius-2);background:color-mix(in srgb,var(--ds__palette__surface-light) 35%,transparent);overflow-x:auto}.doc-table{width:100%;border-collapse:collapse}.doc-table th{font-family:var(--small-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--small-size);line-height:var(--small-line,1.4);letter-spacing:var(--small-spacing,normal);text-transform:var(--small-transform,none);text-decoration:var(--small-decoration,none);font-style:var(--small-style,normal);margin-block-start:var(--small-margin-block-start,auto);margin-block-end:var(--small-margin-block-end,auto);opacity:var(--small-opacity,.8);text-align:left;padding:var(--density-2);border-bottom:2px solid var(--ds__palette__neutral-light);color:var(--ds__palette__surface-contrast);font-weight:600}.doc-table td{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);padding:var(--density-2);border-bottom:1px solid var(--ds__palette__neutral-light);color:color-mix(in srgb,var(--ds__palette__surface-contrast) 85%,transparent);vertical-align:top}.doc-table tr:last-child td{border-bottom:0}.doc-table code{background:var(--ds__palette__neutral-light);padding:2px 6px;border-radius:var(--radius-1);font-family:font(code);font-size:.9em;color:var(--ds__palette__primary-dark)}.info-box{border-radius:var(--surface-outlined-radius);background:transparent;color:var(--ds__palette__neutral-main);box-shadow:var(--surface-outlined-shadow);padding:var(--density-3);border-radius:var(--radius-2);background:color-mix(in srgb,var(--ds__palette__surface-light) 35%,transparent);border:1px dashed var(--ds__palette__neutral-main)}.info-text{font-family:var(--small-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--small-size);line-height:var(--small-line,1.4);letter-spacing:var(--small-spacing,normal);text-transform:var(--small-transform,none);text-decoration:var(--small-decoration,none);font-style:var(--small-style,normal);margin-block-start:var(--small-margin-block-start,auto);margin-block-end:var(--small-margin-block-end,auto);opacity:var(--small-opacity,.8);margin:0;color:color-mix(in srgb,var(--ds__palette__surface-contrast) 85%,transparent);max-width:75ch}}.not-found-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:var(--density-6);padding:var(--density-4);text-align:center;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.error-code{font-size:8rem;font-weight:800;line-height:1;color:color-mix(in srgb,var(--ds__palette__primary-light) 15%,transparent);margin:0;user-select:none}.title-group{display:flex;flex-direction:column;gap:var(--density-2);align-items:center;margin-top:-4.5rem;position:relative;z-index:1}.title{font-family:var(--h2-font-family,var(--font-ui));font-size:var(--h2-size);line-height:var(--h2-line,1.2);font-weight:var(--h2-weight,700);letter-spacing:var(--h2-spacing,-.01em);text-transform:var(--h2-transform,none);text-decoration:var(--h2-decoration,none);font-style:var(--h2-style,normal);margin-block-start:var(--h2-margin-block-start,auto);margin-block-end:var(--h2-margin-block-end,auto);color:var(--ds__palette__text-primary)}.subtitle{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto);color:var(--ds__palette__text-secondary);max-width:500px;line-height:1.6}.nav-grid{display:grid;grid-template-columns:1fr;gap:var(--density-3);width:100%;max-width:700px;margin-top:var(--density-4)}@media (min-width:600px){.nav-grid{grid-template-columns:1fr 1fr}}.nav-card{border-radius:var(--surface-contained-radius);background:var(--surface-contained-bg);color:var(--surface-contained-color);box-shadow:var(--surface-contained-shadow);padding:var(--density-4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--density-2);transition:all .2s ease;cursor:pointer;text-decoration:none;border:1px solid transparent;height:100%;&:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);border-color:color-mix(in srgb,var(--ds__palette__primary-light) 30%,transparent);.nav-card-icon{background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast)}}}.nav-card-icon{width:40px;height:40px;background:color-mix(in srgb,var(--ds__palette__surface-dark) 50%,transparent);border-radius:9999px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.nav-card-icon,.nav-card-title{color:var(--ds__palette__text-primary)}.nav-card-title{font-family:var(--h6-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h6-size);line-height:var(--h6-line,1.4);font-weight:var(--h6-weight,600);letter-spacing:var(--h6-spacing,normal);text-transform:var(--h6-transform,none);text-decoration:var(--h6-decoration,none);font-style:var(--h6-style,normal);margin-block-start:var(--h6-margin-block-start,auto);margin-block-end:var(--h6-margin-block-end,auto);margin:0}.nav-card-desc{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);color:var(--ds__palette__text-secondary);text-align:left;margin:0;line-height:1.5}#WelcomePage{display:flex;flex-direction:column;min-height:calc(100vh - 64px);width:100%;.hero-surface{border-radius:var(--surface-contained-radius);background:var(--surface-contained-bg);color:var(--surface-contained-color);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);width:100%;flex:1;display:grid;place-items:center;gap:var(--density-8);background:transparent;border-bottom:var(--border-1);padding:var(--density-8)}.hero-content{display:flex;flex-direction:column;align-items:center;gap:var(--density-4);text-align:center;@media (min-width:768px){flex-direction:row;justify-content:center;text-align:left;.welcome-page-title{.page-title__text{margin-bottom:0}}}}.logo-container{width:7.5rem;height:7.5rem;display:grid;place-items:center;filter:drop-shadow(0 4px 12px rgba(0,0,0,.1))}.hero-logo{width:100%;height:auto}.welcome-page-title{margin-bottom:0;.page-title__text{font-family:var(--h1-font-family,var(--font-ui));font-size:var(--h1-size);line-height:var(--h1-line,1.1);font-weight:var(--h1-weight,700);letter-spacing:var(--h1-spacing,-.02em);text-transform:var(--h1-transform,none);text-decoration:var(--h1-decoration,none);font-style:var(--h1-style,normal);margin-block-start:var(--h1-margin-block-start,auto);margin-block-end:var(--h1-margin-block-end,auto);background:linear-gradient(135deg,var(--ds__palette__primary-dark),var(--ds__palette__primary-main));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--density-2)}.page-title__subtitle{font-family:var(--h3-font-family,var(--font-ui));font-size:var(--h3-size);line-height:var(--h3-line,1.3);font-weight:var(--h3-weight,600);letter-spacing:var(--h3-spacing,normal);text-transform:var(--h3-transform,none);text-decoration:var(--h3-decoration,none);font-style:var(--h3-style,normal);margin-block-start:var(--h3-margin-block-start,auto);margin-block-end:var(--h3-margin-block-end,auto);color:var(--ds__palette__text-secondary)}}.home-container{box-sizing:border-box;max-width:90vw;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--density-6);padding:var(--density-8) var(--density-4) var(--density-10)}.actions{margin-top:0}.actions,.get-started-btn{width:100%;display:flex;justify-content:center}.get-started-btn{border-radius:var(--radius-3);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);--button-tone-main:var(--ds__palette__primary-main);--button-tone-dark:var(--ds__palette__primary-dark);--button-tone-contrast:var(--ds__palette__primary-contrast);align-items:center;gap:var(--density-2);padding:var(--density-4) var(--density-6);border-radius:9999px;transition:transform .2s;&:hover{transform:translateY(-2px);box-shadow:var(--shadow-4)}}.get-started-btn:hover{background:var(--button-contained-tone-primary-hover-bg,var(--button-contained-hover-bg));color:var(--button-contained-tone-primary-hover-color,var(--button-contained-hover-color))}.get-started-btn.is-selected,.get-started-btn[aria-pressed=true],.get-started-btn[aria-selected=true]{background:var(--button-contained-tone-primary-selected-bg,var(--button-contained-selected-bg));color:var(--button-contained-tone-primary-selected-color,var(--button-contained-selected-color))}.intro-section{width:100%;margin:0}.intro-text{font-family:var(--span-font-family,var(--font-ui));font-size:var(--span-size);line-height:var(--span-line,1.5);font-weight:var(--span-weight,400);letter-spacing:var(--span-spacing,normal);text-transform:var(--span-transform,none);text-decoration:var(--span-decoration,none);font-style:var(--span-style,normal);margin-block-start:var(--span-margin-block-start,auto);margin-block-end:var(--span-margin-block-end,auto);color:var(--ds__palette__text-secondary);text-align:center}.nav-grid{display:grid;grid-template-columns:1fr;margin-top:var(--density-2);margin-bottom:var(--density-2);box-sizing:border-box;@media (min-width:768px){grid-template-columns:repeat(2,1fr)}}.demo-section,.nav-grid{gap:var(--density-4);width:100%;max-width:100%}.demo-section{display:flex;flex-direction:column;align-items:center;margin-top:var(--density-4)}.section-label{font-family:var(--h6-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h6-size);line-height:var(--h6-line,1.4);font-weight:var(--h6-weight,600);letter-spacing:var(--h6-spacing,normal);text-transform:var(--h6-transform,none);text-decoration:var(--h6-decoration,none);font-style:var(--h6-style,normal);margin-block-start:var(--h6-margin-block-start,auto);margin-block-end:var(--h6-margin-block-end,auto);color:var(--ds__palette__text-secondary);text-transform:uppercase;letter-spacing:.05em}.demo-wrapper-scale{width:100%}.welcome-footer{margin-top:auto;padding:var(--density-8) var(--density-4);background:var(--ds__palette__surface-light);border-top:var(--border-1);display:flex;flex-direction:column;align-items:center;gap:var(--density-4);width:100%}.footer-links{display:flex;gap:var(--density-6);flex-wrap:wrap;justify-content:center}.footer-link{display:flex;align-items:center;gap:var(--density-2);color:var(--ds__palette__text-secondary);text-decoration:none;font-weight:500;transition:color .2s;&:hover{color:var(--ds__palette__primary-main)}}.footer-copy{font-family:var(--caption-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--caption-size);line-height:var(--caption-line,1.4);letter-spacing:var(--caption-spacing,normal);text-transform:var(--caption-transform,none);text-decoration:var(--caption-decoration,none);font-style:var(--caption-style,normal);margin-block-start:var(--caption-margin-block-start,auto);margin-block-end:var(--caption-margin-block-end,auto);opacity:var(--caption-opacity,.8);color:var(--ds__palette__text-disabled)}}#ProductivityPage{.back-link{font-family:var(--body-sm-font-family,var(--font-ui));font-size:var(--body-sm-size);line-height:var(--body-sm-line,1.5);font-weight:var(--body-sm-weight,400);letter-spacing:var(--body-sm-spacing,normal);text-transform:var(--body-sm-transform,none);text-decoration:var(--body-sm-decoration,none);font-style:var(--body-sm-style,normal);margin-block-start:var(--body-sm-margin-block-start,auto);margin-block-end:var(--body-sm-margin-block-end,auto);color:var(--ds__palette__primary-main);text-decoration:none;font-weight:700}.back-link:hover{text-decoration:underline}}#ThemingPage{.palette-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}.palette-swatch{border-radius:var(--surface-contained-radius);background:var(--surface-contained-bg);color:var(--surface-contained-color);border:var(--surface-contained-border);box-shadow:var(--surface-contained-shadow);padding:var(--space-3);border-radius:var(--radius-2);box-shadow:var(--shadow-1)}.palette-swatch__title{font-family:var(--h5-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--h5-size);line-height:var(--h5-line,1.4);font-weight:var(--h5-weight,600);letter-spacing:var(--h5-spacing,normal);text-transform:var(--h5-transform,none);text-decoration:var(--h5-decoration,none);font-style:var(--h5-style,normal);margin-block-start:var(--h5-margin-block-start,auto);margin-block-end:var(--h5-margin-block-end,auto);margin:0 0 var(--space-2) 0;text-transform:capitalize}.palette-swatch__rows{display:grid;gap:var(--space-1)}.palette-swatch .row{display:flex;align-items:baseline;justify-content:space-between}.palette-swatch .label{font-family:var(--small-font-family,var(--font-ui-2,var(--font-ui)));font-size:var(--small-size);line-height:var(--small-line,1.4);letter-spacing:var(--small-spacing,normal);text-transform:var(--small-transform,none);text-decoration:var(--small-decoration,none);font-style:var(--small-style,normal);margin-block-start:var(--small-margin-block-start,auto);margin-block-end:var(--small-margin-block-end,auto);opacity:var(--small-opacity,.8);opacity:.75}.palette-swatch .value{font-family:var(--body-font-family,var(--font-ui));font-size:var(--body-size);line-height:var(--body-line,1.6);font-weight:var(--body-weight,400);letter-spacing:var(--body-spacing,normal);text-transform:var(--body-transform,none);text-decoration:var(--body-decoration,none);font-style:var(--body-style,normal);margin-block-start:var(--body-margin-block-start,auto);margin-block-end:var(--body-margin-block-end,auto)}}:root{--ds__palette__primary-main:#7e22ce;--ds__palette__primary-light:#a855f7;--ds__palette__primary-dark:#581c87;--ds__palette__primary-contrast:#fff;--ds__palette__secondary-main:#db2777;--ds__palette__secondary-light:#f472b6;--ds__palette__secondary-dark:#be185d;--ds__palette__secondary-contrast:#fff;--ds__palette__surface-main:#fff;--ds__palette__surface-light:#f8fafc;--ds__palette__surface-dark:#e2e8f0;--ds__palette__surface-contrast:#0f172a;--ds__palette__surface-paper:var(--ds__palette__surface-light);--ds__palette__surface-subtle:var(--ds__palette__surface-dark);--ds__palette__tertiary-main:#94a3b8;--ds__palette__tertiary-light:#cbd5e1;--ds__palette__tertiary-dark:#475569;--ds__palette__tertiary-contrast:#000;--ds__palette__success-main:#15803d;--ds__palette__success-light:#16a34a;--ds__palette__success-dark:#14532d;--ds__palette__success-contrast:#fff;--ds__palette__info-main:#0369a1;--ds__palette__info-light:#0284c7;--ds__palette__info-dark:#075985;--ds__palette__info-contrast:#fff;--ds__palette__warning-main:#d97706;--ds__palette__warning-light:#fbbf24;--ds__palette__warning-dark:#c25e0a;--ds__palette__warning-contrast:#000;--ds__palette__error-main:#dc2626;--ds__palette__error-light:#ef4444;--ds__palette__error-dark:#b91c1c;--ds__palette__error-contrast:#fff;--ds__palette__dark-main:#0f172a;--ds__palette__dark-light:#1e293b;--ds__palette__dark-dark:#020617;--ds__palette__dark-contrast:#fff;--ds__palette__neutral-main:#64748b;--ds__palette__neutral-light:#cbd5e1;--ds__palette__neutral-dark:#334155;--ds__palette__neutral-contrast:#fff;--ds__palette__light-main:#f1f5f9;--ds__palette__light-light:#fff;--ds__palette__light-dark:#e2e8f0;--ds__palette__light-contrast:#0f172a;--ds__palette__text-main:var(--ds__palette__text-primary);--ds__palette__text-primary:var(--ds__palette__surface-contrast);--ds__palette__text-secondary:var(--ds__palette__neutral-dark);--ds__palette__text-disabled:var(--ds__palette__tertiary-main);--ds__palette__divider-main:var(--ds__palette__surface-dark);--ds__palette__action-disabled:var(--ds__palette__text-disabled);--ds__color__gray-300:#cbd5e1;--ds__color__gray-400:#94a3b8;--ds__color__gray-500:#64748b;--ds__color__gray-600:#475569;--space-1:0.125rem;--space-2:0.25rem;--space-3:0.5rem;--space-4:0.75rem;--space-5:1rem;--space-6:1.5rem;--space-7:2rem;--space-8:2.5rem;--space-9:3.125rem;--space-10:3.875rem;--space-11:4.875rem;--space-12:6.125rem;--space-13:7.75rem;--space-14:9.75rem;--space-15:12.25rem;--space-16:15.375rem}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ds__palette__primary-main:#c084fc;--ds__palette__primary-light:#d8b4fe;--ds__palette__primary-dark:#a855f7;--ds__palette__primary-contrast:#000;--ds__palette__secondary-main:#f472b6;--ds__palette__secondary-contrast:#000;--ds__palette__surface-main:#020617;--ds__palette__surface-light:#0f172a;--ds__palette__surface-dark:#000;--ds__palette__surface-contrast:#f8fafc;--ds__palette__neutral-main:#94a3b8;--ds__palette__neutral-light:#cbd5e1;--ds__palette__neutral-dark:#475569;--ds__palette__neutral-contrast:#000;--ds__palette__tertiary-main:#94a3b8;--ds__palette__tertiary-contrast:#000;--ds__palette__success-main:#4ade80;--ds__palette__success-contrast:#000;--ds__palette__info-main:#38bdf8;--ds__palette__info-contrast:#000;--ds__palette__warning-main:#fbbf24;--ds__palette__warning-contrast:#000;--ds__palette__error-main:#f87171;--ds__palette__error-contrast:#000;--ds__palette__light-main:#1e293b;--ds__palette__light-contrast:#f8fafc;--ds__palette__dark-main:#000;--ds__palette__dark-contrast:#f8fafc}}:root[data-theme=dark]{--ds__palette__primary-main:#c084fc;--ds__palette__primary-light:#d8b4fe;--ds__palette__primary-dark:#a855f7;--ds__palette__primary-contrast:#000;--ds__palette__secondary-main:#f472b6;--ds__palette__secondary-contrast:#000;--ds__palette__surface-main:#020617;--ds__palette__surface-light:#0f172a;--ds__palette__surface-dark:#000;--ds__palette__surface-contrast:#f8fafc;--ds__palette__neutral-main:#94a3b8;--ds__palette__neutral-light:#cbd5e1;--ds__palette__neutral-dark:#475569;--ds__palette__neutral-contrast:#000;--ds__palette__tertiary-main:#94a3b8;--ds__palette__tertiary-contrast:#000;--ds__palette__success-main:#4ade80;--ds__palette__success-contrast:#000;--ds__palette__info-main:#38bdf8;--ds__palette__info-contrast:#000;--ds__palette__warning-main:#fbbf24;--ds__palette__warning-contrast:#000;--ds__palette__error-main:#f87171;--ds__palette__error-contrast:#000;--ds__palette__light-main:#1e293b;--ds__palette__light-contrast:#f8fafc;--ds__palette__dark-main:#000;--ds__palette__dark-contrast:#f8fafc}:root{--font-ui:Inter,sans-serif;--font-code:monospace;--font-code:"JetBrains Mono","SF Mono",Menlo,monospace;--default-size:var(--space-5);--default-weight:400;--default-line:1.6;--default-spacing:normal;--tag-size:var(--space-4);--tag-weight:400;--tag-line:1.4;--tag-spacing:0.01em;--h1-size:var(--space-7);--h1-weight:700;--h1-line:1.2;--h1-spacing:-0.02em;--h1-margin-block-end:0.2em;--h2-size:var(--space-6);--h2-weight:700;--h2-line:1.2;--h2-spacing:-0.01em;--h3-size:var(--space-6);--h3-weight:600;--h3-line:1.3;--h3-spacing:normal;--h4-size:var(--space-5);--h4-weight:600;--h4-line:1.4;--h4-spacing:normal;--h5-size:var(--space-5);--h5-weight:600;--h5-line:1.4;--h5-spacing:normal;--h6-size:var(--space-5);--h6-weight:600;--h6-line:1.4;--h6-spacing:normal;--p-size:var(--space-5);--p-weight:400;--p-line:1.6;--p-spacing:normal;--body-size:var(--space-5);--body-weight:400;--body-line:1.6;--body-spacing:normal;--span-size:var(--space-5);--span-weight:400;--span-line:1.6;--span-spacing:normal;--small-size:var(--space-4);--small-weight:400;--small-line:1.4;--small-spacing:0.01em;--code-size:var(--space-4);--code-weight:400;--code-line:1.55;--code-spacing:normal;--pre-size:var(--space-4);--pre-weight:400;--pre-line:1.55;--pre-spacing:normal;--caption-size:var(--space-4);--caption-weight:400;--caption-line:1.4;--caption-spacing:0.01em;--body-sm-size:var(--space-4);--body-sm-weight:400;--body-sm-line:1.4;--body-sm-spacing:0.01em;--subtitle2-size:var(--space-4);--subtitle2-weight:500;--subtitle2-line:1.4;--subtitle2-spacing:0.01em}@media (min-width:480px){:root{--h2-size:var(--space-7)}}@media (min-width:768px){:root{--default-line:1.7;--tag-line:1.5;--h1-size:var(--space-8);--h1-line:1.3;--h2-line:1.3;--h3-size:var(--space-7);--h3-line:1.4;--h4-size:var(--space-6);--h4-line:1.5;--h5-line:1.5;--h6-line:1.5;--p-line:1.7;--body-line:1.7;--span-line:1.7;--small-line:1.5;--code-line:1.6;--pre-line:1.6;--caption-line:1.5;--body-sm-line:1.5;--subtitle2-line:1.5}}@media (min-width:1024px){:root{--h1-size:var(--space-9);--h2-size:var(--space-8)}}@media (min-width:1280px){:root{--h1-size:var(--space-10);--h2-size:var(--space-9);--h3-size:var(--space-8);--h4-size:var(--space-7);--h5-size:var(--space-6)}}:root{--shadow-0:none;--shadow-1:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);--shadow-2:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12);--shadow-3:0 2px 4px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.14);--shadow-4:0 4px 6px rgba(0,0,0,.08),0 10px 15px rgba(0,0,0,.16);--shadow-5:0 10px 15px rgba(0,0,0,.1),0 20px 25px rgba(0,0,0,.2);--border-1:1px solid var(--ds__color__gray-300);--border-2:var(--space-1) solid var(--ds__color__gray-300);--border-3:var(--space-2) solid var(--ds__color__gray-400);--border-4:var(--space-3) solid var(--ds__color__gray-500);--border-5:var(--space-4) solid var(--ds__color__gray-600);--radius-0:0;--radius-1:var(--space-1);--radius-2:var(--space-2);--radius-3:var(--space-3);--radius-4:var(--space-4);--radius-5:var(--space-6)}@media (min-width:1024px){:root{--radius-1:var(--space-2);--radius-2:var(--space-3);--radius-3:var(--space-4);--radius-4:var(--space-6);--radius-5:var(--space-8)}}@media (min-width:768px){:root{--density-7:var(--space-8);--density-8:var(--space-9);--density-9:var(--space-10);--density-10:var(--space-11);--density-11:var(--space-12);--density-12:var(--space-13);--density-13:var(--space-14);--density-14:var(--space-15);--density-15:var(--space-16)}}@media (min-width:1024px){:root{--density-1:var(--space-2);--density-2:var(--space-3);--density-3:var(--space-4);--density-4:var(--space-5);--density-5:var(--space-6);--density-6:var(--space-7)}}@media (min-width:1280px){:root{--density-7:var(--space-9);--density-8:var(--space-10);--density-9:var(--space-11);--density-10:var(--space-12);--density-11:var(--space-13);--density-12:var(--space-14);--density-13:var(--space-15);--density-14:var(--space-16)}}:root{--surface-contained-padding:var(--density-2);--surface-contained-radius:var(--radius-2);--surface-contained-bg:var(--ds__palette__surface-main);--surface-contained-color:var(--ds__palette__surface-contrast);--surface-contained-border:1px solid var(--ds__palette__surface-dark);--surface-contained-shadow:var(--shadow-1);--surface-outlined-padding:var(--density-2);--surface-outlined-radius:var(--radius-2);--surface-outlined-bg:transparent;--surface-outlined-color:var(--ds__palette__surface-contrast);--surface-outlined-border:1px solid var(--ds__palette__neutral-main);--surface-outlined-shadow:none;--surface-flat-padding:var(--density-2);--surface-flat-radius:var(--radius-2);--surface-flat-bg:transparent;--surface-flat-color:var(--ds__palette__surface-contrast);--surface-flat-border:none;--surface-flat-shadow:none;--button-contained-hover-bg:var(--button-tone-dark,var(--ds__palette__primary-dark));--button-contained-hover-color:var(--button-tone-contrast,var(--ds__palette__primary-contrast));--button-contained-tone-primary-hover-bg:var(--ds__palette__primary-dark);--button-contained-tone-primary-hover-color:var(--ds__palette__primary-contrast);--button-contained-tone-secondary-hover-bg:var(--ds__palette__secondary-dark);--button-contained-tone-secondary-hover-color:var(--ds__palette__secondary-contrast);--button-contained-tone-surface-hover-bg:var(--ds__palette__surface-dark);--button-contained-tone-surface-hover-color:var(--ds__palette__surface-contrast);--button-contained-tone-tertiary-hover-bg:var(--ds__palette__tertiary-dark);--button-contained-tone-tertiary-hover-color:var(--ds__palette__tertiary-contrast);--button-contained-tone-success-hover-bg:var(--ds__palette__success-dark);--button-contained-tone-success-hover-color:var(--ds__palette__success-contrast);--button-contained-tone-info-hover-bg:var(--ds__palette__info-dark);--button-contained-tone-info-hover-color:var(--ds__palette__info-contrast);--button-contained-tone-warning-hover-bg:var(--ds__palette__warning-dark);--button-contained-tone-warning-hover-color:var(--ds__palette__warning-contrast);--button-contained-tone-error-hover-bg:var(--ds__palette__error-dark);--button-contained-tone-error-hover-color:var(--ds__palette__error-contrast);--button-contained-tone-dark-hover-bg:var(--ds__palette__dark-dark);--button-contained-tone-dark-hover-color:var(--ds__palette__dark-contrast);--button-contained-tone-neutral-hover-bg:var(--ds__palette__neutral-dark);--button-contained-tone-neutral-hover-color:var(--ds__palette__neutral-contrast);--button-contained-tone-light-hover-bg:var(--ds__palette__light-dark);--button-contained-tone-light-hover-color:var(--ds__palette__light-contrast);--button-contained-selected-bg:var(--button-tone-dark,var(--ds__palette__primary-dark));--button-contained-selected-color:var(--button-tone-contrast,var(--ds__palette__primary-contrast));--button-contained-tone-primary-selected-bg:var(--ds__palette__primary-dark);--button-contained-tone-primary-selected-color:var(--ds__palette__primary-contrast);--button-contained-tone-secondary-selected-bg:var(--ds__palette__secondary-dark);--button-contained-tone-secondary-selected-color:var(--ds__palette__secondary-contrast);--button-contained-tone-surface-selected-bg:var(--ds__palette__surface-dark);--button-contained-tone-surface-selected-color:var(--ds__palette__surface-contrast);--button-contained-tone-tertiary-selected-bg:var(--ds__palette__tertiary-dark);--button-contained-tone-tertiary-selected-color:var(--ds__palette__tertiary-contrast);--button-contained-tone-success-selected-bg:var(--ds__palette__success-dark);--button-contained-tone-success-selected-color:var(--ds__palette__success-contrast);--button-contained-tone-info-selected-bg:var(--ds__palette__info-dark);--button-contained-tone-info-selected-color:var(--ds__palette__info-contrast);--button-contained-tone-warning-selected-bg:var(--ds__palette__warning-dark);--button-contained-tone-warning-selected-color:var(--ds__palette__warning-contrast);--button-contained-tone-error-selected-bg:var(--ds__palette__error-dark);--button-contained-tone-error-selected-color:var(--ds__palette__error-contrast);--button-contained-tone-dark-selected-bg:var(--ds__palette__dark-dark);--button-contained-tone-dark-selected-color:var(--ds__palette__dark-contrast);--button-contained-tone-neutral-selected-bg:var(--ds__palette__neutral-dark);--button-contained-tone-neutral-selected-color:var(--ds__palette__neutral-contrast);--button-contained-tone-light-selected-bg:var(--ds__palette__light-dark);--button-contained-tone-light-selected-color:var(--ds__palette__light-contrast);--button-outlined-hover-color:var(--button-tone-dark,var(--ds__palette__primary-dark));--button-outlined-hover-border:1px solid var(--button-tone-dark,var(--ds__palette__primary-dark));--button-outlined-tone-primary-hover-color:var(--ds__palette__primary-dark);--button-outlined-tone-primary-hover-border:1px solid var(--ds__palette__primary-dark);--button-outlined-tone-secondary-hover-color:var(--ds__palette__secondary-dark);--button-outlined-tone-secondary-hover-border:1px solid var(--ds__palette__secondary-dark);--button-outlined-tone-surface-hover-color:var(--ds__palette__surface-dark);--button-outlined-tone-surface-hover-border:1px solid var(--ds__palette__surface-dark);--button-outlined-tone-tertiary-hover-color:var(--ds__palette__tertiary-dark);--button-outlined-tone-tertiary-hover-border:1px solid var(--ds__palette__tertiary-dark);--button-outlined-tone-success-hover-color:var(--ds__palette__success-dark);--button-outlined-tone-success-hover-border:1px solid var(--ds__palette__success-dark);--button-outlined-tone-info-hover-color:var(--ds__palette__info-dark);--button-outlined-tone-info-hover-border:1px solid var(--ds__palette__info-dark);--button-outlined-tone-warning-hover-color:var(--ds__palette__warning-dark);--button-outlined-tone-warning-hover-border:1px solid var(--ds__palette__warning-dark);--button-outlined-tone-error-hover-color:var(--ds__palette__error-dark);--button-outlined-tone-error-hover-border:1px solid var(--ds__palette__error-dark);--button-outlined-tone-dark-hover-color:var(--ds__palette__dark-dark);--button-outlined-tone-dark-hover-border:1px solid var(--ds__palette__dark-dark);--button-outlined-tone-neutral-hover-color:var(--ds__palette__neutral-dark);--button-outlined-tone-neutral-hover-border:1px solid var(--ds__palette__neutral-dark);--button-outlined-tone-light-hover-color:var(--ds__palette__light-dark);--button-outlined-tone-light-hover-border:1px solid var(--ds__palette__light-dark);--button-outlined-selected-bg:var(--button-tone-main,var(--ds__palette__primary-main));--button-outlined-selected-color:var(--button-tone-contrast,var(--ds__palette__primary-contrast));--button-outlined-selected-border:1px solid var(--button-tone-main,var(--ds__palette__primary-main));--button-outlined-tone-primary-selected-bg:var(--ds__palette__primary-main);--button-outlined-tone-primary-selected-color:var(--ds__palette__primary-contrast);--button-outlined-tone-primary-selected-border:1px solid var(--ds__palette__primary-main);--button-outlined-tone-secondary-selected-bg:var(--ds__palette__secondary-main);--button-outlined-tone-secondary-selected-color:var(--ds__palette__secondary-contrast);--button-outlined-tone-secondary-selected-border:1px solid var(--ds__palette__secondary-main);--button-outlined-tone-surface-selected-bg:var(--ds__palette__surface-main);--button-outlined-tone-surface-selected-color:var(--ds__palette__surface-contrast);--button-outlined-tone-surface-selected-border:1px solid var(--ds__palette__surface-main);--button-outlined-tone-tertiary-selected-bg:var(--ds__palette__tertiary-main);--button-outlined-tone-tertiary-selected-color:var(--ds__palette__tertiary-contrast);--button-outlined-tone-tertiary-selected-border:1px solid var(--ds__palette__tertiary-main);--button-outlined-tone-success-selected-bg:var(--ds__palette__success-main);--button-outlined-tone-success-selected-color:var(--ds__palette__success-contrast);--button-outlined-tone-success-selected-border:1px solid var(--ds__palette__success-main);--button-outlined-tone-info-selected-bg:var(--ds__palette__info-main);--button-outlined-tone-info-selected-color:var(--ds__palette__info-contrast);--button-outlined-tone-info-selected-border:1px solid var(--ds__palette__info-main);--button-outlined-tone-warning-selected-bg:var(--ds__palette__warning-main);--button-outlined-tone-warning-selected-color:var(--ds__palette__warning-contrast);--button-outlined-tone-warning-selected-border:1px solid var(--ds__palette__warning-main);--button-outlined-tone-error-selected-bg:var(--ds__palette__error-main);--button-outlined-tone-error-selected-color:var(--ds__palette__error-contrast);--button-outlined-tone-error-selected-border:1px solid var(--ds__palette__error-main);--button-outlined-tone-dark-selected-bg:var(--ds__palette__dark-main);--button-outlined-tone-dark-selected-color:var(--ds__palette__dark-contrast);--button-outlined-tone-dark-selected-border:1px solid var(--ds__palette__dark-main);--button-outlined-tone-neutral-selected-bg:var(--ds__palette__neutral-main);--button-outlined-tone-neutral-selected-color:var(--ds__palette__neutral-contrast);--button-outlined-tone-neutral-selected-border:1px solid var(--ds__palette__neutral-main);--button-outlined-tone-light-selected-bg:var(--ds__palette__light-main);--button-outlined-tone-light-selected-color:var(--ds__palette__light-contrast);--button-outlined-tone-light-selected-border:1px solid var(--ds__palette__light-main);--button-flat-hover-color:var(--button-tone-dark,var(--ds__palette__primary-dark));--button-flat-tone-primary-hover-color:var(--ds__palette__primary-dark);--button-flat-tone-secondary-hover-color:var(--ds__palette__secondary-dark);--button-flat-tone-surface-hover-color:var(--ds__palette__surface-dark);--button-flat-tone-tertiary-hover-color:var(--ds__palette__tertiary-dark);--button-flat-tone-success-hover-color:var(--ds__palette__success-dark);--button-flat-tone-info-hover-color:var(--ds__palette__info-dark);--button-flat-tone-warning-hover-color:var(--ds__palette__warning-dark);--button-flat-tone-error-hover-color:var(--ds__palette__error-dark);--button-flat-tone-dark-hover-color:var(--ds__palette__dark-dark);--button-flat-tone-neutral-hover-color:var(--ds__palette__neutral-dark);--button-flat-tone-light-hover-color:var(--ds__palette__light-dark);--button-flat-selected-color:var(--button-tone-dark,var(--ds__palette__primary-dark));--button-flat-tone-primary-selected-color:var(--ds__palette__primary-dark);--button-flat-tone-secondary-selected-color:var(--ds__palette__secondary-dark);--button-flat-tone-surface-selected-color:var(--ds__palette__surface-dark);--button-flat-tone-tertiary-selected-color:var(--ds__palette__tertiary-dark);--button-flat-tone-success-selected-color:var(--ds__palette__success-dark);--button-flat-tone-info-selected-color:var(--ds__palette__info-dark);--button-flat-tone-warning-selected-color:var(--ds__palette__warning-dark);--button-flat-tone-error-selected-color:var(--ds__palette__error-dark);--button-flat-tone-dark-selected-color:var(--ds__palette__dark-dark);--button-flat-tone-neutral-selected-color:var(--ds__palette__neutral-dark);--button-flat-tone-light-selected-color:var(--ds__palette__light-dark);--input-contained-base-caret:var(--input-tone-main,var(--ds__palette__primary-main));--input-contained-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-tone-primary-base-caret:var(--ds__palette__primary-main);--input-contained-tone-primary-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-tone-secondary-base-caret:var(--ds__palette__secondary-main);--input-contained-tone-secondary-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-tone-surface-base-caret:var(--ds__palette__surface-main);--input-contained-tone-surface-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-tone-tertiary-base-caret:var(--ds__palette__tertiary-main);--input-contained-tone-tertiary-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-tone-success-base-caret:var(--ds__palette__success-main);--input-contained-tone-success-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-tone-info-base-caret:var(--ds__palette__info-main);--input-contained-tone-info-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-tone-warning-base-caret:var(--ds__palette__warning-main);--input-contained-tone-warning-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-tone-error-base-caret:var(--ds__palette__error-main);--input-contained-tone-error-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-tone-dark-base-caret:var(--ds__palette__dark-main);--input-contained-tone-dark-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-tone-neutral-base-caret:var(--ds__palette__neutral-main);--input-contained-tone-neutral-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-tone-light-base-caret:var(--ds__palette__light-main);--input-contained-tone-light-base-placeholder:var(--ds__palette__neutral-dark);--input-contained-focus-border:1px solid var(--input-tone-main,var(--ds__palette__primary-main));--input-contained-focus-shadow:var(--shadow-2);--input-contained-tone-primary-focus-border:1px solid var(--ds__palette__primary-main);--input-contained-tone-primary-focus-shadow:var(--shadow-2);--input-contained-tone-secondary-focus-border:1px solid var(--ds__palette__secondary-main);--input-contained-tone-secondary-focus-shadow:var(--shadow-2);--input-contained-tone-surface-focus-border:1px solid var(--ds__palette__surface-main);--input-contained-tone-surface-focus-shadow:var(--shadow-2);--input-contained-tone-tertiary-focus-border:1px solid var(--ds__palette__tertiary-main);--input-contained-tone-tertiary-focus-shadow:var(--shadow-2);--input-contained-tone-success-focus-border:1px solid var(--ds__palette__success-main);--input-contained-tone-success-focus-shadow:var(--shadow-2);--input-contained-tone-info-focus-border:1px solid var(--ds__palette__info-main);--input-contained-tone-info-focus-shadow:var(--shadow-2);--input-contained-tone-warning-focus-border:1px solid var(--ds__palette__warning-main);--input-contained-tone-warning-focus-shadow:var(--shadow-2);--input-contained-tone-error-focus-border:1px solid var(--ds__palette__error-main);--input-contained-tone-error-focus-shadow:var(--shadow-2);--input-contained-tone-dark-focus-border:1px solid var(--ds__palette__dark-main);--input-contained-tone-dark-focus-shadow:var(--shadow-2);--input-contained-tone-neutral-focus-border:1px solid var(--ds__palette__neutral-main);--input-contained-tone-neutral-focus-shadow:var(--shadow-2);--input-contained-tone-light-focus-border:1px solid var(--ds__palette__light-main);--input-contained-tone-light-focus-shadow:var(--shadow-2);--input-contained-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-tone-primary-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-tone-secondary-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-tone-surface-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-tone-tertiary-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-tone-success-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-tone-info-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-tone-warning-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-tone-error-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-tone-dark-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-tone-neutral-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-tone-light-invalid-border:1px solid var(--ds__palette__error-main);--input-contained-disabled-color:var(--ds__palette__neutral-dark);--input-contained-disabled-opacity:0.6;--input-contained-tone-primary-disabled-color:var(--ds__palette__neutral-dark);--input-contained-tone-primary-disabled-opacity:0.6;--input-contained-tone-secondary-disabled-color:var(--ds__palette__neutral-dark);--input-contained-tone-secondary-disabled-opacity:0.6;--input-contained-tone-surface-disabled-color:var(--ds__palette__neutral-dark);--input-contained-tone-surface-disabled-opacity:0.6;--input-contained-tone-tertiary-disabled-color:var(--ds__palette__neutral-dark);--input-contained-tone-tertiary-disabled-opacity:0.6;--input-contained-tone-success-disabled-color:var(--ds__palette__neutral-dark);--input-contained-tone-success-disabled-opacity:0.6;--input-contained-tone-info-disabled-color:var(--ds__palette__neutral-dark);--input-contained-tone-info-disabled-opacity:0.6;--input-contained-tone-warning-disabled-color:var(--ds__palette__neutral-dark);--input-contained-tone-warning-disabled-opacity:0.6;--input-contained-tone-error-disabled-color:var(--ds__palette__neutral-dark);--input-contained-tone-error-disabled-opacity:0.6;--input-contained-tone-dark-disabled-color:var(--ds__palette__neutral-dark);--input-contained-tone-dark-disabled-opacity:0.6;--input-contained-tone-neutral-disabled-color:var(--ds__palette__neutral-dark);--input-contained-tone-neutral-disabled-opacity:0.6;--input-contained-tone-light-disabled-color:var(--ds__palette__neutral-dark);--input-contained-tone-light-disabled-opacity:0.6;--input-outlined-base-caret:var(--input-tone-main,var(--ds__palette__primary-main));--input-outlined-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-tone-primary-base-caret:var(--ds__palette__primary-main);--input-outlined-tone-primary-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-tone-secondary-base-caret:var(--ds__palette__secondary-main);--input-outlined-tone-secondary-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-tone-surface-base-caret:var(--ds__palette__surface-main);--input-outlined-tone-surface-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-tone-tertiary-base-caret:var(--ds__palette__tertiary-main);--input-outlined-tone-tertiary-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-tone-success-base-caret:var(--ds__palette__success-main);--input-outlined-tone-success-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-tone-info-base-caret:var(--ds__palette__info-main);--input-outlined-tone-info-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-tone-warning-base-caret:var(--ds__palette__warning-main);--input-outlined-tone-warning-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-tone-error-base-caret:var(--ds__palette__error-main);--input-outlined-tone-error-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-tone-dark-base-caret:var(--ds__palette__dark-main);--input-outlined-tone-dark-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-tone-neutral-base-caret:var(--ds__palette__neutral-main);--input-outlined-tone-neutral-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-tone-light-base-caret:var(--ds__palette__light-main);--input-outlined-tone-light-base-placeholder:var(--ds__palette__neutral-dark);--input-outlined-focus-border:1px solid var(--input-tone-main,var(--ds__palette__primary-main));--input-outlined-tone-primary-focus-border:1px solid var(--ds__palette__primary-main);--input-outlined-tone-secondary-focus-border:1px solid var(--ds__palette__secondary-main);--input-outlined-tone-surface-focus-border:1px solid var(--ds__palette__surface-main);--input-outlined-tone-tertiary-focus-border:1px solid var(--ds__palette__tertiary-main);--input-outlined-tone-success-focus-border:1px solid var(--ds__palette__success-main);--input-outlined-tone-info-focus-border:1px solid var(--ds__palette__info-main);--input-outlined-tone-warning-focus-border:1px solid var(--ds__palette__warning-main);--input-outlined-tone-error-focus-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-dark-focus-border:1px solid var(--ds__palette__dark-main);--input-outlined-tone-neutral-focus-border:1px solid var(--ds__palette__neutral-main);--input-outlined-tone-light-focus-border:1px solid var(--ds__palette__light-main);--input-outlined-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-primary-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-secondary-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-surface-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-tertiary-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-success-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-info-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-warning-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-error-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-dark-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-neutral-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-tone-light-invalid-border:1px solid var(--ds__palette__error-main);--input-outlined-disabled-opacity:0.6;--input-outlined-tone-primary-disabled-opacity:0.6;--input-outlined-tone-secondary-disabled-opacity:0.6;--input-outlined-tone-surface-disabled-opacity:0.6;--input-outlined-tone-tertiary-disabled-opacity:0.6;--input-outlined-tone-success-disabled-opacity:0.6;--input-outlined-tone-info-disabled-opacity:0.6;--input-outlined-tone-warning-disabled-opacity:0.6;--input-outlined-tone-error-disabled-opacity:0.6;--input-outlined-tone-dark-disabled-opacity:0.6;--input-outlined-tone-neutral-disabled-opacity:0.6;--input-outlined-tone-light-disabled-opacity:0.6;--input-underline-base-border:none;--input-underline-base-shadow:none;--input-underline-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-base-caret:var(--input-tone-main,var(--ds__palette__primary-main));--input-underline-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-tone-primary-base-border:none;--input-underline-tone-primary-base-shadow:none;--input-underline-tone-primary-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-tone-primary-base-caret:var(--ds__palette__primary-main);--input-underline-tone-primary-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-tone-secondary-base-border:none;--input-underline-tone-secondary-base-shadow:none;--input-underline-tone-secondary-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-tone-secondary-base-caret:var(--ds__palette__secondary-main);--input-underline-tone-secondary-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-tone-surface-base-border:none;--input-underline-tone-surface-base-shadow:none;--input-underline-tone-surface-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-tone-surface-base-caret:var(--ds__palette__surface-main);--input-underline-tone-surface-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-tone-tertiary-base-border:none;--input-underline-tone-tertiary-base-shadow:none;--input-underline-tone-tertiary-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-tone-tertiary-base-caret:var(--ds__palette__tertiary-main);--input-underline-tone-tertiary-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-tone-success-base-border:none;--input-underline-tone-success-base-shadow:none;--input-underline-tone-success-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-tone-success-base-caret:var(--ds__palette__success-main);--input-underline-tone-success-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-tone-info-base-border:none;--input-underline-tone-info-base-shadow:none;--input-underline-tone-info-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-tone-info-base-caret:var(--ds__palette__info-main);--input-underline-tone-info-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-tone-warning-base-border:none;--input-underline-tone-warning-base-shadow:none;--input-underline-tone-warning-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-tone-warning-base-caret:var(--ds__palette__warning-main);--input-underline-tone-warning-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-tone-error-base-border:none;--input-underline-tone-error-base-shadow:none;--input-underline-tone-error-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-tone-error-base-caret:var(--ds__palette__error-main);--input-underline-tone-error-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-tone-dark-base-border:none;--input-underline-tone-dark-base-shadow:none;--input-underline-tone-dark-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-tone-dark-base-caret:var(--ds__palette__dark-main);--input-underline-tone-dark-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-tone-neutral-base-border:none;--input-underline-tone-neutral-base-shadow:none;--input-underline-tone-neutral-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-tone-neutral-base-caret:var(--ds__palette__neutral-main);--input-underline-tone-neutral-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-tone-light-base-border:none;--input-underline-tone-light-base-shadow:none;--input-underline-tone-light-base-underline:1px solid var(--ds__palette__neutral-dark);--input-underline-tone-light-base-caret:var(--ds__palette__light-main);--input-underline-tone-light-base-placeholder:var(--ds__palette__neutral-dark);--input-underline-focus-underline:1px solid var(--input-tone-main,var(--ds__palette__primary-main));--input-underline-tone-primary-focus-underline:1px solid var(--ds__palette__primary-main);--input-underline-tone-secondary-focus-underline:1px solid var(--ds__palette__secondary-main);--input-underline-tone-surface-focus-underline:1px solid var(--ds__palette__surface-main);--input-underline-tone-tertiary-focus-underline:1px solid var(--ds__palette__tertiary-main);--input-underline-tone-success-focus-underline:1px solid var(--ds__palette__success-main);--input-underline-tone-info-focus-underline:1px solid var(--ds__palette__info-main);--input-underline-tone-warning-focus-underline:1px solid var(--ds__palette__warning-main);--input-underline-tone-error-focus-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-dark-focus-underline:1px solid var(--ds__palette__dark-main);--input-underline-tone-neutral-focus-underline:1px solid var(--ds__palette__neutral-main);--input-underline-tone-light-focus-underline:1px solid var(--ds__palette__light-main);--input-underline-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-primary-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-secondary-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-surface-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-tertiary-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-success-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-info-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-warning-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-error-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-dark-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-neutral-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-tone-light-invalid-underline:1px solid var(--ds__palette__error-main);--input-underline-disabled-opacity:0.6;--input-underline-tone-primary-disabled-opacity:0.6;--input-underline-tone-secondary-disabled-opacity:0.6;--input-underline-tone-surface-disabled-opacity:0.6;--input-underline-tone-tertiary-disabled-opacity:0.6;--input-underline-tone-success-disabled-opacity:0.6;--input-underline-tone-info-disabled-opacity:0.6;--input-underline-tone-warning-disabled-opacity:0.6;--input-underline-tone-error-disabled-opacity:0.6;--input-underline-tone-dark-disabled-opacity:0.6;--input-underline-tone-neutral-disabled-opacity:0.6;--input-underline-tone-light-disabled-opacity:0.6}#uxdsl-bp-meta{--bp:'{"xs":0,"sm":480,"md":768,"lg":1024,"xl":1280}';display:none}