/* One original mech, in the space above a heading. No line across the page. */
.mech-ledge {
  display: block;
  position: relative;
  width: min(100%, 280px);
  height: 122px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.mech-traveller {
  position: absolute;
  inset: 0 auto auto 0;
  width: 80px;
  height: 112px;
  z-index: 18;
  pointer-events: none;
  visibility: hidden;
  contain: layout style;
}
.mech-traveller[data-visible="true"] { visibility: visible; }
.mech-traveller__body { position: absolute; inset: 0; clip-path: inset(-35% -30% -5%); }
.mech-traveller canvas { display: block; width: 100%; height: 100%; }
.mech-traveller__shadow {
  position: absolute;
  left: 22px;
  top: 101px;
  width: 36px;
  height: 4px;
  border-radius: 50%;
  background: #68cfce55;
}
.mech-tear {
  position: absolute;
  left: -9px;
  top: 89px;
  width: 98px;
  height: 31px;
  overflow: hidden;
  color: #8ceadd;
  background: #76ead8;
  opacity: 0;
  transform: scale(.1, .03);
  clip-path: polygon(0 53%, 10% 35%, 15% 43%, 25% 8%, 34% 30%, 45% 0, 55% 23%, 67% 11%, 74% 39%, 88% 26%, 94% 47%, 100% 56%, 89% 66%, 80% 92%, 65% 76%, 54% 100%, 43% 77%, 33% 95%, 23% 73%, 12% 81%);
}
.mech-tear::before {
  content: '';
  position: absolute;
  inset: 2px 3px;
  background: #02090e;
  clip-path: inherit;
}
.mech-tear code {
  position: relative;
  display: block;
  padding-top: 7px;
  text-align: center;
  white-space: pre;
  font: 7px/1.2 'Courier New', monospace;
  letter-spacing: -.3px;
}
body.revealed .mech-traveller,
html.motion-paused .mech-traveller,
body.motion-paused .mech-traveller,
body.paused .mech-traveller,
body:has(dialog[open]) .mech-traveller { visibility: hidden; }
@media (max-width: 700px) { .mech-ledge { height: 112px; } }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-opt-in) .mech-traveller { display: none; }
}