html,body,#root{height:100%;width:100%;margin:0;padding:0;background-color:beige}.container{display:grid;width:100%;overflow-x:hidden;min-height:100vh;grid-template-rows:auto auto auto auto auto;grid-template-columns:1fr 1fr 1fr;grid-template-areas:"navbar navbar navbar" "banner  banner  banner" "inline  inline  inline" "box     box     box" "footer  footer  footer"}.navbar{background-color:#000;grid-area:navbar;position:relative}.navbar a,.navbar a:visited,.navbar a:hover,.navbar a:active{color:inherit;text-decoration:none}.navbar-left{display:flex;height:100%}.navbar-left img{align-self:center;padding-top:5px;height:80px;padding-left:6px;width:auto}.navbar-elements{color:#fff;font-size:20px;font-weight:700;height:100%;list-style:none;display:flex;padding-right:10px;padding-top:0;flex:1 1 auto;align-items:center}.navbar-hamburger{display:none;color:#fff;font-size:34px;background:transparent;border:none;padding-right:14px;cursor:pointer;line-height:1}.navbar-right{display:flex;align-items:center}@media(min-width:941px){.navbar{height:100%;display:flex;justify-content:space-between;align-items:center}.navbar-center{display:flex;align-items:center;height:100%}.navbar-elements{gap:100px}.navbar-right{display:flex;height:100%}.navbar-right img{display:flex;align-self:center;height:70px;width:auto;padding-right:10px}}@media(min-width:1700px){.navbar-elements{gap:300px}}.navbar-mobile{position:absolute;top:100%;left:0;right:0;background:#000;overflow:hidden;max-height:0;opacity:0;transform:translateY(-8px);transition:max-height .25s ease,opacity .25s ease,transform .25s ease;z-index:999}.navbar-mobile.open{max-height:260px;opacity:1;transform:translateY(0)}.navbar-mobile a{display:block;color:#fff;font-weight:700;font-size:16px;line-height:1.2;padding:16px 18px;text-align:center}.navbar-mobile a,.navbar-mobile a:visited,.navbar-mobile a:hover,.navbar-mobile a:active,.navbar-mobile a:focus,.navbar-mobile a:focus-visible{color:#fff;-webkit-tap-highlight-color:transparent}.navbar-elements a,.navbar-mobile a{padding:8px 12px;border-radius:10px;transition:background-color .15s ease,color .15s ease}.navbar-elements a:hover,.navbar-elements a:active,.navbar-mobile a:hover,.navbar-mobile a:active{background:#fff;color:#000}.wip{font-weight:400;opacity:.7;margin-left:6px}@media(max-width:940px){.navbar{display:flex;align-items:center;justify-content:space-between;height:90px}.navbar-center,.navbar-right img{display:none}.navbar-right{margin-left:auto}.navbar-hamburger{display:block}}@media(min-width:940px){.navbar-mobile,.navbar-hamburger{display:none}}.banner{background-image:url(/banner.jpg);background-size:cover;background-position:50% 80%;background-repeat:no-repeat;grid-area:banner;height:600px;width:100%;display:grid;grid-template-rows:1fr;grid-template-columns:1.5fr 1fr;grid-template-areas:"hi .";position:relative;overflow:hidden}.banner:before{content:"";position:absolute;inset:0;background:#00000040;z-index:0}.banner:after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(to bottom,#0000,#000);z-index:0}.banner>*{position:relative;z-index:1}.hi{grid-area:hi;display:flex;align-items:center;justify-content:center;color:#e6d8b8;font-family:Playfair Display,serif}.typewriter{display:inline-block;white-space:nowrap;overflow:hidden;border-right:2px solid #E6D8B8;animation:typing 2s steps(10,end) forwards,blink .8s step-end infinite}@keyframes typing{0%{width:0}28%{width:3ch}50%{width:3ch}to{width:10ch}}@keyframes blink{50%{border-color:transparent}}@media(prefers-reduced-motion:reduce){.typewriter{animation:none;border-right:none}}@media(min-width:941px){.banner{background-image:url(/banner.jpg);background-position:50% 80%;background-size:cover;display:grid;grid-template-columns:1.5fr 1fr;grid-template-areas:"hi ."}.hi{padding-left:50px;position:relative;top:auto;left:auto;transform:none;width:auto;text-align:left;justify-content:center;align-items:center}.hi p{font-size:100px}}@media(max-width:940px){.banner{background-image:url(/banner_small.jpg);background-position:center;background-size:cover;background-repeat:no-repeat;display:block;position:relative}.hi{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;text-align:center;color:#e6d8b8;padding:14px 20px;background:#0000008a;width:min(79vw,560px)}.hi p{font-size:60px;margin:0;line-height:1.05;text-shadow:0 2px 14px rgba(0,0,0,.55)}}.inline{background-color:#000;position:relative;grid-area:inline;height:100%;overflow-x:hidden;overflow-y:visible}.inline,.intro,.list-bottom,.list-bottom table,.list-bottom td,.list-bottom td ul,.list-bottom tr{box-sizing:border-box}.intro{color:#e6d8b8;display:flex;flex-direction:column;align-items:center;gap:2em;overflow-x:hidden;overflow-y:visible}.intro h1{display:flex;justify-content:center;font-size:3em}.list-top{color:#e6d8b8;width:min(1200px,calc(100vw - 56px));margin:72px auto 0}.list-top>h1{margin:0 0 18px;text-align:center}.about-me{list-style:none;padding:0;margin:0;display:grid;gap:20px;font-size:20px;text-align:center}.about-me>li{line-height:1.9;color:#e6d8b8;padding:10px 0 18px}.about-me span{color:#e6d8b8;border-bottom:2px dotted rgb(242,254,0);padding-bottom:2px;letter-spacing:.05em}.about-me h2{margin:0 0 10px;letter-spacing:.12em;text-transform:uppercase;color:#e6d8b8}.about-me>li>ul{list-style:none;padding:0;display:grid;gap:0px}.list-center h1{margin-top:50px}.elements{padding:0;margin:0 auto}.elements h2{width:120px}.elements li{display:flex;overflow-x:hidden;overflow-y:visible}.elements img{height:60px;width:60px;padding:10px}.elements img{transition:transform .16s ease,filter .16s ease,opacity .16s ease;transform:translateY(0);filter:none;opacity:1}@media(hover:hover){.elements img:hover{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}.elements img:active{transform:translateY(-1px) scale(1.03)}}img.react-ico,img.html-ico,img.css-ico{height:60px;width:65px}img.js-ico{height:65px;width:65px}img.postgre-ico{height:75px;width:85px}img.net-ico{height:60px;width:65px}.elements li{gap:30px;margin-bottom:60px;overflow-x:hidden;overflow-y:visible}.list-bottom{display:flex;flex-direction:column;align-items:center;overflow-x:hidden;overflow-y:visible}.bachelors a.jumpLink:hover,.masters a.jumpLink:hover{color:#000;background:#fff;box-shadow:0 10px 22px #00000040}.jumpLink{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;line-height:1.2;color:inherit;text-decoration:none;font-weight:600;transition:transform .16s ease,opacity .16s ease}.jumpLink .gh{width:25px;height:25px;flex:0 0 auto;transition:opacity .16s ease,transform .16s ease}.jumpLink:hover{transform:translateY(-3px);opacity:.95}.ghSwap{position:relative;width:22px;height:22px;flex:0 0 22px}.ghSwap .gh{position:absolute;inset:0;width:22px;height:22px;transition:opacity .16s ease}.ghSwap .gh-after{opacity:0}.jumpLink:hover .ghSwap .gh-after{opacity:1}.jumpLink:hover .ghSwap .gh-before{opacity:0}.jumpLink:active{transform:translateY(-1px)}.masters{list-style:none;display:flex;flex-direction:row;justify-content:center;overflow-x:hidden;overflow-y:visible}.ntu-ico{height:90px;width:240px;margin-top:45px;padding-top:10px;padding-right:25px;overflow:hidden}.bachelors{list-style:none;display:flex;flex-direction:row;justify-content:center;margin-right:80px;overflow-x:hidden;overflow-y:visible}.bachelors a,.bachelors a:visited,.bachelors a:hover,.bachelors a:active{color:inherit;text-decoration:none;cursor:pointer}.sjtu-ico{height:70px;width:240px;padding-top:50px;padding-right:20px;transform:translate(-20px);overflow:hidden}@media(max-width:940px){.ntu-ico{height:70px;width:200px;padding:15px;overflow:hidden}.sjtu-ico{height:55px;width:200px;padding-top:80px;padding-right:50px;overflow:hidden}}.list-bottom h2{margin:0 0 20px;font-size:34px}.list-bottom h3{margin:0 0 20px;font-weight:600}.list-bottom h3 span{background:transparent;color:#e6d8b8;border-bottom:5px solid rgba(230,216,184,.35);padding-bottom:2px;letter-spacing:.08em;text-transform:uppercase;font-size:20px}.list-bottom table{width:100%;border-collapse:collapse}.list-bottom tr{display:block;margin-top:16px;margin-bottom:6px;font-weight:700;color:#e6d8b8;letter-spacing:.05em;font-size:20px}.list-bottom td{display:block;padding-bottom:10px}.list-bottom td ul{list-style:disc;padding-left:20px;margin:6px 0 0;letter-spacing:.05em;font-size:20px}.list-bottom td ul li{color:#e6d8b8;line-height:1.7;margin-bottom:8px;overflow-wrap:anywhere}.header-big{display:block}.header-small{display:none}@media(max-width:940px){.inline,.intro,.list-bottom,.masters,.bachelors,.elements li{overflow-x:hidden!important;overflow-y:visible!important}.about-me{list-style:none;padding:0;margin:0;display:grid;gap:20px;font-size:18px;text-align:center}.list-bottom h3 span{font-size:16px}.elements li{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px 12px;margin-bottom:40px}.elements li>h2{flex:0 0 100%;width:auto;text-align:center;margin:0 0 6px}.header-big{display:none}.header-small{display:block}h2.header-small{font-size:25px}.elements img{height:30px;width:30px;padding-right:5px;display:block}img.postgre-ico{height:45px;width:45px}img.js-ico,img.react-ico,img.html-ico,img.css-ico,img.net-ico{height:30px;width:30px}.masters,.bachelors{flex-direction:column;align-items:center;justify-content:center;margin-right:0;padding:0;gap:18px}.list-bottom{width:100%;margin-left:auto;margin-right:auto;align-items:stretch}.list-bottom table,.list-bottom td,.list-bottom tr,.list-bottom td ul{width:100%!important;margin-left:0!important;margin-right:0!important}.list-bottom td ul{padding-left:22px}.masters li,.bachelors li{width:100%}.ntu-ico,.sjtu-ico{display:block;margin:0 auto;padding:0}.list-bottom h2,.list-bottom h3,.list-bottom table{text-align:center}.list-bottom table tr,.list-bottom table tr a{font-size:18px}.list-bottom td ul{list-style:none;text-align:center;padding-left:0;font-size:16px}.list-bottom td ul li{position:relative;display:inline-block;padding-bottom:14px;margin-bottom:10px}.list-bottom td ul li:after{content:"";position:absolute;left:50%;bottom:-2px;transform:translate(-50%);width:100px;border-bottom:3px dotted rgb(249,249,247)}.list-bottom td ul li:last-child:after{display:none}}.box{background-color:#000;grid-area:box}.box h1:first-child{display:flex;justify-content:center;color:#e6d8b8;font-size:3em;margin:72px auto 0}.viewport{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y;overflow:hidden;border-radius:20px}.viewport:active{cursor:grabbing}.sliderWrap{max-width:1400px;margin:0 auto;padding-top:40px}.track{display:flex;transition:transform .25s ease}.slide{flex:0 0 100%}.card{border-radius:20px;padding:0;min-height:400px;width:auto;background:#e6d8b8;overflow:hidden}.cardGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}.cardGrid{align-items:stretch}.cardMain{min-width:0;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:30px;margin-bottom:10px;background:#e6d8b8;transition:transform .18s ease,background .18s ease}.cardMain>h2{margin:0 0 12px;font-size:34px;line-height:1.15;letter-spacing:.05em;text-align:center}.cardPoints{flex:1;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}.cardPoints p{margin:0;font-size:20px;line-height:1.6;padding-top:10px;padding-bottom:10px;letter-spacing:.05em;opacity:.85;max-width:520px}.cardPoints h2,.cardPoints h3{margin:3px 0 0;font-size:30px;letter-spacing:.05em;opacity:.9}.cardPoints h3:after{content:"";display:block;width:140px;margin:5px auto 0;border-top:4px dotted rgba(0,0,0,.35)}.cardPoints ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;align-items:center}.cardPoints li{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border-radius:12px;background:#0000000f;border:1px solid rgba(0,0,0,.06);font-size:20px;line-height:1.4;opacity:.92;letter-spacing:.05em}.cardMain:focus-within{outline:none}.cardTitleLink:focus{outline:none}.cardTitleLink:focus-visible{outline:2px solid rgba(0,0,0,.28);outline-offset:4px;border-radius:10px}.cardTitleLink{display:inline-block;color:inherit;text-decoration:none;cursor:pointer;transition:transform .16s ease,opacity .16s ease,text-decoration-color .16s ease;will-change:transform;outline:none;-webkit-tap-highlight-color:transparent}.cardTitleLink:hover{transform:translateY(-2px);opacity:.92;text-decoration:underline dotted;text-underline-offset:6px}.cardTitleLink:active{transform:translateY(0);opacity:.85}.cardTitleLink:focus-visible{outline:2px dotted rgba(0,0,0,.35);outline-offset:6px;border-radius:8px}.titleRow{display:inline-flex;align-items:center;gap:10px}.git-ico{height:25px;width:25px;display:block}.cardActions{margin-top:18px;display:flex;gap:10px;justify-content:center}.cardSide{min-width:0;padding:20px;display:flex;align-items:center;justify-content:center}.cardPhoto{width:100%;max-width:620px;display:flex;flex-direction:column;gap:10px}.cardMedia{width:100%;height:360px}.cardMedia>*{width:100%;height:100%}.cardImg{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;background:transparent}.cardMedia .ba{width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:transparent}.cardCaption{font-size:20px;letter-spacing:.05em;line-height:1.4;text-align:center;opacity:.85}.bottom{display:flex;align-items:center;justify-content:center;margin-top:12px}.cardTitleLink,.cardTitleLink:visited,.cardTitleLink:hover,.cardTitleLink:active{color:inherit;text-decoration:none}.cardTitleLink{cursor:pointer}.dots{display:flex;gap:10px}.dot{width:10px;height:10px;border-radius:999px;border:10px solid rgba(139,123,107,.583);background:#00000059;padding:0}.dot[aria-current=true]{border:10px solid #E6D8B8;background:#e6d8b8}@media(max-width:940px){.card{height:1000px}.cardGrid{height:100%;grid-template-columns:1fr;gap:0}.cardCaption{font-size:17px;letter-spacing:.05em;line-height:1.4;text-align:center;opacity:.85}.cardPoints h2,.cardPoints h3{font-size:18px}.cardMain{flex:1;height:auto}.cardMain>h2{font-size:30px}.cardPoints li{font-size:18px}.cardSide{order:1;padding:18px;align-items:flex-start}.cardPoints p{font-size:17px}.cardMain{order:2;padding:22px 18px;margin-bottom:0}.cardMedia{padding-top:10px;height:350px;width:100%}.cardImg{object-fit:contain}}.ba{position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;border-radius:14px;-webkit-user-select:none;user-select:none;touch-action:none;cursor:ew-resize;background:#0000000f}.baImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.baAfter{z-index:1}.baBefore{z-index:2;clip-path:inset(0 calc(100% - var(--pct)) 0 0)}.baHandle{position:absolute;top:0;bottom:0;left:var(--pct);transform:translate(-50%);z-index:3;display:grid;place-items:center;pointer-events:none}.baLine{position:absolute;top:0;bottom:0;width:2px;background:#ffffffe6}.footer{grid-area:footer;width:100%;background:#000;color:#e6d8b8;padding:72px 22px 44px}.footerInner{max-width:1200px;margin:0 auto;width:100%;border-top:1px solid rgba(230,216,184,.25);padding-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}.footerLeft{display:flex;flex-direction:column;gap:12px}.footerTitle{margin:0;font-size:50px;letter-spacing:.05em}.footerText{margin:0;font-size:20px;letter-spacing:.05em;line-height:1.7;opacity:.88;max-width:520px}.footerStack{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}.stackLabel{opacity:.75;font-size:20px;letter-spacing:.05em}.footerStack{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px}.stackIcons{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.stackIcon{width:28px;height:28px;object-fit:contain;display:block;padding:6px;border-radius:12px;border:1px solid rgba(230,216,184,.18);background:#e6d8b80f;transition:transform .15s ease,background .15s ease,border-color .15s ease}.stackIcon:hover{transform:translateY(-2px);background:#e6d8b81a;border-color:#e6d8b847}.footerCopyright{margin-top:16px;font-size:20px;letter-spacing:.05em;opacity:.65}.footerRight{display:flex;flex-direction:column;gap:12px}.contactRow{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;text-decoration:none;color:#e6d8b8;padding:12px 14px;border-radius:16px;border:1px solid rgba(230,216,184,.18);background:#e6d8b80f;transition:transform .15s ease,background .15s ease,border-color .15s ease}.contactRow:hover{transform:translateY(-2px);background:#e6d8b81a;border-color:#e6d8b84d}.contactIcon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#e6d8b81f;border:1px solid rgba(230,216,184,.18)}.contactIcon img{width:24px;height:24px;object-fit:contain;display:block}.contactText{font-size:18px;opacity:.92;letter-spacing:.05em;overflow-wrap:anywhere}.footerLeft,.footerRight{min-width:0}.contactRow{width:100%;box-sizing:border-box}@media(max-width:940px){.footerText{margin:0;font-size:16px;letter-spacing:.05em;line-height:1.7;opacity:.88;max-width:520px}.footerCopyright{margin-top:16px;font-size:16px;letter-spacing:.05em;opacity:.65}.stackLabel{opacity:.75;font-size:16px;letter-spacing:.05em}.footerInner{grid-template-columns:1fr;gap:20px}.contactRow{max-width:90%;align-self:left}.contactText{font-size:16px;opacity:.92;letter-spacing:.05em;overflow-wrap:anywhere}}@media(max-width:500px){.footerTitle{font-size:40px}.footerText,.footerCopyright,.stackLabel{font-size:12px}.footerInner{grid-template-columns:1fr;gap:20px}.contactRow{max-width:90%;align-self:left}.contactText{font-size:12px}}