body {
    font-family: 'Inter', sans-serif;
    background-color: #0B0F14;
    color: #F9FAFB;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}
        
/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0B0F14;
}

::-webkit-scrollbar-thumb {
    background: #1F2937;
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #374151;
    }

/* Diagram styles */
.diagram-arrow {
    position: relative;
}

    .diagram-arrow::after {
        content: '';
        position: absolute;
        right: -4px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 4px solid #4B5563;
    }

.code-syntax-keyword {
    color: #C678DD;
}

.code-syntax-entity {
    color: #E5C07B;
}

.code-syntax-string {
    color: #98C379;
}

.code-syntax-property {
    color: #E06C75;
}

.code-syntax-comment {
    color: #5C6370;
    font-style: italic;
}

/* Subtle grid background */
.bg-grid-pattern {
    background-image: linear-gradient(to right, #1F2937 1px, transparent 1px), linear-gradient(to bottom, #1F2937 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, transparent, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 40%, black 70%, transparent 95%);
    opacity: 0.1;
}