トースト通知 Toast notification

「トースト通知（Toast notification）」の動きを実装してください。
OmochiX Learn の動く見本 #011（UIパーツの動き）です。

頼み方の例: 保存したときのトースト通知を作って。下から0.4秒で滑り込んで、3秒たったら同じ方向に消えて。
どんな動きか: 画面の端から通知が滑り込む
見本で起きること: 「保存しました」の通知が下から滑り込み、数秒とどまってから同じ方向へ消えます。
仕様:
- 画面下中央に固定（position: fixed; bottom: 24px）
- 登場は translateY(40px)→0 と不透明度0→1 を約0.4秒、cubic-bezier(.22,1,.36,1)
- 3秒後に逆方向へ退場。ホバー中は退場を止める
- role="status" aria-live="polite" を付けて読み上げに対応する
使いどころ: 保存・送信・コピー完了など、操作の結果を短く知らせるとき。
調整した値:
- 出てから消えるまでの1周期は3.6s（既定）
- 下からの移動量は40px（既定）
- アイコンの色: #2fb37a（既定）
- 動き方は「やわらか」（既定）

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

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

<!-- トースト通知 (Toast notification) | OmochiX Learn 動く見本 #011 | https://omochix.com/learn/motion/toast/ -->

<style>
.ts{position:absolute;left:50%;bottom:18px;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;background:var(--text);color:var(--bg);font:600 15px/1 system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.2);animation:ts var(--p-cycle,3.6s) var(--p-ease,cubic-bezier(.22,1,.36,1)) infinite}
.ts__icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--p-color,#2fb37a);color:#fff;font-size:13px}
@keyframes ts{0%{transform:translate(-50%,var(--p-distance,40px));opacity:0}12%,75%{transform:translate(-50%,0);opacity:1}88%,100%{transform:translate(-50%,var(--p-distance,40px));opacity:0}}
</style>

<div class="ts"><span class="ts__icon">✓</span>保存しました</div>