feat(theme): add local Font Awesome and align ToolboxAid-style return-to-top control

- Vendored Font Awesome 4.7.0 into `src/engine/theme/fontawesome/` (css + webfonts).
- Imported local FA stylesheet in `src/engine/theme/main.css` for theme-wide icon availability.
- Updated shared Return-to-Top control to use ToolboxAid-style `#ball-container` markup and behavior:
  - wave rings + bounce animation
  - fade in/out on scroll threshold
  - smooth scroll to top on click
  - keyboard accessible activation
- Switched arrow back to true FA icon rendering (`fa fa-arrow-up`) and removed fallback font overrides.
- Kept implementation centralized in shared theme files so it applies consistently across hubs/tools.

Author: DavidQ

src/engine/theme/fontawesome/css/font-awesome.min.css

@@ -1,4 +1,5 @@
 @import url('./tokens.css');
+@import url('./fontawesome/css/font-awesome.min.css');
 @import url('./layout.css');
 @import url('./header.css');
 @import url('./nav.css');

src/engine/theme/fontawesome/fonts/fontawesome-webfont.ttf

@@ -21,6 +21,109 @@ async function mountSampleDetailEnhancementIfNeeded() {
   }
 }
 
+function mountReturnToTopControl() {
+  const existing = document.getElementById('ball-container');
+  if (existing instanceof HTMLElement) {
+    return;
+  }
+
+  const container = document.createElement('div');
+  container.id = 'ball-container';
+  container.className = 'ball-loc bounce';
+  container.style.display = 'none';
+  container.setAttribute('role', 'button');
+  container.setAttribute('tabindex', '0');
+  container.setAttribute('aria-label', 'Return to Top');
+  container.innerHTML = `
+    <div class="ball wave1"></div>
+    <div class="ball wave2"></div>
+    <div class="ball wave3"></div>
+    <div class="ball static-ball"><i class="fa fa-arrow-up" aria-hidden="true"></i></div>
+  `;
+
+  let fadeRafId = 0;
+  let fadeStart = 0;
+  let fadeFrom = 0;
+  let fadeTo = 0;
+  const fadeDurationMs = 1500;
+
+  const applyVisibility = (value) => {
+    container.style.opacity = String(value);
+    if (value <= 0.001) {
+      container.style.display = 'none';
+      container.style.pointerEvents = 'none';
+    } else {
+      container.style.display = 'block';
+      container.style.pointerEvents = 'auto';
+    }
+  };
+
+  const getOpacity = () => {
+    const raw = Number.parseFloat(container.style.opacity || '0');
+    return Number.isFinite(raw) ? raw : 0;
+  };
+
+  const startFade = (targetOpacity) => {
+    if (fadeRafId) {
+      window.cancelAnimationFrame(fadeRafId);
+      fadeRafId = 0;
+    }
+    fadeFrom = getOpacity();
+    fadeTo = targetOpacity;
+    if (Math.abs(fadeTo - fadeFrom) < 0.01) {
+      applyVisibility(fadeTo);
+      return;
+    }
+    if (fadeTo > 0) {
+      container.style.display = 'block';
+      container.style.pointerEvents = 'auto';
+    }
+    fadeStart = performance.now();
+    const step = (now) => {
+      const elapsed = now - fadeStart;
+      const progress = Math.min(1, elapsed / fadeDurationMs);
+      const nextOpacity = fadeFrom + ((fadeTo - fadeFrom) * progress);
+      applyVisibility(nextOpacity);
+      if (progress < 1) {
+        fadeRafId = window.requestAnimationFrame(step);
+      } else {
+        fadeRafId = 0;
+      }
+    };
+    fadeRafId = window.requestAnimationFrame(step);
+  };
+
+  const updateVisibility = () => {
+    const scrollTop = Math.max(
+      window.scrollY || 0,
+      document.documentElement?.scrollTop || 0,
+      document.body?.scrollTop || 0
+    );
+    if (scrollTop > 250) {
+      startFade(1);
+    } else {
+      startFade(0);
+    }
+  };
+
+  const moveToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  container.addEventListener('click', moveToTop);
+  container.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      moveToTop();
+    }
+  });
+
+  window.addEventListener('scroll', updateVisibility, { passive: true });
+  window.addEventListener('resize', updateVisibility, { passive: true });
+  updateVisibility();
+  document.body.appendChild(container);
+}
+
 if (typeof window !== 'undefined' && typeof document !== 'undefined') {
   const headerIntroAccordion = document.querySelector('.is-collapsible');
   const headerIntroSummary = headerIntroAccordion?.querySelector('.is-collapsible__summary');
@@ -55,5 +158,6 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
     });
   }
 
+  mountReturnToTopControl();
   void mountSampleDetailEnhancementIfNeeded();
 }

src/engine/theme/fontawesome/fonts/fontawesome-webfont.woff

@@ -118,3 +118,111 @@ body.hub-page-samples .card-link p {
     padding: 18px;
   }
 }
+
+i.fa.fa-arrow-up {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 23px;
+  font-weight: 900;
+  font-style: normal;
+  color: #eeeeee;
+}
+
+.ball-loc {
+  position: fixed;
+  left: 92vw;
+  top: 86vh;
+  z-index: 1000;
+}
+
+.ball {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+.static-ball {
+  opacity: 1;
+  background-color: #ed9700;
+}
+
+.wave1,
+.wave2,
+.wave3 {
+  animation: wave-animation 3s infinite;
+  background-color: #ed9700;
+}
+
+.wave1 {
+  animation-delay: 0s;
+}
+
+.wave2 {
+  animation-delay: 0.3s;
+}
+
+.wave3 {
+  animation-delay: 0.6s;
+}
+
+.bounce:hover {
+  animation-name: bounce;
+  animation-timing-function: ease;
+  animation-duration: 0.75s;
+  animation-iteration-count: 3;
+  cursor: pointer;
+}
+
+@keyframes wave-animation {
+  0% {
+    opacity: 0.75;
+    width: 0;
+    height: 0;
+  }
+  100% {
+    opacity: 0;
+    width: 167px;
+    height: 167px;
+  }
+}
+
+@keyframes bounce {
+  0% {
+    transform: translate(1px, 1px) rotate(0deg);
+  }
+  10% {
+    transform: translate(-1px, -2px) rotate(-1deg);
+  }
+  20% {
+    transform: translate(-3px, 0) rotate(1deg);
+  }
+  30% {
+    transform: translate(3px, 2px) rotate(0deg);
+  }
+  40% {
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    transform: translate(3px, 1px) rotate(-1deg);
+  }
+  80% {
+    transform: translate(-1px, -1px) rotate(1deg);
+  }
+  90% {
+    transform: translate(1px, 2px) rotate(0deg);
+  }
+  100% {
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}