:root{--bg: #000000;--fg: #f0ede8;--font: "Times New Roman", Times, serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;cursor:url(/cursors/normal-select-small.png) 7 14,auto}img,video{-webkit-user-drag:none;-webkit-user-select:none;-webkit-touch-callout:none;user-select:none;pointer-events:none}.site{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.site--click-flash,.site--click-flash *{cursor:url(/cursors/selection-cursor.png) 8 8,pointer!important}.door-transition{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;opacity:0;pointer-events:none;transition:opacity .38s ease;z-index:999}.door-transition--closed{opacity:1;pointer-events:all}.frame{position:relative;width:min(70vh,80vw);height:min(70vh,80vw)}.frame__gif{position:absolute;top:8.5%;right:11.5%;bottom:18.5%;left:11.5%;width:77%;height:72%;object-fit:cover;border-radius:2px}.frame__gif--shimmer{filter:url(#frame-shimmer)}.filter-defs{position:absolute;width:0;height:0;pointer-events:none}.frame__border{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;filter:invert(1);opacity:.85;pointer-events:none;z-index:1}.caption{position:absolute;top:calc(50% + min(35vh,40vw) - .5rem);left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.25rem}.caption__cuneiform{font-size:1.1rem;opacity:.7;letter-spacing:.1em;color:inherit;text-decoration:none}.caption__countdown{font-size:.75rem;opacity:.4;letter-spacing:.05em;font-variant-numeric:tabular-nums}.name{position:absolute;left:calc(50% - min(35vh,40vw) - 11rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem}.name__en{font-size:1.4rem;font-weight:400;letter-spacing:.02em;opacity:.85}.name__op{font-size:1.2rem;font-weight:400;opacity:.55;color:inherit;text-decoration:none}.name__ar{font-size:1.2rem;font-weight:400;opacity:.55;direction:rtl}.nav{position:absolute;right:calc(50% - min(35vh,40vw) - 7rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:.8rem}.nav__link{color:var(--fg);text-decoration:none;font-size:.85rem;font-family:var(--font);letter-spacing:.03em;opacity:.5;transition:opacity .2s ease;background:none;border:none;padding:0;cursor:pointer}.nav__link:hover{opacity:1;cursor:url(/cursors/door-cursor.png) 16 16,pointer}.about{max-width:520px;display:flex;flex-direction:column;gap:1.4rem;padding:2rem;font-size:.95rem;line-height:1.75;opacity:.8}.about__link{color:var(--fg);text-decoration:underline;text-underline-offset:3px;opacity:1;cursor:inherit;transition:opacity .2s ease}.about__link:hover{opacity:.6}.page{display:flex;flex-direction:column;align-items:center;gap:1rem}.page__back{background:none;border:none;color:var(--fg);font-family:var(--font);font-size:.85rem;cursor:pointer;opacity:.4;transition:opacity .2s ease;align-self:center;padding:0}.page__back:hover{opacity:.8;cursor:url(/cursors/door-cursor.png) 16 16,pointer}.resume__toolbar{display:flex;align-items:center;gap:1rem}.resume__viewport{width:55vh;height:72vh;overflow:hidden;position:relative;border-radius:4px;background:#fff;touch-action:none}.resume__image{position:absolute;top:50%;left:50%;max-width:100%;max-height:100%;transform-origin:center center;-webkit-user-select:none;user-select:none}.resume__download{display:flex;align-items:center;opacity:.6;cursor:inherit;transition:opacity .2s ease}.resume__download img{height:2.4rem;width:auto}.resume__download:hover{opacity:1;cursor:pointer}.projects{display:grid;grid-template-columns:repeat(4,auto);gap:1.2rem 2.5rem;max-width:800px;width:100%;align-items:start}.project{display:flex;flex-direction:column;color:var(--fg);max-width:180px}.project__name{font-size:.8rem;letter-spacing:.01em;text-transform:lowercase;color:var(--fg);text-decoration:none;cursor:inherit;transition:opacity .2s ease;align-self:flex-start}.project__name:hover{opacity:.6}.project__tech{font-size:.6rem;opacity:.3;letter-spacing:.02em;margin-top:.1rem}.project__toggle{background:none;border:none;color:var(--fg);font-family:var(--font);font-size:.55rem;letter-spacing:.05em;text-transform:lowercase;opacity:.35;cursor:inherit;padding:0;margin-top:.3rem;align-self:flex-start;transition:opacity .2s ease}.project__toggle:hover{opacity:.8}.project__desc{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s ease,opacity .3s ease}.project__desc--open{grid-template-rows:1fr;opacity:1}.project__desc>p{overflow:hidden;font-size:.65rem;line-height:1.55;opacity:.55;margin-top:.35rem}.art{display:flex;align-items:center;gap:1.25rem}.art__viewport{width:min(70vh,74vw);height:min(65vh,74vw);overflow:hidden}.art__track{display:flex;height:100%;transition:transform .5s ease}.art__slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center}.art__slide img,.art__slide video{width:100%;height:100%;object-fit:cover;border-radius:2px}.art__arrow{background:none;border:none;color:var(--fg);font-family:var(--font);font-size:2.4rem;line-height:1;padding:0 .4rem;opacity:.35;cursor:inherit;transition:opacity .2s ease}.art__arrow:hover:not(:disabled){opacity:.9}.art__arrow:disabled{opacity:.08;cursor:default}.art__counter{font-size:.7rem;opacity:.35;letter-spacing:.05em;font-variant-numeric:tabular-nums}@media (max-width: 768px){.site{flex-direction:column;justify-content:center;gap:1.2rem;padding:1rem}.name{position:static;transform:none;align-items:center;text-align:center}.name__en{font-size:1.3rem}.name__ar{font-size:1.1rem}.frame{width:min(85vw,60vh);height:min(85vw,60vh)}.nav{position:static;transform:none;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem 1.2rem;max-width:90vw}.nav__link{font-size:.8rem}.caption{position:static;transform:none}.projects{grid-template-columns:repeat(2,1fr);gap:1rem;padding:0 1rem}.about{padding:1.5rem;font-size:.9rem}.resume__viewport{width:90vw;height:65vh}.art{gap:.5rem}.art__viewport{width:76vw;height:60vh}.art__arrow{font-size:2rem;padding:0 .2rem}}
