.how-stage{--how-t:13.2s;aspect-ratio:16/9.4;width:100%;position:relative;container-type:inline-size}.how-stage *{box-sizing:border-box}.how-win{color:#202124;text-align:left;background:#fbfbfd;border:1px solid #00000024;border-radius:1.6cqw;flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden;box-shadow:0 3cqw 6cqw -2cqw #00000073,0 .4cqw 1.2cqw #0003}.how-titlebar{background:linear-gradient(#ededf0,#e3e3e7);border-bottom:1px solid #0000001a;align-items:center;gap:.9cqw;padding:1.7cqw 1.6cqw;display:flex;position:relative}.how-light{border-radius:50%;flex:none;width:1.4cqw;height:1.4cqw}.how-light:first-child{background:#ff5f57}.how-light:nth-child(2){background:#febc2e}.how-light:nth-child(3){background:#28c840}.how-title{color:#3a3a3c;opacity:0;justify-content:center;align-items:center;gap:1cqw;font-size:2.3cqw;font-weight:600;display:flex;position:absolute;left:0;right:0}.how-title-app{animation:how-title-app var(--how-t)linear infinite}.how-title-yt{animation:how-title-yt var(--how-t)linear infinite}@keyframes how-title-app{0%,70.45%{opacity:1}72.73%,to{opacity:0}}@keyframes how-title-yt{0%,70.45%{opacity:0}72.73%,97.73%{opacity:1}to{opacity:0}}.how-yt-logo{background:#f03;border-radius:.7cqw;width:3.4cqw;height:2.4cqw;position:relative}.how-yt-logo:after,.how-play:after{content:"";border:.6cqw solid #0000;border-left:1cqw solid #fff;border-right-width:0;position:absolute;top:50%;left:54%;transform:translate(-50%,-50%)}.how-body{flex:1;position:relative}.how-scene{opacity:0;animation:var(--how-t)linear infinite;position:absolute;inset:0}.how-up{animation-name:how-up}.how-ed{animation-name:how-ed}.how-yt{animation-name:how-yt}@keyframes how-up{0%{opacity:0}.85%,13.07%{opacity:1}14.77%,to{opacity:0}}@keyframes how-ed{0%,13.07%{opacity:0}14.77%,69.89%{opacity:1}72.16%,to{opacity:0}}@keyframes how-yt{0%,71.02%{opacity:0}73.3%,97.73%{opacity:1}to{opacity:0}}.how-land{background:radial-gradient(circle at 68% 58%,#ffe3a3 0 5%,#ffe3a359 9%,#0000 20%),linear-gradient(#2f6d86 0%,#7fb3b8 38%,#f3c58c 64%,#e9906b 78%);position:absolute;inset:0;overflow:hidden}.how-land:before,.how-land:after{content:"";position:absolute;bottom:0;left:-5%;right:-5%}.how-land:before{clip-path:polygon(0 60%,14% 30%,27% 52%,42% 18%,58% 48%,72% 26%,86% 50%,100% 32%,100% 100%,0 100%);background:#2c5a57;height:48%}.how-land:after{clip-path:polygon(0 45%,18% 20%,34% 50%,52% 28%,70% 55%,88% 22%,100% 40%,100% 100%,0 100%);background:#173f3c;height:30%}.how-zone{animation:how-zone var(--how-t)linear infinite;border:.3cqw dashed #14171a33;border-radius:1.6cqw;flex-direction:column;justify-content:center;align-items:center;gap:2cqw;display:flex;position:absolute;inset:5cqw 12cqw}@keyframes how-zone{0%,5.11%{background:0 0;border-color:#14171a33}5.97%,13.64%{background:#1a736112;border-color:#1a7361}to{border-color:#14171a33}}.how-zone-t{color:#383d42;font-size:2.4cqw;font-weight:600}.how-file{color:#14171a;animation:how-file var(--how-t)cubic-bezier(.2,.8,.2,1)infinite;background:#fff;border-radius:1.1cqw;align-items:center;gap:1.2cqw;padding:1.3cqw 1.8cqw;font-size:2.1cqw;font-weight:600;display:flex;box-shadow:0 1cqw 2.6cqw #14171a29}@keyframes how-file{0%,.57%{opacity:0;transform:translate(34cqw,-22cqw)rotate(8deg)}1.7%{opacity:1}5.11%,to{opacity:1;transform:none}}.how-thumb{border-radius:.6cqw;width:5.4cqw;height:3.4cqw;position:relative;overflow:hidden}.how-prog{background:#14171a1a;border-radius:1cqw;width:26cqw;height:.7cqw;overflow:hidden}.how-prog i{width:0;height:100%;animation:how-prog var(--how-t)linear infinite;background:#237f6c;display:block}@keyframes how-prog{0%,5.68%{width:0}12.5%,to{width:100%}}.how-ed{grid-template-rows:auto 1fr;grid-template-columns:42% 1fr;gap:1.6cqw 2cqw;padding:1.8cqw 2.4cqw;display:grid}.how-vid{aspect-ratio:16/9;border-radius:1cqw;align-self:start;position:relative;overflow:hidden}.how-cap{text-align:center;color:#fff;font-size:1.75cqw;line-height:1.35;position:absolute;bottom:7%;left:6%;right:6%}.how-cap span{opacity:0;animation:var(--how-t)linear infinite;position:absolute;bottom:0;left:0;right:0}.how-cap b{background:#0000009e;border-radius:.4cqw;padding:.15em .45em;font-weight:500}.how-cap .how-cap-a{animation-name:how-cap-a}.how-cap .how-cap-b{animation-name:how-cap-b}@keyframes how-cap-a{0%,14.77%{opacity:0}15.91%,36.36%{opacity:1}37.5%,to{opacity:0}}@keyframes how-cap-b{0%,45.45%{opacity:0}46.59%,to{opacity:1}}.how-list{flex-direction:column;gap:.8cqw;display:flex;overflow:hidden}.how-row{opacity:0;animation:var(--how-t)linear infinite;background:#fff;border-radius:.9cqw;flex:none;grid-template-columns:6.4cqw 1fr;align-items:baseline;gap:1.2cqw;padding:.8cqw 1.4cqw;font-size:2.05cqw;line-height:1.45;display:grid;box-shadow:0 .1cqw .3cqw #14171a14}.how-row small{color:#7e848a;font-variant-numeric:tabular-nums;font-size:1.45cqw}.how-row:first-child{animation-name:how-row-1}.how-row:nth-child(2){animation-name:how-row-2}.how-row:nth-child(3){animation-name:how-row-3}.how-row:nth-child(4){animation-name:how-row-4}.how-row:nth-child(5){animation-name:how-row-5}.how-row:nth-child(6){animation-name:how-row-6}@keyframes how-row-1{0%,15.91%{opacity:0;transform:translateY(1cqw)}18.18%,32.95%{opacity:1;transform:none}34.66%,54.55%{opacity:.4}56.82%,to{opacity:1}}@keyframes how-row-2{0%,19.89%{opacity:0;transform:translateY(1cqw)}22.16%,32.95%{opacity:1;transform:none}34.66%,54.55%{opacity:.4}56.82%,to{opacity:1}}@keyframes how-row-3{0%,23.86%{opacity:0;transform:translateY(1cqw);box-shadow:0 .1cqw .3cqw #14171a14}26.14%,32.95%{opacity:1;transform:none;box-shadow:0 .1cqw .3cqw #14171a14}34.09%,55.68%{opacity:1;background:#fff;box-shadow:0 0 0 .25cqw #1a7361}57.95%,to{opacity:1;box-shadow:0 .1cqw .3cqw #14171a14}}@keyframes how-row-4{0%,27.84%{opacity:0;transform:translateY(1cqw)}30.11%,32.95%{opacity:1;transform:none}34.66%,54.55%{opacity:.4}56.82%,to{opacity:1}}@keyframes how-row-5{0%,30.11%{opacity:0;transform:translateY(1cqw)}31.82%,32.95%{opacity:1;transform:none}34.66%,54.55%{opacity:.4}56.82%,to{opacity:1}}@keyframes how-row-6{0%,31.82%{opacity:0;transform:translateY(1cqw)}33.52%{opacity:1;transform:none}34.66%,54.55%{opacity:.4}56.82%,to{opacity:1}}.how-fix{position:relative}.how-old{animation:how-old var(--how-t)linear infinite}@keyframes how-old{0%,36.36%{opacity:1}38.07%,to{opacity:0}}.how-new{position:absolute;top:0;left:0;right:0}.how-new i{opacity:0;animation:var(--how-t)linear infinite;font-style:normal}.how-new i:first-child{animation-name:how-w1}.how-new i:nth-child(2){animation-name:how-w2}.how-new i:nth-child(3){animation-name:how-w3}.how-new i:nth-child(4){animation-name:how-w4}.how-new i:nth-child(5){animation-name:how-w5}@keyframes how-w1{0%,38.64%{opacity:0}39.77%,to{opacity:1}}@keyframes how-w2{0%,40.91%{opacity:0}42.05%,to{opacity:1}}@keyframes how-w3{0%,43.18%{opacity:0}44.32%,to{opacity:1}}@keyframes how-w4{0%,45.45%{opacity:0}46.59%,to{opacity:1}}@keyframes how-w5{0%,47.73%{opacity:0}48.86%,to{opacity:1}}.how-pill{opacity:0;height:5.2cqw;animation:how-pill var(--how-t)cubic-bezier(.2,.8,.2,1)infinite;background:#0e1f1a;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:1.4cqw;padding:0 2.4cqw;display:flex;position:absolute;bottom:2.4cqw;left:50%;transform:translate(-50%)scale(.85);box-shadow:0 1cqw 2.4cqw #00000059}@keyframes how-pill{0%,34.66%{opacity:0;transform:translate(-50%)scale(.85)}36.36%,50%{opacity:1;transform:translate(-50%)scale(1)}52.27%,to{opacity:0;transform:translate(-50%)scale(.85)}}.how-mark{color:#7e9a92;font-size:1.9cqw}.how-bars{align-items:center;gap:.55cqw;height:2.6cqw;display:flex}.how-bars i{width:.55cqw;height:calc(var(--h)*100%);background:#85e6cc;border-radius:.3cqw;animation:.9s ease-in-out infinite alternate how-wave}.how-bars i:first-child{--h:.45}.how-bars i:nth-child(2){--h:.8;animation-delay:-.13s}.how-bars i:nth-child(3){--h:.55;animation-delay:-.26s}.how-bars i:nth-child(4){--h:1;animation-delay:-.39s}.how-bars i:nth-child(5){--h:.7;animation-delay:-.52s}.how-bars i:nth-child(6){--h:.9;animation-delay:-.65s}.how-bars i:nth-child(7){--h:.5;animation-delay:-.78s}.how-bars i:nth-child(8){--h:.85;animation-delay:-.91s}@keyframes how-wave{0%{transform:scaleY(.35)}to{transform:scaleY(1)}}.how-exbar{grid-column:1/-1;justify-content:space-between;align-items:center;display:flex}.how-exname{font-size:2.2cqw;font-weight:600}.how-exname small{color:#656b71;margin-top:.3cqw;font-size:1.5cqw;font-weight:400;display:block}.how-exbtn{z-index:3;color:#383d42;background:#fff;border:1px solid #14171a2b;border-radius:1cqw;padding:1cqw 2cqw;font-size:1.8cqw;font-weight:600;position:relative}.how-menu{z-index:3;opacity:0;width:26cqw;animation:how-menu var(--how-t)cubic-bezier(.2,.8,.2,1)infinite;background:#fff;border:1px solid #14171a2b;border-radius:1.2cqw;padding:.8cqw;position:absolute;top:calc(100% + .8cqw);right:0;box-shadow:0 1.2cqw 3cqw #14171a24}@keyframes how-menu{0%,61.93%{opacity:0;transform:translateY(-.8cqw)}63.64%,68.75%{opacity:1;transform:none}69.89%,to{opacity:0}}.how-menu div{color:#14171a;border-radius:.8cqw;padding:1cqw 1.4cqw;font-size:1.9cqw;font-weight:500}.how-menu .how-srt{animation:how-srt var(--how-t)linear infinite}@keyframes how-srt{0%,65.34%{color:#14171a;background:0 0}66.48%,69.32%{color:#fff;background:#237f6c}70.45%,to{background:0 0}}.how-yt{background:#fff;flex-direction:column;gap:1.2cqw;padding:1.6cqw 4cqw;display:flex}.how-then{color:#606060;align-self:center;align-items:center;gap:1cqw;font-size:1.9cqw;font-weight:500;display:flex}.how-then img{width:auto;height:2.8cqw}.how-ytvid{border-radius:1.2cqw;height:29cqw;position:relative;overflow:hidden}.how-ytcap{text-align:center;color:#fff;font-size:2.3cqw;position:absolute;bottom:13%;left:8%;right:8%}.how-ytcap span{opacity:0;animation:var(--how-t)linear infinite;position:absolute;bottom:0;left:0;right:0}.how-ytcap b{background:#080808bf;padding:.12em .45em;font-weight:500}.how-ytcap span:first-child{animation-name:how-yt1}.how-ytcap span:nth-child(2){animation-name:how-yt2}.how-ytcap span:nth-child(3){animation-name:how-yt3}@keyframes how-yt1{0%,73.86%{opacity:0}74.43%,81.82%{opacity:1}82.39%,to{opacity:0}}@keyframes how-yt2{0%,81.82%{opacity:0}82.39%,89.77%{opacity:1}90.34%,to{opacity:0}}@keyframes how-yt3{0%,89.77%{opacity:0}90.34%,97.73%{opacity:1}98.3%,to{opacity:0}}.how-ytbar{background:#ffffff4d;height:.6cqw;position:absolute;bottom:0;left:0;right:0}.how-ytbar i{height:100%;animation:how-ytbar var(--how-t)linear infinite;background:#f03;display:block}@keyframes how-ytbar{0%,72.73%{width:4%}97.73%,to{width:38%}}.how-cc{color:#fff;border:.2cqw solid #fff;border-radius:.4cqw;padding:.1cqw .5cqw;font-size:1.5cqw;font-weight:700;position:absolute;bottom:2cqw;right:2cqw}.how-cc:after{content:"";background:#f03;border-radius:.2cqw;height:.3cqw;position:absolute;bottom:-.9cqw;left:0;right:0}.how-yttitle{color:#0f0f0f;font-size:2.5cqw;font-weight:700}.how-ytmeta{color:#606060;align-items:center;gap:1.2cqw;font-size:1.8cqw;display:flex}.how-ytmeta i{background:linear-gradient(135deg,#7fb3b8,#2c5a57);border-radius:50%;width:3.4cqw;height:3.4cqw}.how-control{z-index:2;cursor:pointer;background:#00000012;border-radius:50%;place-items:center;width:3.4cqw;height:3.4cqw;display:grid;position:absolute;top:1.1cqw;right:1.4cqw}.how-control:hover{background:#00000024}.how-control:has(input:focus-visible){outline-offset:2px;outline:2px solid #1a7361}.how-control input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.how-control svg{fill:#3a3a3c;width:55%;height:55%}.how-control .how-i-play{display:none}.how-control:has(input:checked) .how-i-pause{display:none}.how-control:has(input:checked) .how-i-play{display:block}.how-stage:has(.how-control input:checked) *{animation-play-state:paused!important}.how-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 0;padding:0;list-style:none;display:grid}.how-steps li{color:var(--dim,#656b71);border-top:2px solid #14171a1f;padding-top:9px;font-size:15px;line-height:1.45;animation:none}.how-steps li b{color:var(--ink,#14171a);margin-bottom:2px;font-size:16px;display:block}.how-steps li:first-child{animation-name:how-step-1}.how-steps li:nth-child(2){animation-name:how-step-2}.how-steps li:nth-child(3){animation-name:how-step-3}@keyframes how-step-1{0%,13.07%{border-top-color:#1a7361}14.77%,to{border-top-color:#14171a1f}}@keyframes how-step-2{0%,13.07%{border-top-color:#14171a1f}14.77%,57.95%{border-top-color:#1a7361}60.23%,to{border-top-color:#14171a1f}}@keyframes how-step-3{0%,57.95%{border-top-color:#14171a1f}60.23%,to{border-top-color:#1a7361}}.how:has(.how-control input:checked) .how-steps li{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.how *{animation:none!important}.how-yt,.how-title-yt,.how-ytcap span:first-child{opacity:1}.how-ytbar i{width:30%}.how-control{display:none}}@media (max-width:640px){.how-steps{grid-template-columns:minmax(0,1fr);gap:12px}}
