:root {
            --primary: #2c3e50;
            /* --secondary: #3498db; */
            --secondary: #107c10;
            --accent: #e74c3c;
            /* --light: #ecf0f1; */
            --light: #4caf501a;
            --dark: #2c3e50;
            /* --success: #2ecc71; */
            --success: #107c10;
            --warning: #f39c12;
            --danger: #e74c3c;
            /* --tab-inactive: #f8f9fa; */
            --tab-inactive: #f2f9f3;
            --tab-border: #dee2e6;
        }
        
        .gpt-tool * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Jost', sans-serif !important;
        }

        .gpt-tool {
            /*background-color: #fafafa;*/
            background-color: white;
            color: #333;
            line-height: 1.6;
        }
        
        .ast-plain-container, .ast-page-builder-template {
            /*background-color: #fafafa;*/
            background-color: white;
        }
        
        .ast-container, .ast-container-fluid {
            padding-left: 10px;
            padding-right: 10px;
        }

        .gpt-tool header {
            /* background: linear-gradient(135deg, var(--primary), var(--secondary)); */
            color: #107c10;
            padding: 1.5rem 1rem 0.2rem 1rem;
            text-align: center;
            /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
        }

        .gpt-tool header h1 {
            font-size: 2.2rem;
            color: #107c10;
            margin-bottom: 0.5rem;
            font-weight: 800;
        }

        .subtitle {
            font-size: 1.2rem;
            color: #666;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
        }

        .gpt-tool .container {
            /*max-width: 1200px;*/
            margin: 1.5rem auto;
            padding: 0 0.5rem;
        }

        .real-time-detection {
            background: white;
            padding: 0.8rem 1.5rem;
            border-radius: 8px;
            border: 1px solid #107c105c;
            /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);*/
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .detection-left {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.95rem;
            font-weight: bold;
        }

        .detection-right {
            display: flex;
            align-items: center;
            gap: 8px;
            /* font-size: 0.9rem; */
        }

        .detection-right span {
            font-size: 0.9rem;
        }

        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--danger);
        }

        .status-indicator.connected {
            background-color: var(--success);
        }

        .gamepad-tabs {
            display: flex;
            background-color: white;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            margin-bottom: 1.5rem;
        }

        .gamepad-tab {
            flex: 1;
            padding: 0.6rem;
            /* padding: 1rem; */
            text-align: center;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            background-color: var(--tab-inactive);
            border-right: 1px solid var(--tab-border);
            border-color: #e5e7eb;
        }

        .gamepad-tab:last-child {
            border-right: none;
        }

        .gamepad-tab.active {
            color: #107c10;
            background-color: white;
            border-bottom: 3px solid var(--secondary);
            font-weight: bold;
        }

        .gamepad-tab p {
            margin-bottom: 0.35rem;
             font-size: 1rem;
             font-weight: bold;
             /*color: #107c10;*/
        }

        .gamepad-tab span {
            font-size: 0.6rem;
            letter-spacing: 0.04rem;
        }

        .gamepad-status {
            padding: 0.1rem 0.5rem;
            /*padding: 0.18rem 0.6rem;*/
            border-radius: 4px;
            display: inline-block;
        }

        .status-connected {
            background-color: var(--success);
            color: white;
        }

        .status-disconnected {
            background-color: #f8d7da;
            color: #721c24;
        }

        .gamepad-content {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);*/
            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
            min-height: 500px;
        }

        .controller-visualization {
            position: relative;
            width: 100%;
            max-width: 500px;
            height: 250px;
            margin: 0 auto 2rem;
            display: none;
        }

        .controller-svg {
            /* width: 100%; */
            height: 100%;
        }

        .button {
            fill: #ddd;
            stroke: #aaa;
            stroke-width: 1;
            transition: all 0.1s ease;
        }

        /* Enhanced button active states */
        #LeftStick.active,
        #RightStick.active {
            /* stroke: #e74c3c !important; */
            stroke: var(--secondary);
            fill: var(--secondary);
            /* fill: #e74c3c !important; */
        }

        #L1.active,
        #R1.active,
        #L2.active,
        #R2.active {
            stroke: var(--warning) !important;
            fill: var(--warning) !important;
            filter: brightness(1.3);
        }

        #DUp.active path:nth-child(2),
        #DRight.active path:nth-child(2),
        #DDown.active path:nth-child(2),
        #DLeft.active path:nth-child(2) {
            stroke: var(--accent) !important;
        }

        #BTop.active path:nth-child(2),
        #BRight.active path:nth-child(2),
        #BBottom.active path:nth-child(2),
        #BLeft.active path:nth-child(2) {
            stroke: #e74c3c !important;
        }

        #LMeta.active,
        #RMeta.active {
            stroke: var(--warning) !important;
            fill: var(--warning) !important;
        }

        .button.active {
            fill: var(--accent);
        }

        .analog-stick {
            fill: #bbb;
            transition: all 0.1s ease;
        }

        .analog-stick.active {
            fill: var(--secondary);
        }

        .trigger {
            fill: #ccc;
            transition: all 0.1s ease;
        }

        .trigger.active {
            fill: var(--warning);
        }

        .input-display {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: 2rem;
        }

        .input-item {
            background: var(--light);
            padding: 0.8rem;
            border-radius: 5px;
            text-align: center;
        }

        .input-label {
            font-weight: bold;
            margin-bottom: 0.25rem;
            font-size: 0.9rem;
        }

        .input-value {
            font-size: 0.9rem;
        }

        .no-gamepads {
            text-align: center;
            padding: 2rem;
            cursor: pointer;
            /* color: #6c757d; */
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 10px;
            margin: 0.5rem 0;
            border: 2px dashed var(--secondary);
        }

        .no-gamepads h2 {
            font-size: 1.3rem;
            font-weight: 600;
        }

        .connection-graphic {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            animation: pulse 3s infinite;
            color: var(--secondary);
            display: inline-block;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.3);
            }

            100% {
                transform: scale(1);
            }
        }

        .browser-support {
            margin: 1rem 0;
            padding: 0.5rem;
            /* background: #e3f2fd; */
            background: var(--light);
            border-radius: 5px;
            font-size: 0.9rem;
        }

        .browser-support p {
            margin: 0.2rem 0;
        }

        .connection-steps {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .step {
            text-align: center;
            max-width: 150px;
        }

        .step-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            color: var(--secondary);
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .feature-card {
            cursor: pointer;
            background: white;
            padding: 1.5rem;
            border-radius: 10px;
            border: 2px solid #e5e5e5;
            /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
            /* box-shadow: 0 4px 6px #e5e5e5; */
        }

        /*.feature-card h3 {*/
        /*    text-align: center;*/
        /*    font-size: 1rem;*/
        /*    padding-bottom: 10px;*/
        /*}*/
        
        .feature-points {
            text-align: center;
            font-size: 1rem;
            padding-bottom: 10px;
            font-weight: 600;
        }
        
        .featured {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.2rem;
            margin: 1rem 0;
        }
        
        .featured-card {
            cursor: pointer;
            background: white;
            padding: 0.8rem;
            border-radius: 10px;
            border: 2px solid #e5e5e5;
            text-align: center;
        }
        
         .featured-head {
             font-size: 2rem !important;
             color: var(--secondary);
             font-weight: 600;
         }
         
         .featured-para {
             font-size: 18px !important;
         }
        
        .support {
            text-align: center;
            font-size: 1.2rem;
            padding-bottom: 10px;
            font-weight: 700;
            display: block;
        }

        .feature-card p {
            font-size: 1rem;
        }

        .feature-card:hover, .featured-card:hover {
            /* box-shadow: 1px 1px 10px 1px var(--tab-border); */
            box-shadow: 1px 2px 8px 2px var(--tab-border);
            background: var(--tab-inactive);
            border: 2px solid var(--tab-inactive);
            transition: all 0.8s;
        }

        .feature-icon {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--secondary);
        }

        .gpt-tool .content-tab {
            /* background: white; */
            padding: 1rem 1rem;
            margin-bottom: 2.5rem;
            /* border-radius: 10px; */
            /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
        }

        .content-tab h2 {
            font-size: 1.8rem;
            font-weight: 700;
            /*line-height: 3rem;*/
            color: var(--secondary);
             text-align: center; 
        }

        /*.content-tab h3 {*/
        /*    font-size: 1.3rem;*/
        /*    line-height: 3rem;*/
        /*    text-transform: capitalize;*/
        /*}*/

        .content-tab span {
            font-size: 1.3rem;
            line-height: 3rem;
            text-transform: capitalize;
        }

        /*.content-tab h4 {*/
        /*    font-size: 1.2rem;*/
        /*    line-height: 2rem;*/
        /*    text-transform: capitalize;*/
        /*}*/
        
        .points {
            font-size: 1.2rem !important;
            line-height: 2rem !important;
            text-transform: capitalize;
            font-weight: 500;
        }
        
        .one {
            padding-top: 1.4rem;
        }
        
        .one img {
            max-width: 100%;
            height: auto;
            margin: auto;
            display: flex;
        }
        
        .one a {
            color: black;
            font-size: 22px;
            font-weight: 500;
            display: flex;
            justify-content: center;
        }
        
        .one a:hover, .one a:focus {
            color: var(--secondary);
        }
        
        .space img {
            margin-top: -80px;
            margin-bottom: -100px;
        }

        .gpt-tool .content-tab p,
        li {
            line-height: 2.4rem;
            /* padding-bottom: 18px; */
            /*font-size: 20px;*/
            color: rgb(0, 0, 0);
            letter-spacing: 0.03rem;
            font-size: 1.16rem;
        }

        .content-tab ul li {
            list-style: disc;
            list-style-position: inside;
        }

        .content-tab ol li {
            list-style: decimal;
            list-style-position: inside;
        }

        .content-tab ol,
        ul {
            padding: 10px 0px;
        }

        .gap {
            padding: 4px 0px;
        }
        
        .two {
            columns: 2 220px;
            column-gap: 2rem;
            /* background: #f8fafc; */
            background: var(--tab-inactive);
            padding: 1.2rem 1.8rem;
            border-radius: 1.5rem;
            margin: 0.5rem 0;
        }

        .three strong {
            font-size: 20px;
        }

        .gpt-tool table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }

        .gpt-tool table th,
        .gpt-tool table td {
            /* border: 1px solid #ccc; */
            border: 1px solid var(--secondary);
            padding: 10px;
            text-align: left;
        }

        .gpt-tool table th {
            font-size: 1.1rem;
        }

        .gpt-tool table td {
            font-size: 1rem;
        }


        @media (max-width: 768px) {

            .gamepad-tabs {
                flex-direction: row;
                flex-wrap: wrap;
            }

            .gamepad-tab {
                flex: 0 0 50%;
                /* Each tab takes 50% width */
                padding: 0.8rem 0.5rem;
                /* Reduced padding for mobile */
                border-right: 1px solid var(--tab-border);
                border-bottom: 1px solid var(--tab-border);
            }

            .gamepad-tab:nth-child(2n) {
                border-right: none;
                /* Remove right border for every 2nd tab */
            }

            .gamepad-tab:nth-child(3),
            .gamepad-tab:nth-child(4) {
                border-bottom: none;
                /* Remove bottom border for last row */
            }

            .gamepad-tab.active {
                border-bottom: 3px solid var(--secondary);
            }

            .gamepad-tab p {
                font-size: 1rem;
                /* Slightly smaller font for mobile */
                margin-bottom: 0.3rem;
            }

            .gamepad-status {
                font-size: 0.8rem;
                /* Smaller status text */
                padding: 0.15rem 0.4rem;
            }
            
            /*.feature-card h3 {*/
            /*    font-size: 1.2rem;*/
            /*}*/
            
            .feature-points {
                font-size: 1.2rem;
            }
            
            .feature-card p {
                font-size: 1rem;
            }

            .featured-para {
                font-size: 18px !important;
            }
        
            .gpt-tool header h1 {
                font-size: 1.8rem;
                color: #107c10;
                font-weight: 800;
            }

            /* h2 {
                font-size: 1.5rem;
            } */

            .subtitle {
                font-size: 1.05rem;
                padding: 0px 2px;
                text-align: justify;
            }

            .input-display {
                /* grid-template-columns: 1fr; */
                grid-template-columns: repeat(2, 1fr);
                gap: 0.8rem;
            }

            .input-item {
                padding: 0.6rem;
                min-height: auto;
            }

            .input-label {
                margin-bottom: 0.2rem;
            }

            .no-gamepads {
                padding: 1.5rem;
            }

            .connection-steps {
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }

            .real-time-detection {
                /* flex-direction: column; */
                gap: 10px;
                padding: 0.8rem 1rem;
            }

            .detection-left {
                font-size: 0.9rem;
            }

            .detection-right {
                font-size: 0.8rem;
            }

            .gamepad-content {
                padding: 1rem;
            }

            .gpt-tool .content-tab h2 {
                font-size: 1.6rem;
                text-align: left;
                /*line-height: 2.5rem;*/
                /*padding-top: 20px;*/
            }
            
            .gpt-tool .content-tab p, li {
                font-size: 1.16rem;
            }

            table th {
                font-size: 1rem;
            }

            .controller-svg {
                padding-top: 1rem;
            }

            .browser-support {
                font-size: 0.8rem;
            }

            .step {
                display: flex;
                align-items: center;
                max-width: 200px;
                gap: 1rem;
            }

            .step-icon {
                /* font-size: 1.5rem; */
            }

            .step p {
                font-size: 1rem;
                text-align: start;
            }
            
            .two {
                padding: 1.2rem;
            }
            
            .space img {
                margin-top: -15px;
                margin-bottom: -20px;
            }
            
            .one {
            padding-top: 2rem;
        }
            
            .one a {
                font-size: 18px;
            }


        }



        /* FAQ Section Main Styles */
        .faq-content-tab {
            /* max-width: 1200px; */
            margin: 0 auto;
            padding: 0 2.5rem;
        }

        .faq-content-tab h2 {
            text-align: center;
            font-size: 2.2rem;
            font-weight: 800;
            /* color: #1a1a1a; */
            color: var(--secondary);
            margin-bottom: 0.5rem;
            /* letter-spacing: -0.5px; */
        }

        .faq-subtitle {
            text-align: center;
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 3rem;
            font-weight: 400;
        }

        /* Grid Layout for Cards */
        .faq-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
            gap: 1.5rem;
            padding: 0.5rem;
        }

        /* Individual Card Styles */
        .faq-card {
            background: transparent;
            border-radius: 24px;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.3s ease;
            min-height: 40px;
            /* Ensures consistent card height */
        }

        .faq-card:hover {
            transform: translateY(-5px);
        }

        /* Card Inner Container for Hover Effect */
        .faq-card-inner {
            background: linear-gradient(145deg, #ffffff, #f2f9f3);
            border-radius: 20px;
            padding: 0.6rem 1rem;
            height: 100%;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: box-shadow 0.3s ease, background 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        .faq-card:hover .faq-card-inner {
            background: linear-gradient(145deg, #ffffff, #4caf5012);
            box-shadow: 0 20px 35px -8px rgba(0, 120, 255, 0.2);
            border: 1px solid #107c10;
        }

        /* Question Styles */
        .faq-question h3 {
            margin: 0;
            font-size: 1.05rem;
            font-weight: 600;
            text-transform: capitalize;
            color: #1a1a1a;
            line-height: 1.4;
            transition: color 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Optional: Add a subtle plus icon indicator */
        .faq-question h3::after {
            content: "^";
            font-size: 1.4rem;
            font-weight: 500;
            color: #107c10;
            margin-left: auto;
            opacity: 0.7;
            transition: opacity 0.2s ease, transform 0.2s ease;
            transform: rotate(90deg);
        }

        .faq-card:hover .faq-question h3::after {
            opacity: 1;
            transform: rotate(180deg);
        }

        /* Answer Styles - Hidden by Default, Shown on Hover */
        .faq-answer {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, margin 0.3s ease;
            margin-top: 0;
            color: #444;
            font-size: 1.05rem;
            line-height: 1.6;
            border-top: 0px solid transparent;
        }

        .faq-card:hover .faq-answer {
            max-height: 200px;
            /* Adjust this value if answers are longer */
            opacity: 1;
            margin-top: 1rem;
            padding-top: 0.8rem;
            border-top: 1px solid #107c108a;
        }

        .faq-answer p {
            margin: 0;
            font-size: 1rem;
        }



        @media (max-width: 640px) {

            /* Responsive Adjustments for Mobile */

            .faq-content-tab {
                padding: 0.5rem;
            }

            .faq-content-tab h2 {
                font-size: 1.45rem;
            }

            .faq-subtitle {
                margin-bottom: 2rem;
                font-size: 1rem;
            }

            .faq-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .faq-card {
                min-height: auto;
            }

            /* On mobile, we keep the hover effect but also make answers accessible */
            .faq-card:hover .faq-answer {
                max-height: 300px;
                /* Slightly larger for mobile in case of long answers */
            }

            .faq-answer {
                font-size: 1.1rem;
            }
        }
        
        
        
        /* ----- TABLE OF CONTENTS CARD (Modern, Responsive) ----- */
        .toc-wrapper {
            margin-bottom: 0.5rem;
            display: flex;
            justify-content: center;
        }

        .toc-card {
            background: #ffffff;
            border-radius: 1rem;
            /* box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.02); */
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.02);
            width: 100%;
            max-width: 940px;
            transition: all 0.2s ease;
            border: 1px solid rgba(203, 213, 225, 0.5);
        }

        /* header area with toggle */
        .toc-header {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.8rem 1.5rem;
            column-gap: 4px;
            background: #ffffff;
            /* border-bottom: 1px solid #eef2f6; */
            border-bottom: 1px solid green;
            border-radius: 1.5rem 1.5rem 0 0;
            font-weight: 600;
            font-size: 1.1rem;
            color: #000;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        
        .toc-header:hover {
            background: #f2f9f3;
            border-bottom-color: #107c10;
            color: #107c10;
        }

        .toc-header span {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .toc-toggle {
            background: none;
            border: none;
            font-size: 1.1rem;
            cursor: pointer;
            width: 36px;
            /* height: 34px; */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            /* border-radius: 40px; */
            transition: all 0.2s ease;
            color: #107c10;
             background: transparent;
            font-weight: 600;
        }

        .toc-toggle:hover {
            /*transform: scale(1);*/
            color: #107c10;
            background: #f2f9f3;
            border-radius: 30px;
            transform: none;
        }

        .toc-toggle:focus-visible {
            /*background-color: white;*/
            /*outline: 2px solid #2c7da0;*/
            outline-offset: 2px;
        }

        /* toc list styling */
        .toc-list {
            list-style: none;
            padding: 0.75rem 0.5rem 0.9rem 0.5rem;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            /* transition: all 0.2s ease; */
            max-height: 500px;
            overflow: auto;
            transition: max-height 0.45s ease, padding 0.45s ease;
        }

        .toc-list.collapsed {
            max-height: 0;
            padding: 0 0.5rem;
            row-gap: 0;
            overflow: hidden;
        }

        .toc-list li {
            margin: 0;
        }

        .toc-list a {
            /* display: block; */
            display: flex;
            align-items: center;
            /*padding: 0.65rem 1.1rem 0.65rem 1.1rem;*/
            padding: .2rem .2rem .2rem 0.8rem;
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 500;
            color: #292929;
            border-radius: 2rem;
            transition: all 0.2s;
            position: relative;
            background: transparent;
            border-left: 3px solid transparent;
        }

        .toc-list a::before {
            content: "›";
            padding-right: 8px;
            color: #107c10;
            font-weight: 700;
        }

        /* subtle hover effect */
        .toc-list a:hover {
            background: #f2f9f3;
            color: #107c10;
            border-left-color: #107c10;
            /*padding-left: 1.8rem;*/
            padding-left: 0.5rem;
        }

        /* active link (scroll spy) */
        .toc-list a.active {
            background: #f2f9f3;
            color: #107c10;
            font-weight: 600;
            border-left-color: #107c10;
            padding-left: 1.8rem;
            box-shadow: inset 0 0 0 1px rgba(44, 125, 160, 0.1);
        }

        @media (min-width: 760px) {
            .toc-list {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                column-gap: 0.75rem;
                row-gap: 0.25rem;
                padding: 0.9rem 1rem 1.2rem 1rem;
            }
            
            .toc-list a:hover {
                padding-left: 2rem;
            }

            .toc-list.collapsed {
                /* display: none; */
                padding: 0 1rem;
            }

            .toc-list a {
                padding: 0.2rem 0.8rem 0.2rem 1.2rem;
                font-size: 0.9rem;
            }
            
        }