/* Center the logo and adapt to light/dark mode */
:root {
  --bg: #ffffff;
  --fg: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0b;
    --fg: #f5f5f5;
  }
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}

.wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vmin, 80px);
  box-sizing: border-box;
}

/* Make the logo responsive but crisp */
.logo {
  max-width: min(84vw, 900px);
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* If the provided logo is dark-only, turn it light on dark backgrounds by inverting.
   Remove this rule if you have a dedicated light-on-dark logo asset. */
@media (prefers-color-scheme: dark) {
  .logo {
    filter: invert(1);
  }
}

/* Hide scrollbars on mobile address bar bounce */
html { overflow-y: auto; }