/* Styles of the site's own pages (footer, About, 404). The app's styles are in styles.css.
   The footer's width leaves the bottom corners to the scenario panel (left) and the controls panel (right): 290 px each side. */
:root { color-scheme: dark; }
.site-footer { position: fixed; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 8; box-sizing: border-box; width: max-content; max-width: max(14rem, min(46rem, calc(100vw - 580px)));
  margin: 0; padding: 1px 8px; font: 0.68rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; color: #b7bec7; text-align: center; text-wrap: balance; background: rgba(20, 23, 27, 0.78); border-radius: 4px; pointer-events: none; }
.site-footer a { color: #8dbcff; pointer-events: auto; }
.site-footer a:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
body.page { margin: 0; min-height: 100%; background: #14171b; color: #e8eaed; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main.page { max-width: 40rem; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }
main.page h1 { margin: 0 0 1rem; font-size: 1.4rem; font-weight: 600; }
main.page h2 { margin: 1.75rem 0 0.5rem; font-size: 1.05rem; font-weight: 600; }
main.page a { color: #8dbcff; }
main.page a:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
main.page ul { margin: 0; padding-left: 1.2rem; }
main.page .notice { color: #b7bec7; }