:root {
    --light-yellow: #e5c07b;
    --dark-yellow: #d19a66;
    --blue: #61afef;
    --cyan: #56b6c2;
    --light-red: #e06c75;
    --dark-red: #be5046;
    --comment-gray: #7f848e;
    --magenta: #c678dd;
}

pre {
    background-color: #1e222a;
    color: #abb2bf;
    padding: 16px 20px;
    border-radius: 8px;
    overflow-x: auto;
    font-family:
        "JetBrains Mono", "Fira Code", "SF Mono", Monaco, Consolas, monospace;
    font-size: 0.9em;
    line-height: 1.6;
    border: 1px solid #282c34;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

pre::-webkit-scrollbar {
    height: 6px;
}

pre::-webkit-scrollbar-track {
    background: #1e222a;
    border-radius: 0 0 8px 8px;
}

pre::-webkit-scrollbar-thumb {
    background: #3e4452;
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
    background: #4b5263;
}

pre code .keyword,
pre code .type,
pre code .tag {
    color: var(--light-yellow);
    font-weight: 500;
}

pre code .string {
    color: var(--dark-yellow);
}

pre code .numeric,
pre code .number,
pre code .constant {
    color: var(--magenta);
}

pre code .function,
pre code .fn,
pre code .method {
    color: var(--blue);
}

pre code .builtin,
pre code .class,
pre code .attr-name {
    color: var(--cyan);
}

pre code .comment {
    color: var(--comment-gray);
    font-style: italic;
}

pre code .operator,
pre code .punctuation {
    color: #abb2bf;
}