diff --git a/landing/src/app/ui/_detail.scss b/landing/src/app/ui/_detail.scss
index 28d50eb..f74472d 100644
--- a/landing/src/app/ui/_detail.scss
+++ b/landing/src/app/ui/_detail.scss
@@ -90,18 +90,28 @@
       margin: 0 0 1rem;
     }
 
+    // The bullet outside the text, where a list's bullet goes. `@pi/ui`'s
+    // reset puts it inside, and the editor wraps each item's text in a `<p>`:
+    // together the bullet sat alone on one line and the text, a block, fell to
+    // the next — with a paragraph's margins on top.
     ul,
     ol {
       margin: 0 0 1.5rem;
-      padding-left: 1.25rem;
+      padding-left: 1.5rem;
     }
 
     li {
       margin: 0 0 0.5rem;
+      padding-left: 0.25rem;
+      list-style-position: outside;
 
       &::marker {
         color: var(--pi-color-primary);
       }
+
+      > p {
+        margin: 0;
+      }
     }
 
     strong {
@@ -112,6 +122,67 @@
       color: var(--pi-color-primary);
     }
 
+    code {
+      padding: 0.1em 0.35em;
+      border-radius: 0.375rem;
+      background: color-mix(in srgb, var(--pi-color-primary) 10%, transparent);
+      font-size: 0.9em;
+    }
+
+    pre {
+      margin: 0 0 1.5rem;
+      padding: 1rem 1.25rem;
+      overflow-x: auto;
+      border-radius: var(--pi-border-radius-medium, 0.75rem);
+      background: color-mix(in srgb, var(--pi-color-primary) 7%, transparent);
+      line-height: 1.55;
+
+      code {
+        padding: 0;
+        background: none;
+      }
+    }
+
+    // `@pi/ui` already frames a quote with its own quotation marks; only the
+    // spacing is this page's business.
+    blockquote {
+      margin: 0 0 1.5rem;
+
+      p:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    hr {
+      margin: 2.5rem 0;
+      border: 0;
+      border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+    }
+
+    // Images in the text — attached in the panel's editor, or by URL through
+    // the API. Never wider than the column, and set apart from the prose.
+    img {
+      display: block;
+      max-width: 100%;
+      height: auto;
+      margin: 2rem 0;
+      border-radius: var(--pi-border-radius-medium, 0.75rem);
+    }
+
+    figure {
+      margin: 2rem 0;
+
+      img {
+        margin: 0;
+      }
+    }
+
+    figcaption {
+      margin-top: 0.5rem;
+      font-size: 0.875rem;
+      color: color-mix(in srgb, currentColor 68%, transparent);
+    }
+
     > :first-child {
       margin-top: 0;
     }
diff --git a/tools/mock-api.mjs b/tools/mock-api.mjs
index 150fd88..3168789 100644
--- a/tools/mock-api.mjs
+++ b/tools/mock-api.mjs
@@ -64,8 +64,20 @@ const page = (id, title, slug, featured) => ({
   alternates: { es: `/${slug}`, en: `/en/${slug}-en`, ca: `/ca/${slug}-ca` }, path: `/${slug}`,
 });
 
+// A body with everything the editor can produce, images included, so the
+// post's typography can be reviewed without writing one in the panel.
+const richBody =
+  '<p>Volvimos a renderizar en el servidor por tres motivos.</p>' +
+  '<ul><li><p><strong>Rendimiento</strong> en móviles modestos.</p></li><li><p><strong>SEO</strong> sin trucos.</p></li></ul>' +
+  '<img src="/logo.png" alt="El logo de Pireon">' +
+  '<h2>Cómo lo hicimos</h2><p>Con <code>injectLoad</code> y un loader por página:</p>' +
+  '<pre><code>export const load = async () => fetchPage();</code></pre>' +
+  '<figure><img src="/logo.png" alt="Otra vez el logo"><figcaption>Una imagen con pie de foto.</figcaption></figure>' +
+  '<blockquote><p>Lo que no se mide en un móvil de gama baja, no está medido.</p></blockquote>';
+
 const post = (id, title, slug, published_at) => ({
   ...page(id, title, slug, false),
+  body: richBody,
   published_at,
   excerpt: 'Lo que hemos aprendido este mes, contado sin prisa y con ejemplos de código.',
   category: { id: 9, name: 'Blog', slug: 'blog', position: 3 },