@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
*, *::before, *::after {
  padding: 0;
  box-sizing: border-box;
}

body * {
  transform-style: preserve-3d;
}

.scene {
  position: fixed;
  z-index: 555;
  bottom: 45px;
  right: 35px;
  -webkit-animation: rotate 16s infinite linear;
          animation: rotate 16s infinite linear;
}
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg) rotateX(30deg) rotate(360deg);
  }
  to {
    transform: rotate(360deg) rotateX(30deg) rotate(0deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg) rotateX(30deg) rotate(360deg);
  }
  to {
    transform: rotate(360deg) rotateX(30deg) rotate(0deg);
  }
}

.dial {
  --value: 0.3;
  --size: 100;
  --divCount: 24;
  --spanCount: 12;
  --arc: 360deg;
  --divHeight: calc(var(--size) * 0.15);
  --hueStart: 0;
  --hueEnd: 120;
  --hue: calc((var(--hueEnd) - var(--hueStart)) * var(--value) + var(--hueStart));
  position: relative;
  width: calc(var(--size) * 1px);
  aspect-ratio: 1;
}
.dial div {
  --divWidth: calc(tan(var(--arc) / var(--divCount)) * var(--size) / 2);
  --divWidthInner: calc(tan(var(--arc) / var(--divCount)) * (var(--size) / 2 - var(--divHeight)));
  --divGap: calc((var(--divWidth) - var(--divWidthInner)) * 0.5px);
  --angle: calc(var(--arc) / var(--divCount) * (var(--i) + 0.5) - var(--arc) / 2);
  --r: calc((var(--size) - var(--divHeight)) * -0.5px);
  --light: calc(var(--i) / var(--divCount) * 50% + 25%);
  --color: hsl(var(--hue) 100% var(--light));
  position: absolute;
  left: calc(50% - var(--divWidth) * 0.5px);
  top: calc(50% - var(--divHeight) * 0.5px);
  width: calc(var(--divWidth) * 1px);
  height: calc(var(--divHeight) * 1px);
  transform: rotate(var(--angle)) translateY(var(--r));
}
.dial div i {
  position: absolute;
  inset: 0;
  background-color: #fff4;
  background-image: linear-gradient(0deg, #000a, 5%, transparent), linear-gradient(180deg, #000a, 5%, transparent), linear-gradient(to right, var(--color) calc(var(--value) * 100%), transparent 0);
  background-size: calc(var(--divWidth) * var(--divCount) * 1px) 100%;
  background-position-x: calc(var(--divWidth) * var(--i) * -1px);
}
.dial div i:nth-child(1) {
  transform: translateZ(calc(var(--divHeight) * 0.5px));
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--divGap)) 100%, var(--divGap) 100%);
          clip-path: polygon(0 0, 100% 0, calc(100% - var(--divGap)) 100%, var(--divGap) 100%);
}
.dial div i:nth-child(2) {
  transform: rotateX(90deg) translateZ(calc(var(--divHeight) * 0.5px));
}
.dial div i:nth-child(3) {
  transform: rotateX(180deg) translateZ(calc(var(--divHeight) * 0.5px));
  -webkit-clip-path: polygon(0 100%, 100% 100%, calc(100% - var(--divGap)) 0, var(--divGap) 0);
          clip-path: polygon(0 100%, 100% 100%, calc(100% - var(--divGap)) 0, var(--divGap) 0);
}
.dial div i:nth-child(4) {
  --scale: calc(var(--divWidthInner) / var(--divWidth));
  transform: rotateX(270deg) translateZ(calc(var(--divHeight) * 0.5px)) scaleX(var(--scale));
}
.dial span {
  --spanTranslate: calc((var(--divHeight) / (var(--spanCount) - 1) * var(--i) - (var(--divHeight) / 2)) * 1px);
  --light: calc(var(--i) / var(--divCount) * 50% + 15%);
  position: absolute;
  inset: 0;
  counter-reset: value var(--textValue);
  transform: translateZ(var(--spanTranslate));
  color: hsl(var(--hue), 100%, var(--light));
}
.dial span::after {
  content: counter(value);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--size) * 0.5px);
  font-weight: 700;
}