/* Hallmark · built: the project · redesign: polish · genre: modern-minimal · theme: brand · hero: Stage · signature: pixel robots performing different tasks · v2.0.0 */
/* Critique: distinct robot bodies and recognisable actions replace the abstract model graphic. */
/* Hallmark · waive 80 · user explicitly requested pixel robot animation · recognisable task scenes communicate cross-embodiment research */
.opening-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xl);
}
.opening-text { min-width: 0; }
.opening-text .hero-copy { margin-top: var(--space-lg); padding-bottom: 0; }
.robot-worlds { position: relative; min-width: 0; margin: 0; }
.robot-worlds__art { position: relative; aspect-ratio: 400 / 272; }
.robot-worlds__poster, .robot-worlds__canvas { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.robot-worlds__canvas { position: absolute; inset: 0; visibility: hidden; }
.robot-worlds.is-ready .robot-worlds__canvas { visibility: visible; }
.robot-worlds.is-ready .robot-worlds__poster { visibility: hidden; }
.robot-worlds__toggle { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: var(--space-sm); border: 0; background: var(--color-paper); color: var(--color-muted); border-radius: var(--radius-pill); cursor: pointer; }
.robot-worlds__toggle[hidden] { display: none; }
.robot-worlds__toggle svg { width: 18px; height: 18px; }
.robot-worlds__toggle:hover, .robot-worlds__toggle:active { background: var(--color-paper-2); color: var(--color-ink); }
.robot-worlds__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.robot-worlds__toggle .pixel-play, .robot-worlds__toggle[aria-pressed='true'] .pixel-pause { display: none; }
.robot-worlds__toggle[aria-pressed='true'] .pixel-play { display: block; }
@media (prefers-reduced-motion: reduce) { .robot-worlds__toggle { display: none; } }
@media (max-width: 760px) {
  .opening-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .opening-text .hero-copy { margin-top: var(--space-lg); }
}