/* ============================================================================
   Shedding light on Dark Energy — A Coruña, 14 Aug 2026
   Monokai Dark, reproduced from the pptx theme (ppt/theme/theme1.xml).
   ========================================================================= */

:root {
  /* --- Monokai Dark, straight from the pptx colour scheme ---------------- */
  --bg:        #3E3D32;   /* lt2  — standard slide canvas                    */
  --bg-deep:   #000000;   /* tx1  — "concept" slides                          */
  --panel:     #272822;   /* lt1  — Monokai editor background                 */
  --fg:        #F8F8F2;   /* dk1  — body text                                 */
  --comment:   #75715E;   /* dk2  — the Monokai comment grey                  */
  --muted:     #ACA893;   /* lifted comment grey, legible on --bg             */
  --pink:      #F92672;   /* accent1 — titles, the headline result            */
  --green:     #A6E22E;   /* accent2                                          */
  --cyan:      #66D9E8;   /* accent3 — sub-heads, data                        */
  --purple:    #AE81FF;   /* accent4 — simulations                            */
  --amber:     #FD971F;   /* accent5 — "optimize this!"                       */
  --sand:      #E6DB74;   /* accent6 — emphasis                               */

  --paper:     #FFFFFF;   /* figure cards                                     */

  --font-sans: "Avenir Next", "Gill Sans", "Gill Sans MT", -apple-system,
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;

  --ease:      cubic-bezier(.2, .7, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- the stage
   Everything is laid out on a fixed 1280x720 canvas and scaled to fit the
   viewport, so the deck is pixel-identical on any projector.               */
#stage {
  position: absolute;
  top: 50%; left: 50%;
  width: 1280px;
  height: 720px;
  transform-origin: center center;
  background: var(--bg);
  overflow: hidden;
}

/* --------------------------------------------------------------- slide base */
.slide {
  position: absolute;
  inset: 0;
  padding: 46px 62px 54px;
  opacity: 0;
  visibility: hidden;
  transform: scale(.988) translateY(8px);
  filter: blur(2px);
  transition: opacity .30s var(--ease), transform .34s var(--ease),
              filter .30s var(--ease), visibility 0s linear .34s;
  display: flex;
  flex-direction: column;
}
.slide.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition: opacity .34s var(--ease), transform .40s var(--ease-out),
              filter .34s var(--ease), visibility 0s;
}
.slide--deep { background: var(--bg-deep); }
.slide--flush { padding: 0; }
.slide--center { align-items: center; justify-content: center; text-align: center; }

/* --------------------------------------------------------------- typography */
.kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--comment);
  margin-bottom: 10px;
}
.kicker b { color: var(--cyan); font-weight: 500; }

h1.title {
  font-size: 46px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--pink);
  margin: 0 0 6px;
}
h1.title.on-deep { color: var(--fg); }

.subtitle {
  font-size: 23px;
  font-weight: 500;
  color: var(--cyan);
  margin: 0 0 22px;
  letter-spacing: -.005em;
}

.lead   { font-size: 26px; line-height: 1.42; color: var(--fg); margin: 0 0 18px; }
.body   { font-size: 20px; line-height: 1.5;  color: var(--fg); margin: 0 0 14px; }
.small  { font-size: 17px; line-height: 1.5;  color: var(--fg); }
.cap    { font-size: 13px; line-height: 1.45; color: var(--comment);
          font-family: var(--font-mono); letter-spacing: .02em; }

em  { color: var(--sand);  font-style: italic; }
b   { color: var(--fg);    font-weight: 600; }
.hl     { color: var(--sand); font-weight: 600; }
.hl-c   { color: var(--cyan); font-weight: 600; }
.hl-p   { color: var(--pink); font-weight: 600; }
.hl-a   { color: var(--amber); font-weight: 600; }
.hl-g   { color: var(--green); font-weight: 600; }
.dimtext{ color: var(--comment); }

/* a tidy list without bullet glyphs — a thin accent rule instead */
ul.ticks { list-style: none; margin: 0; padding: 0; }
ul.ticks li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 13px;
  font-size: 20px;
  line-height: 1.42;
  color: var(--fg);
}
ul.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 11px; height: 2px;
  background: var(--pink);
  opacity: .85;
}
ul.ticks.c li::before { background: var(--cyan); }

/* ------------------------------------------------------------------ layout */
.cols { display: flex; gap: 40px; flex: 1; min-height: 0; align-items: center; }
.cols > * { min-width: 0; }
.col-6 { flex: 1 1 0; }
.col-7 { flex: 7 1 0; }
.col-5 { flex: 5 1 0; }
.col-4 { flex: 4 1 0; }
.col-8 { flex: 8 1 0; }
.stack { display: flex; flex-direction: column; }
.grow  { flex: 1; min-height: 0; }
.rowc  { display: flex; align-items: center; gap: 16px; }

/* ------------------------------------------------------- figures on "paper" */
.card {
  background: var(--paper);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 24px 60px -14px rgba(0,0,0,.65),
              0 0 0 1px rgba(248,248,242,.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card img { display: block; width: 100%; height: auto; border-radius: 4px; }
.card--tight { padding: 6px; }
.card--fill { height: 100%; }
.card--fill img { width: auto; max-width: 100%; max-height: 100%; }

figure { margin: 0; }
figcaption { margin-top: 9px; font-size: 12.5px; color: var(--comment);
             font-family: var(--font-mono); letter-spacing: .02em; }

.eq  { display: block; }
.eq img { display: block; height: auto; }

/* ------------------------------------------------------------------ chrome */
#progress {
  position: absolute; left: 0; bottom: 0;
  height: 3px; width: 0;
  background: var(--pink);
  transition: width .38s var(--ease-out);
  z-index: 40;
}
#counter {
  position: absolute; right: 22px; bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--comment);
  z-index: 40;
  pointer-events: none;
}
#brand {
  position: absolute; left: 22px; bottom: 15px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--comment);
  opacity: .75;
  z-index: 40;
  pointer-events: none;
}
#brand span { color: var(--cyan); }
/* slides marked data-bare (title, thank you) carry no chrome */
body.bare #counter, body.bare #brand { opacity: 0; }
#counter.supp { letter-spacing: .2em; }

#timer {
  position: absolute; right: 20px; top: 18px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--muted);
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(248,248,242,.14);
  border-radius: 999px;
  padding: 5px 13px;
  z-index: 45;
  opacity: 0;
  transition: opacity .25s, color .4s, border-color .4s;
  pointer-events: none;
}
#timer.on { opacity: 1; }
#timer.warn  { color: var(--sand);  border-color: rgba(230,219,116,.45); }
#timer.over  { color: var(--pink);  border-color: rgba(249,38,114,.55); }

#help {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: var(--fg);
  font-size: 15px;
  line-height: 2.1;
}
#help.on { display: flex; }
#help kbd {
  display: inline-block; min-width: 84px;
  color: var(--cyan);
}

/* --------------------------------------------------------------- fragments */
[data-frag] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .44s var(--ease), transform .44s var(--ease),
              filter .44s var(--ease);
}
[data-frag="pop"]  { transform: scale(.93); }
[data-frag="left"] { transform: translateX(-20px); }
[data-frag="fade"] { transform: none; }
[data-frag].shown  { opacity: 1; transform: none; }
[data-frag].faded  { opacity: .3; filter: saturate(.4); }

/* =========================================================================
   1 — title
   ====================================================================== */
.slide--title { padding: 0; justify-content: flex-end; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; background: #05050a; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  animation: kenburns 46s ease-out forwards;
  opacity: .92;
}
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0,0,0); }
  to   { transform: scale(1.16) translate3d(-1.4%, -1.2%, 0); }
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.28) 72%),
    radial-gradient(120% 90% at 22% 40%, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 100%);
}
.hero-inner { position: relative; padding: 0 62px 54px; width: 100%; }

.hero-title { margin: 0 0 34px; }
.hero-title .ln {
  display: block;
  color: var(--fg);
  font-weight: 400;
  font-size: 53px;
  letter-spacing: .012em;
  line-height: 1.16;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0,0,0,.85);
}
.hero-title .sm {
  font-size: 27px;
  color: rgba(248,248,242,.62);
  letter-spacing: .05em;
}
.hero-title .em { color: var(--fg); }

.hero-rule {
  height: 2px; width: 0; background: var(--pink); margin: 0 0 24px;
  box-shadow: 0 0 18px rgba(249,38,114,.7);
}
.slide--title.active .hero-rule { animation: ruleIn 1.1s .95s var(--ease-out) forwards; }
@keyframes ruleIn { to { width: 232px; } }

.hero-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.hero-meta .who { font-size: 20px; color: var(--fg); letter-spacing: .01em; }
.hero-meta .who small { display: block; font-size: 14.5px; color: rgba(248,248,242,.55);
                        margin-top: 5px; letter-spacing: .02em; }
.hero-meta .where {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.85;
  color: rgba(248,248,242,.62);
  letter-spacing: .06em;
}
.hero-meta .where .arx { color: var(--cyan); }

/* =========================================================================
   2 — the team  (a 5-10 second flash: everything lands at once)
   ====================================================================== */
.team { width: 100%; }
.team-title {
  margin: 0 0 44px;
  font-size: 40px; font-weight: 600; letter-spacing: -.012em;
  color: var(--pink);
}
.team-row { display: flex; justify-content: center; gap: 46px; }

.person { margin: 0; width: 168px; }
.person img {
  display: block; width: 168px; height: 224px;
  border-radius: 10px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(248,248,242,.14);
}
.person figcaption {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 16.5px; line-height: 1.25; color: var(--fg); letter-spacing: -.005em;
}
.person figcaption small {
  display: block; margin-top: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--comment);
}

.team-more {
  margin: 46px auto 0; max-width: 900px;
  font-size: 16px; line-height: 1.55; color: var(--muted);
  text-wrap: balance;          /* keeps "…and the DES Collaboration" off its own line */
}

/* =========================================================================
   3 — SBI loop  (native SVG schematic)
   ====================================================================== */
.sbi { width: 100%; }
.sbi text { font-family: var(--font-mono); fill: var(--muted); font-size: 13px;
            letter-spacing: .04em; }
.sbi .lbl-b { fill: var(--fg); font-size: 14px; }
.sbi .wire  { stroke: rgba(248,248,242,.28); stroke-width: 1.4; fill: none; }
.sbi .node  { fill: none; stroke: rgba(248,248,242,.5); stroke-width: 1.4; }
.sbi .dot   { fill: var(--purple); }
.sbi .dot-o { fill: var(--cyan); }

.flowdot { fill: var(--sand); }
.slide.active .flowdot { animation: flow 3.1s linear infinite; }
@keyframes flow {
  0%   { transform: translateX(0);     opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(452px); opacity: 0; }
}

.verdict { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .06em; }

/* =========================================================================
   4 — compression is intelligence
   ====================================================================== */
.thinkers { display: flex; justify-content: space-between; align-items: flex-start;
            gap: 40px; max-width: 1010px; margin: 0 auto; width: 100%; }
.portrait { width: 116px; height: 150px; object-fit: cover; object-position: top center;
            border-radius: 3px; display: block;
            filter: grayscale(1) contrast(1.05) brightness(.94); }
.portrait-name { font-family: var(--font-mono); font-size: 11px; color: var(--comment);
                 letter-spacing: .1em; margin-top: 9px; }
.quote { font-size: 16px; line-height: 1.45; color: rgba(248,248,242,.72);
         font-style: italic; max-width: 230px; margin: 0; }

.funnel { position: relative; height: 176px; }
.tape {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; font-family: var(--font-mono); font-size: 15px;
  letter-spacing: .02em; white-space: nowrap;
}
.tape .ch {
  display: inline-block; padding: 2px 3px; color: var(--fg);
  border-left: 1px solid rgba(248,248,242,.22);
}
.tape .ch:last-child { border-right: 1px solid rgba(248,248,242,.22); }
.tape.t2 .ch { color: var(--comment); }

.latent {
  position: absolute; left: 50%; top: 80px; transform: translateX(-50%);
  width: 96px; height: 40px; border-radius: 7px;
  background: rgba(174,129,255,.16);
  border: 1px solid rgba(174,129,255,.55);
  color: var(--purple);
  font-family: var(--font-mono); font-size: 14px; letter-spacing: .12em;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.latent.on { opacity: 1; transition: opacity .5s .1s; }
.latent-cap {
  position: absolute; left: 50%; top: 128px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
  color: var(--comment); opacity: 0; transition: opacity .5s .25s; white-space: nowrap;
}
.latent-cap.on { opacity: 1; }

.punch {
  font-size: 40px; letter-spacing: .1em; font-weight: 500;
  color: var(--fg); text-transform: uppercase;
}
.punch .q { color: var(--comment); }

/* =========================================================================
   5 — encodings in cosmology
   ====================================================================== */
.diagram { position: relative; width: 1156px; height: 428px; margin-top: 4px; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; }

.uni { position: absolute; display: flex; flex-direction: column;
       align-items: center; gap: 9px; }
.uni-l { left: 20px;  top: 52px; }
.uni-r { right: 20px; top: 52px; }
.uni img { width: 160px; filter: drop-shadow(0 12px 30px rgba(0,0,0,.75)); }
.uni .nm { font-family: var(--font-mono); font-size: 12px; color: var(--comment);
           letter-spacing: .14em; }

.spec {
  position: absolute;
  width: 118px; height: 76px; border: 1px solid rgba(248,248,242,.3);
  border-radius: 4px; background: #0b0b0b; overflow: hidden;
}
.spec-l { left: 240px;  top: 92px; }
.spec-r { right: 240px; top: 92px; }
.spec svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.spec-cap {
  position: absolute; font-family: var(--font-mono); font-size: 11px;
  line-height: 1.5; letter-spacing: .08em; color: var(--comment);
}
.spec-cap.l { left: 372px; top: 100px; width: 130px; }

.theta { position: absolute; font-size: 25px; color: var(--fg);
         font-family: "Times New Roman", Georgia, serif; font-style: italic; }
.theta sup { font-size: 14px; font-style: normal; }
.theta.t-l { left: 60px;  top: 250px; }
.theta.t-r { right: 76px; top: 250px; }

.bayes {
  position: absolute; left: 50%; transform: translateX(-50%); top: 300px;
  width: 270px; padding: 15px 0; text-align: center;
  border: 1px solid rgba(248,248,242,.22);
  background: rgba(248,248,242,.07);
  border-radius: 12px;
}
.bayes img { height: 26px; width: auto; max-width: 90%; display: inline-block; }

/* =========================================================================
   6 — mutual information (live)
   ====================================================================== */
.mi-wrap { display: flex; gap: 34px; align-items: center; flex: 1; }
.mi-panel { position: relative; }
.mi-readout {
  font-family: var(--font-mono);
  color: var(--fg);
}
.mi-readout .rho {
  font-size: 15px; letter-spacing: .1em; color: var(--comment); margin-bottom: 6px;
}
.mi-readout .rho b { color: var(--cyan); font-weight: 500; }
.mi-big {
  font-size: 54px; font-weight: 400; color: var(--sand);
  letter-spacing: -.01em; line-height: 1.1;
}
.mi-big .unit { font-size: 20px; color: var(--comment); letter-spacing: .08em; margin-left: 8px; }
.mi-scale { margin-top: 6px; }

.mi-notes { position: relative; height: 116px; margin-top: 16px; }
.mi-note {
  position: absolute; left: 0; top: 0; right: 0;
  font-size: 17.5px; line-height: 1.45; color: var(--fg);
  max-width: 400px; margin: 0;
}
.mi-hint { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
           color: var(--comment); margin-top: 14px; }

/* =========================================================================
   7 — the objective
   ====================================================================== */
.objective { position: absolute; inset: 0; }
.obj-title {
  position: absolute; top: 54px; left: 0; right: 0; text-align: center;
  font-size: 24px; font-weight: 600; color: var(--fg); letter-spacing: .005em;
}
.objective .eqbig {
  position: absolute; left: 50%; top: 250px; transform: translateX(-50%);
  height: 132px; width: auto;
}
.ann { position: absolute; font-family: var(--font-sans); font-size: 17px;
       line-height: 1.34; text-align: center; }
.ann.a-obj   { left: 200px; top: 118px; width: 180px; color: var(--fg); }
.ann.a-unk   { left: 435px; top: 452px; width: 200px; color: var(--amber); }
.ann.a-known { left: 775px; top: 452px; width: 240px; color: var(--fg); }
.ann small { display: block; font-size: 14.5px; color: rgba(248,248,242,.6); margin-top: 2px; }
.ann.a-unk small { color: rgba(253,151,31,.82); }

.arrows { position: absolute; inset: 0; pointer-events: none; }
.arrows path { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.arrows .a1 { stroke: rgba(248,248,242,.75); }
.arrows .a2 { stroke: var(--amber); }
.arrows .a3 { stroke: rgba(248,248,242,.75); }
.arrows path.draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset .7s var(--ease-out);
}
.arrows path.draw.shown { stroke-dashoffset: 0; }

.thesis {
  position: absolute; left: 150px; right: 150px; bottom: 54px;
  font-size: 22px; line-height: 1.42; color: var(--fg); letter-spacing: .005em;
  border-top: 1px solid rgba(248,248,242,.16);
  padding-top: 18px; text-align: center;
}

/* =========================================================================
   8 — hybrid summaries
   ====================================================================== */
.schem { position: relative; }
.schem img { display: block; width: 100%; border-radius: 4px; }
.hot {
  position: absolute;
  border: 2px solid var(--pink);
  border-radius: 5px;
  box-shadow: 0 0 0 3px rgba(249,38,114,.18), 0 0 22px rgba(249,38,114,.45);
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.hot.shown { opacity: 1; transform: none; }

.tally { margin-top: 18px; font-family: var(--font-mono); }
.tally .trow { display: flex; align-items: baseline; gap: 14px; padding: 3px 0; }
.tally .tn { width: 48px; text-align: right; font-size: 21px; color: var(--cyan);
             font-variant-numeric: tabular-nums; }
.tally .tl { font-size: 13.5px; color: var(--muted); letter-spacing: .04em; }
.tally .sum { border-top: 1px solid rgba(248,248,242,.2); margin-top: 7px; padding-top: 11px; }
.tally .sum .tn { color: var(--pink); font-size: 30px; }
.tally .sum .tl { color: var(--fg); font-size: 15px; }

/* =========================================================================
   9 — data & validation
   ====================================================================== */
.quad { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
        gap: 42px 30px; flex: 1; min-height: 0; align-content: center; }
.quad .cell { display: flex; gap: 16px; align-items: center; min-height: 0; }
.quad .cell .card { flex: 0 0 176px; padding: 7px; }
.quad .cell .txt h4 {
  margin: 0 0 6px; font-size: 17px; color: var(--cyan); font-weight: 600;
  letter-spacing: .005em;
}
.quad .cell .txt p { margin: 0; font-size: 15px; line-height: 1.42; color: var(--fg); }
.quad .cell .txt .src { margin-top: 6px; font-family: var(--font-mono);
                        font-size: 11px; color: var(--comment); letter-spacing: .04em; }

/* =========================================================================
   10 — results
   ====================================================================== */
.resbox {
  position: relative;
  border: 2px solid var(--pink);
  border-radius: 10px;
  padding: 22px 26px;
  background: rgba(249,38,114,.07);
  box-shadow: 0 0 34px rgba(249,38,114,.18) inset;
}
.resline {
  font-family: var(--font-mono);
  font-size: 25px;
  color: var(--fg);
  line-height: 1.72;
  display: grid;
  grid-template-columns: 34px 22px 1fr;
  align-items: baseline;
  column-gap: 8px;
}
.resline .sym { color: var(--sand); }
.resline .op  { color: var(--comment); }
.resline .val { color: var(--fg); font-variant-numeric: tabular-nums; }
.resline .err { color: var(--muted); }

.legend-key { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.legend-key div { font-family: var(--font-mono); font-size: 14px; letter-spacing: .05em;
                  display: flex; align-items: center; gap: 10px; }
.legend-key i { width: 22px; height: 3px; border-radius: 2px; display: inline-block; }
.legend-key i.dash {
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 9px);
}

/* =========================================================================
   11 — figure of merit
   ====================================================================== */
.fom { display: flex; flex-direction: column; gap: 14px; position: relative; }
.fom-grid { position: absolute; left: 250px; right: 86px; top: -6px; bottom: -6px;
            pointer-events: none; }
.fom-grid .gl { position: absolute; top: 0; bottom: 0; width: 1px;
                background: rgba(248,248,242,.10); }
.fom-row { display: grid; grid-template-columns: 236px 1fr 72px; align-items: center;
           column-gap: 14px; position: relative; }
.fom-row .nm { font-size: 16px; color: var(--muted); text-align: right; line-height: 1.25; }
.fom-row .nm small { display: block; font-size: 11.5px; color: var(--comment);
                     font-family: var(--font-mono); letter-spacing: .04em; margin-top: 3px; }
.fom-track { height: 26px; position: relative; }
.fom-bar {
  height: 100%; width: 0;
  background: var(--cyan);
  opacity: .48;
  border-radius: 0 4px 4px 0;
  transition: width .85s var(--ease-out);
}
.fom-row .val { font-family: var(--font-mono); font-size: 17px; color: var(--muted);
                font-variant-numeric: tabular-nums; }

.fom-row.ours .nm { color: var(--fg); font-weight: 600; }
.fom-row.ours .fom-bar {
  background: var(--pink);
  opacity: 1;
  box-shadow: 0 0 26px rgba(249,38,114,.55);
}
.fom-row.ours .val { color: var(--fg); font-weight: 700; font-size: 19px; }

.fom-axis { position: relative; height: 18px; margin: 12px 86px 0 250px; }
.fom-axis .gt { position: absolute; top: 0; transform: translateX(-50%);
                font-family: var(--font-mono); font-size: 11px; color: var(--comment); }
.fom-title { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
             color: var(--comment); margin: 0 0 12px 250px; }

.claims { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; }
.claim {
  font-size: 18px; line-height: 1.42; color: var(--fg); margin: 0;
  border-left: 2px solid var(--pink); padding-left: 16px;
}
.claim .big { font-size: 25px; font-weight: 700; letter-spacing: -.01em; }

/* =========================================================================
   12 — summary
   ====================================================================== */
.credits {
  margin: 14px 0 0; max-width: 520px;
  font-size: 12.5px; line-height: 1.6; color: var(--comment);
  letter-spacing: .01em;
}
.arxiv {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 16px; letter-spacing: .06em;
  color: var(--cyan);
  border: 1px solid rgba(102,217,232,.4);
  border-radius: 999px; padding: 7px 16px;
  background: rgba(102,217,232,.07);
}

/* =========================================================================
   supplementary — scatter between higher-order statistics
   ====================================================================== */
.probes { display: flex; flex-direction: column; gap: 11px; }
.probes .phead {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--comment); text-align: right; margin-bottom: 1px;
}
.probes .row {
  display: grid; grid-template-columns: 30px 1fr 62px;
  align-items: center; column-gap: 12px;
}
/* the swatch sits on a white chip so it reads exactly as it does inside the
   figure's own legend — including the black dashed line, which would other-
   wise be invisible against the slide */
.probes i {
  width: 30px; height: 15px; border-radius: 3px; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.probes i::after { content: ""; display: block; width: 22px; height: 2.5px; border-radius: 2px; }
.probes i.dash::after {
  background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px);
}
.probes i.fill::after { height: 10px; background: var(--c); opacity: .62; }
.probes .nm { font-size: 14.5px; color: var(--fg); line-height: 1.25; }
.probes .nm small {
  display: block; font-family: var(--font-mono); font-size: 10px;
  color: var(--comment); letter-spacing: .06em; margin-top: 3px;
}
.probes .v {
  font-family: var(--font-mono); font-size: 15px; color: var(--muted);
  text-align: right; font-variant-numeric: tabular-nums;
}
.probes .row.ours .nm { font-weight: 600; }
.probes .row.ours .v { color: var(--fg); font-weight: 700; }

/* =========================================================================
   12 — thank you
   ====================================================================== */
.thanks-title {
  margin: 0;
  font-size: 74px;
  font-weight: 300;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg);
  text-indent: .15em;          /* balance the trailing letter-space */
}
.thanks-rule {
  width: 0; height: 2px;
  background: var(--pink);
  margin: 30px auto 26px;
  box-shadow: 0 0 18px rgba(249,38,114,.7);
}
.slide--thanks.active .thanks-rule { animation: ruleIn2 .9s .3s var(--ease-out) forwards; }
@keyframes ruleIn2 { to { width: 180px; } }
body.printing .thanks-rule { animation: none; width: 180px; }

.thanks-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14.5px;
  letter-spacing: .1em;
  color: var(--comment);
}
.thanks-meta .arx { color: var(--cyan); }

/* =========================================================================
   printing  —  index.html?print lays every slide out as a static 1280x720
   page with all builds revealed, for `export_pdf.sh`.
   ====================================================================== */
@page { size: 1280px 720px; margin: 0; }

body.printing {
  overflow: visible;
  background: var(--bg);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
body.printing * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* !important: resize() writes the fit-to-viewport scale as an inline style */
body.printing #stage {
  position: static;
  transform: none !important;
  width: 1280px; height: auto; overflow: visible;
}
body.printing .slide {
  position: relative; inset: auto;
  width: 1280px; height: 720px;
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: none;
  overflow: hidden;
  break-after: page; page-break-after: always;
  break-inside: avoid; page-break-inside: avoid;
}
body.printing .slide:last-of-type { break-after: auto; page-break-after: auto; }

/* the mutual-information case notes share one box and are mutually exclusive,
   so they keep obeying .shown — everything else is forced visible */
body.printing [data-frag]:not(.mi-note) { opacity: 1 !important; transform: none !important; }
body.printing .mi-note { transform: none !important; opacity: 0; }
body.printing .mi-note.shown { opacity: 1; }
body.printing .arrows path.draw { stroke-dashoffset: 0 !important; }
body.printing .hot { opacity: 1; transform: none; }
body.printing .latent, body.printing .latent-cap { opacity: 1; }

/* freeze the looping animations on a good frame */
body.printing .hero-bg img { animation: none; transform: scale(1.09) translate3d(-1%, -1%, 0); }
body.printing .hero-rule { animation: none; width: 232px; }
body.printing .flowdot { animation: none; }
body.printing .flowdot:nth-of-type(2) { transform: translateX(150px); }
body.printing .flowdot:nth-of-type(3) { transform: translateX(300px); }

body.printing #progress, body.printing #counter,
body.printing #brand, body.printing #timer, body.printing #help { display: none; }
body.printing .mi-hint { visibility: hidden; }   /* a live-only affordance */

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}