/* Dimensions and timing measured against the reference at 1280px. */
:root{color-scheme:dark;--bg:#0a0a0a;--surface:#0a0a0a;--text:#fafafa;--muted:#aaa;--line:#252525;--soft:#171717;--accent:#ccc;--ease:cubic-bezier(.22,1,.36,1)}
[data-theme=dark]{--bg:#0a0a0a;--surface:#0a0a0a;--text:#fafafa;--muted:#aaa;--line:#252525;--soft:#171717;--accent:#ccc}
html,html.lenis{height:auto;scroll-behavior:auto!important}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
body{font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;transition:none;position:relative;isolation:isolate;overflow-x:clip}button{font-family:inherit}body:before{content:'';position:absolute;inset:0 0 auto;height:900px;pointer-events:none;z-index:4;border:10px solid var(--bg);border-bottom:0;border-radius:58px 58px 0 0}body:after{content:'';position:absolute;top:0;left:0;right:0;height:10px;background:var(--bg);z-index:4;pointer-events:none}
.ambient{inset:0 0 auto;height:900px;border-radius:0;background:var(--bg)!important;z-index:-1;overflow:hidden}.ambient:after,.ambient i{display:none}.ambient canvas,.contact-flow canvas{width:100%;height:100%;display:block}.flow-fallback{background:radial-gradient(ellipse at 35% 0,#aaa,transparent 60%),linear-gradient(140deg,#ccc 0,transparent 55%)!important}[data-theme=dark] .flow-fallback{background:radial-gradient(ellipse at 35% 0,#555,transparent 60%)!important}
.header{height:0;padding:0;position:relative}.brand{display:none}.language{position:absolute;top:31px;right:35px;z-index:4;color:var(--muted);padding:10px;font-size:11px}.language span{display:none}.nav{top:24px;border:1px solid var(--line);padding:5px;gap:4px;background:var(--bg);box-shadow:0 1px 3px #0002;backdrop-filter:none;isolation:isolate}.nav a{position:relative;z-index:1;font-size:14px;font-weight:500;padding:8px 17px;min-width:70px;line-height:16px;text-align:center;color:var(--muted);transition:color .3s}.nav a:hover,.nav a[aria-current=page]{background:transparent;color:var(--text)}.nav-indicator{position:absolute;left:0;top:5px;bottom:5px;border-radius:50px;background:var(--soft);box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 5%,transparent);z-index:0;pointer-events:none}.nav #theme{position:relative;z-index:1;width:32px;height:32px;border:1px solid var(--line);margin:0;background:var(--surface)}#theme svg{position:absolute;transition:opacity .3s,transform .3s var(--ease)}#theme .moon-icon{transform:rotate(0) scale(1);opacity:1}#theme .sun-icon{transform:rotate(-90deg) scale(0);opacity:0}[data-theme=dark] #theme .moon-icon{transform:rotate(90deg) scale(0);opacity:0}[data-theme=dark] #theme .sun-icon{transform:rotate(0) scale(1);opacity:1}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}html[data-theme-anim]::view-transition-old(root){z-index:0}html[data-theme-anim]::view-transition-new(root){z-index:1;animation:theme-circle .7s var(--ease) both}@keyframes theme-circle{from{clip-path:circle(0 at var(--theme-x) var(--theme-y))}to{clip-path:circle(var(--theme-radius) at var(--theme-x) var(--theme-y))}}
.hero{max-width:1100px;margin:0 auto;padding:400px 40px 80px;animation:none}.hero h1,.hero .english-title{font-size:60px;line-height:1.05;letter-spacing:-.045em;font-weight:500;margin:0 0 24px}.hero p{font-size:22px;line-height:1.4;letter-spacing:-.035em;max-width:470px}.eyebrow{display:none}.hero-reveal{will-change:transform,opacity}.work-section{max-width:1100px;padding:0 40px;margin:auto}.project-grid{display:block;columns:2;column-gap:28px}.card-reveal{break-inside:avoid;margin-bottom:28px;display:inline-block;width:100%;vertical-align:top}.project-card{padding:14px;border-radius:24px;animation:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);box-shadow:0 1px 2px #0000000a;cursor:pointer;margin:0!important;position:relative}.project-card:hover,.project-card:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--text) 14%,transparent);box-shadow:0 10px 20px -8px #0000001f,0 4px 8px -4px #00000014}.card-top{font-size:14px;line-height:20px;margin:8px 4px 16px;gap:10px}.project-icon{width:32px;height:32px}.number{display:none}.cover-viewport{border-radius:16px;overflow:hidden;isolation:isolate;aspect-ratio:1.513}.cover{width:100%;height:100%;border-radius:0!important;transform:scale(1);transition:transform .7s var(--ease);will-change:transform}.project-card:hover .cover{transform:scale(1.06)}.project-card:hover .sky-window{transform:rotate(-4deg)}.project-card:hover .laser-poster{transform:rotate(3deg)}.project-card:hover .mini-site{transform:rotate(-4deg)}.project-card:hover .cover-lake img{transform:none}.project-card[data-card=laser] .cover-viewport{aspect-ratio:1.333}.project-card[data-card=lake] .cover-viewport{aspect-ratio:1.42}.project-card[data-card=v2] .cover-viewport{aspect-ratio:1.333}.card-body{padding:16px 4px 7px}.card-body h2{font-size:22px;line-height:1.3;letter-spacing:-.025em;font-weight:500;margin:0 0 10px;max-width:none}.card-body>p{font-size:15px;line-height:1.5;letter-spacing:-.02em;margin:0 0 23px}.card-bottom{border:0;padding:0}.card-role{font-size:12px;line-height:1.5;color:#888}.card-role br{display:none}.card-role br:after{content:' · '}.detail-button{font-size:11px;color:var(--muted)}.detail-button span:first-child{display:none}.detail-button span:last-child{font-size:19px}.work-end,.work-toolbar{display:none}.motion-reveal{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) var(--reveal-delay,0s),transform .8s var(--ease) var(--reveal-delay,0s)}.motion-reveal.is-visible{opacity:1;transform:translateY(0)}
footer{max-width:1100px;padding:0 40px;margin:80px auto 64px}.connect{position:relative;isolation:isolate;border:1px solid var(--line);border-radius:32px;padding:30px;display:grid;grid-template-columns:1.2fr 1fr;gap:24px;text-align:left;box-shadow:0 1px 2px #0001;overflow:hidden}.contact-flow{position:absolute;inset:6px;z-index:-1;opacity:.45;border-radius:26px;overflow:hidden;mask-image:radial-gradient(ellipse 90% 110% at 50% 50%,#000 0%,#000e 40%,#000b 70%,#0006 90%,#0002 100%)}[data-theme=dark] .contact-flow{opacity:.25}.connect h2{font-size:48px;line-height:1.05;letter-spacing:-.04em;margin:0 0 20px;font-weight:500}.connect-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}.connect-copy>p{font-size:22px;line-height:1.4;letter-spacing:-.035em;margin:0 0 30px;max-width:29ch;color:var(--muted)}.contact-actions{margin:0;justify-content:start;gap:12px;flex-wrap:wrap;align-items:center}.button{font-size:14px;line-height:22px;padding:10px 20px;border-radius:12px;gap:10px;white-space:nowrap;box-shadow:0 5px 15px #00000003;transition:background .3s,color .3s,box-shadow .3s}.button:hover{transform:none;box-shadow:0 6px 16px #0001}.contact-panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;padding:32px;min-width:0}.social-links{display:flex;gap:12px}.social-links a{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;font-size:20px;color:var(--muted);transition:border-color .3s,color .3s,transform .3s var(--ease)}.social-links a:hover{color:var(--text);border-color:var(--muted);transform:translateY(-2px)}.contact-panel .email{font-size:14px;margin:0}.contact-credit{font-size:11px;color:var(--muted);line-height:1.7;text-align:center}.contact-credit span{display:block}.footer-bottom{display:none}.morph-contact{position:relative;height:44px;width:112px;display:block;padding:0;transition:width .55s var(--ease);overflow:hidden}.contact-short,.contact-long{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:opacity .35s var(--ease),filter .35s var(--ease),transform .35s var(--ease)}.contact-long{opacity:0;filter:blur(8px);transform:translateY(4px);font-size:13px}.morph-contact:hover,.morph-contact:focus-visible{width:264px}.morph-contact:hover .contact-short,.morph-contact:focus-visible .contact-short{opacity:0;filter:blur(8px);transform:translateY(-4px)}.morph-contact:hover .contact-long,.morph-contact:focus-visible .contact-long{opacity:1;filter:blur(0);transform:none}
.home-hero{max-width:1100px;padding:224px 40px 112px;margin:auto;display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:center;text-align:left}.home-hello{font-size:20px;letter-spacing:-.025em}.home-hero h1{font-size:56px;line-height:1.08;letter-spacing:-.04em;margin:24px 0 20px;font-weight:500}.home-copy>p{font-size:22px;line-height:1.4;letter-spacing:-.025em;max-width:470px;color:var(--muted)}.home-actions{justify-content:start;margin-top:26px;gap:12px}.home-portrait{height:420px;padding:6px;border:1px solid var(--line);background:var(--surface);border-radius:32px;box-shadow:0 1px 2px #0002;overflow:hidden;transform-origin:center}.home-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;border-radius:26px;background:#ddd;filter:grayscale(1);transition:filter .7s var(--ease),transform .7s var(--ease)}.home-portrait:hover img{filter:grayscale(0);transform:scale(1.025)}.section-heading{display:block;margin:0 0 40px}.section-heading h2{font-size:48px;line-height:1.1;margin-bottom:16px;letter-spacing:-.04em}.section-heading p{font-size:22px;line-height:1.4;color:var(--muted);max-width:560px;margin:0}.all-projects{display:flex;width:max-content;margin:28px auto 0}.about-wrap{max-width:1100px;padding:0 40px}.about-intro p{font-size:18px;line-height:1.65}.about-intro h2{font-size:30px}.experience time{font-size:13px}.experience b{font-size:13px}.experience p{font-size:15px}.experience>h2{font-size:24px;letter-spacing:-.03em;color:var(--text)}.skills span{font-size:13px;transition:transform .3s var(--ease),background .3s}.skills span:hover{transform:translateY(-3px) rotate(-2deg);background:var(--line)}dialog[open]{animation:dialog-in .4s var(--ease)}dialog::backdrop{background:#0006;backdrop-filter:blur(8px)}@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}[data-theme=dark] .cover{filter:none}
@media(min-width:1500px){.hero{padding-top:400px}.work-section,footer{max-width:1100px}.cover{height:100%}}
@media(max-width:850px){body:before,body:after{display:none}.ambient{opacity:.5}.home-hero{gap:30px}.home-hero h1{font-size:42px}.home-portrait{height:350px}.connect{grid-template-columns:1fr}.contact-panel{min-height:200px}.hero h1{font-size:52px}}
@media(max-width:767px){.project-grid{columns:1}.work-section{max-width:650px}.home-hero{display:flex;flex-direction:column;align-items:stretch}.home-portrait{height:420px;max-width:420px;width:100%;margin:15px auto 0}.home-copy{max-width:560px}.card-reveal{margin-bottom:24px}.project-card[data-card] .cover-viewport{aspect-ratio:1.4}.about-wrap{max-width:650px}.about-intro{gap:30px}.about-intro p{font-size:17px}}
@media(max-width:639px){.language{top:83px;right:20px;font-size:11px;padding:4px}.nav{top:24px}.nav a{font-size:14px;padding:8px 15px;min-width:65px}.hero{padding:176px 24px 64px}.hero h1,.hero .english-title{font-size:44px;line-height:1.05;margin-bottom:20px;letter-spacing:-.055em}.hero p{font-size:20px;line-height:1.4;max-width:360px;letter-spacing:-.035em}.work-section{padding:0 24px}.project-card{padding:12px}.card-body h2{font-size:20px}.card-body>p{font-size:14px}.card-top{font-size:14px}.cover-viewport{aspect-ratio:1.4}.cover{height:100%}.sky-window{height:200px}.sky-content strong{font-size:23px}.floating-note{bottom:22px;right:13px}.laser-poster{height:210px}.laser-poster strong{font-size:28px}.mini-site{height:210px}.mini-site strong{font-size:22px}.mini-cards{margin-top:10px}.lake-text{font-size:30px;top:75px}.home-hero{padding:176px 24px 80px;gap:35px}.home-hero h1{font-size:44px}.home-hello{font-size:18px}.home-copy>p{font-size:20px}.home-portrait{height:350px}.home-actions{flex-wrap:wrap}.section-heading h2{font-size:36px}.section-heading p{font-size:20px}.section-heading{margin-bottom:32px}footer{margin:48px auto;padding:0 24px}.connect{padding:30px;gap:32px}.connect h2{font-size:36px}.connect-copy>p{font-size:18px;line-height:1.4}.contact-actions{gap:9px}.button{padding:10px 15px;font-size:13px}.morph-contact{padding:0;width:108px}.contact-panel{padding:26px 12px}.contact-panel .email{font-size:12px}.contact-long{font-size:11px}.morph-contact:hover,.morph-contact:focus-visible{width:232px}.about-wrap{padding:0 24px}.experience article{gap:12px}.experience{margin-top:50px}}
@media(prefers-reduced-motion:reduce){.motion-reveal{opacity:1;transform:none}.nav-indicator{transition:none}html[data-theme-anim]::view-transition-new(root){animation:none}.project-card:hover,.project-card:hover .cover{transform:none}dialog[open]{animation:none}}
/* Keep the outside of the rounded viewport clean, including the corner wedges. */
.ambient{clip-path:inset(10px 10px 0 round 50px 50px 0 0)}body:before{border-radius:0;border-top:0}
@media(max-width:850px){.ambient{clip-path:none}}