Styling I understand but to tick the clock when time actually has changed you need to use animation frames APIs and check for clock change more often than "every 1000 ms" because setTimeout will eventually drift even if you start exactly on first second time change. This is a test for depth of knowledge of a programmer I used to use in the past in interviews.

This is platform-specific, right? Chromium corrects for drift (https://source.chromium.org/chromium/chromium/src/+/main:thi...)

I wish that was true but you can easily see it drifting in Chrome

        let lastms 
        function tick() {
            if (lastms === undefined)
                lastms = new Date().getMilliseconds()
            else if (lastms !== new Date().getMilliseconds()) 
                throw new Error('Drifted')
        }
        setInterval(tick, 1000)

It's only drift if the error grows over time. You need to look at the sum of the offsets.

I always considered subjecting humans to CSS to be a form of torture. Actually, it's worse than you said. Imagine if you had to do this, without knowing what a clock looks like.

Here is the fix for the "GPT-2" version:

    .hand {
      top: 48.5%;
    }

    .hour-hand {
      left: 20%;
    }

    .minute-hand {
      left: 10%;
    }

    .second-hand {
        left: 5%;
    }