From b890d277db19eda04e5591172770af11e9f5c1bb Mon Sep 17 00:00:00 2001
From: Claude <claude@anthropic.com>
Date: Fri, 22 May 2026 11:45:33 +0000
Subject: [PATCH] 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
---
 site/index.html | 30 +++++++++++++++---------------
 site/style.css  | 22 +++++++++-------------
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/site/index.html b/site/index.html
index 4caee2a..c1d0276 100644
--- a/site/index.html
+++ b/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>
diff --git a/site/style.css b/site/style.css
index d2f3ac4..46ac18c 100644
--- a/site/style.css
+++ b/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) {