/*
 * Deck theme for reveal.js (index.html): 1280 × 720 slides, title anchored
 * top-left, content flowing from the top.
 * Generated by Deck Theme Lab (preset "Plex Lab", customised).
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Same names as the inria theme (../compute/themes/inria.css), mapped by role
   onto this dark palette so styles copied between decks keep working. */
:root {
  --cutebugs-red: #f5c451;        /* highlight: picked items, <strong> */
  --cutebugs-red-dark: #f5c451;   /* highlighted text */
  --cutebugs-magenta: #d97fd0;
  --cutebugs-blue: #4aa8ff;       /* primary accent: rules, bars, markers */
  --cutebugs-cyan: #8fc5fa;       /* secondary accent: inline code */
  --cutebugs-green: #7cc47a;
  --cutebugs-orange: #ff9f43;
  --cutebugs-slate: #8e95a2;      /* muted text: captions, footer */
  --cutebugs-ink: #e3e9f3;        /* body text */
  --cutebugs-panel: #18233a;      /* raised surface: callout boxes */
  --cutebugs-dim: #3d4a63;        /* de-emphasised marks: "rest" bars */
  --cutebugs-gradient: linear-gradient(115deg, var(--cutebugs-blue) 0%, var(--cutebugs-magenta) 55%, var(--cutebugs-red) 100%);
}

/* page around the slides: darker than a slide, so its edges show */
html, body, .reveal, .reveal-viewport { background: #05080e; }
/* reveal.js lays out the slides; display: flex comes from its `display` option */
.reveal .slides { text-align: left; }
.reveal .slides > section { width: 1280px; height: 720px; overflow: hidden; box-shadow: 0 0 0 1px #2a3550, 0 8px 40px #000; }
/* PDF (?print-pdf): reveal.js wraps each slide in a .pdf-page and resets its box: restore it; no transitions */
html.reveal-print .reveal .slides section { display: flex !important; padding: var(--pad) !important; height: 720px !important; }
html.reveal-print section, html.reveal-print section * {
  transition: none !important; animation-delay: 0s !important; animation-duration: 0s !important;
}
section {
  background: #0f1829;
  color: var(--cutebugs-ink);
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: 1.25px;         /* from Marp's Gaia theme, which this theme started from */
  overflow-wrap: break-word;
  --pad: 56px 72px 72px;
  padding: var(--pad);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
section h1 {
  font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: 56px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--cutebugs-ink);
  margin: 0 0 34px;
  text-wrap: balance;
}
section h1 { border-left: 8px solid var(--cutebugs-blue); padding-left: 24px; margin-left: -32px; }
section h2 { font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 1.15em; color: var(--cutebugs-blue); margin: .5em 0 .3em; }
section p { margin: 0 0 .6em; }
section ul, section ol { margin: 0 0 .6em; padding-left: 1.3em; }
section li { margin: .3em 0 0; }
section ul { list-style-type: "›  "; }
section ul ul { list-style-type: "–  "; font-size: .86em; margin: .15em 0 .25em; }
section li::marker { color: var(--cutebugs-blue); }
section ul ul > li::marker { color: var(--cutebugs-slate); }
section strong { color: var(--cutebugs-red); font-weight: 600; }
section a { color: var(--cutebugs-blue); }
section code {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: .84em;
  color: var(--cutebugs-cyan);
  background: #0b1120;
  padding: .08em .35em;
  border-radius: 4px;
}
section pre {
  margin: .3em 0 .8em;
  padding: 20px 26px;
  background: #0b1120;
  border-left: 4px solid var(--cutebugs-blue);
  border-radius: 4px;
  font-size: .7em;
  line-height: 1.55;
  overflow: hidden;
}
section pre code { font-size: 1em; padding: 0; background: none; color: var(--cutebugs-ink); }
section .hljs-keyword, section .hljs-built_in { color: var(--cutebugs-blue); }
section .hljs-title { color: #97c9f9; }
section .hljs-string, section .hljs-number { color: var(--cutebugs-red); }
section .hljs-comment { color: var(--cutebugs-slate); font-style: italic; }
section .hljs-params { color: var(--cutebugs-ink); }
section table { border-collapse: collapse; font-size: .82em; font-variant-numeric: tabular-nums; margin: .3em 0 .8em; }
section th, section td { padding: .42em 1.2em .42em 0; background: none; border: 0; }
section th { color: var(--cutebugs-blue); font-weight: 600; text-align: left; border-bottom: 2px solid var(--cutebugs-blue); }
section td { border-bottom: 1px solid #313949; }
/* footer and page number: the box of Marp's Gaia theme, which this theme started from */
section footer, section::after {
  box-sizing: border-box; height: 70px; line-height: 50px; overflow: hidden; padding: 10px 25px;
}
section footer {
  position: absolute; left: 72px; right: auto; top: auto; bottom: 24px; height: auto;
  font-size: 16px; color: var(--cutebugs-slate); font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}
section::after {
  content: attr(data-page); pointer-events: none;
  position: absolute; right: 72px; bottom: 22px;
  font-size: 16px; font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; color: var(--cutebugs-slate);
  font-variant-numeric: tabular-nums;
}
section > :first-child { margin-top: 0; }
section.title { justify-content: center; }
section.title h1 {
  font-size: 73px;
  color: var(--cutebugs-ink);
  max-width: 85%;
  margin: 0 0 24px; padding: 0; border: 0; background: none;
}
section.title h1::before { content: ''; display: block; width: 96px; height: 6px; border-radius: 3px; background: var(--cutebugs-blue); margin-bottom: 36px; }
section.title h1::after { content: none; }
section.title h1 + p { font-size: 1.1em; color: var(--cutebugs-slate); }

/* Key takeaways: an eyebrow label, the claim as the slide's h1 (no divider
   border: the blue bar above the eyebrow carries the accent), the supporting
   bullets; the slide centres vertically, like a title slide: it closes a
   section. The h1 holds the claim so the overview tile shows the message. */
section.takeaway { justify-content: center; }
section.takeaway h2 {
  font: 400 20px/1.2 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .14em; color: var(--cutebugs-slate);
  margin: 0 0 46px;
}
section.takeaway h2::before {
  content: ''; display: block; width: 48px; height: 4px; border-radius: 2px;
  background: var(--cutebugs-blue); margin-bottom: 16px;
}
section.takeaway h1 {
  font-size: 73px; border: 0; padding: 0; margin: 0 0 44px;
}
section.takeaway ul { font-size: 1.1em; }
section.takeaway li { margin-top: .45em; }
/* a takeaway with no claim: the list takes the lead */
section.takeaway:not(:has(h1)) ul { font-size: 1.35em; }

/* Equation grid (themes/eqgrid.js): a markdown table, one column per token
   position, one row per quantity, row labels in the first column. */
section .eqgrid table {
  width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0;
  font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums;
}
section .eqgrid th, section .eqgrid td {
  height: 48px; padding: 0 3px; border: 0; background: none; text-align: center;
  vertical-align: middle; white-space: nowrap; color: var(--cutebugs-ink); position: relative;
  transition: opacity .35s;
}
section .eqgrid th { font-weight: 600; }
/* row labels: **name**, then a short description */
section .eqgrid th:first-child, section .eqgrid td:first-child {
  width: 230px; text-align: left; padding-left: 16px;
  box-shadow: inset 4px 0 var(--c, var(--cutebugs-dim)); /* not a border: collapsed borders ignore the row's opacity */
  font-size: 14px; font-weight: 400; line-height: 1.25; color: var(--cutebugs-slate);
}
section .eqgrid :is(th, td):first-child strong { font-size: 20px; font-weight: 400; color: var(--cutebugs-ink); }
/* the query's column */
section .eqgrid table tr:nth-child(n) > .eqgrid-q { background: color-mix(in srgb, var(--cutebugs-red) 7%, transparent); }
section .eqgrid th.eqgrid-q { color: var(--cutebugs-red); }
section .eqgrid .eqgrid-dot { color: var(--cutebugs-dim); }
/* « NN % » cells: a bar filled to NN % behind the text */
section .eqgrid .eqgrid-bar::before, section .eqgrid .eqgrid-bar::after {
  content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; border-radius: 2px;
}
section .eqgrid .eqgrid-bar::before { right: 4px; background: color-mix(in srgb, var(--cutebugs-dim) 45%, transparent); }
section .eqgrid .eqgrid-bar::after {
  width: calc((100% - 8px) * var(--p) / 100); max-width: calc(100% - 8px);
  background: color-mix(in srgb, var(--cutebugs-red) 45%, transparent); transition: width .6s ease;
}
section .eqgrid .eqgrid-txt { position: relative; z-index: 1; }
section .eqgrid tr.is-off .eqgrid-bar::after { width: 0; }
/* a row with a single merged cell, right-aligned */
section .eqgrid .eqgrid-merged { text-align: right; padding-right: 8px; }
section .eqgrid tr.is-off > * { opacity: 0; }
/* no row stripes (:nth-child(n) outweighs gaia's tbody > tr:nth-child(odd) td) */
section .eqgrid table tr:nth-child(n) > :is(th, td) { background: none; }
/* MathJax is wider than the text face: scale it down */
section .eqgrid td mjx-container, section .eqgrid th mjx-container { font-size: 82%; }
/* MathJax glyphs drawn slightly bold on screen, as Marp did */
section mjx-container[jax="SVG"] :is(path, use)[data-c] { stroke-width: 3; }
@media print { section mjx-container[jax="SVG"] :is(path, use)[data-c] { stroke-width: 0; } }
section .eqgrid td.is-off { opacity: 0; }

/* Equation pairs (class eqgrid eqpair, data-step-cols="2"): label | one token | ⟶ | all tokens,
   one row per equation; the steps show the arrow and the matrix form. */
section .eqpair table { font-size: 24px; }
section .eqpair th, section .eqpair td { height: 66px; text-align: left; }
section .eqpair :is(th, td):first-child { width: 150px; }
section .eqpair :is(th, td):nth-child(3) { width: 60px; text-align: center; color: var(--cutebugs-dim); }
section .eqpair th { height: 32px; font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; font-size: 20px; font-weight: 400; color: var(--cutebugs-slate); text-transform: uppercase; letter-spacing: .06em; }
section .eqpair td:nth-child(4) { font-size: 28px; line-height: 1.1; }
section .eqpair td mjx-container { font-size: 100%; }
section .eqpair .eqpair-sz { display: block; margin-top: 2px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 15px; color: var(--cutebugs-slate); }


/* overview (Esc, laid out as a grid by themes/deck.js): show every slide, not only
   the ones near the current one (reveal.js hides the others with an inline display: none) */
.reveal.overview .slides > section { display: flex !important; }
/* overview: the slide's number in its bottom-right corner (reveal.js hides ::before there: !important) */
.reveal.overview .slides > section::before {
  content: attr(data-n); pointer-events: none; z-index: 10;
  position: absolute; right: 0; bottom: 0; display: block !important;
  padding: 10px 36px; border-top-left-radius: 28px; background: var(--cutebugs-blue); color: #fff;
  font: 700 150px/1 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; font-variant-numeric: tabular-nums;
}

/* keyboard shortcuts (themes/deck.js): a strip under the slide, off in full screen and in the PDF */
#keys { display: none; }
html.keys .reveal { height: calc(100% - 40px); }
html.keys #keys {
  display: flex; justify-content: center; gap: 18px;
  position: fixed; left: 0; right: 0; bottom: 0; height: 40px; align-items: center; background: #05080e;
}
#keys button {
  background: none; border: 0; padding: 4px 6px; cursor: pointer; opacity: .7;
  font: 14px 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; color: var(--cutebugs-slate);
}
#keys button:hover { opacity: 1; color: var(--cutebugs-ink); }
#keys kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; margin-right: 3px; text-align: center;
  font: 600 12px/18px 'IBM Plex Mono', monospace; color: var(--cutebugs-ink);
  background: var(--cutebugs-panel); border: 1px solid var(--cutebugs-dim); border-bottom-width: 3px; border-radius: 5px;
}
#keys kbd.arrow { font: 16px/18px 'IBM Plex Sans', sans-serif; }