:root {
  --ink: #171719;
  --paper: #eee4e0;
  --paper-rgb: 238, 228, 224;
  --line: rgba(23, 23, 25, 0.2);
  --lime: #c7ff3f;
  --violet: #6558ff;
  --cyan: #9bf5ff;
  --gutter: clamp(18px, 2.2vw, 34px);
  --font: Arial, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  font-size: 16px;
  overflow-x: hidden;
}
body.is-loading, body.menu-open, body.filter-open { overflow: hidden; }
button, a { font: inherit; color: inherit; }
a { text-decoration: none; }
button { border: 0; cursor: pointer; }
.arrow-icon { position:relative;display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.12em; }
.arrow-icon::before { content:"";position:absolute;left:17%;top:49%;width:70%;height:max(1.4px,.085em);border-radius:2px;background:currentColor;transform:rotate(45deg); }
.arrow-icon::after { content:"";position:absolute;right:9%;bottom:9%;width:36%;height:36%;border-right:max(1.4px,.085em) solid currentColor;border-bottom:max(1.4px,.085em) solid currentColor; }
.arrow-icon--ne { transform:rotate(-90deg); }
.filing-number { font-size:10px;opacity:.68;text-decoration:underline;text-underline-offset:2px; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .11;
  mix-blend-mode: multiply;
  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='.84' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.cursor {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(23, 23, 25, .7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 110;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.25);
  transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1), background .2s, color .2s;
}
.cursor span { font-size: 10px; opacity: 0; transition: opacity .2s; }
.cursor.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor.is-hovering { transform: translate(-50%, -50%) scale(1.45); background: var(--ink); color: white; }
.cursor.is-hovering span { opacity: 1; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #202022;
  transition: transform .9s cubic-bezier(.77,0,.18,1), visibility 0s .9s;
}
.loader.is-gone { display:none; }
.loader__panel {
  position: absolute;
  inset: 0;
}
.loader__panel--dark { background: #202022; }
.loader__panel--light { background: var(--paper); transform: translateY(100%); animation: loaderReveal .95s cubic-bezier(.77,0,.18,1) .55s forwards; }
.loader.is-leaving { transform: translateY(-100%); }
@keyframes loaderReveal { to { transform: translateY(0); } }
.loader__identity {
  position: relative;
  z-index: 2;
  width: min(660px, 90vw);
  text-align: center;
  color: var(--ink);
  transition: opacity .3s;
}
.loader.is-leaving .loader__identity { opacity: 0; }
.loader__letters {
  position: absolute;
  inset: 50% 0 auto;
  height: 116px;
  display: grid;
  place-items: center;
  margin-top: -58px;
  color: #f3eae6;
  font-size: 48px;
  line-height: 1;
  animation: loaderGlyphExit .3s ease 1.1s forwards;
}
.loader__letters span { grid-area: 1/1; opacity: 0; animation: glyph 2.7s infinite; }
.loader__letters span:nth-child(2) { animation-delay: .4s; }
.loader__letters span:nth-child(3) { animation-delay: .8s; }
.loader__letters span:nth-child(4) { animation-delay: 1.2s; }
@keyframes glyph { 0%,12% {opacity:0; transform:translateY(28px)} 22%,45% {opacity:1; transform:none} 58%,100% {opacity:0; transform:translateY(-28px)} }
@keyframes loaderGlyphExit { to { opacity:0; visibility:hidden; } }
@keyframes loaderContentIn { to { opacity:1; visibility:visible; transform:translateY(0); } }
.loader__brand,.loader__eyebrow,.loader__slogan,.loader__description,.loader__enter,.loader__sound { opacity:0; visibility:hidden; transform:translateY(12px); animation:loaderContentIn .5s ease forwards; }
.loader__brand { display:block; width:min(440px,82vw); height:auto; margin:0 auto; animation-delay:1.15s; }
.loader__eyebrow { margin:24px 0 12px;font-size:12px;line-height:1.5;letter-spacing:.12em;animation-delay:1.25s; }
.loader__slogan { margin:0;font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:clamp(34px,3.4vw,48px);font-weight:400;line-height:1.18;letter-spacing:-.055em;animation-delay:1.35s; }
.loader__slogan em { font-family:var(--font);font-style:normal;font-weight:700;letter-spacing:-.06em; }
.loader__description { margin:14px 0 32px;font-size:14px;line-height:1.5;opacity:0;animation-delay:1.45s; }
.loader__enter {
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:10px 18px;
  border-radius: 999px;
  background: var(--ink);color:#fff;
  font-size:12px;line-height:1.3;
  animation-delay:1.55s;
  transition: background .2s, transform .2s;
}
.loader__enter:hover { background:#45454a; }
.loader__enter:focus-visible,.loader__sound:focus-within { outline:2px solid var(--ink);outline-offset:4px; }
.loader__enter-icon { font-size:17px;line-height:1; }
.loader__sound { display:flex;align-items:center;justify-content:center;gap:9px;width:max-content;margin:19px auto 0;font-size:12px;line-height:1.4;cursor:pointer;animation-delay:1.65s; }
.loader__sound-check { width:15px;height:15px;margin:0;accent-color:var(--ink);cursor:pointer; }
.loader__progress { position:absolute; left:0; bottom:0; width:100%; height:2px; overflow:hidden; }
.loader__progress i { display:block; width:100%; height:100%; background:var(--lime); transform:translateX(-100%); animation: loadbar 1.6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes loadbar { to { transform:none; } }
@media (max-width: 760px) {
  .loader__eyebrow { max-width:290px;margin:20px auto 12px;font-size:10px;letter-spacing:.06em; }
  .loader__slogan { font-size:clamp(30px,8.2vw,38px); }
  .loader__description { margin:12px 0 28px;font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .loader { background:var(--paper); }
  .loader__panel--light { transform:none; }
  .loader__letters { display:none; }
  .loader__brand,.loader__eyebrow,.loader__slogan,.loader__description,.loader__enter,.loader__sound { opacity:1;visibility:visible;transform:none; }
}

.site-header {
  position: fixed;
  z-index: 80;
  left: 0;
  top: 0;
  width: 100%;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.brand { display:flex; align-items:center; }
.brand__logo { display:block; width:188px; height:auto; }
.about-page .brand__logo,
.project-page .brand__logo { filter:invert(1); }
.about-page.menu-open .brand__logo,
.project-page.menu-open .brand__logo { filter:none; }
.desktop-nav { margin-left:auto; display:flex; gap:26px; font-size:14px; }
.desktop-nav a { position:relative; }
.desktop-nav a::after { content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s; }
.desktop-nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.menu-toggle { position:relative;margin-left:24px;width:42px;height:42px;padding:0;background:transparent;color:inherit; }
.menu-toggle span { position:absolute;left:50%;width:24px;height:2px;border-radius:2px;background:currentColor;transform:translateX(-50%);transform-origin:center;transition:top .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s; }
.menu-toggle span:nth-child(1) { top:12px; }
.menu-toggle span:nth-child(2) { top:20px; }
.menu-toggle span:nth-child(3) { top:28px; }
.menu-toggle:focus-visible { outline:2px solid currentColor;outline-offset:2px; }
.menu-open .menu-toggle span:nth-child(1) { top:20px;transform:translateX(-50%) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity:0;transform:translateX(-50%) scaleX(.35); }
.menu-open .menu-toggle span:nth-child(3) { top:20px;transform:translateX(-50%) rotate(-45deg); }
.menu-open .desktop-nav { opacity:0;pointer-events:none; }
.menu-open .cursor { opacity:0!important; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  padding: 0 var(--gutter) 34px;
  display:block;
  background:var(--paper);
  color:var(--ink);
  visibility:hidden;
  clip-path:circle(0 at calc(100% - 42px) 42px);
  transition:clip-path .9s cubic-bezier(.77,0,.18,1), visibility 0s .9s;
}
.menu-open .menu { visibility:visible; clip-path:circle(150% at calc(100% - 42px) 42px); transition:clip-path .9s cubic-bezier(.77,0,.18,1); }
.menu__orb { display:none; }
.menu__nav { position:absolute;z-index:1;left:37%;top:24%;display:flex;flex-direction:column;align-items:flex-start;gap:12px; }
.menu__nav a { position:relative;display:flex;align-items:flex-start;gap:12px;line-height:.92;font-family:"Times New Roman","Songti SC",serif; }
.menu__nav small { width:20px;padding-top:10px;font-family:var(--font);font-size:10px; }
.menu__nav span { position:relative;font-size:clamp(65px,7.6vw,108px);letter-spacing:-.055em;transition:transform .3s,color .3s; }
.menu__nav span::after { content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s; }
.menu__nav a:hover span { color:#c9c7c5;transform:translateX(7px); }
.menu__nav a:hover span::after { transform:scaleX(1);transform-origin:left; }
.menu__nav a[aria-current="page"] span { color:#c9c7c5; }
.menu__nav a[aria-current="page"] span::after { transform:scaleX(1); }
.menu__meta { position:absolute;z-index:1;left:7%;right:7%;bottom:27px;display:grid;grid-template-columns:1fr 1fr;align-items:end;font-size:12px;line-height:1.45; }
.menu__meta>a:first-child { grid-column:1;font-size:14px;margin-bottom:4px; }
.menu__meta p { grid-column:1;margin:0; }
.menu__wechat { position:relative;grid-column:1;justify-self:start;margin-bottom:9px;font-size:12px; }
.menu__wechat-trigger { padding:0;background:none;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; }
.menu__wechat-trigger:focus-visible { outline:2px solid currentColor;outline-offset:4px; }
.menu__wechat-preview { position:absolute;z-index:5;left:calc(100% + 16px);bottom:0;width:210px;overflow:hidden;border:1px solid rgba(23,23,25,.1);border-radius:14px;background:#fff;box-shadow:0 18px 42px rgba(23,23,25,.18);opacity:0;visibility:hidden;transform:translateY(6px) scale(.97);transition:opacity .2s ease,transform .2s ease,visibility 0s .2s; }
.menu__wechat-preview img { display:block;width:100%;height:auto; }
.menu__wechat:focus-within .menu__wechat-preview,.menu__wechat.is-open .menu__wechat-preview { opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease; }
@media (hover:hover) { .menu__wechat:hover .menu__wechat-preview { opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease; } }

.sound-toggle { position:fixed;left:22px;bottom:22px;z-index:66;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:2px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.08);opacity:0;transform:translateY(15px);pointer-events:none;transition:opacity .35s,transform .35s,background .25s; }
body:not(.is-loading) .sound-toggle { opacity:1;transform:none;pointer-events:auto; }
.sound-toggle span { width:2px;height:8px;background:var(--ink);border-radius:2px;animation:soundbar .8s ease-in-out infinite alternate;animation-play-state:paused; }
.sound-toggle span:nth-child(2) { height:14px;animation-delay:-.3s; }
.sound-toggle span:nth-child(3) { height:11px;animation-delay:-.5s; }
.sound-toggle span:nth-child(4) { height:6px;animation-delay:-.1s; }
.sound-toggle[aria-pressed="true"] span { animation-play-state:running; }
.sound-toggle:hover { background:white; }
@keyframes soundbar { to { transform:scaleY(.28); } }

.page-transition { position:fixed;inset:0;z-index:900;visibility:hidden;pointer-events:none; }
.page-transition div { position:absolute;left:0;width:100%;height:50%;background:#1d1d1f;transform:scaleY(0);transition:transform .75s cubic-bezier(.77,0,.18,1); }
.page-transition div:first-child { top:0;transform-origin:top; }
.page-transition div:last-child { bottom:0;transform-origin:bottom; }
body.is-transitioning .page-transition { visibility:visible; }
body.is-transitioning .page-transition div { transform:scaleY(1); }
html.returning .loader { display:none; }
html.returning .page-transition { visibility:visible; }
html.returning .page-transition div { transform:scaleY(1); }
html.returning.page-ready .page-transition div { transform:scaleY(0); }

.hero { position:relative; min-height:100vh; padding:74px var(--gutter) 120px; overflow:hidden; }
.world { position:fixed; inset:0; z-index:-1; pointer-events:none; perspective:900px; overflow:hidden; }
.world::after { content:""; position:absolute; inset:0; z-index:2; background:radial-gradient(circle at 50% 32%, rgba(255,255,255,.62), rgba(238,227,223,.4) 44%, rgba(222,229,226,.46)); backdrop-filter:blur(.25px); }
.world__ring,.world__shard,.world__sphere { position:absolute; z-index:1; filter:blur(.2px) drop-shadow(0 20px 25px rgba(0,0,0,.07)); transition:transform .1s linear; }
.world__ring { border:clamp(35px,6vw,85px) solid rgba(216,231,229,.62); border-left-color:rgba(255,255,255,.94); border-radius:50%; box-shadow:inset 0 0 35px rgba(115,145,160,.16); }
.world__ring--one { width:44vw; height:74vw; left:-25vw; top:6vh; transform:rotate(-23deg); }
.world__ring--two { width:50vw; height:68vw; right:-28vw; top:7vh; transform:rotate(25deg); }
.world__shard { background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(174,201,203,.4) 43%,rgba(255,255,255,.12)); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(6px); }
.world__shard--one { width:24vw;height:11vw;left:13vw;top:18vh;border-radius:65% 35% 70% 30%;transform:rotate(-14deg); }
.world__shard--two { width:17vw;height:31vw;right:16vw;top:9vh;border-radius:70% 30% 55% 45%;transform:rotate(18deg); }
.world__shard--three { width:22vw;height:8vw;left:40vw;top:47vh;border-radius:50%;transform:rotate(32deg); }
.world__sphere { width:22vw; aspect-ratio:1; border-radius:50%; left:39vw; top:62vh; background:radial-gradient(circle at 32% 27%,#fff,rgba(184,211,215,.75) 28%,rgba(93,88,255,.12) 61%,transparent 72%); }
.hero__heading { text-align:center; margin:0 auto 16px; position:relative; z-index:2; }
.eyebrow { font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.hero__heading .eyebrow { opacity:.62; margin-bottom:12px; }
.hero h1 { margin:0; font-size:clamp(58px,6vw,86px); line-height:.95; letter-spacing:-.07em; font-weight:400; }
.hero__summary { display:none; }

.filters { position:sticky; z-index:10; top:22px; width:max-content; max-width:100%; margin:24px auto 80px; display:flex; padding:4px; border-radius:999px; background:rgba(255,255,255,.76); box-shadow:0 8px 30px rgba(31,36,42,.08); backdrop-filter:blur(14px); }
.filter { padding:7px 14px; border-radius:999px; background:transparent; font-size:11px; white-space:nowrap; transition:.25s; }
.filter sup { font-size:7px; vertical-align:top; margin-left:2px; }
.filter:hover { background:rgba(23,23,25,.08); }
.filter.is-active { background:var(--ink); color:white; }
.mobile-filter { display:none; }
.mobile-filter__icon { display:block;flex:none;width:13px;height:13px;transition:transform .25s ease; }
.mobile-filter.is-open .mobile-filter__icon { transform:rotate(180deg); }
.filter-backdrop,.filters__handle,.filters__header { display:none; }

.project-grid { position:relative; z-index:2; width:min(980px,100%); margin:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:52px 34px; }
.project-card { min-width:0; overflow:hidden;border-radius:16px;background:rgba(255,255,255,.96);opacity:0; --rx:0deg; --ry:0deg; --mx:50%; --my:50%; transform:translateY(70px) rotate(.6deg); transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1),filter .5s; cursor:pointer; }
.project-card:nth-child(4n+2),.project-card:nth-child(4n+3) { transform:translateY(70px) rotate(-.7deg); }
.project-card.is-visible { opacity:1; transform:translateY(0) rotate(.6deg); }
.project-card.is-visible:nth-child(4n+2),.project-card.is-visible:nth-child(4n+3) { transform:translateY(0) rotate(-.7deg); }
.project-card.is-hidden { display:none; }
.project-card:hover { filter:drop-shadow(0 20px 18px rgba(30,35,40,.16)); }
.project-card__visual { position:relative; aspect-ratio:1.55; overflow:hidden;border-radius:16px 16px 0 0; background:#111; transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.project-card__visual::before { content:""; position:absolute; inset:-35%; z-index:4; opacity:0; pointer-events:none; background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.28),transparent 20%); transition:opacity .3s; mix-blend-mode:overlay; }
.project-card__visual::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.25); mix-blend-mode:overlay; pointer-events:none; }
.project-card:hover .project-card__visual::before { opacity:1; }
.visual__code { position:absolute; left:12px; top:10px; z-index:3; color:white; font:9px/1.2 monospace; letter-spacing:.1em; mix-blend-mode:difference; }
.visual__code::after { content:"  ●";opacity:0;color:var(--lime); }
.project-card__visual[data-playing="true"] .visual__code::after { opacity:1;animation:recordPulse 1.2s steps(2,end) infinite; }
@keyframes recordPulse { 50%{opacity:.2} }
.motion-canvas { position:absolute; inset:-3%; width:106%; height:106%; z-index:0; opacity:.42; mix-blend-mode:screen; transform:scale(1.04); transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.project-card:hover .motion-canvas { transform:scale(1.11); }
.project-media { position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;z-index:0;transform:scale(1.045) translate3d(-.8%,0,0);animation:mediaDrift 9s ease-in-out infinite alternate;transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .5s; }
.has-media .motion-canvas { z-index:1;opacity:.2; }
.has-media > :not(.project-media):not(.motion-canvas):not(.visual__code) { display:none; }
.project-card:nth-child(even) .project-media { animation-direction:alternate-reverse; }
.project-card:hover .project-media { transform:scale(1.11) translate3d(1%,0,0);filter:saturate(1.08) contrast(1.03); }
.project-card__visual[data-playing="false"] .project-media { animation-play-state:paused; }
@keyframes mediaDrift { to{transform:scale(1.09) translate3d(1.4%,-.7%,0)} }
.project-card__meta { min-height:116px;padding:24px 24px 26px;background:rgba(255,255,255,.96);display:flex;justify-content:space-between;gap:18px;align-items:center; }
.project-card__meta h2,.project-card__meta p { margin:0; }
.project-card__meta h2 { font-size:20px;line-height:1.2;font-weight:600; }
.project-card__meta p { margin-top:13px;color:#55565a;font-size:14px;line-height:1.35;font-weight:400; }
.project-card__meta > span { align-self:flex-end;font-size:21px;transition:transform .3s; }
.project-card:hover .project-card__meta > span { transform:translate(4px,4px); }

/* The project page keeps its DOM gallery as the accessible and no-WebGL fallback. */
.gallery-scene { position:fixed;inset:0;z-index:1;width:100%;height:100%;pointer-events:auto;touch-action:pan-y;opacity:1;transition:opacity .5s; }
.gallery-active { background:#eeecea; }
.gallery-active .hero { overflow:visible;background:transparent; }
.gallery-active .world::before { content:"";position:absolute;inset:0;z-index:0;background:url('./assets/home-dreamscape.jpg') center/cover no-repeat;filter:grayscale(.65) brightness(1.28) contrast(.85) blur(2px);opacity:.16; }
.gallery-active .project-grid { position:absolute;left:0;top:0;height:1px;overflow:hidden;opacity:0;pointer-events:none; }
.gallery-focus-ring { position:fixed;z-index:2;left:0;top:0;border:2px solid #171719;outline:2px solid #fff;outline-offset:2px;pointer-events:none;opacity:0; }
.gallery-butterflies { position:fixed;inset:0;z-index:2;width:100%;height:100%;pointer-events:none; }
.gallery-active .hero__heading { position:fixed;top:77px;left:0;width:100%;z-index:12;margin:0;pointer-events:none; }
.gallery-active .hero h1 { font-size:clamp(48px,4.5vw,76px); }
.gallery-active .filters { position:fixed;top:166px;left:50%;z-index:13;margin:0;transform:translateX(-50%); }
.gallery-active.gallery-past .gallery-scene,.gallery-active.gallery-past .gallery-butterflies,.gallery-active.gallery-past .gallery-focus-ring,.gallery-active.gallery-past .hero__heading,.gallery-active.gallery-past .filters { opacity:0;pointer-events:none; }
.gallery-active .hero__heading,.gallery-active .filters { transition:opacity .35s; }

.visual--core { background:radial-gradient(circle at 50% 50%,#4561ff 0,#06152f 42%,#030407 73%); }
.core__halo { position:absolute; width:58%; aspect-ratio:1; border:1px solid rgba(164,225,255,.8); border-radius:50%; left:21%; top:8%; box-shadow:0 0 55px #4b70ff,inset 0 0 35px #72e8ff; animation:pulse 3s ease-in-out infinite; }
.core__object { position:absolute; width:32%; aspect-ratio:1; left:34%; top:23%; background:conic-gradient(from 45deg,#c8ff43,#5d57ff,#96f1ff,#c8ff43); clip-path:polygon(50% 0,95% 25%,83% 78%,50% 100%,15% 75%,4% 27%); filter:blur(1px) drop-shadow(0 0 24px #95dfff); animation:spin 12s linear infinite; }
@keyframes pulse { 50%{transform:scale(1.08);opacity:.65} }
@keyframes spin { to{transform:rotate(360deg)} }

.visual--grid { display:grid; place-items:center; background:linear-gradient(145deg,#d8ff72,#f5f0e7 42%,#b5acf8); }
.visual--grid::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(0,0,0,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.12) 1px,transparent 1px); background-size:30px 30px; }
.grid__window { position:relative; width:70%; height:62%; padding:20px; color:white; background:rgba(18,18,20,.91); border-radius:3px; box-shadow:18px 22px 40px rgba(48,37,85,.25); transform:perspective(500px) rotateY(-8deg) rotateX(4deg); }
.grid__window > span { font-size:28px;font-weight:800;letter-spacing:-.08em; }
.grid__window i { display:block;width:38%;height:2px;background:var(--lime);margin:18px 0; }
.grid__window b { position:absolute;right:14px;bottom:14px;text-align:right;font-size:10px;line-height:1.25;letter-spacing:.05em; }

.visual--fluid { background:#cec7ff; }
.visual--fluid > div { position:absolute;border-radius:50%;filter:blur(1px);mix-blend-mode:multiply;animation:float 8s ease-in-out infinite alternate; }
.fluid__a { width:68%;height:92%;left:-5%;top:-20%;background:radial-gradient(circle at 30% 30%,#ffffc0,#38d1ff 55%,#372fff); }
.fluid__b { width:60%;height:78%;right:-8%;bottom:-25%;background:radial-gradient(circle at 70% 70%,#fdff7b,#ff7ee8 52%,#6149ff);animation-delay:-2s!important; }
.fluid__c { width:32%;height:42%;left:43%;top:22%;background:#b9ff5d;filter:blur(16px)!important;animation-delay:-4s!important; }
@keyframes float { to{transform:translate(8%,8%) rotate(12deg) scale(1.08)} }

.visual--machine { background:linear-gradient(150deg,#101113 0 48%,#25282a 48%); }
.machine__screen { position:absolute;left:18%;top:13%;width:64%;height:67%;padding:18px;color:#cfff4c;border:1px solid #667074;background:rgba(4,10,13,.72);box-shadow:0 0 0 7px #262b2d,0 18px 35px #0008;transform:perspective(500px) rotateY(8deg); }
.machine__screen::before { content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,#bfff5022 6px); }
.machine__screen b { font-size:clamp(28px,5vw,58px);letter-spacing:-.08em; }
.machine__screen span { position:absolute;left:18px;bottom:14px;font:9px/1.25 monospace;color:#e9eeee; }
.machine__rail { position:absolute;left:6%;right:6%;bottom:9%;height:4px;background:#687076;box-shadow:0 8px 20px #000; }

.visual--type { background:#f1ff3d;color:#131315;padding:26px; }
.visual--type p { position:relative;z-index:1;margin:0;font-weight:800;font-size:clamp(42px,6.7vw,74px);line-height:.98;letter-spacing:-.08em; }
.visual--type em { font-style:normal;color:#675bff; }
.visual--type .visual__code { color:#111;mix-blend-mode:normal;left:auto;right:12px; }

.visual--portal { background:radial-gradient(circle,#6b5cff 0 4%,#1b1649 31%,#07070a 68%);display:grid;place-items:center; }
.portal__tunnel { width:48%;aspect-ratio:1;border:1px solid #c7ff62;border-radius:14%;box-shadow:0 0 0 20px #796cff22,0 0 0 40px #796cff17,0 0 70px #6658ff;animation:portal 5s ease-in-out infinite; }
.portal__dot { position:absolute;width:7px;height:7px;background:white;border-radius:50%;box-shadow:0 0 18px 7px #bcff72; }
@keyframes portal { 50%{transform:rotate(45deg) scale(.8);border-radius:50%} }

.visual--signal { background:linear-gradient(115deg,#e9e0dc 0 42%,#bdfd4b 42%);color:#141416; }
.signal__mark { position:absolute;left:14%;top:12%;font-weight:800;font-size:clamp(52px,8vw,86px);line-height:1.02;letter-spacing:-.14em; }
.signal__lines { position:absolute;right:9%;top:11%;width:44%;height:78%;border:1px solid #111;border-radius:50%;box-shadow:0 0 0 16px transparent,0 0 0 17px #111,0 0 0 34px transparent,0 0 0 35px #111;transform:scale(.62); }
.visual--signal .visual__code { color:#111;mix-blend-mode:normal;left:auto;right:12px; }

.visual--neural { background:#08090b; }
.neural-canvas { position:absolute;inset:0;width:100%;height:100%; }
.neural__title { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:white;font-size:clamp(24px,4vw,48px);font-weight:700;line-height:1.08;letter-spacing:-.06em;text-align:center;mix-blend-mode:difference; }

.manifesto { position:relative;z-index:3;padding:170px var(--gutter);background:#1d1d1f;color:#f2e8e3; }
.manifesto h2 { max-width:1000px;margin:28px 0 40px;font-size:clamp(48px,8vw,115px);font-weight:500;line-height:1.16;letter-spacing:-.06em;text-wrap:balance; }
.manifesto > p:last-child { max-width:580px;margin-left:auto;font-size:18px;line-height:1.38; }
.manifesto strong { font-weight:600;color:var(--lime); }

.brand-intro { position:relative;z-index:3;min-height:78vh;padding:42px var(--gutter) 100px;background:#d8d7ef;color:var(--ink); }
.brand-intro__top { display:flex;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:1px solid rgba(23,23,25,.3);font-size:11px;letter-spacing:.08em; }
.brand-intro__body { display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(40px,6vw,110px);align-items:end;padding-top:clamp(85px,12vw,170px); }
.brand-intro h2 { margin:0;font-size:clamp(60px,8vw,124px);font-weight:400;line-height:1.12;letter-spacing:-.07em; }
.brand-intro h2 small { display:block;margin-bottom:20px;font-family:"Times New Roman",Georgia,serif;font-size:clamp(32px,3.5vw,52px);font-style:italic;font-weight:400;letter-spacing:-.055em; }
.brand-intro h2 em { display:block;font-family:"Songti SC",serif;font-style:normal;color:#5144c8;white-space:nowrap; }
.brand-intro__detail { max-width:480px; }
.brand-intro__detail>p { margin:0 0 24px;font-size:17px;line-height:1.55; }
.brand-intro__detail .brand-intro__label { margin-bottom:30px;font-size:12px;letter-spacing:.12em; }
.brand-intro__detail .brand-intro__path { margin:35px 0;font-size:12px;line-height:1.8;letter-spacing:.03em; }
.brand-intro__link { display:inline-flex;align-items:center;justify-content:space-between;gap:48px;padding:12px 19px;border:1px solid currentColor;border-radius:999px;font-size:13px;transition:background .2s,color .2s; }
.brand-intro__link:hover { background:var(--ink);color:#fff; }

footer { position:relative;z-index:3;padding:120px var(--gutter) 28px;min-height:82vh;background:var(--paper);display:flex;flex-direction:column; }
.footer__lead { margin:auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:30px;width:min(1040px,100%);align-items:center; }
footer h2 { grid-row:1/3;margin:0;font-weight:400;line-height:.77;letter-spacing:-.075em; }
footer h2 em { display:block;font-family:"Times New Roman","Songti SC",serif;font-size:clamp(78px,11vw,155px);font-weight:400; }
footer h2 span { display:block;margin-top:28px;font-size:clamp(22px,3vw,42px);line-height:.9;text-transform:uppercase;letter-spacing:-.055em; }
.footer__actions { display:flex;gap:10px;align-self:end; }
.footer__actions a { display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border:1px solid;border-radius:999px;background:rgba(255,255,255,.72);font-size:12px; }
.footer__contact { grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:10px;align-self:start; }
.footer__mail { font-size:clamp(24px,2.8vw,38px);white-space:nowrap;letter-spacing:-.05em;border-bottom:1px solid; }
.footer__wechat { margin:0;font-size:clamp(17px,1.8vw,23px);letter-spacing:-.02em; }
.footer-contact { display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px; }
.footer__bottom { margin-top:auto;padding-top:100px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid; }
.footer__bottom p { margin:0;font-size:12px; }
.footer__bottom p:last-child { text-align:right; }

@media (max-width: 760px) {
  .cursor,.desktop-nav { display:none; }
  .site-header { padding-top:16px; }
  .brand { position:static;transform:none;margin-right:auto; }
  .brand__logo { width:168px; }
  .menu-toggle { width:40px;height:40px;margin-left:auto; }
  .menu { padding:0 18px 24px; }
  .menu__nav { left:29px;top:28%;gap:9px; }
  .menu__nav span { font-size:80px; }
  .menu__nav small { width:18px;padding-top:10px; }
  .menu__meta { left:42px;right:42px;bottom:32px; }
  .menu__wechat-preview { position:fixed;left:50%;top:50%;bottom:auto;width:min(74vw,260px);transform:translate(-50%,-48%) scale(.97); }
  .menu__wechat:focus-within .menu__wechat-preview,.menu__wechat.is-open .menu__wechat-preview { transform:translate(-50%,-50%) scale(1); }
  .hero { padding:72px 0 90px; }
  .hero__heading { display:none; }
  .filter-backdrop { display:block;position:fixed;inset:0;z-index:90;background:rgba(15,15,17,.52);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s; }
  .filter-open .filter-backdrop { opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease; }
  .filters,.gallery-active .filters { position:fixed;left:0;right:0;top:auto;bottom:0;width:100%;max-width:none;max-height:min(80dvh,620px);margin:0;z-index:91;display:flex;flex-direction:column;gap:10px;padding:16px 20px max(24px,env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:#fff;box-shadow:0 -12px 50px rgba(0,0,0,.14);transform:translateY(105%);opacity:1;visibility:hidden;pointer-events:none;overflow-y:auto;overscroll-behavior:contain;transition:transform .38s cubic-bezier(.22,.8,.22,1),visibility 0s .38s; }
  .filters.is-open,.gallery-active .filters.is-open { transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .38s cubic-bezier(.22,.8,.22,1); }
  .filters__handle { display:block;flex:none;width:42px;height:5px;margin:0 auto 6px;border-radius:999px;background:#d5d5d7; }
  .filters__header { display:flex;flex:none;align-items:center;justify-content:space-between;margin-bottom:6px;padding:0 4px; }
  .filters__header h2 { margin:0;font-size:18px;line-height:1.3;font-weight:600; }
  .filters__close { width:32px;height:32px;border-radius:50%;background:#f1f1f2;font-size:24px;line-height:1; }
  .filter { flex:none;width:100%;min-height:52px;padding:11px 18px;border:1px solid rgba(23,23,25,.13);background:white;font-size:15px; }
  .filter sup { font-size:10px;margin-left:4px; }
  .filter.is-active { border-color:var(--ink);background:var(--ink); }
  .mobile-filter { position:relative;top:auto;z-index:41;width:106px;min-height:40px;margin:0 auto 124px;padding:10px 15px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;line-height:1;box-shadow:0 7px 24px rgba(0,0,0,.07); }
  .project-grid { grid-template-columns:1fr;width:calc(100% - 48px);margin-left:48px;margin-right:0;gap:25px; }
  .project-card,.project-card:nth-child(n) { transform:translateY(50px) rotate(0); }
  .project-card.is-visible,.project-card.is-visible:nth-child(n) { transform:none; }
  .project-card__visual { aspect-ratio:1.87; }
  .project-card__meta { min-height:98px;padding:18px 18px 20px; }
  .project-card__meta h2 { font-size:18px; }
  .project-card__meta p { margin-top:10px;font-size:13px; }
  .gallery-active .hero__heading { display:block;top:75px; }
  .gallery-active .hero h1 { font-size:clamp(34px,9vw,48px); }
  .gallery-active .mobile-filter { position:fixed;left:50%;top:127px;z-index:41;transform:translateX(-50%);margin:0; }
  .gallery-active.gallery-past .mobile-filter { opacity:0;pointer-events:none; }
  .world__ring--one { width:100vw;height:160vw;left:-67vw; }
  .world__ring--two { width:110vw;height:150vw;right:-75vw; }
  .world__shard--one { width:55vw;height:24vw;left:4vw; }
  .world__shard--two { width:34vw;height:68vw;right:7vw; }
  .world__sphere { width:60vw;left:22vw;top:62vh; }
  .manifesto { padding-block:110px; }
  .manifesto h2 { font-size:51px; }
  .brand-intro { padding-top:27px;padding-bottom:90px;min-height:auto; }
  .brand-intro__top { font-size:9px; }
  .brand-intro__top span:last-child { text-align:right; }
  .brand-intro__body { grid-template-columns:1fr;gap:55px;padding-top:100px; }
  .brand-intro h2 { font-size:clamp(50px,12vw,76px); }
  .brand-intro h2 small { font-size:clamp(22px,6vw,32px);line-height:1.2; }
  .brand-intro h2 em { font-size:clamp(43px,12vw,60px); }
  .brand-intro__detail>p { font-size:16px; }
  footer { min-height:82vh;padding-top:90px; }
  .footer__lead { grid-template-columns:1fr;gap:26px; }
  footer h2 { grid-row:auto; }
  footer h2 em { font-size:78px; }
  footer h2 span { margin-top:22px;font-size:31px; }
  .footer__actions { align-self:start; }
  .footer__contact { grid-column:1; }
  .footer__mail { font-size:25px; }
  .footer__wechat { font-size:18px; }
  .footer-contact { align-items:flex-start; }
  .footer__bottom { grid-template-columns:1fr 1fr;row-gap:12px; }
  .footer__bottom p:last-child { text-align:left;grid-column:1/-1; }
  .sound-toggle { left:16px;bottom:16px;width:38px;height:38px; }
}

@media (max-width:760px) and (hover:hover) {
  .menu__wechat:hover .menu__wechat-preview { transform:translate(-50%,-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; }
}