* { margin:0; padding:0; box-sizing:border-box; }
body {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  font-family: 'Bitcount Grid Single', sans-serif;
  background:#f8f8f8;
  color:#222;
  transition:0.5s;
}
body.dark { background:#111; color:#eee; }

.clock-container { display:flex; flex-direction:column; align-items:center; gap:20px; }
.clock {
  position: relative;
  width: min(90vw, 500px);  /* bigger dial */
  height: min(90vw, 500px);
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  overflow: visible;
  transition: 0.5s;
}

body.dark .clock {
  background: #222;
  border-color: #555;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.hand {
  position:absolute; left:50%; bottom:50%;
  transform-origin:50% 100%;
  border-radius:10px;
}

.hand.hour { width:10px; height:100px; background:linear-gradient(to top,#4A90E2,#4A90E2); clip-path:polygon(0%0%,100%0%,70%100%,30%100%);}
.hand.minute { width:8px; height:140px; background:linear-gradient(to top,#34C759,#34C759); clip-path:polygon(0%0%,100%0%,70%100%,30%100%);}
.hand.second { width:4px; height:180px; background:linear-gradient(to top,#ff3b30,#ff3b30); clip-path:polygon(0%0%,100%0%,60%100%,40%100%);}

.center-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #000; /* outer dot default black */
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.5s;
}

body.dark .center-dot {
  background: #fff; /* outer dot white in dark mode */
  box-shadow: 0 0 4px rgba(255,255,255,0.3);
}

/* Inner dot */
.center-dot::after {
  content: '';
  width: 8px;  /* smaller than outer dot */
  height: 8px;
  border-radius: 50%;
  background: #fff; /* opposite color of outer dot in default */
  transition: background 0.5s;
}

body.dark .center-dot::after {
  background: #000; /* opposite color in dark mode */
}


.marks { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.mark { position:absolute; left:50%; top:50%; transform-origin:center; background:#333; border-radius:2px; }
.number {
  position: absolute;
  transform-origin: center;
  font-weight: 500;
  user-select: none;
  text-align: center;
  pointer-events: none;
  color: #111; /* black in light mode */
}

body.dark .number {
  color: #eee; /* light text in dark mode */
  background: transparent; /* ensure no white box */
}

body.dark .mark {
  background: #eee; /* light tick marks */
}

.date { margin-top:10px; font-size:1.1rem; color:#555; }
body.dark .date { color:#ccc; }