зроби щоб тут цифри 3 у першому і другому стовпчику були чорними а не синіми, а решта залиш як є вони мають стати білими, як і є у ьцому коді. більше нечого не міняй.   і пиши повний код.   <!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Ізольована SVG-анімація</title> 
    <style>
        .animation-container-1 { 
            width: 100%; 
            margin: 0;
        }
        svg {
            width: 100%;
            height: auto;
        }
        .column-label {
            font-size: 50px; /* Розмір шрифту 50 */
            fill: white;
            text-anchor: middle;
        }
        .time-label {
            fill: black;
            text-anchor: middle; 
            font-weight: bold;
            font-size: 50px; /* Розмір шрифту 50 */
        }
        .blue-text {
            fill: blue;
        }
        .bright-blue-text {
            fill: #00BFFF; /* Яскравий блакитний колір */
        }
        .hidden {
            visibility: hidden;
        }
        #start-button-animation1 {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="animation-container-1" class="animation-container-1">
        <svg id="my-svg" viewBox="0 0 800 370" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <filter id="glow">
                    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
                    <feMerge>
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                </filter>
                <!-- Налаштований градієнт з плавними переходами -->
                <linearGradient id="columnGradient" x1="0" y1="164" x2="0" y2="2" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stop-color="#7CFC00" />
                    <stop offset="30%" stop-color="#7CFC00" />
                    <stop offset="45%" stop-color="yellow" />
                    <stop offset="55%" stop-color="yellow" />
                    <stop offset="70%" stop-color="red" />
                    <stop offset="100%" stop-color="red" />
                </linearGradient>
            </defs>

            <!-- Фоновий прямокутник -->
            <rect width="800" height="370" fill="#1a1a2e"/> 

            <!-- Перший стовпчик з анімацією заповнення -->
            <g id="column1">
                <!-- Заповнення з градієнтом -->
                <rect id="column1-fill" x="2" y="164" width="50" height="0" fill="url(#columnGradient)"></rect>
                <!-- Контур стовпчика -->
                <rect x="2" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
                <!-- Цифра "3" блакитного кольору -->
                <text id="column1-text" x="27" y="80" class="column-label blue-text">3</text>
                <!-- Цифра "4", яка з'явиться пізніше -->
                <text id="column1-text-4" x="27" y="130" class="column-label bright-blue-text hidden">4</text>
                <text x="27" y="180" class="column-label">1</text>
            </g>

            <!-- Другий стовпчик -->
            <g id="column2">
                <rect x="107" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
                <!-- Цифра "3" блакитного кольору -->
                <text id="column2-text" x="132" y="80" class="column-label blue-text">3</text>
                <!-- Цифра "4", яка з'явиться пізніше -->
                <text id="column2-text-4" x="132" y="130" class="column-label bright-blue-text hidden">4</text>
                <text x="132" y="180" class="column-label">2</text>
            </g>

            <!-- Третій стовпчик -->
            <g id="column3">
                <rect x="212" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
                <!-- Ваші попередні елементи -->
                <text x="237" y="180" class="column-label" fill="black">3</text>
                <text x="237" y="200" class="column-label" fill="white">4</text>
            </g>

            <!-- Інші стовпчики -->
            <!-- ... решта коду стовпчиків ... -->

            <!-- Управління та елементи інтерфейсу -->
            <!-- ... ваш код управління ... -->
            <g class="controls" transform="translate(400, 323.6)"> 
                <!-- Ваші круглі кнопки -->
                <!-- ... -->

                <g transform="translate(-86, -22)"> 
                    <!-- Кнопка "START" з ID -->
                    <g id="start-button-animation1">
                        <rect x="-125" y="26" width="250" height="40" fill="#a62020" stroke="#01FEFE" stroke-width="2" rx="5" ry="5"/> 
                        <text x="-110" y="51" text-anchor="start" dominant-baseline="middle" fill="#01FEFE" font-size="34" stroke="#01FEFE" stroke-width="2" font-family="Haettenschweiler">START</text>
                    </g>
                    <!-- Таймер -->
                    <rect x="0" y="26" width="120" height="40" fill="none" rx="5" ry="5"/>
                    <text id="timer-animation1" x="10" y="51" text-anchor="start" alignment-baseline="middle" fill="#01FEFE" font-size="40" font-weight="bold" dominant-baseline="middle" font-family="Haettenschweiler">-05:00</text> 
                </g>
            </g>
        </svg>
    </div> 

    <script>
    (function() {
        // Отримуємо SVG-елемент
        const svg = document.getElementById('my-svg');
        let timerInterval;
        let startTime;
        let animationInProgress = false;

        function startAnimation() {
            if (animationInProgress) {
                resetAnimation();
                return;
            }
            animationInProgress = true;

            startTime = Date.now();
            clearInterval(timerInterval);
            timerInterval = setInterval(updateTimer, 10);

            // Запуск анімації заповнення стовпчика 1 з затримкою 5 секунд
            setTimeout(animateColumn1, 5000); 

            // Зміна кольору "3" у стовпчику 1 та поява "4" через 8 секунд
            setTimeout(function() {
                const column1Text = svg.getElementById('column1-text');
                if (column1Text) {
                    column1Text.classList.remove('blue-text');
                    column1Text.setAttribute('fill', 'black');
                }

                const column1Text4 = svg.getElementById('column1-text-4');
                if (column1Text4) {
                    column1Text4.classList.remove('hidden');
                }
            }, 8000);

            // Зміна кольору "3" у стовпчику 2 та поява "4" через 8 секунд
            setTimeout(function() {
                const column2Text = svg.getElementById('column2-text');
                if (column2Text) {
                    column2Text.classList.remove('blue-text');
                    column2Text.setAttribute('fill', 'black');
                }

                const column2Text4 = svg.getElementById('column2-text-4');
                if (column2Text4) {
                    column2Text4.classList.remove('hidden');
                }
            }, 8000);

            // Додаткові анімації, якщо потрібно
        }

        function resetAnimation() {
            animationInProgress = false;
            clearInterval(timerInterval);
            svg.getElementById('timer-animation1').textContent = '-05:00'; 

            // Скидання заповнення стовпчика 1
            let column1Fill = svg.getElementById('column1-fill');
            if (column1Fill) {
                column1Fill.setAttribute('y', '164');
                column1Fill.setAttribute('height', '0');
            }

            // Скидання кольору "3" у стовпчику 1 на блакитний
            const column1Text = svg.getElementById('column1-text');
            if (column1Text) {
                column1Text.classList.add('blue-text');
                column1Text.setAttribute('fill', 'blue');
            }

            // Приховуємо "4" у стовпчику 1
            const column1Text4 = svg.getElementById('column1-text-4');
            if (column1Text4) {
                column1Text4.classList.add('hidden');
            }

            // Скидання кольору "3" у стовпчику 2 на блакитний
            const column2Text = svg.getElementById('column2-text');
            if (column2Text) {
                column2Text.classList.add('blue-text');
                column2Text.setAttribute('fill', 'blue');
            }

            // Приховуємо "4" у стовпчику 2
            const column2Text4 = svg.getElementById('column2-text-4');
            if (column2Text4) {
                column2Text4.classList.add('hidden');
            }

            // Скидання інших анімацій, якщо потрібно
        }

        function updateTimer() {
            const currentTime = Date.now();
            const elapsedTime = (currentTime - startTime) / 1000 - 5;
            
            if (elapsedTime >= 10.00) { 
                clearInterval(timerInterval);
                svg.getElementById('timer-animation1').textContent = '10:00'; 
            } else {
                const seconds = Math.floor(elapsedTime);
                const centiseconds = Math.floor((elapsedTime - seconds) * 100);
                const formattedSeconds = seconds < 0 ? `-${Math.abs(seconds).toString().padStart(2, '0')}` : seconds.toString().padStart(2, '0');
                svg.getElementById('timer-animation1').textContent = 
                    `${formattedSeconds}:${centiseconds.toString().padStart(2, '0')}`;
            }
        }

        function animateColumn1() {
            const duration = 3000; // 3 секунди
            const startTimeAnimation = Date.now();
            const column1Fill = svg.getElementById('column1-fill');
            const totalHeight = 162;
            const startY = 164;

            function animate() {
                const currentTime = Date.now();
                const elapsed = currentTime - startTimeAnimation;
                const progress = Math.min(elapsed / duration, 1); // Значення від 0 до 1

                // Розрахунок нової висоти та позиції 'y'
                const newHeight = totalHeight * progress;
                const newY = startY - newHeight;

                column1Fill.setAttribute('height', newHeight);
                column1Fill.setAttribute('y', newY);

                if (progress < 1) {
                    requestAnimationFrame(animate);
                }
            }

            animate();
        }

        // Додаємо обробник події для кнопки "START"
        svg.getElementById('start-button-animation1').addEventListener('click', startAnimation); 
    })();
    </script>
</body>
</html>