/* Metropolis-style theme for the asdex slides (1280×720 canvas). */

@font-face { font-family: "Fira Sans"; font-weight: 300; src: url("../fonts/FiraSans-Light.ttf"); }
@font-face { font-family: "Fira Sans"; font-weight: 300; font-style: italic; src: url("../fonts/FiraSans-LightItalic.ttf"); }
@font-face { font-family: "Fira Sans"; font-weight: 400; src: url("../fonts/FiraSans-Regular.ttf"); }
@font-face { font-family: "Fira Sans"; font-weight: 400; font-style: italic; src: url("../fonts/FiraSans-Italic.ttf"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; src: url("../fonts/FiraSans-Medium.ttf"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; src: url("../fonts/FiraSans-SemiBold.ttf"); }
@font-face { font-family: "Fira Sans"; font-weight: 700; src: url("../fonts/FiraSans-Bold.ttf"); }
@font-face { font-family: "Fira Sans"; font-weight: 700; font-style: italic; src: url("../fonts/FiraSans-BoldItalic.ttf"); }
@font-face { font-family: "JuliaMono"; font-weight: 400; src: url("../fonts/JuliaMono-Regular.ttf"); }
@font-face { font-family: "JuliaMono"; font-weight: 700; src: url("../fonts/JuliaMono-Bold.ttf"); }

:root {
  --dark: #23373b;      /* metropolis dark teal */
  --bright: #eb811b;    /* metropolis orange */
  --brighter: #d6c6b7;
  --gray: #8a8a8a;
  --blue: #0072b2;      /* wong blue, first color */
  --orange: #e69f00;    /* wong orange, second color */
  --purple: #cc79a7;    /* wong reddish purple, third color (bluish green is too close to blue) */
  --vermilion: #d55e00;
  --warn: #e8120c;      /* bright warning red */
  --faint: #f3f4f4;
  --pill: #e6e6e6;
  --mono: "JuliaMono", monospace;
}

.reveal-viewport { background: #fff; }
.reveal { font-family: "Fira Sans", sans-serif; font-size: 34px; color: var(--dark); }
.reveal .slides { text-align: left; }
.reveal .slides section { height: 720px; padding: 0; box-sizing: border-box; line-height: 1.3; }

/* ---------- Frame title and body ---------- */

.reveal section > h2 {
  position: absolute; left: 0; top: 0; width: 1280px; height: 100px; margin: 0;
  padding: 0 35px; box-sizing: border-box; line-height: 100px; white-space: nowrap;
  background: var(--dark); color: #fff; font-size: 42px; font-weight: 700;
  /* bleed the bar up, left and right into any letterboxing around the 16:9 canvas */
  box-shadow: 0 -2000px 0 2000px var(--dark);
}
.reveal section > h2 code { color: #fff; background: none; }
/* a word in the title struck through as a fragment, its replacement written above it */
.retitle { position: relative; display: inline-block; }
.retitle::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: 52%; height: 5px; background: var(--bright);
  transform: rotate(-4deg) scaleX(0); transform-origin: left; transition: transform .3s ease-out;
}
.retitle.visible::after { transform: rotate(-4deg) scaleX(1); }
.retitle .over {
  position: absolute; left: 50%; bottom: 62%; line-height: 1; font-size: 36px; color: var(--bright);
  transform: translateX(-50%) rotate(-6deg) scale(1.3); opacity: 0; transition: opacity .15s .25s, transform .3s .25s;
}
.retitle.visible .over { opacity: 1; transform: translateX(-50%) rotate(-6deg); }
.reveal .body {
  position: absolute; left: 35px; right: 35px; top: 105px; bottom: 50px;
  display: flex; flex-direction: column; justify-content: center;
}
.reveal .slide-number {
  background: none; color: #595959; font-family: "Fira Sans", sans-serif;
  font-size: 18px; right: 18px; bottom: 12px;
}
.reveal-viewport.no-number .slide-number { display: none !important; }
/* Progress along the bottom (built in js/main.js), muted so it doesn't pull the eye;
   it counts slide numbers, not animation steps */
.deck-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; z-index: 10; background: var(--faint); }
.deck-progress span {
  display: block; height: 100%; background: rgba(35, 55, 59, 0.3);
  transform-origin: 0 0; transform: scaleX(0); transition: transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985);
}
.reveal-viewport.no-number .deck-progress { display: none; }
@media print { .deck-progress { display: none; } }

/* ---------- Text ---------- */

.reveal p { margin: 0 0 0.4em; }
.reveal strong, .reveal b { font-weight: 600; }
.reveal em { font-style: italic; }
.reveal .emph { color: var(--bright); }
.reveal ul { margin: 0.1em 0 0.4em; padding-left: 1.1em; list-style: none; }
.reveal ul > li { position: relative; margin: 0.12em 0; }
.reveal ul > li::before { content: "•"; position: absolute; left: -0.85em; font-size: 0.8em; top: 0.08em; }
.reveal ul ul > li::before { content: "‣"; }
.reveal ul ul { margin: 0; }
.reveal a { color: inherit; text-decoration: none; }
.reveal .gray { color: var(--gray); }
.reveal .sc { font-variant: small-caps; }
.reveal .center { text-align: center; }
.reveal .right { text-align: right; }

.t15 { font-size: 23px; }
.t18 { font-size: 27px; }
.t19 { font-size: 29px; }
.t20 { font-size: 30px; }

.reveal .takeaway {
  border-left: 5px solid var(--bright); padding: 4px 0 4px 16px; margin-top: 18px;
}

/* ---------- Code ---------- */

.reveal code { font-family: var(--mono); font-size: 0.8em; }
.reveal :not(pre) > code { background: none; }
.reveal .pill { background: var(--pill); padding: 0 6px; border-radius: 4px; }
.reveal pre {
  margin: 10px 0; font-size: 20px; line-height: 1.35; border-radius: 6px; overflow: hidden;
  box-shadow: none; width: 100%; position: relative;
}
.reveal pre code { display: block; font-size: 1em; padding: 12px 16px; max-height: none; border-radius: 6px; }

/* Light syntax highlighting (GitHub-like), replaces the dark monokai theme */
.reveal .hljs { background: var(--faint); color: #24292f; }
.reveal .hljs-keyword, .reveal .hljs-literal, .reveal .hljs-meta { color: #cf222e; }
.reveal .hljs-title, .reveal .hljs-title.function_ { color: #8250df; }
.reveal .hljs-title.class_, .reveal .hljs-type { color: #953800; }
.reveal .hljs-built_in, .reveal .hljs-number, .reveal .hljs-operator, .reveal .hljs-attr { color: #0550ae; }
.reveal .hljs-string { color: #0a3069; }
.reveal .hljs-comment { color: #6e7781; font-style: italic; }
.reveal .hljs-params, .reveal .hljs-variable { color: inherit; }
.reveal pre.c11 { font-size: 16.5px; }
.reveal pre.c12 { font-size: 18px; }
.reveal pre.c13 { font-size: 19.5px; }
.reveal pre.c14 { font-size: 21px; }
.reveal pre.fit { width: fit-content; }
.reveal .hljs-ln-numbers { display: none; }

/* ---------- Layout ---------- */

.cols { display: grid; gap: 30px; align-items: center; }
.cols > * { min-width: 0; }

/* ---------- Tables ---------- */

.reveal table { border-collapse: collapse; font-size: inherit; }
.reveal table.booktabs { border-top: 2px solid var(--dark); border-bottom: 2px solid var(--dark); }
.reveal table.booktabs thead tr { border-bottom: 1px solid var(--dark); }
.reveal table.booktabs tr.rule { border-top: 1px solid var(--dark); }
.reveal table th { font-weight: 400; }
.reveal table td, .reveal table th { padding: 4px 12px; }
.reveal table .r { text-align: right; }
.reveal table .c { text-align: center; }

/* ---------- Title, section and closing slides ---------- */

.reveal .slides section.title-slide { padding: 70px; }
html.reveal-print .reveal .slides section.title-slide { padding: 70px !important; }  /* reveal.js zeroes it in print */
.title-slide h1 { font-size: 99px; font-weight: 700; margin: 80px 0 0; line-height: 1; }
.title-slide .subtitle { font-size: 42px; font-weight: 300; margin-top: 10px; }
.title-slide .meta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px; margin-top: 10px; }
.title-slide .author { font-size: 33px; font-weight: 300; line-height: 1.5; display: grid; grid-template-columns: auto auto auto; column-gap: 10px; width: fit-content; }
.title-slide .author b { font-weight: 500; }
.title-slide .link { font-family: var(--mono); font-size: 24px; font-weight: 300; margin-top: 4px; }
.divider { height: 3px; background: var(--bright); margin: 22px 0; }
.title-slide .event { font-size: 27px; font-weight: 300; line-height: 1.4; }

.qr-card {
  display: block; width: 220px; background: var(--dark); border-radius: 13px;
  padding: 20px 20px 0; box-sizing: border-box; transform: rotate(4deg);
}
.qr-card img { display: block; width: 100%; margin: 0; }
.qr-card span { display: block; text-align: center; color: #ebebeb; font-weight: 600; font-size: 31px; padding: 10px 0 12px; }

.section-slide .name { position: absolute; left: 256px; right: 256px; top: 260px; font-size: 52px; line-height: 1.2; }
.section-slide .bar { position: absolute; left: 256px; top: 420px; width: 768px; height: 4px; background: var(--brighter); }
.section-slide .bar > div { height: 100%; background: var(--bright); }

.logo-slide .lockup { height: 720px; display: flex; align-items: center; justify-content: center; gap: 70px; }
.logo-slide img { height: 420px; margin: 0; }
.logo-slide .name { font-size: 120px; font-weight: 700; line-height: 1; }
.logo-slide .bar { width: 400px; height: 4px; margin-top: 30px; background: var(--brighter); }
.logo-slide .bar > div { height: 100%; background: var(--bright); }
.logo-slide .link { font-family: var(--mono); font-size: 26px; font-weight: 300; margin-top: 22px; }

/* ---------- Bibliography ---------- */

.bib { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-size: 18px; line-height: 1.3; }
.bib .key { color: var(--dark); }

/* ---------- Figures (see js/figures.js) ---------- */

.stage { position: absolute; inset: 0; }
.stage > * { position: absolute; box-sizing: border-box; }
.cell {
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 25px; font-variant-numeric: tabular-nums;
  background: var(--faint); color: var(--dark); border: 0 solid var(--vermilion);
}
.cell.zero { color: #9aa5a7; }
.cell.zero.faint { background: #f7f7f7; color: #d9dddd; }
.cell.on { background: var(--dark); color: #fff; }
.cell.c0 { background: var(--blue); color: #fff; }
.cell.c1 { background: var(--orange); }
.cell.c2 { background: var(--purple); }
.cell.muted { color: #6b7b7e; }  /* entries of Df(x), never materialized */
.cell.c0.muted { background: #a6cde4; }
.cell.c1.muted { background: #f6dda6; }
.cell.clash { border-width: 4px; }
.cell.clash.lower { box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.cell.pending { background: #fff; color: rgba(35, 55, 59, 0); box-shadow: inset 0 0 0 2px #e3e6e6; }
.cell.sumcell { background: var(--vermilion); color: #fff; font-weight: 700; z-index: 3; }
/* An entry's value and "≠ 0", stacked (see entryText() in js/figures.js). They only fade:
   the cell already moves and scales them, so auto-animate's own transform would do it twice. */
.cell > .layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.reveal .cell > .layer[data-auto-animate-target] { transform: none !important; }

.chip {
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-weight: 500; background: #e3e6e6; color: var(--dark);
}
.chip > span { font-size: 19px; }  /* not on .chip: see num() in js/figures.js */
.chip.c0 { background: var(--blue); color: #fff; }
.chip.c1 { background: var(--orange); }
.chip.c2 { background: var(--purple); }
.chip.on { background: var(--dark); color: #fff; }
.chip.active { background: var(--bright); color: #fff; }
.chip.small > span { font-size: 12px; }

.bracket { border: 3px solid var(--dark); }
.bracket.l { border-right: 0; }
.bracket.r { border-left: 0; }
.mlabel { font-size: 40px; display: flex; align-items: center; justify-content: flex-end; }
.collabel { font-size: 22px; text-align: center; }
.collabel.mname { font-size: 28px; }
.collabel.narrow { font-size: 18px; white-space: nowrap; }
.cell.seed { font-size: 21px; border-radius: 6px; }
.seed-hl { border: 3px solid var(--bright); border-radius: 10px; }

.step { font-size: 28px; color: #b7bebf; text-align: center; }
.step.done { color: var(--dark); }
.step.active { color: var(--bright); font-weight: 700; }

.counter { font-size: 96px; font-weight: 700; text-align: center; line-height: 1; }
.counter-label { font-size: 24px; text-align: center; color: #6b7b7e; }
.cite { font-size: 21px; text-align: center; color: #6b7b7e; }
.sum { font-size: 27px; color: var(--vermilion); font-weight: 500; display: flex; align-items: center; }

/* Forward vs. reverse mode */
.fr-head { font-size: 29px; text-align: center; }
.fr-op { font-size: 34px; text-align: center; }
.fr-cap { font-size: 26px; text-align: center; }
.fr-res { font-size: 26px; display: flex; align-items: center; justify-content: center; }
.fr-res.right { justify-content: flex-end; }
/* Stacked seed labels e_2, ..., e_n: each shows for --len from --at on, the last one from its --at on.
   They align like their slot (centered in forward mode, right-aligned in reverse mode). */
.fr-seq { position: absolute; inset: 0; display: flex; align-items: center; justify-content: inherit; opacity: 0; }
.fr-seq.last { opacity: 1; }
section.present .fr-seq { animation: fr-seq-show var(--len) linear var(--at); }
section.present .fr-seq.last { animation: fr-seq-hide var(--at) linear; }
@keyframes fr-seq-show { from, to { opacity: 1; } }
@keyframes fr-seq-hide { from, to { opacity: 0; } }
/* A JVP/VJP result on its way into J_f: it shows up in its slot at once, then leaves slowly and speeds up.
   Overrides the single transition that auto-animate gives all properties (same delay, own curves). */
.reveal [data-auto-animate="running"] .cell.fly[data-auto-animate-target] {
  transition: opacity 0.15s linear var(--delay), transform var(--fly) cubic-bezier(0.11, 0, 0.5, 0) var(--delay) !important;
}
.vrule { background: #d3d3d3; }

/* Coloring problem: column intersection graph */
.chip.gnode { z-index: 1; }
.chip.gnode > span { font-size: 30px; }
.cell.active { background: var(--bright); color: #fff; }
.gedge { color: var(--dark); }
.gedge.new { color: var(--bright); }
.gedge.clash { color: var(--warn); }
.gedge line { stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.gstatus { font-size: 44px; font-weight: 700; text-align: center; display: flex; align-items: center; justify-content: center; }
.gstatus.bad { color: var(--warn); }
.seed-hl.warn { border-color: var(--warn); }
.gcap { font-size: 26px; text-align: center; white-space: nowrap; }

/* Sparsity detection: index sets flowing through a jaxpr */
.chip.sq { border-radius: 8px; }
.cutout.sd-bubble .say { font-size: 26px; font-weight: 400; line-height: 1.35; }
/* Code above its output, both as wide as the wider one */
.notebook { width: fit-content; margin: 0 auto; }
.reveal pre.output code { background: #fff; box-shadow: inset 0 0 0 2px var(--faint); }

/* Static 0/1 pattern (e.g. the Hessian pattern) */
.pattern { display: inline-grid; gap: 4px; padding: 6px; border: 2px solid #d3d3d3; }
.pattern > div { width: 36px; height: 36px; background: #fff; }
.pattern > div.on { background: var(--dark); }
.pattern > div.c0 { background: var(--blue); }
.pattern > div.c1 { background: var(--orange); }
.reveal table.coverage td { padding: 5px 10px; vertical-align: top; }
.reveal table.coverage td:first-child { white-space: nowrap; }

/* Transformations diagram */
.tdiagram { display: grid; grid-template-columns: auto auto auto auto; align-items: center; gap: 12px 14px; font-size: 30px; justify-content: center; }
.node { background: #f0f0f0; border-radius: 6px; padding: 4px 12px; white-space: nowrap; }
.node.asdex { background: #f9d9b9; font-weight: 600; }
.arrow { color: #737373; }
.tdiagram .fan { display: grid; grid-template-columns: auto auto auto; gap: 10px 12px; align-items: center; }
.tdiagram > :nth-child(4n + 1) { justify-self: end; }
.tdiagram > :nth-child(4n) { justify-self: start; }

/* Collage of newspaper cutouts (see js/zine.js) */
.collage { position: absolute; inset: 100px 0 0; }
.cutout {
  position: absolute; transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, .35));
}
.cutout .cut { position: relative; background: #f4efe3; }
.cutout .cut > img { display: block; width: 100%; margin: 0; mix-blend-mode: multiply; }
.cutout .cut.padded { padding: 14%; }
/* a strip of monospaced text, e.g. a URL */
.reveal .cutout .cut.strip { padding: 12px 22px; font-family: var(--mono); font-size: 26px; white-space: nowrap; }
/* printed colors: a faint dot screen over the scrap */
.cutout .cut.print::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .5;
  background: radial-gradient(circle, rgba(0, 0, 0, .22) 0.9px, transparent 1.3px) 0 0 / 4px 4px;
}
.cutout .tape {
  position: absolute; width: 120px; height: 34px; background: rgba(226, 214, 180, .75);
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 15% 0, 100% 4%, 97% 92%, 91% 100%, 86% 90%, 80% 100%, 0 96%);
}
/* slapped onto the page: drops in from above, slightly turned */
.reveal .fragment.slap {
  transform: translateY(-30px) rotate(calc(var(--rot, 0deg) + 9deg)) scale(1.25);
  transition: opacity .12s ease-out, transform .35s cubic-bezier(.3, 1.5, .5, 1);
}
.reveal .fragment.slap.visible { transform: rotate(var(--rot, 0deg)); }
.bubble .cut { position: absolute; inset: 0; }
.bubble .say { position: absolute; left: 0; right: 0; top: 40%; transform: translateY(-50%); text-align: center; font-size: 58px; font-weight: 600; }
/* bubble-left: the ellipse sits right of center, the tail points left */
.bubble[data-cut="bubble-left"] .say { left: 16%; top: 50%; }

/* Tracing diagram: code -> jaxpr, fanning out into transformed jaxprs */
.traceflow { width: 1160px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.traceflow pre { margin: 0; }
.traceflow svg { display: block; overflow: visible; }
.traceflow svg line { stroke: #737373; stroke-width: 2.5; }
.traceflow svg marker path { fill: #737373; }
.traceflow .arrows { position: relative; width: 1160px; }
.traceflow .arrows > code { position: absolute; font-size: 20px; white-space: nowrap; }
.traceflow .fanout { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; justify-items: center; align-items: start; }
.traceflow .eqwrap { position: relative; }
/* the two branches meet in the middle, leaving the outer margins for the annotations */
.traceflow .fanout > :first-child { justify-self: end; }
.traceflow .fanout > :last-child { justify-self: start; }
.traceflow .eq { position: absolute; left: calc(100% + 20px); font-size: 30px; white-space: nowrap; }
.traceflow .eqwrap.fragment .eq { font-size: 26px; transform: translateY(-50%); }
.traceflow .eq.left { left: auto; right: calc(100% + 14px); }
/* speech bubble beside a jaxpr (a zine cutout), its tail pointing left at it */
/* raised so it clears the vmap jaxpr below */
.traceflow .callout-wrap { position: absolute; left: calc(100% - 14px); top: calc(50% - 45px); width: 450px; height: 310px; transform: translateY(-50%); }
.traceflow .bubble .say { display: flex; justify-content: center; font-size: 26px; font-weight: 400; text-align: left; }
.traceflow .bubble .say ul { margin: 0; }
.traceflow .callout::before { left: -18px; border-right: 18px solid var(--dark); }
.traceflow .callout::after { left: -15px; border-right: 18px solid #fff; }

/* Composition chain: transformations joined by labelled arrows, each with its math function above (in two lines).
   A function is centered over its node and may be wider than it (zero-width cell, overflowing both ways). */
.chain { display: grid; grid-template-columns: repeat(7, auto); justify-content: center; align-items: center; row-gap: 44px; }
.chain > .node, .chain > .edge { grid-row: 2; }
.chain .fn { grid-row: 1; width: 0; justify-self: center; display: flex; flex-direction: column; align-items: center; font-size: 24px; line-height: 1.5; white-space: nowrap; }
.chain .node { flex: none; font-size: 28px; background: var(--faint); padding: 8px 14px; border-radius: 6px; white-space: nowrap; }
.chain .edge { position: relative; flex: none; width: 120px; height: 3px; margin: 0 10px; background: #737373; }
.chain .edge::after { content: ""; position: absolute; right: -2px; top: -6px; border: 7.5px solid transparent; border-left: 12px solid #737373; border-right: 0; }
.chain .edge > span { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 22px; white-space: nowrap; }
.chain .edge code { font-size: 1em; }
/* below the chain: vmap over a node (jacfwd, jacrev), with the math under the new node */
.chain .down { grid-row: 3; width: 0; justify-self: center; margin-top: -34px; display: flex; flex-direction: column; align-items: center; }
.chain .vedge { position: relative; flex: none; width: 3px; height: 70px; margin-bottom: 12px; background: #737373; }
.chain .vedge::after { content: ""; position: absolute; bottom: -2px; left: -6px; border: 7.5px solid transparent; border-top: 12px solid #737373; border-bottom: 0; }
.chain .vedge > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 22px; white-space: nowrap; }
.chain .sub { display: flex; flex-direction: column; align-items: center; }
.chain .side { margin-top: 12px; font-size: 24px; white-space: nowrap; }
/* an alias to the right of a node, without shifting the node off center */
.chain .named { position: relative; display: flex; }
.chain .alias { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; font-size: 28px; white-space: nowrap; }

/* Denser code lines, for long jaxprs */
.reveal pre.tight { margin: 6px 0; }
.reveal pre.tight code { line-height: 19px; padding: 10px 14px; }
/* Column title over a code block, with the call that produced it on the right:
   JAX muted, asdex in orange */
.nb-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 26px; font-weight: 600; line-height: 1; padding-bottom: 7px; margin-bottom: 4px;
  border-bottom: 3px solid var(--brighter);
}
.nb-head code { font-size: 15px; font-weight: 400; color: #595959; }
.nb-head.asdex { border-color: var(--bright); }
.nb-side { align-self: center; }
/* spans the columns right of a two-row notebook, level with its bottom */
.reveal .nb-wide { grid-column: 2 / 4; align-self: end; margin: 0 0 6px; }