:root{color-scheme:dark;--bg:#090a0b;--text:#e0e0d9;--muted:#9b9d98;--accent:#52c6b8;--accent2:#5f3268;--rule:#1f1a1b;--mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;--serif-cn:'Noto Serif SC','Noto Serif TC','Source Han Serif SC','Source Han Serif TC','Songti SC','STSong','SimSun',serif;--serif-en:'EB Garamond','Cormorant Garamond','Times New Roman',Georgia,serif;--display-en:'Playfair Display','Cormorant Garamond','Times New Roman',Georgia,serif;--sans-cn:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;--display:'Cormorant Garamond','Times New Roman',Georgia,serif;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{background:var(--bg);overscroll-behavior:none}body{margin:0;color:var(--text);font-family:var(--sans-cn);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overscroll-behavior:none}#entrance-title,.hero-copy h1,.hero-copy .name-cn,.graph-heading,.category h2,.core strong,.detail-top h1,.about-page h1,#contact-page h1,.about-page h2,.detail-lead,.detail-copy p,.detail-copy h2,.detail-meta,.about-page p,.next-work strong{font-family:var(--serif-cn);font-weight:400;letter-spacing:.02em}.english,.ascii-label{font-family:var(--display);font-style:italic;letter-spacing:.04em}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}button:disabled{cursor:default}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:1px solid #e6e7dc;outline-offset:7px}button,a,input{touch-action:manipulation}[hidden]{display:none!important}.mono,.eyebrow,.site-header,.graph-top,.graph-bottom{font-family:var(--mono);font-size:12px;letter-spacing:.1em}.eyebrow{color:var(--muted);line-height:1.8}
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:90px;padding:0 44px;background:linear-gradient(#090a0bdb,transparent)}.brand{font-size:12px;letter-spacing:.16em;display:flex;align-items:center}.brand span{font-size:12px;color:var(--muted);margin-left:12px;display:flex;align-items:center}.site-header nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:30px;align-items:center}.site-header nav a,.site-header nav button{font-size:12px;min-height:44px;display:flex;align-items:center;gap:5px}.site-header sup{font-size:10px;color:var(--accent);align-self:center}.site-header a:hover,.site-header button:hover{color:white}.lang-toggle{display:flex;align-items:center;gap:8px;margin-left:30px;font:12px var(--mono);letter-spacing:.15em;color:var(--muted)}.lang-toggle .lang-opt{padding:6px 4px;background:transparent;border:0;cursor:pointer;color:var(--muted);font:inherit;letter-spacing:inherit;transition:color .3s var(--ease)}.lang-toggle .lang-opt.is-active{color:var(--text)}.lang-toggle .lang-opt:hover:not(.is-active){color:#d8dcd0}.lang-toggle .lang-sep{color:#444;font-size:11px;align-self:center}#ocean{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;transform-origin:50% 50%;transition:transform 3s cubic-bezier(.65,0,.35,1),filter 3s cubic-bezier(.65,0,.35,1);will-change:transform,filter}#app{position:relative;min-height:100svh;outline:0}.intro-open{overflow:hidden}
#entrance{position:fixed;inset:0;z-index:50;isolation:isolate;background:#090a0b45;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* 10% black tint overlay sitting above the blurred canvas but below the
   text — adds a uniform dim layer that lifts foreground contrast. */
#entrance::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.1);pointer-events:none;z-index:1}
.entrance-center{position:relative;z-index:2;text-align:center;margin-top:-5vh;will-change:transform}
#entrance-title{font-size:clamp(60px,11vw,162px);font-weight:400;line-height:.95;letter-spacing:-.065em;margin:0}
#entrance-title span{display:block;font-size:clamp(20px,2.5vw,36px);letter-spacing:.55em;margin:25px 0 0 .55em}.entrance-line-en{opacity:.38}
#enter{font:12px var(--mono);letter-spacing:.12em;border-top:1px solid #b4b7ae;border-bottom:1px solid #5b605a;padding:20px 4px;min-width:240px;text-align:center;margin:36px auto 0;display:block}
.entrance-name{font:14px var(--mono);letter-spacing:.32em;color:var(--muted);margin:32px 0 0;white-space:nowrap}
.entrance-intro{font-size:14px;line-height:1.7;color:#a8b2a6;letter-spacing:.08em;margin:14px auto 0;max-width:420px;white-space:normal}
.entry-load{width:240px;height:1px;background:#2c302d;margin:24px auto 0;position:relative;overflow:hidden;opacity:0;transition:opacity .4s var(--ease)}
.entry-load.is-loading{opacity:1}
.entry-load-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#52c6b8;transition:width .45s var(--ease)}
.entry-load-fill::after{content:'';position:absolute;right:0;top:-3px;bottom:-3px;width:1px;background:#e6e7dc;opacity:0;transition:opacity .25s}
.entry-load.is-complete .entry-load-fill::after{opacity:1}
#enter span{color:var(--muted);transition:transform .3s;float:none;margin-left:14px}
#enter:hover span{transform:translateX(5px)}
#enter:hover{border-color:#eee}
.journey{height:100svh;overflow:hidden;position:relative}.panels{display:flex;width:200%;height:100%;transform:translate3d(0,0,0);transition:transform 2.1s var(--ease);will-change:transform}.journey[data-scene="1"] .panels{transform:translate3d(-50%,0,0)}.home-panel,.graph-panel{flex:0 0 50%;width:50%;position:relative;height:100%;overflow:hidden}.home-panel{padding:0 6vw 10vh;display:flex;align-items:flex-end}.hero-copy{max-width:660px}.hero-copy h1{font-size:clamp(78px,10vw,155px);font-weight:400;line-height:.81;letter-spacing:-.065em;margin:24px 0 30px}.hero-copy h1 span{display:block;margin-left:9.5vw}.hero-copy .name-cn{font-size:18px;letter-spacing:.5em;margin-bottom:32px}.hero-copy .description{font-size:16px;line-height:1.85;color:#b6bbb4;max-width:380px}.home-side{position:absolute;right:44px;top:34%;writing-mode:vertical-rl;font:12px var(--mono);letter-spacing:.2em;color:#8e9690}.scene-footer{position:absolute;left:44px;right:44px;bottom:28px;display:flex;align-items:center;justify-content:space-between;font:12px var(--mono);color:var(--muted);letter-spacing:.1em}.scroll-mark{display:flex;align-items:center;gap:14px;color:var(--text)}.scroll-mark i{display:block;width:50px;height:1px;background:#878d86;position:relative}.scroll-mark i:after{content:'>';position:absolute;right:-1px;top:-8px}.scene-pips{display:flex;gap:9px;align-items:center}.scene-pips i{width:5px;height:5px;border:1px solid #989e96}.scene-pips i.active{background:#c3c8bd}
/* V19 — second-page panel: dark wash lives on a pseudo-layer so we
   can blur the canvas underneath (backdrop-filter) and fade the panel
   edges with a radial mask without affecting the constellation content
   rendered on top. */
/* V20 — soft incoming edge for panel 2: as the .panels slide left,
   the graph-panel's leading (left) edge would otherwise cut a hard
   vertical line across the canvas. A 40px linear-gradient mask on the
   panel itself fades the leading 40px from transparent to opaque so
   the slide-in reads as a soft gradient. The 40px is wide enough to
   feel like a transition (≥5% of the panel on a 640px column) but
   stops just before the title offset (left:44px). */
.graph-panel{background:transparent;-webkit-mask-image:linear-gradient(to right, transparent 0%, black 40px, black 100%);mask-image:linear-gradient(to right, transparent 0%, black 40px, black 100%)}.graph-panel::before{content:'';position:absolute;inset:0;background:#090a0b7a;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 92% 85% at 50% 50%, black 60%, transparent 100%);mask-image:radial-gradient(ellipse 92% 85% at 50% 50%, black 60%, transparent 100%)}.graph-top{position:absolute;left:44px;right:44px;top:115px;display:flex;justify-content:space-between;z-index:1;align-items:start;pointer-events:none}.graph-heading{font-size:21px;letter-spacing:.04em;margin:10px 0 0;font-family:Arial,'PingFang SC',sans-serif;font-weight:400}.graph-top>div{pointer-events:auto}.overview-button{font:12px var(--mono);letter-spacing:.08em;border-bottom:1px solid var(--rule);padding:12px 0;min-width:130px;text-align:right;pointer-events:auto}.graph-viewport{position:absolute;inset:100px 28px 28px;overflow:hidden;touch-action:none;z-index:2}@media(max-aspect-ratio:1/1){.graph-viewport{inset:90px 0 0}}.graph-scene{position:absolute;left:50%;top:50%;width:1600px;height:1000px;margin-left:-800px;margin-top:-500px;transform-origin:800px 500px;will-change:transform;z-index:3}.connections{position:absolute;inset:0;width:1600px;height:1000px;pointer-events:none;overflow:visible;z-index:1}.connections line{stroke:#8a968a;stroke-opacity:.55;stroke-width:1.5;stroke-dasharray:2 7}.connections line.selected{stroke:#d79a91;stroke-opacity:.78;stroke-width:1.8}.connections line.child-link{stroke-opacity:.32}.graph-group,.core-wrap{position:absolute;left:800px;top:500px;width:0;height:0;will-change:transform;transition:opacity .45s}/* V18 — 60% larger constellation nodes: .core (main) and .category (style
   fields) both scale uniformly from their anchored center via a 1.6
   scale appended to the existing translate(-50%,-50%) centering trick. */
.category,.core{position:absolute;transform:translate(-50%,-50%) scale(1);transform-origin:50% 50%;text-align:center;width:280px;padding:26px 14px;z-index:4;touch-action:none;user-select:none}.category{cursor:grab}.category:active{cursor:grabbing}.category .glyph{display:block;font:26px var(--mono);letter-spacing:.1em;color:#c4d0c4;margin-bottom:18px}.category h2{font-size:30px;font-weight:400;letter-spacing:.06em;margin:0;white-space:nowrap}.category .category-meta{display:block;color:#899589;font:13px var(--mono);margin-top:16px;letter-spacing:.03em}.category.selected .glyph,.category:hover .glyph{color:#d39289}.category.selected h2{color:#fff}.core{width:190px;cursor:pointer}.core-symbol{font:26px var(--mono);color:var(--accent);display:block;margin-bottom:18px}.core strong{display:block;font-size:22px;line-height:1.65;font-weight:400;letter-spacing:.1em}.core small{display:block;font:12px var(--mono);line-height:1.7;letter-spacing:.08em;color:#899188;margin-top:14px}
.work-node{position:absolute;left:0;top:0;width:130px;z-index:3;text-decoration:none;touch-action:none;transition:opacity .5s var(--ease);opacity:.32;will-change:transform}.work-node.active{opacity:1;width:180px}.work-node .media{width:100%;aspect-ratio:1.55;position:relative;overflow:hidden;border:1px solid #68716660;background:#101411}.media img{width:100%;height:100%;object-fit:cover;display:block}.media .ascii-cover{position:absolute;inset:0;width:100%;height:100%;background:#0b100d;transition:opacity .35s var(--ease);pointer-events:none}.work-node:hover .ascii-cover,.work-node:focus-visible .ascii-cover,.work-node.revealed .ascii-cover{opacity:0}.media-corner{position:absolute;top:7px;left:8px;font:10px var(--mono);color:#bec6bb}.work-node h3{font-weight:400;font-size:13px;line-height:1.45;margin:10px 0 0;white-space:normal}.work-node .work-year{color:#929d91;font:10px var(--mono);margin-top:5px}.work-node .work-summary{font-size:8px;line-height:1.55;color:#aebaaa;margin:6px 0 0;display:none}.work-node.active .work-summary{display:block}.graph-group.faded{opacity:.04;pointer-events:none}.core-wrap.faded{opacity:.08;pointer-events:none}.graph-bottom{position:absolute;bottom:28px;left:44px;right:44px;color:var(--muted);display:flex;justify-content:space-between;gap:25px;align-items:flex-end}.graph-bottom p{margin:0;line-height:1.8}#graph-instruction{font-size:13px;color:#7d857c;font-family:var(--mono);letter-spacing:.04em;margin:14px 0 0;line-height:1.6;max-width:380px}.graph-key{display:flex;gap:18px;font-size:11px}.graph-key span:first-child{color:#d0dace}.graph-page-hint{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.18em;color:var(--muted);text-decoration:none;transition:color .25s var(--ease)}.graph-page-hint:hover{color:var(--accent)}.mobile-only{display:none}
.detail,.about-page{padding:110px 6vw 70px;background:transparent;min-height:100svh;overflow-x:hidden;box-sizing:border-box;position:relative}.detail::before{content:'';position:absolute;inset:0;background:rgba(5,5,5,.98);z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%);mask-image:linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.about-page::before{content:'';position:absolute;inset:0;background:rgba(5,5,5,.98);z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%);mask-image:linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%)}.detail{width:100%;max-width:880px;margin-left:auto;margin-right:auto;overflow-x:hidden;box-sizing:border-box}.detail-top{width:100%;max-width:600px;margin-left:auto;margin-right:auto;box-sizing:border-box;padding:25px 0 55px;border-bottom:1px solid var(--rule)}.back-link{width:100%;max-width:600px;margin-left:auto;margin-right:auto;box-sizing:border-box;font:12px var(--mono);color:var(--muted);letter-spacing:.08em;display:block;padding:14px 0}.detail-image{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.detail-image .media{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.detail-image .media img{max-width:100%;height:auto;display:block}.detail-image figcaption{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.detail-copy{width:100%;max-width:600px;margin-left:auto;margin-right:auto;box-sizing:border-box}.media-slots{width:100%;max-width:600px;margin-left:auto;margin-right:auto;box-sizing:border-box}.detail-gallery{width:100%;max-width:600px;margin-left:auto;margin-right:auto;box-sizing:border-box}.detail-nav{width:100%;max-width:600px;margin-left:auto;margin-right:auto;box-sizing:border-box}.next-work{width:100%;max-width:600px;margin-left:auto;margin-right:auto;box-sizing:border-box}@keyframes detailFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.detail.detail-enter{animation:detailFadeIn .65s cubic-bezier(.2,.8,.2,1) both}.detail-top h1{font-size:clamp(34px,5vw,64px);font-weight:400;line-height:1.18;letter-spacing:-.045em;margin:20px 0}.detail-top .english{font:clamp(11px,.78vw,13px) var(--mono);color:var(--muted);letter-spacing:.02em;line-height:1.7}.detail-meta{font-size:clamp(11px,.78vw,13px);color:#a7b1a5;line-height:1.9;display:flex;gap:25px;flex-wrap:wrap}.detail-lead{font-size:clamp(16px,1.6vw,22px);line-height:1.85;max-width:900px;margin:42px 0 0}.detail-image{margin:55px 0 0}.detail-image .media{aspect-ratio:16/9;max-height:650px;background:#131815;position:relative;border:1px solid var(--rule);overflow:hidden}.detail-image figcaption{font:12px var(--mono);color:var(--muted);margin-top:14px}.detail-copy{max-width:1100px;display:grid;grid-template-columns:200px 1fr;gap:60px;padding:55px 0;border-bottom:1px solid var(--rule)}.detail-copy h2{font-size:clamp(12px,.8vw,13px);font-weight:400;margin:4px 0;color:#9ba697}.detail-copy p{font-size:clamp(13px,.95vw,16px);line-height:1.95;margin:0 0 20px}.detail-copy p:last-child{margin:0}.media-slots{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;padding:50px 0}.media-slot{border:1px solid var(--rule);padding:28px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}.media-slot h2{font-size:clamp(12px,.8vw,14px);font-weight:400;margin:0}.media-slot p{font-size:clamp(12px,.8vw,14px);color:var(--muted);line-height:1.8}.media-slot audio,.media-slot video{width:100%}.next-work{display:flex;justify-content:space-between;font-size:clamp(14px,1.5vw,17px);padding:30px 0;border-top:1px solid var(--rule)}.about-page{max-width:1200px}.about-page h1{font-weight:400;font-size:clamp(45px,8vw,100px);margin:25px 0 50px}.about-page p{font-size:21px;line-height:1.9;max-width:850px}.about-page .bio-small{font-size:16px;color:var(--muted)}.notes-list{display:flex;flex-wrap:wrap;gap:16px;margin:35px 0;color:#a7b4a4;font:13px var(--mono)}.error-page{padding:180px 6vw;position:relative;min-height:100svh}.error-page h1{font-weight:400;font-size:38px}.error-page a{display:block;padding:15px 0}.still *{animation:none!important;transition-duration:0s!important}.noscript{position:fixed;inset:auto 20px 20px;z-index:100;background:#121212;padding:30px}
.intro-open #app,.intro-open .site-header{visibility:hidden}
.work-node.active h3{font-size:calc(13px / var(--graph-scale,1))}
.work-node.active .work-year{font-size:calc(10px / var(--graph-scale,1))}
.work-node.active .work-summary{font-size:calc(8px / var(--graph-scale,1))}
.graph-panel.focused .category h2{font-size:calc(28px / var(--graph-scale,1))}
.graph-panel[data-layout="desktop"]:not(.focused) .category h2{font-size:max(30px,calc(22px / var(--graph-scale,1)))}
.graph-panel[data-layout="desktop"]:not(.focused) .core strong{font-size:max(22px,calc(17px / var(--graph-scale,1)))}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:0s!important}}

/* V6: lighter entrance, asymmetric signal map, and vertical third scene. */
.entrance-noise{position:absolute;inset:16% 0;color:#829087;opacity:.13;overflow:hidden;pointer-events:none}.entrance-noise i{position:absolute;display:block;white-space:nowrap;font-style:normal;letter-spacing:.24em;animation:signalDrift 7s steps(80,end) infinite}.entrance-noise i:nth-child(1){top:5%;left:-8%;animation-duration:8.3s}.entrance-noise i:nth-child(2){top:48%;right:-12%;animation-direction:reverse;animation-duration:5.7s}.entrance-noise i:nth-child(3){bottom:3%;left:18%;animation-duration:11s}.releasing .entrance-center,.releasing .entrance-top,.releasing .entrance-bottom{visibility:visible;animation:entranceSlice .7s steps(12,end) both}.releasing .entrance-noise{opacity:.6;filter:contrast(2)}
.panels{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,100svh);width:200%;height:200svh;z-index:1}.journey[data-scene="1"] .panels{transform:translate3d(-50%,0,0)}.journey[data-scene="2"] .panels{transform:translate3d(-50%,-50%,0)}.home-panel,.graph-panel,.contact-panel{width:100%;height:100svh}.home-panel{grid-column:1;grid-row:1}.graph-panel{grid-column:2;grid-row:1}.contact-panel{grid-column:2;grid-row:2}
.connections line{display:none}.connections path{fill:none;stroke:#91a092;stroke-opacity:.46;stroke-width:1.2;stroke-dasharray:2 7}.connections path.selected{stroke:var(--accent2);stroke-opacity:.85;stroke-width:1.6}.connections path.child-link{stroke-opacity:.24}.connections text{fill:#aab7aa;opacity:.58;font:13px var(--mono);letter-spacing:.12em}.connections text.child-link{opacity:.22}.connections text.selected{fill:var(--accent2);opacity:.95}
@keyframes signalDrift{0%{transform:translate3d(-4vw,0,0)}45%{transform:translate3d(5vw,2px,0)}47%{transform:translate3d(-2vw,-5px,0)}100%{transform:translate3d(8vw,0,0)}}@keyframes entranceSlice{0%{opacity:1;clip-path:inset(0)}35%{transform:translate3d(-7px,0,0);clip-path:polygon(0 0,100% 0,100% 22%,0 30%,0 61%,100% 55%,100% 100%,0 100%)}75%{transform:translate3d(24px,-4px,0);opacity:.55}100%{transform:translate3d(-10vw,0,0);opacity:0;filter:blur(2px)}}
.contact-panel{position:relative;overflow:hidden;background:rgba(9,10,11,.35);padding:130px 7vw 70px;display:flex;align-items:center;z-index:2}.contact-index{position:absolute;top:120px;left:44px;color:var(--muted)}.contact-copy{max-width:760px}.contact-copy h2{font-size:clamp(56px,8vw,120px);font-weight:400;line-height:.92;letter-spacing:-.055em;margin:22px 0 42px}.contact-copy>p:not(.eyebrow){font-size:18px;line-height:1.8;color:#aeb5ad}.contact-slots{margin-top:44px;display:flex;flex-direction:column;gap:13px;font:12px var(--mono);letter-spacing:.1em;color:#b9c3b9}.contact-ascii{position:absolute;right:8vw;top:28%;font-size:clamp(12px,1.4vw,20px);line-height:2.2;color:#6f8273;transform:rotate(-7deg);animation:contactFloat 6s ease-in-out infinite}.contact-up{position:absolute;bottom:35px;right:44px;font:12px var(--mono);color:var(--muted)}@keyframes contactFloat{50%{transform:translate3d(-18px,16px,0) rotate(-4deg);color:#aa6464}}

/* V7: focus pull and tactile ASCII field frames. */
.entrance-center{animation:farFocus 1.35s cubic-bezier(.16,.76,.18,1) both}.entrance-noise{animation:noiseFocus 1.5s ease-out both}.archive-entered .home-panel{animation:pageFocus 1.05s cubic-bezier(.16,.8,.2,1) both}.category:before{content:'┌ · · · · · · · · · ┐\A:                   :\A└ · · · · · · · · · ┘';white-space:pre;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:12px/3.8 var(--mono);letter-spacing:.15em;color:#7d8d80;opacity:.24;transform:scale(.92);transition:opacity .35s var(--ease),color .35s var(--ease),transform .55s var(--ease);pointer-events:none}.category:hover:before,.category:focus-visible:before,.category.selected:before{opacity:.78;color:#c9d3c8;transform:scale(1.03)}.category.selected:before{color:#bd6d6d}.graph-group{filter:drop-shadow(0 0 0 transparent)}
@keyframes farFocus{0%{transform:scale(.38) translate3d(0,6vh,0);filter:blur(10px);opacity:.08;letter-spacing:.18em}55%{filter:blur(1.2px);opacity:.72}100%{transform:scale(1) translate3d(0,0,0);filter:blur(0);opacity:1}}@keyframes noiseFocus{0%{transform:scale(.45);opacity:.03;filter:blur(5px)}100%{transform:scale(1.08);opacity:.13;filter:blur(0)}}@keyframes pageFocus{0%{transform:scale(.68);filter:blur(12px);opacity:.05}62%{filter:blur(1px);opacity:.86}100%{transform:scale(1);filter:blur(0);opacity:1}}

/* V8: one continuous camera move out of the ASCII sea. */
#entrance{background:transparent}.entrance-noise{display:none}.archive-releasing #app{visibility:visible}.archive-releasing .site-header{visibility:visible;opacity:0}.archive-releasing .home-panel{animation:pageFromSea .88s cubic-bezier(.16,.8,.18,1) both}.archive-releasing .entrance-center,.archive-releasing .entrance-top,.archive-releasing .entrance-bottom{visibility:visible;animation:interfaceIntoSea .7s cubic-bezier(.4,0,.2,1) both}.archive-entered .home-panel{animation:none}.archive-entered .site-header{animation:headerResolve .65s ease-out both}#release{display:none}
@keyframes pageFromSea{0%{transform:scale(.54);filter:blur(14px);opacity:0}38%{opacity:.18}100%{transform:scale(1);filter:blur(0);opacity:1}}@keyframes interfaceIntoSea{0%{transform:scale(1);opacity:1;filter:blur(0)}55%{opacity:.45}100%{transform:scale(1.55);opacity:0;filter:blur(8px)}}@keyframes headerResolve{0%{opacity:0}100%{opacity:1}}
.intro-open.archive-releasing #app,.intro-open.archive-releasing .site-header{visibility:visible}

/* V9: the first page is physically revealed through an opening in the sea. */
.entrance-center{animation:none}.intro-open.archive-releasing .home-panel{animation:pageThroughSea 1.25s cubic-bezier(.18,.75,.16,1) both;transform-origin:50% 56%}.intro-open.archive-releasing .entrance-center,.intro-open.archive-releasing .entrance-top,.intro-open.archive-releasing .entrance-bottom{animation:entranceSubmerge .72s cubic-bezier(.4,0,.2,1) both}.archive-entered .home-panel{clip-path:none;animation:none}
@keyframes pageThroughSea{0%{clip-path:circle(0 at 50% 56%);transform:scale(.82);filter:blur(9px);opacity:.08}28%{opacity:.32}72%{filter:blur(.5px)}100%{clip-path:circle(145% at 50% 56%);transform:scale(1);filter:blur(0);opacity:1}}@keyframes entranceSubmerge{0%{transform:scale(1);filter:blur(0);opacity:1}100%{transform:scale(.78);filter:blur(6px);opacity:0}}

/* V10: spatial constellation with independent buoyancy. */
.graph-viewport{perspective:1150px;perspective-origin:50% 48%}.graph-scene,.graph-group{transform-style:preserve-3d}.graph-group{transition:opacity .45s,filter .45s;will-change:transform}.category{transition:transform .55s cubic-bezier(.18,.78,.2,1),filter .45s;will-change:transform}.category:hover,.category:focus-visible{transform:translate(-50%,-50%) translateZ(70px) scale(1.14);filter:drop-shadow(0 13px 16px #0009)}.category.selected{transform:translate(-50%,-50%) translateZ(38px) scale(1.07)}.core-wrap{transform:translateZ(-210px) scale(.76);transform-origin:center;opacity:.72}.core{filter:blur(.15px)}.work-node{transform-style:preserve-3d;backface-visibility:hidden}
.category.selected:hover,.category.selected:focus-visible{transform:translate(-50%,-50%) translateZ(70px) scale(1.14)}

/* V11: stronger depth and a dedicated interaction plane above previews. */
.graph-viewport{perspective:780px}.category{z-index:30;transform:translate(-50%,-50%) translateZ(82px)}.category:hover,.category:focus-visible{transform:translate(-50%,-50%) translateZ(190px) scale(1.18)}.category.selected{transform:translate(-50%,-50%) translateZ(125px) scale(1.08)}.category.selected:hover,.category.selected:focus-visible{transform:translate(-50%,-50%) translateZ(200px) scale(1.18)}.core-wrap{transform:translateZ(-360px) scale(.58);opacity:.52}.work-node{z-index:2}

/* Shared projected coordinates keep WebKit hit regions aligned with the visible nodes. */
.graph-viewport{perspective:none}.graph-scene,.graph-group,.work-node{transform-style:flat}.graph-scene,.graph-group,.core-wrap{pointer-events:none}.graph-group{filter:none}.category,.work-node,.core{pointer-events:auto}.graph-group.faded .category,.graph-group.faded .work-node,.core-wrap.faded .core{pointer-events:none}.category{transform:translate(-50%,-50%) scale(var(--depth-scale,1));filter:none}.category:hover,.category:focus-visible,.category.selected:hover,.category.selected:focus-visible{transform:translate(-50%,-50%) scale(calc(var(--depth-scale,1) * 1.14));filter:none}.category.selected{transform:translate(-50%,-50%) scale(var(--depth-scale,1))}.core-wrap{opacity:.72}.core{filter:none}

/* Static, rear-layer affinities between related fields. Tiers 1-3 read as
   concentric depth: 1 bright & taut, 2 neutral, 3 barely visible. */
.connections path.relation-link{stroke:#5c6960;stroke-opacity:.14;stroke-width:.5;stroke-dasharray:none;vector-effect:non-scaling-stroke;pointer-events:none;animation:none!important}
.connections path.relation-link[data-strength="1"]{stroke:#b9d4c5;stroke-opacity:.32;stroke-width:.9}
.connections path.relation-link[data-strength="2"]{stroke:#91a092;stroke-opacity:.18;stroke-width:.6}
.connections path.relation-link[data-strength="3"]{stroke:#3e4a42;stroke-opacity:.09;stroke-width:.4;stroke-dasharray:1 6}
.connections path.group-signal{stroke:#aebcab;stroke-opacity:.75;stroke-width:3.5;stroke-dasharray:4 8;vector-effect:non-scaling-stroke;pointer-events:none;animation:none!important}

.detail-gallery{padding:52px 0 28px;border-bottom:1px solid var(--rule)}.gallery-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 22px;color:var(--muted);font-size:12px}.gallery-grid{display:flex;gap:22px;overflow-x:auto;padding:2px 6vw 20px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#616c62 transparent;cursor:grab;overscroll-behavior-inline:contain}.gallery-grid:active{cursor:grabbing}.gallery-item{margin:0;flex:0 0 min(70vw,760px);scroll-snap-align:start}.gallery-item .media{aspect-ratio:16/10;overflow:hidden;background:#101411;border:1px solid var(--rule)}.gallery-item figcaption{font-size:11px;color:var(--muted);margin-top:10px}.media-slots{grid-template-columns:minmax(0,1fr)}.media-video iframe{width:100%;aspect-ratio:16/9;border:0;margin-top:22px;background:#101411}
.gallery-item .media{aspect-ratio:auto;height:auto;overflow:visible}.gallery-item .media img{width:auto;height:auto;max-width:100%;display:block;object-fit:contain}
.detail-image.natural-main .media{aspect-ratio:auto;max-height:none;height:auto;overflow:visible}.detail-image.natural-main .media img{width:auto;height:auto;max-width:100%;display:block;object-fit:contain}
.gallery-grid{align-items:flex-start;scroll-snap-type:x mandatory;scroll-snap-stop:always}.gallery-item{flex:0 0 auto;flex-basis:auto;width:max-content;max-width:86vw;scroll-snap-align:center;scroll-snap-stop:always}.gallery-item .media{width:auto;max-width:none;height:auto;display:block;overflow:visible;background:transparent;border:0}.gallery-item .media img{width:auto;height:auto;max-width:min(86vw,980px);max-height:72svh;display:block;object-fit:initial}.gallery-item figcaption{width:100%}
.gallery-grid{overflow-y:hidden;transition:height .32s var(--ease)}.gallery-item .media img{max-height:none}.work-node .media{aspect-ratio:auto;height:auto}.work-node .media img{width:100%;height:auto;object-fit:contain}
@media (min-width:801px) and (orientation:landscape){.gallery-item .media img{max-height:62svh}}
.theme-slogan{margin:22px 0 0;font-size:16px;line-height:1.8;color:#b7beb4;letter-spacing:.04em}body.lang-en #entrance-title,body.lang-en .hero-copy h1,body.lang-en .graph-heading,body.lang-en .category h2,body.lang-en .core strong,body.lang-en .detail-top h1,body.lang-en .about-page h1,body.lang-en .about-page h2,body.lang-en .contact-copy h2,body.lang-en .detail-lead,body.lang-en .detail-copy p,body.lang-en .detail-copy h2,body.lang-en .detail-meta,body.lang-en .about-page p,body.lang-en .next-work strong,body.lang-en .theme-slogan,body.lang-en .hero-copy .description,body.lang-en .contact-copy p,body.lang-en .work-node h3,body.lang-en .work-summary,body.lang-en .english,body.lang-en .ascii-label,body.lang-en .entrance-name,body.lang-en .entrance-intro{font-family:var(--serif-en);font-weight:500}body.lang-en .english,body.lang-en .ascii-label{font-style:italic;font-weight:400}body.lang-en .category h2{font-family:var(--display-en);font-weight:600;letter-spacing:.03em}body.lang-en .category h2{white-space:normal;max-width:260px;margin:0 auto;font-size:22px;letter-spacing:.03em;line-height:1.25}body.lang-en .core strong{font-family:var(--display-en);font-weight:600;letter-spacing:.04em;font-size:18px}body.lang-en .work-summary{display:none}.ascii-label{font-family:var(--mono);letter-spacing:.1em}.entrance-center .ascii-label{font-size:11px}.entrance-top.ascii-label{font-size:11px}.entrance-bottom.ascii-label{justify-content:flex-start;font-size:11px}.entrance-center #entrance-title{font:inherit;letter-spacing:0}.entrance-center #entrance-title pre{margin:0;color:#d9ded7;font:clamp(6px,1.15vw,14px)/1.02 var(--mono);letter-spacing:.02em;white-space:pre;text-align:left;display:inline-block}.entrance-center #entrance-title span{display:block;font:16px var(--mono);letter-spacing:.65em;margin:22px 0 0 .65em}.entrance-sub.ascii-label{font-size:10px;letter-spacing:.06em}

/* Traditional editorial typography and definition layer. */
:root{--display:'Baskerville','Iowan Old Style','Songti TC','Noto Serif TC',serif}body{font-family:'PingFang TC','Noto Sans TC','Hiragino Sans GB',sans-serif}.hero-copy h1,.detail-top h1,.about-page h1,.contact-copy h2,.category h2,.core strong{font-family:var(--display)}.detail-nav{display:grid;grid-template-columns:1fr 1.6fr;border-top:1px solid var(--rule);margin-top:20px}.detail-nav a{min-height:96px;padding:28px 0;display:flex;align-items:center;font-size:18px}.detail-nav a:last-child{justify-content:space-between;border-left:1px solid var(--rule);padding-left:34px}.detail-lead.typing:after,.detail-copy p.typing:after{content:'▌';color:var(--accent);margin-left:2px;animation:typeBlink .75s steps(1) infinite}@keyframes typeBlink{50%{opacity:0}}.core-definition{position:absolute;z-index:60;left:50%;top:50%;width:min(520px,calc(100% - 44px));padding:32px 34px;background:rgba(17,21,19,.15);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(109,136,123,.35);box-shadow:0 30px 90px rgba(0,0,0,.32);transform:translate(-50%,-47%) scale(.96);opacity:0;transition:opacity .22s,transform .22s}.core-definition.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.core-definition>button{position:absolute;right:18px;top:12px;font-size:24px;text-shadow:0 1px 10px rgba(0,0,0,.9)}.core-definition h3{font:32px var(--display);margin:16px 0 8px;text-shadow:0 1px 14px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.9)}.core-definition p{line-height:1.9;margin:0;color:#d8ded9;text-shadow:0 1px 12px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.9)}
:root{--display:'Baskerville','Iowan Old Style','Songti TC','Noto Serif TC',serif}.hero-about{display:block;cursor:pointer;transition:opacity .42s var(--ease)}.hero-about:hover{color:inherit;opacity:.5}.hero-about:focus-visible{outline:1px solid currentColor;outline-offset:8px}

/* V12 — perceptual archive entry: layered boot choreography over the ASCII sea. */
#entrance .entrance-noise{display:block;opacity:.07}
.entry-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 92% at 50% 46%,transparent 50%,rgba(0,0,0,.32) 78%,rgba(0,0,0,.62) 100%)}
.entry-scan{position:absolute;left:0;right:0;top:0;height:18vh;z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(180,200,184,.05) 46%,rgba(196,214,198,.1) 50%,rgba(180,200,184,.05) 54%,transparent);transform:translateY(-22vh)}
.entry-corners{position:absolute;inset:26px 34px;z-index:3;pointer-events:none}
.entry-corners i{position:absolute;width:16px;height:16px}
.entry-corners i::before,.entry-corners i::after{content:'';position:absolute;background:#6f7c73}
.entry-corners i::before{left:0;top:50%;width:16px;height:1px;transform:translateY(-50%)}
.entry-corners i::after{left:50%;top:0;width:1px;height:16px;transform:translateX(-50%)}
.entry-corners i:nth-child(1){left:0;top:0}.entry-corners i:nth-child(2){right:0;top:0}.entry-corners i:nth-child(3){left:0;bottom:0}.entry-corners i:nth-child(4){right:0;bottom:0}
.entry-status{display:flex;align-items:center;justify-content:center;gap:11px;margin:22px 0 0;font-size:10px;letter-spacing:.28em;color:#7d8a81}
.entry-dot{display:none}
.intro-open .entry-vignette{animation:entryFade 1s ease .05s both}
.intro-open .entry-corners i{animation:entryFade .9s ease both}
.intro-open .entry-corners i:nth-child(1){animation-delay:.2s}.intro-open .entry-corners i:nth-child(2){animation-delay:.34s}.intro-open .entry-corners i:nth-child(3){animation-delay:.48s}.intro-open .entry-corners i:nth-child(4){animation-delay:.62s}
.intro-open .entry-scan{animation:entryScan 7.5s linear .9s infinite}
.intro-open .entrance-top span{animation:entryRise .8s var(--ease) both}
.intro-open .entrance-top span:last-child{animation-delay:.22s}
.intro-open .entrance-bottom span{animation:entryFade .9s ease 1.7s both}
.intro-open .entrance-center .eyebrow{animation:entryFade .8s ease .35s both}
.intro-open #entrance-title{display:inline-block;vertical-align:top;position:relative}
.intro-open #entrance-title pre{animation:entryBoot 1.35s steps(26,end) .5s both}
.intro-open #entrance-title::after{content:'';position:absolute;top:-2%;bottom:-2%;left:0;width:2px;background:linear-gradient(#dfe6dd,#93a397);box-shadow:0 0 14px rgba(210,224,208,.7);opacity:0;animation:entryBar 1.35s cubic-bezier(.6,0,.2,1) .5s both}
.intro-open #entrance-title span{animation:entryFade .8s ease 1.3s both}
.intro-open .entrance-sub{animation:entryFade .8s ease 1.45s both}
.intro-open #enter{animation:entryFade .8s ease 1.6s both}
.intro-open .entry-status{animation:entryFade .8s ease 1.75s both}
.intro-open.archive-releasing .entry-vignette,.intro-open.archive-releasing .entry-corners,.intro-open.archive-releasing .entry-scan,.intro-open.archive-releasing .entry-status,.intro-open.archive-releasing .entrance-noise{animation:entranceSubmerge .72s cubic-bezier(.4,0,.2,1) both}
@keyframes entryFade{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes entryRise{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
@keyframes entryBoot{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes entryBar{0%{left:0;opacity:0}6%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes entryScan{from{transform:translateY(-22vh)}to{transform:translateY(122vh)}}
@keyframes entryPulse{0%,100%{border-color:#b4b7ae #5b605a;box-shadow:0 0 0 rgba(196,208,196,0)}50%{border-color:#e3e7de #8f978d;box-shadow:0 0 26px rgba(196,208,196,.1)}}
/* entryPulse retained for reference but no longer applied to #enter. */
@media(prefers-reduced-motion:reduce){.intro-open .entry-scan{animation:none;transform:translateY(-22vh)}.intro-open #entrance-title::after{animation:none;opacity:0}.entry-dot,.intro-open #enter::before{animation:none}}

/* V13 — perceptual archive entry: immersed in the ASCII sea until the
   visitor clicks. The wave canvas opens zoomed in to a handful of glyphs;
   the click dispatches a continuous zoom-out that reveals the full sea
   before the entrance is removed. The motion lives in CSS so wave.js
   keeps rendering the sea behind it. */
body.intro-open.entrance-immersed #ocean{
  transform:scale(2.6);
  filter:blur(3.5px);
}
body.intro-open.entrance-immersed .entrance-center,
body.intro-open.entrance-immersed .entrance-top,
body.intro-open.entrance-immersed .entrance-bottom{
  opacity:1;
}
body.intro-open.entrance-releasing #ocean{
  /* Drive the zoom-out as a CSS transition rather than @keyframes:
     the previous animation forced the browser to switch from a static
     style declaration to a running animation in the same frame the
     class swap landed, which fired a one-shot compositor re-setup
     (visible as a background scale-stutter). A transition on the
     computed value of transform / filter interpolates without that
     pipeline switch. The base #ocean rule below owns the 3s
     cubic-bezier(.65,0,.35,1) timing for both properties. */
  transform:scale(1);
  filter:blur(0);
}
/* The Enter button and its surrounding text stay put during the 3s
   release — only the entrance wrapper fades at the very end via
   #entrance's opacity animation below, so the click target never
   vanishes mid-animation. */
body.intro-open.entrance-releasing .entrance-top{
  transform-origin:50% 0;
  animation:entranceDisperse 3s cubic-bezier(.65,0,.35,1) both;
  animation-delay:.05s;
}
body.intro-open.entrance-releasing .entrance-bottom{
  transform-origin:50% 100%;
  animation:entranceDisperse 3s cubic-bezier(.65,0,.35,1) both;
  animation-delay:.1s;
}
body.intro-open.entrance-releasing .entry-vignette,
body.intro-open.entrance-releasing .entry-corners,
body.intro-open.entrance-releasing .entry-scan,
body.intro-open.entrance-releasing .entry-status,
body.intro-open.entrance-releasing .entrance-noise{
  animation:entranceLayerFade 3s ease both;
}
body.intro-open.entrance-releasing .entry-corners{animation-delay:.05s}
body.intro-open.entrance-releasing .entry-scan{animation-delay:.1s}
body.intro-open.entrance-releasing .entry-status{animation-delay:.15s}
body.archive-entered #ocean{transform:none!important;filter:none!important;will-change:auto!important;transition:none!important}
@keyframes entranceDisperse{
  0%{opacity:1;transform:scale(1)}
  60%{opacity:.25}
  100%{opacity:0;transform:scale(.94)}
}
@keyframes entranceLayerFade{
  0%{opacity:1}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  body.intro-open.entrance-immersed #ocean{transform:none}
  #ocean{transition-duration:0s!important}
  body.intro-open.entrance-releasing #ocean,
  body.intro-open.entrance-releasing #entrance,
  body.intro-open.entrance-releasing #enter,
  body.intro-open.entrance-releasing .entrance-center,
  body.intro-open.entrance-releasing .entrance-top,
  body.intro-open.entrance-releasing .entrance-bottom,
  body.intro-open.entrance-releasing .entry-vignette,
  body.intro-open.entrance-releasing .entry-corners,
  body.intro-open.entrance-releasing .entry-scan,
  body.intro-open.entrance-releasing .entry-status,
  body.intro-open.entrance-releasing .entrance-noise{animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
}
/* Reveal the home panel during release so its text can run the dual
   animation while the entrance dissolves above it. */
body.intro-open.entrance-releasing #app{visibility:visible}
/* Top nav stays hidden while the entrance overlay covers the viewport
   and during the 3s release, so the brand/buttons never compete with
   the entrance's own typography. Once boot.js lands the archive-entered
   class at t=3s, the fade-in keyframe below brings them in. */
body.intro-open .site-header,
body.intro-open.entrance-releasing .site-header{opacity:0}
/* Smoothly fade out the entrance overlay itself during release so that
   when boot.js removes #entrance from the DOM at the 3.0s mark, there is
   no abrupt visual jump on the underlying page (which was the cause of
   the "three top buttons flicker" bug). */
body.intro-open.entrance-releasing #entrance{animation:entranceOverlayFade 3s ease both}
@keyframes entranceOverlayFade{0%{opacity:1}100%{opacity:0}}
/* V23 — the Enter button gets its own lift-and-fade at the tail of the
   3s release so the DOM removal at t=3s is not perceived as a hard cut:
   the button stays fully visible during the zoom-out (per project
   memory) and only dissolves upward in the last ~0.7s, which finishes
   ~0.2s before finish() removes #entrance. */
body.intro-open.entrance-releasing #enter{animation:enterButtonRelease .9s cubic-bezier(.4,0,.2,1) 2.3s both}
@keyframes enterButtonRelease{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-14px) scale(.96)}
}
/* After the entrance is removed and archive-entered is set, the top
   navigation eases in over ~0.8s. The animation starts from opacity 0
   so there is no flicker at the 3s handover. */
body.archive-entered .site-header{animation:siteHeaderFadeIn .8s ease both}
@keyframes siteHeaderFadeIn{0%{opacity:0}100%{opacity:1}}
/* Single-phase text choreography: scale and translate interpolate
   continuously across the full 3s so there is no visible breakpoint —
   both axes ease together to the design position. Per-element direction
   via --cx / --cy and per-element starting size via --start-scale (so
   the two horizontal-axis strips can amplify the shrink while the
   hero-copy block stays gentle). No blur — text stays crisp throughout. */
@keyframes homeTextShrinkConverge{
  0%{transform:translate(var(--cx,0),var(--cy,0)) scale(var(--start-scale,2.5));opacity:0}
  100%{transform:translate(0,0) scale(1);opacity:1}
}
body.intro-open.entrance-releasing .hero-copy h1,
body.intro-open.entrance-releasing .hero-copy .name-cn,
body.intro-open.entrance-releasing .hero-copy .eyebrow,
body.intro-open.entrance-releasing .hero-copy .theme-slogan,
body.intro-open.entrance-releasing .home-side,
body.intro-open.entrance-releasing .scene-footer{animation:homeTextShrinkConverge 3s cubic-bezier(.65,0,.35,1) both}
/* V21 — uniform 30° swoop for every home-page text element. Previous
   start offsets mixed 8° to 54° trajectories so the motion read as
   chaotic; standardizing on tan(30°) ≈ 0.577 (vertical/horizontal)
   gives a clean parallel sweep into the page. Magnitudes still vary
   per element so big blocks travel further than small ones. */
/* V22 — hero-copy eased to a flatter 10° (tan(10°) ≈ 0.176) sweep so
   its text reads as a near-horizontal glide rather than a dive, while
   .home-side / .scene-footer stay on the 30° diagonal and get a doubled
   --start-scale (5) so their shrink-on-entry reads twice as dramatic. */
.hero-copy h1{--cx:-110vw;--cy:-19vh}
.hero-copy .name-cn{--cx:-90vw;--cy:-16vh}
.hero-copy .eyebrow{--cx:-100vw;--cy:-36vh}
.hero-copy .theme-slogan{--cx:-100vw;--cy:18vh}
.home-side{--cx:110vw;--cy:-63vh;--start-scale:5}
.scene-footer{--cx:0vw;--cy:65vh;--start-scale:5}
@media(prefers-reduced-motion:reduce){
  body.intro-open.entrance-releasing .hero-copy h1,
  body.intro-open.entrance-releasing .hero-copy .name-cn,
  body.intro-open.entrance-releasing .hero-copy .eyebrow,
  body.intro-open.entrance-releasing .hero-copy .theme-slogan,
  body.intro-open.entrance-releasing .home-side,
  body.intro-open.entrance-releasing .scene-footer{animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
}

/* V14 — clean entrance hierarchy: bold personal portfolio title,
   no YINZHU logo block. */
#entrance-title{font-size:clamp(54px,9vw,138px);font-weight:400;line-height:.95;letter-spacing:-.045em;margin:6px 0 0}
#entrance-title .entrance-line-cn{display:block}
#entrance-title .entrance-line-en{display:block;font-size:clamp(10px,1vw,14px);letter-spacing:.18em;margin:18px 0 0;color:var(--muted);font-weight:300;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:clip}
#entrance-title .entrance-line-by{display:block;font-family:var(--mono);font-size:clamp(10px,1.1vw,12px);letter-spacing:.3em;margin:26px 0 0;color:#7d8a81}

/* V15 — bypass the V12 per-element fade-in delays so the visitor is
   dropped straight into the close-up. The wrapper animations in V13
   own the in/out motion; everything inside is ready at t=0. */
body.intro-open.entrance-immersed .entrance-top span,
body.intro-open.entrance-immersed .entrance-bottom span,
body.intro-open.entrance-immersed .entrance-center .eyebrow,
body.intro-open.entrance-immersed #entrance-title pre,
body.intro-open.entrance-immersed #entrance-title::after,
body.intro-open.entrance-immersed #entrance-title .entrance-line-cn,
body.intro-open.entrance-immersed #entrance-title .entrance-line-en,
body.intro-open.entrance-immersed #entrance-title .entrance-line-by,
body.intro-open.entrance-immersed .entrance-sub,
body.intro-open.entrance-immersed .entry-status,
body.intro-open.entrance-releasing .entrance-top span,
body.intro-open.entrance-releasing .entrance-bottom span,
body.intro-open.entrance-releasing .entrance-center .eyebrow,
body.intro-open.entrance-releasing #entrance-title pre,
body.intro-open.entrance-releasing #entrance-title::after,
body.intro-open.entrance-releasing #entrance-title .entrance-line-cn,
body.intro-open.entrance-releasing #entrance-title .entrance-line-en,
body.intro-open.entrance-releasing #entrance-title .entrance-line-by,
body.intro-open.entrance-releasing .entrance-sub,
body.intro-open.entrance-releasing .entry-status,
body.intro-open.entrance-releasing #enter::before,
body.intro-open.entrance-releasing .entry-dot{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;left:auto!important;width:auto!important}
body.intro-open.entrance-immersed .entry-vignette,
body.intro-open.entrance-immersed .entry-corners,
body.intro-open.entrance-immersed .entry-corners i,
body.intro-open.entrance-immersed .entry-scan,
body.intro-open.entrance-immersed .entrance-noise,
body.intro-open.entrance-immersed .entrance-noise i{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
body.intro-open.entrance-immersed #enter{animation:none!important}