タイプライター Typewriter

「タイプライター（Typewriter）」の動きを実装してください。
OmochiX Learn の動く見本 #005（テキスト・数字）です。

頼み方の例: キャッチコピーをタイプライターで出して。1文字あたり80msくらいで、右端にカーソルを点滅させて。
どんな動きか: 1文字ずつ打ち込まれる
見本で起きること: 「Hello, OmochiX」が1文字ずつ現れ、カーソルが点滅します。打ち終わると少し止まり、また最初から繰り返します。
仕様:
- 等幅フォントで width: 0 → Nch を steps(N) で伸ばす（Nは文字数）
- 1文字あたり約80ms（14文字なら約1.1秒）
- 右端に細いボーダーをカーソルとして置き、0.7秒周期で点滅させる
- 日本語は文字幅が揃わないので、JSで1文字ずつ追加する方式に切り替える
使いどころ: ヒーローのキャッチコピー、ターミナル風の演出、AIが返事をしている表現。
調整した値:
- 打ち始めから次の周に入るまでの1周期は3.2s（既定）
- カーソルは0.7sごとに点滅する（既定）
- カーソルの色: #6e4bff（既定）
- 文字の大きさは26px（既定）

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

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

<!-- タイプライター (Typewriter) | OmochiX Learn 動く見本 #005 | https://omochix.com/learn/motion/typewriter/ -->

<style>
.tw{margin:0;font:600 var(--p-size,26px)/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);white-space:nowrap;overflow:hidden;width:14ch;border-right:3px solid var(--p-color,var(--primary));animation:tw-type var(--p-cycle,3.2s) steps(14) infinite,tw-caret var(--p-blink,.7s) step-end infinite}
@keyframes tw-type{0%{width:0}60%,100%{width:14ch}}
@keyframes tw-caret{50%{border-color:transparent}}
</style>

<p class="tw">Hello, OmochiX</p>