.hero-live-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-3;
  pointer-events:none;
  transform:translateY(var(--world-y,0px));
}
.hero-motion-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:10px 14px;
  border:1px solid #78baff30;
  border-radius:30px;
  background:#07162966;
  color:#acc3df;
  font-size:8px;
}
.hero-motion-toggle::before {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:#8de0ff;
  box-shadow:0 0 8px #53bfff88;
}
.hero-motion-toggle[aria-pressed=true]::before { background:#728399; box-shadow:none; }
.hero-motion-toggle:hover { border-color:#79ccff77; color:#fff; }
.hero-motion-toggle[hidden] { display:none; }
@media(max-width:560px) {
  .hero-bottom { flex-wrap:wrap; }
  .hero-motion-toggle { margin-left:auto; font-size:7px; min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-live-canvas,.hero-motion-toggle { display:none; }
}