.bg-grid-pattern {
    background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px);
    background-size: 24px 24px;
}
@media (prefers-color-scheme: dark) {
    .bg-grid-pattern {
        background-image: radial-gradient(circle, #334155 1px, transparent 1px);
    }
}

.markdown-content a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    padding: 0.125rem 0.5rem; 
    margin: 0 0.25rem;
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace; 
    color: #4f46e5;
    transition: all 0.3s ease;
    text-decoration: none;
}

.markdown-content a::after {
    content: '↗';
    font-size: 0.75rem; 
}

.markdown-content a:hover {
    transform: translateY(-0.125rem);
    box-shadow: 2px 2px 0px 0px rgba(79, 70, 229, 0.3);
}

@media (prefers-color-scheme: dark) {
    .markdown-content a {
        border-color: #334155; 
        background-color: #16181d;
        color: #818cf8;
    }
    .markdown-content a:hover {
        box-shadow: 2px 2px 0px 0px rgba(129, 140, 248, 0.3);
    }
}