fix(site): dock Ask tutor below code lab so code is not obscured (#13)

The hero mockup's Ask tutor popup was absolutely positioned over the
code lab panel, truncating the right edge of the code and 'Ran cleanly'
output lines.

- Move the chat card into normal flow inside .mock__main, stacked below
  the lab with margin-top
- Drop position: absolute / right / bottom on .mock__chat
- Shorten the demo print() line and output string so the lab body never
  needs to compete with the chat for width
- Bump code and bubble font sizes 1px for legibility

Co-authored-by: Claude <claude@anthropic.com>

Author: StewAlexander-com

site/index.html

@@ -114,26 +114,26 @@ <h3 class="mock__h">Variables &amp; Types</h3>
                     <span class="mock__tag">code lab</span>
                     <span class="mock__run">▶ Run</span>
                   </div>
-                  <pre class="mock__code"><span class="t-com"># try changing the value</span>
+                  <pre class="mock__code"><span class="t-com"># try it</span>
 <span class="t-fn">name</span> = <span class="t-str">"Ada"</span>
-<span class="t-fn">age</span>  = <span class="t-num">36</span>
-<span class="t-kw">print</span>(<span class="t-str">f"</span>{<span class="t-fn">name</span>}<span class="t-str"> is </span>{<span class="t-fn">age</span>}<span class="t-str">"</span>)</pre>
+<span class="t-fn">age</span> = <span class="t-num">36</span>
+<span class="t-kw">print</span>(<span class="t-fn">name</span>, <span class="t-fn">age</span>)</pre>
                   <div class="mock__out">
-                    <span class="mock__ok">✓ Ran cleanly</span>
-                    <code>Ada is 36</code>
+                    <span class="mock__ok">✓ Ran</span>
+                    <code>Ada 36</code>
                   </div>
                 </div>
-              </section>
-              <div class="mock__chat" aria-hidden="true">
-                <div class="mock__chat-head">
-                  <span class="mock__chat-title">Ask tutor</span>
-                  <span class="mock__chat-x">×</span>
-                </div>
-                <div class="mock__chat-body">
-                  <div class="mock__bubble mock__bubble--you">Why isn't <code>age</code> typed?</div>
-                  <div class="mock__bubble mock__bubble--bot">In Python, <strong>values</strong> carry the type; names are just labels you can point anywhere. <a class="mock__cite">docs.python.org →</a></div>
+                <div class="mock__chat" aria-hidden="true">
+                  <div class="mock__chat-head">
+                    <span class="mock__chat-title">Ask tutor</span>
+                    <span class="mock__chat-x">×</span>
+                  </div>
+                  <div class="mock__chat-body">
+                    <div class="mock__bubble mock__bubble--you">Why isn't <code>age</code> typed?</div>
+                    <div class="mock__bubble mock__bubble--bot">Values carry the type — names are just labels. <a class="mock__cite">docs.python.org →</a></div>
+                  </div>
                 </div>
-              </div>
+              </section>
             </div>
           </div>
         </div>

site/style.css

@@ -232,7 +232,6 @@ ul, ol { margin: 0; padding: 0; list-style: none; }
   font-size: 12px; color: var(--ink-3);
 }
 .mock__body {
-  position: relative;
   display: grid;
   grid-template-columns: 150px 1fr;
   min-height: 360px;
@@ -286,10 +285,11 @@ ul, ol { margin: 0; padding: 0; list-style: none; }
   margin: 0;
   padding: 12px 14px;
   font-family: var(--font-mono);
-  font-size: 12.5px;
+  font-size: 13.5px;
   line-height: 1.65;
   color: var(--ink-1);
   white-space: pre-wrap;
+  word-break: break-word;
   overflow-x: auto;
 }
 .mock__code .t-com { color: var(--t-com); font-style: italic; }
@@ -303,40 +303,36 @@ ul, ol { margin: 0; padding: 0; list-style: none; }
   background: rgba(122,163,107,0.08);
   border-top: 1px solid rgba(122,163,107,0.18);
   font-family: var(--font-mono);
-  font-size: 12.5px;
+  font-size: 13px;
 }
 .mock__ok { color: var(--leaf); font-weight: 600; }
 .mock__out code { color: var(--ink-1); }
 .mock__chat {
-  position: absolute;
-  right: 14px; bottom: 14px;
-  width: 240px;
+  margin-top: 14px;
   background: var(--bg-2);
   border: 1px solid var(--line-2);
   border-radius: var(--r-md);
   box-shadow: 0 18px 40px -18px rgba(0,0,0,0.7);
   overflow: hidden;
-  display: none;
 }
-@media (min-width: 540px) { .mock__chat { display: block; } }
 .mock__chat-head {
   display: flex; justify-content: space-between; align-items: center;
   padding: 8px 12px;
   background: #19191c;
   border-bottom: 1px solid var(--line-1);
-  font-size: 12px;
+  font-size: 12.5px;
 }
 .mock__chat-title { color: var(--ink-0); font-weight: 600; }
 .mock__chat-x { color: var(--ink-3); }
-.mock__chat-body { padding: 10px 10px 12px; display: grid; gap: 8px; }
+.mock__chat-body { padding: 10px 12px 12px; display: grid; gap: 8px; }
 .mock__bubble {
-  font-size: 12px; line-height: 1.5;
+  font-size: 12.5px; line-height: 1.5;
   padding: 8px 10px; border-radius: 10px;
 }
 .mock__bubble code {
   font-family: var(--font-mono);
   background: rgba(255,255,255,0.06);
-  padding: 0 4px; border-radius: 4px; font-size: 11px;
+  padding: 0 4px; border-radius: 4px; font-size: 11.5px;
 }
 .mock__bubble--you {
   background: var(--bg-3); color: var(--ink-1);
@@ -350,7 +346,7 @@ ul, ol { margin: 0; padding: 0; list-style: none; }
 }
 .mock__cite {
   display: inline-block; margin-top: 4px;
-  color: var(--amber); font-size: 11px;
+  color: var(--amber); font-size: 11.5px;
 }
 
 @media (max-width: 520px) {