:root {
    color-scheme: dark;
    --bfc-blue: #00a4e4;
    --bfc-blue-dark: #4ac4f3;
    --bfc-blue-soft: #153a4a;
    --bfc-ink: #e7eef2;
    --bfc-muted: #a4b2b9;
    --bfc-canvas: #10181d;
    --bfc-panel: #172229;
    --bfc-surface: #18242a;
    --bfc-surface-alt: #202d34;
    --bfc-rail-surface: #131d22;
    --bfc-control-surface: #1e2b32;
    --bfc-control-border: #4a5c65;
    --bfc-hover: #233944;
    --bfc-pressed: #1d4b60;
    --bfc-line: #34444c;
    --bfc-green: #41c787;
    scrollbar-gutter: stable;
}

* {
    box-sizing: border-box;
}

body {
    background: var(--bfc-canvas);
    color: var(--bfc-muted);
    text-rendering: optimizeLegibility;
}

::selection {
    color: #fff;
    background: var(--bfc-blue-soft);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bfc-rail-surface);
}

::-webkit-scrollbar-thumb {
    border: 2px solid var(--bfc-rail-surface);
    border-radius: 2px;
    background: var(--bfc-control-border);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bfc-muted);
}

.docs-header {
    border-top: 4px solid var(--bfc-blue);
    border-bottom-color: var(--bfc-line);
    background: rgba(24, 36, 42, .96);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
}

.docs-brand-mark {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--bfc-blue);
    border-radius: 2px;
    color: #fff;
    background: var(--bfc-blue);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

#sidebar-open,
#sidebar-close {
    border-color: var(--bfc-control-border);
    border-radius: 2px;
    color: var(--bfc-muted);
    background: var(--bfc-control-surface);
}

#sidebar-open:hover,
#sidebar-close:hover {
    border-color: var(--bfc-blue);
    color: var(--bfc-ink);
    background: var(--bfc-hover);
}

#docs-search {
    border-color: var(--bfc-control-border);
    border-radius: 2px;
    color: var(--bfc-ink);
    background: var(--bfc-control-surface);
}

#docs-search::placeholder {
    color: #75858d;
}

#docs-search:focus {
    border-color: var(--bfc-blue);
    background: var(--bfc-control-surface);
    box-shadow: 0 0 0 3px rgba(0, 164, 228, .12);
}

#docs-search + kbd {
    border-color: var(--bfc-line);
    border-radius: 2px;
    color: #75858d;
    background: var(--bfc-surface-alt);
}

.docs-sidebar {
    border-color: var(--bfc-line);
    background: var(--bfc-rail-surface);
}

.docs-sidebar .docs-nav-group h2,
.docs-toc h2 {
    color: #75858d;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.docs-nav-link {
    position: relative;
    display: block;
    margin-bottom: 2px;
    padding: .55rem .65rem;
    border: 1px solid transparent;
    border-radius: 2px;
    color: var(--bfc-muted);
    font-size: .8125rem;
    font-weight: 500;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.docs-nav-link:hover {
    border-color: var(--bfc-control-border);
    color: var(--bfc-ink);
    background: var(--bfc-hover);
}

.docs-nav-link.is-active {
    border-color: #387a96;
    color: var(--bfc-blue-dark);
    background: var(--bfc-blue-soft);
}

.docs-nav-link.is-active::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--bfc-blue);
}

#search-empty {
    border-color: var(--bfc-control-border);
    border-radius: 2px;
    color: var(--bfc-muted);
    background: var(--bfc-surface);
}

.docs-main {
    min-height: calc(100vh - 4rem);
    background-image:
        linear-gradient(rgba(0, 164, 228, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 164, 228, .025) 1px, transparent 1px);
    background-size: 48px 48px;
}

.docs-main > div > nav:first-child a {
    color: var(--bfc-muted);
}

.docs-main > div > nav:first-child a:hover {
    color: var(--bfc-blue-dark);
}

.docs-section-badge {
    border-color: #387a96;
    border-radius: 2px;
    color: var(--bfc-blue-dark);
    background: var(--bfc-blue-soft);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.docs-section-badge span {
    background: var(--bfc-blue);
}

.docs-toc {
    border-color: var(--bfc-line);
    background: rgba(19, 29, 34, .55);
}

.docs-toc ol {
    border-color: var(--bfc-line);
}

.toc-link {
    color: var(--bfc-muted);
}

.toc-link:hover,
.toc-link.is-active {
    color: var(--bfc-blue-dark);
}

.toc-link.is-active {
    font-weight: 600;
}

.docs-page-link {
    border-color: var(--bfc-line);
    border-radius: 2px;
    background: var(--bfc-surface);
}

.docs-page-link:hover {
    border-color: var(--bfc-blue);
    background: var(--bfc-hover);
}

.docs-primary-button {
    border: 1px solid var(--bfc-blue);
    border-radius: 2px;
    background: var(--bfc-blue);
}

.docs-primary-button:hover {
    border-color: var(--bfc-blue-dark);
    background: var(--bfc-blue-dark);
}

.docs-prose {
    --tw-prose-body: var(--bfc-muted);
    --tw-prose-headings: var(--bfc-ink);
    --tw-prose-lead: var(--bfc-muted);
    --tw-prose-links: var(--bfc-blue-dark);
    --tw-prose-bold: var(--bfc-ink);
    --tw-prose-counters: #82939c;
    --tw-prose-bullets: var(--bfc-blue);
    --tw-prose-hr: var(--bfc-line);
    --tw-prose-quotes: var(--bfc-ink);
    --tw-prose-quote-borders: var(--bfc-blue);
    --tw-prose-captions: #82939c;
    --tw-prose-code: var(--bfc-blue-dark);
    --tw-prose-pre-code: #d7e2e7;
    --tw-prose-pre-bg: var(--bfc-rail-surface);
    --tw-prose-th-borders: var(--bfc-control-border);
    --tw-prose-td-borders: var(--bfc-line);
    font-size: 1rem;
    line-height: 1.8;
}

.docs-prose :where(h2, h3, h4) {
    color: var(--bfc-ink);
    font-weight: 600;
}

.docs-prose :where(h2) {
    margin-top: 2.5em;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--bfc-line);
}

.docs-prose :where(a) {
    color: var(--bfc-blue-dark);
    text-decoration-color: rgba(74, 196, 243, .42);
    text-underline-offset: .2em;
}

.docs-prose :where(a:hover) {
    color: #8bd9f7;
}

.docs-prose :where(pre) {
    border: 1px solid var(--bfc-line);
    border-top: 3px solid var(--bfc-blue);
    border-radius: 2px;
    background: var(--bfc-rail-surface);
    box-shadow: 0 14px 32px -20px rgba(0, 0, 0, .8);
}

.docs-prose :where(pre code) {
    font-size: .85em;
    line-height: 1.75;
}

.docs-prose :where(:not(pre) > code) {
    border: 1px solid var(--bfc-line);
    border-radius: 2px;
    padding: .15rem .35rem;
    color: var(--bfc-blue-dark);
    background: var(--bfc-surface-alt);
    font-weight: 500;
}

.docs-prose :where(blockquote) {
    border: 1px solid var(--bfc-line);
    border-left: 4px solid var(--bfc-blue);
    border-radius: 2px;
    padding: .8rem 1.15rem;
    color: var(--bfc-muted);
    background: var(--bfc-blue-soft);
    font-style: normal;
}

.docs-prose :where(table) {
    display: table;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--bfc-line);
    border-radius: 2px;
}

.docs-prose :where(thead) {
    background: var(--bfc-surface-alt);
}

.docs-prose :where(th) {
    color: var(--bfc-ink);
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.docs-prose :where(tbody tr:hover) {
    background: rgba(35, 57, 68, .48);
}

.docs-prose :where(img) {
    border-color: var(--bfc-line);
    border-radius: 2px;
    background: var(--bfc-surface);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .2);
}

.docs-prose :where(.task-list-item) {
    list-style: none;
}

.docs-prose :where(.task-list-item input) {
    margin-right: .5rem;
    margin-left: -1.5rem;
    accent-color: var(--bfc-blue);
}

.bfc-docs .bg-white,
.bfc-docs .dark\:bg-ink-950 {
    background-color: var(--bfc-surface) !important;
}

.bfc-docs .bg-slate-50,
.bfc-docs .dark\:bg-slate-900,
.bfc-docs .dark\:bg-slate-800 {
    background-color: var(--bfc-surface-alt) !important;
}

.bfc-docs .text-slate-950,
.bfc-docs .text-slate-900,
.bfc-docs .text-slate-800,
.bfc-docs .dark\:text-white,
.bfc-docs .dark\:text-slate-200,
.bfc-docs .dark\:text-slate-300 {
    color: var(--bfc-ink) !important;
}

.bfc-docs .text-slate-600,
.bfc-docs .text-slate-500,
.bfc-docs .dark\:text-slate-400 {
    color: var(--bfc-muted) !important;
}

.bfc-docs .text-slate-400 {
    color: #82939c !important;
}

.bfc-docs .border-slate-200,
.bfc-docs .border-slate-300,
.bfc-docs .dark\:border-slate-700,
.bfc-docs .dark\:border-slate-800 {
    border-color: var(--bfc-line) !important;
}

.bfc-docs .rounded-lg,
.bfc-docs .rounded-xl,
.bfc-docs .rounded-2xl {
    border-radius: 2px !important;
}

@media (max-width: 1023px) {
    .docs-sidebar {
        background: var(--bfc-rail-surface);
        box-shadow: 18px 0 42px rgba(0, 0, 0, .35);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    * {
        transition-duration: 0s !important;
    }
}