/* preset/full.css — Auto-generated by build-css.mjs (config-driven preset) */
/* Composes: variables + base + utilities + grid + components */

/* ═══ Semantic Variables ═══ */
:root {
  --dual-action-border-1: #000028;
  --dual-action-border-1-active: #000028;
  --dual-action-border-1-hover: #000028;
  --dual-action-border-2: var(--dual-action-content-2);
  --dual-action-border-2-active: var(--dual-action-content-2-active);
  --dual-action-border-2-hover: var(--dual-action-content-2-hover);
  --dual-action-border-3: #66667e;
  --dual-action-border-disabled: #9999a9;
  --dual-action-border-transparent: rgba(255, 255, 255, 0);
  --dual-action-content-1: #000000;
  --dual-action-content-2: #017878;
  --dual-action-content-2-active: #005c6c;
  --dual-action-content-2-hover: #003d55;
  --dual-action-content-3: #000000;
  --dual-action-content-danger: var(--dual-text-danger);
  --dual-action-content-disabled: #66667e;
  --dual-action-content-visited: #005c6c;
  --dual-action-fill-1: #00c1b6;
  --dual-action-fill-1-active: #00e5aa;
  --dual-action-fill-1-hover: #00ffb9;
  --dual-action-fill-2: rgba(255, 255, 255, 0);
  --dual-action-fill-2-active: var(--dual-base-3);
  --dual-action-fill-2-hover: var(--dual-base-1);
  --dual-action-fill-2-selected: var(--dual-base-selected);
  --dual-action-fill-3: #ebebee;
  --dual-action-fill-3-active: #ebebee;
  --dual-action-fill-3-hover: #d9d9df;
  --dual-action-fill-4: #000028;
  --dual-action-fill-4-solid-active: #005c6c;
  --dual-action-fill-4-solid-hover: #003d55;
  --dual-action-fill-bdp-active: #62eec7;
  --dual-action-fill-bdp-hover: #c5ffef;
  --dual-action-fill-commerce: #faa50a;
  --dual-action-fill-commerce-active: #eb780a;
  --dual-action-fill-commerce-hover: #eb780a;
  --dual-action-fill-danger: #b81e31;
  --dual-action-fill-danger-active: #b81e31;
  --dual-action-fill-danger-hover: #961934;
  --dual-action-fill-disabled: #f5f5f6;
  --dual-base-0: #ffffff;
  --dual-base-1: #f3f3f0;
  --dual-base-2: #f8f8f6;
  --dual-base-3: #e9e9e4;
  --dual-base-caution: #fffbea;
  --dual-base-danger: #fff4f5;
  --dual-base-disabled: #f5f5f6;
  --dual-base-featured: #ccebeb;
  --dual-base-fill-1: inherit;
  --dual-base-fill-1-hover: inherit;
  --dual-base-hover: #e8e8e3;
  --dual-base-info: #f2fcfd;
  --dual-base-inverse-1: #000028;
  --dual-base-inverse-2: #262648;
  --dual-base-inverse-3: #4c4c68;
  --dual-base-inverse-selected: #005c6c;
  --dual-base-raised: #ffffff;
  --dual-base-selected: #ccebeb;
  --dual-base-success: #f2fdf7;
  --dual-base-warning: #fff4e5;
  --dual-constant-bold-green: #00ffb9;
  --dual-constant-deep-blue: #000028;
  --dual-constant-white: #ffffff;
  --dual-doc-10: #d72339;
  --dual-doc-11: #ff2640;
  --dual-doc-12: #fcccd7;
  --dual-doc-13: #e96401;
  --dual-doc-14: #faa50a;
  --dual-doc-15: #ffd732;
  --dual-doc-16: #01893a;
  --dual-doc-17: #62eec7;
  --dual-doc-18: #00557c;
  --dual-doc-19: #007eb1;
  --dual-doc-2: #ffffff;
  --dual-doc-20: #1491eb;
  --dual-doc-23: #805cff;
  --dual-doc-3: #f5f5f6;
  --dual-doc-4: #e8e8e3;
  --dual-doc-6: #b1b1aa;
  --dual-doc-7: #8a8a8d;
  --dual-doc-8: #66666a;
  --dual-doc-9: #b81e31;
  --dual-forms-border-1: inherit;
  --dual-forms-fill: inherit;
  --dual-forms-ui: inherit;
  --dual-opacity-box-shadow: rgba(0, 0, 40, 0.08);
  --dual-opacity-contrast-0: rgba(0, 0, 40, 0);
  --dual-opacity-contrast-1: rgba(0, 0, 40, 0.08);
  --dual-opacity-contrast-2: rgba(0, 0, 40, 0.12);
  --dual-opacity-contrast-3: rgba(0, 0, 40, 0.24);
  --dual-opacity-contrast-4: rgba(0, 0, 40, 0.48);
  --dual-opacity-contrast-5: rgba(0, 0, 40, 0.72);
  --dual-opacity-contrast-6: #000028;
  --dual-opacity-fade-0: rgba(255, 255, 255, 0);
  --dual-opacity-fade-1: rgba(255, 255, 255, 0.08);
  --dual-opacity-fade-2: rgba(255, 255, 255, 0.12);
  --dual-opacity-fade-3: rgba(255, 255, 255, 0.24);
  --dual-opacity-fade-4: rgba(255, 255, 255, 0.48);
  --dual-opacity-fade-5: rgba(255, 255, 255, 0.72);
  --dual-opacity-fade-6: #ffffff;
  --dual-scrollbar-thumb: #d9d9df;
  --dual-scrollbar-track: #f5f5f6;
  --dual-status-caution: #ffd732;
  --dual-status-danger: #b81e31;
  --dual-status-featured: #00e6dc;
  --dual-status-information: #007eb1;
  --dual-status-success: #01893a;
  --dual-status-warning: #e96401;
  --dual-text-1: #000028;
  --dual-text-2: #4c4c68;
  --dual-text-3: #737389;
  --dual-text-caution: var(--dual-text-1);
  --dual-text-danger: #b81e31;
  --dual-text-disabled: #9999a9;
  --dual-text-featured-info: var(--dual-text-1);
  --dual-text-highlight-interactive: #017878;
  --dual-text-highlight-interactive-hover: #003d55;
  --dual-text-info: #00557c;
  --dual-text-inverse-1: #ffffff;
  --dual-text-inverse-2: #b3b3be;
  --dual-text-inverse-highlight-interactive: #00c1b6;
  --dual-text-inverse-highlight-interactive-hover: #00ffb9;
  --dual-text-primary: inherit;
  --dual-text-secondary: inherit;
  --dual-text-success: #016035;
  --dual-text-warning: #a5470d;
  --dual-ui-1: #000028;
  --dual-ui-2: #7d8099;
  --dual-ui-3: #ccccd4;
  --dual-ui-4: #017878;
  --dual-ui-disabled: #9999a9;
  --dual-ui-focus: #1491eb;
  --dual-ui-interactive-1: #005c6c;
  --dual-ui-interactive-2: #003d55;
  --dual-ui-inverse-1: #ffffff;
  --dual-ui-inverse-2: #66667e;
}

.dual-theme-dark,
[data-dual-theme=dark] {
  --dual-action-border-1: #ffffff;
  --dual-action-border-1-active: #ffffff;
  --dual-action-border-1-hover: #ffffff;
  --dual-action-border-2: var(--dual-action-content-2);
  --dual-action-border-2-active: var(--dual-action-content-2-active);
  --dual-action-border-2-hover: var(--dual-action-content-2-hover);
  --dual-action-border-3: #b3b3be;
  --dual-action-border-disabled: #9999a9;
  --dual-action-border-transparent: rgba(255, 255, 255, 0);
  --dual-action-content-1: #000028;
  --dual-action-content-2: #00cccc;
  --dual-action-content-2-active: #00e5aa;
  --dual-action-content-2-hover: #00ffb9;
  --dual-action-content-3: #ffffff;
  --dual-action-content-danger: #ff7687;
  --dual-action-content-disabled: #737389;
  --dual-action-content-visited: #00a3ab;
  --dual-action-fill-1: #00cccc;
  --dual-action-fill-1-active: #00e5aa;
  --dual-action-fill-1-hover: #00ffb9;
  --dual-action-fill-2: rgba(0, 0, 40, 0);
  --dual-action-fill-2-active: var(--dual-base-3);
  --dual-action-fill-2-hover: var(--dual-base-2);
  --dual-action-fill-2-selected: #00ffb9;
  --dual-action-fill-3: #333353;
  --dual-action-fill-3-active: #262648;
  --dual-action-fill-3-hover: #4c4c68;
  --dual-action-fill-4: #ffffff;
  --dual-action-fill-4-solid-active: #00e5aa;
  --dual-action-fill-4-solid-hover: #00ffb9;
  --dual-action-fill-bdp-active: #00e5aa;
  --dual-action-fill-bdp-hover: #c5ffef;
  --dual-action-fill-commerce: #faa50a;
  --dual-action-fill-commerce-active: #eb780a;
  --dual-action-fill-commerce-hover: #eb780a;
  --dual-action-fill-danger: #b81e31;
  --dual-action-fill-danger-active: #b81e31;
  --dual-action-fill-danger-hover: #d72339;
  --dual-action-fill-disabled: #4c4c68;
  --dual-base-0: #000028;
  --dual-base-1: #00183b;
  --dual-base-2: #00314f;
  --dual-base-3: #003d59;
  --dual-base-caution: #4b433a;
  --dual-base-danger: #410b2d;
  --dual-base-disabled: #4c4c68;
  --dual-base-featured: #002949;
  --dual-base-fill-1: inherit;
  --dual-base-fill-1-hover: inherit;
  --dual-base-hover: #002949;
  --dual-base-info: #002949;
  --dual-base-inverse-1: #ffffff;
  --dual-base-inverse-2: #f3f3f0;
  --dual-base-inverse-3: #e9e9e4;
  --dual-base-inverse-selected: #00ffb9;
  --dual-base-raised: #00183b;
  --dual-base-selected: #003345;
  --dual-base-success: #004037;
  --dual-base-warning: #5d2818;
  --dual-constant-bold-green: #00ffb9;
  --dual-constant-deep-blue: #000028;
  --dual-constant-white: #ffffff;
  --dual-doc-10: #d72339;
  --dual-doc-11: #ff2640;
  --dual-doc-12: #fcccd7;
  --dual-doc-13: #e96401;
  --dual-doc-14: #faa50a;
  --dual-doc-15: #ffd732;
  --dual-doc-16: #01893a;
  --dual-doc-17: #62eec7;
  --dual-doc-18: #00557c;
  --dual-doc-19: #007eb1;
  --dual-doc-2: #ffffff;
  --dual-doc-20: #1491eb;
  --dual-doc-23: #805cff;
  --dual-doc-3: #f5f5f6;
  --dual-doc-4: #e8e8e3;
  --dual-doc-6: #b1b1aa;
  --dual-doc-7: #8a8a8d;
  --dual-doc-8: #66666a;
  --dual-doc-9: #b81e31;
  --dual-forms-border-1: inherit;
  --dual-forms-fill: inherit;
  --dual-forms-ui: inherit;
  --dual-opacity-box-shadow: rgba(0, 0, 40, 0);
  --dual-opacity-contrast-0: rgba(255, 255, 255, 0);
  --dual-opacity-contrast-1: rgba(255, 255, 255, 0.08);
  --dual-opacity-contrast-2: rgba(255, 255, 255, 0.12);
  --dual-opacity-contrast-3: rgba(255, 255, 255, 0.24);
  --dual-opacity-contrast-4: rgba(255, 255, 255, 0.48);
  --dual-opacity-contrast-5: rgba(255, 255, 255, 0.72);
  --dual-opacity-contrast-6: #ffffff;
  --dual-opacity-fade-0: rgba(0, 0, 40, 0);
  --dual-opacity-fade-1: rgba(0, 0, 40, 0.08);
  --dual-opacity-fade-2: rgba(0, 0, 40, 0.12);
  --dual-opacity-fade-3: rgba(0, 0, 40, 0.24);
  --dual-opacity-fade-4: rgba(0, 0, 40, 0.48);
  --dual-opacity-fade-5: rgba(0, 0, 40, 0.72);
  --dual-opacity-fade-6: #000028;
  --dual-scrollbar-thumb: #4c4c68;
  --dual-scrollbar-track: #262648;
  --dual-status-caution: #ffd732;
  --dual-status-danger: #ff7687;
  --dual-status-featured: #00e6dc;
  --dual-status-information: #0087be;
  --dual-status-success: #01d65a;
  --dual-status-warning: #ff9000;
  --dual-text-1: #ffffff;
  --dual-text-2: #b3b3be;
  --dual-text-3: #7d8099;
  --dual-text-caution: var(--dual-text-1);
  --dual-text-danger: #fcccd7;
  --dual-text-disabled: #737389;
  --dual-text-featured-info: var(--dual-text-1);
  --dual-text-highlight-interactive: #00cccc;
  --dual-text-highlight-interactive-hover: #00ffb9;
  --dual-text-info: #ccf2f8;
  --dual-text-inverse-1: #000028;
  --dual-text-inverse-2: #4c4c68;
  --dual-text-inverse-highlight-interactive: #007993;
  --dual-text-inverse-highlight-interactive-hover: #003d55;
  --dual-text-primary: inherit;
  --dual-text-secondary: inherit;
  --dual-text-success: #ccf7de;
  --dual-text-warning: #fff4e5;
  --dual-ui-1: #ffffff;
  --dual-ui-2: #66667e;
  --dual-ui-3: #333353;
  --dual-ui-4: #00cccc;
  --dual-ui-disabled: #737389;
  --dual-ui-focus: #1491eb;
  --dual-ui-interactive-1: #00ffb9;
  --dual-ui-interactive-2: #00e5aa;
  --dual-ui-inverse-1: #000028;
  --dual-ui-inverse-2: #737389;
}

.dual-theme-sand,
[data-dual-theme=sand] {
  --dual-action-border-1: #ffffff;
  --dual-action-border-1-active: #ffffff;
  --dual-action-border-1-hover: #ffffff;
  --dual-action-border-2: var(--dual-action-content-2);
  --dual-action-border-2-active: var(--dual-action-content-2-active);
  --dual-action-border-2-hover: var(--dual-action-content-2-hover);
  --dual-action-border-3: #b3b3be;
  --dual-action-border-disabled: #9999a9;
  --dual-action-border-transparent: rgba(255, 255, 255, 0);
  --dual-action-content-1: #000028;
  --dual-action-content-2: #00cccc;
  --dual-action-content-2-active: #00e5aa;
  --dual-action-content-2-hover: #00ffb9;
  --dual-action-content-3: #ffffff;
  --dual-action-content-danger: #ff7687;
  --dual-action-content-disabled: #737389;
  --dual-action-content-visited: #00a3ab;
  --dual-action-fill-1: #00cccc;
  --dual-action-fill-1-active: #00e5aa;
  --dual-action-fill-1-hover: #00ffb9;
  --dual-action-fill-2: rgba(0, 0, 40, 0);
  --dual-action-fill-2-active: var(--dual-base-3);
  --dual-action-fill-2-hover: var(--dual-base-2);
  --dual-action-fill-2-selected: #00ffb9;
  --dual-action-fill-3: #333353;
  --dual-action-fill-3-active: #262648;
  --dual-action-fill-3-hover: #4c4c68;
  --dual-action-fill-4: #ffffff;
  --dual-action-fill-4-solid-active: #00e5aa;
  --dual-action-fill-4-solid-hover: #00ffb9;
  --dual-action-fill-bdp-active: #00e5aa;
  --dual-action-fill-bdp-hover: #c5ffef;
  --dual-action-fill-commerce: #faa50a;
  --dual-action-fill-commerce-active: #eb780a;
  --dual-action-fill-commerce-hover: #eb780a;
  --dual-action-fill-danger: #b81e31;
  --dual-action-fill-danger-active: #b81e31;
  --dual-action-fill-danger-hover: #d72339;
  --dual-action-fill-disabled: #4c4c68;
  --dual-base-0: #000028;
  --dual-base-1: #00183b;
  --dual-base-2: #00314f;
  --dual-base-3: #003d59;
  --dual-base-caution: #4b433a;
  --dual-base-danger: #410b2d;
  --dual-base-disabled: #4c4c68;
  --dual-base-featured: #002949;
  --dual-base-fill-1: #00183b;
  --dual-base-fill-1-hover: #002949;
  --dual-base-hover: #002949;
  --dual-base-info: #002949;
  --dual-base-inverse-1: #ffffff;
  --dual-base-inverse-2: #f8f8f6;
  --dual-base-inverse-3: #e9e9e4;
  --dual-base-inverse-selected: #00ffb9;
  --dual-base-raised: #00183b;
  --dual-base-selected: #003345;
  --dual-base-success: #004037;
  --dual-base-warning: #5d2818;
  --dual-constant-bold-green: #00ffb9;
  --dual-constant-deep-blue: #000028;
  --dual-constant-white: #ffffff;
  --dual-doc-10: #d72339;
  --dual-doc-11: #ff2640;
  --dual-doc-12: #fcccd7;
  --dual-doc-13: #e96401;
  --dual-doc-14: #faa50a;
  --dual-doc-15: #ffd732;
  --dual-doc-16: #01893a;
  --dual-doc-17: #62eec7;
  --dual-doc-18: #00557c;
  --dual-doc-19: #007eb1;
  --dual-doc-2: #ffffff;
  --dual-doc-20: #1491eb;
  --dual-doc-23: #805cff;
  --dual-doc-3: #f5f5f6;
  --dual-doc-4: #e8e8e3;
  --dual-doc-6: #b1b1aa;
  --dual-doc-7: #8a8a8d;
  --dual-doc-8: #66666a;
  --dual-doc-9: #b81e31;
  --dual-forms-border-1: #b3b3be;
  --dual-forms-fill: #000028;
  --dual-forms-ui: #4c4c68;
  --dual-opacity-box-shadow: rgba(0, 0, 40, 0);
  --dual-opacity-contrast-0: rgba(255, 255, 255, 0);
  --dual-opacity-contrast-1: rgba(255, 255, 255, 0.08);
  --dual-opacity-contrast-2: rgba(255, 255, 255, 0.12);
  --dual-opacity-contrast-3: rgba(255, 255, 255, 0.24);
  --dual-opacity-contrast-4: rgba(255, 255, 255, 0.48);
  --dual-opacity-contrast-5: rgba(255, 255, 255, 0.72);
  --dual-opacity-contrast-6: #ffffff;
  --dual-opacity-fade-0: rgba(0, 0, 40, 0);
  --dual-opacity-fade-1: rgba(0, 0, 40, 0.08);
  --dual-opacity-fade-2: rgba(0, 0, 40, 0.12);
  --dual-opacity-fade-3: rgba(0, 0, 40, 0.24);
  --dual-opacity-fade-4: rgba(0, 0, 40, 0.48);
  --dual-opacity-fade-5: rgba(0, 0, 40, 0.72);
  --dual-opacity-fade-6: #000028;
  --dual-scrollbar-thumb: #4c4c68;
  --dual-scrollbar-track: #262648;
  --dual-status-caution: #ffd732;
  --dual-status-danger: #ff7687;
  --dual-status-featured: #00e6dc;
  --dual-status-information: #0087be;
  --dual-status-success: #01d65a;
  --dual-status-warning: #ff9000;
  --dual-text-1: #ffffff;
  --dual-text-2: #b3b3be;
  --dual-text-3: #7d8099;
  --dual-text-caution: var(--dual-text-1);
  --dual-text-danger: #fcccd7;
  --dual-text-disabled: #737389;
  --dual-text-featured-info: var(--dual-text-1);
  --dual-text-highlight-interactive: #00cccc;
  --dual-text-highlight-interactive-hover: #00ffb9;
  --dual-text-info: #ccf2f8;
  --dual-text-inverse-1: #000028;
  --dual-text-inverse-2: #4c4c68;
  --dual-text-inverse-highlight-interactive: #007993;
  --dual-text-inverse-highlight-interactive-hover: #003d55;
  --dual-text-primary: #ffffff;
  --dual-text-secondary: #b3b3be;
  --dual-text-success: #ccf7de;
  --dual-text-warning: #fff4e5;
  --dual-ui-1: #ffffff;
  --dual-ui-2: #66667e;
  --dual-ui-3: #333353;
  --dual-ui-4: #00cccc;
  --dual-ui-disabled: #737389;
  --dual-ui-focus: #1491eb;
  --dual-ui-interactive-1: #00ffb9;
  --dual-ui-interactive-2: #00e5aa;
  --dual-ui-inverse-1: #000028;
  --dual-ui-inverse-2: #737389;
}

.dual-theme-wireframe,
[data-dual-theme=wireframe] {
  --dual-action-border-1: #737389;
  --dual-action-border-1-active: #4c4c68;
  --dual-action-border-1-hover: #66667e;
  --dual-action-border-2: var(--dual-action-content-2);
  --dual-action-border-2-active: var(--dual-action-content-2-active);
  --dual-action-border-2-hover: var(--dual-action-content-2-hover);
  --dual-action-border-3: #b3b3be;
  --dual-action-border-disabled: #9999a9;
  --dual-action-border-transparent: rgba(0, 0, 40, 0);
  --dual-action-content-1: #ffffff;
  --dual-action-content-2: #4c4c68;
  --dual-action-content-2-active: #333353;
  --dual-action-content-2-hover: #66667e;
  --dual-action-content-3: #000028;
  --dual-action-content-danger: #4c4c68;
  --dual-action-content-disabled: #9999a9;
  --dual-action-content-visited: #333353;
  --dual-action-fill-1: #737389;
  --dual-action-fill-1-active: #4c4c68;
  --dual-action-fill-1-hover: #66667e;
  --dual-action-fill-2: rgba(0, 0, 40, 0);
  --dual-action-fill-2-active: var(--dual-base-3);
  --dual-action-fill-2-hover: var(--dual-base-2);
  --dual-action-fill-2-selected: #737389;
  --dual-action-fill-3: #d9d9df;
  --dual-action-fill-3-active: #ccccd4;
  --dual-action-fill-3-hover: #ebebee;
  --dual-action-fill-4: #000028;
  --dual-action-fill-4-solid-active: #333353;
  --dual-action-fill-4-solid-hover: #4c4c68;
  --dual-action-fill-bdp-active: #4c4c68;
  --dual-action-fill-bdp-hover: #b3b3be;
  --dual-action-fill-commerce: #66667e;
  --dual-action-fill-commerce-active: #4c4c68;
  --dual-action-fill-commerce-hover: #4c4c68;
  --dual-action-fill-danger: #4c4c68;
  --dual-action-fill-danger-active: #333353;
  --dual-action-fill-danger-hover: #66667e;
  --dual-action-fill-disabled: #ccccd4;
  --dual-base-0: #ffffff;
  --dual-base-1: #ebebee;
  --dual-base-2: #f5f5f6;
  --dual-base-3: #d9d9df;
  --dual-base-caution: #e2e2e6;
  --dual-base-danger: #dcdce1;
  --dual-base-disabled: #ccccd4;
  --dual-base-featured: #e2e2e6;
  --dual-base-fill-1: inherit;
  --dual-base-fill-1-hover: inherit;
  --dual-base-hover: #e2e2e6;
  --dual-base-info: #e2e2e6;
  --dual-base-inverse-1: #000028;
  --dual-base-inverse-2: #19193d;
  --dual-base-inverse-3: #262648;
  --dual-base-inverse-selected: #737389;
  --dual-base-raised: #ffffff;
  --dual-base-selected: #d9d9df;
  --dual-base-success: #dfdfe3;
  --dual-base-warning: #dcdce1;
  --dual-constant-bold-green: #737389;
  --dual-constant-deep-blue: #000028;
  --dual-constant-white: #ffffff;
  --dual-doc-10: #4c4c68;
  --dual-doc-11: #333353;
  --dual-doc-12: #d9d9df;
  --dual-doc-13: #66667e;
  --dual-doc-14: #7d8099;
  --dual-doc-15: #b3b3be;
  --dual-doc-16: #4c4c68;
  --dual-doc-17: #b3b3be;
  --dual-doc-18: #333353;
  --dual-doc-19: #4c4c68;
  --dual-doc-2: #000028;
  --dual-doc-20: #66667e;
  --dual-doc-23: #7d8099;
  --dual-doc-3: #f5f5f6;
  --dual-doc-4: #ebebee;
  --dual-doc-6: #ccccd4;
  --dual-doc-7: #9999a9;
  --dual-doc-8: #66667e;
  --dual-doc-9: #4c4c68;
  --dual-forms-border-1: inherit;
  --dual-forms-fill: inherit;
  --dual-forms-ui: inherit;
  --dual-opacity-box-shadow: rgba(0, 0, 40, 0);
  --dual-opacity-contrast-0: rgba(0, 0, 40, 0);
  --dual-opacity-contrast-1: rgba(0, 0, 40, 0.08);
  --dual-opacity-contrast-2: rgba(0, 0, 40, 0.12);
  --dual-opacity-contrast-3: rgba(0, 0, 40, 0.24);
  --dual-opacity-contrast-4: rgba(0, 0, 40, 0.48);
  --dual-opacity-contrast-5: rgba(0, 0, 40, 0.72);
  --dual-opacity-contrast-6: #000028;
  --dual-opacity-fade-0: rgba(0, 0, 40, 0);
  --dual-opacity-fade-1: rgba(0, 0, 40, 0.08);
  --dual-opacity-fade-2: rgba(0, 0, 40, 0.12);
  --dual-opacity-fade-3: rgba(0, 0, 40, 0.24);
  --dual-opacity-fade-4: rgba(0, 0, 40, 0.48);
  --dual-opacity-fade-5: rgba(0, 0, 40, 0.72);
  --dual-opacity-fade-6: #000028;
  --dual-scrollbar-thumb: #b3b3be;
  --dual-scrollbar-track: #e2e2e6;
  --dual-status-caution: #b3b3be;
  --dual-status-danger: #4c4c68;
  --dual-status-featured: #b3b3be;
  --dual-status-information: #7d8099;
  --dual-status-success: #737389;
  --dual-status-warning: #66667e;
  --dual-text-1: #000028;
  --dual-text-2: #4c4c68;
  --dual-text-3: #7d8099;
  --dual-text-caution: var(--dual-text-1);
  --dual-text-danger: #333353;
  --dual-text-disabled: #9999a9;
  --dual-text-featured-info: var(--dual-text-1);
  --dual-text-highlight-interactive: #4c4c68;
  --dual-text-highlight-interactive-hover: #66667e;
  --dual-text-info: #333353;
  --dual-text-inverse-1: #ffffff;
  --dual-text-inverse-2: #b3b3be;
  --dual-text-inverse-highlight-interactive: #d9d9df;
  --dual-text-inverse-highlight-interactive-hover: #ebebee;
  --dual-text-primary: inherit;
  --dual-text-secondary: inherit;
  --dual-text-success: #333353;
  --dual-text-warning: #333353;
  --dual-ui-1: #000028;
  --dual-ui-2: #66667e;
  --dual-ui-3: #d9d9df;
  --dual-ui-4: #737389;
  --dual-ui-disabled: #9999a9;
  --dual-ui-focus: #737389;
  --dual-ui-interactive-1: #4c4c68;
  --dual-ui-interactive-2: #333353;
  --dual-ui-inverse-1: #ffffff;
  --dual-ui-inverse-2: #b3b3be;
}

.dual-theme-dark-brand,
[data-dual-theme=dark-brand] {
  --dual-action-border-1: #ffffff;
  --dual-action-border-1-active: #ffffff;
  --dual-action-border-1-hover: #ffffff;
  --dual-action-border-2: var(--dual-action-content-2);
  --dual-action-border-2-active: var(--dual-action-content-2-active);
  --dual-action-border-2-hover: var(--dual-action-content-2-hover);
  --dual-action-border-3: #b3b3be;
  --dual-action-border-disabled: #9999a9;
  --dual-action-border-transparent: rgba(255, 255, 255, 0);
  --dual-action-content-1: #000028;
  --dual-action-content-2: #00e6dc;
  --dual-action-content-2-active: #009999;
  --dual-action-content-2-hover: #00ffb9;
  --dual-action-content-3: #ffffff;
  --dual-action-content-danger: #ff7687;
  --dual-action-content-disabled: #737389;
  --dual-action-content-visited: #00a3ab;
  --dual-action-fill-1: #00e6dc;
  --dual-action-fill-1-active: #009999;
  --dual-action-fill-1-hover: #00ffb9;
  --dual-action-fill-2: rgba(0, 0, 40, 0);
  --dual-action-fill-2-active: var(--dual-base-3);
  --dual-action-fill-2-hover: var(--dual-base-2);
  --dual-action-fill-2-selected: #00ffb9;
  --dual-action-fill-3: #333353;
  --dual-action-fill-3-active: #262648;
  --dual-action-fill-3-hover: #4c4c68;
  --dual-action-fill-4: #ffffff;
  --dual-action-fill-4-solid-active: #00e5aa;
  --dual-action-fill-4-solid-hover: #00ffb9;
  --dual-action-fill-bdp-active: #00e5aa;
  --dual-action-fill-bdp-hover: #c5ffef;
  --dual-action-fill-commerce: #faa50a;
  --dual-action-fill-commerce-active: #eb780a;
  --dual-action-fill-commerce-hover: #eb780a;
  --dual-action-fill-danger: #b81e31;
  --dual-action-fill-danger-active: #b81e31;
  --dual-action-fill-danger-hover: #d72339;
  --dual-action-fill-disabled: #4c4c68;
  --dual-base-0: #000028;
  --dual-base-1: #00183b;
  --dual-base-2: #00314f;
  --dual-base-3: #003d59;
  --dual-base-caution: #4b433a;
  --dual-base-danger: #410b2d;
  --dual-base-disabled: #4c4c68;
  --dual-base-featured: #002949;
  --dual-base-fill-1: inherit;
  --dual-base-fill-1-hover: inherit;
  --dual-base-hover: #002949;
  --dual-base-info: #002949;
  --dual-base-inverse-1: #ffffff;
  --dual-base-inverse-2: #f3f3f0;
  --dual-base-inverse-3: #e9e9e4;
  --dual-base-inverse-selected: #00ffb9;
  --dual-base-raised: #00183b;
  --dual-base-selected: #003345;
  --dual-base-success: #004037;
  --dual-base-warning: #5d2818;
  --dual-constant-bold-green: #00ffb9;
  --dual-constant-deep-blue: #000028;
  --dual-constant-white: #ffffff;
  --dual-doc-10: #d72339;
  --dual-doc-11: #ff2640;
  --dual-doc-12: #fcccd7;
  --dual-doc-13: #e96401;
  --dual-doc-14: #faa50a;
  --dual-doc-15: #ffd732;
  --dual-doc-16: #01893a;
  --dual-doc-17: #62eec7;
  --dual-doc-18: #00557c;
  --dual-doc-19: #007eb1;
  --dual-doc-2: #ffffff;
  --dual-doc-20: #1491eb;
  --dual-doc-23: #805cff;
  --dual-doc-3: #f5f5f6;
  --dual-doc-4: #e8e8e3;
  --dual-doc-6: #b1b1aa;
  --dual-doc-7: #8a8a8d;
  --dual-doc-8: #66666a;
  --dual-doc-9: #b81e31;
  --dual-forms-border-1: inherit;
  --dual-forms-fill: inherit;
  --dual-forms-ui: inherit;
  --dual-opacity-box-shadow: rgba(0, 0, 40, 0);
  --dual-opacity-contrast-0: rgba(255, 255, 255, 0);
  --dual-opacity-contrast-1: rgba(255, 255, 255, 0.08);
  --dual-opacity-contrast-2: rgba(255, 255, 255, 0.12);
  --dual-opacity-contrast-3: rgba(255, 255, 255, 0.24);
  --dual-opacity-contrast-4: rgba(255, 255, 255, 0.48);
  --dual-opacity-contrast-5: rgba(255, 255, 255, 0.72);
  --dual-opacity-contrast-6: #ffffff;
  --dual-opacity-fade-0: rgba(0, 0, 40, 0);
  --dual-opacity-fade-1: rgba(0, 0, 40, 0.08);
  --dual-opacity-fade-2: rgba(0, 0, 40, 0.12);
  --dual-opacity-fade-3: rgba(0, 0, 40, 0.24);
  --dual-opacity-fade-4: rgba(0, 0, 40, 0.48);
  --dual-opacity-fade-5: rgba(0, 0, 40, 0.72);
  --dual-opacity-fade-6: #000028;
  --dual-scrollbar-thumb: #4c4c68;
  --dual-scrollbar-track: #262648;
  --dual-status-caution: #ffd732;
  --dual-status-danger: #ff7687;
  --dual-status-featured: #00e6dc;
  --dual-status-information: #0087be;
  --dual-status-success: #01d65a;
  --dual-status-warning: #ff9000;
  --dual-text-1: #ffffff;
  --dual-text-2: #b3b3be;
  --dual-text-3: #7d8099;
  --dual-text-caution: var(--dual-text-1);
  --dual-text-danger: #fcccd7;
  --dual-text-disabled: #737389;
  --dual-text-featured-info: var(--dual-text-1);
  --dual-text-highlight-interactive: #00e6dc;
  --dual-text-highlight-interactive-hover: #00ffb9;
  --dual-text-info: #ccf2f8;
  --dual-text-inverse-1: #000028;
  --dual-text-inverse-2: #4c4c68;
  --dual-text-inverse-highlight-interactive: #007993;
  --dual-text-inverse-highlight-interactive-hover: #003d55;
  --dual-text-primary: inherit;
  --dual-text-secondary: inherit;
  --dual-text-success: #ccf7de;
  --dual-text-warning: #fff4e5;
  --dual-ui-1: #ffffff;
  --dual-ui-2: #66667e;
  --dual-ui-3: #333353;
  --dual-ui-4: #00e6dc;
  --dual-ui-disabled: #737389;
  --dual-ui-focus: #00e6dc;
  --dual-ui-interactive-1: #00e6dc;
  --dual-ui-interactive-2: #00ffb9;
  --dual-ui-inverse-1: #000028;
  --dual-ui-inverse-2: #737389;
}

:root {
  --dual-gap-xxx-small: -2px;
  --dual-gap-xx-small: 2px;
  --dual-gap-x-small: 4px;
  --dual-gap-small: 8px;
  --dual-gap-medium: 12px;
  --dual-gap-large: 16px;
  --dual-gap-x-large: 20px;
  --dual-gap-xx-large: 24px;
  --dual-gap-xxx-large: 28px;
  --dual-gap-xxxx-large: 32px;
  --dual-pad-xxxx-small: 1px;
  --dual-pad-xxx-small: 2px;
  --dual-pad-xx-small: 3px;
  --dual-pad-x-small: 4px;
  --dual-pad-small: 6px;
  --dual-pad-medium: 8px;
  --dual-pad-large: 12px;
  --dual-pad-x-large: 16px;
  --dual-pad-xx-large: 20px;
  --dual-pad-xxx-large: 24px;
  --dual-pad-xxxx-large: 32px;
  --dual-pad-xxxxx-large: 40px;
  --dual-pad-xxxxxx-large: 80px;
  --dual-width-4: 4px;
  --dual-width-8: 8px;
  --dual-width-12: 12px;
  --dual-width-16: 16px;
  --dual-width-20: 20px;
  --dual-width-24: 24px;
  --dual-width-32: 32px;
  --dual-width-40: 40px;
  --dual-width-48: 48px;
  --dual-height-4: 4px;
  --dual-height-8: 8px;
  --dual-height-12: 12px;
  --dual-height-16: 16px;
  --dual-height-20: 20px;
  --dual-height-24: 24px;
  --dual-height-32: 32px;
  --dual-height-40: 40px;
  --dual-height-48: 48px;
  --dual-height-56: 56px;
  --dual-grid-gutter-width: 32px;
  --dual-grid-grid-columns: 12;
  --dual-size-content-small: 55ch;
  --dual-size-content-medium: 68ch;
  --dual-size-content-large: 80ch;
  --dual-size-fluid-small: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --dual-size-fluid-medium: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --dual-size-fluid-large: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --dual-spacing: 4px;
  --dual-sans-display-large-font-size: 40px;
  --dual-sans-display-large-line-height: 48px;
  --dual-sans-display-large-letter-spacing: -0.5px;
  --dual-sans-display-medium-font-size: 36px;
  --dual-sans-display-medium-line-height: 44px;
  --dual-sans-display-medium-letter-spacing: -0.5px;
  --dual-sans-display-small-font-size: 32px;
  --dual-sans-display-small-line-height: 40px;
  --dual-sans-display-small-letter-spacing: -0.5px;
  --dual-sans-title-large-font-size: 28px;
  --dual-sans-title-large-line-height: 36px;
  --dual-sans-title-large-letter-spacing: 0;
  --dual-sans-title-medium-font-size: 24px;
  --dual-sans-title-medium-line-height: 32px;
  --dual-sans-title-medium-letter-spacing: 0;
  --dual-sans-title-small-font-size: 20px;
  --dual-sans-title-small-line-height: 28px;
  --dual-sans-title-small-letter-spacing: 0;
  --dual-sans-body-x-large-font-size: 22px;
  --dual-sans-body-x-large-line-height: 32px;
  --dual-sans-body-x-large-letter-spacing: 0;
  --dual-sans-body-large-font-size: 18px;
  --dual-sans-body-large-line-height: 28px;
  --dual-sans-body-large-letter-spacing: 0;
  --dual-sans-body-medium-font-size: 16px;
  --dual-sans-body-medium-line-height: 24px;
  --dual-sans-body-medium-letter-spacing: 0;
  --dual-sans-body-small-font-size: 14px;
  --dual-sans-body-small-line-height: 20px;
  --dual-sans-body-small-letter-spacing: 0;
  --dual-sans-body-x-small-font-size: 12px;
  --dual-sans-body-x-small-line-height: 16px;
  --dual-sans-body-x-small-letter-spacing: 0;
  --dual-sans-intro-large-font-size: 18px;
  --dual-sans-intro-large-line-height: 28px;
  --dual-sans-intro-large-letter-spacing: 0;
  --dual-sans-intro-medium-font-size: 16px;
  --dual-sans-intro-medium-line-height: 24px;
  --dual-sans-intro-medium-letter-spacing: 0;
  --dual-sans-quote-large-font-size: 36px;
  --dual-sans-quote-large-line-height: 44px;
  --dual-sans-quote-large-letter-spacing: 0;
  --dual-sans-quote-medium-font-size: 32px;
  --dual-sans-quote-medium-line-height: 48px;
  --dual-sans-quote-medium-letter-spacing: 0;
  --dual-sans-topline-font-size: 14px;
  --dual-sans-topline-line-height: 20px;
  --dual-sans-topline-letter-spacing: 1px;
  --dual-slab-display-large-font-size: 40px;
  --dual-slab-display-large-line-height: 48px;
  --dual-slab-display-large-letter-spacing: -0.5px;
  --dual-slab-display-medium-font-size: 36px;
  --dual-slab-display-medium-line-height: 44px;
  --dual-slab-display-medium-letter-spacing: -0.5px;
  --dual-slab-display-small-font-size: 32px;
  --dual-slab-display-small-line-height: 40px;
  --dual-slab-display-small-letter-spacing: -0.5px;
  --dual-slab-title-large-font-size: 28px;
  --dual-slab-title-large-line-height: 36px;
  --dual-slab-title-large-letter-spacing: 0;
  --dual-slab-title-medium-font-size: 24px;
  --dual-slab-title-medium-line-height: 32px;
  --dual-slab-title-medium-letter-spacing: 0;
  --dual-slab-title-small-font-size: 20px;
  --dual-slab-title-small-line-height: 28px;
  --dual-slab-title-small-letter-spacing: 0;
  --dual-slab-body-x-large-font-size: 22px;
  --dual-slab-body-x-large-line-height: 32px;
  --dual-slab-body-x-large-letter-spacing: 0;
  --dual-slab-body-large-font-size: 18px;
  --dual-slab-body-large-line-height: 28px;
  --dual-slab-body-large-letter-spacing: 0;
  --dual-slab-body-medium-font-size: 16px;
  --dual-slab-body-medium-line-height: 24px;
  --dual-slab-body-medium-letter-spacing: 0;
  --dual-slab-body-small-font-size: 14px;
  --dual-slab-body-small-line-height: 20px;
  --dual-slab-body-small-letter-spacing: 0;
  --dual-slab-body-x-small-font-size: 12px;
  --dual-slab-body-x-small-line-height: 16px;
  --dual-slab-body-x-small-letter-spacing: 0;
  --dual-slab-intro-large-font-size: 18px;
  --dual-slab-intro-large-line-height: 28px;
  --dual-slab-intro-large-letter-spacing: 0;
  --dual-slab-intro-medium-font-size: 16px;
  --dual-slab-intro-medium-line-height: 24px;
  --dual-slab-intro-medium-letter-spacing: 0;
  --dual-slab-quote-large-font-size: 36px;
  --dual-slab-quote-large-line-height: 44px;
  --dual-slab-quote-large-letter-spacing: 0;
  --dual-slab-quote-medium-font-size: 32px;
  --dual-slab-quote-medium-line-height: 48px;
  --dual-slab-quote-medium-letter-spacing: 0;
  --dual-slab-topline-font-size: 14px;
  --dual-slab-topline-line-height: 20px;
  --dual-slab-topline-letter-spacing: 1px;
  --dual-sans-font-family: Siemens Sans Pro VF, sans-serif;
  --dual-sans-font-weight-roman: 400;
  --dual-sans-font-weight-sbold: 600;
  --dual-sans-font-weight-bold: 700;
  --dual-slab-font-family: Siemens Slab, serif;
  --dual-slab-font-weight-roman: 400;
  --dual-slab-font-weight-sbold: 600;
  --dual-slab-font-weight-bold: 700;
  --dual-effect-shadow-small: 0 1px 3px rgba(0, 0, 40, 0.08);
  --dual-effect-shadow-medium: 0 4px 12px rgba(0, 0, 40, 0.12);
  --dual-effect-shadow-large: 0 8px 24px rgba(0, 0, 40, 0.16);
  --dual-effect-gradient-fade-down: linear-gradient(180deg, rgba(0, 0, 40, 0) 0%, rgba(0, 0, 40, 0.08) 100%);
  --dual-effect-gradient-brand: linear-gradient(90deg, #00ffb9 0%, #00e6dc 100%);
  --dual-border-width-small: 1px;
  --dual-border-width-medium: 2px;
  --dual-border-width-large: 3px;
  --dual-border-width-x-large: 4px;
  --dual-border-radius-xx-small: 2px;
  --dual-border-radius-x-small: 4px;
  --dual-border-radius-small: 8px;
  --dual-border-radius-medium: 12px;
  --dual-border-radius-large: 16px;
  --dual-border-radius-x-large: 24px;
  --dual-border-radius-xx-large: 32px;
  --dual-border-radius-round: 9999px;
  --dual-vw-100: 100vw;
  --dual-vw-80: 80vw;
  --dual-vw-60: 60vw;
  --dual-vw-40: 40vw;
  --dual-vw-20: 20vw;
  --dual-z-1000: 1000;
  --dual-z-900: 900;
  --dual-z-800: 800;
  --dual-z-700: 700;
  --dual-z-600: 600;
  --dual-grid-container: 1280px;
  --dual-grid-cols: 12;
}

:root {
  --dual-layout-block-container-space-sm: 24px;
  --dual-layout-block-container-space-md: 32px;
  --dual-layout-block-container-space-lg: 40px;
  --dual-layout-block-horizontal-space-sm: 24px;
  --dual-layout-block-horizontal-space-md: 32px;
  --dual-layout-block-horizontal-space-lg: 80px;
  --dual-layout-block-vertical-space-sm: 48px;
  --dual-layout-block-vertical-space-md: 64px;
  --dual-layout-block-vertical-space-lg: 120px;
  --dual-layout-viewport-u-static-vp-margin: 320px;
  --dual-layout-viewport-u-viewport-height: 1080px;
  --dual-layout-viewport-vp-content-gutter: 32px;
  --dual-layout-viewport-vp-content-margin: 0px;
  --dual-layout-viewport-vp-content-max: 1600px;
  --dual-layout-viewport-vp-width: 1920px;
}

@media (max-width: 1439.98px) {
  :root {
    --dual-layout-block-container-space-sm: 16px;
    --dual-layout-block-container-space-md: 24px;
    --dual-layout-block-container-space-lg: 32px;
    --dual-layout-block-horizontal-space-sm: 16px;
    --dual-layout-block-horizontal-space-md: 32px;
    --dual-layout-block-horizontal-space-lg: 56px;
    --dual-layout-block-vertical-space-sm: 32px;
    --dual-layout-block-vertical-space-md: 48px;
    --dual-layout-block-vertical-space-lg: 80px;
    --dual-layout-viewport-u-static-vp-margin: 80px;
    --dual-layout-viewport-u-viewport-height: 960px;
    --dual-layout-viewport-vp-content-gutter: 32px;
    --dual-layout-viewport-vp-content-margin: 0px;
    --dual-layout-viewport-vp-content-max: 1280px;
    --dual-layout-viewport-vp-width: 1440px;
  }
}
@media (max-width: 1023.98px) {
  :root {
    --dual-layout-block-container-space-sm: 16px;
    --dual-layout-block-container-space-md: 24px;
    --dual-layout-block-container-space-lg: 24px;
    --dual-layout-block-horizontal-space-sm: 16px;
    --dual-layout-block-horizontal-space-md: 32px;
    --dual-layout-block-horizontal-space-lg: 40px;
    --dual-layout-block-vertical-space-sm: 32px;
    --dual-layout-block-vertical-space-md: 40px;
    --dual-layout-block-vertical-space-lg: 64px;
    --dual-layout-viewport-u-static-vp-margin: 32px;
    --dual-layout-viewport-u-viewport-height: 768px;
    --dual-layout-viewport-vp-content-gutter: 32px;
    --dual-layout-viewport-vp-content-margin: 32px;
    --dual-layout-viewport-vp-content-max: 1280px;
    --dual-layout-viewport-vp-width: 1024px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --dual-layout-block-container-space-sm: 16px;
    --dual-layout-block-container-space-md: 16px;
    --dual-layout-block-container-space-lg: 24px;
    --dual-layout-block-horizontal-space-sm: 16px;
    --dual-layout-block-horizontal-space-md: 32px;
    --dual-layout-block-horizontal-space-lg: 32px;
    --dual-layout-block-vertical-space-sm: 32px;
    --dual-layout-block-vertical-space-md: 32px;
    --dual-layout-block-vertical-space-lg: 56px;
    --dual-layout-viewport-u-static-vp-margin: 32px;
    --dual-layout-viewport-u-viewport-height: 1024px;
    --dual-layout-viewport-vp-content-gutter: 32px;
    --dual-layout-viewport-vp-content-margin: 32px;
    --dual-layout-viewport-vp-content-max: 1280px;
    --dual-layout-viewport-vp-width: 768px;
  }
}
@media (max-width: 543.98px) {
  :root {
    --dual-layout-block-container-space-sm: 16px;
    --dual-layout-block-container-space-md: 16px;
    --dual-layout-block-container-space-lg: 16px;
    --dual-layout-block-horizontal-space-sm: 16px;
    --dual-layout-block-horizontal-space-md: 32px;
    --dual-layout-block-horizontal-space-lg: 24px;
    --dual-layout-block-vertical-space-sm: 32px;
    --dual-layout-block-vertical-space-md: 32px;
    --dual-layout-block-vertical-space-lg: 48px;
    --dual-layout-viewport-u-static-vp-margin: 16px;
    --dual-layout-viewport-u-viewport-height: 800px;
    --dual-layout-viewport-vp-content-gutter: 32px;
    --dual-layout-viewport-vp-content-margin: 32px;
    --dual-layout-viewport-vp-content-max: 1280px;
    --dual-layout-viewport-vp-width: 544px;
  }
}

/* ═══ Base (reset + element type) ═══ */
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/SiemensSansProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: italic;
  font-weight: 400;
  src: url("../assets/fonts/SiemensSansProVF_Italics_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/fonts/SiemensSansProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: italic;
  font-weight: 600;
  src: url("../assets/fonts/SiemensSansProVF_Italics_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/SiemensSansProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: italic;
  font-weight: 700;
  src: url("../assets/fonts/SiemensSansProVF_Italics_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/SiemensSlabProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: italic;
  font-weight: 400;
  src: url("../assets/fonts/SiemensSlabProVF_Italics_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/fonts/SiemensSlabProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: italic;
  font-weight: 600;
  src: url("../assets/fonts/SiemensSlabProVF_Italics_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/SiemensSlabProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: italic;
  font-weight: 700;
  src: url("../assets/fonts/SiemensSlabProVF_Italics_W_Wght.woff2") format("woff2");
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
  margin-block: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-block-size: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-inline-size: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
h1 {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-display-medium-font-size);
  font-weight: var(--dual-sans-font-weight-bold);
  line-height: var(--dual-sans-display-medium-line-height);
  letter-spacing: var(--dual-sans-display-medium-letter-spacing);
}

h2 {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-title-medium-font-size);
  font-weight: var(--dual-sans-font-weight-bold);
  line-height: var(--dual-sans-title-medium-line-height);
  letter-spacing: var(--dual-sans-title-medium-letter-spacing);
}

h3 {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-title-small-font-size);
  font-weight: var(--dual-sans-font-weight-bold);
  line-height: var(--dual-sans-title-small-line-height);
  letter-spacing: var(--dual-sans-title-small-letter-spacing);
}

h4 {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-large-font-size);
  font-weight: var(--dual-sans-font-weight-sbold);
  line-height: var(--dual-sans-body-large-line-height);
  letter-spacing: var(--dual-sans-body-large-letter-spacing);
}

h5 {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  font-weight: var(--dual-sans-font-weight-sbold);
  line-height: var(--dual-sans-body-medium-line-height);
  letter-spacing: var(--dual-sans-body-medium-letter-spacing);
}

h6 {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  font-weight: var(--dual-sans-font-weight-sbold);
  line-height: var(--dual-sans-body-small-line-height);
  letter-spacing: var(--dual-sans-body-small-letter-spacing);
}

p {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  font-weight: var(--dual-sans-font-weight-roman);
  line-height: var(--dual-sans-body-medium-line-height);
  letter-spacing: var(--dual-sans-body-medium-letter-spacing);
}

blockquote {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-quote-large-font-size);
  font-weight: var(--dual-sans-font-weight-roman);
  line-height: var(--dual-sans-quote-large-line-height);
  letter-spacing: var(--dual-sans-quote-large-letter-spacing);
}

small {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  font-weight: var(--dual-sans-font-weight-roman);
  line-height: var(--dual-sans-body-small-line-height);
  letter-spacing: var(--dual-sans-body-small-letter-spacing);
}

strong,
b {
  font-weight: var(--dual-sans-font-weight-bold, 700);
}

em,
i {
  font-style: italic;
}

a {
  color: var(--dual-ui-interactive-1);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration: none;
}

a:visited {
  color: var(--dual-action-content-visited);
}

code,
kbd,
samp {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--dual-base-2);
  border-radius: var(--dual-border-radius-small);
  padding: 0.1em 0.35em;
}

pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--dual-base-2);
  color: var(--dual-text-1);
  border: var(--dual-border-width-small) solid var(--dual-ui-2);
  border-radius: var(--dual-border-radius-small);
  padding: var(--dual-pad-medium);
  overflow-x: auto;
  line-height: 1.5;
}

pre code {
  background: none;
  padding: 0;
  font-size: 1em;
}

ul,
ol {
  padding-inline-start: 1.4em;
  margin-block: var(--dual-gap-small);
}

li {
  margin-block: 0.2em;
}

li > ul,
li > ol {
  margin-block: 0.2em;
}

dl {
  margin-block: var(--dual-gap-small);
}

dt {
  font-weight: var(--dual-sans-font-weight-bold, 700);
}

dd {
  margin-inline-start: 1.4em;
  color: var(--dual-text-2);
}

hr {
  border: 0;
  border-block-start: var(--dual-border-width-small) solid var(--dual-ui-2);
  margin-block: var(--dual-gap-medium);
}

table {
  border-collapse: collapse;
  inline-size: 100%;
  margin-block: var(--dual-gap-small);
}

caption {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  font-weight: var(--dual-sans-font-weight-roman);
  line-height: var(--dual-sans-body-small-line-height);
  letter-spacing: var(--dual-sans-body-small-letter-spacing);
  color: var(--dual-text-2);
  text-align: start;
  padding-block-end: 0.4em;
}

th,
td {
  border: var(--dual-border-width-small) solid var(--dual-ui-2);
  padding: var(--dual-pad-small);
  text-align: start;
  vertical-align: top;
}

thead th {
  background: var(--dual-base-2);
  font-weight: var(--dual-sans-font-weight-bold, 700);
}

label {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  font-weight: var(--dual-sans-font-weight-roman);
  line-height: var(--dual-sans-body-medium-line-height);
  letter-spacing: var(--dual-sans-body-medium-letter-spacing);
  display: inline-block;
}

fieldset {
  border: var(--dual-border-width-small) solid var(--dual-ui-2);
  border-radius: var(--dual-border-radius-small);
  padding: var(--dual-pad-medium);
  margin-block: var(--dual-gap-small);
}

legend {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  font-weight: var(--dual-sans-font-weight-sbold);
  line-height: var(--dual-sans-body-small-line-height);
  letter-spacing: var(--dual-sans-body-small-letter-spacing);
  padding-inline: 0.4em;
  color: var(--dual-text-2);
}

/* ═══ Utilities (u-*) ═══ */
.iris-font-sans {
  font-family: var(--dual-sans-font-family);
}

.iris-font-slab {
  font-family: var(--dual-slab-font-family);
}

.iris-weight-roman {
  font-weight: var(--dual-sans-font-weight-roman);
}

.iris-font-slab.iris-weight-roman,
.iris-font-slab .iris-weight-roman {
  font-weight: var(--dual-slab-font-weight-roman);
}

.iris-weight-sbold {
  font-weight: var(--dual-sans-font-weight-sbold);
}

.iris-font-slab.iris-weight-sbold,
.iris-font-slab .iris-weight-sbold {
  font-weight: var(--dual-slab-font-weight-sbold);
}

.iris-weight-bold {
  font-weight: var(--dual-sans-font-weight-bold);
}

.iris-font-slab.iris-weight-bold,
.iris-font-slab .iris-weight-bold {
  font-weight: var(--dual-slab-font-weight-bold);
}

.iris-text-display-large {
  font-size: var(--dual-sans-display-large-font-size);
  line-height: var(--dual-sans-display-large-line-height);
  letter-spacing: var(--dual-sans-display-large-letter-spacing);
}

.iris-font-slab.iris-text-display-large,
.iris-font-slab .iris-text-display-large {
  font-size: var(--dual-slab-display-large-font-size);
  line-height: var(--dual-slab-display-large-line-height);
  letter-spacing: var(--dual-slab-display-large-letter-spacing);
}

.iris-text-display-medium {
  font-size: var(--dual-sans-display-medium-font-size);
  line-height: var(--dual-sans-display-medium-line-height);
  letter-spacing: var(--dual-sans-display-medium-letter-spacing);
}

.iris-font-slab.iris-text-display-medium,
.iris-font-slab .iris-text-display-medium {
  font-size: var(--dual-slab-display-medium-font-size);
  line-height: var(--dual-slab-display-medium-line-height);
  letter-spacing: var(--dual-slab-display-medium-letter-spacing);
}

.iris-text-display-small {
  font-size: var(--dual-sans-display-small-font-size);
  line-height: var(--dual-sans-display-small-line-height);
  letter-spacing: var(--dual-sans-display-small-letter-spacing);
}

.iris-font-slab.iris-text-display-small,
.iris-font-slab .iris-text-display-small {
  font-size: var(--dual-slab-display-small-font-size);
  line-height: var(--dual-slab-display-small-line-height);
  letter-spacing: var(--dual-slab-display-small-letter-spacing);
}

.iris-text-title-large {
  font-size: var(--dual-sans-title-large-font-size);
  line-height: var(--dual-sans-title-large-line-height);
  letter-spacing: var(--dual-sans-title-large-letter-spacing);
}

.iris-font-slab.iris-text-title-large,
.iris-font-slab .iris-text-title-large {
  font-size: var(--dual-slab-title-large-font-size);
  line-height: var(--dual-slab-title-large-line-height);
  letter-spacing: var(--dual-slab-title-large-letter-spacing);
}

.iris-text-title-medium {
  font-size: var(--dual-sans-title-medium-font-size);
  line-height: var(--dual-sans-title-medium-line-height);
  letter-spacing: var(--dual-sans-title-medium-letter-spacing);
}

.iris-font-slab.iris-text-title-medium,
.iris-font-slab .iris-text-title-medium {
  font-size: var(--dual-slab-title-medium-font-size);
  line-height: var(--dual-slab-title-medium-line-height);
  letter-spacing: var(--dual-slab-title-medium-letter-spacing);
}

.iris-text-title-small {
  font-size: var(--dual-sans-title-small-font-size);
  line-height: var(--dual-sans-title-small-line-height);
  letter-spacing: var(--dual-sans-title-small-letter-spacing);
}

.iris-font-slab.iris-text-title-small,
.iris-font-slab .iris-text-title-small {
  font-size: var(--dual-slab-title-small-font-size);
  line-height: var(--dual-slab-title-small-line-height);
  letter-spacing: var(--dual-slab-title-small-letter-spacing);
}

.iris-text-body-x-large {
  font-size: var(--dual-sans-body-x-large-font-size);
  line-height: var(--dual-sans-body-x-large-line-height);
  letter-spacing: var(--dual-sans-body-x-large-letter-spacing);
}

.iris-font-slab.iris-text-body-x-large,
.iris-font-slab .iris-text-body-x-large {
  font-size: var(--dual-slab-body-x-large-font-size);
  line-height: var(--dual-slab-body-x-large-line-height);
  letter-spacing: var(--dual-slab-body-x-large-letter-spacing);
}

.iris-text-body-large {
  font-size: var(--dual-sans-body-large-font-size);
  line-height: var(--dual-sans-body-large-line-height);
  letter-spacing: var(--dual-sans-body-large-letter-spacing);
}

.iris-font-slab.iris-text-body-large,
.iris-font-slab .iris-text-body-large {
  font-size: var(--dual-slab-body-large-font-size);
  line-height: var(--dual-slab-body-large-line-height);
  letter-spacing: var(--dual-slab-body-large-letter-spacing);
}

.iris-text-body-medium {
  font-size: var(--dual-sans-body-medium-font-size);
  line-height: var(--dual-sans-body-medium-line-height);
  letter-spacing: var(--dual-sans-body-medium-letter-spacing);
}

.iris-font-slab.iris-text-body-medium,
.iris-font-slab .iris-text-body-medium {
  font-size: var(--dual-slab-body-medium-font-size);
  line-height: var(--dual-slab-body-medium-line-height);
  letter-spacing: var(--dual-slab-body-medium-letter-spacing);
}

.iris-text-body-small {
  font-size: var(--dual-sans-body-small-font-size);
  line-height: var(--dual-sans-body-small-line-height);
  letter-spacing: var(--dual-sans-body-small-letter-spacing);
}

.iris-font-slab.iris-text-body-small,
.iris-font-slab .iris-text-body-small {
  font-size: var(--dual-slab-body-small-font-size);
  line-height: var(--dual-slab-body-small-line-height);
  letter-spacing: var(--dual-slab-body-small-letter-spacing);
}

.iris-text-body-x-small {
  font-size: var(--dual-sans-body-x-small-font-size);
  line-height: var(--dual-sans-body-x-small-line-height);
  letter-spacing: var(--dual-sans-body-x-small-letter-spacing);
}

.iris-font-slab.iris-text-body-x-small,
.iris-font-slab .iris-text-body-x-small {
  font-size: var(--dual-slab-body-x-small-font-size);
  line-height: var(--dual-slab-body-x-small-line-height);
  letter-spacing: var(--dual-slab-body-x-small-letter-spacing);
}

.iris-text-intro-large {
  font-size: var(--dual-sans-intro-large-font-size);
  line-height: var(--dual-sans-intro-large-line-height);
  letter-spacing: var(--dual-sans-intro-large-letter-spacing);
}

.iris-font-slab.iris-text-intro-large,
.iris-font-slab .iris-text-intro-large {
  font-size: var(--dual-slab-intro-large-font-size);
  line-height: var(--dual-slab-intro-large-line-height);
  letter-spacing: var(--dual-slab-intro-large-letter-spacing);
}

.iris-text-intro-medium {
  font-size: var(--dual-sans-intro-medium-font-size);
  line-height: var(--dual-sans-intro-medium-line-height);
  letter-spacing: var(--dual-sans-intro-medium-letter-spacing);
}

.iris-font-slab.iris-text-intro-medium,
.iris-font-slab .iris-text-intro-medium {
  font-size: var(--dual-slab-intro-medium-font-size);
  line-height: var(--dual-slab-intro-medium-line-height);
  letter-spacing: var(--dual-slab-intro-medium-letter-spacing);
}

.iris-text-quote-large {
  font-size: var(--dual-sans-quote-large-font-size);
  line-height: var(--dual-sans-quote-large-line-height);
  letter-spacing: var(--dual-sans-quote-large-letter-spacing);
}

.iris-font-slab.iris-text-quote-large,
.iris-font-slab .iris-text-quote-large {
  font-size: var(--dual-slab-quote-large-font-size);
  line-height: var(--dual-slab-quote-large-line-height);
  letter-spacing: var(--dual-slab-quote-large-letter-spacing);
}

.iris-text-quote-medium {
  font-size: var(--dual-sans-quote-medium-font-size);
  line-height: var(--dual-sans-quote-medium-line-height);
  letter-spacing: var(--dual-sans-quote-medium-letter-spacing);
}

.iris-font-slab.iris-text-quote-medium,
.iris-font-slab .iris-text-quote-medium {
  font-size: var(--dual-slab-quote-medium-font-size);
  line-height: var(--dual-slab-quote-medium-line-height);
  letter-spacing: var(--dual-slab-quote-medium-letter-spacing);
}

.iris-text-topline {
  font-size: var(--dual-sans-topline-font-size);
  line-height: var(--dual-sans-topline-line-height);
  letter-spacing: var(--dual-sans-topline-letter-spacing);
}

.iris-font-slab.iris-text-topline,
.iris-font-slab .iris-text-topline {
  font-size: var(--dual-slab-topline-font-size);
  line-height: var(--dual-slab-topline-line-height);
  letter-spacing: var(--dual-slab-topline-letter-spacing);
}

.u-block {
  display: block !important;
}

.u-inlineBlock {
  display: inline-block !important;
}

.u-inline {
  display: inline !important;
}

.u-flex {
  display: flex !important;
}

.u-inlineFlex {
  display: inline-flex !important;
}

.u-grid {
  display: grid !important;
}

.u-hidden {
  display: none !important;
}

.u-visible {
  visibility: visible !important;
}

.u-invisible {
  visibility: hidden !important;
}

.u-flexRow {
  flex-direction: row !important;
}

.u-flexCol {
  flex-direction: column !important;
}

.u-flexRowReverse {
  flex-direction: row-reverse !important;
}

.u-flexWrap {
  flex-wrap: wrap !important;
}

.u-flexNoWrap {
  flex-wrap: nowrap !important;
}

.u-flexCenter {
  align-items: center !important;
  justify-content: center !important;
}

.u-flexAlignStart {
  align-items: flex-start !important;
}

.u-flexAlignCenter {
  align-items: center !important;
}

.u-flexAlignEnd {
  align-items: flex-end !important;
}

.u-flexAlignStretch {
  align-items: stretch !important;
}

.u-flexJustifyStart {
  justify-content: flex-start !important;
}

.u-flexJustifyCenter {
  justify-content: center !important;
}

.u-flexJustifyEnd {
  justify-content: flex-end !important;
}

.u-flexJustifyBetween {
  justify-content: space-between !important;
}

.u-flexGrow1 {
  flex-grow: 1 !important;
}

.u-flexGrow0 {
  flex-grow: 0 !important;
}

.u-flexShrink0 {
  flex-shrink: 0 !important;
}

.u-flexShrink1 {
  flex-shrink: 1 !important;
}

.u-marginT-xs {
  margin-top: var(--dual-gap-x-small) !important;
}

.u-marginT-sm {
  margin-top: var(--dual-gap-small) !important;
}

.u-marginT-md {
  margin-top: var(--dual-gap-medium) !important;
}

.u-marginT-lg {
  margin-top: var(--dual-pad-large) !important;
}

.u-marginB-xs {
  margin-bottom: var(--dual-gap-x-small) !important;
}

.u-marginB-sm {
  margin-bottom: var(--dual-gap-small) !important;
}

.u-marginB-md {
  margin-bottom: var(--dual-gap-medium) !important;
}

.u-marginB-lg {
  margin-bottom: var(--dual-pad-large) !important;
}

.u-marginL-sm {
  margin-left: var(--dual-gap-small) !important;
}

.u-marginR-sm {
  margin-right: var(--dual-gap-small) !important;
}

.u-margin0 {
  margin: 0 !important;
}

.u-padding-xs {
  padding: var(--dual-gap-x-small) !important;
}

.u-padding-sm {
  padding: var(--dual-pad-x-small) !important;
}

.u-padding-md {
  padding: var(--dual-pad-medium) !important;
}

.u-padding-lg {
  padding: var(--dual-pad-large) !important;
}

.u-paddingX-sm {
  padding-left: var(--dual-pad-x-small) !important;
  padding-right: var(--dual-pad-x-small) !important;
}

.u-paddingX-md {
  padding-left: var(--dual-pad-medium) !important;
  padding-right: var(--dual-pad-medium) !important;
}

.u-paddingX-lg {
  padding-left: var(--dual-pad-x-large) !important;
  padding-right: var(--dual-pad-x-large) !important;
}

.u-paddingY-sm {
  padding-top: var(--dual-gap-small) !important;
  padding-bottom: var(--dual-gap-small) !important;
}

.u-paddingY-md {
  padding-top: var(--dual-gap-medium) !important;
  padding-bottom: var(--dual-gap-medium) !important;
}

.u-padding0 {
  padding: 0 !important;
}

.u-gap-xs {
  gap: var(--dual-gap-x-small) !important;
}

.u-gap-sm {
  gap: var(--dual-gap-small) !important;
}

.u-gap-md {
  gap: var(--dual-gap-medium) !important;
}

.u-gap-lg {
  gap: var(--dual-gap-large) !important;
}

.u-gap-xl {
  gap: var(--dual-gap-x-large) !important;
}

.u-stack-sm > * + * {
  margin-block-start: var(--dual-gap-small) !important;
}

.u-stack-md > * + * {
  margin-block-start: var(--dual-gap-medium) !important;
}

.u-stack-lg > * + * {
  margin-block-start: var(--dual-gap-large) !important;
}

.u-textCenter {
  text-align: center !important;
}

.u-textLeft {
  text-align: left !important;
}

.u-textRight {
  text-align: right !important;
}

.u-textTruncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.u-textBreak {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.u-textNoWrap {
  white-space: nowrap !important;
}

.u-textBold {
  font-weight: 700 !important;
}

.u-textSemibold {
  font-weight: 600 !important;
}

.u-textNormal {
  font-weight: 400 !important;
}

.u-textSmall {
  font-size: var(--dual-sans-body-small-font-size) !important;
}

.u-textMuted {
  color: var(--dual-text-secondary) !important;
}

.u-textPrimary {
  color: var(--dual-text-primary) !important;
}

.u-textDisabled {
  color: var(--dual-text-disabled) !important;
}

.u-textDanger {
  color: var(--dual-text-caution) !important;
}

.u-textSuccess {
  color: var(--dual-status-success) !important;
}

.u-sizeFull {
  width: 100% !important;
}

.u-sizeHalf {
  width: 50% !important;
}

.u-sizeAuto {
  width: auto !important;
}

.u-maxSizeFull {
  max-width: 100% !important;
}

.u-heightFull {
  height: 100% !important;
}

.u-heightAuto {
  height: auto !important;
}

.u-color-primary {
  color: var(--dual-text-primary) !important;
}

.u-color-secondary {
  color: var(--dual-text-secondary) !important;
}

.u-color-disabled {
  color: var(--dual-text-disabled) !important;
}

.u-color-info {
  color: var(--dual-text-info) !important;
}

.u-color-success {
  color: var(--dual-text-success) !important;
}

.u-color-warning {
  color: var(--dual-text-warning) !important;
}

.u-color-danger {
  color: var(--dual-text-danger) !important;
}

.u-color-caution {
  color: var(--dual-text-caution) !important;
}

.u-bg-1 {
  background-color: var(--dual-base-1) !important;
}

.u-bg-2 {
  background-color: var(--dual-base-2) !important;
}

.u-bg-hover {
  background-color: var(--dual-base-hover) !important;
}

.u-bg-selected {
  background-color: var(--dual-base-selected) !important;
}

.u-bg-info {
  background-color: var(--dual-base-info) !important;
}

.u-bg-success {
  background-color: var(--dual-base-success) !important;
}

.u-bg-warning {
  background-color: var(--dual-base-warning) !important;
}

.u-bg-danger {
  background-color: var(--dual-base-danger) !important;
}

/* ═══ Grid ═══ */
.FlexGrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dual-grid-gutter-width, var(--dual-gap-medium));
}

.FlexGrid--alignCenter {
  align-items: center;
}

.FlexGrid--alignEnd {
  align-items: flex-end;
}

.FlexGrid--alignStretch {
  align-items: stretch;
}

.FlexGrid--justifyCenter {
  justify-content: center;
}

.FlexGrid--justifyBetween {
  justify-content: space-between;
}

.FlexGrid--justifyEnd {
  justify-content: flex-end;
}

.FlexGrid-cell {
  box-sizing: border-box;
}

.FlexGrid-cell--1of2 {
  flex: 0 0 calc(50% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) / 2);
}

.FlexGrid-cell--1of3 {
  flex: 0 0 calc(33.333% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 2 / 3);
}

.FlexGrid-cell--2of3 {
  flex: 0 0 calc(66.667% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) / 3);
}

.FlexGrid-cell--1of4 {
  flex: 0 0 calc(25% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 3 / 4);
}

.FlexGrid-cell--3of4 {
  flex: 0 0 calc(75% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) / 4);
}

.FlexGrid-cell--1of6 {
  flex: 0 0 calc(16.667% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 5 / 6);
}

.FlexGrid-cell--5of6 {
  flex: 0 0 calc(83.333% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) / 6);
}

.FlexGrid-cell--full {
  flex: 0 0 100%;
}

.FlexGrid-cell--auto {
  flex: 1 1 0;
  min-width: 0;
}

@media (min-width: 544px) {
  .FlexGrid-cell--sm-1of2 {
    flex: 0 0 calc(50% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) / 2);
  }
  .FlexGrid-cell--sm-1of3 {
    flex: 0 0 calc(33.333% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 2 / 3);
  }
  .FlexGrid-cell--sm-full {
    flex: 0 0 100%;
  }
}
@media (min-width: 768px) {
  .FlexGrid-cell--md-1of2 {
    flex: 0 0 calc(50% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) / 2);
  }
  .FlexGrid-cell--md-1of3 {
    flex: 0 0 calc(33.333% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 2 / 3);
  }
  .FlexGrid-cell--md-2of3 {
    flex: 0 0 calc(66.667% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) / 3);
  }
  .FlexGrid-cell--md-1of4 {
    flex: 0 0 calc(25% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 3 / 4);
  }
  .FlexGrid-cell--md-full {
    flex: 0 0 100%;
  }
}
@media (min-width: 1024px) {
  .FlexGrid-cell--lg-1of2 {
    flex: 0 0 calc(50% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) / 2);
  }
  .FlexGrid-cell--lg-1of3 {
    flex: 0 0 calc(33.333% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 2 / 3);
  }
  .FlexGrid-cell--lg-2of3 {
    flex: 0 0 calc(66.667% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) / 3);
  }
  .FlexGrid-cell--lg-1of4 {
    flex: 0 0 calc(25% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 3 / 4);
  }
  .FlexGrid-cell--lg-3of4 {
    flex: 0 0 calc(75% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) / 4);
  }
  .FlexGrid-cell--lg-full {
    flex: 0 0 100%;
  }
}
@media (min-width: 1440px) {
  .FlexGrid-cell--xl-1of2 {
    flex: 0 0 calc(50% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) / 2);
  }
  .FlexGrid-cell--xl-1of3 {
    flex: 0 0 calc(33.333% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 2 / 3);
  }
  .FlexGrid-cell--xl-1of4 {
    flex: 0 0 calc(25% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 3 / 4);
  }
}
@media (min-width: 1920px) {
  .FlexGrid-cell--xxl-1of4 {
    flex: 0 0 calc(25% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 3 / 4);
  }
  .FlexGrid-cell--xxl-1of6 {
    flex: 0 0 calc(16.667% - var(--dual-grid-gutter-width, var(--dual-gap-medium)) * 5 / 6);
  }
}
.CssGrid {
  display: grid;
  grid-template-columns: repeat(var(--dual-grid-cols, 12), minmax(0, 1fr));
  gap: var(--dual-grid-gutter-width, var(--dual-gap-medium));
}

.CssGrid-cell--span2 {
  grid-column: span 2;
}

.CssGrid-cell--span3 {
  grid-column: span 3;
}

.CssGrid-cell--span4 {
  grid-column: span 4;
}

.CssGrid-cell--span6 {
  grid-column: span 6;
}

.CssGrid-cell--span8 {
  grid-column: span 8;
}

.CssGrid-cell--span12 {
  grid-column: span 12;
}

.CssGrid-cell--rowSpan2 {
  grid-row: span 2;
}

.CssGrid-cell--rowSpan3 {
  grid-row: span 3;
}

.CssGrid--autoFit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--dual-grid-min-cell, 16rem), 1fr));
  gap: var(--dual-grid-gutter-width, var(--dual-gap-medium));
}

.CssGrid--bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--dual-bento-row-height, 180px);
  gap: var(--dual-grid-gutter-width, var(--dual-gap-medium));
  grid-auto-flow: dense;
}

.CssGrid--bento .CssGrid-cell--hero {
  grid-column: span 2;
  grid-row: span 2;
}

.CssGrid--bento .CssGrid-cell--wide {
  grid-column: span 2;
}

@media (max-width: 767.98px) {
  .CssGrid--bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 543.98px) {
  .CssGrid--bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .CssGrid--bento .CssGrid-cell--hero,
  .CssGrid--bento .CssGrid-cell--wide {
    grid-column: auto;
    grid-row: auto;
  }
}
.Dual-Stack {
  display: flex;
  flex-direction: column;
  gap: var(--dual-stack-space, var(--dual-gap-medium));
}

.Dual-Stack--sm {
  --dual-stack-space: var(--dual-gap-small);
}

.Dual-Stack--lg {
  --dual-stack-space: var(--dual-gap-x-large);
}

.Dual-Stack--xl {
  --dual-stack-space: var(--dual-gap-x-large);
}

.Dual-Cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dual-cluster-space, var(--dual-gap-small));
  align-items: center;
}

.Dual-Cluster--between {
  justify-content: space-between;
}

.Dual-Cluster--center {
  justify-content: center;
}

.Dual-Sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dual-sidebar-gap, var(--dual-gap-large));
}

.Dual-Sidebar-side {
  flex-basis: 16rem;
  flex-grow: 1;
}

.Dual-Sidebar-main {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

.Dual-Switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dual-switcher-gap, var(--dual-gap-medium));
}

.Dual-Switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--dual-switcher-threshold, 30rem) - 100%) * 999);
}

.Dual-Center {
  box-sizing: content-box;
  max-inline-size: var(--dual-center-measure, var(--dual-size-content-medium));
  margin-inline: auto;
  padding-inline: var(--dual-pad-x-large);
}

.Dual-Reel {
  display: flex;
  gap: var(--dual-reel-gap, var(--dual-gap-medium));
  overflow-x: auto;
  overflow-y: hidden;
}

.Dual-Reel > * {
  flex-shrink: 0;
}

.Dual-Cover {
  display: flex;
  flex-direction: column;
  min-block-size: var(--dual-cover-height, 100vh);
  padding: var(--dual-pad-x-large);
}

.Dual-Cover-principal {
  margin-block: auto;
}

.Dual-Box {
  padding: var(--dual-box-pad, var(--dual-pad-large));
  border: var(--dual-border-width-hairline, 1px) solid var(--dual-box-border, currentColor);
}

.Dual-Box--invert {
  color: var(--dual-box-invert-content, inherit);
  background: var(--dual-box-invert-fill, transparent);
}

.Dual-Frame {
  aspect-ratio: var(--dual-frame-ratio, 16/9);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Dual-Frame > * {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.Dual-Imposter {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  max-inline-size: calc(100% - var(--dual-imposter-margin, var(--dual-gap-medium)) * 2);
  max-block-size: calc(100% - var(--dual-imposter-margin, var(--dual-gap-medium)) * 2);
  overflow: auto;
}

.Dual-Imposter--fixed {
  position: fixed;
}

/* ═══ Components ═══ */
/* ── Dual-alert ── */
.Dual-Alert {
  --dual-alert-fill: var(--dual-base-info);
  --dual-alert-accent-color: var(--dual-status-information);
  --dual-alert-content-color: var(--dual-text-1);
  --dual-alert-icon-color: var(--dual-status-information);
  background: var(--dual-alert-fill);
  border: var(--dual-border-width-medium) solid var(--dual-alert-accent-color);
  border-radius: 0;
  color: var(--dual-alert-content-color);
  display: flex;
  gap: var(--dual-gap-medium);
  padding: var(--dual-pad-x-large);
}

.Dual-Alert-icon {
  color: var(--dual-alert-icon-color);
  flex-shrink: 0;
  block-size: var(--dual-height-20);
  inline-size: var(--dual-width-20);
}

.Dual-Alert-content {
  display: flex;
  flex-direction: column;
  gap: var(--dual-gap-x-small);
}

.Dual-Alert-title {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  font-weight: var(--dual-sans-font-weight-sbold);
  line-height: var(--dual-sans-body-medium-line-height);
}

.Dual-Alert-body {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  line-height: var(--dual-sans-body-small-line-height);
}

.Dual-Alert--info {
  --dual-alert-fill: var(--dual-base-info);
  --dual-alert-accent-color: var(--dual-status-information);
  --dual-alert-icon-color: var(--dual-status-information);
}

.Dual-Alert--success {
  --dual-alert-fill: var(--dual-base-success);
  --dual-alert-accent-color: var(--dual-status-success);
  --dual-alert-icon-color: var(--dual-status-success);
}

.Dual-Alert--warning {
  --dual-alert-fill: var(--dual-base-warning);
  --dual-alert-accent-color: var(--dual-status-warning);
  --dual-alert-icon-color: var(--dual-status-warning);
}

.Dual-Alert--danger {
  --dual-alert-fill: var(--dual-base-danger);
  --dual-alert-accent-color: var(--dual-status-danger);
  --dual-alert-icon-color: var(--dual-status-danger);
}

/* ── Dual-attribution ── */
.Dual-Attribution {
  --dual-attribution-name-color: var(--dual-text-1);
  --dual-attribution-role-color: var(--dual-text-2);
  --dual-attribution-divider-color: var(--dual-ui-2);
  align-items: center;
  display: flex;
  gap: var(--dual-gap-medium);
}

.Dual-Attribution-avatar {
  block-size: var(--dual-height-40);
  border-radius: var(--dual-border-radius-round);
  flex-shrink: 0;
  inline-size: var(--dual-width-40);
  object-fit: cover;
}

.Dual-Attribution-text {
  display: flex;
  flex-direction: column;
  gap: var(--dual-gap-x-small);
}

.Dual-Attribution-name {
  color: var(--dual-attribution-name-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  font-weight: var(--dual-sans-font-weight-sbold);
  line-height: var(--dual-sans-body-medium-line-height);
}

.Dual-Attribution-role {
  color: var(--dual-attribution-role-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  line-height: var(--dual-sans-body-small-line-height);
}

.Dual-Attribution--stacked {
  flex-direction: column;
  text-align: center;
}

/* ── Dual-blockquote ── */
.Dual-Blockquote {
  --dual-blockquote-content-color: var(--dual-text-1);
  --dual-blockquote-accent-color: var(--dual-status-featured);
  --dual-blockquote-cite-color: var(--dual-text-2);
  color: var(--dual-blockquote-content-color);
  display: flex;
  flex-direction: column;
  gap: var(--dual-gap-medium);
  margin: 0;
  padding: var(--dual-pad-xxx-large);
}

.Dual-Blockquote-text {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-quote-large-font-size);
  font-weight: var(--dual-sans-font-weight-roman);
  line-height: var(--dual-sans-quote-large-line-height);
  letter-spacing: var(--dual-sans-quote-large-letter-spacing);
  color: var(--dual-blockquote-content-color);
}

.Dual-Blockquote--small .Dual-Blockquote-text {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-quote-medium-font-size);
  font-weight: var(--dual-sans-font-weight-roman);
  line-height: var(--dual-sans-quote-medium-line-height);
  letter-spacing: var(--dual-sans-quote-medium-letter-spacing);
}

.Dual-Blockquote-cite {
  color: var(--dual-blockquote-cite-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  font-style: normal;
  line-height: var(--dual-sans-body-small-line-height);
}

/* ── Dual-button ── */
.Dual-Button {
  --dual-button-fill: transparent;
  --dual-button-fill-hover: var(--dual-action-fill-2-hover);
  --dual-button-fill-active: var(--dual-action-fill-2-active);
  --dual-button-fill-disabled: var(--dual-action-fill-disabled);
  --dual-button-content: var(--dual-action-content-2);
  --dual-button-content-hover: var(--dual-action-content-2);
  --dual-button-content-disabled: var(--dual-action-content-disabled);
  --dual-button-border-color: transparent;
  --dual-button-focus: var(--dual-ui-focus);
  align-items: center;
  background: var(--dual-button-fill);
  border: var(--dual-border-width-small) solid var(--dual-button-border-color);
  border-radius: 0;
  color: var(--dual-button-content);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  font-weight: var(--dual-sans-font-weight-sbold);
  gap: var(--dual-gap-small);
  height: var(--dual-height-40);
  justify-content: center;
  letter-spacing: var(--dual-sans-body-medium-letter-spacing);
  line-height: var(--dual-sans-body-medium-line-height);
  padding: 0 var(--dual-pad-x-large);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}
.Dual-Button:focus-visible {
  box-shadow: inset 0 0 0 var(--dual-border-width-small) var(--dual-button-focus);
  outline: none;
}
.Dual-Button:disabled, .Dual-Button[aria-disabled=true] {
  --dual-button-content: var(--dual-button-content-disabled);
  background: var(--dual-button-fill-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.Dual-Button--primary {
  --dual-button-fill: var(--dual-action-fill-1);
  --dual-button-fill-hover: var(--dual-action-fill-1-hover);
  --dual-button-fill-active: var(--dual-action-fill-1-active);
  --dual-button-content: var(--dual-action-content-1);
  --dual-button-border-color: var(--dual-action-content-1);
  background: var(--dual-button-fill);
  color: var(--dual-button-content);
}
.Dual-Button--primary:not(:disabled):hover {
  background: var(--dual-button-fill-hover);
}
.Dual-Button--primary:not(:disabled):active {
  background: var(--dual-button-fill-active);
}

.Dual-Button--ghost {
  --dual-button-fill: transparent;
  --dual-button-content: var(--dual-constant-deep-blue);
  --dual-button-border-color: var(--dual-constant-deep-blue);
  background: var(--dual-button-fill);
  color: var(--dual-button-content);
}
.Dual-Button--ghost:not(:disabled):hover {
  background: var(--dual-button-fill-hover);
}

.Dual-Button--text {
  --dual-button-fill: transparent;
  --dual-button-content: var(--dual-action-content-2);
  background: var(--dual-button-fill);
  color: var(--dual-button-content);
}
.Dual-Button--text:not(:disabled):hover {
  background: var(--dual-button-fill-hover);
}

.Dual-Button--danger-filled {
  --dual-button-fill: var(--dual-action-fill-danger);
  --dual-button-fill-hover: var(--dual-action-fill-danger-hover);
  --dual-button-fill-active: var(--dual-action-fill-danger-active);
  --dual-button-content: var(--dual-action-content-1);
  background: var(--dual-button-fill);
  color: var(--dual-button-content);
}
.Dual-Button--danger-filled:not(:disabled):hover {
  background: var(--dual-button-fill-hover);
}
.Dual-Button--danger-filled:not(:disabled):active {
  background: var(--dual-button-fill-active);
}

.Dual-Button--danger-text {
  --dual-button-fill: transparent;
  --dual-button-content: var(--dual-action-content-danger);
  background: var(--dual-button-fill);
  color: var(--dual-button-content);
}
.Dual-Button--danger-text:not(:disabled):hover {
  background: var(--dual-button-fill-hover);
}

.Dual-Button--small {
  font-size: var(--dual-sans-body-small-font-size);
  height: var(--dual-height-32);
  padding: 0 var(--dual-pad-medium);
}

.Dual-Button--large {
  height: var(--dual-height-56);
  padding: 0 var(--dual-pad-xxxx-large);
}

.Dual-Button-iconWrap {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: var(--dual-height-20);
  justify-content: center;
  width: var(--dual-width-20);
}

.Dual-Button-icon {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
}

.Dual-Button-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Dual-card ── */
.Dual-Card {
  --dual-card-fill: var(--dual-base-fill-1);
  --dual-card-fill-hover: var(--dual-base-fill-1-hover);
  --dual-card-border-color: var(--dual-opacity-contrast-2);
  --dual-card-title-color: var(--dual-text-primary);
  --dual-card-body-color: var(--dual-text-secondary);
  background: var(--dual-card-fill);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dual-gap-medium);
  padding: var(--dual-pad-xxxxx-large);
  transition: box-shadow 200ms ease, background 200ms ease;
}

.Dual-Card--interactive {
  cursor: pointer;
}
.Dual-Card--interactive:hover {
  background: var(--dual-card-fill-hover);
  box-shadow: var(--dual-effect-shadow-medium);
}

.Dual-Card--compact {
  gap: var(--dual-gap-small);
  padding: var(--dual-pad-medium);
}

.Dual-Card-header {
  align-items: center;
  display: flex;
  gap: var(--dual-gap-medium);
}

.Dual-Card-title {
  color: var(--dual-card-title-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-title-small-font-size);
  font-weight: var(--dual-sans-font-weight-bold);
  margin: 0;
}

.Dual-Card-body {
  color: var(--dual-card-body-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  line-height: var(--dual-sans-body-medium-line-height);
}

.Dual-Card-footer {
  align-items: center;
  display: flex;
  gap: var(--dual-gap-small);
  margin-top: auto;
}

/* ── Dual-checkbox ── */
.Dual-Checkbox {
  --dual-checkbox-border-color: var(--dual-forms-border-1);
  --dual-checkbox-border-color-hover: var(--dual-action-fill-1-hover);
  --dual-checkbox-fill: var(--dual-forms-fill);
  --dual-checkbox-fill-checked: var(--dual-action-fill-1);
  --dual-checkbox-fill-disabled: var(--dual-action-fill-disabled);
  --dual-checkbox-check-color: var(--dual-action-content-1);
  --dual-checkbox-label-color: var(--dual-text-primary);
  --dual-checkbox-label-color-disabled: var(--dual-text-disabled);
  --dual-checkbox-focus-ring-color: var(--dual-ui-focus);
  align-items: flex-start;
  cursor: pointer;
  display: inline-flex;
  gap: var(--dual-gap-small);
  position: relative;
}

.Dual-Checkbox-input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.Dual-Checkbox-input:focus-visible + .Dual-Checkbox-box {
  box-shadow: 0 0 0 var(--dual-border-width-small) var(--dual-checkbox-focus-ring-color);
}
.Dual-Checkbox-input:checked + .Dual-Checkbox-box {
  background: var(--dual-checkbox-fill-checked);
  border-color: var(--dual-checkbox-fill-checked);
}
.Dual-Checkbox-input:checked + .Dual-Checkbox-box .Dual-Checkbox-check {
  opacity: 1;
  transform: scale(1);
}
.Dual-Checkbox-input:disabled + .Dual-Checkbox-box {
  background: var(--dual-checkbox-fill-disabled);
  cursor: not-allowed;
}
.Dual-Checkbox-input:disabled ~ .Dual-Checkbox-label {
  color: var(--dual-checkbox-label-color-disabled);
}

.Dual-Checkbox-box {
  align-items: center;
  background: var(--dual-checkbox-fill);
  border: var(--dual-border-width-medium) solid var(--dual-checkbox-border-color);
  border-radius: 0;
  display: flex;
  flex-shrink: 0;
  height: var(--dual-height-24);
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease;
  width: var(--dual-height-24);
}
.Dual-Checkbox-box:hover {
  border-color: var(--dual-checkbox-border-color-hover);
}

.Dual-Checkbox-check {
  color: var(--dual-checkbox-check-color);
  height: var(--dual-height-16);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 100ms ease, transform 100ms ease;
  width: var(--dual-height-16);
}

.Dual-Checkbox-label {
  color: var(--dual-checkbox-label-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  line-height: var(--dual-height-24);
  user-select: none;
}

/* ── Dual-checkbox-group ── */
.Dual-CheckboxGroup {
  --dual-checkbox-group-legend-color: var(--dual-text-1);
  --dual-checkbox-group-help-color: var(--dual-text-2);
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dual-gap-small);
  margin: 0;
  padding: 0;
}

.Dual-CheckboxGroup-legend {
  color: var(--dual-checkbox-group-legend-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  font-weight: var(--dual-sans-font-weight-sbold);
  line-height: var(--dual-sans-body-medium-line-height);
  margin-block-end: var(--dual-gap-x-small);
  padding: 0;
}

.Dual-CheckboxGroup-help {
  color: var(--dual-checkbox-group-help-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  line-height: var(--dual-sans-body-small-line-height);
}

.Dual-CheckboxGroup--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--dual-gap-large);
}

/* ── Dual-dropdown ── */
.Dual-Dropdown {
  --dual-dropdown-fill: var(--dual-forms-fill);
  --dual-dropdown-fill-hover: var(--dual-base-fill-1-hover);
  --dual-dropdown-fill-open: var(--dual-base-fill-1);
  --dual-dropdown-border-color: var(--dual-forms-border-1);
  --dual-dropdown-border-color-hover: var(--dual-action-fill-1-hover);
  --dual-dropdown-border-color-focus: var(--dual-ui-focus);
  --dual-dropdown-content: var(--dual-text-primary);
  --dual-dropdown-placeholder: var(--dual-text-secondary);
  --dual-dropdown-icon-color: var(--dual-text-secondary);
  --dual-dropdown-panel-fill: var(--dual-base-fill-1);
  --dual-dropdown-panel-border-color: var(--dual-opacity-contrast-2);
  --dual-dropdown-option-fill-hover: var(--dual-base-fill-1-hover);
  --dual-dropdown-option-fill-selected: var(--dual-action-fill-2);
  --dual-dropdown-option-content: var(--dual-text-primary);
  --dual-dropdown-option-content-selected: var(--dual-action-content-2);
  --dual-dropdown-focus-ring-color: var(--dual-ui-focus);
  --dual-dropdown-fill-disabled: var(--dual-action-fill-disabled);
  --dual-dropdown-content-disabled: var(--dual-text-disabled);
  display: inline-flex;
  flex-direction: column;
  position: relative;
}

.Dual-Dropdown-trigger {
  align-items: center;
  appearance: none;
  background: var(--dual-dropdown-fill);
  border: var(--dual-border-width-small) solid var(--dual-dropdown-border-color);
  border-radius: 0;
  color: var(--dual-dropdown-content);
  cursor: pointer;
  display: flex;
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  gap: var(--dual-gap-small);
  height: var(--dual-height-40);
  justify-content: space-between;
  line-height: var(--dual-sans-body-medium-line-height);
  padding: 0 var(--dual-pad-medium);
  transition: border-color 150ms ease, background 150ms ease;
  width: 100%;
}
.Dual-Dropdown-trigger:hover {
  background: var(--dual-dropdown-fill-hover);
  border-color: var(--dual-dropdown-border-color-hover);
}
.Dual-Dropdown-trigger:focus-visible {
  border-color: var(--dual-dropdown-border-color-focus);
  box-shadow: 0 0 0 var(--dual-border-width-small) var(--dual-dropdown-focus-ring-color);
  outline: none;
}
.Dual-Dropdown-trigger[aria-expanded=true] {
  background: var(--dual-dropdown-fill-open);
  border-color: var(--dual-dropdown-border-color-focus);
}
.Dual-Dropdown-trigger:disabled {
  background: var(--dual-dropdown-fill-disabled);
  color: var(--dual-dropdown-content-disabled);
  cursor: not-allowed;
}

.Dual-Dropdown-placeholder {
  color: var(--dual-dropdown-placeholder);
}

.Dual-Dropdown-icon {
  color: var(--dual-dropdown-icon-color);
  flex-shrink: 0;
  height: 16px;
  transition: transform 200ms ease;
  width: 16px;
}
.Dual-Dropdown-trigger[aria-expanded=true] .Dual-Dropdown-icon {
  transform: rotate(180deg);
}

.Dual-Dropdown-panel {
  background: var(--dual-dropdown-panel-fill);
  border: 1px solid var(--dual-dropdown-panel-border-color);
  border-radius: 0;
  box-shadow: var(--dual-effect-shadow-medium);
  left: 0;
  max-height: 280px;
  opacity: 0;
  overflow-y: auto;
  padding: 4px 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 100;
}
.Dual-Dropdown-panel[data-open=true] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.Dual-Dropdown-option {
  align-items: center;
  color: var(--dual-dropdown-option-content);
  cursor: pointer;
  display: flex;
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  height: var(--dual-height-40);
  padding: 0 var(--dual-pad-medium);
  transition: background 100ms ease;
}
.Dual-Dropdown-option:hover {
  background: var(--dual-dropdown-option-fill-hover);
}
.Dual-Dropdown-option[aria-selected=true] {
  background: var(--dual-dropdown-option-fill-selected);
  color: var(--dual-dropdown-option-content-selected);
  font-weight: 600;
}

/* ── Dual-radio ── */
.Dual-Radio {
  --dual-radio-border-color: var(--dual-forms-border-1);
  --dual-radio-border-color-hover: var(--dual-action-fill-1-hover);
  --dual-radio-fill: var(--dual-forms-fill);
  --dual-radio-fill-checked: var(--dual-action-fill-1);
  --dual-radio-fill-disabled: var(--dual-action-fill-disabled);
  --dual-radio-dot-color: var(--dual-action-content-1);
  --dual-radio-label-color: var(--dual-text-primary);
  --dual-radio-label-color-disabled: var(--dual-text-disabled);
  --dual-radio-focus-ring-color: var(--dual-ui-focus);
  align-items: flex-start;
  cursor: pointer;
  display: inline-flex;
  gap: var(--dual-gap-small);
  position: relative;
}

.Dual-Radio-input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.Dual-Radio-input:focus-visible + .Dual-Radio-circle {
  box-shadow: 0 0 0 var(--dual-border-width-small) var(--dual-radio-focus-ring-color);
}
.Dual-Radio-input:checked + .Dual-Radio-circle {
  background: var(--dual-radio-fill-checked);
  border-color: var(--dual-radio-fill-checked);
}
.Dual-Radio-input:checked + .Dual-Radio-circle .Dual-Radio-dot {
  opacity: 1;
  transform: scale(1);
}
.Dual-Radio-input:disabled + .Dual-Radio-circle {
  background: var(--dual-radio-fill-disabled);
  cursor: not-allowed;
}
.Dual-Radio-input:disabled ~ .Dual-Radio-label {
  color: var(--dual-radio-label-color-disabled);
}

.Dual-Radio-circle {
  align-items: center;
  background: var(--dual-radio-fill);
  border: var(--dual-border-width-medium) solid var(--dual-radio-border-color);
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: var(--dual-height-24);
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease;
  width: var(--dual-height-24);
}
.Dual-Radio-circle:hover {
  border-color: var(--dual-radio-border-color-hover);
}

.Dual-Radio-dot {
  background: var(--dual-radio-dot-color);
  border-radius: 50%;
  height: 12px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 100ms ease, transform 100ms ease;
  width: 12px;
}

.Dual-Radio-label {
  color: var(--dual-radio-label-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  line-height: var(--dual-height-24);
  user-select: none;
}

/* ── Dual-radio-group ── */
.Dual-RadioGroup {
  --dual-radio-group-legend-color: var(--dual-text-1);
  --dual-radio-group-help-color: var(--dual-text-2);
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dual-gap-small);
  margin: 0;
  padding: 0;
}

.Dual-RadioGroup-legend {
  color: var(--dual-radio-group-legend-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  font-weight: var(--dual-sans-font-weight-sbold);
  line-height: var(--dual-sans-body-medium-line-height);
  margin-block-end: var(--dual-gap-x-small);
  padding: 0;
}

.Dual-RadioGroup-help {
  color: var(--dual-radio-group-help-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  line-height: var(--dual-sans-body-small-line-height);
}

.Dual-RadioGroup--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--dual-gap-large);
}

/* ── Dual-stage ── */
.Dual-Stage {
  --dual-stage-fill: var(--dual-base-1);
  --dual-stage-content-color: var(--dual-text-1);
  --dual-stage-overlay-color: var(--dual-base-inverse-1);
  background: var(--dual-stage-fill);
  border-radius: 0;
  color: var(--dual-stage-content-color);
  display: flex;
  flex-direction: column;
  gap: var(--dual-gap-large);
  justify-content: flex-end;
  min-block-size: var(--dual-height-56);
  overflow: hidden;
  padding: var(--dual-pad-xxxx-large);
  position: relative;
}

.Dual-Stage-title {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-display-medium-font-size);
  font-weight: var(--dual-sans-font-weight-bold);
  line-height: var(--dual-sans-display-medium-line-height);
  letter-spacing: var(--dual-sans-display-medium-letter-spacing);
  color: var(--dual-stage-content-color);
  margin: 0;
}

.Dual-Stage-body {
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-large-font-size);
  font-weight: var(--dual-sans-font-weight-roman);
  line-height: var(--dual-sans-body-large-line-height);
  letter-spacing: var(--dual-sans-body-large-letter-spacing);
  color: var(--dual-stage-content-color);
}

.Dual-Stage-actions {
  display: flex;
  gap: var(--dual-gap-medium);
  margin-block-start: var(--dual-gap-small);
}

.Dual-Stage--inverse {
  --dual-stage-content-color: var(--dual-text-inverse-1);
  background: var(--dual-stage-overlay-color);
}

/* ── Dual-text-field ── */
.Dual-TextField {
  --dual-text-field-fill: var(--dual-forms-fill);
  --dual-text-field-fill-hover: var(--dual-base-fill-1-hover);
  --dual-text-field-fill-disabled: var(--dual-action-fill-disabled);
  --dual-text-field-border-color: var(--dual-forms-border-1);
  --dual-text-field-border-color-hover: var(--dual-action-fill-1-hover);
  --dual-text-field-border-color-focus: var(--dual-ui-focus);
  --dual-text-field-border-color-error: var(--dual-text-caution);
  --dual-text-field-content: var(--dual-text-primary);
  --dual-text-field-content-disabled: var(--dual-text-disabled);
  --dual-text-field-placeholder: var(--dual-text-secondary);
  --dual-text-field-label-color: var(--dual-text-primary);
  --dual-text-field-helper-color: var(--dual-text-secondary);
  --dual-text-field-error-color: var(--dual-text-caution);
  --dual-text-field-focus-ring-color: var(--dual-ui-focus);
  --dual-text-field-addon-color: var(--dual-text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--dual-gap-x-small);
}

.Dual-TextField-label {
  color: var(--dual-text-field-label-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  font-weight: 600;
  line-height: 1.4;
}

.Dual-TextField-wrapper {
  align-items: center;
  background: var(--dual-text-field-fill);
  border: var(--dual-border-width-small) solid var(--dual-text-field-border-color);
  border-radius: 0;
  display: flex;
  gap: var(--dual-gap-small);
  height: var(--dual-height-40);
  padding: 0 var(--dual-pad-medium);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.Dual-TextField-wrapper:hover {
  background: var(--dual-text-field-fill-hover);
  border-color: var(--dual-text-field-border-color-hover);
}
.Dual-TextField-wrapper:focus-within {
  border-color: var(--dual-text-field-border-color-focus);
  box-shadow: 0 0 0 var(--dual-border-width-small) var(--dual-text-field-focus-ring-color);
}

.Dual-TextField--error .Dual-TextField-wrapper {
  border-color: var(--dual-text-field-border-color-error);
}
.Dual-TextField--error .Dual-TextField-wrapper:focus-within {
  box-shadow: 0 0 0 var(--dual-border-width-small) var(--dual-text-field-border-color-error);
}

.Dual-TextField--disabled .Dual-TextField-wrapper {
  background: var(--dual-text-field-fill-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.Dual-TextField-input {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--dual-text-field-content);
  flex: 1;
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  height: 100%;
  line-height: var(--dual-sans-body-medium-line-height);
  min-width: 0;
  outline: none;
}
.Dual-TextField-input::placeholder {
  color: var(--dual-text-field-placeholder);
}
.Dual-TextField-input:disabled {
  color: var(--dual-text-field-content-disabled);
  cursor: not-allowed;
}

.Dual-TextField-prefix,
.Dual-TextField-suffix {
  align-items: center;
  color: var(--dual-text-field-addon-color);
  display: flex;
  flex-shrink: 0;
}

.Dual-TextField-helper {
  color: var(--dual-text-field-helper-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  line-height: 1.4;
}

.Dual-TextField--error .Dual-TextField-helper {
  color: var(--dual-text-field-error-color);
}

/* ── Dual-tooltip ── */
.Dual-Tooltip {
  --dual-tooltip-fill: var(--dual-base-inverse-1);
  --dual-tooltip-content-color: var(--dual-text-inverse-1);
  background: var(--dual-tooltip-fill);
  border-radius: 0;
  box-shadow: var(--dual-effect-shadow-medium);
  color: var(--dual-tooltip-content-color);
  display: inline-block;
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-small-font-size);
  line-height: var(--dual-sans-body-small-line-height);
  max-inline-size: 20rem;
  padding: var(--dual-pad-x-small) var(--dual-pad-small);
  position: absolute;
  z-index: 1000;
}

.Dual-Tooltip--top {
  margin-block-end: var(--dual-gap-x-small);
}

.Dual-Tooltip--bottom {
  margin-block-start: var(--dual-gap-x-small);
}

/* ── Dual-typography ── */
.Dual-Typography {
  --dual-typography-color: var(--dual-text-1);
  color: var(--dual-typography-color);
  font-family: var(--dual-sans-font-family);
  font-size: var(--dual-sans-body-medium-font-size);
  font-weight: var(--dual-sans-font-weight-roman);
  line-height: var(--dual-sans-body-medium-line-height);
  letter-spacing: var(--dual-sans-body-medium-letter-spacing);
  margin: 0;
}

.Dual-Typography--muted {
  --dual-typography-color: var(--dual-text-2);
}