:root { --navy: #0B2A5B; --teal: #1FA3C6; color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--navy);
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
main { display: grid; place-items: center; width: 100%; outline: none; }
.logo { display: block; width: min(560px, 82vw); height: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.page-404 { text-align: center; color: #fff; gap: 20px; }
.page-404 .logo { width: min(320px, 70vw); }
.page-404 h1 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: .04em; }
.page-404 a { color: #fff; text-decoration-color: var(--teal); text-underline-offset: 4px; }
.page-404 a:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }