トーストToast

「トースト（Toast）」を実装してください。

## これは何か
画面の隅に少しだけ出て、しばらくすると自分で消える短い通知。トースターからパンが飛び出す様子が由来。

## 使いどころ
- 「保存しました」のように、結果だけを短く伝えたいとき
- 作業を止めずに知らせたいとき

## 実装の要件
- position: fixed で隅に出す。role="status" を付ける
- 数秒で消す。消えたあとも履歴から読めるようにできるとなおよい
- 消えると読み直せない。重要な情報や、対処が必要なエラーには使わない
- 表示時間が短すぎると読み切れない。1行あたり3秒を目安に伸ばす
- 何個も重ねて出さない。3個を超えるならまとめて1つにする

## アクセシビリティの要件
- role="status"（aria-live="polite"）で伝える。作業を中断させない
- エラーで注意を引く必要があるときだけ role="alert" にする
- 自動で消える通知に操作ボタンを置かない。押す前に消える
- 消えるまでの時間は、ホバーやフォーカスの間は止める

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-toast" role="status">
  <i class="fa-solid fa-circle-check x-toast__i" aria-hidden="true"></i>
  <span>下書きを保存しました</span>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-toast,
.x-toast *:not([class*="fa-"]),
.x-toast *:not([class*="fa-"])::before,
.x-toast *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-toast {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: 8px;
  background: #1b2028;
  color: #fff;
  font-size: 12.5px;
}
.x-toast__i {
  color: #6ee7a8;
  font-size: 13px;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。