:root {
  /* Catppuccin Mocha Theme */
  color-scheme: dark;

  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo: #f2cdcd;
  --ctp-pink: #f5c2e7;
  --ctp-mauve: #cba6f7;
  --ctp-red: #f38ba8;
  --ctp-maroon: #eba0ac;
  --ctp-peach: #fab387;
  --ctp-yellow: #f9e2af;
  --ctp-green: #a6e3a1;
  --ctp-teal: #94e2d5;
  --ctp-sky: #89dceb;
  --ctp-sapphire: #74c7ec;
  --ctp-blue: #89b4fa;
  --ctp-lavender: #b4befe;
  --ctp-text: #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-overlay2: #9399b2;
  --ctp-overlay1: #7f849c;
  --ctp-overlay0: #6c7086;
  --ctp-surface2: #585b70;
  --ctp-surface1: #45475a;
  --ctp-surface0: #313244;
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;

  /* Fonts */
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;

  --base-size: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--ctp-base) 0%,
    var(--ctp-mantle) 100%
  );
  color: var(--text-main);
  font-family: var(--font-sans);
  line-height: 1.3;
  padding: 3rem;
  overflow: hidden;
  font-size: var(--base-size);
}

/* Base Wrapper */
.content {
  position: relative;
  z-index: 10;
  width: 85%;
  max-width: 1600px;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  min-width: 0;
}

/* When content has code blocks, use full width and allow expansion */
.content:has(div.sourceCode),
.content:has(div.code-window) {
  width: 95%;
  max-width: none;
  max-height: none;
  height: auto;
  align-items: stretch;
}

/* Slides with code blocks - reduce body padding to maximize space */
body:has(div.sourceCode),
body:has(div.code-window) {
  padding: 3rem 1rem;
}

/* =========================================
   Typography
   ========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  letter-spacing: -0.02em;
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
  hyphens: none;
}

h1 {
  font-size: 5em;
  font-weight: 800;
  line-height: 1.1;
  /* Catppuccin Mauve to Pink Gradient */
  background: linear-gradient(
    to bottom right,
    var(--ctp-mauve) 20%,
    var(--ctp-pink) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.3em;
  filter: drop-shadow(0 0 20px rgba(203, 166, 247, 0.2));
}

h2 {
  font-size: 3.8em;
  font-weight: 700;
  line-height: 1.2;
  /* Complementary Lavender to Sapphire Gradient */
  background: linear-gradient(
    to bottom right,
    var(--ctp-lavender) 30%,
    var(--ctp-sapphire) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5em;
  opacity: 0.95;
}

h3 {
  font-size: 2.8em;
  margin-bottom: 0.4em;
  color: var(--ctp-blue);
}

h4 {
  font-size: 2.2em;
  margin-bottom: 0.4em;
  color: var(--ctp-sapphire);
}

p {
  font-size: 2.5em;
  line-height: 1.4;
  margin-bottom: 0.8em;
  color: var(--ctp-subtext1);
  width: 100%;
}

/* =========================================
   Code Blocks (Catppuccin Syntax Highlighting)
   ========================================= */

/* The Window Container */
div.sourceCode,
div.code-window {
  background: var(--ctp-mantle) !important;
  border: 1px solid var(--border-color);
  border-radius: 0.6em;
  margin: 1.5em 0;
  width: fit-content !important;
  min-width: 100%;
  position: relative;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
  overflow: visible !important;
  display: flow-root;
}

/* Ensure code block containers expand to fit long lines */
div.sourceCode > pre,
div.code-window > pre {
  display: block;
  min-width: 100%;
  margin: 0 !important;
}

/* The Window Header (Generated by JS) */
.code-header {
  height: 2.5rem;
  min-height: 2.5rem;
  background: var(--ctp-crust);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 1.5em;

  color: var(--ctp-overlay2);
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  width: 100%;
  box-sizing: border-box;
}

/* The Code Content */
pre {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 1.5em 2rem !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: pre !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  word-break: normal !important;
}

/* Compact padding for code blocks with long lines - high specificity to override dense layout */
body pre.code-compact,
body.layout-dense pre.code-compact {
  padding: 1em 0.5em !important;
}

/* Even more compact for very long lines */
body pre.code-compact-extra,
body.layout-dense pre.code-compact-extra {
  padding: 0.75em 0.25em !important;
}

/* Remove old fake header */
pre::before {
  content: none !important;
}

pre code {
  font-family: var(--font-mono);
  font-size: 1.1em;
  color: var(--ctp-text);
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;

  /* Reset inline code styles to prevent "box inside box" artifacts */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* --- Pandoc Syntax Highlighting Classes --- */
.kw {
  color: var(--ctp-mauve) !important;
  font-weight: bold !important;
}

/* Keyword */
.dt {
  color: var(--ctp-yellow) !important;
}

/* DataType */
.dv {
  color: var(--ctp-peach) !important;
}

/* DecVal */
.bn {
  color: var(--ctp-peach) !important;
}

/* BaseN */
.fl {
  color: var(--ctp-peach) !important;
}

/* Float */
.ch {
  color: var(--ctp-green) !important;
}

/* Char */
.st {
  color: var(--ctp-green) !important;
}

/* String */
.co {
  color: var(--ctp-overlay0) !important;
  font-style: italic !important;
}

/* Comment */
.ot {
  color: var(--ctp-mauve) !important;
}

/* Other */
.al {
  color: var(--ctp-red) !important;
  font-weight: bold !important;
}

/* Alert */
.fu {
  color: var(--ctp-blue) !important;
}

/* Function */
.er {
  color: var(--ctp-red) !important;
  font-weight: bold !important;
}

/* Error */
.wa {
  color: var(--ctp-yellow) !important;
  font-weight: bold !important;
}

/* Warning */
.cf {
  color: var(--ctp-mauve) !important;
  font-weight: bold !important;
}

/* ControlFlow */
.op {
  color: var(--ctp-sky) !important;
}

/* Operator */
.bu {
  color: var(--ctp-blue) !important;
}

/* BuiltIn */
.ex {
  color: var(--ctp-blue) !important;
}

/* Extension */
.pp {
  color: var(--ctp-flamingo) !important;
}

/* Preprocessor */
.at {
  color: var(--ctp-rosewater) !important;
}

/* Attribute */
.do {
  color: var(--ctp-overlay0) !important;
  font-style: italic !important;
}

/* Documentation */
.an {
  color: var(--ctp-pink) !important;
}

/* Annotation */
.cv {
  color: var(--ctp-pink) !important;
}

/* CommentVar */
.va {
  color: var(--ctp-text) !important;
}

/* Variable */
.vs {
  color: var(--ctp-green) !important;
}

/* VerbatimString */
.sc {
  color: var(--ctp-pink) !important;
}

/* SpecialChar */
.ss {
  color: var(--ctp-green) !important;
}

/* SpecialString */
.im {
  color: var(--ctp-mauve) !important;
}

/* Import */

/* Constant (Some, None, true, false, etc) */
.cn {
  color: var(--ctp-peach) !important;
}

/* Information */
.in {
  color: var(--ctp-blue) !important;
}

/* Region Marker */
.re {
  color: var(--ctp-overlay1) !important;
}

/* Catch-all: override any remaining Pandoc default colors */
pre code span {
  background: transparent !important;
}

/* Inline Code */
code {
  font-family: var(--font-mono);
  background: var(--ctp-surface0);
  color: var(--ctp-peach);
  padding: 0.1em 0.3em;
  border-radius: 0.25em;
  border: 1px solid var(--ctp-surface1);
  font-size: 0.9em;
}

/* Fix: Ensure code in gradient headings has matching gradient background and dark text */
h1 code,
h2 code {
  -webkit-text-fill-color: var(--ctp-crust);
  color: var(--ctp-crust) !important;
  background: linear-gradient(
    to bottom right,
    var(--ctp-mauve) 20%,
    var(--ctp-pink) 100%
  ) !important;
  border: 1px solid var(--ctp-mauve) !important;
  padding: 0.05em 0.2em !important;
  border-radius: 0.2em !important;
  box-shadow: 0 0 10px rgba(203, 166, 247, 0.3) !important;
  font-weight: 600 !important;
}

/* =========================================
   Elements
   ========================================= */

ul,
ol {
  font-size: 2.5em;
  line-height: 1.4;
  margin: 1em 0;
  padding-left: 1.5em;
  color: var(--ctp-subtext1);
}

li {
  margin-bottom: 0.5em;
  padding-left: 0.5em;
}

ul li::marker {
  color: var(--ctp-teal);
  font-size: 0.8em;
}

ol li::marker {
  color: var(--ctp-teal);
  font-weight: 700;
  font-family: var(--font-mono);
}

blockquote {
  border-left: 0.2em solid var(--ctp-mauve);
  background: linear-gradient(
    90deg,
    rgba(203, 166, 247, 0.1) 0%,
    transparent 100%
  );
  padding: 1em 1.5em;
  margin: 1.5em 0;
  font-size: 2.5em;
  font-style: italic;
  color: var(--ctp-text);
  border-radius: 0 0.5em 0.5em 0;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2em 0;
  font-size: 2em;
  border: 1px solid var(--border-color);
  border-radius: 0.5em;
  overflow: hidden;
}

th {
  background: var(--ctp-surface0);
  color: var(--ctp-mauve);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.8em;
  border-bottom: 1px solid var(--border-color);
}

td {
  padding: 0.8em;
  border-bottom: 1px solid var(--border-color);
  color: var(--ctp-subtext1);
}

/* =========================================
   Math / KaTeX
   ========================================= */

.katex-display {
  margin: 1em 0;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  padding: 0.5em 0;
}

.katex {
  font-size: 1.1em; /* Slight bump to match text weight */
  color: var(--ctp-text);
}

.katex-html {
  overflow: hidden;
}

/* =========================================
   Layout Variants
   ========================================= */

/* Hero Layout */
body.layout-hero .content {
  width: 85%;
  text-align: center;
  align-items: center;
}

body.layout-hero h1 {
  font-size: 8.5em;
  margin-bottom: 0.15em;
  line-height: 1.2;
  background: linear-gradient(
    to bottom,
    var(--ctp-text) 40%,
    var(--ctp-mauve) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.layout-hero h2 {
  font-size: 5.5em;
  margin-bottom: 0.3em;
  background: linear-gradient(
    to bottom,
    var(--ctp-subtext1) 40%,
    var(--ctp-lavender) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.layout-hero p {
  font-size: 4em;
  text-align: center;
  color: var(--ctp-subtext0);
  max-width: 90%;
}

/* Title Layout (Single Heading) */
body.layout-title .content {
  width: 90%;
  max-width: none;
  text-align: center;
  align-items: center;
}

body.layout-title h1,
body.layout-title h2,
body.layout-title h3 {
  font-size: 11em;
  margin-bottom: 0;
  line-height: 1.1;
  background: linear-gradient(
    to bottom,
    var(--ctp-text) 30%,
    var(--ctp-mauve) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(203, 166, 247, 0.3));
}

/* Quote Layout - Modern, fancy Catppuccin design */
body.layout-quote .content {
  max-width: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body.layout-quote blockquote {
  position: relative;
  font-size: 3.2em;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  color: var(--ctp-text);
  padding: 1.5em 2.5em;
  margin: 0;
  border-left: 0.15em solid var(--ctp-mauve);
  background: linear-gradient(
    90deg,
    rgba(203, 166, 247, 0.1) 0%,
    transparent 50%
  );
  border-radius: 0 1em 1em 0;
}

/* Decorative quote marks */
body.layout-quote blockquote::before,
body.layout-quote blockquote::after {
  font-family: Georgia, serif;
  font-size: 5em;
  font-style: normal;
  line-height: 1;
  position: absolute;
  color: var(--ctp-mauve);
  opacity: 0.3;
}

body.layout-quote blockquote::before {
  content: '"';
  top: -0.1em;
  left: 0.3em;
}

body.layout-quote blockquote::after {
  content: '"';
  bottom: -0.3em;
  right: 0.3em;
}

/* Quote text */
body.layout-quote blockquote p {
  margin: 0;
}

/* Image Layout */
body.layout-image {
  padding: 0;
}

body.layout-image .content {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Pandoc wraps images in <figure> or <p> - style both */
body.layout-image .content figure,
body.layout-image .content p {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Hide alt text / figcaption for image-only slides */
body.layout-image .content figcaption {
  display: none;
}

body.layout-image img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
}

/* Dense Layout */
body.layout-dense {
  padding: 1.5rem;
}

body.layout-dense .content {
  width: 90%;
  justify-content: center;
  padding-top: 1rem;
}

/* Dense layout with code blocks - use full width */
body.layout-dense:has(pre) .content,
body.layout-dense:has(div.sourceCode) .content {
  width: 95%;
}

body.layout-dense h1 {
  margin-bottom: 0.2em;
}

body.layout-dense h2 {
  margin-bottom: 0.3em;
}

body.layout-dense p {
  margin-bottom: 0.5em;
  font-size: 2.2em;
}

body.layout-dense pre {
  padding: 1em 1.5em !important;
  margin: 0.5em 0;
}

/* Code blocks in dense layout - reduce margins */
body.layout-dense div.sourceCode,
body.layout-dense div.code-window {
  margin: 0.5em 0;
}

/* =========================================
   Responsive Design / Reels Support
   ========================================= */

/* Portrait / Vertical Video (9:16 aspect ratio) */
@media (aspect-ratio < 1/1) {
  body {
    /* Unequal padding to clear UI elements (Reels/TikTok captions & buttons) */
    padding-top: 12vh;
    padding-bottom: 20vh;
    padding-left: 6vw;
    padding-right: 6vw;

    /* Adjust base size for narrow screens to keep relative units sane */
    --base-size: 85%;
  }

  .content {
    /* Use full available width (minus body padding) */
    width: 100%;
    max-width: 100%;
  }

  /* Adjust typography scaling for vertical layout */
  /* Reduced from 6em/3.2em to let JS scaler handle growth if space permits */
  h1 {
    font-size: 5em;
    line-height: 1.15;
  }

  h2 {
    font-size: 4em;
  }

  h3 {
    font-size: 3em;
  }

  p {
    font-size: 2.8em;
    line-height: 1.5;
  }

  ul,
  ol {
    font-size: 2.8em;
    padding-left: 1.2em;
  }

  /* Adjust code blocks for narrow width */
  div.sourceCode,
  div.code-window {
    margin: 1em 0;
  }

  pre code {
    font-size: 1.4em;
  }

  /* Layout specifics adjustments */
  body.layout-hero .content {
    transform: none; /* Disable scaling transform which might clip */
    width: 100%;
  }

  body.layout-hero h1 {
    font-size: 8em; /* Slightly smaller than 10em to avoid excessive wrapping */
    line-height: 1.2;
  }

  body.layout-hero p {
    font-size: 4em;
  }

  body.layout-quote blockquote {
    font-size: 3.5em;
    padding: 1.5em 1.5em;
    margin: 1em 0;
  }
}
