/* =====================================================================
   subst.css — 代入のアニメーションと、あとで使う式の付箋。

   公式に何を入れたのかは、**値が文字のところへ入っていく**のを見せるのが
   いちばん早い。文字の下に矢印を出し、値がそれを昇って文字に重なる。

   あとで使う式（① の結果など）は、出したら消さずに余白へ貼っておき、
   使う瞬間に**その付箋が式の中へ飛び込む**。どれを入れたのかが目で分かる。
   ===================================================================== */

/* ---------------- あとで使う式の付箋 ---------------- */
/* 付箋は**右側**に貼る。左は高さの ↕ 矢印とその札で埋まっている
   （左に置いていたとき、h の矢印の頭が付箋の下に隠れた） */
#memos {
  position: absolute; right: 14px; top: 74px; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.memo {
  display: flex; align-items: center; gap: 8px;
  transform-origin: right center;
  padding: 6px 12px 6px 8px;
  background: rgba(255, 255, 255, .94);
  border: 2px solid #fbbf24;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
  white-space: nowrap;
}
.memo-tag {
  font-weight: 900; font-size: 15px; color: #fff;
  background: #f59e0b; border-radius: 8px; padding: 1px 8px;
}
.memo-tex { font-size: 21px; color: #1f2937; }
body[data-orient="landscape"] .memo-tex { font-size: 18px; }
/* 横版は右が板なので、右上に貼ると**板の 1 行目に乗る**（実際に乗った）。
   板の下側は空いているので、そこへ回す。飛び込む先も板の中なので動きが短い。 */
/* 横に並べる。縦に積むと、分数を含む付箋 2 枚で 200px 近くを食い、
   そのぶん板が痩せて本文が読めない大きさまで縮む（実測 26px）。
   板は横に広いので、横並びなら空ける高さは 1 枚ぶんで済む。 */
body[data-orient="landscape"] #memos {
  top: auto; bottom: 16px;
  flex-direction: row; align-items: flex-end; gap: 10px;
}

/* ---------------- 代入のアニメーション ---------------- */
.subst-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }

/* 入る値。文字の下から昇ってきて、文字に重なる */
.sub-chip {
  position: absolute; transform: translate(-50%, -50%);
  font-weight: 800; white-space: nowrap;
  padding: 1px 7px; border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}
/* 文字を指す矢印 */
.sub-arrow { position: absolute; width: 3px; border-radius: 2px; transform: translateX(-50%); }
.sub-arrow i {
  position: absolute; left: -6px; top: -9px;
  width: 0; height: 0;
  border-left: 7.5px solid transparent; border-right: 7.5px solid transparent;
}