docs: Add rendered result previews to syntax reference

Add visual result previews after Output code blocks in the syntax
guide, showing both the HTML source and the rendered output for
each example. Includes CSS styling for the result-preview class.

Author: dereuromark

docs/.vitepress/theme/custom.css

@@ -104,6 +104,115 @@
   font-style: italic;
 }
 
+/* Syntax guide result previews */
+.result-preview {
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  margin: 0.5rem 0 1rem 0;
+}
+
+.result-preview h1,
+.result-preview h2,
+.result-preview h3,
+.result-preview h4,
+.result-preview h5,
+.result-preview h6 {
+  margin: 0 0 0.5rem 0;
+  border: none;
+  padding: 0;
+}
+
+.result-preview h1 { font-size: 1.5rem; }
+.result-preview h2 { font-size: 1.3rem; }
+.result-preview h3 { font-size: 1.15rem; }
+.result-preview h4,
+.result-preview h5,
+.result-preview h6 { font-size: 1rem; }
+
+.result-preview p {
+  margin: 0.5rem 0;
+}
+
+.result-preview p:first-child {
+  margin-top: 0;
+}
+
+.result-preview p:last-child {
+  margin-bottom: 0;
+}
+
+.result-preview blockquote {
+  margin: 0.5rem 0;
+  padding: 0.5rem 1rem;
+  border-left: 3px solid var(--vp-c-brand-1);
+  background: var(--vp-c-bg);
+}
+
+.result-preview ul,
+.result-preview ol {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+
+.result-preview table {
+  border-collapse: collapse;
+  margin: 0.5rem 0;
+}
+
+.result-preview th,
+.result-preview td {
+  border: 1px solid var(--vp-c-divider);
+  padding: 0.5rem;
+}
+
+.result-preview figure {
+  margin: 0.5rem 0;
+}
+
+.result-preview figcaption {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.25rem;
+}
+
+.result-preview hr {
+  margin: 1rem 0;
+  border: none;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.result-preview .task-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.result-preview .task-list li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.result-preview dl {
+  margin: 0.5rem 0;
+}
+
+.result-preview dt {
+  font-weight: 600;
+}
+
+.result-preview dd {
+  margin-left: 1.5rem;
+}
+
+.result-preview .footnote {
+  font-size: 0.9rem;
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 0.5rem;
+  margin-top: 1rem;
+}
+
 .djot-playground .options {
   display: flex;
   flex-wrap: wrap;