Fix bamboo stalk taper and align stray colors to palette

The stalks used border-radius:50%, which renders a tall ellipse whose
ends taper to points, and unbounded parallax drift pushed them off the
bottom of the viewport on long pages. Rounded caps + 20% overscan +
a viewport-relative drift clamp keep them full-height while scrolling.

Sweep the remaining off-palette colors into the nature palette:
content-script overlays (slate grays), amber warnings/badges/star
accents (now terracotta) in popup, background badge and website
illustrations, and the support-heart red (now --danger).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

extension/popup.html

@@ -36,7 +36,7 @@
             --success: var(--accent-green);
             --error: var(--danger);
             --radius: 12px;
-            --star: #fbbf24;
+            --star: oklch(0.68 0.14 45);
         }
 
         body {
@@ -289,7 +289,7 @@
         .toast-success { background: var(--success); color: var(--text-on-green); }
         .toast-error { background: var(--error); color: white; }
         .toast-info { background: var(--accent); color: var(--text-on-green); }
-        .toast-warning { background: #f59e0b; color: white; }
+        .toast-warning { background: var(--accent-terracotta); color: white; }
 
         @keyframes toastSlideIn {
             from { opacity: 0; transform: translateY(-20px); }