.hkl {
  --navy:#253365;
  --cyan:#22bfdf;
  --muted:#6d7c95;
  background:#fff;
  color:var(--navy);
  overflow:clip
}
.hkl * {
  box-sizing:border-box
}
.hkl-wrap {
  width:min(1160px,calc(100% - 48px));
  margin-inline:auto
}
.hkl a {
  text-decoration:none
}
.hkl-hero {
  background:radial-gradient(560px 280px at 88% -10%,#1dc3e930,transparent 62%),linear-gradient(180deg,#1b2450,#0e1430);
  color:#fff
}
.hkl-crumb {
  padding-top:21px;
  font-size:12px;
  color:#b3c5e2
}
.hkl-crumb a {
  color:#9fb2d6
}
.hkl-hero__body {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:45px 0 55px
}
.hkl-kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#a2e6f5;
  background:#1dc3e91b;
  border:1px solid #1dc3e94a;
  border-radius:40px;
  padding:6px 13px;
  font-size:12px;
  font-weight:800
}
.hkl-kicker i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#26cae9
}
.hkl-hero h1 {
  font-size:clamp(29px,3.7vw,44px);
  line-height:1.6;
  color:#fff;
  margin:14px 0 5px;
  font-weight:900
}
.hkl-hero h1 em {
  font-style:normal;
  color:#35cbe9;
  font-size:.7em
}
.hkl-hero p {
  font-size:14px;
  line-height:2;
  color:#bbcbe4;
  margin:0
}
.hkl-hero__icon {
  width:95px;
  height:95px;
  display:grid;
  place-items:center;
  border:1px solid #ffffff40;
  border-radius:27px;
  color:#63d7f2;
  background:#ffffff12;
  box-shadow:0 20px 40px #0b123855
}
.hkl-eq {
  height:34px;
  color:#1dc3e9;
  background:white;
  overflow:hidden
}
.hkl-eq svg,.hkl-eq canvas {
  display:block;
  width:100%;
  height:100%
}
.hkl-layout {
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:22px;
  align-items:start;
  padding-top:55px;
  padding-bottom:60px
}
.hkl-side {
  position:sticky;
  top:25px
}
.hkl-toc,.hkl-help,.hkl-document {
  background:#fff;
  border:1px solid #e4eaf1;
  border-radius:16px;
  box-shadow:0 12px 35px #1b2d4b08
}
.hkl-toc {
  padding:21px
}
.hkl-toc__eyebrow {
  font-size:11px;
  color:#1494b2;
  font-weight:800
}
.hkl-toc h2 {
  font-size:15px;
  font-weight:900;
  margin:5px 0 14px
}
.hkl-toc nav {
  max-height:50vh;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#c8dce7 transparent
}
.hkl-toc ol {
  list-style:none;
  padding:0;
  margin:0
}
.hkl-toc li+li {
  border-top:1px solid #f0f3f7
}
.hkl-toc a {
  display:block;
  padding:9px 0;
  color:#677892;
  font-size:12px;
  line-height:1.8
}
.hkl-toc a:hover {
  color:#0f9db9
}
.hkl-help {
  margin-top:14px;
  padding:20px
}
.hkl-help b {
  font-size:14px
}
.hkl-help p {
  font-size:12px;
  color:#8290a4;
  line-height:2;
  margin:6px 0 10px
}
.hkl-help a {
  font-size:12px;
  font-weight:800;
  color:#1193b2
}
.hkl-document {
  padding:35px 42px
}
.hkl-document__head {
  display:flex;
  align-items:center;
  gap:13px;
  border-bottom:1px solid #eaf0f5;
  padding-bottom:20px;
  margin-bottom:26px
}
.hkl-document__icon {
  width:43px;
  height:43px;
  border-radius:12px;
  background:#e6f8fb;
  color:#149ab9;
  display:grid;
  place-items:center
}
.hkl-document__head span:not(.hkl-document__icon) {
  font-size:11px;
  color:#8b99ac
}
.hkl-document__head h2 {
  font-size:18px;
  margin:2px 0 0
}
.hkl-content {
  font-size:14px;
  line-height:2.35;
  color:#53627b;
  overflow-wrap:anywhere
}
.hkl-content p {
  margin:0 0 18px
}
.hkl-content h2 {
  font-size:17px;
  line-height:1.8;
  font-weight:850;
  color:var(--navy);
  margin:28px 0 10px;
  scroll-margin-top:30px
}
.hkl-content h2 strong {
  font-weight:inherit
}
.hkl-content ol {
  padding-inline-start:24px
}
.hkl-content ol>li {
  padding-inline-start:5px
}
.hkl-content li::marker {
  color:#1cabc8;
  font-weight:800
}
.hkl-content a {
  color:#0d90af
}
.hkl-content table {
  max-width:100%;
  border-collapse:collapse
}
.hkl-content td,.hkl-content th {
  border:1px solid #e5ebf2;
  padding:8px
}
.hkl :focus-visible {
  outline:3px solid #ec79aa;
  outline-offset:3px
}
@media(max-width:800px) {
  .hkl-layout {
  grid-template-columns:1fr;
  padding-top:30px
}
.hkl-side {
  position:static
}
.hkl-toc nav {
  max-height:210px
}
.hkl-hero__icon {
  width:70px;
  height:70px
}
.hkl-document {
  padding:26px 22px
}

}
@media(max-width:500px) {
  .hkl-wrap {
  width:calc(100% - 32px)
}
.hkl-hero__body {
  padding:38px 0 42px
}
.hkl-hero__icon {
  display:none
}
.hkl-document {
  padding:22px 18px
}
.hkl-content {
  font-size:13.5px
}

}


/* محتوای سند و فهرست بندها در نمایشگرهای کوچک */
.hkl-layout > *, .hkl-side, .hkl-document, .hkl-hero__body > div {min-width:0}
.hkl-hero__icon,.hkl-document__icon{flex-shrink:0}
.hkl-toc-mobile{display:none}
.hkl-content img,.hkl-content video,.hkl-content iframe{max-width:100%;height:auto}
.hkl-content table{display:block;width:max-content;max-width:100%;overflow-x:auto}
.hkl-content p,.hkl-content li,.hkl-content h2{overflow-wrap:anywhere}
@media(max-width:800px){
 .hkl-wrap{width:calc(100% - 36px)}
 .hkl-layout{grid-template-columns:minmax(0,1fr);gap:16px;padding:28px 0 42px}
 .hkl-side{display:contents;position:static}
 .hkl-toc{display:none}
 .hkl-toc-mobile{display:block;order:0;min-width:0;border:1px solid #dce8f1;border-radius:15px;background:#fff;box-shadow:0 10px 24px #1b2d4b08;overflow:hidden}
 .hkl-toc-mobile summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;padding:13px 16px;list-style:none;cursor:pointer}
 .hkl-toc-mobile summary::-webkit-details-marker{display:none}
 .hkl-toc-mobile__text{display:flex;flex-direction:column;min-width:0;gap:2px}
 .hkl-toc-mobile__text small{font-size:10px;font-weight:800;color:#1494b2;line-height:1.6}
 .hkl-toc-mobile__text strong{font-size:13px;font-weight:800;color:#253365;line-height:1.7}
 .hkl-toc-mobile__arrow{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;background:#eaf8fb;color:#118eaa;font-size:22px;line-height:1;transition:transform .2s}
 .hkl-toc-mobile[open] .hkl-toc-mobile__arrow{transform:rotate(180deg)}
 .hkl-toc-mobile nav{border-top:1px solid #edf2f7;max-height:min(42vh,300px);overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 10px;scrollbar-width:thin}
 .hkl-toc-mobile ol{list-style:none;margin:0;padding:0}
 .hkl-toc-mobile li+li{border-top:1px solid #f0f3f7}
 .hkl-toc-mobile a{display:block;padding:10px 0;font-size:12px;line-height:1.9;color:#526780;overflow-wrap:anywhere}
 .hkl-document{order:1;min-width:0;padding:25px 22px}
 .hkl-help{order:2;margin:0;padding:18px 20px}
 .hkl-document__head{gap:11px;margin-bottom:20px;padding-bottom:16px}
 .hkl-document__head h2{font-size:16px;line-height:1.8;overflow-wrap:anywhere}
 .hkl-content{font-size:14px;line-height:2.15}
 .hkl-content h2{font-size:16px;line-height:1.9;margin:25px 0 10px}
 .hkl-content ol,.hkl-content ul{padding-inline-start:22px}
 .hkl-hero__body{padding:32px 0 40px;gap:18px}
 .hkl-hero h1{font-size:clamp(23px,5.6vw,34px);line-height:1.65;overflow-wrap:anywhere}
}
@media(max-width:500px){
 .hkl-wrap{width:calc(100% - 28px)}
 .hkl-crumb{font-size:11px;line-height:1.9}
 .hkl-hero__body{padding:28px 0 35px}
 .hkl-hero h1{font-size:clamp(22px,5.8vw,28px)}
 .hkl-hero p{font-size:13px;line-height:2}
 .hkl-document{padding:22px 17px}
 .hkl-content{font-size:13.5px;line-height:2.15}
 .hkl-content h2{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.hkl-toc-mobile__arrow{transition:none}}