clock- {
  display: block;
  position: relative;
  aspect-ratio: 1;
}
clock- *::before,
clock- *::after,
clock- * {
  position: absolute;
  inset: 0;
}



clock- bezel      { inset:  4% }
clock- week       { inset:  6% }
clock- week hand  { inset: -1% }
clock- sun        { inset:  6% }
clock- face       { inset: 11% }
clock- face index { inset:  2% }
clock- hour       { inset: 18% }

clock- sun hand:first-child::before,
clock- face index,
clock- hour>hand>hand,
clock->* {
  border-radius: 50%;
  overflow: hidden;
}
clock- bezel {
  box-shadow:
    0 0 2vmin
  ;
}
clock- sun hand:first-child::before,
clock- face {
  box-shadow:
    0 0 2vmin,
    0 0 2vmin,
    0 0 2vmin
  ;
}
clock- hour>hand>hand {
  box-shadow:
    0 0 2vmin
    inset
  ;
}

clock- face index:nth-child(2) { transform: rotate(.25turn) }
clock- face index:nth-child(3) { transform: rotate(.50turn) }
clock- face index:nth-child(4) { transform: rotate(.75turn) }



clock- hand::before {
  content: "";
  display: block;
}

clock- week hand {
  height: 1020%;
}

clock- hour>hand>hand {
  left: 30%;
  right: 30%;
  top: 60%;
  height: 40%;
}
clock- hour>hand>hand>hand:first-child {
  height: 5000%;
}

clock- sun   hand:first-child::before  { inset: 92% 46.5%  1% }
clock- sun   hand:nth-child(2)::before { inset: -1% }
clock- sun   hand:nth-child(3)::before { inset: -1% }
clock- hands hand:nth-child(1)::before { inset: 28% 48.0% 48% }
clock- hands hand:nth-child(2)::before { inset: 16% 49.0% 48% }
clock- hands hand:nth-child(3)::before { inset: 13% 49.5% 82% }

clock- hands hand::before {
  border-radius: 9999px;
}



clock- hand {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: calc(7*2*12*60*60s);
}

clock- sun   hand:first-child  { animation-name: hand_d }
clock- hands hand:nth-child(1) { animation-name: hand_h }
clock- hands hand:nth-child(2) { animation-name: hand_m }
clock- hands hand:nth-child(3) { animation-name: hand_s }
@keyframes hand_d { to { transform: rotate(calc(7*        1turn)) } }
@keyframes hand_h { to { transform: rotate(calc(7*2*      1turn)) } }
@keyframes hand_m { to { transform: rotate(calc(7*2*12*   1turn)) } }
@keyframes hand_s { to { transform: rotate(calc(7*2*12*60*1turn)) } }

clock- sun hand:nth-child(2),
clock- sun hand:nth-child(3) {
  animation-name: hand_l;
  animation-duration: calc(1*2*12*60*60s);
  animation-play-state: paused;
}
@keyframes hand_l { to { transform: rotate(1turn) } }

clock- week hand {
  animation-name: hand_w;
  animation-timing-function: steps(7, end);
}
@keyframes hand_w { to { top: -714% } }

clock- hour hand {
  animation-duration: calc(1*2*12*60*60s);
}
clock- hour>hand           { animation-name: hour_position1 }
clock- hour>hand>hand      { animation-name: hour_position2 }
@keyframes hour_position1 { to { transform: rotate(calc(13*1turn)) } }
@keyframes hour_position2 {
    0.000% { top: 60%; transform: rotate(0) }
    2.271% { top: 60% }
    2.272% { top:  0% }
    6.817% { top:  0% }
    6.818% { top: 60% }
   11.362% { top: 60% }
   11.363% { top:  0% }
   15.908% { top:  0% }
   15.909% { top: 60% }
   20.453% { top: 60% }
   20.454% { top:  0% }
   24.998% { top:  0% }
   24.999% { top: 60% }
   29.544% { top: 60% }
   29.545% { top:  0% }
   34.089% { top:  0% }
   34.090% { top: 60% }
   38.635% { top: 60% }
   38.636% { top:  0% }
   43.180% { top:  0% }
   43.181% { top: 60% }
   47.726% { top: 60% }
   47.727% { top:  0% }
   52.271% { top:  0% }
   52.272% { top: 60% }
   56.817% { top: 60% }
   56.818% { top:  0% }
   61.362% { top:  0% }
   61.363% { top: 60% }
   65.908% { top: 60% }
   65.909% { top:  0% }
   70.453% { top:  0% }
   70.454% { top: 60% }
   74.998% { top: 60% }
   74.999% { top:  0% }
   79.544% { top:  0% }
   79.545% { top: 60% }
   84.089% { top: 60% }
   84.090% { top:  0% }
   88.635% { top:  0% }
   88.636% { top: 60% }
   93.180% { top: 60% }
   93.181% { top:  0% }
   97.726% { top:  0% }
   97.727% { top: 60% }
  100.000% { top: 60%; transform: rotate(calc(13*-1turn)) }
}
clock- hour>hand>hand>hand:first-child {
  animation-name: hour_position3;
  animation-timing-function: steps(24, end);
}
@keyframes hour_position3 { to { top: -2400% } }



clock- week hand::before {
  background-image:
    linear-gradient(
      hsl(270, 90%, 40%) 10%,
      hsl(350, 90%, 40%) 10%,
      hsl(350, 90%, 40%) 20%,
      hsl(220, 90%, 40%) 20%,
      hsl(220, 90%, 40%) 30%,
      hsl(120, 90%, 30%) 30%,
      hsl(120, 90%, 30%) 40%,
      hsl( 60, 90%, 30%) 40%,
      hsl( 60, 90%, 30%) 50%,
      hsl(  0,  0%, 25%) 50%,
      hsl(  0,  0%, 25%) 60%,
      hsl(  0,  0%, 60%) 60%
    )
  ;
}

clock- sun hand:nth-child(2)::before {
  background-image:
    conic-gradient(
      #0000 .2turn,
      #000c .5turn,
      #0000 .5turn,
      #0000 .8turn
    )
  ;
}
clock- sun hand:nth-child(3)::before {
  background-image:
    conic-gradient(
      #0000 .2turn,
      #0000 .5turn,
      #000c .5turn,
      #0000 .8turn
    )
  ;
}

clock- face index:nth-child(-n+4) {
  background-image:
    conic-gradient(
      #0000 calc(100% / 360 *  5.4),
      #ffff calc(100% / 360 *  5.6),
      #ffff calc(100% / 360 *  6.4),
      #0000 calc(100% / 360 *  6.6),
      #0000 calc(100% / 360 * 11.4),
      #ffff calc(100% / 360 * 11.6),
      #ffff calc(100% / 360 * 12.4),
      #0000 calc(100% / 360 * 12.6),
      #0000 calc(100% / 360 * 17.4),
      #ffff calc(100% / 360 * 17.6),
      #ffff calc(100% / 360 * 18.4),
      #0000 calc(100% / 360 * 18.6),
      #0000 calc(100% / 360 * 23.4),
      #ffff calc(100% / 360 * 23.6),
      #ffff calc(100% / 360 * 24.4),
      #0000 calc(100% / 360 * 24.6),
      #0000 calc(100% / 360 * 35.4),
      #ffff calc(100% / 360 * 35.6),
      #ffff calc(100% / 360 * 36.4),
      #0000 calc(100% / 360 * 36.6),
      #0000 calc(100% / 360 * 41.4),
      #ffff calc(100% / 360 * 41.6),
      #ffff calc(100% / 360 * 42.4),
      #0000 calc(100% / 360 * 42.6),
      #0000 calc(100% / 360 * 47.4),
      #ffff calc(100% / 360 * 47.6),
      #ffff calc(100% / 360 * 48.4),
      #0000 calc(100% / 360 * 48.6),
      #0000 calc(100% / 360 * 53.4),
      #ffff calc(100% / 360 * 53.6),
      #ffff calc(100% / 360 * 54.4),
      #0000 calc(100% / 360 * 54.6),
      #0000 calc(100% / 360 * 65.4),
      #ffff calc(100% / 360 * 65.6),
      #ffff calc(100% / 360 * 66.4),
      #0000 calc(100% / 360 * 66.6),
      #0000 calc(100% / 360 * 71.4),
      #ffff calc(100% / 360 * 71.6),
      #ffff calc(100% / 360 * 72.4),
      #0000 calc(100% / 360 * 72.6),
      #0000 calc(100% / 360 * 77.4),
      #ffff calc(100% / 360 * 77.6),
      #ffff calc(100% / 360 * 78.4),
      #0000 calc(100% / 360 * 78.6),
      #0000 calc(100% / 360 * 83.4),
      #ffff calc(100% / 360 * 83.6),
      #ffff calc(100% / 360 * 84.4),
      #0000 calc(100% / 360 * 84.6)
    )
  ;
  -webkit-mask:
    radial-gradient(
      #0000 60.0%,
      #fff1 67.5%,
      #fff6 68.0%
    )
  ;
  mask:
    radial-gradient(
      #0000 60.0%,
      #fff1 67.5%,
      #fff6 68.0%
    )
  ;
}
clock- face index:nth-child(5) {
  background-image:
    conic-gradient(
      #ffff calc(100% / 360 *    .4),
      #0000 calc(100% / 360 *    .6),
      #0000 calc(100% / 360 *  29.4),
      #ffff calc(100% / 360 *  29.6),
      #ffff calc(100% / 360 *  30.4),
      #0000 calc(100% / 360 *  30.6),
      #0000 calc(100% / 360 *  59.4),
      #ffff calc(100% / 360 *  59.6),
      #ffff calc(100% / 360 *  60.4),
      #0000 calc(100% / 360 *  60.6),
      #0000 calc(100% / 360 *  89.4),
      #ffff calc(100% / 360 *  89.6),
      #ffff calc(100% / 360 *  90.4),
      #0000 calc(100% / 360 *  90.6),
      #0000 calc(100% / 360 * 119.4),
      #ffff calc(100% / 360 * 119.6),
      #ffff calc(100% / 360 * 120.4),
      #0000 calc(100% / 360 * 120.6),
      #0000 calc(100% / 360 * 149.4),
      #ffff calc(100% / 360 * 149.6),
      #ffff calc(100% / 360 * 150.4),
      #0000 calc(100% / 360 * 150.6),
      #0000 calc(100% / 360 * 179.4),
      #ffff calc(100% / 360 * 179.6),
      #ffff calc(100% / 360 * 180.4),
      #0000 calc(100% / 360 * 180.6),
      #0000 calc(100% / 360 * 209.4),
      #ffff calc(100% / 360 * 209.6),
      #ffff calc(100% / 360 * 210.4),
      #0000 calc(100% / 360 * 210.6),
      #0000 calc(100% / 360 * 239.4),
      #ffff calc(100% / 360 * 239.6),
      #ffff calc(100% / 360 * 240.4),
      #0000 calc(100% / 360 * 240.6),
      #0000 calc(100% / 360 * 269.4),
      #ffff calc(100% / 360 * 269.6),
      #ffff calc(100% / 360 * 270.4),
      #0000 calc(100% / 360 * 270.6),
      #0000 calc(100% / 360 * 299.4),
      #ffff calc(100% / 360 * 299.6),
      #ffff calc(100% / 360 * 300.4),
      #0000 calc(100% / 360 * 300.6),
      #0000 calc(100% / 360 * 329.4),
      #ffff calc(100% / 360 * 329.6),
      #ffff calc(100% / 360 * 330.4),
      #0000 calc(100% / 360 * 330.6),
      #0000 calc(100% / 360 * 359.4),
      #ffff calc(100% / 360 * 359.6)
    )
  ;
  -webkit-mask:
    radial-gradient(
      #0000 10.0%,
      #fff1 64.5%,
      #fff9 65.0%
    )
  ;
  mask:
    radial-gradient(
      #0000 10.0%,
      #fff1 64.5%,
      #fff9 65.0%
    )
  ;
}



@media (prefers-color-scheme: light) {
  clock- bezel { inset:  4% }
  clock- week  { inset:  5% }
  clock- sun   { inset:  5% }
  clock- face  { inset:  7% }
  clock- hour>hand>hand>hand:first-child { opacity: .02 }
  clock- sun hand:first-child::before { inset: 94% 46.5% -1% }
  clock- hands hand:nth-child(1)::before { inset: 28% 48.0% 56% }
  clock- hands hand:nth-child(2)::before { inset: 16% 49.0% 49% }
  clock- hands hand:nth-child(3)::before { inset: 13% 49.5% 82% }
  clock- week hand::before { filter: brightness(2) }
  clock- { color: #ccc3 }
  clock- bezel { background-color: #ddd }
  clock- face  { background-color: #fff }
  clock- sun hand:first-child::before {
    background:
      conic-gradient(from 0 at 50% 90%,
        #fff .09turn,
        #000 .10turn,
        #000 .90turn,
        #fff .91turn
      )
    ;
  }
  clock- hands hand:nth-child(1)::before { background-image: linear-gradient(#000 10%, #000 95%) }
  clock- hands hand:nth-child(2)::before { background-image: linear-gradient(#000 10%, #000 95%) }
  clock- hands hand:nth-child(3)::before { background-image: linear-gradient(#000 10%, #000 95%) }
}

@media (prefers-color-scheme: dark) {
  clock- { color: #000c }
  clock- bezel { background-color: #111 }
  clock- face  { background-color: #000 }
  clock- bezel,
  clock- face {
    background-image:
      radial-gradient(
        #000,
        #1110 50%
      ),
      conic-gradient(
        #9992,
        #0001 .25turn,
        #9992 .50turn,
        #0001 .75turn,
        #9992
      )
    ;
  }
  clock- sun hand:first-child::before {
    background:
      conic-gradient(from 0 at 50% 90%,
        #f40 .07turn,
        #ff0 .10turn,
        #ff0 .90turn,
        #f40 .93turn
      )
    ;
  }
  clock- hands hand:nth-child(1)::before { background-image: linear-gradient(#0ff 10%, #0000 95%) }
  clock- hands hand:nth-child(2)::before { background-image: linear-gradient(#f0f 10%, #0000 95%) }
  clock- hands hand:nth-child(3)::before { background-image: linear-gradient(#fff 10%, #0000 95%) }
}



clock- hour { opacity: .02; display: none }