:root{--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--text:64,66,71;--link:70,165,240;--link-alt:40,145,220;--heading:30,31,33;--color:240,190,10;--success:80,180,70;--failure:230,85,85;--background:255,255,255;--code:196,205,212;--theme-transition:background-color 0.15s,color 0.15s,scrollbar-color 0.15s,filter 0.15s,opacity 0.15s;--list-item-bg:url(../assets/heading-bg-dot.png)}:root .pintura-editor{--color-background:var(--background);--color-foreground:var(--text)}:root[data-theme=dark]{--link:110,190,250;--link-alt:var(--link);--background:22,22,26;--text:219,219,224;--heading:255,255,255;--success:120,210,120;--failure:240,100,100;--list-item-bg:url(../assets/heading-bg-dot-inv.png)}theme-switch{align-items:center;display:inline-flex}theme-switch label{cursor:pointer}theme-switch label:first-of-type{font-size:.875rem;padding-right:.25rem}theme-switch svg{opacity:0;position:absolute;transform:rotate(-90deg);transition:transform .35s ease-in-out,opacity .15s ease-in}theme-switch label:not(:first-of-type){display:block;height:1rem;margin-top:.125rem;width:1rem}[data-theme=bright] theme-switch .moon{opacity:0;transform:rotate(-90deg)}[data-theme=bright] theme-switch .sun{opacity:1;transform:rotate(0)}[data-theme=dark] theme-switch .sun{opacity:0;transform:rotate(-90deg)}[data-theme=dark] theme-switch .moon{opacity:1;transform:rotate(0)}:where(body,iframe,pre,img,svg,video,canvas,input,select){max-width:none;overflow:auto;word-break:normal}button,html,input,textarea{font-family:var(--font-family)}input[type=file]{max-width:100%}html,iframe,pre>code{--scrollbar-track-color:none;scrollbar-color:var(--scrollbar-thumb-color) transparent;scrollbar-width:thin}html::-webkit-scrollbar,iframe::-webkit-scrollbar,pre>code::-webkit-scrollbar{cursor:pointer;width:1rem}html::-webkit-scrollbar-corner,html::-webkit-scrollbar-track,iframe::-webkit-scrollbar-corner,iframe::-webkit-scrollbar-track,pre>code::-webkit-scrollbar-corner,pre>code::-webkit-scrollbar-track{background-color:var(--scrollbar-track-color)}html::-webkit-scrollbar-thumb,iframe::-webkit-scrollbar-thumb,pre>code::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--scrollbar-thumb-color);border:.3125rem solid transparent;border-radius:9999rem;cursor:pointer}html{--scrollbar-thumb-color:rgb(var(--text));scroll-padding:4rem 0;background-color:rgb(var(--background));color:rgb(var(--text));transition:var(--theme-transition)}main{padding-bottom:8rem;padding-top:4rem}h1,h2,h3{font-family:Lato,var(--font-family);font-weight:700;letter-spacing:-.025em}h1,h2,h3,strong{color:rgb(var(--heading))}h2,h3{margin-bottom:.5rem;margin-top:0}body{color:rgb(var(--text));line-height:1.4}a{text-decoration-thickness:2px;color:rgb(var(--link));-webkit-text-decoration-color:rgba(var(--link),.25);text-decoration-color:rgba(var(--link),.25);transition:-webkit-text-decoration-color .2s;transition:text-decoration-color .2s;transition:text-decoration-color .2s,-webkit-text-decoration-color .2s}a:hover{-webkit-text-decoration-color:rgba(var(--link),.5);text-decoration-color:rgba(var(--link),.5)}p{margin:0}abbr{text-underline-offset:.175em;cursor:help;-webkit-text-decoration-color:rgba(var(--link),.75);text-decoration-color:rgba(var(--link),.75)}.header-exit{align-items:center;color:rgb(var(--text));display:flex;font-size:0;font-weight:500;left:1rem;position:absolute;text-decoration:none;text-transform:lowercase;top:.875rem}.header-exit svg{height:1.25rem;margin-right:.5rem;margin-top:.125rem;width:1.25rem}.footer-exit{background-color:rgba(var(--link),.15);background-color:rgba(var(--text),1);border-radius:.25rem;color:rgb(var(--link));color:rgb(var(--background));display:inline-block;font-weight:500;padding:.625rem 1rem;text-decoration:none;text-transform:lowercase}@media (min-width:30em){.header-exit{font-size:1rem}}.implicit{clip:rect(1px,1px,1px,1px);border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.styled-list{list-style:none;margin:0;padding:0}.styled-list>li+li{margin-top:2rem}.sig img{display:inline-block;height:auto;-o-object-fit:contain;object-fit:contain;width:12rem}:root[data-theme=dark] .sig img{filter:invert(100%)}.logo{background-image:url(../assets/logo.png);background-position:50%;background-repeat:no-repeat;background-size:contain;color:transparent;height:3rem;margin:0;padding:0;text-decoration:none;width:7rem}:root[data-theme=dark] .logo{background-image:url(../assets/logo-inv.png)}a.logo{display:block;margin:0 auto 4rem}.intro h1{margin-top:0}.intro,.intro .logo{margin:0 auto}.intro{max-width:19rem;text-align:center}.index{display:flex;justify-content:center;list-style:none;margin:2rem 0;padding:0;word-break:normal}.index li{margin:0 .5rem}.index a{padding:.25rem .5rem}.product-item>a:first-child{color:currentColor;text-decoration:none}.product-item .product-title{align-items:center;display:flex;font-size:1.25rem;margin-bottom:.75rem}.product-item .product-title span{font-family:var(--font-family);margin:0 .175rem}.product-item .product-description{margin-bottom:1rem}.product-item .product-features{list-style-type:disc;margin-bottom:1rem;padding-left:1rem}.product-item .product-features li+li{margin-top:.5rem}pre{border-radius:.5rem;box-shadow:inset 0 0 0 1px rgba(var(--code),.35);overflow:visible}pre>code{--scrollbar-track-color:rgba(var(--code),0.35);--scrollbar-thumb-color:rgba(var(--code),0.85);-webkit-clip-path:inset(0 0 0 0 round .5rem);clip-path:inset(0 0 0 0 round .5rem);display:block;max-height:70vh;max-width:100%;overflow-x:auto;padding:1.5rem}pre{position:relative}pre>div{display:flex;margin-top:-1.75rem;position:absolute;right:-.25rem;top:0;z-index:1}.code-copy,.code-share{align-items:center;background:none;border:none;color:rgba(var(--text),.5);cursor:pointer;display:flex;font-size:.625rem;height:1.75rem;padding:0 .75rem;text-transform:lowercase;transition:color .1s}.code-copy:hover,.code-share:hover{color:rgba(var(--text),.75)}.code-share{right:2rem}.code-share:after{background:currentColor;content:"";display:none;height:1.5px;margin-left:.25rem;opacity:0;transition:opacity .15s ease-out;width:.5rem}.code-share[data-state=busy]:after{-webkit-animation:spin .25s linear infinite;animation:spin .25s linear infinite;display:inline-block;opacity:1}.code-copy[data-state=success],.code-share[data-state=success]{color:rgba(var(--success),1)}.code-copy[data-state=success]:after,.code-share[data-state=success]:after{background:transparent;border-bottom:1.5px solid;border-left:1.5px solid;content:"";display:inline-block;height:.175rem;margin-left:.25rem;margin-top:-.125rem;opacity:1;transform:rotate(-45deg);width:.375rem}@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}code{font-family:Input Mono,Monaco,Consolas,Lucida Console,Liberation Mono,monospace;font-size:.875em}li code,p code{background:rgba(var(--code),.15);border-radius:.125rem;color:rgba(var(--text),.75);padding:.15em .3125em}a code{--link:var(--link-alt);background:rgba(var(--link),.1);color:rgba(var(--link),.9)}code[class*=language]{color:#212121}code[class*=language] .comment{color:#9398a2}code[class*=language] .string{color:#d86a1b}code[class*=language] .unchanged .unchanged{display:inline-block;width:0}code[class*=language] .inserted-sign .inserted{color:transparent;display:inline-block;width:0}code[class*=language] .inserted-sign .inserted:before{background:#ded;color:#679b67;content:"+";margin-left:-1.5rem;position:absolute;text-align:center;width:1rem}.language-html .punctuation,.language-jsx .punctuation,.language-php .punctuation{color:#de9c0b}.language-html .attr-name,.language-jsx .attr-name,.language-php .attr-name{color:#db9c0b}.language-html .attr-value,.language-jsx .attr-value,.language-php .attr-value{color:#789c2a}.language-html .attr-equals,.language-jsx .attr-equals,.language-php .attr-equals{color:#de9c0b}.language-html .doctype,.language-html .tag,.language-jsx .doctype,.language-jsx .tag,.language-php .doctype,.language-php .tag{color:#db9c0b}.language-html .attr-value>.punctuation,.language-html .doctype>.punctuation,.language-html .tag>.punctuation,.language-jsx .attr-value>.punctuation,.language-jsx .doctype>.punctuation,.language-jsx .tag>.punctuation,.language-php .attr-value>.punctuation,.language-php .doctype>.punctuation,.language-php .tag>.punctuation{color:#ae8630}.language-css .rule{color:#8d30b5}.language-css .punctuation{color:#777}.language-css .property{color:#245fc0}.language-css .selector{color:#d72a65}.language-diff-js .function-variable,.language-diff-js .punctuation,.language-javascript .function-variable,.language-javascript .punctuation,.language-js .function-variable,.language-js .punctuation,.language-jsx .function-variable,.language-jsx .punctuation,.language-php .function-variable,.language-php .punctuation{color:#212121}.language-diff-js .function,.language-javascript .function,.language-js .function,.language-jsx .function,.language-php .function{color:#708de9}.language-diff-js .operator,.language-javascript .operator,.language-js .operator,.language-jsx .operator,.language-php .operator{color:#8f9196}.language-diff-js .constant,.language-diff-js .keyword,.language-javascript .constant,.language-javascript .keyword,.language-js .constant,.language-js .keyword,.language-jsx .constant,.language-jsx .keyword,.language-php .constant,.language-php .keyword{color:#8d30b5}.language-diff-js .boolean,.language-javascript .boolean,.language-js .boolean,.language-jsx .boolean,.language-php .boolean{color:#3aa0ce}.language-diff-js .class-name,.language-javascript .class-name,.language-js .class-name,.language-jsx .class-name,.language-php .class-name{color:#d4a300}.language-diff-js .number,.language-javascript .number,.language-js .number,.language-jsx .number,.language-php .number{color:#348c38}.language-jsx .class-name{color:#67a5f4}:root[data-theme=dark] code[class*=language]{color:#ddd}:root[data-theme=dark] code[class*=language] .comment{color:#707985}:root[data-theme=dark] code[class*=language] .string{color:#f6a66c}:root[data-theme=dark] .highlight-line-active{--color:#3a3a3b}:root[data-theme=dark] .language-html .attr-name,:root[data-theme=dark] .language-jsx .attr-name,:root[data-theme=dark] .language-php .attr-name,:root[data-theme=dark] .language-svelte .attr-name{color:#c7d6ec}:root[data-theme=dark] .language-html .attr-equals,:root[data-theme=dark] .language-jsx .attr-equals,:root[data-theme=dark] .language-php .attr-equals,:root[data-theme=dark] .language-svelte .attr-equals{color:#59677b}:root[data-theme=dark] .language-html .doctype,:root[data-theme=dark] .language-html .tag,:root[data-theme=dark] .language-jsx .doctype,:root[data-theme=dark] .language-jsx .tag,:root[data-theme=dark] .language-php .doctype,:root[data-theme=dark] .language-php .tag,:root[data-theme=dark] .language-svelte .doctype,:root[data-theme=dark] .language-svelte .tag{color:#788ca8}:root[data-theme=dark] .language-html .doctype .punctuation:first-of-type,:root[data-theme=dark] .language-html .doctype .punctuation:last-of-type,:root[data-theme=dark] .language-html .tag .punctuation:first-of-type,:root[data-theme=dark] .language-html .tag .punctuation:last-of-type,:root[data-theme=dark] .language-jsx .doctype .punctuation:first-of-type,:root[data-theme=dark] .language-jsx .doctype .punctuation:last-of-type,:root[data-theme=dark] .language-jsx .tag .punctuation:first-of-type,:root[data-theme=dark] .language-jsx .tag .punctuation:last-of-type,:root[data-theme=dark] .language-php .doctype .punctuation:first-of-type,:root[data-theme=dark] .language-php .doctype .punctuation:last-of-type,:root[data-theme=dark] .language-php .tag .punctuation:first-of-type,:root[data-theme=dark] .language-php .tag .punctuation:last-of-type,:root[data-theme=dark] .language-svelte .doctype .punctuation:first-of-type,:root[data-theme=dark] .language-svelte .doctype .punctuation:last-of-type,:root[data-theme=dark] .language-svelte .tag .punctuation:first-of-type,:root[data-theme=dark] .language-svelte .tag .punctuation:last-of-type{color:#59677b}:root[data-theme=dark] .language-html .attr-value,:root[data-theme=dark] .language-html .attr-value .punctuation:last-of-type,:root[data-theme=dark] .language-html .attr-value .punctuation:nth-of-type(2),:root[data-theme=dark] .language-html .punctuation,:root[data-theme=dark] .language-jsx .attr-value,:root[data-theme=dark] .language-jsx .attr-value .punctuation:last-of-type,:root[data-theme=dark] .language-jsx .attr-value .punctuation:nth-of-type(2),:root[data-theme=dark] .language-jsx .punctuation,:root[data-theme=dark] .language-php .attr-value,:root[data-theme=dark] .language-php .attr-value .punctuation:last-of-type,:root[data-theme=dark] .language-php .attr-value .punctuation:nth-of-type(2),:root[data-theme=dark] .language-php .punctuation,:root[data-theme=dark] .language-svelte .attr-value,:root[data-theme=dark] .language-svelte .attr-value .punctuation:last-of-type,:root[data-theme=dark] .language-svelte .attr-value .punctuation:nth-of-type(2),:root[data-theme=dark] .language-svelte .punctuation{color:#f6a66c}:root[data-theme=dark] .language-diff-js .function-variable,:root[data-theme=dark] .language-diff-js .punctuation,:root[data-theme=dark] .language-javascript .function-variable,:root[data-theme=dark] .language-javascript .punctuation,:root[data-theme=dark] .language-js .function-variable,:root[data-theme=dark] .language-js .punctuation,:root[data-theme=dark] .language-jsx .function-variable,:root[data-theme=dark] .language-jsx .punctuation,:root[data-theme=dark] .language-php .function-variable,:root[data-theme=dark] .language-php .punctuation,:root[data-theme=dark] .language-svelte .function-variable,:root[data-theme=dark] .language-svelte .punctuation{color:#9c9c9c}:root[data-theme=dark] .language-diff-js .function,:root[data-theme=dark] .language-javascript .function,:root[data-theme=dark] .language-js .function,:root[data-theme=dark] .language-jsx .function,:root[data-theme=dark] .language-php .function,:root[data-theme=dark] .language-svelte .function{color:#85b7f6}:root[data-theme=dark] .language-diff-js .operator,:root[data-theme=dark] .language-javascript .operator,:root[data-theme=dark] .language-js .operator,:root[data-theme=dark] .language-jsx .operator,:root[data-theme=dark] .language-php .operator,:root[data-theme=dark] .language-svelte .operator{color:#8f9196}:root[data-theme=dark] .language-diff-js .constant,:root[data-theme=dark] .language-diff-js .keyword,:root[data-theme=dark] .language-javascript .constant,:root[data-theme=dark] .language-javascript .keyword,:root[data-theme=dark] .language-js .constant,:root[data-theme=dark] .language-js .keyword,:root[data-theme=dark] .language-jsx .constant,:root[data-theme=dark] .language-jsx .keyword,:root[data-theme=dark] .language-php .constant,:root[data-theme=dark] .language-php .keyword,:root[data-theme=dark] .language-svelte .constant,:root[data-theme=dark] .language-svelte .keyword{color:#f699d1}:root[data-theme=dark] .language-diff-js .boolean,:root[data-theme=dark] .language-javascript .boolean,:root[data-theme=dark] .language-js .boolean,:root[data-theme=dark] .language-jsx .boolean,:root[data-theme=dark] .language-php .boolean,:root[data-theme=dark] .language-svelte .boolean{color:#3aa0ce}:root[data-theme=dark] .language-diff-js .class-name,:root[data-theme=dark] .language-javascript .class-name,:root[data-theme=dark] .language-js .class-name,:root[data-theme=dark] .language-jsx .class-name,:root[data-theme=dark] .language-php .class-name,:root[data-theme=dark] .language-svelte .class-name{color:#f4db86}:root[data-theme=dark] .language-diff-js .number,:root[data-theme=dark] .language-javascript .number,:root[data-theme=dark] .language-js .number,:root[data-theme=dark] .language-jsx .number,:root[data-theme=dark] .language-php .number,:root[data-theme=dark] .language-svelte .number{color:#8eb771}:root[data-theme=dark] .language-jsx .class-name{color:#788ca8}:root[data-theme=dark] .language-jsx .token .punctuation{color:#59677b}:root[data-theme=dark] .language-jsx .spread .attr-value{color:#c7d6ec}:root[data-theme=dark] .language-css .selector{color:#ff93b8}:root[data-theme=dark] .language-css .rule{color:#e4d18a}:root[data-theme=dark] .language-css .punctuation{color:#777}:root[data-theme=dark] .language-css .property{color:#b7b7c0}:root[data-theme=dark] .language-css .atrule .property{color:#abb7f2}.author{margin-top:4rem}.author p{font-size:.875rem;max-width:24rem}.author p+p{margin-top:1rem}.author .sig{margin-bottom:1rem}.author a{white-space:nowrap}.author svg{height:.875rem;margin-left:.25rem;position:relative;top:.125rem;width:.875rem}.author .form{margin:0}.article-cover{display:none;float:right;margin-bottom:2em;margin-left:1em;margin-top:-1em;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:50%}.article-cover img{display:block;height:auto;opacity:0;transition:opacity .25s ease-out;width:100%}.article-cover img[data-state=complete]{opacity:1}.article{margin-top:2rem}.article>.article-cover+p,.article>p:first-child{font-size:1.25rem;font-weight:400;margin-bottom:2rem}.article>.article-cover+p strong,.article>p:first-child strong{font-weight:600}.article>h2{margin-bottom:1rem;margin-top:4rem}.article>h3{margin-bottom:1rem;margin-top:3rem}.article>ol,.article>ul{--marker-width:2rem;margin:2rem 0}.article ol,.article ul{padding-left:var(--marker-width)}.article>ol ol,.article>ul ul{margin:1rem 0}.article>ol,.article>ol ol{list-style:none}.article>ol li:before,.article>ul li:before{display:inline-block;font-family:var(--heading);font-variant:tabular-nums;font-weight:900;height:1.5rem;margin-bottom:-1.5rem;margin-left:calc(var(--marker-width)*-1);text-align:left;width:var(--marker-width)}.article>ol li p:first-child,.article>ul li p:first-child{display:inline}.article>ol li:before,.article>ul li:before{background-repeat:no-repeat;background-size:1.5rem}.article>ul,.article>ul ul{list-style:none}.article>ul{--marker-width:1.5rem}.article>ul li:before{background-position:-.25rem -.45rem;background-size:1.25rem;content:"•";font-size:1.5rem;line-height:0}.article>ul>li:nth-child(3):before,.article>ul>li>ul>li:nth-child(4):before,.article>ul>li>ul>li>ul>li:nth-child(2):before{background-image:var(--list-item-bg)}.article>ul~ul li:nth-child(2):before{background-image:var(--list-item-bg);background-size:1.4rem;transform:scaleX(-1)}.article>ul~ul li:nth-child(3):before{background-image:none;transform:none}.article ol{counter-reset:section}.article ol>li{counter-increment:section}.article ol li:before{content:counter(section);padding-left:.125rem}.article ol>li:first-child:before{background-image:var(--list-item-bg);background-position:.2rem .675rem;background-size:.625rem}.article ol ol{--marker-width:3rem;counter-reset:sub-section;margin:1rem 0}.article ol ol>li{counter-increment:sub-section}.article ol ol>li:before{content:counter(section) "." counter(sub-section)}.article ol ol ol{--marker-width:3rem;counter-reset:sub-sub-section}.article ol ol ol>li{counter-increment:sub-sub-section}.article ol ol ol>li:before{content:counter(section) "." counter(sub-section) "." counter(sub-sub-section)}.article ol>li+li,.article ul>li+li{margin-top:.5rem}.article>p+p{margin-top:1rem}.article>pre{margin-bottom:2rem;margin-top:2rem}.article>canvas:not([class]),.article>img:not([class]),.article>p>canvas:not([class]),.article>p>img:not([class]),.article>p>video:not([class]),.article>video:not([class]){display:block;margin:2rem auto;max-width:80%}.article [id]>a{color:currentColor;margin-left:.5rem;margin-top:.06125rem;opacity:.25;transition:opacity .1s;width:1rem}.article [id]>a:hover{opacity:1}.article [id]>a svg{height:1.25rem;width:1.25rem}.article theme-switch{float:right;height:2rem;justify-content:center;margin:.25rem;padding:0;width:2rem}.article theme-switch label:first-of-type{display:none}.article iframe{aspect-ratio:16/9;border:none;border-radius:.5rem;box-shadow:inset 0 0 0 1px rgba(var(--code),.35);display:block;margin:2rem 0;max-width:100%;width:32em}@media (min-width:32em){.article-cover{display:block}:root[data-theme=dark] .article-cover:after{opacity:1}}@media (min-width:50em){.article-cover{margin-right:-10%}.article [id]{position:relative}.article [id]>a{color:currentColor;left:-1rem;margin-left:-1rem;margin-top:.125rem;opacity:.25;position:absolute;transition:opacity .1s;width:1rem}.article [id]>a:hover{opacity:1}.article [id]>a svg{height:1.25rem;width:1.25rem}}.article-item{font-size:1rem}.article-item .article-title{font-size:1.25rem;letter-spacing:-.025em;line-height:1.25;margin-bottom:0}.article-item .article-title a{color:rgb(var(--text));text-decoration:none}.article-item time{color:rgba(var(--text),.5);display:block;letter-spacing:.1em;margin-top:.25rem}.article-highlight{margin-bottom:4rem}.article-highlight .article-title{font-size:1.5rem}.article-highlight .article-excerpt{margin:1rem 0}.article-highlight .article-cover{margin:2rem 0;max-width:30rem}.related{margin:4rem 0 2rem}.related h2{margin-bottom:2rem}.promoted-products{font-size:.875rem;margin-top:1rem;max-width:24rem}.promoted-products p+p{margin-top:1rem}.promoted-product-banner{background-color:rgba(var(--text),.05);border-radius:.5rem;margin:2rem auto;max-width:18rem;padding:1.5rem;text-align:center}.promoted-product-banner a,.promoted-product-banner p{font-size:.875rem}.promoted-product-banner p+p{margin-top:1rem}.promoted-product-banner>p:first-of-type{margin-bottom:2rem}.promoted-product-banner>p:last-of-type{margin-top:2rem}.promoted-product-banner>p:first-of-type,.promoted-product-banner>p:last-of-type{opacity:.65}.promoted-product-banner ul{gap:2rem;display:flex;flex-direction:column;list-style:none;padding-left:0}.promoted-product-banner li{flex:1;margin:0 auto;max-width:16rem}.promoted-product-banner .product-description{margin:.5rem 0}.promoted-product-banner img{position:relative;width:6rem}.promoted-product-banner span[class*=logo]{background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;height:2.5rem;margin:0 auto;width:6rem}.promoted-product-banner .logo-filepond{background-image:url(/https/pqina.nl/static/assets/logo/filepond/logo.svg)}.promoted-product-banner .logo-pintura{background-image:url(/https/pqina.nl/static/assets/logo/pintura/logo.svg)}@media (min-width:38rem){.promoted-product-banner{max-width:30rem;padding:2.5rem 3rem}.promoted-product-banner ul{gap:1rem;flex-direction:row}.promoted-product-banner ul li,.promoted-product-banner ul li+li{margin:0;max-width:none}}:root[data-theme=dark] .promoted-product-banner .logo-filepond{background-image:url(/https/pqina.nl/static/assets/logo/filepond/logo-inv.svg)}:root[data-theme=dark] .promoted-product-banner .logo-pintura{background-image:url(/https/pqina.nl/static/assets/logo/pintura/logo-inv.svg)}.block+.block{margin-top:4rem}.block-title{font-size:2rem;margin-bottom:2rem;margin-top:6rem;padding-bottom:2rem;padding-top:2rem;text-align:center}.block-title,.block-title span{position:relative}.block-title span:before{background-repeat:no-repeat;bottom:-1ex;content:"";left:-1rem;pointer-events:none;position:absolute;right:-1rem;top:-1ex;transition:var(--theme-transition)}.block-title-first{margin-top:0}:root[data-theme=dark] .block-title span:before{filter:invert(100%)}.block-title#components span:before,.block-title#contact span:before{background-image:url(../assets/heading-bg-c.png);background-position:.5rem .8ex;background-size:1.15em}.block-title#services span:before{background-image:url(../assets/heading-bg-s.png);background-position:.35rem 1.25ex;background-size:1em}.block-title#articles span:before{background-image:url(../assets/heading-bg-dot.png);background-position:1.85em 1ex;background-size:.55em}.block-title#tools span:before{background-image:url(../assets/heading-bg-s.png);background-position:4.15rem 1.6ex;background-size:.75em}.layout-base .sig{margin-top:8rem;text-align:right}@media (max-width:44em){.layout-base .sig{margin-top:6rem;text-align:center}}.layout-post h1{font-size:2rem;line-height:1.25;margin-bottom:.25rem}.layout-post h1+time{color:rgba(var(--text),.5);display:block;font-size:1.25rem;letter-spacing:.1em}.layout-post .footer-exit{margin-top:1.25rem}.layout-post h1{-webkit-mask-image:url(../assets/title-mask.png);mask-image:url(../assets/title-mask.png);-webkit-mask-position:left 0 bottom -7px;mask-position:left 0 bottom -7px;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:500px;mask-size:500px}:root[data-theme=dark] .layout-post h1:after{opacity:0}body>theme-switch{display:block;position:absolute;right:1rem;top:1rem}body>theme-switch label:first-of-type{display:none}body>footer{gap:1rem;border-top:1px solid rgba(var(--text),.1);display:flex;justify-content:center;padding:1rem}body>footer>a{background-color:rgba(var(--text),.1);border-radius:9999rem;color:rgba(var(--text),.75);font-size:.75rem;padding:.25rem .75rem;text-decoration:none;transition:background-color .2s}body>footer>a:hover{background-color:rgba(var(--text),.2)}.demo{--shadow-color:0deg 0% 63%;--shadow-elevation-low:0px 0.3px 0.3px hsl(var(--shadow-color)/0.34),0px 0.5px 0.6px -1.2px hsl(var(--shadow-color)/0.34),0px 1.3px 1.5px -2.5px hsl(var(--shadow-color)/0.34);--shadow-elevation-medium:0px 0.3px 0.3px hsl(var(--shadow-color)/0.36),0px 1.1px 1.2px -0.8px hsl(var(--shadow-color)/0.36),0px 2.7px 3px -1.7px hsl(var(--shadow-color)/0.36),-0.1px 6.5px 7.3px -2.5px hsl(var(--shadow-color)/0.36);--shadow-elevation-high:0px 0.3px 0.3px hsl(var(--shadow-color)/0.34),0px 1.9px 2.1px -0.4px hsl(var(--shadow-color)/0.34),0px 3.6px 4.1px -0.7px hsl(var(--shadow-color)/0.34),-0.1px 5.8px 6.5px -1.1px hsl(var(--shadow-color)/0.34),-0.1px 9.3px 10.5px -1.4px hsl(var(--shadow-color)/0.34),-0.1px 14.6px 16.4px -1.8px hsl(var(--shadow-color)/0.34),-0.2px 22.2px 25px -2.1px hsl(var(--shadow-color)/0.34),-0.3px 32.7px 36.8px -2.5px hsl(var(--shadow-color)/0.34)}:where(.demo-clean) *{all:revert}.demo{margin:2rem 0}.demo canvas,.demo img,.demo svg,.demo video{display:block;max-width:100%}.demo[data-theme~=reveal-bounds]{border:1px solid rgb(var(--text),.25);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.demo[data-theme~=boundaries] canvas,.demo[data-theme~=boundaries] img,.demo[data-theme~=boundaries] svg,.demo[data-theme~=boundaries] video{box-shadow:0 0 0 1px rgb(var(--text),.25)}.demo[data-theme~=drop-shadows] canvas,.demo[data-theme~=drop-shadows] img,.demo[data-theme~=drop-shadows] svg,.demo[data-theme~=drop-shadows] video{box-shadow:var(--shadow-elevation-medium)}.demo[data-theme~=round-corners] canvas,.demo[data-theme~=round-corners] img,.demo[data-theme~=round-corners] svg,.demo[data-theme~=round-corners] video{border-radius:.25rem}.demo-row{display:flex;flex-wrap:wrap;justify-content:space-evenly}.demo-row-fit{flex-wrap:nowrap}.demo-row p{margin:0!important}.demo-row>div{align-items:center;display:flex;flex-direction:column;margin:1rem}.demo-row span{color:#999;display:block;font-size:.875rem;margin:1rem 0;text-align:center;white-space:nowrap}.code-photo:before{background-color:rgba(var(--background),.95);bottom:0;content:"";left:0;position:fixed;right:0;top:0;z-index:-1}.code-photo{align-content:center;box-sizing:border-box;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;padding:2em;position:fixed;text-align:center;top:0;width:100%;z-index:9999}.code-photo canvas{align-self:center;border:1px solid rgba(var(--code),.1);max-width:80vw}.code-photo a[download]{align-self:center;margin-top:1em}.code-photo button[aria-label]{background:transparent;border:0;color:rgb(var(--text));cursor:pointer;font-size:1.5rem;position:absolute;right:1rem;top:1rem}.form{margin:0 auto;max-width:20rem}.form p{margin:1rem 0}.form button,.form input,.form textarea{font-size:.875rem}.form input,.form textarea{background-color:rgb(var(--background));border:none;border-radius:.5rem;box-shadow:inset 0 0 0 1px rgba(var(--text),.25);color:rgb(var(--text));line-height:2.125rem;outline:transparent;padding:0 .75rem;transition:box-shadow .2s ease-in-out}.form input:focus,.form textarea:focus{box-shadow:inset 0 0 0 2px rgb(var(--link))}.form textarea{height:8rem}.form button{background-color:rgb(var(--text));border:none;border-radius:.5rem;color:rgb(var(--background));cursor:pointer;line-height:2.125rem;padding:0 .75rem}.form label+input,.form label+textarea{margin-top:.25rem}.form .field{display:flex;flex-direction:column;justify-content:flex-start}.form .field+.field,.form .field~button{margin-top:1rem}.form .form-status-success{color:rgb(var(--success))}.form .form-status-error{color:rgb(var(--failure))}.form [class*=form-status]{display:none;margin-top:1rem}.form [class*=form-status]:before{content:""}.form .form-status-busy:before{-webkit-animation:spin 1s ease-in-out infinite;animation:spin 1s ease-in-out infinite;background-color:currentColor;border-radius:.125rem;height:.625rem;margin-right:.625rem;margin-top:.25rem;width:.625rem}.form .form-status-success:before{content:"♥";width:1.25rem}.form .form-status-error:before{content:"✖︎";width:1.25rem}.form[data-state=busy] .form-status-busy,.form[data-state=error] .form-status-error,.form[data-state=success] .form-status-success{display:flex}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}