/* slide rendering + themes. shared by the app and exported decks. */
.th-light { --s-bg: hsl(48 30% 96%); --s-fg: hsl(30 8% 10%); --s-muted: hsl(40 6% 39%); --s-accent: hsl(217 84% 46%); --s-card: hsl(45 25% 91%); --s-border: hsl(45 18% 82%); --s-k: hsl(217 84% 46%); --s-s: hsl(142 50% 30%); --s-n: hsl(24 80% 42%); --s-c: hsl(40 6% 52%); --s-f: hsl(280 45% 45%); }
.th-dark { --s-bg: hsl(30 8% 8%); --s-fg: hsl(45 25% 90%); --s-muted: hsl(40 6% 62%); --s-accent: hsl(217 90% 66%); --s-card: hsl(30 8% 12%); --s-border: hsl(30 8% 22%); --s-k: hsl(217 90% 70%); --s-s: hsl(142 45% 62%); --s-n: hsl(30 85% 64%); --s-c: hsl(40 6% 48%); --s-f: hsl(280 60% 75%); }
.th-accent { --s-bg: hsl(217 84% 46%); --s-fg: hsl(0 0% 98%); --s-muted: hsl(217 60% 86%); --s-accent: hsl(48 90% 72%); --s-card: hsl(217 84% 38%); --s-border: hsl(217 60% 62%); --s-k: hsl(48 90% 72%); --s-s: hsl(150 70% 80%); --s-n: hsl(20 95% 78%); --s-c: hsl(217 50% 75%); --s-f: hsl(0 0% 100%); }
.th-terminal { --s-bg: hsl(0 0% 4%); --s-fg: hsl(120 30% 82%); --s-muted: hsl(120 10% 55%); --s-accent: hsl(38 95% 58%); --s-card: hsl(0 0% 8%); --s-border: hsl(120 10% 20%); --s-k: hsl(38 95% 60%); --s-s: hsl(120 60% 62%); --s-n: hsl(190 80% 62%); --s-c: hsl(120 8% 40%); --s-f: hsl(300 50% 72%); }

.slide, .slide *, .slide *::before, .slide *::after { border-radius: 0 !important; box-sizing: border-box; }
.slide {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  container-type: inline-size;
  background: var(--s-bg); color: var(--s-fg);
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
.slide-inner {
  position: absolute; inset: 0; padding: 5.5cqw 7cqw 6cqw;
  display: flex; flex-direction: column; justify-content: safe center; gap: 0.65em;
  font-size: calc(2.15cqw * var(--fit, 1)); line-height: 1.45; overflow: hidden;
}
.slide-inner > * { margin: 0; max-width: 100%; }
.slide h1, .slide h2, .slide h3 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; }
.slide h1 { font-size: 2.51em; }
.slide h2 { font-size: 1.81em; }
.slide h2::before { content: "■ "; color: var(--s-accent); font-weight: 400; font-size: 0.7em; vertical-align: 0.12em; }
.slide h3 { font-size: 1.35em; }
.slide h4, .slide h5, .slide h6 { font-size: 1em; font-weight: 600; color: var(--s-muted); }
.slide strong { font-weight: 700; }
.slide em { font-style: italic; }
.slide del { color: var(--s-muted); }
.slide a { color: var(--s-accent); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
.slide code { font-family: inherit; font-size: 0.9em; background: var(--s-card); border: 1px solid var(--s-border); padding: 0.05em 0.35em; }
.slide pre.code { position: relative; font-size: 0.72em; line-height: 1.5; background: var(--s-card); border: 1px solid var(--s-border); padding: 1em 1.3em; overflow: hidden; white-space: pre; }
.slide pre.code code { background: none; border: 0; padding: 0; font-size: inherit; }
.slide pre.code[data-lang]::after { content: attr(data-lang); position: absolute; top: 0.45em; right: 0.7em; font-size: 0.68em; color: var(--s-muted); }
.tk-k { color: var(--s-k); font-weight: 600; }
.tk-s { color: var(--s-s); }
.tk-n { color: var(--s-n); }
.tk-c { color: var(--s-c); font-style: italic; }
.tk-f { color: var(--s-f); }
.slide ul, .slide ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: 0.45em; }
.slide ul ul, .slide ol ol, .slide ul ol, .slide ol ul { margin-top: 0.45em; font-size: 0.88em; }
.slide ul { list-style: none; }
.slide ul > li { position: relative; }
.slide ul > li::before { content: "▸"; position: absolute; left: -1.3em; color: var(--s-accent); }
.slide li::marker { color: var(--s-accent); }
.slide ul > li:has(> .task)::before { content: none; }
.slide .task { display: inline-block; width: 0.8em; height: 0.8em; border: 1px solid var(--s-fg); margin-right: 0.5em; vertical-align: -0.05em; }
.slide .task.done { background: var(--s-accent); border-color: var(--s-accent); }
.slide blockquote { border-left: 1px solid var(--s-accent); padding: 0.2em 0 0.2em 1.2em; color: var(--s-muted); font-size: 1.12em; }
.slide blockquote p { margin: 0; }
.slide blockquote > * + * { margin-top: 0.5em; }
.slide table { border-collapse: collapse; font-size: 0.79em; width: max-content; max-width: 100%; }
.slide th, .slide td { border: 1px solid var(--s-border); padding: 0.55em 1em; text-align: left; }
.slide th { background: var(--s-card); font-weight: 600; }
.slide img { max-width: 100%; max-height: calc(52cqw * var(--fit, 1)); object-fit: contain; vertical-align: middle; }
.slide p.figure { display: flex; justify-content: center; }
.slide p.figure img { max-height: calc(36cqw * var(--fit, 1)); border: 1px solid var(--s-border); }
.slide.l-title .slide-inner { justify-content: center; }
.slide.l-title h1 { font-size: 3.44em; line-height: 1; }
.slide.l-title h1::after { content: "▋"; color: var(--s-accent); font-weight: 400; margin-left: 0.08em; font-size: 0.8em; }
.slide.l-title p { color: var(--s-muted); font-size: 1.07em; }
.slide.l-section .slide-inner { justify-content: flex-end; padding-bottom: 9cqw; }
.slide.l-section h1, .slide.l-section h2, .slide.l-section h3 { font-size: 2.88em; }
.slide .slide-num { position: absolute; right: 2.2cqw; bottom: 1.6cqw; font-size: 1.05cqw; color: var(--s-muted); font-variant-numeric: tabular-nums; }
.slide.l-empty .slide-num { display: none; }

/* print: one slide per page, 16:9 */
@page { size: 13.333in 7.5in; margin: 0; }
@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: none !important; }
  .print-deck { display: block !important; }
  .print-deck .slide { width: 13.333in; height: 7.5in; aspect-ratio: auto; break-after: page; page-break-after: always; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .print-deck .slide:last-child { break-after: auto; page-break-after: auto; }
}