:root{color-scheme:light;--paper:#f7f7f7;--ink:#0b0b0b;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif;--mono:'IBM Plex Mono',monospace;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0;border-radius:0;background:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:7px}.skip{position:fixed;left:20px;top:-100px;z-index:20;padding:15px;background:white;color:black}.skip:focus{top:20px}::selection{color:#111;background:#ddd}figure,p{margin:0}[hidden]{display:none!important}.composition{position:relative;min-height:100svh;isolation:isolate;overflow:clip;display:flex;flex-direction:column;background:var(--paper)}.backdrop{position:absolute;inset:0;z-index:-1;background:var(--paper);overflow:hidden;pointer-events:none}.ink-field{position:absolute;width:100%;height:100%;fill:var(--ink)}.construction{position:absolute;inset:0;width:100%;height:100%;color:#fff;mix-blend-mode:difference;fill:none;stroke:currentColor;stroke-width:.7}.guides{opacity:.38}.registration-points{fill:currentColor;stroke:none;opacity:.85}.registration-points .cross{fill:none;stroke:currentColor;stroke-width:.7}.scribble{opacity:.6;transform-origin:10% 90%;animation:line-breathe 18s ease-in-out infinite alternate}.moving-dashes{stroke-width:1.5}.dash-a{animation:vertical-dash 12s ease-in-out infinite alternate}.dash-b{animation:horizontal-dash 16s ease-in-out infinite alternate}.dash-c{animation:vertical-dash 15s ease-in-out -7s infinite alternate}.grain{position:absolute;inset:0;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.96' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.difference{color:#fff;mix-blend-mode:difference}.masthead{display:flex;align-items:center;gap:34px;margin:30px 3.4vw 0;min-height:50px}.brand{display:flex;align-items:center;gap:6px;color:#fff;mix-blend-mode:difference}.brand img{width:43px;height:43px;filter:invert(1)}.brand>span{font-family:var(--serif);font-size:32px;font-style:italic;letter-spacing:-2px}.brand-dot{padding-left:2px}.masthead-caption,.micro,.eyebrow,.frame-heading,.frame-caption,.form-hint,.object-note>.micro,.scene-nav a>span:first-child,.colophon,.control-label{font-family:var(--mono);font-size:9px;letter-spacing:.12em;line-height:1.6}.masthead-caption{margin-left:6vw;opacity:.63}.masthead-caption>span{margin:0 16px}.controls{display:flex;gap:24px;margin-left:auto;align-items:center}.controls button{display:flex;align-items:center;gap:8px;padding:9px 0;min-height:44px}.control-label{text-transform:uppercase;font-size:8px;opacity:.6}.motion-symbol{font-size:15px;width:16px}.palette-symbol{font-size:21px}.stage{position:relative;display:grid;grid-template-columns:minmax(130px,15.5%) minmax(270px,42%) minmax(260px,1fr);gap:5%;align-items:center;flex:1;min-height:0;padding:50px 5.5vw 60px 3.4vw}.index-rail{align-self:stretch;display:flex;flex-direction:column;padding-top:30px}.rail-marker{display:flex;align-items:center;gap:12px;font:9px var(--mono);letter-spacing:.12em}.cross-mark{font:36px var(--serif);line-height:1}.scene-nav{display:flex;flex-direction:column;gap:4px;margin-top:auto;margin-bottom:40px;max-width:160px}.scene-nav a{position:relative;display:flex;align-items:center;min-height:42px;gap:18px;font-family:var(--serif);font-size:21px;opacity:.48;transition:opacity 150ms ease}.scene-nav a>span:first-child{font-size:8px;letter-spacing:0}.scene-nav i{font-style:normal;font-family:var(--sans);font-size:14px;margin-left:auto;opacity:0;transform:translate(-5px,5px);transition:transform .2s var(--ease),opacity .2s ease}.scene-nav a[aria-current]{opacity:1}.scene-nav a[aria-current] i{opacity:1;transform:none}.object-note{margin-bottom:35px}.object-note>.micro{display:block;font-size:8px;opacity:.6}.object-name{display:block;font:25px/.98 var(--serif);letter-spacing:-1px;margin-top:8px}.object-study{width:100%;max-width:min(560px,calc((100svh - 310px)*.95));justify-self:center;align-self:center;transition:transform .7s var(--ease)}.frame-heading{display:flex;justify-content:space-between;align-items:center;font-size:8px;margin-bottom:13px;opacity:.7}.object-frame{display:block;position:relative;aspect-ratio:1/1.045;width:100%;background:var(--ink);border:1px solid #bdbdbd;color:var(--paper);padding:0;isolation:isolate;box-shadow:13px 14px 0 -12px var(--paper),13px 14px 0 -11px #555;overflow:hidden}.frame-corner{position:absolute;width:14px;height:14px;border-color:currentColor;z-index:3}.top-left{left:-1px;top:-1px;border-top:2px solid;border-left:2px solid}.top-right{right:-1px;top:-1px;border-top:2px solid;border-right:2px solid}.bottom-left{left:-1px;bottom:-1px;border-bottom:2px solid;border-left:2px solid}.bottom-right{right:-1px;bottom:-1px;border-bottom:2px solid;border-right:2px solid}.frame-cross{position:absolute;font:16px var(--mono);line-height:1;opacity:.7}.cross-one{top:13px;left:13px}.cross-two{bottom:13px;right:13px}.logo-art{display:block;position:absolute;inset:7% 8% 10%;transition:transform .6s var(--ease);transform:translate(var(--logo-x,0px),var(--logo-y,0px))}.logo-art img{pointer-events:none;-webkit-user-drag:none;user-select:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;filter:invert(1);transition:opacity .45s ease,transform .65s var(--ease)}.form-hint{position:absolute;bottom:27px;right:25px;display:flex;gap:15px;font-size:8px;align-items:center}.form-hint>span:last-child{font:19px var(--serif)}.frame-caption{display:flex;justify-content:space-between;font-size:8px;margin-top:18px;opacity:.6}.fold-indicator{display:flex;gap:5px;align-items:center}.fold-indicator i{width:12px;height:2px;background:currentColor;opacity:.3}.fold-indicator i.selected{opacity:1}.reading-area{position:relative;max-width:355px;padding-bottom:12px;align-self:center}.eyebrow{display:flex;align-items:center;gap:13px;font-size:8px;letter-spacing:.14em;opacity:.66;margin-bottom:20px}.small-cross{font-size:16px}.syn-title{margin:-22px 0 2px -8px;font:italic 400 clamp(92px,12vw,202px)/.92 var(--serif);letter-spacing:.015em}.syn-title>span{font-style:normal;margin-left:.05em}.identity-line{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff75;padding:14px 0 15px;gap:14px;font:22px var(--serif)}.identity-line>.micro{font-size:8px;opacity:.55;white-space:nowrap}.scene-copy>p:not(.eyebrow){font-size:13px;line-height:1.85;opacity:.7;margin-top:22px;max-width:330px}.scene-copy>.intro{font-size:15px;line-height:1.9;margin-top:23px}.next-link{display:flex;align-items:center;gap:30px;font-size:10px;margin-top:33px;width:fit-content}.next-link>span{font-size:20px;transition:transform .2s var(--ease)}.section-title{font:400 clamp(70px,6.6vw,115px)/.79 var(--serif);letter-spacing:-.055em;margin:30px 0 25px}.section-title em{font-weight:400}.interests-title{font-size:clamp(57px,5.3vw,87px);line-height:.87}.interest-list{margin-top:20px}details{border-bottom:1px solid #ffffff35}summary{list-style:none;display:flex;align-items:center;gap:20px;cursor:pointer;min-height:48px;font:23px var(--serif)}summary::-webkit-details-marker{display:none}summary>span:first-child{font:8px var(--mono);opacity:.55}.expand{margin-left:auto;font:16px var(--mono);opacity:.55;transition:transform .2s ease}details[open] .expand{transform:rotate(45deg)}details p{font-size:12px;line-height:1.85;opacity:.67;max-width:290px;padding:0 18px 19px 31px}.colophon{position:relative;display:flex;gap:30px;align-items:center;justify-content:space-between;margin:0 3.4vw 26px;min-height:32px;font-size:8px;letter-spacing:.08em}.edition{margin-left:auto;margin-right:15vw;opacity:.6}.binary-mark{display:flex;align-items:center;justify-content:flex-end;position:relative;gap:12px;min-width:90px;min-height:44px;font:9px var(--mono);letter-spacing:.1em;padding:0}.binary-pair{display:flex;align-items:center}.binary-pair i{display:block;width:7px;height:7px;border:1px solid currentColor;border-radius:50%}.binary-pair i+i{margin-left:-2px}.easter-name{display:none}.binary-mark[aria-pressed=true] .catalogue-code{display:none}.binary-mark[aria-pressed=true] .easter-name{display:inline}.binary-mark[aria-pressed=true] .binary-pair i{background:currentColor}body[data-scene=about] .object-study{transform:translateY(15px)}body[data-scene=interests] .object-study{transform:translateY(-12px)}body.js .scene-copy:not([hidden]){animation:none}body:not(.js) .reading-area{padding-top:40px}body:not(.js) .scene-copy{margin-bottom:70px}body:not(.js) .stage{align-items:start}body.motion-paused .backdrop *,body.page-hidden .backdrop *{animation-play-state:paused!important}body.motion-paused .scene-copy{animation:none!important}body.motion-paused .logo-art{transform:none}body.motion-paused .object-study{transition:none}.scene-nav a:hover{opacity:1}.scene-copy h1:focus,.scene-copy h2:focus{outline:none}.scene-copy h1,.scene-copy h2{scroll-margin-top:30px}
@media(hover:hover) and (pointer:fine){.next-link:hover>span{transform:translate(4px,-4px)}.controls button:hover .control-label{opacity:1}}
@keyframes line-breathe{to{transform:translate(8px,-12px) scale(1.025)}}@keyframes vertical-dash{to{transform:translateY(205px)}}@keyframes horizontal-dash{to{transform:translateX(-350px)}}@keyframes copy-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:1700px){.stage{padding-top:120px;padding-bottom:140px;gap:6%;grid-template-columns:16% 40% 1fr}.reading-area{max-width:410px}.scene-copy>p:not(.eyebrow){font-size:15px}.scene-copy>.intro{font-size:18px}.object-study{max-width:650px}}
@media(max-width:1100px){.stage{grid-template-columns:100px minmax(265px,1.15fr) minmax(240px,1fr);gap:4%;padding-right:4vw;min-height:0}.scene-nav a{gap:10px;font-size:18px}.masthead-caption{margin-left:3vw}.object-name{font-size:22px}.reading-area{padding-bottom:0}.syn-title{font-size:128px}.section-title{font-size:82px}.interests-title{font-size:66px}.scene-copy>p:not(.eyebrow){font-size:12px}.object-note{margin-bottom:0}.frame-heading{font-size:7px}}
@media(max-width:800px){.masthead{margin:20px 5vw 0;gap:18px}.masthead-caption{margin-left:0;font-size:7px}.masthead-caption>span{margin:0 7px}.controls{gap:16px}.control-label{display:none}.stage{grid-template-columns:1fr 1fr;gap:38px 6%;padding:70px 7vw 80px 13vw;min-height:620px}.index-rail{grid-column:1/-1;display:block;padding:0}.rail-marker,.object-note{display:none}.scene-nav{flex-direction:row;margin:0;max-width:none;gap:30px}.scene-nav a{gap:8px;min-height:34px}.scene-nav i{font-size:12px}.object-study{max-width:none;grid-column:1;grid-row:2;align-self:start;margin-top:22px}.reading-area{grid-column:2;grid-row:2}.syn-title{font-size:102px}.section-title{font-size:70px}.interests-title{font-size:55px}.identity-line{font-size:19px}.identity-line .micro{display:none}.eyebrow{font-size:7px;gap:8px}.scene-copy>p:not(.eyebrow){font-size:12px}.frame-heading{gap:10px;font-size:6px}.frame-caption{font-size:6px}.form-hint{bottom:16px;right:15px;font-size:7px}.colophon{margin:0 5vw 18px}.edition{margin-right:auto;font-size:7px}.construction .scribble{opacity:.35}}
@media(max-width:560px){.masthead{margin-top:14px}.brand img{width:35px;height:35px}.brand>span{font-size:28px}.masthead-caption{display:none}.stage{display:flex;flex-direction:column;gap:0;align-items:stretch;padding:32px 8vw 80px 15vw}.ink-field{width:165%;height:100%;left:-6%}.construction{width:170%;left:-17%;opacity:.8}.index-rail{order:0}.scene-nav{justify-content:space-between;gap:12px;margin-bottom:30px}.scene-nav a{font-size:19px;min-height:44px}.scene-nav i{display:none}.object-study{order:1;max-width:390px;margin:0 auto;transform:none!important}.object-frame{aspect-ratio:1.12}.logo-art{inset:3% 13% 7%}.frame-heading{font-size:7px;margin-bottom:10px}.frame-caption{font-size:7px;margin-top:13px}.form-hint{bottom:14px}.reading-area{order:2;align-self:stretch;width:100%;max-width:none;margin-top:43px;min-height:350px}.eyebrow{font-size:8px;margin-bottom:19px}.syn-title{font-size:120px;margin-top:-16px}.identity-line{font-size:25px;padding-top:8px}.identity-line .micro{display:block}.scene-copy>p:not(.eyebrow){font-size:14px;line-height:1.85}.scene-copy>.intro{font-size:15px}.next-link{font-size:11px;margin-top:26px}.section-title{font-size:80px;line-height:.81;margin-top:22px;margin-bottom:23px}.interests-title{font-size:74px}.colophon{font-size:7px;gap:15px;flex-wrap:wrap}.edition{display:none}.binary-mark{font-size:8px}.construction .scribble{transform:translateY(75px)}summary{font-size:26px;min-height:51px}details p{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scribble,.dash-a,.dash-b,.dash-c,body.js .scene-copy:not([hidden]){animation:none}.scene-nav a,.scene-nav i,.object-study,.logo-art,.logo-art img,.next-link>span,.expand{transition:none}.logo-art{transform:none!important}}

@media(min-width:801px) and (max-height:780px){.stage{padding-top:34px;padding-bottom:38px}.section-title{font-size:72px;margin:20px 0}.interests-title{font-size:62px}.scene-copy>p:not(.eyebrow){margin-top:17px;font-size:12px;line-height:1.75}.eyebrow{margin-bottom:16px}.next-link{margin-top:25px}.identity-line{padding:10px 0 12px}.object-study{max-width:min(560px,calc((100svh - 260px)*.9))}}

/* Typography and controls. Construction lines are masked separately from the liquid field. */
@font-face{font-family:'Syn Calligraphy';src:url('name-calligraphy.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--muted:#c3c3c3;--rule:#686868;--logo-filter:invert(1);--brand-filter:none;--scene-ease:cubic-bezier(.65,0,.2,1)}
body[data-palette=light]{color-scheme:light}
body{background:var(--paper)}
.difference{color:#fff;mix-blend-mode:difference}
.brand{color:#fff;mix-blend-mode:difference;padding:3px 8px 3px 0}
.brand img{filter:invert(1);-webkit-user-drag:none;user-select:none}
.masthead-caption,.controls{color:#fff;opacity:1}
.masthead-caption{padding:0 8px;display:flex;align-items:center}
.control-label{opacity:.85;font-size:9px}
.controls{gap:15px;padding:0 5px}
.controls button{min-width:44px;justify-content:center}
.controls button:active .motion-symbol,.controls button:active .palette-symbol{transform:scale(.97)}
.rail-marker,.object-note,.scene-nav{color:#fff;width:fit-content}
.scene-nav{width:100%;padding-right:6px}
.scene-nav a{min-height:44px;opacity:.72}
.scene-nav a[aria-current]{opacity:1}
.object-note>.micro{opacity:.78}
.object-study{color:#fff;mix-blend-mode:difference}
.frame-heading,.frame-caption{color:inherit;mix-blend-mode:normal;opacity:1;line-height:1.8}
.frame-heading{font-size:9px}
.frame-caption{font-size:8px}
.object-frame{color:#fff;background:transparent;border-color:#aaa;box-shadow:9px 10px 0 -8px #888;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:manipulation}
.logo-art img{filter:var(--logo-filter)}
.logo-art{transition:transform .3s cubic-bezier(.19,1,.22,1)}
.logo-art img{transition:opacity .24s ease,transform .36s cubic-bezier(.19,1,.22,1)}

.form-hint{font-size:9px}
.reading-area{color:#fff;background:transparent;isolation:auto;mix-blend-mode:difference}
.reading-area .eyebrow{opacity:1;color:var(--muted);font-size:9px}
.scene-copy>p:not(.eyebrow),details p{opacity:1;color:var(--muted);font-size:14px;line-height:1.85}
.scene-copy>.intro{font-size:16px}
.identity-line{border-color:var(--rule)}
.identity-line>.micro{opacity:1;color:var(--muted);font-size:9px}
.next-link{font-size:12px;min-height:44px;margin-top:23px;gap:24px}
summary{min-height:50px}
summary>span:first-child,.expand{opacity:1;color:var(--muted)}
details{border-color:var(--rule)}
.colophon{color:#fff;mix-blend-mode:difference}
.edition{opacity:.8}
.copyright{display:flex;align-items:center;gap:7px}
.binary-mark{min-width:100px}
.liquid-field{position:absolute;inset:0;width:100%;height:100%}
.guides-grid,.guides-diagonal,.registration-points,.flourish-position{transform-box:view-box;transform-origin:center;transition:transform .95s cubic-bezier(.65,0,.25,1),opacity .4s ease}
.guides{opacity:.3}
body[data-scene=about] .guides-grid{transform:translate(-38px,34px)}
body[data-scene=about] .guides-diagonal{transform:rotate(7deg) translateY(-36px)}
body[data-scene=about] .registration-points{transform:translate(-38px,34px)}
body[data-scene=about] .flourish-position{transform:translate(55px,-48px) rotate(-8deg)}
body[data-scene=interests] .guides-grid{transform:translate(28px,-24px)}
body[data-scene=interests] .guides-diagonal{transform:rotate(-6deg) translateY(42px)}
body[data-scene=interests] .registration-points{transform:translate(28px,-24px)}
body[data-scene=interests] .flourish-position{transform:translate(-16px,-70px) rotate(12deg)}
body[data-scene=about] .object-study,body[data-scene=interests] .object-study{transform:none}
/* One shared name, with distinct typography for each language. */
.name-button{position:relative;display:inline-grid;grid-template-areas:'name';align-items:center;text-align:left;vertical-align:middle;min-height:44px;padding:0;color:inherit;max-width:100%;touch-action:manipulation}
.name-en,.name-zh{grid-area:name;transition:opacity .22s ease,transform .28s cubic-bezier(.19,1,.22,1);pointer-events:none}
.name-en{opacity:1;transform:none}
.name-zh{font-family:'Syn Calligraphy','Kaiti SC',STKaiti,KaiTi,serif;font-weight:400;font-style:normal;letter-spacing:.1em;line-height:1.4;opacity:0;white-space:nowrap;font-size:1.1em}
.name-zh>span{display:inline-block;transform:translateY(7px);transition:transform .3s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i)*25ms)}

body[data-name=zh] .name-en{opacity:0;transform:translateY(-5px)}
body[data-name=zh] .name-zh{opacity:1}
body[data-name=zh] .name-zh>span{transform:none}
.name-button--inline{font-family:var(--serif);font-size:24px;min-width:126px}
.name-button--display{font:inherit;letter-spacing:inherit;line-height:inherit;width:3.4em;padding-right:0}
.name-button--display .name-zh{font-size:.75em;letter-spacing:.055em}

.name-button--small{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;min-width:98px;padding-right:0}
.name-button--small .name-zh{font-size:17px;letter-spacing:.12em}

.name-button:active{transform:scale(.985)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(hover:hover) and (pointer:fine){.name-button:hover .name-en{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}.name-button--display:hover .name-en{text-decoration:none}}
@media(max-width:1100px){.frame-heading{font-size:8px}.scene-copy>p:not(.eyebrow){font-size:13px}.controls{gap:9px}}
@media(max-width:800px){.masthead-caption{display:none}.scene-nav{padding-right:0}.frame-heading{font-size:7px}.frame-caption{font-size:7px}.edition{font-size:8px}}
@media(max-width:560px){.reading-area{min-height:360px}.scene-copy>p:not(.eyebrow),details p{font-size:14px}.scene-copy>.intro{font-size:16px}.controls{padding:0;gap:5px}.name-button--display{width:3.5em}.colophon{gap:8px}.copyright{gap:5px}.name-button--small{font-size:8px;min-width:94px}.binary-mark{min-width:84px}.frame-heading{font-size:8px}.frame-caption{font-size:8px}.form-hint{font-size:8px}.section-title{font-size:76px}.interests-title{font-size:68px}}
@media(min-width:801px) and (max-height:780px){.scene-copy>p:not(.eyebrow){font-size:13px;line-height:1.8}.reading-area .eyebrow{font-size:8px}.section-title{font-size:70px}.interests-title{font-size:62px}.next-link{margin-top:13px}.stage{padding-top:25px;padding-bottom:30px}}
/* Keyboard and motion-sensitive variants keep geometry still. */
body[data-input=keyboard] .ink-field path,body[data-input=keyboard] .guides,body[data-input=keyboard] .registration-points,body[data-input=keyboard] .flourish-position,body[data-input=keyboard] .logo-art img,body[data-input=keyboard] .name-en,body[data-input=keyboard] .name-zh,body[data-input=keyboard] .name-zh>span{transition:none}
body.motion-paused .ink-field path,body.motion-paused .guides,body.motion-paused .registration-points,body.motion-paused .flourish-position{transition:none}
body.motion-paused .name-en,body.motion-paused .name-zh,body.motion-paused .name-zh>span{transform:none;transition:opacity .16s ease}
body.motion-paused .logo-art,body.motion-paused .logo-art img{transform:none;transition:opacity .16s ease}
@media(prefers-reduced-motion:reduce){.ink-field path,.guides,.registration-points,.flourish-position{transition:none}.name-en,.name-zh,.name-zh>span{transform:none!important;transition:opacity .16s ease}.name-button:active{transform:none}.logo-art img{transform:none!important;transition:opacity .16s ease}}

body.motion-paused .name-button:active,body[data-input=keyboard] .name-button:active{transform:none}
body[data-input=keyboard] .name-en,body[data-input=keyboard] .name-zh,body[data-input=keyboard] .name-zh>span,body[data-input=keyboard] .logo-art img{transition:none}

/* One shared blend plane lets every letter respond to the moving ink. */
.backdrop{z-index:0;background:#f7f7f7}
.masthead,.stage{position:relative;z-index:auto}
.colophon{position:relative;z-index:auto}
.construction{stroke-width:.65}
.guides{opacity:.26}
.scribble{animation:line-breathe 21s cubic-bezier(.45,0,.55,1) infinite alternate}
.dash-a{animation-duration:15s}.dash-b{animation-duration:19s}.dash-c{animation-duration:17s}
.moving-dashes{transition:transform .95s cubic-bezier(.65,0,.25,1)}
body[data-scene=about] .moving-dashes{transform:translate(-38px,34px)}
body[data-scene=interests] .moving-dashes{transform:translate(28px,-24px)}
body.motion-paused .moving-dashes,body[data-input=keyboard] .moving-dashes{transition:none}
@media(prefers-reduced-motion:reduce){.moving-dashes{transition:none}}
/* No motion-dependent content: the quiet variant keeps the same composition. */
body.motion-paused .logo-art,body.motion-paused .logo-art img{transform:none!important}
body.motion-paused .next-link>span,body.motion-paused .form-hint>span:last-child{transform:none!important}
@media(prefers-reduced-motion:reduce){.next-link>span,.form-hint>span:last-child{transform:none!important}}

/* Lift only the wordmark; its surrounding copy keeps its established rhythm. */
.syn-title{position:relative;top:-10px}
@media(max-width:560px){.syn-title{top:-8px}}

/* Opening study: sharp slices, diffused echoes, then the mark settles in place. */
html.intro-pending,html.intro-pending body{background:#0b0b0b}
.intro-pending .composition,.intro-pending .skip{visibility:hidden}
body.entry-running .object-frame{visibility:hidden}
.entry{position:fixed;inset:0;z-index:40;isolation:isolate;overflow:hidden;color:#f7f7f7}
.entry-art{position:absolute;inset:0;pointer-events:none}
.entry-shutter{position:absolute;top:-10%;bottom:-10%;width:calc(50% + 1px);background:#0b0b0b}
.entry-shutter--left{left:0}.entry-shutter--right{right:0}

.entry-mark{position:absolute;left:50%;top:50%;width:min(46vmin,400px);aspect-ratio:1;transform:translate(-50%,-50%);mix-blend-mode:difference}
.entry-flight{position:absolute;inset:0;perspective:800px}
.entry-piece,.entry-echo{position:absolute;inset:0;width:100%;height:100%}
.entry-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:invert(1);pointer-events:none;user-select:none;-webkit-user-drag:none}
.entry-mark .entry-echo--one{filter:invert(1) blur(7px)}
.entry-mark .entry-echo--two{filter:invert(1) blur(3px)}
.entry-piece:nth-of-type(1){clip-path:inset(0 0 72% 0)}
.entry-piece:nth-of-type(2){clip-path:inset(28% 0 52% 0)}
.entry-piece:nth-of-type(3){clip-path:inset(48% 0 32% 0)}
.entry-piece:nth-of-type(4){clip-path:inset(68% 0 16% 0)}
.entry-piece:nth-of-type(5){clip-path:inset(84% 0 0 0)}




.entry-skip{position:absolute;right:4vw;bottom:26px;padding:12px;min-height:44px;font:9px var(--mono);letter-spacing:.1em;color:#f7f7f7;mix-blend-mode:difference}
@media(prefers-reduced-motion:reduce){.entry{display:none!important}.intro-pending .composition,.intro-pending .skip,body.entry-running .logo-circle{visibility:visible}}

/* Construction lines resolve into the permanent frame rather than fading away. */
.entry-frame{position:absolute;mix-blend-mode:difference;color:#fff;pointer-events:none}
.entry-rule{position:absolute;height:1px;background:#aaa;transform-origin:0 0}
.entry-cross{position:absolute;left:14px;top:14px;font:16px/1 var(--mono)}
.entry-cross-end{position:absolute;right:14px;bottom:14px;font:16px/1 var(--mono);opacity:0}
.entry-corners{position:absolute;inset:0;border:1px solid transparent;box-shadow:9px 10px 0 -8px #888}
.entry-refraction{position:absolute;left:40%;top:-20%;width:18%;height:140%;opacity:0;pointer-events:none;transform:rotate(-24deg);border-left:1px solid #ffffff30;border-right:1px solid #ffffff10;background:linear-gradient(90deg,#ffffff00,#ffffff0c 45%,#ffffff00);backdrop-filter:blur(2px) contrast(1.18);-webkit-backdrop-filter:blur(2px) contrast(1.18)}

/* Ink, its contours and the mark share a monochrome material language. */
.construction{width:100%;left:0;opacity:1}
.contour-family{opacity:.32;stroke-width:.7}
.ink-contour:nth-child(3n){stroke-width:1;opacity:.8}
.fine-register{opacity:.4}
.silver-logo{position:absolute;inset:0;mask:url('syn-ring.png') center/contain no-repeat;-webkit-mask:url('syn-ring.png') center/contain no-repeat;background:linear-gradient(115deg,#eaeaea 10%,#9b9b9b 24%,#fff 32%,#bcbcbc 42%,#f7f7f7 55%,#777 63%,#fff 73%,#d9d9d9 90%);background-size:240% 240%;animation:metal-light 18s ease-in-out infinite alternate;z-index:1;pointer-events:none}
@keyframes metal-light{from{background-position:10% 20%}to{background-position:85% 70%}}
body.motion-paused .silver-logo,body.page-hidden .silver-logo{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.silver-logo{animation:none}}
body[data-scene=about] .object-frame,body[data-scene=interests] .object-frame{border-color:transparent;box-shadow:none}
body[data-scene=about] .frame-corner,body[data-scene=interests] .frame-corner{opacity:0}
.object-frame{transition:border-color .7s ease,box-shadow .7s ease}
.frame-corner{transition:opacity .7s ease}
body[data-scene=about] .contour-family{opacity:.23}
body[data-scene=interests] .contour-family{opacity:.42}
.contour-family{transition:opacity .8s ease}
/* The live frame is temporarily lifted into the intro without changing its geometry. */
.entry-live-frame{position:absolute!important;margin:0!important;mix-blend-mode:difference;visibility:visible!important;overflow:visible!important;transition:none!important}
.entry-live-frame .logo-art{transition:none!important}
.entry-live-frame .logo-circle{visibility:hidden}
.entry-live-frame .silver-logo{visibility:hidden}
.entry-live-frame.entry-travelling .logo-circle{visibility:visible}
.entry-live-frame .frame-corner,.entry-live-frame .frame-cross{visibility:hidden}
.entry-live-frame{border-color:transparent!important;box-shadow:none!important}

.entry-live-frame.entry-travelling .silver-logo{visibility:visible}

.logo-art{isolation:isolate}
.silver-logo{mix-blend-mode:multiply}

body>.entry-live-frame{position:fixed!important;z-index:42}
body>.entry-frame{position:fixed;z-index:41}

.entry-restoring{transition:none!important}

/* Reading contrast and tightly fitted bilingual display type. */
:root{--muted:#f5f5f5}
.scene-copy>p:not(.eyebrow),details p{font-size:16px;line-height:1.85;color:#fff}
.scene-copy>.intro{font-size:17px}
.reading-area .eyebrow,.identity-line>.micro{font-size:11px;color:#fff}
.next-link{font-size:14px}
.frame-heading,.masthead-caption,.control-label{font-size:11px}
.scene-nav a{opacity:.88}
.scene-nav a[aria-current]{opacity:1}
.name-button--display .name-zh{font-size:1.08em;letter-spacing:.025em;line-height:1.35}
.name-button--display{max-width:100%;width:3.5em}
@media(max-width:800px){.frame-heading{font-size:9px}.reading-area .eyebrow,.identity-line>.micro{font-size:10px}}