Fix CLI and editor template review feedback

- Use muted green (#5a8c00) for CLI hero and SFX section titles
  instead of neon var(--green) for better readability
- Remove iframe scrollbar, fix container to 768x512 and center it
- Add terminal header bar (macOS dots + filename) to editor page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: dwursteisen

tiny-doc/src/docs/templates/pages/cli.peb

@@ -24,7 +24,7 @@
         }
         .cli-hero__title {
             font-size: 5rem; line-height: 1; text-transform: uppercase;
-            color: var(--green);
+            color: #5a8c00;
             filter: drop-shadow(4px 4px 0 var(--yellow));
         }
         .cli-hero__subtitle {
@@ -134,7 +134,7 @@
         }
         .sfx-section__title {
             font-size: 2rem; text-transform: uppercase;
-            color: var(--green);
+            color: #5a8c00;
             filter: drop-shadow(2px 2px 0 var(--yellow));
             margin-bottom: 16px;
         }
@@ -143,6 +143,9 @@
             margin-bottom: 24px;
         }
         .sfx-section__editor {
+            width: 768px; height: 512px;
+            max-width: 100%;
+            margin: 0 auto;
             border-radius: 10px; border: 1px solid #e0e0e0;
             overflow: hidden;
         }
@@ -207,7 +210,7 @@
                         Try it below:
                     </p>
                     <div class="sfx-section__editor">
-                        <iframe class="no-resize" title="Tiny retro sound effects editor" loading="lazy" width="768" height="512" src="sample/sfx-editor/index.html" style="border: none; display: block; max-width: 100%;"></iframe>
+                        <iframe class="no-resize" title="Tiny retro sound effects editor" loading="lazy" width="768" height="512" src="sample/sfx-editor/index.html" scrolling="no" style="border: none; display: block; width: 100%; height: 100%;"></iframe>
                     </div>
                 </div>
             </div>

tiny-doc/src/docs/templates/pages/editor.peb

@@ -32,9 +32,13 @@
         }
 
         .editor-wrapper {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 24px 64px;
+            border: 1px solid #e0e0e0;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 2px 12px rgba(0,0,0,.06);
+        }
+        .editor-wrapper .terminal__header {
+            border-bottom: 1px solid #e0e0e0;
         }
 
         /* -- tiny-web-editor styles */
@@ -111,7 +115,14 @@
             </p>
         </section>
 
+        <div style="max-width: 1200px; margin: 0 auto; padding: 0 24px 64px;">
         <div class="editor-wrapper">
+            <div class="terminal__header">
+                <span class="terminal__dot terminal__dot--red"></span>
+                <span class="terminal__dot terminal__dot--yellow"></span>
+                <span class="terminal__dot terminal__dot--green"></span>
+                <span class="terminal__filename">game.lua</span>
+            </div>
             <tiny-editor style="display: none;" sprite="resources/tiny-dungeon.png" mode="editor"
                 examples='[{"name":"Empty Project","code":"ZnVuY3Rpb24gX2luaXQoKQoKZW5kCgpmdW5jdGlvbiBfdXBkYXRlKCkKCmVuZAoKZnVuY3Rpb24gX2RyYXcoKQoKZW5k"},{"name":"Tracking the player mouse","code":"CiAgCmZ1bmN0aW9uIF9kcmF3KCkKICAgIGdmeC5jbHMoKQoKICAgIHByaW50KCJSZWN0YW5nbGUgbGltaXQiLCA2NCwgNjQgLSA1KQogICAgLS0gZHJhdyB0aGUgYm9yZGVyIGxpbWl0LgogICAgZ2Z4LmRpdGhlcigweEE1QTUpCiAgICBzaGFwZS5yZWN0KDY0LCA2NCwgMjU2IC0gMTI4LCAyNTYgLSAxMjgsIDIpCiAgICBnZnguZGl0aGVyKCkKCiAgICAtLSBkcmF3IHRoZSBtb3VzZSBwb3NpdGlvbi4KICAgIGxvY2FsIHBvcyA9IGN0cmwudG91Y2goKQogICAgc2hhcGUubGluZShwb3MueCAtIDIsIHBvcy55LCBwb3MueCArIDIsIHBvcy55LCAzKQogICAgc2hhcGUubGluZShwb3MueCwgcG9zLnkgLSAyLCBwb3MueCwgcG9zLnkgKyAyLCAzKQoKICAgIC0tIGRyYXcgdGhlIHJlY3RhbmdsZSB0aGF0IGlzIHN0YXlpbmcgd2l0aGluIHRoZSBib3JkZXIgbGltaXQuCiAgICBsb2NhbCB4ID0gbWF0aC5jbGFtcCg2NCwgcG9zLnggLSA0LCAyNTYgLSA2NCAtIDkpCiAgICBsb2NhbCB5ID0gbWF0aC5jbGFtcCg2NCwgcG9zLnkgLSA0LCAyNTYgLSA2NCAtIDkpCiAgICBzaGFwZS5yZWN0KHgsIHksIDksIDksIDgpCmVuZAo="},{"name":"Waving letters","code":"ZnVuY3Rpb24gX2luaXQoKQogICAgbGV0dGVycyA9IHsiaCIsICJlIiwgImwiLCAibCIsICJvIiwgIiAiLCAidCIsICJpIiwgIm4iLCAieSIsICIhIn0KICAgIHN0YXJ0eCA9ICgyNTYgLSAoI2xldHRlcnMgKiA1KSkgKiAwLjUKZW5kCgpmdW5jdGlvbiBfZHJhdygpCiAgICBnZnguY2xzKCkKICAgIGZvciBpLCBsIGluIGlwYWlycyhsZXR0ZXJzKSBkbwogICAgICAgIHByaW50KAogICAgICAgICAgICBsLCAtLSBsZXR0ZXIgdG8gcHJpbnQKICAgICAgICAgICAgc3RhcnR4ICsgaSAqIDUsIC0tIHggcG9zaXRpb24gcmVnYXJkaW5nIHRoZSBsZXR0ZXIgaW5kZXguCiAgICAgICAgICAgIDEyOCArIG1hdGguY29zKHRpbnkudCAqIDMgKyBpKSAqIDgsIC0tIHkgcG9zaXRpb24gcmVnYXJkaW5nIHRoZSB0aW1lIGVsYXBzZWQgYW5kIHRoZSBsZXR0ZXIgaW5kZXggCiAgICAgICAgICAgIG1hdGguY2VpbCh0aW55LmZyYW1lICogMC4yIC0gaSkgLS0gY29sb3Igb2YgdGhlIGxldHRlciByZWdhcmRpbmcgdGhlIGluZGV4CiAgICAgICAgKQogICAgZW5kCmVuZA=="},{"name":"AABB Collision","code":"LS0gRnVuY3Rpb24gdG8gY2hlY2sgY29sbGlzaW9uIGJldHdlZW4gdHdvIHJlY3RhbmdsZXMKZnVuY3Rpb24gY2hlY2tDb2xsaXNpb24ocmVjdDEsIHJlY3QyKQogICAgcmV0dXJuIHJlY3QxLnggPCByZWN0Mi54ICsgcmVjdDIud2lkdGggYW5kCiAgICAgICAgICAgcmVjdDEueCArIHJlY3QxLndpZHRoID4gcmVjdDIueCBhbmQKICAgICAgICAgICByZWN0MS55IDwgcmVjdDIueSArIHJlY3QyLmhlaWdodCBhbmQKICAgICAgICAgICByZWN0MS55ICsgcmVjdDEuaGVpZ2h0ID4gcmVjdDIueQplbmQKCi0tIEZ1bmN0aW9uIHRvIHJlc29sdmUgY29sbGlzaW9uIGFuZCBzbGlkZQpmdW5jdGlvbiBjb2xsaWRlQW5kU2xpZGUob2JqZWN0LCBvYnN0YWNsZSkKICAgIGlmIGNoZWNrQ29sbGlzaW9uKG9iamVjdCwgb2JzdGFjbGUpIHRoZW4KICAgICAgICBsb2NhbCBvdmVybGFwWCA9IG1hdGgubWluKG9iamVjdC54ICsgb2JqZWN0LndpZHRoLCBvYnN0YWNsZS54ICsgb2JzdGFjbGUud2lkdGgpIC0gbWF0aC5tYXgob2JqZWN0LngsIG9ic3RhY2xlLngpCiAgICAgICAgbG9jYWwgb3ZlcmxhcFkgPSBtYXRoLm1pbihvYmplY3QueSArIG9iamVjdC5oZWlnaHQsIG9ic3RhY2xlLnkgKyBvYnN0YWNsZS5oZWlnaHQpIC0gbWF0aC5tYXgob2JqZWN0LnksIG9ic3RhY2xlLnkpCgogICAgICAgIGlmIG92ZXJsYXBYIDwgb3ZlcmxhcFkgdGhlbgogICAgICAgICAgICBpZiBvYmplY3QueCA8IG9ic3RhY2xlLnggdGhlbgogICAgICAgICAgICAgICAgb2JqZWN0LnggPSBvYmplY3QueCAtIG92ZXJsYXBYCiAgICAgICAgICAgIGVsc2UKICAgICAgICAgICAgICAgIG9iamVjdC54ID0gb2JqZWN0LnggKyBvdmVybGFwWAogICAgICAgICAgICBlbmQKICAgICAgICBlbHNlCiAgICAgICAgICAgIGlmIG9iamVjdC55IDwgb2JzdGFjbGUueSB0aGVuCiAgICAgICAgICAgICAgICBvYmplY3QueSA9IG9iamVjdC55IC0gb3ZlcmxhcFkKICAgICAgICAgICAgZWxzZQogICAgICAgICAgICAgICAgb2JqZWN0LnkgPSBvYmplY3QueSArIG92ZXJsYXBZCiAgICAgICAgICAgIGVuZAogICAgICAgIGVuZAogICAgZW5kCmVuZAoKcGxheWVyID0ge3ggPSA1MCwgeSA9IDUwLCB3aWR0aCA9IDIwLCBoZWlnaHQgPSAyMH0Kb2JzdGFjbGVzID0gewogICB7eCA9IDYwLCB5ID0gNDAsIHdpZHRoID0gMzAsIGhlaWdodCA9IDMwfSwKICB7eCA9IDY1LCB5ID0gNjAsIHdpZHRoID0gNDAsIGhlaWdodCA9IDMwfQp9CgpmdW5jdGlvbiBfdXBkYXRlKCkKICAgIGlmKGN0cmwucHJlc3Npbmcoa2V5cy5sZWZ0KSkgdGhlbgogICAgICAgICBwbGF5ZXIueCA9IHBsYXllci54IC0gMQogICAgZWxzZWlmIChjdHJsLnByZXNzaW5nKGtleXMucmlnaHQpKSB0aGVuCiAgICAgICAgIHBsYXllci54ID0gcGxheWVyLnggKyAxCiAgICBlbmQKCiAgICBpZihjdHJsLnByZXNzaW5nKGtleXMudXApKSB0aGVuCiAgICAgICAgIHBsYXllci55ID0gcGxheWVyLnkgLSAxCiAgICBlbHNlaWYgKGN0cmwucHJlc3Npbmcoa2V5cy5kb3duKSkgdGhlbgogICAgICAgICBwbGF5ZXIueSA9IHBsYXllci55ICsgMQogICAgZW5kCgogICAgZm9yIG9ic3RhY2xlIGluIGFsbChvYnN0YWNsZXMpIGRvCiAgICAgICBjb2xsaWRlQW5kU2xpZGUocGxheWVyLCBvYnN0YWNsZSkKICAgIGVuZAplbmQKCgpmdW5jdGlvbiBfZHJhdygpCiAgICBnZnguY2xzKCkKICAgIGZvciBvYnN0YWNsZSBpbiBhbGwob2JzdGFjbGVzKSBkbwogICAgICAgIHNoYXBlLnJlY3Qob2JzdGFjbGUueCwgb2JzdGFjbGUueSwgb2JzdGFjbGUud2lkdGgsIG9ic3RhY2xlLmhlaWdodCwgOSkKICAgIGVuZAoKICAgIHNoYXBlLnJlY3QocGxheWVyLngsIHBsYXllci55LCBwbGF5ZXIud2lkdGgsIHBsYXllci5oZWlnaHQsIDgpCmVuZA=="},{"name":"Control sprite move","code":"LS0gVXBkYXRlIHRoZSBjb2RlIHRvIHVwZGF0ZSB0aGUgZ2FtZSEKbG9jYWwgUGxheWVyID0gewogICB4ID0gMTI4IC0gMTYsCiAgIHkgPSAxMjggLSAxNiwKfQpmdW5jdGlvbiBfaW5pdCgpCiAgcGxheWVyID0gbmV3KFBsYXllcikKZW5kCgpmdW5jdGlvbiBfdXBkYXRlKCkKICBpZiBjdHJsLnByZXNzaW5nKGtleXMubGVmdCkgdGhlbgogICAgIHBsYXllci54ID0gbWF0aC5tYXgoMCwgcGxheWVyLnggLSAxKQogIGVsc2VpZiBjdHJsLnByZXNzaW5nKGtleXMucmlnaHQpIHRoZW4KICAgICAgcGxheWVyLnggPSBtYXRoLm1pbigyNDAsIHBsYXllci54ICsgMSkKICBlbmQKCmlmIGN0cmwucHJlc3Npbmcoa2V5cy51cCkgdGhlbgogICAgIHBsYXllci55ID0gbWF0aC5tYXgoMCwgcGxheWVyLnkgLSAxKQogIGVsc2VpZiBjdHJsLnByZXNzaW5nKGtleXMuZG93bikgdGhlbgogICAgICBwbGF5ZXIueSA9IG1hdGgubWluKDI0MCwgcGxheWVyLnkgKyAxKQogIGVuZAplbmQKCmZ1bmN0aW9uIF9kcmF3KCkKICAgZ2Z4LmNscygpCgogICBzaGFwZS5ncmFkaWVudCgwLCAwLCAyNTYsIDI1NiwgMywgNCkKCiAgIHNwci5kcmF3KDk2LCBwbGF5ZXIueCwgcGxheWVyLnkpCiAgIAplbmQK"},{"name":"Bouncing Bat","code":"bG9jYWwgUGxheWVyID0gewogIHggPSAxMjggLSAxNiwKICB5ID0gMTI4IC0gMTYsCiAgZHggPSAwLAogIGR5ID0gMAp9CiAgCmZ1bmN0aW9uIF9pbml0KCkKICAgbG9jYWwgc2VlZCA9IG1hdGgucm5kKCkKICAgcGxheWVyID0gbmV3KFBsYXllciwgewogICAgICAgZHggPSBtYXRoLmNvcyhzZWVkKSAqIDMsIAogICAgICAgZHkgPSBtYXRoLnNpbihzZWVkKSAqIDMKICAgfSkKZW5kCgpmdW5jdGlvbiBfdXBkYXRlKCkKICAgaWYgY3RybC5wcmVzc2VkKGtleXMuc3BhY2UpIHRoZW4KICAgICBfaW5pdCgpCiAgIGVuZAogICBwbGF5ZXIueCA9IHBsYXllci54ICsgcGxheWVyLmR4CiAgIHBsYXllci55ID0gcGxheWVyLnkgKyBwbGF5ZXIuZHkKICAgaWYgcGxheWVyLnggPiAyNDAgb3IgcGxheWVyLnggPCAwIHRoZW4KICAgICAgcGxheWVyLmR4ID0gcGxheWVyLmR4ICogLTEKICAgZW5kCiAgIGlmIHBsYXllci55ID4gMjQwIG9yIHBsYXllci55IDwgMCB0aGVuCiAgICAgIHBsYXllci5keSA9IHBsYXllci5keSAqIC0xCiAgIGVuZAogICBwbGF5ZXIueCA9IG1hdGgubWF4KDAsIG1hdGgubWluKHBsYXllci54LCAyNDApKQogICBwbGF5ZXIueSA9IG1hdGgubWF4KDAsIG1hdGgubWluKHBsYXllci55LCAyNDApKQplbmQKCmZ1bmN0aW9uIF9kcmF3KCkKICBnZnguY2xzKCkKICBzcHIuZHJhdygxMjAsIHBsYXllci54LCBwbGF5ZXIueSkKZW5kCg=="},{"name":"Perlin and dither","code":"ZnVuY3Rpb24gX2RyYXcoKQogICAgZ2Z4LmNscygxKQoKICAgIGdmeC5kaXRoZXIoMHgwMDAxKQogICAgbG9jYWwgeCA9IG1hdGgucGVybGluKDAuMSwgMC4yLCB0aW55LmZyYW1lIC8gMTAwKQogICAgbG9jYWwgeSA9IG1hdGgucGVybGluKDAuNCwgMC41LCB0aW55LmZyYW1lIC8gMTAwKQogICAgc2hhcGUuY2lyY2xlZih4ICogMjU2LCB5ICogMjU2LCA2NCwgNykKCiAgICBsb2NhbCB4ID0gbWF0aC5wZXJsaW4oMC45LCAwLjcsIHRpbnkuZnJhbWUgLyAxMDApCiAgICBsb2NhbCB5ID0gbWF0aC5wZXJsaW4oMC4zLCAwLjEsIHRpbnkuZnJhbWUgLyAxMDApCiAgICBzaGFwZS5jaXJjbGVmKHggKiAyNTYsIHkgKiAyNTYsIDMyLCA3KQoKICAgIGxvY2FsIHggPSBtYXRoLnBlcmxpbigwLjMsIDAuMSwgdGlueS5mcmFtZSAvIDEwMCkKICAgIGxvY2FsIHkgPSBtYXRoLnBlcmxpbigwLjIsIDAuNCwgdGlueS5mcmFtZSAvIDEwMCkKICAgIHNoYXBlLmNpcmNsZWYoeCAqIDI1NiwgeSAqIDI1NiwgNTYsIDcpCgogICAgZ2Z4LmRpdGhlcigpCgogICAgZm9yIHh4ID0gNjQsIDI1NiAtIDY0LCA0IGRvCiAgICAgICAgbG9jYWwgYWRqdXN0ID0gbWF0aC5wZXJsaW4oeHggLyA2NCwgMC4xLCB0aW55LmZyYW1lIC8gNTApCiAgICAgICAgc2hhcGUuY2lyY2xlZih4eCAtIDEsIDEyNiArIGFkanVzdCAqIDgsIDgsIDcpCiAgICAgICAgc2hhcGUuY2lyY2xlZih4eCArIDEsIDEyNiArIGFkanVzdCAqIDgsIDgsIDcpCiAgICAgICAgc2hhcGUuY2lyY2xlZih4eCwgMSArIDEyNiArIGFkanVzdCAqIDgsIDgsIDcpCiAgICAgICAgc2hhcGUuY2lyY2xlZih4eCwgLTEgKyAxMjYgKyBhZGp1c3QgKiA4LCA4LCA3KQogICAgZW5kCgogICAgZm9yIHh4ID0gNjQsIDI1NiAtIDY0LCA0IGRvCiAgICAgICAgbG9jYWwgYWRqdXN0ID0gbWF0aC5wZXJsaW4oeHggLyA2NCwgMC4xLCB0aW55LmZyYW1lIC8gNTApCiAgICAgICAgc2hhcGUuY2lyY2xlZih4eCwgMTI2ICsgYWRqdXN0ICogOCwgOCwgMSkgICAgCiAgICBlbmQKCiAgICBsb2NhbCB0eHQgPSAiaGVsbG8gd29ybGQgIgogICAgbG9jYWwgbGV0dGVyID0gMQogICAgZm9yIHh4ID0gNjQsIDI1NiAtIDY0LCA0IGRvCiAgICAgICAgbG9jYWwgYWRqdXN0ID0gbWF0aC5wZXJsaW4oeHggLyA2NCwgMC4xLCB0aW55LmZyYW1lIC8gNTApCiAgICAgICAgcHJpbnQoc3RyaW5nLnN1Yih0eHQsIGxldHRlciwgbGV0dGVyKSwgMSArIHh4LCAxMjQgKyBhZGp1c3QgKiA4LCA3KQogICAgICAgIHByaW50KHN0cmluZy5zdWIodHh0LCBsZXR0ZXIsIGxldHRlciksIC0xICsgeHgsIDEyNCArIGFkanVzdCAqIDgsIDcpCiAgICAgICAgcHJpbnQoc3RyaW5nLnN1Yih0eHQsIGxldHRlciwgbGV0dGVyKSwgeHgsIDEgKyAxMjQgKyBhZGp1c3QgKiA4LCA3KQogICAgICAgIHByaW50KHN0cmluZy5zdWIodHh0LCBsZXR0ZXIsIGxldHRlciksIHh4LCAtMSArIDEyNCArIGFkanVzdCAqIDgsIDcpCgogICAgICAgIHByaW50KHN0cmluZy5zdWIodHh0LCBsZXR0ZXIsIGxldHRlciksIHh4LCAxMjQgKyBhZGp1c3QgKiA4LCAxKQoKICAgICAgICBsZXR0ZXIgPSBtYXRoLm1heCgxLCAobGV0dGVyICsgMSkgJSAoI3R4dCArIDEpKQogICAgZW5kCmVuZAoK"}]'>
 function _init()
@@ -127,6 +138,7 @@ function _draw()
 end
             </tiny-editor>
         </div>
+        </div>
 {% endblock %}
 
 {% block pageScripts %}