:root {
    /* ---------- Color ---------- */
    --bg: #000;
    --fg: #d0d0d0;
    --muted: #8a8a8a;
    --accent: #fff;
    --accent-tint: rgba(0, 255, 65, 0.1);
    --code-bg: #111;
    --border: #2a2a2a;
    --overlay: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));

    /* ---------- Breakpoints ---------- */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-2xl: 1400px;
    --bp-3xl: 1920px;

    /* ---------- Spacing scale ---------- */
    --gap-0: 0;
    --gap-1: 0.25rem;
    --gap-2: 0.5rem;
    --gap-3: 0.75rem;
    --gap-4: 1rem;
    --gap-5: 1.5rem;
    --gap-6: 2rem;
    --gap-7: 2.5rem;
    --gap-8: 3rem;
    --gap-9: 3.5rem;
    --gap-10: 4rem;

    /* Tight inline-padding for code chips */
    --pad-code-y: 0.125rem;
    --pad-code-x: var(--gap-1);

    /* ---------- Font scale ---------- */
    --text-xs: 0.78rem;
    --text-sm: 0.85rem;
    --text-md: 0.9rem;
    --text-base: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.4rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.5rem;

    /* Heading sizes */
    --text-h1: var(--text-2xl);
    --text-h2: var(--text-xl);
    --text-h3: var(--text-lg);

    --line: 1.6;
    --line-tight: 1.2;
    --letter-up: 0.06em;

    /* ---------- Borders / radii ---------- */
    --bw: 1px;
    --bw-emph: 2px;
    --bw-quote: 3px;
    --r-sm: 3px;
    --r-md: 4px;
    --r-lg: 6px;
    --r-xl: 8px;

    /* ---------- Layout ---------- */
    --header-h: 56px;
    --container-max: var(--bp-xl);
    --sidebar-w-md: 220px;
    --sidebar-w-lg: 240px;
    --sidebar-w-xl: 280px;
    --main-max-md: 800px;
    --main-max-xl: 880px;
    --main-max-2xl: 920px;
    --main-max-3xl: 1000px;

    /* ---------- Misc ---------- */
    --icon-md: 22px;
    --tap-md: 32px;
    --tap-lg: 40px;
    --z-header: 100;
    --z-skip: 1000;
}

@media (min-width: 768px) {
    :root {
        --text-h1: 2rem;
        --text-h2: 1.5rem;
        --text-h3: 1.2rem;
    }
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--text-base);
    line-height: var(--line);
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

h1, h2, h3, h4, h5, h6 {
    color: var(--accent);
    line-height: var(--line-tight);
    overflow-wrap: break-word;
}

h1 {
    font-size: var(--text-h1);
    margin-top: 0;
}

h2 {
    font-size: var(--text-h2);
    margin-top: var(--gap-6);
    border-bottom: var(--bw) solid var(--border);
    padding-bottom: var(--gap-2);
}

h3 {
    font-size: var(--text-h3);
    margin-top: var(--gap-5);
}

code {
    background: var(--code-bg);
    padding: var(--pad-code-y) var(--pad-code-x);
    border-radius: var(--r-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    overflow-wrap: anywhere;
}

pre {
    background: var(--code-bg);
    padding: var(--gap-4);
    border-radius: var(--r-lg);
    overflow-x: auto;
    max-width: 100%;
}

pre code {
    background: transparent;
    padding: 0;
    overflow-wrap: normal;
    white-space: pre;
}

table {
    border-collapse: collapse;
    margin: var(--gap-4) 0;
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

th, td {
    border: var(--bw) solid var(--border);
    padding: var(--gap-2) var(--gap-3);
}

th {
    background: var(--code-bg);
}

blockquote {
    border-left: var(--bw-quote) solid var(--accent);
    margin: var(--gap-4) 0;
    padding: var(--gap-1) var(--gap-4);
    color: var(--muted);
}

.ta-l {
    text-align: left;
}

.ta-r {
    text-align: right;
}

.ta-c {
    text-align: center;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: var(--gap-4);
    top: var(--gap-4);
    background: var(--bg);
    padding: var(--gap-2) var(--gap-4);
    border: var(--bw-emph) solid var(--accent);
    z-index: var(--z-skip);
}

/* ---------- Sticky header + hamburger nav (CSS-only) ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--bg);
    border-bottom: var(--bw) solid var(--border);
}

.topbar-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gap-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: var(--header-h);
}

.topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2);
    font-weight: 700;
    color: var(--accent);
    margin-right: auto;
    line-height: var(--header-h);
}

.brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.nav-toggle-cb {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nav-toggle {
    display: block;
    cursor: pointer;
    width: var(--tap-md);
    height: var(--tap-md);
    position: relative;
    margin-left: var(--gap-2);
}

.nav-toggle::before,
.nav-toggle::after,
.nav-toggle > span {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    background: var(--fg);
    border-radius: 1px;
    transform-origin: center;
    transition: transform 200ms ease, opacity 150ms ease;
}

.nav-toggle::before {
    top: 9px;
}

.nav-toggle > span {
    top: 15px;
    display: block;
}

.nav-toggle::after {
    top: 21px;
}

.nav-toggle-cb:checked ~ .nav-toggle::before {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle-cb:checked ~ .nav-toggle > span {
    opacity: 0;
}

.nav-toggle-cb:checked ~ .nav-toggle::after {
    transform: translateY(-6px) rotate(-45deg);
}

.main-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background: var(--bg);
    border-top: var(--bw) solid var(--border);
    padding: var(--gap-1) 0;
}

.main-nav a {
    display: block;
    padding: var(--gap-3) var(--gap-2);
    border-bottom: var(--bw) solid var(--border);
}

.main-nav a:last-child {
    border-bottom: 0;
}

.nav-toggle-cb:checked ~ .main-nav {
    display: flex;
}

@media (min-width: 768px) {
    .topbar-inner {
        padding: 0 var(--gap-5);
        flex-wrap: nowrap;
    }

    .nav-toggle {
        display: none;
    }

    .main-nav {
        display: flex;
        flex-direction: row;
        width: auto;
        border-top: 0;
        padding: 0;
    }

    .main-nav a {
        margin-left: var(--gap-5);
        padding: 0;
        border-bottom: 0;
    }
}

/* ---------- Products dropdown ---------- */

.nav-dropdown > summary {
    display: block;
    list-style: none;
    cursor: pointer;
    color: var(--accent);
    padding: var(--gap-3) var(--gap-2);
    border-bottom: var(--bw) solid var(--border);
    user-select: none;
}

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

.nav-dropdown > summary::after {
    content: "\25BC";
    font-size: 0.6em;
    margin-left: var(--gap-1);
    vertical-align: middle;
}

.nav-dropdown[open] > summary::after {
    content: "\25B2";
}

.nav-dropdown-menu {
    display: flex;
    flex-direction: column;
}

.nav-dropdown-menu a {
    padding-left: var(--gap-6);
}

@media (min-width: 768px) {
    .nav-dropdown {
        position: relative;
        margin-left: var(--gap-5);
    }

    .nav-dropdown > summary {
        padding: 0;
        border-bottom: 0;
    }

    .nav-dropdown-menu {
        position: absolute;
        top: calc(100% + var(--gap-3));
        right: 0;
        min-width: 180px;
        background: var(--bg);
        border: var(--bw) solid var(--border);
        border-radius: var(--r-md);
        padding: var(--gap-2) 0;
    }

    .nav-dropdown-menu a {
        margin-left: 0;
        padding: var(--gap-2) var(--gap-4);
        border-bottom: 0;
    }

    .nav-dropdown-menu a:hover {
        background: var(--accent-tint);
        text-decoration: none;
    }
}

/* ---------- Hero banner ---------- */

.hero {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
}

.hero-banner {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center 60%;
}

.hero-title {
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 90%;
    color: var(--accent);
    font-size: clamp(1.75rem, 5vw, 3.5rem);
    line-height: var(--line-tight);
    text-align: center;
    text-shadow: 0 2px 21px rgba(0, 0, 0, 0.6);
}

@media (min-width: 768px) {
    .hero-banner {
        height: 320px;
    }
}

@media (min-width: 1200px) {
    .hero-banner {
        height: 400px;
    }
}

/* ---------- Page main ---------- */

main {
    display: block;
    padding: var(--gap-5) var(--gap-4);
    max-width: var(--container-max);
    margin: 0 auto;
}

main.has-hero {
    padding-top: 0;
}

main.has-hero > .hero {
    margin: 0 calc(-1 * var(--gap-4));
    width: calc(100% + 2 * var(--gap-4));
}

@media (min-width: 992px) {
    main.has-hero > .hero {
        margin: 0 auto;
        width: 100%;
    }
}

/* ---------- Solutions grid ---------- */

.solutions {
    margin-top: var(--gap-7);
}

.solutions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-4);
    margin-top: var(--gap-5);
}

@media (min-width: 576px) {
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .solutions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.solution-card {
    display: flex;
    flex-direction: column;
    padding: var(--gap-4);
    border: var(--bw) solid var(--border);
}

.solution-card h3 {
    margin: 0 0 var(--gap-3);
}

.solution-card p {
    flex: 1;
    margin: 0 0 var(--gap-4);
    color: var(--fg);
}

.solution-learn-more {
    align-self: flex-start;
    margin-top: auto;
}

@media (min-width: 768px) {
    main {
        padding: var(--gap-6) var(--gap-5);
    }
}

/* ---------- Docs layout ---------- */

.layout {
    max-width: var(--container-max);
    margin: 0 auto;
}

.sidebar-toggle-cb {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sidebar-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    margin: var(--gap-3) var(--gap-4);
    padding: var(--gap-2) var(--gap-3);
    border: var(--bw) solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--fg);
    font-size: var(--text-md);
    user-select: none;
}

.sidebar-toggle-icon {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.65em;
    line-height: 1;
    transition: transform 200ms ease;
}

.sidebar-toggle-icon::before {
    content: "\25BC";
}

.sidebar-toggle-cb:checked ~ .sidebar-toggle-btn .sidebar-toggle-icon {
    transform: rotate(180deg);
}

.sidebar {
    display: none;
    border-right: var(--bw) solid var(--border);
    padding: var(--gap-4);
    overflow-y: auto;
}

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

.sidebar li {
    margin: var(--gap-1) 0;
}

.sidebar > ul > li > strong {
    display: block;
    margin: var(--gap-3) 0 var(--gap-1);
    color: var(--muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-up);
}

.sidebar ul ul {
    padding-left: 0;
}

.sidebar .active {
    font-weight: 700;
    color: var(--fg);
}

.sidebar-toggle-cb:checked ~ .sidebar {
    display: block;
}

.layout > main {
    min-width: 0;
}

@media (min-width: 768px) {
    .layout {
        display: grid;
        grid-template-columns: var(--sidebar-w-md) minmax(0, 1fr);
        gap: 0;
    }

    .sidebar-toggle-btn {
        display: none;
    }

    .sidebar {
        display: block;
        position: sticky;
        top: var(--header-h);
        height: calc(100vh - var(--header-h));
        align-self: start;
    }

    .layout > main {
        padding: var(--gap-6) var(--gap-5);
        max-width: 100%;
        margin: 0;
    }
}

@media (min-width: 992px) {
    .layout {
        grid-template-columns: var(--sidebar-w-lg) minmax(0, 1fr);
    }

    .layout > main {
        padding: var(--gap-6) var(--gap-7);
    }
}

@media (min-width: 1200px) {
    .layout {
        grid-template-columns: var(--sidebar-w-xl) minmax(0, 1fr);
    }

    .layout > main {
        padding: var(--gap-6) var(--gap-8);
    }
}

@media (min-width: 1400px) {
    .layout > main {
        padding: var(--gap-7) var(--gap-9);
    }
}

/* ---------- Doc page bits ---------- */

.prevnext {
    display: flex;
    justify-content: space-between;
    margin-top: var(--gap-8);
    padding-top: var(--gap-4);
    border-top: var(--bw) solid var(--border);
    gap: var(--gap-4);
    flex-wrap: wrap;
}

.releases-list {
    list-style: none;
    padding: 0;
}

.releases-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-4);
    padding: var(--gap-3);
    border: var(--bw) solid var(--border);
    margin-bottom: var(--gap-2);
    border-radius: var(--r-md);
}

.releases-list li.latest {
    border-color: var(--accent);
    background: var(--accent-tint);
}

.release-date {
    color: var(--muted);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.release-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-3);
}

.release-meta-sep {
    color: var(--muted);
}

.release-targets {
    display: grid;
    gap: var(--gap-4);
    margin: var(--gap-5) 0;
}

.release-target {
    padding: var(--gap-4);
    border: var(--bw) solid var(--border);
    border-radius: var(--r-md);
}

.release-target-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-4);
    margin-bottom: var(--gap-2);
}

.release-target-head h2,
.release-target-head h3 {
    margin: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.variant-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: var(--bw) solid var(--border);
    margin: var(--gap-5) 0 var(--gap-4);
    gap: var(--gap-2);
}

.variant-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.variant-tab {
    order: 1;
    padding: var(--gap-2) var(--gap-4);
    border: var(--bw) solid transparent;
    border-bottom: 0;
    border-top-left-radius: var(--r-md);
    border-top-right-radius: var(--r-md);
    margin-bottom: calc(-1 * var(--bw));
    color: var(--muted);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.variant-tab:hover {
    color: var(--fg);
}

.variant-panel {
    order: 2;
    flex: 0 0 100%;
    display: none;
    margin-top: var(--gap-4);
}

.variant-radio:checked + .variant-tab {
    color: var(--accent);
    border-color: var(--border);
    background: var(--bg);
}

.variant-radio:focus-visible + .variant-tab {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.variant-radio:checked + .variant-tab + .variant-panel {
    display: grid;
    gap: var(--gap-4);
}

.release-target-download {
    display: inline-block;
    padding: var(--gap-2) var(--gap-4);
    border: var(--bw) solid var(--accent);
    border-radius: var(--r-md);
    color: var(--accent);
    background-color: var(--accent-tint);
    font-weight: 600;
    font-size: var(--text-md);
    white-space: nowrap;
    flex-shrink: 0;
}

.release-target-download:hover {
    background: var(--accent);
    color: var(--bg);
    text-decoration: none;
}

.release-target p {
    margin: var(--gap-2) 0;
}

.release-target-triple code,
.release-target-sha code {
    overflow-wrap: anywhere;
}

.release-target-sha {
    color: var(--muted);
    font-size: var(--text-sm);
}

/* ---------- Error pages (404, 405) ---------- */

.error-page {
    text-align: center;
    padding-top: var(--gap-10);
    padding-bottom: var(--gap-10);
}

.error-page h1 {
    font-size: clamp(4rem, 14vw, 8rem);
    margin-bottom: var(--gap-4);
}

.error-page p {
    font-size: var(--text-lg);
    color: var(--muted);
}

@media (min-width: 768px) {
    .error-page {
        padding-top: calc(var(--gap-10) * 1.5);
        padding-bottom: calc(var(--gap-10) * 1.5);
    }
}

/* ---------- Footer ---------- */

footer {
    border-top: var(--bw) solid var(--border);
    color: var(--muted);
    font-size: var(--text-md);
    text-align: center;
}

.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--gap-5) var(--gap-4);
}

footer .social {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--gap-3);
    display: flex;
    justify-content: center;
    gap: var(--gap-5);
}

footer .social a {
    color: var(--muted);
    display: inline-flex;
    align-items: center;
}

footer .social a:hover {
    color: var(--accent);
}

footer .social svg {
    width: var(--icon-md);
    height: var(--icon-md);
    display: block;
}

footer .copyright {
    margin: 0 0 var(--gap-1);
}

footer .build {
    margin: 0;
    font-size: var(--text-xs);
    opacity: 0.7;
}


/* syntect */
/*
 * theme "Base16 Eighties Dark" generated by syntect
 */

.syn-code {
 color: #d3d0c8;
 background-color: #2d2d2d;
}

.syn-variable.syn-parameter.syn-function {
 color: #d3d0c8;
}
.syn-comment, .syn-punctuation.syn-definition.syn-comment {
 color: #747369;
}
.syn-punctuation.syn-definition.syn-string, .syn-punctuation.syn-definition.syn-variable, .syn-punctuation.syn-definition.syn-string, .syn-punctuation.syn-definition.syn-parameters, .syn-punctuation.syn-definition.syn-string, .syn-punctuation.syn-definition.syn-array {
 color: #d3d0c8;
}
.syn-none {
 color: #d3d0c8;
}
.syn-keyword.syn-operator {
 color: #d3d0c8;
}
.syn-keyword {
 color: #cc99cc;
}
.syn-variable, .syn-variable.syn-other.syn-dollar.syn-only.syn-js {
 color: #f2777a;
}
.syn-entity.syn-name.syn-function, .syn-meta.syn-require, .syn-support.syn-function.syn-any-method, .syn-variable.syn-function {
 color: #6699cc;
}
.syn-support.syn-class, .syn-entity.syn-name.syn-class, .syn-entity.syn-name.syn-type.syn-class {
 color: #ffcc66;
}
.syn-meta.syn-class {
 color: #f2f0ec;
}
.syn-keyword.syn-other.syn-special-method {
 color: #6699cc;
}
.syn-storage {
 color: #cc99cc;
}
.syn-support.syn-function {
 color: #66cccc;
}
.syn-string, .syn-constant.syn-other.syn-symbol, .syn-entity.syn-other.syn-inherited-class {
 color: #99cc99;
}
.syn-constant.syn-numeric {
 color: #f99157;
}
.syn-none {
 color: #f99157;
}
.syn-none {
 color: #f99157;
}
.syn-constant {
 color: #f99157;
}
.syn-entity.syn-name.syn-tag {
 color: #f2777a;
}
.syn-entity.syn-other.syn-attribute-name {
 color: #f99157;
}
.syn-entity.syn-other.syn-attribute-name.syn-id, .syn-punctuation.syn-definition.syn-entity {
 color: #6699cc;
}
.syn-meta.syn-selector {
 color: #cc99cc;
}
.syn-none {
 color: #f99157;
}
.syn-markup.syn-heading .syn-punctuation.syn-definition.syn-heading, .syn-entity.syn-name.syn-section {
 color: #6699cc;
}
.syn-keyword.syn-other.syn-unit {
 color: #f99157;
}
.syn-markup.syn-bold, .syn-punctuation.syn-definition.syn-bold {
 color: #ffcc66;
font-weight: bold;
}
.syn-markup.syn-italic, .syn-punctuation.syn-definition.syn-italic {
 color: #cc99cc;
font-style: italic;
}
.syn-markup.syn-raw.syn-inline {
 color: #99cc99;
}
.syn-string.syn-other.syn-link {
 color: #f2777a;
}
.syn-meta.syn-link {
 color: #f99157;
}
.syn-meta.syn-image {
 color: #f99157;
}
.syn-markup.syn-list {
 color: #f2777a;
}
.syn-markup.syn-quote {
 color: #f99157;
}
.syn-meta.syn-separator {
 color: #d3d0c8;
 background-color: #515151;
}
.syn-markup.syn-inserted, .syn-markup.syn-inserted.syn-git_gutter {
 color: #99cc99;
}
.syn-markup.syn-deleted, .syn-markup.syn-deleted.syn-git_gutter {
 color: #f2777a;
}
.syn-markup.syn-changed, .syn-markup.syn-changed.syn-git_gutter {
 color: #cc99cc;
}
.syn-markup.syn-ignored, .syn-markup.syn-ignored.syn-git_gutter {
 color: #515151;
}
.syn-markup.syn-untracked, .syn-markup.syn-untracked.syn-git_gutter {
 color: #515151;
}
.syn-constant.syn-other.syn-color {
 color: #66cccc;
}
.syn-string.syn-regexp {
 color: #66cccc;
}
.syn-constant.syn-character.syn-escape {
 color: #66cccc;
}
.syn-punctuation.syn-section.syn-embedded, .syn-variable.syn-interpolation {
 color: #d27b53;
}
.syn-invalid.syn-illegal {
 color: #2d2d2d;
 background-color: #f2777a;
}
.syn-markup.syn-deleted.syn-git_gutter {
 color: #f92672;
}
.syn-markup.syn-inserted.syn-git_gutter {
 color: #a6e22e;
}
.syn-markup.syn-changed.syn-git_gutter {
 color: #967efb;
}
.syn-markup.syn-ignored.syn-git_gutter {
 color: #565656;
}
.syn-markup.syn-untracked.syn-git_gutter {
 color: #565656;
}