/* vazhgun: mirror / bidi identity. magenta on warm paper, serif display, hard offset shadows, mirrored watermark */
@font-face{font-family:"DM Serif Display";src:url(fonts/DMSerifDisplay-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(fonts/DMSerifDisplay-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Code Pro";src:url(fonts/SourceCodePro.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/vazirmatn-400-800-arabic.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Vazirmatn;src:url(fonts/vazirmatn-400-800-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--f-d:"DM Serif Display","Vazirmatn",Georgia,serif;--f-b:Vazirmatn,system-ui,-apple-system,"Segoe UI",sans-serif;--f-m:"Source Code Pro","Vazirmatn",ui-monospace,Menlo,monospace;--r:0;--h1-w:400;--h2-w:400;
 --bg:#fbf4f8;--fg:#1d1020;--fg-2:#47354b;--muted:#6b5870;--line:#e8d6e1;--line-2:#d3b8c8;--acc:#b3106f;--acc-ink:#a10c63;--on-acc:#fff;--card:#fff;--hd:rgba(251,244,248,.88);--warn:#a8480b;--claim-bg:#fff0f8;
 --code-bg:#21112a;--code-fg:#f3e4ee;--code-dim:#b199ac;--shadow:6px 6px 0 rgba(179,16,111,.16);--hard:5px 5px 0 rgba(179,16,111,.18);--ghost:rgba(179,16,111,.22)}
html[data-theme=dark]{--bg:#150a18;--fg:#f8ecf4;--fg-2:#d9c6d4;--muted:#ad97a9;--line:#2f1a35;--line-2:#4a2c52;--acc:#ff5cbc;--acc-ink:#ff7ac9;--on-acc:#1c0617;--card:#1d0f22;--hd:rgba(21,10,24,.86);--warn:#ffb54a;--claim-bg:#241028;
 --code-bg:#0e0611;--code-fg:#f3e4ee;--code-dim:#a38d9f;--shadow:6px 6px 0 rgba(255,92,188,.14);--hard:5px 5px 0 rgba(255,92,188,.16);--ghost:rgba(255,92,188,.2)}
/* ===== vazhgun v2: mirror axis, bidi chips ===== */
:root{--cL:#4b3fd1;--cN:#b8500a;--cO:#8a7388;--axis:var(--line-2)}
html[data-theme=dark]{--cL:#a89fff;--cN:#ffb54a;--cO:#a38d9f}
@media(prefers-color-scheme:dark){html:not([data-theme=light]){--cL:#a89fff;--cN:#ffb54a;--cO:#a38d9f}}
body{background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:26px 26px;background-attachment:fixed}
.mono{font-family:var(--f-m)}
.btn{border-width:1.5px;font-weight:700;border-radius:0}.btn.pri{box-shadow:3px 3px 0 var(--fg)}.btn.pri:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--fg)}
.btn.sm{min-height:36px;padding:.25rem .85rem;font-size:.82rem}
.badges li{border-radius:0;border-style:dashed}
.hint{font-size:.85rem;color:var(--muted);margin:.8rem 0 0}
.seg{display:inline-flex;align-items:center;border:1.5px solid var(--fg);background:var(--card)}
.seg-l{padding:0 .7rem;font-size:.75rem;color:var(--muted)}
.seg label{cursor:pointer}.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span:not(.seg-l),.seg button{display:block;padding:.4rem .85rem;font:700 .8rem var(--f-m);color:var(--muted);background:none;border:0;cursor:pointer;transition:background .2s,color .2s}
.seg input:checked+span,.seg button[aria-pressed=true]{background:var(--acc);color:var(--on-acc)}
.seg input:focus-visible+span,.seg button:focus-visible{outline:3px solid var(--acc);outline-offset:-3px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}
/* ---- hero ---- */
.vzh{background:none;overflow:hidden;padding-block:clamp(2.2rem,5vw,4rem) 2rem}
.vzh::before,.vzh::after{display:none}
.vzh-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:2rem}
.vzh h1{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1;margin:.3em 0 0}
.vzh h1 em{font-style:italic;color:var(--acc-ink)}
html[lang=fa] .vzh h1 em{font-style:normal}
.vzh-side .lede{font-size:1.02rem;margin:0 0 1.2rem}
@media(max-width:860px){.vzh-top{grid-template-columns:1fr}}
/* stage */
.stage{position:relative;background:var(--card);border:1.5px solid var(--fg);box-shadow:var(--hard);padding:0 0 1rem}
.stage::before{content:"";position:absolute;top:3.4rem;bottom:3.6rem;left:50%;border-left:1.5px dashed var(--acc);opacity:.45;pointer-events:none}
.stg-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 1rem;border-bottom:1.5px solid var(--fg);font-size:.74rem;color:var(--muted)}
.ctxs{display:flex;flex-wrap:wrap;gap:.4rem}
.ctxs button{font:700 .76rem var(--f-b);padding:.3rem .75rem;border:1.5px solid var(--line-2);background:var(--bg);color:var(--fg-2);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.ctxs button:hover{transform:translateY(-1px)}
.ctxs button[aria-pressed=true]{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.ctxs button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.stg-rows{padding:1.1rem 1rem .2rem;display:flex;flex-direction:column;align-items:center;overflow-x:auto}
.stg-rows>.rowl{align-self:flex-start}
.rowl{font-size:.7rem;color:var(--muted);margin:.4rem 0 .5rem;text-transform:uppercase;letter-spacing:.05em}
.row{position:relative;height:80px;margin-bottom:.7rem;flex:none}
.stg-rows{zoom:1}
@media(max-width:560px){.stg-rows{zoom:.78}}
.ch{position:absolute;left:var(--x);top:0;width:40px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:.2rem 0;border:1.5px solid var(--line-2);background:var(--bg);color:var(--fg);transition:background .2s,border-color .2s,color .2s;direction:ltr;unicode-bidi:isolate}
.ch b{font:600 1.7rem/1.5 Vazirmatn,var(--f-b);font-weight:600;white-space:nowrap}
.ch i,.ch u{font:700 .6rem var(--f-m);font-style:normal;text-decoration:none;color:var(--muted);letter-spacing:.02em}
.ch.ctl b{font:700 .62rem var(--f-m);color:var(--muted);align-self:center;margin-top:.7rem}
.g-r{border-color:var(--acc)}.g-r i,.g-r u{color:var(--acc-ink)}
.g-n{border-color:var(--cN)}.g-n i,.g-n u{color:var(--cN)}
.g-l{border-color:var(--cL)}.g-l i,.g-l u{color:var(--cL)}
.g-o{border-style:dashed}
.ch.hl{background:var(--acc);color:var(--on-acc)}.ch.hl i,.ch.hl u{color:var(--on-acc)}
.stg-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.2rem 1rem 0;flex-wrap:wrap}
.stg-v{margin:0;font-size:.95rem;color:var(--fg-2);min-height:1.6em;flex:1;min-width:14rem}
.stg-v b{color:var(--acc-ink)}
.stg-v.is-rtl,.stg-v.is-ltr{border-inline-start:4px solid var(--acc);padding-inline-start:.7rem}
.stg-v.is-ltr{border-color:var(--cL)}
/* ---- sections ---- */
.vz-lab,.vz-feat{padding-block:clamp(2.4rem,5vw,4rem)}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:.2em 0 .6em}
.vz-lab .prose{max-width:70ch}
.lab-tools{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0}
.lab-sp{flex:1}
.lab-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:1.4rem;align-items:start}
@media(max-width:900px){.lab-grid{grid-template-columns:1fr}}
.lab-in{position:sticky;top:84px}
@media(max-width:900px){.lab-in{position:static}}
.lab-in label{display:block;font-size:.72rem;color:var(--muted);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.05em}
#lab-in{width:100%;min-height:11rem;font:500 1.15rem/1.9 Vazirmatn,var(--f-b);padding:.8rem 1rem;background:var(--card);color:var(--fg);border:1.5px solid var(--fg);box-shadow:var(--hard);resize:vertical}
#lab-in:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.lab-sum{font-size:.9rem;color:var(--fg-2);margin:1rem 0 0;line-height:1.7}
.lab-sum .warn{color:var(--warn)}
.lcard{background:var(--card);border:1.5px solid var(--fg);margin-bottom:1rem;position:relative;padding:.6rem 1rem .8rem;box-shadow:4px 4px 0 var(--ghost)}
.lc-h{font-size:.7rem;color:var(--muted)}
.lc-scroll{overflow-x:auto;padding-bottom:.2rem}
.lc-scroll .rowl{margin:.2rem 0 .35rem}.lc-scroll .row{margin-bottom:.4rem}
.lc-t{font:500 1.1rem Vazirmatn;margin:.3rem 0}.lc-e{font-size:.88rem;color:var(--warn)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.tag{font-size:.8rem;padding:.2rem .6rem;border:1.5px solid var(--acc);background:var(--claim-bg);color:var(--fg-2)}
.tag b{font:700 .82rem Vazirmatn;color:var(--acc-ink);margin-inline-end:.3rem;direction:rtl;unicode-bidi:isolate}
.tag.t-l{border-color:var(--cL)}.tag.t-s{border-color:var(--warn)}
/* ---- trace ---- */
.vz-trace{padding:0}
.trk{height:360vh;position:relative}
.trk-stick{position:sticky;top:64px;min-height:calc(100vh - 64px);display:flex;align-items:center;padding-block:1rem}
.tr-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem;align-items:center}
.tr-ctl{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.tr-board-w{background:var(--card);border:1.5px solid var(--fg);box-shadow:var(--hard);padding:1.2rem 1.2rem 1rem}
.tr-board{overflow-x:auto;padding:1.6rem 0 .8rem;display:flex;justify-content:center}
.tr-row{position:relative;height:86px;flex:none}
.tc{position:absolute;left:var(--x);top:0;width:40px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:.2rem 0;border:1.5px solid var(--line-2);background:var(--bg);transform:translateX(var(--dx,0));translate:0 0;transition:transform .9s cubic-bezier(.6,.05,.2,1),translate .6s,border-color .4s,background .4s}
.tc b{font:600 1.7rem/1.5 Vazirmatn;white-space:nowrap}
.tc i,.tc u{font:700 .6rem var(--f-m);font-style:normal;text-decoration:none;color:var(--muted);min-height:.9em}
.tc.g-r{border-color:var(--acc)}.tc.g-n{border-color:var(--cN)}.tc.g-l{border-color:var(--cL)}.tc.g-o{border-style:dashed}
.tc.g-r i{color:var(--acc-ink)}.tc.g-n i{color:var(--cN)}.tc.g-l i{color:var(--cL)}
.tc.lv2{translate:0 -14px}.tc.lv0{translate:0 0}
.tc.chg{animation:chg .6s}
@keyframes chg{0%{background:var(--acc);color:var(--on-acc)}100%{background:var(--bg)}}
.tr-v{margin:.4rem 0 0;font:700 .95rem var(--f-b);color:var(--acc-ink);min-height:1.5em;text-align:center}
.tr-steps{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.trs{display:flex;gap:.8rem;padding:.55rem .8rem;border:1.5px solid transparent;border-inline-start:4px solid var(--line-2);cursor:pointer;opacity:.5;transition:opacity .3s,border-color .3s,background .3s}
.trs b{font-size:.8rem;color:var(--muted);padding-top:.15rem}
.trs h3{margin:0;font-size:1rem}
.trs p{margin:.25rem 0 0;font-size:.88rem;color:var(--fg-2);display:none}
.trs.on{opacity:1;border-inline-start-color:var(--acc);background:var(--card);border-color:var(--line-2);border-inline-start-color:var(--acc)}
.trs.on p{display:block}
.trs:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
@media(max-width:860px){.trk{height:auto}.trk-stick{position:static;min-height:0;padding-block:2.4rem}.tr-grid{grid-template-columns:1fr}}
/* ---- before/after (kept) ---- */
.cmpwrap{margin-top:2.4rem}
.cmp{position:relative;max-width:520px;aspect-ratio:800/920;direction:ltr;overflow:hidden;border:1.5px solid var(--fg);box-shadow:var(--hard);background:#fff;touch-action:pan-y}
.cmp img{position:absolute;inset:0;width:100%;height:100%}
.cmp-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:var(--acc);box-shadow:0 0 0 1px #fff}
.cmp-line::after{content:"⇄";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2.4rem;height:2.4rem;border-radius:50%;background:var(--acc);color:var(--on-acc);display:grid;place-items:center;font:700 1rem var(--f-m)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp:focus-within{outline:3px solid var(--acc);outline-offset:3px}
.cmp b{position:absolute;top:.6rem;font:700 .72rem var(--f-m);text-transform:uppercase;padding:.2rem .5rem;background:var(--fg);color:var(--bg);letter-spacing:.06em}
.cmp-b{left:.6rem}.cmp-a{right:.6rem}
.cmpwrap h3{font-size:1.3rem;margin-bottom:1rem}.cmpwrap code{background:var(--line);padding:.05em .35em}
/* ---- shared section look ---- */
.sec{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(1.4rem,4vw,4rem)}
.sec-head{position:sticky;top:84px;align-self:start}
.vz-lab .sec-head,.vz-feat .sec-head,.vz-trace .sec-head{position:static;margin-bottom:.4rem}
.sec>.sec-head{border-inline-end:1px dashed var(--line-2);padding-inline-end:1.4rem}
@media(max-width:860px){.sec{grid-template-columns:minmax(0,1fr)}.sec>.sec-head{position:static;border:0;padding:0}}
.card,.term,.code,.limits li,.claim,.tblw,.cmp{border-radius:0}
.card{border:1.5px solid var(--fg);box-shadow:var(--hard)}.term{box-shadow:var(--shadow);border:1.5px solid var(--fg)}.code{border:1.5px solid var(--line-2)}
.limits li{border:1.5px solid var(--line-2);border-inline-start:5px solid var(--warn)}.limits li::before{display:none}.limits li{padding-inline-start:1.2rem}
.claim{border:1.5px solid var(--acc);box-shadow:var(--hard)}
.steps li::before{border-radius:0;transform:rotate(45deg);border-width:2px;width:1.7rem;height:1.7rem;top:.15rem;font-size:0}
.steps li::after{content:counter(s);position:absolute;inset-inline-start:0;top:.15rem;width:1.7rem;height:1.7rem;display:grid;place-items:center;font:700 .85rem var(--f-m);color:var(--acc-ink)}
.steps li{padding-inline-start:3rem}.tbl th{border-bottom:1.5px solid var(--fg)}
/* ---- mirrored feature rows: odd on one side of the axis, even on the other ---- */
.mirror{list-style:none;margin:2rem 0 0;padding:0;position:relative;display:grid;gap:1.2rem}
.mirror::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1.5px dashed var(--acc);opacity:.4}
.mf{display:grid;grid-template-columns:1fr 1fr;position:relative}
.mf>div{background:var(--card);border:1.5px solid var(--fg);box-shadow:var(--hard);padding:1rem 1.2rem;width:calc(100% - 2.2rem)}
.mf:nth-child(odd)>div{grid-column:1}
.mf:nth-child(even)>div{grid-column:2;justify-self:end}
.mf-n{position:absolute;left:50%;top:1rem;transform:translateX(-50%);background:var(--acc);color:var(--on-acc);font-size:.72rem;font-weight:700;padding:.15rem .5rem;z-index:1}
.mf h3{margin:0 0 .4rem;font-size:1.15rem;font-family:var(--f-d);font-weight:400}.mf p{margin:0;font-size:.92rem;color:var(--fg-2)}
.mf>div{transition:transform .35s,box-shadow .35s}.mf>div:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ghost)}
@media(max-width:760px){.mirror::before{left:1rem}.mf{grid-template-columns:1fr}.mf>div,.mf:nth-child(n)>div{grid-column:1;width:calc(100% - 2.2rem);margin-inline-start:2.2rem;justify-self:auto}.mf-n{left:1rem}}
html[dir=rtl] .mf-n{transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.tc,.ch{transition:none}.tc.chg{animation:none}.mf>div{transition:none}}
.seg-l{white-space:nowrap}
.badges{margin-top:1.6rem}
.lc-scroll{direction:ltr}
@media(max-width:900px){.lab-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){.tr-grid{grid-template-columns:minmax(0,1fr)}}
.lab-in,.lab-out,.tr-board-w{min-width:0}