.layout .main .article .code-block {
    position: relative;

    margin: 20px 0;
    padding: 20px;

    overflow-x: auto;

    border: 1px solid var(--code-border);
    border-radius: 5px;

    color: var(--text-secondary);
    background: var(--code-bg);

    font-size: 12px;
    line-height: 1.75;
    tab-size: 4;
    
    box-shadow:
        inset 0 0 30px rgba(0, 255, 136, 0.015);

    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.layout .main .article .code-block::before {
    content: "CODE";

    display: block;

    margin-bottom: 12px;

    color: var(--text-muted);

    font-size: 8px;
    letter-spacing: 0.16em;
}

.layout .main .article .code-block:hover {
    border-color: var(--border-neon);

    background: var(--code-surface);
    color: var(--text-primary);
    
    box-shadow:
        inset 0 0 30px rgba(0, 255, 136, 0.025),
        0 0 8px rgba(0, 255, 136, 0.12),
        0 0 24px rgba(0, 255, 136, 0.06);

    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.layout .main .article .code-block:hover::before {
    color: var(--neon-green-dark);

    text-shadow:
        0 0 6px rgba(0, 255, 136, 0.45),
        0 0 12px rgba(0, 255, 136, 0.2);
}

.layout .main .article .code-block code {
    font-family: "JetBrains Mono", monospace;
}