only 60 dots, to match normal clocks; colours change through the day and support dark mode

style.css

@@ -2,4 +2,60 @@
   --spacing: 1em;
 
   color-scheme: light dark;
+
+  --bg-hue: 210;
+  --bg-lum: 60%;
+
+  --hand-hue: calc(180 + var(--bg-hue));
+  --big-hand-lum: 15%;
+  --small-hand-lum: 50%;
+  --dots-lum: 90%;
+}
+
+a {
+  filter: saturate(0%);
+  font-family: sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-lum: 20%;
+    --big-hand-lum: 90%;
+    --small-hand-lum:60%;
+    --dots-lum: 15%;
+  }
+}
+
+body {
+  margin: 0;
+  background: hsl(var(--bg-hue),60%,var(--bg-lum));
+  display: grid;
+  justify-items: center;
+  grid-template: 1fr auto / 1fr;
+  height: 100svh;
+  overflow: hidden;
+}
+
+#board {
+    width: 100%;
+    height: 100%;
+}
+main {
+    height: 100%;
+}
+
+path {
+  stroke: hsl(var(--hand-hue),50%,var(--lum));
+}
+
+#big-hand {
+  --lum: var(--big-hand-lum);
+}
+
+#small-hand {
+  --lum: var(--small-hand-lum);
+}
+
+#dots {
+  --lum: var(--dots-lum);
 }