:root{--bg:#050505;--text:#f5f5f7;--muted:#929297;--line:rgba(255,255,255,.12);--accent:#c9ff3d;--radius:26px;font:100%/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Noto Sans SC",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);overflow-x:hidden}button,a{font:inherit}.nav{position:fixed;z-index:20;inset:12px 2.5vw auto;min-height:54px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:rgba(24,24,27,.68);backdrop-filter:blur(26px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 16px 50px rgba(0,0,0,.28)}.brand,.nav a{color:inherit;text-decoration:none}.brand{font-weight:650;letter-spacing:-.03em}.brand span{font-size:.58em;color:var(--muted);margin-left:.35em;vertical-align:top}.nav nav{display:flex;gap:1.4rem}.nav nav a{font-size:.8rem;color:#d8d8dc}.hero{--px:0px;--py:0px;position:relative;isolation:isolate;min-height:100svh;padding:17vh 4vw 7vh;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:#050505}.hero-copy,.hero-foot{position:relative;z-index:2}.hero-copy{display:grid;gap:clamp(2rem,6vh,5rem)}.eyebrow,.section-label{font-size:.7rem;letter-spacing:.2em;color:var(--muted)}.hero h1{display:grid;width:min(100%,11ch);font-size:clamp(4.4rem,9.6vw,10.5rem);line-height:.91;letter-spacing:-.055em;margin:0;font-weight:650;font-optical-sizing:auto}.hero h1 span,.hero h1 em{display:block;white-space:nowrap}.hero h1 em{font-family:"Songti SC","STSong","Noto Serif SC",Georgia,serif;font-size:.92em;font-style:normal;font-weight:400;letter-spacing:-.045em;margin-left:clamp(.55rem,4.8vw,5.5rem);color:rgba(245,245,247,.93)}.hero-light{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}.light-orb,.light-streak,.light-grain{position:absolute;display:block;will-change:transform,opacity}.light-orb{border-radius:50%;filter:blur(70px);mix-blend-mode:screen}.light-orb-a{width:min(58vw,900px);aspect-ratio:1;right:-14vw;top:-25%;opacity:.32;background:radial-gradient(circle at 42% 44%,rgba(190,172,255,.72),rgba(92,55,255,.24) 33%,transparent 67%);transform:translate3d(calc(var(--px) * .28),calc(var(--py) * .28),0);animation:orb-a 18s ease-in-out infinite alternate}.light-orb-b{width:min(44vw,680px);aspect-ratio:1;left:-12vw;bottom:-26%;opacity:.2;background:radial-gradient(circle,rgba(213,255,117,.65),rgba(122,177,33,.18) 38%,transparent 70%);transform:translate3d(calc(var(--px) * -.18),calc(var(--py) * -.18),0);animation:orb-b 22s ease-in-out infinite alternate}.light-streak{width:62vw;height:18vw;right:-8vw;top:34%;opacity:.12;background:linear-gradient(106deg,transparent 18%,rgba(178,207,255,.8) 48%,transparent 72%);filter:blur(28px);transform:translate3d(calc(var(--px) * .12),calc(var(--py) * .12),0) rotate(-12deg);animation:streak 15s ease-in-out infinite alternate}.light-grain{inset:0;opacity:.15;background-image:radial-gradient(rgba(255,255,255,.42) .55px,transparent .7px);background-size:5px 5px;mask-image:linear-gradient(to bottom,transparent,black 30%,black 75%,transparent)}@keyframes orb-a{to{transform:translate3d(calc(var(--px) * .28 - 6vw),calc(var(--py) * .28 + 8vh),0) scale(1.08)}}@keyframes orb-b{to{transform:translate3d(calc(var(--px) * -.18 + 8vw),calc(var(--py) * -.18 - 7vh),0) scale(.94)}}@keyframes streak{to{opacity:.2;transform:translate3d(calc(var(--px) * .12 - 5vw),calc(var(--py) * .12 + 3vh),0) rotate(-8deg)}}.hero-foot{display:flex;align-items:end;justify-content:space-between}.hero-foot p{font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.55;color:#c7c7cc}.round-link{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#050505;text-decoration:none;background:var(--text);font-size:1.55rem;transition:transform .32s cubic-bezier(.2,.8,.2,1),background .2s}.round-link:hover{transform:translateY(4px);background:var(--accent)}.round-link:active{transform:scale(.94)}.marquee{overflow:hidden;border-block:1px solid var(--line);padding:15px 0;white-space:nowrap;color:var(--muted);font-size:.72rem;letter-spacing:.18em}.marquee span{display:block;width:max-content;animation:roll 28s linear infinite}@keyframes roll{to{transform:translateX(-50%)}}.work{padding:110px 4vw}.section-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:60px}.section-head>p{font-size:.7rem;letter-spacing:.16em;color:var(--muted)}.filters{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.filters button{border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.04);color:#b9b9be;padding:8px 14px;cursor:pointer;transition:background .18s,color .18s,transform .12s}.filters button:hover{background:rgba(255,255,255,.1);color:#fff}.filters button:active{transform:scale(.96)}.filters button.active{background:var(--text);color:#090909;border-color:transparent}.work-group{padding:0 0 104px}.work-group[hidden]{display:none}.group-head{display:grid;grid-template-columns:48px 1fr auto;align-items:baseline;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px}.group-head span,.group-head p{font-size:.68rem;letter-spacing:.16em;color:var(--muted)}.group-head h2{font-size:clamp(2rem,4vw,4.5rem);line-height:1;letter-spacing:-.055em;font-weight:570;margin:0}.category-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}.card{grid-column:span 6;min-width:0}.card.portrait{grid-column:span 4}.thumb{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius);background:#101012;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.09) inset;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}.thumb img,.thumb video{display:block;width:100%;height:auto;max-height:75vh;object-fit:contain;background:#0c0c0e;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s}.thumb:hover{transform:translateY(-5px);box-shadow:0 30px 80px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.12) inset}.thumb:hover img,.thumb:hover video{transform:scale(1.012);filter:brightness(.88)}.thumb:active{transform:scale(.988)}.thumb:after{content:attr(data-no);position:absolute;right:15px;top:14px;padding:5px 8px;border-radius:99px;background:rgba(0,0,0,.52);backdrop-filter:blur(14px);font-size:.62rem;color:#fff}.play-label{position:absolute;left:14px;bottom:14px;padding:8px 11px;border-radius:99px;background:rgba(245,245,247,.88);backdrop-filter:blur(14px);color:#090909;font-size:.61rem;font-weight:650;letter-spacing:.1em;transform:translateY(4px);opacity:0;transition:opacity .22s,transform .3s}.thumb:hover .play-label,.thumb:focus .play-label{opacity:1;transform:none}.card-meta{display:flex;justify-content:space-between;gap:15px;padding:15px 3px 0}.card h3{font-size:1.05rem;line-height:1.25;letter-spacing:-.02em;font-weight:560;margin:0}.card p{font-size:.73rem;margin:5px 0 0;color:var(--muted)}.open-film{border:0;background:none;color:var(--muted);font-size:1.3rem;cursor:pointer;transition:color .2s,transform .2s}.open-film:hover{color:#fff;transform:translate(2px,-2px)}.about{padding:120px 4vw;border-top:1px solid var(--line);display:grid;grid-template-columns:1.2fr 5fr 2fr;gap:5vw}.about h2{font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.065em;margin:0 0 2rem}.about .lead{font-size:clamp(1.35rem,2.1vw,2rem);max-width:680px;letter-spacing:-.025em}.about div>p:last-child{line-height:1.8;max-width:720px;color:#a8a8ad}.stats{display:flex;flex-direction:column}.stats span{padding:18px 0;border-bottom:1px solid var(--line);font-size:.75rem;color:var(--muted)}.stats b{font-size:2.5rem;font-weight:520;color:var(--text);margin-right:8px}.contact{padding:120px 4vw 90px;background:#f2f2f4;color:#09090b}.contact>p{font-size:.7rem;letter-spacing:.17em}.contact h2{font-size:clamp(4.7rem,12vw,11rem);line-height:.82;letter-spacing:-.075em;margin:4rem 0}.contact h2 em{font-family:Iowan Old Style,Georgia,serif;font-weight:400}.contact a{color:inherit;text-decoration:none;border-bottom:1px solid;padding-bottom:7px}footer{padding:28px 4vw;display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted)}footer a{color:inherit;text-decoration:none}.viewer{position:fixed;inset:2vh 2vw;width:96vw;height:96vh;max-width:none;max-height:none;border:1px solid rgba(255,255,255,.12);border-radius:30px;padding:0;background:rgba(14,14,16,.94);backdrop-filter:blur(34px) saturate(160%);color:var(--text);box-shadow:0 50px 160px rgba(0,0,0,.75);overflow:auto}.viewer::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(12px)}.viewer-close{position:fixed;z-index:4;left:18px;top:18px;border:1px solid rgba(255,255,255,.18);background:rgba(35,35,38,.78);backdrop-filter:blur(18px);color:white;width:44px;height:44px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;transition:transform .18s,background .18s}.viewer-close:hover{background:#fff;color:#000}.viewer-close:active{transform:scale(.92)}.viewer-stage{min-height:74vh;display:grid;place-items:center;background:#000;border-radius:30px 30px 0 0;overflow:hidden}.viewer-stage iframe,.full-player{display:block;width:100%;height:74vh;border:0;background:#000;object-fit:contain}.viewer-stage [hidden]{display:none}.viewer-copy{padding:32px 34px 40px;display:grid;grid-template-columns:1fr 2fr 2fr;gap:32px;align-items:start}.viewer-copy p{margin:0;color:var(--muted)}.viewer-title{font-size:clamp(1.8rem,3vw,3.2rem);line-height:1;letter-spacing:-.045em;margin:0}.viewer-link{color:var(--accent);text-decoration:none}.gallery-stage{padding:80px 24px 30px;background:#111;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;max-height:74vh;overflow:auto}.gallery-stage[hidden]{display:none}.gallery-stage img{width:100%;height:auto;border-radius:18px;background:#090909}
@media(max-width:800px){.nav{inset:8px 10px auto}.nav nav{gap:.8rem}.hero{padding:15vh 18px 6vh}.hero-copy{gap:2rem}.hero h1{font-size:clamp(3.8rem,17.5vw,7rem);line-height:.94;letter-spacing:-.045em}.hero h1 em{margin-left:0;font-size:.82em;letter-spacing:-.035em}.light-orb-a{width:100vw;right:-45vw;top:-8%;opacity:.3}.light-orb-b{width:90vw;left:-45vw;bottom:-10%}.light-streak{width:110vw;height:35vw;right:-35vw;top:46%}.work{padding:80px 14px}.section-head{align-items:start;flex-direction:column}.filters{justify-content:flex-start}.group-head{grid-template-columns:34px 1fr}.group-head p{display:none}.category-grid{gap:42px 12px}.card,.card.portrait{grid-column:span 12}.thumb img,.thumb video{max-height:none}.play-label{opacity:1;transform:none}.about{padding:90px 18px;grid-template-columns:1fr}.contact{padding:90px 18px}.contact h2{font-size:19vw}.viewer{inset:0;width:100vw;height:100vh;border-radius:0;border:0}.viewer-stage{min-height:68vh;border-radius:0}.viewer-stage iframe,.full-player{height:68vh}.viewer-copy{grid-template-columns:1fr;padding:24px 18px 40px}.gallery-stage{grid-template-columns:1fr;padding:68px 10px 16px;max-height:75vh}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:opacity .18s ease!important}.hero{--px:0px!important;--py:0px!important}.light-orb,.light-streak{transform:none!important}.thumb:hover{transform:none}.thumb:hover img,.thumb:hover video{transform:none}}
@media(prefers-reduced-transparency:reduce){.nav,.viewer,.viewer-close,.thumb:after,.play-label{backdrop-filter:none;background:#1d1d1f}}
@media(prefers-contrast:more){.nav,.viewer{background:#000;border-color:#fff}.filters button{border-color:#fff}}
.contact-details{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.55fr);gap:clamp(2rem,6vw,7rem);align-items:end;border-top:1px solid rgba(0,0,0,.18);padding-top:28px}.contact-links{display:grid}.contact-links a{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:18px;align-items:center;color:inherit;text-decoration:none;padding:22px 0;border-bottom:1px solid rgba(0,0,0,.17);transition:opacity .2s,transform .25s}.contact-links a:hover{opacity:.58;transform:translateX(5px)}.contact-links a:active{transform:scale(.985)}.contact-links span,.wechat-card span{font-size:.64rem;letter-spacing:.16em;color:#666}.contact-links strong{font-size:clamp(1.15rem,2.3vw,2.2rem);font-weight:520;letter-spacing:-.035em}.contact-links i{font-style:normal;font-size:1.2rem}.wechat-card{margin:0;display:grid;grid-template-columns:minmax(150px,230px);justify-content:end;gap:12px}.wechat-card img{display:block;width:100%;height:auto;background:#fff;border-radius:22px;padding:10px;box-shadow:0 20px 60px rgba(0,0,0,.12)}.wechat-card figcaption{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.wechat-card strong{font-size:.8rem;font-weight:550}
@media(max-width:800px){.contact-details{grid-template-columns:1fr}.contact-links a{grid-template-columns:70px minmax(0,1fr) auto}.contact-links strong{font-size:1rem;word-break:break-all}.wechat-card{justify-content:start;grid-template-columns:minmax(180px,70vw)}}
.contact-links button{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:18px;align-items:center;width:100%;border:0;border-bottom:1px solid rgba(0,0,0,.17);background:transparent;color:inherit;text-align:left;padding:22px 0;cursor:pointer;transition:opacity .2s,transform .25s}.contact-links button:hover{opacity:.58;transform:translateX(5px)}.contact-links button:active{transform:scale(.985)}.contact-links button:focus-visible{outline:2px solid #000;outline-offset:5px;border-radius:4px}.contact-links button i{min-width:3.5em;text-align:right;font-style:normal;font-size:.72rem;letter-spacing:.08em;transition:color .18s}.contact-links button.copied i{color:#267a2f}@media(max-width:800px){.contact-links button{grid-template-columns:70px minmax(0,1fr) auto}}

/* Expressive hero typography: each glyph has deliberate breathing room. */
.hero h1{width:min(100%,12.5ch);font-size:clamp(4rem,8.8vw,9.6rem);line-height:1;letter-spacing:0}
.hero h1 .display-line{display:flex;align-items:baseline;white-space:nowrap}
.hero h1 .display-line i,.hero h1 .display-line b{display:block;font:inherit;font-style:normal}
.hero h1 .display-line-one{gap:clamp(.08em,1.1vw,.22em);font-weight:620}
.hero h1 .display-line-one b{font-size:.58em;font-weight:400;transform:translate(-.08em,-.22em)}
.hero h1 .display-line-two{gap:clamp(.12em,1.35vw,.3em);margin:clamp(.25rem,1.5vh,1rem) 0 0 clamp(.5rem,4.2vw,4.5rem);font-family:"Songti SC","STSong","Noto Serif SC",serif;font-size:.82em;font-weight:400;letter-spacing:0}
.hero h1 .display-line-two i:nth-child(2){transform:translateY(.08em)}
.hero h1 .display-line-two i:nth-child(3){font-style:italic;transform:skewX(-5deg)}
.hero h1 .display-line-two b{font-size:.58em;transform:translate(-.12em,-.08em)}

/* A bright, responsive pool of light that visibly follows the pointer. */
.hero{--cx:72%;--cy:34%}
.cursor-light{position:absolute;z-index:1;left:var(--cx);top:var(--cy);width:clamp(360px,38vw,720px);aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:.24;transform:translate3d(-50%,-50%,0) scale(.78);will-change:left,top,transform,opacity;background:radial-gradient(circle at center,rgba(255,255,255,.38) 0,rgba(181,207,255,.3) 12%,rgba(135,96,255,.24) 28%,rgba(103,255,225,.08) 48%,transparent 69%);filter:blur(18px);mix-blend-mode:screen;transition:opacity .28s ease,transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 90px rgba(131,103,255,.14)}
.cursor-light::before,.cursor-light::after{content:"";position:absolute;border-radius:50%;inset:20%;border:1px solid rgba(232,240,255,.18);box-shadow:inset 0 0 35px rgba(168,201,255,.12),0 0 45px rgba(123,91,255,.12)}
.cursor-light::after{inset:35%;border-color:rgba(255,255,255,.22);filter:blur(2px)}
.hero.pointer-active .cursor-light{opacity:.92;transform:translate3d(-50%,-50%,0) scale(1)}
.hero.pointer-active .hero-copy{text-shadow:0 0 34px rgba(192,210,255,.08)}

@media(max-width:800px){
  .hero h1{font-size:clamp(3.35rem,15vw,6.4rem);width:100%}
  .hero h1 .display-line-one{gap:.08em}
  .hero h1 .display-line-two{gap:.1em;margin-left:0;font-size:.76em}
  .cursor-light{width:78vw;opacity:.3}
}
@media(prefers-reduced-motion:reduce){
  .cursor-light{left:72%!important;top:34%!important;opacity:.28!important;transform:translate3d(-50%,-50%,0)!important}
}

/* Apple-inspired display system: SF Pro/PingFang on Apple, stable close fallback elsewhere. */
.hero h1{
  width:min(100%,11.8ch);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro SC","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  font-size:clamp(4rem,8.35vw,9.2rem);
  line-height:.98;
  font-weight:600;
  letter-spacing:-.018em;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.hero h1 .display-line{
  gap:.06em;
  font-family:inherit;
  font-size:1em;
  font-style:normal;
  font-weight:inherit;
  letter-spacing:inherit;
  margin:0;
  color:#f5f5f7;
}
.hero h1 .display-line-two{
  margin-top:.12em;
  margin-left:clamp(.3rem,2.1vw,2.25rem);
  font-weight:500;
  background:linear-gradient(105deg,#fff 2%,#d9d9df 48%,#fff 82%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero h1 .display-line i,
.hero h1 .display-line b,
.hero h1 .display-line-one b,
.hero h1 .display-line-two b,
.hero h1 .display-line-two i:nth-child(2),
.hero h1 .display-line-two i:nth-child(3){
  font:inherit;
  font-style:normal;
  transform:none;
}
.hero h1 .display-line b{
  font-size:.72em;
  align-self:center;
  margin-left:-.03em;
  opacity:.82;
}
.hero-copy{gap:clamp(2.4rem,6.5vh,5.5rem)}
.eyebrow{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Noto Sans SC",sans-serif;font-weight:500;letter-spacing:.24em}

@media(max-width:800px){
  .hero h1{width:100%;font-size:clamp(3.25rem,14.5vw,6.2rem);line-height:1}
  .hero h1 .display-line{gap:.035em}
  .hero h1 .display-line-two{margin-left:0;margin-top:.16em;font-size:.88em}
}

/* Natural-ratio masonry prevents portrait work from creating empty grid rows. */
.category-grid{display:block;columns:2;column-gap:clamp(18px,2vw,32px)}
.card,.card.portrait{display:inline-block;width:100%;margin:0 0 clamp(42px,5vw,78px);break-inside:avoid;vertical-align:top}
.thumb img,.thumb video{width:100%;height:auto;max-height:none;object-fit:contain}
.work-group[data-kind="design"] .category-grid{columns:1}
.work-group[data-kind="design"] .card{max-width:min(680px,100%)}

/* Keep video decoding on the compositor and remove expensive live backdrop blur. */
.viewer{background:#0b0b0d;backdrop-filter:none}
.viewer::backdrop{background:rgba(0,0,0,.9);backdrop-filter:none}
.full-player{transform:translateZ(0);backface-visibility:hidden;contain:paint}
.viewer-open .hero-light *,
.viewer-open .marquee span{animation-play-state:paused!important}

@media(max-width:800px){
  .category-grid{columns:1}
  .card,.card.portrait{margin-bottom:48px}
  .viewer-copy{padding-bottom:max(40px,env(safe-area-inset-bottom))}
}