@font-face{font-family:"Nightcat Display";src:url("./assets/fonts/InterDisplay-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Nightcat UI";src:url("./assets/fonts/NightcatUI.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Nightcat Sans CN";src:url("./assets/fonts/NightcatSansCN.woff2") format("woff2");font-weight:250 900;font-style:normal;font-display:swap}
:root {
  --ease: cubic-bezier(.22,1,.36,1);
  --bg: #f8f9fc;
  --soft: #eff1f6;
  --ink: #303644;
  --muted: #777d8a;
  --line: rgba(40,46,65,.12);
  --accent: #666dd5;
  --hero-bg: #f1f3fc;
  --glass: rgba(255,255,255,.32);
  --logo-filter: brightness(.30);
  --button-bg: #333846;
  --button-fg: #fff;
  color-scheme: light;
  font-family: "Nightcat UI","Nightcat Sans CN",sans-serif;
  font-synthesis: none;
}
/* Inter provides Latin/numerals; the Chinese subset supplies the remaining glyphs. */
:root[data-theme="dark"] {
  --bg: #0a0c12;
  --soft: #11141d;
  --ink: #edeef4;
  --muted: #9298ab;
  --line: rgba(204,211,244,.12);
  --accent: #a0a7ff;
  --hero-bg: #080c1b;
  --glass: rgba(255,255,255,.025);
  --logo-filter: brightness(1);
  --button-bg: #eceef9;
  --button-fg: #252a3b;
  color-scheme: dark;
}
*{box-sizing:border-box}
/* Allow repeated control taps without double-tap zoom; keep pinch zoom available. */
button,a,[role="button"]{touch-action:manipulation}
html{scroll-behavior:smooth;scroll-padding-top:118px;scrollbar-gutter:stable;background:var(--bg)}
html.custom-page-scrollbar{scrollbar-width:none;scrollbar-gutter:auto}
html.custom-page-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}
.page-scrollbar{--scroll-thumb:rgba(80,87,117,.25);position:fixed;top:8px;bottom:8px;right:2px;width:12px;z-index:40;opacity:.55;touch-action:none;transition:opacity .4s var(--ease);outline-offset:1px}
.page-scrollbar[data-tone="dark"]{--scroll-thumb:rgba(202,208,229,.24)}
.page-scroll-thumb{position:absolute;top:0;left:4px;width:4px;min-height:36px;border-radius:10px;background:var(--scroll-thumb);transition:background-color .5s var(--ease)}
.page-scrollbar:hover,.page-scrollbar:focus-visible,.page-scrollbar.is-scrolling,.page-scrollbar.is-dragging{opacity:1}
.page-scrollbar.is-dragging{cursor:grabbing}
.dialog-scrollbar{position:absolute;top:12px;bottom:12px;right:2px;z-index:5}
:root[data-theme="dark"] .dialog-scrollbar{--scroll-thumb:rgba(202,208,229,.24)}
dialog.custom-dialog-scrollbar{padding:0;overflow:hidden;scrollbar-width:none;scrollbar-gutter:auto}
dialog.custom-dialog-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}
.dialog-scroll-content{max-height:calc(88svh - 2px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;overflow-anchor:none}
.dialog-scroll-content::-webkit-scrollbar{display:none;width:0;height:0}
.dialog-bottom-fade{position:absolute;inset:auto 0 0;height:58px;z-index:4;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--bg));opacity:var(--bottom-fade,0);transition:opacity .18s var(--ease)}
@media(max-width:620px){.dialog-bottom-fade{height:48px}}
.contact-dialog>.dialog-scroll-content{padding:52px 35px 27px}
@media(max-width:620px){
  .project-dialog>.dialog-scroll-content{max-height:calc(66svh - 2px)}
  .contact-dialog>.dialog-scroll-content{padding:48px 22px 24px}
}
@media(pointer:coarse){.page-scrollbar{display:none}}
body{margin:0;background:var(--viewport-bg,var(--hero-bg));color:var(--ink);-webkit-font-smoothing:antialiased}
html{background:var(--viewport-bg,var(--hero-bg))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--viewport-bg,var(--hero-bg));z-index:40;pointer-events:none}
button,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button{color:inherit}
button:disabled{cursor:default;opacity:.35}
img{display:block;max-width:100%}
/* Opacity alone keeps image loading light and leaves glass, hover and parallax filters intact. */
.media-enabled img:not([data-poster-src]):not(.media-ready){opacity:0!important}
.media-enabled img.media-ready{animation:media-fade-in .85s var(--ease)}
@keyframes media-fade-in{from{opacity:0}to{opacity:1}}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #8a91ed;outline-offset:5px}
:root[data-input-modality="pointer"] :is(button,a,dialog,[tabindex]):focus{outline:none}
[hidden]{display:none!important}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.shell{width:min(1180px,calc(100% - 96px));margin-inline:auto}
.section{padding-block:118px}
.surface-base{background-color:var(--bg);color:var(--ink)}
.surface-soft{background-color:var(--soft);color:var(--ink)}
.always-dark{--ink:#f0f1f7;--muted:#9297a8;--line:rgba(255,255,255,.13);--accent:#b0b6ff;background:#0b0d13;color:var(--ink)}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.19em;line-height:1.6;color:var(--accent);margin:0}
.section-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:62px}
.section-note{font-size:12px;color:var(--muted)}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:54px}
.section-heading h2,.section-title{font-size:clamp(38px,4.4vw,64px);font-weight:600;letter-spacing:-.055em;line-height:1.2;margin:0}
.section-heading>p{font-size:16px;line-height:1.9;color:var(--muted);margin:0 0 4px;max-width:350px}
.skip-link{position:fixed;top:-70px;left:20px;z-index:100;padding:12px;background:var(--bg);border:1px solid var(--line)}
.skip-link:focus{top:20px}

/* A single translucent navigation surface, tinted by the section beneath it. */
.header{position:fixed;inset:20px 28px auto;z-index:30;max-width:1320px;margin-inline:auto;--nav-ink:#303644;--nav-muted:#747b89;--nav-glass:rgba(250,251,255,.72);--nav-line:rgba(30,40,65,.09);--nav-logo:brightness(.30);--nav-hover:rgba(30,40,65,.055)}
.header[data-tone="dark"],:root[data-theme="dark"] .header:not([data-tone]){--nav-ink:#eff0f6;--nav-muted:#b0b4c6;--nav-glass:rgba(17,20,33,.60);--nav-line:rgba(220,227,255,.10);--nav-logo:brightness(1);--nav-hover:rgba(230,234,255,.07)}
.nav-glass{position:relative;z-index:0;height:66px;display:flex;align-items:center;padding:0 23px;gap:22px;border:1px solid var(--nav-line);border-radius:22px;color:var(--nav-ink);box-shadow:0 8px 35px rgba(0,0,0,.055);transition:color .8s var(--ease),border-color .8s var(--ease)}
/* Keep the fixed glass on its own stable layer. Filtered logo/text descendants
   must not share the backdrop surface invalidated by a fast-scrolling rail.
   Only this small surface is promoted; the poster rail remains unpromoted. */
.nav-glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--nav-glass);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);transform:translateZ(0);will-change:transform;transition:background-color .8s var(--ease)}
.live-theme .nav-glass::before{transition:background-color 1.2s var(--ease)}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand-mark{width:29px;height:29px;object-fit:contain;filter:var(--nav-logo,var(--logo-filter));transition:filter 1.2s var(--ease)}
.brand>span{font-size:11px;font-weight:650;letter-spacing:.12em}
.brand em{font-style:normal;color:var(--accent)}
.nav-links{display:flex;align-items:center;justify-content:center;gap:4px;margin-left:auto}
.nav-links>a,.nav-links>button{padding:11px 14px;border-radius:13px;border:0;background:transparent;font-size:12px;font-weight:550;letter-spacing:.015em;color:var(--nav-muted);transition:background-color .35s var(--ease),color .35s var(--ease);white-space:nowrap}
.nav-links>a:hover,.nav-links>button:hover,.nav-links>a.active{background:var(--nav-hover);color:var(--nav-ink)}
.nav-links>a:nth-child(3){letter-spacing:.025em}
.nav-links>a,.nav-links>button,.mobile-menu>a,.mobile-menu>button{font-family:inherit}
.nav-tools{display:flex;align-items:center;gap:9px;border-left:1px solid var(--nav-line);padding-left:12px}
.menu-wrap{position:relative}
.icon-button{display:grid;place-items:center;width:35px;height:35px;padding:6px;border:0;background:transparent;border-radius:50%;color:var(--nav-muted)}
.icon-button:hover,.language-button:hover{background:var(--nav-hover);color:var(--nav-ink)}
.language-button{display:flex;gap:7px;align-items:center;background:none;border:0;border-radius:12px;padding:8px 6px;color:var(--nav-muted);font-size:12px;font-weight:550;white-space:nowrap}
.language-button .icon{width:18px;height:18px}
.header .nav-glass :is(.nav-links>a,.nav-links>button,.nav-tools .icon-button,.language-button){transition:background-color .35s var(--ease),color .35s var(--ease)}
.live-theme .header .nav-glass :is(.nav-links>a,.nav-links>button,.nav-tools .icon-button,.language-button){transition:background-color .35s var(--ease),color 1.2s var(--ease)}
.tiny-chevron{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.7;margin-left:1px;flex:none}
.popover{position:absolute;top:calc(100% + 24px);right:0;min-width:170px;padding:7px;border:1px solid var(--nav-line);background:var(--nav-glass);backdrop-filter:blur(35px);-webkit-backdrop-filter:blur(35px);border-radius:17px;box-shadow:0 15px 50px rgba(0,0,0,.12);color:var(--nav-ink);animation:menu-in .25s var(--ease)}
.popover>button{width:100%;display:flex;align-items:center;gap:12px;padding:12px 10px;border:0;background:none;text-align:left;font-size:12px;border-radius:10px}
.popover>button:hover{background:var(--nav-hover)}
.popover .icon{width:17px;height:17px}
.selection{width:5px;height:5px;border-radius:50%;margin-left:auto}
.selected .selection{background:currentColor}
.mobile-menu-button{display:none}
.mobile-menu{margin-top:8px;border-radius:20px;background:var(--nav-glass);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);padding:12px;border:1px solid var(--nav-line);color:var(--nav-ink);transform-origin:top center}
.mobile-menu>a,.mobile-menu>button{display:block;width:100%;text-align:left;padding:14px;border:0;background:transparent;color:var(--nav-muted);font-size:15px;font-weight:550;letter-spacing:.015em;line-height:1.5;border-radius:10px;transition:background-color .35s var(--ease),color .35s var(--ease)}
.mobile-menu>a:hover,.mobile-menu>button:hover{background:var(--nav-hover);color:var(--nav-ink)}

.hero{position:relative;min-height:790px;min-height:max(790px,100svh);display:flex;flex-direction:column;justify-content:center;overflow:hidden;background-color:var(--hero-bg)}
.hero-backdrop{position:absolute;inset:-3%;pointer-events:none;background:radial-gradient(ellipse at 78% 40%,rgba(100,103,255,.13),transparent 42%),radial-gradient(ellipse at 48% 90%,rgba(68,154,222,.055),transparent 42%);transform:translate3d(var(--bg-x,0px),var(--bg-y,0px),0)}
:root[data-theme="dark"] .hero-backdrop{background:radial-gradient(ellipse at 78% 40%,rgba(93,91,225,.22),transparent 42%),radial-gradient(ellipse at 48% 90%,rgba(31,107,139,.09),transparent 42%)}
.hero-grid{position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(black,transparent 83%);-webkit-mask-image:linear-gradient(black,transparent 83%)}
.hero-layout{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:36px;padding:160px 0 120px}
.hero-copy{position:relative;z-index:2}
.hero-copy h1{font-family:"Nightcat Display",Arial,sans-serif;font-size:clamp(60px,7.2vw,102px);font-weight:800;font-synthesis:none;line-height:.96;letter-spacing:-.04em;margin:32px 0 27px;white-space:nowrap}
.hero-title-type{display:block;transform:scale(1.015,.92);transform-origin:left center}
.headline-loading .hero-copy h1{visibility:hidden;animation-play-state:paused}
.hero-copy h1 .hero-outline{color:transparent;-webkit-text-stroke:1px var(--accent);-webkit-text-fill-color:color-mix(in srgb,var(--accent) 8%,transparent)}
.hero-make,.hero-outline,.hero-word{position:relative;display:inline-block}
.hero-copy h1 .hero-outline.vision-ready{-webkit-text-stroke:0!important;-webkit-text-fill-color:transparent}
.vision-drawing{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vision-glyph-stroke{fill:none;stroke:var(--accent);stroke-width:var(--outline-width,1);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;animation:vision-contour-trace 1.05s cubic-bezier(.38,.12,.36,1) var(--trace-start,800ms) both}
.vision-glyph-fill{fill:var(--accent);fill-opacity:0;stroke:none;animation:vision-fixed-fill .7s var(--ease) calc(var(--trace-start,800ms) + 920ms) both}
@keyframes vision-fixed-fill{from{fill-opacity:0}to{fill-opacity:.08}}
@keyframes vision-contour-trace{0%{opacity:0;stroke-dashoffset:1}1%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
.hero-word{font-weight:inherit;white-space:nowrap}
.vision-sequence .hero-word{animation:vision-make-room 1.45s cubic-bezier(.35,.15,.3,1) 520ms both}
@keyframes vision-make-room{from{transform:translateX(calc(-1 * var(--vision-space,0px)))}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.vision-sequence .hero-word,.vision-glyph-stroke,.vision-glyph-fill{animation:none}.vision-glyph-stroke{stroke-dashoffset:0}.vision-glyph-fill{fill-opacity:.08}}
.hero-period{display:inline-block;margin-left:.075em;letter-spacing:0}
.hero-chinese{font-size:19px;letter-spacing:.38em;font-weight:550;margin:0 0 25px;color:var(--ink)}
.hero-tagline{font-size:21px;letter-spacing:.015em;font-weight:500;margin:0 0 13px}
.hero-tagline:lang(zh){font-weight:450;white-space:nowrap}
.hero-intro{font-size:15px;color:var(--muted);line-height:1.9;max-width:440px;margin:0;text-wrap:pretty}
.hero-actions{display:flex;align-items:center;gap:10px;margin-top:30px}
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:14px 25px;min-height:47px;border:1px solid transparent;border-radius:100px;font-size:13px;font-weight:550;letter-spacing:.025em;transition:background-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease),color .8s var(--ease)}
.button-primary{background:rgba(163,153,232,.34);border-color:rgba(130,116,213,.30);color:#45405f;backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);box-shadow:0 8px 26px rgba(94,78,168,.12),inset 0 1px rgba(255,255,255,.48)}
:root[data-theme="dark"] .button-primary{background:rgba(137,122,218,.25);border-color:rgba(183,170,255,.29);color:#ede8ff;box-shadow:0 8px 26px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.10)}
.button-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(80,86,162,.17),inset 0 1px rgba(255,255,255,.65)}
.button-quiet{background:rgba(255,255,255,.10);border-color:rgba(115,123,151,.25);color:var(--ink)}
.button-quiet:hover{transform:translateY(-2px);background:rgba(255,255,255,.26);border-color:rgba(115,123,151,.42);box-shadow:0 8px 24px rgba(45,50,95,.07);backdrop-filter:blur(12px)}
:root[data-theme="dark"] .button-quiet{background:rgba(255,255,255,.035);border-color:rgba(220,225,255,.16)}
:root[data-theme="dark"] .button-quiet:hover{background:rgba(255,255,255,.09);border-color:rgba(220,225,255,.28)}
.hero-actions{gap:13px}
.button:not(.copy-button){min-height:49px;padding:14px 28px;backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -1px 2px rgba(77,66,140,.07),0 4px 8px rgba(65,52,121,.035),0 14px 30px rgba(65,52,121,.085)}
.button:not(.copy-button)::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(155deg,rgba(255,255,255,.95),rgba(255,255,255,.08) 40%,rgba(143,130,216,.24) 80%,rgba(255,255,255,.65));mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.button-primary{color:#484062;background:linear-gradient(145deg,rgba(211,200,255,.48),rgba(157,142,224,.24) 55%,rgba(230,222,255,.34));border-color:rgba(151,133,214,.24)}
.button-quiet{background:linear-gradient(145deg,rgba(255,255,255,.40),rgba(255,255,255,.08) 55%,rgba(220,224,255,.18));border-color:rgba(146,149,180,.20)}
.button:not(.copy-button):hover{transform:translateY(-2px);box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 2px rgba(77,66,140,.07),0 6px 12px rgba(65,52,121,.04),0 18px 34px rgba(86,69,155,.14)}
:root[data-theme="dark"] .button:not(.copy-button){box-shadow:inset 0 1px 1px rgba(255,255,255,.15),inset 0 -1px 2px rgba(0,0,0,.16),0 12px 28px rgba(0,0,0,.22)}
:root[data-theme="dark"] .button:not(.copy-button)::before{background:linear-gradient(155deg,rgba(225,216,255,.45),rgba(255,255,255,.025) 45%,rgba(163,146,244,.21) 85%,rgba(225,216,255,.22))}
:root[data-theme="dark"] .button-primary{color:#eee9ff;background:linear-gradient(145deg,rgba(168,148,244,.27),rgba(114,94,187,.14) 55%,rgba(172,149,255,.17));border-color:rgba(185,166,255,.23)}
:root[data-theme="dark"] .button-quiet{background:linear-gradient(145deg,rgba(216,221,255,.08),rgba(255,255,255,.025) 55%,rgba(175,166,228,.06));border-color:rgba(220,225,255,.13)}
:where(.button,.nav-links>a,.nav-links>button,.text-button,.round-button,.icon-button,.language-button,.wechat-footer,.process-pause){position:relative}
[data-soft-glow]{--glow-core:rgba(151,132,205,.19);--glow-halo:rgba(164,146,214,.07)}
[data-soft-glow].button-quiet{--glow-core:rgba(133,155,188,.15);--glow-halo:rgba(145,165,196,.05)}
:root[data-theme="dark"] [data-soft-glow]{--glow-core:rgba(198,185,226,.16);--glow-halo:rgba(167,149,207,.06)}
:root[data-theme="dark"] [data-soft-glow].button-quiet{--glow-core:rgba(181,199,221,.13);--glow-halo:rgba(143,170,204,.045)}
[data-soft-glow]::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(110px 55px ellipse at var(--pointer-x,50%) 100%,var(--glow-core),var(--glow-halo) 52%,transparent 100%);transition:opacity .65s var(--ease)}
[data-soft-glow].pointer-lit::after{opacity:1}
.visual{height:500px;position:relative;display:grid;place-items:center;transform:translate3d(var(--visual-x,0px),var(--visual-y,0px),0)}
.logo-card{position:relative;z-index:3;width:min(340px,28vw);aspect-ratio:1;border-radius:38px;border:1px solid rgba(125,135,193,.20);background:linear-gradient(145deg,rgba(255,255,255,.32),rgba(255,255,255,.045));backdrop-filter:blur(32px) saturate(140%);-webkit-backdrop-filter:blur(32px) saturate(140%);box-shadow:0 0 85px rgba(90,90,230,.14),inset 0 1px rgba(255,255,255,.60),inset 0 -1px rgba(101,105,171,.06);display:grid;place-items:center;transform:translate3d(var(--logo-x,0px),var(--logo-y,0px),0) rotate(7deg)}
:root[data-theme="dark"] .logo-card{border-color:rgba(180,189,255,.16);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.008));box-shadow:0 0 90px rgba(74,83,255,.18),inset 0 1px rgba(255,255,255,.13)}
.logo-card img{width:58%;transform:rotate(-7deg);filter:var(--logo-filter) drop-shadow(0 0 15px rgba(151,158,231,.16));transition:filter 1.4s var(--ease)}
:root[data-theme="dark"] .logo-card img{filter:var(--logo-filter) drop-shadow(0 0 10px rgba(219,224,255,.24)) drop-shadow(0 0 28px rgba(146,158,250,.26))}
.orbit{position:absolute;width:88%;height:83%;border:1px solid color-mix(in srgb,var(--muted) 38%,transparent);border-radius:50%;transform:translate3d(var(--orbit-x,0px),var(--orbit-y,0px),0) rotate(-28deg)}
.orbit-two{width:107%;height:56%;transform:rotate(-35deg);opacity:.65}
.orb{position:absolute;border-radius:50%;pointer-events:none}
.orb-one{width:40%;aspect-ratio:1;right:8%;top:11%;background-color:rgba(110,106,245,.27);background-image:radial-gradient(ellipse at 29% 24%,#ffffff14,transparent 53%,#24216b0a 82%,#24216b10);box-shadow:none;filter:blur(2px);transform:translate3d(var(--orb-x,0px),var(--orb-y,0px),0)}
.orb-two{width:24%;aspect-ratio:1;bottom:12%;left:10%;background-color:rgba(20,190,223,.20);background-image:radial-gradient(ellipse at 29% 24%,#ffffff14,transparent 53%,#15466b08 82%,#15466b0e);box-shadow:none;filter:blur(2px);transform:translate3d(calc(var(--orb-x,0px)*-1),calc(var(--orb-y,0px)*-1),0)}
:root[data-theme="dark"] .orb-one{background-color:rgba(91,94,255,.36)}
:root[data-theme="dark"] .orb-two{background-color:rgba(0,199,240,.25)}
.visual-label{position:absolute;right:5px;bottom:32px;color:var(--muted);font-size:9px;letter-spacing:.21em;line-height:1.7}
.visual-coordinate{position:absolute;left:15px;top:28px;color:var(--muted);font-size:8px;letter-spacing:.18em;opacity:.7}
.hero-baseline{position:absolute;bottom:28px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:9px;letter-spacing:.14em}
.hero-baseline>span:first-child{display:flex;align-items:center;gap:9px}
.hero-baseline i{height:5px;width:5px;background:#78b9a1;border-radius:50%}
.scroll-hint{display:flex;gap:12px;align-items:center;font-size:8px}
.scroll-line{display:inline-block;width:37px;height:1px;background:var(--muted);opacity:.6}

.statement{font-size:clamp(40px,5.4vw,78px);font-weight:600;line-height:1.25;letter-spacing:-.055em;margin:0 0 54px}
.statement:lang(zh){font-family:inherit}
.about-bottom{display:grid;grid-template-columns:1.2fr 1fr;gap:130px;align-items:start}
.about-bottom>p{font-size:18px;line-height:1.95;color:var(--muted);margin:0;max-width:580px}
.disciplines{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;padding-top:4px}
.disciplines>span{padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}
.works{overflow:hidden;padding-bottom:60px}
.poster-rail{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;padding:12px max(48px,calc((100vw - 1180px)/2)) 27px;overflow-anchor:none;overscroll-behavior-x:none;scroll-behavior:auto;touch-action:pan-y pinch-zoom;cursor:grab}
.poster-rail::-webkit-scrollbar{display:none}
.poster-rail.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.poster-item{flex:0 0 clamp(215px,21vw,305px);min-width:0}
.poster-frame{position:relative}
.poster-item .poster-frame{margin-bottom:14px}
.all-work .poster-frame{margin-bottom:12px}
.poster-item .poster-frame+h3{margin-top:34px}
.all-work .poster-frame+h3{margin-top:25px}
.upcoming-stamp{--stamp-glass:rgba(239,237,250,.48);--stamp-ink:#393548;--stamp-line:rgba(255,255,255,.46);position:absolute;right:-14px;bottom:-14px;z-index:2;display:grid;place-items:center;width:84px;aspect-ratio:1;border:1px solid var(--stamp-line);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.07),transparent 65%),var(--stamp-glass);color:var(--stamp-ink);box-shadow:0 5px 20px #110d2917,inset 0 1px 0 #ffffff12;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);transform:rotate(-9deg);pointer-events:none;transition:translate .7s var(--ease),background-color 1.2s var(--ease),color 1.2s var(--ease)}
.works .upcoming-stamp,:root[data-theme="dark"] .upcoming-stamp{--stamp-glass:rgba(25,24,39,.46);--stamp-ink:#f5f1ff;--stamp-line:rgba(225,221,250,.22)}
.upcoming-stamp>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:currentColor;font-family:inherit}
.stamp-ring{fill:none;stroke:currentColor;stroke-width:.6;opacity:.18}
.stamp-arc,.stamp-signature{dominant-baseline:central}
.stamp-arc{font-size:8px;font-weight:550;letter-spacing:1.8px;opacity:.78}
.stamp-signature{font-size:6.5px;font-weight:500;letter-spacing:1px;opacity:.7}
.upcoming-stamp strong{display:grid;gap:2px;padding-left:.12em;font-size:15px;letter-spacing:.12em;font-weight:600;line-height:1.15;text-align:center;text-shadow:0 1px 3px #14102018}
.upcoming-stamp .stamp-english{font-size:9px;letter-spacing:.08em;gap:3px}
.poster-frame:has(.poster-button:hover) .upcoming-stamp{translate:0 -9px}
.is-upcoming .poster-plus{display:none}
.all-work .upcoming-stamp{right:-10px;bottom:-12px;width:66px}
.all-work .upcoming-stamp strong{font-size:12px}
.all-work .upcoming-stamp .stamp-english{font-size:7px}
@media(max-width:620px){.poster-item .upcoming-stamp{width:76px;right:-12px;bottom:-13px}.all-work .upcoming-stamp{right:-5px;bottom:-10px;width:52px}.all-work .upcoming-stamp strong{font-size:10px;gap:1px}.all-work .upcoming-stamp .stamp-english{font-size:6px;gap:2px}}
.poster-button{display:block;width:100%;padding:0;border:0;background:none;border-radius:13px;overflow:hidden;position:relative;text-align:left;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.poster-button{background:linear-gradient(145deg,#1c2030,#11131c)}
.poster-button>img{width:100%;aspect-ratio:2/3;object-fit:cover;background:#11131c;opacity:0;filter:blur(4px);transition:opacity .85s var(--ease),filter 1.05s var(--ease),transform 1s var(--ease)}
.poster-button>img.is-ready{opacity:1;filter:none}
.poster-button:hover{transform:translateY(-9px);box-shadow:0 20px 50px #0006}
.poster-button:hover>img{transform:scale(1.025)}
.poster-plus{position:absolute;bottom:13px;right:13px;display:grid;place-items:center;width:31px;height:31px;background:#181a268c;backdrop-filter:blur(8px);border-radius:50%;color:rgba(232,235,244,.72);opacity:0;transform:translateY(5px);transition:.4s var(--ease)}
.poster-button:hover .poster-plus,.poster-button:focus-visible .poster-plus{opacity:1;transform:none}
.poster-name{margin:17px 0 6px;color:#e9eaf0;font-size:14px;font-weight:500}
.poster-kind{font-size:10px;color:#777f95;margin:0}
.poster-heat{font-size:10px;color:#a4abc2;margin:9px 0 0;min-height:15px}
.round-button[aria-pressed="true"]{background:rgba(255,255,255,.15)}
.rail-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.rail-caption{font-size:11px;color:var(--muted)}
.rail-hint-touch{display:none}
@media(hover:none), (pointer:coarse){.rail-hint-desktop{display:none}.rail-hint-touch{display:inline}}
.rail-controls{display:flex;gap:10px;align-items:center}
.rail-controls .all-works-open{width:auto;padding:0 15px;border-radius:100px;font-size:11px;font-weight:550;white-space:nowrap;color:inherit;opacity:.8}
.rail-controls .all-works-open:hover{opacity:1}
.all-works-dialog{width:1080px}
.all-works-content{padding:45px 38px 35px}
.all-works-content h2{font-size:30px;font-weight:600;margin:14px 0 12px}
#all-works-note{font-size:13px;color:var(--muted);margin:0 0 30px}
.all-works-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 18px}
.all-works-more{display:block;margin:28px auto 0;padding:10px 18px;border:1px solid var(--line);border-radius:30px;background:transparent;color:var(--muted);font:inherit;font-size:12px}
.all-work{min-width:0}
.all-work .poster-button{width:100%;aspect-ratio:2/3;border-radius:11px}
.all-work .poster-button>img{width:100%;height:100%;object-fit:cover}
.all-work .poster-button>img.media-ready{opacity:1;filter:none}
.all-work .poster-button>img{filter:none;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.media-enabled .all-work img.media-ready{animation:media-fade-in .6s var(--ease)}
.all-work .poster-plus{width:25px;height:25px;right:8px;bottom:8px;backdrop-filter:none;-webkit-backdrop-filter:none;background:#181a2699}
.all-work .poster-plus .icon{width:15px;height:15px}
/* Keep hover lifts for a mouse, not a sticky hover under a scrolling finger. */
@media(hover:none){.poster-button:hover,.poster-button:hover>img{transform:none}.poster-button:hover{box-shadow:none}.poster-frame:has(.poster-button:hover) .upcoming-stamp{translate:none}}
.all-work h3{font-size:13px;font-weight:550;line-height:1.5;margin:13px 0 5px;overflow-wrap:anywhere}
.all-work>p{font-size:10px;color:var(--muted);line-height:1.6;margin:0}
dialog.nested-dialog::backdrop{background:rgba(8,10,20,.23);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
@media(max-width:850px){.all-works-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){
  .rail-bottom{flex-wrap:wrap;gap:16px}
  .rail-bottom .rail-controls{margin-left:auto}
  .all-works-content{padding:35px 20px 28px}
  .all-works-content h2{font-size:25px}
  .all-works-content>.eyebrow{font-size:8px;padding-right:25px}
  #all-works-note{font-size:12px;margin-bottom:22px}
  .all-works-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 11px}
  .all-work h3{font-size:12px;margin-top:10px}
  .all-work>p{font-size:9px}
  .all-work .poster-button{border-radius:7px}
  .all-work .poster-plus{width:20px;height:20px;right:5px;bottom:5px}
  .all-work .poster-plus .icon{width:12px;height:12px}
  .all-works-dialog{max-height:78svh}
  .all-works-dialog>.dialog-scroll-content{max-height:calc(78svh - 2px)}
}
.round-button{width:38px;height:38px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:50%;display:grid;place-items:center;transition:background-color .3s}
.round-button:hover{background:rgba(255,255,255,.13)}
.round-button .icon{width:14px;height:14px}
.flipped{transform:rotate(180deg)}
.cases .section-title{margin-bottom:70px}
.case{display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:center;padding:45px 0 90px}
.case+.case{border-top:1px solid var(--line);padding-top:90px}
.case:nth-child(even) .case-art{order:2}
.case-art{position:relative;display:grid;place-items:center;padding:38px;border-radius:24px;background:#f1f3f9;overflow:hidden;min-height:570px;isolation:isolate}
/* A gradient-only horizon rises from below the frame without an extra blur pass.
   Animate the shared color to keep every gradient stop in sync during deck changes. */
.case-art::before{content:"";position:absolute;inset:0 -24px -24px;pointer-events:none;color:var(--case-wash);background:radial-gradient(ellipse 95% 105% at 50% 125%,rgba(var(--case-rgb),.8) 0%,rgba(var(--case-rgb),.67) 25%,rgba(var(--case-rgb),.33) 50%,rgba(var(--case-rgb),.13) 72%,rgba(var(--case-rgb),.07) 85%,rgba(var(--case-rgb),0) 100%);opacity:.40;transition:color 1.8s var(--ease),opacity 1s var(--ease)}
:root[data-theme="dark"] .case-art{background:var(--case-dark,#0f1118)}
@supports (color:color-mix(in srgb,red,transparent)){
  .case-art::before{background:radial-gradient(ellipse 95% 105% at 50% 125%,color-mix(in srgb,currentColor 80%,transparent) 0%,color-mix(in srgb,currentColor 67%,transparent) 25%,color-mix(in srgb,currentColor 33%,transparent) 50%,color-mix(in srgb,currentColor 13%,transparent) 72%,color-mix(in srgb,currentColor 7%,transparent) 85%,transparent 100%)}
  :root[data-theme="dark"] .case-art{background:color-mix(in srgb,var(--case-wash) 3%,#0f1118)}
}
:root[data-theme="dark"] .case-art::before{opacity:.30}
.case-art>img{position:relative;width:285px;aspect-ratio:2/3;object-fit:cover;border-radius:8px;box-shadow:0 24px 60px #0004;transition:transform 1.2s var(--ease)}
.case-art:hover>img{transform:translateY(-5px) rotate(-1deg)}
.case-deck{position:relative;width:100%;display:grid;justify-items:center;gap:27px;padding-top:12px}
.case-art.has-deck{transition:background-color 1.4s var(--ease)}
.deck-stage{position:relative;width:min(285px,calc(100% - 30px));aspect-ratio:2/3;touch-action:pan-y pinch-zoom;isolation:isolate;cursor:grab;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.deck-card{position:absolute;inset:0;width:100%;padding:0;border:1px solid #ffffff20;border-radius:10px;background:#25252a;box-shadow:0 22px 45px #0005;overflow:hidden;transform-origin:50% 85%;transform:translate3d(calc(var(--depth)*10px),calc(var(--depth)*-9px),0) rotate(calc(var(--depth)*3deg)) scale(calc(1 - var(--depth)*.035));opacity:1;transition:transform .85s var(--ease),opacity .65s var(--ease);cursor:grab;user-select:none;-webkit-user-select:none}
.deck-card[aria-hidden="true"]{pointer-events:none}
.deck-card[data-deep="true"]{opacity:0}
.deck-card img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
:root[data-theme="light"] .case-art>img{box-shadow:0 20px 45px #20253824}
:root[data-theme="light"] .deck-card{box-shadow:0 18px 36px #20253824}
.deck-card.deck-dragging{transition:none!important;will-change:transform}
.deck-card.deck-recycling{transition:none!important;opacity:0!important}
.deck-stage.is-dragging,.deck-stage.is-dragging .deck-card{cursor:grabbing}
.deck-card.deck-leave-left{transform:translate3d(-112%,8px,0) rotate(-13deg);opacity:0}
.deck-card.deck-leave-right{transform:translate3d(112%,8px,0) rotate(13deg);opacity:0}
.deck-stage:focus-visible{outline:1px solid #c2b7ff80;outline-offset:6px;border-radius:10px}
.deck-controls{position:relative;width:min(195px,calc(100% - 65px));padding-block:5px 8px}
.deck-progress{height:1px;overflow:hidden;border-radius:3px;background:color-mix(in srgb,var(--muted) 16%,transparent)}
.deck-progress>span{display:block;width:100%;height:100%;background:color-mix(in srgb,var(--muted) 54%,transparent);transform:scaleX(0);transform-origin:left}
.deck-position{display:block;margin-top:9px;font-size:9px;font-weight:500;line-height:1.4;letter-spacing:.12em;color:color-mix(in srgb,var(--muted) 80%,transparent);text-align:center;font-variant-numeric:tabular-nums;pointer-events:none}
@media(max-width:1100px){.deck-stage{width:min(255px,calc(100% - 28px))}}
@media(min-width:621px) and (max-width:850px){.deck-stage{width:min(220px,calc(100% - 26px))}}
@media(max-width:620px){.deck-stage{width:min(240px,calc(100% - 28px))}.case-deck{gap:23px}.deck-controls{width:min(165px,calc(100% - 65px))}}
.case-type{font-size:10px;letter-spacing:.05em;color:var(--accent);margin:0 0 18px}
.case h3{font-size:clamp(36px,3.1vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1.3;margin:0 0 20px}
.case-description{font-size:15px;line-height:1.9;color:var(--muted);max-width:340px;margin:0 0 32px}
.case-stats{display:flex;flex-wrap:wrap;gap:24px 30px;margin-bottom:30px}
.stat-value{display:block;white-space:nowrap;font-family:inherit;font-size:33px;font-weight:650;letter-spacing:0;font-variant-numeric:tabular-nums}
.stat-number{letter-spacing:-.025em}
/* Optical alignment: CJK units sit slightly low next to Inter's cap-height. */
.stat-unit{position:relative;top:-.055em;margin-inline:.075em .025em;font-family:"Nightcat Sans CN",sans-serif;font-size:.78em;font-weight:900;letter-spacing:0}
.stat-label{display:block;font-size:11px;color:var(--muted);margin-top:9px;line-height:1.6}
.text-button{padding:5px 0;background:none;border:0;border-bottom:1px solid var(--line);font-size:13px;font-weight:550;color:var(--ink);transition:color .3s}
.text-button:hover{color:var(--accent)}
.data-note{font-size:11px;color:var(--muted);line-height:1.9;max-width:680px;margin:20px 0 0}
.process-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px;margin-top:65px}
.process-tabs{display:flex;flex-direction:column}
.process-tab{display:flex;align-items:center;gap:21px;padding:22px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;opacity:.5;transition:opacity .5s,color .5s}
.process-tab span:first-child{font-size:10px;font-variant-numeric:tabular-nums}
.process-tab span:nth-child(2){font-size:17px;font-weight:500}
.process-tab .icon{width:15px;height:15px;margin-left:auto;opacity:0;transform:translateX(-8px);transition:.5s var(--ease)}
.process-tab[aria-selected="true"]{opacity:1;color:var(--accent)}
.process-tab[aria-selected="true"] span:nth-child(2){font-weight:650}
.process-tab[aria-selected="true"] .icon{opacity:1;transform:none}
.process-tab:hover{opacity:1}
.process-image-wrap{height:333px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#141724}
.process-display:not(.is-script) .process-image-wrap{background-color:var(--soft);background-clip:padding-box;border-color:rgba(145,153,171,.18)}
:root[data-theme="dark"] .process-display:not(.is-script) .process-image-wrap{border-color:rgba(184,192,214,.12)}
.process-image-wrap>img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;transition:opacity .3s,transform 1.3s var(--ease)}
.process-image-wrap:hover>img{transform:scale(1.035)}
#process-image-secondary{position:absolute;right:20px;top:50%;width:26%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:center;border:1px solid var(--line);border-radius:7px;box-shadow:0 15px 35px #0002;transform:translateY(-50%) rotate(5deg)}
.process-image-wrap:hover #process-image-secondary{transform:translateY(calc(-50% - 3px)) rotate(2deg)}
.process-image-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 48%,#070a1608 62%,#070a1624 77%,#070a1652 90%,#070a168c 100%)}
#process-code{position:absolute;bottom:22px;left:24px;max-width:calc(100% - 48px);color:#fffffff5;font-size:10px;font-weight:550;line-height:1.4;letter-spacing:.16em;text-shadow:0 1px 2px #0006,0 2px 6px #0005,0 2px 12px #0002}
.process-description{display:flex;gap:24px;padding-top:25px;min-height:145px}
#process-number{font-size:11px;color:var(--accent);padding-top:5px}
.process-description h3{font-size:19px;font-weight:500;margin:0 0 11px}
.process-description p{font-size:14px;line-height:1.9;color:var(--muted);margin:0;max-width:420px}
.process-display.switching .process-description{animation:panel-in .55s var(--ease)}
.process-image-wrap>img[data-process-media]{animation:none}
.process-outgoing{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;pointer-events:none;animation:none;contain:paint}
.process-outgoing .script-line.is-typing>span::after{animation:none}
.process-display.switching #process-image-secondary.media-ready{animation:process-poster-in 1.1s var(--ease) both}
.is-asset-sheet #process-image{object-position:left top;transform-origin:left top}
.asset-build{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#0e0f10;isolation:isolate}
.asset-build[hidden]{display:none}
.asset-sheet-canvas{position:absolute;left:0;top:0;width:var(--sheet-width);height:var(--sheet-height)}
.asset-piece{position:absolute;overflow:hidden;opacity:0}
.asset-piece[data-asset-role="introduction"]{z-index:0}
.asset-piece[data-asset-role="detail"]{z-index:1}
.asset-piece[data-asset-role="portrait"]{z-index:2}
.asset-piece[data-asset-edge="right"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),#000c calc(100% - 24px),#0005 calc(100% - 10px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),#000c calc(100% - 24px),#0005 calc(100% - 10px),transparent)}
.asset-piece>img{position:absolute;display:block;width:var(--sheet-width);height:var(--sheet-height);max-width:none;pointer-events:none}
.has-asset-build #process-image{visibility:hidden}
.has-asset-build.switching #process-image-secondary.media-ready{animation:none}
.storyboard-build{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#f6f5f1}
.storyboard-build[hidden]{display:none}
.storyboard-sheet{position:absolute;left:0;top:0;display:block;height:auto;max-width:none;aspect-ratio:1672/941}
.has-storyboard-build #process-image{visibility:hidden}
.has-storyboard-build.switching #process-image-secondary.media-ready{animation:none}
.ai-build{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#1a1a1a}
.ai-build[hidden]{display:none}
.ai-sheet{position:absolute;left:0;top:0;display:block;height:auto;max-width:none;aspect-ratio:2000/1162}
.ai-wire{stroke:color-mix(in srgb,var(--accent) 45%,#c1bceb)}
.has-ai-build #process-image{visibility:hidden}
.ai-build-animated.switching #process-image-secondary.media-ready{animation:none}
.edit-build{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#282828}
.edit-build[hidden]{display:none}
.edit-sheet{position:absolute;left:0;top:0;display:block;height:auto;max-width:none;aspect-ratio:2000/803}
.has-edit-build #process-image{visibility:hidden}
.has-edit-build.switching #process-image-secondary.media-ready{animation:none}
.has-release-build #process-image{transition:none}
.has-release-build.switching #process-image-secondary.media-ready{animation:none}
.is-asset-sheet .process-image-wrap{border:1px solid var(--line)}
.is-asset-sheet .process-image-shade{background:linear-gradient(180deg,transparent 52%,#070a1605 64%,#070a161a 76%,#070a163d 87%,#070a166b 95%,#070a168c 100%)}
@keyframes process-poster-in{from{opacity:0;translate:36px 16px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.process-playback{display:flex;align-items:center;gap:13px;margin-top:15px;min-height:24px}
.process-progress{height:3px;flex:1;overflow:hidden;border-radius:5px;background:var(--line)}
#process-progress-fill{display:block;width:100%;height:100%;border-radius:inherit;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent),#aaa1ed)}
#process-position{font-size:9px;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.process-pause{display:grid;place-items:center;width:25px;height:25px;padding:5px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted)}
.process-pause .icon{width:12px;height:12px}
.process-pause:hover{color:var(--ink);background:var(--line)}
@keyframes process-image-in{from{opacity:.4;filter:blur(3px);transform:translateY(5px)}to{opacity:1;filter:none;transform:none}}
.script-editor{position:absolute;inset:0;padding:23px 35% 44px 23px;color:var(--ink);background:linear-gradient(125deg,var(--bg),var(--soft));transition:background-color .8s var(--ease),color .8s var(--ease)}
.script-editor[hidden]{display:none}
.script-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:9px;color:var(--muted);letter-spacing:.035em}
.script-file{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.script-status{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;font-size:8px}
.script-status i{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.65}
.script-viewport{position:relative;height:calc(100% - 32px);margin-top:15px;overflow:hidden;scrollbar-width:none;overflow-anchor:none;mask-image:linear-gradient(#000 0%,#000 93%,transparent);-webkit-mask-image:linear-gradient(#000 0%,#000 93%,transparent)}
.script-line{position:relative;min-height:21px;margin-bottom:9px;padding-left:27px;font-family:ui-monospace,SFMono-Regular,Consolas,"Nightcat Sans CN",monospace;font-size:11px;line-height:1.9;overflow-wrap:anywhere;color:var(--muted)}
.script-line[hidden]{display:none}
.script-line::before{content:attr(data-line);position:absolute;left:0;top:1px;font-size:8px;color:var(--muted);opacity:.38;font-variant-numeric:tabular-nums}
.script-heading{font-weight:650;letter-spacing:.06em;color:var(--ink)}
.script-scene,.script-thought{color:var(--accent)}
.script-dialogue{color:var(--ink)}
.script-cast{font-size:10px;opacity:.75}
.script-line.is-typing>span::after{content:"";display:inline-block;width:1px;height:1em;margin-left:3px;vertical-align:-.12em;background:var(--accent);animation:script-caret 1s steps(1,end) infinite}
.is-script .process-image-wrap{background:var(--soft);border:1px solid var(--line)}
.is-script #process-image,.is-script .process-image-shade{visibility:hidden}
:is(.is-script,.is-asset-sheet) #process-image-secondary{top:50%;right:20px;width:26%;height:auto;aspect-ratio:2/3;object-fit:cover;transform:translateY(-50%) rotate(5deg);border-color:var(--line);box-shadow:0 15px 35px #0002}
:is(.is-script,.is-asset-sheet) .process-image-wrap:hover #process-image-secondary{transform:translateY(calc(-50% - 3px)) rotate(2deg)}
.is-script #process-code{color:var(--muted);text-shadow:none}
@keyframes script-caret{0%,48%{opacity:.75}49%,100%{opacity:0}}
@media(max-width:620px){#process-image-secondary,.is-asset-sheet #process-image-secondary{right:12px;width:27%}}
@media(max-width:620px){.script-editor{padding:17px 34% 36px 15px}.script-toolbar{gap:4px;padding-bottom:10px;font-size:8px}.script-status{display:none}.script-viewport{margin-top:12px;height:calc(100% - 25px)}.script-line{padding-left:21px;font-size:10px;line-height:1.85;margin-bottom:8px}.script-line::before{font-size:7px}.script-cast{font-size:9px}.is-script #process-image-secondary{right:12px;width:27%}#process-code{left:15px;max-width:calc(100% - 30px);font-size:9px;bottom:14px}}
.education{padding-block:130px;background:radial-gradient(ellipse at 85% 50%,#24203d 0%,#10121b 48%,#0b0d13 85%);overflow:hidden}
.education-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.education h2{font-size:clamp(35px,4vw,55px);line-height:1.3;font-weight:550;letter-spacing:-.04em;margin:30px 0}
.education-body{font-size:16px;color:var(--muted);line-height:1.95;max-width:380px}
.education-caption{margin-top:42px;padding-top:24px;border-top:1px solid var(--line)}
.education-caption>span{font-size:19px;letter-spacing:-.02em}
.education-caption>p{font-size:11px;color:var(--muted);margin:13px 0 0}
.education-art{height:560px;position:relative}
.education-halo{position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(130,98,195,.14);filter:blur(50px);left:20px;top:90px}
.education-opc{max-width:380px;margin:24px 0 0;padding-left:16px;border-left:1px solid #b4a2ec55;font-size:14px;line-height:1.9;color:#b5b2ca}
.education-opc h3{margin:0 0 8px;font-size:14px;font-weight:600;line-height:1.7;letter-spacing:.015em;color:#dfdced}
.education-opc p{margin:0}
.education-project-card{position:absolute;width:clamp(195px,18vw,245px);padding:0;border:1px solid #ffffff26;border-radius:13px;background:#161825;box-shadow:0 30px 55px #0006;overflow:hidden;transform:translate3d(0,0,0) rotate(var(--card-angle));transition:transform .85s var(--ease),box-shadow .85s var(--ease);cursor:pointer}
.education-project-card img{width:100%;height:auto;display:block}
.education-card-cats{--card-angle:-10deg;left:0;top:28px;z-index:var(--education-layer,1)}
.education-card-snow{--card-angle:9deg;left:38%;top:90px;z-index:var(--education-layer,2)}
.education-proof{position:absolute;right:0;bottom:14px;width:125px;padding:0;border:1px solid #ffffff26;border-radius:14px;overflow:hidden;background:#161825;box-shadow:0 25px 50px #0006;transform:rotate(8deg);transition:transform .8s var(--ease);z-index:3}
@media(hover:hover) and (pointer:fine){.education-proof:not(.education-training-card):hover{transform:rotate(3deg) translateY(-7px)}}
.education-proof img{width:100%;height:180px;object-fit:cover;object-position:top}
.education-proof span{display:block;padding:14px 5px;font-size:9px;white-space:nowrap;color:#e6e6f1}
.education-art-label{position:absolute;left:0;bottom:5px;font-size:10px;letter-spacing:.16em;line-height:1.6;color:#8986a5}
.contact-section{text-align:center;padding-block:130px}
.contact-section h2{font-size:clamp(37px,5vw,66px);line-height:1.25;font-weight:550;letter-spacing:-.05em;margin:28px 0}
.contact-section>.shell>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:33px}
.footer{border-top:1px solid var(--line);padding:39px 0 23px}
.footer-main{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:30px}
.footer-main>.footer-brand{justify-self:start}
.footer-main>.wechat-footer{justify-self:end}
.footer-brand .brand-mark{width:24px;height:24px;filter:var(--logo-filter)}
.footer-brand>span{font-size:11px}
.copyright{font-size:11px;line-height:1.8;color:var(--muted);text-align:center;margin:0}
.wechat-footer{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:none;border-radius:50px;padding:12px 15px;font-size:12px;white-space:nowrap;color:var(--muted);touch-action:manipulation}
.wechat-footer .icon{color:#43b67a;width:17px;height:17px}
/* Touch taps activate the button, rather than first emulating a sticky mouse hover. */
.wechat-footer>*{pointer-events:none}
@media(hover:hover) and (pointer:fine){.wechat-footer:hover{border-color:#43b67a88}}
.wechat-footer:active{border-color:#43b67a88}
.footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:15px;color:var(--muted);font-size:11px;line-height:1.8;padding-top:29px}
.footer-bottom>#icp-link{text-align:center;white-space:nowrap;transition:color .25s var(--ease)}
.footer-bottom>#icp-link:is(:hover,:focus-visible,:active){color:var(--accent)}
.footer-bottom>span:last-child{text-align:right}
@media(max-width:1100px){.footer-main{display:flex}}
@media(max-width:620px){.footer-bottom{display:flex;flex-direction:column;gap:8px;text-align:center}.footer .copyright,.footer .footer-bottom{font-size:10px}}

dialog{border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0;border-radius:25px;box-shadow:0 40px 120px #0004;max-height:88svh;max-width:calc(100vw - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
dialog::-webkit-scrollbar,.evidence-grid::-webkit-scrollbar{width:6px;height:5px}
dialog::-webkit-scrollbar-track,.evidence-grid::-webkit-scrollbar-track{background:transparent;margin:20px}
dialog::-webkit-scrollbar-thumb,.evidence-grid::-webkit-scrollbar-thumb{background:rgba(133,137,157,.4);border-radius:10px}
dialog::-webkit-scrollbar-thumb:hover,.evidence-grid::-webkit-scrollbar-thumb:hover{background:rgba(133,137,157,.65)}
.project-dialog{scrollbar-gutter:stable}
.evidence-grid{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
dialog[open]{animation:dialog-in .6s var(--ease)}
dialog::backdrop{background:rgba(8,10,20,.40);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:backdrop-in .45s}
dialog.closing{animation:dialog-out var(--dialog-exit-duration,230ms) ease-in forwards}
dialog.closing::backdrop{animation:backdrop-out var(--dialog-exit-duration,230ms) ease-in forwards}
dialog.closing.pull-closing{animation:none}
dialog.pull-resting:not(.closing)::backdrop{animation:none}
dialog.pull-interacting::backdrop,dialog.closing.pull-closing::backdrop{animation:none;opacity:var(--pull-backdrop-opacity,1);transition:opacity var(--pull-exit-duration,340ms) cubic-bezier(.2,.65,.3,1)}
dialog.pull-dragging::backdrop{transition:none}
dialog.closing.pull-closing::backdrop{transition-timing-function:ease-in}
.close-button{position:absolute;right:16px;top:16px;z-index:3;border:1px solid var(--line);border-radius:50%;background:var(--bg);width:34px;height:34px;display:grid;place-items:center;color:var(--muted)}
.close-button .icon{width:17px;height:17px}
.contact-dialog{width:430px;padding:52px 35px 27px;text-align:center}
.contact-icon{width:68px;height:68px;display:grid;place-items:center;margin:0 auto 25px;background:#34b57014;border-radius:23px;color:#2ab86b}
.contact-icon .icon{width:43px;height:43px;stroke-width:1.2}
.contact-dialog h2{font-size:21px;margin:12px 0 18px;font-weight:500}
.wechat-id{font-size:22px;letter-spacing:-.02em;user-select:all;margin:0}
.dialog-intro{font-size:13px;color:var(--muted);line-height:1.9;margin:20px auto 27px;max-width:280px}
.copy-button{background:#28ac68;color:#fff;min-width:180px}
.copy-button:hover{background:#23985b}
#copy-status{height:17px;margin:14px 0 0;font-size:11px;color:var(--muted)}
.project-dialog{width:930px}
.project-detail{display:grid;grid-template-columns:.85fr 1fr}
.project-cover{background:var(--soft);padding:40px;display:grid;align-content:start}
.project-cover>img{width:100%;height:auto;border-radius:9px}
.project-copy{padding:62px 35px 40px}
.project-copy h2{font-weight:550;font-size:30px;letter-spacing:-.04em;line-height:1.3;margin:18px 0 24px}
.project-copy>p{color:var(--muted);font-size:14px;line-height:1.9}
.project-story{margin:25px 0}
.project-story h3{font-size:12px;font-weight:550;letter-spacing:.04em;color:var(--ink);margin:0 0 9px}
.project-story p{font-size:14px;line-height:1.9;color:var(--muted);margin:0}
.project-production p+p{margin-top:12px}
.project-production{padding-top:20px;border-top:1px solid var(--line)}
.project-copy .case-stats{flex-wrap:wrap;margin-top:25px}
.project-copy .stat-value{font-size:26px}
.project-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.project-actions>.button{white-space:nowrap}
.button-hongguo{color:#a23d32;background:linear-gradient(120deg,rgba(255,105,76,.22),rgba(255,170,91,.23) 62%,rgba(113,212,183,.14));border-color:rgba(225,106,81,.24);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%)}
.button-hongguo:not(.copy-button)::before{background:linear-gradient(155deg,rgba(255,255,255,.85),rgba(255,235,218,.12) 40%,rgba(231,126,91,.26) 80%,rgba(165,228,205,.38))}
:root[data-theme="dark"] .button-hongguo{color:#ffd2c4;background:linear-gradient(120deg,rgba(235,87,65,.25),rgba(222,136,72,.18) 62%,rgba(99,193,162,.10));border-color:rgba(244,155,120,.25)}
:root[data-theme="dark"] .button-hongguo:not(.copy-button)::before{background:linear-gradient(155deg,rgba(255,222,200,.42),rgba(255,255,255,.025) 45%,rgba(240,140,99,.22) 85%,rgba(166,224,199,.24))}
.button-xiaohongshu{color:#be2445;background:linear-gradient(135deg,rgba(255,36,66,.22),rgba(255,115,143,.16));border-color:rgba(255,36,66,.24);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%)}
.button-xiaohongshu:not(.copy-button)::before{background:linear-gradient(155deg,rgba(255,255,255,.88),rgba(255,223,231,.10) 40%,rgba(255,65,104,.26) 80%,rgba(255,220,229,.6))}
:root[data-theme="dark"] .button-xiaohongshu{color:#ffbdcb;background:linear-gradient(135deg,rgba(255,36,66,.25),rgba(210,67,103,.15));border-color:rgba(255,101,131,.28)}
:root[data-theme="dark"] .button-xiaohongshu:not(.copy-button)::before{background:linear-gradient(155deg,rgba(255,208,221,.42),rgba(255,255,255,.025) 45%,rgba(255,77,119,.25) 85%,rgba(255,197,215,.24))}
@media(max-width:620px){.project-actions{gap:10px}.project-actions>.button{padding-inline:19px}}
.project-evidence{padding:0 40px 35px}
.project-evidence>p{font-size:11px;color:var(--muted)}
.evidence-grid{display:flex;gap:15px;overflow:auto;align-items:start;padding-block:5px;scrollbar-width:none;scrollbar-color:auto;overscroll-behavior-x:contain}
.evidence-grid::-webkit-scrollbar{display:none;width:0;height:0}
.evidence-controls{display:flex;justify-content:flex-end;gap:10px;margin-top:13px}
.evidence-controls[hidden]{display:none}
.evidence-controls .round-button{color:var(--muted);background:var(--soft);transition:background-color .3s,color .3s,opacity .3s}
.evidence-controls .round-button:hover:not(:disabled){color:var(--ink);background:var(--line)}
.evidence-controls .round-button:disabled{opacity:.28;cursor:default}
.evidence-grid>button{flex:0 0 155px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--soft);overflow:hidden;cursor:zoom-in;transition:border-color .4s var(--ease),opacity .4s var(--ease)}
.evidence-grid>button:hover{border-color:var(--accent);opacity:.88}
.evidence-grid img{width:155px;height:auto;border-radius:8px}
.image-dialog{width:min(1120px,calc(100vw - 40px),calc((88svh - 116px)*var(--image-ratio,.5) + 48px));min-width:280px;background:var(--bg)}
.image-dialog.image-zoomed{width:min(1120px,calc(100vw - 40px),calc(var(--image-native-width,800px) + 48px))}
.image-dialog::backdrop{background:rgba(8,10,20,.50);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.image-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 62px 13px 24px;background:var(--bg);border-bottom:1px solid var(--line)}
.image-toolbar h2{font-size:12px;font-weight:500;letter-spacing:.02em;margin:0;color:var(--muted)}
.image-zoom{color:var(--muted)}
.image-stage{display:block;width:100%;padding:20px 24px 24px;border:0;background:transparent;cursor:zoom-in}
.image-stage img{width:auto;max-width:100%;max-height:calc(88svh - 116px);height:auto;object-fit:contain;margin:auto;border-radius:6px}
.image-zoomed .image-stage{cursor:zoom-out}
.image-zoomed .image-stage img{max-height:none;width:auto}
@media(max-width:620px){
  .image-dialog{width:calc(100vw - 24px)}
  .image-dialog.image-zoomed{width:calc(100vw - 24px)}
  .image-toolbar{padding-left:16px}
  .image-stage{padding:16px}
  .image-zoomed .image-stage img{max-width:none;width:min(var(--image-native-width,800px),900px)}
}
.project-evidence .data-note{margin-bottom:0}
.noscript-note{padding:30px;text-align:center}
.entrance{animation:entrance 1.15s var(--ease) both;animation-delay:var(--delay,0s)}
/* Animate siblings individually: no filtered/fading ancestor around the glass backdrop. */
.visual-entrance .visual>*{animation:glass-entrance 1.15s var(--ease) backwards;animation-delay:var(--delay,0s)}
.visual-entrance .orbit-two{--reveal-opacity:.65}
.visual-entrance .visual-coordinate{--reveal-opacity:.7}
@keyframes glass-entrance{from{opacity:0;translate:0 30px}to{opacity:var(--reveal-opacity,1);translate:0 0}}
.js-reveal .reveal{opacity:0;transform:translateY(32px);filter:blur(4px);transition:opacity 1.05s var(--ease),transform 1.15s var(--ease),filter 1.05s var(--ease)}
.js-reveal .reveal.is-visible{opacity:1;transform:none;filter:none}
.statement-reveal{display:flow-root;margin-bottom:54px}
.statement-reveal>.statement{margin-bottom:0}
.statement-reveal.is-warming{will-change:transform,opacity,filter}
.js-reveal .statement-reveal{transform:translate3d(0,32px,0)}
.js-reveal .statement-reveal.is-visible{transform:translate3d(0,0,0)}
@media(max-width:620px){.statement-reveal{margin-bottom:30px}}
@media(prefers-reduced-motion:reduce){.js-reveal .statement-reveal{transform:none;will-change:auto}}
/* An ancestor filter/opacity group prevents the seals from sampling their posters
   until the reveal ends. Move the rail without changing its backdrop root. */
.js-reveal #poster-rail.reveal{opacity:1;filter:none;transition:transform 1.15s var(--ease)}
/* Reveal the poster and its glass seal as siblings, never inside a fading/filter group.
   Both visibility and decoding must be ready; no timers run while images are loading. */
.js-reveal #poster-rail .poster-button{opacity:0;translate:0 18px;transition:opacity 1.05s var(--ease),translate 1.15s var(--ease),transform .7s var(--ease),box-shadow .7s var(--ease)}
.js-reveal #poster-rail.is-visible .poster-loaded>.poster-button{opacity:1;translate:0 0}
.js-reveal #poster-rail .upcoming-stamp{opacity:0;transform:translateY(10px) rotate(-9deg);transition:opacity .7s var(--ease),transform .85s var(--ease),translate .7s var(--ease),background-color 1.2s var(--ease),color 1.2s var(--ease)}
.js-reveal #poster-rail.is-visible .poster-loaded>.upcoming-stamp{opacity:1;transform:translateY(0) rotate(-9deg);transition-delay:.18s,.18s,0s,0s,0s}
@keyframes entrance{from{opacity:0;transform:translateY(30px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes dialog-in{from{opacity:0;transform:translateY(20px) scale(.97);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes dialog-out{to{opacity:0;transform:translateY(12px) scale(.98);filter:blur(3px)}}
/* Keep the touch scroller's compositing geometry stable throughout its first gesture. */
@keyframes dialog-touch-in{from{opacity:0}to{opacity:1}}
@media(hover:none) and (pointer:coarse){
  dialog[open]:not(.closing){animation-name:dialog-touch-in}
  .dialog-scroll-content{-webkit-overflow-scrolling:touch}
}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-out{to{opacity:0}}
@keyframes menu-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes panel-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
::view-transition-old(root){animation:theme-out 1.3s cubic-bezier(.45,0,.2,1) both}
::view-transition-new(root){animation:theme-in 1.3s cubic-bezier(.45,0,.2,1) both;mix-blend-mode:normal}
@keyframes theme-out{to{opacity:0;filter:blur(3px)}}
@keyframes theme-in{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
.surface-base,.surface-soft,.hero,.footer{transition:background-color 1.1s var(--ease),color 1.1s var(--ease)}
html.theme-transitioning .surface-base,html.theme-transitioning .surface-soft,html.theme-transitioning .hero,html.theme-transitioning .footer{transition:none}
/* Keep live backdrop sampling on phones: never snapshot or fade the entire page. */
html.live-theme,.live-theme body,.live-theme body::before,.live-theme .surface-base,.live-theme .surface-soft,.live-theme .hero,.live-theme .footer,.live-theme .nav-glass,.live-theme .mobile-menu,.live-theme dialog,.live-theme .image-toolbar{transition:background-color 1.2s var(--ease),color 1.2s var(--ease),border-color 1.2s var(--ease)}
.live-theme :is(h1,h2,h3,p,.eyebrow,.stat-value,.stat-label,.nav-links>a,.nav-links>button,.language-button,.icon-button):not(.reveal){transition:color 1.2s var(--ease)}

@media(min-width:1700px){.shell{width:min(1320px,calc(100% - 130px))}.hero-copy h1{font-size:102px}.hero-layout{gap:90px}.logo-card{width:365px}.poster-item{flex-basis:320px}.poster-rail{padding-inline:max(65px,calc((100vw - 1320px)/2))}}
@media(max-width:1100px){.shell{width:calc(100% - 64px)}.nav-glass{padding:0 17px;gap:12px}.brand>span{font-size:10px}.nav-links>a,.nav-links>button{padding:10px 9px;font-size:10px}.nav-tools{gap:3px;padding-left:7px}.hero-layout{gap:16px}.hero-copy h1{font-size:78px}.logo-card{width:285px}.case{gap:60px}.case-art{min-height:500px;padding:25px}.case-art>img{width:255px}.about-bottom{gap:70px}.process-layout{gap:55px}.education-layout{gap:45px}.education-poster{width:230px;left:0}.education-proof{width:145px}.education-proof img{height:250px}.footer-main{flex-wrap:wrap}.copyright{order:3;width:100%}}
@media(max-width:850px){.header{inset:12px 18px auto}.nav-glass{height:60px;border-radius:19px}.nav-links{display:none}.nav-tools{margin-left:auto;border:0}.mobile-menu-button{display:grid}.hero{min-height:780px}.hero-layout{padding-top:145px;padding-bottom:110px;grid-template-columns:1.1fr 1fr}.hero-copy h1{font-size:64px}.hero-copy>.eyebrow{font-size:8px}.hero-intro{font-size:13px}.visual{height:380px}.logo-card{width:235px;border-radius:29px}.orb-one{width:115px;height:115px}.orb-two{width:75px;height:75px}.visual-label{font-size:7px}.visual-coordinate{font-size:7px;left:0}.hero-chinese{font-size:17px}.hero-tagline{font-size:18px}.hero-baseline>span:nth-child(2){display:none}.about-bottom{grid-template-columns:1fr;gap:35px}.disciplines{max-width:500px}.section{padding-block:88px}.section-top{margin-bottom:45px}.case{gap:40px}.case-art{min-height:420px;padding:25px}.case-art>img{width:220px}.case-stats{gap:20px}.stat-value{font-size:29px}.process-layout{gap:35px}.education-layout{gap:20px}.education-art{height:490px}.education-poster{width:205px}.education-proof{width:130px}.education-proof img{height:230px}.education h2{font-size:34px}.education-body{font-size:13px}}
@media(max-width:620px){
  .shell{width:calc(100% - 44px)}.header{inset:10px 12px auto}.nav-glass{padding:0 14px;gap:5px;height:57px;border-radius:18px}.brand>span{font-size:9px;letter-spacing:.08em}.brand-mark{width:26px;height:26px}.nav-tools{gap:4px;padding:0}.language-wrap{display:none}.icon-button{width:32px;height:32px}.icon-button .icon{width:19px;height:19px}.popover{right:-40px;top:45px}
  .hero{min-height:900px;min-height:max(900px,100svh)}.hero-layout{grid-template-columns:1fr;gap:0;padding-top:100px;padding-bottom:100px}.visual-entrance{order:-1}.visual{height:285px;max-width:340px;margin-inline:auto;width:100%}.logo-card{width:205px;border-radius:26px}.orbit{width:86%;height:80%}.orbit-two{width:100%;height:52%}.orb-one{width:100px;height:100px;top:20px;right:10px}.orb-two{width:65px;height:65px;bottom:25px;left:15px}.visual-coordinate{top:8px;font-size:6px}.visual-label{bottom:10px;font-size:6px}.hero-copy{padding-top:17px}.hero-copy h1{font-size:clamp(56px,13vw,78px);line-height:.97;margin:22px 0}.hero-copy>.eyebrow{font-size:8px;letter-spacing:.14em}.hero-chinese{margin-bottom:21px;font-size:16px}.hero-tagline{font-size:18px}.hero-intro{font-size:12px;max-width:300px}.hero-actions{margin-top:23px}.button{padding:12px 22px;min-height:43px;font-size:11px}.hero-baseline{bottom:22px;font-size:7px}.scroll-hint{font-size:6px;gap:7px}.scroll-line{width:20px}
  .section{padding-block:72px}.section-top{margin-bottom:34px}.eyebrow{font-size:8px;letter-spacing:.16em}.section-note{font-size:10px}.statement{font-size:clamp(31px,8.1vw,44px);margin-bottom:30px}.about-bottom{gap:25px}.about-bottom>p{font-size:14px;line-height:1.95}.disciplines{gap:0 25px}.disciplines>span{font-size:11px}.section-heading{display:block;margin-bottom:35px}.section-heading h2,.section-title{font-size:36px}.section-heading>p{font-size:12px;margin-top:22px}.works{padding-bottom:37px}.poster-rail{gap:15px;padding-inline:22px;padding-bottom:20px}.poster-item{flex-basis:64vw}.poster-button{border-radius:10px}.poster-plus{opacity:1;transform:none;width:27px;height:27px}.poster-name{font-size:12px}.rail-caption{font-size:9px}.rail-controls{gap:7px}#rail-count{display:none}.round-button{width:32px;height:32px}
  .cases .section-title{margin-bottom:25px}.case{grid-template-columns:1fr;gap:30px;padding:20px 0 50px}.case+.case{padding-top:50px}.case:nth-child(even) .case-art{order:0}.case-art{min-height:420px;border-radius:18px;padding:30px}.case-art>img{width:240px;max-height:370px;object-fit:contain}.case-copy{padding-inline:4px}.case h3{font-size:30px;margin-bottom:15px}.case-type{margin-bottom:13px}.case-description{font-size:13px;max-width:none;margin-bottom:25px}.case-stats{gap:40px;margin-bottom:24px}.stat-value{font-size:31px}.stat-label{font-size:10px}.data-note{font-size:9px;margin-top:0}.process-layout{grid-template-columns:1fr;gap:28px;margin-top:30px}.process-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.process-tab{padding:15px 0;gap:10px}.process-tab span:nth-child(2){font-size:13px}.process-tab .icon{width:11px}.process-image-wrap{height:265px;border-radius:13px}.process-description{gap:18px;min-height:145px}.process-description p{font-size:12px}
  .education-layout{grid-template-columns:1fr;gap:35px}.education h2{font-size:36px}.education-body{max-width:none}.education-caption{margin-top:27px}.education-art{height:480px;width:320px;max-width:100%;margin-inline:auto}.education-poster{width:220px;left:12px;top:10px}.education-proof{width:137px;bottom:15px;right:0}.education-proof img{height:240px}.education-art-label{font-size:8px;bottom:0}.contact-section{padding-block:86px}.contact-section h2{font-size:34px}.contact-section>.shell>p:not(.eyebrow){font-size:11px}.footer{padding-top:30px}.footer-main{justify-content:center;gap:22px}.footer-brand{width:100%;justify-content:center}.copyright{font-size:8px;order:3}.footer-bottom{justify-content:center;flex-wrap:wrap;font-size:8px;padding-top:24px}.footer-bottom>span:last-child{display:none}.contact-dialog{padding:48px 22px 24px;width:360px}.wechat-id{font-size:21px}.project-detail{grid-template-columns:1fr}.project-cover{padding:35px 50px 20px}.project-cover>img{max-height:340px;object-fit:contain}.project-copy{padding:28px 24px}.project-copy h2{font-size:27px}.project-evidence{padding:0 24px 25px}.project-dialog{max-height:90svh;border-radius:20px}
}
/* Keep the same small type increase at the compact layout sizes. */
.statement:lang(zh),.section-heading h2:lang(zh),.section-title:lang(zh),.case h3:lang(zh),.education h2:lang(zh),.contact-section h2:lang(zh),.project-copy h2:lang(zh){letter-spacing:-.008em}
/* Actual variable-font weights, shared across platforms without synthetic strokes. */
.statement:lang(zh),.section-heading h2:lang(zh),.section-title:lang(zh),.education h2:lang(zh),.contact-section h2:lang(zh){font-weight:800}
.case h3,.project-copy h2,.all-work h3{font-weight:700}
.statement .heading-latin{font-weight:700}
@media(max-width:620px){
  .project-dialog{width:calc(100vw - 44px);max-width:calc(100vw - 44px);max-height:66svh}
  .project-cover{padding:22px 44px 14px;justify-items:center}
  .project-cover>img{width:auto;max-width:100%;height:clamp(132px,22svh,190px);max-height:none;object-fit:contain}
  .project-copy{padding:20px 22px 25px}
  .project-copy>.eyebrow{font-size:9px;line-height:1.6;margin:0}
  .project-copy h2{font-size:25px;margin:10px 0 12px}
  .project-copy>p:not(.eyebrow){margin:0 0 14px}
  .project-actions{gap:9px;margin-top:12px}
  .project-actions>.button{font-size:12px;padding:12px 15px;min-height:43px}
  .project-story{margin:20px 0}
}
.hero-chinese,.project-story h3,.nav-links>a,.nav-links>button,.mobile-menu>a,.mobile-menu>button,.language-button,.button,.text-button,.brand>span,.eyebrow{font-weight:700}
.brand>span{font-family:inherit}
.visual .orb-one{width:40%;height:auto;right:8%;top:11%}
.visual .orb-two{width:24%;height:auto;left:10%;bottom:12%}
@media(max-width:620px){
  .works .section-top{margin-bottom:22px}
  .works .section-heading{margin-bottom:22px}
  .works .section-heading>p{margin-top:15px}
  .works .poster-item{flex-basis:clamp(150px,min(58vw,calc((100svh - 506px)*.666667)),245px)}
  .works .poster-rail{padding-bottom:12px}
  .works .rail-bottom{margin-top:14px}
}
@media (min-width:851px) {
  .works{height:100svh;min-height:780px;padding-top:112px;padding-bottom:24px;display:flex;flex-direction:column}
  .works>.shell{flex-shrink:0}
  .works .section-top{margin-bottom:36px}
  .works .section-heading{margin-bottom:30px}
  .works .poster-rail{container-type:size;flex:1;min-height:0}
  .works .poster-item{flex:0 0 clamp(170px,calc((100cqh - 120px)*.666667),320px)}
  .works .rail-bottom{margin-top:12px}
}
@media (min-width:851px) and (max-width:1100px) {
  .nav-links>a,.nav-links>button{font-size:11px}
}
@media (max-width:850px) {
  .hero-intro,.education-body{font-size:14px}
}
@media (max-width:620px) {
  .button:not(.copy-button){min-height:45px;padding:12px 23px}
  .hero-intro{font-size:13px}
  .button{font-size:12px}
  .about-bottom>p{font-size:15px}
  .disciplines>span{font-size:12px}
  .section-heading>p,.poster-name{font-size:13px}
  .case-description{font-size:14px}
  .stat-label{font-size:11px}
  .data-note{font-size:10px}
  .process-tab span:nth-child(2){font-size:14px}
  .process-description p{font-size:13px}
  .contact-section>.shell>p:not(.eyebrow){font-size:12px}
}
/* Avoid intersecting SF glyph contours in iOS outlined text. */
@media(hover:hover) and (pointer:fine){
  .education-project-card:hover{transform:translate3d(0,-10px,0) rotate(calc(var(--card-angle)*.65));box-shadow:0 40px 65px #0008;z-index:4}
}
/* Match desktop hover exactly, without a sticky emulated touch hover. */
.education-project-card.is-touch-pressed{transform:translate3d(0,-10px,0) rotate(calc(var(--card-angle)*.65));box-shadow:0 40px 65px #0008;z-index:4}
.education-project-card:focus-visible{outline:2px solid #b8b0ff;outline-offset:5px;z-index:4}
@media(max-width:1100px){
  .education-project-card{width:205px}
  .education-proof{width:115px;bottom:14px}
  .education-proof img{height:170px}
}
@media(min-width:621px) and (max-width:850px){
  .education-project-card{width:175px}
  .education-card-snow{left:32%;top:110px}
  .education-proof{width:105px}
  .education-proof img{height:150px}
}
@media(max-width:620px){
  .education-project-card{width:190px}
  .education-card-cats{left:3%;top:25px}
  .education-card-snow{left:35%;top:95px}
  .education-opc{max-width:none;font-size:13px}
  .education-proof{width:105px;bottom:18px;right:0}
  .education-proof img{height:150px}
}
.education-training-card{width:min(285px,80%);right:8px;bottom:-25px;transform:translate3d(0,0,0) rotate(-5deg);transition:transform .85s var(--ease);border-radius:13px;background:#161825;z-index:var(--education-layer,3)}
.education-training-card img{height:auto;aspect-ratio:1270/714;object-fit:contain}
.education-training-card span{padding:12px 10px;font-size:10px;color:#d4d0e4}
.education-training-card:focus-visible{outline:2px solid #b8b0ff;outline-offset:5px}
@media(hover:hover) and (pointer:fine){.education-training-card:hover{transform:translate3d(0,-6px,0) rotate(-2deg)}}
.education-training-card:is(.is-touch-pressed,.is-touch-pending,.is-project-open){transform:translate3d(0,-6px,0) rotate(-2deg)}
@media(max-width:1100px){.education-training-card{width:min(245px,80%)}}
@media(min-width:621px) and (max-width:850px){.education-training-card{width:min(220px,80%)}}
@media(max-width:620px){.education-training-card{width:225px;max-width:76%;right:6px;bottom:-15px}.education-training-card span{font-size:9px;padding:10px}}
@media(max-width:850px){
  .header{top:calc(12px + env(safe-area-inset-top,0px));left:max(18px,env(safe-area-inset-left,0px));right:max(18px,env(safe-area-inset-right,0px))}
  .hero-layout{padding-top:calc(145px + env(safe-area-inset-top,0px))}
}
@media(max-width:620px){
  .header{top:calc(10px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px))}
  .hero-layout{padding-top:calc(100px + env(safe-area-inset-top,0px))}
}
@media(max-width:620px){.hero-copy h1{font-size:clamp(42px,calc(16.129vw - 7.742px),78px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.js-reveal .reveal{opacity:1;transform:none;filter:none}.visual,.logo-card,.orb,.orbit{translate:none}.poster-button:hover,.case-art:hover>img{transform:none}}
/* Android lightweight presentation: retain entrance timing and motion, but
   avoid animated blur rasterization. Static glass surfaces remain unchanged. */
.performance-lite :is(.reveal,.entrance,.poster-button>img,.process-display img,dialog){filter:none!important}
.performance-lite dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
.performance-lite dialog.closing:not(.pull-closing){animation:dialog-light-out 180ms ease-in forwards}
.performance-lite dialog.closing::backdrop{animation-duration:180ms}
@keyframes dialog-light-out{to{opacity:0}}
.case-art{transition:background-color 1.2s var(--ease)}
.js-reveal .case-art.reveal{transition:opacity 1.05s var(--ease),transform 1.15s var(--ease),filter 1.05s var(--ease),background-color 1.2s var(--ease)}
.performance-lite .case-art,.performance-lite.js-reveal .case-art.reveal{transition:opacity 1.05s var(--ease),transform 1.15s var(--ease)}
.performance-lite .case-art::before{transition:none}
.performance-lite .logo-card{transform:rotate(7deg)}
.performance-lite .visual,.performance-lite .orb,.performance-lite .hero-backdrop{transform:none}
.performance-lite .orbit{transform:rotate(-28deg)}
.performance-lite .orbit-two{transform:rotate(-35deg)}
.performance-lite .visual{translate:none}
.education-project-card:is(.is-project-open,.is-touch-pending){transform:translate3d(0,-10px,0) rotate(calc(var(--card-angle)*.65));box-shadow:0 40px 65px #0008;z-index:4}
:is(.education-project-card,.education-training-card).is-layer-raised{z-index:4;will-change:transform}
@media(hover:none),(pointer:coarse){
  .education-project-card{transition:transform .85s var(--ease)}
  .education-project-card:is(.is-touch-pressed,.is-touch-pending,.is-project-open){box-shadow:0 30px 55px #0006}
}
.performance-lite.theme-instant,.performance-lite.theme-instant *,.performance-lite.theme-instant *::before,.performance-lite.theme-instant *::after{transition:none!important}
/* Preserve the finished outline, without tracing glyphs or pushing REAL aside. */
.performance-lite .vision-sequence .hero-word{animation:none;transform:none}
.performance-lite .vision-glyph-stroke{animation:none;stroke-dashoffset:0;opacity:1}
.performance-lite .vision-glyph-fill{animation:none;fill-opacity:.08}
.performance-menu{width:285px;min-width:0}
.performance-option{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:13px 12px;border:0;border-radius:12px;background:transparent;color:var(--nav-ink);text-align:left;font:inherit;cursor:pointer}
.performance-option:hover{background:var(--nav-hover)}
.performance-copy{display:grid;gap:7px;font-size:13px;font-weight:600;line-height:1.4}
.performance-copy small{font-size:11px;font-weight:400;line-height:1.6;color:var(--nav-muted)}
.performance-switch{flex:0 0 32px;position:relative;width:32px;height:19px;border:1px solid var(--nav-line);border-radius:20px;background:var(--nav-hover);transition:background-color .25s var(--ease)}
.performance-switch::after{content:"";position:absolute;left:3px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--nav-muted);transition:transform .25s var(--ease),background-color .25s var(--ease)}
[data-smooth-toggle][aria-checked="true"] .performance-switch{background:var(--accent);border-color:transparent}
[data-smooth-toggle][aria-checked="true"] .performance-switch::after{transform:translateX(13px);background:#fff}
.mobile-performance{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--nav-line)}
.mobile-performance .performance-copy{font-size:15px}
@media(max-width:850px){.performance-wrap{display:none}}
/* Approved typography: shared CTA metrics and a small display-size lift. */
.button,.button:not(.copy-button),.project-actions>.button{font-size:15px;font-weight:700;line-height:1.4;padding-top:15px;padding-bottom:13px}
.statement{font-size:clamp(42px,5.4vw,80px)}
.section-heading h2,.section-title{font-size:clamp(40px,4.4vw,66px)}
.education h2{font-size:clamp(37px,4vw,57px)}
.contact-section h2{font-size:clamp(39px,5vw,68px)}
@media(max-width:620px){
  .statement{font-size:clamp(33px,8.1vw,46px)}
  .section-heading h2,.section-title,.education h2{font-size:38px}
  .contact-section h2{font-size:36px}
  .case h3{font-size:36px}
  .button{padding-top:13px;padding-bottom:11px}
  .button:not(.copy-button){padding-top:13px;padding-bottom:11px}
  .project-actions>.button{padding:12px 15px 10px}
}