:root { color-scheme: light dark; font-family: Inter, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; background: #101828; color: #f9fafb; }
main { width: min(92vw, 760px); padding: 4rem 2rem; text-align: center; }
.site { margin: 0 0 1rem; color: #98a2b3; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0 0 2.5rem; font-size: clamp(3rem, 10vw, 7rem); line-height: 1; }
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; direction: ltr; }
nav a { padding: .6rem .85rem; border: 1px solid #475467; border-radius: 999px; color: #d0d5dd; text-decoration: none; }
nav a:hover, nav a:focus-visible, nav a[aria-current="page"] { background: #f9fafb; color: #101828; border-color: #f9fafb; }