@font-face{font-family:Vazirmatn;src:url("../fonts/Vazirmatn-wght.woff2") format("woff2-variations"),url("../fonts/Vazirmatn-wght.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--bg:#07070a;--pn:rgba(16,16,22,.72);--pn2:rgba(20,20,27,.93);--ln:#ffffff1a;--tx:#f3eef0;--mu:#958e97;--ac:#ff4d63;--ok:#3ddc97;--wa:#ffb84d;
 --cN:#4de1ff;--cO:#3ddc97;--cI:#ffb84d;--cA:#a78bfa;--cR:#ff7ac6;--cD:#5b8cff;--e:cubic-bezier(.22,1,.36,1);--sp:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:radial-gradient(120% 90% at 30% 40%,#1a0d14 0%,#0b0a10 45%,#050507 100%);color:var(--tx);font:15px/1.75 Vazirmatn,Tahoma,system-ui,sans-serif;overflow:hidden;-webkit-tap-highlight-color:transparent}
#bgfx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.au{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.28;mix-blend-mode:screen;animation:au 26s ease-in-out infinite alternate}
.a1{background:#ff2d55;left:-18vmax;top:-20vmax}.a2{background:#3b5bff;right:-22vmax;top:10vmax;animation-duration:32s;opacity:.18}.a3{background:#ff9f43;left:20vmax;bottom:-35vmax;animation-duration:38s;opacity:.14}
@keyframes au{50%{transform:translate(8vmax,6vmax) scale(1.15)}100%{transform:translate(-4vmax,10vmax) scale(.9)}}
body:not(.on-land) #bgfx{opacity:.45;transition:opacity 1s}
canvas#c{position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;z-index:1}body.sc canvas#c{cursor:none}canvas#c.gr,body.sc canvas#c.gr{cursor:grabbing}
body.on-land canvas#c{pointer-events:none}
button{position:relative;overflow:hidden;font:inherit;color:var(--mu);background:var(--pn);border:1px solid var(--ln);border-radius:14px;min-height:44px;padding:0 15px;cursor:pointer;transition:transform .35s var(--e),color .3s,background .3s,border-color .3s,box-shadow .35s,opacity .3s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
button:hover{color:var(--tx);border-color:#ffffff3a}button:active{transform:scale(.93)}
button.on{color:#fff;background:linear-gradient(135deg,#ff4d6338,#ff4d6314);border-color:var(--ac);box-shadow:0 0 18px #ff4d6355,inset 0 0 0 1px var(--ac);transform:translateY(-2px)}
button:disabled{opacity:.35;transform:scale(.97);cursor:default}
button:focus-visible,a:focus-visible{outline:2px solid var(--cN);outline-offset:2px}
button.rp::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ffffff55,transparent 62%);animation:rp .55s var(--e) forwards}
@keyframes rp{from{transform:scale(.2);opacity:1}to{transform:scale(2.4);opacity:0}}
#cut.on svg{animation:wig .5s var(--e)}@keyframes wig{0%{transform:rotate(-40deg)}60%{transform:rotate(12deg)}100%{transform:rotate(0)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ═════════ لندینگ ═════════ */
#land{position:fixed;inset:0;z-index:9;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;transition:opacity .9s var(--e),transform .9s var(--e),filter .9s}
#land.out{opacity:0;transform:scale(1.06);filter:blur(8px);pointer-events:none}
#land::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;padding:14px max(16px,4vw);background:linear-gradient(#07070acc,#07070a00);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.logo{display:flex;align-items:center;gap:8px;color:var(--tx);text-decoration:none;font-size:18px;letter-spacing:.06em}
.nl{display:flex;gap:22px;margin-inline-start:auto}.nl a{color:var(--mu);text-decoration:none;font-size:14px;transition:color .3s}.nl a:hover{color:var(--tx)}
.go{background:linear-gradient(135deg,#ff4d63,#ff7a45);color:#fff;font-weight:700;border-color:transparent;min-width:180px;min-height:52px;border-radius:16px;box-shadow:0 10px 40px -10px #ff4d63aa}
.go:hover{color:#fff;box-shadow:0 14px 50px -8px #ff4d63;transform:translateY(-2px)}.go.sm{min-width:0;min-height:40px;border-radius:12px}
.go:not(:disabled)::before{content:"";position:absolute;inset:-2px;background:linear-gradient(110deg,transparent 30%,#ffffff66 50%,transparent 70%);transform:translateX(-120%);animation:sh 3.2s 1s infinite}
@keyframes sh{40%,100%{transform:translateX(120%)}}
.ghost{min-height:52px;border-radius:16px;color:var(--tx)}
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;padding:0 max(16px,6vw) 60px}
.hx{position:relative;z-index:2;max-width:620px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.04em;color:#ffd5dc;padding:6px 14px;border-radius:999px;background:#ff4d6316;border:1px solid #ff4d6340;animation:rise 1s var(--e) both}
.live{width:8px;height:8px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 0 0 #ff3b5c;animation:lv 1.6s infinite;display:inline-block}
@keyframes lv{70%{box-shadow:0 0 0 10px #ff3b5c00}100%{box-shadow:0 0 0 0 #ff3b5c00}}
h1{font-weight:900;font-size:clamp(38px,6.2vw,84px);line-height:1.08;margin:18px 0 10px;letter-spacing:-.01em}
h1 .w{display:inline-block;animation:wd 1s var(--e) both}h1 .w:nth-child(2){animation-delay:.08s}h1 .w:nth-child(3){animation-delay:.16s}h1 .w:nth-child(4){animation-delay:.24s}
@keyframes wd{from{opacity:0;transform:translateY(.5em) rotate(4deg);filter:blur(10px)}}
h1 em{display:block;font-style:normal;font-weight:800;font-size:.58em;margin-top:.25em;background:linear-gradient(90deg,#ff4d63,#ffb84d,#4de1ff,#a78bfa,#ff4d63);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gr 8s linear infinite,rise 1.2s .35s var(--e) both}
@keyframes gr{to{background-position:300% 0}}
.lead{color:#c9c1c6;font-size:clamp(15px,1.35vw,18px);max-width:540px;animation:rise 1.2s .45s var(--e) both}
.c-o{color:var(--cO)}.c-i{color:var(--cI)}.c-d{color:#8fb0ff}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;animation:rise 1.2s .55s var(--e) both}
#pg{width:min(320px,100%);height:3px;background:#ffffff1a;border-radius:3px;margin-top:20px;overflow:hidden}#pg i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok),var(--cN));transition:width .4s var(--e)}
.st{color:var(--mu);font-size:12.5px;margin:6px 0 0}
.stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:12px 28px;margin-top:26px;animation:rise 1.2s .7s var(--e) both}
.stats b{display:block;font-size:clamp(24px,2.6vw,34px);font-weight:800;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#ffffff99);-webkit-background-clip:text;background-clip:text;color:transparent}.stats span{font-size:12px;color:var(--mu)}
.hv{position:relative;height:100%;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:9vh;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--pn);border:1px solid var(--ln);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px}
.lchip span{transition:opacity .3s}.lsteps{display:flex;gap:6px;margin-top:10px}.lsteps i{width:26px;height:4px;border-radius:4px;background:#ffffff22;transition:.5s var(--e)}.lsteps i.on{background:var(--ac);width:44px;box-shadow:0 0 12px var(--ac)}
#ltag{position:absolute;left:0;top:0;z-index:3;pointer-events:none;padding:8px 12px;border-radius:12px;background:#0c0c12d9;border:1px solid var(--cN);box-shadow:0 0 24px #4de1ff44;opacity:0;transition:opacity .5s;will-change:transform;white-space:nowrap}
#ltag.v{opacity:1}#ltag b{display:block;color:var(--cN);font-size:14px}#ltag small{display:block;color:var(--mu);direction:ltr;text-align:left;font-size:11px}
#ltag::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--cN);bottom:-22px;left:50%;margin-left:-5px;box-shadow:0 0 0 6px #4de1ff33}
#ltag::before{content:"";position:absolute;width:1px;height:16px;background:var(--cN);bottom:-14px;left:50%}
.scroll{position:absolute;bottom:22px;left:50%;width:26px;height:42px;border:2px solid #ffffff44;border-radius:14px;margin-left:-13px}.scroll i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:sc 1.8s infinite}@keyframes sc{60%{transform:translateY(12px);opacity:0}}
.marq{position:relative;overflow:hidden;padding:16px 0;border-block:1px solid var(--ln);background:#07070ab3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
#mq{display:flex;gap:40px;width:max-content;animation:mq 60s linear infinite}#mq span{white-space:nowrap;color:#cfc6cb;font-size:15px}#mq span small{color:var(--mu);direction:ltr;margin-inline-start:8px;font-size:12px}#mq span::before{content:"✦";color:var(--ac);margin-inline-end:14px}
@keyframes mq{to{transform:translateX(50%)}}
.sec{position:relative;padding:110px max(16px,6vw);background:linear-gradient(#07070ae6,#07070af2)}
.sec h2{font-size:clamp(28px,3.8vw,50px);font-weight:900;margin:0;line-height:1.2}.sec h2 em{font-style:normal;background:linear-gradient(90deg,#ff4d63,#ffb84d);-webkit-background-clip:text;background-clip:text;color:transparent}
.sl{color:var(--mu);max-width:640px;font-size:16px}
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--e),transform 1s var(--e)}.rv.in{opacity:1;transform:none}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.card{--mx:50%;--my:50%;position:relative;padding:22px;border-radius:24px;background:radial-gradient(400px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 18%,transparent),transparent 60%),#101016;border:1px solid var(--ln);overflow:hidden;transition:transform .5s var(--e),border-color .4s,opacity 1s var(--e)}
.card:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent)}
.card.big{grid-row:span 2}.card h3{margin:14px 0 6px;font-size:19px;color:var(--c)}.card p{margin:0;color:#b9b0b6;font-size:14px}
.demo{height:110px;border-radius:16px;background:#0a0a0f;border:1px solid var(--ln);display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden}
.big .demo{height:260px}
.pin{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font:800 13px/1 system-ui;color:#08130e;box-shadow:0 0 0 0 currentColor}
.pin.o{background:var(--cO);animation:pp 2s infinite}.pin.i{background:var(--cI);animation:pp 2s 1s infinite}
@keyframes pp{0%{box-shadow:0 0 0 0 #ffffff55}70%{box-shadow:0 0 0 14px #ffffff00}}
.dO .bar{width:44%;height:34px;border-radius:30px;background:linear-gradient(90deg,#7a1f2b,#c0473f,#7a1f2b);box-shadow:inset 0 6px 10px #ffffff22,inset 0 -8px 12px #00000066;animation:ct 2.4s ease-in-out infinite}
@keyframes ct{50%{transform:scaleX(.82) scaleY(1.25)}}
.dV span{padding:6px 12px;border-radius:10px;border:1px solid var(--ln);font-size:13px;color:var(--mu)}.dV span.on{color:#fff;border-color:var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 50%,transparent);animation:vv 3s infinite}
@keyframes vv{33%{transform:translateX(-60px)}66%{transform:translateX(60px)}}
.dD{flex-direction:column;gap:5px}.dD i{width:62%;height:14px;border-radius:8px;transition:.5s}.dD i:nth-child(1){background:#d8a58b}.dD i:nth-child(2){background:#ffb07a;animation:dd 3s infinite}.dD i:nth-child(3){background:#7aa2ff;animation:dd 3s .3s infinite}.dD i:nth-child(4){background:#e8dcc2}
@keyframes dd{50%{transform:translateX(-14px)}}
.dK svg{animation:kn 2.2s var(--e) infinite}@keyframes kn{0%{transform:translate(30px,-20px) rotate(0)}50%{transform:translate(-30px,20px) rotate(-8deg)}100%{transform:translate(30px,-20px)}}
.dQ b{width:34px;height:34px;border-radius:10px;border:1px solid var(--ln);display:flex;align-items:center;justify-content:center;color:var(--mu)}.dQ b.ok{color:#fff;border-color:var(--ok);background:#3ddc9733;animation:rt 2s infinite}
@keyframes rt{40%{transform:scale(1.12)}}
.dA i{width:70px;height:70px;border:2px dashed var(--c);border-radius:16px;transform:perspective(200px) rotateX(55deg);animation:ar 4s linear infinite}@keyframes ar{to{transform:perspective(200px) rotateX(55deg) rotateZ(360deg)}}
.dwrap{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.stack{position:relative;height:420px;perspective:1100px}
.pl{position:absolute;left:50%;top:50%;width:min(360px,80vw);height:200px;margin:-100px 0 0 calc(min(360px,80vw)/-2);border-radius:28px;transform:rotateX(62deg) rotateZ(-38deg) translateZ(var(--z));transition:transform 1.2s var(--e);display:flex;align-items:flex-end;justify-content:flex-start;padding:16px;border:1px solid #ffffff30;box-shadow:0 30px 60px -20px #000}
.pl span{font-weight:700;font-size:15px;transform:rotateZ(38deg);transform-origin:right bottom;color:#fff;text-shadow:0 2px 8px #000}
.p0{--z:90px;background:linear-gradient(135deg,#e9b89c,#b97f63);opacity:.85}.p1{--z:30px;background:linear-gradient(135deg,#ff9a6a,#c0473f)}.p2{--z:-30px;background:linear-gradient(135deg,#7aa2ff,#3b4fd0)}.p3{--z:-90px;background:linear-gradient(135deg,#f2e8d2,#bfae8c)}
.stack.open .p0{--z:190px}.stack.open .p1{--z:70px}.stack.open .p2{--z:-50px}.stack.open .p3{--z:-170px}
.legend{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:10px}.legend li{display:flex;align-items:center;gap:10px}.legend li::before{content:"";width:28px;height:12px;border-radius:6px;background:var(--c);box-shadow:0 0 14px var(--c)}.legend small{color:var(--mu);direction:ltr}
.oss{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:36px}.oss a{display:block;padding:18px 20px;border-radius:18px;background:#101016;border:1px solid var(--ln);text-decoration:none;color:var(--tx);transition:transform .4s var(--e),border-color .3s,opacity 1s var(--e)}
.oss a:hover{transform:translateY(-4px);border-color:#ffffff44}.oss b{display:block;font-size:17px;direction:ltr;text-align:right}.oss span{color:var(--mu);font-size:13px}
.c2{justify-content:center;margin-top:50px}
.ded{display:flex;flex-direction:column;gap:2px;align-items:center;padding:40px 16px calc(env(safe-area-inset-bottom,0px) + 40px);font-size:13px;color:var(--mu);background:#07070a;border-top:1px solid var(--ln)}.ded span:first-child{color:#d9ecf2;font-size:15px}

/* ═════════ رابط اطلس ═════════ */
#ui{display:none;position:relative;z-index:2}#ui.in #top{animation:dn .9s var(--e) both}#ui.in #bar{animation:up .9s .1s var(--e) both}@keyframes dn{from{transform:translateY(-70px);opacity:0}}@keyframes up{from{transform:translateY(120px);opacity:0}}
#top{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);inset-inline:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:4;pointer-events:none}#top>*{pointer-events:auto}
#top .tl,#top .tr{display:flex;gap:8px;align-items:center}#top .tl b{letter-spacing:.08em}
.seg{display:flex;gap:2px;padding:4px;border-radius:16px;background:var(--pn);border:1px solid var(--ln);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.seg button{min-height:36px;border:0;background:none;border-radius:12px;padding:0 12px;font-size:13.5px;backdrop-filter:none}.seg button.on{background:linear-gradient(135deg,#4de1ff33,#4de1ff11);box-shadow:inset 0 0 0 1px var(--cN),0 0 16px #4de1ff44;color:#fff;transform:none}
#bar{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);inset-inline:8px;background:var(--pn);border:1px solid var(--ln);border-radius:20px;padding:10px;z-index:4;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.row{display:flex;gap:8px;overflow-x:auto;position:relative;scrollbar-width:none}.row::-webkit-scrollbar{display:none}.row+.row{margin-top:8px}.row button{flex:0 0 auto}#ind{position:absolute;top:0;bottom:0;border-radius:14px;background:#ff4d6322;border:1px solid var(--ac);transition:transform .5s var(--e),width .5s var(--e);pointer-events:none;box-shadow:0 0 16px #ff4d6344}
#chips button.on{background:none;border-color:transparent;box-shadow:none;transform:none}
#sv{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#sc{position:fixed;left:0;top:0;width:90px;height:90px;pointer-events:none;z-index:5;opacity:0;transition:opacity .25s;will-change:transform}#sc.v{opacity:1}
#sc i{display:block;width:100%;height:100%;transform-origin:4px 86px;transition:transform .3s var(--e)}#sc.sl i{transform:rotate(-24deg) scale(1.15)}
#cr{position:fixed;inset:0;z-index:20;background:#000d;overflow:auto;padding:24px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}#cr.show{opacity:1;visibility:visible}#cr>div{max-width:560px;margin:auto;animation:rise .6s var(--e) both}
.rg{position:fixed;width:12px;height:12px;margin:-6px;border-radius:50%;border:2px solid hsl(var(--h),95%,62%);pointer-events:none;z-index:6;animation:rgo .75s var(--e) forwards}@keyframes rgo{to{transform:scale(7);opacity:0}}
#dleg{position:fixed;top:calc(env(safe-area-inset-top,0px) + 62px);inset-inline-end:12px;z-index:3;display:flex;gap:6px;opacity:0;transform:translateY(-10px);transition:.5s var(--e);pointer-events:none}#dleg.show{opacity:1;transform:none}
#dleg span{font-size:12px;padding:3px 10px 3px 8px;border-radius:999px;background:var(--pn);border:1px solid var(--ln);display:flex;align-items:center;gap:6px}#dleg span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}

/* ── برچسب شناور هنگام عبور نشانگر ── */
#tip{position:fixed;left:0;top:0;z-index:4;pointer-events:none;padding:5px 11px;border-radius:10px;background:#0c0c12e0;border:1px solid var(--ln);font-size:13px;white-space:nowrap;opacity:0;transition:opacity .2s;will-change:transform}#tip.v{opacity:1}#tip small{color:var(--mu);margin-inline-start:6px;font-size:11px}#tip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:6px;background:var(--c)}
/* ── نشانگرهای O / I روی مدل ── */
#pins{position:fixed;inset:0;pointer-events:none;z-index:3}
.mp{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 11.5px/1 system-ui;color:#06110c;will-change:transform;transition:opacity .3s;animation:mpi .6s var(--sp) both}
.mp.o{background:var(--cO);box-shadow:0 0 0 3px #3ddc9744,0 0 18px #3ddc97}.mp.e{background:var(--cI);box-shadow:0 0 0 3px #ffb84d44,0 0 18px #ffb84d}
.mp::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:mpr 1.8s infinite}.mp.o::after{color:var(--cO)}.mp.e::after{color:var(--cI);animation-delay:.9s}
.mp.hl{z-index:2;transform-origin:center}.mp.hl{width:34px;height:34px;margin:-17px;font-size:13px}
.mp.dim{opacity:.18}
@keyframes mpi{from{opacity:0;scale:.2}}@keyframes mpr{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
#lnk{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
#lnk path{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:4 6;animation:lk 1s linear infinite;filter:drop-shadow(0 0 4px currentColor)}@keyframes lk{to{stroke-dashoffset:-20}}

/* ── پنل اطلاعات: جعبه‌های رنگی جدا با موشن متفاوت ── */
#info{position:fixed;z-index:4;top:calc(env(safe-area-inset-top,0px) + 64px);inset-inline-start:12px;width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 230px);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:9px;padding:2px 2px 6px;scrollbar-width:thin;pointer-events:none;opacity:0;transition:opacity .35s}
#info.show{pointer-events:auto;opacity:1}
.ib{--c:var(--cN);position:relative;padding:11px 14px 12px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%),var(--pn2);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-inline-start:3px solid var(--c);box-shadow:0 10px 30px -14px #000,0 0 22px -12px var(--c)}
.ih{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--c);letter-spacing:.02em;font-weight:700;margin-bottom:3px}.ih small{color:var(--mu);font-weight:400;direction:ltr;margin-inline-start:auto;font-size:10.5px}
.ib p{margin:0;font-size:13.5px;line-height:1.85;color:#ece6e9}
.ib .k{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--c);color:#08110d;font:800 10.5px/1 system-ui;flex:0 0 auto}
.b-n{--c:var(--cN)}.b-n b{display:block;font-size:20px;color:#fff;line-height:1.4}.b-n .la{display:block;color:var(--mu);direction:ltr;text-align:left;font-size:12px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.tags span{font-size:11.5px;padding:1px 9px;border-radius:999px;background:#ffffff10;border:1px solid var(--ln)}.tags .lyS{color:#ffb07a;border-color:#ffb07a66}.tags .lyD{color:#9cb8ff;border-color:#7aa2ff66}
.ix{position:absolute;top:8px;inset-inline-end:8px;min-height:28px!important;width:28px;padding:0!important;border-radius:9px!important;font-size:13px}
.b-o{--c:var(--cO)}.b-i{--c:var(--cI)}.b-a{--c:var(--cA)}.b-r{--c:var(--cR)}.b-d{--c:var(--cD)}
.b-o,.b-i{cursor:pointer}.b-o:hover,.b-i:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 26%,transparent),transparent 80%),var(--pn2)}
/* موشن اختصاصی هر جعبه */
#info.show .b-n{animation:mN .7s var(--e) both}@keyframes mN{from{opacity:0;transform:translateY(-26px) scale(.9);filter:blur(10px)}}
#info.show .b-o{animation:mO .75s .12s var(--e) both}@keyframes mO{from{opacity:0;transform:translateX(60px) skewX(-10deg)}}
#info.show .b-i{animation:mI .85s .24s var(--e) both}@keyframes mI{from{opacity:0;transform:perspective(500px) rotateX(80deg) translateY(20px)}}
#info.show .b-a{animation:mA .7s .38s var(--sp) both}@keyframes mA{from{opacity:0;transform:scale(.6)}}
#info.show .b-r{animation:mR .9s .5s var(--e) both}@keyframes mR{from{opacity:.2;clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
#info.show .b-d{animation:mD .8s .62s var(--e) both}@keyframes mD{from{opacity:0;transform:translateY(30px) rotate(-2deg)}}
.b-o::before,.b-i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--c) 30%,transparent) 50%,transparent 70%);transform:translateX(110%);animation:sw 2.6s 1s var(--e) infinite;pointer-events:none}
.b-i::before{animation-delay:2.3s}@keyframes sw{40%,100%{transform:translateX(-110%)}}
/* نردبان عمقی */
.lad{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:l}
.lad li{counter-increment:l;display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 8px;border-radius:10px;background:#ffffff08;border:1px solid transparent;cursor:pointer;animation:ls .5s var(--d) var(--e) both;transition:background .3s}
.lad li:hover{background:#ffffff14}.lad li::before{content:counter(l);width:18px;height:18px;border-radius:6px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font:700 10.5px/1 system-ui;background:var(--lc);color:#111}
.lad li.me{border-color:var(--cN);background:#4de1ff18;box-shadow:0 0 14px -4px var(--cN)}.lad li i{font-style:normal;margin-inline-start:auto;color:var(--mu);font-size:11px;white-space:nowrap}
.lad li em{font-style:normal;font-size:10.5px;padding:0 6px;border-radius:6px;background:#ffffff12;color:var(--mu)}
@keyframes ls{from{opacity:0;transform:translateX(24px)}}
.dv{display:flex;gap:4px;margin-top:6px}.dv button{min-height:26px;padding:0 8px;font-size:11.5px;border-radius:8px}
.note{font-size:10.5px;color:var(--mu);margin-top:5px}

/* ── شیت‌ها: تمرین، لایه‌کاوی ── */
.sheet{position:fixed;inset-inline:8px;bottom:158px;max-width:560px;margin:auto;background:rgba(14,14,18,.93);border:1px solid #ffffff1c;border-radius:20px;padding:12px;z-index:5;opacity:0;visibility:hidden;transform:translateY(30px) scale(.97);transition:opacity .5s var(--e),transform .5s var(--e),visibility .5s;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);max-height:46vh;overflow:auto}.sheet.show{opacity:1;visibility:visible;transform:none}
.qh{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mu)}.qb{flex:1;height:4px;border-radius:4px;background:#ffffff1f;overflow:hidden}.qb i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#4de1ff);transition:width .6s var(--e)}.qx{min-height:28px!important;padding:0 9px!important;border-radius:9px!important}
.qq{font-size:15px;margin:10px 2px;color:#fff}.qo{display:grid;grid-template-columns:1fr 1fr;gap:8px}.qo.one{grid-template-columns:1fr}
.opt{display:flex;flex-direction:column;align-items:flex-start;text-align:start;padding:8px 10px 8px 34px;min-height:54px;animation:oi .5s var(--d,0s) var(--e) both}@keyframes oi{from{opacity:0;transform:translateY(16px) scale(.94)}}
.opt .lt{position:absolute;top:6px;inset-inline-end:8px;font-size:10px;opacity:.5}.opt b{color:var(--tx);font-size:13px;font-weight:600;line-height:1.7}.opt small{direction:ltr;font-size:10.5px;color:var(--mu)}.opt .mk{position:absolute;inset-inline-end:6px;bottom:6px;width:24px;height:24px}
.opt.right{border-color:var(--ok);background:linear-gradient(135deg,#3ddc9733,#3ddc9711);box-shadow:0 0 22px #3ddc9766;animation:rt .5s var(--e)}
.opt.wrong{border-color:#ff4d63;background:#ff4d6322;box-shadow:0 0 22px #ff4d6366;animation:wr .5s}@keyframes wr{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.ck{width:100%;height:100%}.ck circle,.ck path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:dl .7s .05s var(--e) forwards}.right .ck{stroke:var(--ok)}.wrong .ck{stroke:#ff4d63}@keyframes dl{to{stroke-dashoffset:0}}
.bc{position:fixed;width:84px;height:84px;margin:-42px;z-index:8;pointer-events:none;animation:bc 1.2s var(--e) forwards}.bc.g .ck{stroke:#3ddc97;filter:drop-shadow(0 0 10px #3ddc97)}.bc.b .ck{stroke:#ff4d63;filter:drop-shadow(0 0 10px #ff4d63)}@keyframes bc{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.15);opacity:1}70%{transform:scale(1)}100%{transform:translateY(-30px);opacity:0}}
.cf{position:fixed;width:7px;height:11px;border-radius:2px;z-index:8;pointer-events:none;animation:cf .9s var(--e) forwards}@keyframes cf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.qf{margin-top:10px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:30px;color:var(--ok);flex-wrap:wrap}.qf button{min-height:34px;padding:0 12px}
#cap{position:fixed;top:calc(env(safe-area-inset-top,0px) + 62px);left:50%;transform:translate(-50%,-14px);padding:6px 16px;border-radius:999px;background:rgba(14,14,18,.8);border:1px solid #ffffff22;backdrop-filter:blur(8px);z-index:6;opacity:0;transition:opacity .5s var(--e),transform .5s var(--e);pointer-events:none;font-size:13px;white-space:nowrap}#cap.show{opacity:1;transform:translate(-50%,0)}
.steps{display:flex;gap:6px;margin:8px 0}.steps span{flex:1;text-align:center;font-size:11.5px;padding:4px;border-radius:10px;background:#ffffff10;color:var(--mu);transition:.4s}.steps span.on{background:#4de1ff22;color:#4de1ff;box-shadow:inset 0 0 0 1px #4de1ff}.steps span.dn{background:#3ddc9722;color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.ph{display:flex;justify-content:space-between;align-items:baseline}.ph small{color:var(--mu);font-size:11px}#pl label,.lr,.cs{display:flex;align-items:center;gap:8px;margin:9px 0;font-size:13px}#pl input[type=range]{flex:1;accent-color:var(--ac)}.lr button,.cs button{min-height:30px;padding:0 10px}.lr button:not(.on){opacity:.4}.lr span{width:64px}.ax{display:flex;gap:4px}
.fi{width:100%;background:#ffffff10;border:1px solid #ffffff22;border-radius:12px;color:#fff;padding:7px 10px;font:inherit;margin-top:4px}
button.m0{animation:b0 .5s var(--e)}button.m1{animation:b1 .5s var(--e)}button.m2{animation:b2 .6s var(--e)}button.m3{animation:b3 .65s var(--e)}button.m4{animation:b4 .6s var(--e)}button.m5{animation:b5 .4s var(--e)}button.m6{animation:b6 .55s var(--e)}button.m7{animation:b7 .6s var(--e)}
button.c0{animation:k0 .5s var(--e)}button.c1{animation:k1 .5s var(--e)}button.c2{animation:k2 .55s var(--e)}button.c3{animation:k3 .5s}
@keyframes b0{40%{transform:scale(.88)}}@keyframes b1{30%{transform:rotate(-9deg) scale(1.08)}65%{transform:rotate(5deg)}}@keyframes b2{to{transform:rotate(-360deg)}}@keyframes b3{to{transform:perspective(300px) rotateY(360deg)}}
@keyframes b4{25%{transform:rotate(8deg)}50%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}@keyframes b5{50%{transform:scale(.6);opacity:.5}}@keyframes b6{35%{transform:translateY(-9px) scale(1.15)}70%{transform:translateY(2px)}}@keyframes b7{40%{transform:scale(1.14);box-shadow:0 0 36px #ff4d63}}
@keyframes k0{40%{transform:scale(1.15,.68)}}@keyframes k1{40%{transform:scale(1.18) rotate(7deg)}}@keyframes k2{40%{transform:translateY(11px) scale(.95)}}@keyframes k3{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
#mu.off{opacity:.45}

/* ═════════ ریسپانسیو ═════════ */
@media (max-width:960px){
 .hero{grid-template-columns:1fr;align-content:end;padding-top:40vh;min-height:100svh}
 .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 18%,#07070acc 52%,#07070a 90%);pointer-events:none;z-index:1}
 .hv{position:absolute;top:74px;inset-inline:16px;min-height:0;height:auto;padding:0;align-items:flex-end;justify-content:flex-start}.hv .chip{font-size:12px;padding:5px 11px}.scroll{display:none}
 .bento,.oss{grid-template-columns:1fr 1fr}.card.big{grid-column:span 2;grid-row:auto}.big .demo{height:150px}
 .dwrap{grid-template-columns:1fr}.stack{height:330px}.nl{display:none}.nav .go{margin-inline-start:auto}
 .stats{grid-template-columns:repeat(2,auto)}
}
@media (max-width:760px){
 #top{flex-wrap:wrap}#views{order:3;width:100%;justify-content:space-between}.seg button{flex:1;padding:0 6px;font-size:12.5px}
 #info{top:auto;bottom:154px;inset-inline:8px;width:auto;max-height:40vh;padding-bottom:2px}
 #info .b-a,#info .b-r{display:none}#info.full .b-a,#info.full .b-r{display:block}
 #dleg,#cap{top:calc(env(safe-area-inset-top,0px) + 108px)}
 body.qz #info{display:none}
}
@media (max-width:560px){.bento,.oss{grid-template-columns:1fr}.card.big{grid-column:auto}.sec{padding:80px 16px}.go{min-width:150px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}