:root { --bg:#f6f4ef; --surface:#fff; --ink:#17151d; --muted:#5f5a52; --gold:#d4a646; --gold-text:#7a5c17; --midnight:#17151d; --line:#e8e3d8; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f0e13; --surface:#1a1820; --ink:#f2ede3; --muted:#a8a092; --gold-text:#e6bf6a; --midnight:#2c2a33; --line:#2a2731; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'IBM Plex Sans Arabic', system-ui, sans-serif; line-height:1.7; }
main { max-width:720px; margin:0 auto; padding:48px 20px; }
.mark { width:48px; height:48px; border-radius:14px; background:var(--midnight); color:var(--gold); display:grid; place-items:center; font-weight:700; font-size:24px; }
h1 { font-size:28px; margin:16px 0 4px; } h2 { font-size:19px; margin-top:28px; }
p, li { color:var(--ink); } .muted { color:var(--muted); }
.card { background:var(--surface); border-radius:24px; padding:20px; margin:20px 0; box-shadow:0 6px 20px rgba(16,24,40,.07); }
a { color:var(--gold-text); } hr { border:none; border-top:1px solid var(--line); margin:32px 0; }
[lang="en"] { direction:ltr; text-align:left; }