:root { --bg:#0c0809; --panel:#161011; --line:#2c2022; --ink:#f6eeee; --muted:#b3a4a6; --red:#dc3d43; --red-hi:#ff7d82;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --arabic:"IBM Plex Sans Arabic","Geeza Pro","Segoe UI",sans-serif; color-scheme: dark; }
html[lang="ar"] { --display: var(--arabic); --body: var(--arabic); }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.7 var(--body); -webkit-font-smoothing:antialiased; }
a { color: var(--red-hi); }
.wrap { max-width: 760px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left,0px)); padding-right: max(20px, env(safe-area-inset-right,0px)); }
header { border-bottom:1px solid var(--line); padding-top: env(safe-area-inset-top,0px); }
header .wrap { display:flex; justify-content:space-between; align-items:center; height:64px; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font:700 17px var(--display); }
.brand img { width:32px; height:32px; border-radius:8px; }
.lang { border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:999px; padding:7px 14px; font:600 14px var(--body); cursor:pointer; }
main { padding-block: 48px 72px; }
h1 { font:800 clamp(34px,5vw,52px)/1.1 var(--display); letter-spacing:-0.02em; margin:0 0 6px; text-wrap:balance; }
html[lang="ar"] h1 { letter-spacing:0; line-height:1.4; }
h2 { font:700 22px/1.3 var(--display); margin:36px 0 8px; }
p, li { color: #e6dadb; } p { margin: 0 0 12px; }
ul { padding-inline-start: 22px; margin: 0 0 12px; }
.updated { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.box { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin:20px 0; }
.box p:last-child { margin: 0; }
[hidden] { display: none !important; }
footer { border-top:1px solid var(--line); padding-block:28px calc(28px + env(safe-area-inset-bottom,0px)); color:var(--muted); font-size:14px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; }
footer nav { display:flex; gap:18px; flex-wrap:wrap; } footer a { color: var(--muted); }
:focus-visible { outline:2px solid var(--red-hi); outline-offset:3px; }