fix: prevent vertical scroll when embedded in a small box

Cap the orb size by height as well as width (min(38vw, 46vh)) and let the
stage shrink so a short container scales the orb down instead of overflowing.
Tighten paddings/gaps on short viewports and drop the (duplicate) footer under
480px tall, keeping the identity header intact.

Co-authored-by: Cursor <cursoragent@cursor.com>

style.css

@@ -569,6 +569,9 @@ a:hover {
   justify-content: center;
   padding: 24px 24px 32px;
   gap: 20px;
+  /* Let the stage shrink inside the grid's 1fr row so a height-capped orb can
+   * give back space rather than forcing the whole app to overflow. */
+  min-height: 0;
 }
 
 /* ─── Central circle ──────────────────────────────────────────────────── */
@@ -584,7 +587,11 @@ a:hover {
 
 .circle {
   position: relative;
-  width: clamp(220px, 38vw, 320px);
+  /* Cap by height as well as width (min(vw, vh)-style): in a short container
+   * the orb shrinks instead of overflowing, so the page stays scroll-free even
+   * when embedded in a small box. On normal screens the 320px cap still wins,
+   * so the desktop size is unchanged. */
+  width: clamp(140px, min(38vw, 46vh), 320px);
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   border: none;
@@ -1976,7 +1983,8 @@ body.cam-on .footer {
   }
 
   .circle {
-    width: clamp(170px, 56vw, 240px);
+    /* Height-capped like the base rule so a narrow AND short box still fits. */
+    width: clamp(130px, min(56vw, 52vh), 240px);
   }
 
   /* In the column layout the side controls must collapse by HEIGHT, not
@@ -2594,3 +2602,25 @@ body.cam-on .footer {
 
   .ident-title { font-size: 24px; }
 }
+
+/* ─── Short viewports: fit without a vertical scrollbar ─────────────────────
+ * The base media queries only react to WIDTH, so a short container (e.g. the
+ * app embedded in a small box on a blog page) used to overflow vertically and
+ * get clipped. We KEEP the identity header, orb, caption and credits, and only
+ * tighten the vertical rhythm — paddings and gaps — so everything fits. The
+ * orb is already height-capped (see `.circle` → min(38vw, 46vh)), so it yields
+ * the extra room instead of pushing content off-screen. No opt-in needed. */
+@media (max-height: 640px) {
+  .topbar { padding: 12px 22px; }
+  .stage { padding: 14px 20px 18px; gap: 14px; }
+  .footer { padding: 8px 22px 12px; }
+}
+
+@media (max-height: 480px) {
+  .topbar { padding: 8px 16px; }
+  .stage { padding: 8px 14px 10px; gap: 8px; }
+  /* The footer is a verbatim duplicate of the "Powered by" credit already in
+   * the header, so it's the one safe thing to drop for space — the header
+   * (title + blurb + credits) stays intact. */
+  .footer { display: none; }
+}