:root{
  --bg:#0e141d; --card:#151e2b; --line:#26344a; --ink:#e9eef5; --mute:#93a3b8;
  --liver:#9b4430; --liver2:#c46a4f; --nh3:#ff5d5d; --urea:#5fd39a; --factor:#5fa8ff;
  --glu:#ffd166; --bili:#ffa63d; --tox:#b57bff; --acid:#ff7b54; --base:#4fd1c5; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"IRANSansX",Vazirmatn,Tahoma,sans-serif;line-height:1.9}
a{color:#8fc7ff}
header.top{position:sticky;top:0;z-index:5;background:#0b1018ee;backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
header.top h1{font-size:18px;margin:0;font-weight:800}
header.top small{color:var(--mute)}
header.top .home{font-size:13px;text-decoration:none;color:var(--mute);border:1px solid var(--line);border-radius:10px;padding:2px 10px}
#toc{font:inherit;font-size:14px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:4px 8px;max-width:min(520px,90vw)}
main{max-width:1100px;margin:0 auto;padding:8px 20px 110px}
.scene{display:none}
.scene.active{display:block}
.kicker{color:var(--mute);font-size:13px;margin-top:14px}
.scene h2{font-size:26px;margin:2px 0 4px;font-weight:800}
.scene .sub{color:var(--mute);margin:0 0 12px}
.anim{margin:12px 0 18px}
.anim h3{font-size:20px;margin:16px 0 4px}
.stage{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px;overflow:hidden}
.stage svg{width:100%;height:auto;display:block}
svg text{font-family:"IRANSansX",Vazirmatn,Tahoma,sans-serif}
svg text:not([fill]){fill:var(--ink)}
.cols{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:16px}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
ol.steps{margin:0;padding:0 22px 0 0;list-style:persian}
ol.steps li{margin-bottom:8px}
.step{opacity:0;transform:translateY(8px)}
.play .step{animation:in .45s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes in{to{opacity:1;transform:none}}
.box{border-radius:14px;padding:12px 16px;border:1px solid var(--line);background:#111a26}
.box.key{border-color:#7a4b2a;background:#22170f}
.box.key b{color:#ffb27a}
.tag{display:inline-block;font-size:11px;padding:0 8px;border-radius:99px;background:#26344a;color:var(--mute);margin-inline-start:6px;vertical-align:middle}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
mark{background:#ffd16633;color:var(--glu);padding:0 4px;border-radius:4px}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--mute);margin-top:8px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-inline-end:5px;vertical-align:middle}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.card h4{margin:0 0 4px;font-size:17px}
.card .why{color:var(--mute);font-size:14px}
.card .do{margin-top:6px;font-size:14px}
.card.hot{border-color:#7a2f2f;background:#1f1416}
.chain{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-top:10px}
.chain .node{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;opacity:.25}
.play .chain .node{animation:lit .5s var(--ease) both;animation-delay:var(--d)}
@keyframes lit{to{opacity:1;border-color:var(--liver2)}}
.chain .arrow{align-self:center;color:var(--mute);font-size:22px}
.q{cursor:pointer}
.q .a{display:none;color:var(--urea);margin-top:6px}
.q.open .a{display:block}
.widget{display:grid;grid-template-columns:1fr 240px;gap:16px;align-items:center;margin-top:14px}
@media (max-width:700px){.widget{grid-template-columns:1fr}}
.widget label{display:block;font-size:14px;color:var(--mute)}
.widget input[type=range]{width:100%;accent-color:var(--liver2)}
.widget .out{font-size:40px;font-weight:800;text-align:center;line-height:1.2}
.widget .verdict{text-align:center;font-size:14px}
/* full notes */
details.full{margin-top:18px;border:1px solid var(--line);border-radius:16px;background:#101823}
details.full>summary{cursor:pointer;padding:10px 16px;font-weight:800;color:#ffb27a;list-style:none}
details.full>summary::before{content:"▾ ";color:var(--mute)}
details.full:not([open])>summary::before{content:"◂ "}
.notes{padding:4px 18px 16px;font-size:15.5px}
.notes h3,.notes h4{margin:16px 0 6px;color:#ffd7b8}
.notes ul,.notes ol{margin:4px 0;padding-inline-start:22px}
.notes li{margin:2px 0}
.notes li::marker{color:var(--liver2)}
.notes p{margin:6px 0}
.notes b{color:#fff}
.notes ins.u22{text-decoration:none}
.notes aside.upd{border:1px solid #2d5a4a;background:#0f1f1a;border-radius:12px;padding:8px 14px;margin:10px 0}
.notes .u-badge{display:inline-block;font-size:11px;color:#7fe0b5;border:1px solid #2d5a4a;border-radius:99px;padding:0 8px}
.notes .u-ttl{font-weight:800;color:#bff2da;margin:4px 0}
.notes .pearl{border-inline-start:4px solid var(--glu);background:#1d1a10;border-radius:8px;padding:6px 12px;margin:10px 0}
.notes .pearl .p-ic{font-size:12px;color:var(--glu);font-weight:800}
.notes .tblwrap{overflow-x:auto;margin:10px 0}
.notes table{border-collapse:collapse;width:100%;font-size:14px}
.notes th,.notes td{border:1px solid var(--line);padding:5px 8px;vertical-align:top}
.notes th{background:#1a2638;color:#ffd7b8}
.notes table.ltr{direction:ltr;text-align:left}
.notes .flow{border:1px dashed var(--line);border-radius:12px;padding:8px 12px;margin:10px 0}
.notes .flow-t{font-weight:800;color:#ffd7b8}
.notes .ill{color:var(--mute)}
.notes code{background:#1a2638;padding:0 4px;border-radius:4px}
.notes figure.fig{background:#fff;border-radius:12px;padding:10px;margin:12px auto;max-width:760px;color:#222}
.notes figure.fig img{max-width:100%;height:auto;display:block;margin:0 auto}
.notes figure.fig figcaption{font-size:13px;color:#333;margin-top:6px}
.notes figure.fig figcaption .fl{color:#9b4430}
.notes figure.fig .srcnote{color:#777;font-size:11px}
figure.trf .trf-box{position:relative;width:100%;margin:0 auto;container-type:inline-size}
figure.trf .trf-box img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:fill}
figure.trf .tl{position:absolute;display:flex;align-items:center;justify-content:center;line-height:1.28;overflow:visible;direction:rtl;color:#231f20}
figure.trf .tl span{display:block;width:100%;text-align:center;unicode-bidi:plaintext;text-wrap:balance}
figure.trf .tl.s{align-items:flex-start} figure.trf .tl.s span{text-align:right}
figure.trf .tl.b{font-weight:800}
figure.trf .tl span i{display:block;font-style:normal;unicode-bidi:isolate}
nav.ctrl{position:fixed;bottom:0;inset-inline:0;background:#0b1018ee;border-top:1px solid var(--line);display:flex;justify-content:center;gap:10px;padding:12px;backdrop-filter:blur(6px);z-index:5}
nav.ctrl button,nav.ctrl a{font:inherit;font-weight:600;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 18px;cursor:pointer;text-decoration:none}
nav.ctrl button:active{transform:scale(.97)}
nav.ctrl .primary{background:var(--liver2);border-color:var(--liver2);color:#fff}
nav.ctrl .pos{align-self:center;color:var(--mute);font-size:13px;min-width:70px;text-align:center}
/* index */
.chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:20px}
.chapters a{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;transition:transform .2s var(--ease),border-color .2s}
.chapters a:hover{transform:translateY(-2px);border-color:var(--liver2)}
.chapters .n{font-size:30px;font-weight:800;color:var(--liver2)}
.chapters .en{color:var(--mute);font-size:13px;direction:ltr;text-align:right}
.chapters .meta{color:var(--mute);font-size:12px;margin-top:6px}
@media (prefers-reduced-motion:reduce){
  .step,.chain .node{opacity:1!important;transform:none!important;animation:none!important}
}