/* Base reveal.js styles — neutral default theme.
 *
 * Copy this file as styles.css for each new presentation.
 * Ships a clean, brand-neutral look: IBM Plex Sans/Mono with a blue/teal/slate
 * palette. Customize the CSS variables below, or apply a theme.
 *
 * IMPORTANT: All font sizes use pt (points) for predictable sizing.
 * Base text is intentionally small (16pt) to fit content-heavy slides.
 * Use .text-lg, .text-xl, etc. classes when slides have less content.
 */


/* inlined: https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap */
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/-F63fjptAgt5VM-kVkqdyU8n1iIq131nj-otFQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/-F63fjptAgt5VM-kVkqdyU8n1isq131nj-otFQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/-F63fjptAgt5VM-kVkqdyU8n1iAq131nj-otFQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/-F6qfjptAgt5VM-kVkqdyU8n3twJwl1FgsAXHNlYzg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/-F6qfjptAgt5VM-kVkqdyU8n3twJwlRFgsAXHNlYzg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/-F6qfjptAgt5VM-kVkqdyU8n3twJwl9FgsAXHNlYzg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/-F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgsAXHNlYzg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgsAXHNk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl1FgsAXHNlYzg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlRFgsAXHNlYzg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl9FgsAXHNlYzg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgsAXHNlYzg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgsAXHNk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbSB4ZhRNU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbSB4ZhRNU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbSB4ZhRNU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbSB4ZhRNU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbSB4ZhRNU-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbSB4ZhRNU-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbSB4ZhRNU-3.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbSB4ZhRNU-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbSB4ZhRNU-7.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbSB4ZhRNU-8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbSB4ZhRNU-9.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbSB4ZhRNU-10.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU-11.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh-12.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbSB4ZhRNU-13.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbSB4ZhRNU-14.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbSB4ZhRNU-15.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbSB4ZhRNU-16.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU-17.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh-18.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbSB4ZhRNU-19.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbSB4ZhRNU-20.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbSB4ZhRNU-21.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbSB4ZhRNU-22.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU-23.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh-24.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* @studio-theme nordakademiker-ev-offizielle-alumni-organisation hash:2347d5e40375 — managed by Estradeck. Edit via the theme, not here. */
:root {
  --primary-color: #005bd1;
  --secondary-color: #0acc84;
  --accent-purple: #2cd2ff;
  --ink: #000000;
  --background-color: #ffffff;
  --section-divider-bg: #000000;
  --text-color: #2d3338;
  --muted-color: rgba(45, 51, 56, 0.55);
  --line-color: rgba(45, 51, 56, 0.16);
}
/* @end-studio-theme */

/* ===========================================
   CSS VARIABLES - Customize these for each presentation
   =========================================== */
:root {
  --heading-font: "IBM Plex Sans", Helvetica, sans-serif;
  --body-font: "IBM Plex Sans", Helvetica, sans-serif;
  --mono-font: "IBM Plex Mono", monospace;
  --base-font-size: 32px;
  --text-size: 16pt;
  --h1-size: 48pt;
  --h2-size: 36pt;
  --h3-size: 24pt;
  --footnote-size: 11pt;
  --slide-padding: 60px;
  --slide-padding-top: 40px;
  --content-gap: 30px;
  --box-radius: 14px;
}

/* ===========================================
   BASE STYLES - Override reveal.js defaults
   =========================================== */

.reveal {
  font-family: var(--body-font);
  font-size: var(--base-font-size);
}

/* Restore bold after reset.css strips it with font: inherit */
.reveal strong,
.reveal b {
  font-weight: bold;
}

/* Apply background colors */
.reveal-viewport {
  background-color: var(--background-color);
}

/* Hide reveal's built-in nav arrows in every presentation — navigate with the
   arrow keys, space, or by clicking. */
.reveal .controls {
  display: none !important;
}

/* Section divider background via data-state */
.reveal-viewport.is-section-divider .slide-background.present {
  background-color: var(--section-divider-bg) !important;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: var(--heading-font);
  text-transform: none;
  color: var(--text-color);
  font-weight: 700;   /* Headings are heavy/bold */
  line-height: 1.15;
}

.reveal h1 { font-size: var(--h1-size); }
.reveal h2 { font-size: var(--h2-size); margin-bottom: 0; }
.reveal h3 { font-size: var(--h3-size); }

.reveal p,
.reveal li,
.reveal td,
.reveal th,
.reveal blockquote {
  font-size: var(--text-size);
  color: var(--text-color);
  line-height: 1.5;
}

/* ===========================================
   LISTS
   =========================================== */

.reveal ul {
  list-style: none;
  padding-left: 0;
  margin: 15px 0;
}

.reveal ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}

.reveal ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--text-color);
  border-radius: 50%;
}

.reveal ul ul li::before {
  background: var(--muted-color);
  width: 6px;
  height: 6px;
}

/* Prevent double-sizing for nested elements */
.reveal blockquote p {
  font-size: inherit;
}

/* ===========================================
   SLIDE LAYOUT
   =========================================== */

.reveal .slides section {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  padding: var(--slide-padding-top) var(--slide-padding) var(--slide-padding) var(--slide-padding) !important;
  box-sizing: border-box;
  text-align: left;
}

/* Vertical stack wrapper - no padding, just pass through */
.reveal .slides section.stack {
  padding: 0 !important;
}

/* Content area - fills remaining space */
.reveal .slides section > .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--content-gap);
  text-align: left;
}

/* Footnotes at bottom */
.reveal .slides section > .footnote {
  position: absolute;
  bottom: 15px;
  left: var(--slide-padding);
  right: var(--slide-padding);
  font-size: var(--footnote-size);
  color: var(--muted-color);
}

/* ===========================================
   SECTION DIVIDERS - Centered title slides
   =========================================== */

.reveal .slides section.section-divider {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}

.reveal .slides section.section-divider h1 {
  font-size: 60pt;
  text-align: center;
  /* Dividers sit on the dark --section-divider-bg, so the headline uses the accent */
  color: var(--secondary-color);
}

.reveal .slides section.section-divider p {
  font-size: 20pt;
  color: rgba(255, 255, 255, 0.8);
}

/* ===========================================
   TEXT SIZE UTILITIES

   Base text is 16pt - use these to scale UP when
   slides have less content and you want to fill space.
   =========================================== */

.text-lg { font-size: 18pt !important; }   /* Slightly larger */
.text-xl { font-size: 20pt !important; }   /* Medium emphasis */
.text-2xl { font-size: 24pt !important; }  /* Strong emphasis */
.text-3xl { font-size: 28pt !important; }  /* Very large */
.text-4xl { font-size: 32pt !important; }  /* Maximum body text */

/* Other text utilities */
.text-muted { color: var(--muted-color) !important; }
.text-center { text-align: center !important; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.1em; }
.font-light { font-weight: 300; }
.font-bold { font-weight: 600; }

/* ===========================================
   BLOCKQUOTES
   =========================================== */

.reveal blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  background: none;
  box-shadow: none;
  width: 100%;
  max-width: none;
}

.reveal blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: var(--muted-color);
}

/* ===========================================
   OPTIONAL: TITLE WITH UNDERLINE

   Add this to presentations where you want
   a line under the slide title.
   =========================================== */

/*
.reveal .slides section > h1,
.reveal .slides section > h2 {
  flex-shrink: 0;
  margin: 0;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--line-color);
}
*/

/* ===========================================
   OPTIONAL: DECORATIVE ELEMENTS
   =========================================== */

/* Top decorative line on all slides */
/*
.reveal .slides section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-color);
}
*/

/* Bottom decorative line */
/*
.reveal .slides section::after {
  content: '';
  position: absolute;
  bottom: 40px;
  left: var(--slide-padding);
  right: var(--slide-padding);
  height: 2px;
  background: var(--line-color);
}
*/

/* ===========================================
   REUSABLE UTILITIES
   Optional pieces for polished decks:
   color-block slides, mono kicker + bold headline, pill label.
   =========================================== */

/* Mono kicker / lead-in line above a bold headline (signature lockup) */
.kicker {
  font-family: var(--mono-font);
  font-size: 17pt;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px 0;
}

/* Eyebrow - mono, uppercase, tracked out (smaller label than .kicker) */
.eyebrow {
  font-family: var(--mono-font);
  font-size: 13pt;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary-color);
  margin: 0 0 18px 0;
}

/* Accent gradient text (use sparingly; flat two-tone usually reads better) */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-purple) 45%, var(--secondary-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* White rounded pill - logo lockup / tag */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  color: var(--primary-color);
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 20pt;
  line-height: 1;
}
.pill i { color: var(--primary-color); }

/* Thin gradient accent bar */
.accent-bar {
  width: 72px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  margin: 0 0 26px 0;
}

/* ---- COLOR-BLOCK SLIDES ----
   Pair each class with a matching data-background-color on the <section>:
     <section class="on-dark" data-background-color="#7c3aed"> ... (light text)
     <section class="on-light"   data-background-color="#ec4899"> ... (dark text)
     <section class="on-dark"   data-background-color="#0f172a"> ... (white text) */

/* Purple background -> white body, pink accents (the "Fachkräftemangel?" look) */
.reveal .slides section.on-dark h1,
.reveal .slides section.on-dark h2,
.reveal .slides section.on-dark h3,
.reveal .slides section.on-dark p,
.reveal .slides section.on-dark li { color: #ffffff; }
.reveal .slides section.on-dark .kicker { color: rgba(255, 255, 255, 0.8); }
.reveal .slides section.on-dark .text-muted { color: rgba(255, 255, 255, 0.65) !important; }
.reveal .slides section.on-dark .footnote { color: rgba(255, 255, 255, 0.55); }
.reveal .slides section.on-dark ul li::before { background: var(--secondary-color); }

/* Pink background -> ink body, purple headings (the "für große Aufgaben." look) */
.reveal .slides section.on-light h1,
.reveal .slides section.on-light h2,
.reveal .slides section.on-light h3 { color: var(--primary-color); }
.reveal .slides section.on-light p,
.reveal .slides section.on-light li { color: var(--ink); }
.reveal .slides section.on-light .kicker { color: var(--ink); }
.reveal .slides section.on-light .text-muted { color: rgba(0, 0, 25, 0.6) !important; }
.reveal .slides section.on-light .footnote { color: rgba(0, 0, 25, 0.55); }
.reveal .slides section.on-light ul li::before { background: var(--primary-color); }

/* Ink background -> white body, pink accents */
.reveal .slides section.on-dark h1,
.reveal .slides section.on-dark h2,
.reveal .slides section.on-dark h3,
.reveal .slides section.on-dark p,
.reveal .slides section.on-dark li { color: #ffffff; }
.reveal .slides section.on-dark .kicker { color: rgba(255, 255, 255, 0.8); }
.reveal .slides section.on-dark .text-muted { color: rgba(255, 255, 255, 0.62) !important; }
.reveal .slides section.on-dark .footnote { color: rgba(255, 255, 255, 0.5); }
.reveal .slides section.on-dark ul li::before { background: var(--secondary-color); }

/* ===========================================
   TWEET / SOCIAL CARD
   Faithful preview of a real tweet. See references/tweet-embeds.md
   for the data-fetch workflow + HTML template.
   =========================================== */
.tweet-card {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 25, 0.1);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 25, 0.12);
  padding: 30px 36px 24px;
  overflow: hidden;
}
/* Accent gradient strip along the top of the card */
.tweet-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.tweet-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.tweet-avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tweet-name {
  font-size: 17pt;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tweet-badge { color: #1d9bf0; font-size: 14pt; }   /* blue verified check */
.tweet-handle {
  font-size: 14pt;
  color: var(--muted-color);
  margin: 2px 0 0;
}
.tweet-logo {
  font-size: 22pt;
  color: var(--ink);
  margin-left: auto;
  align-self: flex-start;
}
.tweet-body {
  font-size: 18pt;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 14px;
}
.tweet-meta {
  font-size: 12.5pt;
  color: var(--muted-color);
  margin: 18px 0 0;
}
.tweet-stats {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 25, 0.08);
}
.tweet-stats p {
  font-size: 14pt;
  color: var(--muted-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Attached tweet media shown beside the card (two-column layout).
   NOTE: cap the <img> with an explicit pixel max-height on tall/portrait
   images — a percentage max-height can't resolve against an auto grid row,
   so the image overflows the slide. See references/tweet-embeds.md. */
.tweet-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}
.tweet-media img {
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 25, 0.1);
  box-shadow: 0 18px 50px rgba(0, 0, 25, 0.14);
}

/* ===========================================
   FANCY FRAGMENT ANIMATIONS (progressive disclosure)
   Opt-in: add to any element together with `fragment`.
     <p class="fragment rise">...</p>
     <p class="pill fragment pop">...</p>
   See references/advanced-features.md.
   =========================================== */

/* Rise + fade + subtle de-blur (text, cards, stats) */
.reveal .fragment.rise {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
}
.reveal .fragment.rise.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Pop / scale-in with a gentle overshoot (pills, badges, numbers) */
.reveal .fragment.pop {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal .fragment.pop.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── "Built with Estradeck" — fixed corner credit shown on every slide ────────
   Dark translucent pill so it reads on light or colored slide backgrounds.
   pointer-events:none so it never blocks the edge click-to-advance nav zones. */
.estradeck-badge {
  /* position is !important: reveal.css's `.reveal a { position: relative }` has
     higher specificity and would otherwise drop the badge into normal flow (top). */
  position: fixed !important;
  top: auto;
  left: auto;
  right: 18px;
  bottom: 16px;
  z-index: 50; /* above the edge nav zones (z-index 34) so the link stays clickable */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 25, 0.55);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 18px rgba(0, 0, 25, 0.28);
  font-family: var(--body-font, "IBM Plex Sans", Helvetica, sans-serif);
  font-size: 11pt;
  line-height: 1;
  letter-spacing: 0.2px;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.estradeck-badge:hover {
  background: rgba(0, 0, 25, 0.72);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 25, 0.35);
}
.estradeck-badge .eb-logo { color: #fea9c6; font-size: 9.5pt; }
.estradeck-badge .eb-text { color: rgba(255, 255, 255, 0.72); font-weight: 500; }
.estradeck-badge .eb-mark { font-weight: 700; white-space: nowrap; }
.estradeck-badge .eb-mark .bm-w { color: #fff; }
.estradeck-badge .eb-mark .bm-g {
  background: linear-gradient(90deg, #fff 0%, #fea9c6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.estradeck-badge .eb-mark .bm-p { color: #fea9c6; }

/* Shrink the badge on phones/tablets — the deck scales down but a fixed-size badge
   would otherwise look oversized against the smaller slide content. */
@media (max-width: 768px), (max-height: 480px) {
  .estradeck-badge {
    right: 6px;
    bottom: 6px;
    gap: 3px;
    padding: 2px 7px 2px 6px;
    font-size: 4.5pt;
  }
  .estradeck-badge .eb-logo { font-size: 4pt; }
}

/* @studio-utilities v8 — curated layout, alignment, spacing, sizing, color, media, type &
   effect utilities. Managed block: `npm run migrate:utilities` copies THIS block verbatim into
   every deck's styles.css. Edit the canonical copy here.

   Robustness: every selector is scoped under `.reveal` (specificity 0,2,0) and declarations use
   !important, so a utility reliably wins over reveal.js's own `.reveal .items-*` / `.justify-*`
   classes and the theme's `.reveal .slides section …` rules. Combined utilities compose by source
   order (e.g. `p-md px-lg` → 24px top/bottom, 40px sides). Conventions: single-purpose names; px
   units (slides are a fixed 1280x720 space); colors derive from the palette CSS variables (incl.
   color-mix tints/glows) so theme swaps + palette edits flow through automatically. Apply
   color/text utilities to the element you want styled (the theme targets h1/p/li directly, so
   coloring a container won't recolor those children).
   =========================================== */

/* ---- Layout containers ------------------------------------------------- */
.reveal .row       { display: flex !important; flex-direction: row !important; }
.reveal .col       { display: flex !important; flex-direction: column !important; }
.reveal .grid-2    { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.reveal .grid-3    { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.reveal .grid-4    { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.reveal .grid-auto { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
.reveal .wrap      { flex-wrap: wrap !important; }

/* ---- Flex / grid alignment --------------------------------------------- */
.reveal .items-start    { align-items: flex-start !important; }
.reveal .items-center   { align-items: center !important; }
.reveal .items-end      { align-items: flex-end !important; }
.reveal .items-stretch  { align-items: stretch !important; }
.reveal .items-baseline { align-items: baseline !important; }
.reveal .justify-start   { justify-content: flex-start !important; }
.reveal .justify-center  { justify-content: center !important; }
.reveal .justify-end     { justify-content: flex-end !important; }
.reveal .justify-between { justify-content: space-between !important; }
.reveal .justify-around  { justify-content: space-around !important; }
.reveal .justify-evenly  { justify-content: space-evenly !important; }
.reveal .self-start  { align-self: flex-start !important; }
.reveal .self-center { align-self: center !important; }
.reveal .self-end    { align-self: flex-end !important; }
.reveal .place-center { display: flex !important; align-items: center !important; justify-content: center !important; }
.reveal .flex-1   { flex: 1 1 0 !important; min-width: 0 !important; min-height: 0 !important; }
.reveal .grow     { flex-grow: 1 !important; }
.reveal .shrink-0 { flex-shrink: 0 !important; }

/* ---- Gap (t-shirt scale) ----------------------------------------------- */
.reveal .gap-xs { gap: 8px !important; }
.reveal .gap-sm { gap: 16px !important; }
.reveal .gap-md { gap: 24px !important; }
.reveal .gap-lg { gap: 40px !important; }
.reveal .gap-xl { gap: 64px !important; }

/* ---- Padding ----------------------------------------------------------- */
.reveal .p-xs { padding: 8px !important; }
.reveal .p-sm { padding: 16px !important; }
.reveal .p-md { padding: 24px !important; }
.reveal .p-lg { padding: 40px !important; }
.reveal .p-xl { padding: 64px !important; }
.reveal .px-xs { padding-left: 8px !important;  padding-right: 8px !important; }
.reveal .px-sm { padding-left: 16px !important; padding-right: 16px !important; }
.reveal .px-md { padding-left: 24px !important; padding-right: 24px !important; }
.reveal .px-lg { padding-left: 40px !important; padding-right: 40px !important; }
.reveal .py-xs { padding-top: 8px !important;  padding-bottom: 8px !important; }
.reveal .py-sm { padding-top: 16px !important; padding-bottom: 16px !important; }
.reveal .py-md { padding-top: 24px !important; padding-bottom: 24px !important; }
.reveal .py-lg { padding-top: 40px !important; padding-bottom: 40px !important; }

/* ---- Margin (mx-auto centers; mt-auto pins to the bottom of a flex column) */
.reveal .m-xs { margin: 8px !important; }
.reveal .m-sm { margin: 16px !important; }
.reveal .m-md { margin: 24px !important; }
.reveal .m-lg { margin: 40px !important; }
.reveal .mt-xs { margin-top: 8px !important; }   .reveal .mb-xs { margin-bottom: 8px !important; }
.reveal .mt-sm { margin-top: 16px !important; }  .reveal .mb-sm { margin-bottom: 16px !important; }
.reveal .mt-md { margin-top: 24px !important; }  .reveal .mb-md { margin-bottom: 24px !important; }
.reveal .mt-lg { margin-top: 40px !important; }  .reveal .mb-lg { margin-bottom: 40px !important; }
.reveal .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.reveal .mt-auto { margin-top: auto !important; }

/* ---- Sizing ------------------------------------------------------------ */
.reveal .w-full       { width: 100% !important; }
.reveal .w-half       { width: 50% !important; }
.reveal .w-third      { width: 33.3333% !important; }
.reveal .w-two-thirds { width: 66.6667% !important; }
.reveal .w-quarter    { width: 25% !important; }
.reveal .h-full       { height: 100% !important; }
.reveal .mw-sm { max-width: 480px !important; }
.reveal .mw-md { max-width: 720px !important; }
.reveal .mw-lg { max-width: 960px !important; }

/* ---- Numeric scale (Tailwind-style: 1 unit = 4px; w-12 = 48px) --------- */
/* Widths & heights */
.reveal .w-1 { width: 4px !important; }
.reveal .w-2 { width: 8px !important; }
.reveal .w-3 { width: 12px !important; }
.reveal .w-4 { width: 16px !important; }
.reveal .w-5 { width: 20px !important; }
.reveal .w-6 { width: 24px !important; }
.reveal .w-8 { width: 32px !important; }
.reveal .w-10 { width: 40px !important; }
.reveal .w-12 { width: 48px !important; }
.reveal .w-14 { width: 56px !important; }
.reveal .w-16 { width: 64px !important; }
.reveal .w-20 { width: 80px !important; }
.reveal .w-24 { width: 96px !important; }
.reveal .w-28 { width: 112px !important; }
.reveal .w-32 { width: 128px !important; }
.reveal .w-36 { width: 144px !important; }
.reveal .w-40 { width: 160px !important; }
.reveal .w-48 { width: 192px !important; }
.reveal .w-56 { width: 224px !important; }
.reveal .w-64 { width: 256px !important; }
.reveal .w-72 { width: 288px !important; }
.reveal .w-80 { width: 320px !important; }
.reveal .w-96 { width: 384px !important; }
.reveal .h-1 { height: 4px !important; }
.reveal .h-2 { height: 8px !important; }
.reveal .h-3 { height: 12px !important; }
.reveal .h-4 { height: 16px !important; }
.reveal .h-5 { height: 20px !important; }
.reveal .h-6 { height: 24px !important; }
.reveal .h-8 { height: 32px !important; }
.reveal .h-10 { height: 40px !important; }
.reveal .h-12 { height: 48px !important; }
.reveal .h-14 { height: 56px !important; }
.reveal .h-16 { height: 64px !important; }
.reveal .h-20 { height: 80px !important; }
.reveal .h-24 { height: 96px !important; }
.reveal .h-28 { height: 112px !important; }
.reveal .h-32 { height: 128px !important; }
.reveal .h-36 { height: 144px !important; }
.reveal .h-40 { height: 160px !important; }
.reveal .h-48 { height: 192px !important; }
.reveal .h-56 { height: 224px !important; }
.reveal .h-64 { height: 256px !important; }
.reveal .h-72 { height: 288px !important; }
.reveal .h-80 { height: 320px !important; }
.reveal .h-96 { height: 384px !important; }
/* Padding — all sides, per side, and per axis */
.reveal .p-0 { padding: 0px !important; }
.reveal .p-1 { padding: 4px !important; }
.reveal .p-2 { padding: 8px !important; }
.reveal .p-3 { padding: 12px !important; }
.reveal .p-4 { padding: 16px !important; }
.reveal .p-5 { padding: 20px !important; }
.reveal .p-6 { padding: 24px !important; }
.reveal .p-8 { padding: 32px !important; }
.reveal .p-10 { padding: 40px !important; }
.reveal .p-12 { padding: 48px !important; }
.reveal .p-16 { padding: 64px !important; }
.reveal .p-20 { padding: 80px !important; }
.reveal .p-24 { padding: 96px !important; }
.reveal .p-28 { padding: 112px !important; }
.reveal .p-32 { padding: 128px !important; }
.reveal .p-36 { padding: 144px !important; }
.reveal .p-40 { padding: 160px !important; }
.reveal .p-48 { padding: 192px !important; }
.reveal .p-56 { padding: 224px !important; }
.reveal .p-64 { padding: 256px !important; }
.reveal .pt-0 { padding-top: 0px !important; }
.reveal .pt-1 { padding-top: 4px !important; }
.reveal .pt-2 { padding-top: 8px !important; }
.reveal .pt-3 { padding-top: 12px !important; }
.reveal .pt-4 { padding-top: 16px !important; }
.reveal .pt-5 { padding-top: 20px !important; }
.reveal .pt-6 { padding-top: 24px !important; }
.reveal .pt-8 { padding-top: 32px !important; }
.reveal .pt-10 { padding-top: 40px !important; }
.reveal .pt-12 { padding-top: 48px !important; }
.reveal .pt-16 { padding-top: 64px !important; }
.reveal .pt-20 { padding-top: 80px !important; }
.reveal .pt-24 { padding-top: 96px !important; }
.reveal .pt-28 { padding-top: 112px !important; }
.reveal .pt-32 { padding-top: 128px !important; }
.reveal .pt-36 { padding-top: 144px !important; }
.reveal .pt-40 { padding-top: 160px !important; }
.reveal .pt-48 { padding-top: 192px !important; }
.reveal .pt-56 { padding-top: 224px !important; }
.reveal .pt-64 { padding-top: 256px !important; }
.reveal .pr-0 { padding-right: 0px !important; }
.reveal .pr-1 { padding-right: 4px !important; }
.reveal .pr-2 { padding-right: 8px !important; }
.reveal .pr-3 { padding-right: 12px !important; }
.reveal .pr-4 { padding-right: 16px !important; }
.reveal .pr-5 { padding-right: 20px !important; }
.reveal .pr-6 { padding-right: 24px !important; }
.reveal .pr-8 { padding-right: 32px !important; }
.reveal .pr-10 { padding-right: 40px !important; }
.reveal .pr-12 { padding-right: 48px !important; }
.reveal .pr-16 { padding-right: 64px !important; }
.reveal .pr-20 { padding-right: 80px !important; }
.reveal .pr-24 { padding-right: 96px !important; }
.reveal .pr-28 { padding-right: 112px !important; }
.reveal .pr-32 { padding-right: 128px !important; }
.reveal .pr-36 { padding-right: 144px !important; }
.reveal .pr-40 { padding-right: 160px !important; }
.reveal .pr-48 { padding-right: 192px !important; }
.reveal .pr-56 { padding-right: 224px !important; }
.reveal .pr-64 { padding-right: 256px !important; }
.reveal .pb-0 { padding-bottom: 0px !important; }
.reveal .pb-1 { padding-bottom: 4px !important; }
.reveal .pb-2 { padding-bottom: 8px !important; }
.reveal .pb-3 { padding-bottom: 12px !important; }
.reveal .pb-4 { padding-bottom: 16px !important; }
.reveal .pb-5 { padding-bottom: 20px !important; }
.reveal .pb-6 { padding-bottom: 24px !important; }
.reveal .pb-8 { padding-bottom: 32px !important; }
.reveal .pb-10 { padding-bottom: 40px !important; }
.reveal .pb-12 { padding-bottom: 48px !important; }
.reveal .pb-16 { padding-bottom: 64px !important; }
.reveal .pb-20 { padding-bottom: 80px !important; }
.reveal .pb-24 { padding-bottom: 96px !important; }
.reveal .pb-28 { padding-bottom: 112px !important; }
.reveal .pb-32 { padding-bottom: 128px !important; }
.reveal .pb-36 { padding-bottom: 144px !important; }
.reveal .pb-40 { padding-bottom: 160px !important; }
.reveal .pb-48 { padding-bottom: 192px !important; }
.reveal .pb-56 { padding-bottom: 224px !important; }
.reveal .pb-64 { padding-bottom: 256px !important; }
.reveal .pl-0 { padding-left: 0px !important; }
.reveal .pl-1 { padding-left: 4px !important; }
.reveal .pl-2 { padding-left: 8px !important; }
.reveal .pl-3 { padding-left: 12px !important; }
.reveal .pl-4 { padding-left: 16px !important; }
.reveal .pl-5 { padding-left: 20px !important; }
.reveal .pl-6 { padding-left: 24px !important; }
.reveal .pl-8 { padding-left: 32px !important; }
.reveal .pl-10 { padding-left: 40px !important; }
.reveal .pl-12 { padding-left: 48px !important; }
.reveal .pl-16 { padding-left: 64px !important; }
.reveal .pl-20 { padding-left: 80px !important; }
.reveal .pl-24 { padding-left: 96px !important; }
.reveal .pl-28 { padding-left: 112px !important; }
.reveal .pl-32 { padding-left: 128px !important; }
.reveal .pl-36 { padding-left: 144px !important; }
.reveal .pl-40 { padding-left: 160px !important; }
.reveal .pl-48 { padding-left: 192px !important; }
.reveal .pl-56 { padding-left: 224px !important; }
.reveal .pl-64 { padding-left: 256px !important; }
.reveal .px-0 { padding-left: 0px !important; padding-right: 0px !important; }
.reveal .px-1 { padding-left: 4px !important; padding-right: 4px !important; }
.reveal .px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.reveal .px-3 { padding-left: 12px !important; padding-right: 12px !important; }
.reveal .px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.reveal .px-5 { padding-left: 20px !important; padding-right: 20px !important; }
.reveal .px-6 { padding-left: 24px !important; padding-right: 24px !important; }
.reveal .px-8 { padding-left: 32px !important; padding-right: 32px !important; }
.reveal .px-10 { padding-left: 40px !important; padding-right: 40px !important; }
.reveal .px-12 { padding-left: 48px !important; padding-right: 48px !important; }
.reveal .px-16 { padding-left: 64px !important; padding-right: 64px !important; }
.reveal .px-20 { padding-left: 80px !important; padding-right: 80px !important; }
.reveal .px-24 { padding-left: 96px !important; padding-right: 96px !important; }
.reveal .px-28 { padding-left: 112px !important; padding-right: 112px !important; }
.reveal .px-32 { padding-left: 128px !important; padding-right: 128px !important; }
.reveal .px-36 { padding-left: 144px !important; padding-right: 144px !important; }
.reveal .px-40 { padding-left: 160px !important; padding-right: 160px !important; }
.reveal .px-48 { padding-left: 192px !important; padding-right: 192px !important; }
.reveal .px-56 { padding-left: 224px !important; padding-right: 224px !important; }
.reveal .px-64 { padding-left: 256px !important; padding-right: 256px !important; }
.reveal .py-0 { padding-top: 0px !important; padding-bottom: 0px !important; }
.reveal .py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.reveal .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.reveal .py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
.reveal .py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
.reveal .py-5 { padding-top: 20px !important; padding-bottom: 20px !important; }
.reveal .py-6 { padding-top: 24px !important; padding-bottom: 24px !important; }
.reveal .py-8 { padding-top: 32px !important; padding-bottom: 32px !important; }
.reveal .py-10 { padding-top: 40px !important; padding-bottom: 40px !important; }
.reveal .py-12 { padding-top: 48px !important; padding-bottom: 48px !important; }
.reveal .py-16 { padding-top: 64px !important; padding-bottom: 64px !important; }
.reveal .py-20 { padding-top: 80px !important; padding-bottom: 80px !important; }
.reveal .py-24 { padding-top: 96px !important; padding-bottom: 96px !important; }
.reveal .py-28 { padding-top: 112px !important; padding-bottom: 112px !important; }
.reveal .py-32 { padding-top: 128px !important; padding-bottom: 128px !important; }
.reveal .py-36 { padding-top: 144px !important; padding-bottom: 144px !important; }
.reveal .py-40 { padding-top: 160px !important; padding-bottom: 160px !important; }
.reveal .py-48 { padding-top: 192px !important; padding-bottom: 192px !important; }
.reveal .py-56 { padding-top: 224px !important; padding-bottom: 224px !important; }
.reveal .py-64 { padding-top: 256px !important; padding-bottom: 256px !important; }
/* Margin — all sides, per side, and per axis */
.reveal .m-0 { margin: 0px !important; }
.reveal .m-1 { margin: 4px !important; }
.reveal .m-2 { margin: 8px !important; }
.reveal .m-3 { margin: 12px !important; }
.reveal .m-4 { margin: 16px !important; }
.reveal .m-5 { margin: 20px !important; }
.reveal .m-6 { margin: 24px !important; }
.reveal .m-8 { margin: 32px !important; }
.reveal .m-10 { margin: 40px !important; }
.reveal .m-12 { margin: 48px !important; }
.reveal .m-16 { margin: 64px !important; }
.reveal .m-20 { margin: 80px !important; }
.reveal .m-24 { margin: 96px !important; }
.reveal .m-28 { margin: 112px !important; }
.reveal .m-32 { margin: 128px !important; }
.reveal .m-36 { margin: 144px !important; }
.reveal .m-40 { margin: 160px !important; }
.reveal .m-48 { margin: 192px !important; }
.reveal .m-56 { margin: 224px !important; }
.reveal .m-64 { margin: 256px !important; }
.reveal .mt-0 { margin-top: 0px !important; }
.reveal .mt-1 { margin-top: 4px !important; }
.reveal .mt-2 { margin-top: 8px !important; }
.reveal .mt-3 { margin-top: 12px !important; }
.reveal .mt-4 { margin-top: 16px !important; }
.reveal .mt-5 { margin-top: 20px !important; }
.reveal .mt-6 { margin-top: 24px !important; }
.reveal .mt-8 { margin-top: 32px !important; }
.reveal .mt-10 { margin-top: 40px !important; }
.reveal .mt-12 { margin-top: 48px !important; }
.reveal .mt-16 { margin-top: 64px !important; }
.reveal .mt-20 { margin-top: 80px !important; }
.reveal .mt-24 { margin-top: 96px !important; }
.reveal .mt-28 { margin-top: 112px !important; }
.reveal .mt-32 { margin-top: 128px !important; }
.reveal .mt-36 { margin-top: 144px !important; }
.reveal .mt-40 { margin-top: 160px !important; }
.reveal .mt-48 { margin-top: 192px !important; }
.reveal .mt-56 { margin-top: 224px !important; }
.reveal .mt-64 { margin-top: 256px !important; }
.reveal .mr-0 { margin-right: 0px !important; }
.reveal .mr-1 { margin-right: 4px !important; }
.reveal .mr-2 { margin-right: 8px !important; }
.reveal .mr-3 { margin-right: 12px !important; }
.reveal .mr-4 { margin-right: 16px !important; }
.reveal .mr-5 { margin-right: 20px !important; }
.reveal .mr-6 { margin-right: 24px !important; }
.reveal .mr-8 { margin-right: 32px !important; }
.reveal .mr-10 { margin-right: 40px !important; }
.reveal .mr-12 { margin-right: 48px !important; }
.reveal .mr-16 { margin-right: 64px !important; }
.reveal .mr-20 { margin-right: 80px !important; }
.reveal .mr-24 { margin-right: 96px !important; }
.reveal .mr-28 { margin-right: 112px !important; }
.reveal .mr-32 { margin-right: 128px !important; }
.reveal .mr-36 { margin-right: 144px !important; }
.reveal .mr-40 { margin-right: 160px !important; }
.reveal .mr-48 { margin-right: 192px !important; }
.reveal .mr-56 { margin-right: 224px !important; }
.reveal .mr-64 { margin-right: 256px !important; }
.reveal .mb-0 { margin-bottom: 0px !important; }
.reveal .mb-1 { margin-bottom: 4px !important; }
.reveal .mb-2 { margin-bottom: 8px !important; }
.reveal .mb-3 { margin-bottom: 12px !important; }
.reveal .mb-4 { margin-bottom: 16px !important; }
.reveal .mb-5 { margin-bottom: 20px !important; }
.reveal .mb-6 { margin-bottom: 24px !important; }
.reveal .mb-8 { margin-bottom: 32px !important; }
.reveal .mb-10 { margin-bottom: 40px !important; }
.reveal .mb-12 { margin-bottom: 48px !important; }
.reveal .mb-16 { margin-bottom: 64px !important; }
.reveal .mb-20 { margin-bottom: 80px !important; }
.reveal .mb-24 { margin-bottom: 96px !important; }
.reveal .mb-28 { margin-bottom: 112px !important; }
.reveal .mb-32 { margin-bottom: 128px !important; }
.reveal .mb-36 { margin-bottom: 144px !important; }
.reveal .mb-40 { margin-bottom: 160px !important; }
.reveal .mb-48 { margin-bottom: 192px !important; }
.reveal .mb-56 { margin-bottom: 224px !important; }
.reveal .mb-64 { margin-bottom: 256px !important; }
.reveal .ml-0 { margin-left: 0px !important; }
.reveal .ml-1 { margin-left: 4px !important; }
.reveal .ml-2 { margin-left: 8px !important; }
.reveal .ml-3 { margin-left: 12px !important; }
.reveal .ml-4 { margin-left: 16px !important; }
.reveal .ml-5 { margin-left: 20px !important; }
.reveal .ml-6 { margin-left: 24px !important; }
.reveal .ml-8 { margin-left: 32px !important; }
.reveal .ml-10 { margin-left: 40px !important; }
.reveal .ml-12 { margin-left: 48px !important; }
.reveal .ml-16 { margin-left: 64px !important; }
.reveal .ml-20 { margin-left: 80px !important; }
.reveal .ml-24 { margin-left: 96px !important; }
.reveal .ml-28 { margin-left: 112px !important; }
.reveal .ml-32 { margin-left: 128px !important; }
.reveal .ml-36 { margin-left: 144px !important; }
.reveal .ml-40 { margin-left: 160px !important; }
.reveal .ml-48 { margin-left: 192px !important; }
.reveal .ml-56 { margin-left: 224px !important; }
.reveal .ml-64 { margin-left: 256px !important; }
.reveal .mx-0 { margin-left: 0px !important; margin-right: 0px !important; }
.reveal .mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
.reveal .mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
.reveal .mx-3 { margin-left: 12px !important; margin-right: 12px !important; }
.reveal .mx-4 { margin-left: 16px !important; margin-right: 16px !important; }
.reveal .mx-5 { margin-left: 20px !important; margin-right: 20px !important; }
.reveal .mx-6 { margin-left: 24px !important; margin-right: 24px !important; }
.reveal .mx-8 { margin-left: 32px !important; margin-right: 32px !important; }
.reveal .mx-10 { margin-left: 40px !important; margin-right: 40px !important; }
.reveal .mx-12 { margin-left: 48px !important; margin-right: 48px !important; }
.reveal .mx-16 { margin-left: 64px !important; margin-right: 64px !important; }
.reveal .mx-20 { margin-left: 80px !important; margin-right: 80px !important; }
.reveal .mx-24 { margin-left: 96px !important; margin-right: 96px !important; }
.reveal .mx-28 { margin-left: 112px !important; margin-right: 112px !important; }
.reveal .mx-32 { margin-left: 128px !important; margin-right: 128px !important; }
.reveal .mx-36 { margin-left: 144px !important; margin-right: 144px !important; }
.reveal .mx-40 { margin-left: 160px !important; margin-right: 160px !important; }
.reveal .mx-48 { margin-left: 192px !important; margin-right: 192px !important; }
.reveal .mx-56 { margin-left: 224px !important; margin-right: 224px !important; }
.reveal .mx-64 { margin-left: 256px !important; margin-right: 256px !important; }
.reveal .my-0 { margin-top: 0px !important; margin-bottom: 0px !important; }
.reveal .my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.reveal .my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
.reveal .my-3 { margin-top: 12px !important; margin-bottom: 12px !important; }
.reveal .my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
.reveal .my-5 { margin-top: 20px !important; margin-bottom: 20px !important; }
.reveal .my-6 { margin-top: 24px !important; margin-bottom: 24px !important; }
.reveal .my-8 { margin-top: 32px !important; margin-bottom: 32px !important; }
.reveal .my-10 { margin-top: 40px !important; margin-bottom: 40px !important; }
.reveal .my-12 { margin-top: 48px !important; margin-bottom: 48px !important; }
.reveal .my-16 { margin-top: 64px !important; margin-bottom: 64px !important; }
.reveal .my-20 { margin-top: 80px !important; margin-bottom: 80px !important; }
.reveal .my-24 { margin-top: 96px !important; margin-bottom: 96px !important; }
.reveal .my-28 { margin-top: 112px !important; margin-bottom: 112px !important; }
.reveal .my-32 { margin-top: 128px !important; margin-bottom: 128px !important; }
.reveal .my-36 { margin-top: 144px !important; margin-bottom: 144px !important; }
.reveal .my-40 { margin-top: 160px !important; margin-bottom: 160px !important; }
.reveal .my-48 { margin-top: 192px !important; margin-bottom: 192px !important; }
.reveal .my-56 { margin-top: 224px !important; margin-bottom: 224px !important; }
.reveal .my-64 { margin-top: 256px !important; margin-bottom: 256px !important; }
/* Gap */
.reveal .gap-0 { gap: 0px !important; }
.reveal .gap-1 { gap: 4px !important; }
.reveal .gap-2 { gap: 8px !important; }
.reveal .gap-3 { gap: 12px !important; }
.reveal .gap-4 { gap: 16px !important; }
.reveal .gap-5 { gap: 20px !important; }
.reveal .gap-6 { gap: 24px !important; }
.reveal .gap-8 { gap: 32px !important; }
.reveal .gap-10 { gap: 40px !important; }
.reveal .gap-12 { gap: 48px !important; }
.reveal .gap-16 { gap: 64px !important; }
.reveal .gap-20 { gap: 80px !important; }
.reveal .gap-24 { gap: 96px !important; }
.reveal .gap-28 { gap: 112px !important; }
.reveal .gap-32 { gap: 128px !important; }
.reveal .gap-36 { gap: 144px !important; }
.reveal .gap-40 { gap: 160px !important; }
.reveal .gap-48 { gap: 192px !important; }
.reveal .gap-56 { gap: 224px !important; }
.reveal .gap-64 { gap: 256px !important; }

/* ---- Media: object-fit + aspect ratio (images, video, charts) ---------- */
.reveal .object-cover   { object-fit: cover !important; width: 100% !important; height: 100% !important; }
.reveal .object-contain { object-fit: contain !important; width: 100% !important; height: 100% !important; }
.reveal .aspect-video   { aspect-ratio: 16 / 9 !important; }
.reveal .aspect-square  { aspect-ratio: 1 / 1 !important; }

/* ---- Position / display ------------------------------------------------ */
.reveal .relative { position: relative !important; }
.reveal .absolute { position: absolute !important; }
.reveal .inset-0  { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.reveal .top-0    { top: 0 !important; }
.reveal .right-0  { right: 0 !important; }
.reveal .bottom-0 { bottom: 0 !important; }
.reveal .left-0   { left: 0 !important; }
/* Absolute centering — pair with .absolute (.center-xy centers on both axes at once). */
.reveal .center-x  { left: 50% !important; transform: translateX(-50%) !important; }
.reveal .center-y  { top: 50% !important; transform: translateY(-50%) !important; }
.reveal .center-xy { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.reveal .block           { display: block !important; }
.reveal .inline-block    { display: inline-block !important; }
.reveal .inline-flex     { display: inline-flex !important; }
.reveal .hidden          { display: none !important; }
.reveal .overflow-hidden { overflow: hidden !important; }

/* ---- Box: radius, border, shadow, surfaces ----------------------------- */
.reveal .rounded      { border-radius: var(--box-radius) !important; }
.reveal .rounded-full { border-radius: 999px !important; }
.reveal .border         { border: 1px solid var(--line-color) !important; }
.reveal .border-line    { border-color: var(--line-color) !important; }
.reveal .border-primary { border-color: var(--primary-color) !important; }
.reveal .shadow { box-shadow: 0 18px 50px rgba(0, 0, 25, 0.14) !important; }
/* Subtle palette-derived surface tints (color-mix keeps them on-brand). */
.reveal .bg-tint         { background-color: color-mix(in srgb, var(--ink) 6%, transparent) !important; }
.reveal .bg-tint-primary { background-color: color-mix(in srgb, var(--primary-color) 12%, transparent) !important; }
/* Ready-made card surface (padded, rounded, hairline border + faint tint). Padding/radius are NOT
   !important so .p-* / .rounded can still tune it. */
.reveal .card {
  padding: 28px;
  border-radius: var(--box-radius);
  border: 1px solid var(--line-color);
  background-color: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* ---- Typography (.text-center / .text-muted already defined above) ------ */
.reveal .text-left  { text-align: left !important; }
.reveal .text-right { text-align: right !important; }
.reveal .text-sm { font-size: 13pt !important; }
.reveal .text-xs { font-size: 11pt !important; }
.reveal .leading-tight   { line-height: 1.1 !important; }
.reveal .leading-snug    { line-height: 1.3 !important; }
.reveal .leading-relaxed { line-height: 1.7 !important; }
.reveal .font-normal   { font-weight: 400 !important; }
.reveal .font-medium   { font-weight: 500 !important; }
.reveal .font-semibold { font-weight: 600 !important; }
.reveal .text-nowrap { white-space: nowrap !important; }
.reveal .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* ---- Opacity ----------------------------------------------------------- */
.reveal .opacity-40 { opacity: 0.4 !important; }
.reveal .opacity-60 { opacity: 0.6 !important; }
.reveal .opacity-80 { opacity: 0.8 !important; }

/* ---- Colors — palette roles, always via CSS variables ------------------
   Each bg-* also sets --contrast-color to its palette COUNTERPART (primary↔secondary),
   which .text-contrast below reads. Custom properties inherit, so the swap works on the
   element itself and on any descendant, and nested backgrounds resolve innermost-first. */
.reveal .bg-primary   { background-color: var(--primary-color) !important; --contrast-color: var(--secondary-color); --bg-current: var(--primary-color); }
.reveal .bg-secondary { background-color: var(--secondary-color) !important; --contrast-color: var(--primary-color); --bg-current: var(--secondary-color); }
.reveal .bg-accent    { background-color: var(--accent-purple) !important; --contrast-color: var(--secondary-color); --bg-current: var(--accent-purple); }
.reveal .bg-ink       { background-color: var(--ink) !important; --contrast-color: var(--secondary-color); --bg-current: var(--ink); }
.reveal .bg-surface   { background-color: var(--background-color) !important; --contrast-color: var(--primary-color); --bg-current: var(--background-color); }
.reveal .bg-divider   { background-color: var(--section-divider-bg) !important; --contrast-color: var(--secondary-color); --bg-current: var(--section-divider-bg); }
/* Slide-level backgrounds (the Animations tab writes these exact var() strings). */
.reveal .slides section[data-background-color="var(--primary-color)"]      { --contrast-color: var(--secondary-color); --bg-current: var(--primary-color); }
.reveal .slides section[data-background-color="var(--secondary-color)"]    { --contrast-color: var(--primary-color); --bg-current: var(--secondary-color); }
.reveal .slides section[data-background-color="var(--accent-purple)"]      { --contrast-color: var(--secondary-color); --bg-current: var(--accent-purple); }
.reveal .slides section[data-background-color="var(--ink)"]                { --contrast-color: var(--secondary-color); --bg-current: var(--ink); }
.reveal .slides section[data-background-color="var(--section-divider-bg)"] { --contrast-color: var(--secondary-color); --bg-current: var(--section-divider-bg); }
/* The automatic counterpart color: secondary on primary, primary on secondary, … —
   falls back to the normal text color when no colored background is in play. */
.reveal .text-contrast { color: var(--contrast-color, var(--text-color)) !important; }
/* Automatic BLACK/WHITE contrast: derives pure black or white from the current
   background's own lightness (relative color syntax — the (threshold − l) × infinity
   lightness flip). Dark backgrounds → white text, light backgrounds → black. Falls back
   to the slide background var, so it's correct on plain slides of dark themes too. */
.reveal .text-bw {
  color: oklch(from var(--bg-current, var(--background-color)) calc((0.65 - l) * infinity) 0 0) !important;
}
.reveal .text-primary   { color: var(--primary-color) !important; }
.reveal .text-secondary { color: var(--secondary-color) !important; }
.reveal .text-accent    { color: var(--accent-purple) !important; }
.reveal .text-ink       { color: var(--ink) !important; }
.reveal .text-body      { color: var(--text-color) !important; }
/* Neutrals (hardcoded — off-palette; use sparingly) */
.reveal .bg-white   { background-color: #ffffff !important; --bg-current: #ffffff; }
.reveal .bg-black   { background-color: #000000 !important; --bg-current: #000000; }
.reveal .text-white { color: #ffffff !important; }
.reveal .text-black { color: #000000 !important; }

/* ---- Effects: glow & motion (use sparingly) ----------------------------
   Glows use `filter: drop-shadow`, which follows the element's RENDERED SHAPE — the same
   class glows text glyphs, transparent-PNG contours, rounded cards and images alike
   (box-shadow only ever drew rectangles and did nothing useful on borderless text).
   Two layered shadows = a tight bright core + a wide soft falloff. Caveats: a glow gets
   clipped inside an overflow-hidden wrapper, and it's invisible on a same-color background. */
.reveal .glow,
.reveal .glow-primary {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--primary-color) 85%, transparent))
          drop-shadow(0 0 34px color-mix(in srgb, var(--primary-color) 55%, transparent)) !important;
}
.reveal .glow-secondary {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--secondary-color) 85%, transparent))
          drop-shadow(0 0 34px color-mix(in srgb, var(--secondary-color) 55%, transparent)) !important;
}
.reveal .glow-accent {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-purple) 90%, transparent))
          drop-shadow(0 0 34px color-mix(in srgb, var(--accent-purple) 60%, transparent)) !important;
}
/* Text halo tinted by the element's own color — layered core + falloff. */
.reveal .text-glow {
  text-shadow: 0 0 16px color-mix(in srgb, currentColor 75%, transparent),
               0 0 42px color-mix(in srgb, currentColor 40%, transparent) !important;
}
/* Continuous motion (keyframes are global, est- prefixed). Avoid on reveal fragments or on
   elements positioned with .center-* — pulse animates opacity; float/spin animate transform. */
.reveal .glow-pulse { animation: est-glow-pulse 2.6s ease-in-out infinite !important; }
.reveal .pulse      { animation: est-pulse 2.4s ease-in-out infinite !important; }
.reveal .float      { animation: est-float 4s ease-in-out infinite !important; }
.reveal .spin-slow  { animation: est-spin 24s linear infinite !important; }
/* Animated gradient sweep — pair with .gradient-text for a shimmering headline. */
.reveal .shimmer { background-size: 200% auto !important; animation: est-shimmer 3.2s linear infinite !important; }

@keyframes est-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--primary-color) 60%, transparent))
                     drop-shadow(0 0 20px color-mix(in srgb, var(--primary-color) 35%, transparent)); }
  50%      { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--primary-color) 95%, transparent))
                     drop-shadow(0 0 48px color-mix(in srgb, var(--primary-color) 70%, transparent)); }
}
@keyframes est-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes est-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes est-spin { to { transform: rotate(360deg); } }
@keyframes est-shimmer { to { background-position: 200% center; } }

/* ---- Fragment entrances (pair with class="fragment"; reveal steps them) --------
   e.g. <p class="fragment slide-left">…  <img class="fragment wipe" …>
   rise/pop moved here from the legacy section so every deck stays in sync centrally. */
.reveal .fragment.rise {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
}
.reveal .fragment.rise.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.reveal .fragment.pop {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal .fragment.pop.visible { opacity: 1; transform: scale(1); }

.reveal .fragment.slide-left {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal .fragment.slide-left.visible { opacity: 1; transform: translateX(0); }

.reveal .fragment.slide-right {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal .fragment.slide-right.visible { opacity: 1; transform: translateX(0); }

.reveal .fragment.zoom-in {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal .fragment.zoom-in.visible { opacity: 1; transform: scale(1); }

.reveal .fragment.flip-up {
  opacity: 0;
  transform: perspective(800px) rotateX(65deg);
  transform-origin: center bottom;
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal .fragment.flip-up.visible { opacity: 1; transform: perspective(800px) rotateX(0); }

.reveal .fragment.blur-in {
  opacity: 0;
  filter: blur(14px);
  transition: opacity 0.8s ease, filter 0.8s ease;
}
.reveal .fragment.blur-in.visible { opacity: 1; filter: blur(0); }

/* Wipe: reveals left→right via clip-path (great for images and full-width bars). */
.reveal .fragment.wipe {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal .fragment.wipe.visible { clip-path: inset(0 0 0 0); }

/* Respect users who prefer reduced motion — drop the continuous animations. */
@media (prefers-reduced-motion: reduce) {
  .reveal .glow-pulse, .reveal .pulse, .reveal .float, .reveal .spin-slow, .reveal .shimmer { animation: none !important; }
}

/* ---- Color-block contrast classes (semantic; legacy aliases kept) -------
   on-dark  = light text for dark backgrounds  (alias: on-purple)
   on-light = dark text for light accent backgrounds (alias: on-pink)
   Pair with data-background-color="var(--…)" on the <section>. Later in the file than any
   legacy per-deck copies of these rules, so these canonical ones win the cascade. */
.reveal .slides section.on-dark h1, .reveal .slides section.on-dark h2, .reveal .slides section.on-dark h3,
.reveal .slides section.on-dark p, .reveal .slides section.on-dark li,
.reveal .slides section.on-purple h1, .reveal .slides section.on-purple h2, .reveal .slides section.on-purple h3,
.reveal .slides section.on-purple p, .reveal .slides section.on-purple li { color: #ffffff; }
.reveal .slides section.on-dark .kicker,
.reveal .slides section.on-purple .kicker { color: rgba(255, 255, 255, 0.8); }
.reveal .slides section.on-dark .text-muted,
.reveal .slides section.on-purple .text-muted { color: rgba(255, 255, 255, 0.62) !important; }
.reveal .slides section.on-dark .footnote,
.reveal .slides section.on-purple .footnote { color: rgba(255, 255, 255, 0.5); }
.reveal .slides section.on-dark ul li::before,
.reveal .slides section.on-purple ul li::before { background: var(--secondary-color); }

.reveal .slides section.on-light h1, .reveal .slides section.on-light h2, .reveal .slides section.on-light h3,
.reveal .slides section.on-pink h1, .reveal .slides section.on-pink h2, .reveal .slides section.on-pink h3 { color: var(--primary-color); }
.reveal .slides section.on-light p, .reveal .slides section.on-light li,
.reveal .slides section.on-pink p, .reveal .slides section.on-pink li { color: var(--ink); }
.reveal .slides section.on-light .kicker,
.reveal .slides section.on-pink .kicker { color: var(--ink); }
.reveal .slides section.on-light .text-muted,
.reveal .slides section.on-pink .text-muted { color: color-mix(in srgb, var(--ink) 60%, transparent) !important; }
.reveal .slides section.on-light .footnote,
.reveal .slides section.on-pink .footnote { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.reveal .slides section.on-light ul li::before,
.reveal .slides section.on-pink ul li::before { background: var(--primary-color); }

/* @end-studio-utilities */