@layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .node-transition {
                transition: all 0.3s ease;
                cursor: pointer;
            }
            .node-hover {
                transform: scale(1.08);
                box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.05);
                border-color: #3b82f6;
                z-index: 20;
            }
            .node-active {
                border-color: #2563eb;
                background-color: #dbeafe;
                box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
                transform: scale(1.05);
            }
            .node-pointer {
                position: absolute;
                bottom: -12px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 12px solid #3b82f6;
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            .node-transition:hover .node-pointer {
                opacity: 1;
            }
            .node-tooltip {
                position: absolute;
                bottom: -45px;
                left: 50%;
                transform: translateX(-50%);
                background-color: #1e293b;
                color: white;
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 12px;
                white-space: nowrap;
                opacity: 0;
                transition: opacity 0.3s ease;
                z-index: 30;
            }
            .node-transition:hover .node-tooltip {
                opacity: 1;
            }
            .timeline-line {
                height: 10px;
                background: linear-gradient(to right, #f59e0b, #2563eb, #000000);
                border-radius: 5px;
            }
            .timeline-marker {
                width: 24px;
                height: 24px;
                background-color: #3b82f6;
                border-radius: 50%;
                transform: translateY(-7px);
                transition: all 0.3s ease;
            }
            .timeline-marker:hover {
                transform: translateY(-7px) scale(1.2);
                box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
            }
            .title-gradient {
                background: linear-gradient(to right, #2563eb, #f59e0b);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
            }
            .node-box {
                border: 1px solid #d1d5db;
                border-radius: 4px;
                background-color: white;
                min-height: 100px;
                max-height: 200px;
                overflow-y: auto;
            }
            .node-title {
                background-color: #3b82f6;
                color: white;
                text-align: center;
                padding: 4px 0;
                border-radius: 0 0 4px 4px;
                font-size: 14px;
                font-weight: 500;
            }
            .step-number {
                position: absolute;
                top: -12px;
                left: 20px;
                background-color: #3b82f6;
                color: white;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 14px;
            }
            .horizontal-line {
                width: 15px;
                height: 3px;
                background-color: #93c5fd;
                align-self: center;
                position: relative;
                overflow: hidden;
            }
            .horizontal-line::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
                transform: translateX(-100%);
                animation: flowAnimation 2s infinite;
            }
            @keyframes flowAnimation {
                0% {
                    transform: translateX(-100%);
                }
                100% {
                    transform: translateX(100%);
                }
            }
            .flow-arrow {
                width: 0;
                height: 0;
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
                border-left: 10px solid #93c5fd;
                align-self: center;
            }
            .modal-overlay {
                background-color: rgba(0, 0, 0, 0.6);
                backdrop-filter: blur(5px);
                transition: opacity 0.3s ease;
            }
            .modal-content {
                transform: scale(0.95) translateY(20px);
                opacity: 0;
                transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
                border: 2px solid #3b82f6;
                box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3), 0 0 0 1000px rgba(59, 130, 246, 0.05);
            }
            .modal-content.active {
                transform: scale(1) translateY(0);
                opacity: 1;
            }
            .modal-header {
                background: linear-gradient(135deg, #3b82f6, #60a5fa);
                color: white;
                padding: 16px 24px;
                border-radius: 4px 4px 0 0;
            }
            .modal-body {
                padding: 24px;
            }
            .modal-footer {
                background-color: #f8fafc;
                padding: 16px 24px;
                border-top: 1px solid #e2e8f0;
                border-radius: 0 0 4px 4px;
            }
            .zoom-controls {
                transition: opacity 0.3s ease, transform 0.3s ease;
                background-color: white;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                border: 2px solid #3b82f6;
            }
            .zoom-controls:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
            }
            .zoom-button {
                transition: all 0.2s ease;
                background-color: white;
                border: 1px solid #e2e8f0;
            }
            .zoom-button:hover {
                background-color: #3b82f6;
                color: white;
                border-color: #3b82f6;
                transform: scale(1.1);
            }
            .zoom-button:active {
                transform: scale(0.95);
            }
            .timeline-pulse {
                animation: pulse 2s infinite;
            }
            @keyframes pulse {
                0% {
                    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
                }
                70% {
                    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
                }
                100% {
                    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
                }
            }
            .progress-dot {
                width: 12px;
                height: 12px;
                background-color: #3b82f6;
                border-radius: 50%;
                animation: moveDot 3s infinite;
                position: absolute;
                left: -6px;
                top: -5px;
                box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
                z-index: 10;
            }
            @keyframes moveDot {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(25px);
                }
            }
            @media (max-width: 768px) {
                .modal-content {
                    width: 90% !important;
                    max-width: 90% !important;
                }
            }
        }