*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:#fafafa;color:#171717;font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{max-width:100%;display:block}svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #8d6bde;outline-offset:5px}.skip{position:fixed;top:-80px;left:15px;background:#ffdf00;padding:14px;z-index:100}.skip:focus{top:10px}.container{width:min(1280px,90%);margin:auto}.topbar{position:fixed;z-index:20;left:50%;top:16px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;white-space:nowrap}.monogram,.mail-button,.round-button{height:56px;width:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f6f6f6;border:1px solid #e8e8e8;flex-shrink:0}.monogram{font-size:15px;letter-spacing:-.08em;transform:rotate(-10deg)}.topbar nav{display:flex;gap:4px;background:#f7f7f7e8;backdrop-filter:blur(15px);padding:8px 12px;border:1px solid #e8e8e8;border-radius:50px}.topbar nav a{display:flex;gap:8px;align-items:center;font-size:14px;padding:9px 10px;border-radius:30px;transition:.2s}.topbar nav a svg{width:19px;height:19px}.topbar nav a:hover,.topbar nav a[aria-current=page]{background:#eaeaea}.mail-button{background:#ffdc00;border-color:#ffdc00;transition:transform .2s}.mail-button:hover{transform:rotate(-12deg)}.round-button:hover{background:#e9e9e9}.hero{position:relative;min-height:780px;height:100svh;max-height:1080px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:115px 20px 270px;overflow:hidden}.intro{display:flex;align-items:center;justify-content:center;gap:10px;color:#747474;font-size:15px;margin-bottom:25px}.intro img{height:38px;width:38px;border-radius:50%;object-fit:cover;object-position:center}.hero h1{font-family:"Noto Serif SC","Songti SC","SimSun",Georgia,serif;font-size:clamp(42px,4.6vw,68px);font-weight:400;letter-spacing:-.055em;line-height:1.35;text-align:center;margin:0}.hero h1 em{font-weight:400;position:relative}.hero h1 em:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:#ffdf00;transform:rotate(-4deg);z-index:-1}.hero-sub{font-size:16px;text-align:center;color:#888;line-height:1.65;margin:28px 0 0}.hero-sub strong{font-weight:600}.skill-field{position:absolute;left:50%;transform:translateX(-50%);bottom:34px;width:min(1160px,96%);height:205px;user-select:none}.skill-chip{position:absolute;left:var(--left);top:var(--top);border:0;background:var(--bg);border-radius:70px;padding:22px 29px;display:flex;align-items:center;gap:23px;font-size:13px;white-space:nowrap;transform:rotate(var(--angle));touch-action:none;cursor:grab;box-shadow:0 1px 0 #ffffff88 inset;transition:box-shadow .2s}.skill-chip svg{width:20px;height:20px}.skill-chip:hover{box-shadow:0 6px 20px #0001}.skill-chip.dragging{cursor:grabbing;z-index:5;box-shadow:0 12px 25px #0002}.reset-chips{position:absolute;left:2%;bottom:-15px;width:54px;height:54px;border:0;border-radius:50%;background:#ffdf00;display:grid;place-items:center}.reset-chips svg{width:25px;height:25px}.work-cue{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font-size:12px;color:#888;letter-spacing:.04em;white-space:nowrap}.work-cue:hover{color:#111}.case-stack{display:flex;flex-direction:column;gap:20px;padding:0 0 30px}.project-panel{background:#fff;border:1px solid #ededed;border-radius:48px;padding:65px 0 55px;overflow:hidden;box-shadow:0 -3px 14px #00000003}.project-summary{display:flex;justify-content:space-between;gap:45px;align-items:flex-start;margin-bottom:48px}.project-summary .copy{max-width:940px;min-width:0}.project-kicker{display:flex;align-items:center;gap:10px;font-size:14px;color:#777;margin-bottom:15px}.project-dot{width:24px;height:24px;border-radius:8px;background:var(--project-color);display:grid;place-items:center;color:#222;font-size:14px}.project-summary h2{font-weight:500;font-size:clamp(25px,2.2vw,34px);line-height:1.45;letter-spacing:-.045em;margin:0 0 15px}.project-summary p{font-size:14px;color:#777;line-height:1.8;margin:0}.case-link{display:flex;align-items:center;gap:17px;padding:17px 24px;background:#101010;color:#fff;border-radius:40px;font-size:14px;white-space:nowrap;flex-shrink:0;transition:.2s}.case-link svg{width:17px;height:17px}.case-link:hover{background:#343434;transform:translateY(-2px)}.filmstrip{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;cursor:grab;padding-inline:5%;touch-action:pan-y;overscroll-behavior-x:contain}.filmstrip::-webkit-scrollbar{display:none}.filmstrip.dragging{cursor:grabbing}.film-frame{flex:0 0 auto;width:clamp(420px,48vw,760px);height:420px;border:1px solid #ededed;border-radius:28px;padding:0;background:#f5f5f5;overflow:hidden;cursor:inherit;user-select:none}.film-frame img{height:100%;width:100%;object-fit:cover;pointer-events:none;user-select:none}.film-frame.tall{width:300px}.film-frame.tall img{object-position:top}.film-tools{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:15px}.film-tools span{color:#999;font-size:12px}.film-tools .buttons{display:flex;gap:9px}.film-tools button{background:#f8f8f8;border:1px solid #e9e9e9;width:38px;height:38px;border-radius:50%;display:grid;place-items:center}.film-tools button:hover{background:#ffdf00}.more-work{padding:100px 0 115px;text-align:center}.more-work>a{font-family:"SimSun","Songti SC",serif;font-size:clamp(42px,6.5vw,90px);letter-spacing:-.05em;display:inline-flex;align-items:center;gap:25px}.more-work .more-circle{width:100px;height:100px;border-radius:50%;background:#ffdf00;display:grid;place-items:center;transition:transform .3s}.more-work>a:hover .more-circle{transform:rotate(40deg)}.more-circle svg{width:44px;height:44px}.more-work>p{color:#888;font-size:14px;margin-top:25px}footer{padding:75px 0 25px;background:#f4f4f4;border-radius:48px 48px 0 0;overflow:hidden}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-top h2{font-size:32px;line-height:1.4;letter-spacing:-.04em;font-weight:500;margin:0 0 10px}.footer-top p{color:#888;font-size:14px}.footer-actions{display:flex;gap:12px}.giant-name{border:0;background:none;width:100%;text-align:center;padding:60px 0 35px;font-size:clamp(90px,23vw,340px);font-weight:500;letter-spacing:-.08em;line-height:1.2;white-space:nowrap;transition:color .3s;overflow:hidden}.giant-name:hover{color:#b4a1d7}.giant-name span{display:block;font-size:.16em;letter-spacing:.3em;margin-top:8px;font-weight:400}.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#8b8b8b;border-top:1px solid #ddd;padding-top:23px}.footer-bottom a:hover{color:#111}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);z-index:60;opacity:0;background:#111;color:#fff;padding:15px 25px;border-radius:40px;pointer-events:none;transition:.25s;font-size:14px;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.page-shell{padding-top:155px;padding-bottom:95px}.page-head{margin-bottom:65px}.page-head h1{font-family:"SimSun","Songti SC",serif;font-size:clamp(46px,5.5vw,80px);font-weight:400;letter-spacing:-.06em;margin:0 0 25px;line-height:1.3}.page-head p{font-size:16px;color:#888;line-height:1.8}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}.filters button{border:1px solid #e2e2e2;border-radius:40px;background:transparent;padding:11px 20px;font-size:13px}.filters button[aria-pressed=true]{background:#ffdf00;border-color:#ffdf00}.play-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 26px}.play-card{min-width:0}.play-image{border-radius:26px;overflow:hidden;aspect-ratio:1.3;background:#eee}.play-image img{width:100%;height:100%;object-fit:cover;transition:.5s}.play-card:hover img{transform:scale(1.035)}.play-card h2{font-size:25px;font-weight:500;letter-spacing:-.04em;margin:20px 0 8px}.play-card .category{font-size:12px;color:#888}.play-card p{color:#888;font-size:14px;line-height:1.8;max-width:95%}.about-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:100px;align-items:start}.about-layout h1{font-size:64px;font-family:"SimSun","Songti SC",serif;font-weight:400;letter-spacing:-.05em;line-height:1.35;margin:0 0 35px}.about-text{font-size:17px;color:#777;line-height:1.9}.about-text strong{font-weight:500;color:#111}.portrait-frame{border-radius:35px;overflow:hidden;background:#d5f2e5;transform:rotate(3deg)}.portrait-frame img{aspect-ratio:.84;object-fit:cover;width:100%}.about-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}.about-tags span{font-size:13px;border:1px solid #ddd;padding:9px 15px;border-radius:30px}.experience{margin-top:100px;display:grid;grid-template-columns:1fr 2fr;gap:60px}.experience h2{font-family:"SimSun","Songti SC",serif;font-size:38px;font-weight:400;margin:0}.experience article{padding:0 0 30px;border-bottom:1px solid #ddd;margin-bottom:30px}.experience article small{color:#999}.experience article h3{font-size:24px;font-weight:500;line-height:1.6}.experience article p{line-height:1.9;color:#777;font-size:15px}.text-link{border-bottom:1px solid #111;padding-bottom:5px;display:inline-block;font-size:14px}.case-page{padding-top:125px;padding-bottom:90px}.case-page .back{font-size:13px;color:#888;display:inline-flex;gap:10px;align-items:center}.case-page .back svg{width:18px;height:18px;transform:rotate(180deg)}.case-header{padding:55px 0}.case-header>small{font-size:13px;color:#888}.case-header h1{font-family:"SimSun","Songti SC",serif;font-weight:400;font-size:clamp(45px,6.2vw,90px);letter-spacing:-.05em;margin:22px 0 32px}.case-context{display:grid;grid-template-columns:1.6fr 1fr;gap:80px}.case-context>p{line-height:1.9;font-size:16px;color:#777;margin:0}.case-facts{border-top:1px solid #ccc;padding-top:17px;font-size:14px;line-height:1.9}.case-facts span{display:block;font-size:12px;color:#999;margin-bottom:9px}.case-images{display:flex;flex-direction:column;gap:26px}.case-images figure{margin:0}.case-images button{padding:0;border:1px solid #eee;border-radius:20px;overflow:hidden;background:#fff;cursor:zoom-in;display:block;width:100%}.case-images img{width:100%;height:auto}.case-images figcaption{font-size:11px;color:#999;margin:10px 5px 0}.next-case{display:flex;justify-content:space-between;align-items:center;padding-top:40px;margin-top:60px;border-top:1px solid #ddd}.next-case p{font-size:12px;color:#888}.next-case h2{font-weight:500;font-size:32px}.next-case svg{width:40px;height:40px}.qr-note{margin-top:35px;display:flex;gap:18px;align-items:center}.qr-note img{width:120px}.qr-note p{color:#888;font-size:13px;line-height:1.8}dialog{border:0;background:#161616;width:100vw;max-width:none;height:100dvh;max-height:none;padding:80px 20px 25px}dialog::backdrop{background:#000d}dialog>img{margin:auto;max-width:100%;max-height:calc(100dvh - 110px);cursor:zoom-in;object-fit:contain}dialog>img.actual{max-height:none;max-width:none;width:2000px;cursor:zoom-out}.close-modal{position:fixed;right:20px;top:20px;border:0;background:#fff;padding:12px 21px;border-radius:40px;z-index:3}dialog>p{position:fixed;top:20px;left:20px;color:#fff;font-size:12px;margin:0;background:#222b;padding:10px;border-radius:30px}body:has(dialog[open]){overflow:hidden}.route-enter{animation:appear .35s ease both}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(min-width:1600px){.hero{max-height:1100px}.hero h1{font-size:76px}.skill-field{width:1250px}}@media(max-width:900px){.hero{min-height:760px}.project-summary{gap:25px}.project-summary h2{font-size:25px}.project-summary .case-link{padding:15px 18px;font-size:13px}.film-frame{height:340px;width:580px}.film-frame.tall{width:240px}.about-layout{gap:40px}.about-layout h1{font-size:50px}.skill-chip{padding:20px 24px;font-size:12px;gap:15px}.project-panel{padding-top:45px}}@media(max-width:600px){html{scroll-padding-top:95px}.container{width:88%}.topbar{top:12px;gap:6px}.topbar nav{gap:0;padding:6px}.topbar nav a{font-size:12px;padding:9px 8px;gap:5px}.topbar nav a svg{width:15px;height:15px}.topbar nav a:last-child{display:none}.monogram,.mail-button,.round-button{height:44px;width:44px}.monogram{font-size:12px}.mail-button svg{width:19px;height:19px}.hero{height:100svh;min-height:710px;max-height:900px;padding:115px 15px 260px;justify-content:center}.intro{font-size:13px;gap:8px;margin-bottom:22px}.intro img{width:34px;height:34px}.hero h1{font-size:clamp(31px,8.6vw,44px);line-height:1.5;letter-spacing:-.07em}.hero-sub{font-size:13px;margin-top:24px}.skill-field{width:100%;height:195px;bottom:35px}.skill-chip{font-size:11px;padding:17px 17px;gap:12px;left:var(--mleft);top:var(--mtop);transform:rotate(var(--mangle))}.skill-chip svg{width:17px;height:17px}.reset-chips{width:42px;height:42px;left:4%;bottom:-13px}.work-cue{font-size:10px;bottom:12px}.case-stack{gap:15px}.project-panel{border-radius:30px;padding:34px 0 26px}.project-summary{flex-direction:column;gap:20px;margin-bottom:28px}.project-kicker{font-size:12px;gap:8px;margin-bottom:14px}.project-dot{width:21px;height:21px}.project-summary h2{font-size:23px;line-height:1.5;letter-spacing:-.045em;margin-bottom:12px}.project-summary p{font-size:12px;line-height:1.9}.project-summary .case-link{padding:12px 20px;font-size:12px;gap:25px}.filmstrip{gap:10px;padding-inline:6%}.film-frame{height:255px;width:340px;border-radius:20px}.film-frame.tall{width:190px}.film-tools{margin-top:20px}.film-tools span{font-size:10px}.film-tools button{height:32px;width:32px}.film-tools svg{width:16px;height:16px}.more-work{padding:65px 0 75px}.more-work>a{font-size:42px;gap:15px}.more-work .more-circle{height:65px;width:65px}.more-circle svg{width:29px;height:29px}.more-work>p{font-size:12px;padding-inline:20px}.footer-top{align-items:flex-start;gap:15px}.footer-top h2{font-size:25px}.footer-top p{font-size:12px;max-width:180px;line-height:1.6}.footer-actions{gap:6px;flex-wrap:wrap;width:94px}.footer-actions .round-button{width:42px;height:42px}.footer-actions .mail-button{height:42px;width:42px}.footer-actions .round-button svg{width:18px;height:18px}footer{padding-top:45px;border-radius:32px 32px 0 0}.giant-name{padding:50px 0 30px;font-size:27vw;letter-spacing:-.1em}.giant-name span{font-size:.14em}.footer-bottom{font-size:10px;flex-wrap:wrap;gap:15px;line-height:1.6}.footer-bottom>span:last-child{display:none}.page-shell{padding-top:120px;padding-bottom:65px}.page-head{margin-bottom:40px}.page-head h1{font-size:43px}.page-head p{font-size:14px}.filters{gap:7px;margin-top:23px}.filters button{font-size:11px;padding:9px 13px}.play-grid{grid-template-columns:1fr;gap:36px}.play-card h2{font-size:24px;margin-top:17px}.play-card p{font-size:13px}.play-image{border-radius:22px}.about-layout{grid-template-columns:1fr;gap:45px}.about-layout h1{font-size:clamp(39px,11vw,52px);margin-bottom:25px}.about-text{font-size:15px}.portrait-frame{width:85%;max-width:350px;margin:auto}.about-tags{margin-top:25px}.about-tags span{font-size:12px}.experience{grid-template-columns:1fr;gap:35px;margin-top:65px}.experience h2{font-size:33px}.experience article h3{font-size:22px}.experience article p{font-size:14px}.case-page{padding-top:105px;padding-bottom:65px}.case-header{padding:35px 0}.case-header h1{font-size:43px;line-height:1.4;margin:20px 0 25px}.case-context{grid-template-columns:1fr;gap:25px}.case-context>p{font-size:14px}.case-facts{font-size:12px}.case-images{gap:20px}.case-images figure{margin-inline:-6.8%}.case-images button{border-radius:0;border-left:0;border-right:0}.case-images figcaption{padding-inline:6%}.next-case h2{font-size:25px}.next-case svg{width:28px;height:28px}dialog>p{top:auto;bottom:12px;left:12px;font-size:10px}.toast{font-size:12px;padding:12px 18px}}@media(max-width:350px){.topbar nav a{padding:8px 6px}.topbar nav a svg{display:none}.hero h1{font-size:29px}.skill-chip{font-size:10px;padding:15px 14px}.more-work>a{font-size:36px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:601px){.hero{padding-bottom:80px}.skill-chip{min-width:210px;justify-content:space-between}}
@media(max-width:600px){.about-layout h1{font-size:clamp(31px,8.3vw,40px)}}
.film-frame{position:relative}.frame-label{position:absolute;bottom:16px;left:16px;background:#fffef4ef;border:1px solid #fff;padding:10px 16px;border-radius:30px;font-size:13px;box-shadow:0 2px 12px #0001}.project-panel[data-project="other"] .film-frame img{object-fit:contain;background:#f3f4f5}
.skill-chip{will-change:translate,rotate;user-select:none}.skill-chip.dragging{z-index:8}.reset-chips{z-index:10}
footer{background:#0b0b0c;color:#fafafa;position:relative}.footer-play{display:flex;align-items:center;justify-content:space-between;margin-bottom:50px}.watching-eyes{display:flex;gap:10px;padding:0;border:0;background:none}.eye{display:block;position:relative;background:white;width:35px;height:51px;border-radius:50% 50% 44% 44%;overflow:hidden}.pupil{position:absolute;left:8px;top:18px;width:21px;height:29px;background:#0b0b0c;border-radius:50%;transition:transform .12s ease-out}.pupil:after{content:'';position:absolute;right:5px;top:6px;width:4px;height:4px;border-radius:50%;background:white}.watching-eyes:hover .eye{box-shadow:0 0 24px #ffdf0033}.firework-hint{font-size:12px;color:#aaa}.footer-bottom{border-color:#ffffff25}footer .round-button{background:#1b1b1d;border-color:#ffffff15;color:#fafafa}footer .mail-button{color:#111}.firework-layer{position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden}.firework-spark{position:absolute;border-radius:2px;will-change:transform,opacity}.giant-name{cursor:crosshair}@media(max-width:600px){.footer-play{margin-bottom:35px}.eye{width:29px;height:43px}.pupil{left:6px;top:14px;width:19px;height:26px}.firework-hint{font-size:10px}}
.context-cursor{position:fixed;left:0;top:0;z-index:1200;pointer-events:none;width:82px;height:82px;border-radius:50%;background:#ffdf00;color:#151515;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;transform:translate(-50%,-50%) scale(.35);opacity:0;transition:opacity .15s,transform .2s,background .2s;box-shadow:0 6px 22px #0002}.context-cursor.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.context-cursor>span{font-size:28px;line-height:1}.context-cursor>small{font-size:11px;white-space:nowrap}.context-cursor[data-mode=drag]{background:#d9cbf8}.context-cursor[data-mode=image]{background:#ffdf00e8;backdrop-filter:blur(5px)}.context-cursor[data-mode=fireworks]{background:#ffc0e2}.context-cursor[data-mode=fireworks]>span{animation:cursor-spark 1.6s ease-in-out infinite}@keyframes cursor-spark{50%{transform:rotate(35deg) scale(1.15)}}@media(hover:hover) and (pointer:fine){.custom-cursor-target,.custom-cursor-target *{cursor:none!important}}@media(hover:none),(pointer:coarse){.context-cursor{display:none}}@media(prefers-reduced-motion:reduce){.context-cursor{transition:none}.context-cursor[data-mode=fireworks]>span{animation:none}}
@media(max-width:600px){.topbar{gap:6px}.topbar nav a{padding:10px 8px;gap:4px}.topbar nav a svg{display:none}}