*,
:after,
:before {
 box-sizing:border-box
}
* {
 border:0;
 font:inherit;
 margin:0;
 padding:0
}
body {
 background-color:var(--color-bg)
}
menu,
ol,
ul {
 list-style:none
}
blockquote,
q {
 quotes:none
}
.link,
.reset,
button,
input,
select,
textarea {
 -webkit-appearance:none;
 appearance:none;
 background-color:transparent;
 border-radius:0;
 color:inherit;
 line-height:inherit
}
.link,
a {
 color:var(--color-primary)
}
textarea {
 overflow:auto;
 resize:vertical;
 vertical-align:top
}
table {
 border-collapse:collapse;
 border-spacing:0
}
img,
svg,
video {
 display:block;
 max-width:100%
}
[data-theme] {
 color:var(--color-contrast-high)
}
:root,
[data-theme=default] {
 --color-primary-darker-hsl:250,84%,38%;
 --color-primary-darker:hsl(var(--color-primary-darker-hsl));
 --color-primary-dark-hsl:250,84%,46%;
 --color-primary-dark:hsl(var(--color-primary-dark-hsl));
 --color-primary-hsl:250,84%,54%;
 --color-primary:hsl(var(--color-primary-hsl));
 --color-primary-light-hsl:250,84%,60%;
 --color-primary-light:hsl(var(--color-primary-light-hsl));
 --color-primary-lighter-hsl:250,84%,67%;
 --color-primary-lighter:hsl(var(--color-primary-lighter-hsl));
 --color-accent-darker-hsl:342,89%,38%;
 --color-accent-darker:hsl(var(--color-accent-darker-hsl));
 --color-accent-dark-hsl:342,89%,43%;
 --color-accent-dark:hsl(var(--color-accent-dark-hsl));
 --color-accent-hsl:342,89%,48%;
 --color-accent:hsl(var(--color-accent-hsl));
 --color-accent-light-hsl:342,89%,56%;
 --color-accent-light:hsl(var(--color-accent-light-hsl));
 --color-accent-lighter-hsl:342,89%,62%;
 --color-accent-lighter:hsl(var(--color-accent-lighter-hsl));
 --color-secondary-darker-hsl:28,45%,41%;
 --color-secondary-darker:hsl(var(--color-secondary-darker-hsl));
 --color-secondary-dark-hsl:28,45%,48%;
 --color-secondary-dark:hsl(var(--color-secondary-dark-hsl));
 --color-secondary-hsl:28,45%,56%;
 --color-secondary:hsl(var(--color-secondary-hsl));
 --color-secondary-light-hsl:28,45%,63%;
 --color-secondary-light:hsl(var(--color-secondary-light-hsl));
 --color-secondary-lighter-hsl:28,45%,70%;
 --color-secondary-lighter:hsl(var(--color-secondary-lighter-hsl));
 --color-black-hsl:231,15%,9%;
 --color-black:hsl(var(--color-black-hsl));
 --color-white-hsl:0,0%,100%;
 --color-white:hsl(var(--color-white-hsl));
 --color-warning-darker-hsl:35,79%,48%;
 --color-warning-darker:hsl(var(--color-warning-darker-hsl));
 --color-warning-dark-hsl:35,79%,56%;
 --color-warning-dark:hsl(var(--color-warning-dark-hsl));
 --color-warning-hsl:35,79%,66%;
 --color-warning:hsl(var(--color-warning-hsl));
 --color-warning-light-hsl:35,79%,74%;
 --color-warning-light:hsl(var(--color-warning-light-hsl));
 --color-warning-lighter-hsl:35,79%,82%;
 --color-warning-lighter:hsl(var(--color-warning-lighter-hsl));
 --color-success-darker-hsl:170,78%,26%;
 --color-success-darker:hsl(var(--color-success-darker-hsl));
 --color-success-dark-hsl:170,78%,31%;
 --color-success-dark:hsl(var(--color-success-dark-hsl));
 --color-success-hsl:170,78%,36%;
 --color-success:hsl(var(--color-success-hsl));
 --color-success-light-hsl:170,78%,42%;
 --color-success-light:hsl(var(--color-success-light-hsl));
 --color-success-lighter-hsl:170,78%,47%;
 --color-success-lighter:hsl(var(--color-success-lighter-hsl));
 --color-error-darker-hsl:342,89%,38%;
 --color-error-darker:hsl(var(--color-error-darker-hsl));
 --color-error-dark-hsl:342,89%,43%;
 --color-error-dark:hsl(var(--color-error-dark-hsl));
 --color-error-hsl:342,89%,48%;
 --color-error:hsl(var(--color-error-hsl));
 --color-error-light-hsl:342,89%,56%;
 --color-error-light:hsl(var(--color-error-light-hsl));
 --color-error-lighter-hsl:342,89%,62%;
 --color-error-lighter:hsl(var(--color-error-lighter-hsl));
 --color-bg-darker-hsl:240,4%,90%;
 --color-bg-darker:hsl(var(--color-bg-darker-hsl));
 --color-bg-dark-hsl:240,4%,95%;
 --color-bg-dark:hsl(var(--color-bg-dark-hsl));
 --color-bg-hsl:0,0%,100%;
 --color-bg:hsl(var(--color-bg-hsl));
 --color-bg-light-hsl:0,0%,100%;
 --color-bg-light:hsl(var(--color-bg-light-hsl));
 --color-bg-lighter-hsl:0,0%,100%;
 --color-bg-lighter:hsl(var(--color-bg-lighter-hsl));
 --color-contrast-lower-hsl:240,4%,85%;
 --color-contrast-lower:hsl(var(--color-contrast-lower-hsl));
 --color-contrast-low-hsl:240,4%,65%;
 --color-contrast-low:hsl(var(--color-contrast-low-hsl));
 --color-contrast-medium-hsl:225,4%,47%;
 --color-contrast-medium:hsl(var(--color-contrast-medium-hsl));
 --color-contrast-high-hsl:230,7%,23%;
 --color-contrast-high:hsl(var(--color-contrast-high-hsl));
 --color-contrast-higher-hsl:230,13%,9%;
 --color-contrast-higher:hsl(var(--color-contrast-higher-hsl));
 --gradient-primary-stop-1:#14151a;
 --gradient-primary-stop-2:#4f4681;
 --gradient-primary-stop-3:#14151a
}
[data-theme=dark] {
 --color-primary-darker-hsl:250,100%,60%;
 --color-primary-darker:hsl(var(--color-primary-darker-hsl));
 --color-primary-dark-hsl:250,100%,64%;
 --color-primary-dark:hsl(var(--color-primary-dark-hsl));
 --color-primary-hsl:250,100%,69%;
 --color-primary:hsl(var(--color-primary-hsl));
 --color-primary-light-hsl:250,100%,72%;
 --color-primary-light:hsl(var(--color-primary-light-hsl));
 --color-primary-lighter-hsl:250,100%,76%;
 --color-primary-lighter:hsl(var(--color-primary-lighter-hsl));
 --color-accent-darker-hsl:342,92%,41%;
 --color-accent-darker:hsl(var(--color-accent-darker-hsl));
 --color-accent-dark-hsl:342,92%,47%;
 --color-accent-dark:hsl(var(--color-accent-dark-hsl));
 --color-accent-hsl:342,92%,54%;
 --color-accent:hsl(var(--color-accent-hsl));
 --color-accent-light-hsl:342,92%,60%;
 --color-accent-light:hsl(var(--color-accent-light-hsl));
 --color-accent-lighter-hsl:342,92%,65%;
 --color-accent-lighter:hsl(var(--color-accent-lighter-hsl));
 --color-secondary-darker-hsl:28,45%,41%;
 --color-secondary-darker:hsl(var(--color-secondary-darker-hsl));
 --color-secondary-dark-hsl:28,45%,48%;
 --color-secondary-dark:hsl(var(--color-secondary-dark-hsl));
 --color-secondary-hsl:28,45%,56%;
 --color-secondary:hsl(var(--color-secondary-hsl));
 --color-secondary-light-hsl:28,45%,63%;
 --color-secondary-light:hsl(var(--color-secondary-light-hsl));
 --color-secondary-lighter-hsl:28,45%,70%;
 --color-secondary-lighter:hsl(var(--color-secondary-lighter-hsl));
 --color-black-hsl:230,13%,9%;
 --color-black:hsl(var(--color-black-hsl));
 --color-white-hsl:0,0%,100%;
 --color-white:hsl(var(--color-white-hsl));
 --color-warning-darker-hsl:35,79%,48%;
 --color-warning-darker:hsl(var(--color-warning-darker-hsl));
 --color-warning-dark-hsl:35,79%,56%;
 --color-warning-dark:hsl(var(--color-warning-dark-hsl));
 --color-warning-hsl:35,79%,66%;
 --color-warning:hsl(var(--color-warning-hsl));
 --color-warning-light-hsl:35,79%,74%;
 --color-warning-light:hsl(var(--color-warning-light-hsl));
 --color-warning-lighter-hsl:35,79%,82%;
 --color-warning-lighter:hsl(var(--color-warning-lighter-hsl));
 --color-success-darker-hsl:170,78%,26%;
 --color-success-darker:hsl(var(--color-success-darker-hsl));
 --color-success-dark-hsl:170,78%,31%;
 --color-success-dark:hsl(var(--color-success-dark-hsl));
 --color-success-hsl:170,78%,36%;
 --color-success:hsl(var(--color-success-hsl));
 --color-success-light-hsl:170,78%,42%;
 --color-success-light:hsl(var(--color-success-light-hsl));
 --color-success-lighter-hsl:170,78%,47%;
 --color-success-lighter:hsl(var(--color-success-lighter-hsl));
 --color-error-darker-hsl:342,92%,41%;
 --color-error-darker:hsl(var(--color-error-darker-hsl));
 --color-error-dark-hsl:342,92%,47%;
 --color-error-dark:hsl(var(--color-error-dark-hsl));
 --color-error-hsl:342,92%,54%;
 --color-error:hsl(var(--color-error-hsl));
 --color-error-light-hsl:342,92%,60%;
 --color-error-light:hsl(var(--color-error-light-hsl));
 --color-error-lighter-hsl:342,92%,65%;
 --color-error-lighter:hsl(var(--color-error-lighter-hsl));
 --color-bg-darker-hsl:232,7%,8%;
 --color-bg-darker:hsl(var(--color-bg-darker-hsl));
 --color-bg-dark-hsl:233,8%,11%;
 --color-bg-dark:hsl(var(--color-bg-dark-hsl));
 --color-bg-hsl:232,11%,15%;
 --color-bg:hsl(var(--color-bg-hsl));
 --color-bg-light-hsl:233,8%,19%;
 --color-bg-light:hsl(var(--color-bg-light-hsl));
 --color-bg-lighter-hsl:232,7%,22%;
 --color-bg-lighter:hsl(var(--color-bg-lighter-hsl));
 --color-contrast-lower-hsl:240,6%,26%;
 --color-contrast-lower:hsl(var(--color-contrast-lower-hsl));
 --color-contrast-low-hsl:240,3%,41%;
 --color-contrast-low:hsl(var(--color-contrast-low-hsl));
 --color-contrast-medium-hsl:231,3%,57%;
 --color-contrast-medium:hsl(var(--color-contrast-medium-hsl));
 --color-contrast-high-hsl:240,5%,82%;
 --color-contrast-high:hsl(var(--color-contrast-high-hsl));
 --color-contrast-higher-hsl:240,100%,99%;
 --color-contrast-higher:hsl(var(--color-contrast-higher-hsl));
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 --gradient-primary-stop-1:#fafaff;
 --gradient-primary-stop-2:#e5e1fe;
 --gradient-primary-stop-3:#fafaff
}
:root {
 --space-unit:1rem
}
* {
 --space-4xs:calc(var(--space-unit)*0.125);
 --space-3xs:calc(var(--space-unit)*0.25);
 --space-2xs:calc(var(--space-unit)*0.375);
 --space-xs:calc(var(--space-unit)*0.5);
 --space-sm:calc(var(--space-unit)*0.75);
 --space-md:calc(var(--space-unit)*1.25);
 --space-lg:calc(var(--space-unit)*2);
 --space-xl:calc(var(--space-unit)*3.25);
 --space-2xl:calc(var(--space-unit)*5.25);
 --space-3xl:calc(var(--space-unit)*8.5);
 --space-4xl:calc(var(--space-unit)*13.75);
 --component-padding:var(--space-md)
}
@media (min-width:64rem) {
 * {
  --space-4xs:calc(var(--space-unit)*0.1875);
  --space-3xs:calc(var(--space-unit)*0.375);
  --space-2xs:calc(var(--space-unit)*0.5625);
  --space-xs:calc(var(--space-unit)*0.75);
  --space-sm:calc(var(--space-unit)*1.125);
  --space-md:calc(var(--space-unit)*1.875);
  --space-lg:calc(var(--space-unit)*3);
  --space-xl:calc(var(--space-unit)*4.875);
  --space-2xl:calc(var(--space-unit)*7.875);
  --space-3xl:calc(var(--space-unit)*12.75);
  --space-4xl:calc(var(--space-unit)*20.625)
 }
}
:root {
 --radius-sm:calc(var(--radius-md)/2);
 --radius-md:0.375em;
 --radius-lg:calc(var(--radius-md)*2);
 --shadow-ring:0 0 0 1px hsla(var(--color-black-hsl),0.05);
 --shadow-xs:0 0 0 1px hsla(var(--color-black-hsl),0.02),0 1px 3px -1px hsla(var(--color-black-hsl),0.2);
 --shadow-sm:0 0.3px 0.4px hsla(var(--color-black-hsl),0.02),0 0.9px 1.5px hsla(var(--color-black-hsl),0.045),0 3.5px 6px hsla(var(--color-black-hsl),0.09);
 --shadow-md:0 0.9px 1.25px hsla(var(--color-black-hsl),0.025),0 3px 5px hsla(var(--color-black-hsl),0.05),0 12px 20px hsla(var(--color-black-hsl),0.09);
 --shadow-lg:0 1.2px 1.9px -1px hsla(var(--color-black-hsl),0.01),0 3px 5px -1px hsla(var(--color-black-hsl),0.015),0 8px 15px -1px hsla(var(--color-black-hsl),0.05),0 28px 40px -1px hsla(var(--color-black-hsl),0.1);
 --shadow-xl:0 1.5px 2.1px -6px hsla(var(--color-black-hsl),0.009),0 3.6px 5.2px -6px hsla(var(--color-black-hsl),0.0115),0 7.3px 10.6px -6px hsla(var(--color-black-hsl),0.0125),0 16.2px 21.9px -6px hsla(var(--color-black-hsl),0.025),0 46px 60px -6px hsla(var(--color-black-hsl),0.15);
 --inner-glow:inset 0 0 0.5px 1px hsla(var(--color-white-hsl),0.075);
 --inner-glow-top:inset 0 1px 0.5px hsla(var(--color-white-hsl),0.075);
 --ease-in-out:cubic-bezier(0.645,0.045,0.355,1);
 --ease-in:cubic-bezier(0.55,0.055,0.675,0.19);
 --ease-out:cubic-bezier(0.215,0.61,0.355,1);
 --ease-out-back:cubic-bezier(0.34,1.56,0.64,1)
}
.link-subtle {
 color:var(--color-contrast-medium);
 text-decoration:none
}
.link-subtle:hover {
 color:var(--color-primary)
}
.link-subtle-2:hover {
 text-decoration:underline
}
@font-face {
 font-family:PolySans;
 src:url(../fonts/PolySans-Bulky.woff2) format("woff2")
}
@font-face {
 font-display:swap;
 font-family:Inter;
 font-style:oblique 0deg 10deg;
 font-weight:400 700;
 src:url(../fonts/Inter.var.woff2?v=3.19) format("woff2")
}
@font-face {
 font-family:JetBrains Mono;
 src:url(../fonts/JetBrainsMono-Regular.woff2) format("woff2")
}
:root {
 --font-primary:"Inter",system-ui,sans-serif;
 --font-secondary:"PolySans",system-ui,sans-serif;
 --font-mono:"JetBrains Mono",monospace;
 --font-system-ui:system-ui,sans-serif;
 --heading-line-height:1.2;
 --body-line-height:1.4
}
* {
 --text-3xs:0.5rem;
 --text-2xs:0.625rem;
 --text-xs:0.75rem;
 --text-sm:0.875rem;
 --text-base:1rem;
 --text-md:1.1875rem;
 --text-lg:1.4375rem;
 --text-xl:1.75rem;
 --text-2xl:2.0625rem;
 --text-3xl:2.5rem;
 --text-4xl:3rem;
 --text-5xl:3.625rem
}
@media (min-width:64rem) {
 body:not(.app),
 body:not(.app) * {
  --text-3xs:0.5rem;
  --text-2xs:0.625rem;
  --text-xs:0.75rem;
  --text-sm:0.9375rem;
  --text-base:1.125rem;
  --text-md:1.375rem;
  --text-lg:1.75rem;
  --text-xl:2.1875rem;
  --text-2xl:2.75rem;
  --text-3xl:3.4375rem;
  --text-4xl:4.25rem;
  --text-5xl:5.3125rem
 }
}
body {
 color:var(--color-contrast-high);
 font-family:var(--font-primary);
 font-size:var(--text-base)
}
h1,
h2,
h3,
h4 {
 color:var(--color-contrast-higher);
 font-family:var(--font-secondary);
 font-weight:800;
 line-height:var(--heading-line-height)
}
h1 {
 font-size:var(--text-2xl)
}
h2 {
 font-size:var(--text-xl)
}
h3 {
 font-size:var(--text-lg)
}
h4 {
 font-size:var(--text-md)
}
small {
 font-size:var(--text-sm)
}
.text-component :where(h1,
h2,
h3,
h4) {
 margin-bottom:var(--space-sm);
 margin-top:calc(var(--space-md)*1.07692)
}
.text-component :where(p,
blockquote,
ul li,
ol li) {
 line-height:var(--body-line-height)
}
.text-component :where(ul,
ol,
p,
blockquote,
.text-component__block,
.tbl,
.text-component__img,
.hljs,
.modal-video-banner,
.note,
.media-wrapper-16\:9) {
 margin-bottom:var(--space-sm)
}
.text-component .text-component__img {
 margin-bottom:var(--space-md);
 margin-top:var(--space-md)
}
.text-component :where(ul,
ol) {
 padding-left:1.25em
}
.text-component ol :where(ul,
ol),
.text-component ul :where(ul,
ol) {
 margin-bottom:0;
 padding-left:1em
}
.text-component ul {
 list-style-type:disc
}
.text-component ol {
 list-style-type:decimal
}
.text-component ul li::marker {
 color:var(--color-contrast-lower)
}
.text-component ol li::marker {
 color:var(--color-contrast-low)
}
.text-component img {
 border-radius:var(--radius-md);
 box-shadow:var(--shadow-xs);
 margin:0 auto
}
.text-component figcaption {
 color:var(--color-contrast-low);
 font-size:var(--text-sm);
 margin-top:var(--space-2xs);
 text-align:center
}
.link,
.text-component a:not(.btn,
img,
.heading-link) {
 background-image:linear-gradient(to right,currentColor 50%,hsla(var(--color-contrast-higher-hsl),.15) 50%);
 background-position:100% 100%;
 background-repeat:no-repeat;
 background-size:200% 1px;
 text-decoration:none;
 transition:background-position .2s
}
.link:hover,
.text-component a:hover {
 background-position:0 100%
}
.text-component .heading-link {
 color:var(--color-contrast-low);
 display:none;
 text-decoration:none
}
.text-component .heading-link:focus {
 color:var(--color-primary)
}
:is(h2:hover,
h3:hover,
h4:hover) .heading-link {
 display:inline-block
}
.text-component em {
 font-style:italic
}
.text-component strong {
 font-weight:700
}
.text-component s {
 text-decoration:line-through
}
.text-component u {
 text-decoration:underline
}
.text-component mark {
 background-color:hsla(var(--color-accent-hsl),.2);
 border-radius:var(--radius-md);
 color:inherit;
 padding:0 .25em
}
.text-component code {
 color:var(--color-secondary);
 font-family:var(--font-mono);
 font-size:.9375rem
}
@media (min-width:64rem) {
 .text-component code {
  font-size:1rem
 }
}
.text-component code::selection {
 background-color:var(--color-secondary);
 color:var(--color-bg)
}
.text-component .file-path {
 color:var(--color-contrast-higher);
 font-weight:500
}
.text-component .file-path:before {
 content:"../"
}
.text-component blockquote {
 border-left:4px solid var(--color-contrast-lower);
 font-style:italic;
 padding-left:1em
}
.text-component hr {
 background:var(--color-border-alpha);
 height:1px;
 margin:var(--space-md) auto
}
.text-component>:first-child {
 margin-top:0
}
.text-component>:last-child {
 margin-bottom:0
}
.text-component__block--full-width {
 margin-left:calc(50% - 50vw);
 width:100vw
}
@media (min-width:48rem) {
 .text-component__block--left,
 .text-component__block--right {
  width:45%
 }
 .text-component__block--left img,
 .text-component__block--right img {
  width:100%
 }
 .text-component__block--left {
  float:left;
  margin-right:var(--space-sm)
 }
 .text-component__block--right {
  float:right;
  margin-left:var(--space-sm)
 }
}
@media (min-width:90rem) {
 .text-component__block--outset,
 .text-component__img--outset {
  width:calc(100% + var(--space-unit)*12)
 }
 :where(.text-component__block--outset,
 .text-component__img--outset) img {
  width:100%
 }
 :where(.text-component__block--outset,
 .text-component__img--outset):not(.text-component__block--right) {
  margin-left:calc(var(--space-unit)*-6)
 }
 .text-component__block--left,
 .text-component__block--right {
  width:50%
 }
 .text-component__block--right:is(.text-component__block--outset,
 .text-component__img--outset) {
  margin-right:calc(var(--space-unit)*-6)
 }
}
.article {
 --heading-line-height:1.2;
 --body-line-height:1.66;
 --space-unit:1.3rem
}
.icon {
 --size:1em;
 fill:currentColor;
 color:inherit;
 display:inline-block;
 flex-shrink:0;
 height:var(--size);
 line-height:1;
 max-width:none;
 width:var(--size)
}
.icon--is-spinning {
 animation:icon-spin 1s linear infinite
}
@keyframes icon-spin {
 0% {
  transform:rotate(0deg)
 }
 to {
  transform:rotate(1turn)
 }
}
.icon use {
 fill:currentColor;
 color:inherit
}
.btn {
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 align-items:center;
 background:var(--color-bg-dark);
 border-radius:var(--radius-md);
 color:var(--color-contrast-higher);
 cursor:pointer;
 display:inline-flex;
 font-size:1em;
 justify-content:center;
 line-height:1.2;
 padding:var(--space-2xs) var(--space-sm);
 position:relative;
 text-decoration:none;
 transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
 white-space:nowrap;
 will-change:transform
}
.btn:focus-visible {
 box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-bg-dark);
 outline:none
}
.btn:active {
 transform:translateY(2px)
}
.btn--primary {
 background:var(--color-primary);
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.15),0 1px 3px hsla(var(--color-primary-darker-hsl),.25),0 2px 6px hsla(var(--color-primary-darker-hsl),.1),0 6px 10px -2px hsla(var(--color-primary-darker-hsl),.25);
 color:var(--color-white)
}
.btn--primary:hover {
 background:var(--color-primary-light);
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.15),0 1px 2px hsla(var(--color-primary-darker-hsl),.25),0 1px 4px hsla(var(--color-primary-darker-hsl),.1),0 3px 6px -2px hsla(var(--color-primary-darker-hsl),.25)
}
.btn--primary:focus-visible {
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.15),0 1px 2px hsla(var(--color-primary-darker-hsl),.25),0 1px 4px hsla(var(--color-primary-darker-hsl),.1),0 3px 6px -2px hsla(var(--color-primary-darker-hsl),.25),0 0 0 2px var(--color-bg),0 0 0 4px var(--color-primary)
}
.btn--subtle {
 background:var(--color-bg-lighter);
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.1),0 0 0 1px hsla(var(--color-black-hsl),.02),0 1px 3px -1px hsla(var(--color-black-hsl),.2),var(--shadow-sm);
 color:var(--color-contrast-higher)
}
.btn--subtle:hover {
 background:var(--color-bg-light);
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.1),0 0 0 1px hsla(var(--color-black-hsl),.02),0 1px 3px -1px hsla(var(--color-black-hsl),.2),var(--shadow-xs)
}
.btn--subtle.popover-control--active,
.btn--subtle:focus-visible,
.btn--subtle[aria-expanded=true] {
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.1),0 0 0 1px hsla(var(--color-black-hsl),.02),0 1px 3px -1px hsla(var(--color-black-hsl),.2),var(--shadow-xs),0 0 0 2px var(--color-bg),0 0 0 4px var(--color-contrast-high)
}
.btn--subtle:where(.btn--sm,
.btn--xs) {
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.1),0 0 0 1px hsla(var(--color-black-hsl),.075),0 .1px .1px -1px hsla(var(--color-black-hsl),.101),0 .2px .4px -1px hsla(var(--color-black-hsl),.149),0 1px 2px -1px hsla(var(--color-black-hsl),.25)
}
.btn--subtle-2 {
 background:hsla(var(--color-contrast-higher-hsl),0);
 color:var(--color-contrast-higher)
}
.btn--subtle-2:hover {
 background:hsla(var(--color-contrast-higher-hsl),.1)
}
.btn--subtle-2.popover-control--active,
.btn--subtle-2:focus-visible {
 box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px hsla(var(--color-contrast-higher-hsl),.1)
}
.btn--subtle-3 {
 background:hsla(var(--color-contrast-higher-hsl),0);
 border-radius:var(--radius-sm);
 color:var(--color-contrast-low);
 cursor:auto
}
.btn--subtle-3:hover {
 color:var(--color-contrast-medium)
}
.btn--subtle-3.popover-control--active,
.btn--subtle-3:focus-visible {
 box-shadow:0 0 0 2px currentColor
}
.btn--accent {
 background:var(--color-accent);
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.15),0 1px 3px hsla(var(--color-accent-darker-hsl),.25),0 2px 6px hsla(var(--color-accent-darker-hsl),.1),0 6px 10px -2px hsla(var(--color-accent-darker-hsl),.25);
 color:var(--color-white)
}
.btn--accent:hover {
 background:var(--color-accent-light);
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.15),0 1px 2px hsla(var(--color-accent-darker-hsl),.25),0 1px 4px hsla(var(--color-accent-darker-hsl),.1),0 3px 6px -2px hsla(var(--color-accent-darker-hsl),.1)
}
.btn--accent:focus-visible {
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.15),0 1px 2px hsla(var(--color-accent-darker-hsl),.25),0 1px 4px hsla(var(--color-accent-darker-hsl),.1),0 3px 6px -2px hsla(var(--color-accent-darker-hsl),.1),0 0 0 2px var(--color-bg),0 0 0 4px var(--color-accent)
}
.btn--contrast {
 background:hsla(var(--color-contrast-higher-hsl),.95);
 box-shadow:var(--shadow-xs);
 color:var(--color-bg)
}
.btn--contrast:hover {
 background:var(--color-contrast-higher)
}
.btn--contrast:focus-visible {
 box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px hsla(var(--color-contrast-higher-hsl),.95)
}
.btn--primary-subtle {
 background:hsla(var(--color-primary-hsl),.15);
 color:var(--color-primary)
}
.btn--primary-subtle:hover {
 background:hsla(var(--color-primary-hsl),.12)
}
.btn--primary-subtle:focus-visible {
 box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-primary)
}
.btn--accent-subtle {
 background:hsla(var(--color-accent-hsl),.15);
 color:var(--color-accent)
}
.btn--accent-subtle:hover {
 background:hsla(var(--color-accent-hsl),.12)
}
.btn--accent-subtle:focus-visible {
 box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-accent)
}
.btn--safe {
 background:var(--color-success);
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.15),0 1px 3px hsla(var(--color-success-darker-hsl),.25),0 2px 6px hsla(var(--color-success-darker-hsl),.1),0 6px 10px -2px hsla(var(--color-success-darker-hsl),.25);
 color:var(--color-white)
}
.btn--safe:hover {
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.15),0 1px 2px hsla(var(--color-success-darker-hsl),.25),0 1px 4px hsla(var(--color-success-darker-hsl),.1),0 3px 6px -2px hsla(var(--color-success-darker-hsl),.1)
}
.btn--safe:focus-visible {
 box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-success)
}
.btn--disabled,
.btn[disabled],
.btn[readonly] {
 cursor:not-allowed;
 opacity:.6
}
.btn--sm {
 font-size:var(--text-sm);
 height:28px;
 line-height:28px;
 padding:0 var(--space-2xs)
}
.btn--xs {
 font-size:var(--text-xs);
 height:24px;
 line-height:24px;
 padding:0 var(--space-3xs)
}
.form-control {
 background:var(--color-bg-dark);
 border-radius:var(--radius-md);
 box-shadow:inset 0 0 0 1px var(--color-contrast-lower);
 font-size:1em;
 line-height:1.2;
 padding:var(--space-2xs) var(--space-xs);
 transition:.2s
}
.form-control::placeholder {
 color:var(--color-contrast-low);
 opacity:1
}
.form-control:focus,
.form-control:focus-within {
 background:var(--color-bg);
 box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-lower-hsl),0),0 0 0 2px var(--color-primary),var(--shadow-sm);
 outline:none
}
.form-control--disabled,
.form-control[disabled],
.form-control[readonly] {
 cursor:not-allowed;
 opacity:.5
}
.form-control.form-control--error,
.form-control[aria-invalid=true] {
 box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-lower-hsl),0),0 0 0 2px var(--color-error)
}
.form-control.form-control--error:focus,
.form-control.form-control--error:focus-within,
.form-control[aria-invalid=true]:focus,
.form-control[aria-invalid=true]:focus-within {
 box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-lower-hsl),0),0 0 0 2px var(--color-error),var(--shadow-sm)
}
.form-legend {
 color:var(--color-contrast-higher);
 font-family:var(--font-secondary);
 font-size:var(--text-md);
 font-weight:800;
 line-height:var(--heading-line-height);
 margin-bottom:var(--space-sm)
}
.form-label {
 color:var(--color-contrast-low);
 display:inline-block;
 font-size:var(--text-sm);
 margin-bottom:var(--space-2xs)
}
.form-control--xs {
 font-size:var(--text-xs);
 height:24px;
 padding:0 var(--space-3xs)
}
textarea.form-control--xs {
 padding:var(--space-3xs)
}
:root {
 --z-index-header:3;
 --z-index-popover:5;
 --z-index-fixed-element:10;
 --z-index-overlay:15;
 --main-header-height:calc(60px + var(--pre-header-banner-height))
}
@media (min-width:64rem) {
 :root {
  --main-header-height:calc(70px + var(--pre-header-banner-height))
 }
}
.main-header {
 height:var(--main-header-height);
 width:100%;
 z-index:var(--z-index-header)
}
.main-header__container {
 height:calc(100% - var(--pre-header-banner-height))
}
.main-header__search-btn {
 align-items:center;
 border-radius:50%;
 display:flex;
 justify-content:center
}
.main-header__search-btn:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.1);
 cursor:pointer
}
.main-header__search-btn:focus {
 outline:2px solid hsla(var(--color-contrast-higher-hsl),.1);
 outline-offset:2px
}
.main-header__nav-link {
 color:var(--color-contrast-higher);
 text-decoration:none
}
.main-header__nav-link--current,
.main-header__nav-link:hover {
 color:var(--color-primary)
}
.main-header__nav-separator {
 background-color:hsla(var(--color-contrast-higher-hsl),.1)
}
@media not all and (min-width:64rem) {
 .main-header {
  --main-header-on-scroll:1
 }
 .main-header--on-scroll {
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  background-color:hsla(var(--color-bg-hsl),.95)
 }
 .main-header__nav {
  background-color:var(--color-bg-light);
  box-shadow:var(--shadow-md);
  display:none;
  left:0;
  padding:calc(var(--main-header-height) + var(--space-lg)) var(--space-md) var(--space-lg);
  position:absolute;
  top:0;
  width:100%
 }
 .main-header--expanded .main-header__nav {
  display:block
 }
 .main-header__overlay {
  display:none;
  height:100%;
  left:0;
  position:fixed;
  top:0;
  width:100%
 }
 .main-header--expanded .main-header__overlay {
  display:block
 }
 .main-header__nav-list>:not(:last-child):not(.main-header__nav-separator) {
  margin-bottom:var(--space-sm)
 }
 .main-header__nav-separator {
  height:1px;
  margin:var(--space-md) 0
 }
 .main-header__nav-link {
  display:block;
  font-size:var(--text-lg);
  padding:var(--space-4xs) 0
 }
}
@media (min-width:64rem) {
 .main-header__nav-link {
  font-size:1rem
 }
 .main-header__nav-separator {
  height:1em;
  width:1px
 }
 .main-header__overlay {
  display:none!important
 }
}
.bg-abstract-1,
.bg-abstract-2,
.bg-abstract-3,
.bg-hearts {
 background-repeat:no-repeat;
 position:relative
}
.bg-abstract-1 {
 background-image:url(../img/bg-abstract-1-light.jpg);
 background-position:top;
 background-size:200% auto
}
.bg-abstract-1:after {
 background:linear-gradient(0deg,#fff,hsla(0,0%,100%,0));
 bottom:0;
 content:"";
 height:100px;
 left:0;
 position:absolute;
 width:100%
}
.bg-abstract-2 {
 background-image:url(../img/bg-abstract-2-light.jpg);
 background-position:bottom;
 background-size:150% auto
}
.bg-abstract-3 {
 background-image:url(../img/bg-abstract-3-light.jpg);
 background-position:top;
 background-size:150% auto
}
.bg-abstract-4 {
 background-image:url(../img/ui-framework-banner-bg-dark.jpg);
 background-position:50%;
 background-size:cover
}
.bg-hearts {
 background-image:url(../img/bg-hearts.jpg);
 background-position:top;
 background-size:150% auto
}
@media (min-width:48rem) {
 .bg-abstract-1 {
  background-size:150% auto
 }
}
@media (min-width:64rem) {
 .bg-abstract-1 {
  background-size:120% auto
 }
 .bg-abstract-2,
 .bg-abstract-3,
 .bg-hearts {
  background-size:102% auto
 }
 .bg-abstract-4 {
  background-image:url(../img/ui-framework-banner-bg-dark-v2.jpg)
 }
}
@media (min-width:90rem) {
 .bg-abstract-1 {
  background-size:102% auto
 }
}
[data-theme=dark] .bg-abstract-1 {
 background-image:url(../img/bg-abstract-1-dark.jpg)
}
[data-theme=dark] .bg-abstract-1:after {
 background:linear-gradient(to top,hsla(var(--color-bg-hsl),1),hsla(var(--color-bg-hsl),0))
}
[data-theme=dark] .bg-abstract-2 {
 background-image:url(../img/bg-abstract-2-dark.jpg)
}
[data-theme=dark] .bg-abstract-3 {
 background-image:url(../img/bg-abstract-3-dark.jpg)
}
[data-theme=dark] .bg-abstract-4 {
 background-image:url(../img/ui-framework-banner-bg-light.jpg)
}
[data-theme=dark] .bg-hearts {
 background-image:url(../img/bg-hearts-dark.jpg)
}
@media (min-width:64rem) {
 [data-theme=dark] .bg-abstract-4 {
  background-image:url(../img/ui-framework-banner-bg-light-v2.jpg)
 }
}
.library-comp-banner {
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 background-color:#22232a
}
.library-comp-banner__inner {
 background-image:url(../img/ui-framework-banner-bg-dark.jpg);
 background-position:top;
 background-size:cover;
 position:relative
}
.library-comp-banner__inner:after,
.library-comp-banner__inner:before {
 content:"";
 height:100%;
 position:absolute;
 top:0;
 width:100px
}
.library-comp-banner__inner:before {
 background:linear-gradient(90deg,#22232a,rgba(34,35,42,0));
 left:0
}
.library-comp-banner__inner:after {
 background:linear-gradient(270deg,#22232a,rgba(34,35,42,0));
 right:0
}
[data-theme=dark] .library-comp-banner {
 background-color:#eae6fe
}
[data-theme=dark] .library-comp-banner__inner {
 background-image:url(../img/ui-framework-banner-bg-light.jpg)
}
[data-theme=dark] .library-comp-banner__inner:before {
 background:linear-gradient(90deg,#eae6fe,rgba(234,230,254,0))
}
[data-theme=dark] .library-comp-banner__inner:after {
 background:linear-gradient(270deg,#eae6fe,rgba(234,230,254,0))
}
.btn-anim-icon-1 .icon {
 transition:transform .2s
}
.btn-anim-icon-1:hover .icon {
 transform:translateX(2px)
}
:root {
 --circle-loader-v1-size:48px;
 --circle-loader-v1-stroke-width:4px
}
.circle-loader {
 display:inline-block;
 position:relative
}
.circle-loader__label {
 clip:rect(1px,1px,1px,1px);
 -webkit-clip-path:inset(50%);
 clip-path:inset(50%);
 position:absolute
}
.circle-loader--v1 {
 animation:circle-loader-1 .75s infinite var(--ease-in-out);
 transform:rotate(45deg);
 will-change:transform
}
.circle-loader--v1 .circle-loader__circle {
 border-color:hsla(var(--color-primary-hsl),.2);
 border-radius:50%;
 border-style:solid;
 border-width:var(--circle-loader-v1-stroke-width);
 height:var(--circle-loader-v1-size);
 width:var(--circle-loader-v1-size)
}
.circle-loader--v1 .circle-loader__circle:after {
 border:inherit;
 border-color:transparent;
 border-radius:inherit;
 border-top-color:var(--color-primary);
 content:"";
 height:100%;
 left:0;
 position:absolute;
 top:0;
 width:100%
}
@keyframes circle-loader-1 {
 0% {
  transform:rotate(45deg)
 }
 to {
  transform:rotate(405deg)
 }
}
:root {
 --select-icon-size:16px;
 --select-icon-margin-right:var(--space-sm);
 --select-text-icon-gap:var(--space-3xs)
}
.select {
 position:relative
}
.select__input {
 height:100%;
 padding-right:calc(var(--select-icon-size) + var(--select-icon-margin-right) + var(--select-text-icon-gap))!important;
 -webkit-user-select:none;
 user-select:none;
 width:100%
}
.select__input::-ms-expand {
 display:none
}
.select__icon {
 height:var(--select-icon-size);
 pointer-events:none;
 position:absolute;
 right:var(--select-icon-margin-right);
 top:50%;
 transform:translateY(-50%);
 width:var(--select-icon-size)
}
:root {
 --select-dropdown-gap:4px;
 --select-dropdown-icon:1em
}
.select__button {
 width:100%
}
.select__dropdown {
 background-color:var(--color-bg-light);
 border-radius:var(--radius-md);
 box-shadow:var(--inner-glow),var(--shadow-sm),var(--shadow-md),var(--shadow-ring);
 display:none;
 font-size:.9375rem;
 left:0;
 margin-bottom:var(--select-dropdown-gap);
 margin-top:var(--select-dropdown-gap);
 max-height:1px;
 min-width:200px;
 overflow:auto;
 padding:var(--space-3xs) 0;
 position:absolute;
 top:100%;
 z-index:var(--z-index-popover)
}
.select__dropdown--right {
 left:auto;
 right:0
}
.select__dropdown--up {
 bottom:100%;
 top:auto
}
.select__button[aria-expanded=true]+.select__dropdown {
 display:block
}
.select__list {
 list-style:none!important
}
.select__list:not(:first-of-type) {
 padding-top:var(--space-2xs)
}
.select__list.is-hidden+.select__list {
 padding-top:0
}
.select__list:not(:last-of-type) {
 border-bottom:1px solid hsla(var(--color-contrast-higher-hsl),.09);
 padding-bottom:var(--space-2xs)
}
.select__item {
 align-items:center;
 color:var(--color-contrast-high);
 display:flex;
 line-height:1;
 overflow:hidden;
 padding:var(--space-2xs) calc(var(--space-sm) + var(--select-dropdown-icon)) var(--space-2xs) var(--space-sm);
 text-align:left;
 text-overflow:ellipsis;
 white-space:nowrap;
 width:100%
}
.select__item--optgroup {
 color:var(--color-contrast-low);
 font-size:var(--text-sm)
}
.select__item--option {
 cursor:pointer
}
.select__item--option:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.075)
}
.select__item--option:focus {
 background-color:hsla(var(--color-primary-hsl),.15);
 outline:none
}
.select__item--option[aria-selected=true] {
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 background-color:var(--color-primary);
 color:var(--color-white);
 position:relative
}
.select__item--option:after {
 background-color:currentColor;
 content:"";
 display:block;
 flex-shrink:0;
 height:var(--select-dropdown-icon);
 margin-left:auto;
 -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round' d='m1 9 4 4L15 3'/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round' d='m1 9 4 4L15 3'/%3E%3C/svg%3E");
 -webkit-mask-position:center;
 mask-position:center;
 -webkit-mask-repeat:no-repeat;
 mask-repeat:no-repeat;
 -webkit-mask-size:1em;
 mask-size:1em;
 opacity:0;
 transform:translateX(100%);
 width:var(--select-dropdown-icon)
}
.select__item--option[aria-selected=true]:after {
 opacity:1
}
.select__item--option[disabled] {
 cursor:not-allowed;
 opacity:.5
}
.select--sm {
 --select-dropdown-gap:4px
}
.select--sm .select__item {
 font-size:var(--text-sm);
 padding:var(--space-3xs) calc(var(--space-xs) + var(--select-dropdown-icon)) var(--space-3xs) var(--space-xs)
}
.select--sm .select__dropdown {
 min-width:160px
}
.select--xs .select__item {
 font-size:var(--text-xs);
 padding:var(--space-3xs) calc(var(--space-xs) + var(--select-dropdown-icon)) var(--space-3xs) var(--space-xs)
}
.select--xs .select__dropdown {
 min-width:160px
}
.select--xs .select__item--optgroup {
 font-size:var(--text-2xs)
}
.select--xs .select__item--option:after {
 -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6.5 3 3 7-7'/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6.5 3 3 7-7'/%3E%3C/svg%3E")
}
:is(.select--sm,
.select--xs) .select__label {
 overflow:hidden;
 text-overflow:ellipsis
}
.select--label-max-width-100 .select__label {
 max-width:100px
}
html:not(.js) .select .icon {
 display:none
}
:root {
 --popover-width:250px;
 --popover-control-gap:4px;
 --popover-viewport-gap:20px;
 --popover-transition-duration:0.2s
}
.popover {
 -webkit-overflow-scrolling:touch;
 margin-bottom:var(--popover-control-gap);
 margin-top:var(--popover-control-gap);
 opacity:0;
 overflow:auto;
 position:fixed;
 visibility:hidden;
 width:var(--popover-width);
 z-index:var(--z-index-popover,5)
}
.popover--is-visible {
 opacity:1;
 visibility:visible
}
.popover__menu-link {
 color:var(--color-contrast-high);
 display:flex;
 font-size:.9375rem;
 line-height:1;
 padding:var(--space-2xs) var(--space-xs);
 text-decoration:none;
 width:100%
}
.popover__menu-link:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.05);
 color:var(--color-contrast-higher)
}
.popover__menu-link:focus-visible {
 background-color:hsla(var(--color-primary-hsl),.1);
 color:var(--color-primary);
 outline:none
}
.popover__menu-separator {
 background-color:hsla(var(--color-contrast-higher-hsl),.09);
 height:1px;
 margin:var(--space-3xs) 0
}
.popover--sm {
 --popover-control-gap:4px
}
.popover--sm .popover__menu-link {
 font-size:var(--text-sm);
 padding:.375rem .75rem
}
:where(.tabbed-nav--border-bottom) {
 position:relative
}
.tabbed-nav--border-bottom:after {
 background-color:hsla(var(--color-contrast-higher-hsl),.09);
 bottom:0;
 content:"";
 height:1px;
 left:0;
 position:absolute;
 width:100%
}
.tabbed-nav__list {
 display:flex;
 overflow:auto
}
.tabbed-nav__link {
 align-items:center;
 color:var(--color-contrast-low);
 display:flex;
 padding:var(--space-xs) var(--space-sm);
 position:relative;
 text-decoration:none
}
.tabbed-nav__link:not(.tabbed-nav__link--current):hover {
 color:var(--color-contrast-higher)
}
.tabbed-nav__link:after {
 background-color:var(--color-primary);
 bottom:0;
 content:"";
 display:none;
 height:1px;
 left:0;
 position:absolute;
 width:100%
}
.tabbed-nav__link--current {
 color:var(--color-primary)
}
.tabbed-nav__link--current:after {
 display:block
}
@media (min-width:64rem) {
 .tabbed-nav__link {
  font-size:var(--text-sm)
 }
}
.sidebar:not(.sidebar--static) {
 height:100%;
 left:0;
 position:fixed;
 top:0;
 transition:visibility 0s .3s;
 visibility:hidden;
 width:100%;
 z-index:var(--z-index-fixed-element,10)
}
.sidebar:not(.sidebar--static):after {
 background-color:hsla(var(--color-black-hsl),0);
 content:"";
 height:100%;
 left:0;
 position:absolute;
 top:0;
 transition:background-color .3s;
 width:100%;
 z-index:1
}
.sidebar:not(.sidebar--static) .sidebar__panel {
 -webkit-overflow-scrolling:touch;
 background-color:var(--color-bg);
 height:100%;
 left:0;
 max-width:380px;
 overflow:auto;
 position:absolute;
 top:0;
 transform:translateX(-100%);
 transition:box-shadow .3s,transform .3s;
 width:100%;
 z-index:2
}
.sidebar:not(.sidebar--static).sidebar--right-on-mobile .sidebar__panel {
 left:auto;
 right:0;
 transform:translateX(100%)
}
.sidebar:not(.sidebar--static).sidebar--is-visible {
 transition:none;
 visibility:visible
}
.sidebar:not(.sidebar--static).sidebar--is-visible:after {
 background-color:hsla(var(--color-black-hsl),.85)
}
.sidebar:not(.sidebar--static).sidebar--is-visible .sidebar__panel {
 box-shadow:var(--shadow-md);
 transform:translateX(0)
}
.sidebar__header {
 align-items:center;
 display:flex;
 justify-content:space-between;
 position:sticky;
 top:0
}
.sidebar__close-btn {
 --size:32px;
 background-color:var(--color-bg-light);
 border-radius:50%;
 box-shadow:var(--inner-glow),var(--shadow-sm);
 display:flex;
 flex-shrink:0;
 height:var(--size);
 transition:.2s;
 width:var(--size)
}
.sidebar__close-btn .icon {
 display:block;
 margin:auto
}
.sidebar__close-btn:hover {
 background-color:var(--color-bg-lighter);
 box-shadow:var(--inner-glow),var(--shadow-md)
}
.sidebar--static,
html:not(.js) .sidebar {
 flex-grow:1;
 flex-shrink:0
}
.sidebar--static .sidebar__header,
html:not(.js) .sidebar .sidebar__header {
 display:none
}
.sidebar--sticky-on-desktop {
 -webkit-overflow-scrolling:touch;
 max-height:calc(100vh - var(--space-sm));
 overflow:auto;
 position:sticky;
 top:var(--space-sm)
}
.js .sidebar,
.js .sidebar-loaded\:show {
 opacity:0
}
.js .sidebar--loaded {
 opacity:1
}
html:not(.js) .sidebar {
 position:static
}
[class*=sidebar--static]:before {
 display:none
}
.sidebar--static:before {
 content:"static"
}
.sidebar--static\@xs:before {
 content:"mobile"
}
@media (min-width:32rem) {
 .sidebar--static\@xs:before {
  content:"static"
 }
}
.sidebar--static\@sm:before {
 content:"mobile"
}
@media (min-width:48rem) {
 .sidebar--static\@sm:before {
  content:"static"
 }
}
.sidebar--static\@md:before {
 content:"mobile"
}
@media (min-width:64rem) {
 .sidebar--static\@md:before {
  content:"static"
 }
}
.sidebar--static\@lg:before {
 content:"mobile"
}
@media (min-width:80rem) {
 .sidebar--static\@lg:before {
  content:"static"
 }
}
.sidebar--static\@xl:before {
 content:"mobile"
}
@media (min-width:90rem) {
 .sidebar--static\@xl:before {
  content:"static"
 }
}
:root {
 --sidenav-list-item-height:36px;
 --sidenav-list-item-padding-x:9px;
 --sidenav-icon-size:16px;
 --sidenav-icon-text-gap:8px;
 --sidenav-sublist-control-size:20px;
 --sidenav-sublist-control-icon-size:12px;
 --sidenav-sublist-control-margin-right:4px
}
.sidenav__list .sidenav__list {
 display:none
}
.sidenav__list .sidenav__list .sidenav__link {
 padding-left:calc(var(--sidenav-list-item-padding-x) + var(--sidenav-sublist-control-size) + var(--sidenav-sublist-control-margin-right) + var(--sidenav-icon-size) + var(--sidenav-icon-text-gap))
}
.sidenav__item {
 position:relative
}
.sidenav--free .sidenav__item--pro-only {
 display:none
}
.sidenav__item--expanded .sidenav__list {
 display:block
}
.sidenav__item--expanded .sidenav__sublist-control .icon {
 transform:rotate(90deg)
}
.sidenav__link {
 align-items:center;
 border-radius:var(--radius-md);
 color:hsla(var(--color-contrast-high-hsl),.9);
 display:flex;
 font-size:var(--text-md);
 height:var(--sidenav-list-item-height);
 padding:0 var(--sidenav-list-item-padding-x) 0 calc(var(--sidenav-list-item-padding-x) + var(--sidenav-sublist-control-size) + var(--sidenav-sublist-control-margin-right));
 text-decoration:none;
 transition:.2s
}
.sidenav__link:not(.sidenav__link--current):hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.05);
 color:var(--color-contrast-higher)
}
.sidenav__link--current,
.sidenav__link[aria-current=page] {
 background-color:hsla(var(--color-primary-hsl),.1);
 color:var(--color-primary)
}
:is(.sidenav__link[aria-current=page],
.sidenav__link--current)+.sidenav__sublist-control {
 color:var(--color-primary)
}
.sidenav__icon {
 height:var(--sidenav-icon-size);
 margin-right:var(--sidenav-icon-text-gap);
 width:var(--sidenav-icon-size)
}
.sidenav__text {
 overflow:hidden;
 padding-right:var(--space-2xs);
 text-overflow:ellipsis;
 white-space:nowrap
}
.sidenav__counter {
 font-size:var(--text-xs);
 margin-left:auto;
 opacity:.7
}
.sidenav__sublist-control {
 border-radius:50%;
 color:hsla(var(--color-contrast-high-hsl),.9);
 display:block;
 height:var(--sidenav-sublist-control-size);
 left:var(--sidenav-list-item-padding-x);
 position:absolute;
 top:calc((var(--sidenav-list-item-height) - var(--sidenav-sublist-control-size))/2);
 transition:.2s;
 width:var(--sidenav-sublist-control-size)
}
.sidenav__sublist-control .icon {
 display:block;
 height:var(--sidenav-sublist-control-icon-size);
 margin:auto;
 transition:transform .2s;
 width:var(--sidenav-sublist-control-icon-size)
}
.sidenav__sublist-control:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.15)
}
.sidenav__link--current+.sidenav__sublist-control:hover {
 background-color:hsla(var(--color-primary-hsl),.15)
}
.sidenav__label {
 padding-left:var(--sidenav-list-item-padding-x)
}
.sidenav__divider {
 background-color:var(--color-contrast-lower);
 height:1px;
 width:100%
}
.sidenav--basic .sidenav__label,
.sidenav--basic .sidenav__link {
 padding-left:var(--sidenav-list-item-padding-x)
}
.sidenav--minified {
 --sidenav-list-item-height:auto
}
.sidenav--minified .sidenav__list .sidenav__list {
 display:none!important
}
.sidenav--minified .sidenav__label,
.sidenav--minified .sidenav__link {
 padding-left:var(--sidenav-list-item-padding-x)
}
.sidenav--minified .sidenav__link {
 flex-direction:column;
 padding-bottom:var(--space-sm);
 padding-top:var(--space-sm)
}
.sidenav--minified .sidenav__icon {
 margin:0 0 var(--sidenav-icon-text-gap)
}
.sidenav--minified .sidenav__text {
 padding:0
}
.sidenav--minified .sidenav__counter,
.sidenav--minified .sidenav__sublist-control {
 display:none
}
@media (min-width:64rem) {
 .sidenav__link {
  font-size:.9375rem
 }
}
.card {
 position:relative
}
.card__link {
 background-color:var(--color-bg-light);
 border-radius:var(--radius-md);
 box-shadow:var(--shadow-ring),var(--shadow-xs);
 color:var(--color-contrast-higher);
 display:block;
 overflow:hidden;
 text-decoration:none;
 transition:.2s
}
.card__link:hover {
 background-color:var(--color-bg-lighter);
 box-shadow:var(--shadow-ring),var(--shadow-sm)
}
.card__link:focus {
 box-shadow:var(--shadow-ring),var(--shadow-sm),0 0 0 2px var(--color-primary);
 outline:none
}
.card__link:after {
 border-radius:inherit;
 box-shadow:var(--inner-glow);
 content:"";
 height:100%;
 left:0;
 pointer-events:none;
 position:absolute;
 top:0;
 width:100%
}
.card__link>svg {
 height:auto;
 width:100%
}
.card__btn {
 bottom:10px;
 position:absolute;
 right:var(--space-xs)
}
.card__fav-btn,
.card__new-badge,
.card__pro-badge {
 align-items:center;
 border-radius:50%;
 display:flex;
 height:24px;
 justify-content:center;
 width:24px
}
.card__badge-group,
.card__fav-btn {
 position:absolute;
 top:var(--space-2xs)
}
.card__badge-group {
 left:var(--space-2xs)
}
.card__fav-btn {
 background-color:hsla(var(--color-contrast-higher-hsl),.7);
 color:var(--color-bg);
 opacity:0;
 position:absolute;
 right:var(--space-2xs);
 top:var(--space-2xs)
}
.card__fav-btn:focus {
 outline:2px solid hsla(var(--color-contrast-higher-hsl),.7);
 outline-offset:2px
}
.card--saved .card__fav-btn,
.card:hover .card__fav-btn,
.card__fav-btn:focus {
 opacity:1
}
.card__fav-btn:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.9);
 color:var(--color-bg)
}
.card--saved .card__fav-btn {
 background-color:hsla(var(--color-accent-hsl),.9);
 color:var(--color-white)
}
.card--saved .card__fav-btn:hover {
 background-color:hsla(var(--color-accent-hsl),1)
}
.card--saved .card__fav-btn:focus {
 outline-color:var(--color-accent)
}
.card__pro-badge {
 background-color:hsla(var(--color-accent-hsl),.9);
 color:var(--color-white);
 left:var(--space-2xs)
}
.card:not(.card--pro) .card__pro-badge {
 display:none
}
.comp-preview-pro .card__pro-badge {
 display:flex!important
}
.card__new-badge {
 background-color:hsla(var(--color-contrast-higher-hsl),.9);
 color:var(--color-bg);
 font-size:8px;
 font-weight:500;
 left:calc(var(--space-2xs) + 28px)
}
.card:not(.card--new) .card__new-badge {
 display:none
}
@media (min-width:80rem) {
 .card--component {
  max-width:350px
 }
}
.card-2 {
 background-color:var(--color-bg-light);
 box-shadow:var(--inner-glow),var(--shadow-xs);
 color:inherit;
 text-decoration:none;
 transition:.2s
}
.card-2:hover {
 background-color:var(--color-bg-lighter);
 box-shadow:var(--inner-glow),var(--shadow-sm)
}
.card-2--not-for-tailwind {
 opacity:80%;
 pointer-events:none
}
.card-2--not-for-tailwind .icon-global {
 filter:grayscale(100%)
}
.modal-video-banner {
 background-color:var(--color-bg-light);
 border-left:3px solid var(--color-primary);
 box-shadow:var(--inner-glow),var(--shadow-xs);
 display:flex;
 flex-direction:column;
 gap:var(--space-sm);
 padding:var(--space-xs)
}
@media (min-width:48rem) {
 .modal-video-banner {
  align-items:center;
  flex-direction:row;
  justify-content:space-between
 }
}
.user-logged-in .logged-in\:hide,
.user-pro .pro\:hide,
body:not(.user-logged-in) .logged-in\:display,
body:not(.user-pro) .pro\:display {
 display:none!important
}
.basic-nav-filter__link {
 color:var(--color-contrast-low);
 text-decoration:none
}
.basic-nav-filter__link--current,
.basic-nav-filter__link:hover {
 color:var(--color-contrast-higher)
}
:root {
 --switch-width:54px;
 --switch-height:28px;
 --switch-padding:2px;
 --switch-animation-duration:0.2s
}
.switch {
 align-items:center;
 border-radius:50em;
 display:inline-flex;
 flex-shrink:0;
 height:var(--switch-height);
 padding:var(--switch-padding) 0;
 position:relative;
 width:var(--switch-width)
}
.switch__input,
.switch__label {
 left:0;
 position:absolute;
 top:0
}
.switch__input {
 height:0;
 margin:0;
 opacity:0;
 padding:0;
 pointer-events:none;
 width:0
}
.switch__input:checked+.switch__label {
 background-color:var(--color-primary)
}
.switch__input:checked+.switch__label+.switch__marker {
 left:calc(100% - var(--switch-height) + var(--switch-padding))
}
.switch__input:active+.switch__label,
.switch__input:focus+.switch__label {
 outline:2px solid var(--color-contrast-high);
 outline-offset:2px
}
.switch__input:checked:active+.switch__label,
.switch__input:checked:focus+.switch__label {
 outline:2px solid var(--color-primary);
 outline-offset:2px
}
.switch__label {
 background-color:var(--color-contrast-lower);
 border-radius:inherit;
 color:transparent;
 height:100%;
 overflow:hidden;
 transition:left var(--switch-animation-duration),background-color var(--switch-animation-duration);
 -webkit-user-select:none;
 user-select:none;
 width:100%;
 z-index:1
}
.switch__marker {
 background-color:var(--color-white);
 border-radius:50%;
 box-shadow:var(--shadow-xs);
 height:calc(var(--switch-height) - var(--switch-padding)*2);
 left:var(--switch-padding);
 pointer-events:none;
 position:relative;
 transition:left var(--switch-animation-duration);
 width:calc(var(--switch-height) - var(--switch-padding)*2);
 will-change:left;
 z-index:2
}
.icon-global-btns .icon-group :is(:nth-child(3),
:nth-child(4),
:nth-child(5)) {
 transition:transform .3s
}
.icon-global-btns .icon-group :nth-child(3) {
 transform-origin:27px 28px
}
.icon-global-btns .icon-group :is(:nth-child(4),
:nth-child(5)) {
 transform-origin:21px 22px
}
.card-2:hover .icon-global-btns .icon-group :nth-child(3) {
 transform:translate(-1px,-1px)
}
.card-2:hover .icon-global-btns .icon-group :is(:nth-child(4),
:nth-child(5)) {
 transform:translate(-2px,-2px)
}
.icon-global-colors .icon-group :is(:nth-child(3),
:nth-child(4)) {
 transform-origin:17px 33px;
 transition:transform .3s
}
.card-2:hover .icon-global-colors .icon-group :nth-child(3) {
 transform:rotate(-4deg)
}
.card-2:hover .icon-global-colors .icon-group :nth-child(4) {
 transform:rotate(-8deg)
}
.icon-global-forms .icon-group :is(:nth-child(2),
:nth-child(3),
:nth-child(5),
:nth-child(6)) {
 transition:transform .3s
}
.icon-global-forms .icon-group :is(:nth-child(2),
:nth-child(3)) {
 transform-origin:24px 14px
}
.icon-global-forms .icon-group :is(:nth-child(3)) {
 stroke-dasharray:12;
 stroke-dashoffset:0;
 transition:transform .3s,stroke-dashoffset .3s
}
.icon-global-forms .icon-group :is(:nth-child(5),
:nth-child(6)) {
 transform-origin:31px 36px
}
.card-2:hover .icon-global-forms .icon-group :is(:nth-child(2),
:nth-child(3)) {
 transform:translateY(-1px)
}
.card-2:hover .icon-global-forms .icon-group :is(:nth-child(5),
:nth-child(6)) {
 transform:translateY(1px)
}
.card-2:hover .icon-global-forms .icon-group :is(:nth-child(3)) {
 stroke-dashoffset:4
}
.icon-global-shared-styles .icon-group :is(:nth-child(3),
:nth-child(4)) {
 transition:transform .3s
}
.icon-global-shared-styles .icon-group :nth-child(3) {
 transform-origin:19px 21px
}
.icon-global-shared-styles .icon-group :nth-child(4) {
 transform-origin:38px 18px
}
.card-2:hover .icon-global-shared-styles .icon-group :nth-child(3) {
 transform:translateX(-2px)
}
.card-2:hover .icon-global-shared-styles .icon-group :nth-child(4) {
 transform:scale(1.1)
}
.icon-global-spacing .icon-group :is(:nth-child(2),
:nth-child(4),
:nth-child(6),
:nth-child(7)) {
 transition:transform .3s
}
.icon-global-spacing .icon-group :nth-child(2) {
 transform-origin:2px 14px
}
.icon-global-spacing .icon-group :nth-child(4) {
 transform-origin:2px 24px
}
.icon-global-spacing .icon-group :nth-child(6) {
 transform-origin:37px 12px
}
.icon-global-spacing .icon-group :nth-child(7) {
 transform-origin:37px 36px
}
.card-2:hover .icon-global-spacing .icon-group :nth-child(2) {
 transform:translateY(-1px) scaleX(.9)
}
.card-2:hover .icon-global-spacing .icon-group :nth-child(4) {
 transform:translateY(1px) scaleX(1.1)
}
.card-2:hover .icon-global-spacing .icon-group :nth-child(6) {
 transform:translateY(-1px)
}
.card-2:hover .icon-global-spacing .icon-group :nth-child(7) {
 transform:translateY(1px)
}
.icon-global-typography .icon-group :is(:nth-child(3),
:nth-child(4),
:nth-child(5),
:nth-child(6),
:nth-child(7),
:nth-child(8),
:nth-child(9),
:nth-child(10)) {
 transition:transform .3s
}
.icon-global-typography .icon-group :nth-child(3) {
 transform-origin:9px 24px
}
.icon-global-typography .icon-group :nth-child(4) {
 transform-origin:24px 39px
}
.icon-global-typography .icon-group :nth-child(5) {
 transform-origin:39px 24px
}
.icon-global-typography .icon-group :nth-child(6) {
 transform-origin:24px 9px
}
.icon-global-typography .icon-group :nth-child(7) {
 transform-origin:9px 9px
}
.icon-global-typography .icon-group :nth-child(8) {
 transform-origin:39px 9px
}
.icon-global-typography .icon-group :nth-child(9) {
 transform-origin:9px 39px
}
.icon-global-typography .icon-group :nth-child(10) {
 transform-origin:39px 39px
}
.card-2:hover .icon-global-typography .icon-group :nth-child(3) {
 transform:translateX(1px)
}
.card-2:hover .icon-global-typography .icon-group :nth-child(4) {
 transform:translateY(-1px)
}
.card-2:hover .icon-global-typography .icon-group :nth-child(5) {
 transform:translateX(-1px)
}
.card-2:hover .icon-global-typography .icon-group :nth-child(6) {
 transform:translateY(1px)
}
.card-2:hover .icon-global-typography .icon-group :nth-child(7) {
 transform:translate(1px,1px)
}
.card-2:hover .icon-global-typography .icon-group :nth-child(8) {
 transform:translate(-1px,1px)
}
.card-2:hover .icon-global-typography .icon-group :nth-child(9) {
 transform:translate(1px,-1px)
}
.card-2:hover .icon-global-typography .icon-group :nth-child(10) {
 transform:translate(-1px,-1px)
}
:root {
 --tooltip-triangle-size:8px
}
.tooltip {
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 background-color:hsla(var(--color-contrast-higher-hsl),.98);
 border-radius:var(--radius-md);
 box-shadow:var(--shadow-md);
 color:var(--color-bg);
 display:inline-block;
 font-size:var(--text-sm);
 line-height:1.4;
 max-width:200px;
 padding:var(--space-2xs) var(--space-xs);
 position:absolute;
 transition:opacity .2s,visibility .2s;
 z-index:var(--z-index-fixed-element)
}
.tooltip a {
 color:inherit;
 text-decoration:underline
}
.tooltip:before {
 background-color:inherit;
 border:inherit;
 -webkit-clip-path:polygon(0 0,100% 100%,100% 100%,0 100%);
 clip-path:polygon(0 0,100% 100%,100% 100%,0 100%);
 content:"";
 height:var(--tooltip-triangle-size);
 position:absolute;
 width:var(--tooltip-triangle-size)
}
.tootip:not(.tooltip--sticky) {
 pointer-events:none
}
.tooltip--sm {
 font-size:var(--text-xs);
 max-width:150px;
 padding:var(--space-4xs) var(--space-3xs)
}
.tooltip--md {
 max-width:300px
}
.tooltip--lg,
.tooltip--md {
 padding:var(--space-xs) var(--space-sm)
}
.tooltip--lg {
 font-size:var(--text-base-size);
 max-width:350px
}
.tooltip {
 --tooltip-triangle-translate:0px
}
.tooltip--bottom:before,
.tooltip--top:before {
 left:calc(50% - var(--tooltip-triangle-size)/2)
}
.tooltip--top:before {
 bottom:calc(var(--tooltip-triangle-size)*-.5);
 transform:translateX(var(--tooltip-triangle-translate)) rotate(-45deg)
}
.tooltip--bottom:before {
 top:calc(var(--tooltip-triangle-size)*-.5);
 transform:translateX(var(--tooltip-triangle-translate)) rotate(135deg)
}
.tooltip--left:before,
.tooltip--right:before {
 top:calc(50% - var(--tooltip-triangle-size)/2)
}
.tooltip--left:before {
 right:calc(var(--tooltip-triangle-size)*-.5);
 transform:translateX(var(--tooltip-triangle-translate)) rotate(-135deg)
}
.tooltip--right:before {
 left:calc(var(--tooltip-triangle-size)*-.5);
 transform:translateX(var(--tooltip-triangle-translate)) rotate(45deg)
}
.modal,
.tooltip--is-hidden {
 opacity:0;
 visibility:hidden
}
.modal {
 height:100%;
 left:0;
 position:fixed;
 top:0;
 width:100%;
 z-index:var(--z-index-overlay,15)
}
.modal:not(.modal--is-visible) {
 background-color:transparent;
 pointer-events:none
}
.modal--is-visible {
 opacity:1;
 visibility:visible
}
.modal__close-btn {
 border-radius:50%;
 display:flex;
 flex-shrink:0;
 transition:.2s
}
.modal__close-btn .icon {
 display:block;
 margin:auto
}
.modal__close-btn--outer {
 background-color:hsla(var(--color-black-hsl),.9);
 height:48px;
 position:fixed;
 right:var(--space-sm);
 top:var(--space-sm);
 transition:.2s;
 width:48px;
 z-index:var(--z-index-fixed-element,10)
}
.modal__close-btn--outer .icon {
 color:var(--color-white);
 transition:transform .3s var(--ease-out-back)
}
.modal__close-btn--outer:hover {
 background-color:hsla(var(--color-black-hsl),1)
}
.modal__close-btn--outer:hover .icon {
 transform:scale(1.1)
}
.modal__close-btn--inner {
 --size:32px;
 background-color:var(--color-bg-light);
 box-shadow:var(--inner-glow),var(--shadow-sm);
 height:var(--size);
 transition:.2s;
 width:var(--size)
}
.modal__close-btn--inner .icon {
 color:inherit
}
.modal__close-btn--inner:hover {
 background-color:var(--color-bg-lighter);
 box-shadow:var(--inner-glow),var(--shadow-md)
}
:root {
 --modal-transition-duration:0.2s
}
@media (prefers-reduced-motion:no-preference) {
 .modal--animate-fade {
  --modal-transition-duration:0.2s;
  transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)
 }
 .modal--animate-fade.modal--is-visible {
  transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s
 }
 .modal--animate-scale,
 .modal--animate-translate-down,
 .modal--animate-translate-left,
 .modal--animate-translate-right,
 .modal--animate-translate-up {
  --modal-transition-duration:.2s;
  transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)
 }
 .modal--animate-scale .modal__content,
 .modal--animate-translate-down .modal__content,
 .modal--animate-translate-left .modal__content,
 .modal--animate-translate-right .modal__content,
 .modal--animate-translate-up .modal__content {
  transition:transform var(--modal-transition-duration) var(--ease-out);
  will-change:transform
 }
 .modal--animate-scale.modal--is-visible,
 .modal--animate-translate-down.modal--is-visible,
 .modal--animate-translate-left.modal--is-visible,
 .modal--animate-translate-right.modal--is-visible,
 .modal--animate-translate-up.modal--is-visible {
  transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s
 }
 .modal--animate-scale.modal--is-visible .modal__content,
 .modal--animate-translate-down.modal--is-visible .modal__content,
 .modal--animate-translate-left.modal--is-visible .modal__content,
 .modal--animate-translate-right.modal--is-visible .modal__content,
 .modal--animate-translate-up.modal--is-visible .modal__content {
  transform:scale(1)
 }
 .modal--animate-slide-down,
 .modal--animate-slide-left,
 .modal--animate-slide-right,
 .modal--animate-slide-up {
  --modal-transition-duration:0.3s;
  transition:opacity 0s var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)
 }
 .modal--animate-slide-down .modal__content,
 .modal--animate-slide-left .modal__content,
 .modal--animate-slide-right .modal__content,
 .modal--animate-slide-up .modal__content {
  transition:transform var(--modal-transition-duration) var(--ease-out);
  will-change:transform
 }
 .modal--animate-slide-down.modal--is-visible,
 .modal--animate-slide-left.modal--is-visible,
 .modal--animate-slide-right.modal--is-visible,
 .modal--animate-slide-up.modal--is-visible {
  transition:background-color var(--modal-transition-duration),visibility 0s
 }
 .modal--animate-slide-down.modal--is-visible .modal__content,
 .modal--animate-slide-left.modal--is-visible .modal__content,
 .modal--animate-slide-right.modal--is-visible .modal__content,
 .modal--animate-slide-up.modal--is-visible .modal__content {
  transform:scale(1)
 }
 .modal--animate-scale .modal__content {
  transform:scale(.95)
 }
 .modal--animate-translate-up .modal__content {
  transform:translateY(40px)
 }
 .modal--animate-translate-down .modal__content {
  transform:translateY(-40px)
 }
 .modal--animate-translate-right .modal__content {
  transform:translateX(-40px)
 }
 .modal--animate-translate-left .modal__content {
  transform:translateX(40px)
 }
 .modal--animate-slide-up .modal__content {
  transform:translateY(100%)
 }
 .modal--animate-slide-down .modal__content {
  transform:translateY(-100%)
 }
 .modal--animate-slide-right .modal__content {
  transform:translateX(-100%)
 }
 .modal--animate-slide-left .modal__content {
  transform:translateX(100%)
 }
}
.modal--is-loading .modal__content {
 visibility:hidden
}
.modal--is-loading .modal__loader {
 display:flex
}
.modal__loader {
 align-items:center;
 display:none;
 height:100%;
 justify-content:center;
 left:0;
 pointer-events:none;
 position:fixed;
 top:0;
 width:100%
}
.modal-img-btn {
 cursor:pointer;
 position:relative
}
.modal-img-btn:after {
 background-color:hsla(var(--color-black-hsl),0);
 content:"";
 height:100%;
 left:0;
 position:absolute;
 top:0;
 transition:background .2s;
 width:100%;
 z-index:1
}
.modal-img-btn:hover:after {
 background-color:hsla(var(--color-black-hsl),.7)
}
.modal-img-btn:hover .modal-img-btn__icon-wrapper {
 opacity:1
}
.modal-img-btn__icon-wrapper {
 align-items:center;
 background-color:hsla(var(--color-black-hsl),.7);
 border-radius:50%;
 display:inline-flex;
 height:48px;
 justify-content:center;
 left:calc(50% - 24px);
 opacity:0;
 position:absolute;
 top:calc(50% - 24px);
 transition:opacity .2s;
 width:48px;
 z-index:2
}
.modal-img-btn__icon-wrapper .icon {
 color:var(--color-white)
}
.btn-states {
 position:relative
}
.btn-states--state-b:not(.btn-states--preserve-width) .btn-states__content-a,
.btn-states--state-c:not(.btn-states--preserve-width) .btn-states__content-a,
.btn-states:not(.btn-states--state-b) .btn-states__content-b,
.btn-states:not(.btn-states--state-c) .btn-states__content-c {
 display:none
}
.btn-states--preserve-width .btn-states__content-b,
.btn-states--preserve-width .btn-states__content-c {
 height:100%;
 left:0;
 position:absolute;
 top:0;
 width:100%
}
.btn-states--preserve-width.btn-states--state-b .btn-states__content-a,
.btn-states--preserve-width.btn-states--state-c .btn-states__content-a {
 visibility:hidden
}
:root {
 --checkbox-radio-size:18px;
 --checkbox-radio-gap:var(--space-3xs);
 --checkbox-radio-border-width:1px;
 --checkbox-radio-line-height:var(--body-line-height);
 --radio-marker-size:8px;
 --checkbox-marker-size:12px;
 --checkbox-radius:4px
}
.checkbox,
.radio {
 height:var(--checkbox-radio-size);
 margin:0;
 margin-top:calc((1em*var(--checkbox-radio-line-height) - var(--checkbox-radio-size))/2);
 opacity:0;
 padding:0;
 pointer-events:none;
 position:absolute;
 width:var(--checkbox-radio-size)
}
.checkbox+label,
.radio+label {
 cursor:pointer;
 display:inline-block;
 line-height:var(--checkbox-radio-line-height);
 padding-left:calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap));
 -webkit-user-select:none;
 user-select:none
}
.checkbox+label:before,
.radio+label:before {
 background-color:var(--color-bg);
 background-position:50%;
 background-repeat:no-repeat;
 border-color:hsla(var(--color-contrast-low-hsl),.65);
 border-style:solid;
 border-width:var(--checkbox-radio-border-width);
 box-shadow:var(--shadow-xs);
 box-sizing:border-box;
 content:"";
 display:inline-block;
 flex-shrink:0;
 height:var(--checkbox-radio-size);
 margin-left:calc((var(--checkbox-radio-size) + var(--checkbox-radio-gap))*-1);
 margin-right:var(--checkbox-radio-gap);
 position:relative;
 top:-.1em;
 transition:transform .2s,border .2s;
 vertical-align:middle;
 width:var(--checkbox-radio-size)
}
[data-theme=dark] :is(.radio,
.checkbox)+label:before {
 background-image:linear-gradient(to top,var(--color-bg-lighter),var(--color-bg-light));
 border-width:0;
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.1),var(--shadow-xs),var(--shadow-sm)
}
.checkbox:not(:checked):not(:focus)+label:hover:before,
.radio:not(:checked):not(:focus)+label:hover:before {
 border-color:hsla(var(--color-contrast-low-hsl),1)
}
.radio+label:before {
 border-radius:50%
}
.checkbox+label:before {
 border-radius:var(--checkbox-radius)
}
.checkbox:checked+label:before,
.radio:checked+label:before {
 background-color:var(--color-primary);
 border-color:var(--color-primary);
 box-shadow:var(--shadow-xs);
 transition:transform .2s
}
[data-theme=dark] :is(.radio,
.checkbox):checked+label:before {
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.25),var(--shadow-xs),var(--shadow-sm)
}
.checkbox:active+label:before,
.radio:active+label:before {
 transform:scale(.8);
 transition:transform .2s
}
.checkbox:checked:active+label:before,
.radio:checked:active+label:before {
 transform:none;
 transition:none
}
.radio:checked+label:before {
 background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
 background-size:var(--radio-marker-size)
}
.checkbox:checked+label:before {
 background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='none' stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6.5 3 3 7-7'/%3E%3C/svg%3E");
 background-size:var(--checkbox-marker-size)
}
.checkbox:checked:active+label:before,
.checkbox:focus+label:before,
.radio:checked:active+label:before,
.radio:focus+label:before {
 border-color:var(--color-primary);
 box-shadow:0 0 0 3px hsla(var(--color-primary-hsl),.2)
}
[data-theme=dark] .checkbox:focus+label:before {
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.1),var(--shadow-xs),var(--shadow-sm),0 0 0 3px var(--color-bg-darker)
}
[data-theme=dark] .checkbox:checked:focus+label:before {
 box-shadow:inset 0 1px 0 hsla(var(--color-white-hsl),.25),var(--shadow-xs),var(--shadow-sm),0 0 0 3px hsla(var(--color-primary-hsl),.25)
}
.checkbox--bg+label,
.radio--bg+label {
 border-radius:var(--radius-md);
 padding:var(--space-3xs);
 padding-left:calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap) + var(--space-3xs));
 transition:background .2s
}
.checkbox--bg+label:hover,
.radio--bg+label:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.05)
}
[data-theme=dark] :is(.radio--bg,
.checkbox--bg)+label:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.04)
}
.checkbox--bg:active+label,
.checkbox--bg:focus+label,
.radio--bg:active+label,
.radio--bg:focus+label {
 background-color:hsla(var(--color-primary-hsl),.1)
}
:root {
 --search-input-btn-width:2.2em;
 --search-input-icon-size:1em;
 --search-input-shortcut-margin:0.325em
}
.search-input {
 position:relative
}
.search-input__input {
 height:100%;
 width:100%
}
.search-input__input::-webkit-search-cancel-button,
.search-input__input::-webkit-search-decoration,
.search-input__input::-webkit-search-results-button,
.search-input__input::-webkit-search-results-decoration {
 -webkit-appearance:none
}
.search-input__input::-ms-clear,
.search-input__input::-ms-reveal {
 display:none;
 height:0;
 width:0
}
.search-input--icon-right .search-input__input {
 padding-right:var(--search-input-btn-width)
}
.search-input--icon-left .search-input__input {
 padding-left:var(--search-input-btn-width)
}
.search-input__btn {
 align-items:center;
 -webkit-appearance:none;
 appearance:none;
 background-color:transparent;
 border:0;
 border-radius:0;
 color:inherit;
 display:flex;
 height:100%;
 justify-content:center;
 line-height:inherit;
 padding:0;
 position:absolute;
 right:0;
 top:0;
 width:var(--search-input-btn-width)
}
.search-input__btn:active .icon {
 transform:translateY(2px)
}
.search-input__btn .icon {
 --size:var(--search-input-icon-size);
 color:var(--color-contrast-low);
 display:block;
 margin-left:auto;
 margin-right:auto;
 transition:.2s
}
.search-input--icon-left .search-input__btn {
 left:0;
 pointer-events:none;
 right:auto
}
.search-input .search-input__input:focus+.search-input__btn .icon,
.search-input__btn:focus .icon {
 color:var(--color-primary)
}
.search-input__shortcut {
 --space-unit:1em;
 align-items:center;
 background-color:var(--color-bg);
 border:1px solid var(--color-contrast-lower);
 border-radius:var(--radius-sm);
 color:var(--color-contrast-medium);
 display:flex;
 height:calc(100% - var(--search-input-shortcut-margin)*2);
 line-height:1;
 padding:0 var(--space-3xs);
 position:absolute;
 right:var(--search-input-shortcut-margin);
 top:var(--search-input-shortcut-margin)
}
.search-input:focus-within .search-input__shortcut {
 display:none
}
.alert {
 clip:rect(1px,1px,1px,1px);
 background-color:hsla(var(--color-primary-hsl),.2);
 -webkit-clip-path:inset(50%);
 clip-path:inset(50%);
 color:var(--color-contrast-higher);
 position:absolute
}
.alert__icon {
 color:var(--color-primary)
}
.alert__close-btn {
 display:inline-block;
 flex-shrink:0;
 transition:.2s
}
.alert__close-btn .icon {
 display:block;
 transition:transform .2s
}
.alert__close-btn:hover .icon {
 transform:scale(1.1)
}
.alert--success {
 background-color:hsla(var(--color-success-hsl),.2)
}
.alert--success .alert__icon {
 color:var(--color-success)
}
.alert--error {
 background-color:hsla(var(--color-error-hsl),.2)
}
.alert--error .alert__icon {
 color:var(--color-error)
}
.alert--warning {
 background-color:hsla(var(--color-warning-hsl),.2)
}
.alert--warning .alert__icon {
 color:var(--color-warning)
}
.alert--is-visible {
 clip:auto;
 -webkit-clip-path:none;
 clip-path:none;
 position:static
}
.alert a {
 color:inherit
}
.flash-message {
 background-color:hsla(var(--color-contrast-higher-hsl),.9);
 border-radius:var(--radius-md);
 bottom:var(--space-md);
 box-shadow:var(--shadow-sm);
 color:var(--color-bg);
 font-size:var(--text-sm);
 left:var(--space-md);
 line-height:1;
 padding:var(--space-sm);
 position:fixed;
 z-index:var(--z-index-fixed-element)
}
.flash-message a {
 color:inherit
}
.flash-message--error {
 background-color:hsla(var(--color-error-hsl),.95);
 color:var(--color-white)
}
.card-3__figure {
 box-shadow:var(--shadow-sm);
 overflow:hidden;
 position:relative;
 transition:.3s
}
.card-3__figure:after {
 background-color:hsla(var(--color-black-hsl),0);
 content:"";
 height:100%;
 left:0;
 pointer-events:none;
 position:absolute;
 top:0;
 transition:.3s;
 width:100%;
 z-index:1
}
.card-3__figure:hover {
 box-shadow:var(--shadow-md)
}
.card-3__figure:hover:after {
 background-color:hsla(var(--color-black-hsl),.8)
}
.card-3__figure:hover .card-3__btn {
 opacity:1;
 transform:translateY(0)
}
.card-3__figure:hover .card-3__btn:nth-child(2) {
 transition-delay:.1s
}
.card-3__btns {
 align-items:center;
 display:flex;
 flex-direction:column;
 height:100%;
 justify-content:center;
 left:0;
 pointer-events:none;
 position:absolute;
 top:0;
 width:100%;
 z-index:2
}
.card-3__btn {
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 background-color:hsla(var(--color-white-hsl),.85);
 border-radius:var(--radius-md);
 color:var(--color-black);
 min-width:180px;
 opacity:0;
 padding:var(--space-xs) var(--space-sm);
 pointer-events:auto;
 text-align:center;
 text-decoration:none;
 transform:translateY(10px);
 transition:background-color .2s,opacity .3s,transform .3s var(--ease-out);
 will-change:transform
}
.card-3__btn:hover {
 background-color:hsla(var(--color-white-hsl),1)
}
.card-3__btn:nth-child(2) {
 background-color:hsla(var(--color-black-hsl),.9);
 color:var(--color-white);
 margin-top:var(--space-2xs)
}
.card-3__btn:nth-child(2):hover {
 background-color:hsla(var(--color-black-hsl),1)
}
:root {
 --password-btn-width:3em;
 --password-icon-size:20px
}
.password {
 position:relative
}
.password__input {
 height:100%
}
.password__btn {
 align-items:center;
 -webkit-appearance:none;
 appearance:none;
 background-color:transparent;
 border:0;
 border-radius:0;
 color:inherit;
 display:none;
 height:100%;
 justify-content:center;
 line-height:inherit;
 padding:0;
 position:absolute;
 right:0;
 top:0;
 width:var(--password-btn-width);
 z-index:1
}
.password__btn:focus {
 color:var(--color-primary)
}
.password__btn-label:last-child {
 display:none
}
.password__btn-label .icon {
 height:var(--password-icon-size);
 width:var(--password-icon-size)
}
.password--text-is-visible .password__btn-label:first-child {
 display:none
}
.password--text-is-visible .password__btn-label:last-child {
 display:inline-block
}
.js .password__input {
 padding-right:calc(var(--space-sm) + var(--password-btn-width))
}
.js .password__input::-ms-reveal {
 display:none
}
.js .password__btn {
 display:flex
}
:root {
 --list-space-y:0.375em;
 --list-offset:1em;
 --list-line-height-multiplier:1
}
.list,
.text-component .list {
 list-style:none;
 padding-left:0
}
.list :is(ul,
ol),
.text-component .list :is(ul,
ol) {
 list-style:none;
 margin:0;
 margin-top:calc((var(--list-space-y)/2)*var(--text-space-y-multiplier, 1));
 padding-left:var(--list-offset);
 padding-top:calc((var(--list-space-y)/2)*var(--text-space-y-multiplier, 1))
}
.list li,
.text-component .list li {
 line-height:calc(var(--body-line-height)*var(--list-line-height-multiplier));
 margin-bottom:calc((var(--list-space-y)/2)*var(--text-space-y-multiplier, 1));
 padding-bottom:calc((var(--list-space-y)/2)*var(--text-space-y-multiplier, 1))
}
:is(.list,
.list ul,
.list ol,
.text-component .list,
text-component .list ul,
.text-component .list ol)>li:last-child {
 margin-bottom:0
}
:is(.list:not(.list--border),
.list ul,
.list ol,
.text-component .list:not(.list--border),
.text-component .list ul,
.text-component .list ol) {
 padding-bottom:0
}
.list--ol,
.list--ul,
.text-component .list--ol,
.text-component .list--ul {
 --list-offset:calc(var(--list-bullet-size) + var(--list-bullet-margin-right))
}
.list--ol ol,
.list--ol ul,
.list--ul ol,
.list--ul ul,
.text-component .list--ol ol,
.text-component .list--ol ul,
.text-component .list--ul ol,
.text-component .list--ul ul {
 padding-left:0
}
@supports (--css:variables) {
 .list--ol li,
 .list--ul li,
 .text-component .list--ol li,
 .text-component .list--ul li {
  padding-left:var(--list-offset)!important
 }
}
.list--ol li:before,
.list--ul li:before,
.text-component .list--ol li:before,
.text-component .list--ul li:before {
 align-items:center;
 display:inline-flex;
 justify-content:center;
 position:relative;
 top:-.1em;
 vertical-align:middle
}
@supports (--css:variables) {
 .list--ol li:before,
 .list--ul li:before,
 .text-component .list--ol li:before,
 .text-component .list--ul li:before {
  height:var(--list-bullet-size)!important;
  left:calc(var(--list-bullet-margin-right)*-1)!important;
  margin-left:calc(var(--list-bullet-size)*-1)!important;
  width:var(--list-bullet-size)!important
 }
}
.list--ul,
.text-component .list--ul {
 --list-bullet-size:7px;
 --list-bullet-margin-right:12px
}
.list--ul>li,
.text-component .list--ul>li {
 padding-left:19px
}
.list--ul>li:before,
.text-component .list--ul>li:before {
 background-color:currentColor;
 border-radius:50%;
 color:var(--color-contrast-lower);
 content:"";
 height:7px;
 left:-12px;
 margin-left:-7px;
 width:7px
}
.list--colored-bullets>li:before {
 color:var(--color-primary)
}
.list--ul ul li:before,
.text-component .list--ul ul li:before {
 background-color:transparent;
 box-shadow:inset 0 0 0 2px currentColor
}
.list--ol,
.text-component .list--ol {
 --list-bullet-size:26px;
 --list-bullet-margin-right:12px;
 --list-bullet-font-size:14px;
 counter-reset:list-items
}
.list--ol>li,
.text-component .list--ol>li {
 counter-increment:list-items;
 padding-left:32px
}
.list--ol ol,
.text-component .list--ol ol {
 counter-reset:list-items
}
.list--ol>li:before,
.text-component .list--ol>li:before {
 background-color:hsla(var(--color-contrast-higher-hsl),.09);
 border-radius:50%;
 color:var(--color-contrast-high);
 content:counter(list-items);
 font-size:var(--list-bullet-font-size,14px);
 height:26px;
 left:-6px;
 line-height:1;
 margin-left:-26px;
 width:26px
}
.list--ol ol>li:before,
.text-component .list--ol ol>li:before {
 background-color:transparent;
 box-shadow:inset 0 0 0 2px hsla(var(--color-contrast-higher-hsl),.09)
}
.list--border li:not(:last-child),
.text-component .list--border li:not(:last-child) {
 border-bottom:1px solid var(--color-border-alpha)
}
.list--border ol,
.list--border ul,
.text-component .list--border ol,
.text-component .list--border ul {
 border-top:1px solid var(--color-border-alpha)
}
.list--icons,
.text-component .list--icons {
 --list-bullet-size:24px;
 --list-bullet-margin-right:8px;
 --list-offset:calc(var(--list-bullet-size) + var(--list-bullet-margin-right))
}
.list--icons ol,
.list--icons ul,
.text-component .list--icons ol,
.text-component .list--icons ul {
 padding-left:32px
}
@supports (--css:variables) {
 .list--icons ol,
 .list--icons ul,
 .text-component .list--icons ol,
 .text-component .list--icons ul {
  padding-left:var(--list-offset)
 }
}
.list__icon {
 height:24px;
 margin-right:8px;
 position:relative;
 width:24px
}
.list__icon:not(.top-0) {
 top:calc(1em*var(--body-line-height)/2 - 12px)
}
@supports (--css:variables) {
 .list__icon {
  height:var(--list-bullet-size);
  margin-right:var(--list-bullet-margin-right);
  width:var(--list-bullet-size)
 }
 .list__icon:not(.top-0) {
  top:calc((1em*var(--body-line-height)*var(--list-line-height-multiplier) - var(--list-bullet-size))/2)
 }
}
:root {
 --progress-bar-height:4px
}
.progress-bar__bg {
 background-color:hsla(var(--color-contrast-higher),.1);
 flex-grow:1;
 height:var(--progress-bar-height);
 overflow:hidden;
 position:relative;
 width:100%
}
.progress-bar__fill {
 background-color:currentColor;
 height:100%;
 left:0;
 position:absolute;
 top:0;
 width:0
}
.progress-bar__value {
 flex-shrink:0
}
.js .progress-bar--color-update:not(.progress-bar--init) .progress-bar__fill,
.js .progress-bar--color-update:not(.progress-bar--init) .progress-bar__value,
.js .progress-bar[data-animation=on]:not(.progress-bar--init) .progress-bar__fill,
.js .progress-bar[data-animation=on]:not(.progress-bar--init) .progress-bar__value {
 opacity:0
}
.progress-bar--color-update {
 --progress-bar-color-1:30;
 --progress-bar-color-2:65;
 --progress-bar-color-3:100
}
.progress-bar--color-update.progress-bar--init .progress-bar__fill {
 transition:background-color .3s
}
.progress-bar--fill-color-1 .progress-bar__fill {
 background-color:var(--color-error)
}
.progress-bar--fill-color-2 .progress-bar__fill {
 background-color:var(--color-warning)
}
.progress-bar--fill-color-3 .progress-bar__fill {
 background-color:var(--color-success)
}
.info-msg {
 background-color:hsla(var(--color-primary-hsl),.18);
 border-radius:var(--radius-md)
}
.info-msg--warning {
 background-color:hsla(var(--color-warning-hsl),.2)
}
.info-msg>:last-child {
 margin-bottom:0
}
.info-msg a:not(.btn) {
 color:inherit
}
.note {
 background-color:var(--color-bg-light);
 border-left:3px solid var(--color-primary);
 box-shadow:var(--shadow-xs);
 padding:var(--space-xs)
}
.note .icon {
 color:var(--color-primary)
}
.note--warning {
 border-left-color:var(--color-warning)
}
.note--warning .icon {
 color:var(--color-warning)
}
.note--error {
 border-left-color:var(--color-error)
}
.note--error .icon {
 color:var(--color-error)
}
.note--success {
 border-left-color:var(--color-success)
}
.note--success .icon {
 color:var(--color-success)
}
.text-component .note__content>:last-child,
.text-component .note__title {
 margin-bottom:0
}
.tbl {
 -webkit-overflow-scrolling:touch;
 overflow:auto;
 position:relative;
 z-index:1
}
.tbl::-webkit-scrollbar {
 height:8px;
 width:8px
}
.tbl::-webkit-scrollbar-track {
 background-color:var(--color-contrast-lower)
}
.tbl::-webkit-scrollbar-thumb {
 background-color:var(--color-contrast-low);
 border-radius:50em
}
.tbl::-webkit-scrollbar-thumb:hover {
 background-color:var(--color-contrast-medium)
}
.tbl__header,
.tbl__table {
 border-bottom:1px solid var(--color-contrast-lower)
}
.tbl__table {
 width:100%
}
.tbl__header {
 background-color:hsla(var(--color-contrast-higher-hsl),.035)
}
.tbl__body .tbl__row {
 border-bottom:1px solid hsla(var(--color-contrast-higher-hsl),.09);
 transition:.2s
}
.tbl__body .tbl__row:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.035)
}
.tbl__body .tbl__row:last-child {
 border-bottom:none
}
.tbl__cell {
 padding:var(--space-xs)
}
.tbl code,
.tbl__cell {
 font-size:var(--text-sm)
}
.tbl code {
 -webkit-user-select:all;
 user-select:all
}
.tbl__header .tbl__cell {
 color:var(--color-contrast-higher);
 font-weight:600
}
.tbl--code-col-2 thead th {
 width:50%
}
.blog-post {
 padding:var(--space-lg) 0
}
.blog-post:first-child {
 padding-top:0
}
.notice {
 pointer-events:none;
 position:fixed;
 width:100%;
 z-index:var(--z-index-fixed-element,10)
}
.notice__banner {
 background-color:var(--color-bg-light);
 border-radius:var(--radius-md);
 box-shadow:var(--inner-glow),var(--shadow-md);
 padding:var(--space-sm);
 pointer-events:auto
}
.notice--warning .notice__banner {
 background-color:hsla(var(--color-warning-hsl),.97);
 color:var(--color-white)
}
.notice--warning a {
 color:inherit
}
.notice__close-btn {
 --size:32px;
 align-items:center;
 background-color:hsla(var(--color-contrast-higher-hsl),.075);
 border-radius:50%;
 display:flex;
 flex-shrink:0;
 height:var(--size);
 justify-content:center;
 transition:.2s;
 width:var(--size)
}
.notice__close-btn:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.1)
}
.notice--warning .notice__close-btn {
 background-color:hsla(var(--color-warning-darker-hsl),.9)
}
.notice--warning .notice__close-btn:hover {
 background-color:hsla(var(--color-warning-darker-hsl),1)
}
.notice__close-btn .icon {
 --size:16px
}
.notice--hide {
 opacity:0;
 visibility:hidden
}
@media screen and (prefers-reduced-motion:no-preference) {
 .notice {
  transition:opacity .3s,visibility 0s .3s
 }
 .notice__banner {
  transition:transform .3s
 }
 .notice--hide .notice__banner {
  transform:translateY(20px)
 }
}
:root {
 --list-filter-height:240px
}
.list-filter__form {
 overflow:hidden
}
.list-filter__search {
 position:relative;
 width:100%;
 z-index:1
}
.list-filter__search::-webkit-search-cancel-button,
.list-filter__search::-webkit-search-decoration,
.list-filter__search::-webkit-search-results-button,
.list-filter__search::-webkit-search-results-decoration {
 -webkit-appearance:none
}
.list-filter__search::-ms-clear,
.list-filter__search::-ms-reveal {
 display:none;
 height:0;
 width:0
}
.list-filter__search:focus {
 outline:none
}
.list-filter__search:focus+.list-filter__focus-marker {
 opacity:1
}
.list-filter__search:placeholder-shown~.list-filter__search-cancel-btn {
 display:none
}
.list-filter__search-cancel-btn {
 border-radius:50%;
 color:var(--color-contrast-medium);
 cursor:pointer;
 display:inline-block;
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 z-index:2
}
.list-filter__search-cancel-btn:hover {
 opacity:.85
}
.list-filter__focus-marker {
 background-color:var(--color-primary);
 display:block;
 height:1em;
 left:0;
 opacity:0;
 pointer-events:none;
 position:absolute;
 top:calc(50% - .5em);
 transition:opacity .2s;
 width:3px
}
.list-filter__list-wrapper {
 height:var(--list-filter-height);
 position:relative
}
.list-filter__list {
 height:100%;
 left:0;
 overflow:auto;
 position:absolute;
 top:0;
 width:100%
}
.list-filter__item {
 align-items:center;
 cursor:default;
 display:flex;
 transition:background-color .2s
}
.list-filter__item:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.075)
}
.list-filter__status {
 --size:8px;
 border-radius:50%;
 display:block;
 flex-shrink:0;
 height:var(--size);
 width:var(--size)
}
.list-filter__item--user-active .list-filter__status {
 background-color:var(--color-success)
}
.list-filter__item--user-active .list-filter__status:after {
 clip:rect(1px,1px,1px,1px);
 -webkit-clip-path:inset(50%);
 clip-path:inset(50%);
 content:"user active";
 position:absolute
}
.list-filter__item--user-pending .list-filter__status {
 background-color:var(--color-warning)
}
.list-filter__item--user-pending .list-filter__status:after {
 clip:rect(1px,1px,1px,1px);
 -webkit-clip-path:inset(50%);
 clip-path:inset(50%);
 content:"user pending";
 position:absolute
}
.list-filter__action-btn {
 background-color:var(--color-bg);
 border:1px solid hsla(var(--color-contrast-higher-hsl),.15);
 border-radius:50%;
 cursor:pointer;
 display:flex;
 flex-shrink:0;
 height:24px;
 transition:.2s;
 width:24px
}
.list-filter__action-btn .icon {
 margin:auto
}
.list-filter__action-btn:hover {
 border-color:var(--color-error);
 color:var(--color-error)
}
.dynamic-content {
 position:relative
}
.dynamic-content__loader {
 display:none;
 left:0;
 position:absolute;
 top:50%;
 transform:translateY(-50%)
}
.dynamic-content__loader--center {
 left:50%;
 transform:translateY(-50%) translateX(-50%)
}
.dynamic-content__error {
 display:none
}
.dynamic-content--is-loading .dynamic-content__loader {
 display:block
}
.dynamic-content--is-loading .dynamic-content__content {
 opacity:.2
}
.dynamic-content--has-error .dynamic-content__content,
.dynamic-content--has-error .dynamic-content__loader {
 display:none
}
.dynamic-content--has-error .dynamic-content__error {
 display:block
}
.project__preview {
 background-color:var(--color-bg-light);
 border-radius:var(--radius-md);
 box-shadow:var(--inner-glow),var(--shadow-xs);
 color:var(--color-contrast-higher);
 display:block;
 font-size:var(--text-sm);
 position:relative;
 text-decoration:none
}
.project__lock,
.project__overlay,
.project__overlay-msg {
 position:absolute
}
.project__lock,
.project__overlay-msg {
 left:50%;
 opacity:0;
 top:50%
}
.project__overlay {
 border-radius:var(--radius-sm);
 bottom:2px;
 left:2px;
 opacity:0;
 right:2px;
 top:2px;
 transition:opacity .3s
}
.project__overlay-msg {
 border-radius:50em;
 display:inline-block;
 line-height:1;
 padding:var(--space-sm);
 transform:translate(-50%,-30%);
 transition:opacity .3s,transform .3s;
 white-space:nowrap
}
.project__lock {
 transform:translate(-50%,-50%)
}
.project__preview:hover .project__overlay {
 opacity:.85
}
.project__preview:hover .project__overlay-msg {
 opacity:1;
 transform:translate(-50%,-50%)
}
.project--locked .project__overlay {
 opacity:.85
}
.project--locked .project__overlay-msg {
 display:none
}
.project--locked .project__lock {
 opacity:1
}
.app-slider-control {
 --slider-fill-value:100%;
 --slider-empty-value:0%;
 align-items:center;
 display:flex;
 position:relative
}
.app-slider-control input[type=range] {
 -webkit-appearance:none;
 background:transparent;
 display:block;
 width:100%
}
.app-slider-control input[type=range]:focus {
 outline:none
}
.app-slider-control input[type=range]::-moz-focus-outer {
 border:0
}
.app-slider-control input[type=range]::-webkit-slider-thumb {
 -webkit-appearance:none;
 background-color:var(--color-white);
 border:none;
 border-radius:10px;
 box-shadow:0 1px 1px rgba(0,0,0,.3),0 1px 8px rgba(0,0,0,.2);
 height:10px;
 transform:translateY(-4px);
 width:10px
}
.app-slider-control input[type=range]::-moz-range-thumb {
 background-color:var(--color-white);
 border:none;
 border-radius:10px;
 box-shadow:0 1px 1px rgba(0,0,0,.3),0 1px 8px rgba(0,0,0,.2);
 height:10px;
 width:10px
}
.app-slider-control input[type=range]::-ms-thumb {
 background-color:var(--color-white);
 background-color:#fff;
 border:none;
 border-radius:10px;
 box-shadow:0 1px 1px rgba(0,0,0,.3),0 1px 8px rgba(0,0,0,.2);
 height:10px;
 transform:translateY(0);
 width:10px
}
.app-slider-control input[type=range]::-webkit-slider-runnable-track {
 background-color:var(--color-contrast-lower);
 background-image:linear-gradient(to right,var(--color-primary) var(--slider-fill-value),var(--color-contrast-lower) var(--slider-fill-value),var(--color-contrast-lower) var(--slider-empty-value));
 border-radius:4px;
 height:2px
}
.app-slider-control input[type=range]::-moz-range-track {
 background-color:var(--color-contrast-lower);
 background-image:linear-gradient(to right,var(--color-primary) var(--slider-fill-value),var(--color-contrast-lower) var(--slider-fill-value),var(--color-contrast-lower) var(--slider-empty-value));
 border-radius:4px;
 height:2px
}
.app-slider-control input[type=range]::-ms-track {
 background-color:var(--color-contrast-lower);
 background-color:#98989a;
 background-image:linear-gradient(to right,var(--color-primary) var(--slider-fill-value),var(--color-contrast-lower) var(--slider-fill-value),var(--color-contrast-lower) var(--slider-empty-value));
 border-radius:4px;
 height:2px
}
.toc__list {
 position:relative
}
.toc__list .toc__list .toc__link {
 padding-left:calc(var(--space-sm)*2)
}
.toc__label,
.toc__link {
 padding:var(--space-3xs) var(--space-sm)
}
.toc__link {
 color:var(--color-contrast-medium);
 line-height:1.32;
 position:relative;
 text-decoration:none
}
.toc__link:before {
 content:"";
 height:100%;
 left:0;
 position:absolute;
 top:0;
 width:1px
}
.toc__link:hover {
 color:var(--color-contrast-high)
}
.toc__link--selected,
.toc__link--selected:hover {
 color:var(--color-primary)
}
.toc__label {
 font-size:var(--text-sm);
 letter-spacing:.1em;
 text-transform:uppercase
}
.toc__control {
 align-items:center;
 display:flex;
 justify-content:space-between;
 width:100%
}
.toc__control-text {
 position:relative
}
.toc__control-text>* {
 display:inline-block;
 transition:opacity .4s,transform .4s var(--ease-out)
}
.toc__control-text>:last-child {
 left:0;
 opacity:0;
 pointer-events:none;
 position:absolute;
 top:0;
 transform:translateY(-10px)
}
.toc__icon-arrow .icon__group {
 transform-origin:8px 8px;
 transition:transform .3s var(--ease-out);
 will-change:transform
}
.toc__icon-arrow .icon__group>* {
 stroke-dasharray:17;
 transform:translateY(3px);
 transform-origin:8px 8px;
 transition:transform .3s,stroke-dashoffset .3s;
 transition-timing-function:var(--ease-out)
}
.toc__icon-arrow .icon__group>:first-child,
.toc__icon-arrow .icon__group>:last-child {
 stroke-dashoffset:10
}
.toc-content__target {
 scroll-margin-top:var(--space-xxxxs)
}
.toc:not(.toc--static) {
 background-color:var(--color-bg-light);
 border-radius:var(--radius-md);
 box-shadow:var(--inner-glow),var(--shadow-sm);
 transition:.3s
}
.toc:not(.toc--static):hover {
 box-shadow:var(--inner-glow),var(--shadow-md)
}
.toc:not(.toc--static) .toc__nav {
 display:none;
 margin:var(--space-2xs) 0
}
.toc:not(.toc--static) .toc__list {
 padding-bottom:var(--space-xs)
}
.toc:not(.toc--static) .toc__label {
 display:none
}
.toc:not(.toc--static) .toc__link {
 display:flex
}
.toc:not(.toc--static).toc--expanded .toc__control-text>:first-child {
 opacity:0;
 pointer-events:none;
 transform:translateY(10px)
}
.toc:not(.toc--static).toc--expanded .toc__control-text>:last-child {
 opacity:1;
 pointer-events:auto;
 transform:translateY(0)
}
.toc:not(.toc--static).toc--expanded .toc__nav {
 animation:toc-entry-animation .4s var(--ease-out);
 display:block
}
.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group {
 transform:rotate(-90deg)
}
.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group :last-child,
.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group>:first-child {
 stroke-dashoffset:0;
 transform:translateY(0)
}
.toc--static {
 box-shadow:inset 1px 0 0 var(--color-border-alpha)
}
.toc--static[class*=position-sticky] {
 -webkit-overflow-scrolling:touch;
 max-height:calc(100vh - var(--space-md)*2);
 overflow:auto;
 top:var(--space-md)
}
.toc--static .toc__label {
 font-size:var(--text-xs);
 font-weight:500
}
.toc--static .toc__link {
 display:inline-flex;
 font-size:var(--text-sm)
}
.toc--static .toc__link--selected:before {
 background-color:var(--color-primary)
}
.toc--static .toc__control {
 display:none
}
.toc-content--toc-static :target {
 animation:toc-target 2s
}
@keyframes toc-target {
 0%,
 50% {
  outline:2px solid hsla(var(--color-primary-hsl),.5)
 }
 to {
  outline:2px solid hsla(var(--color-primary-hsl),0)
 }
}
@keyframes toc-entry-animation {
 0% {
  opacity:0;
  transform:translateY(-10px)
 }
 to {
  opacity:1;
  transform:translateY(0)
 }
}
html:not(.js) .toc .toc__nav {
 display:block
}
[class*=toc--static]:before {
 content:"collapsed";
 display:none
}
@media (min-width:32rem) {
 .toc--static\@xs:before {
  content:"static"
 }
}
@media (min-width:48rem) {
 .toc--static\@sm:before {
  content:"static"
 }
}
@media (min-width:64rem) {
 .toc--static\@md:before {
  content:"static"
 }
}
@media (min-width:80rem) {
 .toc--static\@lg:before {
  content:"static"
 }
}
@media (min-width:90rem) {
 .toc--static\@xl:before {
  content:"static"
 }
}
.tutorial-avd {
 background-color:var(--color-contrast-higher);
 border-radius:var(--radius-md);
 color:var(--color-bg);
 display:block;
 font-size:var(--text-md);
 text-align:center;
 text-decoration:none;
 transition:background-color .3s!important
}
.tutorial-avd:hover {
 background-color:var(--color-contrast-high);
 background-image:none!important
}
:root {
 --app-header-height:44px
}
.app-header {
 align-items:center;
 box-shadow:inset 0 -1px 0 hsla(var(--color-contrast-higher-hsl),.135);
 display:flex;
 font-size:var(--text-sm);
 height:var(--app-header-height);
 justify-content:space-between;
 left:0;
 padding:0 var(--space-2xs);
 position:fixed;
 top:0;
 width:100%;
 z-index:var(--z-index-fixed-element)
}
.app-header__menu-btn.popover-control--active>:first-child,
.app-header__menu-btn>:last-child {
 display:none
}
.app-header__menu-btn.popover-control--active>:last-child {
 display:block
}
:root {
 --app-tabs-height:28px
}
.app-tabs {
 background-color:var(--color-bg-dark);
 box-shadow:inset 0 -1px 0 var(--color-border-alpha);
 display:flex;
 font-size:var(--text-sm);
 height:var(--app-tabs-height);
 justify-content:center;
 left:0;
 position:fixed;
 top:var(--app-header-height);
 width:100%
}
.app-tabs__inner {
 display:flex;
 overflow:auto
}
.app-tabs__item {
 flex-shrink:0;
 position:relative
}
.app-tabs__link {
 color:var(--color-contrast-low);
 cursor:pointer;
 display:block;
 line-height:var(--app-tabs-height);
 padding:0 var(--space-2xs);
 text-decoration:none
}
.app-tabs__item--selected .app-tabs__link,
.app-tabs__link:hover {
 color:var(--color-contrast-higher)
}
.app-tabs__item--selected:after {
 background-color:var(--color-primary);
 bottom:0;
 content:"";
 height:1px;
 left:0;
 position:absolute;
 width:100%
}
.bookmark-btn {
 color:var(--color-contrast-higher);
 display:inline-flex;
 opacity:.35
}
.bookmark-btn:hover {
 opacity:.5
}
.bookmark-btn.selected {
 color:var(--color-accent);
 opacity:.85
}
.bookmark-btn.selected:hover {
 opacity:1
}
.split-btn>:first-child {
 border-bottom-right-radius:0;
 border-top-right-radius:0;
 height:100%
}
.split-btn>:last-child {
 border-bottom-left-radius:0;
 border-top-left-radius:0
}
.split-btn .btn:focus {
 position:relative;
 z-index:1
}
.split-btn__separator {
 width:1px
}
:root {
 --btns-button-radius:var(--radius-md);
 --btns-button-padding-x:var(--space-sm);
 --btns-button-padding-y:var(--space-2xs)
}
.btns :first-child .btns__btn,
.btns>:first-child {
 border-radius:var(--btns-button-radius) 0 0 var(--btns-button-radius)
}
.btns :last-child .btns__btn,
.btns>:last-child {
 border-radius:0 var(--btns-button-radius) var(--btns-button-radius) 0
}
.btns:is([class^=gap-],
[class*=" gap-"]) .btns__btn {
 border-radius:var(--btns-button-radius)!important
}
.btns__btn {
 align-items:center;
 -webkit-appearance:none;
 appearance:none;
 background-color:transparent;
 background-color:hsla(var(--color-contrast-higher-hsl),.1);
 border:0;
 border-radius:0;
 color:inherit;
 cursor:pointer;
 display:flex;
 justify-content:center;
 line-height:inherit;
 padding:0;
 padding:var(--btns-button-padding-y) var(--btns-button-padding-x);
 position:relative;
 transition:background .2s
}
.btns__btn:hover:not(.btns__btn--selected) {
 background-color:hsla(var(--color-contrast-higher-hsl),.075)
}
.btns__btn:focus {
 outline:2px solid var(--color-contrast-higher);
 outline-offset:2px;
 z-index:1
}
.btns--checkbox input[type=checkbox]:checked+label,
.btns--checkbox input[type=radio]:checked+label,
.btns--radio input[type=checkbox]:checked+label,
.btns--radio input[type=radio]:checked+label,
.btns__btn--selected {
 background-color:var(--color-contrast-higher);
 color:var(--color-bg)
}
.btns__btn--disabled {
 cursor:not-allowed;
 opacity:.7;
 text-decoration:line-through
}
.btns--checkbox>*,
.btns--radio>* {
 position:relative
}
.btns--checkbox input[type=checkbox],
.btns--checkbox input[type=radio],
.btns--radio input[type=checkbox],
.btns--radio input[type=radio] {
 height:0;
 left:0;
 margin:0;
 opacity:0;
 padding:0;
 pointer-events:none;
 position:absolute;
 top:0;
 width:0
}
.btns--checkbox input[type=checkbox]+label,
.btns--checkbox input[type=radio]+label,
.btns--radio input[type=checkbox]+label,
.btns--radio input[type=radio]+label {
 -webkit-user-select:none;
 user-select:none
}
.btns--checkbox input[type=checkbox]:focus+label,
.btns--checkbox input[type=radio]:focus+label,
.btns--radio input[type=checkbox]:focus+label,
.btns--radio input[type=radio]:focus+label {
 z-index:1
}
.btns__btn--icon {
 padding:var(--btns-button-padding-y)
}
.btns__btn--icon .icon {
 display:block
}
.app-canvas {
 -webkit-overflow-scrolling:touch;
 height:calc(100% - var(--app-header-height));
 left:0;
 overflow-y:auto;
 position:fixed;
 top:var(--app-header-height);
 width:100%
}
.app-canvas--sidebars-visible {
 padding:0 var(--app-sidebar-width)
}
.app-canvas__iframe {
 display:block;
 height:100%;
 opacity:0;
 width:100%
}
.app-canvas__iframe--content-is-loaded {
 opacity:1
}
.app-canvas__loader {
 display:block;
 left:calc(50% - 32px);
 position:fixed;
 top:calc(50% - 32px);
 z-index:var(--z-index-fixed-element)
}
.app-canvas--tabs-is-visible {
 height:calc(100% - var(--app-header-height) - var(--app-tabs-height));
 top:calc(var(--app-header-height) + var(--app-tabs-height))
}
:root {
 --app-sidebar-width:260px
}
.app-sidebar {
 background-color:var(--color-bg);
 height:calc(100% - var(--app-header-height));
 position:fixed;
 top:var(--app-header-height);
 width:var(--app-sidebar-width);
 z-index:1
}
.app-sidebar--hide {
 display:none
}
.app-sidebar--tabs-is-visible {
 height:calc(100% - var(--app-header-height) - var(--app-tabs-height));
 top:calc(var(--app-header-height) + var(--app-tabs-height))
}
.app-sidebar--content {
 border-right:1px solid hsla(var(--color-contrast-higher-hsl),.135);
 left:0
}
.app-sidebar--editor {
 border-left:1px solid hsla(var(--color-contrast-higher-hsl),.135);
 right:0
}
.app-sidebar__inner {
 height:100%;
 left:0;
 overflow:auto;
 position:absolute;
 top:0;
 width:100%
}
.app-sidebar__inner::-webkit-scrollbar {
 height:5px;
 width:5px
}
.app-sidebar__inner::-webkit-scrollbar-track {
 background-color:hsla(var(--color-contrast-higher-hsl),.1)
}
.app-sidebar__inner::-webkit-scrollbar-thumb {
 background-color:hsla(var(--color-contrast-higher-hsl),.2);
 border-radius:0
}
.app-sidebar__inner::-webkit-scrollbar-thumb:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.25)
}
.app-label {
 color:var(--color-contrast-medium);
 font-size:var(--text-xs)
}
.app-editor-section__title:hover .app-label {
 color:var(--color-contrast-high)
}
.app-content-switch__group {
 display:none
}
.app-content-switch__arrow {
 transition:transform .2s
}
.app-content-switch--is-open .app-content-switch__group {
 display:block
}
.app-content-switch--is-open .app-content-switch__arrow {
 transform:rotate(90deg)
}
.app-content-item {
 font-size:var(--text-sm)
}
.app-content-item:hover:not(.app-content-item--is-selected) {
 color:var(--color-contrast-higher)
}
.app-content-item:not(.app-content-item--is-editable) {
 -webkit-user-select:none;
 user-select:none
}
.app-content-item--is-hidden,
.app-content-item--is-hidden.flex,
.app-content-item__spacer {
 display:none
}
.app-content-children .app-content-item__spacer {
 display:block
}
.app-content-children,
.app-content-item__cta {
 display:none
}
.app-content-item--is-editable:hover:not(.app-content-item--is-editing) .app-content-item__cta,
.app-content-item--parent.app-content-item--is-editable .app-content-item__cta {
 display:flex
}
.app-content-item__arrow {
 transition:transform .2s
}
.app-content-item--show-children .app-content-item__arrow {
 transform:rotate(90deg)
}
.app-content-item--show-children+.app-content-children {
 display:block
}
.app-content-item--is-selected {
 background:hsla(var(--color-primary-hsl),.15);
 color:var(--color-primary)
}
.app-content-item--is-selected .app-content-item__cta .btn,
.app-content-item--is-selected .icon {
 color:inherit
}
.app-content-item__text[contenteditable]:focus {
 outline:none
}
.app-content-item--is-editing {
 background-color:var(--color-bg);
 box-shadow:0 0 0 2px var(--color-primary)
}
.app-content-item--is-editing .app-content-item__cta {
 display:none
}
.app-editor-section {
 border-bottom:1px solid var(--color-border-alpha)
}
.app-editor-section--is-hidden {
 display:none
}
.app-editor-section__body {
 margin:0 var(--space-3xs) var(--space-3xs);
 padding:0 var(--space-3xs) var(--space-3xs)
}
.app-editor-section__title--hide-body~.app-editor-section__body {
 display:none
}
.app-editor-section__arrow {
 transition:transform .2s
}
.app-editor-section__title--hide-body .app-editor-section__arrow {
 transform:rotate(-90deg)
}
.app-editor-section__title:not(.app-editor-section__title--create) .app-editor-section__create-btn {
 display:none
}
.app-editor-section__edit-indicator {
 background-color:var(--color-accent);
 border-radius:50%;
 display:none;
 height:4px;
 margin-left:var(--space-3xs);
 width:4px
}
.app-editor-section--content-edited .app-editor-section__edit-indicator {
 display:block
}
.app-color-picker__preview {
 border-radius:var(--radius-md);
 box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl),.15);
 flex-shrink:0;
 font-size:var(--text-xs);
 position:relative;
 transition:transform .2s
}
.app-color-picker__preview:active {
 transform:translateY(2px)
}
.app-color-picker__preview:focus-within {
 outline:2px solid var(--color-contrast-higher);
 outline-offset:2px
}
.app-color-picker__native {
 height:100%;
 left:0;
 opacity:0;
 position:absolute;
 top:0;
 width:100%
}
.app-editor__color-preview {
 border-radius:50%;
 box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl),.15);
 flex-shrink:0
}
.app-editor-property {
 align-items:center;
 display:grid;
 gap:var(--space-3xs);
 grid-template-columns:auto 144px;
 justify-content:space-between
}
.app-editor__cta-delete,
.app-editor__lock-icon {
 display:none
}
.app-editor__color-item--locked .app-editor__lock-icon {
 display:block
}
.app-editor__color-item--removable .app-editor__cta-delete {
 display:inline-flex
}
.app-editor-property__color-preview {
 border-radius:50%;
 box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl),.15);
 flex-shrink:0;
 transition:transform .2s
}
.app-editor-property__color-preview.popover-control--active,
.app-editor-property__color-preview:focus {
 outline:2px solid var(--color-contrast-high);
 outline-offset:2px
}
.app-editor-property__color-preview:active {
 transform:translateY(2px)
}
.app-editor-property__color-preview[data-color-lb=""] {
 background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2393989d' stroke-miterlimit='10'%3E%3Cpath d='m6 6 8 8M14 6l-8 8'/%3E%3C/svg%3E") no-repeat 50%
}
.app-editor-property__color-preview[data-color-lb=transparent] {
 background-image:url(../../assets/img/bg-transparent-x.svg)
}
.app-editor-property__color-preview[data-color-lb=inherit] {
 background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2393989d' stroke-miterlimit='10'%3E%3Cpath d='M10 5v10M6 11l4 4 4-4'/%3E%3C/svg%3E") no-repeat 50%
}
.app-editor-property__color-group--disable-opacity .form-control {
 opacity:.5;
 pointer-events:none
}
.app-editor-property__color-group--disable-opacity .app-slider-control {
 filter:grayscale(100%);
 opacity:.5;
 pointer-events:none
}
.app-editor-property:not(.app-editor-property--custom-value--is-visible) .app-editor-property__custom-value,
.app-editor-section:not(.app-editor-section--content-edited) .app-editor-section__footer,
.app-editor-section__grid--is-hidden,
.app-editor-section__hint--is-hidden {
 display:none
}
.app-editor-section__hint {
 color:var(--color-contrast-medium);
 font-size:var(--text-xs);
 text-align:center
}
.app-editor-section__hint:not(.app-editor-section__hint--is-hidden)~.app-editor-section__labels-grid {
 display:none
}
.app-editor-section__grid--property-off .disable-if-none {
 cursor:not-allowed;
 opacity:.5
}
.app-editor-section__grid--property-off .disable-if-none * {
 pointer-events:none
}
.app-editor-tabs {
 margin:0 var(--space-3xs) var(--space-xs);
 padding:0 var(--space-3xs)
}
.app-editor-tabs__item {
 color:var(--color-contrast-low);
 cursor:default;
 font-size:var(--text-xs);
 padding:4px 8px;
 position:relative;
 text-align:center
}
.app-editor-tabs__item:hover {
 color:var(--color-contrast-higher)
}
.app-editor-tabs__item:after {
 border:1px solid var(--color-border-alpha);
 border-bottom-color:var(--color-bg);
 border-top-left-radius:var(--radius-md);
 border-top-right-radius:var(--radius-md);
 content:"";
 display:none;
 height:calc(100% + 1px);
 left:0;
 pointer-events:none;
 position:absolute;
 top:0;
 width:100%
}
.app-editor-tabs__item.app-editor-tabs__item--selected {
 color:var(--color-primary)
}
.app-editor-tabs__item.app-editor-tabs__item--selected:after {
 display:block
}
.app-editor-tabs__item span:after {
 background-color:var(--color-primary);
 border-radius:50%;
 content:"";
 display:none;
 height:4px;
 margin-left:3px;
 vertical-align:middle;
 width:4px
}
.app-editor-tabs__item.app-editor-tabs__item--is-edited span:after {
 display:inline-block
}
.app-editor-section__title--hide-body~.app-editor-tabs {
 display:none
}
.adv-grid-1 {
 overflow:hidden;
 width:100%
}
.adv-grid-1__inner {
 margin-left:-70%;
 width:240%
}
.adv-grid-1__card {
 aspect-ratio:31/17;
 background:var(--color-bg);
 border-radius:var(--radius-md);
 display:block;
 overflow:hidden;
 position:relative;
 transition:transform .3s,filter .3s
}
.adv-grid-1__card:hover {
 transform:translateY(-2px)
}
.adv-grid-1__card:active {
 transform:translateY(2px)
}
@media (min-width:48rem) {
 .adv-grid-1__inner {
  margin-left:-30%;
  width:160%
 }
}
@media (min-width:90rem) {
 .adv-grid-1 {
  display:flex;
  justify-content:center
 }
 .adv-grid-1__inner {
  flex-shrink:0;
  margin:0 auto;
  width:2304px
 }
}
:root {
 --reveal-fx-duration:0.6s;
 --reveal-fx-timing-function:var(--ease-out)
}
.js .reveal-fx {
 opacity:0;
 transition:opacity,transform var(--reveal-fx-timing-function);
 transition-duration:var(--reveal-fx-duration)
}
.js .reveal-fx:before {
 content:"reveal-fx";
 display:none
}
.js .reveal-fx--translate,
.js .reveal-fx--translate-up {
 transform:translateY(50px)
}
.js .reveal-fx--translate-right {
 transform:translateX(-50px)
}
.js .reveal-fx--translate-left {
 transform:translateX(50px)
}
.js .reveal-fx--translate-down {
 transform:translateY(-50px)
}
.js .reveal-fx--scale {
 transform:scale(.8)
}
.js .reveal-fx--scale-up {
 transform:translateY(50px) scale(.8)
}
.js .reveal-fx--scale-right {
 transform:translateX(-50px) scale(.8)
}
.js .reveal-fx--scale-left {
 transform:translateX(50px) scale(.8)
}
.js .reveal-fx--scale-down {
 transform:translateY(-50px) scale(.8)
}
.js .reveal-fx--rotate,
.js .reveal-fx--rotate-down,
.js .reveal-fx--rotate-left,
.js .reveal-fx--rotate-right,
.js .reveal-fx--rotate-up {
 perspective:1000px
}
.js .reveal-fx--rotate-down>*,
.js .reveal-fx--rotate-left>*,
.js .reveal-fx--rotate-right>*,
.js .reveal-fx--rotate-up>*,
.js .reveal-fx--rotate>* {
 -webkit-backface-visibility:hidden;
 backface-visibility:hidden;
 transition:transform var(--reveal-fx-duration) var(--reveal-fx-timing-function)
}
.js .reveal-fx--rotate-down>*,
.js .reveal-fx--rotate>* {
 transform:rotateX(-45deg);
 transform-origin:top
}
.js .reveal-fx--rotate-right>* {
 transform:rotateY(45deg);
 transform-origin:left center
}
.js .reveal-fx--rotate-left>* {
 transform:rotateY(-45deg);
 transform-origin:right center
}
.js .reveal-fx--rotate-up>* {
 transform:rotateX(45deg);
 transform-origin:bottom
}
.js .reveal-fx--text-mask {
 overflow:hidden
}
.js .reveal-fx--text-mask>* {
 display:inline-block;
 transform:translateY(100%);
 transition:transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
 will-change:transform
}
.js [class*=reveal-fx--scale],
.js [class*=reveal-fx--translate] {
 will-change:opacity,transform
}
.js .reveal-fx--text-mask>*,
.js [class*=reveal-fx--rotate]>* {
 will-change:transform
}
.js .reveal-fx--clip-x>*,
.js .reveal-fx--clip-y>* {
 transition:opacity,-webkit-clip-path var(--ease-out);
 transition:opacity,clip-path var(--ease-out);
 transition:opacity,clip-path var(--ease-out),-webkit-clip-path var(--ease-out);
 transition-duration:var(--reveal-fx-duration)
}
.js .reveal-fx--clip-x>* {
 -webkit-clip-path:polygon(10% 0,90% 0,90% 100%,10% 100%);
 clip-path:polygon(10% 0,90% 0,90% 100%,10% 100%)
}
.js .reveal-fx--clip-y>* {
 -webkit-clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%);
 clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%)
}
.js .reveal-fx--is-visible {
 opacity:1
}
.js .reveal-fx--is-visible.reveal-fx--text-mask>*,
.js .reveal-fx--is-visible[class*=reveal-fx--rotate]>*,
.js .reveal-fx--is-visible[class*=reveal-fx--scale],
.js .reveal-fx--is-visible[class*=reveal-fx--translate] {
 transform:translate(0)
}
.js .reveal-fx--is-visible.reveal-fx--clip-x>*,
.js .reveal-fx--is-visible.reveal-fx--clip-y>* {
 -webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
 clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
 opacity:1
}
html:not([data-theme=dark]) .dark\:display,
html[data-theme=dark] .light\:display {
 display:none
}
.ios-pivot {
 align-items:center;
 -webkit-backdrop-filter:blur(10px);
 backdrop-filter:blur(10px);
 background-color:hsla(var(--color-bg-dark-hsl),.9);
 display:flex;
 height:100%;
 justify-content:center;
 left:0;
 position:fixed;
 top:0;
 width:100%;
 z-index:var(--z-index-overlay)
}
.ios-pivot--is-hidden {
 display:none
}
.ios-pivot__content {
 background-color:var(--color-bg-light);
 border-radius:var(--radius-md);
 box-shadow:var(--inner-glow),var(--shadow-sm);
 max-width:420px;
 padding:var(--space-md)
}
.ios-pivot__cta {
 text-align:center
}
.ios-pivot__cta .btn {
 margin-bottom:var(--space-sm)
}
.links-group,
.text-component .links-group {
 display:flex;
 list-style:none;
 padding:0
}
.links-group__link,
.text-component .links-group__link:not(.link) {
 background-image:none;
 border:1px solid var(--color-contrast-lower);
 color:var(--color-contrast-higher);
 margin-left:-1px;
 padding:var(--space-3xs) var(--space-2xs);
 text-decoration:none;
 transition:.2s
}
.links-group__link:hover {
 background-color:hsla(var(--color-contrast-lower-hsl),.5)
}
.links-group__item:first-child .links-group__link {
 border-radius:var(--radius-md) 0 0 var(--radius-md)
}
.links-group__item:last-child .links-group__link {
 border-radius:0 var(--radius-md) var(--radius-md) 0
}
.links-group__link--selected,
.text-component .links-group__link--selected:not(.link) {
 background-color:var(--color-contrast-higher);
 border-color:var(--color-contrast-higher);
 box-shadow:var(--shadow-xs);
 color:var(--color-bg)
}
.b-steps {
 display:flex
}
.b-steps__item {
 align-items:center;
 display:flex;
 font-size:var(--text-sm)
}
.b-steps__item:not(:last-child):after {
 background-color:var(--color-contrast-lower);
 content:"";
 display:block;
 height:8px;
 margin-left:var(--space-xs);
 margin-right:var(--space-xs);
 -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='m2.5 7 3-3-3-3' fill='none' stroke='%23322f36' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
 mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='m2.5 7 3-3-3-3' fill='none' stroke='%23322f36' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
 width:8px
}
.b-steps__item--current {
 color:var(--color-primary)
}
:root {
 --pre-header-banner-height:36px
}
.pre-header-banner {
 align-items:center;
 background:linear-gradient(to right,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2),var(--gradient-primary-stop-3));
 color:var(--color-bg);
 display:flex;
 font-size:var(--text-sm);
 height:var(--pre-header-banner-height);
 justify-content:center;
 padding:0 var(--space-2xs);
 text-decoration:none;
 transition:.2s
}
.pre-header-banner:hover {
 opacity:.9
}
.pre-header-banner:focus-visible {
 outline:none;
 text-decoration:underline
}
.user-logged-in.user-pro .pre-header-banner {
 display:none
}
:root {
 --carousel-grid-gap:var(--space-xs);
 --carousel-item-auto-size:260px;
 --carousel-transition-duration:0.5s
}
.carousel {
 position:relative
}
.carousel__list {
 display:flex;
 flex-wrap:nowrap;
 will-change:transform
}
.carousel__item {
 flex-shrink:0;
 margin-bottom:var(--carousel-grid-gap);
 margin-right:var(--carousel-grid-gap);
 width:var(--carousel-item-auto-size)
}
.js .carousel__list--animating {
 transition-duration:var(--carousel-transition-duration);
 transition-property:transform;
 transition-timing-function:var(--ease-out)
}
.js .carousel__item {
 margin-bottom:0;
 opacity:0
}
.js .carousel--loaded .carousel__item {
 opacity:1
}
.js .carousel:not(.carousel--is-dragging) .carousel__list:not(.carousel__list--animating) .carousel__item[tabindex="-1"]>* {
 visibility:hidden
}
.js .carousel[data-drag=on] .carousel__item {
 -webkit-user-select:none;
 user-select:none
}
.js .carousel[data-drag=on] .carousel__item img {
 pointer-events:none
}
.carousel__control {
 --size:40px;
 background-color:var(--color-bg-light);
 border-radius:50%;
 box-shadow:var(--inner-glow),var(--shadow-sm);
 display:flex;
 height:40px;
 transition:.2s;
 width:40px;
 z-index:1
}
.carousel__control:active {
 transform:translateY(1px)
}
.carousel__control:hover {
 background-color:var(--color-bg-lighter);
 box-shadow:var(--inner-glow),var(--shadow-md);
 color:var(--color-primary)
}
.carousel__control[disabled] {
 box-shadow:none;
 opacity:.5;
 pointer-events:none
}
.carousel__control .icon {
 --size:20px;
 display:block;
 margin:auto
}
.carousel__navigation {
 align-items:center;
 display:grid;
 gap:var(--space-xs);
 grid-template-columns:repeat(auto-fit,10px);
 justify-content:center;
 margin-top:var(--space-sm);
 width:100%
}
.carousel__nav-item {
 display:inline-block;
 margin:0 var(--space-3xs)
}
@supports (grid-area:auto) {
 .carousel__nav-item {
  margin:0
 }
}
.carousel__nav-item button {
 background-color:var(--color-contrast-high);
 border-radius:50%;
 cursor:pointer;
 display:block;
 font-size:10px;
 height:1em;
 opacity:.4;
 position:relative;
 transition:background .3s;
 width:1em
}
.carousel__nav-item button:before {
 border:1px solid var(--color-contrast-high);
 border-radius:inherit;
 content:"";
 font-size:16px;
 height:1em;
 left:calc(50% - .5em);
 opacity:0;
 position:absolute;
 top:calc(50% - .5em);
 transform:scale(0);
 transition:3s;
 width:1em
}
.carousel__nav-item button:focus {
 outline:none
}
.carousel__nav-item button:focus:before {
 opacity:1;
 transform:scale(1)
}
.carousel__nav-item--selected button {
 opacity:1
}
.carousel__navigation--pagination {
 grid-template-columns:repeat(auto-fit,24px)
}
.carousel__navigation--pagination .carousel__nav-item button {
 border-radius:var(--radius-md);
 color:var(--color-bg);
 font-size:12px;
 height:24px;
 line-height:24px;
 text-align:center;
 width:24px
}
.carousel__navigation--pagination .carousel__nav-item button:focus {
 outline:1px solid var(--color-primary);
 outline-offset:2px
}
html:not(.js) .carousel__list {
 overflow:auto
}
.carousel--hide-controls .carousel__control,
.carousel--hide-controls .carousel__navigation {
 display:none
}
.adv-select-popover.popover {
 --popover-width:250px;
 --popover-control-gap:4px;
 --popover-viewport-gap:20px;
 --popover-transition-duration:0.2s
}
@media (min-width:64rem) {
 .adv-select-popover.popover {
  --popover-width:320px
 }
}
.adv-select-popover__optgroup:not(:first-of-type) {
 padding-top:var(--space-2xs)
}
.adv-select-popover__optgroup:not(:last-of-type) {
 border-bottom:1px solid hsla(var(--color-contrast-higher-hsl),.1);
 padding-bottom:var(--space-2xs)
}
.adv-select-popover__check {
 display:none
}
.adv-select-popover__option {
 cursor:pointer;
 position:relative;
 transition:.2s
}
.adv-select-popover__option:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.075)
}
.adv-select-popover__option:focus {
 background-color:hsla(var(--color-primary-hsl),.15);
 outline:none
}
.adv-select-popover__option[aria-selected=true] {
 background-color:var(--color-primary);
 color:var(--color-white)
}
.adv-select-popover__option[aria-selected=true] .adv-select-popover__check {
 display:block
}
.adv-select-popover__option[aria-selected=true]:focus {
 box-shadow:inset 0 0 0 2px var(--color-primary-dark)
}
:root {
 --autocomplete-dropdown-vertical-gap:4px;
 --autocomplete-dropdown-max-height:150px;
 --autocomplete-dropdown-scrollbar-width:6px
}
.autocomplete__loader {
 --circle-loader-v1-size:1em;
 --circle-loader-v1-stroke-width:2px
}
.autocomplete:not(.autocomplete--searching) .autocomplete__loader {
 display:none
}
.autocomplete__results {
 background-color:var(--color-bg-light);
 border-radius:var(--radius-md);
 box-shadow:var(--inner-glow),var(--shadow-md);
 left:0;
 opacity:0;
 overflow:hidden;
 position:absolute;
 top:calc(100% + var(--autocomplete-dropdown-vertical-gap));
 transform:translateY(4px);
 transition:opacity .3s,visibility 0s .3s,transform .3s var(--ease-in);
 visibility:hidden;
 width:100%;
 z-index:var(--z-index-popover,5)
}
.autocomplete--results-visible .autocomplete__results {
 opacity:1;
 transform:translateY(0);
 transition:opacity .3s,transform .3s var(--ease-out);
 visibility:visible
}
.autocomplete__list {
 -webkit-overflow-scrolling:touch;
 max-height:var(--autocomplete-dropdown-max-height);
 overflow:auto
}
.autocomplete__list::-webkit-scrollbar {
 width:var(--autocomplete-dropdown-scrollbar-width)
}
.autocomplete__list::-webkit-scrollbar-track {
 background-color:hsla(var(--color-contrast-higher-hsl),.08);
 border-radius:0
}
.autocomplete__list::-webkit-scrollbar-thumb {
 background-color:hsla(var(--color-contrast-higher-hsl),.12);
 border-radius:0
}
.autocomplete__list::-webkit-scrollbar-thumb:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.2)
}
.autocomplete__item {
 cursor:pointer;
 transition:.2s
}
.autocomplete__item:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.075)
}
.autocomplete__item:focus {
 background-color:hsla(var(--color-primary-hsl),.15);
 outline:none
}
.app-menu {
 right:var(--space-xs);
 width:252px
}
.app-menu--state-b .app-menu__state-a,
.app-menu__state-b {
 display:none
}
.app-menu--state-b .app-menu__state-b {
 display:block
}
.app-menu__color-item--is-hidden {
 display:none
}
.app-menu__color-preview {
 border-radius:50%;
 box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl),.15);
 height:18px;
 position:relative;
 width:18px
}
.app-menu__color-preview:hover {
 box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl),.25)
}
.app-menu__color-preview:before {
 background-image:url(../../assets/img/bg-transparent-x.svg);
 border-radius:inherit;
 content:"";
 height:100%;
 left:0;
 position:absolute;
 top:0;
 width:100%;
 z-index:-1
}
.app-menu__color-preview:hover+.app-menu__color-tooltip {
 display:block
}
.app-menu__color-preview--selected {
 box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl),.15),0 0 0 2px var(--color-bg-light),0 0 0 3px var(--color-contrast-high)
}
.app-menu__color-preview--selected:hover {
 box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl),.25),0 0 0 2px var(--color-bg-light),0 0 0 3px var(--color-contrast-high)
}
.app-menu__color-preview--inherit:before,
.app-menu__color-preview--not-specified {
 content:""
}
.app-menu__color-preview--not-specified:before {
 background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2393989d' stroke-miterlimit='10'%3E%3Cpath d='m6 6 8 8M14 6l-8 8'/%3E%3C/svg%3E") no-repeat 50%
}
.app-menu__color-preview--inherit:before {
 background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2393989d' stroke-miterlimit='10'%3E%3Cpath d='M10 5v10M6 11l4 4 4-4'/%3E%3C/svg%3E") no-repeat 50%
}
.app-menu__color-tooltip {
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 background-color:hsla(var(--color-contrast-higher-hsl),.9);
 border-radius:var(--radius-md);
 bottom:-2px;
 color:var(--color-bg);
 display:none;
 font-size:var(--text-2xs);
 left:50%;
 padding:4px 6px;
 position:absolute;
 transform:translateX(-50%) translateY(100%);
 white-space:nowrap;
 z-index:2
}
.app-menu__color-tooltip--right {
 left:auto;
 right:0;
 transform:translateY(100%)
}
:root {
 --slideshow-pm-item-width:80%;
 --slideshow-pm-item-gap:var(--space-sm)
}
@media (min-width:64rem) {
 :root {
  --slideshow-pm-item-width:66%
 }
}
.slideshow-pm {
 overflow:hidden;
 padding:var(--space-md) 0
}
.slideshow-pm__list {
 align-items:center;
 display:flex;
 flex-wrap:nowrap;
 overflow:auto
}
.slideshow-pm__item {
 align-items:center;
 background-position:50%;
 background-repeat:no-repeat;
 background-size:cover;
 display:inline-flex;
 flex-shrink:0;
 justify-content:center;
 width:var(--slideshow-pm-item-width)
}
.slideshow-pm__item:not(:last-of-type) {
 margin-right:var(--slideshow-pm-item-gap)
}
.slideshow-pm__item:focus {
 outline:none
}
@media (min-width:64rem) {
 .slideshow-pm__item {
  min-height:400px
 }
}
@media (min-width:80rem) {
 .slideshow-pm__item {
  min-height:480px
 }
}
.slideshow-pm__item--media {
 height:auto!important
}
.slideshow-pm__item--media img,
.slideshow-pm__item--media svg,
.slideshow-pm__item--media video {
 display:block
}
.slideshow-pm {
 opacity:0
}
.slideshow-pm--js-loaded {
 opacity:1
}
.slideshow-pm__content {
 position:relative
}
.slideshow-pm__list {
 overflow:visible
}
.slideshow-pm__list--has-transition {
 transition:transform .4s;
 will-change:transform
}
.slideshow-pm__list--has-transition .slideshow-pm__item {
 transition:all .3s;
 will-change:transform,opacity
}
.slideshow-pm__item {
 opacity:.4;
 transform:scale(.95)
}
.slideshow-pm__item--selected {
 opacity:1;
 transform:scale(1)
}
.slideshow-pm[data-swipe=on] .slideshow-pm__content {
 -webkit-user-select:none;
 user-select:none
}
.slideshow-pm[data-swipe=on] .slideshow-pm__content img {
 pointer-events:none
}
.slideshow-pm[data-swipe=on] .slideshow-pm__control,
.slideshow-pm__control {
 display:none
}
.slideshow-pm__control {
 display:block;
 opacity:0;
 position:absolute;
 top:50%;
 transition:opacity .2s,visibility 0s .2s;
 visibility:hidden;
 z-index:4
}
.slideshow-pm__control:first-of-type {
 left:calc((100% - var(--slideshow-pm-item-width))*.25);
 transform:translateY(-50%) translateX(-50%)
}
.slideshow-pm__control:last-of-type {
 right:calc((100% - var(--slideshow-pm-item-width))*.25);
 transform:translateY(-50%) translateX(50%)
}
.slideshow-pm__control-btn {
 border-radius:50%;
 cursor:pointer;
 height:48px;
 transition:transform .2s;
 width:48px;
 will-change:transform
}
.slideshow-pm__control-btn:active {
 transform:translateY(2px)
}
.slideshow-pm__control-btn .icon {
 height:48px;
 width:48px
}
.slideshow-pm__control--active {
 opacity:1;
 transition:opacity .2s;
 visibility:visible
}
.slideshow-pm__loader {
 transition:stroke-dashoffset 0s linear
}
.slideshow-pm__loader--full {
 stroke-dashoffset:0
}
@media (min-width:64rem) {
 .slideshow-pm[data-swipe=on] .slideshow-pm__control {
  display:block
 }
}
.slideshow-pm__navigation {
 align-items:center;
 display:flex;
 justify-content:center;
 margin-top:calc(var(--space-md) + 30px)
}
.slideshow-pm__nav-item {
 display:inline-block;
 margin:0 var(--space-3xs)
}
.slideshow-pm__nav-item button {
 background-color:currentColor;
 border-radius:50%;
 color:var(--color-contrast-high);
 cursor:pointer;
 display:block;
 font-size:8px;
 height:1em;
 opacity:.25;
 position:relative;
 transition:background .3s;
 width:1em
}
.slideshow-pm__nav-item button:before {
 border:1px solid var(--color-contrast-high);
 border-radius:inherit;
 content:"";
 font-size:14px;
 height:1em;
 left:calc(50% - .5em);
 opacity:0;
 position:absolute;
 top:calc(50% - .5em);
 transform:scale(0);
 transition:.3s;
 width:1em
}
.slideshow-pm__nav-item button:focus {
 outline:none
}
.slideshow-pm__nav-item button:focus:before {
 opacity:1;
 transform:scale(1)
}
.slideshow-pm__nav-item--selected button {
 opacity:1
}
.carousel-v3 {
 --carousel-grid-gap:40px;
 --carousel-item-auto-size:620px;
 --carousel-transition-duration:0.5s
}
.carousel-v3__control {
 --size:50px;
 align-items:center;
 -webkit-backdrop-filter:blur(10px);
 backdrop-filter:blur(10px);
 background-color:hsla(var(--color-black-hsl),.7);
 cursor:pointer;
 display:flex;
 height:var(--size);
 justify-content:center;
 pointer-events:auto;
 transition:.2s;
 width:var(--size)
}
.carousel-v3__control:hover {
 background-color:hsla(var(--color-black-hsl),.9)
}
.carousel-v3__control[disabled] {
 display:none
}
.carousel-v3__control:active {
 transform:translateY(2px)
}
.carousel-v3__control .icon {
 --size:20px;
 color:var(--color-white);
 display:block
}
.ld-switch-btn {
 display:inline-block;
 height:24px;
 overflow:hidden;
 position:relative;
 transition:opacity .2s,color .2s;
 width:24px
}
.ld-switch-btn:hover {
 cursor:pointer;
 opacity:.8
}
.ld-switch-btn:focus {
 outline:none
}
.ld-switch-btn.popover-control--active,
.ld-switch-btn:focus {
 color:var(--color-primary)
}
.ld-switch-btn__icon-wrapper {
 align-items:center;
 display:flex;
 height:100%;
 justify-content:center;
 left:0;
 opacity:0;
 position:absolute;
 top:0;
 transform:translateY(100%) rotate(35deg) scale(.5);
 width:100%
}
.ld-switch-btn__icon-wrapper--in {
 opacity:1;
 transform:translateY(0) rotate(0) scale(1)
}
.ld-switch-btn__icon-wrapper--out {
 opacity:0;
 transform:translateY(-100%) rotate(-35deg) scale(.5)
}
.ld-switch-btn__icon-wrapper--in,
.ld-switch-btn__icon-wrapper--out {
 transition:transform .3s var(--ease-in-out),opacity .3s
}
.ld-switch-btn__icon {
 --size:20px;
 margin:auto
}
.popover.ld-switch-popover {
 --popover-width:250px
}
.ld-switch-popover__option {
 transition:opacity .2s;
 -webkit-user-select:none;
 user-select:none
}
.ld-switch-popover__option:hover {
 cursor:pointer;
 opacity:.85
}
.ld-switch-popover__option:focus {
 outline:none
}
.ld-switch-popover__option:focus figure {
 box-shadow:0 0 0 1px var(--color-bg-light),0 0 0 3px var(--color-contrast-higher)
}
.ld-switch-popover__option[aria-selected=true] {
 color:var(--color-primary)
}
.ld-switch-popover__option[aria-selected=true] figure {
 box-shadow:0 0 0 1px var(--color-bg-light),0 0 0 3px currentColor
}
.adv-search {
 --search-input-btn-width:46px;
 --search-input-icon-size:20px
}
.adv-search__close-btn {
 align-items:center;
 border-radius:50%;
 display:flex;
 height:40px;
 justify-content:center;
 transition:.2s;
 width:40px
}
.adv-search__close-btn:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.1)
}
.adv-search__close-btn .icon {
 --size:20px;
 display:block
}
.adv-search__result-v1 {
 align-items:center;
 background-color:var(--color-bg-light);
 border-radius:var(--radius-md);
 box-shadow:var(--inner-glow),var(--shadow-xs);
 color:var(--color-contrast-higher);
 display:flex;
 font-size:var(--text-sm);
 justify-content:space-between;
 padding:var(--space-2xs);
 text-decoration:none;
 transition:.2s
}
.adv-search__result-v1:hover {
 background-color:var(--color-bg-lighter);
 box-shadow:var(--inner-glow),var(--shadow-sm)
}
.adv-search__result-v1:focus {
 box-shadow:var(--inner-glow),var(--shadow-sm),0 0 0 2px var(--color-primary)
}
.hljs-comment,
.hljs-quote {
 color:var(--color-contrast-low)
}
.hljs-deletion,
.hljs-regexp,
.hljs-selector-id,
.hljs-template-variable,
.hljs-variable {
 color:var(--color-accent)
}
.hljs-built_in,
.hljs-builtin-name,
.hljs-keyword,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-name,
.hljs-number,
.hljs-params,
.hljs-tag,
.hljs-type {
 color:var(--color-contrast-high)
}
.hljs-selector-class,
.hljs-selector-tag,
.hljs-string {
 color:var(--color-secondary)
}
.hljs,
.hljs-addition,
.hljs-attr,
.hljs-attribute,
.hljs-bullet,
.hljs-section,
.hljs-symbol,
.hljs-title,
.text-component .hljs {
 color:var(--color-contrast-high)
}
.hljs,
.text-component .hljs {
 background:var(--color-bg-dark);
 display:block;
 font-family:var(--font-mono);
 font-size:var(--text-sm);
 line-height:1.4;
 overflow-wrap:anywhere;
 overflow-x:auto;
 padding:var(--space-sm);
 white-space:pre-wrap
}
@media (min-width:64rem) {
 .hljs,
 .text-component .hljs {
  font-size:.9375rem
 }
}
:is(.hljs,
.text-component .hljs) ::selection,
:is(.hljs,
.text-component .hljs)::selection {
 background:var(--color-secondary);
 color:var(--color-white)
}
.text-component .hljs {
 border-radius:var(--radius-lg)
}
.hljs-emphasis {
 font-style:italic
}
.hljs-strong {
 font-weight:700
}
.copy-to-clip {
 align-items:center;
 -webkit-backdrop-filter:blur(10px);
 backdrop-filter:blur(10px);
 background-color:hsla(var(--color-contrast-higher-hsl),0);
 border-radius:50%;
 cursor:pointer;
 display:flex;
 height:32px;
 justify-content:center;
 position:absolute;
 right:.35em;
 top:.35em;
 transition:transform .2s,background .2s;
 width:32px;
 will-change:transform
}
.copy-to-clip:hover {
 background-color:hsla(var(--color-contrast-higher-hsl),.1)
}
.copy-to-clip:active {
 transform:translateY(2px)
}
.copy-to-clip:focus {
 outline:2px solid var(--color-contrast-high);
 outline-offset:2px
}
.copy-to-clip__icon-check {
 stroke-dashoffset:8.49;
 stroke-dasharray:8.49 8.49;
 transition:stroke-dashoffset .3s
}
.copy-to-clip--copied .copy-to-clip__icon-check {
 stroke-dashoffset:0
}
.sr-only {
 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
}
.flex,
.grid,
.inline-flex,
[class*=" flex\@"],
[class*=" inline-flex\@"],
[class^=flex\@],
[class^=inline-flex\@] {
 --gap:0px;
 --gap-x:var(--gap);
 --gap-y:var(--gap);
 gap:var(--gap-y) var(--gap-x)
}
:where(.grid,
.flex,
.inline-flex,
[class^=flex\@],
[class*=" flex\@"],
[class^=inline-flex\@],
[class*=" inline-flex\@"])>* {
 --sub-gap:0px;
 --sub-gap-x:var(--sub-gap);
 --sub-gap-y:var(--sub-gap)
}
.grid {
 --grid-columns:12;
 display:flex;
 flex-wrap:wrap
}
.grid>* {
 min-width:0;
 width:100%
}
.grid-col-2 {
 --grid-columns:2
}
.grid-col-3 {
 --grid-columns:3
}
.grid-col-4 {
 --grid-columns:4
}
.grid-col-5 {
 --grid-columns:5
}
.col-1,
.col-10,
.col-12,
.col-2,
.col-3,
.col-4,
.col-6,
.col-8 {
 flex:initial;
 width:calc((100% - (var(--grid-columns) - 1)*var(--sub-gap-x))*var(--span)/var(--grid-columns) + (var(--span) - 1)*var(--sub-gap-x))
}
.col-1 {
 --span:1
}
.col-2 {
 --span:2
}
.col-3 {
 --span:3
}
.col-4 {
 --span:4
}
.col-6 {
 --span:6
}
.col-8 {
 --span:8
}
.col-10 {
 --span:10
}
.col-12 {
 --span:12
}
.col {
 flex:1 1 0;
 width:auto
}
.col-content {
 flex:0 1 auto;
 width:auto
}
.offset-4 {
 margin-left:calc((100% - (var(--grid-columns) - 1)*var(--sub-gap-x))*var(--offset)/var(--grid-columns) + var(--offset)*var(--sub-gap-x))
}
.offset-4 {
 --offset:4
}
.gap-4xs {
 --gap-x:var(--space-4xs);
 --gap-y:var(--space-4xs)
}
.gap-4xs>* {
 --sub-gap-x:var(--space-4xs);
 --sub-gap-y:var(--space-4xs)
}
.gap-3xs {
 --gap-x:var(--space-3xs);
 --gap-y:var(--space-3xs)
}
.gap-3xs>* {
 --sub-gap-x:var(--space-3xs);
 --sub-gap-y:var(--space-3xs)
}
.gap-2xs {
 --gap-x:var(--space-2xs);
 --gap-y:var(--space-2xs)
}
.gap-2xs>* {
 --sub-gap-x:var(--space-2xs);
 --sub-gap-y:var(--space-2xs)
}
.gap-xs {
 --gap-x:var(--space-xs);
 --gap-y:var(--space-xs)
}
.gap-xs>* {
 --sub-gap-x:var(--space-xs);
 --sub-gap-y:var(--space-xs)
}
.gap-sm {
 --gap-x:var(--space-sm);
 --gap-y:var(--space-sm)
}
.gap-sm>* {
 --sub-gap-x:var(--space-sm);
 --sub-gap-y:var(--space-sm)
}
.gap-md {
 --gap-x:var(--space-md);
 --gap-y:var(--space-md)
}
.gap-md>* {
 --sub-gap-x:var(--space-md);
 --sub-gap-y:var(--space-md)
}
.gap-lg {
 --gap-x:var(--space-lg);
 --gap-y:var(--space-lg)
}
.gap-lg>* {
 --sub-gap-x:var(--space-lg);
 --sub-gap-y:var(--space-lg)
}
.gap-x-3xs {
 --gap-x:var(--space-3xs)
}
.gap-x-3xs>* {
 --sub-gap-x:var(--space-3xs)
}
.gap-x-sm {
 --gap-x:var(--space-sm)
}
.gap-x-sm>* {
 --sub-gap-x:var(--space-sm)
}
.gap-y-3xs {
 --gap-y:var(--space-3xs)
}
.gap-y-3xs>* {
 --sub-gap-y:var(--space-3xs)
}
.gap-y-2xs {
 --gap-y:var(--space-2xs)
}
.gap-y-2xs>* {
 --sub-gap-y:var(--space-2xs)
}
.gap-y-xs {
 --gap-y:var(--space-xs)
}
.gap-y-xs>* {
 --sub-gap-y:var(--space-xs)
}
.gap-y-sm {
 --gap-y:var(--space-sm)
}
.gap-y-sm>* {
 --sub-gap-y:var(--space-sm)
}
.gap-y-md {
 --gap-y:var(--space-md)
}
.gap-y-md>* {
 --sub-gap-y:var(--space-md)
}
.gap-y-lg {
 --gap-y:var(--space-lg)
}
.gap-y-lg>* {
 --sub-gap-y:var(--space-lg)
}
.gap-y-xl {
 --gap-y:var(--space-xl)
}
.gap-y-xl>* {
 --sub-gap-y:var(--space-xl)
}
.gap-y-2xl {
 --gap-y:var(--space-2xl)
}
.gap-y-2xl>* {
 --sub-gap-y:var(--space-2xl)
}
.flex {
 display:flex
}
.inline-flex {
 display:inline-flex
}
.flex-wrap {
 flex-wrap:wrap
}
.flex-column {
 flex-direction:column
}
.flex-center {
 align-items:center;
 justify-content:center
}
.flex-grow {
 flex-grow:1
}
.flex-shrink {
 flex-shrink:1
}
.flex-shrink-0 {
 flex-shrink:0
}
.justify-end {
 justify-content:flex-end
}
.justify-center {
 justify-content:center
}
.justify-between {
 justify-content:space-between
}
.items-center {
 align-items:center
}
.items-start {
 align-items:flex-start
}
.items-end {
 align-items:flex-end
}
.items-baseline {
 align-items:baseline
}
.order-1 {
 order:1
}
.order-2 {
 order:2
}
.order-3 {
 order:3
}
.aspect-ratio-16\:9 {
 aspect-ratio:16/9
}
.aspect-ratio-4\:3 {
 aspect-ratio:4/3
}
.aspect-ratio-1\:1 {
 aspect-ratio:1/1
}
:where([class^=media-wrapper],
[class*=" media-wrapper"]) {
 height:0;
 position:relative
}
[class*=" media-wrapper"]>*,
[class^=media-wrapper]>* {
 height:100%;
 left:0;
 position:absolute;
 top:0;
 width:100%
}
[class*=" media-wrapper"]>:not(iframe),
[class^=media-wrapper]>:not(iframe) {
 -o-object-fit:cover;
 object-fit:cover
}
.media-wrapper-16\:9 {
 padding-bottom:56.25%
}
.media-wrapper-3\:2 {
 padding-bottom:66.67%
}
.block {
 display:block
}
.inline-block {
 display:inline-block
}
.inline {
 display:inline
}
.contents {
 display:contents
}
.hide,
.is-hidden {
 display:none!important
}
.space-4xs {
 --space-unit:0.25rem
}
.space-3xs {
 --space-unit:0.4rem
}
.space-xs {
 --space-unit:0.7rem
}
.space-sm {
 --space-unit:0.85rem
}
.space-md {
 --space-unit:1.15rem
}
.margin-md {
 margin:var(--space-md)
}
.margin-top-4xs {
 margin-top:var(--space-4xs)
}
.margin-top-3xs {
 margin-top:var(--space-3xs)
}
.margin-top-2xs {
 margin-top:var(--space-2xs)
}
.margin-top-xs {
 margin-top:var(--space-xs)
}
.margin-top-sm {
 margin-top:var(--space-sm)
}
.margin-top-md {
 margin-top:var(--space-md)
}
.margin-top-lg {
 margin-top:var(--space-lg)
}
.margin-top-xl {
 margin-top:var(--space-xl)
}
.margin-top-2xl {
 margin-top:var(--space-2xl)
}
.margin-top-auto {
 margin-top:auto
}
.margin-top-0 {
 margin-top:0
}
.margin-top-header {
 margin-top:var(--main-header-height)
}
.margin-bottom-4xs {
 margin-bottom:var(--space-4xs)
}
.margin-bottom-3xs {
 margin-bottom:var(--space-3xs)
}
.margin-bottom-2xs {
 margin-bottom:var(--space-2xs)
}
.margin-bottom-xs {
 margin-bottom:var(--space-xs)
}
.margin-bottom-sm {
 margin-bottom:var(--space-sm)
}
.margin-bottom-md {
 margin-bottom:var(--space-md)
}
.margin-bottom-lg {
 margin-bottom:var(--space-lg)
}
.margin-bottom-xl {
 margin-bottom:var(--space-xl)
}
.margin-bottom-2xl {
 margin-bottom:var(--space-2xl)
}
.margin-right-4xs {
 margin-right:var(--space-4xs)
}
.margin-right-3xs {
 margin-right:var(--space-3xs)
}
.margin-right-2xs {
 margin-right:var(--space-2xs)
}
.margin-right-xs {
 margin-right:var(--space-xs)
}
.margin-left-4xs {
 margin-left:var(--space-4xs)
}
.margin-left-3xs {
 margin-left:var(--space-3xs)
}
.margin-left-2xs {
 margin-left:var(--space-2xs)
}
.margin-left-sm {
 margin-left:var(--space-sm)
}
.margin-left-md {
 margin-left:var(--space-md)
}
.margin-left-auto {
 margin-left:auto
}
.margin-x-3xs {
 margin-left:var(--space-3xs);
 margin-right:var(--space-3xs)
}
.margin-x-2xs {
 margin-left:var(--space-2xs);
 margin-right:var(--space-2xs)
}
.margin-x-auto {
 margin-left:auto;
 margin-right:auto
}
.margin-y-sm {
 margin-bottom:var(--space-sm);
 margin-top:var(--space-sm)
}
.margin-y-md {
 margin-bottom:var(--space-md);
 margin-top:var(--space-md)
}
.margin-y-lg {
 margin-bottom:var(--space-lg);
 margin-top:var(--space-lg)
}
.padding-3xs {
 padding:var(--space-3xs)
}
.padding-2xs {
 padding:var(--space-2xs)
}
.padding-xs {
 padding:var(--space-xs)
}
.padding-sm {
 padding:var(--space-sm)
}
.padding-md {
 padding:var(--space-md)
}
.padding-lg {
 padding:var(--space-lg)
}
.padding-top-4xs {
 padding-top:var(--space-4xs)
}
.padding-top-3xs {
 padding-top:var(--space-3xs)
}
.padding-top-xs {
 padding-top:var(--space-xs)
}
.padding-top-sm {
 padding-top:var(--space-sm)
}
.padding-top-md {
 padding-top:var(--space-md)
}
.padding-top-lg {
 padding-top:var(--space-lg)
}
.padding-top-xl {
 padding-top:var(--space-xl)
}
.padding-top-2xl {
 padding-top:var(--space-2xl)
}
.padding-top-header {
 padding-top:var(--main-header-height)
}
.padding-bottom-3xs {
 padding-bottom:var(--space-3xs)
}
.padding-bottom-xs {
 padding-bottom:var(--space-xs)
}
.padding-bottom-sm {
 padding-bottom:var(--space-sm)
}
.padding-bottom-md {
 padding-bottom:var(--space-md)
}
.padding-bottom-lg {
 padding-bottom:var(--space-lg)
}
.padding-bottom-xl {
 padding-bottom:var(--space-xl)
}
.padding-bottom-2xl {
 padding-bottom:var(--space-2xl)
}
.padding-bottom-3xl {
 padding-bottom:var(--space-3xl)
}
.padding-right-3xs {
 padding-right:var(--space-3xs)
}
.padding-right-sm {
 padding-right:var(--space-sm)
}
.padding-left-4xs {
 padding-left:var(--space-4xs)
}
.padding-left-3xs {
 padding-left:var(--space-3xs)
}
.padding-left-xs {
 padding-left:var(--space-xs)
}
.padding-x-4xs {
 padding-left:var(--space-4xs);
 padding-right:var(--space-4xs)
}
.padding-x-3xs {
 padding-left:var(--space-3xs);
 padding-right:var(--space-3xs)
}
.padding-x-2xs {
 padding-left:var(--space-2xs);
 padding-right:var(--space-2xs)
}
.padding-x-xs {
 padding-left:var(--space-xs);
 padding-right:var(--space-xs)
}
.padding-x-sm {
 padding-left:var(--space-sm);
 padding-right:var(--space-sm)
}
.padding-x-md {
 padding-left:var(--space-md);
 padding-right:var(--space-md)
}
.padding-y-4xs {
 padding-bottom:var(--space-4xs);
 padding-top:var(--space-4xs)
}
.padding-y-3xs {
 padding-bottom:var(--space-3xs);
 padding-top:var(--space-3xs)
}
.padding-y-2xs {
 padding-bottom:var(--space-2xs);
 padding-top:var(--space-2xs)
}
.padding-y-xs {
 padding-bottom:var(--space-xs);
 padding-top:var(--space-xs)
}
.padding-y-sm {
 padding-bottom:var(--space-sm);
 padding-top:var(--space-sm)
}
.padding-y-md {
 padding-bottom:var(--space-md);
 padding-top:var(--space-md)
}
.padding-y-lg {
 padding-bottom:var(--space-lg);
 padding-top:var(--space-lg)
}
.padding-y-xl {
 padding-bottom:var(--space-xl);
 padding-top:var(--space-xl)
}
.padding-y-2xl {
 padding-bottom:var(--space-2xl);
 padding-top:var(--space-2xl)
}
.padding-y-3xl {
 padding-bottom:var(--space-3xl);
 padding-top:var(--space-3xl)
}
.align-super {
 vertical-align:super
}
.align-top {
 vertical-align:top
}
.align-middle {
 vertical-align:middle
}
.align-bottom {
 vertical-align:bottom
}
.text-truncate,
.truncate {
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap
}
.break-word {
 min-width:0;
 overflow-wrap:break-word
}
.text-3xs {
 font-size:var(--text-3xs)
}
.text-2xs {
 font-size:var(--text-2xs)
}
.text-xs {
 font-size:var(--text-xs)
}
.text-sm {
 font-size:var(--text-sm)
}
.text-base {
 font-size:var(--text-base)
}
.text-md {
 font-size:var(--text-md)
}
.text-lg {
 font-size:var(--text-lg)
}
.text-xl {
 font-size:var(--text-xl)
}
.text-3xl {
 font-size:var(--text-3xl)
}
.text-4xl {
 font-size:var(--text-4xl)
}
.text-uppercase {
 text-transform:uppercase
}
.letter-spacing-md {
 letter-spacing:.05em
}
.letter-spacing-lg {
 letter-spacing:.1em
}
.font-medium {
 font-weight:500
}
.font-semibold {
 font-weight:600
}
.font-bold {
 font-weight:700
}
.font-smooth {
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale
}
.font-primary {
 font-family:var(--font-primary)
}
.font-secondary {
 font-family:var(--font-secondary)
}
.font-mono {
 font-family:var(--font-mono)
}
.font-system-ui {
 font-family:var(--font-system-ui)
}
.text-center {
 text-align:center
}
.text-left {
 text-align:left
}
.text-right {
 text-align:right
}
.text-line-through {
 text-decoration:line-through
}
.text-underline {
 text-decoration:underline
}
.text-decoration-none {
 text-decoration:none
}
.line-height-xs {
 --heading-line-height:1;
 --body-line-height:1.1
}
.line-height-xs:not(.text-component) {
 line-height:1.1
}
.line-height-md {
 --heading-line-height:1.15;
 --body-line-height:1.4
}
.line-height-md:not(.text-component) {
 line-height:1.4
}
.line-height-lg {
 --heading-line-height:1.22;
 --body-line-height:1.58
}
.line-height-lg:not(.text-component) {
 line-height:1.58
}
.line-height-1 {
 line-height:1
}
.text-nowrap,
.ws-nowrap {
 white-space:nowrap
}
.cursor-pointer {
 cursor:pointer
}
.cursor-default {
 cursor:default
}
.pointer-events-auto {
 pointer-events:auto
}
.pointer-events-none {
 pointer-events:none
}
.user-select-none {
 -webkit-user-select:none;
 user-select:none
}
[class*=" color-"],
[class^=color-] {
 --color-alpha:1
}
.color-inherit {
 color:inherit
}
.color-bg {
 color:hsla(var(--color-bg-hsl),var(--color-alpha,1))
}
.color-contrast-lower {
 color:hsla(var(--color-contrast-lower-hsl),var(--color-alpha,1))
}
.color-contrast-low {
 color:hsla(var(--color-contrast-low-hsl),var(--color-alpha,1))
}
.color-contrast-medium {
 color:hsla(var(--color-contrast-medium-hsl),var(--color-alpha,1))
}
.color-contrast-high {
 color:hsla(var(--color-contrast-high-hsl),var(--color-alpha,1))
}
.color-contrast-higher {
 color:hsla(var(--color-contrast-higher-hsl),var(--color-alpha,1))
}
.color-primary {
 color:hsla(var(--color-primary-hsl),var(--color-alpha,1))
}
.color-secondary {
 color:hsla(var(--color-secondary-hsl),var(--color-alpha,1))
}
.color-accent {
 color:hsla(var(--color-accent-hsl),var(--color-alpha,1))
}
.color-success {
 color:hsla(var(--color-success-hsl),var(--color-alpha,1))
}
.color-warning-dark {
 color:hsla(var(--color-warning-dark-hsl),var(--color-alpha,1))
}
.color-warning {
 color:hsla(var(--color-warning-hsl),var(--color-alpha,1))
}
.color-error {
 color:hsla(var(--color-error-hsl),var(--color-alpha,1))
}
.color-white {
 color:hsla(var(--color-white-hsl),var(--color-alpha,1))
}
.color-black {
 color:hsla(var(--color-black-hsl),var(--color-alpha,1))
}
.color-opacity-50\% {
 --color-alpha:0.5
}
.color-opacity-60\% {
 --color-alpha:0.6
}
.color-opacity-90\% {
 --color-alpha:0.9
}
[class*=" color-gradient"],
[class^=color-gradient] {
 -webkit-background-clip:text;
 background-clip:text;
 color:transparent!important
}
:root {
 --size-8xs:0.25rem;
 --size-7xs:0.375rem;
 --size-6xs:0.5rem;
 --size-5xs:0.625rem;
 --size-4xs:0.75rem;
 --size-3xs:1rem;
 --size-2xs:1.25rem;
 --size-xs:1.5rem;
 --size-sm:1.75rem;
 --size-md:2rem;
 --size-lg:2.5rem;
 --size-xl:3rem;
 --size-2xl:4rem;
 --size-3xl:6rem;
 --size-4xl:8rem;
 --size-5xl:12rem
}
[class*=" size-"],
[class^=size-] {
 height:var(--height);
 width:var(--width)
}
[class*=" size-"].btn,
[class*=" size-"].form-control:not(textarea),
[class^=size-].btn,
[class^=size-].form-control:not(textarea) {
 line-height:var(--height);
 padding-bottom:0;
 padding-top:0
}
[class*=" size-"].btn:not(.justify-between,
.justify-start,
.justify-end),
[class*=" width-"].btn:not(.justify-between,
.justify-start,
.justify-end),
[class^=size-].btn:not(.justify-between,
.justify-start,
.justify-end),
[class^=width-].btn:not(.justify-between,
.justify-start,
.justify-end) {
 padding-left:0;
 padding-right:0
}
[class*=" width-"],
[class^=width-] {
 width:var(--width)
}
[class*=" height-"],
[class^=height-] {
 height:var(--height)
}
[class*=" height-"].btn,
[class*=" height-"].form-control:not(textarea),
[class^=height-].btn,
[class^=height-].form-control:not(textarea) {
 line-height:var(--height);
 padding-bottom:0;
 padding-top:0
}
.size-6xs {
 --width:var(--size-6xs)
}
.size-6xs {
 --height:var(--size-6xs)
}
.size-4xs,
.width-4xs {
 --width:var(--size-4xs)
}
.size-4xs {
 --height:var(--size-4xs)
}
.size-3xs,
.width-3xs {
 --width:var(--size-3xs)
}
.size-3xs {
 --height:var(--size-3xs)
}
.size-2xs {
 --width:var(--size-2xs)
}
.size-2xs {
 --height:var(--size-2xs)
}
.size-xs,
.width-xs {
 --width:var(--size-xs)
}
.size-xs {
 --height:var(--size-xs)
}
.size-sm {
 --width:var(--size-sm)
}
.height-sm,
.size-sm {
 --height:var(--size-sm)
}
.size-md {
 --width:var(--size-md)
}
.size-md {
 --height:var(--size-md)
}
.size-lg {
 --width:var(--size-lg)
}
.height-lg,
.size-lg {
 --height:var(--size-lg)
}
.size-xl,
.width-xl {
 --width:var(--size-xl)
}
.height-xl,
.size-xl {
 --height:var(--size-xl)
}
.size-2xl {
 --width:var(--size-2xl)
}
.size-2xl {
 --height:var(--size-2xl)
}
.size-3xl {
 --width:var(--size-3xl)
}
.size-3xl {
 --height:var(--size-3xl)
}
.size-inherit {
 width:inherit
}
.size-inherit {
 height:inherit
}
.width-40\% {
 width:40%
}
.width-100\% {
 width:100%
}
.height-100\% {
 height:100%
}
.height-100vh {
 height:100vh
}
.height-auto {
 height:auto
}
:root {
 --max-width-5xs:17.5rem;
 --max-width-4xs:20rem;
 --max-width-3xs:26rem;
 --max-width-2xs:32rem;
 --max-width-xs:38rem;
 --max-width-sm:48rem;
 --max-width-md:56rem;
 --max-width-lg:64rem;
 --max-width-xl:80rem;
 --max-width-2xl:90rem;
 --max-width-3xl:100rem;
 --max-width-4xl:120rem
}
.container {
 margin-left:auto;
 margin-right:auto;
 width:calc(100% - var(--component-padding)*2)
}
.max-width-5xs {
 max-width:var(--max-width-5xs)
}
.max-width-3xs {
 max-width:var(--max-width-3xs)
}
.max-width-2xs {
 max-width:var(--max-width-2xs)
}
.max-width-xs {
 max-width:var(--max-width-xs)
}
.max-width-sm {
 max-width:var(--max-width-sm)
}
.max-width-md {
 max-width:var(--max-width-md)
}
.max-width-lg {
 max-width:var(--max-width-lg)
}
.max-width-xl {
 max-width:var(--max-width-xl)
}
.max-width-2xl {
 max-width:var(--max-width-2xl)
}
[class*=" max-width-adaptive"],
[class^=max-width-adaptive] {
 max-width:32rem
}
@media (min-width:48rem) {
 .max-width-adaptive-lg,
 .max-width-adaptive-md,
 .max-width-adaptive-sm,
 .max-width-adaptive-xl {
  max-width:48rem
 }
}
@media (min-width:64rem) {
 .max-width-adaptive-lg,
 .max-width-adaptive-md,
 .max-width-adaptive-xl {
  max-width:64rem
 }
}
@media (min-width:80rem) {
 .max-width-adaptive-lg,
 .max-width-adaptive-xl {
  max-width:80rem
 }
}
@media (min-width:90rem) {
 .max-width-adaptive-xl {
  max-width:90rem
 }
}
.max-height-100\% {
 max-height:100%
}
.shadow-ring {
 box-shadow:var(--shadow-ring)
}
.shadow-xs {
 box-shadow:var(--shadow-xs)
}
.shadow-xs.shadow-ring {
 box-shadow:var(--shadow-xs),var(--shadow-ring)
}
.shadow-sm {
 box-shadow:var(--shadow-sm)
}
.shadow-sm.shadow-ring {
 box-shadow:var(--shadow-sm),var(--shadow-ring)
}
.shadow-md {
 box-shadow:var(--shadow-md)
}
.shadow-md.shadow-ring {
 box-shadow:var(--shadow-md),var(--shadow-ring)
}
.shadow-lg {
 box-shadow:var(--shadow-lg)
}
.shadow-lg.shadow-ring {
 box-shadow:var(--shadow-lg),var(--shadow-ring)
}
.shadow-xl {
 box-shadow:var(--shadow-xl)
}
.shadow-xl.shadow-ring {
 box-shadow:var(--shadow-xl),var(--shadow-ring)
}
:where(.inner-glow,
.inner-glow-top) {
 position:relative
}
.inner-glow-top:after,
.inner-glow:after {
 border-radius:inherit;
 content:"";
 height:100%;
 left:0;
 pointer-events:none;
 position:absolute;
 top:0;
 width:100%
}
.inner-glow:after {
 box-shadow:var(--inner-glow)
}
.inner-glow-top:after {
 box-shadow:var(--inner-glow-top)
}
.position-relative {
 position:relative
}
.position-absolute {
 position:absolute
}
.position-fixed {
 position:fixed
}
.position-sticky {
 position:sticky
}
.inset-0 {
 bottom:0;
 left:0;
 right:0;
 top:0
}
.top-0 {
 top:0
}
.top-50\% {
 top:50%
}
.top-md {
 top:var(--space-md)
}
.bottom-md {
 bottom:var(--space-md)
}
.right-0 {
 right:0
}
.right-sm {
 right:var(--space-sm)
}
.right-md {
 right:var(--space-md)
}
.left-0 {
 left:0
}
.left-50\% {
 left:50%
}
.z-index-header {
 z-index:var(--z-index-header)
}
.z-index-overlay {
 z-index:var(--z-index-overlay)
}
.z-index-1 {
 z-index:1
}
.z-index-2 {
 z-index:2
}
.overflow-visible {
 overflow:visible
}
.overflow-hidden {
 overflow:hidden
}
.overflow-auto {
 overflow:auto
}
.scroll-smooth {
 scroll-behavior:smooth
}
.opacity-0 {
 opacity:0
}
.opacity-20\% {
 opacity:.2
}
.opacity-30\% {
 opacity:.3
}
.opacity-50\% {
 opacity:.5
}
.opacity-60\% {
 opacity:.6
}
.opacity-70\% {
 opacity:.7
}
.clearfix:after {
 clear:both;
 content:"";
 display:table
}
[class*=" border-"],
[class^=border-] {
 --border-alpha:1
}
.border {
 border:var(--border-width,1px) var(--border-style,solid) hsla(var(--color-contrast-lower-hsl),var(--border-alpha,1))
}
.border-top {
 border-top:var(--border-width,1px) var(--border-style,solid) hsla(var(--color-contrast-lower-hsl),var(--border-alpha,1))
}
.border-bottom {
 border-bottom:var(--border-width,1px) var(--border-style,solid) hsla(var(--color-contrast-lower-hsl),var(--border-alpha,1))
}
.border-left {
 border-left:var(--border-width,1px) var(--border-style,solid) hsla(var(--color-contrast-lower-hsl),var(--border-alpha,1))
}
.border-right {
 border-right:var(--border-width,1px) var(--border-style,solid) hsla(var(--color-contrast-lower-hsl),var(--border-alpha,1))
}
.border-2 {
 --border-width:2px
}
.border-3 {
 --border-width:3px
}
.border-4 {
 --border-width:4px
}
.border-dashed {
 --border-style:dashed
}
.border-contrast-lower {
 border-color:hsla(var(--color-contrast-lower-hsl),var(--border-alpha,1))
}
.border-primary {
 border-color:hsla(var(--color-primary-hsl),var(--border-alpha,1))
}
.border-accent {
 border-color:hsla(var(--color-accent-hsl),var(--border-alpha,1))
}
:root,
[data-theme=dark] {
 --color-border-alpha:hsla(var(--color-contrast-higher-hsl),0.09)
}
.border-alpha {
 border-color:var(--color-border-alpha)
}
.border-opacity-70\% {
 --border-alpha:0.7
}
.radius-md {
 border-radius:var(--radius-md)
}
.radius-lg {
 border-radius:var(--radius-lg)
}
.radius-50\% {
 border-radius:50%
}
.radius-inherit {
 border-radius:inherit
}
.bg,
[class*=" bg-"],
[class^=bg-] {
 --bg-alpha:1
}
.bg-transparent {
 background-color:transparent
}
.bg-dark {
 background-color:hsla(var(--color-bg-dark-hsl),var(--bg-alpha,1))
}
.bg {
 background-color:hsla(var(--color-bg-hsl),var(--bg-alpha,1))
}
.bg-light {
 background-color:hsla(var(--color-bg-light-hsl),var(--bg-alpha,1))
}
.bg-lighter {
 background-color:hsla(var(--color-bg-lighter-hsl),var(--bg-alpha,1))
}
.bg-contrast-lower {
 background-color:hsla(var(--color-contrast-lower-hsl),var(--bg-alpha,1))
}
.bg-contrast-low {
 background-color:hsla(var(--color-contrast-low-hsl),var(--bg-alpha,1))
}
.bg-contrast-higher {
 background-color:hsla(var(--color-contrast-higher-hsl),var(--bg-alpha,1))
}
.bg-primary {
 background-color:hsla(var(--color-primary-hsl),var(--bg-alpha,1))
}
.bg-accent {
 background-color:hsla(var(--color-accent-hsl),var(--bg-alpha,1))
}
.bg-success {
 background-color:hsla(var(--color-success-hsl),var(--bg-alpha,1))
}
.bg-warning {
 background-color:hsla(var(--color-warning-hsl),var(--bg-alpha,1))
}
.bg-error {
 background-color:hsla(var(--color-error-hsl),var(--bg-alpha,1))
}
.bg-opacity-5\% {
 --bg-alpha:0.05
}
.bg-opacity-10\% {
 --bg-alpha:0.1
}
.bg-opacity-15\% {
 --bg-alpha:0.15
}
.bg-opacity-20\% {
 --bg-alpha:0.2
}
.bg-opacity-25\% {
 --bg-alpha:0.25
}
.bg-opacity-50\% {
 --bg-alpha:0.5
}
.bg-opacity-70\% {
 --bg-alpha:0.7
}
.bg-opacity-80\% {
 --bg-alpha:0.8
}
.bg-opacity-90\% {
 --bg-alpha:0.9
}
.bg-center {
 background-position:50%
}
.bg-cover {
 background-size:cover
}
.backdrop-blur-10 {
 -webkit-backdrop-filter:blur(10px);
 backdrop-filter:blur(10px)
}
.isolate {
 isolation:isolate
}
.object-cover {
 -o-object-fit:cover;
 object-fit:cover
}
[class*=" -rotate"],
[class*=" -scale"],
[class*=" -skew"] [class^=skew],
[class*=" -translate"],
[class*=" flip"],
[class*=" rotate"],
[class*=" scale"],
[class*=" skew"],
[class*=" translate"],
[class^=-rotate],
[class^=-scale],
[class^=-skew],
[class^=-translate],
[class^=flip],
[class^=rotate],
[class^=scale],
[class^=translate] {
 --translate:0;
 --rotate:0;
 --skew:0;
 --scale:1;
 transform:translate3d(var(--translate-x,var(--translate)),var(--translate-y,var(--translate)),var(--translate-z,0)) rotateX(var(--rotate-x,0)) rotateY(var(--rotate-y,0)) rotate(var(--rotate-z,var(--rotate))) skewX(var(--skew-x,var(--skew))) skewY(var(--skew-y,0)) scaleX(var(--scale-x,var(--scale))) scaleY(var(--scale-y,var(--scale)))
}
.flip {
 --scale:-1
}
.flip-x {
 --scale-x:-1
}
.rotate-90 {
 --rotate:90deg
}
.-translate-50\% {
 --translate:-50%
}
.-translate-x-50\% {
 --translate-x:-50%
}
.-translate-y-50\% {
 --translate-y:-50%
}
.-translate-y-slight {
 --translate-y:-0.1em
}
.translate-50\% {
 --translate:50%
}
.translate-x-50\% {
 --translate-x:50%
}
.translate-y-50\% {
 --translate-y:50%
}
.origin-top-left {
 transform-origin:left top
}
.transition {
 transition-delay:var(--transition-delay,0s);
 transition-duration:var(--transition-duration,.2s);
 transition-property:var(--transition-property,all)
}
.fill-current {
 fill:currentColor
}
.stroke-current {
 stroke:currentColor
}
.visible {
 visibility:visible
}
.invisible {
 visibility:hidden
}
.hover\:opacity-85\%:hover {
 opacity:85%
}
.hover\:opacity-90\%:hover {
 opacity:90%
}
.hover\:shadow-md:hover {
 box-shadow:var(--shadow-md)
}
.hover\:scale {
 transition:transform .3s var(--ease-out-back)
}
.hover\:scale:hover {
 transform:scale(1.1)
}
.active\:opacity-60\%:active {
 opacity:60%
}
html:not(.js) .no-js\:is-hidden {
 display:none!important
}
@media print {
 .print\:is-hidden {
  display:none!important
 }
 .print\:no-shadow {
  box-shadow:none
 }
}
@media (min-width:32rem) {
 .col-6\@xs {
  flex:initial;
  width:calc((100% - (var(--grid-columns) - 1)*var(--sub-gap-x))*var(--span)/var(--grid-columns) + (var(--span) - 1)*var(--sub-gap-x))
 }
 .col-6\@xs {
  --span:6
 }
 .flex-row\@xs {
  flex-direction:row
 }
 .column-count-2\@xs {
  column-count:2
 }
}
@media not all and (min-width:32rem) {
 .display\@xs {
  display:none!important
 }
}
@media (min-width:48rem) {
 .col-3\@sm,
 .col-4\@sm,
 .col-5\@sm,
 .col-6\@sm,
 .col-7\@sm {
  flex:initial;
  width:calc((100% - (var(--grid-columns) - 1)*var(--sub-gap-x))*var(--span)/var(--grid-columns) + (var(--span) - 1)*var(--sub-gap-x))
 }
 .col-3\@sm {
  --span:3
 }
 .col-4\@sm {
  --span:4
 }
 .col-5\@sm {
  --span:5
 }
 .col-6\@sm {
  --span:6
 }
 .col-7\@sm {
  --span:7
 }
 .offset-5\@sm {
  margin-left:calc((100% - (var(--grid-columns) - 1)*var(--sub-gap-x))*var(--offset)/var(--grid-columns) + var(--offset)*var(--sub-gap-x))
 }
 .offset-5\@sm {
  --offset:5
 }
 .flex-row\@sm {
  flex-direction:row
 }
 .justify-between\@sm {
  justify-content:space-between
 }
 .hide\@sm {
  display:none!important
 }
 .padding-y-xs\@sm {
  padding-bottom:var(--space-xs);
  padding-top:var(--space-xs)
 }
 .padding-y-lg\@sm {
  padding-bottom:var(--space-lg);
  padding-top:var(--space-lg)
 }
 .column-count-3\@sm {
  column-count:3
 }
 .size-lg\@sm {
  --width:var(--size-lg)
 }
 .size-lg\@sm {
  --height:var(--size-lg)
 }
 .max-width-sm\@sm {
  max-width:var(--max-width-sm)
 }
}
@media not all and (min-width:48rem) {
 .display\@sm {
  display:none!important
 }
}
@media (min-width:64rem) {
 .col-10\@md,
 .col-11\@md,
 .col-12\@md,
 .col-3\@md,
 .col-4\@md,
 .col-6\@md,
 .col-8\@md,
 .col-9\@md {
  flex:initial;
  width:calc((100% - (var(--grid-columns) - 1)*var(--sub-gap-x))*var(--span)/var(--grid-columns) + (var(--span) - 1)*var(--sub-gap-x))
 }
 .col-3\@md {
  --span:3
 }
 .col-4\@md {
  --span:4
 }
 .col-6\@md {
  --span:6
 }
 .col-8\@md {
  --span:8
 }
 .col-9\@md {
  --span:9
 }
 .col-10\@md {
  --span:10
 }
 .col-11\@md {
  --span:11
 }
 .col-12\@md {
  --span:12
 }
 .offset-1\@md {
  margin-left:calc((100% - (var(--grid-columns) - 1)*var(--sub-gap-x))*var(--offset)/var(--grid-columns) + var(--offset)*var(--sub-gap-x))
 }
 .offset-1\@md {
  --offset:1
 }
 .offset-0\@md {
  --offset:0
 }
 .gap-md\@md {
  --gap-x:var(--space-md);
  --gap-y:var(--space-md)
 }
 .gap-md\@md>* {
  --sub-gap-x:var(--space-md);
  --sub-gap-y:var(--space-md)
 }
 .gap-x-md\@md {
  --gap-x:var(--space-md)
 }
 .gap-x-md\@md>* {
  --sub-gap-x:var(--space-md)
 }
 .gap-x-lg\@md {
  --gap-x:var(--space-lg)
 }
 .gap-x-lg\@md>* {
  --sub-gap-x:var(--space-lg)
 }
 .gap-y-lg\@md {
  --gap-y:var(--space-lg)
 }
 .gap-y-lg\@md>* {
  --sub-gap-y:var(--space-lg)
 }
 .flex\@md {
  display:flex
 }
 .inline-flex\@md {
  display:inline-flex
 }
 .flex-row\@md {
  flex-direction:row
 }
 .flex-grow\@md {
  flex-grow:1
 }
 .justify-center\@md {
  justify-content:center
 }
 .justify-between\@md {
  justify-content:space-between
 }
 .items-center\@md {
  align-items:center
 }
 .items-start\@md {
  align-items:flex-start
 }
 .order-2\@md {
  order:2
 }
 .hide\@md {
  display:none!important
 }
 .margin-top-md\@md {
  margin-top:var(--space-md)
 }
 .margin-top-0\@md {
  margin-top:0
 }
 .margin-left-lg\@md {
  margin-left:var(--space-lg)
 }
 .padding-sm\@md {
  padding:var(--space-sm)
 }
 .padding-lg\@md {
  padding:var(--space-lg)
 }
 .padding-0\@md {
  padding:0
 }
 .padding-top-sm\@md {
  padding-top:var(--space-sm)
 }
 .padding-top-lg\@md {
  padding-top:var(--space-lg)
 }
 .padding-top-2xl\@md {
  padding-top:var(--space-2xl)
 }
 .padding-top-0\@md {
  padding-top:0
 }
 .padding-bottom-sm\@md {
  padding-bottom:var(--space-sm)
 }
 .padding-left-md\@md {
  padding-left:var(--space-md)
 }
 .padding-left-0\@md {
  padding-left:0
 }
 .padding-x-md\@md {
  padding-left:var(--space-md);
  padding-right:var(--space-md)
 }
 .padding-x-0\@md {
  padding-left:0;
  padding-right:0
 }
 .padding-y-xl\@md {
  padding-bottom:var(--space-xl);
  padding-top:var(--space-xl)
 }
 .text-left\@md {
  text-align:left
 }
 .text-xs\@md {
  font-size:var(--text-xs)
 }
 .text-sm\@md {
  font-size:var(--text-sm)
 }
 .text-base\@md {
  font-size:var(--text-base)
 }
 .text-2xl\@md {
  font-size:var(--text-2xl)
 }
 .column-count-2\@md {
  column-count:2
 }
 .size-lg\@md {
  --width:var(--size-lg)
 }
 .size-lg\@md {
  --height:var(--size-lg)
 }
 .width-100\%\@md {
  width:100%
 }
 .width-auto\@md {
  width:auto
 }
 .height-auto\@md {
  height:auto
 }
 .min-height-100vh\@md {
  min-height:100vh
 }
 .max-width-sm\@md {
  max-width:var(--max-width-sm)
 }
 .max-width-md\@md {
  max-width:var(--max-width-md)
 }
 .max-width-2xl\@md {
  max-width:var(--max-width-2xl)
 }
 .position-relative\@md {
  position:relative
 }
 .position-absolute\@md {
  position:absolute
 }
 .position-sticky\@md {
  position:sticky
 }
 .top-0\@md {
  top:0
 }
 .overflow-hidden\@md {
  overflow:hidden
 }
 .invisible\@md {
  visibility:hidden
 }
}
@media not all and (min-width:64rem) {
 .display\@md {
  display:none!important
 }
}
@media (min-width:80rem) {
 .col-3\@lg,
 .col-4\@lg,
 .col-5\@lg,
 .col-7\@lg,
 .col-8\@lg {
  flex:initial;
  width:calc((100% - (var(--grid-columns) - 1)*var(--sub-gap-x))*var(--span)/var(--grid-columns) + (var(--span) - 1)*var(--sub-gap-x))
 }
 .col-3\@lg {
  --span:3
 }
 .col-4\@lg {
  --span:4
 }
 .col-5\@lg {
  --span:5
 }
 .col-7\@lg {
  --span:7
 }
 .col-8\@lg {
  --span:8
 }
 .offset-0\@lg {
  --offset:0
 }
 .gap-x-md\@lg {
  --gap-x:var(--space-md)
 }
 .gap-x-md\@lg>* {
  --sub-gap-x:var(--space-md)
 }
 .gap-x-lg\@lg {
  --gap-x:var(--space-lg)
 }
 .gap-x-lg\@lg>* {
  --sub-gap-x:var(--space-lg)
 }
 .gap-x-2xl\@lg {
  --gap-x:var(--space-2xl)
 }
 .gap-x-2xl\@lg>* {
  --sub-gap-x:var(--space-2xl)
 }
 .gap-y-xl\@lg {
  --gap-y:var(--space-xl)
 }
 .gap-y-xl\@lg>* {
  --sub-gap-y:var(--space-xl)
 }
 .flex\@lg {
  display:flex
 }
 .items-start\@lg {
  align-items:flex-start
 }
 .hide\@lg {
  display:none!important
 }
 .margin-auto\@lg {
  margin:auto
 }
 .margin-top-3xl\@lg {
  margin-top:var(--space-3xl)
 }
 .padding-md\@lg {
  padding:var(--space-md)
 }
 .padding-top-2xl\@lg {
  padding-top:var(--space-2xl)
 }
 .padding-bottom-2xl\@lg {
  padding-bottom:var(--space-2xl)
 }
 .padding-x-md\@lg {
  padding-left:var(--space-md);
  padding-right:var(--space-md)
 }
 .padding-x-xl\@lg {
  padding-left:var(--space-xl);
  padding-right:var(--space-xl)
 }
 .padding-y-sm\@lg {
  padding-bottom:var(--space-sm);
  padding-top:var(--space-sm)
 }
 .text-lg\@lg {
  font-size:var(--text-lg)
 }
 .text-xl\@lg {
  font-size:var(--text-xl)
 }
 .position-sticky\@lg {
  position:sticky
 }
 .top-md\@lg {
  top:var(--space-md)
 }
}
@media not all and (min-width:80rem) {
 .display\@lg {
  display:none!important
 }
}
@media (min-width:90rem) {
 .gap-x-xl\@xl {
  --gap-x:var(--space-xl)
 }
 .gap-x-xl\@xl>* {
  --sub-gap-x:var(--space-xl)
 }
}
@media not all and (min-width:90rem) {
 .display\@xl {
  display:none!important
 }
}