fix(docs): unify playground pane padding and hold output on errors

Match editor inset to the output panel, drop Prism from output preview,
keep the last render while typing invalid template/context, and refresh
the README demo GIF.

docs/themes/navy/source/css/_partial/highlight.styl

@@ -121,40 +121,3 @@ pre
       color: var(--highlight-bash-command)
     .operator
       color: var(--highlight-purple)
-
-// Prism (playground output) — uses palette tokens for light/dark
-code[class*="language-"]
-  color: var(--highlight-foreground)
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata
-    color: var(--highlight-comment)
-  .token.punctuation
-    color: var(--highlight-foreground)
-  .token.property,
-  .token.tag,
-  .token.boolean,
-  .token.number,
-  .token.constant,
-  .token.symbol,
-  .token.deleted
-    color: var(--highlight-red)
-  .token.attr-name,
-  .token.selector,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted
-    color: var(--highlight-green)
-  .token.attr-value,
-  .token.regex,
-  .token.variable
-    color: var(--highlight-blue)
-  .token.operator,
-  .token.entity,
-  .token.url
-    color: var(--highlight-aqua)
-  .token.atrule,
-  .token.keyword
-    color: var(--highlight-purple)

docs/themes/navy/source/css/_partial/playground.styl

@@ -1,6 +1,7 @@
 #playground
   --playground-gap: 12px
   --playground-radius: 10px
+  --playground-inset: 16px
   background: var(--color-content-bg)
   overflow: hidden
   box-shadow: var(--panel-shadow)
@@ -124,7 +125,7 @@
     gap: 10px
     flex-shrink: 0
     height: 36px
-    padding: 0 12px
+    padding: 0 var(--playground-inset)
     border-bottom: 1px solid var(--code-border)
     @media mq-mobile
       height: 32px
@@ -151,9 +152,32 @@
     min-width: 0
     display: flex
     flex-direction: column
-    overflow: visible
+    overflow: hidden
     background: var(--highlight-background)
 
+  .area-tpl .pane-body,
+  .area-data .pane-body
+    padding: var(--playground-inset)
+    box-sizing: border-box
+    @media mq-mobile
+      padding: 12px
+
+  .area-tpl .ace_gutter,
+  .area-data .ace_gutter
+    display: none !important
+    width: 0 !important
+    min-width: 0 !important
+
+  .area-tpl .ace_editor,
+  .area-data .ace_editor,
+  .area-tpl .ace_scroller,
+  .area-data .ace_scroller,
+  .area-tpl .ace_content,
+  .area-data .ace_content,
+  .area-tpl .ace_text-layer,
+  .area-data .ace_text-layer
+    background: transparent !important
+
   .editor
     flex: 1 1 auto
     min-height: 0
@@ -175,7 +199,7 @@
       min-height: 100%
       width: 100%
       box-sizing: border-box
-      padding: 16px
+      padding: var(--playground-inset)
       border: none
       box-shadow: none
       border-radius: 0
@@ -194,6 +218,7 @@
         font-family: font-mono
         font-size: 14px
         line-height: 1.55
+        color: var(--highlight-foreground)
         background: transparent
         padding: 0
         white-space: inherit