@charset "UTF-8";
:root{color-scheme:light;--paper:#eae7e0;--ink:#20283a;--blue:#3156ef;--px:0;--py:0;--energy:0}
*{box-sizing:border-box}html{min-height:100%;background:var(--paper)}body{margin:0;padding:0 3.5vw;font-family:Arial,"Microsoft YaHei",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}::selection{background:var(--blue);color:white}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:5;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.masthead{height:116px;display:flex;align-items:center;justify-content:space-between;gap:24px}.signature{display:flex;align-items:center;gap:18px;margin:0;line-height:1}.signature-cn{font-size:28px;font-weight:600;letter-spacing:-2px}.signature-dot{height:7px;width:7px;background:var(--blue);border-radius:50%;align-self:center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.signature-en{font-family:"Arial Black",Arial,sans-serif;font-size:clamp(30px,3.6vw,56px);font-weight:900;letter-spacing:-.075em}.masthead-note{font-size:12px;letter-spacing:.18em;color:#666b75}
main{width:100%}.project-portal{position:relative;isolation:isolate;display:block;height:calc(100svh - 194px);min-height:480px;max-height:980px;overflow:hidden;text-decoration:none;color:#f2ece0;background:#111d3a;outline-offset:6px;transform:translateZ(0);animation:portal-arrive 1.2s cubic-bezier(.16,1,.3,1) both}.project-portal::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 54% 28%,#354c8d 0%,#192744 42%,#0e172b 85%);transition:opacity 1s;opacity:.9}.project-portal::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 130px #050d2470;border:1px solid #15214030}.project-portal:focus-visible{outline:3px solid var(--blue)}.fold-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}.portal-light{position:absolute;z-index:-1;width:80%;height:100%;left:10%;top:0;background:radial-gradient(ellipse,#668ee929,transparent 65%);transform:translate(calc(var(--px)*70px),calc(var(--py)*30px));pointer-events:none}
.project-index{position:absolute;left:36px;right:36px;top:28px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;color:#bbc6e0;z-index:4}.project-index span:first-child{display:flex;align-items:center;gap:10px}.project-index span:first-child::before{content:"";width:5px;height:5px;border-radius:50%;background:#d5bd82;box-shadow:0 0 12px #e4c86a80}
.card-space{position:absolute;inset:0;perspective:1300px;transform:rotateX(calc(var(--py)*-3deg)) rotateY(calc(var(--px)*4deg));transition:transform .1s linear;pointer-events:none}.portal-card{--x:-50%;--y:-50%;--r:0deg;--depth:20px;position:absolute;width:clamp(135px,15.5vw,246px);aspect-ratio:2/3;left:50%;top:43%;transform:translate3d(calc(var(--x) + var(--px)*var(--depth)),calc(var(--y) + var(--py)*var(--depth)),0) rotate(var(--r));z-index:3;transition:transform .9s cubic-bezier(.19,1,.22,1),filter .9s;will-change:transform}.card-float{display:block;position:relative;width:100%;height:100%;border-radius:3px;overflow:hidden;box-shadow:0 22px 55px #02091790,0 0 0 1px #e3cc8d70;animation:card-breathe 8s ease-in-out infinite;animation-delay:var(--delay,0s);transform:translateZ(0)}.card-float::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(calc(125deg + var(--px)*40deg),transparent 20%,#d8e7ff18 37%,#fff1c426 42%,#b0ceff16 47%,transparent 60%);mix-blend-mode:screen;transform:translateX(calc(var(--px)*22%));opacity:.7;transition:opacity .6s}.portal-card img{display:block;width:100%;height:100%;object-fit:contain;backface-visibility:hidden}.card-one{--x:-202%;--y:-39%;--r:-23deg;--depth:38px;--delay:-1.4s;z-index:1;filter:brightness(.8)}.card-two{--x:-130%;--y:-48%;--r:-12deg;--depth:28px;--delay:-.5s;z-index:2}.card-center{z-index:5;--depth:14px;transform:translate3d(calc(-50% + var(--px)*14px),calc(-50% + var(--py)*14px),70px);width:clamp(146px,16.6vw,264px)}.card-four{--x:30%;--y:-48%;--r:12deg;--depth:28px;--delay:-2.5s;z-index:2}.card-five{--x:102%;--y:-39%;--r:23deg;--depth:38px;--delay:-4s;z-index:1;filter:brightness(.85)}
.project-portal.is-hovered .card-one{--x:-229%;--r:-27deg;filter:brightness(1)}.project-portal.is-hovered .card-two{--x:-144%;--r:-15deg}.project-portal.is-hovered .card-four{--x:44%;--r:15deg}.project-portal.is-hovered .card-five{--x:129%;--r:27deg;filter:brightness(1)}.project-portal.is-hovered .card-float::after{opacity:1}
.project-caption{position:absolute;left:36px;right:36px;bottom:34px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;z-index:6;pointer-events:none}.project-category{font-size:11px;letter-spacing:.15em;margin:0 0 15px;color:#b8c7e5}.project-caption h2{font-size:clamp(48px,6.3vw,100px);letter-spacing:-.055em;font-weight:500;line-height:1;margin:0}.project-ai{font-family:Georgia,"Times New Roman",serif;font-style:italic;letter-spacing:-.08em}.title-period{color:#d6b879;display:inline-block;margin-left:6px}.enter-project{display:flex;align-items:center;gap:23px;padding-bottom:7px;font-size:12px;letter-spacing:.1em}.enter-project svg{height:44px;width:44px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .7s cubic-bezier(.16,1,.3,1)}.project-portal:hover .enter-project svg{transform:translate(5px,-5px)}
.portal-cursor{position:absolute;z-index:10;left:0;top:0;width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:9px;background:#ede8dc;color:#1c2843;font-size:12px;pointer-events:none;opacity:0;transform:translate3d(-100px,-100px,0) scale(.4);transition:opacity .25s,background .25s;will-change:transform}.site-footer{height:78px;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:10px;letter-spacing:.05em;color:#6b6e77}.bilibili-link{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:12px;padding:10px 0;position:relative}.bilibili-link::after{content:"";position:absolute;bottom:6px;height:1px;background:var(--blue);left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .4s}.bilibili-link:hover::after,.bilibili-link:focus-visible::after{transform:scaleX(1)}.bilibili-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.external-arrow{display:inline-block;font-size:19px;transition:transform .3s}.bilibili-link:hover .external-arrow{transform:translate(3px,-3px)}
.page-transition{position:fixed;inset:0;background:#0c1421;z-index:20;pointer-events:none;opacity:0;transition:opacity .4s}.is-leaving .page-transition{opacity:1;transition-delay:.46s}.is-leaving .portal-card{transform:translate3d(-50%,-50%,0) rotate(0);transition:transform .5s cubic-bezier(.7,0,.3,1)}.is-leaving .card-center{transform:translate3d(-50%,-50%,150px) scale(1.4);transition-delay:.3s;z-index:8}.is-leaving .project-caption,.is-leaving .project-index{opacity:0;transition:opacity .3s}.is-leaving .card-float{animation-play-state:paused}.is-leaving .portal-cursor{opacity:0!important}
@media(hover:hover) and (pointer:fine){.project-portal.is-hovered{cursor:none}.project-portal.is-hovered .portal-cursor{opacity:1}}
@media(min-width:1800px){body{max-width:2200px;margin:auto}}
@media(max-width:800px){.masthead{height:100px}.signature{gap:13px}.signature-cn{font-size:24px}.signature-en{font-size:38px}.masthead-note{font-size:10px}.project-portal{height:calc(100svh - 166px);min-height:500px}.project-index{left:23px;right:23px;top:24px;font-size:9px}.project-caption{left:23px;right:23px;bottom:28px;gap:15px}.project-caption h2{font-size:60px}.enter-project{gap:12px}.enter-project svg{width:34px;height:34px}.project-category{font-size:10px;letter-spacing:.08em}.site-footer{height:66px}.card-space{transform:none}.portal-card{top:44%;width:clamp(125px,21vw,165px)}.card-center{width:clamp(137px,23vw,183px)}.card-one{--x:-182%;--r:-20deg}.card-five{--x:82%;--r:20deg}}
@media(max-width:520px){body{padding:0 16px}.masthead{height:94px}.signature-cn{font-size:22px}.signature-en{font-size:33px}.signature{gap:11px}.signature-dot{height:5px;width:5px}.masthead-note{display:none}.project-portal{height:calc(100svh - 160px);min-height:510px}.project-index{left:20px;right:20px;top:22px}.project-caption{left:20px;right:20px;bottom:28px;display:block}.project-caption h2{font-size:52px}.project-category{font-size:10px;letter-spacing:.04em;margin-bottom:12px}.enter-project{justify-content:space-between;margin-top:25px;padding:0;font-size:11px}.enter-project svg{width:29px;height:29px}.card-space{inset:0 0 80px}.portal-card{top:43%;width:130px}.card-center{width:143px}.card-one,.card-five{display:none}.card-two{--x:-130%;--y:-46%;--r:-14deg}.card-four{--x:30%;--y:-46%;--r:14deg}.project-portal.is-hovered .card-two{--x:-130%}.project-portal.is-hovered .card-four{--x:30%}.site-footer{font-size:9px}.bilibili-link{font-size:11px;gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.portal-card,.card-space{will-change:auto}.portal-cursor{display:none}.project-portal.is-hovered{cursor:pointer}.is-leaving .page-transition{opacity:0}}
@keyframes card-breathe{0%,100%{transform:translateY(0) rotate(.3deg)}50%{transform:translateY(-9px) rotate(-.3deg)}}
@keyframes portal-arrive{from{opacity:0;clip-path:inset(5% 0 0 0);transform:translateY(18px)}to{opacity:1;clip-path:inset(0);transform:translateY(0)}}
/* A quiet frame around the work, with independently lit crystal facets. */
body{padding-top:28px}
.project-portal{height:calc(100svh - 106px)}
.project-caption h1{font-size:clamp(48px,6.3vw,100px);letter-spacing:-.055em;font-weight:500;line-height:1;margin:0}
.portal-card.is-cycling{transition:none}
.portal-card.is-cycling .card-float{animation-play-state:paused}
.card-center .card-float{background:#142955;border-radius:3px;box-shadow:0 24px 65px #020917a0,0 0 0 1px #d9bd8290,0 0 17px #6da7ff17}
.card-center .card-float>img{clip-path:inset(1px round 2px)}
.card-center .card-float::after{opacity:.25}
.back-facets,.back-foil,.back-edge{position:absolute;inset:2px;display:block;width:calc(100% - 4px);height:calc(100% - 4px);pointer-events:none;border-radius:2px}
.back-facets{mix-blend-mode:screen;overflow:hidden}
.facet-a{opacity:var(--facet-a,.13)}.facet-b{opacity:var(--facet-b,.08)}.facet-c{opacity:var(--facet-c,.09)}
.back-foil{background:linear-gradient(119deg,transparent 29%,#a2ceff08 36%,#fff4cf3b 42%,#b7d9ff12 48%,transparent 57%);background-size:260% 210%;background-position:var(--foil-x,50%) var(--foil-y,50%);mix-blend-mode:screen;opacity:.65;clip-path:polygon(2% 1%,98% 1%,98% 99%,2% 99%)}
.back-edge{border:1px solid #d8bd7770;box-shadow:inset 0 0 3px #f3dca747,inset 0 0 0 1px #18294f99}
@media(max-width:800px){.project-portal{height:calc(100svh - 94px)}.project-caption h1{font-size:60px}}
@media(max-width:520px){body{padding-top:16px}.project-portal{height:calc(100svh - 82px)}.project-caption h1{font-size:52px}}