@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/inter-cyrillic-ext-wght-normal.c2963dc7.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/inter-cyrillic-wght-normal.62cc01da.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/inter-greek-ext-wght-normal.6a417cfe.woff2) format("woff2-variations");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/inter-greek-wght-normal.e6025d5b.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/inter-vietnamese-wght-normal.5c66f9e0.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/inter-latin-ext-wght-normal.48f540fb.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/inter-latin-wght-normal.f052ee44.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--body-bg: #fff7f9;--box-hover-bg: hsl(210, 20%, 90%);--box-color: #2c2c2c;--box-active-bg: hsl(280, 100%, 92%);--box-active-bg: #fff7f9;--box-active-shadow: #2c2c2c;--box-outline: #6c6c6c;--light-dark: #fff;--dark-light: #3f4142;--card-hover-shadow: #5c5c5c;--content-color: #4c4c4c;--content-color-gray: #6c6c6c;--color-bg: #dcdcdc;--focus-outline: #9c9c9c;--btn-bg: hsl(271, 76%, 53%);--btn-hover-bg: hsl(271, 76%, 65%);--btn-bg-light: hsl(271, 76%, 88%);--btn-clr: #fff;--shade: #5c5c5c;--logo1: #ede4ff;--logo2: #d7bbf5;--logo3: #b89bf5;--logo4: #966aff}.dark{--body-bg: #19191c;--box-bg: transparent;--box-hover-bg: hsl(0, 0%, 20%);--box-color: #fff;--box-active-bg: #27272a;--box-active-shadow: #9c9c9c;--box-outline: #7c7c7c;--light-dark: #37373c;--dark-light: #fff;--card-hover-shadow: #7c7c7c;--content-color: #fff;--content-color-gray: #acacac;--color-bg: #4c4c4c;--focus-outline: #9c9c9c;--btn-bg: hsl(330, 70%, 90%);--btn-hover-bg: hsl(330, 100%, 87%);--btn-bg-light: #6c6c6c;--btn-clr: #3f4142;--shade: #dedede;--logo1: hsla(330, 100%, 71%, .1);--logo2: hsla(330, 100%, 76%, .3);--logo3: hsla(330, 100%, 81%, .5);--logo4: hsla(330, 100%, 87%, 1)}.heading{font-family:Bricolage Grotesque,sans-serif;font-size:1.75rem;font-weight:700;line-height:1.5!important;color:var(--dark-light);transition:.5s}.title{font-family:Bricolage Grotesque,sans-serif;font-weight:700;color:var(--dark-light);line-height:1.5!important}.title svg{stroke:var(--dark-light)}.tagline{font-family:Inter,sans-serif!important;font-weight:500!important;color:var(--dark-light);font-size:1rem}.subtitle{font-family:Bricolage Grotesque,sans-serif;font-weight:500;color:var(--dark-light);text-decoration:none}.paragh{font-family:Inter,sans-serif;font-weight:500;color:var(--content-color-gray)}nav.nav{display:flex;gap:1rem;align-items:center;margin-top:4rem;margin-bottom:4rem}nav.nav a{display:inline-block;text-decoration:none;padding:.3rem .75rem;background-color:var(--box-bg);color:var(--box-color);border-radius:3px;font-family:Inter,sans-serif;font-size:1.1rem;font-weight:500;transition:.25s;outline:2px dashed transparent;transition-property:color,background-color}nav.nav a:hover{background-color:var(--box-hover-bg)}nav.nav a.active{outline:1px solid var(--box-outline);background-color:var(--box-active-bg);box-shadow:3px 3px 0 2px var(--box-active-shadow);font-weight:600}nav.nav a:focus{outline:2px dashed var(--box-outline)}.logo-animated{position:absolute;top:50%;transform:translateY(-50%);width:82px;height:82px;padding:4px}.logo-animated:focus{outline:2px dashed var(--content-color-gray)}.logo-animated .logo-char{position:absolute;transition:.15s}.logo-animated .logo-char svg{width:62px;height:62px}.logo-animated .logo-char :first-child svg path{fill:var(--logo1)}.logo-animated .logo-char:nth-child(2){top:4px;left:4px}.logo-animated .logo-char:nth-child(2) svg path{fill:var(--logo2)}.logo-animated .logo-char:nth-child(3){top:8px;left:8px}.logo-animated .logo-char:nth-child(3) svg path{fill:var(--logo3)}.logo-animated .logo-char:nth-child(4){top:12px;left:12px}.logo-animated .logo-char:nth-child(4) svg path{fill:var(--logo4)}.logo-master{display:flex;align-items:center}.logo-text{padding:0;margin:0 0 0 100px;font-size:2.75rem;font-family:Galada,serif;font-weight:400;font-style:normal;display:flex;align-items:center;margin-top:1.25rem;color:#9569ff;text-decoration:none}.demo-frame{width:100%;height:100vh;border:0}.pagination{margin:2rem 0;text-align:center}.pagination .nav-pagination{display:inline-flex;gap:2rem}.pagination .nav-pagination .btn-paginate{font-family:Inter,sans-serif;font-weight:500}.tag-master{display:flex;align-items:center;gap:.5rem}.tag-master .tags{list-style:none;padding:0;margin:0;gap:var(--gap, 0);display:flex;flex-wrap:wrap}.tag-master .tags .tag{display:inline-flex}.tag-master .tags .tag button{font-family:Inter,sans-serif;font-weight:400;color:var(--content-color-gray);color:var(--shade);font-weight:500;font-size:var(--size, 1rem)}.tag-master svg{stroke:var(--content-color-gray)}.theme-toggler{position:relative;width:16px;height:16px;background-color:var(--dark-light);border-radius:16px;transition:.5s;z-index:1;cursor:pointer}.theme-toggler:after{position:absolute;content:"";width:10px;height:10px;top:0;right:0;background-color:var(--body-bg);border-radius:20px;transition:.5s;z-index:1}.theme-toggler span{position:absolute;inset:0;width:16px;height:16px;transition:.5s;z-index:0;transform:scale(.7) rotate(-45deg);opacity:0}.theme-toggler span:after,.theme-toggler span:before{position:absolute;content:"";width:2px;height:0;background-color:var(--dark-light)}.theme-toggler span:first-child:after,.theme-toggler span:first-child:before{transform:rotate(90deg)}.theme-toggler span:first-child:after{top:calc(50% - 2px);left:-6px}.theme-toggler span:first-child:before{top:calc(50% - 2px);right:-6px}.theme-toggler span:last-child:after{left:calc(50% - 1px);top:-6px}.theme-toggler span:last-child:before{left:calc(50% - 1px);bottom:-6px}.theme-toggler.active{outline:2px solid var(--body-bg);outline-offset:-1px}.theme-toggler.active:after{width:0;height:0}.theme-toggler.active span{transform:scale(1);opacity:1}.theme-toggler.active span:after,.theme-toggler.active span:before{width:2px;height:5px}.m0{margin:0}.p0{padding:0}.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mt-30{margin-top:30px}.text-center{text-align:center}.clr-primary{color:var(--btn-bg);transition:.25s}.gap{gap:1rem}.flex{display:flex}.flex.justify-center{justify-content:center}.flex.justify-between{justify-content:space-between}.flex.justify-around{justify-content:space-around}.flex.align-center{align-items:center}.flex.align-start{align-items:flex-start}.flex.align-end{align-items:flex-end}.grid{display:grid}.grid.grid-2{grid-template-columns:repeat(2,1fr)}.grid.grid-3{grid-template-columns:repeat(3,1fr)}.grid.grid-4{grid-template-columns:repeat(4,1fr)}.grid.grid-5{grid-template-columns:repeat(5,1fr)}.grid.grid-6{grid-template-columns:repeat(6,1fr)}.grid.grid-1-2{grid-template-columns:1fr 3fr}.grid.grid-1-2-1{grid-template-columns:1fr 2fr 1fr}.grid.grid-2-1-1-1{grid-template-columns:1.5fr 1fr 1fr 1fr}.row-icon{display:flex;gap:.5rem;align-items:center}.row-icon svg{transition:.25s;stroke:var(--dark-light)}.a-link{font-family:Inter,sans-serif;font-weight:400;text-decoration:none;color:var(--dark-light);padding:.5rem;border-radius:6px;outline:2px dashed transparent}.a-link:after{position:absolute;content:"";bottom:.5rem;left:.5rem;right:.5rem;height:1px;background-color:var(--dark-light);z-index:-1}.a-link:hover:after{animation:lineAnimation .25s linear}.a-link:hover{background-color:var(--box-hover-bg)}.a-link:focus{outline:2px dashed var(--dark-light)}@keyframes lineAnimation{0%{width:0}to{width:100%}}.btn{font-family:Bricolage Grotesque,sans-serif;font-weight:600;background-color:var(--btn-bg);color:var(--btn-clr);padding:.5rem 1rem;border-radius:6px;text-decoration:none;transition:.25s;display:inline-flex;align-items:center;gap:.5rem;box-shadow:none;border:0;outline:2px dashed transparent;outline-offset:1px;cursor:pointer;user-select:none}.btn svg{stroke:var(--btn-clr)}.btn:hover{background-color:var(--btn-hover-bg);transform:translateY(-2px)}.btn:focus{outline:2px dashed var(--btn-hover-bg)}.btn:active{transform:translateY(1px)}.form-input{position:relative;display:inline-block;background-color:var(--box-active-bg);width:100%;border:2px solid var(--focus-outline);padding:.5rem;border-radius:5px;font-family:Inter,sans-serif;color:var(--shade);font-weight:500;transition:.25s;outline:none}.form-input:focus{border-color:var(--btn-bg)}.cr-link{position:relative;display:inline-flex;align-items:center;font-family:Bricolage Grotesque,sans-serif;font-size:1.1rem;font-weight:500;text-decoration:none;color:var(--dark-light);transition:.3s after}.cr-link svg{transition:.25s ease-out;transform:translate(2px);stroke:var(--dark-light)}.cr-link:after{position:absolute;content:"";left:0;bottom:5px;height:8px;width:calc(100% - 24px);background-color:var(--btn-bg-light);z-index:-1;transition:.25s ease-in}.cr-link:focus{outline:2px dashed var(--focus-outline)}.cr-link:hover:after,.cr-link:focus:after{width:20px;height:20px;right:0;border-radius:20px;left:calc(100% - 15px)}.cr-link:hover svg{transform:translate(-2px)}.cr-link.arrow-left svg{transform:translate(-4px)}.cr-link.arrow-left:hover svg{transform:translate(2px)}.cr-link.arrow-left:after{left:24px}.cr-link.arrow-left:hover:after{left:-3px}.cr-link.tag-link{background-color:transparent;border:0;display:inline-block;padding:0;height:32px;cursor:pointer}.cr-link.tag-link:after{width:100%;transition:.15s}.cr-link.tag-link:hover:after,.cr-link.tag-link:focus:after{height:100%;left:-2px;width:calc(100% + 4px);bottom:0;border-radius:3px}.disabled{pointer-events:none;opacity:.5;user-select:none}.nakxi{position:fixed;top:0;left:0;text-align:center;width:100%;background-color:#4d0377;font-size:1rem;padding:10px;text-decoration:none;color:#fff;cursor:pointer;z-index:999}:root{--gradient-angle: 0deg}*{box-sizing:border-box;transform:scale(1);opacity:1}*:after,*:before{box-sizing:border-box}body{position:relative;font-size:1.1rem;letter-spacing:1.05px;line-height:1.7;font-weight:400;color:#444;padding:20px;font-family:Inter,sans-serif;margin:0;transform:scale(1);word-wrap:break-word;overflow-wrap:break-word;box-sizing:border-box;max-width:100vw;min-height:100vh;z-index:1}body:before{position:absolute;content:"";inset:0;background-color:#ec97e4;z-index:-2;animation:ease outerBgAnimation 10s infinite}body:after{position:absolute;content:"";inset:10px;background-color:var(--body-bg);z-index:-1}body .dd-wrapper{position:relative;margin:0 auto}body .dd-body{margin:0 auto;max-width:min(90vw,1360px)}body .dd-header{position:relative;display:flex;align-items:center;margin:0 auto;max-width:max(80vw,1360px)}@keyframes animateBody{to{transform:scale(1);opacity:1;filter:blur(0)}}@keyframes outerBgAnimation{0%,to{background-color:#ec97e4}33%{background-color:#12c2e9}66%{background-color:#ebd793}}h1,h2,h3,h4,h5,h6,strong,b{color:#222}a{color:#3273dc}textarea{width:100%;font-size:16px}input{font-size:16px}content{line-height:1.6}table{width:100%}img{max-width:100%;height:auto}code{padding:2px 5px;background-color:#f2f2f2}pre{padding:1rem}pre>code{all:unset}blockquote{border:1px solid #999;color:#222;padding:2px 0 2px 20px;margin:0;font-style:italic}.contact-form{max-width:600px}.footer{border-top:12px solid #ccc;background-color:var(--box-bg);margin-top:3rem;margin-bottom:-10px;margin-left:-10px;margin-right:-10px;padding:2rem;animation:ease footerBorderAnimation 10s infinite}.footer .footer-container{max-width:1200px}.footer .footer-title{position:absolute;bottom:0;left:0;color:var(--btn-bg)}.footer .footer-links{list-style:none;padding:0}.footer .footer-links li{position:relative;margin-right:30px}.footer .footer-links li a{position:relative;font-family:Inter,sans-serif;font-weight:500;color:var(--content-color);text-decoration:none;display:inline-block}.footer .footer-links li a:hover{color:var(--dark-light)}.footer .footer-links li a:after{position:absolute;content:"";left:0;bottom:5px;height:6px;width:100%;background-color:var(--btn-bg-light);z-index:-1;transition:.15s ease-in}.footer .footer-links li a:hover:after{width:12px;height:12px;left:calc(100% + 5px);top:50%;transform:translateY(-50%);border-radius:6px}.footer .footer-links li a:focus{outline:2px dashed var(--btn-bg-light)}@keyframes footerBorderAnimation{0%,to{border-color:#ec97e4}33%{border-color:#12c2e9}66%{border-color:#ebd793}}.container{width:min(80vw,1360px);margin:0 auto}.content .article-head{display:flex;justify-content:space-between;align-items:center}.blog-cards{display:grid;max-width:1980px;gap:2rem}.blog-cards .blog-card{padding:.5rem;background-color:var(--light-dark);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border-radius:3px;color:var(--box-color);border:1px solid transparent;text-decoration:none;cursor:pointer;transition:.25s}.blog-cards .blog-card:hover,.blog-cards .blog-card:focus{outline:none;border:1px solid var(--card-hover-shadow);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f,4px 4px 0 2px var(--card-hover-shadow);transform:translate(-2px,-2px)}.blog-cards .blog-card .card-title{position:relative;font-family:Inter,sans-serif;font-size:1.1rem;font-weight:500;color:var(--dark-light);text-decoration:none;margin:3px 0;padding:0;transition:.25s}.blog-cards .blog-card .post-thumbnail__img{width:100%;object-fit:cover;object-position:top center;border-radius:3px}.blog-cards.grid-view{grid-template-columns:repeat(3,minmax(min(100%,360px),1fr))}.blog-cards.grid-view .blog-card{max-width:500px}.blog-cards.list-view{grid-template-columns:1fr 1fr}.blog-cards.list-view .blog-card{display:grid;gap:1rem;grid-template-columns:1.25fr 2fr}.blog-cards.list-view .blog-card .card-thumbnail{height:125px}.blog-cards.snippet .blog-card .post-thumbnail__img{height:200px!important}.blog-cards.template{grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr))}.blog-cards.template .blog-card{max-width:inherit;max-width:700px}.blog-cards.template .blog-card .post-thumbnail{display:inline-block;width:100%;height:340px;overflow:hidden}.blog-cards.template .blog-card .post-thumbnail .post-thumbnail__img{height:inherit!important;object-fit:cover;object-position:top;transition:5s linear}.blog-cards.template .blog-card:hover .post-thumbnail .post-thumbnail__img{object-position:bottom}.blog-cards.tutorial,.blog-cards.guide{grid-template-columns:1fr;height:inherit}.blog-cards.tutorial.blog-cards,.blog-cards.guide.blog-cards{max-width:100ch;margin:0 auto}.blog-cards.tutorial .blog-card,.blog-cards.guide .blog-card{display:flex;gap:1rem;padding:1rem;max-width:inherit}.blog-cards.tutorial .blog-card .card-title,.blog-cards.guide .blog-card .card-title{font-size:1.2rem;font-weight:600}.blog-cards.tutorial .blog-card .post-thumbnail,.blog-cards.guide .blog-card .post-thumbnail{display:inline-flex;min-width:80px;align-items:center}.blog-cards.tutorial .blog-card .post-thumbnail .post-thumbnail__img,.blog-cards.guide .blog-card .post-thumbnail .post-thumbnail__img{height:80px;width:80px}.post-content{max-width:75ch;margin:0 auto}.post-content article p,.post-content article ul>li,.post-content article ol>li,.post-content article h1,.post-content article h2,.post-content article h3,.post-content article h4,.post-content article h5,.post-content article strong,.post-content article time,.post-content article label{font-family:Inter,sans-serif;font-weight:400;color:var(--content-color);line-height:2.15}.post-content article p code,.post-content article ul>li code,.post-content article ol>li code,.post-content article h1 code,.post-content article h2 code,.post-content article h3 code,.post-content article h4 code,.post-content article h5 code,.post-content article strong code,.post-content article time code,.post-content article label code{background-color:var(--color-bg);border-radius:3px;font-family:IBM Plex Mono,monospace}.post-content article p strong,.post-content article ul>li strong,.post-content article ol>li strong,.post-content article h1 strong,.post-content article h2 strong,.post-content article h3 strong,.post-content article h4 strong,.post-content article h5 strong,.post-content article strong strong,.post-content article time strong,.post-content article label strong{font-weight:700}.post-content article h2,.post-content article h3,.post-content article h4{color:var(--dark-light);font-weight:600}.post-content article .title{font-family:Bricolage Grotesque,sans-serif;font-weight:600;color:var(--dark-light)}.post-content article ul>li{font-weight:400}.post-content article pre{border-radius:0 0 3px 3px;letter-spacing:0;font-family:IBM Plex Mono,monospace!important;font-weight:500;font-size:1.1rem!important}.post-content article strong{font-weight:600}.post-content article .code-hl{position:relative}.post-content article .code-hl pre{margin-top:0;font-family:IBM Plex Mono,monospace!important}.post-content article .code-hl .code-hl__header{background-color:#37373c;color:#eee;font-family:Inter,sans-serif;font-weight:500;font-size:1rem;display:inline-block;padding:.5rem .75rem;width:100%;border-radius:3px 3px 0 0}.post-content article .code-hl .code-hl__header .colde-hl__title{font-family:Inter,sans-serif;font-weight:500;font-size:1.1rem}.post-content article .code-hl .code-hl__header .code-hl__btn{position:absolute;display:flex;top:50%;transform:translateY(-50%);right:7px;background-color:transparent;border:0;cursor:pointer}.post-content article .code-hl .code-hl__header .code-hl__btn+.code-hl__tooltip{position:absolute;right:40px;top:50%;transform:translateY(-50%) scale(.9);background-color:#2c2c2c;border-radius:3px;font-size:.9rem;font-weight:400;padding:0 .5rem;opacity:0;visibility:hidden;transition:.25s}.post-content article .code-hl .code-hl__header .code-hl__btn:hover+.code-hl__tooltip{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}.post-content .hero-image{width:100%;height:auto;border-radius:4px;object-fit:cover}.post-content time{font-family:IBM Plex Mono,monospace!important;font-weight:500!important;font-size:1rem}.demo-layout{position:relative;margin:-10px}.demo-layout .navbar{position:relative;background-color:var(--light-dark);border-bottom:1px solid var(--btn-bg)}.demo-layout .navbar .header{padding:1rem;max-width:1600px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.demo-layout .navbar .header .logo{font-family:Inter,sans-serif;font-weight:600;color:var(--btn-bg)}@media only screen and (max-width: 1200px){.container{width:auto}.blog-cards.grid-view{grid-template-columns:1fr 1fr}.footer .footer-container{max-width:inherit;grid-template-columns:1fr 1fr}}@media only screen and (max-width: 768px){.post-content article .title,.title{font-size:1.5rem}.heading{font-size:1.2rem}.cr-link{font-size:1rem}.paragh{font-size:.9rem}nav.nav{flex-wrap:wrap;margin:2rem 0;justify-content:left;align-items:left}nav.nav a{padding:.1rem .3rem;font-size:.9rem}.dd-header .logo .logo-animated{position:relative;display:inline-block;transform:scale(1);margin-right:1rem}.blog-cards,.blog-cards.grid-view{grid-template-columns:1fr}.blog-cards.tutorial .blog-card{display:inherit}.blog-card .card-title{font-size:1.1rem!important}.footer{padding-top:4rem}.footer .title{font-size:1.1rem}.footer .footer-links li a{font-size:1rem}.footer .footer-container{max-width:inherit;grid-template-columns:1fr}.footer .footer-container .footerLogo{position:absolute;top:1rem}.footer .footer-container .grid-item:nth-child(2){margin-top:3rem}}