.theme-cassette .visual-cassette { display: block; padding-top: 24px; }
.theme-cassette .cassette {
  width: 470px; height: 250px; margin: 0 auto; background: #181521;
  border: 4px solid #5c4a72; box-shadow: inset 0 0 0 8px #272032, 0 14px 28px rgba(0,0,0,.45);
  position: relative;
}
.theme-cassette .cassette:before, .theme-cassette .cassette:after { content: ''; position: absolute; bottom: 18px; width: 68px; height: 18px; background: #0d0d13; border: 2px solid #5c4a72; }
.theme-cassette .cassette:before { left: 70px; } .theme-cassette .cassette:after { right: 70px; }
.theme-cassette .cassette-window {
  position: absolute; left: 55px; right: 55px; top: 45px; height: 110px; background: #0e0e14; border: 3px solid #c09aff;
}
.theme-cassette .reel { width: 82px; height: 82px; border-radius: 50%; background: #2a2a36; border: 5px solid #08080c; position: absolute; top: 12px; }
.theme-cassette .reel-left { left: 45px; } .theme-cassette .reel-right { right: 45px; }
.theme-cassette .reel div { width: 14px; height: 82px; background: #bda98f; position: absolute; left: 29px; top: -5px; }
.theme-cassette .reel div:after { content: ''; width: 82px; height: 14px; background: #bda98f; position: absolute; left: -34px; top: 34px; }
.theme-cassette .tape-line { position: absolute; left: 124px; right: 124px; top: 51px; height: 8px; background: #5c3c23; }
.theme-cassette .cassette-label { position: absolute; left: 70px; right: 70px; bottom: 42px; height: 34px; line-height: 34px; background: #3a235f; color: #fff0c8; font-size: 18px; letter-spacing: 2px; }
body.color-amber.theme-cassette .cassette-window { border-color: #ffb84d; }
body.color-red.theme-cassette .cassette-window { border-color: #ff796b; }
body.color-blue.theme-cassette .cassette-window { border-color: #83caff; }
body.color-green.theme-cassette .cassette-window { border-color: #8de0b4; }
body.color-gold.theme-cassette .cassette-window { border-color: #ffd36f; }