/* ============================================================
 * 新设计版 · 浅色编辑感（editorial）视觉系统
 * 内核不变，仅换皮与交互外壳。
 * ============================================================ */

:root {
  /* 色彩：近白暖底 + 香槟金 */
  --bg: #fafaf8;
  --surface: #ffffff;
  --ink: #16161a;
  --ink-soft: #3a3a40;
  --sub: #8a8a92;
  --hair: #e7e6e2;
  --hair-2: #efeee9;
  --accent: #b08d57;        /* 香槟金（更沉） */
  --accent-soft: #f3ece1;
  --tv: #07090f;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px;

  --sh-sm: 0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 10px 30px rgba(0,0,0,.07);
  --sh-lg: 0 30px 80px rgba(0,0,0,.12);

  --t-fast: 160ms ease;
  --t: 320ms cubic-bezier(.22,.61,.36,1);

  --nav-h: 68px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
  display: flex; flex-direction: column;
  min-height: 100vh;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- 导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,248,.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--hair);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; height: var(--nav-h);
  padding: 0 var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-8);
}
.nav__brand { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.nav__brand span { color: var(--sub); font-weight: 400; margin-left: 2px; }
.nav__menu { margin-left: auto; display: flex; align-items: center; gap: var(--sp-7, 28px); }
.nav__menu a {
  font-size: 14px; color: var(--ink-soft); position: relative; padding: 4px 0;
  transition: color var(--t-fast);
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--accent); transition: right var(--t);
}
.nav__menu a:hover, .nav__menu a.is-active { color: var(--ink); }
.nav__menu a.is-active::after, .nav__menu a:hover::after { right: 0; }
.nav__toggle { display: none; margin-left: auto; border: none; background: none; font-size: 22px; cursor: pointer; color: var(--ink); }

/* ---------- 布局 ---------- */
.app { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: calc(var(--nav-h) + var(--sp-16)) var(--sp-6) var(--sp-20); flex: 1; }
/* 详情页：隐藏顶部导航，内容顶到最上 */
.on-detail .nav { display: none; }
.on-detail .app { padding-top: var(--sp-12); }
.foot { text-align: center; color: var(--sub); font-size: 13px; padding: var(--sp-8) 0 var(--sp-12); letter-spacing: .02em; }
.empty { color: var(--sub); padding: var(--sp-12) 0; text-align: center; }

/* ---------- 通用排版件 ---------- */
.kicker {
  display: inline-block; font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: var(--sp-3);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: 999px; border: 1px solid var(--hair);
  background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer;
  transition: all var(--t-fast);
}
.btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--primary:hover { background: #000; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }
.chip {
  font-size: 12px; color: var(--sub); padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--surface);
}
.chip--accent { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
/* 首页精选项目标签：边框、无底、深色字 */
.work--feature .chip { background: transparent; color: var(--ink); border-color: var(--hair); }

/* ---------- 首页 hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--sp-12);
  align-items: center; margin-bottom: var(--sp-20);
}
.hero__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); }
.hero__title {
  font-size: clamp(40px, 6.2vw, 84px); line-height: 1.04; letter-spacing: -.03em;
  font-weight: 700; margin: 0 0 var(--sp-6);
  animation: blurReveal .9s var(--t) both;
}
.hero__title .thin { font-weight: 200; color: var(--accent); }
.hero__lead { font-size: 17px; color: var(--ink-soft); max-width: 46ch; margin: 0 0 var(--sp-8); animation: fadeUp .7s var(--t) both .12s; }
.hero__cta { animation: fadeUp .7s var(--t) both .2s; }
.hero__art {
  aspect-ratio: 4/5; border-radius: var(--r-xl); overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% 10%, var(--accent-soft) 0%, transparent 55%),
    linear-gradient(160deg, #ffffff 0%, #f3f1ec 100%);
  border: 1px solid var(--hair);
  position: relative; animation: fadeUp .8s var(--t) both .1s;
}
.hero__art::before {
  content: ""; position: absolute; inset: 18px; border: 1px solid var(--hair); border-radius: var(--r-lg);
}
.hero__art .ph {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%);
  width: 46%; height: 46%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 140%);
  filter: blur(2px); opacity: .9;
}

/* ---------- 区块标题 ---------- */
.section-head { margin-bottom: var(--sp-3); }
.section-head h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.02em; margin: 0; font-weight: 650; }
.section-head p { color: var(--sub); font-size: 14px; margin: 6px 0 0; }

/* 分类筛选 tab（胶囊分段控件） */
.filters { display: inline-flex; gap: 3px; background: var(--bg); border-radius: 999px; padding: 3px; border: 1px solid var(--hair); margin-top: var(--sp-5); margin-bottom: var(--sp-8); }
.filters button { border: none; background: transparent; height: 32px; padding: 0 18px; border-radius: 999px; font-size: 13px; line-height: 32px; color: var(--sub); transition: all var(--t-fast); cursor: pointer; }
.filters button:hover { color: var(--ink); }
.filters button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); font-weight: 600; }

/* ---------- 精选（错落网格） ---------- */
.featured {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10);
}
.work--feature { display: block; animation: reveal .7s var(--t) both; will-change: transform, opacity; }
.work__cover {
  border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/11;
  background: var(--hair-2); border: 1px solid var(--hair);
}
.work__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--t); }
.work--feature:hover .work__cover img { transform: scale(1.04); }
/* 生成式封面：渐变底色 + 标题文字（替代图片封面） */
.cover-gen { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 8% 10%; box-sizing: border-box; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.cover-gen__title { font-size: clamp(15px, 2.2vw, 30px); font-weight: 700; line-height: 1.18; letter-spacing: .01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.work--feature:hover .work__cover .cover-gen { transform: scale(1.05); transition: transform .6s var(--t); }
.work__info { padding: var(--sp-5) 2px 0; position: relative; }
.work__no { font-size: 13px; color: var(--accent); font-weight: 600; letter-spacing: .1em; }
.work__title { font-size: 18px; letter-spacing: -.01em; margin: 6px 0 8px; transition: color var(--t-fast); }
.work--feature:hover .work__title { color: var(--accent); }
.work__summary { color: var(--ink-soft); font-size: 14.5px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 列表（编辑感行） ---------- */
.works { display: flex; flex-direction: column; }
.work--row {
  display: grid; grid-template-columns: 56px 1fr auto 200px; gap: var(--sp-8); align-items: center;
  padding: var(--sp-8) 0; border-top: 1px solid var(--hair);
  position: relative; animation: reveal .6s var(--t) both; will-change: transform, opacity;
}
.works .work--row:last-child { border-bottom: 1px solid var(--hair); }
.work--row::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--accent);
  transition: width var(--t);
}
.work--row:hover::before { width: 100%; }
.work__no { font-size: 15px; color: var(--sub); font-variant-numeric: tabular-nums; }
.work--row:hover .work__no { color: var(--accent); }
.work__title-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.work__title-row .work__title { font-size: 24px; margin: 0; transition: transform var(--t-fast), color var(--t-fast); }
.work__title-row .chip { margin-top: 0; }
.work--row:hover .work__title { transform: translateX(6px); color: var(--accent); }
.work__meta { color: var(--sub); font-size: 13px; text-align: right; line-height: 1.5; }
.work__thumb {
  width: 200px; aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden;
  background: var(--hair-2); border: 1px solid var(--hair); justify-self: end;
}
.work__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--t), opacity var(--t); opacity: .92; }
.work--row:hover .work__thumb img { transform: scale(1.06); opacity: 1; }
.work--row:hover .work__thumb .cover-gen { transform: scale(1.06); transition: transform .6s var(--t); }

/* ---------- 网格视图 ---------- */
.works.is-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.work--card {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hair);
  animation: reveal .6s var(--t) both;
  will-change: transform, opacity;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.work--card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.work--card .work__cover { border-radius: 0; aspect-ratio: 16/11; border: none; }
.work--card .work__info { padding: var(--sp-5); }
.work--card .work__no { font-size: 12px; color: var(--sub); }
.work--card .work__title { font-size: 18px; margin: 6px 0 8px; }
.work--card .work__summary { font-size: 13.5px; color: var(--ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work--card .chips { margin-top: var(--sp-3); }
.work--card:hover .work__cover .cover-gen { transform: scale(1.04); transition: transform .6s var(--t); }

/* ---------- 视图切换按钮 ---------- */
.view-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 2px;
}
.view-toggle button {
  border: none; background: transparent;
  width: 32px; height: 28px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sub); cursor: pointer;
  transition: all var(--t-fast);
}
.view-toggle button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.view-toggle svg { width: 16px; height: 16px; }

/* ---------- 关于我（首页迷你 + 简介页） ---------- */
.about-mini { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-8); align-items: center; }
.ava, .about__ava {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  background: linear-gradient(160deg, #fff, var(--accent-soft)); border: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center; color: var(--sub); font-size: 13px; text-align: center;
}
.about-mini p { color: var(--ink-soft); margin: 0 0 var(--sp-4); }
.about { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-12); align-items: start; }
.about__ava { width: 200px; height: 200px; font-size: 14px; }
.about__name { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.03em; margin: 0 0 4px; font-weight: 700; }
.about__title { color: var(--accent); font-size: 16px; margin-bottom: var(--sp-5); }
.about__bio { color: var(--ink-soft); font-size: 16px; max-width: 60ch; margin: 0 0 var(--sp-5); }

/* ---------- 详情页 ---------- */
/* 顶栏：返回靠左，tab 居中（全屏按钮已移入演示卡片右上角） */
.detail__topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-10); }
.detail__topbar .detail__back { grid-column: 1; justify-self: start; }
.detail__topbar .detail__tabs { grid-column: 2; justify-self: center; }
.detail__back { font-size: 15px; line-height: 34px; color: var(--sub); transition: color var(--t-fast), transform var(--t-fast); }
.detail__back:hover { color: var(--ink); transform: translateX(-3px); }
.detail__tabs { display: flex; gap: 3px; background: var(--bg); border-radius: 999px; padding: 2px; border: 1px solid var(--hair); }
.detail__tabs button { border: none; background: transparent; height: 30px; padding: 0 18px; border-radius: 999px; font-size: 13px; line-height: 30px; color: var(--sub); transition: all var(--t-fast); }
.detail__tabs button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); font-weight: 600; }
.detail__panel[hidden] { display: none; }
.detail__head { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-12); align-items: start; margin-bottom: var(--sp-12); }
.detail__cover { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--hair); animation: pop .6s var(--t) both; aspect-ratio: 16/10; }
.detail__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__title { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.02em; margin: 8px 0 var(--sp-5); }
.detail__meta { display: flex; flex-wrap: wrap; gap: var(--sp-6); color: var(--ink-soft); font-size: 14px; margin-bottom: var(--sp-5); }
.detail__meta b { color: var(--sub); font-weight: 500; margin-right: 4px; }
.detail__summary { font-size: 17px; color: var(--ink-soft); max-width: 60ch; margin: 0 0 var(--sp-6); }
.detail__goto { animation: fadeUp .5s var(--t) both .16s; }
.detail__panel.is-fade { animation: fadeUp .35s var(--t) both; }

/* ---------- 演示查看器（卡片只包顶栏+舞台，圆点在卡片外，纯黑全屏） ---------- */
.viewer { position: relative; background: transparent; }
.viewer__card {
  background: radial-gradient(120% 120% at 50% 0%, #fbfbfd 0%, var(--bg) 70%);
  border: 1px solid var(--hair); border-radius: var(--r-xl);
  box-shadow: var(--sh-md); overflow: hidden;
}
.viewer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--hair); min-height: 56px;
  position: relative; z-index: 3;
}
.viewer__bar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.viewer__toc, .viewer__fs, .viewer__close {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hair);
  background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all var(--t-fast); flex: 0 0 auto;
}
.viewer__toc:hover, .viewer__fs:hover, .viewer__close:hover { border-color: var(--ink); }
.viewer__toc svg, .viewer__fs svg, .viewer__close svg { width: 16px; height: 16px; overflow: visible; }
.viewer__caption {
  font-size: 14px; color: var(--sub); text-align: center;
  flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 非全屏显示全屏按钮，全屏显示关闭按钮 */
.viewer__fs { display: inline-flex; }
.viewer__close { display: none; }
.viewer__stage {
  position: relative; min-height: 460px; padding: var(--sp-10);
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  overflow: hidden;
}
.viewer__stage.is-loading::after { content: "图片加载中…"; position: absolute; color: var(--sub); font-size: 14px; }

/* 电视样机 */
.frame--tv { width: min(900px, 100%); padding: 14px; border-radius: 16px; background: var(--tv); box-shadow: 0 16px 32px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.10); position: relative; margin-bottom: 56px; }
.frame--tv .frame__scroll { border-radius: 4px; background: #0f1320; }
.frame--tv::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -28px; width: 90px; height: 28px; background: linear-gradient(180deg, #2b2f3b, #15181f); }
.frame--tv::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -38px; width: 230px; height: 12px; background: #1b1e28; border-radius: 6px; box-shadow: 0 14px 24px rgba(0,0,0,.32); }
/* 手机样机 */
.frame--phone { width: 300px; padding: 12px; border-radius: 44px; background: #111; box-shadow: 0 14px 28px rgba(0,0,0,.20), 0 3px 8px rgba(0,0,0,.10), inset 0 0 0 2px #2a2a2e; position: relative; }
.frame--phone::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 100px; height: 24px; background: #000; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); z-index: 3; }
.frame--phone .frame__scroll { border-radius: 32px; aspect-ratio: 390 / 844; }
.frame__scroll { background: #fff; border-radius: inherit; overflow: hidden; }
.frame--phone .frame__scroll { background: #000; }
.frame--tv .frame__scroll { background: #0f1320; aspect-ratio: 16 / 10; }
.frame__scroll img { width: 100%; height: auto; display: block; will-change: transform; }
/* 所有演示图统一按真实比例完整显示，超长则在样机/全屏容器内纵向滚动查看（不裁切） */
.frame__scroll { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.frame__scroll::-webkit-scrollbar { display: none; }
.frame__scroll.is-panning { overflow: hidden; }
/* 动画包装层：定位上下文（供交叉淡入缓冲层绝对覆盖），img 自身 transform 专用于缩放/平移 */
.frame__anim { position: relative; width: 100%; height: auto; display: block; overflow: hidden; }
/* 交叉淡入缓冲层：覆盖在旧图之上淡入，切换演示图时不露黑底、更顺滑；
   统一 object-fit: contain，与「自然比例完整显示」的主图形态一致 */
.frame__anim > img { position: relative; z-index: 1; }
.frame__anim > .frame__next {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 100%; height: 100%;
  object-fit: contain; opacity: 0; pointer-events: none;
  transition: opacity .28s linear;
}
.frame__anim > .frame__next.is-show { opacity: 1 !important; }

/* 目录弹窗（全透明遮罩层铺满视口，仅弹窗本体可见；点击遮罩收起） */
.viewer__toc-popup {
  position: fixed; inset: 0; z-index: 100;
  background: transparent; display: block;
}
.viewer__toc-popup[hidden] { display: none; }
.viewer__toc-box[hidden] { display: none; }
.viewer__toc-box {
  position: absolute;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  width: min(320px, calc(100% - 24px)); max-height: min(520px, calc(100vh - 120px));
  overflow: hidden; display: flex; flex-direction: column;
  z-index: 101;
}
.viewer__toc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--hair);
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.viewer__toc-head button {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hair);
  background: transparent; color: var(--sub); display: inline-flex; align-items: center; justify-content: center;
}
.viewer__toc-list { list-style: none; margin: 0; padding: var(--sp-3); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.viewer__toc-list::-webkit-scrollbar { display: none; }
.viewer__toc-list li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 12px; border-radius: var(--r-md); cursor: pointer;
  font-size: 14px; color: var(--ink-soft); transition: background var(--t-fast), color var(--t-fast);
}
.viewer__toc-list li:hover { background: var(--bg); color: var(--ink); }
.viewer__toc-list li.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.viewer__toc-list .toc-no { font-variant-numeric: tabular-nums; color: var(--sub); min-width: 22px; }
.viewer__toc-list li.is-active .toc-no { color: var(--accent); }

/* 全屏缩放工具栏 */
.viewer__zoombar {
  display: none; position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 100; gap: 6px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 4px;
  backdrop-filter: blur(10px);
}
.viewer__zoombar button {
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.12); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.viewer__zoombar button:hover { background: rgba(255,255,255,.28); transform: scale(1.05); }
.viewer__zoombar button:active { transform: scale(.95); }
.viewer__zoombar svg { width: 18px; height: 18px; }

/* 全屏箭头（左右不透明） */
.viewer__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 58px; height: 58px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.85); color: #111; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: background var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.viewer__arrow--prev { left: 24px; }
.viewer__arrow--next { right: 24px; }
.viewer__arrow:hover:not(:disabled) { background: #fff; transform: translateY(-50%) scale(1.08); }
.viewer__arrow:disabled { opacity: 0; pointer-events: none; }

/* 底部翻页控制：圆点在卡片内，底色透明 */
.viewer__nav {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4) 0 var(--sp-5); background: transparent;
}
.viewer__ind { font-size: 13px; color: var(--sub); min-width: 56px; text-align: center; }
.viewer__dots { display: flex; gap: 7px; }
.viewer__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair-2); transition: background var(--t-fast); }
.viewer__dots i.is-active { background: var(--accent); width: 18px; border-radius: 4px; }

/* 整页全屏：纯黑 */
.viewer:fullscreen { width: 100vw; height: 100vh; border-radius: 0; display: flex; flex-direction: column; background: #000; border: none; box-shadow: none; }
.viewer:fullscreen .viewer__card {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: #000; border: none; border-radius: 0; box-shadow: none; overflow: visible;
}
.viewer:fullscreen .viewer__bar {
  border-bottom: none; background: transparent;
  position: absolute; top: 0; left: 0; right: 0; padding: 16px; min-height: 0; z-index: 20;
}
/* 全屏顶栏：目录（左）+ 标题（中）+ 关闭（右），全屏下隐藏全屏按钮 */
.viewer:fullscreen .viewer__fs { display: none; }
.viewer:fullscreen .viewer__toc,
.viewer:fullscreen .viewer__close {
  display: inline-flex; background: rgba(255,255,255,.12); color: #fff;
  border-color: rgba(255,255,255,.25); position: relative; z-index: 2;
}
.viewer:fullscreen .viewer__toc:hover,
.viewer:fullscreen .viewer__close:hover { background: rgba(255,255,255,.22); }
.viewer:fullscreen .viewer__caption {
  display: block; color: rgba(255,255,255,.82); font-size: 14px; text-align: center;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: calc(100% - 150px);
}
.viewer:fullscreen .viewer__stage { flex: 1; min-height: 0; padding: 0; background: #000; cursor: grab; }
.viewer:fullscreen .viewer__stage:active { cursor: grabbing; }
.viewer:fullscreen .frame--tv, .viewer:fullscreen .frame--phone { margin-bottom: 0; padding: 0; background: transparent; box-shadow: none; border: none; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.viewer:fullscreen .frame--tv::before, .viewer:fullscreen .frame--tv::after, .viewer:fullscreen .frame--phone::before { display: none; }
.viewer:fullscreen .frame--tv .frame__scroll, .viewer:fullscreen .frame--phone .frame__scroll { background: transparent; border-radius: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
/* 全屏：所有图统一按「标准宽度 + 整图显示 + 超长滚动」呈现，长图/普通图视觉一致 */
.viewer:fullscreen .frame__scroll img,
.viewer:fullscreen .frame__scroll .frame__next { width: var(--fs-w, 100%); max-width: none; height: auto; object-fit: initial; margin: 0 auto; display: block; flex: none; }
.viewer:fullscreen .frame__scroll { max-height: calc(100vh - 100px); overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; scrollbar-width: none; -ms-overflow-style: none; }
.viewer:fullscreen .frame__scroll::-webkit-scrollbar { display: none; }
/* 全屏「标准图」的显示宽度：手机/电视样机各一档，翻页时宽度不跳 */
.viewer:fullscreen .frame--phone { --fs-w: min(96vw, calc(96vh * 390 / 844)); }
.viewer:fullscreen .frame--tv { --fs-w: min(calc(100vw - 220px), calc((100vh - 200px) * 16 / 10)); }
/* 放大后进入拖拽平移：关闭原生滚动（transform 接管位移） */
.viewer:fullscreen .frame__scroll.is-panning { overflow: hidden; }
.viewer:fullscreen .frame__scroll.is-panning img { transform-origin: center top; }
.viewer:fullscreen .frame__anim { width: 100%; height: auto; display: flex; align-items: flex-start; justify-content: center; }
.viewer:fullscreen .frame__scroll img { transform-origin: center center; }
.viewer:fullscreen .viewer__nav { display: none; }
.viewer:fullscreen .viewer__zoombar { display: flex; }

/* ---------- 动效 ---------- */
@keyframes blurReveal { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: none; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: none; } }

.hero, .about-mini, .section-head, .filters, .works, .featured, .about, .empty { animation: fadeUp .4s var(--t) both; }
.featured { animation-delay: .04s; }
.about-mini { animation-delay: .06s; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .works.is-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--hair); padding: var(--sp-4) var(--sp-6);
    transform: translateY(-120%); transition: transform var(--t); box-shadow: var(--sh-md);
  }
  .nav__menu.is-open { transform: translateY(0); }
  .nav__menu a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--hair-2); }
  .nav__toggle { display: block; }
  .nav__inner { gap: var(--sp-4); }
  .hero { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero__art { max-width: 320px; }
  .featured { grid-template-columns: 1fr; gap: var(--sp-8); }
  .work--feature:nth-child(even) { margin-top: 0; }
  .work--row { grid-template-columns: 40px 1fr; gap: var(--sp-4); }
  .work__meta { display: none; }
  .work__thumb { display: none; }
  .works.is-grid { grid-template-columns: 1fr; }
  .about, .about-mini { grid-template-columns: 1fr; }
  .detail__head { grid-template-columns: 1fr; }
}