:root { color-scheme: light; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f3f5f8; color: #172033; }
.navigation-card { width: min(92vw, 38rem); padding: 2rem; border-radius: 1rem; background: #fff; box-shadow: 0 1rem 3rem #1720331a; }
.entry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.entry, .compatibility { display: block; padding: 1rem; border-radius: .7rem; text-align: center; color: #fff; background: #2855d9; text-decoration: none; }
.compatibility { margin-top: 1rem; background: #46516b; }
@media (max-width: 400px) { .entry-grid { grid-template-columns: 1fr; } .navigation-card { padding: 1rem; } }