:root {
    --bg-color: #FFF;
    --text-color: #000;

    --var-color: #088;
    --const-color: #C08;
    --key-color: #008;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #222;
        --text-color: #EEE;

        --var-color: #6E6;
        --const-color: #D19;
        --key-color: #77F;
    }
}

.mark {
    fill: var(--var-color)
}

.mark2 {
    fill: var(--const-color)
}

.mark3 {
    fill: var(--key-color)
}

.pen {
    stroke: var(--text-color)
}

.brush {
    fill: var(--bg-color)
}

.label {
    font-size: 12px;
    stroke: none;
    fill: var(--text-color)
}

.x-axis {
    text-anchor: middle
}

.y-axis {
    text-anchor: end
}