style.css

html {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}
@supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
}
body {
    background-color: #f8fafc; /* slate-50 */
    color: #0f172a; /* slate-900 */
    padding: 1rem;
}

/* Custom styles for individual code lines */
.code-line {
    padding: 0.25rem 0.75rem; /* Equivalent to Tailwind py-1 px-3 */
    border-left: 4px solid transparent;
    min-height: 1.75em; /* Ensures empty lines have some height */
    white-space: pre; /* Preserve whitespace, crucial for pre-formatted code from Prism */
    display: block; /* Ensure each line takes full width */
    line-height: 1.5;
    transition: background-color 0.3s ease-in-out,
                border-color 0.3s ease-in-out,
                opacity 0.3s ease-in-out,
                transform 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out;
    cursor: pointer; /* Indicate lines are clickable */
}
.code-line:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Subtle hover on code lines */
}
.code-line.highlighted {
    background-color: #334155; /* slate-700, for contrast on bg-gray-900 code area */
    border-left-color: #0ea5e9; /* sky-500 */
    opacity: 1 !important; /* Ensure full opacity */
    transform: scale(1.015); /* Subtle pop effect */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* Shadow for depth */
    position: relative; /* For z-index stacking context */
    z-index: 10; /* Ensure highlighted line is on top */
}
.code-line-dimmed {
    opacity: 0.4; /* Dim non-focused lines */
}

/* Custom scrollbar styles */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #e2e8f0; /* slate-200 */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #94a3b8; /* slate-400 */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}
/* Prose adjustments for inline code in explanations */
.prose code::before, .prose code::after {
    content: ""; /* Remove backticks from prose code */
}
/* Ensure code block text within Prism spans respects the theme. */
.code-line .token {
    /* Specific token styles from prism-okaidia.css will apply here */
}
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; } }
body { background-color: #f8fafc; color: #0f172a; padding: 1rem; }