@font-face{font-family:'Lateef';src:url('/fonts/lateef/Lateef-Regular.woff2') format('woff2');font-weight:400;font-display:fallback}
@font-face{font-family:'Lateef';src:url('/fonts/lateef/Lateef-Bold.woff2') format('woff2');font-weight:700;font-display:fallback}
@font-face{font-family:'MicronBasis';src:url('/fonts/micron-basis/MicronBasis-Regular.woff2') format('woff2'),url('/fonts/micron-basis/MicronBasis-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'MicronBasis';src:url('/fonts/micron-basis/MicronBasis-Medium.woff2') format('woff2'),url('/fonts/micron-basis/MicronBasis-Medium.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'MicronBasis';src:url('/fonts/micron-basis/MicronBasis-Bold.woff2') format('woff2'),url('/fonts/micron-basis/MicronBasis-Bold.woff') format('woff');font-weight:700;font-display:swap}
:root{--bg:0 0% 96%;--fg:0 0% 9%;--card:0 0% 100%;--line:0 0% 90%;--mute:0 0% 40%;--signal:14 74% 47%;--s:1;
--font:'MicronBasis','Helvetica Neue',Helvetica,Arial,sans-serif;color-scheme:light}
:root[dir=rtl]{--font:'Lateef','Noto Naskh Arabic','Times New Roman',serif;--s:1.22}
.dark{--bg:0 0% 6%;--fg:0 0% 96%;--card:0 0% 9%;--line:0 0% 15%;--mute:0 0% 62%;--signal:18 82% 62%;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:hsl(var(--bg));color:hsl(var(--fg));font-family:var(--font);font-size:calc(1rem*var(--s));line-height:1.65;-webkit-font-smoothing:antialiased;
padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,.btn:focus-visible{outline:2px solid hsl(var(--fg));outline-offset:3px;border-radius:6px}
.bar,main{max-width:60rem;margin:0 auto}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 6px 16px}
.logo{display:inline-flex;min-height:44px;align-items:center}
.logo img{height:26px;width:auto;display:block}
.logo-d{display:none!important}.dark .logo-l{display:none!important}.dark .logo-d{display:block!important}
.bar nav{display:flex;gap:6px}
.bar nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid hsl(var(--line));border-radius:999px;text-decoration:none;font-size:.9em;background:hsl(var(--card))}
.bar nav a:hover{border-color:hsl(var(--fg))}
main{display:flex;flex-direction:column;gap:12px}
.card{background:hsl(var(--card));border:1px solid hsl(var(--line));border-radius:1rem;padding:22px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.85em;color:hsl(var(--mute));padding:0 6px}
.crumbs a{color:inherit}
h1{font-size:calc(1.75rem*var(--s));line-height:1.2;margin:.2em 0 .5em;font-weight:700;letter-spacing:-.01em}
h2{font-size:calc(1.15rem*var(--s));margin:0 0 .6em;font-weight:700}
h3{font-size:1.05em;margin:0 0 .3em}
p{margin:0 0 .8em}
.hero p:not(.label){color:hsl(var(--mute));max-width:42em}
.label{font-size:.8em;text-transform:uppercase;letter-spacing:.08em;color:hsl(var(--mute));margin:4px 6px 8px;font-weight:500}
.hero .label{margin:0;color:hsl(var(--signal))}
:root[dir=rtl] .label{text-transform:none;letter-spacing:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;margin-top:8px;border-radius:999px;background:hsl(var(--fg));color:hsl(var(--bg));text-decoration:none;font-weight:500;transition:opacity .2s}
.btn:hover{opacity:.86}
ul,ol{margin:0;padding:0}
.grid,.related{list-style:none;display:grid;gap:12px}
.item{display:flex;flex-direction:column}
.item h3 a{text-decoration:none}
.item p{color:hsl(var(--mute))}
.subs{font-size:.85em}
.more{margin-top:auto;align-self:flex-start;font-weight:500}
.split{display:grid;gap:12px}
.ticks{list-style:none}
.ticks li{position:relative;padding-inline-start:18px;margin-bottom:.55em;color:hsl(var(--mute))}
.ticks li::before{content:'';position:absolute;inset-inline-start:0;top:.7em;width:7px;height:7px;border-radius:50%;background:hsl(var(--signal))}
.subs-list{margin:0;display:grid;gap:0}
.subs-list div{padding:14px 0;border-top:1px solid hsl(var(--line))}
.subs-list div:first-child{border-top:0;padding-top:0}
.subs-list dt{font-weight:700}
.subs-list dd{margin:2px 0 0;color:hsl(var(--mute))}
.steps{padding-inline-start:1.3em;color:hsl(var(--mute))}
.steps li{margin-bottom:.5em}
.related a{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1px solid hsl(var(--line));border-radius:1rem;background:hsl(var(--card));text-decoration:none}
.related a:hover{border-color:hsl(var(--fg))}
.related span{color:hsl(var(--mute));font-size:.9em}
.foot p{color:hsl(var(--mute))}
.foot .mute{font-size:.85em;margin:0}
@media (min-width:768px){body{padding-left:24px;padding-right:24px}.card{padding:32px}h1{font-size:calc(2.4rem*var(--s))}
.grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr 1fr}.related{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}