html {
            scroll-behavior: smooth;
        }
        body {
            font-family: 'Inter', sans-serif;
        } 
        /* Use DSans for headings */
        h1, h2, h3, h4, h5, h6 {
            font-family: 'DSans', 'Inter', sans-serif;
        }
        /* Custom styles for syntax highlighting */
        .token.keyword { color: #c792ea; }
        .token.function { color: #82aaff; }
        .token.string { color: #c3e88d; }
        .token.number { color: #f78c6c; }
        .token.comment { color: #546e7a; }
        .token.operator { color: #89ddff; }
        .token.punctuation { color: #89ddff; }
        
        /* Brand Colors */
        .text-brand-red { color: #e2231a; }
        .bg-brand-red { background-color: #e2231a; }
        .hover\:bg-brand-red-dark:hover { background-color: #c01e16; } /* A slightly darker red for hover */
        .hover\:text-brand-red:hover { color: #e2231a; }
        
        /* Tab Styles */
        .tab-btn.active {
            background-color: #e2231a; /* Replaced blue */
            color: white;
        }

        /* Tab Panel Animations */
        .tab-panel-container {
            position: relative;
            transition: height 0.3s ease-out; /* Changed easing to ease-out */
        }
        .tab-panel {
            /* Shortened transition, will get delay from JS */
            transition: opacity 0.2s ease-in, transform 0.2s ease-in; 
            opacity: 1;
            transform: translateY(0);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 1.5rem; /* p-6 */
        }
        .tab-panel.hidden {
            opacity: 0;
            transform: translateY(10px);
            pointer-events: none;
        }

        /* Copy Button Hover */
        .copy-btn:hover {
            background-color: #e2231a;
            color: white;
        }

        /* Load-in Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fadeInUp {
            animation: fadeInUp 0.7s ease-out forwards;
            opacity: 0; /* Start hidden */
        }

.logo {
    max-width: 180px;
    margin-bottom: 20px;
}
        
        /* Staggered delays */
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .delay-400 { animation-delay: 0.4s; }
        .delay-500 { animation-delay: 0.5s; }