:root{--background: #000;--text: #b9b9b9;--bright: #f8f8f8;--muted: #858585;--line: #292b2d;--page-padding: clamp(24px, 3.75vw, 72px);--mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;--display: "Bebas Neue", Impact, sans-serif;--script: "Bonheur Royale", cursive;color:var(--text);background:var(--background);font:13px/1.5 var(--mono);font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}html,body,#root,.app{width:100%;height:100%}body{overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:disabled{cursor:default;opacity:.3}a,button{transition:color .2s,background .2s,border-color .2s}a:hover,button:hover:not(:disabled){color:var(--bright)}:focus-visible{outline:2px solid #c1b4ff;outline-offset:6px}img{display:block;max-width:100%}h1,h2,h3,p,ul{margin:0}strong{color:var(--bright);font-weight:600}.muted{color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-180%);z-index:100;background:#fff;color:#000;padding:12px}.skip-link:focus{transform:translateY(0)}.scene-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.scene-container canvas{display:block;width:100%;height:100%}.site-header{position:fixed;z-index:5;top:24px;left:var(--page-padding);right:var(--page-padding);display:grid;grid-template-columns:20.7% 39.6% 20.7% 19%;align-items:start;font-size:12px;line-height:1.4;pointer-events:none}.site-header a,.site-header button{pointer-events:auto}.wordmark{color:var(--bright);font:18px/1.1 var(--display);letter-spacing:1.4px;width:fit-content}.header-contact{display:flex;flex-direction:column}.header-contact a{text-decoration:underline;text-underline-offset:3px;color:var(--bright);width:fit-content}.header-stack{display:flex;flex-direction:column;color:var(--muted)}.header-stack span:first-child,.header-stack span:nth-child(2){color:var(--bright)}.site-header nav{grid-column:4;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.site-header nav>a{display:inline-flex;align-items:center;gap:7px}.site-header nav>a[aria-current]{color:var(--bright)}.site-header.compact .header-contact,.site-header.compact .header-stack{visibility:hidden}.language-toggle{display:flex;gap:7px;padding:5px 0 0;background:none;border:none;font-size:10px;color:var(--muted)}.language-toggle .chosen{color:var(--bright)}.mark{width:9px;height:9px;display:inline-grid;grid-template-columns:3px 3px;grid-template-rows:3px 3px;gap:2px;transform:rotate(35deg);vertical-align:middle}.mark i{display:block;background:currentColor;border-radius:50%}.mark i:last-child{opacity:.35}.main-content{position:relative;z-index:2;height:100dvh;padding:144px var(--page-padding) 48px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#555 transparent}.main-content:focus{outline:none}.main-content.home-main{padding:0}.home-page{min-height:720px;height:100dvh;position:relative}.hero-title{position:absolute;left:var(--page-padding);top:50%;transform:translateY(-54%);color:var(--bright);font-weight:400;width:35%}.script{font-family:var(--script);font-weight:400;display:block;line-height:.9}.condensed{font-family:var(--display);font-weight:400;display:block;line-height:1;text-transform:uppercase}.hero-title .script{font-size:clamp(96px,13.2vw,210px);line-height:.75}.hero-title .condensed{font-size:clamp(66px,9.1vw,145px);letter-spacing:-.02em;margin-top:-10px}.hero-copy{position:absolute;left:66.5%;width:25%;max-width:430px;top:50%;transform:translateY(-50%);font-size:12px;line-height:1.35}.hero-copy p+p{margin-top:16px}.hero-copy .button{margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:fit-content;padding:8px 16px;min-height:36px;border:1px solid #626262;border-radius:7px;background:#171719;color:var(--bright);white-space:nowrap;line-height:1.4}.button:hover:not(:disabled){color:#080808;background:var(--bright);border-color:var(--bright)}.button:active:not(:disabled){transform:translateY(1px)}.button.primary{color:#080808;background:#fff;border-color:#e5c4ea;box-shadow:1px 0 4px #6937b8,-1px 1px 3px #d892ae}.button.primary:hover{background:#eae7f2;box-shadow:1px 0 12px #6937b8,-1px 1px 8px #d892ae}.home-footer{position:fixed;z-index:3;left:var(--page-padding);right:var(--page-padding);bottom:24px;display:grid;grid-template-columns:20.7% 39.6% 20.7% 19%;align-items:end;font-size:12px;line-height:1.5}.local-time,.social-links{display:flex;flex-direction:column;align-items:start}.local-time>span:first-child{color:var(--muted)}.local-time>span:last-child{color:var(--bright)}.social-links{gap:3px}.motion-control{justify-self:start;background:none;border:0;padding:0;color:var(--muted);font-size:10px}.motion-control:disabled{opacity:.8}.motion-control-fixed{position:fixed;z-index:6;bottom:10px;left:var(--page-padding);padding:6px 9px;border-radius:4px;background:#000d}.copyright{font:12px/1.3 var(--display);color:var(--bright)}.section-label{display:flex;gap:10px;align-items:center;color:var(--bright);font-size:15px;margin-bottom:28px;white-space:nowrap}.section-label hr{height:1px;border:0;background:var(--line);flex:1;margin-left:8px}.projects-page{min-height:calc(100dvh - 192px);display:flex;flex-direction:column}.project-content{display:grid;grid-template-columns:36% 60%;gap:4%;flex:1}.project-details{padding-right:24px;padding-bottom:20px}.project-meta{font-size:10px;letter-spacing:.05em;color:var(--muted);display:flex;gap:24px;margin-bottom:8px}.project-details h1{color:var(--bright);font-size:26px;line-height:1.3;font-weight:500;margin-bottom:20px}.project-description{font-size:13px;line-height:1.55}.project-description p{margin-bottom:14px}.text-button{border:0;padding:0;background:none;color:var(--bright)}.detail-toggle{margin-bottom:16px;font-size:11px;border-bottom:1px solid #555;padding-bottom:2px}.extra-description{margin-bottom:20px}.tech-heading{font-size:15px;font-weight:400;color:var(--bright);margin-top:18px;margin-bottom:12px}.tech-list{padding-left:20px;color:#e2e2e2;line-height:1.6}.project-visit{margin-top:28px;background:#11111e;box-shadow:inset 0 0 15px #37336466}.project-gallery{align-self:start;min-width:0}.gallery-video{display:block;width:100%;aspect-ratio:16/9;min-height:200px;border:1px solid #27272d;background:#111}.gallery-image{position:relative;width:100%;display:block;aspect-ratio:16/10;padding:0;border:1px solid #27272d;overflow:hidden;background:#111}.gallery-image>img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s}.gallery-image:hover>img{transform:scale(1.025)}.image-hint{position:absolute;right:16px;bottom:16px;background:#000b;border:1px solid #ffffff30;border-radius:20px;padding:6px 12px;font-size:10px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s;color:#fff}.gallery-image:hover .image-hint,.gallery-image:focus-visible .image-hint{opacity:1;transform:none}.gallery-bottom{display:flex;justify-content:space-between;align-items:center;min-height:48px;background:#101012;padding:5px;gap:12px}.gallery-bottom>a{padding-right:10px;font-size:10px}.thumbnails{display:flex;gap:5px}.thumbnails button{width:68px;height:38px;padding:0;border:1px solid transparent;opacity:.5;background:#222}.thumbnails button.active{opacity:1;border-color:#fff}.thumbnails img{width:100%;height:100%;object-fit:cover;object-position:top}.project-controls{display:flex;justify-content:space-between;align-items:center;padding-top:16px;margin-top:24px;border-top:1px solid var(--line)}.project-controls .button{font-size:12px}.pagination{display:flex;gap:3px}.pagination button{display:grid;place-items:center;background:none;border:none;width:22px;height:36px;padding:0}.pagination button span{display:block;width:6px;height:6px;background:#666;transition:width .25s,background .25s}.pagination button.active span{width:13px;background:#fff}.image-dialog{padding:0;border:1px solid #555;background:#050505;width:min(92vw,1600px);max-height:92dvh;color:#fff}.image-dialog::backdrop{background:#000e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.image-dialog>img{width:100%;max-height:84dvh;object-fit:contain}.close-dialog{margin:12px 12px 12px auto;display:flex}.about-page{display:grid;grid-template-columns:39% 54%;gap:7%;padding-bottom:32px}.about-heading{position:sticky;top:16px;align-self:start;padding-top:45px}.about-heading h1{color:var(--bright);font-weight:400}.about-heading .script{font-size:clamp(90px,9vw,150px)}.about-heading .condensed{font-size:clamp(65px,7vw,108px)}.about-heading>p{margin:24px 0;font-size:12px}.about-content{padding-top:12px}.skill-groups{display:grid;gap:28px;margin-bottom:64px}.skill-groups h2{font:24px/1.2 var(--display);color:var(--bright);margin-bottom:12px}.skill-groups ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0}.skill-groups li{padding:8px 12px;border:1px solid #5557;background:#05050b55;border-radius:5px;font-size:12px}.experience-list{margin-bottom:60px}.experience-list details{border-bottom:1px solid var(--line);padding:20px 0}.experience-list details:first-child{padding-top:0}.experience-list summary{display:flex;cursor:pointer;gap:16px;justify-content:space-between;align-items:center;list-style:none}.experience-list summary::-webkit-details-marker{display:none}.experience-list summary>span:first-child{display:flex;flex-direction:column;gap:5px}.experience-list summary strong{font-size:18px;font-weight:400}.experience-list summary span span,.experience-date{font-size:10px;color:var(--muted)}.experience-list .expand-sign{color:#fff;padding-left:12px;font-size:20px;display:inline-block;transition:transform .2s}.experience-list details[open] .expand-sign{transform:rotate(45deg)}.experience-list ul{margin-top:20px;padding-left:18px;font-size:12px;line-height:1.7}.experience-list li+li{margin-top:14px}.education-list{display:grid;gap:24px}.education-list h2{color:var(--bright);font-size:16px;margin-bottom:8px;font-weight:400}.education-list p{font-size:12px;margin-top:5px}.contact-callout{margin-top:64px;border-top:1px solid var(--line);padding-top:28px;display:flex;flex-direction:column;gap:12px}.contact-callout>span:first-child{color:var(--bright);font:40px/1.2 var(--display)}.contact-callout>span:last-child{text-decoration:underline;text-underline-offset:5px}.writing-page{max-width:1184px;margin:0 auto}.writing-page>h1{color:var(--bright);margin:15px 0 52px;font-weight:400}.writing-page>h1 .script{font-size:110px}.writing-page>h1 .condensed{font-size:72px}.post-list{margin-bottom:72px}.post-link{display:grid;grid-template-columns:150px 1fr 40px;padding:28px 0;gap:24px;border-bottom:1px solid var(--line);align-items:start}.post-date{color:var(--muted);font-size:12px;padding-top:4px}.post-link h2{font-size:24px;line-height:1.4;color:var(--bright);font-weight:400}.post-link p{margin-top:12px;max-width:650px;font-size:13px;line-height:1.6}.post-arrow{font-size:25px;justify-self:end;transition:transform .3s}.post-link:hover .post-arrow{transform:translate(4px,-4px)}.bookshelf{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}.bookshelf figure{margin:0;min-width:0}.bookshelf img{height:260px;width:100%;object-fit:contain;object-position:bottom;filter:saturate(.8);transition:transform .3s}.bookshelf figure:hover img{transform:translateY(-8px)}.bookshelf figcaption{display:flex;flex-direction:column;gap:5px;margin-top:20px;text-align:center;color:var(--bright);font-size:12px}.bookshelf figcaption small{color:var(--muted);font-size:10px}.article-page{max-width:780px;margin:0 auto;padding-top:25px;padding-bottom:80px}.back-link{color:var(--bright);display:inline-block;margin-bottom:32px}.article-meta{margin-bottom:20px;font-size:12px}.translation-note{padding:12px 16px;margin-bottom:24px;border-left:2px solid #8477b8;background:#171322}.article-prose{font-size:15px;line-height:1.9}.article-prose h1{font-size:38px;line-height:1.3;font-weight:400;color:#fff;margin-bottom:36px}.article-prose h2{font-size:24px;line-height:1.5;margin:42px 0 18px;color:#fff;font-weight:400}.article-prose h3{font-size:18px;line-height:1.5;margin:28px 0 16px;color:#fff}.article-prose p,.article-prose ul,.article-prose ol,.article-prose pre{margin-bottom:22px}.article-prose a{color:#dfd7ff;text-decoration:underline;text-underline-offset:3px}.article-prose pre{padding:20px;background:#111;border:1px solid #333;overflow:auto;font-size:12px}.article-prose code{font-family:var(--mono);color:#ddd}.article-prose blockquote{border-left:2px solid #777;margin-left:0;padding-left:24px}.page-writing:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;background:#0006;pointer-events:none}.language-zh{font-family:var(--mono),"PingFang SC","Microsoft YaHei",sans-serif}@media(min-width:1600px){:root{font-size:15px}.hero-copy{font-size:14px}.project-description{font-size:15px}}@media(max-width:1024px){.site-header{grid-template-columns:22% 43% 15% 20%}.header-stack{display:none}.hero-title .script{font-size:11vw}.hero-title .condensed{font-size:7.6vw}.hero-copy{left:68%;width:27%;font-size:11px}.home-footer{grid-template-columns:22% 43% 15% 20%}.project-content{grid-template-columns:38% 58%}.project-details{padding-right:0}.project-description{font-size:12px}.gallery-image{aspect-ratio:4/3}.about-page{grid-template-columns:35% 60%;gap:5%}.about-heading .condensed{font-size:6.2vw}.about-heading>p{max-width:200px}.experience-list summary{align-items:start;flex-direction:column;gap:8px}}@media(max-width:767px){:root{--page-padding: 24px}.site-header{top:22px;display:flex;justify-content:space-between;align-items:start}.wordmark{font-size:18px}.header-contact,.header-stack{display:none}.site-header nav{align-items:flex-end;gap:5px;font-size:13px}.language-toggle{font-size:10px;padding-top:8px}.main-content{padding-top:174px;padding-bottom:40px}.main-content.home-main{overflow-y:auto}.home-page{min-height:850px;height:100dvh}.hero-title{top:160px;left:0;width:100%;text-align:center;transform:none}.hero-title .script{font-size:clamp(84px,23vw,128px);line-height:.85}.hero-title .condensed{font-size:clamp(56px,15.6vw,88px)}.hero-copy{top:500px;left:9%;width:82%;max-width:none;transform:none;font-size:12px;line-height:1.55}.hero-copy:before{content:"";position:absolute;top:-24px;right:-20px;bottom:-24px;left:-20px;z-index:-1;background:#000b;filter:blur(18px);pointer-events:none}.hero-copy .button{margin-top:24px}.home-footer{position:absolute;top:760px;bottom:auto;left:9%;right:9%;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;font-size:10px}.social-links{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:8px 12px}.motion-control{font-size:9px}.copyright{text-align:right;font-size:10px}.page-home{overflow-y:auto;min-height:850px}.page-home .main-content{height:850px;overflow:visible}body:has(.page-home){overflow-y:auto}.section-label{font-size:13px;margin-bottom:24px}.project-content{display:flex;flex-direction:column;gap:30px}.project-details{order:2;padding-bottom:0}.project-gallery{width:100%;order:1}.gallery-image{aspect-ratio:16/11}.project-details h1{font-size:26px}.project-description{font-size:12px;line-height:1.65}.project-controls{gap:12px;flex-wrap:wrap}.project-controls .button{font-size:11px;padding:8px 12px}.project-controls .button>span:not([aria-hidden]){display:none}.project-controls .button>span[aria-hidden]{font-size:20px}.pagination{gap:2px}.pagination button{width:26px}.project-controls .button{min-width:44px;min-height:44px}.about-page{display:block}.about-heading{position:static;padding-top:10px;margin-bottom:56px}.about-heading .script{font-size:98px}.about-heading .condensed{font-size:78px}.about-heading>p{max-width:none}.about-content{background:linear-gradient(transparent,#0009 160px)}.skill-groups{gap:24px}.skill-groups li{font-size:11px}.writing-page>h1 .script{font-size:90px}.writing-page>h1 .condensed{font-size:48px}.post-link{grid-template-columns:1fr 24px;gap:12px}.post-date{grid-column:1 / -1}.post-link h2{font-size:20px}.post-link p{font-size:12px}.bookshelf{grid-template-columns:repeat(2,1fr);gap:32px 20px}.bookshelf img{height:200px}.article-page{padding-top:0}.article-prose{font-size:13px}.article-prose h1{font-size:28px}.article-prose h2{font-size:22px}.image-dialog{width:96vw}.image-hint{opacity:1;transform:none;font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}:root{--pixel: "Silkscreen", "JetBrains Mono", monospace;--accent: #8ba0ff}.webgl-scene{opacity:0}.webgl-scene--ready{opacity:1}.webgl-scene--still,.webgl-scene--failed{transition:none}.wordmark{font-family:var(--pixel);font-size:14px;line-height:1.35;letter-spacing:0}.hero-title .script,.hero-title .condensed{font-family:var(--pixel);font-size:clamp(42px,5.7vw,94px);line-height:1.08;letter-spacing:-.07em}.hero-title .condensed{margin-top:12px;color:var(--accent)}.hero-availability{color:var(--muted);font-size:10px}.mark{transform:none}.mark i,.button,.skill-groups li,.image-hint,.motion-control-fixed{border-radius:0}.button.primary{background:#dce3ff;border-color:#dce3ff;box-shadow:3px 3px #3b54c6}.button.primary:hover{background:#fff;box-shadow:3px 3px #8ba0ff}.button:active:not(:disabled){transform:translate(2px,2px)}.site-header nav>a[aria-current],.section-label>span:first-child{color:var(--accent)}.copyright{font-family:var(--pixel);font-size:10px;line-height:1.7}.page-home .motion-control-fixed{left:64%;bottom:25px;padding:0;background:transparent}.about-heading .script,.writing-page>h1 .script{font-family:var(--pixel);font-size:clamp(24px,3.4vw,52px);line-height:1.25;letter-spacing:-.045em}.about-heading .condensed,.writing-page>h1 .condensed{font-family:var(--pixel);font-size:clamp(32px,4vw,64px);line-height:1.2;letter-spacing:-.06em;color:var(--accent);margin-top:12px}.skill-groups h2,.tech-heading{font-family:var(--pixel);font-size:15px;line-height:1.5}.project-details h1{font-family:var(--pixel);font-size:clamp(22px,2.1vw,34px);letter-spacing:-.05em}@media(max-width:1024px)and (min-width:768px){.hero-title .script,.hero-title .condensed{font-size:5.4vw}}@media(max-width:767px){.wordmark{font-size:13px}.hero-title .script,.hero-title .condensed{font-size:clamp(40px,11vw,72px);line-height:1.05}.hero-title .condensed{margin-top:6px}.hero-copy{top:510px}.hero-copy p+p{margin-top:12px}.hero-copy .button{margin-top:20px}.page-home .motion-control-fixed{position:absolute;top:850px;bottom:auto;left:9%;font-size:10px}.home-footer{top:770px;align-items:start}.home-page,.page-home{min-height:900px}.page-home .main-content{height:900px}.home-footer>div:empty{display:none}.copyright{grid-column:2;font-size:9px}.about-heading .script{font-size:32px}.about-heading .condensed{font-size:clamp(32px,9.8vw,48px)}.writing-page>h1 .script{font-size:clamp(24px,8vw,38px)}.writing-page>h1 .condensed{font-size:clamp(19px,5.4vw,30px)}}
