iOS風のオン/オフスイッチ。checkbox+擬似要素+transitionの組み合わせで、ノブの移動に弾みを付けます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
checkboxはdisplay: noneではなくopacity: 0で「見えないが存在する」状態にしています（キーボードフォーカスを受けられるように）。ノブの移動はleftではなくtranslateで行い、少しオーバーシュートするcubic-bezierで「カチッ」とした手応えを演出します。:focus-visible時のoutlineをトラック側に描くことで、キーボード操作でも現在位置が分かります。
実務ではrole="switch"とaria-checkedの利用も検討してください。フォーム部品の色だけ変えたい場合はaccent-colorという1行の選択肢もあります。
checkboxをトグルスイッチの見た目にして。ノブがスライドするアニメーションをtransitionで、:checkedで状態を切り替えて。
このトグルスイッチをキーボードで操作でき、フォーカスリングも見えるようにして。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。