:root {
  --bg-color: linear-gradient(158.53deg, #eef0f5 14.11%, #e2e4ea 85.89%);
  --clock-bg: linear-gradient(134.17deg, #e6e9ef 4.98%, #e6e9ef 4.99%, #eef0f5 94.88%);
  --clock-border: linear-gradient(170deg, #ffffff, #bac3cf);
  --clock-shadow: 19px 25px 92px -32px rgba(166, 180, 200, 0.45), -20px -20px 61px rgba(255, 255, 255, 0.53),
    13px 14px 12px -6px rgba(166, 180, 200, 0.57);
  --clock-inner-bg: linear-gradient(90deg, #eceef3 0%, #f1f2f7 100%);
  --clock-inner-shadow: inset -12px -12px 30px rgba(255, 255, 255, 0.2), inset 7px 7px 8px rgba(166, 180, 200, 0.52),
    inset 10px 11px 30px -1px rgba(166, 180, 200, 0.71);
  --hand-color: #646e82;
  --second-hand-color: #fd382d;
}
/* css 用于自动识别暗色模式  */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: linear-gradient(158.53deg, #363e46 14.11%, #2c343c 85.89%);
    --clock-bg: linear-gradient(134.17deg, #3e464f 4.99%, #424a53 94.88%);
    --clock-border: linear-gradient(170deg, #5d666d, #232a30);
    --clock-shadow: 19px 25px 92px -32px rgba(35, 40, 45, 0.35), -20px -20px 61px rgba(72, 83, 92, 0.25),
      13px 14px 12px -6px rgba(35, 40, 45, 0.5);
    --clock-inner-bg: linear-gradient(248.53deg, #363e46 -12.81%, #2c343c 305.95%);
    --clock-inner-shadow: inset -12px -12px 30px rgba(72, 83, 92, 0.3), inset 7px 7px 8px rgba(35, 40, 45, 0.25),
      inset 10px 11px 30px -1px rgba(35, 40, 45, 0.5);
    --hand-color: #8e98a1;
  }
}
* {
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: var(--clock-bg);
}

.clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: var(--clock-bg);
  box-shadow: var(--clock-shadow);
  position: relative;
}
/* 利用伪元素和padding实现border渐变效果 */
.clock::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 1px;
  border-radius: 50%;
  z-index: -1;
  background-image: var(--clock-border);
}

.inner-circle {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: var(--clock-inner-bg);
  box-shadow: var(--clock-inner-shadow);
}

/* 表盘刻度 使用最少的元素实现四个刻度 */
.inner-circle::before,
.inner-circle::after {
  content: '';
  border-radius: 2px;
  background-color: rgba(166, 180, 200, 0.57);
  position: absolute;
}

.inner-circle::before {
  width: 2px;
  height: 10px;
  top: 4px;
  left: calc(50% - 1px);
  box-shadow: 0 152px rgba(166, 180, 200, 0.57);
}

.inner-circle::after {
  width: 10px;
  height: 2px;
  left: 4px;
  top: calc(50% - 1px);
  box-shadow: 152px 0 rgba(166, 180, 200, 0.57);
}

/* 表盘指针 */
.hands {
  width: 170px;
  height: 170px;
  position: relative;
}

.dots {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--hand-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dots::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--second-hand-color);
}

.hand {
  width: 3px;
  height: var(--hand-length);
  background-color: var(--hand-color);
  position: absolute;
  border-radius: 3px;
  left: calc(50% - 1.5px);
  top: var(--top);
  z-index: -1;
  transform-origin: center var(--origin-y);
}

.hour-hand {
  --hand-length: 60px;
  --top: 40px;
  --origin-y: 45px;
}

.minute-hand {
  --hand-length: 80px;
  --top: 24px;
  --origin-y: 61px;
}

.second-hand {
  --hand-length: 100px;
  --top: 15px;
  --origin-y: 70px;
  width: 2px;
  left: calc(50% - 1px);
  background-color: var(--second-hand-color);
  position: relative;
  z-index: 1;
}

.second-hand::after {
  content: '';
  width: 4px;
  height: 22px;
  background-color: var(--second-hand-color);
  position: absolute;
  bottom: -2px;
  border-radius: 2px;
  left: calc(50% - 2px);
}
