diff --git a/src/web/notebook/examples/drawing-with-forth.wafnb b/src/web/notebook/examples/drawing-with-forth.wafnb
index d58f62b..0d5be91 100644
--- a/src/web/notebook/examples/drawing-with-forth.wafnb
+++ b/src/web/notebook/examples/drawing-with-forth.wafnb
@@ -3,7 +3,7 @@
     {
       "kind": 1,
       "language": "markdown",
-      "value": "# Drawing with Forth\n\nIn this tutorial, you'll learn basic Forth by drawing graphics with a turtle.\n\n> 💡 Click the *Run* button next to the examples to run the code, or click the *Run* button at the top to run all the code on this page.\n\n## The stack\n\nForth is a stack-based language. Numbers are put on the stack, and words pop them off the stack (and put new ones on the stack) again.\nFor example, to take the sum of 8 and 14, put both numbers on the stack, and call `+`. To pop the result of the stack and print it out, use `.`:"
+      "value": "# Drawing with Forth\n\nIn this tutorial, you'll learn basic Forth by drawing graphics with a turtle.\n\n> 💡 Click the *Run* button next to the examples to run the code, or click the *Run* button at the top to run all the code on this page.\n\n> ❕ This is not a real tutorial, but a demo of a [WAForth notebook](https://github.com/remko/waforth#notebooks), and perhaps a glimpse of what an interactive Forth tutorial using notebooks could look like. \n\n## The stack\n\nForth is a stack-based language. Numbers are put on the stack, and words pop them off the stack (and put new ones on the stack) again.\nFor example, to take the sum of 8 and 14, put both numbers on the stack, and call `+`. To pop the result of the stack and print it out, use `.`:"
     },
     {
       "kind": 2,
diff --git a/src/web/notebook/src/wafnb.css b/src/web/notebook/src/wafnb.css
index 54c6a85..b8932e7 100644
--- a/src/web/notebook/src/wafnb.css
+++ b/src/web/notebook/src/wafnb.css
@@ -15,7 +15,8 @@ body {
 
 blockquote {
   border-radius: 0.5em;
-  padding: 0.5em 0.5em;
+  padding: 0.5em 1em;
+  margin: 1em 0;
   background-color: rgb(225, 242, 254);
   color: rgb(23, 70, 127);
 }
@@ -56,10 +57,12 @@ code.raw-code-cell {
 
 .code-cell {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.25em;
 }
 
-.output {
+.code-cell .output {
+  flex: 1 1 15em;
   gap: 0.125em;
   display: flex;
   flex-direction: column;
@@ -75,7 +78,7 @@ code.raw-code-cell {
 }
 
 .code-cell .editor {
-  flex: 1;
+  flex: 1 1 15em;
   background-color: #eee;
   box-sizing: content-box;
 }
diff --git a/src/web/notebook/src/wafnb.tsx b/src/web/notebook/src/wafnb.tsx
index f883390..cc14121 100644
--- a/src/web/notebook/src/wafnb.tsx
+++ b/src/web/notebook/src/wafnb.tsx
@@ -50,6 +50,7 @@ for (const n of document.querySelectorAll("[data-hook=code-cell")) {
   n.appendChild(editor.el);
 
   const outputEl = <div class="output" />;
+  outputEl.style.display = "none";
   n.appendChild(outputEl);
 
   const setEnabled = (v: boolean) => {
@@ -58,6 +59,7 @@ for (const n of document.querySelectorAll("[data-hook=code-cell")) {
   setEnableds.push(setEnabled);
 
   const clear = () => {
+    outputEl.style.display = "none";
     outputEl.innerHTML = "";
     clearEl.style.display = "none";
     editor.el.style.borderColor = "#ced4da";
@@ -81,9 +83,11 @@ for (const n of document.querySelectorAll("[data-hook=code-cell")) {
       });
       if (!result.isEmpty) {
         outputEl.appendChild(worldEl);
+        outputEl.style.display = "flex";
       }
       if (consoleEl.childNodes.length > 0) {
         outputEl.appendChild(consoleEl);
+        outputEl.style.display = "flex";
       }
       clearEl.style.display = "block";
       editor.el.style.borderColor = isSuccess(result.result)