分段控件

滑块是独立的绝对定位层，left/width 由 JS 写入 --thumb_x / --thumb_w 两个 CSS 变量，transition 只挂在这两个属性上；变量内联在容器上，任何选中项切换都只是一次样式写入。

滑块 left/width 会触发重排，但控件面积小、动画 300ms，实测无感；若追求纯合成器可改 transform:translateX + 固定等宽分段（本实现选择宽度自适应文字，语义价值更高）。

选中态用 role=tablist/tab + aria-selected 语义，键盘 ←/→ 切换并聚焦，Tab 键进入控件；滑块初始定位用 transition 置 none 的无动画落位，避免页面加载时滑块从 0 飞入。

滑块颜色用 color-mix 与强调色混合出顶部高光渐变与投影，改一个 --accent 全部联动；圆角参数同步推导内外两层圆角。

窗口 resize 后按当前选中项无动画重定位，防止滑块错位。

reduced-motion：过渡压到 0.01ms，滑块瞬时跳到目标段；预览自动演示同步停发（由 JS matchMedia 判断）。