Add example pages and sync-examples tool for docs

3 files changed, 87 insertions, 64 deletions

diff --git a/docs/play/play.html b/docs/play/play.html
index 8620908..7a00142 100644
--- a/docs/play/play.html
+++ b/docs/play/play.html
@@ -24,7 +24,11 @@
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
-            href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&amp;display=swap"
+            rel="stylesheet"
+        />
+        <link
+            href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&amp;display=swap"
             rel="stylesheet"
         />
         <link rel="stylesheet" href="style.css" />
diff --git a/docs/play/player.js b/docs/play/player.js
index 6e01ce5..691957c 100644
--- a/docs/play/player.js
+++ b/docs/play/player.js
@@ -111,7 +111,7 @@ function renderSpeech(paragraphs) {
         .replace(/`([^`]+)`/g, "<code>$1</code>")
         .replace(
           /\*\*([^*]+)\*\*/g,
-          '<strong style="color:#7dcfff">$1</strong>',
+          '<strong style="color:#d4a84b">$1</strong>',
         );
       return `<p>${html}</p>`;
     })
@@ -219,6 +219,11 @@ const layoutEl = document.getElementById("layout");
 const speechPanel = document.querySelector(".speech-panel");
 const codePanel = document.querySelector(".code-panel");
 layoutEl.append(speechPanel, codePanel);
-layoutEl.classList.add("layout--tb");
+// layoutEl.classList.add("layout--tb");
+
+// On narrow screens, switch to vertical
+if (window.innerWidth < 800) {
+  layoutEl.classList.add("layout--tb");
+}
 
 loadTutorial(tutorialFile);
diff --git a/docs/play/style.css b/docs/play/style.css
index 5e51114..70bb7cb 100644
--- a/docs/play/style.css
+++ b/docs/play/style.css
@@ -7,62 +7,62 @@
 }
 
 :root {
-    --bg-primary: #1a1b1c;
-    --bg-secondary: #1f2021;
-    --border: #2f3031;
-    --text-primary: #c0c1c2;
-    --text-secondary: #7a7b7c;
-    --text-muted: #565758;
-    --code-bg: #292a2b;
-    --code-text: #bbbcbd;
-    --bubble-bg: #e64a199f;
-    --bubble-text: #ffccbc;
-    --line-num: #3b3c3d;
-    --btn-bg: #2f3031;
-    --btn-text: #c0c1c2;
-    --btn-hover: #3b3c3d;
-    --btn-primary-bg: #7a7b7c;
-    --btn-primary-text: #1a1b1c;
-    --btn-primary-hover: #898a8b;
-    --progress-bg: #2f3031;
-    --progress-fill: #7a7b7c;
-    --cmd-bg: #1a1b1c;
-    --cmd-border: #2f3031;
-    --cmd-text: #9e9fa0;
-    --topbar-bg: #1f2021;
-    --hljs-bg: #1a1b1c;
+    --bg-primary: #1a1410;
+    --bg-secondary: #241c16;
+    --border: #3a2e24;
+    --text-primary: #e8ddd0;
+    --text-secondary: #9a8a7a;
+    --text-muted: #6a5a4a;
+    --code-bg: #241c16;
+    --code-text: #e8ddd0;
+    --bubble-bg: rgba(196, 57, 49, 0.85);
+    --bubble-text: #e8ddd0;
+    --line-num: #6a5a4a;
+    --btn-bg: #3a2e24;
+    --btn-text: #e8ddd0;
+    --btn-hover: #4a3e34;
+    --btn-primary-bg: #c43931;
+    --btn-primary-text: #e8ddd0;
+    --btn-primary-hover: #d44a42;
+    --progress-bg: #3a2e24;
+    --progress-fill: #d4a84b;
+    --cmd-bg: #1a1410;
+    --cmd-border: #3a2e24;
+    --cmd-text: #9a8a7a;
+    --topbar-bg: #241c16;
+    --hljs-bg: #1a1410;
 }
 
 [data-theme="light"] {
-    --bg-primary: #ffffff;
-    --bg-secondary: #f5f6f7;
-    --border: #dcddde;
-    --text-primary: #2c2d2e;
-    --text-secondary: #5a5b5c;
-    --text-muted: #8a8b8c;
-    --code-bg: #e8e9ea;
-    --code-text: #2c2d2e;
-    --bubble-bg: #e64a19cf;
-    --bubble-text: #ffffff;
-    --line-num: #b0b1b2;
-    --btn-bg: #dcddde;
-    --btn-text: #2c2d2e;
-    --btn-hover: #c8c9ca;
-    --btn-primary-bg: #3a7bd5;
-    --btn-primary-text: #ffffff;
-    --btn-primary-hover: #2a6bc5;
-    --progress-bg: #dcddde;
-    --progress-fill: #3a7bd5;
-    --cmd-bg: #f5f6f7;
-    --cmd-border: #dcddde;
-    --cmd-text: #5a5b5c;
-    --topbar-bg: #f5f6f7;
-    --hljs-bg: #f5f6f7;
+    --bg-primary: #f5ede0;
+    --bg-secondary: #ede0d0;
+    --border: #d4c8b8;
+    --text-primary: #3a2a1a;
+    --text-secondary: #6a5a4a;
+    --text-muted: #9a8a7a;
+    --code-bg: #f0e8d8;
+    --code-text: #3a2a1a;
+    --bubble-bg: rgba(184, 53, 45, 0.85);
+    --bubble-text: #f5ede0;
+    --line-num: #c0b0a0;
+    --btn-bg: #d4c8b8;
+    --btn-text: #3a2a1a;
+    --btn-hover: #c4b8a8;
+    --btn-primary-bg: #b8352d;
+    --btn-primary-text: #f5ede0;
+    --btn-primary-hover: #c8453d;
+    --progress-bg: #d4c8b8;
+    --progress-fill: #b8943e;
+    --cmd-bg: #f0e8d8;
+    --cmd-border: #d4c8b8;
+    --cmd-text: #6a5a4a;
+    --topbar-bg: #ede0d0;
+    --hljs-bg: #f0e8d8;
 }
 
 body {
     font-family:
-        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC",
+        -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Serif SC", Roboto,
         sans-serif;
     background: var(--bg-primary);
     color: var(--text-primary);
@@ -71,7 +71,7 @@ body {
     flex-direction: column;
 }
 
-/* Top bar */
+/* ── Top bar ── */
 .topbar {
     padding: 12px 24px;
     background: var(--topbar-bg);
@@ -101,7 +101,7 @@ body {
     cursor: pointer;
     font-size: 16px;
     padding: 4px 10px;
-    border-radius: 6px;
+    border-radius: 2px;
     transition: all 0.15s;
     font-family: inherit;
     line-height: 1;
@@ -111,14 +111,14 @@ body {
     background: var(--btn-hover);
 }
 
-/* Main panel */
+/* ── Main panel ── */
 .layout {
     display: flex;
     flex: 1;
     overflow: hidden;
 }
 
-/* Left: code panel */
+/* ── Left: code panel ── */
 .code-panel {
     flex: 1;
     background: var(--bg-primary);
@@ -159,7 +159,7 @@ body {
     color: var(--bubble-text);
     border-radius: 10px;
     font-family:
-        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC",
+        -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Serif SC", Roboto,
         sans-serif;
     font-size: 13px;
     font-style: normal;
@@ -191,9 +191,9 @@ body {
     user-select: none;
 }
 
-/* Right: description panel */
+/* ── Right: description panel ── */
 .speech-panel {
-    width: 380px;
+    flex: 0 0 320px;
     background: var(--bg-secondary);
     border-left: 1px solid var(--border);
     display: flex;
@@ -209,8 +209,8 @@ body {
     width: 100%;
     border-left: none;
     border-bottom: 1px solid var(--border);
-    max-height: none;
     flex: 0 0 auto;
+    max-height: 40%;
 }
 
 .layout--tb .code-panel {
@@ -218,6 +218,20 @@ body {
     min-height: 0;
 }
 
+.layout--tb .speech-content {
+    padding: 16px 20px;
+}
+
+.layout--tb .speech-content p {
+    font-size: 14px;
+    line-height: 1.6;
+    margin-bottom: 10px;
+}
+
+.layout--tb .code-panel pre {
+    padding: 16px 20px;
+}
+
 .speech-content {
     flex: 1;
     padding: 32px 24px;
@@ -239,7 +253,7 @@ body {
     background: var(--code-bg);
     color: var(--code-text);
     padding: 2px 6px;
-    border-radius: 4px;
+    border-radius: 2px;
     font-size: 13px;
 }
 
@@ -247,7 +261,7 @@ body {
     display: block;
     background: var(--cmd-bg);
     border: 1px solid var(--cmd-border);
-    border-radius: 6px;
+    border-radius: 2px;
     padding: 10px 14px;
     margin: 12px 0;
     font-family: "JetBrains Mono", monospace;
@@ -255,7 +269,7 @@ body {
     color: var(--cmd-text);
 }
 
-/* Control panel */
+/* ── Control panel ── */
 .controls {
     padding: 12px 24px;
     background: var(--bg-secondary);
@@ -271,7 +285,7 @@ body {
     border: none;
     color: var(--btn-text);
     padding: 8px 20px;
-    border-radius: 6px;
+    border-radius: 2px;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.15s;