:root { color-scheme: light dark; font: 16px/1.7 system-ui, sans-serif; }
body { margin: 0; background: light-dark(#f6f8ff, #141825); color: light-dark(#182139, #e4eaff); }
main { max-width: 820px; margin: 40px auto; padding: 28px; }
h1 { line-height: 1.3; } h2 { font-size: 1.2rem; margin-top: 2em; }
a { color: light-dark(#334ac9, #a6b4ff); } p, li { max-width: 78ch; }
button, .button { display: inline-block; padding: 10px 16px; border: 1px solid currentColor; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
:focus-visible { outline: 3px solid #8296ff; outline-offset: 4px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; border: 1px solid #8888; border-radius: 12px; }
.hidden { display: none; } .muted { opacity: .8; } nav { display: flex; gap: 20px; flex-wrap: wrap; }
@font-face { font-family: Vazirmatn; src: url('fonts/Vazirmatn-NL-wght.woff2'); font-display: swap; }
[lang=fa] { font-family: Vazirmatn, system-ui, sans-serif; }
@media (max-width: 600px) { main { margin: 0; padding: 24px; } }