/*
 * SPDX-FileCopyrightText: 2025 Mind-Manufacture
 *
 * SPDX-License-Identifier: MPL-2.0
 */

:root {
    --md-content-max-width: 90%;

    --md-primary-fg-color: #0b0f14;
    --md-primary-fg-color--light: #111823;
    --md-primary-fg-color--dark: #06090d;

    --md-accent-fg-color: #36f6d0;
    --md-accent-fg-color--light: #79ffe6;
    --md-accent-fg-color--dark: #1ba690;

    --md-code-bg-color: #0f1622;
    --md-code-fg-color: #d7fdf6;

    --md-typeset-a-color: var(--md-accent-fg-color);
}

.md-header,
.md-footer,
.md-tabs {
    background: rgba(7, 10, 15, 0.82) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.md-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.md-container {
    background: linear-gradient(var(--km-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--km-grid-line) 1px, transparent 1px),
        radial-gradient(
            1200px 800px at 60% 10%,
            rgba(54, 246, 208, 0.08),
            transparent 60%
        ),
        radial-gradient(
            900px 600px at 20% 40%,
            rgba(90, 120, 255, 0.05),
            transparent 55%
        ),
        var(--km-bg);
    background-size: 48px 48px, 48px 48px, auto, auto, auto;
}

.md-main__inner {
    max-width: 90% !important;
    margin: 0 auto !important;
}
.md-content {
    padding-left: 1rem;
    padding-right: 1rem;
}

.md-content__inner > h1,
.md-content__inner > h2 {
    text-shadow: 0 0 18px var(--km-glow);
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    text-shadow: 0 0 14px var(--km-glow);
}

.md-typeset pre {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(54, 246, 208, 0.06) inset;
    border-radius: 10px;
}

.md-typeset .admonition,
.md-typeset details {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.24);
    border-radius: 12px;
}

.md-typeset table:not([class]) {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    overflow: hidden;
}
.md-typeset table:not([class]) th {
    background: rgba(255, 255, 255, 0.06);
}

.banner-strip {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5vw;
    overflow-x: auto;
    padding: 1vw;
    margin-bottom: 2rem;
}

.banner-img {
    height: 25vw;
    max-height: 450px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 0 12px #393939;
    flex-shrink: 0;
}