@font-face { font-family: Tajawal; font-style: normal; font-weight: 400; font-display: swap; src: url('/tajawal-arabic-400-normal.woff2') format('woff2'); }
@font-face { font-family: Tajawal; font-style: normal; font-weight: 700; font-display: swap; src: url('/tajawal-arabic-700-normal.woff2') format('woff2'); }
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; min-block-size: 100vh; min-block-size: 100dvh; display: grid; place-items: center; padding: var(--space-5); background: var(--bg); color: var(--text); font-family: var(--font-sans); }
main { inline-size: 100%; max-inline-size: var(--measure); padding: var(--space-8) var(--space-7); background: var(--surface); border: var(--border-thin) solid var(--border-strong); border-radius: var(--radius-lg); overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(var(--type-h1-size), 6vw, var(--type-display-size)); font-weight: var(--type-h1-weight); line-height: var(--type-h1-line); }
h1::before { content: ""; display: block; inline-size: var(--space-7); block-size: var(--border-thick); margin-block-end: var(--space-5); background: var(--accent); }
p { margin: var(--space-4) 0 0; color: var(--text-soft); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line); }
@media (max-width: 40rem) { body { padding: var(--space-4); } main { padding: var(--space-7) var(--space-5); } }
@media (forced-colors: active) { main { border-color: CanvasText; } h1::before { background: CanvasText; forced-color-adjust: none; } }