/* 数字人实战教程：左视频 + 右纵向步骤 */
.dh-jc { display: grid; grid-template-columns: 19rem minmax(0px,1fr); gap: var(--gs-sp-5); align-items: start; }
.dh-jc-left { position: sticky; top: 0; }
.dh-jc-video { width: 100%; border-radius: var(--gs-r-md); background: #000; aspect-ratio: 9/16; object-fit: cover; }
.dh-jc-vtitle { margin: 10px 0 0; font-size: var(--gs-fs-sm); font-weight: 600; color: var(--gs-text-1); line-height: 1.5; }
.dh-jc-stats { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dh-jc-stats span { font-size: 11px; padding: 2px 8px; border-radius: var(--gs-r-full); background: var(--gs-surface-2); border: 1px solid var(--gs-border); color: var(--gs-text-2); }

.dh-jc-steps { display: flex; flex-direction: column; }
.dh-jc-step { display: flex; gap: 14px; padding-bottom: 22px; position: relative; }
.dh-jc-step:last-child { padding-bottom: 0; }
.dh-jc-step::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: var(--gs-border); }
.dh-jc-step:last-child::before { display: none; }
.dh-jc-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: linear-gradient(135deg,#ffc24d,#ff9f1c); color:#2a2100; z-index: 1; }
.dh-jc-nei { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.dh-jc-nei h4 { margin: 4px 0 0; font-size: var(--gs-fs-md); color: var(--gs-text-1); }
.dh-jc-nei p { margin: 0; font-size: var(--gs-fs-sm); line-height: 1.7; color: var(--gs-text-2); }

.dh-jc-ren { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--gs-border); border-radius: var(--gs-r-md); background: var(--gs-surface-2); }
.dh-jc-ren img { width: 4.6rem; height: 4.6rem; border-radius: var(--gs-r-sm); object-fit: cover; }
.dh-jc-ren dl { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.dh-jc-ren dt { font-size: var(--gs-fs-xs); color: var(--gs-text-3); }
.dh-jc-ren dd { margin: 0; font-size: var(--gs-fs-sm); color: var(--gs-text-1); }

.dh-jc-tishi { display: flex; align-items: flex-start; gap: 7px; padding: 9px 12px; border-radius: var(--gs-r-md); background: rgba(255,159,28,.12); color: #ffb74d; font-size: var(--gs-fs-xs); line-height: 1.6; }
.dh-jc-tishi svg { flex-shrink: 0; margin-top: 2px; }

.dh-jc-yin { margin: 0; padding: 10px 14px; border: 1px solid var(--gs-border); border-radius: var(--gs-r-md); background: var(--gs-surface-2); font-size: var(--gs-fs-sm); line-height: 1.6; color: var(--gs-text-1); }
.dh-jc-jiaoben { margin: 0; padding-left: 1.2rem; font-size: var(--gs-fs-sm); line-height: 1.9; color: var(--gs-text-2); }

.dh-jc-frames { display: grid; grid-template-columns: repeat(3, minmax(0px,1fr)); gap: 10px; }
.dh-jc-frames figure { margin: 0; }
.dh-jc-frames img { width: 100%; aspect-ratio: 9/14; object-fit: cover; border-radius: var(--gs-r-md); }
.dh-jc-frames figcaption { margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--gs-text-3); }
.dh-jc-frames b { color: var(--gs-accent-text); margin-right: 4px; }

.dh-jc-fenduan { display: flex; flex-direction: column; gap: 8px; }
.dh-jc-fenduan div { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--gs-border); border-radius: var(--gs-r-md); background: var(--gs-surface-2); }
.dh-jc-fenduan .n { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: rgba(45,182,196,.16); color: #45c6d2; }
.dh-jc-fenduan span { font-size: var(--gs-fs-sm); color: var(--gs-text-2); }

@media (max-width: 760px){
  .dh-jc { grid-template-columns: 1fr; }
  .dh-jc-left { position: static; }
  .dh-jc-video { max-height: 24rem; }
  .dh-jc-frames { grid-template-columns: 1fr 1fr 1fr; }
}