.theme-receiver .visual-receiver { display: block; padding-top: 28px; }
.theme-receiver .receiver {
  width: 460px; height: 238px; margin: 0 auto; background: #18241e; border: 4px solid #4f876b;
  position: relative; box-shadow: inset 0 0 0 7px #0b120f, 0 14px 28px rgba(0,0,0,.45);
}
.theme-receiver .receiver-scale {
  position: absolute; left: 38px; right: 38px; top: 54px; height: 76px; background: #09100d; border: 3px solid #5e9f80;
  color: #9df0c5; font-size: 18px; line-height: 76px; text-align: center;
}
.theme-receiver .receiver-scale span { display: inline-block; margin: 0 10px; }
.theme-receiver .receiver-needle { width: 4px; height: 88px; background: #ffdf76; position: absolute; left: 224px; top: 48px; }
.theme-receiver .receiver-speaker { position: absolute; left: 54px; right: 54px; bottom: 28px; height: 42px; background: repeating-linear-gradient(90deg, #09100d 0, #09100d 8px, #294637 8px, #294637 15px); border: 2px solid #5e9f80; }
.theme-receiver.playing .receiver-needle { animation: needleMove 4s ease-in-out infinite; }
@keyframes needleMove { 0% { left: 164px; } 50% { left: 282px; } 100% { left: 164px; } }