.hc {
    --hc-ink:#202238;
    --hc-muted:#717386;
    color:var(--hc-ink)
}
.hc-wrap {
    width:min(1280px,calc(100% - 64px));
    margin:auto
}
.hc svg {
    flex-shrink:0
}
.hc-eyebrow {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px!important;
    letter-spacing:.13em;
    font-weight:650;
    color:#7650cf!important;
    margin:0 0 15px!important;
    line-height:1.5!important
}
.hc-hero {
    text-align:center;
    background:radial-gradient(ellipse at 50% -40%,#e8defe 0,transparent 72%),linear-gradient(#f8f5ff,#fff);
    padding:74px 0 48px
}
.hc-hero .hc-eyebrow {
    justify-content:center
}
.hc-hero h1 {
    font-size:clamp(38px,4.4vw,61px);
    letter-spacing:-.045em;
    font-weight:600;
    line-height:1.1
}
.hc-hero h1 span {
    color:#7148d5
}
.hc-lede {
    font-size:17px;
    line-height:1.8;
    max-width:700px;
    margin:23px auto 28px;
    color:#6b6d7e
}
.hc-search-trigger {
    display:flex;
    align-items:center;
    gap:13px;
    border:1px solid #dfdce9;
    border-radius:12px;
    background:#fff;
    text-align:left;
    color:#8a8299;
    padding:18px 20px;
    box-shadow:0 6px 20px #33205b06
}
.hc-search-trigger span {
    flex:1
}
.hc-search-trigger:hover {
    border-color:#9d81de
}
.hc-search-trigger kbd {
    font:11px inherit;
    white-space:nowrap;
    border:1px solid #ece9f0;
    border-radius:5px;
    padding:3px 6px;
    color:#93909d
}
.hc-search-hero {
    width:100%;
    max-width:620px;
    margin:auto;
    font-size:14px
}
.hc-popular {
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    font-size:12px;
    margin:16px 0 0;
    color:#82818d
}
.hc-popular a {
    color:#686274;
    border-bottom:1px solid #dcd6e7
}
.hc-home {
    padding-bottom:76px
}
.hc-welcome {
    display:flex;
    align-items:center;
    gap:24px;
    background:#f6f4fb;
    border:1px solid #eeebf5;
    border-radius:18px;
    padding:31px 34px
}
.hc-welcome-icon {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:65px;
    height:65px;
    background:white;
    color:#734ad3;
    border-radius:17px;
    box-shadow:0 3px 12px #39206108
}
.hc-welcome h2 {
    font-size:23px;
    letter-spacing:-.025em
}
.hc-welcome p:not(.hc-eyebrow) {
    font-size:14px;
    line-height:1.75;
    margin-top:9px;
    max-width:630px
}
.hc-welcome .hc-eyebrow {
    font-size:10px!important;
    margin-bottom:8px!important
}
.hc-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    background:#fff;
    border:1px solid #d8cbed;
    border-radius:9px;
    white-space:nowrap;
    padding:12px 18px;
    font-size:13px;
    font-weight:600;
    color:#6235b6
}
.hc-welcome .hc-button {
    margin-left:auto
}
.hc-button:hover {
    background:#f2edfc
}
.hc-section {
    margin-top:62px
}
.hc-section-title {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:24px
}
.hc-section-title h2 {
    font-size:30px;
    letter-spacing:-.035em
}
.hc-section-title .hc-eyebrow {
    margin-bottom:10px!important
}
.hc-section-title>a {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:#7351b6
}
.hc-task-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
.hc-task {
    display:flex;
    flex-direction:column;
    border:1px solid #e8e5ee;
    border-radius:15px;
    padding:25px 22px;
    transition:transform .2s,box-shadow .2s
}
.hc-task:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 30px #31205209;
    border-color:#c9b9e8
}
.hc-task-icon {
    display:grid;
    place-items:center;
    width:47px;
    height:47px;
    border-radius:12px;
    color:#548c74;
    background:#edf5f0;
    margin-bottom:25px
}
.hc-task-1 .hc-task-icon {
    color:#7650cf;
    background:#f2edfc
}
.hc-task-2 .hc-task-icon {
    color:#b38934;
    background:#fbf5e8
}
.hc-task-3 .hc-task-icon {
    color:#5a7aa8;
    background:#edf3fa
}
.hc-task h3 {
    font-size:17px;
    letter-spacing:-.02em
}
.hc-task p {
    font-size:13px;
    line-height:1.8;
    margin:10px 0 23px
}
.hc-task-link {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:12px;
    font-weight:600;
    margin-top:auto;
    color:#656073
}
.hc-count {
    font-size:12px;
    color:#898393
}
.hc-collections {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #e9e6ef;
    border-left:1px solid #e9e6ef;
    border-radius:14px;
    overflow:hidden
}
.hc-collection {
    display:flex;
    align-items:start;
    gap:15px;
    padding:26px 24px;
    border-bottom:1px solid #e9e6ef;
    border-right:1px solid #e9e6ef;
    scroll-margin-top:110px
}
.hc-collection:hover {
    background:#faf8fe
}
.hc-collection-number {
    font-size:11px;
    color:#a99bbb;
    margin-top:3px
}
.hc-collection h3 {
    font-size:16px
}
.hc-collection p {
    font-size:12.5px;
    line-height:1.8;
    margin:8px 0 13px
}
.hc-collection div>span {
    font-size:11px;
    color:#9b91a7
}
.hc-collection>svg {
    margin:2px 0 0 auto;
    color:#b6adc4;
    width:16px
}
.hc-support {
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:62px;
    padding:30px 0;
    border-top:1px solid #ece9f1
}
.hc-support>svg {
    color:#8a75a9
}
.hc-support h2 {
    font-size:23px
}
.hc-support p {
    font-size:13px;
    margin-top:7px
}
.hc-support>a:not(.hc-button) {
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    font-size:12px;
    color:#7c639c
}
.hc-collection-page {
    max-width:900px;
    padding:34px 0 90px
}
.hc-breadcrumb {
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    font-size:11px;
    color:#938b9f;
    margin-bottom:32px
}
.hc-breadcrumb a:hover {
    color:#6335ed
}
.hc-collection-page h1 {
    font-size:43px
}
.hc-collection-page .hc-lede {
    margin:20px 0 25px
}
.hc-collection-page .hc-search-trigger {
    max-width:none
}
.hc-article-list {
    margin:35px 0
}
.hc-article-list>a {
    display:flex;
    align-items:center;
    gap:20px;
    padding:25px 0;
    border-bottom:1px solid #eeebf2
}
.hc-article-list h2 {
    font-size:19px;
    letter-spacing:-.02em
}
.hc-article-list p {
    font-size:13px;
    margin-top:8px
}
.hc-article-list svg {
    margin-left:auto;
    color:#9c86ba
}
.hc-back {
    font-size:13px;
    color:#7650cf
}
.hc-doc-layout {
    display:grid;
    grid-template-columns:265px minmax(0,1fr) 175px;
    gap:32px;
    padding:32px 0 70px
}
.hc-sidebar {
    position:sticky;
    top:110px;
    align-self:start;
    display:flex;
    flex-direction:column;
    max-height:calc(100dvh - 159px);
    min-height:0;
    overflow:visible;
    padding-right:0
}
.hc-search-sidebar {
    flex-shrink:0;
    width:100%;
    padding:11px 12px;
    font-size:14px;
    gap:8px;
    box-shadow:none
}
.hc-search-sidebar kbd {
    font-size:9px
}
.hc-search-sidebar svg {
    width:15px
}
.hc-browse>summary {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#9a8eaa;
    font-weight:600;
    margin:23px 0 16px;
    cursor:pointer
}
.hc-nav-group {
    margin-bottom:5px
}
.hc-nav-group>summary {
    padding:11px 2px;
    font-size:15px;
    line-height:1.5;
    font-weight:600;
    cursor:pointer;
    color:#625970
}
.hc-nav-group[open]>summary {
    color:#6f3eca
}
.hc-nav-group ul {
    list-style:none;
    padding:0 0 0 10px;
    margin:3px 0 15px;
    border-left:1px solid #eee7f7
}
.hc-nav-group a {
    display:block;
    padding:9px 12px;
    font-size:14px;
    line-height:1.5;
    color:#6c6179;
    border-radius:6px
}
.hc-nav-group a:hover {
    color:#6335ed;
    background:#faf8fd
}
.hc-nav-group a[aria-current] {
    background:#f3edfd;
    color:#6739be;
    font-weight:600
}
.hc-doc-main {
    min-width:0;
    padding:0 0 15px
}
.hc-doc-header {
    padding-bottom:26px;
    border-bottom:1px solid #eeebf3;
    margin-bottom:31px
}
.hc-doc-header .hc-eyebrow {
    text-transform:uppercase
}
.hc-doc-header h1 {
    font-size:clamp(31px,3vw,43px);
    letter-spacing:-.04em;
    line-height:1.15;
    max-width:760px
}
.hc-doc-header>p:not(.hc-eyebrow) {
    font-size:16px;
    line-height:1.8;
    margin-top:18px
}
.hc-doc-meta {
    display:flex;
    gap:12px;
    font-size:11px;
    color:#9a91a5;
    margin-top:20px
}
.hc-prose {
    font-size:14px;
    line-height:1.95;
    color:#60596e
}
.hc-prose>p {
    margin:0 0 20px;
    color:inherit
}
.hc-prose h2 {
    font-size:24px;
    letter-spacing:-.025em;
    color:#30233f;
    margin:38px 0 17px;
    scroll-margin-top:110px
}
.hc-prose h3 {
    font-size:18px;
    color:#45324f;
    letter-spacing:-.02em;
    margin:25px 0 12px;
    scroll-margin-top:110px
}
.hc-prose a {
    color:#7549c7;
    text-decoration:underline;
    text-underline-offset:3px
}
.hc-prose strong {
    color:#45394f;
    font-weight:600
}
.hc-prose ul,.hc-prose ol {
    padding-left:24px;
    margin:15px 0 24px
}
.hc-prose li {
    padding-left:5px;
    margin:9px 0
}
.hc-prose li::marker {
    color:#9c7eca
}
.hc-prose li>p {
    color:inherit;
    margin:6px 0
}
.hc-prose blockquote {
    margin:25px 0;
    border-left:3px solid #d9c8f3;
    padding:7px 0 7px 22px;
    color:#67517f
}
.hc-prose table {
    display:block;
    overflow-x:auto;
    border-collapse:collapse;
    width:100%;
    font-size:12px;
    margin:25px 0
}
.hc-prose th,.hc-prose td {
    text-align:left;
    padding:12px 14px;
    border:1px solid #e8e1f0;
    vertical-align:top
}
.hc-prose th {
    background:#f8f5fc;
    color:#574267
}
.hc-prose code {
    font-size:12px;
    background:#f5f1fa;
    padding:3px 5px;
    border-radius:4px
}
.hc-callout {
    display:flex;
    align-items:start;
    gap:13px;
    background:#f7f3fd;
    border:1px solid #eadef7;
    border-radius:10px;
    padding:19px 20px;
    margin:26px 0;
    font-size:13px;
    line-height:1.85
}
.hc-callout>svg {
    color:#9a77c9;
    margin-top:3px
}
.hc-callout strong {
    display:block;
    margin-bottom:6px
}
.hc-callout p {
    color:inherit;
    margin:0
}
.hc-callout-warning {
    background:#fffbf2;
    border-color:#eee3c9
}
.hc-callout-warning>svg {
    color:#ad8d48
}
.hc-callout-tip {
    background:#f3f9f6;
    border-color:#d8eadf
}
.hc-callout-tip>svg {
    color:#79a28e
}
.hc-screenshot {
    margin:30px 0
}
.hc-screenshot-open {
    position:relative;
    display:block;
    width:100%;
    padding:0;
    border:1px solid #e8e1f1;
    background:#f8f6fb;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 8px 30px #38204907
}
.hc-screenshot-open img {
    width:100%;
    height:auto
}
.hc-screenshot-open>span {
    position:absolute;
    display:flex;
    gap:6px;
    align-items:center;
    right:10px;
    bottom:10px;
    border:1px solid #e5ddee;
    background:#ffffffeb;
    padding:3px 8px;
    border-radius:6px;
    font-size:10px;
    color:#705087;
    opacity:.7
}
.hc-screenshot-open:hover>span {
    opacity:1
}
.hc-screenshot figcaption {
    text-align:center;
    font-size:11px;
    line-height:1.7;
    color:#9a8da5;
    margin:12px auto 0;
    max-width:90%
}
.hc-toc {
    position:sticky;
    top:123px;
    align-self:start;
    font-size:11px;
    max-height:calc(100vh - 145px);
    overflow:auto
}
.hc-toc .hc-eyebrow {
    font-size:9px!important;
    color:#a195aa!important
}
.hc-toc ul {
    list-style:none;
    padding:0;
    margin:0
}
.hc-toc li {
    margin:11px 0;
    line-height:1.65;
    color:#9c90a7
}
.hc-toc a[aria-current] {
    color:#7244c5
}
.hc-toc-sub {
    padding-left:12px
}
.hc-toc-home {
    display:block;
    padding:19px 0;
    border-top:1px solid #eee8f4;
    margin-top:30px;
    color:#978ba4;
    line-height:2
}
.hc-toc-home strong {
    font-weight:500;
    color:#784ead
}
.hc-article-help {
    margin:44px 0 28px;
    padding:24px;
    background:#f8f6fb;
    border-radius:12px;
    font-size:13px
}
.hc-article-help p {
    font-size:12px;
    margin:7px 0 13px
}
.hc-article-help a {
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#794cb2;
    font-size:12px
}
.hc-neighbors {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px
}
.hc-neighbors a {
    border:1px solid #e9e1f0;
    border-radius:9px;
    padding:17px;
    font-size:12px
}
.hc-neighbors a:hover {
    background:#faf7fd
}
.hc-neighbors span {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:10px;
    color:#9c8ca8;
    margin-bottom:9px
}
.hc-neighbors strong {
    font-weight:500
}
.hc-search-dialog {
    padding:0;
    border:1px solid #e8e0f2;
    border-radius:16px;
    width:min(650px,calc(100% - 32px));
    max-height:80vh;
    margin:12vh auto auto;
    color:#30233f;
    box-shadow:0 30px 100px #1a123b30;
    overflow:hidden
}
.hc-search-dialog::backdrop,.hc-lightbox::backdrop {
    background:#20153680;
    backdrop-filter:blur(4px)
}
.hc-search-input {
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 22px;
    border-bottom:1px solid #eee7f3;
    color:#9b8aaf
}
.hc-search-input input {
    border:0;
    outline:none!important;
    width:100%;
    background:none;
    font-size:15px;
    color:#3b284e;
    padding:5px
}
.hc-search-input button {
    border:0;
    background:none;
    color:#a194ae
}
.hc-search-label {
    font-size:10px;
    letter-spacing:.08em;
    padding:18px 23px 8px;
    color:#a799b0
}
.hc-search-results {
    max-height:49vh;
    overflow:auto;
    padding:0 10px 12px
}
.hc-search-results>a {
    display:flex;
    align-items:center;
    gap:15px;
    border-radius:9px;
    padding:14px;
    text-decoration:none;
    color:#5d3e7a
}
.hc-search-results>a[data-selected=true] {
    background:#f6f1fc
}
.hc-search-results>a>div {
    min-width:0;
    flex:1
}
.hc-search-results small {
    display:block;
    color:#a18fb3;
    font-size:10px
}
.hc-search-results strong {
    display:block;
    font-size:14px;
    font-weight:550;
    margin-top:3px
}
.hc-search-results p {
    font-size:11px;
    margin-top:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#9584a4
}
.hc-search-hint {
    background:#fcfaff;
    border-top:1px solid #efe9f6;
    padding:11px 23px;
    font-size:10px;
    color:#a495b0
}
.hc-search-empty {
    padding:20px;
    font-size:13px
}
.hc-search-empty p {
    font-size:12px;
    margin-top:10px;
    line-height:1.8
}
.hc-search-empty a {
    color:#7845bf;
    text-decoration:underline
}
.hc-lightbox {
    border:0;
    border-radius:12px;
    padding:14px;
    width:min(1400px,95vw);
    max-height:94vh;
    overflow:auto;
    background:#fff
}
.hc-lightbox img {
    width:100%;
    height:auto
}
.hc-lightbox p {
    text-align:center;
    font-size:13px;
    margin:15px 35px 5px;
    color:#7f6e8f
}
.hc-lightbox-close {
    position:sticky;
    top:0;
    float:right;
    display:grid;
    place-items:center;
    width:35px;
    height:35px;
    margin-bottom:-35px;
    z-index:1;
    border:1px solid #ded3ec;
    border-radius:50%;
    background:white;
    color:#7c5a96
}
@media(min-width:1600px) {
    .hc-doc-layout {
        grid-template-columns:280px minmax(0,1fr) 180px;
        gap:40px
    }
}
@media(max-width:1100px) {
    .hc-doc-layout {
        grid-template-columns:240px minmax(0,1fr);
        gap:28px
    }
    .hc-toc {
        display:none
    }
    .hc-collections {
        grid-template-columns:repeat(2,1fr)
    }
    .hc-welcome {
        flex-wrap:wrap
    }
    .hc-welcome .hc-button {
        margin-left:89px
    }
    .hc-support {
        flex-wrap:wrap
    }
    .hc-support>a:not(.hc-button) {
        margin-left:0
    }
    .hc-task-grid {
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:760px) {
    .hc-wrap {
        width:calc(100% - 36px)
    }
    .hc-hero {
        padding:43px 0 30px
    }
    .hc-hero h1 {
        font-size:39px
    }
    .hc-lede {
        font-size:15px
    }
    .hc-desktop {
        display:none
    }
    .hc-popular {
        gap:12px;
        font-size:10px
    }
    .hc-welcome {
        padding:23px;
        gap:15px
    }
    .hc-welcome-icon {
        width:45px;
        height:45px
    }
    .hc-welcome h2 {
        font-size:23px
    }
    .hc-welcome .hc-button {
        margin-left:0
    }
    .hc-section {
        margin-top:40px
    }
    .hc-section-title {
        align-items:start;
        flex-direction:column;
        gap:12px
    }
    .hc-section-title h2 {
        font-size:27px
    }
    .hc-task-grid {
        gap:12px
    }
    .hc-task {
        padding:19px 16px
    }
    .hc-task h3 {
        font-size:15px
    }
    .hc-task p {
        font-size:12px
    }
    .hc-task-link {
        font-size:10px
    }
    .hc-task-icon {
        margin-bottom:19px;
        width:41px;
        height:41px
    }
    .hc-collections {
        grid-template-columns:1fr
    }
    .hc-collection {
        padding:23px 19px
    }
    .hc-support {
        margin-top:40px
    }
    .hc-support h2 {
        font-size:21px
    }
    .hc-doc-layout {
        display:flex;
        flex-direction:column;
        gap:20px;
        padding-top:20px
    }
    .hc-sidebar {
        position:static;
        max-height:none;
        padding:0
    }
    .hc-browse {
        background:#faf8fd;
        border:1px solid #eee7f5;
        border-radius:8px;
        margin-top:10px;
        padding:0 12px
    }
    .hc-browse>summary {
        margin:12px 0
    }
    .hc-browse nav {
        max-height:260px;
        overflow:auto
    }
    .hc-doc-header h1 {
        font-size:33px
    }
    .hc-breadcrumb {
        margin-bottom:25px
    }
    .hc-doc-header>p:not(.hc-eyebrow) {
        font-size:15px
    }
    .hc-prose {
        font-size:14px
    }
    .hc-prose h2 {
        font-size:23px
    }
    .hc-search-trigger kbd {
        display:none
    }
    .hc-collection-page {
        padding-top:23px
    }
    .hc-collection-page h1 {
        font-size:35px
    }
    .hc-neighbors {
        grid-template-columns:1fr
    }
    .hc-lightbox {
        padding:6px
    }
    .hc-prose table {
        font-size:11px
    }
    .hc-prose td,.hc-prose th {
        padding:9px
    }
    .hc-search-dialog {
        margin-top:8vh
    }
    .hc-search-input {
        padding:14px
    }
    .hc-search-input input {
        font-size:13px
    }
}
@media(prefers-reduced-motion:reduce) {
    .hc * {
        scroll-behavior:auto!important;
        transition:none!important
    }
}
@media print {
    .site-header,.hc-sidebar,.hc-toc,.hc-neighbors,.hc-article-help,.site-footer {
        display:none!important
    }
    .hc-doc-layout {
        display:block;
        width:100%
    }
    .hc-screenshot-open>span {
        display:none
    }
    .hc-prose a {
        color:inherit
    }
    .hc-screenshot {
        break-inside:avoid
    }
}
/* Leave room for the fixed marketing navigation on every documentation route. */
.hc-doc-layout,.hc-collection-page {
    padding-top:135px
}
.hc-nav-label {
    flex-shrink:0;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#9a8eaa;
    font-weight:600;
    margin:23px 0 16px
}
.hc-mobile-browse {
    display:none
}
.hc a:focus-visible,.hc button:focus-visible,.hc summary:focus-visible {
    outline:2px solid #7650cf;
    outline-offset:4px
}
@media(max-width:760px) {
    .hc-doc-layout,.hc-collection-page {
        padding-top:110px
    }
    .hc-desktop-browse {
        display:none
    }
    .hc-mobile-browse {
        display:block
    }
}
@media(max-width:760px) {
    .hc-sidebar {
        width:100%
    }
}
.hc-prose {
    font-size: 16px;
    line-height: 1.85;
}
.hc-screenshot figcaption {
    font-size: 12px;
}

/* Search and the label stay put; only the collection links scroll. */
.hc-desktop-browse {
    display:flex;
    flex-direction:column;
    min-height:0;
}
.hc-desktop-browse>nav {
    min-height:0;
    overflow-y:auto;
    padding:4px 10px 28px 4px;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:#c2b3d8 #f6f2fa;
    overscroll-behavior-y:contain;
    scroll-padding-block:12px;
}
.hc-desktop-browse>nav::-webkit-scrollbar {
    width:5px;
}
.hc-desktop-browse>nav::-webkit-scrollbar-track {
    background:#f6f2fa;
    border-radius:8px;
}
.hc-desktop-browse>nav::-webkit-scrollbar-thumb {
    background:#c2b3d8;
    border-radius:8px;
}
@media(max-width:760px) {
    .hc-desktop-browse { display:none; }
    .hc-browse nav {
        max-height:min(360px,50dvh);
        padding:4px 4px 18px;
        scrollbar-width:thin;
        scrollbar-color:#c2b3d8 #f6f2fa;
        overscroll-behavior-y:contain;
    }
}