diff --git a/extension/background.js b/extension/background.js
index c2f595d..12b9723 100644
--- a/extension/background.js
+++ b/extension/background.js
@@ -790,13 +790,13 @@ function updateBadgeStatus() {
 
     if (status === 'reconnecting') {
         chrome.action.setBadgeText({ text: '...' });
-        chrome.action.setBadgeBackgroundColor({ color: '#f59e0b' });
+        chrome.action.setBadgeBackgroundColor({ color: '#c96736' });
     } else if (status === 'connecting') {
         chrome.action.setBadgeText({ text: '...' });
-        chrome.action.setBadgeBackgroundColor({ color: '#fbbf24' });
+        chrome.action.setBadgeBackgroundColor({ color: '#de7949' });
     } else if (status === 'connected' && currentRoom && currentTabId) {
         chrome.action.setBadgeText({ text: 'ON' });
-        chrome.action.setBadgeBackgroundColor({ color: '#22c55e' });
+        chrome.action.setBadgeBackgroundColor({ color: '#56ae6c' });
     } else {
         chrome.action.setBadgeText({ text: '' });
     }
diff --git a/extension/content.js b/extension/content.js
index d148a64..d00bf2f 100644
--- a/extension/content.js
+++ b/extension/content.js
@@ -424,12 +424,12 @@
         const host = hcmEl('div', 'all:initial');

         const root = host.attachShadow({ mode: 'open' });

 

-        const wrap = hcmEl('div', 'position:fixed;z-index:2147483647;left:50%;bottom:32px;transform:translateX(-50%);background:#1f2937;color:#f9fafb;font:14px/1.4 system-ui,sans-serif;padding:16px 18px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.45);max-width:360px;border:1px solid #374151');

+        const wrap = hcmEl('div', 'position:fixed;z-index:2147483647;left:50%;bottom:32px;transform:translateX(-50%);background:#212a17;color:#f4f2ea;font:14px/1.4 system-ui,sans-serif;padding:16px 18px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.45);max-width:360px;border:1px solid #2f3625');

         wrap.setAttribute('role', 'dialog');

         const title = hcmEl('div', 'font-weight:600;margin-bottom:6px', hcmStrings.title);

-        const body = hcmEl('div', 'margin-bottom:12px;color:#d1d5db', hcmStrings.body);

+        const body = hcmEl('div', 'margin-bottom:12px;color:#bcb7a9', hcmStrings.body);

         const btnRow = hcmEl('div', 'display:flex;gap:8px;justify-content:flex-end');

-        const soloBtn = hcmEl('button', 'background:#374151;color:#f9fafb;border:0;padding:8px 12px;border-radius:8px;cursor:pointer', hcmStrings.solo);

+        const soloBtn = hcmEl('button', 'background:#2f3625;color:#f4f2ea;border:0;padding:8px 12px;border-radius:8px;cursor:pointer', hcmStrings.solo);

         const stayBtn = hcmEl('button', 'background:#56ae6c;color:#0a1a0d;border:0;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600', hcmStrings.stay);

         btnRow.append(soloBtn, stayBtn);

         wrap.append(title, body, btnRow);

@@ -494,7 +494,7 @@
         }

         const host = hcmEl('div', 'all:initial');

         const root = host.attachShadow({ mode: 'open' });

-        const b = hcmEl('div', 'position:fixed;z-index:2147483646;right:16px;bottom:16px;background:#b45309;color:#fff;font:13px/1.3 system-ui,sans-serif;padding:8px 12px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer;display:flex;align-items:center;gap:8px');

+        const b = hcmEl('div', 'position:fixed;z-index:2147483646;right:16px;bottom:16px;background:#c96736;color:#fff;font:13px/1.3 system-ui,sans-serif;padding:8px 12px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer;display:flex;align-items:center;gap:8px');

         b.append(hcmEl('span', null, '● ' + hcmStrings.badge), hcmEl('span', 'text-decoration:underline', hcmStrings.resync));

         b.addEventListener('click', hcmExitDesync);

         root.appendChild(b);

diff --git a/extension/popup.html b/extension/popup.html
index f7cad49..f7f6224 100644
--- a/extension/popup.html
+++ b/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); }
diff --git a/extension/popup.js b/extension/popup.js
index 6b628bb..330cd1b 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -725,7 +725,7 @@ function updatePeerList(peers) {
             // Host Control Mode: show "Solo" badge for peers watching on their own.
             if (typeof p === 'object' && p.desynced) {
                 const solo = document.createElement('span');
-                solo.style.cssText = 'font-size:10px; color:#fff; background:#b45309; padding:2px 6px; border-radius:6px; font-weight:600;';
+                solo.style.cssText = 'font-size:10px; color:#fff; background:#c96736; padding:2px 6px; border-radius:6px; font-weight:600;';
                 const soloText = getMessage('BADGE_DESYNCED') || 'Solo';
                 solo.textContent = soloText;
                 solo.title = getMessage('TOOLTIP_PEER_DESYNCED') || soloText;
@@ -1014,14 +1014,14 @@ function applyConnectionStatus(status) {
         elements.connDot.className = 'status-dot ' + (connected ? 'status-online' : ((connecting || reconnecting) ? 'status-online' : 'status-offline'));
 
         if (reconnecting) {
-            elements.connDot.style.background = '#f59e0b';
-            elements.connDot.style.boxShadow = '0 0 8px #f59e0b';
+            elements.connDot.style.background = '#c96736';
+            elements.connDot.style.boxShadow = '0 0 8px #c96736';
         } else if (connecting) {
-            elements.connDot.style.background = '#fbbf24';
-            elements.connDot.style.boxShadow = '0 0 8px #fbbf24';
+            elements.connDot.style.background = '#de7949';
+            elements.connDot.style.boxShadow = '0 0 8px #de7949';
         } else if (idle) {
             // Neutral grey — ready, not failed.
-            elements.connDot.style.background = '#9ca3af';
+            elements.connDot.style.background = '#bcb7a9';
             elements.connDot.style.boxShadow = 'none';
         } else if (!connected) {
             elements.connDot.style.background = '#b94642';
@@ -1073,7 +1073,7 @@ function updatePingDisplay(pingMs) {
     if (pingMs < 50) {
         elements.connPing.style.color = '#56ae6c';
     } else if (pingMs < 150) {
-        elements.connPing.style.color = '#f59e0b';
+        elements.connPing.style.color = '#c96736';
     } else {
         elements.connPing.style.color = '#b94642';
     }
@@ -2286,7 +2286,7 @@ function refreshDebugInfo() {
                     }
 
                     const hint = document.createElement('div');
-                    hint.style.cssText = 'margin-top: 12px; padding: 8px; background: rgba(251,191,36,0.1); border-left: 3px solid #fbbf24; border-radius: 4px; font-size: 10px; color: var(--text-muted);';
+                    hint.style.cssText = 'margin-top: 12px; padding: 8px; background: rgba(222,121,73,0.12); border-left: 3px solid #de7949; border-radius: 4px; font-size: 10px; color: var(--text-muted);';
                     hint.textContent = 'Is a video currently playing? The extension only detects <video> elements. Ensure media is actively loaded on the page.';
                     elements.videoDebug.appendChild(hint);
                     return;
@@ -2297,7 +2297,7 @@ function refreshDebugInfo() {
                 addField('State', state.paused ? 'PAUSED' : 'PLAYING', state.paused ? 'var(--text-muted)' : '#56ae6c');
                 addField('Time', `${state.currentTime.toFixed(2)}s / ${(state.duration || 0).toFixed(2)}s`);
                 addField('ReadyState', `${state.readyState} (${state.readyStateLabel || '?'})`,
-                    state.readyState >= 3 ? '#56ae6c' : '#fbbf24');
+                    state.readyState >= 3 ? '#56ae6c' : '#de7949');
                 addField('Network', `${state.networkState} (${state.networkStateLabel || '?'})`,
                     state.networkState === 1 ? '#56ae6c' : state.networkState === 3 ? '#b94642' : 'var(--text-muted)');
                 addField('Buffered', state.buffered || '?');
@@ -2326,7 +2326,7 @@ function refreshDebugInfo() {
                 addField('Resolution', `${state.videoWidth}x${state.videoHeight}`, dimsOk ? '#56ae6c' : '#b94642');
                 if (!dimsOk) {
                     const dimHint = document.createElement('div');
-                    dimHint.style.cssText = 'color: #fbbf24; font-size: 9px; margin: 2px 0 6px 12px;';
+                    dimHint.style.cssText = 'color: #de7949; font-size: 9px; margin: 2px 0 6px 12px;';
                     dimHint.textContent = '0x0 = video element hidden or not yet loaded';
                     elements.videoDebug.appendChild(dimHint);
                 }
diff --git a/website/app.js b/website/app.js
index 0a4d8d2..0859606 100644
--- a/website/app.js
+++ b/website/app.js
@@ -217,9 +217,11 @@ document.addEventListener('DOMContentLoaded', () => {
     const bambooNear = document.getElementById('bamboo-near');
     if (bambooFar && bambooNear && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
         window.addEventListener('scroll', () => {
-            const scrollY = window.scrollY;
-            bambooFar.style.transform = `translateY(${scrollY * 0.04}px)`;
-            bambooNear.style.transform = `translateY(${-scrollY * 0.06}px)`;
+            // Cap the drift at ~14% of the viewport: the stalks have 20%
+            // overscan, so they always span the full height while parallaxing.
+            const maxShift = window.innerHeight * 0.14;
+            bambooFar.style.transform = `translateY(${Math.min(window.scrollY * 0.04, maxShift)}px)`;
+            bambooNear.style.transform = `translateY(${-Math.min(window.scrollY * 0.06, maxShift)}px)`;
         }, { passive: true });
     }
 
diff --git a/website/join.html b/website/join.html
index 853bbf2..2188041 100644
--- a/website/join.html
+++ b/website/join.html
@@ -173,7 +173,7 @@
                 <a href="privacy" lang="en" style="color: var(--text-muted); text-decoration: none;">Privacy Policy</a>
                 <a href="de/datenschutz" lang="de" style="color: var(--text-muted); text-decoration: none;">Datenschutz</a>
                 <a href="alternatives"><span lang="en">Guides & comparisons</span><span lang="de">Vergleiche & Anleitungen</span></a>
-                <a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="Support KoalaSync" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #c9302c; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                <a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="Support KoalaSync" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #b94642; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
                     <span aria-hidden="true">♥</span>
                     <span>Support KoalaSync</span>
                 </a>
diff --git a/website/style.css b/website/style.css
index b69adfd..56343ee 100644
--- a/website/style.css
+++ b/website/style.css
@@ -139,9 +139,9 @@ body {
 
 #bamboo-far .bamboo-stalk {
     position: absolute;
-    top: -6%;
-    height: 112%;
-    border-radius: 50%;
+    top: -20%;
+    height: 140%;
+    border-radius: 999px;
     filter: blur(5.5px);
     background: linear-gradient(180deg, oklch(0.32 0.05 145 / 0.35), oklch(0.24 0.04 140 / 0.15));
 }
@@ -159,9 +159,9 @@ body {
 
 #bamboo-near .bamboo-stalk {
     position: absolute;
-    top: -6%;
-    height: 112%;
-    border-radius: 50%;
+    top: -20%;
+    height: 140%;
+    border-radius: 999px;
     background: linear-gradient(180deg, oklch(0.4 0.07 145 / 0.55), oklch(0.26 0.05 140 / 0.25));
     transform-origin: bottom center;
     animation: bambooSway 10s ease-in-out infinite;
@@ -179,9 +179,9 @@ body {
     background: oklch(0.5 0.08 145 / 0.5);
 }
 
-#bamboo-near .node-1 { top: 24%; }
-#bamboo-near .node-2 { top: 49%; }
-#bamboo-near .node-3 { top: 74%; }
+#bamboo-near .node-1 { top: 28%; }
+#bamboo-near .node-2 { top: 48%; }
+#bamboo-near .node-3 { top: 68%; }
 
 #bamboo-near .bamboo-leaf {
     position: absolute;
@@ -191,9 +191,9 @@ body {
     background: oklch(0.55 0.11 145 / 0.4);
 }
 
-#bamboo-near .near-1 .leaf-1 { top: 23%; left: 10px; transform: rotate(18deg); }
-#bamboo-near .near-1 .leaf-2 { top: 48.5%; left: -28px; transform: rotate(-160deg); width: 22px; height: 10px; }
-#bamboo-near .near-2 .leaf-1 { top: 30%; left: -26px; transform: rotate(-155deg); }
+#bamboo-near .near-1 .leaf-1 { top: 27.5%; left: 10px; transform: rotate(18deg); }
+#bamboo-near .near-1 .leaf-2 { top: 47.5%; left: -28px; transform: rotate(-160deg); width: 22px; height: 10px; }
+#bamboo-near .near-2 .leaf-1 { top: 44%; left: -26px; transform: rotate(-155deg); }
 
 @keyframes bambooSway {
     0%, 100% { transform: rotate(0); }
@@ -1409,9 +1409,9 @@ html.theme-light .koala-speech-bubble::after {
     display: flex;
     align-items: center;
     gap: 0.4rem;
-    background: rgba(234, 179, 8, 0.1);
-    border: 1px solid rgba(234, 179, 8, 0.2);
-    color: #facc15;
+    background: oklch(0.62 0.14 45 / 0.1);
+    border: 1px solid oklch(0.62 0.14 45 / 0.2);
+    color: oklch(0.72 0.13 50);
     padding: 0.5rem 0.6rem;
     border-radius: 8px;
     font-weight: 600;
@@ -1977,7 +1977,7 @@ input:checked + .mock-slider:before {
     opacity: 0.6;
 }
 .illus-browser-dot:nth-child(1) { background: oklch(0.55 0.15 25); }
-.illus-browser-dot:nth-child(2) { background: #fbbf24; }
+.illus-browser-dot:nth-child(2) { background: oklch(0.68 0.14 45); }
 .illus-browser-dot:nth-child(3) { background: oklch(0.68 0.13 150); }
 
 .illus-browser-address-bar {
@@ -2639,7 +2639,7 @@ input:checked + .mock-slider:before {
 }
 
 .terminal-dot.red { background: oklch(0.55 0.15 25); }
-.terminal-dot.yellow { background: #f59e0b; }
+.terminal-dot.yellow { background: oklch(0.68 0.14 45); }
 .terminal-dot.green { background: oklch(0.68 0.13 150); }
 
 .terminal-tabs {
@@ -2701,7 +2701,7 @@ input:checked + .mock-slider:before {
 .t-key { color: oklch(0.72 0.12 45); }
 .t-val { color: oklch(0.75 0.10 150); }
 .t-str { color: oklch(0.80 0.12 155); }
-.t-num { color: #fbbf24; }
+.t-num { color: oklch(0.75 0.12 50); }
 
 .terminal-copy-btn {
     position: absolute;
@@ -3046,7 +3046,7 @@ html:not(.lang-de) [lang="de"] {
 .feature-card:nth-child(2) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
 .feature-card:nth-child(3) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
 .feature-card:nth-child(4) { --card-accent: oklch(0.75 0.10 150 / 0.06); }
-.feature-card:nth-child(5) { --card-accent: rgba(245, 158, 11, 0.06); }
+.feature-card:nth-child(5) { --card-accent: oklch(0.68 0.14 45 / 0.06); }
 .feature-card:nth-child(6) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
 .feature-card:nth-child(7) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
 .feature-card:nth-child(8) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
@@ -3339,9 +3339,9 @@ html.theme-light .compat-logo img.compat-logo-disneyplus-mark {
     transition: opacity 0.3s ease;
 }
 
-.use-case-card:nth-child(1) { --card-accent-border: #f59e0b; }
-.use-case-card:nth-child(2) { --card-accent-border: oklch(0.75 0.10 150); }
-.use-case-card:nth-child(3) { --card-accent-border: oklch(0.62 0.14 45); }
+.use-case-card:nth-child(1) { --card-accent-border: oklch(0.68 0.13 150); }
+.use-case-card:nth-child(2) { --card-accent-border: oklch(0.62 0.14 45); }
+.use-case-card:nth-child(3) { --card-accent-border: oklch(0.75 0.10 150); }
 
 
 .use-case-card:hover {
@@ -4789,7 +4789,7 @@ header[id] {
 .film-bounce-ball {
     transform-origin: bottom center;
     transform: translateY(var(--bounce-y, 0px));
-    filter: drop-shadow(0 0 4px #fde047);
+    filter: drop-shadow(0 0 4px oklch(0.72 0.13 50));
 }
 
 /* Twinkle & Glow play state bindings */
diff --git a/website/template.html b/website/template.html
index 3b6a8a5..e842d16 100644
--- a/website/template.html
+++ b/website/template.html
@@ -425,7 +425,7 @@
                                     <polygon points="275,84 288,42 301,84" fill="#040903"/>
                                     <path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
                                 </g>
-                                <circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
+                                <circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#de7949"/>
                             </svg>
                             <div class="demo-play-overlay" aria-hidden="true">
                                 <span class="demo-icon-wrap">
@@ -482,7 +482,7 @@
                                     <polygon points="275,84 288,42 301,84" fill="#040903"/>
                                     <path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
                                 </g>
-                                <circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
+                                <circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#de7949"/>
                             </svg>
                             <div class="demo-play-overlay" aria-hidden="true">
                                 <span class="demo-icon-wrap">
@@ -1169,7 +1169,7 @@
                                             <polygon points="115,84 128,42 141,84" fill="#040903"/>
                                             <path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
                                         </g>
-                                        <circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
+                                        <circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#de7949"/>
                                     </svg>
                                 </div>
                                 <div class="player-controls">
@@ -1222,7 +1222,7 @@
                                             <polygon points="115,84 128,42 141,84" fill="#040903"/>
                                             <path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
                                         </g>
-                                        <circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
+                                        <circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#de7949"/>
                                     </svg>
                                 </div>
                                 <div class="player-controls">
@@ -1463,7 +1463,7 @@
                 <a href="{{ASSET_PATH}}{{FOOTER_LEGAL_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_LEGAL}}</span></a>
                 <a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_PRIVACY}}</span></a>
                 <a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives"><span><span lang="en">Guides & comparisons</span><span lang="de">Vergleiche & Anleitungen</span></span></a>
-                <a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #c9302c; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                <a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #b94642; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
                     <span aria-hidden="true">♥</span>
                     <span>{{FOOTER_SUPPORT}}</span>
                 </a>