body { font: 16px/1.6 system-ui, "Segoe UI", Tahoma, sans-serif; max-width: 720px; margin: 0 auto; padding: 16px; color: #1a1a1a; background: #fff; }
h1 { font-size: 1.6em; } h2 { font-size: 1.15em; margin-top: 1.6em; }
nav { display: flex; gap: 8px; justify-content: flex-end; }
nav a { padding: 6px 14px; border: 1px solid #ccc; border-radius: 999px; text-decoration: none; color: inherit; }

/* One language at a time, picked by the URL hash - the app opens #ar or #en.
   No hash shows English. */
#ar:not(:target) { display: none; }
body:has(#ar:target) #en { display: none; }
body:has(#ar:target) nav a[href="#ar"],
body:not(:has(#ar:target)) nav a[href="#en"] { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

@media (prefers-color-scheme: dark) {
  body { color: #eee; background: #121212; } a { color: #8ab4f8; }
  nav a { border-color: #444; }
  body:has(#ar:target) nav a[href="#ar"],
  body:not(:has(#ar:target)) nav a[href="#en"] { background: #eee; color: #121212; border-color: #eee; }
}