:root{--bg: #0b1220;--bg-elev: #0f172a;--surface: rgba(255,255,255,.045);--surface-hover: rgba(255,255,255,.08);--border: rgba(148,163,184,.16);--border-strong: rgba(148,163,184,.32);--text: #f1f5f9;--text-muted: #94a3b8;--accent: #22c55e;--accent-soft: rgba(34,197,94,.14);--accent-2: #38bdf8;--code-bg: #060a13;--danger: #f87171;--warning: #fbbf24;--info: #60a5fa;--radius-sm: 8px;--radius: 14px;--radius-lg: 20px;--shadow: 0 4px 24px rgba(0,0,0,.35);--shadow-lg: 0 18px 48px rgba(0,0,0,.45);--icon-sm: 16px;--icon-md: 20px;--icon-lg: 24px;--font-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;--font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--c-keyword: #7dd3fc;--c-string: #86efac;--c-comment: #64748b;--c-number: #fbbf24;--c-func: #f0abfc;color-scheme:dark}html[data-theme=light]{--bg: #f6f8fb;--bg-elev: #ffffff;--surface: #ffffff;--surface-hover: #f1f5f9;--border: rgba(15,23,42,.12);--border-strong: rgba(15,23,42,.24);--text: #0f172a;--text-muted: #556076;--accent: #16a34a;--accent-soft: rgba(22,163,74,.12);--accent-2: #0284c7;--code-bg: #0b1220;--shadow: 0 4px 20px rgba(15,23,42,.08);--shadow-lg: 0 16px 40px rgba(15,23,42,.14);color-scheme:light}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{min-height:100dvh;background:var(--bg);color:var(--text);font-family:var(--font-ar);line-height:1.75;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}.container{width:100%;max-width:1140px;margin:0 auto;padding:0 1.5rem}.section{padding:4.5rem 0;position:relative;z-index:1}.section+.section{border-top:1px solid var(--border)}.section-alt{background:color-mix(in srgb,var(--bg-elev) 70%,transparent)}.glow{position:fixed;inset:-35% -20% auto -20%;height:65vh;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 0%,rgba(34,197,94,.2),transparent 62%)}html[data-theme=light] .glow{background:radial-gradient(ellipse at 50% 0%,rgba(34,197,94,.16),transparent 62%)}h1,h2,h3,h4{line-height:1.3;letter-spacing:-.01em;font-weight:700}h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:700}h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}h3{font-size:clamp(1.05rem,2vw,1.25rem)}p{font-size:1rem}.lead{color:var(--text-muted);font-size:clamp(1rem,1.6vw,1.1rem);max-width:68ch}.muted{color:var(--text-muted)}.mono{font-family:var(--font-code);direction:ltr;unicode-bidi:isolate}.kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:.85rem}.section-head{max-width:72ch;margin-bottom:2.25rem}.section-head p{color:var(--text-muted);margin-top:.65rem}code.inline{font-family:var(--font-code);font-size:.87em;direction:ltr;unicode-bidi:isolate;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.1rem .4rem;color:var(--accent-2);white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.35rem;border-radius:999px;font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.btn-primary{background:var(--accent);color:#04140a;box-shadow:0 8px 28px #22c55e47}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px #22c55e66}.btn-ghost{border-color:var(--border-strong);color:var(--text);background:transparent}.btn-ghost:hover{background:var(--surface-hover);transform:translateY(-2px)}.btn-sm{padding:.42rem .85rem;font-size:.82rem}.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:600;padding:.22rem .65rem;border-radius:999px;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}.badge.info{background:#60a5fa1f;color:var(--info);border-color:#60a5fa4d}.badge.warn{background:#fbbf241f;color:var(--warning);border-color:#fbbf244d}.chip{font-family:var(--font-code);font-size:.74rem;padding:.15rem .5rem;border-radius:6px;background:var(--surface);border:1px solid var(--border);color:var(--text-muted)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.35rem;box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}.card h3{margin-bottom:.5rem}.card p{color:var(--text-muted);font-size:.93rem}.card-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);margin-bottom:.85rem}.grid{display:grid;gap:1.15rem}.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.navbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1rem;padding:0 1.5rem;height:64px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;max-width:1140px;margin:0 auto}.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-.02em}.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(140deg,var(--accent),#0ea5e9);color:#04140a;font-family:var(--font-code);font-size:.95rem;font-weight:700}.nav-links{display:flex;gap:1.35rem;align-items:center}.nav-link{color:var(--text-muted);font-size:.88rem;font-weight:500;cursor:pointer;text-decoration:none;background:none;border:none;font-family:inherit;padding:.25rem 0;transition:color .18s ease}.nav-link:hover,.nav-link.active{color:var(--text)}.nav-link.active{color:var(--accent)}.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:background .18s ease,transform .18s ease}.icon-btn:hover{background:var(--surface-hover);transform:translateY(-2px)}.nav-burger{display:none}.hero{position:relative;z-index:1;padding:4.5rem 0 3.5rem}.hero h1{max-width:20ch;margin-bottom:1rem}.hero .lead{margin-bottom:1.75rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.25rem}.search-shell{display:flex;align-items:center;gap:.65rem;max-width:560px;padding:.25rem .35rem .25rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow)}.search-shell input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:.95rem;padding:.55rem 0}.search-shell input::placeholder{color:var(--text-muted)}.search-hint{font-size:.8rem;color:var(--text-muted);margin-top:.6rem}.search-results{max-width:560px;margin-top:.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elev);overflow:hidden;box-shadow:var(--shadow)}.search-item{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;cursor:pointer;border-bottom:1px solid var(--border);font-size:.9rem;transition:background .16s ease}.search-item:last-child{border-bottom:none}.search-item:hover{background:var(--surface-hover)}.code-block{position:relative;background:var(--code-bg);border:1px solid rgba(148,163,184,.18);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.code-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .75rem .5rem 1rem;border-bottom:1px solid rgba(148,163,184,.14);background:#ffffff08}.code-title{display:flex;align-items:center;gap:.5rem;font-family:var(--font-code);font-size:.76rem;color:#94a3b8;direction:ltr}.code-copy{display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-family:var(--font-ar);font-size:.76rem;font-weight:600;color:#94a3b8;background:none;border:1px solid transparent;border-radius:999px;padding:.28rem .7rem;cursor:pointer;transition:all .18s ease}.code-copy:hover{color:#e2e8f0;border-color:#94a3b84d;background:#ffffff0d}.code-body{margin:0;padding:.9rem 0;overflow-x:auto;direction:ltr;text-align:left;font-family:var(--font-code);font-size:.84rem;line-height:1.85;color:#e2e8f0}.code-line{display:flex;padding:0 1rem;white-space:pre;transition:background .2s ease}.code-line.num{padding-right:.6rem}.line-no{width:2.1rem;flex:0 0 2.1rem;text-align:right;color:#475569;-webkit-user-select:none;user-select:none;padding-left:.8rem;border-left:1px solid rgba(148,163,184,.12);margin-left:0rem}.code-line.hl{background:#22c55e1c;box-shadow:inset 2px 0 0 var(--accent)}.tok-key{color:var(--c-keyword)}.tok-str{color:var(--c-string)}.tok-com{color:var(--c-comment);font-style:italic}.tok-num{color:var(--c-number)}.tok-fn{color:var(--c-func)}.callout{display:flex;gap:.8rem;padding:1rem 1.15rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);margin:1.25rem 0;border-inline-start:3px solid var(--info)}.callout.tip{border-inline-start-color:var(--accent)}.callout.warn{border-inline-start-color:var(--warning)}.callout.note{border-inline-start-color:var(--text-muted)}.callout p{font-size:.92rem;color:var(--text-muted)}.callout strong{color:var(--text)}.callout-icon{flex:0 0 auto;margin-top:.2rem}.callout.tip .callout-icon{color:var(--accent)}.callout.warn .callout-icon{color:var(--warning)}.callout.note .callout-icon{color:var(--text-muted)}.callout.info .callout-icon{color:var(--info)}.anatomy{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.5rem;align-items:start}.part-list{display:flex;flex-direction:column;gap:.55rem}.part{display:flex;align-items:flex-start;gap:.75rem;text-align:start;width:100%;padding:.8rem .95rem;border-radius:var(--radius-sm);cursor:pointer;font:inherit;background:var(--surface);border:1px solid var(--border);color:var(--text);transition:transform .18s ease,border-color .18s ease,background .18s ease}.part:hover{transform:translate(-3px);border-color:var(--border-strong)}.part.active{border-color:var(--accent);background:var(--accent-soft)}.part-num{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-code);font-size:.72rem;background:var(--bg-elev);border:1px solid var(--border);color:var(--text-muted)}.part.active .part-num{background:var(--accent);color:#04140a;border-color:transparent}.part b{display:block;font-size:.92rem;font-weight:600}.part span{display:block;font-size:.82rem;color:var(--text-muted);line-height:1.6}.tabs{display:flex;flex-wrap:wrap;gap:.3rem;padding:.3rem;margin-bottom:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:999px}.tab{flex:1 1 auto;padding:.5rem 1rem;border-radius:999px;border:none;cursor:pointer;font:inherit;font-size:.86rem;font-weight:600;color:var(--text-muted);background:none;white-space:nowrap;transition:all .2s ease}.tab:hover{color:var(--text);background:var(--surface-hover)}.tab.active{background:var(--accent);color:#04140a}.tab-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}.tab-panel h3{margin-bottom:.6rem}.tab-panel p{color:var(--text-muted);font-size:.95rem}.tab-panel ul{margin:.85rem 0 0 1.1rem;padding:0}.tab-panel li{font-size:.9rem;color:var(--text-muted);margin-bottom:.45rem}.tab-panel li::marker{color:var(--accent)}.playground{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.25rem;align-items:start}.sample-list{display:flex;flex-direction:column;gap:.45rem}.sample{text-align:start;padding:.7rem .9rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;transition:all .18s ease}.sample:hover{border-color:var(--border-strong);transform:translate(-3px)}.sample.active{border-color:var(--accent);background:var(--accent-soft)}.sample b{display:block;font-size:.88rem;font-weight:600}.sample span{display:block;font-family:var(--font-code);font-size:.72rem;color:var(--text-muted);direction:ltr;text-align:left}.output{background:var(--code-bg);border:1px solid rgba(148,163,184,.18);border-radius:var(--radius);padding:.9rem 1rem;font-family:var(--font-code);font-size:.84rem;direction:ltr;text-align:left;color:var(--c-string);min-height:120px;overflow-x:auto;white-space:pre-wrap;line-height:1.8}.output .prompt{color:#475569}.run-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:.85rem 0}.skel-line{height:12px;border-radius:6px;margin:.5rem 0;background:linear-gradient(90deg,#94a3b814 25%,#94a3b833,#94a3b814 75%);background-size:200%;animation:shimmer 1.3s infinite}.spin{animation:spin .8s linear infinite}.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}table{border-collapse:collapse;width:100%;min-width:620px;font-size:.89rem}thead th{background:color-mix(in srgb,var(--bg-elev) 80%,transparent);text-align:start;padding:.8rem 1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border)}tbody td{padding:.8rem 1rem;border-bottom:1px solid var(--border);color:var(--text-muted)}tbody tr:last-child td{border-bottom:none}tbody tr:hover td{background:var(--surface-hover)}tbody td:first-child{color:var(--text);font-weight:600}.accordion{display:flex;flex-direction:column;gap:.6rem}.acc-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}.acc-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:1rem 1.15rem;background:none;border:none;cursor:pointer;font:inherit;font-size:.95rem;font-weight:600;color:var(--text);text-align:start;transition:background .18s ease}.acc-head:hover{background:var(--surface-hover)}.acc-head .acc-icon{flex:0 0 auto;color:var(--accent);transition:transform .25s ease}.acc-item.open .acc-head .acc-icon{transform:rotate(180deg)}.acc-body{max-height:0;overflow:hidden;transition:max-height .32s ease}.acc-item.open .acc-body{max-height:620px}.acc-inner{padding:0 1.15rem 1.15rem;color:var(--text-muted);font-size:.92rem}.acc-inner code.inline{white-space:normal}.stat{padding:1.15rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);text-align:center}.stat b{display:block;font-family:var(--font-code);font-size:1.5rem;color:var(--accent)}.stat span{font-size:.82rem;color:var(--text-muted)}.quiz-card{max-width:760px;margin:0 auto}.quiz-progress{display:flex;gap:.35rem;margin-bottom:1.25rem}.qpip{height:5px;flex:1;border-radius:999px;background:var(--border);transition:background .3s ease}.qpip.done{background:var(--accent)}.qpip.wrong{background:var(--danger)}.options{display:flex;flex-direction:column;gap:.55rem;margin-top:1.1rem}.option{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:.93rem;cursor:pointer;text-align:start;transition:all .18s ease}.option:hover:not(:disabled){border-color:var(--accent);transform:translate(-3px)}.option:disabled{cursor:default}.option.correct{border-color:var(--accent);background:var(--accent-soft)}.option.wrong{border-color:var(--danger);background:#f871711f}.quiz-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.25rem;flex-wrap:wrap}.score-ring{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1rem;background:conic-gradient(var(--accent) var(--pct, 0%),var(--border) 0);position:relative}.score-ring:after{content:"";position:absolute;top:9px;right:9px;bottom:9px;left:9px;border-radius:50%;background:var(--bg-elev)}.score-ring b{position:relative;z-index:1;font-family:var(--font-code);font-size:1.35rem}.toast-wrap{position:fixed;bottom:1.5rem;inset-inline-start:1.5rem;z-index:100;display:flex;flex-direction:column;gap:.5rem}.toast{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.15rem;border-radius:var(--radius-sm);font-size:.88rem;font-weight:500;box-shadow:var(--shadow-lg);animation:fadeUp .28s ease;background:var(--bg-elev);border:1px solid var(--border)}.toast.success{border-color:#22c55e66;color:var(--accent)}.toast.error{border-color:#f8717166;color:var(--danger)}.toast.info{border-color:#60a5fa66;color:var(--info)}.footer{border-top:1px solid var(--border);padding:3rem 0 2rem;position:relative;z-index:1;background:color-mix(in srgb,var(--bg-elev) 70%,transparent)}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(2,1fr);gap:2rem;margin-bottom:2rem}.footer h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:.85rem}.footer ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}.footer li a,.footer li button{color:var(--text-muted);font-size:.88rem;text-decoration:none;cursor:pointer;background:none;border:none;font-family:inherit;text-align:start;transition:color .18s ease}.footer li a:hover,.footer li button:hover{color:var(--accent)}.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.25rem;border-top:1px solid var(--border);font-size:.82rem;color:var(--text-muted)}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.45}50%{opacity:1}}.fade-up{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) both}.rec-cursor{display:inline-block;width:8px;height:15px;background:var(--accent);vertical-align:middle;margin-inline-start:3px;animation:pulse 1s infinite}.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}.reveal.in{opacity:1;transform:none}@media (max-width: 900px){.anatomy,.tab-panel,.playground{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}@media (max-width: 640px){.navbar{padding:0 1rem}.nav-links{display:none}.nav-links.open{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;position:absolute;inset-inline:0;top:64px;padding:1rem 1.25rem 1.25rem;background:var(--bg-elev);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg)}.nav-burger{display:inline-grid;margin-inline-start:auto}.section{padding:3rem 0}.hero{padding:3rem 0 2.5rem}.tabs{border-radius:var(--radius)}.tab{flex:1 1 40%;font-size:.8rem;padding:.45rem .6rem}.footer-grid{grid-template-columns:1fr;gap:1.5rem}.toast-wrap{inset-inline:1rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}