body {
  background-color: #e6d9ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

.clock {
  width: 260px;
  height: 260px;
  border: 8px solid white;
  border-radius: 50%;
  background: #f9f6ff;
  position: relative;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom;
  transform: translateX(-50%);
}

.hour {
  width: 6px;
  height: 60px;
  background: #6a5acd;
}

.minute {
  width: 4px;
  height: 90px;
  background: #6a5acd;
}

.second {
  width: 2px;
  height: 110px;
  background: #ff6b81;
}

.center-dot {
  width: 12px;
  height: 12px;
  background: #6a5acd;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Numbers */
.number {
  position: absolute;
  font-size: 18px;
  font-weight: bold;
  color: #6a5acd;
}

.n12 { top: 10px; left: 50%; transform: translateX(-50%); }
.n1  { top: 30px; right: 65px; }
.n2  { top: 65px; right: 30px; }
.n3  { top: 50%; right: 10px; transform: translateY(-50%); }
.n4  { bottom: 65px; right: 30px; }
.n5  { bottom: 30px; right: 65px; }
.n6  { bottom: 10px; left: 50%; transform: translateX(-50%); }
.n7  { bottom: 30px; left: 65px; }
.n8  { bottom: 65px; left: 30px; }
.n9  { top: 50%; left: 10px; transform: translateY(-50%); }
.n10 { top: 65px; left: 30px; }
.n11 { top: 30px; left: 65px; }

.digital {
  margin-top: 18px;
  font-size: 32px;
  font-weight: bold;
  color: #000;
}