:root { color-scheme: light dark; --background: #fff; --foreground: #171717; --muted: #4b5563; --footer: #6b7280; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; gap: 4rem; padding: 5rem; background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; }
main { align-self: center; justify-self: center; max-width: 60rem; }
.identity { display: flex; align-items: center; gap: 1rem; }
.logo { flex-shrink: 0; object-fit: contain; }
h1 { margin: 0; font-size: 1.5rem; line-height: 1.4; }
.tagline { margin: 2rem 0 0; color: var(--muted); font-size: 1.125rem; line-height: 1.65; }
footer { text-align: center; color: var(--footer); font-size: .875rem; line-height: 1.6; }
@media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #e5e7eb; --muted: #9ca3af; --footer: #9ca3af; } }
@media (max-width: 640px) { body { padding: 2rem; } .identity { flex-direction: column; text-align: center; } .tagline { text-align: center; } }