@import"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";.TeamHero[data-v-96f4b379] {
    padding: 48px 24px
}

@media (min-width: 768px) {
    .TeamHero[data-v-96f4b379] {
        padding:64px 32px 48px
    }
}

.container[data-v-96f4b379] {
    margin: 0 auto;
    max-width: 960px
}

.title[data-v-96f4b379],.lead[data-v-96f4b379] {
    transition: color .25s
}

.title[data-v-96f4b379] {
    line-height: 32px;
    font-size: 32px;
    font-weight: 500
}

@media (min-width: 768px) {
    .title[data-v-96f4b379] {
        line-height:40px;
        font-size: 40px
    }
}

.lead[data-v-96f4b379] {
    padding-top: 8px;
    font-size: 16px;
    font-weight: 500;
    max-width: 512px;
    color: var(--vt-c-text-2)
}

.action[data-v-96f4b379] {
    padding-top: 4px
}

.action[data-v-96f4b379] a {
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vt-c-brand);
    transition: color .25s
}

.action[data-v-96f4b379] a:hover {
    color: var(--vt-c-brand-dark)
}

.TeamMember[data-v-ddc220f8] {
    position: relative;
    background-color: var(--vt-c-bg-soft);
    transition: background-color .5s
}

@media (min-width: 512px) {
    .TeamMember[data-v-ddc220f8] {
        display:flex
    }
}

@media (min-width: 640px) {
    .TeamMember[data-v-ddc220f8] {
        border-radius:8px
    }
}

.sponsor[data-v-ddc220f8] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    border: 1px solid #fd1d7c;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #fd1d7c;
    transition: color .25s,background-color .25s
}

.sponsor[data-v-ddc220f8]:hover {
    color: var(--vt-c-white);
    background-color: #fd1d7c
}

.sponsor-icon[data-v-ddc220f8] {
    margin-right: 6px;
    width: 14px;
    height: 14px;
    fill: currentColor
}

.avatar[data-v-ddc220f8] {
    flex-shrink: 0;
    padding: 32px 32px 0
}

@media (min-width: 512px) {
    .avatar[data-v-ddc220f8] {
        padding:32px 0 0 32px
    }
}

.avatar-img[data-v-ddc220f8] {
    border-radius: 50%;
    width: 96px;
    height: 96px;
    transform: translate(-8px)
}

@media (min-width: 512px) {
    .avatar-img[data-v-ddc220f8] {
        width:80px;
        height: 80px;
        transform: translate(0)
    }
}

.data[data-v-ddc220f8] {
    padding: 20px 32px 32px
}

@media (min-width: 512px) {
    .data[data-v-ddc220f8] {
        padding:40px 32px 32px
    }
}

.name[data-v-ddc220f8] {
    font-size: 20px;
    font-weight: 500
}

.org[data-v-ddc220f8] {
    padding-top: 4px;
    line-height: 20px;
    max-width: 320px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vt-c-text-2);
    transition: color .5s
}

.company[data-v-ddc220f8] {
    color: var(--vt-c-text-1);
    transition: color .25s
}

.company.link[data-v-ddc220f8]:hover {
    color: var(--vt-c-brand);
    transition: color .5s
}

.profiles[data-v-ddc220f8] {
    padding-top: 16px
}

.desc[data-v-ddc220f8] {
    display: flex
}

.desc+.desc[data-v-ddc220f8] {
    padding-top: 12px
}

.desc-title[data-v-ddc220f8] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding-right: 12px;
    height: 20px
}

.desc-icon[data-v-ddc220f8] {
    width: 16px;
    height: 16px;
    fill: var(--vt-c-text-2);
    transition: fill .25s
}

.desc-icon.code[data-v-ddc220f8] {
    transform: translateY(1px)
}

.desc-list[data-v-ddc220f8] {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -4px
}

.desc-item[data-v-ddc220f8] {
    padding: 0 4px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vt-c-text-1);
    transition: color .5s
}

.desc-item[data-v-ddc220f8]:after {
    margin-left: 8px;
    content: "•";
    color: var(--vt-c-text-3);
    transition: color .25s
}

.desc-item[data-v-ddc220f8]:last-child:after {
    display: none
}

.desc-text[data-v-ddc220f8] {
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vt-c-text-1);
    transition: color .25s
}

.desc-link[data-v-ddc220f8] {
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vt-c-brand);
    transition: color .25s
}

.desc-link[data-v-ddc220f8]:hover {
    color: var(--vt-c-brand-dark)
}

.social-list[data-v-ddc220f8] {
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    padding-top: 16px
}

.social-item+.social-item[data-v-ddc220f8] {
    padding-left: 8px
}

.social-link[data-v-ddc220f8] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    color: var(--vt-c-text-2);
    transition: color .25s
}

.social-link[data-v-ddc220f8]:hover {
    color: var(--vt-c-text-1)
}

.social-icon[data-v-ddc220f8] {
    width: 20px;
    height: 20px;
    fill: currentColor
}

@media (min-width: 768px) {
    .TeamList[data-v-481123ff] {
        padding:0 32px
    }
}

.container[data-v-481123ff] {
    border-top: 1px solid var(--vt-c-divider-light);
    padding-top: 24px
}

@media (min-width: 768px) {
    .container[data-v-481123ff] {
        margin:0 auto;
        display: flex;
        align-items: flex-start;
        max-width: 960px
    }
}

.info[data-v-481123ff] {
    flex-shrink: 0;
    padding: 0 24px;
    max-width: 512px
}

@media (min-width: 768px) {
    .info[data-v-481123ff] {
        position:sticky;
        top: calc(var(--vt-banner-height, 0px) + 32px);
        left: 0;
        padding: 0 24px 0 0;
        width: 256px
    }

    html.banner-dismissed .info[data-v-481123ff] {
        top: 32px
    }
}

@media (min-width: 960px) {
    .info[data-v-481123ff] {
        top:calc(var(--vt-banner-height, 0px) + 88px);
        padding: 0 64px 0 0;
        width: 384px
    }

    html.banner-dismissed .info[data-v-481123ff] {
        top: 88px
    }
}

.title[data-v-481123ff] {
    font-size: 20px;
    font-weight: 500
}

.lead[data-v-481123ff] {
    padding-top: 8px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vt-c-text-2)
}

.members[data-v-481123ff] {
    padding-top: 24px
}

@media (min-width: 768px) {
    .members[data-v-481123ff] {
        flex-grow:1;
        padding-top: 0
    }
}

.member+.member[data-v-481123ff] {
    padding-top: 16px
}

@media (min-width: 640px) {
    .member[data-v-481123ff] {
        margin:0 auto;
        max-width: 592px
    }
}

@media (min-width: 768px) {
    .member[data-v-481123ff] {
        margin:0;
        max-width: 100%
    }
}

.TeamPage[data-v-b8175b5e] {
    padding-bottom: 16px
}

@media (min-width: 768px) {
    .TeamPage[data-v-b8175b5e] {
        padding-bottom:96px
    }
}

.TeamList+.TeamList[data-v-b8175b5e] {
    padding-top: 64px
}

#api-index[data-v-10e2fb76] {
    max-width: 1024px;
    margin: 0 auto;
    padding: 64px 32px
}

h1[data-v-10e2fb76],h2[data-v-10e2fb76],h3[data-v-10e2fb76] {
    font-weight: 600;
    line-height: 1
}

h1[data-v-10e2fb76],h2[data-v-10e2fb76] {
    letter-spacing: -.02em
}

h1[data-v-10e2fb76] {
    font-size: 38px
}

h2[data-v-10e2fb76] {
    font-size: 24px;
    color: var(--vt-c-text-1);
    margin: 36px 0;
    transition: color .5s;
    padding-top: 36px;
    border-top: 1px solid var(--vt-c-divider-light)
}

h3[data-v-10e2fb76] {
    letter-spacing: -.01em;
    color: var(--vt-c-green);
    font-size: 18px;
    margin-bottom: 1em;
    transition: color .5s
}

.api-section[data-v-10e2fb76] {
    margin-bottom: 64px
}

.api-groups a[data-v-10e2fb76] {
    font-size: 15px;
    font-weight: 500;
    line-height: 2;
    color: var(--vt-c-text-code);
    transition: color .5s
}

.dark api-groups a[data-v-10e2fb76] {
    font-weight: 400
}

.api-groups a[data-v-10e2fb76]:hover {
    color: var(--vt-c-green);
    transition: none
}

.api-group[data-v-10e2fb76] {
    break-inside: avoid;
    overflow: auto;
    margin-bottom: 20px;
    background-color: var(--vt-c-bg-soft);
    border-radius: 8px;
    padding: 24px 28px;
    transition: background-color .5s
}

.header[data-v-10e2fb76] {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.api-filter[data-v-10e2fb76] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem
}

#api-filter[data-v-10e2fb76] {
    border: 1px solid var(--vt-c-divider);
    border-radius: 8px;
    padding: 6px 12px;
    transition: box-shadow .25s ease
}

#api-filter[data-v-10e2fb76]:focus {
    box-shadow: 0 0 4pt #00d47499
}

.api-filter[data-v-10e2fb76]:focus {
    border-color: var(--vt-c-green-light)
}

.no-match[data-v-10e2fb76] {
    font-size: 1.2em;
    color: var(--vt-c-text-3);
    text-align: center;
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid var(--vt-c-divider-light)
}

@media (max-width: 768px) {
    #api-index[data-v-10e2fb76] {
        padding:42px 24px
    }

    h1[data-v-10e2fb76] {
        font-size: 32px;
        margin-bottom: 24px
    }

    h2[data-v-10e2fb76] {
        font-size: 22px;
        margin: 42px 0 32px;
        padding-top: 32px
    }

    .api-groups a[data-v-10e2fb76] {
        font-size: 14px
    }

    .header[data-v-10e2fb76] {
        display: block
    }
}

@media (min-width: 768px) {
    .api-groups[data-v-10e2fb76] {
        columns:2
    }
}

@media (min-width: 1024px) {
    .api-groups[data-v-10e2fb76] {
        columns:3
    }
}

html body {
    font-synthesis: style
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance:"Regular";src: url(/assets/inter-roman-cyrillic.5f2c6c8c.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance:"Regular";src: url(/assets/inter-roman-cyrillic-ext.e75737ce.woff2) format("woff2");
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance:"Regular";src: url(/assets/inter-roman-greek.d5a6d92a.woff2) format("woff2");
    unicode-range: U+0370-03FF
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance:"Regular";src: url(/assets/inter-roman-greek-ext.ab0619bc.woff2) format("woff2");
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance:"Regular";src: url(/assets/inter-roman-latin.2ed14f66.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance:"Regular";src: url(/assets/inter-roman-latin-ext.0030eebd.woff2) format("woff2");
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance:"Regular";src: url(/assets/inter-roman-vietnamese.14ce25a6.woff2) format("woff2");
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance:"Italic";src: url(/assets/inter-italic-cyrillic.ea42a392.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance:"Italic";src: url(/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2) format("woff2");
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance:"Italic";src: url(/assets/inter-italic-greek.8f4463c4.woff2) format("woff2");
    unicode-range: U+0370-03FF
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance:"Italic";src: url(/assets/inter-italic-greek-ext.4fbe9427.woff2) format("woff2");
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance:"Italic";src: url(/assets/inter-italic-latin.bd3b6f56.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance:"Italic";src: url(/assets/inter-italic-latin-ext.bd8920cc.woff2) format("woff2");
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Inter var;
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance:"Italic";src: url(/assets/inter-italic-vietnamese.6ce511fb.woff2) format("woff2");
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Chinese Quotes;
    src: local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");
    unicode-range: U+2018,U+2019,U+201C,U+201D
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace,monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,strong {
    font-weight: bolder
}

code,kbd,samp {
    font-family: monospace,monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

button,[type=button],[type=reset],[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

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

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

:root {
    --vt-c-white: #ffffff;
    --vt-c-white-soft: #f9f9f9;
    --vt-c-white-mute: #f1f1f1;
    --vt-c-black: #1a1a1a;
    --vt-c-black-pure: #000000;
    --vt-c-black-soft: #242424;
    --vt-c-black-mute: #2f2f2f;
    --vt-c-indigo: #213547;
    --vt-c-indigo-soft: #476582;
    --vt-c-indigo-light: #aac8e4;
    --vt-c-gray: #8e8e8e;
    --vt-c-gray-light-1: #aeaeae;
    --vt-c-gray-light-2: #c7c7c7;
    --vt-c-gray-light-3: #d1d1d1;
    --vt-c-gray-light-4: #e5e5e5;
    --vt-c-gray-light-5: #f2f2f2;
    --vt-c-gray-dark-1: #636363;
    --vt-c-gray-dark-2: #484848;
    --vt-c-gray-dark-3: #3a3a3a;
    --vt-c-gray-dark-4: #282828;
    --vt-c-gray-dark-5: #202020;
    --vt-c-divider-light-1: rgba(60, 60, 60, .29);
    --vt-c-divider-light-2: rgba(60, 60, 60, .12);
    --vt-c-divider-dark-1: rgba(84, 84, 84, .65);
    --vt-c-divider-dark-2: rgba(84, 84, 84, .48);
    --vt-c-text-light-1: var(--vt-c-indigo);
    --vt-c-text-light-2: rgba(60, 60, 60, .7);
    --vt-c-text-light-3: rgba(60, 60, 60, .33);
    --vt-c-text-light-4: rgba(60, 60, 60, .18);
    --vt-c-text-light-code: var(--vt-c-indigo-soft);
    --vt-c-text-dark-1: rgba(255, 255, 255, .87);
    --vt-c-text-dark-2: rgba(235, 235, 235, .6);
    --vt-c-text-dark-3: rgba(235, 235, 235, .38);
    --vt-c-text-dark-4: rgba(235, 235, 235, .18);
    --vt-c-text-dark-code: var(--vt-c-indigo-light);
    --vt-c-green: #42b883;
    --vt-c-green-light: #42d392;
    --vt-c-green-lighter: #35eb9a;
    --vt-c-green-dark: #33a06f;
    --vt-c-green-darker: #155f3e;
    --vt-c-blue: #3b8eed;
    --vt-c-blue-light: #549ced;
    --vt-c-blue-lighter: #50a2ff;
    --vt-c-blue-dark: #3468a3;
    --vt-c-blue-darker: #255489;
    --vt-c-yellow: #ffc517;
    --vt-c-yellow-light: #ffe417;
    --vt-c-yellow-lighter: #ffff17;
    --vt-c-yellow-dark: #e0ad15;
    --vt-c-yellow-darker: #bc9112;
    --vt-c-red: #ed3c50;
    --vt-c-red-light: #f43771;
    --vt-c-red-lighter: #fd1d7c;
    --vt-c-red-dark: #cd2d3f;
    --vt-c-red-darker: #ab2131;
    --vt-c-purple: #de41e0;
    --vt-c-purple-light: #e936eb;
    --vt-c-purple-lighter: #f616f8;
    --vt-c-purple-dark: #823c83;
    --vt-c-purple-darker: #602960
}

:root {
    --vt-c-bg: var(--vt-c-white);
    --vt-c-bg-soft: var(--vt-c-white-soft);
    --vt-c-bg-mute: var(--vt-c-white-mute);
    --vt-c-divider: var(--vt-c-divider-light-1);
    --vt-c-divider-light: var(--vt-c-divider-light-2);
    --vt-c-divider-inverse: var(--vt-c-divider-dark-1);
    --vt-c-divider-inverse-light: var(--vt-c-divider-dark-2);
    --vt-c-text-1: var(--vt-c-text-light-1);
    --vt-c-text-2: var(--vt-c-text-light-2);
    --vt-c-text-3: var(--vt-c-text-light-3);
    --vt-c-text-4: var(--vt-c-text-light-4);
    --vt-c-text-code: var(--vt-c-text-light-code);
    --vt-c-text-inverse-1: var(--vt-c-text-dark-1);
    --vt-c-text-inverse-2: var(--vt-c-text-dark-2);
    --vt-c-text-inverse-3: var(--vt-c-text-dark-3);
    --vt-c-text-inverse-4: var(--vt-c-text-dark-4);
    --vt-c-brand: var(--vt-c-green);
    --vt-c-brand-light: var(--vt-c-green-light);
    --vt-c-brand-dark: var(--vt-c-green-dark);
    --vt-c-brand-highlight: var(--vt-c-brand-dark)
}

.dark {
    --vt-c-bg: var(--vt-c-black);
    --vt-c-bg-soft: var(--vt-c-black-soft);
    --vt-c-bg-mute: var(--vt-c-black-mute);
    --vt-c-divider: var(--vt-c-divider-dark-1);
    --vt-c-divider-light: var(--vt-c-divider-dark-2);
    --vt-c-divider-inverse: var(--vt-c-divider-light-1);
    --vt-c-divider-inverse-light: var(--vt-c-divider-light-2);
    --vt-c-text-1: var(--vt-c-text-dark-1);
    --vt-c-text-2: var(--vt-c-text-dark-2);
    --vt-c-text-3: var(--vt-c-text-dark-3);
    --vt-c-text-4: var(--vt-c-text-dark-4);
    --vt-c-text-code: var(--vt-c-text-dark-code);
    --vt-c-text-inverse-1: var(--vt-c-text-light-1);
    --vt-c-text-inverse-2: var(--vt-c-text-light-2);
    --vt-c-text-inverse-3: var(--vt-c-text-light-3);
    --vt-c-text-inverse-4: var(--vt-c-text-light-4);
    --vt-c-brand-highlight: var(--vt-c-brand-light)
}

:root {
    --vt-font-family-base: "Inter var experimental", "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --vt-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace
}

:root {
    --vt-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
    --vt-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);
    --vt-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
    --vt-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
    --vt-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)
}

:root {
    --vt-nav-height: 55px
}

*,:before,:after {
    box-sizing: border-box
}

body {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    font-family: var(--vt-font-family-base);
    letter-spacing: .2px;
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;
    color: var(--vt-c-text-1);
    background-color: var(--vt-c-bg);
    direction: ltr;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    transition: color .5s,background-color .5s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word
}

blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {
    margin: 0
}

h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    font-weight: inherit
}

a,area,button,[role=button],input,label,select,summary,textarea {
    touch-action: manipulation
}

a {
    color: inherit;
    text-decoration: inherit
}

ol,ul {
    list-style: none;
    margin: 0;
    padding: 0
}

pre,code,kbd,samp {
    font-family: var(--vt-font-family-mono)
}

img,svg,video,canvas,audio,iframe,embed,object {
    display: block;
    vertical-align: middle
}

img,video {
    max-width: 100%;
    height: auto
}

button,input,optgroup,select,textarea {
    border: 0;
    padding: 0;
    line-height: inherit;
    color: inherit
}

button {
    padding: 0;
    background-color: transparent;
    background-image: none
}

button,[role=button] {
    cursor: pointer
}

button:focus,button:focus-visible {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

button:focus:not(:focus-visible) {
    outline: none!important
}

input:focus,textarea:focus,select:focus {
    outline: none
}

table {
    border-collapse: collapse
}

input {
    background-color: transparent
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: var(--vt-c-text-3)
}

input::-ms-input-placeholder,textarea::-ms-input-placeholder {
    color: var(--vt-c-text-3)
}

input::placeholder,textarea::placeholder {
    color: var(--vt-c-text-3)
}

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

textarea {
    resize: vertical
}

select {
    -webkit-appearance: none
}

fieldset {
    margin: 0;
    padding: 0
}

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

.vt-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.6);
    transition: opacity .5s
}

.vt-backdrop.fade-enter-from,.vt-backdrop.fade-leave-to {
    opacity: 0
}

.vt-backdrop.fade-leave-active {
    transition-duration: .3s
}

@media (min-width: 960px) {
    .vt-backdrop {
        display:none
    }
}

.vt-code-group {
    display: flex;
    flex-direction: column
}

.vt-code-group-contents .vt-code-group-content div[class*=language-] {
    margin-top: 0;
    border-top-left-radius: 0
}

.vt-code-group-tabs {
    display: flex;
    overflow: auto
}

.vt-code-group-tab {
    white-space: pre;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--vt-c-text-inverse-1);
    background: #292d3ef0;
    border-bottom-color: #ffffff4d;
    padding: 6px 24px;
    border-width: 2px;
    border-style: solid;
    border-top: transparent;
    border-right: transparent;
    border-left: transparent;
    cursor: pointer;
    transition: border,background-color .2s;
    transition-property: border,background-color;
    transition-duration: .2s,.2s;
    transition-timing-function: ease,ease;
    transition-delay: 0s,0s
}

.vt-code-group-tab.vt-code-group-tab-active {
    background: #292d3e;
    border-bottom: 2px solid var(--vt-c-brand)
}

.vt-code-group-tab:first-child {
    border-top-left-radius: 8px
}

.vt-code-group-tab:last-child {
    border-top-right-radius: 8px
}

.dark .vt-code-group-tab {
    color: var(--vt-c-text-1)
}

.dark .vt-code-group-tab:not(.vt-code-group-tab-active) {
    border-bottom: 2px solid rgba(255,255,255,.2);
    background: var(--vt-c-black-mute)
}

.dark .vt-code-group-tab.vt-code-group-tab-active {
    background: var(--vt-c-black-soft)
}

@media (max-width: 639px) {
    .vt-code-group-tabs {
        margin:0 -24px
    }

    .vt-code-group-tab,.vt-code-group-tab:first-child,.vt-code-group-tab:last-child {
        flex-grow: 1;
        border-radius: 0
    }
}

.vt-doc {
    font-size: 16px;
    line-height: 1.7
}

.vt-doc h1,.vt-doc h2,.vt-doc h3,.vt-doc h4,.vt-doc h5,.vt-doc h6 {
    position: relative;
    font-weight: 600;
    line-height: 1.5;
    outline: none
}

.vt-doc h1 {
    margin: 0 0 3rem;
    font-size: 38px;
    line-height: 1.4;
    letter-spacing: -.02em
}

.vt-doc h2 {
    margin: 4rem 0 1.8rem;
    border-top: 1px solid var(--vt-c-divider-light);
    padding-top: 1.8rem;
    font-size: 24px;
    letter-spacing: -.02em
}

@media (max-width: 768px) {
    .vt-doc h1 {
        font-size:32px;
        margin-bottom: 1.8rem
    }

    .vt-doc h1+h2 {
        margin-top: 36px
    }
}

.vt-doc h3 {
    font-size: 19px;
    letter-spacing: -.01em;
    margin: 3rem 0 1.25rem
}

.vt-doc h2+h3 {
    margin-top: 0
}

.vt-doc h4 {
    font-size: 17px;
    margin: 1.8rem 0 1rem
}

.vt-doc .header-anchor {
    float: left;
    margin-left: -.87em;
    padding-right: .23em;
    font-weight: 500;
    opacity: 0;
    transition: color .25s,opacity .25s
}

.vt-doc .header-anchor:before {
    content: "#"
}

.vt-doc h1:hover .header-anchor,.vt-doc h1 .header-anchor:focus,.vt-doc h2:hover .header-anchor,.vt-doc h2 .header-anchor:focus,.vt-doc h3:hover .header-anchor,.vt-doc h3 .header-anchor:focus,.vt-doc h4:hover .header-anchor,.vt-doc h4 .header-anchor:focus,.vt-doc h5:hover .header-anchor,.vt-doc h5 .header-anchor:focus,.vt-doc h6:hover .header-anchor,.vt-doc h6 .header-anchor:focus {
    opacity: 1
}

.vt-doc hr {
    border: none;
    border-top: 1px solid var(--vt-c-divider-light);
    margin: 1.8rem 0
}

.vt-doc p,.vt-doc ul,.vt-doc ol,.vt-doc summary {
    margin-bottom: 1.2em
}

.vt-doc a {
    font-weight: 500;
    color: var(--vt-c-brand);
    transition: color .25s;
    text-decoration-style: dotted
}

.vt-doc a:hover {
    color: var(--vt-c-brand-highlight)
}

.vt-doc strong {
    font-weight: 600
}

.vt-doc table {
    display: block;
    border-collapse: collapse;
    margin: 1rem 0;
    overflow-x: auto
}

.vt-doc tr {
    border-top: 1px solid var(--vt-c-divider);
    transition: background-color .5s
}

.vt-doc tr:nth-child(2n) {
    background-color: var(--vt-c-bg-soft)
}

.vt-doc th,.vt-doc td {
    border: 1px solid var(--vt-c-divider);
    padding: .6em 1em
}

.vt-doc blockquote {
    margin: 1rem 0;
    border-left: .2rem solid var(--vt-c-divider);
    padding-left: 1rem;
    transition: border-color .5s
}

.vt-doc blockquote>p {
    margin: 0;
    font-size: 16px;
    color: var(--vt-c-text-2);
    transition: color .5s
}

.vt-doc figure {
    margin: 0
}

.vt-doc img {
    max-width: 100%
}

.vt-doc p>img {
    margin: 28px auto
}

.vt-doc ol {
    counter-reset: item
}

.vt-doc ol[start="2"] {
    counter-reset: item 1
}

.vt-doc ol[start="3"] {
    counter-reset: item 2
}

.vt-doc ol[start="4"] {
    counter-reset: item 3
}

.vt-doc ol[start="5"] {
    counter-reset: item 4
}

.vt-doc ol[start="6"] {
    counter-reset: item 5
}

.vt-doc ol[start="7"] {
    counter-reset: item 6
}

.vt-doc ol[start="8"] {
    counter-reset: item 7
}

.vt-doc ol[start="9"] {
    counter-reset: item 8
}

.vt-doc ol[start="10"] {
    counter-reset: item 9
}

.vt-doc ol>li {
    counter-increment: item;
    position: relative;
    padding-left: 1.5rem
}

.vt-doc ol>li:before {
    position: absolute;
    left: 2px;
    top: 1px;
    font-weight: 700;
    font-size: 14px;
    color: var(--vt-c-text-3);
    content: counter(item) "."
}

@media (min-width: 768px) {
    .vt-doc ol>li:before {
        top:2px
    }
}

.vt-doc li {
    position: relative;
    margin: 1px 0
}

.vt-doc ul {
    padding-left: 1.25rem
}

.vt-doc ul>li:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--vt-c-text-3);
    transition: background-color .5s;
    left: -1.25rem;
    top: .75rem
}

.vt-doc .video:before {
    display: block;
    content: "";
    padding-top: 56.25%
}

.vt-doc .video {
    overflow: hidden;
    width: calc(100% + 48px);
    min-width: 415px;
    position: relative;
    margin: 0 -24px 18px
}

.vt-doc .video-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

@media (min-width: 640px) {
    .vt-doc .video {
        border-radius:8px
    }
}

@media (max-width: 463px) {
    .vt-doc .video {
        width:100%;
        margin: 0 calc((100vw - 463px)/2) 18px
    }
}

.vt-doc {
    --vt-doc-code-font-size: 14px;
    --vt-doc-code-line-height: 1.5
}

.vt-doc :not(pre)>code {
    background-color: var(--vt-c-bg-mute);
    padding: .15em .5em;
    border-radius: 4px;
    color: var(--vt-c-text-code);
    transition: color .5s,background-color .5s
}

.vt-doc a>code {
    color: var(--vt-c-brand-dark)
}

.vt-doc :not(pre,h1,h2,h3,h4,h5,h6)>code {
    font-size: var(--vt-doc-code-font-size)
}

@media (min-width: 768px) {
    .vt-doc :not(pre)>code {
        white-space:nowrap
    }
}

.vt-doc div[class*=language-] {
    position: relative;
    margin: 28px -24px;
    background-color: #292d3e;
    overflow-x: auto;
    transition: background-color .5s
}

.dark .vt-doc div[class*=language-] {
    background-color: var(--vt-c-bg-soft)
}

@media (min-width: 640px) {
    .vt-doc div[class*=language-] {
        margin:28px 0;
        border-radius: 8px
    }
}

@media (max-width: 639px) {
    .vt-doc li div[class*=language-] {
        border-radius:8px 0 0 8px
    }
}

.vt-doc div[class*=language-]+div[class*=language-],.vt-doc div[class$=-api]+div[class*=language-],.vt-doc div[class*=language-]+div[class$=-api]>div[class*=language-]:first-child {
    margin-top: -16px
}

.vt-doc [class*=language-] pre,.vt-doc [class*=language-] code {
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

.vt-doc [class*=language-] pre {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 14px 0;
    background: transparent;
    overflow-x: auto
}

.vt-doc [class*=language-] code {
    display: block;
    padding: 0 24px;
    width: fit-content;
    min-width: 100%;
    line-height: var(--vt-doc-code-line-height);
    font-size: var(--vt-doc-code-font-size);
    color: #a6accd;
    transition: color .5s
}

.vt-doc [class*=language-] code .highlighted {
    background-color: #0000004d;
    transition: background-color .5s;
    margin: 0 -24px;
    padding: 0 24px;
    width: calc(100% + 48px);
    display: inline-block
}

.dark .vt-doc [class*=language-] code .highlighted {
    background-color: #ffffff0d
}

.vt-doc div[class*=language-].line-numbers-mode {
    padding-left: 32px
}

.vt-doc .line-numbers-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    border-right: 1px solid var(--vt-c-divider-light);
    padding: 13px 0 11px;
    width: 32px;
    text-align: center;
    font-family: var(--vt-font-family-mono);
    line-height: var(--vt-doc-code-line-height);
    font-size: var(--vt-doc-code-font-size);
    color: var(--vt-c-text-3);
    transition: border-color .5s,color .5s
}

.vt-doc [class*=language-]>span.lang {
    position: absolute;
    top: 4px;
    right: 10px;
    z-index: 2;
    font-size: 12px;
    font-weight: 500;
    color: var(--vt-c-text-dark-3);
    transition: color .5s
}

@media (max-width: 480px) {
    .vt-doc [class*=language-]>span.lang {
        top:1px;
        right: 5px;
        font-size: 11px
    }

    .vt-doc [class*=language-] pre {
        padding: 18px 0 12px
    }
}

.vt-doc [class*=language-]>button.copy {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    display: block;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    background-color: #292d3e;
    opacity: 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
    background-position: 50%;
    background-size: 20px;
    background-repeat: no-repeat;
    transition: opacity .4s
}

.dark .vt-doc [class*=language-]>button.copy {
    background-color: var(--vt-c-bg-soft)
}

.vt-doc [class*=language-]:hover>button.copy,.vt-doc [class*=language-]>button.copy:focus {
    opacity: 1
}

.vt-doc [class*=language-]>button.copy:hover,.vt-doc [class*=language-]>button.copy.copied,.vt-doc [class*=language-]>button.copy:hover.copied,.vt-doc [class*=language-]>button.copy.copied:before,.vt-doc [class*=language-]>button.copy:hover.copied:before {
    background-color: #343848
}

.dark .vt-doc [class*=language-]>button.copy:hover,.dark .vt-doc [class*=language-]>button.copy.copied,.dark .vt-doc [class*=language-]>button.copy:hover.copied,.dark .vt-doc [class*=language-]>button.copy.copied:before,.dark .vt-doc [class*=language-]>button.copy:hover.copied:before {
    background-color: #2f2f2f
}

.vt-doc [class*=language-]>button.copy.copied,.vt-doc [class*=language-]>button.copy:hover.copied {
    border-radius: 0 4px 4px 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E")
}

.vt-doc [class*=language-]>button.copy.copied:before,.vt-doc [class*=language-]>button.copy:hover.copied:before {
    position: relative;
    left: -65px;
    display: block;
    border-radius: 4px 0 0 4px;
    padding-top: 10px;
    width: 64px;
    height: 40px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--vt-c-text-dark-2);
    white-space: nowrap;
    content: "Copied"
}

.vt-doc [class*=language-]:hover>button.copy+span.lang,.vt-doc [class*=language-]>button.copy:focus+span.lang {
    opacity: 0
}

.vt-doc .custom-block {
    margin: 28px 0;
    padding: 20px 24px 4px 42px;
    border-radius: 8px;
    overflow-x: auto;
    transition: color .5s,background-color .5s;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    color: #0000008c;
    background-color: var(--vt-c-bg-soft)
}

.dark .vt-doc .custom-block {
    color: var(--vt-c-text-2)
}

.vt-doc .custom-block:before {
    content: "ⓘ";
    position: absolute;
    font-weight: 600;
    font-size: 15px;
    top: 20px;
    left: 17px
}

.vt-doc .custom-block.warning:before,.vt-doc .custom-block.danger:before {
    content: "⚠";
    font-size: 17px;
    top: 19px;
    left: 16ppx
}

.vt-doc .custom-block .custom-block-title {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--vt-c-text-1);
    transition: color .5s
}

.vt-doc .custom-block.tip {
    border: 1px solid var(--vt-c-brand)
}

.vt-doc .custom-block.tip:before {
    color: var(--vt-c-brand)
}

.vt-doc .custom-block.warning {
    border: 1px solid var(--vt-c-yellow)
}

.vt-doc .custom-block.warning:before {
    color: var(--vt-c-yellow)
}

.vt-doc .custom-block.danger {
    border: 1px solid var(--vt-c-red)
}

.vt-doc .custom-block.danger .custom-block-title,.vt-doc .custom-block.danger:before {
    color: var(--vt-c-red)
}

.vt-doc .custom-block ul li:before {
    top: .55rem
}

.vt-doc .custom-block ol li:before {
    top: 1px;
    font-size: 13px
}

.vt-doc .custom-block :not(pre)>code {
    font-size: 13px;
    background-color: #1b1f230d
}

.dark .vt-doc .custom-block :not(pre)>code {
    background-color: #0003
}

.vt-flyout {
    position: relative
}

.vt-flyout:hover {
    color: var(--vt-c-bland);
    transition: color .25s
}

.vt-flyout:hover .vt-flyout-button-text {
    color: var(--vt-c-text-2)
}

.vt-flyout:hover .vt-flyout-button-icon {
    fill: var(--vt-c-text-2)
}

.vt-flyout:hover .vt-flyout-menu,.vt-flyout-button[aria-expanded=true]+.vt-flyout-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.vt-flyout-button {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: var(--vt-nav-height);
    color: var(--vt-c-text-1);
    transition: color .5s
}

.vt-flyout-button-text {
    display: flex;
    align-items: center;
    line-height: var(--vt-nav-height);
    font-size: 13px;
    font-weight: 500;
    color: var(--vt-c-text-1);
    transition: color .25s;
    white-space: nowrap
}

.vt-flyout-button-text-icon {
    margin-left: 4px;
    width: 14px;
    height: 14px;
    fill: currentColor
}

.vt-flyout-button-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: fill .25s
}

.vt-flyout-menu {
    display: flex;
    position: absolute;
    top: calc(var(--vt-nav-height) / 2 + 15px);
    right: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .25s,visibility .25s,transform .25s;
    max-height: calc(100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px))
}

.vt-hamburger {
    display: flex;
    justify-content: center;
    align-items: center
}

.vt-hamburger:hover .vt-hamburger-top {
    top: 0;
    left: 0;
    transform: translate(4px)
}

.vt-hamburger:hover .vt-hamburger-middle {
    top: 6;
    left: 0;
    transform: translate(0)
}

.vt-hamburger:hover .vt-hamburger-bottom {
    top: 12px;
    left: 0;
    transform: translate(8px)
}

.vt-hamburger.is-active .vt-hamburger-top {
    top: 6px;
    transform: translate(0) rotate(225deg)
}

.vt-hamburger.is-active .vt-hamburger-middle {
    top: 6px;
    transform: translate(16px)
}

.vt-hamburger.is-active .vt-hamburger-bottom {
    top: 6px;
    transform: translate(0) rotate(135deg)
}

.vt-hamburger.is-active:hover .vt-hamburger-top,.vt-hamburger.is-active:hover .vt-hamburger-middle,.vt-hamburger.is-active:hover .vt-hamburger-bottom {
    background-color: var(--vt-c-text-2);
    transition: top .25s,background-color .25s,transform .25s
}

.vt-hamburger-container {
    position: relative;
    width: 16px;
    height: 14px;
    overflow: hidden
}

.vt-hamburger-top,.vt-hamburger-middle,.vt-hamburger-bottom {
    position: absolute;
    width: 16px;
    height: 2px;
    background-color: var(--vt-c-text-1);
    transition: top .25s,background-color .5s,transform .25s
}

.vt-hamburger-top {
    top: 0;
    left: 0;
    transform: translate(0)
}

.vt-hamburger-middle {
    top: 6px;
    left: 0;
    transform: translate(8px)
}

.vt-hamburger-bottom {
    top: 12px;
    left: 0;
    transform: translate(4px)
}

.vt-link-icon {
    display: inline-block;
    margin-top: -2px;
    margin-left: 4px;
    width: 11px;
    height: 11px;
    fill: var(--vt-c-text-3);
    transition: fill .25s
}

.vt-menu {
    border-radius: 8px;
    padding: 12px 0;
    min-width: 192px;
    border: 1px solid transparent;
    background: var(--vt-c-bg);
    box-shadow: var(--vt-shadow-3);
    transition: background-color .5s;
    overflow: auto
}

.dark .vt-menu {
    background: var(--vt-c-bg);
    box-shadow: var(--vt-shadow-1);
    border: 1px solid var(--vt-c-divider-light)
}

.vt-menu-items {
    transition: border-color .5s
}

.vt-menu .vt-menu-group {
    padding: 0 0 12px
}

.vt-menu .vt-menu-group+.vt-menu-group {
    border-top: 1px solid var(--vt-c-divider-light);
    padding: 11px 0 12px
}

.vt-menu .vt-menu-group:last-child {
    padding-bottom: 0
}

.vt-menu .vt-menu-group+.vt-menu-item-item {
    border-top: 1px solid var(--vt-c-divider-light);
    padding: 11px 16px 0
}

.vt-menu .vt-menu-item {
    padding: 0 16px;
    white-space: nowrap
}

.vt-menu-label {
    flex-grow: 1;
    line-height: 28px;
    font-size: 12px;
    font-weight: 500;
    color: var(--vt-c-text-2);
    transition: color .5s
}

.vt-menu-action {
    padding-left: 24px
}

.vt-menu-group-title {
    padding: 0 18px;
    line-height: 28px;
    font-size: 10px;
    font-weight: 600;
    color: var(--vt-c-text-3);
    text-transform: uppercase;
    transition: color .25s
}

.vt-menu-link {
    display: block;
    padding: 0 18px;
    line-height: 28px;
    font-size: 13px;
    font-weight: 400;
    color: var(--vt-c-text-1);
    white-space: nowrap;
    transition: color .25s
}

.vt-menu-link:hover {
    color: var(--vt-c-brand)
}

.vt-locales-btn-icon {
    margin: 0 .5rem
}

.vt-locales-btn-icon-container {
    display: flex;
    align-items: center;
    cursor: pointer
}

.vt-locales-btn-icon {
    width: 1rem;
    height: 1rem;
    fill: var(--vt-c-text-1)
}

.vt-locales-menu-hr-divider {
    margin-top: 4px;
    margin-bottom: 4px;
    width: 100%;
    height: 1px;
    background-color: var(--vt-c-divider-light)
}

.vt-locales-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    font-size: .875rem;
    position: relative
}

.vt-locales-menu-item-text {
    cursor: pointer
}

.vt-locales-menu-item-text:hover {
    color: var(--vt-c-brand)
}

.vt-locales-menu-item.join-translations {
    margin-top: 8px;
    padding: 0 14px
}

.VPNavBarLocaleScreen .vt-locales-menu-item.join-translations {
    padding: 0
}

.vt-social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--vt-c-text-2);
    transition: color .5s
}

.vt-social-link.is-small {
    width: 36px;
    height: 36px
}

.vt-social-link.is-small .vt-social-link-icon {
    width: 20px;
    height: 20px
}

.vt-social-link.is-medium {
    width: 48px;
    height: 48px
}

.vt-social-link.is-medium .vt-social-link-icon {
    width: 24px;
    height: 24px
}

.vt-social-link:hover {
    color: var(--vt-c-text-1);
    transition: color .25s
}

.vt-social-link-icon {
    fill: currentColor
}

.vt-social-links {
    display: flex;
    justify-content: center
}

.vt-switch {
    position: relative;
    border-radius: 11px;
    display: block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    border: 1px solid var(--vt-c-divider);
    background-color: var(--vt-c-bg-mute);
    transition: border-color .25s,background-color .25s
}

.vt-switch:hover {
    border-color: var(--vt-c-gray)
}

.vt-switch-check {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--vt-c-white);
    box-shadow: var(--vt-shadow-1);
    transition: background-color .25s,transform .25s
}

.dark .vt-switch-check {
    background-color: var(--vt-c-black)
}

.vt-switch-icon {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden
}

.vt-switch-icon svg {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    fill: var(--vt-c-text-2)
}

.dark .vt-switch-icon svg {
    fill: var(--vt-c-text-1);
    transition: opacity .25s
}

.vt-switch-appearance-sun {
    opacity: 1
}

.vt-switch-appearance-moon,.dark .vt-switch-appearance-sun {
    opacity: 0
}

.dark .vt-switch-appearance-moon {
    opacity: 1
}

.dark .vt-switch-appearance .vt-switch-check {
    transform: translate(18px)
}

.vt-box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.vt-box-container .vt-box {
    background-color: var(--vt-c-bg-soft);
    transition: color .5s,background-color .5s;
    padding: 28px 36px;
    border-radius: 8px;
    flex: 0 32%;
    font-size: 14px;
    font-weight: 500
}

@media (max-width: 768px) {
    .vt-box-container .vt-box {
        flex:0 100%;
        margin-bottom: 20px
    }
}

.vt-badge {
    display: inline-block;
    border-radius: 6px;
    font-size: .65em;
    line-height: 1;
    font-weight: 600;
    padding: .35em .4em .3em;
    position: relative;
    top: -.65em;
    margin-left: .5em;
    color: var(--vt-c-bg);
    transition: color .5s;
    background-color: var(--vt-c-brand)
}

.vt-badge.warning {
    color: var(--vt-c-text-light-1);
    background-color: var(--vt-c-yellow)
}

:root {
    --vp-z-index-local-nav: 10;
    --vp-z-index-nav: 20;
    --vp-z-index-banner: 30;
    --vp-z-index-backdrop: 40;
    --vp-z-index-sidebar: 50;
    --vp-screen-max-width: 1376px
}

:root {
    --vp-sidebar-width-mobile: 320px;
    --vp-sidebar-width-small: 272px
}

html.dark {
    color-scheme: dark
}

.VPNavBarTitle[data-v-35dc6318] {
    display: flex;
    align-items: center;
    padding-top: 1px;
    height: var(--vt-nav-height);
    transition: opacity .25s
}

.VPNavBarTitle[data-v-35dc6318]:hover {
    opacity: .6
}

.logo[data-v-35dc6318] {
    position: relative
}

.logo+.text[data-v-35dc6318] {
    padding-left: 8px
}

.text[data-v-35dc6318] {
    font-size: 16px;
    font-weight: 500
}

/*! @docsearch/css 3.5.1 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
:root {
    --docsearch-primary-color: #5468ff;
    --docsearch-text-color: #1c1e21;
    --docsearch-spacing: 12px;
    --docsearch-icon-stroke-width: 1.4;
    --docsearch-highlight-color: var(--docsearch-primary-color);
    --docsearch-muted-color: #969faf;
    --docsearch-container-background: rgba(101,108,133,.8);
    --docsearch-logo-color: #5468ff;
    --docsearch-modal-width: 560px;
    --docsearch-modal-height: 600px;
    --docsearch-modal-background: #f5f6f7;
    --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;
    --docsearch-searchbox-height: 56px;
    --docsearch-searchbox-background: #ebedf0;
    --docsearch-searchbox-focus-background: #fff;
    --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
    --docsearch-hit-height: 56px;
    --docsearch-hit-color: #444950;
    --docsearch-hit-active-color: #fff;
    --docsearch-hit-background: #fff;
    --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
    --docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
    --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);
    --docsearch-footer-height: 44px;
    --docsearch-footer-background: #fff;
    --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)
}

html[data-theme=dark] {
    --docsearch-text-color: #f5f6f7;
    --docsearch-container-background: rgba(9,10,17,.8);
    --docsearch-modal-background: #15172a;
    --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;
    --docsearch-searchbox-background: #090a11;
    --docsearch-searchbox-focus-background: #000;
    --docsearch-hit-color: #bec3c9;
    --docsearch-hit-shadow: none;
    --docsearch-hit-background: #090a11;
    --docsearch-key-gradient: linear-gradient(-26.5deg,#565872,#31355b);
    --docsearch-key-shadow: inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);
    --docsearch-footer-background: #1e2136;
    --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);
    --docsearch-logo-color: #fff;
    --docsearch-muted-color: #7f8497
}

.DocSearch-Button {
    align-items: center;
    background: var(--docsearch-searchbox-background);
    border: 0;
    border-radius: 40px;
    color: var(--docsearch-muted-color);
    cursor: pointer;
    display: flex;
    font-weight: 500;
    height: 36px;
    justify-content: space-between;
    margin: 0 0 0 16px;
    padding: 0 8px;
    -webkit-user-select: none;
    user-select: none
}

.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover {
    background: var(--docsearch-searchbox-focus-background);
    box-shadow: var(--docsearch-searchbox-shadow);
    color: var(--docsearch-text-color);
    outline: none
}

.DocSearch-Search-Icon {
    stroke-width: 1.6
}

.DocSearch-Button .DocSearch-Search-Icon {
    color: var(--docsearch-text-color)
}

.DocSearch-Button-Placeholder {
    font-size: 1rem;
    padding: 0 12px 0 6px
}

.DocSearch-Button-Keys {
    display: flex;
    min-width: calc(40px + .8em)
}

.DocSearch-Button-Key {
    align-items: center;
    background: var(--docsearch-key-gradient);
    border-radius: 3px;
    box-shadow: var(--docsearch-key-shadow);
    color: var(--docsearch-muted-color);
    display: flex;
    height: 18px;
    justify-content: center;
    margin-right: .4em;
    position: relative;
    padding: 0 0 2px;
    border: 0;
    top: -1px;
    width: 20px
}

@media (max-width: 768px) {
    .DocSearch-Button-Keys,.DocSearch-Button-Placeholder {
        display:none
    }
}

.DocSearch--active {
    overflow: hidden!important
}

.DocSearch-Container,.DocSearch-Container * {
    box-sizing: border-box
}

.DocSearch-Container {
    background-color: var(--docsearch-container-background);
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 200
}

.DocSearch-Container a {
    text-decoration: none
}

.DocSearch-Link {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    color: var(--docsearch-highlight-color);
    cursor: pointer;
    font: inherit;
    margin: 0;
    padding: 0
}

.DocSearch-Modal {
    background: var(--docsearch-modal-background);
    border-radius: 6px;
    box-shadow: var(--docsearch-modal-shadow);
    flex-direction: column;
    margin: 60px auto auto;
    max-width: var(--docsearch-modal-width);
    position: relative
}

.DocSearch-SearchBar {
    display: flex;
    padding: var(--docsearch-spacing) var(--docsearch-spacing) 0
}

.DocSearch-Form {
    align-items: center;
    background: var(--docsearch-searchbox-focus-background);
    border-radius: 4px;
    box-shadow: var(--docsearch-searchbox-shadow);
    display: flex;
    height: var(--docsearch-searchbox-height);
    margin: 0;
    padding: 0 var(--docsearch-spacing);
    position: relative;
    width: 100%
}

.DocSearch-Input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--docsearch-text-color);
    flex: 1;
    font: inherit;
    font-size: 1.2em;
    height: 100%;
    outline: none;
    padding: 0 0 0 8px;
    width: 80%
}

.DocSearch-Input::placeholder {
    color: var(--docsearch-muted-color);
    opacity: 1
}

.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration {
    display: none
}

.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset {
    margin: 0;
    padding: 0
}

.DocSearch-MagnifierLabel,.DocSearch-Reset {
    align-items: center;
    color: var(--docsearch-highlight-color);
    display: flex;
    justify-content: center
}

.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator {
    display: none
}

.DocSearch-Container--Stalled .DocSearch-LoadingIndicator {
    align-items: center;
    color: var(--docsearch-highlight-color);
    display: flex;
    justify-content: center
}

@media screen and (prefers-reduced-motion:reduce) {
    .DocSearch-Reset {
        animation: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: none;
        border: 0;
        border-radius: 50%;
        color: var(--docsearch-icon-color);
        cursor: pointer;
        right: 0;
        stroke-width: var(--docsearch-icon-stroke-width)
    }
}

.DocSearch-Reset {
    animation: fade-in .1s ease-in forwards;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--docsearch-icon-color);
    cursor: pointer;
    padding: 2px;
    right: 0;
    stroke-width: var(--docsearch-icon-stroke-width)
}

.DocSearch-Reset[hidden] {
    display: none
}

.DocSearch-Reset:hover {
    color: var(--docsearch-highlight-color)
}

.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg {
    height: 24px;
    width: 24px
}

.DocSearch-Cancel {
    display: none
}

.DocSearch-Dropdown {
    max-height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));
    min-height: var(--docsearch-spacing);
    overflow-y: auto;
    overflow-y: overlay;
    padding: 0 var(--docsearch-spacing);
    scrollbar-color: var(--docsearch-muted-color) var(--docsearch-modal-background);
    scrollbar-width: thin
}

.DocSearch-Dropdown::-webkit-scrollbar {
    width: 12px
}

.DocSearch-Dropdown::-webkit-scrollbar-track {
    background: transparent
}

.DocSearch-Dropdown::-webkit-scrollbar-thumb {
    background-color: var(--docsearch-muted-color);
    border: 3px solid var(--docsearch-modal-background);
    border-radius: 20px
}

.DocSearch-Dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.DocSearch-Label {
    font-size: .75em;
    line-height: 1.6em
}

.DocSearch-Help,.DocSearch-Label {
    color: var(--docsearch-muted-color)
}

.DocSearch-Help {
    font-size: .9em;
    margin: 0;
    -webkit-user-select: none;
    user-select: none
}

.DocSearch-Title {
    font-size: 1.2em
}

.DocSearch-Logo a {
    display: flex
}

.DocSearch-Logo svg {
    color: var(--docsearch-logo-color);
    margin-left: 8px
}

.DocSearch-Hits:last-of-type {
    margin-bottom: 24px
}

.DocSearch-Hits mark {
    background: none;
    color: var(--docsearch-highlight-color)
}

.DocSearch-HitsFooter {
    color: var(--docsearch-muted-color);
    display: flex;
    font-size: .85em;
    justify-content: center;
    margin-bottom: var(--docsearch-spacing);
    padding: var(--docsearch-spacing)
}

.DocSearch-HitsFooter a {
    border-bottom: 1px solid;
    color: inherit
}

.DocSearch-Hit {
    border-radius: 4px;
    display: flex;
    padding-bottom: 4px;
    position: relative
}

@media screen and (prefers-reduced-motion:reduce) {
    .DocSearch-Hit--deleting {
        transition: none
    }
}

.DocSearch-Hit--deleting {
    opacity: 0;
    transition: all .25s linear
}

@media screen and (prefers-reduced-motion:reduce) {
    .DocSearch-Hit--favoriting {
        transition: none
    }
}

.DocSearch-Hit--favoriting {
    transform: scale(0);
    transform-origin: top center;
    transition: all .25s linear;
    transition-delay: .25s
}

.DocSearch-Hit a {
    background: var(--docsearch-hit-background);
    border-radius: 4px;
    box-shadow: var(--docsearch-hit-shadow);
    display: block;
    padding-left: var(--docsearch-spacing);
    width: 100%
}

.DocSearch-Hit-source {
    background: var(--docsearch-modal-background);
    color: var(--docsearch-highlight-color);
    font-size: .85em;
    font-weight: 600;
    line-height: 32px;
    margin: 0 -4px;
    padding: 8px 4px 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.DocSearch-Hit-Tree {
    color: var(--docsearch-muted-color);
    height: var(--docsearch-hit-height);
    opacity: .5;
    stroke-width: var(--docsearch-icon-stroke-width);
    width: 24px
}

.DocSearch-Hit[aria-selected=true] a {
    background-color: var(--docsearch-highlight-color)
}

.DocSearch-Hit[aria-selected=true] mark {
    text-decoration: underline
}

.DocSearch-Hit-Container {
    align-items: center;
    color: var(--docsearch-hit-color);
    display: flex;
    flex-direction: row;
    height: var(--docsearch-hit-height);
    padding: 0 var(--docsearch-spacing) 0 0
}

.DocSearch-Hit-icon {
    height: 20px;
    width: 20px
}

.DocSearch-Hit-action,.DocSearch-Hit-icon {
    color: var(--docsearch-muted-color);
    stroke-width: var(--docsearch-icon-stroke-width)
}

.DocSearch-Hit-action {
    align-items: center;
    display: flex;
    height: 22px;
    width: 22px
}

.DocSearch-Hit-action svg {
    display: block;
    height: 18px;
    width: 18px
}

.DocSearch-Hit-action+.DocSearch-Hit-action {
    margin-left: 6px
}

.DocSearch-Hit-action-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    padding: 2px
}

svg.DocSearch-Hit-Select-Icon {
    display: none
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon {
    display: block
}

.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover {
    background: rgba(0,0,0,.2);
    transition: background-color .1s ease-in
}

@media screen and (prefers-reduced-motion:reduce) {
    .DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover {
        transition: none
    }
}

.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path {
    fill: #fff
}

.DocSearch-Hit-content-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    font-weight: 500;
    justify-content: center;
    line-height: 1.2em;
    margin: 0 8px;
    overflow-x: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80%
}

.DocSearch-Hit-title {
    font-size: .9em
}

.DocSearch-Hit-path {
    color: var(--docsearch-muted-color);
    font-size: .75em
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark {
    color: var(--docsearch-hit-active-color)!important
}

@media screen and (prefers-reduced-motion:reduce) {
    .DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover {
        background: rgba(0,0,0,.2);
        transition: none
    }
}

.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen {
    font-size: .9em;
    margin: 0 auto;
    padding: 36px 0;
    text-align: center;
    width: 80%
}

.DocSearch-Screen-Icon {
    color: var(--docsearch-muted-color);
    padding-bottom: 12px
}

.DocSearch-NoResults-Prefill-List {
    display: inline-block;
    padding-bottom: 24px;
    text-align: left
}

.DocSearch-NoResults-Prefill-List ul {
    display: inline-block;
    padding: 8px 0 0
}

.DocSearch-NoResults-Prefill-List li {
    list-style-position: inside;
    list-style-type: "» "
}

.DocSearch-Prefill {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    border-radius: 1em;
    color: var(--docsearch-highlight-color);
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-weight: 700;
    padding: 0
}

.DocSearch-Prefill:focus,.DocSearch-Prefill:hover {
    outline: none;
    text-decoration: underline
}

.DocSearch-Footer {
    align-items: center;
    background: var(--docsearch-footer-background);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--docsearch-footer-shadow);
    display: flex;
    flex-direction: row-reverse;
    flex-shrink: 0;
    height: var(--docsearch-footer-height);
    justify-content: space-between;
    padding: 0 var(--docsearch-spacing);
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    z-index: 300
}

.DocSearch-Commands {
    color: var(--docsearch-muted-color);
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0
}

.DocSearch-Commands li {
    align-items: center;
    display: flex
}

.DocSearch-Commands li:not(:last-of-type) {
    margin-right: .8em
}

.DocSearch-Commands-Key {
    align-items: center;
    background: var(--docsearch-key-gradient);
    border-radius: 2px;
    box-shadow: var(--docsearch-key-shadow);
    display: flex;
    height: 18px;
    justify-content: center;
    margin-right: .4em;
    padding: 0 0 1px;
    color: var(--docsearch-muted-color);
    border: 0;
    width: 20px
}

@media (max-width: 768px) {
    :root {
        --docsearch-spacing:10px;
        --docsearch-footer-height: 40px
    }

    .DocSearch-Dropdown {
        height: 100%
    }

    .DocSearch-Container {
        height: 100vh;
        height: -webkit-fill-available;
        height: calc(var(--docsearch-vh, 1vh)*100);
        position: absolute
    }

    .DocSearch-Footer {
        border-radius: 0;
        bottom: 0;
        position: absolute
    }

    .DocSearch-Hit-content-wrapper {
        display: flex;
        position: relative;
        width: 80%
    }

    .DocSearch-Modal {
        border-radius: 0;
        box-shadow: none;
        height: 100vh;
        height: -webkit-fill-available;
        height: calc(var(--docsearch-vh, 1vh)*100);
        margin: 0;
        max-width: 100%;
        width: 100%
    }

    .DocSearch-Dropdown {
        max-height: calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))
    }

    .DocSearch-Cancel {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: none;
        border: 0;
        color: var(--docsearch-highlight-color);
        cursor: pointer;
        display: inline-block;
        flex: none;
        font: inherit;
        font-size: 1em;
        font-weight: 500;
        margin-left: var(--docsearch-spacing);
        outline: none;
        overflow: hidden;
        padding: 0;
        -webkit-user-select: none;
        user-select: none;
        white-space: nowrap
    }

    .DocSearch-Commands,.DocSearch-Hit-Tree {
        display: none
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.VPNavBarSearch {
    display: flex;
    align-items: center;
    padding-left: 16px
}

@media (min-width: 768px) {
    .VPNavBarSearch {
        flex-grow:1
    }
}

.DocSearch {
    --docsearch-primary-color: var(--vt-c-brand);
    --docsearch-highlight-color: var(--docsearch-primary-color);
    --docsearch-text-color: var(--vt-c-text-1);
    --docsearch-muted-color: var(--vt-c-text-2);
    --docsearch-searchbox-shadow: none;
    --docsearch-searchbox-focus-background: transparent;
    --docsearch-key-gradient: transparent;
    --docsearch-key-shadow: none;
    --docsearch-modal-background: var(--vt-c-bg-soft);
    --docsearch-footer-background: var(--vt-c-bg)
}

.dark .DocSearch {
    --docsearch-modal-shadow: none;
    --docsearch-footer-shadow: none;
    --docsearch-logo-color: var(--vt-c-text-2);
    --docsearch-hit-background: var(--vt-c-bg-mute);
    --docsearch-hit-color: var(--vt-c-text-2);
    --docsearch-hit-shadow: none
}

.dark .DocSearch-Footer {
    border-top: 1px solid var(--vt-c-divider)
}

.dark .DocSearch-Form {
    background-color: var(--vt-c-bg-mute)
}

.DocSearch-Form {
    background-color: #fff;
    border: 1px solid var(--vt-c-brand)
}

.DocSearch-Button-Container {
    align-items: center;
    display: flex
}

.DocSearch-Button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 48px;
    height: 55px;
    background: transparent
}

.DocSearch-Button:hover {
    background: transparent
}

.DocSearch-Button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

.DocSearch-Button:focus:not(:focus-visible) {
    outline: none!important
}

@media (min-width: 768px) {
    .DocSearch-Button {
        justify-content:flex-start;
        width: 100%
    }
}

.DocSearch-Button .DocSearch-Search-Icon {
    color: var(--vt-c-text-2);
    transition: color .5s;
    fill: currentColor;
    width: 18px;
    height: 18px;
    position: relative
}

.DocSearch-Button:hover .DocSearch-Search-Icon {
    color: var(--vt-c-text-1)
}

@media (min-width: 768px) {
    .DocSearch-Button .DocSearch-Search-Icon {
        top:1px;
        margin-right: 10px;
        width: 15px;
        height: 15px
    }
}

.DocSearch-Button-Placeholder {
    transition: color .5s;
    font-size: 13px;
    font-weight: 500;
    color: var(--vt-c-text-2);
    display: none;
    padding: 0 10px 0 0
}

.DocSearch-Button:hover .DocSearch-Button-Placeholder {
    color: var(--vt-c-text-1)
}

@media (min-width: 960px) {
    .DocSearch-Button-Placeholder {
        display:inline-block
    }
}

.DocSearch-Button .DocSearch-Button-Keys {
    display: none;
    gap: 2px;
    min-width: auto;
    box-sizing: border-box;
    border: 1px solid var(--vt-c-text-3);
    border-radius: 4px;
    padding: 0 6px;
    font-family: inherit;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    font-weight: 500;
    transition: color .5s,border-color .5s
}

.DocSearch-Button:hover .DocSearch-Button-Keys {
    border-color: var(--vt-c-brand-light)
}

@media (min-width: 768px) {
    .DocSearch-Button .DocSearch-Button-Keys {
        display:flex
    }
}

.DocSearch-Button .DocSearch-Button-Key {
    width: auto;
    min-width: auto;
    font-family: inherit;
    font-size: 12px;
    height: 22px;
    padding: 0;
    margin: 0;
    color: var(--vt-c-text-3);
    transition: color .5s
}

.DocSearch-Button:hover .DocSearch-Button-Key {
    color: var(--vt-c-brand-light)
}

.VPNavBarMenuLink[data-v-95766ac5] {
    display: block;
    padding: 0 12px;
    line-height: calc(var(--vt-nav-height) - 1px);
    font-size: 13px;
    font-weight: 500;
    color: var(--vt-c-text-1);
    transition: color .25s;
    white-space: nowrap
}

.VPNavBarMenuLink.active[data-v-95766ac5] {
    border-bottom: 1px solid var(--vt-c-brand)
}

.VPNavBarMenuLink[data-v-95766ac5]:hover {
    color: var(--vt-c-brand)
}

.VPNavBarMenuGroup.active[data-v-b8fa9da1] {
    border-bottom: 1px solid var(--vt-c-brand);
    height: var(--vt-nav-height)
}

.vt-locales-menu-item[data-v-c477a136] {
    padding-bottom: 0
}

.vt-locales-btn-icon-container[data-v-c2e55fda]:before,.vt-locales-btn-icon-container[data-v-c2e55fda]:after {
    width: 1px;
    height: 24px;
    background-color: var(--vt-c-divider-light);
    content: ""
}

.vt-locales-btn-icon-container[data-v-c2e55fda]:before {
    margin-right: 4px
}

.vt-locales-btn-icon-container[data-v-c2e55fda]:after {
    margin-left: 4px
}

.vt-menu-items[data-v-c2e55fda] {
    padding: 0 14px
}

.VPNavBarMenu[data-v-826f5bab] {
    display: none
}

@media (min-width: 768px) {
    .VPNavBarMenu[data-v-826f5bab] {
        display:flex
    }
}

.VPNavBarAppearance[data-v-e44f778b] {
    display: none
}

@media (min-width: 1280px) {
    .VPNavBarAppearance[data-v-e44f778b] {
        display:block
    }
}

.VPNavBarSocialLinks[data-v-63b14f4e] {
    display: none;
    margin-right: -10px
}

@media (min-width: 1280px) {
    .VPNavBarSocialLinks[data-v-63b14f4e] {
        display:flex
    }
}

.VPNavBarExtra[data-v-f8a26996] {
    display: none
}

@media (min-width: 768px) {
    .VPNavBarExtra[data-v-f8a26996] {
        display:block
    }
}

@media (min-width: 1280px) {
    .VPNavBarExtra[data-v-f8a26996] {
        display:none
    }
}

.item[data-v-f8a26996] {
    display: flex;
    align-items: center
}

.action[data-v-f8a26996] {
    margin-right: -2px
}

.social-links[data-v-f8a26996] {
    margin: -4px -8px
}

.VPNavBarHamburger[data-v-a7f0aad0] {
    width: 40px;
    height: var(--vt-nav-height)
}

@media (min-width: 768px) {
    .VPNavBarHamburger[data-v-a7f0aad0] {
        display:none
    }
}

.VPNavBar[data-v-c3aad330] {
    position: relative;
    border-bottom: 1px solid var(--vt-c-divider-light);
    padding: 0 12px 0 24px;
    height: var(--vt-nav-height);
    background-color: var(--vt-c-bg);
    white-space: nowrap;
    transition: border-color .5s,background-color .5s
}

@media (min-width: 768px) {
    .VPNavBar[data-v-c3aad330] {
        padding:0 12px 0 32px
    }
}

@media (min-width: 1280px) {
    .VPNavBar[data-v-c3aad330] {
        padding:0 32px
    }
}

.container[data-v-c3aad330] {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: var(--vp-screen-max-width)
}

.content[data-v-c3aad330] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1
}

.menu+.appearance[data-v-c3aad330] {
    margin-left: 8px
}

.menu+.social-links[data-v-c3aad330] {
    margin-left: 12px
}

.appearance+.social-links[data-v-c3aad330] {
    margin-left: 12px
}

.VPNavScreenMenuLink[data-v-c7279825] {
    display: block;
    border-bottom: 1px solid var(--vt-c-divider-light);
    padding: 12px 0 11px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vt-c-text-1);
    transition: border-color .5s,color .25s
}

.VPNavScreenMenuLink[data-v-c7279825]:hover {
    color: var(--vt-c-brand)
}

.VPNavScreenMenuGroupLink[data-v-98f2315f] {
    display: block;
    line-height: 32px;
    font-size: 13px;
    font-weight: 400;
    color: var(--vt-c-text-1);
    transition: color .25s;
    margin-left: .6em
}

.VPNavScreenMenuGroupLink[data-v-98f2315f]:hover {
    color: var(--vt-c-brand)
}

.VPNavScreenMenuGroupSection[data-v-e14386dc] {
    display: block
}

.title[data-v-e14386dc] {
    line-height: 32px;
    font-size: 11px;
    font-weight: 700;
    color: var(--vt-c-text-2);
    text-transform: uppercase;
    transition: color .25s
}

.VPNavScreenMenuGroup[data-v-4903255e] {
    border-bottom: 1px solid var(--vt-c-divider-light);
    height: 48px;
    overflow: hidden;
    transition: border-color .5s
}

.VPNavScreenMenuGroup .items[data-v-4903255e] {
    visibility: hidden
}

.VPNavScreenMenuGroup.open .items[data-v-4903255e] {
    visibility: visible
}

.VPNavScreenMenuGroup.open[data-v-4903255e] {
    padding-bottom: 10px;
    height: auto
}

.VPNavScreenMenuGroup.open .button[data-v-4903255e] {
    padding-bottom: 6px;
    color: var(--vt-c-brand)
}

.VPNavScreenMenuGroup.open .button-icon[data-v-4903255e] {
    transform: rotate(45deg)
}

.button[data-v-4903255e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4px 11px 0;
    width: 100%;
    line-height: 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vt-c-text-1);
    transition: color .25s
}

.button[data-v-4903255e]:hover {
    color: var(--vt-c-brand)
}

.button-icon[data-v-4903255e] {
    width: 14px;
    height: 14px;
    fill: var(--vt-c-text-2);
    transition: fill .5s,transform .25s
}

.group[data-v-4903255e]:first-child {
    padding-top: 4px
}

.group+.group[data-v-4903255e] {
    padding-top: 8px
}

.group+.item[data-v-4903255e] {
    padding-top: 8px
}

.VPNavScreenAppearance[data-v-e36b7891] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    padding: 12px 14px 12px 16px;
    background-color: var(--vt-c-bg-soft);
    transition: background-color .5s
}

.text[data-v-e36b7891] {
    line-height: 24px;
    font-size: 12px;
    font-weight: 500;
    color: var(--vt-c-text-2);
    transition: color .5s
}

.VPNavBarLocaleScreen[data-v-5799afd0] {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    padding: 12px 14px 12px 16px;
    background-color: var(--vt-c-bg-soft);
    transition: background-color .5s;
    margin: 16px 0
}

.title[data-v-5799afd0] {
    line-height: 24px;
    font-size: 12px;
    font-weight: 500;
    color: var(--vt-c-text-2);
    transition: color .5s;
    margin-bottom: 6px
}

.VPNavScreen[data-v-6e8e22ac] {
    position: fixed;
    top: calc(var(--vt-nav-height) + var(--vt-banner-height, 0px));
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 32px;
    width: 100%;
    background-color: var(--vt-c-bg);
    transition: background-color .5s;
    overflow-y: auto
}

.VPNavScreen.fade-enter-active[data-v-6e8e22ac],.VPNavScreen.fade-leave-active[data-v-6e8e22ac] {
    transition: opacity .25s
}

.VPNavScreen.fade-enter-active .container[data-v-6e8e22ac],.VPNavScreen.fade-leave-active .container[data-v-6e8e22ac] {
    transition: transform .25s ease
}

.VPNavScreen.fade-enter-from[data-v-6e8e22ac],.VPNavScreen.fade-leave-to[data-v-6e8e22ac] {
    opacity: 0
}

.VPNavScreen.fade-enter-from .container[data-v-6e8e22ac],.VPNavScreen.fade-leave-to .container[data-v-6e8e22ac] {
    transform: translateY(-8px)
}

@media (min-width: 768px) {
    .VPNavScreen[data-v-6e8e22ac] {
        display:none
    }
}

.container[data-v-6e8e22ac] {
    margin: 0 auto;
    padding: 24px 0 96px;
    max-width: 288px
}

.menu+.appearance[data-v-6e8e22ac] {
    margin-top: 24px
}

.menu+.social-links[data-v-6e8e22ac] {
    margin-top: 16px
}

.appearance+.social-links[data-v-6e8e22ac] {
    margin-top: 12px
}

.VPNav[data-v-94c29373] {
    position: relative;
    top: 0;
    left: 0;
    z-index: var(--vp-z-index-nav)
}

@media (min-width: 960px) {
    .VPNav[data-v-94c29373] {
        position:fixed;
        top: var(--vt-banner-height, 0px);
        width: 100%
    }
}

.root[data-v-8dc1ef7f] {
    position: relative;
    z-index: 1
}

.nested[data-v-8dc1ef7f] {
    padding-left: 1em
}

.outline-link[data-v-8dc1ef7f] {
    color: var(--vt-c-text-2);
    transition: color .5s;
    line-height: 28px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.outline-link[data-v-8dc1ef7f]:hover,.outline-link.active[data-v-8dc1ef7f] {
    color: var(--vt-c-text-1);
    transition: color .25s
}

.VPLocalNavOutlineDropdown[data-v-718a509e] {
    padding: 12px 20px 11px
}

.VPLocalNavOutlineDropdown button[data-v-718a509e] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    color: var(--vt-c-text-2);
    transition: color .5s;
    position: relative
}

.VPLocalNavOutlineDropdown button[data-v-718a509e]:hover {
    color: var(--vt-c-text-1);
    transition: color .25s
}

.VPLocalNavOutlineDropdown button.open[data-v-718a509e] {
    color: var(--vt-c-text-1)
}

.icon[data-v-718a509e] {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    fill: currentColor
}

[data-v-718a509e] .outline-link {
    font-size: 14px;
    font-weight: 500;
    padding: 2px 0
}

.open>.icon[data-v-718a509e] {
    transform: rotate(90deg)
}

.items[data-v-718a509e] {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 60px;
    background-color: var(--vt-c-bg);
    padding: 4px 20px 16px;
    border: 1px solid var(--vt-c-divider);
    border-radius: 8px;
    max-height: calc(var(--vt-vh, 100vh) - 86px);
    overflow: scroll;
    box-shadow: var(--vt-shadow-3)
}

.top-link[data-v-718a509e] {
    display: block;
    color: var(--vt-c-brand);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 0;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--vt-c-divider)
}

.flyout-enter-active[data-v-718a509e] {
    transition: all .2s ease-out
}

.flyout-leave-active[data-v-718a509e] {
    transition: all .15s ease-in
}

.flyout-enter-from[data-v-718a509e],.flyout-leave-to[data-v-718a509e] {
    opacity: 0;
    transform: translateY(-16px)
}

.VPLocalNav[data-v-40731e84] {
    position: sticky;
    top: var(--vt-banner-height, 0px);
    left: 0;
    z-index: var(--vp-z-index-local-nav);
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--vt-c-divider-light);
    background-color: var(--vt-c-bg);
    transition: border-color .5s,background-color .5s
}

@media (min-width: 960px) {
    .VPLocalNav[data-v-40731e84] {
        display:none
    }
}

.menu[data-v-40731e84] {
    display: flex;
    align-items: center;
    padding: 0 24px;
    line-height: 47px;
    font-size: 12px;
    font-weight: 500;
    color: var(--vt-c-text-2);
    transition: color .5s
}

.menu[data-v-40731e84]:hover {
    color: var(--vt-c-text-1);
    transition: color .25s
}

@media (min-width: 768px) {
    .menu[data-v-40731e84] {
        padding:0 32px
    }
}

.menu-icon[data-v-40731e84] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    fill: currentColor
}

.top-link[data-v-40731e84] {
    padding: 0 24px;
    line-height: 47px;
    font-size: 12px;
    font-weight: 500;
    color: var(--vt-c-text-2);
    transition: color .5s
}

.top-link[data-v-40731e84]:hover {
    color: var(--vt-c-text-1);
    transition: color .25s
}

@media (min-width: 768px) {
    .top-link[data-v-40731e84] {
        padding:0 32px
    }
}

.VPSkipLink[data-v-e438c5c1] {
    top: .25rem;
    left: .25rem;
    padding: .65rem 1.5rem;
    z-index: 999;
    font-size: .9em;
    font-weight: 700;
    text-decoration: none;
    color: var(--vt-c-green);
    box-shadow: var(--vt-shadow-3);
    background-color: var(--vt-c-bg);
    border-radius: 8px
}

.dark .VPSkipLink[data-v-e438c5c1] {
    color: var(--vt-c-green)
}

.VPSkipLink[data-v-e438c5c1]:focus {
    height: auto;
    width: auto;
    clip: auto;
    clip-path: none
}

.link[data-v-9c0cd164] {
    display: block;
    padding: 6px 0
}

@media (min-width: 960px) {
    .link[data-v-9c0cd164] {
        padding:4px 0
    }
}

.link:hover .link-text[data-v-9c0cd164] {
    color: var(--vt-c-brand-text-1);
    transition: color .25s
}

.link.active .link-text[data-v-9c0cd164] {
    font-weight: 600;
    color: var(--vt-c-brand);
    transition: color .25s
}

.link-text[data-v-9c0cd164] {
    line-height: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vt-c-text-2);
    transition: color .5s
}

.title[data-v-c5b6018e] {
    padding: 6px 0
}

@media (min-width: 960px) {
    .title[data-v-c5b6018e] {
        padding:4px 0
    }
}

.title-text[data-v-c5b6018e] {
    line-height: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vt-c-text-1);
    transition: color .5s
}

.VPSidebar[data-v-08408a22] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--vp-z-index-sidebar);
    padding: 0 32px 96px;
    width: calc(100vw - 64px);
    max-width: var(--vp-sidebar-width-mobile);
    opacity: 0;
    background-color: var(--vt-c-bg);
    box-shadow: var(--vt-c-shadow-3);
    overflow-x: hidden;
    overflow-y: auto;
    transform: translate(-100%);
    transition: background-color .5s,opacity .5s,transform .3s ease
}

#VPSidebarNav[data-v-08408a22] {
    padding-top: 24px;
    outline: 0
}

@media (min-width: 960px) {
    .VPSidebar[data-v-08408a22] {
        top:calc(var(--vt-nav-height) + var(--vt-banner-height, 0px));
        z-index: 1;
        border-right: 1px solid var(--vt-c-divider-light);
        width: var(--vp-sidebar-width-small);
        max-width: 100%;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        transform: translate(0);
        transition: border-color .5s,background-color .5s
    }
}

@media (min-width: 1440px) {
    .VPSidebar[data-v-08408a22] {
        padding:0 32px 96px calc((100% - var(--vp-screen-max-width)) / 2);
        width: calc((100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small))
    }
}

.VPSidebar.open[data-v-08408a22] {
    opacity: 1;
    visibility: visible;
    transform: translate(0);
    transition: background-color .5s,opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)
}

.dark .VPSidebar[data-v-08408a22] {
    box-shadow: var(--vt-shadow-1)
}

.group+.group[data-v-08408a22] {
    padding-top: 24px
}

@media (min-width: 960px) {
    .group+.group[data-v-08408a22] {
        padding-top:16px
    }
}

.VPFooter[data-v-6a56047e] {
    border-top: 1px solid var(--vt-c-bg-soft);
    padding: 23px 24px 24px;
    background-color: var(--vt-c-bg-soft);
    transition: border-top .5s,background-color .5s
}

.dark .VPFooter[data-v-6a56047e] {
    border-top: 1px solid var(--vt-c-divider-light);
    background-color: var(--vt-c-bg)
}

.license[data-v-6a56047e],.copyright[data-v-6a56047e] {
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--vt-c-text-2);
    transition: color .25s
}

.link[data-v-6a56047e] {
    color: var(--vt-c-text-1);
    transition: color .25s
}

.link[data-v-6a56047e]:hover {
    color: var(--vt-c-text-2)
}

.VPContentDocOutline[data-v-abbacf0f] {
    font-size: 13px;
    font-weight: 500;
    position: relative
}

.outline-title[data-v-abbacf0f] {
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .4px
}

.outline-marker[data-v-abbacf0f] {
    opacity: 0;
    position: absolute;
    background-color: var(--vt-c-green);
    border-radius: 4px;
    width: 4px;
    height: 20px;
    top: 32px;
    left: -12px;
    z-index: 0;
    transition: top .25s cubic-bezier(0,1,.5,1),opacity .25s,background-color .5s
}

.VPContentDocFooter[data-v-5eb9745a] {
    border-top: 1px solid var(--vt-c-divider-light);
    padding-top: 1rem;
    display: flex;
    justify-content: space-between
}

a[data-v-5eb9745a] {
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    max-width: 48%
}

.desc[data-v-5eb9745a] {
    font-size: 11px;
    color: var(--vt-c-text-2);
    display: block
}

.title[data-v-5eb9745a] {
    color: var(--vt-c-brand);
    transition: color .25s
}

a:hover .title[data-v-5eb9745a] {
    color: var(--vt-c-brand-highlight)
}

.next-link[data-v-5eb9745a] {
    margin-left: auto;
    text-align: right
}

.vt-link-icon[data-v-5eb9745a] {
    margin: -2px 0 0;
    vertical-align: middle
}

.VPCarbonAds {
    margin: 28px 0;
    padding: 20px 24px;
    background-color: var(--vt-c-bg-soft);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--vt-c-text-2);
    text-align: center;
    transition: color .5s,background-color .5s
}

.VPCarbonAds img {
    margin: 0 auto 12px;
    border-radius: 4px
}

.VPCarbonAds .carbon-poweredby {
    display: block;
    margin-top: 6px;
    text-transform: uppercase;
    transition: color .5s;
    color: var(--vt-c-text-3);
    font-size: 10px
}

.VPContentDoc[data-v-c6681965] {
    padding: 32px 24px 96px
}

.vt-doc[data-v-c6681965] {
    margin-bottom: 54px
}

.content[data-v-c6681965] {
    margin: 0 auto;
    max-width: 688px;
    position: relative
}

.aside[data-v-c6681965] {
    position: relative;
    display: none;
    flex-shrink: 0;
    padding-left: 64px;
    width: 320px
}

.aside-container[data-v-c6681965] {
    position: sticky;
    width: 224px;
    top: calc(var(--vt-nav-height) + var(--vt-banner-height, 0px) + 24px);
    bottom: 0
}

.aside-container[data-v-c6681965]::-webkit-scrollbar {
    display: none
}

.edit-link[data-v-c6681965] {
    margin: 0 0 32px
}

.edit-link .vt-link[data-v-c6681965] {
    font-size: 14px;
    color: var(--vt-c-brand);
    font-weight: 500
}

.vt-icon[data-v-c6681965] {
    width: 18px;
    height: 18px;
    color: var(--vt-c-brand);
    display: inline-block;
    margin-right: 8px;
    position: relative;
    top: -1px
}

@media (min-width: 768px) {
    .VPContentDoc[data-v-c6681965] {
        padding:48px 32px 96px
    }
}

@media (min-width: 960px) {
    .VPContentDoc[data-v-c6681965] {
        padding:64px 64px 96px
    }
}

@media (min-width: 1280px) {
    .VPContentDoc[data-v-c6681965] {
        padding:64px 0 96px 64px
    }

    .VPContentDoc[data-v-c6681965]:not(.has-sidebar.has-aside) {
        padding-left: calc((100vw - 688px)/2)
    }

    .VPContentDoc.has-aside[data-v-c6681965]:not(.has-sidebar) {
        padding-left: calc((100vw - 1008px)/2)
    }

    .container[data-v-c6681965] {
        display: flex
    }

    .content[data-v-c6681965] {
        min-width: 620px;
        margin: 0;
        order: 1
    }

    .VPContentDoc:not(.has-aside) .content[data-v-c6681965] {
        min-width: 688px
    }

    .aside[data-v-c6681965] {
        display: block;
        order: 2
    }
}

@media (min-width: 1440px) {
    .VPContentDoc[data-v-c6681965] {
        padding:64px 0 96px 96px
    }

    .aside[data-v-c6681965] {
        padding-left: 96px
    }
}

.vt-doc[data-v-ae4d04f2] {
    padding: 32px 48px;
    background-color: var(--vt-c-bg-soft);
    margin: 32px;
    border-radius: 8px
}

.not-found-path[data-v-ae4d04f2] {
    font-family: var(--vt-font-family-mono);
    color: var(--vt-c-text-code)
}

@media (max-width: 768px) {
    .VPContent[data-v-4bc7a7d2] {
        overflow-x:hidden
    }
}

@media (min-width: 960px) {
    .VPContent[data-v-4bc7a7d2] {
        padding-top:var(--vt-nav-height)
    }

    .VPContent.has-sidebar[data-v-4bc7a7d2] {
        padding-left: var(--vp-sidebar-width-small)
    }
}

@media (min-width: 1440px) {
    .VPContent.has-sidebar[data-v-4bc7a7d2] {
        padding-left:calc((100vw - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small))
    }
}

.VPApp[data-v-5dc2ec7a] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--vt-c-bg);
    transition: background-color .5s;
    padding-top: var(--vt-banner-height)
}

.backdrop[data-v-5dc2ec7a] {
    z-index: var(--vp-z-index-backdrop)
}

.ThemeHero[data-v-8bf6c5d7] {
    padding: 48px 24px
}

@media (min-width: 768px) {
    .ThemeHero[data-v-8bf6c5d7] {
        padding:64px 32px 48px
    }
}

.container[data-v-8bf6c5d7] {
    margin: 0 auto;
    max-width: 960px
}

.title[data-v-8bf6c5d7],.lead[data-v-8bf6c5d7] {
    transition: color .25s
}

.title[data-v-8bf6c5d7] {
    line-height: 32px;
    font-size: 32px;
    font-weight: 500
}

@media (min-width: 768px) {
    .title[data-v-8bf6c5d7] {
        line-height:40px;
        font-size: 40px
    }
}

.lead[data-v-8bf6c5d7] {
    padding-top: 8px;
    font-size: 16px;
    font-weight: 500;
    max-width: 512px;
    color: var(--vt-c-text-2)
}

.ThemeProduct[data-v-28c87f3d] {
    display: block
}

.ThemeProduct:hover .figure[data-v-28c87f3d] {
    transform: translateY(-4px)
}

.ThemeProduct:hover .name[data-v-28c87f3d] {
    color: var(--vt-c-brand)
}

.figure[data-v-28c87f3d] {
    border-radius: 8px;
    overflow: hidden;
    transition: transform .25s
}

.data[data-v-28c87f3d] {
    display: flex;
    justify-content: space-between;
    padding-top: 12px
}

.title[data-v-28c87f3d] {
    flex-grow: 1;
    padding-right: 8px
}

.name[data-v-28c87f3d] {
    font-size: 16px;
    font-weight: 500;
    transition: color .25s
}

.description[data-v-28c87f3d] {
    padding-top: 2px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vt-c-text-2);
    transition: color .25s
}

.price[data-v-28c87f3d] {
    text-align: right;
    flex-shrink: 0;
    width: 56px
}

.value[data-v-28c87f3d] {
    font-size: 16px;
    font-weight: 500
}

.free[data-v-28c87f3d] {
    display: inline-block;
    border-radius: 4px;
    padding: 0 8px;
    line-height: 24px;
    font-size: 12px;
    font-weight: 500;
    color: var(--vt-c-white);
    background-color: var(--vt-c-brand);
    transform: translateY(-2px)
}

.ThemeListItem[data-v-16d1e7fe] {
    border-top: 1px solid var(--vt-c-divider-light);
    padding-top: 16px
}

@media (min-width: 768px) {
    .ThemeListItem[data-v-16d1e7fe] {
        padding-top:24px
    }
}

.title[data-v-16d1e7fe] {
    font-size: 20px;
    font-weight: 500;
    transition: color .25s
}

.description[data-v-16d1e7fe] {
    padding-top: 8px;
    font-size: 14px;
    font-weight: 500;
    max-width: 512px;
    color: var(--vt-c-text-2);
    transition: color .25s
}

.description[data-v-16d1e7fe] .link {
    color: var(--vt-c-brand);
    transition: color .25s
}

.description[data-v-16d1e7fe] .link:hover {
    color: var(--vt-c-brand-dark)
}

.container[data-v-16d1e7fe] {
    margin: 0 auto;
    padding-top: 32px;
    max-width: 304px
}

@media (min-width: 640px) {
    .container[data-v-16d1e7fe] {
        max-width:632px
    }
}

@media (min-width: 960px) {
    .container[data-v-16d1e7fe] {
        max-width:960px
    }
}

.products[data-v-16d1e7fe] {
    display: flex;
    flex-wrap: wrap;
    margin: -16px -12px
}

.product[data-v-16d1e7fe] {
    flex-shrink: 0;
    padding: 16px 12px;
    width: 100%
}

@media (min-width: 640px) {
    .product[data-v-16d1e7fe] {
        width:50%
    }
}

@media (min-width: 960px) {
    .product[data-v-16d1e7fe] {
        width:calc(100% / 3)
    }
}

.action[data-v-16d1e7fe] {
    padding-top: 40px;
    text-align: center
}

.action-link[data-v-16d1e7fe] {
    display: inline-block;
    border: 1px solid var(--vt-c-brand);
    border-radius: 24px;
    padding: 0 24px;
    line-height: 48px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vt-c-brand);
    transition: border-color .25s,color .25s
}

.action-link[data-v-16d1e7fe]:hover {
    border-color: var(--vt-c-brand-dark);
    color: var(--vt-c-brand-dark)
}

.ThemeList[data-v-7b2ff495] {
    padding: 0 24px 96px
}

@media (min-width: 768px) {
    .ThemeList[data-v-7b2ff495] {
        padding:0 32px 96px
    }
}

.container[data-v-7b2ff495] {
    margin: 0 auto;
    max-width: 960px
}

.item+.item[data-v-7b2ff495] {
    padding-top: 48px
}

@media (min-width: 768px) {
    .item+.item[data-v-7b2ff495] {
        padding-top:64px
    }
}

.ThemeContact[data-v-83de55b1] {
    padding: 32px 24px;
    border-bottom: 1px solid var(--vt-c-divider-light);
    background-color: var(--vt-c-bg-soft);
    transition: border-color .25s,background-color .25s
}

.dark .ThemeContact[data-v-83de55b1] {
    border-bottom-color: var(--vt-c-bg-soft)
}

@media (min-width: 768px) {
    .ThemeContact[data-v-83de55b1] {
        padding:48px 32px
    }
}

.container[data-v-83de55b1] {
    margin: 0 auto;
    max-width: 960px
}

.text[data-v-83de55b1] {
    text-align: center;
    line-height: 24px;
    font-size: 16px;
    font-weight: 500;
    transition: color .25s
}

.text[data-v-83de55b1] .link {
    color: var(--vt-c-brand);
    white-space: nowrap;
    transition: color .25s
}

.text[data-v-83de55b1] .link:hover {
    color: var(--vt-c-brand-dark)
}

.repl-loading {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 66vh
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    margin-bottom: 10px
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 32px;
    height: 32px;
    margin: 4px;
    border: 4px solid;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;
    border-color: var(--vt-c-brand) transparent transparent transparent
}

.lds-ring div:nth-child(1) {
    animation-delay: -.45s
}

.lds-ring div:nth-child(2) {
    animation-delay: -.3s
}

.lds-ring div:nth-child(3) {
    animation-delay: -.15s
}

@keyframes lds-ring {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.modal-demo {
    position: fixed;
    z-index: 999;
    top: 20%;
    left: 50%;
    width: 300px;
    margin-left: -150px;
    background-color: var(--vt-c-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 16px #00000026
}

.list-enter-active,.list-leave-active {
    transition: all .5s ease
}

.list-enter-from,.list-leave-to {
    opacity: 0;
    transform: translate(30px)
}

.list2-move,.list2-enter-active,.list2-leave-active {
    transition: all .5s ease
}

.list2-enter-from,.list2-leave-to {
    opacity: 0;
    transform: translate(30px)
}

.list2-leave-active {
    position: absolute!important
}

.fade-enter-active,.fade-leave-active {
    transition: opacity .5s ease
}

.fade-enter-from,.fade-leave-to {
    opacity: 0
}

.slide-fade-enter-active {
    transition: all .3s ease-out
}

.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1,.5,.8,1)
}

.slide-fade-enter-from,.slide-fade-leave-to {
    transform: translate(20px);
    opacity: 0
}

.bounce-enter-active {
    animation: bounce-in .5s
}

.bounce-leave-active {
    animation: bounce-in .5s reverse
}

@keyframes bounce-in {
    0% {
        transform: scale(0)
    }

    50% {
        transform: scale(1.25)
    }

    to {
        transform: scale(1)
    }
}

.transition-demo-outer,.transition-demo-inner {
    background: #eee;
    padding: 30px;
    min-height: 100px
}

.transition-demo-inner {
    background: #ccc
}

.nested-enter-active,.nested-leave-active {
    transition: all .3s ease-in-out
}

.nested-leave-active {
    transition-delay: .25s
}

.nested-enter-from,.nested-leave-to {
    transform: translateY(30px);
    opacity: 0
}

.nested-enter-active .transition-demo-inner,.nested-leave-active .transition-demo-inner {
    transition: all .3s ease-in-out
}

.nested-enter-active .transition-demo-inner {
    transition-delay: .25s
}

.nested-enter-from .transition-demo-inner,.nested-leave-to .transition-demo-inner {
    transform: translate(30px);
    opacity: .001
}

.gsap-box {
    background: var(--vt-c-green);
    margin-top: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%
}

.transition-demo {
    display: flex;
    align-items: center
}

.transition-demo .btn-container {
    display: inline-block;
    position: relative;
    height: 36px
}

.transition-demo button {
    position: absolute;
    min-width: 60px
}

.transition-demo button+button {
    margin: 0
}

.transition-demo .slide-up-enter-active,.transition-demo .slide-up-leave-active {
    transition: all .25s ease-out
}

.slide-up-enter-from {
    opacity: 0;
    transform: translateY(30px)
}

.slide-up-leave-to {
    opacity: 0;
    transform: translateY(-30px)
}

.draggable[data-v-d25d588c] {
    background-color: #fff;
    box-shadow: var(--vt-shadow-2);
    width: 320px;
    height: 240px;
    overflow: hidden;
    margin: 30px auto;
    position: relative;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 8px
}

.bg[data-v-d25d588c] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0
}

.header[data-v-d25d588c],.content[data-v-d25d588c] {
    position: relative;
    z-index: 1;
    padding: 30px;
    box-sizing: border-box
}

.header[data-v-d25d588c] {
    color: #fff;
    height: 120px;
    font-size: 2em;
    font-weight: 700
}

.shake {
    animation: shake .82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translateZ(0)
}

@keyframes shake {
    10%,90% {
        transform: translate3d(-1px,0,0)
    }

    20%,80% {
        transform: translate3d(2px,0,0)
    }

    30%,50%,70% {
        transform: translate3d(-4px,0,0)
    }

    40%,60% {
        transform: translate3d(4px,0,0)
    }
}

.movearea {
    color: #fff;
    transition: .3s background-color ease;
    border: none
}

.big-number {
    font-weight: 700;
    font-size: 2em
}

.cell[data-v-3da8ea48],.cell input[data-v-3da8ea48] {
    height: 1.5em;
    line-height: 1.5;
    font-size: 15px;
    color: var(--vt-c-text-1)
}

.cell span[data-v-3da8ea48] {
    padding: 0 6px
}

.cell input[data-v-3da8ea48] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 4px
}

.cell input[data-v-3da8ea48]:focus {
    border: 2px solid var(--vt-c-divider);
    color: var(--vt-c-text-1)
}

th[data-v-dffbe810] {
    color: var(--vt-c-text-1);
    background-color: var(--vt-c-bg-mute);
    padding: 0 1em
}

tr:first-of-type th[data-v-dffbe810] {
    width: 100px
}

tr:first-of-type th[data-v-dffbe810]:first-of-type {
    width: 25px
}

td[data-v-dffbe810] {
    border: 1px solid var(--vt-c-bg-mute);
    padding: 0
}

.vue-mastery-link {
    background-color: var(--vt-c-bg-soft);
    border-radius: 8px;
    padding: 8px 16px 8px 8px;
    transition: color .5s,background-color .5s
}

.vue-mastery-link a {
    display: flex;
    align-items: center
}

.vue-mastery-link .banner {
    background-color: var(--vt-c-white-soft);
    border-radius: 4px;
    width: 96px;
    height: 56px;
    object-fit: cover
}

.vue-mastery-link .description {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--vt-c-text-1);
    margin: 0 0 0 16px;
    transition: color .5s
}

.vue-mastery-link .description span {
    color: var(--vt-c-brand)
}

.vue-mastery-link .logo-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--vt-c-white);
    display: flex;
    justify-content: center;
    align-items: center
}

.vue-mastery-link .logo-wrapper img {
    width: 25px;
    object-fit: contain
}

@media (max-width: 576px) {
    .vue-mastery-link .banner {
        width:56px
    }

    .vue-mastery-link .description {
        font-size: 12px;
        line-height: 18px
    }

    .vue-mastery-link .logo-wrapper {
        position: relative;
        width: 32px;
        height: 32px
    }
}

.code-examples[data-v-36595bd6] {
    display: flex;
    flex-direction: column
}

.code-example [class*=language][data-v-36595bd6-s] {
    margin-top: 0;
    border-top-left-radius: 0
}

.tabs[data-v-36595bd6] {
    display: flex
}

.tab[data-v-36595bd6] {
    color: #fff;
    background: #292d3ef0;
    border-bottom-color: #ffffff4d;
    padding: 6px 24px;
    border-width: 2px;
    border-style: solid;
    border-top: transparent;
    border-right: transparent;
    border-left: transparent;
    cursor: pointer;
    transition: border .2s,background-color .2s
}

.tab.active[data-v-36595bd6] {
    background: #292d3e;
    border-bottom: 2px solid var(--vt-c-brand)
}

.tab[data-v-36595bd6]:first-child {
    border-top-left-radius: 8px
}

.tab[data-v-36595bd6]:last-child {
    border-top-right-radius: 8px
}

@media screen and (max-width: 639px) {
    .tabs[data-v-36595bd6] {
        margin:0 -24px
    }

    .tab[data-v-36595bd6],.tab[data-v-36595bd6]:first-child,.tab[data-v-36595bd6]:last-child {
        flex-grow: 1;
        text-align: center;
        border-radius: 0
    }
}

.dark .testing-code-examples .tab:not(.active) {
    border-bottom: 2px solid rgba(255,255,255,.2);
    background: #2f2f2f;
    color: inherit
}

.dark .testing-code-examples .tab.active {
    background: var(--vt-c-black-soft)
}

[class$=api][data-v-36595bd6-s] {
    display: none
}

.prefers-cypress-api .cypress-api[data-v-36595bd6-s],.prefers-testing-library-api .testing-library-api[data-v-36595bd6-s],.prefers-vtu-api .vtu-api[data-v-36595bd6-s] {
    display: block
}

#sitemap {
    background: var(--vt-c-bg-soft)
}

#sitemap .container {
    max-width: 900px;
    margin: 0 auto;
    columns: 1;
    padding: 24px 32px
}

@media (min-width: 768px) {
    #sitemap .container {
        columns:2
    }
}

@media (min-width: 1024px) {
    #sitemap .container {
        columns:3
    }
}

#sitemap h4 {
    font-weight: 500;
    color: var(--vt-c-text-1);
    margin-bottom: .25em
}

.sitemap-col {
    margin-bottom: 2em;
    break-inside: avoid
}

#sitemap .vt-link {
    font-size: .9em;
    color: var(--vt-c-text-2)
}

section[data-v-9e9e3e87] {
    padding: 42px 32px
}

#hero[data-v-9e9e3e87] {
    padding: 96px 32px;
    text-align: center
}

.tagline[data-v-9e9e3e87] {
    font-size: 76px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -1.5px;
    max-width: 960px;
    margin: 0 auto
}

html:not(.dark) .accent[data-v-9e9e3e87],.dark .tagline[data-v-9e9e3e87] {
    background: -webkit-linear-gradient(315deg,#42d392 25%,#647eff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.description[data-v-9e9e3e87] {
    max-width: 960px;
    line-height: 1.5;
    color: var(--vt-c-text-2);
    transition: color .5s;
    font-size: 22px;
    margin: 24px auto 40px
}

.actions a[data-v-9e9e3e87] {
    font-size: 16px;
    display: inline-block;
    background-color: var(--vt-c-bg-mute);
    padding: 8px 18px;
    font-weight: 500;
    border-radius: 8px;
    transition: background-color .5s,color .5s
}

.actions .get-started[data-v-9e9e3e87] {
    margin-right: 18px
}

.actions .icon[data-v-9e9e3e87] {
    display: inline;
    position: relative;
    top: -1px;
    margin-left: 2px;
    fill: currentColor;
    transition: transform .2s
}

.actions .get-started[data-v-9e9e3e87]:hover {
    transition-duration: .2s
}

.actions .get-started:hover .icon[data-v-9e9e3e87] {
    transform: translate(2px)
}

.actions .get-started[data-v-9e9e3e87],.actions .setup[data-v-9e9e3e87] {
    color: var(--vt-c-text-code)
}

.actions .get-started[data-v-9e9e3e87]:hover,.actions .setup[data-v-9e9e3e87]:hover {
    background-color: var(--vt-c-gray-light-4);
    transition-duration: .2s
}

.dark .actions .get-started[data-v-9e9e3e87]:hover,.dark .actions .setup[data-v-9e9e3e87]:hover {
    background-color: var(--vt-c-gray-dark-3)
}

.actions .get-started[data-v-9e9e3e87] {
    font-size: 16px;
    display: inline-block;
    border-radius: 8px;
    transition: background-color .5s,color .5s;
    position: relative;
    font-weight: 600;
    background-color: var(--vt-c-green);
    color: #fff;
    margin-right: 18px;
    padding: 8px 1em
}

.dark .actions .get-started[data-v-9e9e3e87] {
    color: var(--vt-c-indigo)
}

.actions .get-started[data-v-9e9e3e87]:hover {
    background-color: var(--vt-c-green-dark);
    transition-duration: .2s
}

.dark .actions .get-started[data-v-9e9e3e87]:hover {
    background-color: var(--vt-c-green-light)
}

#special-sponsor[data-v-9e9e3e87] {
    border-top: 1px solid var(--vt-c-divider-light);
    border-bottom: 1px solid var(--vt-c-divider-light);
    padding: 12px 24px
}

#special-sponsor h3[data-v-9e9e3e87] {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    padding-bottom: 10px
}

#special-sponsor-container[data-v-9e9e3e87] {
    display: flex;
    justify-content: center;
    align-items: center
}

#special-sponsor .logo[data-v-9e9e3e87] {
    display: flex;
    justify-content: center;
    padding: 0 20px
}

.dark #special-sponsor img[data-v-9e9e3e87] {
    filter: grayscale(1) invert(1)
}

#highlights[data-v-9e9e3e87] {
    max-width: 960px;
    margin: 0 auto;
    color: var(--vt-c-text-2)
}

#highlights h2[data-v-9e9e3e87] {
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -.4px;
    color: var(--vt-c-text-1);
    transition: color .5s;
    margin-bottom: .75em
}

#highlights p[data-v-9e9e3e87] {
    font-weight: 400;
    font-size: 15px
}

#highlights .vt-box[data-v-9e9e3e87] {
    background-color: transparent
}

#sponsors[data-v-9e9e3e87] {
    max-width: 900px;
    margin: 0 auto
}

#sponsors h2[data-v-9e9e3e87] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 1em
}

#sponsors .sponsor-container[data-v-9e9e3e87] {
    margin-bottom: 3em
}

@media (max-width: 960px) {
    .tagline[data-v-9e9e3e87] {
        font-size:64px;
        letter-spacing: -.5px
    }

    .description[data-v-9e9e3e87] {
        font-size: 18px;
        margin-bottom: 48px
    }
}

@media (max-width: 768px) {
    .tagline[data-v-9e9e3e87] {
        font-size:48px;
        letter-spacing: -.5px
    }
}

@media (max-width: 576px) {
    #hero[data-v-9e9e3e87] {
        padding:56px 32px
    }

    .description[data-v-9e9e3e87] {
        font-size: 16px;
        margin: 18px 0 30px
    }

    #special-sponsor[data-v-9e9e3e87] {
        flex-direction: column;
        height: auto
    }

    #special-sponsor img[data-v-9e9e3e87] {
        height: 36px;
        margin: 8px 0
    }

    #special-sponsor span[data-v-9e9e3e87] {
        text-align: center!important
    }

    #highlights h3[data-v-9e9e3e87] {
        margin-bottom: .6em
    }

    #highlights .vt-box[data-v-9e9e3e87] {
        padding: 20px 36px
    }

    .actions a[data-v-9e9e3e87] {
        margin: 18px 0
    }
}

@media (max-width: 370px) {
    .tagline[data-v-9e9e3e87] {
        font-size:36px
    }
}

.sponsor-container[data-v-e2f014f4] {
    --max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(var(--max-width),1fr));
    column-gap: 4px
}

.sponsor-container.platinum[data-v-e2f014f4] {
    --max-width: 240px
}

.sponsor-container.gold[data-v-e2f014f4] {
    --max-width: 180px
}

.sponsor-container.silver[data-v-e2f014f4] {
    --max-width: 140px
}

.sponsor-item[data-v-e2f014f4] {
    margin: 2px 0;
    background-color: var(--vt-c-white-soft);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 2px;
    transition: background-color .2s ease;
    height: calc(var(--max-width) / 2 - 6px)
}

.sponsor-item.action[data-v-e2f014f4] {
    font-size: 11px;
    color: var(--vt-c-text-3)
}

.sponsor-item img[data-v-e2f014f4] {
    max-width: calc(var(--max-width) - 30px);
    max-height: calc(var(--max-width) / 2 - 20px)
}

.special .sponsor-item[data-v-e2f014f4] {
    height: 160px
}

.special .sponsor-item img[data-v-e2f014f4] {
    max-width: 300px;
    max-height: 150px
}

.dark .aside .sponsor-item[data-v-e2f014f4],.dark .landing .sponsor-item[data-v-e2f014f4] {
    background-color: var(--vt-c-bg-soft)
}

.aside .sponsor-item img[data-v-e2f014f4],.landing .sponsor-item img[data-v-e2f014f4] {
    transition: filter .2s ease
}

.dark .aside .sponsor-item img[data-v-e2f014f4],.dark .landing .sponsor-item img[data-v-e2f014f4] {
    filter: grayscale(1) invert(1)
}

.dark .aside .sponsor-item[data-v-e2f014f4]:hover,.dark .landing .sponsor-item[data-v-e2f014f4]:hover {
    color: var(--vt-c-indigo);
    background-color: var(--vt-c-white-mute)
}

.dark .sponsor-item:hover img[data-v-e2f014f4] {
    filter: none
}

.sponsor-container.platinum.aside[data-v-e2f014f4] {
    --max-width: 110px;
    column-gap: 1px
}

.aside .sponsor-item[data-v-e2f014f4] {
    margin: 1px 0
}

.aside .special .sponsor-item[data-v-e2f014f4] {
    width: 100%;
    height: 70px
}

.aside .special .sponsor-item img[data-v-e2f014f4] {
    width: 120px
}

.aside .platinum .sponsor-item[data-v-e2f014f4] {
    width: 111px;
    height: 50px
}

.aside .platinum .sponsor-item img[data-v-e2f014f4] {
    max-width: 88px
}

@media (max-width: 720px) {
    .sponsor-container.platinum[data-v-e2f014f4] {
        --max-width: 180px
    }

    .sponsor-container.gold[data-v-e2f014f4] {
        --max-width: 140px
    }

    .sponsor-container.silver[data-v-e2f014f4] {
        --max-width: 120px
    }
}

@media (max-width: 480px) {
    .sponsor-container.platinum[data-v-e2f014f4] {
        --max-width: 150px
    }

    .sponsor-container.gold[data-v-e2f014f4] {
        --max-width: 120px
    }

    .sponsor-container.silver[data-v-e2f014f4] {
        --max-width: 100px
    }
}

input[data-v-7527f393] {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border-bottom: 1px solid var(--vt-c-divider-light);
    margin-bottom: 2em
}

.container[data-v-7527f393] {
    max-width: 960px;
    margin: 1em auto 2em;
    padding: 0 28px;
    position: relative
}

.icon[data-v-7527f393] {
    width: 18px;
    height: 18px;
    fill: var(--vt-c-text-3);
    position: absolute;
    top: 12px;
    left: 32px
}

.PartnerHero[data-v-4dfdb604] {
    padding: 48px 24px;
    text-align: center;
    margin: 0 auto;
    max-width: 688px
}

@media (min-width: 768px) {
    .PartnerHero[data-v-4dfdb604] {
        padding:64px 32px
    }
}

.title[data-v-4dfdb604],.lead[data-v-4dfdb604],.PartnerHero[data-v-4dfdb604] .link {
    transition: color .25s
}

.title[data-v-4dfdb604] {
    line-height: 32px;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: .3em
}

@media (min-width: 768px) {
    .title[data-v-4dfdb604] {
        line-height:40px;
        font-size: 40px
    }
}

.lead[data-v-4dfdb604] {
    padding-top: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--vt-c-text-2)
}

.lead a[data-v-4dfdb604],.PartnerHero[data-v-4dfdb604] .link {
    color: var(--vt-c-brand)
}

.PartnerHero[data-v-4dfdb604] .link:hover {
    color: var(--vt-c-brand-dark)
}

.PartnerList[data-v-9768c618] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.browse-all[data-v-9768c618] {
    color: var(--vt-c-text-2);
    transition: color .5s ease;
    font-size: 1.2em;
    text-align: center;
    padding-top: 240px;
    display: block;
    border-radius: 4px;
    border: 1px solid var(--vt-c-divider-light);
    width: 48.5%;
    margin-bottom: 36px
}

.browse-all[data-v-9768c618]:hover {
    color: var(--vt-c-text-1)
}

@media (max-width: 768px) {
    .browse-all[data-v-9768c618] {
        display:none
    }
}

.divider[data-v-3bd8b559] {
    width: 100px;
    margin: 0 auto;
    border-top: 1px solid var(--vt-c-divider-light)
}

.join-container[data-v-3bd8b559] {
    max-width: 688px;
    padding: 28px 28px 96px;
    text-align: center;
    margin: 0 auto
}

.lead[data-v-3bd8b559] {
    color: var(--vt-c-text-2);
    font-weight: 500;
    font-size: 18px
}

h2[data-v-3bd8b559] {
    font-weight: 600;
    letter-spacing: -.5px;
    font-size: 34px;
    line-height: 1.2;
    margin: .5em 0 1em
}

p[data-v-3bd8b559] {
    color: var(--vt-c-text-2)
}

.join[data-v-3bd8b559] {
    margin-top: 2em;
    display: inline-block;
    text-align: center;
    background-color: var(--vt-c-bg-mute);
    color: var(--vt-c-text-code);
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color .5s,color .5s
}

.join[data-v-3bd8b559]:hover {
    background-color: var(--vt-c-gray-light-4)
}

.dark .join[data-v-3bd8b559]:hover {
    background-color: var(--vt-c-gray-dark-3)
}

.partner-card[data-v-9ebf9268] {
    background-color: var(--vt-c-bg);
    padding: 24px 28px;
    border-radius: 4px;
    box-shadow: 0 12px 12px #0000000d;
    display: flex;
    flex-direction: column;
    width: 48.5%;
    margin-bottom: 36px;
    font-size: 15px;
    transition: background-color .5s,box-shadow .25s ease,border-color .25s ease
}

.partner-card.hero[data-v-9ebf9268] {
    font-size: 16px;
    flex-direction: row;
    width: 100%
}

.partner-card.page[data-v-9ebf9268] {
    padding: 0
}

h3[data-v-9ebf9268] {
    font-size: 1.3em;
    font-weight: 700;
    letter-spacing: -.1px;
    margin-bottom: 1em
}

.logo[data-v-9ebf9268] {
    margin-bottom: 1em;
    max-width: 240px;
    max-height: 120px
}

.logo.dark[data-v-9ebf9268],.dark .flipLogo .logo[data-v-9ebf9268]:not(.dark) {
    display: none
}

.dark .logo.dark[data-v-9ebf9268] {
    display: inline-block
}

.partner-card:not(.hero) .big[data-v-9ebf9268] {
    margin-top: auto
}

.partner-card.hero .info[data-v-9ebf9268] {
    margin-right: 2em
}

.partner-card.hero .big[data-v-9ebf9268] {
    display: inline-block;
    margin-left: auto;
    max-width: 60%;
    max-height: 360px;
    object-fit: cover
}

@media (max-width: 768px) {
    .partner-card[data-v-9ebf9268] {
        width:100%
    }

    .partner-card.hero[data-v-9ebf9268] {
        flex-direction: column
    }

    .logo[data-v-9ebf9268] {
        max-width: 200px
    }

    .partner-card.hero .big[data-v-9ebf9268] {
        width: 100%;
        max-width: 100%
    }
}

.partner-card[data-v-9ebf9268]:hover {
    box-shadow: 0 12px 12px #0000001a
}

.partner-card:hover h3[data-v-9ebf9268] {
    color: var(--vt-c-green)
}

.partner-card h3[data-v-9ebf9268] {
    transition: color .25s ease
}

.dark .partner-card[data-v-9ebf9268],.partner-card.page[data-v-9ebf9268] {
    box-shadow: none!important
}

.dark .partner-card[data-v-9ebf9268]:not(.hero) {
    border: 1px solid var(--vt-c-divider-light)
}

.dark .partner-card[data-v-9ebf9268]:not(.hero):hover {
    border-color: #555
}

.partner-card h3[data-v-9ebf9268] {
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: -.1px;
    margin-bottom: .4em
}

.partner-card p[data-v-9ebf9268] {
    margin-bottom: 1.6em
}

.region[data-v-9ebf9268] {
    color: var(--vt-c-text-2);
    font-size: .9em
}

.region svg[data-v-9ebf9268] {
    display: inline-block;
    opacity: .5;
    position: relative;
    top: -1px;
    left: -2px
}

h4[data-v-9ebf9268] {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: .6em
}

.proficiency[data-v-9ebf9268] {
    display: inline-block;
    color: var(--vt-c-text-code);
    font-weight: 600;
    font-size: .85em;
    margin: 2px;
    background-color: var(--vt-c-bg-mute);
    padding: 4px 10px;
    border-radius: 6px
}

.PartnerPage[data-v-5ad98f1b] {
    padding-bottom: 16px
}

.spotlight[data-v-5ad98f1b] {
    background-color: var(--vt-c-bg-soft)
}

.spotlight-inner[data-v-5ad98f1b] {
    padding: 36px 48px;
    max-width: 1280px;
    margin: 0 auto
}

h2[data-v-5ad98f1b] {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 1.5em;
    color: var(--vt-c-text-2)
}

.featured[data-v-5ad98f1b] {
    padding: 36px 48px;
    max-width: 960px;
    margin: 0 auto
}

.browse-all[data-v-5ad98f1b] {
    display: block;
    margin: 1.5em auto;
    width: 240px;
    text-align: center;
    background-color: var(--vt-c-brand);
    color: var(--vt-c-bg);
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color .5s,color .5s
}

.browse-all[data-v-5ad98f1b]:hover {
    background-color: var(--vt-c-brand-dark)
}

@media (max-width: 768px) {
    .spotlight-inner[data-v-5ad98f1b],.featured[data-v-5ad98f1b] {
        padding:36px 28px
    }
}

.partner-page[data-v-ab3a6bec] {
    max-width: 1080px;
    margin: 2em auto;
    padding: 0 28px 64px
}

.back[data-v-ab3a6bec] {
    display: block;
    font-size: .9em;
    font-weight: 600;
    margin: 24px 0 96px
}

.back a[data-v-ab3a6bec] {
    color: var(--vt-c-text-3);
    transition: color .5s
}

.back a[data-v-ab3a6bec]:hover {
    color: var(--vt-c-text-2)
}

.icon[data-v-ab3a6bec] {
    width: 22px;
    height: 22px;
    display: inline-block;
    fill: var(--vt-c-text-3);
    position: relative;
    top: -1px;
    margin-right: 4px
}

.description[data-v-ab3a6bec] {
    max-width: 688px;
    margin: 4em auto
}

h2[data-v-ab3a6bec] {
    font-size: 1.8em;
    font-weight: 700;
    margin-top: 96px;
    margin-bottom: 48px;
    text-align: center
}

.description p[data-v-ab3a6bec] {
    margin-bottom: 1em;
    font-size: 17px;
    line-height: 1.6em;
    color: var(--vt-c-text-2)
}

.actions[data-v-ab3a6bec] {
    text-align: center;
    margin-bottom: 24px
}

.actions a[data-v-ab3a6bec] {
    text-align: center;
    background-color: var(--vt-c-brand);
    color: var(--vt-c-bg);
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color .5s,color .5s;
    margin: 0 8px
}

.actions a[data-v-ab3a6bec]:hover {
    background-color: var(--vt-c-brand-dark)
}

.actions a.contact[data-v-ab3a6bec] {
    color: var(--vt-c-text-code);
    background-color: var(--vt-c-bg-mute)
}

.actions a.contact[data-v-ab3a6bec]:hover {
    background-color: var(--vt-c-gray-light-4)
}

.dark .actions a.contact[data-v-ab3a6bec]:hover {
    background-color: var(--vt-c-gray-dark-3)
}

.hiring[data-v-ab3a6bec] {
    text-align: center
}

.hiring a[data-v-ab3a6bec] {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    color: var(--vt-c-text-2);
    border-top: 1px solid var(--vt-c-divider-light);
    margin-top: 16px;
    padding-top: 20px
}

.hiring a[data-v-ab3a6bec]:hover {
    color: var(--vt-c-green)
}

@media (max-width: 768px) {
    .back[data-v-ab3a6bec] {
        margin-bottom:48px
    }

    h2[data-v-ab3a6bec] {
        margin-top: 48px
    }
}

@font-face {
    font-family: Quotes;
    src: local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");
    unicode-range: U+2018,U+2019,U+201C,U+201D
}

body {
    --vt-font-family-base: Quotes, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    text-rendering: unset!important;
    font-synthesis: unset!important
}

[lang|=en] {
    font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif
}

.vt-doc.api h2 .header-anchor,.vt-doc.style-guide h2 .header-anchor {
    opacity: 1
}

.vt-doc.sponsor h3 {
    text-align: center;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--vt-c-divider-light)
}

.vt-doc.sponsor h3 .header-anchor {
    display: none
}

.vt-badge.wip:before {
    content: "WIP"
}

.vt-badge.ts {
    background-color: #3178c6
}

.vt-badge.ts:before {
    content: "TS"
}

.vt-badge.dev-only,.vt-badge.experimental {
    color: var(--vt-c-text-light-1);
    background-color: var(--vt-c-yellow)
}

.vt-badge.dev-only:before {
    content: "Dev only"
}

.vt-badge.experimental:before {
    content: "Experimental"
}

.vt-badge[data-text]:before {
    content: attr(data-text)
}

.next-steps {
    margin-top: 3rem
}

.next-steps .vt-box {
    border: 1px solid var(--vt-c-bg-soft)
}

.next-steps .vt-box:hover {
    border-color: var(--vt-c-green-light);
    transition: border-color .3s cubic-bezier(.25,.8,.25,1)
}

.vt-doc .next-steps-link {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -.02em;
    margin-bottom: .75em;
    display: block;
    color: var(--vt-c-green)
}

.vt-doc .next-steps-caption {
    margin-bottom: 0;
    color: var(--vt-c-text-2);
    transition: color .5s
}

.vt-doc a[href^="h.orgttps://play.vuejs"]:before {
    content: "▶";
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 10px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    color: var(--vt-c-green);
    border: 2px solid var(--vt-c-green);
    margin-right: 8px;
    margin-left: 4px;
    line-height: 15px;
    padding-left: 4.5px;
    font-size: 11px
}

.demo {
    padding: 22px 24px;
    border-radius: 8px;
    box-shadow: var(--vt-shadow-2);
    margin-bottom: 1.2em;
    transition: background-color .5s ease
}

.dark .demo {
    background-color: var(--vt-c-bg-soft)
}

.demo p {
    margin: 0
}

.demo button {
    background-color: var(--vt-c-bg-mute);
    transition: background-color .5s;
    padding: 5px 12px;
    border: 1px solid var(--vt-c-divider);
    border-radius: 8px;
    font-size: .9em;
    font-weight: 600
}

.demo button+button {
    margin-left: 1em
}

.demo input,.demo textarea,.demo select {
    border: 1px solid var(--vt-c-divider);
    border-radius: 4px;
    padding: .2em .6em;
    margin-top: 10px;
    background: transparent;
    transition: background-color .5s
}

.dark .demo select {
    background: var(--vt-c-bg-soft)
}

.dark .demo select option {
    background: transparent
}

.demo input:not([type]):focus,.demo textarea:focus,.demo select:focus {
    outline: 1px solid blue
}

.demo select {
    -webkit-appearance: listbox
}

.demo label {
    margin: 0 1em 0 .4em
}

.demo select[multiple] {
    width: 100px
}

.demo h1 {
    margin: 10px 0 0
}

.nowrap {
    white-space: nowrap
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0
}

.style-example {
    border-radius: 8px 8px 12px 12px;
    margin: 1.6em 0;
    padding: 1.6em 1.6em .1px;
    position: relative;
    border: 1px solid transparent;
    transition: background-color .25s ease,border-color .25s ease
}

.vt-doc .style-example h3 {
    margin: 0;
    font-size: 1.1em
}

.style-example-bad {
    background: #f7e8e8
}

.dark .style-example-bad {
    background: transparent;
    border-color: var(--vt-c-red)
}

.style-example-bad h3 {
    color: var(--vt-c-red)
}

.style-example-good {
    background: #ecfaf7
}

.dark .style-example-good {
    background: transparent;
    border-color: var(--vt-c-green)
}

.style-example-good h3 {
    color: var(--vt-c-green)
}

.details summary {
    font-weight: 700!important
}

.style-verb {
    font-size: .6em;
    display: inline-block;
    border-radius: 6px;
    font-size: .65em;
    line-height: 1;
    font-weight: 600;
    padding: .35em .4em .3em;
    position: relative;
    top: -.15em;
    margin-right: .5em;
    color: var(--vt-c-bg);
    transition: color .5s;
    background-color: var(--vt-c-brand)
}

.style-verb.avoid {
    background-color: var(--vt-c-red)
}

.vt-flyout-menu {
    max-height: calc(100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px))!important
}

a.sponsors-aside-text {
    color: var(--vt-c-text-3);
    display: block;
    margin: 3em 0 1em;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px
}

.wwads-container {
    padding: 1px 15px 10px;
    margin-top: 20px;
    background-color: var(--vt-c-bg-soft)
}

.wwads-vertical {
    background-color: transparent!important
}

.wwads-text {
    color: var(--vt-c-text-2)!important
}

.preference-tooltip[data-v-3809ac97] {
    font-weight: 500;
    line-height: 1.6;
    position: absolute;
    padding: 12px 20px 12px 36px;
    width: 100%;
    background-color: var(--vt-c-bg-soft);
    top: 7.5em;
    border: 1px solid var(--vt-c-green);
    border-radius: 8px;
    box-shadow: var(--vt-shadow-3);
    z-index: 10
}

.preference-tooltip[data-v-3809ac97]:before {
    content: "ⓘ";
    position: absolute;
    font-weight: 600;
    font-size: 14px;
    top: 9px;
    left: 13px
}

.dark .preference-tooltip[data-v-3809ac97] {
    box-shadow: var(--vt-shadow-1)
}

p[data-v-3809ac97] {
    margin-bottom: 8px
}

.arrow-top[data-v-3809ac97] {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom: 9px solid var(--vt-c-green);
    position: absolute;
    top: -16px;
    left: 18px
}

.prefer-composition .arrow-top[data-v-3809ac97] {
    left: 130px
}

@media (max-width: 1439px) {
    .arrow-top[data-v-3809ac97] {
        left:16px
    }

    .prefer-composition .arrow-top[data-v-3809ac97] {
        left: 136px
    }
}

.arrow-top.inner[data-v-3809ac97] {
    border-bottom-color: var(--vt-c-bg-soft);
    top: -14px
}

.actions[data-v-3809ac97] {
    text-align: right;
    margin-top: 14px;
    margin-bottom: 0
}

a[data-v-3809ac97] {
    color: var(--vt-c-green);
    text-decoration: underline;
    margin-right: 1.5em
}

button[data-v-3809ac97] {
    color: var(--vt-c-bg-soft);
    font-weight: 500;
    box-shadow: var(--vt-shadow-2);
    padding: 2px 8px;
    border-radius: 6px;
    background-color: var(--vt-c-green)
}

.fly-in-enter-active[data-v-3809ac97] {
    transition: all .2s ease-out
}

.fly-in-leave-active[data-v-3809ac97] {
    transition: all .15s ease-in
}

.fly-in-enter-from[data-v-3809ac97],.fly-in-leave-to[data-v-3809ac97] {
    opacity: 0;
    transform: translateY(16px)
}

.preference-switch[data-v-9490edee] {
    font-size: 12px;
    border-bottom: 1px solid var(--vt-c-divider-light);
    transition: border-color .5s,background-color .5s ease;
    margin-bottom: 20px;
    position: sticky;
    top: -.5px;
    background-color: var(--vt-c-bg);
    padding-top: 10px;
    z-index: 10
}

.toggle[data-v-9490edee] {
    color: var(--vt-c-text-2);
    transition: color .5s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2px;
    width: 100%;
    font-weight: 600
}

.toggle[data-v-9490edee]:hover {
    color: var(--vt-c-text-1)
}

.no-outline[data-v-9490edee] {
    outline: 0
}

.vt-link-icon[data-v-9490edee] {
    position: relative;
    top: 1px
}

.vt-link-icon.open[data-v-9490edee] {
    transform: rotate(180deg)
}

#preference-switches[data-v-9490edee] {
    padding: 12px 16px;
    background-color: var(--vt-c-bg-soft);
    transition: background-color .5s;
    margin: 6px 0 12px;
    border-radius: 8px;
    font-weight: 600
}

.switch-container[data-v-9490edee] {
    display: flex;
    align-items: center
}

@media (max-width: 959px) {
    .switch-container[data-v-9490edee] {
        padding:0 1em
    }
}

.switch-container[data-v-9490edee]:nth-child(2) {
    margin-top: 10px
}

.vt-switch[data-v-9490edee] {
    margin-right: 5px;
    transform: scale(.8)
}

.switch-container label[data-v-9490edee] {
    transition: color .5s;
    cursor: pointer
}

.switch-container label[data-v-9490edee]:first-child {
    width: 50px
}

.switch-link[data-v-9490edee] {
    margin-left: 8px;
    font-size: 11px;
    min-width: 14px;
    height: 14px;
    line-height: 13px;
    text-align: center;
    color: var(--vt-c-green);
    border: 1px solid var(--vt-c-green);
    border-radius: 50%
}

@media (max-width: 1439px) {
    #preference-switches[data-v-9490edee] {
        font-size:11px;
        padding: 8px 4px
    }

    .vt-switch[data-v-9490edee] {
        margin: auto
    }

    .switch-link[data-v-9490edee] {
        margin-left: auto
    }

    .switch-container label[data-v-9490edee]:first-child {
        width: 46px
    }
}

.composition-api,.sfc,.prefer-composition .options-api,.prefer-sfc .html {
    display: none
}

.prefer-composition .composition-api,.prefer-sfc .sfc {
    display: initial
}

.prefer-composition .api-switch .vt-switch-check {
    transform: translate(18px)
}

.composition-label,.sfc-label,.prefer-composition .options-label,.prefer-sfc .no-sfc-label {
    color: var(--vt-c-text-3)
}

.prefer-composition .composition-label,.prefer-sfc .sfc-label {
    color: var(--vt-c-text-1)
}

.prefer-sfc .sfc-switch .vt-switch-check {
    transform: translate(18px)
}

.tip .options-api,.tip .composition-api {
    color: var(--vt-c-text-code);
    font-weight: 600
}

.vue-repl {
    max-width: 1105px;
    border-right: 1px solid var(--vt-c-divider-light);
    height: calc(var(--vh, 0px) - var(--vt-nav-height) - var(--vt-banner-height, 0px))
}

@media (max-width: 960px) {
    .vue-repl {
        border:none;
        height: calc(var(--vh, 0px) - var(--vt-nav-height) - var(--vt-banner-height, 0px) - 48px)
    }
}

.split-pane[data-v-3102671e] {
    display: flex;
    height: 100%;
    position: relative
}

.split-pane.dragging[data-v-3102671e] {
    cursor: ew-resize
}

.dragging .left[data-v-3102671e],.dragging .right[data-v-3102671e] {
    pointer-events: none
}

.left[data-v-3102671e],.right[data-v-3102671e] {
    position: relative;
    height: 100%
}

.left[data-v-3102671e] {
    border-right: 1px solid var(--border)
}

.dragger[data-v-3102671e] {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    right: -5px;
    width: 10px;
    cursor: ew-resize
}

.toggler[data-v-3102671e] {
    display: none;
    z-index: 3;
    font-family: var(--font-code);
    color: var(--text-light);
    position: absolute;
    left: 50%;
    bottom: 20px;
    background-color: var(--bg);
    padding: 8px 12px;
    border-radius: 8px;
    transform: translate(-50%);
    box-shadow: 0 3px 8px #00000040
}

.dark .toggler[data-v-3102671e] {
    background-color: var(--bg)
}

@media (min-width: 721px) {
    .split-pane.vertical[data-v-3102671e] {
        display:block
    }

    .split-pane.vertical.dragging[data-v-3102671e] {
        cursor: ns-resize
    }

    .vertical .dragger[data-v-3102671e] {
        top: auto;
        height: 10px;
        width: 100%;
        left: 0;
        right: 0;
        bottom: -5px;
        cursor: ns-resize
    }

    .vertical .left[data-v-3102671e],.vertical .right[data-v-3102671e] {
        width: 100%
    }

    .vertical .left[data-v-3102671e] {
        border-right: none;
        border-bottom: 1px solid var(--border)
    }
}

@media (max-width: 720px) {
    .left[data-v-3102671e],.right[data-v-3102671e] {
        width:100%!important;
        height: 100%!important
    }

    .dragger[data-v-3102671e] {
        display: none
    }

    .split-pane .toggler[data-v-3102671e] {
        display: block
    }

    .split-pane .right[data-v-3102671e] {
        display: none
    }

    .split-pane.show-output .right[data-v-3102671e] {
        display: block
    }

    .split-pane.show-output .left[data-v-3102671e] {
        display: none
    }
}

.file-selector[data-v-ca3f0315] {
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg);
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
    height: var(--header-height)
}

.file-selector[data-v-ca3f0315]::-webkit-scrollbar {
    height: 1px
}

.file-selector[data-v-ca3f0315]::-webkit-scrollbar-track {
    background-color: var(--border)
}

.file-selector[data-v-ca3f0315]::-webkit-scrollbar-thumb {
    background-color: var(--color-branding)
}

.file-selector.has-import-map .add[data-v-ca3f0315] {
    margin-right: 10px
}

.file[data-v-ca3f0315] {
    display: inline-block;
    font-size: 13px;
    font-family: var(--font-code);
    cursor: pointer;
    color: var(--text-light);
    box-sizing: border-box
}

.file.active[data-v-ca3f0315] {
    color: var(--color-branding);
    border-bottom: 3px solid var(--color-branding);
    cursor: text
}

.file span[data-v-ca3f0315] {
    display: inline-block;
    padding: 8px 10px 6px;
    line-height: 20px
}

.file.pending input[data-v-ca3f0315] {
    width: 90px;
    height: 30px;
    line-height: 30px;
    outline: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 0 0 10px;
    margin-top: 2px;
    margin-left: 6px;
    font-family: var(--font-code);
    font-size: 12px
}

.file .remove[data-v-ca3f0315] {
    display: inline-block;
    vertical-align: middle;
    line-height: 12px;
    cursor: pointer;
    padding-left: 0
}

.add[data-v-ca3f0315] {
    font-size: 18px;
    font-family: var(--font-code);
    color: #999;
    vertical-align: middle;
    margin-left: 6px;
    position: relative;
    top: -1px
}

.add[data-v-ca3f0315]:hover {
    color: var(--color-branding)
}

.icon[data-v-ca3f0315] {
    margin-top: -1px
}

.import-map-wrapper[data-v-ca3f0315] {
    position: sticky;
    margin-left: auto;
    top: 0;
    right: 0;
    padding-left: 30px;
    background-color: var(--bg);
    background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%)
}

.dark .import-map-wrapper[data-v-ca3f0315] {
    background: linear-gradient(90deg,rgba(26,26,26,0) 0%,rgba(26,26,26,1) 25%)
}

.CodeMirror-dialog {
    position: absolute;
    left: 0;
    right: 0;
    background: inherit;
    z-index: 15;
    padding: .1em .8em;
    overflow: hidden;
    color: inherit
}

.CodeMirror-dialog-top {
    border-bottom: 1px solid #eee;
    top: 0
}

.CodeMirror-dialog-bottom {
    border-top: 1px solid #eee;
    bottom: 0
}

.CodeMirror-dialog input {
    border: none;
    outline: none;
    background: transparent;
    width: 20em;
    color: inherit;
    font-family: monospace
}

.CodeMirror-dialog button {
    font-size: 70%
}

.CodeMirror {
    color: var(--symbols);
    --symbols: #777;
    --base: #545281;
    --comment: hsl(210, 25%, 60%);
    --keyword: #af4ab1;
    --variable: var(--base);
    --function: #c25205;
    --string: #2ba46d;
    --number: #c25205;
    --tags: #dd0000;
    --brackets: var(--comment);
    --qualifier: #ff6032;
    --important: var(--string);
    --attribute: #9c3eda;
    --property: #6182b8;
    --selected-bg: #d7d4f0;
    --selected-bg-non-focus: #d9d9d9;
    --cursor: #000;
    direction: ltr;
    font-family: var(--font-code);
    height: auto
}

.dark .CodeMirror {
    color: var(--symbols);
    --symbols: #89ddff;
    --base: #a6accd;
    --comment: #6d6d6d;
    --keyword: #89ddff;
    --string: #c3e88d;
    --variable: #82aaff;
    --number: #f78c6c;
    --tags: #f07178;
    --brackets: var(--symbols);
    --property: #f07178;
    --attribute: #c792ea;
    --cursor: #fff;
    --selected-bg: rgba(255, 255, 255, .1);
    --selected-bg-non-focus: rgba(255, 255, 255, .15)
}

.CodeMirror-lines {
    padding: 4px 0
}

.CodeMirror pre {
    padding: 0 4px
}

.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler {
    background-color: #fff
}

.CodeMirror-gutters {
    border-right: 1px solid var(--border);
    background-color: transparent;
    white-space: nowrap
}

.CodeMirror-linenumber {
    padding: 0 3px 0 5px;
    min-width: 20px;
    text-align: right;
    color: var(--comment);
    white-space: nowrap;
    opacity: .6
}

.CodeMirror-guttermarker {
    color: #000
}

.CodeMirror-guttermarker-subtle {
    color: #999
}

.CodeMirror-foldmarker {
    color: #414141;
    text-shadow: #ff9966 1px 1px 2px,#ff9966 -1px -1px 2px,#ff9966 1px -1px 2px,#ff9966 -1px 1px 2px;
    font-family: arial;
    line-height: .3;
    cursor: pointer
}

.CodeMirror-foldgutter {
    width: .7em
}

.CodeMirror-foldgutter-open,.CodeMirror-foldgutter-folded {
    cursor: pointer
}

.CodeMirror-foldgutter-open:after,.CodeMirror-foldgutter-folded:after {
    content: ">";
    font-size: .8em;
    opacity: .8;
    transition: transform .2s;
    display: inline-block;
    top: -.1em;
    position: relative;
    transform: rotate(90deg)
}

.CodeMirror-foldgutter-folded:after {
    transform: none
}

.CodeMirror-cursor {
    border-left: 1px solid var(--cursor);
    border-right: none;
    width: 0
}

.CodeMirror div.CodeMirror-secondarycursor {
    border-left: 1px solid silver
}

.cm-fat-cursor .CodeMirror-cursor {
    width: auto;
    border: 0!important;
    background: #7e7
}

.cm-fat-cursor div.CodeMirror-cursors {
    z-index: 1
}

.cm-fat-cursor-mark {
    background-color: #14ff1480;
    -webkit-animation: blink 1.06s steps(1) infinite;
    -moz-animation: blink 1.06s steps(1) infinite;
    animation: blink 1.06s steps(1) infinite
}

.cm-animate-fat-cursor {
    width: auto;
    border: 0;
    -webkit-animation: blink 1.06s steps(1) infinite;
    -moz-animation: blink 1.06s steps(1) infinite;
    animation: blink 1.06s steps(1) infinite;
    background-color: #7e7
}

@-moz-keyframes blink {
    50% {
        background-color: transparent
    }
}

@-webkit-keyframes blink {
    50% {
        background-color: transparent
    }
}

@keyframes blink {
    50% {
        background-color: transparent
    }
}

.cm-tab {
    display: inline-block;
    text-decoration: inherit
}

.CodeMirror-rulers {
    position: absolute;
    left: 0;
    right: 0;
    top: -50px;
    bottom: -20px;
    overflow: hidden
}

.CodeMirror-ruler {
    border-left: 1px solid #ccc;
    top: 0;
    bottom: 0;
    position: absolute
}

.cm-s-default.CodeMirror {
    background-color: transparent
}

.cm-s-default .cm-header {
    color: #00f
}

.cm-s-default .cm-quote {
    color: #090
}

.cm-negative {
    color: #d44
}

.cm-positive {
    color: #292
}

.cm-header,.cm-strong {
    font-weight: 700
}

.cm-em {
    font-style: italic
}

.cm-link {
    text-decoration: underline
}

.cm-strikethrough {
    text-decoration: line-through
}

.cm-s-default .cm-atom,.cm-s-default .cm-def,.cm-s-default .cm-variable-2,.cm-s-default .cm-variable-3,.cm-s-default .cm-punctuation {
    color: var(--base)
}

.cm-s-default .cm-property {
    color: var(--property)
}

.cm-s-default .cm-hr,.cm-s-default .cm-comment {
    color: var(--comment)
}

.cm-s-default .cm-attribute {
    color: var(--attribute)
}

.cm-s-default .cm-keyword {
    color: var(--keyword)
}

.cm-s-default .cm-variable {
    color: var(--variable)
}

.cm-s-default .cm-tag {
    color: var(--tags)
}

.cm-s-default .cm-bracket {
    color: var(--brackets)
}

.cm-s-default .cm-number {
    color: var(--number)
}

.cm-s-default .cm-string,.cm-s-default .cm-string-2 {
    color: var(--string)
}

.cm-s-default .cm-type {
    color: #ffd000
}

.cm-s-default .cm-meta {
    color: #555
}

.cm-s-default .cm-qualifier {
    color: var(--qualifier)
}

.cm-s-default .cm-builtin {
    color: #7539ff
}

.cm-s-default .cm-link {
    color: var(--flash)
}

.cm-s-default .cm-error,.cm-invalidchar {
    color: #ff008c
}

.CodeMirror-composing {
    border-bottom: 2px solid
}

div.CodeMirror span.CodeMirror-matchingbracket {
    color: #0b0
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: #a22
}

.CodeMirror-matchingtag {
    background: rgba(255,150,0,.3)
}

.CodeMirror-activeline-background {
    background: #e8f2ff
}

.CodeMirror {
    position: relative;
    overflow: hidden;
    background: white
}

.CodeMirror-scroll {
    overflow: scroll!important;
    margin-bottom: -30px;
    margin-right: -30px;
    padding-bottom: 30px;
    height: 100%;
    outline: none;
    position: relative
}

.CodeMirror-sizer {
    position: relative;
    border-right: 30px solid transparent
}

.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler {
    position: absolute;
    z-index: 6;
    display: none
}

.CodeMirror-vscrollbar {
    right: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: scroll
}

.CodeMirror-hscrollbar {
    bottom: 0;
    left: 0;
    overflow-y: hidden;
    overflow-x: scroll
}

.CodeMirror-scrollbar-filler {
    right: 0;
    bottom: 0
}

.CodeMirror-gutter-filler {
    left: 0;
    bottom: 0
}

.CodeMirror-gutters {
    position: absolute;
    left: 0;
    top: 0;
    min-height: 100%;
    z-index: 3
}

.CodeMirror-gutter {
    white-space: normal;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: -30px
}

.CodeMirror-gutter-wrapper {
    position: absolute;
    z-index: 4;
    background: none!important;
    border: none!important
}

.CodeMirror-gutter-background {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4
}

.CodeMirror-gutter-elt {
    position: absolute;
    cursor: default;
    z-index: 4
}

.CodeMirror-gutter-wrapper ::selection {
    background-color: transparent
}

.CodeMirror-gutter-wrapper ::-moz-selection {
    background-color: transparent
}

.CodeMirror-lines {
    cursor: text;
    min-height: 1px
}

.CodeMirror pre {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-width: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    white-space: pre;
    word-wrap: normal;
    line-height: inherit;
    color: inherit;
    z-index: 2;
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-variant-ligatures: contextual;
    font-variant-ligatures: contextual
}

.CodeMirror-wrap pre {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: normal
}

.CodeMirror-linebackground {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0
}

.CodeMirror-linewidget {
    position: relative;
    z-index: 2;
    padding: .1px
}

.CodeMirror-rtl pre {
    direction: rtl
}

.CodeMirror-code {
    outline: none
}

.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber {
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.CodeMirror-measure {
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden
}

.CodeMirror-cursor {
    position: absolute;
    pointer-events: none
}

.CodeMirror-measure pre {
    position: static
}

div.CodeMirror-cursors {
    visibility: hidden;
    position: relative;
    z-index: 3
}

div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors {
    visibility: visible
}

.CodeMirror-selected {
    background: var(--selected-bg-non-focus)
}

.CodeMirror-focused .CodeMirror-selected {
    background: var(--selected-bg)
}

.CodeMirror-crosshair {
    cursor: crosshair
}

.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection {
    background: var(--selected-bg)
}

.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection {
    background: var(--selected-bg)
}

.cm-searching {
    background-color: #ffa;
    background-color: #ff06
}

.cm-force-border {
    padding-right: .1px
}

@media print {
    .CodeMirror div.CodeMirror-cursors {
        visibility: hidden
    }
}

.cm-tab-wrap-hack:after {
    content: ""
}

span.CodeMirror-selectedtext {
    background: none
}

.CodeMirror-dialog {
    background-color: var(--bg)
}

.editor {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden
}

.CodeMirror {
    font-family: var(--font-code);
    line-height: 1.5;
    height: 100%
}

.msg[data-v-92411507] {
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    z-index: 10;
    border: 2px solid transparent;
    border-radius: 6px;
    font-family: var(--font-code);
    white-space: pre-wrap;
    margin-bottom: 8px;
    max-height: calc(100% - 300px);
    min-height: 40px;
    display: flex;
    align-items: stretch
}

pre[data-v-92411507] {
    margin: 0;
    padding: 12px 20px;
    overflow: auto
}

.dismiss[data-v-92411507] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    text-align: center;
    display: block;
    font-size: 9px;
    padding: 0;
    background-color: red;
    color: #fff
}

@media (max-width: 720px) {
    .dismiss[data-v-92411507] {
        top:-9px;
        right: -9px
    }

    .msg[data-v-92411507] {
        bottom: 50px
    }
}

.msg.err[data-v-92411507] {
    color: red;
    border-color: red;
    background-color: #ffd7d7
}

.msg.warn[data-v-92411507] {
    --color: rgb(105, 95, 27);
    color: var(--color);
    border-color: var(--color);
    background-color: #f7f0cd
}

.msg.warn .dismiss[data-v-92411507] {
    background-color: var(--color)
}

.fade-enter-active[data-v-92411507],.fade-leave-active[data-v-92411507] {
    transition: all .15s ease-out
}

.fade-enter-from[data-v-92411507],.fade-leave-to[data-v-92411507] {
    opacity: 0;
    transform: translateY(10px)
}

.editor-container[data-v-f260d43f] {
    height: calc(100% - var(--header-height));
    overflow: hidden;
    position: relative
}

.iframe-container[data-v-d68a47ef],.iframe-container[data-v-d68a47ef] iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #fff
}

.output-container[data-v-5d2df9cb] {
    height: calc(100% - var(--header-height));
    overflow: hidden;
    position: relative
}

.tab-buttons[data-v-5d2df9cb] {
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg);
    height: var(--header-height);
    overflow: hidden
}

.tab-buttons button[data-v-5d2df9cb] {
    padding: 0;
    box-sizing: border-box
}

.tab-buttons span[data-v-5d2df9cb] {
    font-size: 13px;
    font-family: var(--font-code);
    text-transform: uppercase;
    color: var(--text-light);
    display: inline-block;
    padding: 8px 16px 6px;
    line-height: 20px
}

button.active[data-v-5d2df9cb] {
    color: var(--color-branding-dark);
    border-bottom: 3px solid var(--color-branding-dark)
}

.vue-repl[data-v-691b02e0] {
    --bg: #fff;
    --bg-soft: #f8f8f8;
    --border: #ddd;
    --text-light: #888;
    --font-code: Menlo, Monaco, Consolas, "Courier New", monospace;
    --color-branding: #42b883;
    --color-branding-dark: #416f9c;
    --header-height: 38px;
    font-size: 13px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
    margin: 0;
    overflow: hidden;
    background-color: var(--bg-soft)
}

.dark .vue-repl[data-v-691b02e0] {
    --bg: #1a1a1a;
    --bg-soft: #242424;
    --border: #383838;
    --text-light: #aaa;
    --color-branding: #42d392;
    --color-branding-dark: #89ddff
}

[data-v-691b02e0] button {
    border: none;
    outline: none;
    cursor: pointer;
    margin: 0;
    background-color: transparent
}

.tutorial[data-v-9972dbda] {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
    --height: calc( 100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px) )
}

.preference-switch[data-v-9972dbda] {
    position: relative
}

.instruction[data-v-9972dbda] {
    width: 45%;
    height: var(--height);
    padding: 0 32px 24px;
    border-right: 1px solid var(--vt-c-divider-light);
    font-size: 15px;
    overflow-y: auto;
    position: relative;
    --vt-nav-height: 40px
}

.vue-repl[data-v-9972dbda] {
    width: 55%;
    height: var(--height)
}

.vt-flyout[data-v-9972dbda] {
    z-index: 9;
    position: absolute;
    right: 20px
}

.vt-menu-link.active[data-v-9972dbda] {
    font-weight: 500;
    color: var(--vt-c-brand)
}

footer[data-v-9972dbda] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--vt-c-divider);
    margin-top: 1.5em;
    padding-top: 1em
}

footer a[data-v-9972dbda] {
    font-weight: 500;
    color: var(--vt-c-brand)
}

.next-step[data-v-9972dbda] {
    margin-left: auto
}

.vt-doc[data-v-9972dbda] h1 {
    font-size: 1.4em;
    margin: 1em 0
}

.vt-doc[data-v-9972dbda] h2 {
    font-size: 1.1em;
    margin: 1.2em 0 .5em;
    padding: 0;
    border-top: none
}

.vt-doc[data-v-9972dbda] .header-anchor {
    display: none
}

.vt-doc[data-v-9972dbda] summary {
    cursor: pointer
}

.hint[data-v-9972dbda] {
    padding-top: 1em
}

button[data-v-9972dbda] {
    background-color: var(--vt-c-brand);
    color: var(--vt-c-bg);
    padding: 4px 12px 3px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px
}

@media (min-width: 1377px) {
    .vue-repl[data-v-9972dbda] {
        border-right:1px solid var(--vt-c-divider-light)
    }
}

@media (min-width: 1441px) {
    .tutorial[data-v-9972dbda] {
        padding-right:32px
    }
}

[data-v-9972dbda] .narrow {
    display: none
}

@media (max-width: 720px) {
    .tutorial[data-v-9972dbda] {
        display:block
    }

    .instruction[data-v-9972dbda] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--vt-c-divider-light);
        height: 30vh;
        padding: 0 24px 24px
    }

    .vue-repl[data-v-9972dbda] {
        width: 100%;
        height: calc(70vh - var(--vt-nav-height) - var(--vt-banner-height, 0px))
    }

    [data-v-9972dbda] .wide {
        display: none
    }

    [data-v-9972dbda] .narrow {
        display: inline
    }
}