@layer reset,base,components,utils;@layer reset{*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}}@layer base{:root{--size-0: 0;--size-2: .2rem;--size-4: .4rem;--size-6: .6rem;--size-8: .8rem;--size-10: 1rem;--size-11: 1.1rem;--size-12: 1.2rem;--size-13: 1.3rem;--size-14: 1.4rem;--size-15: 1.5rem;--size-16: 1.6rem;--size-18: 1.8rem;--size-20: 2rem;--size-24: 2.4rem;--size-26: 2.6rem;--size-28: 2.8rem;--size-32: 3.2rem;--size-40: 4rem;--size-48: 4.8rem;--size-56: 5.6rem;--size-64: 6.4rem;--size-80: 8rem;--size-96: 9.6rem;--size-112: 11.2rem;--size-128: 12.8rem}}@layer base{:root{--font: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--color-white: hsl(0, 0%, 100%);--color-always-white: hsl(0, 0%, 100%);--color-black: hsl(237.34 11% 13%)}@media (prefers-color-scheme: dark){:root{--color-black: hsl(0, 0%, 90%);--color-white: hsl(218, 7%, 6.5%)}}html{box-sizing:border-box;font-size:62.5%}html,body{margin:0;padding:0}body{font-family:var(--font)}}@layer base{:root{--font: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--base-size: clamp(2.2rem, 3.2vw, 2.4rem);--color-black: hsl(197, 11%, 17%);--color-grey: hsl(197, 4%, 54%);--color-white: hsl(0, 0%, 100%);--color-green: hsl(135, 59%, 49%);--color-box-bg: hsl(216, 24%, 92%);--color-bg: hsl(206, 33%, 96%)}html,body{height:100%;background:var(--color-bg)}body{font-family:var(--font);font-size:1.6rem;color:var(--color-black);line-height:1.5;@media (width >=576px){line-height:1.5}}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{text-decoration:underline;cursor:pointer;color:inherit}.layout{width:clamp(100px,100vw - 48px,1360px);margin:0 auto}h1,h2,h3{font-size:inherit}.text{&--grey{color:var(--color-grey)}}.no-line-break{white-space:nowrap}.download{img{width:13rem}}.content-page{width:clamp(100px,100vw - clamp(2rem,4vw,4.8rem),650px);margin:0 auto;padding:var(--base-size);ul li{margin:.5rem 0}}.back-link{display:block;padding-top:calc(var(--base-size));font-size:1.4rem}.article-content{padding-bottom:4rem;@media (width >=750px){padding-bottom:8rem}p,h2{margin-top:var(--base-size)}h2{margin-bottom:calc((var(--base-size) / 2) * -1)}}.page{width:clamp(100px,100vw - clamp(2rem,4vw,4.8rem),1080px);margin:0 auto;padding:var(--base-size);padding-bottom:2.4rem;@media (width >=750px){display:grid;grid-template-columns:1fr clamp(200px,35vw,410px);grid-gap:clamp(80px,12vw,155px);padding-bottom:8rem}}.page__header{padding:clamp(2rem,8vw,9rem) 0 0 0}@media (width >=750px){.page__left{grid-column:1;grid-row:1}.page__right{padding-top:2.8rem;grid-column:2}}.desktop-screenshot{display:none;@media (width >=750px){display:block}}.screenshot{border-radius:4.8rem;box-shadow:16px 20px 52px #333e591a,0 57.7533px 81.3576px #333e5926}.mobile-screenshot{display:block;padding:1.6rem 0 2.4rem;margin:0 calc((var(--base-size) - 8px) * 1.3 * -1);.screenshot{border-radius:2.4rem}@media (width >=750px){display:none}}.instacrop-icon{width:8rem;height:8rem;display:flex;margin-bottom:calc(var(--base-size));@media (width >=576px){margin-bottom:calc(var(--base-size) * 1.5)}}.label{font-size:calc(var(--base-size) - 6px);font-weight:600;background-color:var(--color-green);border-radius:100px;color:var(--color-white);padding:.5rem 1.2rem;line-height:1.2}.page__title{font-size:var(--base-size);display:flex;align-items:baseline;padding-bottom:calc(var(--base-size) / 4);.label{margin-left:.6rem}}.page__subtitle{font-size:var(--base-size);font-weight:400;padding-block-end:calc(var(--base-size) / 3)}.section{font-size:calc(var(--base-size) - 8px);padding:calc(var(--base-size) - 8px) 0;a{display:inline-block}@media (width >=576px){line-height:1.7}}.section--functionality{background-color:var(--color-box-bg);margin:var(--base-size) calc((var(--base-size) - 8px) * 1.3 * -1) calc(var(--base-size) / 2) calc((var(--base-size) - 8px) * 1.3 * -1);padding:var(--base-size) calc((var(--base-size) - 8px) * 1.3);border-radius:var(--base-size);@media (width >=576px){margin:var(--base-size) calc((var(--base-size) - 8px) * 2 * -1) calc(var(--base-size) / 2) calc((var(--base-size) - 8px) * 2 * -1);padding:var(--base-size) calc((var(--base-size) - 8px) * 2)}}.section__title{font-weight:600;padding-bottom:clamp(.3rem,.6vw,.8rem);line-height:1.2}.section__notes{font-size:calc(var(--base-size) - 12px)}.section__inline{display:flex}.section__inline-icon{width:18px;margin-right:6px}.section__list{margin:0;padding:0;li{margin-left:18px;padding:0 0 0 4px;padding-block:2px;span{font-weight:500;background-color:#f5f7f9;border-radius:8px;padding:.2rem .5rem}}}}@layer utils{.txt-center{text-align:center}.txt-start{text-align:start}.txt-end{text-align:end}.txt-bold{font-weight:700}.txt-decor{text-decoration:underline}.txt-no-decor{text-decoration:none}@media screen and (width < 960px){.hide-lg-down{display:none}}@media screen and (width >= 960px){.hide-lg-up{display:none}}@media screen and (width < 768px){.hide-md-down{display:none}}@media screen and (width >= 768px){.hide-md-up{display:none}}@media (width < 516px){.hide-sm-down{display:none}}@media (width >= 516px){.hide-sm-up{display:none}}}.astro-route-announcer{position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px}@keyframes astroFadeInOut{0%{opacity:1}to{opacity:0}}@keyframes astroFadeIn{0%{opacity:0;mix-blend-mode:plus-lighter}to{opacity:1;mix-blend-mode:plus-lighter}}@keyframes astroFadeOut{0%{opacity:1;mix-blend-mode:plus-lighter}to{opacity:0;mix-blend-mode:plus-lighter}}@keyframes astroSlideFromRight{0%{transform:translate(100%)}}@keyframes astroSlideFromLeft{0%{transform:translate(-100%)}}@keyframes astroSlideToRight{to{transform:translate(100%)}}@keyframes astroSlideToLeft{to{transform:translate(-100%)}}@media (prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}[data-astro-transition-scope]{animation:none!important}}
