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

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

Author: claude

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) {