.crt,
pre:has(code[data-crt], code[data-lang=""]) {
  position: relative;
  animation: flicker 0.25s alternate infinite;
  margin-inline: auto;
  box-shadow: var(--shadow-glow);
  background-image: var(--crt-bg);
  background-color: transparent !important;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  color: var(--accent-color) !important;
  font-weight: var(--font-weight-medium);
  text-shadow: var(--text-shadow-glow);

  @keyframes flicker {
    25% {
      opacity: 0.95;
    }

    50% {
      opacity: 0.85;
    }

    75% {
      opacity: 1;
    }

    to {
      opacity: 0.9;
    }
  }

  &::before,
  &::after {
    position: absolute;
    inset: 0;
    content: "";
  }

  &::before {
    opacity: var(--scanlines-opacity);
    z-index: 1;
    animation: scanlines 0.1s linear infinite;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.25),
      rgba(0, 0, 0, 0.25) 0.125rem,
      transparent 0.125rem,
      transparent 0.25rem
    );
    background-position-y: -0.125rem;
    background-repeat: no-repeat;
    pointer-events: none;

    @keyframes scanlines {
      to {
        background-position-y: 0.125rem;
      }
    }
  }

  &::after {
    opacity: 0.05;
    animation: scanline 5s linear infinite;
    background-image: linear-gradient(
      to bottom,
      transparent,
      var(--accent-color) 16rem
    );
    background-position-y: -16rem;
    background-size: 100% 16rem;
    pointer-events: none;

    @keyframes scanline {
      to {
        background-position-y: calc(100% + 16rem);
      }
    }
  }

  & > code {
    display: block;
    border-radius: inherit;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}