@font-face {
  font-family: "Alimama ShuHei Local";
  src: url("assets/fonts/AlimamaShuHeiTi-Bold.otf") format("opentype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #080808;
  --bg-soft: #111111;
  --panel: #181818;
  --paper: #f1f0ec;
  --text: #f7f7f4;
  --muted: #9b9b94;
  --gold: #b8ff32;
  --gold-dark: #00aaff;
  --neon-a: #c8ff38;
  --neon-b: #20f5b3;
  --neon-c: #00a8ff;
  --neon-gradient: linear-gradient(105deg, var(--neon-a), var(--neon-b), var(--neon-c), var(--neon-b), var(--neon-a));
  --coral: #f15c44;
  --mint: #9bd8bb;
  --blue: #6c82ff;
  --line: rgba(255, 255, 255, .11);
  --page: min(92vw, 1320px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font-wujie: "BiaoxiaoZhi Wujiehei", "标小智无界黑", "Arial Black", Impact, sans-serif;
  --font-shuhei: "Alimama ShuHei Local", "Alimama ShuHeiTi", "阿里妈妈数黑体", "Alibaba PuHuiTi", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
html, body, body *, body *::before, body *::after { cursor: url("assets/cursor-56.png") 5 4, auto !important; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { max-width: 100%; display: block; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: var(--gold); color: #080808; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #080808; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 0; }

.grain { position: fixed; inset: -50%; z-index: 150; pointer-events: none; opacity: .035; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation: grain .22s steps(2) infinite; }
@keyframes grain { 0% { transform: translate(0); } 25% { transform: translate(3%, -2%); } 50% { transform: translate(-2%, 3%); } 75% { transform: translate(1%, 4%); } 100% { transform: translate(-3%, -1%); } }

.site-header { position: fixed; z-index: 100; top: 18px; left: 50%; width: min(94vw, 1320px); min-height: 62px; padding: 8px 11px 8px 10px; display: flex; align-items: center; justify-content: space-between; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.13); border-radius: 30px; background: rgba(18,18,18,.28); backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.19), inset 0 -1px 0 rgba(255,255,255,.035), 0 10px 35px rgba(0,0,0,.12); transition: background .45s, border-color .45s, box-shadow .45s, backdrop-filter .45s; }
.site-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.11), transparent 28%, transparent 70%, rgba(210,170,79,.07)); opacity: .65; }
.site-header::after { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; pointer-events: none; background: rgba(255,255,255,.48); filter: blur(.4px); }
.site-header.scrolled { background: rgba(13,13,13,.66); border-color: rgba(255,255,255,.17); backdrop-filter: blur(28px) saturate(185%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 18px 65px rgba(0,0,0,.38); }
.site-header > * { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 11px; font-size: .75rem; font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 44px; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.24), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px rgba(0,0,0,.3); }
.brand-mark img { width: 104%; height: 104%; object-fit: contain; transform: translateY(2px) scale(1.03); }
.brand-name { letter-spacing: .12em; }
.primary-nav { display: flex; align-items: center; gap: 30px; font-size: .78rem; }
.primary-nav > a:not(.resume-link) { position: relative; color: #d4d4d0; transition: color .25s; }
.primary-nav > a:not(.resume-link)::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.primary-nav > a:hover { color: var(--gold); }
.primary-nav > a:hover::after { transform: scaleX(1); transform-origin: left; }
.resume-link, .button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 42px; padding: 0 20px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold); transition: color .3s, background .3s, box-shadow .3s, transform .3s; }
.resume-link svg { width: 17px; }
.resume-link:hover, .button:hover { color: #080808; background: var(--gold); box-shadow: 0 0 32px rgba(210, 170, 79, .24); transform: translateY(-2px); }
.icon-button { display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.menu-toggle { position: relative; z-index: 3; display: none; width: 42px; height: 42px; border-radius: 50%; background: var(--text); }
.menu-toggle span { display: block; width: 18px; height: 1px; background: #080808; transition: transform .3s; }
.menu-toggle span + span { margin-top: 5px; }

.hero { position: relative; min-height: calc(100svh - 24px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 128px max(4vw, 24px) 34px; background: #080808; isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.035) 50%, transparent 50.2%), linear-gradient(transparent 49.8%, rgba(255,255,255,.028) 50%, transparent 50.2%); background-size: 132px 132px; mask-image: radial-gradient(circle at 50% 48%, #000 0, transparent 72%); opacity: .7; }
.hero-fluid { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .96; }
.hero.fluid-fallback { background: radial-gradient(circle at var(--fluid-x, 50%) var(--fluid-y, 45%), rgba(90,126,255,.5), transparent 17%), radial-gradient(circle at calc(var(--fluid-x, 50%) + 8%) calc(var(--fluid-y, 45%) - 5%), rgba(240,68,152,.35), transparent 22%), #080808; }
.hero-kicker { position: absolute; z-index: 5; top: 105px; right: 4vw; margin: 0; font-size: .66rem; color: #b8b8b1; text-transform: uppercase; }
.hero-type { position: absolute; inset: 16% 2.5% auto; display: grid; grid-template-columns: 1fr 1fr; z-index: 2; color: rgba(247,247,244,.94); font-family: var(--font-wujie); font-size: clamp(7rem, 14.8vw, 15rem); font-weight: 900; line-height: .76; letter-spacing: 0; white-space: nowrap; text-shadow: 0 12px 60px rgba(0,0,0,.42); }
.hero-type span:last-child { margin-top: 25vh; text-align: right; }
.avatar-stage { position: absolute; z-index: 4; left: 50%; top: 50%; width: clamp(310px, 37vw, 590px); aspect-ratio: 1; transform: translate(-50%, -47%); }
.avatar-aura { position: absolute; inset: 9%; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; box-shadow: inset 0 0 110px rgba(210,170,79,.08), 0 0 75px rgba(94,174,255,.09); animation: breathe 5s ease-in-out infinite; }
.avatar-sprite { position: absolute; inset: 0; background-image: url("assets/index.html.sprite.webp"); background-size: 500% 500%; background-position: 0 0; background-repeat: no-repeat; filter: drop-shadow(0 40px 40px rgba(0,0,0,.46)); transition: filter .25s, transform .18s ease-out; will-change: background-position, transform; }
.avatar-stage:hover .avatar-sprite { filter: drop-shadow(0 48px 55px rgba(0,0,0,.65)); }
.avatar-note { position: absolute; top: 43%; font-size: .57rem; line-height: 1.5; color: var(--gold); letter-spacing: .12em; }
.note-left { right: calc(100% + 4vw); text-align: right; }
.note-right { left: calc(100% + 4vw); }
.hero-orbit { position: absolute; left: 50%; top: 48%; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.orbit-one { width: min(72vw, 980px); aspect-ratio: 1; transform: translate(-50%,-50%) rotate(15deg); animation: orbit 26s linear infinite; }
.orbit-two { width: min(48vw, 680px); aspect-ratio: 1; transform: translate(-50%,-50%) rotate(-36deg); border-color: rgba(210,170,79,.17); animation: orbit-reverse 20s linear infinite; }
.hero-content { position: relative; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.eyebrow { margin: 0 0 18px; color: var(--gold); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-content h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 5rem); line-height: .9; letter-spacing: .18em; }
.hero-name-cn { font-family: var(--font-shuhei); font-weight: 800; }
.hero-statement { max-width: 360px; text-align: right; }
.hero-statement p { margin: 0 0 9px; font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 700; }
.hero-statement span { color: var(--muted); font-size: .78rem; line-height: 1.7; }
.scroll-cue { position: absolute; z-index: 8; left: 50%; bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); font-size: .62rem; color: var(--muted); animation: float 2.4s ease-in-out infinite; }
.scroll-cue svg { width: 18px; }
@keyframes orbit { to { transform: translate(-50%,-50%) rotate(375deg); } }
@keyframes orbit-reverse { to { transform: translate(-50%,-50%) rotate(-396deg); } }
@keyframes breathe { 50% { transform: scale(1.05); opacity: .6; } }
@keyframes float { 50% { transform: translate(-50%, 7px); } }

.marquee { overflow: hidden; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(0,0,0,.5); background: #e9ae28; color: #080808; }
.marquee-track { display: flex; align-items: center; width: max-content; padding: 17px 0; animation: marquee 24s linear infinite; }
.marquee span { padding: 0 34px; font-family: var(--font-wujie); font-size: .86rem; font-weight: 900; letter-spacing: 0; }
.marquee span b { margin-left: 8px; font-family: var(--font-shuhei); font-size: .72rem; font-weight: 800; }
.marquee i { width: 8px; height: 8px; transform: rotate(45deg); background: #080808; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section { width: var(--page); margin: 0 auto; padding: clamp(100px, 14vw, 190px) 0; }
.section-index { margin-bottom: 70px; color: var(--muted); font-size: .65rem; letter-spacing: .14em; }
.display-title { margin: 0; font-size: clamp(3rem, 7.5vw, 8rem); line-height: .88; letter-spacing: 0; text-transform: uppercase; }
.display-title em { display: inline-block; margin-top: .17em; color: var(--gold); font-family: var(--font-shuhei); font-style: normal; font-weight: 800; text-transform: none; }
.about-grid { display: grid; grid-template-columns: minmax(300px, .85fr) 1.15fr; gap: clamp(55px, 8vw, 120px); align-items: start; }
.about-copy .display-title { font-size: clamp(3rem, 5.6vw, 6rem); line-height: .92; }
.portrait-wrap { position: sticky; top: 105px; min-height: 640px; overflow: hidden; background: #24231f; }
.portrait-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72)); }
.portrait-wrap > img { width: 100%; height: 100%; min-height: 640px; object-fit: cover; object-position: center; filter: grayscale(.16) contrast(1.08); }
.portrait-caption { position: absolute; z-index: 2; left: 25px; right: 25px; bottom: 24px; font-family: var(--font-wujie); font-size: clamp(.72rem, 1.05vw, .94rem); font-weight: 900; line-height: 1.35; letter-spacing: 0; }
.portrait-sticker { position: absolute; z-index: 3; right: 15px; top: 15px; display: grid; place-items: center; width: clamp(112px, 11vw, 148px); aspect-ratio: 1; color: #090909; text-align: center; transform: rotate(7deg); filter: drop-shadow(0 15px 22px rgba(0,0,0,.3)); }
.portrait-sticker img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.portrait-sticker span { position: relative; z-index: 1; font-family: var(--font-wujie); font-size: clamp(.62rem, .8vw, .78rem); font-weight: 900; line-height: 1.05; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.about-lead { max-width: 680px; margin: 38px 0 45px; color: #b9b9b2; font-size: 1rem; line-height: 1.95; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats div { padding: 0 20px; border-right: 1px solid var(--line); }
.stats div:first-child { padding-left: 0; }
.stats div:last-child { border: 0; }
.stats strong { display: block; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; color: var(--gold); }
.stats span { display: block; margin-top: 9px; color: var(--muted); font-size: .69rem; }
.timeline { margin: 48px 0; }
.timeline article { position: relative; padding: 0 0 30px 26px; border-left: 1px solid var(--line); }
.timeline article::before { content: ""; position: absolute; left: -4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.timeline time { color: var(--gold); font-size: .65rem; }
.timeline h3 { margin: 8px 0 8px; font-size: 1rem; }
.timeline p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.credentials { display: grid; grid-template-columns: .8fr 1.2fr; margin: -8px 0 42px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.credentials article { padding: 25px 24px 25px 0; }
.credentials article + article { padding-left: 24px; border-left: 1px solid var(--line); }
.credentials span { color: var(--gold); font-size: .6rem; letter-spacing: .12em; }
.credentials h3 { margin: 10px 0 8px; font-size: .92rem; }
.credentials p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.75; }
.button-gold { min-height: 54px; padding: 0 27px; background: var(--gold); color: #080808; font-size: .76rem; font-weight: 700; }

.work { width: 100%; max-width: none; background: var(--paper); color: #0b0b0b; padding-inline: max(4vw, calc((100vw - 1320px) / 2)); }
.work .section-index { color: #6d6d67; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; gap: 30px; }
.section-heading p { max-width: 340px; margin: 0 0 8px; color: #62625d; font-size: .78rem; line-height: 1.7; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.project-card { min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; background: #e7e6e1; color: #090909; cursor: pointer; text-align: left; transition: transform .45s var(--ease), border-color .35s, box-shadow .45s; }
.project-card:hover { transform: translateY(-8px) scale(1.012); border-color: var(--gold-dark); box-shadow: 0 25px 70px rgba(32,28,17,.16); }
.project-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; transition: transform .65s var(--ease); }
.project-card:hover .project-art { transform: scale(1.025); }
.project-meta { min-height: 105px; padding: 20px 22px; display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 12px; background: #f2f1ec; }
.project-meta > span { color: #7b7a74; font-size: .67rem; }
.project-meta h3 { margin: 0 0 7px; font-size: 1.05rem; }
.project-meta p { margin: 0; color: #72716c; font-size: .67rem; }
.project-meta b { font-size: 1.3rem; font-weight: 400; transition: transform .3s; }
.project-card:hover .project-meta b { transform: translate(4px,-4px); }
.art-ali { background: #151515; color: #ffe7ab; }
.ali-word { position: absolute; top: 11%; left: -2%; font-size: clamp(2.6rem, 6vw, 6rem); font-weight: 900; color: #f0c85d; opacity: .96; }
.ali-pills { position: absolute; left: 7%; bottom: 9%; display: flex; flex-wrap: wrap; gap: 8px; max-width: 55%; }
.ali-pills span { padding: 7px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: .56rem; }
.ali-window { position: absolute; right: 5%; bottom: -8%; width: 34%; height: 75%; border: 1px solid rgba(255,255,255,.24); border-radius: 24px 24px 0 0; background: linear-gradient(160deg,#f0c85d,#f15c44 48%,#6c82ff); transform: rotate(8deg); box-shadow: 0 0 70px rgba(240,200,93,.3); }
.ali-window::after { content: "SALE"; position: absolute; inset: 10%; display: grid; place-items: center; border-radius: 16px; background: #0c0c0c; color: #fff; font-size: clamp(1rem, 3vw, 3rem); font-weight: 900; }
.art-ui { background: linear-gradient(135deg,#cbd6ff,#6c82ff 45%,#302d72); }
.ui-phone { position: absolute; width: 29%; height: 77%; padding: 8%; border: 3px solid #151515; border-radius: 28px; background: #f1f0ec; box-shadow: 0 20px 40px rgba(21,20,45,.32); }
.phone-a { left: 22%; top: 12%; transform: rotate(-9deg); }
.phone-b { right: 18%; top: 20%; transform: rotate(10deg); background: #111; }
.ui-phone i { display: block; height: 14%; margin-bottom: 18%; border-radius: 999px; background: var(--coral); }
.ui-phone i:nth-child(2) { width: 70%; background: var(--gold); }
.ui-phone i:nth-child(3) { height: 38%; border-radius: 8px; background: var(--mint); }
.phone-b i:nth-child(1) { background: var(--blue); }.phone-b i:nth-child(2){background:#eee}.phone-b i:nth-child(3){background:var(--coral)}
.ui-label { position: absolute; left: 4%; bottom: 5%; color: #111; font-size: .56rem; font-weight: 800; writing-mode: vertical-rl; }
.art-medical { background: #a6ddc0; }
.medical-cross { position: absolute; left: 8%; top: 2%; color: #ec5c4f; font-size: clamp(6rem, 15vw, 13rem); font-weight: 200; line-height: 1; }
.medical-screen { position: absolute; right: 8%; top: 12%; width: 53%; height: 75%; border-radius: 7px; background: #102d28; color: white; padding: 7%; box-shadow: -20px 24px 0 rgba(255,255,255,.55); }
.medical-screen span { font-size: .55rem; color: #a6ddc0; }.medical-screen strong { display: block; font-size: clamp(3rem,8vw,7rem); line-height: 1.1; }.medical-screen div { width: 80%; height: 6px; margin-top: 15%; background: #ec5c4f; }
.medical-data { position: absolute; left: 10%; bottom: 10%; display: flex; align-items: end; gap: 7px; width: 27%; height: 28%; }
.medical-data i { flex:1; height: 30%; background:#102d28 }.medical-data i:nth-child(2){height:70%}.medical-data i:nth-child(3){height:52%}.medical-data i:nth-child(4){height:95%;background:#ec5c4f}
.art-light { background: radial-gradient(circle at 50% 100%,#dd9c4a 0,#5b3148 32%,#101124 75%); color: white; }
.light-skyline { position: absolute; inset: 26% 5% 0; display:flex; align-items:flex-end; gap:1.5%; }
.light-skyline i { flex:1; height:54%; background:linear-gradient(#f5c268,#8b5cf6 55%,#111); clip-path:polygon(15% 0,85% 0,100% 100%,0 100%); box-shadow:0 0 15px #f1b55a; }.light-skyline i:nth-child(2){height:80%}.light-skyline i:nth-child(3){height:65%}.light-skyline i:nth-child(4){height:95%}.light-skyline i:nth-child(5){height:72%}.light-skyline i:nth-child(6){height:88%}.light-skyline i:nth-child(7){height:58%}.light-skyline i:nth-child(8){height:76%}
.light-number { position:absolute;left:5%;top:3%;font-size:clamp(4rem,10vw,9rem);font-weight:900;color:#f1b55a;line-height:1}.light-copy{position:absolute;right:5%;top:7%;font-size:.62rem;line-height:1.5;text-align:right}
.more-card { min-height: 260px; display: flex; align-items: flex-end; justify-content: space-between; padding: 28px; background: #d7d6d1; cursor: default; }
.more-card:hover { transform: none; box-shadow: none; border-color: rgba(0,0,0,.12); }
.more-plus { align-self: flex-start; font-size: 3rem; font-weight: 200; }
.more-card div { max-width: 270px; text-align: right; }.more-card strong{font-size:1.2rem}.more-card p{font-size:.7rem;color:#6d6d67;line-height:1.6}

.skills-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 62px; }
.skills-heading p { max-width: 360px; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.skill-card { position: relative; min-height: 310px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #111; transition: transform .4s var(--ease), background .4s, box-shadow .4s; }
.skill-card:hover { z-index: 2; transform: translateY(-8px); background: #1a1916; box-shadow: 0 28px 70px rgba(0,0,0,.42); }
.skill-card svg { width: 38px; margin: 65px 0 32px; color: var(--gold); }
.skill-no { position: absolute; right: 25px; top: 24px; color: #666; font-size: .64rem; }
.skill-card h3 { margin: 0 0 14px; font-size: 1.05rem; }
.skill-card p { margin: 0; max-width: 300px; color: var(--muted); font-size: .75rem; line-height: 1.75; }
.tool-belt { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 32px; }
.tool-belt span { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: #aaa; font-size: .58rem; }

.contact { position: relative; overflow: hidden; min-height: 760px; padding: 125px max(4vw, calc((100vw - 1320px)/2)); display: flex; flex-direction: column; justify-content: center; background: var(--gold); color: #090909; }
.contact .eyebrow { color: #5b4415; }
.contact-title { position: relative; z-index: 1; margin: 0; font-size: clamp(3.4rem, 9.6vw, 10.5rem); line-height: .82; letter-spacing: 0; }
.contact-title em { color: transparent; -webkit-text-stroke: 1px #090909; font-family: Georgia,serif; font-weight: 400; }
.contact-row { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 72px; }
.contact .button { border-color: #090909; background: #090909; color: #fff; min-height: 56px; }
.contact .button:hover { background: transparent; color: #090909; box-shadow: none; }
.contact-details { display: grid; grid-template-columns: auto auto; gap: 10px 28px; font-size: .78rem; }
.contact-details span { color: #6a511c; }.contact-details a { font-weight: 700; border-bottom: 1px solid rgba(0,0,0,.3); }
.contact-orbit { position:absolute; width:58vw; aspect-ratio:1; right:-10%; top:-35%; border:1px solid rgba(0,0,0,.2); border-radius:50%; box-shadow:0 0 0 8vw rgba(0,0,0,.025),0 0 0 16vw rgba(0,0,0,.025); animation:orbitContact 14s ease-in-out infinite; }
@keyframes orbitContact { 50% { transform: translate(-3%,6%) rotate(20deg); } }
.site-footer { min-height: 58px; padding: 7px 4vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--line); font-size: .62rem; color: var(--muted); }
.back-top { width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--text)}.back-top svg{width:18px}.socials{display:flex;justify-content:flex-end;gap:18px}.socials a:hover{color:var(--gold)}

.project-dialog { width: min(100%, 1100px); height: min(90vh, 820px); max-width: none; max-height: none; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: #111; color: var(--text); box-shadow: 0 40px 120px rgba(0,0,0,.75); }
.project-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(12px); }
.dialog-close { position:fixed; right:max(28px,calc((100vw - 1040px)/2)); top:calc(5vh + 24px); z-index:2; width:46px;height:46px;border-radius:50%;background:#eee;color:#111}.dialog-close svg{width:20px}
.dialog-inner { min-height:100%; padding: clamp(55px,8vw,105px); background: radial-gradient(circle at 90% 10%,rgba(210,170,79,.16),transparent 35%); }
.dialog-index{color:var(--gold);font-size:.68rem;letter-spacing:.16em}.dialog-inner h2{max-width:760px;margin:28px 0 20px;font-size:clamp(2.5rem,6vw,6rem);line-height:.92}.dialog-summary{max-width:700px;color:#b6b6af;font-size:1rem;line-height:1.8}.dialog-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:50px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.dialog-stats div{padding:24px;border-right:1px solid var(--line)}.dialog-stats div:last-child{border:0}.dialog-stats strong{display:block;color:var(--gold);font-size:1.5rem}.dialog-stats span{font-size:.65rem;color:var(--muted)}.dialog-body{display:grid;grid-template-columns:1fr 2fr;gap:30px}.dialog-body h3{margin:0}.dialog-body p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.9}.dialog-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:45px}.dialog-tags span{padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:.58rem;color:#bbb}

.reveal-item { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1000px) {
  .hero-type { top: 22%; font-size: 19vw; }
  .avatar-stage { width: min(58vw, 530px); }
  .note-left { right: 90%; }.note-right{left:90%}
  .about-grid { grid-template-columns: 1fr; }.portrait-wrap{position:relative;top:auto;min-height:600px}.portrait-wrap > img{min-height:600px}
  .skills-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 767px) {
  .site-header { top: 10px; min-height: 52px; padding: 5px 6px 5px 13px; }
  .menu-toggle { display:block; }
  .primary-nav { position: fixed; z-index: 2; top: -11px; right: -105vw; width: min(88vw,420px); height: calc(100svh + 11px); padding: 110px 35px 50px; flex-direction: column; align-items:stretch; gap:0; border-left:1px solid rgba(255,255,255,.14); background:rgba(15,15,15,.78); backdrop-filter:blur(32px) saturate(170%); transition:right .55s var(--ease); box-shadow:-30px 0 80px rgba(0,0,0,.55),inset 1px 0 rgba(255,255,255,.08); }
  .primary-nav.open { right:0; }.primary-nav > a { padding:18px 0;border-bottom:1px solid var(--line);font-size:1.1rem}.primary-nav .resume-link{margin-top:28px;padding:0 22px;border-bottom:1px solid var(--gold);font-size:.78rem}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .hero { min-height: calc(100svh - 20px); padding: 100px 20px 25px; }
  .hero-kicker { top:86px;right:20px;max-width:150px;text-align:right;line-height:1.5}.hero-type{inset:22% -1% auto;display:block;font-size:31vw;line-height:.73}.hero-type span{display:block}.hero-type span:last-child{margin-top:17vh;text-align:right}
  .avatar-stage { top:48%;width:min(95vw,430px);}.hero-content{display:block}.hero-content h1{font-size:2.2rem}.hero-statement{margin:20px 0 0;max-width:250px;text-align:left}.hero-statement span{display:none}.scroll-cue{left:auto;right:17px;transform:none}.scroll-cue span{display:none}
  .avatar-note{display:none}.orbit-one{width:130vw}.orbit-two{width:90vw}
  .section { width: calc(100% - 36px); padding: 95px 0; }.section-index{margin-bottom:45px}.display-title{font-size:clamp(2.8rem,15vw,5rem)}
  .about-grid{gap:55px}.portrait-wrap,.portrait-wrap > img{min-height:500px}.about-lead{font-size:.92rem}.stats{gap:0}.stats div{padding:0 12px}.stats strong{font-size:2.2rem}.stats span{font-size:.56rem}.credentials{grid-template-columns:1fr}.credentials article + article{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .work { width:100%;padding-inline:18px}.section-heading,.skills-heading{display:block}.section-heading p,.skills-heading p{margin-top:24px}.work-grid{grid-template-columns:1fr;gap:22px}.project-meta{min-height:94px;padding:17px}
  .skills-grid{grid-template-columns:1fr}.skill-card{min-height:270px}.skill-card svg{margin:45px 0 27px}
  .contact{min-height:680px;padding:90px 20px}.contact-title{font-size:15vw}.contact-row{display:block;margin-top:55px}.contact-details{margin-top:40px;grid-template-columns:1fr}.contact-details span{margin-top:8px}
  .site-footer{grid-template-columns:1fr auto;padding:28px 20px;gap:20px}.socials{grid-column:1/-1;justify-content:flex-start}.back-top{grid-row:1;grid-column:2}
  .project-dialog{width:calc(100% - 20px);height:calc(100svh - 20px)}.dialog-inner{padding:70px 25px 45px}.dialog-close{right:24px;top:24px}.dialog-stats{grid-template-columns:1fr}.dialog-stats div{border-right:0;border-bottom:1px solid var(--line);padding:16px 0}.dialog-body{grid-template-columns:1fr}
}

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

/* 2026 immersive neon refresh */
@keyframes neonFlow { to { background-position: 300% 50%; } }
@keyframes heroReveal {
  from { opacity: 0; filter: blur(18px); transform: translate3d(-26px, 28px, 0); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}
@keyframes avatarReveal {
  from { opacity: 0; filter: blur(18px); transform: translate3d(calc(-50% - 26px), calc(-47% + 28px), 0); }
  to { opacity: 1; filter: blur(0); transform: translate3d(-50%, -47%, 0); }
}
@keyframes titleSolidify {
  0%, 22% { color: transparent; -webkit-text-stroke-color: rgba(255,255,255,.7); }
  100% { color: #fff; -webkit-text-stroke-color: transparent; }
}
@keyframes c4dFlyLeft {
  0% { opacity: 0; transform: translate3d(-40vw, 80px, 0) rotate(-70deg) scale(.55); filter: blur(18px); }
  65% { opacity: .86; transform: translate3d(2vw, -6px, 0) rotate(14deg) scale(1.05); filter: blur(0); }
  100% { opacity: .72; transform: translate3d(0, 0, 0) rotate(4deg) scale(1); filter: blur(0); }
}
@keyframes c4dFlyRight {
  0% { opacity: 0; transform: translate3d(40vw, -50px, 0) rotate(80deg) scale(.5); filter: blur(18px); }
  65% { opacity: .84; transform: translate3d(-2vw, 8px, 0) rotate(-12deg) scale(1.04); filter: blur(0); }
  100% { opacity: .68; transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); filter: blur(0); }
}
@keyframes c4dFloatLeft { 50% { transform: translate3d(14px, -18px, 0) rotate(13deg); } }
@keyframes c4dFloatRight { 50% { transform: translate3d(-12px, 20px, 0) rotate(-12deg); } }
@keyframes fluidButton { to { transform: translate3d(-34%, 12%, 0) rotate(360deg) scale(1.2); } }

::selection { background: var(--neon-a); color: #050505; }
::-webkit-scrollbar-thumb { background: var(--neon-gradient); background-size: 300% 100%; animation: neonFlow 5s linear infinite; }
.marquee,
.contact { background: var(--neon-gradient); background-size: 300% 100%; animation: neonFlow 8s linear infinite; }

.site-header {
  top: 16px;
  height: 64px;
  min-height: 64px;
  padding: 7px 11px 7px 7px;
  border-radius: 32px;
  background: rgba(12,14,14,.3);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04), 0 16px 46px rgba(0,0,0,.2);
}
.site-header::before {
  inset: 1px;
  background: linear-gradient(120deg, rgba(255,255,255,.09), transparent 34%, transparent 78%, rgba(25,245,179,.06));
}
.site-header::after { display: none; }
.site-header.scrolled { background: rgba(8,11,11,.7); border-color: rgba(255,255,255,.19); }
.brand { height: 50px; gap: 12px; }
.brand-mark { width: 50px; height: 50px; flex: 0 0 50px; }
.brand-mark img { width: 106%; height: 106%; }
.primary-nav > a:not(.resume-link)::after,
.resume-link:hover,
.button:hover { background: var(--neon-gradient); background-size: 300% 100%; animation: neonFlow 4s linear infinite; }
.primary-nav > a:hover,
.resume-link { color: var(--neon-a); }
.resume-link { border-color: var(--neon-a); }
.resume-link:hover { color: #050505; box-shadow: 0 0 34px rgba(32,245,179,.28); }

.hero-fluid { opacity: 1; filter: saturate(1.28) contrast(1.07); }
.hero.fluid-fallback {
  background: radial-gradient(circle at var(--fluid-x,50%) var(--fluid-y,45%), rgba(190,255,35,.72), transparent 15%), radial-gradient(circle at calc(var(--fluid-x,50%) + 9%) calc(var(--fluid-y,45%) - 6%), rgba(0,180,255,.66), transparent 23%), #050606;
}
.avatar-sprite {
  background-size: 800% 700%;
  image-rendering: auto;
  transition: filter .3s var(--ease);
  transform-origin: 50% 54%;
  backface-visibility: hidden;
}
.avatar-stage:hover .avatar-sprite { filter: drop-shadow(0 50px 58px rgba(0,0,0,.64)) drop-shadow(0 0 28px rgba(32,245,179,.1)); }
.avatar-aura { box-shadow: inset 0 0 120px rgba(32,245,179,.08), 0 0 90px rgba(0,168,255,.12); }
.avatar-note,
.eyebrow { color: var(--neon-a); }
.hero-intro { width: min(29vw, 360px); }
.hero-role { display: flex; flex-direction: column; gap: 7px; width: 100%; margin: 0 0 15px; font-family: var(--font-shuhei); font-size: clamp(.78rem, 1vw, .92rem); font-weight: 700; line-height: 1.4; letter-spacing: .11em; }
.hero-role span { display: block; }
.hero-name-cn { display: flex; width: 100%; justify-content: space-between; font-size: clamp(3.3rem, 5.6vw, 5.6rem) !important; letter-spacing: 0 !important; }
.hero-name-cn span { display: block; }
.cn-small { letter-spacing: .1em; }
.hero-kicker,
.hero-type,
.avatar-stage,
.hero-content,
.scroll-cue { opacity: 0; filter: blur(16px); }
body.loaded .hero-kicker { animation: heroReveal .85s .12s var(--ease) forwards; }
body.loaded .hero-type { animation: heroReveal 1.05s .22s var(--ease) forwards; }
body.loaded .avatar-stage { animation: avatarReveal 1.05s .36s var(--ease) forwards; }
body.loaded .hero-content { animation: heroReveal .95s .5s var(--ease) forwards; }
body.loaded .scroll-cue { animation: heroReveal .8s .68s var(--ease) forwards, float 2.4s 1.5s ease-in-out infinite; }

.marquee { color: #04100d; border-color: rgba(255,255,255,.32); }
.marquee-track { padding: 18px 0; }
.marquee span { font-size: .94rem; }
.marquee span b { font-size: .76rem; }

.display-title,
.hero-name-cn,
.project-copy strong,
.skill-card h3,
.timeline h3,
.credentials h3,
.dialog-inner h2,
.contact .eyebrow { font-family: var(--font-shuhei); font-weight: 800; }
.display-title em,
.stats strong,
.timeline time,
.credentials span,
.dialog-index,
.dialog-stats strong,
.skill-card svg,
.avatar-note,
.about .eyebrow,
.project-index,
.socials a:hover {
  color: transparent;
  background: var(--neon-gradient);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: neonFlow 5s linear infinite;
}

.about { position: relative; overflow: clip; isolation: isolate; }
.about-grid,
.about .section-index { position: relative; z-index: 2; }
.about-c4d { position: absolute; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.about-c4d img { width: 100%; height: 100%; object-fit: contain; filter: saturate(1.22) contrast(1.06) drop-shadow(0 28px 45px rgba(0,0,0,.5)); }
.about-c4d-left { left: -12vw; top: 27%; width: clamp(170px, 21vw, 360px); }
.about-c4d-right { right: -17vw; top: 30%; width: clamp(150px, 19vw, 320px); }
.about-entered .about-c4d-left { animation: c4dFlyLeft 1.25s .12s var(--ease) forwards, c4dFloatLeft 7s 1.5s ease-in-out infinite; }
.about-entered .about-c4d-right { animation: c4dFlyRight 1.3s .2s var(--ease) forwards, c4dFloatRight 8s 1.55s ease-in-out infinite; }
.about .title-fill {
  color: transparent;
  -webkit-text-stroke: 1.25px rgba(255,255,255,.72);
  font-family: var(--font-shuhei);
}
.about-entered .title-fill { animation: titleSolidify 1.15s .35s var(--ease) forwards; }
.stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; }
.stats div { padding: 0 30px; }
.stats p { display: flex; align-items: flex-end; gap: 7px; margin: 12px 0 0; }
.stats strong { display: inline-block; font-size: clamp(3.5rem, 6.4vw, 6rem); }
.stats small { padding-bottom: .65em; color: #e7e7e1; font-family: var(--font-shuhei); font-size: .9rem; }
.stats span { margin: 0; font-family: var(--font-shuhei); font-size: .78rem; letter-spacing: .12em; }
.timeline article::before { background: var(--neon-gradient); }

.fluid-button {
  position: relative;
  isolation: isolate;
  min-width: 196px;
  min-height: 58px;
  overflow: hidden;
  border-color: rgba(255,255,255,.66);
  background: #13225f;
  color: #fff;
  font-family: var(--font-shuhei);
  font-weight: 800;
  border-color:transparent;
  box-shadow:0 14px 35px rgba(0,0,0,.24);
}
.fluid-button::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: 220%;
  aspect-ratio: 1;
  left: -45%;
  top: -190%;
  border-radius: 42%;
  background: conic-gradient(from 30deg, #abff22, #00d7ff, #5746ff, #cf29ff, #00efad, #abff22);
  animation: fluidButton 6s linear infinite;
}
.fluid-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px;
  border-radius: inherit;
  background: rgba(7,10,23,.22);
  backdrop-filter: blur(10px) saturate(170%);
}
.fluid-button:hover { transform: translateY(-7px) scale(1.065); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 25px rgba(0,224,255,.75), 0 0 60px rgba(161,50,255,.42); }
.fluid-button span,
.fluid-button b { position: relative; z-index: 2; }

.work {
  background: #070808;
  color: var(--text);
  padding-top: clamp(105px, 12vw, 165px);
  padding-bottom: clamp(105px, 12vw, 165px);
}
.work .section-index { color: var(--muted); }
.section-heading { margin-bottom: 52px; }
.section-heading p { color: var(--muted); }
.work-showcase { border-top: 1px solid var(--line); }
.project-panel {
  position: relative;
  width: 100%;
  min-height: min(72vh, 680px);
  display: grid;
  grid-template-columns: minmax(280px,.78fr) minmax(420px,1.22fr);
  align-items: stretch;
  gap: clamp(32px, 5vw, 85px);
  padding: clamp(34px, 4.5vw, 68px) 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.project-panel:nth-child(even) .project-copy { order: 2; }
.project-panel:nth-child(even) .project-visual { order: 1; }
.project-index { position: absolute; z-index: 3; left: 0; top: 30px; color: var(--neon-a); font-size: .68rem; letter-spacing: .14em; }
.project-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 55px 0 18px; }
.project-copy small { margin-bottom: auto; color: #777d7a; font-size: .64rem; letter-spacing: .16em; }
.project-copy strong { max-width: 530px; font-size: clamp(2.25rem, 4.7vw, 5.5rem); line-height: .96; letter-spacing: 0; }
.project-copy em { margin-top: 22px; color: #929891; font-style: normal; font-size: .76rem; letter-spacing: .08em; }
.project-visual {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  background: #141616;
  transform: scale(.985);
  transition: transform .7s var(--ease), border-color .45s, box-shadow .6s;
}
.project-panel:hover .project-visual { transform: scale(1.018); border-color: rgba(85,255,178,.62); box-shadow: 0 28px 90px rgba(0,0,0,.45), 0 0 38px rgba(0,212,255,.12); }
.project-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 52%, rgba(0,0,0,.38)); pointer-events: none; }
.project-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .8s; }
.project-panel:hover .project-visual img { transform: scale(1.045); filter: saturate(1.15); }
.project-visual u { position: absolute; z-index: 3; right: 22px; top: 20px; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; color: #fff; font-size: 1.35rem; text-decoration: none; backdrop-filter: blur(12px); transition: transform .45s var(--ease), background .4s, color .4s; }
.project-panel:hover .project-visual u { transform: rotate(45deg) scale(1.08); background: var(--neon-a); color: #050505; }
.visual-ali { display: grid; place-items: center; background: radial-gradient(circle at 35% 25%, #174f48, transparent 32%), linear-gradient(145deg,#090c0c,#102924 52%,#071618); }
.visual-ali b { font-size: clamp(3rem, 7.4vw, 8.5rem); line-height: .8; color: #dbff44; transform: rotate(-7deg); }
.visual-ali i { position: absolute; padding: 10px 16px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(0,0,0,.28); font-style: normal; font-size: .64rem; }
.visual-ali i:nth-of-type(1){left:8%;top:12%}.visual-ali i:nth-of-type(2){right:8%;bottom:18%}.visual-ali i:nth-of-type(3){left:18%;bottom:10%}
.visual-illustration { background: linear-gradient(145deg,#245043,#d8ff91); }
.visual-illustration img { object-position: center 18%; }
.visual-light { display: flex; align-items: flex-end; justify-content: center; gap: 2%; padding: 10% 8% 0; background: radial-gradient(circle at 50% 100%,#00dffc 0,#1547b6 27%,#07061a 72%); }
.visual-light b { position: absolute; left: 7%; top: 5%; z-index: 2; color: #bfff39; font-size: clamp(5rem,10vw,11rem); line-height: 1; }
.visual-light i { width: 15%; height: 55%; background: linear-gradient(#cfff39,#00caff 55%,#091426); clip-path: polygon(12% 0,88% 0,100% 100%,0 100%); box-shadow: 0 0 26px rgba(0,220,255,.45); }
.visual-light i:nth-of-type(2){height:84%}.visual-light i:nth-of-type(3){height:68%}.visual-light i:nth-of-type(4){height:95%}.visual-light i:nth-of-type(5){height:73%}
.visual-medical { display: grid; place-items: center; background: linear-gradient(145deg,#c9ff39,#03dbb0 55%,#0878bd); color: #06110e; }
.visual-medical b { font-family: var(--font-shuhei); font-size: clamp(3.4rem,7vw,7.5rem); }
.visual-medical i { position: absolute; left: 8%; bottom: 7%; font-size: clamp(4rem,10vw,10rem); font-weight: 900; font-style: normal; color: rgba(3,21,17,.14); }
.visual-other { background: #101211; }

.skill-card h3,
.timeline h3,
.credentials h3 { letter-spacing: .04em; }
.skill-card:hover { background: #101d1a; box-shadow: 0 28px 70px rgba(0,0,0,.42), inset 0 1px rgba(187,255,55,.16); }
.button-gold { border-color: transparent; background: var(--neon-gradient); background-size: 300% 100%; animation: neonFlow 5s linear infinite; }
.dialog-inner { background: radial-gradient(circle at 90% 10%,rgba(0,210,255,.18),transparent 35%); }
.contact { color: #04100d; }
.contact .eyebrow { color: #09241c; }
.contact-title em { -webkit-text-stroke-color: #06110e; }
.contact-details span { color: #155b49; }

.reveal-item {
  opacity: 0;
  filter: blur(16px);
  transform: translate3d(-24px, 30px, 0);
  transition: opacity .95s var(--ease), filter 1s var(--ease), transform 1s var(--ease);
}
.reveal-item.is-visible { opacity: 1; filter: blur(0); transform: translate3d(0,0,0); }

@media (max-width: 1000px) {
  .about-c4d-left { left: -7vw; top: 24%; width: 220px; }
  .about-c4d-right { right: -12vw; top: 29%; width: 200px; }
  .project-panel { grid-template-columns: 1fr; min-height: 0; }
  .project-panel:nth-child(even) .project-copy,
  .project-panel:nth-child(even) .project-visual { order: initial; }
  .project-copy { min-height: 260px; }
  .project-visual { min-height: 52vw; }
}

@media (max-width: 767px) {
  .site-header { top: 10px; height: 56px; min-height: 56px; padding: 5px 5px 5px 5px; border-radius: 28px; }
  .brand { height: 46px; }
  .brand-mark { width: 46px; height: 46px; flex-basis: 46px; }
  .brand-name { display: none; }
  .hero-intro { width: min(62vw, 250px); }
  .hero-role { gap: 4px; margin-bottom: 10px; font-size: .72rem; letter-spacing: .09em; }
  .hero-name-cn { font-size: 2.7rem !important; }
  .hero-statement { display: none; }
  .about-c4d { opacity: 0; }
  .about-c4d-left { left: -18vw; top: 32%; width: 155px; }
  .about-c4d-right { right: -17vw; top: 27%; width: 145px; }
  .stats div { padding: 0 14px; }
  .stats div:first-child { padding-left: 0; }
  .stats strong { font-size: 3.3rem; }
  .stats span { font-size: .66rem; }
  .work { padding-inline: 18px; }
  .project-panel { display: flex; flex-direction: column; gap: 20px; padding: 34px 0 50px; }
  .project-copy { min-height: 225px; padding: 45px 0 0; }
  .project-copy strong { font-size: clamp(2rem, 11vw, 3.6rem); }
  .project-copy em { font-size: .67rem; line-height: 1.7; }
  .project-visual { min-height: 74vw; }
  .project-visual u { width: 44px; height: 44px; }
  .contact { background-size: 500% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-kicker,.hero-type,.avatar-stage,.hero-content,.scroll-cue,.about-c4d { opacity: 1; filter: none; }
  .about .title-fill { color: #fff; -webkit-text-stroke-color: transparent; }
  .reveal-item { opacity: 1; filter: none; transform: none; clip-path: none; }
}

/* 2026 wide-screen interaction system */
:root {
  --page: min(95.8vw, 1840px);
  --rainbow: linear-gradient(105deg,#b72cff,#ff286f,#ff7a18,#ffe23a,#8aff2a,#18e6af,#08b8ff,#6545ff,#b72cff);
}

@keyframes marqueeReverse { to { transform: translateX(0); } }
@keyframes shutterFloat { 50% { transform: translate3d(-50%,-16px,0) rotate(1.5deg); } }
@keyframes flashBang { 0% { opacity: 0 } 12% { opacity: 1 } 52% { opacity: .95 } 100% { opacity: 0 } }
@keyframes cardLift { 0% { transform: translateY(34vh); } 100% { transform: translateY(0); } }
@keyframes c4dFloatNew { 0%,100% { transform: translate3d(0,0,0) rotate(-4deg); } 50% { transform: translate3d(12px,-24px,0) rotate(7deg); } }
@keyframes letterBlurIn { 0% { opacity:0; filter:blur(18px); transform:translate3d(-12px,22px,0) rotate(2deg); } 100% { opacity:1; filter:blur(0); transform:none; } }
@keyframes badgeBreath { 50% { filter: drop-shadow(0 35px 55px rgba(0,0,0,.48)) drop-shadow(0 0 28px rgba(27,230,211,.18)); } }

.site-header {
  --nav-shine-angle: 0deg;
  --nav-shine-opacity: 0;
  width: min(calc(100vw - 48px), 1880px);
  height: 68px;
  min-height: 68px;
  padding: 7px 13px 7px 7px;
  border-radius: 35px;
  overflow: visible;
  border:1px solid rgba(199,249,255,.2);
  background: rgba(9,13,14,.38);
  backdrop-filter: blur(28px) saturate(175%);
  box-shadow: inset 0 1px rgba(255,255,255,.18),0 18px 58px rgba(0,0,0,.26);
}
.site-header::before { inset:1px;overflow:hidden;background:linear-gradient(110deg,rgba(225,255,246,.13),transparent 31%,transparent 72%,rgba(199,249,255,.08)); }
.site-header::after {
  content:"";
  display:block;
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  inset:-1px;
  padding:1px;
  background:conic-gradient(from var(--nav-shine-angle) at 50% 50%,transparent 0 22%,rgba(215,243,255,.25) 23.5%,#e1fff6 25%,rgba(199,249,255,.38) 26.5%,transparent 28% 72%,rgba(215,243,255,.25) 73.5%,#e1fff6 75%,rgba(199,249,255,.38) 76.5%,transparent 78% 100%);
  opacity:var(--nav-shine-opacity);
  filter:drop-shadow(0 0 8px rgba(199,249,255,.5));
  transition:opacity .16s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.site-header > * { z-index:2; }
.brand-mark { width:54px;height:54px;flex-basis:54px; }
.brand { height:54px; }
.primary-nav { gap:clamp(25px,2.1vw,42px); }
.resume-link,.button { position:relative;overflow:hidden;isolation:isolate;border-color:rgba(215,243,255,.68);color:#e1fff6;box-shadow:inset 0 1px rgba(255,255,255,.15); }
.resume-link::before,.button::before { content:"";position:absolute;z-index:-1;left:-80%;top:-240%;width:70%;height:580%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(225,255,246,.7),transparent);transition:left .7s var(--ease); }
.resume-link:hover::before,.button:hover::before { left:125%; }
.fluid-button { border:0;color:#07110d;box-shadow:0 14px 35px rgba(0,0,0,.28); }
.fluid-button::before { display:block;inset:0;left:0;top:0;width:100%;height:100%;transform:none;background:linear-gradient(100deg,#dfff31,#4dff6f,#eaff3c,#dfff31);background-size:300% 100%;animation:neonFlow 5s linear infinite;transition:none; }
.fluid-button::after { display:none; }
.fluid-button:hover { color:#07110d;box-shadow:0 0 0 1px rgba(235,255,196,.62),0 0 28px rgba(111,255,66,.52),0 22px 48px rgba(0,0,0,.34); }

.landing-flow { position:relative;overflow:hidden;isolation:isolate;background:#050606; }
.landing-fluid { position:absolute;z-index:0;inset:0;width:100%;height:100%;opacity:1;filter:saturate(1.42) contrast(1.08); }
.landing-flow.fluid-fallback { background:radial-gradient(circle at var(--fluid-x,50%) var(--fluid-y,28%),rgba(99,58,255,.62),transparent 10%),radial-gradient(circle at calc(var(--fluid-x,50%) + 8%) calc(var(--fluid-y,28%) - 3%),rgba(255,54,140,.48),transparent 14%),radial-gradient(circle at calc(var(--fluid-x,50%) - 8%) calc(var(--fluid-y,28%) + 4%),rgba(35,255,161,.4),transparent 16%),#050606; }
.landing-flow .hero,.landing-flow .shutter-scene { position:relative;z-index:1;background:transparent;isolation:auto; }
.hero { min-height:100svh;padding-inline:max(2.1vw,28px); }
.hero-type { inset:15% 2.1% auto;grid-template-columns:1fr 1fr; }
.hero-word { min-width:0; }
.hero-word > span { display:block; }
.hero-word small { display:block;margin-top:22px;color:#effffb;font-family:Inter,"SF Pro Display",sans-serif;font-size:clamp(.64rem,.78vw,.9rem);font-weight:800;line-height:1;letter-spacing:.13em;text-shadow:0 3px 16px rgba(0,0,0,.55); }
.hero-word-tao { margin-top:25vh;text-align:right; }
.hero-word-tao small { text-align:right; }
.hero-type > span:last-child { margin-top:0; }
.hero-intro { width:min(29vw,440px); }
.hero-role {
  flex-direction:row;
  align-items:center;
  gap:0;
  width:max-content;
  max-width:none;
  white-space:nowrap;
  color:transparent;
  background:linear-gradient(100deg,#53ff7e,#d7ff36,#fff14e,#53ff7e);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:neonFlow 5s linear infinite;
  font-size:clamp(.9rem,1.08vw,1.15rem);
  letter-spacing:.08em;
}
.hero-role span:first-child::after { content:none; }
.hero-name-cn { width:100%; }
.avatar-stage { width:clamp(340px,34vw,640px); }

.marquee-cross { position:relative;z-index:2;height:132px;margin-top:-3px;overflow:hidden;background:transparent; }
.marquee-cross .marquee { position:absolute;left:-4%;width:108%;border:1px solid rgba(255,255,255,.25);box-shadow:0 10px 35px rgba(0,0,0,.3); }
.marquee-a { top:25px;transform:rotate(2.2deg);background:linear-gradient(90deg,#d4ff33,#21efb0,#24c8ff,#d4ff33);background-size:250% 100%;animation:neonFlow 8s linear infinite; }
.marquee-b { top:29px;transform:rotate(-2.2deg);background:linear-gradient(90deg,#ff3b35,#dc2fff,#337dff,#ff3b35);background-size:250% 100%;animation:neonFlow 7s linear infinite; }
.marquee-b .marquee-track { transform:translateX(-50%);animation:marqueeReverse 27s linear infinite; }
.marquee-b { color:#fff; }
.marquee-b i { background:#fff; }
.marquee-track { padding:15px 0; }

.shutter-scene { position:relative;z-index:1;min-height:100svh;overflow:hidden;background:transparent; }
.shutter-scene::after { content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 58%,transparent 0 24%,rgba(2,4,4,.18) 64%,rgba(2,3,3,.58) 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 100%); }
.shutter-copy { position:absolute;z-index:3;left:50%;top:8%;display:grid;place-items:center;width:min(96vw,1840px);transform:translateX(-50%);pointer-events:none;font-family:var(--font-shuhei);text-align:center;text-transform:uppercase; }
.shutter-copy > span,.shutter-copy > strong { display:block;width:max-content;max-width:100%;margin-inline:auto;text-align:center;text-align-last:auto;line-height:.9; }
.shutter-copy > span { color:transparent;background:linear-gradient(100deg,#4dff6f,#dfff31,#fff337,#4dff6f);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:neonFlow 6s linear infinite;font-family:var(--font-wujie);font-size:clamp(5rem,12vw,14rem);font-weight:900;letter-spacing:.02em;white-space:nowrap; }
.shutter-copy > strong { width:min(74vw,980px);margin:22px auto 0;color:#ecfff8;font-family:var(--font-shuhei);font-size:clamp(.75rem,1.1vw,1.25rem);font-weight:800;letter-spacing:.14em; }
.polaroid-trigger { position:absolute;z-index:5;left:50%;top:28%;width:clamp(440px,47vw,840px);max-width:calc(100vw - 80px);padding:0;border:0;background:transparent;transform:translate3d(-50%,0,0);animation:shutterFloat 5.6s ease-in-out infinite;filter:drop-shadow(0 45px 55px rgba(0,0,0,.5)); }
.polaroid-trigger img { display:block;width:100%;height:auto;aspect-ratio:753 / 644;object-fit:contain;transition:transform .55s var(--ease),filter .55s; }
.shutter-click-hint { position:absolute;z-index:7;left:50%;top:var(--shutter-hint-y,calc(100% - 56px));width:max-content;transform:translate(-50%,-50%);color:#efff42;font-family:var(--font-shuhei);font-size:clamp(.92rem,1.05vw,1.15rem);font-weight:800;line-height:1;letter-spacing:.14em;text-align:center;text-shadow:0 3px 18px rgba(0,0,0,.8);pointer-events:none; }
.polaroid-trigger:hover img,.polaroid-trigger:focus-visible img { transform:scale(1.075) rotate(-1deg);filter:saturate(1.12) drop-shadow(0 0 32px rgba(48,166,255,.38)); }
.polaroid-glow { position:absolute;inset:10% 7%;border-radius:24%;background:radial-gradient(circle,rgba(87,222,255,.38),transparent 68%);filter:blur(38px);opacity:.5; }
.camera-flash { position:fixed;z-index:300;inset:0;pointer-events:none;background:#fff;opacity:0; }
.camera-flash.is-active { animation:flashBang .72s ease-out both; }

.content-card { position:relative;z-index:10;margin-top:-5vh;overflow:clip;border:1px solid rgba(225,255,246,.15);border-bottom:0;border-radius:64px 64px 0 0;background:rgba(7,10,10,.97);box-shadow:0 -28px 100px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.12);isolation:isolate;transition:opacity .6s var(--ease),transform 1.05s var(--ease); }
.content-locked .content-card { opacity:0;pointer-events:none;transform:translateY(36vh); }
.content-card.card-raised { animation:cardLift 1.05s var(--ease) both; }
.dot-field-bg { position:sticky;z-index:0;top:0;height:100vh;margin-bottom:-100vh;pointer-events:none;overflow:hidden;mask-image:linear-gradient(#000,rgba(0,0,0,.78)); }
.dot-field-bg canvas { display:block;width:100%;height:100%; }
.content-card > section { position:relative;z-index:2; }
.section { width:var(--page);padding:clamp(120px,10vw,190px) 0; }
.section-index,.contact .eyebrow { font-size:clamp(.76rem,.72vw,.9rem);font-weight:700;letter-spacing:.16em; }

.about { min-height:1180px;overflow:visible; }
.about-grid { grid-template-columns:minmax(520px,.96fr) minmax(560px,1.04fr);gap:clamp(70px,6vw,130px); }
.about-copy { position:relative;z-index:5; }
.lanyard-scene { position:sticky;top:96px;min-height:900px;perspective:1400px;overflow:visible;touch-action:none; }
.lanyard-anchor { position:absolute;z-index:5;left:50%;top:-190px;width:120px;height:50px;transform:translateX(-50%);border-radius:0 0 32px 32px;background:linear-gradient(#14191b,#4b585d);box-shadow:0 12px 24px rgba(0,0,0,.5),inset 0 -2px rgba(255,255,255,.22); }
.lanyard-anchor span { position:absolute;left:50%;bottom:-14px;width:52px;height:28px;transform:translateX(-50%);border:8px solid #8b9a9f;border-top:0;border-radius:0 0 20px 20px; }
.lanyard-rope { position:absolute;z-index:2;inset:-185px 0 auto;width:100%;height:780px;overflow:visible;pointer-events:none; }
.lanyard-rope path { fill:none;stroke:#ff6a00;stroke-width:24;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(255,106,0,.92)) drop-shadow(0 8px 10px rgba(0,0,0,.52)); }
.lanyard-rope text { fill:#080808;stroke:none;paint-order:normal;font-family:var(--font-wujie);font-size:14px;font-weight:900;letter-spacing:2px; }
.badge-assembly { position:absolute;z-index:6;left:50%;top:220px;width:clamp(340px,25vw,460px);outline:0;transform-style:preserve-3d;transform-origin:50% -90px;will-change:transform;user-select:none;animation:badgeBreath 5s ease-in-out infinite; }
.badge-assembly.is-dragging { animation:none; }
.badge-clip { position:absolute;z-index:3;left:50%;top:-86px;width:92px;height:108px;transform:translateX(-50%); }
.badge-clip i { position:absolute;left:50%;top:0;width:54px;height:58px;transform:translateX(-50%);border-radius:15px 15px 10px 10px;background:linear-gradient(145deg,#d8e4e7,#536065 45%,#c5d2d5);box-shadow:inset 0 2px 3px rgba(255,255,255,.75),0 12px 20px rgba(0,0,0,.4); }
.badge-clip span { position:absolute;left:50%;bottom:0;width:64px;height:64px;transform:translateX(-50%);border:10px solid #8c999d;border-radius:50%; }
.badge-card { position:relative;aspect-ratio:.72;overflow:hidden;border:1px solid rgba(213,255,239,.34);border-radius:24px;background:linear-gradient(155deg,#1a2021,#0b0f10 58%,#11191a);color:#f1fff9;box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 -1px rgba(69,255,196,.09),0 38px 80px rgba(0,0,0,.56);transform-style:preserve-3d; }
.badge-card::after { content:"";position:absolute;z-index:6;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 32% 72%,rgba(27,230,211,.12)); }
.badge-topline { position:relative;z-index:7;display:flex;justify-content:space-between;padding:22px 24px 16px;color:#d9eee8;font-size:.56rem;font-weight:800;letter-spacing:.11em; }
.badge-photo { position:relative;z-index:2;height:57%;margin:0 18px;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:#0b1516; }
.badge-photo img { width:100%;height:100%;object-fit:cover;object-position:center 24%;filter:saturate(.9) contrast(1.05); }
.badge-photo::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,24,28,.24)); }
.badge-bolt { position:absolute;z-index:8;right:28px;top:46%;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#cbff34;color:#07110d;box-shadow:0 0 30px rgba(145,255,49,.42); }
.badge-bolt svg { width:29px;stroke-width:2.1; }
.badge-copy { position:relative;z-index:7;display:flex;flex-direction:column;gap:9px;padding:22px 24px 0; }
.badge-copy strong,.badge-copy span { display:block;color:transparent;background:linear-gradient(100deg,#0078ff,#16e6d3,#54ff88,#0078ff);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;animation:neonFlow 5s linear infinite; }
.badge-copy strong { font-family:var(--font-wujie);font-size:clamp(2rem,2.7vw,3.4rem);line-height:.85; }
.badge-copy span { font-size:clamp(.62rem,.72vw,.82rem);font-weight:900;letter-spacing:.025em; }
.badge-code { position:absolute;z-index:7;right:24px;bottom:18px;display:flex;gap:3px;height:25px;align-items:stretch; }
.badge-code i { width:3px;background:#b9d8d0; }.badge-code i:nth-child(2n){width:6px}.badge-code i:nth-child(3n){width:2px}

.about-c4d { position:absolute;z-index:1;pointer-events:none;opacity:1;mix-blend-mode:normal;transform:translate3d(var(--c4d-x,0),var(--c4d-y,0),0);transition:transform .8s var(--ease); }
.about-c4d img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 40px rgba(0,0,0,.38));animation:c4dFloatNew 7s ease-in-out infinite; }
.c4d-loop { left:-3.5vw;top:31%;width:clamp(180px,17vw,330px); }
.c4d-flower { right:2%;top:72%;width:clamp(76px,5.5vw,108px); }
.c4d-star { left:2%;top:20%;width:clamp(100px,8vw,150px); }
.c4d-spark { right:2%;top:14%;width:clamp(68px,4.8vw,92px); }
.c4d-flower img { animation-delay:-1.8s; }.c4d-star img{animation-delay:-3s}.c4d-spark img{animation-delay:-4.2s}

.work { width:var(--page);padding-inline:0;background:transparent; }
.work .section-heading .display-title { color:transparent;background:linear-gradient(100deg,#eaff3c,#57ff80,#26bfff,#eaff3c);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;animation:neonFlow 6s linear infinite; }
#work-title.is-visible .blur-letter {
  color:transparent;
  background:linear-gradient(100deg,#eaff3c,#57ff80,#26bfff,#eaff3c);
  background-size:280% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:letterBlurIn .8s var(--ease) forwards,neonFlow 6s linear infinite;
  animation-delay:var(--letter-delay,0ms),0ms;
}
.scroll-cue { color:#eaff3c; }
.scroll-cue svg { color:#eaff3c;stroke:currentColor; }
.project-copy { justify-content:flex-start; }
.project-copy small { margin-bottom:18px; }
.skills { background:transparent; }
.contact { width:var(--page);min-height:760px;margin:0 auto;padding:125px 0;background:transparent;color:var(--text);border-top:1px solid var(--line); }
.contact .eyebrow { color:#c9fff2; }
.contact-title em { -webkit-text-stroke-color:#e6fff8; }
.contact-details span { color:#73ac9e; }
.contact .button { border-color:rgba(215,243,255,.72);background:rgba(9,15,16,.56);color:#fff;backdrop-filter:blur(18px); }
.contact .button:hover { color:#06100d;background:#c9fff2; }
.contact-orbit { border-color:rgba(150,255,224,.15);box-shadow:0 0 0 8vw rgba(50,255,198,.018),0 0 0 16vw rgba(40,155,255,.018); }

.skill-card,.project-panel { --spot-x:50%;--spot-y:50%; }
.skill-card { overflow:hidden;transform-style:preserve-3d;transition:transform .38s var(--ease),background .35s,box-shadow .35s; }
.skill-card::before,.project-visual::before { content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:radial-gradient(circle 180px at var(--spot-x) var(--spot-y),rgba(205,255,242,.16),transparent 72%);opacity:0;transition:opacity .35s; }
.skill-card::after { content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;background:conic-gradient(from var(--glow-angle,0deg),transparent 0 38%,rgba(202,255,242,.8) 47%,rgba(82,172,255,.72) 53%,transparent 62%) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;pointer-events:none; }
.skill-card:hover::before,.project-visual:hover::before { opacity:1; }
.skill-card:hover { transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-8px); }
.project-panel:hover .project-visual { transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.018); }

.blur-letter { display:inline-block;opacity:0;filter:blur(16px);transform:translate3d(-10px,20px,0); }
.is-visible .blur-letter,.shutter-copy.is-visible .blur-letter { animation:letterBlurIn .8s var(--ease) forwards;animation-delay:var(--letter-delay,0ms); }
.reveal-item { transform:translate3d(-18px,34px,0); }

@media (min-width:1600px) {
  .hero-type { font-size:clamp(12rem,14vw,17rem); }
  .hero-content { width:100%; }
  .about-copy .display-title { font-size:clamp(5rem,5.2vw,6.5rem); }
  .project-panel { grid-template-columns:minmax(360px,.72fr) minmax(760px,1.28fr);min-height:min(76vh,820px); }
  .project-copy strong { max-width:720px;font-size:clamp(4rem,4.4vw,5.5rem); }
  .project-visual { min-height:560px; }
  .skills-grid { grid-template-columns:repeat(3,1fr); }
  .skill-card { min-height:350px; }
}

@media (max-width:1100px) {
  :root { --page:calc(100vw - 44px); }
  .about { min-height:0; }
  .about-grid { grid-template-columns:1fr; }
  .lanyard-scene { position:relative;top:auto;min-height:890px; }
  .c4d-star { left:auto;right:4vw;top:7%; }.c4d-spark{display:none}.c4d-loop{top:21%}.c4d-flower{top:46%}
  .shutter-copy { width:min(86vw,820px); }
}

@media (max-width:767px) {
  :root { --page:calc(100vw - 28px); }
  .site-header { width:calc(100vw - 20px);height:56px;min-height:56px;border-radius:29px; }
  .brand-mark { width:46px;height:46px;flex-basis:46px; }
  .hero-type { top:21%; }
  .hero-word small { margin-top:10px;font-size:.5rem; }
  .hero-word-tao { margin-top:18vh; }
  .marquee-cross { height:105px; }
  .marquee-cross .marquee { width:116%;left:-8%; }
  .marquee-a { top:22px;transform:rotate(4deg); }.marquee-b{top:26px;transform:rotate(-4deg)}
  .shutter-scene { min-height:92svh; }
  .shutter-copy { top:12%;width:86vw; }
  .shutter-copy > span { font-size:18vw; }.shutter-copy > strong{width:84vw;font-size:.62rem;margin-top:12px}
  .polaroid-trigger { top:41%;width:92vw;max-width:calc(100vw - 20px); }
  .content-card { margin-top:-3vh;border-radius:34px 34px 0 0; }
  .section { padding:100px 0; }
  .section-index { font-size:.72rem;margin-bottom:48px; }
  .lanyard-scene { min-height:700px; }
  .lanyard-anchor { top:-110px;transform:translateX(-50%) scale(.8); }
  .lanyard-rope { top:-105px;height:610px; }
  .badge-assembly { top:175px;width:min(82vw,350px); }
  .badge-copy strong { font-size:2.1rem; }.badge-copy span{font-size:.56rem}
  .badge-bolt { width:48px;height:48px;right:22px; }
  .about-c4d { opacity:.82; }
  .c4d-loop { left:-25vw;top:22%;width:190px; }.c4d-flower{right:-10vw;top:43%;width:105px}.c4d-star{right:-8vw;top:5%;width:110px}
  .work,.contact { width:var(--page); }
  .contact { padding:100px 0; }
}

@media (prefers-reduced-motion:reduce) {
  .about-c4d img,.polaroid-trigger { animation:none !important; }
  .blur-letter { opacity:1;filter:none;transform:none; }
}

/* 1920 canvas / 1400 content / 12-column layout */
:root {
  --page:min(1400px,calc(100vw - 80px));
  --grid-gap:24px;
}

html { background:#050606; }
body { width:min(100%,1920px);margin:0 auto; }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-thumb { border:1px solid #080a0a;border-radius:999px;background:linear-gradient(180deg,#d8ff35,#36f184,#22bfff); }

.site-header { width:var(--page); }
.hero-content { width:var(--page);margin-inline:auto; }
.hero-intro { width:max-content;max-width:min(560px,45vw); }
.hero-role { width:100%;justify-content:space-between; }
.hero-name-cn { width:100%; }

.shutter-scene { min-height:calc(100svh - 58px); }
.shutter-copy { left:0;right:0;top:6%;width:min(96%,1840px);margin-inline:auto;transform:none; }
.shutter-copy > span { width:100%;white-space:nowrap;font-size:clamp(5rem,12vw,14rem); }
.shutter-copy > strong { margin-top:12px; }
.polaroid-trigger { top:21%;width:clamp(330px,34vw,610px);max-width:calc(100vw - 112px); }
.shutter-guide { position:absolute;z-index:6;top:49%;width:clamp(140px,14vw,240px);pointer-events:none;filter:sepia(.7) saturate(.7) brightness(1.12);opacity:.92; }
.shutter-guide img { width:100%;height:auto; }
.shutter-guide-left { left:4vw;animation:guideLeft 1.7s ease-in-out infinite; }
.shutter-guide-right { right:4vw;animation:guideRight 1.7s ease-in-out infinite; }
@keyframes guideLeft { 0%,100%{transform:translateX(0)}50%{transform:translateX(16px)} }
@keyframes guideRight { 0%,100%{transform:translateX(0) rotate(180deg)}50%{transform:translateX(-16px) rotate(180deg)} }

.content-card { margin:0;padding:clamp(44px,5vw,90px) 0 110px;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none; }
.content-locked .content-card { height:0;min-height:0;margin:0;padding:0;overflow:hidden;border:0;opacity:0;transform:translateY(100vh); }
.content-card.card-raised { animation:cardLift 1.05s var(--ease) both; }
.page-card { width:var(--page);margin:clamp(36px,4vw,64px) auto;padding:clamp(76px,6vw,112px) clamp(42px,4vw,72px);scroll-margin-top:94px;overflow:visible;border:1px solid rgba(215,255,244,.15);border-radius:44px;background:rgba(8,12,12,.94);box-shadow:0 30px 90px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.09);opacity:.12;transform:translateY(18vh);transition:opacity .8s var(--ease),transform 1.05s var(--ease),box-shadow .8s var(--ease); }
.page-card.card-visible { opacity:1;transform:translateY(0);box-shadow:0 40px 110px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.11); }
.page-card:first-of-type { margin-top:0; }

.about { min-height:1120px; }
.about-grid { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap); }
.lanyard-scene { grid-column:1 / span 5; }
.about-copy { grid-column:6 / -1; }
.about .display-title {
  color:#fff;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  animation:none;
  font-size:clamp(2.2rem,2.6vw,3.2rem);
  line-height:1.08;
}
.about .display-title .title-fill {
  display:inline;
  min-height:1em;
  color:#fff;
  background:none;
  -webkit-text-stroke:0;
  animation:none;
  font-size:1.18em;
}
.about .display-title em {
  display:inline;
  min-height:1em;
  color:transparent;
  background:linear-gradient(100deg,#65ff7c,#18e6af,#20bfff,#405dff,#65ff7c);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:0;
  animation:neonFlow 5s linear infinite;
}
.about .display-title.is-visible .blur-letter {
  color:transparent;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  animation:letterBlurIn .8s var(--ease) forwards;
  animation-delay:var(--letter-delay,0ms);
}
.about .display-title.is-visible .title-fill .blur-letter { color:#fff; }

.badge-card { border-color:rgba(7,27,17,.2);border-radius:26px;background:linear-gradient(155deg,#f2ffd8 0%,#d6ff64 48%,#4af09e 100%);color:#07110b;box-shadow:inset 0 1px rgba(255,255,255,.8),0 38px 80px rgba(0,0,0,.52); }
.badge-card::after { background:linear-gradient(135deg,rgba(255,255,255,.38),transparent 38% 72%,rgba(0,94,52,.1)); }
.badge-topline { color:#07110b;border-bottom:1px solid rgba(7,17,11,.16); }
.badge-photo { height:52%;border:2px solid #07110b;border-radius:12px;box-shadow:6px 6px 0 rgba(7,17,11,.18); }
.badge-photo img { filter:saturate(.88) contrast(1.04); }
.badge-bolt { top:43%;right:25px;background:#07110b;color:#d9ff40;box-shadow:0 8px 24px rgba(0,0,0,.24); }
.badge-sticker { position:absolute;z-index:9;left:25px;top:45%;display:grid;place-items:center;width:88px;aspect-ratio:1;border:2px solid rgba(255,255,255,.75);border-radius:50%;background:conic-gradient(from 35deg,#7affdc,#f8ff57,#ff91dc,#70a7ff,#7affdc);color:#07110b;text-align:center;transform:rotate(-9deg);box-shadow:0 10px 24px rgba(0,0,0,.2),inset 0 0 14px rgba(255,255,255,.74); }
.badge-sticker strong { display:block;font-family:var(--font-wujie);font-size:1.65rem;line-height:.8; }
.badge-sticker span { font-size:.42rem;font-weight:900;letter-spacing:.08em; }
.badge-copy { gap:8px;padding:22px 24px 0; }
.badge-copy strong,.badge-copy span { color:#07110b;background:none;-webkit-background-clip:initial;background-clip:initial;animation:none; }
.badge-copy strong { color:#07110b;font-size:clamp(1.9rem,2.45vw,3rem);-webkit-text-stroke:0;text-shadow:none; }
.badge-id { position:absolute;z-index:8;left:24px;bottom:19px;display:flex;flex-direction:column;gap:3px;color:#07110b;font-size:.45rem;letter-spacing:.08em; }
.badge-id b { font-size:.54rem; }
.badge-code { position:absolute;z-index:8;right:22px;bottom:16px;display:block;width:132px;height:auto;color:#07110b; }
.badge-code div { display:flex;align-items:stretch;justify-content:flex-end;gap:2px;height:31px; }
.badge-code i { display:block;width:2px;height:100%;background:#07110b; }
.badge-code i:nth-child(2n) { width:4px; }.badge-code i:nth-child(3n){width:1px}.badge-code i:nth-child(5n){width:6px}
.badge-code small { display:block;margin-top:3px;font-size:.37rem;letter-spacing:.14em;text-align:right; }

.work,.skills,.contact { width:var(--page);background:rgba(8,12,12,.94);color:var(--text); }
.section-heading,.skills-heading { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:end; }
.section-heading h2,.skills-heading h2 { grid-column:1 / span 8; }
.section-heading p,.skills-heading p { grid-column:10 / -1; }
.project-panel { grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap); }
.project-copy { grid-column:1 / span 4;order:initial; }
.project-visual { grid-column:5 / -1;order:initial; }
.project-panel:nth-child(even) .project-copy { grid-column:9 / -1;order:initial; }
.project-panel:nth-child(even) .project-visual { grid-column:1 / span 8;order:initial; }
.skills-grid { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;border:0; }
.skill-card {
  grid-column:span 6;
  min-height:310px;
  padding:26px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(202,255,242,.13);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(20,28,27,.96),rgba(8,12,12,.98));
  transform-style:preserve-3d;
  transition:transform .45s var(--ease),opacity .4s var(--ease),filter .4s var(--ease),border-color .4s,background .4s,box-shadow .45s;
}
.skill-card:nth-child(1),.skill-card:nth-child(5) { grid-column:span 7;min-height:350px;background:radial-gradient(circle at 8% 8%,rgba(111,255,80,.1),transparent 34%),linear-gradient(145deg,#13201c,#080c0b 70%); }
.skill-card:nth-child(2),.skill-card:nth-child(6) { grid-column:span 5; }
.skill-card:nth-child(3) { grid-column:span 5; }
.skill-card:nth-child(4) { grid-column:span 7;min-height:350px;background:radial-gradient(circle at 92% 8%,rgba(38,191,255,.11),transparent 34%),linear-gradient(145deg,#101b20,#080b0d 70%); }
.skill-card > * { position:relative;z-index:2; }
.skill-card::before { z-index:1;background:radial-gradient(circle 230px at var(--spot-x) var(--spot-y),rgba(190,255,232,.18),transparent 70%);opacity:.4; }
.skill-card::after { opacity:.32; }
.skill-icon { display:grid;place-items:center;width:58px;height:58px;margin-bottom:clamp(58px,6vw,94px);border:1px solid rgba(214,255,244,.18);border-radius:50%;background:rgba(218,255,244,.05);color:#aaff53;box-shadow:inset 0 1px rgba(255,255,255,.1);transition:transform .5s var(--ease),background .4s,color .4s; }
.skill-card:nth-child(3n+2) .skill-icon,.skill-card:nth-child(4) .skill-icon { color:#4bdcff; }
.skill-icon svg { width:27px;margin:0;color:inherit;stroke-width:1.9; }
.skill-copy { max-width:520px; }
.skill-card h3 { margin:0 0 12px;font-size:clamp(1.35rem,1.9vw,2.15rem);line-height:1.05;letter-spacing:0; }
.skill-card p { max-width:46ch;margin:0;color:#929d98;font-size:.76rem;line-height:1.8; }
.skill-no { right:24px;top:18px;color:rgba(232,255,246,.12);font-family:var(--font-wujie);font-size:clamp(3.6rem,5.2vw,6rem);font-weight:900;line-height:1;transition:color .4s,transform .5s var(--ease); }
.skill-tags { display:flex;flex-wrap:wrap;gap:7px;margin-top:24px; }
.skill-tags span { padding:7px 10px;border:1px solid rgba(220,255,245,.12);border-radius:999px;background:rgba(255,255,255,.025);color:#a9b5b0;font-size:.58rem;letter-spacing:.06em;transform:translateY(4px);transition:transform .4s var(--ease),color .4s,border-color .4s,background .4s; }
.skills-grid:has(.skill-card:hover) .skill-card:not(:hover) { opacity:.52;filter:saturate(.55);transform:scale(.985); }
.skill-card:hover { z-index:2;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-7px);border-color:rgba(154,255,199,.38);background:linear-gradient(145deg,#172722,#0a1110 72%);box-shadow:0 28px 75px rgba(0,0,0,.38),inset 0 1px rgba(216,255,244,.12); }
.skill-card:hover::before { opacity:1; }
.skill-card:hover .skill-icon { transform:translate3d(4px,-5px,22px) rotate(8deg);background:#b8ff4d;color:#07110d; }
.skill-card:hover .skill-no { color:rgba(190,255,104,.24);transform:translate3d(-4px,3px,18px); }
.skill-card:hover .skill-tags span { transform:translateY(0);color:#dffcf2;border-color:rgba(157,255,216,.25);background:rgba(129,255,198,.06); }
.skill-card:active { transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-3px) scale(.99); }
.tool-belt { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;margin-top:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.tool-belt span { padding:14px 8px;border:0;border-right:1px solid var(--line);border-radius:0;color:#7f8b87;font-size:.54rem;text-align:center; }
.tool-belt span:last-child { border-right:0; }
.contact { min-height:760px; }
.contact .eyebrow { color:#c9fff2; }
.contact-title { color:#fff; }
.contact-title em { -webkit-text-stroke-color:#e6fff8; }
.contact .fluid-button { border:0;background:transparent;color:#07110d;backdrop-filter:none; }
.contact .fluid-button:hover { background:transparent;color:#07110d;box-shadow:0 0 0 1px rgba(235,255,196,.62),0 0 28px rgba(111,255,66,.52),0 22px 48px rgba(0,0,0,.34); }
.contact-row { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:end; }
.contact-row > .button { grid-column:1 / span 3;justify-self:start; }
.contact-details { grid-column:8 / -1;justify-self:end; }
.contact-orbit { border-color:rgba(150,255,224,.15); }

@media (max-width:1100px) {
  :root { --page:calc(100vw - 40px);--grid-gap:18px; }
  .about-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .lanyard-scene { grid-column:1 / span 6; }
  .about-copy { grid-column:7 / -1; }
  .project-copy,.project-panel:nth-child(even) .project-copy { grid-column:1 / -1; }
  .project-visual,.project-panel:nth-child(even) .project-visual { grid-column:1 / -1; }
  .skills-grid .skill-card { grid-column:span 6;min-height:320px; }
  .tool-belt { grid-template-columns:repeat(4,1fr); }
  .tool-belt span:nth-child(4) { border-right:0; }
  .tool-belt span:nth-child(-n+4) { border-bottom:1px solid var(--line); }
}

@media (max-width:767px) {
  :root { --page:calc(100vw - 20px);--grid-gap:12px; }
  body { width:100%; }
  .site-header { width:calc(100vw - 20px); }
  .menu-toggle { display:grid;background:linear-gradient(110deg,#d7ff38,#36f184,#20bfff,#d7ff38);background-size:300% 100%;animation:neonFlow 5s linear infinite;box-shadow:0 0 24px rgba(41,238,179,.25); }
  .menu-toggle span { background:#06120d; }
  .primary-nav a[href="#about"] { order:1; }
  .primary-nav a[href="#work"] { order:2; }
  .primary-nav a[href="#skills"] { order:3; }
  .primary-nav a[href="#contact"] { order:4; }
  .primary-nav .resume-link { order:5; }
  .hero-content { width:calc(100vw - 40px); }
  .hero-intro { width:max-content;max-width:calc(100vw - 40px); }
  .hero-role { justify-content:flex-start;font-size:clamp(.65rem,3.1vw,.78rem);letter-spacing:.04em; }
  .hero-name-cn { width:100%;max-width:none; }
  .shutter-scene { min-height:calc(100svh - 84px); }
  .shutter-copy { top:10%; }
  .shutter-copy > span { font-size:clamp(2.35rem,11vw,3rem); }
  .shutter-copy > strong { width:88vw;font-size:.58rem; }
  .polaroid-trigger { top:29%;width:73vw;max-width:calc(100vw - 48px); }
  .shutter-guide { display:none; }
  .shutter-guide-left { left:1vw; }.shutter-guide-right{right:1vw}
  .content-card { padding:22px 0 70px; }
  .content-locked .content-card { padding:0; }
  .page-card { width:var(--page);margin:22px auto;padding:76px 20px;border-radius:28px;transform:translateY(14vh); }
  .about { min-height:0; }
  .about-grid { display:block; }
  .lanyard-scene { min-height:700px; }
  .about-copy { margin-top:32px; }
  .about .display-title { font-size:clamp(2rem,10vw,3rem);line-height:1.18; }
  .about-c4d { display:none; }
  .section-heading,.skills-heading { display:block; }
  .project-panel { display:flex; }
  .skills-grid { grid-template-columns:1fr;gap:10px; }
  .skills-grid .skill-card { grid-column:1 / -1;min-height:300px;padding:22px; }
  .skill-icon { margin-bottom:62px; }
  .skill-no { font-size:4.4rem; }
  .tool-belt { grid-template-columns:repeat(2,1fr); }
  .tool-belt span:nth-child(2n) { border-right:0; }
  .tool-belt span:nth-child(-n+6) { border-bottom:1px solid var(--line); }
  .contact { min-height:680px; }
  .contact-row { display:block; }
  .contact-details { margin-top:40px; }
  .site-footer { min-height:0;padding:12px 20px;gap:10px; }
}

@media (prefers-reduced-motion:reduce) {
  .page-card { opacity:1;transform:none; }
  .shutter-guide { animation:none; }
}

/* Selected work: asymmetric editorial index with one interaction language. */
.work .section-heading { display:block;margin-bottom:clamp(42px,5vw,70px); }
.work .section-heading h2 { max-width:920px; }
.work .section-heading p { max-width:46ch;margin:20px 0 0;font-size:.82rem; }
.work-showcase {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  border:0;
  perspective:1500px;
}
.project-panel {
  --project-accent:#baff45;
  grid-column:span 6;
  position:relative;
  display:block;
  width:100%;
  height:clamp(430px,31vw,560px);
  min-height:0;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(207,255,239,.14);
  border-radius:24px;
  background:#0b0f0e;
  color:#f4fff9;
  box-shadow:inset 0 1px rgba(255,255,255,.07);
  transform:translateZ(0);
  transition:transform .55s var(--ease),opacity .45s var(--ease),filter .45s var(--ease),border-color .4s,box-shadow .55s;
}
.project-panel[data-project="ali"],
.project-panel[data-project="light"] { grid-column:span 8; }
.project-panel[data-project="ui"],
.project-panel[data-project="illustration"] { grid-column:span 4; }
.project-panel[data-project="medical"] { grid-column:span 7; }
.project-panel[data-project="other"] { grid-column:span 5; }
.project-panel[data-project="ui"],
.project-panel[data-project="illustration"] { --project-accent:#4de4ff; }
.project-panel[data-project="light"] { --project-accent:#d8ff3f; }
.project-panel[data-project="medical"] { --project-accent:#79ffcf; }

.project-visual,
.project-panel:nth-child(even) .project-visual {
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  min-height:0;
  overflow:hidden;
  border:0;
  border-radius:inherit;
  background-color:#111514;
  transform:scale(1.025);
  transition:transform .8s var(--ease),filter .65s var(--ease);
}
.project-visual::before {
  z-index:5;
  opacity:.28;
  background:radial-gradient(circle 260px at var(--spot-x) var(--spot-y),rgba(220,255,246,.22),transparent 70%);
}
.project-visual::after {
  z-index:3;
  background:linear-gradient(180deg,rgba(2,7,6,.03) 18%,rgba(2,7,6,.18) 48%,rgba(2,7,6,.94) 100%);
}
.project-visual img { transform:scale(1.015);filter:saturate(.95) contrast(1.04); }
.project-copy,
.project-panel:nth-child(even) .project-copy {
  position:absolute;
  z-index:6;
  inset:auto 0 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:0;
  padding:clamp(24px,2.5vw,38px);
  color:#f4fff9;
  pointer-events:none;
}
.project-copy small { margin:0 0 14px;color:var(--project-accent);font-size:.61rem;font-weight:800;letter-spacing:.16em; }
.project-copy strong { display:block;max-width:90%;font-size:clamp(2.4rem,3.45vw,4.6rem);line-height:.95;transform:translateY(4px);transition:transform .55s var(--ease); }
.project-copy em { max-width:86%;margin-top:16px;color:rgba(235,247,241,.72);font-size:.7rem;line-height:1.65;letter-spacing:.06em; }
.project-panel[data-project="ui"] .project-copy strong,
.project-panel[data-project="illustration"] .project-copy strong,
.project-panel[data-project="other"] .project-copy strong { font-size:clamp(2rem,2.7vw,3.45rem); }
.project-index {
  z-index:7;
  left:clamp(20px,2vw,30px);
  top:clamp(18px,1.8vw,28px);
  color:rgba(237,255,248,.46);
  font-family:var(--font-wujie);
  font-size:clamp(3rem,4.8vw,6rem);
  font-weight:900;
  line-height:1;
  letter-spacing:0;
  transition:color .45s,transform .55s var(--ease);
}
.project-visual u {
  z-index:7;
  right:clamp(18px,1.8vw,26px);
  top:clamp(18px,1.8vw,26px);
  width:50px;
  height:50px;
  border-color:rgba(230,255,247,.38);
  background:rgba(5,12,11,.24);
  color:#effff8;
  box-shadow:inset 0 1px rgba(255,255,255,.12);
}
.visual-ali { background:radial-gradient(circle at 34% 26%,#1b6155,transparent 32%),linear-gradient(145deg,#080b0b,#12322d 55%,#071518); }
.visual-ali b { color:#d9ff42;filter:drop-shadow(0 20px 40px rgba(0,0,0,.25)); }
.visual-ali i { padding:8px 0;border:0;border-bottom:1px solid rgba(225,255,245,.48);border-radius:0;background:none;color:#eafff6; }
.visual-ali i:nth-of-type(1) { left:auto;right:8%;top:16%; }
.visual-ali i:nth-of-type(2) { left:auto;right:8%;top:25%;bottom:auto; }
.visual-ali i:nth-of-type(3) { left:auto;right:8%;top:34%;bottom:auto; }
.visual-other img { object-position:center; }

@media (hover:hover) and (pointer:fine) {
  .work-showcase:has(.project-panel:hover) .project-panel:not(:hover) { opacity:.5;filter:saturate(.45) brightness(.78);transform:scale(.988); }
  .project-panel:hover { z-index:3;border-color:color-mix(in srgb,var(--project-accent) 62%,transparent);box-shadow:0 28px 80px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.12);transform:translateY(-8px) scale(1.006); }
  .project-panel:hover .project-visual { transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.07);filter:saturate(1.08); }
  .project-panel:hover .project-visual::before { opacity:1; }
  .project-panel:hover .project-copy strong { transform:translateY(0); }
  .project-panel:hover .project-index { color:var(--project-accent);transform:translate3d(4px,-3px,24px); }
  .project-panel:hover .project-visual u { color:#07110d;background:var(--project-accent);transform:translate(3px,-3px) scale(1.06); }
}
.project-panel:focus-visible { outline:2px solid var(--project-accent);outline-offset:5px; }
.project-panel:active { transform:translateY(-3px) scale(.994); }

@media (max-width:1100px) {
  .work-showcase { gap:12px; }
  .project-panel,
  .project-panel[data-project] { grid-column:span 6;height:clamp(420px,54vw,540px); }
  .project-panel[data-project="ali"],
  .project-panel[data-project="light"] { grid-column:1 / -1;height:clamp(460px,58vw,620px); }
  .project-copy strong,
  .project-panel[data-project] .project-copy strong { font-size:clamp(2.15rem,4.7vw,3.8rem); }
}

@media (max-width:767px) {
  .work .section-heading p { margin-top:18px;font-size:.76rem; }
  .work-showcase { display:grid;grid-template-columns:1fr;gap:12px; }
  .project-panel,
  .project-panel[data-project] { grid-column:1 / -1;display:block;height:clamp(390px,112vw,510px);padding:0;border-radius:20px; }
  .project-panel[data-project="ali"],
  .project-panel[data-project="light"] { height:clamp(410px,116vw,530px); }
  .project-copy,.project-panel:nth-child(even) .project-copy { padding:24px 20px; }
  .project-copy strong,
  .project-panel[data-project] .project-copy strong { max-width:96%;font-size:clamp(2rem,9vw,2.85rem);line-height:1; }
  .project-copy em { max-width:95%;margin-top:12px;font-size:.64rem; }
  .project-index { left:19px;top:18px;font-size:3.4rem; }
  .project-visual u { right:17px;top:17px;width:44px;height:44px; }
  .visual-ali b { font-size:18vw; }
}

@media (prefers-reduced-motion:reduce) {
  .project-panel,.project-visual,.project-copy strong,.project-index,.project-visual u { transition:none; }
  .project-panel,.project-panel:hover,.project-panel:hover .project-visual { transform:none; }
  .work-showcase:has(.project-panel:hover) .project-panel:not(:hover) { opacity:1;filter:none;transform:none; }
}

/* Real project media, ordered by the portfolio folders. */
.project-panel {
  --card-radius:36px;
  --action-size:52px;
  --action-inset:10px;
  border-radius:var(--card-radius);
}
.project-panel[data-project="ali"],
.project-panel[data-project="light"] { grid-column:span 8; }
.project-panel[data-project="ui"],
.project-panel[data-project="illustration"] { grid-column:span 4; }
.project-panel[data-project="medical"] { grid-column:1 / -1;height:clamp(500px,34vw,650px); }
.project-panel[data-project="three-d"] { grid-column:span 7;--project-accent:#55e7ff; }
.project-panel[data-project="other"] { grid-column:span 5; }
.project-panel[data-project="three-d"] .project-copy strong,
.project-panel[data-project="other"] .project-copy strong { font-size:clamp(2.2rem,3vw,3.9rem); }
.project-visual img { transform:scale(1.01); }
.project-visual u {
  top:var(--action-inset);
  right:var(--action-inset);
  width:var(--action-size);
  height:var(--action-size);
}
.visual-ui img { object-position:center 34%; }
.visual-light img { object-position:center 56%; }
.visual-medical img { object-position:center; }
.visual-three-d img { object-position:center 40%; }
.visual-other img { object-position:center; }

/* Contact: one editorial stage with an interactive contact index. */
.contact {
  min-height:780px;
  padding:clamp(78px,7vw,120px) clamp(24px,4vw,70px);
  justify-content:flex-start;
  background:
    linear-gradient(135deg,rgba(44,255,181,.045),transparent 32%),
    rgba(8,12,12,.96);
}
.contact-orbit { display:none; }
.contact .eyebrow { position:relative;z-index:2;margin-bottom:clamp(34px,4vw,58px);color:#bfffe9; }
.contact-stage {
  --spot-x:68%;
  --spot-y:44%;
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--grid-gap);
  min-height:600px;
  padding:clamp(30px,3vw,48px) 0 20px;
  overflow:hidden;
  border-top:1px solid rgba(210,255,241,.18);
  border-bottom:1px solid rgba(210,255,241,.18);
}
.contact-stage::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle 360px at var(--spot-x) var(--spot-y),rgba(75,255,200,.1),transparent 72%);
  pointer-events:none;
}
.contact-manifesto { position:relative;z-index:1;grid-column:1 / span 8;align-self:end;padding-bottom:24px; }
.contact-availability { display:flex;align-items:center;gap:10px;margin:0 0 25px;color:#a5b7b0;font-size:.64rem;letter-spacing:.1em; }
.contact-availability i { width:8px;height:8px;border-radius:50%;background:#baff45;box-shadow:0 0 16px rgba(186,255,69,.8);animation:contactPulse 2.2s ease-in-out infinite; }
.contact-title {
  margin:0;
  color:#f5fff9;
  font-family:var(--font-wujie),Inter,"SF Pro Display",sans-serif;
  font-size:clamp(4.3rem,7.5vw,9.2rem);
  font-weight:900;
  line-height:.82;
  letter-spacing:0;
}
.contact-title em {
  display:inline-block;
  color:transparent;
  font-family:inherit;
  font-style:normal;
  font-weight:inherit;
  -webkit-text-stroke:0;
  background:linear-gradient(100deg,#dfff31,#50ff89,#31dcff,#dfff31);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:neonFlow 6s linear infinite;
}
.contact-note { max-width:46ch;margin:28px 0 30px;color:#91a19b;font-size:.76rem;line-height:1.8;letter-spacing:.05em; }
.contact .fluid-button { min-width:158px;border:0;background:transparent;color:#07110d;backdrop-filter:none; }
.contact-directory { position:relative;z-index:2;grid-column:9 / -1;align-self:end;padding-bottom:24px; }
.contact-link {
  --spot-x:50%;
  --spot-y:50%;
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  width:100%;
  min-height:116px;
  padding:20px 0;
  overflow:hidden;
  border:0;
  border-bottom:1px solid rgba(213,255,243,.16);
  background:transparent;
  color:#effff8;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:padding .45s var(--ease),border-color .35s,background .35s;
}
.contact-link:first-child { border-top:1px solid rgba(213,255,243,.16); }
.contact-link::before { content:"";position:absolute;inset:0;background:radial-gradient(circle 180px at var(--spot-x) var(--spot-y),rgba(121,255,211,.12),transparent 72%);opacity:0;transition:opacity .35s; }
.contact-link span,.contact-link strong,.contact-link b { position:relative;z-index:1; }
.contact-link span { grid-column:1 / -1;margin-bottom:12px;color:#7e9189;font-size:.55rem;font-weight:700;letter-spacing:.14em; }
.contact-link strong { min-width:0;font-family:var(--font-wujie),Inter,sans-serif;font-size:clamp(1.05rem,1.45vw,1.65rem);line-height:1;letter-spacing:0;overflow-wrap:anywhere; }
.contact-link b { display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(213,255,243,.24);border-radius:50%;color:#c9fff0;font-size:.62rem;font-weight:800;transition:transform .4s var(--ease),background .35s,color .35s,box-shadow .35s; }
.contact-link:hover,.contact-link:focus-visible { padding-left:14px;padding-right:6px;border-color:rgba(118,255,211,.52);background:rgba(124,255,214,.035);outline:none; }
.contact-link:hover::before,.contact-link:focus-visible::before { opacity:1; }
.contact-link:hover b,.contact-link:focus-visible b,.contact-link.is-copied b { color:#07110d;background:#baff45;box-shadow:0 0 24px rgba(128,255,113,.42);transform:rotate(8deg) scale(1.08); }
.contact-link.is-copied b { font-size:0; }
.contact-link.is-copied b::after { content:"OK";font-size:.64rem; }
.contact-feedback { min-height:20px;margin:12px 0 0;color:#baff45;font-size:.6rem;letter-spacing:.08em;text-align:right; }
@keyframes contactPulse { 50% { opacity:.45;transform:scale(.72); } }

@media (max-width:1100px) {
  .project-panel[data-project="medical"] { grid-column:1 / -1;height:clamp(460px,58vw,620px); }
  .project-panel[data-project="three-d"],
  .project-panel[data-project="other"] { grid-column:span 6; }
  .contact-manifesto { grid-column:1 / span 7; }
  .contact-directory { grid-column:8 / -1; }
  .contact-title { font-size:clamp(3.8rem,8vw,6.5rem); }
}

@media (max-width:767px) {
  .project-panel,
  .project-panel[data-project] { --card-radius:28px;--action-size:44px;--action-inset:6px;grid-column:1 / -1; }
  .project-panel[data-project="medical"] { height:clamp(410px,116vw,530px); }
  .project-panel[data-project="three-d"] .project-copy strong,
  .project-panel[data-project="other"] .project-copy strong { font-size:clamp(2rem,9vw,2.85rem); }
  .contact { min-height:0;padding:72px 20px 60px; }
  .contact .eyebrow { margin-bottom:30px; }
  .contact-stage { display:block;min-height:0;padding:30px 0 18px;overflow:visible; }
  .contact-manifesto { padding:0; }
  .contact-availability { align-items:flex-start;font-size:.58rem;line-height:1.6; }
  .contact-availability i { flex:0 0 auto;margin-top:2px; }
  .contact-title { font-size:clamp(3.25rem,17vw,5.1rem);line-height:.86; }
  .contact-note { margin:24px 0 26px;font-size:.7rem; }
  .contact-directory { margin-top:56px;padding:0; }
  .contact-link { min-height:96px; }
  .contact-link strong { font-size:clamp(1rem,5vw,1.35rem); }
}

@media (prefers-reduced-motion:reduce) {
  .contact-title em,.contact-availability i { animation:none; }
  .contact-link,.contact-link b { transition:none; }
}

/* Final portfolio pass: the image is the frame, the panel stays visually quiet. */
.work-showcase { align-items:stretch; }
.project-panel {
  --card-radius:36px;
  --action-size:52px;
  --action-inset:10px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  opacity:.88;
}
.project-panel[data-project="ali"],
.project-panel[data-project="light"],
.project-panel[data-project="home"] { grid-column:span 8; }
.project-panel[data-project="ui"],
.project-panel[data-project="illustration"],
.project-panel[data-project="other"] { grid-column:span 4; }
.project-panel[data-project="medical"] { grid-column:1 / -1; height:clamp(500px,34vw,650px); }
.project-panel[data-project="three-d"] { grid-column:span 7; }
.project-panel[data-project="home"] { --project-accent:#8bff42; }
.project-panel[data-project="other"] { --project-accent:#ff7af2; }
.project-visual {
  border-radius:var(--card-radius);
  border:0;
  background:#080c0c;
}
.project-visual img {
  filter:brightness(.27) saturate(.52) contrast(1.04);
  transition:filter .55s var(--ease), transform .8s var(--ease);
}
.project-copy { opacity:.48; transition:opacity .45s var(--ease); }
.project-copy strong,
.project-copy em { text-shadow:0 4px 22px rgba(0,0,0,.9); }
.project-index {
  color:rgba(241,255,249,.54);
  text-shadow:0 6px 26px rgba(0,0,0,.96),0 1px 4px rgba(0,0,0,.9);
}
.project-visual u {
  display:grid;
  place-items:center;
  border:1px solid rgba(230,255,247,.34);
  border-radius:50%;
  background:rgba(7,13,12,.5);
  box-shadow:0 0 0 0 rgba(186,255,69,0),inset 0 1px rgba(255,255,255,.16);
  transition:transform .55s var(--ease),color .35s,background .35s,box-shadow .45s;
}
.project-visual u::before {
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid color-mix(in srgb,var(--project-accent) 70%,transparent);
  border-radius:50%;
  opacity:0;
  transform:scale(.72);
  transition:opacity .4s,transform .55s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  .project-panel:hover { opacity:1; transform:translateY(-8px) scale(1.006); }
  .project-panel:hover .project-visual img { filter:brightness(1) saturate(1.08) contrast(1.04); transform:scale(1.055); }
  .project-panel:hover .project-copy { opacity:1; }
  .project-panel:hover .project-visual u {
    color:#07110d;
    background:var(--project-accent);
    box-shadow:0 0 22px color-mix(in srgb,var(--project-accent) 62%,transparent);
    transform:translate(3px,-3px) rotate(45deg) scale(1.08);
  }
  .project-panel:hover .project-visual u::before { opacity:1; transform:scale(1); animation:projectPulse 1.7s ease-in-out infinite; }
  .work-showcase:has(.project-panel:hover) .project-panel:not(:hover) { opacity:.34; }
}
@keyframes projectPulse { 50% { transform:scale(1.16); opacity:.35; } }

.contact-title { display:flex; flex-direction:column; align-items:flex-start; gap:.08em; }
.contact-title > span,
.contact-title > em { display:block; white-space:nowrap; }
.contact-title > span { color:#f5fff9; }
.contact-title > em {
  position:relative;
  color:transparent;
  -webkit-text-stroke:2px transparent;
  background:linear-gradient(100deg,#dfff31,#50ff89,#31dcff,#dfff31);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:neonFlow 6s linear infinite;
}
.contact-title > em::after {
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:#080c0c;
  transform:scale(.985,.9);
  transform-origin:center;
  pointer-events:none;
}
.contact-directory,
.contact-link,
.contact-link strong { font-family:Arial,"Microsoft YaHei",sans-serif; font-weight:800; }
.contact .fluid-button:hover::before { animation-duration:2.2s; }

.dialog-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:52px;
}
.dialog-gallery figure { margin:0; min-width:0; }
.dialog-gallery img,
.dialog-gallery video {
  display:block;
  width:100%;
  max-height:520px;
  object-fit:cover;
  border-radius:16px;
  background:#080b0b;
}
.dialog-gallery video { aspect-ratio:16/9; }
.dialog-gallery figcaption { margin-top:9px; color:#96a9a1; font-size:.62rem; letter-spacing:.06em; }

@media (max-width:1100px) {
  .project-panel[data-project="home"] { grid-column:span 6; }
  .project-panel[data-project="other"] { grid-column:span 6; }
}
@media (max-width:767px) {
  .project-panel[data-project="home"],
  .project-panel[data-project="other"] { grid-column:1 / -1; }
  .dialog-gallery { grid-template-columns:1fr; }
  .contact-title { font-size:clamp(2.25rem,10.5vw,4.4rem); }
  .contact-title > em { -webkit-text-stroke-width:1.5px; }
}
@media (prefers-reduced-motion:reduce) {
  .project-panel:hover .project-visual u::before { animation:none; }
  .contact-title > em { animation:none; }
}

/* Real media stays visible; interaction replaces the old overlay mask. */
.project-visual::before,
.project-visual::after { display:none; }
.project-visual img { filter:brightness(.56) saturate(.74) contrast(1.03); }

.dialog-gallery {
  --media-radius:28px;
  --media-action:48px;
  --media-inset:8px;
  gap:20px;
}
.media-card {
  position:relative;
  display:grid;
  grid-template-rows:minmax(220px,360px) auto;
  min-width:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(200,255,238,.15);
  border-radius:var(--media-radius);
  background:#0a0f0e;
  color:#f4fff9;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.06);
  transition:transform .48s var(--ease),border-color .38s,box-shadow .48s;
}
.media-card > img,
.media-card > video {
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  object-position:top center;
  border:0;
  border-radius:calc(var(--media-radius) - 1px) calc(var(--media-radius) - 1px) 0 0;
  background:#080b0b;
  filter:saturate(.86) brightness(.76);
  transition:filter .48s var(--ease),transform .7s var(--ease);
}
.media-card-meta {
  position:relative;
  display:grid;
  grid-template-columns:1fr var(--media-action);
  align-items:end;
  min-height:118px;
  padding:22px var(--media-inset) var(--media-inset) 22px;
}
.media-card-meta small {
  grid-column:1 / -1;
  margin-bottom:10px;
  color:#79ffd3;
  font-size:.55rem;
  font-weight:800;
  letter-spacing:.14em;
}
.media-card-meta strong {
  align-self:center;
  padding-right:15px;
  font-family:var(--font-shuhei),Arial,"Microsoft YaHei",sans-serif;
  font-size:clamp(.96rem,1.2vw,1.2rem);
  line-height:1.35;
  letter-spacing:.04em;
}
.media-card-meta i {
  display:grid;
  place-items:center;
  width:var(--media-action);
  height:var(--media-action);
  border:1px solid rgba(207,255,242,.26);
  border-radius:50%;
  color:#cffff0;
  font-family:Arial,sans-serif;
  font-size:1.05rem;
  font-style:normal;
  transition:transform .45s var(--ease),background .35s,color .35s,box-shadow .4s;
}
.media-card:focus-visible { outline:2px solid #79ffd3; outline-offset:4px; }
@media (hover:hover) and (pointer:fine) {
  .media-card:hover {
    border-color:rgba(121,255,211,.52);
    box-shadow:0 22px 58px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.1);
    transform:translateY(-7px);
  }
  .media-card:hover > img,
  .media-card:hover > video { filter:saturate(1.05) brightness(1);transform:scale(1.025); }
  .media-card:hover .media-card-meta i { color:#07110d;background:#79ffd3;box-shadow:0 0 22px rgba(121,255,211,.38);transform:rotate(45deg) scale(1.06); }
}
.media-card:active { transform:translateY(-2px) scale(.985); }

.media-viewer {
  width:min(calc(100% - 32px),1400px);
  height:calc(100dvh - 32px);
  max-width:none;
  max-height:none;
  padding:0;
  overflow:auto;
  border:1px solid rgba(210,255,243,.18);
  border-radius:30px;
  background:#060908;
  color:#f5fff9;
  box-shadow:0 38px 120px rgba(0,0,0,.82);
}
.media-viewer::backdrop { background:rgba(0,0,0,.86);backdrop-filter:blur(14px); }
.media-viewer-close {
  position:fixed;
  z-index:4;
  top:32px;
  right:max(32px,calc((100vw - 1336px)/2));
  width:52px;
  height:52px;
  border:1px solid rgba(220,255,245,.35);
  border-radius:50%;
  background:rgba(8,14,12,.82);
  color:#f3fff9;
  backdrop-filter:blur(18px);
}
.media-viewer-close:hover { color:#07110d;background:#79ffd3;transform:rotate(90deg); }
.media-viewer-inner { width:min(100%,1220px);margin:0 auto;padding:clamp(72px,7vw,110px) clamp(18px,4vw,58px) 70px; }
.media-viewer-header { margin-bottom:30px;padding-right:70px; }
.media-viewer-header span { color:#79ffd3;font-size:.58rem;font-weight:800;letter-spacing:.16em; }
.media-viewer-header h2 { margin:12px 0 0;font-family:var(--font-shuhei);font-size:clamp(1.6rem,3vw,3.4rem);line-height:1.08;letter-spacing:.02em; }
.media-viewer-content img,
.media-viewer-content video { display:block;width:100%;height:auto;border-radius:24px;background:#0b0f0e; }
.media-viewer-content video { min-height:min(68vh,720px);object-fit:contain; }

@media (max-width:767px) {
  .project-panel,
  .project-panel[data-project] { height:clamp(350px,104vw,455px); }
  .project-panel[data-project="ali"],
  .project-panel[data-project="light"],
  .project-panel[data-project="medical"] { height:clamp(370px,108vw,480px); }
  .project-visual { border-radius:24px; }
  .project-copy { padding:22px 18px;opacity:.82; }
  .project-copy strong,
  .project-panel[data-project] .project-copy strong { max-width:82%;font-size:clamp(1.8rem,8vw,2.55rem);line-height:1.05; }
  .project-copy em { max-width:82%;font-size:.62rem;line-height:1.55; }
  .project-index { left:18px;top:17px;font-size:3.15rem; }
  .project-visual u { right:7px;top:7px;width:44px;height:44px; }
  .dialog-gallery { --media-radius:22px;--media-action:44px;--media-inset:7px;gap:14px; }
  .media-card { grid-template-rows:minmax(210px,62vw) auto; }
  .media-card-meta { min-height:104px;padding:18px var(--media-inset) var(--media-inset) 18px; }
  .media-card-meta strong { font-size:.94rem; }
  .media-viewer { width:calc(100% - 12px);height:calc(100dvh - 12px);border-radius:22px; }
  .media-viewer-close { top:16px;right:16px;width:46px;height:46px; }
  .media-viewer-inner { padding:76px 10px 34px; }
  .media-viewer-header { margin-bottom:20px;padding:0 10px; }
  .media-viewer-content img,
  .media-viewer-content video { border-radius:16px; }
  .media-viewer-content video { min-height:0;aspect-ratio:16/9; }
}
@media (prefers-reduced-motion:reduce) {
  .media-card,.media-card > img,.media-card > video,.media-card-meta i,.media-viewer-close { transition:none; }
}

/* August 7 layout and interaction corrections. */
.primary-nav .home-link { display:none; }

.project-panel { overflow:visible;opacity:1; }
.project-visual { overflow:hidden; }
.project-visual img { width:100%;height:100%;object-fit:cover; }
.project-panel[data-project="light"] .project-visual img { object-fit:cover;object-position:center; }
.project-index {
  opacity:1;
  color:#f6fff9;
  text-shadow:0 8px 28px rgba(0,0,0,.96),0 2px 6px rgba(0,0,0,.98);
}
.project-copy {
  isolation:isolate;
  opacity:1;
  padding-top:clamp(62px,6vw,92px);
}
.project-copy::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:0 0 var(--card-radius) var(--card-radius);
  background:linear-gradient(180deg,transparent 0%,rgba(2,5,5,.44) 30%,rgba(2,5,5,.9) 100%);
  pointer-events:none;
}
.project-copy > * { position:relative;z-index:1; }
.dialog-gallery { overflow:visible; }
.project-dialog[open] { animation:projectDialogIn .46s cubic-bezier(.22,1,.36,1) both; }
.project-dialog[open]::backdrop { animation:projectBackdropIn .4s ease both; }
.project-dialog[open] .dialog-inner { animation:projectContentIn .64s .06s cubic-bezier(.22,1,.36,1) both; }
@keyframes projectDialogIn {
  from { opacity:0;transform:translateY(34px) scale(.97); }
  to { opacity:1;transform:translateY(0) scale(1); }
}
@keyframes projectBackdropIn { from { opacity:0; } to { opacity:1; } }
@keyframes projectContentIn {
  from { opacity:0;filter:blur(14px);transform:translateY(28px); }
  to { opacity:1;filter:blur(0);transform:translateY(0); }
}

.skills-heading .display-title {
  color:transparent;
  background:linear-gradient(100deg,#eaff3c,#57ff80,#26bfff,#eaff3c);
  background-size:280% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:neonFlow 6s linear infinite;
}
.skills-grid .skill-card { border-radius:28px; }
.skill-no {
  right:20px;
  top:14px;
  font-size:clamp(4.8rem,7vw,8rem);
  color:rgba(223,255,244,.18);
  text-shadow:0 10px 30px rgba(0,0,0,.36);
}

.contact { min-height:960px;padding-top:clamp(82px,7vw,118px);padding-bottom:clamp(82px,7vw,118px); }
.contact-stage { min-height:720px;overflow:visible; }
.contact-manifesto { grid-column:1 / span 7;min-width:0; }
.contact-directory { grid-column:9 / -1;min-width:0; }
.contact-title { width:100%;gap:.02em;line-height:.78; }
.contact-title > span {
  max-width:100%;
  font-size:clamp(3.4rem,4.8vw,5.9rem);
  line-height:.84;
}
.contact-title > em {
  max-width:100%;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.4rem,5vw,6rem);
  font-weight:400;
  line-height:.86;
  letter-spacing:0;
}
.contact-title > em::after { transform:scale(.972,.9); }
.contact .fluid-button::before {
  background:linear-gradient(100deg,#dfff31,#50ff89,#31dcff,#dfff31);
  background-size:300% 100%;
}
.contact .fluid-button:hover::before {
  background:linear-gradient(100deg,#ff375f,#ff9f0a,#eaff3c,#30d158,#00c7ff,#5856d6,#ff2d9f,#ff375f);
  background-size:420% 100%;
  animation:neonFlow 2.2s linear infinite;
}

@media (max-width:900px) {
  .work-showcase { grid-template-columns:1fr; }
  .project-panel,
  .project-panel[data-project] { grid-column:1 / -1;width:100%; }
  .project-panel[data-project="ali"],
  .project-panel[data-project="light"],
  .project-panel[data-project="medical"],
  .project-panel[data-project="home"] { grid-column:1 / -1; }
}

@media (max-width:767px) {
  .menu-toggle { display:grid;place-content:center; }
  .menu-toggle span { width:19px;height:1.5px;transform-origin:center; }
  .menu-toggle span + span { margin-top:4px; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(5.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0;transform:scaleX(.3); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-5.5px) rotate(-45deg); }
  .primary-nav .home-link { display:block;order:0; }
  .primary-nav a[href="#about"] { order:2; }
  .primary-nav a[href="#work"] { order:1; }
  .primary-nav a[href="#skills"] { order:3; }
  .primary-nav a[href="#contact"] { order:4; }
  .primary-nav .resume-link { order:5; }

  .project-copy { padding:74px 18px 20px; }
  .project-copy::before { border-radius:0 0 24px 24px; }
  .project-index { opacity:1;font-size:3.4rem; }
  .skills-grid .skill-card { border-radius:24px; }
  .skill-no { right:16px;top:14px;font-size:5.3rem; }

  .contact { min-height:0;padding:76px 18px 72px; }
  .contact-stage { min-height:0; }
  .contact-title { gap:.04em; }
  .contact-title > span { font-size:clamp(2.75rem,13.4vw,4.25rem); }
  .contact-title > em { font-size:clamp(2.8rem,14vw,4.35rem);line-height:.88; }
  .contact-directory { margin-top:58px; }
}

@media (prefers-reduced-motion:reduce) {
  .project-dialog[open],.project-dialog[open]::backdrop,.project-dialog[open] .dialog-inner { animation:none; }
  .skills-heading .display-title,.contact .fluid-button::before { animation:none; }
}

/* Slanted project index: the image, scrim, copy and action move as one tile. */
.work-showcase { row-gap:38px; }
.project-panel {
  --tile-tilt: -2.5deg;
  height:clamp(430px,31vw,570px);
  border-radius:30px;
  overflow:visible;
  transform:rotate(var(--tile-tilt));
  transition:transform .58s var(--ease),filter .45s,opacity .4s;
}
.project-panel:nth-child(2n) { --tile-tilt:2.5deg; }
.project-panel:nth-child(3n) { --tile-tilt:-1.5deg; }
.project-visual,
.project-copy { border-radius:30px; }
.project-visual { inset:0;transform:none; }
.project-copy {
  inset:0;
  display:flex;
  justify-content:flex-end;
  padding:clamp(26px,3vw,42px);
  transform:none;
}
.project-copy::before {
  inset:42% 0 0;
  border-radius:0 0 30px 30px;
  background:linear-gradient(180deg,transparent,rgba(2,5,5,.82) 56%,rgba(2,5,5,.94));
}
.project-index { left:22px;top:20px; }
.project-visual u { right:16px;top:16px; }
@media (hover:hover) and (pointer:fine) {
  .project-panel:hover { transform:rotate(0deg) translateY(-9px) scale(1.012); }
  .project-panel:hover .project-visual { transform:scale(1.018); }
  .project-panel:hover .project-copy { transform:scale(1.018); }
}
.project-dialog,
.media-viewer { border-radius:30px; }
.project-dialog {
  --dialog-glow-x:50%;
  --dialog-glow-y:50%;
  isolation:isolate;
  overflow:visible !important;
}
.project-dialog::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  clip-path:inset(0 round 30px);
  background:radial-gradient(circle 280px at var(--dialog-glow-x) var(--dialog-glow-y),rgba(94,255,214,.22),rgba(53,191,255,.1) 38%,transparent 72%);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.project-dialog.is-pointer-active::before { opacity:1; }
.dialog-inner {
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:calc(100% + 18px);
  height:100%;
  max-height:100%;
  margin-right:0;
  padding-right:clamp(73px,8vw,123px);
  border-radius:30px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#54dcff rgba(255,255,255,.08);
}
.dialog-inner::-webkit-scrollbar { width:10px; }
.dialog-inner::-webkit-scrollbar-track {
  margin:18px 2px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}
.dialog-inner::-webkit-scrollbar-thumb {
  border:2px solid transparent;
  border-radius:999px;
  background:linear-gradient(180deg,#dfff31,#50ff89 48%,#31dcff) padding-box;
  box-shadow:0 0 16px rgba(49,220,255,.45);
}
.project-dialog { position:fixed; }
.dialog-close,
.media-viewer-close {
  width:50px;
  height:50px;
  border-radius:50%;
  box-shadow:0 0 0 8px rgba(7,12,11,.24),0 12px 26px rgba(0,0,0,.3);
  transition:transform .4s var(--ease),background .3s,color .3s,box-shadow .3s;
}
.dialog-close { position:fixed;top:calc((100vh - min(90vh,820px))/2 + 18px);right:calc((100vw - min(100vw,1100px))/2 + 18px); }
.media-viewer-close { right:max(18px,calc((100vw - min(calc(100vw - 32px),1400px))/2 + 18px)); }
.dialog-close:hover,
.media-viewer-close:hover { transform:rotate(90deg) scale(1.08);background:#79ffd3;color:#07110d;box-shadow:0 0 0 8px rgba(121,255,211,.12),0 0 24px rgba(121,255,211,.42); }
.dialog-inner h2,
.media-viewer-header h2 { line-height:1.14; }
.dialog-summary { line-height:2; }

.skills-grid .skill-card { border-radius:30px; }
.skill-no { top:14px;right:20px;font-size:clamp(5.2rem,7.4vw,8.4rem);line-height:.86; }

.contact { min-height:1080px; }
.contact-manifesto { align-self:start;transform:translateY(-26px); }
.contact-title > em { font-family:Georgia,"Times New Roman",serif; }
.contact .fluid-button { background:rgba(7,10,23,.16); }
.contact .fluid-button:hover {
  color:#07110d;
  background:transparent;
  background-image:linear-gradient(100deg,#ff375f,#ff9f0a,#eaff3c,#30d158,#00c7ff,#5856d6,#ff2d9f,#ff375f);
  background-size:420% 100%;
  animation:neonFlow 2.2s linear infinite;
  box-shadow:0 0 0 1px rgba(255,255,255,.78),0 0 34px rgba(0,221,255,.62),0 20px 48px rgba(0,0,0,.3);
}
.contact .fluid-button:hover::before { opacity:0; }

@media (max-width:767px) {
  .project-panel,
  .project-panel:nth-child(2n),
  .project-panel:nth-child(3n) { --tile-tilt:0deg;height:clamp(360px,106vw,470px); }
.project-panel,
.project-visual,
.project-copy { border-radius:24px; }
  .project-copy { padding:74px 18px 22px; }
  .project-copy::before { border-radius:0 0 24px 24px; }
  .project-index { left:18px;top:17px; }
  .project-visual u { right:10px;top:10px; }
  .dialog-close,
  .media-viewer-close { top:12px;width:46px;height:46px; }
  .dialog-close { top:22px;right:22px; }
  .media-viewer-close { right:12px; }
  .dialog-inner {
    width:calc(100% + 12px);
    margin-right:0;
    padding-right:37px;
    border-radius:24px;
  }
  .project-dialog::before { clip-path:inset(0 round 24px); }
  .contact { min-height:0;padding-top:70px;padding-bottom:88px; }
  .contact-manifesto { transform:none; }
}

/* Keep the project close control anchored to the dialog's true top-right corner. */
.project-dialog > .dialog-close {
  position:absolute !important;
  top:18px !important;
  right:18px !important;
  z-index:20;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 22px rgba(0,0,0,.3);
}
.project-dialog > .dialog-close:hover {
  box-shadow:inset 0 0 0 2px rgba(121,255,211,.72),inset 0 0 18px rgba(121,255,211,.22);
}
@media (max-width:767px) {
  .project-dialog > .dialog-close {
    top:16px !important;
    right:16px !important;
  }
}

/* The moving glow replaces the old static top-right glow, which leaked into the external scrollbar gutter. */
.project-dialog > .dialog-inner {
  background:transparent;
}

/* The city-light cover is a full-bleed frame inside its rounded tile. */
.project-panel[data-project="light"] .project-visual,
.project-panel[data-project="light"] .project-visual img {
  width:100%;
  height:100%;
  min-height:0;
}
.project-panel[data-project="light"] .project-visual {
  display:block;
  padding:0;
}
.project-panel[data-project="light"] .project-visual img {
  position:absolute;
  inset:0;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Keep the bottom scrim inside the enlarged image so its rounded edge never leaks. */
.project-visual { overflow:hidden; }
.project-visual::after {
  display:block;
  content:"";
  position:absolute;
  z-index:3;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(180deg,transparent 38%,rgba(2,5,5,.58) 62%,rgba(2,5,5,.95) 100%);
  pointer-events:none;
}
.project-copy::before { display:none; }
.project-copy { overflow:visible; }
@media (hover:hover) and (pointer:fine) {
  .project-panel:hover .project-copy { transform:none; }
}

/* Contact title typography and a wider pointer glow that reaches the frame. */
.contact-title {
  gap:.14em;
  line-height:1;
}
.contact-title > span {
  color:#fff;
  font-family:var(--font-shuhei),Arial,"Microsoft YaHei",sans-serif;
  font-weight:900;
  line-height:.94;
}
.contact-title > em {
  color:transparent;
  font-family:var(--font-wujie),"Arial Black",Impact,sans-serif;
  font-weight:900;
  line-height:.92;
  -webkit-text-stroke:0;
  background:linear-gradient(100deg,#45ffd0,#25e8ff,#62ff9a,#45ffd0);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:neonFlow 5.5s linear infinite;
}
.contact-title > em::after { content:none;display:none; }
.contact-stage::before {
  background:radial-gradient(circle 560px at var(--spot-x) var(--spot-y),rgba(69,255,208,.2),rgba(37,232,255,.09) 44%,transparent 78%);
}

@media (max-width:767px) {
  .contact-title { gap:.18em; }
  .contact-stage::before {
    background:radial-gradient(circle 330px at var(--spot-x) var(--spot-y),rgba(69,255,208,.2),rgba(37,232,255,.09) 45%,transparent 80%);
  }
}

@media (prefers-reduced-motion:reduce) {
  .contact-title > em { animation:none; }
}

/* Contact card: one pointer field drives both the background bloom and the outer frame. */
.contact {
  --spot-x:50%;
  --spot-y:50%;
  isolation:isolate;
  min-height:0;
  padding-bottom:clamp(48px,4vw,64px);
  overflow:hidden;
}
.contact::before,
.contact::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.contact::before {
  z-index:0;
  border-radius:inherit;
  background:radial-gradient(circle 720px at var(--spot-x) var(--spot-y),rgba(69,255,208,.16),rgba(37,232,255,.075) 48%,transparent 82%);
}
.contact::after {
  z-index:3;
  padding:1px;
  border-radius:inherit;
  background:radial-gradient(circle 720px at var(--spot-x) var(--spot-y),rgba(102,255,218,.95),rgba(37,232,255,.5) 55%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.contact > * { position:relative;z-index:1; }
.contact-stage {
  min-height:600px;
  padding-bottom:12px;
}
.contact-stage::before { background:none; }

@media (max-width:767px) {
  .contact { padding-bottom:48px; }
  .contact::before {
    background:radial-gradient(circle 430px at var(--spot-x) var(--spot-y),rgba(69,255,208,.16),rgba(37,232,255,.075) 48%,transparent 82%);
  }
  .contact::after {
    background:radial-gradient(circle 430px at var(--spot-x) var(--spot-y),rgba(102,255,218,.95),rgba(37,232,255,.5) 55%,transparent 92%);
  }
  .contact-stage { min-height:0; }
}