<!--
................................................................................
................................................................................
[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@@@@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@@/,,,,,,,,,,,,,,*@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@*,/@&@@@@@@@%%%@@@@%@@@@@@&@@@@#,,@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&@@@@@@@,*@&&&@@@@@@@@@@@,.@@@@@@@@@@,,,*@@@#@@@@@#,@@@@@@&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&@@@@@@,@@&&@@(/@@@(*@..%..@@ . ..@@@@@@@@@@@. @@@@@@@@@@@,@@@@@@&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&@@@@@,@@@@#/@,@@@@@ @@   @@@ ..@@@.  .@.(&.@@/   .@@@@@#/#@@@@,/@@@@&&&&&&&&&&&&&&
&&&&&&&&&&&&&&@@@@@,@&@@@@*.  # #. @@@@ *     (..@@@@@,.@. /  @@@@. @@@@@@@/,(@@@@,@@@@@&&&&&&&&&&&&
&&&&&&&&&&&&@@@@#/@@%@@@@, @@@* . &.@@@@ @@. @@@@. @@ *@@@@@@.  .@@@@, %@@@@@@,*@@@@@,@@@@&&&&&&&&&&
&&&&&&&&&&&@@@/&@@%@@@@. @@@@.@@@@&  @.*  @@@& @@@@@@@@@@@@@@@@@ @@@@@@@#..@@@@@,,@@@@@,@@@@&&&&&&&&
&&&&&&&&&@@@@,@@@(@@@,.@@@  @@@@@@@@@@& @@@@@@ @@@ @@@@/ %@@@@@@@@@@@@@@@@@*.@@@@@@@@@@@&#@@@&&&&&&&
&&&&&&&&@@@,@@@@/@@@.%@@@@@@@@.@@@@@@@# @@@@@@@@@,.(@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@,@@@@&&&&&
&&&&&&@@@@,@@@&*@@@ @@@@@@@@@@  @@@@@@@ @@@@@@@@/,@@@@@@@@@@@@@@@@@@@@@@ .@@@@@@@@@  @@@@@@/@@@@&&&&
&&&&&@@@@/@@@//@@( @@@@@@@@@@@ . @@@@@@@@@@@@  @@@@@@@@@@@@@@@@@@@@@@@@  .@@@@@@@@@@@@@@@@@@@#@@@&&&
&&&&@@@@/@@@/#@@# @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ /@@@@ @@@&@@@@@@@@&#@@@@@@@@@@ @@@@@@@@@@&@@@&&
&&&&@@@,@@@/@@@@.&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@/ @@  @@@@@@@@@@@@@@@@@@ @@@@@@@@(@@*@@@@&
&&&@@@,@@@/*@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@..@@@@@@@@ @@@@@@@@@@@@@@@ @@@@ @  @@@@@@@*(@@,@@@&
&&&@@@*@@@*@@@/@@@@@@@@@@@@@@  @ @@@@@@@@@@@@@@@@@ @@@@@@@ &@ # @@@@@  @@/ @@ @@@@@@@@@@@@@@/%@@@@@@
&&@@@,@@@(@@@@@@@@@@@@@@@@@@  @% @@@@@@@@@@@@@@@@@@&       @@@ @@@&@@  %@@@@@@@@@@@@@@@@@@@@@(@@,@@@
&&&@@,@@&#@@@@@@@   % *@@@@  @@ @@@@@@@@@@@@@@@@@@@@@@@ @ @@@   #@@@@@@@@@@@@@@@@@@@@@@@..@@@(&@,@@@
&&@@@,@@#@@@@@@@ @@@@. @@@@  @ @@@@@@@@@@@@@@@@@ @@@@ @@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@/.@@@(#@,@@@
&&&@@,@@#@@@@@@@@@@@@ &@@@.  .@@@@@@@@@@@@@  @@# @ @ @ /@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@&.@@@(#@,@@@
&&@@@,@@%/@@@@@@@@@@@ @@@@  @@@@@@@@  @ @@@ @@%%@@@@@@@@@@@@@@@@@@@@@@@@  @@ @@@@*.@@@@@,.@@@(@@,@@@
&&&@@@%@@(@@@@@@@@@@,    @ @@@@@@@  @@&&@@@#.@@@@@@@@@@@@@@@@@@@*       ,@& @@@@@.@@@@@@.@@@@#@@(@@@
&&&@@@,@@@@@@@@@  (@ @@@@ @@@@@@@( @@ @@@@@@@@@@@@@@@@@@@@@%.@@@@  ,@@@@@ (@@@@%.@@@@@@.@@@@(@@,@@@@
&&&@@@@,@@@@@@@ @@@  @@@@ @@@@@@@@&@@@@@@@@@@@@@@@@@@@@@@@@@@@. .@@@,.  @@@@@@..@@@@@@.(@@@/%@@@@@@&
&&&&@@@&@@@@@@@ &@@ @@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@(..@@@@@@@@.(@@@/&@@,@@@&&
&&&&&@@@/@@@@@@@   @@@@@@ @@@@@@@@@@@@@@@@@@@@  @@@@  @@@@@@@@@@@@@@@@..,@@@@@@@@@@@.@@@@/@@@,@@@&&&
&&&&&&@@@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@@@@   @@@@    @@@@@@@@@@@@@@@@@@@@@@@@@@..@@@*/@@@,@@@&&&&
&&&&&&&@@@@,@@@@@@@@@@@@  @@@@@@@@#@@@@@@@@.  @ @@@@      @@@@@@@@@@@@@@@@@@@@@@..@@@@*@@@*@@@@&&&&&
&&&&&&&&@@@@,@@@@@@@@@@@@ @@@@@@@@& @@@@@@.  %.*@@@@.     @@@@@@@@.      @@@@@*.@@@#*%@@@,@@@@&&&&&&
&&&&&&&&&&@@@@,@@@@@@@@@@@ &@@@@@@@@@@. &@@@@@@@@&@@@.. @@@@@@#.  %,  . @@@@. @@@,*@@@@,@@@@&&&&&&&&
&&&&&&&&&&&@@@@@,@@@@@@@@@@@@@@@@@@@@@@@@    @@&   @@@@@%   %@@@@@@%  @@@ .@@@@,/@@@@,@@@@@&&&&&&&&&
&&&&&&&&&&&&&@@@@@,%@@@@@@@@@@@@@@(@.  ,@@@@@@@@@@@@@@@@@@@@   #@@. @@%.@@@@,*@@@@@,@@@@@&&&&&&&&&&&
&&&&&&&&&&&&&&&&@@@@@,@@@@@@@@@@( @@.@@@@@.    .......... .@@@.@@. ,@.(@@,*@@@@@,@@@@@&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&@@@@@@,/@@@%@@*#@@.@@@@..@@@@.#@@@@ @@@@.@@@.@@  @@*@@#%@@@,@@@@@@&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&@@@@@@@,,@@@@@@(@@@@,#@@@@.#@@@@,@@@,@@@**@@/#@%&@@#,@@@@@@@&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@,,@@&&&%%@@@@@(@@@@(#@%((@@@%@@@@@,,@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@&,,,,%@@@@@@&@@@&*,,,%@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&]
................................................................................
................................................................................
-->
<!doctypehtml><html lang="en"><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1"><title>Hedera Transactions</title><style>body {
            background-color: #222222;
            font-family: 'Inconsolata', sans-serif;
            color: white;
            text-align: center;
            border-radius: 20px;
            margin: 0;
            overflow: hidden;
        }

        #tpsContainer {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 125px;
            height: 100px;
            z-index: 10;
        }

        #transactionsPerSecondBox {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 16px;
            color: white;
            opacity: 0.85;
            background-color: transparent !important;
            padding: 4px 6px;
            border-radius: 8px;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 2px;
        }
        
        #tpsHistoryChartContainer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            padding: 5px;
            z-index: 1;
        }

        .txns-icon {
            width: 20px;
            height: 20px;
            object-fit: contain;
            filter: brightness(1.5) contrast(1.2);
            opacity: 0.9;
            transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
            cursor: pointer;
        }

        .txns-icon:hover {
            transform: scale(1.4) rotate(5deg);
            filter: brightness(2.2) contrast(1.5) drop-shadow(0 0 5px purple);
            opacity: 1;
        }

        @keyframes pulsate {
            0% { transform: scale(1); }
            100% { transform: scale(1.05); }
        }

        canvas {
            display: block;
        }</style><link rel="stylesheet"href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap"><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><div id="tpsContainer"><div id="transactionsPerSecondBox"><img src="../../../tokimg/hbar.png"alt="Txns Icon"class="txns-icon"> <span id="transactionsPerSecond">0</span> txns/sec</div><div id="tpsHistoryChartContainer"><canvas id="tpsHistoryChart"></canvas></div></div><canvas id="transfersChart"width="100%"height="100%"></canvas><script>const apiBaseUrl = 'https://mainnet-public.mirrornode.hedera.com';

        let transfersChart;
        let tpsHistoryChart;
        let transactionsCounter = 0;
        let startTime = Date.now();
        let transactionsUrl = apiBaseUrl + '/api/v1/transactions';
        
        // Store TPS history for the line chart
        const tpsHistory = [];
        const maxHistoryPoints = 300; // Store up to 5 minutes of data (1 point per second)
        let lastUpdateTime = 0;
        const updateInterval = 1000; // Update every second

        // Initialize TPS history with zeros
        for (let i = 0; i < maxHistoryPoints; i++) {
            tpsHistory.push(0);
        }

        // Function to initialize the TPS history chart
        function initTpsHistoryChart() {
            const ctx = document.getElementById('tpsHistoryChart').getContext('2d');
            
            tpsHistoryChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: Array(maxHistoryPoints).fill(''),
                    datasets: [{
                        label: 'TPS History',
                        data: tpsHistory,
                        borderColor: 'rgba(186, 85, 211, 0.8)',
                        borderWidth: 1,
                        pointRadius: 0,
                        fill: true,
                        backgroundColor: 'rgba(186, 85, 211, 0.2)',
                        tension: 0.1,
                        borderJoinStyle: 'round'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            enabled: false
                        }
                    },
                    scales: {
                        x: {
                            display: false,
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            display: false,
                            min: 0,
                            suggestedMax: 20 // Adjust based on your expected TPS range
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'nearest'
                    },
                    animation: {
                        duration: 0 // Disable animation for smoother updates
                    }
                }
            });
        }

        // Function to update the TPS history chart
        function updateTpsHistoryChart(tps) {
            const now = Date.now();
            
            // Only update if enough time has passed since last update
            if (now - lastUpdateTime >= updateInterval) {
                lastUpdateTime = now;
                
                // Shift the array to remove the oldest data point
                tpsHistory.shift();
                // Add the new TPS value
                tpsHistory.push(tps);
                
                // Update the chart
                tpsHistoryChart.data.datasets[0].data = tpsHistory;
                tpsHistoryChart.update('none'); // 'none' prevents animation for smoother updates
            }
        }

        // Function to fetch the latest transaction timestamp
        async function fetchLatestTransactionTimestamp() {
            try {
                const response = await fetch(apiBaseUrl + '/api/v1/transactions?limit=1&order=desc');
                const data = await response.json();
                if (data && data.transactions && data.transactions.length > 0) {
                    const latestTimestamp = data.transactions[0].consensus_timestamp;
                    console.log('Latest Transaction Timestamp:', latestTimestamp); // Debugging
                    return latestTimestamp;
                }
            } catch (error) {
                console.error('Error fetching latest transaction timestamp:', error);
            }
            return null;
        }

        // Function to parse the Hedera timestamp (seconds.nanoseconds) into milliseconds
        function parseHederaTimestamp(timestamp) {
            const [seconds, nanoseconds] = timestamp.split('.').map(Number);
            return (seconds * 1000) + (nanoseconds / 1e6); // Convert to milliseconds
        }

        // Function to calculate TPS
        async function calculateTransactionsPerSecond() {
            const latestTimestamp = await fetchLatestTransactionTimestamp();
            const currentTime = Date.now();

            let latestTransactionTime;
            if (latestTimestamp) {
                // Parse the Hedera timestamp into milliseconds
                latestTransactionTime = parseHederaTimestamp(latestTimestamp);
            } else {
                // Fallback: Use current time if timestamp is missing
                latestTransactionTime = currentTime;
            }

            // Calculate elapsed time in seconds
            const elapsedTimeInSeconds = (currentTime - latestTransactionTime) / 1000;

            // Ensure elapsed time is at least 1 second to avoid division by zero
            const tps = transactionsCounter / Math.max(elapsedTimeInSeconds, 1);
            console.log('Transactions Counter:', transactionsCounter); // Debugging
            console.log('Elapsed Time (s):', elapsedTimeInSeconds); // Debugging
            console.log('Calculated TPS:', tps); // Debugging

            return tps;
        }

        // Function to reset the transactions counter every second
        function resetTransactionsCounter() {
            transactionsCounter = 0; // Reset the counter
            setTimeout(resetTransactionsCounter, 1000); // Reset every second
        }

        // Function to fetch and display transactions
        async function fetchAndDisplayTransactions() {
            try {
                const response = await fetch(transactionsUrl);
                const data = await response.json();
                if (data && data.transactions) {
                    const transfersData = data.transactions.flatMap(tx => tx.transfers.map(t => t.amount));
                    updateChart(transfersData);

                    // Update transactions counter
                    transactionsCounter += data.transactions.length;

                    // Calculate and display TPS
                    const tps = await calculateTransactionsPerSecond();
                    const tpsDisplay = tps.toFixed(2);
                    document.getElementById("transactionsPerSecond").textContent = tpsDisplay;
                    
                    // Update TPS history continuously
                    updateTpsHistoryChart(tps);

                    // Check if there's a next link
                    if (data.links && data.links.next) {
                        transactionsUrl = apiBaseUrl + data.links.next;
                        setTimeout(fetchAndDisplayTransactions, 500); // Fetch next set of data every 0.5 seconds
                    }
                }
            } catch (error) {
                console.error('Error fetching transactions:', error);
            }
        }

        // Function to update the chart
        function updateChart(transfersData) {
            const transfersChartCanvas = document.getElementById("transfersChart");
            const ctx = transfersChartCanvas.getContext('2d');

            const backgroundColors = shuffle([
                'rgba(128, 0, 128, .3)',    // Purple
                'rgba(186, 85, 211, .4)',   // MediumOrchid
                'rgba(148, 0, 211, .4)',    // DarkViolet
                'rgba(219, 112, 147, .4)',  // Orchid
                'rgba(221, 160, 221, .5)',  // Plum
                'rgba(221, 160, 221, .6)',  // Plum with reduced opacity
                'rgba(255, 105, 180, .5)',  // HotPink
                'rgba(255, 105, 180, .3)',  // HotPink with reduced opacity
                'rgba(255, 20, 147, .5)',   // DeepPink
                'rgba(255, 20, 147, .3)',   // DeepPink with reduced opacity
                'rgba(218, 112, 214, .4)',  // Orchid
                'rgba(218, 112, 214, .3)',  // Orchid with reduced opacity
                'rgba(138, 43, 226, .3)',   // BlueViolet
                'rgba(138, 43, 226, .4)',   // BlueViolet with reduced opacity
                'rgba(128, 0, 128, .2)',    // Purple with reduced opacity
                'rgba(186, 85, 211, .5)',   // MediumOrchid with reduced opacity
                'rgba(148, 0, 211, .5)',    // DarkViolet with reduced opacity
                'rgba(238, 130, 238, .5)',  // Violet
                'rgba(238, 130, 238, .6)',  // Violet with reduced opacity
                'rgba(186, 85, 211, .3)',   // MediumOrchid with further reduced opacity
                'rgba(128, 0, 128, .1)',    // Purple with very low opacity
                'rgba(255, 192, 203, .5)',  // Pink
                'rgba(255, 192, 203, .3)',  // Pink with reduced opacity
            ]);

            const chartOptions = {
                rotation: -90, // Start angle for a unique visual entry
                cutout: '40%', // Donut-style appearance
                elements: {
                    arc: {
                        backgroundColor: (context) =>
                            backgroundColors[context.dataIndex % backgroundColors.length],
                        hoverOffset: 60,
                        borderRadius: 50,
                        borderColor: 'rgba(255,255,255,0.1)',
                        borderWidth: 0,
                    },
                },
                plugins: {
                    legend: {
                        display: false,
                    },
                    tooltip: {
                        backgroundColor: 'rgba(15,15,15,0.85)',
                        titleColor: '#fff',
                        bodyColor: '#ccc',
                        borderColor: '#888',
                        borderWidth: 1,
                        cornerRadius: 10,
                        padding: 12,
                        displayColors: false,
                        titleFont: {
                            size: 18,
                            weight: 'bold',
                            family: 'Inconsolata, monospace',
                        },
                        bodyFont: {
                            size: 14,
                            family: 'Inconsolata, monospace',
                        },
                    },
                },
                animation: {
                    duration: 800,
                    easing: 'easeOutBack',
                    animateRotate: true,
                    animateScale: true,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true,
                },
                scales: {
                    r: {
                        display: false,
                    },
                },
            };

            if (transfersChart) {
                // Update existing chart data
                transfersChart.data.labels = transfersData.map((_, index) => `Transfer ${index + 1}`);
                transfersChart.data.datasets[0].data = transfersData;
                transfersChart.update();
            } else {
                // Create new chart
                transfersChart = new Chart(ctx, {
                    type: 'polarArea',
                    data: {
                        labels: transfersData.map((_, index) => `Transfer ${index + 1}`),
                        datasets: [{
                            label: 'Transfer Amount',
                            data: transfersData,
                            backgroundColor: backgroundColors,
                            borderWidth: 0.1,
                        }],
                    },
                    options: chartOptions,
                });
            }
        }

        // Function to shuffle an array
        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

        // Initialize the TPS history chart
        initTpsHistoryChart();

        // Start fetching and displaying transactions
        fetchAndDisplayTransactions();

        // Start resetting the transactions counter every second
        resetTransactionsCounter();</script>
<!--
................................................................................
................................................................................
[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@@@@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@@/,,,,,,,,,,,,,,*@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@*,/@&@@@@@@@%%%@@@@%@@@@@@&@@@@#,,@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&@@@@@@@,*@&&&@@@@@@@@@@@,.@@@@@@@@@@,,,*@@@#@@@@@#,@@@@@@&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&@@@@@@,@@&&@@(/@@@(*@..%..@@ . ..@@@@@@@@@@@. @@@@@@@@@@@,@@@@@@&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&@@@@@,@@@@#/@,@@@@@ @@   @@@ ..@@@.  .@.(&.@@/   .@@@@@#/#@@@@,/@@@@&&&&&&&&&&&&&&
&&&&&&&&&&&&&&@@@@@,@&@@@@*.  # #. @@@@ *     (..@@@@@,.@. /  @@@@. @@@@@@@/,(@@@@,@@@@@&&&&&&&&&&&&
&&&&&&&&&&&&@@@@#/@@%@@@@, @@@* . &.@@@@ @@. @@@@. @@ *@@@@@@.  .@@@@, %@@@@@@,*@@@@@,@@@@&&&&&&&&&&
&&&&&&&&&&&@@@/&@@%@@@@. @@@@.@@@@&  @.*  @@@& @@@@@@@@@@@@@@@@@ @@@@@@@#..@@@@@,,@@@@@,@@@@&&&&&&&&
&&&&&&&&&@@@@,@@@(@@@,.@@@  @@@@@@@@@@& @@@@@@ @@@ @@@@/ %@@@@@@@@@@@@@@@@@*.@@@@@@@@@@@&#@@@&&&&&&&
&&&&&&&&@@@,@@@@/@@@.%@@@@@@@@.@@@@@@@# @@@@@@@@@,.(@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@,@@@@&&&&&
&&&&&&@@@@,@@@&*@@@ @@@@@@@@@@  @@@@@@@ @@@@@@@@/,@@@@@@@@@@@@@@@@@@@@@@ .@@@@@@@@@  @@@@@@/@@@@&&&&
&&&&&@@@@/@@@//@@( @@@@@@@@@@@ . @@@@@@@@@@@@  @@@@@@@@@@@@@@@@@@@@@@@@  .@@@@@@@@@@@@@@@@@@@#@@@&&&
&&&&@@@@/@@@/#@@# @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ /@@@@ @@@&@@@@@@@@&#@@@@@@@@@@ @@@@@@@@@@&@@@&&
&&&&@@@,@@@/@@@@.&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@/ @@  @@@@@@@@@@@@@@@@@@ @@@@@@@@(@@*@@@@&
&&&@@@,@@@/*@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@..@@@@@@@@ @@@@@@@@@@@@@@@ @@@@ @  @@@@@@@*(@@,@@@&
&&&@@@*@@@*@@@/@@@@@@@@@@@@@@  @ @@@@@@@@@@@@@@@@@ @@@@@@@ &@ # @@@@@  @@/ @@ @@@@@@@@@@@@@@/%@@@@@@
&&@@@,@@@(@@@@@@@@@@@@@@@@@@  @% @@@@@@@@@@@@@@@@@@&       @@@ @@@&@@  %@@@@@@@@@@@@@@@@@@@@@(@@,@@@
&&&@@,@@&#@@@@@@@   % *@@@@  @@ @@@@@@@@@@@@@@@@@@@@@@@ @ @@@   #@@@@@@@@@@@@@@@@@@@@@@@..@@@(&@,@@@
&&@@@,@@#@@@@@@@ @@@@. @@@@  @ @@@@@@@@@@@@@@@@@ @@@@ @@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@/.@@@(#@,@@@
&&&@@,@@#@@@@@@@@@@@@ &@@@.  .@@@@@@@@@@@@@  @@# @ @ @ /@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@&.@@@(#@,@@@
&&@@@,@@%/@@@@@@@@@@@ @@@@  @@@@@@@@  @ @@@ @@%%@@@@@@@@@@@@@@@@@@@@@@@@  @@ @@@@*.@@@@@,.@@@(@@,@@@
&&&@@@%@@(@@@@@@@@@@,    @ @@@@@@@  @@&&@@@#.@@@@@@@@@@@@@@@@@@@*       ,@& @@@@@.@@@@@@.@@@@#@@(@@@
&&&@@@,@@@@@@@@@  (@ @@@@ @@@@@@@( @@ @@@@@@@@@@@@@@@@@@@@@%.@@@@  ,@@@@@ (@@@@%.@@@@@@.@@@@(@@,@@@@
&&&@@@@,@@@@@@@ @@@  @@@@ @@@@@@@@&@@@@@@@@@@@@@@@@@@@@@@@@@@@. .@@@,.  @@@@@@..@@@@@@.(@@@/%@@@@@@&
&&&&@@@&@@@@@@@ &@@ @@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@(..@@@@@@@@.(@@@/&@@,@@@&&
&&&&&@@@/@@@@@@@   @@@@@@ @@@@@@@@@@@@@@@@@@@@  @@@@  @@@@@@@@@@@@@@@@..,@@@@@@@@@@@.@@@@/@@@,@@@&&&
&&&&&&@@@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@@@@   @@@@    @@@@@@@@@@@@@@@@@@@@@@@@@@..@@@*/@@@,@@@&&&&
&&&&&&&@@@@,@@@@@@@@@@@@  @@@@@@@@#@@@@@@@@.  @ @@@@      @@@@@@@@@@@@@@@@@@@@@@..@@@@*@@@*@@@@&&&&&
&&&&&&&&@@@@,@@@@@@@@@@@@ @@@@@@@@& @@@@@@.  %.*@@@@.     @@@@@@@@.      @@@@@*.@@@#*%@@@,@@@@&&&&&&
&&&&&&&&&&@@@@,@@@@@@@@@@@ &@@@@@@@@@@. &@@@@@@@@&@@@.. @@@@@@#.  %,  . @@@@. @@@,*@@@@,@@@@&&&&&&&&
&&&&&&&&&&&@@@@@,@@@@@@@@@@@@@@@@@@@@@@@@    @@&   @@@@@%   %@@@@@@%  @@@ .@@@@,/@@@@,@@@@@&&&&&&&&&
&&&&&&&&&&&&&@@@@@,%@@@@@@@@@@@@@@(@.  ,@@@@@@@@@@@@@@@@@@@@   #@@. @@%.@@@@,*@@@@@,@@@@@&&&&&&&&&&&
&&&&&&&&&&&&&&&&@@@@@,@@@@@@@@@@( @@.@@@@@.    .......... .@@@.@@. ,@.(@@,*@@@@@,@@@@@&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&@@@@@@,/@@@%@@*#@@.@@@@..@@@@.#@@@@ @@@@.@@@.@@  @@*@@#%@@@,@@@@@@&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&@@@@@@@,,@@@@@@(@@@@,#@@@@.#@@@@,@@@,@@@**@@/#@%&@@#,@@@@@@@&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@,,@@&&&%%@@@@@(@@@@(#@%((@@@%@@@@@,,@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@&,,,,%@@@@@@&@@@&*,,,%@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&]
................................................................................
................................................................................
-->