/* The course classroom uses one scene source, with local motion for its actors. */
.courses-mirror-page .shared-code-hero.course-training-hero {
  --training-scene: url('/assets/course-training-robots-20261010.png');
  display: block;
  height: auto;
  min-height: 0;
  aspect-ratio: 2048 / 600;
  padding: 0;
  background: #fbfdff;
  border-bottom: 1px solid #e9f0f8;
}

.courses-mirror-page .shared-code-hero.course-training-hero::before { background: none; }
.courses-mirror-page .course-training-hero .shared-code-hero__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: fill;
  /* Keep only the blank middle here; the side scenes scale without distortion. */
  -webkit-mask-image: linear-gradient(90deg, transparent 32%, #000 36%, #000 65%, transparent 69%);
  mask-image: linear-gradient(90deg, transparent 32%, #000 36%, #000 65%, transparent 69%);
}

.courses-mirror-page .course-training-hero .shared-code-hero__copy {
  position: absolute;
  top: calc(50% - 1.93vw);
  left: 50%;
  width: min(80%, 1040px);
  padding: 0;
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, "Hiragino Kaku Gothic Pro", "MS PGothic", Helvetica, sans-serif;
  transform: translate(-50%, -50%);
  animation: none;
}
.courses-mirror-page .course-training-hero .shared-code-hero__eyebrow { font-size: clamp(14px, 1.21vw, 24px); font-weight: 700; line-height: 1.35; letter-spacing: .03em; }
.courses-mirror-page .course-training-hero .shared-code-hero__title { margin-top: 6px; font-size: clamp(35px, 3.43vw, 67px); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
.courses-mirror-page .course-training-hero .shared-code-hero__underline { width: clamp(48px, 3.71vw, 73px); height: clamp(4px, .39vw, 7px); margin-top: clamp(7px, .63vw, 13px); }
.courses-mirror-page .course-training-hero .shared-code-hero__description { margin-top: clamp(13px, 1.16vw, 22px); font-size: clamp(14px, 1.16vw, 22px); font-weight: 500; line-height: 1.78; letter-spacing: .01em; word-break: normal; line-break: strict; text-wrap: pretty; }
.courses-mirror-page .course-training-hero .shared-code-hero__description span { display: block; word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: inherit; }

.course-training-hero__stage { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.course-training-hero__scene { position: absolute; top: 0; height: 100%; background-image: var(--training-scene); background-repeat: no-repeat; contain: layout paint; }
/* Source crops occupy 34% / 29% of a 2132 × 738 canvas, scaled to banner height. */
.course-training-hero__scene--lecture { left: 0; width: 28.776042%; background-size: 294.117647% 100%; background-position: left center; }
.course-training-hero__scene--practice { right: 0; width: 24.544271%; background-size: 344.827586% 100%; background-position: right center; }
.course-training-hero__part { position: absolute; inset: 0; background-image: var(--training-scene); background-repeat: no-repeat; mask-repeat: no-repeat; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; }
.course-training-hero__scene--lecture .course-training-hero__part { background-size: 294.117647% 100%; background-position: left center; }
.course-training-hero__scene--practice .course-training-hero__part { background-size: 344.827586% 100%; background-position: right center; }

.course-training-hero__part--pointing {
  --part-mask: radial-gradient(ellipse 8.2% 5.2% at 49.2% 33.4%, #000 48%, #000b 73%, transparent 100%);
  transform-origin: 55.5% 35%;
  animation: course-teacher-point 6.8s ease-in-out infinite;
}
.course-training-hero__part--teacher-head {
  --part-mask: radial-gradient(ellipse 4.4% 5.8% at 58.3% 28.3%, #000 52%, #000b 75%, transparent 100%);
  transform-origin: 58.4% 33%;
  animation: course-robot-attention 6.8s ease-in-out infinite -1s;
}
.course-training-hero__part--student-hand {
  --part-mask: radial-gradient(ellipse 4.8% 4.2% at 35.7% 62.4%, #000 50%, #000b 74%, transparent 100%);
  transform-origin: 38% 65%;
  animation: course-robot-type 3.4s linear infinite -.6s;
}
.course-training-hero__part--mentor-head {
  --part-mask: radial-gradient(ellipse 5.2% 6.4% at 51% 37.2%, #000 54%, #000b 75%, transparent 100%);
  transform-origin: 51% 43%;
  animation: course-robot-attention 5.6s ease-in-out infinite -2.1s;
}
.course-training-hero__part--typing-left {
  --part-mask: radial-gradient(ellipse 4.4% 3.5% at 58.4% 60.2%, #000 50%, #000b 74%, transparent 100%);
  transform-origin: 54% 63%;
  animation: course-robot-type 2.9s linear infinite;
}
.course-training-hero__part--typing-right {
  --part-mask: radial-gradient(ellipse 4.6% 3.7% at 63.4% 63.6%, #000 50%, #000b 74%, transparent 100%);
  transform-origin: 59% 66%;
  animation: course-robot-type 2.9s linear infinite -.35s;
}
.course-training-hero__part { -webkit-mask-image: var(--part-mask); mask-image: var(--part-mask); }

.course-training-hero__screen { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
.course-training-hero__scan { fill: none; stroke: #42e2ee; stroke-width: 12; opacity: 0; filter: blur(7px); }
.course-training-hero__scan--lecture { animation: course-lecture-scan 6.8s ease-in-out infinite; }
.course-training-hero__scan--practice { animation: course-practice-scan 5.6s ease-in-out infinite -1.4s; }
.course-training-hero__diagram { fill: none; stroke: #16bcff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 70; animation: course-diagram-flow 6.8s linear infinite; opacity: .75; }
.course-training-hero__focus { fill: none; stroke: #21c9f0; stroke-width: 2; transform-origin: 266px 261px; animation: course-lesson-focus 6.8s ease-in-out infinite; }
.course-training-hero__checks circle { fill: #b7f9ff; opacity: 0; animation: course-exercise-check 5.6s ease-in-out infinite; }
.course-training-hero__checks circle:nth-child(2) { animation-delay: .8s; }
.course-training-hero__checks circle:nth-child(3) { animation-delay: 1.6s; }
.course-training-hero__cursor { fill: none; stroke: #147dff; stroke-width: 1.5; stroke-linejoin: round; animation: course-practice-cursor 5.6s ease-in-out infinite; }

.course-training-hero__stage *, .course-training-hero__stage *::before, .course-training-hero__stage *::after { animation-play-state: paused; }
.course-training-hero.is-training-active .course-training-hero__stage *, .course-training-hero.is-training-active .course-training-hero__stage *::before, .course-training-hero.is-training-active .course-training-hero__stage *::after { animation-play-state: running; }

@keyframes course-teacher-point { 0%, 18%, 55%, 100% { transform: rotate(0); } 28%, 42% { transform: rotate(-1.1deg); } 68%, 80% { transform: rotate(.6deg); } }
@keyframes course-robot-attention { 0%, 26%, 70%, 100% { transform: rotate(0); } 40%, 52% { transform: rotate(.8deg) translateY(.6px); } 82%, 90% { transform: rotate(-.5deg); } }
@keyframes course-robot-type { 0%, 9%, 18%, 33%, 50%, 60%, 76%, 100% { transform: translateY(0); } 5%, 14%, 27%, 44%, 55%, 68% { transform: translateY(1.3px) rotate(.15deg); } }
@keyframes course-lecture-scan { 0%, 14%, 66%, 100% { opacity: 0; transform: translateY(-70px); } 22% { opacity: .2; } 54% { opacity: .25; transform: translateY(45px); } }
@keyframes course-practice-scan { 0%, 16%, 72%, 100% { opacity: 0; transform: translateY(-75px); } 24% { opacity: .35; } 62% { opacity: .35; transform: translateY(30px); } }
@keyframes course-diagram-flow { to { stroke-dashoffset: -160; } }
@keyframes course-lesson-focus { 0%, 16%, 64%, 100% { opacity: 0; transform: scale(.8); } 28%, 42% { opacity: .75; } 54% { opacity: 0; transform: scale(1.3); } }
@keyframes course-exercise-check { 0%, 10%, 52%, 100% { opacity: 0; } 20%, 36% { opacity: .4; } }
@keyframes course-practice-cursor { 0%, 14%, 100% { transform: translate(0, 0); opacity: 0; } 24%, 42% { transform: translate(-10px, -12px); opacity: .85; } 58%, 78% { transform: translate(-18px, 3px); opacity: .85; } }

@media (max-width: 1023px) {
  .courses-mirror-page .shared-code-hero.course-training-hero { aspect-ratio: auto; padding: 41px 0 18px; }
  .courses-mirror-page .course-training-hero .shared-code-hero__background { display: none; }
  .courses-mirror-page .course-training-hero .shared-code-hero__copy { position: relative; top: auto; left: auto; width: calc(100% - 40px); max-width: 680px; margin: 0 auto; transform: none; }
  .courses-mirror-page .course-training-hero .shared-code-hero__eyebrow { font-size: clamp(12px, 1.33vw, 14px); }
  .courses-mirror-page .course-training-hero .shared-code-hero__title { font-size: clamp(27px, 3.5vw, 35px); margin-top: 4px; }
  .courses-mirror-page .course-training-hero .shared-code-hero__underline { height: 4px; margin-top: 7px; }
  .courses-mirror-page .course-training-hero .shared-code-hero__description { font-size: clamp(12px, 1.25vw, 14px); line-height: 1.6; margin-top: 10px; }
  .course-training-hero__stage { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 8px; width: calc(100% - 16px); max-width: 680px; margin: 14px auto 0; }
  .course-training-hero__scene { position: relative; top: auto; left: auto; right: auto; width: 100%; height: auto; }
  .course-training-hero__scene--lecture { aspect-ratio: 696.32 / 709; }
  .course-training-hero__scene--practice { aspect-ratio: 593.92 / 709; }
}
@media (max-width: 767px) {
  .courses-mirror-page .shared-code-hero.course-training-hero { padding-top: 49px; }
  .courses-mirror-page .course-training-hero .shared-code-hero__eyebrow { font-size: 16px; line-height: 1.7; }
  .courses-mirror-page .course-training-hero .shared-code-hero__title { font-size: clamp(32px, 8.8vw, 42px); line-height: 1.35; margin-top: 8px; }
  .courses-mirror-page .course-training-hero .shared-code-hero__underline { width: 45px; }
  .courses-mirror-page .course-training-hero .shared-code-hero__description { font-size: 16px; line-height: 1.85; margin-top: 22px; }
  .courses-mirror-page .course-training-hero .shared-code-hero__description span { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .course-training-hero__stage *, .course-training-hero__stage *::before, .course-training-hero__stage *::after { animation: none !important; }
  .course-training-hero__scan, .course-training-hero__focus, .course-training-hero__cursor, .course-training-hero__checks { opacity: 0; }
}