Merge analog clock into index and add fullscreen toggle

style.css

@@ -355,9 +355,114 @@
       }
     }
 
-    .eonstrip-grid {
-      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-      transform: translateX(0);
-      transition: transform 0.3s ease;
-      will-change: transform;
-    }
+.eonstrip-grid {
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  transform: translateX(0);
+  transition: transform 0.3s ease;
+  will-change: transform;
+}
+
+/* Layout combining current time and analog clock */
+.time-display {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.analog-clock-container {
+  flex: 0 0 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#clock {
+  position: relative;
+  width: 40vmin;
+  height: 40vmin;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  background: radial-gradient(circle at center, #0a0e27 0%, #1a1f3a 100%);
+  box-shadow: 0 0 25px rgba(0, 255, 255, 0.2), inset 0 0 40px rgba(255, 0, 255, 0.2);
+}
+
+#clock::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1.2em;
+  height: 1.2em;
+  transform: translate(-50%, -50%);
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
+}
+
+.marker {
+  position: absolute;
+  width: 2em;
+  height: 2em;
+  text-align: center;
+  line-height: 2em;
+  font-family: 'Courier New', monospace;
+  font-size: 1.1em;
+  color: #ffffff;
+  text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
+  transform: translate(-50%, -50%);
+}
+
+.hand {
+  position: absolute;
+  bottom: 50%;
+  left: 50%;
+  transform-origin: bottom;
+  transition: transform 0.5s ease-in-out;
+  border-radius: 2px;
+}
+
+.hand.xeno {
+  width: 4px;
+  height: 40%;
+  background: #00ffff;
+  box-shadow: 0 0 6px #00ffff;
+}
+
+.hand.quantic {
+  width: 3px;
+  height: 35%;
+  background: #ff00ff;
+  box-shadow: 0 0 6px #ff00ff;
+}
+
+.hand.chronon {
+  width: 2px;
+  height: 30%;
+  background: #ffff00;
+  box-shadow: 0 0 6px #ffff00;
+}
+
+body.fullscreen-clock .header,
+body.fullscreen-clock .current-time,
+body.fullscreen-clock .timezone-selector,
+body.fullscreen-clock .calendar-controls,
+body.fullscreen-clock .calendar-view,
+body.fullscreen-clock .time-details,
+body.fullscreen-clock .explanations {
+  display: none;
+}
+
+body.fullscreen-clock .time-display {
+  position: fixed;
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+body.fullscreen-clock #clock {
+  width: 80vmin;
+  height: 80vmin;
+}