/* variables */
.tmg-boombox {
  /* dimensions */
  --bu: var(--tmg-video-current-unit); /* boombox unit */
  --tmg-bb-width: calc(var(--bu) * 30.77);
  --tmg-bb-height: calc(var(--bu) * 16.92);
  --tmg-bb-depth: calc(var(--bu) * 7.69);
  --tmg-bb-line-w: calc(var(--bu) / 6);
  --tmg-bb-line-2w: calc(var(--tmg-bb-line-w) * 2);
  /* colors */
  --tmg-bb-brand-color: rgb(from var(--tmg-video-brand-color) calc(r + 10) calc(g - 50) b);
  --tmg-bb-accent-color: var(--tmg-video-brand-accent-color);
  --tmg-bb-complement-color: rgb(from var(--tmg-bb-brand-color) calc(r + 15) calc(g + 240) calc(b + 15));
  --tmg-bb-supplement-color: rgb(from var(--tmg-bb-brand-color) calc(r - 80) calc(g + 150) b);
  --tmg-bb-theme-color: var(--tmg-video-theme-color);
  --tmg-bb-theme-blend-color: rgb(from var(--tmg-bb-theme-color) r g b / 0.45);
  --tmg-bb-theme-inverse-color: black;
  --tmg-bb-theme-inverse-accent-color: hsl(from var(--tmg-bb-theme-inverse-color) h s calc(l + 45));
  --tmg-bb-bland-color: rgb(from var(--tmg-bb-theme-color) calc(r - 83) calc(g - 39) calc(b + 30));
  --tmg-bb-dark-bland-color: hsl(from var(--tmg-bb-bland-color) h s calc(l - 70));
  /* extra */
  --bb-vibe: 0;
}
@keyframes tmg-cone-vibrate {
  0% {
    transform: scale(1) translateZ(0) rotate(0deg);
    filter: brightness(1) contrast(1);
  }
  25% {
    /* Multiplies 1.05 scale, 5pix push, and 0.5deg rotate by power */
    transform: scale(calc(1 + (0.05 * var(--bb-vibe)))) translateZ(calc((var(--bu) / 5.2) * var(--bb-vibe))) rotate(calc(0.5deg * var(--bb-vibe)));
    filter: brightness(calc(1 + (0.15 * var(--bb-vibe)))) contrast(calc(1 + (0.1 * var(--bb-vibe))));
  }
  50% {
    /* Multiplies 0.96 scale and -2pix recoil by power */
    transform: scale(calc(1 - (0.04 * var(--bb-vibe)))) translateZ(calc((var(--bu) / -13) * var(--bb-vibe))) rotate(calc(-0.5deg * var(--bb-vibe)));
    filter: brightness(calc(1 - (0.1 * var(--bb-vibe))));
  }
  75% {
    transform: scale(calc(1 + (0.02 * var(--bb-vibe)))) translateZ(calc(calc(var(--bu) / 13) * var(--bb-vibe))) rotate(calc(0.2deg * var(--bb-vibe)));
    filter: brightness(calc(1 + (0.05 * var(--bb-vibe))));
  }
  100% {
    transform: scale(1) translateZ(0) rotate(0deg);
    filter: brightness(1) contrast(1);
  }
}
/* styling */
.tmg-boombox {
  width: var(--tmg-bb-width);
  height: var(--tmg-bb-height);
  perspective: 10000px; /* hard-coded for realism (no auto focal point shifting) */
  transform-style: preserve-3d;
  touch-action: none;
}
.tmg-boombox-body {
  position: relative;
  width: var(--tmg-bb-width);
  height: var(--tmg-bb-height);
  transform-origin: 50% 50% calc(var(--tmg-bb-depth) / -2); /* Pushes the rotation pivot into the dead physical center of the box */
  transform: translate(var(--bb-x, 0px), var(--bb-y, 0px)) scale(var(--bb-z, 1)) rotateY(var(--bb-ry, 0deg)) rotateX(var(--bb-rx, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
[class^="tmg-bb-"] {
  position: absolute;
  transform-style: preserve-3d;
  background-color: var(--tmg-bb-brand-color);
  border: 0.01px solid var(--tmg-bb-theme-inverse-accent-color);
}
.tmg-bb-top {
  width: inherit;
  height: var(--tmg-bb-depth);
  transform: rotateX(-90deg);
  transform-origin: top right;
  background: linear-gradient(to bottom, rgb(0, 0, 0, 0.8), transparent), linear-gradient(to top, var(--tmg-bb-bland-color) 0 75%, var(--tmg-bb-theme-inverse-color) 75% var(--tmg-bb-line-2w), var(--tmg-bb-complement-color) calc(75% + var(--tmg-bb-line-2w)));
}
.tmg-bb-bottom {
  width: inherit;
  height: var(--tmg-bb-depth);
  bottom: 0;
  transform: rotateX(90deg);
  transform-origin: bottom left;
  background: linear-gradient(to bottom, rgb(0, 0, 0, 0.8), transparent), linear-gradient(to bottom, var(--tmg-bb-bland-color) 0 75%, var(--tmg-bb-theme-inverse-color) 75% var(--tmg-bb-line-2w), var(--tmg-bb-brand-color) calc(75% + var(--tmg-bb-line-2w)));
}
.tmg-bb-right {
  width: var(--tmg-bb-depth);
  height: inherit;
  right: 0;
  transform: rotateY(-90deg);
  transform-origin: top right;
  background:
    linear-gradient(to top, rgb(0, 0, 0, 0.8), transparent),
    linear-gradient(to bottom, var(--tmg-bb-complement-color) 0 calc(100% - var(--tmg-bb-line-w)), var(--tmg-bb-theme-inverse-color) var(--tmg-bb-line-2w)) top right / calc(25% - var(--tmg-bb-line-w)) 25% no-repeat,
    linear-gradient(to right, var(--tmg-bb-bland-color) 0 75%, var(--tmg-bb-theme-inverse-color) 75% var(--tmg-bb-line-2w), var(--tmg-bb-brand-color) calc(75% + var(--tmg-bb-line-2w)));
}
.tmg-bb-left {
  width: var(--tmg-bb-depth);
  height: inherit;
  transform: rotateY(90deg);
  transform-origin: top left;
  background:
    linear-gradient(to top, rgb(0, 0, 0, 0.8), transparent),
    linear-gradient(to bottom, var(--tmg-bb-complement-color) 0 calc(100% - var(--tmg-bb-line-w)), var(--tmg-bb-theme-inverse-color) var(--tmg-bb-line-2w)) top left / calc(25% - var(--tmg-bb-line-w)) 25% no-repeat,
    linear-gradient(to left, var(--tmg-bb-bland-color) 0 75%, var(--tmg-bb-theme-inverse-color) 75% var(--tmg-bb-line-2w), var(--tmg-bb-brand-color) calc(75% + var(--tmg-bb-line-2w)));
}
.tmg-bb-back {
  width: inherit;
  height: inherit;
  transform: translateZ(calc(var(--tmg-bb-depth) * -1)) rotateY(180deg);
  background:
    linear-gradient(to top, rgb(0, 0, 0, 0.8), transparent),
    repeating-linear-gradient(to right, rgb(255, 255, 255, 0.4) 0 5%, transparent 5% 10%) 10% 11% / 34% 4% no-repeat,
    repeating-linear-gradient(to right, rgb(255, 255, 255, 0.4) 0 5%, transparent 5% 10%) 10% 79% / 34% 4% no-repeat,
    repeating-linear-gradient(to right, var(--tmg-bb-theme-inverse-color) 0 5%, transparent 5% 10%) 10% 35% / 34% 67.5% no-repeat,
    repeating-linear-gradient(to left, rgb(255, 255, 255, 0.4) 0 5%, transparent 5% 10%) 90% 11% / 34% 4% no-repeat,
    repeating-linear-gradient(to left, rgb(255, 255, 255, 0.4) 0 5%, transparent 5% 10%) 90% 79% / 34% 4% no-repeat,
    repeating-linear-gradient(to left, var(--tmg-bb-theme-inverse-color) 0 5%, transparent 5% 10%) 90% 35% / 34% 67.5% no-repeat,
    var(--tmg-bb-bland-color);
}
.tmg-bbb-reset {
  position: absolute;
  bottom: 2.5%;
  left: 50%;
  translate: -50% 0;
  width: 30%;
  height: 15%;
  background: linear-gradient(to bottom, var(--tmg-bb-theme-inverse-color) 0% 1%, var(--tmg-bb-theme-inverse-accent-color) 17%);
  border: calc(var(--bu) / 8.67) solid var(--tmg-bb-theme-inverse-color);
}
.tmg-bb-front {
  width: inherit;
  height: inherit;
  background:
    linear-gradient(to top, rgb(0, 0, 0, 0.5) 5%, rgb(0, 0, 0, 0.1) 30%),
    var(--tmg-bb-brand-color) repeat-x bottom left;
}
:is(.tmg-bb-front, .tmg-bb-back) * {
  color: var(--tmg-video-theme-inverse-color);
  font-size: calc(var(--bu) / 1.5);
  font-weight: 700;
  text-shadow: 0px 0px calc(var(--bu) / 13) rgba(0, 0, 0, 0.5);
}
.tmg-bb-front :is(button, input) {
  transform: translateZ(var(--tmg-bb-depth));
}

.tmg-bbf-master {
  height: calc(25% - var(--tmg-bb-line-w));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--bu) / 2.17) calc(var(--bu) * 1.2);
  background: linear-gradient(rgb(0, 0, 0, 0.1)), var(--tmg-bb-complement-color);
  box-shadow:
    inset 0 0 0 calc(var(--bu) / 52) var(--tmg-bb-theme-inverse-color),
    inset calc(var(--bu) / 2.17) calc(var(--bu) / 2.17) calc(var(--bu) / 1.4) rgba(0, 0, 0, 0.8),
    inset calc(var(--bu) / -26) calc(var(--bu) / -26) calc(var(--bu) / 8.67) rgba(255, 255, 255, 0.1),
    inset 0 0 calc(var(--bu) / 1.3) rgba(0, 0, 0, 0.5); /* 1. The main "hole" shadow (Top-Left) , 2. The opposite "rim" highlight (Bottom-Right), 3. The floor shadow (Deep inner corners) */
  border: calc(var(--bu) / 3.5) solid var(--tmg-bb-complement-color);
  border-inline-width: calc(var(--bu) / 2.5);
}

.tmg-bbfm-stereo,
.tmg-bbfm-actions {
  height: 100%;
  display: flex;
  align-items: center;
  gap: calc(var(--bu) / 1.25);
}
.tmg-bbfm-actions {
  gap: calc(var(--bu) * 1.25);
}
:is(.tmg-bbfm-stereo, .tmg-bbfm-actions, .tmg-bbfs-tape) > button {
  --btn-blend: var(--tmg-bb-theme-blend-color);
  position: relative;
  width: calc(var(--bu) * 1.2);
  height: 75%;
  background: linear-gradient(170deg, var(--btn-blend) 10%, transparent 35%), var(--tmg-bb-brand-color);
  border-radius: calc(var(--bu) / 13);
  box-shadow:
    inset calc(var(--bu) / 8.67) calc(var(--bu) / 8.67) calc(var(--bu) / 5.2) rgba(0, 0, 0, 0.4),
    inset calc(var(--bu) / -6.5) calc(var(--bu) / -6.5) calc(var(--bu) / 3.71) rgba(0, 0, 0, 0.8),
    0 calc(var(--bu) / 6.5) calc(var(--bu) / 6.5) rgba(0, 0, 0, 0.5);
  transition: all 100ms ease;
}
:is(.tmg-bbfm-actions, .tmg-bbfs-tape) > button {
  width: calc(var(--bu) * 1.75);
  height: calc(var(--bu) * 1.75);
  background: linear-gradient(170deg, var(--btn-blend) 25%, transparent 50%), var(--tmg-bb-brand-color);
  border-radius: 50%;
}
:is(.tmg-bbfm-stereo, .tmg-bbfm-actions, .tmg-bbfs-tape) > button:is(:active, .activated) {
  --btn-blend: rgb(from var(--tmg-bb-theme-blend-color) r g b / 0.3);
  filter: brightness(0.9);
  border: 0.1px solid var(--tmg-bb-theme-inverse-color);
}
:is(.tmg-bbfm-stereo, .tmg-bbfm-actions, .tmg-bbfs-tape) > button.activated {
  color: rgb(from currentColor r g b / 0.8);
  font-size: 98%;
  box-shadow:
    inset calc(var(--bu) / 8.67) calc(var(--bu) / 8.67) calc(var(--bu) / 5.2) rgba(0, 0, 0, 0.8),
    inset calc(var(--bu) / -6.5) calc(var(--bu) / -6.5) calc(var(--bu) / 3.71) rgba(255, 255, 255, 0.1),
    inset calc(var(--bu) / -6.5) calc(var(--bu) / -6.5) calc(var(--bu) / 3.71) rgba(0, 0, 0, 0.3);
}
:is(.tmg-bbfm-stereo, .tmg-bbfm-actions, .tmg-bbfs-tape) > button:active {
  color: rgb(from currentColor r g b / 0.6);
  font-size: 96%;
  box-shadow:
    inset calc(var(--bu) / 2.6) calc(var(--bu) / 2.6) calc(var(--bu) / 1.73) rgba(0, 0, 0),
    inset calc(var(--bu) / -3.71) calc(var(--bu) / -3.71) calc(var(--bu) / 2.36) rgba(255, 255, 255, 0.1),
    inset calc(var(--bu) / -3.71) calc(var(--bu) / -3.71) calc(var(--bu) / 2.36) rgba(0, 0, 0, 0.5);
}

.tmg-bbfm-volume {
  --track-bs: inset calc(var(--bu) / 5.2) calc(var(--bu) / 5.2) calc(var(--bu) / 2.17) rgba(0, 0, 0, 0.8), inset calc(var(--bu) / -26) calc(var(--bu) / -26) calc(var(--bu) / 8.67) rgba(255, 255, 255, 0.1), inset 0 0 calc(var(--bu) / 1.3) rgba(0, 0, 0, 0.5);
  --thumb-w: calc(var(--bu) / 1.65);
  --thumb-bs: calc(var(--bu) / 13) 0 calc(var(--bu) / 5.2) rgba(0, 0, 0, 0.6), calc(var(--bu) / -26) 0 calc(var(--bu) / 13) rgba(0, 0, 0, 0.4), 0 calc(var(--bu) / 6.5) calc(var(--bu) / 6.5) rgba(0, 0, 0, 0.5); /* 1. Shadow cast to the right, 2. Slight shadow to the left, 3. Bottom shadow (gravity) */
  --thumb-br: calc(var(--bu) / 6.5);
  --thumb-bg: linear-gradient(to right, rgb(0, 0, 0, 0.6) 0%, rgb(0, 0, 0, 0.2) 35%, rgb(0, 0, 0, 0.2) 65%, rgb(0, 0, 0, 0.6) 100%), linear-gradient(150deg, var(--tmg-bb-theme-blend-color) 10%, transparent 60%), var(--tmg-bb-brand-color);
  height: calc(var(--bu) * 1.6);
  display: flex;
  align-items: center;
  gap: calc(var(--bu) / 2.5);
}
input[type="range"].tmg-bbfm-volume-slider {
  width: calc(var(--bu) * 4);
  height: 100%;
  background: linear-gradient(rgb(0, 0, 0, 0.1));
}
input[type="range"].tmg-bbfm-volume-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  border: 0.1px solid var(--tmg-bb-theme-inverse-color);
  box-shadow: var(--track-bs);
}
input[type="range"].tmg-bbfm-volume-slider::-moz-range-track {
  width: 100%;
  height: 100%;
  border: 0.1px solid var(--tmg-bb-theme-inverse-color);
  box-shadow: var(--track-bs);
}
input[type="range"].tmg-bbfm-volume-slider::-webkit-slider-thumb {
  width: var(--thumb-w);
  height: 100%;
  box-shadow: var(--thumb-bs);
  border-radius: var(--thumb-br);
  background: var(--thumb-bg);
}
input[type="range"].tmg-bbfm-volume-slider::-moz-range-thumb {
  width: var(--thumb-w);
  height: 100%;
  box-shadow: var(--thumb-bs);
  border-radius: var(--thumb-br);
  background: var(--thumb-bg);
}
.tmg-bbfm-volume-value {
  position: relative;
  min-width: calc(var(--bu) * 2);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: calc(var(--bu) / 10);
  background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.3) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.11), rgba(0, 255, 0, 0.07), rgba(0, 0, 255, 0.11)), var(--tmg-bb-supplement-color);
  background-size:
    100% calc(var(--bu) / 13),
    calc(var(--bu) / 8.67) 100%; /* Horizontal scanlines + Vertical sub-pixels */
  box-shadow:
    inset calc(var(--bu) / 5.2) calc(var(--bu) / 5.2) calc(var(--bu) / 1.73) rgba(0, 0, 0, 0.5),
    inset calc(var(--bu) / -10.4) calc(var(--bu) / -10.4) calc(var(--bu) / 2.6) rgba(0, 0, 0, 0.4),
    0 0 calc(var(--bu) / 2.6) var(--tmg-bb-supplement-color); /* The bezel shadow *, The outer "bleed" onto the speaker */
  filter: contrast(1.1) brightness(1.1);
}
.tmg-bbfm-volume-value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 25%, rgba(255, 255, 255, 0.25) 40% 60%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}

.tmg-bbf-speaker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(75% + var(--tmg-bb-line-w));
  padding-inline: calc(var(--bu) * 1);
  gap: calc(var(--bu) * 0.5);
  border-top: var(--tmg-bb-line-w) solid var(--tmg-bb-theme-inverse-color);
}

.tmg-bbfs-cone {
  height: 75%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0px calc(var(--bu) / 26), transparent calc(var(--bu) / 26) calc(var(--bu) / 6.5)),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0px calc(var(--bu) / 26), transparent calc(var(--bu) / 26) calc(var(--bu) / 6.5)),
    /* 1. The Dust Cap (The only part that pops back OUT at the very center) */ radial-gradient(circle at center, #1a1a1a 0% 12%, var(--tmg-bb-theme-inverse-color) 18%, transparent 19%),
    /* 2. The Concave Shadow (Light hits the BOTTOM rim when it's a hole) */ radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
    /* 3. The Deep Cone (Darkest at the center-ring) */ radial-gradient(circle at center, #050505 20%, #151515 100%);
  box-shadow:
    inset calc(var(--bu) / 5.2) calc(var(--bu) / 5.2) calc(var(--bu) / 2.6) rgba(255, 255, 255, 0.1),
    inset calc(var(--bu) / 2.6) calc(var(--bu) / 2.6) calc(var(--bu) / 1.3) rgba(0, 0, 0, 0.9),
    /* Sharp Rim Light */ inset calc(var(--bu) / -13) calc(var(--bu) / -13) calc(var(--bu) / 5.2) rgba(255, 255, 255, 0.4),
    inset calc(var(--bu) / -0.43) calc(var(--bu) / -0.43) calc(var(--bu) / 0.28) rgba(255, 255, 255, 0.07),
    0 0 0 calc(var(--bu) / 4) var(--tmg-bb-theme-inverse-color);
  will-change: transform, filter;
  animation: tmg-cone-vibrate 0.2s linear infinite;
}
.tmg-boombox.paused .tmg-bbfs-cone {
  animation-play-state: paused;
}
.tmg-boombox:has(.tmg-bbfm-stereo-left.activated) .tmg-bbfs-cone:last-child,
.tmg-boombox:has(.tmg-bbfm-stereo-right.activated) .tmg-bbfs-cone:first-child {
  --bb-vibe: 0 !important; /* so animations don't go outta sync, it only pauses when they both pause */
}
.tmg-bbfs-cone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: radial-gradient(circle, var(--tmg-bb-theme-inverse-color) 20%, transparent 25%), radial-gradient(circle, var(--tmg-bb-theme-inverse-color) 20%, transparent 25%); /* The Mesh Pattern */
  background-position:
    0 0,
    calc(var(--bu) * 0.25) calc(var(--bu) * 0.25); /* This creates the staggered "stitching" effect */
  background-size: calc(var(--bu) * 0.5) calc(var(--bu) * 0.5); /* Adjust this to change how tiny the holes are */
  opacity: 0.6; /* Make it slightly transparent so the 3D cone lighting shows through */
  pointer-events: none;
}

button.tmg-bbfs-play {
  position: absolute;
  top: 32.5%;
  width: calc(var(--bu) * 2.15);
  height: calc(var(--bu) * 2.15);
}

.tmg-bbfs-tape {
  position: relative;
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  --lw: var(--tmg-bb-line-w);
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.3) 0%, transparent 40%, rgba(255, 255, 255, 0.2) 60%, transparent 100%),
    repeating-linear-gradient(90deg, rgb(0, 0, 0, 0.6) 0 calc(var(--bu) / 26), transparent calc(var(--bu) / 26) calc(var(--bu) / 8.67)) 50% 3.5% / 89% 12% no-repeat,
    repeating-linear-gradient(180deg, rgb(0, 0, 0, 0.6) 0 calc(var(--bu) / 26), transparent calc(var(--bu) / 26) calc(var(--bu) / 8.67)) 50% 3.5% / 89% 12% no-repeat,
    repeating-linear-gradient(90deg, rgb(0, 0, 0, 0.6) 0 calc(var(--bu) / 26), transparent calc(var(--bu) / 26) calc(var(--bu) / 8.67)) 50% 63.5% / 89% 11% no-repeat,
    repeating-linear-gradient(180deg, rgb(0, 0, 0, 0.6) 0 calc(var(--bu) / 26), transparent calc(var(--bu) / 26) calc(var(--bu) / 8.67)) 50% 63.5% / 89% 11% no-repeat,
    linear-gradient(to right, var(--tmg-bb-bland-color) 0 5%, transparent 5% 95%, var(--tmg-bb-bland-color) 95% 100%) top left / 100% 27.5% no-repeat,
    linear-gradient(to right, var(--tmg-bb-bland-color) 0 5%, transparent 5% 95%, var(--tmg-bb-bland-color) 95% 100%) 0% 75.5% / 100% 28% no-repeat,
    linear-gradient(to right, transparent 0 50%, var(--tmg-bb-theme-inverse-color) 50%) 0% 98% / 23% 12% repeat-x,
    linear-gradient(to bottom, var(--tmg-bb-bland-color) 0 2.5%, var(--tmg-bb-dark-bland-color) 2.5% 15%, var(--tmg-bb-bland-color) 15% 27.5%, var(--tmg-bb-theme-inverse-color) 27.5% calc(27.5% + var(--lw)), var(--tmg-bb-supplement-color) calc(27.5% + var(--lw)) 52.5%, var(--tmg-bb-theme-inverse-color) 52.5% calc(52.5% + var(--lw)), var(--tmg-bb-bland-color) calc(52.5% + var(--lw)) calc(55% + var(--lw)), var(--tmg-bb-dark-bland-color) calc(55% + var(--lw)) 67.5%, var(--tmg-bb-bland-color) 67.5% 82.5%, var(--tmg-bb-theme-inverse-color) 82.5% calc(82.5% + var(--lw)), var(--tmg-bb-supplement-color) calc(82.5% + var(--lw)) 100%);
  border-inline: var(--tmg-bb-line-w) solid var(--tmg-bb-theme-inverse-color);
}
.tmg-bbfs-tape::before,
.tmg-bbfs-tape::after {
  content: "";
  position: absolute;
  top: 58%;
  height: 8%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  filter: blur(calc(var(--bu) / 52));
  background: conic-gradient(from 0deg, var(--tmg-bb-theme-inverse-accent-color) 0deg 45deg, var(--tmg-bb-theme-inverse-color) 45deg 90deg, var(--tmg-bb-theme-inverse-accent-color) 90deg 135deg, var(--tmg-bb-theme-inverse-color) 135deg 180deg, var(--tmg-bb-theme-inverse-accent-color) 180deg 225deg, var(--tmg-bb-theme-inverse-color) 225deg 270deg, var(--tmg-bb-theme-inverse-accent-color) 270deg 315deg, var(--tmg-bb-theme-inverse-color) 315deg 360deg); /* Reel detail: A "cog" look using a conic gradient */
  border: calc(var(--bu) / 13) solid var(--tmg-bb-theme-inverse-color);
  animation: tmg-spin 3s linear infinite;
}
.tmg-bbfs-tape::before {
  left: 15%;
}
.tmg-bbfs-tape::after {
  right: 15%;
}
.tmg-boombox.paused .tmg-bbfs-tape::before,
.tmg-boombox.paused .tmg-bbfs-tape::after {
  animation-play-state: paused;
}