サイズと形の見本

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「サイズと形の見本」の効果を追加してください。

# 追加してほしい効果
サイズと形の見本（バッジ & アバター）
XSからXLまで5段階のサイズと、円・角丸・四角の3つの形状バリエーションを一枚のカードにまとめた見本帳。カーソルを乗せると軽く浮き上がり、影が濃くなります。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- サイズと形の見本: XS〜XLの5段階サイズと、円・角丸・四角の3形状バリエーション -->
<div class="stage">
  <section class="panel">
    <h2 class="panel__title">サイズ</h2>
    <ul class="scale" aria-label="アバターのサイズ一覧">
      <li class="scale__item">
        <span class="avatar avatar--xs" aria-hidden="true">A</span>
        <span class="scale__label">XS</span>
      </li>
      <li class="scale__item">
        <span class="avatar avatar--s" aria-hidden="true">A</span>
        <span class="scale__label">S</span>
      </li>
      <li class="scale__item">
        <span class="avatar avatar--m" aria-hidden="true">A</span>
        <span class="scale__label">M</span>
      </li>
      <li class="scale__item">
        <span class="avatar avatar--l" aria-hidden="true">A</span>
        <span class="scale__label">L</span>
      </li>
      <li class="scale__item">
        <span class="avatar avatar--xl" aria-hidden="true">A</span>
        <span class="scale__label">XL</span>
      </li>
    </ul>

    <h2 class="panel__title">形</h2>
    <ul class="scale" aria-label="アバターの形状一覧">
      <li class="scale__item">
        <span class="avatar avatar--m avatar--circle" aria-hidden="true">円</span>
        <span class="scale__label">円形</span>
      </li>
      <li class="scale__item">
        <span class="avatar avatar--m avatar--rounded" aria-hidden="true">角</span>
        <span class="scale__label">角丸</span>
      </li>
      <li class="scale__item">
        <span class="avatar avatar--m avatar--square" aria-hidden="true">四</span>
        <span class="scale__label">四角</span>
      </li>
    </ul>
  </section>
</div>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  font-family: "Hiragino Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(99, 102, 241, .18) 0%, transparent 42%),
    radial-gradient(circle at 90% 92%, rgba(56, 189, 248, .14) 0%, transparent 45%),
    #10131c;
  color: #e2e8f0;
}

.panel {
  width: 100%;
  max-width: 460px;
  display: grid;
  gap: 18px;
  padding: 28px 30px 32px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .7);
}

.panel__title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, .5);
}
.panel__title:not(:first-child) {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.scale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
}

.scale__item {
  display: grid;
  justify-items: center;
  gap: 8px;
}

/* アバター本体: 既定は円形。サイズはモディファイアで、形はさらに上書きする */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(155deg, #7dd3fc 0%, #6366f1 100%);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.scale__item:hover .avatar {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 18px 34px -12px rgba(99, 102, 241, .55);
}

.avatar--xs { width: 26px; height: 26px; font-size: 9px; }
.avatar--s  { width: 34px; height: 34px; font-size: 11px; }
.avatar--m  { width: 48px; height: 48px; font-size: 15px; }
.avatar--l  { width: 64px; height: 64px; font-size: 20px; }
.avatar--xl { width: 88px; height: 88px; font-size: 28px; }

/* 形状バリエーション: すべて同じ M サイズで比較する */
.avatar--circle  { border-radius: 50%; }
.avatar--rounded { border-radius: 26%; }
.avatar--square  { border-radius: 10%; }

.scale__label {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(226, 232, 240, .55);
}

@media (prefers-reduced-motion: reduce) {
  .avatar { transition: box-shadow .35s ease; }
  .scale__item:hover .avatar { transform: none; }
}

@media (max-width: 480px) {
  .panel { padding: 22px 18px 26px; }
  .scale { gap: 14px; }
}

【JavaScript】
// このデモは静的なCSSのみで完結するためJSは不要です。

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。