/* ========================================
   場面をまたいで使う部品（見出し・札・二つの道具の色分け）
   各場面の CSS で大きさを変えてよい。色と形はここでそろえる。
   ======================================== */

.kicker {
  justify-self: start;
  padding: 6px 14px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.22em;
  border-radius: 999px;
}

.kicker.is-claude {
  background: var(--claude);
}

.title {
  font-size: 58px;
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

/* 蛍光ペンの線（文字の下半分だけ塗る） */
.marker {
  background: linear-gradient(transparent 60%, var(--marker) 60%);
  font-style: normal;
}

/* 丸い札に入れた道具のアイコン（SVG は currentColor で色を受ける） */
.badge {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
}

.badge svg {
  width: 40px;
  height: 40px;
}

.is-gpt .badge {
  background: var(--gpt-soft);
  color: var(--gpt);
}

.is-claude .badge {
  background: var(--claude-soft);
  color: var(--claude);
}

/* 描く線の共通設定（pathLength="1" と組み合わせて、線を 0 → 1 で描く） */
.d {
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}