:root {
    --doc-panel: #111718;
    --doc-panel-2: #151c1d;
    --doc-border: rgba(210,220,215,.14);
    --doc-border-strong: rgba(210,220,215,.24);
    --doc-text: #f3f5f2;
    --doc-soft: #cbd1cd;
    --doc-muted: #9ba39f;
    --doc-green: #76d564;
}

.doc-page {
    min-height: 100vh;
    background:
        linear-gradient(rgba(118,213,100,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(118,213,100,.014) 1px, transparent 1px),
        #0b0f10;
    background-size: 72px 72px;
    color: var(--doc-text);
}

.doc-shell {
    width: min(1480px, calc(100% - 2rem));
    margin: 0 auto;
}

.doc-hero {
    padding: 3.2rem 0 2.5rem;
    border-bottom: 1px solid var(--doc-border);
    background: linear-gradient(180deg, #0e1314, rgba(11,15,16,.96));
}

.doc-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .48rem;
    margin-bottom: 1.25rem;
    color: #747d78;
    font-size: .74rem;
    font-weight: 600;
}

.doc-breadcrumb a {
    color: #aab2ad;
    text-decoration: none;
}

.doc-breadcrumb a:hover { color: var(--doc-green); }
.doc-breadcrumb strong { color: #dce2de; }

.doc-kicker {
    color: var(--doc-green);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.doc-hero h1 {
    max-width: 900px;
    margin: .45rem 0 .7rem;
    color: #fff;
    font-family: "Bahnschrift Condensed", "Arial Narrow", sans-serif;
    font-size: clamp(2.8rem, 6vw, 5.3rem);
    font-weight: 700;
    line-height: .96;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.doc-hero p {
    max-width: 820px;
    margin: 0;
    color: var(--doc-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.doc-home {
    padding: 1.2rem 0 4rem;
}

.doc-home-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .9rem;
    border: 1px solid var(--doc-border-strong);
    background: var(--doc-panel);
}

.doc-search {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    padding: 0 .85rem;
    border: 1px solid var(--doc-border-strong);
    background: #0d1213;
}

.doc-search svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--doc-muted);
    stroke-width: 1.8;
}

.doc-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: .9rem;
}

.doc-search input::placeholder { color: #737c77; }
.doc-home-tools span { color: var(--doc-muted); font-size: .76rem; }

.doc-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.doc-section-card {
    min-width: 0;
    border: 1px solid var(--doc-border-strong);
    background: linear-gradient(180deg, var(--doc-panel-2), var(--doc-panel));
}

.doc-section-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .8rem;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--doc-border);
}

.doc-section-code {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(118,213,100,.36);
    background: rgba(118,213,100,.08);
    color: var(--doc-green);
    font-size: .75rem;
    font-weight: 700;
}

.doc-section-card h2 {
    margin: 0;
    color: #fff;
    font-size: 1.06rem;
    font-weight: 650;
}

.doc-section-card__head p {
    margin: .2rem 0 0;
    color: var(--doc-muted);
    font-size: .76rem;
    line-height: 1.45;
}

.doc-article-list {
    margin: 0;
    padding: .35rem;
    list-style: none;
}

.doc-article-list li { margin: 0; }

.doc-article-list a,
.doc-article-list span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .75rem .8rem;
    color: var(--doc-soft);
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.doc-article-list a:hover {
    color: #fff;
    border-color: rgba(118,213,100,.24);
    background: rgba(118,213,100,.055);
}

.doc-article-list small {
    color: #747d78;
    font-size: .66rem;
    white-space: nowrap;
}

.doc-article-list .is-pending {
    color: #7f8883;
}

.doc-no-results {
    margin-top: 1rem;
    padding: 2rem;
    border: 1px solid var(--doc-border-strong);
    background: var(--doc-panel);
    color: var(--doc-muted);
    text-align: center;
}

.doc-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 220px;
    gap: 1.2rem;
    padding: 1.2rem 0 4rem;
    align-items: start;
}

.doc-sidebar,
.doc-on-page {
    position: sticky;
    top: calc(var(--fm-header-h) + 1rem);
    max-height: calc(100vh - var(--fm-header-h) - 2rem);
    overflow: auto;
    border: 1px solid var(--doc-border-strong);
    background: var(--doc-panel);
}

.doc-sidebar__title,
.doc-on-page__title {
    display: block;
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--doc-border);
    color: #fff;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.doc-nav-group { padding: .45rem; }
.doc-nav-group + .doc-nav-group { border-top: 1px solid var(--doc-border); }
.doc-nav-group h2 {
    margin: .45rem .5rem .3rem;
    color: #75807a;
    font-size: .65rem;
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.doc-nav-group a,
.doc-on-page a {
    display: block;
    padding: .52rem .55rem;
    color: var(--doc-muted);
    font-size: .76rem;
    line-height: 1.35;
    text-decoration: none;
}

.doc-nav-group a:hover,
.doc-on-page a:hover { color: #fff; }
.doc-nav-group a.is-active {
    color: #fff;
    background: rgba(118,213,100,.07);
    border-left: 2px solid var(--doc-green);
}

.doc-on-page nav { padding: .45rem; }

.doc-article {
    min-width: 0;
    border: 1px solid var(--doc-border-strong);
    background: var(--doc-panel);
}

.doc-article__header {
    padding: clamp(1.3rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--doc-border);
    background: linear-gradient(180deg, #151c1d, #111718);
}

.doc-article__header h1 {
    margin: .35rem 0 .55rem;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -.025em;
}

.doc-reading-time {
    color: var(--doc-muted);
    font-size: .75rem;
}

.doc-article__body {
    padding: clamp(1.3rem, 3vw, 2.5rem);
}

.doc-article__body h2 {
    margin: 2.2rem 0 .65rem;
    padding-top: .25rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 650;
}

.doc-article__body h2:first-child { margin-top: 0; }
.doc-article__body h3 {
    margin: 1.5rem 0 .5rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 650;
}

.doc-article__body p,
.doc-article__body li {
    color: var(--doc-soft);
    font-size: .94rem;
    line-height: 1.78;
}

.doc-article__body p { margin: 0 0 1rem; }
.doc-article__body ul { margin: .4rem 0 1.2rem; padding-left: 1.25rem; }
.doc-article__body li + li { margin-top: .35rem; }

.doc-table-wrap {
    margin: 1rem 0 1.35rem;
    overflow-x: auto;
    border: 1px solid var(--doc-border-strong);
}

.doc-reference-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    background: #0d1213;
}

.doc-reference-table th,
.doc-reference-table td {
    padding: .82rem .9rem;
    border-bottom: 1px solid var(--doc-border);
    color: var(--doc-soft);
    font-size: .83rem;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
}

.doc-reference-table th {
    background: #151c1d;
    color: #fff;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.doc-reference-table td:last-child {
    color: var(--doc-green);
    font-weight: 600;
}

.doc-reference-table tbody tr:last-child td { border-bottom: 0; }

.doc-question {
    margin: 1.1rem 0;
    padding: .9rem 1rem;
    border-left: 3px solid var(--doc-green);
    background: #0d1313;
}

.doc-question strong {
    display: block;
    margin-bottom: .25rem;
    color: var(--doc-green);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.doc-question p { margin: 0; color: #eef2ef; }

.doc-callout {
    margin: 1.35rem 0;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(118,213,100,.30);
    background: linear-gradient(135deg, rgba(118,213,100,.09), rgba(118,213,100,.025));
}

.doc-callout__label {
    display: block;
    margin-bottom: .35rem;
    color: var(--doc-green);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.doc-callout p:last-child { margin-bottom: 0; }

.doc-article-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    padding: 1rem;
    border-top: 1px solid var(--doc-border);
}

.doc-next-link {
    display: grid;
    gap: .18rem;
    padding: .8rem;
    color: var(--doc-soft);
    border: 1px solid var(--doc-border);
    text-decoration: none;
}

.doc-next-link:last-child { text-align: right; }
.doc-next-link:hover { color: #fff; border-color: rgba(118,213,100,.34); }
.doc-next-link small { color: #747d78; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; }
.doc-next-link strong { font-size: .82rem; font-weight: 650; }

.doc-mobile-nav-button {
    display: none;
    width: 100%;
    margin-bottom: .75rem;
    padding: .75rem .85rem;
    border: 1px solid var(--doc-border-strong);
    background: var(--doc-panel);
    color: #fff;
    font: inherit;
    font-size: .78rem;
    text-align: left;
}

@media (max-width: 1180px) {
    .doc-layout { grid-template-columns: 240px minmax(0, 1fr); }
    .doc-on-page { display: none; }
}

@media (max-width: 820px) {
    .doc-sections { grid-template-columns: 1fr; }
    .doc-home-tools { grid-template-columns: 1fr; }
    .doc-layout { display: block; }
    .doc-mobile-nav-button { display: block; }
    .doc-sidebar {
        display: none;
        position: static;
        max-height: none;
        margin-bottom: .75rem;
    }
    .doc-sidebar.is-open { display: block; }
}

@media (max-width: 575.98px) {
    .doc-shell { width: min(100% - 1rem, 1480px); }
    .doc-hero { padding: 2.2rem 0 1.7rem; }
    .doc-article-footer { grid-template-columns: 1fr; }
    .doc-next-link:last-child { text-align: left; }
}

/* Structured article-series navigation */
.doc-article-footer--book {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.doc-article-footer--book .doc-section-link {
    text-align: center;
}

.doc-article-footer--book .doc-next-link:last-child {
    text-align: right;
}

@media (max-width: 720px) {
    .doc-article-footer--book {
        grid-template-columns: 1fr;
    }

    .doc-article-footer--book .doc-section-link,
    .doc-article-footer--book .doc-next-link:last-child {
        text-align: left;
    }
}

/* Documentation callout variants */
.doc-callout--definition {
    border-color: rgba(130, 180, 220, .34);
    background: linear-gradient(135deg, rgba(130, 180, 220, .10), rgba(130, 180, 220, .025));
}

.doc-callout--definition .doc-callout__label {
    color: #9fc8e8;
}

.doc-callout--mistake {
    border-color: rgba(224, 180, 88, .36);
    background: linear-gradient(135deg, rgba(224, 180, 88, .10), rgba(224, 180, 88, .025));
}

.doc-callout--mistake .doc-callout__label {
    color: #e2bd6a;
}

.doc-callout--tip {
    border-color: rgba(118, 213, 100, .30);
    background: linear-gradient(135deg, rgba(118, 213, 100, .09), rgba(118, 213, 100, .025));
}

.doc-callout--tip .doc-callout__label {
    color: var(--doc-green);
}

.doc-callout--insight {
    border-color: rgba(180, 150, 220, .34);
    background: linear-gradient(135deg, rgba(180, 150, 220, .10), rgba(180, 150, 220, .025));
}

.doc-callout--insight .doc-callout__label {
    color: #c7abe8;
}

/* Shared collapsible documentation navigation */
.doc-nav-section {
    border: 0;
    border-top: 1px solid var(--doc-border);
}

.doc-sidebar__title + .doc-nav-section {
    border-top: 0;
}

.doc-nav-section > summary {
    position: relative;
    display: block;
    padding: .82rem 2.1rem .82rem .9rem;
    color: #8b9690;
    cursor: pointer;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .075em;
    list-style: none;
    text-transform: uppercase;
    transition: color .15s ease, background .15s ease;
}

.doc-nav-section > summary::-webkit-details-marker {
    display: none;
}

.doc-nav-section > summary::after {
    position: absolute;
    top: 50%;
    right: .9rem;
    width: .42rem;
    height: .42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: translateY(-65%) rotate(45deg);
    transition: transform .15s ease;
}

.doc-nav-section[open] > summary::after {
    transform: translateY(-30%) rotate(225deg);
}

.doc-nav-section > summary:hover,
.doc-nav-section[open] > summary {
    color: #fff;
    background: rgba(118,213,100,.035);
}

.doc-nav-section .doc-nav-group {
    padding: 0 .45rem .45rem;
}

.doc-nav-section .doc-nav-group + .doc-nav-group {
    border-top: 0;
}

.doc-sidebar[aria-busy="true"]::after {
    display: block;
    padding: 1rem;
    color: var(--doc-muted);
    content: "Loading navigation…";
    font-size: .76rem;
}

.doc-sidebar__error {
    padding: 1rem;
    color: var(--doc-muted);
    font-size: .76rem;
    line-height: 1.55;
}

.doc-sidebar__error a {
    display: block;
    margin-top: .45rem;
    color: var(--doc-green);
}