/* component: font-import */
@import url('https://www.kuiperis.com/fonts/font-roboto.css');
@import url('https://www.kuiperis.com/fonts/font-roboto-mono.css');


/* component: root */
:root {
--font-serif: Garamond, Baskerville, "Baskerville Old Face", serif;
--font-sans-serif: "Roboto", sans-serif;
--font-monospace: "Roboto Mono", monospace;
--font-code: Consolas, "Andale Mono", monospace;
--font-cursive: "Comic Sans MS", "Comic Sans", cursive;
--font-fantasy: Copperplate, "Copperplate Gothic Bold", Papyrus, fantasy;
--text-font-family: var(--font-sans-serif);
--heading-font-family: var(--font-sans-serif);
--hero-font-family: var(--font-sans-serif);
--button-font-family: var(--font-sans-serif);
--icon-set: "sharp";
--kuiperis-guaranteed-invalid: initial;
--leader-fill-content: var(--kuiperis-guaranteed-invalid, .);
--position-margin-offset: 0px;
}


/* component: transparent */
:root {
--color-transparent: hsla(0,0%,0%,0);
}


/* component: color-monochrome */
:root {
--black-hue: 0;
--black-saturation: 0%;
--black-luminosity: 0%;
--gray-hue: 0;
--gray-saturation: 0%;
--gray-luminosity: 46.3%;
--white-hue: 0;
--white-saturation: 0%;
--white-luminosity: 100%;

--color-black-100: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),100%); --color-black-100-foreground: var(--color-white);
--color-black-95: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),95%); --color-black-95-foreground: var(--color-white);
--color-black-90: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),90%); --color-black-90-foreground: var(--color-white);
--color-black-85: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),85%); --color-black-85-foreground: var(--color-white);
--color-black-80: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),80%); --color-black-80-foreground: var(--color-white);
--color-black-75: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),75%); --color-black-75-foreground: var(--color-white);
--color-black-70: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),70%); --color-black-70-foreground: var(--color-white);
--color-black-65: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),65%); --color-black-65-foreground: var(--color-white);
--color-black-60: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),60%); --color-black-60-foreground: var(--color-white);
--color-black-55: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),55%); --color-black-55-foreground: var(--color-white);
--color-black-50: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),50%); --color-black-50-foreground: var(--color-white);
--color-black-45: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),45%); --color-black-45-foreground: var(--color-white);
--color-black-40: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),40%); --color-black-40-foreground: var(--color-white);
--color-black-35: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),35%); --color-black-35-foreground: var(--color-white);
--color-black-30: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),30%); --color-black-30-foreground: var(--color-white);
--color-black-25: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),25%); --color-black-25-foreground: var(--color-white);
--color-black-20: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),20%); --color-black-20-foreground: var(--color-white);
--color-black-15: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),15%); --color-black-15-foreground: var(--color-white);
--color-black-10: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),10%); --color-black-10-foreground: var(--color-white);
--color-black-5: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),5%); --color-black-5-foreground: var(--color-white);
--color-black-0: hsla(var(--black-hue),var(--black-saturation),var(--black-luminosity),0%); --color-black-0-foreground: var(--color-white);
--color-black: var(--color-black-100); --color-black-foreground: var(--color-white);

--color-gray-100: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),100%); --color-gray-100-foreground: var(--color-white);
--color-gray-95: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),95%); --color-gray-95-foreground: var(--color-white);
--color-gray-90: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),90%); --color-gray-90-foreground: var(--color-white);
--color-gray-85: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),85%); --color-gray-85-foreground: var(--color-white);
--color-gray-80: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),80%); --color-gray-80-foreground: var(--color-white);
--color-gray-75: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),75%); --color-gray-75-foreground: var(--color-white);
--color-gray-70: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),70%); --color-gray-70-foreground: var(--color-white);
--color-gray-65: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),65%); --color-gray-65-foreground: var(--color-white);
--color-gray-60: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),60%); --color-gray-60-foreground: var(--color-white);
--color-gray-55: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),55%); --color-gray-55-foreground: var(--color-white);
--color-gray-50: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),50%); --color-gray-50-foreground: var(--color-white);
--color-gray-45: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),45%); --color-gray-45-foreground: var(--color-white);
--color-gray-40: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),40%); --color-gray-40-foreground: var(--color-white);
--color-gray-35: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),35%); --color-gray-35-foreground: var(--color-white);
--color-gray-30: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),30%); --color-gray-30-foreground: var(--color-white);
--color-gray-25: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),25%); --color-gray-25-foreground: var(--color-white);
--color-gray-20: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),20%); --color-gray-20-foreground: var(--color-white);
--color-gray-15: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),15%); --color-gray-15-foreground: var(--color-white);
--color-gray-10: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),10%); --color-gray-10-foreground: var(--color-white);
--color-gray-5: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),5%); --color-gray-5-foreground: var(--color-white);
--color-gray-0: hsla(var(--gray-hue),var(--gray-saturation),var(--gray-luminosity),0%); --color-gray-0-foreground: var(--color-white);
--color-gray: var(--color-gray-100); --color-gray-foreground: var(--color-white);

--color-white-100: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),100%); --color-white-100-foreground: var(--color-black);
--color-white-95: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),95%); --color-white-95-foreground: var(--color-black);
--color-white-90: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),90%); --color-white-90-foreground: var(--color-black);
--color-white-85: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),85%); --color-white-85-foreground: var(--color-black);
--color-white-80: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),80%); --color-white-80-foreground: var(--color-black);
--color-white-75: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),75%); --color-white-75-foreground: var(--color-black);
--color-white-70: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),70%); --color-white-70-foreground: var(--color-black);
--color-white-65: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),65%); --color-white-65-foreground: var(--color-black);
--color-white-60: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),60%); --color-white-60-foreground: var(--color-black);
--color-white-55: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),55%); --color-white-55-foreground: var(--color-black);
--color-white-50: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),50%); --color-white-50-foreground: var(--color-black);
--color-white-45: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),45%); --color-white-45-foreground: var(--color-black);
--color-white-40: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),40%); --color-white-40-foreground: var(--color-black);
--color-white-35: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),35%); --color-white-35-foreground: var(--color-black);
--color-white-30: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),30%); --color-white-30-foreground: var(--color-black);
--color-white-25: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),25%); --color-white-25-foreground: var(--color-black);
--color-white-20: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),20%); --color-white-20-foreground: var(--color-black);
--color-white-15: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),15%); --color-white-15-foreground: var(--color-black);
--color-white-10: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),10%); --color-white-10-foreground: var(--color-black);
--color-white-5: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),5%); --color-white-5-foreground: var(--color-black);
--color-white-0: hsla(var(--white-hue),var(--white-saturation),var(--white-luminosity),0%); --color-white-0-foreground: var(--color-black);
--color-white: var(--color-white-100); --color-white-foreground: var(--color-black);

--color-black-medium: #0f0f0f; --color-black-medium-foreground: var(--color-white);
--color-black-light: #222222; --color-black-light-foreground: var(--color-white);
--color-black-xlight: #303030; --color-black-xlight-foreground: var(--color-white);
--color-black-2xlight: #3d3d3d; --color-black-2xlight-foreground: var(--color-white);
--color-black-3xlight: #424242; --color-black-3xlight-foreground: var(--color-white);
--color-black-4xlight: #474747; --color-black-4xlight-foreground: var(--color-white);
--color-black-5xlight: #4d4d4d; --color-black-5xlight-foreground: var(--color-white);
--color-black-6xlight: #525252; --color-black-6xlight-foreground: var(--color-white);

--color-gray-3xdark: #575757; --color-gray-3xdark-foreground: var(--color-white);
--color-gray-2xdark: #5e5e5e; --color-gray-2xdark-foreground: var(--color-white);
--color-gray-xdark: #646464; --color-gray-xdark-foreground: var(--color-white);
--color-gray-dark: #6b6b6b; --color-gray-dark-foreground: var(--color-white);
--color-gray-medium: var(--color-gray); --color-gray-medium-foreground: var(--color-gray-foreground);
--color-gray-light: #888888; --color-gray-light-foreground: var(--color-black);
--color-gray-xlight: #b3b3b3; --color-gray-xlight-foreground: var(--color-black);
--color-gray-2xlight: #bbbbbb; --color-gray-2xlight-foreground: var(--color-black);
--color-gray-3xlight: #c3c3c3; --color-gray-3xlight-foreground: var(--color-black);

--color-white-6xdark: #cbcbcb; --color-white-6xdark-foreground: var(--color-black);
--color-white-5xdark: #d3d3d3; --color-white-5xdark-foreground: var(--color-black);
--color-white-4xdark: #dbdbdb; --color-white-4xdark-foreground: var(--color-black);
--color-white-3xdark: #e4e4e4; --color-white-3xdark-foreground: var(--color-black);
--color-white-2xdark: #ededed; --color-white-2xdark-foreground: var(--color-black);
--color-white-xdark: #f1f1f1; --color-white-xdark-foreground: var(--color-black);
--color-white-dark: #f5f5f5; --color-white-dark-foreground: var(--color-black);
--color-white-medium: #f9f9f9; --color-white-medium-foreground: var(--color-black);
}


/* component: color-role */
:root {
--color-muted-3xdark: var(--color-gray-3xdark); --color-muted-3xdark-foreground: var(--color-gray-3xdark-foreground);
--color-muted-2xdark: var(--color-gray-2xdark); --color-muted-2xdark-foreground: var(--color-gray-2xdark-foreground);
--color-muted-xdark: var(--color-gray-xdark); --color-muted-xdark-foreground: var(--color-gray-xdark-foreground);
--color-muted-dark: var(--color-gray-dark); --color-muted-dark-foreground: var(--color-gray-dark-foreground);
--color-muted-medium: var(--color-gray-medium); --color-muted-medium-foreground: var(--color-gray-medium-foreground);
--color-muted-light: var(--color-gray-light); --color-muted-light-foreground: var(--color-gray-light-foreground);
--color-muted-xlight: var(--color-gray-xlight); --color-muted-xlight-foreground: var(--color-gray-xlight-foreground);
--color-muted-2xlight: var(--color-gray-2xlight); --color-muted-2xlight-foreground: var(--color-gray-2xlight-foreground);
--color-muted-3xlight: var(--color-gray-3xlight); --color-muted-3xlight-foreground: var(--color-gray-3xlight-foreground);

--color-primary-3xdark: #272a3e; --color-primary-3xdark-foreground: var(--color-white);
--color-primary-2xdark: #373a53; --color-primary-2xdark-foreground: var(--color-white);
--color-primary-xdark: #454967; --color-primary-xdark-foreground: var(--color-white);
--color-primary-dark: #54597c; --color-primary-dark-foreground: var(--color-white);
--color-primary-medium: #5d6388; --color-primary-medium-foreground: var(--color-white);
--color-primary-light: #6a7095; --color-primary-light-foreground: var(--color-white);
--color-primary-xlight: #8c91af; --color-primary-xlight-foreground: var(--color-black);
--color-primary-2xlight: #b3b7cc; --color-primary-2xlight-foreground: var(--color-black);
--color-primary-3xlight: #e1e3f0; --color-primary-3xlight-foreground: var(--color-black);

--color-secondary-3xdark: #202d33; --color-secondary-3xdark-foreground: var(--color-white);
--color-secondary-2xdark: #2d3c43; --color-secondary-2xdark-foreground: var(--color-white);
--color-secondary-xdark: #3a4a52; --color-secondary-xdark-foreground: var(--color-white);
--color-secondary-dark: #465861; --color-secondary-dark-foreground: var(--color-white);
--color-secondary-medium: #51656f; --color-secondary-medium-foreground: var(--color-white);
--color-secondary-light: #5c737e; --color-secondary-light-foreground: var(--color-white);
--color-secondary-xlight: #85969f; --color-secondary-xlight-foreground: var(--color-black);
--color-secondary-2xlight: #b3bfc6; --color-secondary-2xlight-foreground: var(--color-black);
--color-secondary-3xlight: #eaf1f4; --color-secondary-3xlight-foreground: var(--color-black);

--color-tertiary-3xdark: #3b271f; --color-tertiary-3xdark-foreground: var(--color-white);
--color-tertiary-2xdark: #4c342c; --color-tertiary-2xdark-foreground: var(--color-white);
--color-tertiary-xdark: #5b4138; --color-tertiary-xdark-foreground: var(--color-white);
--color-tertiary-dark: #6a4e43; --color-tertiary-dark-foreground: var(--color-white);
--color-tertiary-medium: #79594d; --color-tertiary-medium-foreground: var(--color-white);
--color-tertiary-light: #896558; --color-tertiary-light-foreground: var(--color-white);
--color-tertiary-xlight: #a78c81; --color-tertiary-xlight-foreground: var(--color-black);
--color-tertiary-2xlight: #cab8b2; --color-tertiary-2xlight-foreground: var(--color-black);
--color-tertiary-3xlight: #f5eeec; --color-tertiary-3xlight-foreground: var(--color-black);

--color-danger-3xdark: #600005; --color-danger-3xdark-foreground: var(--color-white);
--color-danger-2xdark: #770008; --color-danger-2xdark-foreground: var(--color-white);
--color-danger-xdark: #8b0c12; --color-danger-xdark-foreground: var(--color-white);
--color-danger-dark: #9d1a1b; --color-danger-dark-foreground: var(--color-white);
--color-danger-medium: #b21f20; --color-danger-medium-foreground: var(--color-white);
--color-danger-light: #c82426; --color-danger-light-foreground: var(--color-white);
--color-danger-xlight: #da6d63; --color-danger-xlight-foreground: var(--color-black);
--color-danger-2xlight: #eca9a1; --color-danger-2xlight-foreground: var(--color-black);
--color-danger-3xlight: #feecea; --color-danger-3xlight-foreground: var(--color-black);

--color-warning-3xdark: #4d1d00; --color-warning-3xdark-foreground: var(--color-white);
--color-warning-2xdark: #7b3400; --color-warning-2xdark-foreground: var(--color-white);
--color-warning-xdark: #a64c10; --color-warning-xdark-foreground: var(--color-white);
--color-warning-dark: #d46824; --color-warning-dark-foreground: var(--color-black);
--color-warning-medium: #e87228; --color-warning-medium-foreground: var(--color-black);
--color-warning-light: #f8813b; --color-warning-light-foreground: var(--color-black);
--color-warning-xlight: #fba478; --color-warning-xlight-foreground: var(--color-black);
--color-warning-2xlight: #fcc8ad; --color-warning-2xlight-foreground: var(--color-black);
--color-warning-3xlight: #feece4; --color-warning-3xlight-foreground: var(--color-black);

--color-accent-3xdark: #3c2800; --color-accent-3xdark-foreground: var(--color-white);
--color-accent-2xdark: #6a4a00; --color-accent-2xdark-foreground: var(--color-white);
--color-accent-xdark: #996d00; --color-accent-xdark-foreground: var(--color-white);
--color-accent-dark: #dca126; --color-accent-dark-foreground: var(--color-black);
--color-accent-medium: #edaf2a; --color-accent-medium-foreground: var(--color-black);
--color-accent-light: #f2c067; --color-accent-light-foreground: var(--color-black);
--color-accent-xlight: #f5cf8f; --color-accent-xlight-foreground: var(--color-black);
--color-accent-2xlight: #f7deb4; --color-accent-2xlight-foreground: var(--color-black);
--color-accent-3xlight: #fceed9; --color-accent-3xlight-foreground: var(--color-black);

--color-success-3xdark: #003405; --color-success-3xdark-foreground: var(--color-white);
--color-success-2xdark: #00460a; --color-success-2xdark-foreground: var(--color-white);
--color-success-xdark: #085613; --color-success-xdark-foreground: var(--color-white);
--color-success-dark: #16671e; --color-success-dark-foreground: var(--color-white);
--color-success-medium: #1b7624; --color-success-medium-foreground: var(--color-white);
--color-success-light: #20852a; --color-success-light-foreground: var(--color-white);
--color-success-xlight: #67a567; --color-success-xlight-foreground: var(--color-black);
--color-success-2xlight: #a4caa4; --color-success-2xlight-foreground: var(--color-black);
--color-success-3xlight: #e8f5e8; --color-success-3xlight-foreground: var(--color-black);

--color-info-3xdark: #003138; --color-info-3xdark-foreground: var(--color-white);
--color-info-2xdark: #00535f; --color-info-2xdark-foreground: var(--color-white);
--color-info-xdark: #147584; --color-info-xdark-foreground: var(--color-white);
--color-info-dark: #2a9bac; --color-info-dark-foreground: var(--color-black);
--color-info-medium: #2faabd; --color-info-medium-foreground: var(--color-black);
--color-info-light: #34b9ce; --color-info-light-foreground: var(--color-black);
--color-info-xlight: #7cccdb; --color-info-xlight-foreground: var(--color-black);
--color-info-2xlight: #b3e2eb; --color-info-2xlight-foreground: var(--color-black);
--color-info-3xlight: #e9f9fc; --color-info-3xlight-foreground: var(--color-black);

--color-action-3xdark: #002b5b; --color-action-3xdark-foreground: var(--color-white);
--color-action-2xdark: #003876; --color-action-2xdark-foreground: var(--color-white);
--color-action-xdark: #08468c; --color-action-xdark-foreground: var(--color-white);
--color-action-dark: #13549f; --color-action-dark-foreground: var(--color-white);
--color-action-medium: #1760b5; --color-action-medium-foreground: var(--color-white);
--color-action-light: #1b6dcb; --color-action-light-foreground: var(--color-white);
--color-action-xlight: #6094d9; --color-action-xlight-foreground: var(--color-black);
--color-action-2xlight: #9fbfe9; --color-action-2xlight-foreground: var(--color-black);
--color-action-3xlight: #e7f0fe; --color-action-3xlight-foreground: var(--color-black);

--color-urgent-3xdark: #3b0080; --color-urgent-3xdark-foreground: var(--color-white);
--color-urgent-2xdark: #4a009c; --color-urgent-2xdark-foreground: var(--color-white);
--color-urgent-xdark: #5610b1; --color-urgent-xdark-foreground: var(--color-white);
--color-urgent-dark: #611fc4; --color-urgent-dark-foreground: var(--color-white);
--color-urgent-medium: #6f24de; --color-urgent-medium-foreground: var(--color-white);
--color-urgent-light: #7c35f2; --color-urgent-light-foreground: var(--color-white);
--color-urgent-xlight: #9777f3; --color-urgent-xlight-foreground: var(--color-black);
--color-urgent-2xlight: #bdb0f6; --color-urgent-2xlight-foreground: var(--color-black);
--color-urgent-3xlight: #f0eefe; --color-urgent-3xlight-foreground: var(--color-black);

--color-emphasis-3xdark: #530054; --color-emphasis-3xdark-foreground: var(--color-white);
--color-emphasis-2xdark: #670068; --color-emphasis-2xdark-foreground: var(--color-white);
--color-emphasis-xdark: #780c79; --color-emphasis-xdark-foreground: var(--color-white);
--color-emphasis-dark: #881988; --color-emphasis-dark-foreground: var(--color-white);
--color-emphasis-medium: #9b1e9b; --color-emphasis-medium-foreground: var(--color-white);
--color-emphasis-light: #ae23ae; --color-emphasis-light-foreground: var(--color-white);
--color-emphasis-xlight: #c66ac3; --color-emphasis-xlight-foreground: var(--color-black);
--color-emphasis-2xlight: #dfa7dd; --color-emphasis-2xlight-foreground: var(--color-black);
--color-emphasis-3xlight: #feeafc; --color-emphasis-3xlight-foreground: var(--color-black);
}


/* component: color-foreground */
:root,
.foreground-on-light,
.background-white,
.background-white-medium,
.background-white-dark,
.background-white-xdark,
.background-white-2xdark,
.section-white,
.section-white-medium,
.section-white-dark,
.section-white-xdark,
.section-white-2xdark,
.card-white {
--foreground-text: var(--color-black);
--foreground-soft: var(--color-gray-dark);
--foreground-heavy: var(--color-black-2xlight);
--foreground-moderate: var(--color-gray-light);
--foreground-slight: var(--color-gray-3xlight);
--foreground-tint: var(--color-black-20);
--foreground-black: var(--color-black);
--foreground-white: var(--color-white);
--foreground-muted: var(--color-muted-dark);
--foreground-primary: #5d6388;
--foreground-secondary: #51656f;
--foreground-tertiary: #79594d;
--foreground-danger: #b21f20;
--foreground-warning: #a55019;
--foreground-accent: #886100;
--foreground-success: #1b7624;
--foreground-info: #1c727f;
--foreground-action: #1760b5;
--foreground-urgent: #6f24de;
--foreground-emphasis: #9b1e9b;
}

.foreground-on-dark,
.background-black,
.background-black-medium,
.background-black-light,
.background-black-xlight,
.background-black-2xlight,
.section-black,
.section-black-medium,
.section-black-light,
.section-black-xlight,
.section-black-2xlight,
.card-black {
--foreground-text: var(--color-white);
--foreground-soft: var(--color-gray-xlight);
--foreground-heavy: var(--color-white-2xdark);
--foreground-moderate: var(--color-gray-light);
--foreground-slight: var(--color-gray-3xdark);
--foreground-tint: var(--color-white-20);
--foreground-black: var(--color-black);
--foreground-white: var(--color-white);
--foreground-muted: var(--color-muted-xlight);
--foreground-primary: #a3aad2;
--foreground-secondary: #8eb1c1;
--foreground-tertiary: #c9a496;
--foreground-danger: #f98e83;
--foreground-warning: #f89159;
--foreground-accent: #dfa10a;
--foreground-success: #33c542;
--foreground-info: #35bcd0;
--foreground-action: #77aff8;
--foreground-urgent: #b19ff8;
--foreground-emphasis: #f97bf6;
}


/* component: default-animation */
:root {
--transition-default-delay: 0ms;
--transition-default-duration: 100ms;
--transition-default-timing-function: linear;
}


/* component: gutter-fixed */
:root {
--gutter-0: 0px;
--gutter-1: 1px;
--gutter-2: 2px;
--gutter-3: 3px;
--gutter-4: 4px;
--gutter-6: 6px;
--gutter-8: 8px;
--gutter-10: 10px;
--gutter-12: 12px;
--gutter-14: 14px;
--gutter-16: 16px;
--gutter-18: 18px;
--gutter-20: 20px;
--gutter-22: 22px;
--gutter-24: 24px;
--gutter-28: 28px;
--gutter-32: 32px;
--gutter-36: 36px;
--gutter-40: 40px;
--gutter-44: 44px;
--gutter-48: 48px;
--gutter-52: 52px;
--gutter-56: 56px;
--gutter-60: 60px;
--gutter-64: 64px;
--gutter-72: 72px;
--gutter-80: 80px;
--gutter-88: 88px;
--gutter-96: 96px;
--gutter-112: 112px;
--gutter-128: 128px;
--gutter-144: 144px;
--gutter-160: 160px;
--gutter-176: 176px;
--gutter-192: 192px;
--gutter-208: 208px;
--gutter-224: 224px;
--gutter-240: 240px;
--gutter-256: 256px;
--gutter-272: 272px;
--gutter-288: 288px;
--gutter-304: 304px;
--gutter-320: 320px;
--gutter-480: 480px;
--gutter-512: 512px;
--gutter-540: 540px;
--gutter-640: 640px;
--gutter-768: 768px;
--gutter-960: 960px;
--gutter-1024: 1024px;
--gutter-1280: 1280px;
}


/* component: gutter-responsive */
@media (max-width: 575px) {
:root {
--gutter-20-24: 20px;
--gutter-24-32: 24px;
--gutter-24-40: 24px;
--gutter-32-40: 32px;
--gutter-50-52: 50px;
--gutter-50-64: 50px;
--gutter-52-56: 52px;
--gutter-54-60: 54px;
--gutter-56-64: 56px;
--gutter-56-80: 56px;
--gutter-58-72: 58px;
--gutter-60-80: 60px;
--gutter-62-88: 62px;
--gutter-62-96: 62px;
--gutter-64-96: 64px;
--gutter-72-112: 72px;
--gutter-72-128: 72px;
--gutter-80-128: 80px;
--gutter-88-144: 88px;
--gutter-88-160: 88px;
--gutter-96-160: 96px;
--gutter-112-176: 112px;
--gutter-112-192: 112px;
--gutter-128-192: 128px;
--gutter-144-208: 144px;
--gutter-160-224: 160px;
--gutter-176-240: 176px;
--gutter-192-256: 192px;
--gutter-208-288: 208px;
--gutter-224-320: 224px;
}
}

@media (min-width: 576px) {
:root {
--gutter-20-24: 22px;
--gutter-24-32: 28px;
--gutter-24-40: 28px;
--gutter-32-40: 36px;
--gutter-50-52: 52px;
--gutter-50-64: 54px;
--gutter-52-56: 54px;
--gutter-54-60: 56px;
--gutter-56-64: 58px;
--gutter-56-80: 60px;
--gutter-58-72: 60px;
--gutter-60-80: 62px;
--gutter-62-88: 64px;
--gutter-62-96: 72px;
--gutter-64-96: 72px;
--gutter-72-112: 80px;
--gutter-72-128: 88px;
--gutter-80-128: 88px;
--gutter-88-144: 96px;
--gutter-88-160: 112px;
--gutter-96-160: 112px;
--gutter-112-176: 128px;
--gutter-112-192: 144px;
--gutter-128-192: 144px;
--gutter-144-208: 160px;
--gutter-160-224: 176px;
--gutter-176-240: 192px;
--gutter-192-256: 208px;
--gutter-208-288: 224px;
--gutter-224-320: 240px;
}
}

@media (min-width: 768px) {
:root {
--gutter-20-24: 24px;
--gutter-24-32: 32px;
--gutter-24-40: 32px;
--gutter-32-40: 40px;
--gutter-50-52: 52px;
--gutter-50-64: 58px;
--gutter-52-56: 56px;
--gutter-54-60: 58px;
--gutter-56-64: 60px;
--gutter-56-80: 64px;
--gutter-58-72: 62px;
--gutter-60-80: 64px;
--gutter-62-88: 72px;
--gutter-62-96: 80px;
--gutter-64-96: 80px;
--gutter-72-112: 88px;
--gutter-72-128: 96px;
--gutter-80-128: 96px;
--gutter-88-144: 112px;
--gutter-88-160: 128px;
--gutter-96-160: 128px;
--gutter-112-176: 144px;
--gutter-112-192: 160px;
--gutter-128-192: 160px;
--gutter-144-208: 176px;
--gutter-160-224: 192px;
--gutter-176-240: 208px;
--gutter-192-256: 224px;
--gutter-208-288: 240px;
--gutter-224-320: 256px;
}
}

@media (min-width: 1024px) {
:root {
--gutter-20-24: 24px;
--gutter-24-32: 32px;
--gutter-24-40: 36px;
--gutter-32-40: 40px;
--gutter-50-52: 52px;
--gutter-50-64: 62px;
--gutter-52-56: 56px;
--gutter-54-60: 60px;
--gutter-56-64: 62px;
--gutter-56-80: 72px;
--gutter-58-72: 64px;
--gutter-60-80: 72px;
--gutter-62-88: 80px;
--gutter-62-96: 88px;
--gutter-64-96: 88px;
--gutter-72-112: 96px;
--gutter-72-128: 112px;
--gutter-80-128: 112px;
--gutter-88-144: 128px;
--gutter-88-160: 144px;
--gutter-96-160: 144px;
--gutter-112-176: 160px;
--gutter-112-192: 176px;
--gutter-128-192: 176px;
--gutter-144-208: 192px;
--gutter-160-224: 208px;
--gutter-176-240: 224px;
--gutter-192-256: 240px;
--gutter-208-288: 256px;
--gutter-224-320: 288px;
}
}

@media (min-width: 1280px) {
:root {
--gutter-20-24: 24px;
--gutter-24-32: 32px;
--gutter-24-40: 40px;
--gutter-32-40: 40px;
--gutter-50-52: 52px;
--gutter-50-64: 64px;
--gutter-52-56: 56px;
--gutter-54-60: 60px;
--gutter-56-64: 64px;
--gutter-56-80: 80px;
--gutter-58-72: 72px;
--gutter-60-80: 80px;
--gutter-62-88: 88px;
--gutter-62-96: 96px;
--gutter-64-96: 96px;
--gutter-72-112: 112px;
--gutter-72-128: 128px;
--gutter-80-128: 128px;
--gutter-88-144: 144px;
--gutter-88-160: 160px;
--gutter-96-160: 160px;
--gutter-112-176: 176px;
--gutter-112-192: 192px;
--gutter-128-192: 192px;
--gutter-144-208: 208px;
--gutter-160-224: 224px;
--gutter-176-240: 240px;
--gutter-192-256: 256px;
--gutter-208-288: 288px;
--gutter-224-320: 320px;
}
}


/* component: responsive-value */
:root {
--breakpoint-s: 576px;
--breakpoint-m: 768px;
--breakpoint-l: 1024px;
--breakpoint-xl: 1280px;

--body-min-width: 320px;
--body-max-width: 2560px;

--container-xs: 100%;
--container-s: 100%;
--container-m: 100%;
--container-l: 100%;
--container-xl: 100%;

--offcanvas-horizontal-width: 320px;
--offcanvas-vertical-width: 240px;

--leading-19xs: 1.0000;
--leading-18xs: 1.0250;
--leading-17xs: 1.0500;
--leading-16xs: 1.0750;
--leading-15xs: 1.1000;
--leading-14xs: 1.1250;
--leading-13xs: 1.1500;
--leading-12xs: 1.1750;
--leading-11xs: 1.2000;
--leading-10xs: 1.2250;
--leading-9xs: 1.2500;
--leading-8xs: 1.2750;
--leading-7xs: 1.3000;
--leading-6xs: 1.3250;
--leading-5xs: 1.3500;
--leading-4xs: 1.3750;
--leading-3xs: 1.4000;
--leading-2xs: 1.4250;
--leading-xs: 1.4500;
--leading-s: 1.4750;
--leading-m: 1.5000;
--leading-l: 1.5250;
--leading-xl: 1.5500;
--leading-2xl: 1.5750;
--leading-3xl: 1.6000;
--leading-4xl: 1.6250;
--leading-5xl: 1.6500;
--leading-6xl: 1.6750;
--leading-7xl: 1.7000;
--leading-8xl: 1.7250;
--leading-9xl: 1.7500;
--leading-10xl: 1.7750;
--leading-11xl: 1.8000;
--leading-12xl: 1.8250;
--leading-13xl: 1.8500;
--leading-14xl: 1.8750;
--leading-15xl: 1.9000;
--leading-16xl: 1.9250;
--leading-17xl: 1.9500;
--leading-18xl: 1.9750;
--leading-19xl: 2.0000;

--logo-top-width: 96px;
--logo-bottom-width: 96px;
--logo-offcanvas-width: 96px;
}

@media (min-width: 576px) {
:root {--container-xs: 384px;
--container-s: 576px;
--container-m: 576px;
--container-l: 576px;
--container-xl: 576px;

--offcanvas-horizontal-width: 320px;
--offcanvas-vertical-width: 240px;

--leading-19xs: 1.0000;
--leading-18xs: 1.0250;
--leading-17xs: 1.0500;
--leading-16xs: 1.0750;
--leading-15xs: 1.1000;
--leading-14xs: 1.1250;
--leading-13xs: 1.1500;
--leading-12xs: 1.1750;
--leading-11xs: 1.2000;
--leading-10xs: 1.2250;
--leading-9xs: 1.2500;
--leading-8xs: 1.2750;
--leading-7xs: 1.3000;
--leading-6xs: 1.3250;
--leading-5xs: 1.3500;
--leading-4xs: 1.3750;
--leading-3xs: 1.4000;
--leading-2xs: 1.4250;
--leading-xs: 1.4500;
--leading-s: 1.4750;
--leading-m: 1.5000;
--leading-l: 1.5250;
--leading-xl: 1.5500;
--leading-2xl: 1.5750;
--leading-3xl: 1.6000;
--leading-4xl: 1.6250;
--leading-5xl: 1.6500;
--leading-6xl: 1.6750;
--leading-7xl: 1.7000;
--leading-8xl: 1.7250;
--leading-9xl: 1.7500;
--leading-10xl: 1.7750;
--leading-11xl: 1.8000;
--leading-12xl: 1.8250;
--leading-13xl: 1.8500;
--leading-14xl: 1.8750;
--leading-15xl: 1.9000;
--leading-16xl: 1.9250;
--leading-17xl: 1.9500;
--leading-18xl: 1.9750;
--leading-19xl: 2.0000;

--logo-top-width: 104px;
--logo-bottom-width: 104px;
--logo-offcanvas-width: 104px;
}
}

@media (min-width: 768px) {
:root {--container-xs: 384px;
--container-s: 576px;
--container-m: 768px;
--container-l: 768px;
--container-xl: 768px;

--offcanvas-horizontal-width: 320px;
--offcanvas-vertical-width: 240px;

--leading-19xs: 1.0000;
--leading-18xs: 1.0250;
--leading-17xs: 1.0500;
--leading-16xs: 1.0750;
--leading-15xs: 1.1000;
--leading-14xs: 1.1250;
--leading-13xs: 1.1500;
--leading-12xs: 1.1750;
--leading-11xs: 1.2000;
--leading-10xs: 1.2250;
--leading-9xs: 1.2500;
--leading-8xs: 1.2750;
--leading-7xs: 1.3000;
--leading-6xs: 1.3250;
--leading-5xs: 1.3500;
--leading-4xs: 1.3750;
--leading-3xs: 1.4000;
--leading-2xs: 1.4250;
--leading-xs: 1.4500;
--leading-s: 1.4750;
--leading-m: 1.5000;
--leading-l: 1.5250;
--leading-xl: 1.5500;
--leading-2xl: 1.5750;
--leading-3xl: 1.6000;
--leading-4xl: 1.6250;
--leading-5xl: 1.6500;
--leading-6xl: 1.6750;
--leading-7xl: 1.7000;
--leading-8xl: 1.7250;
--leading-9xl: 1.7500;
--leading-10xl: 1.7750;
--leading-11xl: 1.8000;
--leading-12xl: 1.8250;
--leading-13xl: 1.8500;
--leading-14xl: 1.8750;
--leading-15xl: 1.9000;
--leading-16xl: 1.9250;
--leading-17xl: 1.9500;
--leading-18xl: 1.9750;
--leading-19xl: 2.0000;

--logo-top-width: 112px;
--logo-bottom-width: 112px;
--logo-offcanvas-width: 112px;
}
}

@media (min-width: 1024px) {
:root {--container-xs: 384px;
--container-s: 576px;
--container-m: 768px;
--container-l: 1024px;
--container-xl: 1024px;

--offcanvas-horizontal-width: 320px;
--offcanvas-vertical-width: 240px;

--leading-19xs: 1.0000;
--leading-18xs: 1.0250;
--leading-17xs: 1.0500;
--leading-16xs: 1.0750;
--leading-15xs: 1.1000;
--leading-14xs: 1.1250;
--leading-13xs: 1.1500;
--leading-12xs: 1.1750;
--leading-11xs: 1.2000;
--leading-10xs: 1.2250;
--leading-9xs: 1.2500;
--leading-8xs: 1.2750;
--leading-7xs: 1.3000;
--leading-6xs: 1.3250;
--leading-5xs: 1.3500;
--leading-4xs: 1.3750;
--leading-3xs: 1.4000;
--leading-2xs: 1.4250;
--leading-xs: 1.4500;
--leading-s: 1.4750;
--leading-m: 1.5000;
--leading-l: 1.5250;
--leading-xl: 1.5500;
--leading-2xl: 1.5750;
--leading-3xl: 1.6000;
--leading-4xl: 1.6250;
--leading-5xl: 1.6500;
--leading-6xl: 1.6750;
--leading-7xl: 1.7000;
--leading-8xl: 1.7250;
--leading-9xl: 1.7500;
--leading-10xl: 1.7750;
--leading-11xl: 1.8000;
--leading-12xl: 1.8250;
--leading-13xl: 1.8500;
--leading-14xl: 1.8750;
--leading-15xl: 1.9000;
--leading-16xl: 1.9250;
--leading-17xl: 1.9500;
--leading-18xl: 1.9750;
--leading-19xl: 2.0000;

--logo-top-width: 120px;
--logo-bottom-width: 120px;
--logo-offcanvas-width: 120px;
}
}

@media (min-width: 1280px) {
:root {--container-xs: 384px;
--container-s: 576px;
--container-m: 768px;
--container-l: 1024px;
--container-xl: 1280px;

--offcanvas-horizontal-width: 320px;
--offcanvas-vertical-width: 240px;

--leading-19xs: 1.0000;
--leading-18xs: 1.0250;
--leading-17xs: 1.0500;
--leading-16xs: 1.0750;
--leading-15xs: 1.1000;
--leading-14xs: 1.1250;
--leading-13xs: 1.1500;
--leading-12xs: 1.1750;
--leading-11xs: 1.2000;
--leading-10xs: 1.2250;
--leading-9xs: 1.2500;
--leading-8xs: 1.2750;
--leading-7xs: 1.3000;
--leading-6xs: 1.3250;
--leading-5xs: 1.3500;
--leading-4xs: 1.3750;
--leading-3xs: 1.4000;
--leading-2xs: 1.4250;
--leading-xs: 1.4500;
--leading-s: 1.4750;
--leading-m: 1.5000;
--leading-l: 1.5250;
--leading-xl: 1.5500;
--leading-2xl: 1.5750;
--leading-3xl: 1.6000;
--leading-4xl: 1.6250;
--leading-5xl: 1.6500;
--leading-6xl: 1.6750;
--leading-7xl: 1.7000;
--leading-8xl: 1.7250;
--leading-9xl: 1.7500;
--leading-10xl: 1.7750;
--leading-11xl: 1.8000;
--leading-12xl: 1.8250;
--leading-13xl: 1.8500;
--leading-14xl: 1.8750;
--leading-15xl: 1.9000;
--leading-16xl: 1.9250;
--leading-17xl: 1.9500;
--leading-18xl: 1.9750;
--leading-19xl: 2.0000;

--logo-top-width: 128px;
--logo-bottom-width: 128px;
--logo-offcanvas-width: 128px;
}
}


/* component: reset */
*,
*:before,
*:after {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
position: relative;
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding: 0;
}


/* component: focus */
*,
*:hover,
*:focus,
*:active { outline: none; }
*::-moz-focus-outer { outline: none; }


/* component: selection */
::selection {
background-color: var(--color-action-medium);
color: var(--color-action-medium-foreground);
text-shadow: none;
}

::-moz-selection {
background-color: var(--color-action-medium);
color: var(--color-action-medium-foreground);
text-shadow: none;
}


/* component: base */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
overflow-x: hidden;
overflow-x: clip;
scrollbar-gutter: stable;
scroll-padding-top: calc(var(--logo-top-width) / 3 + var(--gutter-18) * 2);
color-scheme: light;
background-color: var(--color-black);
color: var(--color-black-foreground);
font-family: var(--text-font-family);
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
}

body {
margin: 0 auto 0 auto;
overflow-x: hidden;
overflow-x: clip;
min-width: var(--body-min-width);
max-width: var(--body-max-width);
background-color: var(--color-white);
color: var(--foreground-text);
font-size: var(--gutter-16);
line-height: var(--leading-m);
}


/* component: canvas */
canvas,
.canvas {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: auto;
background-color: transparent;
box-shadow: none;
border: none;
border-radius: 0;
font-size: 0;
line-height: 0;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
color: transparent;
}

canvas:where([width]) { width: auto; max-width: 100%; }
:where(th, td) canvas:where([width]) { max-width: none; }

.canvas-1-1 { aspect-ratio: 1 / 1; }
.canvas-5-4 { aspect-ratio: 5 / 4; }
.canvas-4-3 { aspect-ratio: 4 / 3; }
.canvas-3-2 { aspect-ratio: 3 / 2; }
.canvas-8-5 { aspect-ratio: 8 / 5; }
.canvas-16-9 { aspect-ratio: 16 / 9; }
.canvas-2-1 { aspect-ratio: 2 / 1; }
.canvas-21-9 { aspect-ratio: 64 / 27; }
.canvas-3-1 { aspect-ratio: 3 / 1; }
.canvas-32-9 { aspect-ratio: 32 / 9; }
.canvas-4-1 { aspect-ratio: 4 / 1; }


/* component: figure */
figure {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
list-style: none;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
background-color: transparent;
box-shadow: none;
border: none;
border-radius: 0;
line-height: 0;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}


/* component: anchor */
a { text-decoration: none; cursor: pointer; pointer-events: auto; }
a:hover { text-decoration: none; cursor: pointer; pointer-events: auto; }
a:focus { text-decoration: none; cursor: pointer; pointer-events: auto; }
a:active { text-decoration: none; cursor: pointer; pointer-events: auto; }
a.active { text-decoration: none; cursor: pointer; pointer-events: auto; }
a.open { text-decoration: none; cursor: pointer; pointer-events: auto; }

a { color: inherit; }
a:hover { color: inherit; }
a:focus { color: inherit; }
a:active { color: inherit; }

a,
a * {
transition-delay: var(--transition-default-delay);
transition-duration: var(--transition-default-duration);
transition-timing-function: var(--transition-default-timing-function);
transition-property: background-color,border-color,color,fill,stroke,opacity;
}

b { font-weight: 700; }
strong { font-weight: 700; }
i { font-style: italic; }
em { font-style: italic; }
cite { font-style: italic; }
q { font-style: italic; }
abbr { font-style: italic; }
u { text-decoration: underline; }
s { text-decoration: line-through; }
del { text-decoration: line-through; color: var(--color-danger-medium); }
code { font-family: var(--font-code); }
time { font-family: var(--font-monospace); }
mark { background-color: var(--color-accent-medium); color: var(--color-accent-medium-foreground); }
small { font-size: var(--gutter-16); }
sup { font-size: 0.750em; vertical-align: top; top: 0; }
sub { font-size: 0.750em; vertical-align: bottom; bottom: 0; }
address { font-style: normal; }
pre { -moz-tab-size: 1; tab-size: 1; overflow: auto; }
details,
main { display: block; }
summary { display: list-item; }
template { display: none; }

audio,
iframe,
img,
video { vertical-align: middle; }

img,
video {
max-width: 100%;
box-sizing: border-box;
height: auto;
object-fit: cover;
}

audio { display: block; width: 100%; max-width: 100%; }

img:not([src]) { visibility: hidden; min-width: var(--gutter-1); }
iframe { border: 0; }


/* component: svg */
svg {
display: block;
box-sizing: border-box;
position: relative;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
text-align: left;
vertical-align: top;
color: currentcolor;
fill: currentcolor;
font-size: 0;
line-height: 0;
}


/* component: blockquote */
blockquote { display: flow-root; }


/* component: text-heading */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
box-sizing: border-box;
position: relative;
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
height: auto;
background-image: none;
background-color: transparent;
box-shadow: none;
border: none;
border-radius: 0;
outline: none;
text-align: inherit;
vertical-align: top;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: inherit;
}

:where(.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6) > :is(meta, link) { display: none; }

:where(article, .mce-content-body) h6 > *,
:where(article, .mce-content-body) h5 > *,
:where(article, .mce-content-body) h4 > *,
:where(article, .mce-content-body) h3 > *,
:where(article, .mce-content-body) h2 > *,
:where(article, .mce-content-body) h1 > * { display: inline; }

.h6, :where(article, .mce-content-body) h6 { font-size: var(--gutter-14); line-height: var(--leading-l); }
.h5, :where(article, .mce-content-body) h5 { font-size: var(--gutter-16); line-height: var(--leading-m); }
.h4, :where(article, .mce-content-body) h4 { font-size: var(--gutter-20); line-height: var(--leading-xs); }
.h3, :where(article, .mce-content-body) h3 { font-size: var(--gutter-20-24); line-height: var(--leading-3xs); }
.h2, :where(article, .mce-content-body) h2 { font-size: var(--gutter-24-32); line-height: var(--leading-5xs); }
.h1, :where(article, .mce-content-body) h1 { font-size: var(--gutter-32-40); line-height: var(--leading-7xs); }


/* component: text-hero */
[class*="hero"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
box-sizing: border-box;
position: relative;
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
height: auto;
background-image: none;
background-color: transparent;
box-shadow: none;
border: none;
border-radius: 0;
outline: none;
text-align: inherit;
vertical-align: top;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: inherit;
}

:where(.hero) > :is(meta, link) { display: none; }

.hero-xs { font-size: var(--gutter-48); line-height: var(--leading-8xs); }
.hero-s { font-size: var(--gutter-52-56); line-height: var(--leading-9xs); }
.hero-m { font-size: var(--gutter-56-64); line-height: var(--leading-10xs); }
.hero-l { font-size: var(--gutter-58-72); line-height: var(--leading-11xs); }
.hero-xl { font-size: var(--gutter-60-80); line-height: var(--leading-12xs); }


/* component: hr */
hr,
.hr {
display: block;
box-sizing: border-box;
position: relative;
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
height: 0;
background-image: none;
background-color: transparent;
border: none;
border-top: var(--gutter-1) solid var(--foreground-slight);
border-radius: 0;
outline: none;
box-shadow: none;
text-align: left;
vertical-align: top;
font-size: inherit;
line-height: 0;
color: inherit;
}


/* component: link */
[href] { color: var(--foreground-action); }

.link-black { color: var(--color-black) !important; }
.link-muted { color: var(--foreground-muted) !important; }
.link-white { color: var(--color-white) !important; }
.link-primary { color: var(--foreground-primary) !important; }
.link-secondary { color: var(--foreground-secondary) !important; }
.link-tertiary { color: var(--foreground-tertiary) !important; }
.link-danger { color: var(--foreground-danger) !important; }
.link-warning { color: var(--foreground-warning) !important; }
.link-accent { color: var(--foreground-accent) !important; }
.link-success { color: var(--foreground-success) !important; }
.link-info { color: var(--foreground-info) !important; }
.link-action { color: var(--foreground-action) !important; }
.link-urgent { color: var(--foreground-urgent) !important; }
.link-emphasis { color: var(--foreground-emphasis) !important; }

.link-black:hover, .link-black.active, .link-black.open { color: var(--color-black-medium) !important; }
.link-muted:hover, .link-muted.active, .link-muted.open { color: color-mix(in srgb, var(--foreground-muted) 85%, var(--foreground-text)) !important; }
.link-white:hover, .link-white.active, .link-white.open { color: var(--color-white-medium) !important; }
.link-primary:hover, .link-primary.active, .link-primary.open { color: color-mix(in srgb, var(--foreground-primary) 85%, var(--foreground-text)) !important; }
.link-secondary:hover, .link-secondary.active, .link-secondary.open { color: color-mix(in srgb, var(--foreground-secondary) 85%, var(--foreground-text)) !important; }
.link-tertiary:hover, .link-tertiary.active, .link-tertiary.open { color: color-mix(in srgb, var(--foreground-tertiary) 85%, var(--foreground-text)) !important; }
.link-danger:hover, .link-danger.active, .link-danger.open { color: color-mix(in srgb, var(--foreground-danger) 85%, var(--foreground-text)) !important; }
.link-warning:hover, .link-warning.active, .link-warning.open { color: color-mix(in srgb, var(--foreground-warning) 85%, var(--foreground-text)) !important; }
.link-accent:hover, .link-accent.active, .link-accent.open { color: color-mix(in srgb, var(--foreground-accent) 85%, var(--foreground-text)) !important; }
.link-success:hover, .link-success.active, .link-success.open { color: color-mix(in srgb, var(--foreground-success) 85%, var(--foreground-text)) !important; }
.link-info:hover, .link-info.active, .link-info.open { color: color-mix(in srgb, var(--foreground-info) 85%, var(--foreground-text)) !important; }
.link-action:hover, .link-action.active, .link-action.open { color: color-mix(in srgb, var(--foreground-action) 85%, var(--foreground-text)) !important; }
.link-urgent:hover, .link-urgent.active, .link-urgent.open { color: color-mix(in srgb, var(--foreground-urgent) 85%, var(--foreground-text)) !important; }
.link-emphasis:hover, .link-emphasis.active, .link-emphasis.open { color: color-mix(in srgb, var(--foreground-emphasis) 85%, var(--foreground-text)) !important; }

.link-black:active { color: var(--color-black-light) !important; }
.link-muted:active { color: color-mix(in srgb, var(--foreground-muted) 70%, var(--foreground-text)) !important; }
.link-white:active { color: var(--color-white-dark) !important; }
.link-primary:active { color: color-mix(in srgb, var(--foreground-primary) 70%, var(--foreground-text)) !important; }
.link-secondary:active { color: color-mix(in srgb, var(--foreground-secondary) 70%, var(--foreground-text)) !important; }
.link-tertiary:active { color: color-mix(in srgb, var(--foreground-tertiary) 70%, var(--foreground-text)) !important; }
.link-danger:active { color: color-mix(in srgb, var(--foreground-danger) 70%, var(--foreground-text)) !important; }
.link-warning:active { color: color-mix(in srgb, var(--foreground-warning) 70%, var(--foreground-text)) !important; }
.link-accent:active { color: color-mix(in srgb, var(--foreground-accent) 70%, var(--foreground-text)) !important; }
.link-success:active { color: color-mix(in srgb, var(--foreground-success) 70%, var(--foreground-text)) !important; }
.link-info:active { color: color-mix(in srgb, var(--foreground-info) 70%, var(--foreground-text)) !important; }
.link-action:active { color: color-mix(in srgb, var(--foreground-action) 70%, var(--foreground-text)) !important; }
.link-urgent:active { color: color-mix(in srgb, var(--foreground-urgent) 70%, var(--foreground-text)) !important; }
.link-emphasis:active { color: color-mix(in srgb, var(--foreground-emphasis) 70%, var(--foreground-text)) !important; }


/* component: heading */

.heading-divider { padding-bottom: calc(var(--gutter-8) + 0.100 * var(--gutter-18)); border-bottom: calc(0.2px + 0.05em) solid var(--foreground-slight); }

.heading-bullet { position: relative; }

.heading-bullet::before {
content: "";
display: inline-block;
position: relative;
top: calc(-0.1 * var(--gutter-18));
vertical-align: middle;
height: calc(var(--gutter-8) + 0.700 * var(--gutter-20));
margin-right: calc(var(--gutter-8) + 0.2em);
border-left: calc(var(--gutter-8) + 0.100 * var(--gutter-18)) solid var(--foreground-slight);
}

.heading-line { overflow: hidden; }

.heading-line > * { display: inline-block; position: relative; }

.heading-line > ::before,
.heading-line > ::after {
content: "";
position: absolute;
top: calc(50% - (calc(0.2px + 0.05em) / 2));
width: 2000px;
border-bottom: calc(0.2px + 0.05em) solid var(--foreground-slight);
}

.heading-line > ::before { right: 100%; margin-right: calc(var(--gutter-8) + 0.3em); }

.heading-line > ::after { left: 100%; margin-left: calc(var(--gutter-8) + 0.3em); }


/* component: divider */
[class*="divider"] { border: none; }

.divider-icon {
position: relative;
height: var(--gutter-24);
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23e5e5e5%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
background-repeat: no-repeat;
background-position: 50% 50%;
}

.divider-icon::before,
.divider-icon::after {
content: "";
position: absolute;
top: 50%;
max-width: calc(50% - (50px / 2));
border-bottom: var(--gutter-1) solid var(--foreground-slight);
}

.divider-icon::before { right: calc(50% + (50px / 2)); width: 100%; }
.divider-icon::after { left: calc(50% + (50px / 2)); width: 100%; }
.divider-s { line-height: 0; }

.divider-s::after {
content: "";
display: inline-block;
width: 100px;
max-width: 100%;
border-top: var(--gutter-1) solid var(--foreground-slight);
vertical-align: top;
}

.divider-vertical {
width: max-content;
height: 100px;
margin-left: auto;
margin-right: auto;
border-left: var(--gutter-1) solid var(--foreground-slight);
}


/* component: list */
.list > *,
.list {
display: block;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
height: auto;
text-align: left;
vertical-align: top;
line-height: 1.5;
}

.list + .list { margin-top: 1.5em; }
.list > * + * { margin-top: 0.25em; }
.list-separator-space > * + * { margin-top: 1em; }

.list-separator-divider > * + * { margin-top: 0em; }
.list-separator-divider > * + *::before {
display: block;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
list-style: none;
margin: 1em 0;
padding: 0;
width: 100%;
max-width: 100%;
height: 1px;
background-color: var(--foreground-slight);
text-align: left;
vertical-align: top;
line-height: 1.5;
content: "";
}


.list-type-dot > *,
.list-type-dash-long > *,
.list-type-dash-short > *,
.list-type-dash-medium > *,
.list-type-dash > *,
.list-type-diamond-frame > *,
.list-type-diamond > *,
.list-type-frame > *,
.list-type-square > *,
.list-type-circle > *,
.list-type-disc > * {
padding-left: 1.5em;
}

.list-type-dot > *:before,
.list-type-dash-long > *:before,
.list-type-dash-short > *:before,
.list-type-dash-medium > *:before,
.list-type-dash > *:before,
.list-type-diamond-frame > *:before,
.list-type-diamond > *:before,
.list-type-frame > *:before,
.list-type-square > *:before,
.list-type-circle > *:before,
.list-type-disc > *:before {
display: inline-block;
box-sizing: border-box;
position: absolute;
top: calc(1em - 0.5em);
bottom: auto;
left: calc(1em - 0.5em);
right: auto;
float: none;
clear: both;
list-style: none;
margin: 0;
padding: 0;
width: 0.5em;
height: 0.5em;
background-color: currentcolor;
border-width: 1px;
border-style: solid;
border-color: currentcolor;
color: currentcolor;
border-radius: 0;
text-align: right;
vertical-align: top;
line-height: 0;
content: "";
}

.list-type-dash-medium > *:before,
.list-type-dash > *:before {
width: 0.75em;
left: calc(1em - 0.75em);
}

.list-type-dash-long > *:before {
width: 1em;
left: calc(1em - 1em);
}

.list-type-dash-short > *:before {
width: 0.5em;
left: calc(1em - 0.5em);
}

.list-type-dot > *:before {
width: 2px;
left: calc(0.5em - 2px);
left: calc(1em - 2px);
}

.list-type-dot > *:before,
.list-type-dash-long > *:before,
.list-type-dash-short > *:before,
.list-type-dash-medium > *:before,
.list-type-dash > *:before {
height: 2px;
}

.list-type-circle > *:before,
.list-type-disc > *:before {
border-radius: 100%;
}

.list-type-diamond-frame > *:before,
.list-type-diamond > *:before {
transform: rotate(-45deg);
}


.list-caret > *:before { background-color: currentcolor; border-color: currentcolor; color: currentcolor; }
.list-caret-color-black > *:before { background-color: var(--color-black); border-color: var(--color-black); color: var(--color-black-foreground); }
.list-caret-color-white > *:before { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-white-foreground); }
.list-caret-color-muted > *:before { background-color: var(--foreground-muted); border-color: var(--foreground-muted); color: var(--foreground-muted);}
.list-caret-color-primary > *:before { background-color: var(--color-primary-medium); border-color: var(--color-primary-medium); color: var(--color-primary-medium-foreground); }
.list-caret-color-secondary > *:before { background-color: var(--color-secondary-medium); border-color: var(--color-secondary-medium); color: var(--color-secondary-medium-foreground); }
.list-caret-color-tertiary > *:before { background-color: var(--color-tertiary-medium); border-color: var(--color-tertiary-medium); color: var(--color-tertiary-medium-foreground); }
.list-caret-color-danger > *:before { background-color: var(--color-danger-medium); border-color: var(--color-danger-medium); color: var(--color-danger-medium-foreground); }
.list-caret-color-warning > *:before { background-color: var(--color-warning-medium); border-color: var(--color-warning-medium); color: var(--color-warning-medium-foreground); }
.list-caret-color-accent > *:before { background-color: var(--color-accent-medium); border-color: var(--color-accent-medium); color: var(--color-accent-medium-foreground); }
.list-caret-color-success > *:before { background-color: var(--color-success-medium); border-color: var(--color-success-medium); color: var(--color-success-medium-foreground); }
.list-caret-color-info > *:before { background-color: var(--color-info-medium); border-color: var(--color-info-medium); color: var(--color-info-medium-foreground); }
.list-caret-color-action > *:before { background-color: var(--color-action-medium); border-color: var(--color-action-medium); color: var(--color-action-medium-foreground); }
.list-caret-color-urgent > *:before { background-color: var(--color-urgent-medium); border-color: var(--color-urgent-medium); color: var(--color-urgent-medium-foreground); }
.list-caret-color-emphasis > *:before { background-color: var(--color-emphasis-medium); border-color: var(--color-emphasis-medium); color: var(--color-emphasis-medium-foreground); }


.list-type-dot > *:before,
.list-type-dash-long > *:before,
.list-type-dash-short > *:before,
.list-type-dash-medium > *:before,
.list-type-dash > *:before {
border-color: transparent;
}

.list-type-diamond-frame > *:before,
.list-type-frame > *:before,
.list-type-circle > *:before {
background-color: transparent;
}


/* component: list-unordered */
:where(article, .mce-content-body) ul,
:where(article, .mce-content-body) ul > li {
list-style-position: outside;
margin: 0;
padding: 0;
}

:where(article, .mce-content-body) ul > li {
margin-left: 2em;
list-style-type: disc;
}

:where(article, .mce-content-body) ul > li::marker { color: currentcolor; }

ul:not(:where(article, .mce-content-body) *),
ul > li:not(:where(article, .mce-content-body) *) {
display: block;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
list-style: none;
margin: 0;
padding: 0;
}


/* component: list-ordered */
:where(article, .mce-content-body) ol,
:where(article, .mce-content-body) ol > li {
list-style-position: outside;
margin: 0;
padding: 0;
}

:where(article, .mce-content-body) ol > li {
margin-left: 2em;
}

:where(article, .mce-content-body) ol > li::marker { color: currentcolor; }

ol:not(:where(article, .mce-content-body) *),
ol > li:not(:where(article, .mce-content-body) *) {
display: block;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
list-style: none;
margin: 0;
padding: 0;
}


/* component: description-term */
dt { font-weight: bold; }
dd { margin-left: 0; }


/* component: table */
table { display:table; }
caption { display:table-caption; }
thead { display:table-header-group; }
tbody { display:table-row-group; }
tfoot { display:table-footer-group; }
colgroup { display:table-column-group; }
col { display:table-column; }
tr { display:table-row; }
th, td { display:table-cell; }

table
{
width: 100%;
max-width: 100%;
border: none;
border-spacing: 0 0;
border-collapse: collapse;
table-layout: auto;
}

caption {
border: var(--gutter-1) solid var(--foreground-moderate); border-bottom: none;
text-align: center;
vertical-align: middle;
min-height: calc(var(--gutter-48) - var(--gutter-2));
}

th,
td {
display: table-cell;
border: var(--gutter-1) solid var(--foreground-moderate);
text-align: inherit;
}

caption,
thead th,
thead td,
tbody th,
tfoot th,
tfoot td {
white-space: nowrap; font-weight: 600;
}

th,
td {
min-height: 0;
height: calc(var(--gutter-48) * 1);
max-height: none;
padding: var(--gutter-2) var(--gutter-14);
font-size: inherit;
line-height: inherit;
vertical-align: middle;
}

table { font-size: calc(var(--gutter-16) * 1.000); line-height: var(--leading-m); }

caption {
min-height: 0;
height: var(--gutter-48);
max-height: none;
padding: 0 var(--gutter-14);
font-size: inherit;
line-height: calc(var(--row-height, var(--gutter-48)) - var(--gutter-1));
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

table.table-xs { font-size: var(--gutter-12); line-height: var(--leading-m); }
table.table-xs caption,
table.table-xs th, table.table-xs td { --row-height: var(--gutter-28); height: var(--gutter-28); padding-left: var(--gutter-10); padding-right: var(--gutter-10); }

table.table-s { font-size: var(--gutter-14); line-height: var(--leading-m); }
table.table-s caption,
table.table-s th, table.table-s td { --row-height: var(--gutter-40); height: var(--gutter-40); padding-left: var(--gutter-12); padding-right: var(--gutter-12); }

table.table-m { font-size: var(--gutter-16); line-height: var(--leading-m); }
table.table-m caption,
table.table-m th, table.table-m td { --row-height: var(--gutter-48); height: var(--gutter-48); padding-left: var(--gutter-14); padding-right: var(--gutter-14); }

table.table-l { font-size: var(--gutter-18); line-height: var(--leading-m); }
table.table-l caption,
table.table-l th, table.table-l td { --row-height: var(--gutter-56-64); height: var(--gutter-56-64); padding-left: var(--gutter-16); padding-right: var(--gutter-16); }

table.table-xl { font-size: var(--gutter-20); line-height: var(--leading-m); }
table.table-xl caption,
table.table-xl th, table.table-xl td { --row-height: var(--gutter-60-80); height: var(--gutter-60-80); padding-left: var(--gutter-18); padding-right: var(--gutter-18); }

table th.cell-compact, table td.cell-compact { padding-left: var(--gutter-2); padding-right: var(--gutter-2); }
table.table-xs th.cell-compact, table.table-xs td.cell-compact { padding-left: var(--gutter-2); padding-right: var(--gutter-2); }
table.table-s th.cell-compact, table.table-s td.cell-compact { padding-left: var(--gutter-2); padding-right: var(--gutter-2); }
table.table-m th.cell-compact, table.table-m td.cell-compact { padding-left: var(--gutter-2); padding-right: var(--gutter-2); }
table.table-l th.cell-compact, table.table-l td.cell-compact { padding-left: var(--gutter-2); padding-right: var(--gutter-2); }
table.table-xl th.cell-compact, table.table-xl td.cell-compact { padding-left: var(--gutter-2); padding-right: var(--gutter-2); }


table:not(.table-unbordered):not(.table-divider) :is(th, td) { height: calc(var(--row-height, var(--gutter-48)) - var(--gutter-1)); }

table.table-divider :is(th, td) { height: calc(var(--row-height, var(--gutter-48)) - var(--gutter-1) / 2); }

.table-unbordered { border: none; }
.table-unbordered caption { border: none; padding-top: 0; }
.table-unbordered td, .table-unbordered th { border: none; padding-left: 0; }
.table-unbordered td.cell-compact, .table-unbordered th.cell-compact { border: none; padding-left: 0; }

.table-divider { border: none; }
.table-divider caption { border: none; }
.table-divider td, .table-divider th { border-left: none; border-right: none; border-bottom: none; padding-left: 0; }
.table-divider td.cell-compact, .table-divider th.cell-compact { border-left: none; border-right: none; border-bottom: none; padding-left: 0; }


.table-striped tbody tr:nth-child(odd) > * { background-color: rgba(0,0,0,0.015); }
.table-striped tbody tr:nth-child(even) > * { background-color: rgba(0,0,0,0.045); }

.table-hover tbody tr:hover > * { background-color: var(--color-action-3xlight); }

.table-shrink { width: var(--gutter-1); }
.table-expand { min-width: 10em; }


/* component: icon */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0em; 
box-sizing: border-box;
position: relative;
overflow: visible;
width: 0.750em;
height: 0.750em;
font: inherit;
color: currentcolor;
fill: currentcolor;
vertical-align: calc((0.711em - 0.750em) / 2);
text-align: center;
}

.icon-xs { transform: none; width: var(--gutter-32); height: var(--gutter-32); line-height: var(--gutter-32); vertical-align: calc((0.711em - var(--gutter-32)) / 2); }
.icon-s { transform: none; width: var(--gutter-40); height: var(--gutter-40); line-height: var(--gutter-40); vertical-align: calc((0.711em - var(--gutter-40)) / 2); }
.icon-m { transform: none; width: var(--gutter-48); height: var(--gutter-48); line-height: var(--gutter-48); vertical-align: calc((0.711em - var(--gutter-48)) / 2); }
.icon-l { transform: none; width: var(--gutter-56-64); height: var(--gutter-56-64); line-height: var(--gutter-56-64); vertical-align: calc((0.711em - var(--gutter-56-64)) / 2); }
.icon-xl { transform: none; width: var(--gutter-60-80); height: var(--gutter-60-80); line-height: var(--gutter-60-80); vertical-align: calc((0.711em - var(--gutter-60-80)) / 2); }

.icon > svg {
display: inline-block;
position: relative;
overflow: visible;
min-width: 0;
width: 100%;
max-width: 100%;
height: auto;
font-size: 0;
line-height: 0;
transform: rotate(0deg);
transform-origin: 50% 50%;
font: inherit;
color: currentcolor;
fill: currentcolor;
vertical-align: top;
text-align: center;
}

.icon-right > svg { transform: rotate(0deg); }
.icon-bottom-right > svg { transform: rotate(45deg); }
.icon-bottom > svg { transform: rotate(90deg); }
.icon-bottom-left > svg { transform: rotate(135deg); }
.icon-left > svg { transform: rotate(180deg); }
.icon-top-left > svg { transform: rotate(225deg); }
.icon-top > svg { transform: rotate(270deg); }
.icon-top-right > svg { transform: rotate(315deg); }


/* component: form */
output,
label,
legend,
fieldset,
form {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: flow-root;
box-sizing: border-box;
position: relative;
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
height: auto;
background-image: none;
background-color: transparent;
box-shadow: none;
border: none;
border-radius: 0;
outline: none;
text-align: left;
vertical-align: top;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: inherit;
}

label:not(label.input-label) {
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}

label:not(label.input-label) { font-size: var(--gutter-16); }
label + div { margin-top: 0.25em; }
output > span { display: block; box-sizing: border-box; position: relative; margin: var(--gutter-12) 0 0 0; padding: 0; font-size: calc(var(--gutter-16) * 0.750); line-height: 1.400; color: var(--color-danger-medium); font-weight: 500; }


/* component: fields */

.input-label,
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: flex;
align-items: center;
box-sizing: border-box;
position: relative;
margin: 0;
padding: 0;
max-width: 100%;
background-image: none;
background-color: transparent;
box-shadow: none;
border-radius: 0;
outline: none;
text-align: left;
vertical-align: top;
line-height: 1.5;
font-weight: inherit;
color: inherit;
cursor: pointer;
}

.input-label,
input:not(input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]) {
width: 100%;
min-height: var(--gutter-48);
font-size: var(--gutter-16);
padding: 0 var(--gutter-18); 
}

.input-label { padding: 0 var(--gutter-22) 0 calc(var(--check-inset, var(--gutter-12)) + var(--check-size, var(--gutter-24)) + var(--check-gap, var(--gutter-12))); }

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: flex;
align-items: center;
box-sizing: border-box;
position: relative;
margin: 0;
max-width: 100%;
width: 100%;
height: var(--gutter-48);
padding: 0 var(--gutter-22);
background-image: none;
background-color: transparent;
box-shadow: none;
border-radius: 0;
outline: none;
text-align: left;
vertical-align: top;
font-size: calc(var(--gutter-16) * 1.000);
line-height: 1.5;
font-weight: inherit;
color: inherit;
cursor: pointer;
}

select[multiple][size],
select[multiple],
select[size] {
padding: var(--gutter-18);
resize: none;
vertical-align: top;
}

select[multiple] {
min-height: var(--gutter-20);
height: var(--gutter-20);
}

select[size][multiple],
select[size] {
min-height: var(--gutter-20);
height: auto;
}

option {
padding: 0;
line-height: var(--gutter-22);
font-weight: 400;
}

optgroup {
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
line-height: var(--gutter-22);
font-weight: 700;
}

optgroup option {
padding-top: 0;
padding-bottom: 0;
padding-left: var(--gutter-18);
padding-right: var(--gutter-18);
line-height: var(--gutter-22);
font-weight: 400;
}

textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
align-content: center;
box-sizing: border-box;
position: relative;
margin: 0;
padding: var(--gutter-4) var(--gutter-22);
width: 100%;
max-width: 100%;
min-height: var(--row-height, var(--gutter-48));
height: var(--row-height, var(--gutter-48));
background-image: none;
background-color: transparent;
box-shadow: none;
border-radius: 0;
outline: none;
text-align: left;
vertical-align: top;
resize: none;
line-height: 1.5;
font-size: calc(var(--gutter-16) * 1.000);
font-weight: inherit;
color: inherit;
cursor: pointer;
}

textarea[rows] { height: auto; }

progress,
meter {
-webkit-appearance: none;
appearance: none;
display: block;
box-sizing: border-box;
position: relative;
margin: 0;
padding: 0;
width: 100%;
background-image: none;
background-color: transparent;
box-shadow: none;
font-size: 0;
line-height: 0;
text-align: left;
vertical-align: top;
}

input[type="number"] {
-moz-appearance: textfield;
}

input::-webkit-textfield-decoration-container {
display: block;
width: 100%;
content:"" !important;
}

input::-webkit-list-button,
input::-webkit-contacts-auto-fill-button,
input::-webkit-calendar-picker-indicator,
input::-webkit-clear-button,
input[type="password"]::-webkit-caps-lock-indicator,
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; appearance: none !important; display: none !important; margin: 0 !important; content:"" !important; }

input::-ms-clear { -webkit-appearance: none !important; appearance: none !important; display: none !important; margin: 0 !important; content:"" !important; }
input[type="password"]::-ms-reveal { -webkit-appearance: none !important; appearance: none !important; display: none !important; margin: 0 !important; content:"" !important; }

.select-native,
.input-file-native,
.input-color-native,
.input-datetime-native,
.input-range-native,
.progress-native,
.meter-native { display: none; }

.select,
.input-file { display: block; box-sizing: border-box; position: relative; width: 100%; font-size: calc(var(--gutter-16) * 1.000); }

.input-text,
.input-email,
.input-url,
.input-password,
.input-tel,
.input-search,
.input-number,
.input-datetime,
.input-color,
.input-range {
display: flex;
align-items: center;
gap: var(--field-gap, var(--gutter-8));
box-sizing: border-box;
position: relative;
width: 100%;
--row-height: var(--gutter-48);
min-height: var(--gutter-48);
padding: 0 var(--gutter-14);
background-color: transparent;
font-size: calc(var(--gutter-16) * 1.000);
line-height: 1.5;
color: inherit;
}

.input-text,
.input-email,
.input-url,
.input-password,
.input-tel,
.input-search,
.input-number,
.input-datetime,
.input-color,
.select .select-face,
.input-file .input-file-face { padding-right: var(--icon-inset, var(--gutter-18)); }

.input-color { gap: 0; padding-left: var(--check-inset, var(--gutter-12)); }

.input-range {
--range-thumb: calc(var(--row-height, var(--gutter-48)) / 2);
align-items: stretch;
gap: 0;
padding: 0;
}

div.progress,
div.meter {
display: flex;
align-items: stretch;
gap: 0;
box-sizing: border-box;
position: relative;
width: 100%;
padding: 0;
background-image: none;
background-color: transparent;
box-shadow: none;
font-size: calc(var(--gutter-16) * 1.000);
line-height: 1.5;
text-align: left;
vertical-align: top;
color: inherit;
}

.select-face,
.select-value,
.select-placeholder,
.select-group,
.select-empty,
.select-item { text-align: start; }

.select-face,
.input-file-face {
display: flex;
align-items: center;
gap: var(--field-gap, var(--gutter-8));
box-sizing: border-box;
position: relative;
width: 100%;
--row-height: var(--gutter-48);
min-height: var(--gutter-48);
padding: 0 var(--gutter-22);
background-color: transparent;
font-size: inherit;
line-height: 1.5;
color: inherit;
cursor: pointer;
}

.select-face,
.input-file-face { padding: 0 var(--gutter-14); }

.input-text > .input-text-field,
.input-email > .input-email-field,
.input-url > .input-url-field,
.input-password > .input-password-field,
.input-tel > .input-tel-field,
.input-search > .input-search-field,
.input-number > .input-number-field,
.input-datetime > .input-datetime-field,
.input-color > .input-color-field {
flex: 1;
min-width: 0;
width: auto;
height: auto;
min-height: 0;
padding: 0;
background-color: transparent;
border: none;
outline: none;
font-size: inherit;
line-height: inherit;
color: inherit;
}

.input-color > .input-color-field { padding: 0 0 0 var(--check-gap, var(--gutter-12)); }

.input-datetime > .input-datetime-field { word-spacing: var(--gutter-12); }

.input-file-icon,
.input-color-icon,
.input-text-icon,
.input-email-icon,
.input-url-icon,
.input-password-icon,
.input-tel-icon,
.input-search-icon,
.select-icon { display: flex; flex: none; width: var(--icon-size, var(--gutter-14)); height: var(--icon-size, var(--gutter-14)); }

.select-icon { transition: transform 0.2s ease-out; }

.select-icon svg,
.select-tag-remove svg,
.select-item-remove svg,
.input-file-icon svg,
.input-file-tag-remove svg,
.input-color-icon svg,
.input-text-icon svg,
.input-email-icon svg,
.input-url-icon svg,
.input-password-icon svg,
.input-tel-icon svg,
.input-search-icon svg,
.input-number-increase svg,
.input-number-decrease svg { display: block; width: var(--icon-size, var(--gutter-14)); height: var(--icon-size, var(--gutter-14)); }

.input-checkbox-icon svg,
.input-radio-icon svg { display: block; width: 100%; height: 100%; }

.select-value,
.input-file-value { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25em; flex: 1; min-width: 0; }

.select-placeholder,
.input-file-placeholder { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.select-tag,
.input-file-tag { display: inline-flex; align-items: center; gap: 0.25em; box-sizing: border-box; max-width: 100%; padding: 0 var(--gutter-12); background-color: var(--foreground-tint); font-size: calc(var(--gutter-16) * 0.750); line-height: 2; }

.select-tag-label,
.input-file-tag-label,
.input-color-value,
.input-color-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.select-item-label,
.input-color-value,
.input-color-item-label { flex: 1; }

.select-item-label { white-space: nowrap; }

.select-tag-remove,
.select-item-remove,
.input-file-tag-remove { display: flex; justify-content: center; align-items: center; flex: none; padding: 0; background-color: transparent; border: none; color: inherit; cursor: pointer; }

.select-tag-remove,
.input-file-tag-remove { width: calc(var(--gutter-16) * 0.500); height: calc(var(--gutter-16) * 0.500); }

.select-item-remove { width: calc(var(--gutter-16) * 0.625); height: calc(var(--gutter-16) * 0.625); margin-left: auto; }

.drop.select-drop,
.drop.input-color-drop,
.drop.input-datetime-drop {
padding: 0;
background-color: var(--color-white);
border-top: none;
}

.drop.select-drop,
.drop.input-color-drop { --position-offset: 0; }

.drop.select-drop { width: max-content; min-width: var(--select-drop-width, 100%); max-width: var(--select-drop-max, 100vw); font-size: var(--select-drop-font, inherit); }

.drop.input-color-drop { width: var(--color-drop-width, 100%); }

.drop.input-datetime-drop { width: var(--datetime-drop-width, 100%); min-width: 0; box-shadow: none; }

.select > .drop { left: var(--select-drop-left, 0) !important; }

.input-color > .drop { left: 0 !important; }

.input-datetime > .drop { left: var(--datetime-drop-left, 0) !important; }

body > .drop.select-drop,
body > .drop.input-color-drop,
body > .drop.input-datetime-drop { --position-shift-offset: -1px; }

.select-list,
.input-color-list {
display: block;
flex-wrap: nowrap;
align-items: normal;
align-content: normal;
gap: 0;
margin: 0;
padding: 0;
max-height: calc(var(--gutter-48) * 6);
list-style: none;
overflow-y: auto;
}

.select-list { justify-content: normal; max-height: calc(var(--select-drop-row, var(--gutter-48)) * 6); }

.select-item,
.input-color-item { display: flex; flex-wrap: nowrap; align-items: center; align-content: normal; gap: var(--gutter-12); margin: 0; padding: var(--gutter-12) var(--gutter-18); line-height: 1.5; cursor: pointer; }

.input-color-item { padding: var(--gutter-12) var(--gutter-18) var(--gutter-12) var(--gutter-12); }

.select-item { min-height: var(--select-drop-row, var(--gutter-48)); padding: 0 var(--select-drop-pad, var(--gutter-14)); }

.select-item.select-hover,
.input-color-item.input-color-hover,
.input-datetime-item.input-datetime-hover,
.input-datetime-item:hover { background-color: var(--foreground-tint); }

.select-item.active,
.input-color-item.active,
.input-datetime-item.active { background-color: var(--color-action-medium); color: var(--color-white); }


label + input,
label + .input-label,
label + select,
label + .select,
label + textarea,
label + .textarea-editor,
label + .input-file,
label + .input-color,
label + .input-text,
label + .input-email,
label + .input-url,
label + .input-password,
label + .input-tel,
label + .input-search,
label + .input-number,
label + .input-datetime,
label + .input-range { margin-top: 0.25em; }

label + progress,
label + meter,
label + div.progress,
label + div.meter { margin-top: calc(var(--gutter-16) * 0.875 * 0.25); }

.input-checkbox,
.input-radio {
--check-size: var(--gutter-24);
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
position: relative;
flex: none;
width: var(--check-size);
height: var(--check-size);
padding: var(--gutter-2);
background-image: none;
background-color: transparent;
box-shadow: none;
vertical-align: middle;
cursor: pointer;
}

.input-radio { border-radius: 100%; }

.input-label.input-xs,
.input-checkbox.input-xs,
.input-color.input-xs,
.input-radio.input-xs { --check-size: var(--gutter-24); --check-inset: var(--gutter-1); --check-gap: var(--gutter-8); }

.input-label.input-s,
.input-checkbox.input-s,
.input-color.input-s,
.input-radio.input-s { --check-size: var(--gutter-24); --check-inset: var(--gutter-12); --check-gap: var(--gutter-10); }

.input-label.input-m,
.input-checkbox.input-m,
.input-color.input-m,
.input-radio.input-m { --check-size: var(--gutter-24); --check-inset: var(--gutter-12); --check-gap: var(--gutter-12); }

.input-label.input-l,
.input-checkbox.input-l,
.input-color.input-l,
.input-radio.input-l { --check-size: var(--gutter-24); --check-inset: var(--gutter-12); --check-gap: var(--gutter-14); }

.input-label.input-xl,
.input-checkbox.input-xl,
.input-color.input-xl,
.input-radio.input-xl { --check-size: var(--gutter-24); --check-inset: var(--gutter-12); --check-gap: var(--gutter-16); }

.input-checkbox-native,
.input-radio-native {
display: block;
box-sizing: border-box;
position: absolute;
top: calc(var(--gutter-1) * -1);
left: calc(var(--gutter-1) * -1);
margin: 0;
padding: 0;
width: calc(100% + var(--gutter-2));
height: calc(100% + var(--gutter-2));
max-width: none;
min-width: 0;
min-height: 0;
background-color: transparent;
border: none;
outline: none;
opacity: 0;
cursor: pointer;
}

.input-radio-native { border-radius: 100%; }

.input-checkbox-icon,
.input-radio-icon {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
position: static;
width: 100%;
height: 100%;
visibility: hidden;
pointer-events: none;
}

.input-checkbox-native:checked ~ .input-checkbox-icon,
.input-radio-native:checked ~ .input-radio-icon { visibility: visible; }


.input-label > .input-checkbox,
.input-label > .input-radio { position: absolute; top: calc((100% - var(--check-size)) / 2); left: var(--check-inset, var(--gutter-12)); }

progress, .progress { --row-height: var(--gutter-48); min-height: var(--gutter-48); }

meter, .meter { --row-height: var(--gutter-48); min-height: var(--gutter-48); }

input:not(input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]).input-xs,
select.select-xs,
textarea.textarea-xs,
.input-text.input-xs,
.input-email.input-xs,
.input-url.input-xs,
.input-password.input-xs,
.input-tel.input-xs,
.input-search.input-xs,
.input-number.input-xs,
.input-datetime.input-xs,
.input-color.input-xs,
.input-range.input-xs,
.input-label.input-xs,
.progress.progress-xs,
.meter.meter-xs,
.select.select-xs .select-face,
.input-file.input-xs .input-file-face { --row-height: var(--gutter-28); min-height: var(--gutter-28); padding: 0 var(--gutter-10); --icon-inset: var(--gutter-14); --icon-size: var(--gutter-10); --field-gap: var(--gutter-4); --range-label: var(--gutter-12); --range-track: var(--gutter-8); }

input:not(input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]).input-s,
select.select-s,
textarea.textarea-s,
.input-text.input-s,
.input-email.input-s,
.input-url.input-s,
.input-password.input-s,
.input-tel.input-s,
.input-search.input-s,
.input-number.input-s,
.input-datetime.input-s,
.input-color.input-s,
.input-range.input-s,
.input-label.input-s,
.progress.progress-s,
.meter.meter-s,
.select.select-s .select-face,
.input-file.input-s .input-file-face { --row-height: var(--gutter-40); min-height: var(--gutter-40); padding: 0 var(--gutter-12); --icon-inset: var(--gutter-16); --icon-size: var(--gutter-12); --field-gap: var(--gutter-6); --range-label: var(--gutter-14); --range-track: var(--gutter-10); }

input:not(input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]).input-m,
select.select-m,
textarea.textarea-m,
.input-text.input-m,
.input-email.input-m,
.input-url.input-m,
.input-password.input-m,
.input-tel.input-m,
.input-search.input-m,
.input-number.input-m,
.input-datetime.input-m,
.input-color.input-m,
.input-range.input-m,
.input-label.input-m,
.progress.progress-m,
.meter.meter-m,
.select.select-m .select-face,
.input-file.input-m .input-file-face { --row-height: var(--gutter-48); min-height: var(--gutter-48); padding: 0 var(--gutter-14); --icon-inset: var(--gutter-18); --icon-size: var(--gutter-14); --field-gap: var(--gutter-8); --range-label: var(--gutter-16); --range-track: var(--gutter-12); }

input:not(input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]).input-l,
select.select-l,
textarea.textarea-l,
.input-text.input-l,
.input-email.input-l,
.input-url.input-l,
.input-password.input-l,
.input-tel.input-l,
.input-search.input-l,
.input-number.input-l,
.input-datetime.input-l,
.input-color.input-l,
.input-range.input-l,
.input-label.input-l,
.progress.progress-l,
.meter.meter-l,
.select.select-l .select-face,
.input-file.input-l .input-file-face { --row-height: var(--gutter-56-64); min-height: var(--gutter-56-64); padding: 0 var(--gutter-16); --icon-inset: var(--gutter-20); --icon-size: var(--gutter-16); --field-gap: var(--gutter-10); --range-label: var(--gutter-18); --range-track: var(--gutter-14); }

input:not(input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]).input-xl,
select.select-xl,
textarea.textarea-xl,
.input-text.input-xl,
.input-email.input-xl,
.input-url.input-xl,
.input-password.input-xl,
.input-tel.input-xl,
.input-search.input-xl,
.input-number.input-xl,
.input-datetime.input-xl,
.input-color.input-xl,
.input-range.input-xl,
.input-label.input-xl,
.progress.progress-xl,
.meter.meter-xl,
.select.select-xl .select-face,
.input-file.input-xl .input-file-face { --row-height: var(--gutter-60-80); min-height: var(--gutter-60-80); padding: 0 var(--gutter-18); --icon-inset: var(--gutter-22); --icon-size: var(--gutter-18); --field-gap: var(--gutter-12); --range-label: var(--gutter-20); --range-track: var(--gutter-16); }

input:not(input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]).input-xs,
select.select-xs,
textarea.textarea-xs,
.input-text.input-xs,
.input-email.input-xs,
.input-url.input-xs,
.input-password.input-xs,
.input-tel.input-xs,
.input-search.input-xs,
.input-number.input-xs,
.input-datetime.input-xs,
.input-color.input-xs,
.input-range.input-xs,
.input-label.input-xs,
.progress.progress-xs,
.meter.meter-xs,
.select.select-xs,
.input-file.input-xs { font-size: var(--gutter-12); }

input:not(input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]).input-s,
select.select-s,
textarea.textarea-s,
.input-text.input-s,
.input-email.input-s,
.input-url.input-s,
.input-password.input-s,
.input-tel.input-s,
.input-search.input-s,
.input-number.input-s,
.input-datetime.input-s,
.input-color.input-s,
.input-range.input-s,
.input-label.input-s,
.progress.progress-s,
.meter.meter-s,
.select.select-s,
.input-file.input-s { font-size: var(--gutter-14); }

input:not(input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]).input-m,
select.select-m,
textarea.textarea-m,
.input-text.input-m,
.input-email.input-m,
.input-url.input-m,
.input-password.input-m,
.input-tel.input-m,
.input-search.input-m,
.input-number.input-m,
.input-datetime.input-m,
.input-color.input-m,
.input-range.input-m,
.input-label.input-m,
.progress.progress-m,
.meter.meter-m,
.select.select-m,
.input-file.input-m { font-size: var(--gutter-16); }

input:not(input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]).input-l,
select.select-l,
textarea.textarea-l,
.input-text.input-l,
.input-email.input-l,
.input-url.input-l,
.input-password.input-l,
.input-tel.input-l,
.input-search.input-l,
.input-number.input-l,
.input-datetime.input-l,
.input-color.input-l,
.input-range.input-l,
.input-label.input-l,
.progress.progress-l,
.meter.meter-l,
.select.select-l,
.input-file.input-l { font-size: var(--gutter-18); }

input:not(input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]).input-xl,
select.select-xl,
textarea.textarea-xl,
.input-text.input-xl,
.input-email.input-xl,
.input-url.input-xl,
.input-password.input-xl,
.input-tel.input-xl,
.input-search.input-xl,
.input-number.input-xl,
.input-datetime.input-xl,
.input-color.input-xl,
.input-range.input-xl,
.input-label.input-xl,
.progress.progress-xl,
.meter.meter-xl,
.select.select-xl,
.input-file.input-xl { font-size: var(--gutter-20); }

.input-text:is(.input-xs, .input-s, .input-m, .input-l, .input-xl),
.input-email:is(.input-xs, .input-s, .input-m, .input-l, .input-xl),
.input-url:is(.input-xs, .input-s, .input-m, .input-l, .input-xl),
.input-password:is(.input-xs, .input-s, .input-m, .input-l, .input-xl),
.input-tel:is(.input-xs, .input-s, .input-m, .input-l, .input-xl),
.input-search:is(.input-xs, .input-s, .input-m, .input-l, .input-xl),
.input-number:is(.input-xs, .input-s, .input-m, .input-l, .input-xl),
.input-datetime:is(.input-xs, .input-s, .input-m, .input-l, .input-xl),
.input-color:is(.input-xs, .input-s, .input-m, .input-l, .input-xl),
.select:is(.select-xs, .select-s, .select-m, .select-l, .select-xl) .select-face,
.input-file:is(.input-xs, .input-s, .input-m, .input-l, .input-xl) .input-file-face { padding-right: var(--icon-inset, var(--gutter-18)); }

.progress:is(.progress-xs, .progress-s, .progress-m, .progress-l, .progress-xl),
.meter:is(.meter-xs, .meter-s, .meter-m, .meter-l, .meter-xl),
.input-range:is(.input-xs, .input-s, .input-m, .input-l, .input-xl) { padding: 0; }

textarea.textarea-xs { --row-height: var(--gutter-28); min-height: var(--gutter-28); padding: var(--gutter-2) var(--gutter-18); }
textarea.textarea-s { --row-height: var(--gutter-40); min-height: var(--gutter-40); padding: var(--gutter-2) var(--gutter-20); }
textarea.textarea-m { --row-height: var(--gutter-48); min-height: var(--gutter-48); padding: var(--gutter-4) var(--gutter-22); }
textarea.textarea-l { --row-height: var(--gutter-56-64); min-height: var(--gutter-56-64); padding: var(--gutter-4) var(--gutter-24); }
textarea.textarea-xl { --row-height: var(--gutter-60-80); min-height: var(--gutter-60-80); padding: var(--gutter-6) var(--gutter-28); }

.input-color:is(.input-xs, .input-s, .input-m, .input-l, .input-xl) { padding-left: var(--check-inset, var(--gutter-12)); }

.input-label:is(.input-xs, .input-s, .input-m, .input-l, .input-xl) { padding-left: calc(var(--check-inset, var(--gutter-12)) + var(--check-size, var(--gutter-24)) + var(--check-gap, var(--gutter-12))); }
.input-label.input-xs { padding-right: var(--gutter-18); }
.input-label.input-s { padding-right: var(--gutter-20); }
.input-label.input-m { padding-right: var(--gutter-22); }
.input-label.input-l { padding-right: var(--gutter-24); }
.input-label.input-xl { padding-right: var(--gutter-28); }


.progress-rail,
.meter-rail {
display: block;
box-sizing: border-box;
position: relative;
flex: 1;
min-width: 0;
align-self: stretch;
padding: var(--gutter-2);
background-image: none;
background-color: transparent;
}

.progress-fill,
.meter-fill {
display: block;
box-sizing: border-box;
position: relative;
height: 100%;
background-image: none;
}

.progress-fill { width: var(--progress-fill, 0%); }
.meter-fill { width: var(--meter-fill, 0%); }
.progress-value, .meter-value { display: flex; justify-content: center; align-items: center; box-sizing: border-box; flex: none; width: calc(var(--row-height, var(--gutter-48)) - var(--gutter-2)); padding: 0; overflow: hidden; border-left: var(--gutter-1) solid var(--foreground-moderate); }

.progress-muted .progress-fill, .progress-fill { background-color: var(--foreground-moderate); }
.progress-black .progress-fill { background-color: var(--color-black); }
.progress-white .progress-fill { background-color: var(--color-white); }
.progress-primary .progress-fill { background-color: var(--color-primary-medium); }
.progress-secondary .progress-fill { background-color: var(--color-secondary-medium); }
.progress-tertiary .progress-fill { background-color: var(--color-tertiary-medium); }
.progress-danger .progress-fill { background-color: var(--color-danger-medium); }
.progress-warning .progress-fill { background-color: var(--color-warning-medium); }
.progress-accent .progress-fill { background-color: var(--color-accent-medium); }
.progress-success .progress-fill { background-color: var(--color-success-medium); }
.progress-info .progress-fill { background-color: var(--color-info-medium); }
.progress-action .progress-fill { background-color: var(--color-action-medium); }
.progress-urgent .progress-fill { background-color: var(--color-urgent-medium); }
.progress-emphasis .progress-fill { background-color: var(--color-emphasis-medium); }

.meter-fill { background-color: var(--color-success-medium); }
.meter-fill.meter-optimum { background-color: var(--color-success-medium); }
.meter-fill.meter-suboptimum { background-color: var(--color-accent-medium); }
.meter-fill.meter-subsuboptimum { background-color: var(--color-danger-medium); }

.select-face.select-face-size {
height: calc(var(--gutter-48) * var(--select-rows, 1));
align-items: flex-start;
padding-top: var(--gutter-12);
padding-bottom: var(--gutter-12);
overflow-y: auto;
}

.select-face[aria-expanded="true"] .select-icon { transform: rotateX(180deg); }

.drop.select-drop-rows { border-top: var(--gutter-1) solid var(--foreground-slight); }

.select-search { padding: var(--gutter-12); border-bottom: var(--gutter-1) solid var(--foreground-slight); }

.select-search input { height: calc(var(--gutter-24) * 1.250); font-size: inherit; }

.select-drop-rows .select-list { max-height: calc(var(--select-drop-row, var(--gutter-48)) * var(--select-rows, 6)); }

.select-nested { padding-left: 3em; }

.select-selected .select-nested { padding-left: var(--gutter-18); }

.select-group { display: block; margin: 0; padding: var(--gutter-12) var(--gutter-18) 0 2em; white-space: nowrap; font-weight: 500; color: var(--foreground-soft); }

.select-empty { display: block; margin: 0; padding: var(--gutter-12) var(--select-drop-pad, var(--gutter-14)); color: var(--foreground-soft); }

.select-relationship .select-placeholder { padding-left: var(--gutter-18); }

.select-columns { display: flex; gap: 0; }

.select-column { display: flex; flex-direction: column; flex: 1; min-width: 0; border: var(--gutter-1) solid var(--foreground-slight); }

.select-column + .select-column { border-left: none; }

.select-relationship .select-list { flex: 1; max-height: calc(var(--gutter-48) * var(--select-rows, 5)); }

.select-drag { opacity: 0.5; }

.input-file-face.input-file-face-size {
height: calc(var(--gutter-48) * var(--file-rows, 5));
align-items: flex-start;
padding-top: var(--gutter-12);
padding-bottom: var(--gutter-12);
overflow-y: auto;
}

.input-color-swatch {
display: flex;
box-sizing: border-box;
position: relative;
flex: none;
width: var(--check-size, var(--gutter-24));
height: var(--check-size, var(--gutter-24));
padding: var(--gutter-2);
border: var(--gutter-1) solid var(--foreground-moderate);
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22rgb(250%2C250%2C250)%22%20d%3D%22M12%2C0v12H0V0h12ZM12%2C12v12h12v-12h-12Z%22%2F%3E%3Cpath%20fill%3D%22rgb(245%2C245%2C245)%22%20d%3D%22M24%2C0v12h-12V0h12ZM0%2C12v12h12v-12H0Z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;
background-position: 0% 0%;
background-size: var(--gutter-12) var(--gutter-12);
}

.input-color-layer { display: block; box-sizing: border-box; position: static; flex: 1; min-width: 0; }
.input-color.input-color-palette { padding: 0; border: none; }

.input-color-face {
display: flex;
align-items: center;
gap: var(--check-gap, var(--gutter-12));
box-sizing: border-box;
flex: 1;
min-width: 0;
min-height: var(--row-height, var(--gutter-48));
padding: 0 var(--gutter-22) 0 var(--check-inset, var(--gutter-12));
border: var(--gutter-1) solid var(--foreground-moderate);
cursor: pointer;
}


.input-number-increase,
.input-number-decrease {
display: flex;
justify-content: center;
align-items: center;
flex: none;
box-sizing: border-box;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
cursor: pointer;
}

.input-number .input-number-increase, .input-number .input-number-decrease { width: var(--gutter-24); height: var(--gutter-24); }

.input-number { column-gap: 0; }

.input-number-steps {
display: flex;
align-items: center;
flex: none;
gap: var(--gutter-4);
margin-left: var(--field-gap, var(--gutter-8));
}

.input-number.input-xs { padding-right: var(--gutter-1); }
.input-number.input-xs .input-number-steps { gap: var(--gutter-1); }

.input-number-increase:focus,
.input-number-decrease:focus,
.input-number-increase:active,
.input-number-decrease:active,
.input-number-increase:hover,
.input-number-decrease:hover {
background-color: transparent;
}

.input-datetime-icon { display: flex; justify-content: flex-end; align-items: center; flex: none; align-self: stretch; width: calc(var(--gutter-24) * 1.250); height: auto; cursor: pointer; }
.input-datetime-icon svg { display: block; width: var(--icon-size, var(--gutter-14)); height: var(--icon-size, var(--gutter-14)); }
.input-datetime-columns { display: flex; gap: 0; }
.input-datetime-column { display: flex; flex-direction: column; flex: 1; min-width: 0; border-left: var(--gutter-1) solid var(--foreground-slight); }
.input-datetime-column:first-child { border-left: none; }

.input-datetime-list {
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
max-height: calc(var(--gutter-48) * 6);
overflow-y: auto;
list-style: none;
}

.input-datetime-item { display: block; box-sizing: border-box; margin: 0; padding: 0.25em var(--gutter-12); text-align: center; line-height: 1.5; cursor: pointer; }

.input-range-min,
.input-range-max {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
flex: none;
padding: var(--gutter-2) 0.750em 0;
color: var(--foreground-soft);
font-size: var(--range-label, var(--gutter-16));
line-height: 1.50;
}

.input-range-rail {
display: block;
box-sizing: border-box;
position: relative;
flex: 1;
min-width: 0;
align-self: stretch;
touch-action: none;
cursor: pointer;
}

.input-range-track {
display: block;
box-sizing: border-box;
position: absolute;
top: 50%;
left: calc(var(--range-thumb) / 2);
right: calc(var(--range-thumb) / 2);
height: var(--range-track, var(--gutter-12));
background-color: var(--foreground-slight);
transform: translateY(-50%);
}

.input-range-tick {
display: block;
box-sizing: border-box;
position: absolute;
z-index: 1;
top: 50%;
left: var(--range-tick, 0%);
width: var(--gutter-1);
height: calc(var(--range-track, var(--gutter-12)) * 2.500);
background-color: var(--foreground-slight);
transform: translate(-50%, -50%);
}

.input-range-track.input-range-crowded > .input-range-tick { display: none; }

.input-range-thumb {
display: block;
box-sizing: border-box;
position: absolute;
top: 50%;
left: var(--range-position, 0%);
width: var(--range-thumb);
height: var(--range-thumb);
background-color: var(--foreground-tint);
border: var(--gutter-2) solid var(--foreground-slight);
background-image: none;
border-radius: 100%;
box-shadow: none;
outline: none;
cursor: pointer;
transform: translate(-50%, -50%);
color: inherit;
z-index: 3;
}

.input-range > .input-range-field {
flex: none;
width: calc(var(--row-height, var(--gutter-48)) - var(--gutter-2));
height: auto;
min-width: 0;
min-height: 0;
padding: 0;
background-color: transparent;
border: none;
border-left: var(--gutter-1) solid var(--foreground-moderate);
outline: none;
text-align: center;
font-size: inherit;
line-height: 1;
color: inherit;
}

.textarea-editor { display: block; box-sizing: border-box; position: relative; width: 100%; }

.textarea-editor .tox.tox-tinymce {
display: flex;
flex-direction: column;
box-sizing: border-box;
position: relative;
overflow: hidden;
width: 100%;
border-radius: 0;
font-family: var(--font-sans-serif);
font-size: calc(var(--gutter-16) * 1.000);
line-height: 1.5;
color: inherit;
}

.textarea-editor .tox .tox-editor-container { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; }
.textarea-editor .tox.tox-tinymce .tox-editor-header { flex: none; border-bottom: var(--gutter-1) solid var(--foreground-slight); }
.textarea-editor .tox .tox-tbtn__select-label { display: block; line-height: 1.5; }
.textarea-editor .tox .tox-anchorbar,
.textarea-editor .tox .tox-bottom-anchorbar { flex: none; height: 0; }
.textarea-editor .tox .tox-sidebar-wrap { display: flex; flex: 1 1 0%; min-height: 0; }
.textarea-editor .tox .tox-edit-area { display: flex; flex: 1 1 0%; position: relative; min-height: 0; overflow: hidden; }
.textarea-editor .tox .tox-edit-area__iframe { display: block; box-sizing: border-box; position: absolute; inset: 0; width: 100%; height: 100%; background-color: transparent; border: none; }
.textarea-editor .tox .tox-sidebar,
.textarea-editor .tox .tox-sidebar__slider,
.textarea-editor .tox .tox-sidebar__pane-container,
.textarea-editor .tox .tox-view-wrap,
.textarea-editor .tox .tox-view-wrap__slot-container { display: none; }
.textarea-editor .tox .tox-throbber { position: absolute; inset: 0; }

.textarea-editor .tox .tox-edit-area > .textarea-source {
display: none;
box-sizing: border-box;
position: absolute;
inset: 0;
z-index: 1;
margin: 0;
padding: var(--gutter-18);
width: 100%;
height: 100%;
min-height: 0;
max-width: none;
background-color: transparent;
border: none;
border-radius: 0;
outline: none;
resize: none;
font-family: monospace;
font-size: inherit;
line-height: 1.5;
color: inherit;
}

html:has(> .mce-content-body) { height: 100%; background-color: transparent; }
:where(.mce-content-body) { box-sizing: border-box; height: 100%; padding: var(--gutter-18); background-color: var(--color-white); }


/* component: fields-border */
progress,
meter,
input,
select,
textarea,
.progress,
.meter,
.input-label,
.input-text,
.input-email,
.input-url,
.input-password,
.input-tel,
.input-search,
.input-number,
.input-datetime,
.input-color,
.input-range,
.select-face,
.input-file-face,
.drop.select-drop,
.drop.input-color-drop,
.drop.input-datetime-drop,
.input-checkbox,
.input-radio,
.textarea-editor .tox.tox-tinymce {
border: var(--gutter-1) solid var(--foreground-moderate);
}


@media (max-width: 575px) { .select-columns { flex-direction: column; } }


/* component: fields-icons */
.input-checkbox-icon svg *,
.input-checkbox-native:checked ~ .input-checkbox-icon,
.input-color-icon svg *,
.input-color-icon,
.input-datetime-icon svg,
.input-datetime-icon,
.input-email-icon svg *,
.input-email-icon,
.input-file-icon svg *,
.input-file-icon,
.input-file-tag-remove svg *,
.input-number-decrease,
.input-number-decrease svg *,
.input-number-increase svg *,
.input-number-increase,
.input-password-icon svg *,
.input-password-icon,
.input-radio-icon svg *,
.input-radio-native:checked ~ .input-radio-icon,
.input-search-icon svg *,
.input-search-icon,
.input-tel-icon svg *,
.input-tel-icon,
.input-text-icon svg *,
.input-text-icon,
.input-url-icon svg *,
.input-url-icon,
.select-icon svg *,
.select-icon,
.select-item-remove svg *,
.select-tag-remove svg * {
color: currentcolor;
fill: currentcolor;
background-color: transparent;
}

.input-color-icon,
.input-datetime-icon,
.input-email-icon,
.input-file-icon,
.input-file-tag-remove,
.input-number-decrease,
.input-number-increase,
.input-password-icon,
.input-search-icon,
.input-tel-icon,
.input-text-icon,
.input-url-icon,
.select-icon,
.select-item-remove,
.select-tag-remove {
opacity: 0.30;
}

.input-checkbox-native:checked ~ .input-checkbox-icon svg *,
.input-radio-native:checked ~ .input-radio-icon svg * {
color: var(--foreground-moderate);
fill: var(--foreground-moderate);
}

.input-number .input-number-increase,
.input-number .input-number-decrease {
color: var(--foreground-heavy);
fill: var(--foreground-heavy);
}

.input-number .input-number-increase:focus,
.input-number .input-number-decrease:focus {
color: var(--foreground-heavy);
fill: var(--foreground-heavy);
}

.input-number .input-number-increase:hover,
.input-number .input-number-decrease:hover {
color: var(--foreground-moderate);
fill: var(--foreground-moderate);
}

.input-number .input-number-increase:active,
.input-number .input-number-decrease:active {
color: var(--foreground-text);
fill: var(--foreground-text);
}


/* component: fields-placeholder */
.select-placeholder { opacity: 1 !important; filter: grayscale(100%) !important; color: var(--foreground-soft) !important; }
.input-file-placeholder { opacity: 1 !important; filter: grayscale(100%) !important; color: var(--foreground-soft) !important; }
.input-color-value.input-color-placeholder { opacity: 1 !important; filter: grayscale(100%) !important; color: var(--foreground-soft) !important; }

::placeholder { opacity: 1 !important; filter: grayscale(100%) !important; color: var(--foreground-soft) !important; }
::-webkit-input-placeholder { opacity: 1 !important; filter: grayscale(100%) !important; color: var(--foreground-soft) !important; }
::-moz-placeholder { opacity: 1 !important; filter: grayscale(100%) !important; color: var(--foreground-soft) !important; }
:-ms-input-placeholder { opacity: 1 !important; filter: grayscale(100%) !important; color: var(--foreground-soft) !important; }
:-moz-placeholder { opacity: 1 !important; filter: grayscale(100%) !important; color: var(--foreground-soft) !important; }


/* component: button */
input:where([type="button"]),
input:where([type="submit"]),
input:where([type="reset"]),
input[type="image"],
button,
button:where([type="button"]),
button:where([type="submit"]),
button:where([type="reset"]),
.button
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375em; 
box-sizing: border-box;
position: relative;
float: none;
clear: both;
list-style: none;
table-layout: auto;
border-collapse: collapse;
border-spacing: 0 0;
min-width: 0;
max-width: 100%;
min-height: 0;
height: auto;
max-height: none;
overflow: hidden;
margin: 0;
background-image: none;
border-width: var(--gutter-1);
border-style: solid;
outline: none;
box-shadow: none;
text-align: center;
vertical-align: top;
font: inherit;
font-family: var(--button-font-family);
font-weight: 500;
text-transform: uppercase;
font-style: normal;
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
resize: none;
cursor: pointer;
opacity: 1;
transition-delay: var(--transition-default-delay);
transition-duration: var(--transition-default-duration);
transition-timing-function: var(--transition-default-timing-function);
transition-property: background-color,border-color,color,fill,stroke,opacity;
}

input[type="button"] > span,
input[type="submit"] > span,
input[type="reset"] > span,
input[type="image"] > span,
button > span,
.button > span {
display: inline-block; vertical-align: middle;
}

input[type="button"] > .icon,
input[type="submit"] > .icon,
input[type="reset"] > .icon,
input[type="image"] > .icon,
button > .icon,
.button > .icon {
display: inline-flex; vertical-align: middle;
}

input[type="button"] > span + span,
input[type="submit"] > span + span,
input[type="reset"] > span + span,
input[type="image"] > span + span,
button >  span + span,
.button > span + span { margin-left: 0.25em; }

input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="image"]::-moz-focus-inner,
button::-moz-focus-inner,
.button::-moz-focus-inner {
border: 0; padding: 0;
}

input:where([type="button"]),
input:where([type="submit"]),
input:where([type="reset"]),
input:where([type="image"]),
button,
button:where([type="button"]),
button:where([type="submit"]),
button:where([type="reset"]),
.button {
background-color: var(--color-gray-medium); border-color: var(--color-gray-medium); color: var(--color-gray-medium-foreground);
}

input:where([type="button"]):focus,
input:where([type="submit"]):focus,
input:where([type="reset"]):focus,
input:where([type="image"]):focus,
button:focus,
button:where([type="button"]):focus,
button:where([type="submit"]):focus,
button:where([type="reset"]):focus,
.button:focus {
background-color: var(--color-gray-medium); border-color: var(--color-gray-medium); color: var(--color-gray-medium-foreground);
}

input:where([type="button"]).open,
input:where([type="submit"]).open,
input:where([type="reset"]).open,
input:where([type="image"]).open,
button.open,
button:where([type="button"]).open,
button:where([type="submit"]).open,
button:where([type="reset"]).open,
.button.open,
input:where([type="button"]).active,
input:where([type="submit"]).active,
input:where([type="reset"]).active,
input:where([type="image"]).active,
button.active,
button:where([type="button"]).active,
button:where([type="submit"]).active,
button:where([type="reset"]).active,
.button.active,
input:where([type="button"]):hover,
input:where([type="submit"]):hover,
input:where([type="reset"]):hover,
input:where([type="image"]):hover,
button:hover,
button:where([type="button"]):hover,
button:where([type="submit"]):hover,
button:where([type="reset"]):hover,
.button:hover {
background-color: var(--color-gray-dark); border-color: var(--color-gray-dark); color: var(--color-gray-dark-foreground);
}

input:where([type="button"]):active,
input:where([type="submit"]):active,
input:where([type="reset"]):active,
input:where([type="image"]):active,
button:active,
button:where([type="button"]):active,
button:where([type="submit"]):active,
button:where([type="reset"]):active,
.button:active {
background-color: var(--color-gray-3xdark); border-color: var(--color-gray-3xdark); color: var(--color-gray-3xdark-foreground);
}

.button-black { background-color: var(--color-black); border-color: var(--color-black); color: var(--color-black-foreground); }
.button-muted { background-color: var(--color-muted-medium); border-color: var(--color-muted-medium); color: var(--color-muted-medium-foreground); }
.button-white { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-white-foreground); }
.button-primary { background-color: var(--color-primary-medium); border-color: var(--color-primary-medium); color: var(--color-primary-medium-foreground); }
.button-secondary { background-color: var(--color-secondary-medium); border-color: var(--color-secondary-medium); color: var(--color-secondary-medium-foreground); }
.button-tertiary { background-color: var(--color-tertiary-medium); border-color: var(--color-tertiary-medium); color: var(--color-tertiary-medium-foreground); }
.button-danger { background-color: var(--color-danger-medium); border-color: var(--color-danger-medium); color: var(--color-danger-medium-foreground); }
.button-warning { background-color: var(--color-warning-medium); border-color: var(--color-warning-medium); color: var(--color-warning-medium-foreground); }
.button-accent { background-color: var(--color-accent-medium); border-color: var(--color-accent-medium); color: var(--color-accent-medium-foreground); }
.button-success { background-color: var(--color-success-medium); border-color: var(--color-success-medium); color: var(--color-success-medium-foreground); }
.button-info { background-color: var(--color-info-medium); border-color: var(--color-info-medium); color: var(--color-info-medium-foreground); }
.button-action { background-color: var(--color-action-medium); border-color: var(--color-action-medium); color: var(--color-action-medium-foreground); }
.button-urgent { background-color: var(--color-urgent-medium); border-color: var(--color-urgent-medium); color: var(--color-urgent-medium-foreground); }
.button-emphasis { background-color: var(--color-emphasis-medium); border-color: var(--color-emphasis-medium); color: var(--color-emphasis-medium-foreground); }

.button-black:focus { background-color: var(--color-black); border-color: var(--color-black); color: var(--color-black-foreground); }
.button-muted:focus { background-color: var(--color-muted-medium); border-color: var(--color-muted-medium); color: var(--color-muted-medium-foreground); }
.button-white:focus { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-white-foreground); }
.button-primary:focus { background-color: var(--color-primary-medium); border-color: var(--color-primary-medium); color: var(--color-primary-medium-foreground); }
.button-secondary:focus { background-color: var(--color-secondary-medium); border-color: var(--color-secondary-medium); color: var(--color-secondary-medium-foreground); }
.button-tertiary:focus { background-color: var(--color-tertiary-medium); border-color: var(--color-tertiary-medium); color: var(--color-tertiary-medium-foreground); }
.button-danger:focus { background-color: var(--color-danger-medium); border-color: var(--color-danger-medium); color: var(--color-danger-medium-foreground); }
.button-warning:focus { background-color: var(--color-warning-medium); border-color: var(--color-warning-medium); color: var(--color-warning-medium-foreground); }
.button-accent:focus { background-color: var(--color-accent-medium); border-color: var(--color-accent-medium); color: var(--color-accent-medium-foreground); }
.button-success:focus { background-color: var(--color-success-medium); border-color: var(--color-success-medium); color: var(--color-success-medium-foreground); }
.button-info:focus { background-color: var(--color-info-medium); border-color: var(--color-info-medium); color: var(--color-info-medium-foreground); }
.button-action:focus { background-color: var(--color-action-medium); border-color: var(--color-action-medium); color: var(--color-action-medium-foreground); }
.button-urgent:focus { background-color: var(--color-urgent-medium); border-color: var(--color-urgent-medium); color: var(--color-urgent-medium-foreground); }
.button-emphasis:focus { background-color: var(--color-emphasis-medium); border-color: var(--color-emphasis-medium); color: var(--color-emphasis-medium-foreground); }

.button-black:hover, .button-black.active, .button-black.open { background-color: var(--color-black-light); border-color: var(--color-black-light); color: var(--color-black-light-foreground); }
.button-muted:hover, .button-muted.active, .button-muted.open { background-color: var(--color-muted-dark); border-color: var(--color-muted-dark); color: var(--color-muted-dark-foreground); }
.button-white:hover, .button-white.active, .button-white.open { background-color: var(--color-white-dark); border-color: var(--color-white-dark); color: var(--color-white-dark-foreground); }
.button-primary:hover, .button-primary.active, .button-primary.open { background-color: var(--color-primary-light); border-color: var(--color-primary-light); color: var(--color-primary-light-foreground); }
.button-secondary:hover, .button-secondary.active, .button-secondary.open { background-color: var(--color-secondary-light); border-color: var(--color-secondary-light); color: var(--color-secondary-light-foreground); }
.button-tertiary:hover, .button-tertiary.active, .button-tertiary.open { background-color: var(--color-tertiary-light); border-color: var(--color-tertiary-light); color: var(--color-tertiary-light-foreground); }
.button-danger:hover, .button-danger.active, .button-danger.open { background-color: var(--color-danger-light); border-color: var(--color-danger-light); color: var(--color-danger-light-foreground); }
.button-warning:hover, .button-warning.active, .button-warning.open { background-color: var(--color-warning-light); border-color: var(--color-warning-light); color: var(--color-warning-light-foreground); }
.button-accent:hover, .button-accent.active, .button-accent.open { background-color: var(--color-accent-light); border-color: var(--color-accent-light); color: var(--color-accent-light-foreground); }
.button-success:hover, .button-success.active, .button-success.open { background-color: var(--color-success-light); border-color: var(--color-success-light); color: var(--color-success-light-foreground); }
.button-info:hover, .button-info.active, .button-info.open { background-color: var(--color-info-light); border-color: var(--color-info-light); color: var(--color-info-light-foreground); }
.button-action:hover, .button-action.active, .button-action.open { background-color: var(--color-action-light); border-color: var(--color-action-light); color: var(--color-action-light-foreground); }
.button-urgent:hover, .button-urgent.active, .button-urgent.open { background-color: var(--color-urgent-light); border-color: var(--color-urgent-light); color: var(--color-urgent-light-foreground); }
.button-emphasis:hover, .button-emphasis.active, .button-emphasis.open { background-color: var(--color-emphasis-light); border-color: var(--color-emphasis-light); color: var(--color-emphasis-light-foreground); }

.button-black:active { background-color: var(--color-black-2xlight); border-color: var(--color-black-2xlight); color: var(--color-black-2xlight-foreground); }
.button-muted:active { background-color: var(--color-muted-3xdark); border-color: var(--color-muted-3xdark); color: var(--color-muted-3xdark-foreground); }
.button-white:active { background-color: var(--color-white-2xdark); border-color: var(--color-white-2xdark); color: var(--color-white-2xdark-foreground); }
.button-primary:active { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-primary-dark-foreground); }
.button-secondary:active { background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color: var(--color-secondary-dark-foreground); }
.button-tertiary:active { background-color: var(--color-tertiary-dark); border-color: var(--color-tertiary-dark); color: var(--color-tertiary-dark-foreground); }
.button-danger:active { background-color: var(--color-danger-dark); border-color: var(--color-danger-dark); color: var(--color-danger-dark-foreground); }
.button-warning:active { background-color: var(--color-warning-dark); border-color: var(--color-warning-dark); color: var(--color-warning-dark-foreground); }
.button-accent:active { background-color: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-accent-dark-foreground); }
.button-success:active { background-color: var(--color-success-dark); border-color: var(--color-success-dark); color: var(--color-success-dark-foreground); }
.button-info:active { background-color: var(--color-info-dark); border-color: var(--color-info-dark); color: var(--color-info-dark-foreground); }
.button-action:active { background-color: var(--color-action-dark); border-color: var(--color-action-dark); color: var(--color-action-dark-foreground); }
.button-urgent:active { background-color: var(--color-urgent-dark); border-color: var(--color-urgent-dark); color: var(--color-urgent-dark-foreground); }
.button-emphasis:active { background-color: var(--color-emphasis-dark); border-color: var(--color-emphasis-dark); color: var(--color-emphasis-dark-foreground); }

input:where([type="button"]),
input:where([type="submit"]),
input:where([type="reset"]),
input[type="image"],
button,
.button {
font-size: var(--gutter-16);
line-height: 1.25;
}

.button.button-xs { font-size: var(--gutter-12); line-height: normal; }
.button.button-s { font-size: var(--gutter-14); line-height: normal; }
.button.button-m { font-size: var(--gutter-16); line-height: normal; }
.button.button-l { font-size: var(--gutter-18); line-height: normal; }
.button.button-xl { font-size: var(--gutter-20); line-height: normal; }

input:where([type="button"]),
input:where([type="submit"]),
input:where([type="reset"]),
input[type="image"],
button,
.button { border-radius: 0; }

.button-square { border-radius: 0; }

.button-rounded.button { border-radius: var(--gutter-6); }
.button-rounded.button-xs { border-radius: var(--gutter-2); }
.button-rounded.button-s { border-radius: var(--gutter-4); }
.button-rounded.button-m { border-radius: var(--gutter-6); }
.button-rounded.button-l { border-radius: var(--gutter-8); }
.button-rounded.button-xl { border-radius: var(--gutter-10); }

.button-pill.button { border-radius: 9999px; }

.button-circle { border-radius: 50%; }
.button-disc { border-radius: 100%; }

input:where([type="button"]),
input:where([type="submit"]),
input:where([type="reset"]),
input[type="image"],
button,
.button {
height: var(--gutter-48);
padding: 0 var(--gutter-28);
}

.button.button-xs { height: var(--gutter-28); padding: 0 var(--gutter-22); }
.button.button-s { height: var(--gutter-40); padding: 0 var(--gutter-24); }
.button.button-m { height: var(--gutter-48); padding: 0 var(--gutter-28); }
.button.button-l { height: var(--gutter-56-64); padding: 0 var(--gutter-32); }
.button.button-xl { height: var(--gutter-60-80); padding: 0 var(--gutter-36); }

.button-square, .button-disc { width: var(--gutter-48); height: var(--gutter-48); }
.button-square.button-xs, .button-disc.button-xs { width: var(--gutter-28); height: var(--gutter-28); }
.button-square.button-s, .button-disc.button-s { width: var(--gutter-40); height: var(--gutter-40); }
.button-square.button-m, .button-disc.button-m { width: var(--gutter-48); height: var(--gutter-48); }
.button-square.button-l, .button-disc.button-l { width: var(--gutter-56-64); height: var(--gutter-56-64); }
.button-square.button-xl, .button-disc.button-xl { width: var(--gutter-60-80); height: var(--gutter-60-80); }

.button-rectangle { width: calc(var(--gutter-48) * 2); height: var(--gutter-48); }
.button-rectangle.button-xs { width: calc(var(--gutter-28) * 2); height: var(--gutter-28); }
.button-rectangle.button-s { width: calc(var(--gutter-40) * 2); height: var(--gutter-40); }
.button-rectangle.button-m { width: calc(var(--gutter-48) * 2); height: var(--gutter-48); }
.button-rectangle.button-l { width: calc(var(--gutter-56-64) * 2); height: var(--gutter-56-64); }
.button-rectangle.button-xl { width: calc(var(--gutter-60-80) * 2); height: var(--gutter-60-80); }

input[type="button"].button-square,
input[type="submit"].button-square,
input[type="reset"].button-square,
input[type="image"].button-square,
button.button-square,
.button.button-square,
input[type="button"].button-disc,
input[type="submit"].button-disc,
input[type="reset"].button-disc,
input[type="image"].button-disc,
button.button-disc,
.button.button-disc,
input[type="button"].button-rectangle,
input[type="submit"].button-rectangle,
input[type="reset"].button-rectangle,
input[type="image"].button-rectangle,
button.button-rectangle,
.button.button-rectangle { padding: 0; }

input[type="image"]
{
padding: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}

.button-list { justify-content: flex-start; }
.button.icon > svg { min-height: 0.75em; max-height: 50%; min-width: 0.75em; width: auto; }


/* component: button-outline */
.button-outline { background-color: transparent; }
.button-outline:focus { background-color: transparent; }

.button-outline { border-color: var(--foreground-soft); color: var(--foreground-soft); }
.button-outline.button-black { border-color: var(--color-black); color: var(--color-black); }
.button-outline.button-muted { border-color: var(--foreground-muted); color: var(--foreground-muted); }
.button-outline.button-white { border-color: var(--color-white); color: var(--color-white); }
.button-outline.button-primary { border-color: var(--foreground-primary); color: var(--foreground-primary); }
.button-outline.button-secondary { border-color: var(--foreground-secondary); color: var(--foreground-secondary); }
.button-outline.button-tertiary { border-color: var(--foreground-tertiary); color: var(--foreground-tertiary); }
.button-outline.button-danger { border-color: var(--foreground-danger); color: var(--foreground-danger); }
.button-outline.button-warning { border-color: var(--foreground-warning); color: var(--foreground-warning); }
.button-outline.button-accent { border-color: var(--foreground-accent); color: var(--foreground-accent); }
.button-outline.button-success { border-color: var(--foreground-success); color: var(--foreground-success); }
.button-outline.button-info { border-color: var(--foreground-info); color: var(--foreground-info); }
.button-outline.button-action { border-color: var(--foreground-action); color: var(--foreground-action); }
.button-outline.button-urgent { border-color: var(--foreground-urgent); color: var(--foreground-urgent); }
.button-outline.button-emphasis { border-color: var(--foreground-emphasis); color: var(--foreground-emphasis); }

.button-outline:focus { border-color: var(--foreground-soft); color: var(--foreground-soft); }
.button-outline.button-black:focus { border-color: var(--color-black); color: var(--color-black); }
.button-outline.button-muted:focus { border-color: var(--foreground-muted); color: var(--foreground-muted); }
.button-outline.button-white:focus { border-color: var(--color-white); color: var(--color-white); }
.button-outline.button-primary:focus { border-color: var(--foreground-primary); color: var(--foreground-primary); }
.button-outline.button-secondary:focus { border-color: var(--foreground-secondary); color: var(--foreground-secondary); }
.button-outline.button-tertiary:focus { border-color: var(--foreground-tertiary); color: var(--foreground-tertiary); }
.button-outline.button-danger:focus { border-color: var(--foreground-danger); color: var(--foreground-danger); }
.button-outline.button-warning:focus { border-color: var(--foreground-warning); color: var(--foreground-warning); }
.button-outline.button-accent:focus { border-color: var(--foreground-accent); color: var(--foreground-accent); }
.button-outline.button-success:focus { border-color: var(--foreground-success); color: var(--foreground-success); }
.button-outline.button-info:focus { border-color: var(--foreground-info); color: var(--foreground-info); }
.button-outline.button-action:focus { border-color: var(--foreground-action); color: var(--foreground-action); }
.button-outline.button-urgent:focus { border-color: var(--foreground-urgent); color: var(--foreground-urgent); }
.button-outline.button-emphasis:focus { border-color: var(--foreground-emphasis); color: var(--foreground-emphasis); }

.button-outline:hover, .button-outline.active, .button-outline.open { background-color: var(--color-gray-medium); border-color: var(--color-gray-medium); color: var(--color-gray-medium-foreground); }
.button-outline.button-black:hover, .button-outline.button-black.active, .button-outline.button-black.open { background-color: var(--color-black); border-color: var(--color-black); color: var(--color-black-foreground); }
.button-outline.button-muted:hover, .button-outline.button-muted.active, .button-outline.button-muted.open { background-color: var(--color-muted-medium); border-color: var(--color-muted-medium); color: var(--color-muted-medium-foreground); }
.button-outline.button-white:hover, .button-outline.button-white.active, .button-outline.button-white.open { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-white-foreground); }
.button-outline.button-primary:hover, .button-outline.button-primary.active, .button-outline.button-primary.open { background-color: var(--color-primary-medium); border-color: var(--color-primary-medium); color: var(--color-primary-medium-foreground); }
.button-outline.button-secondary:hover, .button-outline.button-secondary.active, .button-outline.button-secondary.open { background-color: var(--color-secondary-medium); border-color: var(--color-secondary-medium); color: var(--color-secondary-medium-foreground); }
.button-outline.button-tertiary:hover, .button-outline.button-tertiary.active, .button-outline.button-tertiary.open { background-color: var(--color-tertiary-medium); border-color: var(--color-tertiary-medium); color: var(--color-tertiary-medium-foreground); }
.button-outline.button-danger:hover, .button-outline.button-danger.active, .button-outline.button-danger.open { background-color: var(--color-danger-medium); border-color: var(--color-danger-medium); color: var(--color-danger-medium-foreground); }
.button-outline.button-warning:hover, .button-outline.button-warning.active, .button-outline.button-warning.open { background-color: var(--color-warning-medium); border-color: var(--color-warning-medium); color: var(--color-warning-medium-foreground); }
.button-outline.button-accent:hover, .button-outline.button-accent.active, .button-outline.button-accent.open { background-color: var(--color-accent-medium); border-color: var(--color-accent-medium); color: var(--color-accent-medium-foreground); }
.button-outline.button-success:hover, .button-outline.button-success.active, .button-outline.button-success.open { background-color: var(--color-success-medium); border-color: var(--color-success-medium); color: var(--color-success-medium-foreground); }
.button-outline.button-info:hover, .button-outline.button-info.active, .button-outline.button-info.open { background-color: var(--color-info-medium); border-color: var(--color-info-medium); color: var(--color-info-medium-foreground); }
.button-outline.button-action:hover, .button-outline.button-action.active, .button-outline.button-action.open { background-color: var(--color-action-medium); border-color: var(--color-action-medium); color: var(--color-action-medium-foreground); }
.button-outline.button-urgent:hover, .button-outline.button-urgent.active, .button-outline.button-urgent.open { background-color: var(--color-urgent-medium); border-color: var(--color-urgent-medium); color: var(--color-urgent-medium-foreground); }
.button-outline.button-emphasis:hover, .button-outline.button-emphasis.active, .button-outline.button-emphasis.open { background-color: var(--color-emphasis-medium); border-color: var(--color-emphasis-medium); color: var(--color-emphasis-medium-foreground); }

.button-outline:active { background-color: var(--color-gray-dark); border-color: var(--color-gray-dark); color: var(--color-gray-dark-foreground); }
.button-outline.button-black:active { background-color: var(--color-black-light); border-color: var(--color-black-light); color: var(--color-black-light-foreground); }
.button-outline.button-muted:active { background-color: var(--color-muted-dark); border-color: var(--color-muted-dark); color: var(--color-muted-dark-foreground); }
.button-outline.button-white:active { background-color: var(--color-white-dark); border-color: var(--color-white-dark); color: var(--color-white-dark-foreground); }
.button-outline.button-primary:active { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-primary-dark-foreground); }
.button-outline.button-secondary:active { background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color: var(--color-secondary-dark-foreground); }
.button-outline.button-tertiary:active { background-color: var(--color-tertiary-dark); border-color: var(--color-tertiary-dark); color: var(--color-tertiary-dark-foreground); }
.button-outline.button-danger:active { background-color: var(--color-danger-dark); border-color: var(--color-danger-dark); color: var(--color-danger-dark-foreground); }
.button-outline.button-warning:active { background-color: var(--color-warning-dark); border-color: var(--color-warning-dark); color: var(--color-warning-dark-foreground); }
.button-outline.button-accent:active { background-color: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-accent-dark-foreground); }
.button-outline.button-success:active { background-color: var(--color-success-dark); border-color: var(--color-success-dark); color: var(--color-success-dark-foreground); }
.button-outline.button-info:active { background-color: var(--color-info-dark); border-color: var(--color-info-dark); color: var(--color-info-dark-foreground); }
.button-outline.button-action:active { background-color: var(--color-action-dark); border-color: var(--color-action-dark); color: var(--color-action-dark-foreground); }
.button-outline.button-urgent:active { background-color: var(--color-urgent-dark); border-color: var(--color-urgent-dark); color: var(--color-urgent-dark-foreground); }
.button-outline.button-emphasis:active { background-color: var(--color-emphasis-dark); border-color: var(--color-emphasis-dark); color: var(--color-emphasis-dark-foreground); }


/* component: button-link */
.button-link { background-color: transparent; border-color: transparent; color: currentcolor; }
.button-link:hover, .button-link.active, .button-link.open, .button-link:focus { background-color: transparent; border-color: transparent; color: currentcolor; }
.button-link:active { background-color: transparent; border-color: transparent; color: currentcolor; }

input[type="button"].button-link,
input[type="submit"].button-link,
input[type="reset"].button-link,
input[type="image"].button-link,
button.button-link,
.button.button-link {
padding-left: 0;
padding-right: 0;
border: none;
}

.button-link.button-black { color: var(--foreground-black); }
.button-link.button-muted { color: var(--foreground-muted); }
.button-link.button-white { color: var(--foreground-white); }
.button-link.button-primary { color: var(--foreground-primary); }
.button-link.button-secondary { color: var(--foreground-secondary); }
.button-link.button-tertiary { color: var(--foreground-tertiary); }
.button-link.button-danger { color: var(--foreground-danger); }
.button-link.button-warning { color: var(--foreground-warning); }
.button-link.button-accent { color: var(--foreground-accent); }
.button-link.button-success { color: var(--foreground-success); }
.button-link.button-info { color: var(--foreground-info); }
.button-link.button-action { color: var(--foreground-action); }
.button-link.button-urgent { color: var(--foreground-urgent); }
.button-link.button-emphasis { color: var(--foreground-emphasis); }


.button-link::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-bottom: var(--gutter-1) solid currentcolor;
transition: right 0.3s ease-out;
}

.button-link::before { right: 200%; }
.button-link:focus::before { right: 100%; }
.button-link:hover::before, .button-link.active::before, .button-link.open::before { right: 0; }
.button-link:active::before { right: 300%; }


/* component: button-tab */
.button.button-tab { padding: 0; }

.button-tab,
.button-tab:hover,
.button-tab:focus,
.button-tab:active,
.button-tab.active,
.button-tab.open {
background-color: transparent;
border-color: transparent;
color: inherit;
}

.button-tab.button-black { color: var(--color-black); }
.button-tab.button-muted { color: var(--foreground-muted); }
.button-tab.button-white { color: var(--color-white); }
.button-tab.button-primary { color: var(--foreground-primary); }
.button-tab.button-secondary { color: var(--foreground-secondary); }
.button-tab.button-tertiary { color: var(--foreground-tertiary); }
.button-tab.button-danger { color: var(--foreground-danger); }
.button-tab.button-warning { color: var(--foreground-warning); }
.button-tab.button-accent { color: var(--foreground-accent); }
.button-tab.button-success { color: var(--foreground-success); }
.button-tab.button-info { color: var(--foreground-info); }
.button-tab.button-action { color: var(--foreground-action); }
.button-tab.button-urgent { color: var(--foreground-urgent); }
.button-tab.button-emphasis { color: var(--foreground-emphasis); }

.button-tab { border-width: var(--gutter-2) 0; }
.button-tab.button-xs { border-width: var(--gutter-1) 0; }
.button-tab.button-s { border-width: var(--gutter-1) 0; }
.button-tab.button-m { border-width: var(--gutter-2) 0; }
.button-tab.button-l { border-width: var(--gutter-4) 0; }
.button-tab.button-xl { border-width: var(--gutter-6) 0; }

.button-tab.active, .button-tab.open { border-bottom-color: currentcolor; }


/* component: button-icon */
input[type="button"].button-icon,
input[type="submit"].button-icon,
input[type="reset"].button-icon,
input[type="image"].button-icon,
button.button-icon,
.button.button-icon { padding: 0; }

.button-icon {
padding: 0;
border: none;
}

.button-icon.open,
.button-icon.active,
.button-icon:hover,
.button-icon:active,
.button-icon {
background-color: transparent !important;
color: inherit;
}

.button-icon.button-black { color: var(--color-black); }
.button-icon.button-muted { color: var(--foreground-muted); }
.button-icon.button-white { color: var(--color-white); }
.button-icon.button-primary { color: var(--foreground-primary); }
.button-icon.button-secondary { color: var(--foreground-secondary); }
.button-icon.button-tertiary { color: var(--foreground-tertiary); }
.button-icon.button-danger { color: var(--foreground-danger); }
.button-icon.button-warning { color: var(--foreground-warning); }
.button-icon.button-accent { color: var(--foreground-accent); }
.button-icon.button-success { color: var(--foreground-success); }
.button-icon.button-info { color: var(--foreground-info); }
.button-icon.button-action { color: var(--foreground-action); }
.button-icon.button-urgent { color: var(--foreground-urgent); }
.button-icon.button-emphasis { color: var(--foreground-emphasis); }

.button-icon::before {
display: none;
}

.button-icon { width: var(--gutter-24); height: var(--gutter-24); }
.button-icon.button-3xs { width: var(--gutter-12); height: var(--gutter-12); }
.button-icon.button-2xs { width: var(--gutter-24); height: var(--gutter-24); }
.button-icon.button-xs { width: var(--gutter-28); height: var(--gutter-28); }
.button-icon.button-s { width: var(--gutter-40); height: var(--gutter-40); }
.button-icon.button-m { width: var(--gutter-48); height: var(--gutter-48); }
.button-icon.button-l { width: var(--gutter-56-64); height: var(--gutter-56-64); }
.button-icon.button-xl { width: var(--gutter-58-72); height: var(--gutter-58-72); }
.button-icon.button-2xl { width: var(--gutter-64-96); height: var(--gutter-64-96); }
.button-icon.button-3xl { width: var(--gutter-72-128); height: var(--gutter-72-128); }

.button-icon.icon > svg, .button-icon > svg, .button-icon > .icon { width: 100%; height: auto; max-height: 100%; }


/* component: section */
.section {
display: flow-root;
box-sizing: border-box;
position: relative;
}

.section { padding-top: var(--gutter-48); padding-bottom: var(--gutter-48); }

.section-0 {  padding-top: var(--gutter-0); padding-bottom: var(--gutter-0); }
.section-1 {  padding-top: var(--gutter-1); padding-bottom: var(--gutter-1); }
.section-2 {  padding-top: var(--gutter-2); padding-bottom: var(--gutter-2); }
.section-3 {  padding-top: var(--gutter-3); padding-bottom: var(--gutter-3); }
.section-5xs {  padding-top: var(--gutter-4); padding-bottom: var(--gutter-4); }
.section-4xs {  padding-top: var(--gutter-8); padding-bottom: var(--gutter-8); }
.section-3xs {  padding-top: var(--gutter-12); padding-bottom: var(--gutter-12); }
.section-2xs {  padding-top: var(--gutter-16); padding-bottom: var(--gutter-16); }
.section-xs {  padding-top: var(--gutter-24); padding-bottom: var(--gutter-24); }
.section-s {  padding-top: var(--gutter-32); padding-bottom: var(--gutter-32); }
.section-m { padding-top: var(--gutter-48); padding-bottom: var(--gutter-48); }
.section-l { padding-top: var(--gutter-50-64); padding-bottom: var(--gutter-50-64); }
.section-xl { padding-top: var(--gutter-56-80); padding-bottom: var(--gutter-56-80); }
.section-2xl { padding-top: var(--gutter-62-96); padding-bottom: var(--gutter-62-96); }
.section-3xl { padding-top: var(--gutter-72-128); padding-bottom: var(--gutter-72-128); }
.section-4xl { padding-top: var(--gutter-88-160); padding-bottom: var(--gutter-88-160); }
.section-5xl { padding-top: var(--gutter-112-192); padding-bottom: var(--gutter-112-192); }

.section-0-top { padding-top: var(--gutter-0); }
.section-1-top { padding-top: var(--gutter-1); }
.section-2-top { padding-top: var(--gutter-2); }
.section-3-top { padding-top: var(--gutter-3); }
.section-5xs-top { padding-top: var(--gutter-4); }
.section-4xs-top { padding-top: var(--gutter-8); }
.section-3xs-top { padding-top: var(--gutter-12); }
.section-2xs-top { padding-top: var(--gutter-16); }
.section-xs-top { padding-top: var(--gutter-24); }
.section-s-top { padding-top: var(--gutter-32); }
.section-m-top { padding-top: var(--gutter-48); }
.section-l-top { padding-top: var(--gutter-50-64); }
.section-xl-top { padding-top: var(--gutter-56-80); }
.section-2xl-top { padding-top: var(--gutter-62-96); }
.section-3xl-top { padding-top: var(--gutter-72-128); }
.section-4xl-top { padding-top: var(--gutter-88-160); }
.section-5xl-top { padding-top: var(--gutter-112-192); }

.section-0-bottom { padding-bottom: var(--gutter-0); }
.section-1-bottom { padding-bottom: var(--gutter-1); }
.section-2-bottom { padding-bottom: var(--gutter-2); }
.section-3-bottom { padding-bottom: var(--gutter-3); }
.section-5xs-bottom { padding-bottom: var(--gutter-4); }
.section-4xs-bottom { padding-bottom: var(--gutter-8); }
.section-3xs-bottom { padding-bottom: var(--gutter-12); }
.section-2xs-bottom { padding-bottom: var(--gutter-16); }
.section-xs-bottom { padding-bottom: var(--gutter-24); }
.section-s-bottom { padding-bottom: var(--gutter-32); }
.section-m-bottom { padding-bottom: var(--gutter-48); }
.section-l-bottom { padding-bottom: var(--gutter-50-64); }
.section-xl-bottom { padding-bottom: var(--gutter-56-80); }
.section-2xl-bottom { padding-bottom: var(--gutter-62-96); }
.section-3xl-bottom { padding-bottom: var(--gutter-72-128); }
.section-4xl-bottom { padding-bottom: var(--gutter-88-160); }
.section-5xl-bottom { padding-bottom: var(--gutter-112-192); }

.section-collapse { padding-top: 0; padding-bottom: 0; }
.section-collapse-top { padding-top: 0; }
.section-collapse-bottom { padding-bottom: 0; }

.section-divider { padding-top: 0; padding-bottom: 0; }
.section-divider-top { padding-top: 0; }
.section-divider-bottom { padding-bottom: 0; }

.section { background-color: transparent; }
.section-black { background-color: var(--color-black); color: var(--color-black-foreground); }
.section-muted { background-color: var(--color-muted-medium); color: var(--color-muted-medium-foreground); }
.section-white { background-color: var(--color-white); color: var(--color-white-foreground); }
.section-primary { background-color: var(--color-primary-medium); color: var(--color-primary-medium-foreground); }
.section-secondary { background-color: var(--color-secondary-medium); color: var(--color-secondary-medium-foreground); }
.section-tertiary { background-color: var(--color-tertiary-medium); color: var(--color-tertiary-medium-foreground); }
.section-danger { background-color: var(--color-danger-medium); color: var(--color-danger-medium-foreground); }
.section-warning { background-color: var(--color-warning-medium); color: var(--color-warning-medium-foreground); }
.section-accent { background-color: var(--color-accent-medium); color: var(--color-accent-medium-foreground); }
.section-success { background-color: var(--color-success-medium); color: var(--color-success-medium-foreground); }
.section-info { background-color: var(--color-info-medium); color: var(--color-info-medium-foreground); }
.section-action { background-color: var(--color-action-medium); color: var(--color-action-medium-foreground); }
.section-urgent { background-color: var(--color-urgent-medium); color: var(--color-urgent-medium-foreground); }
.section-emphasis { background-color: var(--color-emphasis-medium); color: var(--color-emphasis-medium-foreground); }

.section-black-medium { background-color: var(--color-black-medium); color: var(--color-black-medium-foreground); }
.section-black-light { background-color: var(--color-black-light); color: var(--color-black-light-foreground); }
.section-black-xlight { background-color: var(--color-black-xlight); color: var(--color-black-xlight-foreground); }
.section-black-2xlight { background-color: var(--color-black-2xlight); color: var(--color-black-2xlight-foreground); }
.section-black-3xlight { background-color: var(--color-black-3xlight); color: var(--color-black-3xlight-foreground); }
.section-black-4xlight { background-color: var(--color-black-4xlight); color: var(--color-black-4xlight-foreground); }
.section-black-5xlight { background-color: var(--color-black-5xlight); color: var(--color-black-5xlight-foreground); }
.section-black-6xlight { background-color: var(--color-black-6xlight); color: var(--color-black-6xlight-foreground); }

.section-white-6xdark { background-color: var(--color-white-6xdark); color: var(--color-white-6xdark-foreground); }
.section-white-5xdark { background-color: var(--color-white-5xdark); color: var(--color-white-5xdark-foreground); }
.section-white-4xdark { background-color: var(--color-white-4xdark); color: var(--color-white-4xdark-foreground); }
.section-white-3xdark { background-color: var(--color-white-3xdark); color: var(--color-white-3xdark-foreground); }
.section-white-2xdark { background-color: var(--color-white-2xdark); color: var(--color-white-2xdark-foreground); }
.section-white-xdark { background-color: var(--color-white-xdark); color: var(--color-white-xdark-foreground); }
.section-white-dark { background-color: var(--color-white-dark); color: var(--color-white-dark-foreground); }
.section-white-medium { background-color: var(--color-white-medium); color: var(--color-white-medium-foreground); }

.section-black + .section-black { padding-top: 0; }
.section-muted + .section-muted { padding-top: 0; }
.section-white + .section-white { padding-top: 0; }
.section-primary + .section-primary { padding-top: 0; }
.section-secondary + .section-secondary { padding-top: 0; }
.section-tertiary + .section-tertiary { padding-top: 0; }
.section-danger + .section-danger { padding-top: 0; }
.section-warning + .section-warning { padding-top: 0; }
.section-accent + .section-accent { padding-top: 0; }
.section-success + .section-success { padding-top: 0; }
.section-info + .section-info { padding-top: 0; }
.section-action + .section-action { padding-top: 0; }
.section-urgent + .section-urgent { padding-top: 0; }
.section-emphasis + .section-emphasis { padding-top: 0; }
.section-black-medium + .section-black-medium { padding-top: 0; }
.section-black-light + .section-black-light { padding-top: 0; }
.section-black-xlight + .section-black-xlight { padding-top: 0; }
.section-black-2xlight + .section-black-2xlight { padding-top: 0; }
.section-black-3xlight + .section-black-3xlight { padding-top: 0; }
.section-black-4xlight + .section-black-4xlight { padding-top: 0; }
.section-black-5xlight + .section-black-5xlight { padding-top: 0; }
.section-black-6xlight + .section-black-6xlight { padding-top: 0; }
.section-white-6xdark + .section-white-6xdark { padding-top: 0; }
.section-white-5xdark + .section-white-5xdark { padding-top: 0; }
.section-white-4xdark + .section-white-4xdark { padding-top: 0; }
.section-white-3xdark + .section-white-3xdark { padding-top: 0; }
.section-white-2xdark + .section-white-2xdark { padding-top: 0; }
.section-white-xdark + .section-white-xdark { padding-top: 0; }
.section-white-dark + .section-white-dark { padding-top: 0; }
.section-white-medium + .section-white-medium { padding-top: 0; }


/* component: container */
.container {
display: flow-root;
box-sizing: border-box;
position: relative;
height: auto;
margin: 0 auto 0 auto;
padding-left: var(--gutter-24-40);
padding-right: var(--gutter-24-40);
}

.container { width: var(--container-xl); }
.container.container-xs { width: var(--container-xs); }
.container.container-s { width: var(--container-s); }
.container.container-m { width: var(--container-m); }
.container.container-l { width: var(--container-l); }
.container.container-xl { width: var(--container-xl); }

@media (max-width: 575px) { .container { max-width: 440px; } }


/* component: container-expand */
@media (max-width: 575px) { .container-expand { max-width: none; } }

@media (min-width: 576px) {
.container-expand { width: 100%; max-width: none; }
.container-expand-left { margin-left: 0; }
.container-expand-right { margin-right: 0; }
.container-expand-left,
.container-expand-right { width: min(calc(50% + var(--container-xl) / 2), 100% - var(--gutter-24-40) * 2); }
.container-expand-left.container-xs,
.container-expand-right.container-xs { width: min(calc(50% + var(--container-xs) / 2), 100% - var(--gutter-24-40) * 2); }
.container-expand-left.container-s,
.container-expand-right.container-s { width: min(calc(50% + var(--container-s) / 2), 100% - var(--gutter-24-40) * 2); }
.container-expand-left.container-m,
.container-expand-right.container-m { width: min(calc(50% + var(--container-m) / 2), 100% - var(--gutter-24-40) * 2); }
.container-expand-left.container-l,
.container-expand-right.container-l { width: min(calc(50% + var(--container-l) / 2), 100% - var(--gutter-24-40) * 2); }
.container-expand-left.container-xl,
.container-expand-right.container-xl { width: min(calc(50% + var(--container-xl) / 2), 100% - var(--gutter-24-40) * 2); }
}


/* component: card */

.card,
.card-media,
.card-header,
.card-title,
.card-body,
.card-footer {
display: flow-root;
box-sizing: border-box;
position: relative;
}

.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.card-media { text-align: center; }

.card-header { padding: calc(var(--gutter-24) * 0.750) calc(var(--gutter-24) * 1.000); }
.card-body { padding: calc(var(--gutter-24) * 1.000) calc(var(--gutter-24) * 1.000); }
.card-footer { padding: calc(var(--gutter-24) * 0.500) calc(var(--gutter-24) * 1.000); }

.card-xs > .card-header { padding: calc(var(--gutter-20) * 0.750) calc(var(--gutter-20) * 1.000); }
.card-xs > .card-body { padding: calc(var(--gutter-20) * 1.000) calc(var(--gutter-20) * 1.000); }
.card-xs > .card-footer { padding: calc(var(--gutter-20) * 0.500) calc(var(--gutter-20) * 1.000); }

.card-s > .card-header { padding: calc(var(--gutter-22) * 0.750) calc(var(--gutter-22) * 1.000); }
.card-s > .card-body { padding: calc(var(--gutter-22) * 1.000) calc(var(--gutter-22) * 1.000); }
.card-s > .card-footer { padding: calc(var(--gutter-22) * 0.500) calc(var(--gutter-22) * 1.000); }

.card-m > .card-header { padding: calc(var(--gutter-24) * 0.750) calc(var(--gutter-24) * 1.000); }
.card-m > .card-body { padding: calc(var(--gutter-24) * 1.000) calc(var(--gutter-24) * 1.000); }
.card-m > .card-footer { padding: calc(var(--gutter-24) * 0.500) calc(var(--gutter-24) * 1.000); }

.card-l > .card-header { padding: calc(var(--gutter-28) * 0.750) calc(var(--gutter-28) * 1.000); }
.card-l > .card-body { padding: calc(var(--gutter-28) * 1.000) calc(var(--gutter-28) * 1.000); }
.card-l > .card-footer { padding: calc(var(--gutter-28) * 0.500) calc(var(--gutter-28) * 1.000); }

.card-xl > .card-header { padding: calc(var(--gutter-32) * 0.750) calc(var(--gutter-32) * 1.000); }
.card-xl > .card-body { padding: calc(var(--gutter-32) * 1.000) calc(var(--gutter-32) * 1.000); }
.card-xl > .card-footer { padding: calc(var(--gutter-32) * 0.500) calc(var(--gutter-32) * 1.000); }

.card-media { padding: 0; }

.card-black { background-color: var(--color-black); color: var(--color-black-foreground); }
.card-white { background-color: var(--color-white-medium); color: var(--color-white-medium-foreground); }
.card-muted { background-color: var(--color-muted-dark); color: var(--color-muted-dark-foreground); }
.card-primary { background-color: var(--color-primary-medium); color: var(--color-primary-medium-foreground); }
.card-secondary { background-color: var(--color-secondary-medium); color: var(--color-secondary-medium-foreground); }
.card-tertiary { background-color: var(--color-tertiary-medium); color: var(--color-tertiary-medium-foreground); }
.card-danger { background-color: var(--color-danger-medium); color: var(--color-danger-medium-foreground); }
.card-warning { background-color: var(--color-warning-medium); color: var(--color-warning-medium-foreground); }
.card-accent { background-color: var(--color-accent-medium); color: var(--color-accent-medium-foreground); }
.card-success { background-color: var(--color-success-medium); color: var(--color-success-medium-foreground); }
.card-info { background-color: var(--color-info-medium); color: var(--color-info-medium-foreground); }
.card-action { background-color: var(--color-action-medium); color: var(--color-action-medium-foreground); }
.card-urgent { background-color: var(--color-urgent-medium); color: var(--color-urgent-medium-foreground); }
.card-emphasis { background-color: var(--color-emphasis-medium); color: var(--color-emphasis-medium-foreground); }

.card-black > .card-header, .card-black > .card-footer { background-color: var(--color-black-light); color: var(--color-black-medium-foreground); }
.card-white > .card-header, .card-white > .card-footer { background-color: var(--color-white); color: var(--color-white-foreground); }
.card-muted > .card-header, .card-muted > .card-footer { background-color: var(--color-muted-medium); color: var(--color-muted-medium-foreground); }
.card-primary > .card-header, .card-primary > .card-footer { background-color: var(--color-primary-light); color: var(--color-primary-light-foreground); }
.card-secondary > .card-header, .card-secondary > .card-footer { background-color: var(--color-secondary-light); color: var(--color-secondary-light-foreground); }
.card-tertiary > .card-header, .card-tertiary > .card-footer { background-color: var(--color-tertiary-light); color: var(--color-tertiary-light-foreground); }
.card-danger > .card-header, .card-danger > .card-footer { background-color: var(--color-danger-light); color: var(--color-danger-light-foreground); }
.card-warning > .card-header, .card-warning > .card-footer { background-color: var(--color-warning-light); color: var(--color-warning-light-foreground); }
.card-accent > .card-header, .card-accent > .card-footer { background-color: var(--color-accent-light); color: var(--color-accent-light-foreground); }
.card-success > .card-header, .card-success > .card-footer { background-color: var(--color-success-light); color: var(--color-success-light-foreground); }
.card-info > .card-header, .card-info > .card-footer { background-color: var(--color-info-light); color: var(--color-info-light-foreground); }
.card-action > .card-header, .card-action > .card-footer { background-color: var(--color-action-light); color: var(--color-action-light-foreground); }
.card-urgent > .card-header, .card-urgent > .card-footer { background-color: var(--color-urgent-light); color: var(--color-urgent-light-foreground); }
.card-emphasis > .card-header, .card-emphasis > .card-footer { background-color: var(--color-emphasis-light); color: var(--color-emphasis-light-foreground); }

.card-black { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-black-3xlight); }
.card-white { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-white-4xdark); }
.card-muted { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-muted-3xdark); }
.card-primary { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-primary-2xdark); }
.card-secondary { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-secondary-2xdark); }
.card-tertiary { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-tertiary-2xdark); }
.card-danger { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-danger-2xdark); }
.card-warning { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-warning-2xdark); }
.card-accent { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-accent-2xdark); }
.card-success { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-success-2xdark); }
.card-info { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-info-2xdark); }
.card-action { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-action-2xdark); }
.card-urgent { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-urgent-2xdark); }
.card-emphasis { border-width: var(--gutter-1); border-style: solid; border-color: var(--color-emphasis-2xdark); }

* + .card-header,
* + .card-media,
* + .card-body,
* + .card-footer {
border-width: var(--gutter-1);
border-style: solid;
border-color: inherit;
border-left: 0 none transparent;
border-right: 0 none transparent;
border-bottom: 0 none transparent;
}


/* component: marker */
.marker {
padding: var(--gutter-8);
background: var(--color-black-medium);
color: var(--color-white);
}

.marker:hover { color: var(--color-white); }


/* component: alert */
.alert {
display: block;
box-sizing: border-box;
position: relative;
margin: 0;
padding: 0;
font-size: inherit;
line-height: inherit;
}

.alert .alert-close,
.alert [data-alert-close] { cursor: pointer; }

.alert-content { padding: var(--gutter-12) var(--gutter-18); font-size: var(--gutter-16); line-height: var(--leading-m); }
.alert-content.alert-xs { padding: var(--gutter-6) var(--gutter-14); font-size: var(--gutter-12); line-height: var(--leading-l); }
.alert-content.alert-s { padding: var(--gutter-10) var(--gutter-16); font-size: var(--gutter-14); line-height: var(--leading-m); }
.alert-content.alert-m { padding: var(--gutter-12) var(--gutter-18); font-size: var(--gutter-16); line-height: var(--leading-m); }
.alert-content.alert-l { padding: var(--gutter-20) var(--gutter-20); font-size: var(--gutter-18); line-height: var(--leading-m); }
.alert-content.alert-xl { padding: var(--gutter-24) var(--gutter-22); font-size: var(--gutter-20); line-height: var(--leading-m); }

.alert-content [data-alert-close] { width: var(--gutter-14); height: var(--gutter-14); font-size: var(--gutter-14); line-height: var(--gutter-14); transform: translateY(33.333%); }
.alert-content.alert-xs [data-alert-close] { width: var(--gutter-10); height: var(--gutter-10); font-size: var(--gutter-10); line-height: var(--gutter-10); transform: translateY(33.333%); }
.alert-content.alert-s [data-alert-close] { width: var(--gutter-12); height: var(--gutter-12); font-size: var(--gutter-12); line-height: var(--gutter-12); transform: translateY(33.333%); }
.alert-content.alert-m [data-alert-close] { width: var(--gutter-14); height: var(--gutter-14); font-size: var(--gutter-14); line-height: var(--gutter-14); transform: translateY(33.333%); }
.alert-content.alert-l [data-alert-close] { width: var(--gutter-16); height: var(--gutter-16);; font-size: var(--gutter-16);; line-height: var(--gutter-16); transform: translateY(33.333%); }
.alert-content.alert-xl [data-alert-close] { width: var(--gutter-18); height: var(--gutter-18); font-size: var(--gutter-18); line-height: var(--gutter-18); transform: translateY(33.333%); }

.alert-content { background-color: var(--foreground-tint); color: currentcolor; }
.alert-content.alert-black { background-color: var(--color-black); color: var(--color-black-foreground); }
.alert-content.alert-muted { background-color: var(--foreground-tint); color: currentcolor; }
.alert-content.alert-white { background-color: var(--color-white); color: var(--color-white-foreground); }
.alert-content.alert-primary { background-color: var(--color-primary-medium); color: var(--color-primary-medium-foreground); }
.alert-content.alert-secondary { background-color: var(--color-secondary-medium); color: var(--color-secondary-medium-foreground); }
.alert-content.alert-tertiary { background-color: var(--color-tertiary-medium); color: var(--color-tertiary-medium-foreground); }
.alert-content.alert-danger { background-color: var(--color-danger-medium); color: var(--color-danger-medium-foreground); }
.alert-content.alert-warning { background-color: var(--color-warning-medium); color: var(--color-warning-medium-foreground); }
.alert-content.alert-accent { background-color: var(--color-accent-medium); color: var(--color-accent-medium-foreground); }
.alert-content.alert-success { background-color: var(--color-success-medium); color: var(--color-success-medium-foreground); }
.alert-content.alert-info { background-color: var(--color-info-medium); color: var(--color-info-medium-foreground); }
.alert-content.alert-action { background-color: var(--color-action-medium); color: var(--color-action-medium-foreground); }
.alert-content.alert-urgent { background-color: var(--color-urgent-medium); color: var(--color-urgent-medium-foreground); }
.alert-content.alert-emphasis { background-color: var(--color-emphasis-medium); color: var(--color-emphasis-medium-foreground); }
.alert-content.alert-close { color: currentcolor; }


/* component: notification */
.notification-message {
position: relative;
margin: 0;
padding: var(--gutter-20) var(--gutter-22);
background-image: none;
background-color: var(--foreground-tint); color: currentcolor;
font-size: inherit;
line-height: inherit;
cursor: pointer;
}

.notification {
position: fixed;
top: var(--gutter-14);
left: var(--gutter-14);
z-index: 1040;
box-sizing: border-box;
width: 350px;
}

.notification-top-right,
.notification-bottom-right {
left: auto;
right: var(--gutter-14);
}

.notification-top-center,
.notification-bottom-center {
left: 50%;
margin-left: -175px;
}

.notification-bottom-left,
.notification-bottom-right,
.notification-bottom-center {
top: auto;
bottom: var(--gutter-14);
}

@media (max-width: 575px) {
.notification {
left: var(--gutter-14);
right: var(--gutter-14);
width: auto;
margin: 0;
}
}

* + .notification-message { margin-top: var(--gutter-14); }

.notification-close {
display: none;
position: absolute;
top: var(--gutter-24);
right: var(--gutter-20);
}

.notification-message:hover .notification-close { display: block; }
.notification-message-black { background-color: var(--color-black); color: var(--color-black-foreground); }
.notification-message-muted { background-color: var(--foreground-tint); color: currentcolor; }
.notification-message-white { background-color: var(--color-white); color: var(--color-white-foreground); }
.notification-message-primary { background-color: var(--color-primary-medium); color: var(--color-primary-medium-foreground); }
.notification-message-secondary { background-color: var(--color-secondary-medium); color: var(--color-secondary-medium-foreground); }
.notification-message-tertiary { background-color: var(--color-tertiary-medium); color: var(--color-tertiary-medium-foreground); }
.notification-message-danger { background-color: var(--color-danger-medium); color: var(--color-danger-medium-foreground); }
.notification-message-warning { background-color: var(--color-warning-medium); color: var(--color-warning-medium-foreground); }
.notification-message-accent { background-color: var(--color-accent-medium); color: var(--color-accent-medium-foreground); }
.notification-message-success { background-color: var(--color-success-medium); color: var(--color-success-medium-foreground); }
.notification-message-info { background-color: var(--color-info-medium); color: var(--color-info-medium-foreground); }
.notification-message-action { background-color: var(--color-action-medium); color: var(--color-action-medium-foreground); }
.notification-message-urgent { background-color: var(--color-urgent-medium); color: var(--color-urgent-medium-foreground); }
.notification-message-emphasis { background-color: var(--color-emphasis-medium); color: var(--color-emphasis-medium-foreground); }


/* component: placeholder */
.placeholder {
margin-bottom: var(--gutter-24);
padding: var(--gutter-24) var(--gutter-24);
background: var(--color-white-medium);
}

* + .placeholder { margin-top: var(--gutter-24); }
.placeholder > :last-child { margin-bottom: 0; }


/* component: article-margin */
:where(article, .mce-content-body) * + h1 { margin-top: 1.000em; }
:where(article, .mce-content-body) * + h2 { margin-top: 1.000em; }
:where(article, .mce-content-body) * + h3 { margin-top: 1.000em; }
:where(article, .mce-content-body) * + h4 { margin-top: 1.000em; }
:where(article, .mce-content-body) * + h5 { margin-top: 1.000em; }
:where(article, .mce-content-body) * + h6 { margin-top: 1.000em; }
:where(article, .mce-content-body) * + p { margin-top: 1.000em; }
:where(article, .mce-content-body) * + ul { margin-top: 1.000em; }
:where(article, .mce-content-body) * + ol { margin-top: 1.000em; }
:where(article, .mce-content-body) * + li { margin-top: 0.250em; }

:where(article, .mce-content-body) * + hr { margin-top: 1.5em; }
:where(article, .mce-content-body) hr + * { margin-top: 1.5em; }


/* component: drop */
.drop {
display: none;
position: absolute;
z-index: 1020;
--position-offset: 0;
--position-viewport-offset: 0;
box-sizing: border-box;
width: auto;
}

.drop.open { display: block; }


/* component: dropbar */
.dropbar {
--position-offset: 0;
--position-shift-offset: 0;
--position-viewport-offset: 0;
width: auto;
}


/* component: modal */
.modal {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1010;
overflow-y: auto;
opacity: 0;
transition: opacity 0.15s linear;
}

.modal.open { opacity: 1; }
.modal-page { overflow: hidden; }

.modal-dialog {
position: relative;
box-sizing: border-box;
display: flex;
align-items: start;
justify-content: center;
margin: 0;
padding: var(--gutter-24);
width: 100%;
max-width: 100% !important;
height: 100%;
opacity: 0;
transition: 0.150s linear;
transition-property: opacity;
}

.modal-full > .modal-dialog { padding: 0 !important; }

.modal-top > .modal-dialog { align-items: start; }
.modal-center > .modal-dialog  { align-items: center; }
.modal-bottom > .modal-dialog  { align-items: end; }

.open > .modal-dialog { opacity: 1; }

.modal-content {
display: block;
box-sizing: border-box;
position: relative;
top: 0;
bottom: auto;
left: auto;
right: auto;
margin: 0 auto;
padding: 0;
opacity: 0;
transform: translateY(-100%);
transition: 0.150s linear;
transition-property: opacity, transform;
}

.modal-bottom > .modal-dialog > .modal-content { transform: translateY(100%); }

.open > .modal-dialog > .modal-content { opacity: 1; transform: translateY(0); }

.modal > .modal-dialog > .modal-content { width: var(--container-xs); }
.modal-xs > .modal-dialog > .modal-content  { width: var(--container-xs); }
.modal-s > .modal-dialog > .modal-content  { width: var(--container-s); }
.modal-m > .modal-dialog > .modal-content  { width: var(--container-m); }
.modal-l > .modal-dialog > .modal-content  { width: var(--container-l); }
.modal-xl > .modal-dialog > .modal-content  { width: var(--container-xl); }
.modal-expand > .modal-dialog > .modal-content  { width: 100%; }
.modal-full > .modal-dialog > .modal-content  { width: 100%; }


/* component: accordion */
.accordion-toggle {
display: block;
box-sizing: border-box;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.accordion-toggle-icon {
transform: rotate(0);
transition-delay: var(--transition-default-delay);
transition-duration: var(--transition-default-duration);
transition-timing-function: var(--transition-default-timing-function);
transition-property: transform;
}

.accordion-item.open .accordion-toggle-icon { transform: rotate(-180deg); }


/* component: slideshow */
.slideshow { -webkit-tap-highlight-color: transparent; }
.slideshow-container { overflow: hidden; overflow: clip; }

.slideshow-items {
position: relative;
z-index: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
-webkit-touch-callout: none;
touch-action: pan-y;
}

.slideshow-items > * {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
will-change: transform, opacity;
}

.slideshow-items > :not(.active) { display: none; }


/* component: slider */
.slider { -webkit-tap-highlight-color: transparent; }
.slider-container { overflow: hidden; overflow: clip; }
.slider-container-offset { margin: -11px -25px -39px -25px; padding: 11px 25px 39px 25px; }

.slider-items {
will-change: transform;
position: relative;
touch-action: pan-y;
}

.slider-items:not(.grid) {
display: flex;
margin: 0;
padding: 0;
list-style: none;
-webkit-touch-callout: none;
}

.slider-items.grid { flex-wrap: nowrap; }

.slider-items > * {
flex: none !important;
box-sizing: border-box;
max-width: 100%;
position: relative;
}


/* component: sticky */
.sticky {
position: relative;
z-index: 980;
box-sizing: border-box;
}

.sticky-fixed { margin: 0 !important; }
.sticky[class*="animation-"] { animation-duration: 0.2s; }
.sticky.animation-reverse { animation-duration: 0.2s; }
.sticky-placeholder { pointer-events: none; }


/* component: offcanvas */
.offcanvas {
display: none;
position: fixed;
overflow: hidden;
overflow: clip;
top: 0;
right: max(0px, calc(calc(100% - var(--body-max-width)) / 2));
bottom: 0;
left: max(0px, calc(calc(100% - var(--body-max-width)) / 2));
z-index: 1000;
pointer-events: none;
}

.offcanvas-bar {
position: absolute;
pointer-events: auto;
top: 0;
bottom: 0;
left: calc(var(--offcanvas-horizontal-width) * -1);
box-sizing: border-box;
width: var(--offcanvas-horizontal-width);
overflow-y: auto;
display: flex;
flex-direction: column;
z-index: 1;
}

.offcanvas-right .offcanvas-bar { left: auto; right: calc(var(--offcanvas-horizontal-width) * -1); }
.open > .offcanvas-bar { left: 0; }
.offcanvas-right .open > .offcanvas-bar { left: auto; right: 0; }
.offcanvas-bar-animation { transition: left 0.3s ease-out; }
.offcanvas-right .offcanvas-bar-animation { transition-property: right; }

.offcanvas-header,
.offcanvas-footer {
flex: none;
}

.offcanvas-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}

.offcanvas-reveal {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0;
overflow: hidden;
transition: width 0.3s ease-out;
}

.offcanvas-reveal .offcanvas-bar { left: 0; }
.offcanvas-right .offcanvas-reveal .offcanvas-bar { left: auto; right: 0; }
.open > .offcanvas-reveal { width: var(--offcanvas-horizontal-width); }
.offcanvas-right .offcanvas-reveal { right: 0; left: auto; }

.offcanvas-overlay {
position: absolute;
pointer-events: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
touch-action: none;
opacity: 0;
transition: opacity 0.15s linear;
}

.open > .offcanvas-overlay { opacity: 1; }

.offcanvas-container {
position: relative;
box-sizing: border-box;
width: 100%;
}

.offcanvas-container > *:not(.offcanvas) {
position: relative;
top: 0;
left: 0;
transition: left 0.3s ease-out, top 0.3s ease-out;
}

.offcanvas-left.offcanvas-container-animation > *:not(.offcanvas) { left: var(--offcanvas-horizontal-width); }
.offcanvas-right.offcanvas-container-animation > *:not(.offcanvas) { left: calc(var(--offcanvas-horizontal-width) * -1); }

.offcanvas-top .offcanvas-bar,
.offcanvas-bottom .offcanvas-bar {
left: 0;
right: 0;
width: auto;
height: var(--offcanvas-vertical-width);
max-height: 100%;
}

.offcanvas-top .offcanvas-bar { top: 0; bottom: auto; transform: translateY(-100%); }
.offcanvas-bottom .offcanvas-bar { top: auto; bottom: 0; transform: translateY(100%); }

.offcanvas-top .open > .offcanvas-bar,
.offcanvas-bottom .open > .offcanvas-bar { transform: translateY(0); }

.offcanvas-top .offcanvas-bar-animation,
.offcanvas-bottom .offcanvas-bar-animation { transition-property: transform; }

.offcanvas-top .offcanvas-reveal,
.offcanvas-bottom .offcanvas-reveal {
left: 0;
right: 0;
width: auto;
height: 0;
transition-property: height;
}

.offcanvas-top .offcanvas-reveal { top: 0; bottom: auto; max-height: 100%; }
.offcanvas-bottom .offcanvas-reveal { top: auto; bottom: 0; max-height: 100%; }

.offcanvas-top .offcanvas-reveal .offcanvas-bar { top: 0; bottom: auto; max-height: none; transform: translateY(0); }
.offcanvas-bottom .offcanvas-reveal .offcanvas-bar { top: auto; bottom: 0; max-height: none; transform: translateY(0); }

.offcanvas-top .open > .offcanvas-reveal,
.offcanvas-bottom .open > .offcanvas-reveal { height: var(--offcanvas-vertical-width); }

.offcanvas-top.offcanvas-container,
.offcanvas-bottom.offcanvas-container {
overflow-y: hidden;
overflow-y: clip;
}

.offcanvas-top.offcanvas-container-animation > *:not(.offcanvas) { top: var(--offcanvas-vertical-width); }
.offcanvas-bottom.offcanvas-container-animation > *:not(.offcanvas) { top: calc(var(--offcanvas-vertical-width) * -1); }


/* component: switcher */
.switcher-items {
margin: 0; padding: 0; list-style: none; }
.switcher-items > :not(.active) { display: none; }
.switcher-items > * > :last-child { margin-bottom: 0; }


/* component: leader */
.leader { overflow: hidden; }

.leader-fill::after {
display: inline-block;
margin-left: var(--gutter-20);
width: 0;
content: attr(data-fill);
white-space: nowrap;
}

.leader-fill.leader-hide::after { display: none; }


/* component: tooltip */
.tooltip {
display: none;
position: absolute;
z-index: 1030;
--position-offset: var(--gutter-16);
--position-viewport-offset: 0;
top: 0;
box-sizing: border-box;
max-width: none;
padding: var(--gutter-12) var(--gutter-16);
background-color: var(--foreground-tint);
border-radius: 0;
color: currentcolor;
font-size: var(--gutter-18);
}

.tooltip::after {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
box-sizing: border-box;
position: absolute;
float: none;
clear: both;
list-style: none;
margin: 0;
padding: 0;
width: 0;
height: 0;
border-left: var(--gutter-16) solid transparent;
border-right: var(--gutter-16) solid transparent;
border-bottom: var(--gutter-16) solid var(--foreground-tint);
font-size: 0;
line-height: 0;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
color: inherit;
content: "";
}

.tooltip::after { top: calc(var(--gutter-16) * -1); bottom: auto; left: calc(50% - var(--gutter-16)); right: auto; transform: rotate(0deg)}

.tooltip-top-left::after { top: auto; bottom: calc(var(--gutter-16) * -1); left: calc(0% + var(--gutter-16)); right: auto; transform: rotate(180deg)}
.tooltip-top-center::after { top: auto; bottom: calc(var(--gutter-16) * -1); left: calc(50% - var(--gutter-16)); right: auto; transform: rotate(180deg)}
.tooltip-top-right::after { top: auto; bottom: calc(var(--gutter-16) * -1); left: auto; right: calc(0% + var(--gutter-16)); transform: rotate(180deg)}

.tooltip-bottom-left::after { top: calc(var(--gutter-16) * -1); bottom: auto; left: calc(0% + var(--gutter-16)); right: auto; transform: rotate(0deg)}
.tooltip-bottom-center::after { top: calc(var(--gutter-16) * -1); bottom: auto; left: calc(50% - var(--gutter-16)); right: auto; transform: rotate(0deg)}
.tooltip-bottom-right::after { top: calc(var(--gutter-16) * -1); bottom: auto; left: auto; right: calc(0% + var(--gutter-16)); transform: rotate(0deg)}

.tooltip-left-top::after { top: calc(50% - var(--gutter-16) / 2); bottom: auto; left: auto; right: calc(var(--gutter-16) * -1.5); transform: rotate(90deg)}
.tooltip-left-center::after { top: calc(50% - var(--gutter-16) / 2); bottom: auto; left: auto; right: calc(var(--gutter-16) * -1.5); transform: rotate(90deg)}
.tooltip-left-bottom::after { top: calc(50% - var(--gutter-16) / 2); bottom: calc(var(--gutter-16) * 1.5); left: auto; right: calc(var(--gutter-16) * -1.5); transform: rotate(90deg)}

.tooltip-right-top::after { top: calc(50% - var(--gutter-16) / 2); bottom: auto; left: calc(var(--gutter-16) * -1.5); right: auto; transform: rotate(270deg)}
.tooltip-right-center::after { top: calc(50% - var(--gutter-16) / 2); bottom: auto; left: calc(var(--gutter-16) * -1.5); right: auto; transform: rotate(270deg)}
.tooltip-right-bottom::after { top: calc(50% - var(--gutter-16) / 2); left: calc(var(--gutter-16) * -1.5); right: auto; transform: rotate(270deg)}

.tooltip.active { display: block; }


/* component: thumbnav */
.thumbnav {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
margin-left: calc(var(--gutter-20) * -1);
}

.thumbnav > * { padding-left: var(--gutter-20); }
.thumbnav > * > * { display: inline-block; }
.thumbnav-vertical { flex-direction: column; margin-left: 0; margin-top: calc(var(--gutter-20) * -1); }
.thumbnav-vertical > * { padding-left: 0; padding-top: var(--gutter-20); }


/* component: grid */
.grid { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.grid>*{margin:0;}
.grid>*>:last-child{margin-bottom:0;}
.grid{margin-left:calc(var(--gutter-48)*-1);}
.grid>*{padding-left:var(--gutter-48);}
.grid+.grid,.grid>.grid-margin,*+.grid-margin{margin-top:var(--gutter-48);}

.grid-0,.grid-column-0{margin-left:calc(var(--gutter-0)*-1);}
.grid-0>*,.grid-column-0>*{padding-left:var(--gutter-0);}
.grid+.grid-0,.grid+.grid-row-0,.grid-0>.grid-margin,.grid-row-0>.grid-margin,*+.grid-margin-0{margin-top:var(--gutter-0);}
.grid-1,.grid-column-1{margin-left:calc(var(--gutter-1)*-1);}
.grid-1>*,.grid-column-1>*{padding-left:var(--gutter-1);}
.grid+.grid-1,.grid+.grid-row-1,.grid-1>.grid-margin,.grid-row-1>.grid-margin,*+.grid-margin-1{margin-top:var(--gutter-1);}
.grid-2,.grid-column-2{margin-left:calc(var(--gutter-2)*-1);}
.grid-2>*,.grid-column-2>*{padding-left:var(--gutter-2);}
.grid+.grid-2,.grid+.grid-row-2,.grid-2>.grid-margin,.grid-row-2>.grid-margin,*+.grid-margin-2{margin-top:var(--gutter-2);}
.grid-3,.grid-column-3{margin-left:calc(var(--gutter-3)*-1);}
.grid-3>*,.grid-column-3>*{padding-left:var(--gutter-3);}
.grid+.grid-3,.grid+.grid-row-3,.grid-3>.grid-margin,.grid-row-3>.grid-margin,*+.grid-margin-3{margin-top:var(--gutter-3);}
.grid-5xs,.grid-column-5xs{margin-left:calc(var(--gutter-4)*-1);}
.grid-5xs>*,.grid-column-5xs>*{padding-left:var(--gutter-4);}
.grid+.grid-5xs,.grid+.grid-row-5xs,.grid-5xs>.grid-margin,.grid-row-5xs>.grid-margin,*+.grid-margin-5xs{margin-top:var(--gutter-4);}
.grid-4xs,.grid-column-4xs{margin-left:calc(var(--gutter-8)*-1);}
.grid-4xs>*,.grid-column-4xs>*{padding-left:var(--gutter-8);}
.grid+.grid-4xs,.grid+.grid-row-4xs,.grid-4xs>.grid-margin,.grid-row-4xs>.grid-margin,*+.grid-margin-4xs{margin-top:var(--gutter-8);}
.grid-3xs,.grid-column-3xs{margin-left:calc(var(--gutter-12)*-1);}
.grid-3xs>*,.grid-column-3xs>*{padding-left:var(--gutter-12);}
.grid+.grid-3xs,.grid+.grid-row-3xs,.grid-3xs>.grid-margin,.grid-row-3xs>.grid-margin,*+.grid-margin-3xs{margin-top:var(--gutter-12);}
.grid-2xs,.grid-column-2xs{margin-left:calc(var(--gutter-16)*-1);}
.grid-2xs>*,.grid-column-2xs>*{padding-left:var(--gutter-16);}
.grid+.grid-2xs,.grid+.grid-row-2xs,.grid-2xs>.grid-margin,.grid-row-2xs>.grid-margin,*+.grid-margin-2xs{margin-top:var(--gutter-16);}
.grid-xs,.grid-column-xs{margin-left:calc(var(--gutter-24)*-1);}
.grid-xs>*,.grid-column-xs>*{padding-left:var(--gutter-24);}
.grid+.grid-xs,.grid+.grid-row-xs,.grid-xs>.grid-margin,.grid-row-xs>.grid-margin,*+.grid-margin-xs{margin-top:var(--gutter-24);}
.grid-s,.grid-column-s{margin-left:calc(var(--gutter-32)*-1);}
.grid-s>*,.grid-column-s>*{padding-left:var(--gutter-32);}
.grid+.grid-s,.grid+.grid-row-s,.grid-s>.grid-margin,.grid-row-s>.grid-margin,*+.grid-margin-s{margin-top:var(--gutter-32);}
.grid-m,.grid-column-m{margin-left:calc(var(--gutter-48)*-1);}
.grid-m>*,.grid-column-m>*{padding-left:var(--gutter-48);}
.grid+.grid-m,.grid+.grid-row-m,.grid-m>.grid-margin,.grid-row-m>.grid-margin,*+.grid-margin-m{margin-top:var(--gutter-48);}
.grid-l,.grid-column-l{margin-left:calc(var(--gutter-50-64)*-1);}
.grid-l>*,.grid-column-l>*{padding-left:var(--gutter-50-64);}
.grid+.grid-l,.grid+.grid-row-l,.grid-l>.grid-margin,.grid-row-l>.grid-margin,*+.grid-margin-l{margin-top:var(--gutter-50-64);}
.grid-xl,.grid-column-xl{margin-left:calc(var(--gutter-56-80)*-1);}
.grid-xl>*,.grid-column-xl>*{padding-left:var(--gutter-56-80);}
.grid+.grid-xl,.grid+.grid-row-xl,.grid-xl>.grid-margin,.grid-row-xl>.grid-margin,*+.grid-margin-xl{margin-top:var(--gutter-56-80);}
.grid-2xl,.grid-column-2xl{margin-left:calc(var(--gutter-62-96)*-1);}
.grid-2xl>*,.grid-column-2xl>*{padding-left:var(--gutter-62-96);}
.grid+.grid-2xl,.grid+.grid-row-2xl,.grid-2xl>.grid-margin,.grid-row-2xl>.grid-margin,*+.grid-margin-2xl{margin-top:var(--gutter-62-96);}
.grid-3xl,.grid-column-3xl{margin-left:calc(var(--gutter-72-128)*-1);}
.grid-3xl>*,.grid-column-3xl>*{padding-left:var(--gutter-72-128);}
.grid+.grid-3xl,.grid+.grid-row-3xl,.grid-3xl>.grid-margin,.grid-row-3xl>.grid-margin,*+.grid-margin-3xl{margin-top:var(--gutter-72-128);}
.grid-4xl,.grid-column-4xl{margin-left:calc(var(--gutter-88-160)*-1);}
.grid-4xl>*,.grid-column-4xl>*{padding-left:var(--gutter-88-160);}
.grid+.grid-4xl,.grid+.grid-row-4xl,.grid-4xl>.grid-margin,.grid-row-4xl>.grid-margin,*+.grid-margin-4xl{margin-top:var(--gutter-88-160);}
.grid-5xl,.grid-column-5xl{margin-left:calc(var(--gutter-112-192)*-1);}
.grid-5xl>*,.grid-column-5xl>*{padding-left:var(--gutter-112-192);}
.grid+.grid-5xl,.grid+.grid-row-5xl,.grid-5xl>.grid-margin,.grid-row-5xl>.grid-margin,*+.grid-margin-5xl{margin-top:var(--gutter-112-192);}

.grid-collapse,.grid-column-collapse{margin-left:0;}
.grid-collapse>*,.grid-column-collapse>*{padding-left:0;}
.grid+.grid-collapse,.grid+.grid-row-collapse,.grid-collapse>.grid-margin,.grid-row-collapse>.grid-margin{margin-top:0;}


/* component: grid-divider */

.grid-divider>*{position:relative; }
.grid-divider>:not(.first-column)::before{content:"";position:absolute;top:0;bottom:0;border-left:var(--gutter-1) solid var(--foreground-slight); }
.grid-divider.grid-stack>.grid-margin::before{content:"";position:absolute;left:0;right:0;border-top:var(--gutter-1) solid var(--foreground-slight); }


.grid-divider{margin-left:calc(var(--gutter-48)*-2);}
.grid-divider>*{padding-left:calc(var(--gutter-48)*2);}
.grid-divider>:not(.first-column)::before{left:var(--gutter-48);}
.grid-divider.grid-stack>.grid-margin{margin-top:calc(var(--gutter-48)*2);}
.grid-divider.grid-stack>.grid-margin::before{top:calc(var(--gutter-48)*-1);left:calc(var(--gutter-48)*2);}

.grid-divider.grid-0,.grid-divider.grid-column-0{margin-left:calc(var(--gutter-1)*-2);}
.grid-divider.grid-0>*,.grid-divider.grid-column-0>*{padding-left:calc(var(--gutter-1)*2);}
.grid-divider.grid-0>:not(.first-column)::before,.grid-divider.grid-column-0>:not(.first-column)::before{left:var(--gutter-1);}
.grid-divider.grid-0.grid-stack>.grid-margin,.grid-divider.grid-row-0.grid-stack>.grid-margin{margin-top:calc(var(--gutter-1)*2);}
.grid-divider.grid-0.grid-stack>.grid-margin::before{top:calc(var(--gutter-1)*-1);left:calc(var(--gutter-1)*2);}
.grid-divider.grid-row-0.grid-stack>.grid-margin::before{top:calc(var(--gutter-1)*-1);}
.grid-divider.grid-column-0.grid-stack>.grid-margin::before{left:calc(var(--gutter-1)*2);}
.grid-divider.grid-1,.grid-divider.grid-column-1{margin-left:calc(var(--gutter-1)*-2);}
.grid-divider.grid-1>*,.grid-divider.grid-column-1>*{padding-left:calc(var(--gutter-1)*2);}
.grid-divider.grid-1>:not(.first-column)::before,.grid-divider.grid-column-1>:not(.first-column)::before{left:var(--gutter-1);}
.grid-divider.grid-1.grid-stack>.grid-margin,.grid-divider.grid-row-1.grid-stack>.grid-margin{margin-top:calc(var(--gutter-1)*2);}
.grid-divider.grid-1.grid-stack>.grid-margin::before{top:calc(var(--gutter-1)*-1);left:calc(var(--gutter-1)*2);}
.grid-divider.grid-row-1.grid-stack>.grid-margin::before{top:calc(var(--gutter-1)*-1);}
.grid-divider.grid-column-1.grid-stack>.grid-margin::before{left:calc(var(--gutter-1)*2);}
.grid-divider.grid-2,.grid-divider.grid-column-2{margin-left:calc(var(--gutter-2)*-2);}
.grid-divider.grid-2>*,.grid-divider.grid-column-2>*{padding-left:calc(var(--gutter-2)*2);}
.grid-divider.grid-2>:not(.first-column)::before,.grid-divider.grid-column-2>:not(.first-column)::before{left:var(--gutter-2);}
.grid-divider.grid-2.grid-stack>.grid-margin,.grid-divider.grid-row-2.grid-stack>.grid-margin{margin-top:calc(var(--gutter-2)*2);}
.grid-divider.grid-2.grid-stack>.grid-margin::before{top:calc(var(--gutter-2)*-1);left:calc(var(--gutter-2)*2);}
.grid-divider.grid-row-2.grid-stack>.grid-margin::before{top:calc(var(--gutter-2)*-1);}
.grid-divider.grid-column-2.grid-stack>.grid-margin::before{left:calc(var(--gutter-2)*2);}
.grid-divider.grid-3,.grid-divider.grid-column-3{margin-left:calc(var(--gutter-3)*-2);}
.grid-divider.grid-3>*,.grid-divider.grid-column-3>*{padding-left:calc(var(--gutter-3)*2);}
.grid-divider.grid-3>:not(.first-column)::before,.grid-divider.grid-column-3>:not(.first-column)::before{left:var(--gutter-3);}
.grid-divider.grid-3.grid-stack>.grid-margin,.grid-divider.grid-row-3.grid-stack>.grid-margin{margin-top:calc(var(--gutter-3)*2);}
.grid-divider.grid-3.grid-stack>.grid-margin::before{top:calc(var(--gutter-3)*-1);left:calc(var(--gutter-3)*2);}
.grid-divider.grid-row-3.grid-stack>.grid-margin::before{top:calc(var(--gutter-3)*-1);}
.grid-divider.grid-column-3.grid-stack>.grid-margin::before{left:calc(var(--gutter-3)*2);}
.grid-divider.grid-5xs,.grid-divider.grid-column-5xs{margin-left:calc(var(--gutter-4)*-2);}
.grid-divider.grid-5xs>*,.grid-divider.grid-column-5xs>*{padding-left:calc(var(--gutter-4)*2);}
.grid-divider.grid-5xs>:not(.first-column)::before,.grid-divider.grid-column-5xs>:not(.first-column)::before{left:var(--gutter-4);}
.grid-divider.grid-5xs.grid-stack>.grid-margin,.grid-divider.grid-row-5xs.grid-stack>.grid-margin{margin-top:calc(var(--gutter-4)*2);}
.grid-divider.grid-5xs.grid-stack>.grid-margin::before{top:calc(var(--gutter-4)*-1);left:calc(var(--gutter-4)*2);}
.grid-divider.grid-row-5xs.grid-stack>.grid-margin::before{top:calc(var(--gutter-4)*-1);}
.grid-divider.grid-column-5xs.grid-stack>.grid-margin::before{left:calc(var(--gutter-4)*2);}
.grid-divider.grid-4xs,.grid-divider.grid-column-4xs{margin-left:calc(var(--gutter-8)*-2);}
.grid-divider.grid-4xs>*,.grid-divider.grid-column-4xs>*{padding-left:calc(var(--gutter-8)*2);}
.grid-divider.grid-4xs>:not(.first-column)::before,.grid-divider.grid-column-4xs>:not(.first-column)::before{left:var(--gutter-8);}
.grid-divider.grid-4xs.grid-stack>.grid-margin,.grid-divider.grid-row-4xs.grid-stack>.grid-margin{margin-top:calc(var(--gutter-8)*2);}
.grid-divider.grid-4xs.grid-stack>.grid-margin::before{top:calc(var(--gutter-8)*-1);left:calc(var(--gutter-8)*2);}
.grid-divider.grid-row-4xs.grid-stack>.grid-margin::before{top:calc(var(--gutter-8)*-1);}
.grid-divider.grid-column-4xs.grid-stack>.grid-margin::before{left:calc(var(--gutter-8)*2);}
.grid-divider.grid-3xs,.grid-divider.grid-column-3xs{margin-left:calc(var(--gutter-12)*-2);}
.grid-divider.grid-3xs>*,.grid-divider.grid-column-3xs>*{padding-left:calc(var(--gutter-12)*2);}
.grid-divider.grid-3xs>:not(.first-column)::before,.grid-divider.grid-column-3xs>:not(.first-column)::before{left:var(--gutter-12);}
.grid-divider.grid-3xs.grid-stack>.grid-margin,.grid-divider.grid-row-3xs.grid-stack>.grid-margin{margin-top:calc(var(--gutter-12)*2);}
.grid-divider.grid-3xs.grid-stack>.grid-margin::before{top:calc(var(--gutter-12)*-1);left:calc(var(--gutter-12)*2);}
.grid-divider.grid-row-3xs.grid-stack>.grid-margin::before{top:calc(var(--gutter-12)*-1);}
.grid-divider.grid-column-3xs.grid-stack>.grid-margin::before{left:calc(var(--gutter-12)*2);}
.grid-divider.grid-2xs,.grid-divider.grid-column-2xs{margin-left:calc(var(--gutter-16)*-2);}
.grid-divider.grid-2xs>*,.grid-divider.grid-column-2xs>*{padding-left:calc(var(--gutter-16)*2);}
.grid-divider.grid-2xs>:not(.first-column)::before,.grid-divider.grid-column-2xs>:not(.first-column)::before{left:var(--gutter-16);}
.grid-divider.grid-2xs.grid-stack>.grid-margin,.grid-divider.grid-row-2xs.grid-stack>.grid-margin{margin-top:calc(var(--gutter-16)*2);}
.grid-divider.grid-2xs.grid-stack>.grid-margin::before{top:calc(var(--gutter-16)*-1);left:calc(var(--gutter-16)*2);}
.grid-divider.grid-row-2xs.grid-stack>.grid-margin::before{top:calc(var(--gutter-16)*-1);}
.grid-divider.grid-column-2xs.grid-stack>.grid-margin::before{left:calc(var(--gutter-16)*2);}
.grid-divider.grid-xs,.grid-divider.grid-column-xs{margin-left:calc(var(--gutter-24)*-2);}
.grid-divider.grid-xs>*,.grid-divider.grid-column-xs>*{padding-left:calc(var(--gutter-24)*2);}
.grid-divider.grid-xs>:not(.first-column)::before,.grid-divider.grid-column-xs>:not(.first-column)::before{left:var(--gutter-24);}
.grid-divider.grid-xs.grid-stack>.grid-margin,.grid-divider.grid-row-xs.grid-stack>.grid-margin{margin-top:calc(var(--gutter-24)*2);}
.grid-divider.grid-xs.grid-stack>.grid-margin::before{top:calc(var(--gutter-24)*-1);left:calc(var(--gutter-24)*2);}
.grid-divider.grid-row-xs.grid-stack>.grid-margin::before{top:calc(var(--gutter-24)*-1);}
.grid-divider.grid-column-xs.grid-stack>.grid-margin::before{left:calc(var(--gutter-24)*2);}
.grid-divider.grid-s,.grid-divider.grid-column-s{margin-left:calc(var(--gutter-32)*-2);}
.grid-divider.grid-s>*,.grid-divider.grid-column-s>*{padding-left:calc(var(--gutter-32)*2);}
.grid-divider.grid-s>:not(.first-column)::before,.grid-divider.grid-column-s>:not(.first-column)::before{left:var(--gutter-32);}
.grid-divider.grid-s.grid-stack>.grid-margin,.grid-divider.grid-row-s.grid-stack>.grid-margin{margin-top:calc(var(--gutter-32)*2);}
.grid-divider.grid-s.grid-stack>.grid-margin::before{top:calc(var(--gutter-32)*-1);left:calc(var(--gutter-32)*2);}
.grid-divider.grid-row-s.grid-stack>.grid-margin::before{top:calc(var(--gutter-32)*-1);}
.grid-divider.grid-column-s.grid-stack>.grid-margin::before{left:calc(var(--gutter-32)*2);}
.grid-divider.grid-m,.grid-divider.grid-column-m{margin-left:calc(var(--gutter-48)*-2);}
.grid-divider.grid-m>*,.grid-divider.grid-column-m>*{padding-left:calc(var(--gutter-48)*2);}
.grid-divider.grid-m>:not(.first-column)::before,.grid-divider.grid-column-m>:not(.first-column)::before{left:var(--gutter-48);}
.grid-divider.grid-m.grid-stack>.grid-margin,.grid-divider.grid-row-m.grid-stack>.grid-margin{margin-top:calc(var(--gutter-48)*2);}
.grid-divider.grid-m.grid-stack>.grid-margin::before{top:calc(var(--gutter-48)*-1);left:calc(var(--gutter-48)*2);}
.grid-divider.grid-row-m.grid-stack>.grid-margin::before{top:calc(var(--gutter-48)*-1);}
.grid-divider.grid-column-m.grid-stack>.grid-margin::before{left:calc(var(--gutter-48)*2);}
.grid-divider.grid-l,.grid-divider.grid-column-l{margin-left:calc(var(--gutter-50-64)*-2);}
.grid-divider.grid-l>*,.grid-divider.grid-column-l>*{padding-left:calc(var(--gutter-50-64)*2);}
.grid-divider.grid-l>:not(.first-column)::before,.grid-divider.grid-column-l>:not(.first-column)::before{left:var(--gutter-50-64);}
.grid-divider.grid-l.grid-stack>.grid-margin,.grid-divider.grid-row-l.grid-stack>.grid-margin{margin-top:calc(var(--gutter-50-64)*2);}
.grid-divider.grid-l.grid-stack>.grid-margin::before{top:calc(var(--gutter-50-64)*-1);left:calc(var(--gutter-50-64)*2);}
.grid-divider.grid-row-l.grid-stack>.grid-margin::before{top:calc(var(--gutter-50-64)*-1);}
.grid-divider.grid-column-l.grid-stack>.grid-margin::before{left:calc(var(--gutter-50-64)*2);}
.grid-divider.grid-xl,.grid-divider.grid-column-xl{margin-left:calc(var(--gutter-56-80)*-2);}
.grid-divider.grid-xl>*,.grid-divider.grid-column-xl>*{padding-left:calc(var(--gutter-56-80)*2);}
.grid-divider.grid-xl>:not(.first-column)::before,.grid-divider.grid-column-xl>:not(.first-column)::before{left:var(--gutter-56-80);}
.grid-divider.grid-xl.grid-stack>.grid-margin,.grid-divider.grid-row-xl.grid-stack>.grid-margin{margin-top:calc(var(--gutter-56-80)*2);}
.grid-divider.grid-xl.grid-stack>.grid-margin::before{top:calc(var(--gutter-56-80)*-1);left:calc(var(--gutter-56-80)*2);}
.grid-divider.grid-row-xl.grid-stack>.grid-margin::before{top:calc(var(--gutter-56-80)*-1);}
.grid-divider.grid-column-xl.grid-stack>.grid-margin::before{left:calc(var(--gutter-56-80)*2);}
.grid-divider.grid-2xl,.grid-divider.grid-column-2xl{margin-left:calc(var(--gutter-62-96)*-2);}
.grid-divider.grid-2xl>*,.grid-divider.grid-column-2xl>*{padding-left:calc(var(--gutter-62-96)*2);}
.grid-divider.grid-2xl>:not(.first-column)::before,.grid-divider.grid-column-2xl>:not(.first-column)::before{left:var(--gutter-62-96);}
.grid-divider.grid-2xl.grid-stack>.grid-margin,.grid-divider.grid-row-2xl.grid-stack>.grid-margin{margin-top:calc(var(--gutter-62-96)*2);}
.grid-divider.grid-2xl.grid-stack>.grid-margin::before{top:calc(var(--gutter-62-96)*-1);left:calc(var(--gutter-62-96)*2);}
.grid-divider.grid-row-2xl.grid-stack>.grid-margin::before{top:calc(var(--gutter-62-96)*-1);}
.grid-divider.grid-column-2xl.grid-stack>.grid-margin::before{left:calc(var(--gutter-62-96)*2);}
.grid-divider.grid-3xl,.grid-divider.grid-column-3xl{margin-left:calc(var(--gutter-72-128)*-2);}
.grid-divider.grid-3xl>*,.grid-divider.grid-column-3xl>*{padding-left:calc(var(--gutter-72-128)*2);}
.grid-divider.grid-3xl>:not(.first-column)::before,.grid-divider.grid-column-3xl>:not(.first-column)::before{left:var(--gutter-72-128);}
.grid-divider.grid-3xl.grid-stack>.grid-margin,.grid-divider.grid-row-3xl.grid-stack>.grid-margin{margin-top:calc(var(--gutter-72-128)*2);}
.grid-divider.grid-3xl.grid-stack>.grid-margin::before{top:calc(var(--gutter-72-128)*-1);left:calc(var(--gutter-72-128)*2);}
.grid-divider.grid-row-3xl.grid-stack>.grid-margin::before{top:calc(var(--gutter-72-128)*-1);}
.grid-divider.grid-column-3xl.grid-stack>.grid-margin::before{left:calc(var(--gutter-72-128)*2);}
.grid-divider.grid-4xl,.grid-divider.grid-column-4xl{margin-left:calc(var(--gutter-88-160)*-2);}
.grid-divider.grid-4xl>*,.grid-divider.grid-column-4xl>*{padding-left:calc(var(--gutter-88-160)*2);}
.grid-divider.grid-4xl>:not(.first-column)::before,.grid-divider.grid-column-4xl>:not(.first-column)::before{left:var(--gutter-88-160);}
.grid-divider.grid-4xl.grid-stack>.grid-margin,.grid-divider.grid-row-4xl.grid-stack>.grid-margin{margin-top:calc(var(--gutter-88-160)*2);}
.grid-divider.grid-4xl.grid-stack>.grid-margin::before{top:calc(var(--gutter-88-160)*-1);left:calc(var(--gutter-88-160)*2);}
.grid-divider.grid-row-4xl.grid-stack>.grid-margin::before{top:calc(var(--gutter-88-160)*-1);}
.grid-divider.grid-column-4xl.grid-stack>.grid-margin::before{left:calc(var(--gutter-88-160)*2);}
.grid-divider.grid-5xl,.grid-divider.grid-column-5xl{margin-left:calc(var(--gutter-112-192)*-2);}
.grid-divider.grid-5xl>*,.grid-divider.grid-column-5xl>*{padding-left:calc(var(--gutter-112-192)*2);}
.grid-divider.grid-5xl>:not(.first-column)::before,.grid-divider.grid-column-5xl>:not(.first-column)::before{left:var(--gutter-112-192);}
.grid-divider.grid-5xl.grid-stack>.grid-margin,.grid-divider.grid-row-5xl.grid-stack>.grid-margin{margin-top:calc(var(--gutter-112-192)*2);}
.grid-divider.grid-5xl.grid-stack>.grid-margin::before{top:calc(var(--gutter-112-192)*-1);left:calc(var(--gutter-112-192)*2);}
.grid-divider.grid-row-5xl.grid-stack>.grid-margin::before{top:calc(var(--gutter-112-192)*-1);}
.grid-divider.grid-column-5xl.grid-stack>.grid-margin::before{left:calc(var(--gutter-112-192)*2);}

.grid-divider.grid-collapse,.grid-divider.grid-column-collapse{margin-left:calc(var(--gutter-1) * -1);}
.grid-divider.grid-collapse>*,.grid-divider.grid-column-collapse>*{padding-left:var(--gutter-1);}
.grid-divider.grid-collapse>:not(.first-column)::before,.grid-divider.grid-column-collapse>:not(.first-column)::before{left:0;}
.grid-divider.grid-collapse.grid-stack>.grid-margin,.grid-divider.grid-row-collapse.grid-stack>.grid-margin{margin-top:var(--gutter-1);}
.grid-divider.grid-collapse.grid-stack>.grid-margin::before{top:calc(var(--gutter-1) * -1);left:0;}
.grid-divider.grid-row-collapse.grid-stack>.grid-margin::before{top:calc(var(--gutter-1) * -1);}
.grid-divider.grid-column-collapse.grid-stack>.grid-margin::before{left:0;}


/* component: grid-match */
.grid-match>*,.grid-item-match{display:flex;flex-wrap:wrap;}
.grid-match>*>:not([class*="width"]),.grid-item-match>:not([class*="width"]){box-sizing:border-box;width:100%;flex:auto;}


/* component: sidenav */
.sidenav {
border: none;
padding: 0;
width: var(--gutter-24);
height: var(--gutter-24);
}

.sidenav, .sidenav:hover, .sidenav:focus, .sidenav:active { background-color: transparent; }

.sidenav { color: var(--foreground-soft); }
.sidenav:hover { color: var(--foreground-heavy); }
.sidenav:focus { color: var(--foreground-heavy); }
.sidenav:active { color: var(--foreground-soft); }

.sidenav > * {
width: 100%;
height: auto;
}


/* component: dotnav */
.dotnav {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
list-style: none;
margin: 0;
padding: 0;
width: auto;
height: auto;
font-size: 0;
line-height: 0;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
color: inherit;
cursor: pointer;
}

.dotnav > * {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
list-style: none;
margin: 0;
padding: 0;
width: auto;
height: auto;
font-size: 0;
line-height: 0;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
color: inherit;
cursor: pointer;
}

.dotnav > * + * { margin-left: calc(var(--gutter-24) * 0.5); }

.dotnav > * > * {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
list-style: none;
margin: 0;
padding: 0;
width: var(--gutter-24);
height: var(--gutter-24);
font-size: 0;
line-height: 0;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
color: inherit;
cursor: pointer;
}

.dotnav > * > * { background-color: var(--foreground-slight); }
.dotnav > * > *:hover { background-color: var(--foreground-soft); }
.dotnav > * > *:focus { background-color: var(--foreground-soft); }
.dotnav > * > *:active { background-color: var(--foreground-heavy); }
.dotnav > .active > * { background-color: var(--foreground-heavy); }

.dotnav > * > * { border-radius: 0; }
.dotnav-square > * > * { border-radius: 0; }
.dotnav-disc > * > * { border-radius: 100%; }


/* component: lightbox */
.lightbox {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1010;
background: var(--color-black);
opacity: 0;
transition: opacity 0.15s linear;
touch-action: pinch-zoom;
}

.lightbox.open { display: block; opacity: 1; }
.lightbox-page { overflow: hidden; }
.lightbox-items { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }


.lightbox-items > * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
justify-content: center;
align-items: flex-start;
will-change: transform, opacity;
overflow: auto;
}

.lightbox-items > .active { display: flex; }

.lightbox-items-fit > * { align-items: center; }
.lightbox-items-fit > * > * { max-width: 100vw; max-height: 100vh; max-height: 100dvh; }

.lightbox-items.lightbox-items-fit .lightbox-zoom:hover { cursor: zoom-in; }
.lightbox-items:not(.lightbox-items-fit) .lightbox-zoom:hover { cursor: zoom-out; }

.lightbox-thumbnav-vertical :where(img, video) { max-width: 100px; }
.lightbox-thumbnav:not(.lightbox-thumbnav-vertical) :where(img, video) { max-height: 100px; }
.lightbox-thumbnav:empty,

.lightbox-dotnav:empty { display: none; }
.lightbox-caption:empty { display: none; }

.lightbox-caption {
padding: var(--gutter-14) var(--gutter-14);
background: var(--color-black-50);
color: var(--color-white-50);
}

.lightbox-caption > * { color: var(--color-white-50); }
.lightbox-counter:empty { display: none; }
.lightbox-iframe { width: 80%; height: 80%; }

.lightbox .lightbox-close,
.lightbox .slidenav {
width: var(--gutter-24);
height: var(--gutter-24);
padding: 0;
border-width: 0;
background-color: transparent;
color: var(--color-white);
}


/* component: animation */
[class*="animation-"] { animation: 0.5s ease-out both; }

.animation-fade { animation-name: fade; animation-duration: 0.8s; animation-timing-function: linear;}
.animation-kenburns { animation-name: kenburns; animation-duration: 15s; }
.animation-scale-down { animation-name: fade, scale-down; }
.animation-scale-up { animation-name: fade, scale-up; }
.animation-shake { animation-name: shake; }
.animation-slide-bottom { animation-name: fade, slide-bottom; }
.animation-slide-bottom-m { animation-name: fade, slide-bottom-m; }
.animation-slide-bottom-s { animation-name: fade, slide-bottom-s; }
.animation-slide-left { animation-name: fade, slide-left; }
.animation-slide-left-m { animation-name: fade, slide-left-m; }
.animation-slide-left-s { animation-name: fade, slide-left-s; }
.animation-slide-right { animation-name: fade, slide-right; }
.animation-slide-right-m { animation-name: fade, slide-right-m; }
.animation-slide-right-s { animation-name: fade, slide-right-s; }
.animation-slide-top { animation-name: fade, slide-top; }
.animation-slide-top-m { animation-name: fade, slide-top-m; }
.animation-slide-top-s { animation-name: fade, slide-top-s; }
.animation-spinner-rotate { animation: spinner-rotate 1.4s linear infinite; }
.animation-reverse { animation-direction: reverse; animation-timing-function: ease-in; }

.animation-fast { animation-duration: 0.1s; }
.animation-toggle:not(:hover):not(:focus) [class*="animation-"] { animation-name: none; }

@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes scale-up {
0% { transform: scale(0.9); }
100% { transform: scale(1); }
}

@keyframes scale-down {
0% { transform: scale(1.1); }
100% { transform: scale(1); }
}

@keyframes slide-top {
0% { transform: translateY(-100%); }
100% { transform: translateY(0); }
}

@keyframes slide-bottom {
0% { transform: translateY(100%); }
100% { transform: translateY(0); }
}

@keyframes slide-left {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}

@keyframes slide-right {
0% { transform: translateX(100%); }
100% { transform: translateX(0); }
}

@keyframes slide-top-s {
0% { transform: translateY(calc(var(--gutter-14) * -1)); }
100% { transform: translateY(0); }
}

@keyframes slide-bottom-s {
0% { transform: translateY(var(--gutter-14)); }
100% { transform: translateY(0); }
}

@keyframes slide-left-s {
0% { transform: translateX(calc(var(--gutter-14) * -1)); }
100% { transform: translateX(0); }
}

@keyframes slide-right-s {
0% { transform: translateX(var(--gutter-14)); }
100% { transform: translateX(0); }
}

@keyframes slide-top-m {
0% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}

@keyframes slide-bottom-m {
0% { transform: translateY(50px); }
100% { transform: translateY(0); }
}

@keyframes slide-left-m {
0% { transform: translateX(-50px); }
100% { transform: translateX(0); }
}

@keyframes slide-right-m {
0% { transform: translateX(50px); }
100% { transform: translateX(0); }
}

@keyframes kenburns {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}

@keyframes shake {
0%,
100% { transform: translateX(0); }
10% { transform: translateX(calc(var(--gutter-20) * -1)); }
20% { transform: translateX(var(--gutter-18)); }
30% { transform: translateX(calc(var(--gutter-16) * -1)); }
40% { transform: translateX(var(--gutter-14)); }
50% { transform: translateX(calc(var(--gutter-12) * -1)); }
60% { transform: translateX(var(--gutter-10)); }
70% { transform: translateX(calc(var(--gutter-8) * -1)); }
80% { transform: translateX(var(--gutter-6)); }
90% { transform: translateX(calc(var(--gutter-4) * -1)); }
}

@keyframes spinner-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


/* component: width */
[class*="width"] {
box-sizing: border-box;
width: 100%;
max-width: 100%;
}

.width-1-1,
.width-2-2,
.width-3-3,
.width-4-4,
.width-5-5,
.width-6-6,
.width-7-7,
.width-8-8,
.width-9-9,
.width-10-10,
.width-11-11,
.width-12-12 { width: 100%; }
.width-1-2 { width: 50%; }
.width-1-3 { width: calc(100% / 3); }
.width-2-3 { width: calc(200% / 3); }
.width-1-4 { width: 25%; }
.width-2-4 { width: 50%; }
.width-3-4 { width: 75%; }
.width-1-5 { width: 20%; }
.width-2-5 { width: 40%; }
.width-3-5 { width: 60%; }
.width-4-5 { width: 80%; }
.width-1-6 { width: calc(100% / 6); }
.width-2-6 { width: calc(200% / 6); }
.width-3-6 { width: 50%; }
.width-4-6 { width: calc(400% / 6); }
.width-5-6 { width: calc(500% / 6); }
.width-1-7 { width: calc(100% / 7); }
.width-2-7 { width: calc(200% / 7); }
.width-3-7 { width: calc(300% / 7); }
.width-4-7 { width: calc(400% / 7); }
.width-5-7 { width: calc(500% / 7); }
.width-6-7 { width: calc(600% / 7); }
.width-1-8 { width: 12.5%; }
.width-2-8 { width: 25%; }
.width-3-8 { width: 37.5%; }
.width-4-8 { width: 50%; }
.width-5-8 { width: 62.5%; }
.width-6-8 { width: 75%; }
.width-7-8 { width: 87.5%; }
.width-1-9 { width: calc(100% / 9); }
.width-2-9 { width: calc(200% / 9); }
.width-3-9 { width: calc(300% / 9); }
.width-4-9 { width: calc(400% / 9); }
.width-5-9 { width: calc(500% / 9); }
.width-6-9 { width: calc(600% / 9); }
.width-7-9 { width: calc(700% / 9); }
.width-8-9 { width: calc(800% / 9); }
.width-1-10 { width: 10%; }
.width-2-10 { width: 20%; }
.width-3-10 { width: 30%; }
.width-4-10 { width: 40%; }
.width-5-10 { width: 50%; }
.width-6-10 { width: 60%; }
.width-7-10 { width: 70%; }
.width-8-10 { width: 80%; }
.width-9-10 { width: 90%; }
.width-1-11 { width: calc(100% / 11); }
.width-2-11 { width: calc(200% / 11); }
.width-3-11 { width: calc(300% / 11); }
.width-4-11 { width: calc(400% / 11); }
.width-5-11 { width: calc(500% / 11); }
.width-6-11 { width: calc(600% / 11); }
.width-7-11 { width: calc(700% / 11); }
.width-8-11 { width: calc(800% / 11); }
.width-9-11 { width: calc(900% / 11); }
.width-10-11 { width: calc(1000% / 11); }
.width-1-12 { width: calc(100% / 12); }
.width-2-12 { width: calc(200% / 12); }
.width-3-12 { width: 25%; }
.width-4-12 { width: calc(400% / 12); }
.width-5-12 { width: calc(500% / 12); }
.width-6-12 { width: 50%; }
.width-7-12 { width: calc(700% / 12); }
.width-8-12 { width: calc(800% / 12); }
.width-9-12 { width: 75%; }
.width-10-12 { width: calc(1000% / 12); }
.width-11-12 { width: calc(1100% / 12); }

.width-19xs { width: var(--gutter-0); }
.width-18xs { width: var(--gutter-1); }
.width-17xs { width: var(--gutter-2); }
.width-16xs { width: var(--gutter-3); }
.width-15xs { width: var(--gutter-4); }
.width-14xs { width: var(--gutter-6); }
.width-13xs { width: var(--gutter-8); }
.width-12xs { width: var(--gutter-10); }
.width-11xs { width: var(--gutter-12); }
.width-10xs { width: var(--gutter-14); }
.width-9xs { width: var(--gutter-16); }
.width-8xs { width: var(--gutter-18); }
.width-7xs { width: var(--gutter-20); }
.width-6xs { width: var(--gutter-22); }
.width-5xs { width: var(--gutter-24); }
.width-4xs { width: var(--gutter-28); }
.width-3xs { width: var(--gutter-32); }
.width-2xs { width: var(--gutter-36); }
.width-xs { width: var(--gutter-40); }
.width-s { width: var(--gutter-44); }
.width-m { width: var(--gutter-48); }
.width-l { width: var(--gutter-50-52); }
.width-xl { width: var(--gutter-52-56); }
.width-2xl { width: var(--gutter-54-60); }
.width-3xl { width: var(--gutter-56-64); }
.width-4xl { width: var(--gutter-58-72); }
.width-5xl { width: var(--gutter-60-80); }
.width-6xl { width: var(--gutter-62-88); }
.width-7xl { width: var(--gutter-64-96); }
.width-8xl { width: var(--gutter-72-112); }
.width-9xl { width: var(--gutter-80-128); }
.width-10xl { width: var(--gutter-88-144); }
.width-11xl { width: var(--gutter-96-160); }
.width-12xl { width: var(--gutter-112-176); }
.width-13xl { width: var(--gutter-128-192); }
.width-14xl { width: var(--gutter-144-208); }
.width-15xl { width: var(--gutter-160-224); }
.width-16xl { width: var(--gutter-176-240); }
.width-17xl { width: var(--gutter-192-256); }
.width-18xl { width: var(--gutter-208-288); }
.width-19xl { width: var(--gutter-224-320); }

.width-auto { width: auto; }
.width-expand { flex: 1; min-width: var(--gutter-1); }

@media (min-width: 576px) {
.width-1-1\@s,
.width-2-2\@s,
.width-3-3\@s,
.width-4-4\@s,
.width-5-5\@s,
.width-6-6\@s,
.width-7-7\@s,
.width-8-8\@s,
.width-9-9\@s,
.width-10-10\@s,
.width-11-11\@s,
.width-12-12\@s { width: 100%; }
.width-1-2\@s { width: 50%; }
.width-1-3\@s { width: calc(100% / 3); }
.width-2-3\@s { width: calc(200% / 3); }
.width-1-4\@s { width: 25%; }
.width-2-4\@s { width: 50%; }
.width-3-4\@s { width: 75%; }
.width-1-5\@s { width: 20%; }
.width-2-5\@s { width: 40%; }
.width-3-5\@s { width: 60%; }
.width-4-5\@s { width: 80%; }
.width-1-6\@s { width: calc(100% / 6); }
.width-2-6\@s { width: calc(200% / 6); }
.width-3-6\@s { width: 50%; }
.width-4-6\@s { width: calc(400% / 6); }
.width-5-6\@s { width: calc(500% / 6); }
.width-1-7\@s { width: calc(100% / 7); }
.width-2-7\@s { width: calc(200% / 7); }
.width-3-7\@s { width: calc(300% / 7); }
.width-4-7\@s { width: calc(400% / 7); }
.width-5-7\@s { width: calc(500% / 7); }
.width-6-7\@s { width: calc(600% / 7); }
.width-1-8\@s { width: 12.5%; }
.width-2-8\@s { width: 25%; }
.width-3-8\@s { width: 37.5%; }
.width-4-8\@s { width: 50%; }
.width-5-8\@s { width: 62.5%; }
.width-6-8\@s { width: 75%; }
.width-7-8\@s { width: 87.5%; }
.width-1-9\@s { width: calc(100% / 9); }
.width-2-9\@s { width: calc(200% / 9); }
.width-3-9\@s { width: calc(300% / 9); }
.width-4-9\@s { width: calc(400% / 9); }
.width-5-9\@s { width: calc(500% / 9); }
.width-6-9\@s { width: calc(600% / 9); }
.width-7-9\@s { width: calc(700% / 9); }
.width-8-9\@s { width: calc(800% / 9); }
.width-1-10\@s { width: 10%; }
.width-2-10\@s { width: 20%; }
.width-3-10\@s { width: 30%; }
.width-4-10\@s { width: 40%; }
.width-5-10\@s { width: 50%; }
.width-6-10\@s { width: 60%; }
.width-7-10\@s { width: 70%; }
.width-8-10\@s { width: 80%; }
.width-9-10\@s { width: 90%; }
.width-1-11\@s { width: calc(100% / 11); }
.width-2-11\@s { width: calc(200% / 11); }
.width-3-11\@s { width: calc(300% / 11); }
.width-4-11\@s { width: calc(400% / 11); }
.width-5-11\@s { width: calc(500% / 11); }
.width-6-11\@s { width: calc(600% / 11); }
.width-7-11\@s { width: calc(700% / 11); }
.width-8-11\@s { width: calc(800% / 11); }
.width-9-11\@s { width: calc(900% / 11); }
.width-10-11\@s { width: calc(1000% / 11); }
.width-1-12\@s { width: calc(100% / 12); }
.width-2-12\@s { width: calc(200% / 12); }
.width-3-12\@s { width: 25%; }
.width-4-12\@s { width: calc(400% / 12); }
.width-5-12\@s { width: calc(500% / 12); }
.width-6-12\@s { width: 50%; }
.width-7-12\@s { width: calc(700% / 12); }
.width-8-12\@s { width: calc(800% / 12); }
.width-9-12\@s { width: 75%; }
.width-10-12\@s { width: calc(1000% / 12); }
.width-11-12\@s { width: calc(1100% / 12); }
.width-19xs\@s { width: var(--gutter-0); }
.width-18xs\@s { width: var(--gutter-1); }
.width-17xs\@s { width: var(--gutter-2); }
.width-16xs\@s { width: var(--gutter-3); }
.width-15xs\@s { width: var(--gutter-4); }
.width-14xs\@s { width: var(--gutter-6); }
.width-13xs\@s { width: var(--gutter-8); }
.width-12xs\@s { width: var(--gutter-10); }
.width-11xs\@s { width: var(--gutter-12); }
.width-10xs\@s { width: var(--gutter-14); }
.width-9xs\@s { width: var(--gutter-16); }
.width-8xs\@s { width: var(--gutter-18); }
.width-7xs\@s { width: var(--gutter-20); }
.width-6xs\@s { width: var(--gutter-22); }
.width-5xs\@s { width: var(--gutter-24); }
.width-4xs\@s { width: var(--gutter-28); }
.width-3xs\@s { width: var(--gutter-32); }
.width-2xs\@s { width: var(--gutter-36); }
.width-xs\@s { width: var(--gutter-40); }
.width-s\@s { width: var(--gutter-44); }
.width-m\@s { width: var(--gutter-48); }
.width-l\@s { width: var(--gutter-50-52); }
.width-xl\@s { width: var(--gutter-52-56); }
.width-2xl\@s { width: var(--gutter-54-60); }
.width-3xl\@s { width: var(--gutter-56-64); }
.width-4xl\@s { width: var(--gutter-58-72); }
.width-5xl\@s { width: var(--gutter-60-80); }
.width-6xl\@s { width: var(--gutter-62-88); }
.width-7xl\@s { width: var(--gutter-64-96); }
.width-8xl\@s { width: var(--gutter-72-112); }
.width-9xl\@s { width: var(--gutter-80-128); }
.width-10xl\@s { width: var(--gutter-88-144); }
.width-11xl\@s { width: var(--gutter-96-160); }
.width-12xl\@s { width: var(--gutter-112-176); }
.width-13xl\@s { width: var(--gutter-128-192); }
.width-14xl\@s { width: var(--gutter-144-208); }
.width-15xl\@s { width: var(--gutter-160-224); }
.width-16xl\@s { width: var(--gutter-176-240); }
.width-17xl\@s { width: var(--gutter-192-256); }
.width-18xl\@s { width: var(--gutter-208-288); }
.width-19xl\@s { width: var(--gutter-224-320); }
.width-auto\@s { width: auto; }
.width-expand\@s { flex: 1; min-width: var(--gutter-1); }
.width-1-1\@s,
.width-2-2\@s,
.width-3-3\@s,
.width-4-4\@s,
.width-5-5\@s,
.width-6-6\@s,
.width-7-7\@s,
.width-8-8\@s,
.width-9-9\@s,
.width-10-10\@s,
.width-11-11\@s,
.width-12-12\@s,
.width-1-2\@s,
.width-1-3\@s,
.width-2-3\@s,
.width-1-4\@s,
.width-2-4\@s,
.width-3-4\@s,
.width-1-5\@s,
.width-2-5\@s,
.width-3-5\@s,
.width-4-5\@s,
.width-1-6\@s,
.width-2-6\@s,
.width-3-6\@s,
.width-4-6\@s,
.width-5-6\@s,
.width-1-7\@s,
.width-2-7\@s,
.width-3-7\@s,
.width-4-7\@s,
.width-5-7\@s,
.width-6-7\@s,
.width-1-8\@s,
.width-2-8\@s,
.width-3-8\@s,
.width-4-8\@s,
.width-5-8\@s,
.width-6-8\@s,
.width-7-8\@s,
.width-1-9\@s,
.width-2-9\@s,
.width-3-9\@s,
.width-4-9\@s,
.width-5-9\@s,
.width-6-9\@s,
.width-7-9\@s,
.width-8-9\@s,
.width-1-10\@s,
.width-2-10\@s,
.width-3-10\@s,
.width-4-10\@s,
.width-5-10\@s,
.width-6-10\@s,
.width-7-10\@s,
.width-8-10\@s,
.width-9-10\@s,
.width-1-11\@s,
.width-2-11\@s,
.width-3-11\@s,
.width-4-11\@s,
.width-5-11\@s,
.width-6-11\@s,
.width-7-11\@s,
.width-8-11\@s,
.width-9-11\@s,
.width-10-11\@s,
.width-1-12\@s,
.width-2-12\@s,
.width-3-12\@s,
.width-4-12\@s,
.width-5-12\@s,
.width-6-12\@s,
.width-7-12\@s,
.width-8-12\@s,
.width-9-12\@s,
.width-10-12\@s,
.width-11-12\@s,
.width-13xs\@s,
.width-12xs\@s,
.width-11xs\@s,
.width-10xs\@s,
.width-9xs\@s,
.width-8xs\@s,
.width-7xs\@s,
.width-6xs\@s,
.width-5xs\@s,
.width-4xs\@s,
.width-3xs\@s,
.width-2xs\@s,
.width-xs\@s,
.width-s\@s,
.width-m\@s,
.width-l\@s,
.width-xl\@s,
.width-2xl\@s,
.width-3xl\@s,
.width-4xl\@s,
.width-5xl\@s,
.width-6xl\@s,
.width-7xl\@s,
.width-8xl\@s,
.width-9xl\@s,
.width-10xl\@s,
.width-11xl\@s,
.width-12xl\@s,
.width-13xl\@s,
.width-auto\@s { flex: initial; }
}

@media (min-width: 768px) {
.width-1-1\@m,
.width-2-2\@m,
.width-3-3\@m,
.width-4-4\@m,
.width-5-5\@m,
.width-6-6\@m,
.width-7-7\@m,
.width-8-8\@m,
.width-9-9\@m,
.width-10-10\@m,
.width-11-11\@m,
.width-12-12\@m { width: 100%; }
.width-1-2\@m { width: 50%; }
.width-1-3\@m { width: calc(100% / 3); }
.width-2-3\@m { width: calc(200% / 3); }
.width-1-4\@m { width: 25%; }
.width-2-4\@m { width: 50%; }
.width-3-4\@m { width: 75%; }
.width-1-5\@m { width: 20%; }
.width-2-5\@m { width: 40%; }
.width-3-5\@m { width: 60%; }
.width-4-5\@m { width: 80%; }
.width-1-6\@m { width: calc(100% / 6); }
.width-2-6\@m { width: calc(200% / 6); }
.width-3-6\@m { width: 50%; }
.width-4-6\@m { width: calc(400% / 6); }
.width-5-6\@m { width: calc(500% / 6); }
.width-1-7\@m { width: calc(100% / 7); }
.width-2-7\@m { width: calc(200% / 7); }
.width-3-7\@m { width: calc(300% / 7); }
.width-4-7\@m { width: calc(400% / 7); }
.width-5-7\@m { width: calc(500% / 7); }
.width-6-7\@m { width: calc(600% / 7); }
.width-1-8\@m { width: 12.5%; }
.width-2-8\@m { width: 25%; }
.width-3-8\@m { width: 37.5%; }
.width-4-8\@m { width: 50%; }
.width-5-8\@m { width: 62.5%; }
.width-6-8\@m { width: 75%; }
.width-7-8\@m { width: 87.5%; }
.width-1-9\@m { width: calc(100% / 9); }
.width-2-9\@m { width: calc(200% / 9); }
.width-3-9\@m { width: calc(300% / 9); }
.width-4-9\@m { width: calc(400% / 9); }
.width-5-9\@m { width: calc(500% / 9); }
.width-6-9\@m { width: calc(600% / 9); }
.width-7-9\@m { width: calc(700% / 9); }
.width-8-9\@m { width: calc(800% / 9); }
.width-1-10\@m { width: 10%; }
.width-2-10\@m { width: 20%; }
.width-3-10\@m { width: 30%; }
.width-4-10\@m { width: 40%; }
.width-5-10\@m { width: 50%; }
.width-6-10\@m { width: 60%; }
.width-7-10\@m { width: 70%; }
.width-8-10\@m { width: 80%; }
.width-9-10\@m { width: 90%; }
.width-1-11\@m { width: calc(100% / 11); }
.width-2-11\@m { width: calc(200% / 11); }
.width-3-11\@m { width: calc(300% / 11); }
.width-4-11\@m { width: calc(400% / 11); }
.width-5-11\@m { width: calc(500% / 11); }
.width-6-11\@m { width: calc(600% / 11); }
.width-7-11\@m { width: calc(700% / 11); }
.width-8-11\@m { width: calc(800% / 11); }
.width-9-11\@m { width: calc(900% / 11); }
.width-10-11\@m { width: calc(1000% / 11); }
.width-1-12\@m { width: calc(100% / 12); }
.width-2-12\@m { width: calc(200% / 12); }
.width-3-12\@m { width: 25%; }
.width-4-12\@m { width: calc(400% / 12); }
.width-5-12\@m { width: calc(500% / 12); }
.width-6-12\@m { width: 50%; }
.width-7-12\@m { width: calc(700% / 12); }
.width-8-12\@m { width: calc(800% / 12); }
.width-9-12\@m { width: 75%; }
.width-10-12\@m { width: calc(1000% / 12); }
.width-11-12\@m { width: calc(1100% / 12); }
.width-19xs\@m { width: var(--gutter-0); }
.width-18xs\@m { width: var(--gutter-1); }
.width-17xs\@m { width: var(--gutter-2); }
.width-16xs\@m { width: var(--gutter-3); }
.width-15xs\@m { width: var(--gutter-4); }
.width-14xs\@m { width: var(--gutter-6); }
.width-13xs\@m { width: var(--gutter-8); }
.width-12xs\@m { width: var(--gutter-10); }
.width-11xs\@m { width: var(--gutter-12); }
.width-10xs\@m { width: var(--gutter-14); }
.width-9xs\@m { width: var(--gutter-16); }
.width-8xs\@m { width: var(--gutter-18); }
.width-7xs\@m { width: var(--gutter-20); }
.width-6xs\@m { width: var(--gutter-22); }
.width-5xs\@m { width: var(--gutter-24); }
.width-4xs\@m { width: var(--gutter-28); }
.width-3xs\@m { width: var(--gutter-32); }
.width-2xs\@m { width: var(--gutter-36); }
.width-xs\@m { width: var(--gutter-40); }
.width-s\@m { width: var(--gutter-44); }
.width-m\@m { width: var(--gutter-48); }
.width-l\@m { width: var(--gutter-50-52); }
.width-xl\@m { width: var(--gutter-52-56); }
.width-2xl\@m { width: var(--gutter-54-60); }
.width-3xl\@m { width: var(--gutter-56-64); }
.width-4xl\@m { width: var(--gutter-58-72); }
.width-5xl\@m { width: var(--gutter-60-80); }
.width-6xl\@m { width: var(--gutter-62-88); }
.width-7xl\@m { width: var(--gutter-64-96); }
.width-8xl\@m { width: var(--gutter-72-112); }
.width-9xl\@m { width: var(--gutter-80-128); }
.width-10xl\@m { width: var(--gutter-88-144); }
.width-11xl\@m { width: var(--gutter-96-160); }
.width-12xl\@m { width: var(--gutter-112-176); }
.width-13xl\@m { width: var(--gutter-128-192); }
.width-14xl\@m { width: var(--gutter-144-208); }
.width-15xl\@m { width: var(--gutter-160-224); }
.width-16xl\@m { width: var(--gutter-176-240); }
.width-17xl\@m { width: var(--gutter-192-256); }
.width-18xl\@m { width: var(--gutter-208-288); }
.width-19xl\@m { width: var(--gutter-224-320); }
.width-auto\@m { width: auto; }
.width-expand\@m { flex: 1; min-width: var(--gutter-1); }
.width-1-1\@m,
.width-2-2\@m,
.width-3-3\@m,
.width-4-4\@m,
.width-5-5\@m,
.width-6-6\@m,
.width-7-7\@m,
.width-8-8\@m,
.width-9-9\@m,
.width-10-10\@m,
.width-11-11\@m,
.width-12-12\@m,
.width-1-2\@m,
.width-1-3\@m,
.width-2-3\@m,
.width-1-4\@m,
.width-2-4\@m,
.width-3-4\@m,
.width-1-5\@m,
.width-2-5\@m,
.width-3-5\@m,
.width-4-5\@m,
.width-1-6\@m,
.width-2-6\@m,
.width-3-6\@m,
.width-4-6\@m,
.width-5-6\@m,
.width-1-7\@m,
.width-2-7\@m,
.width-3-7\@m,
.width-4-7\@m,
.width-5-7\@m,
.width-6-7\@m,
.width-1-8\@m,
.width-2-8\@m,
.width-3-8\@m,
.width-4-8\@m,
.width-5-8\@m,
.width-6-8\@m,
.width-7-8\@m,
.width-1-9\@m,
.width-2-9\@m,
.width-3-9\@m,
.width-4-9\@m,
.width-5-9\@m,
.width-6-9\@m,
.width-7-9\@m,
.width-8-9\@m,
.width-1-10\@m,
.width-2-10\@m,
.width-3-10\@m,
.width-4-10\@m,
.width-5-10\@m,
.width-6-10\@m,
.width-7-10\@m,
.width-8-10\@m,
.width-9-10\@m,
.width-1-11\@m,
.width-2-11\@m,
.width-3-11\@m,
.width-4-11\@m,
.width-5-11\@m,
.width-6-11\@m,
.width-7-11\@m,
.width-8-11\@m,
.width-9-11\@m,
.width-10-11\@m,
.width-1-12\@m,
.width-2-12\@m,
.width-3-12\@m,
.width-4-12\@m,
.width-5-12\@m,
.width-6-12\@m,
.width-7-12\@m,
.width-8-12\@m,
.width-9-12\@m,
.width-10-12\@m,
.width-11-12\@m,
.width-13xs\@m,
.width-12xs\@m,
.width-11xs\@m,
.width-10xs\@m,
.width-9xs\@m,
.width-8xs\@m,
.width-7xs\@m,
.width-6xs\@m,
.width-5xs\@m,
.width-4xs\@m,
.width-3xs\@m,
.width-2xs\@m,
.width-xs\@m,
.width-s\@m,
.width-m\@m,
.width-l\@m,
.width-xl\@m,
.width-2xl\@m,
.width-3xl\@m,
.width-4xl\@m,
.width-5xl\@m,
.width-6xl\@m,
.width-7xl\@m,
.width-8xl\@m,
.width-9xl\@m,
.width-10xl\@m,
.width-11xl\@m,
.width-12xl\@m,
.width-13xl\@m,
.width-auto\@m { flex: initial; }
}

@media (min-width: 1024px) {
.width-1-1\@l,
.width-2-2\@l,
.width-3-3\@l,
.width-4-4\@l,
.width-5-5\@l,
.width-6-6\@l,
.width-7-7\@l,
.width-8-8\@l,
.width-9-9\@l,
.width-10-10\@l,
.width-11-11\@l,
.width-12-12\@l { width: 100%; }
.width-1-2\@l { width: 50%; }
.width-1-3\@l { width: calc(100% / 3); }
.width-2-3\@l { width: calc(200% / 3); }
.width-1-4\@l { width: 25%; }
.width-2-4\@l { width: 50%; }
.width-3-4\@l { width: 75%; }
.width-1-5\@l { width: 20%; }
.width-2-5\@l { width: 40%; }
.width-3-5\@l { width: 60%; }
.width-4-5\@l { width: 80%; }
.width-1-6\@l { width: calc(100% / 6); }
.width-2-6\@l { width: calc(200% / 6); }
.width-3-6\@l { width: 50%; }
.width-4-6\@l { width: calc(400% / 6); }
.width-5-6\@l { width: calc(500% / 6); }
.width-1-7\@l { width: calc(100% / 7); }
.width-2-7\@l { width: calc(200% / 7); }
.width-3-7\@l { width: calc(300% / 7); }
.width-4-7\@l { width: calc(400% / 7); }
.width-5-7\@l { width: calc(500% / 7); }
.width-6-7\@l { width: calc(600% / 7); }
.width-1-8\@l { width: 12.5%; }
.width-2-8\@l { width: 25%; }
.width-3-8\@l { width: 37.5%; }
.width-4-8\@l { width: 50%; }
.width-5-8\@l { width: 62.5%; }
.width-6-8\@l { width: 75%; }
.width-7-8\@l { width: 87.5%; }
.width-1-9\@l { width: calc(100% / 9); }
.width-2-9\@l { width: calc(200% / 9); }
.width-3-9\@l { width: calc(300% / 9); }
.width-4-9\@l { width: calc(400% / 9); }
.width-5-9\@l { width: calc(500% / 9); }
.width-6-9\@l { width: calc(600% / 9); }
.width-7-9\@l { width: calc(700% / 9); }
.width-8-9\@l { width: calc(800% / 9); }
.width-1-10\@l { width: 10%; }
.width-2-10\@l { width: 20%; }
.width-3-10\@l { width: 30%; }
.width-4-10\@l { width: 40%; }
.width-5-10\@l { width: 50%; }
.width-6-10\@l { width: 60%; }
.width-7-10\@l { width: 70%; }
.width-8-10\@l { width: 80%; }
.width-9-10\@l { width: 90%; }
.width-1-11\@l { width: calc(100% / 11); }
.width-2-11\@l { width: calc(200% / 11); }
.width-3-11\@l { width: calc(300% / 11); }
.width-4-11\@l { width: calc(400% / 11); }
.width-5-11\@l { width: calc(500% / 11); }
.width-6-11\@l { width: calc(600% / 11); }
.width-7-11\@l { width: calc(700% / 11); }
.width-8-11\@l { width: calc(800% / 11); }
.width-9-11\@l { width: calc(900% / 11); }
.width-10-11\@l { width: calc(1000% / 11); }
.width-1-12\@l { width: calc(100% / 12); }
.width-2-12\@l { width: calc(200% / 12); }
.width-3-12\@l { width: 25%; }
.width-4-12\@l { width: calc(400% / 12); }
.width-5-12\@l { width: calc(500% / 12); }
.width-6-12\@l { width: 50%; }
.width-7-12\@l { width: calc(700% / 12); }
.width-8-12\@l { width: calc(800% / 12); }
.width-9-12\@l { width: 75%; }
.width-10-12\@l { width: calc(1000% / 12); }
.width-11-12\@l { width: calc(1100% / 12); }
.width-19xs\@l { width: var(--gutter-0); }
.width-18xs\@l { width: var(--gutter-1); }
.width-17xs\@l { width: var(--gutter-2); }
.width-16xs\@l { width: var(--gutter-3); }
.width-15xs\@l { width: var(--gutter-4); }
.width-14xs\@l { width: var(--gutter-6); }
.width-13xs\@l { width: var(--gutter-8); }
.width-12xs\@l { width: var(--gutter-10); }
.width-11xs\@l { width: var(--gutter-12); }
.width-10xs\@l { width: var(--gutter-14); }
.width-9xs\@l { width: var(--gutter-16); }
.width-8xs\@l { width: var(--gutter-18); }
.width-7xs\@l { width: var(--gutter-20); }
.width-6xs\@l { width: var(--gutter-22); }
.width-5xs\@l { width: var(--gutter-24); }
.width-4xs\@l { width: var(--gutter-28); }
.width-3xs\@l { width: var(--gutter-32); }
.width-2xs\@l { width: var(--gutter-36); }
.width-xs\@l { width: var(--gutter-40); }
.width-s\@l { width: var(--gutter-44); }
.width-m\@l { width: var(--gutter-48); }
.width-l\@l { width: var(--gutter-50-52); }
.width-xl\@l { width: var(--gutter-52-56); }
.width-2xl\@l { width: var(--gutter-54-60); }
.width-3xl\@l { width: var(--gutter-56-64); }
.width-4xl\@l { width: var(--gutter-58-72); }
.width-5xl\@l { width: var(--gutter-60-80); }
.width-6xl\@l { width: var(--gutter-62-88); }
.width-7xl\@l { width: var(--gutter-64-96); }
.width-8xl\@l { width: var(--gutter-72-112); }
.width-9xl\@l { width: var(--gutter-80-128); }
.width-10xl\@l { width: var(--gutter-88-144); }
.width-11xl\@l { width: var(--gutter-96-160); }
.width-12xl\@l { width: var(--gutter-112-176); }
.width-13xl\@l { width: var(--gutter-128-192); }
.width-14xl\@l { width: var(--gutter-144-208); }
.width-15xl\@l { width: var(--gutter-160-224); }
.width-16xl\@l { width: var(--gutter-176-240); }
.width-17xl\@l { width: var(--gutter-192-256); }
.width-18xl\@l { width: var(--gutter-208-288); }
.width-19xl\@l { width: var(--gutter-224-320); }
.width-auto\@l { width: auto; }
.width-expand\@l { flex: 1; min-width: var(--gutter-1); }
.width-1-1\@l,
.width-2-2\@l,
.width-3-3\@l,
.width-4-4\@l,
.width-5-5\@l,
.width-6-6\@l,
.width-7-7\@l,
.width-8-8\@l,
.width-9-9\@l,
.width-10-10\@l,
.width-11-11\@l,
.width-12-12\@l,
.width-1-2\@l,
.width-1-3\@l,
.width-2-3\@l,
.width-1-4\@l,
.width-2-4\@l,
.width-3-4\@l,
.width-1-5\@l,
.width-2-5\@l,
.width-3-5\@l,
.width-4-5\@l,
.width-1-6\@l,
.width-2-6\@l,
.width-3-6\@l,
.width-4-6\@l,
.width-5-6\@l,
.width-1-7\@l,
.width-2-7\@l,
.width-3-7\@l,
.width-4-7\@l,
.width-5-7\@l,
.width-6-7\@l,
.width-1-8\@l,
.width-2-8\@l,
.width-3-8\@l,
.width-4-8\@l,
.width-5-8\@l,
.width-6-8\@l,
.width-7-8\@l,
.width-1-9\@l,
.width-2-9\@l,
.width-3-9\@l,
.width-4-9\@l,
.width-5-9\@l,
.width-6-9\@l,
.width-7-9\@l,
.width-8-9\@l,
.width-1-10\@l,
.width-2-10\@l,
.width-3-10\@l,
.width-4-10\@l,
.width-5-10\@l,
.width-6-10\@l,
.width-7-10\@l,
.width-8-10\@l,
.width-9-10\@l,
.width-1-11\@l,
.width-2-11\@l,
.width-3-11\@l,
.width-4-11\@l,
.width-5-11\@l,
.width-6-11\@l,
.width-7-11\@l,
.width-8-11\@l,
.width-9-11\@l,
.width-10-11\@l,
.width-1-12\@l,
.width-2-12\@l,
.width-3-12\@l,
.width-4-12\@l,
.width-5-12\@l,
.width-6-12\@l,
.width-7-12\@l,
.width-8-12\@l,
.width-9-12\@l,
.width-10-12\@l,
.width-11-12\@l,
.width-13xs\@l,
.width-12xs\@l,
.width-11xs\@l,
.width-10xs\@l,
.width-9xs\@l,
.width-8xs\@l,
.width-7xs\@l,
.width-6xs\@l,
.width-5xs\@l,
.width-4xs\@l,
.width-3xs\@l,
.width-2xs\@l,
.width-xs\@l,
.width-s\@l,
.width-m\@l,
.width-l\@l,
.width-xl\@l,
.width-2xl\@l,
.width-3xl\@l,
.width-4xl\@l,
.width-5xl\@l,
.width-6xl\@l,
.width-7xl\@l,
.width-8xl\@l,
.width-9xl\@l,
.width-10xl\@l,
.width-11xl\@l,
.width-12xl\@l,
.width-13xl\@l,
.width-auto\@l { flex: initial; }
}

@media (min-width: 1280px) {
.width-1-1\@xl,
.width-2-2\@xl,
.width-3-3\@xl,
.width-4-4\@xl,
.width-5-5\@xl,
.width-6-6\@xl,
.width-7-7\@xl,
.width-8-8\@xl,
.width-9-9\@xl,
.width-10-10\@xl,
.width-11-11\@xl,
.width-12-12\@xl { width: 100%; }
.width-1-2\@xl { width: 50%; }
.width-1-3\@xl { width: calc(100% / 3); }
.width-2-3\@xl { width: calc(200% / 3); }
.width-1-4\@xl { width: 25%; }
.width-2-4\@xl { width: 50%; }
.width-3-4\@xl { width: 75%; }
.width-1-5\@xl { width: 20%; }
.width-2-5\@xl { width: 40%; }
.width-3-5\@xl { width: 60%; }
.width-4-5\@xl { width: 80%; }
.width-1-6\@xl { width: calc(100% / 6); }
.width-2-6\@xl { width: calc(200% / 6); }
.width-3-6\@xl { width: 50%; }
.width-4-6\@xl { width: calc(400% / 6); }
.width-5-6\@xl { width: calc(500% / 6); }
.width-1-7\@xl { width: calc(100% / 7); }
.width-2-7\@xl { width: calc(200% / 7); }
.width-3-7\@xl { width: calc(300% / 7); }
.width-4-7\@xl { width: calc(400% / 7); }
.width-5-7\@xl { width: calc(500% / 7); }
.width-6-7\@xl { width: calc(600% / 7); }
.width-1-8\@xl { width: 12.5%; }
.width-2-8\@xl { width: 25%; }
.width-3-8\@xl { width: 37.5%; }
.width-4-8\@xl { width: 50%; }
.width-5-8\@xl { width: 62.5%; }
.width-6-8\@xl { width: 75%; }
.width-7-8\@xl { width: 87.5%; }
.width-1-9\@xl { width: calc(100% / 9); }
.width-2-9\@xl { width: calc(200% / 9); }
.width-3-9\@xl { width: calc(300% / 9); }
.width-4-9\@xl { width: calc(400% / 9); }
.width-5-9\@xl { width: calc(500% / 9); }
.width-6-9\@xl { width: calc(600% / 9); }
.width-7-9\@xl { width: calc(700% / 9); }
.width-8-9\@xl { width: calc(800% / 9); }
.width-1-10\@xl { width: 10%; }
.width-2-10\@xl { width: 20%; }
.width-3-10\@xl { width: 30%; }
.width-4-10\@xl { width: 40%; }
.width-5-10\@xl { width: 50%; }
.width-6-10\@xl { width: 60%; }
.width-7-10\@xl { width: 70%; }
.width-8-10\@xl { width: 80%; }
.width-9-10\@xl { width: 90%; }
.width-1-11\@xl { width: calc(100% / 11); }
.width-2-11\@xl { width: calc(200% / 11); }
.width-3-11\@xl { width: calc(300% / 11); }
.width-4-11\@xl { width: calc(400% / 11); }
.width-5-11\@xl { width: calc(500% / 11); }
.width-6-11\@xl { width: calc(600% / 11); }
.width-7-11\@xl { width: calc(700% / 11); }
.width-8-11\@xl { width: calc(800% / 11); }
.width-9-11\@xl { width: calc(900% / 11); }
.width-10-11\@xl { width: calc(1000% / 11); }
.width-1-12\@xl { width: calc(100% / 12); }
.width-2-12\@xl { width: calc(200% / 12); }
.width-3-12\@xl { width: 25%; }
.width-4-12\@xl { width: calc(400% / 12); }
.width-5-12\@xl { width: calc(500% / 12); }
.width-6-12\@xl { width: 50%; }
.width-7-12\@xl { width: calc(700% / 12); }
.width-8-12\@xl { width: calc(800% / 12); }
.width-9-12\@xl { width: 75%; }
.width-10-12\@xl { width: calc(1000% / 12); }
.width-11-12\@xl { width: calc(1100% / 12); }
.width-19xs\@xl { width: var(--gutter-0); }
.width-18xs\@xl { width: var(--gutter-1); }
.width-17xs\@xl { width: var(--gutter-2); }
.width-16xs\@xl { width: var(--gutter-3); }
.width-15xs\@xl { width: var(--gutter-4); }
.width-14xs\@xl { width: var(--gutter-6); }
.width-13xs\@xl { width: var(--gutter-8); }
.width-12xs\@xl { width: var(--gutter-10); }
.width-11xs\@xl { width: var(--gutter-12); }
.width-10xs\@xl { width: var(--gutter-14); }
.width-9xs\@xl { width: var(--gutter-16); }
.width-8xs\@xl { width: var(--gutter-18); }
.width-7xs\@xl { width: var(--gutter-20); }
.width-6xs\@xl { width: var(--gutter-22); }
.width-5xs\@xl { width: var(--gutter-24); }
.width-4xs\@xl { width: var(--gutter-28); }
.width-3xs\@xl { width: var(--gutter-32); }
.width-2xs\@xl { width: var(--gutter-36); }
.width-xs\@xl { width: var(--gutter-40); }
.width-s\@xl { width: var(--gutter-44); }
.width-m\@xl { width: var(--gutter-48); }
.width-l\@xl { width: var(--gutter-50-52); }
.width-xl\@xl { width: var(--gutter-52-56); }
.width-2xl\@xl { width: var(--gutter-54-60); }
.width-3xl\@xl { width: var(--gutter-56-64); }
.width-4xl\@xl { width: var(--gutter-58-72); }
.width-5xl\@xl { width: var(--gutter-60-80); }
.width-6xl\@xl { width: var(--gutter-62-88); }
.width-7xl\@xl { width: var(--gutter-64-96); }
.width-8xl\@xl { width: var(--gutter-72-112); }
.width-9xl\@xl { width: var(--gutter-80-128); }
.width-10xl\@xl { width: var(--gutter-88-144); }
.width-11xl\@xl { width: var(--gutter-96-160); }
.width-12xl\@xl { width: var(--gutter-112-176); }
.width-13xl\@xl { width: var(--gutter-128-192); }
.width-14xl\@xl { width: var(--gutter-144-208); }
.width-15xl\@xl { width: var(--gutter-160-224); }
.width-16xl\@xl { width: var(--gutter-176-240); }
.width-17xl\@xl { width: var(--gutter-192-256); }
.width-18xl\@xl { width: var(--gutter-208-288); }
.width-19xl\@xl { width: var(--gutter-224-320); }
.width-auto\@xl { width: auto; }
.width-expand\@xl { flex: 1; min-width: var(--gutter-1); }
.width-1-1\@xl,
.width-2-2\@xl,
.width-3-3\@xl,
.width-4-4\@xl,
.width-5-5\@xl,
.width-6-6\@xl,
.width-7-7\@xl,
.width-8-8\@xl,
.width-9-9\@xl,
.width-10-10\@xl,
.width-11-11\@xl,
.width-12-12\@xl,
.width-1-2\@xl,
.width-1-3\@xl,
.width-2-3\@xl,
.width-1-4\@xl,
.width-2-4\@xl,
.width-3-4\@xl,
.width-1-5\@xl,
.width-2-5\@xl,
.width-3-5\@xl,
.width-4-5\@xl,
.width-1-6\@xl,
.width-2-6\@xl,
.width-3-6\@xl,
.width-4-6\@xl,
.width-5-6\@xl,
.width-1-7\@xl,
.width-2-7\@xl,
.width-3-7\@xl,
.width-4-7\@xl,
.width-5-7\@xl,
.width-6-7\@xl,
.width-1-8\@xl,
.width-2-8\@xl,
.width-3-8\@xl,
.width-4-8\@xl,
.width-5-8\@xl,
.width-6-8\@xl,
.width-7-8\@xl,
.width-1-9\@xl,
.width-2-9\@xl,
.width-3-9\@xl,
.width-4-9\@xl,
.width-5-9\@xl,
.width-6-9\@xl,
.width-7-9\@xl,
.width-8-9\@xl,
.width-1-10\@xl,
.width-2-10\@xl,
.width-3-10\@xl,
.width-4-10\@xl,
.width-5-10\@xl,
.width-6-10\@xl,
.width-7-10\@xl,
.width-8-10\@xl,
.width-9-10\@xl,
.width-1-11\@xl,
.width-2-11\@xl,
.width-3-11\@xl,
.width-4-11\@xl,
.width-5-11\@xl,
.width-6-11\@xl,
.width-7-11\@xl,
.width-8-11\@xl,
.width-9-11\@xl,
.width-10-11\@xl,
.width-1-12\@xl,
.width-2-12\@xl,
.width-3-12\@xl,
.width-4-12\@xl,
.width-5-12\@xl,
.width-6-12\@xl,
.width-7-12\@xl,
.width-8-12\@xl,
.width-9-12\@xl,
.width-10-12\@xl,
.width-11-12\@xl,
.width-13xs\@xl,
.width-12xs\@xl,
.width-11xs\@xl,
.width-10xs\@xl,
.width-9xs\@xl,
.width-8xs\@xl,
.width-7xs\@xl,
.width-6xs\@xl,
.width-5xs\@xl,
.width-4xs\@xl,
.width-3xs\@xl,
.width-2xs\@xl,
.width-xs\@xl,
.width-s\@xl,
.width-m\@xl,
.width-l\@xl,
.width-xl\@xl,
.width-2xl\@xl,
.width-3xl\@xl,
.width-4xl\@xl,
.width-5xl\@xl,
.width-6xl\@xl,
.width-7xl\@xl,
.width-8xl\@xl,
.width-9xl\@xl,
.width-10xl\@xl,
.width-11xl\@xl,
.width-12xl\@xl,
.width-13xl\@xl,
.width-auto\@xl { flex: initial; }
}

.width-fit-content { width: fit-content; }
.width-max-content { width: max-content; }
.width-min-content { width: min-content; }


/* component: max-width */
.max-width-none { max-width: none; }


/* component: height */

[class*="height"] { box-sizing: border-box; }

.height-1-1 { height: 100%; }

.height-viewport { min-height: 100vh; min-height: 100dvh; }
.height-viewport-2 { min-height: 200vh; min-height: 200dvh; }
.height-viewport-3 { min-height: 300vh; min-height: 300dvh; }
.height-viewport-4 { min-height: 400vh; min-height: 400dvh; }

.height-s { height: 150px; }
.height-m { height: 300px; }
.height-l { height: 450px; }

.height-max-s { max-height: 150px; }
.height-max-m { max-height: 300px; }
.height-max-l { max-height: 450px; }


/* component: text */

.font-serif { font-family: var(--font-serif); }

[class*="font-sans"] { font-family: var(--font-sans-serif); }

.font-monospace { font-family: var(--font-monospace); }
.font-code { font-family: var(--font-code); }
.font-cursive { font-family: var(--font-cursive); }
.font-fantasy { font-family: var(--font-fantasy); }

.text-xs { font-size: var(--gutter-12); line-height: var(--leading-xl); }
.text-s { font-size: var(--gutter-14); line-height: var(--leading-l); }
.text-m { font-size: var(--gutter-16); line-height: var(--leading-m); }
.text-l { font-size: var(--gutter-18); line-height: var(--leading-s); }
.text-xl { font-size: var(--gutter-20); line-height: var(--leading-xs); }

.leading-19xs { line-height: var(--leading-19xs); }
.leading-18xs { line-height: var(--leading-18xs); }
.leading-17xs { line-height: var(--leading-17xs); }
.leading-16xs { line-height: var(--leading-16xs); }
.leading-15xs { line-height: var(--leading-15xs); }
.leading-14xs { line-height: var(--leading-14xs); }
.leading-13xs { line-height: var(--leading-13xs); }
.leading-12xs { line-height: var(--leading-12xs); }
.leading-11xs { line-height: var(--leading-11xs); }
.leading-10xs { line-height: var(--leading-10xs); }
.leading-9xs { line-height: var(--leading-9xs); }
.leading-8xs { line-height: var(--leading-8xs); }
.leading-7xs { line-height: var(--leading-7xs); }
.leading-6xs { line-height: var(--leading-6xs); }
.leading-5xs { line-height: var(--leading-5xs); }
.leading-4xs { line-height: var(--leading-4xs); }
.leading-3xs { line-height: var(--leading-3xs); }
.leading-2xs { line-height: var(--leading-2xs); }
.leading-xs { line-height: var(--leading-xs); }
.leading-s { line-height: var(--leading-s); }
.leading-m { line-height: var(--leading-m); }
.leading-l { line-height: var(--leading-l); }
.leading-xl { line-height: var(--leading-xl); }
.leading-2xl { line-height: var(--leading-2xl); }
.leading-3xl { line-height: var(--leading-3xl); }
.leading-4xl { line-height: var(--leading-4xl); }
.leading-5xl { line-height: var(--leading-5xl); }
.leading-6xl { line-height: var(--leading-6xl); }
.leading-7xl { line-height: var(--leading-7xl); }
.leading-8xl { line-height: var(--leading-8xl); }
.leading-9xl { line-height: var(--leading-9xl); }
.leading-10xl { line-height: var(--leading-10xl); }
.leading-11xl { line-height: var(--leading-11xl); }
.leading-12xl { line-height: var(--leading-12xl); }
.leading-13xl { line-height: var(--leading-13xl); }
.leading-14xl { line-height: var(--leading-14xl); }
.leading-15xl { line-height: var(--leading-15xl); }
.leading-16xl { line-height: var(--leading-16xl); }
.leading-17xl { line-height: var(--leading-17xl); }
.leading-18xl { line-height: var(--leading-18xl); }
.leading-19xl { line-height: var(--leading-19xl); }


.text-thin { font-weight: 100; }
.text-extralight { font-weight: 200; }
.text-light { font-weight: 300; }
.text-regular { font-weight: 400; }
.text-book { font-weight: 500; }
.text-semibold { font-weight: 600; }
.text-bold { font-weight: 700; }
.text-extrabold { font-weight: 800; }
.text-bolder { font-weight: 900; }
.text-italic { font-style: italic; }
.text-oblique { font-style: oblique -90deg; }

.font-style-normal { font-style: normal; }

.text-capitalize { text-transform: capitalize !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-transform-none { text-transform: none !important; }

.text-decoration-none { text-decoration: none !important; }

.text-stroke { -webkit-text-stroke: calc(1.4px + 0.002em); -webkit-text-fill-color: transparent; }

.text-black { color: var(--color-black) !important; }
.text-gray { color: var(--color-gray) !important; }
.text-white { color: var(--color-white) !important; }
.text-muted { color: var(--foreground-muted) !important; }
.text-primary { color: var(--foreground-primary) !important; }
.text-secondary { color: var(--foreground-secondary) !important; }
.text-tertiary { color: var(--foreground-tertiary) !important; }
.text-danger { color: var(--foreground-danger) !important; }
.text-warning { color: var(--foreground-warning) !important; }
.text-accent { color: var(--foreground-accent) !important; }
.text-success { color: var(--foreground-success) !important; }
.text-info { color: var(--foreground-info) !important; }
.text-action { color: var(--foreground-action) !important; }
.text-urgent { color: var(--foreground-urgent) !important; }
.text-emphasis { color: var(--foreground-emphasis) !important; }

.text-background { -webkit-background-clip: text; color: transparent !important; display: inline-block; background-color: var(--color-action-medium); background-image: linear-gradient(90deg, var(--color-action-medium) 0%, var(--color-success-medium) 100%); }

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

@media (min-width: 576px) {
.text-left\@s { text-align: left !important; }
.text-right\@s { text-align: right !important; }
.text-center\@s { text-align: center !important; }
}

@media (min-width: 768px) {
.text-left\@m { text-align: left !important; }
.text-right\@m { text-align: right !important; }
.text-center\@m { text-align: center !important; }
}

@media (min-width: 1024px) {
.text-left\@l { text-align: left !important; }
.text-right\@l { text-align: right !important; }
.text-center\@l { text-align: center !important; }
}

@media (min-width: 1280px) {
.text-left\@xl { text-align: left !important; }
.text-right\@xl { text-align: right !important; }
.text-center\@xl { text-align: center !important; }
}

.text-top { vertical-align: top !important; }
.text-middle { vertical-align: middle !important; }
.text-bottom { vertical-align: bottom !important; }
.text-baseline { vertical-align: baseline !important; }

.text-nowrap { white-space: nowrap; }

.text-truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

th.text-truncate,
td.text-truncate { max-width: 0; }

.text-break { overflow-wrap: break-word; }

th.text-break,
td.text-break { word-break: break-word; }

.text-stroke { -webkit-text-stroke: calc(1.4px + 0.002em); -webkit-text-fill-color: transparent; }


/* component: cover */

[data-cover]:where(canvas, iframe, svg) {
max-width: none;
position: absolute;
left: 50%;
top: 50%;
--position-translate-x: -50%;
--position-translate-y: -50%;
transform: translate(var(--position-translate-x), var(--position-translate-y));
}

iframe[data-cover] { pointer-events: none; }

[data-cover]:where(img, video) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
object-fit: cover;
object-position: center;
}

.cover-container { overflow: hidden; position: relative; }


/* component: background-color */
.background-transparent { background-color: var(--color-transparent); }


.background-black { background-color: var(--color-black); color: var(--color-black-foreground); }
.background-white { background-color: var(--color-white); color: var(--color-white-foreground); }

.background-black-medium { background-color: var(--color-black-medium); color: var(--color-black-medium-foreground); }
.background-black-light { background-color: var(--color-black-light); color: var(--color-black-light-foreground); }
.background-black-xlight { background-color: var(--color-black-xlight); color: var(--color-black-xlight-foreground); }
.background-black-2xlight { background-color: var(--color-black-2xlight); color: var(--color-black-2xlight-foreground); }
.background-black-3xlight { background-color: var(--color-black-3xlight); color: var(--color-black-3xlight-foreground); }
.background-black-4xlight { background-color: var(--color-black-4xlight); color: var(--color-black-4xlight-foreground); }
.background-black-5xlight { background-color: var(--color-black-5xlight); color: var(--color-black-5xlight-foreground); }
.background-black-6xlight { background-color: var(--color-black-6xlight); color: var(--color-black-6xlight-foreground); }

.background-gray-3xdark { background-color: var(--color-gray-3xdark); color: var(--color-gray-3xdark-foreground); }
.background-gray-2xdark { background-color: var(--color-gray-2xdark); color: var(--color-gray-2xdark-foreground); }
.background-gray-xdark { background-color: var(--color-gray-xdark); color: var(--color-gray-xdark-foreground); }
.background-gray-dark { background-color: var(--color-gray-dark); color: var(--color-gray-dark-foreground); }
.background-gray, .background-gray-medium { background-color: var(--color-gray-medium); color: var(--color-gray-medium-foreground); }
.background-gray-light { background-color: var(--color-gray-light); color: var(--color-gray-light-foreground); }
.background-gray-xlight { background-color: var(--color-gray-xlight); color: var(--color-gray-xlight-foreground); }
.background-gray-2xlight { background-color: var(--color-gray-2xlight); color: var(--color-gray-2xlight-foreground); }
.background-gray-3xlight { background-color: var(--color-gray-3xlight); color: var(--color-gray-3xlight-foreground); }

.background-muted-3xdark { background-color: var(--color-muted-3xdark); color: var(--color-muted-3xdark-foreground); }
.background-muted-2xdark { background-color: var(--color-muted-2xdark); color: var(--color-muted-2xdark-foreground); }
.background-muted-xdark { background-color: var(--color-muted-xdark); color: var(--color-muted-xdark-foreground); }
.background-muted-dark { background-color: var(--color-muted-dark); color: var(--color-muted-dark-foreground); }
.background-muted, .background-muted-medium { background-color: var(--color-muted-medium); color: var(--color-muted-medium-foreground); }
.background-muted-light { background-color: var(--color-muted-light); color: var(--color-muted-light-foreground); }
.background-muted-xlight { background-color: var(--color-muted-xlight); color: var(--color-muted-xlight-foreground); }
.background-muted-2xlight { background-color: var(--color-muted-2xlight); color: var(--color-muted-2xlight-foreground); }
.background-muted-3xlight { background-color: var(--color-muted-3xlight); color: var(--color-muted-3xlight-foreground); }

.background-white-6xdark { background-color: var(--color-white-6xdark); color: var(--color-white-6xdark-foreground); }
.background-white-5xdark { background-color: var(--color-white-5xdark); color: var(--color-white-5xdark-foreground); }
.background-white-4xdark { background-color: var(--color-white-4xdark); color: var(--color-white-4xdark-foreground); }
.background-white-3xdark { background-color: var(--color-white-3xdark); color: var(--color-white-3xdark-foreground); }
.background-white-2xdark { background-color: var(--color-white-2xdark); color: var(--color-white-2xdark-foreground); }
.background-white-xdark { background-color: var(--color-white-xdark); color: var(--color-white-xdark-foreground); }
.background-white-dark { background-color: var(--color-white-dark); color: var(--color-white-dark-foreground); }
.background-white-medium { background-color: var(--color-white-medium); color: var(--color-white-medium-foreground); }

.background-primary-3xdark { background-color: var(--color-primary-3xdark); color: var(--color-primary-3xdark-foreground); }
.background-primary-2xdark { background-color: var(--color-primary-2xdark); color: var(--color-primary-2xdark-foreground); }
.background-primary-xdark { background-color: var(--color-primary-xdark); color: var(--color-primary-xdark-foreground); }
.background-primary-dark { background-color: var(--color-primary-dark); color: var(--color-primary-dark-foreground); }
.background-primary, .background-primary-medium { background-color: var(--color-primary-medium); color: var(--color-primary-medium-foreground); }
.background-primary-light { background-color: var(--color-primary-light); color: var(--color-primary-light-foreground); }
.background-primary-xlight { background-color: var(--color-primary-xlight); color: var(--color-primary-xlight-foreground); }
.background-primary-2xlight { background-color: var(--color-primary-2xlight); color: var(--color-primary-2xlight-foreground); }
.background-primary-3xlight { background-color: var(--color-primary-3xlight); color: var(--color-primary-3xlight-foreground); }

.background-secondary-3xdark { background-color: var(--color-secondary-3xdark); color: var(--color-secondary-3xdark-foreground); }
.background-secondary-2xdark { background-color: var(--color-secondary-2xdark); color: var(--color-secondary-2xdark-foreground); }
.background-secondary-xdark { background-color: var(--color-secondary-xdark); color: var(--color-secondary-xdark-foreground); }
.background-secondary-dark { background-color: var(--color-secondary-dark); color: var(--color-secondary-dark-foreground); }
.background-secondary, .background-secondary-medium { background-color: var(--color-secondary-medium); color: var(--color-secondary-medium-foreground); }
.background-secondary-light { background-color: var(--color-secondary-light); color: var(--color-secondary-light-foreground); }
.background-secondary-xlight { background-color: var(--color-secondary-xlight); color: var(--color-secondary-xlight-foreground); }
.background-secondary-2xlight { background-color: var(--color-secondary-2xlight); color: var(--color-secondary-2xlight-foreground); }
.background-secondary-3xlight { background-color: var(--color-secondary-3xlight); color: var(--color-secondary-3xlight-foreground); }

.background-tertiary-3xdark { background-color: var(--color-tertiary-3xdark); color: var(--color-tertiary-3xdark-foreground); }
.background-tertiary-2xdark { background-color: var(--color-tertiary-2xdark); color: var(--color-tertiary-2xdark-foreground); }
.background-tertiary-xdark { background-color: var(--color-tertiary-xdark); color: var(--color-tertiary-xdark-foreground); }
.background-tertiary-dark { background-color: var(--color-tertiary-dark); color: var(--color-tertiary-dark-foreground); }
.background-tertiary, .background-tertiary-medium { background-color: var(--color-tertiary-medium); color: var(--color-tertiary-medium-foreground); }
.background-tertiary-light { background-color: var(--color-tertiary-light); color: var(--color-tertiary-light-foreground); }
.background-tertiary-xlight { background-color: var(--color-tertiary-xlight); color: var(--color-tertiary-xlight-foreground); }
.background-tertiary-2xlight { background-color: var(--color-tertiary-2xlight); color: var(--color-tertiary-2xlight-foreground); }
.background-tertiary-3xlight { background-color: var(--color-tertiary-3xlight); color: var(--color-tertiary-3xlight-foreground); }

.background-danger-3xdark { background-color: var(--color-danger-3xdark); color: var(--color-danger-3xdark-foreground); }
.background-danger-2xdark { background-color: var(--color-danger-2xdark); color: var(--color-danger-2xdark-foreground); }
.background-danger-xdark { background-color: var(--color-danger-xdark); color: var(--color-danger-xdark-foreground); }
.background-danger-dark { background-color: var(--color-danger-dark); color: var(--color-danger-dark-foreground); }
.background-danger, .background-danger-medium { background-color: var(--color-danger-medium); color: var(--color-danger-medium-foreground); }
.background-danger-light { background-color: var(--color-danger-light); color: var(--color-danger-light-foreground); }
.background-danger-xlight { background-color: var(--color-danger-xlight); color: var(--color-danger-xlight-foreground); }
.background-danger-2xlight { background-color: var(--color-danger-2xlight); color: var(--color-danger-2xlight-foreground); }
.background-danger-3xlight { background-color: var(--color-danger-3xlight); color: var(--color-danger-3xlight-foreground); }

.background-warning-3xdark { background-color: var(--color-warning-3xdark); color: var(--color-warning-3xdark-foreground); }
.background-warning-2xdark { background-color: var(--color-warning-2xdark); color: var(--color-warning-2xdark-foreground); }
.background-warning-xdark { background-color: var(--color-warning-xdark); color: var(--color-warning-xdark-foreground); }
.background-warning-dark { background-color: var(--color-warning-dark); color: var(--color-warning-dark-foreground); }
.background-warning, .background-warning-medium { background-color: var(--color-warning-medium); color: var(--color-warning-medium-foreground); }
.background-warning-light { background-color: var(--color-warning-light); color: var(--color-warning-light-foreground); }
.background-warning-xlight { background-color: var(--color-warning-xlight); color: var(--color-warning-xlight-foreground); }
.background-warning-2xlight { background-color: var(--color-warning-2xlight); color: var(--color-warning-2xlight-foreground); }
.background-warning-3xlight { background-color: var(--color-warning-3xlight); color: var(--color-warning-3xlight-foreground); }

.background-accent-3xdark { background-color: var(--color-accent-3xdark); color: var(--color-accent-3xdark-foreground); }
.background-accent-2xdark { background-color: var(--color-accent-2xdark); color: var(--color-accent-2xdark-foreground); }
.background-accent-xdark { background-color: var(--color-accent-xdark); color: var(--color-accent-xdark-foreground); }
.background-accent-dark { background-color: var(--color-accent-dark); color: var(--color-accent-dark-foreground); }
.background-accent, .background-accent-medium { background-color: var(--color-accent-medium); color: var(--color-accent-medium-foreground); }
.background-accent-light { background-color: var(--color-accent-light); color: var(--color-accent-light-foreground); }
.background-accent-xlight { background-color: var(--color-accent-xlight); color: var(--color-accent-xlight-foreground); }
.background-accent-2xlight { background-color: var(--color-accent-2xlight); color: var(--color-accent-2xlight-foreground); }
.background-accent-3xlight { background-color: var(--color-accent-3xlight); color: var(--color-accent-3xlight-foreground); }

.background-success-3xdark { background-color: var(--color-success-3xdark); color: var(--color-success-3xdark-foreground); }
.background-success-2xdark { background-color: var(--color-success-2xdark); color: var(--color-success-2xdark-foreground); }
.background-success-xdark { background-color: var(--color-success-xdark); color: var(--color-success-xdark-foreground); }
.background-success-dark { background-color: var(--color-success-dark); color: var(--color-success-dark-foreground); }
.background-success, .background-success-medium { background-color: var(--color-success-medium); color: var(--color-success-medium-foreground); }
.background-success-light { background-color: var(--color-success-light); color: var(--color-success-light-foreground); }
.background-success-xlight { background-color: var(--color-success-xlight); color: var(--color-success-xlight-foreground); }
.background-success-2xlight { background-color: var(--color-success-2xlight); color: var(--color-success-2xlight-foreground); }
.background-success-3xlight { background-color: var(--color-success-3xlight); color: var(--color-success-3xlight-foreground); }

.background-info-3xdark { background-color: var(--color-info-3xdark); color: var(--color-info-3xdark-foreground); }
.background-info-2xdark { background-color: var(--color-info-2xdark); color: var(--color-info-2xdark-foreground); }
.background-info-xdark { background-color: var(--color-info-xdark); color: var(--color-info-xdark-foreground); }
.background-info-dark { background-color: var(--color-info-dark); color: var(--color-info-dark-foreground); }
.background-info, .background-info-medium { background-color: var(--color-info-medium); color: var(--color-info-medium-foreground); }
.background-info-light { background-color: var(--color-info-light); color: var(--color-info-light-foreground); }
.background-info-xlight { background-color: var(--color-info-xlight); color: var(--color-info-xlight-foreground); }
.background-info-2xlight { background-color: var(--color-info-2xlight); color: var(--color-info-2xlight-foreground); }
.background-info-3xlight { background-color: var(--color-info-3xlight); color: var(--color-info-3xlight-foreground); }

.background-action-3xdark { background-color: var(--color-action-3xdark); color: var(--color-action-3xdark-foreground); }
.background-action-2xdark { background-color: var(--color-action-2xdark); color: var(--color-action-2xdark-foreground); }
.background-action-xdark { background-color: var(--color-action-xdark); color: var(--color-action-xdark-foreground); }
.background-action-dark { background-color: var(--color-action-dark); color: var(--color-action-dark-foreground); }
.background-action, .background-action-medium { background-color: var(--color-action-medium); color: var(--color-action-medium-foreground); }
.background-action-light { background-color: var(--color-action-light); color: var(--color-action-light-foreground); }
.background-action-xlight { background-color: var(--color-action-xlight); color: var(--color-action-xlight-foreground); }
.background-action-2xlight { background-color: var(--color-action-2xlight); color: var(--color-action-2xlight-foreground); }
.background-action-3xlight { background-color: var(--color-action-3xlight); color: var(--color-action-3xlight-foreground); }

.background-urgent-3xdark { background-color: var(--color-urgent-3xdark); color: var(--color-urgent-3xdark-foreground); }
.background-urgent-2xdark { background-color: var(--color-urgent-2xdark); color: var(--color-urgent-2xdark-foreground); }
.background-urgent-xdark { background-color: var(--color-urgent-xdark); color: var(--color-urgent-xdark-foreground); }
.background-urgent-dark { background-color: var(--color-urgent-dark); color: var(--color-urgent-dark-foreground); }
.background-urgent, .background-urgent-medium { background-color: var(--color-urgent-medium); color: var(--color-urgent-medium-foreground); }
.background-urgent-light { background-color: var(--color-urgent-light); color: var(--color-urgent-light-foreground); }
.background-urgent-xlight { background-color: var(--color-urgent-xlight); color: var(--color-urgent-xlight-foreground); }
.background-urgent-2xlight { background-color: var(--color-urgent-2xlight); color: var(--color-urgent-2xlight-foreground); }
.background-urgent-3xlight { background-color: var(--color-urgent-3xlight); color: var(--color-urgent-3xlight-foreground); }

.background-emphasis-3xdark { background-color: var(--color-emphasis-3xdark); color: var(--color-emphasis-3xdark-foreground); }
.background-emphasis-2xdark { background-color: var(--color-emphasis-2xdark); color: var(--color-emphasis-2xdark-foreground); }
.background-emphasis-xdark { background-color: var(--color-emphasis-xdark); color: var(--color-emphasis-xdark-foreground); }
.background-emphasis-dark { background-color: var(--color-emphasis-dark); color: var(--color-emphasis-dark-foreground); }
.background-emphasis, .background-emphasis-medium { background-color: var(--color-emphasis-medium); color: var(--color-emphasis-medium-foreground); }
.background-emphasis-light { background-color: var(--color-emphasis-light); color: var(--color-emphasis-light-foreground); }
.background-emphasis-xlight { background-color: var(--color-emphasis-xlight); color: var(--color-emphasis-xlight-foreground); }
.background-emphasis-2xlight { background-color: var(--color-emphasis-2xlight); color: var(--color-emphasis-2xlight-foreground); }
.background-emphasis-3xlight { background-color: var(--color-emphasis-3xlight); color: var(--color-emphasis-3xlight-foreground); }


/* component: background-image */
.background-cover,
.background-contain,
.background-width-1-1,
.background-height-1-1 {
background-position: 50% 50%;
background-repeat: no-repeat;
}

.background-cover { background-size: cover; }
.background-contain { background-size: contain; }

.background-width-1-1 { background-size: 100%; }
.background-height-1-1 { background-size: auto 100%; }

.background-top-left { background-position: 0 0; }
.background-top-center { background-position: 50% 0; }
.background-top-right { background-position: 100% 0; }
.background-center-left { background-position: 0 50%; }
.background-center-center { background-position: 50% 50%; }
.background-center-right { background-position: 100% 50%; }
.background-bottom-left { background-position: 0 100%; }
.background-bottom-center { background-position: 50% 100%; }
.background-bottom-right { background-position: 100% 100%; }

.background-norepeat { background-repeat: no-repeat; }

.background-fixed { background-attachment: fixed; }

@media (pointer: coarse) { .background-fixed { background-attachment: scroll; } }
@media (max-width: 575px) { .background-image\@s { background-image: none !important; } }
@media (max-width: 767px) { .background-image\@m { background-image: none !important; } }
@media (max-width: 1023px) { .background-image\@l { background-image: none !important; } }
@media (max-width: 1279px) { .background-image\@xl { background-image: none !important; } }

.background-blend-multiply { background-blend-mode: multiply; }
.background-blend-screen { background-blend-mode: screen; }
.background-blend-overlay { background-blend-mode: overlay; }
.background-blend-darken { background-blend-mode: darken; }
.background-blend-lighten { background-blend-mode: lighten; }
.background-blend-color-dodge { background-blend-mode: color-dodge; }
.background-blend-color-burn { background-blend-mode: color-burn; }
.background-blend-hard-light { background-blend-mode: hard-light; }
.background-blend-soft-light { background-blend-mode: soft-light; }
.background-blend-difference { background-blend-mode: difference; }
.background-blend-exclusion { background-blend-mode: exclusion; }
.background-blend-hue { background-blend-mode: hue; }
.background-blend-saturation { background-blend-mode: saturation; }
.background-blend-color { background-blend-mode: color; }
.background-blend-luminosity { background-blend-mode: luminosity; }

.background-image-alpha-medium,
.background-image-alpha {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22rgb(245%2C245%2C245)%22%20d%3D%22M12%2C0v12H0V0h12ZM12%2C12v12h12v-12h-12Z%22%2F%3E%3Cpath%20fill%3D%22rgb(240%2C240%2C240)%22%20d%3D%22M24%2C0v12h-12V0h12ZM0%2C12v12h12v-12H0Z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;
background-position: 0% 0%;
background-size: var(--gutter-12) var(--gutter-12);
}

.background-image-alpha-dark {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22rgb(200%2C200%2C200)%22%20d%3D%22M12%2C0v12H0V0h12ZM12%2C12v12h12v-12h-12Z%22%2F%3E%3Cpath%20fill%3D%22rgb(180%2C180%2C180)%22%20d%3D%22M24%2C0v12h-12V0h12ZM0%2C12v12h12v-12H0Z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;
background-position: 0% 0%;
background-size: var(--gutter-12) var(--gutter-12);
}

.background-image-alpha-light {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22rgb(250%2C250%2C250)%22%20d%3D%22M12%2C0v12H0V0h12ZM12%2C12v12h12v-12h-12Z%22%2F%3E%3Cpath%20fill%3D%22rgb(245%2C245%2C245)%22%20d%3D%22M24%2C0v12h-12V0h12ZM0%2C12v12h12v-12H0Z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;
background-position: 0% 0%;
background-size: var(--gutter-12) var(--gutter-12);
}


/* component: overlay */
.overlay-black { background-color: var(--color-black-75); color: var(--color-black-75-foreground); }
.overlay-black-0 { background-color: var(--color-black-0); color: var(--color-black-0-foreground); }
.overlay-black-5 { background-color: var(--color-black-5); color: var(--color-black-5-foreground); }
.overlay-black-10 { background-color: var(--color-black-10); color: var(--color-black-10-foreground); }
.overlay-black-15 { background-color: var(--color-black-15); color: var(--color-black-15-foreground); }
.overlay-black-20 { background-color: var(--color-black-20); color: var(--color-black-20-foreground); }
.overlay-black-25 { background-color: var(--color-black-25); color: var(--color-black-25-foreground); }
.overlay-black-30 { background-color: var(--color-black-30); color: var(--color-black-30-foreground); }
.overlay-black-35 { background-color: var(--color-black-35); color: var(--color-black-35-foreground); }
.overlay-black-40 { background-color: var(--color-black-40); color: var(--color-black-40-foreground); }
.overlay-black-45 { background-color: var(--color-black-45); color: var(--color-black-45-foreground); }
.overlay-black-50 { background-color: var(--color-black-50); color: var(--color-black-50-foreground); }
.overlay-black-55 { background-color: var(--color-black-55); color: var(--color-black-55-foreground); }
.overlay-black-60 { background-color: var(--color-black-60); color: var(--color-black-60-foreground); }
.overlay-black-65 { background-color: var(--color-black-65); color: var(--color-black-65-foreground); }
.overlay-black-70 { background-color: var(--color-black-70); color: var(--color-black-70-foreground); }
.overlay-black-75 { background-color: var(--color-black-75); color: var(--color-black-75-foreground); }
.overlay-black-80 { background-color: var(--color-black-80); color: var(--color-black-80-foreground); }
.overlay-black-85 { background-color: var(--color-black-85); color: var(--color-black-85-foreground); }
.overlay-black-90 { background-color: var(--color-black-90); color: var(--color-black-90-foreground); }
.overlay-black-95 { background-color: var(--color-black-95); color: var(--color-black-95-foreground); }
.overlay-black-100 { background-color: var(--color-black-100); color: var(--color-black-100-foreground); }

.overlay-gray { background-color: var(--color-gray-75); color: var(--color-gray-75-foreground); }
.overlay-gray-0 { background-color: var(--color-gray-0); color: var(--color-gray-0-foreground); }
.overlay-gray-5 { background-color: var(--color-gray-5); color: var(--color-gray-5-foreground); }
.overlay-gray-10 { background-color: var(--color-gray-10); color: var(--color-gray-10-foreground); }
.overlay-gray-15 { background-color: var(--color-gray-15); color: var(--color-gray-15-foreground); }
.overlay-gray-20 { background-color: var(--color-gray-20); color: var(--color-gray-20-foreground); }
.overlay-gray-25 { background-color: var(--color-gray-25); color: var(--color-gray-25-foreground); }
.overlay-gray-30 { background-color: var(--color-gray-30); color: var(--color-gray-30-foreground); }
.overlay-gray-35 { background-color: var(--color-gray-35); color: var(--color-gray-35-foreground); }
.overlay-gray-40 { background-color: var(--color-gray-40); color: var(--color-gray-40-foreground); }
.overlay-gray-45 { background-color: var(--color-gray-45); color: var(--color-gray-45-foreground); }
.overlay-gray-50 { background-color: var(--color-gray-50); color: var(--color-gray-50-foreground); }
.overlay-gray-55 { background-color: var(--color-gray-55); color: var(--color-gray-55-foreground); }
.overlay-gray-60 { background-color: var(--color-gray-60); color: var(--color-gray-60-foreground); }
.overlay-gray-65 { background-color: var(--color-gray-65); color: var(--color-gray-65-foreground); }
.overlay-gray-70 { background-color: var(--color-gray-70); color: var(--color-gray-70-foreground); }
.overlay-gray-75 { background-color: var(--color-gray-75); color: var(--color-gray-75-foreground); }
.overlay-gray-80 { background-color: var(--color-gray-80); color: var(--color-gray-80-foreground); }
.overlay-gray-85 { background-color: var(--color-gray-85); color: var(--color-gray-85-foreground); }
.overlay-gray-90 { background-color: var(--color-gray-90); color: var(--color-gray-90-foreground); }
.overlay-gray-95 { background-color: var(--color-gray-95); color: var(--color-gray-95-foreground); }
.overlay-gray-100 { background-color: var(--color-gray-100); color: var(--color-gray-100-foreground); }

.overlay-white { background-color: var(--color-white-75); color: var(--color-white-75-foreground); }
.overlay-white-0 { background-color: var(--color-white-0); color: var(--color-white-0-foreground); }
.overlay-white-5 { background-color: var(--color-white-5); color: var(--color-white-5-foreground); }
.overlay-white-10 { background-color: var(--color-white-10); color: var(--color-white-10-foreground); }
.overlay-white-15 { background-color: var(--color-white-15); color: var(--color-white-15-foreground); }
.overlay-white-20 { background-color: var(--color-white-20); color: var(--color-white-20-foreground); }
.overlay-white-25 { background-color: var(--color-white-25); color: var(--color-white-25-foreground); }
.overlay-white-30 { background-color: var(--color-white-30); color: var(--color-white-30-foreground); }
.overlay-white-35 { background-color: var(--color-white-35); color: var(--color-white-35-foreground); }
.overlay-white-40 { background-color: var(--color-white-40); color: var(--color-white-40-foreground); }
.overlay-white-45 { background-color: var(--color-white-45); color: var(--color-white-45-foreground); }
.overlay-white-50 { background-color: var(--color-white-50); color: var(--color-white-50-foreground); }
.overlay-white-55 { background-color: var(--color-white-55); color: var(--color-white-55-foreground); }
.overlay-white-60 { background-color: var(--color-white-60); color: var(--color-white-60-foreground); }
.overlay-white-65 { background-color: var(--color-white-65); color: var(--color-white-65-foreground); }
.overlay-white-70 { background-color: var(--color-white-70); color: var(--color-white-70-foreground); }
.overlay-white-75 { background-color: var(--color-white-75); color: var(--color-white-75-foreground); }
.overlay-white-80 { background-color: var(--color-white-80); color: var(--color-white-80-foreground); }
.overlay-white-85 { background-color: var(--color-white-85); color: var(--color-white-85-foreground); }
.overlay-white-90 { background-color: var(--color-white-90); color: var(--color-white-90-foreground); }
.overlay-white-95 { background-color: var(--color-white-95); color: var(--color-white-95-foreground); }
.overlay-white-100 { background-color: var(--color-white-100); color: var(--color-white-100-foreground); }


/* component: align */
[class*="align"] { display: block; margin-bottom: var(--gutter-24); }
* + [class*="align"] { margin-top: var(--gutter-24); }
.align-center { margin-left: auto; margin-right: auto; }

.align-left {
margin-top: 0;
margin-right: var(--gutter-24);
float: left;
}

.align-right {
margin-top: 0;
margin-left: var(--gutter-24);
float: right;
}

@media (min-width: 576px) {
.align-left\@s {
margin-top: 0;
margin-right: var(--gutter-24);
float: left;
}

.align-right\@s {
margin-top: 0;
margin-left: var(--gutter-24);
float: right;
}
}

@media (min-width: 768px) {
.align-left\@m {
margin-top: 0;
margin-right: var(--gutter-24);
float: left;
}

.align-right\@m {
margin-top: 0;
margin-left: var(--gutter-24);
float: right;
}
}

@media (min-width: 1024px) {
.align-left\@l { margin-top: 0; float: left; }
.align-right\@l { margin-top: 0; float: right; }
.align-left,
.align-left\@s,
.align-left\@m,
.align-left\@l { margin-right: var(--gutter-48); }
.align-right,
.align-right\@s,
.align-right\@m,
.align-right\@l { margin-left: var(--gutter-48); }
}

@media (min-width: 1280px) {
.align-left\@xl {
margin-top: 0;
margin-right: var(--gutter-48);
float: left;
}

.align-right\@xl {
margin-top: 0;
margin-left: var(--gutter-48);
float: right;
}
}


/* component: panel */
.panel {
display: flow-root;
position: relative;
box-sizing: border-box;
}

.panel > :last-child { margin-bottom: 0; }

.panel-scrollable {
height: 170px;
padding: var(--gutter-14);
border: var(--gutter-1) solid var(--foreground-slight);
overflow: auto;
resize: both;
}


/* component: clearfix */
.clearfix::before { content: ""; display: table-cell; }
.clearfix::after { content: ""; display: table; clear: both; }


/* component: float */
.float-left { float: left; }
.float-right { float: right; }
[class*="float-"] { max-width: 100%; }


/* component: overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }


/* component: box-sizing */
.box-sizing-content { box-sizing: content-box; }
.box-sizing-border { box-sizing: border-box; }


/* component: resize */
.resize { resize: both; }
.resize-horizontal { resize: horizontal; }
.resize-vertical { resize: vertical; }


/* component: display */
.display-block { display: block !important; }
.display-inline { display: inline !important; }
.display-inline-block { display: inline-block !important; }


/* component: inline */
[class*="inline"] {
display: inline-block;
position: relative;
max-width: 100%;
vertical-align: middle;
-webkit-backface-visibility: hidden;
}

.inline-clip { overflow: hidden; }


/* component: responsive-object */
.preserve-width,
.preserve-width canvas,
.preserve-width img,
.preserve-width svg,
.preserve-width video {
max-width: none;
object-fit: fill;
}

.responsive-width,
.responsive-height { box-sizing: border-box; }

.responsive-width { max-width: 100% !important; height: auto; }

.responsive-height {
max-height: 100%;
width: auto;
max-width: none;
}

[data-responsive] { max-width: 100%; }


/* component: object */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

.object-top-left { object-position: 0 0; }
.object-top-center { object-position: 50% 0; }
.object-top-right { object-position: 100% 0; }
.object-center-left { object-position: 0 50%; }
.object-center-center { object-position: 50% 50%; }
.object-center-right { object-position: 100% 50%; }
.object-bottom-left { object-position: 0 100%; }
.object-bottom-center { object-position: 50% 100%; }
.object-bottom-right { object-position: 100% 100%; }


/* component: corner */
.corner-squared { border-radius: 0; }
.corner-pilled { border-radius: 9999px; }
.corner-circled { border-radius: 100%; }
.corner-rounded { border-radius: var(--gutter-6); }
.corner-rounded-xs { border-radius: var(--gutter-6); }
.corner-rounded-s { border-radius: var(--gutter-10); }
.corner-rounded-m { border-radius: var(--gutter-14); }
.corner-rounded-l { border-radius: var(--gutter-18); }
.corner-rounded-xl { border-radius: var(--gutter-22); }


/* component: border */
.border { border-width: var(--gutter-1); border-style: solid; }
.border-xs { border-width: var(--gutter-2); }
.border-s { border-width: var(--gutter-4); }
.border-m { border-width: var(--gutter-8); }
.border-l { border-width: var(--gutter-12); }
.border-xl { border-width: var(--gutter-16); }

.border-collapse, .border-remove { border-width: 0 !important; }

.border-remove-top { border-top-width: 0 !important; }
.border-remove-bottom { border-bottom-width: 0 !important; }
.border-remove-left { border-left-width: 0 !important; }
.border-remove-right { border-right-width: 0 !important; }
.border-remove-vertical { border-top-width: 0 !important; border-bottom-width: 0 !important; }
.border-remove-horizontal { border-left-width: 0 !important; border-right-width: 0 !important; }

.border { border-color: var(--foreground-slight); }
.border-black { border-color: var(--color-black); }
.border-muted { border-color: var(--color-muted-medium); }
.border-white { border-color: var(--color-white); }
.border-primary { border-color: var(--color-primary-medium); }
.border-secondary { border-color: var(--color-secondary-medium); }
.border-tertiary { border-color: var(--color-tertiary-medium); }
.border-danger { border-color: var(--color-danger-medium); }
.border-warning { border-color: var(--color-warning-medium); }
.border-accent { border-color: var(--color-accent-medium); }
.border-success { border-color: var(--color-success-medium); }
.border-info { border-color: var(--color-info-medium); }
.border-action { border-color: var(--color-action-medium); }
.border-urgent { border-color: var(--color-urgent-medium); }
.border-emphasis { border-color: var(--color-emphasis-medium); }

.inline-clip[class*="border-"] { -webkit-transform: translateZ(0); }


/* component: shadow */
.box-shadow { box-shadow: 0 calc(var(--gutter-24) * 0.50) calc(var(--gutter-24) * 0.750) var(--color-black-15); }
.box-shadow-xs { box-shadow: 0 calc(var(--gutter-20) * 0.50) calc(var(--gutter-20) * 0.750) var(--color-black-5); }
.box-shadow-s { box-shadow: 0 calc(var(--gutter-22) * 0.50) calc(var(--gutter-22) * 0.750) var(--color-black-10); }
.box-shadow-m { box-shadow: 0 calc(var(--gutter-24) * 0.50) calc(var(--gutter-24) * 0.750) var(--color-black-15); }
.box-shadow-l { box-shadow: 0 calc(var(--gutter-28) * 0.50) calc(var(--gutter-28) * 0.750) var(--color-black-20); }
.box-shadow-xl { box-shadow: 0 calc(var(--gutter-32) * 0.50) calc(var(--gutter-32) * 0.750) var(--color-black-25); }

[class*="box-shadow-hover"] { transition: box-shadow 0.1s ease-in-out; }

.box-shadow-hover:hover { box-shadow: 0 calc(var(--gutter-24) * 0.50) calc(var(--gutter-24) * 0.750) var(--color-black-15); }
.box-shadow-hover-xs:hover { box-shadow: 0 calc(var(--gutter-20) * 0.50) calc(var(--gutter-20) * 0.750) var(--color-black-5); }
.box-shadow-hover-s:hover { box-shadow: 0 calc(var(--gutter-22) * 0.50) calc(var(--gutter-22) * 0.750) var(--color-black-10); }
.box-shadow-hover-m:hover { box-shadow: 0 calc(var(--gutter-24) * 0.50) calc(var(--gutter-24) * 0.750) var(--color-black-15); }
.box-shadow-hover-l:hover { box-shadow: 0 calc(var(--gutter-28) * 0.50) calc(var(--gutter-28) * 0.750) var(--color-black-20); }
.box-shadow-hover-xl:hover { box-shadow: 0 calc(var(--gutter-32) * 0.50) calc(var(--gutter-32) * 0.750) var(--color-black-25); }


/* component: drag-state */
.drag, .drag * { cursor: move; }
.drag iframe { pointer-events: none; }


/* component: dragover-state */


/* component: blend-mode */
.blend-multiply { mix-blend-mode: multiply; }
.blend-screen { mix-blend-mode: screen; }
.blend-overlay { mix-blend-mode: overlay; }
.blend-darken { mix-blend-mode: darken; }
.blend-lighten { mix-blend-mode: lighten; }
.blend-color-dodge { mix-blend-mode: color-dodge; }
.blend-color-burn { mix-blend-mode: color-burn; }
.blend-hard-light { mix-blend-mode: hard-light; }
.blend-soft-light { mix-blend-mode: soft-light; }
.blend-difference { mix-blend-mode: difference; }
.blend-exclusion { mix-blend-mode: exclusion; }
.blend-hue { mix-blend-mode: hue; }
.blend-saturation { mix-blend-mode: saturation; }
.blend-color { mix-blend-mode: color; }
.blend-luminosity { mix-blend-mode: luminosity; }


/* component: transform */
.transform-center { transform: translate(-50%, -50%); }


/* component: transform-origin */
.transform-origin-top-left { transform-origin: 0 0; }
.transform-origin-top-center { transform-origin: 50% 0; }
.transform-origin-top-right { transform-origin: 100% 0; }
.transform-origin-center-left { transform-origin: 0 50%; }
.transform-origin-center-right { transform-origin: 100% 50%; }
.transform-origin-bottom-left { transform-origin: 0 100%; }
.transform-origin-bottom-center { transform-origin: 50% 100%; }
.transform-origin-bottom-right { transform-origin: 100% 100%; }


/* component: flex */
.flex { display: flex; }
.flex-inline { display: inline-flex; }
.flex-left { justify-content: flex-start; }
.flex-center { justify-content: center; }
.flex-right { justify-content: flex-end; }
.flex-between { justify-content: space-between; }
.flex-around { justify-content: space-around; }

@media (min-width: 576px) {
.flex-left\@s { justify-content: flex-start; }
.flex-center\@s { justify-content: center; }
.flex-right\@s { justify-content: flex-end; }
.flex-between\@s { justify-content: space-between; }
.flex-around\@s { justify-content: space-around; }
}

@media (min-width: 768px) {
.flex-left\@m { justify-content: flex-start; }
.flex-center\@m { justify-content: center; }
.flex-right\@m { justify-content: flex-end; }
.flex-between\@m { justify-content: space-between; }
.flex-around\@m { justify-content: space-around; }
}

@media (min-width: 1024px) {
.flex-left\@l { justify-content: flex-start; }
.flex-center\@l { justify-content: center; }
.flex-right\@l { justify-content: flex-end; }
.flex-between\@l { justify-content: space-between; }
.flex-around\@l { justify-content: space-around; }
}

@media (min-width: 1280px) {
.flex-left\@xl { justify-content: flex-start; }
.flex-center\@xl { justify-content: center; }
.flex-right\@xl { justify-content: flex-end; }
.flex-between\@xl { justify-content: space-between; }
.flex-around\@xl { justify-content: space-around; }
}

.flex-stretch { align-items: stretch; }
.flex-top { align-items: flex-start; }
.flex-middle { align-items: center; }
.flex-bottom { align-items: flex-end; }

@media (min-width: 576px) {
.flex-stretch\@s { align-items: stretch; }
.flex-top\@s { align-items: flex-start; }
.flex-middle\@s { align-items: center; }
.flex-bottom\@s { align-items: flex-end; }
}

@media (min-width: 768px) {
.flex-stretch\@m { align-items: stretch; }
.flex-top\@m { align-items: flex-start; }
.flex-middle\@m { align-items: center; }
.flex-bottom\@m { align-items: flex-end; }
}

@media (min-width: 1024px) {
.flex-stretch\@l { align-items: stretch; }
.flex-top\@l { align-items: flex-start; }
.flex-middle\@l { align-items: center; }
.flex-bottom\@l { align-items: flex-end; }
}

@media (min-width: 1280px) {
.flex-stretch\@xl { align-items: stretch; }
.flex-top\@xl { align-items: flex-start; }
.flex-middle\@xl { align-items: center; }
.flex-bottom\@xl { align-items: flex-end; }
}

.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }

.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

@media (min-width: 576px) {
.flex-row\@s { flex-direction: row; }
.flex-column\@s { flex-direction: column; }
}

@media (min-width: 768px) {
.flex-row\@m { flex-direction: row; }
.flex-column\@m { flex-direction: column; }
}

@media (min-width: 1024px) {
.flex-row\@l { flex-direction: row; }
.flex-column\@l { flex-direction: column; }
}

@media (min-width: 1280px) {
.flex-row\@xl { flex-direction: row; }
.flex-column\@xl { flex-direction: column; }
}

.flex-nowrap { flex-wrap: nowrap; }

.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-wrap-stretch { align-content: stretch; }
.flex-wrap-top { align-content: flex-start; }
.flex-wrap-middle { align-content: center; }
.flex-wrap-bottom { align-content: flex-end; }
.flex-wrap-between { align-content: space-between; }
.flex-wrap-around { align-content: space-around; }

.flex-first { order: -1; }
.flex-last { order: 99; }

@media (min-width: 576px) {
.flex-first\@s { order: -1; }
.flex-last\@s { order: 99; }
}

@media (min-width: 768px) {
.flex-first\@m { order: -1; }
.flex-last\@m { order: 99; }
}

@media (min-width: 1024px) {
.flex-first\@l { order: -1; }
.flex-last\@l { order: 99; }
}

@media (min-width: 1280px) {
.flex-first\@xl { order: -1; }
.flex-last\@xl { order: 99; }
}

.flex-initial { flex: initial; }
.flex-none { flex: none; }
.flex-auto { flex: auto; }
.flex-1 { flex: 1; }

@media (min-width: 576px) {
.flex-initial\@s { flex: initial; }
.flex-none\@s { flex: none; }
.flex-1\@s { flex: 1; }
}

@media (min-width: 768px) {
.flex-initial\@m { flex: initial; }
.flex-none\@m { flex: none; }
.flex-1\@m { flex: 1; }
}

@media (min-width: 1024px) {
.flex-initial\@l { flex: initial; }
.flex-none\@l { flex: none; }
.flex-1\@l { flex: 1; }
}

@media (min-width: 1280px) {
.flex-initial\@xl { flex: initial; }
.flex-none\@xl { flex: none; }
.flex-1\@xl { flex: 1; }
}


/* component: margin */
.margin { margin-bottom: var(--gutter-48); }
* + .margin { margin-top: var(--gutter-48) !important; }

.margin-top { margin-top: var(--gutter-48) !important; }
.margin-bottom { margin-bottom: var(--gutter-48) !important; }
.margin-left { margin-left: var(--gutter-48) !important; }
.margin-right { margin-right: var(--gutter-48) !important; }

.margin-19xs { margin-bottom: var(--gutter-0); }
* + .margin-19xs { margin-top: var(--gutter-0) !important; }
.margin-19xs-top { margin-top: var(--gutter-0) !important; }
.margin-19xs-bottom { margin-bottom: var(--gutter-0) !important; }
.margin-19xs-left { margin-left: var(--gutter-0) !important; }
.margin-19xs-right { margin-right: var(--gutter-0) !important; }
.margin-18xs { margin-bottom: var(--gutter-1); }
* + .margin-18xs { margin-top: var(--gutter-1) !important; }
.margin-18xs-top { margin-top: var(--gutter-1) !important; }
.margin-18xs-bottom { margin-bottom: var(--gutter-1) !important; }
.margin-18xs-left { margin-left: var(--gutter-1) !important; }
.margin-18xs-right { margin-right: var(--gutter-1) !important; }
.margin-17xs { margin-bottom: var(--gutter-2); }
* + .margin-17xs { margin-top: var(--gutter-2) !important; }
.margin-17xs-top { margin-top: var(--gutter-2) !important; }
.margin-17xs-bottom { margin-bottom: var(--gutter-2) !important; }
.margin-17xs-left { margin-left: var(--gutter-2) !important; }
.margin-17xs-right { margin-right: var(--gutter-2) !important; }
.margin-16xs { margin-bottom: var(--gutter-3); }
* + .margin-16xs { margin-top: var(--gutter-3) !important; }
.margin-16xs-top { margin-top: var(--gutter-3) !important; }
.margin-16xs-bottom { margin-bottom: var(--gutter-3) !important; }
.margin-16xs-left { margin-left: var(--gutter-3) !important; }
.margin-16xs-right { margin-right: var(--gutter-3) !important; }
.margin-15xs { margin-bottom: var(--gutter-4); }
* + .margin-15xs { margin-top: var(--gutter-4) !important; }
.margin-15xs-top { margin-top: var(--gutter-4) !important; }
.margin-15xs-bottom { margin-bottom: var(--gutter-4) !important; }
.margin-15xs-left { margin-left: var(--gutter-4) !important; }
.margin-15xs-right { margin-right: var(--gutter-4) !important; }
.margin-14xs { margin-bottom: var(--gutter-6); }
* + .margin-14xs { margin-top: var(--gutter-6) !important; }
.margin-14xs-top { margin-top: var(--gutter-6) !important; }
.margin-14xs-bottom { margin-bottom: var(--gutter-6) !important; }
.margin-14xs-left { margin-left: var(--gutter-6) !important; }
.margin-14xs-right { margin-right: var(--gutter-6) !important; }
.margin-13xs { margin-bottom: var(--gutter-8); }
* + .margin-13xs { margin-top: var(--gutter-8) !important; }
.margin-13xs-top { margin-top: var(--gutter-8) !important; }
.margin-13xs-bottom { margin-bottom: var(--gutter-8) !important; }
.margin-13xs-left { margin-left: var(--gutter-8) !important; }
.margin-13xs-right { margin-right: var(--gutter-8) !important; }
.margin-12xs { margin-bottom: var(--gutter-10); }
* + .margin-12xs { margin-top: var(--gutter-10) !important; }
.margin-12xs-top { margin-top: var(--gutter-10) !important; }
.margin-12xs-bottom { margin-bottom: var(--gutter-10) !important; }
.margin-12xs-left { margin-left: var(--gutter-10) !important; }
.margin-12xs-right { margin-right: var(--gutter-10) !important; }
.margin-11xs { margin-bottom: var(--gutter-12); }
* + .margin-11xs { margin-top: var(--gutter-12) !important; }
.margin-11xs-top { margin-top: var(--gutter-12) !important; }
.margin-11xs-bottom { margin-bottom: var(--gutter-12) !important; }
.margin-11xs-left { margin-left: var(--gutter-12) !important; }
.margin-11xs-right { margin-right: var(--gutter-12) !important; }
.margin-10xs { margin-bottom: var(--gutter-14); }
* + .margin-10xs { margin-top: var(--gutter-14) !important; }
.margin-10xs-top { margin-top: var(--gutter-14) !important; }
.margin-10xs-bottom { margin-bottom: var(--gutter-14) !important; }
.margin-10xs-left { margin-left: var(--gutter-14) !important; }
.margin-10xs-right { margin-right: var(--gutter-14) !important; }
.margin-9xs { margin-bottom: var(--gutter-16); }
* + .margin-9xs { margin-top: var(--gutter-16) !important; }
.margin-9xs-top { margin-top: var(--gutter-16) !important; }
.margin-9xs-bottom { margin-bottom: var(--gutter-16) !important; }
.margin-9xs-left { margin-left: var(--gutter-16) !important; }
.margin-9xs-right { margin-right: var(--gutter-16) !important; }
.margin-8xs { margin-bottom: var(--gutter-18); }
* + .margin-8xs { margin-top: var(--gutter-18) !important; }
.margin-8xs-top { margin-top: var(--gutter-18) !important; }
.margin-8xs-bottom { margin-bottom: var(--gutter-18) !important; }
.margin-8xs-left { margin-left: var(--gutter-18) !important; }
.margin-8xs-right { margin-right: var(--gutter-18) !important; }
.margin-7xs { margin-bottom: var(--gutter-20); }
* + .margin-7xs { margin-top: var(--gutter-20) !important; }
.margin-7xs-top { margin-top: var(--gutter-20) !important; }
.margin-7xs-bottom { margin-bottom: var(--gutter-20) !important; }
.margin-7xs-left { margin-left: var(--gutter-20) !important; }
.margin-7xs-right { margin-right: var(--gutter-20) !important; }
.margin-6xs { margin-bottom: var(--gutter-22); }
* + .margin-6xs { margin-top: var(--gutter-22) !important; }
.margin-6xs-top { margin-top: var(--gutter-22) !important; }
.margin-6xs-bottom { margin-bottom: var(--gutter-22) !important; }
.margin-6xs-left { margin-left: var(--gutter-22) !important; }
.margin-6xs-right { margin-right: var(--gutter-22) !important; }
.margin-5xs { margin-bottom: var(--gutter-24); }
* + .margin-5xs { margin-top: var(--gutter-24) !important; }
.margin-5xs-top { margin-top: var(--gutter-24) !important; }
.margin-5xs-bottom { margin-bottom: var(--gutter-24) !important; }
.margin-5xs-left { margin-left: var(--gutter-24) !important; }
.margin-5xs-right { margin-right: var(--gutter-24) !important; }
.margin-4xs { margin-bottom: var(--gutter-28); }
* + .margin-4xs { margin-top: var(--gutter-28) !important; }
.margin-4xs-top { margin-top: var(--gutter-28) !important; }
.margin-4xs-bottom { margin-bottom: var(--gutter-28) !important; }
.margin-4xs-left { margin-left: var(--gutter-28) !important; }
.margin-4xs-right { margin-right: var(--gutter-28) !important; }
.margin-3xs { margin-bottom: var(--gutter-32); }
* + .margin-3xs { margin-top: var(--gutter-32) !important; }
.margin-3xs-top { margin-top: var(--gutter-32) !important; }
.margin-3xs-bottom { margin-bottom: var(--gutter-32) !important; }
.margin-3xs-left { margin-left: var(--gutter-32) !important; }
.margin-3xs-right { margin-right: var(--gutter-32) !important; }
.margin-2xs { margin-bottom: var(--gutter-36); }
* + .margin-2xs { margin-top: var(--gutter-36) !important; }
.margin-2xs-top { margin-top: var(--gutter-36) !important; }
.margin-2xs-bottom { margin-bottom: var(--gutter-36) !important; }
.margin-2xs-left { margin-left: var(--gutter-36) !important; }
.margin-2xs-right { margin-right: var(--gutter-36) !important; }
.margin-xs { margin-bottom: var(--gutter-40); }
* + .margin-xs { margin-top: var(--gutter-40) !important; }
.margin-xs-top { margin-top: var(--gutter-40) !important; }
.margin-xs-bottom { margin-bottom: var(--gutter-40) !important; }
.margin-xs-left { margin-left: var(--gutter-40) !important; }
.margin-xs-right { margin-right: var(--gutter-40) !important; }
.margin-s { margin-bottom: var(--gutter-44); }
* + .margin-s { margin-top: var(--gutter-44) !important; }
.margin-s-top { margin-top: var(--gutter-44) !important; }
.margin-s-bottom { margin-bottom: var(--gutter-44) !important; }
.margin-s-left { margin-left: var(--gutter-44) !important; }
.margin-s-right { margin-right: var(--gutter-44) !important; }
.margin-m { margin-bottom: var(--gutter-48); }
* + .margin-m { margin-top: var(--gutter-48) !important; }
.margin-m-top { margin-top: var(--gutter-48) !important; }
.margin-m-bottom { margin-bottom: var(--gutter-48) !important; }
.margin-m-left { margin-left: var(--gutter-48) !important; }
.margin-m-right { margin-right: var(--gutter-48) !important; }
.margin-l { margin-bottom: var(--gutter-50-52); }
* + .margin-l { margin-top: var(--gutter-50-52) !important; }
.margin-l-top { margin-top: var(--gutter-50-52) !important; }
.margin-l-bottom { margin-bottom: var(--gutter-50-52) !important; }
.margin-l-left { margin-left: var(--gutter-50-52) !important; }
.margin-l-right { margin-right: var(--gutter-50-52) !important; }
.margin-xl { margin-bottom: var(--gutter-52-56); }
* + .margin-xl { margin-top: var(--gutter-52-56) !important; }
.margin-xl-top { margin-top: var(--gutter-52-56) !important; }
.margin-xl-bottom { margin-bottom: var(--gutter-52-56) !important; }
.margin-xl-left { margin-left: var(--gutter-52-56) !important; }
.margin-xl-right { margin-right: var(--gutter-52-56) !important; }
.margin-2xl { margin-bottom: var(--gutter-54-60); }
* + .margin-2xl { margin-top: var(--gutter-54-60) !important; }
.margin-2xl-top { margin-top: var(--gutter-54-60) !important; }
.margin-2xl-bottom { margin-bottom: var(--gutter-54-60) !important; }
.margin-2xl-left { margin-left: var(--gutter-54-60) !important; }
.margin-2xl-right { margin-right: var(--gutter-54-60) !important; }
.margin-3xl { margin-bottom: var(--gutter-56-64); }
* + .margin-3xl { margin-top: var(--gutter-56-64) !important; }
.margin-3xl-top { margin-top: var(--gutter-56-64) !important; }
.margin-3xl-bottom { margin-bottom: var(--gutter-56-64) !important; }
.margin-3xl-left { margin-left: var(--gutter-56-64) !important; }
.margin-3xl-right { margin-right: var(--gutter-56-64) !important; }
.margin-4xl { margin-bottom: var(--gutter-58-72); }
* + .margin-4xl { margin-top: var(--gutter-58-72) !important; }
.margin-4xl-top { margin-top: var(--gutter-58-72) !important; }
.margin-4xl-bottom { margin-bottom: var(--gutter-58-72) !important; }
.margin-4xl-left { margin-left: var(--gutter-58-72) !important; }
.margin-4xl-right { margin-right: var(--gutter-58-72) !important; }
.margin-5xl { margin-bottom: var(--gutter-60-80); }
* + .margin-5xl { margin-top: var(--gutter-60-80) !important; }
.margin-5xl-top { margin-top: var(--gutter-60-80) !important; }
.margin-5xl-bottom { margin-bottom: var(--gutter-60-80) !important; }
.margin-5xl-left { margin-left: var(--gutter-60-80) !important; }
.margin-5xl-right { margin-right: var(--gutter-60-80) !important; }
.margin-6xl { margin-bottom: var(--gutter-62-88); }
* + .margin-6xl { margin-top: var(--gutter-62-88) !important; }
.margin-6xl-top { margin-top: var(--gutter-62-88) !important; }
.margin-6xl-bottom { margin-bottom: var(--gutter-62-88) !important; }
.margin-6xl-left { margin-left: var(--gutter-62-88) !important; }
.margin-6xl-right { margin-right: var(--gutter-62-88) !important; }
.margin-7xl { margin-bottom: var(--gutter-64-96); }
* + .margin-7xl { margin-top: var(--gutter-64-96) !important; }
.margin-7xl-top { margin-top: var(--gutter-64-96) !important; }
.margin-7xl-bottom { margin-bottom: var(--gutter-64-96) !important; }
.margin-7xl-left { margin-left: var(--gutter-64-96) !important; }
.margin-7xl-right { margin-right: var(--gutter-64-96) !important; }
.margin-8xl { margin-bottom: var(--gutter-72-112); }
* + .margin-8xl { margin-top: var(--gutter-72-112) !important; }
.margin-8xl-top { margin-top: var(--gutter-72-112) !important; }
.margin-8xl-bottom { margin-bottom: var(--gutter-72-112) !important; }
.margin-8xl-left { margin-left: var(--gutter-72-112) !important; }
.margin-8xl-right { margin-right: var(--gutter-72-112) !important; }
.margin-9xl { margin-bottom: var(--gutter-80-128); }
* + .margin-9xl { margin-top: var(--gutter-80-128) !important; }
.margin-9xl-top { margin-top: var(--gutter-80-128) !important; }
.margin-9xl-bottom { margin-bottom: var(--gutter-80-128) !important; }
.margin-9xl-left { margin-left: var(--gutter-80-128) !important; }
.margin-9xl-right { margin-right: var(--gutter-80-128) !important; }
.margin-10xl { margin-bottom: var(--gutter-88-144); }
* + .margin-10xl { margin-top: var(--gutter-88-144) !important; }
.margin-10xl-top { margin-top: var(--gutter-88-144) !important; }
.margin-10xl-bottom { margin-bottom: var(--gutter-88-144) !important; }
.margin-10xl-left { margin-left: var(--gutter-88-144) !important; }
.margin-10xl-right { margin-right: var(--gutter-88-144) !important; }
.margin-11xl { margin-bottom: var(--gutter-96-160); }
* + .margin-11xl { margin-top: var(--gutter-96-160) !important; }
.margin-11xl-top { margin-top: var(--gutter-96-160) !important; }
.margin-11xl-bottom { margin-bottom: var(--gutter-96-160) !important; }
.margin-11xl-left { margin-left: var(--gutter-96-160) !important; }
.margin-11xl-right { margin-right: var(--gutter-96-160) !important; }
.margin-12xl { margin-bottom: var(--gutter-112-176); }
* + .margin-12xl { margin-top: var(--gutter-112-176) !important; }
.margin-12xl-top { margin-top: var(--gutter-112-176) !important; }
.margin-12xl-bottom { margin-bottom: var(--gutter-112-176) !important; }
.margin-12xl-left { margin-left: var(--gutter-112-176) !important; }
.margin-12xl-right { margin-right: var(--gutter-112-176) !important; }
.margin-13xl { margin-bottom: var(--gutter-128-192); }
* + .margin-13xl { margin-top: var(--gutter-128-192) !important; }
.margin-13xl-top { margin-top: var(--gutter-128-192) !important; }
.margin-13xl-bottom { margin-bottom: var(--gutter-128-192) !important; }
.margin-13xl-left { margin-left: var(--gutter-128-192) !important; }
.margin-13xl-right { margin-right: var(--gutter-128-192) !important; }
.margin-14xl { margin-bottom: var(--gutter-144-208); }
* + .margin-14xl { margin-top: var(--gutter-144-208) !important; }
.margin-14xl-top { margin-top: var(--gutter-144-208) !important; }
.margin-14xl-bottom { margin-bottom: var(--gutter-144-208) !important; }
.margin-14xl-left { margin-left: var(--gutter-144-208) !important; }
.margin-14xl-right { margin-right: var(--gutter-144-208) !important; }
.margin-15xl { margin-bottom: var(--gutter-160-224); }
* + .margin-15xl { margin-top: var(--gutter-160-224) !important; }
.margin-15xl-top { margin-top: var(--gutter-160-224) !important; }
.margin-15xl-bottom { margin-bottom: var(--gutter-160-224) !important; }
.margin-15xl-left { margin-left: var(--gutter-160-224) !important; }
.margin-15xl-right { margin-right: var(--gutter-160-224) !important; }
.margin-16xl { margin-bottom: var(--gutter-176-240); }
* + .margin-16xl { margin-top: var(--gutter-176-240) !important; }
.margin-16xl-top { margin-top: var(--gutter-176-240) !important; }
.margin-16xl-bottom { margin-bottom: var(--gutter-176-240) !important; }
.margin-16xl-left { margin-left: var(--gutter-176-240) !important; }
.margin-16xl-right { margin-right: var(--gutter-176-240) !important; }
.margin-17xl { margin-bottom: var(--gutter-192-256); }
* + .margin-17xl { margin-top: var(--gutter-192-256) !important; }
.margin-17xl-top { margin-top: var(--gutter-192-256) !important; }
.margin-17xl-bottom { margin-bottom: var(--gutter-192-256) !important; }
.margin-17xl-left { margin-left: var(--gutter-192-256) !important; }
.margin-17xl-right { margin-right: var(--gutter-192-256) !important; }
.margin-18xl { margin-bottom: var(--gutter-208-288); }
* + .margin-18xl { margin-top: var(--gutter-208-288) !important; }
.margin-18xl-top { margin-top: var(--gutter-208-288) !important; }
.margin-18xl-bottom { margin-bottom: var(--gutter-208-288) !important; }
.margin-18xl-left { margin-left: var(--gutter-208-288) !important; }
.margin-18xl-right { margin-right: var(--gutter-208-288) !important; }
.margin-19xl { margin-bottom: var(--gutter-224-320); }
* + .margin-19xl { margin-top: var(--gutter-224-320) !important; }
.margin-19xl-top { margin-top: var(--gutter-224-320) !important; }
.margin-19xl-bottom { margin-bottom: var(--gutter-224-320) !important; }
.margin-19xl-left { margin-left: var(--gutter-224-320) !important; }
.margin-19xl-right { margin-right: var(--gutter-224-320) !important; }

.margin-auto { margin-left: auto !important; margin-right: auto !important; }
.margin-auto-top { margin-top: auto !important; }
.margin-auto-bottom { margin-bottom: auto !important; }
.margin-auto-left { margin-left: auto !important; }
.margin-auto-right { margin-right: auto !important; }

.margin-auto-vertical { margin-top: auto !important; margin-bottom: auto !important; }

@media (min-width: 576px) {
.margin-auto\@s { margin-left: auto !important; margin-right: auto !important; }
.margin-auto-left\@s { margin-left: auto !important; }
.margin-auto-right\@s { margin-right: auto !important; }
}

@media (min-width: 768px) {
.margin-auto\@m { margin-left: auto !important; margin-right: auto !important; }
.margin-auto-left\@m { margin-left: auto !important; }
.margin-auto-right\@m { margin-right: auto !important; }
}

@media (min-width: 1024px) {
.margin-auto\@l { margin-left: auto !important; margin-right: auto !important; }
.margin-auto-left\@l { margin-left: auto !important; }
.margin-auto-right\@l { margin-right: auto !important; }
}

@media (min-width: 1280px) {
.margin-auto\@xl { margin-left: auto !important; margin-right: auto !important; }
.margin-auto-left\@xl { margin-left: auto !important; }
.margin-auto-right\@xl { margin-right: auto !important; }
}

.margin-remove { margin: 0 !important; }

.margin-remove-top { margin-top: 0 !important; }
.margin-remove-bottom { margin-bottom: 0 !important; }
.margin-remove-left { margin-left: 0 !important; }
.margin-remove-right { margin-right: 0 !important; }
.margin-remove-vertical { margin-top: 0 !important; margin-bottom: 0 !important; }

.margin-remove-adjacent + *,
.margin-remove-first-child > :first-child { margin-top: 0 !important; }

.margin-remove-last-child > :last-child { margin-bottom: 0 !important; }

@media (min-width: 576px) {
.margin-remove-left\@s { margin-left: 0 !important; }
.margin-remove-right\@s { margin-right: 0 !important; }
}

@media (min-width: 768px) {
.margin-remove-left\@m { margin-left: 0 !important; }
.margin-remove-right\@m { margin-right: 0 !important; }
}

@media (min-width: 1024px) {
.margin-remove-left\@l { margin-left: 0 !important; }
.margin-remove-right\@l { margin-right: 0 !important; }
}

@media (min-width: 1280px) {
.margin-remove-left\@xl { margin-left: 0 !important; }
.margin-remove-right\@xl { margin-right: 0 !important; }
}


/* component: padding */
.padding { padding: var(--gutter-48); }
.padding-top { padding-top: var(--gutter-48); }
.padding-bottom { padding-bottom: var(--gutter-48); }
.padding-left { padding-left: var(--gutter-48); }
.padding-right { padding-right: var(--gutter-48); }
.padding-vertical { padding-top: var(--gutter-48); padding-bottom: var(--gutter-48); }
.padding-horizontal { padding-left: var(--gutter-48); padding-right: var(--gutter-48); }

.padding-0 { padding: var(--gutter-0); }
.padding-1 { padding: var(--gutter-1); }
.padding-2 { padding: var(--gutter-2); }
.padding-3 { padding: var(--gutter-3); }
.padding-5xs { padding: var(--gutter-4); }
.padding-4xs { padding: var(--gutter-8); }
.padding-3xs { padding: var(--gutter-12); }
.padding-2xs { padding: var(--gutter-16); }
.padding-xs { padding: var(--gutter-24); }
.padding-s { padding: var(--gutter-32); }
.padding-m { padding: var(--gutter-48); }
.padding-l { padding: var(--gutter-50-64); }
.padding-xl { padding: var(--gutter-56-80); }
.padding-2xl { padding: var(--gutter-62-96); }
.padding-3xl { padding: var(--gutter-72-128); }
.padding-4xl { padding: var(--gutter-88-160); }
.padding-5xl { padding: var(--gutter-112-192); }

.padding-0-top { padding-top: var(--gutter-0); }
.padding-1-top { padding-top: var(--gutter-1); }
.padding-2-top { padding-top: var(--gutter-2); }
.padding-3-top { padding-top: var(--gutter-3); }
.padding-5xs-top { padding-top: var(--gutter-4); }
.padding-4xs-top { padding-top: var(--gutter-8); }
.padding-3xs-top { padding-top: var(--gutter-12); }
.padding-2xs-top { padding-top: var(--gutter-16); }
.padding-xs-top { padding-top: var(--gutter-24); }
.padding-s-top { padding-top: var(--gutter-32); }
.padding-m-top { padding-top: var(--gutter-48); }
.padding-l-top { padding-top: var(--gutter-50-64); }
.padding-xl-top { padding-top: var(--gutter-56-80); }
.padding-2xl-top { padding-top: var(--gutter-62-96); }
.padding-3xl-top { padding-top: var(--gutter-72-128); }
.padding-4xl-top { padding-top: var(--gutter-88-160); }
.padding-5xl-top { padding-top: var(--gutter-112-192); }

.padding-0-bottom { padding-bottom: var(--gutter-0); }
.padding-1-bottom { padding-bottom: var(--gutter-1); }
.padding-2-bottom { padding-bottom: var(--gutter-2); }
.padding-3-bottom { padding-bottom: var(--gutter-3); }
.padding-5xs-bottom { padding-bottom: var(--gutter-4); }
.padding-4xs-bottom { padding-bottom: var(--gutter-8); }
.padding-3xs-bottom { padding-bottom: var(--gutter-12); }
.padding-2xs-bottom { padding-bottom: var(--gutter-16); }
.padding-xs-bottom { padding-bottom: var(--gutter-24); }
.padding-s-bottom { padding-bottom: var(--gutter-32); }
.padding-m-bottom { padding-bottom: var(--gutter-48); }
.padding-l-bottom { padding-bottom: var(--gutter-50-64); }
.padding-xl-bottom { padding-bottom: var(--gutter-56-80); }
.padding-2xl-bottom { padding-bottom: var(--gutter-62-96); }
.padding-3xl-bottom { padding-bottom: var(--gutter-72-128); }
.padding-4xl-bottom { padding-bottom: var(--gutter-88-160); }
.padding-5xl-bottom { padding-bottom: var(--gutter-112-192); }

.padding-0-left { padding-left: var(--gutter-0); }
.padding-1-left { padding-left: var(--gutter-1); }
.padding-2-left { padding-left: var(--gutter-2); }
.padding-3-left { padding-left: var(--gutter-3); }
.padding-5xs-left { padding-left: var(--gutter-4); }
.padding-4xs-left { padding-left: var(--gutter-8); }
.padding-3xs-left { padding-left: var(--gutter-12); }
.padding-2xs-left { padding-left: var(--gutter-16); }
.padding-xs-left { padding-left: var(--gutter-24); }
.padding-s-left { padding-left: var(--gutter-32); }
.padding-m-left { padding-left: var(--gutter-48); }
.padding-l-left { padding-left: var(--gutter-50-64); }
.padding-xl-left { padding-left: var(--gutter-56-80); }
.padding-2xl-left { padding-left: var(--gutter-62-96); }
.padding-3xl-left { padding-left: var(--gutter-72-128); }
.padding-4xl-left { padding-left: var(--gutter-88-160); }
.padding-5xl-left { padding-left: var(--gutter-112-192); }

.padding-0-right { padding-right: var(--gutter-0); }
.padding-1-right { padding-right: var(--gutter-1); }
.padding-2-right { padding-right: var(--gutter-2); }
.padding-3-right { padding-right: var(--gutter-3); }
.padding-5xs-right { padding-right: var(--gutter-4); }
.padding-4xs-right { padding-right: var(--gutter-8); }
.padding-3xs-right { padding-right: var(--gutter-12); }
.padding-2xs-right { padding-right: var(--gutter-16); }
.padding-xs-right { padding-right: var(--gutter-24); }
.padding-s-right { padding-right: var(--gutter-32); }
.padding-m-right { padding-right: var(--gutter-48); }
.padding-l-right { padding-right: var(--gutter-50-64); }
.padding-xl-right { padding-right: var(--gutter-56-80); }
.padding-2xl-right { padding-right: var(--gutter-62-96); }
.padding-3xl-right { padding-right: var(--gutter-72-128); }
.padding-4xl-right { padding-right: var(--gutter-88-160); }
.padding-5xl-right { padding-right: var(--gutter-112-192); }

.padding-0-vertical { padding-top: var(--gutter-0); padding-bottom: var(--gutter-0); }
.padding-1-vertical { padding-top: var(--gutter-1); padding-bottom: var(--gutter-1); }
.padding-2-vertical { padding-top: var(--gutter-2); padding-bottom: var(--gutter-2); }
.padding-3-vertical { padding-top: var(--gutter-3); padding-bottom: var(--gutter-3); }
.padding-5xs-vertical { padding-top: var(--gutter-4); padding-bottom: var(--gutter-4); }
.padding-4xs-vertical { padding-top: var(--gutter-8); padding-bottom: var(--gutter-8); }
.padding-3xs-vertical { padding-top: var(--gutter-12); padding-bottom: var(--gutter-12); }
.padding-2xs-vertical { padding-top: var(--gutter-16); padding-bottom: var(--gutter-16); }
.padding-xs-vertical { padding-top: var(--gutter-24); padding-bottom: var(--gutter-24); }
.padding-s-vertical { padding-top: var(--gutter-32); padding-bottom: var(--gutter-32); }
.padding-m-vertical { padding-top: var(--gutter-48); padding-bottom: var(--gutter-48); }
.padding-l-vertical { padding-top: var(--gutter-50-64); padding-bottom: var(--gutter-50-64); }
.padding-xl-vertical { padding-top: var(--gutter-56-80); padding-bottom: var(--gutter-56-80); }
.padding-2xl-vertical { padding-top: var(--gutter-62-96); padding-bottom: var(--gutter-62-96); }
.padding-3xl-vertical { padding-top: var(--gutter-72-128); padding-bottom: var(--gutter-72-128); }
.padding-4xl-vertical { padding-top: var(--gutter-88-160); padding-bottom: var(--gutter-88-160); }
.padding-5xl-vertical { padding-top: var(--gutter-112-192); padding-bottom: var(--gutter-112-192); }

.padding-0-horizontal { padding-left: var(--gutter-0); padding-right: var(--gutter-0); }
.padding-1-horizontal { padding-left: var(--gutter-1); padding-right: var(--gutter-1); }
.padding-2-horizontal { padding-left: var(--gutter-2); padding-right: var(--gutter-2); }
.padding-3-horizontal { padding-left: var(--gutter-3); padding-right: var(--gutter-3); }
.padding-5xs-horizontal { padding-left: var(--gutter-4); padding-right: var(--gutter-4); }
.padding-4xs-horizontal { padding-left: var(--gutter-8); padding-right: var(--gutter-8); }
.padding-3xs-horizontal { padding-left: var(--gutter-12); padding-right: var(--gutter-12); }
.padding-2xs-horizontal { padding-left: var(--gutter-16); padding-right: var(--gutter-16); }
.padding-xs-horizontal { padding-left: var(--gutter-24); padding-right: var(--gutter-24); }
.padding-s-horizontal { padding-left: var(--gutter-32); padding-right: var(--gutter-32); }
.padding-m-horizontal { padding-left: var(--gutter-48); padding-right: var(--gutter-48); }
.padding-l-horizontal { padding-left: var(--gutter-50-64); padding-right: var(--gutter-50-64); }
.padding-xl-horizontal { padding-left: var(--gutter-56-80); padding-right: var(--gutter-56-80); }
.padding-2xl-horizontal { padding-left: var(--gutter-62-96); padding-right: var(--gutter-62-96); }
.padding-3xl-horizontal { padding-left: var(--gutter-72-128); padding-right: var(--gutter-72-128); }
.padding-4xl-horizontal { padding-left: var(--gutter-88-160); padding-right: var(--gutter-88-160); }
.padding-5xl-horizontal { padding-left: var(--gutter-112-192); padding-right: var(--gutter-112-192); }

.padding-collapse, .padding-remove { padding: 0 !important; }

.padding-remove-top { padding-top: 0 !important; }
.padding-remove-bottom { padding-bottom: 0 !important; }
.padding-remove-left { padding-left: 0 !important; }
.padding-remove-right { padding-right: 0 !important; }
.padding-remove-vertical { padding-top: 0 !important; padding-bottom: 0 !important; }
.padding-remove-horizontal { padding-left: 0 !important; padding-right: 0 !important; }


/* component: position */
[class*="position-top"],
[class*="position-bottom"],
[class*="position-left"],
[class*="position-right"],
[class*="position-center"] {
position: absolute !important;
max-width: calc(100% - (var(--position-margin-offset) * 2));
box-sizing: border-box;
}

.position-top { top: 0; left: 0; right: 0; }
.position-bottom { bottom: 0; left: 0; right: 0; }
.position-left { top: 0; bottom: 0; left: 0; }
.position-right { top: 0; bottom: 0; right: 0; }
.position-top-left { top: 0; left: 0; }
.position-top-right { top: 0; right: 0; }
.position-bottom-left { bottom: 0; left: 0; }
.position-bottom-right { bottom: 0; right: 0; }

.position-center {
top: calc(50% - var(--position-margin-offset));
left: calc(50% - var(--position-margin-offset));
--position-translate-x: -50%;
--position-translate-y: -50%;
transform: translate(var(--position-translate-x), var(--position-translate-y));
width: max-content;
}

[class*="position-center-left"],
[class*="position-center-right"],
.position-center-vertical {
top: calc(50% - var(--position-margin-offset));
--position-translate-y: -50%;
transform: translate(0, var(--position-translate-y));
}

.position-center-left { left: 0; }
.position-center-right { right: 0; }
.position-center-vertical { left: 0; right: 0; }

.position-center-left-out { right: 100%; width: max-content; }
.position-center-right-out { left: 100%; width: max-content; }

.position-top-center,
.position-bottom-center,
.position-center-horizontal {
left: calc(50% - var(--position-margin-offset));
--position-translate-x: -50%;
transform: translate(var(--position-translate-x), 0);
width: max-content;
}

.position-top-center { top: 0; }
.position-bottom-center { bottom: 0; }
.position-center-horizontal { top: 0; bottom: 0; }

.position-cover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.position-s { margin: var(--gutter-22); --position-margin-offset: var(--gutter-22); }
.position-m { margin: var(--gutter-24); --position-margin-offset: var(--gutter-24); }
.position-l { margin: var(--gutter-28); --position-margin-offset: var(--gutter-28); }

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

.position-z-index { z-index: 1; }
.position-z-index-zero { z-index: 0; }
.position-z-index-negative { z-index: -1; }
.position-z-index-high { z-index: 990; }
.position-z-index-highest { z-index: 1060; }


/* component: transition */
:where(.transition-fade),
:where([class*="transition-scale"]),
:where([class*="transition-slide"]) {
--position-translate-x: 0;
--position-translate-y: 0;
}

.transition-fade,
[class*="transition-scale"],
[class*="transition-slide"] {
--translate-x: 0;
--translate-y: 0;
--scale-x: 1;
--scale-y: 1;
transform: translate(var(--position-translate-x), var(--position-translate-y)) translate(var(--translate-x), var(--translate-y)) scale(var(--scale-x), var(--scale-y));
transition: 0.3s ease-out;
transition-property: opacity, transform, filter;
opacity: 0;
}

.transition-toggle:hover .transition-fade,
.transition-toggle:focus .transition-fade,
.transition-toggle:focus-within .transition-fade,
.transition-active.active .transition-fade { opacity: 1; }

[class*="transition-scale"] { -webkit-backface-visibility: hidden; }

.transition-scale-up { --scale-x: 1; --scale-y: 1; }
.transition-scale-down { --scale-x: 1.03; --scale-y: 1.03; }

.transition-toggle:hover .transition-scale-up,
.transition-toggle:focus .transition-scale-up,
.transition-toggle:focus-within .transition-scale-up,
.transition-active.active .transition-scale-up {
--scale-x: 1.03;
--scale-y: 1.03;
opacity: 1;
}

.transition-toggle:hover .transition-scale-down,
.transition-toggle:focus .transition-scale-down,
.transition-toggle:focus-within .transition-scale-down,
.transition-active.active .transition-scale-down {
--scale-x: 1;
--scale-y: 1;
opacity: 1;
}

.transition-slide-top { --translate-y: -100%; }
.transition-slide-bottom { --translate-y: 100%; }
.transition-slide-left { --translate-x: -100%; }
.transition-slide-right { --translate-x: 100%; }
.transition-slide-top-s { --translate-y: calc(-1 * var(--gutter-14)); }
.transition-slide-bottom-s { --translate-y: var(--gutter-14); }
.transition-slide-left-s { --translate-x: calc(-1 * var(--gutter-14)); }
.transition-slide-right-s { --translate-x: var(--gutter-14); }
.transition-slide-top-m { --translate-y: calc(-1 * 50px); }
.transition-slide-bottom-m { --translate-y: 50px; }
.transition-slide-left-m { --translate-x: calc(-1 * 50px); }
.transition-slide-right-m { --translate-x: 50px; }

.transition-toggle:hover [class*="transition-slide"],
.transition-toggle:focus [class*="transition-slide"],
.transition-toggle:focus-within [class*="transition-slide"],
.transition-active.active [class*="transition-slide"] {
--translate-x: 0;
--translate-y: 0;
opacity: 1;
}

.transition-opaque { opacity: 1; }
.transition-slow { transition-duration: 0.7s; }
.transition-disable,
.transition-disable * { transition: none !important; }


/* component: visibility */
[hidden],
.hidden,
.hidden-empty:empty { display: none !important; }

@media (min-width: 576px) { .hidden\@s { display: none !important; } }
@media (min-width: 768px) { .hidden\@m { display: none !important; } }
@media (min-width: 1024px) { .hidden\@l { display: none !important; } }
@media (min-width: 1280px) { .hidden\@xl { display: none !important; } }
@media (max-width: 575px) { .visible\@s { display: none !important; } }
@media (max-width: 767px) { .visible\@m { display: none !important; }  }
@media (max-width: 1023px) { .visible\@l { display: none !important; } }
@media (max-width: 1279px) { .visible\@xl { display: none !important; } }

.invisible { visibility: hidden !important; }

.hidden-visually:not(:focus):not(:active):not(:focus-within),
.visible-toggle:not(:hover):not(:focus) .hidden-hover:not(:focus-visible):not(:has(:focus-visible)),
.visible-toggle:not(:hover):not(:focus) .hidden-hover:not(:focus-within) {
position: absolute !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
border-width: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}

.visible-toggle:not(:hover):not(:focus) .invisible-hover:not(:focus-within) { opacity: 0 !important; }

@media (hover: none) { .hidden-touch { display: none !important; } }
@media (hover) { .hidden-notouch { display: none !important; } }


/* component: focus-visible */
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
outline: solid var(--gutter-1) var(--foreground-heavy);
outline-offset: 0;
}


.lightbox :focus-visible,
.dropbar :focus-visible,
.input-checkbox:has(.input-checkbox-native:focus-visible),
.input-radio:has(.input-radio-native:focus-visible),
.input-color:has(.input-color-field:focus-visible),
.input-text:has(.input-text-field:focus-visible),
.input-email:has(.input-email-field:focus-visible),
.input-url:has(.input-url-field:focus-visible),
.input-password:has(.input-password-field:focus-visible),
.input-tel:has(.input-tel-field:focus-visible),
.input-search:has(.input-search-field:focus-visible),
.input-number:has(.input-number-field:focus-visible),
.input-datetime:has(.input-datetime-field:focus-visible),
.input-range:has(.input-range-thumb:focus-visible),
.input-range:has(.input-range-field:focus-visible),
.input-range > .input-range-field:focus-visible {
outline: solid var(--gutter-1) var(--foreground-heavy);
outline-offset: calc(var(--gutter-2) * -1);
border-color: var(--foreground-heavy);
}

.input-color > .input-color-field:focus-visible,
.input-text > .input-text-field:focus-visible,
.input-email > .input-email-field:focus-visible,
.input-url > .input-url-field:focus-visible,
.input-password > .input-password-field:focus-visible,
.input-tel > .input-tel-field:focus-visible,
.input-search > .input-search-field:focus-visible,
.input-number > .input-number-field:focus-visible,
.input-datetime > .input-datetime-field:focus-visible,
.input-range > .input-range-field:focus-visible { outline: none; }


/* component: ripple */
.ripple {
display: block;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
margin: 0;
max-width: none;
max-height: none;
padding: 0;
background-color: currentcolor;
border: none;
border-radius: 50%;
opacity: 0.750;
pointer-events: none;
transform: scale(0);
transition-delay: 0ms;
transition-duration: 600ms;
transition-property: transform, opacity;
transition-timing-function: ease-out;
will-change: transform, opacity;
}

.dotnav > * > * > .ripple { margin: 0; }
.button > .ripple { margin: 0; }
.ripple-active { opacity: 0; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .ripple { display: none; } }


/* component: logo */
.logo { display: inline-flex; vertical-align: top; }
.logo-top { width: var(--logo-top-width); }
.logo-bottom { width: var(--logo-bottom-width); }
.logo-offcanvas { width: var(--logo-offcanvas-width); }


/* component: disabled */
[disabled] *,
:disabled *,
.disabled *,
[disabled],
:disabled,
.disabled {
pointer-events: none !important;
opacity: 0.25 !important;
filter: grayscale(100%) !important;
color: currentcolor !important;
}


[disabled] *,
:disabled *,
.disabled * {
color: currentcolor !important;
opacity: 1 !important;
}

*[data-slider-item="previous"].invisible,
*[data-slider-item="next"].invisible,
*[data-slideshow-item="previous"].invisible,
*[data-slideshow-item="next"].invisible {
visibility: visible !important;
pointer-events: none !important;
opacity: 0.25 !important;
filter: grayscale(100%) !important;
}