feat: integrate OverlayScrollbars with theme-aware styling

web/src/routes/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+import "overlayscrollbars/overlayscrollbars.css";
 import "./layout.css";
 import { onMount } from "svelte";
+import { OverlayScrollbars } from "overlayscrollbars";
 import { Tooltip } from "bits-ui";
 import ThemeToggle from "$lib/components/ThemeToggle.svelte";
 import { themeStore } from "$lib/stores/theme.svelte";
@@ -9,6 +11,18 @@ let { children } = $props();
 
 onMount(() => {
   themeStore.init();
+
+  const osInstance = OverlayScrollbars(document.body, {
+    scrollbars: {
+      autoHide: "leave",
+      autoHideDelay: 800,
+      theme: themeStore.isDark ? "os-theme-dark" : "os-theme-light",
+    },
+  });
+
+  return () => {
+    osInstance?.destroy();
+  };
 });
 </script>
 

web/src/routes/layout.css

@@ -76,6 +76,35 @@ body * {
   mix-blend-mode: normal;
 }
 
+/* OverlayScrollbars — custom handle colors per theme */
+:root .os-scrollbar {
+  --os-handle-bg: rgba(0, 0, 0, 0.25);
+  --os-handle-bg-hover: rgba(0, 0, 0, 0.35);
+  --os-handle-bg-active: rgba(0, 0, 0, 0.45);
+}
+
+.dark .os-scrollbar {
+  --os-handle-bg: rgba(255, 255, 255, 0.35);
+  --os-handle-bg-hover: rgba(255, 255, 255, 0.45);
+  --os-handle-bg-active: rgba(255, 255, 255, 0.55);
+}
+
+.os-scrollbar-handle {
+  border-radius: 4px;
+}
+
+/* Hide native scrollbars on body — OverlayScrollbars takes over */
+html,
+body {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  display: none;
+}
+
 @keyframes pulse {
   0%,
   100% {