:root {
    --ink:#0A0F1A; --bg:#FAFAF7; --surface:#FFFFFF; --coral:#E0623F; --coral-strong:#B84826;
    --text:#0A0F1A; --text-sub:#2E3344; --text-mut:#6E7384; --text-faint:#9097A6;
    --n-200:#E2E4EA; --n-100:#EFF0F3;
    --sans:"Geist",-apple-system,system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace; --ar:"Tajawal","Geist",sans-serif;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root { --ink:#F6F7F9; --bg:#0A0F1A; --surface:#121826; --text:#F6F7F9; --text-sub:#C4C8D2; --text-mut:#9097A6; --text-faint:#6E7384; --n-200:#1F2738; --n-100:#1A2233; --coral-strong:#E0623F; color-scheme: dark; }
  }
  * { box-sizing: border-box; }
  html, body { margin:0; padding:0; background:var(--bg); }
  body { color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.62; }
  .wrap { max-width: 760px; margin-inline:auto; padding: clamp(28px,5vw,72px) clamp(20px,4vw,28px) 96px; }
  a { color: var(--coral-strong); }
  .top { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:600; font-size:17px; letter-spacing:-0.015em; }
  .top .mark { width:22px; height:22px; position:relative; }
  .top .mark .disc { position:absolute; inset-inline-start:0; bottom:0; width:17px; height:17px; border-radius:50%; background:var(--text); }
  .top .mark .dot { position:absolute; inset-inline-end:0; top:0; width:8px; height:8px; border-radius:50%; background:var(--coral); }
  .top .ar { color:var(--text-mut); font-family:var(--ar); font-weight:500; }
  h1 { font-size: clamp(30px,5vw,44px); font-weight:500; letter-spacing:-0.03em; margin: 36px 0 6px; }
  .meta { font-family:var(--mono); font-size:12.5px; color:var(--text-faint); letter-spacing:.02em; }
  h2 { font-size: 20px; font-weight:600; letter-spacing:-0.02em; margin: 40px 0 10px; }
  p, li { color:var(--text-sub); font-size:15.5px; }
  ul { padding-inline-start: 22px; }
  li { margin-bottom: 6px; }
  .lede { font-size: 17px; color:var(--text-sub); }
  hr { border:0; border-top:1px solid var(--n-200); margin: 56px 0 0; }
  .ar-block { direction: rtl; text-align: right; font-family: var(--ar); }
  .ar-block h2 { font-family: var(--ar); }
  .pill { display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--coral-strong); border:1px solid var(--n-200); border-radius:999px; padding:5px 12px; margin-top: 8px; }
  footer { margin-top: 64px; padding-top: 24px; border-top:1px solid var(--n-200); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; color:var(--text-faint); font-size:13px; }
  footer .mono { font-family:var(--mono); }

/* --- Utility externalised from inline style="" (CSP: style-src 'self'). --- */
.ar-font { font-family: var(--ar); }