fix: scroll-to-top visible class + reading progress dark mode

- Wire visible state to className in ScrollToTop component
- Replace hard-coded rgba with color-mix() for theme-aware background
- Dark mode reading progress uses 15% ink color mix

app/globals.css

@@ -396,16 +396,13 @@ html.dark code[data-theme*=" "] span {
 
 /* === Reading progress vertical bar === */
 .reading-progress {
-  position: fixed;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 60px;
-  background: rgba(0, 0, 0, 0.08);
-  border-radius: 2px;
-  z-index: 9998;
-  overflow: hidden;
+  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
+  width: 3px; height: 60px;
+  background: color-mix(in oklch, var(--color-ink) 8%, transparent);
+  border-radius: 2px; z-index: 9998; overflow: hidden;
+}
+.dark .reading-progress {
+  background: color-mix(in oklch, var(--color-ink) 15%, transparent);
 }
 .reading-progress-fill {
   width: 100%;

components/ui/ScrollToTop.tsx

@@ -19,7 +19,7 @@ export function ScrollToTop() {
       onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
       whileHover={{ scale: 1.1 }}
       whileTap={{ scale: 0.95 }}
-      className="scroll-to-top"
+      className={`scroll-to-top ${visible ? 'visible' : ''}`}
       aria-label="Scroll to top"
     >
       <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="18 15 12 9 6 15"/></svg>