@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-italic.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-tight.woff2) format("woff2")}

/* 儿童画动 v1 设计 token（视觉方向 A 纪念册，2026-11-10 定）
   v1 只做浅色，不做深色模式。字体自托管 woff2（两款都是 OFL 开源）。
   v3（2026-11-11）：加平板 / 桌面变量（断点 768 / 1200，见交付说明第 6 节）、--color-control、--text-lead。 */
:root {
  color-scheme: light;

  /* 颜色 */
  --color-bg:          #F7F4EE; /* 页面底色（暖白） */
  --color-surface:     #FFFFFF; /* 弹层、卡片 */
  --color-art-paper:   #EEE4D3; /* 作品纸色，图片加载前的占位底色 */
  --color-ink:         #1F1D1A; /* 正文、主按钮底色 */
  --color-ink-soft:    #6E675D; /* 次要文字（在 bg 上对比度约 5.3:1） */
  --color-on-ink:      #F7F4EE; /* 主按钮文字 */
  --color-line:        #D8D1C4; /* 只用于分隔线等装饰（对比度不够当控件边框） */
  --color-control:     #948A7A; /* 控件边框：次按钮、输入框、套餐、进度圆点、示例圆点；白底 3.40:1，bg 3.10:1 */
  --color-ink-hover:   #3A3631; /* 主按钮鼠标悬停 */
  --color-chip:        #ECE6DA; /* 次数胶囊底色 */
  --color-accent:      #2F4A3A; /* 链接、标题强调词、焦点环 */
  --color-ring:        #E3DDD0; /* 选中套餐的外圈 */
  --color-error:       #A33A2B; /* 表单错误文字 */
  --color-scrim:       rgba(20, 18, 15, .38); /* 弹层后面的遮罩 */
  --color-fullscreen:  #000000; /* 全屏看 GIF 的背景 */

  /* 字体 */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body:    "Inter Tight", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* 字号（字号/行高/字重） */
  --text-hero:     400 31px/1.08 var(--font-display); /* 首页标题 */
  --text-title:    400 26px/1.12 var(--font-display); /* 各页标题 */
  --text-sheet:    400 21px/1.2  var(--font-display); /* 弹层标题 */
  --text-body:     400 15px/1.5  var(--font-body);
  --text-sub:      400 14px/1.45 var(--font-body);  /* 副标题、链接（不小于 14） */
  --text-lead:     400 14px/1.45 var(--font-body);  /* 首页副标题；手机上等于 sub，宽屏放大 */
  --text-small:    400 12.5px/1.5 var(--font-body); /* 提示小字、图片说明 */
  --text-button:   600 16px/1.2  var(--font-body);
  --text-button-2: 500 15px/1.2  var(--font-body);
  --text-pill:     600 12px/1    var(--font-body);
  --tracking-display: -0.01em;

  /* 间距（4 的倍数） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --gutter:  18px;   /* 页面左右边距：手机 18 / 平板 32 / 桌面 40 */
  --page-max:    560px; /* 页面内容最大宽：手机 560 / 平板 640 / 桌面 1120 */
  --content-max: 560px; /* 居中单栏页（生成中、失败）的宽度 */
  --narrow-max:  440px; /* 恢复页 */
  --reading-max: 680px; /* 隐私 / 条款 */
  --grid-gap:    32px;  /* 桌面 12 栏栏间距 */
  --recent-cols: 3;     /* 最近作品列数：3 / 4 / 6 */
  --recent-gap:  8px;   /* 最近作品间距：8 / 12 / 16 */

  /* 尺寸 */
  --button-h:   52px; /* 主按钮 */
  --button-h-2: 46px; /* 次按钮 */
  --tap-min:    44px; /* 所有可点元素的最小点击区域 */
  --topbar-h:   56px; /* 顶栏高：56 / 64 / 72 */
  --brand-size: 21px; /* 顶栏产品名字号：21 / 23 / 26 */
  --button-max: 400px; /* 平板和桌面上按钮最大宽 */
  --dialog-w:   480px; /* 平板和桌面上 BottomSheet 改成的居中对话框宽 */

  /* 圆角 */
  --radius-pill:  999px; /* 按钮、套餐选项、次数胶囊 */
  --radius-art:   4px;   /* GIF、原画 */
  --radius-sheet: 22px;  /* 底部弹层上沿 */
  --radius-input: 12px;

  /* 阴影 */
  --shadow-polaroid: 0 2px 8px rgba(30, 25, 15, .22); /* 首页示例里斜放的原画 */

  /* 动效 */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 150ms;
  --dur-sheet: 250ms;
}

/* 平板 768～1199（CSS 变量不能用在媒体查询里，断点写死在这里） */
@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --page-max: 640px;
    --recent-cols: 4;
    --recent-gap: 12px;
    --topbar-h: 64px;
    --brand-size: 23px;
    --text-hero:  400 42px/1.05 var(--font-display);
    --text-title: 400 32px/1.1  var(--font-display);
    --text-sheet: 400 23px/1.2  var(--font-display);
    --text-lead:  400 17px/1.5  var(--font-body);
    --text-body:  400 16px/1.5  var(--font-body);
    --text-sub:   400 15px/1.45 var(--font-body);
    --text-small: 400 13px/1.5  var(--font-body);
  }
}

/* 桌面 ≥ 1200：12 栏 */
@media (min-width: 1200px) {
  :root {
    --gutter: 40px;
    --page-max: 1120px;
    --recent-cols: 6;
    --recent-gap: 16px;
    --topbar-h: 72px;
    --brand-size: 26px;
    --text-hero:  400 56px/1.04 var(--font-display); /* P1 有作品时用 48px */
    --text-title: 400 40px/1.1  var(--font-display);
    --text-sheet: 400 24px/1.2  var(--font-display);
    --text-lead:  400 18px/1.5  var(--font-body);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-sheet: 0ms; }
}

/* Living Doodles 页面样式。颜色、字号、间距全部用 06_tokens.css 的变量；方向用逻辑属性（方案 9）。
   三档（交付 6.1）：手机 < 768、平板 768～1199、桌面 ≥ 1200。token 在 06_tokens.css 里按档覆盖，这里只写版式。 */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-ink);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-inline-size: 100%; }
button, input { font: inherit; color: inherit; }
a { color: var(--color-accent); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 布局：顶栏 / 内容 / 底栏（和内容同宽 --page-max） ---------- */
.topbar { padding-inline: var(--gutter); padding-block-start: env(safe-area-inset-top, 0px); }
.topbar-in {
  block-size: var(--topbar-h); display: flex; align-items: center; justify-content: space-between;
  max-inline-size: var(--page-max); margin-inline: auto;
}
.brand {
  font: 400 var(--brand-size)/1 var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--color-ink); text-decoration: none;
  min-block-size: var(--tap-min); display: inline-flex; align-items: center;
}
.pill {
  font: var(--text-pill); background: var(--color-chip); color: var(--color-ink);
  border-radius: var(--radius-pill); padding: 3px 10px; line-height: 18px;
}
.main {
  flex: 1; inline-size: 100%; max-inline-size: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto; padding-inline: var(--gutter); padding-block-end: var(--space-6);
}
.footer {
  text-align: center; font: var(--text-small); color: var(--color-ink-soft);
  padding-block: var(--space-2) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
.footer a {
  color: var(--color-ink-soft); text-decoration: none;
  display: inline-flex; align-items: center; min-block-size: var(--tap-min); padding-inline: var(--space-1);
}
/* 居中单栏页：生成中 / 失败 560、恢复 440、隐私条款 680（交付 6.1） */
.col { max-inline-size: var(--content-max); margin-inline: auto; }
.col-narrow { max-inline-size: var(--narrow-max); margin-inline: auto; }
.col-reading { max-inline-size: var(--reading-max); margin-inline: auto; }

/* ---------- 文字 ---------- */
.hero-title { font: var(--text-hero); letter-spacing: var(--tracking-display); margin: var(--space-3) 0 var(--space-2); text-wrap: balance; }
.hero-title em { font-style: italic; color: var(--color-accent); }
.title { font: var(--text-title); letter-spacing: var(--tracking-display); margin: var(--space-3) 0 var(--space-3); text-wrap: balance; }
.lead { font: var(--text-lead); margin: 0 0 var(--space-2); }
.sub { font: var(--text-sub); margin: 0 0 var(--space-2); }
.body { font: var(--text-body); margin: 0 0 var(--space-3); }
.small { font: var(--text-small); color: var(--color-ink-soft); margin: 0; }
.center { text-align: center; }
.soft { color: var(--color-ink-soft); }
.lead-gap { margin-block-start: var(--space-6); }
.err { font: var(--text-small); color: var(--color-error); margin: var(--space-2) 0 0; text-align: center; }
.err:empty { display: none; }

/* ---------- 按钮和链接 ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  inline-size: 100%; min-block-size: var(--button-h); padding: 10px var(--space-5);
  border: 0; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none; text-align: center;
  font: var(--text-button); background: var(--color-ink); color: var(--color-on-ink);
  -webkit-tap-highlight-color: transparent; transition: opacity var(--dur-fast), background-color var(--dur-fast);
}
.btn:active { opacity: .85; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.btn[aria-busy="true"] { opacity: .85; cursor: progress; }
/* 次按钮：描边用 --color-control（B8，对比度 ≥ 3:1） */
.btn-2 {
  min-block-size: var(--button-h-2); background: transparent; color: var(--color-ink);
  border: 1.5px solid var(--color-control); font: var(--text-button-2);
}
.btn-2 .btn-note { font: var(--text-small); color: var(--color-ink-soft); }
.link {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--tap-min);
  font: var(--text-sub); color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; padding: 0 var(--space-1); cursor: pointer;
}
.link-soft { color: var(--color-ink-soft); }
.link-row { display: flex; justify-content: center; }

/* ---------- 图片 ---------- */
.art {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-art); background: var(--color-art-paper);
}

/* HeroExample：GIF 满宽（左右各 -4px 出血），原画像照片压在左上角 */
.hero { margin-block: var(--space-4) var(--space-4); }
.hero-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  /* 左右各 -10：GIF 出血 4px + 给斜放的原画留 6px，不被滚动容器裁掉 */
  margin-inline: -10px; padding: 14px 6px 0; scroll-padding-inline: 6px;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-item { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.polaroid {
  position: absolute; inset-block-start: -12px; inset-inline-start: -6px; inline-size: 34%;
  background: #fff; padding: 5px; transform: rotate(-3deg); box-shadow: var(--shadow-polaroid);
}
.polaroid img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-art-paper); }
/* 切换圆点：按钮，点击区 24×24（交付 6.3） */
.dots { display: flex; justify-content: center; margin-block-start: var(--space-1); }
.hero-dot {
  inline-size: 24px; block-size: 24px; display: grid; place-items: center;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.hero-dot::after { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--color-control); }
.hero-dot[aria-current="true"]::after { background: var(--color-ink); }
.hero.is-compact { margin-block-start: var(--space-6); inline-size: 78%; margin-inline: auto; }

/* 首页 */
.home-new .hero-title { margin-block-start: var(--space-2); }
.home-cta { margin-block-start: var(--space-4); }
.home-cta .small { text-align: center; margin-block-start: var(--space-2); }
.price-note { font: var(--text-small); color: var(--color-ink-soft); margin: 0; }

/* RecentGrid：3 / 4 / 6 列 */
.recent { margin-block-start: var(--space-6); }
.recent h2 { font: var(--text-sheet); margin: 0 0 2px; }
.grid {
  display: grid; grid-template-columns: repeat(var(--recent-cols), 1fr); gap: var(--recent-gap);
  margin-block-start: var(--space-3); list-style: none; padding: 0;
}
.grid a { position: relative; display: block; border-radius: var(--radius-art); overflow: hidden; }
.grid img, .grid .ph { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--color-art-paper); }
.grid .making {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: var(--text-pill); color: var(--color-ink); background: rgba(247, 244, 238, .72);
}

/* P2 生成中 */
.gen-original { inline-size: 55%; margin: var(--space-4) auto var(--space-2); border-radius: var(--radius-art); background: var(--color-art-paper); }
.steps { list-style: none; padding: 0; margin: var(--space-4) 0; }
.steps li { display: flex; align-items: center; gap: var(--space-3); min-block-size: 36px; font: var(--text-body); color: var(--color-ink-soft); }
.steps .dot { flex: 0 0 20px; block-size: 20px; border-radius: 50%; border: 1.5px solid var(--color-control); display: grid; place-items: center; }
.steps .done { color: var(--color-ink); }
.steps .done .dot { background: var(--color-ink); border-color: var(--color-ink); }
.steps .done .dot::after { content: ""; inline-size: 9px; block-size: 5px; border-inline-start: 2px solid var(--color-on-ink); border-block-end: 2px solid var(--color-on-ink); transform: translateY(-1px) rotate(-45deg); }
.steps .now { color: var(--color-ink); font-weight: 600; }
.steps .now .dot { border: 2px dashed var(--color-ink); animation: breathe 1.2s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .4; } to { opacity: 1; } }

.banner {
  background: var(--color-chip); border-radius: var(--radius-input); padding: var(--space-3) var(--space-4);
  margin-block-start: var(--space-3); font: var(--text-sub);
}
.banner p { margin: 0; }
.banner .link { padding: 0; }

/* P3 结果：手机单栏，GIF 贴屏幕两边 */
.gif-btn { display: block; inline-size: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.r-art .gif-btn { margin-inline: calc(-1 * var(--gutter)); inline-size: calc(100% + 2 * var(--gutter)); }
.r-art .art { border-radius: 0; }
.r-art .hint { text-align: center; margin-block: var(--space-2) var(--space-4); }
.r-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.r-actions .r-download { order: 0; }
.r-actions .r-tip { order: 1; margin-block-start: calc(-1 * var(--space-1)); }
.r-actions .r-regen { order: 2; }
.r-actions .err { order: 3; margin: 0; }
.original-label { font: var(--text-small); color: var(--color-ink-soft); margin: var(--space-6) 0 var(--space-2); }
.original-img { inline-size: 100%; max-block-size: 360px; object-fit: contain; background: var(--color-chip); border-radius: var(--radius-art); }
.r-more { display: flex; flex-direction: column; gap: var(--space-2); margin-block-start: var(--space-3); }

/* P4 失败 */
.fail-original { inline-size: 45%; margin: var(--space-4) auto 0; border-radius: var(--radius-art); background: var(--color-art-paper); }
.tips { margin: 0 0 var(--space-3); padding-inline-start: var(--space-5); }
.tips li { margin-block: var(--space-1); }
.fail .btn-2 { margin-block-start: var(--space-3); }

/* P6 恢复：输入框描边用 --color-control（B8） */
.field { display: block; margin-block: var(--space-4) var(--space-3); }
.field label { display: block; font: var(--text-small); color: var(--color-ink-soft); margin-block-end: var(--space-1); }
.input {
  inline-size: 100%; block-size: 48px; padding-inline: var(--space-4);
  border: 1.5px solid var(--color-control); border-radius: var(--radius-input); background: var(--color-surface);
  font: var(--text-body); font-size: 16px; outline: none;
}
.input:focus { border: 2px solid var(--color-accent); padding-inline: calc(var(--space-4) - .5px); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.field .err { text-align: start; }
.code { block-size: 52px; text-align: center; font: 600 22px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em; }

/* P7 */
.legal ul { padding-inline-start: var(--space-5); }
.legal li { margin-block: var(--space-2); }
.legal h2 { font: var(--text-sheet); margin: var(--space-6) 0 var(--space-2); }
.legal h3 { font: 600 var(--text-body); margin: var(--space-4) 0 var(--space-2); }
.legal-body p, .legal-body li { font: var(--text-body); }
.legal .legal-note {
  font: var(--text-sub); font-weight: 600; background: var(--color-chip); border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4); margin-block: var(--space-4);
}
.legal-body code { font-size: .9em; }
.table-wrap { overflow-x: auto; margin-block: var(--space-3); }
.legal-body table { border-collapse: collapse; inline-size: 100%; font: var(--text-sub); }
.legal-body th, .legal-body td { text-align: start; vertical-align: top; padding: var(--space-2); border-block-end: 1px solid var(--color-line); }

/* ---------- BottomSheet / 对话框 ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 20; background: var(--color-scrim);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity var(--dur-sheet) var(--ease-out);
}
.scrim.open { opacity: 1; }
.sheet {
  inline-size: 100%; max-block-size: 92dvh; overflow-y: auto; background: var(--color-surface);
  border-start-start-radius: var(--radius-sheet); border-start-end-radius: var(--radius-sheet);
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform var(--dur-sheet) var(--ease-out);
}
.scrim.open .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-2); }
.sheet-head img { inline-size: 48px; block-size: 48px; object-fit: cover; border-radius: var(--radius-art); background: var(--color-art-paper); flex: none; }
.sheet h2 { font: var(--text-sheet); margin: 0; outline: none; text-wrap: balance; }
.sheet .sub { color: var(--color-ink-soft); }
.sheet .del-body { margin-block-start: var(--space-2); }
.sheet .small { margin-block: var(--space-3) 0; }
.sheet .btn { margin-block-start: var(--space-4); }

/* PlanOption：描边用 --color-control（B8） */
.plans { border: 0; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 10px; }
.plan {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-block-size: 60px; padding: 8px 20px; border: 1.5px solid var(--color-control); border-radius: var(--radius-pill); cursor: pointer;
}
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan:has(input:checked) { border: 2px solid var(--color-ink); box-shadow: 0 0 0 3px var(--color-ring); padding-inline: 19.5px; }
.plan:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.plan-name { font: 500 15px/1.3 var(--font-body); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.plan-per { display: block; font: var(--text-small); color: var(--color-ink-soft); }
.plan-total { font: 600 16px/1 var(--font-body); }
.badge { font: var(--text-pill); background: var(--color-ink); color: var(--color-on-ink); border-radius: var(--radius-pill); padding: 3px 7px; font-size: 10.5px; }

/* FullscreenViewer */
.viewer {
  position: fixed; inset: 0; z-index: 30; background: var(--color-fullscreen);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
  opacity: 0; transition: opacity var(--dur-fast); cursor: zoom-out; border: 0; padding: 0; inline-size: 100%;
}
.viewer.open { opacity: 1; }
.viewer img { max-inline-size: 100vw; max-block-size: calc(100dvh - 64px); object-fit: contain; }
.viewer span { font: var(--text-small); color: #CFC8BC; }

/* Toast */
.toast {
  position: fixed; z-index: 40; inset-block-start: calc(12px + env(safe-area-inset-top, 0px)); inset-inline: 0;
  margin-inline: auto; inline-size: max-content; max-inline-size: calc(100vw - 2 * var(--gutter));
  background: var(--color-ink); color: var(--color-on-ink); font: var(--text-sub); text-align: center;
  border-radius: var(--radius-pill); padding: 10px 18px;
  opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.toast.show { opacity: 1; transform: none; }

/* 触屏 / 鼠标两版提示文字（交付 6.3）：默认触屏版 */
.for-pointer { display: none; }
@media (hover: hover) and (pointer: fine) {
  .for-touch { display: none; }
  .for-pointer { display: inline; }
}

/* ---------- 鼠标悬停（只在能悬停的设备，交付 6.5） ---------- */
@media (hover: hover) {
  .btn:not(.btn-2):not(:disabled):hover { background: var(--color-ink-hover); }
  .btn-2:not(:disabled):hover { background: var(--color-chip); }
  .plan:not(:has(input:checked)):hover { border-color: var(--color-ink-soft); }
  .grid a:hover { outline: 2px solid var(--color-ink-soft); outline-offset: 2px; }
  .link:hover, .footer a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
}

/* ---------- 平板 768～1199：单栏 640，按钮最宽 400 靠左，弹层改居中对话框（交付 6.2、6.3） ---------- */
@media (min-width: 768px) {
  .btn { inline-size: 100%; max-inline-size: var(--button-max); }
  /* 这些地方按钮占满栏宽：生成中 / 失败 / 恢复的单栏、对话框 */
  .col .btn, .col-narrow .btn, .sheet .btn { max-inline-size: none; }
  .home-cta .small { text-align: start; }
  .home-new .h-act .link-row { justify-content: flex-start; }
  .hero-dot::after { inline-size: 8px; block-size: 8px; }
  .hero.is-compact { inline-size: 75%; }

  .gen-original { inline-size: 320px; }

  /* 结果页：GIF 满栏宽不贴边；下载和重新生成并排各占一半 */
  .r-art .gif-btn { margin-inline: 0; inline-size: 100%; }
  .r-art .art { border-radius: var(--radius-art); }
  .r-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; }
  .r-actions .btn { max-inline-size: none; }
  .r-actions .r-download { grid-column: 1; grid-row: 1; }
  .r-actions .r-regen { grid-column: 2; grid-row: 1; }
  .r-actions .r-tip, .r-actions .err { grid-column: 1 / -1; margin: 0; }
  .original-img { max-block-size: 420px; }
  .r-more { align-items: flex-start; }
  .r-more .link-row, .r-more .small { align-self: stretch; }

  .scrim { align-items: center; padding: var(--gutter); }
  .sheet {
    inline-size: var(--dialog-w); max-inline-size: 100%; border-radius: var(--radius-sheet);
    padding: 28px 28px 20px; transform: translateY(16px);
  }
  /* GIF 只有 512 宽：放大到 90vw × 90vh 以内，按 3:2 原比例 */
  .viewer img { inline-size: min(90vw, calc(90vh * 3 / 2)); block-size: auto; max-block-size: 90vh; }
}

/* ---------- 桌面 ≥ 1200：12 栏（交付 6.2） ---------- */
@media (min-width: 1200px) {
  /* P1 第一次来：左 5 栏文字和上传，右 7 栏示例，两栏垂直居中，1280×800 一屏放下 */
  .home-new {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap);
    grid-template-rows: auto auto; align-content: center;
    min-block-size: calc(100dvh - var(--topbar-h) - 120px);
  }
  .home-new .h-intro { grid-column: 1 / span 5; grid-row: 1; align-self: end; display: flex; flex-direction: column; gap: var(--space-4); }
  .home-new .h-intro > * { margin: 0; }
  .home-new .h-act { grid-column: 1 / span 5; grid-row: 2; align-self: start; margin-block-start: var(--space-3); }
  .home-new .hero { grid-column: 6 / span 7; grid-row: 1 / span 2; align-self: center; margin: 0; }

  /* P1 有作品：左 7 栏标题（48px），右 4 栏上传，底对齐 */
  .home-returning .r-head {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap);
    align-items: end; padding-block-start: var(--space-6);
  }
  .home-returning .hero-title { grid-column: 1 / span 7; font-size: 48px; margin: 0; }
  .home-returning .home-cta { grid-column: 9 / span 4; margin: 0; }
  .home-returning .home-cta .btn { max-inline-size: none; }
  .recent { margin-block-start: var(--space-6); }
  .hero.is-compact { inline-size: 560px; max-inline-size: 100%; margin-block-start: 56px; }

  /* P3：左 8 栏 GIF，右 4 栏标题、按钮、原画（右栏不吸顶） */
  .result {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap);
    grid-template-rows: auto auto auto 1fr; align-items: start; padding-block-start: var(--space-6);
  }
  .result .r-art { grid-column: 1 / span 8; grid-row: 1 / span 4; }
  .result .r-title { grid-column: 9 / span 4; grid-row: 1; margin-block: 0 var(--space-4); }
  .result .r-actions { grid-column: 9 / span 4; grid-row: 2; display: flex; flex-direction: column; }
  .result .r-more { grid-column: 9 / span 4; grid-row: 3; align-items: stretch; }
  .result .r-orig { grid-column: 9 / span 4; grid-row: 4; }
  .result .r-orig .original-label { margin-block-start: var(--space-4); }
  .result .btn { max-inline-size: none; }
  .original-img { max-block-size: 300px; }
}

/* 减少动态效果：全部关掉，呼吸改静态 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 预发布页（A23） ---------- */
.prelaunch { margin-block: var(--space-6); }
.prelaunch h2 { font: var(--text-sheet); margin-block-end: var(--space-2); }
.prelaunch ol, .prelaunch ul { padding-inline-start: var(--space-5); font: var(--text-body); }
.prelaunch li { margin-block: var(--space-2); }