body {
  font-family: Consolas, Monaco, 'Lucida Console', monospace;
  font-variant: small-caps;
  background: #eee;
  margin: 0;
  padding: 0;
}

.desc {
  font-size: medium;
  font-weight: 200;
  color: #bbb;
  margin-top: 0;
  margin-bottom: 40px;
}

.clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px auto;
}

.clock {
  width: 400px;
  height: 400px;
  position: relative;
}

.clock-face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #eee;
  position: relative;
  border: 4px solid #666;
}

.marker {
  position: absolute;
  width: 8px;
  height: 16px;
  background: #555;
  top: 50%;
  left: 50%;
  margin-left: -4px;
  margin-top: -8px;
  transform-origin: center center;
  transform: 
    rotate(calc(var(--position) * 30deg))
    translateY(-180px);
}

.hour-hand {
  position: absolute;
  width: 8px;
  height: 150px;
  background: #444;
  top: 50%;
  left: 50%;
  margin-left: -4px;
  margin-top: -150px;
  transform-origin: bottom center;
  border-radius: 0px;
}

.minute-hand {
  position: absolute;
  width: 4px;
  height: 170px;
  background: #444;
  top: 50%;
  left: 50%;
  margin-left: -2px;
  margin-top: -170px;
  transform-origin: bottom center;
  border-radius: 2px;
}

.second-hand {
  position: absolute;
  width: 2px;
  height: 180px;
  background: #666;
  top: 50%;
  left: 50%;
  margin-left: -1px;
  margin-top: -180px;
  transform-origin: bottom center;
  border-radius: 1px;
  display: none; /* Показываем только если секунды != 0 */
}

.labels {
  margin-top: 48px;
  text-align: center;
}

.label {
  font-size: x-large;
  font-weight: 400;
  color: #555;
  margin: 10px 0;
}

.label.delta {
  font-size: xx-large;
  font-weight: 800;
  color: #555;
}

.label.delta.red {
  color: #ff0000;
}

.label.delta.green {
  color: #00cc00;
}