.garland-mask {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.garland-banner {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 190px;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 6px;
  z-index: 0;
  opacity: var(--garland-opacity, 1);
}

.bot-hero .bot-hero-content {
  position: relative;
  z-index: 1;
}

.bot-hero.bot-detail-hero .garland-banner {
  left: -20px;
  right: -20px;
  top: -36px;
  height: 200px;
}

.garland-shell {
  width: 100%;
  max-width: none;
  height: 100%;
}

.garland-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.garland-wire {
  fill: none;
  stroke: rgba(49, 63, 92, 0.8);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="dark"] .garland-wire {
  stroke: rgba(214, 224, 255, 0.65);
}

.garland-bulb {
  fill: var(--garland-bulb-primary, #ffd36e);
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 1.4;
  transform-origin: center;
  animation: garland-twinkle 3.2s ease-in-out infinite;
  opacity: 0.95;
}

.garland-bulb[data-tone="1"] {
  fill: var(--garland-bulb-alt, #7fd3ff);
  animation-duration: 3.7s;
}

.garland-bulb[data-tone="2"] {
  fill: var(--garland-bulb-accent, #ff91b2);
  animation-duration: 4.05s;
}

.garland-bulb[data-tone="3"] {
  fill: #9afc9c;
  animation-duration: 3.55s;
}

@keyframes garland-twinkle {
  0% {
    opacity: 0.64;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.16));
  }
  40% {
    opacity: 1;
    filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.55));
  }
  70% {
    opacity: 0.72;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
  }
  100% {
    opacity: 0.88;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
  }
}