/* --- Live Editor Section --- */
        .live-editor-section {
            margin-bottom: 5rem;
            padding: 4rem 2vw;
            background-color: rgb(244, 246, 252); 
            text-align: center;
        }
        .live-editor-section .section-headline {
            font-size: 2.5rem;
            color: #1a1a1a;
            margin-bottom: 1rem;
        }
        .live-editor-section .section-tagline {
            font-size: 1.1rem;
            color: #555;
            max-width: 700px;
            margin: 0 auto 3rem auto;
        }
        
        /* === EDITOR CONTAINER === */
        .live-editor-container {
            max-width: 700px;
            margin: 0 auto;
            text-align: left;
            background-color: #ffffff;
            border-radius: 12px;
            /* FIX 1: Set to visible to allow the blurred shadow to show */
            overflow: visible; 
            position: relative; 
            isolation: isolate;
        }
        
        /* === NEW WRAPPER FOR CLIPPING === */
        .live-tab-wrapper-main {
            /* This element is now responsible for clipping the 200% wide content */
            overflow: hidden; 
            border-radius: 0 0 12px 12px; /* Optional: Gives the bottom corners a radius */
        }
        /* === END NEW WRAPPER === */


        /* === TAB SWITCHER STYLES (Underlined Look) === */
        
        .live-editor-container > input[type="radio"] {
            display: none;
        }

        .tab-switcher {
            display: flex;
            position: relative;
            background-color: #161616; 
            padding: 10px; 
            border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
            border-radius: 12px 12px 0 0; 
            z-index: 10;
        }

        .tab-switcher label {
            flex: 1;
            text-align: center;
            padding: 12px 15px; 
            cursor: pointer;
            color: #ccc; 
            font-weight: 600;
            font-size: 0.95rem;
            border-radius: 8px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            margin: 0 4px; 
            user-select: none; 
            position: relative;
            z-index: 12;
            /* Inactive Style */
            border: 2px solid rgba(255, 255, 255, 0.15); 
            background: transparent;
        }
        
        .tab-switcher label:hover {
            color: #fff;
            border-color: var(--primary-color); 
            background-color: rgba(255, 255, 255, 0.08); 
        }

        /* Active Tab Label Style (Underlined Effect) */
        #tabPreview:checked ~ .tab-switcher label[for="tabPreview"],
        #tabControl:checked ~ .tab-switcher label[for="tabControl"] {
            color: var(--primary-color); /* Highlight text color */
            border-color: transparent; 
            background-color: transparent; 
            box-shadow: none; 
        }

        /* Create the Underline using ::after pseudo-element */
        .tab-switcher label::after {
            content: '';
            position: absolute;
            bottom: -11px; /* Position below the padding and slightly into the border area */
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
            opacity: 0; /* Hidden by default */
            transform: scaleX(0); /* Start scaled down */
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
            border-radius: 2px;
            z-index: 13;
        }

        /* Active State: Show the Underline */
        #tabPreview:checked ~ .tab-switcher label[for="tabPreview"]::after,
        #tabControl:checked ~ .tab-switcher label[for="tabControl"]::after {
            opacity: 1;
            transform: scaleX(1);
        }
        
        /* === CONTENT STYLES === */
        .live-tab-content {
            display: flex;
            width: 200%; 
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
            min-height: 400px;
            /* overflow is now handled by .live-tab-wrapper-main */
        }

        .preview-panel, .code-panel {
            width: 50%; 
            padding: 0;
            box-sizing: border-box;
            position: relative; 
        }

        /* Sliding the entire content container (path updated for new wrapper) */
        #tabControl:checked ~ .live-tab-wrapper-main .live-tab-content {
            transform: translateX(-50%);
        }
        
        /* --- CODE PANEL STYLES --- */
        .code-editor-wrapper {
            display: flex;
            flex-direction: column;
            background-color: #1a1a1a; 
            height: 100%; 
            border-radius: 0;
        }
        .code-editor-wrapper .code-header {
            padding: 0.75rem 1rem;
            background-color: #1a1a1a;
            color: #f1f1f1;
            border-radius: 0;
        }
        .code-editor-wrapper pre {
            margin: 0;
            background-color: #1a1a1a;
            padding: 1rem;
            flex-grow: 1;
            overflow: auto;
            min-height: 350px;
        }
        .code-editor-wrapper #liveCodeEditor {
            outline: none;
            color: #d4d4d4; 
            font-family: 'Courier New', Courier, monospace; 
            font-size: 0.9rem;
            white-space: pre-wrap;
            min-height: 350px;
            line-height: 1.5;
        }

        /* --- PREVIEW PANEL STYLES --- */
        .live-preview-wrapper {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem;
            background-color: #fff; /* White header for preview */
            color: #1a1a1a;
            border-bottom: 1px solid #eee;
        }
        .live-preview-area {
            flex-grow: 1;
            padding: 0; 
            border: 1px solid #e0e0e0;
            border-top: none;
            background-color: #fdfdfd;
            overflow-y: auto; 
            overflow-x: hidden; 
            display: flex;
            justify-content: center; 
            align-items: flex-start; 
            min-height: 350px; 
        }
        .iframe-scale-wrapper {
            width: 100%; 
            height: auto; 
            overflow: visible; 
            position: relative;
            max-width: 450px; 
        }
        .iframe-scale-wrapper iframe {
            width: 100%; 
            transform-origin: top center; 
            transition: height 0.3s ease-out; 
        }

        /* --- Generic Component Styles --- */
        .live-editor-section h2 { 
            border-bottom: none; 
            padding-bottom: 10px; 
        }

        .run-btn {
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .run-btn:hover { 
            opacity: 0.9;
            transform: translateY(-1px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.2);
        }
        
        /* === ANIMATED GRADIENT SHADOW STYLES === */
        .live-editor-container::after {
            content: '';
            position: absolute;
            z-index: -1;
            /* Added padding to blur outside the container */
            width: calc(100% + 10px); 
            height: calc(100% + 10px);
            top: -5px; /* Adjust top/left to center the enlarged gradient */
            left: -5px; 
            background: linear-gradient(45deg, yellow, orange, red, violet, blue, green);
            background-size: 300% 300%;
            filter: blur(40px);
            opacity: 0.6;
            animation: moveGradient 10s ease infinite;
            border-radius: 17px; /* Matches container + padding */
        }

        @keyframes moveGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }