:is(.shared-code-hero, .codex-hero) {
  isolation: isolate;
  background: #fbfdff;
}

:is(.shared-code-hero, .codex-hero)::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
}

:is(.shared-code-hero__background, .codex-hero__background) {
  z-index: 0;
  max-width: none;
  transform: none;
  pointer-events: none;
  user-select: none;
}

:is(.shared-code-hero__copy, .codex-hero__copy) {
  z-index: 4;
  animation: secondary-hero-copy-in 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.secondary-hero-workstage {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  contain: layout paint style;
  pointer-events: none;
}

.secondary-hero-hand,
.secondary-hero-head {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  will-change: transform;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.secondary-hero-hand--left-a {
  transform-origin: 16.2% 53.5%;
  animation: secondary-hero-left-hand-a 6.4s linear infinite -1.8s;
  -webkit-mask-image: radial-gradient(ellipse 2.25% 7.1% at 16.2% 53.5%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
  mask-image: radial-gradient(ellipse 2.25% 7.1% at 16.2% 53.5%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
}

.secondary-hero-hand--left-b {
  transform-origin: 18.3% 54.3%;
  animation: secondary-hero-left-hand-b 6.4s linear infinite -1.8s;
  -webkit-mask-image: radial-gradient(ellipse 2.15% 7.2% at 18.3% 54.3%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
  mask-image: radial-gradient(ellipse 2.15% 7.2% at 18.3% 54.3%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
}

.secondary-hero-hand--right-a {
  transform-origin: 84.8% 47.6%;
  animation: secondary-hero-right-hand-a 5.6s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse 2.55% 7.4% at 84.8% 47.6%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
  mask-image: radial-gradient(ellipse 2.55% 7.4% at 84.8% 47.6%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
}

.secondary-hero-hand--right-b {
  transform-origin: 87.3% 49.5%;
  animation: secondary-hero-right-hand-b 5.6s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse 2.45% 7.6% at 87.3% 49.5%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
  mask-image: radial-gradient(ellipse 2.45% 7.6% at 87.3% 49.5%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
}

.secondary-hero-head--left {
  transform-origin: 19% 51.5%;
  animation: secondary-hero-left-attention 6.4s ease-in-out infinite -1.8s;
  -webkit-mask-image: radial-gradient(ellipse 1.9% 6.7% at 19% 47.9%, #000 0 55%, rgba(0, 0, 0, 0.78) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 1.9% 6.7% at 19% 47.9%, #000 0 55%, rgba(0, 0, 0, 0.78) 72%, transparent 100%);
}

.secondary-hero-head--right {
  transform-origin: 87.9% 40.5%;
  animation: secondary-hero-right-attention 5.6s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(ellipse 2.4% 8.8% at 87.9% 33.2%, #000 0 55%, rgba(0, 0, 0, 0.78) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 2.4% 8.8% at 87.9% 33.2%, #000 0 55%, rgba(0, 0, 0, 0.78) 72%, transparent 100%);
}

.secondary-hero-mouse-feedback,
.secondary-hero-keyboard-feedback,
.secondary-hero-screen-feedback {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.secondary-hero-mouse-feedback {
  top: 51.2%;
  left: 17.5%;
  width: clamp(5px, 0.46vw, 10px);
  height: clamp(3px, 0.28vw, 6px);
  background: rgba(30, 211, 218, 0.76);
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(30, 211, 218, 0.62);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-10deg);
  animation: secondary-hero-mouse-click 6.4s linear infinite -1.8s;
}

.secondary-hero-keyboard-feedback {
  top: 49.5%;
  left: 84.3%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1px, 0.1vw, 2px);
  width: 3.2%;
  height: 6.9%;
  padding: 0.25%;
  clip-path: polygon(3% 32%, 55% 0, 100% 50%, 52% 100%);
  transform: translateZ(0);
}

.secondary-hero-keyboard-feedback span {
  align-self: center;
  height: clamp(2px, 0.18vw, 4px);
  background: #1ed5dc;
  border-radius: 999px;
  box-shadow: 0 0 5px rgba(30, 213, 220, 0.72);
  opacity: 0.08;
}

.secondary-hero-keyboard-feedback span:nth-child(3n + 1) {
  animation: secondary-hero-key-a 5.6s linear infinite;
}

.secondary-hero-keyboard-feedback span:nth-child(3n + 2) {
  animation: secondary-hero-key-b 5.6s linear infinite;
}

.secondary-hero-keyboard-feedback span:nth-child(3n) {
  animation: secondary-hero-key-c 5.6s linear infinite;
}

.secondary-hero-screen-feedback {
  overflow: hidden;
  background: repeating-linear-gradient(180deg, rgba(39, 218, 224, 0.1) 0 1px, transparent 1px 5px), rgba(16, 164, 191, 0.03);
  opacity: 0.84;
  mix-blend-mode: screen;
}

.secondary-hero-screen-feedback::before,
.secondary-hero-screen-feedback::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.secondary-hero-screen-feedback::before {
  top: 0;
  right: 0;
  left: 0;
  height: 20%;
  background: linear-gradient(180deg, transparent, rgba(49, 224, 230, 0.46) 52%, transparent);
  opacity: 0;
}

.secondary-hero-screen-feedback::after {
  top: 58%;
  left: 14%;
  width: 17%;
  height: clamp(1px, 0.11vw, 2px);
  background: #56f1f3;
  border-radius: 999px;
  box-shadow: 0 0 5px rgba(59, 228, 233, 0.76);
  opacity: 0;
}

.secondary-hero-screen-feedback--left {
  top: 28%;
  left: 7.8%;
  width: 7.1%;
  height: 21.5%;
  clip-path: polygon(6% 6%, 96% 0, 96% 91%, 6% 100%);
}

.secondary-hero-screen-feedback--left::before {
  animation: secondary-hero-screen-scan-left 6.4s linear infinite -1.64s;
}

.secondary-hero-screen-feedback--left::after {
  animation: secondary-hero-screen-caret-left 6.4s steps(1, end) infinite -1.64s;
}

.secondary-hero-screen-feedback--right {
  top: 54.5%;
  left: 88.7%;
  width: 3.4%;
  height: 10%;
  clip-path: polygon(10% 20%, 88% 0, 100% 58%, 25% 100%);
}

.secondary-hero-screen-feedback--right::before {
  animation: secondary-hero-screen-scan-right 5.6s linear infinite 160ms;
}

.secondary-hero-screen-feedback--right::after {
  top: 46%;
  left: 16%;
  width: 21%;
  animation: secondary-hero-screen-caret-right 5.6s steps(1, end) infinite 160ms;
}

.secondary-hero-workstage *,
.secondary-hero-workstage *::before,
.secondary-hero-workstage *::after {
  animation-play-state: paused !important;
}

:is(.shared-code-hero, .codex-hero).is-secondary-hero-working .secondary-hero-workstage *,
:is(.shared-code-hero, .codex-hero).is-secondary-hero-working .secondary-hero-workstage *::before,
:is(.shared-code-hero, .codex-hero).is-secondary-hero-working .secondary-hero-workstage *::after {
  animation-play-state: running !important;
}

@keyframes secondary-hero-right-hand-a {
  0%, 3%, 6%, 11%, 14%, 19%, 22%, 29%, 32%, 44%, 71%, 77%, 81%, 87%, 91%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  4.5%, 12.5%, 20.5%, 30.5%, 74%, 79%, 89% { transform: translate3d(-0.35px, 1.55px, 0) rotate(-0.2deg); }
}

@keyframes secondary-hero-right-hand-b {
  0%, 7%, 10%, 15%, 18%, 24%, 27%, 34%, 37%, 44%, 72%, 82%, 86%, 92%, 96%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  8.5%, 16.5%, 25.5%, 35.5%, 84%, 94% { transform: translate3d(0.35px, 1.4px, 0) rotate(0.18deg); }
}

@keyframes secondary-hero-left-hand-a {
  0%, 8%, 14%, 21%, 27%, 44%, 61%, 68%, 77%, 83%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  11%, 24%, 64%, 80% { transform: translate3d(-0.25px, 1.45px, 0) rotate(-0.16deg); }
}

@keyframes secondary-hero-left-hand-b {
  0%, 29%, 34%, 47%, 52%, 70%, 74%, 86%, 91%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  31.5%, 49.5%, 72%, 88.5% { transform: translate3d(0.6px, 0.7px, 0) rotate(0.14deg); }
}

@keyframes secondary-hero-left-attention {
  0%, 35%, 43%, 72%, 80%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  39%, 76% { transform: translate3d(-0.3px, 0.65px, 0) rotate(-0.35deg); }
}

@keyframes secondary-hero-right-attention {
  0%, 43%, 48%, 64%, 69%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  54%, 60% { transform: translate3d(-0.4px, 0.8px, 0) rotate(-0.42deg); }
}

@keyframes secondary-hero-mouse-click {
  0%, 8%, 14%, 21%, 27%, 44%, 61%, 68%, 77%, 83%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scale(0.72); }
  10%, 12%, 23%, 25%, 63%, 66%, 79%, 81% { opacity: 0.82; transform: translate(-50%, -50%) rotate(-10deg) scale(1); }
}

@keyframes secondary-hero-key-a {
  0%, 3%, 6%, 19%, 22%, 29%, 32%, 71%, 77%, 87%, 91%, 100% { opacity: 0.08; transform: translateY(0); }
  4.5%, 20.5%, 30.5%, 74%, 89% { opacity: 0.86; transform: translateY(1px); }
}

@keyframes secondary-hero-key-b {
  0%, 7%, 10%, 15%, 18%, 34%, 37%, 72%, 82%, 86%, 92%, 96%, 100% { opacity: 0.08; transform: translateY(0); }
  8.5%, 16.5%, 35.5%, 84%, 94% { opacity: 0.76; transform: translateY(1px); }
}

@keyframes secondary-hero-key-c {
  0%, 11%, 14%, 24%, 27%, 44%, 78%, 81%, 100% { opacity: 0.08; transform: translateY(0); }
  12.5%, 25.5%, 79% { opacity: 0.66; transform: translateY(1px); }
}

@keyframes secondary-hero-screen-scan-left {
  0%, 8%, 9%, 26%, 27%, 61%, 62%, 81%, 82%, 100% { opacity: 0; transform: translate3d(0, -100%, 0); }
  11%, 24%, 64%, 79% { opacity: 0.72; }
  25%, 80% { opacity: 0; transform: translate3d(0, 500%, 0); }
}

@keyframes secondary-hero-screen-caret-left {
  0%, 10%, 15%, 22%, 28%, 62%, 67%, 78%, 84%, 100% { opacity: 0; transform: translateX(0); }
  12%, 24%, 64%, 80% { opacity: 0.9; transform: translateX(230%); }
}

@keyframes secondary-hero-screen-scan-right {
  0%, 3%, 4%, 38%, 44%, 71%, 72%, 94%, 100% { opacity: 0; transform: translate3d(0, -100%, 0); }
  7%, 35%, 75%, 91% { opacity: 0.66; }
  37%, 93% { opacity: 0; transform: translate3d(0, 500%, 0); }
}

@keyframes secondary-hero-screen-caret-right {
  0%, 8%, 12%, 20%, 24%, 32%, 45%, 73%, 79%, 87%, 95%, 100% { opacity: 0; transform: translateX(0); }
  10%, 22%, 34%, 76%, 84%, 91% { opacity: 0.88; transform: translateX(210%); }
}

@keyframes secondary-hero-copy-in {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

@media (min-width: 1025px) {
  :is(.shared-code-hero, .codex-hero) {
    height: auto;
    min-height: 0;
    aspect-ratio: 2132 / 737;
  }

  :is(.shared-code-hero__background, .codex-hero__background) {
    object-fit: contain;
    object-position: center;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  :is(.shared-code-hero, .codex-hero) {
    display: block;
    height: auto;
    min-height: 0;
    aspect-ratio: 2132 / 737;
  }

  :is(.shared-code-hero__background, .codex-hero__background) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border: 0;
  }

  :is(.shared-code-hero__copy, .codex-hero__copy) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(calc(100% - 48px), 760px);
    padding: 24px;
    margin: 0;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 767px) {
  :is(.shared-code-hero, .codex-hero) {
    height: clamp(286px, 42svh, 350px);
    min-height: 286px;
  }

  :is(.shared-code-hero, .codex-hero)::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 42%, rgba(255, 255, 255, 0.46) 68%, rgba(255, 255, 255, 0.08) 100%);
  }

  :is(.shared-code-hero__background, .codex-hero__background) {
    inset: -3%;
    width: 106%;
    height: 106%;
    object-fit: cover;
    object-position: 98% center;
  }

  .secondary-hero-hand,
  .secondary-hero-head {
    inset: -3%;
    background-position: 98% center;
    background-size: cover;
  }

  .secondary-hero-hand--left-a,
  .secondary-hero-hand--left-b,
  .secondary-hero-head--left,
  .secondary-hero-mouse-feedback,
  .secondary-hero-screen-feedback--left {
    display: none;
  }

  .secondary-hero-hand--right-a {
    transform-origin: 70% 47.6%;
    -webkit-mask-image: radial-gradient(ellipse 5.8% 7.4% at 70% 47.6%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
    mask-image: radial-gradient(ellipse 5.8% 7.4% at 70% 47.6%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
  }

  .secondary-hero-hand--right-b {
    transform-origin: 75.5% 49.5%;
    -webkit-mask-image: radial-gradient(ellipse 5.6% 7.6% at 75.5% 49.5%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
    mask-image: radial-gradient(ellipse 5.6% 7.6% at 75.5% 49.5%, #000 0 54%, rgba(0, 0, 0, 0.82) 71%, transparent 100%);
  }

  .secondary-hero-head--right {
    transform-origin: 76.8% 40.5%;
    -webkit-mask-image: radial-gradient(ellipse 5.4% 8.8% at 76.8% 33.2%, #000 0 55%, rgba(0, 0, 0, 0.78) 72%, transparent 100%);
    mask-image: radial-gradient(ellipse 5.4% 8.8% at 76.8% 33.2%, #000 0 55%, rgba(0, 0, 0, 0.78) 72%, transparent 100%);
  }

  .secondary-hero-keyboard-feedback {
    top: 49.5%;
    left: 70%;
    width: 7.2%;
    height: 6.9%;
  }

  .secondary-hero-screen-feedback--right {
    top: 54.5%;
    left: 79.7%;
    width: 7.6%;
    height: 10%;
  }

  :is(.shared-code-hero__copy, .codex-hero__copy) {
    left: 4%;
    width: min(72%, 360px);
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.shared-code-hero__copy, .codex-hero__copy) { animation: none; }
  .secondary-hero-workstage { display: none; }
}