Updates

src/styles/global.css

@@ -50,10 +50,8 @@
   --brand-top-inset: 6px;
   /* How far the pear hangs past the bar bottom */
   --brand-overhang: calc(var(--brand-logo) - var(--nav-h) + var(--brand-top-inset));
-  /* Bottom semicircle width — wraps pear under the bar only */
-  --brand-cradle: calc(var(--brand-logo) + 10px);
-  /* How far the cradle dips below the bar (pear hang + a little padding) */
-  --brand-cradle-depth: calc(var(--brand-overhang) + 8px);
+  /* True semicircle diameter under the pear (snug around the mark) */
+  --brand-cradle: calc(var(--brand-logo) + 4px);
   --max: 1200px;
   --max-wide: 1400px;
   /* Docs prose width is controlled in docs.css (--docs-content) */
@@ -622,29 +620,29 @@ tr:hover td {
 }
 
 /*
- * Bottom-only cradle: a semicircular extension of the nav bar that
- * wraps under the floating pear. No top half ring — the curve starts
- * at the bar’s bottom edge and returns to it on the other side.
+ * Bottom-only cradle: true semicircle under the pear.
+ * Full disc is positioned with its center on the bar bottom, then the top
+ * half is clipped away — so only a curve leaves and returns to the bar.
+ * No top ring, no diameter stroke through the pear.
  */
 .nav-brand::after {
   content: '';
   position: absolute;
   left: 0;
-  /* Hang from the bar bottom; nudge up 1px so the curve joins the border */
-  top: 100%;
+  /* Circle center sits on the bar’s bottom edge */
+  top: calc(100% - (var(--brand-cradle) / 2));
   width: var(--brand-cradle);
-  height: var(--brand-cradle-depth);
+  height: var(--brand-cradle);
   margin-left: calc((var(--brand-logo) - var(--brand-cradle)) / 2);
-  margin-top: -1px;
   z-index: 0;
   pointer-events: none;
   box-sizing: border-box;
-  /* Bowl shape: open top, rounded bottom */
+  border-radius: 50%;
   border: 1px solid transparent;
-  border-top: none;
-  border-radius: 0 0 50% 50% / 0 0 100% 100%;
   background: transparent;
   box-shadow: none;
+  /* Keep only the lower half (under the nav) */
+  clip-path: inset(50% 0 0 0);
   transition:
     background 0.3s,
     border-color 0.3s,
@@ -653,18 +651,17 @@ tr:hover td {
 }
 
 .site-nav.scrolled .nav-brand::after {
-  /* Same glass + border token as the bar — continuous chrome under the pear */
+  /* Same glass + border as the bar — continuous under the pear */
   background: var(--bg-glass);
   backdrop-filter: blur(16px) saturate(1.4);
   -webkit-backdrop-filter: blur(16px) saturate(1.4);
   border-color: var(--border);
-  border-top-color: transparent;
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
 }
 
 /*
- * Cover the straight nav border under the pear so only the cradle curve
- * remains. Match the bar glass (not a solid dark strip).
+ * Erase the straight nav border under the pear so the semicircle is the
+ * only edge there. Uses the bar’s own glass fill (not a solid black strip).
  */
 .site-nav.scrolled .nav-brand::before {
   content: '';
@@ -672,12 +669,13 @@ tr:hover td {
   left: calc((var(--brand-logo) - var(--brand-cradle)) / 2 + 1px);
   bottom: -1px;
   width: calc(var(--brand-cradle) - 2px);
-  height: 2px;
+  height: 3px;
   z-index: 2;
   pointer-events: none;
-  background: var(--bg-glass);
-  backdrop-filter: blur(16px) saturate(1.4);
-  -webkit-backdrop-filter: blur(16px) saturate(1.4);
+  /* Layer glass over the secondary bg so the 1px border is fully hidden */
+  background:
+    linear-gradient(var(--bg-glass), var(--bg-glass)),
+    var(--bg-secondary);
 }
 
 .nav-brand-text {
@@ -958,7 +956,7 @@ body.docs-sidebar-open {
     --nav-h: 60px;
     --brand-logo: 76px;
     --brand-top-inset: 4px;
-    --brand-cradle: calc(var(--brand-logo) + 12px);
+    --brand-cradle: calc(var(--brand-logo) + 4px);
   }
 
   .site-nav {
@@ -1184,7 +1182,7 @@ body.docs-sidebar-open {
   :root {
     --brand-logo: 64px;
     --brand-top-inset: 4px;
-    --brand-cradle: calc(var(--brand-logo) + 10px);
+    --brand-cradle: calc(var(--brand-logo) + 4px);
   }
 
   .nav-brand {