/* Talk to Me Doja：以真人影像为主体的漫画分镜视觉。 */
@font-face{font-family:DojaDisplay;src:url('/fonts/bangers-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:DojaCondensed;src:url('/fonts/barlow-condensed-700-latin.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --font-display-family:DojaDisplay,Impact,sans-serif;
  --bg:#f9f2e8;--bg-soft:#e6eef1;--card:#fffaf2;--fg:#101c32;--muted:#455263;
  --line:#a8afb0;--ink:#101c32;--ink-fg:#fffaf2;--accent:#df4023;--accent-text:#b32c19;
  --accent-2:#75a0bb;--accent-fg:#fff;--glow:rgba(223,64,35,.12);
  --btn-primary-bg:#d93c21;--btn-primary-fg:#fff;--logo-bg:linear-gradient(#101c32,#101c32);
  --footer-bg:#101c32;--footer-fg:#fffaf2;--btn-radius:.15rem;--card-radius:.25rem;--field-radius:.25rem;
}
body{background:var(--bg);color:var(--fg)}
.font-display{font-weight:400;letter-spacing:.012em}
.brand-name{font-family:DojaDisplay,Impact,sans-serif;font-size:1.55rem;line-height:.9;letter-spacing:.015em}
.eyebrow{font-family:DojaCondensed,sans-serif;font-weight:700;letter-spacing:.12em}
.btn-primary{border:2px solid #101c32;border-radius:.15rem;box-shadow:3px 3px 0 #101c32;font-family:DojaCondensed,sans-serif;font-size:1.05rem;font-weight:700}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:3px 5px 0 #101c32}
.btn-primary:disabled{box-shadow:none}
:focus-visible{outline:3px solid #2875ae;outline-offset:3px}
body>header{background:#fbf5ec;border-bottom:2px solid #101c32}
body>header nav .eyebrow{font-family:DojaCondensed,sans-serif;letter-spacing:.08em}
.card{border-color:#a3a8a8;box-shadow:none}
footer p.font-display,.prose-article p,.prose-article li{font-family:var(--font-sans);font-style:normal;font-weight:400;letter-spacing:normal}

/* 公开页面标题统一使用站点字体，正文继续使用易读的系统字体。 */
main h1:not(.sr-only), main h2:not(.sr-only) { font-family: DojaDisplay, Impact, sans-serif; font-weight: 400; letter-spacing: .012em; }
main h3:not(.sr-only) { font-family: DojaHand, sans-serif; font-weight: 700; line-height: 1.2; }

/* 首屏：标题、表单、案例组成一个分镜，而不是三个独立卡片。 */
main>section:first-child:has(#create){overflow:hidden;background:#f9f2e8 url('/visuals/comic-paper.jpg') center/cover no-repeat;border-bottom:3px solid #101c32}
#create{position:relative;padding-top:2.2rem;padding-bottom:3rem}
#create>header{position:relative;z-index:1;max-width:none}
#create>header h1{font-size:clamp(3rem,5.8vw,5.5rem);line-height:.9;letter-spacing:.005em;text-transform:uppercase;text-wrap:balance;color:#cb321c}
#create>header h1::first-line{color:#101c32}
#create>header h1::after{content:'';display:block;width:32%;height:.4rem;margin:.6rem 0 .2rem;background:#101c32;transform:skew(-28deg) rotate(-2deg);box-shadow:2.4rem .28rem 0 -.13rem #d93c21}
#create>header p{max-width:100%;padding:.9rem 1.5rem;background:url('/visuals/blue-brush.webp') center/100% 100% no-repeat;color:#101c32;font-family:DojaCondensed,sans-serif;font-style:italic;font-size:clamp(1.1rem,1.4vw,1.35rem);font-weight:700;line-height:1.25;text-align:center}
[data-testid='generator']{position:relative;border:0;background:transparent;box-shadow:none}
[data-testid='generator'] h3{font-weight:800;color:#101c32}
[data-testid='generator'] section:first-of-type>button{min-height:9.1rem;border:2px dashed #101c32;border-radius:.35rem;background:rgba(255,252,247,.74)}
[data-testid='generator'] section:first-of-type>button:hover{background:#fff;border-color:#d93c21}
[data-testid='generator'] section:first-of-type>button>span>span:nth-child(2){font-size:1rem}
[data-testid='generator'] section:first-of-type>button>span>span:first-child{background:transparent;color:#101c32}
[data-testid='generator'] button[role='radio']{border:2px solid #101c32;border-radius:.2rem;min-height:3.5rem}
[data-testid='generator'] button[role='radio'][aria-checked='true']{background:#d93c21;color:#fff}
[data-testid='generator'] button[role='radio'][aria-checked='true'] span{color:#fff}
[data-testid='generator'] .btn-primary{position:relative;min-height:3.7rem;border:0;border-radius:0;background:#d93c21;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);box-shadow:none;font-family:DojaDisplay,Impact,sans-serif;font-size:clamp(1.35rem,2vw,1.8rem);font-weight:400;letter-spacing:.03em}
[data-testid='generator'] .btn-primary:hover{box-shadow:none}
[data-testid='generator'] .btn-primary:disabled{opacity:.64}
[data-testid='generator-canvas']{border:4px solid #101c32;border-radius:0;background:#101c32;box-shadow:6px 6px 0 #101c32;overflow:hidden}
[data-testid='generator-canvas'] [data-testid='studio-examples'] figure>div{border-radius:0;box-shadow:none}
[data-testid='generator-canvas'] figure>div>span{border:2px solid #101c32;border-radius:0;background:#fff8eb;color:#101c32;font-family:DojaCondensed,sans-serif;font-size:.8rem;text-transform:uppercase;transform:rotate(-2deg)}

/* 上传预览、任务状态和弹窗延续案例画布的视觉，并保留真实状态。 */
[data-testid='generator-canvas'][data-state='photo'] { background: #e3edf0; }
[data-testid='generator-canvas'][data-state='photo'] > figure { min-height: 24rem; align-items: center; background: #e3edf0; }
[data-testid='generator-photo-preview'] { width: 100%; height: 100%; max-height: 34rem; border-radius: 0; object-fit: contain; }
[data-testid='generator-examples'], [data-testid='generator-back-to-photo'], [data-testid='generator-back-to-task'] { border: 2px solid #101c32; border-radius: 50%; background: #fffaf2; color: #101c32; }
[data-testid='generator-canvas']:has([data-testid='generation-status']) { display: flex; min-height: 28rem; flex-direction: column; background: #e3edf0; }
[data-testid='generator-canvas']:has([data-testid='generation-status']) > div:first-child:not([data-testid='generation-status']) { padding: 1rem 1rem 0; }
[data-testid='generation-status'] { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; gap: 1.1rem; margin: 0; border-radius: 0; background: #e3edf0; text-align: center; }
[data-testid='generation-status'] > p:first-child { order: 2; max-width: 100%; margin-top: .5rem; color: #455263; }
[data-testid='generation-status'] > p:first-child:empty { display: none; }
#create:has([data-testid='generation-status'][data-status='queued'], [data-testid='generation-status'][data-status='processing'], [data-testid='generation-status'][data-status='submitting'], [data-testid='generation-status'][data-status='recovery']) [data-testid='generator-balance'] { display: none; }
[data-testid='generation-status'] > p:nth-child(2) { max-width: 26rem; align-items: center; font-size: 1.05rem; font-weight: 700; line-height: 1.55; }
[data-testid='generation-status'] > p:nth-child(2) svg { width: 1.4rem; height: 1.4rem; color: #d93c21; }
[data-testid='generation-status'][data-status='succeeded'] { justify-content: flex-start; }
[data-testid='generation-status'][data-status='succeeded'] > p:first-child { order: 0; }

/* 成片与首页案例同宽，操作放在视频下方，画布按内容自然增高。 */
#create > div > [data-testid='generator-canvas']:has([data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video'])) {
  min-height: 0;
  align-self: start;
}
[data-testid='generator-canvas']:has([data-testid='generation-status'][data-status='succeeded'] [data-testid='generation-video']) > div:first-child:not([data-testid='generation-status']) {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: .75rem;
}
[data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video']) {
  display: flex;
  min-height: 0;
  flex: none;
  align-items: stretch;
  gap: .8rem;
  padding: 0 0 1rem;
  background: #e3edf0 url('/visuals/comic-blue.webp') center / cover no-repeat;
  text-align: left;
}
[data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video']) > * { margin: 0; }
[data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video']) > div:has([data-testid='generation-video']) { order: -1; width: 100%; }
[data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video']) [data-testid='generation-video'] {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}
[data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video']) > p:first-child { order: 2; overflow-wrap: anywhere; margin: 0 1rem; }
[data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video']) > p:nth-child(2) {
  align-items: center;
  max-width: none;
  margin: .15rem 1rem 0;
  color: #101c32;
  font-family: DojaDisplay, Impact, sans-serif;
  font-size: clamp(1.45rem, 2.7vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
}
[data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video']) > p:nth-child(2) svg { flex: none; color: #1a7652; }
[data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video']) > [data-testid='ai-notice'] { order: 1; margin: 0 1rem; line-height: 1.45; }
[data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video']) > div:last-child { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 1rem; }
[data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video']) > div:last-child > * { flex: 1 1 9rem; justify-content: center; padding: .6rem .75rem; text-align: center; }
[data-testid='generation-status'][data-status='succeeded'] [data-testid='ai-badge'] { border: 2px solid #101c32; border-radius: 0; background: #fff8eb; color: #101c32; font-family: DojaCondensed, sans-serif; text-transform: uppercase; }
@media (max-width: 767px) {
  [data-testid='generation-status'][data-status='succeeded']:has([data-testid='generation-video']) > div:has([data-testid='generation-video']) { max-width: 248px; align-self: center; }
}

/* 生成过程沿用首页的漫画字体与配色；状态文字仍由实际任务状态提供。 */
[data-testid='generation-status']:is([data-status='queued'], [data-status='processing'], [data-status='submitting'], [data-status='recovery']) {
  gap: 1rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: #e3edf0 url('/visuals/comic-blue.webp') center / cover no-repeat;
  color: #101c32;
}
[data-testid='generation-status']:is([data-status='submitting'], [data-status='recovery']) h3 {
  order: -1;
  max-width: 12ch;
  color: #101c32;
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 400;
  line-height: .98;
  text-wrap: balance;
}
[data-testid='generation-status']:is([data-status='submitting'], [data-status='recovery']) > svg { color: #d93c21; }
[data-testid='generation-status']:is([data-status='queued'], [data-status='processing']) > p:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  max-width: 23rem;
  font-family: DojaHand, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
}
[data-testid='generation-status']:is([data-status='queued'], [data-status='processing']) > p:nth-child(2) svg {
  order: -1;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
}
[data-testid='generation-status']:is([data-status='submitting'], [data-status='recovery']) > p {
  max-width: 23rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
[data-testid='generator-auth-dialog'], [data-testid='generator-credit-dialog'] { border: 2px solid #101c32; border-radius: .35rem; background: #fffaf2; box-shadow: 6px 6px 0 #101c32; }
[data-testid='generator-auth-dialog'] h2, [data-testid='generator-credit-dialog'] h2 { color: #101c32; }
[data-testid='generator-credit-dialog'] [data-testid^='generator-pack-'] { min-height: 5rem; border: 2px solid #101c32; border-radius: .2rem; background: #fff; }
[data-testid='generator-credit-dialog'] [data-testid^='generator-pack-']:hover:not(:disabled) { background: #e3edf0; }

/* 内容采用不同尺寸的分镜；不改变模板区块及文案。 */
#problem,#compare,#how-it-works,#examples,#about,#specs,#features,#pricing,#faq{position:relative;padding-block:clamp(2.8rem,5vw,5rem)}
#problem,#how-it-works,#about,#specs,#features,#faq{background:#f9f2e8}
#problem h2,#compare h2,#how-it-works h2,#features h2{max-width:28ch;text-wrap:balance;line-height:1}
#problem .eyebrow,#how-it-works .eyebrow,#features .eyebrow{display:inline-block;padding:.45rem 1rem;color:white;background:url('/visuals/red-brush.webp') center/100% 100% no-repeat}
#problem .container-page>div{gap:1rem;margin-top:2.5rem}
#problem .card{position:relative;display:flex;min-height:13rem;flex-direction:column;justify-content:center;border:3px solid #101c32;border-radius:0;background:#f3e8db;box-shadow:none;padding:1.2rem}
#problem .card h3{position:relative;align-self:flex-start;padding:.4rem .6rem;border:2px solid #101c32;background:#fffaf1;color:#101c32;font-family:DojaCondensed,sans-serif;font-size:1.25rem;font-style:italic;font-weight:700;line-height:1.05;transform:rotate(-2deg)}
#problem .card h3::after{content:'';position:absolute;bottom:-.45rem;left:1rem;width:.65rem;height:.65rem;border-right:2px solid #101c32;border-bottom:2px solid #101c32;background:#fffaf1;transform:rotate(45deg)}
#problem .card p{margin-top:1rem;color:#253346;font-size:.9rem;line-height:1.4}
#compare{background:#e3edf0;border-block:2px solid #101c32}
#compare .container-page{max-width:72rem}
#compare table{border:2px solid #101c32;border-collapse:collapse;border-radius:0;box-shadow:none}
#compare th,#compare td{border:1px solid #101c32}
#compare thead th:first-child{background:#b9cdd5;color:#101c32}
#compare thead th:last-child{background:#d93c21;color:#fff}
#how-it-works ol{gap:1rem;margin-top:2.3rem}
#how-it-works li.card{position:relative;min-height:12rem;padding:1.25rem;border:3px solid #101c32;border-radius:0;background:#fffaf2;box-shadow:none}
#how-it-works li>span{display:inline-block;color:#d93c21;font-size:4.6rem;line-height:.8;transform:rotate(-5deg);text-shadow:2px 2px #fff}
#how-it-works li h3{margin-top:.8rem;font-family:DojaCondensed,sans-serif;font-size:1.4rem;line-height:1.1}
#how-it-works li p{line-height:1.45}
#examples{border-block:2px solid #101c32;background:#e6eff1}
#examples figure img,#examples figure>div{border:3px solid #101c32;border-radius:0}
#examples svg{color:#d93c21}
#about .container-page,#specs .container-page{max-width:72rem}
#about h2,#specs h2{max-width:25ch}
#specs dl{border:2px solid #101c32;background:#fffaf2}
#specs dl>div{padding:.8rem 1rem}
#specs dt{font-family:DojaCondensed,sans-serif;font-size:1.15rem}
#features .container-page>div{margin-top:2.4rem;gap:1rem}
#features .card{display:grid;grid-template-columns:3rem 1fr;align-content:start;column-gap:.8rem;padding:1.2rem;border:2px solid #101c32;border-radius:0;background:#fffaf2}
#features .card:nth-child(2),#features .card:nth-child(5){background:#e8f0f2}
#features .card>span{grid-row:1/span 2;border:1px solid #d93c21;border-radius:50%;background:#fff3e6;color:#d93c21}
#features .card h3{margin:0;font-family:DojaCondensed,sans-serif;font-size:1.3rem;line-height:1.1}
#features .card p{margin-top:.4rem;line-height:1.45}
/* 创意案例保持交替图文，限制图片高度，避免一屏只有一张卡。 */
main>section:has(>div>.eyebrow+h2+div>div>div>img){background:#f1e8da}
main>section:has(>div>.eyebrow+h2+div>div>div>img) img,main>section:has(>div>.eyebrow+h2+div>div>div>img) figure>div{border:3px solid #101c32;border-radius:0}
#pricing{border-block:2px solid #101c32;background:#e3edf0}
[data-testid^='package-'],[data-testid^='plan-']{border:2px solid #101c32;border-radius:0;background:#fffaf2;box-shadow:4px 4px 0 #101c32}
[data-testid='package-party']{background:#f7e4d1}
[data-testid='package-party']>span:first-child{background:#d93c21;color:#fff}
#faq .container-page{border:3px solid #101c32;background:#fffaf2;padding:clamp(1.25rem,3vw,2.5rem)}
#faq summary{font-weight:700}

/* 内页沿用漫画标题与分镜容器，正文、表单和账务信息保持易读。 */
main>.container-page:has(>h1),main>article.container-page{position:relative}
main>.container-page:has(>h1)>h1,main>article.container-page>h1{font-size:clamp(2.7rem,5vw,4.5rem);line-height:1}
main>.container-page:has(>h1)>h1::after,main>article.container-page>h1::after{content:'';display:block;width:7rem;height:.35rem;margin-top:1rem;background:#d93c21;transform:skew(-25deg) rotate(-2deg)}
main>.container-page:has(>h1) .card,main>article.container-page .card{border:2px solid #101c32;border-radius:0;box-shadow:4px 4px 0 #101c32}
main>article.container-page>img{border:3px solid #101c32;border-radius:0}

@media(min-width:768px){
  #create{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(1.8rem,4vw,3.5rem);row-gap:1rem;align-items:start}
  #create>header{grid-column:1;grid-row:1;width:100%;margin:0;text-align:left}
  #create>header p{margin-left:0;margin-right:0}
  #create>div{display:contents}
  #create>div>[data-testid='generator']{grid-column:1;grid-row:2;width:100%;padding:.25rem 0 0}
  #create>div>[data-testid='generator-canvas']{grid-column:2;grid-row:1/3;align-self:stretch;min-height:0;margin:0}
  #problem .card{min-height:15rem;padding:1rem 1rem 1rem 48%;background:linear-gradient(90deg,transparent 0 40%,#f9f2e8 49%),url('/showcase/grandma-photo.jpg') 34% 8%/auto 290% no-repeat}
  #problem .card:nth-child(2){background-image:linear-gradient(90deg,transparent 0 40%,#f9f2e8 49%),url('/showcase/grandma-poster.jpg');background-position:center,38% 8%}
  #problem .card:first-child{transform:rotate(-.6deg)}
  #problem .card:nth-child(2){transform:rotate(.6deg)}
  #problem .card:last-child{transform:rotate(-.4deg)}
}
@media(max-width:767px){
  #create{padding-top:1.75rem;padding-bottom:2.75rem}
  #create>header h1{font-size:clamp(3rem,10vw,4.4rem);text-align:left}
  #create>header h1::after{margin-left:0}
  #create>header p{font-size:1.08rem}
  #create>div{gap:1.5rem}
  [data-testid='generator']{padding:0;border:0;background:transparent}
  [data-testid='generator'] .btn-primary{font-size:clamp(1.2rem,5vw,1.5rem);white-space:nowrap}
  [data-testid='generator-canvas']{width:min(100%,30rem);margin-inline:auto}
  #problem .card{min-height:0}
  #how-it-works li.card{min-height:0}
}
@media(prefers-reduced-motion:reduce){.btn-primary:hover{transform:none}}
/* 用实际示例照片形成流程分镜；文字依然是可选择的 HTML。 */
@media(min-width:768px){
  #how-it-works li.card{display:flex;min-height:21rem;flex-direction:column;justify-content:flex-end;padding:1rem;background:linear-gradient(to bottom,transparent 12%,rgba(249,242,232,.2) 38%,#fffaf2 67%),url('/showcase/grandma-photo.jpg') center 12%/cover no-repeat}
  #how-it-works li.card:nth-child(2){background-image:linear-gradient(to bottom,transparent 12%,rgba(249,242,232,.2) 38%,#fffaf2 67%),url('/showcase/grandma-step-two.jpg')}
  #how-it-works li.card:nth-child(3){background-image:linear-gradient(to bottom,transparent 12%,rgba(249,242,232,.2) 38%,#fffaf2 67%),url('/showcase/grandma-step-three.jpg')}
  #how-it-works li.card:nth-child(2){background-position:center,40% 20%}
  #how-it-works li.card:nth-child(3){background-position:center,60% 20%}
  #how-it-works li>span{position:absolute;top:.6rem;left:.8rem;color:#d93c21;text-shadow:2px 2px #fff,-1px -1px #fff}
}
/* 登录、个人中心和表单沿用分镜语言，正文与状态依然优先可读。 */
main>.container-page .card,main>article.container-page .card{border:2px solid #101c32;border-radius:.15rem;background:#fffaf2;box-shadow:4px 4px 0 #101c32}
main>.container-page>.card{position:relative;border-top:7px solid #d93c21}
main>.container-page input,main>.container-page textarea,main>.container-page select{border-color:#76818b;border-radius:.2rem;background:#fffdf9}
main>.container-page .btn-ghost{border-color:#101c32;border-radius:.15rem}
main>.container-page nav a[aria-current='page']{color:#b32c19}
[data-testid='generator'] .btn-primary:focus-visible{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px #174f87}

/* 内页与首页共用纸张纹理；保持内容区的留白与阅读对比。 */
main:not(:has(#create)) {
  background: #f9f2e8 url('/visuals/comic-interior.webp') center top / max(100%, 70rem) auto repeat-y;
}
#problem, #how-it-works, #about, #specs, #features, #faq {
  background: #f9f2e8 url('/visuals/comic-interior.webp') center / cover no-repeat;
}
#compare, #examples, #pricing { background: #e6eff1; }

/* 一张真人画面承接三条痛点，避免把同一素材复制三次。 */
#problem .container-page > div {
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(13rem, .85fr) minmax(0, 1.15fr);
  grid-template-rows: repeat(3, minmax(0, auto));
  align-items: stretch;
}
#problem .container-page > div::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / 4;
  min-height: 21rem;
  border: 3px solid #101c32;
  background: #e8ddd0 url('/showcase/grandma-photo.jpg') 50% 13% / cover no-repeat;
  box-shadow: 5px 5px 0 #101c32;
}
#problem .card, #problem .card:nth-child(n) {
  grid-column: 2;
  min-height: 0;
  padding: 1rem 1.25rem;
  border: 2px solid #101c32;
  background: rgba(255, 250, 242, .96);
  box-shadow: none;
  transform: none;
}
#problem .card h3 { border: 0; padding: 0; background: transparent; transform: none; font-size: 1.35rem; }
#problem .card h3::after { display: none; }
#problem .card p { max-width: 66ch; margin-top: .4rem; font-size: .95rem; line-height: 1.5; }

/* 成片前后对照维持竖屏比例，不裁掉输入照片的人脸。 */
#examples figure img { aspect-ratio: 9 / 16; object-fit: cover; object-position: center top; }
#examples [data-testid^='made-with-'] > div { max-width: 31rem; margin-inline: auto; }
#examples figure figcaption, #examples [data-testid^='made-with-'] > div > div > p {
  color: #101c32; font-family: DojaCondensed, sans-serif; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
}

/* 创意区保留全部文案，重复案例只在前面的成片区展示。 */
#ideas { padding-block: clamp(3rem, 5vw, 5rem); background: #f7eee2 url('/visuals/comic-interior.webp') center / cover no-repeat; border-top: 2px solid #101c32; }
#ideas .container-page > div { display: grid; gap: 1rem; margin-top: 2rem; }
#ideas .idea-item { margin: 0 !important; gap: 1.5rem; padding: 1.5rem; border: 2px solid #101c32; background: rgba(255, 250, 242, .96); box-shadow: 4px 4px 0 #101c32; }
#ideas .idea-item > div:last-child { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; align-content: start; }
#ideas .idea-item > div:last-child > span { grid-row: 1 / span 3; color: #d93c21; line-height: .9; }
#ideas .idea-item h3 { margin: 0; font-size: 1.75rem; }
#ideas .idea-item p { margin-top: .6rem; font-size: 1rem; line-height: 1.5; }
#ideas .idea-item a { margin-top: .85rem; }
#ideas .idea-item img, #ideas .idea-item figure > div { border: 2px solid #101c32; border-radius: 0; }

/* 工具介绍与规格表采用左右分栏，让长文字保持合适的行长。 */
#about .container-page, #specs .container-page { max-width: 68rem; }
#about .container-page > p:not(.eyebrow) { max-width: 64ch; }
#specs dl { margin-top: 2rem; }
#faq .container-page { background: rgba(255, 250, 242, .97); }
main > .container-page:has(> h1) .card, main > article.container-page .card, main > .container-page > .card { background-color: rgba(255, 250, 242, .97); }

@media (min-width: 768px) {
  #ideas .container-page > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #ideas .idea-item:has(img) { grid-column: 1 / -1; }
  #ideas .idea-item:not(:has(img)) { align-items: start; }
  #about .container-page { display: grid; grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.2fr); gap: 0 3rem; align-items: start; }
  #about .eyebrow { grid-column: 1; }
  #about h2 { grid-column: 1; grid-row: 2 / span 3; }
  #about p:not(.eyebrow), #about a { grid-column: 2; }
  #about p:not(.eyebrow):first-of-type { margin-top: 0; }
}
@media (max-width: 767px) {
  #problem .container-page > div { grid-template-columns: 1fr; }
  #problem .container-page > div::before { grid-column: 1; grid-row: auto; min-height: 13rem; background-position: center 14%; }
  #problem .card, #problem .card:nth-child(n) { grid-column: 1; }
  #ideas .idea-item { padding: 1.15rem; }
  #ideas .idea-item > div:last-child { grid-template-columns: 2.7rem minmax(0, 1fr); gap: 0 .75rem; }
  #ideas .idea-item > div:last-child > span { font-size: 2.5rem; }
}

/* 同一漫画语言使用不同的暖纸、蓝纸与留白，不将一张图铺满所有区块。 */
@font-face { font-family: DojaHand; src: url('/fonts/kalam-bold-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
main:not(:has(#create)) { background: #f9f2e8 url('/visuals/comic-interior.webp') center top / max(100%, 70rem) auto no-repeat; }
#problem { background: #f9f2e8 url('/visuals/comic-interior.webp') center / cover no-repeat; }
#compare { background: #dbeaf0; }
#how-it-works { background: #fbf6ee; }
#examples { background: #cfe4ed url('/visuals/comic-blue.webp') center / cover no-repeat; }
#about { background: #f9f2e8; }
#specs { background: #eaf1f1; }
#features { background: #f4eadd; }
#ideas { background: #fbf6ee; }
#pricing { background: #dbeaf0; }
#faq { background: #f9f2e8; }
#create > header p { font-family: DojaHand, sans-serif; font-style: normal; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.35; }
#problem .card h3, #how-it-works li h3, #ideas .idea-item h3 { font-family: DojaHand, sans-serif; font-style: normal; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
#problem .card h3 { font-size: 1.15rem; }
#how-it-works li h3 { font-size: 1.2rem; }
#ideas .idea-item h3 { font-size: 1.25rem; text-transform: none; }

/* 指南列表使用文字导览卡，避免一张卡有封面、另一张留出同样大的空白。 */
main > .container-page:has(> h1) ul li a.card { position: relative; min-height: 13rem; border-top: 6px solid #101c32; }
main > .container-page:has(> h1) ul li:nth-child(even) a.card { border-top-color: #5e92ad; background-color: #eef5f5; }
main > .container-page:has(> h1) ul li a.card > img { display: none; }
main > .container-page:has(> h1) ul li a.card h2, main > .container-page:has(> h1) ul li a.card h3 { font-family: DojaHand, sans-serif; font-size: 1.25rem; line-height: 1.25; }
@media (min-width: 640px) {
  main > .container-page:has(> h1) ul li a.card { flex-direction: row; min-height: 12rem; }
  main > .container-page:has(> h1) ul li a.card > img { display: block; width: 34%; height: auto; min-height: 100%; aspect-ratio: auto; object-fit: cover; border: 0; border-right: 2px solid #101c32; }
  main > .container-page:has(> h1) ul li a.card:not(:has(> img))::before { content: ''; width: 34%; flex-shrink: 0; border-right: 2px solid #101c32; background: #cfe4ed url('/visuals/comic-blue.webp') left center / auto 100% no-repeat; }
}
@media (max-width: 639px) {
  main > .container-page:has(> h1) ul li a.card > img { display: block; aspect-ratio: 2.4; object-fit: cover; }
}
@media (min-width: 640px) {
  main > .container-page:has(> h1) ul li a.card > img { object-fit: contain; background: #efe4d2; }
}
/* 长文副标题在手机换行后仍落在笔刷底色内。 */
#create > header p {
  background-image: url('/visuals/blue-brush.webp'), linear-gradient(#b9d6e2, #b9d6e2);
  background-position: center, center;
  background-size: 100% 100%, 88% 74%;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  #create > header p { font-size: .95rem; line-height: 1.3; padding: 1rem 2rem; }
}
@media (min-width: 640px) {
  main > .container-page:has(> h1) ul li a.card > img { object-fit: cover; object-position: center; }
}
#pricing { background: #d4e7ed url('/visuals/comic-pricing.webp') center / cover no-repeat; }
/* 文章封面作为正文旁的插图，不再占据整屏并产生大片空白。 */
@media (min-width: 768px) {
  main > article.container-page > img {
    float: right; width: min(38%, 15rem); height: 13rem; margin: 1.25rem 0 1.5rem 1.5rem;
    aspect-ratio: auto; object-fit: cover; object-position: center;
  }
  main > article.container-page .prose-article { display: flow-root; }
}
@media (max-width: 767px) {
  main > article.container-page > img { aspect-ratio: 2 / 1; object-fit: cover; object-position: center; }
}
@media (min-width: 768px) {
  main > article.container-page .prose-article { clear: both; }
}
#create > header p {
  background-image: url('/visuals/blue-brush.webp');
  background-size: 100% 180%;
}

/* 控制各屏阅读宽度与高度，保留桌面并排工作区和移动端自然纵排。 */
@media (min-width: 768px) {
  #create {
    max-width: 60rem;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-top: 1.6rem;
    padding-bottom: 2.25rem;
  }
  #create > header h1 { font-size: clamp(2.7rem, 4.8vw, 4.35rem); }
  #create > header p { font-size: 1rem; padding-block: .7rem; }
  [data-testid='generator'] section:first-of-type > button { min-height: 7.5rem; padding-block: 1rem; }
  [data-testid='generator'] .btn-primary { min-height: 3.3rem; }
  #problem .container-page > div::before { min-height: 18rem; }
  #how-it-works li.card { min-height: 19rem; }
  #about .container-page > p:nth-of-type(2) { grid-row: 2; margin-top: .75rem; }
  #about .container-page > p:nth-of-type(3) { grid-row: 3; }
  #about .container-page > a { grid-row: 4; }
}
#problem, #compare, #how-it-works, #examples, #about, #specs, #features, #ideas, #pricing, #faq {
  padding-block: clamp(2.6rem, 4.2vw, 4rem);
}
#problem .container-page, #compare .container-page, #how-it-works .container-page,
#features .container-page, #ideas .container-page, #pricing .container-page { max-width: 68rem; }
#examples [data-testid^='made-with-'] > div { max-width: 27rem; }
@media (min-width: 768px) {
  #create > div > [data-testid='generator-canvas'][data-state='examples'] {
    align-self: start;
    aspect-ratio: 9 / 16;
  }
}

/* 步骤区将竖图和文字分开，避免用渐变遮住素材或把长文挤出卡片。 */
#how-it-works li.card {
  display: grid;
  grid-template-columns: minmax(5.25rem, 38%) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: stretch;
  min-height: 15rem;
  padding: 0;
  overflow: hidden;
  background: #fffaf2;
}
#how-it-works li.card::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / 3;
  min-height: 15rem;
  border-right: 2px solid #101c32;
  background: #dcebf0 url('/showcase/grandma-photo.jpg') center / contain no-repeat;
}
#how-it-works li.card:nth-child(2)::before { background-image: url('/showcase/grandma-step-two.jpg'); }
#how-it-works li.card:nth-child(3)::before { background-image: url('/showcase/grandma-step-three.jpg'); }
#how-it-works li > span { position: absolute; top: .55rem; left: .55rem; z-index: 1; font-size: 3rem; }
#how-it-works li h3 { grid-column: 2; grid-row: 1; margin: 0; padding: 1.1rem 1rem 0; }
#how-it-works li p { grid-column: 2; grid-row: 2; margin: 0; padding: .5rem 1rem 1.1rem; font-size: .95rem; line-height: 1.5; }
@media (max-width: 767px) {
  #how-it-works li.card { min-height: 12rem; }
  #how-it-works li.card::before { min-height: 12rem; }
  #how-it-works li > span { font-size: 2.5rem; }
}
#how-it-works li.card:nth-child(2), #how-it-works li.card:nth-child(3) { background-image: none; }
@media (min-width: 768px) and (max-width: 1023px) {
  #how-it-works ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #how-it-works li.card:nth-child(3) { grid-column: 1 / -1; grid-template-columns: minmax(6rem, 22%) minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #how-it-works li.card:nth-child(3), #how-it-works li.card:nth-child(3)::before { min-height: 11rem; }
}

/* 创意区保留每个案例的照片和视频，竖屏素材完整显示。 */
#ideas .container-page > div { grid-template-columns: minmax(0, 1fr); }
#ideas .idea-item { gap: 1.5rem; }
#ideas .idea-item > div:first-child {
  display: flex; height: 13rem; gap: .75rem; align-items: center; justify-content: center;
}
#ideas .idea-item > div:first-child > img,
#ideas .idea-item > div:first-child > figure {
  width: auto; height: 100%; max-width: 45%; aspect-ratio: 9 / 16; object-fit: contain; background: #e3edf0;
}
#ideas .idea-item > div:first-child > figure > div { height: 100%; }
@media (min-width: 768px) {
  #ideas .idea-item, #ideas .idea-item:has(img) { grid-column: auto; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); }
  #ideas .idea-item:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem); }
}
@media (max-width: 767px) {
  #ideas .idea-item { grid-template-columns: minmax(0, 1fr); }
  #ideas .idea-item > div:first-child { height: 12rem; }
}
#problem .container-page > div::before {
  background-image: url('/visuals/dance-recording-practice.webp');
  background-position: center;
}

/* 去掉重复的大矩形卡片：用分镜、留白和分隔线组织内容。 */
#problem .card, #problem .card:nth-child(n) {
  padding: .8rem .35rem .8rem 1.15rem;
  border: 0;
  border-left: 3px solid #d93c21;
  background: transparent;
}
#problem .card h3 { font-size: 1.2rem; }
#problem .card p { max-width: 56ch; }
#how-it-works ol { gap: 0; }
#how-it-works li.card, #how-it-works li.card:nth-child(n) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#how-it-works li.card::before { border: 0; background-color: #e1eced; }
#how-it-works li h3 { padding-right: 1.1rem; }
#features .card, #features .card:nth-child(n) {
  border: 0;
  border-bottom: 1px solid #b9c4c4;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 1.1rem .4rem;
}
#features .card > span { border: 0; background: transparent; color: #d93c21; }
#ideas .idea-item {
  padding: 1.25rem 0;
  border: 0;
  border-bottom: 2px solid #aab8bd;
  background: transparent;
  box-shadow: none;
}
#ideas .idea-item > div:first-child > img { transform: rotate(-1deg); }
#ideas .idea-item > div:first-child > figure { transform: rotate(1deg); }
#ideas .idea-item > div:last-child > span { font-size: 3.6rem; }
#faq .container-page { border: 0; background: transparent; }
#pricing [data-testid^='package-'] {
  border: 0;
  border-top: 3px solid #101c32;
  border-radius: 0;
  box-shadow: none;
  background: rgba(255, 250, 242, .72);
}
#pricing [data-testid='package-party'] { border-top-color: #d93c21; background: rgba(255, 241, 222, .93); }
@media (min-width: 1024px) {
  #how-it-works li.card + li.card { border-left: 2px solid #aab8bd; padding-left: 1rem; }
  #how-it-works ol { column-gap: 1rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #how-it-works ol { gap: 1rem; }
  #how-it-works li.card:nth-child(2) { border-left: 2px solid #aab8bd; padding-left: 1rem; }
  #how-it-works li.card:nth-child(3) { border-top: 2px solid #aab8bd; padding-top: 1rem; }
}
@media (max-width: 767px) {
  #how-it-works ol { gap: 1rem; }
  #how-it-works li.card + li.card { border-top: 1px solid #aab8bd; padding-top: 1rem; }
  #ideas .idea-item > div:last-child > span { font-size: 2.5rem; }
}
/* 漫画动作线只用于强调顺序，不遮挡照片或交互。 */
#how-it-works h2::after, #ideas h2::after {
  content: '';
  display: block;
  width: 5rem;
  height: .28rem;
  margin-top: .6rem;
  background: #d93c21;
  transform: skewX(-25deg) rotate(-2deg);
  box-shadow: 1.25rem .22rem 0 -.11rem #77a2b8;
}
@media (min-width: 1024px) {
  #how-it-works li.card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 48%;
    right: -.95rem;
    z-index: 2;
    width: 1.6rem;
    height: .85rem;
    background: #d93c21;
    clip-path: polygon(0 32%, 62% 32%, 62% 0, 100% 50%, 62% 100%, 62% 68%, 0 68%);
  }
}

/* 站点专属标识复用同一份 SVG，覆盖导航、页脚、登录和后台的通用字母标记。 */
span[aria-hidden].tracking-tight { background: url('/favicon.svg') center / contain no-repeat; font-size: 0; color: transparent; }

/* 指南封面为横图，不再裁成竖条；无封面的文章也不生成装饰性假图。 */
main > .container-page:has(> h1) ul li a.card { flex-direction: column; min-height: 0; }
main > .container-page:has(> h1) ul li a.card > img { display: none; }
main > .container-page:has(> h1) ul li a.card:not(:has(> img))::before { display: none; }

/* 内页背景在图片底部渐隐，长文和表单不会出现突兀的横向接缝。 */
main:not(:has(#create)) {
  background-color: #f9f2e8;
  background-image: linear-gradient(to bottom, transparent 50%, #f9f2e8 100%), url('/visuals/comic-interior.webp');
  background-position: center top;
  background-size: 100% max(39.4rem, 56.28vw), max(100%, 70rem) auto;
  background-repeat: no-repeat;
}

/* 文章案例独立成区，不让浮动封面挤压视频；数量变化时自动换行。 */
main > article.container-page [data-testid='article-style-demo'] {
  clear: both;
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 2px solid #101c32;
  background: #e6eff1;
}
main > article.container-page [data-testid='article-style-demo'] h2 {
  max-width: 34rem;
  margin-bottom: 1.25rem;
  line-height: 1.15;
}
main > article.container-page [data-testid='article-style-demo'] > div {
  display: flex;
  max-width: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
main > article.container-page [data-testid='article-style-demo'] figure {
  width: min(100%, 12rem);
}
main > article.container-page [data-testid='article-style-demo'] figure > div {
  border: 2px solid #101c32;
  border-radius: .2rem;
}
main > article.container-page [data-testid='article-style-demo'] figure > div > span {
  max-width: calc(100% - 1.25rem);
  font-size: .7rem;
  line-height: 1.25;
}
main > article.container-page .prose-article h2 { line-height: 1.2; }
main > article.container-page .prose-article p { line-height: 1.8; }

/* 内页按钮与长文本在小屏上自然换行。 */
@media (max-width: 639px) {
  main > .container-page { padding-top: 3rem; padding-bottom: 3rem; }
  main > article.container-page { padding-top: 3rem; padding-bottom: 3rem; }
  main > .container-page:has(> nav) > div:first-child > .flex.items-center.gap-2 { flex-wrap: wrap; }
  main > .container-page:has(> h1) ul li a.card { min-height: 0; }
}