@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Marhey:wght@500;600;700&display=swap');
:root{--ink:#18352d;--forest:#17483b;--forest2:#286453;--gold:#d6b866;--sand:#f3ead3;--paper:#fffdf7;--sky:#dcefeb;--muted:#71827b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Cairo,Tahoma,sans-serif;background:linear-gradient(180deg,#e5f2ef 0,#f7f1df 42%,#efe4c9 100%);color:var(--ink);min-height:100vh}.grain{position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");z-index:50}.topbar{height:72px;padding:0 max(18px,calc((100vw - 1440px)/2));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(24,53,45,.12);background:rgba(255,253,247,.78);backdrop-filter:blur(18px);position:sticky;top:0;z-index:40}.topbar>a{color:var(--forest);text-decoration:none;font-size:12px}.topbar>a:last-child{text-align:left}.brand{display:flex;align-items:center;gap:9px}.brand-mark{width:34px;height:34px;border:1px solid rgba(23,72,59,.22);border-radius:50%;display:grid;place-items:center;color:var(--gold)}.brand b{font-family:Marhey;font-size:15px}.brand small{font-size:9px;color:var(--muted)}.hero{width:min(1440px,calc(100% - 28px));margin:18px auto 22px;min-height:430px;border-radius:36px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;background:radial-gradient(circle at 72% 25%,rgba(221,196,113,.23),transparent 25%),linear-gradient(125deg,#123d32,#245d4c 65%,#2f6b58);color:white;position:relative;box-shadow:0 30px 90px rgba(24,53,45,.25)}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(30deg,rgba(255,255,255,.035) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.035) 87.5%),linear-gradient(150deg,rgba(255,255,255,.035) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.035) 87.5%);background-size:46px 80px}.hero-copy{padding:60px 66px;position:relative;z-index:2}.eyebrow{font-size:11px;letter-spacing:.6px;color:#e5d59b}.hero h1{font-family:Marhey;font-size:clamp(48px,6vw,82px);line-height:1.32;margin:13px 0}.hero h1 em{font-style:normal;color:#ead27d}.hero p{max-width:670px;line-height:2.1;color:#dce9e5;font-size:15px}.hero-actions{display:flex;align-items:center;gap:20px;margin-top:25px}.hero-actions button{border:0;border-radius:999px;padding:14px 24px;background:#e5cb72;color:#203e35;font-family:Cairo;font-weight:800;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.2)}.hero-actions span{font-size:10px;color:#dce9e5}.hero-actions i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#82d1aa;box-shadow:0 0 0 7px rgba(130,209,170,.12);margin-left:9px}.hero-art{position:relative;min-height:430px;overflow:hidden}.sun-ring{position:absolute;width:245px;height:245px;border-radius:50%;background:radial-gradient(circle,#f5df91 0 29%,rgba(245,223,145,.2) 30% 43%,transparent 44%);top:48px;left:50%;transform:translateX(-50%);box-shadow:0 0 80px rgba(245,223,145,.25)}.mountain{position:absolute;bottom:-40px;width:520px;height:270px;background:#173f34;clip-path:polygon(0 100%,16% 55%,30% 76%,48% 20%,64% 69%,80% 43%,100% 100%)}.m1{left:-30px;opacity:.95}.m2{right:-210px;bottom:-65px;background:#0f3028;transform:scale(.88)}.seed{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);width:112px;height:138px;border-radius:60% 60% 55% 55%;background:linear-gradient(160deg,#f6e7ad,#d8bd64);color:#244c3e;display:grid;place-items:center;text-align:center;font-family:Marhey;font-size:14px;box-shadow:0 24px 50px rgba(0,0,0,.3)}main{width:min(1440px,calc(100% - 28px));margin:auto}.control-deck{display:grid;grid-template-columns:minmax(280px,1fr) auto auto;align-items:center;gap:14px;background:rgba(255,253,247,.9);border:1px solid rgba(24,53,45,.1);border-radius:22px;padding:13px 15px;box-shadow:0 14px 40px rgba(24,53,45,.1)}.searchbox{display:flex;align-items:center;background:#f5f0e3;border-radius:14px;padding:0 13px}.searchbox span{font-size:23px;color:var(--forest)}.searchbox input{width:100%;border:0;background:transparent;padding:13px;font-family:Cairo;outline:0;color:var(--ink)}.searchbox button{border:0;background:transparent;font-size:20px;color:#8c978f;cursor:pointer}.filters{display:flex;gap:7px;overflow:auto;max-width:680px}.filter{border:1px solid rgba(24,53,45,.12);background:white;color:var(--forest);padding:8px 11px;border-radius:999px;font-family:Cairo;white-space:nowrap;cursor:pointer;font-size:10px}.filter b{margin-right:6px;background:#edf1e7;padding:2px 7px;border-radius:999px;font-size:8px}.filter.active{background:var(--forest);color:white}.filter.active b{background:rgba(255,255,255,.14)}.tree-tools{display:flex;align-items:center;gap:5px}.tree-tools button,.tree-tools output{border:1px solid rgba(24,53,45,.12);background:white;color:var(--forest);height:34px;min-width:34px;border-radius:10px;padding:0 10px;font-family:Cairo;font-size:10px}.tree-tools button{cursor:pointer}.experience{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;margin:16px 0 35px}.guide{background:rgba(255,253,247,.92);border-radius:24px;padding:20px;height:max-content;position:sticky;top:90px;border:1px solid rgba(24,53,45,.1)}.guide-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid rgba(24,53,45,.1)}.guide-head span{font-size:11px;color:var(--muted)}.guide-head b{font-size:10px;background:#edf3eb;padding:5px 8px;border-radius:999px}.guide ol{list-style:none;margin:18px 0;padding:0}.guide li{display:flex;gap:10px;align-items:center;padding:10px 0;opacity:.65}.guide li.active{opacity:1}.guide li>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#edf3eb;color:var(--forest);font-weight:800}.guide li.active>span{background:var(--forest);color:white}.guide li b{display:block;font-size:11px}.guide li small{font-size:8px;color:var(--muted)}.legend{border-top:1px solid rgba(24,53,45,.1);padding-top:12px;display:grid;gap:8px}.legend span{font-size:9px;color:#5f716a}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px}.dot.early{background:#c18d4b}.dot.resolve{background:#3f7c62}.dot.israel{background:#4f7fa2}.dot.arab{background:#a96850}.tree-stage{min-height:760px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#dceeea 0 68%,#d8c090 68% 100%);position:relative;border:1px solid rgba(24,53,45,.11);box-shadow:inset 0 0 90px rgba(255,255,255,.5)}.tree-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 17%,rgba(255,255,255,.8) 0 2px,transparent 3px),radial-gradient(circle at 82% 22%,rgba(255,255,255,.7) 0 2px,transparent 3px);background-size:160px 140px}.canvas-scroll{width:100%;height:760px;overflow:auto;direction:ltr}.tree-canvas{width:1280px;height:900px;position:relative;margin:auto;transition:transform .25s ease}.crown-glow{position:absolute;left:260px;right:260px;top:35px;height:550px;border-radius:50%;background:radial-gradient(ellipse,rgba(79,126,87,.20),transparent 68%)}.branches{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.branches path{fill:none;stroke-linecap:round}.branches .trunk{stroke:#765036;stroke-width:34;filter:drop-shadow(0 9px 6px rgba(61,40,27,.18))}.branches .branch{stroke:#856042;stroke-width:13;stroke-dasharray:1200;stroke-dashoffset:1200;animation:grow 1.2s ease forwards}.branches .b2{animation-delay:.08s}.branches .b3{animation-delay:.16s}.branches .b4{animation-delay:.24s}.branches .b5{animation-delay:.32s}.branches .b6{animation-delay:.4s}.branches .b7{animation-delay:.48s}.branches .b8{animation-delay:.56s}@keyframes grow{to{stroke-dashoffset:0}}.tree{position:absolute;inset:0}.leaf-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(.75);width:150px;min-height:96px;border:0;padding:15px 13px 12px;border-radius:48% 52% 48% 52%/58% 54% 46% 42%;background:linear-gradient(145deg,#fffef9,#eaf3e7);color:var(--ink);box-shadow:0 14px 28px rgba(24,53,45,.18),inset 0 0 0 1px rgba(255,255,255,.9);cursor:pointer;opacity:0;animation:leafIn .58s cubic-bezier(.2,.9,.25,1.15) forwards;animation-delay:var(--delay);font-family:Cairo;direction:rtl}.leaf-node:after{content:"";position:absolute;width:26px;height:7px;background:#75533a;bottom:-7px;left:50%;transform:translateX(-50%);border-radius:9px;z-index:-1}.leaf-node:hover{transform:translate(-50%,-50%) scale(1.05) rotate(-1deg);z-index:5}.leaf-node strong{display:block;font-size:12px;line-height:1.6}.leaf-node small{display:block;font-size:8px;color:#71827b;margin-top:3px}.leaf-icon{display:grid;place-items:center;margin:auto auto 5px;width:29px;height:29px;border-radius:50%;background:#e6efe3;color:#477058}.leaf-node.resolve{background:linear-gradient(145deg,#fffef8,#e3f0e7)}.leaf-node.israel{background:linear-gradient(145deg,#fff,#e6f0f5)}.leaf-node.arab{background:linear-gradient(145deg,#fffaf5,#f2e3d8)}.leaf-node.early{background:linear-gradient(145deg,#fffaf0,#f0e5c9)}@keyframes leafIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.roots{position:absolute;left:0;right:0;bottom:48px;text-align:center;color:#6a5237}.roots span{display:block;margin:auto;width:330px;height:75px;border-radius:50%;border-bottom:8px solid rgba(110,78,48,.45);box-shadow:0 23px 0 -15px rgba(110,78,48,.35)}.roots b{display:inline-block;background:#ead8ae;padding:7px 18px;border-radius:999px;font-size:10px}.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.empty b{font-family:Marhey;font-size:24px}.empty span{font-size:11px;color:var(--muted)}dialog{border:0;border-radius:28px;padding:0;width:min(730px,94vw);max-height:90vh;overflow:auto;background:var(--paper);box-shadow:0 30px 100px rgba(11,36,28,.45)}dialog::backdrop{background:rgba(10,34,27,.72);backdrop-filter:blur(8px)}.close{position:sticky;float:left;top:14px;left:14px;z-index:4;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.88);font-size:22px;cursor:pointer}.story-hero{min-height:230px;padding:44px 38px 35px;background:linear-gradient(125deg,#173f34,#2e6b57);color:white;display:flex;align-items:center;gap:20px}.story-hero>span{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:30px}.story-hero small{color:#e6d699;font-size:10px}.story-hero h2{font-family:Marhey;font-size:38px;margin:5px 0}.story-hero p{margin:0;color:#dbe8e3}.story-hero.israel{background:linear-gradient(125deg,#284d68,#4d7894)}.story-hero.arab{background:linear-gradient(125deg,#6f4335,#a46750)}.story-hero.early{background:linear-gradient(125deg,#624b31,#9b7448)}#storyBody>blockquote{margin:0;padding:22px 38px;background:#f1e8cf;border:0;border-right:5px solid var(--gold);font-family:Marhey;line-height:2;color:#5f5438}.story-section{padding:24px 38px}.story-section span{font-size:10px;color:var(--muted);letter-spacing:.5px}.story-section p{line-height:2.1;color:#52655d}.story-section.lesson{margin:0 38px 34px;padding:20px;border-radius:16px;background:#eaf2e8;border-right:4px solid #65916d}footer{width:min(1440px,calc(100% - 28px));margin:0 auto 22px;display:flex;justify-content:space-between;font-size:9px;color:#7f8177}@media(max-width:980px){.hero{grid-template-columns:1fr}.hero-art{display:none}.control-deck{grid-template-columns:1fr}.filters{max-width:100%}.experience{grid-template-columns:1fr}.guide{position:static}.guide ol{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.guide li{padding:8px}.legend{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.topbar{grid-template-columns:1fr auto 1fr}.brand small{display:none}.hero-copy{padding:38px 24px}.hero h1{font-size:44px}.hero-actions{align-items:flex-start;flex-direction:column}.tree-tools{flex-wrap:wrap}.guide ol{grid-template-columns:1fr}.canvas-scroll{height:690px}.tree-stage{min-height:690px}footer{flex-direction:column;gap:5px}.story-hero{padding:42px 22px 28px;align-items:flex-start}.story-hero h2{font-size:29px}.story-section,#storyBody>blockquote{padding-right:24px;padding-left:24px}.story-section.lesson{margin:0 24px 25px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

[hidden]{display:none!important}.empty{pointer-events:none;z-index:8}.canvas-scroll{cursor:grab;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;touch-action:pan-x pan-y}.canvas-scroll::-webkit-scrollbar{display:none}.canvas-scroll.is-dragging{cursor:grabbing;user-select:none}.leaf-node{pointer-events:auto;touch-action:manipulation}.tree-canvas{will-change:transform}.tree-stage:after{content:'اسحب لتحريك الشجرة • استخدم + و − للتكبير';position:absolute;left:16px;bottom:14px;background:rgba(255,253,247,.88);border:1px solid rgba(24,53,45,.1);border-radius:999px;padding:7px 12px;font-size:9px;color:#5f716a;pointer-events:none;backdrop-filter:blur(8px)}@media(max-width:640px){.tree-stage:after{content:'اسحب لتحريك الشجرة';left:10px;bottom:10px}}

/* V1.2 — immersive story panel */
body.story-open{overflow:hidden}.story-panel{position:fixed;top:0;right:0;height:100dvh;width:min(520px,42vw);background:rgba(255,253,247,.98);box-shadow:-24px 0 80px rgba(18,61,50,.28);z-index:120;transform:translateX(105%);transition:transform .48s cubic-bezier(.2,.8,.2,1);overflow:hidden;border-left:1px solid rgba(24,53,45,.12)}.story-panel.open{transform:translateX(0)}.story-panel-inner{height:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(23,72,59,.25) transparent}.story-close{position:absolute;top:16px;left:16px;z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid rgba(24,53,45,.12);background:rgba(255,255,255,.9);color:var(--forest);font-size:22px;cursor:pointer;box-shadow:0 8px 25px rgba(24,53,45,.12)}.story-backdrop{position:fixed;inset:0;background:rgba(12,35,29,.38);backdrop-filter:blur(5px);z-index:110}.story-backdrop[hidden]{display:none!important}.story-panel .story-hero{min-height:300px;padding:72px 42px 34px;display:block;position:relative;overflow:hidden}.story-panel .story-hero:after{content:"";position:absolute;inset:auto -70px -105px auto;width:300px;height:300px;border-radius:50%;border:55px solid rgba(255,255,255,.07)}.story-panel .story-symbol{width:76px;height:76px;border-radius:28px;display:grid;place-items:center;background:rgba(255,255,255,.13);font-size:30px;margin-bottom:25px;border:1px solid rgba(255,255,255,.14)}.story-panel .story-hero small{display:block;font-size:11px;color:#eadca9;margin-bottom:8px}.story-panel .story-hero h2{font-family:Marhey;font-size:clamp(32px,3vw,48px);line-height:1.35;margin:0 0 8px}.story-panel .story-hero p{color:#dbe8e3;line-height:1.9}.story-panel .story-hook{margin:0;padding:22px 42px;background:#f2e7c8;border:0;border-right:5px solid var(--gold);font-family:Marhey;font-size:15px;line-height:2;color:#5f5438}.story-panel .story-journey{padding:30px 42px 44px}.story-panel .story-block{position:relative;padding:0 34px 26px 0}.story-panel .story-block:before{content:"";position:absolute;right:7px;top:11px;bottom:-4px;width:1px;background:linear-gradient(var(--gold),rgba(23,72,59,.12))}.story-panel .story-block:last-child:before{display:none}.story-panel .story-block .story-dot{position:absolute;right:0;top:7px;width:15px;height:15px;border-radius:50%;background:var(--paper);border:4px solid var(--forest);box-shadow:0 0 0 5px rgba(23,72,59,.08)}.story-panel .story-block span{display:block;font-size:10px;color:var(--muted);letter-spacing:.4px;margin-bottom:7px}.story-panel .story-block h3{font-family:Marhey;font-size:19px;margin:0 0 8px;color:var(--forest)}.story-panel .story-block p{margin:0;line-height:2.05;color:#52655d}.story-panel .story-block.lesson{margin-top:8px;padding:22px 34px 22px 22px;border-radius:20px;background:#eaf2e8}.story-panel .story-block.lesson:before,.story-panel .story-block.lesson .story-dot{display:none}.story-panel .story-block.lesson h3{font-size:17px}.leaf-node.is-active{z-index:8;filter:drop-shadow(0 0 18px rgba(230,205,113,.95));transform:translate(-50%,-50%) scale(1.08)!important}.branches path.is-active{stroke:#f0d879!important;stroke-width:12!important;filter:drop-shadow(0 0 8px rgba(240,216,121,.7))}.tree-stage.panel-open{box-shadow:inset -80px 0 120px rgba(18,61,50,.08)}
@media(max-width:900px){.story-panel{top:auto;bottom:0;right:0;width:100%;height:min(82dvh,760px);border-left:0;border-top:1px solid rgba(24,53,45,.12);border-radius:28px 28px 0 0;transform:translateY(105%)}.story-panel.open{transform:translateY(0)}.story-panel:before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:52px;height:5px;border-radius:99px;background:rgba(24,53,45,.16);z-index:6}.story-close{top:18px}.story-panel .story-hero{min-height:245px;padding:62px 26px 28px}.story-panel .story-hook{padding:20px 26px}.story-panel .story-journey{padding:26px 26px 42px}}