.techwp-cbg-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0;
  pointer-events: none !important;
  overflow: hidden !important;
  background: #0a0b0f;
}

@keyframes techwp-cbg-caret {
  0%, 46% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.cbg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

.code-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.62;
  white-space: pre;
}

.code-bg-wall {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: 100%;
  width: 100%;
  height: 100%;
  column-gap: 2.5rem;
  padding: 0 1.5rem;
  position: relative;
  z-index: 0;
}

.code-bg-dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 85% 75% at 50% 38%,
    rgb(10 11 15 / 0.55),
    rgb(10 11 15 / 0.32) 70%,
    rgb(10 11 15 / 0.42)
  );
}

.code-bg-col {
  display: none;
  position: relative;
  overflow: hidden;
  height: 100%;
  min-width: 0;
}
.code-bg-col:nth-child(-n + 1) { display: block; }

@media (min-width: 768px) {
  .code-bg-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    padding: 0 1.75rem;
  }
  .code-bg-col:nth-child(-n + 2) { display: block; }
}
@media (min-width: 1800px) {
  .code-bg-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.75rem;
    padding: 0 2rem;
  }
  .code-bg-col:nth-child(-n + 3) { display: block; }
}
@media (min-width: 3000px), (min-width: 2400px) and (min-aspect-ratio: 2.2/1) {
  .code-bg-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2.75rem;
    padding: 0 2rem;
  }
  .code-bg-col:nth-child(-n + 4) { display: block; }
}

.code-bg-col-inner {
  animation: none !important;
  will-change: transform;
  opacity: 0.3;
  color: #8b93a4;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.code-caret {
  display: inline-block;
  width: 6px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: #61afefcc;
  animation: techwp-cbg-caret 1.1s steps(1, end) infinite !important;
}
.code-line { min-height: 1.62em; }

.morph-blobs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.morph-blob {
  position: absolute;
  left: var(--blob-x);
  top: var(--blob-y);
  width: var(--blob-s);
  height: var(--blob-s);
  margin-left: calc(var(--blob-s) / -2);
  margin-top: calc(var(--blob-s) / -2);
  border-radius: 42% 58% 48% 52% / 52% 42% 58% 48%;
  background: radial-gradient(
    58% 62% at 38% 36%,
    hsla(var(--blob-h), var(--blob-sat, 72%), var(--blob-lit, 56%), var(--blob-a1, 0.28)),
    hsla(var(--blob-h), var(--blob-sat2, 64%), var(--blob-lit2, 44%), var(--blob-a2, 0.10)) 46%,
    transparent 74%
  );
  animation: none !important;
  will-change: transform, border-radius;
  transform-origin: center center;
}