.guide-page {
    --guide-accent:#344dc7;
    --guide-soft:#f0f3ff;
    --guide-line:#dfe4ef;
    --guide-muted:#586579;
    --guide-surface:#fff;
    color:#17263c;
    background:#fff
}
[data-bs-theme=dark] .guide-page {
    --guide-accent:#adbaff;
    --guide-soft:#142641;
    --guide-line:#304158;
    --guide-muted:#b3c0d4;
    --guide-surface:#102035;
    color:#e7eef9;
    background:#081827
}
.guide-page :where(a,button,input,summary):focus-visible {
    outline:3px solid var(--guide-accent);
    outline-offset:4px
}
.guide-page :where(p,li) {
    line-height:1.85
}
.guide-page :where(h1,h2,h3) {
    color:inherit;
    line-height:1.35;
    letter-spacing:-.035em
}
.guide-page main a {
    color:var(--guide-accent);
    text-underline-offset:4px
}
.guide-page :where(h2,h3,li[id]) {
    scroll-margin-top:120px
}
.guide-page [hidden] {
    display:none!important
}
.guide-hub {
    max-width:1200px;
    margin:auto;
    padding:112px 28px 80px
}
.guide-hero {
    text-align:center;
    padding:22px 0 38px
}
.guide-eyebrow {
    font-size:12px;
    letter-spacing:.14em;
    font-weight:700;
    color:var(--guide-accent)
}
.guide-hero h1 {
    font-size:clamp(32px,4vw,52px);
    margin:12px 0
}
.guide-hero h1 span {
    color:var(--guide-accent)
}
.guide-hero>p {
    font-size:18px;
    color:var(--guide-muted)
}
.guide-search {
    max-width:710px;
    margin:22px auto 0;
    text-align:left
}
.guide-search label {
    display:block;
    font-size:14px;
    font-weight:650;
    margin-bottom:10px
}
.guide-search>div {
    display:flex;
    gap:12px;
    align-items:center;
    background:var(--guide-surface);
    border:1px solid var(--guide-line);
    border-radius:16px;
    padding:8px 10px 8px 20px;
    box-shadow:0 12px 40px #23376a0d
}
.guide-search>div>span {
    font-size:28px;
    color:var(--guide-muted)
}
.guide-search input {
    min-width:0;
    flex:1;
    border:0;
    background:transparent;
    color:inherit;
    min-height:48px;
    font-size:15px
}
.guide-search button {
    border:0;
    background:#344dc7;
    color:#fff;
    padding:12px 24px;
    border-radius:10px;
    min-height:48px
}
.guide-section-heading {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px
}
.guide-section-heading h2,.guide-popular h2,.guide-support h2 {
    font-size:24px;
    margin:0
}
.guide-section-heading>span,.guide-popular>p {
    font-size:14px;
    color:var(--guide-muted)
}
.guide-quick {
    margin-bottom:64px
}
.guide-quick-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
.guide-quick-grid>a {
    position:relative;
    text-decoration:none;
    background:var(--guide-soft);
    border:1px solid transparent;
    border-radius:18px;
    padding:24px;
    color:inherit;
    transition:border-color .15s
}
.guide-quick-grid>a:hover {
    border-color:var(--guide-accent)
}
.guide-number {
    display:block;
    color:var(--guide-accent);
    font-size:13px;
    font-weight:700;
    margin-bottom:28px
}
.guide-quick h3 {
    font-size:19px;
    font-weight:700
}
.guide-quick p {
    font-size:13px;
    color:var(--guide-muted);
    margin:0
}
.guide-quick-grid>a>span:last-child {
    position:absolute;
    right:24px;
    top:24px;
    color:var(--guide-accent)
}
.guide-category-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.guide-category {
    padding:28px;
    background:var(--guide-surface);
    border:1px solid var(--guide-line);
    border-radius:18px;
    scroll-margin-top:115px
}
.guide-category-icon {
    display:inline-flex;
    width:42px;
    height:42px;
    border-radius:12px;
    background:var(--guide-soft);
    color:var(--guide-accent);
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-bottom:18px
}
.guide-category h3 {
    font-size:20px;
    font-weight:700;
    margin-bottom:16px
}
.guide-category ul {
    list-style:none;
    padding:0;
    margin:0
}
.guide-category a {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    min-height:44px;
    color:var(--guide-muted);
    text-decoration:none;
    font-size:14px
}
.guide-category a:hover {
    color:var(--guide-accent);
    text-decoration:underline
}
.guide-category a span {
    opacity:.6
}
.guide-popular {
    padding:44px 0
}
.guide-popular>p {
    margin-top:10px
}
.guide-chips {
    display:flex;
    flex-wrap:wrap;
    gap:10px
}
.guide-chips a {
    border:1px solid var(--guide-line);
    border-radius:12px;
    padding:10px 16px;
    min-height:44px;
    text-decoration:none;
    background:var(--guide-surface);
    font-size:14px
}
.guide-support {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:var(--guide-soft);
    padding:32px;
    border-radius:18px
}
.guide-support p {
    margin:10px 0 0;
    color:var(--guide-muted);
    font-size:14px
}
.guide-support>div:last-child {
    display:flex;
    gap:20px;
    align-items:center;
    flex-shrink:0
}
.guide-primary-link {
    display:inline-block;
    background:#344dc7;
    color:#fff!important;
    border-radius:10px;
    padding:12px 20px;
    min-height:44px;
    text-decoration:none
}
.guide-results {
    margin-bottom:48px;
    border-bottom:1px solid var(--guide-line);
    padding-bottom:32px
}
.guide-result {
    display:block;
    padding:20px 0;
    border-top:1px solid var(--guide-line);
    text-decoration:none
}
.guide-result h3 {
    font-size:19px
}
.guide-result p {
    margin:5px 0;
    color:var(--guide-muted)
}
.guide-result small {
    color:var(--guide-muted)
}
.guide-document {
    max-width:1520px;
    margin:auto;
    padding:116px 28px 80px;
    display:grid;
    grid-template-columns:220px minmax(0,780px) 170px;
    gap:40px;
    justify-content:center
}
.guide-sidebar,.guide-toc {
    align-self:start;
    position:sticky;
    top:116px;
    max-height:calc(100vh - 140px);
    overflow:auto
}
.guide-mobile-panel>summary {
    display:none
}
.guide-navigation .guide-back {
    display:block;
    font-size:14px;
    text-decoration:none;
    margin-bottom:18px;
    min-height:44px;
    padding:10px 0
}
.guide-navigation details {
    border-bottom:1px solid var(--guide-line)
}
.guide-navigation summary {
    font-size:14px;
    padding:12px 0;
    cursor:pointer;
    font-weight:650;
    min-height:44px
}
.guide-navigation ul {
    list-style:none;
    padding:0 0 12px;
    margin:0
}
.guide-navigation li>a {
    display:block;
    padding:10px 12px;
    min-height:44px;
    border-radius:8px;
    color:var(--guide-muted);
    font-size:13px;
    text-decoration:none
}
.guide-navigation a[aria-current=page] {
    color:var(--guide-accent);
    background:var(--guide-soft);
    font-weight:700
}
.guide-breadcrumb {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    font-size:12px;
    color:var(--guide-muted);
    margin-bottom:22px
}
.guide-breadcrumb a {
    color:var(--guide-muted);
    min-height:24px
}
.guide-article-header {
    padding-bottom:24px;
    border-bottom:1px solid var(--guide-line);
    margin-bottom:28px
}
.guide-article-header h1 {
    font-size:clamp(30px,3vw,42px);
    margin:10px 0 14px
}
.guide-lead {
    font-size:19px;
    color:var(--guide-muted)
}
.guide-meta {
    font-size:12px;
    color:var(--guide-muted)
}
.guide-usage-note {
    border-radius:8px;
    background:var(--guide-soft);
    padding:16px 20px;
    font-size:14px;
    line-height:1.7
}
.guide-usage-note strong {
    display:block;
    margin-bottom:6px
}
.guide-usage-note p {
    margin:0
}
[data-guide-content]>section {
    margin:36px 0
}
[data-guide-content] h2 {
    font-size:24px;
    margin:0 0 20px
}
[data-guide-content] h3 {
    font-size:19px;
    font-weight:650;
    margin-bottom:12px
}
[data-guide-content] p {
    font-size:16px;
    margin:12px 0
}
[data-guide-content] ul {
    padding-left:24px
}
.guide-steps {
    list-style:none;
    counter-reset:guide-step;
    padding:0!important
}
.guide-steps>li {
    counter-increment:guide-step;
    position:relative;
    padding:8px 0 24px 50px
}
.guide-steps>li:before {
    content:counter(guide-step);
    position:absolute;
    left:0;
    top:7px;
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--guide-soft);
    color:var(--guide-accent);
    font-weight:700
}
.guide-steps>li:not(:last-child) {
    border-bottom:1px solid var(--guide-line);
    margin-bottom:24px
}
.guide-callout {
    padding:20px 24px;
    border:1px solid var(--guide-line);
    border-left:4px solid var(--guide-accent);
    background:var(--guide-soft);
    border-radius:10px;
    margin:24px 0
}
.guide-callout p {
    margin-bottom:0
}
.guide-callout strong>span {
    display:inline-grid;
    place-items:center;
    border:1px solid currentColor;
    border-radius:50%;
    width:20px;
    height:20px;
    margin-right:5px;
    font-size:13px
}
.guide-callout-danger {
    border-left-color:#cf5a53
}
.guide-callout-warning {
    border-left-color:#b17a18
}
.guide-figure {
    margin:24px 0
}
.guide-steps .guide-figure {
    margin:18px 0 4px
}
.guide-figure>a {
    display:inline-block;
    max-width:100%;
    border-radius:12px
}
.guide-figure img {
    display:block;
    max-width:100%;
    height:auto;
    max-height:700px;
    object-fit:contain;
    border:1px solid var(--guide-line);
    border-radius:12px
}
.guide-figure figcaption {
    font-size:13px;
    color:var(--guide-muted);
    margin-top:12px
}
.guide-figure figcaption a {
    margin-left:8px;
    white-space:nowrap
}
.guide-toc h2 {
    font-size:13px;
    font-weight:700
}
.guide-toc ol {
    list-style:none;
    padding:0
}
.guide-toc a {
    display:block;
    color:var(--guide-muted);
    font-size:12px;
    padding:10px 0;
    min-height:44px;
    text-decoration:none
}
.guide-toc a[aria-current=location] {
    color:var(--guide-accent);
    font-weight:700
}
.guide-related {
    border-top:1px solid var(--guide-line);
    padding-top:28px;
    margin-top:48px
}
.guide-related h2,.guide-feedback h2 {
    font-size:18px;
    margin-bottom:20px
}
.guide-pagination {
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin:32px 0
}
.guide-pagination a {
    padding:18px;
    border:1px solid var(--guide-line);
    border-radius:12px;
    max-width:48%;
    text-decoration:none;
    font-size:14px
}
.guide-pagination span {
    display:block;
    font-size:12px;
    color:var(--guide-muted);
    margin-bottom:6px
}
.guide-feedback {
    background:var(--guide-soft);
    padding:24px;
    border-radius:14px
}
.guide-feedback p {
    font-size:14px;
    color:var(--guide-muted)
}
.guide-feedback a {
    display:inline-block;
    min-height:44px;
    padding-top:8px
}
.guide-preparing {
    max-width:760px;
    margin:auto;
    padding:200px 24px 130px
}
.guide-preparing h1 {
    font-size:40px;
    margin:24px 0
}
.guide-preparing p {
    color:var(--guide-muted);
    margin-bottom:30px
}
.guide-preparing>a {
    margin-right:24px
}
.guide-skip {
    position:fixed;
    left:20px;
    top:-100px;
    z-index:2000;
    background:var(--guide-surface);
    padding:16px
}
.guide-skip:focus {
    top:20px
}
@media(max-width:1199px) {
    .guide-document {
        grid-template-columns:190px minmax(0,780px);
        gap:28px
    }
    .guide-toc {
        grid-column:2;
        grid-row:1;
        position:static;
        max-height:none;
        border-bottom:1px solid var(--guide-line);
        padding-bottom:12px
    }
    .guide-toc ol {
        display:flex;
        flex-wrap:wrap;
        gap:18px;
        margin:0
    }
    .guide-sidebar {
        grid-column:1;
        grid-row:1/3
    }
    .guide-document>article {
        grid-column:2
    }
    .guide-quick-grid {
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:767px) {
    .guide-hub {
        padding:100px 20px 50px
    }
    .guide-hero {
        padding:16px 0 28px
    }
    .guide-hero>p {
        font-size:16px
    }
    .guide-search input {
        font-size:14px
    }
    .guide-search button {
        padding:12px
    }
    .guide-section-heading {
        display:block
    }
    .guide-section-heading>span {
        display:block;
        margin-top:8px
    }
    .guide-category-grid {
        grid-template-columns:1fr
    }
    .guide-quick-grid {
        grid-template-columns:1fr;
        gap:12px
    }
    .guide-quick-grid>a {
        padding:18px
    }
    .guide-quick h3 {
        font-size:17px
    }
    .guide-quick p {
        font-size:12px
    }
    .guide-support {
        display:block;
        padding:24px
    }
    .guide-support>div:last-child {
        margin-top:20px;
        flex-wrap:wrap
    }
    .guide-document {
        display:flex;
        flex-direction:column;
        padding:102px 20px 50px;
        gap:20px
    }
    .guide-sidebar,.guide-toc {
        position:static;
        max-height:none;
        width:100%
    }
    .guide-mobile-panel>summary {
        display:block;
        padding:12px 0;
        cursor:pointer;
        min-height:44px;
        font-weight:700
    }
    .guide-sidebar details.guide-mobile-panel:not([open])>.guide-navigation {
        display:none
    }
    .guide-document>article {
        min-width:0
    }
    .guide-toc {
        order:0
    }
    .guide-document>article {
        order:1
    }
    .guide-article-header {
        margin-top:8px
    }
    .guide-lead {
        font-size:17px
    }
    .guide-steps>li {
        padding-left:42px
    }
    .guide-breadcrumb {
        margin-bottom:24px
    }
    .guide-pagination a {
        padding:12px
    }
    .guide-preparing h1 {
        font-size:30px
    }
}
@media(prefers-reduced-motion:reduce) {
    .guide-page * {
        scroll-behavior:auto!important;
        transition:none!important
    }
}