:root {
    --font-base: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    --font-mono: "Menlo","Lucida Console",monospace;
    --color-background-rgb: 255,255,255;
    --color-background: rgb(var(--color-background-rgb));
    --color-background-transparent: rgba(var(--color-background-rgb),0);
    --color-background-alt: #f2f5f8;
    --color-background-gradient: #f1f2f3;
    --color-background-gradient-transparent: hsla(210,8%,95%,0);
    --color-background-gradient-alt: #f0f4f8;
    --color-background-gradient-alt-transparent: rgba(240,244,248,0);
    --color-background-alt-dark: #fff;
    --color-focus: #684a48;
    --border-radius: 0.75rem;
    --color-line-dim: #eef0f4;
    --color-line: #dee0e6;
    --color-line-dark: #ced1d8;
    --focus-brand-blur: -0.125rem -0.125rem 1rem rgba(239,71,101,0.5),0.125rem 0.125rem 1rem rgba(255,154,90,0.5);
    --field-shadow: 0 0 0 0.125rem rgba(0,0,0,0.15);
    --field-focus-shadow: var(--field-shadow),var(--focus-brand-blur);
    --button-shadow: 0 0 0.25rem hsla(0,0%,100%,0.5);
    --button-shadow-dark: 0 0 0.25rem rgba(0,0,0,0.5);
    --button-focus-shadow: var(--button-shadow),var(--focus-brand-blur);
    --color-quote: rgba(0,44,88,0.1);
    --color-testimonial-title: #868990;
    --color-testimonial-background: #f2f5f8;
    --color-code-inline-background: #f1f3f6;
    --color-code-block-background: #fff;
    --color-code-highlight: #67a5f4;
    --color-code-scrollbar: #d1d5dc;
    --color-code-run: #1b1b1c;
    --color-code-comment: #9398a2;
    --code-block-border: #e4e8ec;
    --color-text: #53565c;
    --color-text-dim: #70737b;
    --color-text-dim-extra: #b2b7c6;
    --color-text-dark: #383a3f;
    --color-text-fill: #f1f3f6;
    --color-text-link: 83 152 243;
    --color-text-link-landing: 83 86 92;
    --color-text-link-primary: 239 71 101;
    --color-primary: #ef4765;
    --color-secondary: #ff9a5a;
    --color-button-text: #54565c;
    --color-button-background: #ebecef;
    --color-button-disabled-text: #a8aab3;
    --color-button-disabled-background: #f0f1f5;
    --color-brand-gradient: linear-gradient(to bottom right,var(--color-primary),var(--color-secondary));
    --color-brand-gradient-right: linear-gradient(to right,var(--color-primary),var(--color-secondary));
    --color-brand-gradient-dim: linear-gradient(to bottom right,#fff2f5,#fff6f1);
    --color-brand-gradient-dark: linear-gradient(to bottom right,#fff2f5,#fff6f1);
    --color-brand-gradient-right-dim: linear-gradient(90deg,#fff2f5,#fff6f1);
    --color-page-separator: rgba(0,0,0,0.1);
    --brand-border-radius: 0.325rem;
    --brand-shadow: none;
    --brand-outline: rgba(0,0,0,0.1);
    --brand-color-background: 255,255,255;
    --brand-color-foreground: 0,0,0;
    --brand-thumb-filter: grayscale(100%) contrast(30%) brightness(150%);
    --color-tab-outline: rgba(0,0,0,0.1);
    --color-tab-background: #fff;
    --color-tab-text: #777980;
    --color-tab-active-background: #ebecef;
    --color-tab-active-text: var(--color-text);
    --image-filter: invert(19%) sepia(9%) saturate(481%) hue-rotate(185deg) brightness(98%) contrast(88%);
    --page-header-color-rgb: 255,255,255;
    --page-header-color: var(--color-background);
    --page-header-height: 4rem;
    --page-padding: 2rem;
    --page-vertical-separator-color: #ebecef;
    --h-anchor-color: #b3b6bc;
    --h-anchor-background: #f1f3f6;
    --table-outline-color: #ebecef;
    --table-header-cell-color: #ebecef;
    --table-cell-outline-color: #36383b;
    --table-cell-fill-color: #4c4e53;
    --shadow-float: 0 0.25rem 1rem -0.5rem #2d2f31;
    --snippets-tab-offset: 0;
    --snippets-tab-background: transparent;
    --snippets-tab-text: #777980;
    --snippets-tab-active-background: #fff;
    --snippets-tab-active-text: #4f5158;
    --snippets-tab-active-outline: #c8cdd7;
    --snippet-outline: #f2f5f8;
    --project-active-background: #f2f5f8;
    --line-number-display: block;
    --line-number-width: 2.75rem;
    --line-number-padding: 3.25rem;
    --line-number-spacing: 2rem;
    --line-number-border-offset: 0.75rem;
    --line-number-color: #b5c5d5;
    --line-number-border-color: #f2f5f8;
    --code-scrollbar-background: #ebecef;
    --color-code-scrollbar: #9398a2;
    --feature-picture-overlay: #f5f0f3;
    --feature-picture-underlay: #ced1d8;
    --feature-picture-outline: #23162f;
    --feature-picture-highlight: #6b707c;
    --demo-overlay-outline: rgba(0,0,0,0.1);
    --demo-overlay-shadow: 0 0.0625em 0.0625em rgba(0,0,0,0.25),0 0.125em 0.5em rgba(0,0,0,0.25);
    --demo-overlay-edit-image-color: #fff;
    --demo-overlay-edit-image-background: #231530;
    --tier-border-color: #ebecef;
    --tier-important-border-color: #ffd6cf;
    --editor-border-color: #dadee6;
    --editor-dot-color: #d6dae2;
    --editor-project-folder-color: #d6dae2;
    --editor-project-active-background-color: #e2e6ec;
    --editor-project-active-folder-color: #7e8189;
    --modal-background-color: #fff;
    --modal-spinner-color: #cecfd1;
    --color-matrix-mixer-main-color: #333;
    --nav-scrollbar-background: #ebecef;
    --nav-scrollbar-foreground: #b2b7c6
}

@media (max-width: 32em) {
  /*  :root {
        --page-padding:1em
    }*/
}

@media (color-index: 48) {
    :root {
        --page-header-color-rgb:28,28,28;
        --page-header-color: rgb(var(--page-header-color-rgb));
        --page-vertical-separator-color: #4b4b4e;
        --h-anchor-color: #b3b6bc;
        --h-anchor-background: #4b4b4e;
        --color-background-rgb: 42,43,45;
        --color-background: rgb(var(--color-background-rgb));
        --color-background-transparent: rgba(var(--color-background-rgb),0);
        --color-background-alt: #1b1b1c;
        --color-background-alt-dark: #0f0f10;
        --color-background-gradient: #46464c;
        --color-background-gradient-transparent: rgba(70,70,76,0);
        --color-background-gradient-alt: #1c1c1c;
        --color-background-gradient-alt-transparent: rgba(28,28,28,0);
        --color-brand-gradient-dim: linear-gradient(to bottom right,#2f282b,#302b2a);
        --color-brand-gradient-dark: linear-gradient(to bottom right,#201b1d,#1e1b1a);
        --color-brand-gradient-right-dim: linear-gradient(90deg,#2f282b,#302b2a);
        --color-text: #d2d4d8;
        --color-text-dark: #f0f1f4;
        --color-text-dim: #b6b7bd;
        --color-text-dim-extra: #6a6c72;
        --color-text-link: 123 175 243;
        --color-text-link-landing: 210 212 216;
        --field-focus-shadow: 0 0 0.25rem rgba(0,0,0,0.5),var(--focus-brand-blur);
        --button-focus-shadow: 0 0 0.25rem rgba(0,0,0,0.5),var(--focus-brand-blur);
        --line-number-color: #707985;
        --line-number-border-color: #1c1c1c;
        --code-scrollbar-background: var(--color-background);
        --color-code-scrollbar: #707985;
        --color-button-text: #e3e3e8;
        --color-button-background: #44444a;
        --color-button-disabled-text: #909198;
        --color-button-disabled-background: #343439;
        --color-line: hsla(0,0%,100%,0.1);
        --color-line-dim: #3c3c3e;
        --color-line: #3c3c3e;
        --color-line-dark: #4b4b4e;
        --color-quote: hsla(0,0%,100%,0.05);
        --color-testimonial-background: #1b1b1c;
        --color-testimonial-title: #a5a7ad;
        --color-code-inline-text: #b7b7c0;
        --color-code-inline-background: #1b1b1c;
        --color-code-block-background: #1b1b1c;
        --color-code-scroll-background: #222;
        --color-code-run: #f6c73c;
        --code-block-border: transparent;
        --color-code-comment: #707985;
        --color-code-highlight: #707075;
        --table-outline-color: #4c4e53;
        --table-header-cell-color: #4c4e53;
        --table-cell-outline-color: #36383b;
        --table-cell-fill-color: #4c4e53;
        --color-tab-text: #aeafb5;
        --color-tab-outline: hsla(0,0%,100%,0.1);
        --color-tab-background: rgba(0,0,0,0.1);
        --color-tab-active-background: hsla(0,0%,100%,0.1);
        --image-filter: invert(85%) sepia(9%) saturate(135%) hue-rotate(194deg) brightness(87%) contrast(86%);
        --brand-shadow: 0 0.0625em 0.0625em rgba(0,0,0,0.25),0 0.125em 0.5em rgba(0,0,0,0.25);
        --brand-outline: hsla(0,0%,100%,0.075);
        --brand-color-background: 30,30,30;
        --brand-color-foreground: 255,255,255;
        --brand-thumb-filter: grayscale(100%) brightness(70%) contrast(70%);
        --shadow-float: 0 0.25rem 1rem -0.5rem #1c1c1c;
        --snippets-tab-text: #717881;
        --snippets-tab-offset: 0;
        --snippets-tab-background: transparent;
        --snippets-tab-active-text: #fff;
        --snippets-tab-active-background: var(--color-background-alt-dark);
        --snippets-tab-active-outline: #565960;
        --snippet-outline: var(--color-background);
        --project-active-outline: #c8cdd7;
        --project-active-background: #1c1c1c;
        --editor-border-color: #3c3c41;
        --editor-dot-color: #3c3c41;
        --editor-project-folder-color: #3c3c41;
        --editor-project-active-background-color: #2d2d31;
        --editor-project-active-folder-color: #78787d;
        --feature-picture-underlay: #4b4b4e;
        --feature-picture-outline: var(--feature-picture-overlay);
        --feature-picture-highlight: #9c9ca1;
        --demo-overlay-outline: hsla(0,0%,100%,0.1);
        --tier-border-color: #363638;
        --tier-important-border-color: #533833;
        --modal-background-color: #44444a;
        --modal-spinner-color: #7e8189;
        --color-matrix-mixer-main-color: #333;
        --nav-scrollbar-background: #1b1b1c;
        --nav-scrollbar-foreground: #6a6c72;
        color-scheme: dark
    }
}

@media (prefers-color-scheme: ddark) {
    :root {
        --page-header-color-rgb: 255,255,255;
        --page-header-color: var(--color-background);

        --page-vertical-separator-color: #ebecef;
        --h-anchor-color: #b3b6bc;
        --h-anchor-background: #f1f3f6;

        --color-background-rgb: 255,255,255;
        --color-background: rgb(var(--color-background-rgb));
        --color-background-transparent: rgba(var(--color-background-rgb),0);
        --color-background-alt: #f2f5f8;
        --color-background-gradient: #f1f2f3;
        --color-background-gradient-transparent: hsla(210,8%,95%,0);
        --color-background-gradient-alt: #f0f4f8;
        --color-background-gradient-alt-transparent: rgba(240,244,248,0);

        --color-brand-gradient-dim: linear-gradient(to bottom right,#fff2f5,#fff6f1);
        --color-brand-gradient-dark: linear-gradient(to bottom right,#fff2f5,#fff6f1);
        --color-brand-gradient-right-dim: linear-gradient(90deg,#fff2f5,#fff6f1);


        --color-text: #53565c;
        --color-text-dark: #383a3f;
        --color-text-dim: #70737b;
        --color-text-dim-extra: #b2b7c6;
        --color-text-link: 83 152 243;
        --color-text-link-landing:83 86 92;
        --field-focus-shadow:  var(--field-shadow),var(--focus-brand-blur);
        --button-focus-shadow:  var(--button-shadow),var(--focus-brand-blur);
        --line-number-color: #b5c5d5;
        --line-number-border-color: #f2f5f8;
        --code-scrollbar-background: #ebecef;
        --color-code-scrollbar:  #9398a2;
        --color-button-text: #e3e3e8;
        --color-button-background: #44444a;
        --color-button-disabled-text: #909198;
        --color-button-disabled-background: #343439;
        --color-line: hsla(0,0%,100%,0.1);
        --color-line-dim: #3c3c3e;
        --color-line: #3c3c3e;
        --color-line-dark: #4b4b4e;
        --color-quote: hsla(0,0%,100%,0.05);
        --color-testimonial-background: #1b1b1c;
        --color-testimonial-title: #a5a7ad;
        --color-code-inline-text: #b7b7c0;
        --color-code-inline-background: #1b1b1c;
        --color-code-block-background: #1b1b1c;
        --color-code-scroll-background: #222;
        --color-code-run: #f6c73c;
        --code-block-border: transparent;
        --color-code-comment: #707985;
        --color-code-highlight: #707075;
        --table-outline-color: #4c4e53;
        --table-header-cell-color: #4c4e53;
        --table-cell-outline-color: #36383b;
        --table-cell-fill-color: #4c4e53;
        --color-tab-text: #aeafb5;
        --color-tab-outline: hsla(0,0%,100%,0.1);
        --color-tab-background: rgba(0,0,0,0.1);
        --color-tab-active-background: hsla(0,0%,100%,0.1);
        --image-filter: invert(85%) sepia(9%) saturate(135%) hue-rotate(194deg) brightness(87%) contrast(86%);
        --brand-shadow: 0 0.0625em 0.0625em rgba(0,0,0,0.25),0 0.125em 0.5em rgba(0,0,0,0.25);
        --brand-outline: hsla(0,0%,100%,0.075);
        --brand-color-background: 30,30,30;
        --brand-color-foreground: 255,255,255;
        --brand-thumb-filter: grayscale(100%) brightness(70%) contrast(70%);
        --shadow-float: 0 0.25rem 1rem -0.5rem #1c1c1c;
        --snippets-tab-text: #717881;
        --snippets-tab-offset: 0;
        --snippets-tab-background: transparent;
        --snippets-tab-active-text: #fff;
        --snippets-tab-active-background: var(--color-background-alt-dark);
        --snippets-tab-active-outline: #565960;
        --snippet-outline: var(--color-background);
        --project-active-outline: #c8cdd7;
        --project-active-background: #1c1c1c;
        --editor-border-color: #3c3c41;
        --editor-dot-color: #3c3c41;
        --editor-project-folder-color: #3c3c41;
        --editor-project-active-background-color: #2d2d31;
        --editor-project-active-folder-color: #78787d;
        --feature-picture-underlay: #4b4b4e;
        --feature-picture-outline: var(--feature-picture-overlay);
        --feature-picture-highlight: #9c9ca1;
        --demo-overlay-outline: hsla(0,0%,100%,0.1);
        --tier-border-color: #363638;
        --tier-important-border-color: #533833;
        --modal-background-color: #44444a;
        --modal-spinner-color: #7e8189;
        --color-matrix-mixer-main-color: #333;
        --nav-scrollbar-background: #1b1b1c;
        --nav-scrollbar-foreground: #6a6c72;
        color-scheme: dark
    }
}

.important {
    background-clip: padding-box,border-box;
    background-image: linear-gradient(to bottom right,#fff2f5,#fff6f1),linear-gradient(to bottom right,#ef4765,#ff9a5a);
    background-image: var(--color-brand-gradient-dim),var(--color-brand-gradient);
    background-origin: border-box;
    border: 1px double transparent;
    border-radius: .75rem;
    border-radius: var(--border-radius);
    padding: 1rem;
    position: relative
}

.important>* {
    font-size: .875em
}

.important>:first-child {
    margin-top: 0
}

.important>:last-child {
    margin-bottom: 0
}

table .important {
    background-image: linear-gradient(90deg,#fff2f5,#fff6f1),linear-gradient(90deg,#ef4765,#ff9a5a);
    background-image: var(--color-brand-gradient-right-dim),var(--color-brand-gradient-right)
}

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;

     background: var(--color-background);
    color: #53565c;
    color: var(--color-text);
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    font-family: var(--font-base);
    font-weight: 400;
    line-height: 1.5;
    scroll-padding-top: 5rem
}

body,html {
    margin: 0;
    padding: 0
}

body {
    overflow-x: hidden
}

main {
    background: radial-gradient(ellipse,#fff,transparent),linear-gradient(180deg,#f0f4f8,#fff);
    background: radial-gradient(ellipse,var(--color-background),transparent),linear-gradient(to bottom,var(--color-background-gradient-alt),var(--color-background));
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 5rem;
    position: relative
}

button,input,select,textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

a,button,textarea {
    color: inherit
}

h1,h2,h3 {
    color: #383a3f;
    color: var(--color-text-dark);
    margin: 1rem 0
}

h1,h2,h3 {
    line-height: 1.25
}

h3 {
    font-weight: 700
}

h1 {
    font-size: 2em;
    margin-bottom: 2rem
}

h2 {
    font-size: 1.5em
}

h3 {
    font-size: 1.25em
}

a,a>* {
    --underline-opacity: 0;
    color: #5398f3;
    color: rgb(var(--color-text-link));
    -webkit-text-decoration-color: rgb(83 152 243/var(--underline-opacity));
    text-decoration-color: rgb(83 152 243/var(--underline-opacity));
    -webkit-text-decoration-color: rgb(var(--color-text-link)/var(--underline-opacity));
    text-decoration-color: rgb(var(--color-text-link)/var(--underline-opacity));
    transition: -webkit-text-decoration-color .15s;
    transition: text-decoration-color .15s;
    transition: text-decoration-color .15s,-webkit-text-decoration-color .15s
}

a:hover,a>:hover {
    --underline-opacity: 0
}

.page-landing .heading h2,.page-landing h1 {
    font-size: 2em
}

.page-landing h3 {
    font-size: 1.25em
}

.page-landing a,.page-landing a>* {
    --color-text-link: var(--color-text-link-landing)
}

.page-landing p>a:not(.button) {
    font-weight: 600
}

.implicit {
    clip: rect(1px,1px,1px,1px);
    border: 0;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.nav-row>.button {
    margin-left: .5em;
    margin-right: .5em
}

.nav-row>.button:first-of-type {
    margin-left: 0
}

.nav-row>.button:last-of-type {
    margin-right: 0
}

@media (max-width: 49.9375em) {
    ul.list-split-centered {
        margin-left:auto;
        margin-right: auto;
        max-width: 16rem;
        text-align: center
    }
}

@media (min-width: 50em) {
    ul.list-split {
        display:flex;
        padding: 0 1rem
    }

    ul.list-split li {
        flex: 1;
        margin: 0 1rem
    }

    ul.list-split li>.important {
        box-sizing: border-box;
        height: 100%
    }
}

.content-gutter {
    padding:5px;
/*    padding-left: 2rem;
    padding-left: var(--page-padding);
    padding-right: 2rem;
    padding-right: var(--page-padding)*/
}

.content-limit,.content-limit-wide {

}

.content-limit-wide {

}

@media (min-width: 50em) {
    .content-split-centered {
        margin-left:auto;
        margin-right: auto
    }

    .content-split-title {
        text-align: center
    }

    .content-cols {
        display: flex;
        flex-wrap: wrap;
        margin-left: -1rem;
        margin-right: -1rem
    }

    .content-cols>* {
        margin: 1rem;
        width: calc(50% - 2rem)
    }

    .content-split {
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
        margin-left: -1rem;
        margin-right: -1rem
    }

    .content-split>* {
        flex: 1;
        margin-left: 1rem;
        margin-right: 1rem;
        margin-top: 0;
        max-width: 28rem
    }

    .content-split-centered {
        text-align: center
    }

    .content-split-baseline {
        align-items: baseline
    }

    .content-split-narrow>* {
        max-width: 20rem
    }

    .content-split-flip {
        flex-direction: row-reverse
    }

    .content-split-gravitate {
        align-items: center;
        justify-content: flex-start
    }

    .content-split-gravitate>:first-child,.content-split-gravitate>:last-child {
        margin-left: 2rem;
        margin-right: 2rem
    }

    .content-split-flip.content-split-gravitate {
        justify-content: flex-end
    }
}

@media (min-width: 60rem) {
    .content-split-gravitate:not(.content-split-flip)>:last-child {
        margin-right:-2rem
    }

    .content-split-flip.content-split-gravitate>:last-child {
        margin-left: -2rem
    }
}

@media (max-width: 31.9375em) {
    .demo-test-indicator {
        justify-content:center
    }

    .demo-test-indicator img,.demo-test-indicator svg {
        display: none
    }
}

@media (min-width: 50em) {
    .content-line {
        background:linear-gradient(90deg,#eef0f4,#fff 25%,#fff 75%,#eef0f4);
        background: linear-gradient(to right,var(--color-line-dim),var(--color-background) 25%,var(--color-background) 75%,var(--color-line-dim));
        background-position: 0 6.25rem;
        background-repeat: no-repeat;
        background-size: 100% 1px
    }
}

:root {
    --background-gradient-height: 12rem
}

@media (max-width: 49.9375em) {
    .content-conditional[data-context=wide] {
        display:none
    }
}

@media (min-width: 50em) {
    .content-conditional[data-context=narrow] {
        display:none
    }
}

.form input[type=email],.form input[type=search],.form input[type=text],.form textarea {
    background-color: #fff;
    border: none;
    border-radius: .75rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 0 .125rem rgba(0,0,0,.15);
    box-shadow: var(--field-shadow);
    color: #53565c;
    line-height: 2.375rem;
    margin-top: .0625rem;
    outline: transparent;
    padding: 0 .75rem;
    transition: box-shadow .2s ease-in-out
}

.form input[type=email]:focus,.form input[type=search]:focus,.form input[type=text]:focus,.form textarea:focus {
    box-shadow: 0 0 0 .125rem rgba(0,0,0,.15),-.125rem -.125rem 1rem rgba(239,71,101,.5),.125rem .125rem 1rem rgba(255,154,90,.5);
    box-shadow: var(--field-focus-shadow)
}

.form input[type=search] {
    -webkit-appearance: textfield
}

.form input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

.form input:-webkit-autofill,.form input:-webkit-autofill:active,.form input:-webkit-autofill:focus,.form input:-webkit-autofill:hover {
    box-shadow: inset 0 0 0 1000px #fff
}

.form input,.form textarea {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    width: 20rem
}

.form input[disabled],.form textarea[disabled] {
    background: #fff
}

.form .field {
    margin: 1rem 0
}

.form .field>label {
    display: inline-block;
    margin-bottom: .5rem
}

.form .line input,.form .line textarea {
    display: inline-block;
    min-width: auto
}

.form .line .field+.field {
    margin-left: .5rem
}

.form textarea {
    min-height: 10rem;
    resize: vertical
}

.form .spinner {
    margin-right: .5rem
}

.form .form-status-success {
    color: #c9ff8b
}

.form .form-status-error {
    color: #f67878
}

.form [class*=form-status] {
    display: none
}

.form[data-state=busy] .form-status-busy,.form[data-state=error] .form-status-error,.form[data-state=success] .form-status-success {
    display: block
}

@media (min-width: 30em) {
    .form .line {
        display:inline-flex
    }
}

kbd {
    border: 1px solid;
    border-radius: .25rem;
    box-shadow: 0 .125em 0 currentColor;
    color: var(--color-code-inline-text);
    font-size: .75em;
    font-weight: 600;
    padding: .125em .25em;
    position: relative;
    top: -.125em
}

code,kbd,pre {
    font-family: Menlo,Lucida Console,monospace;
    font-family: var(--font-mono)
}

code,pre {
    font-size: .75rem
}

code:not([class*=language]) {
    background-color: #f1f3f6;
    background-color: var(--color-code-inline-background);
    border-radius: .125rem;
    color: var(--color-code-inline-text);
    display: inline-block;
    line-height: 1.5;
    margin: 0 .125em;
    padding: 0 .3em
}

a code {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--color-text-underline);
    text-decoration-color: var(--color-text-underline)
}

pre {
    --pre-highlight: var(--color-code-highlight);
    --pre-foreground: var(--color-code-scrollbar);
    --pre-background: var(--color-code-block-background);
    --pre-scroll-background: var(--color-code-scroll-background);
    --pre-border: var(--code-block-border);
    background-color: var(--pre-background);
    border-radius: .75rem;
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 1px var(--pre-border);
    box-sizing: border-box;
    margin: 2rem 0;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content
}

pre>code:not([class*=language]),pre>code[class*=language] {
    background-color: transparent;
    box-sizing: border-box;
    display: block;
    line-height: inherit;
    margin: 0;
    padding: .75rem 1rem;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

pre>code:not([class*=language]) {
    color: #b5c5d5;
    color: var(--line-number-color)
}

code[class*=language] {
    color: #212121
}

code[class*=language] .comment {
    color: #9398a2;
    font-style: italic
}

.language-html .punctuation,.language-jsx .punctuation,.language-svelte .punctuation,code[class*=language] .string {
    color: #d86a1b
}

.language-html .doctype,.language-html .tag,.language-jsx .doctype,.language-jsx .tag,.language-svelte .doctype,.language-svelte .tag {
    color: #245fc0
}

.language-html .doctype .punctuation:first-of-type,.language-html .doctype .punctuation:last-of-type,.language-html .tag .punctuation:first-of-type,.language-html .tag .punctuation:last-of-type,.language-jsx .doctype .punctuation:first-of-type,.language-jsx .doctype .punctuation:last-of-type,.language-jsx .tag .punctuation:first-of-type,.language-jsx .tag .punctuation:last-of-type,.language-svelte .doctype .punctuation:first-of-type,.language-svelte .doctype .punctuation:last-of-type,.language-svelte .tag .punctuation:first-of-type,.language-svelte .tag .punctuation:last-of-type {
    color: #88a6d7
}

.language-javascript .number,.language-js .number,.language-jsx .number,.language-svelte .number {
    color: #348c38
}

.language-css .rule {
    color: #8d30b5
}

.language-css .property {
    color: #7a8095
}

.language-css .selector {
    color: #d72a65
}

@media (color-index: 48) {
    code[class*=language] {
        color:#ddd
    }

    code[class*=language] .comment {
        color: #707985
    }

    code[class*=language] .string {
        color: #f6a66c
    }

    .highlight-line-active {
        --color: #3a3a3b
    }

    .language-html .attr-name,.language-jsx .attr-name,.language-svelte .attr-name {
        color: #c7d6ec
    }

    .language-html .attr-equals,.language-jsx .attr-equals,.language-svelte .attr-equals {
        color: #59677b
    }

    .language-html .doctype,.language-html .tag,.language-jsx .doctype,.language-jsx .tag,.language-svelte .doctype,.language-svelte .tag {
        color: #788ca8
    }

    .language-html .doctype .punctuation:first-of-type,.language-html .doctype .punctuation:last-of-type,.language-html .tag .punctuation:first-of-type,.language-html .tag .punctuation:last-of-type,.language-jsx .doctype .punctuation:first-of-type,.language-jsx .doctype .punctuation:last-of-type,.language-jsx .tag .punctuation:first-of-type,.language-jsx .tag .punctuation:last-of-type,.language-svelte .doctype .punctuation:first-of-type,.language-svelte .doctype .punctuation:last-of-type,.language-svelte .tag .punctuation:first-of-type,.language-svelte .tag .punctuation:last-of-type {
        color: #59677b
    }

    .language-html .attr-value,.language-html .attr-value .punctuation:last-of-type,.language-html .attr-value .punctuation:nth-of-type(2),.language-html .punctuation,.language-jsx .attr-value,.language-jsx .attr-value .punctuation:last-of-type,.language-jsx .attr-value .punctuation:nth-of-type(2),.language-jsx .punctuation,.language-svelte .attr-value,.language-svelte .attr-value .punctuation:last-of-type,.language-svelte .attr-value .punctuation:nth-of-type(2),.language-svelte .punctuation {
        color: #f6a66c
    }

    .language-javascript .function-variable,.language-javascript .punctuation,.language-js .function-variable,.language-js .punctuation,.language-jsx .function-variable,.language-jsx .punctuation,.language-svelte .function-variable,.language-svelte .punctuation {
        color: #9c9c9c
    }

    .language-javascript .function,.language-js .function,.language-jsx .function,.language-svelte .function {
        color: #85b7f6
    }

    .language-javascript .operator,.language-js .operator,.language-jsx .operator,.language-svelte .operator {
        color: #8f9196
    }

    .language-javascript .constant,.language-javascript .keyword,.language-js .constant,.language-js .keyword,.language-jsx .constant,.language-jsx .keyword,.language-svelte .constant,.language-svelte .keyword {
        color: #f699d1
    }

    .language-javascript .boolean,.language-js .boolean,.language-jsx .boolean,.language-svelte .boolean {
        color: #3aa0ce
    }

    .language-javascript .class-name,.language-js .class-name,.language-jsx .class-name,.language-svelte .class-name {
        color: #cba905
    }

    .language-javascript .number,.language-js .number,.language-jsx .number,.language-svelte .number {
        color: #8eb771
    }

    .language-jsx .class-name {
        color: #788ca8
    }

    .language-jsx .token .punctuation {
        color: #59677b
    }

    .language-jsx .spread .attr-value {
        color: #c7d6ec
    }

    .language-css .selector {
        color: #ff93b8
    }

    .language-css .rule {
        color: #e4d18a
    }

    .language-css .punctuation {
        color: #777
    }

    .language-css .property {
        color: #b7b7c0
    }

    .language-css .atrule .property {
        color: #abb7f2
    }
}

@media (prefers-color-scheme: darkx) {
    code[class*=language] {
        color:#ddd
    }

    code[class*=language] .comment {
        color: #707985
    }

    code[class*=language] .string {
        color: #f6a66c
    }

    .highlight-line-active {
        --color: #3a3a3b
    }

    .language-html .attr-name,.language-jsx .attr-name,.language-svelte .attr-name {
        color: #c7d6ec
    }

    .language-html .attr-equals,.language-jsx .attr-equals,.language-svelte .attr-equals {
        color: #59677b
    }

    .language-html .doctype,.language-html .tag,.language-jsx .doctype,.language-jsx .tag,.language-svelte .doctype,.language-svelte .tag {
        color: #788ca8
    }

    .language-html .doctype .punctuation:first-of-type,.language-html .doctype .punctuation:last-of-type,.language-html .tag .punctuation:first-of-type,.language-html .tag .punctuation:last-of-type,.language-jsx .doctype .punctuation:first-of-type,.language-jsx .doctype .punctuation:last-of-type,.language-jsx .tag .punctuation:first-of-type,.language-jsx .tag .punctuation:last-of-type,.language-svelte .doctype .punctuation:first-of-type,.language-svelte .doctype .punctuation:last-of-type,.language-svelte .tag .punctuation:first-of-type,.language-svelte .tag .punctuation:last-of-type {
        color: #59677b
    }

    .language-html .attr-value,.language-html .attr-value .punctuation:last-of-type,.language-html .attr-value .punctuation:nth-of-type(2),.language-html .punctuation,.language-jsx .attr-value,.language-jsx .attr-value .punctuation:last-of-type,.language-jsx .attr-value .punctuation:nth-of-type(2),.language-jsx .punctuation,.language-svelte .attr-value,.language-svelte .attr-value .punctuation:last-of-type,.language-svelte .attr-value .punctuation:nth-of-type(2),.language-svelte .punctuation {
        color: #f6a66c
    }

    .language-javascript .function-variable,.language-javascript .punctuation,.language-js .function-variable,.language-js .punctuation,.language-jsx .function-variable,.language-jsx .punctuation,.language-svelte .function-variable,.language-svelte .punctuation {
        color: #9c9c9c
    }

    .language-javascript .function,.language-js .function,.language-jsx .function,.language-svelte .function {
        color: #85b7f6
    }

    .language-javascript .operator,.language-js .operator,.language-jsx .operator,.language-svelte .operator {
        color: #8f9196
    }

    .language-javascript .constant,.language-javascript .keyword,.language-js .constant,.language-js .keyword,.language-jsx .constant,.language-jsx .keyword,.language-svelte .constant,.language-svelte .keyword {
        color: #f699d1
    }

    .language-javascript .boolean,.language-js .boolean,.language-jsx .boolean,.language-svelte .boolean {
        color: #3aa0ce
    }

    .language-javascript .class-name,.language-js .class-name,.language-jsx .class-name,.language-svelte .class-name {
        color: #cba905
    }

    .language-javascript .number,.language-js .number,.language-jsx .number,.language-svelte .number {
        color: #8eb771
    }

    .language-jsx .class-name {
        color: #788ca8
    }

    .language-jsx .token .punctuation {
        color: #59677b
    }

    .language-jsx .spread .attr-value {
        color: #c7d6ec
    }

    .language-css .selector {
        color: #ff93b8
    }

    .language-css .rule {
        color: #e4d18a
    }

    .language-css .punctuation {
        color: #777
    }

    .language-css .property {
        color: #b7b7c0
    }

    .language-css .atrule .property {
        color: #abb7f2
    }
}

@media (max-width: 50em) {
    .nav-tree>ul {
        border:1px solid hsla(0,0%,100%,.25);
        border-radius: .5rem;
        margin-top: .5rem;
        padding: .5rem .75rem
    }

    .js [data-module=SectionToggler]:not([data-state=active])+* {
        display: none
    }
}

.nav-sitemap .h {
    margin-top: 0
}

.hero {
    padding: 4rem 0 0;
    padding: var(--page-header-height) 0 0
}

button[data-module=HeroDemoMobile] {
    align-items: center;
    display: none;
    transition: color .25s,background-color .25s
}

button[data-module=HeroDemoMobile] svg {
    height: .75rem;
    margin-left: .5rem;
    margin-right: -.25rem;
    width: .75rem
}

.js button[data-module=HeroDemoMobile][data-state=loading] {
    background-color: transparent;
    color: transparent;
    position: relative
}

.js button[data-module=HeroDemoMobile][data-state=loading]:after {
    background-color: transparent;
    color: #70737b;
    color: var(--color-text-dim);
    content: "Loading demo…";
    position: absolute
}

@media (max-width: 32em) {
    button[data-module=HeroDemoMobile] {
        display:inline-flex
    }
}

.radio-sets {
    display: flex;
    height: 1.75rem;
    justify-content: space-between;
    margin-top: -2.5rem
}

@media (max-width: 31.9375em) {
    .hero .demo-test-indicator {
        display:none
    }
}

@media (max-width: 32em) {
    .radio-sets {
        display:none
    }
}

@media (max-width: 50em) {
    .radio-sets {
      /*  display:none*/

        display: flex;
        height: 1.75rem;
        justify-content: space-between;
        margin-top: -2.5rem

    }
}

.radio-set {
    display: inline-flex
}

.radio-set:first-of-type {
    margin-left: 0;
    order: 1
}

.radio-set:nth-of-type(2) {
    margin-left: 1rem;
    order: 2
}

.radio-set:nth-of-type(3) {
    margin-left: auto;
    order: 3
}

.radio-set:nth-of-type(4) {
    margin-left: 1rem;
    order: 4
}

.radio-set a,.radio-set label {
    align-items: center;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    box-shadow: inset 0 0 0 1px var(--color-tab-outline);
    cursor: pointer;
    display: flex;
    font-size: .625em;
    padding: 0 1em;
    pointer-events: all;
    text-decoration: none;
    transition: background-color .15s,color .15s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.radio-set a,.radio-set a *,.radio-set label {
    color: #777980;
    color: var(--color-tab-text)
}

.radio-set label+label {
    margin-left: -1px
}

.radio-set a:first-of-type,.radio-set label:first-of-type {
    border-bottom-left-radius: .325rem;
    border-bottom-left-radius: var(--brand-border-radius);
    border-top-left-radius: .325rem;
    border-top-left-radius: var(--brand-border-radius)
}

.radio-set a:last-of-type,.radio-set label:last-of-type {
    border-bottom-right-radius: .325rem;
    border-bottom-right-radius: var(--brand-border-radius);
    border-top-right-radius: .325rem;
    border-top-right-radius: var(--brand-border-radius)
}

.radio-set svg {
    width: 1.125em
}

.radio-set svg:first-child {
    margin-right: .5em
}

.radio-set svg:last-child {
    margin-left: .5em
}

.radio-set svg:only-child {
    margin: 0
}

.hero-demo>input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px
}

.hero-demo>input:first-of-type:checked~.radio-sets .radio-set:first-of-type label:first-of-type,.hero-demo>input:nth-of-type(2):checked~.radio-sets .radio-set:nth-of-type(3) label:first-of-type,.hero-demo>input:nth-of-type(3):checked~.radio-sets .radio-set:nth-of-type(3) label:nth-of-type(2),.hero-demo>input:nth-of-type(4):checked~.radio-sets .radio-set:nth-of-type(4) label:first-of-type,.hero-demo>input:nth-of-type(5):checked~.radio-sets .radio-set:nth-of-type(4) label:nth-of-type(2),.hero-demo>input:nth-of-type(6):checked~.radio-sets .radio-set:nth-of-type(4) label:nth-of-type(3) {
    background: #ebecef;
    background: var(--color-tab-active-background);
    color: #53565c;
    color: var(--color-tab-active-text);
    position: relative;
    z-index: 1
}

.hero-demo>input:first-of-type.focus-visible~.radio-sets .radio-set:first-of-type label:first-of-type,.hero-demo>input:nth-of-type(2).focus-visible~.radio-sets .radio-set:nth-of-type(3) label:first-of-type,.hero-demo>input:nth-of-type(3).focus-visible~.radio-sets .radio-set:nth-of-type(3) label:nth-of-type(2),.hero-demo>input:nth-of-type(4).focus-visible~.radio-sets .radio-set:nth-of-type(4) label:first-of-type,.hero-demo>input:nth-of-type(5).focus-visible~.radio-sets .radio-set:nth-of-type(4) label:nth-of-type(2),.hero-demo>input:nth-of-type(6).focus-visible~.radio-sets .radio-set:nth-of-type(4) label:nth-of-type(3) {
    box-shadow: 0 0 0 1px #fff,0 0 0 2px #2196f3;
    box-shadow: 0 0 0 1px var(--color-background),0 0 0 2px #2196f3
}

.hero-demo>input:first-of-type:focus-visible~.radio-sets .radio-set:first-of-type label:first-of-type,.hero-demo>input:nth-of-type(2):focus-visible~.radio-sets .radio-set:nth-of-type(3) label:first-of-type,.hero-demo>input:nth-of-type(3):focus-visible~.radio-sets .radio-set:nth-of-type(3) label:nth-of-type(2),.hero-demo>input:nth-of-type(4):focus-visible~.radio-sets .radio-set:nth-of-type(4) label:first-of-type,.hero-demo>input:nth-of-type(5):focus-visible~.radio-sets .radio-set:nth-of-type(4) label:nth-of-type(2),.hero-demo>input:nth-of-type(6):focus-visible~.radio-sets .radio-set:nth-of-type(4) label:nth-of-type(3) {
    box-shadow: 0 0 0 1px #fff,0 0 0 2px #2196f3;
    box-shadow: 0 0 0 1px var(--color-background),0 0 0 2px #2196f3
}

.hero-demo>input:first-of-type:disabled~.radio-sets .radio-set:first-of-type label:first-of-type {
    opacity: .5
}

.demo {
    align-items: stretch;
    display: flex;
    padding-top: 1rem;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0
}

.demo [data-module=EditorOptions] {
    box-sizing: border-box;
    margin-top: -.1rem;
    margin-right: 3px;
    margin-left: 3px;
    margin-bottom: -.25rem;
    -webkit-mask: linear-gradient(180deg,transparent,#000 .75rem,#000 calc(100% - .75rem),transparent),linear-gradient(#000,#000);
    mask: linear-gradient(180deg,transparent,#000 .75rem,#000 calc(100% - .75rem),transparent),linear-gradient(#000,#000);
    -webkit-mask-position: left top,right top;
    mask-position: left top,right top;
    -webkit-mask-repeat: no-repeat,no-repeat;
    mask-repeat: no-repeat,no-repeat;
    -webkit-mask-size: calc(100% - 1rem) 100%,1rem 100%;
    mask-size: calc(100% - 1rem) 100%,1rem 100%;


}

.demo .hero-demo-editor-wrapper {
    flex: 1
}

.hero-demo-editor-wrapper {
     margin: 0 auto;
    position: relative;





}



.hero-demo-editor-wrapper .hero-demo-editor:after {
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%

}

.hero-demo-editor .brand-editor {
    --color-background: var(--brand-color-background);
    --color-foreground: var(--brand-color-foreground);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.demo [data-module=EditorOptions] {
    display: none
}

[id=api-toggle]:checked~.demo [data-module=EditorOptions] {
    display: block
}

[id=api-toggle]:checked~[id=context-mobile]:checked~.demo [data-module=EditorOptions] {
    position: absolute
}

[id=context-auto]:checked~.demo .hero-demo-editor-wrapper,[id=context-auto]:checked~.demo [data-module=EditorOptions] {
    height: 40em;
    max-height: calc(100vh - 4em);

}

[id=context-auto]:checked~.demo .hero-demo-editor-wrapper {
    max-width: 100%;
    min-width: 20em
}

[id=context-auto]:checked~.demo .hero-demo-editor-wrapper .hero-demo-editor {
    border-radius: .325rem;
    border-radius: var(--brand-border-radius);
    height: 100%
}

[id=context-mobile]:checked~.demo [data-module=EditorOptions] {
    height: 640px!important
}

[id=context-mobile]:checked~.demo .hero-demo-editor-wrapper {
    flex: none;
    height: 692px!important;
    width: 340px!important
}

[id=context-mobile]:checked~.demo .hero-demo-editor-wrapper:after {

    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 100px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: calc(100% - 50px);
    width: 100%
}

[id=context-mobile]:checked~.demo .hero-demo-editor-wrapper .hero-demo-editor:after {

    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: none!important;
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

[id=context-mobile]:checked~.demo .hero-demo-editor-wrapper .hero-demo-editor:before {
    content: "";
    display: block;
    padding-top: 202%
}

[id=context-mobile]:checked~.demo .hero-demo-editor-wrapper .brand-editor {
    height: calc(100% - 2em);
    left: 1.1em;
    padding-bottom: .125em;
    padding-top: 1.75em;
    top: 1em;
    width: calc(100% - 1.925em)
}

[id=context-mobile]:checked~.demo .hero-demo-editor-wrapper .brand-editor * {
    cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cy='16' cx='16' fill='rgba(0,0,0,.8)' stroke='rgba(255,255,255,.25)' stroke-width='.5' r='16'/%3E%3C/svg%3E") 16 16,auto
}

[id=theme-night]:checked~.demo .hero-demo-editor-wrapper .brand-editor {
 /*   --color-background: 33,34,35;
    --color-foreground: 255,255,255*/
}

[id=context-mobile]:checked~[id=theme-night]:checked~.demo .hero-demo-editor-wrapper .brand-editor {
 /*   --color-background: 7,8,9;
    --color-foreground: 255,255,255*/
}

[id=theme-day]:checked~.demo .hero-demo-editor-wrapper .brand-editor {
    --color-background: 255,255,255;
    --color-foreground: 0,0,0
}

[id=theme-auto]:checked~.demo .hero-demo-editor-wrapper .hero-demo-editor:after {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1),0 0 0 2px #fff;
    box-shadow: inset 0 0 0 1px var(--brand-outline),0 0 0 2px var(--color-background)
}

[id=theme-day]:checked~.demo .hero-demo-editor-wrapper .hero-demo-editor:after {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1),0 0 0 2px #fff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1),0 0 0 2px var(--color-background)
}

[id=theme-night]:checked~.demo .hero-demo-editor-wrapper .hero-demo-editor:after {
    box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.1),0 0 0 2px #fff;
    box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.1),0 0 0 2px var(--color-background)
}

[id=context-mobile]:checked~[id=theme-night]:checked~.demo .hero-demo-editor-wrapper .brand-editor * {
    cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cy='16' cx='16' fill='rgba(255,255,255,.7)' stroke='rgba(0,0,0,.25)' stroke-width='.5' r='16'/%3E%3C/svg%3E") 16 16,auto
}

.hero-demo .brand-editor .TheBrandButtonExport[disabled] {
    background-color: var(--color-foreground-10);
    color: var(--color-foreground-90)
}

.button {
    border: none;
    border-radius: .75rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: inline-block;
    line-height: 2.5;
    outline: transparent;
    padding: 0 1rem;
    text-decoration: none;
    white-space: nowrap
}

.button-cta {
    background: linear-gradient(to bottom right,#ef4765,#ff9a5a);
    background: var(--color-brand-gradient);
    color: #fff;
    font-weight: 500;
    transition: box-shadow .2s ease-in-out
}

.button-cta:not([disabled]):focus,.button-cta:not([disabled]):hover {
    box-shadow: 0 0 .25rem hsla(0,0%,100%,.5),-.125rem -.125rem 1rem rgba(239,71,101,.5),.125rem .125rem 1rem rgba(255,154,90,.5);
    box-shadow: var(--button-focus-shadow)
}

.button:not(.button-cta) {
    background: #ebecef;
    background: var(--color-button-background);
    color: #54565c;
    color: var(--color-button-text)
}

.button[disabled] {
    background: #54565c;
    background: var(--color-button-text);
    color: #ebecef;
    color: var(--color-button-background)
}

.check {
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    height: 1.25rem;
    width: 1.25rem
}

.feature {
    margin-bottom: 2rem;
    margin-right: 2rem;
    max-width: 30rem;
    padding-left: 3.5rem;
    position: relative
}

.feature span {
    align-items: center;
    background: linear-gradient(to bottom right,#ef4765,#ff9a5a);
    background: var(--color-brand-gradient);
    border-radius: .75rem;
    border-radius: var(--border-radius);
    color: #fff;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 2.5rem
}

.feature h3,.feature p {
    margin: 0
}

.feature h3 {
    margin-bottom: .5rem
}

.feature p {
    color: #70737b;
    color: var(--color-text-dim)
}

.feature svg {
    width: 1.25rem
}

@media (min-width: 40em) {
    .feature-summary:not([hidden]),.features {
        display:flex;
        flex-wrap: wrap
    }

    .feature-summary:not([hidden]) li,.features li {
        width: 50%
    }
}

@media (min-width: 60em) {
    .feature-summary:not([hidden]) li,.features li {
        width:33.333%
    }
}

@media (min-width: 70em) {
    .feature-summary:not([hidden]),.features {
        margin-left:-3.5em;
        margin-right: -3.5em
    }
}

.editor {
    border: 2px solid #dadee6;
    border: 2px solid var(--editor-border-color);
    border-radius: .75rem;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    min-height: 34.75rem;
    padding: 2.25rem .5rem .5rem 0;
    position: relative
}

.editor>svg {
    color: #d6dae2;
    color: var(--editor-dot-color);
    left: 1rem;
    position: absolute;
    top: 1rem
}

.project {
    flex: 1;
    overflow: hidden
}

@media (min-width: 50em) {
    .editor {
        flex-direction:row;
        max-height: 70vh
    }

    .snippet {
        height: 100%;
        padding: .5rem 0 0
    }
}

@media (min-width: 70em) {
    .editor {
        margin-left:-4rem;
        margin-right: -4rem
    }
}

.logo {
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
    display: inline-block;
    height: 2.25rem;
    width: 6.25rem
}

.logo,.logo-light {
    background-image: url(../assets/logo.svg)
}

@media (color-index: 48) {
    .logo:not(.logo-light) {
        background-image:url(../assets/logo-inv.svg)
    }
}

@media (prefers-color-scheme: darkx) {
    .logo:not(.logo-light) {
        background-image:url(../assets/logo-inv.svg)
    }
}

header>.content-limit {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 4rem;
    min-height: var(--page-header-height);
    padding: 0 1rem
}

.page-footer .logo {
    background-image: url(../assets/logo-inv.svg);
    height: 3rem;
    width: 6rem
}

.page-footer .logo span {
    display: none
}

@media (min-width: 40em) {
    .page-footer>div {
        display:flex
    }

    .page-footer>div>div:first-of-type {
        flex: 1
    }

    .nav-sitemap {
        display: flex;
        flex: 3;
        margin-left: 2em
    }

    .nav-sitemap div {
        flex: 1
    }

    .nav-sitemap div+div {
        margin-left: 2em
    }
}

.page-changelog main>div h2 .version {
    color: #70737b;
    color: var(--color-text-dim);
    font-family: monospace;
    font-size: 1.125rem;
    font-weight: 400
}

.page-changelog main>div h2 .version span {
    color: #383a3f;
    color: var(--color-text-dark)
}

.overlay-demo-preview .button {
    align-items: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,.65);
    border-radius: 9999rem;
    box-shadow: 0 0 .25rem rgba(0,0,0,.5);
    box-shadow: var(--button-shadow-dark);
    color: #fff;
    color: var(--demo-overlay-edit-image-color);
    display: flex;
    font-size: .875em;
    left: calc(50% - 4rem);
    position: absolute;
    top: calc(50% - 1rem);
    z-index: 1
}

.overlay-demo-editor .brand-editor {
    --color-background: var(--brand-color-background);
    --color-foreground: var(--brand-color-foreground);
    --color-primary: rgba(0,0,0,0.65);
    --color-primary-dark: rgba(0,0,0,0.85);
    --color-primary-text: #fff
}

.overlay-demo-editor .brand-editor .TheBrandButtonExport {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.demo-loading {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    margin: 0;
    max-width: none;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.demo-loading span {
    font-size: .875em
}

.TheBrandModal.brand-editor {
    --color-background: var(--brand-color-background);
    --color-foreground: var(--brand-color-foreground);
    --editor-max-width: 70em;
    --editor-max-height: 50em
}

@-webkit-keyframes dot {
    0%,80%,to {
        transform: scale(0)
    }

    40% {
        transform: scale(1)
    }
}

@keyframes dot {
    0%,80%,to {
        transform: scale(0)
    }

    40% {
        transform: scale(1)
    }
}

.media-preview .download {
    align-items: center;
    display: flex;
    font-size: .75rem;
    left: 1rem;
    padding: .25rem .75rem .25rem .5rem;
    top: 1rem
}

.media-preview .download svg {
    margin-right: .25rem
}

.media-preview .code {
    bottom: 1rem;
    left: calc(50% - 1.125rem);
    position: absolute
}

.media-preview .close {
    padding: .25rem;
    right: 1rem;
    top: 1rem
}

@media screen and (prefers-reduced-motion:reduce) {
    .media-preview,.media-preview-item,.media-preview-state,.media-preview-state pre {
        transition-duration: 0s
    }
}

.checkout .form {
    background-color: #fff;
    border-right: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 0 3rem rgba(0,0,0,.1);
    box-sizing: border-box;
    color: #545465;
    margin-right: 3rem;
    min-width: 32rem;
    padding: 3rem
}

.checkout .pqina-paddle-checkout .loader {
    align-items: center;
    display: flex;
    position: absolute
}

.checkout .pqina-paddle-checkout .loader:after {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: spin;
    animation-name: spin;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    border: 3px solid rgba(0,0,0,.25);
    border-radius: 9999rem;
    border-top-color: #000;
    content: "";
    display: inline-block;
    height: .75rem;
    margin-left: .5rem;
    transform-origin: center;
    width: .75rem
}

.checkout[data-state=ready] .loader {
    display: none
}

@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@media (max-width: 54rem) {
    .checkout {
        flex-direction:column;
        margin: 0 auto;
        max-width: 30rem
    }

    .checkout .form {
        border: none;
        margin-right: 0;
        min-width: 18rem;
        overflow: auto;
        padding: 1rem 1rem 0;
        width: 100%
    }

    .checkout[data-state=ready] .summary {
        display: block
    }

    .checkout .summary-product-title {
        display: block;
        font-weight: 700
    }

    .checkout .summary-product-price {
        margin-right: .25rem
    }

    .checkout .summary-product-tax {
        display: block;
        font-size: .75rem;
        opacity: .5
    }

    .checkout .summary a {
        color: #000;
        font-size: .75rem;
        -webkit-text-decoration-color: rgba(0,0,0,.5);
        text-decoration-color: rgba(0,0,0,.5)
    }

    .checkout .pqina-paddle-checkout {
        margin-top: 1rem
    }

    .checkout .pqina-paddle-checkout>h2,.checkout .pqina-paddle-checkout>p {
        display: none
    }

    .checkout .pqina-paddle-checkout h2 {
        font-size: 16px;
        margin-bottom: -.75rem
    }

    .checkout .checkout-steps {
        margin: 1rem -1rem .5rem;
        padding: 0 1rem 1rem
    }

    .checkout .checkout-steps li {
        font-size: .875rem
    }

    .checkout .checkout-steps li:first-of-type,.checkout .checkout-steps li:first-of-type+li:before {
        display: none
    }

    .checkout .checkout-steps li:first-of-type+li {
        margin-left: 0
    }

    .checkout .product {
        box-shadow: 0 0 1rem rgba(0,0,0,.25);
        flex: 1;
        margin-top: 0;
        max-width: none;
        padding: 0 1rem 5rem
    }

    .checkout .product h2 {
        border-radius: .325rem;
        font-size: 1rem;
        margin-bottom: .5rem;
        padding: .25rem .5rem
    }

    .checkout .product-price-unit {
        font-size: 1.25rem
    }

    .checkout .product-description,.checkout .product-price-interval {
        font-size: 1rem
    }
}

[data-module=Tip] {
    position: relative
}

[data-module=PerfWarning] {
    bottom: 1rem;
    display: flex;
    justify-content: center;
    left: 1rem;
    pointer-events: none;
    position: fixed;
    right: 1rem;
    z-index: 10
}

[data-module=PerfWarning]:empty {
    display: none
}

[data-module=PerfWarning] svg {
    flex-shrink: 0;
    height: .75rem;
    margin-left: -.125rem;
    margin-right: .25rem;
    position: relative;
    top: .125rem;
    width: .75rem
}

[data-module=PerfWarning] a {
    color: currentColor;
    pointer-events: all;
    -webkit-text-decoration-color: hsla(0,0%,100%,.75);
    text-decoration-color: hsla(0,0%,100%,.75)
}

[data-module=PerfWarning] p {
    align-items: baseline;
    background: rgba(0,0,0,.9);
    border-radius: .5rem;
    box-shadow: 0 .125em .25em rgba(0,0,0,.25);
    color: #eee;
    display: inline-flex;
    font-size: .75rem;
    margin: 0;
    padding: .25rem .625rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[data-module=PerfWarning] button {
    background: none;
    border: 0;
    cursor: pointer;
    font-weight: 500;
    margin: 0 -.375rem 0 .5rem;
    padding: 0;
    pointer-events: all;
    width: 1rem
}

[data-module=SectionToggler] {
    align-items: center;
    display: flex;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    margin: 0
}

[data-module=SectionToggler] button {
    align-items: center;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    line-height: 2.5;
    position: relative;
    z-index: 2
}

[data-module=SectionToggler] svg {
    height: .75rem;
    margin-left: .25rem;
    width: .75rem
}

[data-module=SectionToggler]:not(.implicit)+div {
    background: #f2f5f8;
    background: var(--color-background-alt);
    font-size: 1rem;
    left: 0;
    padding: 4rem 0 0;
    padding: var(--page-header-height) 0 0 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
    z-index: 1
}

[data-module=SectionToggler]:not(.implicit)+div ul {
    display: block;
    margin-top: -.5rem;
    padding-bottom: .5rem
}

[data-module=SectionToggler]:not(.implicit)+div li {
    margin: 0
}

[data-module=SectionToggler]:not(.implicit)+div a {
    display: block;
    font-size: .875rem;
    padding: .5rem 1rem
}

[data-module=SectionToggler]:not(.implicit)+div:after {
    background: linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.1) 20%,transparent);
    content: "";
    height: .325rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 100%;
    transition: opacity .15s
}

[data-module=TabList] {
    display: flex;
    flex-wrap: wrap;
    list-style: none
}

[data-module=TabList] a {
    cursor: pointer;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[data-module=TabList] [aria-selected=true] a {
    position: relative;
    z-index: 1
}

[data-module=TabList][data-direction=vertical] {
    flex-direction: column
}

[data-module=LazyImage] {
    opacity: 0;
    transition: opacity .15s
}

[data-module=LazyImage][data-state=complete] {
    opacity: 1
}

[data-module=LazySnippet]>* {
    opacity: 0;
    transition: opacity .15s
}

[data-module=LazySnippet][data-state=complete]>* {
    opacity: 1;
    transition-delay: .25s
}

[data-module=ChangelogLink] {
    position: relative
}

[data-module=ChangelogLink]:after {
    background: linear-gradient(to bottom right,#ef4765,#ff9a5a);
    background: var(--color-brand-gradient);
    border-radius: 9999em;
    color: #fff;
    content: attr(data-dist);
    font-size: .6875em;
    font-weight: 500;
    height: 1.25em;
    line-height: 1.25em;
    margin-left: .25em;
    opacity: 0;
    position: absolute;
    text-align: center;
    transform: scale(.75);
    transition: transform .1s ease-out,opacity .1s ease-out;
    width: 1.25em
}

[data-module=ChangelogLink][data-dist]:after {
    opacity: 1;
    transform: scale(1)
}

[data-module=CodeControl] {
    padding-top: 1.75rem;
    position: relative
}

[data-module=CodeControl] pre {
    margin-top: 0
}

[data-module=CodeControl] div {
    display: flex;
    justify-content: space-between;
    left: .25rem;
    position: absolute;
    right: .5rem;
    top: .125rem
}

[data-module=CodeControl] button {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    font-size: .75em;
    margin: 0;
    outline: transparent;
    padding: 0;
    white-space: nowrap
}

[data-module=CodeControl] .icon {
    border-radius: 9999rem;
    display: block;
    margin-right: .125rem;
    padding: .25rem
}

[data-module=CodeControl] .button-copy .check {
    stroke-width: 2;
    stroke-dashoffset: 100;
    stroke-dasharray: 100
}

[data-module=CodeControl] .button-copy[data-state=copy-success] .icon {
    -webkit-animation: wiggle 2s .1s;
    animation: wiggle 2s .1s
}

[data-module=CodeControl] .button-copy[data-state=copy-success] .check {
    -webkit-animation: check .3s ease-in forwards;
    animation: check .3s ease-in forwards
}

[data-module=CodeControl] .button-fork .icon {
    color: #ffc107;
    margin-right: .25rem
}

[data-module=CodeControl] svg {
    display: block;
    height: .875rem;
    width: .875rem
}

@-webkit-keyframes check {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes check {
    to {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes wiggle {
    0% {
        transform: rotate(0deg)
    }

    5% {
        transform: rotate(10deg)
    }

    10% {
        transform: rotate(-10deg)
    }

    15% {
        transform: rotate(5deg)
    }

    20% {
        transform: rotate(-5deg)
    }

    25% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(0deg)
    }
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg)
    }

    5% {
        transform: rotate(10deg)
    }

    10% {
        transform: rotate(-10deg)
    }

    15% {
        transform: rotate(5deg)
    }

    20% {
        transform: rotate(-5deg)
    }

    25% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(0deg)
    }
}

div[data-module=EditorOptions] {
    --control-background: var(--color-tab-active-background);
    --control-foreground: var(--color-text-dim);
    --scroll-foreground: var(--control-background);
    --focus-visible: 0 0 0 1px var(--color-background),0 0 0 2px #2196f3;
    color: var(--control-foreground);
    overflow-y: auto;
    scrollbar-color: var(--scroll-foreground) #fff;
    scrollbar-color: var(--scroll-foreground) var(--color-background);
    scrollbar-width: thin
}

div[data-module=EditorOptions]::-webkit-scrollbar {
    height: .875rem
}

div[data-module=EditorOptions]::-webkit-scrollbar-thumb {
    background: var(--scroll-foreground);
    border: .25rem solid #fff;
    border: .25rem solid var(--color-background);
    border-radius: 9999rem
}

div[data-module=EditorOptions]::-webkit-scrollbar-corner {
    background-color: #fff;
    background-color: var(--color-background);
    border-radius: 0 .75rem .75rem 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0
}

div[data-module=EditorOptions]::-webkit-scrollbar-track {
    background-color: #fff;
    background-color: var(--color-background);
    border-radius: .75rem;
    border-radius: var(--border-radius)
}

div[data-module=EditorOptions] label,div[data-module=EditorOptions] legend,div[data-module=EditorOptions] select {
    font-size: .75rem
}

div[data-module=EditorOptions] legend {
    font-weight: 300;
    letter-spacing: .06125em;
    padding: 0;
    text-transform: uppercase
}

div[data-module=EditorOptions] label,div[data-module=EditorOptions] legend,div[data-module=EditorOptions] select {
    cursor: pointer;
    transition: box-shadow .2s ease-in-out
}

div[data-module=EditorOptions] fieldset {
    border: none;
    margin: 0;
    padding: .5rem 0 0
}

div[data-module=EditorOptions] [type=checkbox]:focus-visible+label,div[data-module=EditorOptions] select:focus-visible {
    box-shadow: var(--focus-visible)
}

div[data-module=EditorOptions] .control {
    position: relative
}

div[data-module=EditorOptions] .control+.control {
    margin-top: .5rem
}

div[data-module=EditorOptions] .control+.controls,div[data-module=EditorOptions] .control+fieldset.control {
    margin-top: 1.5rem
}

div[data-module=EditorOptions] .control-group>[data-type=checkbox]+[data-type=checkbox] {
    margin-top: .5rem
}

div[data-module=EditorOptions] .radio-set .control {
    margin: 0
}

div[data-module=EditorOptions] .radio-set .control+.control {
    margin-left: .5rem
}

div[data-module=EditorOptions] .radio-set .control label:after,div[data-module=EditorOptions] .radio-set .control label:before {
    border-radius: inherit;
    content: "";
    height: 1.75rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1.75rem;
    z-index: 2
}

div[data-module=EditorOptions] .radio-set .control:not(:last-of-type) label :before {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    box-shadow: inset 0 0 0 1px var(--color-tab-outline);
    z-index: 1
}

div[data-module=EditorOptions] .radio-set label {
    align-items: center;
    border-radius: .325rem;
    border-radius: var(--brand-border-radius);
    display: flex;
    height: 1.75rem;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 1.75rem;
    z-index: 1
}

div[data-module=EditorOptions] .radio-set label+label {
    margin-left: .5rem
}

div[data-module=EditorOptions] .radio-set label img {
    border-radius: inherit;
    display: block;
    height: 1.75rem;
    transition: filter .15s;
    width: 1.75rem
}

div[data-module=EditorOptions] .radio-set label svg {
    height: .75rem;
    margin: 0;
    width: .75rem
}

div[data-module=EditorOptions] .radio-set img {
    filter: grayscale(100%) contrast(30%) brightness(150%);
    filter: var(--brand-thumb-filter)
}

div[data-module=EditorOptions] .radio-set input.focus-visible+label:after {
    box-shadow: var(--focus-visible)
}

div[data-module=EditorOptions] .radio-set input:focus-visible+label:after {
    box-shadow: var(--focus-visible)
}

div[data-module=EditorOptions] .radio-set input:checked+label img {
    filter: none
}

div[data-module=EditorOptions] .radio-set input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px
}

div[data-module=EditorOptions] [data-type=checkbox] label {
    align-items: center;
    box-shadow: none!important;
    display: flex;
    position: relative
}

div[data-module=EditorOptions] [data-type=checkbox] label:after,div[data-module=EditorOptions] [data-type=checkbox] label:before {
    content: "";
    display: inline-block;
    height: 1rem;
    pointer-events: none;
    width: 1rem
}

div[data-module=EditorOptions] [data-type=checkbox] label:before {
    background-color: var(--control-background);
    border-radius: .25rem;
    margin-right: .5rem
}

div[data-module=EditorOptions] [data-type=checkbox] input:focus-visible+label:before {
    box-shadow: var(--focus-visible)
}

div[data-module=EditorOptions] [data-type=checkbox] label:after {
    background-position: .125rem .125rem;
    background-repeat: no-repeat;
    background-size: .75rem .75rem;
    opacity: 0;
    position: absolute;
    z-index: 1
}

div[data-module=EditorOptions] [data-type=checkbox] input:checked+label:after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%23000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
    filter: invert(19%) sepia(9%) saturate(481%) hue-rotate(185deg) brightness(98%) contrast(88%);
    filter: var(--image-filter);
    opacity: 1
}

div[data-module=EditorOptions] [data-type=checkbox] input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px
}

div[data-module=EditorOptions] [data-type=select] {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    position: relative
}

div[data-module=EditorOptions] [data-type=select] label {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px
}

div[data-module=EditorOptions] [data-type=select] select {
    align-self: stretch;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--control-background);
    border: 0;
    border-radius: .25rem;
    color: currentColor;
    height: 1.5rem;
    margin: 0;
    outline: none;
    padding: 0 1.5rem 0 .375rem
}

div[data-module=EditorOptions] [data-type=select]:after {
    background-image: url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-position: .5rem;
    background-repeat: no-repeat;
    background-size: .75rem .75rem;
    content: "";
    filter: invert(19%) sepia(9%) saturate(481%) hue-rotate(185deg) brightness(98%) contrast(88%);
    filter: var(--image-filter);
    height: 1.5rem;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 1.5rem;
    z-index: 1
}

[data-module=EditorPresets] {
    align-items: center;
    display: none;
    justify-content: center;
    margin-bottom: 1.125rem
}

[data-module=EditorPresets] input,[data-module=EditorPresets] label {
    cursor: pointer
}

[data-module=EditorPresets] input {
    margin: 0
}

[data-module=EditorPresets] label {
    color: #777980;
    color: var(--color-tab-text);
    font-size: .75rem;
    padding-left: .5rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[data-module=EditorPresets] input~input {
    margin-left: 1rem
}

[data-module=EditorPresets] input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #ebecef;
    background-color: var(--color-tab-active-background);
    border-radius: 9999rem;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    box-shadow: inset 0 0 0 1px var(--color-tab-outline);
    height: 1rem;
    width: 1rem
}

[data-module=EditorPresets] input:checked {
    background-image: radial-gradient(circle,#777980 30%,transparent 31%);
    background-image: radial-gradient(circle,var(--color-tab-text) 30%,transparent 31%)
}

@media (min-width: 60rem) {
    [data-module=EditorPresets] {
        display:flex
    }
}

[data-module=Codebox] {
    --tab-active-text-color: #ee7c6c;
    --tab-border-color: var(--code-block-border);
    --tab-background-color: var(--color-code-block-background);
    --tab-sub-background-color: #f2f4f6;
    --tab-sub-active-background-color: #fff;
    --tab-sub-border-color: var(--code-block-border);
    --tab-panel-border-top: none;
    margin: 2rem 0
}

[data-module=Codebox] ul[role=tablist] {
    display: flex;
    margin: 0;
    padding: 0
}

[data-module=Codebox] ul[role=tablist] li[role=tab] {
    margin: 0
}

[data-module=Codebox] ul[role=tablist] li[role=tab][aria-selected=true] {
    position: relative
}

[data-module=Codebox] ul[role=tablist] li[role=tab][aria-selected=true] a {
    color: var(--tab-active-text-color)
}

[data-module=Codebox] ul[role=tablist] li[role=tab][aria-selected=true] img {
    filter: invert(50%) sepia(100%) saturate(160%) hue-rotate(320deg) brightness(90%) contrast(180%)
}

[data-module=Codebox] ul[role=tablist] a {
    align-items: center;
    color: #53565c;
    color: var(--color-text);
    display: flex
}

[data-module=Codebox] ul[role=tablist] img {
    filter: invert(19%) sepia(9%) saturate(481%) hue-rotate(185deg) brightness(98%) contrast(88%);
    filter: var(--image-filter);
    margin-right: .5rem;
    pointer-events: none
}

[data-module=Codebox]>ul[role=tablist] li a {
    font-size: .825rem;
    padding: 1rem
}

[data-module=Codebox] div[role=tabpanel] {
    position: relative
}

[data-module=Codebox] div[role=tabpanel] ul[role=tablist] {
    background-color: var(--tab-sub-background-color);
    border-left: 1px solid var(--tab-sub-border-color);
    border-radius: .75rem .75rem 0 0;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border-right: 1px solid var(--tab-sub-border-color);
    border-top: 1px solid var(--tab-sub-border-color);
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0;
    overflow: hidden;
    padding-right: 7rem
}

[data-module=Codebox] div[role=tabpanel] ul[role=tablist] a {
    border: none;
    border-radius: none;
    box-sizing: border-box;
    display: block;
    font-size: .75rem;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    padding: .5rem 1rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

[data-module=Codebox] div[role=tabpanel] ul[role=tablist] li {
    border-right: 1px solid var(--tab-sub-border-color);
    overflow: hidden
}

[data-module=Codebox] div[role=tabpanel] ul[role=tablist] [aria-selected=true] a {
    background-color: var(--tab-sub-active-background-color)
}

[data-module=Codebox] div[role=tabpanel] ul[role=tablist] [aria-selected=true] a:before {
    background-image: linear-gradient(to bottom right,#ef4765,#ff9a5a);
    background-image: var(--color-brand-gradient);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

[data-module=Codebox]>* {
    margin: 0;
    max-width: none;
    width: 100%
}

[data-module=Codebox] pre {
    margin: 0
}

[data-module=Codebox] [role=tabpanel] [role=tabpanel] {
    border-top: var(--tab-panel-border-top);
    margin-top: -1px
}

[data-module=Codebox] [role=tabpanel] [role=tabpanel] pre {
    border-radius: 0 0 .75rem .75rem;
    border-radius: 0 0 var(--border-radius) var(--border-radius)
}

@media (color-index: 48) {
    [data-module=Codebox] {
        --tab-border-color:var(--code-block-border);
        --tab-background-color: var(--color-code-block-background);
        --tab-sub-background-color: var(--color-code-block-background);
        --tab-sub-active-background-color: var(--color-code-block-background);
        --tab-sub-border-color: var(--code-block-border);
        --tab-panel-border-top: 1px solid var(--color-background)
    }

    [data-module=Codebox] .button-demo {
        border-left: 1px solid #fff;
        border-left: 1px solid var(--color-background)
    }
}

@media (prefers-color-scheme: darkx) {
    [data-module=Codebox] {
        --tab-border-color:var(--code-block-border);
        --tab-background-color: var(--color-code-block-background);
        --tab-sub-background-color: var(--color-code-block-background);
        --tab-sub-active-background-color: var(--color-code-block-background);
        --tab-sub-border-color: var(--code-block-border);
        --tab-panel-border-top: 1px solid var(--color-background)
    }

    [data-module=Codebox] .button-demo {
        border-left: 1px solid #fff;
        border-left: 1px solid var(--color-background)
    }
}