*{box-sizing:border-box;padding:0;margin:0}::selection{color:#000;background:#fff372}::-moz-selection{background:#fff372}html,body{min-height:100dvh}body{background:#fff;display:flex;flex-direction:column;min-width:340px}main{flex:1}@media (prefers-color-scheme: dark){html{color-scheme:dark}body{color:#fff;background:#000}.project-page__header{background:#000}}@media (prefers-color-scheme: light){html{color-scheme:light}body{color:#000;background:#fff}.project-page__header{background:#fff}}.body__wrap{padding:0 2.2rem 2.2rem}@media (max-width: 780px){.body__wrap{flex:1;padding:0 1.4rem 5rem}}.index__container{display:flex;flex-direction:column;padding:1.8rem 0 0}.section{margin:1rem 0 2rem}.contact-link__wrap{margin:0 0 2rem}@media (max-width: 990px){.contact-link__wrap{margin:0 0 1rem}}.icon-wrap{margin-bottom:2.8rem;max-width:90px}@media (max-width: 780px){.icon-wrap{margin-bottom:0;width:10%;max-width:80px;min-width:60px}}@media (max-width: 500px){.icon-wrap{margin-bottom:0;width:60px}}.project-page__header{position:sticky;top:0;padding:1.8rem 0 .8rem;height:fit-content;display:flex;justify-content:space-between;align-items:flex-start;gap:2.4rem}.project-page__header h1{font-weight:500}@media (max-width: 780px){.project-page__header{flex-direction:column;align-items:flex-start;gap:.6rem;padding-bottom:.6rem}}.project-page__body{display:flex;flex-direction:row-reverse;justify-content:start;gap:6rem;margin:2.4rem 0}@media (max-width: 1280px){.project-page__body{gap:3rem}}@media (max-width: 1200px){.project-page__body{flex-direction:column}}.project-link__wrap{display:flex;flex-direction:column;max-width:400px;gap:2px}.project-description__wrap{position:sticky;top:6.7rem;height:fit-content;max-width:800px;width:60%;margin:0 0 4rem}@media (max-width: 1200px){.project-description__wrap{position:static;width:clamp(300px,80vw,900px);margin:0 0 2rem}}.letter{height:30px;width:30px;text-align:center;border-top:2px solid;border-bottom:2px solid;border-left:1px solid;border-right:1px solid}.letter:first-child{border-left:2px solid}.letter:last-child{border-right:2px solid}.letter-wrap{display:flex;margin:20px 0 8px}@media (max-width: 780px){.letter{height:24px;width:20px;min-width:14px;font-size:13px}}.code-view{border:2px dotted currentColor;padding:.6rem 1.3rem;margin:.5rem 0}.ascii-container{font-family:monospace;font-size:clamp(6px,1.3vw,12px);margin:40px 0;-webkit-user-select:none;user-select:none}@media screen and (max-width: 600px){.ascii-container{font-size:clamp(4px,1.6vw,13px)}}.sample-iframe{width:85%}@media screen and (max-width: 1080px){.sample-iframe{width:100%}}.about-button{background:none;border:1px solid transparent;border-bottom:1px solid;cursor:pointer;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;text-decoration:none;padding:1px 2px;margin:1px 2px;display:inline-block;box-sizing:border-box;vertical-align:baseline;text-align:left;width:auto}.about-button:hover{color:red;border:1px solid}.about-button:focus{color:red;outline:none;border:1px solid}.about-button:active{color:#00bfff}@media (min-width: 990px){.about-button{display:none}}.about-button.expanded{border:1px solid}.bio-content{overflow:hidden;max-width:555px}@media (min-width: 990px){.bio-content{width:80%;text-align:right;padding:6px 8px;position:absolute;right:2.2rem;bottom:calc(50% - 66px);height:auto!important;overflow:visible}}@media (max-width: 989px){.bio-content{height:0}.bio-content.expanded{margin-bottom:2rem}}.bio-content p{padding:.5rem 0}.project-preview__wrap{display:flex;width:100%;margin:2rem 0;padding:2rem 2.5rem;justify-content:space-between;gap:2rem;border:2px dotted currentColor}.project-preview__wrap .code-view{margin:0;border:1px solid currentColor}@media (max-width: 1200px){.project-preview__wrap{text-align:right;padding:1.5rem 2.5rem 2.5rem;flex-direction:column-reverse}}@media (max-width: 600px){.project-preview__wrap{padding:1rem 1rem 2rem}}.project-preview__images{display:flex;flex-direction:column;gap:1.5rem;flex:1}.project-preview__images img{margin:0}@media (max-width: 600px){.project-preview__images{gap:.8rem}}.project-preview__info{display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:200px;max-width:30rem;margin:0 0 0 auto}.project-preview__info flex-o p{margin:0 0 1rem}.project-preview__info a{margin:1.5rem 0 0}@media (max-width: 1200px){.project-preview__info{align-items:flex-end}}@media (max-width: 600px){.project-preview__info{min-width:auto}}.breadcrumb{display:flex;align-items:center;gap:.4rem}.breadcrumb>:last-child{color:gray}@media (max-width: 780px){.breadcrumb{gap:.2rem}}@font-face{font-family:Spline Sans Mono;src:url(/fonts/SplineSansMono-VariableFont_wght.ttf) format("truetype");font-weight:300 700;font-style:normal;font-display:swap}@font-face{font-family:Spline Sans Mono;src:url(/fonts/SplineSansMono-Italic-VariableFont_wght.ttf) format("truetype");font-weight:300 700;font-style:italic;font-display:swap}html,body{font-family:Spline Sans Mono,monospace,sans-serif}b{font-weight:500}a{color:inherit;text-decoration:none;width:fit-content}.body-1{font-size:calc(1.06rem - 1px);line-height:calc(1.44rem - 1px)}@media (max-width: 780px){.body-1{font-size:calc(.96rem - 1px);line-height:calc(1.46rem - 1px)}}.body-2{font-size:calc(1.06rem - 2px);line-height:calc(1.44rem - 2px)}@media (max-width: 780px){.body-2{font-size:calc(.96rem - 2px);line-height:calc(1.46rem - 2px)}}.body-3{font-size:calc(1.06rem - 3px);line-height:calc(1.44rem - 3px)}@media (max-width: 780px){.body-3{font-size:calc(.96rem - 3px);line-height:calc(1.46rem - 3px)}}.body-4{font-size:calc(1.06rem - 4px);line-height:calc(1.44rem - 4px)}@media (max-width: 780px){.body-4{font-size:calc(.96rem - 4px);line-height:calc(1.46rem - 4px)}}.body-5{font-size:calc(1.06rem - 5px);line-height:calc(1.44rem - 5px)}@media (max-width: 780px){.body-5{font-size:calc(.96rem - 5px);line-height:calc(1.46rem - 5px)}}.code{color:green;text-align:justify}.bold-text{font-weight:600}.rtl-text{text-align:right}.xl-text{font-size:2rem}@media (max-width: 780px){.xl-text{font-size:1.6rem}}.page-title{text-align:right;margin:0 0 0 auto}.responsive-link-text{position:relative;display:inline-block;vertical-align:baseline;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;--uline-thickness: 1px;--uline-offset: 2px;--box-pad: 1px;--box-pad-top: calc(var(--box-pad) + 2px);--box-pad-bottom: var(--box-pad);--box-pad-start: calc(var(--box-pad) + 3px);--box-pad-end: var(--box-pad);--sel-left: 0px;--sel-top: 0px;--sel-width: 0px;--sel-height: 0px;padding-bottom:calc(var(--uline-offset) + var(--uline-thickness));text-decoration:none;border:1px solid transparent;margin:1px 2px;padding:1px 2px}.responsive-link-text span:lang(ar),.responsive-link-text span[lang=ar]{font-size:.85rem;vertical-align:baseline;display:inline-block}.responsive-link-text:after{content:"";position:absolute;pointer-events:none;left:calc(var(--sel-left) - var(--box-pad-start));top:calc(var(--sel-top) + var(--sel-height) + var(--uline-offset));width:calc(var(--sel-width) + var(--box-pad-start) + var(--box-pad-end));height:var(--uline-thickness);background:currentColor}.responsive-link-text:before{content:"";position:absolute;pointer-events:none;left:calc(var(--sel-left) - var(--box-pad-start));top:calc(var(--sel-top) - var(--box-pad-top));width:calc(var(--sel-width) + var(--box-pad-start) + var(--box-pad-end));height:calc(var(--sel-height) + var(--box-pad-top) + var(--box-pad-bottom));border:1px solid currentColor;opacity:0;transition:opacity .12s ease}.responsive-link-text:dir(rtl){--box-pad-start: var(--box-pad);--box-pad-end: calc(var(--box-pad) + 2px)}.responsive-link-text:hover,.responsive-link-text:focus-visible{color:red;outline:none}.responsive-link-text:active{color:#00bfff}.responsive-link-text:hover:before,.responsive-link-text:focus-visible:before{opacity:1}.link-text{text-wrap:none;padding:1px 2px;margin:1px 2px;border:1px solid transparent;border-bottom:1px solid;display:inline-block;vertical-align:baseline;box-sizing:border-box}.link-text:hover{color:red;border:1px solid}.link-text:focus{color:red;outline:none;border:1px solid}.link-text:active{color:#00bfff}.link-text__inline{display:inline;margin:0;padding:0 1px 1px}.ascii-text{font-size:1.3rem}@media (max-width: 900px){.ascii-text{font-size:1rem}}@media (max-width: 690px){.ascii-text{font-size:.8rem}}@media (max-width: 580px){.ascii-text{font-size:.3rem}}:root{--width: clamp(330px, 70vw, 700px)}@media screen and (max-width: 600px){:root{--width: 100%}}.project-image{width:var(--width);margin:0 0 4rem}.project-image__wrap{display:flex;flex-direction:column}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fade-in{animation:fadeIn .2s ease-out}.fade-out{animation:fadeOut .2s ease-out}