:root{
  --ink:#F2EEE3; --ink-2:#C4CDBF; --ink-3:#97A392;
  --green:#8FE0AE; --night:#0B0F0C;
  --line:rgba(246,243,234,.12);
  --sans:"Vazirmatn","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0; background:var(--night); color:var(--ink); font-family:var(--sans);
     line-height:1.9; font-weight:500; -webkit-font-smoothing:antialiased}
a{color:inherit}
.top{display:flex; align-items:center; justify-content:space-between;
     padding:18px 22px; max-width:820px; margin:0 auto}
.mark{font-family:var(--mono); letter-spacing:.42em; font-size:12px; font-weight:500;
      color:#C6D2C6; text-decoration:none; direction:ltr}
.nav{display:flex; gap:16px; flex-wrap:wrap}
.nav a{font-size:13px; font-weight:600; color:#9DB09F; text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:#E9EFE9}
.wrap{max-width:820px; margin:0 auto; padding:12px 20px 90px}
.kicker{font-size:13px; font-weight:700; color:var(--green); margin:0 0 8px}
h1{font-size:clamp(26px,4.4vw,38px); font-weight:800; line-height:1.5; margin:0 0 12px}
.lede{color:var(--ink-2); font-size:17px; font-weight:500; margin:0 0 22px; max-width:46ch}
.meta{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin:0 0 28px; font-weight:500}
.define{
  border:1px solid rgba(143,224,174,.28); border-radius:16px;
  background:rgba(143,224,174,.06); padding:18px 20px; margin:0 0 32px;
}
.define p{margin:0; font-size:16px; font-weight:600}
.prose h2{font-size:22px; font-weight:800; margin:36px 0 10px; line-height:1.5}
.prose h3{font-size:17px; font-weight:800; margin:26px 0 8px}
.prose p{margin:0 0 16px; color:#E6E4D8; font-size:16.5px}
.prose ul,.prose ol{margin:0 0 18px; padding:0 22px 0 0}
.prose li{margin:0 0 8px; color:#E6E4D8}
.prose strong{font-weight:800}
.prose a{color:var(--green); text-decoration:underline; text-underline-offset:3px}
.faq{margin:36px 0 0}
.faq h2{font-size:22px; font-weight:800; margin:0 0 14px}
.faq details{border:1px solid var(--line); border-radius:14px; padding:12px 16px; margin:0 0 10px;
             background:rgba(246,243,234,.02)}
.faq summary{cursor:pointer; font-weight:800; font-size:15.5px}
.faq details p{margin:10px 0 0; color:var(--ink-2)}
.author{
  display:block; text-decoration:none; margin:40px 0 0;
  border:1px solid var(--line); border-radius:16px; padding:18px 20px;
  background:rgba(246,243,234,.02);
}
.author:hover{border-color:rgba(143,224,174,.4)}
.author b{display:block; font-size:16px; font-weight:800; margin:0 0 4px}
.author span{color:var(--ink-3); font-size:13.5px}
.cards{display:grid; gap:14px}
.card{display:block; text-decoration:none; border:1px solid var(--line); border-radius:18px;
      padding:20px 22px; background:linear-gradient(180deg, rgba(143,224,174,.05), rgba(246,243,234,.02));
      transition:border-color .2s ease, transform .2s ease}
.card:hover{border-color:rgba(143,224,174,.4); transform:translateY(-2px)}
.card .tag{font-size:12px; font-weight:700; color:var(--green); margin:0 0 8px}
.card h2{font-size:19px; font-weight:800; margin:0 0 8px; line-height:1.5}
.card p{margin:0; color:var(--ink-2); font-size:14.5px}
.crumbs{font-size:13px; color:var(--ink-3); margin:0 0 22px; font-weight:500}
.crumbs a{color:#9DB09F; text-decoration:none}
.foot{max-width:820px; margin:0 auto; padding:0 20px 48px; color:#8AA894; font-size:13px}
.foot a{color:#9DB09F; text-decoration:none; margin-inline-start:12px}
@media (max-width:620px){
  .prose p,.prose li{font-size:16px}
}