diff --git a/index.css b/index.css
index c3d9b51..6916a1d 100644
--- a/index.css
+++ b/index.css
@@ -7304,7 +7304,7 @@
   top: 16px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 100;
+  z-index: 10100;
   background: rgba(0, 34, 36, 0.3);
   border: 1px solid rgba(229, 241, 242, 0.2);
   border-radius: 999px;
diff --git a/src/components/Tutorial/TutorialOverlay.tsx b/src/components/Tutorial/TutorialOverlay.tsx
index ba41803..7c4770c 100644
--- a/src/components/Tutorial/TutorialOverlay.tsx
+++ b/src/components/Tutorial/TutorialOverlay.tsx
@@ -7,6 +7,7 @@ interface Rect {
   left: number;
   width: number;
   height: number;
+  bottom: number;
 }
 
 interface TooltipPos {
@@ -29,7 +30,7 @@ function getTargetRect(selector: string): Rect | null {
   const el = document.querySelector(selector);
   if (!el) return null;
   const r = el.getBoundingClientRect();
-  return { top: r.top, left: r.left, width: r.width, height: r.height };
+  return { top: r.top, left: r.left, width: r.width, height: r.height, bottom: r.bottom };
 }
 
 function getSpotlightRect(
@@ -48,6 +49,7 @@ function getSpotlightRect(
 
   return {
     top,
+    bottom,
     left,
     width: Math.max(0, right - left),
     height: Math.max(0, bottom - top),
@@ -175,6 +177,12 @@ const TutorialOverlay: React.FC<TutorialOverlayProps> = ({
 
   if (!hint) return null;
 
+  const isTargetVisible = targetRect
+    ? targetRect.top + 60 < window.innerHeight && targetRect.bottom > 60
+    : true;
+
+  if (!isTargetVisible) return null;
+
   const spotlightPadding = hint.spotlightPadding ?? PADDING;
   const spotlightRect = (targetRect && !hint.noSpotlight) ? getSpotlightRect(targetRect, spotlightPadding, hint.spotlightPaddingOverride) : null;