.codevise-coding-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  color: #000;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: clamp(15px, 1.7vw, 22px);
  line-height: 1.65;
  padding: 32px;
  box-sizing: border-box;
  text-align: left;
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}
.codevise-code {
  position: relative;
  width: max-content;
  min-width: 100%;
  white-space: pre;
  will-change: transform;
  transition: transform 0.15s linear;
}
.codevise-cursor {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: #000;
  animation: codeviseBlink .8s infinite;
}
.codevise-coding-animation .tag,
.codevise-coding-animation .attr,
.codevise-coding-animation .value,
.codevise-coding-animation .text {
  color: #000;
}
.codevise-coding-animation .comment {
  color: #000;
  opacity: .45;
}
@keyframes codeviseBlink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .codevise-coding-animation .codevise-cursor { animation: none; }
}
@media (max-width: 600px) {
  .codevise-coding-animation { padding: 20px; font-size: 14px; opacity: 0.05; }
}