/* =========================================================================
   那喀索斯 · 个人作品集  —  多巴胺潮玩风 全局样式
   这里只负责“好看”。改内容请去 data/content.js

   ▸ 想换整体配色：改下面 :root 里的色值，或点页面右下角的主题按钮切换
   ▸ 想换主色：改 --c1 / --c2 / --c3 …
   ========================================================================= */

/* ---------- 0. 设计变量 ---------- */
:root{
  /* 默认配色：多巴胺（奶油底 + 电光蓝 / 珊瑚粉 / 青柠） */
  --bg:      #FFF7EE;
  --bg-soft: #FFEFF6;
  --card:    #FFFFFF;
  --ink:     #15121B;      /* 主文字 & 描边色 */
  --ink-2:   #514B5C;      /* 次级文字 */
  --muted:   #8C8697;      /* 弱化文字 */

  --c1: #2F6BFF;           /* 电光蓝 */
  --c2: #FF3D8B;           /* 珊瑚粉 */
  --c3: #B8E60A;           /* 青柠 */
  --c4: #FF8A00;           /* 蜜橘 */
  --c5: #8B5CF6;           /* 葡萄紫 */
  --c6: #00D6BE;           /* 薄荷青 */

  --mesh-a: rgba(47,107,255,.30);
  --mesh-b: rgba(255,61,139,.26);
  --mesh-c: rgba(184,230,10,.34);
  --mesh-d: rgba(255,138,0,.24);

  --accent: var(--c1);
  --shadow: 7px 7px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --r: 20px;
  --r-sm: 12px;
  --r-pill: 999px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --bounce:   cubic-bezier(.34,1.56,.64,1);
  --maxw: 1240px;
  --nav-h: 78px;
}

/* 两套配色（由 render.js 写到 :root 上）
   默认 :root = 白天模式（多巴胺亮色）
   .theme-neon  = 夜晚模式（霓虹暗色） */
.theme-neon{
  --bg:#0E0B16; --bg-soft:#17102A; --card:#1A1428; --ink:#F4F1FF; --ink-2:#C3BCDE; --muted:#8E86AD;
  /* 强调色：用于文字、描边、小圆点、进度条等「细线/亮点」，保持高亮 */
  --c1:#00E5FF; --c2:#FF2D9B; --c3:#C6FF3D; --c4:#FF8A00; --c5:#A78BFA; --c6:#00FFC2;
  /* 填充色：用于大块彩色底，降饱和压暗，既不晃眼又保证文字清晰 */
  --f1:#12617A; --f2:#8E1055; --f3:#4A6B0A; --f4:#8A4400; --f5:#4B3A9E; --f6:#0E5F4C;
  --mesh-a: rgba(0,229,255,.15); --mesh-b: rgba(255,45,155,.13);
  --mesh-c: rgba(198,255,61,.09); --mesh-d: rgba(167,139,250,.14);
}

/* ===== 夜晚模式：把「满亮度彩色填充块」换成降饱和深色面板 =====
   原来的 --c1~--c6 在暗色主题下全是高明度色，做大色块会晃眼、白字也看不清；
   这里只把「大面积填充」换成深色，文字/描边/小圆点仍用高亮强调色。
   所有选择器都带 .theme-neon 前缀，白天模式完全不受影响。 */
.theme-neon .eyebrow{ background:var(--f3); }
.theme-neon .btn:hover{ background:var(--f3); }
.theme-neon .btn--solid{ background:var(--f2); }
.theme-neon .btn--solid:hover{ background:var(--f1); }
.theme-neon .brand__mark{ background:linear-gradient(135deg,var(--f1),var(--f2)); }
.theme-neon .nav__link:hover{ background:var(--f3); }
.theme-neon .nav__link.is-active{ background:var(--f1); }
.theme-neon .nav__cta{ background:var(--f2); }
.theme-neon .nav__cta:hover{ background:var(--f4); }
.theme-neon .avatar__mark{ background:var(--f2); }
.theme-neon .sticker:nth-of-type(1){ background:var(--f3); }
.theme-neon .sticker:nth-of-type(2){ background:var(--f2); }
.theme-neon .sticker:nth-of-type(3){ background:var(--f6); }
.theme-neon .sticker:nth-of-type(4){ background:var(--f4); }
.theme-neon .marquee{ background:var(--f3); }
.theme-neon .stat:nth-child(1){ background:var(--f1); }
.theme-neon .stat:nth-child(2){ background:var(--f2); }
.theme-neon .stat:nth-child(3){ background:var(--f4); }
.theme-neon .stat:nth-child(4){ background:var(--f3); }
.theme-neon .card__ico{ background:var(--f3); }
.theme-neon .work__media{ background:linear-gradient(140deg,var(--f3),var(--f6)); }
.theme-neon .work__view{ background:var(--f3); }
.theme-neon .work__mask{ background:linear-gradient(to top, color-mix(in srgb, var(--bg) 86%, transparent), transparent 62%); }
.theme-neon .stack span:nth-child(6n+1):hover{ background:var(--f1); }
.theme-neon .stack span:nth-child(6n+2):hover{ background:var(--f2); }
.theme-neon .stack span:nth-child(6n+3):hover{ background:var(--f3); }
.theme-neon .stack span:nth-child(6n+4):hover{ background:var(--f4); }
.theme-neon .stack span:nth-child(6n+5):hover{ background:var(--f5); }
.theme-neon .stack span:nth-child(6n+6):hover{ background:var(--f6); }
.theme-neon .filter button:hover{ background:var(--f3); }
.theme-neon .filter button.is-on{ background:var(--f1); }
.theme-neon .wdetail__meta > div:nth-child(1){ background:var(--f1); }
.theme-neon .wdetail__meta > div:nth-child(2){ background:var(--f3); }
.theme-neon .wdetail__meta > div:nth-child(3){ background:var(--f2); }
.theme-neon .wdetail__meta > div:nth-child(4){ background:var(--f6); }
.theme-neon .wdetail__cover{ background:linear-gradient(140deg,var(--f4),var(--f2)); }
.theme-neon .gallery > *{ background:linear-gradient(140deg,var(--f5),var(--f1)); }
.theme-neon .about__portrait{ background:linear-gradient(150deg,var(--f3),var(--f1)); }
.theme-neon .item__list li::before{ background:var(--f3); }
.theme-neon .contact__mail{ background:var(--f3); }
.theme-neon .contact__mail:hover{ background:var(--f2); }
.theme-neon .contact__cell:nth-child(1){ background:var(--f1); }
.theme-neon .contact__cell:nth-child(2){ background:var(--f3); }
.theme-neon .contact__cell:nth-child(3){ background:var(--f2); }
.theme-neon .socials a:hover{ background:var(--f5); }
.theme-neon .footer__links a:hover{ background:var(--f3); }
/* 图片在暗色下略微压暗，减少大面积亮色插画刺眼 */
.theme-neon img{ filter:brightness(.9); }

/* ---------- 1. 基础重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
dl,dd{ margin:0; }
h1,h2,h3,h4{ margin:0; font-weight:800; line-height:1.06; letter-spacing:-.03em; }
p{ margin:0; }
::selection{ background:var(--c3); color:var(--ink); }

::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--bg-soft); }
::-webkit-scrollbar-thumb{ background:var(--c1); border:2px solid var(--bg-soft); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--c2); }

/* 彩色网格底 + 颗粒 */
body::before{
  content:""; position:fixed; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, var(--mesh-a) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%,  var(--mesh-b) 0%, transparent 40%),
    radial-gradient(circle at 78% 82%, var(--mesh-c) 0%, transparent 44%),
    radial-gradient(circle at 18% 88%, var(--mesh-d) 0%, transparent 42%);
  animation:meshFloat 22s ease-in-out infinite alternate;
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@keyframes meshFloat{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-2%,2%,0) scale(1.06); }
  100%{ transform:translate3d(2%,-2%,0) scale(1.02); }
}
.nav,.drawer,.hero,.marquee,.section,.footer,.progress,.palette,.cursor{ position:relative; z-index:2; }

/* ---------- 2. 排版 ---------- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.section{ padding:130px 0; position:relative; }
.section--tight{ padding:92px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); background:var(--c3); border:2px solid var(--ink);
  border-radius:var(--r-pill); padding:7px 16px; box-shadow:var(--shadow-sm);
  transform:rotate(-1.5deg); margin-bottom:28px;
}
.display{
  font-size:clamp(40px, 7.2vw, 96px); line-height:.98; letter-spacing:-.045em; font-weight:900;
}
.h2{ font-size:clamp(28px, 4vw, 52px); line-height:1.06; font-weight:900; }
.h3{ font-size:21px; font-weight:800; }
.lede{ color:var(--ink-2); font-size:17.5px; max-width:62ch; line-height:1.9; font-weight:500; }
.muted{ color:var(--muted); font-weight:600; }
.accent{ color:var(--accent); }
.serif{ font-family:var(--serif); font-style:italic; font-weight:400; }

/* 渐变动画文字 */
.grad-text{
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c4),var(--c5),var(--c1));
  background-size:320% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 7s linear infinite;
}
@keyframes gradShift{ to{ background-position:320% 0; } }

.sec-head{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:32px; flex-wrap:wrap; margin-bottom:64px; }

.link-u{ position:relative; display:inline-block; font-weight:700; }
.link-u::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:2px;
  background:var(--ink); transform-origin:right; transition:transform .45s var(--ease);
}
.link-u:hover::after{ transform:scaleX(0); transform-origin:left; }

/* ---------- 3. 按钮（潮玩硬阴影 + 磁吸） ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 30px;
  background:var(--card); border:2px solid var(--ink); border-radius:var(--r-pill);
  font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:var(--shadow-sm); position:relative;
  transition:transform .3s var(--bounce), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ transform:translate(-2px,-4px); box-shadow:9px 9px 0 var(--ink); background:var(--c3); }
.btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
.btn--solid{ background:var(--c2); color:#fff; }
.btn--solid:hover{ background:var(--c1); color:#fff; }

/* ---------- 4. 顶部滚动进度条 ---------- */
.progress{
  position:fixed; top:0; left:0; height:6px; width:0; z-index:950;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c4),var(--c3));
  background-size:200% 100%; animation:gradShift 4s linear infinite;
  border-bottom:2px solid var(--ink); transition:width .1s linear;
}

/* ---------- 5. 自定义光标 ---------- */
.cursor,.cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; mix-blend-mode:normal; }
.cursor{ width:10px; height:10px; background:var(--c2); border:2px solid var(--ink);
  transform:translate(-50%,-50%); transition:transform .12s var(--ease); }
.cursor-ring{
  width:38px; height:38px; border:2px solid var(--ink); background:transparent;
  transform:translate(-50%,-50%); transition:width .3s var(--bounce), height .3s var(--bounce), background .3s;
}
body.cursor-hot .cursor-ring{ width:64px; height:64px; background:var(--c3); }
body.cursor-hot .cursor{ transform:translate(-50%,-50%) scale(.4); }
.trail{ position:fixed; width:8px; height:8px; border-radius:50%; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); opacity:.55; }
@media (pointer:coarse){ .cursor,.cursor-ring,.trail{ display:none !important; } }
body.has-cursor *{ cursor:none !important; }

/* ---------- 6. 导航 ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:2px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom-color:var(--ink);
}
.nav__inner{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  width:36px; height:36px; border:2px solid var(--ink); border-radius:12px;
  display:grid; place-items:center; font-weight:900; font-size:16px; color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:3px 3px 0 var(--ink);
  transition:transform .5s var(--bounce);
}
.brand:hover .brand__mark{ transform:rotate(-12deg) scale(1.06); }
.brand__txt{ font-size:17px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.nav__links{ display:flex; align-items:center; gap:6px;
  background:var(--card); border:2px solid var(--ink); border-radius:var(--r-pill);
  padding:6px; box-shadow:var(--shadow-sm); }
.nav__link{
  font-size:12.5px; font-weight:800; letter-spacing:.04em; padding:9px 16px;
  border-radius:var(--r-pill); color:var(--ink-2); transition:.3s var(--ease);
}
.nav__link:hover{ color:var(--ink); background:var(--c3); }
.nav__link.is-active{ color:#fff; background:var(--c1); }
.nav__cta{ font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  background:var(--c2); color:#fff; border:2px solid var(--ink); border-radius:var(--r-pill);
  padding:11px 22px; box-shadow:var(--shadow-sm); transition:.3s var(--bounce); }
.nav__cta:hover{ transform:translate(-2px,-3px); box-shadow:6px 6px 0 var(--ink); background:var(--c4); }

.burger{ display:none; width:46px; height:46px; align-items:center; justify-content:center;
  border:2px solid var(--ink); border-radius:12px; background:var(--card); box-shadow:3px 3px 0 var(--ink); }
.burger i{ display:block; width:20px; height:2.5px; background:var(--ink); position:relative; border-radius:2px; transition:.35s var(--ease); }
.burger i::before,.burger i::after{ content:""; position:absolute; left:0; width:20px; height:2.5px; background:var(--ink); border-radius:2px; transition:.35s var(--ease); }
.burger i::before{ top:-7px; } .burger i::after{ top:7px; }
body.menu-open .burger i{ background:transparent; }
body.menu-open .burger i::before{ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger i::after{ transform:translateY(-7px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:880; background:var(--bg-soft);
  display:flex; flex-direction:column; justify-content:center; padding:0 32px;
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease-out); visibility:hidden;
}
body.menu-open .drawer{ clip-path:inset(0 0 0 0); visibility:visible; }
.drawer a{
  font-size:clamp(30px,9vw,54px); font-weight:900; padding:14px 0; letter-spacing:-.03em;
  border-bottom:2px dashed var(--ink); display:flex; align-items:baseline; gap:14px;
  opacity:0; transform:translateY(24px); transition:.55s var(--ease-out);
}
body.menu-open .drawer a{ opacity:1; transform:none; }
body.menu-open .drawer a:nth-child(1){ transition-delay:.10s }
body.menu-open .drawer a:nth-child(2){ transition-delay:.16s }
body.menu-open .drawer a:nth-child(3){ transition-delay:.22s }
body.menu-open .drawer a:nth-child(4){ transition-delay:.28s }
body.menu-open .drawer a:nth-child(5){ transition-delay:.34s }
.drawer a:hover{ color:var(--c1); }
.drawer a em{ font-style:normal; font-size:11px; font-weight:800; letter-spacing:.2em; color:var(--muted); }
.drawer__foot{ margin-top:44px; font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--muted); }

/* ---------- 7. 首屏 ---------- */
.hero{ min-height:100svh; display:flex; align-items:center; position:relative; padding-top:var(--nav-h); overflow:hidden; }
.hero__glow{ position:absolute; width:min(620px,72vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--mesh-b) 0%, transparent 68%); top:-14%; right:-8%; filter:blur(6px); animation:bob 9s ease-in-out infinite; }
.hero__glow--2{ top:auto; bottom:-22%; left:-14%; right:auto;
  background:radial-gradient(circle, var(--mesh-a) 0%, transparent 68%); animation-delay:-4s; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-26px) } }
.hero__grid{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(var(--ink) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 78%); }
.hero__dots{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero .container{ position:relative; z-index:3; }
.hero__name{ font-size:clamp(48px,11.5vw,142px); line-height:.9; letter-spacing:-.05em; margin:16px 0 0; font-weight:900; }
.hero__name .zh{
  display:block; font-weight:900; font-size:clamp(15px,1.9vw,21px); letter-spacing:.24em;
  color:var(--ink); margin-top:26px;
}
.hero__tag{ font-size:clamp(18px,2.2vw,25px); font-weight:700; line-height:1.6; max-width:28ch; margin-top:34px; }
.hero__body{ color:var(--ink-2); font-size:15.5px; line-height:1.95; max-width:52ch; margin-top:18px; font-weight:500; }
.hero__meta{ display:flex; align-items:center; gap:14px; margin-top:48px; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  font-size:10px; font-weight:900; letter-spacing:.28em; text-transform:uppercase; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:3;
}
.hero__scroll i{ width:3px; height:46px; background:linear-gradient(var(--c2),transparent); animation:scrollLine 2.2s var(--ease) infinite; }
@keyframes scrollLine{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 100%{transform:scaleY(1);transform-origin:bottom;opacity:0} }

.hero__side{ display:grid; grid-template-columns:1.3fr .82fr; gap:64px; align-items:center; }

/* 头像：潮玩描边框 */
.avatar{
  position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:32px;
  border:3px solid var(--ink); box-shadow:12px 12px 0 var(--ink);
  background:linear-gradient(150deg,var(--c3),var(--c1));
  transform:rotate(2.5deg); transition:transform .5s var(--bounce);
}
.avatar:hover{ transform:rotate(-2deg) scale(1.02); }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar__tag{
  position:absolute; left:14px; bottom:14px; padding:7px 14px; font-size:10px; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase; background:var(--ink); color:var(--bg);
  border-radius:var(--r-pill); transform:rotate(-3deg);
}
.avatar__mark{
  position:absolute; right:-16px; top:-16px; width:70px; height:70px; border-radius:50%;
  border:3px solid var(--ink); background:var(--c2); color:#fff; display:grid; place-items:center;
  font-size:24px; font-weight:900; animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* 漂浮贴纸 */
.stickers{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.sticker{
  position:absolute; z-index:4; padding:9px 18px; border:2px solid var(--ink); border-radius:var(--r-pill);
  font-size:11px; font-weight:900; letter-spacing:.08em; background:var(--card); box-shadow:var(--shadow-sm);
  animation:floaty 6s ease-in-out infinite; white-space:nowrap;
}
.sticker:nth-of-type(1){ background:var(--c3); top:16%;  left:2%;  animation-delay:-.4s; }
.sticker:nth-of-type(2){ background:var(--c2); color:#fff; top:8%;  right:6%; animation-delay:-1.8s; }
.sticker:nth-of-type(3){ background:var(--c6); top:70%; left:0%;  animation-delay:-3.1s; }
.sticker:nth-of-type(4){ background:var(--c4); color:#fff; bottom:12%; right:2%; animation-delay:-4.6s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(-3deg) } 50%{ transform:translateY(-16px) rotate(3deg) } }

/* ---------- 8. 跑马灯 ---------- */
.marquee{
  overflow:hidden; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  background:var(--c3); padding:22px 0; display:flex; user-select:none;
}
.marquee__track{ display:flex; gap:48px; padding-right:48px; animation:marquee 30s linear infinite; white-space:nowrap; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{ font-size:28px; font-weight:900; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:48px; color:var(--ink); }
.marquee span::after{ content:"✦"; font-size:15px; }
.marquee span:nth-child(3n+1){ color:var(--ink); }
.marquee span:nth-child(3n+2){ color:var(--c1); }
.marquee span:nth-child(3n+3){ color:var(--c2); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 9. 数据 ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.stat{
  padding:38px 28px; border:3px solid var(--ink); border-radius:var(--r); background:var(--card);
  box-shadow:var(--shadow); transition:transform .35s var(--bounce), box-shadow .35s var(--ease);
}
.stat:nth-child(1){ background:var(--c1); color:#fff; }
.stat:nth-child(2){ background:var(--c2); color:#fff; }
.stat:nth-child(3){ background:var(--c4); color:#fff; }
.stat:nth-child(4){ background:var(--c3); }
.stat:hover{ transform:translate(-4px,-6px) rotate(-1.5deg); box-shadow:13px 13px 0 var(--ink); }
.stat__num{ font-size:clamp(36px,4.6vw,62px); font-weight:900; line-height:1; letter-spacing:-.05em; }
.stat__label{ margin-top:12px; font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; opacity:.85; }

/* ---------- 10. 能力卡片 ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  background:var(--card); padding:42px 34px 46px; border:3px solid var(--ink);
  border-radius:var(--r); box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .4s var(--bounce), box-shadow .4s var(--ease), background .4s;
}
.card:hover{ transform:translate(-4px,-8px) rotate(1deg); box-shadow:14px 16px 0 var(--ink); }
.card:nth-child(1):hover{ background:color-mix(in srgb, var(--c1) 14%, var(--card)); }
.card:nth-child(2):hover{ background:color-mix(in srgb, var(--c2) 14%, var(--card)); }
.card:nth-child(3):hover{ background:color-mix(in srgb, var(--c4) 14%, var(--card)); }
.card__ico{
  width:58px; height:58px; display:grid; place-items:center; font-size:24px; margin-bottom:24px;
  border:2.5px solid var(--ink); border-radius:18px; background:var(--c3); box-shadow:var(--shadow-sm);
  transition:transform .5s var(--bounce);
}
.card:hover .card__ico{ transform:rotate(-14deg) scale(1.05); }
.card__t{ font-size:20px; font-weight:900; margin-bottom:12px; }
.card__d{ color:var(--ink-2); font-size:14.5px; line-height:1.9; font-weight:500; }
.card__n{ position:absolute; right:26px; top:30px; font-size:13px; font-weight:900; color:var(--muted); letter-spacing:.12em; }

/* ---------- 11. 工具箱标签云 ---------- */
.stack{ display:flex; flex-wrap:wrap; gap:14px; }
.stack span{
  font-size:15px; font-weight:800; padding:12px 24px; border:2.5px solid var(--ink);
  border-radius:var(--r-pill); background:var(--card); box-shadow:var(--shadow-sm);
  transition:transform .3s var(--bounce), background .3s, color .3s;
}
.stack span:nth-child(6n+1):hover{ background:var(--c1); color:#fff; }
.stack span:nth-child(6n+2):hover{ background:var(--c2); color:#fff; }
.stack span:nth-child(6n+3):hover{ background:var(--c3); }
.stack span:nth-child(6n+4):hover{ background:var(--c4); color:#fff; }
.stack span:nth-child(6n+5):hover{ background:var(--c5); color:#fff; }
.stack span:nth-child(6n+6):hover{ background:var(--c6); }
.stack span:hover{ transform:translateY(-6px) rotate(-2.5deg) scale(1.06); box-shadow:7px 8px 0 var(--ink); }

/* ---------- 12. 作品卡片 ---------- */
.works-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; }
.works-grid--3{ grid-template-columns:repeat(3,1fr); gap:28px; }

.work{
  display:block; transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .4s var(--ease); will-change:transform;
}
.work:hover{ --ty:-8px; }
.work__media{
  position:relative; aspect-ratio:16/10; overflow:hidden; border:3px solid var(--ink);
  border-radius:var(--r); box-shadow:var(--shadow); background:linear-gradient(140deg,var(--c3),var(--c6));
  transition:box-shadow .35s var(--ease);
}
.work:hover .work__media{ box-shadow:13px 14px 0 var(--ink); }
.work__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.work:hover .work__media img{ transform:scale(1.07) rotate(-.6deg); }
.work__mask{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:24px;
  background:linear-gradient(to top, color-mix(in srgb, var(--ink) 62%, transparent), transparent 62%);
  opacity:0; transition:opacity .4s var(--ease); }
.work:hover .work__mask{ opacity:1; }
.work__view{
  font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  background:var(--c3); color:var(--ink); border:2px solid var(--ink); border-radius:var(--r-pill);
  padding:9px 18px; box-shadow:3px 3px 0 var(--ink); display:inline-flex; align-items:center; gap:9px;
}
.work__view::after{ content:"→"; transition:transform .35s var(--ease); }
.work:hover .work__view::after{ transform:translateX(5px); }
.work__year{
  position:absolute; right:14px; top:14px; font-size:11px; font-weight:900; letter-spacing:.1em;
  background:var(--card); border:2px solid var(--ink); border-radius:var(--r-pill); padding:5px 13px;
  box-shadow:2px 2px 0 var(--ink);
}
.work__info{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-top:22px; }
.work__title{ font-size:20px; font-weight:900; letter-spacing:-.02em; }
.work__sub{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.work__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:15px; }
.tag{
  font-size:11px; font-weight:800; letter-spacing:.06em; border:2px solid var(--ink);
  border-radius:var(--r-pill); padding:5px 13px; background:var(--card);
}

/* 筛选栏 */
.filter{ display:flex; gap:12px; flex-wrap:wrap; }
.filter button{
  font-size:12.5px; font-weight:800; letter-spacing:.04em; color:var(--ink);
  border:2.5px solid var(--ink); border-radius:var(--r-pill); padding:11px 22px;
  background:var(--card); box-shadow:var(--shadow-sm); transition:.3s var(--bounce);
}
.filter button em{ font-style:normal; font-size:9px; font-weight:800; letter-spacing:.14em; opacity:.5; margin-left:5px; }
.filter button:hover{ transform:translate(-2px,-3px); box-shadow:6px 6px 0 var(--ink); background:var(--c3); }
.filter button.is-on{ background:var(--c1); color:#fff; transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
.is-hidden{ display:none !important; }

/* ---------- 13. 作品详情 ---------- */
.wdetail__hero{ padding-top:calc(var(--nav-h) + 80px); }
.wdetail__meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:56px 0 60px; }
.wdetail__meta > div{
  padding:26px 24px; border:3px solid var(--ink); border-radius:var(--r); background:var(--card);
  box-shadow:var(--shadow-sm);
}
.wdetail__meta > div:nth-child(1){ background:var(--c1); color:#fff; }
.wdetail__meta > div:nth-child(2){ background:var(--c3); }
.wdetail__meta > div:nth-child(3){ background:var(--c2); color:#fff; }
.wdetail__meta > div:nth-child(4){ background:var(--c6); }
.wdetail__meta dt{ font-size:10.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; opacity:.8; margin-bottom:9px; }
.wdetail__meta dd{ font-size:15px; font-weight:800; }
.wdetail__cover{ aspect-ratio:16/9; overflow:hidden; border:3px solid var(--ink); border-radius:var(--r);
  box-shadow:12px 12px 0 var(--ink); background:linear-gradient(140deg,var(--c4),var(--c2)); }
.wdetail__cover img{ width:100%; height:100%; object-fit:cover; }
.wdetail__body{ max-width:780px; }
.wdetail__block{ margin-bottom:48px; padding-left:24px; border-left:4px solid var(--c1); }
.wdetail__block:nth-child(2){ border-left-color:var(--c2); }
.wdetail__block:nth-child(3){ border-left-color:var(--c4); }
.wdetail__block:nth-child(4){ border-left-color:var(--c5); }
.wdetail__block h3{ font-size:13px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; margin-bottom:14px; }
.wdetail__block p{ color:var(--ink-2); font-size:16.5px; line-height:2; font-weight:500; }
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.gallery > *{ aspect-ratio:16/10; overflow:hidden; border:3px solid var(--ink); border-radius:var(--r);
  box-shadow:var(--shadow); background:linear-gradient(140deg,var(--c5),var(--c1)); }
.gallery img{ width:100%; height:100%; object-fit:cover; }
.gallery > *:first-child{ grid-column:span 2; aspect-ratio:16/8; }
.wdetail__nav{ display:flex; justify-content:space-between; gap:24px; border-top:3px dashed var(--ink);
  padding-top:34px; margin-top:80px; }

/* ---------- 14. 关于我 ---------- */
.about__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:start; }
.about__portrait{
  aspect-ratio:4/5; overflow:hidden; border:3px solid var(--ink); border-radius:32px;
  box-shadow:12px 12px 0 var(--ink); background:linear-gradient(150deg,var(--c3),var(--c1));
  position:sticky; top:calc(var(--nav-h) + 30px); transform:rotate(-2deg);
}
.about__portrait img{ width:100%; height:100%; object-fit:cover; }
.about__text p{ color:var(--ink-2); font-size:16.5px; line-height:2.05; margin-bottom:22px; font-weight:500; }
.about__text p:first-child{ font-size:19px; color:var(--ink); font-weight:600; }

.skills{ display:grid; grid-template-columns:repeat(2,1fr); gap:46px 60px; margin-top:8px; }
.skill__group{ font-size:12px; font-weight:900; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:24px; padding-bottom:12px; border-bottom:3px solid var(--ink); }
.skill{ margin-bottom:22px; }
.skill__top{ display:flex; justify-content:space-between; align-items:baseline; font-size:15px; font-weight:800; margin-bottom:9px; }
.skill__top em{ font-style:normal; font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.08em; }
.bar{ height:12px; background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-pill); overflow:hidden; }
.bar i{ display:block; height:100%; width:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--c1),var(--c2)); transition:width 1.3s var(--ease-out); }
.skill:nth-child(2) .bar i{ background:linear-gradient(90deg,var(--c2),var(--c4)); }
.skill:nth-child(3) .bar i{ background:linear-gradient(90deg,var(--c4),var(--c3)); }
.skill:nth-child(4) .bar i{ background:linear-gradient(90deg,var(--c5),var(--c1)); }

.timeline{ padding-left:8px; }
.tl{ position:relative; padding:0 0 44px 40px; border-left:3px dashed var(--ink); }
.tl:last-child{ padding-bottom:0; border-left-color:transparent; }
.tl::before{ content:""; position:absolute; left:-13px; top:6px; width:20px; height:20px; border-radius:50%;
  background:var(--c3); border:3px solid var(--ink); transition:.35s var(--bounce); }
.tl:nth-child(1)::before{ background:var(--c1); }
.tl:nth-child(2)::before{ background:var(--c2); }
.tl:nth-child(3)::before{ background:var(--c4); }
.tl:hover::before{ transform:scale(1.35); }
.tl__y{ font-size:12px; font-weight:900; letter-spacing:.14em; color:var(--accent); }
.tl__t{ font-size:19px; font-weight:900; margin:8px 0 5px; }
.tl__o{ font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.tl__d{ color:var(--ink-2); font-size:14.5px; margin-top:12px; line-height:1.9; font-weight:500; }

/* ---------- 15. 简历 ---------- */
.resume__head{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; }
.resume__contact{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:28px; }
.resume__contact span{
  font-size:13.5px; font-weight:700; border:2px solid var(--ink); border-radius:var(--r-pill);
  padding:7px 16px; background:var(--card); box-shadow:2px 2px 0 var(--ink);
}
.resume__contact b{ font-weight:900; letter-spacing:.08em; color:var(--muted); margin-right:7px; }
.resume__sec{ display:grid; grid-template-columns:210px 1fr; gap:44px; padding:52px 0; border-top:3px solid var(--ink); }
.resume__sec > h3{ font-size:12px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; padding-top:5px; }
.resume__sec:nth-child(1) > h3{ color:var(--c1); }
.resume__sec:nth-child(2) > h3{ color:var(--c2); }
.resume__sec:nth-child(3) > h3{ color:var(--c4); }
.resume__sec:nth-child(4) > h3{ color:var(--c5); }
.item{ margin-bottom:40px; }
.item:last-child{ margin-bottom:0; }
.item__top{ display:flex; justify-content:space-between; gap:24px; align-items:baseline; flex-wrap:wrap; }
.item__t{ font-size:19px; font-weight:900; }
.item__p{ font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--muted); white-space:nowrap;
  border:2px solid var(--ink); border-radius:var(--r-pill); padding:4px 12px; background:var(--bg-soft); }
.item__s{ font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--ink-2); margin-top:8px; }
.item__d{ color:var(--ink-2); font-size:14.5px; margin-top:13px; line-height:1.95; font-weight:500; }
.item__list{ margin-top:13px; }
.item__list li{ position:relative; padding-left:22px; font-size:14.5px; color:var(--ink-2); line-height:1.95; margin-bottom:8px; font-weight:500; }
.item__list li::before{ content:""; position:absolute; left:2px; top:12px; width:9px; height:9px;
  border-radius:3px; background:var(--c3); border:2px solid var(--ink); }
.kv{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.kv span{ font-size:12.5px; font-weight:700; border:2px solid var(--ink); padding:6px 15px;
  border-radius:var(--r-pill); background:var(--card); }

/* ---------- 16. 联系 ---------- */
.contact__big{ font-size:clamp(30px,5.6vw,74px); line-height:1.1; letter-spacing:-.035em; font-weight:900; }
.contact__mail{
  display:inline-block; margin-top:38px; font-size:clamp(20px,3vw,38px); font-weight:900;
  background:var(--c3); border:3px solid var(--ink); border-radius:var(--r-pill); padding:10px 28px;
  box-shadow:var(--shadow); transition:.35s var(--bounce);
}
.contact__mail:hover{ transform:translate(-3px,-5px); box-shadow:11px 12px 0 var(--ink); background:var(--c2); color:#fff; }
.contact__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:70px; }
.contact__cell{ background:var(--card); padding:34px 28px; border:3px solid var(--ink);
  border-radius:var(--r); box-shadow:var(--shadow); transition:transform .35s var(--bounce); }
.contact__cell:nth-child(1){ background:var(--c1); color:#fff; }
.contact__cell:nth-child(2){ background:var(--c3); }
.contact__cell:nth-child(3){ background:var(--c2); color:#fff; }
.contact__cell:hover{ transform:translate(-3px,-6px) rotate(-1deg); }
.contact__cell dt{ font-size:10.5px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; opacity:.8; margin-bottom:11px; }
.contact__cell dd{ font-size:16px; font-weight:800; word-break:break-all; }
.socials{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.socials a{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  border:2.5px solid var(--ink); padding:10px 20px; border-radius:var(--r-pill); background:var(--card);
  box-shadow:var(--shadow-sm); transition:.3s var(--bounce); }
.socials a:hover{ transform:translate(-2px,-4px); box-shadow:6px 7px 0 var(--ink); background:var(--c5); color:#fff; }

/* ---------- 17. 页脚 ---------- */
.footer{ border-top:3px solid var(--ink); padding:74px 0 40px; margin-top:20px; }
.footer__top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.footer__name{ font-size:34px; font-weight:900; letter-spacing:-.03em; }
.footer__links{ display:flex; gap:10px; flex-wrap:wrap; }
.footer__links a{ font-size:12.5px; font-weight:800; border:2px solid var(--ink); border-radius:var(--r-pill);
  padding:8px 16px; background:var(--card); transition:.3s var(--bounce); }
.footer__links a:hover{ background:var(--c3); transform:translateY(-3px); }
.footer__bot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:52px;
  padding-top:26px; border-top:3px dashed var(--ink); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--muted); }
.to-top{ display:inline-flex; align-items:center; gap:9px; font-weight:900; color:var(--ink); }
.to-top:hover{ color:var(--c1); }

/* ---------- 18. 外观切换（Appearance · Light / Dark） ---------- */
.palette{
  position:fixed; right:22px; bottom:22px; z-index:940;
  display:flex; align-items:center; gap:12px; padding:7px 9px 7px 16px;
  background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);
}
.palette__lbl{ font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.palette b{ font-size:12px; font-weight:900; letter-spacing:.05em; line-height:1;
  padding:9px 16px; border-radius:var(--r-pill); cursor:pointer; color:var(--ink-2);
  border:2px solid transparent; background:var(--bg-soft);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--bounce); }
.palette b:hover{ transform:translateY(-2px); color:var(--ink); }
.palette b.is-on{ background:var(--ink); color:var(--bg); cursor:default; }
.palette b.is-on:hover{ transform:none; }

/* ---------- 19. 入场动效 ---------- */
.rv{ opacity:0; transform:translateY(30px) rotate(-1deg); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s }
.rv-d4{ transition-delay:.32s } .rv-d5{ transition-delay:.40s }

/* ---------- 20. 响应式 ---------- */
@media (max-width:1080px){
  .hero__side{ grid-template-columns:1fr; gap:48px; }
  .avatar{ max-width:340px; }
  .about__grid{ grid-template-columns:1fr; gap:48px; }
  .about__portrait{ position:static; max-width:400px; }
  .cards{ grid-template-columns:1fr 1fr; }
  .works-grid--3{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:1fr 1fr; }
  .resume__sec{ grid-template-columns:1fr; gap:22px; padding:40px 0; }
  .sticker:nth-of-type(4){ display:none; }
  .stickers{ display:none; }
}
@media (max-width:860px){
  .nav__links,.nav__cta{ display:none; }
  .burger{ display:flex; }
  .section{ padding:88px 0; }
  .container{ padding:0 22px; }
  .cards{ grid-template-columns:1fr; }
  .works-grid,.works-grid--3{ grid-template-columns:1fr; gap:34px; }
  .gallery{ grid-template-columns:1fr; }
  .gallery > *:first-child{ grid-column:auto; aspect-ratio:16/10; }
  .wdetail__meta{ grid-template-columns:1fr 1fr; }
  .skills{ grid-template-columns:1fr; gap:36px; }
  .contact__grid{ grid-template-columns:1fr; }
  .resume__head{ grid-template-columns:1fr; align-items:start; }
  .sec-head{ margin-bottom:44px; }
  .section--tight{ padding:64px 0; }
  .work{ --rx:0deg !important; --ry:0deg !important; }
}
@media (max-width:520px){
  .stats{ grid-template-columns:1fr; }
  .wdetail__meta{ grid-template-columns:1fr; }
  .stat{ padding:32px 24px; }
  .palette{ right:14px; bottom:14px; }
}

/* ---------- 21. 打印（简历导出 PDF） ---------- */
@media print{
  body{ background:#fff; color:#000; }
  body::before,body::after,.nav,.drawer,.footer,.no-print,.hero__glow,.hero__grid,.hero__dots,
  .palette,.progress,.cursor,.cursor-ring,.trail{ display:none !important; }
  .section{ padding:14px 0; }
  .resume__sec{ border-top:1px solid #ccc; padding:14px 0; break-inside:avoid; }
  .resume__sec > h3,.tl__y{ color:#666 !important; }
  .resume__contact span,.item__p,.kv span{ border-color:#bbb; box-shadow:none; }
  .item__d,.item__list li,.resume__contact{ color:#333 !important; }
  .rv{ opacity:1 !important; transform:none !important; }
  a{ color:#000; }
}

/* ---------- 22. 尊重「减少动态效果」 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
  .cursor,.cursor-ring,.trail{ display:none !important; }
}