:root {
    --jaff-grid-primary: rgba(75, 85, 99, 0.04);
    --jaff-grid-secondary: rgba(55, 65, 81, 0.05);
    --jaff-grid: rgba(75, 85, 99, 0.1);
}

[data-md-color-scheme="slate"] {
    --jaff-grid-primary: rgba(255, 255, 255, 0.05);
    --jaff-grid-secondary: rgba(255, 255, 255, 0.05);
    --jaff-grid: rgba(255, 255, 255, 0.1);
}

body {
    position: relative;
    width: 100%;
    min-height: 100svh;
}

body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            var(--jaff-grid-primary) 19px,
            var(--jaff-grid-primary) 20px,
            transparent 20px,
            transparent 39px,
            var(--jaff-grid-primary) 39px,
            var(--jaff-grid-primary) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            var(--jaff-grid-primary) 19px,
            var(--jaff-grid-primary) 20px,
            transparent 20px,
            transparent 39px,
            var(--jaff-grid-primary) 39px,
            var(--jaff-grid-primary) 40px
        ),
        radial-gradient(
            circle at 20px 20px,
            var(--jaff-grid-secondary) 2px,
            transparent 2px
        ),
        radial-gradient(
            circle at 40px 40px,
            var(--jaff-grid-secondary) 2px,
            transparent 2px
        );

    background-size:
        40px 40px,
        40px 40px,
        40px 40px,
        40px 40px;
}

.md-main__inner {
    border-left: 1px solid var(--jaff-grid);
    border-right: 1px solid var(--jaff-grid);
    position: relative;
    max-width: 1436px;
    background-color: var(--md-default-bg-color);
}

.md-main__inner::before {
    content: "";
    position: absolute;
    top: 0;
    background-color: var(--jaff-grid);
    height: 1px;
    width: 200vw;
    left: -50vw;
    z-index: 100;
}

.md-content {
    position: relative;
    width: 100%;
    min-height: 100svh;
    border-right: 1px solid var(--jaff-grid);
    border-left: 1px solid var(--jaff-grid);
}

/* Left Masked Circuit Board - Light Pattern */
.md-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            var(--jaff-grid-primary) 19px,
            var(--jaff-grid-primary) 20px,
            transparent 20px,
            transparent 39px,
            var(--jaff-grid-primary) 39px,
            var(--jaff-grid-primary) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            var(--jaff-grid-primary) 19px,
            var(--jaff-grid-primary) 20px,
            transparent 20px,
            transparent 39px,
            var(--jaff-grid-primary) 39px,
            var(--jaff-grid-primary) 40px
        ),
        radial-gradient(
            circle at 20px 20px,
            var(--jaff-grid-secondary) 2px,
            transparent 2px
        ),
        radial-gradient(
            circle at 40px 40px,
            var(--jaff-grid-secondary) 2px,
            transparent 2px
        );

    background-size:
        40px 40px,
        40px 40px,
        40px 40px,
        40px 40px;
}

.md-tabs,
.md-footer,
.md-nav__link--active,
.md-nav__link:hover,
.grid.cards > ul > li,
.admonition,
.tip,
table {
    backdrop-filter: blur(20px);
}

table,
.grid.cards > ul > li {
    border-radius: 0.5rem !important;
}

.jaff-logo {
    border: 1px solid #e88502;
    border-radius: 0.5rem;
}