/* payanlint: proofreading / lint identity. forest + leaf green on pale paper, Bricolage Grotesque, centred hero, margin-note labels, wavy rules */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/BricolageGrotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Red Hat Mono";src:url(fonts/RedHatMono.woff2) format("woff2");font-weight:300 700;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:"Bricolage Grotesque","Vazirmatn",system-ui,sans-serif;--f-b:"Bricolage Grotesque","Vazirmatn",system-ui,sans-serif;--f-m:"Red Hat Mono","Vazirmatn",ui-monospace,Menlo,monospace;--r:12px;--h1-w:800;--h2-w:700;
 --bg:#f3f6ec;--fg:#14231a;--fg-2:#3a4d41;--muted:#5d7064;--line:#dde5d3;--line-2:#c3d0b8;--acc:#1f6b34;--acc-ink:#1b5d2e;--on-acc:#fff;--card:#fbfdf6;--hd:rgba(243,246,236,.9);--warn:#b4530a;--claim-bg:#eaf3de;
 --code-bg:#12251a;--code-fg:#e8f3dc;--code-dim:#92aa98;--shadow:0 18px 40px -22px rgba(20,60,30,.45);--bad:#c0392b;--okbg:rgba(31,107,52,.14)}
html[data-theme=dark]{--bg:#0d1a12;--fg:#eaf4df;--fg-2:#c3d4bc;--muted:#8fa796;--line:#1b3022;--line-2:#2b4a35;--acc:#9bd96a;--acc-ink:#a9e27a;--on-acc:#0d1a12;--card:#12231a;--hd:rgba(13,26,18,.88);--warn:#ffb454;--claim-bg:#15291c;
 --code-bg:#08110b;--code-fg:#e8f3dc;--code-dim:#86a08d;--shadow:0 18px 40px -22px rgba(0,0,0,.8);--bad:#ff8a7a;--okbg:rgba(155,217,106,.16)}
/* ---- redesign: editor / problems panel ---- */
body{background-image:radial-gradient(var(--line-2) 1px,transparent 1.2px);background-size:26px 26px;background-attachment:fixed}
main,header,footer{position:relative;z-index:1}
:root{--lime:#9bd96a;--amb:#ffb454;--red:#ff8a7a}
.btn{border-radius:10px}.btn.pri{box-shadow:0 8px 18px -10px var(--acc)}
.badges li{border-radius:6px;background:var(--card)}
html{scroll-padding-top:76px}
.plh{text-align:center;padding-bottom:clamp(2rem,5vw,4rem);overflow-x:clip}
.plh-in{display:flex;flex-direction:column;align-items:center}
.plh .kicker,.plh .cta,.plh .badges{justify-content:center}
.plh h1{font-size:clamp(2.6rem,6.2vw,5rem);line-height:.98;letter-spacing:-.045em;font-variation-settings:"wdth" 88;max-width:14ch}
html[lang=fa] .plh h1{font-size:clamp(2.2rem,5.6vw,4.4rem);max-width:none;line-height:1.3}
.plh h1 em{font-style:normal;position:relative;white-space:nowrap}
.plh h1 em::after{content:"";position:absolute;inset-inline:0;bottom:-.1em;height:.1em;background:var(--acc);-webkit-mask:var(--wave) repeat-x 0 100%/.3em .1em;mask:var(--wave) repeat-x 0 100%/.3em .1em;animation:wv 1.6s linear infinite}
:root{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 4 2 1 4 4 6 1 8 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E")}
@keyframes wv{to{-webkit-mask-position:.3em 100%;mask-position:.3em 100%}}
.plh .lede{max-width:62ch;margin-inline:auto;font-size:1.05rem}
.ide{margin-top:1.8rem}
/* ide */
.ide{width:100%;max-width:1100px;margin:2.4rem 0 1.6rem;background:#0b150f;color:#e8f3dc;border:1px solid #2b4a35;border-radius:14px;box-shadow:0 34px 60px -30px rgba(10,40,20,.7),0 0 0 1px rgba(155,217,106,.08);text-align:start;overflow:hidden;direction:ltr}
.ide-bar{display:flex;align-items:center;gap:.8rem;padding:.65rem 1rem;border-bottom:1px solid #1d3326;background:#0e1c14;font-size:.78rem;color:#86a08d}
.ide-bar b{color:#e8f3dc;font-weight:600}.dots{display:flex;gap:5px}.dots i{width:10px;height:10px;border-radius:50%;background:#2b4a35}
.ide-cmd{margin-inline-start:auto;color:var(--lime)}.ide-cmd::before{content:"$ ";color:#86a08d}
.ide-body{display:grid;grid-template-columns:1.1fr 1fr;min-height:19rem}
@media(max-width:860px){.ide-body{grid-template-columns:1fr}}
.ed{position:relative;padding:.6rem 0;border-inline-end:1px solid #1d3326}
@media(max-width:860px){.ed{border-inline-end:0;border-bottom:1px solid #1d3326}}
.edl{display:grid;grid-template-columns:1fr 2.6rem;direction:ltr;align-items:center}
.edl p{grid-column:1;grid-row:1;margin:0;padding:.15rem 1rem;font:500 clamp(1.05rem,1.8vw,1.3rem)/2.1 Vazirmatn,sans-serif;text-align:right;direction:rtl}
.gn{grid-column:2;grid-row:1;text-align:center;color:#4f6a58;font-size:.78rem;border-inline-start:1px solid #1d3326}
.beam{position:absolute;inset-inline:0;top:0;height:2px;background:var(--lime);box-shadow:0 0 16px 3px rgba(155,217,106,.55),0 -30px 40px -10px rgba(155,217,106,.18);opacity:0;transition:transform .5s cubic-bezier(.5,0,.2,1),opacity .3s;pointer-events:none;z-index:2}
.beam.on{opacity:1}
.sq{position:relative}
.sq::after{content:"";position:absolute;inset-inline:0;bottom:.12em;height:.2em;background:var(--amb);-webkit-mask:var(--wave) repeat-x 0 100%/.4em .2em;mask:var(--wave) repeat-x 0 100%/.4em .2em;transform:scaleX(0);transform-origin:right;transition:transform .45s ease-out}
.sq.on::after{transform:scaleX(1)}
.sq[data-zw]{padding:0 .17em}
.sq.fixed{color:var(--lime);transition:color .3s}.sq.fixed::after{background:var(--lime);transform:scaleX(1) scaleY(.5)}
.sq.fixed[data-zw]::before{content:"⸱";position:absolute;inset:0;text-align:center;color:var(--lime)}
.pp{display:flex;flex-direction:column;min-width:0}
.pp-h{display:flex;justify-content:space-between;padding:.7rem 1rem;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#86a08d;border-bottom:1px solid #1d3326}
.cnt{color:#0b150f;background:var(--amb);border-radius:99px;padding:.05rem .6rem;min-width:2.1rem;text-align:center;transition:background .3s,transform .2s}
.cnt.zero{background:var(--lime)}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pr{display:grid;grid-template-columns:3.6rem 1fr auto;gap:.2rem .7rem;align-items:center;padding:.55rem 1rem;border-bottom:1px solid #162a1d;font-size:.86rem;opacity:0;transform:translateX(14px);transition:opacity .35s,transform .35s,color .3s}
.pr.in{opacity:1;transform:none}
.pc{font:700 .72rem var(--f-m);padding:.12rem .4rem;border-radius:4px;background:var(--amb);color:#0b150f;text-align:center}
.pr.man .pc{background:#9db4ff}
.pl{color:#86a08d;font-size:.72rem;direction:ltr;unicode-bidi:isolate}
.pt{grid-column:2/4;font-size:.66rem;color:#5d7a67}
.pr.ok{color:#5d7a67}.pr.ok .pm{text-decoration:line-through}.pr.ok .pc{background:var(--lime)}
.ide-status{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#14301e;color:#c9e8b2;font-size:.76rem;min-height:2.6rem}
.fixbtn{background:transparent;color:var(--lime);border:1px solid var(--lime);border-radius:6px;padding:.2rem .7rem;font-size:.74rem;transition:background .2s,color .2s,transform .15s}
.fixbtn.press{background:var(--lime);color:#0b150f;transform:scale(.93)}
/* live */
.pl-live,.pl-cat{padding:clamp(3rem,7vw,6rem) 0}
.pl-live{border-top:1px solid var(--line-2);background:linear-gradient(180deg,var(--card),transparent)}
.pl-tools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1.4rem 0 1rem}
.seg{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--card)}
.seg-l{padding:0 .7rem;font-size:.78rem;color:var(--muted)}
.seg label{cursor:pointer}.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span:not(.seg-l){display:block;padding:.45rem .9rem;font:600 .82rem var(--f-m);color:var(--muted);transition:background .2s,color .2s}
.seg input:checked+span{background:var(--acc);color:var(--on-acc)}
.seg input:focus-visible+span{outline:3px solid var(--acc);outline-offset:-3px}
.btn.sm{min-height:36px;padding:.25rem .85rem;font-size:.85rem}
.pl-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:1rem;align-items:start}
@media(max-width:900px){.pl-grid{grid-template-columns:1fr}}
.pl-edit{position:relative;border:1px solid var(--line-2);border-radius:12px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.pl-ta,.pl-bd{font:500 1.18rem/2.2 Vazirmatn,sans-serif;padding:.9rem 1.1rem;border:0;margin:0;width:100%;box-sizing:border-box;min-height:20rem;height:20rem;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;letter-spacing:0;word-spacing:0;tab-size:4;text-align:start}
.pl-bd{position:absolute;inset:0;color:transparent;overflow:hidden;pointer-events:none}
.pl-ta{position:relative;display:block;background:transparent;color:var(--fg);resize:vertical;overflow:auto;caret-color:var(--acc)}
.pl-ta:focus{outline:none}.pl-edit:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--okbg),var(--shadow)}
.pl-bd mark{background:none;color:transparent;text-decoration:underline wavy var(--sq,#d98a00);text-decoration-thickness:1.6px;text-underline-offset:.32em;text-decoration-skip-ink:none}
.pl-bd mark.z{text-decoration:none;box-shadow:0 0 0 1.4px var(--sq)}
.pl-bd mark.hl{background:color-mix(in srgb,var(--sq) 25%,transparent)}
.c-arabic-letters{--sq:#e0432f}.c-arabic-digits,.c-digits{--sq:#d86a14}.c-zwnj{--sq:#c98a00}.c-punct{--sq:#3a6fd8}.c-quotes{--sq:#9b4fd0}.c-spaces,.c-tatweel{--sq:#7a8a80}
html[data-theme=dark] .c-arabic-letters{--sq:#ff8a7a}html[data-theme=dark] .c-punct{--sq:#8fb0ff}html[data-theme=dark] .c-quotes{--sq:#d6a0ff}html[data-theme=dark] .c-zwnj{--sq:#ffb454}html[data-theme=dark] .c-digits,html[data-theme=dark] .c-arabic-digits{--sq:#ff9d55}html[data-theme=dark] .c-spaces,html[data-theme=dark] .c-tatweel{--sq:#9fb5a6}
.pl-cats{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.pl-cats button{font:600 .74rem var(--f-m);padding:.3rem .65rem;border-radius:99px;border:1px solid var(--line-2);background:var(--card);color:var(--fg-2);cursor:pointer;transition:transform .2s,background .2s,opacity .2s}
.pl-cats button::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--sq,#888);margin-inline-end:.4rem}
.pl-cats button[aria-pressed=false]{opacity:.45}
.pl-cats button.bump{transform:scale(1.12)}
.plist.live{background:var(--code-bg);color:var(--code-fg);border-radius:12px;max-height:20rem;overflow:auto;border:1px solid var(--line-2)}
.plist.live .pr{opacity:1;transform:none;cursor:pointer;grid-template-columns:3.6rem 1fr auto auto}
.plist.live .pr:hover{background:rgba(155,217,106,.08)}
.plist.live .pr[hidden]{display:none}
.plist.live .pr .pt{grid-column:auto}
.plist.live .pc{background:var(--sq,#ffb454);color:#0b150f}
.plist.live .empty{padding:1.2rem;color:#9fc79a;font-size:.95rem}
.fxb{background:transparent;border:1px solid #4f6a58;color:var(--lime);border-radius:6px;font:600 .7rem var(--f-m);padding:.15rem .5rem;cursor:pointer}
.fxb:hover{background:var(--lime);color:#0b150f}
.hint{font-size:.85rem;color:var(--muted);margin:.8rem 0 0}
.mono{font-family:var(--f-m)}
/* xray */
.pl-xr{border-top:1px solid var(--line-2)}
.xr-track{height:230vh;position:relative}
.xr-stick{position:sticky;top:64px;min-height:calc(100vh - 64px);display:flex;align-items:center;padding:1.5rem 0}
.xr-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;margin-top:1.5rem}
@media(max-width:860px){.xr-wrap{grid-template-columns:1fr}.xr-stick{align-items:flex-start}}
.xr-doc{--p:0;position:relative;display:grid;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);min-height:15rem;direction:ltr}
.xr-page,.xr-xml{grid-area:1/1;padding:1.6rem}
.xr-page{background:#fffef8;color:#1a1a1a;display:flex;flex-direction:column;justify-content:center;gap:1rem}
html[data-theme=dark] .xr-page{background:#f6f3e6}
.xr-p{font:400 1.5rem/2 "B Nazanin",Vazirmatn,serif;margin:0;text-align:right}
.xr-note{font-size:.72rem;color:#6a6a5a;text-align:left}
.xr-xml{background:#0b150f;color:#cfe8bf;clip-path:inset(0 calc(100% - var(--p)*1%) 0 0);display:flex;align-items:center}
.xr-xml pre{margin:0;font:500 clamp(.72rem,1.4vw,.92rem)/1.9 var(--f-m);white-space:pre-wrap;word-break:break-word}
.xr-xml s{color:var(--red);text-decoration:line-through;text-decoration-thickness:2px;background:rgba(255,138,122,.14)}
.xr-line{position:absolute;top:0;bottom:0;left:calc(var(--p)*1%);width:2px;background:var(--lime);box-shadow:0 0 14px 2px rgba(155,217,106,.6)}
.xr-r{display:block;font-size:.78rem;color:var(--muted);margin-top:1.2rem}
#xr{width:100%;accent-color:var(--acc);margin:.5rem 0}
.xr-leg{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin:0}
/* catalogue */
.cat-list{list-style:none;margin:2rem 0 0;padding:0}
.cat{position:relative;display:grid;grid-template-columns:minmax(8rem,15rem) 1fr;gap:1.5rem;padding:1.5rem .8rem;border-top:1px solid var(--line-2);overflow:hidden;isolation:isolate}
.cat:last-child{border-bottom:1px solid var(--line-2)}
.cat::before{content:"";position:absolute;inset:0;background:var(--okbg);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.5,0,.2,1);z-index:-1}
html[dir=rtl] .cat::before{transform-origin:right}
.cat:hover::before,.cat:focus-within::before{transform:scaleX(1)}
.cat-c{font:700 clamp(1.2rem,2.4vw,1.9rem)/1.1 var(--f-m);color:var(--acc-ink);direction:ltr;text-align:start}
.cat h3{font-size:1.35rem;margin:0 0 .3rem}.cat p{margin:0;color:var(--fg-2);max-width:62ch}
@media(max-width:700px){.cat{grid-template-columns:1fr;gap:.4rem}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s,transform .55s}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.plh h1 em::after{animation:none}.xr-track{height:auto}.xr-stick{position:static}.pr{opacity:1;transform:none}.beam{display:none}}