chansung/code-explainer-pilot

1html {2    font-family: 'Inter', sans-serif;3    scroll-behavior: smooth;4}5@supports (font-variation-settings: normal) {6    html { font-family: 'Inter var', sans-serif; }7}8body {9    background-color: #f8fafc; /* slate-50 */10    color: #0f172a; /* slate-900 */11    padding: 1rem;12}13 14/* Custom styles for individual code lines */15.code-line {16    padding: 0.25rem 0.75rem; /* Equivalent to Tailwind py-1 px-3 */17    border-left: 4px solid transparent;18    min-height: 1.75em; /* Ensures empty lines have some height */19    white-space: pre; /* Preserve whitespace, crucial for pre-formatted code from Prism */20    display: block; /* Ensure each line takes full width */21    line-height: 1.5;22    transition: background-color 0.3s ease-in-out,23                border-color 0.3s ease-in-out,24                opacity 0.3s ease-in-out,25                transform 0.3s ease-in-out,26                box-shadow 0.3s ease-in-out;27    cursor: pointer; /* Indicate lines are clickable */28}29.code-line:hover {30    background-color: rgba(255, 255, 255, 0.05); /* Subtle hover on code lines */31}32.code-line.highlighted {33    background-color: #334155; /* slate-700, for contrast on bg-gray-900 code area */34    border-left-color: #0ea5e9; /* sky-500 */35    opacity: 1 !important; /* Ensure full opacity */36    transform: scale(1.015); /* Subtle pop effect */37    box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* Shadow for depth */38    position: relative; /* For z-index stacking context */39    z-index: 10; /* Ensure highlighted line is on top */40}41.code-line-dimmed {42    opacity: 0.4; /* Dim non-focused lines */43}44 45/* Custom scrollbar styles */46.custom-scrollbar::-webkit-scrollbar {47    width: 8px;48    height: 8px;49}50.custom-scrollbar::-webkit-scrollbar-track {51    background: #e2e8f0; /* slate-200 */52    border-radius: 10px;53}54.custom-scrollbar::-webkit-scrollbar-thumb {55    background: #94a3b8; /* slate-400 */56    border-radius: 10px;57}58.custom-scrollbar::-webkit-scrollbar-thumb:hover {59    background: #64748b; /* slate-500 */60}61/* Prose adjustments for inline code in explanations */62.prose code::before, .prose code::after {63    content: ""; /* Remove backticks from prose code */64}65/* Ensure code block text within Prism spans respects the theme. */66.code-line .token {67    /* Specific token styles from prism-okaidia.css will apply here */68}69html { font-family: 'Inter', sans-serif; }70@supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; } }71body { background-color: #f8fafc; color: #0f172a; padding: 1rem; }