refactor(SliderArea): extract grid overlay into bg-grid utilities

The decorative dotted-grid background on the paper surface was a
6-line $derived gridStyle string applied via inline style="" plus four
extra utility classes for color and opacity. Replace with two named
utilities and let CSS handle the responsive switch.

app.css:
- New --color-grid-line CSS var (light + dark) so the grid colour and
  intensity auto-switch without consumers needing a dark: variant or an
  opacity layer.
- @utility bg-grid (20px cells) and @utility bg-grid-sm (10px cells).
  Both reference --color-grid-line, so the same markup paints correctly
  in light and dark mode.

SliderArea.svelte:
- Drop the gridStyle $derived block and the inline style= attribute.
- Overlay becomes a single line:
  <div class="absolute inset-0 pointer-events-none bg-grid-sm md:bg-grid"
       aria-hidden="true" />
  Mobile picks the tight 10px grid; the md: breakpoint flips to 20px,
  matching the prior JS-driven behaviour with no extra runtime cost.

src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte

@@ -288,10 +288,9 @@ $effect(() => {
             'shadow-floating-panel dark:shadow-floating-panel-dark',
         )}
     >
-        <!-- Subtle grid overlay — pointer-events-none, very low opacity -->
+        <!-- Subtle dotted-grid overlay — purely decorative. -->
         <div
-            class="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05] text-swiss-black dark:text-swiss-white"
-            style={gridStyle}
+            class="absolute inset-0 pointer-events-none bg-grid-sm md:bg-grid"
             aria-hidden="true"
         >
         </div>