/* PromptDeck · intro.css —— 介绍页专用样式
   基调与 public/style.css 完全一致（§8.1）：主色 1 个、中性 4 阶、圆角只用 8/12px、
   间距只用 4/8/12/16/20/24、无渐变、无纹理、无玻璃拟态、字重只用 400/500/600、
   阴影只给「牌」这一类物件（牌盒、牌、大牌）。
   主题 token 名、三段式写法与 localStorage 键（pd.theme）与主站共用一套，
   所以从介绍页点进应用时主题不会跳变。
   §8.3：禁止 * { transition: all }。 */

/* 中文一律用系统里的「方正姚体」，unicode-range 限定在 CJK——与主站同一条规则。 */
@font-face {
  font-family: "PD-Han";
  src: local("方正姚体"), local("FZYaoTi"), local("FZYTK--GBK1-0");
  unicode-range: U+2E80-2EFF, U+2F00-2FDF, U+3000-303F, U+3400-4DBF,
                 U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
}

/* 品牌字面：**不加 unicode-range**，是含拉丁的整脸。
   牌盒上印刷的 PromptDeck 与按钮图里烤死的标签都是这一路的细笔画高对比衬线
   （见 img/_gen_btn9.py 的 FONT_LAT 注释），网页里的品牌名必须同路——
   若让拉丁走 --font 后面的栈，品牌名会与它旁边那张牌盒图上的字对不上。 */
@font-face {
  font-family: "PD-Brand";
  src: local("方正姚体"), local("FZYaoTi"), local("FZYTK--GBK1-0");
}

:root {
  color-scheme: light dark;

  /* 主色（1 个） */
  --primary: #1D4ED8;

  /* 中性 4 阶：背景 / 卡片 / 分隔 / 次级文字 */
  --bg: #F4F4F5;
  --surface: #FFFFFF;
  --divider: #D8D8DC;
  --text-weak: #5B5B63;
  --text: #1A1A1F;

  /* 全场壁纸（与主站同一张）。--bg 仍是图取不到时的纯色兜底 */
  --bg-image: url("./assets/cards/bg-light.webp");

  /* 成品提示词的大牌框（§8.5）。中央空白区就是提示词文字区 */
  --bigcard-image: url("./assets/cards/bigcard-light.webp");

  /* 框盒子的维多利亚雕花框。9 宫格环，同样由按钮母版派生
     （img/_gen_plate_frame.py），与牌盒、按钮、弹窗框同源。
     切片的 4 个数字是**素材图像素**（上 110 / 右 158 / 下 110 / 左 158），
     不是 CSS 长度，所以它是个常量、不随 --fk 变。 */
  --frame-plate: url("./assets/cards/plate-frame-light.webp");

  /* 四色（§8.2 亮色列），花色映射见 public/app.js 的 SUIT：
     art ♥ / tech ♠ / content ♣ / tone ♦ */
  --art: #C8102E;
  --tech: #1D4ED8;
  --content: #047857;
  --tone: #6D28D9;

  --font: "PD-Han", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;

  --topbar-h: 92px;
  --wrap: 1080px;
  --fks: 1;                 /* 雕花框的整体缩放档，窄屏在媒体查询里调小 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131315;
    --surface: #1F1F22;
    --divider: #34343A;
    --text-weak: #A2A2AC;
    --text: #F2F2F5;
    --art: #FF6B73;
    --tech: #7CA9FF;
    --content: #34D399;
    --tone: #B08CFF;
    --bg-image: url("./assets/cards/bg-dark.webp");
    --bigcard-image: url("./assets/cards/bigcard-dark.webp");
    --frame-plate: url("./assets/cards/plate-frame-dark.webp");
  }
}

html[data-theme="light"] {
  /* :root 的 `light dark` 是两值形式——UA 按系统偏好挑一个，跟 data-theme 无关。
     系统是暗色而用户手动切亮时，滚动条 / 滚动条槽这些 UA 自绘件仍是暗的，故钉成单值。 */
  color-scheme: light;
  --bg: #F4F4F5;
  --surface: #FFFFFF;
  --divider: #D8D8DC;
  --text-weak: #5B5B63;
  --text: #1A1A1F;
  --art: #C8102E;
  --tech: #1D4ED8;
  --content: #047857;
  --tone: #6D28D9;
  --bg-image: url("./assets/cards/bg-light.webp");
  --bigcard-image: url("./assets/cards/bigcard-light.webp");
  --frame-plate: url("./assets/cards/plate-frame-light.webp");
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131315;
  --surface: #1F1F22;
  --divider: #34343A;
  --text-weak: #A2A2AC;
  --text: #F2F2F5;
  --art: #FF6B73;
  --tech: #7CA9FF;
  --content: #34D399;
  --tone: #B08CFF;
  --bg-image: url("./assets/cards/bg-dark.webp");
  --bigcard-image: url("./assets/cards/bigcard-dark.webp");
  --frame-plate: url("./assets/cards/plate-frame-dark.webp");
}

/* §8.3 主题切换：只过渡三个属性，过渡结束由 JS 移除 class */
html.theme-fading,
html.theme-fading body {
  transition: background-color 200ms linear, color 200ms linear, border-color 200ms linear;
}

* { box-sizing: border-box; }

html {
  background-color: var(--bg);
  background-image: var(--bg-image);
  background-repeat: repeat;
  background-attachment: fixed;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

.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;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ========== 图片按钮（与主站 .img-btn 同一套写法） ==========
   宽度一律写死为「素材宽 ÷ 4」：站点素材是 DPR 4 出的，这样在 4 倍屏上是
   1:1 像素映射，不会被 background-size 拉伸。主题必须三段式（见 style.css 的长注释）：
   ① 默认亮写在选择器里；② 系统档暗色放进媒体查询并带 html:not([data-theme="light"])；
   ③ 手动暗色再写一条 html[data-theme="dark"]。 */
.img-btn,
.ui-btn {
  display: inline-block;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  cursor: pointer;
  vertical-align: middle;
}
.ui-btn { cursor: default; }           /* 流程示意里的按钮是**说明书上的按钮图**，不可点 */

/* 主 CTA：「开启 PromptDeck」牌（1048×262 @4x = 262×65.5 CSS）
   2026-10-01 起由 img/_build_newbtns.py 从用户给的逐按钮画稿
   img/victorian-light-buttons/box-start.png 派生（抠边 + 烫字），
   与全站 8 个按钮同源；更早的模板母版推导已退役。 */
#btn-start {
  display: inline-block;
  width: 262px;
  height: 65.5px;
  background: url("./assets/cards/btn-start-light.webp") center / 100% 100% no-repeat;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 140ms ease;
}
#btn-start:hover { transform: translateY(-2px); }
#btn-start:active { transform: translateY(0); }

/* 主题切换按钮：44×44，素材与主站 #theme-toggle 是同一张 */
#theme-toggle { width: 44px; background-image: url("./assets/cards/btn-theme-light.webp"); }

/* 流程示意里复用的**真实按钮图**（跳过问题 / 生成提示词 / 复制全文 / 下载） */
.ui-skip     { width: 124px;    background-image: url("./assets/cards/btn-skip-light.webp"); }
.ui-finalize { width: 112px;    background-image: url("./assets/cards/btn-finalize-light.webp"); }
.ui-copy     { width: 121.25px; background-image: url("./assets/cards/btn-copy-light.webp"); }
.ui-dltxt    { width: 115.25px; background-image: url("./assets/cards/btn-dltxt-light.webp"); }
.ui-dlmd     { width: 119.5px;  background-image: url("./assets/cards/btn-dlmd-light.webp"); }

/* ② 系统档为暗色时（且用户没手动选亮色） */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #theme-toggle { background-image: url("./assets/cards/btn-theme-dark.webp"); }
  html:not([data-theme="light"]) #btn-start { background-image: url("./assets/cards/btn-start-dark.webp"); }
  html:not([data-theme="light"]) .ui-skip     { background-image: url("./assets/cards/btn-skip-dark.webp"); }
  html:not([data-theme="light"]) .ui-finalize { background-image: url("./assets/cards/btn-finalize-dark.webp"); }
  html:not([data-theme="light"]) .ui-copy     { background-image: url("./assets/cards/btn-copy-dark.webp"); }
  html:not([data-theme="light"]) .ui-dltxt    { background-image: url("./assets/cards/btn-dltxt-dark.webp"); }
  html:not([data-theme="light"]) .ui-dlmd     { background-image: url("./assets/cards/btn-dlmd-dark.webp"); }
}

/* ③ 用户手动切到暗色 */
html[data-theme="dark"] #theme-toggle { background-image: url("./assets/cards/btn-theme-dark.webp"); }
html[data-theme="dark"] #btn-start { background-image: url("./assets/cards/btn-start-dark.webp"); }
html[data-theme="dark"] .ui-skip     { background-image: url("./assets/cards/btn-skip-dark.webp"); }
html[data-theme="dark"] .ui-finalize { background-image: url("./assets/cards/btn-finalize-dark.webp"); }
html[data-theme="dark"] .ui-copy     { background-image: url("./assets/cards/btn-copy-dark.webp"); }
html[data-theme="dark"] .ui-dltxt    { background-image: url("./assets/cards/btn-dltxt-dark.webp"); }
html[data-theme="dark"] .ui-dlmd     { background-image: url("./assets/cards/btn-dlmd-dark.webp"); }

.img-btn:focus-visible,
#btn-start:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ========== 文字底板（介绍页的排版前提） ==========
   全场壁纸 bg-light 是一张高频、低对比的粉色花纹。正文直接压在它上面会明显掉对比：
   实测 15px 的 --text-weak 在花纹上几乎读不动（实拍 qa/probe-light-hero-copy.png），
   因为姚体笔画细，花纹的粉色细线会从字缝里穿过去。
   项目不允许玻璃拟态与渐变，所以这里用**不透明底板**——与主站「内容住在牌 / 框里、
   壁纸只当墙纸」的做法同一条路。大标题（h1 / h2，600 字重、28px 以上）对比够，
   继续留在壁纸上，底板只给正文块。 */

/* ========== 框盒子的维多利亚雕花框 ==========
   素材 public/assets/cards/plate-frame-{light,dark}.webp 由 img/_gen_plate_frame.py
   从按钮母版 _btn_master{,_light}.png 派生，与牌盒 / 8 个按钮 / 弹窗上的雕花框同源：
   四角是母版的茛苕叶角花，上下是细雕花规线，左右是连接卷草。做成 9 宫格环之后，
   同一条雕花才能同时套在 320px 的窄条与 1080px 的横板上而不变形。

   **border-top 与 border-left 的比例被素材锁死（500 : 720）**——角切片是按
   (border-left × border-top) 渲染的，两个方向比例不对，卷草就会被非等比拉伸。
   所以这里只给一个无单位变量 --fk（母版像素 → CSS 像素），两个方向都从它算出来。
   --fk 就是雕花的粗细档：大板用大值、小盒用小值，但它同时决定上下细规线的可见度，
   **不能一味调小**——实测 --fk 低于约 0.03 时，上下两条规线会碎成断续的点
   （证据见 img/_plate_frame_preview.png 里 k=0.05 的窄条）。
   窄屏整体乘 --fks，保持每档的相对关系。

   不写 border-radius、不写 box-shadow：环的四角是直角，圆角会让雕花从圆角外面露出来
   （与主站 #confirm-box 同一条教训）。环中心是透明的，盒子自己的 --surface 透出来，
   所以"复古蚀刻"读起来是底板上刻的墨线，而不是贴上去的一块牌子。 */
/* 2026-10-02 简化版：页面从「定位 / 特性取舍 / 收尾 CTA」等 6 节压到 3 块
   （hero 介绍 → #how 使用方法 → #sample 效果展示），框盒子随之从 10 个减到 6 个。
   删掉的 4 个（.define-card / .feature / .define-note / .cta-plate）带着它们各自的正文一起下线，
   没有把正文搬去别处 —— 「正文一律落在框盒子里」这条判据不变：清单外的段落仍然没有底板。 */
#topbar .wrap,
.hero-copy,
.sec-head,
.step,
.rules,
.sample-col,
#footer .wrap {
  border-style: solid;
  border-color: transparent;
  border-width: calc(500px * var(--fk) * var(--fks)) calc(720px * var(--fk) * var(--fks));
  border-image: var(--frame-plate) 110 158 110 158 round;
}

/* ========== 顶栏 ========== */
#topbar {
  position: relative;
  z-index: 5;
  padding-top: 16px;
}
#topbar .wrap {
  --fk: 0.046;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--topbar-h);
  padding: 0 8px;
  background-color: var(--surface);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  font-family: "PD-Brand", Georgia, "Times New Roman", serif;
  font-size: 21px;
  letter-spacing: 0.01em;
}
.brand-sub {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-weak);
  letter-spacing: 0.08em;
}
#topbar nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
#topbar nav a {
  font-size: 14px;
  color: var(--text-weak);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 140ms linear, border-color 140ms linear;
}
#topbar nav a:hover { color: var(--text); border-bottom-color: var(--divider); }

/* ========== Hero ========== */
.hero {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 48px;
  align-items: center;
  padding: 40px 0 72px;
}
.hero-copy {
  --fk: 0.066;
  background-color: var(--surface);
  padding: 12px 14px 8px;
}
/* eyebrow 与 code 太小，套不下一圈角花（角花最小需要约 20px，套上去内容区就没地方了），
   所以它们是**去掉了默认边框、也不加雕花框**的两个例外：都住在底板内部，
   不需要自己再有一圈边界。eyebrow 已于 2026-10-02 随 hero 的三条卖点一起删掉，
   这条注释保留来说明「为什么可以有例外」这条判据本身还在。 */
.hero h1 {
  margin: 0 0 20px;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.01em;
}
.hero h1 em {
  font-style: normal;
  color: var(--art);          /* 红桃色：与牌面色一致，不用主色——主色留给可点的东西 */
}
.lede {
  margin: 0 0 28px;
  max-width: 34em;
  font-size: 16px;
  color: var(--text-weak);
}
.cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.link-arrow {
  font-size: 15px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--divider);
  padding-bottom: 3px;
  transition: border-color 140ms linear;
}
.link-arrow:hover { border-bottom-color: var(--text); }
.link-arrow::after { content: " ↓"; color: var(--text-weak); }
.link-arrow.up::after { content: " →"; }

/* 牌盒主视觉：介绍页的主视觉**就是应用首页那张牌盒**，不加任何道具。 */
.hero-art {
  display: flex;
  justify-content: center;
}
.deck-art {
  width: 320px;
  max-width: 100%;
  aspect-ratio: 720 / 1080;
  background-image: url("./assets/cards/box-cut-light.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .28));
  animation: deck-float 7s ease-in-out infinite;
}
/* 牌盒素材按主题分两份，且必须写**三段式**（与 --bg-image / 按钮图同套）：
   漏掉中间那段，就会在「系统亮色 + 用户从没手动切过」时贴出暗版盒面
   —— data-theme 属性只在用户手动切过之后才存在，裸的 html:not([data-theme="light"])
   在那一态也成立。这是事故台账 #25 那个坑，介绍页第一版就踩了一次：
   当时亮段与暗段都取到 box-cut-light，是 qa/verify-intro.mjs 的 theme matrix 抓出来的。 */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .deck-art { background-image: url("./assets/cards/box-cut-dark.webp"); }
}
html[data-theme="dark"] .deck-art { background-image: url("./assets/cards/box-cut-dark.webp"); }
@keyframes deck-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ========== 节 ========== */
.sec { padding: 56px 0; }
/* 节头也落在一块底板上：kicker（13px、字距大）与 sec-sub（15px、--text-weak）
   都是「压在花纹上就读不动」的那一类。 */
.sec-head {
  --fk: 0.072;
  background-color: var(--surface);
  padding: 6px 10px 8px;
  margin-bottom: 28px;
}
.sec-kicker {
  margin: 0 0 8px;
  font-family: "PD-Brand", Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--text-weak);
  text-transform: uppercase;
}
.sec h2 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.35;
}
.sec-sub {
  margin: 0;
  max-width: 44em;
  color: var(--text-weak);
}
.sec-head h2:last-child, .sec-head .sec-sub:last-child { margin-bottom: 0; }

/* 流程 */
.flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  --fk: 0.058;
  position: relative;
  background-color: var(--surface);
  padding: 8px 10px 6px;
}
.step-no {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: "PD-Brand", Georgia, serif;
  font-size: 30px;
  line-height: 1;
  color: var(--divider);
}
.step h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  padding-right: 44px;
}
.step p { margin: 0 0 14px; font-size: 14px; color: var(--text-weak); }
.step p:last-child { margin-bottom: 0; }
.step .ui-btn + .ui-btn { margin-left: 10px; }
code {
  font-family: var(--font);
  font-size: 13px;
  background-color: var(--bg);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.step-kbd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ========== 牌桌规则（#how 四步之后的补充说明） ==========
   用户 2026-10-02 要求补上「花色区别 / 手牌上限 / 重选」这类细节。
   它住在 #how 里、不新开节：带 id 的 section 被 verify-intro.mjs 冻结成 #how / #sample 两个
   （SECTIONS 常量），新开一节会直接报红。框盒子因此从 6 个变 7 个，FRAMED 清单已显式同步。
   花色小字用 --art/--tech/--content/--tone，与 app.js 的 SUIT 映射同源；
   这四个 token 之前只有 --art 在用，这里正好补齐。 */
.rules {
  --fk: 0.058;
  margin-top: 16px;
  background-color: var(--surface);
  padding: 14px 16px 12px;
}
.rules-h {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}
.suit-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.suit-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  color: var(--text-weak);
}
.suit-item b { font-weight: 600; color: var(--text); white-space: nowrap; }
.suit-mark { font-size: 15px; line-height: 1; }
.suit-art   .suit-mark { color: var(--art); }
.suit-tech  .suit-mark { color: var(--tech); }
.suit-content .suit-mark { color: var(--content); }
.suit-tone  .suit-mark { color: var(--tone); }
.rules-note {
  margin: 10px 0 14px;
  font-size: 13px;
  color: var(--text-weak);
}
.rule-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rule-list li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  color: var(--text-weak);
}
/* 项目里所有 1px 平边框都被冻结成 EXPECTED_FLAT 清单，多一条就报红，
   所以列表圆点用背景色画、不写 border。 */
.rule-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--divider);
}
.rule-list b { font-weight: 600; color: var(--text); }

/* ========== 成品示例（大牌框，§8.5） ==========
   padding 的坑与主站 #manual-card 同：CSS 百分比 padding 参照**父容器**宽度，
   不是牌自身宽度，所以先把宽度存进 --bw，padding 用 calc(var(--bw) * 系数) 表达。
   系数 = 素材内框（上 365 / 下 366 / 左 378 / 右 374 画布 px）÷ 1852。
   牌自带圆角与透明角，**不能有 box-shadow**（矩形阴影会从圆角外露出）——用滤波版
   drop-shadow 跟随 alpha 轮廓。 */
/* 效果展示：三栏横排 —— 填入信息 / 输出提示词 / 成品网页。
   三栏等宽、等高，每栏内部独立滚动；整个区域占约 62vh，不撑长页面。 */
/* 实例标签：区分同一需求下的两份提示词（精简版 / 完整版）。纯文字小标，
   不是框盒子（不进 FRAMED 清单，也不加平边框）。 */
.sample-case {
  margin: 28px 0 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
}
.sample-3col + .sample-case { margin-top: 36px; }
.sample-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.sample-col {
  --fk: 0.05;
  background-color: var(--surface);
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sample-col h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}
.sample-col h3 .sample-open {
  font-size: 12px;
  font-weight: 400;
  vertical-align: baseline;
}
.sample-scroll {
  flex: 1;
  min-height: 0;
  max-height: 62vh;
  overflow: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-weak);
}
/* 滚动条随主题走：默认交给 color-scheme 决定 UA 自绘件的明暗；但 WebKit/Blink 的
   overlay 滚动条不跟 color-scheme，深色模式下仍是白条，必须显式按 token 上色。
   三段式写法与整页一致（默认亮在根、系统暗用 media、手动 data-theme 用属性选择器），
   别写成只有 data-theme 才生效——data-theme 只在手动切过之后才存在（事故台账 #25）。 */
.sample-scroll { color-scheme: light; scrollbar-color: #C7C7CE #ECECEF; }
.sample-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.sample-scroll::-webkit-scrollbar-track { background: #ECECEF; }
.sample-scroll::-webkit-scrollbar-thumb {
  background: #C7C7CE;
  border-radius: 5px;
  border: 2px solid #ECECEF;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .sample-scroll {
    color-scheme: dark; scrollbar-color: #4A4A52 #1F1F22;
  }
  html:not([data-theme="light"]) .sample-scroll::-webkit-scrollbar-track { background: #1F1F22; }
  html:not([data-theme="light"]) .sample-scroll::-webkit-scrollbar-thumb {
    background: #4A4A52;
    border-color: #1F1F22;
  }
}
html[data-theme="dark"] .sample-scroll {
  color-scheme: dark; scrollbar-color: #4A4A52 #1F1F22;
}
html[data-theme="dark"] .sample-scroll::-webkit-scrollbar-track { background: #1F1F22; }
html[data-theme="dark"] .sample-scroll::-webkit-scrollbar-thumb {
  background: #4A4A52;
  border-color: #1F1F22;
}
/* 第一栏：填入信息 */
.field-label {
  margin: 12px 0 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-weak);
}
.field-label:first-child { margin-top: 0; }
.field-val {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}
.field-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.field-list li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-weak);
}
.field-list li strong { color: var(--text); font-weight: 600; }
/* 中间栏：提示词全文 */
.sample-scroll pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font);
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--text);
}
.sample-scroll pre .h { color: var(--art); font-weight: 600; }
/* 第三栏：成品网页 iframe */
.sample-stage {
  padding: 2px;
  background: #f4ead6;
}
.sample-stage iframe {
  width: 100%;
  height: 100%;
  min-height: 58vh;
  border: none;
  border-radius: 4px;
  display: block;
}

/* ========== 页脚 ========== */
#footer {
  padding: 16px 0 40px;
  font-size: 13px;
  color: var(--text-weak);
}
#footer .wrap {
  --fk: 0.044;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  padding: 0 8px;
  background-color: var(--surface);
}
#footer a { text-decoration: none; border-bottom: 1px solid var(--divider); }
#footer a:hover { border-bottom-color: var(--text-weak); }
#footer .spacer { margin-left: auto; }
/* 署名行：纯文本、居中、灰色小字，落在雕花框盒子之外（footer 内、.wrap 之下）。
   不进 FRAMED 清单——它是页脚版权性质的署名，不是正文段落（事故 #39 针对的是正文）。 */
#footer .credit {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-weak);
  opacity: 0.75;
  letter-spacing: 0.04em;
}

/* ========== §8.6 响应式 ========== */
/* 1024–1279 这一段是英雄区最挤的地方：还是两栏，但文案栏只剩约 520px，雕花框又要切掉
   约 86px —— 44px 的 h1 第二行（10 个字 = 444px）在这里放不下，会甩出一个「楚」字孤儿。
   所以这一段单独把 h1 降到 38px、雕花收一档。qa/verify-intro.mjs 在 5 档视口上逐个断言折行数。 */
@media (max-width: 1279px) {
  :root { --fks: 0.90; }
  .hero h1 { font-size: 38px; }
}
@media (max-width: 1023px) {
  :root { --fks: 0.86; }            /* 框变窄，雕花随之收一档（比例仍由 --fk 锁死） */
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 24px 0 56px;
  }
  .hero h1 { font-size: 36px; }
  .hero-art { order: -1; }          /* 窄屏先给主视觉，再给文案 */
  .deck-art { width: 240px; }
  .flow { grid-template-columns: 1fr; }
  .suit-list { grid-template-columns: 1fr; }   /* 花色每栏是一句判据，窄屏两栏会挤成折行 */
  .sample-3col { grid-template-columns: 1fr; gap: 16px; }
  .sample-scroll { max-height: 50vh; }
  .sample-stage iframe { min-height: 48vh; }
  #topbar nav a { display: none; }   /* 窄屏收起锚点导航，只留主题按钮 */
}

@media (max-width: 639px) {
  :root { --fks: 0.76; }            /* 不能再小：#footer .wrap 的 --fk 0.044 × 0.76 = 0.033，已贴规线断裂阈值 0.03 */
  body { font-size: 14px; }
  .wrap { padding: 0 18px; }
  #topbar { padding-top: 12px; }
  .hero-copy { padding: 8px 6px 4px; }
  /* h1 的第二行「把说不清的需求问清楚」是 10 个字。加了雕花框之后内容宽从 302px
     掉到约 262px（390 − 2×18 − 2×边框 − 2×padding），27px 的 270px 就会甩出一个
     「楚」字孤儿。缩到 26px（260px）才留得住，320px 宽的机型才会再折一次。
     这条不是估算：qa/verify-intro.mjs 在 5 档视口上都断言 h1 恰好占 2 行。 */
  .hero h1 { font-size: 26px; }
  .deck-art { width: 210px; }
  .lede { font-size: 15px; }
  .sec { padding: 44px 0; }
  .sec-head { padding: 4px 8px 6px; margin-bottom: 20px; }
  .sec h2 { font-size: 23px; }
  .sample-3col { grid-template-columns: 1fr; gap: 14px; }
  .sample-scroll { max-height: 44vh; }
  .sample-stage iframe { min-height: 42vh; }
}

@media (prefers-reduced-motion: reduce) {
  /* C8：减弱动效下取消浮动与全部过渡 */
  .deck-art { animation: none; }
  #btn-start, .link-arrow, #topbar nav a { transition: none; }
  #btn-start:hover { transform: none; }
}