@charset "UTF-8";
/* 811 万能无痕改字 APP：由确认的 A 方案迁入。 */
.wm811 {
  /* 宣传元素仅绘制在 APP 原图以外，公共导航和页脚沿用原版。 */
}
.wm811 {
  margin: 0;
  color: #082d23;
  background: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.wm811.is-pc {
  min-width: 1200px;
}
.wm811 .app-landing {
  padding-top: 131px;
  overflow: visible;
  --ink:#062d22;
  --mint:#09bea4;
  --neon:#31ef98;
  --muted:#627d70;
}
.wm811 .app-landing * {
  box-sizing: border-box;
}
.wm811 .app-landing :is(h1, h2, h3, p, ul, ol, figure) {
  margin: 0;
  padding: 0;
}
.wm811 .app-landing em {
  font-style: normal;
  color: #04aa90;
}
.wm811 .layout {
  width: 1200px;
  margin: 0 auto;
}
.wm811 .chapter {
  padding: 92px 0;
}
.wm811 .eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #49937a;
  margin-bottom: 18px !important;
}
.wm811 {
  /* 下载文字与箭头作为整体居中，沿用移动端的紧凑排列。 */
}
.wm811 .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 250px;
  height: 62px;
  padding: 0 26px;
  background: linear-gradient(100deg, #12cbae, #00d5be);
  box-shadow: 0 8px 23px rgba(2, 158, 124, 0.1490196078), inset 0 1px #acffee;
  border: 1px solid #07c6ad;
  border-radius: 12px;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  -webkit-user-select: none;
  user-select: none;
}
.wm811 .cta b {
  font-size: 29px;
  font-weight: 400;
}
.wm811 {
  /* 首屏保持溢出可见，供下载二维码浮层展示。 */
}
.wm811 .hero {
  background: radial-gradient(ellipse at 80% 30%, #bdf9dd 0, transparent 48%), linear-gradient(120deg, #f8fcf7, #eafbf0 55%, #daffee);
  position: relative;
}
.wm811 .hero__layout {
  min-height: 725px;
  display: grid;
  grid-template-columns: 520px 680px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.wm811 .hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #42816b;
  font-size: 14px;
  padding: 8px 0;
  letter-spacing: 2px;
  margin-bottom: 22px;
}
.wm811 .hero__badge > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0cbc85;
  box-shadow: 0 0 0 5px #d2f7e4;
}
.wm811 .hero__title {
  font-size: 65px !important;
  line-height: 1.55 !important;
  letter-spacing: -2px;
  font-weight: 800;
}
.wm811 .selected-title {
  display: inline-block;
  position: relative;
  border: 2px solid #21cba7;
  background: rgba(188, 244, 212, 0.2078431373);
  padding: 0 12px;
  line-height: 1.3;
  margin: 4px 0 0 -12px;
}
.wm811 .selected-title i, .wm811 .feature-art__new i, .wm811 .scene__selection i, .wm811 .brand-screen__selection i, .wm811 .step-art--select > span i {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border: 2px solid #17d6b0;
}
.wm811 .selected-title i:nth-of-type(1), .wm811 .feature-art__new i:nth-of-type(1), .wm811 .scene__selection i:nth-of-type(1), .wm811 .brand-screen__selection i:nth-of-type(1), .wm811 .step-art--select > span i:nth-of-type(1) {
  left: -5px;
  top: -5px;
}
.wm811 .selected-title i:nth-of-type(2), .wm811 .feature-art__new i:nth-of-type(2), .wm811 .scene__selection i:nth-of-type(2), .wm811 .brand-screen__selection i:nth-of-type(2), .wm811 .step-art--select > span i:nth-of-type(2) {
  right: -5px;
  top: -5px;
}
.wm811 .selected-title i:nth-of-type(3), .wm811 .feature-art__new i:nth-of-type(3), .wm811 .scene__selection i:nth-of-type(3), .wm811 .brand-screen__selection i:nth-of-type(3), .wm811 .step-art--select > span i:nth-of-type(3) {
  left: -5px;
  bottom: -5px;
}
.wm811 .selected-title i:nth-of-type(4), .wm811 .feature-art__new i:nth-of-type(4), .wm811 .scene__selection i:nth-of-type(4), .wm811 .brand-screen__selection i:nth-of-type(4), .wm811 .step-art--select > span i:nth-of-type(4) {
  right: -5px;
  bottom: -5px;
}
.wm811 .hero__intro {
  font-size: 19px;
  line-height: 1.85;
  color: #5a7568;
  margin: 31px 0 32px !important;
  max-width: 475px;
}
.wm811 .hero__caption {
  margin-top: 22px;
  color: #719181;
  font-size: 13px;
  display: flex;
  gap: 12px;
}
.wm811 .hero-art {
  height: 660px;
  position: relative;
  perspective: 1400px;
}
.wm811 .hero-art__base {
  position: absolute;
  left: 185px;
  bottom: 47px;
  width: 320px;
  height: 50px;
  border-radius: 50%;
  background: rgba(69, 156, 116, 0.2);
  filter: blur(24px);
  z-index: -1;
}
.wm811 .hero-art__orbit {
  position: absolute;
  left: 90px;
  top: 175px;
  width: 500px;
  height: 270px;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: rotate(-28deg);
}
.wm811 {
  /* 手机框带独立扬声器、金属边缘与侧键，原始截图完整置入屏幕。 */
}
.wm811 .device {
  position: relative;
  width: 220px;
  padding: 16px 8px 11px;
  background: linear-gradient(105deg, #495c50, #152019 6%, #090e0b 94%, #7b9685);
  border: 2px solid #738a7c;
  border-radius: 33px;
  box-shadow: 3px 3px 0 #293b30, 7px 7px 0 #b2c8b8, 14px 25px 35px rgba(21, 61, 48, 0.137254902);
}
.wm811 .device__speaker {
  position: absolute;
  width: 28px;
  height: 3px;
  background: #849889;
  border-radius: 9px;
  left: calc(50% - 14px);
  top: 7px;
  opacity: 0.5;
}
.wm811 .device__side {
  position: absolute;
  right: -5px;
  top: 90px;
  width: 3px;
  height: 47px;
  border-radius: 2px;
  background: #768a7e;
}
.wm811 .device__side:after {
  content: "";
  position: absolute;
  left: -221px;
  top: 2px;
  width: 3px;
  height: 62px;
  background: #91a698;
  border-radius: 2px;
}
.wm811 .device__screen {
  border-radius: 20px;
  overflow: hidden;
  background: #040806;
}
.wm811 .device__screen img {
  width: 100%;
  height: auto;
  display: block;
}
.wm811 .device--brand {
  width: 247px;
  position: absolute;
  top: 75px;
  left: 220px;
  transform: rotate(9deg);
  z-index: 2;
}
.wm811 .brand-screen {
  height: 465px;
  border-radius: 21px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 15% 45%, #133827, #060e09 63%);
  color: #e9fff0;
  text-align: center;
  padding-top: 40px;
}
.wm811 .brand-screen__light {
  position: absolute;
  left: -100px;
  top: 320px;
  width: 420px;
  height: 170px;
  border: 1px solid rgba(86, 245, 173, 0.3333333333);
  border-radius: 50%;
  transform: rotate(-37deg);
  box-shadow: 0 0 45px rgba(33, 246, 150, 0.0666666667);
}
.wm811 .brand-screen__logo {
  width: 73px;
  height: 73px;
  border-radius: 16px;
  padding: 4px;
  margin: 0 auto 13px;
  background: #0c2516;
  box-shadow: 0 0 40px rgba(54, 243, 165, 0.137254902);
}
.wm811 .brand-screen__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wm811 .brand-screen__name {
  font-size: 13px;
  letter-spacing: 1px;
}
.wm811 .brand-screen > strong {
  display: block;
  font-size: 49px;
  letter-spacing: 2px;
  line-height: 1.4;
  margin-top: 24px;
}
.wm811 .brand-screen > strong em {
  color: #4af3a4;
}
.wm811 .brand-screen__selection {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 60px;
  border: 1px solid #35e9a3;
  transform: rotate(12deg);
  margin-top: 15px;
  background: rgba(27, 212, 147, 0.1333333333);
}
.wm811 .brand-screen__selection b {
  font: 700 49px Georgia, serif;
  color: #4af0aa;
  line-height: 59px;
}
.wm811 .brand-screen__bottom {
  position: absolute;
  bottom: 19px;
  left: 0;
  right: 0;
  font-size: 10px;
  color: #7caa8f;
  letter-spacing: 2px;
}
.wm811 .floating-edit {
  position: absolute;
  z-index: 4;
  left: 180px;
  bottom: 18px;
  width: 330px;
  border: 1px solid #dcffed;
  border-radius: 16px;
  background: rgba(252, 255, 252, 0.9411764706);
  box-shadow: 0 15px 35px rgba(30, 123, 69, 0.1254901961);
  padding: 15px 23px;
  transform: rotate(-3deg);
}
.wm811 .floating-edit__label {
  display: block;
  color: #648674;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 9px;
}
.wm811 .floating-edit > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  gap: 14px;
}
.wm811 .floating-edit s {
  text-decoration-color: #64a687;
  color: #8ea399;
  font-size: 17px;
}
.wm811 .floating-edit strong {
  background: #d2ffe6;
  border: 1px solid #55deb0;
  padding: 7px 10px;
  color: #057555;
  border-radius: 4px;
}
.wm811 .floating-edit b {
  color: #0ec594;
}
.wm811 .floating-tool {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 9px;
  border: 1px solid #fff;
  background: rgba(245, 255, 248, 0.8509803922);
  box-shadow: 0 8px 20px rgba(59, 121, 82, 0.1019607843);
  border-radius: 13px;
  font-size: 12px;
  color: #386952;
}
.wm811 .floating-tool img {
  width: 39px;
  height: 39px;
  object-fit: contain;
}
.wm811 .floating-tool--erase {
  top: 145px;
  left: 95px;
  transform: rotate(-8deg);
  animation: wm811-float-erase 4s ease-in-out infinite;
}
.wm811 .floating-tool--cutout {
  right: 100px;
  bottom: 185px;
  transform: rotate(7deg);
  animation: wm811-float-cutout 4.6s ease-in-out -1.6s infinite;
}
@keyframes wm811-float-erase {
  0%, 100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-6px) rotate(-8deg);
  }
}
@keyframes wm811-float-cutout {
  0%, 100% {
    transform: translateY(0) rotate(7deg);
  }
  50% {
    transform: translateY(-6px) rotate(7deg);
  }
}
.wm811 .overview {
  padding: 75px 0 88px;
}
.wm811 .overview__heading {
  text-align: center;
  margin-bottom: 40px;
}
.wm811 .app-landing h2 {
  font-size: 39px;
  line-height: 1.5;
  letter-spacing: -0.8px;
}
.wm811 .feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.wm811 .feature-art {
  position: relative;
  height: 190px;
  background: radial-gradient(ellipse at center, #def8e9, #f5fcf6);
  overflow: hidden;
}
.wm811 .feature-art--text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.wm811 .feature-art__old {
  font-size: 18px;
  color: #a4b6ab;
  text-decoration: line-through;
  text-decoration-color: #96aa9d;
  transform: translateX(-25px);
}
.wm811 .feature-art__new {
  position: relative;
  border: 1px solid #16c99b;
  font-size: 28px;
  font-weight: 700;
  padding: 7px 13px;
  color: #135b42;
  transform: rotate(-5deg);
  background: #d8fae5;
}
.wm811 .feature-art > .feature-icon {
  position: absolute;
  width: 64px;
  height: 64px;
  object-fit: contain;
  right: 35px;
  top: 23px;
  filter: drop-shadow(0 10px 8px rgba(22, 117, 72, 0.1254901961));
  transform: rotate(12deg);
}
.wm811 .feature-art--erase {
  background: radial-gradient(ellipse at center, #e1faf0, #f3fbf7);
}
.wm811 .erase-word {
  position: absolute;
  left: 53px;
  top: 66px;
  font-size: 32px;
  letter-spacing: 5px;
  font-weight: 700;
  color: #7cbaa4;
}
.wm811 .erase-trail {
  position: absolute;
  width: 200px;
  height: 44px;
  left: 118px;
  top: 79px;
  background: linear-gradient(90deg, rgba(204, 247, 232, 0.2666666667), #e9fcf3 45%);
  transform: rotate(-22deg);
  border-radius: 30px;
  box-shadow: 0 0 15px #ecfff4;
}
.wm811 .feature-art--erase > .feature-icon {
  width: 88px;
  height: 88px;
  top: 54px;
  right: 58px;
  transform: rotate(20deg);
}
.wm811 .art-star {
  position: absolute;
  left: 75px;
  top: 28px;
  font-size: 24px;
  color: #43d9a9;
}
.wm811 .feature-art--cutout {
  background: #f1faf5;
}
.wm811 .cutout-checker {
  position: absolute;
  left: 88px;
  top: 26px;
  width: 161px;
  height: 137px;
  border-radius: 12px;
  background-color: #fff;
  background-image: conic-gradient(#e2eae4 25%, transparent 0 50%, #e2eae4 0 75%, transparent 0);
  background-size: 18px 18px;
  transform: rotate(-8deg);
  border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(62, 125, 72, 0.0784313725);
}
.wm811 .cutout-letter {
  position: absolute;
  left: 135px;
  top: 28px;
  font: 700 127px Georgia, serif;
  color: #32dd9e;
  text-shadow: 1px 1px #95ffd1, 2px 3px #12ac75, 4px 6px #109463, 7px 10px 13px rgba(25, 88, 56, 0.2666666667);
  transform: rotate(9deg);
}
.wm811 .feature-art--cutout > .feature-icon {
  top: 80px;
  right: 50px;
}
.wm811 .chapter-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #339873;
  margin-bottom: 20px;
}
.wm811 .chapter-label > span {
  font-size: 12px;
  color: #09ad87;
  letter-spacing: 1px;
  padding: 6px 9px;
  border: 1px solid #bce6d0;
  border-radius: 7px;
  background: #f5fff8;
}
.wm811 .chapter-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}
.wm811 .chapter-heading > p {
  font-size: 17px;
  color: #698170;
  line-height: 1.9;
  padding-bottom: 7px;
}
.wm811 .replace-section {
  background: linear-gradient(145deg, #f3fcf5, #eaf9ef 65%, #f6fcf7);
}
.wm811 {
  /* 沿用 Figma 双图对比构图，选框与指针匹配饮品海报的新标题位置。 */
}
.wm811 .replace-stage {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.wm811 .replace-stage__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  position: relative;
}
.wm811 .scene {
  position: relative;
  aspect-ratio: 577.439/382.553;
}
.wm811 .scene__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.wm811 .scene__label {
  position: absolute;
  top: 6.8%;
  left: 2.77%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 38px;
  border-radius: 33px;
  padding: 0;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 20px;
  line-height: 1.5;
}
.wm811 .scene--after .scene__label {
  background: linear-gradient(90deg, #15c8b4, #01e5cb);
  box-shadow: 0 4.3px 10.3px rgba(147, 184, 181, 0.2509803922);
  font-size: 22px;
}
.wm811 .scene__selection {
  position: absolute;
  left: 6.67%;
  top: 35%;
  width: 31.5%;
  height: 14%;
  border: 1px solid #0bffd6;
  background: rgba(39, 252, 217, 0.2);
}
.wm811 .scene__selection i {
  width: 12px;
  height: 12px;
  border-color: #0bffd6;
}
.wm811 .scene__selection i:nth-of-type(1) {
  left: -6px;
  top: -6px;
}
.wm811 .scene__selection i:nth-of-type(2) {
  right: -6px;
  top: -6px;
}
.wm811 .scene__selection i:nth-of-type(3) {
  left: -6px;
  bottom: -6px;
}
.wm811 .scene__selection i:nth-of-type(4) {
  right: -6px;
  bottom: -6px;
}
.wm811 .scene__cursor {
  position: absolute;
  left: 36.7%;
  top: 47.3%;
  width: 9%;
  height: auto;
  aspect-ratio: 1;
  pointer-events: none;
}
.wm811 .replace-stage__arrow {
  position: absolute;
  left: 43.08%;
  top: 39.73%;
  width: 14.1%;
  height: 38.61%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.wm811 .replace-stage__arrow > span {
  position: relative;
  display: block;
  flex: none;
  width: 88.08%;
  height: 82.61%;
  transform: rotate(-10.77deg);
  overflow: hidden;
}
.wm811 .replace-stage__arrow img {
  position: absolute;
  width: 137.5%;
  height: 168.1%;
  left: -17.54%;
  top: -37.27%;
  max-width: none;
}
.wm811 .detail-points {
  display: flex;
  justify-content: center;
  gap: 67px;
  margin-top: 28px;
  color: #698371;
  font-size: 14px;
}
.wm811 .detail-points b {
  font-size: 11px;
  color: #16ad7b;
  margin-right: 8px;
}
.wm811 .split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}
.wm811 .chapter-copy > p {
  font-size: 17px;
  line-height: 1.9;
  color: #688372;
  margin-top: 25px;
}
.wm811 .action-pills {
  display: flex;
  gap: 10px;
  margin-top: 27px;
}
.wm811 .action-pills span {
  font-size: 12px;
  border: 1px solid #daece1;
  background: #f7fcf8;
  border-radius: 7px;
  padding: 9px 14px;
  color: #5c886f;
}
.wm811 .copy-callout {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-top: 33px;
  padding-top: 26px;
  border-top: 1px solid #e7eee9;
}
.wm811 .copy-callout > span {
  font-size: 31px;
  color: #20c598;
}
.wm811 .copy-callout p {
  font-size: 14px;
  line-height: 1.85;
  color: #8aa494;
}
.wm811 .copy-callout strong {
  color: #577860;
  font-weight: 500;
}
.wm811 .promo-art {
  height: 580px;
  position: relative;
}
.wm811 .promo-art__glow {
  position: absolute;
  inset: 12px -10px 12px 0;
  background: radial-gradient(ellipse, #d7f9e7, transparent 70%);
}
.wm811 .erase-panel {
  position: absolute;
  left: 0;
  top: 100px;
  width: 318px;
  height: 357px;
  background: linear-gradient(140deg, #e9f8ed, #d3f0dd);
  border: 2px solid #fff;
  box-shadow: 0 15px 32px rgba(37, 94, 54, 0.0705882353);
  border-radius: 23px;
  transform: rotate(-8deg);
  padding: 31px 22px;
}
.wm811 .erase-panel__caption {
  font-size: 11px;
  color: #709b80;
  letter-spacing: 2px;
}
.wm811 .erase-panel__type {
  margin-top: 33px;
  font-size: 30px;
  line-height: 1.55;
}
.wm811 .erase-panel__type > span {
  display: block;
  color: #2e8257;
}
.wm811 .erase-panel__type > strong {
  display: block;
  color: #154b34;
}
.wm811 .erase-panel__mark {
  position: relative;
  margin-top: 28px;
  width: 178px;
  height: 50px;
}
.wm811 .erase-panel__mark > span {
  font-size: 22px;
  color: #8ebca0;
  letter-spacing: 2px;
}
.wm811 .erase-panel__mark i {
  position: absolute;
  left: 47px;
  top: 0;
  width: 155px;
  height: 43px;
  border-radius: 25px;
  transform: rotate(-16deg);
  background: linear-gradient(90deg, rgba(224, 245, 232, 0.3137254902), #e1f4e6);
  box-shadow: 0 0 10px #dbf2e2;
}
.wm811 .eraser-object {
  position: absolute;
  left: 135px;
  top: 239px;
  width: 77px;
  height: 48px;
  background: linear-gradient(130deg, #9bffe0, #11d89b 65%, #0ea279);
  border-radius: 8px 15px 7px 8px;
  border: 1px solid #61eabd;
  box-shadow: 4px 6px #47b288, 9px 15px 20px rgba(7, 79, 52, 0.168627451);
  transform: rotate(-35deg);
}
.wm811 .eraser-object span {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 100%;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(120deg, #f8fff9, #c7eadd);
}
.wm811 .erase-panel__spark {
  position: absolute;
  bottom: 62px;
  left: 54px;
  font-size: 30px;
  color: #1ec995;
}
.wm811 .device--erase {
  position: absolute;
  left: 302px;
  top: 32px;
  width: 204px;
  transform: rotate(7deg);
}
.wm811 .art-bubble {
  position: absolute;
  left: 16px;
  bottom: 37px;
  padding: 18px 24px;
  width: 251px;
  background: #fff;
  border: 1px solid #e1f2e7;
  border-radius: 14px;
  box-shadow: 0 15px 25px rgba(32, 93, 50, 0.1254901961);
}
.wm811 .art-bubble b {
  font-size: 24px;
  color: #12ba8c;
}
.wm811 .art-bubble span {
  font-size: 12px;
  color: #779580;
  float: right;
  line-height: 31px;
}
.wm811 .art-bubble i {
  display: block;
  height: 5px;
  border-radius: 9px;
  background: linear-gradient(90deg, #39e99b 28%, #e4ece6 28%);
  margin-top: 10px;
  position: relative;
}
.wm811 .art-bubble i:after {
  content: "";
  position: absolute;
  left: 25%;
  top: -4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #37e69a;
  box-shadow: 0 0 0 3px #c8fbe0;
}
.wm811 .background-section {
  background: #f7fcf9;
}
.wm811 .palette {
  display: flex;
  gap: 21px;
  margin-top: 30px;
}
.wm811 .palette > div {
  text-align: center;
}
.wm811 .palette i {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #d7e6dc;
  box-shadow: 0 3px 5px rgba(20, 54, 28, 0.031372549);
}
.wm811 .palette span {
  display: block;
  font-size: 11px;
  margin-top: 9px;
  color: #8aa291;
}
.wm811 .palette__transparent {
  background: conic-gradient(#e0e7e1 25%, #fff 0 50%, #e0e7e1 0 75%, #fff 0);
  background-size: 14px 14px;
  border-color: #29c89a !important;
}
.wm811 .palette__white {
  background: #fff;
}
.wm811 .palette__gray {
  background: #e9efeb;
}
.wm811 .palette__image {
  background: linear-gradient(140deg, #b2eece 45%, #58af89 45% 64%, #307658 64%);
}
.wm811 .chapter-copy__note {
  font-size: 13px !important;
  color: #86a18e !important;
}
.wm811 .bg-layer {
  position: absolute;
  width: 242px;
  height: 291px;
  border: 3px solid white;
  border-radius: 23px;
  box-shadow: 0 15px 30px rgba(53, 109, 72, 0.1254901961);
}
.wm811 .bg-layer--green {
  top: 145px;
  right: -6px;
  background: linear-gradient(135deg, #ace8c5, #d8f4e1);
  transform: rotate(13deg);
}
.wm811 .bg-layer--checker {
  right: 22px;
  top: 165px;
  background: conic-gradient(#e4ebe5 25%, #fff 0 50%, #e4ebe5 0 75%, #fff 0);
  background-size: 24px 24px;
  transform: rotate(-5deg);
}
.wm811 .subject-tile {
  position: absolute;
  right: 35px;
  top: 200px;
  width: 207px;
  height: 225px;
  transform: rotate(8deg);
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 17px;
}
.wm811 .subject-tile img {
  width: 132px;
  height: 132px;
  border-radius: 26px;
  filter: drop-shadow(0 17px 12px rgba(36, 78, 58, 0.1568627451));
}
.wm811 .subject-tile span {
  font-size: 12px;
  color: #3f9470;
  background: #fff;
  border-radius: 15px;
  padding: 6px 14px;
}
.wm811 .device--background {
  position: absolute;
  left: 20px;
  top: 36px;
  width: 210px;
  transform: rotate(-7deg);
  z-index: 3;
}
.wm811 .background-art__tag {
  position: absolute;
  right: 29px;
  bottom: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  border: 1px solid #daeee1;
  background: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  color: #4a8260;
  box-shadow: 0 12px 25px rgba(60, 122, 76, 0.0705882353);
}
.wm811 .background-art__tag > span {
  background: #26d49a;
  border-radius: 50%;
  color: white;
  width: 23px;
  height: 23px;
  text-align: center;
  line-height: 23px;
}
.wm811 .background-art__spark {
  position: absolute;
  right: 77px;
  top: 72px;
  font-size: 47px;
  color: #77deb1;
}
.wm811 .section-heading {
  text-align: center;
  margin-bottom: 49px;
}
.wm811 .step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  list-style: none;
}
.wm811 .step-grid > li {
  background: #f8fcf9;
  border: 1px solid #e7eee7;
  border-radius: 16px;
  padding: 23px 26px 27px;
}
.wm811 .step-art {
  height: 103px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wm811 .mini-picture {
  display: block;
  position: relative;
  width: 79px;
  height: 61px;
  border: 2px solid #6edeb2;
  background: #dcf9e8;
  border-radius: 9px;
  transform: rotate(-7deg);
}
.wm811 .mini-picture:before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  top: 9px;
  left: 12px;
  background: #6ad7a7;
  border-radius: 50%;
}
.wm811 .mini-picture i {
  position: absolute;
  bottom: 8px;
  left: 12px;
  width: 52px;
  height: 28px;
  background: #45c990;
  clip-path: polygon(0 100%, 30% 35%, 48% 64%, 72% 12%, 100% 100%);
}
.wm811 .mini-picture b {
  position: absolute;
  right: -13px;
  top: -13px;
  width: 29px;
  height: 29px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  background: #1ac596;
  font-size: 22px;
  font-weight: 400;
}
.wm811 .step-art--select > span {
  position: relative;
  border: 1px solid #28cb9d;
  font-size: 24px;
  color: #217955;
  padding: 7px 13px;
  background: #e0f9e9;
}
.wm811 .step-art--generate > span {
  font-size: 24px;
  color: #22835c;
  padding: 7px 25px 7px 13px;
  border-bottom: 2px solid #24be8c;
  position: relative;
}
.wm811 .step-art--generate i {
  position: absolute;
  right: 13px;
  top: 12px;
  width: 1px;
  height: 24px;
  background: #2dc69c;
}
.wm811 .step-art--generate > b {
  color: #32d59c;
  font-size: 35px;
  position: absolute;
  right: 55px;
  top: 0;
}
.wm811 .step-copy {
  position: relative;
  padding-left: 36px;
  margin-top: 13px;
}
.wm811 .step-copy > span {
  position: absolute;
  left: 0;
  top: 2px;
  color: #16ad7b;
  font-size: 17px;
  font-weight: 700;
}
.wm811 .step-copy h3 {
  font-size: 21px;
}
.wm811 .step-copy p {
  color: #758a7b;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 12px;
}
.wm811 .closing {
  position: relative;
  z-index: 2;
  overflow: visible;
  background: linear-gradient(120deg, #e9fcf0, #d7f6e5);
  padding: 54px 0;
}
.wm811 .closing__layout {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 70px;
  align-items: center;
}
.wm811 .closing__art {
  height: 360px;
  position: relative;
}
.wm811 .device--closing {
  width: 144px;
  position: absolute;
  left: 200px;
  top: 2px;
  transform: rotate(12deg);
  border-radius: 24px;
  padding: 14px 6px 8px;
}
.wm811 .device--closing .device__screen {
  border-radius: 15px;
}
.wm811 .device--closing .device__side:after {
  display: none;
}
.wm811 .closing__logo {
  position: absolute;
  left: 97px;
  top: 180px;
  transform: rotate(-13deg);
  padding: 13px;
  background: linear-gradient(140deg, #fff, #dff6e8);
  border-radius: 29px;
  box-shadow: 0 12px 30px rgba(33, 109, 70, 0.1254901961);
  border: 1px solid #fff;
}
.wm811 .closing__logo img {
  width: 86px;
  height: 86px;
  border-radius: 19px;
  display: block;
}
.wm811 .closing__edit {
  position: absolute;
  left: 74px;
  top: 88px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #fff;
  border-radius: 13px;
  background: linear-gradient(135deg, #fff, #edfff7);
  box-shadow: 0 8px 24px rgba(33, 109, 70, 0.0784313725);
  color: #16835f;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  animation: wm811-float-closing 4.4s ease-in-out infinite;
}
@keyframes wm811-float-closing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.wm811 .closing__edit svg {
  width: 24px;
  height: 24px;
  stroke: #15ba88;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wm811 .closing__copy h2 {
  font-size: 35px;
  line-height: 1.55;
}
.wm811 .closing__copy > p:not(.eyebrow) {
  font-size: 15px;
  color: #759380;
  margin: 18px 0 26px;
}
@media (prefers-reduced-motion: reduce) {
  .wm811 *, .wm811 *:before, .wm811 *:after {
    animation: none !important;
    transition: none !important;
  }
}
.wm811 {
  /* 完整操作界面略长，上移手机以露出底部按钮与手势条。 */
}
.wm811 .device--hero-app {
  top: 20px;
}
.wm811 {
  /* 两张原图独立叠放：手机只裁切屏幕，结果海报位于手机模型外。 */
}
.wm811 .hero-composition {
  position: absolute;
  top: 20px;
  left: 220px;
  width: 247px;
  transform: rotate(9deg);
  z-index: 2;
}
.wm811 .hero-composition .device--hero-app {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  transform: none;
}
.wm811 .hero-composition__result {
  position: absolute;
  left: 56%;
  top: 39%;
  width: 58.2%;
  height: auto;
  display: block;
  z-index: 3;
  filter: drop-shadow(7px 10px 9px rgba(24, 61, 57, 0.1882352941));
  pointer-events: none;
}
.wm811 {
  /* 小图标概览、操作片段、使用场景；不改动 APP 原始界面素材。 */
}
.wm811 .overview {
  background: #fff;
}
.wm811 .benefit-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.wm811 .benefit-item {
  padding: 30px;
  border: 1px solid #e4eee8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(25, 79, 49, 0.0274509804);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
@media (hover: hover) and (pointer: fine) {
  .wm811 .benefit-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(36, 87, 56, 0.1019607843);
    border-color: #9be3c5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wm811 .benefit-item:hover {
    transform: none;
  }
}
.wm811 .mini-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(23, 124, 81, 0.1254901961);
}
.wm811 .mini-glyph svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wm811 .mini-glyph--text {
  background: linear-gradient(135deg, #1acaad, #0eae88);
}
.wm811 .mini-glyph--erase {
  background: linear-gradient(135deg, #55bcd5, #4098c0);
  box-shadow: 0 6px 14px rgba(40, 140, 162, 0.1098039216);
}
.wm811 .mini-glyph--cutout {
  background: linear-gradient(135deg, #a696d6, #8a7dbc);
  box-shadow: 0 6px 14px rgba(117, 105, 155, 0.1098039216);
}
.wm811 .benefit-item h3 {
  font-size: 22px;
  line-height: 1.5;
  margin: 21px 0 12px;
}
.wm811 .benefit-item p {
  font-size: 15px;
  color: #6b7e73;
  line-height: 1.9;
}
.wm811 .benefit-item p br {
  display: none;
}
.wm811 .operation-stage {
  width: 100%;
  min-width: 0;
  padding: 36px 30px 23px;
  border-radius: 24px;
  background: linear-gradient(135deg, #e4f2f0, #e6eef7 75%, #f0edf7);
}
.wm811 .operation-stage--cutout {
  background: linear-gradient(135deg, #e2f5ed, #e9e9f6);
}
.wm811 .operation-card {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.8509803922);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9490196078);
  padding: 24px;
  box-shadow: 0 22px 44px rgba(25, 63, 56, 0.1254901961);
}
.wm811 .operation-card__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  color: #2a4235;
}
.wm811 .operation-card__head .mini-glyph {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: none;
}
.wm811 .operation-card__head .mini-glyph svg {
  width: 18px;
  height: 18px;
}
.wm811 .operation-card__head strong {
  font-size: 16px;
  font-weight: 600;
}
.wm811 .operation-card__hint {
  margin-left: auto;
  font-size: 11px;
  color: #a0afa6;
  white-space: nowrap;
}
.wm811 .operation-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.wm811 .operation-card__footer > span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #7d9487;
}
.wm811 .operation-card__footer > span svg {
  width: 14px;
  height: 14px;
  stroke: #18b28a;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.wm811 .operation-card__action {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 17px;
  border-radius: 9px;
  background: linear-gradient(100deg, #37efab, #19d8b0);
  font-size: 13px;
  font-weight: 600;
  color: #07523c;
  white-space: nowrap;
}
.wm811 .operation-card__action b {
  font-size: 18px;
  font-weight: 400;
}
.wm811 .operation-stage__caption {
  font-size: 12px;
  color: #7d948a;
  text-align: center;
  margin-top: 22px;
  line-height: 1.8;
}
.wm811 .background-section {
  background: linear-gradient(130deg, #f6fcf8, #f0f9f3 65%, #f9faf1);
}
.wm811 .copy-callout {
  border-top: 0;
  padding-top: 10px;
}
.wm811 .step-grid > li {
  background: linear-gradient(145deg, #f2fbf5, #fff);
  border: 0;
  box-shadow: 0 10px 28px rgba(36, 87, 56, 0.0352941176);
  border-radius: 22px;
  outline: 1px solid transparent;
  transition: transform 0.28s ease, box-shadow 0.28s ease, outline-color 0.28s ease;
}
@media (hover: hover) and (pointer: fine) {
  .wm811 .step-grid > li:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(36, 87, 56, 0.1019607843);
    outline-color: #9be3c5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wm811 .step-grid > li:hover {
    transform: none;
  }
}
.wm811 .experience-section {
  background: linear-gradient(180deg, #fafcfb, #f2f9f4);
}
.wm811 .experience-section__intro {
  font-size: 16px;
  line-height: 1.8;
  color: #829187;
  margin-top: 18px !important;
}
.wm811 .experience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.wm811 .experience-card {
  padding: 25px 27px;
  border: 1px solid #e4eee6;
  background: #fff;
  border-radius: 17px;
  display: flex;
  flex-direction: column;
}
.wm811 .experience-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.wm811 .experience-card__stars {
  font-size: 22px;
  letter-spacing: 4px;
  color: #f3bb45;
  line-height: 1;
}
.wm811 {
  /* 沿用参考页的引号轮廓，保留当前评价卡片的浅绿色。 */
}
.wm811 .experience-card__quote {
  display: block;
  width: 43px;
  height: 31px;
  flex-shrink: 0;
  color: #cce7d9;
}
.wm811 .experience-card > p {
  font-size: 16px;
  line-height: 1.95;
  color: #586f60;
  flex: 1;
}
.wm811 .experience-card__person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 4px;
}
.wm811 .experience-card__avatar {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  background: #edf4ef;
}
.wm811 .experience-card__person .mini-glyph svg {
  width: 20px;
  height: 20px;
}
.wm811 .experience-card__person h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.wm811 .experience-card__person div > span {
  display: block;
  font-size: 13px;
  color: #87978d;
  margin-top: 4px;
}
.wm811 .experience-card__person > b {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  color: #7da38c;
  background: #f1f8f3;
  border-radius: 20px;
  padding: 5px 8px;
  white-space: nowrap;
}
.wm811 .experience-section__note {
  text-align: center;
  font-size: 12px;
  color: #99aaa0;
  margin-top: 25px !important;
}
.wm811 .closing {
  background: radial-gradient(ellipse at 30% 55%, #c6f4d9, transparent 55%), linear-gradient(120deg, #ecfaf1, #e2f6e9);
}
.wm811 .text-motion {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  background: #fff;
  border: 1px solid #e1eee6;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 16px 40px rgba(27, 104, 64, 0.0392156863);
}
.wm811 .motion-player {
  overflow: hidden;
  border-radius: 13px;
  background: #fff;
  min-width: 0;
}
.wm811 .motion-player__screen {
  position: relative;
  background: #edf2ee;
  overflow: hidden;
}
.wm811 .motion-player video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: contain;
}
.wm811 [data-motion=erase] video {
  aspect-ratio: 3/2;
}
.wm811 .motion-player__badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3764705882);
  color: #fff;
  background: rgba(18, 60, 43, 0.7333333333);
  border-radius: 20px;
  font-size: 11px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.wm811 .motion-player__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 3px 3px;
}
.wm811 .motion-player__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.wm811 .motion-player__steps > span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #a0afa5;
  transition: color 0.2s;
}
.wm811 .motion-player__steps > span b {
  font-size: 10px;
  font-weight: 500;
}
.wm811 .motion-player__steps > span.is-active {
  color: #0e9f79;
}
.wm811 .text-motion__copy {
  padding: 10px 17px 10px 5px;
}
.wm811 .text-motion__copy > .eyebrow {
  font-size: 12px;
  display: block;
}
.wm811 .text-motion__copy h3 {
  font-size: 27px;
  line-height: 1.55;
}
.wm811 .text-motion__fields {
  margin: 23px 0;
}
.wm811 .text-motion__fields > div {
  padding: 12px 18px;
  background: #f7faf7;
  border: 1px solid #e4ece5;
  border-radius: 10px;
}
.wm811 .text-motion__fields > div:last-child {
  background: #f1fff7;
  border-color: #75dabb;
}
.wm811 .text-motion__fields span {
  display: block;
  font-size: 11px;
  color: #98a99e;
  margin-bottom: 6px;
}
.wm811 .text-motion__fields strong {
  font-size: 20px;
  color: #325842;
  font-weight: 500;
}
.wm811 .text-motion__fields i {
  display: inline-block;
  height: 18px;
  border-left: 1px solid #16b886;
  margin-left: 5px;
  vertical-align: -1px;
}
.wm811 .text-motion__fields > b {
  display: block;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  color: #22c79b;
  font-weight: 400;
}
.wm811 .text-motion__copy > p {
  font-size: 13px;
  line-height: 1.9;
  color: #7e9586;
}
.wm811 .operation-stage--motion {
  padding: 26px 22px 22px;
}
.wm811 .operation-stage--motion .operation-card__head {
  margin-bottom: 18px;
}
.wm811 .operation-stage--motion .motion-player {
  padding: 9px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(36, 70, 56, 0.0705882353);
}
.wm811 .operation-stage--motion .motion-player__screen {
  border-radius: 8px;
}
.wm811 {
  /* 步骤说明上移，并在白色卡片底部保留充足留白。 */
}
.wm811 .operation-stage--motion .motion-player__bar {
  align-items: center;
  padding: 10px 6px 14px;
  gap: 8px;
}
.wm811 .operation-stage--motion .motion-player__steps {
  gap: 28px;
}
.wm811 .operation-stage--motion .motion-player__steps > span {
  font-size: 10px;
  gap: 3px;
}
.wm811 .operation-stage--motion .motion-player__steps > span b {
  font-size: 9px;
}
.wm811 .motion-support {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #729180;
  font-size: 11px;
  margin-top: 20px;
  line-height: 1.8;
}
.wm811 .motion-support b {
  color: #10bd91;
  margin-right: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .wm811 .motion-player__steps > span {
    transition: none;
  }
}
.wm811 .app-download {
  position: relative;
  display: inline-block;
}
.wm811 .app-download__popover {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  width: 180px;
  min-height: 210px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(18, 60, 43, 0.2509803922);
  visibility: hidden;
  opacity: 0;
  z-index: 90;
  text-align: center;
  transition: opacity 0.15s;
}
.wm811 .app-download__popover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}
.wm811 .app-download:hover .app-download__popover, .wm811 .app-download:focus-within .app-download__popover {
  visibility: visible;
  opacity: 1;
}
.wm811 .app-download__popover .qrcode-img {
  width: 150px;
  height: 150px;
}
.wm811 .app-download__popover .qrcode-img canvas, .wm811 .app-download__popover .qrcode-img img {
  display: block;
  width: 150px;
  height: 150px;
}
.wm811 .app-download__popover p {
  font-size: 14px;
  line-height: 1.45;
  color: #527864;
  margin: 0;
}
.wm811 .cta {
  cursor: pointer;
}
.wm811 .cta {
  transition: filter 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .wm811 .cta:hover {
    filter: brightness(0.94);
    border-color: #00b89f;
    box-shadow: 0 12px 28px rgba(2, 158, 124, 0.2509803922), inset 0 1px #acffee;
  }
}
.wm811 .cta:focus-visible {
  outline: 3px solid #6edec6;
  outline-offset: 4px;
}