[scroll area] Style hover + active state

## Summary

The native scrollbar has come a long way, those are available in all browsers:

- `scrollbar-color`: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color (fallback to `::-webkit-scrollbar`)
- `scrollbar-width`: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
- `scrollbar-gutter`: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter (reserve space to avoid layout shift)
- Appearance can be animated.

**However**, there still seem to be limitations with the native scrollbar (could be content we add under https://base-ui.com/react/components/scroll-area to explain why this component exists in the first place, when to use vs. using native CSS). I could find 4 (only?), by order:

1. Hover and Active states can't be styled: https://github.com/w3c/csswg-drafts/issues/10591 with the native spec, only with `:-webkit-scrollbar-thumb:hover` and `:-webkit-scrollbar-thumb:active`.
2. macOS scrollbar is only visible on hover and doesn't work when the scrollbar is set to only become fully visible when scrolled https://github.com/w3c/csswg-drafts/issues/9785 (I'm not impacted by this).
3. It's impossible to have a scrollbar that takes no width/height on all platforms, as it does on macOS with a native scrollbar and the default setting, e.g., you can see content behind the scrollbar.
4. The scrollbar size can't be truly controlled, e.g., made bigger https://github.com/w3c/csswg-drafts/issues/10650
5. Having the scrollbar with custom shapes is impossible (why is this needed anyway?).

Now, because we don't show 1. in the demo (nor in code), it makes me feel like this component has no purpose, people would be better off customizing the platform, less bundle size, less performance issue (https://github.com/mui/base-ui/issues/3534#issuecomment-3708536480 is not solved). So how about we update the demo to showcase 1. is solved?

In practice, it seems that we need to change the component's implementation:

- Hovering state isn't about when the scrollbar itself is hovered
- There is no active state

## Benchmarks

- Linear: does this wrong:
But Linear Docs' left nav does this well: https://linear.app/docs. The source:

```css
[data-custom-scrollbar]: :-webkit-scrollbar-thumb:hover {
--scrollbar-color:var(--scrollbar-color-hover)
}

[data-custom-scrollbar]: :-webkit-scrollbar-thumb:active {
--scrollbar-color:var(--scrollbar-color-active)
}
```

- https://www.radix-ui.com/primitives/docs/components/scroll-area. The demo seems broken. But the docs side nav does it well:

https://github.com/user-attachments/assets/24f995fa-a6bb-4908-b7ed-f59de0f38761

- https://mantine.dev/core/scroll-area/ demonstrates the hover style, but not the active style.

Overall, I suspect that this component won't be needed in 2-3 years, the platform will fix this. So I don't know if we should spend time on this.

- https://ui.shadcn.com/docs/components/scroll-area does this wrong.