@font-face { font-family: 'OLU Noto'; src: url('/assets/NotoSansArabic-variable.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { font-family: 'OLU Noto', 'Segoe UI', Tahoma, sans-serif; color: #16243b; background: #fff; }
header { background: #f4f7fd; color: #16243b; border-bottom: 1px solid #dce5f0; padding-block: 52px; }
.brand { color: #175bc4; letter-spacing: -.04em; }
.sub { color: #52647b; }
header h1 { color: #16243b; line-height: 1.4; }
header p { color: #52647b; }
main { max-width: 1060px; margin: 44px auto; }
.card, .standards { border-color: #dce5f0; border-radius: 20px; box-shadow: 0 12px 38px #193b6909; padding: 26px; }
.alert { background: #fff8e8; border-color: #c89a38; color: #5a420d; }
.code { background: #eaf1ff; color: #2459ab; }
button { border-color: #cbd9e8; color: #203f65; border-radius: 999px; min-height: 44px; }
button[aria-pressed=true] { background: #175bc4; color: #fff; border-color: #175bc4; }
a { color: #1556b1; }
button:focus-visible, a:focus-visible { outline: 3px solid #175bc4; outline-offset: 3px; }
@media (max-width: 560px) { header { padding: 36px 20px; } .card, .standards { padding: 20px; } }
@media print { header { background: #fff; color: #000; } }