/* Tiny — site theme.
   Century Supra prose (headings included) on a warm ground; Iosevka wherever
   the machine speaks: code, chips, dates, demo controls, the wordmark.
   Gruvbox-red accent (#fb4934) matching the package wordmarks. Quiet headers,
   one small wordmark logo. No CDN, no script. */

@font-face {
  font-family: "Iosevka";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/iosevka-400.woff2") format("woff2");
}
@font-face {
  font-family: "Iosevka";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/iosevka-700.woff2") format("woff2");
}
@font-face {
  font-family: "Iosevka";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/iosevka-900.woff2") format("woff2");
}
@font-face {
  font-family: "Iosevka Wordmark";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/iosevka-900-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Century Supra";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/century-supra-400.woff2") format("woff2");
}
@font-face {
  font-family: "Century Supra";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/century-supra-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Century Supra";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/century-supra-700.woff2") format("woff2");
}
@font-face {
  font-family: "Century Supra";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/century-supra-700-italic.woff2") format("woff2");
}
@font-face {
  font-family: "STIX Two Math";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/stix-two-math.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --paper: light-dark(#f4f1ea, #16140f);
  --paper-sunk: light-dark(#ece8dd, #1e1b15);
  --ink: light-dark(#1a1714, #ece3d2);
  --ink-soft: light-dark(#564e44, #b0a692);
  --ink-mute: light-dark(#8c8275, #756c5b);
  --accent: #fb4934;
  --accent-ink: light-dark(#d2371f, #fe5a44);
  --chic-pink: light-dark(#c8386b, #f58fb0);
  --rule: light-dark(rgba(26, 23, 20, 0.16), rgba(236, 227, 210, 0.14));
  --rule-bold: light-dark(rgba(26, 23, 20, 0.3), rgba(236, 227, 210, 0.28));
  --code-bg: light-dark(#e7e2d5, #211d16);
  --code-head: light-dark(#ded7c7, #2a251c);
  --code-line: light-dark(#8c8275, #756c5b);
  --code-keyword: light-dark(#9d3a24, #ff7b64);
  --code-type: light-dark(#27627a, #7cc7d8);
  --code-string: light-dark(#426c36, #a9d180);
  --code-comment: light-dark(#8c8275, #756c5b);
  --code-number: light-dark(#7f4a8b, #c99ee6);
  --code-builtin: light-dark(#8a5a00, #f2b35d);
  --code-constant: light-dark(#b2365c, #f08aaa);
  --zig-chip-bg: #f7a41d;
  --zig-chip-border: light-dark(#9d5a00, #f5c06a);
  --zig-chip-ink: light-dark(#1a1714, #16140f);

  --face-text: "Century Supra", "Century Schoolbook", "New Century Schoolbook",
    Georgia, serif;
  --face-mono: "Iosevka", ui-monospace, "SF Mono", "Cascadia Code", Menlo,
    Consolas, "DejaVu Sans Mono", monospace;
  --site-reading: 43rem;
  --site-wide: 72rem;
  --site-inset: clamp(1rem, 3vw, 1.5rem);
  --site-header-top: clamp(1rem, 2vw, 1.8rem);
  --site-page: calc(var(--site-wide) + 3rem);
}

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}
html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings:
    "calt" 1,
    "liga" 1;
  font-variant-ligatures: contextual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-skip {
  position: absolute;
  top: 0;
  left: -100vw;
  padding: 0.65rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
}

.site-skip:focus {
  left: 0;
  z-index: 10;
}

:where(a, button, input, select, summary, textarea):focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
}

.page {
  display: grid;
  grid-template-columns:
    [wide-start] minmax(0, 1fr)
    [reading-start] minmax(0, var(--site-reading))
    [reading-end] minmax(0, 1fr)
    [wide-end];
  width: min(var(--site-page), 100%);
  margin: 0 auto;
  padding: var(--site-header-top) var(--site-inset) 4rem;
}

.page > .masthead,
.page > .content {
  display: grid;
  grid-template-columns:
    [wide-start] minmax(0, 1fr)
    [reading-start] minmax(0, var(--site-reading))
    [reading-end] minmax(0, 1fr)
    [wide-end];
  grid-column: wide-start / wide-end;
  min-width: 0;
}

.page > .footer,
.page > :is(.masthead, .content) > * {
  grid-column: reading-start / reading-end;
  min-width: 0;
}

.page > :is(.masthead, .content) > .zen-role-reading {
  grid-column: reading-start / reading-end;
}

.page > :is(.masthead, .content) > :is(.site-nav, .zen-role-wide) {
  grid-column: wide-start / wide-end;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-page-style="home"] .page > .content > .content-table {
  grid-column: reading-start / reading-end;
}

/* ── Shared navigation ──────────────────────────────────────────── */
/* ── Masthead: wordmark, abstract, shared nav ──────────────────── */
.masthead {
  padding-top: 0;
}

.descbar {
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0 0.75rem;
}

body:not([data-page-style="home"]) .masthead > .descbar {
  display: none;
}

.wordmark {
  flex: 0 0 auto;
  font-family: var(--face-mono);
  font-weight: 900;
  font-size: clamp(1.7rem, 5.5vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: none;
}

.wordmark .hot {
  color: var(--accent);
  font-family: "Iosevka Wordmark", var(--face-mono);
  font-style: italic;
  font-weight: 900;
}

.wordmark:hover {
  color: var(--ink-soft);
}

.abstract {
  flex: 1 1 0;
  min-width: 14rem;
  margin: 0;
  text-align: justify;
  hyphens: auto;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 0 0 0.65rem;
  border-bottom: 1px solid var(--rule-bold);
}

.site-nav .site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  color: var(--ink);
  text-decoration: none;
}

.site-nav .site-brand svg {
  width: 48px;
  height: 48px;
  display: block;
  shape-rendering: geometricPrecision;
}

.site-nav .site-brand:hover {
  color: var(--ink-soft);
}

.site-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-left: auto;
  font-family: var(--face-mono);
  font-size: 0.875rem;
  font-weight: 700;
}

.site-nav .site-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav .site-nav-links a:is(:hover, :focus-visible) {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Content ────────────────────────────────────────────────────── */
.content {
  padding-top: 2rem;
}
.content > :first-child {
  margin-top: 0;
}
body[data-page-style="home"] .content {
  padding-top: 1.25rem;
}

/* Quiet headers: bold Iosevka, small, a thin rule — no shouting. */
.content h1,
.content h2,
.content h3,
.content h4 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.content h1 {
  font-size: 1.4rem;
  margin: 0 0 1rem;
}
.content h2 {
  font-size: 1.02rem;
  margin: 2.4rem 0 0.8rem;
  color: var(--ink-soft);
}
.content h3 {
  font-size: 0.95rem;
  margin: 1.6rem 0 0.5rem;
  color: var(--ink-soft);
}

.content p {
  margin: 0 0 0.9rem;
}

.content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-bold);
  text-underline-offset: 2px;
}
.content a:hover {
  color: var(--accent-ink);
  text-decoration-color: var(--accent);
}

.content ul,
.content ol {
  margin: 0.9rem 0 1rem;
  padding-left: 1.5rem;
}
.content ul {
  list-style: disc;
}
.content ol {
  list-style: decimal;
}
.content li {
  margin: 0.35rem 0;
  padding-left: 0.25rem;
}
.content li::marker {
  color: var(--accent-ink);
  font-weight: 700;
}
.content em {
  font-style: italic;
}

.content .content-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 1rem 0 1.2rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--rule-bold) transparent;
  scrollbar-width: thin;
}

.content .content-table:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
}

body[data-page-style="home"] .content-table {
  margin-top: 0;
}
body[data-page-style="home"] .content-table td:nth-child(2) {
  white-space: nowrap;
}
body[data-page-style="home"] .content-table td:not(:first-child) code {
  font-size: 0.8rem;
}

.content .docs-audit-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.content :is(.content-table table, .docs-audit-table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.45;
}

.content
  :is(
    .content-table th,
    .content-table td,
    .docs-audit-table th,
    .docs-audit-table td
  ) {
  padding: 0.55rem 0.65rem;
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}

.content :is(.content-table th, .docs-audit-table th) {
  border-bottom: 1px solid var(--rule-bold);
  font-weight: 700;
  vertical-align: bottom;
}

.content :is(.content-table, .docs-audit-table) tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--paper-sunk) 35%, transparent);
}

.content .content-table .zen-table-align-left {
  text-align: left;
}
.content .content-table .zen-table-align-center {
  text-align: center;
}
.content .content-table .zen-table-align-right {
  text-align: right;
}

.content code,
.content pre,
.content .zen-code-block {
  font-family: var(--face-mono);
}

math {
  font-family: "STIX Two Math", math;
}
.content math[display="block"] {
  margin: 1.1rem 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
math mtd:first-child {
  padding-left: 0;
}
math mtd:last-child {
  padding-right: 0;
}
mtable.zen-cases mtd {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}
mtable.zen-cases mtd + mtd {
  padding-left: 1em;
}
mtable.zen-aligned mtd {
  padding: 0.7ex 0;
}
mtable.zen-aligned mtd:nth-child(2n + 3) {
  padding-left: 1em;
}
mtable.zen-aligned mtd:nth-child(odd) {
  text-align: right;
}
mtable.zen-aligned mtd:nth-child(even) {
  text-align: left;
}
@supports (not (-webkit-backdrop-filter: blur(1px))) and
  (not (-moz-appearance: none)) {
  mtable.zen-cases mtd {
    text-align: -webkit-left;
  }
  mtable.zen-aligned mtd:nth-child(odd) {
    text-align: -webkit-right;
  }
  mtable.zen-aligned mtd:nth-child(even) {
    text-align: -webkit-left;
  }
}
.content code {
  font-size: 0.92em;
}
.content :not(pre) > code {
  background: var(--code-bg);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}
.content h1 > code:first-child {
  display: inline-flex;
  align-items: center;
  margin-right: 0.55rem;
  padding: 0.02rem 0.42rem 0.04rem;
  border: 1px solid var(--zig-chip-border);
  border-radius: 3px;
  background: var(--zig-chip-bg);
  color: var(--zig-chip-ink);
  font-weight: 700;
  font-size: 0.78em;
  line-height: 1.25;
  letter-spacing: 0;
  vertical-align: 0.08em;
}
.content h1 > code:first-child {
  font-size: 0.72rem;
  vertical-align: 0.16rem;
}
.content pre {
  margin: 1.1rem 0;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.content pre code {
  font-size: inherit;
  background: none;
  padding: 0;
}

.content .zen-code-block {
  margin: 1.1rem 0;
  overflow: hidden;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.content .zen-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.48rem 0.85rem;
  background: var(--code-head);
  border-bottom: 1px solid var(--rule);
}
.content .zen-code-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
  color: var(--ink);
}
.content .zen-code-language {
  flex: 0 0 auto;
  color: var(--ink-mute);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.content .zen-code {
  margin: 0;
  padding: 0.72rem 0;
  overflow-x: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.content .zen-code-wrap .zen-code {
  overflow-x: hidden;
}
.content .zen-code code {
  display: block;
  font-size: inherit;
  background: none;
  padding: 0;
}
.content .zen-code-line {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 0.8rem;
  min-height: 1.5em;
  padding: 0 0.85rem;
}
.content .zen-code-no-lines .zen-code-line {
  grid-template-columns: minmax(0, 1fr);
}
.content .zen-code-line-number {
  color: var(--code-line);
  text-align: right;
  user-select: none;
}
.content .zen-code-line-source {
  min-width: 0;
  white-space: pre;
}
.content .zen-code-wrap .zen-code-line-source {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.content :is(.zen-source-listing, .zen-code-longform) .zen-code {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
.content :is(.zen-source-listing, .zen-code-longform) .zen-code-line {
  position: relative;
  grid-template-columns: 2.4rem max-content;
  width: max-content;
  min-width: 100%;
}
.content
  :is(.zen-source-listing, .zen-code-longform)
  .zen-code-no-lines
  .zen-code-line {
  grid-template-columns: max-content;
}
.content :is(.zen-source-listing, .zen-code-longform) .zen-code-line-source {
  white-space: pre;
}
.content .zen-code-keyword {
  color: var(--code-keyword);
  font-weight: 700;
}
.content .zen-code-type {
  color: var(--code-type);
}
.content .zen-code-string {
  color: var(--code-string);
}
.content .zen-code-comment {
  color: var(--code-comment);
}
.content .zen-code-number {
  color: var(--code-number);
}
.content .zen-code-builtin {
  color: var(--code-builtin);
}
.content .zen-code-constant {
  color: var(--code-constant);
}

.content blockquote {
  margin: 1.2rem 0;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
}
.content blockquote p:last-child {
  margin-bottom: 0;
}

.content img {
  max-width: 100%;
  height: auto;
}

.page
  > .content
  > .zen-media-block.zen-role-wide
  > a
  > img.zen-slide-figure-wide:is([src$=".svg"], [src*=".svg?"]) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.content sup {
  line-height: 0;
}

.content .footnote-ref {
  font-size: 0.78rem;
  text-decoration: none;
}

.content .footnotes {
  margin-top: 2.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}

.content .footnotes ol {
  margin-bottom: 0;
}

.content .footnote-backref {
  margin-left: 0.35rem;
  text-decoration: none;
}

/* ── Quiz: the closing self-check on guides and changes ─────────── */

.content .zen-quiz {
  margin: 2.6rem 0;
  padding: 1.4rem 1.6rem 1.1rem;
  border: 1px solid var(--rule-bold);
  background: var(--paper-sunk);
}

.content .zen-quiz-questions {
  margin: 0;
  padding-left: 1.4rem;
}

.content .zen-quiz-question {
  margin: 0 0 1.4rem;
}

.content .zen-quiz-question:last-child {
  margin-bottom: 0.4rem;
}

.content .zen-quiz-prompt {
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.content .zen-quiz-options {
  margin: 0 0 0.6rem;
  padding-left: 1.6rem;
  list-style: lower-alpha;
}

.content .zen-quiz-options li {
  margin: 0.15rem 0;
}

.content .zen-quiz-answer {
  margin: 0.4rem 0 0;
}

.content .zen-quiz-answer summary {
  display: inline-block;
  cursor: pointer;
  font-family: "Iosevka", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
}

.content .zen-quiz-answer summary:hover {
  text-decoration: underline;
}

.content .zen-quiz-answer[open] summary {
  color: var(--ink-mute);
}

.content .zen-quiz-answer p {
  margin: 0.5rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
}

.content .zen-quiz-correct {
  color: var(--ink);
}

.content .zen-quiz-explanation {
  color: var(--ink-soft);
}

.page:has(.zen-slides) {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
}

.page:has(.zen-slides) .site-nav,
.page:has(.zen-slides) .footer {
  display: none;
}

.content:has(> .zen-slides) {
  display: block;
  padding: 0;
}

.content .zen-slides {
  min-height: 100vh;
  background: var(--paper-sunk);
  scroll-snap-type: y mandatory;
}

.content .zen-slide {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1rem;
  scroll-snap-align: start;
}

.content .zen-slide-frame {
  box-sizing: border-box;
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: 0.85rem;
  width: min(calc(100vw - 2rem), calc(177.7778vh - 3.5556rem));
  max-height: calc(100vh - 2rem);
  aspect-ratio: 16 / 9;
  padding: 2.1rem 2.6rem;
  border: 1px solid var(--rule-bold);
  background: var(--paper);
  box-shadow: 0 1.1rem 2.8rem rgba(26, 23, 20, 0.08);
  overflow: auto;
}

.content .zen-slide-frame::before,
.content .zen-slide-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

.content .zen-slide-frame::before {
  inset: 0;
  background: linear-gradient(
      to right,
      transparent calc(50% - 0.5px),
      rgba(39, 98, 122, 0.58) calc(50% - 0.5px),
      rgba(39, 98, 122, 0.58) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(50% - 0.5px),
      rgba(39, 98, 122, 0.58) calc(50% - 0.5px),
      rgba(39, 98, 122, 0.58) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      to right,
      transparent calc(33.333% - 0.5px),
      rgba(193, 125, 17, 0.34) calc(33.333% - 0.5px),
      rgba(193, 125, 17, 0.34) calc(33.333% + 0.5px),
      transparent calc(33.333% + 0.5px),
      transparent calc(66.666% - 0.5px),
      rgba(193, 125, 17, 0.34) calc(66.666% - 0.5px),
      rgba(193, 125, 17, 0.34) calc(66.666% + 0.5px),
      transparent calc(66.666% + 0.5px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(33.333% - 0.5px),
      rgba(193, 125, 17, 0.34) calc(33.333% - 0.5px),
      rgba(193, 125, 17, 0.34) calc(33.333% + 0.5px),
      transparent calc(33.333% + 0.5px),
      transparent calc(66.666% - 0.5px),
      rgba(193, 125, 17, 0.34) calc(66.666% - 0.5px),
      rgba(193, 125, 17, 0.34) calc(66.666% + 0.5px),
      transparent calc(66.666% + 0.5px)
    );
}

.content .zen-slide-frame::after {
  inset: 8%;
  border: 1px dashed rgba(39, 98, 122, 0.72);
}

body.zen-slide-safe .content .zen-slide-frame::before,
body.zen-slide-safe .content .zen-slide-frame::after {
  opacity: 1;
}

.content .zen-slide-frame > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}

.content .zen-page-badge {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: 0.18rem 0.6rem;
  border: 1.5px solid color-mix(in srgb, var(--accent-ink) 62%, transparent);
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
  color: var(--accent-ink);
  font-family: "Iosevka", monospace;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-indent: 0.22em;
  user-select: none;
}

.content .zen-slide-badge {
  position: absolute;
  z-index: 3;
  top: 2.1cqw;
  right: 2.1cqw;
  width: auto;
  padding: 0.3cqw 1.1cqw;
  transform: rotate(-6deg);
  border: 1.5px solid color-mix(in srgb, var(--accent-ink) 62%, transparent);
  border-radius: 0.45cqw;
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
  color: var(--accent-ink);
  font-family: "Iosevka", monospace;
  font-size: 1.5cqw;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-indent: 0.22em;
  pointer-events: none;
  user-select: none;
}

.content .zen-slide-frame > :last-child {
  margin-bottom: 0;
}

.content .zen-slide-frame > p,
.content .zen-slide-frame > ul,
.content .zen-slide-frame > ol {
  margin-block: 0;
}

.content .zen-slide-frame > p:has(> img:is(:only-child, .zen-slide-motion)),
.content .zen-slide-frame > p:has(> video:only-child) {
  position: relative;
  display: grid;
  flex: 1 1 0;
  place-items: center;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  line-height: 0;
}

.content
  .zen-slide-frame
  > p:has(> img:is(:only-child, .zen-slide-motion)):first-of-type,
.content .zen-slide-frame > p:has(> video:only-child):first-of-type {
  flex-grow: 1.6;
}

.content
  .zen-slide-frame
  > p:has(> img.zen-slide-figure-compact:is(:only-child, .zen-slide-motion)),
.content .zen-slide-frame > p:has(> video.zen-slide-figure-compact:only-child) {
  flex: 0 1 auto;
  min-height: 34%;
}

.content
  .zen-slide-frame
  > p:has(> img.zen-slide-figure-wide:is(:only-child, .zen-slide-motion)),
.content .zen-slide-frame > p:has(> video.zen-slide-figure-wide:only-child) {
  flex-grow: 2;
}

.content
  .zen-slide-frame
  > p:has(> img.zen-slide-figure-tall:is(:only-child, .zen-slide-motion)),
.content .zen-slide-frame > p:has(> video.zen-slide-figure-tall:only-child) {
  max-width: min(100%, max(44rem, 56.5cqi));
}

.content
  .zen-slide-frame
  > p:has(> img:is(:only-child, .zen-slide-motion))
  > :is(img, object),
.content .zen-slide-frame > p:has(> video:only-child) video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.content
  .zen-slide-frame
  > p:has(> img.zen-slide-figure-fill:is(:only-child, .zen-slide-motion))
  > :is(img, object),
.content
  .zen-slide-frame
  > p:has(> video.zen-slide-figure-fill:only-child)
  video {
  object-fit: cover;
}

.content
  .zen-slide-frame:has(
    > p > img.zen-slide-figure-canvas:is(:only-child, .zen-slide-motion)
  ),
.content .zen-slide-frame:has(> p > video.zen-slide-figure-canvas:only-child) {
  justify-content: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.content
  .zen-slide-frame:has(
    > p > img.zen-slide-figure-canvas:is(:only-child, .zen-slide-motion)
  )
  > h2,
.content
  .zen-slide-frame:has(> p > video.zen-slide-figure-canvas:only-child)
  > h2 {
  position: absolute;
  z-index: 2;
  top: 1.7cqw;
  right: 0;
  left: 0;
  margin: 0;
  pointer-events: none;
}

.content
  .zen-slide-frame
  > p:has(> img.zen-slide-figure-canvas:is(:only-child, .zen-slide-motion)),
.content .zen-slide-frame > p:has(> video.zen-slide-figure-canvas:only-child) {
  position: absolute;
  inset: max(11.5%, 2.6rem) 0 0 0;
  width: 100%;
  height: auto;
}

.content
  .zen-slide-frame
  > p:has(> img.zen-slide-figure-canvas:is(:only-child, .zen-slide-motion))
  > :is(img, object),
.content
  .zen-slide-frame
  > p:has(> video.zen-slide-figure-canvas:only-child)
  video {
  box-sizing: border-box;
  padding: 0;
  object-fit: contain;
}

.content .zen-slide-frame img[data-zen-motion-src][hidden] {
  visibility: hidden;
}

.content .zen-slide-frame h1 {
  margin-bottom: 0.3rem;
  font-size: clamp(1.1rem, 5.2cqi, 9rem);
  line-height: 1;
  text-align: center;
}

.content .zen-slide-frame h2 {
  margin-top: 0;
  margin-bottom: clamp(0.2rem, 1cqi, 1.4rem);
  font-size: var(--zen-slide-head, clamp(0.9rem, 3.5cqi, 6.5rem));
  line-height: 1.08;
  color: var(--ink);
  text-align: center;
}

/* A slide carrying prose or bullets and no media can afford a larger scale,
   so one structural test names that scale and the rules around it read it.
   3.66cqi spans this padded frame's content box to the pixels 3.5cqi spans
   on an unpadded figure-canvas frame, so a deck holds one heading size. */
.content
  .zen-slide-frame:where(
    :has(> :is(p, ul, ol)):not(:has(img, video, object, svg, canvas, pre))
  ) {
  --zen-slide-head: clamp(0.9rem, 3.66cqi, 6.8rem);
  --zen-slide-body: clamp(0.8rem, 2.65cqi, 4.7rem);
  --zen-slide-lead: 1.35;
  --zen-slide-item: 0.45em;
  --zen-slide-measure: max(30rem, 82cqi);
  text-wrap: pretty;
}

/* Printed speaker notes keep the site's reading size. */
.content .zen-speaker-notes {
  --zen-slide-body: initial;
  --zen-slide-lead: initial;
  --zen-slide-item: initial;
}

/* Title lockup: an h1 over its subtitle, alone on the slide. The badge and
   the speaker notes are slide chrome, not content, so they stay in the set. */
.content
  .zen-slide-frame:not(
    :has(> :not(h1, h2, .zen-speaker-notes, .zen-slide-badge))
  )
  > h1 {
  font-size: clamp(1.2rem, 6.2cqi, 10rem);
  text-wrap: balance;
}

.content
  .zen-slide-frame:has(> h1):not(
    :has(> :not(h1, h2, .zen-speaker-notes, .zen-slide-badge))
  )
  > h2 {
  max-width: 78cqi;
  font-size: clamp(1rem, 3.5cqi, 6.5rem);
  font-weight: 400;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* Divider: one heading carries the whole slide, so it takes the whole slide. */
.content
  .zen-slide-frame:not(:has(> :not(h2, .zen-speaker-notes, .zen-slide-badge)))
  > h2 {
  max-width: 84cqi;
  font-size: clamp(1.2rem, 5.4cqi, 9rem);
  text-wrap: balance;
}

.content .zen-slide-frame p,
.content .zen-slide-frame li {
  font-size: var(--zen-slide-body, clamp(0.8rem, 1.8cqi, 3.2rem));
  line-height: var(--zen-slide-lead, 1.4);
}

.content .zen-slide-frame li {
  margin-block: var(--zen-slide-item, 0.35rem);
}

.content .zen-slide-frame > :is(p, ul, ol) {
  max-width: var(--zen-slide-measure, 100%);
}

.content .zen-slide-frame > p:not(:has(> img, > video)) {
  text-align: center;
}

.content .zen-slide-frame ul,
.content .zen-slide-frame ol {
  padding-left: clamp(1.05rem, 2.6cqi, 4rem);
}

.content .zen-slide-frame math[display="block"] {
  font-size: clamp(1rem, 2cqi, 3.6rem);
  line-height: 1.15;
  text-align: center;
}

.content .zen-slide-frame math[display="block"],
.content .zen-slide-frame .zen-code-block,
.content .zen-slide-frame .zen-diagram,
.content .zen-slide-frame img,
.content .zen-slide-frame svg,
.content .zen-slide-frame video,
.content .zen-slide-frame canvas {
  max-width: 100%;
}

.content .zen-slide-frame img,
.content .zen-slide-frame svg,
.content .zen-slide-frame video,
.content .zen-slide-frame canvas {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.content .zen-slide-frame .zen-code-block,
.content .zen-slide-frame .zen-diagram {
  max-height: 60vh;
  overflow: auto;
  font-size: clamp(0.72rem, 1.35cqi, 2.4rem);
}

.content .zen-speaker-notes[hidden] {
  display: none;
}

body.zen-print-notes .content .zen-speaker-notes[hidden] {
  display: block;
  margin-top: 1rem;
  padding: 1rem;
  border-top: 1px solid var(--rule-bold);
  color: var(--ink-soft);
  font-size: 1rem;
}

.content .zen-slide-toolbar {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--rule-bold);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-mono);
  opacity: 0.28;
}

.content .zen-slide-toolbar:hover,
.content .zen-slide-toolbar:focus-within {
  opacity: 1;
}

.content .zen-slide-toolbar button,
.content .zen-presenter-controls button {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--rule-bold);
  background: var(--paper-sunk);
  color: inherit;
  font: inherit;
}

.content .zen-slide-toolbar button svg,
.content .zen-presenter-controls button svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.content .zen-slide-toolbar button:disabled {
  opacity: 0.35;
}

.content .zen-slide-toolbar button[aria-pressed="true"],
.content .zen-presenter-controls button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.content .zen-slide-counter {
  min-width: 4.5rem;
  text-align: center;
  font-size: 0.78rem;
}

.content .zen-slide-notes-panel {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 4.1rem;
  z-index: 35;
  max-height: 38vh;
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--rule-bold);
  background: var(--paper);
  color: var(--ink);
}

.content .zen-slide-notes-panel p,
.content .zen-presenter-notes p {
  font-size: 1rem;
  line-height: 1.45;
}

.content .zen-slide-overview-panel {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 4.1rem;
  z-index: 36;
  width: min(24rem, calc(100vw - 2rem));
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--rule-bold);
  background: var(--paper);
  color: var(--ink);
}

.content .zen-slide-overview-summary {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.8rem;
  font-family: var(--face-mono);
  font-size: 0.82rem;
}

.content .zen-slide-overview-panel ol {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content .zen-slide-overview-panel button {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.2rem 0.5rem;
  width: 100%;
  padding: 0.45rem;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}

.content .zen-slide-overview-panel button[aria-current="true"] {
  border-color: var(--ink);
  background: var(--paper-sunk);
}

.content .zen-slide-overview-panel em {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-style: normal;
}

.content .zen-presenter-view {
  display: none;
}

body.zen-presenter-mode .content .zen-slides {
  display: none;
}

body.zen-presenter-mode .content .zen-slide-toolbar {
  display: none;
}

body.zen-presenter-mode .content .zen-presenter-view {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: 1.5rem;
  height: 100vh;
  padding: 1.5rem;
}

.content .zen-presenter-current,
.content .zen-presenter-side {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--rule-bold);
  background: var(--paper-sunk);
}

.content .zen-presenter-current {
  display: grid;
  place-items: center;
}

.content .zen-presenter-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1rem;
  overflow: hidden;
}

.content .zen-presenter-notes-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.content .zen-presenter-current .zen-slide-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 2rem;
}

.content .zen-presenter-current .zen-code-block,
.content .zen-presenter-current .zen-diagram {
  max-height: 48vh;
  overflow: auto;
  font-size: 0.9rem;
}

.content .zen-presenter-meta {
  display: grid;
  grid-template-columns: repeat(3, max-content) 1fr;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-soft);
  font-family: var(--face-mono);
  font-size: 0.9rem;
}

.content .zen-presenter-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

.content .zen-presenter-notes-section > h2,
.content .zen-presenter-next > h2 {
  margin: 0.2rem 0 0.5rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.1;
}

.content .zen-presenter-notes {
  max-height: none;
  min-height: 0;
  overflow: auto;
}

.content .zen-presenter-notes p {
  font-size: 1.08rem;
  line-height: 1.5;
}

.content .zen-presenter-next {
  padding-top: 1rem;
  border-top: 1px solid var(--rule-bold);
}

.content .zen-presenter-next-title {
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.content .zen-presenter-next-preview {
  max-height: none;
  overflow: hidden;
  margin-top: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--rule-bold);
  background: var(--paper);
}

.content .zen-presenter-next-preview .zen-slide-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  gap: 0.35rem;
  padding: 0.65rem;
  overflow: hidden;
}

.content .zen-presenter-next-preview p,
.content .zen-presenter-next-preview li {
  font-size: 0.82rem;
  line-height: 1.3;
}

.content .zen-presenter-next-preview .zen-code-block,
.content .zen-presenter-next-preview .zen-diagram {
  max-height: 8rem;
  overflow: hidden;
  font-size: 0.68rem;
}

body.zen-presenter-dark {
  color-scheme: dark;
  --paper: #171511;
  --paper-sunk: #171511;
  --ink: #f6f1e7;
  --ink-soft: #cdbf9a;
  --rule-bold: #4d4639;
  background: #11100d;
  color: #f6f1e7;
}

body.zen-presenter-dark .content .zen-presenter-current,
body.zen-presenter-dark .content .zen-presenter-side,
body.zen-presenter-dark .content .zen-presenter-next-preview {
  border-color: #4d4639;
  background: #171511;
  color: #f6f1e7;
}

body.zen-presenter-dark .content .zen-presenter-current h1,
body.zen-presenter-dark .content .zen-presenter-current h2,
body.zen-presenter-dark .content .zen-presenter-current h3,
body.zen-presenter-dark .content .zen-presenter-current p,
body.zen-presenter-dark .content .zen-presenter-current li,
body.zen-presenter-dark .content .zen-presenter-current math {
  color: #f6f1e7;
}

body.zen-presenter-dark .content .zen-presenter-current .zen-diagram,
body.zen-presenter-dark .content .zen-presenter-next-preview .zen-diagram {
  background: #f7f7f4;
  color: #20231f;
}

body.zen-presenter-dark .content .zen-presenter-meta,
body.zen-presenter-dark .content .zen-presenter-notes-section h2,
body.zen-presenter-dark .content .zen-presenter-next h2,
body.zen-presenter-dark .content .zen-presenter-next-title {
  color: #cdbf9a;
}

body.zen-presenter-dark .content .zen-presenter-controls button {
  border-color: #4d4639;
  background: #211e18;
  color: #f6f1e7;
}

body.zen-presenter-dark
  .content
  .zen-presenter-controls
  button[aria-pressed="true"] {
  background: #cdbf9a;
  color: #11100d;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--face-mono);
  font-size: 0.74rem;
  color: var(--ink-mute);
}
.footer a {
  color: var(--ink-mute);
  text-decoration: none;
}
.footer a:hover {
  color: var(--accent-ink);
}
.footer .calx-entry {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-block: -8px;
  font-size: 18px;
}

.page:has(.zen-slides) .masthead,
.page:has(.zen-slides) .footer {
  display: none;
}

@media (max-width: 44rem) {
  .descbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .abstract {
    flex: none;
    min-width: 0;
    text-align: left;
  }
  .site-nav {
    align-items: flex-start;
    flex-direction: column;
  }
  .site-nav-links {
    margin-left: 0;
  }
}

/* ── Narrow screens ─────────────────────────────────────────────── */
@media (max-width: 34rem) {
  body[data-page-style="home"] .content-table :is(th, td) {
    padding: 0.5rem 0.375rem;
  }
  body[data-page-style="home"] .content-table :is(th, td):first-child {
    padding-left: 0;
  }
  body[data-page-style="home"] .content-table :is(th, td):last-child {
    padding-right: 0;
  }
  body[data-page-style="home"] .content-table td:not(:first-child) code {
    font-size: 0.75rem;
  }
  .page,
  .page > .masthead,
  .page > .content {
    grid-template-columns:
      [wide-start reading-start] minmax(0, 1fr)
      [reading-end wide-end];
  }
  .content .zen-slide {
    padding: 0.5rem;
  }
  .content .zen-slide-frame {
    width: min(calc(100vw - 1rem), calc(177.7778vh - 1.7778rem));
    max-height: calc(100vh - 1rem);
    gap: 0.45rem;
    padding: 0.8rem 0.95rem;
  }
  .content .zen-slide-frame p,
  .content .zen-slide-frame li {
    line-height: 1.22;
  }
  .content .zen-slide-frame .zen-code-block,
  .content .zen-slide-frame .zen-diagram {
    max-height: 54vh;
  }
  .content .zen-slide-toolbar {
    left: 1rem;
    right: 1rem;
    justify-content: center;
  }
  .content .zen-slide-notes-panel {
    bottom: 4.3rem;
  }
  .content .zen-slide-overview-panel {
    left: 1rem;
    right: 1rem;
    bottom: 4.3rem;
    width: auto;
  }
  body.zen-presenter-mode .content .zen-presenter-view {
    height: auto;
    grid-template-columns: 1fr;
  }
  .content .zen-presenter-notes {
    max-height: 38vh;
  }
  .content .zen-presenter-meta {
    grid-template-columns: repeat(2, max-content) 1fr;
  }
  .content .zen-presenter-controls {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 23rem) {
  body[data-page-style="home"] .content-table :is(table, thead, tbody) {
    display: block;
  }
  body[data-page-style="home"] .content-table thead tr {
    display: block;
  }
  body[data-page-style="home"] .content-table th:first-child {
    display: block;
  }
  body[data-page-style="home"] .content-table th:not(:first-child) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }
  body[data-page-style="home"] .content-table tbody tr {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    padding: 0.65rem 0;
  }
  body[data-page-style="home"] .content-table td {
    padding: 0;
  }
  body[data-page-style="home"] .content-table td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 0.35rem;
  }
}