@charset "UTF-8";
@font-face{font-family:Portfolio Display;src:url('/assets/fonts/display.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap}
:root{--paper:#faf9f6;--ink:#101522;--muted:#555f77;--blue:#1244bc;--pale-blue:#e6edfb;--copper:#b45629;--line:#dfe1e7;--header-height:80px;--chapter-height:65px;--ease:cubic-bezier(.2,.7,.2,1);--torn:polygon(1% 5%,8% 2%,15% 3%,21% 1%,28% 3%,36% 0,45% 2%,54% 1%,62% 3%,70% 1%,77% 3%,87% 1%,97% 3%,99% 16%,98.7% 29%,100% 46%,99% 61%,100% 77%,98.6% 97%,89% 98%,79% 96%,71% 99%,63% 97%,54% 100%,43% 98%,34% 99%,25% 97%,16% 99%,8% 97%,0 99%,.8% 78%,0 65%,1% 46%,.3% 30%,1.2% 17%)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + var(--chapter-height))}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23735a42' opacity='.75' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:6px}::selection{background:#cfdefb;color:#10347d}img{display:block;width:100%;height:auto}h1,h2,h3,h4,p{margin:0}h1,h2{font-family:'Portfolio Display','Microsoft YaHei','PingFang SC',sans-serif;font-weight:900;letter-spacing:-.045em;line-height:1.3}h3,h4{line-height:1.5}svg{overflow:visible}.page-width{width:calc(100% - 112px);max-width:1440px;margin-inline:auto}.skip-link{position:fixed;top:-100px;left:20px;background:var(--blue);color:white;padding:12px;z-index:200}.skip-link:focus{top:12px}.blue-text{color:var(--blue)}.copper-text{color:var(--copper)}.eyebrow{font-size:13px;font-weight:400;letter-spacing:.045em;color:var(--muted);margin-bottom:14px}.eyebrow.copper-text{color:var(--copper)}.section-description{font-size:19px;color:var(--muted);line-height:1.7}.paper-strip{display:inline-block;position:relative;isolation:isolate;padding:.01em .14em .1em;margin-left:-.14em;white-space:nowrap}.paper-strip:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pale-blue);clip-path:var(--torn);transform:rotate(-.5deg)}.paper-strip.neutral:before{background:#ece9e4;transform:rotate(-1.2deg)}.paper-strip.blue{color:var(--blue)}.paper-strip:after{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--torn);opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23p)' opacity='.9' d='M0 0h140v140H0z'/%3E%3C/svg%3E")}.handwritten{font-family:'STKaiti','KaiTi','Kaiti SC',serif;font-weight:400;letter-spacing:.07em;line-height:1.7}.handwritten:after{content:"";display:block;height:9px;border-top:1px solid currentColor;border-radius:50%;transform:rotate(-3deg);margin-top:2px}
.site-header{height:var(--header-height);position:sticky;top:0;z-index:40;display:flex;align-items:center;padding:0 max(56px,calc((100vw - 1440px)/2));gap:50px;background:rgba(250,249,246,.92);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}.is-scrolled .site-header{border-color:var(--line)}.brand{display:inline-flex;align-items:center;gap:16px;white-space:nowrap}.brand strong{font-size:28px;font-family:'Portfolio Display','Microsoft YaHei',sans-serif;font-weight:900;letter-spacing:-.045em}.brand span{font-size:13px;letter-spacing:.11em;font-weight:500}.header-links{display:flex;gap:42px;margin-left:auto}.header-links a{font-size:15px;position:relative;padding:10px 0}.header-links a:after{content:"";position:absolute;bottom:4px;left:0;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s}.header-links a:hover,.header-links a[aria-current]{color:var(--blue)}.header-links a:hover:after{transform:scaleX(1)}.header-arrow{font-size:31px;line-height:1;transition:transform .3s}.header-arrow:hover{transform:translateX(6px)}
.hero{min-height:calc(100svh - var(--header-height));max-height:1020px;position:relative;display:grid;grid-template-columns:48% 52%;align-items:center;padding-bottom:78px}.hero-copy{position:relative;z-index:2;padding:35px 0 15px}.hello{font-size:19px;font-weight:500;line-height:1.5;margin-bottom:25px}.hero h1{font-size:clamp(60px,6.15vw,94px);line-height:1.23;letter-spacing:-.055em}.hero h1 .blue{margin-top:9px}.hero-subtitle{font-size:23px;font-weight:500;margin-top:16px;letter-spacing:.005em}.hero-description{font-size:16px;line-height:1.7;color:var(--muted);margin-top:18px}.actions{display:flex;gap:25px;align-items:center;margin-top:30px}.paper-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:14px 28px;min-height:55px;white-space:nowrap;font-size:18px;font-weight:500;background:transparent;filter:drop-shadow(1px 3px 1.5px #141b3325);transition:transform .35s var(--ease),filter .35s}.paper-button:before{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--torn);background:#eeede9}.paper-button.primary{color:white;filter:drop-shadow(1px 3px 2px #17264330)}.paper-button.primary:before{background-color:var(--blue);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.18' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.paper-button.secondary{filter:drop-shadow(1px 3px 1px #19203525)}.paper-button span{font-size:23px;transition:transform .3s}.paper-button:hover{transform:translateY(-4px) rotate(-1.5deg);filter:drop-shadow(3px 7px 4px #17264325)}.paper-button:hover span{transform:translate(3px,2px)}.paper-button:active{transform:translateY(0) rotate(0)}.hero-art{position:relative;height:min(660px,calc(100svh - 185px));min-height:490px;margin-left:-90px;margin-right:-35px;--parallax-y:0px;transform:translateY(var(--parallax-y))}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:64% center;mix-blend-mode:multiply;mask-image:linear-gradient(to right,transparent 0%,black 13%,black 93%,transparent),linear-gradient(to bottom,transparent,black 5%,black 90%,transparent);mask-composite:intersect}.art-label{position:absolute;padding:8px 22px;background:#e4eaf6;box-shadow:2px 6px 9px #24314c12;font-family:'STKaiti','KaiTi',serif;font-size:27px;letter-spacing:.08em;transform:rotate(-9deg)}.label-top{top:8%;left:24%}.label-right{top:27%;right:2%;transform:rotate(9deg)}.hero-note{position:absolute;right:8%;bottom:14px;font-size:23px;transform:rotate(-7deg);color:#343d59}.scene-number{position:absolute;bottom:-16px;left:17%;color:var(--muted);font-size:12px;letter-spacing:.05em}.doodle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#7382a1;stroke-width:1.2;stroke-dasharray:7 5}.doodle .copper-stroke{stroke:var(--copper);stroke-width:2.5}.scroll-hint{position:absolute;bottom:25px;left:0;font-size:12px;color:var(--muted);display:flex;gap:12px;align-items:center}.scroll-hint span{font-size:23px;animation:nudge 2.5s ease-in-out infinite}.hero-side-note{position:absolute;bottom:30px;right:0;font-size:9px;letter-spacing:.16em;color:#788091}
.chapter-nav{position:sticky;top:var(--header-height);z-index:35;height:var(--chapter-height);border-block:1px solid var(--line);background:rgba(250,249,246,.95);backdrop-filter:blur(14px)}.chapter-inner{display:flex;align-items:center;height:100%;justify-content:space-between;gap:30px}.chapter-caption{font-size:14px;color:var(--muted)}.chapter-links{display:flex;justify-content:space-between;gap:50px;flex:1;max-width:750px}.chapter-links a{position:relative;padding:13px 25px;font-size:17px;white-space:nowrap;isolation:isolate;transition:color .3s}.chapter-links a span{font-size:15px;margin-right:12px;font-weight:400}.chapter-links a:before{content:"";position:absolute;inset:4px 0 5px;z-index:-1;background:var(--pale-blue);clip-path:var(--torn);opacity:0;transform:rotate(-2deg) scale(.8);transition:opacity .3s,transform .3s}.chapter-links a:after{content:"";position:absolute;height:3px;bottom:0;left:5px;right:5px;background:var(--blue);transform:scaleX(0);transition:transform .3s var(--ease)}.chapter-links a[aria-current]{color:var(--blue);font-weight:700}.chapter-links a[aria-current]:before{opacity:1;transform:rotate(-2deg) scale(1)}.chapter-links a[aria-current]:after{transform:scaleX(1)}.chapter-links a:hover{color:var(--blue)}.portfolio-link{font-size:14px;font-weight:600;white-space:nowrap}.portfolio-link span{margin-left:6px}.reading-progress{position:absolute;bottom:-1px;left:0;height:1px;background:var(--blue);width:100%;transform:scaleX(0);transform-origin:left;opacity:.25}
.section{padding-top:64px;padding-bottom:75px;scroll-margin-top:0}.split-section{display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.67fr);gap:65px}.scene-panel{position:sticky;top:calc(var(--header-height) + var(--chapter-height) + 26px);align-self:start;min-width:0}.scene-art{position:relative;margin:-6px -30px 34px;height:370px}.scene-art img{height:100%;object-fit:cover;object-position:43% center;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at center,black 38%,transparent 75%)}.scene-art .art-label{font-size:22px;top:0;left:25%;padding:7px 16px}.little-spark{position:absolute;right:0;top:30px;color:var(--copper);font-size:58px;transform:rotate(14deg)}.scene-index{margin-bottom:9px}.scene-panel h3{font-size:25px;font-weight:700;letter-spacing:-.015em}.scene-panel>p:not(.eyebrow){font-size:18px;color:var(--muted);margin-top:6px}.scene-note{display:block;width:max-content;max-width:100%;margin-top:35px;font-size:21px;color:#49536b;transform:rotate(-7deg)}.section-intro h2{font-size:clamp(31px,3.15vw,48px);margin-bottom:9px;white-space:nowrap}.section-intro .eyebrow{margin-bottom:8px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 24px;margin-top:28px}.paper-card{background:#fdfcf9;box-shadow:1px 3px 4px #16213913,0 12px 20px -17px #16213940;border:1px solid #eae9e6}.project-card{text-align:left;display:block;width:100%;padding:10px 10px 17px;transition:transform .4s var(--ease),box-shadow .4s;position:relative;transform:rotate(-.65deg);border-radius:2px}.project-card:nth-child(even){transform:rotate(.6deg)}.project-card:hover{transform:translateY(-7px) rotate(-1deg);box-shadow:2px 7px 8px #16213913,0 18px 25px -12px #16213935}.project-card:nth-child(even):hover{transform:translateY(-7px) rotate(1deg)}.project-cover{height:210px;overflow:hidden;position:relative;border-radius:2px;background:#e5eaf7}.cover-badge{position:absolute;right:9px;top:8px;z-index:2;font-size:10px;padding:2px 6px;background:#66718b;color:#fff;border-radius:2px}.project-caption{display:flex;align-items:start;gap:13px;padding:12px 3px 0}.project-number{font-size:23px;font-family:'Arial Narrow',sans-serif;font-stretch:condensed;line-height:1.5;font-weight:700;color:var(--blue)}.project-caption h3{font-size:17px;margin-top:2px;white-space:nowrap}.project-caption p{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap}.card-arrow{font-size:21px;line-height:1.8;margin-left:auto;transition:transform .3s}.project-card:hover .card-arrow{transform:translateX(4px)}.mini-dashboard{position:absolute;inset:10px;display:grid;grid-template-columns:19% 81%;border:1px solid #becde8;border-radius:3px;overflow:hidden;background:#f3f6ff;box-shadow:0 4px 10px #34478315}.mini-sidebar{background:#234181;color:#e3eafb;display:flex;flex-direction:column;padding:12px 6px;gap:12px;font-size:5px}.mini-sidebar b{font-size:7px;margin-bottom:6px}.mini-main{padding:0 10px;overflow:hidden}.mini-topbar{background:#fff;margin:0 -10px;padding:6px 9px;font-size:5px;color:#8091ad}.mini-topbar span{float:right}.mini-main h4{font-size:12px;margin-top:9px}.mini-main small{font-size:5px;color:#7c8ba5;display:block;margin-top:2px}.mini-stats{display:flex;gap:7px;margin-top:9px}.mini-stats>div{background:#fff;flex:1;padding:5px}.mini-stats span{font-size:5px;display:block;color:#7789a8}.mini-stats b{font-size:10px;color:#315ccd}.mini-chart{margin-top:8px;padding:5px;background:white;position:relative}.mini-chart span{font-size:5px;color:#7889a5;display:block}.mini-chart svg{height:50px;width:100%;fill:none;stroke:#6589eb;stroke-width:1.5}.mini-chart .chart-area{fill:#dce5ff;stroke:none}.mini-bars{display:flex;align-items:end;gap:6px;position:absolute;bottom:6px;right:15px;height:24px;opacity:.4}.mini-bars i{width:7px;height:70%;background:#244dbc}.mini-bars i:nth-child(3n){height:100%}.mini-bars i:nth-child(2n){height:45%}.components-cover{display:flex;gap:12px;padding:24px 12px 0;background:#e8ebf4}.component-sheet{background:#fff;padding:18px 12px;width:67%;border:1px solid #d8dfef;box-shadow:0 4px 9px #384d7315;border-radius:5px;transform:rotate(-2deg);font-family:sans-serif}.demo-buttons{display:flex;gap:8px;font-size:9px}.demo-buttons b,.demo-buttons>span{padding:5px 8px;background:#325ee8;color:#fff;border-radius:3px;font-weight:400}.demo-buttons>span{background:#eef1f8;color:#4b5f8e;border:1px solid #d1dbee}.demo-form{display:flex;gap:10px;align-items:center;margin-top:16px}.switch{display:block;width:34px;height:18px;background:#2a5cea;border-radius:20px;position:relative}.switch:after{content:"";position:absolute;height:14px;width:14px;right:2px;top:2px;background:white;border-radius:50%}.demo-form>span{font-size:8px;border:1px solid #d9dfea;border-radius:3px;padding:3px 10px;color:#6a7a99;flex:1}.demo-checkbox{font-size:8px;margin-top:13px;white-space:nowrap;color:#7180a1}.demo-checkbox span{color:#275de1}.demo-tabs{display:flex;justify-content:space-between;font-size:8px;margin-top:16px;border-bottom:1px solid #e3e7ef;padding-bottom:5px}.demo-tabs b{color:#2457d7;position:relative}.demo-tabs b:after{content:"";position:absolute;bottom:-5px;height:2px;background:#3868dd;left:0;right:0}.demo-sliders i{display:block;height:4px;background:#dfe8f9;width:80%;margin-top:10px}.demo-sliders i+i{width:60%}.phone-sheet{width:33%;background:#fff;border:7px solid #d4dced;border-radius:22px 22px 0 0;transform:rotate(3deg);padding:12px 8px;position:relative;min-width:65px}.phone-notch{height:5px;width:30px;background:#d4dced;position:absolute;top:0;left:50%;transform:translateX(-50%);border-radius:0 0 5px 5px}.phone-sheet>span{font-size:6px;white-space:nowrap}.phone-row{height:15px;background:#eef1f9;margin-top:8px;border-radius:4px}.phone-blocks{display:flex;gap:5px;margin-top:10px}.phone-blocks i{font-size:6px;font-style:normal;background:#5d81df;padding:6px 10px;color:#fff;border-radius:3px}.phone-blocks i+i{background:#e6eafa;color:#7a91bc}.screen-cover{background:#0b213e;padding:13px}.screen-ui{height:100%;background:radial-gradient(ellipse at 50% 70%,#124d79,transparent 65%);position:relative}.screen-ui h4{color:#c5e5ff;font-size:13px;font-weight:500;letter-spacing:.08em;border-bottom:1px solid #2d79b9;text-align:center;padding-bottom:7px}.globe{width:135px;height:135px;border-radius:50%;border:1px solid #51b8fd;position:absolute;top:43px;left:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 30%,#4993c8 0,#103f76 40%,#0e2b4f 68%);box-shadow:inset -15px -10px 20px #040e2b99,0 0 26px #258fff45;overflow:hidden}.globe:before,.globe:after{content:"";position:absolute;inset:17% -5%;border:1px solid #57b7ee88;border-radius:50%}.globe:after{inset:-2% 25%}.globe div{position:absolute;inset:0;background:#51a9dd;clip-path:polygon(30% 20%,47% 10%,68% 25%,65% 45%,45% 50%,54% 65%,40% 82%,30% 60%,15% 40%);opacity:.6}.globe i{position:absolute;left:0;right:0;top:50%;border-top:1px solid #4da9d877}.globe i+i{top:35%;transform:rotate(25deg)}.screen-lines{position:absolute;top:50px;width:22%;display:grid;gap:12px}.screen-lines.right{right:0}.screen-lines i{height:13px;border:1px solid #237bbc;background:linear-gradient(90deg,#1477bc 30%,#0e3a61 30%)}.screen-lines i:nth-child(even){background:linear-gradient(90deg,#1477bc 65%,#0e3a61 65%)}.screen-bottom{position:absolute;bottom:0;left:0;right:0;font-size:6px;text-align:center;color:#92c7ed;letter-spacing:.06em;background:#0e2842cc}.more-projects{padding:25px 20px 15px;background:#e7ecf7;overflow:hidden;display:flex;flex-direction:column;min-height:280px}.more-projects>div:first-child{display:flex;justify-content:space-between}.more-projects h3{font-size:20px}.more-projects>p{font-size:12px;color:var(--muted);margin-top:6px}.more-projects>div>span{font-size:23px}.paper-mountains{height:150px;position:relative;overflow:hidden;flex:1}.paper-mountains i{position:absolute;width:125px;height:125px;background:#bccde9;transform:rotate(38deg);bottom:-60px;left:5%}.paper-mountains i:nth-child(2){left:40%;bottom:-35px;background:#aabddd}.paper-mountains i:nth-child(3){left:65%;bottom:-50px;background:#879fc9}.paper-mountains>span{position:absolute;width:40px;height:40px;background:#c88964;opacity:.8;border-radius:50%;right:18px;top:25px}.more-link{font-size:13px;padding-top:10px;display:flex;justify-content:space-between;position:relative}.section-next{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin-top:32px;width:max-content}.section-next span{font-size:20px;transition:transform .25s}.section-next:hover span{transform:translateY(4px)}
.about-section{display:grid;grid-template-columns:47% 53%;position:relative;border-top:1px solid var(--line);padding-top:70px;gap:20px}.about-copy{position:relative;z-index:2}.about-copy h2{font-size:clamp(34px,3.9vw,59px);line-height:1.35;white-space:nowrap}.about-intro{font-size:19px;margin-top:17px;line-height:1.6}.skill-line{font-size:16px;color:var(--muted);margin-top:12px;display:flex;gap:18px}.skill-line span{color:#9198a9}.journey{margin-top:28px}.journey>h3{font-size:25px;margin-bottom:13px}.timeline{margin:0;padding:0 0 0 20px;list-style:none}.timeline li{position:relative;padding:0 0 23px 32px;border-left:1px solid #c7cddd}.timeline li:last-child{padding-bottom:0;border-color:transparent}.timeline li:before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;background:var(--blue);border-radius:50%;box-shadow:0 0 0 3px #faf9f6,0 0 0 4px #dce4f7}.timeline time{font-size:14px;color:var(--muted)}.timeline h4{font-size:19px;margin-top:1px;font-weight:600}.timeline p{font-size:15px;color:var(--muted)}.recent-work{font-size:16px;color:#183369;margin-top:23px}.recent-work>span{font-size:24px;color:var(--copper);display:inline-block;margin-right:5px}.resume-row{display:flex;gap:25px;align-items:center;margin-top:17px}.resume-row .paper-button{font-size:16px;padding:12px 23px;gap:13px}.resume-row>p{font-size:13px;color:var(--muted);border-left:1px solid #c9ced9;padding:7px 0 7px 23px;white-space:nowrap}.about-visual{align-self:center;min-width:0;padding-top:30px}.about-art{position:relative;margin:0 -20px 0 -55px;height:460px}.about-art img{height:100%;object-fit:cover;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at center,black 40%,transparent 76%)}.about-label-one{top:4%;left:15%;font-size:28px}.about-label-two{top:13%;right:10%;transform:rotate(8deg);font-size:28px}.about-label-three{bottom:20%;right:3%;font-size:28px;transform:rotate(-5deg)}.interest-note{padding:20px 27px 24px;position:relative;width:85%;margin:0 auto;transform:rotate(2deg);background:#f3f1eb}.interest-note:before{content:"";position:absolute;top:-12px;left:40%;width:80px;height:25px;background:#d4def399;transform:rotate(-9deg);clip-path:var(--torn)}.interest-index{font-size:10px;color:var(--muted);letter-spacing:.1em}.interest-note .handwritten{font-size:22px;margin-top:10px}.interest-note .handwritten:after{display:none}.interests{display:flex;gap:25px;border-top:1px solid #dbd9d3;margin-top:16px;padding-top:13px;font-size:14px}.interests small{font-size:9px;color:var(--muted);margin-left:4px}.about-visual>.section-next{margin-left:9%;margin-top:30px}
.explore-section{padding-top:74px;border-top:1px solid var(--line);grid-template-columns:minmax(0,.95fr) minmax(0,1.55fr);gap:65px}.explore-section .section-intro h2{font-size:clamp(30px,3.25vw,49px);margin-top:15px;margin-bottom:16px;white-space:nowrap}.explore-section .section-intro .paper-strip.blue{color:var(--ink)}.explore-section .eyebrow.copper-text{font-size:16px}.exploration-art{height:430px;margin-left:-60px;margin-right:-30px}.exploration-art img{object-position:55% center}.exploration-art .art-label{left:12%;top:3%;font-size:23px}.explore-section .scene-panel h3{font-size:29px}.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-content:start;min-height:430px}.explore-card{display:flex;flex-direction:column;min-width:0;padding:0;text-align:left;transition:transform .3s var(--ease),box-shadow .3s;border-radius:2px;overflow:visible}.explore-card:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 8px 16px #26334818}.explore-card[hidden]{display:none}.experiment-cover{height:152px;position:relative;background:#e8edf6;overflow:hidden;flex-shrink:0}.experiment-body{padding:16px 20px 18px;flex:1;display:flex;flex-direction:column}.experiment-body h3{font-size:21px;display:flex;justify-content:space-between}.experiment-body h3>span{font-size:18px;opacity:0;transform:translate(-4px,4px);transition:all .25s}.explore-card:hover h3>span{opacity:1;transform:none}.experiment-body p{font-size:14px;color:var(--muted);margin-top:7px;line-height:1.8}.tags{display:flex;gap:6px;margin-top:5px}.tags span{font-size:11px;color:var(--muted);background:#eceef1;padding:1px 7px;border-radius:2px}.experiment-link{font-size:12px;color:var(--blue);margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px}.ai-cover{display:flex;align-items:center;justify-content:center;gap:15px;background:#eef0f5;padding:20px 25px;overflow:visible}.tiny-wireframe{width:105px;max-width:45%;background:#fff;padding:12px 9px;box-shadow:2px 4px 5px #1a28451c;border:1px solid #e1e1e1;transform:rotate(-2deg)}.tiny-wireframe>i{display:block;width:70%;height:4px;background:#d0d4db;margin-top:6px}.tiny-wireframe>i:first-child{width:35%;margin:0}.tiny-wireframe>i:last-child{width:90%}.tiny-wireframe>div{display:flex;gap:7px;margin-top:8px}.tiny-wireframe b{display:block;width:45px;height:34px;background:linear-gradient(135deg,#eef0f4 50%,#aeb6c4 50%)}.tiny-wireframe div>span{flex:1;height:25px;background:repeating-linear-gradient(#d2d6df 0 4px,transparent 4px 9px)}.tiny-wireframe.finished{transform:rotate(2deg)}.finished>i{background:#8dacf2}.finished>i:first-child{background:#1e51d6}.finished b{background:linear-gradient(140deg,#c0d1fc 50%,#4370d7 50%)}.finished div>span{background:repeating-linear-gradient(#8dacf2 0 4px,transparent 4px 9px)}.tape{position:absolute;top:-10px;width:55px;height:23px;background:#dfdcd080;transform:rotate(8deg)}.code-cover{padding:15px;background:#ecebe7}.code-cover>div{background:#292d31;color:#d9e0e7;height:100%;padding:8px 14px;font-family:Consolas,monospace;font-size:13px;transform:rotate(.8deg);clip-path:var(--torn)}.code-prompt{display:block;margin:3px 0;white-space:nowrap;font-size:12px;letter-spacing:.04em}.code-caret{animation:blink 1.3s steps(2,end) infinite}.paper-cursor{position:absolute;bottom:5px;right:20px;width:45px;filter:drop-shadow(0 4px 3px #101c3733);transform:rotate(-8deg);transition:transform .3s}.paper-cursor path{fill:var(--blue);stroke:#fff;stroke-width:4;stroke-linejoin:round}.explore-card:hover .paper-cursor{transform:rotate(0) translate(-8px,-8px)}.visual-experiment{grid-column:1/-1;flex-direction:row;padding:10px}.visual-experiment .experiment-cover{width:50%;height:auto;min-height:127px}.visual-experiment .experiment-body{padding:3px 13px 5px 20px}.visual-experiment h3{font-size:20px}.landscape-cover{background:#e3eafa;position:relative;isolation:isolate}.landscape-cover:after{content:"";position:absolute;inset:0;opacity:.13;z-index:3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35' numOctaves='3'/%3E%3C/filter%3E%3Cpath filter='url(%23t)' d='M0 0h100v100H0z'/%3E%3C/svg%3E")}.sun{position:absolute;width:65px;height:65px;background:#bd8056;right:14%;top:10%;border-radius:50%;transition:transform .6s}.mountain{position:absolute;border-radius:48% 52% 0 0;transform:rotate(25deg);width:95%;height:150%;background:#87a5d9;left:-30%;top:45%;box-shadow:0 -2px 1px #faf8f750}.m2{background:#3763b6;left:15%;top:65%;transform:rotate(-29deg)}.m3{background:#183f8a;left:-25%;top:90%;transform:rotate(12deg);width:150%}.visual-experiment:hover .sun{transform:translateY(-5px)}.explore-sign{width:max-content;margin:22px 0 0 auto;color:var(--copper);font-size:27px;transform:rotate(-7deg)}
.contact-section{display:grid;grid-template-columns:54% 46%;gap:0;padding-top:78px;padding-bottom:65px;border-top:1px solid var(--line);align-items:center}.contact-copy{position:relative;z-index:2}.contact-copy>.eyebrow{font-size:17px;margin-bottom:20px}.contact-copy h2{font-size:clamp(42px,5.65vw,83px);line-height:1.3;white-space:nowrap}.contact-copy h2 .blue{margin-top:8px}.contact-copy h3{font-size:25px;margin-top:22px;margin-bottom:4px}.contact-copy .section-description{font-size:19px;white-space:nowrap}.email-link{font-family:'Trebuchet MS','Microsoft YaHei',sans-serif;font-size:clamp(24px,3.1vw,45px);font-weight:700;letter-spacing:-.04em;margin-top:28px;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:2px;padding:.04em .18em .14em;white-space:nowrap}.contact-copy .actions{margin-top:24px;gap:30px}.contact-copy .paper-button{min-width:185px}.contact-links{display:flex;gap:32px;margin-top:50px;font-size:18px;align-items:center}.contact-links a+ a{border-left:1px solid #cbd0db;padding-left:32px}.contact-links a span{margin-left:8px}.contact-links a:hover,.back-top:hover{color:var(--blue)}.contact-art{position:relative;min-width:0;height:570px;margin-left:-25px;margin-right:-40px}.contact-art img{height:100%;object-fit:cover;object-position:56% center;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at center,black 40%,transparent 74%)}.contact-label{top:0;left:3%;font-size:28px;padding:8px 18px;transform:rotate(-11deg)}.flying-plane{width:112px;height:100px;position:absolute;top:0;right:0;transform:rotate(-8deg);filter:drop-shadow(2px 7px 3px #122b6617);animation:float 6s ease-in-out infinite}.contact-note{position:absolute;bottom:-12px;right:20px;font-size:23px;transform:rotate(-7deg);color:#4b546a}.site-footer{border-top:1px solid #cbd0db;padding-block:20px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}.site-footer .brand strong{font-size:23px;color:var(--ink)}.site-footer .brand span{font-size:11px}.back-top{display:flex;gap:12px;align-items:center}.back-top span{font-size:20px}
.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);background:#183773;color:white;padding:12px 25px;box-shadow:0 5px 18px #13234320;z-index:120;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;font-size:14px;max-width:calc(100% - 32px);width:max-content}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{width:min(850px,calc(100vw - 40px));max-height:88svh;margin:auto;padding:44px;border:1px solid #deded9;background:var(--paper);color:var(--ink);box-shadow:0 30px 100px #10172935;border-radius:3px;overscroll-behavior:contain}dialog::backdrop{background:#15203b66;backdrop-filter:blur(5px)}dialog[open]{animation:dialog-in .3s var(--ease)}.dialog-close{position:sticky;top:0;float:right;margin:-25px -23px 0 0;font-size:30px;line-height:1;width:42px;height:42px;background:#eceff5;color:#243452;border-radius:50%;z-index:5;transition:transform .2s}.dialog-close:hover{transform:rotate(90deg)}.dialog-heading{font-size:32px;line-height:1.4;margin-bottom:16px;letter-spacing:-.02em}.dialog-lead{font-size:17px;color:var(--muted);margin-bottom:24px;line-height:1.8}.dialog-section{padding-top:18px;margin-top:20px;border-top:1px solid var(--line)}.dialog-section h3{font-size:19px;margin-bottom:7px}.dialog-section p{font-size:15px;color:var(--muted);line-height:1.9}.dialog-section img{margin-top:16px;border:1px solid var(--line)}.dialog-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:25px}.dialog-actions .paper-button{font-size:15px;padding:10px 20px;min-height:48px}.project-status{display:inline-block;font-size:12px;color:#7f441e;background:#f3e6da;padding:4px 10px;margin-bottom:16px}.workflow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.workflow>div{background:#e9edf6;padding:20px}.workflow strong{font-size:13px;color:var(--blue);letter-spacing:.1em}.workflow h3{font-size:18px;margin-top:7px}.workflow p{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.8}.demo-workbench{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center;padding:25px;background:#eceff6;margin:24px 0}.demo-paper{padding:35px 20px;text-align:center;background:#fcfaf5;box-shadow:2px 8px 9px #14213720;transform:rotate(-4deg);transition:transform .5s var(--ease),box-shadow .5s}.demo-paper.is-active{transform:rotate(4deg) translateY(-12px);box-shadow:7px 19px 20px #14213725}.demo-paper strong{font-size:24px;color:var(--blue)}.demo-paper p{font-size:13px;margin-top:9px;color:var(--muted)}.demo-controls p{font-size:14px;color:var(--muted);margin-top:14px}.demo-controls button{background:var(--blue);padding:9px 18px;color:#fff}.modal-landscape{height:220px;margin:24px 0}.palette-options{display:flex;gap:10px;flex-wrap:wrap}.palette-options button{padding:8px 16px;border:1px solid #cfd6e5;background:transparent}.palette-options button[aria-pressed=true]{background:var(--blue);color:#fff;border-color:var(--blue)}.modal-art-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-art-gallery img{border:1px solid var(--line)}.is-dialog-open{overflow:hidden}
.reveal{opacity:1;transform:none}.js-motion .reveal:not(.is-visible){opacity:0;transform:translateY(22px)}.js-motion .reveal{transition:opacity .65s var(--ease),transform .65s var(--ease)}.js-motion .project-card.reveal.is-visible{transition:opacity .65s var(--ease),transform .4s var(--ease),box-shadow .4s}.entrance{animation:enter .85s var(--ease) both}.hello.entrance{animation-delay:.05s}h1.entrance{animation-delay:.13s}.hero-subtitle.entrance{animation-delay:.21s}.hero-description.entrance{animation-delay:.28s}.actions.entrance{animation-delay:.35s}.hero-art.entrance{animation-delay:.14s;animation-duration:1.15s}[data-parallax]{transition:translate .4s ease-out;translate:0 var(--parallax-y,0px)}@keyframes enter{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}@keyframes dialog-in{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:none}}@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}@keyframes float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -8px;rotate:3deg}}@keyframes blink{50%{opacity:0}}
@media(min-width:1600px){.hero{min-height:840px}.hero h1{font-size:99px}.hero-art{height:720px}.scene-art{height:450px}.project-cover{height:250px}.contact-art{height:650px}.about-art{height:550px}.exploration-art{height:500px}}
@media(max-width:1200px){:root{--header-height:70px;--chapter-height:60px}.page-width{width:calc(100% - 72px)}.site-header{padding-inline:36px;gap:35px}.hero{grid-template-columns:50% 50%;padding-bottom:65px}.hero h1{font-size:6.3vw}.hello{font-size:17px;margin-bottom:24px}.hero-subtitle{font-size:20px}.hero-description{font-size:15px}.hero-art{margin-left:-80px;margin-right:-20px;min-height:460px}.hero-note{font-size:20px}.paper-button{font-size:16px;padding:13px 24px;gap:13px}.chapter-links{gap:14px;max-width:620px}.chapter-links a{padding-inline:21px}.chapter-caption{font-size:12px}.portfolio-link{font-size:12px}.split-section{gap:35px;grid-template-columns:.8fr 1.7fr}.scene-art{height:320px}.section-intro h2{font-size:3.05vw}.section-description{font-size:17px}.scene-panel h3{font-size:21px}.scene-panel>p:not(.eyebrow){font-size:16px}.scene-note{font-size:18px}.project-cover{height:185px}.project-caption{gap:8px}.project-caption h3{font-size:14px}.project-caption p{font-size:11px}.project-number{font-size:20px}.project-caption .card-arrow{font-size:17px}.project-grid{gap:25px 18px}.component-sheet{padding:15px 8px}.demo-buttons{gap:4px;font-size:8px}.demo-buttons b,.demo-buttons>span{padding:4px 5px}.components-cover{gap:7px;padding-inline:9px}.demo-checkbox{font-size:7px}.phone-sheet{padding-inline:5px}.about-copy h2{font-size:3.9vw}.about-intro{font-size:16px}.skill-line{font-size:14px;gap:15px}.timeline h4{font-size:17px}.timeline p{font-size:14px}.resume-row{gap:15px;flex-wrap:wrap}.resume-row>p{padding-left:15px;font-size:12px}.about-art{height:410px;margin-left:-30px}.interest-note{width:93%}.interests{gap:15px}.interest-note .handwritten{font-size:21px}.explore-section{grid-template-columns:.85fr 1.65fr;gap:38px}.exploration-art{height:380px;margin-inline:-35px}.explore-section .scene-panel h3{font-size:24px}.explore-section .section-intro h2{font-size:3.25vw}.experiment-body{padding:13px 15px}.experiment-body h3{font-size:18px}.experiment-body p{font-size:12px}.experiment-cover{height:135px}.ai-cover{gap:10px;padding-inline:17px}.code-prompt{font-size:10px}.code-cover{padding:11px}.code-cover>div{padding:10px}.visual-experiment h3{font-size:17px}.contact-copy h2{font-size:5.55vw}.contact-copy h3{font-size:22px}.contact-copy .section-description{font-size:16px}.contact-copy .paper-button{min-width:155px}.contact-art{height:490px;margin-right:-25px}.contact-note{font-size:19px}.contact-links{font-size:16px}}
@media(max-width:900px){.page-width{width:calc(100% - 48px)}.site-header{padding-inline:24px;gap:25px}.brand strong{font-size:25px}.brand span{font-size:11px}.header-links{gap:26px}.hero{min-height:690px;max-height:none;padding-bottom:80px}.hero-art{min-height:430px;height:470px;margin-left:-60px}.hero h1{font-size:6.2vw}.hero-subtitle{font-size:16px}.hero-description{font-size:14px}.hero .actions{gap:12px}.paper-button{padding:12px 17px;font-size:14px;gap:10px}.hero-note{font-size:17px;right:3%}.label-top{left:23%;top:7%;font-size:23px}.label-right{font-size:23px;right:0}.scene-number{left:22%;font-size:10px}.chapter-caption{display:none}.chapter-links{gap:0;max-width:none}.chapter-links a{padding-inline:20px}.chapter-inner{gap:25px}.split-section{grid-template-columns:.8fr 1.6fr;gap:25px}.scene-art{height:270px;margin-inline:-20px}.scene-art .art-label{font-size:18px;padding:6px 10px}.scene-panel h3{font-size:18px}.scene-panel>p:not(.eyebrow){font-size:14px}.scene-note{font-size:16px}.section-intro h2{font-size:3.1vw}.project-grid{gap:20px 13px}.project-cover{height:150px}.project-card{padding:7px 7px 13px}.project-caption h3{font-size:12px;white-space:normal}.project-caption p{font-size:10px;white-space:normal}.card-arrow{display:none}.mini-stats{gap:4px}.mini-main{padding-inline:6px}.mini-main h4{font-size:10px}.mini-sidebar{gap:8px;font-size:4px}.mini-sidebar b{font-size:5px}.mini-chart svg{height:35px}.components-cover{padding-top:18px}.component-sheet{padding:13px 7px;width:100%}.phone-sheet{display:none}.demo-buttons{font-size:8px}.demo-checkbox{font-size:7px}.demo-tabs{margin-top:12px}.demo-sliders{display:none}.screen-ui h4{font-size:9px}.globe{width:95px;height:95px;top:30px}.screen-lines{top:37px;gap:8px}.screen-lines i{height:9px}.screen-bottom{font-size:4px}.more-projects{padding:17px 15px;min-height:225px}.more-projects h3{font-size:17px}.more-projects>p{font-size:10px}.about-section{grid-template-columns:50% 50%;gap:0}.about-copy h2{font-size:4vw}.about-intro{font-size:15px}.desktop-break{display:none}.skill-line{font-size:12px;gap:11px}.timeline li{padding-left:24px}.timeline time{font-size:12px}.timeline h4{font-size:15px}.timeline p{font-size:13px}.recent-work{font-size:13px}.about-art{height:350px;margin-right:-24px}.about-art .art-label{font-size:21px}.interest-note{width:95%;padding:20px}.interest-note .handwritten{font-size:18px}.interests{gap:13px;font-size:13px}.interests small{display:none}.explore-section{grid-template-columns:.8fr 1.6fr;gap:25px}.exploration-art{height:310px}.explore-section .scene-panel h3{font-size:20px}.experiment-body h3{font-size:16px}.experiment-cover{height:110px}.experiment-body{padding:11px 12px}.tags{gap:4px}.tags span{font-size:9px}.code-prompt{font-size:8px}.paper-cursor{width:33px;right:13px}.experiment-body p{font-size:11px}.experiment-link{font-size:11px}.visual-experiment h3{font-size:15px}.visual-experiment .experiment-body{padding-left:13px}.visual-experiment .experiment-cover{min-height:110px}.explore-grid{min-height:350px;gap:17px}.explore-sign{font-size:23px}.contact-copy h2{font-size:5.5vw}.contact-copy h3{font-size:19px}.contact-copy .section-description{font-size:14px;white-space:normal}.contact-art{height:440px;margin-left:-10px}.contact-copy .paper-button{min-width:135px}.contact-note{font-size:16px}.flying-plane{width:85px}.contact-label{font-size:27px}.contact-links{font-size:14px;gap:22px}.contact-links a+a{padding-left:22px}}
@media(max-width:640px){:root{--header-height:64px;--chapter-height:55px}.page-width{width:calc(100% - 40px)}.site-header{padding-inline:20px;gap:14px}.brand{gap:9px}.brand strong{font-size:24px}.brand span{font-size:9px;letter-spacing:.09em}.header-links{gap:17px}.header-links a{font-size:12px}.header-arrow{display:none}.hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:31px;padding-bottom:62px}.hero-copy{padding:0}.hello{font-size:15px;margin-bottom:20px;line-height:1.6}.hero h1{font-size:clamp(46px,11.7vw,74px);line-height:1.23}.hero h1 .blue{margin-top:7px}.hero-subtitle{font-size:17px;margin-top:14px}.hero-description{font-size:13px;margin-top:11px}.hero .actions{margin-top:21px;gap:17px}.paper-button{font-size:15px;padding:12px 22px;min-height:48px}.hero-art{height:370px;min-height:0;margin:15px -20px 0 -20px}.hero-art img{object-fit:cover;object-position:60% center;mask-image:linear-gradient(to bottom,transparent,black 6%,black 86%,transparent),linear-gradient(to right,transparent,black 5%,black 95%,transparent);mask-composite:intersect}.label-top{top:8%;left:18%;font-size:22px}.label-right{right:8%;top:29%;font-size:22px}.hero-note{bottom:10px;right:9%;font-size:18px}.scene-number{bottom:0;left:8%;font-size:9px}.hero-doodle{inset:3% 0;width:100%;height:90%}.hero-side-note{display:none}.scroll-hint{bottom:19px;font-size:11px}.chapter-inner{width:100%;padding-inline:11px;gap:0}.chapter-links{width:100%;justify-content:space-between}.chapter-links a{padding:12px 17px;font-size:14px}.chapter-links a span{font-size:12px;margin-right:7px}.portfolio-link{display:none}.section{padding-top:39px;padding-bottom:46px}.split-section{display:flex;flex-direction:column;gap:26px}.scene-panel{position:relative;top:auto;display:grid;grid-template-columns:125px 1fr;align-items:center;column-gap:16px;min-height:130px}.scene-art{grid-column:1;grid-row:1/5;height:140px;width:150px;margin:-12px 0 -10px -21px}.scene-art .art-label{font-size:12px;padding:3px 8px;top:0;left:23%}.scene-index{grid-column:2;align-self:end;font-size:10px;margin-bottom:3px}.scene-panel h3{grid-column:2;font-size:17px;align-self:start}.scene-panel>p:not(.eyebrow){grid-column:2;font-size:12px;align-self:start;margin-top:0}.scene-note{display:none}.little-spark{font-size:36px;right:0;top:10px}.section-intro .eyebrow{font-size:11px;margin-bottom:8px}.section-intro h2{font-size:clamp(25px,6.4vw,39px);white-space:normal;line-height:1.4;margin-bottom:10px}.section-description{font-size:14px}.project-grid{margin-top:22px;gap:20px 13px}.project-cover{height:147px}.project-caption{gap:7px;padding:9px 2px 0}.project-caption h3{font-size:13px;line-height:1.5}.project-caption p{font-size:10px;line-height:1.6;margin-top:4px}.project-number{font-size:19px;line-height:1.5}.project-card{padding:6px 6px 12px}.mini-main h4{font-size:8px;white-space:nowrap}.mini-sidebar{padding:8px 3px;font-size:3px}.mini-sidebar b{font-size:4px}.mini-stats b{font-size:7px}.mini-stats span{font-size:4px}.mini-dashboard{inset:7px;grid-template-columns:19% 81%}.mini-main small{font-size:4px;white-space:nowrap}.mini-stats>div{padding:3px}.mini-chart svg{height:32px}.mini-topbar{font-size:4px;padding:5px 10px}.mini-bars{gap:3px;height:18px}.mini-bars i{width:5px}.cover-badge{font-size:8px;right:5px;top:5px;padding:1px 4px}.component-sheet{padding:13px 9px}.demo-buttons{font-size:7px}.demo-buttons b,.demo-buttons>span{padding:4px 5px}.demo-checkbox{font-size:6px}.demo-form{gap:8px}.demo-form>span{font-size:7px;padding-inline:6px}.demo-tabs{font-size:7px}.screen-cover{padding:8px}.screen-ui h4{font-size:8px;padding-top:6px}.screen-bottom{font-size:3px}.globe{height:86px;width:86px;top:37px}.screen-lines{top:42px;gap:9px}.more-projects{padding:19px 13px 13px;min-height:234px}.more-projects h3{font-size:17px}.more-projects>p{font-size:10px;max-width:110px;line-height:1.7}.more-link{font-size:10px}.paper-mountains{height:110px}.section-next{font-size:12px;margin-top:26px}.about-section{display:flex;flex-direction:column;padding-top:43px}.about-copy h2{font-size:clamp(27px,7.2vw,44px);line-height:1.4}.about-copy>.reveal>.eyebrow{font-size:11px}.about-intro{font-size:15px;margin-top:15px;max-width:95%}.skill-line{font-size:13px;gap:15px}.journey{margin-top:28px}.journey>h3{font-size:22px;margin-bottom:17px}.timeline li{padding-left:26px;padding-bottom:23px}.timeline time{font-size:13px}.timeline h4{font-size:17px;margin-top:3px}.timeline p{font-size:14px;margin-top:2px}.recent-work{font-size:13px;margin-top:22px}.resume-row{margin-top:14px;gap:18px}.resume-row .paper-button{font-size:14px;padding:11px 18px}.resume-row>p{font-size:11px;padding-left:0;border:0}.about-visual{width:100%;padding-top:12px;display:flex;flex-direction:column}.about-art{height:305px;margin:5px -20px -8px}.about-art .art-label{font-size:21px}.about-label-one{top:8%;left:9%}.about-label-two{top:12%;right:9%}.about-label-three{right:8%;bottom:17%}.interest-note{width:92%;padding:20px 23px}.interest-note .handwritten{font-size:20px}.interest-index{font-size:9px}.interests{gap:22px;font-size:13px}.interests small{display:inline;font-size:8px}.about-visual>.section-next{margin-left:4%;margin-top:27px}.explore-section{gap:27px}.exploration-art{width:155px;height:145px;margin-left:-23px}.exploration-art .art-label{font-size:11px;left:12%;top:0}.explore-section .scene-panel h3{font-size:19px}.explore-section .section-intro .eyebrow{font-size:13px}.explore-section .section-intro h2{font-size:clamp(24px,6.3vw,38px);margin-top:12px;margin-bottom:13px}.explore-grid{gap:16px;min-height:392px}.experiment-cover{height:119px}.ai-cover{padding:16px 10px;gap:8px}.tiny-wireframe{padding:10px 6px}.tiny-wireframe b{width:23px;height:26px}.tiny-wireframe>div{gap:4px}.tiny-wireframe div>span{height:24px}.tiny-wireframe>i{height:3px}.tiny-wireframe>div{margin-top:6px}.ai-cover>span:not(.tape){font-size:14px}.code-cover{padding:9px}.code-cover>div{padding:7px;font-size:10px}.code-prompt{font-size:7px;letter-spacing:0;margin-top:8px}.experiment-body{padding:12px}.experiment-body h3{font-size:16px}.experiment-body h3>span{display:none}.experiment-body p{font-size:11px}.experiment-link{font-size:10px;padding-top:13px}.tags span{font-size:8px;padding:1px 4px}.visual-experiment{padding:8px}.visual-experiment .experiment-cover{width:44%;min-height:120px}.visual-experiment .experiment-body{padding:3px 5px 3px 13px}.visual-experiment h3{font-size:16px}.visual-experiment p{font-size:11px}.sun{width:47px;height:47px}.explore-sign{font-size:23px;margin-top:21px}.contact-section{display:flex;flex-direction:column;align-items:stretch;padding-top:43px;padding-bottom:30px}.contact-copy>.eyebrow{font-size:13px;margin-bottom:17px}.contact-copy h2{font-size:clamp(34px,8.85vw,56px);line-height:1.35}.contact-copy h3{font-size:19px;margin-top:20px}.contact-copy .section-description{font-size:13px;margin-top:5px}.email-link{font-size:clamp(22px,6.4vw,37px);margin-top:23px;text-underline-offset:6px}.contact-copy .actions{gap:20px;margin-top:22px}.contact-copy .paper-button{min-width:140px;font-size:15px}.contact-links{margin-top:29px;font-size:14px;gap:26px}.contact-links a+a{padding-left:26px}.contact-art{height:360px;margin:18px -20px 0}.contact-label{font-size:26px;top:12%;left:15%}.flying-plane{width:88px;height:70px;right:10%;top:5px}.contact-note{bottom:0;right:9%;font-size:18px}.site-footer{padding-block:19px;flex-wrap:wrap;gap:10px}.site-footer .brand{gap:8px}.site-footer .brand strong{font-size:20px}.site-footer .brand span{font-size:8px}.site-footer>p{font-size:10px;order:3;width:100%;text-align:center;margin-top:4px}.back-top{font-size:11px;gap:7px}.back-top span{font-size:17px}dialog{padding:29px 22px;width:calc(100vw - 26px)}.dialog-close{margin:-15px -11px 0 0;width:35px;height:35px;font-size:26px}.dialog-heading{font-size:25px;padding-right:20px}.dialog-lead{font-size:14px}.dialog-section p{font-size:13px}.dialog-section h3{font-size:17px}.workflow{grid-template-columns:1fr;gap:10px}.workflow>div{padding:15px 18px}.workflow h3{font-size:16px;display:inline-block;margin-left:12px}.workflow p{font-size:12px}.demo-workbench{padding:20px 15px;gap:20px;grid-template-columns:1fr}.demo-paper{padding:28px 15px;width:75%;margin:10px auto}.demo-controls{text-align:center}.modal-landscape{height:170px}.palette-options button{font-size:12px;padding:7px 12px}.dialog-actions .paper-button{font-size:13px}.toast{font-size:13px}}
@media(max-width:360px){.page-width{width:calc(100% - 32px)}.site-header{padding-inline:16px}.brand span{display:none}.header-links{gap:19px}.hero h1{font-size:11.9vw}.hero-subtitle{font-size:15px}.chapter-links a{padding-inline:14px}.project-cover{height:132px}.project-caption h3{font-size:12px}.project-caption p{font-size:9px}.project-number{font-size:17px}.project-grid{gap:15px 10px}.more-projects{min-height:225px}.experiment-body h3{font-size:14px}.code-prompt{font-size:6px}.contact-copy .paper-button{min-width:130px}.contact-copy .actions{gap:14px}.interests{gap:15px}}
.scene-art img,.about-art img,.contact-art img{mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent),linear-gradient(to bottom,black 92%,transparent);mask-composite:intersect}.about-art img{object-fit:contain}.scene-art .art-label{top:-20px;left:4%}.hero-note{bottom:-9px}.hero-art{transform:none}.about-section{padding-top:50px}.contact-art .contact-note{bottom:-18px}
@media(max-width:640px){.scene-art .art-label{top:-4px;left:8%;font-size:11px}.hero-note{bottom:4px}.about-section{padding-top:43px}.contact-art .contact-note{bottom:0}.contact-label{left:3%;top:3%;font-size:23px}.scene-art img{mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent),linear-gradient(to bottom,black 93%,transparent)}}
/* Desktop: a centered 80% canvas with quieter display typography. */
@media(min-width:1024px){
  .page-width{width:80%;max-width:1600px}
  .site-header{padding-inline:max(10%,calc((100% - 1600px)/2))}
  .hero{min-height:calc(100svh - var(--header-height))}
  .hero h1{font-size:clamp(48px,4.8vw,72px)}
  .hello{font-size:18px}
  .hero-subtitle{font-size:21px}
  .hero-description{font-size:15px}
  .hero-art{height:clamp(440px,32vw,590px);min-height:0;margin-left:-32px;margin-right:0}
  .chapter-inner{gap:24px}
  .chapter-links{gap:12px;max-width:650px}
  .chapter-links a{padding-inline:18px}
  .split-section{gap:40px}
  .section-intro h2{font-size:clamp(29px,2.6vw,40px)}
  .about-copy h2{font-size:clamp(31px,3.2vw,46px)}
  .about-intro{font-size:17px}
  .about-art{height:clamp(380px,29vw,470px);margin-inline:-15px 0}
  .resume-row{flex-wrap:wrap;gap:18px}
  .explore-section .section-intro h2{font-size:clamp(29px,2.7vw,40px)}
  .scene-art{margin-inline:-15px;height:clamp(300px,25vw,380px)}
  .exploration-art{height:clamp(350px,28vw,430px)}
  .project-caption{gap:9px}
  .project-caption h3{font-size:clamp(14px,1.12vw,17px);white-space:normal}
  .project-caption p{white-space:normal}
  .project-caption .card-arrow{font-size:18px}
  .contact-copy h2{font-size:clamp(42px,4.2vw,62px)}
  .contact-copy h3{font-size:22px}
  .contact-copy .section-description{font-size:17px;white-space:normal}
  .email-link{font-size:clamp(27px,2.55vw,37px)}
  .contact-art{height:clamp(430px,32vw,550px);margin-inline:0}
}
/* The chapter bar takes over after the opening screen. */
html{scroll-padding-top:var(--chapter-height)}
.site-header{position:relative}
.chapter-nav{top:0}
.scene-panel{top:calc(var(--chapter-height) + 36px)}
.explore-grid{margin-top:32px}
.more-project-list{margin-top:40px;padding-top:25px;border-top:1px solid var(--line)}
.more-project-list h3{font-size:22px;display:inline-block;position:relative;margin-bottom:20px}
.more-project-list h3:after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:5px;border-bottom:2px solid #8dabe1;border-radius:50%;transform:rotate(-2deg)}
.more-project-list ul{list-style:none;margin:0;padding:0;display:grid;gap:19px}
.more-project-list li{display:flex;align-items:baseline;gap:17px;position:relative;padding-left:17px}
.more-project-list li:before{content:"⌒";position:absolute;left:0;top:2px;font-size:11px;color:#9aa2b4}
.more-project-list li a{font-size:15px;font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:#abb3c4;text-underline-offset:6px}
.more-project-list li a span{color:var(--blue);font-size:13px;margin-left:5px}
.more-project-list li p{font-size:14px;color:var(--muted)}
.more-project-list a:hover{color:var(--blue)}
.all-projects-link{display:inline-flex;gap:15px;align-items:center;font-size:13px;color:var(--blue);margin-top:25px}
.ai-platform-cover{background:#e5ecf8;padding:17px}
.service-preview{background:#f9fbff;height:100%;padding:15px 13px;border:1px solid #d1dcee;box-shadow:1px 5px 9px #1f355812}
.service-caption{font-size:7px;color:#5976a4;letter-spacing:.14em}
.service-preview h4{font-size:15px;margin:6px 0 11px;color:#263f72}
.service-search{border:1px solid #d2ddef;font-size:7px;padding:6px 9px;color:#8191aa;background:white}
.service-search>span{float:right;color:var(--blue)}
.service-tiles{display:flex;gap:7px;margin-top:12px}
.service-tiles>div{flex:1;border:1px solid #dae3f4;background:#edf2fc;padding:7px 4px;text-align:center}
.service-tiles b{display:block;color:#456bbe;font-size:18px;font-weight:400;line-height:1.3}
.service-tiles span{display:block;font-size:7px;color:#627397;margin-top:4px}
.trusted-space-cover{background:#edf0f6;padding:18px}
.space-preview{position:relative;height:100%;border:1px solid #d6deed;background:#f8faff;padding:12px}
.space-network{position:relative;height:120px;margin:0 auto;max-width:220px;background:linear-gradient(26deg,transparent 49.5%,#b3c5e4 50%,transparent 50.5%),linear-gradient(150deg,transparent 49.5%,#b3c5e4 50%,transparent 50.5%)}
.space-node,.space-core{position:absolute;padding:9px 12px;font-size:9px;border:1px solid #cfdaed;background:#edf2fc;color:#5b729b;box-shadow:1px 3px 7px #1a365612}
.space-core{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);background:#315db9;color:white;border:0;padding:14px}
.node-a{top:0;left:0}.node-b{top:4px;right:0}.node-c{bottom:0;right:7%}
.space-legend{display:flex;align-items:center;justify-content:center;gap:9px;font-size:7px;color:#7b89a1;margin-top:7px}
.space-legend i{width:3px;height:3px;background:#91a7ca;border-radius:50%}
.hardware-cover{background:#e9e9e7;padding:20px 14px}
.hardware-preview{height:100%;position:relative;padding:4px 25px 10px 0}
.meeting-display{height:100%;padding:13px 16px;border:6px solid #293647;border-radius:5px;background:#e9eff8;box-shadow:0 6px 10px #18233e1a}
.meeting-display>span{font-size:6px;letter-spacing:.15em;color:#7083a2}
.meeting-display h4{font-size:12px;color:#364b6e;margin-top:5px}
.meeting-people{display:flex;gap:8px;margin-top:13px}
.meeting-people i{display:block;flex:1;height:45px;background:radial-gradient(circle at 50% 35%,#7e99c5 7px,transparent 7.5px),radial-gradient(ellipse at 50% 100%,#7e99c5 19px,transparent 19.5px),#dce5f3;border-radius:3px}
.meeting-people i:nth-child(2){filter:hue-rotate(20deg)}
.meeting-tools{font-size:9px;letter-spacing:5px;color:#5578b2;text-align:center;margin-top:10px}
.meeting-mobile{position:absolute;right:3px;bottom:0;width:60px;height:108px;border:4px solid #39465a;border-radius:9px;background:white;padding:10px 5px;transform:rotate(5deg);box-shadow:2px 4px 7px #19274920}
.meeting-mobile>span{font-size:6px;display:block;color:#576b8d}
.meeting-mobile div{height:20px;background:#dce7f8;margin-top:9px;border-radius:2px}
.meeting-mobile i{display:block;height:4px;background:#e2e8f2;margin-top:6px}
.meeting-mobile b{display:block;background:#4267b7;color:white;font-size:5px;font-weight:400;text-align:center;margin-top:8px;padding:3px 0}
@media(min-width:1024px){
  .hero-art{left:calc(-1 * clamp(40px,5vw,88px))}
  .work-section{grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);gap:clamp(48px,4.6vw,76px)}
  .work-section .section-content{width:100%;max-width:820px;justify-self:end}
  .work-section .scene-art{display:flex;align-items:center;width:100%;max-width:315px;height:300px;margin:20px auto 30px}
  .work-section .scene-art img{height:auto;object-fit:contain}
  .work-section .scene-panel h3{font-size:23px}
  .work-section .scene-panel>p:not(.eyebrow){font-size:16px}
  .work-section .project-grid{gap:32px 26px}
  .work-section .project-cover{height:clamp(180px,14vw,210px)}
  .work-section .project-card{padding:9px 9px 16px}
  .work-section .project-caption{gap:9px}
  .work-section .section-intro h2{font-size:clamp(28px,2.4vw,38px)}
}
@media(min-width:641px) and (max-width:1023px){.hero-art{left:-28px}.work-section .scene-art{height:250px;margin-inline:0}.work-section .scene-art img{object-fit:contain}}
@media(max-width:1100px){.more-project-list li{flex-wrap:wrap;gap:4px 14px}.more-project-list li p{font-size:13px}.service-preview{padding:10px}.service-preview h4{font-size:11px;margin-bottom:8px}.service-tiles{margin-top:8px}.service-tiles b{font-size:15px}.space-network{height:100px}.meeting-display{padding:9px}.meeting-display h4{font-size:9px}.meeting-people i{height:35px}}
@media(max-width:640px){
  .scene-panel{top:auto}
  .explore-grid{margin-top:25px}
  .more-project-list{margin-top:30px;padding-top:22px}
  .more-project-list h3{font-size:19px}
  .more-project-list ul{gap:17px}
  .more-project-list li{display:block}
  .more-project-list li a{font-size:14px}
  .more-project-list li p{font-size:12px;margin-top:6px}
  .ai-platform-cover,.trusted-space-cover{padding:12px 8px 7px}
  .service-preview{padding:8px}
  .service-caption{font-size:5px;letter-spacing:.06em}
  .service-preview h4{font-size:9px;margin-top:6px;margin-bottom:8px}
  .service-search{font-size:5px;padding:4px}
  .service-tiles{gap:3px;margin-top:8px}
  .service-tiles>div{padding:4px 1px}
  .service-tiles b{font-size:12px}
  .service-tiles span{font-size:5px}
  .space-preview{padding:8px}
  .space-network{height:82px}
  .space-node{font-size:6px;padding:5px 7px}
  .space-core{font-size:7px;padding:9px}
  .space-legend{font-size:5px;gap:4px;margin-top:4px}
  .hardware-cover{padding:15px 8px}
  .hardware-preview{padding-right:15px}
  .meeting-display{padding:7px;border-width:4px}
  .meeting-display>span{font-size:4px}
  .meeting-display h4{font-size:7px;white-space:nowrap}
  .meeting-people{gap:4px;margin-top:8px}
  .meeting-people i{height:29px;background:radial-gradient(circle at 50% 35%,#7e99c5 4px,transparent 4.5px),radial-gradient(ellipse at 50% 100%,#7e99c5 11px,transparent 11.5px),#dce5f3}
  .meeting-tools{font-size:6px;letter-spacing:2px;margin-top:7px}
  .meeting-mobile{width:39px;height:77px;right:0;border-width:3px;padding:6px 3px}
  .meeting-mobile>span{font-size:4px}
  .meeting-mobile div{height:14px;margin-top:5px}
  .meeting-mobile i{height:3px;margin-top:4px}
  .meeting-mobile b{font-size:4px;margin-top:5px;padding:2px}
}
/* Quiet, independent floating preserves each paper label's original rotation. */
.motion-ready .art-label{--float-distance:-6px;animation:label-breathe 5.6s ease-in-out .4s infinite;animation-play-state:paused}
.motion-ready .label-right,.motion-ready .about-label-two{animation-duration:6.8s;animation-delay:1.2s;--float-distance:-8px}
.motion-ready .about-label-three{animation-duration:6.2s;animation-delay:.8s}
.motion-ready.has-motion-entered.is-motion-visible .art-label{animation-play-state:running}
.hero-doodle .draw-mask{fill:none;stroke:white;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.hero-doodle .draw-arrowhead{stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.motion-ready:not(.has-motion-entered) .draw-mask:not(.motion-finished){stroke-dashoffset:1}
.motion-ready:not(.has-motion-entered) .draw-arrowhead:not(.motion-finished){opacity:0}
.has-motion-entered .draw-mask:not(.motion-finished){animation:path-draw 1.5s cubic-bezier(.35,0,.35,1) .45s both}
.has-motion-entered .draw-build:not(.motion-finished){animation-delay:.85s;animation-duration:1.6s}
.has-motion-entered .draw-bottom:not(.motion-finished){animation-delay:1.55s;animation-duration:1.8s}
.has-motion-entered .draw-arrow:not(.motion-finished){animation-delay:.9s;animation-duration:1.05s}
.has-motion-entered .draw-arrowhead:not(.motion-finished){animation:arrow-tip-arrive .35s ease-out 1.82s both}
.handwritten.motion-ready:not(.has-motion-entered):not(.underline-finished):after{transform:scaleX(0) rotate(-3deg)}
.handwritten.motion-ready:after{transform-origin:left center}
.handwritten.has-motion-entered:not(.underline-finished):after{animation:handwritten-draw 1.2s cubic-bezier(.25,.6,.3,1) .35s both}
.hero-note.handwritten.has-motion-entered:not(.underline-finished):after{animation-delay:2.1s}
.motion-ready:not(.is-motion-visible) .draw-mask,.motion-ready:not(.is-motion-visible) .draw-arrowhead,.handwritten.motion-ready:not(.is-motion-visible):after{animation-play-state:paused}
.motion-page-paused .art-label,.motion-page-paused .draw-mask,.motion-page-paused .draw-arrowhead,.motion-page-paused .handwritten:after{animation-play-state:paused!important}
@keyframes label-breathe{0%,100%{translate:0 0}50%{translate:0 var(--float-distance)}}
@keyframes path-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes arrow-tip-arrive{from{opacity:0;translate:-3px 2px}to{opacity:1;translate:0 0}}
@keyframes handwritten-draw{from{transform:scaleX(0) rotate(-3deg)}to{transform:scaleX(1) rotate(-3deg)}}
@media(max-width:640px){.motion-ready .art-label{--float-distance:-4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal:not(.is-visible){opacity:1;transform:none}[data-parallax]{translate:none!important;transform:none!important}.demo-paper.is-active{transform:none!important}.motion-ready .art-label,.draw-arrowhead{translate:none!important}.hero-doodle .draw-mask{stroke-dashoffset:0!important}.hero-doodle .draw-arrowhead{opacity:1!important}.handwritten.motion-ready:after{transform:rotate(-3deg)!important}}

.credentials{margin-top:24px;color:var(--muted);font-size:14px}
.modal-landscape{overflow:hidden}