/* TutorialBanner —— 产品教程页顶部 banner（Figma 1868:11961）。
   375×286 的画框，内容被 375×262 的 SVG 蒙版裁切（底部 195→262 渐隐）。

   为什么不整幅导出：设计稿本身就是「照片 + 蒙版 + 2 个椭圆」三层，
   蒙版和椭圆都是设计稿给的矢量资源 —— 拆开复刻既忠实又能随宽度缩放，
   比截图成一张图更好（也便于以后换照片）。

   三层几何一律用 cqw（1cqw = 本容器宽 1%），整个 banner 随宽度等比缩放。 */

.mzh-tutorial-banner {
  position: relative;
  width: 100%;
  aspect-ratio: var(--tutorial-banner-aspect);
  container-type: inline-size;
  /* 蒙版资源由页面描述提供（candidates: 逻辑路径）*/
  --tutorial-banner-mask: none;
  overflow: clip;
}

.mzh-tutorial-banner__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--tutorial-banner-mask-ratio);
  mask-image: var(--tutorial-banner-mask);
  -webkit-mask-image: var(--tutorial-banner-mask);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  overflow: clip;
}

.mzh-tutorial-banner__photo {
  position: absolute;
  left: var(--tutorial-banner-photo-x);
  top: 0;
  width: var(--tutorial-banner-photo-w);
  height: var(--tutorial-banner-photo-h);
  object-fit: cover;
  display: block;
}

.mzh-tutorial-banner__ellipse-1,
.mzh-tutorial-banner__ellipse-2 {
  position: absolute;
  display: block;
}

.mzh-tutorial-banner__ellipse-1 {
  left: var(--tutorial-banner-p1-x);
  top: var(--tutorial-banner-p1-y);
  width: var(--tutorial-banner-p1-w);
  height: var(--tutorial-banner-p1-h);
}

.mzh-tutorial-banner__ellipse-2 {
  left: var(--tutorial-banner-p2-x);
  top: var(--tutorial-banner-p2-y);
  width: var(--tutorial-banner-p2-w);
  height: var(--tutorial-banner-p2-h);
}