:root {
  --design-primary-50: #eef6ff;
  --design-primary-100: #deedfe;
  --design-primary-200: #c4daf4;
  --design-primary-300: #a4c1e2;
  --design-primary-400: #83a5cb;
  --design-primary-500: #6789b0;
  --design-primary-600: #507197;
  --design-primary-700: #3b5a7d;
  --design-primary-800: #294462;
  --design-primary-900: #192f48;
  --design-primary-950: #0b1b2e;
  --design-neutral-50: #f4f5f6;
  --design-neutral-100: #e9ebed;
  --design-neutral-200: #d5d8db;
  --design-neutral-300: #bbbec2;
  --design-neutral-400: #9ea2a6;
  --design-neutral-500: #82878b;
  --design-neutral-600: #6b6f74;
  --design-neutral-700: #55585d;
  --design-neutral-800: #404346;
  --design-neutral-900: #2c2e31;
  --design-neutral-950: #191b1d;
  --design-surface-1: #f3f7fd;
  --design-surface-2: #fcfeff;
  --design-surface-3: #e5eaef;
  --design-surface-hover: #dce0e5;
  --design-surface-active: #d2d6db;
  --design-text: #1a1d21;
  --design-text-muted: #52565a;
  --design-border: #d3d8dd;
  --design-border-strong: #82878b;
  --design-primary: #001f3f;
  --design-on-primary: #ffffff;
  --design-primary-hover: #00162f;
  --design-primary-active: #000d20;
  --design-frame: #001f3f;
  --design-on-frame: #ffffff;
  --design-frame-hover: #00162f;
  --design-frame-active: #000d20;
  --design-link: #37577c;
  --design-success: #2a692f;
  --design-on-success: #ffffff;
  --design-success-hover: #1d5d24;
  --design-success-active: #0f5218;
  --design-success-subtle: #e3ece6;
  --design-success-border: #a8c2ac;
  --design-warning: #7e5400;
  --design-on-warning: #ffffff;
  --design-warning-hover: #704a00;
  --design-warning-active: #614000;
  --design-warning-subtle: #edeae0;
  --design-warning-border: #caba99;
  --design-danger: #95443d;
  --design-on-danger: #ffffff;
  --design-danger-hover: #883832;
  --design-danger-active: #7b2d28;
  --design-danger-subtle: #f0e8e8;
  --design-danger-border: #d3b4b1;
  --design-info: #156195;
  --design-on-info: #ffffff;
  --design-info-hover: #005588;
  --design-info-active: #004a77;
  --design-info-subtle: #e0ebf2;
  --design-info-border: #a0bfd5;
  --design-primary-50-rgb: 238, 246, 255;
  --design-primary-100-rgb: 222, 237, 254;
  --design-primary-200-rgb: 196, 218, 244;
  --design-primary-300-rgb: 164, 193, 226;
  --design-primary-400-rgb: 131, 165, 203;
  --design-primary-500-rgb: 103, 137, 176;
  --design-primary-600-rgb: 80, 113, 151;
  --design-primary-700-rgb: 59, 90, 125;
  --design-primary-800-rgb: 41, 68, 98;
  --design-primary-900-rgb: 25, 47, 72;
  --design-primary-950-rgb: 11, 27, 46;
  --design-neutral-50-rgb: 244, 245, 246;
  --design-neutral-100-rgb: 233, 235, 237;
  --design-neutral-200-rgb: 213, 216, 219;
  --design-neutral-300-rgb: 187, 190, 194;
  --design-neutral-400-rgb: 158, 162, 166;
  --design-neutral-500-rgb: 130, 135, 139;
  --design-neutral-600-rgb: 107, 111, 116;
  --design-neutral-700-rgb: 85, 88, 93;
  --design-neutral-800-rgb: 64, 67, 70;
  --design-neutral-900-rgb: 44, 46, 49;
  --design-neutral-950-rgb: 25, 27, 29;
  --design-surface-1-rgb: 243, 247, 253;
  --design-surface-2-rgb: 252, 254, 255;
  --design-surface-3-rgb: 229, 234, 239;
  --design-surface-hover-rgb: 220, 224, 229;
  --design-surface-active-rgb: 210, 214, 219;
  --design-text-rgb: 26, 29, 33;
  --design-text-muted-rgb: 82, 86, 90;
  --design-border-rgb: 211, 216, 221;
  --design-border-strong-rgb: 130, 135, 139;
  --design-primary-rgb: 0, 31, 63;
  --design-on-primary-rgb: 255, 255, 255;
  --design-primary-hover-rgb: 0, 22, 47;
  --design-primary-active-rgb: 0, 13, 32;
  --design-frame-rgb: 0, 31, 63;
  --design-on-frame-rgb: 255, 255, 255;
  --design-frame-hover-rgb: 0, 22, 47;
  --design-frame-active-rgb: 0, 13, 32;
  --design-link-rgb: 55, 87, 124;
  --design-success-rgb: 42, 105, 47;
  --design-on-success-rgb: 255, 255, 255;
  --design-success-hover-rgb: 29, 93, 36;
  --design-success-active-rgb: 15, 82, 24;
  --design-success-subtle-rgb: 227, 236, 230;
  --design-success-border-rgb: 168, 194, 172;
  --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, 234, 224;
  --design-warning-border-rgb: 202, 186, 153;
  --design-danger-rgb: 149, 68, 61;
  --design-on-danger-rgb: 255, 255, 255;
  --design-danger-hover-rgb: 136, 56, 50;
  --design-danger-active-rgb: 123, 45, 40;
  --design-danger-subtle-rgb: 240, 232, 232;
  --design-danger-border-rgb: 211, 180, 177;
  --design-info-rgb: 21, 97, 149;
  --design-on-info-rgb: 255, 255, 255;
  --design-info-hover-rgb: 0, 85, 136;
  --design-info-active-rgb: 0, 74, 119;
  --design-info-subtle-rgb: 224, 235, 242;
  --design-info-border-rgb: 160, 191, 213;
  --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: #0b1b2e;
  --design-primary-100: #192f48;
  --design-primary-200: #294462;
  --design-primary-300: #3b5a7d;
  --design-primary-400: #507197;
  --design-primary-500: #6789b0;
  --design-primary-600: #83a5cb;
  --design-primary-700: #a4c1e2;
  --design-primary-800: #c4daf4;
  --design-primary-900: #deedfe;
  --design-primary-950: #eef6ff;
  --design-neutral-50: #191b1d;
  --design-neutral-100: #2c2e31;
  --design-neutral-200: #404346;
  --design-neutral-300: #55585d;
  --design-neutral-400: #6b6f74;
  --design-neutral-500: #82878b;
  --design-neutral-600: #9ea2a6;
  --design-neutral-700: #bbbec2;
  --design-neutral-800: #d5d8db;
  --design-neutral-900: #e9ebed;
  --design-neutral-950: #f4f5f6;
  --design-surface-1: #0d1013;
  --design-surface-2: #171a1d;
  --design-surface-3: #212428;
  --design-surface-hover: #2b2e32;
  --design-surface-active: #35383c;
  --design-text: #e7ecf1;
  --design-text-muted: #a1a5aa;
  --design-border: #303337;
  --design-border-strong: #6e7277;
  --design-primary: #6183aa;
  --design-on-primary: #000000;
  --design-primary-hover: #6d8fb7;
  --design-primary-active: #789bc4;
  --design-frame: #0f2f50;
  --design-on-frame: #ffffff;
  --design-frame-hover: #042545;
  --design-frame-active: #001b38;
  --design-link: #80a3cc;
  --design-success: #80c182;
  --design-on-success: #000000;
  --design-success-hover: #8cce8e;
  --design-success-active: #99db9b;
  --design-success-subtle: #242e29;
  --design-success-border: #415d45;
  --design-warning: #d7a459;
  --design-on-warning: #000000;
  --design-warning-hover: #e4b166;
  --design-warning-active: #f2bd72;
  --design-warning-subtle: #2e2b24;
  --design-warning-border: #645135;
  --design-danger: #eb9288;
  --design-on-danger: #000000;
  --design-danger-hover: #f99f94;
  --design-danger-active: #ffafa6;
  --design-danger-subtle: #30282a;
  --design-danger-border: #6c4a48;
  --design-info: #6fb5ef;
  --design-on-info: #000000;
  --design-info-hover: #7cc2fd;
  --design-info-active: #95ceff;
  --design-info-subtle: #222d36;
  --design-info-border: #3a5871;
  --design-primary-50-rgb: 11, 27, 46;
  --design-primary-100-rgb: 25, 47, 72;
  --design-primary-200-rgb: 41, 68, 98;
  --design-primary-300-rgb: 59, 90, 125;
  --design-primary-400-rgb: 80, 113, 151;
  --design-primary-500-rgb: 103, 137, 176;
  --design-primary-600-rgb: 131, 165, 203;
  --design-primary-700-rgb: 164, 193, 226;
  --design-primary-800-rgb: 196, 218, 244;
  --design-primary-900-rgb: 222, 237, 254;
  --design-primary-950-rgb: 238, 246, 255;
  --design-neutral-50-rgb: 25, 27, 29;
  --design-neutral-100-rgb: 44, 46, 49;
  --design-neutral-200-rgb: 64, 67, 70;
  --design-neutral-300-rgb: 85, 88, 93;
  --design-neutral-400-rgb: 107, 111, 116;
  --design-neutral-500-rgb: 130, 135, 139;
  --design-neutral-600-rgb: 158, 162, 166;
  --design-neutral-700-rgb: 187, 190, 194;
  --design-neutral-800-rgb: 213, 216, 219;
  --design-neutral-900-rgb: 233, 235, 237;
  --design-neutral-950-rgb: 244, 245, 246;
  --design-surface-1-rgb: 13, 16, 19;
  --design-surface-2-rgb: 23, 26, 29;
  --design-surface-3-rgb: 33, 36, 40;
  --design-surface-hover-rgb: 43, 46, 50;
  --design-surface-active-rgb: 53, 56, 60;
  --design-text-rgb: 231, 236, 241;
  --design-text-muted-rgb: 161, 165, 170;
  --design-border-rgb: 48, 51, 55;
  --design-border-strong-rgb: 110, 114, 119;
  --design-primary-rgb: 97, 131, 170;
  --design-on-primary-rgb: 0, 0, 0;
  --design-primary-hover-rgb: 109, 143, 183;
  --design-primary-active-rgb: 120, 155, 196;
  --design-frame-rgb: 15, 47, 80;
  --design-on-frame-rgb: 255, 255, 255;
  --design-frame-hover-rgb: 4, 37, 69;
  --design-frame-active-rgb: 0, 27, 56;
  --design-link-rgb: 128, 163, 204;
  --design-success-rgb: 128, 193, 130;
  --design-on-success-rgb: 0, 0, 0;
  --design-success-hover-rgb: 140, 206, 142;
  --design-success-active-rgb: 153, 219, 155;
  --design-success-subtle-rgb: 36, 46, 41;
  --design-success-border-rgb: 65, 93, 69;
  --design-warning-rgb: 215, 164, 89;
  --design-on-warning-rgb: 0, 0, 0;
  --design-warning-hover-rgb: 228, 177, 102;
  --design-warning-active-rgb: 242, 189, 114;
  --design-warning-subtle-rgb: 46, 43, 36;
  --design-warning-border-rgb: 100, 81, 53;
  --design-danger-rgb: 235, 146, 136;
  --design-on-danger-rgb: 0, 0, 0;
  --design-danger-hover-rgb: 249, 159, 148;
  --design-danger-active-rgb: 255, 175, 166;
  --design-danger-subtle-rgb: 48, 40, 42;
  --design-danger-border-rgb: 108, 74, 72;
  --design-info-rgb: 111, 181, 239;
  --design-on-info-rgb: 0, 0, 0;
  --design-info-hover-rgb: 124, 194, 253;
  --design-info-active-rgb: 149, 206, 255;
  --design-info-subtle-rgb: 34, 45, 54;
  --design-info-border-rgb: 58, 88, 113;
  --design-shadow-color: 0, 0, 0, 0.45;
  --design-invert: 1;
  }
}
:root[data-design-theme="dark"] {
  --design-primary-50: #0b1b2e;
  --design-primary-100: #192f48;
  --design-primary-200: #294462;
  --design-primary-300: #3b5a7d;
  --design-primary-400: #507197;
  --design-primary-500: #6789b0;
  --design-primary-600: #83a5cb;
  --design-primary-700: #a4c1e2;
  --design-primary-800: #c4daf4;
  --design-primary-900: #deedfe;
  --design-primary-950: #eef6ff;
  --design-neutral-50: #191b1d;
  --design-neutral-100: #2c2e31;
  --design-neutral-200: #404346;
  --design-neutral-300: #55585d;
  --design-neutral-400: #6b6f74;
  --design-neutral-500: #82878b;
  --design-neutral-600: #9ea2a6;
  --design-neutral-700: #bbbec2;
  --design-neutral-800: #d5d8db;
  --design-neutral-900: #e9ebed;
  --design-neutral-950: #f4f5f6;
  --design-surface-1: #0d1013;
  --design-surface-2: #171a1d;
  --design-surface-3: #212428;
  --design-surface-hover: #2b2e32;
  --design-surface-active: #35383c;
  --design-text: #e7ecf1;
  --design-text-muted: #a1a5aa;
  --design-border: #303337;
  --design-border-strong: #6e7277;
  --design-primary: #6183aa;
  --design-on-primary: #000000;
  --design-primary-hover: #6d8fb7;
  --design-primary-active: #789bc4;
  --design-frame: #0f2f50;
  --design-on-frame: #ffffff;
  --design-frame-hover: #042545;
  --design-frame-active: #001b38;
  --design-link: #80a3cc;
  --design-success: #80c182;
  --design-on-success: #000000;
  --design-success-hover: #8cce8e;
  --design-success-active: #99db9b;
  --design-success-subtle: #242e29;
  --design-success-border: #415d45;
  --design-warning: #d7a459;
  --design-on-warning: #000000;
  --design-warning-hover: #e4b166;
  --design-warning-active: #f2bd72;
  --design-warning-subtle: #2e2b24;
  --design-warning-border: #645135;
  --design-danger: #eb9288;
  --design-on-danger: #000000;
  --design-danger-hover: #f99f94;
  --design-danger-active: #ffafa6;
  --design-danger-subtle: #30282a;
  --design-danger-border: #6c4a48;
  --design-info: #6fb5ef;
  --design-on-info: #000000;
  --design-info-hover: #7cc2fd;
  --design-info-active: #95ceff;
  --design-info-subtle: #222d36;
  --design-info-border: #3a5871;
  --design-primary-50-rgb: 11, 27, 46;
  --design-primary-100-rgb: 25, 47, 72;
  --design-primary-200-rgb: 41, 68, 98;
  --design-primary-300-rgb: 59, 90, 125;
  --design-primary-400-rgb: 80, 113, 151;
  --design-primary-500-rgb: 103, 137, 176;
  --design-primary-600-rgb: 131, 165, 203;
  --design-primary-700-rgb: 164, 193, 226;
  --design-primary-800-rgb: 196, 218, 244;
  --design-primary-900-rgb: 222, 237, 254;
  --design-primary-950-rgb: 238, 246, 255;
  --design-neutral-50-rgb: 25, 27, 29;
  --design-neutral-100-rgb: 44, 46, 49;
  --design-neutral-200-rgb: 64, 67, 70;
  --design-neutral-300-rgb: 85, 88, 93;
  --design-neutral-400-rgb: 107, 111, 116;
  --design-neutral-500-rgb: 130, 135, 139;
  --design-neutral-600-rgb: 158, 162, 166;
  --design-neutral-700-rgb: 187, 190, 194;
  --design-neutral-800-rgb: 213, 216, 219;
  --design-neutral-900-rgb: 233, 235, 237;
  --design-neutral-950-rgb: 244, 245, 246;
  --design-surface-1-rgb: 13, 16, 19;
  --design-surface-2-rgb: 23, 26, 29;
  --design-surface-3-rgb: 33, 36, 40;
  --design-surface-hover-rgb: 43, 46, 50;
  --design-surface-active-rgb: 53, 56, 60;
  --design-text-rgb: 231, 236, 241;
  --design-text-muted-rgb: 161, 165, 170;
  --design-border-rgb: 48, 51, 55;
  --design-border-strong-rgb: 110, 114, 119;
  --design-primary-rgb: 97, 131, 170;
  --design-on-primary-rgb: 0, 0, 0;
  --design-primary-hover-rgb: 109, 143, 183;
  --design-primary-active-rgb: 120, 155, 196;
  --design-frame-rgb: 15, 47, 80;
  --design-on-frame-rgb: 255, 255, 255;
  --design-frame-hover-rgb: 4, 37, 69;
  --design-frame-active-rgb: 0, 27, 56;
  --design-link-rgb: 128, 163, 204;
  --design-success-rgb: 128, 193, 130;
  --design-on-success-rgb: 0, 0, 0;
  --design-success-hover-rgb: 140, 206, 142;
  --design-success-active-rgb: 153, 219, 155;
  --design-success-subtle-rgb: 36, 46, 41;
  --design-success-border-rgb: 65, 93, 69;
  --design-warning-rgb: 215, 164, 89;
  --design-on-warning-rgb: 0, 0, 0;
  --design-warning-hover-rgb: 228, 177, 102;
  --design-warning-active-rgb: 242, 189, 114;
  --design-warning-subtle-rgb: 46, 43, 36;
  --design-warning-border-rgb: 100, 81, 53;
  --design-danger-rgb: 235, 146, 136;
  --design-on-danger-rgb: 0, 0, 0;
  --design-danger-hover-rgb: 249, 159, 148;
  --design-danger-active-rgb: 255, 175, 166;
  --design-danger-subtle-rgb: 48, 40, 42;
  --design-danger-border-rgb: 108, 74, 72;
  --design-info-rgb: 111, 181, 239;
  --design-on-info-rgb: 0, 0, 0;
  --design-info-hover-rgb: 124, 194, 253;
  --design-info-active-rgb: 149, 206, 255;
  --design-info-subtle-rgb: 34, 45, 54;
  --design-info-border-rgb: 58, 88, 113;
  --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);
  }
}