:root {
  --ac-blue: #3e95ba; --ac-blue-mid: #2b6f92; --ac-blue-dark: #1e5573; --ac-navy: #1a4760; --ac-blue-soft: #c9e0ec; --ac-blue-pale: #e8f2f7;
  --ac-rose: #cc4179; --ac-rose-dark: #ad1457; --ac-rose-soft: #efadc6; --ac-rose-pale: #fbeaf0;
  --ac-green: #3b8168; --ac-green-pale: #e9f6f1; --ac-amber: #bb893e; --ac-amber-pale: #f8f1e8;
  --ac-ink: #333a40; --ac-mute: #7d8790; --ac-grid: #d3dbe1; --ac-paper: #ffffff;
  --ac-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
}
/* yamlab.jp で、スライドの動く図（public/widgets/*.js）を置くための枠（2026-10-21）。
 * スライドでは section の字の大きさ 30px を基準に em で書いてあるので、枠の字の大きさで合わせる */
.yw { font-size: 26px; line-height: 1.5; color: var(--ac-ink); }
.yw .widget { position: relative; margin: 0 auto; }
.yw .widget button { font: inherit; font-size: 0.62em; font-weight: 700; padding: 0.12em 0.75em; border: 2px solid var(--ac-blue-soft); border-radius: 0.5em; background: var(--ac-paper); color: var(--ac-navy); cursor: pointer; line-height: 1.5; }
.yw .widget button:hover { border-color: var(--ac-blue); }
.yw .widget button.on { background: var(--ac-blue); border-color: var(--ac-blue); color: #fff; }
.yw .widget .badge { position: absolute; top: -0.9em; left: 0.8em; font-size: 0.45em; font-weight: 700; color: #fff; background: var(--ac-rose); border-radius: 1em; padding: 0.05em 0.8em; line-height: 1.6; z-index: 1; }
/* 図は枠の幅に合わせて縮める（クリックの位置は各部品が表示の幅との比で直す） */
.yw canvas { max-width: 100% !important; height: auto !important; }

/* ---- firefly（slides/widgets/firefly.css から） ---- */
/* ホタルの光の色を変えてみる（widgets/firefly.js）。半分の幅の段に置く前提で、全体 540 × 400 px 以内（実寸は約 540 × 380） */
.yw .widget.firefly { box-sizing: border-box; width: 540px; max-width: 100%; padding: 12px 11px 8px; border-radius: 0.8em; background: var(--ac-paper); box-shadow: 0 4px 18px rgba(30,85,115,0.13); border: 1.5px solid var(--ac-blue-pale); line-height: 1.4; }
.yw .firefly .ff-canvas { display: block; margin: 0 auto; border-radius: 8px; }
.yw .firefly .ff-range { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.yw .firefly .ff-lab { font-size: 0.55em; font-weight: 700; color: var(--ac-navy); white-space: nowrap; }
.yw .firefly .ff-end { font-size: 0.48em; font-weight: 700; color: var(--ac-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.yw .firefly input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 12px; margin: 0; border-radius: 6px; cursor: pointer; }
.yw .firefly input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--ac-navy); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.yw .firefly input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--ac-navy); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.yw .firefly .ff-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.yw .firefly .ff-btns button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.15em 0.2em 0.2em; line-height: 1.25; font-size: 0.53em; min-width: 0; }
.yw .firefly .ff-btns button b { font-weight: 700; white-space: nowrap; }
.yw .firefly .ff-btns button small { font-size: 0.86em; font-weight: 500; white-space: nowrap; color: var(--ac-mute); }
.yw .firefly .ff-btns button.on small { color: #fff; }
.yw .firefly .ff-cap { margin: 6px 0 0; text-align: center; font-family: var(--ac-round); font-size: 0.6em; font-weight: 700; color: var(--ac-navy); line-height: 1.35; }

/* ---- mof（slides/widgets/mof.css から） ---- */
/* MOF が CO₂ だけをつかまえる（widgets/mof.js）。半分の幅の段に置く前提で、全体 540 × 400 px 以内（実寸は約 540 × 385） */
.yw .widget.mof { box-sizing: border-box; width: 540px; max-width: 100%; padding: 12px 11px 8px; border-radius: 0.8em; background: var(--ac-paper); box-shadow: 0 4px 18px rgba(30,85,115,0.13); border: 1.5px solid var(--ac-blue-pale); line-height: 1.4; }
.yw .mof .mof-nobel { position: absolute; top: -0.9em; right: 0.8em; font-size: 0.45em; font-weight: 700; color: var(--ac-navy); background: var(--ac-amber-pale); border: 1.5px solid var(--ac-amber); border-radius: 1em; padding: 0 0.8em; line-height: 1.6; }
.yw .mof .mof-read { display: flex; justify-content: center; gap: 0 26px; height: 34px; align-items: center; }
.yw .mof .mof-read-item { display: flex; align-items: center; gap: 6px; }
.yw .mof .mof-ic svg { display: block; }
.yw .mof .mof-read-lab { font-size: 0.55em; font-weight: 700; color: var(--ac-navy); }
.yw .mof .mof-num { font-family: var(--ac-round); font-weight: 900; font-size: 1.05em; line-height: 1; min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums; }
.yw .mof .mof-read-co2 .mof-num { color: var(--ac-rose-dark); }
.yw .mof .mof-read-n2 .mof-num { color: var(--ac-blue-mid); }
.yw .mof .mof-canvas { display: block; margin: 4px auto 0; border-radius: 8px; border: 1.5px solid var(--ac-blue-soft); }
.yw .mof .mof-ctrl { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.yw .mof .mof-lab { font-size: 0.55em; font-weight: 700; color: var(--ac-navy); }
.yw .mof .mof-end { font-size: 0.48em; font-weight: 700; color: var(--ac-mute); white-space: nowrap; }
.yw .mof .mof-ctrl button { font-size: 0.52em; padding: 0.12em 0.6em; white-space: nowrap; }
.yw .mof input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 80px; height: 10px; margin: 0; border-radius: 5px; background: linear-gradient(to right, var(--ac-blue-soft), var(--ac-blue)); cursor: pointer; }
.yw .mof input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--ac-navy); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.yw .mof input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--ac-navy); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.yw .mof .mof-cap { margin: 6px 0 0; text-align: center; font-family: var(--ac-round); font-size: 0.6em; font-weight: 700; color: var(--ac-navy); line-height: 1.35; }

/* ---- スマホ（幅 600 px 未満）：操作の欄を縦に並べる ---- */
@media (max-width: 600px) {
  .yw { font-size: 24px; }
  .yw .widget.firefly, .yw .widget.mof { width: 100%; padding-left: 8px; padding-right: 8px; }
  .yw .firefly .ff-btns { grid-template-columns: 1fr; }
  .yw .firefly .ff-btns button { flex-direction: row; justify-content: center; gap: 0.5em; }
  .yw .mof .mof-ctrl { flex-wrap: wrap; }
  .yw .mof .mof-ctrl input[type=range] { flex-basis: 100%; order: -1; }
  .yw .mof .mof-read { gap: 0 14px; }
}

/* ---- dock（slides/widgets/dock.css から。2026-10-21） ---- */
/* ドッキング・パズル（widgets/dock.js）。スライドでは canvas の右に操作の欄（全体 約 1118 px）だったのを、サイトでは canvas の下に置く。
 * 本文 736 px：canvas 720×404 がほぼ等倍。置き場所が 600 px 未満なら、JS が root に dock-narrow を付けて canvas を 388×352 に切り出し、
 * 図の題（.dock-figtitle）と凡例（.dock-legend）を canvas の外に出す。字の大きさは px（スライドと同じ値） */
.yw .widget.dock { box-sizing: border-box; width: 738px; max-width: 100%; padding: 12px 8px 10px; border-radius: 0.8em; background: var(--ac-paper); box-shadow: 0 4px 18px rgba(30,85,115,0.13); border: 1.5px solid var(--ac-blue-pale); line-height: 1.4; }
.yw .dock .dock-canvas { display: block; margin: 0 auto; border-radius: 12px; }
.yw .dock .dock-figtitle, .yw .dock .dock-legend { display: none; }
.yw .dock.dock-narrow .dock-figtitle { display: block; margin: 4px 0 6px; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ac-navy); }
.yw .dock.dock-narrow .dock-legend { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ac-navy); }
.yw .dock .dock-legend i { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; background: var(--ac-blue); }
.yw .dock .dock-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px 18px; align-items: center; margin-top: 12px; padding: 0 6px; }
.yw .dock .dock-ctrl { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.yw .dock .dock-mission { font-family: var(--ac-round); font-weight: 900; font-size: 19px; line-height: 1.3; color: var(--ac-rose-dark); }

/* 候補のボタン（2×2） */
.yw .dock .dock-cands { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.yw .dock button.dock-cand { display: flex; align-items: center; gap: 6px; height: 60px; padding: 3px 4px; text-align: left; font-size: 15px; line-height: 1.3; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.yw .dock button.dock-cand:hover { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(30,85,115,0.18); }
.yw .dock button.dock-cand.on { background: var(--ac-blue-pale); border-color: var(--ac-blue); color: var(--ac-navy); }
.yw .dock .dock-prev { position: relative; flex: 0 0 62px; height: 50px; background: var(--ac-blue-pale); border-radius: 8px; }
.yw .dock button.dock-cand.on .dock-prev { background: #fff; }
.yw .dock .dock-prev canvas { display: block; }
.yw .dock .dock-key { position: absolute; left: -3px; top: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ac-navy); color: #fff; font-size: 13px; line-height: 20px; text-align: center; font-weight: 900; }
.yw .dock .dock-cand-name { min-width: 0; }

/* 回す・全部ためす */
.yw .dock .dock-ops { display: flex; gap: 6px; }
.yw .dock .dock-ops button { flex: 1; font-size: 17px; padding: 4px 6px; }

/* 変異のトグル */
.yw .dock .dock-drug { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ac-navy); line-height: 1.4; }
.yw .dock button.dock-mut { font-size: 20px; padding: 7px 10px; border-color: var(--ac-rose); color: var(--ac-rose-dark); background: var(--ac-rose-pale); }
.yw .dock button.dock-mut:hover { border-color: var(--ac-rose-dark); }
.yw .dock button.dock-mut.on { background: var(--ac-paper); color: var(--ac-navy); border-color: var(--ac-blue-soft); }

/* 点数の板 */
.yw .dock .dock-score { background: var(--ac-blue-pale); border-radius: 12px; padding: 8px 12px 6px; display: flex; flex-direction: column; gap: 4px; }
.yw .dock .dock-row { display: flex; align-items: center; gap: 8px; }
.yw .dock .dock-lab { font-size: 15px; font-weight: 700; color: var(--ac-mute); white-space: nowrap; }
.yw .dock .dock-lab2 { margin-left: auto; }
.yw .dock .dock-stars { display: inline-flex; gap: 1px; }
.yw .dock .dock-stars i { font-style: normal; font-size: 24px; line-height: 1; color: var(--ac-blue-soft); display: inline-block; }
.yw .dock .dock-stars i.on { color: var(--ac-amber); }
.yw .dock .dock-stars i.pop { animation: dock-pop 0.35s ease-out; }
.yw .dock .dock-hb { font-family: var(--ac-round); font-weight: 900; font-size: 26px; line-height: 1.1; color: var(--ac-navy); min-width: 0.7em; text-align: right; font-variant-numeric: tabular-nums; }
.yw .dock .dock-unit { font-size: 15px; font-weight: 700; color: var(--ac-mute); }
.yw .dock .dock-bar { flex: 1; min-width: 40px; height: 16px; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--ac-blue-soft); }
.yw .dock .dock-bar i { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--ac-green); transition: background 0.3s; }
.yw .dock .dock-num { font-family: var(--ac-round); font-weight: 900; font-size: 28px; line-height: 1.1; color: var(--ac-navy); min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums; }
.yw .dock .dock-com { margin: 0; min-height: 2.6em; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--ac-navy); display: flex; align-items: center; }
.yw .dock .dock-com.good { color: var(--ac-green); }
.yw .dock .dock-com.mid { color: var(--ac-amber); }
.yw .dock .dock-com.bad { color: var(--ac-rose-dark); }
.yw .dock .dock-com.wait { color: var(--ac-mute); }
.yw .dock .dock-com.pop { animation: dock-pop-com 0.4s ease-out; transform-origin: left center; }
.yw .dock .dock-note { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ac-mute); }
.yw .dock .dock-caption { grid-column: 1 / -1; margin: 0; text-align: center; font-family: var(--ac-round); font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--ac-rose-dark); background: var(--ac-rose-pale); border-radius: 10px; padding: 6px 10px; opacity: 0; transition: none; }
@keyframes dock-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes dock-pop-com { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .yw .dock * { animation: none !important; transition: none !important; } }

/* スマホ（置き場所が 600 px 未満で JS が dock-narrow を付ける）：操作の欄を 1 列に */
.yw .widget.dock.dock-narrow { padding: 12px 6px 8px; }
.yw .dock.dock-narrow .dock-side { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 2px; }
.yw .dock.dock-narrow .dock-mission { font-size: 17px; }
.yw .dock.dock-narrow .dock-drug { font-size: 15px; }
.yw .dock.dock-narrow button.dock-mut { font-size: 18px; }
.yw .dock.dock-narrow .dock-caption { font-size: 16px; }