:root{
  --PalePrimaryBGColor:#fff1e7;
  --PalePrimaryBGColor3:#ffcfb0;
  --PrimaryBGColor:#e75c00;
  --PrimaryBGColorHover:#d35603;
  --DarkBGColor:#151515;
  --PrimaryColorLightBG:#fff7ef;
  --PrimaryColorLightBGHover:#f3e7dc;
  --B1GreyBGColor:#f5f3f1;
  --B2GreyBGColor:#e4ddcd;
  --DarkTxtColor:#151a20;

  --bg:var(--B1GreyBGColor);
  --surface:#ffffff;
  --hero-bg:var(--PalePrimaryBGColor);
  --text:var(--DarkTxtColor);
  --muted:#4d5560;
  --line:var(--B2GreyBGColor);
  --hover-bg:var(--PrimaryColorLightBGHover);
  --pill-bg:var(--PalePrimaryBGColor3);
  --accent:var(--PrimaryBGColor);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:var(--DarkBGColor); --surface:#1f1f1f; --hero-bg:#221913;
    --text:#f1f1f1; --muted:#b9b9b9; --line:#353535;
    --hover-bg:#2c2118; --pill-bg:#4a2e1b;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  line-height:1.85; font-size:17px;
}
a:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.hero{ background:var(--hero-bg); border-bottom:5px solid var(--accent); padding:56px 20px 44px; }
.hero-inner,.layout{ max-width:1040px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; margin:0 0 14px; }
.brand::before{ content:""; width:14px; height:14px; border-radius:50%; background:var(--accent); }
.hero h1{ font-size: 26px; line-height:1.2; margin:0 0 12px; }
.hero p{ margin:0; max-width:62ch; color:var(--muted);font-size: 16px; }
.hero .brand{ color:var(--text); }
.updated{ display:inline-block; margin-top:18px; padding:4px 14px; background:var(--pill-bg); color:var(--text); border-radius:999px; font-size:.9rem; font-weight:600; }
.layout{ display:grid; grid-template-columns:260px 1fr; gap:36px; padding:36px 20px 64px; align-items:start; }
.toc{ position:sticky; top:20px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px; }
.toc h2{ font-size:1rem; margin:0 0 10px; }
.toc ol{ list-style:none; margin:0; padding:0; }
.toc a{ display:block; padding:5px 8px; border-radius:6px; color:var(--muted); text-decoration:none; font-size:.93rem; line-height:1.5; }
.toc a:hover{ background:var(--hover-bg); color:var(--text); }
main{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 32px; }
section{ padding:22px 0; border-bottom:1px solid var(--line); scroll-margin-top:16px; }
section:last-of-type{ border-bottom:0; }
section h2{ font-size:1.3rem; margin:0 0 10px; padding-inline-start:12px; border-inline-start:5px solid var(--accent); line-height:1.4; }
section p{ margin:0 0 10px; max-width:70ch; }
section ul{ margin:0 0 10px; padding-inline-start:22px; max-width:70ch; }
section li{ margin-bottom:6px; }
section li::marker{ color:var(--accent); }
footer{ text-align:center; color:var(--muted); font-size:.9rem; padding:0 20px 40px; }
footer a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }
@media (max-width:820px){
  .layout{ grid-template-columns:1fr; }
  .toc{ position:static; }
  main{ padding:8px 20px; }
}
section h3{ font-size:1.05rem; margin:16px 0 6px; }