custom.css

:root {
  --bg: #06080c;
  --fg: #d8dee9;
  --muted: #8f98ab;
  --line: #5f6b84;
  --slide-font-size: clamp(14px, calc(11px + 0.28vw + 0.22vh), 20px);
  --content-heading-size: clamp(24px, calc(18px + 0.34vw + 0.24vh), 34px);
  --content-body-size: clamp(20px, calc(16px + 0.24vw + 0.16vh), 28px);
  --content-table-size: clamp(18px, calc(15px + 0.22vw + 0.14vh), 26px);
  --content-table-only-size: clamp(21px, calc(16px + 0.3vw + 0.2vh), 30px);
  --content-table-fit-scale: 1;
  --slide-content-fit-scale: 1;
  --table-border-width: 1px;
  --content-code-size: clamp(16px, calc(13px + 0.2vw + 0.12vh), 22px);
  --content-math-size: clamp(26px, calc(20px + 0.38vw + 0.28vh), 38px);
  --standalone-table-slide-width: clamp(42rem, 62vw, 110rem);
  --chrome-header-size: 13px;
  --chrome-header-margin-y: 8px;
  --chrome-header-margin-x: 8px;
  --chrome-header-pad-y: 4px;
  --chrome-header-pad-x: 7px;
  --chrome-border-width: 1px;
  --chrome-counter-size: 13px;
  --chrome-counter-left: 14px;
  --chrome-counter-bottom: 10px;
  --slide-pad-top-base: 5.2rem;
  --slide-pad-bottom-base: 3rem;
  --deck-header-offset: var(--slide-pad-top-base);
  --deck-footer-offset: var(--slide-pad-bottom-base);
  --slide-pad-top: max(var(--slide-pad-top-base), var(--deck-header-offset));
  --slide-pad-bottom: max(var(--slide-pad-bottom-base), var(--deck-footer-offset));
  --slide-pad-left: clamp(1rem, 3.4vw, 4rem);
  --slide-pad-right: clamp(0.75rem, 2.2vw, 1.25rem);
  --walkthrough-code-height: min(66vh, calc(100vh - 12.5rem));
  --content-pre-margin-top: 2px;
  --content-pre-margin-bottom: 14px;
  --math-display-margin-top: 4px;
  --math-display-margin-bottom: 14px;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
}

.reveal {
  position: fixed;
  inset: 0;
  font-family: "JetBrains Mono", "Fira Code", "IBM Plex Mono", monospace;
  color: var(--fg);
  font-size: var(--slide-font-size);
}

.reveal-viewport {
  background: radial-gradient(circle at 18% 8%, #0d1118 0%, var(--bg) 62%);
}

.reveal,
.reveal .slides,
.reveal .slides > section,
.reveal .slides > section.stack > section {
  width: 100%;
  height: 100%;
}

.reveal .slides {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

.reveal .slides section {
  box-sizing: border-box;
  overflow: hidden;
  padding-top: var(--slide-pad-top);
  padding-bottom: var(--slide-pad-bottom);
  padding-left: var(--slide-pad-left);
  padding-right: var(--slide-pad-right);
  text-align: left;
}

.reveal .slides section.stack {
  padding: 0 !important;
}

.reveal .slides section.stack > section {
  box-sizing: border-box;
  padding-top: var(--slide-pad-top);
  padding-bottom: var(--slide-pad-bottom);
  padding-left: var(--slide-pad-left);
  padding-right: var(--slide-pad-right);
}

.reveal .slides,
.reveal .slides section.present {
  text-align: left !important;
}

.reveal .slides section > :first-child {
  margin-top: 0 !important;
}

.reveal .slides section > :not(table):not(figure):not(pre):not(section):not(ul):not(ol):not(dl) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: min(96ch, 100%) !important;
  text-align: left !important;
}

.reveal .slides section > :is(ul, ol, dl) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  text-align: left !important;
}

.reveal .slides section > pre,
.reveal .slides section > .r-stretch,
.reveal .slides section > table,
.reveal .slides section > figure {
  max-width: 100% !important;
}

.reveal .slides,
.reveal .slides section,
.reveal .slides section p,
.reveal .slides section li,
.reveal .slides section blockquote,
.reveal .slides section table,
.reveal .slides section th,
.reveal .slides section td {
  text-align: left !important;
}

.reveal .slides section h1,
.reveal .slides section h2,
.reveal .slides section h3,
.reveal .slides section h4,
.reveal .slides section h5,
.reveal .slides section h6 {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: calc(var(--content-heading-size) * var(--slide-content-fit-scale));
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0 0 0.35em 0 !important;
  color: var(--fg);
}

.reveal .slides section p,
.reveal .slides section li,
.reveal .slides section th,
.reveal .slides section td {
  font-size: calc(var(--content-body-size) * var(--slide-content-fit-scale));
  line-height: 1.34;
}

.reveal .slides section table:not(.hljs-ln) th,
.reveal .slides section table:not(.hljs-ln) td {
  font-size: calc(var(--content-table-size) * var(--content-table-fit-scale) * var(--slide-content-fit-scale));
  line-height: 1.22;
}

.reveal .slides section.standalone-table-slide > table:not(.hljs-ln) th,
.reveal .slides section.standalone-table-slide > table:not(.hljs-ln) td,
.reveal .slides section.standalone-table-slide > figure > table:not(.hljs-ln) th,
.reveal .slides section.standalone-table-slide > figure > table:not(.hljs-ln) td {
  font-size: calc(var(--content-table-only-size) * var(--slide-content-fit-scale));
}

.reveal .slides section ul,
.reveal .slides section ol,
.reveal .slides section dl {
  display: block;
  margin: 0.2em 0 0.75em 0 !important;
  padding-left: 0;
}

.reveal .slides section li > ul,
.reveal .slides section li > ol,
.reveal .slides section li > dl {
  margin: 0.15em 0 !important;
  padding-left: 1.6em;
}

.reveal .slides section ul {
  list-style: none;
}

.reveal .slides section ul > li::before {
  content: "- ";
  color: var(--muted);
}

.reveal .slides section ol {
  list-style: none;
  counter-reset: raw-ol;
}

.reveal .slides section ol > li {
  counter-increment: raw-ol;
}

.reveal .slides section li {
  margin: 0.15em 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.reveal .slides section ol > li::before {
  content: counter(raw-ol) ". ";
  color: var(--muted);
}

.reveal .slides section blockquote {
  margin: 0.2em 0 0.8em 0 !important;
  padding: 0;
  width: 100%;
  border: 0;
  background: transparent;
}

.reveal .slides section blockquote p::before {
  content: "> ";
  color: var(--muted);
}

.reveal .slides section table:not(.hljs-ln) {
  margin: 0.5em auto 0.8em auto !important;
  width: auto;
  border: calc(var(--table-border-width) * var(--content-table-fit-scale)) solid rgba(95, 107, 132, 0.45);
  border-collapse: collapse;
}

.reveal .slides section > table:not(.hljs-ln),
.reveal .slides section > figure:has(> table:not(.hljs-ln)) {
  margin-left: auto !important;
  margin-right: auto !important;
  transform: translateX(calc((var(--slide-pad-left) - var(--slide-pad-right)) / 2));
}

.reveal .slides section > figure {
  margin-left: auto !important;
  margin-right: auto !important;
}

.reveal .slides section > figure > table:not(.hljs-ln) {
  margin: 0 !important;
}

.reveal .slides section:has(> :is(h1, h2, h3, h4, h5, h6) + table:not(.hljs-ln)),
.reveal .slides section:has(> :is(h1, h2, h3, h4, h5, h6) + figure:has(> table:not(.hljs-ln))) {
  display: grid;
  align-content: center;
}

.reveal .slides section:has(> :is(h1, h2, h3, h4, h5, h6) + table:not(.hljs-ln))
  > table:not(.hljs-ln),
.reveal .slides section:has(> :is(h1, h2, h3, h4, h5, h6) + figure:has(> table:not(.hljs-ln)))
  > figure:has(> table:not(.hljs-ln)) {
  transform: none !important;
}

/* Override Reveal's display:block on .present; use grid for reliable centering */
.reveal .slides section.standalone-table-slide,
.reveal .slides section.standalone-table-slide.present {
  display: grid !important;
  place-items: center;
  place-content: center;
  min-height: calc(100vh - 6.2rem);
  padding-top: 0 !important;
  padding-bottom: 1.8rem;
  padding-left: var(--slide-pad-right) !important;
  padding-right: var(--slide-pad-right) !important;
  overflow: visible;
}

.reveal .slides section.standalone-table-slide > table:not(.hljs-ln),
.reveal .slides section.standalone-table-slide > figure {
  margin: 0 !important;
  transform: none !important;
  width: min(100%, var(--standalone-table-slide-width));
  max-width: min(100%, var(--standalone-table-slide-width));
  justify-self: center;
  align-self: center;
}

.reveal .slides section.standalone-table-slide > figure > table:not(.hljs-ln) {
  margin: 0 !important;
  width: 100%;
}

.reveal .slides section table:not(.hljs-ln) th,
.reveal .slides section table:not(.hljs-ln) td {
  border: calc(var(--table-border-width) * var(--content-table-fit-scale)) solid rgba(95, 107, 132, 0.45);
  padding: 0.18em 0.45em;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.reveal .slides section table:not(.hljs-ln) tbody tr:last-child td {
  border-bottom: calc(var(--table-border-width) * var(--content-table-fit-scale)) solid rgba(95, 107, 132, 0.45) !important;
}

.reveal .slides section.code-walkthrough pre {
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 100%;
  overflow: visible;
}

.reveal .slides section.code-walkthrough pre code {
  display: block;
  height: var(--walkthrough-code-height);
  max-height: var(--walkthrough-code-height);
  overflow: auto;
  box-sizing: border-box;
  padding-bottom: 0.9em;
  scroll-padding-bottom: 1.1em;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 152, 171, 0.55) rgba(6, 8, 12, 0.35);
  font-size: var(--content-code-size);
  line-height: 1.34;
}

@media (max-width: 768px) {
  :root {
    --slide-pad-left: 1rem;
    --slide-pad-right: 1rem;
    --walkthrough-code-height: min(56vh, calc(100vh - 8.5rem));
  }

  .reveal .slides section > table:not(.hljs-ln),
  .reveal .slides section > figure,
  .reveal .slides section.standalone-table-slide > table:not(.hljs-ln),
  .reveal .slides section.standalone-table-slide > figure {
    transform: none !important;
  }

  .reveal .slides section p,
  .reveal .slides section li,
  .reveal .slides section th,
  .reveal .slides section td {
    overflow-wrap: anywhere;
  }

  .reveal .slides section table:not(.hljs-ln) th,
  .reveal .slides section table:not(.hljs-ln) td {
    overflow-wrap: break-word;
    word-break: normal;
    padding: 0.12em 0.28em;
  }
}

.reveal .slides section.code-walkthrough pre code::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.reveal .slides section.code-walkthrough pre code::-webkit-scrollbar-track {
  background: rgba(6, 8, 12, 0.35);
  border-radius: 999px;
}

.reveal .slides section.code-walkthrough pre code::-webkit-scrollbar-thumb {
  background: rgba(143, 152, 171, 0.55);
  border-radius: 999px;
  border: 2px solid rgba(6, 8, 12, 0.35);
}

.reveal .slides section.code-walkthrough pre code::-webkit-scrollbar-thumb:hover {
  background: rgba(184, 194, 214, 0.7);
}

.reveal .slides section.code-walkthrough pre code.has-highlights .hljs-ln-line,
.reveal .slides section.code-walkthrough pre code.has-highlights > span {
  opacity: 0.58;
  transition: opacity 520ms ease;
}

.reveal .slides section.code-walkthrough pre code.has-highlights .hljs-ln-line.highlight-line,
.reveal .slides section.code-walkthrough pre code.has-highlights > span.highlight-line,
.reveal .slides section.code-walkthrough pre code.has-highlights .highlight-line,
.reveal .slides section.code-walkthrough pre code.has-highlights .highlight-line * {
  opacity: 1;
  background: transparent !important;
}

.reveal .slides section.code-walkthrough.walkthrough-enter pre code.has-highlights .hljs-ln-line,
.reveal .slides section.code-walkthrough.walkthrough-enter pre code.has-highlights > span {
  opacity: 1;
}

.reveal table.hljs-ln,
.reveal table.hljs-ln td,
.reveal table.hljs-ln tr {
  border: 0 !important;
}

.reveal table.hljs-ln td {
  padding: 0 !important;
  font-size: calc(var(--content-code-size) * var(--slide-content-fit-scale)) !important;
  line-height: 1.34 !important;
}

.reveal table.hljs-ln td.hljs-ln-numbers {
  padding-right: 0.7em !important;
}

.reveal table.hljs-ln td.hljs-ln-code {
  padding-left: 0.15em !important;
}

.reveal .slides section > :is(h1, h2, h3, h4, h5, h6):first-child {
  display: none;
}

.reveal pre,
.reveal code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
}

.reveal pre {
  margin:
    calc(var(--content-pre-margin-top) * var(--slide-content-fit-scale))
    0
    calc(var(--content-pre-margin-bottom) * var(--slide-content-fit-scale)) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  display: block;
  width: 100%;
  max-width: 100%;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}

.reveal pre:has(+ .katex-display),
.reveal pre:has(+ p .katex-display),
.reveal pre:has(+ p > .katex-display) {
  margin-bottom: calc(4px * var(--slide-content-fit-scale)) !important;
}

.reveal pre.raw-fence::before,
.reveal pre.raw-fence::after {
  display: block;
  color: var(--muted);
  font-family: inherit;
  font-size: calc(var(--content-code-size) * var(--slide-content-fit-scale));
  font-weight: inherit;
  letter-spacing: 0.01em;
  line-height: 1.34;
}

.reveal pre.raw-fence::before {
  content: "```" attr(data-lang);
  margin-bottom: 0.24em;
}

.reveal pre.raw-fence::after {
  content: "```";
  margin-top: 0.24em;
}

.reveal pre.raw-fence:has(+ .katex-display)::after,
.reveal pre.raw-fence:has(+ p .katex-display)::after,
.reveal pre.raw-fence:has(+ p > .katex-display)::after {
  margin-top: 0.08em;
}

.reveal pre code {
  font-size: calc(var(--content-code-size) * var(--slide-content-fit-scale));
  line-height: 1.34;
  padding: 0;
  text-align: left;
  color: #b9c3d7;
  background: transparent !important;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.reveal pre code.hljs {
  background: transparent !important;
}

.reveal pre code::-webkit-scrollbar,
.reveal .slides section.code-walkthrough pre code::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.reveal pre code::-webkit-scrollbar-track,
.reveal .slides section.code-walkthrough pre code::-webkit-scrollbar-track,
.reveal pre code::-webkit-scrollbar-thumb,
.reveal .slides section.code-walkthrough pre code::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0;
}

.reveal .hljs {
  color: #d4def0;
}

.reveal .hljs-comment,
.reveal .hljs-quote {
  color: #8a95aa;
}

.reveal .hljs-keyword,
.reveal .hljs-selector-tag,
.reveal .hljs-literal,
.reveal .hljs-built_in,
.reveal .hljs-type,
.reveal .hljs-name {
  color: #90b7ff;
}

.reveal .hljs-title,
.reveal .hljs-function,
.reveal .hljs-title.function_ {
  color: #b3d2ff;
}

.reveal .hljs-string,
.reveal .hljs-attr,
.reveal .hljs-template-tag,
.reveal .hljs-template-variable {
  color: #9dd7b0;
}

.reveal .hljs-number,
.reveal .hljs-symbol,
.reveal .hljs-bullet,
.reveal .hljs-variable,
.reveal .hljs-params {
  color: #f0c28a;
}

.reveal .hljs-meta,
.reveal .hljs-doctag,
.reveal .hljs-regexp,
.reveal .hljs-subst {
  color: #c7a8ff;
}

.reveal .katex {
  color: var(--fg);
}

.reveal .katex-display {
  font-size: 1em;
  margin:
    calc(var(--math-display-margin-top) * var(--slide-content-fit-scale))
    0
    calc(var(--math-display-margin-bottom) * var(--slide-content-fit-scale)) !important;
  overflow-x: auto;
  overflow-y: hidden;
}

.reveal pre + .katex-display {
  margin-top: calc(0px * var(--slide-content-fit-scale)) !important;
}

.reveal pre + p:has(.katex-display),
.reveal pre + p:has(> .katex-display) {
  margin-top: 0 !important;
  margin-bottom: calc(2px * var(--slide-content-fit-scale)) !important;
}

.reveal pre + p .katex-display,
.reveal pre + p > .katex-display {
  margin-top: 0 !important;
}

.reveal .katex-display > .katex {
  font-size: calc(var(--content-math-size) * var(--slide-content-fit-scale)) !important;
  text-align: left;
}

.reveal .katex-display > .base {
  margin-left: 0;
  margin-right: auto;
}

#deck-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 50;
  margin: 0;
  padding: 0;
  color: var(--fg);
  font-family: "JetBrains Mono", "Fira Code", "IBM Plex Mono", monospace;
  font-size: var(--chrome-header-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}

#deck-header-text {
  display: block;
  margin: var(--chrome-header-margin-y) var(--chrome-header-margin-x) 0;
  padding: var(--chrome-header-pad-y) var(--chrome-header-pad-x);
  border: var(--chrome-border-width) solid var(--line);
  background: rgba(12, 15, 20, 0.92);
  box-shadow: 0 0 0 var(--chrome-border-width) rgba(95, 107, 132, 0.2) inset;
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
}

#deck-counter {
  position: fixed;
  left: var(--chrome-counter-left);
  bottom: var(--chrome-counter-bottom);
  z-index: 40;
  color: var(--muted);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: var(--chrome-counter-size);
  letter-spacing: 0.02em;
  max-width: calc(100vw - (var(--chrome-counter-left) * 2));
  overflow-wrap: anywhere;
  pointer-events: none;
}

.reveal .slides section .byline {
  margin-top: 3rem !important;
}