:root {
  --design-primary-50: #f0f6ff;
  --design-primary-100: #e0ecff;
  --design-primary-200: #c1d9ff;
  --design-primary-300: #98bfff;
  --design-primary-400: #68a1fd;
  --design-primary-500: #4a84e3;
  --design-primary-600: #326bc8;
  --design-primary-700: #1f53a9;
  --design-primary-800: #0f3e88;
  --design-primary-900: #022967;
  --design-primary-950: #001743;
  --design-neutral-50: #f3f5f8;
  --design-neutral-100: #e8ebf0;
  --design-neutral-200: #d3d8df;
  --design-neutral-300: #b8bec7;
  --design-neutral-400: #9ba2ac;
  --design-neutral-500: #808791;
  --design-neutral-600: #696f79;
  --design-neutral-700: #535862;
  --design-neutral-800: #3e434b;
  --design-neutral-900: #2a2e35;
  --design-neutral-950: #181b20;
  --design-surface-1: #f2f7ff;
  --design-surface-2: #fcfdff;
  --design-surface-3: #e3eaf6;
  --design-surface-hover: #d9e0ec;
  --design-surface-active: #cfd6e2;
  --design-text: #181d26;
  --design-text-muted: #4f5660;
  --design-border: #d1d8e4;
  --design-border-strong: #808791;
  --design-primary: #0d47a1;
  --design-on-primary: #ffffff;
  --design-primary-hover: #003b93;
  --design-primary-active: #00327e;
  --design-frame: #003b92;
  --design-on-frame: #ffffff;
  --design-frame-hover: #00327d;
  --design-frame-active: #002869;
  --design-link: #1750aa;
  --design-success: #006b19;
  --design-on-success: #ffffff;
  --design-success-hover: #005e15;
  --design-success-active: #005111;
  --design-success-subtle: #deebe3;
  --design-success-border: #97c3a3;
  --design-warning: #7e5400;
  --design-on-warning: #ffffff;
  --design-warning-hover: #704a00;
  --design-warning-active: #614000;
  --design-warning-subtle: #ede9e0;
  --design-warning-border: #cab999;
  --design-danger: #a9312c;
  --design-on-danger: #ffffff;
  --design-danger-hover: #9b2320;
  --design-danger-active: #8e1214;
  --design-danger-subtle: #f2e5e6;
  --design-danger-border: #dbabab;
  --design-info: #00619a;
  --design-on-info: #ffffff;
  --design-info-hover: #005589;
  --design-info-active: #004a77;
  --design-info-subtle: #deeaf3;
  --design-info-border: #97bfd7;
  --design-primary-50-rgb: 240, 246, 255;
  --design-primary-100-rgb: 224, 236, 255;
  --design-primary-200-rgb: 193, 217, 255;
  --design-primary-300-rgb: 152, 191, 255;
  --design-primary-400-rgb: 104, 161, 253;
  --design-primary-500-rgb: 74, 132, 227;
  --design-primary-600-rgb: 50, 107, 200;
  --design-primary-700-rgb: 31, 83, 169;
  --design-primary-800-rgb: 15, 62, 136;
  --design-primary-900-rgb: 2, 41, 103;
  --design-primary-950-rgb: 0, 23, 67;
  --design-neutral-50-rgb: 243, 245, 248;
  --design-neutral-100-rgb: 232, 235, 240;
  --design-neutral-200-rgb: 211, 216, 223;
  --design-neutral-300-rgb: 184, 190, 199;
  --design-neutral-400-rgb: 155, 162, 172;
  --design-neutral-500-rgb: 128, 135, 145;
  --design-neutral-600-rgb: 105, 111, 121;
  --design-neutral-700-rgb: 83, 88, 98;
  --design-neutral-800-rgb: 62, 67, 75;
  --design-neutral-900-rgb: 42, 46, 53;
  --design-neutral-950-rgb: 24, 27, 32;
  --design-surface-1-rgb: 242, 247, 255;
  --design-surface-2-rgb: 252, 253, 255;
  --design-surface-3-rgb: 227, 234, 246;
  --design-surface-hover-rgb: 217, 224, 236;
  --design-surface-active-rgb: 207, 214, 226;
  --design-text-rgb: 24, 29, 38;
  --design-text-muted-rgb: 79, 86, 96;
  --design-border-rgb: 209, 216, 228;
  --design-border-strong-rgb: 128, 135, 145;
  --design-primary-rgb: 13, 71, 161;
  --design-on-primary-rgb: 255, 255, 255;
  --design-primary-hover-rgb: 0, 59, 147;
  --design-primary-active-rgb: 0, 50, 126;
  --design-frame-rgb: 0, 59, 146;
  --design-on-frame-rgb: 255, 255, 255;
  --design-frame-hover-rgb: 0, 50, 125;
  --design-frame-active-rgb: 0, 40, 105;
  --design-link-rgb: 23, 80, 170;
  --design-success-rgb: 0, 107, 25;
  --design-on-success-rgb: 255, 255, 255;
  --design-success-hover-rgb: 0, 94, 21;
  --design-success-active-rgb: 0, 81, 17;
  --design-success-subtle-rgb: 222, 235, 227;
  --design-success-border-rgb: 151, 195, 163;
  --design-warning-rgb: 126, 84, 0;
  --design-on-warning-rgb: 255, 255, 255;
  --design-warning-hover-rgb: 112, 74, 0;
  --design-warning-active-rgb: 97, 64, 0;
  --design-warning-subtle-rgb: 237, 233, 224;
  --design-warning-border-rgb: 202, 185, 153;
  --design-danger-rgb: 169, 49, 44;
  --design-on-danger-rgb: 255, 255, 255;
  --design-danger-hover-rgb: 155, 35, 32;
  --design-danger-active-rgb: 142, 18, 20;
  --design-danger-subtle-rgb: 242, 229, 230;
  --design-danger-border-rgb: 219, 171, 171;
  --design-info-rgb: 0, 97, 154;
  --design-on-info-rgb: 255, 255, 255;
  --design-info-hover-rgb: 0, 85, 137;
  --design-info-active-rgb: 0, 74, 119;
  --design-info-subtle-rgb: 222, 234, 243;
  --design-info-border-rgb: 151, 191, 215;
  --design-shadow-color: 0, 0, 0, 0.10;
  --design-invert: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-design-theme="light"]) {
  --design-primary-50: #001743;
  --design-primary-100: #022967;
  --design-primary-200: #0f3e88;
  --design-primary-300: #1f53a9;
  --design-primary-400: #326bc8;
  --design-primary-500: #4a84e3;
  --design-primary-600: #68a1fd;
  --design-primary-700: #98bfff;
  --design-primary-800: #c1d9ff;
  --design-primary-900: #e0ecff;
  --design-primary-950: #f0f6ff;
  --design-neutral-50: #181b20;
  --design-neutral-100: #2a2e35;
  --design-neutral-200: #3e434b;
  --design-neutral-300: #535862;
  --design-neutral-400: #696f79;
  --design-neutral-500: #808791;
  --design-neutral-600: #9ba2ac;
  --design-neutral-700: #b8bec7;
  --design-neutral-800: #d3d8df;
  --design-neutral-900: #e8ebf0;
  --design-neutral-950: #f3f5f8;
  --design-surface-1: #0b1017;
  --design-surface-2: #151a22;
  --design-surface-3: #1f242d;
  --design-surface-hover: #292e37;
  --design-surface-active: #333841;
  --design-text: #e4ecf8;
  --design-text-muted: #9ea5b0;
  --design-border: #2e333c;
  --design-border-strong: #6b727c;
  --design-primary: #447ddc;
  --design-on-primary: #000000;
  --design-primary-hover: #5089ea;
  --design-primary-active: #5c96f7;
  --design-frame: #002869;
  --design-on-frame: #ffffff;
  --design-frame-hover: #001f55;
  --design-frame-active: #001743;
  --design-link: #67a0ff;
  --design-success: #67c76c;
  --design-on-success: #000000;
  --design-success-hover: #74d478;
  --design-success-active: #81e185;
  --design-success-subtle: #1f2f2b;
  --design-success-border: #365f40;
  --design-warning: #e79d08;
  --design-on-warning: #000000;
  --design-warning-hover: #f5aa27;
  --design-warning-active: #ffb849;
  --design-warning-subtle: #2e2a1f;
  --design-warning-border: #694e18;
  --design-danger: #ff8579;
  --design-on-danger: #000000;
  --design-danger-hover: #ff9b90;
  --design-danger-active: #ffb0a6;
  --design-danger-subtle: #31272c;
  --design-danger-border: #734545;
  --design-info: #59b6ff;
  --design-on-info: #000000;
  --design-info-hover: #79c2ff;
  --design-info-active: #95ceff;
  --design-info-subtle: #1d2d3d;
  --design-info-border: #30587a;
  --design-primary-50-rgb: 0, 23, 67;
  --design-primary-100-rgb: 2, 41, 103;
  --design-primary-200-rgb: 15, 62, 136;
  --design-primary-300-rgb: 31, 83, 169;
  --design-primary-400-rgb: 50, 107, 200;
  --design-primary-500-rgb: 74, 132, 227;
  --design-primary-600-rgb: 104, 161, 253;
  --design-primary-700-rgb: 152, 191, 255;
  --design-primary-800-rgb: 193, 217, 255;
  --design-primary-900-rgb: 224, 236, 255;
  --design-primary-950-rgb: 240, 246, 255;
  --design-neutral-50-rgb: 24, 27, 32;
  --design-neutral-100-rgb: 42, 46, 53;
  --design-neutral-200-rgb: 62, 67, 75;
  --design-neutral-300-rgb: 83, 88, 98;
  --design-neutral-400-rgb: 105, 111, 121;
  --design-neutral-500-rgb: 128, 135, 145;
  --design-neutral-600-rgb: 155, 162, 172;
  --design-neutral-700-rgb: 184, 190, 199;
  --design-neutral-800-rgb: 211, 216, 223;
  --design-neutral-900-rgb: 232, 235, 240;
  --design-neutral-950-rgb: 243, 245, 248;
  --design-surface-1-rgb: 11, 16, 23;
  --design-surface-2-rgb: 21, 26, 34;
  --design-surface-3-rgb: 31, 36, 45;
  --design-surface-hover-rgb: 41, 46, 55;
  --design-surface-active-rgb: 51, 56, 65;
  --design-text-rgb: 228, 236, 248;
  --design-text-muted-rgb: 158, 165, 176;
  --design-border-rgb: 46, 51, 60;
  --design-border-strong-rgb: 107, 114, 124;
  --design-primary-rgb: 68, 125, 220;
  --design-on-primary-rgb: 0, 0, 0;
  --design-primary-hover-rgb: 80, 137, 234;
  --design-primary-active-rgb: 92, 150, 247;
  --design-frame-rgb: 0, 40, 105;
  --design-on-frame-rgb: 255, 255, 255;
  --design-frame-hover-rgb: 0, 31, 85;
  --design-frame-active-rgb: 0, 23, 67;
  --design-link-rgb: 103, 160, 255;
  --design-success-rgb: 103, 199, 108;
  --design-on-success-rgb: 0, 0, 0;
  --design-success-hover-rgb: 116, 212, 120;
  --design-success-active-rgb: 129, 225, 133;
  --design-success-subtle-rgb: 31, 47, 43;
  --design-success-border-rgb: 54, 95, 64;
  --design-warning-rgb: 231, 157, 8;
  --design-on-warning-rgb: 0, 0, 0;
  --design-warning-hover-rgb: 245, 170, 39;
  --design-warning-active-rgb: 255, 184, 73;
  --design-warning-subtle-rgb: 46, 42, 31;
  --design-warning-border-rgb: 105, 78, 24;
  --design-danger-rgb: 255, 133, 121;
  --design-on-danger-rgb: 0, 0, 0;
  --design-danger-hover-rgb: 255, 155, 144;
  --design-danger-active-rgb: 255, 176, 166;
  --design-danger-subtle-rgb: 49, 39, 44;
  --design-danger-border-rgb: 115, 69, 69;
  --design-info-rgb: 89, 182, 255;
  --design-on-info-rgb: 0, 0, 0;
  --design-info-hover-rgb: 121, 194, 255;
  --design-info-active-rgb: 149, 206, 255;
  --design-info-subtle-rgb: 29, 45, 61;
  --design-info-border-rgb: 48, 88, 122;
  --design-shadow-color: 0, 0, 0, 0.45;
  --design-invert: 1;
  }
}
:root[data-design-theme="dark"] {
  --design-primary-50: #001743;
  --design-primary-100: #022967;
  --design-primary-200: #0f3e88;
  --design-primary-300: #1f53a9;
  --design-primary-400: #326bc8;
  --design-primary-500: #4a84e3;
  --design-primary-600: #68a1fd;
  --design-primary-700: #98bfff;
  --design-primary-800: #c1d9ff;
  --design-primary-900: #e0ecff;
  --design-primary-950: #f0f6ff;
  --design-neutral-50: #181b20;
  --design-neutral-100: #2a2e35;
  --design-neutral-200: #3e434b;
  --design-neutral-300: #535862;
  --design-neutral-400: #696f79;
  --design-neutral-500: #808791;
  --design-neutral-600: #9ba2ac;
  --design-neutral-700: #b8bec7;
  --design-neutral-800: #d3d8df;
  --design-neutral-900: #e8ebf0;
  --design-neutral-950: #f3f5f8;
  --design-surface-1: #0b1017;
  --design-surface-2: #151a22;
  --design-surface-3: #1f242d;
  --design-surface-hover: #292e37;
  --design-surface-active: #333841;
  --design-text: #e4ecf8;
  --design-text-muted: #9ea5b0;
  --design-border: #2e333c;
  --design-border-strong: #6b727c;
  --design-primary: #447ddc;
  --design-on-primary: #000000;
  --design-primary-hover: #5089ea;
  --design-primary-active: #5c96f7;
  --design-frame: #002869;
  --design-on-frame: #ffffff;
  --design-frame-hover: #001f55;
  --design-frame-active: #001743;
  --design-link: #67a0ff;
  --design-success: #67c76c;
  --design-on-success: #000000;
  --design-success-hover: #74d478;
  --design-success-active: #81e185;
  --design-success-subtle: #1f2f2b;
  --design-success-border: #365f40;
  --design-warning: #e79d08;
  --design-on-warning: #000000;
  --design-warning-hover: #f5aa27;
  --design-warning-active: #ffb849;
  --design-warning-subtle: #2e2a1f;
  --design-warning-border: #694e18;
  --design-danger: #ff8579;
  --design-on-danger: #000000;
  --design-danger-hover: #ff9b90;
  --design-danger-active: #ffb0a6;
  --design-danger-subtle: #31272c;
  --design-danger-border: #734545;
  --design-info: #59b6ff;
  --design-on-info: #000000;
  --design-info-hover: #79c2ff;
  --design-info-active: #95ceff;
  --design-info-subtle: #1d2d3d;
  --design-info-border: #30587a;
  --design-primary-50-rgb: 0, 23, 67;
  --design-primary-100-rgb: 2, 41, 103;
  --design-primary-200-rgb: 15, 62, 136;
  --design-primary-300-rgb: 31, 83, 169;
  --design-primary-400-rgb: 50, 107, 200;
  --design-primary-500-rgb: 74, 132, 227;
  --design-primary-600-rgb: 104, 161, 253;
  --design-primary-700-rgb: 152, 191, 255;
  --design-primary-800-rgb: 193, 217, 255;
  --design-primary-900-rgb: 224, 236, 255;
  --design-primary-950-rgb: 240, 246, 255;
  --design-neutral-50-rgb: 24, 27, 32;
  --design-neutral-100-rgb: 42, 46, 53;
  --design-neutral-200-rgb: 62, 67, 75;
  --design-neutral-300-rgb: 83, 88, 98;
  --design-neutral-400-rgb: 105, 111, 121;
  --design-neutral-500-rgb: 128, 135, 145;
  --design-neutral-600-rgb: 155, 162, 172;
  --design-neutral-700-rgb: 184, 190, 199;
  --design-neutral-800-rgb: 211, 216, 223;
  --design-neutral-900-rgb: 232, 235, 240;
  --design-neutral-950-rgb: 243, 245, 248;
  --design-surface-1-rgb: 11, 16, 23;
  --design-surface-2-rgb: 21, 26, 34;
  --design-surface-3-rgb: 31, 36, 45;
  --design-surface-hover-rgb: 41, 46, 55;
  --design-surface-active-rgb: 51, 56, 65;
  --design-text-rgb: 228, 236, 248;
  --design-text-muted-rgb: 158, 165, 176;
  --design-border-rgb: 46, 51, 60;
  --design-border-strong-rgb: 107, 114, 124;
  --design-primary-rgb: 68, 125, 220;
  --design-on-primary-rgb: 0, 0, 0;
  --design-primary-hover-rgb: 80, 137, 234;
  --design-primary-active-rgb: 92, 150, 247;
  --design-frame-rgb: 0, 40, 105;
  --design-on-frame-rgb: 255, 255, 255;
  --design-frame-hover-rgb: 0, 31, 85;
  --design-frame-active-rgb: 0, 23, 67;
  --design-link-rgb: 103, 160, 255;
  --design-success-rgb: 103, 199, 108;
  --design-on-success-rgb: 0, 0, 0;
  --design-success-hover-rgb: 116, 212, 120;
  --design-success-active-rgb: 129, 225, 133;
  --design-success-subtle-rgb: 31, 47, 43;
  --design-success-border-rgb: 54, 95, 64;
  --design-warning-rgb: 231, 157, 8;
  --design-on-warning-rgb: 0, 0, 0;
  --design-warning-hover-rgb: 245, 170, 39;
  --design-warning-active-rgb: 255, 184, 73;
  --design-warning-subtle-rgb: 46, 42, 31;
  --design-warning-border-rgb: 105, 78, 24;
  --design-danger-rgb: 255, 133, 121;
  --design-on-danger-rgb: 0, 0, 0;
  --design-danger-hover-rgb: 255, 155, 144;
  --design-danger-active-rgb: 255, 176, 166;
  --design-danger-subtle-rgb: 49, 39, 44;
  --design-danger-border-rgb: 115, 69, 69;
  --design-info-rgb: 89, 182, 255;
  --design-on-info-rgb: 0, 0, 0;
  --design-info-hover-rgb: 121, 194, 255;
  --design-info-active-rgb: 149, 206, 255;
  --design-info-subtle-rgb: 29, 45, 61;
  --design-info-border-rgb: 48, 88, 122;
  --design-shadow-color: 0, 0, 0, 0.45;
  --design-invert: 1;
}
:root {
  --design-font: system-ui, -apple-system, "Segoe UI", Roboto, "Liberation Sans", Arial, sans-serif;
  --design-radius-sm: 4px;
  --design-radius: 8px;
  --design-radius-lg: 12px;
  --design-space-1: 4px;
  --design-space-2: 8px;
  --design-space-3: 12px;
  --design-space-4: 16px;
  --design-space-5: 24px;
  --design-space-6: 32px;
  --design-shadow-1: 0 1px 2px rgba(var(--design-shadow-color));
  --design-shadow-2: 0 2px 8px rgba(var(--design-shadow-color));
  --design-shadow-3: 0 8px 24px rgba(var(--design-shadow-color));
  --design-focus-ring: 0 0 0 3px color-mix(in srgb, var(--design-link) 45%, transparent);
  --design-focus-ring-inset: inset 0 0 0 1px var(--design-link);
}
:root {
  --bs-font-sans-serif: var(--design-font);
  --bs-body-font-family: var(--design-font);
  --bs-body-color: var(--design-text);
  --bs-body-color-rgb: var(--design-text-rgb);
  --bs-body-bg: var(--design-surface-1);
  --bs-body-bg-rgb: var(--design-surface-1-rgb);
  --bs-emphasis-color: var(--design-text);
  --bs-emphasis-color-rgb: var(--design-text-rgb);
  --bs-secondary-color: var(--design-text-muted);
  --bs-secondary-color-rgb: var(--design-text-muted-rgb);
  --bs-secondary-bg: var(--design-surface-3);
  --bs-secondary-bg-rgb: var(--design-surface-3-rgb);
  --bs-tertiary-color: var(--design-text-muted);
  --bs-tertiary-color-rgb: var(--design-text-muted-rgb);
  --bs-tertiary-bg: var(--design-surface-2);
  --bs-tertiary-bg-rgb: var(--design-surface-2-rgb);
  --bs-primary: var(--design-primary);
  --bs-primary-rgb: var(--design-primary-rgb);
  --bs-secondary: var(--design-neutral-600);
  --bs-secondary-rgb: var(--design-neutral-600-rgb);
  --bs-success: var(--design-success);
  --bs-success-rgb: var(--design-success-rgb);
  --bs-success-text-emphasis: var(--design-success);
  --bs-success-bg-subtle: var(--design-success-subtle);
  --bs-success-border-subtle: var(--design-success-border);
  --bs-warning: var(--design-warning);
  --bs-warning-rgb: var(--design-warning-rgb);
  --bs-warning-text-emphasis: var(--design-warning);
  --bs-warning-bg-subtle: var(--design-warning-subtle);
  --bs-warning-border-subtle: var(--design-warning-border);
  --bs-danger: var(--design-danger);
  --bs-danger-rgb: var(--design-danger-rgb);
  --bs-danger-text-emphasis: var(--design-danger);
  --bs-danger-bg-subtle: var(--design-danger-subtle);
  --bs-danger-border-subtle: var(--design-danger-border);
  --bs-info: var(--design-info);
  --bs-info-rgb: var(--design-info-rgb);
  --bs-info-text-emphasis: var(--design-info);
  --bs-info-bg-subtle: var(--design-info-subtle);
  --bs-info-border-subtle: var(--design-info-border);
  --bs-primary-text-emphasis: var(--design-link);
  --bs-primary-bg-subtle: var(--design-primary-100);
  --bs-primary-border-subtle: var(--design-primary-300);
  --bs-light: var(--design-surface-2);
  --bs-light-rgb: var(--design-surface-2-rgb);
  --bs-dark: var(--design-neutral-900);
  --bs-dark-rgb: var(--design-neutral-900-rgb);
  --bs-white: var(--design-surface-2);
  --bs-white-rgb: var(--design-surface-2-rgb);
  --bs-black: var(--design-text);
  --bs-black-rgb: var(--design-text-rgb);
  --bs-gray: var(--design-neutral-500);
  --bs-gray-dark: var(--design-neutral-800);
  --bs-gray-100: var(--design-neutral-100);
  --bs-gray-200: var(--design-neutral-200);
  --bs-gray-300: var(--design-neutral-300);
  --bs-gray-400: var(--design-neutral-400);
  --bs-gray-500: var(--design-neutral-500);
  --bs-gray-600: var(--design-neutral-600);
  --bs-gray-700: var(--design-neutral-700);
  --bs-gray-800: var(--design-neutral-800);
  --bs-gray-900: var(--design-neutral-900);
  --bs-link-color: var(--design-link);
  --bs-link-color-rgb: var(--design-link-rgb);
  --bs-link-hover-color: var(--design-primary-800);
  --bs-link-hover-color-rgb: var(--design-primary-800-rgb);
  --bs-code-color: var(--design-danger);
  --bs-highlight-color: var(--design-text);
  --bs-highlight-bg: var(--design-warning-subtle);
  --bs-border-color: var(--design-border);
  --bs-border-color-translucent: rgba(var(--design-text-rgb), 0.15);
  --bs-border-radius-sm: var(--design-radius-sm);
  --bs-border-radius: var(--design-radius);
  --bs-border-radius-lg: var(--design-radius-lg);
  --bs-box-shadow-sm: var(--design-shadow-1);
  --bs-box-shadow: var(--design-shadow-2);
  --bs-box-shadow-lg: var(--design-shadow-3);
  --bs-focus-ring-color: color-mix(in srgb, var(--design-link) 45%, transparent);
  --bs-table-color: var(--design-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--design-border);
  --bs-table-striped-bg: var(--design-surface-3);
  --bs-table-hover-bg: rgba(var(--design-primary-rgb), 0.06);
}
@layer infinito-design {
  :root {
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-design-theme="light"]) {
      color-scheme: dark;
    }
  }
  :root[data-design-theme="dark"] {
    color-scheme: dark;
  }
  html {
    accent-color: var(--design-primary);
    scrollbar-color: var(--design-neutral-400) var(--design-surface-1);
  }
  body {
    background-color: var(--design-surface-1);
    color: var(--design-text);
    font-family: var(--design-font);
  }
  ::selection {
    background-color: var(--design-primary-200);
    color: var(--design-text);
  }
  a {
    color: var(--design-link);
  }
  a:hover {
    color: var(--bs-link-hover-color);
  }
  :focus-visible {
    outline: 2px solid var(--design-focus, var(--design-link));
    outline-offset: 2px;
  }
  button {
    background-color: var(--design-surface-3);
    color: var(--design-text);
    border: 1px solid var(--design-border);
    border-radius: var(--design-radius);
  }
  button:hover {
    background-color: var(--design-surface-hover);
  }
  button:active {
    background-color: var(--design-surface-active);
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select {
    background-color: var(--design-surface-2);
    color: var(--design-text);
    border: 1px solid var(--design-border-strong);
    border-radius: var(--design-radius);
  }
  input::placeholder,
  textarea::placeholder {
    color: var(--design-text-muted);
  }
  input:hover,
  textarea:hover,
  select:hover {
    border-color: var(--design-primary);
  }
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    border-color: var(--design-focus, var(--design-link));
    outline-offset: -2px;
  }
  input:user-invalid,
  textarea:user-invalid,
  select:user-invalid {
    border-color: var(--design-danger);
  }
  input:disabled,
  textarea:disabled,
  select:disabled {
    background-color: var(--design-surface-3);
    color: var(--design-text-muted);
  }
  option {
    background-color: var(--design-surface-2);
    color: var(--design-text);
  }
  th, td {
    border-color: var(--design-border);
  }
  thead {
    background-color: var(--design-surface-3);
    color: var(--design-text);
  }
}