@font-face{font-family:InterLocal;src:url("assets/fonts/InterVariable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}

:root{--ink:#1a1a1a;--paper:#f0e7d4;--red:#f34c47;--green:#33a450;--yellow:#efc21e;--blue:#4365ff;--line:rgba(26,26,26,.72)}


*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;background:var(--ink);font-family:Arial,"PingFang SC",sans-serif;color:var(--ink)}

a{color:inherit}

.site-nav{position:fixed;z-index:10;top:0;left:0;right:0;height:min(68.734px,3.5799vw);display:grid;grid-template-columns:min(180px,9.375vw) auto auto;justify-content:space-between;align-items:start;padding:min(16px,.8333vw);font-family:InterLocal,Arial,sans-serif}

.logo,.site-nav nav,.contact-button{border-radius:999px;text-decoration:none}

.logo{width:min(65px,3.3854vw);height:min(36.734px,1.9132vw);display:block;overflow:hidden}

.logo img{display:block;width:100%;height:100%}

.site-nav nav{display:flex;gap:min(24px,1.25vw);width:min(245px,12.7604vw);height:min(36.734px,1.9132vw);align-items:center;justify-content:center;padding:0;background:#ebebeb;font-size:min(16px,.8333vw)}

.site-nav nav a{text-decoration:none}

.contact-button{width:min(113px,5.8854vw);height:min(36.734px,1.9132vw);display:flex;align-items:center;justify-content:center;border:min(2px,.1042vw) solid #ebebeb;padding:0;background:#1a1a1a;color:#ebebeb;font-size:min(14px,.7292vw)}


.hero{height:min(1100px,57.2917vw);position:relative;overflow:hidden;background:#f34c47 url("assets/images/hero/hero-background.jpeg") left max(-106.67px,-5.5557vw) top/111.11% 100% no-repeat;font-family:InterLocal,Arial,"PingFang SC",sans-serif}

.hero-info{position:absolute;left:min(50px,2.6042vw);top:min(95px,4.9479vw);font-size:min(70px,3.6458vw);line-height:min(70px,3.6458vw);font-weight:700;color:#ebebeb;white-space:nowrap;transform:scale(1.0382,.968);transform-origin:left top}

.hero>p{position:absolute;left:min(48px,2.5vw);top:min(475px,24.7396vw);margin:0;font-size:min(37px,1.9271vw);line-height:min(36.96px,1.925vw);letter-spacing:max(-1.478px,-.077vw);white-space:nowrap}

.hero h1{position:absolute;left:min(48px,2.5vw);top:min(552px,28.75vw);width:min(1824px,95vw);height:min(484px,25.2083vw);margin:0;border-block:min(1px,.0521vw) solid #1a1a1a;display:flex;flex-direction:column;justify-content:center;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:min(220px,11.4583vw);line-height:min(220px,11.4583vw);letter-spacing:max(-.72px,-.0375vw);font-weight:700;text-transform:uppercase;white-space:nowrap}

.hero h1 span{display:block;height:min(220px,11.4583vw)}

.hero-orbit{position:absolute;left:min(1556.86px,81.0865vw);top:min(102.86px,5.3573vw);width:min(342.275px,17.8268vw);height:min(302.27px,15.7432vw);display:grid;place-items:center}

.hero-orbit-ring{position:relative;width:min(258px,13.4375vw);height:min(253px,13.1771vw);font-size:min(29px,1.5104vw);font-weight:400}

.hero-orbit-ring span{position:absolute;left:50%;top:50%;line-height:1;transform:translate(-50%,-50%) rotate(calc(-83.076deg + var(--i) * 13.846deg)) translateY(max(-112px,-5.8333vw))}


.about{position:relative;height:min(1080px,56.25vw);display:flex;overflow:hidden;background:#1a1a1a;color:var(--paper)}

.about-profile{width:min(720px,37.5vw);height:100%;flex:none;padding:min(72px,3.75vw) min(48px,2.5vw);display:flex;flex-direction:column;justify-content:space-between;background:#1a1a1a}

.about-intro{width:100%}

.about-kicker{margin:0 0 min(36px,1.875vw);font-family:InterLocal,Arial,sans-serif;font-size:min(36px,1.875vw);line-height:min(36.96px,1.925vw);letter-spacing:max(-1.478px,-.077vw)}

.about h2{margin:0 0 min(20px,1.0417vw);font-size:min(64px,3.3333vw);line-height:min(72px,3.75vw);font-weight:600}

.about-intro>p:last-child{width:min(600px,31.25vw);margin:0;opacity:.8;font-size:min(24px,1.25vw);line-height:min(32px,1.6667vw)}

.about-tabs{width:min(196px,10.2083vw);display:flex;flex-direction:column;gap:min(24px,1.25vw)}

.about-tabs button{width:max-content;border:0;padding:0;display:flex;align-items:center;gap:min(8px,.4167vw);background:transparent;color:var(--paper);opacity:.5;text-align:left;white-space:nowrap;font:600 min(40px,2.0833vw)/min(42px,2.1875vw) "PingFang SC",sans-serif;cursor:pointer}

.about-tabs button[aria-selected="true"]{opacity:1}

.about-tabs button:focus-visible{outline:2px solid var(--paper);outline-offset:4px}

.about-tab-arrow{width:min(13.636px,.7102vw);height:min(15px,.7813vw);display:none;flex:none;transform:scaleX(-1)}
.about-tabs button[aria-selected="true"] .about-tab-arrow{display:block}

.about-bulb-icon{position:absolute;z-index:1;left:min(920.24px,47.9292vw);top:min(83.295px,4.3383vw);width:min(210.553px,10.9663vw);height:min(203.046px,10.5753vw);display:block;pointer-events:none}

.about-content{position:relative;width:min(1200px,62.5vw);height:100%;flex:none}

.about-panel{position:absolute;inset:0;overflow:hidden}

.about-panel[hidden]{display:none}

.capability-cloud{position:absolute;left:min(322px,16.7708vw);top:min(383px,19.9479vw);width:min(806px,41.9792vw);height:min(625px,32.5521vw);font-family:"PingFang HK","PingFang SC",sans-serif;font-weight:500;line-height:1;white-space:nowrap}

.capability-item{position:absolute;display:block}

.capability-ip{left:min(83.05px,4.3255vw);top:0;color:#efc21e;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:min(150px,7.8125vw);line-height:min(150px,7.8125vw);font-style:italic}

.capability-operations{left:min(252.89px,13.1714vw);top:min(59.93px,3.1214vw);color:#f0e7d4;font-size:min(78.9px,4.1094vw);line-height:min(78px,4.0625vw)}

.capability-growth{left:0;top:min(164.81px,8.5839vw);color:#33a450;font-size:min(78.9px,4.1094vw);line-height:min(78px,4.0625vw);transform:skewX(-14deg) scaleY(.97);transform-origin:left top}

.capability-ai{left:min(133.86px,6.9719vw);top:min(283.67px,14.7745vw);color:#f04b45;font-size:min(150px,7.8125vw);font-weight:600;line-height:min(78px,4.0625vw);transform:skewX(-6deg) scaleY(.99);transform-origin:left top}

.capability-pipeline{left:min(283.86px,14.7844vw);top:min(304.65px,15.8672vw);color:#d17416;font-size:min(78.9px,4.1094vw);line-height:min(78px,4.0625vw)}

.capability-components{left:min(42.11px,2.1932vw);top:min(399.88px,20.8271vw);color:#4365ff;font-size:min(78.9px,4.1094vw);line-height:min(78px,4.0625vw)}

.capability-3d{left:min(103px,5.3646vw);top:min(477.45px,24.8672vw);color:#1ea6ef;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:min(150px,7.8125vw);line-height:min(150px,7.8125vw);font-style:italic}

.capability-motion{left:min(320.68px,16.7021vw);top:min(529.39px,27.5724vw);color:#9b6bd3;font-size:min(78.9px,4.1094vw);line-height:min(78px,4.0625vw)}

.capability-marker{position:absolute;left:min(782.34px,40.7469vw);top:min(576.33px,30.0172vw);width:min(23.642px,1.2314vw);height:min(23.635px,1.2309vw)}

.about-panel-experience{font-family:"PingFang SC",sans-serif;color:#1a1a1a}
.about-panel-experience:not([hidden]){animation:about-experience-enter .55s cubic-bezier(.22,1,.36,1) both}

.experience-entry{position:absolute;right:0;height:min(260px,13.5417vw);font-size:min(24px,1.25vw);line-height:min(34px,1.7708vw)}
.experience-year{position:absolute;left:0;top:0;width:min(104px,5.4167vw);height:min(226px,11.7708vw);display:flex;align-items:center;justify-content:center;color:var(--experience-color);font:700 min(104px,5.4167vw)/min(104px,5.4167vw) "DIN Pro","Arial Narrow",InterLocal,sans-serif;white-space:nowrap}
.experience-year span{display:block;transform:rotate(-90deg)}
.experience-card{position:absolute;right:0;top:0;height:min(260px,13.5417vw);padding:min(20px,1.0417vw) min(30px,1.5625vw);background:var(--experience-color);color:#1a1a1a;overflow:hidden}
.experience-entry header{height:min(50px,2.6042vw);display:flex;align-items:flex-start;line-height:min(50px,2.6042vw);white-space:nowrap}
.experience-entry header strong,.experience-entry header b{font-size:min(30px,1.5625vw);font-weight:500}
.experience-entry header b{margin-left:min(19px,.9896vw)}
.experience-entry header time{margin-left:min(20px,1.0417vw);opacity:.8;font-size:min(24px,1.25vw);font-style:normal;font-weight:400}
.experience-entry p{margin:min(10px,.5208vw) 0 0;font-size:min(24px,1.25vw);line-height:min(34px,1.7708vw);text-align:justify}
.experience-entry p+p{margin-top:min(14px,.7292vw)}
.experience-entry p strong{font-weight:600}

.experience-entry-ximalaya{--experience-color:#eceb22;top:min(156px,8.125vw);left:min(103px,5.3646vw)}
.experience-entry-ximalaya .experience-card{left:min(104px,5.4167vw);width:min(993px,51.7188vw)}
.experience-entry-heishuo{--experience-color:#ff6638;top:min(432px,22.5vw);left:min(183px,9.5313vw)}
.experience-entry-heishuo .experience-card{left:min(105px,5.4688vw);width:min(912px,47.5vw)}
.experience-entry-jemo{--experience-color:#4366f4;top:min(710px,36.9792vw);left:min(255px,13.2813vw)}
.experience-entry-jemo,.experience-entry-jemo .experience-card{height:min(240px,12.5vw)}
.experience-entry-jemo .experience-card{left:min(105px,5.4688vw);width:min(840px,43.75vw)}

@keyframes about-experience-enter{from{opacity:0;transform:translateX(min(160px,8.3333vw))}to{opacity:1;transform:translateX(0)}}

.projects{height:min(1020px,53.125vw);display:flex;background:#f0e7d4;overflow:hidden}

.project-intro{width:min(1056px,55vw);height:100%;flex:none;display:flex;flex-direction:column;justify-content:space-between;padding:min(48px,2.5vw)}

.project-intro h2{position:relative;width:min(500px,26.0417vw);margin:0;font-family:InterLocal,Arial,sans-serif;font-size:min(78px,4.0625vw);line-height:min(82px,4.2708vw);letter-spacing:max(-3px,-.1563vw);font-style:italic;font-weight:300;text-transform:uppercase}
.projects-pencil-icon{position:absolute;left:min(386.765px,20.144vw);top:min(21.05px,1.0964vw);width:min(113.99px,5.9369vw);height:min(142.95px,7.4453vw);display:block;pointer-events:none}
.project-intro p{width:min(600px,31.25vw);margin:0;font-size:min(24px,1.25vw);line-height:min(32px,1.6667vw)}

.project-bars{width:min(864px,45vw);height:100%;display:flex;flex:none;overflow:hidden}
.project-bar{--bar:#d83b83;width:min(96px,5vw);height:100%;display:flex;flex:none;overflow:hidden;background:var(--bar);color:#252525;transition:width .55s cubic-bezier(.19,1,.22,1)}
.project-bar.is-active{width:min(480px,25vw)}

.project-trigger{position:relative;width:min(96px,5vw);height:100%;flex:none;border:0;padding:0;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:width .55s cubic-bezier(.19,1,.22,1)}
.project-bar.is-active .project-trigger{width:min(100px,5.2083vw)}
.project-trigger:focus-visible{z-index:1;outline:min(2px,.1042vw) solid #252525;outline-offset:max(-4px,-.2083vw)}

.project-category{position:absolute;left:min(14px,.7292vw);top:min(48px,2.5vw);width:min(72px,3.75vw);height:min(176px,9.1667vw);display:flex;align-items:center;justify-content:center;font-size:min(44px,2.2917vw);font-weight:300;line-height:min(48px,2.5vw)}
.project-category-short{height:min(127px,6.6146vw)}
.project-category>span{display:block;white-space:nowrap;transform:rotate(-90deg)}
.project-number{position:absolute;left:min(8px,.4167vw);bottom:min(24px,1.25vw);width:min(80px,4.1667vw);height:min(80px,4.1667vw);display:flex;align-items:center;justify-content:center;font-family:InterLocal,Arial,sans-serif;font-size:min(80px,4.1667vw);font-weight:900;line-height:min(80px,4.1667vw);letter-spacing:max(-8.904px,-.4638vw);transform:rotate(-90deg)}

.project-content{width:min(380px,19.7917vw);height:100%;flex:none;border-left:min(1px,.0521vw) solid #000;padding:min(48px,2.5vw) min(24px,1.25vw);display:flex;flex-direction:column;align-items:center;justify-content:space-between;opacity:0;transition:opacity .18s ease;pointer-events:none}
.project-bar.is-active .project-content{opacity:1;transition-delay:.2s;pointer-events:auto}
.project-copy{width:100%;color:#252525}
.project-copy h3{width:min(332px,17.2917vw);margin:0 0 min(40px,2.0833vw);font-size:min(44.1px,2.2969vw);font-weight:500;line-height:min(52px,2.7083vw)}
.project-description{width:min(332px,17.2917vw);font-size:min(16px,.8333vw);line-height:min(24px,1.25vw);letter-spacing:max(-.48px,-.025vw)}
.project-description p{margin:0}
.project-description ul{margin:min(24px,1.25vw) 0 0;padding:0;list-style:none}
.project-detail{position:relative;width:min(320px,16.6667vw);height:min(60px,3.125vw);flex:none;border:0;border-radius:min(40px,2.0833vw);padding:0;background:#282b28;color:#f0e7d4;font:400 min(22px,1.1458vw)/min(22px,1.1458vw) "PingFang SC",sans-serif;letter-spacing:max(-.48px,-.025vw);opacity:1}
.project-detail-link{display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.project-detail span{position:absolute;right:min(24px,1.25vw);top:50%;font-family:Arial,sans-serif;font-size:min(24px,1.25vw);transform:translateY(-54%)}

.magenta{--bar:#d83b83}
.orange{--bar:#ff6638}
.yellow{--bar:#eceb22}
.green{--bar:#20b845}
.blue{--bar:#4366f4}


.more-work{height:min(1080px,56.25vw);display:flex;flex-direction:column;justify-content:center;gap:min(80px,4.1667vw);overflow:hidden;background:#1a1a1a;color:#ebebeb}
.more-heading{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(40px,2.0833vw)}
.more-heading h2{margin:0;font-family:InterLocal,Arial,sans-serif;font-size:min(160px,8.3333vw);font-weight:700;line-height:min(122px,6.3542vw);letter-spacing:max(-3px,-.1563vw);white-space:nowrap}
.more-heading p{width:min(600px,31.25vw);margin:0;font-size:min(24px,1.25vw);line-height:min(32px,1.6667vw);text-align:center;white-space:nowrap}
.work-cards{--work-card-gap:min(24px,1.25vw);--work-card-half-gap:min(12px,.625vw);width:100%;overflow:hidden;padding-inline:min(48px,2.5vw);scrollbar-width:none;-ms-overflow-style:none}
.work-cards::-webkit-scrollbar{display:none}
.work-card-track{width:max-content;display:flex;align-items:center;gap:var(--work-card-gap);animation:more-work-scroll 32s linear infinite;will-change:transform}
.work-card-group{display:flex;align-items:center;gap:var(--work-card-gap)}
.work-cards:hover .work-card-track,.work-cards:focus-within .work-card-track{animation-play-state:paused}
.work-card{--card-color:#9b6bd3;--placeholder-color:#30243d;position:relative;width:min(580px,30.2083vw);height:min(420px,21.875vw);margin:0;display:flex;flex:none;align-items:flex-end;justify-content:center;overflow:hidden;background:#3a3a3a;color:inherit;text-decoration:none}
.work-card>img,.work-placeholder{position:absolute;inset:0;width:100%;height:100%}
.work-card>img{display:block;object-fit:fill}
.work-card-album::before{content:"";position:absolute;z-index:1;inset:0;background:rgba(162,162,162,.2);pointer-events:none}
.work-placeholder{display:flex;align-items:center;justify-content:center;background:var(--placeholder-color);color:rgba(235,235,235,.72);font-size:min(18px,.9375vw);letter-spacing:min(1px,.0521vw)}
.work-placeholder span{position:relative}
.work-card-caption{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;gap:min(20px,1.0417vw);overflow:hidden;padding:min(20px,1.0417vw) min(24px,1.25vw);background:var(--card-color);color:#000}
.work-card-caption span{font:600 min(32px,1.6667vw)/min(48px,2.5vw) "PingFang SC",sans-serif;letter-spacing:max(-1.2px,-.0625vw);white-space:nowrap}
.work-card-caption::after{content:"";width:100%;border-bottom:min(.5px,.026vw) solid #000}
.work-card:focus-visible{outline:min(3px,.1563vw) solid #ebebeb;outline-offset:max(-3px,-.1563vw)}
.work-card-album{--card-color:#9b6bd3}
.work-card-mystery{--card-color:#4366f4;--placeholder-color:#1e315f}
.work-card-exam{--card-color:#FFCF65;--placeholder-color:#4b244d}
.work-card-ip{--card-color:#20b845;--placeholder-color:#163f2b}
.work-card-campaign{--card-color:#e95bb7;--placeholder-color:#5b243f}

@keyframes more-work-scroll{to{transform:translateX(calc(-50% - var(--work-card-half-gap)))}}

@media (prefers-reduced-motion:reduce){
  .work-cards{overflow-x:auto}
  .work-card-track{animation:none;will-change:auto}
  .work-card-group[aria-hidden="true"]{display:none}
  .project-site-nav{transition:none}
  .about-panel-experience:not([hidden]){animation:none}
}

.contact{position:relative;z-index:11;height:min(1080px,56.25vw);overflow:hidden;background:#1a1a1a;font-family:InterLocal,Arial,"PingFang SC",sans-serif}
.contact-panel{position:relative;width:100%;height:100%;overflow:hidden}
.contact-background{position:absolute;left:0;top:max(-207.692px,-10.8173vw);width:100%;height:min(1495.385px,77.8846vw);display:block;object-fit:fill;pointer-events:none}
.contact-head{position:absolute;left:min(48px,2.5vw);top:min(48px,2.5vw);width:min(1824px,95vw);display:grid;grid-template-columns:min(111.65px,5.8151vw) min(1690px,88.0208vw);gap:min(22.35px,1.1641vw);align-items:start}
.contact-orbit{width:min(111.65px,5.8151vw);height:min(111.336px,5.7988vw);display:grid;place-items:center}
.contact-orbit-image{width:100%;height:100%;display:block}
.contact-meta{width:100%;display:grid;grid-template-columns:min(650px,33.8542vw) min(450px,23.4375vw) minmax(0,1fr);gap:min(42px,2.1875vw)}
.contact-meta div{display:flex;min-width:0;flex-direction:column;gap:min(10px,.5208vw)}
.contact-meta span{height:min(36px,1.875vw);border-bottom:min(1px,.0521vw) solid #1a1a1a;font:500 min(24px,1.25vw)/min(24px,1.25vw) "PingFang SC",sans-serif;letter-spacing:max(-.48px,-.025vw)}
.contact-meta b,.contact-meta a{height:min(56px,2.9167vw);display:flex;align-items:flex-end;border-left:min(1px,.0521vw) solid #1a1a1a;padding:0 min(101px,5.2604vw) min(5px,.2604vw) min(16px,.8333vw);color:#1a1a1a;text-decoration:none;white-space:nowrap}
.contact-meta b{font:600 min(40px,2.0833vw)/min(48px,2.5vw) "PingFang SC",sans-serif}
.contact-meta a{font:600 min(40px,2.0833vw)/min(48px,2.5vw) InterLocal,Arial,sans-serif}
.contact-official{position:absolute;left:min(48px,2.5vw);top:min(373.336px,19.4446vw);width:min(1824px,95vw);height:min(540px,28.125vw);border-block:min(1px,.0521vw) solid #1a1a1a;padding:min(286px,14.8958vw) 0 min(48px,2.5vw);display:flex;align-items:flex-end}
.contact-action{height:min(180px,9.375vw);display:flex;align-items:center;color:#000;text-decoration:none;white-space:nowrap}
.contact-action h2{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:min(180px,9.375vw);font-weight:700;line-height:min(180px,9.375vw);letter-spacing:0}
.contact-arrow{width:min(131.615px,6.8549vw);height:min(113.144px,5.8929vw);margin-left:min(40px,2.0833vw);display:block;transition:transform 240ms cubic-bezier(.25,1,.5,1)}
.contact-arrow-image{width:100%;height:100%;display:block}
.contact-qr{position:absolute;right:0;bottom:min(48px,2.5vw);width:min(162px,8.4375vw);height:auto;display:block}
.contact-action:hover .contact-arrow{transform:translateX(min(8px,.4167vw))}
.contact-action:focus-visible{outline:min(3px,.1563vw) solid #1a1a1a;outline-offset:min(8px,.4167vw)}
.project-detail-page{overflow-x:hidden;background:#1a1a1a}
.not-found-page{min-height:100vh;margin:0;display:grid;place-items:center;background:#1a1a1a;color:#f0e7d4;font-family:InterLocal,Arial,"PingFang SC",sans-serif;text-align:center}.not-found-page main{padding:40px}.not-found-page p{margin:0;font-size:clamp(96px,18vw,280px);font-weight:700;line-height:.9}.not-found-page h1{margin:32px 0;font-size:clamp(24px,3vw,48px)}.not-found-page a{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:12px 24px;color:inherit;text-decoration:none}.not-found-page a:focus-visible{outline:3px solid #f0e7d4;outline-offset:6px}
.project-site-nav{background:transparent;opacity:0;transform:translateY(-100%);pointer-events:none;transition:opacity 240ms cubic-bezier(.25,1,.5,1),transform 240ms cubic-bezier(.25,1,.5,1)}
.project-site-nav.is-scroll-visible,.project-site-nav:focus-within{opacity:1;transform:translateY(0);pointer-events:auto}
.project-showcase{width:100%;margin:0}
.project-detail-page .project-showcase{padding-top:min(68.734px,3.5799vw)}
.project-detail-page--deferred-nav .project-showcase{padding-top:0}
.project-showcase img,.project-showcase video{width:100%;height:auto;display:block}
.project-showcase video{object-fit:contain}

@media (min-width:1920.01px){body{width:1920px;zoom:calc(100vw / 1920px)}}