html {
            scroll-behavior: smooth;
        }

        /* Custom Selection */
        ::selection {
            background-color: #478cbf;
            color: white;
        }

        /* Scroll Progress Bar */
        #scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(to right, #478cbf, #60a5fa);
            z-index: 1000;
            transition: width 0.1s ease;
        }

        /* Glassmorphism */
        .glass {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .dark .glass {
            background: rgba(32, 37, 49, 0.7);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .dark .glass-card {
            background: rgba(43, 51, 69, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }

        /* Language Toggle Logic */
        html[lang="ar"] .en {
            display: none !important;
        }

        html[lang="en"] .ar {
            display: none !important;
        }

        html[lang="ar"] body {
            font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
        }

        html[lang="en"] body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        /* Custom Scrollbar for Docs */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .dark ::-webkit-scrollbar-track {
            background: #1a1e25;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        .dark ::-webkit-scrollbar-thumb {
            background: #4a5568;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        .dark ::-webkit-scrollbar-thumb:hover {
            background: #718096;
        }

        /* Markdown Styles for Docs View */
        .prose h1 {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: inherit;
            border-bottom: 1px solid #e2e8f0;
            padding-bottom: 0.5rem;
        }

        .dark .prose h1 {
            border-color: #4a5568;
        }

        .prose h2 {
            font-size: 1.75rem;
            font-weight: 700;
            margin-top: 2.5rem;
            margin-bottom: 1rem;
            color: inherit;
        }

        .prose h3 {
            font-size: 1.25rem;
            font-weight: 700;
            margin-top: 2rem;
            margin-bottom: 0.75rem;
            color: inherit;
        }

        .prose h4 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            color: inherit;
        }

        .prose p {
            margin-bottom: 1.25rem;
            line-height: 1.7;
            color: inherit;
        }

        .prose ul {
            list-style-type: disc;
            padding-inline-start: 1.5rem;
            margin-bottom: 1.25rem;
        }

        .prose ol {
            list-style-type: decimal;
            padding-inline-start: 1.5rem;
            margin-bottom: 1.25rem;
        }

        .prose li {
            margin-bottom: 0.5rem;
            line-height: 1.6;
        }

        .prose strong {
            font-weight: 700;
            color: #478cbf;
        }

        .prose table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 2rem;
            text-align: left;
        }

        html[lang="ar"] .prose table {
            text-align: right;
        }

        .prose th,
        .prose td {
            border: 1px solid #e2e8f0;
            padding: 0.75rem;
        }

        .dark .prose th,
        .dark .prose td {
            border-color: #4a5568;
        }

        .prose th {
            background-color: #f7fafc;
            font-weight: 700;
        }

        .dark .prose th {
            background-color: #2b3345;
        }

        .prose tr:nth-child(even) {
            background-color: #f8fafc;
        }

        .dark .prose tr:nth-child(even) {
            background-color: #202531;
        }

        .prose code:not(pre code) {
            background-color: #f1f5f9;
            color: #e11d48;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-family: monospace;
            font-size: 0.9em;
            direction: ltr;
            unicode-bidi: embed;
        }

        .dark .prose code:not(pre code) {
            background-color: #1a1e25;
            color: #fb7185;
        }

        kbd {
            background-color: #e2e8f0;
            color: #1e293b;
            padding: 0.2rem 0.5rem;
            border-radius: 0.25rem;
            border-bottom: 2px solid #cbd5e1;
            font-family: monospace;
            font-size: 0.85em;
            font-weight: bold;
        }

        .dark kbd {
            background-color: #334155;
            color: #f8fafc;
            border-bottom: 2px solid #0f172a;
        }

        /* View Toggling */
        .hidden-view {
            display: none !important;
        }

        /* Video Container Styling */
        .video-container {
            transition: all 0.6s cubic-bezier(0.2, 0, 0.2, 1);
            animation: floating 8s ease-in-out infinite;
            will-change: transform; /* Hint to browser for optimization */
            transform: translate3d(0, 0, 0); /* Force GPU acceleration */
        }
        
        .video-container:hover {
            box-shadow: 0 30px 60px -15px rgba(71, 140, 191, 0.4);
            transform: translate3d(0, -15px, 0) scale(1.02);
        }

        .video-glow {
            position: absolute;
            inset: -30px;
            background: radial-gradient(circle, rgba(71, 140, 191, 0.15) 0%, transparent 70%);
            filter: blur(30px);
            z-index: -1;
            opacity: 0.5;
            pointer-events: none;
        }

        @keyframes floating {
            0% { transform: translate3d(0, 0, 0); }
            50% { transform: translate3d(0, -12px, 0); }
            100% { transform: translate3d(0, 0, 0); }
        }

        /* Slower Bounce for Badge */
        @keyframes slow-bounce {
            0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
            50% { transform: translateY(-15%); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
        }
        .animate-slow-bounce {
            animation: slow-bounce 3s infinite;
        }

        /* Animated Gradient Text */
        .gradient-text {
            background: linear-gradient(90deg, #478cbf, #60a5fa, #478cbf);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shine 3s linear infinite;
        }

        @keyframes shine {
            to { background-position: 200% center; }
        }

        /* Floating Background Icons */
        .bg-float {
            position: absolute;
            pointer-events: none;
            opacity: 0.05;
            z-index: 0;
            animation: float-slow 20s infinite linear;
        }

        .dark .bg-float {
            opacity: 0.1;
        }

        @keyframes float-slow {
            from { transform: translate(0, 0) rotate(0deg); }
            to { transform: translate(100px, 100px) rotate(360deg); }
        }

        /* Search Input Styling */
        #docs-search {
            transition: all 0.3s ease;
        }
        
        #docs-search:focus {
            background: rgba(0, 0, 0, 0.4);
            box-shadow: 0 0 0 2px rgba(71, 140, 191, 0.5);
        }

        /* AOS Custom Tweaks */
        [data-aos] {
            pointer-events: none;
        }
        .aos-animate {
            pointer-events: auto;
        }

        /* Pricing Glow Button */
        .glow-button {
            position: relative;
            z-index: 1;
        }
        .glow-button::before {
            content: '';
            position: absolute;
            top: -2px; left: -2px; right: -2px; bottom: -2px;
            background: linear-gradient(45deg, #478cbf, #ffffff, #478cbf);
            z-index: -1;
            filter: blur(8px);
            border-radius: 14px;
            opacity: 0;
            transition: opacity 0.3s;
            animation: move-glow 3s linear infinite;
        }
        .glow-button:hover::before {
            opacity: 0.6;
        }
        @keyframes move-glow {
            0% { filter: blur(8px); }
            50% { filter: blur(12px); }
            100% { filter: blur(8px); }
        }

        /* FAQ Accordion Styles */
        .faq-item {
            border: 1px solid rgba(0,0,0,0.1);
            transition: all 0.3s;
        }
        .dark .faq-item {
            border-color: rgba(255,255,255,0.1);
        }
        .faq-item.active {
            border-color: #478cbf;
            background: rgba(71, 140, 191, 0.03);
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease;
        }
        .faq-item.active .faq-answer {
            max-height: 500px;
            padding-bottom: 1.5rem;
        }
        .faq-icon {
            transition: transform 0.3s;
        }
        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }

        /* Fix for Before/After Slider */
        #comparison {
            background-image: radial-gradient(rgba(71, 140, 191, 0.1) 1px, transparent 1px);
            background-size: 30px 30px;
        }

        .slider-handle-pulse::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(71, 140, 191, 0.4);
            animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
            z-index: -1;
        }

        @keyframes pulse-ring {
            0% { transform: scale(0.8); opacity: 0.8; }
            50% { transform: scale(1.5); opacity: 0; }
            100% { transform: scale(0.8); opacity: 0; }
        }

        #before-ba-slider-container {
            width: 100%;
        }
        #before-after-slider img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* Ensure the 'before' image stays the same size as the container */
        #before-img-raw {
            width: auto !important;
            height: 100% !important;
            max-width: none !important;
            /* We will handle the exact width in JS or use a better CSS approach */
        }


/* Toast Notifications */
.toast {
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.toast.show {
    transform: translateX(0);
    opacity: 1;
}
html[dir="rtl"] .toast {
    transform: translateX(-100%);
}
html[dir="rtl"] .toast.show {
    transform: translateX(0);
}

/* Responsive Docs Layout */
#view-docs,
#docs-main-container,
#view-docs article {
    min-width: 0;
}

#view-docs > footer {
    display: none;
}

#view-docs.flex {
    height: 100vh;
    overflow: hidden;
}

#docs-main-container {
    min-height: 0;
}

@media (max-width: 767px) {
    #view-docs.flex {
        position: fixed;
        inset: 0;
        z-index: 60;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    #view-docs aside {
        width: 100%;
        height: auto;
        max-height: 38dvh;
        flex: 0 0 auto;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid #374151;
    }

    #view-docs aside nav {
        max-height: 8rem;
        overflow-y: auto;
    }

    #docs-main-container {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #view-docs article {
        width: 100%;
        max-width: none;
        padding: 1.5rem 1rem 5rem;
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .prose h1 {
        font-size: 1.75rem;
        line-height: 1.35;
    }

    .prose h2 {
        font-size: 1.4rem;
        line-height: 1.4;
    }

    .prose h3 {
        font-size: 1.15rem;
        line-height: 1.45;
    }

    .prose p,
    .prose li,
    .prose td {
        overflow-wrap: anywhere;
    }

    .prose table,
    .prose thead,
    .prose tbody,
    .prose tr,
    .prose th,
    .prose td {
        display: block;
        width: 100%;
    }

    .prose table {
        min-width: 0;
        border: 0;
        margin-bottom: 2rem;
        overflow: visible;
        white-space: normal;
    }

    .prose thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .prose tbody {
        border: 0;
    }

    .prose tr {
        margin-bottom: 0.85rem;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        background: #ffffff;
    }

    .dark .prose tr {
        border-color: #4a5568;
        background: #202531;
    }

    .prose tr:nth-child(even) {
        background: #ffffff;
    }

    .dark .prose tr:nth-child(even) {
        background: #202531;
    }

    .prose td {
        display: grid;
        grid-template-columns: minmax(5.75rem, 34%) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: start;
        border: 0;
        border-bottom: 1px solid #e2e8f0;
        padding: 0.75rem;
        text-align: start;
        white-space: normal;
    }

    html[lang="ar"] .prose td {
        text-align: right;
    }

    .dark .prose td {
        border-color: #4a5568;
    }

    .prose td:last-child {
        border-bottom: 0;
    }

    .prose td::before {
        color: #478cbf;
        font-weight: 700;
        line-height: 1.5;
    }

    html[lang="ar"] .prose td:nth-child(1)::before {
        content: "\0627\0644\0623\0645\0631";
    }

    html[lang="ar"] .prose td:nth-child(2)::before {
        content: "\0627\0644\0627\062E\062A\0635\0627\0631";
    }

    html[lang="ar"] .prose td:nth-child(3)::before {
        content: "\0627\0644\0648\0635\0641";
    }

    html[lang="en"] .prose td:nth-child(1)::before {
        content: "Command";
    }

    html[lang="en"] .prose td:nth-child(2)::before {
        content: "Shortcut";
    }

    html[lang="en"] .prose td:nth-child(3)::before {
        content: "Context";
    }

    .prose kbd {
        display: inline-block;
        white-space: normal;
    }
}

/* Changelog Enhanced Styles */
.changelog-featured {
    border: 1px solid rgba(71, 140, 191, 0.6);
    box-shadow: 0 0 50px rgba(71, 140, 191, 0.2), inset 0 0 20px rgba(71, 140, 191, 0.1);
    position: relative;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
}

.changelog-featured::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(71, 140, 191, 0) 10deg,
        rgba(71, 140, 191, 0.9) 30deg,
        rgba(71, 140, 191, 0) 50deg,
        transparent 180deg,
        rgba(71, 140, 191, 0) 190deg,
        rgba(71, 140, 191, 0.9) 210deg,
        rgba(71, 140, 191, 0) 230deg
    );
    animation: rotate-glow 8s linear infinite;
    z-index: -2;
    filter: blur(8px);
}

.changelog-featured::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: linear-gradient(135deg, rgba(43, 51, 69, 0.95), rgba(26, 30, 37, 0.98));
    border-radius: calc(1.5rem - 1px);
    z-index: -1;
}

.changelog-featured .text-godot-primary {
    text-shadow: 0 0 20px rgba(71, 140, 191, 0.6);
}

@keyframes rotate-glow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(26, 30, 37, 0.95);
    backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    overflow-y: auto;
    padding: 2rem 1rem;
}

.detail-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.detail-content {
    max-width: 900px;
    margin: 0 auto;
    background: var(--godot-card);
    border-radius: 2rem;
    padding: 3rem;
    box-shadow: 0 40px 100px rgba(0,0,0,0.5);
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.detail-overlay.show .detail-content {
    transform: translateY(0);
}

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

.media-item {
    border-radius: 1rem;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255,255,255,0.1);
}

.media-item img, .media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.media-item:hover img {
    transform: scale(1.05);
}

.changelog-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.changelog-card:hover {
    transform: translateY(-5px);
    background: rgba(71, 140, 191, 0.05);
}