fix: improve light mode scrollbar visibility and hide custom cursor on text inputs

src/components/DotMatrixCursor.tsx

@@ -111,11 +111,18 @@ export default function DotMatrixCursor() {
       queued = false;
     };
 
+    const TEXT_INPUT_SELECTOR = 'input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, [contenteditable="true"]';
+
     const onPointerMove = (e: PointerEvent) => {
       if (e.pointerType !== 'mouse') return;
       x = e.clientX;
       y = e.clientY;
-      el.style.opacity = '1';
+      const target = e.target as HTMLElement | null;
+      if (target?.closest?.(TEXT_INPUT_SELECTOR)) {
+        el.style.opacity = '0';
+      } else {
+        el.style.opacity = '1';
+      }
       if (!queued) {
         queued = true;
         requestAnimationFrame(paint);
@@ -124,7 +131,15 @@ export default function DotMatrixCursor() {
 
     const onMouseOver = (e: MouseEvent) => {
       const target = e.target as HTMLElement | null;
-      el.classList.toggle('is-hover', Boolean(target?.closest?.(CFG.hoverSelector)));
+      const isTextInput = Boolean(target?.closest?.(TEXT_INPUT_SELECTOR));
+      
+      // If hovering on an input or textarea, hide custom dot cursor so native I-beam caret is cleanly visible
+      if (isTextInput) {
+        el.style.opacity = '0';
+      } else {
+        el.style.opacity = '1';
+        el.classList.toggle('is-hover', Boolean(target?.closest?.(CFG.hoverSelector)));
+      }
     };
 
     const onMouseDown = () => el.classList.add('is-down');

src/styles/global.css

@@ -154,12 +154,18 @@
     }
   }
 
-  html {
-    scrollbar-gutter: stable;
-    overflow-y: scroll;
-    scroll-behavior: smooth;
-    background-color: var(--bg-color);
-  }
+html {
+  scrollbar-gutter: stable;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+  background-color: var(--bg-color);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+}
+
+html.dark {
+  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
+}
 
   /* Smooth, hardware-accelerated View Transitions (Astro navigation & theme cross-fade) */
   ::view-transition-old(root),
@@ -479,10 +485,22 @@ html[data-tier='low'] .nav-enter { animation: none; opacity: 1; transform: none;
   will-change: auto !important;
 }
 
-::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.2); border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.4); }
+::-webkit-scrollbar-thumb { 
+  background: rgba(0, 0, 0, 0.22); 
+  border-radius: 9999px; 
+}
+::-webkit-scrollbar-thumb:hover { 
+  background: rgba(0, 0, 0, 0.38); 
+}
+
+.dark ::-webkit-scrollbar-thumb { 
+  background: rgba(255, 255, 255, 0.22); 
+}
+.dark ::-webkit-scrollbar-thumb:hover { 
+  background: rgba(255, 255, 255, 0.40); 
+}
 
 .no-scrollbar { scrollbar-width: none; }
 .no-scrollbar::-webkit-scrollbar { display: none; }