/* =====================================================================
   experimentLab：共通の見た目（枠・ボタン・メッセージ・ヒント・全画面）
   すべて .exl の中だけに効く（テーマやほかのプラグインの見た目を変えない）。
   ===================================================================== */
.exl-root{margin:1.2em 0;clear:both}
.exl-wait{padding:2.4em 1em;text-align:center;color:#6b6a62;background:#f1eee6;border-radius:14px;font-size:15px}
.exl-err{padding:.8em 1em;border:2px solid #d63638;border-radius:8px}
.exl,.exl *{box-sizing:border-box}
.exl{--exl-ink:#1f2422;--exl-panel:#2b2d2e;--exl-brass:#b98d3c;--exl-brass2:#e2c17a;--exl-paper:#f4f0e6;--exl-ok:#2f8f5b;--exl-ng:#c0392b;--exl-warn:#d9822b;
  position:relative;width:100%;max-width:1180px;margin:0 auto;border-radius:16px;overflow:hidden;background:var(--exl-paper);color:var(--exl-ink);
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","BIZ UDPGothic","Meiryo",system-ui,sans-serif;font-size:16px;line-height:1.55;
  box-shadow:0 0 0 1px rgba(0,0,0,.12),0 6px 18px rgba(0,0,0,.12);-webkit-text-size-adjust:100%;text-align:left}
.exl button{font-family:inherit;margin:0;-webkit-tap-highlight-color:transparent}
.exl.exl-bare{border-radius:12px;box-shadow:none}
.exl-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding:8px 12px;background:linear-gradient(#34373a,#26282a);color:#f3e6c4;border-bottom:2px solid var(--exl-brass)}
.exl-title{font-weight:700;font-size:17px;letter-spacing:.04em;min-width:0}
.exl-tools{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.exl-tool{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--exl-brass);background:#3c3528;color:#f6e6bf;font-size:14.5px;font-weight:700;cursor:pointer;line-height:1;white-space:nowrap}
.exl-tool:hover{filter:brightness(1.12)}
.exl-tool:focus-visible{outline:3px solid #ffe28a;outline-offset:2px}
.exl-tool.on{background:var(--exl-brass2);color:#2a1d08}
.exl-tool.exl-t-hint{background:#4b3d1c}
.exl-tool.exl-t-hint.on{background:#ffd75e;color:#2a1d08;border-color:#ffd75e}
.exl-stage{position:relative;width:100%}
/* メッセージ（手順ちがい・危険・成功・ようす） */
.exl-say{position:absolute;left:0;right:0;top:58px;z-index:40;display:flex;justify-content:center;pointer-events:none;padding:0 10px}
.exl.exl-bare .exl-say{top:8px}
.exl-msg{max-width:min(92%,620px);padding:10px 18px;border-radius:12px;font-weight:700;font-size:16.5px;line-height:1.5;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.25);animation:exl-in .25s ease-out;background:#2e3a3a;color:#fff}
.exl-msg.ng{background:#4a2b26;color:#ffe3d8;border:2px solid #e08a6c}
.exl-msg.warn{background:#7a2e12;color:#fff2e6;border:2px solid #ffb37a}
.exl-msg.ok{background:#1f5a3c;color:#eafff2;border:2px solid #8fe0b0;font-size:18px}
.exl-msg.info{background:rgba(32,40,40,.92);color:#f2f5ef}
.exl-msg.out{opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s}
@keyframes exl-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.exl.exl-shake .exl-stage{animation:exl-shake .35s}
@keyframes exl-shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* ヒント */
.exl-guide{position:absolute;inset:0;z-index:30;pointer-events:none}
.exl-guide[hidden]{display:none}
.exl-garrow{position:absolute;left:0;top:0;overflow:visible}
.exl-gline{fill:none;stroke:#ffcf3a;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55))}
.exl-gline.move{stroke-dasharray:10 9;animation:exl-dash 0.9s linear infinite}
.exl-gline.point{animation:exl-poke 1s ease-in-out infinite}
.exl-gline.rot{stroke:#fff06a;stroke-width:5.5}
.exl-ghead{fill:#ffcf3a}
.exl-gring{fill:rgba(255,215,80,.13);stroke:#ffcf3a;stroke-width:3;stroke-dasharray:7 5;animation:exl-pulse 1.2s ease-in-out infinite}
@keyframes exl-dash{to{stroke-dashoffset:-19}}
@keyframes exl-pulse{50%{stroke-opacity:.35;fill-opacity:.05}}
@keyframes exl-poke{50%{transform:translate(0,0);opacity:.75}}
.exl-gbub{position:absolute;left:0;right:0;margin:0 auto;width:-moz-fit-content;width:fit-content;top:10px;display:flex;align-items:flex-start;gap:8px;max-width:min(94%,640px);padding:10px 12px 10px 14px;border-radius:14px;background:#fff8d8;color:#2a210c;border:2px solid #e8b630;box-shadow:0 6px 18px rgba(0,0,0,.28);font-weight:700;font-size:17px;line-height:1.5;pointer-events:none}
.exl-gbub.bottom{top:auto;bottom:10px}
.exl-gico{flex:none}
.exl-gtext{flex:1;min-width:0}
.exl-gx{pointer-events:auto;flex:none;width:34px;height:34px;margin:-4px -4px -4px 4px;border:0;border-radius:50%;background:rgba(0,0,0,.08);color:#2a210c;font-size:20px;line-height:1;cursor:pointer}
/* 全画面 */
html.exl-lock,html.exl-lock body{overflow:hidden!important}
.exl.is-full{position:fixed;inset:0;z-index:2147483000;max-width:none;width:100vw;height:100vh;height:100dvh;border-radius:0;display:flex;flex-direction:column}
.exl.is-full .exl-stage{flex:1;min-height:0;display:flex;flex-direction:column}
.exl:fullscreen{width:100vw;height:100vh}
/* 結果の札（クリア） */
.exl-done{position:absolute;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,24,24,.55);animation:exl-in .3s}
.exl-done[hidden]{display:none}
.exl-card{width:min(100%,460px);padding:20px 20px 16px;border-radius:18px;background:#fbf6e8;color:#2a2416;text-align:center;box-shadow:0 0 0 3px var(--exl-brass),0 12px 30px rgba(0,0,0,.35)}
.exl-card h3{margin:0 0 6px;font-size:28px;line-height:1.3;color:#7a4e0c;letter-spacing:.06em}
.exl-card p{margin:.3em 0;font-size:15.5px}
.exl-card .exl-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin:10px 0 12px;font-size:14.5px;color:#4a4232}
.exl-card .exl-stats b{font-size:18px;color:#2a2416}
.exl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:9em;padding:0 20px;margin:4px;border-radius:999px;border:2px solid #8a6424;background:#fff;color:#4a3410;font-weight:700;font-size:16px;cursor:pointer}
.exl-btn.pri{background:linear-gradient(#d9a640,#b8832a);color:#fff;border-color:#8a5e14;box-shadow:0 3px 0 #7a5212}
.exl-btn:focus-visible{outline:3px solid #2d7ff9;outline-offset:2px}
.exl-btn:disabled{opacity:.5;cursor:default}
@media (max-width:560px){
  .exl{font-size:15px;border-radius:12px}
  .exl-head{padding:6px 8px}
  .exl-title{font-size:15px}
  .exl-tool{min-height:38px;padding:0 11px;font-size:13.5px}
  .exl-msg{font-size:15px;padding:8px 12px}
  .exl-gbub{font-size:15px}
  .exl-say{top:96px}
}
@media (prefers-reduced-motion:reduce){.exl *{animation:none!important;transition:none!important}}
/* ---- Ver.0.2.0：モード切りかえ・いまの作業・結果 ---- */
.exl-mode{display:inline-flex;padding:3px;border-radius:999px;background:#151718;box-shadow:inset 0 0 0 1px #6b5526}
.exl-mode button{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#cdbf9c;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.exl-mode button.on{background:var(--exl-brass2);color:#2a1d08;box-shadow:0 1px 0 rgba(0,0,0,.4)}
.exl.mode-guide .exl-mode button.on{background:#7fd0a8;color:#0f2b1e}
.exl-mode button:focus-visible{outline:3px solid #ffe28a;outline-offset:1px}
.exl-goal{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:8px 14px;background:linear-gradient(#f9efd2,#f1e2b8);border-bottom:1px solid #d6bd7a;color:#3a2a0c}
.exl-goal[hidden]{display:none}
.exl-goal-lbl{flex:none;padding:2px 10px;border-radius:999px;background:#3a2a0c;color:#ffe7a8;font-size:12.5px;font-weight:700;letter-spacing:.06em}
.exl-goal-txt{font-weight:700;font-size:18.5px;letter-spacing:.03em;min-width:0}
.exl-goal-dots{margin-left:auto;display:inline-flex;align-items:center;gap:5px}
.exl-goal-dots i{width:10px;height:10px;border-radius:50%;background:#d9c690;box-shadow:inset 0 0 0 1px #a88a3e}
.exl-goal-dots i.done{background:#5d9b6f;box-shadow:none}
.exl-goal-dots i.cur{background:#e0a020;box-shadow:0 0 0 3px rgba(224,160,32,.3)}
.exl-goal-dots em{font-style:normal;font-size:12.5px;font-weight:700;margin-left:4px;color:#6a5424}
.exl-goal.flash{animation:exl-goalflash 1.6s ease-out}
@keyframes exl-goalflash{0%{background:#ffd75e}100%{background:linear-gradient(#f9efd2,#f1e2b8)}}
.exl.mode-guide .exl-goal{background:linear-gradient(#e3f5ea,#cfeedd);border-bottom-color:#8cc9a6}
.exl.mode-guide .exl-goal-lbl{background:#1f5a3c;color:#dff7e8}
.exl-banner{position:absolute;left:0;right:0;top:40%;z-index:45;display:flex;justify-content:center;pointer-events:none;opacity:0}
.exl-banner>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 30px;border-radius:16px;background:rgba(26,30,30,.9);color:#fff;box-shadow:0 0 0 3px var(--exl-brass),0 10px 30px rgba(0,0,0,.4);text-align:center}
.exl-banner small{font-size:14px;color:#f6d98a;letter-spacing:.12em}
.exl-banner b{font-size:24px;letter-spacing:.04em}
.exl-banner.go{animation:exl-banner 2.3s ease-in-out}
@keyframes exl-banner{0%{opacity:0;transform:scale(.9)}12%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.exl-ask .exl-ask-q{font-weight:700;font-size:17px;margin:4px 0 12px}
.exl-done.exl-ask{z-index:60}
.exl-result .exl-badge{font-size:44px;line-height:1}
.exl-result.pass .exl-card{box-shadow:0 0 0 4px #e0b23a,0 12px 30px rgba(0,0,0,.35)}
.exl-result.pass h3{color:#a5520c;font-size:34px}
.exl-result .exl-sub{font-weight:700;color:#7a4e0c}
.exl-note{font-size:13px!important;color:#6a5a3a;background:#f3ead2;border-radius:8px;padding:6px 8px}
.exl-card-btns{display:flex;flex-wrap:wrap;justify-content:center}
.exl-tool.exl-t-back{background:#1f2a2a;border-color:#7fb79a;color:#dff7e8}
@media (max-width:560px){
  .exl-mode button{padding:0 9px;font-size:12.5px;min-height:34px}
  .exl-goal{padding:6px 10px}
  .exl-goal-txt{font-size:16px}
  .exl-banner b{font-size:19px}
}

/* たて長のスマホで、横長の実験を開いたとき */
.exl-land{display:none;margin:0;padding:6px 10px;background:#3a2a0c;color:#ffe7a8;font-size:13.5px;font-weight:700;text-align:center}
@media (orientation:portrait) and (max-width:600px){.exl-land{display:block}}
.exl.is-full .exl-land{display:none}
/* 高さの小さい画面（横向きのスマホ）：見出しを小さくして、実験の画面を広く */
@media (max-height:480px){
  .exl-head{padding:3px 8px}
  .exl-title{font-size:14px}
  .exl-mode button{min-height:30px;font-size:12px;padding:0 9px}
  .exl-tool{min-height:32px;font-size:12.5px;padding:0 10px}
  .exl-goal{padding:3px 10px}
  .exl-goal-txt{font-size:15px}
  .exl-gbub{font-size:14px;padding:6px 8px}
  .exl-banner b{font-size:18px}
}
/* 文章の欄（ドック）：ヒント・メッセージは作業画面に重ねず、ここに1つだけ出す */
.exl-dock{display:flex;align-items:center;gap:8px;min-height:62px;padding:6px 10px 6px 14px;background:#f4efe2;color:#2a210c;border-bottom:2px solid #d8c79a;font-weight:700;font-size:16px;line-height:1.5;transition:background-color .2s}
.exl.is-full .exl-dock{flex:none}
.exl-dock-ico{flex:none;width:1.4em;text-align:center;font-size:18px}
.exl-dock-txt{flex:1;min-width:0}
.exl-dock .exl-msg{display:inline;max-width:none;padding:0;border:0;border-radius:0;background:none;color:inherit;box-shadow:none;font-size:inherit;text-align:left;animation:none}
.exl-dock-x{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.08);color:#4a3a1a;font-size:20px;font-weight:700;cursor:pointer}
.exl-dock-x[hidden]{display:none}
.exl-dock.hint{background:#fff8d8;border-bottom-color:#e8b630}
.exl-dock.ok{background:#e3f5ea;border-bottom-color:#4caf7d;color:#1f4a32}
.exl-dock.info{background:#edf2f2;border-bottom-color:#9fb4b4;color:#24312f}
.exl-dock.warn{background:#ffe6d6;border-bottom-color:#e0702c;color:#6a2408}
.exl-dock.ng{background:#fde4dc;border-bottom-color:#d0603c;color:#7a2a14}
.exl-dock.old .exl-dock-txt,.exl-dock.old .exl-dock-ico{opacity:.55}
.exl-dock.old{background:#f4efe2;border-bottom-color:#d8c79a;color:#2a210c}
.exl-dock:not(.old):not(.empty):not(.hint){animation:exl-dockin .35s ease-out}
@keyframes exl-dockin{0%{filter:brightness(1.12)}100%{filter:none}}
@media (max-width:640px){
  .exl-dock{min-height:66px;font-size:14.5px;line-height:1.45;padding:5px 6px 5px 10px}
  .exl-dock-ico{font-size:16px}
  .exl-dock-x{width:36px;height:36px}
}

/* 横向きのスマホなど、高さの小さい画面：文章の欄を低くする */
@media (max-height:520px){
  .exl-dock{min-height:42px;font-size:13.5px;line-height:1.35;padding:2px 6px 2px 10px}
  .exl-dock-ico{font-size:15px}
  .exl-dock-x{width:32px;height:32px;font-size:17px}
  .exl-goal{padding:2px 10px;gap:4px 10px}
  .exl-goal-lbl{font-size:11.5px;padding:1px 8px}
  .exl-goal-txt{font-size:14.5px}
  .exl-goal-dots i{width:8px;height:8px}
}

/* スマホ（たて向き）：見出しは「題名」の1行と「モード・ボタン」の1行。いまの作業も1行 */
@media (max-width:640px){
  .exl-head{gap:4px 6px;padding:5px 8px}
  .exl-title{flex:1 0 100%}
  .exl-mode{flex:none}
  .exl-tools{flex-wrap:nowrap;gap:5px}
  .exl-tool{min-height:34px;padding:0 9px;font-size:12.5px}
  .exl-mode button{min-height:32px;padding:0 9px;font-size:12.5px}
  .exl-goal{flex-wrap:nowrap;padding:4px 10px;gap:8px}
  .exl-goal-lbl{font-size:11px;padding:1px 7px}
  .exl-goal-txt{flex:1;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .exl-goal-dots{margin-left:0}
  .exl-goal-dots i{display:none}
  .exl-goal-dots em{margin-left:0;font-size:12.5px;white-space:nowrap}
}
@media (max-width:420px){
  .exl-mode-s{display:none}
}
/* 結果の札が長いとき（安全のポイントなど）は、札の中をスクロールできる */
.exl-done{overflow-y:auto;align-items:flex-start;-webkit-overflow-scrolling:touch}
.exl-done>.exl-card{margin:auto 0}
.exl-share a.exl-btn{text-decoration:none}

/* 手順確認モードのみのリンク（実験の画面の下） */
.exl-share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;max-width:1180px;margin:8px auto 0;padding:8px 10px;border-radius:12px;background:#f4efe2;border:1px dashed #b98d3c;color:#4a3a1a;font-size:13px;line-height:1.5}
.exl-share-btn{min-height:40px;padding:0 14px;border-radius:999px;border:2px solid #8a6424;background:#fff;color:#4a3410;font-weight:700;font-size:14px;cursor:pointer;touch-action:manipulation}
.exl-share-note{flex:1 1 260px;color:#6a5a3a}
.exl-share-out{flex:1 0 100%;font-weight:700;color:#1f5a3c;word-break:break-all}
.exl-share-out:empty{display:none}

/* 終わったあとの「もう一度挑戦する」の帯（結果の札を閉じたあとも残る・Ver.0.10.3） */
.exl-again{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;padding:8px 10px;background:#fbf6e8;border-top:3px solid var(--exl-brass)}
.exl-again.pass{background:#fff4d6}
.exl-again-t{font-weight:700;font-size:15px;color:#7a4e0c}
.exl-again-b{display:flex;flex-wrap:wrap;justify-content:center}
.exl-again .exl-btn{min-height:44px}
.exl.is-full .exl-again{flex:none}
@media (max-width:520px){.exl-again .exl-btn{min-width:0;padding:0 14px;font-size:15px}}

/* 「◀ 前の手順」（Ver.0.11.3） */
.exl-goal-back{flex:none;min-height:36px;padding:0 12px;border-radius:999px;border:2px solid #8a6424;background:#fff;color:#4a3410;font-weight:700;font-size:13.5px;cursor:pointer;touch-action:manipulation}
.exl-goal-back[hidden]{display:none}
.exl-goal-back:hover{background:#fff4d6}
@media (max-width:520px){.exl-goal-back{min-height:34px;padding:0 9px;font-size:12.5px}}
/* ---------- 次に何をするか、分からなくならないように（Ver.0.15.0・すべての実験） ---------- */
/* 次へすすむ金色のボタン：いま押すボタンを光らせる */
.exl .exl-btn.exl-go-now{animation:exl-gonow 1.5s ease-in-out infinite}
@keyframes exl-gonow{0%,100%{box-shadow:0 3px 0 #7a5212,0 0 0 0 rgba(255,196,60,0)}50%{box-shadow:0 3px 0 #7a5212,0 0 0 9px rgba(255,196,60,.55)}}
/* 作業画面の下の「次へすすむ」ボタン（lab.offer）。スクロールしても見える */
.exl-offer{position:sticky;bottom:10px;z-index:8;display:flex;justify-content:center;padding:10px 8px 4px;pointer-events:none}
.exl-offer[hidden]{display:none}
.exl-offer .exl-btn{pointer-events:auto;min-height:56px;padding:0 30px;font-size:18px;box-shadow:0 3px 0 #7a5212,0 8px 22px rgba(0,0,0,.35)}
.exl.is-full .exl-offer{position:relative;bottom:auto;flex:none;padding:8px}
/* 何もしないで時間がたったとき、ヒントのボタンを光らせる */
.exl-tool.exl-t-hint.exl-nudge{animation:exl-nudge 1.2s ease-in-out infinite;border-color:#ffd75e}
@keyframes exl-nudge{0%,100%{box-shadow:0 0 0 0 rgba(255,215,94,0)}50%{box-shadow:0 0 0 7px rgba(255,215,94,.6);background:#6a5420}}
@media (prefers-reduced-motion:reduce){
  .exl .exl-btn.exl-go-now{animation:none;box-shadow:0 3px 0 #7a5212,0 0 0 5px rgba(255,196,60,.7)}
  .exl-tool.exl-t-hint.exl-nudge{animation:none;box-shadow:0 0 0 4px rgba(255,215,94,.7)}
}
/* タブレット・パソコン：金色のボタンを大きく */
@media (min-width:700px) and (min-height:521px){
  .exl .exl-btn.pri{min-height:60px;padding:0 32px;font-size:20px;border-width:3px}
  .exl .exl-th-go .exl-btn{min-height:60px;padding:0 32px;font-size:20px}
  .exl .exl-zoom-ask{min-height:58px;padding:0 26px;font-size:20px}
  .exl .exl-offer .exl-btn{min-height:68px;padding:0 44px;font-size:22px}
}