.pf-how{padding:76px 0 28px;scroll-margin-top:-40px}.pf-body .pf-how:focus-visible{outline:none}.pf-how-head{text-align:center;flex-direction:column;align-items:center;gap:16px;margin-bottom:40px;display:flex}.pf-main .pf-how-head :is(h1,h2){letter-spacing:-.03em;font-size:34px;font-weight:650;line-height:1.2}.pf-how-tools{color:var(--pf-muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0;font-size:12.5px;display:flex}.pf-how-tools span{border:1px solid var(--pf-line);background:var(--pf-surface);color:var(--pf-ink);border-radius:999px;padding:4px 11px;font-weight:550}.pf-how-tools span:first-child{margin-left:4px}.pf-how-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:1200px;margin:0 auto;padding:0;list-style:none;display:grid}.pf-how-step{flex-direction:column;gap:16px;min-width:0;display:flex;position:relative}.pf-how-step>p{color:var(--pf-ink);align-items:center;gap:10px;margin:0;font-size:15px;font-weight:600;display:flex}.pf-how-step>p b{background:var(--pf-ink);width:24px;height:24px;color:var(--pf-inverse);border-radius:50%;flex:none;place-items:center;font-size:12px;font-weight:650;display:grid}.pf-how-visual{background:var(--pf-tint);border-radius:22px;place-items:center;height:272px;display:grid;position:relative;overflow:hidden}.pf-how-arrow{z-index:2;border:1px solid var(--pf-line);background:var(--pf-bg);width:34px;height:34px;color:var(--pf-ink);border-radius:50%;place-items:center;font-size:15px;display:grid;position:absolute;top:136px;left:-14px;transform:translate(-50%,-50%)}.pf-how-card{background:var(--pf-surface);border-radius:14px;width:min(220px,74%);padding:8px 8px 10px;transform:rotate(-3deg);box-shadow:0 14px 34px #172b251f}.pf-how-card img{border-radius:8px;width:100%;height:auto;display:block}.pf-how-card-name{color:var(--pf-ink);white-space:nowrap;justify-content:space-between;align-items:center;gap:8px;padding:9px 3px;font-size:12.5px;font-weight:600;display:flex}.pf-how-card-name small{background:var(--pf-mint-soft);color:var(--pf-mint-text);border-radius:999px;padding:2px 7px;font-size:10.5px;font-weight:650}.pf-how-fake-btn{background:var(--pf-action);height:32px;color:var(--pf-inverse);white-space:nowrap;border-radius:999px;place-items:center;font-size:12px;font-weight:600;display:grid;position:relative}.pf-how-pointer{width:22px;height:22px;position:absolute;top:16px;right:-10px}.pf-how-pointer svg{width:100%;height:100%;fill:var(--pf-surface);stroke:var(--pf-ink);stroke-width:1.6px;stroke-linejoin:round;filter:drop-shadow(0 2px 3px #172b2540);position:relative}.pf-how-tap{opacity:0;border:2px solid #ffffffd9;border-radius:50%;width:26px;height:26px;position:absolute;top:-9px;left:-8px}.pf-how-term{color:#e7ede8;cursor:zoom-in;width:min(314px,84%);max-height:calc(100% - 22px);transition:transform .35s var(--pf-ease);background:#121a16;border:0;border-radius:14px;flex-direction:column;padding:0;display:flex;position:relative;overflow:hidden;box-shadow:0 18px 40px #172b2538,inset 0 0 0 1px #ffffff0f}.pf-how-term:hover,.pf-how-term:focus-visible{transform:translateY(-2px)scale(1.015)}.pf-how-term-bar{letter-spacing:.01em;flex:none;align-items:center;gap:5px;padding:8px 10px;font-size:10.5px;font-weight:600;display:flex}.pf-how-term-bar i{background:#35433b;border-radius:50%;width:7px;height:7px}.pf-how-term-bar i:first-child{background:#d9ee98}.pf-how-term-bar span{margin-left:5px}.pf-how-term-bar em{color:#d9ee98;background:#d9ee981f;border:1px solid #d9ee9840;border-radius:999px;margin-left:auto;padding:2px 7px;font-size:9.5px;font-style:normal;font-weight:650}.pf-how-term-screen{aspect-ratio:1.5;border-top:1px solid #ffffff12;display:block;position:relative;overflow:hidden}.pf-how-term-screen video{-o-object-fit:cover;object-fit:cover;-o-object-position:center bottom;object-position:center bottom;width:100%;height:100%;position:absolute;inset:0}.pf-how-term-play{opacity:0;transition:opacity .25s var(--pf-ease);background:#0a100d59;place-items:center;display:grid;position:absolute;inset:0}.pf-how-term-play svg{fill:#121a16;background:#d9ee98;border-radius:50%;width:34px;height:34px;padding:7px;box-shadow:0 8px 20px #00000059}.pf-how-visual[data-still] .pf-how-term-play{opacity:1}.pf-how-term-zoom{opacity:0;width:26px;height:26px;transition:opacity .25s var(--pf-ease);background:#0a100d9e;border-radius:8px;place-items:center;display:grid;position:absolute;bottom:8px;right:8px}.pf-how-term-zoom svg{fill:none;stroke:#e7ede8;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:13px;height:13px}.pf-how-term:hover .pf-how-term-zoom,.pf-how-term:focus-visible .pf-how-term-zoom,.pf-how-visual[data-still] .pf-how-term-zoom{opacity:1}.pf-how-dialog{color:#e7ede8;background:#0f1512;border:0;border-radius:20px;width:min(1020px,94vw);max-width:94vw;max-height:94vh;padding:14px 16px 16px;overflow:auto}.pf-how-dialog::backdrop{backdrop-filter:blur(7px);background:#0c1410bf}.pf-how-dialog>header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px;display:flex}.pf-main .pf-how-dialog>header :is(h3,p){color:#e7ede8}.pf-how-dialog>header h3{margin:0 0 3px;font-size:15px;font-weight:650}.pf-how-dialog>header p{color:#9fb0a6;max-width:62ch;margin:0;font-size:12px;line-height:1.6}.pf-how-dialog>header button{color:#e7ede8;cursor:pointer;background:#e7ede81a;border:0;border-radius:50%;flex:none;width:34px;height:34px;font-size:13px}.pf-how-dialog video{aspect-ratio:1032/784;background:#121a16;border-radius:11px;width:100%;max-height:min(64vh,600px);display:block}.pf-how-chapters{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;margin:12px 0 0;padding:0;list-style:none;display:grid}.pf-how-chapters button{color:#c4d3c8;text-align:left;cursor:pointer;width:100%;min-height:44px;transition:border-color .2s var(--pf-ease), background .2s var(--pf-ease);background:#e7ede80d;border:1px solid #e7ede81f;border-radius:10px;align-items:center;gap:7px;padding:8px 11px;font:550 11.5px/1.35 inherit;display:flex;position:relative}.pf-how-chapters button b{font-variant-numeric:tabular-nums;color:#7d8f86;flex:none;font-weight:650}.pf-how-chapters button:hover,.pf-how-chapters button:focus-visible{background:#d9ee9817;border-color:#d9ee9873}.pf-how-chapters button[aria-current]{color:#eaf5d6;background:#d9ee9824;border-color:#d9ee988c}.pf-how-chapters button[aria-current] b{color:#d9ee98}.pf-how-chapters button[aria-current]:after{content:"";background:linear-gradient(90deg, #d9ee98 var(--pf-chapter-progress,0%), #d9ee9829 var(--pf-chapter-progress,0%));border-radius:2px;height:2px;position:absolute;inset:auto 10px 4px}.pf-how-make{flex-direction:column;align-items:center;gap:16px;width:min(300px,88%);display:flex}.pf-how-pages{justify-content:center;align-items:flex-end;width:100%;display:flex}.pf-how-pages img{background:var(--pf-surface);border-radius:7px;width:31%;max-width:92px;height:auto;box-shadow:0 10px 24px #172b2524}.pf-how-pages img:first-child{transform:translate(10px,6px)rotate(-7deg)}.pf-how-pages img:nth-child(2){z-index:1;position:relative;transform:translateY(-6px)}.pf-how-pages img:nth-child(3){transform:translate(-10px,6px)rotate(7deg)}.pf-how-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px;display:flex}.pf-how-actions .pf-btn{border-radius:999px;gap:14px;height:46px;padding:0 24px;font-size:14px;font-weight:600}.pf-how-actions .pf-btn--ghost{border-color:var(--pf-line);background:0 0}@media (prefers-reduced-motion:no-preference){.pf-how-tap{animation:pf-how-tap 2.4s var(--pf-ease) infinite}@supports (animation-timeline:view()){.pf-how-step{animation:linear both pf-how-rise view();animation-range:entry entry 70%}.pf-how-step:nth-child(2){animation-range:entry 10% entry 85%}.pf-how-step:nth-child(3){animation-range:entry 20%}}}@keyframes pf-how-tap{0%{opacity:.9;transform:scale(.3)}55%,to{opacity:0;transform:scale(1.5)}}@keyframes pf-how-rise{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@media (width<=1000px){.pf-how-steps{gap:20px}.pf-how-visual{height:236px}.pf-how-term{width:min(280px,86%)}.pf-how-arrow{top:118px;left:-10px}.pf-how-step>p{font-size:14px}}@media (width<=760px){.pf-how{padding-top:56px}.pf-how-head{margin-bottom:28px}.pf-main .pf-how-head :is(h1,h2){font-size:26px}.pf-how-steps{grid-template-columns:minmax(0,1fr);gap:26px;max-width:480px}.pf-how-visual{height:248px}.pf-how-term{width:min(300px,88%)}.pf-how-dialog{border-radius:16px;padding:12px}.pf-how-dialog>header{gap:10px}.pf-how-chapters{grid-template-columns:repeat(auto-fit,minmax(124px,1fr))}.pf-how-arrow{display:none}.pf-how-actions{margin-top:32px}.pf-how-actions .pf-btn{height:44px;padding:0 20px;font-size:13px}}
