/* 效果演示区（各工具页共用）2026-11-14
 * 设计要点：① 图/视频一律 object-fit:cover 铺满统一竖屏卡片，横竖素材混排也不歪；
 * ② data-src + IntersectionObserver 懒加载，首屏不下载演示视频（与 clone.html 同策略）；
 * ③ 对比卡（.pair）双视频叠放，每 4 秒交叉淡入淡出，左上角标签跟着变。 */
.dwrap { margin-top:18px; background:#fff; border:1px solid #e8ebf4; border-radius:16px; padding:18px; }
.dhead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.dhead b { font-size:14.5px; color:#26304d; }
.dhead small { font-size:11.5px; color:#9aa2b8; }
.dgrid { display:grid; gap:10px; }
.dgrid.c2 { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:520px; }
.dgrid.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
/* 三卡横排时按 4:5 收一下高度，9:16 全高在 1440 屏上会顶出 700px（2026-11-14 实测） */
.dgrid.c3 .dfig { aspect-ratio:4/5; }
/* 两卡对比 + 右侧步骤说明并排（否则 1240px 宽的页面上右边会空一大片，2026-11-14 首版实测） */
.dbody { display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr); gap:18px; align-items:start; }
.dbody .dgrid.c2 { max-width:none; }
.dbody .dhow { margin-top:0; }
.dbody .dhow.c3 { grid-template-columns:1fr; }
.dfig { position:relative; margin:0; border-radius:12px; overflow:hidden; background:#0d1220; aspect-ratio:9/16; }
.dfig video, .dfig img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.dfig .dvb { opacity:0; transition:opacity .6s ease; }
.dfig .dvb.on { opacity:1; }
.dtag { position:absolute; top:8px; left:8px; z-index:3; font-size:10.5px; padding:3px 8px; border-radius:6px;
  background:rgba(10,14,30,.62); color:#fff; transition:.25s; letter-spacing:.3px; }
.dtag.hi { background:rgba(24,120,72,.86); }
.dcap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 10px 9px; font-size:11.5px; color:#fff;
  background:linear-gradient(transparent,rgba(8,12,24,.8)); text-align:center; font-weight:600; line-height:1.45; }
.dfig .arw { position:absolute; top:50%; right:-11px; transform:translateY(-50%); z-index:4; width:22px; height:22px;
  border-radius:50%; background:#3f5bf0; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; box-shadow:0 2px 8px #3f5bf04d; }
.dhow { display:grid; gap:8px; margin-top:12px; }
.dhow.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dstep { background:#f7f9ff; border:1px solid #e6ecfa; border-radius:10px; padding:10px 12px; font-size:12px; color:#4a5470; line-height:1.72; }
.dstep b { display:block; color:#26304d; font-size:12.5px; margin-bottom:3px; }
.dstep i { font-style:normal; color:#3f5bf0; font-weight:800; margin-right:5px; }
.dnote { margin-top:10px; font-size:11.5px; color:#8a92a8; line-height:1.7; }
/* 文本类演示（口播脚本页）：左右两屏，模拟「填资料 → 出脚本」 */
.dtxt { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:10px; }
.dpane { background:#f7f9ff; border:1px solid #e6ecfa; border-radius:12px; padding:12px 14px; font-size:12px; color:#4a5470; line-height:1.8; min-width:0; }
.dpane b { display:block; color:#26304d; font-size:12.5px; margin-bottom:6px; }
.dpane .k { color:#8a92a8; }
.dpane .v { color:#26304d; font-weight:600; }
.dpane.out { background:#fffdf7; border-color:#f2e6c9; }
.dpane.out p { margin:0 0 7px; }
.dpane.out p:last-child { margin-bottom:0; }
.dpane.out .hook { color:#b45309; font-weight:700; }
/* 演示区里的 .dpane 可能借用页面自己的 .out 类（如 /reverse 的结果面板，带 max-height:60vh），
 * 这里按 .dwrap 作用域收回来，否则演示文本会被裁成 60vh 且出滚动条（2026-11-14 实测） */
.dwrap .dpane.out { max-height:none; overflow:visible; }
@media (max-width:900px) {
  .dbody { grid-template-columns:1fr; gap:12px; }
  /* 窄屏演示长文本收成可滚面板，否则整块被撑到 2000px */
  .dwrap .dpane.out { max-height:300px; overflow:auto; }
}
@media (max-width:760px) {
  .dgrid.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .dhow.c3 { grid-template-columns:1fr; }
  .dtxt { grid-template-columns:1fr; }
  .dwrap { padding:14px; }
  .dcap { font-size:10.5px; padding:16px 6px 7px; }
}