:root { --primary: #2563eb; --text: #1f2937; --bg: #ffffff; }
        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; margin: 0; padding: 0; }
        
        /* Centered Reading Layout */
        /* .article-container { max-width: 800px; margin: 4rem auto; padding: 0 2rem; } */
        .article-container { max-width: 1000px; margin: 0 auto; padding: 0 2rem; }
        
        /* Header Styling */
        .article-header { margin-bottom: 3rem; text-align: center; }
        .category-tag { background: #eff6ff; color: var(--primary); padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
        h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin: 1rem 0; color: #111827; }
        .article-meta { color: #6b7280; font-size: 0.95rem; }

        /* Markdown Content Styling */
        .article-content h2 { font-size: 1.75rem; margin-top: 2.5rem; color: #111827; }
        .article-content h3 { font-size: 1.25rem; margin-top: 2rem; color: #374151; }
        .article-content p { font-size: 1.125rem; margin-bottom: 1.5rem; }
        .article-content a { color: var(--primary); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s; }
        .article-content a:hover { border-bottom-color: var(--primary); }

        /* Strict Reading Width for text elements only */
        .article-content p, 
        .article-content li,
        .article-content h1,
        .article-content h2,
        .article-content h3 { 
            max-width: 72ch; /* Slightly widened from 65ch for modern balance */
            margin-left: auto;
            margin-right: auto;
            font-size: 1.125rem;
            line-height: 1.8;
            color: #334155;
        }

        /* POP-OUT ELEMENT: Fenced Code Blocks break out wider than text */
        .article-content pre { 
            max-width: 90ch; /* Significantly wider layout canvas for code strings */
            margin: 2.5rem auto;
            border-radius: var(--radius-md); 
            box-shadow: var(--shadow-md); 
        }

        /* POP-OUT ELEMENT: Data Tables break out wider than text */
        .article-content table {
            max-width: 90ch;
            margin: 2.5rem auto;
            width: 100%;
            border-collapse: collapse;
        }
        
        /* Image Handling */
        .article-content img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin: 2rem 0; }
        
        /* Inline Code */
        /* .article-content code { font-family: 'Courier New', Courier, monospace; background: #f3f4f6; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9em; color: #db2777; } */
        /* Prevent Prism.js from overriding inline code backgrounds */
        /* pre code { background: transparent; color: inherit; padding: 0; }  */