/* Chattyness theme for reveal.js. Palette from product-site/assets/css/variables.css.
   Text colors chosen for WCAG 2.2 AA contrast on --bg. */
:root {
	--bg: #0b1a33;
	--bg-card: #14284d;
	--fg: #ffffff;
	--fg-muted: #c9d6ee;
	--accent: #78aeed;
	--accent-strong: #3584e4;
	--secondary: #9141ac;
	--r-background-color: var(--bg);
	--r-main-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--r-heading-font: var(--r-main-font);
	--r-main-color: var(--fg);
	--r-heading-color: var(--fg);
	--r-heading-text-transform: none;
	--r-link-color: var(--accent);
	--r-link-color-hover: #ffffff;
	--r-selection-background-color: var(--accent-strong);
}
.reveal { font-size: 36px; }
.reveal h1, .reveal h2, .reveal h3 { font-weight: 700; letter-spacing: -0.01em; }
.reveal a:focus-visible, .reveal :focus-visible { outline: 3px solid #ffd43b; outline-offset: 3px; }
.reveal .slides section { text-align: left; }
.reveal .kicker { color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.6em; margin: 0; }
.reveal .lede { color: var(--fg-muted); font-size: 0.9em; }
.reveal .title-slide { text-align: center; }
.reveal .title-slide .logo { width: 560px; max-width: 80%; background: #fff; border-radius: 16px; padding: 16px 28px; }
.reveal .row { display: flex; flex-direction: row; gap: 1.2em; align-items: center; justify-content: center; }
.reveal .col { display: flex; flex-direction: column; gap: 0.6em; flex: 1 1 0; min-width: 0; }
.reveal .cards { display: flex; flex-wrap: wrap; gap: 0.7em; justify-content: center; }
.reveal .card {
	display: flex; flex-direction: column; align-items: center; gap: 0.3em; flex: 1 1 28%;
	background: var(--bg-card); border-radius: 14px; padding: 0.7em 0.8em; text-align: center; font-size: 0.7em;
}
.reveal .card img { width: 64px; height: 64px; margin: 0; background: #fff; border-radius: 12px; padding: 8px; border: 0; box-shadow: none; }
.reveal .card h3 { font-size: 1.1em; margin: 0; }
.reveal .card p { margin: 0; color: var(--fg-muted); }
.reveal .shot { max-height: 62vh; width: auto; border-radius: 12px; margin: 0; }
.reveal .big { font-size: 1.8em; line-height: 1.2; }
.reveal ul { display: block; }
.reveal li { margin: 0.3em 0; }
.reveal .todo { color: #ffd43b; font-style: italic; }
.reveal .small { font-size: 0.6em; color: var(--fg-muted); }