/* ノートの妖精ローダー（生成物: tools/fairy-loader/gen_site.py で再生成）
   コマを横に並べた <g class="strip"> を steps() で1本スライドさせるスプライト方式。
   アニメーションが1本だけなので、コマ境界のちらつきが構造的に出ない。 */
.tnf { display: block; height: auto; }
.tnf .strip { animation: tnf-slide .8s steps(4, end) infinite; }
@keyframes tnf-slide { to { transform: translateX(-88px); } }
/* とびだす（6コマ） */
.tnf-pop .strip { animation: tnf-slide6 1.32s steps(6, end) infinite; }
@keyframes tnf-slide6 { to { transform: translateX(-132px); } }
/* エラー用: 404はゆっくり汗・500は煙ぷすぷす */
.tnf-err404 .strip { animation: tnf-slide 1.4s steps(4, end) infinite; }
.tnf-err500 .strip { animation: tnf-slide 1.6s steps(4, end) infinite; }
/* ミニノート（キャラなし・16px原画）: 画像/動画の遅延読み込みプレースホルダー用 */
.tnf-mini .strip { animation: tnf-slide-mini 1s steps(4, end) infinite; }
@keyframes tnf-slide-mini { to { transform: translateX(-64px); } }
/* お祝い用1回再生（fairyPopOnce）: 5コマ目（にっこり浮遊）で静止 */
.tnf-pop-once .strip { animation: tnf-slide-pop-once 1.1s steps(4, end) forwards; }
@keyframes tnf-slide-pop-once { to { transform: translateX(-88px); } }
@media (prefers-reduced-motion: reduce) {
  .tnf .strip { animation: none; }
  .tnf-pop-once .strip { transform: translateX(-88px); } /* にっこりコマで静止 */
}
/* サイズは幅だけ上書き（高さ自動）。キャラは22の倍数・ミニは16の倍数がくっきり */
.tnf-s44 { width: 44px; } .tnf-s66 { width: 66px; } .tnf-s88 { width: 88px; }
.tnf-s110 { width: 110px; }
.tnf-s32 { width: 32px; } .tnf-s48 { width: 48px; } .tnf-s64 { width: 64px; }
/* エラーページでの中央寄せ */
.error-page .tnf { margin: 0 auto 10px; }
/* 静止アイコン（ヘッダーのアシスタントボタン等）: アニメなし・顔だけ */
.tnf-icon { display: inline-block; width: 22px; height: auto; vertical-align: middle; }
/* 汎用: 中央寄せラッパー */
.tnf-center .tnf { margin-left: auto; margin-right: auto; }
/* 全画面ローディングオーバーレイ（showLoading）内のかきかき */
.ai-overlay-fairy .tnf { width: 66px; }
/* AIチャットの「考え中…」ぱらぱら・履歴読込のふわふわ */
.ai-chat-msg .tnf { width: 44px; margin: 0 auto 4px; }
/* ウェルカムツアー冒頭のとびだす（driver.jsの吹き出し内） */
.tour-fairy .tnf { width: 66px; margin: 2px auto 6px; }