/* 「怎么学」重做（预览）：每步只放大一个关键元素，镜头推拉切换；只动 transform / opacity */
.how2{background:#fff;border-radius:40px 40px 0 0;padding:88px var(--pad) 40px}
.h2-wrap{max-width:1240px;margin:0 auto;position:relative}
.h2-sticky{position:sticky;top:calc(60px + var(--sat));z-index:2;padding-bottom:10px;background:linear-gradient(#fff 88%,rgba(255,255,255,0))}
.h2-stage{position:relative;height:min(52svh,440px);border-radius:28px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 80% 0%,#e3f7d2 0%,#f1f8ea 45%,#eef3ea 100%);box-shadow:inset 0 0 0 1px rgba(15,61,34,.06)}
/* 镜头：后面一台很大的手机（只露出一角），每步平移 + 缩放，像摄像机推过去 */
.h2-cam{position:absolute;inset:0;transform-origin:50% 50%;transition:transform 1.1s cubic-bezier(.65,0,.2,1);will-change:transform}
.h2-device{position:absolute;left:50%;top:50%;width:560px;height:1180px;margin:-590px 0 0 -280px;border-radius:84px;border:18px solid #0d1a12;background:#fafbf8;box-shadow:0 60px 120px -40px rgba(15,61,34,.45)}
.h2-notch{position:absolute;top:18px;left:50%;width:150px;height:34px;margin-left:-75px;border-radius:20px;background:#0d1a12}
.h2-lines{position:absolute;inset:110px 46px;display:grid;gap:34px;align-content:start}
.h2-lines i{display:block;height:64px;border-radius:8px 26px 26px 26px;background:#fff;box-shadow:0 0 0 2px #edf1ea;width:72%}
.h2-lines i:nth-child(3n){width:54%;margin-left:auto;background:#e3f6d4;box-shadow:none;border-radius:26px 8px 26px 26px}
.h2-lines i:nth-child(4n){width:84%}
.h2-stage[data-step="0"] .h2-cam{transform:translate(18%,32%) scale(1.05) rotate(-6deg)}
.h2-stage[data-step="1"] .h2-cam{transform:translate(-22%,8%) scale(1.25) rotate(4deg)}
.h2-stage[data-step="2"] .h2-cam{transform:translate(24%,-20%) scale(1.45) rotate(-3deg)}
.h2-stage[data-step="3"] .h2-cam{transform:translate(-18%,-38%) scale(1.2) rotate(5deg)}
.h2-stage[data-step="4"] .h2-cam{transform:translate(10%,-58%) scale(1.35) rotate(-4deg)}
/* 场景：当前 .on；离开的往镜头里推（放大淡出），进来的从远处拉近 */
.sc{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:22px;
  opacity:0;transform:scale(.82) translateY(40px);transition:opacity .55s ease,transform 1s cubic-bezier(.65,0,.2,1);pointer-events:none}
.sc.past{opacity:0;transform:scale(1.22) translateY(-30px)}
.sc.on{opacity:1;transform:none;transition-delay:.18s,.1s}
/* 通用大号聊天元素（实时 HTML，清晰） */
.cm{display:flex;gap:12px;align-items:flex-start;width:min(100%,520px)}
.cm img,.av-news{width:52px;height:52px;border-radius:15px;flex:none;object-fit:cover;background:#e8efe6;box-shadow:0 6px 16px -8px rgba(0,0,0,.3)}
.av-news{display:grid;place-items:center;font-size:28px;background:#fff}
.cm .nm{font-size:14px;color:#7b897f;margin:0 0 4px 2px;font-weight:600}
.bb{background:#fff;border-radius:6px 22px 22px 22px;padding:14px 18px;font-size:clamp(17px,4.6vw,22px);line-height:1.45;font-weight:600;color:#13261a;box-shadow:0 14px 34px -18px rgba(15,61,34,.4),0 0 0 1px #e6ebe4}
.bb .en{display:block;font-size:.72em;color:#8b978f;font-weight:500;margin-top:4px}
.bb .en.big{font-size:1em;color:#13261a;font-weight:700}
.cm.me{flex-direction:row-reverse;margin-left:auto}
.cm.me .bb{background:#d9f4c4;border-radius:22px 6px 22px 22px;box-shadow:0 14px 34px -18px rgba(42,148,80,.5)}
/* 01 */
.ask{font-size:13px;font-weight:700;color:var(--g);letter-spacing:.08em}
.chips{display:grid;gap:10px;width:min(100%,420px)}
.chip{display:block;background:#fff;border-radius:16px;padding:13px 18px;font-size:clamp(16px,4.2vw,19px);font-weight:700;box-shadow:0 0 0 2px #d8e9cf;color:#13261a}
.sc0 .sent{width:auto;opacity:0;margin-top:2px}
.tap{position:absolute;width:56px;height:56px;border-radius:50%;background:rgba(42,148,80,.28);left:56%;top:58%;opacity:0}
.sc0.play .cm:first-child{animation:pop .6s .3s cubic-bezier(.2,.9,.3,1.3) both}
.sc0.play .ask{animation:rise .5s .9s both}
.sc0.play .ask{animation:rise .5s .9s both}
.sc0.play .chip{animation:rise .5s both}
.sc0.play .chip:nth-child(1){animation-delay:1.1s}.sc0.play .chip:nth-child(2){animation-delay:1.22s}.sc0.play .chip:nth-child(3){animation-delay:1.34s}
.sc0.play .chip.pick{animation:rise .5s 1.22s both,pick 2.6s 2.2s forwards}
.sc0.play .tap{animation:tap .7s 2.2s both}
.sc0.play .sent{animation:pop .6s 3.2s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes pick{0%{transform:none}8%{transform:scale(.95)}18%{transform:scale(1.03);background:var(--g);color:#fff;box-shadow:0 0 0 2px var(--g)}100%{transform:scale(1);background:var(--g);color:#fff;box-shadow:0 0 0 2px var(--g)}}
@keyframes tap{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
@keyframes chipsout{to{opacity:0;transform:translateY(-14px) scale(.96)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
/* 02 */
.sc1 .en.big b{font-weight:800;background:linear-gradient(var(--g2),var(--g2)) 0 92%/0% 38% no-repeat;transition:none}
.sc1.play .cm{animation:pop .6s .3s cubic-bezier(.2,.9,.3,1.3) both}
.sc1.play .en.big b{animation:hl .7s 1.2s both}
@keyframes hl{to{background-size:100% 38%;color:#1d7a3e}}
.wave{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle;height:20px;align-items:center}
.wave i{width:4px;height:100%;border-radius:2px;background:var(--g);transform:scaleY(.25)}
.sc1.play .wave i{animation:wv .5s 1.5s 5 alternate ease-in-out both}
.sc1.play .wave i:nth-child(2){animation-delay:1.6s}.sc1.play .wave i:nth-child(3){animation-delay:1.7s}.sc1.play .wave i:nth-child(4){animation-delay:1.55s}.sc1.play .wave i:nth-child(5){animation-delay:1.65s}
@keyframes wv{to{transform:scaleY(1)}}
.lcard{width:min(100%,360px);background:#fff;border-radius:24px;padding:18px 22px;box-shadow:0 30px 60px -24px rgba(15,61,34,.45),0 0 0 1px #e6ebe4;opacity:0}
.lh{font-size:13px;font-weight:700;color:var(--g)}.lw{font-size:clamp(30px,8vw,40px);font-weight:900;color:var(--g);line-height:1.1;margin:4px 0}
.ls{font-size:15px;color:#5b6b60}.lbtn{display:inline-block;margin-top:12px;background:var(--deep);color:#fff;font-weight:700;padding:9px 18px;border-radius:99px;font-size:15px}
.sc1.play .lcard{animation:card .8s 3.4s cubic-bezier(.2,.9,.25,1.25) both}
@keyframes card{from{opacity:0;transform:translateY(60px) scale(.8) rotate(-4deg)}to{opacity:1;transform:none}}
.burst{position:absolute;left:50%;top:62%;width:0;height:0}
.burst i{position:absolute;width:10px;height:10px;border-radius:3px;background:var(--g2);opacity:0}
.burst i:nth-child(even){background:#ffd166;border-radius:50%}
.sc1.play .burst i{animation:bst .9s 3.6s ease-out both}
.burst i:nth-child(1){--x:-150px;--y:-90px}.burst i:nth-child(2){--x:140px;--y:-110px}.burst i:nth-child(3){--x:-170px;--y:30px}.burst i:nth-child(4){--x:170px;--y:20px}
.burst i:nth-child(5){--x:-90px;--y:-150px}.burst i:nth-child(6){--x:100px;--y:-160px}.burst i:nth-child(7){--x:-60px;--y:110px}.burst i:nth-child(8){--x:70px;--y:120px}
@keyframes bst{0%{opacity:1;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.1) rotate(160deg)}}
/* 03 */
.mic{position:relative;width:84px;height:84px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center}
.mic svg{width:40px;height:40px}
.ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--g2);opacity:0}
.sc2.play .ring{animation:ring 1.4s .4s 2 ease-out both}.sc2.play .r2{animation-delay:1.1s}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
.words{font-size:clamp(28px,8vw,46px);font-weight:900;letter-spacing:-.01em;text-align:center;line-height:1.25}
.w{display:inline-block;color:#c9d3cb}
.sc2.play .w{animation:wd .45s both}
.sc2.play .w:nth-child(1){animation-delay:2.2s}.sc2.play .w:nth-child(2){animation-delay:2.4s}.sc2.play .w:nth-child(3){animation-delay:2.6s}.sc2.play .w:nth-child(4){animation-delay:2.8s}.sc2.play .w:nth-child(5){animation-delay:3s}
.w.g{--c:#2a9450}.w.y{--c:#d99a00}.w.r{--c:#e0483e}
@keyframes wd{0%{transform:translateY(0)}40%{transform:translateY(-8px) scale(1.08)}100%{color:var(--c);transform:none}}
.w.r{text-decoration:underline wavy transparent 3px;text-underline-offset:8px}
.sc-num{font-size:clamp(44px,12vw,64px);font-weight:900;color:var(--g);line-height:1;opacity:0}
.sc-num small{font-size:.35em;margin-left:4px}
.sc2.play .sc-num{animation:pop .6s 3.5s cubic-bezier(.2,.9,.3,1.4) both}
/* 04 */
.notif{display:flex;gap:12px;align-items:center;width:min(100%,420px);background:rgba(255,255,255,.92);border-radius:20px;padding:12px 16px;box-shadow:0 20px 40px -20px rgba(0,0,0,.35);opacity:0}
.notif img{width:40px;height:40px;border-radius:10px}.nt{font-weight:800;font-size:15px}.nb{font-size:14px;color:#5b6b60}
.sc3.play .notif{animation:drop .7s .3s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes drop{from{opacity:0;transform:translateY(-70px) scale(.92)}to{opacity:1;transform:none}}
.ncard{position:relative;width:min(100%,360px);height:190px;perspective:1000px}
.nf{position:absolute;inset:0;border-radius:24px;padding:20px 22px;display:flex;flex-direction:column;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:none}
.nf.front{background:#fff;box-shadow:0 30px 60px -28px rgba(15,61,34,.45),0 0 0 1px #e6ebe4}
.nf.back{background:var(--deep);color:#fff;transform:rotateY(180deg)}
.nk{font-size:13px;font-weight:700;color:var(--g)}.nf.back .nk{color:var(--g2)}
.nq{font-size:clamp(22px,6vw,28px);font-weight:900;line-height:1.3;margin-top:4px}.nq.en{color:var(--g2)}
.nok{font-size:14px;margin-top:8px;color:#bfe3c6}
.sc3.play .ncard{animation:rise .6s 1s both}
.sc3.play .nf.front{animation:flipA .8s 2.6s cubic-bezier(.6,0,.2,1) both}
.sc3.play .nf.back{animation:flipB .8s 2.6s cubic-bezier(.6,0,.2,1) both}
@keyframes flipA{to{transform:rotateY(-180deg)}}@keyframes flipB{to{transform:rotateY(0)}}
/* 05 */
.sc4.play .cm:first-child{animation:pop .6s .3s cubic-bezier(.2,.9,.3,1.3) both}
.sc4 .en.big b{background:linear-gradient(var(--g2),var(--g2)) 0 92%/0% 38% no-repeat}
.sc4.play .en.big b{animation:hl .7s 1.3s both}
.sc4 .sent2{opacity:0}.sc4.play .sent2{animation:pop .6s 2.6s cubic-bezier(.2,.9,.3,1.3) both}
/* 进度轨 + 当前步骤 */
.h2-rail{position:relative;display:flex;justify-content:space-between;margin:14px 6px 0;height:30px;align-items:center}
.h2-rail::before,.h2-rail .fill{content:"";position:absolute;left:14px;right:14px;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:#e3ebe0}
.h2-rail .fill{background:var(--g);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.h2-rail .d{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:#fff;color:#9aa79e;box-shadow:0 0 0 2px #e3ebe0;transition:transform .4s cubic-bezier(.2,.9,.3,1.4),background .3s,color .3s,box-shadow .3s}
.h2-rail .d.on{background:var(--g);color:#fff;box-shadow:0 0 0 2px var(--g),0 6px 16px -6px rgba(42,148,80,.7);transform:scale(1.18)}
.h2-rail .d.done{background:#e8f6e9;color:var(--g);box-shadow:0 0 0 2px #bfe3c6}
/* 步骤文字 */
.h2-steps{list-style:none;padding:0;margin:0}
.h2-step{min-height:62svh;display:flex;flex-direction:column;justify-content:center;padding:24px 4px}
.h2-step .n{align-self:flex-start;font-weight:900;font-size:14px;color:var(--g);background:#e8f6e9;padding:4px 10px;border-radius:99px}
.h2-step h3{font-size:clamp(26px,6.6vw,44px);font-weight:900;margin:14px 0 10px;line-height:1.15}
.h2-step p{color:var(--mut);font-size:17px;max-width:26em}
.h2-step>*{opacity:.22;transform:translateY(18px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.h2-step.on>*{opacity:1;transform:none}
.h2-step.on h3{transition-delay:.06s}.h2-step.on p{transition-delay:.12s}
@media (min-width:1024px){
  .how2{padding:130px 40px 60px}
  .h2-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:72px}
  .h2-sticky{top:12vh;align-self:start;background:none}
  .h2-stage{height:min(68vh,600px)}
  .h2-step{min-height:78vh}
  .bb{font-size:24px}.chip{font-size:20px}.cm img,.av-news{width:60px;height:60px}
}
@media (prefers-reduced-motion:reduce){
  .h2-cam,.sc,.h2-step>*{transition:none!important}
  .sc *,.sc{animation:none!important}
  .sc .chips,.sc .ask,.sc0 .tap{opacity:0}
  .sc .lcard,.sc .sent,.sc .sent2,.sc .notif,.sc .sc-num{opacity:1}
  .sc .w{color:var(--c)}
  .sc .en.big b{background-size:100% 38%}
  .sc3 .nf.front{transform:rotateY(-180deg)}.sc3 .nf.back{transform:none}
  .sc1 .wave i{transform:scaleY(.6)}
}
/* 手机：舞台矮一点，正文从舞台下方露出来 */
@media (max-width:1023px){.h2-stage{height:min(44svh,380px)}.h2-step{min-height:58svh}}
@media (max-width:1023px){.sc{gap:10px;padding:16px}.sc0 .ask{display:none}.chip{padding:10px 14px}.cm img,.av-news{width:44px;height:44px}.ncard{height:160px}.lcard{padding:14px 18px}}