:root {
  --bg: #06080c;
  --fg: #d8dee9;
  --muted: #8f98ab;
  --line: #5f6b84;
  --slide-font-size: clamp(14px, 0.85vw + 0.65vh, 18px);
  --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));
}

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) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: min(72ch, 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: 1em;
  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: 0.9em;
  line-height: 1.34;
}

.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 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-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: 1px 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.table-only-slide,
.reveal .slides section.table-only-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.table-only-slide > table:not(.hljs-ln),
.reveal .slides section.table-only-slide > figure {
  margin: 0 !important;
  transform: none !important;
  max-width: min(80ch, 100%);
  justify-self: center;
  align-self: center;
}

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

.reveal .slides section table:not(.hljs-ln) th,
.reveal .slides section table:not(.hljs-ln) td {
  border: 1px solid rgba(95, 107, 132, 0.45);
  padding: 0.18em 0.45em;
}

.reveal .slides section table:not(.hljs-ln) tbody tr:last-child td {
  border-bottom: 1px 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: 0.98em;
  line-height: 1.34;
}

@media (max-width: 768px) {
  :root {
    --slide-pad-top-base: 3.2rem;
    --slide-pad-bottom-base: 2.5rem;
    --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.table-only-slide > table:not(.hljs-ln),
  .reveal .slides section.table-only-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.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: 0.98em !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: 0.15em 0 0.7em !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.raw-fence::before {
  content: "```" attr(data-lang);
  display: block;
  margin-bottom: 0.12em;
  color: var(--muted);
  font-size: 0.98em;
  letter-spacing: 0.01em;
}

.reveal pre.raw-fence::after {
  content: "```";
  display: block;
  margin-top: 0.06em;
  color: var(--muted);
  font-size: 0.98em;
  letter-spacing: 0.01em;
}

.reveal pre code {
  font-size: 0.98em;
  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;
}

#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: clamp(0.72rem, 0.6rem + 0.35vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}

#deck-header-text {
  display: block;
  margin: clamp(0.35rem, 0.3rem + 0.25vw, 0.55rem) clamp(0.35rem, 0.3rem + 0.25vw, 0.55rem) 0;
  padding: clamp(0.24rem, 0.2rem + 0.15vw, 0.34rem) clamp(0.42rem, 0.35rem + 0.2vw, 0.58rem);
  border: 1px solid var(--line);
  background: rgba(12, 15, 20, 0.92);
  box-shadow: 0 0 0 1px rgba(95, 107, 132, 0.2) inset;
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
}

#deck-counter {
  position: fixed;
  left: clamp(0.75rem, 0.45rem + 0.8vw, 1.1rem);
  bottom: clamp(0.55rem, 0.35rem + 0.8vw, 0.8rem);
  z-index: 40;
  color: var(--muted);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: clamp(0.76rem, 0.68rem + 0.25vw, 0.9rem);
  letter-spacing: 0.02em;
  max-width: calc(100vw - 1.5rem);
  overflow-wrap: anywhere;
  pointer-events: none;
}

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