图标切换

图标由三条独立的 span 横杆拼成，激活态靠 transform（rotate ±45° + translate 平移）与 width 缩短重新拼合成 ‹ 形箭头——比 SVG path 插值实现更简单，且每根杆都是独立可调的实体元素。

变形只动 transform 与 width 两类属性；width 变化会触发少量重排，但元素只有 34×2px，开销可忽略；如追求极致可整段改用 scaleX 压缩杆长。

位移量全部用 calc 从 --bar_w / --gap 推导（如上下杆 translateY = ∓gap × 0.4），调长度或间距参数时箭头拼合自动保持正确形状，不会散架。

状态由 aria-pressed 属性选择器驱动，键盘 Enter/Space 与点击等价；:focus-visible 提供可见焦点圈，aria-label 语义随状态翻转由页面脚本补足。

grid + gap 布局三条杆，间隙本身就是参数；按钮容器 64px 固定，杆变形不会引起布局抖动。

reduced-motion：过渡压到 0.01ms，形状直接切换、无中间动画。