/* 記事の中の「★自分で動かす」ブロックの共通スタイル。
   ドラッグで数値を変えて変化を観る版（gallery/assets/*-live.js）を持つ記事が共有する。
   配色は収蔵室と同じ 藍 #35508c × 生成り #f3eee2。 */
.live { margin-top: 14px; padding: 16px; background: #f3eee2; border-radius: 12px; }
.live-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.live-tabs button {
  font: inherit; font-size: 13px; padding: 7px 14px; border: 1px solid #d8cfb8;
  background: #faf8f4; color: #5a6372; border-radius: 999px; cursor: pointer;
}
.live-tabs button.on { background: #35508c; border-color: #35508c; color: #fff; }
.live-body { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; align-items: flex-start; }
.live-body svg { width: 320px; max-width: 100%; height: auto; background: #faf8f4; border-radius: 8px; flex: 0 0 auto; }
.live-ctl { flex: 1 1 250px; min-width: 230px; }
.live-ctl label { display: block; font-size: 13px; color: #1f2a3d; margin-bottom: 12px; }
.live-ctl input[type=range] { width: 100%; margin-top: 6px; accent-color: #35508c; }
.live-ctl output { font-variant-numeric: tabular-nums; color: #35508c; font-weight: 600; }
.live-ctl .live-preset { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.live-ctl .live-preset button, .live-preset button {
  font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid #d8cfb8;
  background: #faf8f4; color: #5a6372; border-radius: 999px; cursor: pointer;
}
/* 選ばれているものは塗る（タブと同じ扱い。ここが抜けていて、押しても見た目が変わらなかった） */
.live-preset button.on { background: #35508c; border-color: #35508c; color: #fff; }
.live-out { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 14px;
  font-size: 13px; border-top: 1px solid #e2dccd; padding-top: 12px; }
.live-out dt { font-weight: 600; color: #5a6372; margin: 0; }
.live-out dd { color: #1f2a3d; margin: 0; font-variant-numeric: tabular-nums; }
.hint { font-size: 12.5px; line-height: 1.75; color: #5a6372; margin-top: 8px; }