html, html.figma-light, .figma-light {
--color-bg-menu: var(--figma-color-bg-menu, #1e1e1e);--color-bg-menu-disabled: var(--figma-color-bg-menu-disabled, #757575);--color-bg-menu-hover: var(--figma-color-bg-menu-hover, #2c2c2c);--color-bg-menu-pressed: var(--figma-color-bg-menu-pressed, #2c2c2c);--color-bg-menu-secondary: var(--figma-color-bg-menu-secondary, #383838);--color-bg-menu-selected: var(--figma-color-bg-menu-selected, #0c8ce9);--color-bg-menu-selected-hover: var(--figma-color-bg-menu-selected-hover, #0a6dc2);--color-bg-menu-selected-pressed: var(--figma-color-bg-menu-selected-pressed, #0a6dc2);--color-bg-menu-selected-secondary: var(--figma-color-bg-menu-selected-secondary, #394360);--color-bg-menu-selected-tertiary: var(--figma-color-bg-menu-selected-tertiary, #394360);--color-bg-menu-tertiary: var(--figma-color-bg-menu-tertiary, #444444);--color-bg-tooltip: var(--figma-color-bg-tooltip, #1e1e1e);--color-bg-tooltip-disabled: var(--figma-color-bg-tooltip-disabled, #757575);--color-bg-tooltip-hover: var(--figma-color-bg-tooltip-hover, #2c2c2c);--color-bg-tooltip-pressed: var(--figma-color-bg-tooltip-pressed, #2c2c2c);--color-bg-tooltip-secondary: var(--figma-color-bg-tooltip-secondary, #383838);--color-bg-tooltip-selected: var(--figma-color-bg-tooltip-selected, #0d99ff);--color-bg-tooltip-selected-hover: var(--figma-color-bg-tooltip-selected-hover, #007be5);--color-bg-tooltip-selected-pressed: var(--figma-color-bg-tooltip-selected-pressed, #007be5);--color-bg-tooltip-selected-secondary: var(--figma-color-bg-tooltip-selected-secondary, #394360);--color-bg-tooltip-selected-tertiary: var(--figma-color-bg-tooltip-selected-tertiary, #394360);--color-bg-tooltip-tertiary: var(--figma-color-bg-tooltip-tertiary, #444444);--color-border-menu: var(--figma-color-border-menu, #383838);--color-border-menu-disabled: var(--figma-color-border-menu-disabled, #383838);--color-border-menu-disabled-strong: var(--figma-color-border-menu-disabled-strong, #383838);--color-border-menu-onselected: var(--figma-color-border-menu-onselected, #007be5);--color-border-menu-onselected-strong: var(--figma-color-border-menu-onselected-strong, #ffffff);--color-border-menu-selected: var(--figma-color-border-menu-selected, #0d99ff);--color-border-menu-selected-strong: var(--figma-color-border-menu-selected-strong, #80caff);--color-border-menu-strong: var(--figma-color-border-menu-strong, #ffffff);--color-border-tooltip: var(--figma-color-border-tooltip, #383838);--color-border-tooltip-disabled: var(--figma-color-border-tooltip-disabled, #383838);--color-border-tooltip-disabled-strong: var(--figma-color-border-tooltip-disabled-strong, #383838);--color-border-tooltip-onselected: var(--figma-color-border-tooltip-onselected, #007be5);--color-border-tooltip-onselected-strong: var(--figma-color-border-tooltip-onselected-strong, #ffffff);--color-border-tooltip-selected: var(--figma-color-border-tooltip-selected, #0d99ff);--color-border-tooltip-selected-strong: var(--figma-color-border-tooltip-selected-strong, #80caff);--color-border-tooltip-strong: var(--figma-color-border-tooltip-strong, #ffffff);--color-icon-menu: var(--figma-color-icon-menu, #ffffff);--color-icon-menu-danger: var(--figma-color-icon-menu-danger, #f24822);--color-icon-menu-disabled: var(--figma-color-icon-menu-disabled, #ffffff66);--color-icon-menu-hover: var(--figma-color-icon-menu-hover, #ffffff);--color-icon-menu-ondisabled: var(--figma-color-icon-menu-ondisabled, #1e1e1e);--color-icon-menu-onselected: var(--figma-color-icon-menu-onselected, #ffffff);--color-icon-menu-pressed: var(--figma-color-icon-menu-pressed, #0d99ff);--color-icon-menu-secondary: var(--figma-color-icon-menu-secondary, #ffffffb2);--color-icon-menu-secondary-hover: var(--figma-color-icon-menu-secondary-hover, #ffffff);--color-icon-menu-selected: var(--figma-color-icon-menu-selected, #80caff);--color-icon-menu-selected-secondary: var(--figma-color-icon-menu-selected-secondary, #80caff);--color-icon-menu-selected-tertiary: var(--figma-color-icon-menu-selected-tertiary, #80caff);--color-icon-menu-tertiary: var(--figma-color-icon-menu-tertiary, #ffffff66);--color-icon-menu-tertiary-hover: var(--figma-color-icon-menu-tertiary-hover, #ffffff);--color-icon-menu-warning: var(--figma-color-icon-menu-warning, #ffcd29);--color-icon-tooltip: var(--figma-color-icon-tooltip, #ffffff);--color-icon-tooltip-danger: var(--figma-color-icon-tooltip-danger, #f24822);--color-icon-tooltip-disabled: var(--figma-color-icon-tooltip-disabled, #ffffff66);--color-icon-tooltip-hover: var(--figma-color-icon-tooltip-hover, #ffffff);--color-icon-tooltip-ondisabled: var(--figma-color-icon-tooltip-ondisabled, #1e1e1e);--color-icon-tooltip-onselected: var(--figma-color-icon-tooltip-onselected, #ffffff);--color-icon-tooltip-pressed: var(--figma-color-icon-tooltip-pressed, #0d99ff);--color-icon-tooltip-secondary: var(--figma-color-icon-tooltip-secondary, #ffffffb2);--color-icon-tooltip-secondary-hover: var(--figma-color-icon-tooltip-secondary-hover, #ffffff);--color-icon-tooltip-selected: var(--figma-color-icon-tooltip-selected, #80caff);--color-icon-tooltip-selected-secondary: var(--figma-color-icon-tooltip-selected-secondary, #80caff);--color-icon-tooltip-selected-tertiary: var(--figma-color-icon-tooltip-selected-tertiary, #80caff);--color-icon-tooltip-tertiary: var(--figma-color-icon-tooltip-tertiary, #ffffff66);--color-icon-tooltip-tertiary-hover: var(--figma-color-icon-tooltip-tertiary-hover, #ffffff);--color-icon-tooltip-warning: var(--figma-color-icon-tooltip-warning, #ffcd29);--color-text-menu: var(--figma-color-text-menu, #ffffff);--color-text-menu-danger: var(--figma-color-text-menu-danger, #f24822);--color-text-menu-disabled: var(--figma-color-text-menu-disabled, #ffffff66);--color-text-menu-hover: var(--figma-color-text-menu-hover, #ffffff);--color-text-menu-ondisabled: var(--figma-color-text-menu-ondisabled, #1e1e1e);--color-text-menu-onselected: var(--figma-color-text-menu-onselected, #ffffff);--color-text-menu-secondary: var(--figma-color-text-menu-secondary, #ffffffb2);--color-text-menu-secondary-hover: var(--figma-color-text-menu-secondary-hover, #ffffff);--color-text-menu-selected: var(--figma-color-text-menu-selected, #80caff);--color-text-menu-selected-secondary: var(--figma-color-text-menu-selected-secondary, #80caff);--color-text-menu-selected-tertiary: var(--figma-color-text-menu-selected-tertiary, #80caff);--color-text-menu-tertiary: var(--figma-color-text-menu-tertiary, #ffffff66);--color-text-menu-tertiary-hover: var(--figma-color-text-menu-tertiary-hover, #ffffff);--color-text-menu-warning: var(--figma-color-text-menu-warning, #ffd966);--color-text-tooltip: var(--figma-color-text-tooltip, #ffffff);--color-text-tooltip-danger: var(--figma-color-text-tooltip-danger, #ffafa3);--color-text-tooltip-disabled: var(--figma-color-text-tooltip-disabled, #ffffff66);--color-text-tooltip-hover: var(--figma-color-text-tooltip-hover, #ffffff);--color-text-tooltip-ondisabled: var(--figma-color-text-tooltip-ondisabled, #1e1e1e);--color-text-tooltip-onselected: var(--figma-color-text-tooltip-onselected, #ffffff);--color-text-tooltip-secondary: var(--figma-color-text-tooltip-secondary, #ffffffb2);--color-text-tooltip-secondary-hover: var(--figma-color-text-tooltip-secondary-hover, #ffffff);--color-text-tooltip-selected: var(--figma-color-text-tooltip-selected, #80caff);--color-text-tooltip-selected-secondary: var(--figma-color-text-tooltip-selected-secondary, #80caff);--color-text-tooltip-selected-tertiary: var(--figma-color-text-tooltip-selected-tertiary, #80caff);--color-text-tooltip-tertiary: var(--figma-color-text-tooltip-tertiary, #ffffff66);--color-text-tooltip-tertiary-hover: var(--figma-color-text-tooltip-tertiary-hover, #ffffff);--color-text-tooltip-warning: var(--figma-color-text-tooltip-warning, #ffd966);--color-bg: var(--figma-color-bg, #ffffff);--color-bg-brand: var(--figma-color-bg-brand, #0d99ff);--color-bg-brand-hover: var(--figma-color-bg-brand-hover, #007be5);--color-bg-brand-pressed: var(--figma-color-bg-brand-pressed, #007be5);--color-bg-brand-secondary: var(--figma-color-bg-brand-secondary, #0768cf);--color-bg-brand-tertiary: var(--figma-color-bg-brand-tertiary, #e5f4ff);--color-bg-component: var(--figma-color-bg-component, #9747ff);--color-bg-component-hover: var(--figma-color-bg-component-hover, #8638e5);--color-bg-component-pressed: var(--figma-color-bg-component-pressed, #8638e5);--color-bg-component-secondary: var(--figma-color-bg-component-secondary, #7c2bda);--color-bg-component-tertiary: var(--figma-color-bg-component-tertiary, #f1e5ff);--color-bg-danger: var(--figma-color-bg-danger, #f24822);--color-bg-danger-hover: var(--figma-color-bg-danger-hover, #dc3412);--color-bg-danger-pressed: var(--figma-color-bg-danger-pressed, #dc3412);--color-bg-danger-secondary: var(--figma-color-bg-danger-secondary, #bd2915);--color-bg-danger-tertiary: var(--figma-color-bg-danger-tertiary, #ffe2e0);--color-bg-disabled: var(--figma-color-bg-disabled, #d9d9d9);--color-bg-disabled-secondary: var(--figma-color-bg-disabled-secondary, #b3b3b3);--color-bg-hover: var(--figma-color-bg-hover, #f5f5f5);--color-bg-inverse: var(--figma-color-bg-inverse, #2c2c2c);--color-bg-onselected: var(--figma-color-bg-onselected, #bde3ff);--color-bg-onselected-hover: var(--figma-color-bg-onselected-hover, #bde3ff);--color-bg-onselected-pressed: var(--figma-color-bg-onselected-pressed, #bde3ff);--color-bg-pressed: var(--figma-color-bg-pressed, #f5f5f5);--color-bg-secondary: var(--figma-color-bg-secondary, #f5f5f5);--color-bg-selected: var(--figma-color-bg-selected, #e5f4ff);--color-bg-selected-hover: var(--figma-color-bg-selected-hover, #bde3ff);--color-bg-selected-pressed: var(--figma-color-bg-selected-pressed, #bde3ff);--color-bg-selected-secondary: var(--figma-color-bg-selected-secondary, #f2f9ff);--color-bg-selected-strong: var(--figma-color-bg-selected-strong, #0d99ff);--color-bg-selected-tertiary: var(--figma-color-bg-selected-tertiary, #f2f9ff);--color-bg-success: var(--figma-color-bg-success, #14ae5c);--color-bg-success-hover: var(--figma-color-bg-success-hover, #009951);--color-bg-success-pressed: var(--figma-color-bg-success-pressed, #009951);--color-bg-success-secondary: var(--figma-color-bg-success-secondary, #008043);--color-bg-success-tertiary: var(--figma-color-bg-success-tertiary, #cff7d3);--color-bg-tertiary: var(--figma-color-bg-tertiary, #e6e6e6);--color-bg-warning: var(--figma-color-bg-warning, #ffcd29);--color-bg-warning-hover: var(--figma-color-bg-warning-hover, #ffc21a);--color-bg-warning-pressed: var(--figma-color-bg-warning-pressed, #ffc21a);--color-bg-warning-secondary: var(--figma-color-bg-warning-secondary, #fab815);--color-bg-warning-tertiary: var(--figma-color-bg-warning-tertiary, #fff1c2);--color-border: var(--figma-color-border, #e6e6e6);--color-border-brand: var(--figma-color-border-brand, #bde3ff);--color-border-brand-strong: var(--figma-color-border-brand-strong, #007be5);--color-border-component: var(--figma-color-border-component, #e4ccff);--color-border-component-hover: var(--figma-color-border-component-hover, #9747ff);--color-border-component-strong: var(--figma-color-border-component-strong, #8638e5);--color-border-danger: var(--figma-color-border-danger, #ffc7c2);--color-border-danger-strong: var(--figma-color-border-danger-strong, #dc3412);--color-border-disabled: var(--figma-color-border-disabled, #e6e6e6);--color-border-disabled-strong: var(--figma-color-border-disabled-strong, #0000004d);--color-border-onbrand: var(--figma-color-border-onbrand, #007be5);--color-border-onbrand-strong: var(--figma-color-border-onbrand-strong, #ffffff);--color-border-oncomponent: var(--figma-color-border-oncomponent, #8638e5);--color-border-oncomponent-strong: var(--figma-color-border-oncomponent-strong, #ffffff);--color-border-ondanger: var(--figma-color-border-ondanger, #dc3412);--color-border-ondanger-strong: var(--figma-color-border-ondanger-strong, #ffffff);--color-border-onselected: var(--figma-color-border-onselected, #bde3ff);--color-border-onselected-strong: var(--figma-color-border-onselected-strong, #000000e5);--color-border-onsuccess: var(--figma-color-border-onsuccess, #009951);--color-border-onsuccess-strong: var(--figma-color-border-onsuccess-strong, #ffffff);--color-border-onwarning: var(--figma-color-border-onwarning, #fab815);--color-border-onwarning-strong: var(--figma-color-border-onwarning-strong, #000000e5);--color-border-selected: var(--figma-color-border-selected, #0d99ff);--color-border-selected-strong: var(--figma-color-border-selected-strong, #007be5);--color-border-strong: var(--figma-color-border-strong, #2c2c2c);--color-border-success: var(--figma-color-border-success, #aff4c6);--color-border-success-strong: var(--figma-color-border-success-strong, #009951);--color-border-warning: var(--figma-color-border-warning, #ffe8a3);--color-border-warning-strong: var(--figma-color-border-warning-strong, #b86200);--color-icon: var(--figma-color-icon, #000000e5);--color-icon-brand: var(--figma-color-icon-brand, #007be5);--color-icon-brand-pressed: var(--figma-color-icon-brand-pressed, #0768cf);--color-icon-brand-secondary: var(--figma-color-icon-brand-secondary, #80caff);--color-icon-brand-tertiary: var(--figma-color-icon-brand-tertiary, #bde3ff);--color-icon-component: var(--figma-color-icon-component, #8638e5);--color-icon-component-pressed: var(--figma-color-icon-component-pressed, #7c2bda);--color-icon-component-secondary: var(--figma-color-icon-component-secondary, #c5b2dc);--color-icon-component-tertiary: var(--figma-color-icon-component-tertiary, #c5b2dc);--color-icon-danger: var(--figma-color-icon-danger, #f24822);--color-icon-danger-hover: var(--figma-color-icon-danger-hover, #bd2915);--color-icon-danger-pressed: var(--figma-color-icon-danger-pressed, #bd2915);--color-icon-danger-secondary: var(--figma-color-icon-danger-secondary, #f24822);--color-icon-danger-secondary-hover: var(--figma-color-icon-danger-secondary-hover, #f24822);--color-icon-danger-tertiary: var(--figma-color-icon-danger-tertiary, #f24822);--color-icon-disabled: var(--figma-color-icon-disabled, #0000004d);--color-icon-hover: var(--figma-color-icon-hover, #000000e5);--color-icon-onbrand: var(--figma-color-icon-onbrand, #ffffff);--color-icon-onbrand-secondary: var(--figma-color-icon-onbrand-secondary, #ffffffcc);--color-icon-onbrand-tertiary: var(--figma-color-icon-onbrand-tertiary, #ffffff66);--color-icon-oncomponent: var(--figma-color-icon-oncomponent, #ffffff);--color-icon-oncomponent-secondary: var(--figma-color-icon-oncomponent-secondary, #ffffffcc);--color-icon-oncomponent-tertiary: var(--figma-color-icon-oncomponent-tertiary, #ffffff66);--color-icon-ondanger: var(--figma-color-icon-ondanger, #ffffff);--color-icon-ondanger-secondary: var(--figma-color-icon-ondanger-secondary, #ffffffcc);--color-icon-ondanger-tertiary: var(--figma-color-icon-ondanger-tertiary, #ffffff66);--color-icon-ondisabled: var(--figma-color-icon-ondisabled, #ffffff);--color-icon-oninverse: var(--figma-color-icon-oninverse, #ffffffe5);--color-icon-onselected: var(--figma-color-icon-onselected, #000000e5);--color-icon-onselected-secondary: var(--figma-color-icon-onselected-secondary, #00000080);--color-icon-onselected-strong: var(--figma-color-icon-onselected-strong, #ffffff);--color-icon-onselected-tertiary: var(--figma-color-icon-onselected-tertiary, #0000004d);--color-icon-onsuccess: var(--figma-color-icon-onsuccess, #ffffff);--color-icon-onsuccess-secondary: var(--figma-color-icon-onsuccess-secondary, #ffffffcc);--color-icon-onsuccess-tertiary: var(--figma-color-icon-onsuccess-tertiary, #ffffff66);--color-icon-onwarning: var(--figma-color-icon-onwarning, #000000e5);--color-icon-onwarning-secondary: var(--figma-color-icon-onwarning-secondary, #ffffffcc);--color-icon-onwarning-tertiary: var(--figma-color-icon-onwarning-tertiary, #ffffff66);--color-icon-pressed: var(--figma-color-icon-pressed, #007be5);--color-icon-secondary: var(--figma-color-icon-secondary, #00000080);--color-icon-secondary-hover: var(--figma-color-icon-secondary-hover, #000000e5);--color-icon-selected: var(--figma-color-icon-selected, #007be5);--color-icon-selected-secondary: var(--figma-color-icon-selected-secondary, #007be5);--color-icon-selected-tertiary: var(--figma-color-icon-selected-tertiary, #007be5);--color-icon-success: var(--figma-color-icon-success, #14ae5c);--color-icon-success-pressed: var(--figma-color-icon-success-pressed, #008043);--color-icon-success-secondary: var(--figma-color-icon-success-secondary, #14ae5c);--color-icon-success-tertiary: var(--figma-color-icon-success-tertiary, #14ae5c);--color-icon-tertiary: var(--figma-color-icon-tertiary, #0000004d);--color-icon-tertiary-hover: var(--figma-color-icon-tertiary-hover, #000000e5);--color-icon-warning: var(--figma-color-icon-warning, #ffcd29);--color-icon-warning-pressed: var(--figma-color-icon-warning-pressed, #b86200);--color-icon-warning-secondary: var(--figma-color-icon-warning-secondary, #ffcd29);--color-icon-warning-tertiary: var(--figma-color-icon-warning-tertiary, #ffcd29);--color-text: var(--figma-color-text, #000000e5);--color-text-brand: var(--figma-color-text-brand, #007be5);--color-text-brand-secondary: var(--figma-color-text-brand-secondary, #007be5);--color-text-brand-tertiary: var(--figma-color-text-brand-tertiary, #007be5);--color-text-component: var(--figma-color-text-component, #8638e5);--color-text-component-pressed: var(--figma-color-text-component-pressed, #7c2bda);--color-text-component-secondary: var(--figma-color-text-component-secondary, #c5b2dc);--color-text-component-tertiary: var(--figma-color-text-component-tertiary, #c5b2dc);--color-text-danger: var(--figma-color-text-danger, #dc3412);--color-text-danger-secondary: var(--figma-color-text-danger-secondary, #dc3412);--color-text-danger-tertiary: var(--figma-color-text-danger-tertiary, #dc3412);--color-text-disabled: var(--figma-color-text-disabled, #0000004d);--color-text-hover: var(--figma-color-text-hover, #000000e5);--color-text-onbrand: var(--figma-color-text-onbrand, #ffffff);--color-text-onbrand-secondary: var(--figma-color-text-onbrand-secondary, #ffffffcc);--color-text-onbrand-tertiary: var(--figma-color-text-onbrand-tertiary, #ffffff66);--color-text-oncomponent: var(--figma-color-text-oncomponent, #ffffff);--color-text-oncomponent-secondary: var(--figma-color-text-oncomponent-secondary, #ffffffcc);--color-text-oncomponent-tertiary: var(--figma-color-text-oncomponent-tertiary, #ffffff66);--color-text-ondanger: var(--figma-color-text-ondanger, #ffffff);--color-text-ondanger-secondary: var(--figma-color-text-ondanger-secondary, #ffffffcc);--color-text-ondanger-tertiary: var(--figma-color-text-ondanger-tertiary, #ffffff66);--color-text-ondisabled: var(--figma-color-text-ondisabled, #ffffff);--color-text-oninverse: var(--figma-color-text-oninverse, #ffffffe5);--color-text-onselected: var(--figma-color-text-onselected, #000000e5);--color-text-onselected-secondary: var(--figma-color-text-onselected-secondary, #00000080);--color-text-onselected-strong: var(--figma-color-text-onselected-strong, #ffffff);--color-text-onselected-tertiary: var(--figma-color-text-onselected-tertiary, #0000004d);--color-text-onsuccess: var(--figma-color-text-onsuccess, #ffffff);--color-text-onsuccess-secondary: var(--figma-color-text-onsuccess-secondary, #ffffffcc);--color-text-onsuccess-tertiary: var(--figma-color-text-onsuccess-tertiary, #ffffff66);--color-text-onwarning: var(--figma-color-text-onwarning, #000000e5);--color-text-onwarning-secondary: var(--figma-color-text-onwarning-secondary, #00000080);--color-text-onwarning-tertiary: var(--figma-color-text-onwarning-tertiary, #0000004d);--color-text-secondary: var(--figma-color-text-secondary, #00000080);--color-text-secondary-hover: var(--figma-color-text-secondary-hover, #000000e5);--color-text-selected: var(--figma-color-text-selected, #007be5);--color-text-selected-secondary: var(--figma-color-text-selected-secondary, #007be5);--color-text-selected-tertiary: var(--figma-color-text-selected-tertiary, #007be5);--color-text-success: var(--figma-color-text-success, #009951);--color-text-success-secondary: var(--figma-color-text-success-secondary, #009951);--color-text-success-tertiary: var(--figma-color-text-success-tertiary, #009951);--color-text-tertiary: var(--figma-color-text-tertiary, #0000004d);--color-text-tertiary-hover: var(--figma-color-text-tertiary-hover, #000000e5);--color-text-warning: var(--figma-color-text-warning, #b86200);--color-text-warning-secondary: var(--figma-color-text-warning-secondary, #b86200);--color-text-warning-tertiary: var(--figma-color-text-warning-tertiary, #b86200)
}
html.figma-dark, .figma-dark {
--color-bg-menu: var(--figma-color-bg-menu, #1e1e1e);--color-bg-menu-disabled: var(--figma-color-bg-menu-disabled, #757575);--color-bg-menu-hover: var(--figma-color-bg-menu-hover, #2c2c2c);--color-bg-menu-pressed: var(--figma-color-bg-menu-pressed, #2c2c2c);--color-bg-menu-secondary: var(--figma-color-bg-menu-secondary, #383838);--color-bg-menu-selected: var(--figma-color-bg-menu-selected, #0c8ce9);--color-bg-menu-selected-hover: var(--figma-color-bg-menu-selected-hover, #0a6dc2);--color-bg-menu-selected-pressed: var(--figma-color-bg-menu-selected-pressed, #0a6dc2);--color-bg-menu-selected-secondary: var(--figma-color-bg-menu-selected-secondary, #394360);--color-bg-menu-selected-tertiary: var(--figma-color-bg-menu-selected-tertiary, #394360);--color-bg-menu-tertiary: var(--figma-color-bg-menu-tertiary, #444444);--color-bg-tooltip: var(--figma-color-bg-tooltip, #1e1e1e);--color-bg-tooltip-disabled: var(--figma-color-bg-tooltip-disabled, #757575);--color-bg-tooltip-hover: var(--figma-color-bg-tooltip-hover, #2c2c2c);--color-bg-tooltip-pressed: var(--figma-color-bg-tooltip-pressed, #2c2c2c);--color-bg-tooltip-secondary: var(--figma-color-bg-tooltip-secondary, #383838);--color-bg-tooltip-selected: var(--figma-color-bg-tooltip-selected, #0d99ff);--color-bg-tooltip-selected-hover: var(--figma-color-bg-tooltip-selected-hover, #007be5);--color-bg-tooltip-selected-pressed: var(--figma-color-bg-tooltip-selected-pressed, #007be5);--color-bg-tooltip-selected-secondary: var(--figma-color-bg-tooltip-selected-secondary, #394360);--color-bg-tooltip-selected-tertiary: var(--figma-color-bg-tooltip-selected-tertiary, #394360);--color-bg-tooltip-tertiary: var(--figma-color-bg-tooltip-tertiary, #444444);--color-border-menu: var(--figma-color-border-menu, #383838);--color-border-menu-disabled: var(--figma-color-border-menu-disabled, #383838);--color-border-menu-disabled-strong: var(--figma-color-border-menu-disabled-strong, #383838);--color-border-menu-onselected: var(--figma-color-border-menu-onselected, #007be5);--color-border-menu-onselected-strong: var(--figma-color-border-menu-onselected-strong, #ffffff);--color-border-menu-selected: var(--figma-color-border-menu-selected, #0d99ff);--color-border-menu-selected-strong: var(--figma-color-border-menu-selected-strong, #80caff);--color-border-menu-strong: var(--figma-color-border-menu-strong, #ffffff);--color-border-tooltip: var(--figma-color-border-tooltip, #383838);--color-border-tooltip-disabled: var(--figma-color-border-tooltip-disabled, #383838);--color-border-tooltip-disabled-strong: var(--figma-color-border-tooltip-disabled-strong, #383838);--color-border-tooltip-onselected: var(--figma-color-border-tooltip-onselected, #007be5);--color-border-tooltip-onselected-strong: var(--figma-color-border-tooltip-onselected-strong, #ffffff);--color-border-tooltip-selected: var(--figma-color-border-tooltip-selected, #0d99ff);--color-border-tooltip-selected-strong: var(--figma-color-border-tooltip-selected-strong, #80caff);--color-border-tooltip-strong: var(--figma-color-border-tooltip-strong, #ffffff);--color-icon-menu: var(--figma-color-icon-menu, #ffffff);--color-icon-menu-danger: var(--figma-color-icon-menu-danger, #f24822);--color-icon-menu-disabled: var(--figma-color-icon-menu-disabled, #ffffff66);--color-icon-menu-hover: var(--figma-color-icon-menu-hover, #ffffff);--color-icon-menu-ondisabled: var(--figma-color-icon-menu-ondisabled, #1e1e1e);--color-icon-menu-onselected: var(--figma-color-icon-menu-onselected, #ffffff);--color-icon-menu-pressed: var(--figma-color-icon-menu-pressed, #0d99ff);--color-icon-menu-secondary: var(--figma-color-icon-menu-secondary, #ffffffb2);--color-icon-menu-secondary-hover: var(--figma-color-icon-menu-secondary-hover, #ffffff);--color-icon-menu-selected: var(--figma-color-icon-menu-selected, #80caff);--color-icon-menu-selected-secondary: var(--figma-color-icon-menu-selected-secondary, #80caff);--color-icon-menu-selected-tertiary: var(--figma-color-icon-menu-selected-tertiary, #80caff);--color-icon-menu-tertiary: var(--figma-color-icon-menu-tertiary, #ffffff66);--color-icon-menu-tertiary-hover: var(--figma-color-icon-menu-tertiary-hover, #ffffff);--color-icon-menu-warning: var(--figma-color-icon-menu-warning, #ffcd29);--color-icon-tooltip: var(--figma-color-icon-tooltip, #ffffff);--color-icon-tooltip-danger: var(--figma-color-icon-tooltip-danger, #f24822);--color-icon-tooltip-disabled: var(--figma-color-icon-tooltip-disabled, #ffffff66);--color-icon-tooltip-hover: var(--figma-color-icon-tooltip-hover, #ffffff);--color-icon-tooltip-ondisabled: var(--figma-color-icon-tooltip-ondisabled, #1e1e1e);--color-icon-tooltip-onselected: var(--figma-color-icon-tooltip-onselected, #ffffff);--color-icon-tooltip-pressed: var(--figma-color-icon-tooltip-pressed, #0d99ff);--color-icon-tooltip-secondary: var(--figma-color-icon-tooltip-secondary, #ffffffb2);--color-icon-tooltip-secondary-hover: var(--figma-color-icon-tooltip-secondary-hover, #ffffff);--color-icon-tooltip-selected: var(--figma-color-icon-tooltip-selected, #80caff);--color-icon-tooltip-selected-secondary: var(--figma-color-icon-tooltip-selected-secondary, #80caff);--color-icon-tooltip-selected-tertiary: var(--figma-color-icon-tooltip-selected-tertiary, #80caff);--color-icon-tooltip-tertiary: var(--figma-color-icon-tooltip-tertiary, #ffffff66);--color-icon-tooltip-tertiary-hover: var(--figma-color-icon-tooltip-tertiary-hover, #ffffff);--color-icon-tooltip-warning: var(--figma-color-icon-tooltip-warning, #ffcd29);--color-text-menu: var(--figma-color-text-menu, #ffffff);--color-text-menu-danger: var(--figma-color-text-menu-danger, #f24822);--color-text-menu-disabled: var(--figma-color-text-menu-disabled, #ffffff66);--color-text-menu-hover: var(--figma-color-text-menu-hover, #ffffff);--color-text-menu-ondisabled: var(--figma-color-text-menu-ondisabled, #1e1e1e);--color-text-menu-onselected: var(--figma-color-text-menu-onselected, #ffffff);--color-text-menu-secondary: var(--figma-color-text-menu-secondary, #ffffffb2);--color-text-menu-secondary-hover: var(--figma-color-text-menu-secondary-hover, #ffffff);--color-text-menu-selected: var(--figma-color-text-menu-selected, #80caff);--color-text-menu-selected-secondary: var(--figma-color-text-menu-selected-secondary, #80caff);--color-text-menu-selected-tertiary: var(--figma-color-text-menu-selected-tertiary, #80caff);--color-text-menu-tertiary: var(--figma-color-text-menu-tertiary, #ffffff66);--color-text-menu-tertiary-hover: var(--figma-color-text-menu-tertiary-hover, #ffffff);--color-text-menu-warning: var(--figma-color-text-menu-warning, #ffd966);--color-text-tooltip: var(--figma-color-text-tooltip, #ffffff);--color-text-tooltip-danger: var(--figma-color-text-tooltip-danger, #ffafa3);--color-text-tooltip-disabled: var(--figma-color-text-tooltip-disabled, #ffffff66);--color-text-tooltip-hover: var(--figma-color-text-tooltip-hover, #ffffff);--color-text-tooltip-ondisabled: var(--figma-color-text-tooltip-ondisabled, #1e1e1e);--color-text-tooltip-onselected: var(--figma-color-text-tooltip-onselected, #ffffff);--color-text-tooltip-secondary: var(--figma-color-text-tooltip-secondary, #ffffffb2);--color-text-tooltip-secondary-hover: var(--figma-color-text-tooltip-secondary-hover, #ffffff);--color-text-tooltip-selected: var(--figma-color-text-tooltip-selected, #80caff);--color-text-tooltip-selected-secondary: var(--figma-color-text-tooltip-selected-secondary, #80caff);--color-text-tooltip-selected-tertiary: var(--figma-color-text-tooltip-selected-tertiary, #80caff);--color-text-tooltip-tertiary: var(--figma-color-text-tooltip-tertiary, #ffffff66);--color-text-tooltip-tertiary-hover: var(--figma-color-text-tooltip-tertiary-hover, #ffffff);--color-text-tooltip-warning: var(--figma-color-text-tooltip-warning, #ffd966);--color-bg: var(--figma-color-bg, #2c2c2c);--color-bg-brand: var(--figma-color-bg-brand, #0c8ce9);--color-bg-brand-hover: var(--figma-color-bg-brand-hover, #0a6dc2);--color-bg-brand-pressed: var(--figma-color-bg-brand-pressed, #0a6dc2);--color-bg-brand-secondary: var(--figma-color-bg-brand-secondary, #105cad);--color-bg-brand-tertiary: var(--figma-color-bg-brand-tertiary, #394360);--color-bg-component: var(--figma-color-bg-component, #8a38f5);--color-bg-component-hover: var(--figma-color-bg-component-hover, #7a2ed6);--color-bg-component-pressed: var(--figma-color-bg-component-pressed, #7a2ed6);--color-bg-component-secondary: var(--figma-color-bg-component-secondary, #652ca8);--color-bg-component-tertiary: var(--figma-color-bg-component-tertiary, #473956);--color-bg-danger: var(--figma-color-bg-danger, #e03e1a);--color-bg-danger-hover: var(--figma-color-bg-danger-hover, #c4381c);--color-bg-danger-pressed: var(--figma-color-bg-danger-pressed, #c4381c);--color-bg-danger-secondary: var(--figma-color-bg-danger-secondary, #963323);--color-bg-danger-tertiary: var(--figma-color-bg-danger-tertiary, #7c2622);--color-bg-disabled: var(--figma-color-bg-disabled, #757575);--color-bg-disabled-secondary: var(--figma-color-bg-disabled-secondary, #b3b3b3);--color-bg-hover: var(--figma-color-bg-hover, #383838);--color-bg-inverse: var(--figma-color-bg-inverse, #ffffff);--color-bg-onselected: var(--figma-color-bg-onselected, #667799);--color-bg-onselected-hover: var(--figma-color-bg-onselected-hover, #667799);--color-bg-onselected-pressed: var(--figma-color-bg-onselected-pressed, #667799);--color-bg-pressed: var(--figma-color-bg-pressed, #383838);--color-bg-secondary: var(--figma-color-bg-secondary, #383838);--color-bg-selected: var(--figma-color-bg-selected, #4a5878);--color-bg-selected-hover: var(--figma-color-bg-selected-hover, #536383);--color-bg-selected-pressed: var(--figma-color-bg-selected-pressed, #536383);--color-bg-selected-secondary: var(--figma-color-bg-selected-secondary, #394360);--color-bg-selected-strong: var(--figma-color-bg-selected-strong, #0c8ce9);--color-bg-selected-tertiary: var(--figma-color-bg-selected-tertiary, #394360);--color-bg-success: var(--figma-color-bg-success, #198f51);--color-bg-success-hover: var(--figma-color-bg-success-hover, #078348);--color-bg-success-pressed: var(--figma-color-bg-success-pressed, #078348);--color-bg-success-secondary: var(--figma-color-bg-success-secondary, #0a5c35);--color-bg-success-tertiary: var(--figma-color-bg-success-tertiary, #0a4c2d);--color-bg-tertiary: var(--figma-color-bg-tertiary, #444444);--color-bg-warning: var(--figma-color-bg-warning, #f3c11b);--color-bg-warning-hover: var(--figma-color-bg-warning-hover, #f2b50d);--color-bg-warning-pressed: var(--figma-color-bg-warning-pressed, #f2b50d);--color-bg-warning-secondary: var(--figma-color-bg-warning-secondary, #e4a711);--color-bg-warning-tertiary: var(--figma-color-bg-warning-tertiary, #c58011);--color-border: var(--figma-color-border, #444444);--color-border-brand: var(--figma-color-border-brand, #105cad);--color-border-brand-strong: var(--figma-color-border-brand-strong, #7cc4f8);--color-border-component: var(--figma-color-border-component, #652ca8);--color-border-component-hover: var(--figma-color-border-component-hover, #8a38f5);--color-border-component-strong: var(--figma-color-border-component-strong, #d6b6fb);--color-border-danger: var(--figma-color-border-danger, #963323);--color-border-danger-strong: var(--figma-color-border-danger-strong, #fca397);--color-border-disabled: var(--figma-color-border-disabled, #444444);--color-border-disabled-strong: var(--figma-color-border-disabled-strong, #ffffff66);--color-border-onbrand: var(--figma-color-border-onbrand, #0a6dc2);--color-border-onbrand-strong: var(--figma-color-border-onbrand-strong, #ffffff);--color-border-oncomponent: var(--figma-color-border-oncomponent, #7a2ed6);--color-border-oncomponent-strong: var(--figma-color-border-oncomponent-strong, #ffffff);--color-border-ondanger: var(--figma-color-border-ondanger, #c4381c);--color-border-ondanger-strong: var(--figma-color-border-ondanger-strong, #ffffff);--color-border-onselected: var(--figma-color-border-onselected, #667799);--color-border-onselected-strong: var(--figma-color-border-onselected-strong, #ffffffe5);--color-border-onsuccess: var(--figma-color-border-onsuccess, #078348);--color-border-onsuccess-strong: var(--figma-color-border-onsuccess-strong, #ffffff);--color-border-onwarning: var(--figma-color-border-onwarning, #e4a711);--color-border-onwarning-strong: var(--figma-color-border-onwarning-strong, #000000e5);--color-border-selected: var(--figma-color-border-selected, #0c8ce9);--color-border-selected-strong: var(--figma-color-border-selected-strong, #7cc4f8);--color-border-strong: var(--figma-color-border-strong, #ffffffe5);--color-border-success: var(--figma-color-border-success, #0a5c35);--color-border-success-strong: var(--figma-color-border-success-strong, #79d297);--color-border-warning: var(--figma-color-border-warning, #925711);--color-border-warning-strong: var(--figma-color-border-warning-strong, #f7d15f);--color-icon: var(--figma-color-icon, #ffffff);--color-icon-brand: var(--figma-color-icon-brand, #7cc4f8);--color-icon-brand-pressed: var(--figma-color-icon-brand-pressed, #0c8ce9);--color-icon-brand-secondary: var(--figma-color-icon-brand-secondary, #536383);--color-icon-brand-tertiary: var(--figma-color-icon-brand-tertiary, #394360);--color-icon-component: var(--figma-color-icon-component, #d1a8ff);--color-icon-component-pressed: var(--figma-color-icon-component-pressed, #d6b6fb);--color-icon-component-secondary: var(--figma-color-icon-component-secondary, #6b5884);--color-icon-component-tertiary: var(--figma-color-icon-component-tertiary, #6b5884);--color-icon-danger: var(--figma-color-icon-danger, #e03e1a);--color-icon-danger-hover: var(--figma-color-icon-danger-hover, #fbbcb6);--color-icon-danger-pressed: var(--figma-color-icon-danger-pressed, #fbbcb6);--color-icon-danger-secondary: var(--figma-color-icon-danger-secondary, #e03e1a);--color-icon-danger-secondary-hover: var(--figma-color-icon-danger-secondary-hover, #e03e1a);--color-icon-danger-tertiary: var(--figma-color-icon-danger-tertiary, #e03e1a);--color-icon-disabled: var(--figma-color-icon-disabled, #ffffff66);--color-icon-hover: var(--figma-color-icon-hover, #ffffff);--color-icon-onbrand: var(--figma-color-icon-onbrand, #ffffff);--color-icon-onbrand-secondary: var(--figma-color-icon-onbrand-secondary, #ffffffcc);--color-icon-onbrand-tertiary: var(--figma-color-icon-onbrand-tertiary, #ffffff66);--color-icon-oncomponent: var(--figma-color-icon-oncomponent, #ffffff);--color-icon-oncomponent-secondary: var(--figma-color-icon-oncomponent-secondary, #ffffffcc);--color-icon-oncomponent-tertiary: var(--figma-color-icon-oncomponent-tertiary, #ffffff66);--color-icon-ondanger: var(--figma-color-icon-ondanger, #ffffff);--color-icon-ondanger-secondary: var(--figma-color-icon-ondanger-secondary, #ffffffcc);--color-icon-ondanger-tertiary: var(--figma-color-icon-ondanger-tertiary, #ffffff66);--color-icon-ondisabled: var(--figma-color-icon-ondisabled, #2c2c2c);--color-icon-oninverse: var(--figma-color-icon-oninverse, #000000e5);--color-icon-onselected: var(--figma-color-icon-onselected, #ffffff);--color-icon-onselected-secondary: var(--figma-color-icon-onselected-secondary, #ffffffb2);--color-icon-onselected-strong: var(--figma-color-icon-onselected-strong, #ffffff);--color-icon-onselected-tertiary: var(--figma-color-icon-onselected-tertiary, #ffffff66);--color-icon-onsuccess: var(--figma-color-icon-onsuccess, #ffffff);--color-icon-onsuccess-secondary: var(--figma-color-icon-onsuccess-secondary, #ffffffcc);--color-icon-onsuccess-tertiary: var(--figma-color-icon-onsuccess-tertiary, #ffffff66);--color-icon-onwarning: var(--figma-color-icon-onwarning, #000000e5);--color-icon-onwarning-secondary: var(--figma-color-icon-onwarning-secondary, #00000080);--color-icon-onwarning-tertiary: var(--figma-color-icon-onwarning-tertiary, #0000004d);--color-icon-pressed: var(--figma-color-icon-pressed, #0a6dc2);--color-icon-secondary: var(--figma-color-icon-secondary, #ffffffb2);--color-icon-secondary-hover: var(--figma-color-icon-secondary-hover, #ffffff);--color-icon-selected: var(--figma-color-icon-selected, #7cc4f8);--color-icon-selected-secondary: var(--figma-color-icon-selected-secondary, #7cc4f8);--color-icon-selected-tertiary: var(--figma-color-icon-selected-tertiary, #7cc4f8);--color-icon-success: var(--figma-color-icon-success, #198f51);--color-icon-success-pressed: var(--figma-color-icon-success-pressed, #a1e8b9);--color-icon-success-secondary: var(--figma-color-icon-success-secondary, #198f51);--color-icon-success-tertiary: var(--figma-color-icon-success-tertiary, #198f51);--color-icon-tertiary: var(--figma-color-icon-tertiary, #ffffff66);--color-icon-tertiary-hover: var(--figma-color-icon-tertiary-hover, #ffffff);--color-icon-warning: var(--figma-color-icon-warning, #f3c11b);--color-icon-warning-pressed: var(--figma-color-icon-warning-pressed, #f7d15f);--color-icon-warning-secondary: var(--figma-color-icon-warning-secondary, #f3c11b);--color-icon-warning-tertiary: var(--figma-color-icon-warning-tertiary, #f3c11b);--color-text: var(--figma-color-text, #ffffff);--color-text-brand: var(--figma-color-text-brand, #7cc4f8);--color-text-brand-secondary: var(--figma-color-text-brand-secondary, #7cc4f8);--color-text-brand-tertiary: var(--figma-color-text-brand-tertiary, #7cc4f8);--color-text-component: var(--figma-color-text-component, #d1a8ff);--color-text-component-pressed: var(--figma-color-text-component-pressed, #d6b6fb);--color-text-component-secondary: var(--figma-color-text-component-secondary, #6b5884);--color-text-component-tertiary: var(--figma-color-text-component-tertiary, #6b5884);--color-text-danger: var(--figma-color-text-danger, #fca397);--color-text-danger-secondary: var(--figma-color-text-danger-secondary, #fca397);--color-text-danger-tertiary: var(--figma-color-text-danger-tertiary, #fca397);--color-text-disabled: var(--figma-color-text-disabled, #ffffff66);--color-text-hover: var(--figma-color-text-hover, #ffffff);--color-text-onbrand: var(--figma-color-text-onbrand, #ffffff);--color-text-onbrand-secondary: var(--figma-color-text-onbrand-secondary, #ffffffcc);--color-text-onbrand-tertiary: var(--figma-color-text-onbrand-tertiary, #ffffff66);--color-text-oncomponent: var(--figma-color-text-oncomponent, #ffffff);--color-text-oncomponent-secondary: var(--figma-color-text-oncomponent-secondary, #ffffffcc);--color-text-oncomponent-tertiary: var(--figma-color-text-oncomponent-tertiary, #ffffff66);--color-text-ondanger: var(--figma-color-text-ondanger, #ffffff);--color-text-ondanger-secondary: var(--figma-color-text-ondanger-secondary, #ffffffcc);--color-text-ondanger-tertiary: var(--figma-color-text-ondanger-tertiary, #ffffff66);--color-text-ondisabled: var(--figma-color-text-ondisabled, #2c2c2c);--color-text-oninverse: var(--figma-color-text-oninverse, #000000e5);--color-text-onselected: var(--figma-color-text-onselected, #ffffffe5);--color-text-onselected-secondary: var(--figma-color-text-onselected-secondary, #ffffffb2);--color-text-onselected-strong: var(--figma-color-text-onselected-strong, #ffffff);--color-text-onselected-tertiary: var(--figma-color-text-onselected-tertiary, #ffffff66);--color-text-onsuccess: var(--figma-color-text-onsuccess, #ffffff);--color-text-onsuccess-secondary: var(--figma-color-text-onsuccess-secondary, #ffffffcc);--color-text-onsuccess-tertiary: var(--figma-color-text-onsuccess-tertiary, #ffffff66);--color-text-onwarning: var(--figma-color-text-onwarning, #000000e5);--color-text-onwarning-secondary: var(--figma-color-text-onwarning-secondary, #00000080);--color-text-onwarning-tertiary: var(--figma-color-text-onwarning-tertiary, #0000004d);--color-text-secondary: var(--figma-color-text-secondary, #ffffffb2);--color-text-secondary-hover: var(--figma-color-text-secondary-hover, #ffffff);--color-text-selected: var(--figma-color-text-selected, #7cc4f8);--color-text-selected-secondary: var(--figma-color-text-selected-secondary, #7cc4f8);--color-text-selected-tertiary: var(--figma-color-text-selected-tertiary, #7cc4f8);--color-text-success: var(--figma-color-text-success, #79d297);--color-text-success-secondary: var(--figma-color-text-success-secondary, #79d297);--color-text-success-tertiary: var(--figma-color-text-success-tertiary, #79d297);--color-text-tertiary: var(--figma-color-text-tertiary, #ffffff66);--color-text-tertiary-hover: var(--figma-color-text-tertiary-hover, #ffffff);--color-text-warning: var(--figma-color-text-warning, #f7d15f);--color-text-warning-secondary: var(--figma-color-text-warning-secondary, #f7d15f);--color-text-warning-tertiary: var(--figma-color-text-warning-tertiary, #f7d15f)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: currentColor;
}
.figma-dark {
color-scheme: dark;
}
html,
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
color: var(--color-text);
background-color: var(--color-bg);
font-family: "Inter", "Helvetica", sans-serif;
font-size: 11px;
line-height: 16px;
font-weight: 400;
}
::selection {
background-color: var(--color-bg-onselected);
}
div,
span {
cursor: default;
user-select: none;
}
h1,
h2,
h3 {
margin: 0;
font-weight: inherit;
}
button {
padding: 0;
border: 0;
background-color: transparent;
font: inherit;
outline: 0;
}
hr {
border: 0;
margin: 0;
}
label {
display: block;
}
input,
textarea {
padding: 0;
margin: 0;
cursor: default;
font: inherit;
outline: 0;
}
svg {
display: block;
}