This is my simplest stopwatch to date. Using just one @keframes and simpe CSS maths round() and mod().

This is a 24 hour stopwatch, but if you cannot wait that long I have added an extra function that will make the stopwatch run at 400 times speed. This will get to 24 hours in 216 seconds.

The normal speed @keframes is:
#stopwatch:has(#speed:not(:checked) {--speeding:86400s;}

The 400x speed the same @keframes switches to:
#stopwatch:has(#speed:not(:checked) {--speeding:216s;}

The maths is just CSS, using round() for division and mod() to find the remainder after the division.

This way we can divide the current @keframes var(--speeding) into hours, minutes and seconds.