#home-loading {
  position: fixed; inset: 0; margin: 0; border: 0; padding: 24px;
  width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none;
  background: #eeeee2; color: #173c2b; text-align: center;
  font-family: 'DM Sans', sans-serif; box-sizing: border-box;
  opacity: 1; transition: opacity 280ms ease; overscroll-behavior: contain;
}
#home-loading[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#home-loading::backdrop { background: transparent; }
#home-loading.is-ready { opacity: 0; }
#home-loading img { width: 76px; height: 84px; object-fit: contain; margin-bottom: 28px; }
#home-loading p { font-size: 14px; letter-spacing: .03em; margin: 0 0 24px; }
#home-loading button {
  min-height: 44px; padding: 10px 16px; color: inherit; background: transparent;
  border: 0; font: inherit; font-size: 13px; text-decoration: underline;
  text-underline-offset: 5px; cursor: pointer;
}
#home-loading button:focus-visible { outline: 2px solid #173c2b; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { #home-loading { transition: none; } }

/* Before the timeline's first paint, the old 1200px centred world left side
   gutters on wider screens. Fit the overview from the very first CSS frame,
   including script failure/disabled and readers who dismiss the curtain. */
body[data-edition=home] #motion-stage:not([data-geometry-ready]) #motion-world {
  top: 0; transform: none !important;
}
body[data-edition=home] #motion-stage:not([data-geometry-ready]) #motion-terrain {
  width: 100vw; height: auto;
}
body[data-edition=home] #motion-stage:not([data-geometry-ready]) #motion-colour { visibility: hidden; }