.tutorial-slider { 
  width: 100%; 
  margin: 25px auto; 
  position: relative; 
  color: #222; 
  background: #f8fbff; 
  border: 1px solid #e1eaf3; 
  border-radius: 10px; 
  overflow: hidden; 
} 
 
.tutorial-slider__viewport { 
  width: 100%; 
  overflow: hidden; 
} 
 
.tutorial-slider__track { 
  display: flex; 
  align-items: flex-start; 
  transition: transform 0.45s ease-in-out; 
  will-change: transform; 
} 
 
.tutorial-slider__slide { 
  flex: 0 0 100%; 
  width: 100%; 
  box-sizing: border-box; 
  padding: 10px 60px 20px; 
} 
 
/* 步骤标题区域 */ 
 
.tutorial-slider__heading { 
  margin: 0 0 18px; 
  color: #111; 
  font-size: 21px; 
  font-weight: 600; 
  line-height: 1.45; 
} 
 
.tutorial-slider__heading .step { 
  display: inline-block; 
  margin-right: 8px; 
  padding: 4px 10px; 
  border-radius: 5px; 
  background: #219aea; 
  color: #fff; 
  font-size: 14px; 
  font-weight: 600; 
  vertical-align: 2px; 
} 
 
/* 图片区域 */ 
 
.tutorial-slider__image { 
  position: relative; 
  width: 100%; 
  box-sizing: border-box; 
  overflow-x: auto; 
  overflow-y: hidden; 
  background: #fff; 
  border: 1px solid #e5e7eb; 
  border-radius: 8px; 
  text-align: center; 
} 
.tutorial-slider__image img { 
  display: block; 
  width: auto; 
  max-width:100%; 
  height: auto; 
  margin: 0 auto; 
  object-fit: contain; 
  border-radius: 4px; 
} 
 
/* 右上角放大按钮 */ 
 
.tutorial-slider__zoom { 
  position: absolute; 
  top: 12px; 
  right: 12px; 
  z-index: 3; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 34px; 
  height: 34px; 
  padding: 0; 
  border: 0; 
  border-radius: 4px; 
  background: rgba(70, 70, 70, 0.9); 
  color: #fff; 
  cursor: pointer; 
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); 
  transition: background 0.2s ease, transform 0.2s ease; 
} 
 
.tutorial-slider__zoom:hover { 
  background: #222; 
  transform: scale(1.05); 
} 
 
.tutorial-slider__zoom svg { 
  width: 17px; 
  height: 17px; 
  fill: none; 
  stroke: currentColor; 
  stroke-width: 2; 
  stroke-linecap: round; 
} 
 
/* 详细描述区域 */ 
 
.tutorial-slider__description { 
  margin-top: 18px; 
  color: #111; 
  font-size: 15px; 
  font-weight: 400; 
  line-height: 1.8; 
  opacity: 1; 
  filter: none; 
  text-shadow: none; 
} 
.tutorial-slider__description b, 
.tutorial-slider__description strong { 
  color: #111; 
} 
 
/* 左右箭头 */ 
 
.tutorial-slider__arrow { 
  position: absolute; 
  top: 50%; 
  z-index: 5; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 42px; 
  height: 42px; 
  margin-top: -21px; 
  padding: 0; 
  border: 0; 
  border-radius: 50%; 
  background: #219aea; 
  color: #fff; 
  font-size: 30px; 
  line-height: 1; 
  cursor: pointer; 
  transition: background 0.2s ease, transform 0.2s ease; 
} 
 
.tutorial-slider__arrow:hover { 
  background: #155a91; 
  transform: scale(1.08); 
} 
 
.tutorial-slider__arrow--prev { 
  left: 10px; 
} 
 
.tutorial-slider__arrow--next { 
  right: 10px; 
} 
 
/* 步骤计数 */ 
 
.tutorial-slider__footer { 
  position: absolute; 
  top: 8px; 
  right: 12px; 
  z-index: 10; 
  padding: 0; 
  margin: 0; 
} 
 
.tutorial-slider__counter { 
  display: inline-block; 
  min-width: auto; 
  padding: 4px 10px; 
  color: #666; 
  background: #fff; 
  border: 1px solid #dfe4ea; 
  border-radius: 4px; 
  font-size: 13px; 
  line-height: 1.4; 
  text-align: center; 
} 
 
/* 图片放大层 */ 
 
.tutorial-lightbox { 
  position: fixed; 
  inset: 0; 
  z-index: 99999; 
  display: none; 
  justify-content: center; 
  align-items: center; 
  padding: 30px; 
  box-sizing: border-box; 
  background: rgba(0, 0, 0, 0.86); 
} 
 
.tutorial-lightbox.is-visible { 
  display: flex; 
} 
 
.tutorial-lightbox__image { 
  display: block; 
  width: auto; 
  height: auto; 
  max-width: 95vw; 
  max-height: 90vh; 
  object-fit: contain; 
  border-radius: 4px; 
} 
 
.tutorial-lightbox__close { 
  position: fixed; 
  top: 18px; 
  right: 24px; 
  z-index: 2; 
  width: 42px; 
  height: 42px; 
  border: 0; 
  border-radius: 50%; 
  background: rgba(255, 255, 255, 0.2); 
  color: #fff; 
  font-size: 28px; 
  line-height: 1; 
  cursor: pointer; 
} 
 
@media (max-width: 768px) { 
  .tutorial-slider__slide { 
    padding: 20px 48px 25px; 
  } 
 
  .tutorial-slider__heading { 
    font-size: 18px; 
  } 
 
  .tutorial-slider__description { 
    font-size: 15px; 
    line-height: 1.7; 
  } 
 
  .tutorial-slider__arrow { 
    width: 34px; 
    height: 34px; 
    margin-top: -17px; 
    font-size: 24px; 
  } 
 
  .tutorial-slider__arrow--prev { 
    left: 8px; 
  } 
 
  .tutorial-slider__arrow--next { 
    right: 8px; 
  } 
 
  .tutorial-slider__zoom { 
    top: 10px; 
    right: 10px; 
    width: 32px; 
    height: 32px; 
  } 
 
  .tutorial-lightbox { 
    padding: 15px; 
  } 
}