*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:PingFang SC,Microsoft YaHei,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.order-1{order:1}.order-2{order:2}.mx-auto{margin-left:auto;margin-right:auto}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.ml-auto{margin-left:auto}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-9{margin-top:2.25rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.w-full{width:100%}.max-w-2xl{max-width:42rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-14{gap:3.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-7{gap:1.75rem}.gap-9{gap:2.25rem}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.75rem*var(--tw-space-y-reverse))}.whitespace-nowrap{white-space:nowrap}.border{border-width:1px}.p-5{padding:1.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.pt-3{padding-top:.75rem}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:768px){.md\:flex{display:flex}.md\:flex-row{flex-direction:row}.md\:py-32{padding-top:8rem;padding-bottom:8rem}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-\[1fr_1\.05fr\]{grid-template-columns:1fr 1.05fr}.lg\:grid-cols-\[380px_1fr\]{grid-template-columns:380px 1fr}}

/* ============================================================
   1. 主题变量（深色 / 浅色）
   ============================================================ */
:root{
  --bg:            #f5f6fb;
  --bg-2:          #ffffff;
  --surface:       rgba(255,255,255,.72);
  --surface-solid: #ffffff;
  --border:        rgba(15,23,42,.10);
  --border-strong: rgba(15,23,42,.18);
  --text:          #0f1729;
  --text-dim:      #55607a;
  --text-faint:    #8b93a8;
  --accent:        #5b5bf0;
  --accent-2:      #8b5cf6;
  --accent-soft:   rgba(91,91,240,.10);
  --glow:          rgba(91,91,240,.28);
  --shadow:        0 10px 30px -18px rgba(15,23,42,.35);
  --shadow-lg:     0 28px 60px -30px rgba(15,23,42,.45);
  --grid-line:     rgba(15,23,42,.055);
  --dot:           rgba(91,91,240,.30);
  --glass-blur:    14px;
  /* 内置项目封面底色（浅色主题） */
  --cv-base:       #eef1fb;
  --cv-base-2:     #ffffff;
}
html.dark{
  --bg:            #08090f;
  --bg-2:          #0c0e18;
  --surface:       rgba(20,23,38,.55);
  --surface-solid: #12151f;
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --text:          #eceef7;
  --text-dim:      #9aa3bd;
  --text-faint:    #6b7391;
  --accent:        #7c7bff;
  --accent-2:      #a78bfa;
  --accent-soft:   rgba(124,123,255,.14);
  --glow:          rgba(124,123,255,.40);
  --shadow:        0 12px 34px -20px rgba(0,0,0,.9);
  --shadow-lg:     0 34px 70px -34px rgba(0,0,0,.95);
  --grid-line:     rgba(255,255,255,.045);
  --dot:           rgba(140,140,255,.45);
  --glass-blur:    16px;
  /* 内置项目封面底色（深色主题） */
  --cv-base:       #151a2c;
  --cv-base-2:     #0b0e1a;
}

/* ============================================================
   2. 基础样式
   ============================================================ */
*{ box-sizing: border-box; margin: 0; padding: 0; }

/* 主题切换时所有颜色平滑过渡，避免生硬跳变 */
*, *::before, *::after{
  transition: background-color .45s cubic-bezier(.4,0,.2,1),
              border-color .45s cubic-bezier(.4,0,.2,1),
              color .45s cubic-bezier(.4,0,.2,1),
              fill .45s cubic-bezier(.4,0,.2,1);
}

html{ scroll-behavior: smooth; scroll-padding-top: 90px; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.75;
  letter-spacing: .01em;
}

::selection{ background: var(--accent); color: #fff; }

/* 自定义滚动条 */
::-webkit-scrollbar{ width: 9px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 99px;
  border: 2px solid var(--bg);
}

/* 通用容器 */
.wrap{ width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* 毛玻璃卡片 */
.glass{
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}

/* 渐变文字 */
.grad-text{
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 55%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 章节标题 */
.sec-eyebrow{
  font-size: .78rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.sec-title{
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin-top: 10px;
}
.sec-sub{ color: var(--text-dim); margin-top: 14px; max-width: 620px; }
.sec-line{
  width: 100%; height: 1px; margin-top: 22px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .55; transform-origin: left;
}

/* ============================================================
   3. 入场 / 滚动触发动画体系
   ============================================================ */
[data-reveal]{
  opacity: 0;
  transform: translateY(20px);                     /* 淡入 + 向上位移 20px */
  transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms),
              transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-44px); }
[data-reveal="right"] { transform: translateX(44px); }
[data-reveal="rot"]   { transform: translateY(42px) rotateY(10deg) scale(.97); transform-origin: 50% 100%; }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* 页面加载时的首屏错落入场 */
.load-anim{
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),
              transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
}
body.loaded .load-anim{ opacity: 1; transform: none; }

/* ============================================================
   4. 背景视差层（粒子 / 几何图形 / 渐变光晕）
   ============================================================ */
.bg-fx{
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.fx-layer{ position: absolute; inset: -10% 0; will-change: transform; }

/* 网格 */
.bg-grid{
  position: absolute; inset: 0; opacity: .8;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);
}

/* 慢速流动渐变光晕 */
.blob{
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .5;
  animation: blobFloat 22s ease-in-out infinite alternate;
}
.blob-1{ width: 52vw; height: 52vw; left: -12vw; top: -8vh;
  background: radial-gradient(circle at 40% 40%, var(--accent), transparent 68%); }
.blob-2{ width: 44vw; height: 44vw; right: -10vw; top: 12vh;
  background: radial-gradient(circle at 60% 50%, var(--accent-2), transparent 68%);
  animation-duration: 28s; animation-delay: -6s; }
.blob-3{ width: 40vw; height: 40vw; left: 32vw; bottom: -16vh;
  background: radial-gradient(circle at 50% 50%, #22d3ee, transparent 68%);
  opacity: .28; animation-duration: 34s; animation-delay: -12s; }
@keyframes blobFloat{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(4vw,3vh,0) scale(1.12); }
  100% { transform: translate3d(-3vw,-2vh,0) scale(.95); }
}

/* 粒子点阵 */
.dot{
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--dot);
  animation: dotFloat linear infinite;
  box-shadow: 0 0 8px var(--dot);
}
@keyframes dotFloat{
  0%   { transform: translateY(0) scale(1);   opacity: .25; }
  50%  { transform: translateY(-26px) scale(1.5); opacity: .85; }
  100% { transform: translateY(-52px) scale(.9); opacity: 0; }
}

/* 几何描边方块 */
.geo{
  position: absolute; border: 1px solid var(--border-strong); border-radius: 14px;
  animation: geoSpin 30s linear infinite;
}
@keyframes geoSpin{
  0%   { transform: rotate(0deg) translateY(0); }
  50%  { transform: rotate(180deg) translateY(-18px); }
  100% { transform: rotate(360deg) translateY(0); }
}

/* 噪点质感 */
.noise{
  position: absolute; inset: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 触手鼠标跟踪背景画布：铺满视口、置于装饰层之上内容层之下、不吃鼠标事件 */
#tentacleCanvas{
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
html:not(.dark) #tentacleCanvas{ opacity: .4; }   /* 浅色主题下降低存在感，避免与白底卡片抢视觉 */

/* ============================================================
   5. 导航栏
   ============================================================ */
#scrollProgress{
  position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 70;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), #22d3ee);
  box-shadow: 0 0 12px var(--glow);
}

.nav-bar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transform: translateY(-110%);
  transition: transform .9s cubic-bezier(.2,.7,.2,1),
              background-color .45s ease, border-color .45s ease, box-shadow .45s ease;
}
body.loaded .nav-bar{ transform: translateY(0); }
.nav-bar.scrolled{
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: var(--border);
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.6);
}
/* 移动端菜单展开时，导航栏同步获得毛玻璃底 */
.nav-bar.menu-open{
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: var(--border);
}
.nav-inner{
  display: flex; align-items: center; justify-content: space-between;
  height: 88px; transition: height .45s cubic-bezier(.2,.7,.2,1);
}
.nav-bar.scrolled .nav-inner{ height: 64px; }   /* 高度收缩 */

.logo{ font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; }
.logo-mark{
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: .82rem; font-weight: 800;
  box-shadow: 0 8px 22px -10px var(--glow);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.logo:hover .logo-mark{ transform: rotate(-10deg) scale(1.08); }

/* 菜单项：下划线从左到右延展 + 文字颜色渐变 */
.nav-link{
  position: relative; font-size: .93rem; font-weight: 500;
  color: var(--text-dim); padding: 6px 2px;
}
.nav-link::after{
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover, .nav-link.active{ color: var(--accent); }
.nav-link:hover::after, .nav-link.active::after{ transform: scaleX(1); }

/* 主题切换按钮 */
.icon-btn{
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  cursor: pointer; transition: transform .4s cubic-bezier(.2,.7,.2,1), color .3s, border-color .3s, background-color .4s;
}
.icon-btn:hover{ color: var(--accent); border-color: var(--accent); transform: translateY(-2px) scale(1.06); }
.icon-btn:active{ transform: scale(.94); }
.icon-btn i{ transition: transform .6s cubic-bezier(.2,.7,.2,1); }
#themeToggle:hover i{ transform: rotate(180deg); }

/* 移动端汉堡菜单 */
.burger{ display: none; }
@media (max-width: 767px){ .burger{ display: grid; } }

/* 语言切换按钮：中 / EN 双段，高亮当前语言 */
.lang-btn{ width: auto; padding: 0 8px; display: flex; align-items: center; }
.lang-btn span{
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
  padding: 5px 7px; border-radius: 7px; opacity: .4;
  transition: opacity .3s ease, background-color .3s ease, color .3s ease;
}
.lang-btn span.on{ opacity: 1; background: var(--accent-soft); color: var(--accent); }

.mobile-menu{
  overflow: hidden; max-height: 0; opacity: 0;
  border-top: 1px solid transparent;
  transition: max-height .55s cubic-bezier(.2,.7,.2,1), opacity .35s ease, border-color .35s;
}
.mobile-menu.open{ max-height: 460px; opacity: 1; border-top-color: var(--border); }
.m-link{
  display: block; padding: 15px 4px; font-size: 1rem; font-weight: 600;
  color: var(--text-dim); border-bottom: 1px dashed var(--border);
  opacity: 0; transform: translateX(-24px);
  transition: opacity .45s ease var(--d,0ms), transform .45s cubic-bezier(.2,.7,.2,1) var(--d,0ms), color .3s;
}
.mobile-menu.open .m-link{ opacity: 1; transform: none; }
.m-link:hover{ color: var(--accent); padding-left: 10px; }

/* 汉堡图标形变 */
.burger-lines{ position: relative; width: 18px; height: 12px; }
.burger-lines span{
  position: absolute; left: 0; height: 2px; width: 100%; border-radius: 2px; background: currentColor;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s, top .4s;
}
.burger-lines span:nth-child(1){ top: 0; }
.burger-lines span:nth-child(2){ top: 5px; }
.burger-lines span:nth-child(3){ top: 10px; }
.burger.open .burger-lines span:nth-child(1){ top: 5px; transform: rotate(45deg); }
.burger.open .burger-lines span:nth-child(2){ opacity: 0; }
.burger.open .burger-lines span:nth-child(3){ top: 5px; transform: rotate(-45deg); }

/* ============================================================
   6. 英雄区
   ============================================================ */
.hero{ position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 88px; }
.hero-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 16px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface);
  backdrop-filter: blur(10px);
}
.pulse-dot{ width: 7px; height: 7px; border-radius: 50%; background: #34d399; position: relative; }
.pulse-dot::after{
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid #34d399; animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing{ 0%{ transform: scale(.6); opacity: 1; } 100%{ transform: scale(1.8); opacity: 0; } }

.hero-name{
  font-size: clamp(2.6rem, 9vw, 6rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
  margin: 22px 0 6px;
}
.cursor{
  display: inline-block; width: 3px; height: .86em; margin-left: 6px;
  vertical-align: -.06em; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  animation: blink 1s steps(2, jump-none) infinite;
}
@keyframes blink{ 0%,100%{ opacity: 1; } 50%{ opacity: 0; } }

.hero-role{ font-size: clamp(1.05rem, 2.4vw, 1.5rem); font-weight: 600; color: var(--text); }
.hero-slogan{ color: var(--text-dim); max-width: 640px; margin-top: 14px; font-size: 1.03rem; }

/* 英雄区延迟入场（打字机结束后由 JS 触发 .hero-ready） */
.hero-anim{
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),
              transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
}
.hero-ready .hero-anim{ opacity: 1; transform: none; }

/* CTA 按钮 */
.btn{
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 14px; font-weight: 600; font-size: .95rem;
  cursor: pointer; border: 1px solid transparent; overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease,
              background-color .4s ease, color .35s ease, border-color .35s ease;
}
.btn-primary{
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff; box-shadow: 0 14px 30px -18px var(--glow);
}
.btn-primary::after{   /* 扫光 */
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .75s cubic-bezier(.2,.7,.2,1);
}
.btn-primary:hover::after{ left: 130%; }
.btn-primary:hover{ transform: scale(1.05); box-shadow: 0 0 0 6px var(--accent-soft), 0 22px 46px -20px var(--glow); }
.btn-ghost{
  background: var(--surface); color: var(--text); border-color: var(--border);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover{ transform: scale(1.05); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
.btn:active{ transform: scale(.96); }   /* 按压反馈 */

/* 数据统计 */
.stat-num{ font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; line-height: 1; }
.stat-label{ font-size: .78rem; color: var(--text-faint); margin-top: 7px; letter-spacing: .04em; }

/* 向下呼吸浮动箭头 */
.scroll-hint{
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-faint); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
}
.scroll-hint .wheel{
  width: 26px; height: 42px; border-radius: 14px; border: 1px solid var(--border-strong);
  position: relative;
}
.scroll-hint .wheel::after{
  content: ''; position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; border-radius: 2px;
  background: var(--accent); transform: translateX(-50%);
  animation: wheelDrop 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes wheelDrop{
  0%   { transform: translate(-50%,0); opacity: 1; }
  70%  { transform: translate(-50%,16px); opacity: 0; }
  100% { transform: translate(-50%,0); opacity: 0; }
}
.scroll-hint .arrow{ animation: breathe 2.4s ease-in-out infinite; font-size: 1rem; }
@keyframes breathe{ 0%,100%{ transform: translateY(0); opacity: .45; } 50%{ transform: translateY(8px); opacity: 1; } }

/* ============================================================
   7. 关于我 / 头像
   ============================================================ */
.avatar-wrap{ position: relative; width: clamp(210px, 26vw, 300px); aspect-ratio: 1; margin: 0 auto; }
.avatar-ring{
  position: absolute; inset: -14px; border-radius: 34px;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), #22d3ee, var(--accent));
  filter: blur(18px); opacity: .55; animation: spinSlow 14s linear infinite;
}
@keyframes spinSlow{ to{ transform: rotate(360deg); } }
.avatar{
  position: relative; width: 100%; height: 100%; object-fit: cover;
  border-radius: 28px; border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.avatar-wrap:hover .avatar{ transform: scale(1.03) rotate(-1.5deg); }

.chip{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; padding: 7px 14px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), color .3s, border-color .3s, background .4s;
  cursor: pointer;
}
.chip:hover{ transform: translateY(-3px) scale(1.04); color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.fact-row{ display: flex; gap: 14px; align-items: flex-start; }
.fact-icon{
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: .95rem;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.fact-row:hover .fact-icon{ transform: rotate(-8deg) scale(1.1); }

/* ============================================================
   8. 工作经历时间轴
   ============================================================ */
.tl{ position: relative; padding: 10px 0; }
.tl-axis{
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2), transparent);
  transform: scaleY(0); transform-origin: top center;   /* 进入视口后逐步绘制 */
  transition: transform 1.7s cubic-bezier(.2,.7,.2,1);
}
.tl.is-in .tl-axis{ transform: scaleY(1); }

.tl-item{ position: relative; width: 50%; padding: 0 46px 46px 0; }
.tl-item:nth-child(even){ margin-left: 50%; padding: 0 0 46px 46px; }
.tl-node{
  position: absolute; top: 26px; right: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-2); border: 2px solid var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
}
.tl-item:nth-child(even) .tl-node{ right: auto; left: -9px; }
.tl-item:hover .tl-node{ transform: scale(1.28); box-shadow: 0 0 0 9px var(--accent-soft); }

.tl-card{
  position: relative; padding: 24px 26px; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .4s ease;
}
.tl-card::before{    /* 左侧边框高亮延展 */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  transform: scaleY(0); transform-origin: top center;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.tl-item:hover .tl-card{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.tl-item:hover .tl-card::before{ transform: scaleY(1); }

.tl-dot-line{ list-style: none; }
.tl-dot-line li{ position: relative; padding-left: 18px; color: var(--text-dim); font-size: .92rem; margin-top: 9px; }
.tl-dot-line li::before{
  content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: .85;
}
.badge{
  display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700;
  padding: 5px 12px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent;
}

/* 移动端：时间轴改为单列左对齐 */
@media (max-width: 767px){
  .tl-axis{ left: 11px; margin-left: 0; }
  .tl-item, .tl-item:nth-child(even){ width: 100%; margin-left: 0; padding: 0 0 34px 38px; }
  .tl-node, .tl-item:nth-child(even) .tl-node{ left: 2px; right: auto; }
}

/* ============================================================
   9. 项目作品卡片
   ============================================================ */
.proj-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 26px; }
.proj-card{
  position: relative; border-radius: 22px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-solid);
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .45s ease;
}
.proj-card:hover{
  transform: translateY(-10px);                 /* 上浮 10px */
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent);
  border-color: transparent;
}
.proj-card::after{    /* 外围渐变光晕边框 */
  content: ''; position: absolute; inset: -1px; border-radius: 22px; padding: 1px;
  background: linear-gradient(130deg, var(--accent), var(--accent-2), #22d3ee);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.proj-card:hover::after{ opacity: 1; }

.cover{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.cover img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.proj-card:hover .cover img{ transform: scale(1.09); }   /* 封面缓慢放大 */

/* 内置封面（纯 CSS 渐变 + 网格 + 光斑，无外部图片，离线可用）
   若想换成真实项目截图：把 .cover 内的 .cover-visual 替换为 <img src="截图地址" alt=""> 即可 */
.cover-visual{
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(140deg, var(--cv-base), var(--cv-base-2));
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.cover-visual::before{
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
}
.cover-visual .orb{
  position: absolute; right: -50px; top: -70px; width: 240px; height: 240px; border-radius: 50%;
  filter: blur(46px); opacity: .55;
  background: linear-gradient(135deg, var(--cv-a), var(--cv-b));
}
.cover-visual .ico{
  position: absolute; left: 26px; bottom: 20px;
  font-size: 2.1rem; color: var(--cv-a); opacity: .6;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
.proj-card:hover .cover-visual{ transform: scale(1.09); }
.proj-card:hover .cover-visual .ico{ opacity: .95; transform: translateY(-4px); }
/* 每张卡片的主色，可按需调整 */
.cv-1{ --cv-a:#6d6bff; --cv-b:#a78bfa; }
.cv-2{ --cv-a:#7c7bff; --cv-b:#22d3ee; }
.cv-3{ --cv-a:#4f7cff; --cv-b:#8b5cf6; }
.cv-4{ --cv-a:#8b5cf6; --cv-b:#22d3ee; }
.cv-5{ --cv-a:#5b8cff; --cv-b:#a78bfa; }
.cv-6{ --cv-a:#a78bfa; --cv-b:#7c7bff; }
.cv-7{ --cv-a:#6d6bff; --cv-b:#8b5cf6; }
.cover::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--bg-2) 92%, transparent) 100%);
}

/* 悬停时底部详情栏滑入 */
.proj-detail{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 18px 20px; transform: translateY(101%); opacity: 0;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--border);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.proj-card:hover .proj-detail{ transform: translateY(0); opacity: 1; }
.proj-detail li{ font-size: .84rem; color: var(--text-dim); padding-left: 15px; position: relative; }
.proj-detail li::before{
  content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent-2);
}

.tag{
  display: inline-block; font-size: .74rem; font-weight: 600;
  padding: 5px 11px; border-radius: 8px;
  border: 1px solid var(--border); color: var(--text-dim); background: transparent;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), color .3s, background .45s, border-color .3s;
}
.tag:hover{
  transform: scale(1.09);                        /* 悬停变色 + 轻微缩放 */
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
}
.tag-cloud .tag{ margin: 0 8px 10px 0; font-size: .82rem; padding: 8px 14px; }

/* ============================================================
   9.5 个人作品 · 无缝 Coverflow 轮播 + 放大预览弹窗
   ============================================================ */
.works-stage{ position: relative; margin-top: 8px; }
/* 两侧渐隐遮罩：卡片滑出舞台边缘时自然淡出，无可见边界 */
.works-mask{
  position: relative; overflow: hidden; padding: 26px 0 6px;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.works-track{
  position: relative;
  height: clamp(330px, 44vw, 470px);
  perspective: 1700px;
  transform-style: preserve-3d;
}
.work-card{
  --w: min(660px, 80vw);
  position: absolute; left: 50%; top: 0;
  width: var(--w); height: 100%;
  margin-left: calc(var(--w) / -2);
  display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  transition: transform .75s cubic-bezier(.2,.7,.2,1), opacity .75s, filter .75s, box-shadow .5s;
  will-change: transform, opacity;
}
.work-card.center{ border-color: var(--border-strong); box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-soft), 0 0 46px -18px var(--glow); }
.work-card .work-frame{ position: relative; flex: 1; overflow: hidden; background: var(--bg-2); }
/* 卡片内实时预览：以 2 倍设计宽度渲染站点再缩回，等效桌面视口 */
.work-frame iframe{
  position: absolute; top: 0; left: 0;
  width: 200%; height: 200%;
  transform: scale(.5); transform-origin: 0 0;
  border: 0; pointer-events: none; background: var(--bg-2);
}
.work-frame .work-shot{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* App 卡片：示例图底部叠加条（二维码 + 下载） */
.work-app-strip{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: color-mix(in srgb, var(--bg-2) 84%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
}
.work-app-strip img.work-qr{ width: 64px; height: 64px; flex: none; border-radius: 10px; border: 1px solid var(--border); background: #fff; padding: 5px; object-fit: contain; }
.work-app-strip .w-dl{
  display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: #fff;
  padding: 9px 16px; border-radius: 99px; text-decoration: none;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 24px -12px var(--glow);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.work-app-strip .w-dl:hover{ transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 30px -12px var(--glow); }
.work-app-strip .w-dl-note{ font-size: .76rem; color: var(--text-faint); }
.work-info{
  flex: none; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-2) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.work-info .w-ico{
  width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, var(--wa, var(--accent)), var(--wb, var(--accent-2)));
  box-shadow: 0 8px 20px -10px var(--glow);
}
.work-info .w-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.work-info .w-title{ font-weight: 700; font-size: 1rem; line-height: 1.35; }
.work-info .w-desc{ font-size: .8rem; color: var(--text-dim); margin-top: 2px; white-space: normal; word-break: break-word; line-height: 1.55; }
.work-badge{
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 99px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--border);
}
.work-zoom{
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 600; color: var(--text-dim);
  opacity: 0; transform: translateX(8px);
  transition: opacity .4s, transform .45s cubic-bezier(.2,.7,.2,1), color .3s;
}
.work-card.center:hover .work-zoom{ opacity: 1; transform: none; }
.work-card.center .work-zoom{ color: var(--accent); }

/* 左右箭头 + 圆点指示器 */
.work-arrow{
  position: absolute; top: 50%; z-index: 12;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); color: var(--text-dim);
  background: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateY(-50%); font-size: 1rem;
  transition: color .3s, border-color .3s, transform .45s cubic-bezier(.2,.7,.2,1), background .4s;
}
.work-arrow:hover{ color: var(--accent); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-50%) scale(1.08); }
.work-arrow:active{ transform: translateY(-50%) scale(.92); }
.work-arrow.prev{ left: max(10px, calc(50% - min(660px,80vw)/2 - 74px)); }
.work-arrow.next{ right: max(10px, calc(50% - min(660px,80vw)/2 - 74px)); }
.work-dots{ display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.work-dots button{
  width: 8px; height: 8px; border-radius: 99px; cursor: pointer; border: 0;
  background: var(--border-strong);
  transition: width .45s cubic-bezier(.2,.7,.2,1), background .45s;
}
.work-dots button.on{ width: 26px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px -2px var(--glow); }

/* ---------- 卡片原地放大：点中心卡片 → 卡片自身放大到视口中央（不弹窗、不重载 iframe） ---------- */
.work-zoom-close{
  position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 38px; height: 38px; border-radius: 50%; display: none; place-items: center;
  cursor: pointer; font-size: .95rem; color: var(--text);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color .3s, border-color .3s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.work-zoom-close:hover{ color: var(--accent); border-color: var(--accent); transform: scale(1.1); }
/* 放大态：抬升舞台层叠 + 隐藏其余卡片与控件；mask-open 单独控制「解除遮罩裁剪」以便延后关闭 */
.works-stage.is-zoomed{ z-index: 51; }
.works-stage.mask-open .works-mask{
  overflow: visible;
  mask-image: none; -webkit-mask-image: none;
}
.works-stage.is-zoomed .work-card:not(.is-zoomed){ opacity: 0 !important; pointer-events: none !important; }
.works-stage.is-zoomed .work-arrow,
.works-stage.is-zoomed .work-dots{ opacity: 0; pointer-events: none; }
/* 放大态：卡片尺寸直接切到 95vw × 95vh（与放大预览弹窗一致），居中交给 transform */
.work-card.is-zoomed{ --w: 95vw; height: 95vh; z-index: 999 !important; }
.work-card.is-zoomed .work-zoom-close{ display: grid; }
/* 放大后卡片不再整体缩放，预览区就是真实视口尺寸，iframe 按 1:1 铺满（手机框保持定宽） */
.work-card.is-zoomed .work-frame:not(.phone-frame) iframe{ width: 100%; height: 100%; transform: none; }
.work-card.is-zoomed .work-frame iframe{ pointer-events: auto; }
.work-card.is-zoomed .work-zoom{ display: none; }
/* 放大态下的操作按钮（新窗口打开 / 下载应用），样式与放大预览弹窗头部按钮一致 */
.work-zoom-open{
  flex: none; display: none; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 600; color: var(--text-dim); text-decoration: none;
  padding: 7px 13px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface);
  transition: color .3s, border-color .3s, background .4s, transform .35s;
}
.work-zoom-open:hover{ color: var(--accent); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.work-card.is-zoomed .work-zoom-open{ display: inline-flex; }
/* 放大态背景遮罩：挂在 <main> 内（main 自带 z-index 形成层叠上下文，遮罩需与舞台同层），点击任意空白收起 */
.work-zoom-backdrop{
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
.work-zoom-backdrop.on{ opacity: 1; pointer-events: auto; }

/* 放大预览弹窗（网站 iframe / 应用大图共用） */
.work-modal{
  position: fixed; inset: 0; z-index: 95; display: none;
  align-items: center; justify-content: center;
  background: rgba(3,5,12,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.work-modal.open{ display: flex; animation: adminIn .4s cubic-bezier(.2,.7,.2,1) both; }
.work-modal-box{
  width: 95vw; height: 95vh; display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid); box-shadow: var(--shadow-lg);
}
.work-modal-head{
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.work-modal-head .w-title{ font-weight: 700; font-size: .98rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-modal-head a, .work-modal-head button{
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 600; color: var(--text-dim); cursor: pointer;
  padding: 7px 13px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); transition: color .3s, border-color .3s, background .4s, transform .35s;
}
.work-modal-head a:hover, .work-modal-head button:hover{ color: var(--accent); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.work-modal-head a[hidden], .work-modal-head button[hidden]{ display: none; }   /* 显式 display 会盖过 UA 的 [hidden]，需补规则 */
.work-modal-body{ position: relative; flex: 1; background: #0b0e1a; display: grid; place-items: center; overflow: hidden; }
.work-modal-body iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.work-modal-body img{ max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; transition: transform .4s ease; }
.work-modal-body img.zoomed{ transform: scale(1.8); cursor: zoom-out; }
.work-modal-loading{
  position: absolute; inset: 0; display: grid; place-items: center; gap: 12px;
  color: var(--text-faint); font-size: .85rem; pointer-events: none;
}

@media (max-width: 767px){
  .work-card{ --w: 84vw; }
  .works-mask{ mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
  .work-arrow{ width: 38px; height: 38px; font-size: .85rem; }
  .work-arrow.prev{ left: 4px; }
  .work-arrow.next{ right: 4px; }
  .work-info{ padding: 12px 14px; gap: 10px; }
  .work-zoom{ display: none; }
  .work-app-strip img.work-qr{ width: 52px; height: 52px; }
}

/* ---------- 移动端点餐作品：440×956 手机框 ---------- */
.work-frame.phone-frame{
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(242,107,56,.22), transparent 52%),
    linear-gradient(160deg, #2a211a 0%, #14100d 100%);
}
.phone-card-shell,
.phone-modal-shell{
  position: relative;
  width: 440px; height: 956px;
  flex: 0 0 auto;
  border-radius: 38px;
  overflow: hidden;
  background: #f9f5ee;
  box-shadow: 0 0 0 7px #17110d, 0 34px 70px -20px rgba(0,0,0,.65);
  transform-origin: center center;
}
.work-frame.phone-frame iframe,
.phone-modal-shell iframe{
  position: absolute; left: 0; top: 0;
  width: 440px; height: 956px;
  border: 0;
  background: #f9f5ee;
  transform: none;
}
.work-frame.phone-frame iframe{ pointer-events: none; }
.phone-modal-shell{ box-shadow: 0 0 0 7px #17110d, 0 40px 80px -24px rgba(0,0,0,.75); }

/* ============================================================
   10. 技能模块
   ============================================================ */
.skill-item{ margin-bottom: 22px; }
.bar-track{ height: 7px; border-radius: 99px; background: var(--border); overflow: hidden; }
.bar-fill{
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px -2px var(--glow);
  transition: width 1.5s cubic-bezier(.2,.8,.2,1) var(--d,0ms);
}
.skill-item.is-in .bar-fill{ width: var(--v, 0%); }
.skill-num{ font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); font-size: .9rem; }

.skill-panel{ padding: 26px 26px 4px; border-radius: 22px; }
.panel-head{ display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 20px; font-size: 1.02rem; }
.panel-head i{ color: var(--accent); }

/* ============================================================
   11. 联系方式
   ============================================================ */
.contact-card{
  padding: 26px; border-radius: 20px;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .4s;
}
.contact-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }

/* 社交图标 3D 翻转 */
.social{
  width: 56px; height: 56px; perspective: 700px; display: block;
}
.social .flip{
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.social:hover .flip{ transform: rotateY(180deg); }
.social .face{
  position: absolute; inset: 0; border-radius: 16px; display: grid; place-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--border); font-size: 1.2rem;
}
.social .front{ background: var(--surface); color: var(--text-dim); }
.social .back{
  transform: rotateY(180deg); color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 30px -14px var(--glow);
}
.social:hover .front{ border-color: transparent; }

/* 输入框：聚焦高亮 + 宽度延展（下划线延展动画） */
.field{ position: relative; }
.field input, .field textarea{
  width: 100%; padding: 13px 4px 11px; font-size: .95rem; color: var(--text);
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  outline: none; font-family: inherit; resize: none;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--text-faint); }
.field .bar{
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.field input:focus ~ .bar, .field textarea:focus ~ .bar{ width: 100%; }
.field input:focus, .field textarea:focus{ color: var(--accent); }

/* ============================================================
   11.1 留言板：提交状态 / 管理员面板 / 轻提示
   ============================================================ */
#formStatus.ok { color: #22c55e; }
#formStatus.err{ color: #f87171; }

.admin-panel{
  position: fixed; inset: 0; z-index: 80; display: none;
  padding: 84px 20px 20px;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.admin-panel.open{ display: block; animation: adminIn .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes adminIn{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }

.admin-sheet{
  max-width: 860px; margin: 0 auto; max-height: calc(100svh - 108px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--border-strong);
  background: var(--surface-solid); box-shadow: var(--shadow-lg);
}
.admin-head{ display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.admin-body{ padding: 18px 22px 26px; overflow-y: auto; }
.msg-item{ padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); margin-bottom: 12px; }
.msg-meta{ display: flex; flex-wrap: wrap; gap: 12px; font-size: .76rem; color: var(--text-faint); }
.msg-text{ margin-top: 8px; font-size: .93rem; white-space: pre-wrap; word-break: break-word; }

/* 管理面板：页签 / 筛选栏 / 统计 / 口令输入 */
.admin-tabs{ display: flex; gap: 6px; padding: 12px 22px 0; border-bottom: 1px solid var(--border); }
.admin-tab{
  padding: 8px 16px; font-size: .86rem; color: var(--text-faint);
  border: 1px solid transparent; border-bottom: none; border-radius: 10px 10px 0 0;
  background: transparent; cursor: pointer; transition: color .2s ease, background .2s ease;
}
.admin-tab:hover{ color: var(--text); }
.admin-tab.on{
  color: var(--text); background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 -1px 0 var(--accent) inset;
}
.admin-filters{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
}
.flt-input{
  padding: 8px 11px; font-size: .82rem; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); outline: none;
}
.flt-input:focus{ border-color: var(--accent); }
.admin-stats{ font-size: .76rem; color: var(--text-faint); margin-left: auto; }

.admin-gate{
  position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.admin-gate[hidden]{ display: none; }
.admin-gate-box{
  width: min(340px, 88vw); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  border-radius: 18px; border: 1px solid var(--border-strong);
  background: var(--surface-solid); box-shadow: var(--shadow-lg);
}
.admin-gate-box label{ font-size: .86rem; color: var(--text-faint); }
.admin-gate-box input{
  padding: 10px 12px; font-size: .92rem; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); outline: none;
}
.admin-gate-box input:focus{ border-color: var(--accent); }
.admin-gate-msg{ min-height: 1.1em; font-size: .78rem; color: #f87171; }

.toast{
  position: fixed; left: 50%; bottom: 28px; z-index: 90;
  padding: 12px 20px; border-radius: 14px; font-size: .88rem;
  border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--text);
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transform: translate(-50%, 20px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   12. 页脚 & 回到顶部
   ============================================================ */
.footer{ position: relative; z-index: 2; border-top: 1px solid var(--border); margin-top: 90px; }
.to-top{
  position: fixed; right: 22px; bottom: 22px; z-index: 65;
  width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--border);
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); backdrop-filter: blur(12px); color: var(--text-dim);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility .45s, color .3s, border-color .3s;
}
.to-top.show{ opacity: 1; visibility: visible; transform: none; }
.to-top:hover{ color: var(--accent); border-color: var(--accent); transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 6px var(--accent-soft); }
.to-top:active{ transform: scale(.92); }

/* 卡片放大到 95vw×95vh 时让出整屏：导航条与回到顶部按钮会压在卡片上，暂时隐藏 */
body.loaded.work-zoomed .nav-bar{ transform: translateY(-110%); }
body.work-zoomed .to-top{ opacity: 0; visibility: hidden; pointer-events: none; }

/* ============================================================
   13. 响应式 / 性能简化
   ============================================================ */
@media (max-width: 767px){
  .wrap{ padding: 0 18px; }
  .blob{ filter: blur(56px); opacity: .38; }
  .fx-layer[data-speed]{ transform: none !important; }        /* 移动端关闭视差，保证流畅 */
  .geo{ display: none; }
  .dot{ width: 2px; height: 2px; }
  [data-reveal]{ transform: translateY(16px); }
  [data-reveal="left"], [data-reveal="right"]{ transform: translateY(16px); }
  [data-reveal="rot"]{ transform: translateY(18px); }
  .tl-card, .proj-detail, .nav-bar.scrolled, .glass{ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .proj-card:hover{ transform: translateY(-6px); }
  .hero{ padding-top: 76px; }
}
/* 尊重系统「减弱动态效果」偏好 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html{ scroll-behavior: auto; }
}

/* 图标：内置 SVG sprite，替代 Font Awesome 外链，零网络请求 */
.fa-svg{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor;flex:none;}
.fa-svg.fa-spin{animation:faSpin 1.4s linear infinite;}
@keyframes faSpin{to{transform:rotate(360deg);}}