fix(createCharacterComparison): improve characters measurment for better magnifying presicion

src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte

@@ -68,6 +68,8 @@ const charComparison = createCharacterComparison(
     () => sizeControl.value,
 );
 
+let lineElements = $state<(HTMLElement | undefined)[]>([]);
+
 /** Physics-based spring for smooth handle movement */
 const sliderSpring = new Spring(50, {
     stiffness: 0.2, // Balanced for responsiveness
@@ -138,12 +140,18 @@ $effect(() => {
 
 {#snippet renderLine(line: LineData, lineIndex: number)}
     <div
+        bind:this={lineElements[lineIndex]}
         class="relative flex w-full justify-center items-center whitespace-nowrap"
         style:height={`${heightControl.value}em`}
         style:line-height={`${heightControl.value}em`}
     >
         {#each line.text.split('') as char, charIndex}
-            {@const { proximity, isPast } = charComparison.getCharState(lineIndex, charIndex, line, sliderPos)}
+            {@const { proximity, isPast } = charComparison.getCharState(
+        charIndex,
+        sliderPos,
+        lineElements[lineIndex],
+        container,
+    ),}
             <!--
                 Single Character Span
                 - Font Family switches based on `isPast`
@@ -177,29 +185,25 @@ $effect(() => {
             aria-label="Font comparison slider"
             onpointerdown={startDragging}
             class="
-                group relative w-full py-16 px-6 sm:py-24 sm:px-12 overflow-hidden
-                bg-indigo-50 rounded-[2.5rem] border border-slate-100 shadow-2xl
+                group relative w-full py-16 px-0 sm:py-24 sm:px-0 overflow-hidden
+                rounded-[2.5rem]
                 select-none touch-none cursor-ew-resize min-h-100 flex flex-col justify-center
+                backdrop-blur-lg bg-gradient-to-br from-gray-100/70 via-white/50 to-gray-100/60
+                border border-gray-300/40
+                shadow-[inset_0_4px_12px_0_rgba(0,0,0,0.12),inset_0_2px_4px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(255,255,255,0.8)]
+                before:absolute before:inset-0 before:rounded-[2.5rem] before:p-[1px]
+                before:bg-gradient-to-br before:from-black/5 before:via-black/2 before:to-transparent
+                before:-z-10 before:blur-sm
             "
-            class:box-shadow={'-20px 20px 60px #bebebe, 20px -20px 60px #ffffff;'}
             in:fly={{ y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 }}
         >
-            <!-- Background Gradient Accent -->
-            <div
-                class="
-                    absolute inset-0 bg-linear-to-br
-                    from-slate-50/50 via-white to-slate-100/50
-                    opacity-50 pointer-events-none
-                "
-            >
-            </div>
-
             <!-- Text Rendering Container -->
             <div
                 class="
                     relative flex flex-col items-center gap-4
                     text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.15]
                     z-10 pointer-events-none text-center
+                    drop-shadow-[0_3px_6px_rgba(255,255,255,0.9)]
                 "
                 style:perspective="1000px"
             >