:root {
  color-scheme: only light;
  --ink: #fff;
  --panel: #111;
  --accent: #11DFC7;
}
/* The camera <video> AR.js adds sits at z-index -2, so only the root gets a background. */
html { background: #000; }
/* The scene is pinned to the screen, so the oversized canvas AR.js uses to crop the camera can't scroll the page. */
main { position: fixed; inset: 0; overflow: hidden; }
/* AR.js writes the camera's size onto <body> as inline styles; keep the page the size of the screen. */
body { width: 100% !important; margin: 0 !important; overflow: hidden; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: var(--panel); color: var(--ink); font-size: 1.125rem; line-height: 1.4;
}
.panel p { margin: 0 auto 0.5rem; max-width: 40rem; }
.panel .help { font-size: 1rem; margin-bottom: 0; }
.panel a { color: var(--accent); }
.panel a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hunters { max-width: 40rem; margin: 0 auto; font-size: 1rem; }
.hunters p { margin-bottom: 0.25rem; }
.hunter-feed { list-style: none; margin: 0 0 0.25rem; padding: 0; }
/* Keep the camera visible: the newest two events only. */
.hunter-feed li:nth-child(n+3) { display: none; }
.simulated-note { font-size: 1rem; }