/* ============================================================
   前端设计风格图鉴 · 站点外壳样式
   设计基调：瑞士网格 / 米纸底色 / 红色点缀 / 等宽字体点缀
   ============================================================ */

/* ================= 设计令牌 ================= */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

:root {
  --maxw: 2880px;
  --pad: max(32px, calc((100% - var(--maxw)) / 2));

  --bg:        #f3f1ec;
  --bg-soft:   #ebe8e1;
  --surface:   #ffffff;
  --surface-2: #faf8f4;
  --ink:       #16150f;
  --ink-2:     #4b4840;
  --muted:     #726d61;
  --line:      rgba(0,0,0,.10);
  --line-soft: rgba(0,0,0,.06);
  --accent:    #c1121f;
  --accent-2:  #e63946;
  --accent-ink:#ffffff;
  --glass:     rgba(20,18,15,.52);
  --ok:        #1a7f37;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(20,18,12,.05), 0 8px 22px -14px rgba(20,18,12,.22);
  --sh-2: 0 2px 5px rgba(20,18,12,.07), 0 22px 44px -22px rgba(20,18,12,.32);
  --sh-3: 0 30px 80px -30px rgba(0,0,0,.55);

  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .16s var(--ease);
  --t-mid:  .26s var(--ease);

  color-scheme: light;
}

/* 暗色令牌：不再用 @media(prefers-color-scheme) 直接切换，
   而是让 <html data-theme="light|dark"> 决定 —— 这样顶栏的「主题」按钮
   才能手动接管。脚本会在首帧前写好 data-theme（默认浅色，不跟随系统），
   所以这里只需要一份暗色令牌。 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #131211;
  --bg-soft:   #1b1a18;
  --surface:   #1d1c1a;
  --surface-2: #232120;
  --ink:       #eceae3;
  --ink-2:     #b6b2a8;
  --muted:     #9a958a;
  --line:      rgba(255,255,255,.13);
  --line-soft: rgba(255,255,255,.07);
  --accent:    #ff4d57;
  --accent-2:  #ff7a80;
  /* 暗色下的 accent 偏亮，白字对比度只有 3.3:1（不过 AA），
     改成深色字压在亮红上，对比度约 5.7:1 */
  --accent-ink:#16150f;
  --glass:     rgba(10,10,10,.62);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px -14px rgba(0,0,0,.7);
  --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 24px 46px -22px rgba(0,0,0,.85);
}

body {
  /* 自托管子集字体（fonts/fonts.css）+ 系统中文兜底：子集里没有的字符会退回系统字体 */
  font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei','Hiragino Sans GB',-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
button, input { font:inherit; color:inherit; }
[hidden] { display:none !important; }
::selection { background:var(--accent); color:var(--accent-ink); }

:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* 细滚动条 */
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(120,116,105,.32); border-radius:var(--r-full); border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:rgba(120,116,105,.55); }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 跳过导航（键盘用户） */
.skip {
  position:fixed; top:8px; left:8px; z-index:500;
  padding:9px 16px; border-radius:var(--r-full);
  background:var(--ink); color:var(--bg); font-size:13px; font-weight:600;
  transform:translateY(-160%); transition:transform var(--t-fast);
}
.skip:focus-visible { transform:none; }

/* 没开 JS 时的说明条：整站内容靠脚本渲染，
   脚本一关就是一片空白，给一句话说清楚，别让人对着白屏猜。 */
.noscript {
  margin:76px var(--pad) 0; padding:16px 20px;
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-sm); background:var(--surface);
  font-size:14px; line-height:1.8; color:var(--ink-2);
}
.noscript b { color:var(--ink); font-weight:700; }
@media (max-width:760px){ .noscript { margin:76px 16px 0; } }

/* ================= 顶部导航 ================= */
header.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);
  padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:64px;
  transition:height var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
/* 阅读进度线：贴在顶栏下边框上的一小段红色，滚到哪儿一目了然 */
header.nav::after {
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform:scaleX(var(--prog,0)); transform-origin:0 50%;
  background:var(--accent); opacity:.9; pointer-events:none;
}
header.nav.scrolled {
  height:56px;
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -24px rgba(0,0,0,.7);
}
/* 点 logo 回到顶部时，顶栏高度不要过渡，否则整条顶栏会"弹"一下 */
header.nav.no-anim { transition:none; }
header.nav .brand { display:flex; align-items:center; gap:20px; min-width:0; }
header.nav .logo {
  font-weight:900; font-size:17px; letter-spacing:.06em; white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px;
  color:var(--ink); text-decoration:none;
}
header.nav .logo:hover { opacity:1; }
header.nav .logo:active { opacity:1; transform:none; }
header.nav .logo:focus-visible {
  outline:2px solid var(--accent); outline-offset:4px; border-radius:4px;
}
header.nav .logo em { font-style:normal; color:var(--accent); }
header.nav .logo .mark {
  width:26px; height:26px; border-radius:7px; flex:none;
  background:url("icon.jpg") center/cover no-repeat;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.45);
}
header.nav .links { display:flex; gap:2px; }
header.nav .links a {
  font-size:13.5px; font-weight:400; padding:7px 14px; border-radius:var(--r-full);
  color:var(--ink-2); border:1px solid transparent; transition:var(--t-fast);
  white-space:nowrap;
}
header.nav .links a:hover { background:var(--surface); border-color:var(--line); color:var(--ink); }
header.nav .links a.active {
  background:var(--ink); color:var(--bg); border-color:var(--ink);
}
header.nav .right { display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0; }

/* 搜索 */
.search {
  position:relative; display:flex; align-items:center;
  flex:0 1 340px; min-width:0;
}
.search .ico {
  position:absolute; left:14px; width:15px; height:15px; pointer-events:none;
  color:var(--muted); opacity:.85;
}
.search input {
  width:100%; padding:9px 34px 9px 38px; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--surface); font-size:13.5px;
  outline:none; transition:var(--t-fast);
}
.search input::placeholder { color:var(--muted); }
/* 隐藏浏览器自带的清除按钮，统一用自定义的 ✕ */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; display:none; }
.search input:hover { border-color:color-mix(in srgb, var(--ink) 22%, transparent); }
.search input:focus-visible {
  border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.search .clear {
  position:absolute; right:7px; width:24px; height:24px; border-radius:50%;
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  display:none; align-items:center; justify-content:center; font-size:13px;
  transition:var(--t-fast);
}
.search .clear:hover { background:var(--bg-soft); color:var(--ink); }
.search.has-value .clear { display:flex; }

/* 顶栏右侧的常驻徽标：站点规模固定不变（筛选命中数移到区块标题旁，
   避免输入搜索词时这个数字跟着跳） */
header.nav .meta {
  flex:none; height:30px; padding:0 12px;
  border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-full);
  font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums;
  white-space:nowrap; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:6px;
  transition:var(--t-fast);
}
header.nav .meta:hover {
  border-color:color-mix(in srgb, var(--ink) 22%, transparent); color:var(--ink-2);
}
header.nav .meta b {
  font-weight:700; color:var(--ink); font-size:12px;
  font-family:'Space Mono',monospace;
}
header.nav .meta .dot { width:4px; height:4px; border-radius:50%; background:var(--accent); flex:none; }

/* 顶栏动作按钮（换一批 / 主题）：与「关于」同一套外形语言 —— 同高、同圆角、同反馈 */
header.nav .icon-btn {
  flex:none; height:30px; min-width:30px; padding:0 9px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  border-radius:var(--r-full); cursor:pointer;
  font-size:12.5px; font-weight:600; white-space:nowrap;
  transition:var(--t-fast);
}
header.nav .icon-btn:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
header.nav .icon-btn:active { transform:scale(.96); }
header.nav .icon-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
header.nav .icon-btn svg { width:15px; height:15px; flex:none; }

/* 主题按钮：按「当前生效的那一档」显示图标 */
header.nav .theme-btn .ic { display:none; }
html[data-theme-resolved="light"] .theme-btn .ic-light,
html[data-theme-resolved="dark"]  .theme-btn .ic-dark { display:block; }
html:not([data-theme-resolved]) .theme-btn .ic-light { display:block; }

/* 「换一批」点击反馈：图标转一圈 —— 卡片正在换，这个动作要看得见 */
header.nav .shuffle-btn.spin svg { animation:spin .62s var(--ease); }
header.nav .shuffle-btn.spin { pointer-events:none; }

/* ================= Hero =================
   结构：左栏（eyebrow + 主标题）／右栏（说明段落 + 行动区 + 数据条）。
   两个页面共用同一套栅格，主标题与说明顶端对齐，右侧不再留大片死白。 */
.hero {
  padding:104px var(--pad) 40px;
  display:grid; grid-template-columns:minmax(0,1fr); gap:36px; align-items:start;
  position:relative;
}
.hero::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(680px 320px at 12% 8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(760px 340px at 88% 0%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 72%);
}
/* 极淡的竖向网格：像图纸/档案卡的刻度，给 hero 一点「图鉴」的结构感 */
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size:120px 100%;
  background-position:var(--pad) 0;
  -webkit-mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.35) 46%, transparent 78%);
  mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.35) 46%, transparent 78%);
  opacity:.55;
}
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px;
}
.eyebrow::before {
  content:""; width:26px; height:1px; background:var(--accent);
}
.hero h1 {
  font-size:clamp(34px,4.6vw,58px); font-weight:900; line-height:1.08;
  letter-spacing:-.02em;
  min-height:2.16em;          /* 预留两行高度，字体替换时不抖动 */
}
.hero h1 .accent {
  color:var(--accent);
  position:relative; white-space:nowrap;
}
/* —— 主标题排版：标题行显式分行，避免「图鉴」孤字掉到第二行 ——
   第一行：中文主语；第二行：红色「图鉴」+ 细横线 + 英文小标 */
.hero h1 .t-line { display:block; max-width:16ch; }
.hero h1 .t-line2 {
  display:flex; align-items:baseline; gap:14px;
  max-width:none;             /* 第二行铺满整栏，细横线才有伸展空间 */
  margin-top:.06em;
}
.hero h1 .t-rule {
  flex:1 1 auto; align-self:center; height:1px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--line));
  min-width:24px;
}
.hero h1 .t-en {
  flex:none;
  font-family:'Space Mono',monospace; font-weight:400;
  font-size:clamp(9px,1vw,11.5px); letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.hero h1 .t-en b { font-weight:700; color:var(--ink-2); }
/* 窄屏：横线让位，英文小标另起一行 */
@media (max-width:760px){
  .hero h1 .t-line2 { flex-wrap:wrap; row-gap:6px; }
  .hero h1 .t-rule { display:none; }
  .hero h1 .t-en { flex:0 0 100%; letter-spacing:.16em; }
}
.hero p.sub {
  margin-top:0; font-size:16px; color:var(--ink-2); max-width:58ch; line-height:1.8;
  text-wrap:pretty;
  /* 左侧红色标尺：把说明段落从标题里区分出来，像期刊的引言块 */
  padding-left:18px; border-left:2px solid color-mix(in srgb, var(--accent) 42%, transparent);
}
.hero p.sub b { color:var(--ink); font-weight:700; }
/* Hero 数据条：一张数据卡（1px gap + 底色分隔线）；格子按内容排，卡片按内容收宽，
   所以格数增减都不会在卡片右侧留下一截空白 */
.hero-meta {
  display:flex; flex-wrap:wrap; gap:1px;
  width:max-content; max-width:100%;
  background:var(--line-soft);
  border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-1); overflow:hidden;
}
.hero-meta > span {
  background:var(--surface);
  padding:10px 14px 11px;
  display:flex; flex-direction:column; gap:4px;
  font-size:11px; color:var(--muted); letter-spacing:.06em;
  white-space:nowrap;
}
.hero-meta b {
  font-family:'Space Mono',monospace; font-size:21px; font-weight:700;
  color:var(--ink); letter-spacing:-.03em; line-height:1; margin-right:0;
}
@media (max-width:560px){
  .hero p.sub { padding-left:14px; }
}
/* 右栏：说明段落 → 行动区 → 数据条，三者顶端对齐、间距一致 */
.hero-side {
  min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:22px;
}
@media (max-width:979px){
  .hero-side { margin-top:26px; }
}
.hero-cta {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.hero-cta .all-link {
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:var(--r-full); background:var(--ink); color:var(--bg);
  font-size:14px; font-weight:700; transition:var(--t-fast);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.65);
}
.hero-cta .all-link b { font-family:'Space Mono',monospace; }
.hero-cta .all-link:hover {
  background:var(--accent); color:var(--accent-ink); transform:translateY(-2px);
  box-shadow:0 14px 30px -14px var(--accent);
}
.hero-cta .hint { font-size:12.5px; color:var(--muted); }

/* 宽屏：标题在左、说明在右。
   两栏顶端对齐：左栏 eyebrow + 主标题，右栏说明段落 + 行动区 + 数据条。
   这样右栏被内容填满，左下角也不会空出一大块。 */
@media (min-width:980px){
  .hero-main {
    display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    column-gap:60px; align-items:start;
  }
  /* eyebrow 独占一行横跨两栏 —— 两栏从同一条基线起笔，
     右栏的红色标尺才不会比左栏的栏目名高出一截 */
  .hero-main > .eyebrow { grid-column:1 / -1; grid-row:1; margin-bottom:20px; }
  .hero-head { grid-column:1; grid-row:2; min-width:0; }
  .hero-side {
    grid-column:2; grid-row:2; align-self:start; margin-top:0;
    padding-top:4px;          /* 与大标题的字面顶端对齐 */
  }
  .hero p.sub { max-width:60ch; }
  .hero-meta b { font-size:23px; }
  /* 全部页第二行是「英文小标 + 拖尾细线」：线不要拉满整栏，
     否则正好断在右栏起点前，看起来像被切断 */
  .hero-main.solo .hero-head .t-line2 .t-rule { max-width:300px; }
}

/* ================= 「关于」面板 =================
   原先 hero 右上角的说明卡收进顶栏右上角的「关于」按钮 */
header.nav .about-btn {
  flex:none; height:30px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:12.5px; font-weight:600; border-radius:var(--r-full);
  cursor:pointer; transition:var(--t-fast); white-space:nowrap;
}
header.nav .about-btn:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
header.nav .about-btn[aria-expanded="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }

.about {
  position:fixed; inset:0; z-index:210;
  display:flex; align-items:center; justify-content:center; padding:6vh 4vw;
  background:rgba(14,13,11,.62);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fadeIn .2s var(--ease);
}
.about-inner {
  position:relative; width:min(520px,92vw); overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); padding:24px 26px 22px;
  animation:modalIn .26s var(--ease);
}
.about-inner::after {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2) 45%, transparent);
}
.about .about-top {
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.22em;
  color:var(--muted); text-transform:uppercase;
  border-bottom:1px solid var(--line-soft); padding-bottom:11px;
}
.about .about-top em { font-style:normal; color:var(--accent); }
.about .about-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px;
}
.about .about-head h2 { font-size:20px; font-weight:900; letter-spacing:-.01em; }
.about .about-close {
  flex:none; width:30px; height:30px; border-radius:var(--r-xs); cursor:pointer;
  border:0; background:var(--bg-soft); color:var(--ink-2); font-size:14px; line-height:1;
  transition:var(--t-fast);
}
.about .about-close:hover { background:var(--accent); color:var(--accent-ink); transform:rotate(90deg); }
.about .about-lead {
  margin-top:10px; font-size:13.5px; color:var(--ink-2); line-height:1.85;
}
.about .about-lead b { color:var(--ink); font-weight:700; }
.about .about-stats {
  display:flex; gap:30px; margin-top:16px; padding:16px 0;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.about .about-stats > div { flex:1; }
.about .about-stats b {
  font-size:34px; font-weight:900; letter-spacing:-.04em; line-height:1;
  display:block; font-variant-numeric:tabular-nums;
}
.about .about-stats span {
  font-size:11.5px; color:var(--muted); display:block; margin-top:7px; letter-spacing:.06em;
}
.about .about-list { list-style:none; padding-top:13px; }
.about .about-list li {
  font-size:12.5px; color:var(--ink-2); line-height:1.6;
  display:flex; gap:10px; padding:5px 0; align-items:flex-start;
}
.about .about-list li i {
  font-style:normal; color:var(--accent); flex:none; width:14px; text-align:center;
}
/* 开发者信息 */
.about .about-dev {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-2);
}
.about .about-dev .dev-label {
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.about .about-dev .dev-name { color:var(--ink); font-weight:700; }
/* 完整网址本身即链接 */
.about .about-dev .dev-url {
  font-family:'Space Mono',monospace; font-size:11.5px;
  color:var(--accent); font-weight:500;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  transition:var(--t-fast); word-break:break-all;
}
.about .about-dev .dev-url:hover {
  color:var(--accent); border-bottom-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ================= 区块标题 ================= */
.section-title {
  padding:34px var(--pad) 0;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-bottom:1px solid var(--line-soft); margin:0 var(--pad);
  padding-left:0; padding-right:0;
}
.section-title h2 { font-size:20px; font-weight:900; letter-spacing:-.01em; white-space:nowrap; }
.section-title span {
  font-size:11.5px; color:var(--muted); font-family:'Space Mono',monospace;
  letter-spacing:.12em; white-space:nowrap;
}
/* 区块编号：像档案卡的条目号，给长列表一个方位感 */
.section-title .sec-no {
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  color:var(--accent); letter-spacing:.14em; white-space:nowrap;
  padding:3px 7px; border-radius:5px;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.section-title .rule {
  flex:1 1 60px; height:1px; min-width:20px;
  background:linear-gradient(90deg, var(--line), transparent);
}
.section-title .mini-btn {
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:12px; padding:5px 12px; border-radius:var(--r-full); cursor:pointer;
  transition:var(--t-fast); white-space:nowrap;
}
.section-title .mini-btn:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.section-title .mini-btn[hidden] { display:none; }

/* 区块标题吸顶：翻过一屏卡片后，标题/计数/排序/清除筛选仍然可见可点。
   上方还压着吸顶的场景筛选条（--fb-h 由脚本量出来），所以标题要往下让一行。 */
@media (min-width:761px){
  .section-title {
    position:sticky; top:calc(56px + var(--fb-h, 0px)); z-index:40;
    padding-top:12px; padding-bottom:12px;
    background:color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter:blur(12px) saturate(1.3);
    -webkit-backdrop-filter:blur(12px) saturate(1.3);
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 24px -22px rgba(0,0,0,.6);
  }
}

/* ================= 画廊网格 ================= */
.grid {
  padding:26px var(--pad) 44px;
  /* 320px 起步：1440 宽能排 4 列、1920 能排 5 列 ——
     一屏多看三成缩略图，是这种「以缩略图为主」的画廊最实在的优化 */
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:26px;
  align-items:stretch;
}
/* 超宽屏别排到 7 列：列太多，缩略图反而小到看不清 */
@media (min-width:2100px){
  .grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
figure.style-card {
  background:var(--surface); border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  transition:transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
  display:flex; flex-direction:column;
  animation:cardIn .5s var(--ease) both;
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}
figure.style-card:hover {
  transform:translateY(-6px);
  border-color:rgba(0,0,0,.16);
  box-shadow:var(--sh-2);
}
figure.style-card:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
main:focus, main:focus-visible { outline:none; }

/* 缩略图 */
.thumb {
  position:relative; width:100%; aspect-ratio:16/10;
  overflow:hidden; background:var(--surface-2);
  border-bottom:1px solid var(--line-soft);
  /* 内描边：缩略图本身是整屏截图，边缘加一道细线，边界更干净 */
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
.thumb .viewport {
  position:absolute; top:0; left:0;
  width:1280px; height:800px;
  transform-origin:0 0;
  transform:scale(var(--s,.28));
  pointer-events:none;
  transition:transform .18s var(--ease);
}
.thumb.mag-on.mag-hover .viewport {
  transform:translate(calc(-1 * var(--cx,0px)), calc(-1 * var(--cy,0px))) scale(calc(var(--s,.28) * 2));
}
.thumb .viewport iframe { width:1280px; height:800px; border:0; display:block; }
/* 静态缩略图：整块 1280×800 与真实页面同尺寸，缩放逻辑与 iframe 完全一致 */
.thumb .viewport img.thumb-img {
  width:1280px; height:800px; display:block;
  opacity:0; transition:opacity .22s var(--ease);
}
.thumb .viewport img.thumb-img.ready { opacity:1; }
/* 占位底图（tiny 模糊图）铺满，避免图片未到时出现灰白块 */
.thumb .viewport { background-size:cover; background-position:center; }

/* 缩略图上的遮罩与提示 */
.thumb .scrim {
  position:absolute; inset:auto 0 0 0; height:56px; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,10,.55), transparent);
  opacity:0; transition:opacity var(--t-mid);
}
figure.style-card:hover .thumb .scrim,
figure.style-card:focus-within .thumb .scrim { opacity:1; }
.thumb .hint {
  position:absolute; left:12px; bottom:11px; z-index:2;
  font-size:11px; color:#fff; letter-spacing:.04em;
  display:flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:var(--r-full);
  background:rgba(12,11,10,.62); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translateY(6px); transition:var(--t-mid); pointer-events:none;
}
.thumb .hint::before {
  content:"⤢"; font-size:12px; opacity:.9;
}
figure.style-card:hover .thumb .hint,
figure.style-card:focus-within .thumb .hint { opacity:1; transform:none; }

/* 「可交互」徽标：只有真能点的页面才挂。
   常驻显示（不靠 hover 触发）—— 这是这条信息本身的用途，
   让读者在扫一眼卡片时就知道哪张值得点开玩。
   位置在缩略图右下角，与左下角的提示文字对称。 */
.thumb .live-badge {
  position:absolute; right:12px; bottom:11px; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.05em;
  color:#fff; padding:4px 10px; border-radius:var(--r-full);
  background:rgba(12,11,10,.72); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);
  pointer-events:none;
  display:flex; align-items:center; gap:6px;
}
.thumb .live-badge::before {
  content:""; display:block; flex:none;
  width:6px; height:6px; border-radius:50%;
  background:#5ee08a; box-shadow:0 0 0 2.5px rgba(94,224,138,.3);
}

/* 放大镜 */
.magnify {
  position:absolute; inset:0; z-index:2; opacity:0; transition:opacity .2s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,0,0,0) 0 74px,rgba(0,0,0,.42) 74px 82px,rgba(0,0,0,0) 82px);
  pointer-events:none;
}
.thumb.mag-on.mag-hover .magnify { opacity:1; }
.thumb .magnify::after {
  content:"×2 放大中 · 再次点击关闭"; position:absolute; right:12px; bottom:12px;
  font-size:11px; padding:5px 11px; border-radius:var(--r-full);
  background:rgba(0,0,0,.62); color:#fff; backdrop-filter:blur(6px);
}
.mag-btn {
  position:absolute; top:10px; right:10px; z-index:4;
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1; border:1px solid rgba(255,255,255,.35);
  background:var(--glass); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:.32; transition:var(--t-fast);
}
figure.style-card:hover .mag-btn { opacity:.92; }
.mag-btn:hover { opacity:1; transform:scale(1.08); background:rgba(20,18,15,.8); }
/* 放大镜图标：用 SVG 而不是彩色 emoji，保持界面里的单色调语言 */
.mag-btn .mag-ico { width:15px; height:15px; display:block; }
.mag-btn.active {
  opacity:1; background:var(--accent); border-color:var(--accent-2); color:var(--accent-ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* 下载按钮 */
.dl-btn {
  position:absolute; top:10px; left:10px; z-index:4;
  display:flex; align-items:center; gap:5px;
  height:28px; padding:0 11px; border-radius:var(--r-full); cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.06em; white-space:nowrap;
  color:#fff; border:1px solid rgba(255,255,255,.35);
  background:var(--glass);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:translateY(-4px); transition:var(--t-fast);
}
figure.style-card:hover .dl-btn,
figure.style-card:focus-within .dl-btn { opacity:.95; transform:none; }
.dl-btn:hover { opacity:1; background:var(--accent); border-color:var(--accent-2); color:var(--accent-ink); }
.dl-btn:active { transform:scale(.97); }
.dl-btn.done { background:var(--ok); border-color:var(--ok); opacity:1; }
@media (hover:none){ .dl-btn { opacity:.95; transform:none; } }

/* 骨架屏 */
.thumb .skeleton {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:11px; color:var(--muted); background:var(--surface-2);
  letter-spacing:.18em; font-family:'Space Mono',monospace;
  z-index:2; transition:opacity .4s;
}
.thumb .skeleton::before {
  content:""; width:13px; height:13px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* 说明文字 */
figcaption {
  padding:15px 18px 17px;
  display:flex; flex-direction:column; gap:5px; flex:1;
  border-top:1px solid var(--line-soft);
}
figcaption .cap-top { display:flex; align-items:center; gap:9px; min-width:0; }
/* 编号做成小徽标，像图鉴的条目号 */
figcaption .idx {
  font-family:'Space Mono',monospace; font-size:10.5px; font-weight:700; color:var(--accent);
  letter-spacing:.06em; flex:none;
  padding:2px 6px; border-radius:5px;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
figcaption .name-btn {
  font-weight:700; font-size:15.5px; letter-spacing:-.01em; text-align:left;
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:none; border:0; padding:0; margin:0; cursor:pointer; color:inherit;
  border-bottom:1px solid transparent; transition:border-color var(--t-fast), color var(--t-fast);
  min-height:24px; /* 点按目标不小于 24px（WCAG 2.5.8） */
}
figcaption .name-btn:hover { border-bottom-color:var(--accent); }
figcaption .name-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
figcaption .en {
  font-size:11.5px; color:var(--muted);
  font-family:'Space Mono',monospace; letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 副信息行：英文名与「N 个页面」并排。
   以前页面数是独立一行，只有多页的卡片会多出 21px，
   导致同一屏里各行卡片高度参差。 */
figcaption .cap-sub { display:flex; align-items:baseline; gap:10px; min-width:0; }
figcaption .cap-sub .en { flex:1; min-width:0; }
figcaption .tag {
  font-size:11px; padding:3px 10px; border-radius:var(--r-full); flex:none;
  background:var(--bg-soft); color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap;
}
figcaption .desc {
  font-size:12.5px; color:var(--ink-2); line-height:1.75;
  margin-top:auto; padding-top:10px;
  /* 描述上方一条细线：把「元信息」和「正文」分开 */
  border-top:1px solid var(--line-soft);
  /* 三行：标签前缀（题材/用途/形态）+ 正文都露得出来 */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  /* 预留三行高度：描述只有一两行时也能撑住卡片，行与行之间高度一致 */
  min-height:calc(5.25em + 11px);
  cursor:help;
}
/* 被截断时底部轻微渐隐：暗示「还有下文」。
   渐变很浅（末行仍可读），完整正文在弹窗里 —— 描述区可点，点卡片就开弹窗。 */
figcaption .desc.is-cut {
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,.5) 100%);
  mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,.5) 100%);
}
.empty {
  grid-column:1/-1; text-align:center; padding:80px 0; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.empty .big { font-size:36px; opacity:.5; }
.empty button {
  padding:9px 18px; border-radius:var(--r-full); border:1px solid var(--line);
  background:var(--surface); cursor:pointer; font-size:13px; transition:var(--t-fast);
}
.empty button:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ================= 分页 ================= */
.pager {
  padding:10px var(--pad) 96px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
}
.pager:empty, .pager.hidden { display:none; }
.pager button {
  min-width:38px; height:38px; padding:0 12px; cursor:pointer;
  border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface);
  font-size:13.5px; font-variant-numeric:tabular-nums; transition:var(--t-fast);
}
.pager button:hover:not(:disabled) { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.pager button:disabled { opacity:.32; cursor:default; }
.pager button.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; }
.pager .gap { border:0; background:none; color:var(--muted); cursor:default; }
.pager .status {
  width:100%; text-align:center; font-size:11px; color:var(--muted);
  font-family:'Space Mono',monospace; letter-spacing:.16em; margin-bottom:4px;
  text-transform:uppercase;
}

/* ================= 弹出大图 ================= */
.modal {
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:4vh 3vw;
  background:rgba(14,13,11,.78); backdrop-filter:blur(8px);
  animation:fadeIn .2s var(--ease);
}
.modal.open { display:flex; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.modal-inner {
  position:relative; width:min(2560px,96vw); height:min(94vh,1080px);
  display:flex; flex-direction:column;
  background:#111; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3);
  animation:modalIn .28s var(--ease);
}
@keyframes modalIn {
  from { opacity:0; transform:translateY(16px) scale(.985); }
  to   { opacity:1; transform:none; }
}
.modal-inner .bar {
  display:flex; align-items:center; gap:12px; padding:12px 16px; color:#eee;
  background:#181818; border-bottom:1px solid rgba(255,255,255,.08);
  min-width:0; flex-wrap:nowrap;
}
/* 标题区在窄屏要能收缩：单行 + 省略号，避免标题被挤成竖排 */
.modal-inner .bar .name {
  font-weight:700; font-size:15px;
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.modal-inner .bar .en {
  font-size:11.5px; color:#9d9d9d; font-family:'Space Mono',monospace;
  padding-left:12px; border-left:1px solid rgba(255,255,255,.14);
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.modal-inner .bar .tag {
  font-size:11px; padding:3px 10px; border-radius:var(--r-full);
  background:rgba(255,255,255,.1); color:#cfcfcf;
  flex:none; white-space:nowrap;
}
.modal-inner .bar .close {
  margin-left:auto; cursor:pointer; border:0; background:rgba(255,255,255,.1);
  color:#fff; width:32px; height:32px; border-radius:var(--r-xs); font-size:15px;
  transition:var(--t-fast); flex:none;
}
.modal-inner .bar .close:hover { background:var(--accent); color:var(--accent-ink); transform:rotate(90deg); }
.modal-inner .bar .bar-dl {
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 14px; border-radius:var(--r-full); cursor:pointer;
  font-size:12.5px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12);
  transition:var(--t-fast); flex:none; white-space:nowrap;
}
.modal-inner .bar .bar-dl .dl-ico { font-size:13px; line-height:1; }
/* 「原页面」：在新标签页打开被预览的那一页（比下载按钮更轻） */
.modal-inner .bar .bar-open {
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px; border-radius:var(--r-full); cursor:pointer;
  font-size:12.5px; font-weight:600; color:#ddd;
  background:transparent; border:1px solid rgba(255,255,255,.16);
  transition:var(--t-fast); flex:none; white-space:nowrap;
}
.modal-inner .bar .bar-open:hover {
  background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.34);
}
.modal-inner .bar .bar-open .bo-ico { font-size:13px; line-height:1; }
.modal-inner .bar .bar-dl:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:translateY(-1px); }
.modal-inner .bar .bar-dl.done { background:var(--ok); border-color:var(--ok); color:#fff; }
.modal-inner .bar .mag-btn {
  position:static; width:32px; height:32px; opacity:.85; flex:none;
}
.modal-inner .bar .mag-btn.active { background:var(--accent); border-color:var(--accent-2); }

/* 完整描述条：卡片上的正文被 -webkit-line-clamp 截成 3 行，
   全文在这里给 —— 标签 chips + 正文，两段都不截断。 */
.modal-inner .modal-desc {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:9px 16px; background:#181818; color:#c9c9c9;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12.5px; line-height:1.7; flex:none;
  max-height:22vh; overflow-y:auto;
}
.modal-inner .modal-desc[hidden] { display:none; }
.modal-inner .modal-desc .md-tags { display:inline-flex; flex-wrap:wrap; gap:5px; flex:none; }
.modal-inner .modal-desc .md-chip {
  font-size:11px; padding:2px 9px; border-radius:var(--r-full);
  background:rgba(255,255,255,.09); color:#cfcfcf; white-space:nowrap;
}
.modal-inner .modal-desc .md-text { flex:1 1 320px; min-width:0; color:#b6b6b6; }

.modal-stage {
  position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:#1c1c1c;
  display:flex; align-items:center; justify-content:center;
  cursor:default;
}
.modal-stage .frame {
  position:relative; width:1280px; height:800px; flex:none; overflow:hidden;
  transform-origin:center center;
  transform:translate(var(--px,0px), var(--py,0px)) scale(var(--ms,1));
  transition:transform .22s var(--ease);
}
.modal-stage .frame.dragging { transition:none; cursor:grabbing; }
.modal-stage .zoom {
  width:1280px; height:800px;
  transform-origin:0 0;
  transform:translate(calc(-1 * var(--tx,0px)), calc(-1 * var(--ty,0px))) scale(var(--mz,1));
}
.modal-stage .zoom iframe { width:1280px; height:800px; border:0; display:block; background:#fff; }
.modal-stage iframe { width:1280px; height:800px; border:0; display:block; background:#fff; }
.stage-lens {
  position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.stage-lens::before, .stage-lens::after {
  content:""; position:absolute; left:var(--mx,50%); top:var(--my,50%);
  transform:translate(-50%,-50%);
}
.stage-lens::before {
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 0 0 2px rgba(0,0,0,.45);
}
.stage-lens::after {
  width:2px; height:2px; background:#fff; border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
.modal-stage.mag-on .stage-lens { opacity:1; }
.modal-stage.mag-on { cursor:zoom-in; }
.modal-stage.mag-on iframe { pointer-events:none; }
.modal-stage.pannable { cursor:grab; }
.modal-stage.pannable:active { cursor:grabbing; }

/* 弹窗底部工具条 */
.modal-foot {
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  background:#181818; border-top:1px solid rgba(255,255,255,.08);
  color:#9d9d9d; font-size:11.5px; flex-wrap:wrap;
}
.modal-foot .spacer { flex:1; }
.modal-foot .tips { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.modal-foot kbd {
  font-family:'Space Mono',monospace; font-size:10.5px; padding:2px 6px; border-radius:5px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); color:#ddd;
}
.zoom-ctl { display:flex; align-items:center; gap:4px; }
.zoom-ctl button {
  height:26px; min-width:26px; padding:0 8px; border-radius:var(--r-xs);
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  color:#ddd; cursor:pointer; font-size:12px; transition:var(--t-fast);
}
.zoom-ctl button:hover { background:rgba(255,255,255,.16); color:#fff; }
.zoom-ctl .lvl {
  font-family:'Space Mono',monospace; font-size:11px; color:#bbb;
  min-width:44px; text-align:center;
}

/* ================= 提示条 / 回到顶部 / 页脚 ================= */
.toast {
  position:fixed; left:50%; bottom:32px; z-index:400; transform:translate(-50%,14px);
  padding:11px 20px; border-radius:var(--r-full); font-size:13px; font-weight:600;
  background:rgba(18,17,15,.94); color:#fff; box-shadow:0 12px 34px -12px rgba(0,0,0,.65);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
  display:flex; align-items:center; gap:8px;
}
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast::before { content:"✓"; color:#7ee2a0; }
.toast.err::before { content:"!"; color:#ffb4b4; }

/* 窗口缩放过程中关掉缩略图的过渡动画，避免缩放拖影 */
body.resizing .thumb .viewport { transition:none; }

.to-top {
  position:fixed; right:22px; bottom:24px; z-index:90;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  box-shadow:var(--sh-2); font-size:15px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:var(--t-mid);
}
.to-top.show { opacity:1; pointer-events:auto; transform:none; }
.to-top:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ================= 页脚 =================
   三栏：品牌 / 导航 / 规模数字。比一行小字更像成稿的站点 */
footer {
  padding:44px var(--pad) 40px;
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-soft) 55%, transparent));
}
footer .foot-main {
  display:grid; gap:28px 40px; align-items:start;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr);
}
footer .foot-logo {
  display:inline-flex; align-items:center; gap:9px;
  font-weight:900; font-size:15px; letter-spacing:.06em;
}
footer .foot-logo em { font-style:normal; color:var(--accent); }
footer .foot-logo .mark {
  width:22px; height:22px; border-radius:6px; flex:none;
  background:url("icon.jpg") center/cover no-repeat;
}
footer .foot-desc {
  margin-top:12px; font-size:12.5px; color:var(--muted); line-height:1.8; max-width:52ch;
  /* balance：几行文字均分宽度，避免「源码。」这种孤零零掉到最后一行 */
  text-wrap:balance;
}
footer .foot-h {
  display:block; font-family:'Space Mono',monospace; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin-bottom:12px;
}
footer .foot-nav { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
footer .foot-nav a {
  font-size:13px; color:var(--ink-2); font-weight:600;
  border-bottom:1px solid transparent; transition:var(--t-fast);
  min-height:24px; display:inline-flex; align-items:center; /* 点按目标不小于 24px */
}
footer .foot-nav a:hover { color:var(--accent); border-bottom-color:color-mix(in srgb, var(--accent) 55%, transparent); }
footer .foot-stats { display:flex; flex-direction:column; gap:8px; }
footer .foot-stat { display:flex; align-items:baseline; gap:7px; font-size:12px; color:var(--muted); }
footer .foot-stat b {
  font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:var(--ink);
  letter-spacing:-.02em;
}
footer .foot-note {
  margin-top:30px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:11.5px; color:var(--muted); text-align:center;
}
footer a {
  color:var(--accent); font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  transition:var(--t-fast);
}
footer a:hover { border-bottom-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); }
footer .foot-nav a:hover { background:none; }
@media (max-width:820px){
  footer .foot-main { grid-template-columns:minmax(0,1fr); gap:26px; }
  footer .foot-stats { flex-direction:row; flex-wrap:wrap; gap:10px 26px; }
  footer .foot-note { text-align:left; }
}

/* ================= 响应式 ================= */
@media (max-width:1024px){
  /* 顶栏开始变挤时先做无损收紧：字号与内边距各让一点，
     搜索框的 placeholder 就不会被切掉半截（「搜索风格i」那种）。 */
  header.nav { gap:14px; }
  header.nav .brand { gap:12px; }
  .search input { padding:9px 30px 9px 32px; font-size:13px; }
}
@media (max-width:900px){
  .grid { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
  /* 顶栏一行实在放不下时（761–900px），把宽度让给搜索框 ——
     规模徽标在页脚还有一份，「换一批」有 title 提示，都可以让位。 */
  header.nav .meta { display:none; }
  header.nav .shuffle-btn .lb { display:none; }
  header.nav .shuffle-btn { padding:0 7px; }
}
@media (max-width:520px){
  header.nav .logo { font-size:15px; gap:7px; }
  header.nav .links a { padding:6px 11px; font-size:13px; }
}
@media (max-width:760px){
  .grid { grid-template-columns:1fr; padding:16px 16px 30px; }
  header.nav { padding:0 16px; flex-wrap:wrap; height:auto; min-height:60px; row-gap:10px; padding-top:10px; padding-bottom:10px; }
  header.nav.scrolled { height:auto; }
  header.nav .brand { flex:1 1 auto; }
  header.nav .right { order:2; flex:1 1 100%; gap:8px; }
  header.nav .meta { display:none; }
  .search { flex:1 1 120px; }
  .hero { padding:96px 16px 34px; gap:26px; }
  .hero-cta { gap:12px; }
  .pager { padding:8px 16px 76px; }
  .section-title { margin:0 16px; padding-top:26px; }
  .modal { padding:0; }
  /* 100dvh：移动端浏览器收起地址栏时 100vh 会超出可视区 */
  /* 用 100% 而不是 100vw：100vw 含滚动条宽度，会造成横向溢出 */
  .modal-inner { width:100%; max-height:100vh; height:100vh; height:100dvh; border-radius:0; }
  .modal-stage { height:auto; flex:1; }
  .modal-foot { flex-wrap:wrap; }
  .to-top { right:14px; bottom:14px; }
  /* 弹窗标题栏：窄屏收起英文名与标签，下载按钮只留图标 */
  .modal-inner .bar { padding:10px 12px; gap:9px; }
  .modal-inner .bar .en { display:none; }
  .modal-inner .bar .bar-dl { padding:0 11px; }
  .modal-foot .tips { display:none; }
}
@media (max-width:480px){
  .modal-inner .bar .tag { display:none; }
  .modal-inner .bar .bar-dl .dl-txt { display:none; }
  .modal-inner .bar .bar-dl { padding:0 9px; }
  .modal-inner .bar .bar-open .bo-txt { display:none; }
  .modal-inner .bar .bar-open { padding:0 9px; }
  /* 分页：上一页/下一页 只留箭头，按钮更紧凑 */
  .pager .pn-txt { display:none; }
  .pager button { min-width:34px; height:34px; padding:0 10px; font-size:12.5px; }
  .pager { gap:6px; }
}
/* 竖屏手机：预览画面改为顶部对齐，避免悬在大片黑区中间
   （frame 是 1280×800 的盒子，缩放后内容仍在盒子中央，故同时改 transform-origin） */
@media (max-width:760px) and (orientation:portrait){
  /* 预览是 1280×800 的横图，竖屏下若还把弹窗撑满全屏，
     画面只占顶部一条，下面大半屏就是没用的黑。
     改成「内容高度」的浮层：舞台高度跟着缩放后的画面走（JS 量），弹窗整体收缩。 */
  .modal { padding:12px; align-items:center; }
  .modal-inner {
    width:100%; height:auto; max-height:calc(100dvh - 24px);
    border-radius:14px;
  }
  .modal-stage { flex:none; height:auto; padding:0; align-items:flex-start; }
  .modal-stage .frame { transform-origin:top center; }
}

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

/* ================= 场景筛选条 =================
   分类区只做一件事：选场景。
   一行 chips，没有面板盒子、没有标题行、没有说明文案、没有折叠 —— 越少越清楚。 */
.filterbar {
  padding:0 var(--pad); margin:0 0 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
/* 全部页的筛选条吸在顶栏下方：一页 24 张，滚动时不用翻回顶部就能换筛选。
   首页的筛选条只是「跳到全部页」的入口，不值得占一屏高度，所以不吸。 */
.filterbar.sticky-fb {
  position:sticky; top:56px; z-index:30;
  padding-top:8px; padding-bottom:8px;
}
/* 背景画在伪元素上，并向下多撑 16px 盖住下方间距 ——
   否则吸住之后，卡片会从筛选条与标题之间那道缝里露出来。
   未吸住时整体透明（页面底色本来就是它），避免顶部凭空多出一条线。 */
.filterbar.sticky-fb::before {
  content:""; position:absolute; inset:-1px 0 -16px; z-index:-1;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  opacity:0; transition:opacity var(--t-fast);
}
/* 吸住时的分隔线：贴在 chips 下方 8px 处，不贴着背景板的下沿 */
.filterbar.sticky-fb::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line-soft); opacity:0; transition:opacity var(--t-fast);
}
.filterbar.sticky-fb.stuck::before, .filterbar.sticky-fb.stuck::after { opacity:1; }
/* 窄屏 chips 会折成两行，吸顶太占地方 —— 窄屏就不吸了 */
@media (max-width:900px){
  .filterbar.sticky-fb {
    position:static; padding-top:0; padding-bottom:0;
    padding-left:var(--pad); padding-right:var(--pad);
  }
  .filterbar.sticky-fb::before, .filterbar.sticky-fb::after { content:none; }
}
.filterbar .fb-label {
  flex:none; font-size:11px; color:var(--muted);
  font-family:'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
}
/* chips 的基准宽度取 0：让它先让位、自己内部折行，
   而不是把「全部场景 →」挤到下一行单独占一行（就成了孤儿链接）。 */
.filterbar .chips { flex:1 1 0%; min-width:0; }
.filterbar .fb-more {
  flex:none; margin-left:auto; font-size:12.5px; color:var(--accent);
  border-bottom:1px solid transparent; transition:var(--t-fast);
  display:inline-flex; align-items:center; min-height:24px; /* 点按目标不小于 24px */
}
.filterbar .fb-more:hover { border-bottom-color:var(--accent); }
@media (max-width:760px){
  /* 窄屏下 .grid 用 16px 留白，筛选条要跟着对齐，否则左右错开 16px */
  .filterbar { padding-left:16px; padding-right:16px; }
}
@media (max-width:900px){
  /* 窄屏 hero 里已经有「查看全部风格 →」的入口，筛选条下面再挂一个
     「全部场景 →」既占地方，又会把最后一个 chip 挤到第二行 —— 让位给 chips。 */
  .filterbar .fb-more { display:none; }
}
@media (max-width:640px){
  .filterbar { gap:10px; }
}

.chips { display:flex; flex-wrap:wrap; gap:6px; }
/* 「不限」选项：虚线边框，和具体场景区分开；选中后转实线 */
.chip-any { border-style:dashed; font-weight:600; }
.chip-any.active { border-style:solid; }
/* 场景细到二十多个，chip 收小一号，避免筛选条折成三四行把人往下推 */
.chip {
  padding:5px 9px; border-radius:var(--r-full); border:1px solid var(--line);
  background:var(--surface); font-size:12px; color:var(--ink-2);
  cursor:pointer; transition:var(--t-fast); display:inline-flex; align-items:center; gap:5px;
  text-decoration:none;
}
.chip i {
  font-style:normal; font-family:'Space Mono',monospace; font-size:10px;
  color:var(--muted); transition:var(--t-fast);
}
/* 手机上一律单行横滑，不再折成七八行把首屏卡片压没 */
@media (max-width:640px){
  .chips {
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px;
    scrollbar-width:none; scroll-snap-type:x proximity;
    /* 横滑条本身别画出来：Windows 上默认会挂一条灰条在 chip 底下，
       又占高度又显脏，触屏本来就能甩动。 */
    -ms-overflow-style:none;
  }
  .chips::-webkit-scrollbar { display:none; width:0; height:0; }
  .chip { padding:6px 12px; flex:none; scroll-snap-align:start; }
}
.chip:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); transform:translateY(-1px); }
.chip:hover i { color:color-mix(in srgb, var(--bg) 70%, transparent); }
.chip.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.chip.active i { color:color-mix(in srgb, var(--accent-ink) 75%, transparent); }

/* ================= 卡片说明区：场景徽标 ================= */
figcaption .scene-badge {
  font-size:11px; padding:3px 10px; border-radius:var(--r-full); flex:none;
  background:color-mix(in srgb, var(--accent) 9%, var(--surface));
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  white-space:nowrap;
  margin-left:auto;            /* 场景徽标靠右，与标题行形成对齐 */
}

/* ================= 弹窗标题栏：场景徽标 ================= */
.modal-inner .bar .badge {
  font-size:11px; padding:3px 9px; border-radius:var(--r-full);
  background:var(--bg-soft); color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap;
}
/* 「可交互」徽标：点开之后能直接动手的页面，标题栏里给一个明确提示 */
.modal-inner .bar .badge.m-live {
  background:color-mix(in srgb, #2f9e5c 14%, var(--bg-soft));
  color:#3fbb6e; border-color:color-mix(in srgb, #3fbb6e 34%, transparent);
  display:flex; align-items:center; gap:6px;
}
.modal-inner .bar .badge.m-live::before {
  content:""; width:5px; height:5px; border-radius:50%; background:#3fbb6e;
}
@media (max-width:480px){
  .modal-inner .bar .badge { display:none; }
}

/* 窄屏：筛选面板头部改为竖排，避免「全部」chip 溢出面板右缘 */

/* ================= 弹窗内的多页面切换条 =================
   已移除：全站不再有同族变体，一个条目就是一个页面 */