01 Current
Left edges aligned
The exact current geometry: grey starts at x=0 and black starts at x=0, but black is wider.
grey 1px, black 2px, black offset 0px
Line Alignment Test
Black snake versus grey rail edge
This page compares the tiny horizontal relationship between the grey TOC segment line and the black moving snake while the same simulated scroll runs across every variant.
Production CSS is not changed here. These are working mini TOCs for choosing the cleanest alignment.
0%
02 Centered
Centers aligned
Same 2px black weight, shifted half a pixel left so the grey and black center lines match.
grey 1px, black 2px, black offset -0.5px
03 Thin Snake
Equal 1px lines
Removes the offset completely, but the moving marker loses some of its current visual weight.
grey 1px, black 1px, black offset 0px
04 Wide Grey
Equal 2px lines
Also removes the offset, but the inactive rail becomes visually heavier everywhere.
grey 2px, black 2px, black offset 0px
05 Softer Black
Keep geometry, soften contrast
Same left-edge offset as current, but a less absolute black to see if the shadow feeling drops.
grey 1px, black 2px, black offset 0px, black #111