:root {
  --paper: #ede8df;
  --ink: #242b26;
  --night: #11151d;
  --sage: #4c614e;
  --light: #f3f0e9;
  --muted: #7a817b;
  --gutter: clamp(24px, 4vw, 72px);
  --sans: 'Manrope', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --serif: 'Songti SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  --mono: 'SFMono-Regular', Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, article:focus-visible { outline: 2px solid #81a36a; outline-offset: 6px; }
::selection { background: #b7c798; color: #192317; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 24px; z-index: 100; padding: 14px 20px; background: var(--paper); color: var(--ink); }
.skip-link:focus { top: 16px; }
.masthead { position: fixed; top: 0; left: 0; right: 0; height: 96px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; z-index: 30; color: var(--ink); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; }
.wordmark-symbol { display: grid; place-items: center; width: 39px; height: 43px; border: 1px solid currentColor; border-radius: 12px 3px 12px 3px; font: 27px var(--serif); }
.wordmark-copy { display: grid; gap: 6px; font-size: 14px; letter-spacing: .12em; }
.wordmark-copy > span { font: 8px var(--mono); letter-spacing: .13em; opacity: .6; }
.masthead nav { display: flex; align-items: center; gap: clamp(25px, 3.2vw, 52px); }
.nav-link { display: inline-flex; gap: 7px; align-items: center; min-height: 44px; opacity: .53; font-size: 12px; }
.nav-link > span { font: 9px var(--mono); }
.nav-link.is-active, .nav-link:hover { opacity: 1; }
.nav-work { font-size: 12px; border: 1px solid #a6ab9b; border-radius: 30px; padding: 12px 21px; }
.nav-work > span { padding-left: 19px; font-size: 16px; }
.masthead.is-dark { color: var(--light); }
.masthead.is-dark .nav-work { border-color: #535b5b; }
.scroll-story { position: relative; height: 820svh; }
.story-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate;
  --night-alpha: 0; --shade-alpha: 1; --opening-alpha: 1; --intro-alpha: 0; --experience-alpha: 0;
  --scene-x: var(--gutter); --scene-y: 18vh; --scene-width: calc(100vw - 2 * var(--gutter)); --scene-height: auto;
  --copy-x: 9vw; --copy-y: 30vh; --intro-x: 62vw; --intro-y: 28vh;
  --timeline-progress: 0; --intro-offset: 24px;
}
.stage-night { position: absolute; inset: 0; background: radial-gradient(ellipse at 33% 45%, #242336 0, #161a24 44%, var(--night) 80%); opacity: var(--night-alpha); }
.stage-orbit { position: absolute; border: 1px solid #d1cbbd; width: 64vw; height: 64vw; border-radius: 50%; left: -23vw; top: 21vh; opacity: calc(.27 * (1 - var(--night-alpha))); pointer-events: none; }
.corner-note { position: absolute; top: 112px; left: var(--gutter); display: flex; align-items: center; gap: 8px; font: 9px var(--mono); letter-spacing: .13em; color: #7d8278; }
.tiny-dot { width: 5px; height: 5px; border-radius: 50%; background: #829473; }
.scene { position: absolute; margin: 0; left: var(--scene-x); top: var(--scene-y); width: var(--scene-width); height: var(--scene-height); aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #d3c7b4; box-shadow: 0 28px 80px -46px rgba(19, 21, 18, .42); }
.scene-poster, #story-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
#story-canvas { opacity: 0; }
#story-canvas.is-ready { opacity: 1; }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(236, 228, 212, .95) 0%, rgba(236, 228, 212, .85) 22%, rgba(236, 228, 212, 0) 59%); opacity: var(--shade-alpha); pointer-events: none; }
.scene-caption { position: absolute; left: 24px; right: 24px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; color: #f6f3eb; text-shadow: 0 1px 10px #24241e; font: 8px var(--mono); letter-spacing: .2em; }
.caption-star { font-size: 23px; }
.opening-copy { position: absolute; left: var(--copy-x); top: var(--copy-y); opacity: var(--opening-alpha); width: 27%; }
.eyebrow { font: 9px/1.5 var(--mono); letter-spacing: .14em; margin: 0 0 26px; }
.opening-copy .eyebrow { font-size: 8px; color: #5b6257; }
h1 { margin: 0 0 23px; font-family: var(--serif); font-size: clamp(39px, 4.5vw, 72px); line-height: 1.2; font-weight: 500; letter-spacing: -.04em; }
.name-accent { color: #536448; }
.opening-description { font-size: 12px; color: #5a6155; line-height: 2; margin: 0 0 22px; }
.open-invitation { display: inline-flex; gap: 28px; align-items: center; padding: 8px 0; border-bottom: 1px solid #869078; font-size: 11px; }
.open-invitation span { font-size: 17px; }
.intro-copy { position: absolute; left: var(--intro-x); top: var(--intro-y); width: 30%; max-width: 470px; color: var(--light); opacity: var(--intro-alpha); transform: translateY(var(--intro-offset)); }
.intro-copy .eyebrow { color: #acc894; display: flex; gap: 9px; align-items: center; margin-bottom: 24px; }
.intro-dot { width: 5px; height: 5px; border-radius: 50%; background: #acc894; }
.intro-copy h2 { font-size: clamp(31px, 3.3vw, 53px); font-family: var(--serif); font-weight: 500; letter-spacing: -.05em; line-height: 1.32; margin: 0 0 24px; }
.intro-copy h2 span { color: #b6ce9c; }
.intro-lead { margin: 0 0 13px; font-size: 14px; line-height: 1.9; color: #ecece6; }
.intro-description { font-size: 12px; line-height: 2; color: #989ca6; max-width: 340px; margin: 0 0 21px; }
.intro-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.intro-tags span { border: 1px solid #39414a; border-radius: 3px; padding: 6px 10px; color: #b5b9bd; font-size: 10px; }
.intro-link { display: inline-flex; align-items: center; gap: 36px; padding: 12px 16px; border-radius: 3px; color: #20291c; background: #c0d4a5; font-size: 12px; }
.intro-link:hover { background: #d6e6c0; }
.intro-link span { font-size: 18px; }
.location { margin: 27px 0 0; display: flex; gap: 9px; align-items: center; color: #828a96; font: 9px var(--mono); letter-spacing: .04em; }
.location-line { width: 20px; height: 1px; background: #3e4752; }
.story-footer { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 27px; height: 37px; display: flex; align-items: center; justify-content: space-between; color: #797f72; }
.scroll-prompt { display: flex; align-items: center; gap: 11px; font-size: 10px; }
.scroll-mouse { display: inline-flex; width: 13px; height: 21px; border: 1px solid currentColor; border-radius: 9px; align-items: flex-start; justify-content: center; padding-top: 4px; }
.scroll-mouse i { width: 1px; height: 5px; background: currentColor; }
.chapter-controls { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 15px; }
.chapter-button { font: 10px var(--mono); padding: 16px 8px; opacity: .5; }
.chapter-button[aria-current] { opacity: 1; color: #3e5038; }
.chapter-line { width: 110px; height: 1px; background: #a7ad9b; }
.chapter-line span { height: 2px; background: #59714a; display: block; transform: scaleX(var(--timeline-progress)); transform-origin: left; }
.footer-word { font: 8px var(--mono); letter-spacing: .12em; display: flex; gap: 21px; align-items: center; }
.footer-word span { font-size: 17px; }
.story-stage.is-dark .story-footer, .story-stage.is-dark .corner-note { color: #9ba3af; }
.story-stage.is-dark .chapter-button[aria-current] { color: #c0d4a5; }
.story-stage.is-dark .chapter-line { background: #39414a; }
.story-stage.is-dark .chapter-line span { background: #bbd99a; }
.load-status { position: absolute; left: var(--gutter); bottom: 78px; padding: 9px 13px; border-radius: 3px; background: #1b2427e8; color: #eee; font-size: 11px; }
.load-status button { margin-left: 14px; color: #c0d4a5; border: 0; background: transparent; cursor: pointer; }
.next-chapter { min-height: 580px; padding: 140px var(--gutter) 30px; color: var(--ink); background: var(--paper); text-align: center; scroll-margin-top: 90px; }
.next-chapter .eyebrow { color: #82937b; margin-bottom: 26px; }
.next-chapter h2 { font: 500 clamp(27px, 3.3vw, 48px)/1.35 var(--serif); margin: 0 0 22px; }
.next-chapter > p:not(.eyebrow) { font-size: 12px; color: #969da4; margin-bottom: 30px; }
.work-link { display: inline-flex; align-items: center; gap: 45px; padding: 14px 22px; border: 1px solid #939d8c; border-radius: 3px; color: #405138; font-size: 12px; }
.work-link:hover { background: #d6ddcc; }
.work-link span { font-size: 18px; }
.replay-link { display: block; width: fit-content; margin: 20px auto 90px; padding: 9px; color: #929b90; font-size: 11px; }
.next-chapter footer { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid #2c323a; font-size: 10px; color: #929b90; }
.next-chapter .footer-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.next-chapter .beian { display: inline-flex; align-items: center; color: #929b90; }
.next-chapter .beian-icon { width: 14px; height: auto; margin-right: 5px; }
.noscript-note { padding: 20px; text-align: center; }
.experience-copy { position: absolute; left: var(--experience-x); top: var(--experience-y); width: 30%; max-width: 440px; opacity: var(--experience-alpha); transform: translateY(var(--experience-offset)); color: #263129; }
.experience-copy .eyebrow { color: #647a55; margin-bottom: 22px; }
.experience-copy h2 { font: 500 clamp(30px, 3vw, 48px)/1.38 var(--serif); margin: 0 0 22px; letter-spacing: -.04em; }
.experience-copy h2 span { color: #5b7149; }
.experience-lead { font-size: 12px; color: #687064; line-height: 1.9; margin: 0 0 20px; }
.experience-list { border-top: 1px solid #b8bdb1; margin-bottom: 20px; }
.experience-list > a { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #c7cabe; padding: 17px 0; }
.experience-list > a > span { font: 10px var(--mono); color: #737f65; }
.experience-list > a > span:last-child { margin-left: auto; font-size: 18px; }
.experience-list h3 { font-size: 16px; font-weight: 500; margin: 0 0 6px; }
.experience-list p { font-size: 10px; color: #6e7964; margin: 0; }
.experience-link { display: inline-flex; gap: 30px; font-size: 12px; border-bottom: 1px solid #8d987f; padding: 8px 0; }
.masthead.over-projects { background: #ede8dff2; border-bottom: 1px solid #dad7ce; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; width: min(960px, 100%); margin: 50px auto; text-align: left; }
.portfolio-card { appearance: none; display: block; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.project-art { position: relative; display: grid; place-items: center; aspect-ratio: 1.6; overflow: hidden; border-radius: 6px; }
.art-player { background: radial-gradient(ellipse at 65% 20%, #365c50, #1a2827 70%); color: #ccebc5; }
.art-web { background: radial-gradient(ellipse at 70% 10%, #b5c1b1, #d6d8ca 80%); color: #374c3b; }
.player-symbol { font: 100px var(--sans); transition: transform .25s; }
.web-symbol { font: 90px var(--serif); transition: transform .25s; }
.portfolio-card:hover .player-symbol, .portfolio-card:hover .web-symbol { transform: scale(1.08); }
.art-caption { position: absolute; left: 24px; bottom: 22px; font: 9px var(--mono); letter-spacing: .15em; }
.project-card-title { display: flex; justify-content: space-between; font-size: 21px; margin: 20px 0 8px; }
.project-card-description { font-size: 11px; color: #74806d; }
dialog { width: min(940px, calc(100vw - 40px)); height: min(820px, calc(100svh - 60px)); max-height: calc(100svh - 60px); border: 0; padding: 0; border-radius: 10px; color: var(--ink); background: #f2efe8; overflow: hidden; }
dialog::backdrop { background: #121a22c9; backdrop-filter: blur(6px); }
.dialog-toolbar { height: 66px; padding: 0 25px; border-bottom: 1px solid #d1d4c8; display: flex; align-items: center; justify-content: space-between; font: 10px var(--mono); letter-spacing: .15em; }
.dialog-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #e3e7da; font-size: 29px; cursor: pointer; color: #263429; }
.dialog-content { height: calc(100% - 66px); overflow-y: auto; overscroll-behavior: contain; padding: 28px clamp(22px, 5vw, 65px) 70px; }
.dialog-art { height: 280px; display: grid; place-items: center; border-radius: 5px; font: 85px var(--serif); margin-bottom: 45px; }
.dialog-content h2 { font: 500 46px var(--serif); margin: 0 0 23px; }
.dialog-content > p:not(.eyebrow) { color: #66705e; font-size: 15px; line-height: 2; }
.dialog-content dl { margin: 35px 0 42px; border-top: 1px solid #ced3c3; }
.dialog-content dl > div { display: grid; grid-template-columns: 110px 1fr; padding: 18px 0; border-bottom: 1px solid #ced3c3; font-size: 13px; }
.dialog-content dt { color: #7d886f; }
.dialog-content dd { margin: 0; }
@media (min-width: 801px) and (max-height: 730px) {
  .masthead { height: 74px; }
  .corner-note { top: 85px; }
  .intro-copy .eyebrow { margin-bottom: 14px; }
  .intro-copy h2 { font-size: 36px; margin-bottom: 15px; }
  .intro-lead { font-size: 12px; }
  .intro-description { font-size: 11px; margin-bottom: 12px; }
  .intro-tags { margin-bottom: 15px; }
  .location { margin-top: 18px; }
  .opening-copy .eyebrow { margin-bottom: 15px; }
  h1 { font-size: 47px; margin-bottom: 14px; }
  .opening-description { margin-bottom: 10px; }
}
@media (max-width: 800px) {
  :root { --gutter: 22px; }
  .masthead { height: 78px; }
  .wordmark-symbol { width: 33px; height: 37px; font-size: 23px; }
  .wordmark-copy { font-size: 12px; }
  .wordmark-copy > span { font-size: 6px; letter-spacing: .03em; }
  .wordmark { gap: 9px; }
  .masthead nav { gap: 20px; }
  .nav-link { font-size: 11px; }
  .nav-link > span { display: none; }
  .nav-work { display: none; }
  .scroll-story { height: 760svh; }
  .corner-note { top: 90px; font-size: 8px; }
  .scene { border-radius: 4px; }
  .scene-shade { display: none; }
  .scene-caption { left: 12px; right: 12px; bottom: 9px; font-size: 6px; }
  .caption-star { font-size: 15px; }
  .opening-copy { width: calc(100% - 44px); }
  .masthead nav { gap: 14px; }
  .experience-copy { width: calc(100% - 44px); max-width: none; }
  .experience-copy .eyebrow { font-size: 8px; margin-bottom: 12px; }
  .experience-copy h2 { font-size: 29px; margin-bottom: 13px; }
  .experience-copy h2 br { display: none; }
  .experience-lead { font-size: 11px; margin-bottom: 14px; }
  .experience-lead br { display: none; }
  .experience-list { margin-bottom: 12px; }
  .experience-list > a { padding: 12px 0; }
  .experience-list h3 { font-size: 15px; }
  .experience-link { font-size: 11px; }
  .opening-copy .eyebrow { font-size: 8px; margin-bottom: 17px; }
  h1 { font-size: clamp(38px, 10.3vw, 58px); line-height: 1.22; margin-bottom: 14px; }
  h1 br { display: none; }
  .opening-description { font-size: 12px; line-height: 1.9; margin-bottom: 16px; }
  .open-invitation { font-size: 11px; }
  .intro-copy { width: calc(100% - 44px); max-width: none; transform: translateY(var(--intro-offset)); }
  .intro-copy .eyebrow { font-size: 8px; margin-bottom: 14px; }
  .intro-copy h2 { font-size: clamp(26px, 7.1vw, 38px); margin-bottom: 16px; line-height: 1.3; }
  .intro-copy h2 br { display: none; }
  .intro-lead { font-size: 12px; line-height: 1.8; margin-bottom: 8px; }
  .desktop-break { display: none; }
  .intro-description { font-size: 11px; line-height: 1.9; margin-bottom: 16px; max-width: 480px; }
  .intro-tags { gap: 6px; margin-bottom: 18px; }
  .intro-tags span { padding: 5px 8px; font-size: 9px; }
  .intro-link { font-size: 11px; padding: 9px 14px; }
  .location { font-size: 8px; margin-top: 19px; }
  .story-footer { bottom: 19px; }
  .scroll-prompt { font-size: 9px; gap: 8px; }
  .chapter-controls { position: static; transform: none; gap: 4px; }
  .chapter-line { width: 52px; }
  .footer-word { display: none; }
  .next-chapter { min-height: 480px; padding-top: 105px; }
  .next-chapter h2 { font-size: 28px; }
  .next-chapter footer { flex-direction: column; align-items: center; gap: 14px; }
  .next-chapter .footer-meta { justify-content: center; }
  .portfolio-grid { gap: 18px; }
  .player-symbol, .web-symbol { font-size: 55px; }
  .art-caption { font-size: 6px; left: 12px; bottom: 12px; }
  .project-card-title { font-size: 18px; }
  dialog { width: calc(100vw - 22px); height: calc(100svh - 30px); max-height: calc(100svh - 30px); }
  .dialog-art { height: 200px; }
}
@media (max-width: 800px) and (max-height: 760px) {
  .experience-copy h2 { font-size: 26px; margin-bottom: 10px; }
  .experience-lead { display: none; }
  .experience-list > a { padding: 10px 0; }
  .intro-copy .eyebrow { margin-bottom: 9px; }
  .intro-copy h2 { font-size: 26px; margin-bottom: 10px; }
  .intro-description { margin-bottom: 10px; }
  .intro-tags { margin-bottom: 12px; }
  .location { display: none; }
}
@media (max-height: 560px) {
  .intro-tags, .location, .intro-description { display: none; }
  .opening-description { margin-bottom: 0; }
}
@media (min-width: 801px) and (max-height: 560px) {
  .opening-copy .eyebrow, .opening-description { display: none; }
  h1 { font-size: 32px; margin-bottom: 8px; }
  .intro-copy .eyebrow { font-size: 8px; margin-bottom: 10px; }
  .intro-copy h2 { font-size: 27px; margin-bottom: 10px; }
  .intro-lead { font-size: 11px; margin-bottom: 8px; }
  .intro-link { padding: 9px 12px; }
}
@media (max-width: 800px) and (max-height: 620px) {
  .intro-tags { display: none; }
  .intro-copy h2 { font-size: 23px; }
  .opening-copy .eyebrow { margin-bottom: 10px; }
  .experience-copy h2 { font-size: 24px; margin-bottom: 8px; }
  .experience-lead { display: none; }
  .experience-list > a { padding: 9px 0; }
  .experience-list { margin-bottom: 7px; }
}
@media (min-width: 801px) and (max-height: 730px) {
  .experience-copy h2 { font-size: 31px; margin-bottom: 13px; }
  .experience-copy .eyebrow { margin-bottom: 12px; }
  .experience-lead { margin-bottom: 12px; font-size: 11px; }
  .experience-list > a { padding: 11px 0; }
}
@media (min-width: 801px) and (max-height: 560px) {
  .experience-copy h2 { font-size: 23px; margin-bottom: 8px; }
  .experience-copy h2 br, .experience-lead, .experience-copy .eyebrow { display: none; }
  .experience-list > a { padding: 9px 0; }
  .experience-list { margin-bottom: 7px; }
  .experience-list h3 { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-copy, .experience-copy { transform: none; }
  * { transition-duration: 0s !important; }
}