body {
            background-color: #101010;
            background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 32px 32px;
            color: #FFFFFF;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .strict-border {
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0 !important;
        }
        
        .strict-border:hover {
            border-color: rgba(255, 171, 101, 0.5);
        }

        .strict-card {
            background-color: rgba(16, 16, 16, 0.95);
            backdrop-filter: blur(4px);
        }

        .reveal {
            opacity: 0;
            transform: translateY(15px);
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        /* Editor specific scrollbar hiding */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }


/* --- System Information Section Animations --- */

@keyframes bar-pulse-1 { 0%, 100% { height: 30%; } 50% { height: 100%; box-shadow: 0 0 8px rgba(255,171,101,0.5); } }
@keyframes bar-pulse-2 { 0%, 100% { height: 70%; } 50% { height: 20%; box-shadow: none; } }
@keyframes bar-pulse-3 { 0%, 100% { height: 40%; } 50% { height: 90%; box-shadow: 0 0 8px rgba(255,171,101,0.5); } }
@keyframes bar-pulse-4 { 0%, 100% { height: 85%; } 50% { height: 35%; box-shadow: none; } }
@keyframes bar-pulse-5 { 0%, 100% { height: 20%; } 50% { height: 75%; box-shadow: 0 0 8px rgba(255,171,101,0.5); } }

.hist-1 { animation: bar-pulse-1 1.4s infinite ease-in-out; }
.hist-2 { animation: bar-pulse-2 1.8s infinite ease-in-out; }
.hist-3 { animation: bar-pulse-3 1.2s infinite ease-in-out; }
.hist-4 { animation: bar-pulse-4 1.6s infinite ease-in-out; }
.hist-5 { animation: bar-pulse-5 1.5s infinite ease-in-out; }

@keyframes progress-fill {
    0% { width: 0%; box-shadow: none; }
    100% { width: var(--target-width); box-shadow: 0 0 10px rgba(255,171,101,0.6); }
}
.animate-progress {
    animation: progress-fill 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes ping-wave {
    0%, 100% { height: 20%; background-color: rgba(34, 197, 94, 0.3); }
    50% { height: 100%; background-color: rgba(34, 197, 94, 1); box-shadow: 0 0 8px rgba(34,197,94,0.6); }
}
.ping-1 { animation: ping-wave 1s infinite ease-in-out 0.1s; }
.ping-2 { animation: ping-wave 1s infinite ease-in-out 0.2s; }
.ping-3 { animation: ping-wave 1s infinite ease-in-out 0.3s; }
.ping-4 { animation: ping-wave 1s infinite ease-in-out 0.4s; }
.ping-5 { animation: ping-wave 1s infinite ease-in-out 0.5s; }

@keyframes blink-node {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px #22c55e; }
    50% { opacity: 0.3; box-shadow: none; }
}
.blink-active { animation: blink-node 2s infinite ease-in-out; }

.card-bg-pattern {
    background-image: radial-gradient(rgba(255, 171, 101, 0.04) 1px, transparent 1px);
    background-size: 10px 10px;
}


/* Flow Animations for the Connector */
@keyframes slide-arrow-h {
    0% { transform: translateX(-15px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(15px); opacity: 0; }
}
@keyframes slide-arrow-v {
    0% { transform: translateY(-15px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(15px); opacity: 0; }
}
.animate-arrow-h { animation: slide-arrow-h 1.5s infinite ease-in-out; }
.animate-arrow-v { animation: slide-arrow-v 1.5s infinite ease-in-out; }


@keyframes platform-glow {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}
.platform-glow {
    animation: platform-glow 3s infinite ease-in-out;
}


/* Footer Specific Animations */
@keyframes ft-bar-1 { 0%, 100% { height: 30%; background-color: rgba(255,171,101,0.4); } 50% { height: 90%; background-color: #FFAB65; box-shadow: 0 0 8px rgba(255,171,101,0.5); } }
@keyframes ft-bar-2 { 0%, 100% { height: 60%; background-color: rgba(255,171,101,0.4); } 50% { height: 20%; background-color: rgba(255,171,101,0.8); box-shadow: none; } }
@keyframes ft-bar-3 { 0%, 100% { height: 40%; background-color: rgba(255,171,101,0.4); } 50% { height: 100%; background-color: #FFAB65; box-shadow: 0 0 8px rgba(255,171,101,0.5); } }
@keyframes ft-bar-4 { 0%, 100% { height: 80%; background-color: rgba(255,171,101,0.4); } 50% { height: 30%; background-color: rgba(255,171,101,0.6); box-shadow: none; } }
@keyframes ft-bar-5 { 0%, 100% { height: 25%; background-color: rgba(255,171,101,0.4); } 50% { height: 75%; background-color: #FFAB65; box-shadow: 0 0 8px rgba(255,171,101,0.5); } }

.ft-b1 { animation: ft-bar-1 1.2s infinite ease-in-out; }
.ft-b2 { animation: ft-bar-2 1.5s infinite ease-in-out; }
.ft-b3 { animation: ft-bar-3 1.1s infinite ease-in-out; }
.ft-b4 { animation: ft-bar-4 1.7s infinite ease-in-out; }
.ft-b5 { animation: ft-bar-5 1.3s infinite ease-in-out; }
.ft-b6 { animation: ft-bar-2 1.4s infinite ease-in-out reverse; }
.ft-b7 { animation: ft-bar-4 1.6s infinite ease-in-out reverse; }
.ft-b8 { animation: ft-bar-1 1.8s infinite ease-in-out reverse; }

/* Pulse dot */
@keyframes ft-ping { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }
.ft-pulse::after { content: ''; absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; border-radius: inherit; animation: ft-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }