:root{
  --night:#070b19;--night-2:#0b1324;--surface:#111b2e;--text:#e7edf6;--muted:#a8b5ca;
  --paper:#e9edf3;--ink:#1c2736;--line:#ffffff14;--accent:#dff5ff;--lamp:#f4dda7;--gutter:clamp(24px,6vw,96px);
  --serif:"Songti SC","Times New Roman",serif;--sans:Arial,"PingFang SC",sans-serif;
  font-family:var(--sans);background:var(--night);color:var(--text);color-scheme:dark
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--night);overflow-x:hidden}body:has(dialog[open]){overflow:hidden}
.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}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button{border:0}
a:focus-visible,button:focus-visible{outline:2px solid #a9d9ee;outline-offset:5px}a:hover,button:hover{opacity:.78}a:active,button:active{transform:translateY(1px)}
::selection{background:#cae8f1;color:#102036}.skip{position:fixed;top:-90px;left:24px;padding:14px 18px;background:var(--night);z-index:120}.skip:focus{top:12px}
.site-header{position:absolute;z-index:20;display:flex;align-items:center;justify-content:space-between;width:100%;height:92px;padding:0 var(--gutter);pointer-events:none}
.site-header a,.site-header button{pointer-events:auto}.mark{font:28px/1 "Times New Roman",serif;letter-spacing:.14em}.site-header nav{display:flex;gap:32px}.site-header nav a{font-size:10px;letter-spacing:.2em;padding:16px 0}
.settings{display:flex;align-items:center;gap:14px}.settings button{background:none;min-height:44px;min-width:44px;font-size:10px;color:var(--muted)}.settings button+button{border-left:1px solid var(--line);padding-left:16px}
.stage{height:100svh;min-height:660px;position:relative;overflow:hidden;background:var(--night)}.sky{position:absolute;inset:0;background:radial-gradient(ellipse at 72% 40%,#1b31525c,transparent 52%),linear-gradient(180deg,#07101f 0%,#070b19 80%);pointer-events:none}
#world{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s ease-out}.ready #world{opacity:1}.poster{position:absolute;width:66%;height:90%;right:-1%;bottom:0;object-fit:contain}.ready .poster{display:none}
.hero-copy{position:absolute;left:var(--gutter);top:21%;z-index:3;width:min(42vw,540px);display:flex;flex-direction:column}
.role-tag{font-size:12px;letter-spacing:.14em;color:var(--muted);margin:0 0 36px}
.hero-name{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin:0 0 40px;font:700 clamp(68px,8vw,120px)/.95 var(--serif);letter-spacing:.03em}
.hero-name .slogan-en{display:block;font:400 clamp(18px,1.9vw,24px)/1.35 "Times New Roman",serif;letter-spacing:.02em;color:var(--text);font-weight:400}
.statement{max-width:22em;font:16px/1.6 var(--serif);letter-spacing:.03em;color:#c8d2e0;margin:0 0 44px}
.cta-btn{display:inline-flex;gap:14px;align-items:center;align-self:flex-start;padding:4px 0 10px;border-bottom:1px solid #8396b766;font-size:13px;letter-spacing:.08em}
.cta-btn span:last-child{font-size:16px;line-height:1}
.portal-labels{position:absolute;inset:0;pointer-events:none}.portal-labels a{position:absolute;min-height:44px;min-width:44px;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.18em;pointer-events:auto;white-space:nowrap}.portal-labels span{opacity:.55}
.room-copy{position:absolute;z-index:4;left:var(--gutter);top:21%;max-width:520px;opacity:0}.room-copy>p{font-size:10px;letter-spacing:.28em;color:#aebed4;margin:0 0 22px}.room-copy h2{font:400 clamp(34px,4.6vw,66px)/1.2 var(--serif);margin:0 0 20px}.room-copy>span{font:14px/1.85 var(--serif);color:var(--muted)}
.project-portals{position:absolute;inset:0;z-index:5;pointer-events:none}.project-portals button{position:absolute;display:flex;align-items:center;gap:11px;background:transparent;border:0;padding:13px 0;font:500 9px/1 var(--sans);letter-spacing:.16em;color:#d8e3f2;white-space:nowrap;pointer-events:auto;text-shadow:0 2px 12px #020815;transition:opacity .18s ease-out,color .18s ease-out}.project-portals button:after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:#c9dcf03b;transform:scaleX(.36);transform-origin:left;transition:transform .2s ease-out,background .2s ease-out}.project-portals button:hover,.project-portals button.active{opacity:1;color:#fff}.project-portals button:hover:after,.project-portals button.active:after{transform:scaleX(1);background:#dff5ff99}.project-portals button i{width:5px;height:5px;border-radius:50%;background:#73859d;box-shadow:0 0 0 #dff7ff00}.project-portals button.lit i{background:#e2f7ff;box-shadow:0 0 18px 3px #bfe9ff99}
.light-trace{position:absolute;z-index:5;left:50%;bottom:34px;display:flex;gap:20px;transform:translateX(-50%);opacity:0;transition:opacity .2s ease-out}.light-trace:before{content:"";position:absolute;top:4px;left:4px;right:4px;height:1px;background:#91adc433}.light-trace i{position:relative;width:9px;height:9px;border:1px solid #7f91a8;border-radius:50%;background:#0b1324}.light-trace i.lit{background:#e4f8ff;border-color:#e4f8ff;box-shadow:0 0 14px #d7f4ff}
.hero-note{position:absolute;bottom:28px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;color:var(--muted)}.load-state{position:absolute;bottom:72px;right:var(--gutter);font-size:11px;color:var(--muted)}.ready .load-state{display:none}
.section{padding:clamp(78px,10vw,144px) var(--gutter)}h2{font:400 clamp(34px,4.4vw,64px)/1.25 var(--serif);letter-spacing:.01em;margin:0 0 30px;text-wrap:balance}.meta{font-size:10px;letter-spacing:.2em;color:var(--muted);margin:0 0 24px}.intro,.lab-intro,.contact-copy{font:15px/1.9 var(--serif);color:var(--muted);max-width:58ch}
.work{position:relative;z-index:4;background:linear-gradient(180deg,#0b1324,#0a111f 75%);border-top:1px solid var(--line)}
.section-title{display:block;max-width:720px;margin:0 0 72px}
.section-title h2{margin:0 0 18px}
.section-title .intro{margin:0;max-width:28em;font:16px/1.6 var(--serif);color:var(--muted)}
.project-index{border-top:1px solid var(--line)}
.project-row{width:100%;display:grid;grid-template-columns:minmax(220px,.42fr) minmax(320px,1.2fr) 40px;gap:32px;align-items:center;text-align:left;padding:36px 8px;background:transparent;border-bottom:1px solid var(--line);transition:background .2s ease-out,opacity .2s ease-out}
.project-row:hover{background:rgba(255,255,255,.02);opacity:1}
.project-meta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.project-no{font-size:12px;letter-spacing:.14em;color:#8b98ab}
.project-name{font:700 18px/1.35 var(--sans);letter-spacing:0;color:var(--text);transition:color .2s ease-out,text-shadow .2s ease-out}
.project-tag{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid #ffffff1f;border-radius:999px;font:12px/1.2 var(--sans);letter-spacing:.02em;color:var(--muted)}
.project-content{display:flex;flex-direction:column;gap:10px;min-width:0}
.project-headline{font:500 20px/1.4 var(--serif);color:#fff}
.project-overview{max-width:46ch;font:14px/1.6 var(--sans);color:var(--muted)}
.project-arrow{justify-self:end;font-size:18px;color:#7f8ea3;transition:color .2s ease-out,text-shadow .2s ease-out,transform .2s ease-out}
.project-row:hover .project-name,.project-row:hover .project-arrow,
.project-row:focus-visible .project-name,.project-row:focus-visible .project-arrow{color:var(--lamp);text-shadow:0 0 18px #f4dda659}
.project-row:hover .project-arrow,.project-row:focus-visible .project-arrow{transform:translate(2px,-2px)}
@media(max-width:1100px){.project-row{grid-template-columns:minmax(180px,.46fr) minmax(0,1fr) 32px;gap:20px}}
.about{display:grid;grid-template-columns:1fr 1fr;column-gap:10vw;background:#0a111f}.about>.meta{grid-column:1/-1}.about-body p{font:15px/2 var(--serif);color:var(--muted);margin:0 0 22px;max-width:52ch}.lab{border-top:1px solid var(--line);background:#09101d}.lab-intro{margin:-8px 0 60px}.experiment{display:grid;grid-template-columns:180px 1fr 1fr;align-items:baseline;gap:24px;padding:28px 0;border-top:1px solid var(--line)}.experiment span{font-size:10px;letter-spacing:.1em;color:var(--muted)}.experiment h3{font:400 20px/1.5 var(--serif);margin:0}.experiment p{font-size:13px;color:var(--muted);line-height:1.8;margin:0}
.ending-scene{position:relative;height:250svh;background:#070b19}
.ending-frame{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(circle at 58% 34%,#203b67 0%,#101d35 25%,#070b19 68%)}
#ending-world{position:absolute;inset:0;width:100%;height:100%;display:block}
.ending-dialog{position:absolute;z-index:5;left:var(--gutter);top:14%;width:min(540px,46vw);padding:0;background:transparent;border:0;box-shadow:none;opacity:0;transform:translateY(16px);transition:opacity .55s ease-out,transform .55s ease-out}
.ending-dialog.ready{opacity:1;transform:translateY(0)}
.ending-dialog h2{font-size:clamp(28px,3.2vw,46px);margin:0 0 16px}
.ending-poem{max-width:36em;margin:0 0 32px;font:16px/1.7 var(--serif);color:#bac7d8}
.plane-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;max-height:72px;padding:6px;border:1px solid #dcecff26;border-radius:16px;background:#07101fc7;overflow:hidden;transition:opacity .45s ease,transform .45s ease,max-height .45s ease,margin .45s ease,padding .45s ease,border-width .45s ease}
.plane-form input{min-width:0;height:46px;padding:0 14px;border:0;outline:0;background:transparent;color:#edf7ff;font:13px var(--serif)}
.plane-form input::placeholder{color:#8190a5}
.plane-trigger{position:static;z-index:4;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 17px;border-radius:12px;background:var(--lamp);color:#1b1a17;font-size:12px;letter-spacing:.06em;transition:box-shadow .2s ease-out,opacity .2s ease-out}
.plane-trigger:hover:not(:disabled){opacity:1;box-shadow:0 0 18px #ffe08266}
.plane-trigger:disabled{opacity:.34;cursor:default}
.plane-form.is-leaving{opacity:0;transform:translateY(8px);max-height:0;margin:0;padding:0;border-width:0;pointer-events:none}
.ending-thanks{max-width:32em;margin:0 0 22px;font:16px/1.7 var(--serif);color:#d7e2ef}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(100%,420px);padding:16px 18px;border:1px solid #ffffff14;border-radius:14px;background:#07101fb8}
.ending-email{color:#edf4ff;font:14px var(--sans);letter-spacing:.02em}
.copy-email{flex:none;min-height:36px;padding:0 14px;border:1px solid #ffffff24;border-radius:999px;background:transparent;font-size:11px;letter-spacing:.08em;color:var(--muted)}
.copy-email:hover,.copy-email.copied{opacity:1;color:var(--lamp);border-color:#f4dda766}
.ending-sent{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
.ending-sent.ready{opacity:1;transform:none}
.footer-line{display:flex;justify-content:space-between;gap:16px;margin-top:30px;border-top:1px solid var(--line);padding-top:18px;font-size:9px;color:var(--muted)}
dialog{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#09111f;color:var(--text);overflow:hidden}dialog::backdrop{background:#030712e8}.case-close{position:fixed;top:24px;right:32px;z-index:4;width:48px;height:48px;border-radius:50%;background:#142136;border:1px solid var(--line);font-size:27px}.case-layout{display:grid;grid-template-columns:minmax(360px,46vw) 1fr;height:100%}.case-visual{position:sticky;top:0;height:100svh;background:radial-gradient(circle at 50% 42%,#354d704f,#0c1628 58%,#080e1a);overflow:hidden}.case-visual canvas{width:100%;height:100%;display:block}.case-mark{position:absolute;inset:0;display:grid;place-items:center}.case-mark:before,.case-mark:after{content:"";position:absolute;width:min(34vw,390px);aspect-ratio:1;border:1px solid #b8d6e52c;transform:rotate(45deg)}.case-mark:after{width:min(22vw,250px)}.case-mark i{width:18px;height:18px;border-radius:50%;background:#e6f7ff;box-shadow:0 0 46px 18px #cdefff6e}.case-copy{padding:clamp(80px,9vw,140px) clamp(30px,6vw,90px);overflow:auto}.case-copy h2{font-size:clamp(34px,4.3vw,62px);margin-bottom:24px}.case-lede{font:17px/1.9 var(--serif);color:#c0ccda;max-width:48ch;margin:0 0 64px}.case-copy section{padding:30px 0;border-top:1px solid var(--line)}.case-copy section h3{margin:0 0 12px;font:400 20px/1.5 var(--serif)}.case-copy section p{margin:0;font:14px/1.9 var(--serif);color:var(--muted);max-width:58ch}.case-nav{display:flex;justify-content:space-between;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}.case-nav button{background:none;padding:12px 0;font-size:12px;letter-spacing:.12em;color:var(--muted)}dialog[data-project="popbite"] .case-mark{display:none}
#diagnostics{position:fixed;z-index:130;right:12px;bottom:12px;background:#060c18e8;color:#d4e9ee;border:1px solid #607895;padding:12px;font:11px/1.6 monospace;white-space:pre;pointer-events:none}[hidden]{display:none!important}

@media(max-width:767px){
  .site-header{height:74px;padding:0 18px}.mark{font-size:22px}.site-header nav{gap:13px}.site-header nav a{font-size:8px}.settings{position:absolute;right:14px;top:70px;gap:0}.settings button{font-size:9px}
  .stage{min-height:760px}.hero-copy{left:24px;right:24px;top:130px;width:auto}.role-tag{font-size:11px;margin-bottom:24px}.hero-name{font-size:54px;gap:12px;margin-bottom:28px}.hero-name .slogan-en{font-size:18px}.statement{font-size:15px;margin-bottom:28px}.cta-btn{padding:4px 0 9px}
  #world{top:43%;height:57%}.poster{top:43%;width:100%;right:0;height:57%}.hero-note{display:none}.portal-labels a{font-size:8px}.room-copy{left:24px;right:24px;top:112px}.room-copy h2{font-size:34px}.project-portals{display:none!important}.light-trace{bottom:22px}.load-state{bottom:18px}
  .section{padding:72px 24px}.section-title{margin-bottom:44px}.section-title h2{margin-bottom:14px}.section-title .intro{margin:0}.project-row{grid-template-columns:1fr 28px;gap:12px 16px;padding:28px 0;align-items:start}.project-meta,.project-content{grid-column:1}.project-arrow{grid-column:2;grid-row:1;margin-top:2px}.project-name{font-size:17px}.project-headline{font-size:18px}.project-overview{font-size:13px}
  .about{display:block}.about h2{font-size:38px}.experiment{grid-template-columns:1fr;gap:10px}.ending-scene{height:220svh}.ending-dialog{left:18px;right:18px;top:auto;bottom:6%;width:auto}.ending-dialog h2{font-size:30px}.ending-poem{font-size:15px;margin-bottom:22px}.plane-form{grid-template-columns:1fr;border-radius:14px}.plane-form input{height:44px}.plane-trigger{justify-content:space-between;width:100%;font-size:11px}.contact-card{width:100%;padding:14px 16px}.footer-line{flex-wrap:wrap;margin-top:28px}
  dialog{overflow:auto}.case-layout{display:block;height:auto}.case-visual{position:relative;height:38svh;min-height:270px}.case-copy{padding:52px 24px 70px;overflow:visible}.case-close{top:14px;right:14px;width:44px;height:44px}.case-lede{margin-bottom:40px}
}
@media(max-width:767px) and (max-height:700px){.stage{min-height:640px}.hero-copy{top:96px}.hero-name{font-size:44px;margin-bottom:18px}.hero-name .slogan-en{font-size:16px}.statement{font-size:14px;margin-bottom:22px}#world,.poster{top:48%;height:52%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.project-portals{display:none!important}}
.ending-dialog{pointer-events:none}.ending-dialog.ready{pointer-events:auto}
@media(max-width:767px){.ending-dialog{top:auto;bottom:5%}.ending-dialog h2{font-size:28px}.ending-poem{margin-bottom:18px}.plane-form input{height:42px}}
dialog:not([data-project="popbite"]) #project-model{display:none}