.chroma {
    background-color: #f6f8fa; 
    color: #24292e;            
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;          
    font-size: 0.95rem;
    line-height: 1.5;
    border: 1px solid var(--border-color);
}

.chroma pre {
    margin: 0;
    padding: 0;
}

.chroma .k { color: #d73a49; font-weight: bold; } 
.chroma .kc { color: #d73a49; font-weight: bold; }
.chroma .kd { color: #d73a49; font-weight: bold; } 
.chroma .kn { color: #d73a49; font-weight: bold; } 
.chroma .kp { color: #d73a49; font-weight: bold; } 
.chroma .kr { color: #d73a49; font-weight: bold; }
.chroma .kt { color: #d73a49; font-weight: bold; }
.chroma .n { color: #24292e; } 
.chroma .nc { color: #6f42c1; font-weight: bold; } 
.chroma .no { color: #005cc5; font-weight: bold; } 
.chroma .nf { color: #6f42c1; font-weight: bold; } 
.chroma .nv { color: #24292e; } 
.chroma .l { color: #032f62; } 
.chroma .s { color: #032f62; }
.chroma .s1 { color: #032f62; }
.chroma .s2 { color: #032f62; } 
.chroma .c { color: #6a737d; font-style: italic; }
.chroma .c1 { color: #6a737d; font-style: italic; } 
.chroma .cm { color: #6a737d; font-style: italic; }
.chroma .o { color: #d73a49; font-weight: bold; }
.chroma .ow { color: #d73a49; font-weight: bold; } 

[data-theme="dark"] .chroma {
    background-color: #282a36; 
    color: #f8f8f2;         
    border: 1px solid #44475a;
}

[data-theme="dark"] .chroma .k { color: #ff79c6; }
[data-theme="dark"] .chroma .kc { color: #ff79c6; }
[data-theme="dark"] .chroma .kd { color: #8be9fd; font-style: italic; }
[data-theme="dark"] .chroma .kn { color: #ff79c6; }
[data-theme="dark"] .chroma .kp { color: #ff79c6; }
[data-theme="dark"] .chroma .kr { color: #ff79c6; }
[data-theme="dark"] .chroma .kt { color: #8be9fd; }
[data-theme="dark"] .chroma .n { color: #f8f8f2; }
[data-theme="dark"] .chroma .nc { color: #50fa7b; }
[data-theme="dark"] .chroma .no { color: #bd93f9; }
[data-theme="dark"] .chroma .nf { color: #50fa7b; }
[data-theme="dark"] .chroma .nv { color: #8be9fd; font-style: italic; }
[data-theme="dark"] .chroma .l { color: #bd93f9; }
[data-theme="dark"] .chroma .s { color: #f1fa8c; }
[data-theme="dark"] .chroma .s1 { color: #f1fa8c; }
[data-theme="dark"] .chroma .s2 { color: #f1fa8c; }
[data-theme="dark"] .chroma .c { color: #6272a4; }
[data-theme="dark"] .chroma .c1 { color: #6272a4; }
[data-theme="dark"] .chroma .cm { color: #6272a4; }
[data-theme="dark"] .chroma .o { color: #ff79c6; }
[data-theme="dark"] .chroma .ow { color: #ff79c6; }