:root {
  /* Grid System */
  --grid-breakout: [full-start] minmax(0, 1fr) [content-start] repeat(var(--site--column-count), minmax(0, var(--site--column-width))) [content-end] minmax(0, 1fr) [full-end];
  --grid-breakout-single: [full-start] minmax(0, 1fr) [content-start] minmax(0, calc(100% - var(--site--margin) * 2)) [content-end] minmax(0, 1fr) [full-end];

  /* Typography Transforms */
  --_typography---text-transform--none: none;
  --_typography---text-transform--uppercase: uppercase;
  --_typography---text-transform--captialize: capitalize;
  --_typography---text-transform--lowercase: lowercase;

  /* Animation Durations */
  --duration-default-quarter: 0.2s;
  --duration-default-half: 0.4s;
  --duration-default: 0.8s;
  --duration-default-onehalf: 1.2s;
  --duration-default-double: 1.6s;

  /* Easing Functions */
  --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
  --cubic-bounce: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
  --hover-effect: cubic-bezier(0.175, 0.885, 0.32, 1.1);

  /* Combined Animations */
  --animation-default-quarter: var(--duration-default-quarter) var(--cubic-default);
  --animation-default-half: var(--duration-default-half) var(--cubic-default);
  --animation-default: var(--duration-default) var(--cubic-default);
  --animation-default-onehalf: var(--duration-default-onehalf) var(--cubic-default);
  --animation-default-double: var(--duration-default-double) var(--cubic-default);

  /* Hover Animations */
  --animation-hover-half: var(--duration-default-half) var(--hover-effect);
  --animation-hover-default: var(--duration-default) var(--hover-effect);
  --animation-hover-onehalf: var(--duration-default-onehalf) var(--hover-effect);
  --animation-hover-double: var(--duration-default-double) var(--hover-effect);

  /* Simple Ease Animations */
  --animation-ease: 0.2s ease;
  --animation-ease-double: 0.4s ease;

  /* Box Shadows */
  --card-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  --header-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.19), 0px 6px 6px 0px rgba(0, 0, 0, 0.23);
}

#actual-vuln {
  position: relative;
  background:
    linear-gradient(#38334c, #38334c) padding-box,
    linear-gradient(45deg, #f06, #4a90d9) border-box;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  isolation: isolate;
  /* creates stacking context so z-index:-1 works */
}

#actual-vuln::before {
  content: '';
  position: absolute;
  inset: -10px;
  /* positions the glow around the element */
  border-radius: 12px;
  background: linear-gradient(45deg, #f06, #4a90d9);
  z-index: -1;
  filter: blur(8px);
  opacity: 0.5;
  animation: glow-pulse 3s ease-in-out infinite;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

@keyframes glow-pulse {

  0%,
  100% {
    opacity: 0.4;
    filter: blur(8px);
  }

  50% {
    opacity: 0.7;
    filter: blur(16x);
  }
}

#actual-vuln:hover::before {
  opacity: 0.9;
  filter: blur(20px);
  animation: none;
}

#actual-vuln.expanded {
  z-index: 1000;
  max-width: 500px;

}

#actual-vuln:hover .vuln-btn_content {
  background-color: #534e6b;

}

#actual-vuln.expanded::before {
  inset: -2px;
  /* keep glow tight to expanded card */
}

.vuln-summary {
  opacity: 1;
  transition: opacity 0.3s ease;
}

#actual-vuln.expanded .vuln-summary {
  opacity: 0;
  pointer-events: none;
  display: none;
}

#vuln-info {
  opacity: 0;
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  pointer-events: none;
}

#actual-vuln.expanded #vuln-info {
  opacity: 1;
  display: flex;
  max-height: 500px;
  pointer-events: auto;
}

#actual-vuln {
  transition: all var(--animation-default);

}

.anim-orbit {
  position: relative;
  width: 300px;
  height: 300px;
}

.anim-item {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
  transform-origin: center;
  animation: orbit 10s linear infinite;
}

.code-block.is-anim {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #0D081C #1c1533;
}

/* Webkit browsers */
/* Webkit browsers */
.code-block.is-anim::-webkit-scrollbar {
  height: 8px;
}

.code-block.is-anim::-webkit-scrollbar-track {
  background: #0D081C;
}

.code-block.is-anim::-webkit-scrollbar-thumb {
  background: #0D081C;
  border-radius: 4px;
}

.code-block.is-anim::-webkit-scrollbar-thumb:hover {
  background: #1c1533;
}

.wf-design-mode .anim-item {
  animation: paused;

}

[data-code-highlight].is-active {
  color: black;

}

[data-code-highlight="convention"] {
  position: relative;

}

[data-code-highlight="convention"] span {
  position: relative;

}

[data-code-highlight]:before {
  content: '';
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  transition: width 0.4s ease;
}

[data-code-highlight="convention"]:before {
  background-color: var(--swatch--brand-blue);
}

[data-code-highlight="complexity"]:before {
  background-color: var(--swatch--brand-violet);
}

[data-code-highlight="context"]:before {
  background-color: var(--swatch--brand-2);
}

[data-code-highlight].is-active:before {
  width: 100%;
}