.db-how{--doodle:#b9cdf6;--doodle-fill:#cdddfa;position:relative;padding:120px 24px;color:var(--ink)}.db-how:before{content:"";inset:0;z-index:-1;background-color:#f3f7ff;background-image:linear-gradient(#e0e9fa 1px,transparent 0),linear-gradient(90deg,#e0e9fa 1px,transparent 0);background-size:34px 34px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 230px,#000 calc(100% - 180px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 230px,#000 calc(100% - 180px),transparent)}.db-how .mark,.db-how:before{position:absolute;pointer-events:none}.db-how .mark svg{width:100%;height:100%;overflow:visible}.db-how .mark path{stroke:var(--doodle);stroke-width:2.2;fill:none;stroke-linecap:round}.db-how .mk1{left:-5%;top:50%;transform:translateY(-50%);width:22px;height:22px}.db-how .mk2{right:-3%;bottom:-46px;width:18px;height:18px}.db-how .story{max-width:1020px;margin:0 auto}.db-how .story-head{position:relative;display:grid;grid-template-columns:1.15fr .85fr;grid-gap:16px 44px;gap:16px 44px;align-items:end;margin-bottom:48px}.db-how .story-head h2{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.12}.db-how .story-head h2 em{font-style:normal;color:var(--blue)}.db-how .story-head .sub{position:relative;top:10px;color:var(--mut);font-size:1rem;line-height:1.62;padding-bottom:5px}.db-how .steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:18px;gap:18px;align-items:start}.db-how .scard.s2{margin-top:34px}.db-how .scard.s3{margin-top:68px}.db-how .connector{position:absolute;left:3%;right:3%;top:-50px;height:130px;pointer-events:none}.db-how .connector svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1.5px 2px rgba(37,99,235,.22))}.db-how .connector svg:not(.spark) path{stroke:#82a4f5;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-dasharray:1 10;-webkit-clip-path:inset(-20% 105% -20% -3%);clip-path:inset(-20% 105% -20% -3%)}.db-how .story.go .connector svg:not(.spark) path{animation:dbhConnDraw 1.77s ease-out .25s forwards}@keyframes dbhConnDraw{to{-webkit-clip-path:inset(-20% -5% -20% -3%);clip-path:inset(-20% -5% -20% -3%)}}.db-how .connector .spark{position:absolute;left:94.7%;top:90px;width:30px;height:30px;fill:#6f97f2;opacity:0;transform-origin:center}.db-how .connector .spark path{stroke:#fff;stroke-width:1.5;stroke-linejoin:round}.db-how .story.go .connector .spark{animation:dbhSparkPop .45s 2.05s var(--ease-spring) forwards}@keyframes dbhSparkPop{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.db-how .scard{background:#fff;border:1px solid #e7edf7;border-radius:18px;box-shadow:var(--sh-soft);padding:12px 12px 20px;opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s var(--ease-spring),box-shadow .25s}.db-how .story.go .scard{opacity:1;transform:none}.db-how .story.go .scard.s2{transition-delay:.12s}.db-how .story.go .scard.s3{transition-delay:.24s}.db-how .scard:hover{box-shadow:var(--sh-lift);transform:translateY(-3px)}.db-how .scard-body{padding:4px 8px 0}.db-how .mini-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.12em;color:var(--mut-blue);margin-bottom:8px}.db-how .scard h3{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;letter-spacing:-.02em}.db-how .scard h3 .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--tint-2);color:var(--blue);font-size:12px;font-weight:800;display:grid;place-items:center}.db-how .scard p{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--mut)}.db-how .scard p b{color:var(--ink);font-weight:700}.db-how .mv{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9.6;margin-bottom:14px;background:radial-gradient(16rem 9rem at 18% 0,rgba(255,255,255,.9),transparent 60%),linear-gradient(160deg,#e9f0ff,#f6f9ff 55%,#ecf4ff);border:1px solid #e2ebfb}.db-how .mv .ghost{position:absolute;background:#fff;border:1px solid var(--line);border-radius:8px}.db-how .mv .gline{position:absolute;height:7px;border-radius:99px;background:#e6ecf6}.db-how .mv1 .bar{position:absolute;left:0;right:0;top:0;height:22px;background:#fff;border-bottom:1px solid var(--line)}.db-how .mv1 .bar i{position:absolute;top:8px;width:6px;height:6px;border-radius:50%}.db-how .mv1 .bar i:first-child{left:9px;background:#ff5f57}.db-how .mv1 .bar i:nth-child(2){left:20px;background:#febc2e}.db-how .mv1 .bar i:nth-child(3){left:31px;background:#28c840}.db-how .mv1 .miniurl{position:absolute;left:30%;right:30%;top:5px;height:12px;border-radius:6px;background:#f2f5fb}.db-how .rec{position:absolute;top:4px;right:8px;z-index:2;display:flex;align-items:center;gap:5px;height:14px;border-radius:999px;padding:0 8px;font-size:8.5px;font-weight:800;letter-spacing:.08em;background:#fff;border:1px solid #e0e7f2;color:#8496af}.db-how .go .mv1 .rec{animation:dbhRecPill 7s ease infinite}@keyframes dbhRecPill{0%,18%{background:#fff;border-color:#e0e7f2;color:#8496af}21%,to{background:#fff1f0;border-color:#ffd9d5;color:#d64541}}.db-how .rec .dotw{width:6px;height:6px;opacity:0}.db-how .go .mv1 .rec .dotw{animation:dbhRecArm 7s ease infinite}@keyframes dbhRecArm{0%,18%{opacity:0}21%,to{opacity:1}}.db-how .rec .dotw i{display:block;width:6px;height:6px;border-radius:50%;background:#e5544f}.db-how .go .mv1 .rec .dotw i{animation:dbhRecBlink 1.2s ease-in-out infinite}@keyframes dbhRecBlink{0%,to{opacity:1}50%{opacity:.25}}.db-how .mv1 .g1{left:8%;top:34%;width:40%;height:24%}.db-how .mv1 .g2{left:8%;top:64%;width:40%;height:24%}.db-how .mv1 .g3{left:54%;top:34%;width:38%;height:54%}.db-how .mv1 .btn{position:absolute;left:58%;top:70%;width:24%;height:12%;background:var(--blue);border-radius:6px;box-shadow:0 5px 12px -7px rgba(37,99,235,.7)}.db-how .mv1 .curw{position:absolute;inset:0;z-index:3;pointer-events:none}.db-how .mv1 .curw svg{width:15px;filter:drop-shadow(0 2px 3px rgba(15,30,64,.35))}.db-how .go .mv1 .curw{animation:dbhCurWalk 7s ease-in-out infinite}@keyframes dbhCurWalk{0%,6%{transform:translate(50%,66%)}16%,26%{transform:translate(84%,3%)}40%,50%{transform:translate(26%,45%)}62%,88%{transform:translate(69%,74%)}to{transform:translate(50%,66%)}}.db-how .mv1 .ripBtn,.db-how .mv1 .ripMid,.db-how .mv1 .ripRec{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2.5px solid var(--blue);background:rgba(37,99,235,.22);opacity:0;z-index:2}.db-how .mv1 .ripRec{left:87%;top:8%}.db-how .mv1 .ripMid{left:28%;top:46%}.db-how .mv1 .ripBtn{left:70%;top:76%;border-color:rgba(255,255,255,.95);background:rgba(255,255,255,.35)}.db-how .go .mv1 .ripRec{animation:dbhRipRec 7s ease-out infinite}.db-how .go .mv1 .ripMid{animation:dbhRipMid 7s ease-out infinite}.db-how .go .mv1 .ripBtn{animation:dbhRipBtn 7s ease-out infinite}@keyframes dbhRipRec{0%,16%{transform:scale(.4);opacity:0}18%{opacity:1}28%{transform:scale(2.1);opacity:0}to{opacity:0}}@keyframes dbhRipMid{0%,38%{transform:scale(.4);opacity:0}40%{opacity:1}50%{transform:scale(2.1);opacity:0}to{opacity:0}}@keyframes dbhRipBtn{0%,61%{transform:scale(.4);opacity:0}63%{opacity:1}73%{transform:scale(2.1);opacity:0}to{opacity:0}}.db-how .mv2 .zoomer{position:absolute;inset:0;transform-origin:75% 45%}.db-how .go .mv2 .zoomer{animation:dbhZoom 7s var(--ease-spring) infinite}@keyframes dbhZoom{0%,26%{transform:scale(1)}38%,60%{transform:scale(1.42)}74%,to{transform:scale(1)}}.db-how .mv2 .g1{left:8%;top:10%;width:84%;height:12%}.db-how .mv2 .l1{left:8%;top:32%;width:42%}.db-how .mv2 .l2{left:8%;top:43%;width:30%}.db-how .mv2 .g2{left:58%;top:28%;width:34%;height:34%}.db-how .mv2 .tgt{position:absolute;left:63%;top:39%;width:24%;height:12%;background:var(--blue);border-radius:7px;box-shadow:0 6px 14px -8px rgba(37,99,235,.7)}.db-how .go .mv2 .tgt:after{content:"";position:absolute;inset:-5px;border-radius:11px;border:2px solid rgba(37,99,235,.55);animation:dbhTgtPulse 7s ease-out infinite}@keyframes dbhTgtPulse{0%,36%{transform:scale(.9);opacity:0}40%{opacity:.9}54%{transform:scale(1.18);opacity:0}to{opacity:0}}.db-how .mv2 .bbar{position:absolute;left:8%;top:60%;width:30%;height:8px;border-radius:99px;background:#9db2d6}.db-how .go .mv2 .bbar{animation:dbhBlur 7s ease-in-out infinite}@keyframes dbhBlur{0%,64%{filter:blur(0)}72%,92%{filter:blur(3.5px)}98%,to{filter:blur(0)}}.db-how .mv2 .bchip{position:absolute;left:8%;bottom:9%;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2.5px 8px;font-size:8.5px;font-weight:800;color:var(--mut)}.db-how .mv2 .bchip b{color:var(--blue)}.db-how .mv3 .linkpill{position:absolute;left:50%;top:8%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:9.5px;font-weight:800;color:var(--ink);box-shadow:var(--sh-soft);white-space:nowrap}.db-how .mv3 .cpy{position:relative;width:11px;height:11px}.db-how .mv3 .cpy svg{position:absolute;inset:0;width:11px;height:11px}.db-how .go .mv3 .cpy .ic-copy{animation:dbhCpyHide 6s ease infinite}.db-how .go .mv3 .cpy .ic-tick{animation:dbhCpyShow 6s ease infinite}@keyframes dbhCpyHide{0%,14%{opacity:1}18%,64%{opacity:0}70%,to{opacity:1}}@keyframes dbhCpyShow{0%,14%{opacity:0}18%,64%{opacity:1}70%,to{opacity:0}}.db-how .mv3 .embed{position:absolute;left:8%;top:32%;width:50%;height:56%;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-soft)}.db-how .mv3 .embed:before{content:"";position:absolute;left:10%;top:13%;width:60%;height:10%;border-radius:99px;background:#e6ecf6}.db-how .mv3 .embed:after{content:"";position:absolute;left:10%;top:34%;width:80%;height:42%;border-radius:7px;background:linear-gradient(160deg,#dbe7ff,#eef4ff)}.db-how .mv3 .mw{position:absolute;right:5%;bottom:6%;z-index:1;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2.5px 8px;font-size:8px;font-weight:800;color:var(--mut);box-shadow:var(--sh-soft);white-space:nowrap}.db-how .mv3 .mw b{color:var(--blue)}.db-how .mv3 .dests{position:absolute;right:8%;top:32%;width:28%;display:flex;flex-direction:column;gap:9px}.db-how .mv3 .dest{background:var(--tint);border:1px solid var(--tint-2);color:var(--mut-blue);border-radius:999px;padding:4px 0;font-size:9px;font-weight:800;text-align:center}.db-how .go .mv3 .dest{animation:dbhDestGlow 6s ease infinite}.db-how .go .mv3 .dest:nth-child(2){animation-delay:.55s}.db-how .go .mv3 .dest:nth-child(3){animation-delay:1.1s}@keyframes dbhDestGlow{0%,30%{background:var(--tint);border-color:var(--tint-2);color:var(--mut-blue);transform:scale(1)}36%,44%{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.06)}52%,to{background:var(--tint);border-color:var(--tint-2);color:var(--mut-blue);transform:scale(1)}}@media (max-width:880px){.db-how{padding:76px 16px 64px}.db-how .story-head{grid-template-columns:1fr;gap:10px;margin-bottom:32px}.db-how .story-head .sub{padding-bottom:0;top:0}.db-how .steps{grid-template-columns:1fr;gap:16px;max-width:440px;margin:0 auto}.db-how .scard.s2,.db-how .scard.s3{margin-top:0}.db-how .connector,.db-how .mark{display:none}}@media (prefers-reduced-motion:reduce){.db-how *{animation:none!important;transition-duration:.15s!important}.db-how .scard{opacity:1;transform:none}.db-how .connector path{-webkit-clip-path:none;clip-path:none}.db-how .connector .spark{opacity:1}.db-how .mv1 .curw{transform:translate(84%,3%)}.db-how .mv1 .rec{background:#fff1f0;border-color:#ffd9d5;color:#d64541}.db-how .mv1 .rec .dotw{opacity:1}}