@font-face{font-family:PP Model Mono;font-weight:400;src:url(./PPModelMono-Medium.B_53xJt1.woff2) format("woff2")}@font-face{font-family:PP Model Mono;font-weight:700;src:url(./PPModelMono-Super.PVf7svXq.woff2) format("woff2")}@font-face{font-family:PP Neue Montreal;font-weight:400;src:url(./PPNeueMontreal-Medium.CCwdazGK.woff2) format("woff2")}@font-face{font-family:SF Pro TH;font-style:normal;src:url(https://static.wixstatic.com/ufonts/4d0e87_fc73ec06c11342409e51f503a8b3adc6/woff2/file.woff2) format("woff2")}*{border:none;box-sizing:border-box;font-family:var(--font);margin:0;outline:none;padding:0}:root{--font:"PP Neue Montreal","SF Pro TH",Arial,system-ui,sans-serif}html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;background-color:#050505;color:#fff;font-family:var(--font);font-size:16px;margin:0;overflow-x:hidden;padding:0;width:100%}header,header:before{height:100vh;max-height:1000px;width:100%}header:before{animation:bgFade 5s;background:url(../images/thatsbaobg.png) no-repeat 50%/cover;content:"";left:0;position:absolute;top:0}@keyframes bgFade{0%{opacity:0}50%{opacity:.9}to{opacity:1}}nav{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid hsla(0,0%,100%,.2);height:60px;position:fixed;top:0;width:100%;z-index:100}.container{margin:0 auto;max-width:1150px;position:relative;width:calc(100% - 40px);z-index:99}.deco-line{border-right:1px solid hsla(0,0%,100%,.2);height:100vh;opacity:.75}.container.deco-line{border-left:1px solid hsla(0,0%,100%,.2);border-right:1px solid hsla(0,0%,100%,.2);left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:100}.container.deco-line,.header-main{display:grid;grid-template-columns:3fr minmax(350px,2fr) minmax(210px,1fr);height:100vh}.header-main{max-height:1000px;padding-top:150px}.header-title-container svg{aspect-ratio:530/75;margin-bottom:20px;width:100%}.nav-logo{transition:all .5s cubic-bezier(.075,.82,.165,1);width:-moz-fit-content;width:fit-content}.nav-logo-container{align-items:center;aspect-ratio:1/1;border-right:1px solid hsla(0,0%,100%,.2);display:flex;height:60px;justify-content:center;position:relative}.nav-logo-container svg{transform:translate(2px)}.nav-login-container:after,.nav-login-container:before,.nav-logo-container:after,.nav-logo-container:before,.nav-menu:after,.nav-menu:before{aspect-ratio:1/1;background:#ffffff80;content:"";position:absolute;width:3px}.nav-logo-container:before{bottom:-1px;left:-1px}.nav-menu:before{bottom:-1px;left:-3px}.nav-login-container:before{bottom:-1px;left:-2px}.nav-login-container:after{bottom:-1px;right:-1px}.nav-menu:after{bottom:-1px;right:0}.nav-logo-container:after{bottom:-1px;right:-2px}nav .container{display:grid;grid-template-columns:3fr minmax(350px,2fr) minmax(210px,1fr);position:relative}.nav-menu{align-items:center;display:flex;font-family:PP Model Mono;font-size:14px;font-style:normal;justify-content:space-between;line-height:normal;padding:20px;position:relative;text-transform:uppercase}.nav-menu a{color:#fff;display:flex;pointer-events:auto;text-decoration:none}.nav-menu-item{font-size:14px;font-weight:500;position:relative}.nav-menu-item,.nav-menu-item:after{color:#fff;font-family:PP Model Mono;font-style:normal;line-height:normal}.nav-menu-item:after{content:"(" attr(data-count) ")";font-size:8px;font-weight:800;text-transform:uppercase}.nav-login-container{align-items:center;aspect-ratio:1/1;border-left:1px solid hsla(0,0%,100%,.2);display:flex;font-size:14px;height:60px;justify-content:center;pointer-events:auto;position:absolute;right:0;transition:all .5s cubic-bezier(.075,.82,.165,1)}.nav-login-container:hover,.nav-logo:hover{background-color:#fff;color:#050505;cursor:pointer}.nav-logo:hover svg path{fill:#050505}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0009;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.modal-box{background:#fff;border-radius:12px;box-shadow:0 10px 25px #0003;color:#333;padding:30px;text-align:center;width:400px}.modal-box h3{font-size:1.5rem;font-weight:700;margin-bottom:5px}.modal-desc{color:#666;font-size:.9rem;margin-bottom:20px}.input-group{margin-bottom:15px;text-align:left}.input-group label{display:block;font-size:.9rem;font-weight:600;margin-bottom:5px}.input-group input{border:1px solid #ddd;border-radius:6px;font-size:1rem;outline:none;padding:10px;transition:.2s;width:100%}.input-group input:focus{border-color:#333}.btn-login{background:#000;border:none;border-radius:6px;color:#fff;cursor:pointer;font-weight:700;margin-bottom:10px;padding:10px;transition:.2s;width:100%}.btn-login:hover{background:#333}.btn-cancel{background:none;border:none;color:#888;cursor:pointer;font-size:.9rem}.btn-cancel:hover{color:#333;text-decoration:underline}.nav-login-container{cursor:pointer}.hero-highlight{bottom:100px}.hero-highlight:before{background:#000}.next-hero{-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}.hero-grid-wrapper{display:grid;grid-column:2/4;position:relative}.hero-highlights{height:100%;position:relative}.hero-highlight{aspect-ratio:16/9;border:1px solid hsla(0,0%,100%,.2);cursor:pointer;left:100%;margin:1px;opacity:0;position:absolute;transition:left .5s cubic-bezier(.03,.63,.16,.96),opacity 1s cubic-bezier(.175,.885,.32,1.275),filter 1s cubic-bezier(.075,.82,.165,1),scale .5s cubic-bezier(.075,.82,.165,1);width:calc(100% - 1px)}.hero-highlight:before{background-color:#000;background-image:var(--bg-image);background-position:50%;background-repeat:no-repeat;background-size:100%;content:"";inset:1px;opacity:1;outline:0 solid #000;outline-offset:0;position:absolute;transition:background-size .1s cubic-bezier(.075,.82,.165,1),opacity .3s cubic-bezier(.075,.82,.165,1),filter .3s cubic-bezier(.075,.82,.165,1)}.hero-highlight:hover:before{background-size:90%;filter:grayscale() brightness(.75) contrast(.5);transition:background-size 1s cubic-bezier(.075,.82,.165,1),opacity .75s cubic-bezier(.075,.82,.165,1),filter 1s cubic-bezier(.075,.82,.165,1)}.hero-highlight-dc3:after,.hero-highlight-dc3:before,.hero-highlight-dc4:after,.hero-highlight-dc4:before{aspect-ratio:1/1;background:#ff5b00;content:"";opacity:0;position:absolute;rotate:1240deg;transition:.3s cubic-bezier(.075,.82,.165,1);width:4px;z-index:10}.hero-highlight-dc3:before{left:0;top:0}.hero-highlight-dc3:after{background-color:#fff395;bottom:0;left:0}.hero-highlight-dc4:before{right:0;top:0}.hero-highlight-dc4:after{background-color:#fff395;bottom:0;right:0}.hero-highlight:hover .hero-highlight-dc3:before{left:25px;opacity:1;rotate:0deg;top:25px;transition:.8s cubic-bezier(.075,.82,.165,1)}.hero-highlight:hover .hero-highlight-dc3:after{bottom:25px;left:25px;opacity:1;rotate:0deg;transition:.8s cubic-bezier(.075,.82,.165,1)}.hero-highlight:hover .hero-highlight-dc4:before{opacity:1;right:25px;rotate:0deg;top:25px;transition:.8s cubic-bezier(.075,.82,.165,1)}.hero-highlight:hover .hero-highlight-dc4:after{bottom:25px;opacity:1;right:25px;rotate:0deg;transition:.8s cubic-bezier(.075,.82,.165,1)}.hero-highlight:after{content:"";inset:1px;mix-blend-mode:multiply;opacity:1;outline:0 solid #000;outline-offset:0;pointer-events:none;position:absolute;transition:outline .3s cubic-bezier(.075,.82,.165,1),outline-offset .3s cubic-bezier(.075,.82,.165,1),opacity backdrop-filter .3s cubic-bezier(.075,.82,.165,1) cubic-bezier(.075,.82,.165,1) .3s;z-index:1}.hero-highlight:hover:after{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:url(../images/thatsbaobg.png) no-repeat bottom/200%;opacity:1;outline:40px solid #000;outline-offset:-40px;transition:outline 1s cubic-bezier(.075,.82,.165,1),outline-offset 1s cubic-bezier(.075,.82,.165,1),opacity 1s cubic-bezier(.075,.82,.165,1),backdrop-filter 1s cubic-bezier(.075,.82,.165,1)}.work-title{color:#fff;font-family:var(--font);font-size:60px;left:20px;opacity:0;position:absolute;right:0;top:100px;transition:opacity .2s cubic-bezier(.075,.82,.165,1),left 1s cubic-bezier(.075,.82,.165,1);width:-moz-fit-content;width:fit-content}.work-desc{bottom:80px;font-size:14px;max-width:250px}.work-desc,.work-info{color:#fff;font-family:PP Model Mono;left:20px;opacity:0;position:absolute;right:0;text-transform:uppercase;transition:opacity .2s cubic-bezier(.075,.82,.165,1),left 1s cubic-bezier(.075,.82,.165,1);width:-moz-fit-content;width:fit-content}.work-info{display:flex;font-size:13px;gap:8px;top:120px}.work-tag{background-color:#fff3;padding:2px 4px}.featured-badge{background:linear-gradient(#fff5,#fff5),url(https://i.pinimg.com/originals/95/1d/a0/951da0aa10ec51d0c3abf4c025f410dc.gif) 50%/cover;border-radius:2px;box-shadow:0 0 20px #fff5;color:#000;display:inline-block;font-family:PP Model Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.05em;margin-right:4px;padding:1px 6px}.work-arrow{aspect-ratio:1/1;font-size:24px;opacity:0;overflow:hidden;position:absolute;right:100px;top:100px;transition:opacity .2s cubic-bezier(.075,.82,.165,1),right 1s cubic-bezier(.075,.82,.165,1),top 1s cubic-bezier(.075,.82,.165,1);width:28px;z-index:99999}.work-arrow i{position:relative;right:50px;top:50px}.hero-highlight:hover .work-arrow{opacity:1;right:70px;top:70px}.hero-highlight:hover .work-arrow i{right:0;rotate:0deg;top:5px;transition:top 1s cubic-bezier(.075,.82,.165,1),right 1s cubic-bezier(.075,.82,.165,1);transition-delay:.1s}.hero-highlight:hover .work-title{left:80px;top:100px;transition-delay:.1s}.hero-highlight:hover .work-desc{bottom:80px;left:80px;transition-delay:.2s}.hero-highlight:hover .work-info{left:80px;top:80px}.hero-highlight:hover .work-desc,.hero-highlight:hover .work-info,.hero-highlight:hover .work-title{opacity:1;z-index:10}.hero-highlight-dc1:after,.hero-highlight-dc1:before,.hero-highlight-dc2:after,.hero-highlight-dc2:before{aspect-ratio:1/1;background:#ffffff80;content:"";position:absolute;width:3px}.hero-highlight-dc1:before{left:-2px;top:-2px}.hero-highlight-dc1:after{bottom:-2px;left:-2px}.hero-highlight-dc2:before{right:-2px;top:-2px}.hero-highlight-dc2:after{bottom:-2px;right:-2px}.current-hero{border-left:0;border-right:0;left:-1px;opacity:1;z-index:10}.next-hero{left:calc(100% + 25px);opacity:1;z-index:5}.exit-hero{filter:blur(4px);left:0;opacity:0;scale:.7;z-index:0}.hidden-hero{display:none}.progress-container{bottom:101px;height:1px;left:1px;position:absolute;width:calc(100% - 1px);z-index:20}.progress-bar{animation:loading 5s linear forwards;background:#fff;height:100%;width:0}@keyframes loading{0%{width:0}10%{width:0}20%{width:10%}to{width:100%}}.controls{bottom:60px;display:flex;gap:8px;position:absolute;right:10px;z-index:30}.btn-control{align-items:center;background:#fff3;color:#fff;cursor:pointer;display:flex;height:32px;justify-content:center;transition:.3s cubic-bezier(.075,.82,.165,1);width:32px}.btn-control:hover{background:#fff;color:#000}.about-section{display:grid;grid-template-columns:3fr minmax(350px,2fr) minmax(210px,1fr);padding:200px 0 100px}.about-section h1 svg{height:auto;margin-bottom:6vh;width:100%}.about-section p{font-size:24px;margin-top:20px}.about-section .personal-image{aspect-ratio:4/5;background:url(../images/bao.jpg) 50%/cover;border:1px solid hsla(0,0%,100%,.2);border-left:0;border-right:0;margin:-1px;position:relative;position:sticky;top:120px;width:100%}.about-section .personal-image:after,.about-section .personal-image:before,.about-section .psndc:after,.about-section .psndc:before{aspect-ratio:1/1;background:#ffffff80;content:"";position:absolute;width:3px}.about-section .personal-image:before{left:-2px;top:-1px}.about-section .personal-image:after{bottom:-1px;left:-2px}.about-section .psndc:before{right:-2px;top:-2px}.about-section .psndc:after{bottom:-2px;right:-2px}.tech-stack-title{font-size:46px;font-weight:400;margin-bottom:24px;margin-top:64px;text-transform:uppercase}.tech-stack-container{display:flex;flex-wrap:wrap;gap:8px}.tech-tag{background:#ffffff13;display:inline-block;padding:6px 12px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.archive-list{border-top:1px solid #333;margin-top:40px}.archive-item{align-items:center;border-bottom:1px solid #333;cursor:pointer;display:grid;grid-template-columns:100px 1fr 210px;padding:30px 0;transition:all .6s cubic-bezier(.23,1,.32,1)}.archive-item:hover{background:#111}.archive-item h3{font-size:48px;font-weight:400}.archive-header{display:grid;grid-template-columns:3fr minmax(350px,2fr) minmax(210px,1fr)}.archive-header h1{font-size:clamp(42px,5vw,48px);font-weight:400}.btn-add-work{align-items:center;background:#fff3;color:#fff;cursor:pointer;display:flex;font-size:20px;gap:12px;justify-content:center;padding:10px 15px;position:relative;right:1px;top:0;transition:all .5s cubic-bezier(.075,.82,.165,1)}.btn-add-work i{font-size:80%}.btn-add-work:hover{background:#fff;color:#050505}.admin-controls{display:flex;gap:10px}.btn-edit{align-items:center;background:transparent;border:1px solid #4a90e2;color:#4a90e2;cursor:pointer;display:flex;height:35px;justify-content:center;transition:.3s;width:35px}.btn-edit:hover{background:#4a90e2;color:#fff}.btn-delete{align-items:center;display:flex;height:35px;justify-content:center;width:35px}.floating-img-preview{aspect-ratio:16/9;border:1px solid hsla(0,0%,100%,.2);left:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transform:translate(20px,20px);transition:opacity .3s ease;width:35vw;z-index:9999}.floating-img-preview img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.col-year{font-family:PP Model Mono;font-size:14px;opacity:.5;text-align:center}.col-action{align-items:center;display:flex;font-size:24px;justify-content:center}.btn-delete,.btn-edit{background-color:transparent;border:1px solid hsla(0,0%,100%,.2);color:#fff;cursor:pointer;padding:8px;transition:.3s}.btn-edit:hover{background-color:#81afff22;color:#81afff}.btn-delete:hover{background-color:#ff5b0022;color:#ff5b00}.portfolio-archive{padding:100px 0 150px}.nav-menu-item{opacity:.5;transition:color .3s,opacity .3s}.nav-menu-item.active-filter,.nav-menu-item:hover{opacity:.75}.archive-item.dimmed{filter:grayscale(1);opacity:.2}.tag-badge{border-radius:2px;font-family:PP Model Mono;font-size:10px;margin-right:4px;padding:2px 6px;vertical-align:middle}.tag-badge.uidesign{background-color:#00e5ff22;color:#00e5ff}.tag-badge.web{background-color:#ff007b22;color:#ff007b}.tag-badge.interactive{background-color:#ffa20022;color:#ffa200}.list-complete-move{transition:transform .8s cubic-bezier(.16,1,.3,1)}.list-complete-item{display:inline-block;transition:all .8s ease;width:100%}.list-complete-enter-from,.list-complete-leave-to{opacity:0;transform:translateY(30px)}.list-complete-leave-active{position:absolute}.list-complete-move{transition:transform .6s cubic-bezier(.23,1,.32,1)}.nav-menu-item.active-filter{opacity:1}.interactive.active-filter:after{color:#ffa200}.uidesign.active-filter:after{color:#00e5ff}.web.active-filter:after{color:#ff007b}footer{overflow:hidden;padding-top:50px;position:relative}.main-logo{margin-bottom:-6px}.main-logo svg{aspect-ratio:1126/159;width:100%}.back-btn{background-color:transparent;border:1px solid hsla(0,0%,100%,.2);color:#fff;display:block;font-size:18px;font-weight:400;margin:20px auto;padding:12px 24px;text-decoration:none;transition:.5s cubic-bezier(.075,.82,.165,1);width:-moz-fit-content;width:fit-content}.back-btn:hover{background-color:#fff;color:#000}@media(max-width:768px){.container{padding:0;width:calc(100% - 20px)}.archive-header{grid-template-columns:auto}nav .container{grid-template-columns:1fr}.deco-line,.nav-menu{display:none}.nav-menu{background:#050505f2;flex-direction:column;gap:15px;left:0;padding:20px;position:absolute;right:0;top:50px}.nav-menu.active{display:flex}.container.deco-line,.header-main{grid-template-columns:1fr}.header-main{overflow-x:hidden;padding-top:160px}.hero-grid-wrapper{grid-column:1}.work-desc{display:none}.work-title{font-size:36px;left:0;top:80px}.work-info{left:0;top:50px}.hero-highlight:hover .work-title{left:50px;top:80px;transition-delay:.1s}.hero-highlight:hover .work-info{left:50px;top:50px}.hero-highlight:hover .work-arrow{right:40px;top:40px}.hero-highlight:hover:after{outline:20px solid #000;outline-offset:-20px}.hero-highlight:hover .hero-highlight-dc3:before{left:10px;opacity:1;rotate:0deg;top:10px;transition:.8s cubic-bezier(.075,.82,.165,1)}.hero-highlight:hover .hero-highlight-dc3:after{bottom:10px;left:10px;opacity:1;rotate:0deg;transition:.8s cubic-bezier(.075,.82,.165,1)}.hero-highlight:hover .hero-highlight-dc4:before{opacity:1;right:10px;rotate:0deg;top:10px;transition:.8s cubic-bezier(.075,.82,.165,1)}.hero-highlight:hover .hero-highlight-dc4:after{bottom:10px;opacity:1;right:10px;rotate:0deg;transition:.8s cubic-bezier(.075,.82,.165,1)}.about-section{grid-template-columns:1fr;padding:100px 0 50px}.about-section .personal-image{aspect-ratio:3/4;margin-top:40px;position:relative;top:auto}.personal-image{display:none}.archive-item{align-items:baseline;display:flex;flex-direction:column;gap:12px;padding-bottom:52px}.archive-item h3{font-size:36px;margin-bottom:12px}.col-action,.col-year{display:none}.col-title{flex:1;padding:0 20px;width:100%}.floating-img-preview{display:none}.btn-control{height:28px;width:28px}.col-image{aspect-ratio:16/9;background-position:50%;background-size:cover;margin:-30px -20px 24px}.tag-badge{display:block;margin-bottom:10px;width:-moz-fit-content;width:fit-content}}