html, body {
  padding: 0;
  margin: 0;
  background-color: #fff;
}

html {
  box-sizing: border-box;
  font-size: 1.373vw;
}
@media (min-width: 364px) {
  html {
    font-size: 5px;
  }
}

*, *:before, *:after {
  box-sizing: inherit;
}

.container {
  width: 100%;
  max-width: 364px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
.container:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 82.967032967%;
}
.container * {
  position: absolute;
}
.container *:before {
  display: block;
  content: "";
  width: 100%;
}

.has-border {
  border: 1rem solid #222;
}

.h-centered {
  left: 50%;
  transform: translateX(-50%);
}

.base {
  width: 80%;
  top: 10.7%;
  background-color: #797b7a;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1.1%;
  border: 5px solid #222;
}
.base:before {
  padding-top: 87.6%;
}

.center-line {
  width: 11.4%;
  height: 1rem;
  top: 47%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #222;
}
.center-line:before, .center-line:after {
  width: 1rem;
  height: 1rem;
  position: absolute;
  display: block;
  content: "";
  border-radius: 50%;
  background-color: #222;
}
.center-line:before {
  left: -0.5rem;
}
.center-line:after {
  right: -0.5rem;
}

.center-panel {
  top: 55%;
  width: 40%;
  background-color: #f2f2f0;
  border-radius: 3rem;
  left: 50%;
  transform: translateX(-50%);
}
.center-panel:before {
  padding-top: 14%;
}

/* **************** */
/*     controls     */
/* **************** */
.control-border {
  background-color: #f2f2f0;
  top: 67%;
}
.control-border.top-border {
  width: 75.7%;
}
.control-border.top-border:before {
  padding-top: 3.8%;
}
.control-border.left-border, .control-border.right-border {
  top: 67%;
  width: 3.7%;
  height: 28.7%;
}
.control-border.left-border {
  left: 9.4%;
}
.control-border.right-border {
  right: 9.4%;
}

.control-panel {
  width: 74%;
  top: 73.6%;
  box-shadow: inset 1.8rem 1.8rem 0 0 #515151;
}
.control-panel:before {
  padding-top: 22.8%;
}

.dial-small, .dial-large {
  background-color: #f2f2f0;
  border-radius: 50%;
}
.dial-small:before, .dial-large:before {
  padding-top: 100%;
}

.dial-small {
  width: 4.3%;
  border-radius: 50%;
}

.dial-small-0, .dial-small-1, .dial-small-2 {
  left: 14.9%;
}

.dial-small-0, .dial-large, .meter {
  top: 76.5%;
}

.dial-small-1 {
  top: 82.1%;
}

.dial-small-2, .dial-small-3, .dial-small-4, .dial-small-5 {
  top: 87.7%;
}

.dial-small-3 {
  left: 25.5%;
}

.dial-small-4 {
  left: 41.7%;
}

.dial-small-5 {
  left: 52.7%;
}

.dial-large {
  width: 7.2%;
}

.dial-large-0 {
  left: 24%;
}

.dial-large-1 {
  left: 40.2%;
}

.dial-large-2 {
  left: 51.2%;
}

.control-divider {
  width: 1.7%;
  top: 77.2%;
  left: 34.6%;
  min-height: 8.8rem;
  background-color: #222;
  background-color: #222;
}
.control-divider:before, .control-divider:after {
  border-radius: 50%;
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  padding-top: 100%;
  background-color: #222;
}
.control-divider:before {
  top: -5%;
}
.control-divider:after {
  bottom: -5%;
}

.meter {
  background-color: #ffc851;
  width: 12.1%;
  border-radius: 0.5rem;
}
.meter:before {
  padding-top: 52.3%;
}

.meter-0 {
  left: 61.3%;
}

.meter-1 {
  left: 73.9%;
}

.needle {
  width: 40%;
  left: 10%;
  bottom: -20%;
  height: 1rem;
  background-color: #222;
  transform-origin: center right;
  transform: rotate(45deg);
  transition: all 0.25s;
}
.needle:before, .needle:after {
  border-radius: 50%;
  display: block;
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 0;
  background-color: #222;
}
.needle:before {
  left: -0.5rem;
}
.needle:after {
  right: -0.5rem;
}

/* ********************* */
/*     radio buttons     */
/* ********************* */
input[type="radio"] {
  position: absolute;
  visibility: hidden;
}

label {
  top: 87%;
  z-index: 100;
  width: 7.225%;
  font-size: 0;
  background-color: #f2f2f0;
  transition: 0.25s background-color, 0.125s transform;
  cursor: pointer;
}
label:before {
  padding-top: 49%;
}
label span {
  position: absolute;
  top: 11%;
  display: block;
}

.label-play span, .label-rewind span, .label-ff span,
.label-rewind span:before, .label-ff span:before {
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1.6rem;
  border-color: transparent transparent transparent #222;
  content: '';
  display: block;
}

.label-rewind span:before, .label-ff span:before {
  top: -0.6rem;
  left: -0.5rem;
}

.label-rewind {
  left: 61.4%;
}
.label-rewind span {
  left: 37%;
  transform: scaleX(-1);
}

.label-pause {
  left: calc( 68.625% - 1rem);
}
.label-pause span {
  background-color: #222;
  height: 77%;
}
.label-pause span {
  left: 17%;
  width: 27%;
  height: 75%;
}
.label-pause span:after {
  position: absolute;
  top: 0%;
  left: 137%;
  content: '';
  display: block;
  background-color: #222;
  width: 100%;
  height: 100%;
}

.label-play {
  left: calc( 75.85% - 2rem);
}
.label-play span {
  left: 30%;
}

.label-ff {
  left: calc( 83.075% - 3rem);
}
.label-ff span {
  left: 5%;
}

.label-rewind:hover, .btn-rewind:checked + label,
.label-ff:hover, .btn-ff:checked + label {
  background-color: #ffeb3b;
}

.label-pause:hover, .btn-pause:checked + label {
  background-color: #ff6868;
}

.label-play:hover, .btn-play:checked + label {
  background-color: #b4e878;
}

/* ************* */
/*     reels     */
/* ************* */
.centered-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.centered-circle:before {
  padding-top: 100%;
}

.reel {
  display: block;
  width: 49.4%;
  top: 0.3%;
  border-radius: 50%;
}
.reel:before {
  padding-top: 100%;
}
.reel.reel-1 {
  left: 50.6%;
  transform: rotate(180deg);
}

.reel-bg, .reel-shadow {
  top: 0;
  width: 100%;
  border-radius: 50%;
}
.reel-bg:before, .reel-shadow:before {
  padding-top: 100%;
}

.reel-bg {
  background-color: #f2f2f0;
  transition-timing-function: linear;
}

.reel-shadow {
  box-shadow: inset 2rem 2rem 0px -0.8rem #DDD;
}

.reel-center {
  width: 31%;
  background: radial-gradient(ellipse at center, #222 0%, #222 12.5%, #7a7a7a 10.8%, #7a7a7a 30.8%, #222 31.1%, #222 45.3%, #ffffff 45.9%, #fff 57.9%, #222 58.2%, #222 100%);
}

.peg {
  left: 50%;
  height: 0;
  top: 50%;
  width: 50%;
  transform-origin: center left;
  transform: rotate(90deg);
}
.peg.peg-1 {
  transform: rotate(210deg);
}
.peg.peg-2 {
  transform: rotate(330deg);
}
.peg:after {
  margin-top: -5px;
  display: block;
  content: "";
  margin-left: 40%;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  border: 1rem solid #222;
}

.tape-container {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}
.tape-container.tape-container-1 {
  transform: rotate(120deg);
}
.tape-container.tape-container-2 {
  transform: rotate(240deg);
}

.slot-border {
  width: 100%;
  height: 100%;
  background-color: #222;
  -webkit-clip-path: polygon(42% 7%, 58% 7%, 56% 28%, 44% 28%);
  clip-path: polygon(42% 7%, 58% 7%, 56% 28%, 44% 28%);
}

.tape-body-outside {
  width: 100%;
  position: absolute;
  top: 0;
  background-color: #f2f2f0;
  bottom: 0;
  border-radius: 50%;
  -webkit-clip-path: polygon(45% 10%, 55% 10%, 53% 25%, 47% 25%);
  clip-path: polygon(45% 10%, 55% 10%, 53% 25%, 47% 25%);
}

.tape-body {
  background-color: #7b7d7c;
  overflow: hidden;
  width: 100% important;
}

.reel-0 .tape-body {
  width: 80%;
}

.reel-1 .tape-body {
  width: 52%;
}

/* ***************** */
/*     animation     */
/* ***************** */
input:checked + label {
  transform: scale(0.9);
}

input[value="rewind"]:checked ~ .reel * {
  transition: all 2s linear;
}
input[value="rewind"]:checked ~ .reel.reel-0 .tape-body {
  width: 80%;
}
input[value="rewind"]:checked ~ .reel.reel-1 .tape-body {
  width: 52%;
}
input[value="rewind"]:checked ~ .reel .reel-bg {
  transform: rotate(0deg);
}

input[value="pause"]:checked ~ .reel * {
  transition-delay: 1000000s;
}

input[value="play"]:checked ~ .meter .needle {
  animation: 15s needleAnimation 1 alternate linear;
}
input[value="play"]:checked ~ .reel * {
  transition: all 15s linear;
}
input[value="play"]:checked ~ .reel .reel-bg {
  transform: rotate(-2160deg);
}
input[value="play"]:checked ~ .reel.reel-0 .tape-body {
  width: 52%;
}
input[value="play"]:checked ~ .reel.reel-1 .tape-body {
  width: 80%;
}

input[value="ff"]:checked ~ .reel * {
  transition: all 2s linear;
}
input[value="ff"]:checked ~ .reel .reel-bg {
  transform: rotate(-2161deg);
}
input[value="ff"]:checked ~ .reel.reel-0 .tape-body {
  width: 52.1%;
}
input[value="ff"]:checked ~ .reel.reel-1 .tape-body {
  width: 80.1%;
}

@keyframes needleAnimation {
  0%, 100% {
    transform: rotate(45deg);
  }
  1% {
    transform: rotate(115deg);
  }
  2% {
    transform: rotate(127deg);
  }
  3% {
    transform: rotate(133deg);
  }
  4% {
    transform: rotate(114deg);
  }
  5% {
    transform: rotate(129deg);
  }
  6% {
    transform: rotate(112deg);
  }
  7% {
    transform: rotate(123deg);
  }
  8% {
    transform: rotate(134deg);
  }
  9% {
    transform: rotate(127deg);
  }
  10% {
    transform: rotate(118deg);
  }
  11% {
    transform: rotate(132deg);
  }
  12% {
    transform: rotate(123deg);
  }
  13% {
    transform: rotate(128deg);
  }
  14% {
    transform: rotate(127deg);
  }
  15% {
    transform: rotate(114deg);
  }
  16% {
    transform: rotate(116deg);
  }
  17% {
    transform: rotate(130deg);
  }
  18% {
    transform: rotate(135deg);
  }
  19% {
    transform: rotate(121deg);
  }
  20% {
    transform: rotate(112deg);
  }
  21% {
    transform: rotate(127deg);
  }
  22% {
    transform: rotate(122deg);
  }
  23% {
    transform: rotate(118deg);
  }
  24% {
    transform: rotate(135deg);
  }
  25% {
    transform: rotate(129deg);
  }
  26% {
    transform: rotate(116deg);
  }
  27% {
    transform: rotate(127deg);
  }
  28% {
    transform: rotate(117deg);
  }
  29% {
    transform: rotate(128deg);
  }
  30% {
    transform: rotate(128deg);
  }
  31% {
    transform: rotate(129deg);
  }
  32% {
    transform: rotate(119deg);
  }
  33% {
    transform: rotate(111deg);
  }
  34% {
    transform: rotate(125deg);
  }
  35% {
    transform: rotate(135deg);
  }
  36% {
    transform: rotate(131deg);
  }
  37% {
    transform: rotate(134deg);
  }
  38% {
    transform: rotate(126deg);
  }
  39% {
    transform: rotate(130deg);
  }
  40% {
    transform: rotate(131deg);
  }
  41% {
    transform: rotate(121deg);
  }
  42% {
    transform: rotate(118deg);
  }
  43% {
    transform: rotate(134deg);
  }
  44% {
    transform: rotate(123deg);
  }
  45% {
    transform: rotate(123deg);
  }
  46% {
    transform: rotate(135deg);
  }
  47% {
    transform: rotate(115deg);
  }
  48% {
    transform: rotate(125deg);
  }
  49% {
    transform: rotate(135deg);
  }
  50% {
    transform: rotate(121deg);
  }
  51% {
    transform: rotate(133deg);
  }
  52% {
    transform: rotate(117deg);
  }
  53% {
    transform: rotate(135deg);
  }
  54% {
    transform: rotate(114deg);
  }
  55% {
    transform: rotate(117deg);
  }
  56% {
    transform: rotate(118deg);
  }
  57% {
    transform: rotate(129deg);
  }
  58% {
    transform: rotate(116deg);
  }
  59% {
    transform: rotate(112deg);
  }
  60% {
    transform: rotate(127deg);
  }
  61% {
    transform: rotate(120deg);
  }
  62% {
    transform: rotate(114deg);
  }
  63% {
    transform: rotate(132deg);
  }
  64% {
    transform: rotate(112deg);
  }
  65% {
    transform: rotate(132deg);
  }
  66% {
    transform: rotate(130deg);
  }
  67% {
    transform: rotate(116deg);
  }
  68% {
    transform: rotate(133deg);
  }
  69% {
    transform: rotate(135deg);
  }
  70% {
    transform: rotate(130deg);
  }
  71% {
    transform: rotate(119deg);
  }
  72% {
    transform: rotate(132deg);
  }
  73% {
    transform: rotate(121deg);
  }
  74% {
    transform: rotate(124deg);
  }
  75% {
    transform: rotate(130deg);
  }
  76% {
    transform: rotate(114deg);
  }
  77% {
    transform: rotate(120deg);
  }
  78% {
    transform: rotate(132deg);
  }
  79% {
    transform: rotate(118deg);
  }
  80% {
    transform: rotate(112deg);
  }
  81% {
    transform: rotate(130deg);
  }
  82% {
    transform: rotate(121deg);
  }
  83% {
    transform: rotate(112deg);
  }
  84% {
    transform: rotate(116deg);
  }
  85% {
    transform: rotate(133deg);
  }
  86% {
    transform: rotate(123deg);
  }
  87% {
    transform: rotate(123deg);
  }
  88% {
    transform: rotate(112deg);
  }
  89% {
    transform: rotate(131deg);
  }
  90% {
    transform: rotate(112deg);
  }
  91% {
    transform: rotate(133deg);
  }
  92% {
    transform: rotate(123deg);
  }
  93% {
    transform: rotate(121deg);
  }
  94% {
    transform: rotate(115deg);
  }
  95% {
    transform: rotate(120deg);
  }
  96% {
    transform: rotate(118deg);
  }
  97% {
    transform: rotate(130deg);
  }
  98% {
    transform: rotate(115deg);
  }
  99% {
    transform: rotate(115deg);
  }
}