:root{--bg: #ffffff;--bg-elev: #ffffff;--fg: #000000;--muted: rgba(0, 0, 0, .52);--accent: linear-gradient(135deg, #000000, #000000);--accent-plain: #000000;--font-sans: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";--font-display: "Space Grotesk", Inter, var(--font-sans);--step--1: .875rem;--step-0: 1rem;--step-1: 1.25rem;--step-2: 1.563rem;--step-3: 1.953rem;--step-4: 2.441rem;--step-5: 3.052rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--nav-h: 96px;--img-filter: grayscale(100%) contrast(115%);--img-overlay: rgba(0,0,0,0);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .15);--shadow-md: 0 6px 20px rgba(0, 0, 0, .2);--shadow-lg: 0 16px 50px rgba(0, 0, 0, .3)}@media (prefers-reduced-motion: reduce){:root{scroll-behavior:auto}}html[lang=ar]{--font-sans: "Tajawal", "Cairo", "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;--font-display: var(--font-sans)}:root[data-theme=elegant]{--bg: #0e1f17;--bg-elev: #10241b;--fg: #f3f0e6;--muted: rgba(243, 240, 230, .65);--accent-plain: #c4a24a;--font-display: "EB Garamond", Georgia, "Times New Roman", Times, serif;--font-sans: "EB Garamond", Georgia, "Times New Roman", Times, serif;--img-filter: sepia(.25) saturate(90%) contrast(110%);--img-overlay: rgba(196,162,74,.08)}:root[data-theme=playful]{--bg: #fff8f2;--bg-elev: #fffdfa;--fg: #181818;--muted: rgba(24, 24, 24, .6);--accent-plain: #ff2d55;--font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;--font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", Arial, sans-serif;--img-filter: saturate(115%) contrast(105%);--img-overlay: rgba(255,45,85,.08)}:root[data-theme=white]{--bg: #ffffff;--bg-elev: #ffffff;--fg: #000;--muted: rgba(0,0,0,.52);--accent-plain: #111;--font-display: "Space Grotesk", Inter, var(--font-sans);--font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;--img-filter: grayscale(100%) contrast(115%);--img-overlay: rgba(0,0,0,.03)}:root[data-theme=retro]{--bg: #fff4e6;--bg-elev: #fff9f2;--fg: #27160a;--muted: rgba(39,22,10,.6);--accent-plain: #ff7a00;--font-display: "EB Garamond", Georgia, "Times New Roman", Times, serif;--font-sans: "Manrope", system-ui, -apple-system, Roboto, Arial;--img-filter: sepia(.15) saturate(110%) contrast(105%);--img-overlay: rgba(255,122,0,.06)}html[lang=ar][data-theme=playful]{--font-sans: "Cairo", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;--font-display: var(--font-sans)}:root[data-theme=synth]{--bg: #0b0b1a;--bg-elev: #0f0f24;--fg: #e6e6ff;--muted: rgba(230, 230, 255, .65);--accent-plain: #9d4edd;--font-display: "Space Grotesk", system-ui, -apple-system, Roboto, Arial, sans-serif;--font-sans: "Manrope", system-ui, -apple-system, Roboto, Arial, sans-serif;--img-filter: hue-rotate(300deg) saturate(115%) contrast(110%);--img-overlay: rgba(157,78,221,.1)}:root[data-theme=girly]{--bg: #fff1f6;--bg-elev: #fff7fa;--fg: #221018;--muted: rgba(34, 16, 24, .6);--accent-plain: #ff4fa3;--font-display: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;--font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;--img-filter: saturate(122%) contrast(105%);--img-overlay: rgba(255,79,163,.08)}:root{color-scheme:light dark;font-family:var(--font-sans);line-height:1.6;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg);color:var(--fg)}img{max-width:100%;height:auto;display:block}a,button,input,select,textarea{font:inherit}a{font-weight:600;color:var(--accent-plain);text-decoration:underline;text-underline-offset:2px}a:hover{filter:brightness(1.1)}a:focus-visible,button:focus-visible{outline:3px solid color-mix(in oklab,var(--accent-plain),white 30%);outline-offset:2px}h1{font-family:var(--font-display);font-size:var(--step-5);line-height:1.1;letter-spacing:-.02em;margin:0 0 var(--space-6)}button{border-radius:var(--radius-sm);border:1px solid transparent;padding:.6em 1.1em;font-size:var(--step-0);font-weight:500;background-color:transparent;cursor:pointer;transition:transform .16s ease}button:hover{transform:translateY(-1px)}button:focus,button:focus-visible{outline:3px solid color-mix(in oklab,var(--accent-plain),white 30%);outline-offset:2px}.skip-link{position:absolute;inset-inline-start:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{inset-inline-start:12px;top:12px;width:auto;height:auto;padding:8px 12px;background:var(--bg-elev);color:var(--fg);border-radius:var(--radius-sm);border:1px solid color-mix(in oklab,var(--accent-plain),transparent 70%);box-shadow:var(--shadow-sm)}.btn--primary{background:var(--accent-plain);color:var(--bg);border-color:color-mix(in oklab,var(--accent-plain),transparent 20%);box-shadow:0 6px 18px color-mix(in oklab,var(--accent-plain),transparent 80%)}.btn--primary:hover{transform:translateY(-1px);filter:brightness(1.02)}.btn--ghost{border:1px solid color-mix(in oklab,var(--accent-plain),transparent 70%);color:var(--fg)}.btn--ghost:hover{transform:translateY(-1px)}#root{margin:0;padding:0;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.menu{position:fixed;inset:0;z-index:100;background:var(--bg);color:var(--fg);display:grid;place-items:center;perspective:1200px}.menu:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 400px at calc(50% + var(--mx, 0px)) calc(40% + var(--my, 0px)),color-mix(in oklab,var(--accent-plain),transparent 88%),transparent 60%),repeating-linear-gradient(0deg,color-mix(in oklab,var(--accent-plain),transparent 92%),color-mix(in oklab,var(--accent-plain),transparent 92%) 1px,transparent 1px,transparent 12px),repeating-linear-gradient(90deg,color-mix(in oklab,var(--accent-plain),transparent 94%),color-mix(in oklab,var(--accent-plain),transparent 94%) 1px,transparent 1px,transparent 12px);opacity:.12;animation:menuDrift 18s linear infinite}@media (prefers-reduced-motion: reduce){.menu:before{animation:none}}@keyframes menuDrift{0%{transform:translateZ(0) rotate(0)}50%{transform:translate3d(0,-2%,0) rotate(1deg)}to{transform:translateZ(0) rotate(0)}}.menu__inner{position:absolute;inset:0}.menu__top{position:absolute;inset-inline:0;inset-block-start:0;display:flex;justify-content:space-between;gap:var(--space-6);align-items:center;padding:var(--space-6);padding-inline-start:calc(var(--space-6) + env(safe-area-inset-left));padding-inline-end:calc(var(--space-6) + env(safe-area-inset-right));z-index:2}.menu__topbtn{background:transparent;border:none;color:var(--fg);padding:12px;line-height:0;cursor:pointer}.menu__topbtn:focus-visible{outline:2px solid currentColor;outline-offset:2px}.menu__board{position:absolute;inset:0;padding:var(--space-6);transform-style:preserve-3d;z-index:1}.menu__ghost{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,16vw,14rem);letter-spacing:.02em;color:color-mix(in oklab,var(--accent-plain),transparent 88%);opacity:0;transform:translateZ(0);transition:opacity .2s ease;z-index:0;text-shadow:0 0 2px color-mix(in oklab,var(--accent-plain),transparent 92%),0 0 18px color-mix(in oklab,var(--accent-plain),transparent 95%)}.menu__ghost.is-on{opacity:1;animation:ghostScroll 8s linear infinite}@keyframes ghostScroll{0%{transform:translate3d(-6%,6%,0) rotate(-2deg) scale(1.02)}50%{transform:translate3d(6%,-6%,0) rotate(2deg) scale(1.04)}to{transform:translate3d(-6%,6%,0) rotate(-2deg) scale(1.02)}}.menu__themebtn{position:absolute;inset-block-end:calc(var(--space-6) + env(safe-area-inset-bottom));inset-inline-start:calc(var(--space-6) + env(safe-area-inset-left));background:transparent;border:2px solid var(--accent-plain);color:var(--fg);font-size:28px;line-height:1;cursor:pointer;z-index:3;padding:8px;border-radius:999px;transition:transform .16s ease;display:inline-flex;align-items:center}.menu__themebtn:hover{transform:translateY(-1px) scale(1.04)}.menu__themelabel{font-size:12px;margin-inline-start:8px;color:var(--accent-plain);opacity:0;visibility:hidden;transition:opacity .16s ease}.menu__themebtn:hover .menu__themelabel{opacity:1;visibility:visible}.menu__nail{position:absolute;width:10px;height:10px;border-radius:999px;background:var(--accent-plain)}.menu__nail--ltr{inset-inline-end:10px;inset-block-start:10px}.menu__nail--rtl{inset-inline-start:10px;inset-block-start:10px}.menu__list{list-style:none;margin:0;padding:0 var(--space-6);display:grid;gap:clamp(20px,4vh,44px);height:100%;align-content:start;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none}.menu__list::-webkit-scrollbar{display:none}.menu__list:before,.menu__list:after{content:"";display:block;height:50vh}.menu__list>li{scroll-snap-align:center;scroll-snap-stop:always}.menu__link{display:inline-block;font-family:var(--font-display);font-weight:800;text-transform:none;letter-spacing:-.02em;text-decoration:none;color:var(--fg);font-size:clamp(3.5rem,12vw,10rem);line-height:1.02;will-change:transform}.menu__link:hover{color:#fff;text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000}.menu__link.as-button{background:none;border:none;padding:0;cursor:pointer}@media (max-width: 720px){.menu__inner{height:100svh}.menu__list:before,.menu__list:after{height:40vh}.menu__link{font-size:clamp(2.2rem,12vw,6rem)}}.menu__tiled{position:absolute;inset:-10%;pointer-events:none;z-index:0;opacity:0;transition:opacity .18s ease}.menu__tiled.is-on{opacity:1}.menu__tiledLine{position:absolute;top:50%;left:50%;white-space:nowrap;font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,12vw,10rem);color:color-mix(in oklab,var(--accent-plain),transparent 86%);text-shadow:0 0 2px color-mix(in oklab,var(--accent-plain),transparent 92%);letter-spacing:.02em}.menu__tiled.is-on{opacity:.55}.menu__tiledLine{position:absolute;top:50%;left:50%;white-space:nowrap;font-family:var(--font-display);font-weight:800;letter-spacing:.02em;font-size:clamp(2rem,12vw,10rem);color:color-mix(in oklab,var(--accent-plain),transparent 94%);text-shadow:0 0 2px color-mix(in oklab,var(--accent-plain),transparent 96%);filter:blur(.3px);transform:translate(-50%,-50%) rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--off) * 1vh)) translate(var(--waveX, 0%));-webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(120% 120% at 50% 50%,#000 55%,transparent 100%)}.menu__tiledLine:nth-child(odd){animation:waveX 12s linear infinite}.menu__tiledLine:nth-child(2n){animation:waveX 14s linear infinite reverse}.menu__tiledLine:nth-child(3n){animation-duration:16s}@keyframes waveX{0%{--waveX: -8%}50%{--waveX: 8%}to{--waveX: -8%}}.page{display:grid;grid-template-columns:1fr 1fr;height:calc(100svh - var(--nav-h, 96px))}.page{overflow:hidden}.page--invert .page__col--media{order:2}.page--invert .page__col--content{order:1}.page__col{display:grid;align-content:center}.page__col--media{position:relative;min-height:50vh}.page__col--media:after{content:"";position:absolute;inset:0;background:var(--img-overlay, rgba(0,0,0,0));pointer-events:none}.page__img{width:100%;height:100%;object-fit:cover;filter:none;mix-blend-mode:normal}.page__col--content{position:relative;padding-block:clamp(8px,2.5vw,20px);padding-inline:30px;text-align:start}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:8px}.info-card{position:relative;padding:8px 0;transition:transform .16s ease}.info-card:hover{transform:translateY(-2px)}.info-card:before{content:"";display:block;width:18px;height:2px;background:var(--accent-plain);margin-bottom:10px}.info-card__title{font-weight:800;margin:0 0 6px;font-size:clamp(1.1rem,2.2vw,1.4rem)}.info-card__meta{color:var(--muted);font-size:var(--step--1);margin-bottom:6px}.info-card__body{color:var(--fg)}.page__title{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.05;margin:0 0 16px}.page__content{font-size:clamp(1rem,2.4vw,1.125rem)}.page__content p{margin:0 0 12px}.page__list{list-style:none;padding:0;margin:16px 0 0}.page__list li{margin:6px 0}@media (max-width: 840px){.page{grid-template-columns:1fr;height:auto;min-height:calc(100svh - var(--nav-h, 96px))}.page__col--media{min-height:40vh}.page__col--content{padding-inline:calc(16px + env(safe-area-inset-left));padding-block:10px}.info-grid{grid-template-columns:1fr}}@media (max-height: 800px){.page--home .page__title{font-size:clamp(2rem,5vw,3.4rem)}.page--home .page__content{font-size:clamp(.95rem,2.2vw,1.05rem)}.page--home .page__col--content{padding-block:12px}}.page--home .page__img{object-position:center 20%}.case{color:var(--fg);background:var(--bg);font-size:1rem}.case__hero{display:grid;grid-template-rows:auto min(60vh,600px)}.case__head{padding:30px;text-align:start}.case__title{font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.05;margin:0}.case__title:after{content:"";display:block;width:22px;height:2px;background:var(--accent-plain);margin-top:8px}.case__meta{color:var(--muted);margin-top:6px}.case__headline{margin-top:10px;max-width:72ch}.case__banner{width:100%;height:100%;object-fit:cover;filter:none}.case__inner{padding:30px;display:grid;gap:28px;text-align:start}.case__section h2,.case__grid h3{margin:0 0 8px}.case__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.case__grid ul{margin:0;padding:0;list-style:none}.case__grid li{margin:6px 0}.case__gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.case__gallery img{width:100%;height:220px;object-fit:cover;filter:none}.case__footer{margin-top:10px}.case__back{text-decoration:underline}@media (max-width: 860px){.case__grid,.case__gallery{grid-template-columns:1fr}}