/* =====================================================================
   experimentLab：器具ライブラリ・組み立て・実験（熱分解など）の見た目
   ===================================================================== */
/* 器具 */
.exl-glass{fill:rgba(232,244,252,.32);stroke:#6f8a9b;stroke-width:1.6;stroke-linejoin:round}
.exl-glass-rim{fill:rgba(232,244,252,.6);stroke:#6f8a9b;stroke-width:1.2}
.exl-shine{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.6;stroke-linecap:round}
.exl-grad{stroke:#6f8a9b;stroke-width:1}
.exl-pw{stroke:rgba(0,0,0,.12);stroke-width:.6}
.exl-lq-top{fill:none;stroke:rgba(70,110,140,.55);stroke-width:1}
.exl-drop{fill:rgba(200,230,255,.9);stroke:rgba(70,120,160,.8);stroke-width:.6}
.exl-bub{fill:rgba(255,255,255,.75);stroke:rgba(90,130,160,.7);stroke-width:.5;animation:exl-bub 1.3s linear infinite}
@keyframes exl-bub{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(var(--rise,-40px));opacity:.2}}
.exl-rubber{fill:#c9572f;stroke:#7a2f15;stroke-width:1.2}
.exl-rubber-top{stroke:#e98a5f;stroke-width:2}
.exl-hole{fill:#3a1a0e}
.exl-gt-o{fill:none;stroke:#6f8a9b;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.exl-gt-i{fill:none;stroke:rgba(236,247,253,.95);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
.exl-hose-o{fill:none;stroke:#7a3416;stroke-width:11;stroke-linecap:round}
.exl-hose-i{fill:none;stroke:#c8642e;stroke-width:8;stroke-linecap:round}
.exl-st-base{fill:#2f3337;stroke:#141618;stroke-width:1.5}
.exl-st-hl{fill:#4d5359}
.exl-st-rod{fill:#b9c0c6;stroke:#5d646b;stroke-width:1.2}
.exl-cl-arm{fill:#9aa2a9;stroke:#4f565c;stroke-width:1}
.exl-cl-jaw{fill:#8d959c;stroke:#4f565c;stroke-width:1}
.exl-cl-pad{fill:#3a3a3a}
.exl-cl-boss{fill:#6b7278;stroke:#33383c;stroke-width:1.2}
.exl-cl-slot{fill:#2b2f33}
.exl-cl-knob{fill:#2f3337;stroke:#111;stroke-width:1}
.exl-wood{fill:#c99a5e;stroke:#7a5428;stroke-width:1.2}
.exl-wood2{fill:#b58748;stroke:#7a5428;stroke-width:1}
.exl-bulb{fill:#d6703e;stroke:#7a3416;stroke-width:1.2}
.exl-thumb{display:block;width:100%;height:100%}
/* 組み立て */
.exl-as{display:flex;gap:8px;align-items:stretch;background:#2a2825;padding:8px}
.exl-as-main{position:relative;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.exl-as-board{position:relative;border-radius:10px;overflow:hidden}
.exl-as-svg{display:block;width:100%;height:auto;max-height:calc(100vh - 205px);max-height:calc(100dvh - 205px);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.exl-as-wall{fill:#dfe5e3}
.exl-as-desk{fill:#3b3833}
.exl-as-edge{fill:#5b5650}
.exl-as-it.loose{filter:drop-shadow(3px 6px 4px rgba(0,0,0,.35));cursor:grab}
.exl-as-it.placed{cursor:grab}
.exl-as-it.sel>*:not(.exl-as-hit){filter:drop-shadow(0 0 3px #ffcf3a) drop-shadow(0 0 2px #ffcf3a)}
.exl-as-it.ghost{opacity:.38;pointer-events:none}
.exl-as-it.ghost *{stroke-dasharray:4 3}
/* 置く場所の黄色い枠（Ver.0.14.1） */
.exl-as-place{pointer-events:none}
.exl-as-pframe{pointer-events:none;fill:rgba(255,215,94,.14);stroke:#f0b400;stroke-width:3px;stroke-dasharray:9 6;vector-effect:non-scaling-stroke;animation:exl-pframe 1.1s ease-in-out infinite alternate}
@keyframes exl-pframe{0%{stroke-opacity:.55}100%{stroke-opacity:1}}
.exl-as-hit{fill:rgba(0,0,0,0);stroke:none;pointer-events:all}
.exl-as.locked .exl-as-it:not(.grab) .exl-as-hit{pointer-events:none}
.exl-as.locked .exl-as-it:not(.grab){pointer-events:none}
.exl-as.locked .exl-as-it.grab{cursor:grab}
.exl-as-sel{display:flex;align-items:center;gap:6px;min-height:50px;padding:4px 6px;border-radius:10px;background:#1d1f20;box-shadow:inset 0 0 0 1px #6b5526}
.exl-as-sel[hidden]{display:none}
.exl-as-sel-tip{flex:1;color:#c9bd9c;font-size:13px;line-height:1.35;padding:0 4px}
.exl-as-sel.on .exl-as-sel-tip{display:none}
.exl-as-sel-n{flex:1;min-width:0;color:#f6d98a;font-weight:700;font-size:13px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exl-as-sel:not(.on) .exl-as-sel-n{display:none}
.exl-as-sel-b{display:flex;gap:5px;flex:0 0 auto;margin-left:auto}
.exl-as-sel:not(.on) .exl-as-sel-b{opacity:.35}
.exl-as-sel button{min-width:50px;min-height:42px;padding:0 8px;border-radius:10px;border:1px solid #b98d3c;background:#3c3528;color:#f6e6bf;font-weight:700;font-size:15px;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.exl-as-sel button:disabled{cursor:default}
.exl-as-sel button.off{border-color:#e08a6c;background:#4a2b26;color:#ffe3d8}
@media (max-width:520px){
  .exl-as-sel{gap:4px;padding:4px}
  .exl-as-sel.on .exl-as-sel-n{display:none}
  .exl-as-sel-tip{font-size:12px}
  .exl-as-sel-b{gap:4px;flex:1;margin-left:0}
  .exl-as-sel-b button{flex:1;min-width:0;padding:0 2px;font-size:14px}
  .exl-as-sel:not(.on) .exl-as-sel-b{display:none}
}
.exl-as-tray{flex:0 0 190px;display:flex;flex-direction:column;min-height:0;border-radius:10px;background:#1d1f20;box-shadow:inset 0 0 0 1px #6b5526}
.exl-as-tray[hidden]{display:none}
.exl-as-tray-h{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;padding:6px 10px;color:#f3e6c4;font-weight:700;font-size:14px;border-bottom:1px solid #3a3326}
.exl-as-back{min-height:38px;padding:0 10px;border-radius:10px;border:1px solid #e0a35a;background:#4a3420;color:#ffe7c2;font-weight:700;font-size:13px;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.exl-as-back[hidden]{display:none}
.exl-as-cards{flex:1;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;align-content:start;max-height:calc(100vh - 190px)}
.exl-as-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:10px;border:1px solid #5b4a26;background:#2d2a24;color:#f1e6cc;font-size:12px;font-weight:700;line-height:1.3;cursor:grab;touch-action:none;text-align:center}
.exl-as-card svg{height:62px}
.exl-as-card.sel{border-color:#ffd75e;background:#4b3d1c;box-shadow:0 0 0 2px #ffd75e}
.exl-as-empty{grid-column:1/-1;color:#c9bd9c;font-size:13px;text-align:center;margin:8px 0}
/* たて向きのスマホ・タブレット：一覧は下。横向き（高さの小さい画面）は、一覧を右に置く */
@media (orientation:portrait) and (max-width:900px),(max-width:520px){
  .exl-as{flex-direction:column}
  .exl-as-tray{flex:0 0 auto}
  .exl-as-cards{display:flex;overflow-x:auto;overflow-y:hidden;max-height:none}
  .exl-as-card{flex:0 0 96px}
  .exl-as-card svg{height:54px}
}
.exl.is-full .exl-as{flex:1;min-height:0}
.exl.is-full .exl-as-svg{max-height:calc(100dvh - 140px)}
/* 実験の画面の切りかえ */
.exl-view[hidden]{display:none}
.exl-heat{fill:url(#exl-heatg);opacity:0;transition:opacity .4s}
.exl-heat.on{opacity:.85}
.exl-x-btn{position:absolute;left:10px;bottom:10px;z-index:20}
/* 熱分解：画面の切りかえ・結果 */
.exl-x-bar{display:flex;justify-content:flex-start;padding:6px 8px;background:#2a2825}
.exl-x-bar[hidden]{display:none}
.exl-x-bar .exl-btn{min-height:42px;font-size:15px}
.exl-res{padding:8px;background:#2a2825}
.exl-res-svg{border-radius:10px}
.exl-res-lab{font-size:18px;font-weight:700;fill:#23302d;paint-order:stroke;stroke:#fff;stroke-width:4px}
.exl-res-sm{font-size:14px;font-weight:700;fill:#f3e6c4}
.exl-res [data-k]{cursor:grab}
.exl-res [data-k="B"]{cursor:pointer}
.exl-res-tbl{width:100%;margin:8px 0 0;border-collapse:collapse;background:#fbf6e8;border-radius:10px;overflow:hidden;font-size:14.5px;line-height:1.5}
.exl-res-tbl th{background:#3a3428;color:#f3e3b8;font-weight:700;padding:6px 8px;text-align:left}
.exl-res-tbl td{padding:6px 8px;border-top:1px solid #e3d6b4;color:#2a2416}
.exl-res-tbl tr.ok td{background:#eaf6ee}
.exl-res-tbl tr.ok td:last-child{font-weight:700;color:#1f5a3c}
.exl-res-eq{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:#1f5a3c;color:#eafff2;font-weight:700;font-size:17px;text-align:center}
.exl-res-eq small{font-weight:400;font-size:14px}
@media (max-width:640px){.exl-res-tbl{font-size:12.5px}.exl-res-tbl th,.exl-res-tbl td{padding:4px 5px}}
/* 結果：スマホでは調べ方ごとのタブ */
.exl-res-tabs{display:flex;gap:6px;overflow-x:auto;padding:0 0 8px;scrollbar-width:none}
.exl-res-tabs button{flex:0 0 auto;min-height:40px;padding:0 12px;border-radius:999px;border:1px solid #8a6a2c;background:#3a3428;color:#f3e3b8;font-weight:700;font-size:13.5px;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.exl-res-tabs button.on{background:#ffd75e;color:#2a1d08;border-color:#ffd75e}
.exl-res-tabs button.done:not(.on){background:#1f5a3c;border-color:#4caf7d;color:#eafff2}
.exl-res-svg.zoom{max-height:min(62vh,560px);max-height:min(62dvh,560px)}
.exl.is-full .exl-view[data-v="results"]{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.exl-res-tbl tr.now td{background:#fff2c2;box-shadow:inset 0 0 0 9999px rgba(255,215,94,.18)}
/* 考察 */
.exl-th{margin:10px 0 0;padding:12px;border-radius:12px;background:#fbf6e8;color:#2a2416;box-shadow:0 0 0 2px #e8b630}
.exl-th-h{margin:0 0 6px;font-weight:700;font-size:15px;color:#7a5418;display:flex;justify-content:space-between}
.exl-th-h span{font-size:13px;color:#8a7a5a}
.exl-th-q{margin:0 0 10px;font-weight:700;font-size:16.5px;line-height:1.6}
.exl-th-opts{display:flex;flex-wrap:wrap;gap:8px}
.exl-th-opt{min-height:46px;padding:6px 14px;border-radius:12px;border:2px solid #b98d3c;background:#fff;color:#2a2416;font-weight:700;font-size:15.5px;cursor:pointer;touch-action:manipulation;line-height:1.35}
.exl-th-opt:hover{background:#fff6dc}
.exl-th-opt.ng{border-color:#d0603c;background:#fde9e2}
.exl-th-opt.used{opacity:.35}
.exl-th-ng{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:#fde9e2;color:#7a2a14;font-weight:700;font-size:14.5px;line-height:1.55}
.exl-th-eq{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;font-weight:700}
.exl-th-src{padding:6px 10px;border-radius:10px;background:#3a3428;color:#f3e3b8}
.exl-th-arr,.exl-th-plus{font-size:18px;color:#7a5418}
.exl-th-slot{min-width:84px;min-height:42px;padding:4px 10px;border-radius:10px;border:2px dashed #b98d3c;background:#fff;color:#8a7a5a;font-weight:700;font-size:15px;cursor:pointer}
.exl-th-slot.on{border-style:solid;color:#2a2416;background:#fff6dc}
.exl-th-go{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.exl-th-go .exl-btn[disabled]{opacity:.45;cursor:default}
.exl-th-map{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 10px}
.exl-th-from{padding:8px 16px;border-radius:12px;background:#3a3428;color:#f3e3b8;font-weight:700;font-size:16px;text-align:center}
.exl-th-from small,.exl-th-to small{display:block;font-weight:400;font-size:12.5px}
.exl-th-heat{color:#c0461c;font-weight:700}
.exl-th-to{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.exl-th-to>div{padding:8px;border-radius:12px;background:#eaf6ee;box-shadow:inset 0 0 0 2px #4caf7d;text-align:center;color:#1f3a2c}
.exl-th-to b{display:block;font-size:16px;font-weight:700}
.exl-th-to em{display:block;margin-top:4px;font-style:normal;font-size:12px;color:#5a6a5f}
.exl-th-txt{margin:0 0 8px;line-height:1.75;font-size:15px}
.exl-th-miss,.exl-th-next{margin:8px 0 0;font-weight:700}
@media (max-width:520px){.exl-th-to{grid-template-columns:1fr}.exl-th-q{font-size:15.5px}.exl-th-opt{flex:1 1 calc(50% - 8px)}}
/* 加熱：石灰水を拡大して観察する */
.exl-zoom-ask{position:absolute;right:4%;top:6%;z-index:5;min-height:48px;padding:0 16px;border-radius:999px;border:3px solid #fff;background:#e0a020;color:#2a1d08;font-weight:700;font-size:16px;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer;animation:exl-zpulse 1.2s ease-in-out infinite}
.exl-zoom-ask[hidden]{display:none}
@keyframes exl-zpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.exl-zoom{position:absolute;right:2%;top:3%;bottom:3%;width:44%;z-index:6;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:14px;background:rgba(24,26,28,.94);box-shadow:0 0 0 3px #ffd75e,0 10px 26px rgba(0,0,0,.45)}
.exl-zoom[hidden]{display:none}
.exl-zoom-h{color:#ffe7a8;font-weight:700;font-size:15px}
.exl-zoom-v{flex:1;min-height:0;border-radius:10px;overflow:hidden;background:#1d1f20}
.exl-zoom-v svg{display:block;width:100%;height:100%}
.exl-zoom-st{margin:0;color:#fff;font-weight:700;font-size:15px;line-height:1.4;min-height:2.8em}
.exl-zoom .exl-zoom-x{margin:0;min-height:44px;min-width:0}
.exl-zoom-x[hidden]{display:none}
@media (max-width:640px){.exl-zoom{position:relative;right:auto;top:auto;bottom:auto;width:auto;height:min(54vh,460px);height:min(54dvh,460px)}.exl-zoom-ask{font-size:14px;min-height:42px;padding:0 10px}}
/* 加熱：ガスバーナーを動かす持ち手 */
.exl-bh{cursor:grab}
.exl-bh-pill{fill:#e0a020;stroke:#fff;stroke-width:3}
.exl-bh-t{font-size:22px;font-weight:700;fill:#2a1d08;pointer-events:none}

/* 装置の絵は、作業画面に使える高さ（--exl-sh）に収める */
.exl-as-svg{max-height:calc(var(--exl-sh, 100dvh) - 66px)}
.exl-as.locked .exl-as-svg{max-height:calc(var(--exl-sh, 100dvh) - 16px)}
.exl.is-full .exl-as-svg{max-height:calc(var(--exl-sh, 100dvh) - 66px)}
.exl.is-full .exl-as.locked .exl-as-svg{max-height:calc(var(--exl-sh, 100dvh) - 16px)}
.exl-x-burner .exl-b-svg,.exl.is-full .exl-x-burner .exl-b-svg{height:auto;max-height:calc(var(--exl-sh, 100dvh) - 4px)}
.exl .exl-view[data-v="burner"] .exl-x-bar:not([hidden]) ~ .exl-x-burner .exl-b-svg{max-height:calc(var(--exl-sh, 100dvh) - 60px)}
.exl-res-svg{max-height:calc(var(--exl-sh, 100dvh) - 16px)}
.exl-res-svg.zoom{max-height:calc(var(--exl-sh, 100dvh) - 66px)}
@media (max-height:520px){
  .exl-as-sel{min-height:40px;padding:2px 6px}
  .exl-as-sel button{min-height:36px;font-size:14px}
  .exl-as-svg,.exl.is-full .exl-as-svg{max-height:calc(var(--exl-sh, 100dvh) - 54px)}
  .exl-x-bar{padding:3px 6px}
  .exl-x-bar .exl-btn{min-height:36px;font-size:14px}
  .exl .exl-view[data-v="burner"] .exl-x-bar:not([hidden]) ~ .exl-x-burner .exl-b-svg{max-height:calc(var(--exl-sh, 100dvh) - 48px)}
  .exl-as-tray-h{padding:3px 8px}
  .exl-as-cards{max-height:calc(var(--exl-sh, 100dvh) - 50px)}
}

/* 横向きのスマホ：器具の一覧を右に細く置く（下に置くと、画面の外にかくれる） */
@media (orientation:landscape) and (max-height:520px){
  .exl-as{gap:6px;padding:6px}
  .exl-as-tray{flex:0 0 168px}
  .exl-as-cards{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;overflow-x:hidden;overflow-y:auto}
  .exl-as-card{flex:none;padding:4px 2px;font-size:11px}
  .exl-as-card svg{height:44px}
  .exl-as-tray-h{font-size:12.5px}
  .exl-as-back{min-height:30px;padding:0 6px;font-size:11.5px}
  .exl-as-sel-tip{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .exl-as-sel button{min-width:44px;padding:0 6px}
}

@media (max-width:640px){
  .exl-as-sel{min-height:42px}
  .exl-as-sel-tip{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* 考察の式：「炭酸水素ナトリウム →」のあとに、3つの？を1行にならべる（3つに分かれたことが見てわかる） */
.exl-th-slots{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}
@media (max-width:640px){
  .exl-th-slots{display:flex;flex:1 1 100%;gap:4px}
  .exl-th-slots .exl-th-slot{flex:1 1 0;min-width:0;padding:4px 4px;font-size:14px}
  .exl-th-plus{flex:none}
}
/* 手順確認モードの終わり：安全のポイント */
.exl-safe{margin:10px 0 4px;padding:10px 12px;border-radius:12px;background:#fff4e6;box-shadow:inset 0 0 0 2px #e0a35a;text-align:left;color:#3a2410}
.exl-safe-h{margin:0 0 6px;font-weight:700;font-size:16px;color:#a5420c}
.exl-safe ol{margin:0;padding-left:1.4em;font-size:14.5px;line-height:1.6}
.exl-safe li{margin:3px 0}
.exl-safe b{color:#8a2e08}

/* 結果：石灰水を拡大して確かめる */
.exl-rzoom{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:#1d1f20;box-shadow:0 0 0 3px #ffd75e}
.exl-rzoom-h{color:#ffe7a8;font-weight:700;font-size:15px;line-height:1.45}
.exl-rzoom-svg{display:block;width:100%;height:min(52vh,440px);height:min(52dvh,440px)}
.exl-rzoom-st{margin:0;color:#fff;font-weight:700;font-size:15px;line-height:1.5}
.exl-rzoom-b{display:flex;flex-wrap:wrap;justify-content:center}
@media (max-height:520px){.exl-rzoom-svg{height:calc(var(--exl-sh, 100dvh) - 150px)}}

.exl-rzoom.light{background:#fbf8ef;box-shadow:0 0 0 3px #e8b630}
.exl-rzoom.light .exl-rzoom-h{color:#7a5418}
.exl-rzoom.light .exl-rzoom-st{color:#2a2416}
.exl-rzoom-n{display:inline-block;margin-right:8px;padding:0 8px;border-radius:999px;background:#ffd75e;color:#2a1d08;font-size:13px}
.exl-rzoom-b .exl-btn.ng{border-color:#d0603c;background:#fde9e2;color:#7a2a14}
.exl-rzoom-ng{margin:0;padding:8px 10px;border-radius:10px;background:#fde9e2;color:#7a2a14;font-weight:700;font-size:14.5px;line-height:1.5}

/* =====================================================================
   水の電気分解（Ver.0.9.0）：ホフマン式H字管・電源装置・導線・結果
   ===================================================================== */
.exl-hof-gl>*{fill:none;stroke:#6f8a9b;stroke-width:1.6}
.exl-hof-el{fill:#3b3f44;stroke:#1b1d20;stroke-width:.8}
.exl-hof-wire{stroke:#8a8f94;stroke-width:2}
.exl-hof-term{fill:#d9b65a;stroke:#6a4c16;stroke-width:1.4}
.exl-hof-tick{stroke:#4f6a7a;stroke-width:1}
.exl-hof-num{font-size:10px;font-weight:700;fill:#2f4552;paint-order:stroke;stroke:#fff;stroke-width:2.5px}
.exl-hof-cock{fill:rgba(232,244,252,.7);stroke:#6f8a9b;stroke-width:1.6}
.exl-hof-lever{fill:#2b5fa8;stroke:#163562;stroke-width:1.2}
/* 電源装置 */
.exl-ps-box{fill:#d9ddda;stroke:#5f6663;stroke-width:2}
.exl-ps-panel{fill:#c4cac7;stroke:#8d9591;stroke-width:1}
.exl-ps-meter{fill:#fbfbf3;stroke:#4a4f4c;stroke-width:1.4}
.exl-ps-arc{fill:none;stroke:#333;stroke-width:1.2}
.exl-ps-band{fill:none;stroke:#3fb36a;stroke-width:6;stroke-opacity:.75}
.exl-ps-tick{stroke:#333;stroke-width:1}
.exl-ps-num{font-size:8px;font-weight:700;fill:#333}
.exl-ps-unit{font-size:9px;font-weight:700;fill:#333}
.exl-ps-needle{stroke:#c0392b;stroke-width:1.8;stroke-linecap:round}
.exl-ps-read{font-size:10px;font-weight:700;fill:#1f3a2c}
.exl-ps-ring{fill:#e9ecea;stroke:#6c726f;stroke-width:1.2}
.exl-ps-knob{fill:#30343a;stroke:#111;stroke-width:1.4}
.exl-ps-kmark{stroke:#fff;stroke-width:3;stroke-linecap:round}
.exl-ps-lbl{font-size:8px;font-weight:700;fill:#2c3330}
.exl-ps-lbl.s{font-size:7px}
.exl-ps-swb{fill:#2c3036;stroke:#111;stroke-width:1}
.exl-ps-swk{fill:#9aa2a9;stroke:#3a3f44;stroke-width:1}
.exl-ps-swk.on{fill:#ffd75e;stroke:#8a6a14}
.exl-ps-lamp{fill:#5a1f1a;stroke:#2a0e0b;stroke-width:1}
.exl-ps-lamp.on{fill:#ff4a3a;filter:drop-shadow(0 0 3px #ff6a4a)}
.exl-ps-tp{fill:#d0302a;stroke:#6a1410;stroke-width:1.4}
.exl-ps-tm{fill:#26292c;stroke:#000;stroke-width:1.4}
.exl-ps-pm{font-size:11px;font-weight:700;fill:#222}
.exl-ps-hit{fill:rgba(0,0,0,0);stroke:none;pointer-events:all}
.exl-ps-k,.exl-ps-s{cursor:pointer;touch-action:none;outline:none}
.exl-ps-k:focus-visible .exl-ps-ring,.exl-ps-s:focus-visible .exl-ps-swb{stroke:#2d7ff9;stroke-width:3}
.exl-ps-wrap{padding:8px;background:#2a2825}
.exl-ps-svg{display:block;width:100%;height:auto;max-height:calc(var(--exl-sh, 100dvh) - 110px);border-radius:10px;background:#dfe5e3;touch-action:none;-webkit-user-select:none;user-select:none}
.exl-ps-tip{margin:6px 2px 0;color:#f3e6c4;font-size:13px;line-height:1.5}
@media (max-height:520px){.exl-ps-svg{max-height:calc(var(--exl-sh, 100dvh) - 64px)}.exl-ps-tip{display:none}}
/* 導線・クリップ */
.exl-wire{fill:none;stroke-width:5;stroke-linecap:round}
.exl-wire.r{stroke:#d0302a}
.exl-wire.b{stroke:#26292c}
.exl-h2-clip .exl-h2-cbody{stroke:#111;stroke-width:1}
.exl-h2-clip.red .exl-h2-cbody{fill:#e0473c}
.exl-h2-clip.black .exl-h2-cbody{fill:#33373b}
.exl-h2-jaw{fill:#b9c0c6;stroke:#4f565c;stroke-width:1}
.exl-h2-clip,.exl-h2-bk,.exl-h2-cock{cursor:grab}
.exl-h2-pole{font-size:15px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}
.exl-h2-pole.red{fill:#c0261c}
.exl-h2-pole.black{fill:#1d2024}
.exl-h2-tag{font-size:13px;font-weight:700;fill:#f3e6c4}
.exl-h2-stream{fill:none;stroke:rgba(150,200,235,.85);stroke-width:4;stroke-linecap:round;stroke-dasharray:6 5;animation:exl-h2-flow .5s linear infinite}
@keyframes exl-h2-flow{to{stroke-dashoffset:-11}}
.exl-h2-target{fill:#3fb36a;opacity:.55}
.exl-h2-tgt-t{font-size:11px;font-weight:700;fill:#1f6a3c}
/* 保護眼鏡 */
.exl-h2-bench{position:relative}
.exl-h2-gog{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(20,22,24,.62);border-radius:10px}
.exl-h2-gog[hidden]{display:none}
.exl-h2-gog-c{max-width:420px;padding:16px;border-radius:14px;background:#fbf6e8;color:#2a2416;text-align:center;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.exl-h2-gog-h{margin:0 0 6px;font-weight:700;font-size:17px;color:#7a5418}
.exl-h2-gog-s{margin:6px 0 0;font-size:14px;line-height:1.5}
.exl-h2-badge{position:absolute;left:8px;top:8px;z-index:4;padding:2px 10px;border-radius:999px;background:rgba(31,90,60,.88);color:#eafff2;font-weight:700;font-size:12.5px;pointer-events:none}
.exl-h2-badge[hidden]{display:none}
/* 拡大の窓（装置の画面）：明るい背景 */
.exl-h2-zoom .exl-zoom-v{background:#f4f6f5}
/* 結果 */
.exl-inc-fl{fill:#ffb02a;opacity:.95;filter:drop-shadow(0 0 4px #ffcf5a)}
.exl-smoke{fill:none;stroke:rgba(220,220,220,.55);stroke-width:1.6;stroke-linecap:round}
.exl-h2-rlab{font-size:13px}
.exl-res [data-k="tube"]{cursor:pointer}
.exl-h2-pop{transform-box:fill-box;transform-origin:50% 60%;animation:exl-h2-pop 2.4s ease-out infinite}
@keyframes exl-h2-pop{0%{transform:scale(.2);opacity:0}8%{transform:scale(1.08);opacity:1}30%{transform:scale(1);opacity:1}55%,100%{transform:scale(.9);opacity:0}}
.exl-h2-snd{display:flex;flex-wrap:wrap;justify-content:center}
.exl-h2-snd .exl-btn{min-height:40px;min-width:0;font-size:14px;padding:0 14px}
/* 考察のまとめ：2つに分かれた */
.exl-th-to.exl-th-to2{grid-template-columns:repeat(2,1fr)}
@media (max-width:520px){.exl-th-to.exl-th-to2{grid-template-columns:1fr 1fr}}
.exl-h2-bub{--rise:-72px;pointer-events:none}
.exl-h2-bubs{pointer-events:none}
.exl-res-sm.exl-h2-rlab{fill:#23302d;paint-order:stroke;stroke:#fff;stroke-width:3px}
/* 横向きのスマホ：拡大の窓を大きく（装置の画面の大部分に重ねる） */
@media (orientation:landscape) and (max-height:520px){
  .exl-h2-zoom{right:1%;top:1%;bottom:1%;width:64%;padding:5px;gap:2px}
  .exl-h2-zoom .exl-zoom-h{font-size:13px}
  .exl-h2-zoom .exl-zoom-st{font-size:13px;min-height:0}
  .exl-h2-zoom .exl-zoom-x{min-height:36px}
}
/* ---------- 塩化銅水溶液の電気分解（Ver.0.12.0） ---------- */
.exl-ce-rod{fill:#2b2c2e;stroke:#0e0f10;stroke-width:1}
.exl-ce-hl{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.6;stroke-linecap:round}
.exl-ce-plate{fill:#ece6d3;stroke:#8d8570;stroke-width:1.4}
.exl-ce-phl{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.4;stroke-linecap:round}
.exl-ce-cu{fill:#b45a2a;stroke:#7a3612;stroke-width:.8}
.exl-ce-cud circle{fill:#8a3f18}
.exl-ce-shine{fill:#f2b27a;stroke:#d48a4c;stroke-width:.6}
.exl-ce-shine2{fill:none;stroke:#fff6e6;stroke-width:1.6;stroke-linecap:round;opacity:.9}
.exl-cu-el{cursor:grab}
.exl-cu-bub{pointer-events:none}
.exl-cu-stream{stroke:rgba(60,140,220,.85)}
.exl-cu-clock{font-size:15px;font-weight:700;fill:#f3e6c4;paint-order:stroke;stroke:#2a2825;stroke-width:3px}
.exl-cu-zl{font-size:12px;font-weight:700;fill:#2a3a44}
.exl-cu-zclock{font-size:17px;font-weight:700;fill:#1f3a2c}
.exl-cu-smell{fill:none;stroke:#9cb43a;stroke-width:2.4;stroke-linecap:round;opacity:.9}
.exl-cu-bubble{fill:#fff;stroke:#7a8a90;stroke-width:1.4}
.exl-cu-wave{animation:exl-cu-wave 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes exl-cu-wave{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(-6deg)}}
.exl-sp-h{stroke:#9aa3ab;stroke-width:4;stroke-linecap:round}
.exl-sp-s{fill:#c9d0d6;stroke:#6c757d;stroke-width:1.2}
.exl-hand path,.exl-hand rect{fill:#f2c9a0;stroke:#b98a5e;stroke-width:1.2}
.exl-hand .exl-hand-c{fill:#5a8fc8;stroke:#2f5f92}
.exl-face path{fill:#f2c9a0;stroke:#b98a5e;stroke-width:1.2}
.exl-face .exl-face-e{fill:#2a2416}
.exl-face .exl-face-m{fill:none;stroke:#8a4a3a;stroke-width:1.4;stroke-linecap:round}
.exl-res [data-k="cell"],.exl-res [data-k="spa"],.exl-res [data-k="hand"],.exl-res [data-k="face"]{cursor:pointer}
.exl-h2-pole.exl-cu-pz{font-size:10px;stroke-width:2.4px}
.exl-h2-pole.exl-cu-pr{font-size:15px}
/* ---------- 酸化銀の熱分解（Ver.0.13.0） ---------- */
.exl-tr-water{fill:rgba(150,200,240,.42)}
.exl-tr-surf{fill:none;stroke:rgba(80,140,190,.8);stroke-width:1.4}
.exl-ag-front{fill:rgba(150,200,240,.22);pointer-events:none}
.exl-ag-fsurf{fill:none;stroke:rgba(80,140,190,.55);stroke-width:1.2;pointer-events:none}
.exl-ag-wf,.exl-ag-bubs{pointer-events:none}
.exl-ag-stop{cursor:grab}
.exl-ag-spot{fill:none;stroke:#ffd75e;stroke-width:2.4;stroke-dasharray:6 5;opacity:.9;pointer-events:none}
.exl-ag-tag{font-size:12px;font-weight:700;fill:#f3e6c4;paint-order:stroke;stroke:#2a2825;stroke-width:3px;pointer-events:none}
.exl-hm-h{stroke:#b07a3c;stroke-width:7;stroke-linecap:round}
.exl-hm-k{fill:#6d747b;stroke:#33383c;stroke-width:1.4}
.exl-hm-f{fill:#a9b0b7}
.exl-ct-w{fill:none;stroke:#26292c;stroke-width:2.6;stroke-linecap:round}
.exl-ct-w.r{stroke:#c0392b}
.exl-ct-pin{fill:#c9cdd2;stroke:#5d646b;stroke-width:.8}
.exl-ct-cell{fill:#2e7d4f;stroke:#174a2c;stroke-width:1.2}
.exl-ct-cellm{fill:#3b3f44}
.exl-ct-t{font-size:9px;font-weight:700;fill:#fff}
.exl-ct-glow{fill:#ffe27a;opacity:.55;filter:blur(3px)}
.exl-glass.exl-ct-on{fill:rgba(255,236,150,.95);stroke:#d9a520}
.exl-ag-paper{fill:#fbfbf8;stroke:#b9b9b0;stroke-width:1}
.exl-ag-cool{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border-radius:12px;background:#2a2825;color:#f3e6c4;text-align:center}
.exl-ag-cool svg{display:block;width:100%;max-width:520px;height:auto;max-height:46vh;touch-action:none}
.exl-ag-cool p{margin:0;font-weight:700;font-size:16px;line-height:1.5}
.exl-ag-cool .exl-ag-bar{width:min(320px,80%);height:12px;border-radius:999px;background:#4a463f;overflow:hidden}
.exl-ag-cool .exl-ag-bar i{display:block;height:100%;background:#e0a020;transition:width .3s linear}
.exl-res [data-k="o2tube"],.exl-res [data-k="tube1"],.exl-res [data-k="pre"],.exl-res [data-k="post"],.exl-res [data-k="inc"],.exl-res [data-k="spa"],.exl-res [data-k="ham"],.exl-res [data-k="ct"],.exl-ag-cool [data-k="hot"]{cursor:pointer}
.exl-ag-flash{fill:#fff6c8;opacity:.0;animation:exl-ag-flash 1.4s ease-in-out infinite}
@keyframes exl-ag-flash{0%,100%{opacity:.15}50%{opacity:.6}}

/* ---------- 鉄と硫黄が結びつく変化（Ver.0.14.0） ---------- */
.exl-rk-m{fill:#b9c0c6;stroke:#5d646b;stroke-width:1.2}
.exl-rk-m2{fill:#9ea6ad;stroke:#5d646b;stroke-width:1}
.exl-fes-glow{fill:#ff7a1a;animation:exl-fes-glow .7s ease-in-out infinite alternate}
@keyframes exl-fes-glow{0%{fill:#ff5a12}100%{fill:#ffb02e}}
.exl-fes-halo{fill:rgba(255,120,40,.3);filter:blur(3px);pointer-events:none}
.exl-fes-hot{fill:rgba(255,120,40,.5);pointer-events:none}
.exl-fes-cot ellipse,.exl-fes-cot circle,.exl-fes-cot rect{fill:#fbfbf8;stroke:#c3c2ba;stroke-width:.8}
.exl-fes-por{fill:#f4f2ec;stroke:#8f8c83;stroke-width:1.4}
.exl-fes-por2{fill:#e2dfd6;stroke:#8f8c83;stroke-width:1.2}
.exl-fes-porin{fill:#e4e0d6;stroke:#8f8c83;stroke-width:1.2}
.exl-fes-pes{stroke:#e9e6dc;stroke-width:9;stroke-linecap:round}
.exl-fes-pesh{fill:#e6e2d7;stroke:#8f8c83;stroke-width:1}
.exl-fes-pestle{transform-box:view-box}
.exl-fes-pestle.on{animation:exl-fes-grind .45s ease-in-out infinite alternate}
@keyframes exl-fes-grind{0%{transform:translateX(-7px)}100%{transform:translateX(7px)}}
.exl-fes-paper{fill:#fff;stroke:#b4b1a6;stroke-width:1}
.exl-fes-hw{fill:#c99a5e;stroke:#7a5428;stroke-width:1.2}
.exl-fes-hl{fill:none;stroke:#e6c48e;stroke-width:1.2}
.exl-fes-hj{fill:none;stroke:#79828a;stroke-width:3;stroke-linecap:round}
.exl-fes-hs{stroke:#6d757c;stroke-width:1.8}
.exl-fes-gz{fill:#a9b0b6;stroke:#5d646b;stroke-width:1}
.exl-fes-gzl{stroke:#6d757c;stroke-width:.7}
.exl-fes-gzc{fill:#f2f0ea;stroke:#b9b5aa;stroke-width:.7}
.exl-fes-mg{fill:#45484c;stroke:#1d1f21;stroke-width:1.2}
.exl-fes-mgh{fill:#73777c}
.exl-fes-tag{font-size:15px;font-weight:700;fill:#f3e6c4;paint-order:stroke;stroke:#2a2825;stroke-width:3.5px;pointer-events:none}
.exl-fes-spot{fill:none;stroke:#ffd75e;stroke-width:2.2;stroke-dasharray:5 4;pointer-events:none}
.exl-fes-ov,.exl-fes-ov *{-webkit-tap-highlight-color:transparent}
.exl-fes-b{cursor:grab}
.exl-fes-clock{font-size:15px;font-weight:700;fill:#f3e6c4;paint-order:stroke;stroke:#2a2825;stroke-width:3px;pointer-events:none}
.exl-fes-smell{fill:none;stroke:#9cb43a;stroke-width:2.4;stroke-linecap:round;opacity:.9}
.exl-fes-acid{fill:rgba(214,232,244,.75)}
.exl-th-eq .exl-th-fix{padding:6px 10px;border-radius:10px;background:#3a3428;color:#f3e3b8}
.exl-fes-model{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:4px 0 8px;font-weight:700;font-size:16px;color:#2a2416}
.exl-fes-model .at{display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-size:12.5px;font-weight:400}
.exl-fes-model .fe,.exl-fes-model .s{display:inline-block;width:26px;height:26px;border-radius:50%;vertical-align:middle}
.exl-fes-model .fe{background:#55585c;border:2px solid #2a2c2e}
.exl-fes-model .s{background:#f1d83c;border:2px solid #b6971a}
.exl-fes-model .pair{display:inline-flex}
.exl-fes-model .pair .s{margin-left:-6px}
/* 拡大の窓は左に出す（ガスバーナーと手に持った試験管が、装置の画面のまん中から右にあるため） */
.exl-fes-zoom{right:auto;left:2%}
@media (orientation:landscape) and (max-height:520px){.exl-h2-zoom.exl-fes-zoom{right:auto;left:1%;width:50%}}
@media (max-width:640px){.exl-fes-zoom{left:auto}}

/* 磁石：Aの試験管だけが、斜めになって磁石にくっつく（Ver.0.14.3） */
.exl-fes-tilt{transform-box:view-box;animation:exl-fes-tilt .7s ease-in .3s forwards}
@keyframes exl-fes-tilt{0%{transform:rotate(0)}100%{transform:rotate(-8deg)}}