@charset "UTF-8";
/**
 * Minimal Theme for reveal.js
 * Swiss/International Typographic Style
 * 
 * Principles:
 * - Strong typographic hierarchy
 * - Generous white space
 * - Grid-based layout
 * - Limited, purposeful color
 * - Objective, clear communication
 */
/**
 * Shared foundation barrel.
 *
 * The "engine" CSS layer: rules that depend on the Vignettes Vue components
 * (SlideContent, RevealSlides, MDC bridge) and on Reveal.js conventions.
 * Themes (skins) build on top of this layer, never replace it.
 *
 * Usage from a theme entry:
 *   @use 'pkg:@vignettes/theme-kit';
 */
/**
 * Neutral semantic tokens (the theme contract).
 *
 * This file defines the palette of CSS custom properties that every theme
 * MUST provide and that all theme-agnostic code (MDC components, the foundation
 * layer) references. A new theme is created by overriding these tokens.
 *
 * The defaults below are neutral greys with a plain blue accent: a theme that
 * forgets a token degrades to a readable look that belongs to no brand.
 *
 * Naming conventions:
 *   --accent / --accent-soft / --accent-bg
 *       the brand/primary color and its lighter companions used for tints,
 *       borders, link highlighting, etc.
 *   --accent-strong
 *       the accent mixed with the title color, for text set on --accent-soft
 *       or --accent-bg; derived from --accent unless the theme sets it.
 *   --accent-line
 *       the accent mixed with the surface, for the outlines of a diagram: the
 *       cards, the subject regions and the edge labels; derived from --accent unless the theme sets it.
 *   --accent-on-contrast
 *       the accent mixed with white, for a mark set on --surface-contrast or
 *       on a dark code block; derived from --accent unless the theme sets it.
 *   --surface / --surface-contrast / --on-contrast
 *       background colors and the matching text color on dark backgrounds.
 *   --text-default / --text-title / --text-mention
 *       the three text intensities used by the typography system.
 *   --border / --radius / --shadow
 *       the outline, the corners and the elevation of a box drawn by a
 *       component (card, quote, frame, code block).
 *   --code-min-size
 *       the smallest size of a code block, in slide units; `0px` by default.
 *   --code-surface / --code-surface-dark
 *       the backgrounds of the light code theme `clair` and of the dark code
 *       theme `nuit`, by default the backgrounds of GitHub's light and dark code.
 *   --on-surface-title / --on-surface-default / --on-surface-mention
 *       the text intensities as the page root sets them, for the text of a
 *       surface a component paints. Derived here: a theme does not set them.
 *   --text-step-1 … --text-step-4
 *       the type scale above the body text, in `em` of the text around: a
 *       heading inside the body and the sizes of a highlighted message. They
 *       follow a column that shrinks its text.
 *   --flow-space / --block-space / --heading-space-before
 *       the vertical rhythm of the body of a content slide, in `em` of the element that
 *       carries the margin: the space inside a group of text (between a heading
 *       and its paragraph, two paragraphs, a paragraph and its list, two list
 *       items), above and below a block other than text, and above a heading of
 *       the body.
 *   --measure
 *       the maximum line length of a paragraph or a list of the body of a
 *       content slide.
 */
:root {
  --accent: #1c4fd8;
  --accent-soft: #dbe4fb;
  --accent-bg: #f4f6fd;
  --accent-strong: color-mix(in srgb, var(--accent) 70%, var(--text-title));
  --accent-line: color-mix(in srgb, var(--accent) 35%, var(--surface));
  --accent-on-contrast: color-mix(in srgb, var(--accent) 55%, #ffffff);
  --surface: #ffffff;
  --surface-contrast: #1a1a1a;
  --on-contrast: #ffffff;
  --text-default: #1a1a1a;
  --text-title: #111111;
  --text-mention: #6b6b6b;
  --border: #e0e0e0;
  --radius: 6px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --code-min-size: 0px;
  --code-surface: #f6f8fa;
  --code-surface-dark: #24292e;
  --text-step-1: 1.2em;
  --text-step-2: 1.44em;
  --text-step-3: 1.728em;
  --text-step-4: 2.074em;
  --flow-space: 0.6em;
  --block-space: 2em;
  --heading-space-before: 1.6em;
  --measure: 60ch;
  --on-surface-title: var(--text-title);
  --on-surface-default: var(--text-default);
  --on-surface-mention: var(--text-mention);
}

/**
 * The tints a card or a region of a diagram takes with `color="<name>"`.
 *
 * Each name sets three properties: `-bg` the surface of a region, `-main` its
 * outline, `-text` the title and the icon of a card or a region, readable on
 * `-bg`. A theme redefines them, and may add names of its own with the same
 * three properties.
 */
:root {
  --palette-blue-bg: #eff6ff;
  --palette-blue-main: #3b82f6;
  --palette-blue-text: #1e40af;
  --palette-green-bg: #f0fdf4;
  --palette-green-main: #22c55e;
  --palette-green-text: #166534;
  --palette-yellow-bg: #fefce8;
  --palette-yellow-main: #eab308;
  --palette-yellow-text: #854d0e;
  --palette-orange-bg: #fff7ed;
  --palette-orange-main: #f97316;
  --palette-orange-text: #9a3412;
  --palette-brown-bg: #faf6f1;
  --palette-brown-main: #a47148;
  --palette-brown-text: #6b4426;
  --palette-pink-bg: #fdf2f8;
  --palette-pink-main: #ec4899;
  --palette-pink-text: #9d174d;
  --palette-purple-bg: #faf5ff;
  --palette-purple-main: #a855f7;
  --palette-purple-text: #6b21a8;
  --palette-grey-bg: #f9fafb;
  --palette-grey-main: #9ca3af;
  --palette-grey-text: #374151;
}

/**
 * Reveal patches & MDC structural bridge.
 *
 * MDCRenderer wraps rendered Markdown in extra <div>s, which would otherwise
 * break the semantic flow of header/hgroup/article and full-layout slides.
 * `display: contents` makes those wrapper divs transparent in the box tree.
 *
 * These rules belong to the engine layer (Vignettes component contract),
 * not to any individual theme. They were previously inside SlideContent.vue
 * <style scoped> but had to be promoted here because:
 *   - the ":deep(...)" tunnel only works while we keep the Vue component,
 *   - duplicating the same rules across every theme would be brittle.
 */
.reveal .slides section .layout-full > div,
.reveal .slides .slide-content-pane > header > div,
.reveal .slides .slide-content-pane > article > div,
.reveal .slides .slide-content-pane > hgroup .slide-pretitle > div,
.reveal .slides .slide-content-pane > hgroup .slide-heading > div,
.reveal .slides .slide-content-pane > hgroup .slide-subtitle > div {
  display: contents;
}
.reveal .slides .slide-content-pane {
  display: contents;
}

html.reveal-print * {
  print-color-adjust: exact;
}

.reveal.reveal-viewport {
  color: var(--text-default);
}

:root .reveal .slide-number {
  font-family: inherit;
  background-color: transparent;
  color: var(--text-mention);
}

.reveal :not(pre) > code {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
}

.reveal .code-group {
  white-space: nowrap;
}
.reveal .code-group > code {
  white-space: normal;
}

/**
 * Slide spacing — comfortable text inset on every slide.
 *
 * Reveal only reserves a thin outer `margin`; without inner padding the text
 * sits almost on the slide edge. This layer adds a horizontal/vertical inset
 * to every *leaf* slide so text always breathes — while media panes are
 * allowed to bleed back out to the slide edge (see `_media-layouts.scss`).
 *
 * Tunable per deck by overriding `--slide-padding-x` / `--slide-padding-y`
 * on `.reveal`.
 */
.reveal {
  --slide-padding-x: 4rem;
  --slide-padding-y: 1.75rem;
}

/* Leaf slides only: the `.stack` wrapper of a vertical group is not a slide. */
.reveal .slides > section:not(.stack),
.reveal .slides > section.stack > section {
  box-sizing: border-box;
  padding: var(--slide-padding-y) var(--slide-padding-x);
}

/* Reveal's print view moves each slide into a `.pdf-page` and sets its padding
   to 0 with `!important`: the printed slide keeps the same inset. */
html.reveal-print .reveal .slides .pdf-page > section {
  padding: var(--slide-padding-y) var(--slide-padding-x) !important;
}

/**
 * Media layouts: the grid of `:layout{media=…}` (see `readLayout` in
 * `@vignettes/core/deck`).
 *
 * A slide with a media carries `layout-media`, `layout-media-<placement>`
 * (`right`, `left`, `top`, `bottom`, `behind`) and, when the media has a share
 * of the slide, `media-size-<p>-<q>`. These selectors form a contract between
 * the slide engine and any theme: themes only paint, the layout grid is
 * invariant.
 */
.reveal .slides section:where(.layout-media) {
  --media-text-share: 1fr;
  --media-share: 1fr;
  --media-text-scale: 1;
}
.reveal .slides section.layout-media:not(.layout-media-behind) {
  display: grid !important;
  gap: 2.5rem;
  align-items: stretch;
}
.reveal .slides section.media-size-1-3 {
  --media-text-share: 2fr;
  --media-share: 1fr;
}
.reveal .slides section.media-size-1-2 {
  --media-text-share: 1fr;
  --media-share: 1fr;
}
.reveal .slides section.media-size-2-3 {
  --media-text-share: 1fr;
  --media-share: 2fr;
  --media-text-scale: 0.8;
}
.reveal .slides section.media-size-3-4 {
  --media-text-share: 1fr;
  --media-share: 3fr;
  --media-text-scale: 0.68;
}
.reveal .slides section.layout-media-right {
  grid-template-columns: minmax(0, var(--media-text-share)) minmax(0, var(--media-share));
  grid-template-rows: minmax(0, 1fr);
}
.reveal .slides section.layout-media-left {
  grid-template-columns: minmax(0, var(--media-share)) minmax(0, var(--media-text-share));
  grid-template-rows: minmax(0, 1fr);
}
.reveal .slides section.layout-media-top,
.reveal .slides section.layout-media-bottom {
  --media-text-scale: 1;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
.reveal .slides section.layout-media-top {
  grid-template-rows: minmax(0, 1fr) auto;
}
.reveal .slides section.layout-media-bottom {
  grid-template-rows: auto minmax(0, 1fr);
}
.reveal .slides section.layout-media-top[class*=media-size-] {
  grid-template-rows: minmax(0, var(--media-share)) minmax(0, var(--media-text-share));
}
.reveal .slides section.layout-media-bottom[class*=media-size-] {
  grid-template-rows: minmax(0, var(--media-text-share)) minmax(0, var(--media-share));
}
.reveal .slides section:is(.layout-media-left, .layout-media-top) > .slide-media-pane {
  order: 1;
}
.reveal .slides section:is(.layout-media-left, .layout-media-top) > .slide-content-pane {
  order: 2;
}
.reveal .slides section.layout-media-right > .slide-media-pane {
  margin-right: calc(-1 * var(--slide-padding-x, 4rem));
}
.reveal .slides section.layout-media-left > .slide-media-pane {
  margin-left: calc(-1 * var(--slide-padding-x, 4rem));
}
.reveal .slides section:is(.layout-media-top, .layout-media-bottom) > .slide-media-pane {
  margin-left: calc(-1 * var(--slide-padding-x, 4rem));
  margin-right: calc(-1 * var(--slide-padding-x, 4rem));
}
.reveal .slides section.layout-media > .slide-content-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: var(--slide-align);
  text-align: left;
  min-width: 0;
  min-height: 0;
  font-size: calc(var(--media-text-scale, 1) * 1em);
}
.reveal .slides section.layout-media > .slide-content-pane > :is(header, hgroup) {
  height: auto;
  flex-shrink: 0;
}
.reveal .slides section.layout-media:not(.media-veil) > .slide-content-pane > article {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.reveal .slides section.layout-media.media-size-2-3:is(.layout-media-right, .layout-media-left) > .slide-content-pane > :is(header, hgroup) :is(h1, h2, h3, h4, h5, h6) {
  font-size: 1.6em;
}
.reveal .slides section.layout-media.media-size-3-4:is(.layout-media-right, .layout-media-left) > .slide-content-pane {
  padding-top: 0.5rem;
}
.reveal .slides section.layout-media.media-size-3-4:is(.layout-media-right, .layout-media-left) > .slide-content-pane > :is(header, hgroup) :is(h1, h2, h3, h4, h5, h6) {
  font-size: 1.9em;
  line-height: 1.08;
  margin-bottom: 0.7em;
}
.reveal .slides section.layout-media.media-size-3-4:is(.layout-media-right, .layout-media-left) > .slide-content-pane > article > p:first-child {
  font-size: 1.08em;
  line-height: 1.45;
  margin-top: 0;
}
.reveal .slides section.layout-media > .slide-media-pane {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.reveal .slides section.layout-media > .slide-media-pane:not(.fit-contain) {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.reveal .slides section.layout-media > .slide-media-pane.fit-contain {
  overflow: visible;
  background: transparent;
}
.reveal .slides section.layout-media > .slide-media-pane iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}
.reveal .slides section.layout-media > .slide-media-pane.is-interactive iframe {
  pointer-events: auto;
}
.reveal .slides section.layout-media > .slide-media-pane.is-scaled {
  --preview-width: 1440px;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.reveal .slides section.layout-media > .slide-media-pane.is-scaled iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
}
.reveal .slides section.layout-media > .slide-media-pane img {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  background: transparent;
}
.reveal .slides section.layout-media > .slide-media-pane img.fit-cover {
  object-fit: cover;
}
.reveal .slides section.layout-media > .slide-media-pane img.fit-contain {
  display: block;
  width: auto;
  object-fit: contain;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.reveal .slides section.layout-media > .slide-media-pane.position-top img {
  object-position: top;
}
.reveal .slides section.layout-media > .slide-media-pane.position-bottom img {
  object-position: bottom;
}
.reveal .slides section.layout-media > .slide-media-pane.position-left img {
  object-position: left;
}
.reveal .slides section.layout-media > .slide-media-pane.position-right img {
  object-position: right;
}
.reveal .slides .slide-content-pane .slide-media-hint {
  position: absolute;
  bottom: 0;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--link-color, #06c) !important;
  pointer-events: none;
}
.reveal .slides section.layout-media-right > .slide-content-pane .slide-media-hint {
  text-align: right;
  right: 0;
}
.reveal .slides section.layout-media-right > .slide-content-pane .slide-media-hint::after {
  content: " →";
  opacity: 0.7;
}
.reveal .slides section.layout-media-left > .slide-content-pane .slide-media-hint {
  text-align: left;
  left: 0;
}
.reveal .slides section.layout-media-left > .slide-content-pane .slide-media-hint::before {
  content: "← ";
  opacity: 0.7;
}
.reveal .slides section:is(.layout-media-top, .layout-media-bottom) > .slide-content-pane .slide-media-hint {
  position: static;
  text-align: center;
}
.reveal .slides section.layout-media-top > .slide-content-pane .slide-media-hint::after {
  content: " ↑";
  opacity: 0.7;
}
.reveal .slides section.layout-media-bottom > .slide-content-pane .slide-media-hint::after {
  content: " ↓";
  opacity: 0.7;
}
.reveal .slides section.layout-media > .slide-media-pane.has-lightbox {
  cursor: pointer;
}
.reveal .slides section.layout-media > .slide-media-pane.has-lightbox iframe {
  pointer-events: none;
}
.reveal .slides section.layout-media-behind.media-card {
  display: flex !important;
  flex-direction: column;
  justify-content: var(--slide-align);
  align-items: flex-start;
}
.reveal .slides section.layout-media-behind.media-card > .slide-content-pane {
  max-width: min(50%, 38rem);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 18, 0.18);
  font-size: 0.85em;
}
.reveal .slides section.layout-media-behind.media-veil > .slide-content-pane {
  display: contents;
}
.reveal .slides section.layout-media-behind.media-veil {
  --text-title: var(--on-contrast, #fff);
  --text-default: var(--on-contrast, #fff);
  --text-mention: var(--on-contrast, #fff);
  color: var(--on-contrast, #fff);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.reveal .slides section.layout-media-behind.media-veil :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, strong, em, figcaption) {
  color: var(--on-contrast, #fff);
}

html.reveal-print .reveal .slides section.layout-media:not(.layout-media-behind) {
  display: grid !important;
}

html.reveal-print .reveal .slides section.layout-media-behind {
  display: flex !important;
}

.reveal-scroll .scroll-page section.layout-media:not(.layout-media-behind) {
  --media-text-scale: 1;
  display: flex !important;
  flex-direction: column;
  gap: 1rem;
}
.reveal-scroll .scroll-page section.layout-media:not(.layout-media-behind) > .slide-content-pane {
  order: 1;
  flex: none;
}
.reveal-scroll .scroll-page section.layout-media:not(.layout-media-behind) > .slide-media-pane {
  order: 2;
  flex: 1 1 auto;
  margin-left: 0;
  margin-right: 0;
}

.reveal-scroll .scroll-page section.layout-media-top:not(.layout-media-behind) > .slide-media-pane {
  order: 1;
}
.reveal-scroll .scroll-page section.layout-media-top:not(.layout-media-behind) > .slide-content-pane {
  order: 2;
}

.reveal-scroll .scroll-page section.layout-media-behind.media-card > .slide-content-pane {
  max-width: 100%;
}

/**
 * Slide section structural skeleton.
 *
 * The engine tags each slide with the class of its role (`surfaceLevel` of
 * `@vignettes/core/deck`): `slide-h1` for the title slide, `slide-h2` for a
 * section, a `##` slide made of its heading and at most one short paragraph,
 * and `slide-h3` for a content slide, whose heading may be a `##`. The flex
 * skeleton here is identical in every theme.
 *
 * What stays in this layer: positioning primitives (display: flex, ordering,
 * `width: 100%`, the vertical alignment of the content), and the rhythm and
 * the measure of the body of a content slide, from the tokens of
 * `_semantic-tokens.scss`.
 * What belongs in a theme or a preset: sizes, as the tokens below, colors and
 * typography.
 *
 * Size tokens, set on `.reveal`:
 * - `--slide-heading-min-height`: the height a content slide keeps for its heading;
 * - `--slide-body-padding-y`: the space above and below the body of a content slide.
 *
 * The rhythm tokens of `_semantic-tokens.scss` (`--flow-space`, `--block-space`,
 * `--heading-space-before`) set the vertical margins of
 * the blocks of the body of a content slide, and `--measure` the maximum line
 * length of its paragraphs and lists.
 */
.reveal .slides section {
  --slide-align: safe center;
}

.reveal .slides section:where(.layout-media-top, .layout-media-bottom, .media-size-3-4:is(.layout-media-right, .layout-media-left)) {
  --slide-align: flex-start;
}

.reveal .slides section:where(.layout-media-behind.media-card) {
  --slide-align: safe flex-end;
}

.reveal .slides section.align-top {
  --slide-align: flex-start;
}

.reveal .slides section.align-center {
  --slide-align: safe center;
}

.reveal .slides section.align-bottom {
  --slide-align: safe flex-end;
}

.reveal section.slide-h1,
.reveal section.slide-h2 {
  display: flex !important;
  flex-direction: column;
  justify-content: var(--slide-align);
  align-items: start;
}

.reveal section.slide-h3 {
  display: flex !important;
  flex-direction: column;
}
.reveal section.slide-h3 header,
.reveal section.slide-h3 hgroup {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: var(--slide-heading-min-height, 0);
}
.reveal section.slide-h3 header h3,
.reveal section.slide-h3 hgroup h3 {
  margin: 0;
}
.reveal section.slide-h3 article {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: var(--slide-align);
  padding-block: var(--slide-body-padding-y, 0);
}

.reveal section article {
  width: 100%;
}

.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > * {
  margin-block: var(--flow-space) 0;
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :where(:not(p:not(:has(> img)), ul, ol, h4, h5, h6, blockquote:not(.quote), .fragments, .notes)),
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :where(:not(p:not(:has(> img)), ul, ol, h4, h5, h6, blockquote:not(.quote), .fragments, .notes)) + * {
  margin-top: var(--block-space);
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(h4, h5, h6) {
  margin-block: var(--heading-space-before) 0;
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(h4, h5, h6) + * {
  margin-top: var(--flow-space);
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(p:not(:has(> img)), ul, ol) {
  max-inline-size: var(--measure);
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol),
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) :is(ul, ol) {
  row-gap: 0;
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) > li,
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) :is(ul, ol) > li {
  margin-block: 0;
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) > li + li,
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) :is(ul, ol) > li + li {
  margin-top: var(--flow-space);
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) li > :is(ul, ol) {
  margin-block: var(--flow-space) 0;
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :first-child {
  margin-top: 0;
}

/**
 * `:layout{heading="compact"}`.
 *
 * For comparison slides whose body is a tall gallery (e.g. a 2×2 `Screens` grid
 * of full-height page screenshots): the default slide title eats ~⅓ of the
 * height. Here we shrink the heading row to a single compact line and hand the
 * remaining vertical space to the article, so each screenshot can show its whole
 * hero without being clipped.
 */
.reveal section.heading-compact {
  --slide-heading-min-height: 0;
  --slide-body-padding-y: 0;
  justify-content: start;
}
.reveal section.heading-compact header,
.reveal section.heading-compact hgroup {
  flex: 0 0 auto;
  margin-bottom: 0.9em;
}
.reveal section.heading-compact header h3,
.reveal section.heading-compact hgroup h3 {
  font-size: 1.4em;
  line-height: 1.1;
  margin: 0;
}
.reveal section.heading-compact article {
  flex: 1 1 auto;
  min-height: 0;
}

.reveal .slides section.layout-full > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
}

.reveal section.heading-hidden.layout-full > div > :is(h1, h2, h3, h4, h5, h6),
.reveal section.heading-hidden .slide-content-pane > :is(header, hgroup),
html:not(.reveal-print) .reveal section.heading-print.layout-full > div > :is(h1, h2, h3, h4, h5, h6),
html:not(.reveal-print) .reveal section.heading-print .slide-content-pane > :is(header, hgroup),
.reveal .slide-media-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html.reveal-print .reveal .slides section.slide-h1,
html.reveal-print .reveal .slides section.slide-h2,
html.reveal-print .reveal .slides section.slide-h3:not(.layout-media) {
  display: flex !important;
}

/**
 * Quicklink: small navigation hint pinned to the bottom of a slide.
 * Prefix (e.g. "Pressé·e ?") is muted text; the link is styled distinctly.
 *
 * Promoted from `RevealSlides.vue` global <style> block.
 * Colors are intentionally read from Reveal CSS variables (with literal
 * fallbacks) so the rule is theme-neutral; individual themes can override
 * `--r-main-color` and `--r-link-color` if they want a custom palette.
 */
.reveal .slides section > .slide-quicklink-wrapper {
  position: absolute;
  bottom: 0.5em;
  left: 0;
  font-size: 0.85em;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.reveal .slides section > .slide-quicklink-wrapper:hover {
  opacity: 1;
}
.reveal .slides section > .slide-quicklink-wrapper .slide-quicklink-prefix {
  color: var(--r-main-color, #3a3a3a);
  margin-right: 0.4em;
}
.reveal .slides section > .slide-quicklink-wrapper .slide-quicklink {
  color: var(--r-link-color, var(--accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}

:root {
  --accent: #e63946;
  --accent-soft: #f0f0f0;
  --accent-bg: #f0f0f0;
  --surface: #ffffff;
  --surface-contrast: #000000;
  --on-contrast: #ffffff;
  --text-default: #1a1a1a;
  --text-title: #000000;
  --text-mention: #666666;
  --code-min-size: 15px;
}

body {
  padding: 0;
  margin: 0;
}

.reveal-viewport {
  background: #ffffff;
}

.reveal {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #1a1a1a;
}

.reveal .slides {
  text-align: left;
}

.reveal .slides section {
  height: 100%;
}

.reveal ::selection {
  color: #ffffff;
  background: #000000;
  text-shadow: none;
}

.reveal ::-moz-selection {
  color: #ffffff;
  background: #000000;
  text-shadow: none;
}

/* ============================================
   TYPOGRAPHY - Strong Swiss Hierarchy
   ============================================ */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 0.5em 0;
  color: #000000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  text-shadow: none;
  word-wrap: break-word;
  text-align: left;
}

.reveal h1 {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.5em;
}
.reveal h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: #e63946;
  margin-top: 0.4em;
}

.reveal h2 {
  font-size: 3rem;
  font-weight: 700;
  border-bottom: 2px solid #000000;
  padding-bottom: 0.2em;
  margin-bottom: 0.5em;
}

.reveal h3,
.reveal section.slide-h3 :is(header, hgroup) h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #1a1a1a;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.5em;
}

.reveal h4 {
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666666;
  margin-bottom: 0.5em;
}

.reveal h5 {
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 0.5em;
}

/* Body text */
.reveal p {
  margin: 0 0 1.2em 0;
  line-height: 1.7;
}

.reveal strong {
  font-weight: 700;
  color: #000000;
}

.reveal em {
  font-style: italic;
}

/* ============================================
   LINKS
   ============================================ */
.reveal a {
  color: #000000;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.reveal a:hover {
  color: #e63946;
  text-shadow: none;
  border: none;
}

/* ============================================
   LISTS - Clean, structured
   ============================================ */
.reveal ul,
.reveal ol {
  display: block;
  text-align: left;
  margin: 0 0 1.2em 0;
  padding-left: 1.5em;
}

.reveal ul {
  list-style-type: none;
}

.reveal ul > li {
  position: relative;
  padding-left: 0.5em;
}
.reveal ul > li::before {
  content: "—";
  position: absolute;
  left: -1.2em;
  color: #e63946;
  font-weight: 700;
}

.reveal ul ul {
  list-style-type: none;
  margin-top: 0.5em;
}

.reveal ul ul > li::before {
  content: "·";
  color: #666666;
}

.reveal ol {
  list-style-type: decimal;
  padding-left: 2em;
}

.reveal ol > li {
  padding-left: 0.3em;
}

.reveal ol > li::marker {
  font-weight: 700;
  color: #e63946;
}

.reveal li {
  margin-bottom: 0.6em;
  line-height: 1.5;
}

/* ============================================
   CODE - Monospace, clean boxes
   ============================================ */
.reveal pre {
  display: block;
  position: relative;
  width: 100%;
  margin: 1.5em 0;
  text-align: left;
  font-size: max(var(--code-size, 0px), 0.7em, var(--code-min-size));
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  line-height: 1.5;
  word-wrap: break-word;
  box-shadow: none;
  background: #f0f0f0;
  border-left: 4px solid #000000;
}

.reveal code {
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  text-transform: none;
  background: #f0f0f0;
  padding: 0 0.4em;
  font-size: 0.9em;
}

.reveal pre code {
  display: block;
  padding: 1.5em;
  overflow: auto;
  max-height: 500px;
  word-wrap: normal;
  background: transparent;
}

/* ============================================
   BLOCKQUOTE - Bold, Swiss style
   ============================================ */
.reveal blockquote {
  display: block;
  position: relative;
  width: 90%;
  margin: 1.5em 0;
  padding: 0 0 0 1.5em;
  font-style: normal;
  font-size: 1.3em;
  font-weight: 500;
  line-height: 1.5;
  background: transparent;
  border-left: 6px solid #e63946;
  box-shadow: none;
  color: #1a1a1a;
}
.reveal blockquote p {
  margin: 0;
}

/* ============================================
   TABLES - Grid-based, clean
   ============================================ */
.reveal table {
  margin: 1.5em 0;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  font-size: 0.85em;
}

.reveal table th {
  font-weight: 700;
  background: #000000;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.05em;
}

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.8em 1em;
  border-bottom: 1px solid #f0f0f0;
}

.reveal table tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

.reveal table tr:hover {
  background: #f0f0f0;
}

/* ============================================
   CONTROLS - Minimal, unobtrusive
   ============================================ */
.reveal .controls {
  color: #000000;
}

.reveal .controls button {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.reveal .controls button:hover {
  opacity: 1;
}

.reveal .progress {
  background: #f0f0f0;
  color: #000000;
  height: 4px;
}

.reveal .slide-number {
  color: #666666;
  background-color: transparent;
  font-size: 14px;
  font-weight: 500;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ============================================
   IMAGES - Clean, no borders
   ============================================ */
.reveal section img {
  margin: 1em 0;
  background: transparent;
  border: none;
  box-shadow: none;
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}

.reveal section img.plain {
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */
/* Two columns */
.reveal .two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  align-items: start;
}

/* Three columns */
.reveal .three-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  align-items: start;
}

/* Centered content */
.reveal .centered {
  text-align: center;
}
.reveal .centered h1::after {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   SLIDE RHYTHM
   ============================================ */
.reveal {
  --slide-heading-min-height: 6rem;
  --slide-body-padding-y: 1.5rem;
}

.reveal section.slide-h3 hgroup .slide-pretitle p {
  margin: 0 0 0.35em 0;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666666;
}
.reveal section.slide-h3 hgroup .slide-subtitle p {
  margin: 0.5em 0 0 0;
  font-size: 1rem;
  font-style: italic;
  color: #666666;
}

.reveal section article {
  width: 100%;
}

/* ============================================
   SPECIAL ELEMENTS
   ============================================ */
/* Horizontal rule */
.reveal hr {
  border: none;
  height: 2px;
  background: #000000;
  margin: 1.5em 0;
}

/* Small text */
.reveal small {
  font-size: 0.75em;
  color: #666666;
  vertical-align: baseline;
}

/* Fragments */
.reveal .fragment {
  transition: all 0.3s ease;
}

/* Text utilities */
.reveal .text-sm {
  font-size: 0.85em;
}

.reveal .text-muted {
  color: #666666;
}