/* Scene/controls only: the landing owns headline, CTA and responsive typography. */
.world-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #05030a url('assets/world/mondo.jpg') center / cover no-repeat;
  color: #fff8e8;
}
.world-hero [data-world-canvas] {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.world-hero [data-world-pause] {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgb(255 248 232 / 38%);
  border-radius: 999px;
  color: #fff8e8;
  background: rgb(7 5 19 / 64%);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.world-hero [data-world-pause]:hover { background: rgb(255 248 232 / 17%); }
.world-hero [data-world-pause]:focus-visible { outline: 2px solid #f0d89a; outline-offset: 4px; }
.world-hero [data-world-status] { color: #eee2cb; }
.world-hero [data-world-real-total] { font-variant-numeric: tabular-nums; }
.world-hero[data-world-connection='stale'] [data-world-status],
.world-hero[data-world-connection='unavailable'] [data-world-status] { color: #ffe0af; }
@media (min-aspect-ratio: 1/1) {
  .world-hero { background-image: url('assets/world/mondo-wide.jpg'); }
}