:root {
  color-scheme: light dark;
  --paper: #faf9f7;
  --panel: #f4f2ee;
  --ink: #1c1a17;
  --line: #767066;
  font: 100%/1.6 Arial, "Noto Sans Hebrew", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; }
main, nav { max-inline-size: 52rem; margin-inline: auto; }
nav { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-block-end: 1rem; }
nav a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 3rem; padding-inline: 1rem; border: 1px solid var(--line); border-radius: 0.5rem; }
article { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; padding: clamp(1rem, 4vw, 2rem); margin-block-end: 1rem; overflow-wrap: anywhere; }
article[lang="ar"] { font-family: Tahoma, Arial, "Noto Sans Arabic", sans-serif; }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.25; }
h2 { font-size: 1.25rem; margin-block-start: 2rem; }
ul { padding-inline-start: 1.5rem; }
li { margin-block: 0.5rem; }
a, a:visited { color: inherit; text-underline-offset: 0.2em; }
a:focus-visible { outline: 3px solid currentcolor; outline-offset: 3px; }
[aria-current="page"] { font-weight: 700; border-width: 2px; }
footer { border-block-start: 1px solid var(--line); margin-block-start: 2rem; padding-block-start: 1rem; }
[hidden] { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #0f0e0c; --panel: #1c1a17; --ink: #f4f2ee; }
}

:root[data-theme="dark"] { --paper: #0f0e0c; --panel: #1c1a17; --ink: #f4f2ee; }

@media (forced-colors: active) {
  :root { --paper: Canvas; --panel: Canvas; --ink: CanvasText; --line: CanvasText; }
}