/* 打ち込み表示（typing-text.js）。APP・WEB ページで共用。TOP のサブコピーと同じ見た目 */
.typing-text {
  display: grid;
  white-space: pre-line;
}

.typing-text .typing-ghost,
.typing-text .typing-live {
  grid-area: 1 / 1;
}

.typing-text .typing-ghost {
  visibility: hidden;
}

.typing-text .typing-prompt {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0;
  margin-right: 0.6em;
  opacity: 0.45;
}

.typing-text .typing-caret {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.12em;
  /* カーソルの幅を行の幅に数えない（カーソルだけが次の行へ落ちないように） */
  margin-right: -0.62em;
  vertical-align: -0.12em;
  background: currentColor;
  opacity: 0.55;
  animation: caret-blink 1.06s steps(1) infinite;
}

.typing-text .typing-char {
  display: inline-block;
  animation: char-stamp 0.24s ease-out;
}

.typing-text.is-typing .typing-caret {
  animation: none;
}

/* 説明文のアクセント（コードの色分け風）。白地で読める濃さに抑え、太さは変えない */
.tok-blue   { color: #2563a8; }
.tok-teal   { color: #0f7f75; }
.tok-violet { color: #7447a8; }
.tok-amber  { color: #b45f12; }
.tok-rose   { color: #b4325c; }

.tok-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: 0.02em;
}