/* 扩散模型可视化实验室 (lesson15 小任务) —— 作用域 #difflab */
#difflab .df-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
#difflab .df-logo { width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,#6C3483,#A569BD); display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 8px 18px -8px rgba(108,52,131,.6); flex:0 0 auto; }
#difflab .df-t b { display:block; font-size:17px; color:var(--ink,#2d2d2d); }
#difflab .df-t .df-s { font-size:12.5px; color:#6a7196; display:block; margin-top:2px; line-height:1.5; }

/* 三段原理 */
#difflab .df-intro h3, #difflab .df-demo h3, #difflab .df-recap h3 { margin-bottom:12px; font-size:16px; }
#difflab .df-steps { display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; }
#difflab .df-step { flex:1 1 200px; background:#f6f4ff; border:1px solid #e4dbf5; border-radius:12px; padding:10px 12px; font-size:12.5px; color:#3c3c58; line-height:1.6; }
#difflab .df-step b { display:block; font-size:13px; color:#5b2f86; margin-bottom:3px; }
#difflab .df-step.noise b { color:#b45309; }
#difflab .df-step.clean b { color:#0e7490; }
#difflab .df-arr { align-self:center; color:#c9b8ea; font-weight:900; font-size:16px; }

/* 演示主区 */
#difflab .df-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
#difflab .df-mode { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; padding:5px 13px; border-radius:30px; background:linear-gradient(135deg,#e9def8,#f0e7fb); color:#4b2b78; border:1px solid #ddcdf2; }
#difflab .df-mode.clean { background:linear-gradient(135deg,#dff3fb,#e7f7fd); color:#0e7490; border-color:#bfe6f2; }
#difflab .df-mode.noise { background:linear-gradient(135deg,#fff1dd,#ffedd6); color:#b45309; border-color:#f4d9ae; }
#difflab .df-pbtn { border:none; cursor:pointer; font-size:13px; font-weight:800; padding:8px 16px; border-radius:30px; color:#fff; background:linear-gradient(135deg,#8E44AD,#A569BD); box-shadow:0 8px 18px -10px rgba(108,52,131,.7); }
#difflab .df-pbtn:hover { transform:translateY(-1px); }

#difflab .df-stage { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
#difflab #dfMain { width:336px; height:336px; max-width:100%; border-radius:14px; border:2px solid #e4dbf5; background:#fff; image-rendering:pixelated; box-shadow:0 10px 24px -14px rgba(108,52,131,.4); }
#difflab .df-side { flex:1 1 260px; min-width:0; }
#difflab .df-stat { font-size:13.5px; font-weight:800; color:#2d2d2d; margin-bottom:6px; line-height:1.5; }
#difflab .df-arrow { font-size:12px; color:#7a5aa8; font-weight:700; margin-bottom:8px; }
#difflab #dfSlider { width:100%; accent-color:#8E44AD; cursor:pointer; }
#difflab .df-ctrl { display:flex; gap:10px; margin:12px 0 6px; flex-wrap:wrap; }
#difflab .df-btn { border:none; cursor:pointer; font-size:13px; font-weight:800; padding:9px 16px; border-radius:30px; color:#fff; }
#difflab .df-btn:disabled { opacity:.55; cursor:not-allowed; }
#difflab .df-btn.fwd { background:linear-gradient(135deg,#F59E0B,#FBBF24); color:#6b3a00; box-shadow:0 8px 16px -9px rgba(180,120,0,.6); }
#difflab .df-btn.rev { background:linear-gradient(135deg,#06B6D4,#22D3EE); color:#063a44; box-shadow:0 8px 16px -9px rgba(6,150,180,.55); }
#difflab .df-note { font-size:12px; color:#8a8aa8; line-height:1.6; margin-top:10px; }

/* 缩略时间轴 */
#difflab .df-thumbs { display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
#difflab .df-thb { text-align:center; }
#difflab .df-thb canvas { display:block; width:76px; height:76px; border-radius:10px; border:2px solid #eee7fb; background:#fff; image-rendering:pixelated; }
#difflab .df-thb span { font-size:11px; color:#8a7aa6; font-weight:700; }

/* recap */
#difflab .df-list { margin:0 0 6px 4px; padding:0; list-style:none; }
#difflab .df-list li { font-size:13px; color:#3c3c58; line-height:1.75; padding-left:2px; }
#difflab .df-honest { font-size:12px; color:#8a8aa8; background:#faf7ff; border:1px dashed #d9cdf0; border-radius:10px; padding:8px 12px; margin-top:10px; line-height:1.6; }

/* 二维扩散演示 */
#difflab .df-space h3 { margin-bottom:8px; font-size:16px; }
#difflab .df-space-tip { font-size:12.5px; color:#6a7196; line-height:1.7; margin-bottom:12px; }
#difflab .df-space-tip b { color:#5b2f86; }
#difflab .df-space-row { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
#difflab #dfSpace { width:100%; max-width:560px; height:auto; border-radius:14px; border:2px solid #e4dbf5; background:#fbfaff; box-shadow:0 10px 24px -14px rgba(108,52,131,.4); }
#difflab .df-space-side { flex:1 1 240px; min-width:0; }
#difflab .df-space-stat { font-size:13.5px; font-weight:800; color:#4b2b78; margin-bottom:8px; line-height:1.5; }
#difflab .df-space-desc { font-size:12.5px; color:#3c3c58; line-height:1.85; }
#difflab .df-space-desc b { color:#5b2f86; }
#difflab .df-space-side .df-pbtn { margin-top:12px; }

/* 折纸扩散演示 */
#difflab .df-origami h3 { margin-bottom:8px; font-size:16px; }
#difflab .df-origami-tip { font-size:12.5px; color:#6a7196; line-height:1.7; margin-bottom:12px; }
#difflab .df-origami-tip b { color:#5b2f86; }
#difflab .df-origami-row { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
#difflab .df-origami-stage { flex:0 0 auto; text-align:center; }
#difflab #dfOrm { width:420px; max-width:100%; height:auto; border-radius:14px; border:2px solid #e4dbf5; background:linear-gradient(180deg,#fdfcff,#f5f0fb); box-shadow:0 10px 24px -14px rgba(108,52,131,.4); }
#difflab .df-origami-stage-label { margin-top:8px; font-size:13px; font-weight:800; color:#4b2b78; min-height:20px; }
#difflab .df-origami-side { flex:1 1 260px; min-width:0; }
#difflab .df-origami-cond { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; font-size:12.5px; color:#3c3c58; font-weight:700; }
#difflab .df-cond-chip { border:1.5px solid #e0d2f0; background:#fff; color:#5b2f86; border-radius:30px; padding:5px 13px; font-size:13px; font-weight:800; cursor:pointer; transition:all .15s; }
#difflab .df-cond-chip.on { background:linear-gradient(135deg,#8E44AD,#A569BD); color:#fff; border-color:transparent; box-shadow:0 6px 14px -8px rgba(108,52,131,.7); }
#difflab #dfOrmSlider { width:100%; accent-color:#8E44AD; margin:4px 0 12px; cursor:pointer; }
#difflab .df-origami-btns { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
#difflab .df-origami-map { font-size:12px; color:#8a8aa8; line-height:1.75; background:#faf7ff; border:1px dashed #d9cdf0; border-radius:10px; padding:8px 12px; }
#difflab .df-origami-map b { color:#5b2f86; }

@media (max-width:560px) {
  #difflab .df-stage { flex-direction:column; align-items:center; }
  #difflab .df-side { width:100%; }
  #difflab .df-space-row { flex-direction:column; align-items:center; }
  #difflab .df-space-side { width:100%; }
  #difflab .df-origami-row { flex-direction:column; align-items:center; }
  #difflab .df-origami-side { width:100%; }
}