diff --git a/shared/static/styles/basics.css b/shared/static/styles/basics.css
index b716d17..16a9cd6 100644
--- a/shared/static/styles/basics.css
+++ b/shared/static/styles/basics.css
@@ -30,3 +30,22 @@
 :where(h1, h2, h3, h4, h5, h6) {
     font-weight: 800;
 }
+
+/* sx example demos — on-demand CSS for interactive examples */
+@keyframes sxFadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.sx-fade-in {
+    animation: sxFadeIn 0.5s ease-out;
+}
+.sx-loading-btn.sx-request {
+    opacity: 0.7;
+    pointer-events: none;
+}
+.sx-loading-btn.sx-request .sx-spinner {
+    display: inline-block;
+}
+.sx-loading-btn .sx-spinner {
+    display: none;
+}
diff --git a/sx/sxc/examples.sx b/sx/sxc/examples.sx
index 127ad5c..16cb855 100644
--- a/sx/sxc/examples.sx
+++ b/sx/sxc/examples.sx
@@ -530,7 +530,6 @@
 
 (defcomp ~anim-result (&key color time)
   (div :class "sx-fade-in space-y-2"
-    (style ".sx-fade-in { animation: sxFadeIn 0.5s ease-out; } @keyframes sxFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }")
     (div :class (str "p-4 rounded transition-colors duration-700 " color)
       (p :class "font-medium" "Faded in!")
       (p :class "text-sm mt-1" (str "Loaded at " time)))))
@@ -723,7 +722,6 @@
 
 (defcomp ~loading-states-demo ()
   (div :class "space-y-4"
-    (style ".sx-loading-btn.sx-request { opacity: 0.7; pointer-events: none; } .sx-loading-btn.sx-request .sx-spinner { display: inline-block; } .sx-loading-btn .sx-spinner { display: none; }")
     (button
       :sx-get "/examples/api/slow"
       :sx-target "#loading-result"
diff --git a/sx/sxc/sx_components.py b/sx/sxc/sx_components.py
index 2ccb522..8eca409 100644
--- a/sx/sxc/sx_components.py
+++ b/sx/sxc/sx_components.py
@@ -101,8 +101,13 @@ def _full_wire_text(sx_src: str, *comp_names: str) -> str:
             if comp_text:
                 parts.append(f'<script type="text/sx" data-components>\n{comp_text}\n</script>')
     parts.append('<style data-sx-css>/* new CSS rules */</style>')
-    parts.append(sx_src)
-    return "\n".join(parts)
+    # Pretty-print the sx source for readable display
+    try:
+        from shared.sx.parser import parse as _parse, serialize as _serialize
+        parts.append(_serialize(_parse(sx_src), pretty=True))
+    except Exception:
+        parts.append(sx_src)
+    return "\n\n".join(parts)
 
 
 # ---------------------------------------------------------------------------
@@ -125,7 +130,8 @@ def _sx_header_sx(nav: str | None = None, *, child: str | None = None) -> str:
     """Build the sx docs menu-row."""
     return sx_call("menu-row-sx",
         id="sx-row", level=1, colour="violet",
-        link_href="/", link_label="sx", icon="fa fa-code",
+        link_href="/", link_label="sx",
+        link_label_content=SxExpr('(span :class "font-mono" "(</>) sx")'),
         nav=SxExpr(nav) if nav else None,
         child_id="sx-header-child",
         child=SxExpr(child) if child else None,