Reduce bounce rate: blog CTA + welcome example with auto-run

A) Blog: add prominent playground-cta card at the end of each post.
   Styled with brand gradient border, eyebrow + headline + CTA button.
   Remove the buried related-cta line from related-posts.html.

B) App: load a meaningful XSLT welcome example for first-time visitors
   (no localStorage) and auto-run it immediately (autoRunReady=true),
   so new organic users see live output instead of a blank editor.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

site/layouts/_default/single.html

@@ -10,6 +10,7 @@
     <div class="content">
       {{ .Content }}
     </div>
+    {{ partial "playground-cta.html" . }}
     <p class="muted back-link"><a href="{{ .CurrentSection.RelPermalink }}">← Back to {{ .CurrentSection.Title }}</a></p>
     {{ partial "related-posts.html" . }}
   </article>

site/layouts/partials/playground-cta.html

@@ -0,0 +1,10 @@
+{{- if eq .Section "posts" -}}
+<aside class="playground-cta">
+  <div class="playground-cta__body">
+    <p class="playground-cta__eyebrow">XSLT Playground</p>
+    <p class="playground-cta__headline">Transform XML instantly — no setup</p>
+    <p class="playground-cta__sub">Free online XSLT editor with support for 1.0, 2.0 and 3.0. Write, run and share transformations in seconds.</p>
+  </div>
+  <a class="button" href="https://xsltplayground.com" target="_blank" rel="noopener noreferrer">Try it free →</a>
+</aside>
+{{- end -}}

site/layouts/partials/related-posts.html

@@ -7,6 +7,5 @@
     <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
     {{- end }}
   </ul>
-  <p class="related-cta">Try the examples in <a href="https://xsltplayground.com">XSLT Playground</a> — free online XSLT editor and tester.</p>
 </aside>
 {{- end -}}

site/static/css/main.css

@@ -287,16 +287,47 @@ code {
   text-decoration: underline;
 }
 
-.related-cta {
-  margin: 0;
-  font-size: 0.85rem;
-  color: var(--muted);
+.playground-cta {
+  margin-top: 2.5rem;
+  padding: 1.5rem 1.75rem;
+  border-radius: 12px;
+  background: linear-gradient(135deg, rgba(50, 213, 255, 0.07), rgba(255, 126, 103, 0.05));
+  border: 1px solid rgba(50, 213, 255, 0.18);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  flex-wrap: wrap;
 }
 
-.related-cta a {
+.playground-cta__eyebrow {
+  margin: 0 0 0.3rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
   color: var(--accent);
 }
 
+.playground-cta__headline {
+  margin: 0 0 0.35rem;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.playground-cta__sub {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--muted);
+  max-width: 480px;
+}
+
+.playground-cta .button {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 /* ── Reference pages ───────────────────────────────────────────── */
 
 .ref-meta {