/* Rainbow 3D LED rings for both platters. */
.hardware-layout .platter-upload-trigger {
  display: none !important;
}

.hardware-layout .platter {
  isolation: isolate;
  overflow: visible;
}

.hardware-layout .platter::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: -10px;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  background: conic-gradient(
    from 0deg,
    #ff174f,
    #ff7a00,
    #ffe600,
    #31ff65,
    #20e6ff,
    #2867ff,
    #a829ff,
    #ff2abf,
    #ff174f
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter:
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 8px #28dfff)
    drop-shadow(0 0 13px #ff2a76);
  animation: platter-rainbow-led 1.8s linear infinite;
}

.hardware-layout .platter::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -13px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    #ff174f55,
    #ffae0055,
    #55ff6655,
    #25dcff55,
    #733cff55,
    #ff2bb855,
    #ff174f55
  );
  filter: blur(11px);
  animation: platter-rainbow-led 1.8s linear infinite;
}

@keyframes platter-rainbow-led {
  to {
    transform: rotate(360deg);
  }
}

.mini-main-decks .hardware-layout .platter::after {
  inset: -5px;
  padding: 3px;
}

.mini-main-decks .hardware-layout .platter::before {
  inset: -7px;
  filter: blur(6px);
}