/* 首页落地板块:How it works 3 步 + 关键词/工具入口(接 beadpattern 结构,更干净) */
.lp{width:min(1200px,calc(100% - 40px));margin:0 auto}   /* 统一内容宽 = .container 内容；用 width 而非 max-width+padding，卡片型(如 .lp-kw)边框才对齐、不外扩 */

/* 首页首屏：标题独立在上，完整流程卡按「原图 → AI → 图纸 → 成品」承接到现有上传工具。 */
.app-header.maker-hero{display:block;margin-bottom:20px;padding:0}
.maker-hero-copy{min-width:0}
.maker-hero-title-row{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.maker-hero-title-row .brand{font-size:clamp(28px,3vw,38px);letter-spacing:0}
.brand .pxb{display:inline-block;margin-left:7px;padding:6px 12px 5px;border-radius:8px;background:var(--ink,#23262F);color:#FFE18A;font-family:var(--num,monospace);font-size:12px;font-weight:700;line-height:1;letter-spacing:2px;vertical-align:middle;white-space:nowrap;transform:rotate(-1deg)}
.maker-hero .head-sub{width:auto;max-width:none;flex:none;margin:9px 0 0;color:var(--body,#5A5F6E);font-size:15px;font-weight:600;line-height:1.65}
.maker-hero .buy-slot{margin:8px 0 0}
.maker-hero-card{margin-top:24px;padding:26px 28px 24px;background:var(--board,#FFFDF6)}
.maker-hero-eyebrow{display:inline-flex;align-items:center;min-height:32px;padding:5px 14px;border:2px solid var(--ink,#23262F);border-radius:999px;background:#fff;box-shadow:3px 3px 0 var(--ink,#23262F);font-size:13px;font-weight:900;line-height:1.35}
.maker-hero-flow-title{margin:20px 0 0;color:var(--ink,#23262F);font-size:clamp(21px,2.2vw,27px);font-weight:900;line-height:1.35;letter-spacing:0}
.maker-hero-stages{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr);align-items:stretch;gap:10px;margin-top:22px}
.maker-hero-stage{position:relative;min-width:0;margin:0;overflow:hidden;aspect-ratio:1/1.08;border:2px solid var(--ink,#23262F);border-radius:12px;background:#fff;box-shadow:3px 3px 0 var(--ink,#23262F)}
.maker-hero-stage>img{display:block;width:100%;height:100%;object-fit:cover;background:var(--soft2,#F0F1F5)}
.maker-hero-stage.is-chart>img{object-position:center}
.maker-hero-tag{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;max-width:calc(100% - 20px);padding:4px 9px;border:2px solid var(--ink,#23262F);border-radius:8px;background:#fff;box-shadow:2px 2px 0 var(--ink,#23262F);font-size:12px;font-weight:900;line-height:1.2;white-space:nowrap}
.maker-hero-tag .num{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-right:6px;border-radius:5px;background:var(--violet,#8F7BFF);color:#fff;font-family:var(--num,monospace);font-size:11px}
.maker-hero-stage.is-chart .maker-hero-tag .num{background:var(--amber-d,#E8930C)}
.maker-hero-stage.is-finished .maker-hero-tag .num{background:var(--green,#3FA34D)}
.maker-hero-chip{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;width:max-content;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;border:2px solid var(--ink,#23262F);border-radius:7px;background:#FFF6D8;color:var(--ink,#23262F);font-size:10.5px;font-weight:900}
.maker-hero-arrow{align-self:center;display:grid;place-items:center;color:var(--ink,#23262F);font-size:28px;font-weight:900}
.maker-hero-finished{display:grid;place-items:center;width:100%;height:100%;padding:20%;background:repeating-linear-gradient(45deg,#FBF7EC 0 12px,#F4EFE1 12px 24px)}
.maker-hero-finished-frame{display:grid;place-items:center;width:100%;aspect-ratio:1/1;padding:6px;border:6px solid #D59A32;border-radius:2px;background:#fff;box-shadow:3px 4px 0 rgba(35,38,47,.22)}
.maker-hero-finished-frame img{display:block;width:100%;height:100%;object-fit:cover}
.maker-hero-caption{display:flex;align-items:flex-start;gap:9px;margin:18px 0 0;color:var(--body,#5A5F6E);font-size:13.5px;font-weight:700;line-height:1.55}
.maker-hero-caption::before{content:'';flex:0 0 auto;width:9px;height:9px;margin-top:5px;border:2px solid var(--ink,#23262F);border-radius:50%;background:var(--amber,#FFB020)}
.maker-hero-actions{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.maker-hero-cta{min-height:50px;padding:12px 22px;border:2px solid var(--ink,#23262F);border-radius:12px;background:var(--violet,#8F7BFF);color:#fff;box-shadow:4px 4px 0 var(--ink,#23262F);font-family:inherit;font-size:16px;font-weight:900;line-height:1.3;cursor:pointer;transition:transform .1s,box-shadow .1s}
.maker-hero-cta.secondary{background:#fff;color:var(--ink,#23262F)}
.maker-hero-cta:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink,#23262F)}
.maker-hero-cta:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink,#23262F)}
.maker-hero-trust{color:var(--body,#5A5F6E);font-size:13px;font-weight:800;line-height:1.45}
@media(max-width:920px){
  .maker-hero-stages{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);gap:7px}
  .maker-hero-arrow{font-size:21px}
  .maker-hero-tag{top:7px;left:7px;max-width:calc(100% - 14px);padding:3px 6px;font-size:10.5px}
  .maker-hero-tag .num{min-width:16px;height:16px;margin-right:4px;font-size:10px}
}
@media(max-width:680px){
  .app-header.maker-hero{margin-bottom:14px}
  .maker-hero-title-row .brand{font-size:clamp(24px,7vw,30px)}
  .maker-hero .head-sub{font-size:13px;line-height:1.55}
  .maker-hero-card{margin-top:17px;padding:17px 14px 18px}
  .maker-hero-eyebrow{min-height:29px;padding:4px 11px;font-size:11.5px;box-shadow:2px 2px 0 var(--ink,#23262F)}
  .maker-hero-flow-title{margin-top:15px;font-size:19px}
  .maker-hero-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
  .maker-hero-arrow{display:none}
  .maker-hero-stage{aspect-ratio:1/1.06}
  .maker-hero-caption{margin-top:15px;font-size:12px}
  .maker-hero-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:15px}
  .maker-hero-cta{width:100%;min-height:46px;padding:10px 12px;font-size:14px}
  .maker-hero-trust{text-align:center;font-size:11.5px}
}
.lp-steps{margin:38px auto 10px}
.lp-head{text-align:center;margin-bottom:22px}
.lp-head h2{font-size:clamp(22px,3vw,30px);font-weight:900;margin:0;letter-spacing:.3px}
.lp-head p{font-size:14.5px;color:var(--body,#4a4a55);margin:8px 0 0;font-weight:500}
.lp-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-step{background:#fff;border:2px solid var(--ink,#23262F);border-radius:16px;padding:24px 20px;box-shadow:5px 5px 0 rgba(35,38,47,.1);text-align:center}
.lp-step .n{width:44px;height:44px;margin:0 auto 13px;border-radius:12px;background:var(--violet,#8F7BFF);color:#fff;border:2px solid var(--ink,#23262F);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;box-shadow:2px 2px 0 var(--ink,#23262F)}
.lp-step.amber .n{background:var(--amber,#F2A93B)}
.lp-step.green .n{background:var(--green,#2FA97C)}
.lp-step h3{font-size:17px;font-weight:900;margin:0 0 6px}
.lp-step p{font-size:14.5px;line-height:1.65;color:var(--body,#4a4a55);margin:0;font-weight:450}
.lp-kw{margin:34px auto;background:var(--board,#FBF7EC);border:2px solid var(--ink,#23262F);border-radius:16px;padding:20px 22px;box-shadow:5px 5px 0 rgba(35,38,47,.1)}
.lp-kw b{display:block;text-align:center;font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--violet,#8F7BFF);margin-bottom:13px}
.lp-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.lp-chips a{font-size:13.5px;font-weight:800;color:var(--ink,#23262F);text-decoration:none;background:#fff;border:2px solid var(--ink,#23262F);border-radius:99px;padding:7px 15px;white-space:nowrap;transition:transform .1s,background-color .15s,color .15s}
.lp-chips a:hover{transform:translateY(-1px);background:var(--green,#2FA97C);color:#fff}
@media(max-width:680px){.lp-steps-grid{grid-template-columns:1fr}}
.lp-guide{display:block;text-align:center;background:var(--violet,#8F7BFF);color:#fff;border:2px solid var(--ink,#23262F);border-radius:14px;padding:15px 22px;font-weight:900;font-size:16px;text-decoration:none;box-shadow:4px 4px 0 var(--ink,#23262F);transition:transform .1s}
.lp-guide:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--ink,#23262F)}

/* ── 生成页预览小调整 ── */
/* 1) 两栏同高不变形：原图 / 色号图纸等高框，内容 contain 居中（图纸自动 fit，不再一大一小 / 下方留白）*/
.pattern-compare{align-items:stretch}
.pattern-compare .source-pane>.pane-frame.orig,.pattern-chart-pane>.chart-pane-frame{height:clamp(400px,56vh,560px)!important;min-height:0!important;max-height:none!important}
.pane-frame.orig #previewOrig{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
.chart-pane-frame .preview-chart-wrap{height:100%!important}
.chart-pane-frame .preview-chart-wrap canvas{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important}
/* 空状态只展示上传 / AI 卡片；产生结果后再恢复完整预览与调整区。 */
/* 去掉像素崽崽 demo（看看能做出什么），只保留 AI 案例区 */
#showcase{display:none!important}
/* 2) 预览区的 −/+ 缩放:去掉 */
.preview-chart-tools{display:none!important}
/* 3) 「3 步」标题字号 = 「强大功能」标题(25px 同款) */
.lp-head h2{font-size:25px;font-family:var(--disp,inherit);letter-spacing:.5px}
/* 4) 首页生成页的「我的项目」回看条:去掉 */
.aip-mine-wrap{display:none!important}

/* ── AI 案例展示：照片一键变可爱拼豆（仿参考图网格：hero CTA + 例子卡片） ── */
/* 宽度与上下相邻区块（工具区 .workspace / 案例区 #showcase）对齐：都填满 .container 内容宽(1152)，别再 max-width:1080 居中留边 */
.aicase{margin:48px 0 20px;padding:0}
.aicase-head{text-align:center;margin-bottom:18px}
.aicase-badge{display:inline-block;font-size:12.5px;font-weight:900;letter-spacing:.5px;color:var(--violet,#7C6CF0);background:#F1EEFF;border:2px solid var(--ink,#23262F);border-radius:99px;padding:4px 13px;box-shadow:2px 2px 0 var(--ink,#23262F)}
.aicase-head h2{font-size:clamp(21px,3vw,28px);font-weight:900;margin:12px 0 6px;letter-spacing:.3px}
.aicase-head p{font-size:14.5px;color:var(--body,#4a4a55);margin:0;font-weight:500}
.aicase-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.aicase-hero{grid-column:span 2;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:12px;text-align:left;background:var(--violet,#7C6CF0);color:#fff;border:2px solid var(--ink,#23262F);border-radius:14px;padding:18px 17px;box-shadow:4px 4px 0 var(--ink,#23262F);cursor:pointer;font-family:inherit;min-height:0;transition:transform .1s,box-shadow .1s}
.aicase-hero:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink,#23262F)}
.aicase-hero:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink,#23262F)}
.aicase-hero-t{font-size:clamp(17px,1.8vw,20px);font-weight:900;line-height:1.35}
.aicase-hero-btn{font-size:13px;font-weight:900;background:#fff;color:var(--ink,#23262F);border:2px solid var(--ink,#23262F);border-radius:10px;padding:8px 13px;box-shadow:2px 2px 0 rgba(0,0,0,.28)}
.aicase-card{position:relative;border:2px solid var(--ink,#23262F);border-radius:14px;overflow:hidden;background:var(--board,#F3F1EA);aspect-ratio:1/1;box-shadow:3px 3px 0 rgba(35,38,47,.12);padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .12s,box-shadow .12s}
.aicase-card:hover{transform:translateY(-2px);box-shadow:4px 5px 0 rgba(35,38,47,.16)}
.aicase-card:focus-visible{outline:3px solid var(--violet,#7C6CF0);outline-offset:3px}
.aicase-card img{display:block}
.aicase-card b{position:absolute;left:9px;bottom:9px;font-size:12px;font-weight:900;color:var(--ink,#23262F);background:#fff;border:1.5px solid var(--ink,#23262F);border-radius:99px;padding:4px 11px;box-shadow:1.5px 1.5px 0 rgba(35,38,47,.2);z-index:2}
/* 默认展示完整 AI 原图；鼠标悬停时用静态成品封面交叉切换为拼豆图。 */
.aicase-compare{position:absolute;inset:0;overflow:hidden;background:var(--board,#F3F1EA);pointer-events:none}
.aicase-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .24s ease}
.aicase-ai{opacity:1}
.aicase-bead{opacity:0;image-rendering:pixelated}
.aicase-side-label{position:absolute;top:9px;z-index:2;max-width:calc(100% - 18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;border:1.5px solid var(--ink,#23262F);border-radius:99px;color:#fff;font-size:10.5px;font-weight:900;line-height:1.2;box-shadow:1.5px 1.5px 0 rgba(35,38,47,.2);transition:opacity .18s ease}
.aicase-side-label.ai{left:9px;background:var(--violet,#7C6CF0)}
.aicase-side-label.bead{right:9px;background:var(--green,#2FA97C);opacity:0}
.aicase-card:focus-visible .aicase-ai{opacity:0}
.aicase-card:focus-visible .aicase-bead{opacity:1}
.aicase-card:focus-visible .aicase-side-label.ai{opacity:0}
.aicase-card:focus-visible .aicase-side-label.bead{opacity:1}
@media(hover:hover){
  .aicase-card:hover .aicase-ai{opacity:0}
  .aicase-card:hover .aicase-bead{opacity:1}
  .aicase-card:hover .aicase-side-label.ai{opacity:0}
  .aicase-card:hover .aicase-side-label.bead{opacity:1}
}
.aicase-card.bead-ready{cursor:pointer}
@media(max-width:1080px){.aicase-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.aicase{margin-top:32px}.aicase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.aicase-hero{grid-column:span 2;min-height:118px;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}.aicase-hero-t{font-size:18px}}
@media(max-width:480px){.aicase-hero{flex-direction:column;align-items:flex-start}}