:root{--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:#f3e5f5;--ds__color__purple-100:#e1bee7;--ds__color__purple-200:#ce93d8;--ds__color__purple-300:#ba68c8;--ds__color__purple-400:#ab47bc;--ds__color__purple-500:#9c27b0;--ds__color__purple-600:#8e24aa;--ds__color__purple-700:#7b1fa2;--ds__color__purple-800:#6a1b9a;--ds__color__purple-900:#4a148c;--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-300:#cbd5e1;--ds__color__gray-400:#94a3b8;--ds__color__gray-500:#64748b;--ds__color__gray-600:#475569;--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__slate-800);--ds__palette__primary-light:var(--ds__color__slate-600);--ds__palette__primary-dark:var(--ds__color__slate-900);--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__gray-600);--ds__palette__secondary-light:var(--ds__color__gray-400);--ds__palette__secondary-dark:var(--ds__color__gray-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{--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;--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-size:32px;--h1-weight:700;--h1-line:1.1;--h1-spacing:-0.02em;--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-size:28px;--h2-weight:700;--h2-line:1.2;--h2-spacing:-0.01em;--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-size:24px;--h3-weight:600;--h3-line:1.3;--h3-spacing:normal;--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-size:20px;--h4-weight:600;--h4-line:1.4;--h4-spacing:normal;--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-size:18px;--h5-weight:600;--h5-line:1.4;--h5-spacing:normal;--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-size:16px;--h6-weight:600;--h6-line:1.4;--h6-spacing:normal;--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-size:15px;--p-weight:400;--p-line:1.6;--p-spacing:normal;--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-size:13px;--span-weight:400;--span-line:1.5;--span-spacing:normal;--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-size:14px;--body-weight:400;--body-line:1.6;--body-spacing:normal;--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-size:12px;--caption-opacity:0.8;--caption-line:1.4;--caption-spacing:0.01em;--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-size:11px;--small-line:1.4;--small-spacing:0.01em;--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-size:13px;--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:480px){:root{--h1-size:36px;--h2-size:30px;--h3-size:26px;--h4-size:22px;--h5-size:19px;--h6-size:17px}}@media (min-width:768px){:root{--h1-size:44px;--h1-line:1.1;--h2-size:36px;--h2-line:1.15;--h3-size:30px;--h3-line:1.25;--h4-size:24px;--h5-size:20px;--h6-size:18px;--p-size:16px;--span-size:14px;--body-size:16px;--caption-size:13px;--small-size:12px;--pre-size:14px}}@media (min-width:1024px){:root{--h1-size:52px;--h2-size:44px;--h3-size:34px;--h4-size:28px;--h5-size:22px;--h6-size:20px}}@media (min-width:1280px){:root{--h1-size:60px;--h2-size:52px;--h3-size:38px;--h4-size:32px;--h5-size:24px;--h6-size:22px}}.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-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)}.ds-typo[data-typo=h2]{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)}.ds-typo[data-typo=h3]{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)}.ds-typo[data-typo=h4]{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)}.ds-typo[data-typo=h5]{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)}.ds-typo[data-typo=h6]{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)}.ds-typo[data-typo=p]{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)}.ds-typo[data-typo=span]{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)}.ds-typo[data-typo=small]{font-size:var(--small-size);opacity:var(--caption-opacity,.8);font-family:var(--small-font-family,var(--font-ui-2,var(--font-ui)));line-height:var(--small-line);letter-spacing:var(--small-spacing)}.ds-typo[data-typo=caption]{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)}.ds-typo[data-typo=code],.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)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--ds__palette__neutral-light);border-radius:radius(round);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:radius(round);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:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.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:radius(round);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:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.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(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:none;&:disabled{color:var(--ds__palette__action-disabled);border-color:var(--ds__palette__action-disabled)}}@media (min-width:1024px){.ai-submit-btn{border-radius:var(--space-3)}}.ai-submit-btn.is-selected,.ai-submit-btn:hover,.ai-submit-btn[aria-pressed=true],.ai-submit-btn[aria-selected=true]{color:var(--ds__palette__primary-dark)}@ds-surface ai-response{margin-top:var(--space-4);padding:var(--space-4);border-radius:radius(lg);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:radius(md);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:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12);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(--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(--space-4)}}#AppHeader .app-header__inner{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__light-main);color:var(--ds__palette__light-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);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)}}@media (min-width:1024px){#AppHeader .app-header__inner{border-radius:var(--space-3)}}#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)}#ButtonDemo{.btn{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);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}@media (min-width:1024px){.btn{border-radius:var(--space-3)}}.btn.is-selected,.btn:hover,.btn[aria-pressed=true],.btn[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.btn:hover{transform:translateY(-1px)}.btn--outlined{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main)}@media (min-width:1024px){.btn--outlined{border-radius:var(--space-3)}}.btn--outlined.is-selected,.btn--outlined[aria-pressed=true],.btn--outlined[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.btn--outlined:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.btn--flat{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:none}@media (min-width:1024px){.btn--flat{border-radius:var(--space-3)}}.btn--flat.is-selected,.btn--flat:hover,.btn--flat[aria-pressed=true],.btn--flat[aria-selected=true]{color:var(--ds__palette__primary-dark)}.btn--secondary{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.btn--secondary{border-radius:var(--space-3)}}.btn--secondary.is-selected,.btn--secondary:hover,.btn--secondary[aria-pressed=true],.btn--secondary[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.btn--outlined.btn--secondary{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main)}@media (min-width:1024px){.btn--outlined.btn--secondary{border-radius:var(--space-3)}}.btn--outlined.btn--secondary.is-selected,.btn--outlined.btn--secondary[aria-pressed=true],.btn--outlined.btn--secondary[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.btn--outlined.btn--secondary:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.btn--flat.btn--secondary{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__secondary-main);border:none}@media (min-width:1024px){.btn--flat.btn--secondary{border-radius:var(--space-3)}}.btn--flat.btn--secondary.is-selected,.btn--flat.btn--secondary:hover,.btn--flat.btn--secondary[aria-pressed=true],.btn--flat.btn--secondary[aria-selected=true]{color:var(--ds__palette__primary-dark)}.btn--sm{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.btn--sm{border-radius:var(--space-2)}}.btn--sm.is-selected,.btn--sm:hover,.btn--sm[aria-pressed=true],.btn--sm[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.btn--md{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.btn--md{border-radius:var(--space-3)}}.btn--md.is-selected,.btn--md:hover,.btn--md[aria-pressed=true],.btn--md[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.btn--lg{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.btn--lg{border-radius:var(--space-4)}}.btn--lg.is-selected,.btn--lg:hover,.btn--lg[aria-pressed=true],.btn--lg[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}}#CardDemo{.card{background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);padding:var(--space-4);border-radius:var(--space-2);transition:all .3s ease}@media (min-width:1024px){.card{border-radius:var(--space-3)}}.card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.14)}.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{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);background:var(--ds__palette__surface-main);border:1px solid var(--ds__color__gray-300);border-radius:var(--space-2)}@media (min-width:1024px){.card{border-radius:var(--space-3)}}.preview-box{width:100%;height:100px;background:var(--ds__palette__surface-main);display:flex;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(--space-3);border:1px solid var(--ds__color__gray-300)}@media (min-width:1024px){.playground{border-radius:var(--space-4)}}@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{padding:var(--space-2)}.preview-area{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;padding:var(--density-2)}.live-preview{flex:1;display:flex;align-items:center;justify-content:center;border-radius:var(--space-2);border:1px solid var(--ds__color__gray-300);min-height:300px;padding:var(--space-8)}@media (min-width:1024px){.live-preview{border-radius:var(--space-3)}}.demo-element{width:200px;height:200px;max-width:100%;background:var(--ds__palette__surface-main);display:flex;align-items:center;justify-content:center;color:var(--ds__palette__text-main);font:font(h5);transition:all .2s ease}box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main);.demo-code-block{border-radius:var(--space-2);overflow:hidden;font-size:14px;border:1px solid var(--ds__color__gray-300)}@media (min-width:1024px){.demo-code-block{border-radius:var(--space-3)}}}@media (min-width:1024px){#DemoBorders{border-radius:var(--space-3)}}#DemoBorders[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}#DemoBorders:invalid{border:1px solid var(--ds__color__gray-300)}#DemoBorders:focus{border:1px solid var(--ds__color__gray-300)}#DemoBorders::placeholder{color:var(--ds__color__neutral-dark)}#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(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-4);border-radius:var(--space-3);display:flex;flex-direction:column;gap:var(--density-6);background:var(--ds__palette__surface-light)}@media (min-width:1024px){.breakpoints-playground-container{border-radius:var(--space-3);border-radius:var(--space-4)}}.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(--space-2);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.breakpoints-bar{border-radius:var(--space-3)}}.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(--space-2);border:1px solid var(--ds__palette__neutral-light);transition:border-color .2s}@media (min-width:1024px){.breakpoints-control-row{border-radius:var(--space-3)}}.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(--space-1);font-family:font(code);text-align:right;font-size:.9rem;color:var(--ds__palette__text-main);background:transparent}@media (min-width:1024px){.breakpoints-input-val{border-radius:var(--space-2)}}.breakpoints-unit{font-size:.8rem;color:var(--ds__palette__text-secondary)}.breakpoints-info-panel{display:flex;flex-direction:column;gap:var(--density-3);padding:var(--density-4);background:var(--ds__palette__surface-main);border-radius:var(--space-2);border:1px solid var(--ds__palette__neutral-light);height:100%}@media (min-width:1024px){.breakpoints-info-panel{border-radius:var(--space-3)}}.breakpoints-info-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--density-3);border-radius:var(--space-2);background:var(--ds__palette__surface-light);border:1px solid var(--ds__palette__neutral-light);text-align:center}@media (min-width:1024px){.breakpoints-info-card{border-radius:var(--space-3)}}.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(--density-2);border-radius:var(--space-2);background:var(--ds__palette__light-main);color:var(--ds__palette__light-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);border:1px solid var(--ds__palette__surface-contrast);border-radius:var(--space-3);.demo-breakpoints-card-item{background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);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(--space-2);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.demo-breakpoints-card-item{border-radius:var(--space-3)}}.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)}}@media (min-width:1024px){#DemoBreakpointsCards{border-radius:var(--space-3);border-radius:var(--space-4)}}#DemoButtons{.buttons-section{display:flex;flex-direction:column;gap:var(--density-4)}.buttons-header,.buttons-playground-container{display:flex;flex-direction:column;gap:var(--density-2)}.buttons-playground{display:flex;flex-direction:column;gap:var(--density-3);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}@media (min-width:1024px){.buttons-playground{border-radius:var(--space-3)}}@media (min-width:768px){.buttons-playground{flex-direction:row;align-items:flex-start}}.buttons-playground__controls{display:flex;flex-direction:column;gap:var(--density-2);min-width:250px}.buttons-playground__controls label{display:flex;flex-direction:column;gap:var(--density-1);font-size:.9rem;font-weight:500}.buttons-playground__controls select{padding:var(--density-1)}.buttons-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(--space-2);padding:var(--density-4);min-height:300px}@media (min-width:1024px){.buttons-playground__preview{border-radius:var(--space-3)}}.buttons-playground__element{cursor:pointer;transition:all .2s ease;&:hover{filter:brightness(1.2) saturate(1.1);transform:translateY(-1px)}}.buttons-doc-container{display:flex;flex-direction:column;gap:var(--density-2)}.buttons-doc-card{border-radius:var(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}@media (min-width:1024px){.buttons-doc-card{border-radius:var(--space-3)}}.buttons-doc-intro{margin-bottom:var(--density-2);line-height:1.5}.buttons-doc-subtitle{font-weight:700;margin-bottom:var(--density-1);color:var(--ds__palette__primary-dark)}.buttons-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)}.buttons-doc-list li{font-size:.9rem}.buttons-playground__element--contained-primary-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:480px){.buttons-playground__element--contained-primary-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--contained-primary-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--contained-primary-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--contained-primary-0{border-radius:6px}}.buttons-playground__element--contained-primary-0.is-selected,.buttons-playground__element--contained-primary-0:hover,.buttons-playground__element--contained-primary-0[aria-pressed=true],.buttons-playground__element--contained-primary-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-primary-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-primary-1{border-radius:var(--space-2)}}.buttons-playground__element--contained-primary-1.is-selected,.buttons-playground__element--contained-primary-1:hover,.buttons-playground__element--contained-primary-1[aria-pressed=true],.buttons-playground__element--contained-primary-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-primary-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-primary-2{border-radius:var(--space-3)}}.buttons-playground__element--contained-primary-2.is-selected,.buttons-playground__element--contained-primary-2:hover,.buttons-playground__element--contained-primary-2[aria-pressed=true],.buttons-playground__element--contained-primary-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-primary-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-primary-3{border-radius:var(--space-4)}}.buttons-playground__element--contained-primary-3.is-selected,.buttons-playground__element--contained-primary-3:hover,.buttons-playground__element--contained-primary-3[aria-pressed=true],.buttons-playground__element--contained-primary-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-primary-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-primary-4{border-radius:var(--space-6)}}.buttons-playground__element--contained-primary-4.is-selected,.buttons-playground__element--contained-primary-4:hover,.buttons-playground__element--contained-primary-4[aria-pressed=true],.buttons-playground__element--contained-primary-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-primary-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-primary-5{border-radius:var(--space-8)}}.buttons-playground__element--contained-primary-5.is-selected,.buttons-playground__element--contained-primary-5:hover,.buttons-playground__element--contained-primary-5[aria-pressed=true],.buttons-playground__element--contained-primary-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-secondary-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:480px){.buttons-playground__element--contained-secondary-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--contained-secondary-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--contained-secondary-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--contained-secondary-0{border-radius:6px}}.buttons-playground__element--contained-secondary-0.is-selected,.buttons-playground__element--contained-secondary-0:hover,.buttons-playground__element--contained-secondary-0[aria-pressed=true],.buttons-playground__element--contained-secondary-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-secondary-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-secondary-1{border-radius:var(--space-2)}}.buttons-playground__element--contained-secondary-1.is-selected,.buttons-playground__element--contained-secondary-1:hover,.buttons-playground__element--contained-secondary-1[aria-pressed=true],.buttons-playground__element--contained-secondary-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-secondary-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-secondary-2{border-radius:var(--space-3)}}.buttons-playground__element--contained-secondary-2.is-selected,.buttons-playground__element--contained-secondary-2:hover,.buttons-playground__element--contained-secondary-2[aria-pressed=true],.buttons-playground__element--contained-secondary-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-secondary-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-secondary-3{border-radius:var(--space-4)}}.buttons-playground__element--contained-secondary-3.is-selected,.buttons-playground__element--contained-secondary-3:hover,.buttons-playground__element--contained-secondary-3[aria-pressed=true],.buttons-playground__element--contained-secondary-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-secondary-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-secondary-4{border-radius:var(--space-6)}}.buttons-playground__element--contained-secondary-4.is-selected,.buttons-playground__element--contained-secondary-4:hover,.buttons-playground__element--contained-secondary-4[aria-pressed=true],.buttons-playground__element--contained-secondary-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-secondary-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-secondary-5{border-radius:var(--space-8)}}.buttons-playground__element--contained-secondary-5.is-selected,.buttons-playground__element--contained-secondary-5:hover,.buttons-playground__element--contained-secondary-5[aria-pressed=true],.buttons-playground__element--contained-secondary-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-success-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:480px){.buttons-playground__element--contained-success-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--contained-success-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--contained-success-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--contained-success-0{border-radius:6px}}.buttons-playground__element--contained-success-0.is-selected,.buttons-playground__element--contained-success-0:hover,.buttons-playground__element--contained-success-0[aria-pressed=true],.buttons-playground__element--contained-success-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-success-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-success-1{border-radius:var(--space-2)}}.buttons-playground__element--contained-success-1.is-selected,.buttons-playground__element--contained-success-1:hover,.buttons-playground__element--contained-success-1[aria-pressed=true],.buttons-playground__element--contained-success-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-success-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-success-2{border-radius:var(--space-3)}}.buttons-playground__element--contained-success-2.is-selected,.buttons-playground__element--contained-success-2:hover,.buttons-playground__element--contained-success-2[aria-pressed=true],.buttons-playground__element--contained-success-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-success-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-success-3{border-radius:var(--space-4)}}.buttons-playground__element--contained-success-3.is-selected,.buttons-playground__element--contained-success-3:hover,.buttons-playground__element--contained-success-3[aria-pressed=true],.buttons-playground__element--contained-success-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-success-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-success-4{border-radius:var(--space-6)}}.buttons-playground__element--contained-success-4.is-selected,.buttons-playground__element--contained-success-4:hover,.buttons-playground__element--contained-success-4[aria-pressed=true],.buttons-playground__element--contained-success-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-success-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-success-5{border-radius:var(--space-8)}}.buttons-playground__element--contained-success-5.is-selected,.buttons-playground__element--contained-success-5:hover,.buttons-playground__element--contained-success-5[aria-pressed=true],.buttons-playground__element--contained-success-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-info-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:480px){.buttons-playground__element--contained-info-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--contained-info-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--contained-info-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--contained-info-0{border-radius:6px}}.buttons-playground__element--contained-info-0.is-selected,.buttons-playground__element--contained-info-0:hover,.buttons-playground__element--contained-info-0[aria-pressed=true],.buttons-playground__element--contained-info-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-info-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-info-1{border-radius:var(--space-2)}}.buttons-playground__element--contained-info-1.is-selected,.buttons-playground__element--contained-info-1:hover,.buttons-playground__element--contained-info-1[aria-pressed=true],.buttons-playground__element--contained-info-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-info-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-info-2{border-radius:var(--space-3)}}.buttons-playground__element--contained-info-2.is-selected,.buttons-playground__element--contained-info-2:hover,.buttons-playground__element--contained-info-2[aria-pressed=true],.buttons-playground__element--contained-info-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-info-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-info-3{border-radius:var(--space-4)}}.buttons-playground__element--contained-info-3.is-selected,.buttons-playground__element--contained-info-3:hover,.buttons-playground__element--contained-info-3[aria-pressed=true],.buttons-playground__element--contained-info-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-info-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-info-4{border-radius:var(--space-6)}}.buttons-playground__element--contained-info-4.is-selected,.buttons-playground__element--contained-info-4:hover,.buttons-playground__element--contained-info-4[aria-pressed=true],.buttons-playground__element--contained-info-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-info-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-info-5{border-radius:var(--space-8)}}.buttons-playground__element--contained-info-5.is-selected,.buttons-playground__element--contained-info-5:hover,.buttons-playground__element--contained-info-5[aria-pressed=true],.buttons-playground__element--contained-info-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-warning-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:480px){.buttons-playground__element--contained-warning-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--contained-warning-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--contained-warning-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--contained-warning-0{border-radius:6px}}.buttons-playground__element--contained-warning-0.is-selected,.buttons-playground__element--contained-warning-0:hover,.buttons-playground__element--contained-warning-0[aria-pressed=true],.buttons-playground__element--contained-warning-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-warning-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-warning-1{border-radius:var(--space-2)}}.buttons-playground__element--contained-warning-1.is-selected,.buttons-playground__element--contained-warning-1:hover,.buttons-playground__element--contained-warning-1[aria-pressed=true],.buttons-playground__element--contained-warning-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-warning-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-warning-2{border-radius:var(--space-3)}}.buttons-playground__element--contained-warning-2.is-selected,.buttons-playground__element--contained-warning-2:hover,.buttons-playground__element--contained-warning-2[aria-pressed=true],.buttons-playground__element--contained-warning-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-warning-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-warning-3{border-radius:var(--space-4)}}.buttons-playground__element--contained-warning-3.is-selected,.buttons-playground__element--contained-warning-3:hover,.buttons-playground__element--contained-warning-3[aria-pressed=true],.buttons-playground__element--contained-warning-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-warning-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-warning-4{border-radius:var(--space-6)}}.buttons-playground__element--contained-warning-4.is-selected,.buttons-playground__element--contained-warning-4:hover,.buttons-playground__element--contained-warning-4[aria-pressed=true],.buttons-playground__element--contained-warning-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-warning-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-warning-5{border-radius:var(--space-8)}}.buttons-playground__element--contained-warning-5.is-selected,.buttons-playground__element--contained-warning-5:hover,.buttons-playground__element--contained-warning-5[aria-pressed=true],.buttons-playground__element--contained-warning-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-error-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:480px){.buttons-playground__element--contained-error-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--contained-error-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--contained-error-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--contained-error-0{border-radius:6px}}.buttons-playground__element--contained-error-0.is-selected,.buttons-playground__element--contained-error-0:hover,.buttons-playground__element--contained-error-0[aria-pressed=true],.buttons-playground__element--contained-error-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-error-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-error-1{border-radius:var(--space-2)}}.buttons-playground__element--contained-error-1.is-selected,.buttons-playground__element--contained-error-1:hover,.buttons-playground__element--contained-error-1[aria-pressed=true],.buttons-playground__element--contained-error-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-error-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-error-2{border-radius:var(--space-3)}}.buttons-playground__element--contained-error-2.is-selected,.buttons-playground__element--contained-error-2:hover,.buttons-playground__element--contained-error-2[aria-pressed=true],.buttons-playground__element--contained-error-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-error-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-error-3{border-radius:var(--space-4)}}.buttons-playground__element--contained-error-3.is-selected,.buttons-playground__element--contained-error-3:hover,.buttons-playground__element--contained-error-3[aria-pressed=true],.buttons-playground__element--contained-error-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-error-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-error-4{border-radius:var(--space-6)}}.buttons-playground__element--contained-error-4.is-selected,.buttons-playground__element--contained-error-4:hover,.buttons-playground__element--contained-error-4[aria-pressed=true],.buttons-playground__element--contained-error-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-error-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-error-5{border-radius:var(--space-8)}}.buttons-playground__element--contained-error-5.is-selected,.buttons-playground__element--contained-error-5:hover,.buttons-playground__element--contained-error-5[aria-pressed=true],.buttons-playground__element--contained-error-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-neutral-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:480px){.buttons-playground__element--contained-neutral-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--contained-neutral-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--contained-neutral-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--contained-neutral-0{border-radius:6px}}.buttons-playground__element--contained-neutral-0.is-selected,.buttons-playground__element--contained-neutral-0:hover,.buttons-playground__element--contained-neutral-0[aria-pressed=true],.buttons-playground__element--contained-neutral-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-neutral-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-neutral-1{border-radius:var(--space-2)}}.buttons-playground__element--contained-neutral-1.is-selected,.buttons-playground__element--contained-neutral-1:hover,.buttons-playground__element--contained-neutral-1[aria-pressed=true],.buttons-playground__element--contained-neutral-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-neutral-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-neutral-2{border-radius:var(--space-3)}}.buttons-playground__element--contained-neutral-2.is-selected,.buttons-playground__element--contained-neutral-2:hover,.buttons-playground__element--contained-neutral-2[aria-pressed=true],.buttons-playground__element--contained-neutral-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-neutral-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-neutral-3{border-radius:var(--space-4)}}.buttons-playground__element--contained-neutral-3.is-selected,.buttons-playground__element--contained-neutral-3:hover,.buttons-playground__element--contained-neutral-3[aria-pressed=true],.buttons-playground__element--contained-neutral-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-neutral-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-neutral-4{border-radius:var(--space-6)}}.buttons-playground__element--contained-neutral-4.is-selected,.buttons-playground__element--contained-neutral-4:hover,.buttons-playground__element--contained-neutral-4[aria-pressed=true],.buttons-playground__element--contained-neutral-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-neutral-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-neutral-5{border-radius:var(--space-8)}}.buttons-playground__element--contained-neutral-5.is-selected,.buttons-playground__element--contained-neutral-5:hover,.buttons-playground__element--contained-neutral-5[aria-pressed=true],.buttons-playground__element--contained-neutral-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-none-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:480px){.buttons-playground__element--contained-none-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--contained-none-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--contained-none-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--contained-none-0{border-radius:6px}}.buttons-playground__element--contained-none-0.is-selected,.buttons-playground__element--contained-none-0:hover,.buttons-playground__element--contained-none-0[aria-pressed=true],.buttons-playground__element--contained-none-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-none-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-none-1{border-radius:var(--space-2)}}.buttons-playground__element--contained-none-1.is-selected,.buttons-playground__element--contained-none-1:hover,.buttons-playground__element--contained-none-1[aria-pressed=true],.buttons-playground__element--contained-none-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-none-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-none-2{border-radius:var(--space-3)}}.buttons-playground__element--contained-none-2.is-selected,.buttons-playground__element--contained-none-2:hover,.buttons-playground__element--contained-none-2[aria-pressed=true],.buttons-playground__element--contained-none-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-none-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-none-3{border-radius:var(--space-4)}}.buttons-playground__element--contained-none-3.is-selected,.buttons-playground__element--contained-none-3:hover,.buttons-playground__element--contained-none-3[aria-pressed=true],.buttons-playground__element--contained-none-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-none-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-none-4{border-radius:var(--space-6)}}.buttons-playground__element--contained-none-4.is-selected,.buttons-playground__element--contained-none-4:hover,.buttons-playground__element--contained-none-4[aria-pressed=true],.buttons-playground__element--contained-none-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--contained-none-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.buttons-playground__element--contained-none-5{border-radius:var(--space-8)}}.buttons-playground__element--contained-none-5.is-selected,.buttons-playground__element--contained-none-5:hover,.buttons-playground__element--contained-none-5[aria-pressed=true],.buttons-playground__element--contained-none-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-primary-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main)}@media (min-width:480px){.buttons-playground__element--outlined-primary-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--outlined-primary-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--outlined-primary-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--outlined-primary-0{border-radius:6px}}.buttons-playground__element--outlined-primary-0.is-selected,.buttons-playground__element--outlined-primary-0[aria-pressed=true],.buttons-playground__element--outlined-primary-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-primary-0:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-primary-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main)}@media (min-width:1024px){.buttons-playground__element--outlined-primary-1{border-radius:var(--space-2)}}.buttons-playground__element--outlined-primary-1.is-selected,.buttons-playground__element--outlined-primary-1[aria-pressed=true],.buttons-playground__element--outlined-primary-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-primary-1:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-primary-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main)}@media (min-width:1024px){.buttons-playground__element--outlined-primary-2{border-radius:var(--space-3)}}.buttons-playground__element--outlined-primary-2.is-selected,.buttons-playground__element--outlined-primary-2[aria-pressed=true],.buttons-playground__element--outlined-primary-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-primary-2:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-primary-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main)}@media (min-width:1024px){.buttons-playground__element--outlined-primary-3{border-radius:var(--space-4)}}.buttons-playground__element--outlined-primary-3.is-selected,.buttons-playground__element--outlined-primary-3[aria-pressed=true],.buttons-playground__element--outlined-primary-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-primary-3:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-primary-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main)}@media (min-width:1024px){.buttons-playground__element--outlined-primary-4{border-radius:var(--space-6)}}.buttons-playground__element--outlined-primary-4.is-selected,.buttons-playground__element--outlined-primary-4[aria-pressed=true],.buttons-playground__element--outlined-primary-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-primary-4:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-primary-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main)}@media (min-width:1024px){.buttons-playground__element--outlined-primary-5{border-radius:var(--space-8)}}.buttons-playground__element--outlined-primary-5.is-selected,.buttons-playground__element--outlined-primary-5[aria-pressed=true],.buttons-playground__element--outlined-primary-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-primary-5:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-secondary-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main)}@media (min-width:480px){.buttons-playground__element--outlined-secondary-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--outlined-secondary-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--outlined-secondary-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--outlined-secondary-0{border-radius:6px}}.buttons-playground__element--outlined-secondary-0.is-selected,.buttons-playground__element--outlined-secondary-0[aria-pressed=true],.buttons-playground__element--outlined-secondary-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-secondary-0:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-secondary-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main)}@media (min-width:1024px){.buttons-playground__element--outlined-secondary-1{border-radius:var(--space-2)}}.buttons-playground__element--outlined-secondary-1.is-selected,.buttons-playground__element--outlined-secondary-1[aria-pressed=true],.buttons-playground__element--outlined-secondary-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-secondary-1:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-secondary-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main)}@media (min-width:1024px){.buttons-playground__element--outlined-secondary-2{border-radius:var(--space-3)}}.buttons-playground__element--outlined-secondary-2.is-selected,.buttons-playground__element--outlined-secondary-2[aria-pressed=true],.buttons-playground__element--outlined-secondary-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-secondary-2:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-secondary-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main)}@media (min-width:1024px){.buttons-playground__element--outlined-secondary-3{border-radius:var(--space-4)}}.buttons-playground__element--outlined-secondary-3.is-selected,.buttons-playground__element--outlined-secondary-3[aria-pressed=true],.buttons-playground__element--outlined-secondary-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-secondary-3:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-secondary-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main)}@media (min-width:1024px){.buttons-playground__element--outlined-secondary-4{border-radius:var(--space-6)}}.buttons-playground__element--outlined-secondary-4.is-selected,.buttons-playground__element--outlined-secondary-4[aria-pressed=true],.buttons-playground__element--outlined-secondary-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-secondary-4:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-secondary-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main)}@media (min-width:1024px){.buttons-playground__element--outlined-secondary-5{border-radius:var(--space-8)}}.buttons-playground__element--outlined-secondary-5.is-selected,.buttons-playground__element--outlined-secondary-5[aria-pressed=true],.buttons-playground__element--outlined-secondary-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-secondary-5:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-success-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main)}@media (min-width:480px){.buttons-playground__element--outlined-success-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--outlined-success-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--outlined-success-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--outlined-success-0{border-radius:6px}}.buttons-playground__element--outlined-success-0.is-selected,.buttons-playground__element--outlined-success-0[aria-pressed=true],.buttons-playground__element--outlined-success-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-success-0:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-success-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main)}@media (min-width:1024px){.buttons-playground__element--outlined-success-1{border-radius:var(--space-2)}}.buttons-playground__element--outlined-success-1.is-selected,.buttons-playground__element--outlined-success-1[aria-pressed=true],.buttons-playground__element--outlined-success-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-success-1:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-success-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main)}@media (min-width:1024px){.buttons-playground__element--outlined-success-2{border-radius:var(--space-3)}}.buttons-playground__element--outlined-success-2.is-selected,.buttons-playground__element--outlined-success-2[aria-pressed=true],.buttons-playground__element--outlined-success-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-success-2:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-success-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main)}@media (min-width:1024px){.buttons-playground__element--outlined-success-3{border-radius:var(--space-4)}}.buttons-playground__element--outlined-success-3.is-selected,.buttons-playground__element--outlined-success-3[aria-pressed=true],.buttons-playground__element--outlined-success-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-success-3:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-success-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main)}@media (min-width:1024px){.buttons-playground__element--outlined-success-4{border-radius:var(--space-6)}}.buttons-playground__element--outlined-success-4.is-selected,.buttons-playground__element--outlined-success-4[aria-pressed=true],.buttons-playground__element--outlined-success-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-success-4:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-success-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main)}@media (min-width:1024px){.buttons-playground__element--outlined-success-5{border-radius:var(--space-8)}}.buttons-playground__element--outlined-success-5.is-selected,.buttons-playground__element--outlined-success-5[aria-pressed=true],.buttons-playground__element--outlined-success-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-success-5:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-info-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main)}@media (min-width:480px){.buttons-playground__element--outlined-info-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--outlined-info-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--outlined-info-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--outlined-info-0{border-radius:6px}}.buttons-playground__element--outlined-info-0.is-selected,.buttons-playground__element--outlined-info-0[aria-pressed=true],.buttons-playground__element--outlined-info-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-info-0:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-info-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main)}@media (min-width:1024px){.buttons-playground__element--outlined-info-1{border-radius:var(--space-2)}}.buttons-playground__element--outlined-info-1.is-selected,.buttons-playground__element--outlined-info-1[aria-pressed=true],.buttons-playground__element--outlined-info-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-info-1:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-info-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main)}@media (min-width:1024px){.buttons-playground__element--outlined-info-2{border-radius:var(--space-3)}}.buttons-playground__element--outlined-info-2.is-selected,.buttons-playground__element--outlined-info-2[aria-pressed=true],.buttons-playground__element--outlined-info-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-info-2:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-info-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main)}@media (min-width:1024px){.buttons-playground__element--outlined-info-3{border-radius:var(--space-4)}}.buttons-playground__element--outlined-info-3.is-selected,.buttons-playground__element--outlined-info-3[aria-pressed=true],.buttons-playground__element--outlined-info-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-info-3:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-info-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main)}@media (min-width:1024px){.buttons-playground__element--outlined-info-4{border-radius:var(--space-6)}}.buttons-playground__element--outlined-info-4.is-selected,.buttons-playground__element--outlined-info-4[aria-pressed=true],.buttons-playground__element--outlined-info-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-info-4:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-info-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main)}@media (min-width:1024px){.buttons-playground__element--outlined-info-5{border-radius:var(--space-8)}}.buttons-playground__element--outlined-info-5.is-selected,.buttons-playground__element--outlined-info-5[aria-pressed=true],.buttons-playground__element--outlined-info-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-info-5:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-warning-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main)}@media (min-width:480px){.buttons-playground__element--outlined-warning-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--outlined-warning-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--outlined-warning-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--outlined-warning-0{border-radius:6px}}.buttons-playground__element--outlined-warning-0.is-selected,.buttons-playground__element--outlined-warning-0[aria-pressed=true],.buttons-playground__element--outlined-warning-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-warning-0:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-warning-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main)}@media (min-width:1024px){.buttons-playground__element--outlined-warning-1{border-radius:var(--space-2)}}.buttons-playground__element--outlined-warning-1.is-selected,.buttons-playground__element--outlined-warning-1[aria-pressed=true],.buttons-playground__element--outlined-warning-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-warning-1:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-warning-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main)}@media (min-width:1024px){.buttons-playground__element--outlined-warning-2{border-radius:var(--space-3)}}.buttons-playground__element--outlined-warning-2.is-selected,.buttons-playground__element--outlined-warning-2[aria-pressed=true],.buttons-playground__element--outlined-warning-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-warning-2:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-warning-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main)}@media (min-width:1024px){.buttons-playground__element--outlined-warning-3{border-radius:var(--space-4)}}.buttons-playground__element--outlined-warning-3.is-selected,.buttons-playground__element--outlined-warning-3[aria-pressed=true],.buttons-playground__element--outlined-warning-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-warning-3:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-warning-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main)}@media (min-width:1024px){.buttons-playground__element--outlined-warning-4{border-radius:var(--space-6)}}.buttons-playground__element--outlined-warning-4.is-selected,.buttons-playground__element--outlined-warning-4[aria-pressed=true],.buttons-playground__element--outlined-warning-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-warning-4:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-warning-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main)}@media (min-width:1024px){.buttons-playground__element--outlined-warning-5{border-radius:var(--space-8)}}.buttons-playground__element--outlined-warning-5.is-selected,.buttons-playground__element--outlined-warning-5[aria-pressed=true],.buttons-playground__element--outlined-warning-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-warning-5:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-error-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main)}@media (min-width:480px){.buttons-playground__element--outlined-error-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--outlined-error-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--outlined-error-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--outlined-error-0{border-radius:6px}}.buttons-playground__element--outlined-error-0.is-selected,.buttons-playground__element--outlined-error-0[aria-pressed=true],.buttons-playground__element--outlined-error-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-error-0:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-error-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main)}@media (min-width:1024px){.buttons-playground__element--outlined-error-1{border-radius:var(--space-2)}}.buttons-playground__element--outlined-error-1.is-selected,.buttons-playground__element--outlined-error-1[aria-pressed=true],.buttons-playground__element--outlined-error-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-error-1:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-error-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main)}@media (min-width:1024px){.buttons-playground__element--outlined-error-2{border-radius:var(--space-3)}}.buttons-playground__element--outlined-error-2.is-selected,.buttons-playground__element--outlined-error-2[aria-pressed=true],.buttons-playground__element--outlined-error-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-error-2:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-error-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main)}@media (min-width:1024px){.buttons-playground__element--outlined-error-3{border-radius:var(--space-4)}}.buttons-playground__element--outlined-error-3.is-selected,.buttons-playground__element--outlined-error-3[aria-pressed=true],.buttons-playground__element--outlined-error-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-error-3:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-error-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main)}@media (min-width:1024px){.buttons-playground__element--outlined-error-4{border-radius:var(--space-6)}}.buttons-playground__element--outlined-error-4.is-selected,.buttons-playground__element--outlined-error-4[aria-pressed=true],.buttons-playground__element--outlined-error-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-error-4:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-error-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main)}@media (min-width:1024px){.buttons-playground__element--outlined-error-5{border-radius:var(--space-8)}}.buttons-playground__element--outlined-error-5.is-selected,.buttons-playground__element--outlined-error-5[aria-pressed=true],.buttons-playground__element--outlined-error-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-error-5:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-neutral-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main)}@media (min-width:480px){.buttons-playground__element--outlined-neutral-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--outlined-neutral-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--outlined-neutral-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--outlined-neutral-0{border-radius:6px}}.buttons-playground__element--outlined-neutral-0.is-selected,.buttons-playground__element--outlined-neutral-0[aria-pressed=true],.buttons-playground__element--outlined-neutral-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-neutral-0:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-neutral-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main)}@media (min-width:1024px){.buttons-playground__element--outlined-neutral-1{border-radius:var(--space-2)}}.buttons-playground__element--outlined-neutral-1.is-selected,.buttons-playground__element--outlined-neutral-1[aria-pressed=true],.buttons-playground__element--outlined-neutral-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-neutral-1:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-neutral-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main)}@media (min-width:1024px){.buttons-playground__element--outlined-neutral-2{border-radius:var(--space-3)}}.buttons-playground__element--outlined-neutral-2.is-selected,.buttons-playground__element--outlined-neutral-2[aria-pressed=true],.buttons-playground__element--outlined-neutral-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-neutral-2:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-neutral-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main)}@media (min-width:1024px){.buttons-playground__element--outlined-neutral-3{border-radius:var(--space-4)}}.buttons-playground__element--outlined-neutral-3.is-selected,.buttons-playground__element--outlined-neutral-3[aria-pressed=true],.buttons-playground__element--outlined-neutral-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-neutral-3:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-neutral-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main)}@media (min-width:1024px){.buttons-playground__element--outlined-neutral-4{border-radius:var(--space-6)}}.buttons-playground__element--outlined-neutral-4.is-selected,.buttons-playground__element--outlined-neutral-4[aria-pressed=true],.buttons-playground__element--outlined-neutral-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-neutral-4:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-neutral-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main)}@media (min-width:1024px){.buttons-playground__element--outlined-neutral-5{border-radius:var(--space-8)}}.buttons-playground__element--outlined-neutral-5.is-selected,.buttons-playground__element--outlined-neutral-5[aria-pressed=true],.buttons-playground__element--outlined-neutral-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-neutral-5:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-none-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300)}@media (min-width:480px){.buttons-playground__element--outlined-none-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--outlined-none-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--outlined-none-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--outlined-none-0{border-radius:6px}}.buttons-playground__element--outlined-none-0.is-selected,.buttons-playground__element--outlined-none-0[aria-pressed=true],.buttons-playground__element--outlined-none-0[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-none-0:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-none-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300)}@media (min-width:1024px){.buttons-playground__element--outlined-none-1{border-radius:var(--space-2)}}.buttons-playground__element--outlined-none-1.is-selected,.buttons-playground__element--outlined-none-1[aria-pressed=true],.buttons-playground__element--outlined-none-1[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-none-1:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-none-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300)}@media (min-width:1024px){.buttons-playground__element--outlined-none-2{border-radius:var(--space-3)}}.buttons-playground__element--outlined-none-2.is-selected,.buttons-playground__element--outlined-none-2[aria-pressed=true],.buttons-playground__element--outlined-none-2[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-none-2:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-none-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300)}@media (min-width:1024px){.buttons-playground__element--outlined-none-3{border-radius:var(--space-4)}}.buttons-playground__element--outlined-none-3.is-selected,.buttons-playground__element--outlined-none-3[aria-pressed=true],.buttons-playground__element--outlined-none-3[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-none-3:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-none-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300)}@media (min-width:1024px){.buttons-playground__element--outlined-none-4{border-radius:var(--space-6)}}.buttons-playground__element--outlined-none-4.is-selected,.buttons-playground__element--outlined-none-4[aria-pressed=true],.buttons-playground__element--outlined-none-4[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-none-4:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--outlined-none-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300)}@media (min-width:1024px){.buttons-playground__element--outlined-none-5{border-radius:var(--space-8)}}.buttons-playground__element--outlined-none-5.is-selected,.buttons-playground__element--outlined-none-5[aria-pressed=true],.buttons-playground__element--outlined-none-5[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.buttons-playground__element--outlined-none-5:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-primary-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__primary-main);border:none}@media (min-width:480px){.buttons-playground__element--flat-primary-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--flat-primary-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--flat-primary-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--flat-primary-0{border-radius:6px}}.buttons-playground__element--flat-primary-0.is-selected,.buttons-playground__element--flat-primary-0:hover,.buttons-playground__element--flat-primary-0[aria-pressed=true],.buttons-playground__element--flat-primary-0[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-primary-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__primary-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-primary-1{border-radius:var(--space-2)}}.buttons-playground__element--flat-primary-1.is-selected,.buttons-playground__element--flat-primary-1:hover,.buttons-playground__element--flat-primary-1[aria-pressed=true],.buttons-playground__element--flat-primary-1[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-primary-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-primary-2{border-radius:var(--space-3)}}.buttons-playground__element--flat-primary-2.is-selected,.buttons-playground__element--flat-primary-2:hover,.buttons-playground__element--flat-primary-2[aria-pressed=true],.buttons-playground__element--flat-primary-2[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-primary-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__primary-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-primary-3{border-radius:var(--space-4)}}.buttons-playground__element--flat-primary-3.is-selected,.buttons-playground__element--flat-primary-3:hover,.buttons-playground__element--flat-primary-3[aria-pressed=true],.buttons-playground__element--flat-primary-3[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-primary-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__primary-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-primary-4{border-radius:var(--space-6)}}.buttons-playground__element--flat-primary-4.is-selected,.buttons-playground__element--flat-primary-4:hover,.buttons-playground__element--flat-primary-4[aria-pressed=true],.buttons-playground__element--flat-primary-4[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-primary-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__primary-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-primary-5{border-radius:var(--space-8)}}.buttons-playground__element--flat-primary-5.is-selected,.buttons-playground__element--flat-primary-5:hover,.buttons-playground__element--flat-primary-5[aria-pressed=true],.buttons-playground__element--flat-primary-5[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-secondary-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__secondary-main);border:none}@media (min-width:480px){.buttons-playground__element--flat-secondary-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--flat-secondary-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--flat-secondary-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--flat-secondary-0{border-radius:6px}}.buttons-playground__element--flat-secondary-0.is-selected,.buttons-playground__element--flat-secondary-0:hover,.buttons-playground__element--flat-secondary-0[aria-pressed=true],.buttons-playground__element--flat-secondary-0[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-secondary-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__secondary-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-secondary-1{border-radius:var(--space-2)}}.buttons-playground__element--flat-secondary-1.is-selected,.buttons-playground__element--flat-secondary-1:hover,.buttons-playground__element--flat-secondary-1[aria-pressed=true],.buttons-playground__element--flat-secondary-1[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-secondary-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__secondary-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-secondary-2{border-radius:var(--space-3)}}.buttons-playground__element--flat-secondary-2.is-selected,.buttons-playground__element--flat-secondary-2:hover,.buttons-playground__element--flat-secondary-2[aria-pressed=true],.buttons-playground__element--flat-secondary-2[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-secondary-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__secondary-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-secondary-3{border-radius:var(--space-4)}}.buttons-playground__element--flat-secondary-3.is-selected,.buttons-playground__element--flat-secondary-3:hover,.buttons-playground__element--flat-secondary-3[aria-pressed=true],.buttons-playground__element--flat-secondary-3[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-secondary-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__secondary-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-secondary-4{border-radius:var(--space-6)}}.buttons-playground__element--flat-secondary-4.is-selected,.buttons-playground__element--flat-secondary-4:hover,.buttons-playground__element--flat-secondary-4[aria-pressed=true],.buttons-playground__element--flat-secondary-4[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-secondary-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__secondary-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-secondary-5{border-radius:var(--space-8)}}.buttons-playground__element--flat-secondary-5.is-selected,.buttons-playground__element--flat-secondary-5:hover,.buttons-playground__element--flat-secondary-5[aria-pressed=true],.buttons-playground__element--flat-secondary-5[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-success-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__success-main);border:none}@media (min-width:480px){.buttons-playground__element--flat-success-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--flat-success-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--flat-success-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--flat-success-0{border-radius:6px}}.buttons-playground__element--flat-success-0.is-selected,.buttons-playground__element--flat-success-0:hover,.buttons-playground__element--flat-success-0[aria-pressed=true],.buttons-playground__element--flat-success-0[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-success-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__success-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-success-1{border-radius:var(--space-2)}}.buttons-playground__element--flat-success-1.is-selected,.buttons-playground__element--flat-success-1:hover,.buttons-playground__element--flat-success-1[aria-pressed=true],.buttons-playground__element--flat-success-1[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-success-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__success-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-success-2{border-radius:var(--space-3)}}.buttons-playground__element--flat-success-2.is-selected,.buttons-playground__element--flat-success-2:hover,.buttons-playground__element--flat-success-2[aria-pressed=true],.buttons-playground__element--flat-success-2[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-success-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__success-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-success-3{border-radius:var(--space-4)}}.buttons-playground__element--flat-success-3.is-selected,.buttons-playground__element--flat-success-3:hover,.buttons-playground__element--flat-success-3[aria-pressed=true],.buttons-playground__element--flat-success-3[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-success-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__success-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-success-4{border-radius:var(--space-6)}}.buttons-playground__element--flat-success-4.is-selected,.buttons-playground__element--flat-success-4:hover,.buttons-playground__element--flat-success-4[aria-pressed=true],.buttons-playground__element--flat-success-4[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-success-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__success-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-success-5{border-radius:var(--space-8)}}.buttons-playground__element--flat-success-5.is-selected,.buttons-playground__element--flat-success-5:hover,.buttons-playground__element--flat-success-5[aria-pressed=true],.buttons-playground__element--flat-success-5[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-info-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__info-main);border:none}@media (min-width:480px){.buttons-playground__element--flat-info-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--flat-info-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--flat-info-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--flat-info-0{border-radius:6px}}.buttons-playground__element--flat-info-0.is-selected,.buttons-playground__element--flat-info-0:hover,.buttons-playground__element--flat-info-0[aria-pressed=true],.buttons-playground__element--flat-info-0[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-info-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__info-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-info-1{border-radius:var(--space-2)}}.buttons-playground__element--flat-info-1.is-selected,.buttons-playground__element--flat-info-1:hover,.buttons-playground__element--flat-info-1[aria-pressed=true],.buttons-playground__element--flat-info-1[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-info-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__info-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-info-2{border-radius:var(--space-3)}}.buttons-playground__element--flat-info-2.is-selected,.buttons-playground__element--flat-info-2:hover,.buttons-playground__element--flat-info-2[aria-pressed=true],.buttons-playground__element--flat-info-2[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-info-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__info-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-info-3{border-radius:var(--space-4)}}.buttons-playground__element--flat-info-3.is-selected,.buttons-playground__element--flat-info-3:hover,.buttons-playground__element--flat-info-3[aria-pressed=true],.buttons-playground__element--flat-info-3[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-info-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__info-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-info-4{border-radius:var(--space-6)}}.buttons-playground__element--flat-info-4.is-selected,.buttons-playground__element--flat-info-4:hover,.buttons-playground__element--flat-info-4[aria-pressed=true],.buttons-playground__element--flat-info-4[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-info-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__info-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-info-5{border-radius:var(--space-8)}}.buttons-playground__element--flat-info-5.is-selected,.buttons-playground__element--flat-info-5:hover,.buttons-playground__element--flat-info-5[aria-pressed=true],.buttons-playground__element--flat-info-5[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-warning-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__warning-main);border:none}@media (min-width:480px){.buttons-playground__element--flat-warning-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--flat-warning-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--flat-warning-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--flat-warning-0{border-radius:6px}}.buttons-playground__element--flat-warning-0.is-selected,.buttons-playground__element--flat-warning-0:hover,.buttons-playground__element--flat-warning-0[aria-pressed=true],.buttons-playground__element--flat-warning-0[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-warning-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__warning-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-warning-1{border-radius:var(--space-2)}}.buttons-playground__element--flat-warning-1.is-selected,.buttons-playground__element--flat-warning-1:hover,.buttons-playground__element--flat-warning-1[aria-pressed=true],.buttons-playground__element--flat-warning-1[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-warning-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__warning-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-warning-2{border-radius:var(--space-3)}}.buttons-playground__element--flat-warning-2.is-selected,.buttons-playground__element--flat-warning-2:hover,.buttons-playground__element--flat-warning-2[aria-pressed=true],.buttons-playground__element--flat-warning-2[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-warning-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__warning-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-warning-3{border-radius:var(--space-4)}}.buttons-playground__element--flat-warning-3.is-selected,.buttons-playground__element--flat-warning-3:hover,.buttons-playground__element--flat-warning-3[aria-pressed=true],.buttons-playground__element--flat-warning-3[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-warning-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__warning-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-warning-4{border-radius:var(--space-6)}}.buttons-playground__element--flat-warning-4.is-selected,.buttons-playground__element--flat-warning-4:hover,.buttons-playground__element--flat-warning-4[aria-pressed=true],.buttons-playground__element--flat-warning-4[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-warning-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__warning-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-warning-5{border-radius:var(--space-8)}}.buttons-playground__element--flat-warning-5.is-selected,.buttons-playground__element--flat-warning-5:hover,.buttons-playground__element--flat-warning-5[aria-pressed=true],.buttons-playground__element--flat-warning-5[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-error-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__error-main);border:none}@media (min-width:480px){.buttons-playground__element--flat-error-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--flat-error-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--flat-error-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--flat-error-0{border-radius:6px}}.buttons-playground__element--flat-error-0.is-selected,.buttons-playground__element--flat-error-0:hover,.buttons-playground__element--flat-error-0[aria-pressed=true],.buttons-playground__element--flat-error-0[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-error-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__error-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-error-1{border-radius:var(--space-2)}}.buttons-playground__element--flat-error-1.is-selected,.buttons-playground__element--flat-error-1:hover,.buttons-playground__element--flat-error-1[aria-pressed=true],.buttons-playground__element--flat-error-1[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-error-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__error-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-error-2{border-radius:var(--space-3)}}.buttons-playground__element--flat-error-2.is-selected,.buttons-playground__element--flat-error-2:hover,.buttons-playground__element--flat-error-2[aria-pressed=true],.buttons-playground__element--flat-error-2[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-error-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__error-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-error-3{border-radius:var(--space-4)}}.buttons-playground__element--flat-error-3.is-selected,.buttons-playground__element--flat-error-3:hover,.buttons-playground__element--flat-error-3[aria-pressed=true],.buttons-playground__element--flat-error-3[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-error-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__error-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-error-4{border-radius:var(--space-6)}}.buttons-playground__element--flat-error-4.is-selected,.buttons-playground__element--flat-error-4:hover,.buttons-playground__element--flat-error-4[aria-pressed=true],.buttons-playground__element--flat-error-4[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-error-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__error-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-error-5{border-radius:var(--space-8)}}.buttons-playground__element--flat-error-5.is-selected,.buttons-playground__element--flat-error-5:hover,.buttons-playground__element--flat-error-5[aria-pressed=true],.buttons-playground__element--flat-error-5[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-neutral-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__neutral-main);border:none}@media (min-width:480px){.buttons-playground__element--flat-neutral-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--flat-neutral-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--flat-neutral-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--flat-neutral-0{border-radius:6px}}.buttons-playground__element--flat-neutral-0.is-selected,.buttons-playground__element--flat-neutral-0:hover,.buttons-playground__element--flat-neutral-0[aria-pressed=true],.buttons-playground__element--flat-neutral-0[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-neutral-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__neutral-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-neutral-1{border-radius:var(--space-2)}}.buttons-playground__element--flat-neutral-1.is-selected,.buttons-playground__element--flat-neutral-1:hover,.buttons-playground__element--flat-neutral-1[aria-pressed=true],.buttons-playground__element--flat-neutral-1[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-neutral-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-neutral-2{border-radius:var(--space-3)}}.buttons-playground__element--flat-neutral-2.is-selected,.buttons-playground__element--flat-neutral-2:hover,.buttons-playground__element--flat-neutral-2[aria-pressed=true],.buttons-playground__element--flat-neutral-2[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-neutral-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__neutral-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-neutral-3{border-radius:var(--space-4)}}.buttons-playground__element--flat-neutral-3.is-selected,.buttons-playground__element--flat-neutral-3:hover,.buttons-playground__element--flat-neutral-3[aria-pressed=true],.buttons-playground__element--flat-neutral-3[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-neutral-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__neutral-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-neutral-4{border-radius:var(--space-6)}}.buttons-playground__element--flat-neutral-4.is-selected,.buttons-playground__element--flat-neutral-4:hover,.buttons-playground__element--flat-neutral-4[aria-pressed=true],.buttons-playground__element--flat-neutral-4[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-neutral-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__neutral-main);border:none}@media (min-width:1024px){.buttons-playground__element--flat-neutral-5{border-radius:var(--space-8)}}.buttons-playground__element--flat-neutral-5.is-selected,.buttons-playground__element--flat-neutral-5:hover,.buttons-playground__element--flat-neutral-5[aria-pressed=true],.buttons-playground__element--flat-neutral-5[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-none-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__surface-contrast);border:none}@media (min-width:480px){.buttons-playground__element--flat-none-0{border-radius:4px}}@media (min-width:768px){.buttons-playground__element--flat-none-0{border-radius:6px}}@media (min-width:1024px){.buttons-playground__element--flat-none-0{border-radius:6px}}@media (min-width:1280px){.buttons-playground__element--flat-none-0{border-radius:6px}}.buttons-playground__element--flat-none-0.is-selected,.buttons-playground__element--flat-none-0:hover,.buttons-playground__element--flat-none-0[aria-pressed=true],.buttons-playground__element--flat-none-0[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-none-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__surface-contrast);border:none}@media (min-width:1024px){.buttons-playground__element--flat-none-1{border-radius:var(--space-2)}}.buttons-playground__element--flat-none-1.is-selected,.buttons-playground__element--flat-none-1:hover,.buttons-playground__element--flat-none-1[aria-pressed=true],.buttons-playground__element--flat-none-1[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-none-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:none}@media (min-width:1024px){.buttons-playground__element--flat-none-2{border-radius:var(--space-3)}}.buttons-playground__element--flat-none-2.is-selected,.buttons-playground__element--flat-none-2:hover,.buttons-playground__element--flat-none-2[aria-pressed=true],.buttons-playground__element--flat-none-2[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-none-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__surface-contrast);border:none}@media (min-width:1024px){.buttons-playground__element--flat-none-3{border-radius:var(--space-4)}}.buttons-playground__element--flat-none-3.is-selected,.buttons-playground__element--flat-none-3:hover,.buttons-playground__element--flat-none-3[aria-pressed=true],.buttons-playground__element--flat-none-3[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-none-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__surface-contrast);border:none}@media (min-width:1024px){.buttons-playground__element--flat-none-4{border-radius:var(--space-6)}}.buttons-playground__element--flat-none-4.is-selected,.buttons-playground__element--flat-none-4:hover,.buttons-playground__element--flat-none-4[aria-pressed=true],.buttons-playground__element--flat-none-4[aria-selected=true]{color:var(--ds__palette__primary-dark)}.buttons-playground__element--flat-none-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__surface-contrast);border:none}@media (min-width:1024px){.buttons-playground__element--flat-none-5{border-radius:var(--space-8)}}.buttons-playground__element--flat-none-5.is-selected,.buttons-playground__element--flat-none-5:hover,.buttons-playground__element--flat-none-5[aria-pressed=true],.buttons-playground__element--flat-none-5[aria-selected=true]{color:var(--ds__palette__primary-dark)}.demo-radius-0{border-radius:0!important}.demo-radius-1{border-radius:var(--space-1)!important}@media (min-width:1024px){.demo-radius-1{border-radius:var(--space-2)}}.demo-radius-2{border-radius:var(--space-2)!important}@media (min-width:1024px){.demo-radius-2{border-radius:var(--space-3)}}.demo-radius-3{border-radius:var(--space-3)!important}@media (min-width:1024px){.demo-radius-3{border-radius:var(--space-4)}}.demo-radius-4{border-radius:var(--space-4)!important}@media (min-width:1024px){.demo-radius-4{border-radius:var(--space-6)}}.demo-radius-5{border-radius:var(--space-6)!important}@media (min-width:1024px){.demo-radius-5{border-radius:var(--space-8)}}.demo-shadow-0{box-shadow:none!important}.demo-shadow-1{box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)!important}.demo-shadow-2{box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)!important}.demo-shadow-3{box-shadow:0 2px 4px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.14)!important}.demo-shadow-4{box-shadow:0 4px 6px rgba(0,0,0,.08),0 10px 15px rgba(0,0,0,.16)!important}.demo-shadow-5{box-shadow:0 10px 15px rgba(0,0,0,.1),0 20px 25px rgba(0,0,0,.2)!important}.force-hover{filter:brightness(1.2) saturate(1.1);transform:translateY(-1px);cursor:pointer}.force-active{transform:scale(.98);filter:brightness(.95)}.force-selected{box-shadow:inset 0 0 0 2px currentColor!important;font-weight:700}.buttons-grid-container{display:flex;flex-direction:column;gap:var(--density-2)}.buttons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--density-3)}.button-card{border-radius:var(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-3);display:flex;flex-direction:column;gap:var(--density-2);align-items:center}@media (min-width:1024px){.button-card{border-radius:var(--space-3)}}.button-card__label{font-size:.8rem;opacity:.7;font-family:monospace}.btn-example-primary-contained{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.btn-example-primary-contained{border-radius:var(--space-3)}}.btn-example-primary-contained.is-selected,.btn-example-primary-contained:hover,.btn-example-primary-contained[aria-pressed=true],.btn-example-primary-contained[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.btn-example-primary-outlined{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main)}@media (min-width:1024px){.btn-example-primary-outlined{border-radius:var(--space-3)}}.btn-example-primary-outlined.is-selected,.btn-example-primary-outlined[aria-pressed=true],.btn-example-primary-outlined[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.btn-example-primary-outlined:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.btn-example-primary-flat{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:none}@media (min-width:1024px){.btn-example-primary-flat{border-radius:var(--space-3)}}.btn-example-primary-flat.is-selected,.btn-example-primary-flat:hover,.btn-example-primary-flat[aria-pressed=true],.btn-example-primary-flat[aria-selected=true]{color:var(--ds__palette__primary-dark)}.btn-example-secondary-contained{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.btn-example-secondary-contained{border-radius:var(--space-3)}}.btn-example-secondary-contained.is-selected,.btn-example-secondary-contained:hover,.btn-example-secondary-contained[aria-pressed=true],.btn-example-secondary-contained[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.btn-example-secondary-outlined{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main)}@media (min-width:1024px){.btn-example-secondary-outlined{border-radius:var(--space-3)}}.btn-example-secondary-outlined.is-selected,.btn-example-secondary-outlined[aria-pressed=true],.btn-example-secondary-outlined[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.btn-example-secondary-outlined:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.btn-example-secondary-flat{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__secondary-main);border:none}@media (min-width:1024px){.btn-example-secondary-flat{border-radius:var(--space-3)}}.btn-example-secondary-flat.is-selected,.btn-example-secondary-flat:hover,.btn-example-secondary-flat[aria-pressed=true],.btn-example-secondary-flat[aria-selected=true]{color:var(--ds__palette__primary-dark)}.btn-example-success-contained{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.btn-example-success-contained{border-radius:var(--space-3)}}.btn-example-success-contained.is-selected,.btn-example-success-contained:hover,.btn-example-success-contained[aria-pressed=true],.btn-example-success-contained[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main);.btn-example-error-contained{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark)}@media (min-width:1024px){.btn-example-error-contained{border-radius:var(--space-3)}}.btn-example-error-contained.is-selected,.btn-example-error-contained:hover,.btn-example-error-contained[aria-pressed=true],.btn-example-error-contained[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}}@media (min-width:1024px){#DemoButtons{border-radius:var(--space-3)}}#DemoButtons[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}#DemoButtons:invalid{border:1px solid var(--ds__color__gray-300)}#DemoButtons:focus{border:1px solid var(--ds__color__gray-300)}#DemoButtons::placeholder{color:var(--ds__color__neutral-dark)}#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(--space-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}@media (min-width:1024px){.color-token{border-radius:var(--space-2)}}.color-token:hover{transform:scale(1.05);z-index:1;box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.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(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}@media (min-width:1024px){.surface-playground{border-radius:var(--space-3)}}@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{padding:var(--density-1)}.surface-playground__preview{flex:1;display:flex;flex-direction:column;gap:var(--density-2)}.demo-code-block{padding:var(--density-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;border-radius:var(--space-2);overflow:hidden}@media (min-width:1024px){.demo-code-block{border-radius:var(--space-3)}}.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)}box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main);.chip--gray-900{background:var(--ds__color__gray-900)}}@media (min-width:1024px){#DemoColors{border-radius:var(--space-3)}}#DemoColors[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}#DemoColors:invalid{border:1px solid var(--ds__color__gray-300)}#DemoColors:focus{border:1px solid var(--ds__color__gray-300)}#DemoColors::placeholder{color:var(--ds__color__neutral-dark)}#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(--space-1);font-family:monospace;font-size:.9rem;border-left:4px solid var(--ds__palette__primary-main);margin-top:var(--density-1)}@media (min-width:1024px){.density-code-snippet{border-radius:var(--space-2)}}.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{display:flex;justify-content:center;align-items:center;height:auto;overflow-x:auto;overflow-y:hidden;padding:var(--density-4);background:var(--ds__palette__surface-light);border-radius:var(--space-2);border:1px solid var(--ds__palette__neutral-light);position:relative;z-index:0}@media (min-width:1024px){.density-doll-wrapper{border-radius:var(--space-3)}}.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(--space-1);min-width:80px;min-height:40px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12);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)}@media (min-width:1024px){.concentric-content{border-radius:var(--space-2)}}.concentric-ring{position:absolute;border-radius:var(--space-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}@media (min-width:1024px){.concentric-ring{border-radius:var(--space-3)}}.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(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-2);border-radius:var(--space-1);height:auto;overflow-x:auto}@media (min-width:1024px){.density-card{border-radius:var(--space-3);border-radius:var(--space-2)}}.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(--density-0)}.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(--space-1);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main);white-space:nowrap}@media (min-width:1024px){.density-card__edit-btn{border-radius:var(--space-2)}}.density-card__edit-btn.is-selected,.density-card__edit-btn[aria-pressed=true],.density-card__edit-btn[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.density-card__edit-btn:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.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{.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(--density-2);border-radius:var(--space-2);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);gap:var(--density-1)}@media (min-width:1024px){.palette-card{border-radius:var(--space-3)}}.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(--space-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}@media (min-width:1024px){.palette-token{border-radius:var(--space-2)}}.palette-token:hover{transform:scale(1.02);z-index:1;box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.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(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}@media (min-width:1024px){.surface-playground{border-radius:var(--space-3)}}@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{padding:var(--density-1)}.surface-playground__preview{flex:1;display:flex;flex-direction:column;gap:var(--density-2)}.demo-code-block{padding:var(--density-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;border-radius:var(--space-2);overflow:hidden}@media (min-width:1024px){.demo-code-block{border-radius:var(--space-3)}}.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-main{padding:var(--density-1);border-radius:var(--space-1);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__primary-main);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-primary-main{border-radius:var(--space-2)}}.palette-card-primary-light{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__primary-light);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-primary-light{border-radius:var(--space-2)}}.palette-card-primary-dark{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__primary-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-primary-dark{border-radius:var(--space-2)}}.palette-card-primary-contrast{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__primary-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);color:var(--ds__palette__primary-dark)}@media (min-width:1024px){.palette-card-primary-contrast{border-radius:var(--space-2)}}.palette-card-secondary-main{padding:var(--density-1);border-radius:var(--space-1);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__secondary-main);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-secondary-main{border-radius:var(--space-2)}}.palette-card-secondary-light{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__secondary-light);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-secondary-light{border-radius:var(--space-2)}}.palette-card-secondary-dark{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__secondary-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-secondary-dark{border-radius:var(--space-2)}}.palette-card-secondary-contrast{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__secondary-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);color:var(--ds__palette__secondary-dark)}@media (min-width:1024px){.palette-card-secondary-contrast{border-radius:var(--space-2)}}.palette-card-tertiary-main{padding:var(--density-1);border-radius:var(--space-1);color:var(--ds__palette__tertiary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__tertiary-main);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-tertiary-main{border-radius:var(--space-2)}}.palette-card-tertiary-light{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__tertiary-main);color:var(--ds__palette__tertiary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__tertiary-light);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-tertiary-light{border-radius:var(--space-2)}}.palette-card-tertiary-dark{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__tertiary-main);color:var(--ds__palette__tertiary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__tertiary-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-tertiary-dark{border-radius:var(--space-2)}}.palette-card-tertiary-contrast{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__tertiary-main);color:var(--ds__palette__tertiary-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__tertiary-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);color:var(--ds__palette__tertiary-dark)}@media (min-width:1024px){.palette-card-tertiary-contrast{border-radius:var(--space-2)}}.palette-card-success-main{padding:var(--density-1);border-radius:var(--space-1);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__success-main);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-success-main{border-radius:var(--space-2)}}.palette-card-success-light{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__success-light);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-success-light{border-radius:var(--space-2)}}.palette-card-success-dark{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__success-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-success-dark{border-radius:var(--space-2)}}.palette-card-success-contrast{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__success-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);color:var(--ds__palette__success-dark)}@media (min-width:1024px){.palette-card-success-contrast{border-radius:var(--space-2)}}.palette-card-info-main{padding:var(--density-1);border-radius:var(--space-1);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__info-main);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-info-main{border-radius:var(--space-2)}}.palette-card-info-light{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__info-light);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-info-light{border-radius:var(--space-2)}}.palette-card-info-dark{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__info-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-info-dark{border-radius:var(--space-2)}}.palette-card-info-contrast{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__info-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);color:var(--ds__palette__info-dark)}@media (min-width:1024px){.palette-card-info-contrast{border-radius:var(--space-2)}}.palette-card-warning-main{padding:var(--density-1);border-radius:var(--space-1);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__warning-main);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-warning-main{border-radius:var(--space-2)}}.palette-card-warning-light{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__warning-light);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-warning-light{border-radius:var(--space-2)}}.palette-card-warning-dark{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__warning-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-warning-dark{border-radius:var(--space-2)}}.palette-card-warning-contrast{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__warning-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);color:var(--ds__palette__warning-dark)}@media (min-width:1024px){.palette-card-warning-contrast{border-radius:var(--space-2)}}.palette-card-error-main{padding:var(--density-1);border-radius:var(--space-1);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__error-main);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-error-main{border-radius:var(--space-2)}}.palette-card-error-light{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__error-light);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-error-light{border-radius:var(--space-2)}}.palette-card-error-dark{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__error-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-error-dark{border-radius:var(--space-2)}}.palette-card-error-contrast{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__error-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);color:var(--ds__palette__error-dark)}@media (min-width:1024px){.palette-card-error-contrast{border-radius:var(--space-2)}}.palette-card-dark-main{padding:var(--density-1);border-radius:var(--space-1);color:var(--ds__palette__dark-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__dark-main);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-dark-main{border-radius:var(--space-2)}}.palette-card-dark-light{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__dark-main);color:var(--ds__palette__dark-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__dark-light);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-dark-light{border-radius:var(--space-2)}}.palette-card-dark-dark{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__dark-main);color:var(--ds__palette__dark-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__dark-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-dark-dark{border-radius:var(--space-2)}}.palette-card-dark-contrast{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__dark-main);color:var(--ds__palette__dark-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__dark-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);color:var(--ds__palette__dark-dark)}@media (min-width:1024px){.palette-card-dark-contrast{border-radius:var(--space-2)}}.palette-card-neutral-main{padding:var(--density-1);border-radius:var(--space-1);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__neutral-main);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-neutral-main{border-radius:var(--space-2)}}.palette-card-neutral-light{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__neutral-light);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-neutral-light{border-radius:var(--space-2)}}.palette-card-neutral-dark{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__neutral-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-neutral-dark{border-radius:var(--space-2)}}.palette-card-neutral-contrast{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__neutral-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);color:var(--ds__palette__neutral-dark)}@media (min-width:1024px){.palette-card-neutral-contrast{border-radius:var(--space-2)}}.palette-card-light-main{padding:var(--density-1);border-radius:var(--space-1);color:var(--ds__palette__light-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__light-main);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-light-main{border-radius:var(--space-2)}}.palette-card-light-light{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__light-main);color:var(--ds__palette__light-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__light-light);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-light-light{border-radius:var(--space-2)}}.palette-card-light-dark{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__light-main);color:var(--ds__palette__light-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__light-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-light-dark{border-radius:var(--space-2)}}.palette-card-light-contrast{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__light-main);color:var(--ds__palette__light-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__light-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);color:var(--ds__palette__light-dark)}@media (min-width:1024px){.palette-card-light-contrast{border-radius:var(--space-2)}}.palette-card-surface-main{padding:var(--density-1);border-radius:var(--space-1);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__surface-main);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-surface-main{border-radius:var(--space-2)}}.palette-card-surface-light{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__surface-light);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-surface-light{border-radius:var(--space-2)}}.palette-card-surface-dark{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-card-surface-dark{border-radius:var(--space-2)}}box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main);.palette-card-surface-contrast{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);background:var(--ds__palette__surface-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);color:var(--ds__palette__surface-dark)}@media (min-width:1024px){.palette-card-surface-contrast{border-radius:var(--space-2)}}}@media (min-width:1024px){#DemoPalette{border-radius:var(--space-3)}}#DemoPalette[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}#DemoPalette:invalid{border:1px solid var(--ds__color__gray-300)}#DemoPalette:focus{border:1px solid var(--ds__color__gray-300)}#DemoPalette::placeholder{color:var(--ds__color__neutral-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(--space-2);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:var(--density-4);width:100%;padding:var(--density-3);margin:0 auto}@media (min-width:1024px){.prod-card{border-radius:var(--space-3)}}@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:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12);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(--space-2)}@media (min-width:1024px){.prod-stats{border-radius:var(--space-3)}}.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(--space-2);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);flex:1;justify-content:center;padding:var(--density-3)}@media (min-width:1024px){.prod-btn-primary{border-radius:var(--space-3)}}.prod-btn-primary.is-selected,.prod-btn-primary:hover,.prod-btn-primary[aria-pressed=true],.prod-btn-primary[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.prod-btn-secondary{border-radius:var(--space-2);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main);flex:1;justify-content:center;padding:var(--density-3)}@media (min-width:1024px){.prod-btn-secondary{border-radius:var(--space-3)}}.prod-btn-secondary.is-selected,.prod-btn-secondary[aria-pressed=true],.prod-btn-secondary[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.prod-btn-secondary:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.prod-code-block{background:#1e1e1e;color:#d4d4d4;padding:var(--density-2);border-radius:var(--space-2);font-family:monospace;font-size:.85rem;overflow-x:auto;border:1px solid #333}@media (min-width:1024px){.prod-code-block{border-radius:var(--space-3)}}.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(--space-2);background:var(--ds__palette__surface-light);display:flex;flex-direction:column;gap:var(--space-2)}@media (min-width:1024px){.prod-form{border-radius:var(--space-3)}}@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{font-size:.875rem}@media (min-width:768px){.prod-input{font-size:1rem}}.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(--space-3);border:1px solid var(--ds__palette__neutral-light)}@media (min-width:1024px){.demo-preview{border-radius:var(--space-4)}}.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(--space-2);transition:all .2s ease}@media (min-width:1024px){.prod-tab-btn{border-radius:var(--space-3)}}.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)}box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main);.demo-code{background:#1e1e1e;border-radius:var(--space-3);overflow:hidden;color:#d4d4d4;font-family:monospace;font-size:.9rem;border:1px solid var(--ds__palette__neutral-light);box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12);width:100%;max-width:600px}@media (min-width:1024px){.demo-code{border-radius:var(--space-4)}}}@media (min-width:1024px){#DemoProductivity{border-radius:var(--space-3)}}#DemoProductivity[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}#DemoProductivity:invalid{border:1px solid var(--ds__color__gray-300)}#DemoProductivity:focus{border:1px solid var(--ds__color__gray-300)}#DemoProductivity::placeholder{color:var(--ds__color__neutral-dark)}#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{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);background:var(--ds__palette__surface-main);border:1px solid var(--ds__color__gray-300);border-radius:var(--space-2)}@media (min-width:1024px){.card{border-radius:var(--space-3)}}.preview-box{width:100%;height:100px;background:var(--ds__palette__surface-main);display:flex;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(--space-3);border:1px solid var(--ds__color__gray-300)}@media (min-width:1024px){.playground{border-radius:var(--space-4)}}@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{padding:var(--space-2)}.preview-area{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;padding:var(--density-2)}.live-preview{flex:1;display:flex;align-items:center;justify-content:center;background:var(--ds__palette__surface-light);border-radius:var(--space-2);min-height:300px;padding:var(--space-8)}@media (min-width:1024px){.live-preview{border-radius:var(--space-3)}}.demo-element{width:200px;height:200px;background:var(--ds__palette__surface-main);display:flex;align-items:center;justify-content:center;color:var(--ds__palette__text-main);font-weight:700;transition:all .3s ease}box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main);.demo-code-block{border-radius:var(--space-2);overflow:hidden;border:1px solid var(--ds__color__gray-300)}@media (min-width:1024px){.demo-code-block{border-radius:var(--space-3)}}}@media (min-width:1024px){#DemoShadows{border-radius:var(--space-3)}}#DemoShadows[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}#DemoShadows:invalid{border:1px solid var(--ds__color__gray-300)}#DemoShadows:focus{border:1px solid var(--ds__color__gray-300)}#DemoShadows::placeholder{color:var(--ds__color__neutral-dark)}#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{display:flex;justify-content:center;align-items:center;overflow:auto;padding:var(--density-4);background:var(--ds__palette__surface-light);border-radius:var(--space-2);border:1px solid var(--ds__palette__neutral-light);position:relative;transition:all .3s ease}@media (min-width:1024px){.spacing-doll-wrapper{border-radius:var(--space-3)}}.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(--space-1);min-width:80px;min-height:40px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12);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)}@media (min-width:1024px){.concentric-content{border-radius:var(--space-2)}}.concentric-ring{position:absolute;border-radius:var(--space-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}@media (min-width:1024px){.concentric-ring{border-radius:var(--space-3)}}.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{background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-2);display:grid;gap:var(--density-2);border-radius:var(--space-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:1024px){.spacing-card{border-radius:var(--space-3)}}@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:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.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(--density-0) var(--density-1);border:1px solid var(--ds__palette__neutral-light);border-radius:var(--space-1);font-family:monospace;font-size:.85rem;text-align:right;color:var(--ds__palette__neutral-dark)}@media (min-width:1024px){.spacing-card__input{border-radius:var(--space-2)}}@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(--density-0) 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(--space-2);border:1px solid var(--ds__palette__neutral-light);min-height:300px}@media (min-width:1024px){.surfaces-viz-wrapper{border-radius:var(--space-3)}}.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(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-2);display:flex;flex-direction:column;gap:var(--density-2);border-radius:var(--space-1)}@media (min-width:1024px){.surface-card{border-radius:var(--space-3);border-radius:var(--space-2)}}.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(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}@media (min-width:1024px){.surface-doc-card{border-radius:var(--space-3)}}.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(--space-1);transition:all .2s ease}@media (min-width:1024px){.surface-card__edit-btn{border-radius:var(--space-2)}}.surface-card__edit-btn:hover{border-color:var(--ds__palette__primary-main);color:var(--ds__palette__primary-main)}.surface-card__preview{height:120px;display:flex;justify-content:center;align-items:center;background:color-mix(in srgb,var(--ds__palette__neutral-light) 10%,transparent);border-radius:var(--space-1);padding:var(--density-2)}@media (min-width:1024px){.surface-card__preview{border-radius:var(--space-2)}}.surface-preview-box{min-width:120px;min-height:60px;display:flex;justify-content:center;align-items:center;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(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}@media (min-width:1024px){.surface-playground{border-radius:var(--space-3)}}@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{padding:var(--density-1)}.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(--space-2);padding:var(--density-4);min-height:300px}@media (min-width:1024px){.surface-playground__preview{border-radius:var(--space-3)}}.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:2px;background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:480px){.surface-playground__box--contained-primary-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--contained-primary-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--contained-primary-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--contained-primary-0{border-radius:6px}}.surface-playground__box--contained-primary-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-primary-1{border-radius:var(--space-2)}}.surface-playground__box--contained-primary-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-primary-2{border-radius:var(--space-3)}}.surface-playground__box--contained-primary-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-primary-3{border-radius:var(--space-4)}}.surface-playground__box--contained-primary-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-primary-4{border-radius:var(--space-6)}}.surface-playground__box--contained-primary-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-primary-5{border-radius:var(--space-8)}}.surface-playground__box--contained-secondary-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:480px){.surface-playground__box--contained-secondary-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--contained-secondary-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--contained-secondary-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--contained-secondary-0{border-radius:6px}}.surface-playground__box--contained-secondary-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-secondary-1{border-radius:var(--space-2)}}.surface-playground__box--contained-secondary-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-secondary-2{border-radius:var(--space-3)}}.surface-playground__box--contained-secondary-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-secondary-3{border-radius:var(--space-4)}}.surface-playground__box--contained-secondary-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-secondary-4{border-radius:var(--space-6)}}.surface-playground__box--contained-secondary-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__secondary-main);color:var(--ds__palette__secondary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-secondary-5{border-radius:var(--space-8)}}.surface-playground__box--contained-success-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:480px){.surface-playground__box--contained-success-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--contained-success-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--contained-success-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--contained-success-0{border-radius:6px}}.surface-playground__box--contained-success-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-success-1{border-radius:var(--space-2)}}.surface-playground__box--contained-success-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-success-2{border-radius:var(--space-3)}}.surface-playground__box--contained-success-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-success-3{border-radius:var(--space-4)}}.surface-playground__box--contained-success-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-success-4{border-radius:var(--space-6)}}.surface-playground__box--contained-success-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-success-5{border-radius:var(--space-8)}}.surface-playground__box--contained-info-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:480px){.surface-playground__box--contained-info-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--contained-info-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--contained-info-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--contained-info-0{border-radius:6px}}.surface-playground__box--contained-info-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-info-1{border-radius:var(--space-2)}}.surface-playground__box--contained-info-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-info-2{border-radius:var(--space-3)}}.surface-playground__box--contained-info-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-info-3{border-radius:var(--space-4)}}.surface-playground__box--contained-info-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-info-4{border-radius:var(--space-6)}}.surface-playground__box--contained-info-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__info-main);color:var(--ds__palette__info-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-info-5{border-radius:var(--space-8)}}.surface-playground__box--contained-warning-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:480px){.surface-playground__box--contained-warning-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--contained-warning-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--contained-warning-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--contained-warning-0{border-radius:6px}}.surface-playground__box--contained-warning-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-warning-1{border-radius:var(--space-2)}}.surface-playground__box--contained-warning-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-warning-2{border-radius:var(--space-3)}}.surface-playground__box--contained-warning-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-warning-3{border-radius:var(--space-4)}}.surface-playground__box--contained-warning-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-warning-4{border-radius:var(--space-6)}}.surface-playground__box--contained-warning-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-warning-5{border-radius:var(--space-8)}}.surface-playground__box--contained-error-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:480px){.surface-playground__box--contained-error-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--contained-error-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--contained-error-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--contained-error-0{border-radius:6px}}.surface-playground__box--contained-error-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-error-1{border-radius:var(--space-2)}}.surface-playground__box--contained-error-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-error-2{border-radius:var(--space-3)}}.surface-playground__box--contained-error-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-error-3{border-radius:var(--space-4)}}.surface-playground__box--contained-error-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-error-4{border-radius:var(--space-6)}}.surface-playground__box--contained-error-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-error-5{border-radius:var(--space-8)}}.surface-playground__box--contained-neutral-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:480px){.surface-playground__box--contained-neutral-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--contained-neutral-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--contained-neutral-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--contained-neutral-0{border-radius:6px}}.surface-playground__box--contained-neutral-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-neutral-1{border-radius:var(--space-2)}}.surface-playground__box--contained-neutral-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-neutral-2{border-radius:var(--space-3)}}.surface-playground__box--contained-neutral-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-neutral-3{border-radius:var(--space-4)}}.surface-playground__box--contained-neutral-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-neutral-4{border-radius:var(--space-6)}}.surface-playground__box--contained-neutral-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-neutral-5{border-radius:var(--space-8)}}.surface-playground__box--contained-none-0{padding:var(--density-0);border-radius:2px;background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:480px){.surface-playground__box--contained-none-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--contained-none-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--contained-none-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--contained-none-0{border-radius:6px}}.surface-playground__box--contained-none-1{padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-none-1{border-radius:var(--space-2)}}.surface-playground__box--contained-none-2{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-none-2{border-radius:var(--space-3)}}.surface-playground__box--contained-none-3{padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-none-3{border-radius:var(--space-4)}}.surface-playground__box--contained-none-4{padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-none-4{border-radius:var(--space-6)}}.surface-playground__box--contained-none-5{padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.surface-playground__box--contained-none-5{border-radius:var(--space-8)}}.surface-playground__box--outlined-primary-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none}@media (min-width:480px){.surface-playground__box--outlined-primary-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--outlined-primary-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--outlined-primary-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--outlined-primary-0{border-radius:6px}}.surface-playground__box--outlined-primary-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-primary-1{border-radius:var(--space-2)}}.surface-playground__box--outlined-primary-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-primary-2{border-radius:var(--space-3)}}.surface-playground__box--outlined-primary-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-primary-3{border-radius:var(--space-4)}}.surface-playground__box--outlined-primary-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-primary-4{border-radius:var(--space-6)}}.surface-playground__box--outlined-primary-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-primary-5{border-radius:var(--space-8)}}.surface-playground__box--outlined-secondary-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main);box-shadow:none}@media (min-width:480px){.surface-playground__box--outlined-secondary-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--outlined-secondary-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--outlined-secondary-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--outlined-secondary-0{border-radius:6px}}.surface-playground__box--outlined-secondary-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-secondary-1{border-radius:var(--space-2)}}.surface-playground__box--outlined-secondary-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-secondary-2{border-radius:var(--space-3)}}.surface-playground__box--outlined-secondary-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-secondary-3{border-radius:var(--space-4)}}.surface-playground__box--outlined-secondary-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-secondary-4{border-radius:var(--space-6)}}.surface-playground__box--outlined-secondary-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__secondary-main);border:1px solid var(--ds__palette__secondary-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-secondary-5{border-radius:var(--space-8)}}.surface-playground__box--outlined-success-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none}@media (min-width:480px){.surface-playground__box--outlined-success-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--outlined-success-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--outlined-success-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--outlined-success-0{border-radius:6px}}.surface-playground__box--outlined-success-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-success-1{border-radius:var(--space-2)}}.surface-playground__box--outlined-success-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-success-2{border-radius:var(--space-3)}}.surface-playground__box--outlined-success-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-success-3{border-radius:var(--space-4)}}.surface-playground__box--outlined-success-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-success-4{border-radius:var(--space-6)}}.surface-playground__box--outlined-success-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-success-5{border-radius:var(--space-8)}}.surface-playground__box--outlined-info-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main);box-shadow:none}@media (min-width:480px){.surface-playground__box--outlined-info-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--outlined-info-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--outlined-info-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--outlined-info-0{border-radius:6px}}.surface-playground__box--outlined-info-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-info-1{border-radius:var(--space-2)}}.surface-playground__box--outlined-info-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-info-2{border-radius:var(--space-3)}}.surface-playground__box--outlined-info-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-info-3{border-radius:var(--space-4)}}.surface-playground__box--outlined-info-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-info-4{border-radius:var(--space-6)}}.surface-playground__box--outlined-info-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__info-main);border:1px solid var(--ds__palette__info-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-info-5{border-radius:var(--space-8)}}.surface-playground__box--outlined-warning-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:none}@media (min-width:480px){.surface-playground__box--outlined-warning-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--outlined-warning-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--outlined-warning-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--outlined-warning-0{border-radius:6px}}.surface-playground__box--outlined-warning-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-warning-1{border-radius:var(--space-2)}}.surface-playground__box--outlined-warning-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-warning-2{border-radius:var(--space-3)}}.surface-playground__box--outlined-warning-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-warning-3{border-radius:var(--space-4)}}.surface-playground__box--outlined-warning-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-warning-4{border-radius:var(--space-6)}}.surface-playground__box--outlined-warning-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-warning-5{border-radius:var(--space-8)}}.surface-playground__box--outlined-error-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none}@media (min-width:480px){.surface-playground__box--outlined-error-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--outlined-error-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--outlined-error-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--outlined-error-0{border-radius:6px}}.surface-playground__box--outlined-error-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-error-1{border-radius:var(--space-2)}}.surface-playground__box--outlined-error-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-error-2{border-radius:var(--space-3)}}.surface-playground__box--outlined-error-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-error-3{border-radius:var(--space-4)}}.surface-playground__box--outlined-error-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-error-4{border-radius:var(--space-6)}}.surface-playground__box--outlined-error-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-error-5{border-radius:var(--space-8)}}.surface-playground__box--outlined-neutral-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none}@media (min-width:480px){.surface-playground__box--outlined-neutral-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--outlined-neutral-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--outlined-neutral-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--outlined-neutral-0{border-radius:6px}}.surface-playground__box--outlined-neutral-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-neutral-1{border-radius:var(--space-2)}}.surface-playground__box--outlined-neutral-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-neutral-2{border-radius:var(--space-3)}}.surface-playground__box--outlined-neutral-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-neutral-3{border-radius:var(--space-4)}}.surface-playground__box--outlined-neutral-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-neutral-4{border-radius:var(--space-6)}}.surface-playground__box--outlined-neutral-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-neutral-5{border-radius:var(--space-8)}}.surface-playground__box--outlined-none-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none}@media (min-width:480px){.surface-playground__box--outlined-none-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--outlined-none-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--outlined-none-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--outlined-none-0{border-radius:6px}}.surface-playground__box--outlined-none-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-none-1{border-radius:var(--space-2)}}.surface-playground__box--outlined-none-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-none-2{border-radius:var(--space-3)}}.surface-playground__box--outlined-none-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-none-3{border-radius:var(--space-4)}}.surface-playground__box--outlined-none-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-none-4{border-radius:var(--space-6)}}.surface-playground__box--outlined-none-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none}@media (min-width:1024px){.surface-playground__box--outlined-none-5{border-radius:var(--space-8)}}.surface-playground__box--flat-primary-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__primary-main);border:none;box-shadow:none}@media (min-width:480px){.surface-playground__box--flat-primary-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--flat-primary-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--flat-primary-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--flat-primary-0{border-radius:6px}}.surface-playground__box--flat-primary-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__primary-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-primary-1{border-radius:var(--space-2)}}.surface-playground__box--flat-primary-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-primary-2{border-radius:var(--space-3)}}.surface-playground__box--flat-primary-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__primary-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-primary-3{border-radius:var(--space-4)}}.surface-playground__box--flat-primary-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__primary-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-primary-4{border-radius:var(--space-6)}}.surface-playground__box--flat-primary-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__primary-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-primary-5{border-radius:var(--space-8)}}.surface-playground__box--flat-secondary-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__secondary-main);border:none;box-shadow:none}@media (min-width:480px){.surface-playground__box--flat-secondary-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--flat-secondary-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--flat-secondary-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--flat-secondary-0{border-radius:6px}}.surface-playground__box--flat-secondary-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__secondary-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-secondary-1{border-radius:var(--space-2)}}.surface-playground__box--flat-secondary-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__secondary-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-secondary-2{border-radius:var(--space-3)}}.surface-playground__box--flat-secondary-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__secondary-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-secondary-3{border-radius:var(--space-4)}}.surface-playground__box--flat-secondary-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__secondary-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-secondary-4{border-radius:var(--space-6)}}.surface-playground__box--flat-secondary-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__secondary-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-secondary-5{border-radius:var(--space-8)}}.surface-playground__box--flat-success-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__success-main);border:none;box-shadow:none}@media (min-width:480px){.surface-playground__box--flat-success-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--flat-success-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--flat-success-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--flat-success-0{border-radius:6px}}.surface-playground__box--flat-success-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__success-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-success-1{border-radius:var(--space-2)}}.surface-playground__box--flat-success-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__success-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-success-2{border-radius:var(--space-3)}}.surface-playground__box--flat-success-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__success-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-success-3{border-radius:var(--space-4)}}.surface-playground__box--flat-success-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__success-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-success-4{border-radius:var(--space-6)}}.surface-playground__box--flat-success-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__success-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-success-5{border-radius:var(--space-8)}}.surface-playground__box--flat-info-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__info-main);border:none;box-shadow:none}@media (min-width:480px){.surface-playground__box--flat-info-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--flat-info-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--flat-info-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--flat-info-0{border-radius:6px}}.surface-playground__box--flat-info-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__info-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-info-1{border-radius:var(--space-2)}}.surface-playground__box--flat-info-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__info-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-info-2{border-radius:var(--space-3)}}.surface-playground__box--flat-info-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__info-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-info-3{border-radius:var(--space-4)}}.surface-playground__box--flat-info-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__info-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-info-4{border-radius:var(--space-6)}}.surface-playground__box--flat-info-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__info-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-info-5{border-radius:var(--space-8)}}.surface-playground__box--flat-warning-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__warning-main);border:none;box-shadow:none}@media (min-width:480px){.surface-playground__box--flat-warning-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--flat-warning-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--flat-warning-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--flat-warning-0{border-radius:6px}}.surface-playground__box--flat-warning-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__warning-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-warning-1{border-radius:var(--space-2)}}.surface-playground__box--flat-warning-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__warning-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-warning-2{border-radius:var(--space-3)}}.surface-playground__box--flat-warning-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__warning-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-warning-3{border-radius:var(--space-4)}}.surface-playground__box--flat-warning-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__warning-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-warning-4{border-radius:var(--space-6)}}.surface-playground__box--flat-warning-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__warning-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-warning-5{border-radius:var(--space-8)}}.surface-playground__box--flat-error-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__error-main);border:none;box-shadow:none}@media (min-width:480px){.surface-playground__box--flat-error-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--flat-error-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--flat-error-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--flat-error-0{border-radius:6px}}.surface-playground__box--flat-error-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__error-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-error-1{border-radius:var(--space-2)}}.surface-playground__box--flat-error-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__error-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-error-2{border-radius:var(--space-3)}}.surface-playground__box--flat-error-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__error-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-error-3{border-radius:var(--space-4)}}.surface-playground__box--flat-error-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__error-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-error-4{border-radius:var(--space-6)}}.surface-playground__box--flat-error-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__error-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-error-5{border-radius:var(--space-8)}}.surface-playground__box--flat-neutral-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__neutral-main);border:none;box-shadow:none}@media (min-width:480px){.surface-playground__box--flat-neutral-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--flat-neutral-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--flat-neutral-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--flat-neutral-0{border-radius:6px}}.surface-playground__box--flat-neutral-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__neutral-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-neutral-1{border-radius:var(--space-2)}}.surface-playground__box--flat-neutral-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-neutral-2{border-radius:var(--space-3)}}.surface-playground__box--flat-neutral-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__neutral-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-neutral-3{border-radius:var(--space-4)}}.surface-playground__box--flat-neutral-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__neutral-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-neutral-4{border-radius:var(--space-6)}}.surface-playground__box--flat-neutral-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__neutral-main);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-neutral-5{border-radius:var(--space-8)}}.surface-playground__box--flat-none-0{padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__surface-contrast);border:none;box-shadow:none}@media (min-width:480px){.surface-playground__box--flat-none-0{border-radius:4px}}@media (min-width:768px){.surface-playground__box--flat-none-0{border-radius:6px}}@media (min-width:1024px){.surface-playground__box--flat-none-0{border-radius:6px}}@media (min-width:1280px){.surface-playground__box--flat-none-0{border-radius:6px}}.surface-playground__box--flat-none-1{padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__surface-contrast);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-none-1{border-radius:var(--space-2)}}.surface-playground__box--flat-none-2{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-none-2{border-radius:var(--space-3)}}.surface-playground__box--flat-none-3{padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__surface-contrast);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-none-3{border-radius:var(--space-4)}}.surface-playground__box--flat-none-4{padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__surface-contrast);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-none-4{border-radius:var(--space-6)}}.surface-playground__box--flat-none-5{padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__surface-contrast);border:none;box-shadow:none}@media (min-width:1024px){.surface-playground__box--flat-none-5{border-radius:var(--space-8)}}.demo-radius-0{border-radius:0!important}.demo-radius-1{border-radius:var(--space-1)!important}@media (min-width:1024px){.demo-radius-1{border-radius:var(--space-2)}}.demo-radius-2{border-radius:var(--space-2)!important}@media (min-width:1024px){.demo-radius-2{border-radius:var(--space-3)}}.demo-radius-3{border-radius:var(--space-3)!important}@media (min-width:1024px){.demo-radius-3{border-radius:var(--space-4)}}.demo-radius-4{border-radius:var(--space-4)!important}@media (min-width:1024px){.demo-radius-4{border-radius:var(--space-6)}}.demo-radius-5{border-radius:var(--space-6)!important}@media (min-width:1024px){.demo-radius-5{border-radius:var(--space-8)}}.demo-shadow-0{box-shadow:none!important}.demo-shadow-1{box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)!important}.demo-shadow-2{box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)!important}.demo-shadow-3{box-shadow:0 2px 4px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.14)!important}.demo-shadow-4{box-shadow:0 4px 6px rgba(0,0,0,.08),0 10px 15px rgba(0,0,0,.16)!important}box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main);.demo-shadow-5{box-shadow:0 10px 15px rgba(0,0,0,.1),0 20px 25px rgba(0,0,0,.2)!important}}@media (min-width:1024px){#DemoSurfaces{border-radius:var(--space-3)}}#DemoSurfaces[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}#DemoSurfaces:invalid{border:1px solid var(--ds__color__gray-300)}#DemoSurfaces:focus{border:1px solid var(--ds__color__gray-300)}#DemoSurfaces::placeholder{color:var(--ds__color__neutral-dark)}#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(--density-0);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(--space-1)}@media (min-width:1024px){.sample-pre{border-radius:var(--space-2)}}}.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(--space-3);overflow:hidden;color:#d4d4d4;font-family:monospace;font-size:.85rem;border:1px solid var(--ds__palette__neutral-light);box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12);width:100%;max-width:500px}@media (min-width:1024px){.home-code{border-radius:var(--space-4)}}.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(--space-2);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);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(--density-2);border-radius:var(--space-2);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);width:100%;justify-content:center}@media (min-width:1024px){.mb-action{border-radius:var(--space-3)}}.mb-action[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.mb-action[aria-pressed=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.mb-action.is-selected{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.mb-action:hover{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}}@media (min-width:1024px){.mb-card{border-radius:var(--space-3)}}@media (min-width:768px){.mb-card{width:420px;padding:var(--density-5)}}}#InputDemo{.inputs-section{display:flex;flex-direction:column;gap:var(--density-4)}.inputs-header,.inputs-playground-container{display:flex;flex-direction:column;gap:var(--density-2)}.inputs-playground{display:flex;flex-direction:column;gap:var(--density-3);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}@media (min-width:1024px){.inputs-playground{border-radius:var(--space-3)}}@media (min-width:768px){.inputs-playground{flex-direction:row;align-items:flex-start}}.inputs-playground__controls{display:flex;flex-direction:column;gap:var(--density-2);min-width:250px}.inputs-playground__controls label{display:flex;flex-direction:column;gap:var(--density-1);font-size:.9rem;font-weight:500}.inputs-playground__controls select{padding:var(--density-1)}.inputs-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(--space-2);padding:var(--density-4);min-height:300px}@media (min-width:1024px){.inputs-playground__preview{border-radius:var(--space-3)}}.inputs-playground__element{width:100%;max-width:300px;transition:all .2s ease}.inputs-doc-container{display:flex;flex-direction:column;gap:var(--density-2)}.inputs-doc-card{border-radius:var(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-3);background:color-mix(in srgb,var(--ds__palette__surface-light) 30%,transparent)}@media (min-width:1024px){.inputs-doc-card{border-radius:var(--space-3)}}.inputs-doc-intro{margin-bottom:var(--density-2);line-height:1.5}.inputs-doc-subtitle{font-weight:700;margin-bottom:var(--density-1);color:var(--ds__palette__primary-dark)}.inputs-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)}.inputs-doc-list li{font-size:.9rem}.inputs-grid-container{display:flex;flex-direction:column;gap:var(--density-2)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--density-3)}.input-card{border-radius:var(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-3);display:flex;flex-direction:column;gap:var(--density-2);align-items:center}@media (min-width:1024px){.input-card{border-radius:var(--space-3)}}.input-card__label{font-size:.8rem;opacity:.7;font-family:monospace}.inputs-playground__element--contained-neutral-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-neutral-1{border-radius:var(--space-2)}}.inputs-playground__element--contained-neutral-1:disabled,.inputs-playground__element--contained-neutral-1[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-neutral-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-neutral-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-neutral-1:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-neutral-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-neutral-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-neutral-2{border-radius:var(--space-3)}}.inputs-playground__element--contained-neutral-2:disabled,.inputs-playground__element--contained-neutral-2[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-neutral-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-neutral-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-neutral-2:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-neutral-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-neutral-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-neutral-3{border-radius:var(--space-4)}}.inputs-playground__element--contained-neutral-3:disabled,.inputs-playground__element--contained-neutral-3[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-neutral-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-neutral-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-neutral-3:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-neutral-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-neutral-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-neutral-4{border-radius:var(--space-6)}}.inputs-playground__element--contained-neutral-4:disabled,.inputs-playground__element--contained-neutral-4[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-neutral-4[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-neutral-4:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-neutral-4:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-neutral-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-neutral-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-neutral-5{border-radius:var(--space-8)}}.inputs-playground__element--contained-neutral-5:disabled,.inputs-playground__element--contained-neutral-5[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-neutral-5[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-neutral-5:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-neutral-5:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-neutral-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--contained-primary-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--contained-primary-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--contained-primary-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--contained-primary-0{border-radius:6px}}.inputs-playground__element--contained-primary-0:disabled,.inputs-playground__element--contained-primary-0[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-0[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-0:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-0:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-primary-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-primary-1{border-radius:var(--space-2)}}.inputs-playground__element--contained-primary-1:disabled,.inputs-playground__element--contained-primary-1[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-1:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-primary-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-primary-2{border-radius:var(--space-3)}}.inputs-playground__element--contained-primary-2:disabled,.inputs-playground__element--contained-primary-2[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-2:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-primary-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-primary-3{border-radius:var(--space-4)}}.inputs-playground__element--contained-primary-3:disabled,.inputs-playground__element--contained-primary-3[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-3:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-primary-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-primary-4{border-radius:var(--space-6)}}.inputs-playground__element--contained-primary-4:disabled,.inputs-playground__element--contained-primary-4[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-4[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-4:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-4:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-primary-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-primary-5{border-radius:var(--space-8)}}.inputs-playground__element--contained-primary-5:disabled,.inputs-playground__element--contained-primary-5[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-primary-5[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-5:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-primary-5:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-primary-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-success-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-success-1{border-radius:var(--space-2)}}.inputs-playground__element--contained-success-1:disabled,.inputs-playground__element--contained-success-1[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-success-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-success-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-success-1:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-success-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-success-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-success-2{border-radius:var(--space-3)}}.inputs-playground__element--contained-success-2:disabled,.inputs-playground__element--contained-success-2[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-success-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-success-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-success-2:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-success-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-success-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-success-3{border-radius:var(--space-4)}}.inputs-playground__element--contained-success-3:disabled,.inputs-playground__element--contained-success-3[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-success-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-success-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-success-3:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-success-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-success-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-success-4{border-radius:var(--space-6)}}.inputs-playground__element--contained-success-4:disabled,.inputs-playground__element--contained-success-4[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-success-4[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-success-4:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-success-4:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-success-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-success-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-success-5{border-radius:var(--space-8)}}.inputs-playground__element--contained-success-5:disabled,.inputs-playground__element--contained-success-5[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-success-5[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-success-5:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-success-5:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-success-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--contained-warning-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--contained-warning-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--contained-warning-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--contained-warning-0{border-radius:6px}}.inputs-playground__element--contained-warning-0:disabled,.inputs-playground__element--contained-warning-0[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-0[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-0:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-0:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-warning-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-warning-1{border-radius:var(--space-2)}}.inputs-playground__element--contained-warning-1:disabled,.inputs-playground__element--contained-warning-1[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-1:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-warning-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-warning-2{border-radius:var(--space-3)}}.inputs-playground__element--contained-warning-2:disabled,.inputs-playground__element--contained-warning-2[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-2:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-warning-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-warning-3{border-radius:var(--space-4)}}.inputs-playground__element--contained-warning-3:disabled,.inputs-playground__element--contained-warning-3[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-3:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-warning-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-warning-4{border-radius:var(--space-6)}}.inputs-playground__element--contained-warning-4:disabled,.inputs-playground__element--contained-warning-4[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-4[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-4:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-4:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-warning-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__warning-main);color:var(--ds__palette__warning-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-warning-5{border-radius:var(--space-8)}}.inputs-playground__element--contained-warning-5:disabled,.inputs-playground__element--contained-warning-5[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-warning-5[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-5:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-warning-5:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-warning-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-error-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-error-1{border-radius:var(--space-2)}}.inputs-playground__element--contained-error-1:disabled,.inputs-playground__element--contained-error-1[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-error-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-error-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-error-1:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-error-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-error-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-error-2{border-radius:var(--space-3)}}.inputs-playground__element--contained-error-2:disabled,.inputs-playground__element--contained-error-2[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-error-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-error-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-error-2:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-error-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-error-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-error-3{border-radius:var(--space-4)}}.inputs-playground__element--contained-error-3:disabled,.inputs-playground__element--contained-error-3[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-error-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-error-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-error-3:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-error-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-error-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-error-4{border-radius:var(--space-6)}}.inputs-playground__element--contained-error-4:disabled,.inputs-playground__element--contained-error-4[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-error-4[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-error-4:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-error-4:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-error-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-error-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-error-5{border-radius:var(--space-8)}}.inputs-playground__element--contained-error-5:disabled,.inputs-playground__element--contained-error-5[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-error-5[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-error-5:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-error-5:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-error-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-none-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--contained-none-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--contained-none-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--contained-none-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--contained-none-0{border-radius:6px}}.inputs-playground__element--contained-none-0:disabled,.inputs-playground__element--contained-none-0[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-none-0[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-none-0:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-none-0:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-none-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-none-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-none-1{border-radius:var(--space-2)}}.inputs-playground__element--contained-none-1:disabled,.inputs-playground__element--contained-none-1[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-none-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-none-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-none-1:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-none-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-none-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-none-2{border-radius:var(--space-3)}}.inputs-playground__element--contained-none-2:disabled,.inputs-playground__element--contained-none-2[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-none-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-none-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-none-2:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-none-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-none-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-none-3{border-radius:var(--space-4)}}.inputs-playground__element--contained-none-3:disabled,.inputs-playground__element--contained-none-3[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-none-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-none-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-none-3:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-none-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-none-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--contained-none-4{border-radius:var(--space-6)}}.inputs-playground__element--contained-none-4:disabled,.inputs-playground__element--contained-none-4[aria-disabled=true]{color:var(--ds__color__neutral-dark)}.inputs-playground__element--contained-none-4[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-none-4:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--contained-none-4:focus{border:1px solid var(--ds__color__gray-300);shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}.inputs-playground__element--contained-none-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-neutral-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--outlined-neutral-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--outlined-neutral-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--outlined-neutral-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--outlined-neutral-0{border-radius:6px}}.inputs-playground__element--outlined-neutral-0[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-0:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-0:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-neutral-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-neutral-1{border-radius:var(--space-2)}}.inputs-playground__element--outlined-neutral-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-1:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-neutral-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-neutral-2{border-radius:var(--space-3)}}.inputs-playground__element--outlined-neutral-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-2:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-neutral-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-neutral-3{border-radius:var(--space-4)}}.inputs-playground__element--outlined-neutral-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-3:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-neutral-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-neutral-4{border-radius:var(--space-6)}}.inputs-playground__element--outlined-neutral-4[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-4:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-4:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-neutral-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-neutral-5{border-radius:var(--space-8)}}.inputs-playground__element--outlined-neutral-5[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-5:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-5:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-neutral-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-primary-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--outlined-primary-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--outlined-primary-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--outlined-primary-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--outlined-primary-0{border-radius:6px}}.inputs-playground__element--outlined-primary-0[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-0:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-0:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-primary-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-primary-1{border-radius:var(--space-2)}}.inputs-playground__element--outlined-primary-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-1:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-primary-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-primary-2{border-radius:var(--space-3)}}.inputs-playground__element--outlined-primary-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-2:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-primary-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-primary-3{border-radius:var(--space-4)}}.inputs-playground__element--outlined-primary-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-3:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-primary-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-primary-4{border-radius:var(--space-6)}}.inputs-playground__element--outlined-primary-4[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-4:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-4:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-primary-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-success-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--outlined-success-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--outlined-success-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--outlined-success-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--outlined-success-0{border-radius:6px}}.inputs-playground__element--outlined-success-0[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-0:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-0:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-success-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-success-1{border-radius:var(--space-2)}}.inputs-playground__element--outlined-success-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-1:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-success-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-success-2{border-radius:var(--space-3)}}.inputs-playground__element--outlined-success-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-2:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-success-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-success-3{border-radius:var(--space-4)}}.inputs-playground__element--outlined-success-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-3:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-success-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-success-4{border-radius:var(--space-6)}}.inputs-playground__element--outlined-success-4[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-4:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-4:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-success-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-success-5{border-radius:var(--space-8)}}.inputs-playground__element--outlined-success-5[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-5:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-5:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-success-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-warning-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--outlined-warning-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--outlined-warning-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--outlined-warning-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--outlined-warning-0{border-radius:6px}}.inputs-playground__element--outlined-warning-0[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-0:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-0:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-warning-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-warning-1{border-radius:var(--space-2)}}.inputs-playground__element--outlined-warning-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-1:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-warning-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-warning-2{border-radius:var(--space-3)}}.inputs-playground__element--outlined-warning-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-2:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-warning-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-warning-3{border-radius:var(--space-4)}}.inputs-playground__element--outlined-warning-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-3:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-warning-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__warning-main);border:1px solid var(--ds__palette__warning-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-warning-4{border-radius:var(--space-6)}}.inputs-playground__element--outlined-warning-4[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-4:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-4:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-warning-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-error-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--outlined-error-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--outlined-error-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--outlined-error-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--outlined-error-0{border-radius:6px}}.inputs-playground__element--outlined-error-0[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-0:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-0:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-error-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-error-1{border-radius:var(--space-2)}}.inputs-playground__element--outlined-error-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-1:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-error-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-error-2{border-radius:var(--space-3)}}.inputs-playground__element--outlined-error-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-2:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-error-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-error-3{border-radius:var(--space-4)}}.inputs-playground__element--outlined-error-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-3:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-error-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-error-4{border-radius:var(--space-6)}}.inputs-playground__element--outlined-error-4[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-4:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-4:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-error-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-error-5{border-radius:var(--space-8)}}.inputs-playground__element--outlined-error-5[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-5:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-5:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-error-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-none-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--outlined-none-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--outlined-none-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--outlined-none-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--outlined-none-0{border-radius:6px}}.inputs-playground__element--outlined-none-0[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-0:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-0:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-none-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-none-1{border-radius:var(--space-2)}}.inputs-playground__element--outlined-none-1[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-1:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-1:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-none-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-none-2{border-radius:var(--space-3)}}.inputs-playground__element--outlined-none-2[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-2:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-2:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-none-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-none-3{border-radius:var(--space-4)}}.inputs-playground__element--outlined-none-3[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-3:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-3:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--outlined-none-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--outlined-none-5{border-radius:var(--space-8)}}.inputs-playground__element--outlined-none-5[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-5:invalid{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-5:focus{border:1px solid var(--ds__color__gray-300)}.inputs-playground__element--outlined-none-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-neutral-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--underline-neutral-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--underline-neutral-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--underline-neutral-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--underline-neutral-0{border-radius:6px}}.inputs-playground__element--underline-neutral-0[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-0:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-0:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-neutral-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-neutral-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-neutral-1{border-radius:var(--space-2)}}.inputs-playground__element--underline-neutral-1[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-1:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-1:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-neutral-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-neutral-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-neutral-2{border-radius:var(--space-3)}}.inputs-playground__element--underline-neutral-2[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-2:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-2:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-neutral-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-neutral-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-neutral-3{border-radius:var(--space-4)}}.inputs-playground__element--underline-neutral-3[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-3:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-3:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-neutral-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-neutral-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-neutral-4{border-radius:var(--space-6)}}.inputs-playground__element--underline-neutral-4[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-4:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-4:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-neutral-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-neutral-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-neutral-5{border-radius:var(--space-8)}}.inputs-playground__element--underline-neutral-5[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-5:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-neutral-5:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-neutral-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-primary-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__primary-main);border:none;border-bottom:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--underline-primary-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--underline-primary-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--underline-primary-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--underline-primary-0{border-radius:6px}}.inputs-playground__element--underline-primary-0[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-primary-0:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-primary-0:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-primary-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-primary-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__primary-main);border:none;border-bottom:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-primary-1{border-radius:var(--space-2)}}.inputs-playground__element--underline-primary-1[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-primary-1:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-primary-1:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-primary-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-primary-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:none;border-bottom:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-primary-2{border-radius:var(--space-3)}}.inputs-playground__element--underline-primary-2[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-primary-2:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-primary-2:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-primary-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-primary-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__primary-main);border:none;border-bottom:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-primary-3{border-radius:var(--space-4)}}.inputs-playground__element--underline-primary-3[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-primary-3:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-primary-3:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-primary-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-primary-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__primary-main);border:none;border-bottom:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-primary-5{border-radius:var(--space-8)}}.inputs-playground__element--underline-primary-5[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-primary-5:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-primary-5:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-primary-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-success-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__success-main);border:none;border-bottom:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--underline-success-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--underline-success-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--underline-success-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--underline-success-0{border-radius:6px}}.inputs-playground__element--underline-success-0[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-0:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-0:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-success-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-success-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__success-main);border:none;border-bottom:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-success-1{border-radius:var(--space-2)}}.inputs-playground__element--underline-success-1[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-1:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-1:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-success-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-success-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__success-main);border:none;border-bottom:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-success-2{border-radius:var(--space-3)}}.inputs-playground__element--underline-success-2[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-2:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-2:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-success-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-success-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__success-main);border:none;border-bottom:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-success-3{border-radius:var(--space-4)}}.inputs-playground__element--underline-success-3[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-3:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-3:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-success-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-success-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__success-main);border:none;border-bottom:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-success-4{border-radius:var(--space-6)}}.inputs-playground__element--underline-success-4[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-4:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-4:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-success-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-success-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__success-main);border:none;border-bottom:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-success-5{border-radius:var(--space-8)}}.inputs-playground__element--underline-success-5[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-5:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-success-5:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-success-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-warning-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__warning-main);border:none;border-bottom:1px solid var(--ds__palette__warning-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--underline-warning-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--underline-warning-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--underline-warning-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--underline-warning-0{border-radius:6px}}.inputs-playground__element--underline-warning-0[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-0:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-0:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-warning-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-warning-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__warning-main);border:none;border-bottom:1px solid var(--ds__palette__warning-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-warning-1{border-radius:var(--space-2)}}.inputs-playground__element--underline-warning-1[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-1:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-1:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-warning-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-warning-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__warning-main);border:none;border-bottom:1px solid var(--ds__palette__warning-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-warning-2{border-radius:var(--space-3)}}.inputs-playground__element--underline-warning-2[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-2:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-2:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-warning-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-warning-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__warning-main);border:none;border-bottom:1px solid var(--ds__palette__warning-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-warning-3{border-radius:var(--space-4)}}.inputs-playground__element--underline-warning-3[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-3:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-3:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-warning-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-warning-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__warning-main);border:none;border-bottom:1px solid var(--ds__palette__warning-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-warning-4{border-radius:var(--space-6)}}.inputs-playground__element--underline-warning-4[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-4:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-4:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-warning-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-warning-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__warning-main);border:none;border-bottom:1px solid var(--ds__palette__warning-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-warning-5{border-radius:var(--space-8)}}.inputs-playground__element--underline-warning-5[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-5:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-warning-5:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-warning-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-error-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__error-main);border:none;border-bottom:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--underline-error-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--underline-error-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--underline-error-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--underline-error-0{border-radius:6px}}.inputs-playground__element--underline-error-0[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-error-0:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-error-0:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-error-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-error-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__error-main);border:none;border-bottom:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-error-2{border-radius:var(--space-3)}}.inputs-playground__element--underline-error-2[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-error-2:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-error-2:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-error-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-error-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__error-main);border:none;border-bottom:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-error-3{border-radius:var(--space-4)}}.inputs-playground__element--underline-error-3[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-error-3:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-error-3:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-error-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-error-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__error-main);border:none;border-bottom:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-error-4{border-radius:var(--space-6)}}.inputs-playground__element--underline-error-4[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-error-4:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-error-4:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-error-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-error-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__error-main);border:none;border-bottom:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-error-5{border-radius:var(--space-8)}}.inputs-playground__element--underline-error-5[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-error-5:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-error-5:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-error-5::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-none-0{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-0);border-radius:2px;background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:480px){.inputs-playground__element--underline-none-0{border-radius:4px}}@media (min-width:768px){.inputs-playground__element--underline-none-0{border-radius:6px}}@media (min-width:1024px){.inputs-playground__element--underline-none-0{border-radius:6px}}@media (min-width:1280px){.inputs-playground__element--underline-none-0{border-radius:6px}}.inputs-playground__element--underline-none-0[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-0:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-0:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-none-0::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-none-1{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-1);border-radius:var(--space-1);background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-none-1{border-radius:var(--space-2)}}.inputs-playground__element--underline-none-1[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-1:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-1:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-none-1::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-none-2{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-none-2{border-radius:var(--space-3)}}.inputs-playground__element--underline-none-2[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-2:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-2:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-none-2::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-none-3{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-3);border-radius:var(--space-3);background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-none-3{border-radius:var(--space-4)}}.inputs-playground__element--underline-none-3[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-3:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-3:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-none-3::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-none-4{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-4);border-radius:var(--space-4);background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-none-4{border-radius:var(--space-6)}}.inputs-playground__element--underline-none-4[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-4:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-4:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-none-4::placeholder{color:var(--ds__color__neutral-dark)}.inputs-playground__element--underline-none-5{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-5);border-radius:var(--space-6);background:transparent;color:var(--ds__palette__neutral-main);border:none;border-bottom:1px solid var(--ds__palette__neutral-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.inputs-playground__element--underline-none-5{border-radius:var(--space-8)}}.inputs-playground__element--underline-none-5[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-5:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.inputs-playground__element--underline-none-5:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.inputs-playground__element--underline-none-5::placeholder{color:var(--ds__color__neutral-dark)}.demo-radius-0{border-radius:0!important}.demo-radius-1{border-radius:var(--space-1)!important}@media (min-width:1024px){.demo-radius-1{border-radius:var(--space-2)}}.demo-radius-2{border-radius:var(--space-2)!important}@media (min-width:1024px){.demo-radius-2{border-radius:var(--space-3)}}.demo-radius-3{border-radius:var(--space-3)!important}@media (min-width:1024px){.demo-radius-3{border-radius:var(--space-4)}}.demo-radius-4{border-radius:var(--space-4)!important}@media (min-width:1024px){.demo-radius-4{border-radius:var(--space-6)}}.demo-radius-5{border-radius:var(--space-6)!important}@media (min-width:1024px){.demo-radius-5{border-radius:var(--space-8)}}.demo-shadow-0{box-shadow:none!important}.demo-shadow-1{box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)!important}.demo-shadow-2{box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)!important}.demo-shadow-3{box-shadow:0 2px 4px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.14)!important}.demo-shadow-4{box-shadow:0 4px 6px rgba(0,0,0,.08),0 10px 15px rgba(0,0,0,.16)!important}.demo-shadow-5{box-shadow:0 10px 15px rgba(0,0,0,.1),0 20px 25px rgba(0,0,0,.2)!important}.force-hover{border-color:var(--ds__palette__primary-light)}.force-focus{border-color:var(--ds__palette__primary-main)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--ds__palette__primary-main) 20%,transparent)!important;outline:none}.inputs-playground__element:hover{border-color:var(--ds__palette__primary-light)}.inputs-playground__element:focus{border-color:var(--ds__palette__primary-main);box-shadow:0 0 0 2px color-mix(in srgb,var(--ds__palette__primary-main) 20%,transparent)}.input-ex-outlined-primary{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.input-ex-outlined-primary{border-radius:var(--space-3)}}.input-ex-outlined-primary[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.input-ex-outlined-primary:invalid{border:1px solid var(--ds__color__gray-300)}.input-ex-outlined-primary:focus{border:1px solid var(--ds__color__gray-300)}.input-ex-outlined-primary::placeholder{color:var(--ds__color__neutral-dark)}.input-ex-underline-primary{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__primary-main);border:none;border-bottom:1px solid var(--ds__palette__primary-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.input-ex-underline-primary{border-radius:var(--space-3)}}.input-ex-underline-primary[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.input-ex-underline-primary:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}.input-ex-underline-primary:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}.input-ex-underline-primary::placeholder{color:var(--ds__color__neutral-dark)}.input-ex-outlined-error{box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__error-main);border:1px solid var(--ds__palette__error-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){.input-ex-outlined-error{border-radius:var(--space-3)}}.input-ex-outlined-error[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}.input-ex-outlined-error:invalid{border:1px solid var(--ds__color__gray-300)}.input-ex-outlined-error:focus{border:1px solid var(--ds__color__gray-300)}.input-ex-outlined-error::placeholder{color:var(--ds__color__neutral-dark)}background:var(--ds__palette__success-main);color:var(--ds__palette__success-contrast);border-radius:2px;background:var(--ds__palette__error-main);color:var(--ds__palette__error-contrast);background:var(--ds__palette__neutral-main);color:var(--ds__palette__neutral-contrast);border-radius:var(--space-6);color:var(--ds__palette__warning-main);color:var(--ds__palette__neutral-main);border-radius:var(--space-4);color:var(--ds__palette__primary-main);border-radius:var(--space-1);color:var(--ds__palette__error-main);border:none;border-bottom:1px solid var(--ds__palette__error-main);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);box-sizing:border-box;outline:none;appearance:none;width:100%;padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__success-main);border:1px solid var(--ds__palette__success-main);box-shadow:none;caret-color:var(--ds__palette__primary-main)}@media (min-width:1024px){#InputDemo{border-radius:6px;border-radius:var(--space-8);border-radius:var(--space-6);border-radius:var(--space-2);border-radius:var(--space-3)}}@media (min-width:480px){#InputDemo{border-radius:4px}}@media (min-width:768px){#InputDemo{border-radius:6px}}@media (min-width:1280px){#InputDemo{border-radius:6px}}#InputDemo[aria-invalid=true]{border:none;border-bottom:1px solid var(--ds__palette__error-main)}#InputDemo:invalid{border:none;border-bottom:1px solid var(--ds__palette__error-main)}#InputDemo:focus{border:none;border-bottom:1px solid var(--ds__palette__primary-main)}#InputDemo:disabled,#InputDemo[aria-disabled=true]{color:var(--ds__color__neutral-dark)}#InputDemo:focus{shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}#InputDemo[aria-invalid=true]{border:1px solid var(--ds__color__gray-300)}#InputDemo:invalid{border:1px solid var(--ds__color__gray-300)}#InputDemo:focus{border:1px solid var(--ds__color__gray-300)}#InputDemo::placeholder{color:var(--ds__color__neutral-dark)}.navigation-card-link{color:var(--ds__palette__surface-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:space-between;padding:var(--density-4);gap:var(--density-4);border-radius:var(--space-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:0 2px 4px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.14);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(--space-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)}}@media (min-width:1024px){.nav-card-icon{border-radius:var(--space-3)}}.nav-card-text{display:flex;flex-direction:column;gap:var(--density-1);text-align:left}.nav-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;color:var(--ds__palette__surface-contrast)}.nav-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);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:1px solid var(--ds__color__gray-300);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:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}}}@media (min-width:1024px){.navigation-card-link{border-radius:var(--space-3)}}#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-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);font-weight:400;font-size:.85rem;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{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{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__secondary-light) 10%,transparent);padding:var(--density-1) var(--density-2);border-radius:var(--space-1);line-height:1}@media (min-width:1024px){#PageToolbar .page-toolbar__bp{border-radius:var(--space-2)}}#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);opacity:.7;line-height:1;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)}}.live-preview-box{background:color-mix(in srgb,var(--ds__palette__surface-dark) 5%,transparent);border-radius:var(--space-1);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;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}}@media (min-width:1024px){.live-preview-box{border-radius:var(--space-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:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.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{background:transparent;border:none;font-size:1.5rem;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(--space-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){.side-nav__link{border-radius:var(--space-2)}.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(--density-2);background:transparent;color:var(--ds__palette__surface-contrast);border:none;box-shadow:none;box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);border-radius:var(--space-2)}}@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;@media (min-width:1024px){.side-nav__menu{border-radius:var(--space-3)}}}}.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:.15;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(--density-2);border-radius:var(--space-2);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);width:100%;border-radius:var(--space-3);box-shadow:0 2px 4px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.14);transition:all .2s;overflow:hidden}@media (min-width:1024px){.uxdsl-card{border-radius:var(--space-3);border-radius:var(--space-4)}}@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(--density-2);border-radius:var(--space-2);background:var(--ds__palette__light-main);color:var(--ds__palette__light-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);width:var(--density-10);height:var(--density-10);border-radius:9999px;display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}@media (min-width:1024px){.logo-circle{border-radius:var(--space-3)}}.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:1px solid var(--ds__color__gray-300);display:flex;gap:var(--density-2)}.btn-primary{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);width:100%;justify-content:center}@media (min-width:1024px){.btn-primary{border-radius:var(--space-3)}}.btn-primary.is-selected,.btn-primary:hover,.btn-primary[aria-pressed=true],.btn-primary[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.btn-secondary{padding:var(--density-2);border-radius:var(--space-2);background:transparent;color:var(--ds__palette__neutral-main);border:1px solid var(--ds__palette__neutral-main);width:100%;justify-content:center}@media (min-width:1024px){.btn-secondary{border-radius:var(--space-3)}}.btn-secondary.is-selected,.btn-secondary[aria-pressed=true],.btn-secondary[aria-selected=true]{color:var(--ds__palette__primary-contrast);border:1px solid var(--ds__color__gray-300);background:var(--ds__palette__primary-main)}.btn-secondary:hover{border:1px solid var(--ds__color__gray-300);color:var(--ds__palette__primary-dark)}.demo-code-block{width:100%;max-width:600px;background:var(--ds__palette__surface-main);border-radius:var(--space-2);overflow:hidden;border:1px solid var(--ds__color__gray-300);box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}@media (min-width:1024px){.demo-code-block{border-radius:var(--space-3)}}.code-header{background:var(--ds__palette__primary-main);padding:var(--density-2) var(--density-3);border-bottom:1px solid var(--ds__color__gray-300);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(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:1px solid var(--ds__color__gray-300);box-shadow:none;padding:var(--density-4);border-radius:var(--space-3);background:var(--ds__palette__surface-main);display:flex;flex-direction:column;gap:var(--density-3)}@media (min-width:1024px){.demo-card{border-radius:var(--space-3);border-radius:var(--space-4)}}.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(--space-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)}@media (min-width:1024px){.demo-code{border-radius:var(--space-3)}}.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(--space-1);font-family:font(code);font-size:.85em;color:var(--ds__palette__primary-dark)}@media (min-width:1024px){.demo-table code{border-radius:var(--space-2)}}}#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(--space-2);background:transparent;color:var(--ds__palette__surface-contrast);border:none;box-shadow:none;padding:var(--density-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}@media (min-width:1024px){.step-card{border-radius:var(--space-3)}}.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(--space-2);background:transparent;color:var(--ds__palette__neutral-main);box-shadow:none;padding:var(--density-3);border-radius:var(--space-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)}@media (min-width:1024px){.info-box{border-radius:var(--space-3);border-radius:var(--space-2)}}.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:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.12)}}.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(--space-2);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);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:0 2px 4px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.14);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)}}}@media (min-width:1024px){.nav-card{border-radius:var(--space-3)}}.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(--space-2);background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);width:100%;flex:1;display:grid;place-items:center;gap:var(--density-8);background:transparent;border-bottom:1px solid var(--ds__color__gray-300);padding:var(--density-8)}@media (min-width:1024px){.hero-surface{border-radius:var(--space-3)}}.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:var(--density-30);height:var(--density-30);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)}}.content-container{padding:var(--density-6) var(--density-4) var(--density-10);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--density-4);background:var(--ds__palette__surface-main);flex:0 0 auto}.actions{margin-top:0}.get-started-btn{padding:var(--density-2);border-radius:var(--space-2);background:var(--ds__palette__primary-main);color:var(--ds__palette__primary-contrast);border:var(--ds__palette__surface-dark);display:inline-flex;align-items:center;gap:var(--density-2);padding-left:var(--density-6);padding-right:var(--density-6);font-weight:600;border-radius:9999px;transition:transform .2s;&:hover{transform:translateY(-2px);box-shadow:0 4px 6px rgba(0,0,0,.08),0 10px 15px rgba(0,0,0,.16)}}@media (min-width:1024px){.get-started-btn{border-radius:var(--space-3)}}.get-started-btn.is-selected,.get-started-btn:hover,.get-started-btn[aria-pressed=true],.get-started-btn[aria-selected=true]{color:var(--ds__palette__primary-contrast);background:var(--ds__palette__primary-dark)}.intro-section{max-width:600px;margin:var(--density-4) 0}.intro-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__text-secondary);text-align:center}.nav-grid{display:grid;grid-template-columns:1fr;margin-top:var(--density-6);margin-bottom:var(--density-2);padding-left:var(--density-2);padding-right:var(--density-2);@media (min-width:768px){grid-template-columns:repeat(2,1fr)}}.demo-section,.nav-grid{gap:var(--density-4);width:100%;max-width:900px}.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:1px solid var(--ds__color__gray-300);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{background:var(--ds__palette__surface-main);color:var(--ds__palette__surface-contrast);border:var(--ds__palette__surface-dark);padding:var(--space-3);border-radius:var(--space-2);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}@media (min-width:1024px){.palette-swatch{border-radius:var(--space-3)}}.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:#15803d;--ds__palette__primary-light:#66bb6a;--ds__palette__primary-dark:#166534;--ds__palette__primary-contrast:#fff;--ds__palette__secondary-main:#d97706;--ds__palette__secondary-light:#ffa726;--ds__palette__secondary-dark:#f57c00;--ds__palette__secondary-contrast:#000;--ds__palette__surface-main:#fff;--ds__palette__surface-light:#fafaf9;--ds__palette__surface-dark:#e7e5e4;--ds__palette__surface-contrast:#1c1917;--ds__palette__tertiary-main:#a8a29e;--ds__palette__tertiary-light:#d6d3d1;--ds__palette__tertiary-dark:#57534e;--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:#0d9488;--ds__palette__info-light:#14b8a6;--ds__palette__info-dark:#0f766e;--ds__palette__info-contrast:#fff;--ds__palette__warning-main:#f97316;--ds__palette__warning-light:#fb923c;--ds__palette__warning-dark:#ea580c;--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:#1c1917;--ds__palette__dark-light:#292524;--ds__palette__dark-dark:#0c0a09;--ds__palette__dark-contrast:#fff;--ds__palette__neutral-main:#78716c;--ds__palette__neutral-light:#d6d3d1;--ds__palette__neutral-dark:#44403c;--ds__palette__neutral-contrast:#000;--ds__palette__light-main:#f5f5f4;--ds__palette__light-light:#fff;--ds__palette__light-dark:#e7e5e4;--ds__palette__light-contrast:#000;--1:0.125rem;--2:0.25rem;--3:0.5rem;--4:0.75rem;--5:1rem;--6:1.5rem;--7:2rem;--8:2.5rem;--9:3.125rem;--10:3.875rem;--11:4.875rem;--12:6.125rem;--13:7.75rem;--14:9.75rem;--15:12.25rem;--16:15.375rem;--font-code:"JetBrains Mono","SF Mono",Menlo,monospace;--font-ui:Inter,sans-serif;--font-code:monospace}@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: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: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);--density-15:var(--space-17)}}#uxdsl-bp-meta{--bp:'{"xs":0,"sm":480,"md":768,"lg":1024,"xl":1280}';display:none}