:root{
  --void:#080808;
  --surface-1:#111111;
  --surface-2:#181818;
  --surface-3:#202020;
  --surface-4:#2a2a2a;
  --border:#303030;
  --hairline:#262626;
  --text:#ffffff;
  --text-2:#b8b8b8;
  --text-3:#9a9a9a;
  --crimson:#c1121f;
  --crimson-hover:#a30f1a;
  --crimson-deep:#7f0d15;
  --crimson-tint:rgba(193,18,31,.12);
  --danger-text:#ff6b74;
  --focus:#f2f2f2;
  --radius:10px;
  --gutter:16px;
  --font:"Noto Sans Arabic","Segoe UI",Tahoma,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font:17px/1.8 var(--font);
}
main{
  max-width:760px;
  margin:0 auto;
  padding:28px var(--gutter) 64px;
}
header.site{
  border-bottom:1px solid var(--hairline);
  padding-bottom:12px;
  margin-bottom:8px;
}
.brand{
  color:var(--text);
  font-weight:700;
  letter-spacing:.04em;
}
.brand .dot{color:var(--crimson)}
nav.site{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:4px 16px;
}
nav.site a{font-size:15px}
section.lang{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:8px 20px 20px;
  margin:20px 0;
  overflow-wrap:break-word;
}
h1{
  font-size:1.625rem;
  line-height:1.4;
  margin:.6em 0 .2em;
  color:var(--text);
}
h2{
  font-size:1.1875rem;
  line-height:1.5;
  margin:1.6em 0 .2em;
  color:var(--text-2);
  border-inline-start:3px solid var(--crimson);
  padding-inline-start:10px;
}
p,li{margin:.5em 0;color:var(--text)}
ul,ol{padding-inline-start:1.4em;margin:.5em 0}
.meta{color:var(--text-3);font-size:.875rem}
a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--crimson);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
a:hover{text-decoration-color:var(--crimson-hover);text-decoration-thickness:2px}
.ph{
  background:var(--crimson-tint);
  color:var(--danger-text);
  border-radius:4px;
  padding:0 4px;
}
footer.site{
  border-top:1px solid var(--hairline);
  margin-top:8px;
  padding-top:12px;
  color:var(--text-3);
  font-size:.875rem;
}
footer.site p{color:var(--text-3)}
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:2px;
}
img{max-width:100%;height:auto}