@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";.portfolio-main{padding-top:72px;overflow:hidden;background:#f6f4ef;color:#172024;font-family:DM Sans,system-ui,sans-serif}.portfolio-main *{box-sizing:border-box}.copy-en{display:block}.copy-zh,html[lang=zh-CN] .copy-en{display:none}html[lang=zh-CN] .copy-zh{display:block}.portfolio-main h1,.portfolio-main h2,.portfolio-main h3{font-family:Space Grotesk,system-ui,sans-serif;margin:0;color:inherit;background:none;-webkit-text-fill-color:currentColor;line-height:1.03;letter-spacing:-.055em}.portfolio-main p{line-height:1.6}.portfolio-main a{text-decoration:none}.portfolio-main button{cursor:pointer}.portfolio-main :focus-visible{outline:3px solid #dd8663;outline-offset:4px}.story{min-height:calc(100vh - 72px);position:relative;padding:clamp(64px,8vw,128px) clamp(24px,7vw,120px);display:flex;align-items:center}.story-inner{width:min(100%,1440px);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);gap:clamp(48px,7vw,130px);align-items:center}.story-eyebrow,.page-eyebrow{display:block;text-transform:uppercase;font-size:.78rem;font-weight:700;letter-spacing:.22em;margin-bottom:24px}.story h1{font-size:clamp(4.2rem,9vw,10rem)}.story h2{font-size:clamp(3.5rem,7vw,8rem)}.story-lead{max-width:640px;font-size:clamp(1.15rem,1.7vw,1.55rem);margin:28px 0 36px;opacity:.82}.story-number{position:absolute;bottom:32px;left:clamp(24px,7vw,120px);font-size:.75rem;letter-spacing:.16em;opacity:.65}.story-scroll{position:absolute;bottom:32px;right:clamp(24px,7vw,120px);font-size:.75rem;letter-spacing:.16em;opacity:.65}.story-hero{background:#f6f4ef;overflow:hidden}.story-hero .story-inner{position:relative;z-index:1}.hero-kicker{display:flex;gap:12px;align-items:center;margin-bottom:30px;font-weight:700}.hero-kicker:before{content:"";width:34px;height:2px;background:#cf7655}.hero-portrait{position:relative;width:min(100%,510px);aspect-ratio:4/5;margin:auto;background:radial-gradient(circle at 51% 42%,#f5e8d9 0 30%,#dce7e4 68%,#cbdad9);border-radius:240px 240px 22px 22px;overflow:hidden;box-shadow:25px 25px #e9a280}.hero-portrait:before{content:"";position:absolute;width:86%;aspect-ratio:1;top:16%;left:7%;border:1px solid rgb(255 255 255 / 55%);border-radius:50%;box-shadow:0 0 0 22px #ffffff1f}.portrait-figure{position:absolute;inset:0;animation:portrait-arrive .9s cubic-bezier(.2,.7,.2,1) both,portrait-breathe 5.5s ease-in-out .9s infinite}.portrait-figure img{width:100%;height:100%;object-fit:contain;object-position:center bottom;transition:transform .4s ease}.hero-portrait:hover .portrait-figure img{transform:scale(1.025) rotate(-1deg)}@keyframes portrait-arrive{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes portrait-breathe{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.portrait-caption{position:absolute;z-index:1;bottom:18px;left:18px;right:18px;padding:14px 16px;background:#f6f4ef;border-radius:8px;display:flex;justify-content:space-between;font-weight:700;font-size:.85rem}@media (prefers-reduced-motion: reduce){.portrait-figure{animation:none}.portrait-figure img{transition:none}.hero-portrait:hover .portrait-figure img{transform:none}}.hero-links,.story-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-elsewhere{display:flex;flex-wrap:wrap;gap:6px 18px;margin:26px 0 0;padding:0;list-style:none}.hero-elsewhere a{display:inline-flex;align-items:center;gap:7px;color:inherit;font-size:.9rem;opacity:.62;text-decoration:none;transition:opacity .2s}.hero-elsewhere a:hover,.hero-elsewhere a:focus-visible{opacity:1}.hero-elsewhere i{font-size:1rem}.pill-link{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:13px 20px;border:1px solid currentColor;border-radius:100px;color:inherit;font-weight:700;font-size:.9rem;transition:transform .2s,background .2s}.pill-link:hover{transform:translateY(-3px)}.pill-link.primary{background:#172024;color:#fff;border-color:#172024}.pill-link.light{background:#f4f0e7;color:#162325;border-color:#f4f0e7}.story-ktv{background:#191a2b;color:#f7e9de}.story-ktv .accent{color:#ed8e6f}.ktv-art{border-radius:26px;overflow:hidden;box-shadow:0 25px 70px #00000040}.story-wave{background:#e2ebe8;color:#102e30}.story-wave .accent{color:#b24f4b}.wave-art{position:relative;height:470px;display:flex;align-items:center;justify-content:center}.wave-art svg{width:100%;max-width:650px;overflow:visible}.wave-art circle{filter:drop-shadow(0 10px 20px #4a8b7b55)}.wave-pulse{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 5s ease-in-out infinite}@keyframes draw{45%,75%{stroke-dashoffset:0}to{stroke-dashoffset:-900}}.wave-art-label{position:absolute;bottom:10px;left:0;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase}.story-guqin{background:#2c392f;color:#f3ead7}.story-guqin .accent{color:#ddbc84}.guqin-art{height:500px;position:relative;display:grid;place-items:center}.guqin-board{width:80%;height:92%;border-radius:50% 50% 45% 45%/10% 10% 12% 12%;background:linear-gradient(95deg,#1f1613,#68432c 18%,#3f291e 45%,#88583a 74%,#251915);transform:rotate(18deg);box-shadow:25px 35px 30px #101b1699;border:3px solid #af8c65;display:flex;justify-content:space-evenly;padding:25px 15%}.guqin-board i{height:100%;width:1px;background:#e2cda9;box-shadow:1px 0 3px #fff8}.guqin-art-label{position:absolute;right:4%;top:12%;font-family:serif;font-size:3rem;writing-mode:vertical-rl;letter-spacing:.3em;color:#e0c49a}.story-mapping{background:#e6e0d8;color:#342d3c}.story-mapping .accent{color:#8d68a3}.map-art{height:480px;display:grid;place-items:center;position:relative;container-type:inline-size}.map-orbit{position:absolute;border:1px solid #9c8ca5;border-radius:50%;width:80%;aspect-ratio:1;max-width:400px}.map-orbit:nth-child(2){width:58%;transform:rotateX(50deg)}.map-orbit:nth-child(3){width:35%;transform:rotateY(55deg)}.map-core{z-index:1;width:min(170px,37cqi);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 30% 25%,#d9b5ea,#715285 70%);box-shadow:0 0 70px #9076a766;color:#fff;font-family:Space Grotesk;font-size:3rem}.map-tag{position:absolute;z-index:2;transform:translate(-50%,-50%);padding:.55em 1em;border-radius:100px;background:#f8f3ed;font-size:min(calc(.64rem + var(--w) * .5rem),calc(2.2cqi + var(--w) * 1.75cqi));font-weight:700;white-space:nowrap;opacity:calc(.62 + var(--w) * .38);box-shadow:0 7px 20px #342d3c20}.story-more{min-height:60vh;background:#171f22;color:#f4f1e8}.story-more .story-inner{grid-template-columns:1fr 1fr}.more-links{display:grid;gap:16px}.more-links a{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid #ffffff44;color:inherit;font-size:1.1rem}.more-links a:hover{color:#e9aa81}.more-email{display:grid;gap:4px}.more-email small{font-size:.72rem;font-weight:500;opacity:.65}.portfolio-footer{display:flex;justify-content:space-between;gap:20px;padding:32px clamp(24px,7vw,120px);background:#111619;color:#f4f1e8;font-size:.85rem}.portfolio-footer a{color:inherit}.subpage{min-height:calc(100vh - 72px);padding:clamp(72px,8vw,120px) clamp(24px,7vw,120px);background:#f6f4ef;color:#172024}.subpage-inner{max-width:1250px;margin:auto}.subpage h1{font-size:clamp(3.5rem,7vw,7rem);max-width:900px}.subpage-intro{font-size:1.25rem;max-width:760px;opacity:.76;margin:30px 0 70px}.subpage-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.subpage-card{border-top:1px solid #33413b55;padding:28px 0}.subpage-card h2{font-size:2rem;margin-bottom:14px}.subpage-card p{opacity:.7}.personal-page{padding-top:clamp(36px,4.5vw,64px)}.personal-page .subpage-intro{margin:18px 0 34px}.subpage-card a{color:#a75942;font-weight:700}.footer-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 28px}.footer-friends{display:inline-flex;align-items:center;gap:8px;color:#f4f1e8b3}.footer-friends a{color:#f4f1e8;text-decoration:underline;text-underline-offset:3px}.page-section{margin-top:70px}.page-section h2{font-size:clamp(2.2rem,4vw,4rem);margin-bottom:28px}@media (max-width: 900px){.story-inner,.story-more .story-inner{grid-template-columns:1fr}.story{min-height:0;padding-top:80px;padding-bottom:100px}.story-hero{min-height:calc(100vh - 64px)}.hero-portrait{max-width:420px}.ktv-art,.guqin-art,.map-art,.wave-art{height:370px;min-height:370px}.subpage-grid{grid-template-columns:1fr;gap:10px}}@media (max-width: 720px){.portfolio-main{padding-top:64px}.story h1{font-size:clamp(3.5rem,17vw,6rem)}.story h2{font-size:clamp(3rem,14vw,5rem)}.story-lead{font-size:1.08rem}.story-number,.story-scroll{bottom:18px}.story-scroll{display:none}.ktv-art{min-height:300px;height:300px}.ktv-disc{width:160px;font-size:3rem}.guqin-art{height:320px;min-height:320px}.wave-art{height:250px;min-height:250px}.map-art{height:330px;min-height:330px}.map-core{width:125px;font-size:2rem}.portfolio-footer{flex-direction:column}}html[lang=zh-CN] .portfolio-main{font-family:Microsoft YaHei UI,PingFang SC,Noto Sans CJK SC,system-ui,sans-serif}html[lang=zh-CN] .portfolio-main h1,html[lang=zh-CN] .portfolio-main h2,html[lang=zh-CN] .portfolio-main h3{font-family:Microsoft YaHei UI,PingFang SC,Noto Sans CJK SC,system-ui,sans-serif;font-weight:600;letter-spacing:-.025em;line-height:1.18;text-wrap:balance}html[lang=zh-CN] .story h1{font-size:clamp(3.7rem,6vw,7rem)}html[lang=zh-CN] .story-hero h1 span{white-space:nowrap}html[lang=zh-CN] .story h2{font-size:clamp(3rem,5.7vw,6.5rem)}html[lang=zh-CN] .story-guqin h2{font-size:clamp(2.9rem,5.1vw,5.6rem)}html[lang=zh-CN] .subpage h1{font-size:clamp(3rem,5.5vw,5.7rem)}html[lang=zh-CN] .story-lead,html[lang=zh-CN] .subpage-intro{line-height:1.8}html[lang=zh-CN] .story-eyebrow,html[lang=zh-CN] .page-eyebrow{letter-spacing:.08em}@media (max-width: 720px){html[lang=zh-CN] .story h1{font-size:clamp(3.1rem,12vw,5rem)}html[lang=zh-CN] .story h2{font-size:clamp(2.7rem,10vw,4.5rem)}}@media (prefers-reduced-motion: reduce){.wave-pulse{animation:none;stroke-dashoffset:0}.pill-link{transition:none}}html.dark .portfolio-main,html.dark .story-hero,html.dark .subpage,html.dark .demo-page{background:#10191b;color:#f3f0e8}html.dark .hero-portrait{background:radial-gradient(circle at 51% 42%,#56666a 0 30%,#303f46 68%,#223138)}html.dark .portrait-caption{background:#182527;color:#f3f0e8}html.dark .pill-link.primary{background:#f3f0e8;border-color:#f3f0e8;color:#172024}html.dark .project-other-grid a:hover{background:#263235}.story-ktv{background:radial-gradient(circle at 80% 30%,#342033 0,transparent 38%),repeating-linear-gradient(95deg,#ffffff05 0 1px,transparent 1px 6px),#191a2b}.story-ktv .story-inner{grid-template-columns:minmax(0,1fr);gap:clamp(34px,5vw,70px)}.ktv-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:0 clamp(30px,5vw,80px);align-items:end}.ktv-intro .story-eyebrow{grid-column:1 / -1}.ktv-intro .story-lead{margin:0 0 12px}.ktv-showcase-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.ktv-demo-label{font-size:.8rem;font-weight:700;letter-spacing:.14em}.ktv-art{min-height:0;aspect-ratio:16 / 9;background:#07070c}.ktv-art video{display:block;width:100%;height:100%;object-fit:contain}.ktv-rights-note{max-width:850px;margin:18px 0 0;color:#c8c2cd;font-size:.78rem}@media (max-width: 900px){.ktv-intro{grid-template-columns:1fr}.ktv-intro .story-lead{margin:26px 0 0}.story-ktv .ktv-art{height:auto;min-height:0}}@media (max-width: 620px){.ktv-showcase-heading{align-items:flex-start;flex-direction:column}.story-ktv .ktv-art{border-radius:12px}}.story-wave{background:radial-gradient(ellipse at 65% 48%,#c7ded6,transparent 45%),repeating-linear-gradient(0deg,#15434308 0 1px,transparent 1px 17px),#e2ebe8}.story-guqin{background:radial-gradient(circle at 80% 40%,#52604c 0,transparent 45%),repeating-linear-gradient(93deg,#ffffff05 0 1px,transparent 1px 8px),#253229}.guqin-art{border-radius:22px;background:linear-gradient(180deg,transparent 55%,#111c16a8),url(/guqin-room.png) 37% center / cover;box-shadow:0 28px 70px #111c1666;overflow:hidden}.story-mapping{background:radial-gradient(circle at 76% 34%,#f2e5ef 0,transparent 38%),repeating-radial-gradient(circle at 85% 50%,#4b35630b 0 1px,transparent 1px 16px),#e6e0d8}.guqin-surface{background:linear-gradient(90deg,#1c2923f2,#1c2923d0),url(/guqin-room.png) center / cover}.story-utilities{min-height:90vh;background:radial-gradient(circle at 20% 0%,#e4e7e3,transparent 35%),#f0f0eb;color:#1f282b}.utilities-inner{width:min(100%,1440px);margin:auto;display:grid;grid-template-columns:minmax(300px,.75fr) 1.25fr;align-items:center;gap:clamp(50px,7vw,130px)}.utilities-heading .story-lead{max-width:500px}.utility-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}.utility-more{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-30px}.utility-more a{display:grid;align-content:start;gap:11px;min-height:190px;padding:22px;border:1px solid #18303429;border-radius:14px;background:#ffffff80;color:#1f282b;transition:transform .2s,background .2s}.utility-more a:hover{transform:translateY(-4px);background:#fff}.utility-more span{font-size:.67rem;letter-spacing:.13em;font-weight:700;opacity:.58}.utility-more strong{font-size:1.35rem;line-height:1.1}.utility-more small{line-height:1.4;opacity:.7}.utility-more b{align-self:end;font-size:.75rem;margin-top:7px}.utility-card{min-width:0;min-height:470px;border-radius:20px;padding:23px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .25s ease;overflow:hidden}.utility-card:hover{transform:translateY(-7px)}.subtitle-card{background:#213643;color:#f4f5f0}.mask-card{background:#d4dccc;color:#19302c}.utility-index{font-size:.75rem;font-weight:700;letter-spacing:.17em}.utility-info{display:grid;gap:14px}.utility-info strong{font-size:clamp(1.5rem,2.3vw,2.4rem);letter-spacing:-.04em;line-height:1.08}.utility-info>span{font-size:.84rem;font-weight:700}.subtitle-preview{min-height:200px;padding:15px;border:1px solid #ffffff59;border-radius:12px;background:radial-gradient(circle at 80% 25%,#7d9aa0,transparent 43%),#0d1b25;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 15px 30px #0003}.preview-time{font-size:.66rem;letter-spacing:.1em;color:#d6e9e4}.subtitle-lines{display:grid;gap:7px;text-align:center;font-size:.8rem;line-height:1.3}.subtitle-lines span:last-child{color:#f7cf90}.preview-timeline{display:flex;height:20px;align-items:end;gap:4px;border-top:1px solid #ffffff7a;padding-top:6px}.preview-timeline i{flex:1;height:6px;border-radius:2px;background:#78bfbb}.preview-timeline i:nth-child(2n){height:10px;background:#eebc88}.mask-preview{position:relative;height:205px;border-radius:12px;background:linear-gradient(135deg,#70918c,#abc5b9 45%,#d9d4bb);overflow:hidden;box-shadow:0 15px 30px #3651482b}.mask-original,.mask-applied{position:absolute;z-index:2;top:12px;left:12px;padding:5px 7px;background:#17302dc9;color:#fff;border-radius:3px;font-size:.55rem;letter-spacing:.1em}.mask-applied{inset:auto 12px 12px auto;background:#e9f5cc;color:#1d4239}.mask-subject{position:absolute;top:27px;left:50%;width:100px;height:200px;transform:translate(-50%)}.mask-head{position:relative;z-index:1;width:70px;height:80px;margin:auto;border-radius:44% 44% 48% 48%;background:repeating-linear-gradient(0deg,#617f76 0 5px,#b9c9ba 5px 10px,#698d86 10px 15px);filter:blur(2px)}.mask-body{width:100px;height:130px;border-radius:50% 50% 0 0;background:#405d59}@media (max-width: 1100px){.utilities-inner{grid-template-columns:1fr}.utility-more{margin-top:0;grid-template-columns:repeat(2,1fr)}}@media (max-width: 720px){.utility-cards{grid-template-columns:1fr}.utility-card{min-height:360px}.utility-more{grid-template-columns:1fr}.utility-more a{min-height:150px}}@media (prefers-reduced-motion: reduce){.utility-card{transition:none}}@media (min-width: 901px) and (min-height: 680px){.story{min-height:calc(100svh - 72px);padding-block:clamp(32px,5vh,56px)}.story-more,.story-utilities{min-height:calc(100svh - 72px)}.story-hero{min-height:min(calc(100svh - 72px - clamp(32px,5vh,52px)),960px);align-items:flex-start;padding-top:clamp(40px,6vh,64px);padding-bottom:76px}.story-hero .story-inner{margin-top:0}.story-hero h1{font-size:clamp(4.2rem,min(9vw,14vh),9rem)}.hero-portrait{width:min(100%,600px,calc((100svh - 222px)*.8))}.story-ktv .story-inner{grid-template-columns:minmax(0,.67fr) minmax(0,1.33fr);gap:clamp(24px,3vw,48px)}.ktv-intro{display:block}.story-ktv h2{font-size:clamp(3.2rem,5vw,6.2rem)}.ktv-intro .story-lead{margin:24px 0 0;font-size:clamp(1rem,1.3vw,1.2rem)}.utilities-inner{grid-template-columns:1fr;gap:18px}.utilities-heading{display:grid;grid-template-columns:1.1fr .9fr;column-gap:30px;align-items:end}.utilities-heading .story-eyebrow{grid-column:1 / -1;margin-bottom:10px}.utilities-heading h2{font-size:clamp(2.8rem,4vw,4.3rem)}.utilities-heading .story-lead{margin:0;font-size:1rem}.utility-card{min-height:265px;padding:18px}.subtitle-preview{min-height:120px}.mask-preview{height:120px}.utility-more{grid-column:1;margin-top:0;gap:12px}.utility-more a{min-height:126px;padding:15px;gap:6px}.utility-more strong{font-size:1.1rem}}#projects,.story[id]{scroll-margin-top:72px}@media (min-width: 901px) and (min-height: 680px) and (max-height: 760px){.story h2{font-size:clamp(3.1rem,9vh,7rem)}.utility-card{min-height:240px}.utility-more a{min-height:100px}}