/* Keynote-like theme: white, Helvetica Neue, black by default, colour only when it means something. */

:root {
  --ink: #000;
  --grey: #6e6e6e;
  --muted: #cfcfcf;          /* inactive words on the spine slide */
  --rule: #dcdcdc;
  --red: #EE220C;            /* Keynote palette */
  --green: #61D836;
  --blue: #00A2FF;
  --code-bg: #f5f5f5;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", Menlo, Monaco, Consolas, monospace;
}

html, body, .reveal-viewport { background: #fff; }

.reveal {
  font-family: var(--font);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
}
.reveal .slides { text-align: left; }

/* Every slide is a full 1280×720 box with Keynote-like margins. */
.reveal .slides > section,
.reveal .slides > section > section {
  height: 100%;
  box-sizing: border-box;
  padding: 34px 56px 40px;
}

/* ---------- Typography ---------- */

.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--font);
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0;
}
.reveal h1 { font-size: 64px; font-weight: 700; line-height: 1.1; }
.reveal h2 { font-size: 50px; font-weight: 700; line-height: 1.1; }
.reveal h3 { font-size: 30px; font-weight: 700; margin-top: 6px; }

.reveal .body { margin-top: 34px; }
.reveal p { margin: 0.45em 0; }
.reveal strong, .reveal b { font-weight: 700; }
.reveal em { font-style: italic; }
.reveal .grey { color: var(--grey); }
.reveal .small { font-size: 0.72em; }
.reveal .mono { font-family: var(--mono); }

.reveal ul { list-style: none; margin: 0 0 0 1.1em; padding: 0; }
.reveal ul > li { position: relative; margin: 0.55em 0; font-weight: 500; }
.reveal ul > li::before { content: "•"; position: absolute; left: -0.9em; }
.reveal ul.plain { margin-left: 0; }
.reveal ul.plain > li::before { content: none; }

/* Source / footnote line at the bottom of a slide (like the Keynote citations). */
.reveal .src {
  position: absolute; left: 56px; bottom: 30px;
  font-size: 15px; font-style: italic; color: var(--grey);
}

/* ---------- Callout tags (the coloured boxes from the Keynote deck) ---------- */

.reveal .tag {
  display: inline-block;
  padding: 0.14em 0.45em;
  font-size: 0.62em;
  font-weight: 500;
  line-height: 1.3;
  vertical-align: middle;
  color: #fff;
  background: #000;
}
.reveal .tag.red   { background: var(--red);   color: #fff; }
.reveal .tag.green { background: var(--green); color: #000; }
.reveal .tag.blue  { background: var(--blue);  color: #fff; }
.reveal .tag.black { background: #000;         color: #fff; }
.reveal .tag.soft  { background: #e3e3e3;     color: #000; }
.reveal .tag.lg    { font-size: 0.8em; }

/* Coloured text, used sparingly. */
.reveal .red   { color: var(--red); }
.reveal .green { color: #2e9e0c; }      /* darker than the tag green so text stays readable */
.reveal .blue  { color: #0079c2; }

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

.reveal .cols   { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.reveal .cols-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 44px; align-items: start; }
.reveal .k1-cols { display: grid; grid-template-columns: auto 560px; gap: 20px; align-items: start; justify-content: space-between; }
.reveal .cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: start; }
/* Fragments that replace each other in place: all children share one grid cell. */
.reveal .swap { display: grid; }
.reveal .swap > * { grid-area: 1 / 1; margin: 0; }
.reveal .center { text-align: center; }
.reveal .fill-center {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.reveal svg.diagram { display: block; width: 100%; height: auto; overflow: visible; }

/* SVG diagram vocabulary: black boxes with white labels, thin black arrows. */
.reveal svg .box      { fill: #000; }
.reveal svg .box-lbl  { fill: #fff; font: 500 17px var(--font); }
.reveal svg .frame    { fill: none; stroke: #000; stroke-width: 1.5; }
.reveal svg .soft     { fill: #e3e3e3; }
.reveal svg .lbl      { fill: #000; font: 500 20px var(--font); }
.reveal svg .lbl-b    { fill: #000; font: 700 26px var(--font); }
.reveal svg .lbl-s    { fill: var(--grey); font: 400 16px var(--font); }
.reveal svg .lbl-m    { fill: #000; font: italic 400 24px "Times New Roman", serif; }
.reveal svg .wire     { fill: none; stroke: #000; stroke-width: 1.8; }
.reveal svg .wire.red { stroke: var(--red); }
.reveal svg .wire.blue { stroke: var(--blue); stroke-width: 3; }
.reveal svg .box-lbl-s { fill: #fff; font: 500 13px var(--font); }
.reveal svg .box-mono { fill: #fff; font: 14px var(--mono); }
.reveal svg .lbl-mono { fill: #000; font: 16px var(--mono); }
.reveal svg .frame-b  { fill: none; stroke: #000; stroke-width: 3.5; }
.reveal svg .cell     { fill: #fff; stroke: #aaa; stroke-width: 1; }
.reveal svg .hl       { fill: var(--blue); }
.reveal svg .idle     { fill: var(--red); }
.reveal svg .dash     { fill: none; stroke: #999; stroke-width: 1.5; stroke-dasharray: 5 5; }
.reveal svg .arrowhead { fill: #000; }

/* ---------- Title slide ---------- */

.reveal section.title-slide h1 { font-size: 54px; font-weight: 500; text-align: center; }
.reveal section.title-slide .subtitle {
  text-align: center; font-size: 30px; font-weight: 400; margin-top: 18px;
}
.reveal section.title-slide .byline {
  position: absolute; left: 56px; bottom: 44px;
  font-size: 18px; font-weight: 500;
}
.reveal section.title-slide .site {
  position: absolute; left: 0; right: 0; bottom: 44px; text-align: center;
  font-size: 18px; font-weight: 400;
}
.reveal section.title-slide .site a { color: inherit; text-decoration: none; }
.reveal section.title-slide .badge {
  position: absolute; right: 64px; bottom: 40px;
  font: 700 15px var(--font);
  border: 2px solid #000; border-radius: 4px; padding: 3px 8px;
}

/* ---------- Spine slide: the title, one word at a time ---------- */

.reveal .spine-wrap {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.reveal .spine-title {
  font-size: 58px; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap;
}
.reveal .spine-title .w    { color: var(--muted); display: inline-block; }
.reveal .spine-title .w.on { color: var(--ink); }
.reveal .spine-caption {
  margin-top: 26px; font-size: 26px; font-weight: 500; color: var(--grey);
}
.reveal .spine-num { font-weight: 700; color: var(--ink); margin-right: 0.4em; }

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

.reveal table { border-collapse: collapse; font-size: 24px; margin-top: 8px; }
.reveal th, .reveal td {
  padding: 9px 22px 9px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.reveal th { font-weight: 700; border-bottom: 2px solid #000; }
.reveal td:first-child { color: var(--grey); font-weight: 500; }
.reveal td code, .reveal li code, .reveal p code {
  font-family: var(--mono); font-size: 0.88em;
}

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

.reveal pre {
  position: relative;       /* line-highlight steps are stacked absolutely inside */
  width: 100%; margin: 18px 0 0; box-shadow: none;
  font-size: 21px; line-height: 1.45;
}
.reveal pre code {
  display: block;           /* no reveal theme loaded, so code would otherwise be inline */
  overflow: auto;
  font-family: var(--mono);
  background: var(--code-bg);
  padding: 16px 22px;
  max-height: 540px;
  border-left: 4px solid #000;
}
.reveal .hljs                      { color: #000; background: var(--code-bg); font-size: inherit; }
.reveal pre table                  { font-size: inherit; margin: 0; }   /* line-number table: not a slide table */
.reveal .hljs-keyword              { font-weight: 700; color: #000; }
.reveal .hljs-type                 { color: #0067b8; }
.reveal .hljs-built_in             { color: #6f3fb5; }
.reveal .hljs-number,
.reveal .hljs-literal              { color: #c41a06; }
.reveal .hljs-comment              { color: #8a8a8a; font-style: italic; }
.reveal .hljs-meta                 { color: #8a8a8a; }
.reveal .hljs-title.function_,
.reveal .hljs-title                { font-weight: 700; }
.reveal .hljs-ln-numbers           { color: #aaa; }
.reveal .hljs.has-highlights tr:not(.highlight-line) { opacity: 0.28; }

/* ---------- Live demo widgets ---------- */

.reveal .btn {
  font: 600 22px var(--font);
  background: #000; color: #fff; border: 0;
  padding: 10px 22px; cursor: pointer;
}
.reveal .btn:disabled { opacity: 0.4; cursor: default; }
.reveal .demo-out {
  font: 19px/1.55 var(--mono);
  background: var(--code-bg);
  border-left: 4px solid #000;
  padding: 14px 20px; margin-top: 18px;
  min-height: 190px; white-space: pre-wrap;
}
.reveal .demo-out .ok  { color: #2e9e0c; font-weight: 700; }
.reveal .demo-out .bad { color: var(--red); font-weight: 700; }

/* ---------- Chrome ---------- */

.reveal .slide-number {
  background: transparent; color: #000;
  font: 500 14px var(--font);
  right: 20px; bottom: 14px;
}
.reveal .slide-number a { text-decoration: none; font: inherit; }
.reveal .progress { color: #000; height: 3px; }

/* KaTeX: keep math the same size as the surrounding text. */
.reveal .katex { font-size: 1.05em; }
.reveal .tag .katex { font-size: 1em; }

/* ---------- Overview slides (generated from js/outline.js) ---------- */

.reveal .ov-title { font-size: 40px; margin: 6px 0 34px; }
.reveal .ov-list { display: flex; flex-direction: column; gap: 14px; }
.reveal .ov-row {
  display: flex; align-items: baseline; gap: 18px;
  font-size: 30px; font-weight: 500; color: var(--muted);
}
.reveal .ov-row.on { color: var(--ink); }
.reveal .ov-num { font-weight: 700; min-width: 2.2em; }
.reveal .ov-word { font-weight: 700; min-width: 7.8em; }
.reveal .body.ov-list { margin-top: 40px; }
.reveal .ov-note { margin-top: 34px; font-size: 24px; color: var(--grey); }
.reveal .ov-lead { margin-top: 26px; font-size: 26px; }

/* ---- MSM (fork) ---- */
.reveal table.msm-table { font-size: 21px; margin-top: 0; }
.reveal table.msm-table th, .reveal table.msm-table td { padding: 6px 14px 6px 0; }
.reveal table.msm-run th, .reveal table.msm-run td { padding: 7px 0; width: 62px; text-align: center; }
.reveal table.msm-run td:first-child, .reveal table.msm-run th:first-child { text-align: left; width: 64px; }
.reveal table.msm-run td.msm-on { font-weight: 700; color: #000; }
.reveal table.msm-run td.msm-off { color: var(--muted); }
.reveal table.msm-run td.msm-final { background: var(--blue); color: #fff; font-weight: 700; }
.reveal .msm-hl { background: var(--blue); color: #fff; font-weight: 700; padding: 2px 6px; margin-left: -6px; }
.reveal ul.msm-buckets { margin: 8px 0 18px; font-size: 24px; }
.reveal ul.msm-buckets li { margin: 4px 0; }
.reveal .msm-cols { grid-template-columns: 1.05fr 1fr; gap: 36px; }

/* ---- Part 1 (fork) ---- */
.reveal table.p1-terms th, .reveal table.p1-terms td { padding-right: 26px; }
.reveal table.p1-terms th { line-height: 1.15; vertical-align: bottom; }
.reveal table.p1-terms .small { font-size: 0.7em; font-weight: 500; }
.reveal table.small-table { font-size: 20px; }
.reveal table.small-table td { padding-top: 6px; padding-bottom: 6px; }

/* ---------- Part 2 worked examples (main session) ---------- */

.reveal table.mont-steps { font-size: 24px; margin-top: 10px; }
.reveal table.mont-steps td { padding: 7px 26px 7px 0; white-space: nowrap; }
.reveal table.mont-steps td:first-child { color: var(--ink); font-weight: 500; }
.reveal table.mont-steps tr.check td { border-top: 2px solid #000; }
.reveal .mont-in { font-size: 26px; }
.reveal .lowbits { color: var(--red); font-weight: 700; }
.reveal .small-btn { font-size: 15px; padding: 4px 12px; margin-left: 14px; vertical-align: middle; }
.reveal table.pairs { font-size: 26px; margin-top: 6px; }
.reveal table.pairs td, .reveal table.pairs th { padding: 10px 34px 10px 0; font-family: var(--mono); }
.reveal table.pairs th { font-family: var(--font); }
.reveal svg .node   { fill: #fff; stroke: #000; stroke-width: 1.5; }
.reveal svg .node-v { fill: #000; font: 500 18px var(--mono); }
.reveal svg .tw-lbl { fill: var(--red); font: 600 15px var(--font); }
.reveal svg .wire.thin { stroke-width: 1.2; }
.reveal .demo-out .info { color: #000; }

/* Part label ("Part 2") in the top-right corner of content slides (generated, see main.js). */
.reveal .subq {
  position: absolute; top: 44px; right: 56px; max-width: 330px;
  font: 500 15px var(--font); color: var(--grey); text-align: right; line-height: 1.3;
}
.reveal .subq b { color: var(--ink); font-weight: 700; margin-right: 0.3em; }

/* ---------- Divergence animation (js/demos/lanes.js) ---------- */

.reveal .div-grid { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; }
.reveal .code-panel { font: 21px/1.6 var(--mono); background: var(--code-bg); padding: 12px 0; border-left: 4px solid #000; }
.reveal .code-line { padding: 0 16px; color: #9a9a9a; white-space: pre; }
.reveal .code-line.on { color: #fff; background: #000; font-weight: 700; }
.reveal .div-say { font-size: 21px; font-weight: 500; margin-top: 16px; min-height: 2.6em; }
.reveal .div-time { font-size: 19px; color: var(--grey); }
.reveal .div-time b { color: #000; }
.reveal .step-marker { display: none; }
.reveal .lanes { display: grid; grid-template-columns: 70px repeat(8, 1fr); gap: 6px; font-size: 20px; }
.reveal .lanes .lh { font: 600 15px var(--font); text-align: center; padding: 6px 0; background: #000; color: #fff; }
.reveal .lanes .lh:first-child { background: none; }
.reveal .lanes .lh.waits { background: var(--muted); color: #fff; }
.reveal .lanes .lr { font: 500 17px var(--font); color: var(--grey); align-self: center; }
.reveal .lanes .lc { height: 44px; border: 1.5px solid #ccc; display: flex; align-items: center; justify-content: center; font-family: var(--mono); }
.reveal .lanes .ls { border: 0; font: 600 15px var(--font); }
.reveal .lanes .ls.works { background: #000; color: #fff; }
.reveal .lanes .ls.waits { background: #e3e3e3; color: var(--grey); }

/* PDF export (?print-pdf): give every slide its full height, so bottom-anchored elements
   (title-slide byline, badge) and vertically centred slides keep their places. */
html.print-pdf .reveal .slides .pdf-page > section { height: 720px !important; }
/* One page per slide: the line-highlight steps are stacked copies of the code; keep the
   first, unhighlighted one. */
html.pdf-one-page .reveal pre code.fragment { display: none !important; }

/* Part overviews with many sub-questions: two columns, slightly smaller. */
.reveal .body.ov-list.ov-two { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column;
  column-gap: 40px; row-gap: 10px; }
.reveal .ov-two .ov-row { font-size: 23px; }
.reveal .ov-two .ov-num { min-width: 2.6em; }
.reveal .demo-out .captured { margin-top: 8px; color: var(--grey); font: italic 15px var(--font); }

/* ---------- Parts 3–4 and appendix ---------- */

.reveal .pending { margin-top: 60px; color: var(--grey); font-style: italic; }

.reveal table.contract-form { font-size: 21px; }
.reveal table.contract-form td, .reveal table.contract-form th { padding: 6px 22px 6px 0; }
.reveal table.contract-form td:nth-child(3) { color: var(--grey); }
.reveal table.threats { font-size: 24px; margin-top: 10px; }
.reveal table.threats td, .reveal table.threats th { padding: 10px 26px 10px 0; text-align: left; }
.reveal table.threats td:not(:first-child) { text-align: center; font-weight: 700; }
.reveal ol.questions { font-size: 27px; margin: 0 0 24px 1.2em; }
.reveal ol.questions li { margin: 0.5em 0; }
.reveal .pending-inline { margin-top: 18px; color: var(--grey); font-style: italic; font-size: 18px; }
.reveal table.results311 { font-size: 19px; }
.reveal table.results311 td, .reveal table.results311 th { padding: 6px 16px 6px 0; }
.reveal .legend { display: flex; gap: 32px; font: 500 16px var(--font); color: #000; margin-top: 4px; }
.reveal .legend i { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 3px; }
.reveal table.threats td.shown { color: var(--red); font-weight: 700; font-size: 20px; }
.reveal h2.title-l { font-size: 43px; }
.reveal h2.title-xl { font-size: 36px; }
.reveal table.limits { font-size: 18px; }
.reveal table.limits td, .reveal table.limits th { padding: 7px 14px 7px 0; }
.reveal table.limits td:first-child { white-space: nowrap; }
.reveal table.limits td:first-child { font-family: var(--mono); font-size: 0.9em; color: #000; }
.reveal table.matrix { font-size: 14px; }
.reveal table.matrix td, .reveal table.matrix th { padding: 5px 10px 5px 0; }
.reveal table.inventory { font-size: 17px; }
.reveal table.inventory td, .reveal table.inventory th { padding: 6px 14px 6px 0; }
.reveal ul.wgsl-limits { font-size: 22px; }
.reveal ul.refs { list-style: none; margin: 14px 0 0; font-size: 17px; }
.reveal h2 + ul.refs { margin-top: 30px; }      /* no subtitle above it */
.reveal ul.refs li { margin: 5px 0; }
.reveal ul.refs li::before { content: none; }
.reveal .ref-slide { display: inline-block; min-width: 3.4em; font-weight: 700; }
.reveal .ref-title { margin-right: 0.5em; }
.reveal .ref-url { font-family: var(--mono); font-size: 0.82em; color: var(--grey); word-break: break-all; }

/* ---------- Part 3 (rebuilt): live limits panel ---------- */
.reveal .demo-out.gpu-limits-out { white-space: normal; }
.reveal .demo-out .info { color: var(--grey); margin-bottom: 4px; }
.reveal table.gpu-limits { font: 24px var(--font); margin-top: 4px; }
.reveal table.gpu-limits th, .reveal table.gpu-limits td { padding: 7px 36px 7px 0; }

/* ---------- Part 2: bit-reversed order (2.3) ---------- */
.reveal table.bitrev { font-size: 24px; margin-top: 10px; }
.reveal table.bitrev th, .reveal table.bitrev td { padding: 7px 12px; text-align: center; }
.reveal table.bitrev th:first-child, .reveal table.bitrev td:first-child { text-align: left; padding-left: 0; white-space: nowrap; }
.reveal table.bitrev th:not(:first-child) { color: var(--grey); font-weight: 500; }
.reveal table.bitrev td.grp { border-left: 2px solid #000; }

/* Part 2: the growing list of operations the kernels needed (bottom of a slide). */
.reveal .sofar { position: absolute; left: 56px; right: 56px; bottom: 26px; font-size: 16px; color: var(--grey); margin: 0; }
.reveal .sofar b { color: var(--ink); }