pre {
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    margin: 20px 0;
	max-width: 100%; /* Ensure container doesn't overflow on mobile */
    overflow-x: auto;
    padding: 10px;
}

code[class="language-javascript"] {
    color: #eaeaea !important; /* Off-white foreground color */
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 15px;
    line-height: 1.6;
	white-space: pre-wrap; /* wrap on mobile */
	word-break: break-word; /* wrap on mobile */
}

.token.comment {
    color: lightgreen;
    display: inline-block;
    font-style: italic;
    font-weight: 400;
}

.token.keyword {
    color: #c397d8 !important; /* Purple for keywords (var, function, for) */
    font-weight: 600;
}

.token.function {
    color: #7aa6da !important; /* Light blue for your custom function names */
}

.token.string {
    color: #b9ca4a !important; /* Lime green for strings like "note_on" */
}

.token.number {
    color: #e78c45 !important; /* Bright orange for integers (21, 60, 250) */
}

.token.operator,
.token.punctuation {
    color: #70c0b1 !important; /* Aqua/Teal for =, +, <, and brackets */
}
 
/* Ensure the pre block acts as the anchor frame for the button */
pre[class*="language-"] {
    position: relative;
}

/* Style the Copy Button to match Tomorrow Night Bright */
.copy-code-btn {
    background-color: #1a1a1a;   /* Dark charcoal tile */
    border: 1px solid #333333;
    border-radius: 4px;
    color: #eaeaea;              /* Main off-white text color */
    cursor: pointer;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: all 0.2s ease;
    z-index: 10;
}

/* Hover effect using your theme's theme aqua/teal accent */
.copy-code-btn:hover {
    background-color: #000000;
    border-color: #70c0b1;
    color: #70c0b1;              /* Aqua pop from Tomorrow Night Bright */
}

/* Success state when code is successfully copied */
.copy-code-btn.success {
    border-color: #b9ca4a;
    color: #b9ca4a;              /* Green pop from Tomorrow Night Bright */
}