トグルスイッチ Toggle switch

「トグルスイッチ（Toggle switch）」の動きを実装してください。
OmochiX Learn の動く見本 #009（UIパーツの動き）です。

頼み方の例: 設定画面のトグルスイッチに切り替えアニメーションを付けて。つまみは少し跳ねる感じで0.25秒。
どんな動きか: つまみが滑ってON/OFFが切り替わる
見本で起きること: スイッチのつまみが右へ滑り、同時に背景がアクセントカラーに変わります。1.6秒ごとにON/OFFを繰り返します。
仕様:
- つまみは transform: translateX で移動（leftを使わない）
- 移動は約0.25秒、cubic-bezier(.34,1.4,.64,1) で少し跳ねる
- トラックの背景色は同時にグレー→アクセントカラーへ
- 実装は <input type="checkbox"> + label にして、キーボードとスクリーンリーダーで操作できるようにする
使いどころ: 設定のON/OFF、通知の切り替え、ダークモードスイッチ。
調整した値:
- OFF→ON→OFFの1周期は3.2s（既定）
- ONの色: #6e4bff（既定）
- ノブの弾み方は「少し」（既定）

実装の条件:
- HTML / CSS（必要なら素のJavaScript）で、外部ライブラリは使わない
- 見本の形・タイミング・イージングの数値はそのまま使い、文字・色・素材だけ今作っているものに合わせる
- prefers-reduced-motion: reduce の環境では動きを止めるか最小限にする
- 使った技術: CSS

見本（動くプレビューと参考コード）: https://omochix.com/learn/motion/toggle-switch/

<!-- トグルスイッチ (Toggle switch) | OmochiX Learn 動く見本 #009 | https://omochix.com/learn/motion/toggle-switch/ -->

<style>
.tg{position:relative;width:84px;height:46px;border-radius:23px;background:var(--line);animation:tg-track var(--p-cycle,3.2s) ease-in-out infinite}
.tg__knob{position:absolute;top:4px;left:4px;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);animation:tg-knob var(--p-cycle,3.2s) var(--p-bounce,cubic-bezier(.34,1.4,.64,1)) infinite}
@keyframes tg-track{0%,40%{background:var(--line)}50%,90%{background:var(--p-color,var(--primary))}100%{background:var(--line)}}
@keyframes tg-knob{0%,40%{transform:translateX(0)}50%,90%{transform:translateX(38px)}100%{transform:translateX(0)}}
</style>

<div class="tg" role="img" aria-label="トグルスイッチ"><span class="tg__knob"></span></div>