/* LaTeX's own maths font (Latin Modern Math, from TeX Live, GUST Font License in fonts/), so formulas look as
   they do in a paper or in Gu's KaTeX slides, and work offline */
@font-face { font-family: "Latin Modern Math"; src: url("fonts/latinmodern-math.otf") format("opentype"); }
math { font-family: "Latin Modern Math", "STIX Two Math", serif; }
/* The deck: a 1600 x 900 stage scaled to the window, white background, WSU slide red. */

:root {
  --ink: #1d1d1f;
  --soft: #4a4a50;
  --muted: #8a8a8e;
  --hair: #e6e6e9;
  --red: #A31E34;
  --teal: #0F7C8C;
  --bg: #ffffff;
}

html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.viewport { position: fixed; inset: 0 0 var(--bar-h, 60px) 0; display: flex; align-items: center; justify-content: center; }   /* the slide sits above the bar; deck.js sets --bar-h, 0 when B hides the bar */
.stage { width: 1600px; height: 900px; position: relative; flex: none; transform-origin: center center; }

.slide { position: absolute; inset: 0; padding: 64px 96px 54px; box-sizing: border-box;
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease; }
.slide.active { opacity: 1; visibility: visible; }
/* a live scene redraws its svg every frame, and a touch whose element is redrawn away never reaches the swipe handler,
   so touches go to the frame around the scene instead */
svg[data-scene] { pointer-events: none; }

/* type */
h1 { margin: 0; font-size: 48px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.hl { color: var(--red); }
.hl-teal { color: var(--teal); }
.sub { margin: 10px 0 0; font-size: 23px; color: var(--muted); }
.takeaway { position: absolute; left: 96px; right: 96px; bottom: 64px; text-align: center; font-size: 27px; font-weight: 700; }
.cite { position: absolute; left: 96px; bottom: 22px; font-size: 13px; color: var(--muted); }

/* steps: an element with data-step="n" shows from step n */
[data-step] { opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; }
[data-step].in { opacity: 1; transform: none; }

/* cards with a coloured left edge */
.card { border: 1px solid var(--hair); border-left: 4px solid var(--soft); border-radius: 10px; background: #fff; padding: 18px 22px; box-sizing: border-box; }
.card.red { border-left-color: var(--red); }
.card.teal { border-left-color: var(--teal); }

/* ------------------------------------------------ slide 1: title */
.title-slide .logo { height: 74px; display: block; }
.title-slide .t-main { position: absolute; left: 96px; top: 250px; width: 700px; }
.title-slide h1 { font-size: 64px; line-height: 1.1; }
.title-slide .event { margin-top: 26px; font-size: 22px; color: var(--muted); }
.title-slide .who { margin-top: 56px; font-size: 30px; font-weight: 700; }
.title-slide .role { margin-top: 6px; font-size: 21px; color: var(--soft); }
.title-slide .map { position: absolute; right: -40px; top: 110px; width: 980px; height: 620px; }
.title-slide .map svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------ slide 2: journey and promise */
.journey { position: relative; margin-top: 34px; height: 150px; }
.journey .rail { position: absolute; left: 30px; right: 30px; top: 22px; height: 2px; background: var(--hair); }
.journey .stops { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.journey .stop { position: relative; padding-top: 48px; text-align: center; }
.journey .stop::before { content: ""; position: absolute; left: 50%; top: 14px; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: #fff; border: 3px solid var(--soft); box-sizing: border-box; }
.journey .stop.now::before { border-color: var(--red); background: var(--red); }
.journey .place { font-size: 21px; font-weight: 700; }
.journey .stop.now .place { color: var(--red); }
.journey .what { margin-top: 6px; font-size: 16px; color: var(--muted); line-height: 1.4; }
.journey .extra { display: inline-block; margin-top: 6px; color: var(--soft); }
/* the story cards: a live scene over each card, in the panel layout of slides 4-7 */
.panels.stories { top: 176px; }
.stories .panel .card { text-align: left; padding: 14px 18px; min-height: 154px; }   /* equal cards, so the pictures line up */
.stories .k { font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.stories .name { margin-top: 6px; font-size: 21px; font-weight: 700; line-height: 1.2; }
.stories .when { margin-top: 6px; font-size: 15px; color: var(--soft); min-height: 0; text-align: left; }
.stories .card.red .name { color: var(--red); }

/* ------------------------------------------------ slide 3: five futures */
.futures { position: absolute; left: 96px; right: 96px; top: 168px; bottom: 116px;   /* room for the closing line */
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; gap: 24px 22px; }
.tile { grid-column: span 2; display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 1;
  opacity: 0; transition: transform 0.7s cubic-bezier(.2,.8,.2,1), opacity 0.45s ease; transform-origin: center center; }
.tile:nth-child(4) { grid-column: 2 / span 2; }
.tile.shown { opacity: 1; }
.tile.dim { opacity: 0.18; }
.tile.focus { z-index: 5; opacity: 1; }
.tile .frame { flex: 1; min-height: 0; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: #fff; }
.tile.focus .frame { box-shadow: 0 18px 50px rgba(0,0,0,0.12); }
.tile svg { width: 100%; height: 100%; display: block; }
.tile:not(.focus) svg text[paint-order] { display: none; }   /* scene labels read only when a tile is enlarged; small, the caption carries the point */
.tile .cap { margin-top: 8px; font-size: 17px; font-weight: 700; text-align: center; line-height: 1.25; min-height: 2.5em; text-wrap: balance; }   /* two lines for every caption, so the frames line up; balanced, so no word sits alone */
/* slide 24: the future's caption, then its open problem with a direction tag styled like slide 5's two cards */
.slide[data-kind="problems"] .tile .cap { min-height: 4.1em; }
.tile .cap.now, .tile.solved .cap.was { display: none; }
.tile.solved .cap.now { display: block; animation: capin 0.45s ease; }
@keyframes capin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tile .cap .dir { display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tile .cap .dir.red { color: var(--red); }
.slide[data-kind="problems"] .tile.focus { background: #fff; border-radius: 12px; }   /* the other tiles stay on show here, so the enlarged one covers them */

/* ------------------------------------------------ slide 4: the reveal */
.reveal-map { position: absolute; left: 96px; right: 96px; top: 160px; bottom: 116px; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.reveal-map svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------ panels (slides 4 and 5), after Gu: a live close-up over a card each */
.panels { position: absolute; left: 96px; right: 96px; top: 176px; bottom: 128px; display: grid; gap: 22px; }
.panels.four { grid-template-columns: repeat(4, 1fr); }
.panels.three { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.panels.halves { grid-template-columns: 1fr 1fr; gap: 28px; }
.panels.three .panel .card { height: 108px; box-sizing: border-box; }   /* equal cards, so the three pictures line up */
.panels.three .panel .when { min-height: 0; }
.panel .key { margin-top: 6px; font-size: 14px; color: var(--soft); }
.panel .key b { color: var(--ink); }
.panels.two { grid-template-columns: 2fr 3fr; gap: 28px; }       /* the recap smaller, the news larger */
.panel { display: flex; flex-direction: column; min-height: 0; }
.panel .frame { flex: 1; min-height: 0; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: #fff; }
.panel svg { width: 100%; height: 100%; display: block; }
.panel .card { margin-top: 12px; text-align: center; padding: 14px 16px; }
.panel .name { font-size: 22px; font-weight: 700; }
.panel .when { margin-top: 6px; font-size: 16px; color: var(--soft); line-height: 1.35; min-height: 2.7em; text-wrap: balance; }

/* ------------------------------------------------ slide 6: one formula; the term for the current step turns red */
.formula { position: absolute; left: 96px; right: 96px; top: 178px; text-align: center; }
.formula math { font-size: 60px; }
.formula mi, .formula mn { transition: color 0.3s ease; }
.slide[data-at="1"] .t-B, .slide[data-at="2"] .t-P, .slide[data-at="3"] .t-g, .slide[data-at="4"] .t-I, .slide[data-at="5"] .t-C { color: var(--red); }
.slide[data-at="6"] .t-B, .slide[data-at="6"] .t-P, .slide[data-at="6"] .t-g, .slide[data-at="6"] .t-I { color: var(--red); }
.slide[data-at="6"] .t-N { color: var(--muted); }
.panels.five { grid-template-columns: repeat(5, 1fr); top: 372px; }
.panel .sym { font-weight: 400; margin-right: 4px; }

/* ------------------------------------------------ one large live scene (slide 7) */
.big-scene { position: absolute; left: 96px; right: 96px; top: 168px; bottom: 128px; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: #fff; }
.big-scene svg { width: 100%; height: 100%; display: block; }
.big-scene.overlay { background: transparent; border-color: transparent; transform: none; }   /* a second layer over a chart: it fades in, but does not move */

/* ------------------------------------------------ overview, notes, presenter */
.overview { position: fixed; inset: 0; background: rgba(255,255,255,0.97); z-index: 50; display: none; padding: 48px 64px; box-sizing: border-box; overflow: auto; }
.overview.open { display: block; }
.overview h2 { margin: 0 0 18px; font-size: 26px; }
.overview h3 { margin: 22px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }   /* one heading per part of the talk */
.overview ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.overview li { border: 1px solid var(--hair); border-radius: 8px; padding: 12px 14px; cursor: pointer; font-size: 16px; }
.overview li.cur { border-color: var(--red); }
.overview li b { color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
/* ------------------------------------------------ speaker notes (N), after Jiatao Gu's panel, white like the slides */
.slide aside.speaker { display: none; }
.notes-panel { position: fixed; top: 16px; right: 16px; bottom: calc(var(--bar-h, 60px) + 16px); width: min(46vw, 900px); z-index: 55; box-sizing: border-box;
  background: #ffffff; color: var(--soft); border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.14);
  padding: 20px 26px 28px; overflow: auto; display: none; font-size: 20px; line-height: 1.75; }
.notes-panel.open { display: block; }
.np-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.np-head button { font: inherit; font-size: 15px; line-height: 1.2; color: var(--soft); background: #fff; border: 1px solid var(--hair); border-radius: 8px; padding: 7px 14px; cursor: pointer; }
@media (hover: hover) { .np-head button:hover { border-color: var(--muted); color: var(--ink); } }   /* on a touchscreen a tapped button would keep its hover look */
.np-head button:last-child { margin-left: auto; }
.np-meta { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.np-title { margin-top: 16px; font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.np-next { margin-top: 8px; font-size: 15px; color: var(--muted); }
.np-body p { margin: 18px 0 0; }
.np-body .say { color: var(--red); font-weight: 600; }   /* the words to say aloud */
.np-body .b { color: var(--ink); font-weight: 650; }
.np-body .i { font-style: italic; }
.np-body p.h { margin-top: 28px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.np-body p.h:first-child { margin-top: 18px; }
.np-body a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------ control bar, as in Gu's decks: always on, in its own strip below the slide; B hides it */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 60px; display: flex; align-items: center; justify-content: center; gap: 14px;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(6px); border-top: 1px solid var(--hair);
  }
body.bar-off .bar { display: none; }
body:not(.presenter):not(.awake) { cursor: none; }   /* the cursor hides while the mouse rests */
.bar button { font: inherit; font-size: 14px; color: var(--soft); background: #fff; border: 1px solid var(--hair); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
@media (hover: hover) { .bar button:hover { border-color: var(--muted); color: var(--ink); } }
.bar .nav { width: 36px; padding: 5px 0; font-size: 20px; line-height: 1; }
.bar .dots { display: flex; flex-wrap: wrap; max-width: 560px; justify-content: center; align-items: center; }
/* each dot is a 15 x 24 click target; the visible 9 px circle is drawn by ::before */
.bar .dot { width: 15px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bar .dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #cfcfd4; transition: transform 0.2s ease; }
@media (hover: hover) { .bar .dot:hover::before { background: var(--muted); } }
.bar .dot.cur::before { background: var(--red); transform: scale(1.35); }
.bar .dot.todo { cursor: default; }
.bar .dot.todo::before { background: none; box-shadow: inset 0 0 0 1.5px #e2e2e6; }
.bar .count { min-width: 60px; text-align: center; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar .pager, .bar .tools { display: contents; }   /* one row of controls here; the groups only matter on small screens */
.turn-hint { display: none; }

/* ------------------------------------------------ phones and small tablets: no keyboard, no second screen, fingers instead of a mouse.
   The bar keeps back, the count, forward, Overview, Notes and Full screen, with 44 px buttons; a red line along its top shows
   progress in place of the dots, and a swipe turns the slide (deck.js). */
@media (max-width: 900px), (max-height: 500px) {
  .bar { gap: 12px; padding: 0 8px; }
  .bar .pager, .bar .tools { display: flex; align-items: center; gap: 6px; }
  .bar .dots, .bar [data-act="presenter"], .hotkey { display: none; }
  .bar::before { content: ""; position: absolute; left: 0; top: -1px; width: var(--progress, 0); height: 2px; background: var(--red); }
  .bar button { min-height: 44px; padding: 0 12px; font-size: 15px; }
  .bar .nav { width: 44px; padding: 0; font-size: 24px; }
  .bar .count { min-width: 52px; }
  .overview { padding: 20px 16px calc(var(--bar-h, 60px) + 20px); }
  .overview h2 { font-size: 22px; }
  .overview ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notes-panel { top: 8px; right: 8px; bottom: calc(var(--bar-h, 60px) + 8px); padding: 12px 16px 20px; font-size: 16px; line-height: 1.6; }
  .np-head button { min-height: 44px; }
  .np-title { margin-top: 12px; font-size: 22px; }
  .np-body p { margin-top: 14px; }
}
/* too narrow for one row: page turning above, the tools below */
@media (max-width: 459px) {
  .bar { height: auto; flex-direction: column; gap: 6px; padding: 8px; }
}
/* notes beside the slide when the screen is wide, below it when it is tall, so both stay in view */
@media (max-width: 900px) and (orientation: landscape), (max-height: 500px) and (orientation: landscape) {
  body:has(.notes-panel.open) .viewport { right: 50%; }
  .notes-panel { left: calc(50% + 4px); width: auto; }
}
@media (max-width: 900px) and (orientation: portrait) {
  body:has(.notes-panel.open) .viewport { bottom: auto; height: 56.25vw; }   /* the slide moves to the top, full width */
  .notes-panel { top: calc(56.25vw + 8px); left: 8px; width: auto; }
}
/* a phone held upright shows the slide a quarter of its size, so suggest turning it */
@media (max-width: 600px) and (orientation: portrait) {
  .turn-hint { display: block; position: fixed; left: 16px; right: 16px; bottom: calc(var(--bar-h, 60px) + 20px); text-align: center; font-size: 14px; color: var(--muted); }
  .overview ol { grid-template-columns: minmax(0, 1fr); }
}

body.presenter { overflow: auto; background: #f4f4f6; }
.pv { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding: 24px; box-sizing: border-box; height: 100vh; }
.pv .now, .pv .next { background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 20px; }
.pv .label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pv .ttl { font-size: 26px; font-weight: 700; margin-top: 6px; }
.pv .now { overflow: auto; }
.pv .meta { font-size: 15px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.pv .body { font-size: 21px; line-height: 1.7; color: var(--soft); }
.pv .body p { margin: 14px 0 0; }
.pv .body .say { color: var(--red); font-weight: 600; }
.pv .body .b { color: var(--ink); font-weight: 650; }
.pv .body .i { font-style: italic; }
.pv .body p.h { margin-top: 24px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pv .body a { color: var(--soft); }
.pv .clock { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 6px; }
.pv .target { font-size: 15px; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------ slide 11: the street, then the published problem beside it */
.big-scene.beside { transition: right 0.6s cubic-bezier(.2,.8,.2,1); }
.slide:has(.problem.in) .big-scene.beside { right: 880px; }
/* no zoom: the camera centres the processor and the five people, so both frame widths crop the same middle */
.problem { position: absolute; right: 96px; width: 760px; top: 168px; bottom: 128px; display: flex; flex-direction: column; padding: 20px 26px; }
.problem .k { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.problem table { border-collapse: collapse; margin-top: 8px; }
.problem table.defs { margin-top: auto; border-top: 1px solid var(--hair); }
.problem table.defs td { padding-top: 8px; }
.problem td { padding: 3px 0; vertical-align: middle; }
.problem td.st { width: 56px; padding-right: 10px; color: var(--soft); font-size: 20px; font-family: "Latin Modern Math", serif; }
.problem math { font-size: 23px; math-style: normal; }   /* display style, as in the paper: limits under the sums */
.problem td.w { padding-left: 14px; white-space: nowrap; font-size: 15px; color: var(--soft); line-height: 1.3; }
.problem tr.obj td { padding-bottom: 6px; }
.problem .t-a { color: var(--red); }
/* the count belongs to the street, so it sits on the picture */
.street-count { position: absolute; left: 112px; bottom: 142px; padding: 8px 14px; background: rgba(255,255,255,0.94); border: 1px solid var(--hair); border-radius: 8px; font-size: 18px; font-weight: 650; }

/* ------------------------------------------------ slide 12: teacher, examples, student, joined by arrows */
.panels.flow { grid-template-columns: 1fr 40px 1.5fr 40px 1fr; gap: 10px; bottom: 186px; }   /* taller frames would crop the wide street and the diagram */   /* the middle one holds the CNN, give it room */
.flow-arrow { align-self: center; margin-top: -120px; text-align: center; font-size: 44px; line-height: 1; color: var(--muted); }
.flow .panel .card { text-align: left; padding: 12px 16px; min-height: 112px; }
.flow .k { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.flow .name { margin-top: 4px; font-size: 21px; font-weight: 700; line-height: 1.2; }
.flow .when { margin-top: 4px; font-size: 15px; color: var(--soft); min-height: 0; text-align: left; }
.flow .card.red .name { color: var(--red); }

/* ------------------------------------------------ slide 13: the open question beside the street */
.slide:has(.question.in) .big-scene.beside { right: 664px; }
.question { position: absolute; right: 96px; width: 544px; top: 168px; bottom: 128px; padding: 22px 28px; box-sizing: border-box; }
.question .k { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.question .q { margin-top: 10px; font-size: 26px; font-weight: 700; line-height: 1.25; }
.question .row { margin-top: 18px; }
.question .lab { font-size: 15px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.question ul { margin: 6px 0 0; padding-left: 20px; font-size: 19px; line-height: 1.45; }

/* ------------------------------------------------ slide 17: two numbers, then the three DECRA aims */
.bignums { position: absolute; left: 96px; right: 96px; top: 168px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bignums .n { border-left: 4px solid var(--red); padding: 4px 0 4px 18px; }
.bignums .v { font-size: 46px; font-weight: 800; color: var(--red); line-height: 1.05; }
.bignums .v small { font-size: 24px; font-weight: 700; color: var(--ink); margin-left: 8px; }
.bignums .b { margin-top: 4px; font-size: 17px; color: var(--soft); }
.aims-head { position: absolute; left: 96px; right: 96px; top: 282px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.panels.three.aims { top: 308px; }
.aims .panel .card { text-align: left; height: 112px; }
.aims .k { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.aims .name { margin-top: 4px; font-size: 19px; line-height: 1.25; }

/* ------------------------------------------------ slide 20: one round on a clock, then its formula */
.big-scene.round { bottom: 262px; }
.roundformula { position: absolute; left: 96px; right: 96px; bottom: 124px; height: 124px; display: flex; align-items: center; justify-content: center; }
.roundformula math { font-size: 40px; math-style: normal; }
.roundformula .t-dl { color: var(--red); }
.roundformula .t-c { color: var(--teal); }
.roundformula mtext.lab { font-family: Inter, system-ui, sans-serif; font-size: 15px; font-weight: 600; color: var(--muted); }

.problem mtext.under { font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--muted); }
.problem.roomy math { font-size: 26px; }
.problem.roomy td { padding-top: 5px; padding-bottom: 5px; }   /* vertical only: keeps the gaps beside s.t. and the labels */
.problem.roomy td.w { font-size: 16px; white-space: normal; width: 160px; }   /* labels wrap so the energy row keeps its arguments */
.problem.roomy table.defs math { font-size: 20px; }
.problem.roomy table.defs td.w { width: auto; white-space: nowrap; }   /* the definitions sit smaller than the problem, as a "where" */
.problem table.defs td.full { text-align: center; }
.problem .key { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--soft); }
.problem.passes svg.timeline { flex: 1; width: 100%; min-height: 0; margin-top: 6px; }   /* slide 23: a drawing in the card, not a table */

/* ------------------------------------------------ slide 25: the last slide, after the layout of Jiatao Gu's last slide */
.final .thesis { margin: 34px 0 0; font-size: 34px; font-weight: 500; color: var(--ink); }   /* the title already carries the red */
.final .works { margin: 22px 0 0; font-size: 21px; color: var(--muted); }
.final .contact { position: absolute; left: 96px; right: 96px; top: 400px; display: flex; justify-content: center; align-items: center; gap: 44px; }
.final .qr { padding: 22px; background: #fff; border: 1px solid var(--hair); border-radius: 14px; }
.final .qr img { display: block; width: 230px; height: 230px; image-rendering: pixelated; }
.final .who .scan { font-size: 22px; color: var(--muted); }
.final .who .site { margin: 8px 0 10px; font-size: 32px; font-weight: 700; }
.final .who .name, .final .who .mail { font-size: 22px; color: var(--muted); line-height: 1.5; }