feat(reader): glass chrome — translucent bars, custom slider, slide-away hide

Modernize the reader chrome bars without touching the drawer system:

- Bars become theme-tinted glass: 70% bg-primary translucency over
  the edge-to-edge page, 18px backdrop blur + saturation, hairline
  translucent borders, soft directional shadows (single .reader-glass
  class owns the effect; replaces solid opaque backgrounds and the
  tailwind backdrop-blur that would override it).
- Chrome hide/show now slides the bars off-screen (translateY) in
  addition to the opacity fade, via .chrome-hidden on #reader-chrome.
- Theme-aware hover pills (translucent currentColor tint) replace
  hard-coded gray-700 hovers; focus-visible rings added.
- Progress slider gets a custom thin rounded track with a floating
  white thumb (webkit + gecko), replacing native range styling.
- Separators and the fit-mode select match the glass language
  (.reader-sep, .reader-select).

web/static/input.css

@@ -735,6 +735,103 @@
     stroke-linejoin: round;
   }
 
+  /* Glass chrome: translucent theme-tinted bars over the edge-to-edge
+     reading surface. Blur + saturate the content behind, hairline border,
+     soft directional shadow. */
+  .reader-glass {
+    background-color: color-mix(in srgb, var(--bg-primary) 70%, transparent);
+    -webkit-backdrop-filter: blur(18px) saturate(1.4);
+    backdrop-filter: blur(18px) saturate(1.4);
+    border-color: color-mix(in srgb, var(--border) 60%, transparent);
+  }
+  #reader-topbar.reader-glass {
+    border-bottom: 1px solid
+      color-mix(in srgb, var(--border) 60%, transparent);
+    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
+  }
+  #reader-bottombar.reader-glass {
+    border-top: 1px solid
+      color-mix(in srgb, var(--border) 60%, transparent);
+    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.16);
+  }
+  /* Bars slide away when the chrome hides (opacity handled on #reader-chrome) */
+  #reader-topbar,
+  #reader-bottombar {
+    transition:
+      transform 0.3s ease,
+      opacity 0.3s ease;
+  }
+  #reader-chrome.chrome-hidden #reader-topbar {
+    transform: translateY(-101%);
+  }
+  #reader-chrome.chrome-hidden #reader-bottombar {
+    transform: translateY(101%);
+  }
+  /* Theme-aware translucent hover pills + focus rings for bar controls */
+  #reader-topbar button:hover,
+  #reader-bottombar button:hover,
+  #reader-topbar a:hover {
+    background-color: color-mix(in srgb, currentColor 13%, transparent);
+  }
+  #reader-topbar button:focus-visible,
+  #reader-bottombar button:focus-visible,
+  #reader-topbar a:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+  }
+  .reader-sep {
+    background-color: color-mix(in srgb, var(--border) 80%, transparent);
+  }
+  .reader-select {
+    background-color: color-mix(in srgb, var(--bg-primary) 55%, transparent);
+    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+    color: inherit;
+  }
+  .reader-select:hover {
+    border-color: #3b82f6;
+  }
+  /* Progress slider: thin rounded track + floating white thumb */
+  #reader-bottombar input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 18px;
+    background: transparent;
+    cursor: pointer;
+    accent-color: #3b82f6;
+  }
+  #reader-bottombar input[type="range"]::-webkit-slider-runnable-track {
+    height: 4px;
+    border-radius: 9999px;
+    background: color-mix(in srgb, currentColor 22%, transparent);
+  }
+  #reader-bottombar input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: -5px;
+    width: 14px;
+    height: 14px;
+    border: none;
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+    transition: transform 0.12s ease;
+  }
+  #reader-bottombar input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+  }
+  #reader-bottombar input[type="range"]::-moz-range-track {
+    height: 4px;
+    border-radius: 9999px;
+    background: color-mix(in srgb, currentColor 22%, transparent);
+  }
+  #reader-bottombar input[type="range"]::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border: none;
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+  }
+
   .drawer-scrim {
     position: fixed;
     inset: 0;
@@ -777,7 +874,8 @@
   }
   .reader-seg {
     display: inline-flex;
-    border: 1px solid var(--border);
+    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+    background-color: color-mix(in srgb, var(--bg-primary) 50%, transparent);
     border-radius: 0.5rem;
     overflow: hidden;
   }