/* The typing terminal (job 124, moved to its own file in job 151): coder.axforge.ai's hero and the main page's
   right hero. term.js types a setup, spins the card (rotate) and types the next one. The page places .cx-term. */
.cx-term{perspective:1400px;min-width:0}
.cx-term__card{background:var(--well);border:1px solid rgba(84,173,255,.45);border-radius:var(--r);overflow:hidden;
  transform:rotateY(-9deg) rotateX(3deg);
  box-shadow:0 0 0 1px rgba(46,155,255,.1),0 0 2.75rem -.5rem rgba(46,155,255,.55),0 1.5rem 3rem -1.5rem #000}
.cx-term__bar{display:flex;align-items:center;gap:.4rem;padding:var(--s3) var(--s4);border-bottom:1px solid var(--hair)}
.cx-term__bar i{width:.62rem;height:.62rem;border-radius:50%;background:#e5534b;opacity:.8}
.cx-term__bar i:nth-child(2){background:var(--amber-400)}
.cx-term__bar i:nth-child(3){background:var(--green-400)}
.cx-term__title{flex:1;margin-right:1.6rem;text-align:center;font-family:var(--mono);font-size:var(--t-2);color:var(--dim);
  letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-term pre{padding:var(--s4);font-family:var(--mono);font-size:var(--t-1);line-height:1.85;color:var(--text);
  white-space:pre;overflow-x:auto;min-height:calc(9.25em + 2 * var(--s4))}
.cx-term__foot{padding:0 var(--s4) var(--s4)}
.cx-caret{display:inline-block;width:.55em;height:1.1em;margin-left:1px;vertical-align:-.2em;background:var(--blue-400);
  animation:cx-blink 1s step-end infinite}
@keyframes cx-blink{50%{opacity:0}}
@media (max-width:900px){.cx-term__card{transform:rotateY(-5deg) rotateX(2deg)}}
@media (max-width:560px){.cx-term pre{font-size:.74rem}}
@media (prefers-reduced-motion:reduce){.cx-caret{animation:none}}