.flex{display:flex}.inline-flex{display:inline-flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.flex-1{flex:1 1 0}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.uppercase{text-transform:uppercase}.hyphenate{word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}.no-wrap{white-space:nowrap}@media screen and (max-width:639px){.mobile-text{margin-left:auto;margin-right:auto;max-width:18rem}}.max-w-col-10,.max-w-col-4,.max-w-col-6,.max-w-col-8{width:100%}.max-w-col-4{max-width:24rem}.max-w-col-6{max-width:36.75rem}.max-w-col-8{max-width:49.5rem}.max-w-col-10{max-width:62.25rem}.top-bar{background-color:#fff;border-bottom:1px solid #e6e6e6;left:0;padding-bottom:.75rem;padding-top:.75rem;position:fixed;text-align:center;top:0;transition:transform .4s cubic-bezier(.165,.84,.44,1);visibility:hidden;width:100%;z-index:100}@media screen and (prefers-reduced-motion:reduce){.top-bar{transition-duration:1ms}}@media screen and (max-width:1023px){.top-bar{top:calc(4rem - 1px)}}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.top-bar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#ffffffd9}}.content-card{background-color:#fff;border-radius:12px;box-shadow:0 1px 2px #00000014,0 4px 8px #00000005,0 0 4px #00000014;display:flex;flex-direction:column;grid-row:span 1;order:2;padding-bottom:.75rem;position:relative;transition:all .25s cubic-bezier(.455,.03,.515,.955)}@media screen and (min-width:768px){.content-card{padding-bottom:1rem}}.content-card:hover{transform:scale(1.025)}.content-card:hover .content-card__link__arrow{display:flex}.content-card--pinned{grid-column:span 2;order:1}.content-card__link{height:100%;position:absolute;width:100%;z-index:10}.content-card__link__arrow{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px #00000014;display:none;padding:.125rem;position:absolute;right:.5rem;top:.5rem;z-index:10}.content-card__link__arrow svg{color:#5c5c5c}.content-card__asset-wrapper{border-radius:12px 12px 0 0;overflow:hidden;position:relative}.content-card__asset-wrapper:before{background:#00000014;bottom:0;content:"";display:block;height:1px;position:absolute;width:100%}.content-card__asset{display:block;height:auto;width:100%}.content-card__text{color:#212123;font-size:.9375rem;font-weight:500;line-height:1.25rem;margin-bottom:.25rem;padding:.75rem .75rem 0}@media screen and (min-width:768px){.content-card__text{padding:1rem 1rem 0}}@media screen and (min-width:1024px){.content-card__text{font-size:1.0625rem;font-size:1rem;font-weight:500;line-height:1.5rem}}@media screen and (min-width:1220px){.content-card__text{font-size:1.0625rem;font-weight:500;line-height:1.5rem}}.content-card__text p{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}@media screen and (min-width:1024px){.content-card__text p{-webkit-line-clamp:2}}.content-card__tag{border-radius:12px;bottom:.75rem;color:#000000a3;display:none;font-size:.625rem;font-weight:600;left:.75rem;line-height:1rem;padding:.0625rem .3125rem 0;position:absolute;text-transform:uppercase;z-index:10}@media screen and (min-width:768px){.content-card__tag{bottom:1rem;font-size:.6875rem;left:1rem;line-height:.75rem;padding:.25rem .375rem .1875rem}}@media (prefers-color-scheme:dark){.design-resources--web-app .content-card__tag{color:#ffffffe6}}.design-resources--dark .design-resources--web-app .content-card__tag{color:#ffffffe6}.content__items--see-all .content-card__tag{display:block}.content-card__tag--templates{background:var(--yellow-1)}@media (prefers-color-scheme:dark){.design-resources--web-app .content-card__tag--templates{background:#406121}}.design-resources--dark .design-resources--web-app .content-card__tag--templates{background:#406121}.content-card__tag--courses{background:var(--teal-1)}@media (prefers-color-scheme:dark){.design-resources--web-app .content-card__tag--courses{background:#1f5b59}}.design-resources--dark .design-resources--web-app .content-card__tag--courses{background:#1f5b59}.content-card__tag--design-kits{background:var(--purple-1)}@media (prefers-color-scheme:dark){.design-resources--web-app .content-card__tag--design-kits{background:#55366e}}.design-resources--dark .design-resources--web-app .content-card__tag--design-kits{background:#55366e}.content-card__tag--guides{background:var(--pink-1)}@media (prefers-color-scheme:dark){.design-resources--web-app .content-card__tag--guides{background:#6b2e42}}.design-resources--dark .design-resources--web-app .content-card__tag--guides{background:#6b2e42}.content-card__tag--tutorials{background:var(--salad-green-1)}@media (prefers-color-scheme:dark){.design-resources--web-app .content-card__tag--tutorials{background:#406121}}.design-resources--dark .design-resources--web-app .content-card__tag--tutorials{background:#406121}.content-card__tag--videos{background:var(--green-1)}@media (prefers-color-scheme:dark){.design-resources--web-app .content-card__tag--videos{background:#1e5e42}}.design-resources--dark .design-resources--web-app .content-card__tag--videos{background:#1e5e42}.content-card__tag--customer-stories{background:var(--blue-1)}@media (prefers-color-scheme:dark){.design-resources--web-app .content-card__tag--customer-stories{background:#20466e}}.design-resources--dark .design-resources--web-app .content-card__tag--customer-stories{background:#20466e}.content-card__tag--shorts{background:var(--red-1)}@media (prefers-color-scheme:dark){.design-resources--web-app .content-card__tag--shorts{background:#6c2821}}.design-resources--dark .design-resources--web-app .content-card__tag--shorts{background:#6c2821}:root{--blue-1:#cce5ff;--blue-2:#bedeff;--blue-3:#0080ff;--green-1:#ccf6e2;--green-2:#a8f4d0;--green-3:#00d16e;--orange-1:#ffe1cc;--orange-2:#ffd1b0;--orange-3:#ff6a00;--pink-1:#ffd6e2;--pink-2:#ffbed1;--pink-3:#ff336d;--purple-1:#f0dcff;--purple-2:#e9ccff;--purple-3:#b24dff;--red-1:#ffd2cc;--red-2:#ffbfb7;--red-3:#ff1e00;--salad-green-1:#d4f3b4;--salad-green-2:#bdef8b;--salad-green-3:#70dd00;--sky-blue-1:#cef2fc;--sky-blue-2:#bcecf9;--sky-blue-3:#46d2f9;--teal-1:#cdf3f1;--teal-2:#a8efeb;--teal-3:#00c7b8;--yellow-1:#fff1c2;--yellow-2:#fce79f;--yellow-3:#ffbf00}body.design-resources{background-color:#fafafa}.hero{background-image:url(../png/hero-background%402x.png);background-repeat:no-repeat;background-size:100% 100%;border-bottom:1px solid #00000014;margin-top:-4rem;padding-bottom:4.5rem;padding-top:8.5rem}@media screen and (min-width:768px){.hero{padding-bottom:5.5rem}}@media screen and (min-width:1024px){.hero{margin-top:-5rem;padding-top:9.75rem}}.hero__title{text-wrap:pretty;font-size:4.75rem;font-weight:900;font-weight:700;letter-spacing:-.09375rem;line-height:4.75rem}@media screen and (max-width:767px){.hero__title{font-size:2.75rem;letter-spacing:-.0625rem;line-height:3rem}}@media screen and (min-width:768px) and (max-width:1219px){.hero__title{font-size:3.5rem;line-height:3.5rem}}.hero__lead{font-size:1.0625rem;font-weight:300;line-height:1.5rem;margin:0 auto}@media screen and (min-width:1024px){.hero__lead{font-size:1.25rem;line-height:1.75rem}}@media screen and (min-width:768px){.hero__lead{max-width:32.5rem}}@media screen and (min-width:1024px){.hero__lead{max-width:39.75rem}}.content>.wrapper,.top-bar>.wrapper{max-width:77.25rem}.content__filters{-webkit-overflow-scrolling:touch;align-items:center;display:flex;gap:.5rem;overflow:scroll}.content__filters::-webkit-scrollbar{display:none}@media screen and (min-width:1024px){.content__filters{justify-content:center}}.content__filters__separator{background:#ccc;border-radius:50%;height:.375rem;margin-left:.25rem;margin-right:.25rem;min-width:.375rem;width:.375rem}@media screen and (max-width:1023px){.content__filters#main-filters-row{margin-left:-1.5rem;margin-right:-1.5rem;padding:0 1.5rem 1.75rem}}@media screen and (min-width:1024px){.content__filters#main-filters-row{padding-bottom:3.25rem}}.top-bar{padding:0}@media screen and (max-width:767px){.top-bar .content__filters{padding:1rem}}@media screen and (min-width:768px) and (max-width:1023px){.top-bar .content__filters{padding:1rem 2rem}}@media screen and (min-width:1024px){.top-bar{padding:1rem 0}}.filter{appearance:none;background-color:initial;border:2px solid #0000;border-radius:0;border-radius:20px;color:#212123;font-size:.9375rem;line-height:normal;line-height:1.25rem;margin:0;padding:.375rem .75rem .3125rem;white-space:nowrap}.filter--see-all{background:var(--orange-1)}.filter--see-all:hover{background:var(--orange-2)}.filter--see-all.is-active{border-color:var(--orange-3)}.filter--templates{background:var(--yellow-1)}.filter--templates:hover{background:var(--yellow-2)}.filter--templates.is-active{border-color:var(--yellow-3)}.filter--courses{background:var(--teal-1)}.filter--courses:hover{background:var(--teal-2)}.filter--courses.is-active{border-color:var(--teal-3)}.filter--design-kits{background:var(--purple-1)}.filter--design-kits:hover{background:var(--purple-2)}.filter--design-kits.is-active{border-color:var(--purple-3)}.filter--guides{background:var(--pink-1)}.filter--guides:hover{background:var(--pink-2)}.filter--guides.is-active{border-color:var(--pink-3)}.filter--tutorials{background:var(--salad-green-1)}.filter--tutorials:hover{background:var(--salad-green-2)}.filter--tutorials.is-active{border-color:var(--salad-green-3)}.filter--videos{background:var(--green-1)}.filter--videos:hover{background:var(--green-2)}.filter--videos.is-active{border-color:var(--green-3)}.filter--customer-stories{background:var(--blue-1)}.filter--customer-stories:hover{background:var(--blue-2)}.filter--customer-stories.is-active{border-color:var(--blue-3)}.filter--shorts{background:var(--red-1)}.filter--shorts:hover{background:var(--red-2)}.filter--shorts.is-active{border-color:var(--red-3)}section.content{border-bottom:1px solid #00000014;overflow:hidden;padding-bottom:4rem}@media screen and (min-width:1024px){section.content{padding-bottom:5.25rem}}.content__items,.content__items__load-more{display:none;position:relative}.content__items__load-more{margin:3rem auto 0}.content__items__grid{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);padding:.75rem 0;position:relative;transition:max-height .8s cubic-bezier(.455,.03,.515,.955)}@media screen and (min-width:768px){.content__items__grid{gap:2rem}}@media screen and (min-width:768px) and (max-width:1023px){.content__items__grid{grid-template-columns:repeat(3,1fr)}.content__items__grid .content-card--pinned{grid-column:span 1}}@media screen and (min-width:1024px){.content__items__grid{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width:1220px){.content__items__grid{gap:2.25rem}}.content__items__link-wrapper{align-items:center;display:flex;justify-content:center;padding-top:3.25rem;position:relative}.content__items__link-wrapper svg{margin-left:0}.content__items--is-active{display:block}.content__items--shortened .content__items__grid{margin:0 -1rem;overflow:hidden;padding:.75rem 1rem 7.5rem}.content__items--shortened .content__items__grid:after{background-image:linear-gradient(180deg,#0000,#fafafa80 50%,#fafafa);bottom:0;content:"";height:7.5rem;left:0;position:absolute;width:100%;z-index:100}.content__items--shortened .content__items__load-more{display:block}.content__items--shortened .content__items__load-more--hidden{display:none}.content__items--shortened.content__items--full-height .content__items__grid--gradient-hidden{padding-bottom:.75rem}.content__items--shortened.content__items--full-height .content__items__grid--gradient-hidden:after{display:none}.content__items--shortened.content__items--see-all .content__items__grid{max-height:125rem}@media screen and (min-width:768px){.content__items--shortened.content__items--see-all .content__items__grid{max-height:106.25rem}}.content__items--shortened.content__items--courses .content__items__grid{max-height:106.25rem}@media screen and (min-width:2200px){.content__items--shortened.content__items--courses .content__items__grid{max-height:none}}.content__items--design-kits .pinned-items,.content__items--tutorials .pinned-items{display:none}.content__items--see-all .content-card__asset-wrapper:after{background-image:linear-gradient(180deg,#0000,#0003 50%,#0000007a);bottom:0;content:"";height:5.25rem;left:0;opacity:.64;position:absolute;width:100%}.pinned-items{display:grid;gap:1.5rem;grid-column:span 2;grid-template-columns:repeat(2,1fr)}@media screen and (min-width:768px){.pinned-items{gap:2rem;grid-column:span 3}}@media screen and (min-width:1024px){.pinned-items{gap:2.25rem;grid-column:span 4;grid-template-columns:repeat(4,1fr)}}