diff --git a/.claude/skills/blog-post/references/thumbnail-guide.md b/.claude/skills/blog-post/references/thumbnail-guide.md
index 59ae88266a..2bb42ca3ba 100644
--- a/.claude/skills/blog-post/references/thumbnail-guide.md
+++ b/.claude/skills/blog-post/references/thumbnail-guide.md
@@ -35,7 +35,7 @@ quarto.org / Open Graph standard) — don't copy dimensions from those examples.
 
 ## Quarto Brand Colors
 
-Sourced from the website CSS (`index.css`):
+Sourced from the website SCSS (`_extensions/quartoorg/scss/partials/_home.scss`):
 
 | Color | Hex | Usage |
 |-------|-----|-------|
@@ -148,7 +148,7 @@ SVGs don't center properly in listing cards or social card previews — the
 HTML uses flexbox for centering which SVG can't replicate without duplicating all
 the layout logic. The SVG is only a source file for regenerating the PNG.
 
-The Quarto logo SVG is at the quarto-web repo root: `quarto-icon.svg` (fill color `#74AADB`
+The Quarto logo SVG is in the quarto-web repo at `assets/images/quarto-icon.svg` (fill color `#74AADB`
 — recolor to `#5286AB` for thumbnails or `white` for dark backgrounds).
 
 ### Attribution
diff --git a/.githooks/README.md b/.githooks/README.md
index 3b124ab0ad..573995afbc 100644
--- a/.githooks/README.md
+++ b/.githooks/README.md
@@ -9,3 +9,5 @@ git config core.hooksPath .githooks
 ## Hooks
 
 **`pre-commit`** — Blocks commits where a `.qmd` file with a `_freeze/` entry was edited but `_freeze/` was not updated. Fix: `quarto render <file.qmd>`, then commit the updated `_freeze/` output alongside the source.
+It first runs `_tools/check-site-format.ts`, which blocks a page or a `_metadata.yml` that sets `format: html`, since that drops the site theme.
+Remove the `format` key, or use `quartoorg-html` when the page lists several formats.
diff --git a/.githooks/pre-commit b/.githooks/pre-commit
index 0446d6ac7c..adfb17cf59 100755
--- a/.githooks/pre-commit
+++ b/.githooks/pre-commit
@@ -1,6 +1,13 @@
 #!/bin/bash
-# Git pre-commit hook: verify _freeze/ is current for staged .qmd files.
+# Git pre-commit hook: check page formats, then verify _freeze/ is current for
+# staged .qmd files.
 # Setup: git config core.hooksPath .githooks
+set -euo pipefail
 
 HOOK_DIR="$(cd "$(dirname "$0")" && pwd)"
+if command -v quarto >/dev/null 2>&1; then
+	quarto run "$HOOK_DIR/../_tools/check-site-format.ts" --staged
+else
+	echo "pre-commit: quarto not found, skipping the page format check (CI still runs it)." >&2
+fi
 exec bash "$HOOK_DIR/check-freeze.sh" commit
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
index 52a5cc24a7..1e9ab01d9f 100644
--- a/.github/workflows/preview.yml
+++ b/.github/workflows/preview.yml
@@ -29,6 +29,25 @@ jobs:
           echo "::error title=Manual action required for preview::PR from fork can't be deployed as preview to Netlify automatically. Use '/deploy-preview' command in comments to trigger the preview manually."
         shell: bash
 
+  check-site-format:
+    # Runs on pull requests, forks included: a page with `format: html`
+    # renders without the site theme and gives no error.
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+      - name: Set up Quarto
+        uses: quarto-dev/quarto-actions/setup@v2
+      - name: Test the page format check
+        run: quarto run _tools/check-site-format.test.ts
+      - name: Check page formats
+        run: quarto run _tools/check-site-format.ts
+
   build-deploy-preview:
     # Deploy a preview only if 
     # - the PR is not from a fork,
diff --git a/_extensions/page-chooser/_extension.yml b/_extensions/page-chooser/_extension.yml
deleted file mode 100644
index b9dc83380d..0000000000
--- a/_extensions/page-chooser/_extension.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-title: Page chooser
-author: Quarto
-version: 1.0.0
-quarto-required: ">=1.9.0"
-contributes:
-  shortcodes:
-    - page-chooser.lua
diff --git a/_extensions/quartoorg/_extension.yml b/_extensions/quartoorg/_extension.yml
new file mode 100644
index 0000000000..f631515c85
--- /dev/null
+++ b/_extensions/quartoorg/_extension.yml
@@ -0,0 +1,53 @@
+title: quarto.org website
+author: Quarto
+version: 1.0.0
+quarto-required: ">=1.9.0"
+contributes:
+  formats:
+    html:
+      toc: true
+      theme:
+        light: [cosmo, scss/quartoorg.scss]
+        dark: [cosmo, scss/quartoorg-dark.scss]
+      code-copy: true
+      code-overflow: wrap
+      include-in-header:
+        - assets/scripts/supported-by-posit.html
+      include-after-body:
+        - assets/scripts/page-tweaks.html
+      grid:
+        sidebar-width: 250px
+        body-width: 900px
+        margin-width: 300px
+      shortcodes:
+        - shortcodes/page-chooser.lua
+      filters:
+        - filters/tools-tabset.lua
+        - filters/color-box.lua
+        - filters/shift-headings.lua
+        - at: post-quarto
+          path: filters/include-dark.lua
+  project:
+    project:
+      type: website
+    website:
+      image: /assets/images/quarto-dark-bg.jpeg
+      plausible-analytics:
+        path: assets/scripts/plausible.html
+      open-graph: true
+      twitter-card: true
+      repo-actions: [edit, issue]
+      page-navigation: true
+      bread-crumbs: true
+      search:
+        show-item-context: true
+        type: overlay
+      navbar:
+        background: light
+        logo: /assets/images/quarto.png
+        logo-alt: "Quarto logo."
+        title: false
+        collapse-below: lg
+    syntax-highlighting: a11y
+    respect-user-color-scheme: true
+    format: quartoorg-html
diff --git a/js.html b/_extensions/quartoorg/assets/scripts/page-tweaks.html
similarity index 100%
rename from js.html
rename to _extensions/quartoorg/assets/scripts/page-tweaks.html
diff --git a/_plausible.html b/_extensions/quartoorg/assets/scripts/plausible.html
similarity index 100%
rename from _plausible.html
rename to _extensions/quartoorg/assets/scripts/plausible.html
diff --git a/_extensions/quartoorg/assets/scripts/supported-by-posit.html b/_extensions/quartoorg/assets/scripts/supported-by-posit.html
new file mode 100644
index 0000000000..0785b3c87a
--- /dev/null
+++ b/_extensions/quartoorg/assets/scripts/supported-by-posit.html
@@ -0,0 +1,8 @@
+<script src="https://cdn.jsdelivr.net/gh/posit-dev/supported-by-posit/js/badge.min.js"
+  data-light-bg="#E8EDF2"
+  data-light-text="#404041"
+  data-light-lt="#ee6331"
+  data-light-gt="#447099"
+  data-dark-bg="#333333"
+  data-dark-lt="#ffffff"
+  data-dark-gt="#ffffff"></script>
diff --git a/filters/color-box.lua b/_extensions/quartoorg/filters/color-box.lua
similarity index 95%
rename from filters/color-box.lua
rename to _extensions/quartoorg/filters/color-box.lua
index 4aeafe0ba5..3910fa6c5e 100644
--- a/filters/color-box.lua
+++ b/_extensions/quartoorg/filters/color-box.lua
@@ -5,7 +5,6 @@ Span = function(s)
   if s.classes:includes('color-box') then
     local color
     if  s.attributes['color'] then
-      quarto.log.output("HERE")
       color = s.attributes['color']
       s.attributes.color = nil
     elseif #s.content == 1 and s.content[1] and s.content[1].t == "Code" and s.content[1].text and s.content[1].text:sub(1, 1) == '#' then
diff --git a/filters/include-dark.lua b/_extensions/quartoorg/filters/include-dark.lua
similarity index 100%
rename from filters/include-dark.lua
rename to _extensions/quartoorg/filters/include-dark.lua
diff --git a/filters/shift-headings.lua b/_extensions/quartoorg/filters/shift-headings.lua
similarity index 100%
rename from filters/shift-headings.lua
rename to _extensions/quartoorg/filters/shift-headings.lua
diff --git a/filters/tools-tabset.lua b/_extensions/quartoorg/filters/tools-tabset.lua
similarity index 100%
rename from filters/tools-tabset.lua
rename to _extensions/quartoorg/filters/tools-tabset.lua
diff --git a/_extensions/quartoorg/scss/partials/_buttons.scss b/_extensions/quartoorg/scss/partials/_buttons.scss
new file mode 100644
index 0000000000..8c58501aae
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_buttons.scss
@@ -0,0 +1,16 @@
+.btn-action-primary {
+  color: white;
+  background-color: #447099;
+}
+
+.btn-action-primary:hover {
+  background-color: #305775;
+  color: white;
+}
+
+.btn-action {
+  min-width: 165px;
+  border-radius: 30px;
+  border: none;
+}
+
diff --git a/_extensions/quartoorg/scss/partials/_cards.scss b/_extensions/quartoorg/scss/partials/_cards.scss
new file mode 100644
index 0000000000..fc18814ea2
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_cards.scss
@@ -0,0 +1,105 @@
+
+@media (max-width: 575px) {
+
+.link-cards .card {
+  margin-bottom: 20px;
+  margin-right: 35px;
+}
+
+}
+
+@media (min-width: 576px) { 
+.link-cards {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.link-cards .card {
+  width: 190px;
+  margin: 0 20px 12px 0;
+}
+
+
+}
+
+
+.link-cards .card {
+  border: none;
+  padding: 0;
+}
+
+/* Card titles are h2 for heading order; keep the old h4 look */
+.link-cards .card-title h2 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.2;
+  opacity: 0.9;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.link-cards .card-title p {
+  margin-bottom: 0;
+}
+
+.link-cards .card-subtitle p {
+  line-height: 1.2;
+  opacity: 0.9;
+  margin-bottom: 0.5rem;
+}
+
+.link-cards .card-subtitle {
+  margin-bottom: 0.7rem;
+}
+
+.link-cards .card-body {
+  padding: 0.5rem;
+  padding-left: 0.1rem;
+}
+
+.link-cards .card-body ul {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: none;
+}
+
+.link-cards .card-body ul a {
+  text-decoration: none;
+}
+
+.link-cards .card-body ul li {
+  padding-bottom: 0.2rem;
+}
+
+
+.card .source-code {
+  margin-top: 3px;
+}
+
+.carousel.card {
+  font-size: 16px;
+  padding-top: 2em;
+}
+
+.carousel.card a {
+  text-decoration: none;
+}
+
+.carousel img {
+  width: 70%;
+  margin-bottom: 110px;
+}
+
+.carousel .carousel-control-prev-icon, 
+.carousel .carousel-control-next-icon {
+  margin-bottom: 110px;
+}
+
+
+.gallery-category {
+  column-gap: 10px;
+}
+
diff --git a/_extensions/quartoorg/scss/partials/_color-box.scss b/_extensions/quartoorg/scss/partials/_color-box.scss
new file mode 100644
index 0000000000..44d484cfe4
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_color-box.scss
@@ -0,0 +1,12 @@
+span.color-box-container {
+  display: inline-flex;
+  align-items: center; /* Align vertically */
+}
+
+span.color-box {
+  display: inline-block;
+  width: 1em; /* Width of the color box */
+  height: 1em; /* Height of the color box */
+  margin-right: 0.2em; /* Space between box and text */
+  border: 1px solid #000; /* Border color */
+}
diff --git a/_extensions/quartoorg/scss/partials/_content.scss b/_extensions/quartoorg/scss/partials/_content.scss
new file mode 100644
index 0000000000..54835f3a9f
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_content.scss
@@ -0,0 +1,72 @@
+
+.platform-table td {
+  vertical-align: middle;
+}
+
+.platform-table td > div.sourceCode {
+  margin-top: 0.3rem;
+  margin-bottom: 0.3rem;
+}
+
+
+.document-example {
+  opacity: 0.9;
+  padding: 6px; 
+  font-weight: 500;
+  margin-bottom: 1rem;
+}
+
+.document-example div {
+  padding: 5px;
+}
+
+
+.document-example .citation {
+  color: blue;
+}
+
+body.quarto-dark .document-example .citation {
+  color: var(--bs-link-color);
+}
+
+.trademark {
+  font-size: 0.6rem;
+  display: inline-block;
+  margin-left: -3px;
+}
+
+.search-attribution {
+  margin-top: 20px;
+  padding-bottom: 20px;
+  height: 40px;
+}
+
+// Toolbar icons in prose: shown as a key cap, without <kbd> (see _style-guide.md).
+// Extends Quarto's .kbd so light and dark themes each pick up their own colors.
+img.ui-icon {
+  @extend .kbd;
+  padding: 0.15rem 0.3rem;
+  vertical-align: middle;
+  box-sizing: content-box;
+}
+
+// Quarto's title-block.scss sets `.quarto-category { opacity: 0.6 }`.
+// That drops the category chips below 4.5:1 (2.77 light, 3.43 dark).
+.quarto-title .quarto-categories .quarto-category {
+  opacity: 1;
+}
+
+/* Quarto's listing-table styles remove link underlines, so links inside
+   a description are marked by color alone: 2.23:1 against the body text,
+   short of the 3:1 WCAG 1.4.1 needs (axe link-in-text-block). */
+table.quarto-listing-table .listing-description a {
+  text-decoration: underline;
+}
+
+/* Screen-reader-only code blocks (get-started Jupyter pages). Quarto's
+   `pre.sourceCode { overflow-y: visible !important }` beats Bootstrap's
+   `.visually-hidden { overflow: hidden !important }`, which leaves a 1px
+   box that scrolls and fails axe's scrollable-region-focusable. */
+pre.sourceCode.visually-hidden {
+  overflow: hidden !important;
+}
diff --git a/_extensions/quartoorg/scss/partials/_dark-rules.scss b/_extensions/quartoorg/scss/partials/_dark-rules.scss
new file mode 100644
index 0000000000..b9753c546f
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_dark-rules.scss
@@ -0,0 +1,109 @@
+
+/*Homepage custom css overrides */
+
+/* homepage hero link accessibiility hack to make contrast 4.5:1 */
+
+.hero-banner a:not(.btn) {
+color: #D1DBE5;
+}
+
+.hero-banner .btn-action-primary, .get-started .btn-action-primary {
+  background-color: #f8f8f8;
+  border: 1px solid #f8f8f8;
+  color: $dark;
+}
+
+.hero-banner .btn-action-primary:hover, .get-started .btn-action-primary:hover {
+  background-color: #D1DBE5;
+  border: 1px solid #f8f8f8;
+  color: $dark;
+}
+
+.hero-banner .btn-secondary {
+  background-color: transparent;
+  border: 1px solid #f8f8f8;
+  color: #f8f8f8;
+}
+
+.hero-banner .btn-secondary:hover {
+  background-color: #305775;
+}
+
+.hello-quarto-banner .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
+  border: none;
+  border-bottom: 2px solid #ffffff !important;
+  color: #ffffff !important;
+  background-color: transparent;  
+}
+
+.hello-quarto-banner .nav-link {
+  color: #ffffff !important;
+}
+
+.bg-color {
+  background-color: $body-bg;
+}
+
+.hello-output {
+  border: 1px solid $gray-700;
+}
+
+
+body.quarto-light .alt-background {
+  background-color: #17212B;
+  border-top: 1px solid #dee2e6;
+  border-bottom: 1px solid #dee2e6;
+}
+
+
+.layout-example {
+  background: $gray-700;
+}
+
+.code-with-filename .code-with-filename-file pre {
+  color: #ddd;
+}
+
+pre code {
+  color: $body-color;
+}
+
+figcaption code,
+dl code,
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code {
+  background-color: $mono-background-color;
+}
+
+// Quarto fades callout headers (opacity 85%, or 75% for the simple style),
+// which pulls title text and code below 4.5:1.
+.callout.callout-style-default > div.callout-header,
+.callout.callout-style-simple > div.callout-header {
+  opacity: 1;
+}
+
+details > summary {
+  color: $text-muted;
+}
+
+#quarto-announcement {
+  padding: 1em;
+  font-size: 1em;
+  font-weight: bold;
+  color: $white;
+  background-color: #447099; 
+}
+
+#quarto-announcement a {
+  color: $white;
+}
+
+/*Footer Posit logo color for dark mode*/
+
+img.footer-logo {
+  color: #ffffff;
+}
diff --git a/_extensions/quartoorg/scss/partials/_downloads.scss b/_extensions/quartoorg/scss/partials/_downloads.scss
new file mode 100644
index 0000000000..fe3bc57edf
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_downloads.scss
@@ -0,0 +1,47 @@
+.download-button {
+  margin-top: 1em;
+}
+
+.download-table {
+  margin-bottom: 2em;  
+}
+
+.download-table p {
+  margin-bottom: 0;
+}
+
+/* The cell holds the full hash; only the rendering truncates (ellipsis).
+   Screen readers, copying, and find-in-page all see the complete value,
+   and the header links to checksums.txt for the full values. */
+.download-table .checksum {
+  font-size: .775em;
+  padding-top: 4px;
+  max-width: 9ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.download-button {
+  display:flex;
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
+
+.download-button .secondary {
+  font-size: .775em;
+  margin-bottom: 0;
+}
+
+.download-button .container {
+  display: flex;
+  padding-left: 10px;
+  padding-right: 40px;
+}
+
+.download-button .icon-container {
+  fill: white;
+  width: 30px;
+  margin-right: 15px;
+}
+
diff --git a/_extensions/quartoorg/scss/partials/_embeds.scss b/_extensions/quartoorg/scss/partials/_embeds.scss
new file mode 100644
index 0000000000..e68ac90369
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_embeds.scss
@@ -0,0 +1,19 @@
+iframe.reveal-demo {
+  width: 100%;
+  height: 350px;
+  outline: none;
+}
+
+
+.slide-deck {
+  border: 3px solid #dee2e6;
+  width: 100%;
+  height: 475px;
+}
+
+@media only screen and (max-width: 600px) {
+ .slide-deck {
+    height: 400px;
+  }
+}
+
diff --git a/_extensions/quartoorg/scss/partials/_figures.scss b/_extensions/quartoorg/scss/partials/_figures.scss
new file mode 100644
index 0000000000..ede1358089
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_figures.scss
@@ -0,0 +1,25 @@
+
+
+.download-text {
+  font-size: 1.1em;
+  font-weight: 500;  
+}
+
+.preview-image-grid {
+  gap: .75em;
+}
+
+.preview-image-grid p {
+  margin-bottom: 0;
+}
+
+.preview-image-label {
+  text-align: center;
+  font-size: .75em;
+  font-weight: 600;
+}
+
+.illustration {
+  border: 1px solid #dee2e6;
+}
+
diff --git a/index.css b/_extensions/quartoorg/scss/partials/_home.scss
similarity index 52%
rename from index.css
rename to _extensions/quartoorg/scss/partials/_home.scss
index daabc9a205..a9ef95d8f7 100644
--- a/index.css
+++ b/_extensions/quartoorg/scss/partials/_home.scss
@@ -1,16 +1,16 @@
 
 /* Quarto pads #quarto-content > *; pass that padding through the role="main" wrapper */
-#quarto-content > [role="main"] {
+body.quarto-home #quarto-content > [role="main"] {
   padding-top: 0;
 }
 
 @media (min-width: 992px) {
-#quarto-content > [role="main"] > * {
+body.quarto-home #quarto-content > [role="main"] > * {
   padding-top: 14px;
 }
 }
 
-.content-block {
+body.quarto-home .content-block {
   padding-top: 20px;
   padding-bottom: 10px;
   margin-left: 30px;
@@ -19,186 +19,186 @@
 
 
 @media(min-width: 900px) {
-.content-block {
+body.quarto-home .content-block {
   margin-left: 50px;
   margin-right: 50px;
 }
 }
 
 @media (min-width: 1200px) {
-.content-block {
+body.quarto-home .content-block {
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
 }
 }
 
-.hero-banner {
+body.quarto-home .hero-banner {
   position: relative;
   display: flex;
   justify-content: center;
 }
 
-body.quarto-light .hero-banner {
+body.quarto-home.quarto-light .hero-banner {
   background-color: rgb(240,245,249);
 }
 
-body.quarto-dark .hero-banner {
+body.quarto-home.quarto-dark .hero-banner {
   background-color: #1C2F3D;
 }
 
-.hero-banner h1 {
+body.quarto-home .hero-banner h1 {
   font-size: 2.5rem;
 }
 
-body.quarto-light .hero-banner h1 {
+body.quarto-home.quarto-light .hero-banner h1 {
   color: #39729E;
 }
 
-body.quarto-dark .hero-banner h1 {
+body.quarto-home.quarto-dark .hero-banner h1 {
   color: #b9d2eE;
 }
 
-.hero-banner .hero-image {
+body.quarto-home .hero-banner .hero-image {
   position: absolute;
   display: none;
   height: auto;
 }
 
-.hero-banner .content-block {
+body.quarto-home .hero-banner .content-block {
   display: flex;
   flex-direction: row;
 }
 
-.hero-banner .content-block .hero-text {
+body.quarto-home .hero-banner .content-block .hero-text {
   width: 65%;
 }
 
-.hero-banner .content-block .hero-animation {
+body.quarto-home .hero-banner .content-block .hero-animation {
   margin-left: 40px;
   margin-top: 45px;
   width: 350px;
   height: 455px;
 }
 
-.hero-banner .content-block .hero-animation video {
+body.quarto-home .hero-banner .content-block .hero-animation video {
   width: 350px;
   height: 455px;
 }
 
 @media (min-width: 1000px) {
-.hero-banner .hero-image {
+body.quarto-home .hero-banner .hero-image {
   display: initial;
   width: 270px;
 }
 }
 
 @media (min-width: 1200px) {
-.hero-banner .hero-image {
+body.quarto-home .hero-banner .hero-image {
   width: 340px;
 }
 }
 
 @media (min-width: 1400px) {
-.hero-banner .hero-image {
+body.quarto-home .hero-banner .hero-image {
   width: 440px;
 }
 }
 
-.hero-banner .hero-image p {
+body.quarto-home .hero-banner .hero-image p {
   margin-bottom: 0;
 }
 
-.hero-banner .hero-image-left {
+body.quarto-home .hero-banner .hero-image-left {
   left: 0;
   bottom: 0;
 }
 
-.hero-banner .hero-image-right {
+body.quarto-home .hero-banner .hero-image-right {
   right: 0;
   bottom: 0;
 }
 
 
-.hero-banner .content-block {
+body.quarto-home .hero-banner .content-block {
   z-index: 2;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hero-banner .content-block {
+  body.quarto-home .hero-banner .content-block {
     max-width: 660px;
   }
-  .hero-banner .content-block .hero-text {
+  body.quarto-home .hero-banner .content-block .hero-text {
     width: 100%;
   }
   
-  .hero-banner .content-block .hero-animation {
+  body.quarto-home .hero-banner .content-block .hero-animation {
     display: none;
   }
 }
 
 @media (max-width: 1200px)  {
-  .hero-banner .content-block {
+  body.quarto-home .hero-banner .content-block {
     max-width: 660px;
   }
-  .hero-banner .content-block .hero-text {
+  body.quarto-home .hero-banner .content-block .hero-text {
     width: 100%;
   }
   
-  .hero-banner .content-block .hero-animation {
+  body.quarto-home .hero-banner .content-block .hero-animation {
     display: none;
   }
 }
 
 
-.hero-banner a:not(.btn) {
+body.quarto-home .hero-banner a:not(.btn) {
   text-decoration: underline;
   text-underline-offset: 3px;
 }
 
-.hero-banner .h3 {
+body.quarto-home .hero-banner .h3 {
   margin-top: 1.3rem;
   margin-bottom: 1.3rem;
 }
 
-.hero-banner h4 {
+body.quarto-home .hero-banner h4 {
   margin-top: 0;
 }
 
-.hero-banner a[role="button"] {
+body.quarto-home .hero-banner a[role="button"] {
   margin-bottom: 0;
 }
 
-.hero-banner ul {
+body.quarto-home .hero-banner ul {
   padding-inline-start: 21px;
   font-size: 1.1rem;
 }
 
-.hero-banner ul li {
+body.quarto-home .hero-banner ul li {
   padding-bottom: 0.4rem;
 }
 
 
-body.quarto-light .alt-background {
+body.quarto-home.quarto-light .alt-background {
   background-color: rgb(247,249,251);
   border-top: 1px solid #dee2e6;
   border-bottom: 1px solid #dee2e6;
 }
 
-body.quarto-dark .alt-background {
+body.quarto-home.quarto-dark .alt-background {
     background-color: #17212B;
   border-top: 1px solid #151515;
   border-bottom: 1px solid #151515;
 }
 
-.hello-quarto {
+body.quarto-home .hello-quarto {
   padding-bottom: 1rem;
 }
 
 /* "Hello, Quarto" is an h2 (the page has one h1) styled as the h1 it used to be.
    section > h2:first-child matches the specificity of Quarto's
    #quarto-content section:first-of-type h2:first-of-type, and wins by order. */
-#quarto-content .hello-quarto-banner section > h2:first-child {
+body.quarto-home #quarto-content .hello-quarto-banner section > h2:first-child {
   font-size: calc(1.325rem + 0.9vw);
   margin-top: 0;
   margin-bottom: 0.5rem;
@@ -207,87 +207,87 @@ body.quarto-dark .alt-background {
 }
 
 @media (min-width: 1200px) {
-#quarto-content .hello-quarto-banner section > h2:first-child {
+body.quarto-home #quarto-content .hello-quarto-banner section > h2:first-child {
   font-size: 2rem;
 }
 }
 
 @media (min-width: 715px) {
-.hello-quarto-banner {
+body.quarto-home .hello-quarto-banner {
   display: inline-flex;
 }
 
-.hello-quarto-banner h2 {
+body.quarto-home .hello-quarto-banner h2 {
   margin-right: 40px;
 }
 }
 
-.hello-quarto-banner .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
+body.quarto-home .hello-quarto-banner .nav-pills .nav-link.active, body.quarto-home .nav-pills .show>.nav-link {
   border: none;
   border-bottom: 2px solid #39729E;
   color: #39729E;
   background-color: transparent;
 }
 
-.hello-quarto-banner .nav-pills button {
+body.quarto-home .hello-quarto-banner .nav-pills button {
   width: 125px;
 }
 @media (max-width: 560px) { 
-  .hello-quarto-banner .nav-pills button {
+  body.quarto-home .hello-quarto-banner .nav-pills button {
     width: unset;
   }
 }
-.hello-quarto .tab-content {
+body.quarto-home .hello-quarto .tab-content {
   border: none;
   padding: 0;
 }
 
-body.quarto-light .hello-quarto .tab-content {
+body.quarto-home.quarto-light .hello-quarto .tab-content {
   color: rgb(84, 85, 85);
 }
 
-body.quarto-dark .hello-quarto .tab-content {
+body.quarto-home.quarto-dark .hello-quarto .tab-content {
   color: rgb(200, 200, 200);
 }
 
-.hello-quarto .tab-content p {
+body.quarto-home .hello-quarto .tab-content p {
   font-size: 1.1em;
 }
 
-body.quarto-light .hello-quarto div.sourceCode {
+body.quarto-home.quarto-light .hello-quarto div.sourceCode {
   background-color: white;
   border: 1px solid #dee2e6;
 }
 
-body.quarto-dark .hello-quarto div.sourceCode {
+body.quarto-home.quarto-dark .hello-quarto div.sourceCode {
   background-color: #151515;
   border: 1px solid #3b3f47;
 }
 
-.features {
+body.quarto-home .features {
   padding-bottom: 2em;
 }
 
-.feature {
+body.quarto-home .feature {
   margin-top: 20px;
 }
 
 @media (min-width: 800px) { 
-.features {
+body.quarto-home .features {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 0 0 0 -30px;
   width: calc(100% + 30px);
 }
-.feature {
+body.quarto-home .feature {
   width: calc(33% - 30px);
   margin: 20px 0 0 30px;
 }
 }
 
 /* Feature titles are h2s styled as the h3s they used to be (selector as above) */
-#quarto-content section.feature > h2:first-child {
+body.quarto-home #quarto-content section.feature > h2:first-child {
   font-size: calc(1.27rem + 0.24vw);
   opacity: 0.9;
   margin-top: 0;
@@ -297,41 +297,41 @@ body.quarto-dark .hello-quarto div.sourceCode {
 }
 
 @media (min-width: 1200px) {
-#quarto-content section.feature > h2:first-child {
+body.quarto-home #quarto-content section.feature > h2:first-child {
   font-size: 1.45rem;
 }
 }
 
-.feature p:first-of-type {
+body.quarto-home .feature p:first-of-type {
   margin-bottom: 0.2rem;
 }
 
-body.quarto-light .feature p:first-of-type {
+body.quarto-home.quarto-light .feature p:first-of-type {
   color: rgb(84, 85, 85);
 }
 
-body.quarto-dark .feature p:first-of-type {
+body.quarto-home.quarto-dark .feature p:first-of-type {
   color: rgb(200, 200, 200);
 }
 
-.get-started {
+body.quarto-home .get-started {
    text-align: center;
 }
 
-.get-started h3 {
+body.quarto-home .get-started h3 {
    margin-top: 1rem;
    margin-bottom: 2rem;
 }
 
-nav.page-navigation {
+body.quarto-home nav.page-navigation {
   display: none;
 }
 
-.nav-footer {
+body.quarto-home .nav-footer {
   border-top: none !important; 
 }
 
-.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
+body.quarto-home .nav-pills .nav-link.active, body.quarto-home .nav-pills .show>.nav-link {
   color: #fff;
   background-color: #ff7518;
 }
diff --git a/_extensions/quartoorg/scss/partials/_light-rules.scss b/_extensions/quartoorg/scss/partials/_light-rules.scss
new file mode 100644
index 0000000000..3a16f547b2
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_light-rules.scss
@@ -0,0 +1,48 @@
+
+// Quarto dims appendix content (footnotes, citation, reuse) to opacity .9,
+// which fades $link-color to an effective #4d80a8 = 4.22:1 on white — a WCAG
+// AA 1.4.3 failure (axe color-contrast-733538). Undo the fade; selectors
+// mirror Quarto's so this wins by cascade order in the light theme, while
+// the dark stylesheet (loaded after this one) re-asserts Quarto's .9 —
+// the dark link color passes even faded. Remove if quarto-cli fixes
+// this upstream.
+#quarto-appendix.default section {
+  *[role="doc-endnotes"],
+  > *:not(a) {
+    opacity: 1;
+  }
+}
+
+.layout-example {
+  background: $gray-600;
+  color: $white;
+  text-align: center;
+  margin-bottom: 1em;
+  font-family: $font-family-monospace;
+  font-size: .875em;
+  font-weight: 600;
+  padding-top: 1em;
+  border-radius: 3px;
+}
+
+.left {
+  text-align: left;
+  padding-left: 1em;
+}
+
+.right {
+  text-align: right;
+  padding-right: 1em;
+}
+
+#quarto-announcement {
+  padding: 1em;
+  font-size: 1em;
+  font-weight: bold;
+  color: $white;
+  background-color: #447099; 
+}
+
+#quarto-announcement a {
+  color: $white;
+}
diff --git a/_extensions/quartoorg/scss/partials/_navbar.scss b/_extensions/quartoorg/scss/partials/_navbar.scss
new file mode 100644
index 0000000000..9bac8f1977
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_navbar.scss
@@ -0,0 +1,42 @@
+
+@media (min-width: 1020px) {
+.navbar-brand-container {
+  margin-right: 1em;
+}
+}
+
+
+
+@media (max-width: 1060px) and (min-width: 991.98px) {
+
+#navbarCollapse ul:last-of-type a.nav-link {
+  padding-left: .25em;
+  padding-right: .25em;
+}
+
+.navbar #quarto-search {
+  margin-left: .1em;
+}
+
+.navbar .bi-twitter,
+.navbar .bi-github,
+.navbar .bi-rss
+ {
+  font-size: .8em;
+}
+}
+
+
+@media (min-width: 991.98px) {
+body.quarto-light #quarto-header {
+  border-bottom: 1px solid #dee2e6;
+}
+body.quarto-dark #quarto-header {
+  border-bottom: 1px solid #3b3f47;
+}
+}
+
+.navbar-brand > img {
+  max-height: 36px;
+}
+
diff --git a/_extensions/page-chooser/page-chooser.css b/_extensions/quartoorg/scss/partials/_page-chooser.scss
similarity index 70%
rename from _extensions/page-chooser/page-chooser.css
rename to _extensions/quartoorg/scss/partials/_page-chooser.scss
index a2f23e774e..4a2a6b9eae 100644
--- a/_extensions/page-chooser/page-chooser.css
+++ b/_extensions/quartoorg/scss/partials/_page-chooser.scss
@@ -1,17 +1,10 @@
-/* page-chooser: plain CSS using Bootstrap custom properties, so it works in
-   light and dark themes and can be renamed to an SCSS partial unchanged. */
+/* Pairs with shortcodes/page-chooser.lua. Uses Bootstrap custom properties,
+   so the same rules work in the light and dark themes. */
 
 .page-chooser {
   margin-bottom: 1rem;
 }
 
-/* The dark theme's --bs-border-color is near-invisible (1.08:1), so keep
-   #2237's border until the theme's $border-color is fixed. Light mode uses
-   --bs-border-color as is. */
-body.quarto-dark .page-chooser {
-  --page-chooser-border: #6c757d;
-}
-
 .page-chooser .page-chooser-label {
   margin-top: 1rem;
   margin-bottom: 0.25rem;
@@ -35,7 +28,7 @@ body.quarto-dark .page-chooser {
   font-size: 0.8em;
   color: var(--bs-body-color);
   text-decoration: none;
-  border: 1px solid var(--page-chooser-border, var(--bs-border-color));
+  border: 1px solid var(--bs-border-color);
   border-radius: 10px;
 }
 
diff --git a/_extensions/quartoorg/scss/partials/_site.scss b/_extensions/quartoorg/scss/partials/_site.scss
new file mode 100644
index 0000000000..2b729fdc25
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_site.scss
@@ -0,0 +1,14 @@
+// Site rules shared by the light and dark themes, in the order the original
+// stylesheets loaded: styles.css, then index.css.
+@import "navbar";
+@import "content";
+@import "downloads";
+@import "embeds";
+@import "cards";
+@import "buttons";
+@import "tools-tabset";
+@import "page-chooser";
+@import "tool-links";
+@import "figures";
+@import "color-box";
+@import "home";
diff --git a/_extensions/quartoorg/scss/partials/_tool-links.scss b/_extensions/quartoorg/scss/partials/_tool-links.scss
new file mode 100644
index 0000000000..e589c4b293
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_tool-links.scss
@@ -0,0 +1,41 @@
+/* Tool tiles on the get-started and manuscripts tutorial pages. */
+
+.tool {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.tool a {
+  width: 100px;
+  text-align: center;
+  color: var(--bs-body-color);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 10px;
+  margin-right: 20px;
+  margin-bottom: 0;
+  margin-top: 10px;
+  font-size: 0.85em;
+}
+
+.tool a:hover {
+  color: var(--bs-body-color);
+  border-color: var(--bs-link-color);
+  background-color: transparent;
+}
+
+/* .btn's focus style is a near-white shadow; restore a visible ring. */
+.tool a:focus-visible {
+  outline: 2px solid var(--bs-link-color);
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+.tool a img {
+  display: block;
+  width: 67px;
+  height: 67px;
+  margin: auto;
+  margin-bottom: 5px;
+}
diff --git a/_extensions/quartoorg/scss/partials/_tools-tabset.scss b/_extensions/quartoorg/scss/partials/_tools-tabset.scss
new file mode 100644
index 0000000000..82d3dca3c6
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_tools-tabset.scss
@@ -0,0 +1,59 @@
+.panel-tabset[data-group="tools-tabset"] .choose-your-tool-row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.panel-tabset[data-group="tools-tabset"] .choose-your-tool {
+  max-width: 90px;
+  margin-right: 25px;
+  margin-top: 30px;
+  margin-bottom: 0.5rem;
+  font-weight: 300;
+  font-size: 1.3rem;
+  line-height: 1.2;
+  text-align: left;
+}
+
+.panel-tabset[data-group="tools-tabset"] .tab-content {
+  border: none;
+  padding-left: 5px;
+}
+
+.panel-tabset[data-group="tools-tabset"] .nav-tabs {
+  border-bottom: none;
+}
+
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link {
+  text-align: center;
+  margin-right: 10px;
+  margin-top: 10px;
+  color: inherit;
+  width: 102px;
+  font-size: 0.8em;
+}
+
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link, 
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active, 
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
+  border: 1px solid  rgb(222, 226, 230);
+  border-radius: 10px;
+}
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link:hover {
+   border-color: rgb(80,146,221);
+   border-width: 1px;
+} 
+
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active, 
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
+  border-color: rgb(80,146,221);
+  /* Second pixel as a shadow, so selecting a tab doesn't resize it. */
+  box-shadow: inset 0 0 0 1px rgb(80,146,221);
+}
+
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link img {
+  width: 65px;
+  height: 65px;
+  display: block;
+  margin-bottom: 2px;
+}
+
diff --git a/theme-prerelease-banner.scss b/_extensions/quartoorg/scss/prerelease-banner.scss
similarity index 100%
rename from theme-prerelease-banner.scss
rename to _extensions/quartoorg/scss/prerelease-banner.scss
diff --git a/_extensions/quartoorg/scss/quartoorg-dark.scss b/_extensions/quartoorg/scss/quartoorg-dark.scss
new file mode 100644
index 0000000000..12700985c3
--- /dev/null
+++ b/_extensions/quartoorg/scss/quartoorg-dark.scss
@@ -0,0 +1,85 @@
+/*-- scss:defaults --*/
+
+$blue: #447099;
+$red: #D44000;
+$orange: #EE6331;
+$yellow: #E7B10A;
+$green: #72994E;
+$teal: #419599;
+$cyan: #75A8D9;
+$black: #000;
+$white: #fff;
+$gray: #404041;
+$gray-dark: #343a40;
+$gray-100: #f8f8f8;
+$gray-200: #C2C2C4;
+$gray-300: #949494;
+$gray-400: #707073;
+$gray-500: #495057;
+$gray-600: #404041;
+$gray-700: #333333;
+$gray-800: #242426;
+$gray-900: #151515;
+$default: $gray-900;
+$primary: $cyan;
+$secondary: $gray-400;
+$success: $green;
+$info: $yellow;
+$warning: $orange;
+$danger: $red;
+
+
+
+// Base document colors
+$body-bg: $gray-900;
+$body-color: $gray-100;
+$link-color: $cyan;
+
+// Bootstrap's own $pre-color default (#000, meant for a light background)
+// is hardcoded regardless of theme -- inherit so bare <pre> elements (e.g.
+// Quarto's own .cell-decorator notebook-view prompts) stay legible here.
+// Bootswatch's dark themes (darkly, cyborg) carry the same override.
+$pre-color: inherit;
+
+$light: rgb(32.4,32.4,34.2);
+
+// Navigation element colors
+$footer-bg: $gray-900;
+$navbar-bg: shade-color($gray-800, 10%);
+ 
+
+// Code blocks
+$code-block-bg-alpha: -.9;
+
+// Bootstrap popovers
+$popover-bg: #242424;
+
+// Bootstrap inputs
+$input-bg: #242424;
+$dropdown-bg: $body-bg;
+$dropdown-color: $body-color;
+$dropdown-link-color: $body-color;
+$dropdown-link-hover-bg: $gray-600;
+$dropdown-link-hover-color: #eee;
+$nav-tabs-link-hover-border-color: rgb(80, 80, 80);
+
+// Borders need 3:1 against the page background (WCAG 1.4.11);
+// $gray-400 on $gray-900 is 3.70:1.
+$border-color: $gray-400;
+
+$mono-background-color: rgba(0,0,0,0);
+// Quarto defaults $code-bg to $gray-100, which is light here.
+$code-bg: $body-bg;
+$code-color: rgb(192, 128, 216);
+$nav-tabs-link-active-color: $body-color;
+$toc-inactive-border: rgba($gray-800, 0.5);
+$input-text-background-color: $gray-800;
+$input-group-addon-bg: $gray-800;
+$carousel-dark-caption-color: $body-color;
+$pagination-disabled-bg: rgb(24,24,24);
+
+$text-muted: lighten(#6a737b, 20%);
+
+/*-- scss:rules --*/
+@import "partials/dark-rules";
+@import "partials/site";
diff --git a/_extensions/quartoorg/scss/quartoorg.scss b/_extensions/quartoorg/scss/quartoorg.scss
new file mode 100644
index 0000000000..3ae6cd3dd5
--- /dev/null
+++ b/_extensions/quartoorg/scss/quartoorg.scss
@@ -0,0 +1,28 @@
+/*-- scss:defaults --*/
+$link-color: #39729E;
+$text-muted: #6a737b;
+
+// Align light mode with the site's brand blue (quartoorg-dark.scss $blue).
+// This also clears the white-on-primary contrast failures on cosmo's
+// #2780e3 (3.97:1): .btn-primary, .text-bg-primary badges, and Quarto's
+// notebook-preview header, whose h6 Quarto dims to opacity .9 (axe
+// color-contrast-b09c0e, -50505e). White on #447099 is 5.22:1; the faded
+// h6 is 4.59:1.
+$primary: #447099;
+
+// Quarto's body-secondary mixin (blockquotes, captions, asides, header
+// section numbers) defaults to theme-dim($body-color, 25%) = #6d7a86, only
+// 4.39:1 on white — a WCAG AA 1.4.3 failure (axe color-contrast-7ed054).
+// Defining $body-secondary makes the mixin use it instead; $text-muted is
+// 4.83:1.
+$body-secondary: $text-muted;
+
+// Code-block background: the darkest tint of the site's cosmo blue-gray that
+// still keeps every a11y-light syntax color at WCAG AA (>=4.5:1). a11y-light's
+// palette is tuned for a near-white background, so this stays pale; one step
+// darker (#eef1f4) drops the worst token (red #d91e18) below 4.5:1.
+$code-block-bg: #eff2f5;
+
+/*-- scss:rules --*/
+@import "partials/light-rules";
+@import "partials/site";
diff --git a/_extensions/page-chooser/page-chooser.js b/_extensions/quartoorg/shortcodes/page-chooser.js
similarity index 100%
rename from _extensions/page-chooser/page-chooser.js
rename to _extensions/quartoorg/shortcodes/page-chooser.js
diff --git a/_extensions/page-chooser/page-chooser.lua b/_extensions/quartoorg/shortcodes/page-chooser.lua
similarity index 98%
rename from _extensions/page-chooser/page-chooser.lua
rename to _extensions/quartoorg/shortcodes/page-chooser.lua
index ac60477e14..5d983eda5d 100644
--- a/_extensions/page-chooser/page-chooser.lua
+++ b/_extensions/quartoorg/shortcodes/page-chooser.lua
@@ -49,7 +49,6 @@ return {
     quarto.doc.add_html_dependency({
       name = "page-chooser",
       version = "1.0.0",
-      stylesheets = { "page-chooser.css" },
       scripts = { { path = "page-chooser.js", afterBody = true } },
     })
 
diff --git a/_freeze/docs/authoring/article-layout/execute-results/html.json b/_freeze/docs/authoring/article-layout/execute-results/html.json
index 9071d1356b..a57d08ae2f 100644
--- a/_freeze/docs/authoring/article-layout/execute-results/html.json
+++ b/_freeze/docs/authoring/article-layout/execute-results/html.json
@@ -1,8 +1,8 @@
 {
-  "hash": "f6a71b27a3f61ef6e86786b0bc2737b5",
+  "hash": "d8d998708c872d93302316ee2555bbe3",
   "result": {
     "engine": "knitr",
-    "markdown": "---\ntitle: \"Article Layout\"\nformat: html\nreference-location: margin\ncitation-location: margin\naliases:\n  - page-layout.html\n---\n\n## Overview\n\nQuarto supports a variety of page layout options that enable you to author content that:\n\n-   Fills the main content region\n-   Overflows the content region\n-   Spans the entire page\n-   Occupies the document margin\n-   Uses landscape mode in paginated formats\n\nQuarto uses the concept of columns to describe page layout (e.g. the \"body\" column, the \"margin\" column, etc.). Below we'll describe how to arrange content into these columns. If you need to adjust the widths of the columns, see [Page Layout - Grid Customization](/docs/output-formats/page-layout.qmd#grid-customization).\n\nAll of the layout capabilities described in this document work for HTML and Typst output. Many also work for PDF and LaTeX output, though with some differences. See [Typst Layout] and [PDF/LaTeX Layout] for format-specific details.\n\n## Body Column\n\nBy default, elements are positioned in the body of the document and are allowed to span the content of the document, like the below.\n\n::: {.layout-example .column-body}\n.column-body\n:::\n\nBut if you'd like, you can extend content slightly outside the bounds of the body by creating a div with the .`column-body-outset` class. For example:\n\n``` markdown\n:::{.column-body-outset}\nOutset content...\n:::\n```\n\n::: {.layout-example .column-body-outset}\n.column-body-outset\n:::\n\n## Page Column\n\nIf you need even more space for your content, you can use the `.column-page` class to make the content much wider, though stopping short of extending across the whole document.\n\n::: {.layout-example .column-page}\n.column-page\n:::\n\nFor example, to create a wider image, you could use:\n\n``` markdown\n:::{.column-page}\n![](images/elephant.jpg)\n:::\n```\n\n::: column-page\n![](images/elephant.jpg){fig-alt=\"Three walking elephants in silhouette against the backdrop of a sunset.\"}\n:::\n\nFor computational output, you can specify the page column in your code cell options. For example:\n\n\n::: {.cell .column-page}\n\n````{.cell-code}\n```{{r}}\n#| column: page\n\nknitr::kable(\n  mtcars[1:6, 1:10]\n)\n```\n````\n\n::: {.cell-output-display}\n\n\n|                  |  mpg| cyl| disp|  hp| drat|    wt|  qsec| vs| am| gear|\n|:-----------------|----:|---:|----:|---:|----:|-----:|-----:|--:|--:|----:|\n|Mazda RX4         | 21.0|   6|  160| 110| 3.90| 2.620| 16.46|  0|  1|    4|\n|Mazda RX4 Wag     | 21.0|   6|  160| 110| 3.90| 2.875| 17.02|  0|  1|    4|\n|Datsun 710        | 22.8|   4|  108|  93| 3.85| 2.320| 18.61|  1|  1|    4|\n|Hornet 4 Drive    | 21.4|   6|  258| 110| 3.08| 3.215| 19.44|  1|  0|    3|\n|Hornet Sportabout | 18.7|   8|  360| 175| 3.15| 3.440| 17.02|  0|  0|    3|\n|Valiant           | 18.1|   6|  225| 105| 2.76| 3.460| 20.22|  1|  0|    3|\n\n\n:::\n:::\n\n\nIn addition, you can use `.column-page-inset` to inset the element from the page slightly, like so:\n\n::: {.layout-example .column-page-inset}\n.column-page-inset\n:::\n\n## Screen Column\n\nYou can have content span the full width of the page with no margin (full bleed). For this, use the `.column-screen` class or specify `column: screen` on a code cell. For example:\n\n``` md\n::: {.column-screen}\n![A full screen image](/image.png)\n:::\n```\n\n::: {.layout-example .column-screen}\n.column-screen\n:::\n\nThe following code displays a Leaflet map across the whole page.\n\n\n::: {.cell .column-screen}\n\n````{.cell-code}\n```{{r}}\n#| column: screen\n\nlibrary(leaflet)\nleaflet() %>%\n  addTiles() %>%  # Add default OpenStreetMap map tiles\n  addMarkers(lng=174.768, lat=-36.852, popup=\"The birthplace of R\")\n```\n````\n\n::: {.cell-output-display}\n\n```{=html}\n<div class=\"leaflet html-widget html-fill-item\" id=\"htmlwidget-7516dbb076407f0f96bb\" style=\"width:100%;height:464px;\"></div>\n<script type=\"application/json\" data-for=\"htmlwidget-7516dbb076407f0f96bb\">{\"x\":{\"options\":{\"crs\":{\"crsClass\":\"L.CRS.EPSG3857\",\"code\":null,\"proj4def\":null,\"projectedBounds\":null,\"options\":{}}},\"calls\":[{\"method\":\"addTiles\",\"args\":[\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",null,null,{\"minZoom\":0,\"maxZoom\":18,\"tileSize\":256,\"subdomains\":\"abc\",\"errorTileUrl\":\"\",\"tms\":false,\"noWrap\":false,\"zoomOffset\":0,\"zoomReverse\":false,\"opacity\":1,\"zIndex\":1,\"detectRetina\":false,\"attribution\":\"&copy; <a href=\\\"https://openstreetmap.org/copyright/\\\">OpenStreetMap<\\/a>,  <a href=\\\"https://opendatacommons.org/licenses/odbl/\\\">ODbL<\\/a>\"}]},{\"method\":\"addMarkers\",\"args\":[-36.852,174.768,null,null,null,{\"interactive\":true,\"draggable\":false,\"keyboard\":true,\"title\":\"\",\"alt\":\"\",\"zIndexOffset\":0,\"opacity\":1,\"riseOnHover\":false,\"riseOffset\":250},\"The birthplace of R\",null,null,null,null,{\"interactive\":false,\"permanent\":false,\"direction\":\"auto\",\"opacity\":1,\"offset\":[0,0],\"textsize\":\"10px\",\"textOnly\":false,\"className\":\"\",\"sticky\":true},null]}],\"limits\":{\"lat\":[-36.852,-36.852],\"lng\":[174.768,174.768]}},\"evals\":[],\"jsHooks\":[]}</script>\n```\n\n:::\n:::\n\n\n### Screen Inset\n\nIf you'd like a full width appearance, but would like to retain a margin, you can use inset or inset-shaded modifiers on the column. For example:\n\n``` md\n::: {.column-screen-inset}\n![A full screen image](/image.png)\n:::\n```\n\n::: {.layout-example .column-screen-inset}\n.column-screen-inset\n:::\n\nThe inset-shaded modifier results in a block spanning the full width but wrapped with a lightly shaded background. For example:\n\n\n::: {.cell .column-screen-inset-shaded}\n\n````{.cell-code}\n```{{r}}\n#| column: screen-inset-shaded\n\nlibrary(leaflet)\nleaflet() %>%\n  addTiles() %>%  # Add default OpenStreetMap map tiles\n  addMarkers(lng=174.768, lat=-36.852, popup=\"The birthplace of R\")\n```\n````\n\n::: {.cell-output-display}\n\n```{=html}\n<div class=\"leaflet html-widget html-fill-item\" id=\"htmlwidget-4069ae40db0c89d7b7ec\" style=\"width:100%;height:464px;\"></div>\n<script type=\"application/json\" data-for=\"htmlwidget-4069ae40db0c89d7b7ec\">{\"x\":{\"options\":{\"crs\":{\"crsClass\":\"L.CRS.EPSG3857\",\"code\":null,\"proj4def\":null,\"projectedBounds\":null,\"options\":{}}},\"calls\":[{\"method\":\"addTiles\",\"args\":[\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",null,null,{\"minZoom\":0,\"maxZoom\":18,\"tileSize\":256,\"subdomains\":\"abc\",\"errorTileUrl\":\"\",\"tms\":false,\"noWrap\":false,\"zoomOffset\":0,\"zoomReverse\":false,\"opacity\":1,\"zIndex\":1,\"detectRetina\":false,\"attribution\":\"&copy; <a href=\\\"https://openstreetmap.org/copyright/\\\">OpenStreetMap<\\/a>,  <a href=\\\"https://opendatacommons.org/licenses/odbl/\\\">ODbL<\\/a>\"}]},{\"method\":\"addMarkers\",\"args\":[-36.852,174.768,null,null,null,{\"interactive\":true,\"draggable\":false,\"keyboard\":true,\"title\":\"\",\"alt\":\"\",\"zIndexOffset\":0,\"opacity\":1,\"riseOnHover\":false,\"riseOffset\":250},\"The birthplace of R\",null,null,null,null,{\"interactive\":false,\"permanent\":false,\"direction\":\"auto\",\"opacity\":1,\"offset\":[0,0],\"textsize\":\"10px\",\"textOnly\":false,\"className\":\"\",\"sticky\":true},null]}],\"limits\":{\"lat\":[-36.852,-36.852],\"lng\":[174.768,174.768]}},\"evals\":[],\"jsHooks\":[]}</script>\n```\n\n:::\n:::\n\n\nColumn layouts like `screen-inset-shaded` will work with advanced figure layout. For example, it is straightforward to create a multi column presentation of figures that spans the document:\n\n\n::: {.cell .column-screen-inset-shaded layout-nrow=\"1\"}\n\n````{.cell-code}\n```{{r}}\n#| column: screen-inset-shaded\n#| layout-nrow: 1\n#| fig-alt:\n#|   - \"Scatterplot of stopping distance rising with car speed\"\n#|   - \"Scatterplot matrix of the five iris variables\"\n#|   - \"Scatterplot of vapor pressure rising steeply with temperature\"\n\nplot(cars)\nplot(iris)\nplot(pressure)\n```\n````\n\n::: {.cell-output-display}\n![](article-layout_files/figure-html/unnamed-chunk-4-1.png){fig-alt='Scatterplot of stopping distance rising with car speed' width=672}\n:::\n\n::: {.cell-output-display}\n![](article-layout_files/figure-html/unnamed-chunk-4-2.png){fig-alt='Scatterplot matrix of the five iris variables' width=672}\n:::\n\n::: {.cell-output-display}\n![](article-layout_files/figure-html/unnamed-chunk-4-3.png){fig-alt='Scatterplot of vapor pressure rising steeply with temperature' width=672}\n:::\n:::\n\n\n## Margin Content\n\nYou can place content within the right margin of Quarto document. For example, here we use the `.column-margin` class to place an image in the margin:\n\n``` md\n::: {.column-margin}\n![A margin image](image.png)\n:::\n```\n\n::: {.layout-example .column-margin style=\"margin-top: 18px;\"}\n.column-margin\n:::\n\nThis also works for text content:\n\n``` md\n::: {.column-margin}\nWe know from *the first fundamental theorem of calculus* that for $x$ in $[a, b]$:\n\n$$\\frac{d}{dx}\\left( \\int_{a}^{x} f(u)\\,du\\right)=f(x).$$\n:::\n```\n\n::: column-margin\nWe know from *the first fundamental theorem of calculus* that for $x$ in $[a, b]$:\n\n$$\\frac{d}{dx}\\left( \\int_{a}^{x} f(u)\\,du\\right)=f(x).$$\n:::\n\n### Margin Figures\n\nFigures that you create using code cells can be placed in the margin by using the `column: margin` code cell option. If the code produces more than one figure, each of the figures will be placed in the margin.\n\n\n::: {.cell .column-margin}\n\n````{.cell-code}\n```{{r}}\n#| label: fig-mtcars\n#| fig-cap: \"MPG vs horsepower, colored by transmission.\"\n#| fig-alt: \"Scatterplot showing fuel economy falling as horsepower rises\"\n#| column: margin\n\nlibrary(ggplot2)\nmtcars2 <- mtcars\nmtcars2$am <- factor(\n  mtcars$am, labels = c('automatic', 'manual')\n)\nggplot(mtcars2, aes(hp, mpg, color = am)) +\n  geom_point() +\n  geom_smooth(formula = y ~ x, method = \"loess\") +\n  theme(legend.position = 'bottom')\n```\n````\n\n::: {.cell-output-display}\n![MPG vs horsepower, colored by transmission.](article-layout_files/figure-html/fig-mtcars-1.png){#fig-mtcars fig-alt='Scatterplot showing fuel economy falling as horsepower rises' width=672}\n:::\n:::\n\n\n### Margin Tables\n\nYou can also place tables in the margin of your document by specifying `column: margin`.\n\n\n::: {.cell .column-margin}\n\n````{.cell-code}\n```{{r}}\n#| column: margin\n\nknitr::kable(\n  mtcars[1:6, 1:3]\n)\n```\n````\n\n::: {.cell-output-display}\n\n\n|                  |  mpg| cyl| disp|\n|:-----------------|----:|---:|----:|\n|Mazda RX4         | 21.0|   6|  160|\n|Mazda RX4 Wag     | 21.0|   6|  160|\n|Datsun 710        | 22.8|   4|  108|\n|Hornet 4 Drive    | 21.4|   6|  258|\n|Hornet Sportabout | 18.7|   8|  360|\n|Valiant           | 18.1|   6|  225|\n\n\n:::\n:::\n\n\n### Multiple Outputs\n\nYou can also target specific output types (for example, figures) to be placed in the margin. For example, the following code will render a table showing part of the `mtcars` dataset and produce a plot in the margin next to the table.\n\n\n::: {.cell .fig-column-margin}\n\n````{.cell-code}\n```{{r}}\n#| fig-column: margin\n#| fig-alt: \"Scatterplot showing fuel economy falling as horsepower rises\"\n\nmtcars2 <- mtcars\nmtcars2$am <- factor(\n  mtcars$am, labels = c('automatic', 'manual')\n)\n\nknitr::kable(\n  mtcars[1:6, 1:6]\n)\n\nlibrary(ggplot2)\nggplot(mtcars2, aes(hp, mpg, color = am)) +\n  geom_point() +\n  geom_smooth(formula = y ~ x, method = \"loess\") +\n  theme(legend.position = 'bottom')\n```\n````\n\n::: {.cell-output-display}\n\n\n|                  |  mpg| cyl| disp|  hp| drat|    wt|\n|:-----------------|----:|---:|----:|---:|----:|-----:|\n|Mazda RX4         | 21.0|   6|  160| 110| 3.90| 2.620|\n|Mazda RX4 Wag     | 21.0|   6|  160| 110| 3.90| 2.875|\n|Datsun 710        | 22.8|   4|  108|  93| 3.85| 2.320|\n|Hornet 4 Drive    | 21.4|   6|  258| 110| 3.08| 3.215|\n|Hornet Sportabout | 18.7|   8|  360| 175| 3.15| 3.440|\n|Valiant           | 18.1|   6|  225| 105| 2.76| 3.460|\n\n\n:::\n\n::: {.cell-output-display}\n![](article-layout_files/figure-html/unnamed-chunk-6-1.png){fig-alt='Scatterplot showing fuel economy falling as horsepower rises' width=672}\n:::\n:::\n\n\n## Page Breaks\n\nThe `pagebreak` [shortcode](shortcodes.qmd) enables you to insert a native pagebreak into a document (e.g. in LaTeX this would be a `\\newpage`, in MS Word a docx-native pagebreak, in HTML a `page-break-after: always` CSS directive, etc.):\n\n```{.markdown shortcodes=\"false\"}\npage 1\n\n{{< pagebreak >}}\n\npage 2\n```\n\nNative pagebreaks are supported for HTML, LaTeX, Context, MS Word, Open Document, ePub, and Typst (for other formats a form-feed character `\\f` is inserted).\n\n\n\n## Margin References\n\nFootnotes and the bibliography typically appear at the end of the document, but you can choose to have them placed in the margin by setting the following option[^1] in the document front matter:\n\n``` yaml\n---\nreference-location: margin\ncitation-location: margin\n---\n```\n\nWith these options set, footnotes and citations will (respectively) be automatically be placed in the margin of the document rather than the bottom of the page. As an example, when I cite @xie2018, the citation bibliography entry itself will now appear in the margin.\n\n### Asides\n\nAsides allow you to place content aside from the content it is placed in. Asides look like footnotes, but do not include the footnote mark (the superscript number). [This is a span that has the class `aside` which places it in the margin without a footnote number.]{.aside}\n\n``` markdown\n[This is a span that has the class `aside` which places it in the margin without a footnote number.]{.aside}\n```\n\n## Margin Captions\n\nFor figures and tables, you may leave the content in the body of the document while placing the caption in the margin of the document. Using `cap-location: margin` in a code cell or document front matter to control this. For example:\n\n\n::: {.cell .caption-margin}\n\n````{.cell-code}\n```{{r}}\n#| label: fig-cap-margin\n#| fig-cap: \"MPG vs horsepower, colored by transmission.\"\n#| fig-alt: \"Scatterplot showing fuel economy falling as horsepower rises\"\n#| cap-location: margin\n\nlibrary(ggplot2)\nmtcars2 <- mtcars\nmtcars2$am <- factor(\n  mtcars$am, labels = c('automatic', 'manual')\n)\nggplot(mtcars2, aes(hp, mpg, color = am)) +\n  geom_point() +\n  geom_smooth(formula = y ~ x, method = \"loess\") +\n  theme(legend.position = 'bottom')\n```\n````\n\n::: {.cell-output-display}\n![MPG vs horsepower, colored by transmission.](article-layout_files/figure-html/fig-cap-margin-1.png){#fig-cap-margin fig-alt='Scatterplot showing fuel economy falling as horsepower rises' width=672}\n:::\n:::\n\n\n## Overflowing Content\n\nYou can also extend content outside the body region on only the left or right side of the document by using the `right` and `left` versions of the `body`, `page`, and `screen` columns to layout your content. The `left` or `right` version of these columns are as follows:\n\n::: {.layout-example .column-body-outset-right .left}\n.column-body-outset-right\n:::\n\n::: {.layout-example .column-page-inset-right .left}\n.column-page-inset-right\n:::\n\n::: {.layout-example .column-page-right .left}\n.column-page-right\n:::\n\n::: {.layout-example .column-screen-inset-right .left}\n.column-screen-inset-right\n:::\n\n::: {.layout-example .column-screen-right .left}\n.column-screen-right\n:::\n\n::: {.layout-example .column-body-outset-left .right}\n.column-body-outset-left\n:::\n\n::: {.layout-example .column-page-inset-left .right}\n.column-page-inset-left\n:::\n\n::: {.layout-example .column-page-left .right}\n.column-page-left\n:::\n\n::: {.layout-example .column-screen-inset-left .right}\n.column-screen-inset-left\n:::\n\n::: {.layout-example .column-screen-left .right}\n.column-screen-left\n:::\n\nUse a div with one of the above classes to align content into one of the overflow regions. This also works using the `column` option of executable code cells:\n\n\n::: {.cell .column-screen-inset-right}\n\n````{.cell-code}\n```{{r}}\n#| column: screen-inset-right\n\nlibrary(leaflet)\nleaflet() %>%\n  addTiles() %>%  # Add default OpenStreetMap map tiles\n  addMarkers(lng=174.768, lat=-36.852, popup=\"The birthplace of R\")\n```\n````\n\n::: {.cell-output-display}\n\n```{=html}\n<div class=\"leaflet html-widget html-fill-item\" id=\"htmlwidget-3d0de06b68e0ad11eac6\" style=\"width:100%;height:464px;\"></div>\n<script type=\"application/json\" data-for=\"htmlwidget-3d0de06b68e0ad11eac6\">{\"x\":{\"options\":{\"crs\":{\"crsClass\":\"L.CRS.EPSG3857\",\"code\":null,\"proj4def\":null,\"projectedBounds\":null,\"options\":{}}},\"calls\":[{\"method\":\"addTiles\",\"args\":[\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",null,null,{\"minZoom\":0,\"maxZoom\":18,\"tileSize\":256,\"subdomains\":\"abc\",\"errorTileUrl\":\"\",\"tms\":false,\"noWrap\":false,\"zoomOffset\":0,\"zoomReverse\":false,\"opacity\":1,\"zIndex\":1,\"detectRetina\":false,\"attribution\":\"&copy; <a href=\\\"https://openstreetmap.org/copyright/\\\">OpenStreetMap<\\/a>,  <a href=\\\"https://opendatacommons.org/licenses/odbl/\\\">ODbL<\\/a>\"}]},{\"method\":\"addMarkers\",\"args\":[-36.852,174.768,null,null,null,{\"interactive\":true,\"draggable\":false,\"keyboard\":true,\"title\":\"\",\"alt\":\"\",\"zIndexOffset\":0,\"opacity\":1,\"riseOnHover\":false,\"riseOffset\":250},\"The birthplace of R\",null,null,null,null,{\"interactive\":false,\"permanent\":false,\"direction\":\"auto\",\"opacity\":1,\"offset\":[0,0],\"textsize\":\"10px\",\"textOnly\":false,\"className\":\"\",\"sticky\":true},null]}],\"limits\":{\"lat\":[-36.852,-36.852],\"lng\":[174.768,174.768]}},\"evals\":[],\"jsHooks\":[]}</script>\n```\n\n:::\n:::\n\n\n## Options Reference\n\n### Global Options\n\nSome layout options can be specified globally in document yaml. For example:\n\n``` yaml\n---\nfig-cap-location: margin\nreference-location: margin\n---\n```\n\nAll of the below options currently only support setting a value of `margin` which tells Quarto to place the corresponding element in the margin.\n\n+----------------------+---------------------------------------------------------------------------------------------------------+\n| Option               | Description                                                                                             |\n+======================+=========================================================================================================+\n| `reference-location` | Where to place footnotes. Defaults to `document`.[^2]\\                                                  |\n|                      | \\[`document` \\| `section` \\| `block` \\| `margin` \\]                                                     |\n+----------------------+---------------------------------------------------------------------------------------------------------+\n| `citation-location`  | Where to place citations. Defaults to `document`.\\                                                      |\n|                      | \\[`document` \\| `margin` \\]                                                                             |\n+----------------------+---------------------------------------------------------------------------------------------------------+\n| `cap-location`       | Where to place figure and table captions. Defaults to `bottom` for figures and `top` for tables.\\       |\n|                      | \\[`top` \\| `bottom` \\| `margin`\\]                                                                       |\n+----------------------+---------------------------------------------------------------------------------------------------------+\n| `fig-cap-location`   | Where to place figure captions. Defaults to `bottom`.\\                                                  |\n|                      | \\[`top` \\| `bottom` \\| `margin`\\]                                                                       |\n+----------------------+---------------------------------------------------------------------------------------------------------+\n| `tbl-cap-location`   | Where to place table captions. Defaults to `top`.\\                                                      |\n|                      | \\[`top` \\| `bottom` \\| `margin`\\]                                                                       |\n+----------------------+---------------------------------------------------------------------------------------------------------+\n\n### Code Cell Options\n\nYou can also set layout column on specific code cells. This controls the layout of content that is produced by the code cell.\n\n```{{r}}\n#| column: page\n\nplot(cars)\n```\n\n::: column-page-right\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| Option             | Description                                                                                                                  |\n+====================+==============================================================================================================================+\n| `column`           | Layout column to use for code cell outputs. See column options below.                                                        |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| `fig-column`       | Layout column to use for code cell figure outputs. See column options below.                                                 |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| `tbl-column`       | Layout column to use for code cell table outputs. See column options below.                                                  |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| `cap-location`     | Where to place figure and table captions produced by this code cell. Defaults to `bottom` for figures and `top` for tables.\\ |\n|                    | \\[`top` \\| `bottom` \\| `margin`\\]                                                                                            |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| `fig-cap-location` | Where to place captions for figures produced by this code cell. Defaults to `inline`.\\                                       |\n|                    | \\[`inline` \\| `margin`\\]                                                                                                     |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| `tbl-cap-location` | Where to place captions for tables produced by this code cell. Defaults to `inline`.\\                                        |\n|                    | \\[`inline` \\| `margin`\\]                                                                                                     |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n:::\n\n### Using Classes\n\nIn addition to global and code cell specific options, you may use divs with layout classes (prefixed with `.column-`) to arrange content into columns:\n\n``` md\n::: {.column-margin}\nThis content will appear in the margin!\n:::\n```\n\n### Available Columns\n\nHere are all of the available column specifiers:\n\n::: column-page-right\n+--------------+---------------------------------+---------------------------------+\n| Column       | Code Cell `column`              | Class Name                      |\n+==============+=================================+=================================+\n| Body         |     column: body                |     .column-body                |\n|              |     column: body-outset         |     .column-body-outset         |\n|              |     column: body-outset-left    |     .column-body-outset-left    |\n|              |     column: body-outset-right   |     .column-body-outset-right   |\n+--------------+---------------------------------+---------------------------------+\n| Page Inset   |     column: page-inset          |     .column-page-inset          |\n|              |     column: page-inset-left     |     .column-page-inset-left     |\n|              |     column: page-inset-right    |     .column-page-inset-right    |\n+--------------+---------------------------------+---------------------------------+\n| Page         |     column: page                |     .column-page                |\n|              |     column: page-left           |     .column-page-left           |\n|              |     column: page-right          |     .column-page-right          |\n+--------------+---------------------------------+---------------------------------+\n| Screen Inset |     column: screen-inset        |     .column-screen-inset        |\n|              |     column: screen-inset-shaded |     .column-screen-inset-shaded |\n|              |     column: screen-inset-left   |     .column-screen-inset-left   |\n|              |     column: screen-inset-right  |     .column-screen-inset-right  |\n+--------------+---------------------------------+---------------------------------+\n| Screen       |     column: screen              |     .column-screen              |\n|              |     column: screen-left         |     .column-screen-left         |\n|              |     column: screen-right        |     .column-screen-right        |\n+--------------+---------------------------------+---------------------------------+\n| Margin       |     column: margin              |     .column-margin              |\n+--------------+---------------------------------+---------------------------------+\n:::\n\n## PDF/LaTeX Layout {data-link=\"PDF/LaTeX Layout\"}\n\nWhile most of the layout capabilities described are supported for both HTML and PDF output, some are available only for HTML output. You can use the full set of columns for HTML. Then, when you render PDF or LaTeX output, content will automatically be placed in the most appropriate related column (typically this will mean using the main column and right margin). Here is how columns are mapped:\n\n-   Any column that uses the right margin (e.g. `page`, `screen`, `screen-right`, etc.) will be rendered as `page-right` in LaTeX.\n-   Any column that uses the left margin will be rendered as normal body content.\n\n### Page Geometry\n\nWhen you render a PDF using content in the margin or content that spans the page, Quarto will automatically adjust the page geometry for the default Quarto LaTeX document classes (KOMA `scrartcl`, `scrreport`, or `scrbook`) to create a slightly narrower body content region and a slightly wider margin region. This adjustment will incorporate known paper sizes to create a reasonable page geometry for most content.\n\nYou can control the page geometry directly yourself by setting `geometry` options in your document's front matter. For example:\n\n``` yaml\n---\ngeometry:\n  - left=.75in\n  - textwidth=4.5in\n  - marginparsep=.25in\n  - marginparwidth=2.25in\n---\n```\n\nYou can use these options to control the page geometry for the built-in document classes or to customize the geometry of other document classes that you may be using.\n\n::: {.callout-tip appearance=\"simple\"}\nIf you'd like to view the page geometry in your rendered PDF, you can pass `showframe` to the `geometry` option as in the below example.\n\n``` {.yaml style=\"background: none;\"}\n---\ngeometry:\n  - showframe\n---\n```\n:::\n\n### Code Blocks\n\nWhen rendering a PDF that uses the margins for content, Quarto automatically adjusts the appearance of code blocks. Rather than having a solid background color, a left border treatment is used.\n\nThis enables non-breaking code to overflow into the margin without cosmetic issues created by the code block background (which does not overflow into the margin region).\n\nYou can disable this treatment by setting the following `code-block-border-left: false` in your document front matter.\n\n## Typst Layout {#typst-layout data-link=\"Typst Layout\"}\n\nTypst output supports the layout capabilities described in this document via the [Marginalia](https://typst.app/universe/package/marginalia) package.\n\n### Page Geometry\n\nWhen you use margin content in a Typst document, Quarto automatically calculates appropriate page geometry based on your `papersize` setting. The geometry creates a narrower body column and a margin column for notes and figures.\n\nYou can customize the column widths using the `grid` option:\n\n``` yaml\nformat:\n  typst:\n    grid:\n      margin-width: 2in\n      body-width: 4in\n      gutter-width: 0.25in\n```\n\nFor fine-grained control over margin placement, Typst also provides the `margin-geometry` option which directly configures the underlying Marginalia package. See [Typst Basics - Article Layout](/docs/output-formats/typst.qmd#article-layout) for details.\n\n## Landscape mode\n\nIn `docx`, `pdf` and `typst` formats, you can set portions of the document to landscape mode by wrapping the content around a fenced div with class `landscape`:\n\n````markdown\n---\nformat:\n  docx: default\n  typst: default\n  pdf: default\n---\n\nThis will appear in portrait mode.\n\n::: {.landscape}\n\nThis will appear in landscape.\n\n:::\n\nThis will appear in portrait mode again.\n````\n\n\n\n[^1]: You can also position references in other location (such as the bottom of the block, section, or document).\n[^2]: Typst does not support `block` or `section` for `reference-location`.\n",
+    "markdown": "---\ntitle: \"Article Layout\"\nreference-location: margin\ncitation-location: margin\naliases:\n  - page-layout.html\n---\n\n## Overview\n\nQuarto supports a variety of page layout options that enable you to author content that:\n\n-   Fills the main content region\n-   Overflows the content region\n-   Spans the entire page\n-   Occupies the document margin\n-   Uses landscape mode in paginated formats\n\nQuarto uses the concept of columns to describe page layout (e.g. the \"body\" column, the \"margin\" column, etc.). Below we'll describe how to arrange content into these columns. If you need to adjust the widths of the columns, see [Page Layout - Grid Customization](/docs/output-formats/page-layout.qmd#grid-customization).\n\nAll of the layout capabilities described in this document work for HTML and Typst output. Many also work for PDF and LaTeX output, though with some differences. See [Typst Layout] and [PDF/LaTeX Layout] for format-specific details.\n\n## Body Column\n\nBy default, elements are positioned in the body of the document and are allowed to span the content of the document, like the below.\n\n::: {.layout-example .column-body}\n.column-body\n:::\n\nBut if you'd like, you can extend content slightly outside the bounds of the body by creating a div with the .`column-body-outset` class. For example:\n\n``` markdown\n:::{.column-body-outset}\nOutset content...\n:::\n```\n\n::: {.layout-example .column-body-outset}\n.column-body-outset\n:::\n\n## Page Column\n\nIf you need even more space for your content, you can use the `.column-page` class to make the content much wider, though stopping short of extending across the whole document.\n\n::: {.layout-example .column-page}\n.column-page\n:::\n\nFor example, to create a wider image, you could use:\n\n``` markdown\n:::{.column-page}\n![](images/elephant.jpg)\n:::\n```\n\n::: column-page\n![](images/elephant.jpg){fig-alt=\"Three walking elephants in silhouette against the backdrop of a sunset.\"}\n:::\n\nFor computational output, you can specify the page column in your code cell options. For example:\n\n\n::: {.cell .column-page}\n\n````{.cell-code}\n```{{r}}\n#| column: page\n\nknitr::kable(\n  mtcars[1:6, 1:10]\n)\n```\n````\n\n::: {.cell-output-display}\n\n\n|                  |  mpg| cyl| disp|  hp| drat|    wt|  qsec| vs| am| gear|\n|:-----------------|----:|---:|----:|---:|----:|-----:|-----:|--:|--:|----:|\n|Mazda RX4         | 21.0|   6|  160| 110| 3.90| 2.620| 16.46|  0|  1|    4|\n|Mazda RX4 Wag     | 21.0|   6|  160| 110| 3.90| 2.875| 17.02|  0|  1|    4|\n|Datsun 710        | 22.8|   4|  108|  93| 3.85| 2.320| 18.61|  1|  1|    4|\n|Hornet 4 Drive    | 21.4|   6|  258| 110| 3.08| 3.215| 19.44|  1|  0|    3|\n|Hornet Sportabout | 18.7|   8|  360| 175| 3.15| 3.440| 17.02|  0|  0|    3|\n|Valiant           | 18.1|   6|  225| 105| 2.76| 3.460| 20.22|  1|  0|    3|\n\n\n:::\n:::\n\n\nIn addition, you can use `.column-page-inset` to inset the element from the page slightly, like so:\n\n::: {.layout-example .column-page-inset}\n.column-page-inset\n:::\n\n## Screen Column\n\nYou can have content span the full width of the page with no margin (full bleed). For this, use the `.column-screen` class or specify `column: screen` on a code cell. For example:\n\n``` md\n::: {.column-screen}\n![A full screen image](/image.png)\n:::\n```\n\n::: {.layout-example .column-screen}\n.column-screen\n:::\n\nThe following code displays a Leaflet map across the whole page.\n\n\n::: {.cell .column-screen}\n\n````{.cell-code}\n```{{r}}\n#| column: screen\n\nlibrary(leaflet)\nleaflet() %>%\n  addTiles() %>%  # Add default OpenStreetMap map tiles\n  addMarkers(lng=174.768, lat=-36.852, popup=\"The birthplace of R\")\n```\n````\n\n::: {.cell-output-display}\n\n```{=html}\n<div class=\"leaflet html-widget html-fill-item\" id=\"htmlwidget-7516dbb076407f0f96bb\" style=\"width:100%;height:464px;\"></div>\n<script type=\"application/json\" data-for=\"htmlwidget-7516dbb076407f0f96bb\">{\"x\":{\"options\":{\"crs\":{\"crsClass\":\"L.CRS.EPSG3857\",\"code\":null,\"proj4def\":null,\"projectedBounds\":null,\"options\":{}}},\"calls\":[{\"method\":\"addTiles\",\"args\":[\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",null,null,{\"minZoom\":0,\"maxZoom\":18,\"tileSize\":256,\"subdomains\":\"abc\",\"errorTileUrl\":\"\",\"tms\":false,\"noWrap\":false,\"zoomOffset\":0,\"zoomReverse\":false,\"opacity\":1,\"zIndex\":1,\"detectRetina\":false,\"attribution\":\"&copy; <a href=\\\"https://openstreetmap.org/copyright/\\\">OpenStreetMap<\\/a>,  <a href=\\\"https://opendatacommons.org/licenses/odbl/\\\">ODbL<\\/a>\"}]},{\"method\":\"addMarkers\",\"args\":[-36.852,174.768,null,null,null,{\"interactive\":true,\"draggable\":false,\"keyboard\":true,\"title\":\"\",\"alt\":\"\",\"zIndexOffset\":0,\"opacity\":1,\"riseOnHover\":false,\"riseOffset\":250},\"The birthplace of R\",null,null,null,null,{\"interactive\":false,\"permanent\":false,\"direction\":\"auto\",\"opacity\":1,\"offset\":[0,0],\"textsize\":\"10px\",\"textOnly\":false,\"className\":\"\",\"sticky\":true},null]}],\"limits\":{\"lat\":[-36.852,-36.852],\"lng\":[174.768,174.768]}},\"evals\":[],\"jsHooks\":[]}</script>\n```\n\n:::\n:::\n\n\n### Screen Inset\n\nIf you'd like a full width appearance, but would like to retain a margin, you can use inset or inset-shaded modifiers on the column. For example:\n\n``` md\n::: {.column-screen-inset}\n![A full screen image](/image.png)\n:::\n```\n\n::: {.layout-example .column-screen-inset}\n.column-screen-inset\n:::\n\nThe inset-shaded modifier results in a block spanning the full width but wrapped with a lightly shaded background. For example:\n\n\n::: {.cell .column-screen-inset-shaded}\n\n````{.cell-code}\n```{{r}}\n#| column: screen-inset-shaded\n\nlibrary(leaflet)\nleaflet() %>%\n  addTiles() %>%  # Add default OpenStreetMap map tiles\n  addMarkers(lng=174.768, lat=-36.852, popup=\"The birthplace of R\")\n```\n````\n\n::: {.cell-output-display}\n\n```{=html}\n<div class=\"leaflet html-widget html-fill-item\" id=\"htmlwidget-4069ae40db0c89d7b7ec\" style=\"width:100%;height:464px;\"></div>\n<script type=\"application/json\" data-for=\"htmlwidget-4069ae40db0c89d7b7ec\">{\"x\":{\"options\":{\"crs\":{\"crsClass\":\"L.CRS.EPSG3857\",\"code\":null,\"proj4def\":null,\"projectedBounds\":null,\"options\":{}}},\"calls\":[{\"method\":\"addTiles\",\"args\":[\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",null,null,{\"minZoom\":0,\"maxZoom\":18,\"tileSize\":256,\"subdomains\":\"abc\",\"errorTileUrl\":\"\",\"tms\":false,\"noWrap\":false,\"zoomOffset\":0,\"zoomReverse\":false,\"opacity\":1,\"zIndex\":1,\"detectRetina\":false,\"attribution\":\"&copy; <a href=\\\"https://openstreetmap.org/copyright/\\\">OpenStreetMap<\\/a>,  <a href=\\\"https://opendatacommons.org/licenses/odbl/\\\">ODbL<\\/a>\"}]},{\"method\":\"addMarkers\",\"args\":[-36.852,174.768,null,null,null,{\"interactive\":true,\"draggable\":false,\"keyboard\":true,\"title\":\"\",\"alt\":\"\",\"zIndexOffset\":0,\"opacity\":1,\"riseOnHover\":false,\"riseOffset\":250},\"The birthplace of R\",null,null,null,null,{\"interactive\":false,\"permanent\":false,\"direction\":\"auto\",\"opacity\":1,\"offset\":[0,0],\"textsize\":\"10px\",\"textOnly\":false,\"className\":\"\",\"sticky\":true},null]}],\"limits\":{\"lat\":[-36.852,-36.852],\"lng\":[174.768,174.768]}},\"evals\":[],\"jsHooks\":[]}</script>\n```\n\n:::\n:::\n\n\nColumn layouts like `screen-inset-shaded` will work with advanced figure layout. For example, it is straightforward to create a multi column presentation of figures that spans the document:\n\n\n::: {.cell .column-screen-inset-shaded layout-nrow=\"1\"}\n\n````{.cell-code}\n```{{r}}\n#| column: screen-inset-shaded\n#| layout-nrow: 1\n#| fig-alt:\n#|   - \"Scatterplot of stopping distance rising with car speed\"\n#|   - \"Scatterplot matrix of the five iris variables\"\n#|   - \"Scatterplot of vapor pressure rising steeply with temperature\"\n\nplot(cars)\nplot(iris)\nplot(pressure)\n```\n````\n\n::: {.cell-output-display}\n![](article-layout_files/figure-html/unnamed-chunk-4-1.png){fig-alt='Scatterplot of stopping distance rising with car speed' width=672}\n:::\n\n::: {.cell-output-display}\n![](article-layout_files/figure-html/unnamed-chunk-4-2.png){fig-alt='Scatterplot matrix of the five iris variables' width=672}\n:::\n\n::: {.cell-output-display}\n![](article-layout_files/figure-html/unnamed-chunk-4-3.png){fig-alt='Scatterplot of vapor pressure rising steeply with temperature' width=672}\n:::\n:::\n\n\n## Margin Content\n\nYou can place content within the right margin of Quarto document. For example, here we use the `.column-margin` class to place an image in the margin:\n\n``` md\n::: {.column-margin}\n![A margin image](image.png)\n:::\n```\n\n::: {.layout-example .column-margin style=\"margin-top: 18px;\"}\n.column-margin\n:::\n\nThis also works for text content:\n\n``` md\n::: {.column-margin}\nWe know from *the first fundamental theorem of calculus* that for $x$ in $[a, b]$:\n\n$$\\frac{d}{dx}\\left( \\int_{a}^{x} f(u)\\,du\\right)=f(x).$$\n:::\n```\n\n::: column-margin\nWe know from *the first fundamental theorem of calculus* that for $x$ in $[a, b]$:\n\n$$\\frac{d}{dx}\\left( \\int_{a}^{x} f(u)\\,du\\right)=f(x).$$\n:::\n\n### Margin Figures\n\nFigures that you create using code cells can be placed in the margin by using the `column: margin` code cell option. If the code produces more than one figure, each of the figures will be placed in the margin.\n\n\n::: {.cell .column-margin}\n\n````{.cell-code}\n```{{r}}\n#| label: fig-mtcars\n#| fig-cap: \"MPG vs horsepower, colored by transmission.\"\n#| fig-alt: \"Scatterplot showing fuel economy falling as horsepower rises\"\n#| column: margin\n\nlibrary(ggplot2)\nmtcars2 <- mtcars\nmtcars2$am <- factor(\n  mtcars$am, labels = c('automatic', 'manual')\n)\nggplot(mtcars2, aes(hp, mpg, color = am)) +\n  geom_point() +\n  geom_smooth(formula = y ~ x, method = \"loess\") +\n  theme(legend.position = 'bottom')\n```\n````\n\n::: {.cell-output-display}\n![MPG vs horsepower, colored by transmission.](article-layout_files/figure-html/fig-mtcars-1.png){#fig-mtcars fig-alt='Scatterplot showing fuel economy falling as horsepower rises' width=672}\n:::\n:::\n\n\n### Margin Tables\n\nYou can also place tables in the margin of your document by specifying `column: margin`.\n\n\n::: {.cell .column-margin}\n\n````{.cell-code}\n```{{r}}\n#| column: margin\n\nknitr::kable(\n  mtcars[1:6, 1:3]\n)\n```\n````\n\n::: {.cell-output-display}\n\n\n|                  |  mpg| cyl| disp|\n|:-----------------|----:|---:|----:|\n|Mazda RX4         | 21.0|   6|  160|\n|Mazda RX4 Wag     | 21.0|   6|  160|\n|Datsun 710        | 22.8|   4|  108|\n|Hornet 4 Drive    | 21.4|   6|  258|\n|Hornet Sportabout | 18.7|   8|  360|\n|Valiant           | 18.1|   6|  225|\n\n\n:::\n:::\n\n\n### Multiple Outputs\n\nYou can also target specific output types (for example, figures) to be placed in the margin. For example, the following code will render a table showing part of the `mtcars` dataset and produce a plot in the margin next to the table.\n\n\n::: {.cell .fig-column-margin}\n\n````{.cell-code}\n```{{r}}\n#| fig-column: margin\n#| fig-alt: \"Scatterplot showing fuel economy falling as horsepower rises\"\n\nmtcars2 <- mtcars\nmtcars2$am <- factor(\n  mtcars$am, labels = c('automatic', 'manual')\n)\n\nknitr::kable(\n  mtcars[1:6, 1:6]\n)\n\nlibrary(ggplot2)\nggplot(mtcars2, aes(hp, mpg, color = am)) +\n  geom_point() +\n  geom_smooth(formula = y ~ x, method = \"loess\") +\n  theme(legend.position = 'bottom')\n```\n````\n\n::: {.cell-output-display}\n\n\n|                  |  mpg| cyl| disp|  hp| drat|    wt|\n|:-----------------|----:|---:|----:|---:|----:|-----:|\n|Mazda RX4         | 21.0|   6|  160| 110| 3.90| 2.620|\n|Mazda RX4 Wag     | 21.0|   6|  160| 110| 3.90| 2.875|\n|Datsun 710        | 22.8|   4|  108|  93| 3.85| 2.320|\n|Hornet 4 Drive    | 21.4|   6|  258| 110| 3.08| 3.215|\n|Hornet Sportabout | 18.7|   8|  360| 175| 3.15| 3.440|\n|Valiant           | 18.1|   6|  225| 105| 2.76| 3.460|\n\n\n:::\n\n::: {.cell-output-display}\n![](article-layout_files/figure-html/unnamed-chunk-6-1.png){fig-alt='Scatterplot showing fuel economy falling as horsepower rises' width=672}\n:::\n:::\n\n\n## Page Breaks\n\nThe `pagebreak` [shortcode](shortcodes.qmd) enables you to insert a native pagebreak into a document (e.g. in LaTeX this would be a `\\newpage`, in MS Word a docx-native pagebreak, in HTML a `page-break-after: always` CSS directive, etc.):\n\n```{.markdown shortcodes=\"false\"}\npage 1\n\n{{< pagebreak >}}\n\npage 2\n```\n\nNative pagebreaks are supported for HTML, LaTeX, Context, MS Word, Open Document, ePub, and Typst (for other formats a form-feed character `\\f` is inserted).\n\n\n\n## Margin References\n\nFootnotes and the bibliography typically appear at the end of the document, but you can choose to have them placed in the margin by setting the following option[^1] in the document front matter:\n\n``` yaml\n---\nreference-location: margin\ncitation-location: margin\n---\n```\n\nWith these options set, footnotes and citations will (respectively) be automatically be placed in the margin of the document rather than the bottom of the page. As an example, when I cite @xie2018, the citation bibliography entry itself will now appear in the margin.\n\n### Asides\n\nAsides allow you to place content aside from the content it is placed in. Asides look like footnotes, but do not include the footnote mark (the superscript number). [This is a span that has the class `aside` which places it in the margin without a footnote number.]{.aside}\n\n``` markdown\n[This is a span that has the class `aside` which places it in the margin without a footnote number.]{.aside}\n```\n\n## Margin Captions\n\nFor figures and tables, you may leave the content in the body of the document while placing the caption in the margin of the document. Using `cap-location: margin` in a code cell or document front matter to control this. For example:\n\n\n::: {.cell .caption-margin}\n\n````{.cell-code}\n```{{r}}\n#| label: fig-cap-margin\n#| fig-cap: \"MPG vs horsepower, colored by transmission.\"\n#| fig-alt: \"Scatterplot showing fuel economy falling as horsepower rises\"\n#| cap-location: margin\n\nlibrary(ggplot2)\nmtcars2 <- mtcars\nmtcars2$am <- factor(\n  mtcars$am, labels = c('automatic', 'manual')\n)\nggplot(mtcars2, aes(hp, mpg, color = am)) +\n  geom_point() +\n  geom_smooth(formula = y ~ x, method = \"loess\") +\n  theme(legend.position = 'bottom')\n```\n````\n\n::: {.cell-output-display}\n![MPG vs horsepower, colored by transmission.](article-layout_files/figure-html/fig-cap-margin-1.png){#fig-cap-margin fig-alt='Scatterplot showing fuel economy falling as horsepower rises' width=672}\n:::\n:::\n\n\n## Overflowing Content\n\nYou can also extend content outside the body region on only the left or right side of the document by using the `right` and `left` versions of the `body`, `page`, and `screen` columns to layout your content. The `left` or `right` version of these columns are as follows:\n\n::: {.layout-example .column-body-outset-right .left}\n.column-body-outset-right\n:::\n\n::: {.layout-example .column-page-inset-right .left}\n.column-page-inset-right\n:::\n\n::: {.layout-example .column-page-right .left}\n.column-page-right\n:::\n\n::: {.layout-example .column-screen-inset-right .left}\n.column-screen-inset-right\n:::\n\n::: {.layout-example .column-screen-right .left}\n.column-screen-right\n:::\n\n::: {.layout-example .column-body-outset-left .right}\n.column-body-outset-left\n:::\n\n::: {.layout-example .column-page-inset-left .right}\n.column-page-inset-left\n:::\n\n::: {.layout-example .column-page-left .right}\n.column-page-left\n:::\n\n::: {.layout-example .column-screen-inset-left .right}\n.column-screen-inset-left\n:::\n\n::: {.layout-example .column-screen-left .right}\n.column-screen-left\n:::\n\nUse a div with one of the above classes to align content into one of the overflow regions. This also works using the `column` option of executable code cells:\n\n\n::: {.cell .column-screen-inset-right}\n\n````{.cell-code}\n```{{r}}\n#| column: screen-inset-right\n\nlibrary(leaflet)\nleaflet() %>%\n  addTiles() %>%  # Add default OpenStreetMap map tiles\n  addMarkers(lng=174.768, lat=-36.852, popup=\"The birthplace of R\")\n```\n````\n\n::: {.cell-output-display}\n\n```{=html}\n<div class=\"leaflet html-widget html-fill-item\" id=\"htmlwidget-3d0de06b68e0ad11eac6\" style=\"width:100%;height:464px;\"></div>\n<script type=\"application/json\" data-for=\"htmlwidget-3d0de06b68e0ad11eac6\">{\"x\":{\"options\":{\"crs\":{\"crsClass\":\"L.CRS.EPSG3857\",\"code\":null,\"proj4def\":null,\"projectedBounds\":null,\"options\":{}}},\"calls\":[{\"method\":\"addTiles\",\"args\":[\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",null,null,{\"minZoom\":0,\"maxZoom\":18,\"tileSize\":256,\"subdomains\":\"abc\",\"errorTileUrl\":\"\",\"tms\":false,\"noWrap\":false,\"zoomOffset\":0,\"zoomReverse\":false,\"opacity\":1,\"zIndex\":1,\"detectRetina\":false,\"attribution\":\"&copy; <a href=\\\"https://openstreetmap.org/copyright/\\\">OpenStreetMap<\\/a>,  <a href=\\\"https://opendatacommons.org/licenses/odbl/\\\">ODbL<\\/a>\"}]},{\"method\":\"addMarkers\",\"args\":[-36.852,174.768,null,null,null,{\"interactive\":true,\"draggable\":false,\"keyboard\":true,\"title\":\"\",\"alt\":\"\",\"zIndexOffset\":0,\"opacity\":1,\"riseOnHover\":false,\"riseOffset\":250},\"The birthplace of R\",null,null,null,null,{\"interactive\":false,\"permanent\":false,\"direction\":\"auto\",\"opacity\":1,\"offset\":[0,0],\"textsize\":\"10px\",\"textOnly\":false,\"className\":\"\",\"sticky\":true},null]}],\"limits\":{\"lat\":[-36.852,-36.852],\"lng\":[174.768,174.768]}},\"evals\":[],\"jsHooks\":[]}</script>\n```\n\n:::\n:::\n\n\n## Options Reference\n\n### Global Options\n\nSome layout options can be specified globally in document yaml. For example:\n\n``` yaml\n---\nfig-cap-location: margin\nreference-location: margin\n---\n```\n\nAll of the below options currently only support setting a value of `margin` which tells Quarto to place the corresponding element in the margin.\n\n+----------------------+---------------------------------------------------------------------------------------------------------+\n| Option               | Description                                                                                             |\n+======================+=========================================================================================================+\n| `reference-location` | Where to place footnotes. Defaults to `document`.[^2]\\                                                  |\n|                      | \\[`document` \\| `section` \\| `block` \\| `margin` \\]                                                     |\n+----------------------+---------------------------------------------------------------------------------------------------------+\n| `citation-location`  | Where to place citations. Defaults to `document`.\\                                                      |\n|                      | \\[`document` \\| `margin` \\]                                                                             |\n+----------------------+---------------------------------------------------------------------------------------------------------+\n| `cap-location`       | Where to place figure and table captions. Defaults to `bottom` for figures and `top` for tables.\\       |\n|                      | \\[`top` \\| `bottom` \\| `margin`\\]                                                                       |\n+----------------------+---------------------------------------------------------------------------------------------------------+\n| `fig-cap-location`   | Where to place figure captions. Defaults to `bottom`.\\                                                  |\n|                      | \\[`top` \\| `bottom` \\| `margin`\\]                                                                       |\n+----------------------+---------------------------------------------------------------------------------------------------------+\n| `tbl-cap-location`   | Where to place table captions. Defaults to `top`.\\                                                      |\n|                      | \\[`top` \\| `bottom` \\| `margin`\\]                                                                       |\n+----------------------+---------------------------------------------------------------------------------------------------------+\n\n### Code Cell Options\n\nYou can also set layout column on specific code cells. This controls the layout of content that is produced by the code cell.\n\n```{{r}}\n#| column: page\n\nplot(cars)\n```\n\n::: column-page-right\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| Option             | Description                                                                                                                  |\n+====================+==============================================================================================================================+\n| `column`           | Layout column to use for code cell outputs. See column options below.                                                        |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| `fig-column`       | Layout column to use for code cell figure outputs. See column options below.                                                 |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| `tbl-column`       | Layout column to use for code cell table outputs. See column options below.                                                  |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| `cap-location`     | Where to place figure and table captions produced by this code cell. Defaults to `bottom` for figures and `top` for tables.\\ |\n|                    | \\[`top` \\| `bottom` \\| `margin`\\]                                                                                            |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| `fig-cap-location` | Where to place captions for figures produced by this code cell. Defaults to `inline`.\\                                       |\n|                    | \\[`inline` \\| `margin`\\]                                                                                                     |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n| `tbl-cap-location` | Where to place captions for tables produced by this code cell. Defaults to `inline`.\\                                        |\n|                    | \\[`inline` \\| `margin`\\]                                                                                                     |\n+--------------------+------------------------------------------------------------------------------------------------------------------------------+\n:::\n\n### Using Classes\n\nIn addition to global and code cell specific options, you may use divs with layout classes (prefixed with `.column-`) to arrange content into columns:\n\n``` md\n::: {.column-margin}\nThis content will appear in the margin!\n:::\n```\n\n### Available Columns\n\nHere are all of the available column specifiers:\n\n::: column-page-right\n+--------------+---------------------------------+---------------------------------+\n| Column       | Code Cell `column`              | Class Name                      |\n+==============+=================================+=================================+\n| Body         |     column: body                |     .column-body                |\n|              |     column: body-outset         |     .column-body-outset         |\n|              |     column: body-outset-left    |     .column-body-outset-left    |\n|              |     column: body-outset-right   |     .column-body-outset-right   |\n+--------------+---------------------------------+---------------------------------+\n| Page Inset   |     column: page-inset          |     .column-page-inset          |\n|              |     column: page-inset-left     |     .column-page-inset-left     |\n|              |     column: page-inset-right    |     .column-page-inset-right    |\n+--------------+---------------------------------+---------------------------------+\n| Page         |     column: page                |     .column-page                |\n|              |     column: page-left           |     .column-page-left           |\n|              |     column: page-right          |     .column-page-right          |\n+--------------+---------------------------------+---------------------------------+\n| Screen Inset |     column: screen-inset        |     .column-screen-inset        |\n|              |     column: screen-inset-shaded |     .column-screen-inset-shaded |\n|              |     column: screen-inset-left   |     .column-screen-inset-left   |\n|              |     column: screen-inset-right  |     .column-screen-inset-right  |\n+--------------+---------------------------------+---------------------------------+\n| Screen       |     column: screen              |     .column-screen              |\n|              |     column: screen-left         |     .column-screen-left         |\n|              |     column: screen-right        |     .column-screen-right        |\n+--------------+---------------------------------+---------------------------------+\n| Margin       |     column: margin              |     .column-margin              |\n+--------------+---------------------------------+---------------------------------+\n:::\n\n## PDF/LaTeX Layout {data-link=\"PDF/LaTeX Layout\"}\n\nWhile most of the layout capabilities described are supported for both HTML and PDF output, some are available only for HTML output. You can use the full set of columns for HTML. Then, when you render PDF or LaTeX output, content will automatically be placed in the most appropriate related column (typically this will mean using the main column and right margin). Here is how columns are mapped:\n\n-   Any column that uses the right margin (e.g. `page`, `screen`, `screen-right`, etc.) will be rendered as `page-right` in LaTeX.\n-   Any column that uses the left margin will be rendered as normal body content.\n\n### Page Geometry\n\nWhen you render a PDF using content in the margin or content that spans the page, Quarto will automatically adjust the page geometry for the default Quarto LaTeX document classes (KOMA `scrartcl`, `scrreport`, or `scrbook`) to create a slightly narrower body content region and a slightly wider margin region. This adjustment will incorporate known paper sizes to create a reasonable page geometry for most content.\n\nYou can control the page geometry directly yourself by setting `geometry` options in your document's front matter. For example:\n\n``` yaml\n---\ngeometry:\n  - left=.75in\n  - textwidth=4.5in\n  - marginparsep=.25in\n  - marginparwidth=2.25in\n---\n```\n\nYou can use these options to control the page geometry for the built-in document classes or to customize the geometry of other document classes that you may be using.\n\n::: {.callout-tip appearance=\"simple\"}\nIf you'd like to view the page geometry in your rendered PDF, you can pass `showframe` to the `geometry` option as in the below example.\n\n``` {.yaml style=\"background: none;\"}\n---\ngeometry:\n  - showframe\n---\n```\n:::\n\n### Code Blocks\n\nWhen rendering a PDF that uses the margins for content, Quarto automatically adjusts the appearance of code blocks. Rather than having a solid background color, a left border treatment is used.\n\nThis enables non-breaking code to overflow into the margin without cosmetic issues created by the code block background (which does not overflow into the margin region).\n\nYou can disable this treatment by setting the following `code-block-border-left: false` in your document front matter.\n\n## Typst Layout {#typst-layout data-link=\"Typst Layout\"}\n\nTypst output supports the layout capabilities described in this document via the [Marginalia](https://typst.app/universe/package/marginalia) package.\n\n### Page Geometry\n\nWhen you use margin content in a Typst document, Quarto automatically calculates appropriate page geometry based on your `papersize` setting. The geometry creates a narrower body column and a margin column for notes and figures.\n\nYou can customize the column widths using the `grid` option:\n\n``` yaml\nformat:\n  typst:\n    grid:\n      margin-width: 2in\n      body-width: 4in\n      gutter-width: 0.25in\n```\n\nFor fine-grained control over margin placement, Typst also provides the `margin-geometry` option which directly configures the underlying Marginalia package. See [Typst Basics - Article Layout](/docs/output-formats/typst.qmd#article-layout) for details.\n\n## Landscape mode\n\nIn `docx`, `pdf` and `typst` formats, you can set portions of the document to landscape mode by wrapping the content around a fenced div with class `landscape`:\n\n````markdown\n---\nformat:\n  docx: default\n  typst: default\n  pdf: default\n---\n\nThis will appear in portrait mode.\n\n::: {.landscape}\n\nThis will appear in landscape.\n\n:::\n\nThis will appear in portrait mode again.\n````\n\n\n\n[^1]: You can also position references in other location (such as the bottom of the block, section, or document).\n[^2]: Typst does not support `block` or `section` for `reference-location`.\n",
     "supporting": [
       "article-layout_files"
     ],
diff --git a/_freeze/docs/authoring/cross-references/execute-results/html.json b/_freeze/docs/authoring/cross-references/execute-results/html.json
index 872947dd89..c93736a8ba 100644
--- a/_freeze/docs/authoring/cross-references/execute-results/html.json
+++ b/_freeze/docs/authoring/cross-references/execute-results/html.json
@@ -1,8 +1,8 @@
 {
-  "hash": "fda9e39b3ce2f0e6b166c069ffb75a1a",
+  "hash": "2e0164e8c2aa96bcd5bf989360f37c4a",
   "result": {
     "engine": "jupyter",
-    "markdown": "---\ntitle: \"Cross References\"\nformat: html\ntoc-expand: 2\ntoc-depth: 4\naliases: \n  - /docs/authoring/cross-references-listings.html\n  - /docs/authoring/cross-references-callouts.html\n---\n\n## Overview\n\nCross-references make it easier for readers to navigate your document by providing numbered references and hyperlinks to various entities like figures and tables. Every cross-referenceable entity requires a label---a unique identifier prefixed with a cross-reference type e.g. `#fig-element`. For example, this is a cross-referenceable figure:\n\n``` markdown\n![Elephant](elephant.png){#fig-elephant}\n```\n\nThe presence of the label (`#fig-elephant`) makes this figure referenceable. This enables you to use the following syntax to refer to it elsewhere in the document:\n\n``` markdown\nSee @fig-elephant for an illustration.\n```\n\nHere is what this would look like rendered to HTML:\n\n![](images/crossref-figure.png){.border fig-alt=\"A line drawing of an elephant. The caption 'Figure 1: Elephant' is centered beneath it.\" width=\"100%\"}\n\nNote that cross reference identifiers must start with their type (e.g. `fig-` or `tbl-`). So the identifier `#fig-elephant` is valid for a cross-reference but the identifiers `#elephant` and `#elephant-fig` are not.\n\n::: {#reserved-prefixes}\n::: {.callout-warning}\n\n## Reserved Prefixes \n\nUnless you are creating a cross-reference, avoid using the reserved cross-reference prefixes for code cell labels (e.g. set using the `label` code cell option) and element IDs (set using a `#` in an attribute). \n \nThe reserved prefixes are: `fig`, `tbl`, `lst`, `tip`, `nte`, `wrn`, `imp`, `cau`, `thm`, `lem`, `cor`, `prp`, `cnj`, `def`, `exm`, `exr`, `sol`, `rem`, `alg`, `eq`, `sec`.\n\nAlso avoid using underscores (`_`) in labels and IDs as this can cause problems when rendering to PDF with LaTeX.\n\n:::\n:::\n\nQuarto enables you to create cross-references to figures, tables, equations, sections, code listings, theorems, proofs, and more. Cross references can also be applied to dynamic output from Knitr and Jupyter. \n\nOn this page you'll learn:\n\n*  Different ways to use the `@` syntax to create [References](#references).\n*  How to add [Lists](#lists) of references in LaTeX / PDF output.\n\nThen, we enumerate the syntax for the different types of elements you might want to reference:\n\n*  [Floats](#floats): [Figures](#figures), [Tables](#tables) and [Code Listings](#code-listings)\n* Blocks: [Callouts](#callouts), [Theorems and Proofs](#theorems-and-proofs) and [Equations](#equations) \n*  [Sections](#sections)\n\nThere are options available that control the text used for titles and references. For example, you could change \"Figure 1\" to read \"Fig 1\" or \"fig. 1\". See the [options documentation](cross-reference-options.qmd) for details on how to customize the text used for cross-references.\n\n## References\n\nThe examples on this page all use the default syntax for inline references (e.g. `@fig-elephant`), which results in the reference text \"Figure 1\", \"Table 1\", etc.\n\nYou can customize the appearance of inline references by either changing the syntax of the inline reference or by setting options. Here are the various ways to compose a cross-reference and their resulting output:\n\n| Type          | Syntax                | Output   |\n|---------------|-----------------------|----------|\n| Default       | `@fig-elephant`       | Figure 1 |\n| Capitalized   | `@Fig-elephant`       | Figure 1 |\n| Custom Prefix | `[Fig @fig-elephant]` | Fig 1    |\n| No Prefix     | `[-@fig-elephant]`    | 1        |\n\nNote that the capitalized syntax makes no difference for the default output, but would indeed capitalize the first letter if the default prefix had been changed via an [option](cross-reference-options.qmd#references) to use lower case (e.g. \"fig.\").\n\nThese syntax variations work not only for Figures, but for all cross-referenceable elements in Quarto such as Tables, Equations, Theorems, and so on.\n\nYou can also group cross-references using the following syntax:\n\n``` markdown\nAs illustrated in [@fig-elephant; @fig-panther; @fig-rabbit].\n```\n\nThere are a number of options that can be used to further customize the treatment of cross-references. See the guide on [Cross Reference Options](cross-reference-options.qmd#references) for additional details.\n\n## Lists\n\nFor LaTeX / PDF output, you can use the raw LaTeX commands `\\listoffigures`, `\\listoftables` and `\\listoflistings` to produce listings of all figures, tables, etc. within a document. You can use the `lof-title`, `lot-title`, and `lol-title` crossref options to customize the title of the listing.\n\nFor example:\n\n``` markdown\n---\ntitle: \"My Document\"\ncrossref:\n  lof-title: \"List of Figures\"\nformat: pdf\n---\n\n\\listoffigures\n```\n\nNote that the default titles for the lists use the form displayed above (i.e. \"List of \\<Type\\>\").\n\n## Floats\n\n[Figures](#figures), [tables](#tables) and [code listings](#code-listings) are known as \"float\" cross-references. Floats can appear in the rendered document at locations other than where they are defined, i.e. they float, and usually have captions. \n\nIn addition to the compact syntax for the most common uses of float cross-references, you can also define float cross-references with a div syntax. Use the div syntax when you need more flexibility in the content of your cross-reference, for example, to have a [video](cross-references-divs.qmd#videos) be referenced as a figure. Basic examples of the div syntax are included in the sections below, but you can find more complicated examples in [Cross-Reference Div Syntax](cross-references-divs.qmd). \n\nYou can also define custom types of float cross-reference to reference elements beyond figures, tables and code listings. Read more at [Custom Float Cross-References](cross-references-custom.qmd).\n\n\n### Figures\n\nAs described on the Overview above, this is the markdown used to create a cross-referenceable figure and then refer to it:\n\n``` markdown\n![Elephant](elephant.png){#fig-elephant}\n\nSee @fig-elephant for an illustration.\n```\n\nNote again that cross-reference identifiers must start with their type (e.g. `#fig-`) and that cross-reference identifiers must be all lower case.\n\nTo create a cross-reference to a figure using div syntax, create a fenced div with an id starting with `fig-`, include the image followed by the caption inside the div:\n\n````markdown\n::: {#fig-elephant}\n\n![](elephant.png)\n\nAn Elephant\n:::\n````\n\n\nYou can read about using div syntax with figures at [Cross-Reference Div Syntax](cross-references-divs.qmd#figures).\n\n#### Subfigures\n\nYou may want to create a figure composed of multiple subfigures. To do this, enclose the figures in a div (with its own label and caption) and give each subfigure its own label and (optionally) caption. You can then refer to either the entire figure in a reference or a single subfigure:\n\n``` markdown\n::: {#fig-elephants layout-ncol=2}\n\n![Surus](surus.png){#fig-surus}\n\n![Hanno](hanno.png){#fig-hanno}\n\nFamous Elephants\n:::\n\nSee @fig-elephants for examples. In particular, @fig-hanno.\n```\n\nHere is what this looks like when rendered as HTML:\n\n![](images/crossref-subfigures.png){.preview-image .border fig-alt=\"An artistic rendition of Surus, Hannibal's last war elephant, is on the left. Underneath this picture is the caption '(a) Surus.' On the right is a line drawing of Hanno, a famous elephant. Underneath this picture is the caption '(b) Hanno.' The words 'Figure 1: Famous elephants' are centered beneath both pictures. The text 'See fig. 1 for examples. In particular, fig. 1(b).' is underneath this text and is aligned to the left.\" width=\"100%\"}\n\nNote that we also used the `layout-ncol` attribute to specify a two-column layout. See the article on [Figures](figures.qmd) for more details on laying out panels of figures.\n\n#### Computations\n\nFigures produced by Jupyter and Knitr can also be cross-referenced. To do this, add a `label` and `fig-cap` option at the top of the code block. For example:\n\n::: panel-tabset\n##### Jupyter\n\n    ```{{python}}\n    #| label: fig-plot\n    #| fig-cap: \"Plot\"\n\n    import matplotlib.pyplot as plt\n    plt.plot([1,23,2,4])\n    plt.show()\n    ```\n\n    For example, see @fig-plot.\n\n![](images/crossref-figure-jupyter.png){fig-alt=\"A line plot with the label 'Figure 1: Plot' centered underneath it. The text 'For example, see fig. 1' is underneath this label and aligned to the left.\"}\n\n##### Knitr\n\n    ```{{r}}\n    #| label: fig-plot\n    #| fig-cap: \"Plot\"\n\n    plot(cars)\n    ```\n\n    For example, see @fig-plot.\n\n![](images/crossref-figure-r.png){fig-alt=\"A scatter plot of speed versus distance for the `cars` dataset. The label 'Figure 1: Plot' is centered beneath it. The text 'For example, see fig. 1' is aligned to the left underneath that.\"}\n:::\n\n::: {.callout-tip}\n\n## Computed Captions\n\nIf you need to generate a dynamic caption, instead of using the `fig-cap` or `tbl-cap` code cell option, combine inline code with the [Cross-Reference Div Syntax](/docs/authoring/cross-references-divs.qmd#computed-captions).\n\n:::\n\n\nYou can also create multiple figures within a code cell and reference them as subfigures. To do this use `fig-cap` for the main caption, and `fig-subcap` to provide an array of subcaptions. For example:\n\n    ```{{python}}\n    #| label: fig-plots\n    #| fig-cap: \"Plots\" \n    #| fig-subcap:\n    #|   - \"Plot 1\"\n    #|   - \"Plot 2\" \n    #| layout-ncol: 2\n\n    import matplotlib.pyplot as plt\n    plt.plot([1,23,2,4])\n    plt.show()\n\n    plt.plot([8,65,23,90])\n    plt.show()\n    ```\n\n    See @fig-plots for examples. In particular, @fig-plots-2.\n\n![](images/crossref-subfigures-jupyter.png){fig-alt=\"Two line plots side-by-side. The plot on the left has the caption '(a) Plot 1' centered underneath it. The plot on the right has the caption '(b) Plot 2' centered underneath it. The text 'Figure 1: Plots' is centered underneath both of these plots. The text 'See fig. 1 for examples. In particular, fig. 1(b)' is aligned to the left underneath that.\"}\n\nNote that subfigure reference labels are created automatically based on the main chunk label (e.g. `@fig-plots-1`, `@fig-plots-2`, etc.).\n\nIf you'd like subfigure captions that include only an identifier, e.g. \"(a)\", and not a text caption, then specify `fig-subcap: true` rather than providing explicit subcaption text:\n\n```{{python}}\n#| label: fig-plots\n#| fig-cap: \"Plots\" \n#| fig-subcap: true\n#| layout-ncol: 2\n```\n\n### Tables\n\n\n\nFor markdown tables, add a caption below the table, then include a `#tbl-` label in braces at the end of the caption. For example:\n\n``` markdown\n| Col1 | Col2 | Col3 |\n|------|------|------|\n| A    | B    | C    |\n| E    | F    | G    |\n| A    | G    | G    |\n\n: My Caption {#tbl-letters}\n\nSee @tbl-letters.\n```\n\nWhich looks like this when rendered to HTML:\n\n::: light-content\n![](images/crossref-table.png){fig-alt=\"A table with 3 columns and four rows. The text 'Table 1: My Caption' is above the header column. The text 'See tbl. 1' is aligned to the left underneath the last column.\" width=\"500\"}\n:::\n\n::: dark-content\n![](images/crossref-table-dark.png){fig-alt=\"A table with 3 columns and four rows. The text 'Table 1: My Caption' is above the header column. The text 'See tbl. 1' is aligned to the left underneath the last column.\" width=\"500\"}\n:::\n\n\n::: callout-important\n## Label Prefix\n\nIn order for a table to be cross-referenceable, its label must start with the `tbl-` prefix.\n:::\n\nTo create a cross-reference to a table using div syntax, create a fenced div with an id starting with `tbl-`, include the table followed by the caption inside the div:\n\n````markdown\n::: {#tbl-letters}\n\n| Col1 | Col2 | Col3 |\n|------|------|------|\n| A    | B    | C    |\n| E    | F    | G    |\n| A    | G    | G    |\n\nMy Caption\n\n::: \n````\n\n\nYou can read more about using div syntax with tables at [Cross-Reference Div Syntax](cross-references-divs.qmd#tables).\n\n#### Subtables\n\nYou may want to create a composition of several sub-tables. To do this, create a div with a main identifier, then apply sub-identifiers (and optional caption text) to the contained tables. For example:\n\n``` markdown\n::: {#tbl-panel layout-ncol=2}\n| Col1 | Col2 | Col3 |\n|------|------|------|\n| A    | B    | C    |\n| E    | F    | G    |\n| A    | G    | G    |\n\n: First Table {#tbl-first}\n\n| Col1 | Col2 | Col3 |\n|------|------|------|\n| A    | B    | C    |\n| E    | F    | G    |\n| A    | G    | G    |\n\n: Second Table {#tbl-second}\n\nMain Caption\n:::\n\nSee @tbl-panel for details, especially @tbl-second.\n```\n\nWhich looks like this when rendered to HTML:\n\n![](/docs/authoring/images/crossref-subtable.png){fig-alt=\"Two tables side-by-side. Both tables have 3 columns and 4 rows. The table on the left is titled '(a) First table'. The table on the right is titled '(b) Second Table'. Centered underneath both tables is the text 'Table 1: Main Caption'. The text 'See tbl. 2 for details, especially tbl. 2 (b)' is aligned to the left underneath that.\"}\n\nNote that the \"Main Caption\" for the table is provided as the last block within the containing div.\n\n\n#### Computations\n\nYou can also cross-reference tables created from code executed via computations. To do this, add the `label` and `tbl-cap` cell options. For example:\n\n```{{r}}\n#| label: tbl-iris\n#| tbl-cap: \"Iris Data\"\n\nlibrary(knitr)\nkable(head(iris))\n```\n\n![](/docs/authoring/images/crossref-table-knitr.png){fig-alt=\"Example table output.\" fig-align=\"center\" width=\"80%\"}\n\n::: {.callout-tip}\n\n## Computed Captions\n\nIf you need to generate a dynamic caption, instead of using the `fig-cap` or `tbl-cap` code cell option, combine inline code with the [Cross-Reference Div Syntax](/docs/authoring/cross-references-divs.qmd#computed-captions).\n\n:::\n\n\nYou can also create multiple tables within a code cell and reference them as subtables. To do this, add a `tbl-subcap` option with an array of subcaptions. For example:\n\n```{{r}}\n#| label: tbl-tables\n#| tbl-cap: \"Tables\"\n#| tbl-subcap:\n#|   - \"Cars\"\n#|   - \"Pressure\"\n#| layout-ncol: 2\n\nlibrary(knitr)\nkable(head(cars))\nkable(head(pressure))\n```\n\n![](/docs/authoring/images/crossref-subtable-knitr.png){fig-alt=\"Two tables side-by-side. Each table has 2 columns and 8 rows. The table on the left is titled '(a) Cars'. The table on the right is titled '(b) Pressure'. Centered underneath both tables is the text 'Table 1: Tables.'\" fig-align=\"center\" width=\"80%\"}\n\nIf you'd like subtable captions that include only an identifier, e.g. \"(a)\", and not a text caption, then specify `tbl-subcap: true` rather than providing explicit subcaption text:\n\n```{{r}}\n#| label: tbl-tables\n#| tbl-cap: \"Tables\"\n#| tbl-subcap: true\n#| layout-ncol: 2\n\nlibrary(knitr)\nkable(head(cars))\nkable(head(pressure))\n```\n\n![](/docs/authoring/images/crossref-subtable-nocaption-knitr.png){fig-alt=\"Two tables side-by-side, with identifier-only subcaptions. The table on the left is titled '(a)' and has columns 'speed' and 'dist'. The table on the right is titled '(b)' and has columns 'temperature' and 'pressure'. Centered above both tables is the text 'Table 1: Tables'.\" fig-align=\"center\" width=\"80%\"}\n\n\n### Code Listings\n\nTo create a reference-able code block, add a `#lst-` identifier along with a `lst-cap` attribute. For example:\n\n```` markdown\n```{#lst-customers .sql lst-cap=\"Customers Query\"}\nSELECT * FROM Customers\n```\n\nThen we query the customers database (@lst-customers).\n````\n\nTo create a cross-reference to a code listing using div syntax, create a fenced div with an id starting with `lst-`, include the code cell followed by the caption inside the div:   \n\n````markdown\n::: {#lst-customers}\n\n```{.sql}\nSELECT * FROM Customers\n```\n\nCustomers Query\n\n:::\n````\n\n\nYou can read more about using div syntax for code listings in [Cross-Reference Div Syntax](cross-references-divs.qmd).\n\nTo cross-reference code from an executable code block, add the code cell options `lst-label` and `lst-cap`. The option `lst-label` provides the cross reference identifier and must begin with the prefix `lst-` to be treated as a code listing. The value of `lst-cap` provides the caption for the code listing. For example:\n\n````{.markdown}\n```{{python}}\n#| lst-label: lst-import\n#| lst-cap: Import pyplot\n\nimport matplotlib.pyplot as plt\n```\n\n@lst-import...\n````\n\nWhen rendered, this results in the following:\n\n::: {.border .p-3}\n\n::: {#7f1fcda9 .cell execution_count=1}\n``` {#lst-import .python .cell-code lst-cap=\"Import pyplot\"}\nimport matplotlib.pyplot as plt\n```\n:::\n\n\n@lst-import...\n\n:::\n\nIf the code cell produces a figure or table, you can combine the `lst-` options with `label` and `fig-cap`/`tbl-cap` to create cross references to both the code and output:\n\n````{.markdown}\n```{{python}}\n#| label: fig-plot\n#| fig-cap: Figure caption\n#| lst-label: lst-plot\n#| lst-cap: Listing caption\n\nplt.plot([1,23,2,4])\nplt.show()\n```\n\nThe code in @lst-plot produces the figure in @fig-plot.\n````\n\nWhen rendered, this produces the following output:\n\n:::{.border .p-3}\n\n::: {#cell-fig-plot .cell execution_count=2}\n``` {#lst-plot .python .cell-code lst-cap=\"Listing caption\"}\nplt.plot([1,23,2,4])\nplt.show()\n```\n\n::: {.cell-output .cell-output-display}\n![Figure caption](cross-references_files/figure-html/fig-plot-output-1.png){#fig-plot width=566 height=411 fig-alt='Figure alt text'}\n:::\n:::\n\n\nThe code in @lst-plot produces the plot in @fig-plot.\n:::\n\n\n## Callouts\n\nTo cross-reference a callout, add an ID attribute that starts with the appropriate callout prefix (see @tbl-callout-prefixes). You can then reference the callout using the usual `@` syntax. For example, here we add the ID `#tip-example` to the callout, and then refer back to it:\n\n``` markdown\n::: {#tip-example .callout-tip}\n## Cross-Referencing a Tip\n\nAdd an ID starting with `#tip-` to reference a tip.\n:::\n\nSee @tip-example...\n```\n\nThis renders as follows:\n\n::: {.border .p-3}\n::: {#tip-example .callout-tip}\n## Cross-Referencing a Tip\n\nAdd an ID starting with `#tip-` to reference a tip.\n:::\n\nSee @tip-example...\n:::\n\nThe prefixes for each type of callout are:\n\n| Callout Type | Prefix  |\n|--------------|---------|\n| `note`       | `#nte-` |\n| `tip`        | `#tip-` |\n| `warning`    | `#wrn-` |\n| `important`  | `#imp-` |\n| `caution`    | `#cau-` |\n\n: Prefixes for callout cross-references {#tbl-callout-prefixes}\n\nThe text used for each callout cross-reference (for example, \"Note 1\" in \"See Note 1...\") can be localised by setting `crossref-{nte,tip,wrn,imp,cau}-prefix` under `language:`:\n\n``` yaml\n---\nlang: fr\nlanguage:\n  crossref-nte-prefix: \"Note\"\n  crossref-tip-prefix: \"Astuce\"\n  crossref-wrn-prefix: \"Avertissement\"\n  crossref-imp-prefix: \"Important\"\n  crossref-cau-prefix: \"Mise en garde\"\n---\n```\n\nSee [Cross-Reference Titles and Prefixes](language.qmd#cross-reference-titles-and-prefixes) for the full localisation pattern, including per-language subkeys.\n\n\n## Theorems and Proofs\n\nTheorems are commonly used in articles and books in mathematics. To include a reference-able theorem, create a div with a `#thm-` label (or one of other theorem-type labels described below). You also need to specify a theorem name either via the first heading in the block. You can include any content you like within the div. For example:\n\n``` markdown\n::: {#thm-line}\n\n## Line\n\nThe equation of any straight line, called a linear equation, can be written as:\n\n$$\ny = mx + b\n$$\n:::\n\nSee @thm-line.\n```\n\n![](images/crossref-theorem.png){fig-alt=\"A snippet of a LaTeX document. The first line reads: 'Thereom 1 (Line) The equation of any straight line, called a linear equation, can be written as:' Cenetered on a separate line is the equation 'y = mx + b'. The text 'See thm. 1' is aligned to the left underneath that.\"}\n\nFor LaTeX output, the [amsthm](https://ctan.org/pkg/amsthm?lang=en) package is used for typesetting theorems. For other formats an appropriate treatment is used (the above is an example of HTML output).\n\nThere are a number of theorem variations supported, each with their own label prefix:\n\n| **Label Prefix** | **Printed Name** | **LaTeX Environment** |\n|------------------|------------------|-----------------------|\n| `#thm-`          | Theorem          | theorem               |\n| `#lem-`          | Lemma            | lemma                 |\n| `#cor-`          | Corollary        | corollary             |\n| `#prp-`          | Proposition      | proposition           |\n| `#cnj-`          | Conjecture       | conjecture            |\n| `#def-`          | Definition       | definition            |\n| `#exm-`          | Example          | example               |\n| `#exr-`          | Exercise         | exercise              |\n| `#sol-`          | Solution         | solution              |\n| `#rem-`          | Remark           | remark                |\n| `#alg-`          | Algorithm        | algorithm             |\n\nThe `proof` environment receives similar typesetting as theorems, however it is not numbered (and therefore cannot be cross-referenced). To create a proof add the `.proof` class to a div:\n\n``` markdown\n::: {.proof}\nBy induction.\n:::\n```\n\nAs with theorems you can optionally include a heading as the first element of the div (or a `name` attribute) to give the environment a caption for typesetting (this typically appears in parentheses after the environment title).\n\nFor LaTeX output the [amsthm](https://ctan.org/pkg/amsthm?lang=en) package is used to typeset these environments. For other formats a similar treatment is used, but you can further customizing this using CSS.\n\n## Equations\n\nProvide an `#eq-` label immediately after an equation to make it referenceable. For example:\n\n``` markdown\nBlack-Scholes (@eq-black-scholes) is a mathematical model that seeks to explain the behavior of financial derivatives, most commonly options:\n\n$$\n\\frac{\\partial \\mathrm C}{ \\partial \\mathrm t } + \\frac{1}{2}\\sigma^{2} \\mathrm S^{2}\n\\frac{\\partial^{2} \\mathrm C}{\\partial \\mathrm S^2}\n  + \\mathrm r \\mathrm S \\frac{\\partial \\mathrm C}{\\partial \\mathrm S}\\ =\n  \\mathrm r \\mathrm C \n$$ {#eq-black-scholes}\n```\n\nBlack-Scholes (@eq-black-scholes) is a mathematical model that seeks to explain the behavior of financial derivatives, most commonly options:\n\n$$\n\\frac{\\partial \\mathrm C}{ \\partial \\mathrm t } + \\frac{1}{2}\\sigma^{2} \\mathrm S^{2}\n\\frac{\\partial^{2} \\mathrm C}{\\partial \\mathrm S^2}\n  + \\mathrm r \\mathrm S \\frac{\\partial \\mathrm C}{\\partial \\mathrm S}\\ =\n  \\mathrm r \\mathrm C \n$$ {#eq-black-scholes}\n\nNote that the equation number is included (via `\\qquad`) in the right margin of the equation.\n\n## Sections\n\nTo reference a section, add a `#sec-` identifier to any heading. For example:\n\n``` markdown\n## Introduction {#sec-introduction}\n\nSee @sec-introduction for additional context.\n```\n\nNote that when using section cross-references, you will also need to enable the `number-sections` option (so that section numbering is visible to readers). For example:\n\n``` yaml\n---\ntitle: \"My Document\"\nnumber-sections: true\n---\n```\n\n",
+    "markdown": "---\ntitle: \"Cross References\"\ntoc-expand: 2\ntoc-depth: 4\naliases: \n  - /docs/authoring/cross-references-listings.html\n  - /docs/authoring/cross-references-callouts.html\n---\n\n## Overview\n\nCross-references make it easier for readers to navigate your document by providing numbered references and hyperlinks to various entities like figures and tables. Every cross-referenceable entity requires a label---a unique identifier prefixed with a cross-reference type e.g. `#fig-element`. For example, this is a cross-referenceable figure:\n\n``` markdown\n![Elephant](elephant.png){#fig-elephant}\n```\n\nThe presence of the label (`#fig-elephant`) makes this figure referenceable. This enables you to use the following syntax to refer to it elsewhere in the document:\n\n``` markdown\nSee @fig-elephant for an illustration.\n```\n\nHere is what this would look like rendered to HTML:\n\n![](images/crossref-figure.png){.border fig-alt=\"A line drawing of an elephant. The caption 'Figure 1: Elephant' is centered beneath it.\" width=\"100%\"}\n\nNote that cross reference identifiers must start with their type (e.g. `fig-` or `tbl-`). So the identifier `#fig-elephant` is valid for a cross-reference but the identifiers `#elephant` and `#elephant-fig` are not.\n\n::: {#reserved-prefixes}\n::: {.callout-warning}\n\n## Reserved Prefixes \n\nUnless you are creating a cross-reference, avoid using the reserved cross-reference prefixes for code cell labels (e.g. set using the `label` code cell option) and element IDs (set using a `#` in an attribute). \n \nThe reserved prefixes are: `fig`, `tbl`, `lst`, `tip`, `nte`, `wrn`, `imp`, `cau`, `thm`, `lem`, `cor`, `prp`, `cnj`, `def`, `exm`, `exr`, `sol`, `rem`, `alg`, `eq`, `sec`.\n\nAlso avoid using underscores (`_`) in labels and IDs as this can cause problems when rendering to PDF with LaTeX.\n\n:::\n:::\n\nQuarto enables you to create cross-references to figures, tables, equations, sections, code listings, theorems, proofs, and more. Cross references can also be applied to dynamic output from Knitr and Jupyter. \n\nOn this page you'll learn:\n\n*  Different ways to use the `@` syntax to create [References](#references).\n*  How to add [Lists](#lists) of references in LaTeX / PDF output.\n\nThen, we enumerate the syntax for the different types of elements you might want to reference:\n\n*  [Floats](#floats): [Figures](#figures), [Tables](#tables) and [Code Listings](#code-listings)\n* Blocks: [Callouts](#callouts), [Theorems and Proofs](#theorems-and-proofs) and [Equations](#equations) \n*  [Sections](#sections)\n\nThere are options available that control the text used for titles and references. For example, you could change \"Figure 1\" to read \"Fig 1\" or \"fig. 1\". See the [options documentation](cross-reference-options.qmd) for details on how to customize the text used for cross-references.\n\n## References\n\nThe examples on this page all use the default syntax for inline references (e.g. `@fig-elephant`), which results in the reference text \"Figure 1\", \"Table 1\", etc.\n\nYou can customize the appearance of inline references by either changing the syntax of the inline reference or by setting options. Here are the various ways to compose a cross-reference and their resulting output:\n\n| Type          | Syntax                | Output   |\n|---------------|-----------------------|----------|\n| Default       | `@fig-elephant`       | Figure 1 |\n| Capitalized   | `@Fig-elephant`       | Figure 1 |\n| Custom Prefix | `[Fig @fig-elephant]` | Fig 1    |\n| No Prefix     | `[-@fig-elephant]`    | 1        |\n\nNote that the capitalized syntax makes no difference for the default output, but would indeed capitalize the first letter if the default prefix had been changed via an [option](cross-reference-options.qmd#references) to use lower case (e.g. \"fig.\").\n\nThese syntax variations work not only for Figures, but for all cross-referenceable elements in Quarto such as Tables, Equations, Theorems, and so on.\n\nYou can also group cross-references using the following syntax:\n\n``` markdown\nAs illustrated in [@fig-elephant; @fig-panther; @fig-rabbit].\n```\n\nThere are a number of options that can be used to further customize the treatment of cross-references. See the guide on [Cross Reference Options](cross-reference-options.qmd#references) for additional details.\n\n## Lists\n\nFor LaTeX / PDF output, you can use the raw LaTeX commands `\\listoffigures`, `\\listoftables` and `\\listoflistings` to produce listings of all figures, tables, etc. within a document. You can use the `lof-title`, `lot-title`, and `lol-title` crossref options to customize the title of the listing.\n\nFor example:\n\n``` markdown\n---\ntitle: \"My Document\"\ncrossref:\n  lof-title: \"List of Figures\"\nformat: pdf\n---\n\n\\listoffigures\n```\n\nNote that the default titles for the lists use the form displayed above (i.e. \"List of \\<Type\\>\").\n\n## Floats\n\n[Figures](#figures), [tables](#tables) and [code listings](#code-listings) are known as \"float\" cross-references. Floats can appear in the rendered document at locations other than where they are defined, i.e. they float, and usually have captions. \n\nIn addition to the compact syntax for the most common uses of float cross-references, you can also define float cross-references with a div syntax. Use the div syntax when you need more flexibility in the content of your cross-reference, for example, to have a [video](cross-references-divs.qmd#videos) be referenced as a figure. Basic examples of the div syntax are included in the sections below, but you can find more complicated examples in [Cross-Reference Div Syntax](cross-references-divs.qmd). \n\nYou can also define custom types of float cross-reference to reference elements beyond figures, tables and code listings. Read more at [Custom Float Cross-References](cross-references-custom.qmd).\n\n\n### Figures\n\nAs described on the Overview above, this is the markdown used to create a cross-referenceable figure and then refer to it:\n\n``` markdown\n![Elephant](elephant.png){#fig-elephant}\n\nSee @fig-elephant for an illustration.\n```\n\nNote again that cross-reference identifiers must start with their type (e.g. `#fig-`) and that cross-reference identifiers must be all lower case.\n\nTo create a cross-reference to a figure using div syntax, create a fenced div with an id starting with `fig-`, include the image followed by the caption inside the div:\n\n````markdown\n::: {#fig-elephant}\n\n![](elephant.png)\n\nAn Elephant\n:::\n````\n\n\nYou can read about using div syntax with figures at [Cross-Reference Div Syntax](cross-references-divs.qmd#figures).\n\n#### Subfigures\n\nYou may want to create a figure composed of multiple subfigures. To do this, enclose the figures in a div (with its own label and caption) and give each subfigure its own label and (optionally) caption. You can then refer to either the entire figure in a reference or a single subfigure:\n\n``` markdown\n::: {#fig-elephants layout-ncol=2}\n\n![Surus](surus.png){#fig-surus}\n\n![Hanno](hanno.png){#fig-hanno}\n\nFamous Elephants\n:::\n\nSee @fig-elephants for examples. In particular, @fig-hanno.\n```\n\nHere is what this looks like when rendered as HTML:\n\n![](images/crossref-subfigures.png){.preview-image .border fig-alt=\"An artistic rendition of Surus, Hannibal's last war elephant, is on the left. Underneath this picture is the caption '(a) Surus.' On the right is a line drawing of Hanno, a famous elephant. Underneath this picture is the caption '(b) Hanno.' The words 'Figure 1: Famous elephants' are centered beneath both pictures. The text 'See fig. 1 for examples. In particular, fig. 1(b).' is underneath this text and is aligned to the left.\" width=\"100%\"}\n\nNote that we also used the `layout-ncol` attribute to specify a two-column layout. See the article on [Figures](figures.qmd) for more details on laying out panels of figures.\n\n#### Computations\n\nFigures produced by Jupyter and Knitr can also be cross-referenced. To do this, add a `label` and `fig-cap` option at the top of the code block. For example:\n\n::: panel-tabset\n##### Jupyter\n\n    ```{{python}}\n    #| label: fig-plot\n    #| fig-cap: \"Plot\"\n\n    import matplotlib.pyplot as plt\n    plt.plot([1,23,2,4])\n    plt.show()\n    ```\n\n    For example, see @fig-plot.\n\n![](images/crossref-figure-jupyter.png){fig-alt=\"A line plot with the label 'Figure 1: Plot' centered underneath it. The text 'For example, see fig. 1' is underneath this label and aligned to the left.\"}\n\n##### Knitr\n\n    ```{{r}}\n    #| label: fig-plot\n    #| fig-cap: \"Plot\"\n\n    plot(cars)\n    ```\n\n    For example, see @fig-plot.\n\n![](images/crossref-figure-r.png){fig-alt=\"A scatter plot of speed versus distance for the `cars` dataset. The label 'Figure 1: Plot' is centered beneath it. The text 'For example, see fig. 1' is aligned to the left underneath that.\"}\n:::\n\n::: {.callout-tip}\n\n## Computed Captions\n\nIf you need to generate a dynamic caption, instead of using the `fig-cap` or `tbl-cap` code cell option, combine inline code with the [Cross-Reference Div Syntax](/docs/authoring/cross-references-divs.qmd#computed-captions).\n\n:::\n\n\nYou can also create multiple figures within a code cell and reference them as subfigures. To do this use `fig-cap` for the main caption, and `fig-subcap` to provide an array of subcaptions. For example:\n\n    ```{{python}}\n    #| label: fig-plots\n    #| fig-cap: \"Plots\" \n    #| fig-subcap:\n    #|   - \"Plot 1\"\n    #|   - \"Plot 2\" \n    #| layout-ncol: 2\n\n    import matplotlib.pyplot as plt\n    plt.plot([1,23,2,4])\n    plt.show()\n\n    plt.plot([8,65,23,90])\n    plt.show()\n    ```\n\n    See @fig-plots for examples. In particular, @fig-plots-2.\n\n![](images/crossref-subfigures-jupyter.png){fig-alt=\"Two line plots side-by-side. The plot on the left has the caption '(a) Plot 1' centered underneath it. The plot on the right has the caption '(b) Plot 2' centered underneath it. The text 'Figure 1: Plots' is centered underneath both of these plots. The text 'See fig. 1 for examples. In particular, fig. 1(b)' is aligned to the left underneath that.\"}\n\nNote that subfigure reference labels are created automatically based on the main chunk label (e.g. `@fig-plots-1`, `@fig-plots-2`, etc.).\n\nIf you'd like subfigure captions that include only an identifier, e.g. \"(a)\", and not a text caption, then specify `fig-subcap: true` rather than providing explicit subcaption text:\n\n```{{python}}\n#| label: fig-plots\n#| fig-cap: \"Plots\" \n#| fig-subcap: true\n#| layout-ncol: 2\n```\n\n### Tables\n\n\n\nFor markdown tables, add a caption below the table, then include a `#tbl-` label in braces at the end of the caption. For example:\n\n``` markdown\n| Col1 | Col2 | Col3 |\n|------|------|------|\n| A    | B    | C    |\n| E    | F    | G    |\n| A    | G    | G    |\n\n: My Caption {#tbl-letters}\n\nSee @tbl-letters.\n```\n\nWhich looks like this when rendered to HTML:\n\n::: light-content\n![](images/crossref-table.png){fig-alt=\"A table with 3 columns and four rows. The text 'Table 1: My Caption' is above the header column. The text 'See tbl. 1' is aligned to the left underneath the last column.\" width=\"500\"}\n:::\n\n::: dark-content\n![](images/crossref-table-dark.png){fig-alt=\"A table with 3 columns and four rows. The text 'Table 1: My Caption' is above the header column. The text 'See tbl. 1' is aligned to the left underneath the last column.\" width=\"500\"}\n:::\n\n\n::: callout-important\n## Label Prefix\n\nIn order for a table to be cross-referenceable, its label must start with the `tbl-` prefix.\n:::\n\nTo create a cross-reference to a table using div syntax, create a fenced div with an id starting with `tbl-`, include the table followed by the caption inside the div:\n\n````markdown\n::: {#tbl-letters}\n\n| Col1 | Col2 | Col3 |\n|------|------|------|\n| A    | B    | C    |\n| E    | F    | G    |\n| A    | G    | G    |\n\nMy Caption\n\n::: \n````\n\n\nYou can read more about using div syntax with tables at [Cross-Reference Div Syntax](cross-references-divs.qmd#tables).\n\n#### Subtables\n\nYou may want to create a composition of several sub-tables. To do this, create a div with a main identifier, then apply sub-identifiers (and optional caption text) to the contained tables. For example:\n\n``` markdown\n::: {#tbl-panel layout-ncol=2}\n| Col1 | Col2 | Col3 |\n|------|------|------|\n| A    | B    | C    |\n| E    | F    | G    |\n| A    | G    | G    |\n\n: First Table {#tbl-first}\n\n| Col1 | Col2 | Col3 |\n|------|------|------|\n| A    | B    | C    |\n| E    | F    | G    |\n| A    | G    | G    |\n\n: Second Table {#tbl-second}\n\nMain Caption\n:::\n\nSee @tbl-panel for details, especially @tbl-second.\n```\n\nWhich looks like this when rendered to HTML:\n\n![](/docs/authoring/images/crossref-subtable.png){fig-alt=\"Two tables side-by-side. Both tables have 3 columns and 4 rows. The table on the left is titled '(a) First table'. The table on the right is titled '(b) Second Table'. Centered underneath both tables is the text 'Table 1: Main Caption'. The text 'See tbl. 2 for details, especially tbl. 2 (b)' is aligned to the left underneath that.\"}\n\nNote that the \"Main Caption\" for the table is provided as the last block within the containing div.\n\n\n#### Computations\n\nYou can also cross-reference tables created from code executed via computations. To do this, add the `label` and `tbl-cap` cell options. For example:\n\n```{{r}}\n#| label: tbl-iris\n#| tbl-cap: \"Iris Data\"\n\nlibrary(knitr)\nkable(head(iris))\n```\n\n![](/docs/authoring/images/crossref-table-knitr.png){fig-alt=\"Example table output.\" fig-align=\"center\" width=\"80%\"}\n\n::: {.callout-tip}\n\n## Computed Captions\n\nIf you need to generate a dynamic caption, instead of using the `fig-cap` or `tbl-cap` code cell option, combine inline code with the [Cross-Reference Div Syntax](/docs/authoring/cross-references-divs.qmd#computed-captions).\n\n:::\n\n\nYou can also create multiple tables within a code cell and reference them as subtables. To do this, add a `tbl-subcap` option with an array of subcaptions. For example:\n\n```{{r}}\n#| label: tbl-tables\n#| tbl-cap: \"Tables\"\n#| tbl-subcap:\n#|   - \"Cars\"\n#|   - \"Pressure\"\n#| layout-ncol: 2\n\nlibrary(knitr)\nkable(head(cars))\nkable(head(pressure))\n```\n\n![](/docs/authoring/images/crossref-subtable-knitr.png){fig-alt=\"Two tables side-by-side. Each table has 2 columns and 8 rows. The table on the left is titled '(a) Cars'. The table on the right is titled '(b) Pressure'. Centered underneath both tables is the text 'Table 1: Tables.'\" fig-align=\"center\" width=\"80%\"}\n\nIf you'd like subtable captions that include only an identifier, e.g. \"(a)\", and not a text caption, then specify `tbl-subcap: true` rather than providing explicit subcaption text:\n\n```{{r}}\n#| label: tbl-tables\n#| tbl-cap: \"Tables\"\n#| tbl-subcap: true\n#| layout-ncol: 2\n\nlibrary(knitr)\nkable(head(cars))\nkable(head(pressure))\n```\n\n![](/docs/authoring/images/crossref-subtable-nocaption-knitr.png){fig-alt=\"Two tables side-by-side, with identifier-only subcaptions. The table on the left is titled '(a)' and has columns 'speed' and 'dist'. The table on the right is titled '(b)' and has columns 'temperature' and 'pressure'. Centered above both tables is the text 'Table 1: Tables'.\" fig-align=\"center\" width=\"80%\"}\n\n\n### Code Listings\n\nTo create a reference-able code block, add a `#lst-` identifier along with a `lst-cap` attribute. For example:\n\n```` markdown\n```{#lst-customers .sql lst-cap=\"Customers Query\"}\nSELECT * FROM Customers\n```\n\nThen we query the customers database (@lst-customers).\n````\n\nTo create a cross-reference to a code listing using div syntax, create a fenced div with an id starting with `lst-`, include the code cell followed by the caption inside the div:   \n\n````markdown\n::: {#lst-customers}\n\n```{.sql}\nSELECT * FROM Customers\n```\n\nCustomers Query\n\n:::\n````\n\n\nYou can read more about using div syntax for code listings in [Cross-Reference Div Syntax](cross-references-divs.qmd).\n\nTo cross-reference code from an executable code block, add the code cell options `lst-label` and `lst-cap`. The option `lst-label` provides the cross reference identifier and must begin with the prefix `lst-` to be treated as a code listing. The value of `lst-cap` provides the caption for the code listing. For example:\n\n````{.markdown}\n```{{python}}\n#| lst-label: lst-import\n#| lst-cap: Import pyplot\n\nimport matplotlib.pyplot as plt\n```\n\n@lst-import...\n````\n\nWhen rendered, this results in the following:\n\n::: {.border .p-3}\n\n::: {#a7d22f6d .cell execution_count=1}\n``` {#lst-import .python .cell-code lst-cap=\"Import pyplot\"}\nimport matplotlib.pyplot as plt\n```\n:::\n\n\n@lst-import...\n\n:::\n\nIf the code cell produces a figure or table, you can combine the `lst-` options with `label` and `fig-cap`/`tbl-cap` to create cross references to both the code and output:\n\n````{.markdown}\n```{{python}}\n#| label: fig-plot\n#| fig-cap: Figure caption\n#| lst-label: lst-plot\n#| lst-cap: Listing caption\n\nplt.plot([1,23,2,4])\nplt.show()\n```\n\nThe code in @lst-plot produces the figure in @fig-plot.\n````\n\nWhen rendered, this produces the following output:\n\n:::{.border .p-3}\n\n::: {#cell-fig-plot .cell execution_count=2}\n``` {#lst-plot .python .cell-code lst-cap=\"Listing caption\"}\nplt.plot([1,23,2,4])\nplt.show()\n```\n\n::: {.cell-output .cell-output-display}\n![Figure caption](cross-references_files/figure-html/fig-plot-output-1.png){#fig-plot width=566 height=411 fig-alt='Figure alt text'}\n:::\n:::\n\n\nThe code in @lst-plot produces the plot in @fig-plot.\n:::\n\n\n## Callouts\n\nTo cross-reference a callout, add an ID attribute that starts with the appropriate callout prefix (see @tbl-callout-prefixes). You can then reference the callout using the usual `@` syntax. For example, here we add the ID `#tip-example` to the callout, and then refer back to it:\n\n``` markdown\n::: {#tip-example .callout-tip}\n## Cross-Referencing a Tip\n\nAdd an ID starting with `#tip-` to reference a tip.\n:::\n\nSee @tip-example...\n```\n\nThis renders as follows:\n\n::: {.border .p-3}\n::: {#tip-example .callout-tip}\n## Cross-Referencing a Tip\n\nAdd an ID starting with `#tip-` to reference a tip.\n:::\n\nSee @tip-example...\n:::\n\nThe prefixes for each type of callout are:\n\n| Callout Type | Prefix  |\n|--------------|---------|\n| `note`       | `#nte-` |\n| `tip`        | `#tip-` |\n| `warning`    | `#wrn-` |\n| `important`  | `#imp-` |\n| `caution`    | `#cau-` |\n\n: Prefixes for callout cross-references {#tbl-callout-prefixes}\n\nThe text used for each callout cross-reference (for example, \"Note 1\" in \"See Note 1...\") can be localised by setting `crossref-{nte,tip,wrn,imp,cau}-prefix` under `language:`:\n\n``` yaml\n---\nlang: fr\nlanguage:\n  crossref-nte-prefix: \"Note\"\n  crossref-tip-prefix: \"Astuce\"\n  crossref-wrn-prefix: \"Avertissement\"\n  crossref-imp-prefix: \"Important\"\n  crossref-cau-prefix: \"Mise en garde\"\n---\n```\n\nSee [Cross-Reference Titles and Prefixes](language.qmd#cross-reference-titles-and-prefixes) for the full localisation pattern, including per-language subkeys.\n\n\n## Theorems and Proofs\n\nTheorems are commonly used in articles and books in mathematics. To include a reference-able theorem, create a div with a `#thm-` label (or one of other theorem-type labels described below). You also need to specify a theorem name either via the first heading in the block. You can include any content you like within the div. For example:\n\n``` markdown\n::: {#thm-line}\n\n## Line\n\nThe equation of any straight line, called a linear equation, can be written as:\n\n$$\ny = mx + b\n$$\n:::\n\nSee @thm-line.\n```\n\n![](images/crossref-theorem.png){fig-alt=\"A snippet of a LaTeX document. The first line reads: 'Thereom 1 (Line) The equation of any straight line, called a linear equation, can be written as:' Cenetered on a separate line is the equation 'y = mx + b'. The text 'See thm. 1' is aligned to the left underneath that.\"}\n\nFor LaTeX output, the [amsthm](https://ctan.org/pkg/amsthm?lang=en) package is used for typesetting theorems. For other formats an appropriate treatment is used (the above is an example of HTML output).\n\nThere are a number of theorem variations supported, each with their own label prefix:\n\n| **Label Prefix** | **Printed Name** | **LaTeX Environment** |\n|------------------|------------------|-----------------------|\n| `#thm-`          | Theorem          | theorem               |\n| `#lem-`          | Lemma            | lemma                 |\n| `#cor-`          | Corollary        | corollary             |\n| `#prp-`          | Proposition      | proposition           |\n| `#cnj-`          | Conjecture       | conjecture            |\n| `#def-`          | Definition       | definition            |\n| `#exm-`          | Example          | example               |\n| `#exr-`          | Exercise         | exercise              |\n| `#sol-`          | Solution         | solution              |\n| `#rem-`          | Remark           | remark                |\n| `#alg-`          | Algorithm        | algorithm             |\n\nThe `proof` environment receives similar typesetting as theorems, however it is not numbered (and therefore cannot be cross-referenced). To create a proof add the `.proof` class to a div:\n\n``` markdown\n::: {.proof}\nBy induction.\n:::\n```\n\nAs with theorems you can optionally include a heading as the first element of the div (or a `name` attribute) to give the environment a caption for typesetting (this typically appears in parentheses after the environment title).\n\nFor LaTeX output the [amsthm](https://ctan.org/pkg/amsthm?lang=en) package is used to typeset these environments. For other formats a similar treatment is used, but you can further customizing this using CSS.\n\n## Equations\n\nProvide an `#eq-` label immediately after an equation to make it referenceable. For example:\n\n``` markdown\nBlack-Scholes (@eq-black-scholes) is a mathematical model that seeks to explain the behavior of financial derivatives, most commonly options:\n\n$$\n\\frac{\\partial \\mathrm C}{ \\partial \\mathrm t } + \\frac{1}{2}\\sigma^{2} \\mathrm S^{2}\n\\frac{\\partial^{2} \\mathrm C}{\\partial \\mathrm S^2}\n  + \\mathrm r \\mathrm S \\frac{\\partial \\mathrm C}{\\partial \\mathrm S}\\ =\n  \\mathrm r \\mathrm C \n$$ {#eq-black-scholes}\n```\n\nBlack-Scholes (@eq-black-scholes) is a mathematical model that seeks to explain the behavior of financial derivatives, most commonly options:\n\n$$\n\\frac{\\partial \\mathrm C}{ \\partial \\mathrm t } + \\frac{1}{2}\\sigma^{2} \\mathrm S^{2}\n\\frac{\\partial^{2} \\mathrm C}{\\partial \\mathrm S^2}\n  + \\mathrm r \\mathrm S \\frac{\\partial \\mathrm C}{\\partial \\mathrm S}\\ =\n  \\mathrm r \\mathrm C \n$$ {#eq-black-scholes}\n\nNote that the equation number is included (via `\\qquad`) in the right margin of the equation.\n\n## Sections\n\nTo reference a section, add a `#sec-` identifier to any heading. For example:\n\n``` markdown\n## Introduction {#sec-introduction}\n\nSee @sec-introduction for additional context.\n```\n\nNote that when using section cross-references, you will also need to enable the `number-sections` option (so that section numbering is visible to readers). For example:\n\n``` yaml\n---\ntitle: \"My Document\"\nnumber-sections: true\n---\n```\n\n",
     "supporting": [
       "cross-references_files"
     ],
diff --git a/_freeze/docs/computations/execution-options/execute-results/html.json b/_freeze/docs/computations/execution-options/execute-results/html.json
index 42146648c2..894a54b530 100644
--- a/_freeze/docs/computations/execution-options/execute-results/html.json
+++ b/_freeze/docs/computations/execution-options/execute-results/html.json
@@ -1,8 +1,8 @@
 {
-  "hash": "a4292d20e38496d5953c4aec8d680013",
+  "hash": "2df2823e4dd071cfb349b38cf924e82a",
   "result": {
     "engine": "jupyter",
-    "markdown": "---\ntitle: Execution Options\nformat: html\n---\n\n## Output Options\n\nThere are a wide variety of options available for customizing output from executed code. All of these options can be specified either globally (in the document front-matter) or per code-block. For example, here's a modification of the Python example to specify that we don't want to \"echo\" the code into the output document:\n\n``` yaml\n---\ntitle: \"My Document\"\nexecute:\n  echo: false\njupyter: python3\n---\n```\n\nNote that we can override this option on a per code-block basis. For example:\n\n```{{python}}\n#| echo: true\n\nimport matplotlib.pyplot as plt\nplt.plot([1,2,3,4])\nplt.show()\n```\n\nCode block options are included in a special comment at the top of the block (lines at the top prefaced with `#|` are considered options).\n\nOptions available for customizing output include:\n\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| Option       | Description                                                                                                                                                                                       |\n+==============+===================================================================================================================================================================================================+\n| `eval`       | Evaluate the code chunk (if `false`, just echos the code into the output).                                                                                                                        |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `echo`       | Include the source code in output                                                                                                                                                                 |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `output`     | Include the results of executing the code in the output (`true`, `false`, or `asis` to indicate that the output is raw markdown and should not have any of Quarto's standard enclosing markdown). |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `warning`    | Include warnings in the output.                                                                                                                                                                   |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `error`      | Include errors in the output (note that this implies that errors executing code will not halt processing of the document).                                                                        |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `include`    | Catch all for preventing any output (code or results) from being included (e.g. `include: false` suppresses all output from the code block).                                                      |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `renderings` | Specify rendering names for the plot or table outputs of the cell, e.g. `[light, dark]`                                                                                                           |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n\nHere's a Knitr example with some of these additional options included:\n\n````         \n---\ntitle: \"Knitr Document\"\nexecute:\n  echo: false\n---\n\n```{{r}}\n#| warning: false\n\nlibrary(ggplot2)\nggplot(airquality, aes(Temp, Ozone)) + \n  geom_point() + \n  geom_smooth(method = \"loess\", se = FALSE)\n```\n\n```{{r}}\nsummary(airquality)\n```\n````\n\n### Cell Renderings\n\nHere is an example of using `renderings` to provide light and dark versions of a plot. Note that the number of cell outputs must match the number of renderings.\n\n````\n---\ntitle: \"Dark mode\"\nformat: \n  html:\n    theme:\n      light: flatly\n      dark: darkly\n---\n\n```{{r}}\n#| renderings: [light, dark]\npar(bg = \"#FFFFFF\", fg = \"#000000\")\nplot(1:10) # Shown in `light` mode\n\npar(bg = \"#000000\", fg = \"#FFFFFF\", col.axis = \"#FFFFFF\")\nplot(1:10) # Shown in `dark` mode\n```\n````\n\n::: {layout-ncol=2}\n\n![light rendering](images/renderings-light-mode.png){fig-alt=\"The code cell and a scatterplot of 1:10 with black points and axes on a white background.\"}\n\n![dark rendering](images/renderings-dark-mode.png){fig-alt=\"The code cell and a scatterplot of 1:10 with white points and axes on a black background.\"}\n\n:::\n\nThe `renderings` cell option does not currently work correctly with cell cross-reference options (`label` starting with `fig-`, `tbl-`, etc.) or cell caption options (`fig-cap`, `tbl-cap`, etc.).\n\n\nTo combine `renderings` with crossrefs and/or captions, use the fenced div syntax:\n\n\n````\n---\ntitle: \"Dark mode\"\nformat:\n  html:\n    theme:\n      light: flatly\n      dark: darkly\n---\n\n::: {#fig-caption-crossref}\n\n```{{r}}\n#| label: caption-crossref\n#| renderings: [light, dark]\npar(bg = \"#FFFFFF\", fg = \"#000000\")\nplot(1:10) # Shown in `light` mode\n\n\npar(bg = \"#000000\", fg = \"#FFFFFF\", col.axis = \"#FFFFFF\")\nplot(1:10) # Shown in `dark` mode\n```\n\nLight and dark renderings with a caption and crossref\n\n:::\n````\n\nNote the use of a `label` that is not a cross-reference, i.e. that does not start with one of the [cross reference types](../authoring/cross-references.qmd#overview). It is a good practice to have named cells with `label`, for debuggability and stable resource names. However, cross-reference labels that start with `fig-`, `tbl-`, etc., will not work with `renderings`.\n\n\n\n::: callout-tip\nWhen using the Knitr engine, you can also use any of the available native options (e.g. `collapse`, `tidy`, `comment`, etc.). See the [Knitr options documentation](https://yihui.org/knitr/options/) for additional details. You can include these native options in option comment blocks as shown above, or on the same line as the `{r}` as shown in the Knitr documentation.\n:::\n\n::: callout-tip\nThe Knitr engine can also *conditionally* evaluate a code chunk using objects or expressions. See [Using R: Knitr Options](r.qmd#chunk-options).\n:::\n\n## Figure Options\n\nThere are a number of ways to control the default width and height of figures generated from code. First, it's important to know that Quarto sets a default width and height for figures appropriate to the target output format. Here are the defaults (expressed in inches):\n\n| Format                  | Default   |\n|-------------------------|-----------|\n| Default                 | 7 x 5     |\n| HTML Slides             | 9.5 x 6.5 |\n| HTML Slides (reveal.js) | 9 x 5     |\n| PDF                     | 5.5 x 3.5 |\n| PDF Slides (Beamer)     | 10 x 7    |\n| PowerPoint              | 7.5 x 5.5 |\n| MS Word, ODT, RTF       | 5 x 4     |\n| EPUB                    | 5 x 4     |\n| Hugo                    | 8 x 5     |\n\nThese defaults were chosen to provide attractive well proportioned figures, but feel free to experiment to see whether you prefer another default size. You can change the default sizes using the `fig-width` and `fig-height` options. For example:\n\n``` yaml\n---\ntitle: \"My Document\"\nformat: \n  html:\n    fig-width: 8\n    fig-height: 6\n  pdf:\n    fig-width: 7\n    fig-height: 5\n---\n```\n\nHow do these sizes make their way into the engine-level defaults for generating figures? This differs by engine:\n\n-   For the Knitr engine, these values become the default values for the `fig.width` and `fig.height` chunk options. You can override these default values via chunk level options.\n\n-   For Python, these values are used to set the [Matplotlib](https://matplotlib.org/stable/tutorials/introductory/customizing.html) `figure.figsize` rcParam (you can of course manually override these defaults for any given plot).\n\n-   For Julia, these values are used to initialize the default figure size for the [Plots.jl](https://docs.juliaplots.org/stable/) GR backend.\n\n    If you are using another graphics library with Jupyter and want to utilize these values, you can read them from `QUARTO_FIG_WIDTH` and `QUARTO_FIG_HEIGHT` environment variables.\n\n::: callout-caution\nWhen using the Jupyter engine, `fig-width` and `fig-height` are only supported if specified at the document- or project-level. \nHowever, when using the Knitr engine, these options are also supported as code cell options on a per-cell basis.\n:::\n\n### Caption and Alt Text\n\nYou can specify the caption and alt text for figures generated from code using the `fig-cap` and `fig-alt` options. For example, here we add these options to a Python code cell that creates a plot:\n\n```{{python}}\n#| fig-cap: \"Polar axis plot\"\n#| fig-alt: \"A line plot on a polar axis\"\n\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nr = np.arange(0, 2, 0.01)\ntheta = 2 * np.pi * r\nfig, ax = plt.subplots(subplot_kw={'projection': 'polar'})\nax.plot(theta, r)\nax.set_rticks([0.5, 1, 1.5, 2])\nax.grid(True)\nplt.show()\n```\n\n## Inline Code\n\nJupyter, Knitr and OJS all support executing inline code within markdown (e.g. to allow narrative to automatically use the most up to date computations). See [Inline Code](inline-code.qmd) for details.\n\n## Raw Output\n\nThe `output: asis` option enables you to generate raw markdown output. When `output: asis` is specified none of Quarto's standard enclosing divs will be included. For example, here we specify `output: asis` in order to generate a pair of headings:\n\n::: panel-tabset\n## Jupyter\n\n```{{python}}\n#| echo: false\n#| output: asis\n\nprint(\"# Heading 1\\n\")\nprint(\"## Heading 2\\n\")\n```\n\n## Knitr\n\n```{{r}}\n#| echo: false\n#| output: asis\n\ncat(\"# Heading 1\\n\")\ncat(\"## Heading 2\\n\")\n```\n:::\n\nWhich generates the following output:\n\n``` default\n# Heading 1\n\n## Heading 2\n```\n\nNote that we also include the `echo: false` option to ensure that the code used to generate markdown isn't included in the final output.\n\nIf we had not specified `output: asis` the output, as seen in the intermediate markdown, would have included Quarto's `.cell-output` div:\n\n```` default\n::: {.cell-output-stdout}\n```\n# Heading 1\n\n## Heading 2\n  \n```\n:::\n````\n\nFor the Jupyter engine, you can also create raw markdown output using the functions in `IPython.display`. For example:\n\n```{{python}}\n#| echo: false\nradius = 10\nfrom IPython.display import Markdown\nMarkdown(f\"The _radius_ of the circle is **{radius}**.\")\n```\n\n## Knitr Options\n\nIf you are using the Knitr cell execution engine, you can specify default document-level [Knitr chunk options](https://yihui.org/knitr/options/) in YAML. For example:\n\n``` yaml\n---\ntitle: \"My Document\"\nformat: html\nknitr:\n  opts_chunk: \n    collapse: true\n    comment: \"#>\" \n    R.options:\n      knitr.graphics.auto_pdf: true\n---\n```\n\nYou can additionally specify global Knitr options using `opts_knit`.\n\nThe `R.options` chunk option is a convenient way to define R options that are set temporarily via [`options()`](https://rdrr.io/r/base/options.html) before the code chunk execution, and immediately restored afterwards.\n\nIn the example above, we establish default Knitr chunk options for a single document. You can also add shared `knitr` options to a project-wide `_quarto.yml` file or a project-directory scoped `_metadata.yml` file.\n\n\n## Jupyter Options\n\n### Expression Printing\n\nWhen multiple expressions are present in a code cell, by default, only the last top-level expression is captured in the rendered output. For example, consider the code cell:\n\n::: {layout-ncol=\"2\"}\n```` markdown\n```{{python}}\n\"first\"\n\"last\"\n```\n````\n:::\n\nWhen rendered to HTML the output generated is:\n\n``` markdown\n'last'\n```\n\nThis behavior corresponds to the `last_expr` setting for [Jupyter shell interactivity](https://ipython.readthedocs.io/en/stable/config/options/terminal.html#configtrait-InteractiveShell.ast_node_interactivity).\n\nYou can control this behavior with the `ipynb-shell-interactivity` option. For example, to capture all top-level expressions set it to `all`:\n\n``` yaml\n---\ntitle: All expressions\nformat: html\nipynb-shell-interactivity: all\n---\n```\n\nNow the above code cell results in the output:\n\n``` markdown\n'first'\n\n'last'\n```\n\n::: callout-note\n## All Expressions are Printed in Dashboards\n\nFor [dashboards](/docs/dashboards/index.qmd) the default setting of `ipynb-shell-interactivity` is `all.`\n:::\n\n## Intermediates\n\nOn the way from markdown input to final output, there are some intermediate files that are created and automatically deleted at the end of rendering. You can use the following options to keep these intermediate files:\n\n+--------------+------------------------------------------------------------------------------------------------+\n| Option       | Description                                                                                    |\n+==============+================================================================================================+\n| `keep-md`    | Keep the markdown file generated by executing code.                                            |\n+--------------+------------------------------------------------------------------------------------------------+\n| `keep-ipynb` | Keep the notebook file generated from executing code (applicable only to markdown input files) |\n+--------------+------------------------------------------------------------------------------------------------+\n\nFor example, here we specify that we want to keep the jupyter intermediate file after rendering:\n\n``` yaml\n---\ntitle: \"My Document\"\nexecute:\n  keep-ipynb: true\njupyter: python3\n---\n```\n\n## Fenced Echo\n\nIf you are writing a tutorial or documentation on using Quarto code blocks, you'll likely want to include the fenced code delimiter (e.g. ```` ```{python} ````) in your code output to emphasize that executable code requires that delimiter. You can do this using the `echo: fenced` option. For example, the following code block:\n\n```{{python}}\n#| echo: fenced\n1 + 1\n```\n\nWill be rendered as:\n\n::: {#ab486dd1 .cell execution_count=1}\n```` { .cell-code}\n```{{python}}\n1 + 1\n```\n\n````\n\n::: {.cell-output .cell-output-display execution_count=1}\n```\n2\n```\n:::\n:::\n\n\nThis is especially useful when you want to demonstrate the use of cell options. For example, here we demonstrate the use of the `output` and `code-overflow` options:\n\n```{{python}}\n#| echo: fenced\n#| output: false\n#| code-overflow: wrap\n1 + 1\n```\n\nThis code block appears in the rendered document as:\n\n::: {#3fb452a1 .cell execution_count=2}\n```` { .cell-code .code-overflow-wrap}\n```{{python}}\n#| output: false\n#| code-overflow: wrap\n1 + 1\n```\n\n````\n:::\n\n\nNote that all YAML options will be included in the fenced code output *except for* `echo: fenced` (as that might be confusing to readers).\n\nThis behavior can also be specified at the document level if you want all of your executable code blocks to include the fenced delimiter and YAML options:\n\n``` yaml\n---\ntitle: \"My Document\"\nformat: html\nexecute:\n  echo: fenced\n---\n```\n\n### Unexecuted Blocks {.unlisted}\n\n\n\nOften you'll want to include a fenced code block purely as documentation (not executable). You can do this by using two curly braces around the language (e.g. `python`, `r`, etc.) rather than one. For example:\n\n```{{{python}}}\n1 + 1\n```\n\nWill be output into the document as:\n\n```{{python}}\n1 + 1\n```\n\nIf you want to show an example with multiple code blocks and other markdown, just enclose the entire example in 4 backticks (e.g. ````` ```` `````) and use the two curly brace syntax for code blocks within. For example:\n\n    ````\n    ---\n    title: \"My document\"\n    ---\n\n    Some markdown content.\n\n    ```{{{python}}}\n    1 + 1\n    ```\n\n    Some additional markdown content.\n\n    ````\n\n\n## Engine Binding\n\nEarlier we said that the engine used for computations was determined automatically. You may want to customize this---for example you may want to use the Jupyter [R kernel](https://github.com/IRkernel/IRkernel) rather than Knitr, or you may want to use Knitr with Python code (via [reticulate](https://rstudio.github.io/reticulate/)).\n\nHere are the basic rules for automatic binding:\n\n+-----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| Extension | Engine Binding                                                                                                                                                                                                                         |\n+===========+========================================================================================================================================================================================================================================+\n| .qmd      | Use Knitr engine if an `{r}` code block is discovered within the file                                                                                                                                                                  |\n|           |                                                                                                                                                                                                                                        |\n|           | Use Jupyter engine if *any other* executable code block (e.g. `{python}`, `{julia}`, `{bash}`, etc.) is discovered within the file. The kernel used is determined based on the language of the first executable code block discovered. |\n|           |                                                                                                                                                                                                                                        |\n|           | Use no engine if no executable code blocks are discovered.                                                                                                                                                                             |\n+-----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| .ipynb    | Jupyter engine                                                                                                                                                                                                                         |\n+-----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| .Rmd      | Knitr engine                                                                                                                                                                                                                           |\n+-----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| .md       | No engine (note that if an `md` document does contain executable code blocks then an error will occur)                                                                                                                                 |\n+-----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n\n::: callout-note\n\n## Using python and r together\n\nIf your quarto document includes both `{python}` and `{r}` code blocks, then quarto will automatically use Knitr engine and [reticulate](https://rstudio.github.io/reticulate/) R package to execute the python content.\n:::\n\nFor `.qmd` files in particular, you can override the engine used via the `engine` option. For example:\n\n``` markdown\nengine: jupyter\n```\n\n``` markdown\nengine: knitr\n```\n\nYou can also specify that no execution engine should be used via `engine: markdown`.\n\nThe presence of the `knitr` or `jupyter` option will also override the default engine:\n\n``` markdown\nknitr: true\n```\n\n``` markdown\njupyter: python3\n```\n\nVariations with additional engine-specific options also work to override the default engine:\n\n``` markdown\nknitr:\n  opts_knit:\n    verbose: true\n```\n\n``` markdown\njupyter:\n  kernelspec:\n    display_name: Python 3\n    language: python\n    name: python3\n```\n\n## Shell Commands\n\nUsing shell commands (from Bash, Zsh, etc.) within Quarto computational documents differs by engine. If you are using the Jupyter engine you can use [Jupyter shell magics](https://jakevdp.github.io/PythonDataScienceHandbook/01.05-ipython-and-shell-commands.html). For example:\n\n```` markdown\n---\ntitle: \"Using Bash\"\nengine: jupyter\n---\n\n```{{python}}\n!echo \"foo\"\n```\n````\n\nNote that `!` preceding `echo` is what enables a Python cell to be able to execute a shell command.\n\nIf you are using the Knitr engine you can use ```` ```{bash} ```` cells, for example:\n\n```` markdown\n---\ntitle: \"Using Bash\"\nengine: knitr\n---\n\n```{{bash}}\necho \"foo\" \n```\n````\n\nNote that the Knitr engine also supports ```` ```{python} ```` cells, enabling the combination of R, Python, and Bash in the same document\n\n## Conditional Execution\n\nIn some cases you want code execution itself — not just visibility of its output — to depend on the active output format. For example, when rendering to PDF you may want to skip a cell that loads an interactive HTML widget, rather than execute it and hide the result.\n\nQuarto exposes the current rendering context in the `QUARTO_EXECUTE_INFO` environment variable. Cells can read this variable to detect the active format and branch accordingly. See [Execution Context Information](/docs/advanced/quarto-execute-info.qmd) for the full JSON schema and examples in R, Python, and Julia.\n\nThis complements format-based [conditional content](/docs/authoring/conditional.qmd), which controls visibility of *already-executed* output. `QUARTO_EXECUTE_INFO` lets you skip work, choose a different code path, or load a different library before any output is produced.\n\n",
+    "markdown": "---\ntitle: Execution Options\n---\n\n## Output Options\n\nThere are a wide variety of options available for customizing output from executed code. All of these options can be specified either globally (in the document front-matter) or per code-block. For example, here's a modification of the Python example to specify that we don't want to \"echo\" the code into the output document:\n\n``` yaml\n---\ntitle: \"My Document\"\nexecute:\n  echo: false\njupyter: python3\n---\n```\n\nNote that we can override this option on a per code-block basis. For example:\n\n```{{python}}\n#| echo: true\n\nimport matplotlib.pyplot as plt\nplt.plot([1,2,3,4])\nplt.show()\n```\n\nCode block options are included in a special comment at the top of the block (lines at the top prefaced with `#|` are considered options).\n\nOptions available for customizing output include:\n\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| Option       | Description                                                                                                                                                                                       |\n+==============+===================================================================================================================================================================================================+\n| `eval`       | Evaluate the code chunk (if `false`, just echos the code into the output).                                                                                                                        |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `echo`       | Include the source code in output                                                                                                                                                                 |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `output`     | Include the results of executing the code in the output (`true`, `false`, or `asis` to indicate that the output is raw markdown and should not have any of Quarto's standard enclosing markdown). |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `warning`    | Include warnings in the output.                                                                                                                                                                   |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `error`      | Include errors in the output (note that this implies that errors executing code will not halt processing of the document).                                                                        |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `include`    | Catch all for preventing any output (code or results) from being included (e.g. `include: false` suppresses all output from the code block).                                                      |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| `renderings` | Specify rendering names for the plot or table outputs of the cell, e.g. `[light, dark]`                                                                                                           |\n+--------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n\nHere's a Knitr example with some of these additional options included:\n\n````         \n---\ntitle: \"Knitr Document\"\nexecute:\n  echo: false\n---\n\n```{{r}}\n#| warning: false\n\nlibrary(ggplot2)\nggplot(airquality, aes(Temp, Ozone)) + \n  geom_point() + \n  geom_smooth(method = \"loess\", se = FALSE)\n```\n\n```{{r}}\nsummary(airquality)\n```\n````\n\n### Cell Renderings\n\nHere is an example of using `renderings` to provide light and dark versions of a plot. Note that the number of cell outputs must match the number of renderings.\n\n````\n---\ntitle: \"Dark mode\"\nformat: \n  html:\n    theme:\n      light: flatly\n      dark: darkly\n---\n\n```{{r}}\n#| renderings: [light, dark]\npar(bg = \"#FFFFFF\", fg = \"#000000\")\nplot(1:10) # Shown in `light` mode\n\npar(bg = \"#000000\", fg = \"#FFFFFF\", col.axis = \"#FFFFFF\")\nplot(1:10) # Shown in `dark` mode\n```\n````\n\n::: {layout-ncol=2}\n\n![light rendering](images/renderings-light-mode.png){fig-alt=\"The code cell and a scatterplot of 1:10 with black points and axes on a white background.\"}\n\n![dark rendering](images/renderings-dark-mode.png){fig-alt=\"The code cell and a scatterplot of 1:10 with white points and axes on a black background.\"}\n\n:::\n\nThe `renderings` cell option does not currently work correctly with cell cross-reference options (`label` starting with `fig-`, `tbl-`, etc.) or cell caption options (`fig-cap`, `tbl-cap`, etc.).\n\n\nTo combine `renderings` with crossrefs and/or captions, use the fenced div syntax:\n\n\n````\n---\ntitle: \"Dark mode\"\nformat:\n  html:\n    theme:\n      light: flatly\n      dark: darkly\n---\n\n::: {#fig-caption-crossref}\n\n```{{r}}\n#| label: caption-crossref\n#| renderings: [light, dark]\npar(bg = \"#FFFFFF\", fg = \"#000000\")\nplot(1:10) # Shown in `light` mode\n\n\npar(bg = \"#000000\", fg = \"#FFFFFF\", col.axis = \"#FFFFFF\")\nplot(1:10) # Shown in `dark` mode\n```\n\nLight and dark renderings with a caption and crossref\n\n:::\n````\n\nNote the use of a `label` that is not a cross-reference, i.e. that does not start with one of the [cross reference types](../authoring/cross-references.qmd#overview). It is a good practice to have named cells with `label`, for debuggability and stable resource names. However, cross-reference labels that start with `fig-`, `tbl-`, etc., will not work with `renderings`.\n\n\n\n::: callout-tip\nWhen using the Knitr engine, you can also use any of the available native options (e.g. `collapse`, `tidy`, `comment`, etc.). See the [Knitr options documentation](https://yihui.org/knitr/options/) for additional details. You can include these native options in option comment blocks as shown above, or on the same line as the `{r}` as shown in the Knitr documentation.\n:::\n\n::: callout-tip\nThe Knitr engine can also *conditionally* evaluate a code chunk using objects or expressions. See [Using R: Knitr Options](r.qmd#chunk-options).\n:::\n\n## Figure Options\n\nThere are a number of ways to control the default width and height of figures generated from code. First, it's important to know that Quarto sets a default width and height for figures appropriate to the target output format. Here are the defaults (expressed in inches):\n\n| Format                  | Default   |\n|-------------------------|-----------|\n| Default                 | 7 x 5     |\n| HTML Slides             | 9.5 x 6.5 |\n| HTML Slides (reveal.js) | 9 x 5     |\n| PDF                     | 5.5 x 3.5 |\n| PDF Slides (Beamer)     | 10 x 7    |\n| PowerPoint              | 7.5 x 5.5 |\n| MS Word, ODT, RTF       | 5 x 4     |\n| EPUB                    | 5 x 4     |\n| Hugo                    | 8 x 5     |\n\nThese defaults were chosen to provide attractive well proportioned figures, but feel free to experiment to see whether you prefer another default size. You can change the default sizes using the `fig-width` and `fig-height` options. For example:\n\n``` yaml\n---\ntitle: \"My Document\"\nformat: \n  html:\n    fig-width: 8\n    fig-height: 6\n  pdf:\n    fig-width: 7\n    fig-height: 5\n---\n```\n\nHow do these sizes make their way into the engine-level defaults for generating figures? This differs by engine:\n\n-   For the Knitr engine, these values become the default values for the `fig.width` and `fig.height` chunk options. You can override these default values via chunk level options.\n\n-   For Python, these values are used to set the [Matplotlib](https://matplotlib.org/stable/tutorials/introductory/customizing.html) `figure.figsize` rcParam (you can of course manually override these defaults for any given plot).\n\n-   For Julia, these values are used to initialize the default figure size for the [Plots.jl](https://docs.juliaplots.org/stable/) GR backend.\n\n    If you are using another graphics library with Jupyter and want to utilize these values, you can read them from `QUARTO_FIG_WIDTH` and `QUARTO_FIG_HEIGHT` environment variables.\n\n::: callout-caution\nWhen using the Jupyter engine, `fig-width` and `fig-height` are only supported if specified at the document- or project-level. \nHowever, when using the Knitr engine, these options are also supported as code cell options on a per-cell basis.\n:::\n\n### Caption and Alt Text\n\nYou can specify the caption and alt text for figures generated from code using the `fig-cap` and `fig-alt` options. For example, here we add these options to a Python code cell that creates a plot:\n\n```{{python}}\n#| fig-cap: \"Polar axis plot\"\n#| fig-alt: \"A line plot on a polar axis\"\n\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nr = np.arange(0, 2, 0.01)\ntheta = 2 * np.pi * r\nfig, ax = plt.subplots(subplot_kw={'projection': 'polar'})\nax.plot(theta, r)\nax.set_rticks([0.5, 1, 1.5, 2])\nax.grid(True)\nplt.show()\n```\n\n## Inline Code\n\nJupyter, Knitr and OJS all support executing inline code within markdown (e.g. to allow narrative to automatically use the most up to date computations). See [Inline Code](inline-code.qmd) for details.\n\n## Raw Output\n\nThe `output: asis` option enables you to generate raw markdown output. When `output: asis` is specified none of Quarto's standard enclosing divs will be included. For example, here we specify `output: asis` in order to generate a pair of headings:\n\n::: panel-tabset\n## Jupyter\n\n```{{python}}\n#| echo: false\n#| output: asis\n\nprint(\"# Heading 1\\n\")\nprint(\"## Heading 2\\n\")\n```\n\n## Knitr\n\n```{{r}}\n#| echo: false\n#| output: asis\n\ncat(\"# Heading 1\\n\")\ncat(\"## Heading 2\\n\")\n```\n:::\n\nWhich generates the following output:\n\n``` default\n# Heading 1\n\n## Heading 2\n```\n\nNote that we also include the `echo: false` option to ensure that the code used to generate markdown isn't included in the final output.\n\nIf we had not specified `output: asis` the output, as seen in the intermediate markdown, would have included Quarto's `.cell-output` div:\n\n```` default\n::: {.cell-output-stdout}\n```\n# Heading 1\n\n## Heading 2\n  \n```\n:::\n````\n\nFor the Jupyter engine, you can also create raw markdown output using the functions in `IPython.display`. For example:\n\n```{{python}}\n#| echo: false\nradius = 10\nfrom IPython.display import Markdown\nMarkdown(f\"The _radius_ of the circle is **{radius}**.\")\n```\n\n## Knitr Options\n\nIf you are using the Knitr cell execution engine, you can specify default document-level [Knitr chunk options](https://yihui.org/knitr/options/) in YAML. For example:\n\n``` yaml\n---\ntitle: \"My Document\"\nformat: html\nknitr:\n  opts_chunk: \n    collapse: true\n    comment: \"#>\" \n    R.options:\n      knitr.graphics.auto_pdf: true\n---\n```\n\nYou can additionally specify global Knitr options using `opts_knit`.\n\nThe `R.options` chunk option is a convenient way to define R options that are set temporarily via [`options()`](https://rdrr.io/r/base/options.html) before the code chunk execution, and immediately restored afterwards.\n\nIn the example above, we establish default Knitr chunk options for a single document. You can also add shared `knitr` options to a project-wide `_quarto.yml` file or a project-directory scoped `_metadata.yml` file.\n\n\n## Jupyter Options\n\n### Expression Printing\n\nWhen multiple expressions are present in a code cell, by default, only the last top-level expression is captured in the rendered output. For example, consider the code cell:\n\n::: {layout-ncol=\"2\"}\n```` markdown\n```{{python}}\n\"first\"\n\"last\"\n```\n````\n:::\n\nWhen rendered to HTML the output generated is:\n\n``` markdown\n'last'\n```\n\nThis behavior corresponds to the `last_expr` setting for [Jupyter shell interactivity](https://ipython.readthedocs.io/en/stable/config/options/terminal.html#configtrait-InteractiveShell.ast_node_interactivity).\n\nYou can control this behavior with the `ipynb-shell-interactivity` option. For example, to capture all top-level expressions set it to `all`:\n\n``` yaml\n---\ntitle: All expressions\nformat: html\nipynb-shell-interactivity: all\n---\n```\n\nNow the above code cell results in the output:\n\n``` markdown\n'first'\n\n'last'\n```\n\n::: callout-note\n## All Expressions are Printed in Dashboards\n\nFor [dashboards](/docs/dashboards/index.qmd) the default setting of `ipynb-shell-interactivity` is `all.`\n:::\n\n## Intermediates\n\nOn the way from markdown input to final output, there are some intermediate files that are created and automatically deleted at the end of rendering. You can use the following options to keep these intermediate files:\n\n+--------------+------------------------------------------------------------------------------------------------+\n| Option       | Description                                                                                    |\n+==============+================================================================================================+\n| `keep-md`    | Keep the markdown file generated by executing code.                                            |\n+--------------+------------------------------------------------------------------------------------------------+\n| `keep-ipynb` | Keep the notebook file generated from executing code (applicable only to markdown input files) |\n+--------------+------------------------------------------------------------------------------------------------+\n\nFor example, here we specify that we want to keep the jupyter intermediate file after rendering:\n\n``` yaml\n---\ntitle: \"My Document\"\nexecute:\n  keep-ipynb: true\njupyter: python3\n---\n```\n\n## Fenced Echo\n\nIf you are writing a tutorial or documentation on using Quarto code blocks, you'll likely want to include the fenced code delimiter (e.g. ```` ```{python} ````) in your code output to emphasize that executable code requires that delimiter. You can do this using the `echo: fenced` option. For example, the following code block:\n\n```{{python}}\n#| echo: fenced\n1 + 1\n```\n\nWill be rendered as:\n\n::: {#ab486dd1 .cell execution_count=1}\n```` { .cell-code}\n```{{python}}\n1 + 1\n```\n\n````\n\n::: {.cell-output .cell-output-display execution_count=1}\n```\n2\n```\n:::\n:::\n\n\nThis is especially useful when you want to demonstrate the use of cell options. For example, here we demonstrate the use of the `output` and `code-overflow` options:\n\n```{{python}}\n#| echo: fenced\n#| output: false\n#| code-overflow: wrap\n1 + 1\n```\n\nThis code block appears in the rendered document as:\n\n::: {#3fb452a1 .cell execution_count=2}\n```` { .cell-code .code-overflow-wrap}\n```{{python}}\n#| output: false\n#| code-overflow: wrap\n1 + 1\n```\n\n````\n:::\n\n\nNote that all YAML options will be included in the fenced code output *except for* `echo: fenced` (as that might be confusing to readers).\n\nThis behavior can also be specified at the document level if you want all of your executable code blocks to include the fenced delimiter and YAML options:\n\n``` yaml\n---\ntitle: \"My Document\"\nformat: html\nexecute:\n  echo: fenced\n---\n```\n\n### Unexecuted Blocks {.unlisted}\n\n\n\nOften you'll want to include a fenced code block purely as documentation (not executable). You can do this by using two curly braces around the language (e.g. `python`, `r`, etc.) rather than one. For example:\n\n```{{{python}}}\n1 + 1\n```\n\nWill be output into the document as:\n\n```{{python}}\n1 + 1\n```\n\nIf you want to show an example with multiple code blocks and other markdown, just enclose the entire example in 4 backticks (e.g. ````` ```` `````) and use the two curly brace syntax for code blocks within. For example:\n\n    ````\n    ---\n    title: \"My document\"\n    ---\n\n    Some markdown content.\n\n    ```{{{python}}}\n    1 + 1\n    ```\n\n    Some additional markdown content.\n\n    ````\n\n\n## Engine Binding\n\nEarlier we said that the engine used for computations was determined automatically. You may want to customize this---for example you may want to use the Jupyter [R kernel](https://github.com/IRkernel/IRkernel) rather than Knitr, or you may want to use Knitr with Python code (via [reticulate](https://rstudio.github.io/reticulate/)).\n\nHere are the basic rules for automatic binding:\n\n+-----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| Extension | Engine Binding                                                                                                                                                                                                                         |\n+===========+========================================================================================================================================================================================================================================+\n| .qmd      | Use Knitr engine if an `{r}` code block is discovered within the file                                                                                                                                                                  |\n|           |                                                                                                                                                                                                                                        |\n|           | Use Jupyter engine if *any other* executable code block (e.g. `{python}`, `{julia}`, `{bash}`, etc.) is discovered within the file. The kernel used is determined based on the language of the first executable code block discovered. |\n|           |                                                                                                                                                                                                                                        |\n|           | Use no engine if no executable code blocks are discovered.                                                                                                                                                                             |\n+-----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| .ipynb    | Jupyter engine                                                                                                                                                                                                                         |\n+-----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| .Rmd      | Knitr engine                                                                                                                                                                                                                           |\n+-----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n| .md       | No engine (note that if an `md` document does contain executable code blocks then an error will occur)                                                                                                                                 |\n+-----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+\n\n::: callout-note\n\n## Using python and r together\n\nIf your quarto document includes both `{python}` and `{r}` code blocks, then quarto will automatically use Knitr engine and [reticulate](https://rstudio.github.io/reticulate/) R package to execute the python content.\n:::\n\nFor `.qmd` files in particular, you can override the engine used via the `engine` option. For example:\n\n``` markdown\nengine: jupyter\n```\n\n``` markdown\nengine: knitr\n```\n\nYou can also specify that no execution engine should be used via `engine: markdown`.\n\nThe presence of the `knitr` or `jupyter` option will also override the default engine:\n\n``` markdown\nknitr: true\n```\n\n``` markdown\njupyter: python3\n```\n\nVariations with additional engine-specific options also work to override the default engine:\n\n``` markdown\nknitr:\n  opts_knit:\n    verbose: true\n```\n\n``` markdown\njupyter:\n  kernelspec:\n    display_name: Python 3\n    language: python\n    name: python3\n```\n\n## Shell Commands\n\nUsing shell commands (from Bash, Zsh, etc.) within Quarto computational documents differs by engine. If you are using the Jupyter engine you can use [Jupyter shell magics](https://jakevdp.github.io/PythonDataScienceHandbook/01.05-ipython-and-shell-commands.html). For example:\n\n```` markdown\n---\ntitle: \"Using Bash\"\nengine: jupyter\n---\n\n```{{python}}\n!echo \"foo\"\n```\n````\n\nNote that `!` preceding `echo` is what enables a Python cell to be able to execute a shell command.\n\nIf you are using the Knitr engine you can use ```` ```{bash} ```` cells, for example:\n\n```` markdown\n---\ntitle: \"Using Bash\"\nengine: knitr\n---\n\n```{{bash}}\necho \"foo\" \n```\n````\n\nNote that the Knitr engine also supports ```` ```{python} ```` cells, enabling the combination of R, Python, and Bash in the same document\n\n## Conditional Execution\n\nIn some cases you want code execution itself — not just visibility of its output — to depend on the active output format. For example, when rendering to PDF you may want to skip a cell that loads an interactive HTML widget, rather than execute it and hide the result.\n\nQuarto exposes the current rendering context in the `QUARTO_EXECUTE_INFO` environment variable. Cells can read this variable to detect the active format and branch accordingly. See [Execution Context Information](/docs/advanced/quarto-execute-info.qmd) for the full JSON schema and examples in R, Python, and Julia.\n\nThis complements format-based [conditional content](/docs/authoring/conditional.qmd), which controls visibility of *already-executed* output. `QUARTO_EXECUTE_INFO` lets you skip work, choose a different code path, or load a different library before any output is produced.\n\n",
     "supporting": [
       "execution-options_files"
     ],
diff --git a/_freeze/docs/gallery/index/execute-results/html.json b/_freeze/docs/gallery/index/execute-results/html.json
index f9f6bfda06..347a5511d9 100644
--- a/_freeze/docs/gallery/index/execute-results/html.json
+++ b/_freeze/docs/gallery/index/execute-results/html.json
@@ -1,8 +1,8 @@
 {
-  "hash": "838b86bcdf1e147ddbf3ace68d6405b8",
+  "hash": "349c44c283421f234ad09142d65d8438",
   "result": {
     "engine": "knitr",
-    "markdown": "---\npagetitle: \"Gallery\"\nformat:\n  html:\n    toc: false\nimage: articles/advanced-layout-pdf.png\nsearch: false\nexecute:\n  echo: false\nlisting:\n  - id: gallery\n    template: gallery.ejs\n    contents: gallery.yml\ndescription: |\n  A gallery of example documents, websites, books, and presentations created with Quarto.\naliases:\n  - /docs/dashboards/examples/index.html\n  - /docs/dashboards/examples/\n---\n\n::: {#hero-banner .column-screen}\n::: {.grid .column-page}\n::: {.headline .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.h1 role=\"heading\" aria-level=\"1\"}\nGallery\n:::\n\n\nQuarto can produce a wide variety of output formats. Here are some examples:\n\n-   [Articles & Reports](#articles-reports)\n-   [Presentations](#presentations)\n-   [Dashboards](#dashboards)\n-   [Websites](#websites)\n-   [Books](#books)\n-   [Interactive Docs](#interactive-docs)\n:::\n\n\n::: {.cell .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.cell-output-display}\n\n```{=html}\n<div id=\"gallery-carousel\" class=\"carousel carousel-dark slide\" data-bs-ride=\"carousel\">\n<div class=\"carousel-indicators\">\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"0\" aria-label=\"Slide 1\" class=\"active\" aria-current=\"true\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"3\" aria-label=\"Slide 4\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"4\" aria-label=\"Slide 5\"></button>\n</div>\n<div class=\"carousel-inner\">\n<div class=\"carousel-item active\" data-bs-interval=\"5000\">\n<a href=\"#articles-reports\">\n<img src=\"articles/advanced-layout-pdf.png\" alt=\"A Tufte-style PDF page with margin notes and a full-width faceted plot\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Articles and reports with Python and R</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#presentations\">\n<img src=\"presentations/presentations.png\" alt=\"A presentation slide titled MPG and Horsepower with a ggplot2 code block above a scatterplot of mileage versus horsepower with a fitted loess curve\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create data-driven presentations</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#interactive-docs\">\n<img src=\"interactive/interactive-jupyter.png\" alt=\"A Python ipyleaflet code block above a cloud-covered satellite map of Europe with a blue location pin\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Engage readers with interactivity</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#websites\">\n<img src=\"websites/websites-quarto.png\" alt=\"Documentation page with left sidebar navigation and a numbered introduction to the publishing system\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Publish collections of articles as a website</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#books\">\n<img src=\"websites/websites-jupyter.png\" alt=\"A curriculum site with a blue and orange histogram logo and interactive-notebook introduction text\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create multi-format books</p>\n</div>\n</div>\n</div>\n<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"prev\">\n<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Prevoius</span>\n</button>\n<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"next\">\n<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Next</span>\n</button>\n</div>\n```\n\n:::\n:::\n\n:::\n:::\n\n::: {#gallery .column-page}\n:::\n\n```{=html}\n<style>\n\n/* we need to hide this element */\n/* <header id=\"title-block-header\" class=\"quarto-title-block\"></header> */\n\nheader#title-block-header {\n  display: none;\n}\n\nbody.quarto-light #hero-banner {\n  background-color: rgb(240,245,249);\n}\n\nbody.quarto-dark #hero-banner {\n  background-color: #17212B;\n}\n\ndiv.carousel {\n  margin-top: 2rem; \n}\n\nbody.quarto-dark .carousel-dark .carousel-indicators [data-bs-target] {\n  background-color: rgb(255,255,255);\n}\n\nbody.quarto-dark .carousel-dark .carousel-control-next-icon,\nbody.quarto-dark .carousel-dark .carousel-control-prev-icon {\n  filter: inherit;\n}\n\n#quarto-content main { \n  margin-top: 0;\n  padding-top: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\n.headline {\n  font-size: 1.25em;\n  font-weight: 300;\n  padding-bottom: 1em;\n}\n\n.headline p {\n  margin: 0;\n  padding-bottom: 0.2rem;\n}\n\n.headline a {\n  text-decoration: none;\n}\n\n.headline ul li {\n  margin-bottom: 0.3em;\n}\n\n.carousel.card {\n  padding-top: 2em;\n}\n\n.carousel img {\n  width: 70%;\n  margin-bottom: 110px;\n}\n\n.carousel-control-prev-icon, .carousel-control-next-icon {\n  margin-bottom: 110px;\n}\n\n.carousel-caption {\n  padding-top: 1em;\n}\n\n.touch {\n  \n}\n</style>\n```\n",
+    "markdown": "---\npagetitle: \"Gallery\"\ntoc: false\nimage: articles/advanced-layout-pdf.png\nsearch: false\nexecute:\n  echo: false\nlisting:\n  - id: gallery\n    template: gallery.ejs\n    contents: gallery.yml\ndescription: |\n  A gallery of example documents, websites, books, and presentations created with Quarto.\naliases:\n  - /docs/dashboards/examples/index.html\n  - /docs/dashboards/examples/\n---\n\n::: {#hero-banner .column-screen}\n::: {.grid .column-page}\n::: {.headline .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.h1 role=\"heading\" aria-level=\"1\"}\nGallery\n:::\n\n\nQuarto can produce a wide variety of output formats. Here are some examples:\n\n-   [Articles & Reports](#articles-reports)\n-   [Presentations](#presentations)\n-   [Dashboards](#dashboards)\n-   [Websites](#websites)\n-   [Books](#books)\n-   [Interactive Docs](#interactive-docs)\n:::\n\n\n::: {.cell .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.cell-output-display}\n\n```{=html}\n<div id=\"gallery-carousel\" class=\"carousel carousel-dark slide\" data-bs-ride=\"carousel\">\n<div class=\"carousel-indicators\">\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"0\" aria-label=\"Slide 1\" class=\"active\" aria-current=\"true\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"3\" aria-label=\"Slide 4\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"4\" aria-label=\"Slide 5\"></button>\n</div>\n<div class=\"carousel-inner\">\n<div class=\"carousel-item active\" data-bs-interval=\"5000\">\n<a href=\"#articles-reports\">\n<img src=\"articles/advanced-layout-pdf.png\" alt=\"A Tufte-style PDF page with margin notes and a full-width faceted plot\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Articles and reports with Python and R</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#presentations\">\n<img src=\"presentations/presentations.png\" alt=\"A presentation slide titled MPG and Horsepower with a ggplot2 code block above a scatterplot of mileage versus horsepower with a fitted loess curve\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create data-driven presentations</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#interactive-docs\">\n<img src=\"interactive/interactive-jupyter.png\" alt=\"A Python ipyleaflet code block above a cloud-covered satellite map of Europe with a blue location pin\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Engage readers with interactivity</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#websites\">\n<img src=\"websites/websites-quarto.png\" alt=\"Documentation page with left sidebar navigation and a numbered introduction to the publishing system\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Publish collections of articles as a website</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#books\">\n<img src=\"websites/websites-jupyter.png\" alt=\"A curriculum site with a blue and orange histogram logo and interactive-notebook introduction text\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create multi-format books</p>\n</div>\n</div>\n</div>\n<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"prev\">\n<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Prevoius</span>\n</button>\n<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"next\">\n<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Next</span>\n</button>\n</div>\n```\n\n:::\n:::\n\n:::\n:::\n\n::: {#gallery .column-page}\n:::\n\n```{=html}\n<style>\n\n/* we need to hide this element */\n/* <header id=\"title-block-header\" class=\"quarto-title-block\"></header> */\n\nheader#title-block-header {\n  display: none;\n}\n\nbody.quarto-light #hero-banner {\n  background-color: rgb(240,245,249);\n}\n\nbody.quarto-dark #hero-banner {\n  background-color: #17212B;\n}\n\ndiv.carousel {\n  margin-top: 2rem; \n}\n\nbody.quarto-dark .carousel-dark .carousel-indicators [data-bs-target] {\n  background-color: rgb(255,255,255);\n}\n\nbody.quarto-dark .carousel-dark .carousel-control-next-icon,\nbody.quarto-dark .carousel-dark .carousel-control-prev-icon {\n  filter: inherit;\n}\n\n#quarto-content main { \n  margin-top: 0;\n  padding-top: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\n.headline {\n  font-size: 1.25em;\n  font-weight: 300;\n  padding-bottom: 1em;\n}\n\n.headline p {\n  margin: 0;\n  padding-bottom: 0.2rem;\n}\n\n.headline a {\n  text-decoration: none;\n}\n\n.headline ul li {\n  margin-bottom: 0.3em;\n}\n\n.carousel.card {\n  padding-top: 2em;\n}\n\n.carousel img {\n  width: 70%;\n  margin-bottom: 110px;\n}\n\n.carousel-control-prev-icon, .carousel-control-next-icon {\n  margin-bottom: 110px;\n}\n\n.carousel-caption {\n  padding-top: 1em;\n}\n\n.touch {\n  \n}\n</style>\n```\n",
     "supporting": [],
     "filters": [
       "rmarkdown/pagebreak.lua"
diff --git a/_freeze/docs/interactive/ojs/data-sources/execute-results/html.json b/_freeze/docs/interactive/ojs/data-sources/execute-results/html.json
index c2bfa5042a..fbbffc52d6 100644
--- a/_freeze/docs/interactive/ojs/data-sources/execute-results/html.json
+++ b/_freeze/docs/interactive/ojs/data-sources/execute-results/html.json
@@ -1,7 +1,8 @@
 {
-  "hash": "3849c3b5c99ee1c4070b0729ad64c0b5",
+  "hash": "060b9f304c79f744abf1d4dfd1a5b57e",
   "result": {
-    "markdown": "---\ntitle: \"Data Sources\"\nformat: html\nexecute:\n  echo: fenced\n---\n\n\n## Overview\n\nThere are a wide variety of way to make data available to OJS:\n\n-   Read CSV, JSON, SQLite, and more using the [FileAttachments](https://github.com/observablehq/stdlib#file-attachments) API.\n\n-   Use the `ojs_define()` function to make data processed in Python or R available to `{ojs}` cells.\n\n-   Make calls to Web APIs for online services and data stores.\n\nWe'll explore all of these techniques below.\n\n## File Attachments\n\nUse the [FileAttachment](https://github.com/observablehq/stdlib#file-attachments) function from the standard library to read data from a file. For example, here we read and plot a CSV of NOAA's Monthly [CO2 concentration data](https://gml.noaa.gov/ccgg/trends/data.html) from Mauna Loa:\n\n\n```{ojs}\ndata = {\n  const co2data = await FileAttachment(\"co2_mm.csv\")\n    .csv({ typed: true } );\n  return co2data.map(d => { \n    d[\"decimal date\"] = Number(d[\"decimal date\"]);\n    d.average = Number(d.average); \n    return d; \n  });\n}\nPlot.plot({\n  marks: [\n    Plot.line(data, \n      { x: \"decimal date\", y: \"average\"}, \n      { stroke: \"black\" }\n    )\n  ]\n})\n```\n\n\nNote that we specified the `typed: true` option to the `csv()` function. When this option is specified [d3.autoType](https://observablehq.com/@d3/d3-autotype) is used to automatically detect numbers, dates, etc. and convert them to the correct JavaScript types. This is highly recommend when you know that your data is compatible with automatic type detection.\n\nHere are the methods available for structured data formats:\n\n| Method                                                                                                                       | Description                          |\n|------------------------------------------------------------------------------------------------------------------------------|--------------------------------------|\n| [csv](https://github.com/observablehq/stdlib#attachment_csv)                                                                 | Comma separated values               |\n| [tsv](https://github.com/observablehq/stdlib#attachment_tsv)                                                                 | Tab separated values                 |\n| [json](https://github.com/observablehq/stdlib#attachment_json)                                                               | JSON (JavaScript objects)            |\n| [sqlite](https://github.com/observablehq/stdlib#attachment_sqlite)                                                           | SQLite database client               |\n| [arrow](https://github.com/observablehq/stdlib/blob/8d9f4d18df0b237a5e0870a6f39584048007aca7/src/fileAttachment.mjs#L59-L62) | Apache Arrow IPC file (uncompressed) |\n\nThere are also methods to get the raw data as a [blob](https://github.com/observablehq/stdlib#attachment_blob), [text](https://github.com/observablehq/stdlib#attachment_text), [image](https://github.com/observablehq/stdlib#attachment_image), or [stream](https://github.com/observablehq/stdlib#attachment_stream).\n\nNote that if you are using the `arrow()` method the Apache Arrow IPC file (Feather V2 file) should be written uncompressed. For example:\n\n```` markdown\n```{{r}}\narrow::write_feather(\n  mtcars, \n  \"data.arrow\", \n  compression = \"uncompressed\"\n)\n```\n\n```{{ojs}}\ndata = FileAttachment(\"data.arrow\").arrow()\n```\n````\n\n## Python and R\n\nThe data you want to use with OJS might not always be available in raw form. Often you'll need to read and preprocess the raw data using Python or R. You can perform this preprocessing during document render (in an `{r}` or `{python}` code cell) and then make it available to `{ojs}` cells via the `ojs_define()` function.\n\nHere's an example. We'll read the same data into R, do some grouping and summarization, then make it available to OJS using `ojs_define`:\n\n\n::: {.cell}\n\n````{.cell-code}\n```{{r}}\n#| output: false\n\nlibrary(readr)\nlibrary(dplyr)\n\nco2 = read_csv(\"co2_mm.csv\")  %>% \n  group_by(year) %>% \n  summarize(max = max(average))\n\nojs_define(co2data = co2)\n```\n````\n:::\n\n\nNote that we could have done the same thing using Python (the `ojs_define` function is available in any document that uses R or Python).\n\nNow we plot the data using [Observable Plot](https://github.com/observablehq/plot):\n\n\n```{ojs}\nyearlyChart = Plot.plot({\n  marks: [\n    Plot.line(transpose(co2data), \n      {x: \"year\", y: \"max\"}, \n      { stroke: \"black\" }\n    )\n  ]}\n)\n```\n\n\nSee the [NOAA C02](examples/noaa-co2.qmd) example for the full source code.\n\n### Transpose\n\nYou'll note one additional twist in the OJS code above: we call the `transpose` function on our `co2data` before plotting it. The `transpose` function is built in to Quarto's OJS engine, and will convert column-oriented datasets (like the ones used in Python and R) into the row-oriented datasets used by many JavaScript plotting libraries (including [Plot](https://github.com/observablehq/plot)).\n\nFor example, the following JSON data emitted from R or Python:\n\n``` json\n{\n  \"year\": [1958, 1959, 1960],\n  \"max\":  [317.51, 318.29, 320.04]\n}\n```\n\nIs converted to the following via the call to `transpose`:\n\n``` json\n[\n  { \"year\": 1959, \"max\": 317.51 },\n  { \"year\": 1960, \"max\": 318.29 },\n  { \"year\": 1960, \"max\": 320.04 }\n]\n```\n\nCheck the documentation for whatever plotting library you are using from OJS to see whether a call to `transpose` is required.\n\n## Web APIs\n\nYou can use the [`d3.json()`](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#json) function to read JSON data from web services and data sources. Here we query the GitHub API for data on contributions to the Python pandas package:\n\n\n```{ojs}\nd3 = require('d3')\n\ncontributors = await d3.json(\n  \"https://api.github.com/repos/pandas-dev/pandas/stats/contributors\"\n)\n\ncommits = contributors.map(contributor => {\n  const author = contributor.author;\n  return {\n    name: author.login,\n    title: author.login,\n    group: author.type,\n    value: contributor.total\n  }\n})\n```\n\n\nView the data sorted by number of commits:\n\n\n```{ojs}\nInputs.table(commits, { sort: \"value\", reverse: true })\n```\n\n\nSee the [GitHub API](examples/github.qmd) example for the full source code.\n",
+    "engine": "knitr",
+    "markdown": "---\ntitle: \"Data Sources\"\nexecute:\n  echo: fenced\n---\n\n## Overview\n\nThere are a wide variety of way to make data available to OJS:\n\n-   Read CSV, JSON, SQLite, and more using the [FileAttachments](https://github.com/observablehq/stdlib#file-attachments) API.\n\n-   Use the `ojs_define()` function to make data processed in Python or R available to `{ojs}` cells.\n\n-   Make calls to Web APIs for online services and data stores.\n\nWe'll explore all of these techniques below.\n\n## File Attachments\n\nUse the [FileAttachment](https://github.com/observablehq/stdlib#file-attachments) function from the standard library to read data from a file. For example, here we read and plot a CSV of NOAA's Monthly [CO2 concentration data](https://gml.noaa.gov/ccgg/trends/data.html) from Mauna Loa:\n\n```{ojs}\ndata = {\n  const co2data = await FileAttachment(\"co2_mm.csv\")\n    .csv({ typed: true } );\n  return co2data.map(d => { \n    d[\"decimal date\"] = Number(d[\"decimal date\"]);\n    d.average = Number(d.average); \n    return d; \n  });\n}\nPlot.plot({\n  marks: [\n    Plot.line(data, \n      { x: \"decimal date\", y: \"average\"}, \n      { stroke: \"black\" }\n    )\n  ]\n})\n```\n\nNote that we specified the `typed: true` option to the `csv()` function. When this option is specified [d3.autoType](https://observablehq.com/@d3/d3-autotype) is used to automatically detect numbers, dates, etc. and convert them to the correct JavaScript types. This is highly recommend when you know that your data is compatible with automatic type detection.\n\nHere are the methods available for structured data formats:\n\n| Method                                                                                                                       | Description                          |\n|------------------------------------------------------------------------------------------------------------------------------|--------------------------------------|\n| [csv](https://github.com/observablehq/stdlib#attachment_csv)                                                                 | Comma separated values               |\n| [tsv](https://github.com/observablehq/stdlib#attachment_tsv)                                                                 | Tab separated values                 |\n| [json](https://github.com/observablehq/stdlib#attachment_json)                                                               | JSON (JavaScript objects)            |\n| [sqlite](https://github.com/observablehq/stdlib#attachment_sqlite)                                                           | SQLite database client               |\n| [arrow](https://github.com/observablehq/stdlib/blob/8d9f4d18df0b237a5e0870a6f39584048007aca7/src/fileAttachment.mjs#L59-L62) | Apache Arrow IPC file (uncompressed) |\n\nThere are also methods to get the raw data as a [blob](https://github.com/observablehq/stdlib#attachment_blob), [text](https://github.com/observablehq/stdlib#attachment_text), [image](https://github.com/observablehq/stdlib#attachment_image), or [stream](https://github.com/observablehq/stdlib#attachment_stream).\n\nNote that if you are using the `arrow()` method the Apache Arrow IPC file (Feather V2 file) should be written uncompressed. For example:\n\n```` markdown\n```{{r}}\narrow::write_feather(\n  mtcars, \n  \"data.arrow\", \n  compression = \"uncompressed\"\n)\n```\n\n```{{ojs}}\ndata = FileAttachment(\"data.arrow\").arrow()\n```\n````\n\n## Python and R\n\nThe data you want to use with OJS might not always be available in raw form. Often you'll need to read and preprocess the raw data using Python or R. You can perform this preprocessing during document render (in an `{r}` or `{python}` code cell) and then make it available to `{ojs}` cells via the `ojs_define()` function.\n\nHere's an example. We'll read the same data into R, do some grouping and summarization, then make it available to OJS using `ojs_define`:\n\n\n::: {.cell}\n\n````{.cell-code}\n```{{r}}\n#| output: false\n\nlibrary(readr)\nlibrary(dplyr)\n\nco2 = read_csv(\"co2_mm.csv\")  %>% \n  group_by(year) %>% \n  summarize(max = max(average))\n\nojs_define(co2data = co2)\n```\n````\n:::\n\n\nNote that we could have done the same thing using Python (the `ojs_define` function is available in any document that uses R or Python).\n\nNow we plot the data using [Observable Plot](https://github.com/observablehq/plot):\n\n```{ojs}\nyearlyChart = Plot.plot({\n  marks: [\n    Plot.line(transpose(co2data), \n      {x: \"year\", y: \"max\"}, \n      { stroke: \"black\" }\n    )\n  ]}\n)\n```\n\nSee the [NOAA C02](examples/noaa-co2.qmd) example for the full source code.\n\n### Transpose\n\nYou'll note one additional twist in the OJS code above: we call the `transpose` function on our `co2data` before plotting it. The `transpose` function is built in to Quarto's OJS engine, and will convert column-oriented datasets (like the ones used in Python and R) into the row-oriented datasets used by many JavaScript plotting libraries (including [Plot](https://github.com/observablehq/plot)).\n\nFor example, the following JSON data emitted from R or Python:\n\n``` json\n{\n  \"year\": [1958, 1959, 1960],\n  \"max\":  [317.51, 318.29, 320.04]\n}\n```\n\nIs converted to the following via the call to `transpose`:\n\n``` json\n[\n  { \"year\": 1959, \"max\": 317.51 },\n  { \"year\": 1960, \"max\": 318.29 },\n  { \"year\": 1960, \"max\": 320.04 }\n]\n```\n\nCheck the documentation for whatever plotting library you are using from OJS to see whether a call to `transpose` is required.\n\n## Web APIs\n\nYou can use the [`d3.json()`](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#json) function to read JSON data from web services and data sources. Here we query the GitHub API for data on contributions to the Python pandas package:\n\n```{ojs}\nd3 = require('d3')\n\ncontributors = await d3.json(\n  \"https://api.github.com/repos/pandas-dev/pandas/stats/contributors\"\n)\n\ncommits = contributors.map(contributor => {\n  const author = contributor.author;\n  return {\n    name: author.login,\n    title: author.login,\n    group: author.type,\n    value: contributor.total\n  }\n})\n```\n\nView the data sorted by number of commits:\n\n```{ojs}\nInputs.table(commits, { sort: \"value\", reverse: true })\n```\n\nSee the [GitHub API](examples/github.qmd) example for the full source code.\n",
     "supporting": [],
     "filters": [
       "rmarkdown/pagebreak.lua"
diff --git a/_freeze/docs/interactive/ojs/examples/noaa-co2/execute-results/html.json b/_freeze/docs/interactive/ojs/examples/noaa-co2/execute-results/html.json
index 46c2f76037..fb3ab25a60 100644
--- a/_freeze/docs/interactive/ojs/examples/noaa-co2/execute-results/html.json
+++ b/_freeze/docs/interactive/ojs/examples/noaa-co2/execute-results/html.json
@@ -1,7 +1,8 @@
 {
-  "hash": "2ddd3a5841c63df04a8b3d96ef688a80",
+  "hash": "3fe6991b958db908a1718d4eebc9b430",
   "result": {
-    "markdown": "---\ntitle: \"NOAA CO2\"\nformat: \n  html:\n    code-tools: true\n---\n\nRead and plot a CSV of NOAA's Monthly [CO2 concentration data](https://gml.noaa.gov/ccgg/trends/data.html) from Mauna Loa:\n\n```{ojs}\ndata = {\n  const co2data = await FileAttachment(\"co2_mm.csv\")\n    .csv({ typed: true });\n  return co2data.map(d => { \n    d[\"decimal date\"] = Number(d[\"decimal date\"]);\n    d.average = Number(d.average); \n    return d; \n  });\n}\nPlot.plot({\n  marks: [\n    Plot.line(data, \n      { x: \"decimal date\", y: \"average\"}, \n      { stroke: \"black\" }\n    )\n  ]\n})\n```\n\nRead the same data into R, do some grouping and summarization, then make it available using `ojs_define`:\n\n::: {.cell}\n\n```{.r .cell-code}\nlibrary(readr)\nlibrary(dplyr)\n\nco2 = read_csv(\"co2_mm.csv\")  %>% \n  group_by(year) %>% \n  summarize(max = max(average))\n\nojs_define(co2data = co2)\n```\n:::\n\nNow plot the summarized data:\n\n```{ojs}\nPlot.plot({\n  marks: [\n    Plot.line(transpose(co2data), \n      {x: \"year\", y: \"max\"}, \n      { stroke: \"black\" }\n    )\n  ]}\n)\n```",
+    "engine": "knitr",
+    "markdown": "---\ntitle: \"NOAA CO2\"\ncode-tools: true\n---\n\nRead and plot a CSV of NOAA's Monthly [CO2 concentration data](https://gml.noaa.gov/ccgg/trends/data.html) from Mauna Loa:\n\n```{ojs}\ndata = {\n  const co2data = await FileAttachment(\"co2_mm.csv\")\n    .csv({ typed: true });\n  return co2data.map(d => { \n    d[\"decimal date\"] = Number(d[\"decimal date\"]);\n    d.average = Number(d.average); \n    return d; \n  });\n}\nPlot.plot({\n  marks: [\n    Plot.line(data, \n      { x: \"decimal date\", y: \"average\"}, \n      { stroke: \"black\" }\n    )\n  ]\n})\n```\n\nRead the same data into R, do some grouping and summarization, then make it available using `ojs_define`:\n\n\n::: {.cell}\n\n```{.r .cell-code}\nlibrary(readr)\nlibrary(dplyr)\n\nco2 = read_csv(\"co2_mm.csv\")  %>% \n  group_by(year) %>% \n  summarize(max = max(average))\n\nojs_define(co2data = co2)\n```\n:::\n\n\nNow plot the summarized data:\n\n```{ojs}\nPlot.plot({\n  marks: [\n    Plot.line(transpose(co2data), \n      {x: \"year\", y: \"max\"}, \n      { stroke: \"black\" }\n    )\n  ]}\n)\n```\n",
     "supporting": [],
     "filters": [
       "rmarkdown/pagebreak.lua"
@@ -13,6 +14,6 @@
     },
     "engineDependencies": {},
     "preserve": {},
-    "postProcess": null
+    "postProcess": true
   }
 }
\ No newline at end of file
diff --git a/_freeze/docs/output-formats/html-code/execute-results/html.json b/_freeze/docs/output-formats/html-code/execute-results/html.json
index 8701bd8d39..e7bf853bc3 100644
--- a/_freeze/docs/output-formats/html-code/execute-results/html.json
+++ b/_freeze/docs/output-formats/html-code/execute-results/html.json
@@ -1,8 +1,8 @@
 {
-  "hash": "6c827e1ae751c4e42a240e3ee6daa622",
+  "hash": "9cc8fb834369ccb1f07a179eedabf580",
   "result": {
     "engine": "knitr",
-    "markdown": "---\ntitle: \"HTML Code Blocks\"\nformat: \n  html:\n    code-tools: true\nexecute:\n  warning: false\nfig-cap-location: top\n---\n\n\n::: {.cell}\n\n```{.r .cell-code}\nset.seed(29319)\n```\n:::\n\n\n## Overview\n\nThere are wide variety of options available to customize the display of source code within HTML documents, including:\n\n1.  Hiding some or all code that was executed by [Knitr](https://yihui.name/knitr) or [Jupyter](https://jupyter.org).\n2.  Code folding for executed code (hidden by default and expandable by readers).\n3.  Handling code that overflows the available horizontal display space.\n4.  View the source code of the markdown file used to generate the document.\n5.  Syntax highlighting themes and other options to control the appearance of code.\n6.  Copy to clipboard button for code blocks.\n7.  Generating hyperlinks to online documentation for functions used within code blocks via the [downlit](https://downlit.r-lib.org/) package (note that this option currently only works when using the Knitr engine).\n\nDetails on using all of these options are provided below.\n\n## Hiding Code\n\nFor many documents you may want to hide all of the executable source code used to produce dynamic outputs. You can do this by specifying `echo: false` in the document `execute` options. For example:\n\n``` yaml\n---\ntitle: \"My Document\"\nexecute:\n  echo: false\njupyter: python3\n---\n```\n\nNote that we can override this option on a per code-block basis. For example:\n\n```{{python}}\n#| echo: true\n\nimport matplotlib.pyplot as plt\nplt.plot([1,2,3,4])\nplt.show()\n```\n\nCode block options are included in a special comment at the top of the block (lines at the top prefaced with `#|` are considered options).\n\n## Folding Code\n\nUse the `code-fold` option to include code but have it hidden by default using the HTML `<details>` tag. For example, click the **Code** button to see the code that produced this plot.\n\n\n::: {.cell}\n\n```{.r .cell-code  code-fold=\"true\"}\nlibrary(ggplot2)\ndat <- data.frame(cond = rep(c(\"A\", \"B\"), each=10),\n                  xvar = 1:20 + rnorm(20,sd=3),\n                  yvar = 1:20 + rnorm(20,sd=3))\n\nggplot(dat, aes(x=xvar, y=yvar)) +\n  geom_point(shape=1) + \n  geom_smooth() \n```\n\n::: {.cell-output-display}\n![](html-code_files/figure-html/unnamed-chunk-2-1.png){fig-alt='Scatterplot with a smoothed trend line.' width=672}\n:::\n:::\n\n\nHere we specify both `code-fold: true` as well as custom summary text (the default is just \"Code\" as shown above):\n\n``` yaml\nformat:\n  html:\n    code-fold: true\n    code-summary: \"Show the code\"\n```\n\nValid values for `code-fold` include:\n\n| Value   | Behavior                     |\n|---------|------------------------------|\n| `false` | No folding (default)         |\n| `true`  | Fold code (initially hidden) |\n| `show`  | Fold code (initially shown)  |\n\nUse the `code-fold` and `code-summary` chunk attributes to control this on a chunk-by-chunk basis:\n\n```{{r}}\n#| code-fold: true\n#| code-summary: \"Show the code\"\n```\n\n## Code Overflow\n\nIn some cases the width of source code will overflow the available horizontal display space. By default, this will result in a horizontal scroll bar for the code block. However if you prefer not to have scrollbars you can have the longer lines wrap instead.\n\nTo set the global default behavior use the `code-overflow` option. For example:\n\n``` yaml\nformat:\n  html:\n    code-overflow: wrap\n```\n\nValid values for `code-overflow` are:\n\n| Option   | Description                                                                                  |\n|------------------|------------------------------------------------------|\n| `scroll` | Scroll code blocks that exceed available width (default, corresponds to `white-space: pre`). |\n| `wrap`   | Wrap lines of code that exceed available width (corresponds to `white-space: pre-wrap`).     |\n\nYou can also override the global default on a per-code-block basis. For computational cells you do this with the `code-overflow` cell option:\n\n```{{python}}\n#| code-overflow: wrap\n\n# very long line of code....\n```\n\nFor a static code block, add the `.code-overflow-scroll` or `.code-overflow-wrap` CSS class:\n\n```` python\n```{.python .code-overflow-wrap}\n# very long line of code....\n```\n````\n\nNote that irrespective of these options, code will always wrap within printed HTML output (as it would otherwise be clipped off the edge of the page).\n\n## Code Tools\n\nYou can include a **Code** menu in the header of your document that provides various tools for readers to interact with the source code. Specify `code-tools: true` to activate these tools:\n\n``` yaml\nformat:\n  html:\n    code-fold: true\n    code-tools: true\n```\n\nIf you have a document that includes folded code blocks then the **Code** menu will present options to show and hide the folded code as well as view the full source code of the document:\n\n![](images/code-tools-01.png){.border fig-alt=\"A screen shot of the header of a rendered Quarto document showing the result of setting both the code-fold and code-tools option to true. There is a drop-down menu labeled 'Code' to the right of the page title with a triangle pointing down. The menu is open and there are three options listed vertically beneath it: 'Hide All Code,' 'Show All Code,' and 'View Source.'\"}\n\nThis document specifies `code-tools: true` in its options so you should see the **Code** menu above next to the main header.\n\nYou can control which of these options are made available as well as the \"Code\" caption text using sub-options of `code-tools`. For example, here we specify that we want only \"View Source\" (no toggling of code visibility) and no caption on the code menu:\n\n``` yaml\nformat:\n  html: \n    code-tools:\n      source: true\n      toggle: false\n      caption: none\n```\n\nBy default, the source code is embedded in the document and shown in a popup window like this:\n\n![](images/code-tools-source.png){fig-alt=\"A screenshot of this webpage with a pop-up window labeled 'Source Code' over it. This 'Source Code' window contains the raw markdown and R code used to write this page. There is an 'X' on the upper right corner of the 'Source Code' pop up to close it.\"}\n\nYou can alternatively specify a URL for the value of `source`:\n\n``` yaml\nformat:\n  html: \n    code-tools:\n      source: https://github.com/quarto-dev/quarto-web/blob/main/index.md\n```\n\nIf you are within a project and have specified a `repo-url` option then you can just use `repo` and the correct link to your source file will be generated:\n\n``` yaml\nformat:\n  html: \n    code-tools:\n      source: repo\n```\n\nNote that the `code-tools` option is not available when you disable the standard HTML theme (e.g. if you specify the `theme: none` option).\n\n## Appearance\n\nBy default code blocks are rendered with a left border whose color is derived from the current theme. You can customize code chunk appearance with some simple options that control the background color and left border. Options can either be booleans to enable or disable the treatment or can be legal CSS color strings (or they could even be SASS variable names!).\n\nHere is the default appearance for code blocks (`code-block-bg: true`):\n\n![](images/code-bg.png){fig-alt=\"A block of code with a gray background.\"}\n\nYou can instead use a left border treatment using the `code-block-border-left` option:\n\n``` yaml\ncode-block-border-left: true\n```\n\n![](images/code-default.png){fig-alt=\"A block of code with a gray vertical stripe running along its left border. This code block has no background.\"}\n\nYou can combine a background and border treatment as well as customize the left border color:\n\n``` yaml\ncode-block-bg: true\ncode-block-border-left: \"#31BAE9\"\n```\n\n![](images/code-custom.png){fig-alt=\"A block of code with a gray background and a blue vertical stripe running along its left border.\"}\n\n## Code Filename {#code-filename}\n\nUse the `filename` attribute on code blocks If you are documenting the contents of a file and want to be especially clear about the name of the file the code is associated with.\n\nFor example, the following code:\n\n```` markdown\n```{.python filename=\"matplotlib.py\"}\nimport matplotlib.pyplot as plt\nplt.plot([1,23,2,4])\nplt.show()\n```\n````\n\nResults in this HTML output:\n\n```{.python filename=\"matplotlib.py\"}\nimport matplotlib.pyplot as plt\nplt.plot([1,23,2,4])\nplt.show()\n```\n\nNon-HTML formats will still have the filename, but it will simply be shown in bold above the code block.\n\n## Highlighting\n\nPandoc will automatically highlight syntax in [fenced code blocks](https://pandoc.org/MANUAL.html#fenced-code-blocks) that are marked with a language name. For example:\n\n    ```python\n    1 + 1\n    ```\n\nPandoc can provide syntax highlighting for over 140 different languages (see the output of `quarto pandoc --list-highlight-languages` for a list of all of them). If you want to provide the appearance of a highlighted code block for a language not supported, just use `default` as the language name.\n\nYou can specify the code highlighting style using `syntax-highlighting` and specifying one of the supported themes. These themes are \"adaptive\", which means they will automatically switch between a dark and light mode based upon the theme of the website. These are designed to work well with sites that include a dark and light mode.\n\n-   a11y\n-   arrow\n-   atom-one\n-   ayu\n-   breeze\n-   github\n-   gruvbox\n\nAll of the standard Pandoc themes are also available:\n\n-   pygments\n-   tango\n-   espresso\n-   zenburn\n-   kate\n-   monochrome\n-   breezedark\n-   haddock\n\nAs well as an additional set of extended themes, including:\n\n-   dracula\n-   monokai\n-   nord\n-   oblivion\n-   printing\n-   radical\n-   solarized\n-   vim-dark\n\nThe `syntax-highlighting` option determines which theme is used. For example:\n\n``` yaml\nsyntax-highlighting: github\n```\n\nHighlighting themes can provide either a single highlighting definition or two definitions, one optimized for a light colored background and another optimized for a dark color background. When available, Quarto will automatically select the appropriate style based upon the code chunk background color's darkness. Users may always opt to specify the full name (e.g. `atom-one-dark`) to by pass this automatic behavior.\n\nBy default, code is highlighted using the `arrow` theme, which is optimized for accessibility. We've additionally introduced the `arrow-dark` theme which is designed to provide accessible highlighting against dark backgrounds.\n\nExamples of the light and dark themes:\n\n![Arrow (light)](images/arrow.png){fig-alt=\"A block of code showcasing the Arrow (light) theme.\"}\n\n![Arrow (dark)](images/arrow-dark.png){fig-alt=\"A block of code showcasing the Arrow (dark) theme.\"}\n\n![Ayu (light)](images/ayu.png){fig-alt=\"A block of code showcasing the Ayu (light) theme.\"}\n\n![Ayu (dark)](images/ayu-dark.png){.preview-image fig-alt=\"A block of code showcasing the Ayu (dark) theme.\"}\n\n### Custom Highlighting\n\nIn addition to the built in themes available for syntax highlighting, you can also specify your own syntax highlighting by providing the path to a valid theme file (which is based upon the KDE XML syntax highlighting descriptions). Highlighting is implemented using [skylighting](https://github.com/jgm/skylighting).\n\nFor example:\n\n``` yaml\n---\nsyntax-highlighting: custom.theme\n---\n```\n\nIn addition, if you'd like to provide adaptive themes, you may also pass both a light and dark theme file:\n\n``` yaml\n---\nsyntax-highlighting:\n  light: custom-light.theme\n  dark: custom-dark.theme\n---\n```\n\nNote that as with adaptive text higlighting themes, when you provide a dark and light `syntax-highlighting`, background colors specified in the themes will be ignored in favor of the overall theme specified background colors.\n\n## Code Annotation\n\nYou can add annotations to lines of code in code blocks and executable code cells. See [Code Annotation](/docs/authoring/code-annotation.qmd) for full details.\n\n\n## Line Numbers {#line-numbers}\n\nIf you want to display line numbers alongside the code block, add the `code-line-numbers` option. For example:\n\n``` yaml\nformat:\n  html:\n    code-line-numbers: true\n```\n\nHere's how a code block with line numbers would display:\n\n``` {.python code-line-numbers=\"true\"}\nimport matplotlib.pyplot as plt\nplt.plot([1,23,2,4])\nplt.show()\n```\n\nYou can also enable line numbers for an individual code block using the `code-line-numbers` attribute. For example:\n\n```` python\n``` {.python code-line-numbers=\"true\"}\nimport matplotlib.pyplot as plt\nplt.plot([1,23,2,4])\nplt.show()\n```\n````\n\n## Executable Blocks\n\nThe documentation on [computations](/docs/get-started/computations/index.qmd) covers how to include executable code blocks (code which is actually executed, with its output being included in the rendered document). We won't additionally cover that here, but we will talk about how to include code blocks that demonstrate executable syntax (e.g. for writing a tutorial).\n\n\n\n\nOften you'll want to include a fenced code block purely as documentation (not executable). You can do this by using two curly braces around the language (e.g. `python`, `r`, etc.) rather than one. For example:\n\n```{{{python}}}\n1 + 1\n```\n\nWill be output into the document as:\n\n```{{python}}\n1 + 1\n```\n\nIf you want to show an example with multiple code blocks and other markdown, just enclose the entire example in 4 backticks (e.g. ````` ```` `````) and use the two curly brace syntax for code blocks within. For example:\n\n    ````\n    ---\n    title: \"My document\"\n    ---\n\n    Some markdown content.\n\n    ```{{{python}}}\n    1 + 1\n    ```\n\n    Some additional markdown content.\n\n    ````\n\n\n## Copy Button\n\nHover over the code block below and you will see a copy icon in the top-right corner:\n\n\n::: {.cell}\n\n```{.r .cell-code}\nlibrary(dygraphs)\ndygraph(nhtemp, main = \"New Haven Temperatures\") %>% \n  dyRangeSelector(dateWindow = c(\"1920-01-01\", \"1960-01-01\"))\n```\n:::\n\n\nThis behavior is enabled by default but you configure it using the `code-copy` option:\n\n``` yaml\nformat:\n  html:\n    code-copy: false\n```\n\nValid values for `code-copy` include:\n\n|         |                                |\n|---------|--------------------------------|\n| `hover` | Show button on hover (default) |\n| `true`  | Always show code copy button   |\n| `false` | Never show code copy button    |\n\n## Code Linking\n\nThe `code-link` option enables hyper-linking of functions within code blocks to their online documentation:\n\n``` yaml\nformat:\n  html:\n    code-link: true\n```\n\nCode linking is currently implemented only for the knitr engine (via the [downlit](https://downlit.r-lib.org) package).\nA limitation of downlit currently prevents code linking if `code-line-numbers` and/or `code-annotations` are also `true`.\n",
+    "markdown": "---\ntitle: \"HTML Code Blocks\"\ncode-tools: true\nexecute:\n  warning: false\nfig-cap-location: top\n---\n\n\n::: {.cell}\n\n```{.r .cell-code}\nset.seed(29319)\n```\n:::\n\n\n## Overview\n\nThere are wide variety of options available to customize the display of source code within HTML documents, including:\n\n1.  Hiding some or all code that was executed by [Knitr](https://yihui.name/knitr) or [Jupyter](https://jupyter.org).\n2.  Code folding for executed code (hidden by default and expandable by readers).\n3.  Handling code that overflows the available horizontal display space.\n4.  View the source code of the markdown file used to generate the document.\n5.  Syntax highlighting themes and other options to control the appearance of code.\n6.  Copy to clipboard button for code blocks.\n7.  Generating hyperlinks to online documentation for functions used within code blocks via the [downlit](https://downlit.r-lib.org/) package (note that this option currently only works when using the Knitr engine).\n\nDetails on using all of these options are provided below.\n\n## Hiding Code\n\nFor many documents you may want to hide all of the executable source code used to produce dynamic outputs. You can do this by specifying `echo: false` in the document `execute` options. For example:\n\n``` yaml\n---\ntitle: \"My Document\"\nexecute:\n  echo: false\njupyter: python3\n---\n```\n\nNote that we can override this option on a per code-block basis. For example:\n\n```{{python}}\n#| echo: true\n\nimport matplotlib.pyplot as plt\nplt.plot([1,2,3,4])\nplt.show()\n```\n\nCode block options are included in a special comment at the top of the block (lines at the top prefaced with `#|` are considered options).\n\n## Folding Code\n\nUse the `code-fold` option to include code but have it hidden by default using the HTML `<details>` tag. For example, click the **Code** button to see the code that produced this plot.\n\n\n::: {.cell}\n\n```{.r .cell-code  code-fold=\"true\"}\nlibrary(ggplot2)\ndat <- data.frame(cond = rep(c(\"A\", \"B\"), each=10),\n                  xvar = 1:20 + rnorm(20,sd=3),\n                  yvar = 1:20 + rnorm(20,sd=3))\n\nggplot(dat, aes(x=xvar, y=yvar)) +\n  geom_point(shape=1) + \n  geom_smooth() \n```\n\n::: {.cell-output-display}\n![](html-code_files/figure-html/unnamed-chunk-2-1.png){fig-alt='Scatterplot with a smoothed trend line.' width=672}\n:::\n:::\n\n\nHere we specify both `code-fold: true` as well as custom summary text (the default is just \"Code\" as shown above):\n\n``` yaml\nformat:\n  html:\n    code-fold: true\n    code-summary: \"Show the code\"\n```\n\nValid values for `code-fold` include:\n\n| Value   | Behavior                     |\n|---------|------------------------------|\n| `false` | No folding (default)         |\n| `true`  | Fold code (initially hidden) |\n| `show`  | Fold code (initially shown)  |\n\nUse the `code-fold` and `code-summary` chunk attributes to control this on a chunk-by-chunk basis:\n\n```{{r}}\n#| code-fold: true\n#| code-summary: \"Show the code\"\n```\n\n## Code Overflow\n\nIn some cases the width of source code will overflow the available horizontal display space. By default, this will result in a horizontal scroll bar for the code block. However if you prefer not to have scrollbars you can have the longer lines wrap instead.\n\nTo set the global default behavior use the `code-overflow` option. For example:\n\n``` yaml\nformat:\n  html:\n    code-overflow: wrap\n```\n\nValid values for `code-overflow` are:\n\n| Option   | Description                                                                                  |\n|------------------|------------------------------------------------------|\n| `scroll` | Scroll code blocks that exceed available width (default, corresponds to `white-space: pre`). |\n| `wrap`   | Wrap lines of code that exceed available width (corresponds to `white-space: pre-wrap`).     |\n\nYou can also override the global default on a per-code-block basis. For computational cells you do this with the `code-overflow` cell option:\n\n```{{python}}\n#| code-overflow: wrap\n\n# very long line of code....\n```\n\nFor a static code block, add the `.code-overflow-scroll` or `.code-overflow-wrap` CSS class:\n\n```` python\n```{.python .code-overflow-wrap}\n# very long line of code....\n```\n````\n\nNote that irrespective of these options, code will always wrap within printed HTML output (as it would otherwise be clipped off the edge of the page).\n\n## Code Tools\n\nYou can include a **Code** menu in the header of your document that provides various tools for readers to interact with the source code. Specify `code-tools: true` to activate these tools:\n\n``` yaml\nformat:\n  html:\n    code-fold: true\n    code-tools: true\n```\n\nIf you have a document that includes folded code blocks then the **Code** menu will present options to show and hide the folded code as well as view the full source code of the document:\n\n![](images/code-tools-01.png){.border fig-alt=\"A screen shot of the header of a rendered Quarto document showing the result of setting both the code-fold and code-tools option to true. There is a drop-down menu labeled 'Code' to the right of the page title with a triangle pointing down. The menu is open and there are three options listed vertically beneath it: 'Hide All Code,' 'Show All Code,' and 'View Source.'\"}\n\nThis document specifies `code-tools: true` in its options so you should see the **Code** menu above next to the main header.\n\nYou can control which of these options are made available as well as the \"Code\" caption text using sub-options of `code-tools`. For example, here we specify that we want only \"View Source\" (no toggling of code visibility) and no caption on the code menu:\n\n``` yaml\nformat:\n  html: \n    code-tools:\n      source: true\n      toggle: false\n      caption: none\n```\n\nBy default, the source code is embedded in the document and shown in a popup window like this:\n\n![](images/code-tools-source.png){fig-alt=\"A screenshot of this webpage with a pop-up window labeled 'Source Code' over it. This 'Source Code' window contains the raw markdown and R code used to write this page. There is an 'X' on the upper right corner of the 'Source Code' pop up to close it.\"}\n\nYou can alternatively specify a URL for the value of `source`:\n\n``` yaml\nformat:\n  html: \n    code-tools:\n      source: https://github.com/quarto-dev/quarto-web/blob/main/index.md\n```\n\nIf you are within a project and have specified a `repo-url` option then you can just use `repo` and the correct link to your source file will be generated:\n\n``` yaml\nformat:\n  html: \n    code-tools:\n      source: repo\n```\n\nNote that the `code-tools` option is not available when you disable the standard HTML theme (e.g. if you specify the `theme: none` option).\n\n## Appearance\n\nBy default code blocks are rendered with a left border whose color is derived from the current theme. You can customize code chunk appearance with some simple options that control the background color and left border. Options can either be booleans to enable or disable the treatment or can be legal CSS color strings (or they could even be SASS variable names!).\n\nHere is the default appearance for code blocks (`code-block-bg: true`):\n\n![](images/code-bg.png){fig-alt=\"A block of code with a gray background.\"}\n\nYou can instead use a left border treatment using the `code-block-border-left` option:\n\n``` yaml\ncode-block-border-left: true\n```\n\n![](images/code-default.png){fig-alt=\"A block of code with a gray vertical stripe running along its left border. This code block has no background.\"}\n\nYou can combine a background and border treatment as well as customize the left border color:\n\n``` yaml\ncode-block-bg: true\ncode-block-border-left: \"#31BAE9\"\n```\n\n![](images/code-custom.png){fig-alt=\"A block of code with a gray background and a blue vertical stripe running along its left border.\"}\n\n## Code Filename {#code-filename}\n\nUse the `filename` attribute on code blocks If you are documenting the contents of a file and want to be especially clear about the name of the file the code is associated with.\n\nFor example, the following code:\n\n```` markdown\n```{.python filename=\"matplotlib.py\"}\nimport matplotlib.pyplot as plt\nplt.plot([1,23,2,4])\nplt.show()\n```\n````\n\nResults in this HTML output:\n\n```{.python filename=\"matplotlib.py\"}\nimport matplotlib.pyplot as plt\nplt.plot([1,23,2,4])\nplt.show()\n```\n\nNon-HTML formats will still have the filename, but it will simply be shown in bold above the code block.\n\n## Highlighting\n\nPandoc will automatically highlight syntax in [fenced code blocks](https://pandoc.org/MANUAL.html#fenced-code-blocks) that are marked with a language name. For example:\n\n    ```python\n    1 + 1\n    ```\n\nPandoc can provide syntax highlighting for over 140 different languages (see the output of `quarto pandoc --list-highlight-languages` for a list of all of them). If you want to provide the appearance of a highlighted code block for a language not supported, just use `default` as the language name.\n\nYou can specify the code highlighting style using `syntax-highlighting` and specifying one of the supported themes. These themes are \"adaptive\", which means they will automatically switch between a dark and light mode based upon the theme of the website. These are designed to work well with sites that include a dark and light mode.\n\n-   a11y\n-   arrow\n-   atom-one\n-   ayu\n-   breeze\n-   github\n-   gruvbox\n\nAll of the standard Pandoc themes are also available:\n\n-   pygments\n-   tango\n-   espresso\n-   zenburn\n-   kate\n-   monochrome\n-   breezedark\n-   haddock\n\nAs well as an additional set of extended themes, including:\n\n-   dracula\n-   monokai\n-   nord\n-   oblivion\n-   printing\n-   radical\n-   solarized\n-   vim-dark\n\nThe `syntax-highlighting` option determines which theme is used. For example:\n\n``` yaml\nsyntax-highlighting: github\n```\n\nHighlighting themes can provide either a single highlighting definition or two definitions, one optimized for a light colored background and another optimized for a dark color background. When available, Quarto will automatically select the appropriate style based upon the code chunk background color's darkness. Users may always opt to specify the full name (e.g. `atom-one-dark`) to by pass this automatic behavior.\n\nBy default, code is highlighted using the `arrow` theme, which is optimized for accessibility. We've additionally introduced the `arrow-dark` theme which is designed to provide accessible highlighting against dark backgrounds.\n\nExamples of the light and dark themes:\n\n![Arrow (light)](images/arrow.png){fig-alt=\"A block of code showcasing the Arrow (light) theme.\"}\n\n![Arrow (dark)](images/arrow-dark.png){fig-alt=\"A block of code showcasing the Arrow (dark) theme.\"}\n\n![Ayu (light)](images/ayu.png){fig-alt=\"A block of code showcasing the Ayu (light) theme.\"}\n\n![Ayu (dark)](images/ayu-dark.png){.preview-image fig-alt=\"A block of code showcasing the Ayu (dark) theme.\"}\n\n### Custom Highlighting\n\nIn addition to the built in themes available for syntax highlighting, you can also specify your own syntax highlighting by providing the path to a valid theme file (which is based upon the KDE XML syntax highlighting descriptions). Highlighting is implemented using [skylighting](https://github.com/jgm/skylighting).\n\nFor example:\n\n``` yaml\n---\nsyntax-highlighting: custom.theme\n---\n```\n\nIn addition, if you'd like to provide adaptive themes, you may also pass both a light and dark theme file:\n\n``` yaml\n---\nsyntax-highlighting:\n  light: custom-light.theme\n  dark: custom-dark.theme\n---\n```\n\nNote that as with adaptive text higlighting themes, when you provide a dark and light `syntax-highlighting`, background colors specified in the themes will be ignored in favor of the overall theme specified background colors.\n\n## Code Annotation\n\nYou can add annotations to lines of code in code blocks and executable code cells. See [Code Annotation](/docs/authoring/code-annotation.qmd) for full details.\n\n\n## Line Numbers {#line-numbers}\n\nIf you want to display line numbers alongside the code block, add the `code-line-numbers` option. For example:\n\n``` yaml\nformat:\n  html:\n    code-line-numbers: true\n```\n\nHere's how a code block with line numbers would display:\n\n``` {.python code-line-numbers=\"true\"}\nimport matplotlib.pyplot as plt\nplt.plot([1,23,2,4])\nplt.show()\n```\n\nYou can also enable line numbers for an individual code block using the `code-line-numbers` attribute. For example:\n\n```` python\n``` {.python code-line-numbers=\"true\"}\nimport matplotlib.pyplot as plt\nplt.plot([1,23,2,4])\nplt.show()\n```\n````\n\n## Executable Blocks\n\nThe documentation on [computations](/docs/get-started/computations/index.qmd) covers how to include executable code blocks (code which is actually executed, with its output being included in the rendered document). We won't additionally cover that here, but we will talk about how to include code blocks that demonstrate executable syntax (e.g. for writing a tutorial).\n\n\n\n\nOften you'll want to include a fenced code block purely as documentation (not executable). You can do this by using two curly braces around the language (e.g. `python`, `r`, etc.) rather than one. For example:\n\n```{{{python}}}\n1 + 1\n```\n\nWill be output into the document as:\n\n```{{python}}\n1 + 1\n```\n\nIf you want to show an example with multiple code blocks and other markdown, just enclose the entire example in 4 backticks (e.g. ````` ```` `````) and use the two curly brace syntax for code blocks within. For example:\n\n    ````\n    ---\n    title: \"My document\"\n    ---\n\n    Some markdown content.\n\n    ```{{{python}}}\n    1 + 1\n    ```\n\n    Some additional markdown content.\n\n    ````\n\n\n## Copy Button\n\nHover over the code block below and you will see a copy icon in the top-right corner:\n\n\n::: {.cell}\n\n```{.r .cell-code}\nlibrary(dygraphs)\ndygraph(nhtemp, main = \"New Haven Temperatures\") %>% \n  dyRangeSelector(dateWindow = c(\"1920-01-01\", \"1960-01-01\"))\n```\n:::\n\n\nThis behavior is enabled by default but you configure it using the `code-copy` option:\n\n``` yaml\nformat:\n  html:\n    code-copy: false\n```\n\nValid values for `code-copy` include:\n\n|         |                                |\n|---------|--------------------------------|\n| `hover` | Show button on hover (default) |\n| `true`  | Always show code copy button   |\n| `false` | Never show code copy button    |\n\n## Code Linking\n\nThe `code-link` option enables hyper-linking of functions within code blocks to their online documentation:\n\n``` yaml\nformat:\n  html:\n    code-link: true\n```\n\nCode linking is currently implemented only for the knitr engine (via the [downlit](https://downlit.r-lib.org) package).\nA limitation of downlit currently prevents code linking if `code-line-numbers` and/or `code-annotations` are also `true`.\n",
     "supporting": [
       "html-code_files"
     ],
diff --git a/_quarto-prerelease-docs.yml b/_quarto-prerelease-docs.yml
index f88bef4f72..638c57edd1 100644
--- a/_quarto-prerelease-docs.yml
+++ b/_quarto-prerelease-docs.yml
@@ -5,7 +5,7 @@ prerelease-subdomain: prerelease.
 
 website:
   title: "Quarto (Pre-release)"
-  image: "quarto-dark-bg-pre.jpeg"
+  image: /assets/images/quarto-dark-bg-pre.jpeg
   site-url: https://prerelease.quarto.org
   repo-branch: prerelease
   announcement:
@@ -15,8 +15,7 @@ website:
     pinned: true
 
 format:
-  html:
-    toc: true
+  quartoorg-html:
     theme:
-      light: [cosmo, theme.scss, theme-prerelease-banner.scss]
-      dark: [cosmo, theme-dark.scss, theme-prerelease-banner.scss]
+      light: [_extensions/quartoorg/scss/prerelease-banner.scss]
+      dark: [_extensions/quartoorg/scss/prerelease-banner.scss]
diff --git a/_quarto.yml b/_quarto.yml
index 5ff3f7a7ac..3f0056caa3 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -1,5 +1,5 @@
 project:
-  type: website
+  type: quartoorg
   output-dir: _site
   resources:
     - "/docs/download/_download.json"
@@ -8,30 +8,17 @@ project:
     - "/netlify.toml"
     - "/.well-known/atproto-did"
 
-highlight-style: a11y
-
 website:
   title: "Quarto"
-  image: "quarto-dark-bg.jpeg"
-  favicon: "favicon.png"
-  plausible-analytics:
-    path: _plausible.html
-  open-graph: true
-  twitter-card: true
+  favicon: "assets/images/favicon.png"
   site-url: https://quarto.org
   repo-url: https://github.com/quarto-dev/quarto-web
   issue-url: https://github.com/quarto-dev/quarto-cli/issues/new?template=documentation.yml
-  repo-actions: [edit, issue]
-  page-navigation: true
-  bread-crumbs: true
   llms-txt: true
-  search:
-    show-item-context: true
-    type: overlay
   page-footer:
     left: |
       Proudly supported by
-      [![](/images/Posit-Logos-2024_horiz-full-color.svg){fig-alt="Posit" width=65px .light-content}![](/images/Posit-Logos-2024_horiz-full-color-white-text.svg){fig-alt="Posit" width=65px .dark-content}](https://posit.co)
+      [![](/assets/images/Posit-Logos-2024_horiz-full-color.svg){fig-alt="Posit" width=65px .light-content}![](/assets/images/Posit-Logos-2024_horiz-full-color-white-text.svg){fig-alt="Posit" width=65px .dark-content}](https://posit.co)
     center:
       - text: "About"
         href: about.qmd
@@ -52,11 +39,6 @@ website:
         href: https://opensource.posit.co/blog/index.xml
         aria-label: Posit Open Source Blog RSS
   navbar:
-    background: light
-    logo: quarto.png
-    logo-alt: "Quarto logo."
-    title: false
-    collapse-below: lg
     left:
       - text: "Overview"
         href: index.qmd
@@ -679,39 +661,6 @@ website:
 
 bibliography: references.bib
 
-format:
-  html:
-    respect-user-color-scheme: true
-    toc: true
-    theme:
-      light: [cosmo, theme.scss]
-      dark: [cosmo, theme-dark.scss]
-    code-copy: true
-    code-overflow: wrap
-    css: styles.css
-    include-in-header:
-      - text: |
-          <script src="https://cdn.jsdelivr.net/gh/posit-dev/supported-by-posit/js/badge.min.js"
-            data-light-bg="#E8EDF2"
-            data-light-text="#404041"
-            data-light-lt="#ee6331"
-            data-light-gt="#447099"
-            data-dark-bg="#333333"
-            data-dark-lt="#ffffff"
-            data-dark-gt="#ffffff"></script>
-    include-after-body: js.html
-    grid:
-      sidebar-width: 250px
-      body-width: 900px
-      margin-width: 300px
-
-filters:
-  - filters/tools-tabset.lua
-  - filters/color-box.lua
-  - filters/shift-headings.lua
-  - at: post-quarto
-    path: filters/include-dark.lua
-
 version: '1.10'
 prerelease-subdomain: ''
 
diff --git a/_redirects b/_redirects
index 9357b76df6..0dc777febf 100644
--- a/_redirects
+++ b/_redirects
@@ -71,4 +71,27 @@
 /docs/blog/posts/2026-05-05-quarto-2-parsing/*  https://opensource.posit.co/blog/2026-05-07_quarto-2-parsing/  301!
 /docs/blog/posts/2026-05-07-quarto-2-parsing/*  https://opensource.posit.co/blog/2026-05-07_quarto-2-parsing/  301!
 /docs/blog/index.xml  https://opensource.posit.co/blog/index.xml  301!
-/docs/blog/  https://opensource.posit.co/blog/q/quarto/  301!
\ No newline at end of file
+/docs/blog/  https://opensource.posit.co/blog/q/quarto/  301!
+
+# Brand images moved to assets/images/ (2026-09).
+# These URLs are loaded from outside the site: the brand docs used /quarto.png as an
+# example logo, other sites hotlink /favicon.png, /quarto-dark-bg.jpeg was the og:image
+# (a quarto-cli smoke test downloads it), and /images/hero_right.png was the og:image
+# of several docs index pages.
+# images/ is listed file by file because the home page still serves its screenshots
+# from there, and a forced /images/* rule would shadow them.
+/quarto.png  /assets/images/quarto.png  301!
+/favicon.png  /assets/images/favicon.png  301!
+/quarto-dark-bg.jpeg  /assets/images/quarto-dark-bg.jpeg  301!
+/images/hero_left.png  /assets/images/hero_left.png  301!
+/images/hero_right.png  /assets/images/hero_right.png  301!
+/images/Posit-Logos-2024_horiz-full-color.svg  /assets/images/Posit-Logos-2024_horiz-full-color.svg  301!
+/images/Posit-Logos-2024_horiz-full-color-white-text.svg  /assets/images/Posit-Logos-2024_horiz-full-color-white-text.svg  301!
+/images/hero-dark/hero-animation.json  /assets/images/hero-dark/hero-animation.json  301!
+/images/hero-dark/images/img_0.png  /assets/images/hero-dark/images/img_0.png  301!
+/images/hero-dark/images/img_1.png  /assets/images/hero-dark/images/img_1.png  301!
+/images/hero-dark/images/img_2.png  /assets/images/hero-dark/images/img_2.png  301!
+/images/hero-light/hero-animation.json  /assets/images/hero-light/hero-animation.json  301!
+/images/hero-light/images/img_0.png  /assets/images/hero-light/images/img_0.png  301!
+/images/hero-light/images/img_1.png  /assets/images/hero-light/images/img_1.png  301!
+/images/hero-light/images/img_2.png  /assets/images/hero-light/images/img_2.png  301!
diff --git a/_style-guide.md b/_style-guide.md
index 613f988420..259d0c7e71 100644
--- a/_style-guide.md
+++ b/_style-guide.md
@@ -102,7 +102,7 @@ When prose points to a button or other control in a user interface:
 Use the **Render** button ![](images/rstudio-render-button.png){.ui-icon alt="" width="25" height="20"} in RStudio.
 ```
 
-The `.ui-icon` class (`theme.scss` and `theme-dark.scss`) gives the image the same key-cap look as `<kbd>` in the light and dark themes.
+The `.ui-icon` class (`_extensions/quartoorg/scss/partials/_content.scss`) gives the image the same key-cap look as `<kbd>` in the light and dark themes.
 
 ## Headings and Example Labels
 
diff --git a/_tools/README.md b/_tools/README.md
index b21ed62992..79692f7c6b 100644
--- a/_tools/README.md
+++ b/_tools/README.md
@@ -13,6 +13,8 @@ Utility scripts for the quarto-web project. Run with `quarto run` (TypeScript, R
 | `sort-gallery.R` | R | Sort gallery entries |
 | `release-notes.R` | R | Generate release notes content |
 | `snapshot-typst.ts` | TypeScript | Capture Typst document snapshots as PNG |
+| `check-site-format.ts` | TypeScript | Fail on pages, `_metadata.yml` or project config files that set `format: html`, which drops the site theme; `--staged` checks only staged content |
+| `check-site-format.test.ts` | TypeScript | Tests for `check-site-format.ts` |
 
 ## Usage
 
diff --git a/_tools/check-site-format.test.ts b/_tools/check-site-format.test.ts
new file mode 100644
index 0000000000..75ac9d6ee6
--- /dev/null
+++ b/_tools/check-site-format.test.ts
@@ -0,0 +1,108 @@
+import { fromFileUrl } from "stdlib/path";
+import { findViolations, isRendered } from "./check-site-format.ts";
+
+const files: Record<string, string> = {
+  "docs/scalar.qmd": "---\ntitle: A\nformat: html\n---\nBody\n",
+  "docs/list.qmd": "---\nformat: [html, pdf]\n---\n",
+  "docs/mapping.qmd": "---\nformat:\n  html:\n    toc: false\n---\n",
+  "docs/site.qmd": "---\nformat:\n  quartoorg-html:\n    toc: false\n---\n",
+  "docs/site-scalar.qmd": "---\nformat: quartoorg-html\n---\n",
+  "docs/slides.qmd": "---\nformat: revealjs\n---\n",
+  "docs/fenced.qmd": "---\ntitle: B\n---\n\n```yaml\nformat:\n  html:\n    toc: true\n```\n",
+  "docs/plain.md": "No front matter.\n",
+  "docs/sub/_metadata.yml": "format:\n  html:\n    citeproc: false\n",
+  "docs/ok/_metadata.yml": "format:\n  quartoorg-html:\n    citeproc: false\n",
+  "docs/_examples/demo.qmd": "---\nformat: html\n---\n",
+  "docs/_partial.qmd": "---\nformat: html\n---\n",
+  ".github/x.md": "---\nformat: html\n---\n",
+  "docs/nb.ipynb": JSON.stringify({ cells: [{ cell_type: "raw", source: ["---\n", "format: html\n", "---"] }] }),
+  "docs/nb-ok.ipynb": JSON.stringify({ cells: [{ cell_type: "raw", source: ["---\n", "title: C\n", "---"] }] }),
+};
+
+const expected = ["docs/list.qmd", "docs/mapping.qmd", "docs/nb.ipynb", "docs/scalar.qmd", "docs/sub/_metadata.yml"];
+const actual = findViolations(Object.keys(files), (p) => files[p]).sort();
+
+const deletedRead = (p: string) => {
+  if (p === "docs/gone.qmd") throw new Deno.errors.NotFound(`readfile '${p}'`);
+  return files[p];
+};
+const skipsDeleted = findViolations(["docs/gone.qmd", "docs/scalar.qmd"], deletedRead);
+
+let parseMessage = "";
+try {
+  findViolations(["docs/broken.qmd"], () => "---\nformat: [html\n---\n");
+} catch (e) {
+  parseMessage = (e as Error).message;
+}
+
+let notebookMessage = "";
+try {
+  findViolations(["docs/broken.ipynb"], () => "{ not json");
+} catch (e) {
+  notebookMessage = (e as Error).message;
+}
+
+// Runs the script itself, as the hook and CI do, in a scratch git repository.
+const script = fromFileUrl(new URL("./check-site-format.ts", import.meta.url));
+const repo = Deno.makeTempDirSync();
+const git = (...args: string[]) => new Deno.Command("git", { args, cwd: repo }).outputSync();
+const write = (path: string, text: string) => {
+  Deno.mkdirSync(`${repo}/${path.split("/").slice(0, -1).join("/") || "."}`, { recursive: true });
+  Deno.writeTextFileSync(`${repo}/${path}`, text);
+};
+const cli = (cwd: string, ...args: string[]) => {
+  const out = new Deno.Command("quarto", { args: ["run", script, ...args], cwd, stderr: "piped" }).outputSync();
+  return { code: out.code, stderr: new TextDecoder().decode(out.stderr) };
+};
+git("init", "-q");
+write("docs/page.qmd", "---\ntitle: A\n---\n");
+write("about.qmd", "---\nformat: html\n---\n");
+git("add", "-A");
+const fromSubdir = cli(`${repo}/docs`);
+write("docs/page.qmd", "---\nformat: html\n---\n");
+const unstagedEdit = cli(repo, "--staged");
+git("add", "docs/page.qmd");
+write("docs/page.qmd", "---\ntitle: A\n---\n");
+const stagedEdit = cli(repo, "--staged");
+write("docs/bad.qmd", "---\nformat: [html\n---\n");
+git("add", "docs/bad.qmd");
+const parseFailure = cli(repo);
+Deno.removeSync(repo, { recursive: true });
+
+const checks: [string, boolean][] = [
+  ["a malformed notebook names the file", notebookMessage.startsWith("docs/broken.ipynb:")],
+  ["run from a subdirectory, the whole repository is checked", fromSubdir.code === 1 && fromSubdir.stderr.includes("about.qmd")],
+  ["--staged ignores an unstaged edit", unstagedEdit.code === 1 && !unstagedEdit.stderr.includes("docs/page.qmd")],
+  ["--staged reports the staged content", stagedEdit.code === 1 && stagedEdit.stderr.includes("docs/page.qmd")],
+  [
+    "a parse error exits 2 with a plain message",
+    parseFailure.code === 2 && parseFailure.stderr.includes("docs/bad.qmd:") && !parseFailure.stderr.includes("    at "),
+  ],
+  ["violations match", JSON.stringify(actual) === JSON.stringify(expected)],
+  ["a deleted but unstaged file is skipped", JSON.stringify(skipsDeleted) === JSON.stringify(["docs/scalar.qmd"])],
+  ["a YAML error names the file", parseMessage.startsWith("docs/broken.qmd:")],
+  ["_metadata.yml in a rendered directory is checked", isRendered("docs/sub/_metadata.yml")],
+  [
+    "a project config with format: html is reported",
+    JSON.stringify(findViolations(["_quarto.yml", "_quarto-rc.yml"], () => "format:\n  html:\n    toc: true\n")) ===
+      JSON.stringify(["_quarto.yml", "_quarto-rc.yml"]),
+  ],
+  [
+    "a project config with quartoorg-html is clean",
+    findViolations(["_quarto-prerelease-docs.yml"], () => "format:\n  quartoorg-html:\n    toc: true\n").length === 0,
+  ],
+  ["a nested _quarto.yml is not a project config", !isRendered("docs/example/_quarto.yml")],
+  ["underscore directory is skipped", !isRendered("docs/_examples/demo.qmd")],
+  ["underscore file is skipped", !isRendered("docs/_partial.qmd")],
+  ["dot directory is skipped", !isRendered(".github/x.md")],
+];
+
+let failed = 0;
+for (const [name, ok] of checks) {
+  console.log(`${ok ? "ok" : "FAIL"} - ${name}`);
+  if (!ok) failed++;
+}
+if (failed > 0) {
+  console.log(`actual: ${JSON.stringify(actual)}`);
+  Deno.exit(1);
+}
diff --git a/_tools/check-site-format.ts b/_tools/check-site-format.ts
new file mode 100644
index 0000000000..17f3c90e04
--- /dev/null
+++ b/_tools/check-site-format.ts
@@ -0,0 +1,102 @@
+// Fails when a rendered page, a _metadata.yml, or a project config file sets a
+// plain `html` format.
+// Plain `html` replaces the site's `quartoorg-html` format, so the page loses
+// the site theme without any error.
+import { parse } from "stdlib/yaml";
+
+const kSourceExtensions = [".qmd", ".md", ".ipynb"];
+const kProjectConfig = /^_quarto(-[^/]+)?\.ya?ml$/;
+
+const isYamlConfig = (path: string) => path.endsWith("_metadata.yml") || kProjectConfig.test(path);
+
+export function isRendered(path: string): boolean {
+  const segments = path.split("/");
+  const name = segments.pop()!;
+  if (segments.some((s) => s.startsWith("_") || s.startsWith("."))) return false;
+  if (name === "_metadata.yml") return true;
+  if (segments.length === 0 && kProjectConfig.test(name)) return true;
+  return !name.startsWith("_") && !name.startsWith(".") && kSourceExtensions.some((ext) => name.endsWith(ext));
+}
+
+function frontMatter(path: string, text: string): string | undefined {
+  if (isYamlConfig(path)) return text;
+  if (path.endsWith(".ipynb")) {
+    let notebook;
+    try {
+      notebook = JSON.parse(text);
+    } catch (e) {
+      throw new Error(`${path}: cannot parse the notebook: ${(e as Error).message}`);
+    }
+    const first = notebook.cells?.[0];
+    if (first?.cell_type !== "raw") return undefined;
+    text = Array.isArray(first.source) ? first.source.join("") : first.source;
+  }
+  const match = text.match(/^---\r?\n([\s\S]*?)\r?\n---(\r?\n|$)/);
+  return match?.[1];
+}
+
+function usesPlainHtml(meta: unknown): boolean {
+  if (meta === null || typeof meta !== "object") return false;
+  const format = (meta as Record<string, unknown>).format;
+  if (format === "html") return true;
+  if (Array.isArray(format)) return format.includes("html");
+  return format !== null && typeof format === "object" && Object.hasOwn(format, "html");
+}
+
+export function findViolations(files: string[], read: (path: string) => string): string[] {
+  return files.filter(isRendered).filter((path) => {
+    let text: string;
+    try {
+      text = read(path);
+    } catch (e) {
+      // `git ls-files` still lists a file deleted from the working tree but not staged.
+      if (e instanceof Deno.errors.NotFound) return false;
+      throw e;
+    }
+    const yaml = frontMatter(path, text);
+    if (yaml === undefined) return false;
+    try {
+      return usesPlainHtml(parse(yaml));
+    } catch (e) {
+      throw new Error(`${path}: cannot parse the front matter: ${(e as Error).message}`);
+    }
+  });
+}
+
+if (import.meta.main) {
+  // Paths from git and file reads are relative to the repository root.
+  const root = new Deno.Command("git", { args: ["rev-parse", "--show-toplevel"], stdout: "piped" }).outputSync();
+  if (!root.success) {
+    console.error("check-site-format: run this from inside the repository.");
+    Deno.exit(2);
+  }
+  Deno.chdir(new TextDecoder().decode(root.stdout).trim());
+  // `--staged` checks only the staged content of the files staged for commit,
+  // for the pre-commit hook.
+  const staged = Deno.args.includes("--staged");
+  const gitArgs = staged
+    ? ["diff", "--cached", "--name-only", "--diff-filter=ACMR", "-z"]
+    : ["ls-files", "-z"];
+  const readStaged = (path: string) => {
+    const show = new Deno.Command("git", { args: ["show", `:${path}`], stdout: "piped" }).outputSync();
+    if (!show.success) throw new Error(`${path}: cannot read the staged content`);
+    return new TextDecoder().decode(show.stdout);
+  };
+  const listing = new Deno.Command("git", { args: gitArgs, stdout: "piped" }).outputSync();
+  if (!listing.success) {
+    console.error(`check-site-format: \`git ${gitArgs[0]}\` failed; run this from inside the repository.`);
+    Deno.exit(2);
+  }
+  const files = new TextDecoder().decode(listing.stdout).split("\0").filter(Boolean);
+  let violations: string[];
+  try {
+    violations = findViolations(files, staged ? readStaged : (p) => Deno.readTextFileSync(p));
+  } catch (e) {
+    console.error(`check-site-format: ${(e as Error).message}`);
+    Deno.exit(2);
+  }
+  for (const path of violations) {
+    console.error(`${path}: \`format: html\` drops the site theme. Remove the \`format\` key, or use \`quartoorg-html\`.`);
+  }
+  Deno.exit(violations.length > 0 ? 1 : 0);
+}
diff --git a/_tools/release-notes.R b/_tools/release-notes.R
index 57f363177a..23e93e2a87 100644
--- a/_tools/release-notes.R
+++ b/_tools/release-notes.R
@@ -64,7 +64,6 @@ xfun::gsub_file(changelog_file, pattern = "(?<!\\{)(\\{\\{<[^>]*>\\}\\})(?!\\})"
 glue("
 ---
 title: {major_version} Release Notes
-format: html
 ---
 
 {{{{< include _changelog.md >}}}}
diff --git a/filters/axe-page-links.lua b/accessibility/axe-page-links.lua
similarity index 100%
rename from filters/axe-page-links.lua
rename to accessibility/axe-page-links.lua
diff --git a/accessibility/site-report.qmd b/accessibility/site-report.qmd
index 8fa3bdcc38..f75331223c 100644
--- a/accessibility/site-report.qmd
+++ b/accessibility/site-report.qmd
@@ -5,7 +5,7 @@ extensions:
     show-platform-badge: false
 filters:
   - gitlink
-  - ../filters/axe-page-links.lua
+  - axe-page-links.lua
 ---
 
 We want [quarto.org](https://quarto.org) to work for everyone.
diff --git a/ejs/links.ejs b/assets/ejs/links.ejs
similarity index 100%
rename from ejs/links.ejs
rename to assets/ejs/links.ejs
diff --git a/images/Posit-Logos-2024_horiz-full-color-white-text.svg b/assets/images/Posit-Logos-2024_horiz-full-color-white-text.svg
similarity index 100%
rename from images/Posit-Logos-2024_horiz-full-color-white-text.svg
rename to assets/images/Posit-Logos-2024_horiz-full-color-white-text.svg
diff --git a/images/Posit-Logos-2024_horiz-full-color.svg b/assets/images/Posit-Logos-2024_horiz-full-color.svg
similarity index 100%
rename from images/Posit-Logos-2024_horiz-full-color.svg
rename to assets/images/Posit-Logos-2024_horiz-full-color.svg
diff --git a/favicon.png b/assets/images/favicon.png
similarity index 100%
rename from favicon.png
rename to assets/images/favicon.png
diff --git a/images/hero-dark/hero-animation.json b/assets/images/hero-dark/hero-animation.json
similarity index 100%
rename from images/hero-dark/hero-animation.json
rename to assets/images/hero-dark/hero-animation.json
diff --git a/images/hero-dark/images/img_0.png b/assets/images/hero-dark/images/img_0.png
similarity index 100%
rename from images/hero-dark/images/img_0.png
rename to assets/images/hero-dark/images/img_0.png
diff --git a/images/hero-dark/images/img_1.png b/assets/images/hero-dark/images/img_1.png
similarity index 100%
rename from images/hero-dark/images/img_1.png
rename to assets/images/hero-dark/images/img_1.png
diff --git a/images/hero-dark/images/img_2.png b/assets/images/hero-dark/images/img_2.png
similarity index 100%
rename from images/hero-dark/images/img_2.png
rename to assets/images/hero-dark/images/img_2.png
diff --git a/images/hero-light/hero-animation.json b/assets/images/hero-light/hero-animation.json
similarity index 100%
rename from images/hero-light/hero-animation.json
rename to assets/images/hero-light/hero-animation.json
diff --git a/images/hero-light/images/img_0.png b/assets/images/hero-light/images/img_0.png
similarity index 100%
rename from images/hero-light/images/img_0.png
rename to assets/images/hero-light/images/img_0.png
diff --git a/images/hero-light/images/img_1.png b/assets/images/hero-light/images/img_1.png
similarity index 100%
rename from images/hero-light/images/img_1.png
rename to assets/images/hero-light/images/img_1.png
diff --git a/images/hero-light/images/img_2.png b/assets/images/hero-light/images/img_2.png
similarity index 100%
rename from images/hero-light/images/img_2.png
rename to assets/images/hero-light/images/img_2.png
diff --git a/images/hero_left.png b/assets/images/hero_left.png
similarity index 100%
rename from images/hero_left.png
rename to assets/images/hero_left.png
diff --git a/images/hero_right.png b/assets/images/hero_right.png
similarity index 100%
rename from images/hero_right.png
rename to assets/images/hero_right.png
diff --git a/quarto-dark-bg-pre.jpeg b/assets/images/quarto-dark-bg-pre.jpeg
similarity index 100%
rename from quarto-dark-bg-pre.jpeg
rename to assets/images/quarto-dark-bg-pre.jpeg
diff --git a/quarto-dark-bg.jpeg b/assets/images/quarto-dark-bg.jpeg
similarity index 100%
rename from quarto-dark-bg.jpeg
rename to assets/images/quarto-dark-bg.jpeg
diff --git a/quarto-dark.png b/assets/images/quarto-dark.png
similarity index 100%
rename from quarto-dark.png
rename to assets/images/quarto-dark.png
diff --git a/quarto-icon.svg b/assets/images/quarto-icon.svg
similarity index 100%
rename from quarto-icon.svg
rename to assets/images/quarto-icon.svg
diff --git a/quarto.png b/assets/images/quarto.png
similarity index 100%
rename from quarto.png
rename to assets/images/quarto.png
diff --git a/js/lottie.min.js b/assets/js/lottie.min.js
similarity index 100%
rename from js/lottie.min.js
rename to assets/js/lottie.min.js
diff --git a/docs/advanced/environment-vars.qmd b/docs/advanced/environment-vars.qmd
index d117eec5cc..c0c47d3526 100644
--- a/docs/advanced/environment-vars.qmd
+++ b/docs/advanced/environment-vars.qmd
@@ -1,7 +1,6 @@
 ---
 title: "Quarto Environment Variables"
 summary: Environment variables Quarto inspects and sets
-format: html
 ---
 
 ## Variables Quarto inspects
diff --git a/docs/advanced/index.qmd b/docs/advanced/index.qmd
index 42e4d7d604..245316e244 100644
--- a/docs/advanced/index.qmd
+++ b/docs/advanced/index.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Advanced User Documentation"
-format: html
 search: false
 listing: 
   type: table
diff --git a/docs/advanced/inspect/index.qmd b/docs/advanced/inspect/index.qmd
index b8bb3774f0..916007cf57 100644
--- a/docs/advanced/inspect/index.qmd
+++ b/docs/advanced/inspect/index.qmd
@@ -1,7 +1,6 @@
 ---
 title: Quarto Inspect
 summary: Project and document information in a machine-readable format
-format: html
 ---
 
 ## Overview
diff --git a/docs/advanced/jupyter/kernel-execution.qmd b/docs/advanced/jupyter/kernel-execution.qmd
index c9ebb994b0..b3d2687145 100644
--- a/docs/advanced/jupyter/kernel-execution.qmd
+++ b/docs/advanced/jupyter/kernel-execution.qmd
@@ -1,6 +1,5 @@
 ---
 title: Jupyter Kernel Execution
-format: html
 summary: How to support Quarto from a Jupyter kernel
 ---
 
diff --git a/docs/advanced/quarto-execute-info.qmd b/docs/advanced/quarto-execute-info.qmd
index 6ee768a235..e325f1e2d3 100644
--- a/docs/advanced/quarto-execute-info.qmd
+++ b/docs/advanced/quarto-execute-info.qmd
@@ -1,7 +1,6 @@
 ---
 title: "Execution Context Information"
 summary: Access execution context metadata via QUARTO_EXECUTE_INFO
-format: html
 ---
 
 ## Overview
diff --git a/docs/authoring/article-layout.qmd b/docs/authoring/article-layout.qmd
index 02ea600d41..9e4ca51370 100644
--- a/docs/authoring/article-layout.qmd
+++ b/docs/authoring/article-layout.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Article Layout"
-format: html
 reference-location: margin
 citation-location: margin
 aliases:
diff --git a/docs/authoring/brand.qmd b/docs/authoring/brand.qmd
index 578cbbc4ed..1fa13b3d99 100644
--- a/docs/authoring/brand.qmd
+++ b/docs/authoring/brand.qmd
@@ -335,7 +335,7 @@ You can also specify named logos under `images` which you can reference in `smal
 logo: 
   images:
     quarto-logo: 
-      path: https://quarto.org/quarto.png
+      path: https://quarto.org/assets/images/quarto.png
       alt: "Quarto icon"
   small: quarto-logo
 ``` 
diff --git a/docs/authoring/callouts.qmd b/docs/authoring/callouts.qmd
index 3b0d790491..d812812b97 100644
--- a/docs/authoring/callouts.qmd
+++ b/docs/authoring/callouts.qmd
@@ -1,6 +1,5 @@
 ---
 title: Callout Blocks
-format: html
 ---
 
 Callouts are an excellent way to draw extra attention to certain concepts, or to more clearly indicate that certain content is supplemental or applicable to only some scenarios.
diff --git a/docs/authoring/citations.qmd b/docs/authoring/citations.qmd
index 826efe23f0..b4be496fdc 100644
--- a/docs/authoring/citations.qmd
+++ b/docs/authoring/citations.qmd
@@ -1,6 +1,5 @@
 ---
 title: Citations
-format: html
 link-citations: true
 aliases: 
   - /docs/authoring/footnotes-and-citations.html
diff --git a/docs/authoring/cross-reference-options.qmd b/docs/authoring/cross-reference-options.qmd
index 77af0ef230..d729f94955 100644
--- a/docs/authoring/cross-reference-options.qmd
+++ b/docs/authoring/cross-reference-options.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Cross-Reference Options"
-format: html
 ---
 
 ## Overview 
diff --git a/docs/authoring/cross-references.qmd b/docs/authoring/cross-references.qmd
index 65d5ce9cda..a7cb6ccc4b 100644
--- a/docs/authoring/cross-references.qmd
+++ b/docs/authoring/cross-references.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Cross References"
-format: html
 toc-expand: 2
 toc-depth: 4
 aliases: 
diff --git a/docs/authoring/figures.qmd b/docs/authoring/figures.qmd
index 0891335416..51c1a3f29e 100644
--- a/docs/authoring/figures.qmd
+++ b/docs/authoring/figures.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Figures"
-format: html
 aliases: 
   - figures-and-layout.html
   - figure-layout.html
diff --git a/docs/authoring/includes.qmd b/docs/authoring/includes.qmd
index 65122e4bfe..0c1b67fdec 100644
--- a/docs/authoring/includes.qmd
+++ b/docs/authoring/includes.qmd
@@ -1,5 +1,12 @@
 ---
 title: "Includes"
+include-in-header:
+  - text: |
+      <style type="text/css">
+      code span.in {
+        font-style:  normal;
+      }
+      </style>
 ---
 
 ## Overview
@@ -104,10 +111,3 @@ A couple of important things to remember when using computational includes:
 
 2)  Computational includes work only in `.qmd` files (they don't work in `.ipynb` notebook files)
 
-```{=html}
-<style type="text/css">
-code span.in {
-  font-style:  normal;
-}
-</style>
-```
diff --git a/docs/authoring/markdown-basics.qmd b/docs/authoring/markdown-basics.qmd
index 0b3d02c521..5358caee68 100644
--- a/docs/authoring/markdown-basics.qmd
+++ b/docs/authoring/markdown-basics.qmd
@@ -1,6 +1,5 @@
 ---
 title: Markdown Basics
-format: html
 language:
   section-title-footnotes: Example Footnotes
 aliases:
diff --git a/docs/books/book-basics.qmd b/docs/books/book-basics.qmd
index 0abfb1be04..401ac6f3c7 100644
--- a/docs/books/book-basics.qmd
+++ b/docs/books/book-basics.qmd
@@ -1,8 +1,6 @@
 ---
 title: "Creating a Book"
-format:
-  html:
-    output-file: index.html
+output-file: index.html
 ---
 
 ## Overview
diff --git a/docs/books/book-output.qmd b/docs/books/book-output.qmd
index cfc62b67d4..3545eb03bb 100644
--- a/docs/books/book-output.qmd
+++ b/docs/books/book-output.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Customizing Book Output"
-format: html
 project-type: book
 ---
 
diff --git a/docs/books/book-structure.qmd b/docs/books/book-structure.qmd
index 99f82ac625..db61681bfb 100644
--- a/docs/books/book-structure.qmd
+++ b/docs/books/book-structure.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Book Structure"
-format: html
 project-type: book
 ---
 
diff --git a/docs/computations/execution-options.qmd b/docs/computations/execution-options.qmd
index ca474b842a..407dcb4ab9 100644
--- a/docs/computations/execution-options.qmd
+++ b/docs/computations/execution-options.qmd
@@ -1,6 +1,5 @@
 ---
 title: Execution Options
-format: html
 ---
 
 ## Output Options
diff --git a/docs/computations/inline-code.qmd b/docs/computations/inline-code.qmd
index 9ed8b7d7da..a497409557 100644
--- a/docs/computations/inline-code.qmd
+++ b/docs/computations/inline-code.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Inline Code"
-format: html
 aliases: 
   - /docs/prerelease/1.4/inline.html
 ---
diff --git a/docs/computations/render-scripts.qmd b/docs/computations/render-scripts.qmd
index 66f3301131..a2ec8d31c0 100644
--- a/docs/computations/render-scripts.qmd
+++ b/docs/computations/render-scripts.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Rendering Script Files"
-format: html
 code-annotations: select
 aliases: 
   - /docs/prerelease/1.4/script-r.html
diff --git a/docs/dashboards/deployment.qmd b/docs/dashboards/deployment.qmd
index 18191480b6..309714626d 100644
--- a/docs/dashboards/deployment.qmd
+++ b/docs/dashboards/deployment.qmd
@@ -1,6 +1,14 @@
 ---
 title: "Dashboard Deployment"
 lightbox: auto
+include-in-header:
+  - text: |
+      <style type="text/css">
+      /* remove confluence */
+      #static-dashboards table tr:nth-child(5) {
+        display: none;
+      }
+      </style>
 ---
 
 ## Overview
@@ -15,14 +23,6 @@ To get started, review the documentation for using one of the following publishi
 
 {{< include /docs/publishing/_providers.md >}}
 
-```{=html}
-<style type="text/css">
-/* remove confluence */
-#static-dashboards table tr:nth-child(5) {
-  display: none;
-}
-</style>
-```
 ## Shiny Dashboards {#shiny-dashboards}
 
 Dashboards that use [Shiny for Python](/docs/dashboards/interactivity/shiny-python/index.qmd) or [Shiny for R](/docs/dashboards/interactivity/shiny-r.qmd) are web applications that require a server for deployment (so they can't just be deployed to a generic web host). Deployment options for Shiny applications include:
diff --git a/docs/dashboards/index.qmd b/docs/dashboards/index.qmd
index f151fd76f5..4ec96d2030 100644
--- a/docs/dashboards/index.qmd
+++ b/docs/dashboards/index.qmd
@@ -2,18 +2,22 @@
 title: "Quarto Dashboards"
 code-annotations: select
 lightbox: auto
-format:
-  html:
-    include-in-header: 
-      - '../download/_download.html'
-    include-after-body: 
-      text: |
-        <script type="text/javascript">
-        window['quarto-download-release'] = true;
-        window['quarto-download-prerelease'] = true;
-        window['quarto-download-nonews'] = true;
-        window["quarto-prerelease-mode"] = '{{< meta prerelease-mode >}}';
-        </script>   
+include-in-header: 
+  - '../download/_download.html'
+  - text: |
+      <style type="text/css">
+      #download-table {
+        display: none;
+      }
+      </style>
+include-after-body: 
+  text: |
+    <script type="text/javascript">
+    window['quarto-download-release'] = true;
+    window['quarto-download-prerelease'] = true;
+    window['quarto-download-nonews'] = true;
+    window["quarto-prerelease-mode"] = '{{< meta prerelease-mode >}}';
+    </script>   
 ---
 
 {{< include /docs/_require-1.4.qmd >}}
@@ -123,14 +127,6 @@ Dashboards are a feature in the Quarto v1.4. Before you get started, make sure y
 
 {{< include ../download/_download.md >}}
 
-```{=html}
-<style type="text/css">
-#download-table {
-  display: none;
-}
-</style>
-```
-
 You can find release notes and installers for all platforms in the [download page](/docs/download/prerelease.qmd).
 
 ### Step 2: Learn the Basics
diff --git a/docs/download/changelog/1.1/index.qmd b/docs/download/changelog/1.1/index.qmd
index 07c7f7e1ce..f45a46f2b6 100644
--- a/docs/download/changelog/1.1/index.qmd
+++ b/docs/download/changelog/1.1/index.qmd
@@ -1,6 +1,5 @@
 ---
 title: "1.1 Release Notes"
-format: html
 ---
 
 {{< include _changelog.md >}}
diff --git a/docs/download/changelog/1.2/index.qmd b/docs/download/changelog/1.2/index.qmd
index 3e12e94bbb..f7c34ba6fd 100644
--- a/docs/download/changelog/1.2/index.qmd
+++ b/docs/download/changelog/1.2/index.qmd
@@ -1,6 +1,5 @@
 ---
 title: "1.2 Release Notes"
-format: html
 ---
 
 {{< include _changelog.md >}}
diff --git a/docs/download/changelog/1.3/index.qmd b/docs/download/changelog/1.3/index.qmd
index 446ce35c12..95f329e51c 100644
--- a/docs/download/changelog/1.3/index.qmd
+++ b/docs/download/changelog/1.3/index.qmd
@@ -1,6 +1,5 @@
 ---
 title: "1.3 Release Notes"
-format: html
 ---
 
 {{< include _changelog.md >}}
diff --git a/docs/download/changelog/1.4/index.qmd b/docs/download/changelog/1.4/index.qmd
index 803dc39d8e..37ade35e65 100644
--- a/docs/download/changelog/1.4/index.qmd
+++ b/docs/download/changelog/1.4/index.qmd
@@ -1,6 +1,5 @@
 ---
 title: "1.4 Release Notes"
-format: html
 ---
 
 {{< include _changelog.md >}}
diff --git a/docs/download/changelog/1.5/index.qmd b/docs/download/changelog/1.5/index.qmd
index 0fdb186051..35540f4f4a 100644
--- a/docs/download/changelog/1.5/index.qmd
+++ b/docs/download/changelog/1.5/index.qmd
@@ -1,6 +1,5 @@
 ---
 title: 1.5 Release Notes
-format: html
 ---
 
 {{< include _changelog.md >}}
diff --git a/docs/download/changelog/1.6/index.qmd b/docs/download/changelog/1.6/index.qmd
index 5a611717f5..9eab025de2 100644
--- a/docs/download/changelog/1.6/index.qmd
+++ b/docs/download/changelog/1.6/index.qmd
@@ -1,6 +1,5 @@
 ---
 title: 1.6 Release Notes
-format: html
 ---
 
 {{< include _changelog.md >}}
diff --git a/docs/download/changelog/1.7/index.qmd b/docs/download/changelog/1.7/index.qmd
index 1d918dc6ba..0d1a1f2c96 100644
--- a/docs/download/changelog/1.7/index.qmd
+++ b/docs/download/changelog/1.7/index.qmd
@@ -1,6 +1,5 @@
 ---
 title: 1.7 Release Notes
-format: html
 ---
 
 {{< include _changelog.md >}}
diff --git a/docs/download/changelog/1.8/index.qmd b/docs/download/changelog/1.8/index.qmd
index d1a3f311ec..d003fe06b8 100644
--- a/docs/download/changelog/1.8/index.qmd
+++ b/docs/download/changelog/1.8/index.qmd
@@ -1,6 +1,5 @@
 ---
 title: 1.8 Release Notes
-format: html
 ---
 
 {{< include _changelog.md >}}
diff --git a/docs/download/changelog/1.9/index.qmd b/docs/download/changelog/1.9/index.qmd
index dead48d78c..99893df7bd 100644
--- a/docs/download/changelog/1.9/index.qmd
+++ b/docs/download/changelog/1.9/index.qmd
@@ -1,6 +1,5 @@
 ---
 title: 1.9 Release Notes
-format: html
 ---
 
 {{< include _changelog.md >}}
diff --git a/docs/download/changelog/_metadata.yml b/docs/download/changelog/_metadata.yml
index 1aaf6ecc88..d0a0606b87 100644
--- a/docs/download/changelog/_metadata.yml
+++ b/docs/download/changelog/_metadata.yml
@@ -1,3 +1 @@
-format:
-  html:
-    citeproc: false
\ No newline at end of file
+citeproc: false
\ No newline at end of file
diff --git a/docs/download/index.qmd b/docs/download/index.qmd
index 6b2314ed90..b412db2766 100644
--- a/docs/download/index.qmd
+++ b/docs/download/index.qmd
@@ -1,23 +1,21 @@
 ---
 title: "Download Quarto"
 subtitle: "Install a release or pre-release build of Quarto."
-format:
-  html:
-    include-in-header: 
-      - '_download.html'
-    include-after-body: 
-      text: |
-        <script type="text/javascript">
-        window['quarto-download-prerelease'] = true;
-        window['quarto-download-release'] = true;
-        window['quarto-download-archives'] = true;
-        window["quarto-prerelease-mode"] = '{{< meta prerelease-mode >}}';
-        </script>
+include-in-header: 
+  - '_download.html'
+include-after-body: 
+  text: |
+    <script type="text/javascript">
+    window['quarto-download-prerelease'] = true;
+    window['quarto-download-release'] = true;
+    window['quarto-download-archives'] = true;
+    window["quarto-prerelease-mode"] = '{{< meta prerelease-mode >}}';
+    </script>
 page-layout: full
 toc: false
 anchor-sections: false
 editor: source
-image: /images/hero_right.png
+image: /assets/images/hero_right.png
 listing:
   id: download-older
   contents: /_download-older.yml
diff --git a/docs/download/prerelease.qmd b/docs/download/prerelease.qmd
index d129ecd5bd..23900b2faa 100644
--- a/docs/download/prerelease.qmd
+++ b/docs/download/prerelease.qmd
@@ -1,22 +1,20 @@
 ---
 title: "{{< meta prerelease-title >}} Builds"
 subtitle: "Install a {{< meta prerelease-lower >}} build of Quarto."
-format:
-  html:
-    include-in-header: 
-      - '_download.html'
-    include-after-body: 
-      text: |
-        <script type="text/javascript">
-        window['quarto-download-prerelease'] = true;
-        window['quarto-download-archives'] = true;
-        window["quarto-prerelease-mode"] = '{{< meta prerelease-mode >}}';
-        </script>
+include-in-header: 
+  - '_download.html'
+include-after-body: 
+  text: |
+    <script type="text/javascript">
+    window['quarto-download-prerelease'] = true;
+    window['quarto-download-archives'] = true;
+    window["quarto-prerelease-mode"] = '{{< meta prerelease-mode >}}';
+    </script>
 page-layout: full
 toc: false
 anchor-sections: false
 editor: source
-image: /images/hero_right.png
+image: /assets/images/hero_right.png
 aliases:
   - changelog/1.11/
 ---
diff --git a/docs/download/release.qmd b/docs/download/release.qmd
index c791464e67..8c2d4ea368 100644
--- a/docs/download/release.qmd
+++ b/docs/download/release.qmd
@@ -1,21 +1,19 @@
 ---
 title: "Release Builds"
 subtitle: "Install a release build of Quarto."
-format:
-  html:
-    include-in-header: 
-      - '_download.html'
-    include-after-body: 
-      text: |
-        <script type="text/javascript">
-        window['quarto-download-release'] = true;
-        window['quarto-download-archives'] = true;
-        </script>
+include-in-header: 
+  - '_download.html'
+include-after-body: 
+  text: |
+    <script type="text/javascript">
+    window['quarto-download-release'] = true;
+    window['quarto-download-archives'] = true;
+    </script>
 page-layout: full
 toc: false
 anchor-sections: false
 editor: source
-image: /images/hero_right.png
+image: /assets/images/hero_right.png
 aliases:
   - changelog/1.10/
 ---
diff --git a/docs/download/tarball.qmd b/docs/download/tarball.qmd
index 7ad8b32bf3..9773ab6236 100644
--- a/docs/download/tarball.qmd
+++ b/docs/download/tarball.qmd
@@ -1,10 +1,8 @@
 ---
 title: Tarball Installation On Linux
-format:
-  html:
-    include-in-header: 
-      - '_download.html'
-    include-after-body: tarball-after-body.html
+include-in-header: 
+  - '_download.html'
+include-after-body: tarball-after-body.html
 search: false
 ---
 
diff --git a/docs/extensions/listings/_metadata.yml b/docs/extensions/listings/_metadata.yml
index 6d4298bffa..e91522b942 100644
--- a/docs/extensions/listings/_metadata.yml
+++ b/docs/extensions/listings/_metadata.yml
@@ -10,7 +10,4 @@ listing:
     - name
   field-display-names: 
     name: Name
-format:
-  html:
-    anchor-sections: false
-  
\ No newline at end of file
+anchor-sections: false
diff --git a/docs/gallery/index.qmd b/docs/gallery/index.qmd
index 565f117139..0545448db6 100644
--- a/docs/gallery/index.qmd
+++ b/docs/gallery/index.qmd
@@ -1,8 +1,6 @@
 ---
 pagetitle: "Gallery"
-format:
-  html:
-    toc: false
+toc: false
 image: articles/advanced-layout-pdf.png
 search: false
 execute:
diff --git a/docs/get-started/index.qmd b/docs/get-started/index.qmd
index 5d48b1472d..d255e6833e 100644
--- a/docs/get-started/index.qmd
+++ b/docs/get-started/index.qmd
@@ -1,27 +1,25 @@
 ---
 title: "Get Started"
 subtitle: "Install Quarto, then check out the tutorials to learn the basics."
-format:
-  html:
-    include-in-header: 
-      - '../download/_download.html'
-    include-before-body:
-      - '_tool-menu.html'
-    include-after-body: 
-      text: |
-        <script type="text/javascript">
-        window['quarto-download-release'] = true;
-        window['quarto-download-prerelease'] = true;
-        window['quarto-download-nonews'] = true;
-        window["quarto-prerelease-mode"] = '{{< meta prerelease-mode >}}';
-        </script>      
+include-in-header: 
+  - '../download/_download.html'
+include-before-body:
+  - '_tool-menu.html'
+include-after-body: 
+  text: |
+    <script type="text/javascript">
+    window['quarto-download-release'] = true;
+    window['quarto-download-prerelease'] = true;
+    window['quarto-download-nonews'] = true;
+    window["quarto-prerelease-mode"] = '{{< meta prerelease-mode >}}';
+    </script>      
 page-layout: full
 toc: false
 anchor-sections: false
 editor: source
 aliases:
   - /docs/getting-started/installation.html
-image: /images/hero_right.png
+image: /assets/images/hero_right.png
 ---
 
 ::: {.grid .step .column-page-right}
diff --git a/docs/get-started/tutorial.css b/docs/get-started/tutorial.css
index 1f68afa839..20ca2506c7 100644
--- a/docs/get-started/tutorial.css
+++ b/docs/get-started/tutorial.css
@@ -29,50 +29,3 @@
 .step .table>:not(caption)>*>* {
   border-bottom-width: 0;
 }
-
-.tool {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-/* The dark theme's --bs-border-color is near-invisible (1.08:1), so keep
-   #2237's border until the theme's $border-color is fixed. Light mode uses
-   --bs-border-color as is. */
-body.quarto-dark .tool {
-  --tool-border: #6c757d;
-}
-
-.tool a {
-  width: 100px;
-  text-align: center;
-  color: var(--bs-body-color);
-  border: 1px solid var(--tool-border, var(--bs-border-color));
-  border-radius: 10px;
-  margin-right: 20px;
-  margin-bottom: 0;
-  margin-top: 10px;
-  font-size: 0.85em;
-}
-
-.tool a:hover {
-  color: var(--bs-body-color);
-  border-color: var(--bs-link-color);
-  background-color: transparent;
-}
-
-/* .btn's focus style is a near-white shadow; restore a visible ring. */
-.tool a:focus-visible {
-  outline: 2px solid var(--bs-link-color);
-  outline-offset: 2px;
-  box-shadow: none;
-}
-
-.tool a img {
-  display: block;
-  width: 67px;
-  height: 67px;
-  margin: auto;
-  margin-bottom: 5px;
-}
diff --git a/docs/guide/index.qmd b/docs/guide/index.qmd
index 1c91f192ee..7741633b2b 100644
--- a/docs/guide/index.qmd
+++ b/docs/guide/index.qmd
@@ -6,9 +6,9 @@ anchor-sections: false
 search: false
 listing:
   id: guide-links
-  template: ../../ejs/links.ejs
+  template: ../../assets/ejs/links.ejs
   contents: guide.yml
-image: /images/hero_right.png
+image: /assets/images/hero_right.png
 ---
 
 ::: {#guide-links .column-screen-inset-right style="max-width: 850px;"}
diff --git a/docs/interactive/ojs/data-sources.qmd b/docs/interactive/ojs/data-sources.qmd
index 720910430f..8874dc3f8b 100644
--- a/docs/interactive/ojs/data-sources.qmd
+++ b/docs/interactive/ojs/data-sources.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Data Sources"
-format: html
 execute:
   echo: fenced
 ---
diff --git a/docs/interactive/ojs/examples/arquero.qmd b/docs/interactive/ojs/examples/arquero.qmd
index 41af53a536..b2d16e0dbb 100644
--- a/docs/interactive/ojs/examples/arquero.qmd
+++ b/docs/interactive/ojs/examples/arquero.qmd
@@ -1,8 +1,6 @@
 ---
 title: "Arquero"
-format:
-  html:
-    code-tools: true
+code-tools: true
 ---
 
 Simple demonstration of [Arquero](https://uwdata.github.io/arquero/) using Allison Horst's [Palmer Penguins](https://allisonhorst.github.io/palmerpenguins/) dataset. 
diff --git a/docs/interactive/ojs/examples/github.qmd b/docs/interactive/ojs/examples/github.qmd
index 559f2778d3..d98a890a9c 100644
--- a/docs/interactive/ojs/examples/github.qmd
+++ b/docs/interactive/ojs/examples/github.qmd
@@ -1,9 +1,7 @@
 ---
 title: "GitHub API"
-format: 
-  html:
-    toc: false
-    code-tools: true
+toc: false
+code-tools: true
 ---
 
 Demonstration of using the [GitHub API](https://developer.github.com/v3). 
diff --git a/docs/interactive/ojs/examples/layout.qmd b/docs/interactive/ojs/examples/layout.qmd
index af3a247287..04eb81a2b1 100644
--- a/docs/interactive/ojs/examples/layout.qmd
+++ b/docs/interactive/ojs/examples/layout.qmd
@@ -1,11 +1,9 @@
 ---
 title: "Layout"
-format:
-  html:
-    echo: false
-    code-tools: true
-    page-layout: full
-    toc: false
+echo: false
+code-tools: true
+page-layout: full
+toc: false
 ---
 
 You can control the layout of OJS content in a number of ways.
diff --git a/docs/interactive/ojs/examples/noaa-co2.qmd b/docs/interactive/ojs/examples/noaa-co2.qmd
index f120d51fd3..b848723de9 100644
--- a/docs/interactive/ojs/examples/noaa-co2.qmd
+++ b/docs/interactive/ojs/examples/noaa-co2.qmd
@@ -1,8 +1,6 @@
 ---
 title: "NOAA CO2"
-format: 
-  html:
-    code-tools: true
+code-tools: true
 ---
 
 Read and plot a CSV of NOAA's Monthly [CO2 concentration data](https://gml.noaa.gov/ccgg/trends/data.html) from Mauna Loa:
diff --git a/docs/interactive/ojs/examples/penguins.qmd b/docs/interactive/ojs/examples/penguins.qmd
index 3ff20327c0..3fa3701722 100644
--- a/docs/interactive/ojs/examples/penguins.qmd
+++ b/docs/interactive/ojs/examples/penguins.qmd
@@ -1,11 +1,9 @@
 ---
 title: "Penguins"
-format:
-  html:
-    toc: false
-    echo: false
-    keep-hidden: true
-    code-tools: true
+toc: false
+echo: false
+keep-hidden: true
+code-tools: true
 ---
 
 A simple example based on Allison Horst's [Palmer Penguins](https://allisonhorst.github.io/palmerpenguins/) dataset. Here we look at how penguin body mass varies across both sex and species (use the provided inputs to filter the dataset by bill length and island):
diff --git a/docs/interactive/ojs/examples/population.qmd b/docs/interactive/ojs/examples/population.qmd
index ab7604596b..d3a934f496 100644
--- a/docs/interactive/ojs/examples/population.qmd
+++ b/docs/interactive/ojs/examples/population.qmd
@@ -1,9 +1,7 @@
 ---
 title: "Population"
-format: 
-  html:
-    code-tools: true
-    toc: false
+code-tools: true
+toc: false
 ---
 
 This example demonstrates importing a notebook from ObervableHQ and replacing its data with data of our own (the code and data for this example were originally published  [here](https://github.com/observablehq/examples/tree/main/custom-data)).
diff --git a/docs/interactive/ojs/examples/sunburst.qmd b/docs/interactive/ojs/examples/sunburst.qmd
index 2b592fa8ce..8a22e205c0 100644
--- a/docs/interactive/ojs/examples/sunburst.qmd
+++ b/docs/interactive/ojs/examples/sunburst.qmd
@@ -4,10 +4,8 @@ subtitle: "Originally published at <https://observablehq.com/@d3/zoomable-sunbur
 author: "Mike Bostock"
 date: "2018-04-30"
 license: ISC License
-format: 
-  html:
-    toc: false
-    code-tools: true
+toc: false
+code-tools: true
 ---
 
 This variant of a [sunburst diagram](https://observablehq.com/@d3/sunburst) shows only two layers of the hierarchy at a time. Click a node to zoom in, or the center to zoom out. Compare to an [icicle](https://observablehq.com/@d3/zoomable-icicle).
diff --git a/docs/interactive/ojs/libraries.qmd b/docs/interactive/ojs/libraries.qmd
index 131a94b003..ebebbc78d3 100644
--- a/docs/interactive/ojs/libraries.qmd
+++ b/docs/interactive/ojs/libraries.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Libraries"
-format: html
 execute:
   echo: fenced
 ---
diff --git a/docs/interactive/ojs/shiny.qmd b/docs/interactive/ojs/shiny.qmd
index 2f654eb1a0..eadd4917bd 100644
--- a/docs/interactive/ojs/shiny.qmd
+++ b/docs/interactive/ojs/shiny.qmd
@@ -1,7 +1,6 @@
 ---
 title: "Shiny Reactives"
 from: markdown-grid_tables
-format: html
 ---
 
 ## Overview
diff --git a/docs/manuscripts/index.qmd b/docs/manuscripts/index.qmd
index 795f402cf3..8fb76344d9 100644
--- a/docs/manuscripts/index.qmd
+++ b/docs/manuscripts/index.qmd
@@ -1,17 +1,21 @@
 ---
 title: Quarto Manuscripts
-format:
-  html:
-    include-in-header: 
-      - '../download/_download.html'
-    include-after-body: 
-      text: |
-        <script type="text/javascript">
-        window['quarto-download-release'] = true;
-        window['quarto-download-prerelease'] = true;
-        window['quarto-download-nonews'] = true;
-        window["quarto-prerelease-mode"] = '{{< meta prerelease-mode >}}';
-        </script>  
+include-in-header: 
+  - '../download/_download.html'
+  - text: |
+      <style type="text/css">
+      #download-table {
+        display: none;
+      }
+      </style>
+include-after-body: 
+  text: |
+    <script type="text/javascript">
+    window['quarto-download-release'] = true;
+    window['quarto-download-prerelease'] = true;
+    window['quarto-download-nonews'] = true;
+    window["quarto-prerelease-mode"] = '{{< meta prerelease-mode >}}';
+    </script>  
 ---
 
 {{< include /docs/_require-1.4.qmd >}}
@@ -61,14 +65,6 @@ Manuscripts are a feature in the 1.4 release of Quarto. Before you get started,
 
 {{< include ../download/_download.md >}}
 
-```{=html}
-<style type="text/css">
-#download-table {
-  display: none;
-}
-</style>
-```
-
 You can find release notes and installers for all platforms in the [download page](/docs/download/prerelease.qmd).
 
 ### Choose Your Tool {#choose}
diff --git a/docs/manuscripts/tutorial.css b/docs/manuscripts/tutorial.css
index 01e4add034..891a5dc92d 100644
--- a/docs/manuscripts/tutorial.css
+++ b/docs/manuscripts/tutorial.css
@@ -28,50 +28,3 @@
 .step .table>:not(caption)>*>* {
   border-bottom-width: 0;
 }
-
-.tool {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-/* The dark theme's --bs-border-color is near-invisible (1.08:1), so keep
-   #2237's border until the theme's $border-color is fixed. Light mode uses
-   --bs-border-color as is. */
-body.quarto-dark .tool {
-  --tool-border: #6c757d;
-}
-
-.tool a {
-  width: 100px;
-  text-align: center;
-  color: var(--bs-body-color);
-  border: 1px solid var(--tool-border, var(--bs-border-color));
-  border-radius: 10px;
-  margin-right: 20px;
-  margin-bottom: 0;
-  margin-top: 10px;
-  font-size: 0.85em;
-}
-
-.tool a:hover {
-  color: var(--bs-body-color);
-  border-color: var(--bs-link-color);
-  background-color: transparent;
-}
-
-/* .btn's focus style is a near-white shadow; restore a visible ring. */
-.tool a:focus-visible {
-  outline: 2px solid var(--bs-link-color);
-  outline-offset: 2px;
-  box-shadow: none;
-}
-
-.tool a img {
-  display: block;
-  width: 67px;
-  height: 67px;
-  margin: auto;
-  margin-bottom: 5px;
-}
diff --git a/docs/output-formats/all-formats.qmd b/docs/output-formats/all-formats.qmd
index a35bc34ca8..c9f72d2b63 100644
--- a/docs/output-formats/all-formats.qmd
+++ b/docs/output-formats/all-formats.qmd
@@ -1,7 +1,14 @@
 ---
 title: All Formats
-format: html
 tbl-colwidths: [30,70]
+include-in-header:
+  - text: |
+      <style type="text/css">
+      main h2 {
+        border-bottom: none;
+      }  
+
+      </style>
 ---
 
 ## Overview
@@ -89,11 +96,3 @@ See below for a list of all output formats by type along with links to their ref
 | [TEI Simple](/docs/reference/formats/tei.qmd) | TEI Simple aims to define a new *highly-constrained* and *prescriptive* subset of the Text Encoding Initiative (TEI) Guidelines suited to the representation of early modern and modern books. |
 | [FictionBook](/docs/reference/formats/fb2.qmd) | FictionBook is an open XML-based e-book format. |
 
-```{=html}
-<style type="text/css">
-main h2 {
-  border-bottom: none;
-}  
-  
-</style>
-```
diff --git a/docs/output-formats/gfm.qmd b/docs/output-formats/gfm.qmd
index 1bed59e6e7..8753ebbb59 100644
--- a/docs/output-formats/gfm.qmd
+++ b/docs/output-formats/gfm.qmd
@@ -1,6 +1,5 @@
 ---
 title: GitHub (GFM)
-format: html 
 format-name: gfm
 ---
 
diff --git a/docs/output-formats/html-basics.qmd b/docs/output-formats/html-basics.qmd
index b3c3201045..a9286799f4 100644
--- a/docs/output-formats/html-basics.qmd
+++ b/docs/output-formats/html-basics.qmd
@@ -1,6 +1,5 @@
 ---
 title: "HTML Basics"
-format: html
 comments:
   hypothesis: true
 ---
diff --git a/docs/output-formats/html-code.qmd b/docs/output-formats/html-code.qmd
index b2c290d19c..b57f44f892 100644
--- a/docs/output-formats/html-code.qmd
+++ b/docs/output-formats/html-code.qmd
@@ -1,8 +1,6 @@
 ---
 title: "HTML Code Blocks"
-format: 
-  html:
-    code-tools: true
+code-tools: true
 execute:
   warning: false
 fig-cap-location: top
diff --git a/docs/output-formats/html-multi-format.qmd b/docs/output-formats/html-multi-format.qmd
index ff69a2fbd8..b4948f1784 100644
--- a/docs/output-formats/html-multi-format.qmd
+++ b/docs/output-formats/html-multi-format.qmd
@@ -1,7 +1,7 @@
 ---
 title: Including Other Formats
 format: 
-  html: default
+  quartoorg-html: default
   ipynb: default
   docx: default
 aliases:
diff --git a/docs/output-formats/html-themes.qmd b/docs/output-formats/html-themes.qmd
index 547e544b41..30378882b4 100644
--- a/docs/output-formats/html-themes.qmd
+++ b/docs/output-formats/html-themes.qmd
@@ -151,7 +151,7 @@ The [cell renderings](../computations/execution-options.qmd#cell-renderings) fea
 
 ### Customizing Themes
 
-As when providing a single theme, you may provide a custom theme for dark and light mode, or a list of `scss` files to customize the light and dark appearance. This website, for example uses the following to use a light `cosmo` theme and then customizes the `cosmo` theme with additional Sass variables when in dark mode:
+As when providing a single theme, you may provide a custom theme for dark and light mode, or a list of `scss` files to customize the light and dark appearance. For example, the following uses a light `cosmo` theme, then customizes it with extra Sass variables in dark mode:
 
 ``` yaml
 theme:
diff --git a/docs/output-formats/ms-word-templates.qmd b/docs/output-formats/ms-word-templates.qmd
index 1fee54c0f7..4bdbb0ef30 100644
--- a/docs/output-formats/ms-word-templates.qmd
+++ b/docs/output-formats/ms-word-templates.qmd
@@ -1,6 +1,5 @@
 ---
 title: Word Templates
-format: html
 ---
 
 ## Using Templates
diff --git a/docs/output-formats/ms-word.qmd b/docs/output-formats/ms-word.qmd
index b16bcc8cb3..4df4930ec9 100644
--- a/docs/output-formats/ms-word.qmd
+++ b/docs/output-formats/ms-word.qmd
@@ -1,6 +1,5 @@
 ---
 title: Word Basics
-format: html
 ---
 
 ## Overview
diff --git a/docs/output-formats/page-layout.qmd b/docs/output-formats/page-layout.qmd
index f3f0f4115e..2daafd521e 100644
--- a/docs/output-formats/page-layout.qmd
+++ b/docs/output-formats/page-layout.qmd
@@ -1,6 +1,5 @@
 ---
 title: Page Layout
-format: html
 page-layout: full
 aliases:
   - /docs/prerelease/1.3/grid.html
diff --git a/docs/output-formats/pdf-basics.qmd b/docs/output-formats/pdf-basics.qmd
index 8f572b03ec..718c249f72 100644
--- a/docs/output-formats/pdf-basics.qmd
+++ b/docs/output-formats/pdf-basics.qmd
@@ -1,6 +1,5 @@
 ---
 title: PDF Basics
-format: html
 pdf-standard-latex-examples: true
 doc-type:
   pdf: true
diff --git a/docs/output-formats/pdf-engine.qmd b/docs/output-formats/pdf-engine.qmd
index ed3ae45955..9cd14d10b8 100644
--- a/docs/output-formats/pdf-engine.qmd
+++ b/docs/output-formats/pdf-engine.qmd
@@ -1,6 +1,5 @@
 ---
 title: "PDF Engines"
-format: html
 ---
 
 ## Overview
diff --git a/docs/presentations/index.qmd b/docs/presentations/index.qmd
index 0dab89bebe..a85011e7a3 100644
--- a/docs/presentations/index.qmd
+++ b/docs/presentations/index.qmd
@@ -1,6 +1,5 @@
 ---
 title: Presentations
-format: html
 slide-format: revealjs
 ---
 
diff --git a/docs/presentations/revealjs/examples/footer-and-logo.qmd b/docs/presentations/revealjs/examples/footer-and-logo.qmd
index 135239f453..534c241c7b 100644
--- a/docs/presentations/revealjs/examples/footer-and-logo.qmd
+++ b/docs/presentations/revealjs/examples/footer-and-logo.qmd
@@ -2,7 +2,7 @@
 format:
   revealjs:
     logo:
-      path: ../../../../quarto.png
+      path: ../../../../assets/images/quarto.png
       alt: "Quarto logo"
     footer: "Footer text"
 ---
diff --git a/docs/presentations/revealjs/examples/per-slide-footer.qmd b/docs/presentations/revealjs/examples/per-slide-footer.qmd
index 5e3287d8a8..e109a2f50b 100644
--- a/docs/presentations/revealjs/examples/per-slide-footer.qmd
+++ b/docs/presentations/revealjs/examples/per-slide-footer.qmd
@@ -2,7 +2,7 @@
 format:
   revealjs:
     logo:
-      path: ../../../../quarto.png
+      path: ../../../../assets/images/quarto.png
       alt: "Quarto logo"
 ---
 
diff --git a/docs/projects/code-execution.qmd b/docs/projects/code-execution.qmd
index ceaae63f49..ca8489db07 100644
--- a/docs/projects/code-execution.qmd
+++ b/docs/projects/code-execution.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Managing Execution"
-format: html
 ---
 
 ## Overview
diff --git a/docs/projects/quarto-projects.qmd b/docs/projects/quarto-projects.qmd
index 172e298aee..90935a8865 100644
--- a/docs/projects/quarto-projects.qmd
+++ b/docs/projects/quarto-projects.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Project Basics"
-format: html
 ---
 
 ## Overview
diff --git a/docs/projects/virtual-environments.qmd b/docs/projects/virtual-environments.qmd
index 76c7f6db22..da1345f21f 100644
--- a/docs/projects/virtual-environments.qmd
+++ b/docs/projects/virtual-environments.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Virtual Environments"
-format: html
 ---
 
 Virtual environments provide a project-specific version of installed packages. This both helps you to faithfully reproduce your environment (e.g. if you are collaborating with a colleague or deploying to a server) as well as isolate the use of packages so that upgrading a package in one project doesn't break other projects.
diff --git a/docs/reference/_metadata.yml b/docs/reference/_metadata.yml
index 799ff39d11..8b8c575e46 100644
--- a/docs/reference/_metadata.yml
+++ b/docs/reference/_metadata.yml
@@ -1,9 +1,6 @@
 filters:
   - reference.lua
  
-format: 
-  html:
-    code-copy: false
-    css: reference.css
-    
+code-copy: false
+css: reference.css
 search: false
\ No newline at end of file
diff --git a/docs/reference/cells/index.qmd b/docs/reference/cells/index.qmd
index d810190155..4a0f20929d 100644
--- a/docs/reference/cells/index.qmd
+++ b/docs/reference/cells/index.qmd
@@ -4,7 +4,7 @@ toc: false
 anchor-sections: false
 listing:
   id: reference-links
-  template: ../../../ejs/links.ejs
+  template: ../../../assets/ejs/links.ejs
   contents: ./reference.yml
 ---
 
diff --git a/docs/reference/formats/index.qmd b/docs/reference/formats/index.qmd
index 62a1cc6403..e330ebdd9b 100644
--- a/docs/reference/formats/index.qmd
+++ b/docs/reference/formats/index.qmd
@@ -4,7 +4,7 @@ toc: false
 anchor-sections: false
 listing:
   id: reference-links
-  template: ../../../ejs/links.ejs
+  template: ../../../assets/ejs/links.ejs
   contents: ./reference.yml
 ---
 
diff --git a/docs/reference/index.qmd b/docs/reference/index.qmd
index 577f10fcfd..c1768b6768 100644
--- a/docs/reference/index.qmd
+++ b/docs/reference/index.qmd
@@ -6,9 +6,9 @@ tbl-colwidths: [30, 70]
 anchor-sections: false
 listing:
   id: reference-links
-  template: ../../ejs/links.ejs
+  template: ../../assets/ejs/links.ejs
   contents: ./reference.yml
-image: /images/hero_right.png  
+image: /assets/images/hero_right.png  
 ---
 
 ::: {#reference-links .column-screen-inset-right style="max-width: 850px;"}
diff --git a/docs/reference/metadata/brand.qmd b/docs/reference/metadata/brand.qmd
index e3bc5de2a2..1e0b7e41d7 100644
--- a/docs/reference/metadata/brand.qmd
+++ b/docs/reference/metadata/brand.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Brand"
-format: html
 ---
 
 The `brand` option is used to define cross-format branding. You can read more about using [Brand in the Guide](/docs/authoring/brand.qmd).
diff --git a/docs/reference/metadata/index.qmd b/docs/reference/metadata/index.qmd
index 9960bc15d6..d30b36efd7 100644
--- a/docs/reference/metadata/index.qmd
+++ b/docs/reference/metadata/index.qmd
@@ -4,7 +4,7 @@ toc: false
 anchor-sections: false
 listing:
   id: reference-links
-  template: ../../../ejs/links.ejs
+  template: ../../../assets/ejs/links.ejs
   contents: ./reference.yml
 ---
 
diff --git a/docs/reference/projects/index.qmd b/docs/reference/projects/index.qmd
index 43e1bfcd11..6f28d9161a 100644
--- a/docs/reference/projects/index.qmd
+++ b/docs/reference/projects/index.qmd
@@ -4,7 +4,7 @@ toc: false
 anchor-sections: false
 listing:
   id: reference-links
-  template: ../../../ejs/links.ejs
+  template: ../../../assets/ejs/links.ejs
   contents: ./reference.yml
 ---
 
diff --git a/docs/tools/jupyter-lab-extension.qmd b/docs/tools/jupyter-lab-extension.qmd
index de4d3110b0..3f0a2231f3 100644
--- a/docs/tools/jupyter-lab-extension.qmd
+++ b/docs/tools/jupyter-lab-extension.qmd
@@ -1,6 +1,5 @@
 ---
 title: JupyterLab Extension
-format: html
 ---
 
 ## Overview
diff --git a/docs/tools/jupyter-lab.qmd b/docs/tools/jupyter-lab.qmd
index 33d60eecd9..785b4be744 100644
--- a/docs/tools/jupyter-lab.qmd
+++ b/docs/tools/jupyter-lab.qmd
@@ -1,6 +1,5 @@
 ---
 title: JupyterLab
-format: html
 ---
 
 ## Overview
diff --git a/docs/websites/website-basics.qmd b/docs/websites/website-basics.qmd
index 52928c192a..42fb0a3fd7 100644
--- a/docs/websites/website-basics.qmd
+++ b/docs/websites/website-basics.qmd
@@ -1,8 +1,6 @@
 ---
 title: "Creating a Website"
-format: 
-  html:
-    output-file: index.html
+output-file: index.html
 ---
 
 ## Overview
diff --git a/docs/websites/website-navigation.qmd b/docs/websites/website-navigation.qmd
index 67af442f74..c90d42c16f 100644
--- a/docs/websites/website-navigation.qmd
+++ b/docs/websites/website-navigation.qmd
@@ -1,6 +1,5 @@
 ---
 title: "Website Navigation"
-format: html
 project-type: website
 ---
 
diff --git a/docs/websites/website-tools.qmd b/docs/websites/website-tools.qmd
index 87e97cd709..0f99248304 100644
--- a/docs/websites/website-tools.qmd
+++ b/docs/websites/website-tools.qmd
@@ -200,7 +200,7 @@ If you'd like to provide a default that is used when pages specify a preview ima
 
 ```{.yaml filename="_quarto.yml"}
 website:
-  image: "https://quarto.org/quarto-dark-bg.jpeg"
+  image: "https://quarto.org/assets/images/quarto-dark-bg.jpeg"
 ```
 
 If you would like to prevent preview image discovery on a page, set `image` to `false`:
diff --git a/inc.html b/inc.html
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/include.html b/include.html
deleted file mode 100644
index eeb76c8c32..0000000000
--- a/include.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<style>
-body {
-	color:  red !important;
-}
-</style>
\ No newline at end of file
diff --git a/index.qmd b/index.qmd
index 75a4f0784e..6aa9a8370f 100644
--- a/index.qmd
+++ b/index.qmd
@@ -3,18 +3,18 @@ pagetitle: "Quarto"
 page-layout: custom
 section-divs: false
 toc: false
-css: index.css
+body-classes: quarto-home
 editor: source
 description: | 
   An open source technical publishing system for creating beautiful articles, websites, blogs, books, slides, and more. Supports Python, R, Julia, and JavaScript.
 hide-description: true
-image: quarto-dark-bg.jpeg
+image: assets/images/quarto-dark-bg.jpeg
 resources:
-  - images/hero-dark/hero-animation.json
-  - images/hero-dark/images/
-  - images/hero-light/hero-animation.json
-  - images/hero-light/images/
-  - js/lottie.min.js
+  - assets/images/hero-dark/hero-animation.json
+  - assets/images/hero-dark/images/
+  - assets/images/hero-light/hero-animation.json
+  - assets/images/hero-light/images/
+  - assets/js/lottie.min.js
 ---
 
 ```{=html}
@@ -58,7 +58,7 @@ Analyze. Share. Reproduce. You have a story to tell with data---tell it with Qua
 ::: {.hero-animation}
 
 ```{=html}
-<script src="js/lottie.min.js" defer integrity="sha384-J8C0MvgX4WP58J4N2W99vCKd2J6z99ynOJ5bEfE6jeP7kVTW1drYtv/jzrxM5jbm" crossorigin="anonymous"></script>
+<script src="assets/js/lottie.min.js" defer integrity="sha384-J8C0MvgX4WP58J4N2W99vCKd2J6z99ynOJ5bEfE6jeP7kVTW1drYtv/jzrxM5jbm" crossorigin="anonymous"></script>
 ```
 
 ::: light-content
@@ -72,7 +72,7 @@ Analyze. Share. Reproduce. You have a story to tell with data---tell it with Qua
       renderer: 'svg',
       loop: true,
       autoplay: true,
-      path: 'images/hero-light/hero-animation.json'
+      path: 'assets/images/hero-light/hero-animation.json'
     });
   });
 </script>
@@ -91,7 +91,7 @@ Analyze. Share. Reproduce. You have a story to tell with data---tell it with Qua
       renderer: 'svg',
       loop: true,
       autoplay: true,
-      path: 'images/hero-dark/hero-animation.json'
+      path: 'assets/images/hero-dark/hero-animation.json'
     });
   });
 </script>
diff --git a/styles.css b/styles.css
deleted file mode 100644
index df2aca6238..0000000000
--- a/styles.css
+++ /dev/null
@@ -1,400 +0,0 @@
-
-@media (min-width: 1020px) {
-.navbar-brand-container {
-  margin-right: 1em;
-}
-}
-
-
-
-@media (max-width: 1060px) and (min-width: 991.98px) {
-
-#navbarCollapse ul:last-of-type a.nav-link {
-  padding-left: .25em;
-  padding-right: .25em;
-}
-
-.navbar #quarto-search {
-  margin-left: .1em;
-}
-
-.navbar .bi-twitter,
-.navbar .bi-github,
-.navbar .bi-rss
- {
-  font-size: .8em;
-}
-}
-
-
-@media (min-width: 991.98px) {
-body.quarto-light #quarto-header {
-  border-bottom: 1px solid #dee2e6;
-}
-body.quarto-dark #quarto-header {
-  border-bottom: 1px solid #3b3f47;
-}
-}
-
-.navbar-brand > img {
-  max-height: 36px;
-}
-
-
-.platform-table td {
-  vertical-align: middle;
-}
-
-.platform-table td > div.sourceCode {
-  margin-top: 0.3rem;
-  margin-bottom: 0.3rem;
-}
-
-
-.document-example {
-  opacity: 0.9;
-  padding: 6px; 
-  font-weight: 500;
-  margin-bottom: 1rem;
-}
-
-.document-example div {
-  padding: 5px;
-}
-
-
-.document-example .citation {
-  color: blue;
-}
-
-body.quarto-dark .document-example .citation {
-  color: var(--bs-link-color);
-}
-
-.trademark {
-  font-size: 0.6rem;
-  display: inline-block;
-  margin-left: -3px;
-}
-
-.search-attribution {
-  margin-top: 20px;
-  padding-bottom: 20px;
-  height: 40px;
-}
-
-.download-button {
-  margin-top: 1em;
-}
-
-.download-table {
-  margin-bottom: 2em;  
-}
-
-.download-table p {
-  margin-bottom: 0;
-}
-
-/* The cell holds the full hash; only the rendering truncates (ellipsis).
-   Screen readers, copying, and find-in-page all see the complete value,
-   and the header links to checksums.txt for the full values. */
-.download-table .checksum {
-  font-size: .775em;
-  padding-top: 4px;
-  max-width: 9ch;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.download-button {
-  display:flex;
-  padding-bottom: 10px;
-  padding-top: 10px;
-}
-
-.download-button .secondary {
-  font-size: .775em;
-  margin-bottom: 0;
-}
-
-.download-button .container {
-  display: flex;
-  padding-left: 10px;
-  padding-right: 40px;
-}
-
-.download-button .icon-container {
-  fill: white;
-  width: 30px;
-  margin-right: 15px;
-}
-
-iframe.reveal-demo {
-  width: 100%;
-  height: 350px;
-  outline: none;
-}
-
-
-.slide-deck {
-  border: 3px solid #dee2e6;
-  width: 100%;
-  height: 475px;
-}
-
-@media only screen and (max-width: 600px) {
- .slide-deck {
-    height: 400px;
-  }
-}
-
-
-@media (max-width: 575px) {
-
-.link-cards .card {
-  margin-bottom: 20px;
-  margin-right: 35px;
-}
-
-}
-
-@media (min-width: 576px) { 
-.link-cards {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.link-cards .card {
-  width: 190px;
-  margin: 0 20px 12px 0;
-}
-
-
-}
-
-
-.link-cards .card {
-  border: none;
-  padding: 0;
-}
-
-/* Card titles are h2 for heading order; keep the old h4 look */
-.link-cards .card-title h2 {
-  font-size: 1.25rem;
-  font-weight: 400;
-  line-height: 1.2;
-  opacity: 0.9;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0;
-  border-bottom: none;
-}
-
-.link-cards .card-title p {
-  margin-bottom: 0;
-}
-
-.link-cards .card-subtitle {
-  margin-bottom: 0.7rem;
-}
-
-.link-cards .card-subtitle p {
-  line-height: 1.2;
-  opacity: 0.9;
-  margin-bottom: 0.5rem;
-}
-
-.link-cards .card-body {
-  padding: 0.5rem;
-  padding-left: 0.1rem;
-}
-
-.link-cards .card-body ul {
-  margin-bottom: 0;
-  padding-left: 0;
-  list-style-type: none;
-}
-
-.link-cards .card-body ul a {
-  text-decoration: none;
-}
-
-.link-cards .card-body ul li {
-  padding-bottom: 0.2rem;
-}
-
-
-.card .source-code {
-  margin-top: 3px;
-}
-
-.carousel.card {
-  font-size: 16px;
-  padding-top: 2em;
-}
-
-.carousel.card a {
-  text-decoration: none;
-}
-
-.carousel img {
-  width: 70%;
-  margin-bottom: 110px;
-}
-
-.carousel .carousel-control-prev-icon, 
-.carousel .carousel-control-next-icon {
-  margin-bottom: 110px;
-}
-
-
-.gallery-category {
-  column-gap: 10px;
-}
-
-.btn-action-primary {
-  color: white;
-  background-color: #447099;
-}
-
-.btn-action-primary:hover {
-  background-color: #305775;
-  color: white;
-}
-
-.btn-action {
-  min-width: 165px;
-  border-radius: 30px;
-  border: none;
-}
-
-.panel-tabset[data-group="tools-tabset"] .choose-your-tool-row {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.panel-tabset[data-group="tools-tabset"] .choose-your-tool {
-  max-width: 90px;
-  margin-right: 25px;
-  margin-top: 30px;
-  margin-bottom: 0.5rem;
-  font-weight: 300;
-  font-size: 1.3rem;
-  line-height: 1.2;
-  text-align: left;
-}
-
-.panel-tabset[data-group="tools-tabset"] .tab-content {
-  border: none;
-  padding-left: 5px;
-}
-
-.panel-tabset[data-group="tools-tabset"] .nav-tabs {
-  border-bottom: none;
-}
-
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link {
-  text-align: center;
-  margin-right: 10px;
-  margin-top: 10px;
-  color: inherit;
-  width: 102px;
-  font-size: 0.8em;
-}
-
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link, 
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active, 
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
-  border: 1px solid  rgb(222, 226, 230);
-  border-radius: 10px;
-}
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link:hover {
-   border-color: rgb(80,146,221);
-   border-width: 1px;
-} 
-
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active, 
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
-  border-color: rgb(80,146,221);
-  /* Second pixel as a shadow, so selecting a tab doesn't resize it. */
-  box-shadow: inset 0 0 0 1px rgb(80,146,221);
-}
-
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link img {
-  width: 65px;
-  height: 65px;
-  display: block;
-  margin-bottom: 2px;
-}
-
-/*
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link {
-  text-align: center;
-  margin-right: 10px;
-  margin-top: 10px;
-  color: inherit;
-  width: 102px;
-  font-size: 0.8em;
-}
- 
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link img {
-  width: 45px;
-  height: 45px;
-  margin-left: 10px;
-  display: block;
-  margin-bottom: 2px;
-}
-*/
-
-
-.download-text {
-  font-size: 1.1em;
-  font-weight: 500;  
-}
-
-.preview-image-grid {
-  gap: .75em;
-}
-
-.preview-image-grid p {
-  margin-bottom: 0;
-}
-
-.preview-image-label {
-  text-align: center;
-  font-size: .75em;
-  font-weight: 600;
-}
-
-.illustration {
-  border: 1px solid #dee2e6;
-}
-
-span.color-box-container {
-  display: inline-flex;
-  align-items: center; /* Align vertically */
-}
-
-span.color-box {
-  display: inline-block;
-  width: 1em; /* Width of the color box */
-  height: 1em; /* Height of the color box */
-  margin-right: 0.2em; /* Space between box and text */
-  border: 1px solid #000; /* Border color */
-}
-/* Quarto's listing-table styles remove link underlines, so links inside
-   a description are marked by color alone: 2.23:1 against the body text,
-   short of the 3:1 WCAG 1.4.1 needs (axe link-in-text-block). */
-table.quarto-listing-table .listing-description a {
-  text-decoration: underline;
-}
-
-/* Screen-reader-only code blocks (get-started Jupyter pages). Quarto's
-   `pre.sourceCode { overflow-y: visible !important }` beats Bootstrap's
-   `.visually-hidden { overflow: hidden !important }`, which leaves a 1px
-   box that scrolls and fails axe's scrollable-region-focusable. */
-pre.sourceCode.visually-hidden {
-  overflow: hidden !important;
-}
diff --git a/theme-dark.scss b/theme-dark.scss
deleted file mode 100644
index 5231b63be0..0000000000
--- a/theme-dark.scss
+++ /dev/null
@@ -1,213 +0,0 @@
-/*-- scss:defaults --*/
-
-$blue: #447099;
-$red: #D44000;
-$orange: #EE6331;
-$yellow: #E7B10A;
-$green: #72994E;
-$teal: #419599;
-$cyan: #75A8D9;
-$black: #000;
-$white: #fff;
-$gray: #404041;
-$gray-dark: #343a40;
-$gray-100: #f8f8f8;
-$gray-200: #C2C2C4;
-$gray-300: #949494;
-$gray-400: #707073;
-$gray-500: #495057;
-$gray-600: #404041;
-$gray-700: #333333;
-$gray-800: #242426;
-$gray-900: #151515;
-$default: $gray-900;
-$primary: $cyan;
-$secondary: $gray-400;
-$success: $green;
-$info: $yellow;
-$warning: $orange;
-$danger: $red;
-
-
-
-// Base document colors
-$body-bg: $gray-900;
-$body-color: $gray-100;
-$link-color: $cyan;
-
-// Bootstrap's own $pre-color default (#000, meant for a light background)
-// is hardcoded regardless of theme -- inherit so bare <pre> elements (e.g.
-// Quarto's own .cell-decorator notebook-view prompts) stay legible here.
-// Bootswatch's dark themes (darkly, cyborg) carry the same override.
-$pre-color: inherit;
-
-$light: rgb(32.4,32.4,34.2);
-
-// Navigation element colors
-/*$footer-bg: shade-color($gray-800, 30%);*/
-/*$navbar-bg: shade-color($gray-800, 30%);*/
-$footer-bg: $gray-900;
-$navbar-bg: shade-color($gray-800, 10%);
- 
-
-// Code blocks
-$code-block-bg-alpha: -.9;
-
-// Bootstrap popovers
-$popover-bg: #242424;
-
-// Bootstrap inputs
-$input-bg: #242424;
-$dropdown-bg: $body-bg;
-$dropdown-color: $body-color;
-$dropdown-link-color: $body-color;
-$dropdown-link-hover-bg: $gray-600;
-$dropdown-link-hover-color: #eee;
-$nav-tabs-link-hover-border-color: rgb(80, 80, 80);
-
-$border-color: rgba($gray-800, 0.5);
-
-$mono-background-color: rgba(0,0,0,0);
-// Quarto defaults $code-bg to $gray-100, which is light here.
-$code-bg: $body-bg;
-$code-color: rgb(192, 128, 216);
-$nav-tabs-link-active-color: $body-color;
-$toc-inactive-border: rgba($gray-800, 0.5);
-$input-text-background-color: $gray-800;
-$input-group-addon-bg: $gray-800;
-$carousel-dark-caption-color: $body-color;
-$pagination-disabled-bg: rgb(24,24,24);
-
-$text-muted: lighten(#6a737b, 20%);
-
-/*-- scss:rules --*/
-
-/*Homepage custom css overrides */
-
-/* homepage hero link accessibiility hack to make contrast 4.5:1 */
-
-.hero-banner a:not(.btn) {
-/*color: tint-color($cyan, 2%);*/
-color: #D1DBE5;
-}
-
-.hero-banner .btn-action-primary, .get-started .btn-action-primary {
-  background-color: #f8f8f8;
-  border: 1px solid #f8f8f8;
-  color: $dark;
-}
-
-.hero-banner .btn-action-primary:hover, .get-started .btn-action-primary:hover {
-  background-color: #D1DBE5;
-  border: 1px solid #f8f8f8;
-  color: $dark;
-}
-
-.hero-banner .btn-secondary {
-  background-color: transparent;
-  border: 1px solid #f8f8f8;
-  color: #f8f8f8;
-}
-
-.hero-banner .btn-secondary:hover {
-  background-color: #305775;
-}
-
-.hello-quarto-banner .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
-  border: none;
-  border-bottom: 2px solid #ffffff !important;
-  color: #ffffff !important;
-  background-color: transparent;  
-}
-
-.hello-quarto-banner .nav-link {
-  color: #ffffff !important;
-}
-
-.bg-color {
-  background-color: $body-bg;
-}
-
-.hello-output {
-  border: 1px solid $gray-700;
-}
-
-
-body.quarto-light .alt-background {
-  background-color: #17212B;
-  border-top: 1px solid #dee2e6;
-  border-bottom: 1px solid #dee2e6;
-}
-
-
-.layout-example {
-  background: $gray-700;
-}
-
-// h2, .h2 {
-//   border-bottom-color: #666;
-// }
-
-.code-with-filename .code-with-filename-file pre {
-  color: #ddd;
-}
-
-pre code {
-  color: $body-color;
-}
-
-figcaption code,
-dl code,
-h1 code,
-h2 code,
-h3 code,
-h4 code,
-h5 code,
-h6 code {
-  background-color: $mono-background-color;
-}
-
-// Quarto fades callout headers (opacity 85%, or 75% for the simple style),
-// which pulls title text and code below 4.5:1.
-.callout.callout-style-default > div.callout-header,
-.callout.callout-style-simple > div.callout-header {
-  opacity: 1;
-}
-
-details > summary {
-  color: $text-muted;
-}
-
-#quarto-announcement {
-  padding: 1em;
-  font-size: 1em;
-  font-weight: bold;
-  color: $white;
-  background-color: #447099; 
-}
-
-#quarto-announcement a {
-  color: $white;
-}
-
-/*Footer Posit logo color for dark mode*/
-
-img.footer-logo {
-  color: #ffffff;
-}
-
-
-// Toolbar icons in prose: shown as a key cap, without <kbd> (see _style-guide.md).
-// Extends Quarto's .kbd so light and dark themes each pick up their own colors.
-img.ui-icon {
-  @extend .kbd;
-  padding: 0.15rem 0.3rem;
-  vertical-align: middle;
-  box-sizing: content-box;
-}
-
-// Quarto's title-block.scss sets `.quarto-category { opacity: 0.6 }`.
-// That drops the category chips below 4.5:1 (2.77 light, 3.43 dark).
-.quarto-title .quarto-categories .quarto-category {
-  opacity: 1;
-}
diff --git a/theme.scss b/theme.scss
deleted file mode 100644
index 8643ca64ea..0000000000
--- a/theme.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-/*-- scss:defaults --*/
-$link-color: #39729E;
-$text-muted: #6a737b;
-
-// Align light mode with the site's brand blue (theme-dark.scss $blue).
-// This also clears the white-on-primary contrast failures on cosmo's
-// #2780e3 (3.97:1): .btn-primary, .text-bg-primary badges, and Quarto's
-// notebook-preview header, whose h6 Quarto dims to opacity .9 (axe
-// color-contrast-b09c0e, -50505e). White on #447099 is 5.22:1; the faded
-// h6 is 4.59:1.
-$primary: #447099;
-
-// Quarto's body-secondary mixin (blockquotes, captions, asides, header
-// section numbers) defaults to theme-dim($body-color, 25%) = #6d7a86, only
-// 4.39:1 on white — a WCAG AA 1.4.3 failure (axe color-contrast-7ed054).
-// Defining $body-secondary makes the mixin use it instead; $text-muted is
-// 4.83:1.
-$body-secondary: $text-muted;
-
-// Code-block background: the darkest tint of the site's cosmo blue-gray that
-// still keeps every a11y-light syntax color at WCAG AA (>=4.5:1). a11y-light's
-// palette is tuned for a near-white background, so this stays pale; one step
-// darker (#eef1f4) drops the worst token (red #d91e18) below 4.5:1.
-$code-block-bg: #eff2f5;
-
-/*-- scss:rules --*/
-
-// Quarto dims appendix content (footnotes, citation, reuse) to opacity .9,
-// which fades $link-color to an effective #4d80a8 = 4.22:1 on white — a WCAG
-// AA 1.4.3 failure (axe color-contrast-733538). Undo the fade; selectors
-// mirror Quarto's so this wins by cascade order in the light theme, while
-// the dark stylesheet (loaded after this one) re-asserts Quarto's .9 —
-// the dark link color passes even faded. Remove if quarto-cli fixes
-// this upstream.
-#quarto-appendix.default section {
-  *[role="doc-endnotes"],
-  > *:not(a) {
-    opacity: 1;
-  }
-}
-
-.layout-example {
-  background: $gray-600;
-  color: $white;
-  text-align: center;
-  margin-bottom: 1em;
-  font-family: $font-family-monospace;
-  font-size: .875em;
-  font-weight: 600;
-  padding-top: 1em;
-  border-radius: 3px;
-}
-
-.left {
-  text-align: left;
-  padding-left: 1em;
-}
-
-.right {
-  text-align: right;
-  padding-right: 1em;
-}
-
-#quarto-announcement {
-  padding: 1em;
-  font-size: 1em;
-  font-weight: bold;
-  color: $white;
-  background-color: #447099; 
-}
-
-#quarto-announcement a {
-  color: $white;
-}
-
-// Toolbar icons in prose: shown as a key cap, without <kbd> (see _style-guide.md).
-// Extends Quarto's .kbd so light and dark themes each pick up their own colors.
-img.ui-icon {
-  @extend .kbd;
-  padding: 0.15rem 0.3rem;
-  vertical-align: middle;
-  box-sizing: content-box;
-}
-
-// Quarto's title-block.scss sets `.quarto-category { opacity: 0.6 }`.
-// That drops the category chips below 4.5:1 (2.77 light, 3.43 dark).
-.quarto-title .quarto-categories .quarto-category {
-  opacity: 1;
-}