.main-blog .blog-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;align-items:center;max-height:10rem;overflow:auto}.main-blog .blog-tags .blog-tag{padding:.5rem 1rem;border-radius:9999px;--alpha-background: .05;background:rgba(var(--color-foreground),var(--alpha-background));font-size:.875rem;color:inherit;text-decoration:none}.main-blog .blog-tags .blog-tag:hover{--alpha-background: .1}.main-blog .blog-tags .blog-tag[aria-current=page]{--alpha-background: 1;color:rgb(var(--color-background))}.main-blog .banner{z-index:2}.main-blog .banner .banner-content .banner-content-main{overflow:visible}.main-blog .blog-filter-toolbar{display:flex;align-items:center;gap:.85rem;width:min(100%,48rem);margin:1.5rem auto 0}.main-blog .blog-search-bar{flex:1 1 auto;min-width:0}.main-blog .blog-search-bar .search-field{box-shadow:0 .25rem .75rem rgba(var(--color-shadow),.15);transition:box-shadow .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1),background-color .25s ease}.main-blog .blog-search-bar .search-field:hover{box-shadow:0 .4rem 1rem rgba(var(--color-shadow),.2);transform:translateY(-1px)}.main-blog .blog-search-bar .search-field:focus-within{box-shadow:0 .5rem 1.25rem rgba(var(--color-shadow),.25);transform:translateY(-1px)}.main-blog .blog-search-bar .field-input{min-width:0;font-size:.95rem}.main-blog .blog-search-bar .search-button{padding-inline:1rem}.main-blog .blog-search-bar .search-button .icon{width:1.125rem;height:1.125rem}.main-blog .blog-search-bar .reset-button{font-size:.85rem;padding-inline:.75rem!important}.main-blog .blog-sort{display:flex;flex:0 0 auto;align-items:center;gap:.55rem}.main-blog .blog-sort__label{flex:0 0 auto;font-size:.82rem;font-weight:600}.main-blog .blog-sort__select-wrap{position:relative;display:inline-flex;align-items:center;border-radius:9999px;background:rgba(var(--color-foreground),.1);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);box-shadow:0 .25rem .75rem rgba(var(--color-shadow),.15);transition:box-shadow .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1),background-color .25s ease}.main-blog .blog-sort__select-wrap.is-open{z-index:20}.main-blog .blog-sort__select-wrap:hover{background:rgba(var(--color-foreground),.13);box-shadow:0 .4rem 1rem rgba(var(--color-shadow),.2);transform:translateY(-1px)}.main-blog .blog-sort__select-wrap:focus-within{background:rgba(var(--color-foreground),.13);box-shadow:0 .5rem 1.25rem rgba(var(--color-shadow),.25);transform:translateY(-1px)}.main-blog .blog-sort__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-width:10.5rem;height:3rem;padding:0 2.35rem 0 .9rem;border:0;outline:0;border-radius:9999px;color:rgb(var(--color-foreground));background:transparent;font:inherit;font-size:.82rem;cursor:pointer;-webkit-appearance:none;appearance:none;text-align:left}.main-blog .blog-sort__trigger:focus,.main-blog .blog-sort__trigger:focus-visible{outline:none!important;box-shadow:none!important}.main-blog .blog-sort__caret{position:absolute;right:.9rem;width:.65rem;height:.65rem;pointer-events:none;transition:transform .25s cubic-bezier(.22,1,.36,1)}.main-blog .blog-sort__select-wrap.is-open .blog-sort__caret{transform:rotate(180deg)}.main-blog .blog-sort__menu{position:absolute;top:calc(100% + .55rem);right:0;display:grid;gap:.2rem;width:max(100%,12.5rem);padding:.45rem;border:1px solid rgba(var(--color-foreground),.12);border-radius:1rem;color:rgb(var(--color-foreground));background:rgba(var(--color-background),.96);-webkit-backdrop-filter:blur(1.25rem);backdrop-filter:blur(1.25rem);box-shadow:0 1rem 2.5rem rgba(var(--color-shadow),.2),0 .2rem .65rem rgba(var(--color-shadow),.1);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-.5rem) scale(.97);transform-origin:top right;transition:opacity .18s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s linear .28s}.main-blog .blog-sort__select-wrap.is-open .blog-sort__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s}.main-blog .blog-sort__option{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:2.55rem;padding:.55rem .75rem;border:0;border-radius:.7rem;color:inherit;background:transparent;font:inherit;font-size:.82rem;text-align:left;cursor:pointer;opacity:0;transform:translateY(-.25rem);transition:color .18s ease,background-color .18s ease,transform .24s cubic-bezier(.22,1,.36,1),opacity .18s ease}.main-blog .blog-sort__select-wrap.is-open .blog-sort__option{opacity:1;transform:translateY(0)}.main-blog .blog-sort__select-wrap.is-open .blog-sort__option:nth-child(2){transition-delay:25ms}.main-blog .blog-sort__select-wrap.is-open .blog-sort__option:nth-child(3){transition-delay:.05s}.main-blog .blog-sort__select-wrap.is-open .blog-sort__option:nth-child(4){transition-delay:75ms}.main-blog .blog-sort__option:hover,.main-blog .blog-sort__option:focus-visible{outline:none;color:rgb(var(--color-link));background:rgba(var(--color-foreground),.07);transform:translate(.15rem)}.main-blog .blog-sort__option[aria-selected=true]{color:rgb(var(--color-foreground));background:rgba(var(--color-foreground),.1);font-weight:650}.main-blog .blog-sort__option-indicator{flex:0 0 auto;width:.48rem;height:.48rem;border-radius:50%;background:currentColor;opacity:0;transform:scale(.35);transition:opacity .2s ease,transform .28s cubic-bezier(.22,1,.36,1)}.main-blog .blog-sort__option[aria-selected=true] .blog-sort__option-indicator{opacity:1;transform:scale(1)}@media screen and (max-width:749px){.main-blog .blog-filter-toolbar{gap:.5rem;width:100%;margin-top:1rem;padding:0 1rem}.main-blog .blog-sort__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.main-blog .blog-sort__trigger{min-width:9.25rem;padding-left:.8rem}.main-blog .blog-sort__menu{width:max(100%,11.5rem)}}@media(prefers-reduced-motion:reduce){.main-blog .blog-sort__select-wrap,.main-blog .blog-sort__caret,.main-blog .blog-sort__menu,.main-blog .blog-sort__option,.main-blog .blog-sort__option-indicator{transition-duration:.01ms!important;transition-delay:0s!important}}.main-blog [data-blog-search-results] mark{background:rgba(var(--color-foreground),.18);color:inherit;padding:0 .2em;border-radius:.2em;font-weight:600}.main-blog [data-blog-search-empty]{text-align:center;padding:3rem 1rem;color:rgba(var(--color-foreground),.7);font-size:1rem}.main-blog [data-blog-search-empty].hidden,.main-blog [data-blog-search-default].hidden,.main-blog [data-blog-search-results].hidden,.main-blog .blog-search-bar .reset-button.hidden{display:none!important}.main-blog .blog-client-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem}.main-blog .blog-client-pagination.hidden{display:none}.main-blog .blog-client-pagination__button{min-width:6.5rem}.main-blog .blog-client-pagination__status{min-width:6.5rem;color:rgba(var(--color-foreground),.68);font-size:.82rem;text-align:center}@media screen and (max-width:749px){.main-blog .blog-client-pagination{gap:.6rem}.main-blog .blog-client-pagination__button{min-width:auto}}.main-blog .blog-content-results{min-width:0}.main-blog .tutorial-directory{display:block;min-width:0}.main-blog .tutorial-directory__details{overflow:hidden;border:1px solid rgba(var(--color-foreground),.12);border-radius:var(--large-radius);background:rgb(var(--color-background));box-shadow:0 .5rem 1.5rem rgba(var(--color-shadow),.08)}.main-blog .tutorial-directory__summary{display:flex;align-items:center;gap:.75rem;padding:1.25rem;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.main-blog .tutorial-directory__summary::-webkit-details-marker{display:none}.main-blog .tutorial-directory__summary-text{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:.2rem}.main-blog .tutorial-directory__eyebrow{overflow:hidden;color:rgba(var(--color-foreground),.58);font-size:.7rem;font-weight:600;letter-spacing:.1em;line-height:1.2;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.main-blog .tutorial-directory__heading{font-size:1.15rem;font-weight:650;letter-spacing:-.015em;line-height:1.25}.main-blog .tutorial-directory__total{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 .55rem;border-radius:9999px;color:rgb(var(--color-background));background:rgb(var(--color-foreground));font-size:.75rem;font-weight:700;line-height:1}.main-blog .tutorial-directory__caret{width:.75rem;height:.75rem;transition:transform .2s ease}.main-blog .tutorial-directory__details[open] .tutorial-directory__caret{transform:rotate(180deg)}.main-blog .tutorial-directory__panel{padding:0 1.25rem 1.25rem}.main-blog .tutorial-directory__search{display:flex;align-items:center;height:2.8rem;padding:0 .8rem;border:1px solid rgba(var(--color-foreground),.18);border-radius:9999px;background:rgba(var(--color-foreground),.035)}.main-blog .tutorial-directory__search-icon{flex:0 0 auto;width:1rem;height:1rem;margin-right:.55rem;color:rgba(var(--color-foreground),.55);transition:color .28s cubic-bezier(.22,1,.36,1)}.main-blog .tutorial-directory__search:focus-within .tutorial-directory__search-icon{color:rgba(var(--color-foreground),.72)}.main-blog .tutorial-directory__input{flex:1 1 auto;min-width:0;height:100%;padding:0;border:0;outline:0;color:rgb(var(--color-foreground));background:transparent;font:inherit;font-size:.82rem;font-weight:inherit}.main-blog .tutorial-directory__input:focus,.main-blog .tutorial-directory__input:focus-visible{border:0!important;outline:none!important;outline-offset:0!important;box-shadow:none!important;font-weight:inherit}.main-blog .tutorial-directory__input::placeholder{color:rgba(var(--color-foreground),.5);opacity:1}.main-blog .tutorial-directory__input::-webkit-search-cancel-button{display:none}.main-blog .tutorial-directory__clear{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;margin-right:-.4rem;padding:.45rem;border:0;border-radius:50%;color:inherit;background:transparent;cursor:pointer}.main-blog .tutorial-directory__clear:hover{background:rgba(var(--color-foreground),.08)}.main-blog .tutorial-directory__clear .icon{width:.7rem;height:.7rem}.main-blog .tutorial-directory__clear.hidden{display:none}.main-blog .tutorial-directory__count{margin:.65rem 0 .55rem;font-size:.72rem;text-align:right}.main-blog .tutorial-directory__nav{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.main-blog .tutorial-directory__list{margin:0}.main-blog .tutorial-directory__groups{border-bottom:1px solid rgba(var(--color-foreground),.08)}.main-blog .tutorial-directory__group{border-top:1px solid rgba(var(--color-foreground),.1)}.main-blog .tutorial-directory__group[hidden]{display:none}.main-blog .tutorial-directory__group-summary{display:flex;align-items:center;gap:.55rem;padding:.78rem .35rem;border-radius:.45rem;cursor:pointer;list-style:none;transition:background-color .15s ease}.main-blog .tutorial-directory__group-summary::-webkit-details-marker{display:none}.main-blog .tutorial-directory__group-summary:hover{background:rgba(var(--color-foreground),.055)}.tutorial-directory__tooltip{position:fixed;z-index:30;width:max-content;max-width:min(22rem,calc(100vw - 1.5rem));padding:.7rem .85rem;border:1px solid rgba(var(--color-foreground),.14);border-radius:.55rem;color:rgb(var(--color-foreground));background:rgb(var(--color-background));box-shadow:0 .65rem 1.75rem rgba(var(--color-shadow),.18);font-size:.76rem;line-height:1.45;overflow-wrap:anywhere;pointer-events:none;white-space:pre-line}.tutorial-directory__tooltip[hidden]{display:none}.main-blog .tutorial-directory__group-title{flex:1 1 auto;min-width:0;font-size:.82rem;font-weight:650;line-height:1.35}.main-blog .tutorial-directory__group-count{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:1.55rem;height:1.55rem;padding:0 .4rem;border-radius:9999px;color:rgba(var(--color-foreground),.65);background:rgba(var(--color-foreground),.075);font-size:.65rem;font-weight:700;line-height:1}.main-blog .tutorial-directory__group-caret{flex:0 0 auto;width:.6rem;height:.6rem;color:rgba(var(--color-foreground),.55);transition:transform .2s ease}.main-blog .tutorial-directory__group[open]>.tutorial-directory__group-summary .tutorial-directory__group-caret{transform:rotate(180deg)}.main-blog .tutorial-directory__group-body{padding:0 0 .35rem .45rem}.main-blog .tutorial-directory__group>.tutorial-directory__list{padding:0 0 .35rem .45rem}.main-blog .tutorial-directory__group>.tutorial-directory__list .tutorial-directory__link,.main-blog .tutorial-directory__group-body>.tutorial-directory__list .tutorial-directory__link{grid-template-columns:1.5rem minmax(0,1fr);padding-top:.62rem;padding-bottom:.62rem}.main-blog .tutorial-directory__list--direct{padding:0}.main-blog .tutorial-directory__subgroups{display:grid;gap:.2rem}.main-blog .tutorial-directory__group--secondary{margin-left:.25rem;border-top:1px solid rgba(var(--color-foreground),.075);border-left:2px solid rgba(var(--color-foreground),.1)}.main-blog .tutorial-directory__group--secondary>.tutorial-directory__group-summary{padding:.62rem .35rem .62rem .6rem}.main-blog .tutorial-directory__group--secondary .tutorial-directory__group-title{font-size:.76rem;font-weight:600}.main-blog .tutorial-directory__group--secondary .tutorial-directory__group-count{min-width:1.4rem;height:1.4rem;font-size:.6rem}.main-blog .tutorial-directory__group--secondary>.tutorial-directory__list{padding-left:.75rem}.main-blog .tutorial-directory__group--secondary>.tutorial-directory__list .tutorial-directory__link{font-size:.75rem}.main-blog .tutorial-directory__list--ungrouped{border-top:1px solid rgba(var(--color-foreground),.1)}.main-blog .tutorial-directory__item{border-top:1px solid rgba(var(--color-foreground),.08)}.main-blog .tutorial-directory__item[hidden]{display:none}.main-blog .tutorial-directory__link{display:grid;grid-template-columns:1.65rem minmax(0,1fr);gap:.5rem;align-items:start;padding:.72rem .35rem;border-radius:.45rem;color:inherit;font-size:.79rem;line-height:1.4;text-decoration:none;transition:color .15s ease,background-color .15s ease}.main-blog .tutorial-directory__link:hover{color:rgb(var(--color-link));background:rgba(var(--color-foreground),.055)}.main-blog .tutorial-directory__number{padding-top:.07rem;color:rgba(var(--color-foreground),.42);font-size:.66rem;font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:.04em}.main-blog .tutorial-directory__empty{margin:0;padding:1.5rem .5rem .75rem;color:rgba(var(--color-foreground),.65);font-size:.82rem;text-align:center}.main-blog .tutorial-directory__empty.hidden{display:none}@media screen and (min-width:990px){.main-blog .blog-content-layout.has-directory{display:grid;grid-template-columns:minmax(15rem,18rem) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}.main-blog .tutorial-directory__details{position:sticky;top:calc(var(--header-height, 5rem) + 1rem)}.main-blog .tutorial-directory__details:not([open])>.tutorial-directory__panel{display:block}.main-blog .tutorial-directory__summary{cursor:default;pointer-events:none}.main-blog .tutorial-directory__caret{display:none}.main-blog .tutorial-directory__nav{max-height:calc(100vh - var(--header-height, 5rem) - 14rem)}}@media screen and (max-width:989px){.main-blog .tutorial-directory{margin-bottom:2rem}.main-blog .tutorial-directory__nav{max-height:26rem}}.main-blog .featured-blogs{margin-top:2rem;margin-bottom:2rem;display:flex;align-items:stretch;gap:2rem}.main-blog .featured-blogs .featured-media{flex:1 1 50%;border-radius:var(--large-radius)}.main-blog .featured-blogs .featured-media .media-content{padding:1rem}.main-blog .featured-blogs .featured-media .media-content .badge{font-size:.85rem;height:2rem;display:inline-flex;gap:.25rem}.main-blog .featured-blogs .featured-articles{flex:1 1 auto}.main-blog .featured-blogs .featured-articles>li:not(:last-child){margin-bottom:1rem}@media screen and (max-width:749px){.main-blog .featured-blogs{flex-wrap:wrap;gap:1rem}}@media screen and (min-width:750px){.main-blog .featured-blogs .featured-articles{max-width:35rem}.main-blog .featured-blogs.image-right-side .featured-media{order:1}}
/*# sourceMappingURL=/cdn/shop/t/47/assets/section-main-blog.css.map */