.theme-boombox .visual-boombox { display: block; }
.theme-boombox .boombox { width: 480px; height: 250px; margin: 24px auto 0; position: relative; background: #5d626b; border: 5px solid #22262d; box-shadow: inset 0 0 0 6px #7a808b, 0 14px 26px rgba(0,0,0,.45); }
.theme-boombox .bb-handle { position: absolute; left: 90px; top: -38px; width: 300px; height: 58px; border: 12px solid #343943; border-bottom: 0; border-radius: 28px 28px 0 0; }
.theme-boombox .speaker { position: absolute; top: 58px; width: 118px; height: 118px; border-radius: 50%; background: #171a20; border: 8px solid #333945; box-shadow: inset 0 0 0 8px #090a0d, inset 0 0 0 18px #242936; }
.theme-boombox .speaker-left { left: 24px; }
.theme-boombox .speaker-right { right: 24px; }
.theme-boombox .bb-display { position: absolute; left: 172px; top: 32px; width: 136px; height: 38px; line-height: 38px; background: #111318; color: #ff4545; border: 3px solid #2e333c; text-align: center; font-size: 20px; letter-spacing: 2px; }
.theme-boombox .bb-cassette { position: absolute; left: 157px; top: 92px; width: 166px; height: 86px; background: #1d2028; border: 4px solid #343943; }
.theme-boombox .bb-reel { position: absolute; top: 20px; width: 38px; height: 38px; border-radius: 50%; background: #d8dee8; border: 7px solid #15171d; }
.theme-boombox .bb-reel-left { left: 26px; }
.theme-boombox .bb-reel-right { right: 26px; }
.theme-boombox.playing .bb-reel { animation: spin 1.8s linear infinite; }