pre:has(> code) {
    background: var(--color-gray-lighter);
    border: solid 1px var(--color-gray);
    border-radius: 5px;
    color: var(--color-charcoal-dark);
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 20px;
    margin: 16px 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 16px;
    white-space: pre;
}

:not(pre) > code {
    background: var(--color-gray-lighter);
    border: solid 1px var(--color-gray);
    border-radius: 4px;
    color: var(--color-charcoal-darker);
    font-family: var(--font-mono);
    font-size: 0.95em;
    font-weight: normal;
    padding: 1px 4px;
}

a code {
    color: inherit;
}

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

.token.comment {
    color: var(--color-fuchsia-dark);
}

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

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

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

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

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

.token.number {
    color: var(--color-gold-darker);
}

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

.token.primitive {
    color: var(--color-crimson);
}

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

.token.string {
    color: var(--color-green-dark);
}