.syntax {
    background: var(--mb-gray-lighter);
    border: solid 1px var(--mb-gray);
    border-radius: 5px;
    color: var(--mb-charcoal-dark);
    font-size: 16px;
    line-height: 20px;
    margin: 16px 0;
    overflow: auto;
    overflow-y: hidden;
    padding: 16px;
    white-space: pre-wrap;
}

.syntax > code {
    font-family: monospace;
}

.syntax-bytecode {
    color: var(--mb-blue);
}

.syntax-comment {
    color: var(--mb-gray-dark);
}

.syntax-control {
    color: var(--mb-blue);
}

.syntax-function {
    color: var(--mb-charcoal-dark);
}

.syntax-interpolation {
    color: var(--mb-charcoal-dark);
}

.syntax-keyword {
    color: var(--mb-blue);
}

.syntax-named {
    color: var(--mb-charcoal-dark);
}

.syntax-number {
    color: var(--mb-gold-dark);
}

.syntax-operator {
    color: var(--mb-charcoal-light);
}

.syntax-separator {
    color: var(--mb-charcoal-dark);
}

.syntax-string {
    color: var(--mb-green);
}

.syntax-type {
    color: var(--mb-crimson);
}