fix: border radius on connected button groups

[penguinencounter]

Hopefully you don't mind this PR, apologies in advance if I did it wrong! The inconsistency was bothering me.

Before:

After:

roughly copied from the commit message:

The current styling causes border radii on connected groups to be inconsistent between buttons in the middle vs buttons on the end of the group. (This is most obvious in the Appearance tab in the settings.)

This is due to how the CSS spec handles border-radius values that cause overlapping corners (ex. the ones used to create pill-shaped buttons here) - instead of only reducing the conflicting corners, all corners are reduced proportionally as needed:
https://drafts.csswg.org/css-backgrounds/#corner-overlap

This is fixed by introducing a --max-radius CSS variable that is half of the button's height, which achieves the same effect without having corner overlaps. As a bonus, we reduce the shape: "round" variants to a single one that references the variable.

Note that there could potentially still be a consistency issue if a button is less wide than tall, but that seems very unlikely.

[infi]

The affected buttons are Material 3 button groups.
Please ensure your changes comply with the spec for Material 3 button groups: https://m3.material.io/components/button-groups/specs

[penguinencounter]

@infi they should, unless the existing var(--borderRadius-[size]) values are not correct