What is the exact time right now?

<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #ffffff;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center; /* Center vertically for demo purposes */
        min-height: 100vh;
        margin: 0;
        padding: 20px;
    }

    /* The specific Quick Answer Box styling requested */
    .quick-answer-box {
        background-color: #f0f8ff;
        padding: 20px; /* Increased slightly for inner spacing */
        border-radius: 8px;
        border: 1px solid #dbeafe; /* Optional: adds a subtle border match */
        max-width: 700px;
        width: 100%;
        margin-bottom: 20px;
    }

    .answer-intro {
        margin-bottom: 15px;
        font-size: 1.1rem;
    }

    /* --- Clock Widget Styles (Adapted to fit inside the box) --- */
    .clock-container {
        display: flex;
        gap: 20px;
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Softer shadow */
        justify-content: space-around;
        margin-top: 10px;
    }

    .clock-box {
        text-align: center;
        flex: 1;
    }

    .clock-box h2 {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #666;
        margin: 0 0 5px 0;
    }

    .time {
        font-size: 2.5rem; /* Adjusted to fit text flow */
        font-weight: bold;
        color: #2c3e50;
        font-variant-numeric: tabular-nums;
        line-height: 1.2;
    }

    .date {
        font-size: 0.85rem;
        color: #888;
    }

    .divider {
        width: 1px;
        background-color: #eee;
    }

    /* --- Explanatory Text Below --- */
    .content-wrapper {
        max-width: 700px;
        width: 100%;
    }

    p {
        line-height: 1.6;
        margin-bottom: 15px;
        color: #444;
    }

    @media (max-width: 600px) {
        .clock-container { flex-direction: column; gap: 20px; }
        .divider { width: 100%; height: 1px; }
        .time { font-size: 2rem; }
    }
</style>


    <!-- The Quick Answer Container -->
    <div class="quick-answer-box">
        <div class="answer-intro">
            <strong>Quick Answer:</strong> The exact time right now is displayed below. The left clock shows <strong>Coordinated Universal Time (UTC)</strong>, the global standard.
        </div>

        <!-- The JS Clock Widget -->
        <div class="clock-container">
            <!-- UTC Section -->
            <div class="clock-box">
                <h2>UTC Time</h2>
                <div id="utc-time" class="time">00:00:00</div>
                <div id="utc-date" class="date">Loading...</div>
            </div>

            <div class="divider"></div>

            <!-- Local Section -->
            <div class="clock-box">
                <h2>Your Local Time</h2>
                <div id="local-time" class="time">00:00:00</div>
                <div id="local-date" class="date">Loading...</div>
            </div>
        </div>
    </div>

    <!-- Explanatory Text -->
    <p>Time is measured against UTC to keep things consistent worldwide. Your local time depends on your time zone offset from UTC.</p>

    <p>Devices often sync with atomic clocks via the internet to provide accurate time. Websites like Time.Now show this exact time updated every second.</p>

</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const utcTimeEl = document.getElementById('utc-time');
        const utcDateEl = document.getElementById('utc-date');
        const localTimeEl = document.getElementById('local-time');
        const localDateEl = document.getElementById('local-date');

        // 1. UTC Formatter
        // Using ISO format logic for the date to match technical standards usually preferred in UTC contexts
        const formatTimeUTC = new Intl.DateTimeFormat('en-US', {
            timeZone: 'UTC',
            hour: '2-digit', minute: '2-digit', second: '2-digit',
            hour12: false
        });
        const formatDateUTC = new Intl.DateTimeFormat('en-GB', { // GB puts day first, or use ISO-like structure
            timeZone: 'UTC',
            year: 'numeric', month: '2-digit', day: '2-digit'
        });

        // 2. Local Formatter
        const formatTimeLocal = new Intl.DateTimeFormat('en-US', {
            hour: '2-digit', minute: '2-digit', second: '2-digit',
            hour12: false
        });
        const formatDateLocal = new Intl.DateTimeFormat('en-US', {
            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
        });

        function updateClocks() {
            const now = new Date();

            // Update UTC (Formatted like 2024-06-03 for consistency with your prompt)
            const isoDate = now.toISOString().split('T')[0]; // Quick way to get YYYY-MM-DD in UTC
            utcTimeEl.textContent = formatTimeUTC.format(now);
            utcDateEl.textContent = isoDate;

            // Update Local
            localTimeEl.textContent = formatTimeLocal.format(now);
            localDateEl.textContent = formatDateLocal.format(now);
        }

        // --- Synchronization Logic ---
        function startPrecisionTicker() {
            updateClocks();

            const now = new Date();
            const delay = 1000 - now.getMilliseconds();

            setTimeout(() => {
                updateClocks();
                setInterval(updateClocks, 1000);
            }, delay);
        }

        startPrecisionTicker();
    });
</script>