/* v8 · 851 GBai 马克笔体（子集化 woff2，免费商用） */
@font-face{
  font-family:'AvenMark';
  src:url('../fonts/aven-mark-v2.woff2?v=21') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
/* ══════════════════════════════════════════
   Aven溺心海 · 个人主页样式表（浅色 v3）
   ★ 改主题色：只改下面 :root 里的几个颜色值
   ══════════════════════════════════════════ */
:root {
  --ease-mac: cubic-bezier(0.25, 0.1, 0.25, 1);      /* macOS 统一缓动 */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* 轻微回弹 */
  --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1);       /* 流水般展开 */
  --t-hover: 150ms;  /* 悬停反馈 */
  --t-page: 350ms;   /* 页面切换 */
  --bg: #f6f6f4;            /* 页面背景（暖白） */
  --bg2: #ffffff;           /* 区块背景（纯白） */
  --card: #ffffff;
  --border: rgba(23, 24, 28, 0.09);
  --text: #17181c;          /* 主文字（近黑） */
  --muted: #68707d;         /* 次要文字 */
  --accent: #0ea5e9;        /* 主强调色（天蓝） */
  --accent2: #8b5cf6;       /* 副强调色（紫罗兰） */
  --radius: 20px;
  color-scheme: light;
  --shadow: 0 10px 34px rgba(23, 24, 28, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family:'AvenMark','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,-apple-system,sans-serif;
  line-height: 1.75;
  overflow-x: hidden;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; text-decoration: none; }

/* 锚点跳转时避开顶部固定导航 */
section[id] { scroll-margin-top: 70px; }

/* ── 顶部滚动进度条 ── */
#progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ── 顶部导航（毛玻璃白） ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(246, 246, 244, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
#nav.scrolled { border-bottom-color: var(--border); background: rgba(255, 255, 255, 0.88); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-weight: 800; font-size: 1.15rem; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--muted); font-size: 0.95rem; font-weight: 500; transition: color 0.25s; }
.nav-links a:hover { color: var(--text); }

/* ── 首页 Hero ── */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden;
  background: var(--bg); }
/* 浅色极光背景：三团柔光缓慢漂移（只用 transform，60fps） */
.aurora { position: absolute; inset: 0; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55;
  animation: drift 22s ease-in-out infinite alternate; }
.aurora .b1 { width: 480px; height: 480px; left: -120px; top: -120px;
  background: radial-gradient(circle, #bae6fd, transparent 70%); }
.aurora .b2 { width: 520px; height: 520px; right: -140px; top: 20%;
  background: radial-gradient(circle, #ddd6fe, transparent 70%); animation-delay: -8s; }
.aurora .b3 { width: 420px; height: 420px; left: 30%; bottom: -160px;
  background: radial-gradient(circle, #fecdd3, transparent 70%); animation-delay: -14s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.12); }
}
.hero-inner { position: relative; z-index: 1; padding-top: 64px; will-change: transform, opacity; }
.hero-hello { color: var(--accent); letter-spacing: 4px; font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; }
.hero-name {
  font-size: clamp(3rem, 10vw, 6rem); font-weight: 900; line-height: 1.15; letter-spacing: -1px;
  margin-bottom: 18px; color: var(--text);
}
.hero-name::after { content: "."; color: var(--accent); }
.hero-bio { color: var(--muted); font-size: clamp(1rem, 2.5vw, 1.25rem); margin-bottom: 26px; max-width: 560px; }

/* 小贴纸徽章 */
.stickers { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.sticker { font-size: 0.85rem; font-weight: 700; padding: 6px 16px; border-radius: 999px;
  border: 2px solid; background: #fff; box-shadow: var(--shadow); }
.sticker.s1 { color: #0ea5e9; border-color: #bae6fd; transform: rotate(-3deg); background: #f0f9ff; }
.sticker.s2 { color: #8b5cf6; border-color: #ddd6fe; transform: rotate(2deg); background: #f5f3ff; }
.sticker.s3 { color: #f59e0b; border-color: #fde68a; transform: rotate(-2deg); background: #fffbeb; }
.sticker.s4 { color: #10b981; border-color: #a7f3d0; transform: rotate(3deg); background: #ecfdf5; }

.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

.btn { display: inline-block; padding: 12px 30px; border-radius: 999px; font-size: 1rem;
  font-weight: 700; transition: transform 0.25s, box-shadow 0.25s, background 0.25s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #fff;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35); }
.btn-primary:hover { box-shadow: 0 12px 32px rgba(14, 165, 233, 0.45); }
.btn-ghost { border: 2px solid var(--border); color: var(--text); background: #fff; }
.btn-ghost:hover { border-color: var(--accent); }

.scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: 0.85rem; z-index: 1; animation: float 2.4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ── 通用区块 / 卡片 ── */
.section { padding: 96px 0; position: relative; }
.section:nth-of-type(even) { background: var(--bg2); }

/* 章节微标签（HUD 风小字） */
.kicker { color: var(--accent); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 5px; text-transform: uppercase; margin-bottom: 10px; }

.section-title { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; margin-bottom: 12px; letter-spacing: 1px; }
.section-title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 10px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.section-sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 28px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 36px; box-shadow: var(--shadow);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.card:hover { transform: translateY(-4px); border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 20px 48px rgba(14, 165, 233, 0.16); }

/* 滚动显现动画 */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ── 关于我 ── */
.about-card { display: flex; gap: 32px; align-items: center; }
.avatar { flex: none; width: 120px; height: 120px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 12px 30px rgba(14, 165, 233, 0.35); }
.avatar-img { flex: none; width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(14, 165, 233, 0.5); }
.about-text h3 { font-size: 1.4rem; margin-bottom: 10px; }
.about-text p { color: var(--muted); margin-bottom: 18px; }
.tags { display: flex; gap: 10px; flex-wrap: wrap; }
.tags span { font-size: 0.82rem; font-weight: 600; color: var(--accent);
  border: 1.5px solid rgba(14, 165, 233, 0.4);
  padding: 4px 14px; border-radius: 999px; background: rgba(14, 165, 233, 0.08); }

/* ── 作品 ── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.project-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; }
/* 卡片依次登场（滚动叙事的节奏感） */
.project-card:nth-child(1) { transition-delay: 0s; }
.project-card:nth-child(2) { transition-delay: 0.12s; }
.project-card:nth-child(3) { transition-delay: 0.24s; }
.project-card:nth-child(4) { transition-delay: 0.36s; }
.project-cover { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.cover-1 { background: linear-gradient(135deg, #e0f2fe, #ede9fe); }
.cover-2 { background: linear-gradient(135deg, #ede9fe, #e0f2fe); }
.cover-3 { background: linear-gradient(135deg, #fef3c7, #e0f2fe); }
.project-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.project-body h3 { font-size: 1.15rem; }
.project-body p { color: var(--muted); font-size: 0.94rem; flex: 1; }
.card-link { color: var(--accent); font-size: 0.92rem; font-weight: 700; }
.card-link:hover { text-decoration: underline; }
/* 替换用真实截图时：隐藏占位封面，显示图片 */
.preview-src { display: none; }

/* ── 悬停预览弹窗（跟随鼠标） ── */
#preview { position: fixed; top: 0; left: 0; z-index: 300; width: 300px;
  pointer-events: none; will-change: transform; }
#preview .preview-inner {
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 2px solid var(--accent);
  box-shadow: 0 24px 60px rgba(23, 24, 28, 0.22);
  opacity: 0; transform: scale(0.92) rotate(-2deg);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#preview.on .preview-inner { opacity: 1; transform: scale(1) rotate(-2deg); }
.preview-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  background: #f1f5f9; border-bottom: 1px solid var(--border); }
.preview-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.preview-bar i:nth-child(1) { background: #f87171; }
.preview-bar i:nth-child(2) { background: #fbbf24; }
.preview-bar i:nth-child(3) { background: #34d399; }
.preview-bar em { font-style: normal; font-size: 0.72rem; color: var(--muted);
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 12px; margin-left: 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 170px; }
.preview-shot { height: 170px; display: flex; align-items: center; justify-content: center;
  font-size: 3.2rem; }
.preview-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 博客卡片的迷你文章预览 */
.preview-shot.preview-doc { display: block; text-align: left; padding: 20px 22px; }
.preview-doc h4 { font-size: 1.02rem; line-height: 1.5; margin-bottom: 8px; }
.preview-doc p { font-size: 0.8rem; color: var(--muted); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.preview-doc .doc-bar { height: 8px; border-radius: 4px; background: #e8edf5; margin-top: 12px; }
.preview-doc .doc-bar.short { width: 62%; margin-top: 8px; }

/* ── 联系 ── */
.contact-card { text-align: center; max-width: 640px; margin: 0 auto; }
.contact-card p { color: var(--muted); margin-bottom: 28px; }
.contact-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── 页脚 ── */
footer { padding: 36px 0; text-align: center; color: var(--muted); font-size: 0.88rem;
  border-top: 1px solid var(--border); background: var(--bg2); }

/* ── 频道链接 ── */
.channels { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.channel { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px;
  border-radius: 999px; background: #fff; border: 2px solid var(--border);
  font-weight: 700; font-size: 0.92rem; box-shadow: var(--shadow);
  transition: transform 0.25s, border-color 0.25s; }
.channel:hover { transform: translateY(-2px); border-color: var(--accent); }

/* ── 博客列表 ── */
.blog-list { display: flex; flex-direction: column; gap: 20px; }
.blog-card { display: block; padding: 28px 32px; }
.blog-card h3 { font-size: 1.25rem; margin: 10px 0 8px; line-height: 1.5; }
.blog-card > p { color: var(--muted); font-size: 0.95rem; margin-bottom: 14px; }
.blog-meta { display: flex; gap: 12px; align-items: center; font-size: 0.82rem; }
.blog-date { color: var(--muted); }
.blog-tag { color: var(--accent); font-weight: 700; background: rgba(14, 165, 233, 0.1);
  padding: 2px 12px; border-radius: 999px; }

/* ── 好物推荐 ── */
.pick-card { text-align: center; padding: 32px 24px; display: flex;
  flex-direction: column; gap: 12px; align-items: center; }
.pick-emoji { font-size: 2.6rem; }
.pick-card h3 { font-size: 1.1rem; }
.pick-card p { color: var(--muted); font-size: 0.92rem; flex: 1; }
.btn-sm { padding: 10px 26px; font-size: 0.92rem; }
.disclosure { margin-top: 28px; text-align: center; color: var(--muted); font-size: 0.82rem; }

/* ── 文章页 ── */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 120px 24px 90px; }
.back-link { display: inline-block; margin-bottom: 30px; color: var(--accent); font-weight: 700; }
.back-link:hover { text-decoration: underline; }
.article-head h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); line-height: 1.45; margin-bottom: 14px; }
.article-meta { display: flex; gap: 12px; align-items: center; color: var(--muted);
  font-size: 0.88rem; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.article-body { font-size: 1.02rem; }
.article-body p { margin-bottom: 1.4em; color: #2f333b; }
.article-body h2 { font-size: 1.32rem; margin: 2em 0 0.8em; }
.article-body ul, .article-body ol { margin: 0 0 1.4em 1.4em; color: #2f333b; }
.article-body li { margin-bottom: 0.5em; }
.article-body strong { color: var(--text); }
.article-body pre { background: #0f1420; color: #e8edf7; padding: 18px 20px;
  border-radius: 12px; overflow-x: auto; margin-bottom: 1.6em; font-size: 0.88rem; line-height: 1.7; }
.article-body p code { background: rgba(14, 165, 233, 0.12); padding: 2px 7px;
  border-radius: 6px; font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, monospace; }
.article-end { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.9rem; text-align: center; }

/* ── 手机适配 ── */
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .card { padding: 24px; }
  .about-card { flex-direction: column; text-align: center; }
  .tags { justify-content: center; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 0.88rem; }
  .hero-btns .btn { padding: 11px 24px; font-size: 0.95rem; }
  .kicker { letter-spacing: 3px; }
  .aurora i { opacity: 0.35; }
  #preview { display: none; } /* 手机没有悬停，预览弹窗不启用 */
}

/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint { animation: none; }
  .aurora i { animation: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ══════════════════════════════════════════
   v5 · 首屏互动场景 + macOS 程序坞 + 联盟区改版
   ══════════════════════════════════════════ */

/* ── 互动场景 ── */
.hero-scene { padding: 0; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene-inner { position: absolute; inset: 0; will-change: transform, opacity; }
.drag { position: absolute; cursor: grab; user-select: none; -webkit-user-select: none; z-index: 2; }
.drag.grabbing { cursor: grabbing; z-index: 5; }
.drag img { display: block; pointer-events: none; }

.char-typing { left: 12%; top: 50%; width: clamp(120px, 16vw, 200px); }
.char-crying { right: 12%; top: 50%; width: clamp(110px, 15vw, 190px); }
.char-typing img, .char-crying img { width: 100%; height: auto; }
.char-inner { position: relative; display: inline-block; transition: transform 0.35s ease; }

/* 打字小人：平时打字气泡，悬停抬头+问号 */
.typing-dots { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; transition: opacity 0.3s; }
.typing-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: tblink 1.1s infinite; }
.typing-dots i:nth-child(2) { animation-delay: 0.18s; }
.typing-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes tblink { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.q-bubble { position: absolute; top: -14px; right: 2px; font-size: 2.2rem; font-weight: 900; color: var(--accent);
  opacity: 0; transform: translateY(10px) scale(0.5); transition: opacity 0.3s, transform 0.3s; }
.char-typing.look .char-inner { transform: scale(1.28) rotate(-4deg); }
.char-typing.look .typing-dots { opacity: 0; }
.char-typing.look .q-bubble { opacity: 1; transform: translateY(-16px) scale(1); animation: qfloat 1.3s ease-in-out infinite; }
@keyframes qfloat { 0%, 100% { transform: translateY(-16px) scale(1) rotate(-6deg); } 50% { transform: translateY(-24px) scale(1.1) rotate(6deg); } }

/* 哭泣小人：平时掉眼泪，点击开心笑 */
.tear { position: absolute; bottom: 8px; left: 50%; font-size: 1.4rem; animation: tearfall 1.8s ease-in infinite; }
@keyframes tearfall { 0% { transform: translate(-50%, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-50%, 46px); opacity: 0; } }
.happy-burst { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 4.5rem; opacity: 0; transform: scale(0.3); pointer-events: none; }
.char-crying.happy .tear { display: none; }
.char-crying.happy img { filter: saturate(1.5) brightness(1.12); }
.char-crying.happy .char-inner { animation: happybounce 0.55s ease 3; }
.char-crying.happy .happy-burst { animation: happypop 1.8s ease forwards; }
@keyframes happybounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(1.08); } }
@keyframes happypop { 0% { opacity: 0; transform: scale(0.3); } 18% { opacity: 1; transform: scale(1.25); } 35% { transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }

/* 名字字母：可拖动 + 抖动 */
.name-row { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  display: flex; gap: 0.06em; font-size: clamp(2.6rem, 9vw, 5.5rem); font-weight: 900;
  letter-spacing: 0; white-space: nowrap; z-index: 2; }
.name-row .letter { position: static; cursor: grab; padding: 0 0.02em;
  background: linear-gradient(135deg, var(--text) 30%, var(--accent) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.letter-inner { display: inline-block; animation: jitter 2.6s ease-in-out infinite; }
.letter:nth-child(2n) .letter-inner { animation-delay: -0.9s; }
.letter:nth-child(3n) .letter-inner { animation-delay: -1.7s; }
@keyframes jitter {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(1.5px, -2.5px) rotate(1.6deg); }
  50% { transform: translate(-2px, 1px) rotate(-1.2deg); }
  75% { transform: translate(2px, 2px) rotate(1deg); }
}

/* ── macOS 程序坞 ── */
.dock { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 400; }
.dock-inner { display: flex; align-items: flex-end; gap: 22px; padding: 12px 26px;
  background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.7); border-radius: 24px;
  box-shadow: 0 18px 50px rgba(23,24,28,0.18); }
.dock-icon { position: relative; width: 52px; height: 52px; border: none; background: none;
  padding: 0; cursor: pointer; will-change: transform; transform-origin: bottom center; }
.dock-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18)); }
.dock-icon::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) scale(0.9); background: rgba(23,24,28,0.85); color: #fff;
  font-size: 0.78rem; font-weight: 600; padding: 6px 14px; border-radius: 10px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.dock-icon:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }
.dock-icon.bounce img { animation: dockbounce 0.6s ease; }
@keyframes dockbounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-26px); } 55% { transform: translateY(0); } 75% { transform: translateY(-12px); } }

/* v8 · 悬停图标的流畅呼吸抖动（JS 驱动 sine，比 keyframes 更顺） */
.dock-icon.jiggle img { will-change: transform; }
/* 音乐播放中的律动条 */
.dock-icon .eq { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  display: none; gap: 3px; align-items: flex-end; height: 14px; }
.dock-icon .eq i { width: 4px; background: var(--accent); border-radius: 2px; }
.dock-icon.playing .eq { display: flex; }
.dock-icon.playing .eq i { animation: eqb 0.7s ease-in-out infinite; }
.dock-icon.playing .eq i:nth-child(2) { animation-delay: 0.22s; }
.dock-icon.playing .eq i:nth-child(3) { animation-delay: 0.44s; }
@keyframes eqb { 0%, 100% { height: 5px; } 50% { height: 14px; } }

/* ── 联系方式面板（Genie 神奇效果） ── */
.info-panel { position: fixed; bottom: 104px; left: 50%; z-index: 390;
  width: min(420px, calc(100vw - 48px)); background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 30px 70px rgba(23,24,28,0.25);
  padding: 26px; text-align: center;
  transform: translateX(-50%) scale(0) skewX(8deg); transform-origin: bottom center;
  opacity: 0; transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.15), opacity 0.3s; }
.info-panel.open { transform: translateX(-50%) scale(1) skewX(0deg); opacity: 1; }
.info-panel h3 { font-size: 1.2rem; margin-bottom: 18px; }
.info-grid { display: flex; gap: 18px; justify-content: center; }
.info-item { flex: 1; background: var(--bg); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 10px; }
.info-item img { width: 130px; height: 130px; object-fit: contain; border-radius: 10px; background: #fff; }
.info-item p { font-size: 0.85rem; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.info-item strong { color: var(--text); }
.wechat-id { font-size: 1.05rem; font-weight: 800; color: var(--accent);
  background: rgba(14,165,233,0.1); border-radius: 10px; padding: 44px 6px; }
.info-tip { margin-top: 14px; font-size: 0.78rem; color: var(--muted); }

/* ── 音乐迷你播放器 ── */
.mini-player { position: fixed; bottom: 104px; right: 18px; z-index: 390; width: 320px;
  max-width: calc(100vw - 36px); background: #fff; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(23,24,28,0.25);
  transform: translateY(16px); opacity: 0; transition: transform 0.3s, opacity 0.3s; }
.mini-player.open { transform: none; opacity: 1; }
.mini-player-head { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-size: 0.85rem; font-weight: 700; background: var(--bg); }
.mini-player-head button { border: none; background: none; font-size: 1rem; cursor: pointer; color: var(--muted); }
#spotifyEmbed iframe { display: block; border: 0; }

/* ── 小风车 ── */
.windmill { width: 92px; margin: 6px auto 26px; }
.windmill svg { width: 100%; height: auto; display: block; }
.wm-tower { fill: #94a3b8; }
.wm-blade { fill: var(--accent); }
.wm-hub { fill: var(--accent2); }
#wmBlades { transform-box: fill-box; transform-origin: center; will-change: transform; }

/* ── 产品卡片（图片+链接，3:4） ── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.product-card { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4;
  background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 26px;
  box-shadow: var(--shadow); transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; overflow: hidden; }
.product-card:hover { transform: translateY(-6px) scale(1.02); border-color: rgba(14,165,233,0.45);
  box-shadow: 0 20px 48px rgba(14,165,233,0.16); }
.product-card img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* 程序坞常驻，页脚留空位 */
footer { padding-bottom: 120px; }

/* ── 手机适配 ── */
@media (max-width: 640px) {
  .char-typing { left: 4%; width: 110px; }
  .char-crying { right: 4%; width: 100px; }
  .name-row { font-size: 2.4rem; top: 40%; }
    .dock-inner { gap: 6px; padding: 8px 12px; border-radius: 20px; }
  .dock-icon { width: 42px; height: 42px; }
  .dock-icon::after { display: none; }
  .info-grid { flex-direction: column; }
  .wechat-id { padding: 20px 6px; }
  .hero-scene .scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .letter-inner, .typing-dots i, .tear, .q-bubble { animation: none !important; }
  .dock-icon.playing .eq i { animation: none; }
}

/* ══════════════════════════════════════════
   v8 · 太空宇航员：漫游 / 靠近弹开 / 快速击飞 / 边缘反弹
   ══════════════════════════════════════════ */
.astro{position:fixed;left:0;top:0;width:120px;height:120px;z-index:350;cursor:pointer;
  will-change:transform,opacity;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.astro model-viewer{width:100%;height:100%;display:block;pointer-events:none;
  --poster-color:transparent;background:transparent}

.astro-hint{position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);
  background:rgba(17,24,39,.85);color:#fff;font-size:12px;padding:4px 10px;border-radius:10px;
  white-space:nowrap;opacity:0;transition:opacity .4s;pointer-events:none}
.astro.hint .astro-hint{opacity:1;animation:hintbob 1.2s ease-in-out infinite}
@keyframes hintbob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
@media (max-width:640px){.astro{width:96px;height:96px}}
@media (prefers-reduced-motion: reduce){
    .astro.hint .astro-hint{animation:none}
}

/* ══════════════════════════════════════════
   v7 · 分区背景墙（图片懒加载 + 联系区代码雨）
   ══════════════════════════════════════════ */

.rain-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#contact .sec-inner{position:relative;z-index:1}

/* ══════════════════════════════════════════
   v8 · 全局背景墙：固定层 crossfade，滚动平滑过渡无分割线
   ══════════════════════════════════════════ */
#bgwall{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#bgwall .bgl{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity 1.1s ease}
#bgwall .bgl.on{opacity:1}
#bgwall .bgveil{position:absolute;inset:0;background:rgba(255,253,247,0.62)}
/* 区块透明，让全局背景透出来 */
#home,#about,#projects,#blog,#picks,#contact{background:transparent}
@media (prefers-reduced-motion: reduce){
  #bgwall .bgl{transition:none}
}

/* ══════════════════════════════════════════
   v9 · 打字小人桌宠化：气泡 / 睡觉 / 开心跳 / 呼吸
   ══════════════════════════════════════════ */
/* 说话气泡 */
.pet-bubble{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(.6);
  background:#fff;border:2px solid var(--accent);color:var(--text);
  font-size:.82rem;font-weight:600;padding:8px 14px;border-radius:14px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:5;
  box-shadow:0 8px 24px rgba(23,24,28,.14)}
.pet-bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:var(--accent)}
.char-typing.talking .pet-bubble{opacity:1;transform:translateX(-50%) scale(1)}
/* Zzz */
.pet-zzz{position:absolute;top:-8px;right:-6px;font-weight:900;color:#7c8db0;
  font-size:1.1rem;opacity:0;pointer-events:none;line-height:1}
.pet-zzz span{font-size:.85rem}.pet-zzz span+span{font-size:.7rem}
.char-typing.sleeping .pet-zzz{opacity:1;animation:zzzfloat 2.6s ease-in-out infinite}
@keyframes zzzfloat{0%{transform:translateY(6px);opacity:0}25%{opacity:1}100%{transform:translateY(-22px);opacity:0}}
/* 睡觉：变暗 + 慢呼吸 + 藏起打字点和问号 */
.char-typing.sleeping img{filter:brightness(.72) saturate(.75)}
.char-typing.sleeping .char-inner{animation:petbreathe 3.2s ease-in-out infinite}
.char-typing.sleeping .typing-dots,.char-typing.sleeping .q-bubble{opacity:0}
/* 工作呼吸（默认的轻微浮动） */
.char-typing.working .char-inner{animation:petbreathe 2.4s ease-in-out infinite}
@keyframes petbreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.025)}}
/* 开心蹦跳 */
.char-typing.happy .char-inner{animation:pethop .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes pethop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-34px) scale(1.06,.94)}60%{transform:translateY(0) scale(.96,1.05)}80%{transform:translateY(-12px) scale(1)}100%{transform:translateY(0) scale(1)}}
/* 好奇时保持原来的 look，同时暂停呼吸避免打架 */
.char-typing.look .char-inner{animation:none}
@media (prefers-reduced-motion: reduce){
  .char-typing.working .char-inner,.char-typing.sleeping .char-inner,
  .char-typing.sleeping .pet-zzz{animation:none}
  .char-typing.happy .char-inner{animation:none}
}

/* ══════════════════════════════════════════
   v10 · 矢量小黄脸：敲键盘 / 瞳孔 / 闭眼
   ══════════════════════════════════════════ */
.face-svg{width:100%;height:auto;display:block;overflow:visible}
.face-svg .pupil{transition:transform .45s cubic-bezier(.3,.9,.4,1.2),opacity .3s}
.face-svg .closed{opacity:0;transition:opacity .3s}
/* 双手交替敲键盘 */
.face-svg .hand-l{animation:typel .44s ease-in-out infinite}
.face-svg .hand-r{animation:typel .44s ease-in-out -.22s infinite}
@keyframes typel{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(-8deg)}}
/* 好奇/说话时停手看你 */
.char-typing.look .hand-l,.char-typing.look .hand-r,
.char-typing.talking .hand-l,.char-typing.talking .hand-r,
.char-typing.happy .hand-l,.char-typing.happy .hand-r{animation-play-state:paused}
/* 睡觉：闭眼 + 手垂下 + 变暗 */
.char-typing.sleeping .face-svg .pupil{opacity:0}
.char-typing.sleeping .face-svg .closed{opacity:1}
.char-typing.sleeping .face-svg .mouth{opacity:.4}
.char-typing.sleeping .hand-l,.char-typing.sleeping .hand-r{animation-play-state:paused}
.char-typing.sleeping .face-svg{filter:brightness(.74) saturate(.8)}
@media (prefers-reduced-motion: reduce){
  .face-svg .hand-l,.face-svg .hand-r{animation:none}
  .face-svg .pupil{transition:none}
}

/* ══════════════════════════════════════════
   v12 · 联系区 Lottie 卡片
   ══════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:6px;padding-bottom:20px}
.contact-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px 14px;
  background:#fff;border:2px solid var(--border);border-radius:18px;color:inherit;text-decoration:none;
  font-family:inherit;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s}
.contact-item:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.contact-anim{width:64px;height:64px;pointer-events:none}
.contact-anim svg{width:100%!important;height:100%!important;display:block}
.contact-github img{width:56px;height:56px;object-fit:contain}
.contact-item b{font-size:.93rem}
.contact-item i{font-style:normal;font-size:.76rem;color:var(--muted)}
@media (max-width:640px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.contact-item{transition:none}}
/* lottie 加载占位：淡入呼吸，避免首次空白突兀 */
.contact-anim.lottie-loading{background:var(--bg2);border-radius:16px;animation:lottiePulse 1.2s ease-in-out infinite}
@keyframes lottiePulse{0%,100%{opacity:.35}50%{opacity:.7}}

/* ══════════════════════════════════════════
   v17 · macOS 质感统一：缓动 / 弹簧 / 毛玻璃
   ══════════════════════════════════════════ */
.btn, .channel, .contact-item, .pick-card, .blog-card, .project-card {
  transition: transform var(--t-hover) var(--ease-mac), box-shadow var(--t-hover) var(--ease-mac),
              border-color var(--t-hover) var(--ease-mac), background-color var(--t-hover) var(--ease-mac);
}
.btn:active, .channel:active, .contact-item:active {
  transform: scale(0.96);
  transition: transform 120ms var(--ease-spring);
}
.card, .contact-card {
  box-shadow: 0 1px 2px rgba(23,24,28,0.04), 0 8px 24px rgba(23,24,28,0.06), 0 24px 64px rgba(23,24,28,0.05);
}
/* 导航毛玻璃（如果有顶栏） */
.topnav, header.nav {
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background: rgba(255,255,255,0.65);
}
@media (prefers-reduced-motion: reduce) {
  .btn, .channel, .contact-item, .pick-card, .blog-card, .project-card { transition: none; }
}

/* ══════════════════════════════════════════
   v18 · Genie 对话框（流水般展开/收回）
   ══════════════════════════════════════════ */
.genie-dialog {
  position: absolute; z-index: 350; pointer-events: none;
  /* 位置由 JS 设到小黄鸭头顶 */
  transform-origin: bottom center;
  transform: translate(-50%, -100%) scaleY(0) scaleX(0.6) skewX(6deg);
  opacity: 0;
  transition: transform 600ms var(--ease-fluid), opacity 300ms var(--ease-mac);
}
.genie-dialog.open {
  transform: translate(-50%, -100%) scaleY(1) scaleX(1) skewX(0deg);
  opacity: 1;
}
.genie-dialog.closing {
  transform: translate(-50%, -100%) scaleY(0) scaleX(0.6) skewX(-6deg);
  opacity: 0;
  transition: transform 450ms cubic-bezier(0.7, 0, 0.84, 0), opacity 250ms;
}
.genie-inner {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.8); border-radius: 18px;
  padding: 14px 20px; font-size: 0.92rem; font-weight: 600; color: var(--text);
  box-shadow: 0 8px 24px rgba(23,24,28,0.12), 0 24px 64px rgba(23,24,28,0.1);
  white-space: nowrap;
}
.genie-inner::after { /* 小尾巴指向小黄鸭 */
  content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px; background: rgba(255,255,255,0.92);
  border-right: 1px solid rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.8);
}

/* ══════════════════════════════════════════
   v23 · 轨道环绕索引菜单（行星环绕青蛙）
   ══════════════════════════════════════════ */
.fan-menu {
  position: absolute; z-index: 350;
  width: 0; height: 0; /* 锚点，子项用 --ox/--oy 定位 */
  pointer-events: none;
}
.fan-menu.open { pointer-events: auto; }
/* 轨道虚线圆环 */
.fan-menu::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 264px; height: 264px;
  transform: translate(-50%, -50%) scale(0.6);
  border: 2px dashed rgba(255,255,255,0.5);
  border-radius: 50%;
  opacity: 0; transition: opacity 400ms var(--ease-mac), transform 600ms var(--ease-spring);
}
.fan-menu.open::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fan-item {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.7);
  font-weight: 700; font-size: 0.82rem;
  color: var(--text); text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(23,24,28,0.14);
  /* 从中心弹出到轨道位置 */
  opacity: 0; transform: translate(-50%, -50%) scale(0);
  transition: opacity 300ms var(--ease-mac), transform 550ms var(--ease-spring),
              background var(--t-hover) var(--ease-mac), border-color var(--t-hover) var(--ease-mac),
              box-shadow var(--t-hover) var(--ease-mac);
  transition-delay: calc(var(--i) * 60ms), calc(var(--i) * 60ms), 0ms, 0ms, 0ms;
  /* 轨道漂浮 */
  animation: orbitBob 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.5s);
  animation-play-state: paused;
}
.fan-menu.open .fan-item {
  opacity: 1;
  transform: translate(-50%, -50%) translate(var(--ox), var(--oy)) scale(1);
  animation-play-state: running;
}
.fan-item:hover {
  transform: translate(-50%, -50%) translate(var(--ox), var(--oy)) scale(1.22);
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(14,165,233,0.3);
  animation-play-state: paused;
  z-index: 2;
}
.fan-item span { font-size: 1.05rem; }
@keyframes orbitBob {
  0%, 100% { margin-top: 0; margin-left: 0; }
  25% { margin-top: -6px; margin-left: 3px; }
  50% { margin-top: 0; margin-left: 6px; }
  75% { margin-top: 6px; margin-left: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .fan-item { animation: none; transition: opacity 200ms; }
  .fan-menu::before { display: none; }
  .genie-dialog { transition: opacity 200ms; transform: none; }
}

/* ══════════════════════════════════════════
   v19 · 小黄鸭 + 青蛙 Lottie 容器
   ══════════════════════════════════════════ */
.duck-lottie, .frog-lottie { width: 100%; aspect-ratio: 1; pointer-events: none; }
.duck-lottie svg, .frog-lottie svg { width: 100% !important; height: 100% !important; display: block; }
.char-frog { right: 12%; top: 50%; width: clamp(110px, 15vw, 190px); }
/* 睡觉时小黄鸭变暗 */
.char-typing.sleeping .duck-lottie { filter: brightness(0.7) saturate(0.8); }
/* 青蛙点击提示 */
.char-frog { cursor: pointer; }
.char-frog .char-inner { transition: transform 350ms var(--ease-spring); }
.char-frog:hover .char-inner { transform: scale(1.18) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) {
  .duck-lottie svg, .frog-lottie svg { animation: none; }
}

/* ══════════════════════════════════════════
   v25 · 程序坞小提示气泡
   ══════════════════════════════════════════ */
.dock-hint {
  position: fixed; z-index: 399;
  bottom: 96px; left: 50%;
  transform: translateX(-50%) translateY(16px) scale(0.9);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 12px 32px rgba(23,24,28,0.16);
  font-size: 0.85rem; font-weight: 600; color: var(--text);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 400ms var(--ease-mac), transform 500ms var(--ease-spring);
}
.dock-hint.show {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: hintNudge 2.4s ease-in-out 0.6s infinite;
}
/* 小尾巴指向程序坞 */
.dock-hint::after {
  content: ''; position: absolute; bottom: -7px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: rgba(255,255,255,0.92);
  border-right: 1px solid rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.7);
}
.dock-hint-close {
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.06);
  color: var(--muted); font-size: 1rem; line-height: 1;
  cursor: pointer; flex: none;
  transition: background var(--t-hover) var(--ease-mac), transform var(--t-hover) var(--ease-spring);
}
.dock-hint-close:hover { background: rgba(0,0,0,0.12); transform: scale(1.12); }
@keyframes hintNudge {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .dock-hint.show { animation: none; }
}
@media (max-width: 560px) {
  .dock-hint { font-size: 0.78rem; bottom: 88px; max-width: 92vw; white-space: normal; text-align: center; border-radius: 18px; }
}

/* ══════════════════════════════════════════
/* ══════════════════════════════════════════
   v29 · 逐字抠图轮播：每个字独立放大
   ══════════════════════════════════════════ */
.char-carousel {
  position: relative;
  width: min(880px, 92vw);
  height: min(220px, 24vw);
  margin: 60px auto 0;
  overflow: visible;
}
.char-design {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transform: scale(0.98);
  transition: opacity 600ms var(--ease-mac), transform 800ms var(--ease-mac);
  pointer-events: none; overflow: hidden;
}
.char-design.active { opacity: 1; transform: scale(1); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
    .char-layer:hover { transform: none; }
}

/* v35 · 底层完整图 + 悬停弹出放大副本 */
@media (prefers-reduced-motion: reduce) {
    }

/* v36 · 鱼眼：7 图层平铺，JS 按鼠标距离缩放 */
.char-layer {
  position: absolute; inset: 0;
  clip-path: inset(0 var(--clip-r) 0 var(--clip-l));
  transform-origin: var(--cx) 55%;
  will-change: transform;
}
.char-layer img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 28px rgba(23,24,28,0.22));
  pointer-events: none;
}
.char-carousel { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .char-layer { transform: none !important; }
}

/* v37 · 左上角 logo 换 Lottie 动画 */
.logo-lottie { display: inline-flex; align-items: center; text-decoration: none; }
#logoLottie { width: 44px; height: 44px; display: block; }
#logoLottie svg { width: 100%; height: 100%; }

/* ═══ v42 · 滚动驱动改由 JS 引擎驱动（main.js scrollFX，全浏览器可用） ═══ */
.section-title::after { transform: scaleX(var(--bar, 1)); transform-origin: left center; }
.sd-card { transition: none !important; }
/* ═══ v40 · 深浅双色调 ═══ */
.theme-toggle { flex: none; align-self: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card); font-size: 1rem; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 150ms ease, border-color 150ms ease; }
.theme-toggle:hover { transform: scale(1.1); border-color: var(--accent); }
.theme-fade *, .theme-fade *::before, .theme-fade *::after {
  transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease, box-shadow 350ms ease !important; }
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101014; --bg2: #17181d; --card: #1b1c22;
  --border: rgba(255,255,255,0.1);
  --text: #f2f2ef; --muted: #9aa3af;
  --accent: #38bdf8; --accent2: #a78bfa;
  --shadow: 0 10px 34px rgba(0,0,0,0.45);
}
[data-theme="dark"] #bgwall .bgl { filter: brightness(0.78); }
[data-theme="dark"] #bgwall .bgveil { background: rgba(9,9,13,0.66); }
[data-theme="dark"] #nav { background: rgba(16,16,20,0.72); }
[data-theme="dark"] #nav.scrolled { background: rgba(16,16,20,0.88); }
[data-theme="dark"] .topnav, [data-theme="dark"] header.nav { background: rgba(16,16,20,0.65); }
[data-theme="dark"] .sticker { background: var(--card); }
[data-theme="dark"] .sticker.s1 { background: #0a2a40; }
[data-theme="dark"] .sticker.s2 { background: #271d47; }
[data-theme="dark"] .sticker.s3 { background: #3a2e0d; }
[data-theme="dark"] .sticker.s4 { background: #0d2f24; }
[data-theme="dark"] .btn-ghost { background: var(--card); }
[data-theme="dark"] #preview .preview-inner { background: var(--card); }
[data-theme="dark"] .preview-bar { background: #22232a; }
[data-theme="dark"] .preview-bar em { background: var(--bg2); }
[data-theme="dark"] .channel { background: var(--card); }
[data-theme="dark"] .dock-inner { background: rgba(22,22,28,0.55); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .info-panel { background: rgba(23,23,29,0.92); }
[data-theme="dark"] .mini-player { background: var(--card); }
[data-theme="dark"] .product-card { background: var(--card); }
[data-theme="dark"] .contact-item { background: var(--card); }
[data-theme="dark"] .pet-bubble { background: var(--card); }
[data-theme="dark"] .genie-inner { background: rgba(23,23,29,0.92); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .genie-inner::after { background: rgba(23,23,29,0.92); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .fan-item { background: rgba(23,23,29,0.92); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .fan-item:hover { background: var(--card); }
[data-theme="dark"] .dock-hint { background: rgba(23,23,29,0.92); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .dock-hint::after { background: rgba(23,23,29,0.92); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .contact-github img { background: #f4f4f5; border-radius: 14px; }
[data-theme="dark"] .dock-icon img[src*="github"] { background: #f4f4f5; border-radius: 12px; }

/* v41 · 深色下 WhatsApp / QQ 黑线图标垫浅色底（同 GitHub 处理） */
[data-theme="dark"] .contact-item[href*="wa.me"] .contact-anim,
[data-theme="dark"] .contact-item[href*="qm.qq.com"] .contact-anim { background: #f4f4f5; border-radius: 14px; }

/* v45 · 查看更多改为横贯整行的横幅卡 */
.view-more { grid-column: 1 / -1; aspect-ratio: auto; min-height: 118px;
  flex-direction: row; gap: 16px; padding: 22px 30px; text-decoration: none;
  background: linear-gradient(120deg, rgba(56,189,248,0.28), rgba(167,139,250,0.28)), var(--card);
  border: 2px dashed rgba(14,165,233,0.6); }
.view-more .vm-emoji { font-size: 36px; line-height: 1; }
.view-more .vm-main { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.view-more .vm-text { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: 3px; }
.view-more .vm-sub { font-size: 13px; color: var(--muted); letter-spacing: 1px; }
.view-more .vm-arrow { margin-left: 8px; flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #38bdf8, #a78bfa); color: #fff; font-size: 19px;
  box-shadow: 0 6px 16px rgba(56,189,248,0.35); transition: transform 0.3s; }
.view-more:hover .vm-arrow { transform: translateX(5px); }
[data-theme="dark"] .view-more { background: linear-gradient(120deg, rgba(56,189,248,0.30), rgba(167,139,250,0.30)), var(--card); }
@media (max-width: 640px) {
  .view-more { min-height: 104px; padding: 18px 20px; gap: 12px; }
  .view-more .vm-emoji { font-size: 30px; }
  .view-more .vm-text { font-size: 19px; }
  .view-more .vm-arrow { width: 36px; height: 36px; font-size: 16px; }
}

/* ═══ v46 · 请我喝杯咖啡卡 + 收款弹窗 ═══ */
.coffee-texts { display: flex; flex-direction: column; align-items: center; gap: 6px; }
[data-theme="dark"] .coffee-item .contact-anim { background: #f4f4f5; border-radius: 14px; }
@media (max-width: 640px) {
  .coffee-item { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 14px; }
  .coffee-item .contact-anim { width: 52px; height: 52px; flex: none; }
  .coffee-texts { align-items: flex-start; }
}
.coffee-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.coffee-modal[hidden] { display: none; }
.coffee-backdrop { position: absolute; inset: 0; background: rgba(10,12,20,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.coffee-panel { position: relative; width: min(520px, 92vw); max-height: 88vh; overflow: auto; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 22px; padding: 26px 24px 18px; text-align: center; box-shadow: 0 24px 60px rgba(2,8,23,0.35); animation: coffeePop 0.25s ease; }
@keyframes coffeePop { from { transform: scale(0.94) translateY(8px); opacity: 0; } }
.coffee-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.coffee-close:hover { background: rgba(127,127,127,0.15); color: var(--text); }
.coffee-emoji { font-size: 34px; line-height: 1; }
.coffee-head h3 { margin: 6px 0 4px; font-size: 1.25rem; }
.coffee-head p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.coffee-qrs { display: flex; gap: 16px; justify-content: center; margin-top: 18px; }
.coffee-qrs figure { margin: 0; flex: 1; max-width: 200px; }
.coffee-qrs img { width: 100%; height: auto; display: block; border-radius: 14px; }
.coffee-qrs figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
.coffee-note { margin: 16px 0 2px; font-size: 0.75rem; color: var(--muted); }
@media (max-width: 480px) { .coffee-qrs { flex-direction: column; align-items: center; } .coffee-qrs figure { width: 200px; max-width: 200px; } }

/* ── v47 · 近况 Now + 关于时间线 ── */
.now-list { list-style: none; display: grid; gap: 22px; }
.now-list li { display: flex; gap: 16px; align-items: flex-start; }
.now-emoji { flex: none; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: rgba(14, 165, 233, 0.08); border: 1px solid var(--border); }
.now-list b { display: block; font-size: 1.02rem; margin-bottom: 3px; }
.now-list p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.timeline { margin-top: 30px; border-left: 2px solid rgba(14, 165, 233, 0.25); padding-left: 24px; display: grid; gap: 20px; }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: -30px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15); }
.tl-year { font-weight: 800; color: var(--accent); font-size: 0.85rem; letter-spacing: 2px; }
.tl-item p { color: var(--muted); margin-top: 3px; line-height: 1.65; }