@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/space-grotesk.woff2') format('woff2'); }
:root {
  color-scheme: dark;
  --bg: #070b18;
  --heading: #d5dbe5;
  --text: #9ba6b5;
  --accent: #38f9d7;
  --line: rgba(157, 181, 206, .16);
  --name-gradient: linear-gradient(90deg, #38f9d7, #60a5fa, #38f9d7);
  --content-width: 1120px;
  --font-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "Space Grotesk", var(--font-cn);
  --size-name: 80px;
  --size-section: 36px;
  --size-title: 20px;
  --size-body: 18px;
  --size-support: 16px;
  --size-meta: 14px;
  font-family: var(--font-display);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); isolation: isolate; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 3px; }
::selection { background: #24525c; color: #f2f5fa; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 20; top: 16px; left: 16px; padding: 12px 18px; background: var(--bg); color: var(--heading); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.section-nav { position: fixed; z-index: 10; left: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; }
.section-nav a { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.nav-dot { width: 5px; height: 5px; border-radius: 50%; background: #52617a; transition: background .2s, transform .2s; }
.section-nav a[aria-current] .nav-dot { background: var(--accent); transform: scale(1.5); }
.nav-label { position: absolute; left: 43px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; background: #0b1220; color: var(--heading); font-size: var(--size-meta); white-space: nowrap; opacity: 0; visibility: hidden; transform: translateX(-3px); transition: opacity .18s, transform .18s, visibility .18s; pointer-events: none; }
.section-nav a:hover .nav-label, .section-nav a:focus-visible .nav-label { opacity: 1; visibility: visible; transform: translateX(0); }
.hero { position: relative; min-height: max(100svh,640px); height: 100svh; display: flex; align-items: center; padding: 0 9% 10svh; isolation: isolate; overflow: hidden; }
.space { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); pointer-events: none; }
.galaxy, .galaxy-dust { position: absolute; inset: -7%; background: url('../images/galaxy.jpg') center / cover no-repeat; animation: galaxy-flow 110s linear infinite; animation-play-state: paused; opacity: .45; filter: brightness(.8) saturate(.6) blur(1.1px); }
.galaxy-dust { opacity: .17; transform: scale(1.07); animation-name: dust-flow; animation-duration: 65s; mask-image: linear-gradient(125deg, transparent 35%, #000 72%, transparent); }
.space::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 12% 55%, rgba(35,13,65,.24), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(10,40,60,.18), transparent 50%), linear-gradient(90deg, rgba(7,11,24,.42), rgba(7,11,24,.12) 70%); }
.space[data-animate="true"] .galaxy, .space[data-animate="true"] .galaxy-dust { animation-play-state: running; }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
@keyframes galaxy-flow {
  0%, 100% { transform: translate3d(-2.2%, 1.4%, 0); }
  33% { transform: translate3d(2.2%, -1.2%, 0); }
  66% { transform: translate3d(.1%, -2%, 0); }
}
@keyframes dust-flow {
  0%, 100% { transform: translate3d(1.6%, -1.2%, 0) scale(1.07); }
  50% { transform: translate3d(-1.6%, 1.2%, 0) scale(1.07); }
}
.hero-copy { position: relative; z-index: 2; max-width: min(700px,42vw); pointer-events: none; }
h1 { font-size: var(--size-name); font-weight: 600; line-height: 1.1; letter-spacing: -1px; color: #60d8d4; animation: title-sheen 4s linear infinite; animation-play-state: paused; }
.identity { color: #d5dbe5; font-size: var(--size-section); font-weight: 500; letter-spacing: 1px; margin-top: 24px; line-height: 1.4; }
.identity span { white-space: nowrap; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 { background: var(--name-gradient); background-size: 300% auto; }
  h1 { background-clip: text; -webkit-background-clip: text; color: transparent; width: fit-content; }
}
.intro { color: var(--heading); margin-top: 24px; font-size: var(--size-body); line-height: 1.9; letter-spacing: 1px; max-width: 38em; }
.earth { position: absolute; z-index: -1; width: min(52vw,800px); aspect-ratio: 1; right: -4%; top: 50%; transform: translateY(-50%); opacity: .55; border-radius: 50%; background: #080f1b; overflow: hidden; border: 1px solid rgba(104, 165, 196, .38); box-shadow: inset 8px 5px 16px rgba(73, 137, 172, .13); mask-image: linear-gradient(90deg, #000 30%, rgba(0,0,0,.4) 75%, transparent 100%); }
.earth-surface { position: absolute; inset: 0; border-radius: inherit; background-image: url('../images/earth-dots.svg'); background-size: 200% 100%; background-repeat: repeat-x; background-position: 77% 50%; animation: earth-turn 120s linear infinite; animation-play-state: paused; opacity: .6; }
.earth::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 36% 32%, transparent 8%, rgba(7,11,24,.15) 43%, rgba(7,11,24,.72) 78%, rgba(7,11,24,.95) 100%), linear-gradient(110deg, rgba(7,11,24,.08) 30%, rgba(7,11,24,.76) 100%); box-shadow: inset 2px 1px 9px rgba(128,190,221,.25); }
.hero[data-animate="true"] .earth-surface { animation-play-state: running; }
@keyframes earth-turn { from { background-position: 77% 50%; } to { background-position: -123% 50%; } }
.scroll-cue { position: absolute; left: 9%; bottom: 21%; display: flex; align-items: flex-start; flex-direction: column; gap: 18px; font-size: var(--size-support); letter-spacing: 1px; line-height: 1.7; padding-block: 8px; }
.scroll-cue svg { color: var(--accent); animation: scroll-breathe 2s ease-in-out infinite; animation-play-state: paused; }
.scroll-cue:hover { color: var(--heading); }
.section { position: relative; width: 100%; min-height: 100svh; padding: 18svh 24px 60px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; scroll-margin-top: 0; }
.section-heading { text-align: center; }
h2 { font-family: var(--font-cn); font-size: var(--size-section); font-weight: 500; letter-spacing: 2px; line-height: 1.4; color: rgba(56,249,215,.72); margin-bottom: 52px; }
h3 { font-size: var(--size-title); font-weight: 600; color: var(--heading); }
.about-copy { width: 100%; max-width: 900px; margin: 40px auto auto; }
.experience { position: relative; list-style: none; width: 100%; max-width: 700px; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.experience::before { content: ''; position: absolute; top: 34px; left: 16.667%; right: 16.667%; height: 1px; background: linear-gradient(90deg, rgba(56,249,215,.35), rgba(67,233,123,.15)); }
.experience::after { content: ''; position: absolute; top: 33px; left: 16.667%; width: 30px; height: 3px; background: linear-gradient(90deg, transparent, rgba(56,249,215,.7), #fff); box-shadow: 0 0 8px rgba(56,249,215,.4); opacity: 0; }
.experience li { position: relative; min-width: 0; }
.experience.is-visible li { animation: node-arrive .5s cubic-bezier(.34,1.4,.64,1) both; animation-play-state: paused; }
.experience.is-visible li:nth-child(2) { animation-delay: .5s; }
.experience.is-visible li:nth-child(3) { animation-delay: 1s; }
.stage-year { display: block; font-family: var(--font-display); font-size: var(--size-meta); font-weight: 600; color: rgba(56,249,215,.65); letter-spacing: 2px; line-height: 18px; margin-bottom: 12px; }
.stage-dot { display: block; width: 8px; height: 8px; border-radius: 50%; margin: 0 auto 12px; background: rgba(56,249,215,.8); box-shadow: 0 0 6px rgba(56,249,215,.4), 0 0 16px rgba(56,249,215,.15); }
.experience h3 { font-size: var(--size-support); font-weight: 600; letter-spacing: 1px; color: rgba(240,245,255,.85); line-height: 1.6; }
.about-keywords { display: flex; justify-content: center; gap: 80px; width: 100%; margin-top: 60px; }
.about-keywords > div { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.keyword { font-family: var(--font-display); font-size: var(--size-section); font-weight: 600; line-height: 1; color: var(--accent); background: var(--name-gradient); background-size: 300% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: title-sheen 4s linear infinite; animation-play-state: paused; }
.about-keywords > div > span:last-child { font-size: var(--size-support); letter-spacing: 1px; color: rgba(240,245,255,.85); }
.principle { max-width: 640px; margin: 80px auto 0; text-align: center; }
.about-quote { font-size: var(--size-title); font-weight: 400; line-height: 1.8; letter-spacing: 2px; color: rgba(56,249,215,.6); }
.about-note { font-size: var(--size-support); line-height: 1.9; letter-spacing: .5px; color: var(--text); margin-top: 18px; }
.explore-content { width: 100%; }
.constellation { position: relative; width: 100%; max-width: 640px; aspect-ratio: 5 / 3; margin: 130px auto 160px; }
.constellation-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.constellation-lines path { stroke: rgba(56,249,215,.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.constellation-lines .constellation-trace { stroke: rgba(56,249,215,.85); stroke-dasharray: 65 935; stroke-width: 1.5; animation: constellation-sweep 9s linear infinite; animation-play-state: paused; }
.exploration-node { position: absolute; width: 0; height: 0; }
.constellation.is-visible .exploration-node { animation: star-arrive .65s ease-out both; animation-play-state: paused; }
.constellation.is-visible .exploration-node:nth-of-type(2) { animation-delay: .7s; }
.constellation.is-visible .exploration-node:nth-of-type(3) { animation-delay: 1.4s; }
.constellation.is-visible .exploration-node:nth-of-type(4) { animation-delay: 2.1s; }
.constellation.is-visible .exploration-node:nth-of-type(5) { animation-delay: 2.8s; }
.constellation.is-visible .exploration-node:nth-of-type(6) { animation-delay: 3.5s; }
.exploration-node:nth-of-type(1) { left: 50%; top: 6%; }
.exploration-node:nth-of-type(2) { left: 84%; top: 27%; }
.exploration-node:nth-of-type(3) { left: 84%; top: 73%; }
.exploration-node:nth-of-type(4) { left: 50%; top: 94%; }
.exploration-node:nth-of-type(5) { left: 16%; top: 73%; }
.exploration-node:nth-of-type(6) { left: 16%; top: 27%; }
.node-star { display: block; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #e8f4f5; box-shadow: 0 0 5px #fff, 0 0 18px rgba(56,249,215,.6); animation: node-breathe 4s ease-in-out infinite; animation-play-state: paused; }
.exploration-node:nth-of-type(2n) .node-star { animation-delay: -1.4s; }
.exploration-node:nth-of-type(3n) .node-star { animation-delay: -.7s; }
.node-star::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(56,249,215,.4); animation: node-ring 4s ease-out infinite; animation-delay: inherit; animation-play-state: paused; }
.node-info { position: absolute; left: 28px; top: -14px; width: 260px; }
.exploration-node:nth-of-type(1) .node-info, .exploration-node:nth-of-type(4) .node-info { left: 0; transform: translateX(-50%); text-align: center; width: 360px; }
.exploration-node:nth-of-type(1) .node-info { top: auto; bottom: 28px; }
.exploration-node:nth-of-type(4) .node-info { top: 28px; }
.exploration-node:nth-of-type(5) .node-info, .exploration-node:nth-of-type(6) .node-info { transform: translateX(-100%); text-align: right; left: -28px; }
.node-info h3 { font-size: var(--size-title); font-weight: 500; letter-spacing: 1px; color: var(--heading); margin-bottom: 10px; line-height: 1.4; }
.node-info p { font-size: var(--size-body); line-height: 1.7; color: var(--heading); text-wrap: pretty; }
.exploration-node:hover h3 { color: #fff; }
.works .section-heading h2 { margin-bottom: 118px; }
.works-content { width: 100%; max-width: 1400px; }
.projects { display: flex; justify-content: center; align-items: stretch; gap: 24px; perspective: 1200px; }
.project { --card-rgb: 96,165,250; --surface-rgb: 16,42,76; position: relative; display: flex; flex-direction: column; width: 320px; flex-shrink: 0; padding: 28px; border: 1px solid rgba(var(--card-rgb),.25); border-radius: 16px; background: linear-gradient(90deg,transparent,rgba(var(--card-rgb),.2),transparent) top / 100% 2px no-repeat, rgba(var(--surface-rgb),.3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; animation: card-float 5s ease-in-out infinite; animation-play-state: paused; transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s, filter .45s, scale .45s, background-color .35s, box-shadow .35s; }
.project-oneai { --card-rgb: 56,249,215; --surface-rgb: 12,54,40; animation-delay: -.8s; animation-duration: 4.5s; }
.project::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg,transparent 40%,rgba(var(--card-rgb),.1) 45%,rgba(255,255,255,.12) 50%,rgba(var(--card-rgb),.1) 55%,transparent 60%); background-size: 250% 100%; background-position: 200% 0; pointer-events: none; }
.project h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--size-title); font-weight: 600; color: rgba(240,245,255,.85); margin-bottom: 14px; line-height: 1.4; }
.project h3::before { content: ''; width: 4px; height: 4px; flex-shrink: 0; border-radius: 50%; background: rgb(var(--card-rgb)); }
.project p { font-size: var(--size-body); line-height: 1.7; color: var(--heading); }
.project-status { display: block; margin-top: 12px; font-size: var(--size-meta); letter-spacing: .5px; color: var(--text); }
.project-link { display: block; margin-top: auto; padding-top: 14px; font-size: var(--size-support); font-weight: 600; letter-spacing: 1px; color: rgba(var(--card-rgb),.8); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.project:hover, .project:focus-visible { transform: translateY(-18%) translateZ(40px) scale(1.08) rotate(-2deg); z-index: 2; border-color: rgba(var(--card-rgb),.4); background-color: rgba(var(--surface-rgb),.65); box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 25px rgba(var(--card-rgb),.12); }
.project-oneai:hover, .project-oneai:focus-visible { transform: translateY(-18%) translateZ(40px) scale(1.08) rotate(2deg); }
.project:hover::before, .project:focus-visible::before { animation: card-sweep .6s ease-out both; animation-play-state: paused; }
.project:hover .project-link, .project:focus-visible .project-link { opacity: 1; transform: translateY(0); }
@supports selector(:has(*)) { .projects:has(.project:hover, .project:focus-visible) .project:not(:hover):not(:focus-visible) { opacity: .45; scale: .96; filter: brightness(.7); animation-play-state: paused; } }
.contact { padding-top: 25svh; padding-bottom: 40px; }
.contact-content { display: flex; justify-content: center; align-items: flex-start; gap: 48px; margin-top: 48px; }
.contact-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text); animation: contact-float 4s ease-in-out infinite; animation-play-state: paused; transition: color .3s, transform .3s; }
.contact-link:nth-child(2) { animation-delay: -.6s; animation-duration: 4.5s; }
.contact-content > .contact-link:nth-child(3) { animation-delay: -1.2s; animation-duration: 3.8s; }
.contact-content > .contact-link:nth-child(4) { animation-delay: -1.8s; animation-duration: 4.2s; }
.wechat-contact { position: relative; }
.wechat-contact.is-open { z-index: 20; }
.wechat-contact.is-open .contact-link { animation-play-state: paused; }
.qr-popover { position: absolute; z-index: 30; bottom: calc(100% - 2px); left: 50%; transform: translateX(-50%); width: 260px; padding: 20px 16px 14px; border: 1px solid rgba(56,249,215,.24); border-radius: 14px; background: #101624; box-shadow: 0 16px 50px rgba(0,0,0,.5); text-align: center; }
.qr-popover[hidden] { display: none; }
.qr-title { font-size: var(--size-support); color: var(--heading); margin: 0 18px 14px; line-height: 1.6; }
.qr-popover img { display: block; width: 100%; height: auto; background: #fff; }
.qr-caption { margin-top: 12px; font-size: var(--size-meta); color: var(--text); }
.qr-original { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--size-meta); color: var(--accent); }
.qr-close { position: absolute; right: 0; top: 0; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--text); font-size: var(--size-title); cursor: pointer; }
.qr-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 4px; }
.contact-icon { position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(56,249,215,.14); background: rgba(56,249,215,.035); transition: border-color .3s, background .3s, box-shadow .3s; }
.contact-icon svg { opacity: .75; }
.contact-icon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid transparent; }
.contact-label { font-size: var(--size-support); letter-spacing: 1px; }
.contact-detail { font-family: var(--font-display); font-size: var(--size-meta); letter-spacing: .2px; color: var(--text); }
.contact-link:hover, .contact-link:focus-visible { color: var(--accent); transform: translateY(-4px); }
.contact-link:hover .contact-icon, .contact-link:focus-visible .contact-icon { border-color: rgba(56,249,215,.35); background: rgba(56,249,215,.06); box-shadow: 0 0 20px rgba(56,249,215,.15); }
.contact-link:hover .contact-icon::after, .contact-link:focus-visible .contact-icon::after { animation: icon-ripple 1.5s ease-out infinite; animation-play-state: paused; }
footer { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; padding: 90px 0 0; font-size: var(--size-meta); letter-spacing: 1px; color: rgba(56,249,215,.55); }
footer > span:first-child { font-family: var(--font-display); }
.scene-content.is-visible { animation: scene-arrive .8s cubic-bezier(.16,1,.3,1) both; animation-play-state: paused; }
.experience.is-visible::after { animation: timeline-sweep 1.5s ease-out both; animation-play-state: paused; }
html[data-motion="on"] h1, html[data-motion="on"] .scroll-cue svg, html[data-motion="on"] .keyword,
html[data-motion="on"] .scene-content.is-visible, html[data-motion="on"] .experience.is-visible::after,
html[data-motion="on"] .experience.is-visible li, html[data-motion="on"] .constellation.is-visible .exploration-node,
html[data-motion="on"] .constellation.is-visible .constellation-trace, html[data-motion="on"] .node-star, html[data-motion="on"] .node-star::after,
html[data-motion="on"] .project, html[data-motion="on"] .contact-link,
html[data-motion="on"] .project:hover::before, html[data-motion="on"] .project:focus-visible::before,
html[data-motion="on"] .contact-link:hover .contact-icon::after, html[data-motion="on"] .contact-link:focus-visible .contact-icon::after { animation-play-state: running; }
@keyframes title-sheen { to { background-position: 300% center; } }
@keyframes scroll-breathe { 50% { transform: translateY(8px); opacity: .65; } }
@keyframes scene-arrive { from { opacity: .6; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }
@keyframes timeline-sweep { 0% { opacity: 0; left: 16.667%; } 10%,85% { opacity: 1; } 100% { opacity: 0; left: calc(83.333% - 30px); } }
@keyframes constellation-sweep { to { stroke-dashoffset: -1000; } }
@keyframes node-breathe { 0%,100% { opacity: .65; scale: .9; } 40% { opacity: 1; scale: 1.25; } 70% { opacity: .75; scale: 1; } }
@keyframes node-ring { 0% { opacity: .65; scale: .6; } 75%,100% { opacity: 0; scale: 1.7; } }
@keyframes node-arrive { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes star-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-float { 50% { translate: 0 -14px; } }
@keyframes contact-float { 50% { translate: 0 -8px; } }
@keyframes card-sweep { from { background-position: 200% 0; } to { background-position: -50% 0; } }
@keyframes icon-ripple { from { inset: 0; border-color: rgba(56,249,215,.3); opacity: 1; } to { inset: -14px; border-color: transparent; opacity: 0; } }
@media (max-width: 1100px) and (min-width: 768px) {
  .constellation { max-width: 800px; aspect-ratio: auto; margin: 0 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
  .constellation-lines { display: none; }
  .exploration-node { position: static; width: auto; height: auto; display: flex; gap: 20px; padding: 20px; }
  .node-star { position: relative; left: auto; top: auto; flex-shrink: 0; margin-top: 10px; }
  .constellation .exploration-node .node-info { position: static; width: auto; transform: none; text-align: left; }
}
@media (max-width: 1023px) { .earth { display: none; } .hero-copy { max-width: 100%; } }
@media (max-width: 900px) { .section-nav { display: none; } }
@media (max-height: 820px) and (min-width: 768px) {
  .qr-popover { position: fixed; top: 50%; bottom: auto; left: 50%; transform: translate(-50%,-50%); max-height: calc(100svh - 40px); overflow-y: auto; }
}
@media (max-width: 767px) {
  :root { --size-name: 48px; --size-section: 28px; --size-title: 18px; --size-body: 16px; --size-support: 14px; --size-meta: 12px; }
  .hero { padding: 0 8% 10svh; }
  .hero-copy { max-width: 100%; }
  .identity { letter-spacing: 1px; }
  .intro { max-width: 24em; }
  .intro span { display: block; }
  .scroll-cue { left: 8%; bottom: 18%; }
  .galaxy, .galaxy-dust { background-position: 60% center; }
  .section { min-height: auto; padding: 12svh 24px 80px; }
  .about-copy { margin-top: 0; }
  .experience { display: flex; flex-direction: column; align-items: center; gap: 40px; }
  .experience::before { top: 28px; bottom: 22px; left: 50%; width: 1px; right: auto; height: auto; }
  .experience::after { display: none; }
  .experience li { padding: 9px 24px; min-width: 160px; background: rgba(7,11,24,.88); border-radius: 12px; }
  .about-keywords { flex-direction: column; gap: 36px; margin-top: 48px; }
  .principle { margin-top: 48px; }
  .constellation { margin: 0 auto; aspect-ratio: auto; display: flex; flex-direction: column; gap: 12px; }
  .constellation-lines { display: none; }
  .exploration-node { position: static; width: auto; height: auto; transform: none; display: flex; gap: 14px; padding: 16px 18px; border-radius: 12px; background: rgba(56,249,215,.02); border: 1px solid rgba(56,249,215,.06); }
  .constellation.is-visible .exploration-node { animation-delay: 0s; }
  .node-star { position: relative; left: auto; top: auto; width: 8px; height: 8px; flex-shrink: 0; margin: 8px 0 0; }
  .node-star::after { inset: -5px; }
  .constellation .exploration-node .node-info { position: static; width: auto; margin-left: 0; transform: none; text-align: left; }
  .node-info h3 { margin-bottom: 10px; }
  .works .section-heading h2 { margin-bottom: 52px; }
  .projects { flex-direction: column; gap: 16px; align-items: stretch; perspective: none; }
  .project { width: 100%; padding: 24px 20px; animation: none; }
  .project:hover, .project:focus-visible, .project-oneai:hover, .project-oneai:focus-visible { transform: none; }
  .project::before { display: none; }
  .project-link { opacity: 1; transform: none; }
  .projects:has(.project:hover, .project:focus-visible) .project:not(:hover):not(:focus-visible) { opacity: 1; scale: 1; filter: none; }
  .contact { min-height: 100svh; padding-top: 12svh; }
  .contact-content { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 16px; width: 100%; max-width: 320px; margin-top: 0; }
  .contact-icon { width: 48px; height: 48px; }
  .contact-icon svg { width: 22px; height: 22px; }
  .wechat-contact { display: flex; justify-content: center; }
  .qr-popover { position: fixed; bottom: auto; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(300px,calc(100vw - 40px)); max-height: calc(100svh - 40px); overflow-y: auto; padding: 22px 18px 12px; }
  footer { padding-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  h1, .scroll-cue svg, .keyword, .scene-content.is-visible, .experience.is-visible::after,
  .experience.is-visible li, .constellation.is-visible .exploration-node,
  .constellation-lines .constellation-trace, .node-star, .node-star::after, .project, .contact-link,
  .project:hover::before, .project:focus-visible::before,
  .contact-link:hover .contact-icon::after, .contact-link:focus-visible .contact-icon::after,
  .hero .earth-surface, .space .galaxy, .space .galaxy-dust { animation: none; }
  .project:hover, .project:focus-visible, .project-oneai:hover, .project-oneai:focus-visible { transform: none; }
  .projects:has(.project:hover, .project:focus-visible) .project:not(:hover):not(:focus-visible) { opacity: 1; scale: 1; filter: none; }
}