* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #061014;
  color: #9ed7c4;
  font-family: "JetBrainsMonoNL Nerd Font Mono", ui-monospace, monospace;
}
a { color: #5aa8a0; text-underline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.75rem 1rem; background: #6baa88; color: #061014; font-weight: 600; text-decoration: none; }
.skip-link:focus { left: 1rem; top: 1rem; }
.top {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center;
  padding: 0.9rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid color-mix(in oklab, #9ed7c4 18%, transparent);
}
.top span { color: #6d938a; font-size: 0.85rem; }
main {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; justify-content: center;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
}
canvas { border: 1px solid #5aa8a0; background: #0a1a1e; width: min(92vw, 420px); height: auto; image-rendering: pixelated; }
#ui { display: flex; flex-direction: column; gap: 0.35rem; min-width: min(100%, 14rem); }
button {
  min-height: 2.75rem;
  background: #1a3a3e; color: #9ed7c4; border: 1px solid #5aa8a0;
  padding: 0.6rem 0.9rem; margin: 0; font: inherit; cursor: pointer;
}
button:hover { background: #23484d; }
button:focus-visible, a:focus-visible { outline: 2px solid #6baa88; outline-offset: 2px; }
#ui p { margin: 0.25rem 0; }
.site-foot {
  border-top: 1px solid color-mix(in oklab, #9ed7c4 18%, transparent);
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 2rem;
  color: #6d938a; font-size: 0.75rem;
}