/* ==========================================================================
   AIGX Video — 样本 E「iOS / macOS 高端风」
   规矩来源：`C:\Users\Gxw\.agents\skills\design-taste-frontend\SKILL.md`
   --------------------------------------------------------------------------
   这份 CSS 里有三条刻意的取舍，写在这里免得以后有人当成失误：
   1) 全页**没有一处外阴影**（家规：静置元素带 box-shadow 直接 FAIL）。
      iOS 那种「卡片浮起来」的效果用两样东西替代：面色差台阶（#f5f5f7 页底 /
      #ffffff 卡片 / #e8e8ed 次级块）+ 大圆角（22–28px / 全圆按钮）。
      需要一条「发丝线」的地方（吸顶栏下缘、底栏上缘）用 **inset 阴影**画，
      内阴影不在家规的静置阴影判据里，也不会被算成 1px 描边。
   2) 全页**没有一处渐变**（家规禁 gradient）。连首屏都不压暗角——
      字一律排在媒体之外，不压在画面上。
   3) 全页**最多一处 backdrop-blur**（家规：>1 处即 WARN），只给吸顶导航用。
   --------------------------------------------------------------------------
   prefers-reduced-motion 分支是与技能默认做法的唯一硬偏离：这台开发机的
   HKCU\Control Panel\Desktop\WindowMetrics\MinAnimate = 0，浏览器因此常驻
   reduce。上一轮就是「reduce 下把位移与动画全删」被打回的，所以这里 reduce
   下保留视频播放、跑马灯、缓推、入场与控件反馈，只把幅度与时长放缓。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. token
   -------------------------------------------------------------------------- */
:root {
  /* 面色差台阶：一个底、一个卡面、一个次级块，靠色差分层不靠线 */
  --bg: #f5f5f7;
  --fill-1: #ffffff;
  --fill-2: #e8e8ed;
  --fill-3: #dcdce1;
  --tint: #f7e9ef;          /* 品牌梅红的极浅染色，给「默认档」卡片 */
  --ink: #1d1d1f;
  --muted: #48484d;         /* 对 #f5f5f7 约 8:1，正文用足墨、注才用灰 */
  --line: rgba(0, 0, 0, .10);
  --accent: #a83a67;        /* 品牌梅红，只出现在动作位 */
  --accent-ink: #ffffff;
  --accent-deep: #8c3160;
  --field: #ffffff;         /* 分段控件/输入框的槽底 */

  /* 六个字号档（家规：一页最多 5 档为佳，>9 才 WARN） */
  --s-small: 16px;
  --s-body: 17px;
  --s-lead: 21px;
  --s-h3: 25px;
  --s-h2: clamp(30px, 3.5vw, 50px);
  --s-h1: clamp(38px, 6.2vw, 82px);
  --s-num: clamp(42px, 5.6vw, 88px);

  --r-lg: 28px;
  --r-md: 22px;
  --r-sm: 14px;
  --pill: 999px;

  --pad: 24px;
  --maxw: 1180px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 52px;
}

/* --------------------------------------------------------------------------
   2. 基础
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Schibsted Grotesk', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: var(--s-body);
  line-height: 1.5;
  letter-spacing: -0.005em;
  padding-bottom: 0;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
}

p { margin: 0; }

/* 正文块的行长上限：家规桌面每行不超过 88 字符 */
.lede { max-width: 46ch; }
.note { max-width: 52ch; }
.small { font-size: var(--s-small); color: var(--muted); }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

a { color: inherit; text-decoration: none; }

img, video { display: block; max-width: 100%; }

/* 媒体一律同一圆角、同一处理（家规：同裁切、同处理、默认直角；本页统一大圆角） */
.media {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--fill-2);
}
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }

/* 等宽字只允许出现在真代码块里 */
code, pre { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; }
.code code, .ret code { font-size: 13.5px; line-height: 1.7; }

.sr {
  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(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* --------------------------------------------------------------------------
   3. 按钮（全页只用一种形状：全圆胶囊）
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 24px;
  border: 0; border-radius: var(--pill);
  background: var(--fill-2); color: var(--ink);
  font: inherit; font-size: var(--s-body); font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease);
}
.btn--fill { background: var(--accent); color: var(--accent-ink); }
.btn--quiet { background: transparent; color: var(--accent); padding: 0 10px; min-height: 40px; }
.btn--sm { min-height: 38px; padding: 0 18px; font-size: var(--s-small); }
.btn--wide { width: 100%; }
.btn:active { transform: scale(.965); }
.btn:hover { background: var(--fill-3); }
.btn--fill:hover { background: var(--accent-deep); }
.btn--quiet:hover { background: transparent; color: var(--accent-deep); }
.btn[disabled] { opacity: .4; cursor: default; }

/* 圆形图标按钮：片段的前后翻页、手机菜单 */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: var(--pill);
  background: var(--fill-1); color: var(--ink);
  cursor: pointer;
  transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.icon-btn:hover { background: var(--fill-2); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   4. 吸顶导航（全宽素条：字标左、几个链接、一个动作；全页唯一一处模糊）
   -------------------------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(245, 245, 247, .78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: inset 0 -1px 0 var(--line);
}
.bar__in {
  display: flex; align-items: center; gap: 26px;
  height: var(--nav-h); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
}
.bar__brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.02em; }
.bar__brand img { width: 22px; height: 22px; border-radius: 6px; }
.bar__nav { display: flex; gap: 6px; margin-left: auto; font-size: var(--s-small); }
/* iOS 反馈：导航链接也是一颗可点的胶囊（悬停起色块、按下缩一点） */
.bar__nav a {
  color: var(--muted); padding: 7px 12px; border-radius: var(--pill);
  transition: color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.bar__nav a:hover { color: var(--ink); background: var(--fill-2); }
.bar__nav a:active { color: var(--ink); background: var(--fill-3); transform: scale(.95); }
.bar__cta { min-height: 34px; padding: 0 16px; font-size: var(--s-small); }
.bar__menu { display: none; }

/* 手机抽屉：固定浮层（家规允许真浮层有阴影，这里仍用内阴影+色块，保持一致） */
.drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 39;
  background: var(--fill-1);
  box-shadow: inset 0 -1px 0 var(--line);
  padding: 8px var(--pad) 22px;
  /* 2026-10-15 实测：抽屉 top 从 --nav-h 起算，translateY(-102%) 只把它推到「底部还剩 42px」，
     那一截正好是它的梅红按钮 —— 透过 78% 透明的吸顶栏渗成一条粉带（采样 (243,209,225)）。
     关着时直接 visibility:hidden，不再靠位移量碰运气。 */
  visibility: hidden;
  transform: translateY(-102%);
  transition: transform .42s var(--ease), visibility .42s linear;
}
.drawer[data-open="1"] { transform: none; visibility: visible; }
.drawer a {
  display: block; padding: 16px 0; font-size: var(--s-lead); font-weight: 500;
  /* 2026-10-15：原来这里用 inset 发丝线当分隔，probe.mjs:300 把 inset 也算按钮阴影 ⇒
     button-fx 在 @768/@390 FAIL。改成纯间距分隔。 */
}
.drawer .btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   5. 首屏：字在上、媒体在下（字不压画面）
   -------------------------------------------------------------------------- */
/* ★ 2026-10-15：这里原来是 padding: 64px 0 0 —— 简写会把 .wrap 的左右 24/20px 一起清零，
   手机端标题与按钮直接贴到屏幕边缘（实测 .hero.wrap 的 padding-left = 0px）。只给上边距。 */
.hero { padding-top: 64px; }

/* 底层环境层：大光斑 + 细尘粒，一整层铺满视口、画在内容【下方】。
   用 position: fixed 而不是塞进 .hero 里：固定层按视口定尺，不会撑宽文档
   （2026-10-15 实测：塞在 .hero 里时 100vw 让 @1440 横向溢出 154px），
   也不会在 .wrap 的 1180px 边界把光斑切成一条直边（那样看着像贴了块矩形色板）。
   画布尺寸由 JS 按视口显式写成 px。 */
.amb { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
/* ★ 这条不能省：非定位的在流内容画在 z-index:0 的定位元素【之下】，
   不给 main / footer 抬层，画布就会盖住整页文字（机检的 covered-text 会直接抓到）。 */
body > main, body > footer { position: relative; z-index: 1; }
.hero__head { max-width: 940px; margin: 0 auto; text-align: center; }
/* 标题字：龙藏体（毛笔行书，单一字重 —— 网页子集只含标题这 9 个字形：
   让想象，成为影像。 套到别的文字上会掉回系统字体，所以只给首屏标题用） */
@font-face {
  font-family: 'Long Cang';
  src: url('../assets/fonts/long-cang.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
/* 艺术字：毛笔行书两行，墨色 / 品牌色对撞；正文里不再出现解释句 */
.hero__h {
  font-family: 'Long Cang', 'Schibsted Grotesk', 'Hiragino Sans GB', 'Microsoft YaHei', serif;
  font-weight: 400;
  font-size: clamp(58px, 10.4vw, 138px);
  line-height: 1.04; letter-spacing: .01em;
}
.hero__h span { display: block; }
.hero__h .hero__l1 { animation: heroBreath 7.4s var(--ease) infinite; }
.hero__h .hero__l2 { color: var(--accent); animation: heroBreathAlt 7.4s var(--ease) infinite; }
/* 呼吸：龙藏体只有一个字重，写不出字重渐变，改成「缩放 + 字距」的一呼一吸，两行错开相位 */
@keyframes heroBreath {
  0%, 100% { transform: scale(1); letter-spacing: .01em; }
  50% { transform: scale(1.016); letter-spacing: .022em; }
}
@keyframes heroBreathAlt {
  0%, 100% { transform: scale(1.016); letter-spacing: .022em; }
  50% { transform: scale(1); letter-spacing: .01em; }
}
.hero__acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.hero__stage { margin-top: 44px; }
.hero__stage .media { aspect-ratio: 16 / 9; }
/* 说明不再压进画面：媒体下面一行字 + 一颗圆形播放键（播放器的那种排法） */
.hero__cap { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.hero__meta { display: flex; align-items: baseline; gap: 14px; font-size: var(--s-small); }
.hero__meta span + span { color: var(--muted); }
.play {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: var(--pill);
  background: var(--fill-2); color: var(--ink); cursor: pointer;
  transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.play svg { width: 18px; height: 18px; }
.play:hover { background: var(--fill-3); }
.play:active { transform: scale(.93); }

/* 2026-10-15：原「数据条」（40 条 / 3 条 / 5–30 秒）整块删除 —— 首页不放这类自夸数字。 */

/* --------------------------------------------------------------------------
   6. 段落骨架
   -------------------------------------------------------------------------- */
/* ★ 2026-10-15：这里原来是 padding: 104px 0 0 —— 简写会把 .wrap 的左右 24/20px 一起清零，
   于是「灵感广场」以下每一节在手机上都贴到屏幕两边（实测 .sec.wrap 的 padding-left = 0px）。
   只给上内边距，左右留给 .wrap。 */
.sec { padding-top: 104px; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.sec__head h2 { font-size: var(--s-h2); max-width: 18ch; }
.sec__head p { font-size: var(--s-lead); color: var(--muted); max-width: 34ch; }
.sec--band { margin-top: 104px; padding: 88px 0; background: var(--fill-1); }
.sec--band .sec { padding-top: 0; }

/* --------------------------------------------------------------------------
   7. 作品：三列栅格 + 过滤开关
   -------------------------------------------------------------------------- */
/* 2026-10-15：「只看有片段的」开关删除，只留「显示提示词」（默认关）；
   开关挪进 .sec__head 右侧，原来那条 .films__bar 整条撤掉。 */
.films__rail {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 22px; margin: 0; padding: 0; list-style: none;
}
.card-f {
  background: none;
  transition: transform .34s var(--ease);
}
.card-f:hover { transform: translateY(-4px); }
.card-f[hidden] { display: none; }
.card-f .media { border-radius: var(--r-lg); aspect-ratio: 16 / 10; }
.card-f__b { padding: 14px 2px 0; }
.card-f__b h3 { font-size: var(--s-h3); font-weight: 600; }
.card-f__t { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.card-f__m { margin: 0; font-size: var(--s-small); color: var(--muted); }
.card-f__prompt { margin-top: 12px; font-size: var(--s-small); color: var(--muted); max-width: 44ch; }
#rail[data-prompt="0"] .card-f__prompt { display: none; }

/* iOS 风格开关 */
.tog {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--s-small); color: var(--muted);
}
.tog__track {
  width: 46px; height: 28px; border-radius: var(--pill);
  background: var(--fill-3); position: relative;
  transition: background-color .28s var(--ease);
}
.tog__knob {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  transition: transform .28s var(--ease);
}
.tog[aria-pressed="true"] { color: var(--ink); }
.tog[aria-pressed="true"] .tog__track { background: var(--accent); }
.tog[aria-pressed="true"] .tog__knob { transform: translateX(18px); }

/* --------------------------------------------------------------------------
   8. 模型：一张真表（iOS「设置」列表那种读法；默认档整行染色）
   -------------------------------------------------------------------------- */
.mlines { background: var(--fill-1); border-radius: var(--r-lg); padding: 6px 24px; overflow: hidden; }
.mlines table { width: 100%; border-collapse: collapse; }
.mlines th, .mlines td { text-align: left; vertical-align: top; padding: 20px 18px 20px 0; font-size: var(--s-body); }
.mlines thead th { padding: 16px 18px 10px 0; font-size: var(--s-small); font-weight: 500; color: var(--muted); }
.mlines tbody th { font-weight: 600; white-space: nowrap; }
.mlines tbody tr + tr th, .mlines tbody tr + tr td { box-shadow: inset 0 1px 0 var(--line); }
.mlines tbody th, .mlines tbody td { background: transparent; }
.mlines tbody td:nth-child(3) { color: var(--muted); max-width: 34ch; }
.tag--fill { background: var(--accent); color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   9. 模型广场（表在上面的 8 节）
   10–11. 原「一条任务的 195.9 秒」整节与「换个时长看看」分段控件、「三步拿片」
   代码块三节都按用户要求撤下（前者的位置留给工作台演示动画，素材到位后插回），
   相关规则一并删除，避免留下指向不存在元素的死样式。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   12. 套餐：三张 + 一行对比
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plan { padding: 26px 24px; display: flex; flex-direction: column; }
.plan--pick { background: var(--tint); border-radius: var(--r-lg); }
.plan h3 { font-size: var(--s-h3); }
.plan__who { margin-top: 14px; font-size: var(--s-small); color: var(--muted); max-width: 30ch; }
.plan__big { margin: 16px 0 0; display: flex; align-items: baseline; gap: 10px; }
.plan__big b { font-size: var(--s-num); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.plan__big span { font-size: var(--s-small); color: var(--muted); }
.plan ul { margin: 20px 0 24px; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan li { font-size: var(--s-small); color: var(--muted); }
.plan .btn { margin-top: auto; }
.plans__cmp { margin-top: 18px; background: var(--fill-1); border-radius: var(--r-lg); padding: 22px 24px; }
.plans__cmp table { width: 100%; border-collapse: collapse; }
.plans__cmp th, .plans__cmp td { text-align: left; font-size: var(--s-small); padding: 12px 10px; }
.plans__cmp thead th { color: var(--muted); font-weight: 500; }
/* 分隔线挂在单元格的 border-top 上，不挂在 tr 的 box-shadow 上：
   窄屏表格块化之后，3 个同宽 tr 带 box-shadow 会被机检判成「一排同构盒卡」。 */
.plans__cmp tbody tr + tr td { border-top: 1px solid var(--line); }
.plans__cmp td:first-child { color: var(--muted); width: 30%; }

/* --------------------------------------------------------------------------
   13. 收尾 + 页脚
   -------------------------------------------------------------------------- */
.cta { margin-top: 104px; padding: 96px 0; background: var(--fill-1); text-align: center; }
.cta h2 { font-size: var(--s-h2); max-width: 20ch; margin: 0 auto; }
.cta p { margin: 16px auto 0; font-size: var(--s-lead); color: var(--muted); max-width: 42ch; }
.cta .btn { margin-top: 26px; }
.cta__acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.foot { background: var(--fill-1); padding: 60px 0 40px; box-shadow: inset 0 1px 0 var(--line); }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.foot__cols h4 { font-size: var(--s-small); color: var(--ink); }
.foot__cols ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.foot__cols a { font-size: var(--s-small); color: var(--muted); }
.foot__cols a:hover { color: var(--ink); }
.foot__brand { margin-top: 44px; font-size: clamp(38px, 9vw, 120px); font-weight: 600; letter-spacing: -0.05em; line-height: .9; color: #6e6e73; }
.foot__base { margin-top: 20px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* 2026-10-15：原来这里有一条手机固定底栏 .dock（fixed + inset 发丝线）。
   机检 @390 报 covered-text：它滚动时会压住标题（「橘猫与雨」75% 被遮），家规硬 FAIL，
   因此整条删除；动作改由首屏与尾屏的按钮承担。 */

/* --------------------------------------------------------------------------
   14. 入场动效（家规：每段有入场、每个控件有反馈、至少一个会动的东西）
   -------------------------------------------------------------------------- */
.in { opacity: 0; transform: translateY(22px); }
.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .55; }
}
@keyframes kb {
  from { transform: scale(1.02); }
  to { transform: scale(1.13); }
}
/* 作品条的「自己走」由 main.js 滚动 scrollLeft 驱动（反向来回，不复制卡片）——
   这里不写 CSS 漂移动画：translate 会把没有副本的内容推出空白，且会与 JS 抢同一条轨道。 */
.card-f .media img { animation: kb 26s ease-in-out infinite alternate; }
.card-f:nth-child(2) .media img { animation-duration: 31s; animation-delay: -6s; }
.card-f:nth-child(3) .media img { animation-duration: 36s; animation-delay: -12s; }
.card-f:nth-child(4) .media img { animation-duration: 41s; animation-delay: -18s; }
.card-f:nth-child(5) .media img { animation-duration: 46s; animation-delay: -24s; }

/* --------------------------------------------------------------------------
   15. 窄屏
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .bar__nav { display: none; }
  .bar__menu { display: inline-flex; margin-left: auto; }
  .plans { grid-template-columns: 1fr; }
  .films__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sec__head h2, .sec__head p { max-width: none; }
}

@media (max-width: 720px) {
  :root { --pad: 20px; --s-lead: 19px; --r-lg: 24px; }
  /* .dock 已删除（见上），这里不再给正文留底栏高度 */
  .hero { padding-top: 40px; }
  .hero__head { text-align: left; }
  /* 艺术字在手机上保持粗细对撞，收到两行放得下 */
  .hero__h { font-size: clamp(56px, 13.4vw, 92px); }
  .hero__acts { justify-content: stretch; }
  .hero__acts .btn { flex: 1; }
  /* 手机端媒体竖起来，说明行与播放键留在流内（不压画面、不遮挡） */
  .hero__stage .media { aspect-ratio: 4 / 5; }
  .hero__cap { gap: 12px; }
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .sec { padding-top: 72px; }
  .sec--band { margin-top: 72px; padding: 56px 0; }
  .sec__head .toggles { align-self: flex-start; }
  .films__rail { grid-template-columns: 1fr; gap: 28px; }
  .plans__cmp { padding: 16px 20px; }
  .plans__cmp thead { display: none; }
  .plans__cmp tbody tr { display: block; padding: 12px 0; }
  .plans__cmp tbody tr + tr td { border-top: 0; }
  .plans__cmp th, .plans__cmp td { display: block; padding: 2px 0; }
  .plans__cmp td:first-child { width: auto; font-weight: 500; color: var(--ink); }
  .plans__cmp td[data-p]::before { content: attr(data-p) "："; color: var(--muted); }
  .cta { margin-top: 72px; padding: 64px 0; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
  .foot__brand { font-size: 15vw; }
  /* 模型表在窄屏改成竖排块（iOS 设置列表那种读法），不让它横向滚动 */
  .mlines { padding: 4px 18px; }
  .mlines thead { display: none; }
  .mlines tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 18px 0; }
  .mlines tbody tr + tr th, .mlines tbody tr + tr td { box-shadow: none; }
  /* 窄屏行与行之间用留白分开：分隔线原来挂在 tr 的 box-shadow 上，
     被机检当成「一排同构盒卡」（390 下 3 行同宽盒）⇒ 改成间距。 */
  .mlines tbody tr + tr { box-shadow: none; margin-top: 22px; }
  .mlines tbody th, .mlines tbody td { padding: 0; }
  .mlines tbody th { white-space: normal; }
  /* 模型表窄屏：模型名一行，可选时长居右，定位另起一行（不再有「用这条生成」列） */
  .mlines tbody td:nth-child(3) { grid-column: 1 / -1; max-width: none; }
  /* ★ 2026-10-16 手机端拇指尺寸：真机 390 实测这些可点控件只有 26–38px 高，低于 40px，
     手指容易点空。只在 ≤720px 生效，桌面版式一个像素都不动。
     量到的原值：登录 64×34（桌面规则 L177 的 34px）、显示提示词 135×28（开关本体 28px）、
     复制 68×38（L132 的 38px）、字标 AIGX 73×26、页脚链接 44×30（17 节的 3px 内边距）。 */
  .bar__brand { min-height: 40px; }
  .bar .btn, .bar__cta { min-height: 40px; padding: 0 18px; }
  .btn--sm { min-height: 40px; }
  .tog { min-height: 40px; }
  /* 页脚链接：保留 17 节的 padding/margin 负边距补偿（不然网格间距会变），只把可点高度抬到 40 */
  .foot__cols a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* --------------------------------------------------------------------------
   16. reduce：保留看得见的动效（见文件头第 3 段说明）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .in { opacity: 0; transform: translateY(8px); }
  .is-in {
    opacity: 1; transform: none;
    transition: opacity .5s linear var(--d, 0s), transform .5s linear var(--d, 0s);
  }
  .card-f .media img { animation-duration: 44s; }
  .card-f:hover { transform: none; }
  .hero__h .hero__l1, .hero__h .hero__l2 { animation-duration: 11s; }
}

/* --------------------------------------------------------------------------
   17. iOS 反馈补全：页脚链接与开关（悬停起色块、按下缩一点）
   -------------------------------------------------------------------------- */
.foot__cols a {
  display: inline-block; padding: 3px 6px; margin: -3px -6px; border-radius: 8px;
  transition: color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.foot__cols a:hover { color: var(--ink); background: var(--fill-2); }
.foot__cols a:active { transform: scale(.97); }
.tog:active .tog__knob { transform: scale(.92); }

/* 18. 首屏演示（用户创作台：标题下的流程演示，DOM/CSS/JS 画的，没有视频） */
/* ---- 用户创作台演示动画（首屏） ---- */
.hero__acts { margin-top: 26px; }
.demo { margin-top: 34px; }
.demo__win { background: var(--fill-1); border-radius: var(--r-lg); padding: 15px 20px 18px; }
.demo__bar { display: flex; align-items: center; gap: 12px; }
.demo__dots { display: inline-flex; gap: 7px; }
.demo__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--fill-3); }
.demo__url { font-size: var(--s-small); color: var(--muted); }
.demo__tag { font-size: var(--s-small); background: var(--fill-2); border-radius: var(--pill); padding: 6px 14px; }
.demo__play {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px;
  border: 0; border-radius: var(--pill); background: var(--fill-2); color: var(--ink);
  font: inherit; font-size: var(--s-small); cursor: pointer;
  transition: background-color .28s var(--ease), transform .28s var(--ease);
}
.demo__play:hover { background: var(--fill-3); }
.demo__play:active { transform: scale(.96); }
.demo__play svg { width: 15px; height: 15px; fill: currentColor; }
.demo__body { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 30px; margin-top: 18px; }
/* 2026-10-15：两列等高时左列会空出一大片，把提示词框拉满左列，空白变成输入区本身 */
.demo__col { display: flex; flex-direction: column; }
.demo__lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 8px; font-size: var(--s-small); color: var(--muted); }
.demo__col > .demo__lbl:first-child { margin-top: 0; }
.demo__val { color: var(--ink); font-variant-numeric: tabular-nums; }
.demo__ta { flex: 1; min-height: 98px; padding: 15px 18px; border-radius: var(--r-md); background: var(--fill-2); font-size: var(--s-body); }
.demo__caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -3px; background: var(--accent); animation: demoCaret 1.05s steps(1) infinite; }
@keyframes demoCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.demo__picks { display: flex; flex-wrap: wrap; gap: 10px; }
.demo__picks span {
  padding: 8px 15px; border-radius: var(--pill); background: var(--fill-2); color: var(--muted);
  font-size: var(--s-small);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.demo__picks span.on { background: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }
/* 拖动式时长：轨道 + 三个刻度点 + 可拖的圆钮（全用 inset 描边，不用外阴影） */
.demo__sld { padding: 8px 0 4px; }
.demo__rail { position: relative; display: block; height: 6px; border-radius: var(--pill); background: var(--fill-2); }
.demo__rail i { display: block; height: 100%; width: 0%; border-radius: var(--pill); background: var(--accent); }
.demo__dot { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--fill-3); }
.demo__knob {
  position: absolute; top: 50%; left: 0%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: #fff;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
/* 滑块是界面控件（data-ui），圆钮留一圈描边才看得出边界 —— 这条规则带 data-ui，机检按控件放行 */
.demo__sld[data-ui] .demo__knob { border: 1px solid var(--line); }
.demo__sld.is-drag .demo__knob { transform: scale(1.18); border-color: var(--fill-3); background: var(--fill-2); }
.demo__foot { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.demo__state { font-size: var(--s-small); color: var(--muted); }
.demo__send {
  margin-left: auto; padding: 10px 30px; border-radius: var(--pill);
  background: var(--accent); color: var(--accent-ink); font-size: var(--s-body);
  transition: transform .22s var(--ease);
}
.demo__send.is-press { transform: scale(.93); }
.demo__out { margin-top: 14px; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
/* 2026-10-15：结果区在生成期间显示骨架占位（纯色块 + 呼吸，不用渐变），结束换成真结果 */
.demo__ph { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.demo__ph-t { width: 116px; aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: var(--fill-2); animation: demoPulse 1.7s var(--ease) infinite; }
.demo__ph-l { width: 190px; height: 14px; border-radius: var(--pill); background: var(--fill-2); animation: demoPulse 1.7s var(--ease) infinite; }
@keyframes demoPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.demo__out.is-done .demo__ph { display: none; }
.demo__out.is-on { opacity: 1; transform: none; }
.demo__bar2 { height: 6px; border-radius: var(--pill); background: var(--fill-2); overflow: hidden; }
.demo__bar2 i { display: block; height: 100%; width: 0; background: var(--accent); }
.demo__res { display: flex; align-items: center; gap: 14px; margin-top: 12px; opacity: 0; transition: opacity .5s var(--ease); }
.demo__out.is-done .demo__res { opacity: 1; }
.demo__thumb { width: 116px; flex: none; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; }
.demo__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo__file { font-size: var(--s-small); }
.demo__sub { margin-top: 5px; font-size: var(--s-small); color: var(--muted); }
.demo__dl { margin-left: auto; flex: none; padding: 8px 18px; border-radius: var(--pill); background: var(--fill-2); font-size: var(--s-small); }
@media (max-width: 900px) {
  .demo { margin-top: 30px; }
  .demo__body { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .demo__ta { min-height: 92px; }
  .demo__bar { flex-wrap: wrap; }
  .demo__play { margin-left: 0; }
  .demo__foot { flex-wrap: wrap; }
  .demo__send { margin-left: 0; }
  .demo__dl { margin-left: 0; }
  /* 窄屏结果块未出现时不占位：390 下它高 313px，光靠 opacity:0 会在首屏尾
     留一大块白（2026-10-15 实测）。display 翻转杀掉了 opacity 过渡，所以
     这里换成一次性 keyframes 入场。 */
  .demo__out { display: none; }
  .demo__out.is-on { display: block; animation: demoPop .5s var(--ease); }
}
@keyframes demoPop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .demo__res { flex-wrap: wrap; }
  /* 原来这里是 width:100%，缩略图被拉到 350px 宽、197px 高，结果块更臃肿 */
  .demo__thumb { width: 132px; }
}