/* 卡片样式（全分辨率，1:1 输出像素）。浏览器/Playwright 加载 Google Fonts；
   离线环境自动回退到 Noto CJK + DejaVu。预览页用 transform:scale 缩小显示。

   主题：卡片只引用「语义 token」（--bg/--fg/--accent/--feature-* …），不写死颜色。
   默认 :root = Anthropic（暖陶土色，与历史版本像素一致）；
   .v-<vendor> 作用域覆盖这些 token 即换肤，版式厂商无关。新增厂商只加一个 .v-xxx 块。 */
:root{
  /* 基础面（浅色内容卡） */
  --bg:#F1ECE0; --bg-2:#E9E2D2; --fg:#26221C; --muted:#5A5347; --line:#CFC6B2;
  /* 强调色（accent） */
  --accent:#C1572E; --accent-deep:#9E3F1E; --accent-soft:#E0A47F;
  /* 特写面（深色封面/结尾卡） */
  --feature-bg:#26221C; --feature-fg:#F1ECE0; --feature-muted:#C9C1B0;

  --serif:"Fraunces","Noto Serif SC","Noto Serif CJK SC","DejaVu Serif",serif;
  --serifcn:"Noto Serif SC","Noto Serif CJK SC","Fraunces","DejaVu Serif",serif;
  --sans:"Noto Sans SC","Noto Sans CJK SC","DejaVu Sans",sans-serif;
  --mono:"Space Mono","DejaVu Sans Mono",monospace;

  /* 液态玻璃风格 token（仅 .style-glass 用；浅底默认值，深底主题在下方覆盖）。
     做成 token：换肤不影响玻璃，新增厂商也自动有玻璃风。 */
  --glass-bg:rgba(255,255,255,.58);     /* 磨砂面板底色（半透，偏实以保证可读性） */
  --glass-hi:rgba(255,255,255,.65);     /* 顶部高光镜面线 */
  --glass-border:rgba(255,255,255,.55); /* 玻璃边缘描边 */
  --glass-shade:rgba(40,28,16,.14);     /* 底部加深，制造厚度 */
}

/* ===== OpenAI 主题：深墨黑底 + 青绿 accent ===== */
.v-openai{
  --bg:#0E1211; --bg-2:#141A18; --fg:#E8EEEB; --muted:#94A39C; --line:#28302D;
  --accent:#10A37F; --accent-deep:#0C8466; --accent-soft:#5FD0B0;
  --feature-bg:#080C0B; --feature-fg:#E8EEEB; --feature-muted:#8C9B94;
}
/* 深底卡片噪点用 screen 叠加（multiply 会糊成一片黑） */
.v-openai.card::after{mix-blend-mode:screen;opacity:.06}

/* ===== Gemini 主题：冷调浅底 + 蓝→紫 accent，深藏青特写面 ===== */
.v-gemini{
  --bg:#F4F6FB; --bg-2:#E9EDF8; --fg:#1B1F2A; --muted:#5B6273; --line:#D3DAEA;
  --accent:#4F7CF7; --accent-deep:#3B5BD0; --accent-soft:#A78BFA;
  --feature-bg:#171A2B; --feature-fg:#F4F6FB; --feature-muted:#AAB2C8;
}

/* ===== NVIDIA 主题：深墨黑 + 标志荧光绿 #76B900 ===== */
.v-nvidia{
  --bg:#0C0F0A; --bg-2:#141A10; --fg:#EAF0E2; --muted:#9BA890; --line:#283022;
  --accent:#76B900; --accent-deep:#5E9400; --accent-soft:#A4D65E;
  --feature-bg:#070A05; --feature-fg:#EAF0E2; --feature-muted:#9BA890;
}
.v-nvidia.card::after{mix-blend-mode:screen;opacity:.06}

/* ===== 国产大模型（聚合轨 cn）主题：水墨近黑底 + 朱红 accent + 鎏金 soft ===== */
/* 聚合多家国内公司，无单一品牌色，取「朱红 + 鎏金」国风组合：与 OpenAI 青绿、NVIDIA 绿
   同为深底但色相迥异，一眼可分。深底主题，保留下方 screen 噪点行。 */
.v-cn{
  --bg:#181210; --bg-2:#211814; --fg:#F3EADD; --muted:#A99B89; --line:#352A23;
  --accent:#E0392B; --accent-deep:#B5261B; --accent-soft:#D8A24B;
  --feature-bg:#0F0B0A; --feature-fg:#F3EADD; --feature-muted:#A99B89;
}
.v-cn.card::after{mix-blend-mode:screen;opacity:.06}

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

.card{position:relative;overflow:hidden;background:var(--bg);color:var(--fg);
  font-family:var(--sans)}
.card .inner{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}
.blob{position:absolute;border-radius:50%;opacity:.8}

/* ===== 小红书 1080×1440 ===== */
.xhs{width:1080px;height:1440px}
.xhs .inner{padding:88px 82px}
.xhs-cover .topbar{display:flex;justify-content:space-between;align-items:baseline}
.xhs-cover .edition{font-family:var(--mono);font-size:28px;letter-spacing:3px;color:var(--accent-deep)}
.xhs-cover .date{font-family:var(--mono);font-size:28px;color:var(--muted)}
.xhs-cover .kicker{margin-top:120px;font-family:var(--mono);font-size:30px;letter-spacing:8px;color:var(--accent);text-transform:uppercase}
.xhs-cover h1{font-family:var(--serifcn);font-weight:900;font-size:128px;line-height:1.08;margin-top:24px;letter-spacing:-2px}
.xhs-cover h1 em{font-family:var(--serif);font-style:italic;color:var(--accent);font-weight:500}
.xhs-cover .teasers{position:absolute;left:82px;right:82px;bottom:150px;display:flex;flex-direction:column;gap:26px}
.xhs-cover .teaser{display:flex;gap:26px;align-items:flex-start;font-size:35px;line-height:1.34;color:var(--fg)}
.xhs-cover .teaser .n{font-family:var(--serif);font-weight:900;color:var(--accent);font-size:46px;line-height:1;min-width:52px}
.xhs-cover .teaser .tco{font-family:var(--serifcn);font-weight:700;color:var(--accent)}
.xhs-cover .footer{position:absolute;left:82px;right:82px;bottom:70px;padding-top:36px;border-top:2px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:27px;color:var(--muted)}

.xhs-item .bgnum{position:absolute;z-index:1;right:-30px;bottom:40px;
  font-family:var(--serif);font-weight:900;font-size:520px;line-height:.7;
  color:var(--accent);opacity:.06;pointer-events:none}
.xhs-item .head{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:25px;letter-spacing:2px}
.xhs-item .head .edition{color:var(--accent-deep)}
.xhs-item .head .pager{color:var(--muted)}
.xhs-item .head .pager b{color:var(--accent);font-size:31px}
.xhs-item .body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:30px 0}
.xhs-item .tags{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.xhs-item .tag{background:var(--accent);color:#fff;font-size:30px;font-weight:500;letter-spacing:2px;padding:13px 32px;border-radius:60px}
/* 公司徽标（聚合轨：标注来源公司）——描边款，与实心标签区分 */
.xhs-item .org{font-family:var(--serifcn);font-weight:700;font-size:28px;letter-spacing:1px;
  color:var(--accent-soft);border:2px solid var(--accent-soft);padding:11px 28px;border-radius:60px}
.xhs-item h2{font-family:var(--serifcn);font-weight:700;font-size:82px;line-height:1.16;margin-top:46px;letter-spacing:-1px}
.xhs-item .rule{width:96px;height:8px;background:var(--accent);border-radius:4px;margin:48px 0}
.xhs-item .sum{font-size:41px;line-height:1.66;color:var(--muted);font-weight:300}
/* 长文案自适应字号（由 cards.js fitClass 按字数附加 t1..t4 / s1..s4），
   字号越小连带收紧标题上间距与 rule 间距，给正文腾出更多高度，避免裁切 */
.xhs-item.t1 h2{font-size:68px}
.xhs-item.t2 h2{font-size:58px;margin-top:40px}
.xhs-item.t3 h2{font-size:50px;margin-top:36px}
.xhs-item.t4 h2{font-size:44px;line-height:1.2;margin-top:32px}
.xhs-item.s1 .sum{font-size:37px}
.xhs-item.s2 .sum{font-size:33px;line-height:1.62}
.xhs-item.s3 .sum{font-size:30px;line-height:1.6}
.xhs-item.s4 .sum{font-size:28px;line-height:1.58}
.xhs-item.t3 .rule,.xhs-item.t4 .rule{margin:36px 0}
.xhs-item.s3 .rule,.xhs-item.s4 .rule{margin:34px 0}
.xhs-item .src{padding-top:40px;border-top:2px solid var(--line);font-family:var(--mono);font-size:25px;color:var(--muted);display:flex;justify-content:space-between}
/* 来源链接：继承父级颜色、默认无下划线 → 导出图片视觉零变化；展示页 hover 才显下划线 */
.srclink{color:inherit;text-decoration:none}
.srclink:hover{text-decoration:underline}

.xhs-outro{background:var(--feature-bg);color:var(--feature-fg)}
.xhs-outro::after{mix-blend-mode:screen;opacity:.05}
.xhs-outro .inner{justify-content:center}
.xhs-outro .mark{font-family:var(--serif);font-style:italic;font-size:54px;color:var(--accent-soft)}
.xhs-outro h2{font-family:var(--serifcn);font-weight:900;font-size:104px;line-height:1.14;margin-top:40px}
.xhs-outro p{margin-top:44px;font-size:38px;line-height:1.6;color:var(--feature-muted);font-weight:300;max-width:760px}
.xhs-outro .cta{align-self:flex-start;margin-top:70px;border:3px solid var(--accent-soft);color:var(--accent-soft);padding:24px 50px;border-radius:60px;font-size:35px}

/* ===== 公众号封面 900×383 ===== */
.gzh-cover{width:900px;height:383px;background:var(--feature-bg);color:var(--feature-fg)}
.gzh-cover::after{mix-blend-mode:screen;opacity:.05}
.gzh-cover .inner{padding:52px 60px;justify-content:space-between}
.gzh-cover .row{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:21px;letter-spacing:2px;color:var(--accent-soft)}
.gzh-cover h1{font-family:var(--serifcn);font-weight:900;font-size:66px;line-height:1.05;letter-spacing:-1px}
.gzh-cover h1 em{font-family:var(--serif);font-style:italic;color:var(--accent-soft);font-weight:500}
.gzh-cover .sub{font-size:24px;color:var(--feature-muted);font-weight:300}

/* ===== 公众号正文长图 900 宽 ===== */
.gzh-body{width:900px}
.gzh-body .inner{padding:60px 70px}
.gzh-body .head{font-family:var(--mono);font-size:23px;letter-spacing:3px;color:var(--accent);text-transform:uppercase}
.gzh-body h2{font-family:var(--serifcn);font-weight:900;font-size:58px;margin-top:14px;letter-spacing:-1px}
.gzh-body .gline{height:2px;background:var(--line);margin:40px 0}
.gzh-body .e{display:flex;gap:30px;padding:26px 0}
.gzh-body .e .num{font-family:var(--serif);font-weight:900;font-size:54px;color:var(--accent-soft);line-height:1;min-width:70px}
.gzh-body .e .bd .tag{display:inline-block;background:var(--accent);color:#fff;font-size:21px;padding:4px 16px;border-radius:40px;letter-spacing:1px}
.gzh-body .e .bd .org{display:inline-block;margin-left:10px;font-family:var(--serifcn);font-weight:700;font-size:21px;color:var(--accent-deep);border:1.5px solid var(--accent-deep);padding:3px 14px;border-radius:40px;letter-spacing:1px}
.gzh-body .e .bd h3{font-family:var(--serifcn);font-weight:700;font-size:37px;margin-top:10px}
.gzh-body .e .bd p{font-size:28px;line-height:1.55;color:var(--muted);margin-top:14px;font-weight:300}
.gzh-body .e .bd .s{font-family:var(--mono);font-size:22px;color:var(--accent-deep);margin-top:14px}
.gzh-body .foot{margin-top:20px;padding-top:36px;border-top:2px solid var(--line);font-size:23px;color:var(--muted);display:flex;justify-content:space-between}

/* 公众号正文长图为浅底（内容面）：OpenAI 主题下也保持深底一致性 —— gzh-body
   用 --bg/--fg，已随主题切换，无需特例。 */

/* ============================================================
   液态玻璃风格（Apple Liquid Glass）—— 正交可选风格层
   ------------------------------------------------------------
   用法：给 .card 追加 class `style-glass`（由 cards.js 读 DATA.style 控制，
   或渲染时 CARD_STYLE=glass 覆盖）。与 .v-<vendor> 主题正交叠加：
   颜色仍由主题 token 决定，本层只换「材质」——彩色渐变底 + 磨砂玻璃面板 +
   镜面高光 + 边缘描边 + 厚度阴影。backdrop-filter 仅 Chromium/浏览器生效
   （Playwright 生产链路与展示页 OK；wkhtml 退化为半透明无模糊，可接受）。
   ============================================================ */

/* 深底主题（OpenAI / NVIDIA / cn）：玻璃改用深色磨砂 + 收敛的高光描边 */
.style-glass.v-openai,.style-glass.v-nvidia,.style-glass.v-cn{
  --glass-bg:rgba(16,16,18,.44);
  --glass-hi:rgba(255,255,255,.34);
  --glass-border:rgba(255,255,255,.26);
  --glass-shade:rgba(0,0,0,.28);
}

/* 卡片底：用主题强调色铺一层彩色渐变网格，磨砂面板模糊它即得「液态折射」感 */
.style-glass.card{
  background:
    radial-gradient(135% 130% at 10% 6%, var(--accent-soft) 0%, transparent 46%),
    radial-gradient(120% 120% at 94% 16%, var(--accent) 0%, transparent 44%),
    radial-gradient(130% 130% at 82% 98%, var(--accent-deep) 0%, transparent 48%),
    var(--bg);
}
/* 深底主题彩色渐变收敛一点，避免过曝（特写面卡另见下方） */
.style-glass.v-openai.card,.style-glass.v-nvidia.card,.style-glass.v-cn.card{
  background:
    radial-gradient(135% 130% at 10% 6%, color-mix(in srgb,var(--accent-soft) 70%,transparent) 0%, transparent 50%),
    radial-gradient(120% 120% at 94% 16%, color-mix(in srgb,var(--accent) 62%,transparent) 0%, transparent 48%),
    radial-gradient(130% 130% at 82% 98%, color-mix(in srgb,var(--accent-deep) 70%,transparent) 0%, transparent 52%),
    var(--bg);
}
/* 色斑加大模糊与饱和，作为玻璃后方的流动光晕 */
.style-glass .blob{filter:blur(8px) saturate(1.35)}

/* 磨砂玻璃面板：满幅 inner 上叠半透磨砂 + 顶部镜面高光线 + 边缘描边 + 底部厚度阴影 */
.style-glass .inner{
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--glass-bg) 100%,transparent) 0%,
    color-mix(in srgb,var(--glass-bg) 78%,transparent) 100%);
  -webkit-backdrop-filter:blur(52px) saturate(180%);
  backdrop-filter:blur(52px) saturate(180%);
  box-shadow:
    inset 0 1.6px 0 var(--glass-hi),                 /* 顶部镜面高光 */
    inset 0 0 0 1.5px var(--glass-border),           /* 玻璃边缘描边 */
    inset 0 -120px 120px -90px var(--glass-shade);   /* 底部加深=厚度 */
}
/* 斜向流光：极淡的对角高光扫过面板，强化玻璃的光泽（不挡正文，pointer 透传） */
.style-glass .inner::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(125deg,
    rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 26%,
    rgba(255,255,255,0) 72%, rgba(255,255,255,.08) 100%);
}

/* 玻璃风下，标签/CTA/分隔条做成「描边玻璃 chip」，与磨砂面板同语言 */
.style-glass .xhs-item .tag,.style-glass .gzh-body .e .bd .tag{
  background:color-mix(in srgb,var(--accent) 88%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -8px var(--accent-deep)}
.style-glass .xhs-item .src,.style-glass .gzh-body .foot,
.style-glass .xhs-item .rule{box-shadow:0 1px 0 var(--glass-hi)}

/* 特写面卡（结尾 / 公众号封面）本就是深底 feature-bg：玻璃用统一深色磨砂，
   并用 accent 给底色铺一层光晕，保证磨砂后仍有彩色折射。
   注意：小红书封面 xhs-cover 是「浅底深字」（用 --bg/--fg），不属深底组，
   走上面的默认浅色玻璃，否则深底深字会糊成一片。 */
.style-glass.xhs-outro,.style-glass.gzh-cover{
  background:
    radial-gradient(130% 130% at 12% 8%, color-mix(in srgb,var(--accent) 55%,transparent) 0%, transparent 50%),
    radial-gradient(130% 130% at 90% 94%, color-mix(in srgb,var(--accent-deep) 60%,transparent) 0%, transparent 52%),
    var(--feature-bg);
}
.style-glass.xhs-outro .inner,.style-glass.gzh-cover .inner{
  --glass-bg:rgba(14,12,12,.36);--glass-hi:rgba(255,255,255,.32);
  --glass-border:rgba(255,255,255,.24);--glass-shade:rgba(0,0,0,.3);
}

/* ===== 专题深度·小红书知识卡（纯追加，不影响早报版式） ===== */
.card.deepdive{background:#fff;color:#16181d;}
.card.deepdive .inner{padding:96px 84px;justify-content:flex-start;}
.card.deepdive.cover .inner{justify-content:center;align-items:flex-start;}
.card.deepdive .cover-title{font-size:84px;line-height:1.25;font-weight:800;letter-spacing:.5px;}
.card.deepdive .cover-img{position:relative;padding:0;}
.card.deepdive .cover-img img.cover{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.card.deepdive .cover-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;
  background:linear-gradient(transparent,rgba(0,0,0,.62));pointer-events:none;}
.card.deepdive .cover-img .cover-title{position:absolute;left:84px;bottom:96px;right:84px;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.5);font-size:72px;z-index:2;}
.card.deepdive .kicker{font-size:40px;font-weight:700;color:#c0392b;margin-bottom:28px;}
.card.deepdive .heading{font-size:64px;line-height:1.3;font-weight:800;margin:0 0 56px;}
.card.deepdive .lines{list-style:none;padding:0;margin:0;}
.card.deepdive .lines li{font-size:46px;line-height:1.55;margin-bottom:28px;
  padding-left:40px;position:relative;}
.card.deepdive .lines li::before{content:"·";position:absolute;left:8px;color:#c0392b;font-weight:800;}

/* 专题深度·小红书杂志卡（沉淀自 content/deepdive/*/xhs 的 editorial magazine 版式） */
.card.deepdive.xhs-card{
  --paper:#f3f0e8;--paper-2:#ebe6da;--ink:#0a0a0b;--muted:#68625a;
  --line:rgba(10,10,11,.22);--editorial-accent:#111;--paper-rgb:243,240,232;--ink-rgb:10,10,11;
  background:var(--paper);color:var(--ink);font-family:var(--sans);isolation:isolate;
}
.card.deepdive.xhs-card::after{
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.02),rgba(var(--ink-rgb),.05) 60%,rgba(var(--ink-rgb),.08));
  mix-blend-mode:multiply;opacity:1;
}
.card.deepdive.xhs-card .grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(0,0,0,.045) 1px,transparent 1px);background-size:3px 3px;
}
.card.deepdive.xhs-card .content{
  position:relative;z-index:2;width:100%;height:100%;padding:96px 88px;display:flex;flex-direction:column;
}
.card.deepdive.xhs-card .page-kicker{
  font-family:var(--mono);font-size:19px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(var(--ink-rgb),.55);margin:0 0 28px;
}
.card.deepdive.xhs-card .title-tight{
  font-family:var(--serifcn);font-size:86px;line-height:1.08;font-weight:700;letter-spacing:.02em;margin:0;
}
.card.deepdive.xhs-card .title-mid{
  font-family:var(--serifcn);font-size:72px;line-height:1.12;font-weight:700;letter-spacing:.02em;margin:0;
}
.card.deepdive.xhs-card .quote-shot{
  margin-top:56px;padding:58px 54px;background:rgba(var(--paper-rgb),.74);
  border:1px solid var(--line);min-height:650px;display:flex;flex-direction:column;justify-content:center;
}
.card.deepdive.xhs-card .quote-main{
  font-family:var(--serifcn);font-size:50px;line-height:1.48;font-weight:500;letter-spacing:.02em;margin:0;
}
.card.deepdive.xhs-card .quote-main strong{color:var(--editorial-accent);font-weight:900;}
.card.deepdive.xhs-card .note-list{display:grid;gap:22px;margin-top:44px;}
.card.deepdive.xhs-card .note-item{
  display:grid;grid-template-columns:70px 1fr;gap:22px;align-items:start;padding-top:22px;border-top:1px solid var(--line);
}
.card.deepdive.xhs-card .note-nb{
  font-family:var(--mono);font-size:22px;letter-spacing:.08em;color:var(--editorial-accent);
}
.card.deepdive.xhs-card .note-text{
  font-family:var(--serifcn);font-size:30px;line-height:1.45;color:rgba(var(--ink-rgb),.76);margin:0;
}
.card.deepdive.xhs-card .hero-img{
  margin-top:48px;border:1px solid var(--line);background:#fff;padding:18px;
}
.card.deepdive.xhs-card .hero-img img,.card.deepdive.xhs-card .image-page-img img{width:100%;display:block;}
.card.deepdive.xhs-card .image-page-img{
  margin-top:44px;margin-left:-24px;width:calc(100% + 48px);border:1px solid var(--line);background:#fff;padding:12px;
}
.card.deepdive.xhs-card .caption-band{margin-top:28px;display:grid;gap:18px;}
.card.deepdive.xhs-card .caption-line{
  font-family:var(--serifcn);font-size:34px;line-height:1.38;margin:0;color:rgba(var(--ink-rgb),.82);
}
.card.deepdive.xhs-card .bottom-strip{
  margin-top:auto;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;
  font-family:var(--mono);font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.card.deepdive.xhs-card .pill-row{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;}
.card.deepdive.xhs-card .pill{
  border:1px solid var(--line);padding:10px 14px;font-family:var(--mono);font-size:18px;letter-spacing:.08em;
  color:var(--muted);background:rgba(var(--paper-rgb),.64);
}