/* FanxFoto 官网 R2 · 网站样式（设计小样）
 * 颜色、胶带、贴纸、相纸阴影沿用 App 已确认值：CoframePaper（lib/ui/coframe/paper.dart）
 * 与 010 相框邀请（handoff/guide-redesign-preview）。正文用系统字体；手写字只用于固定短句。
 */
@font-face { font-family: "FXFHand"; src: url("res/010-LXGWWenKaiTC-400-subset.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "FXFHand"; src: url("res/010-LXGWWenKaiTC-700-subset.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --desk: #f6f2ec; --print: #fffdf8; --ink: #24202b; --soft: #6f6878; --line: #e5ded3;
  --accent: #4a3a9a; --accent-d: #3b2e80; --accent-l: #8e74f0; --mist: #ece6ff; --ring: #cfc3f5; --marker: #5b45cc;
  --band: #ebe4d8; --tabpaper: #efe6d6; --note: #fbf6ec; --tape: rgba(206, 192, 250, .78);
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --hand: "FXFHand", "LXGW WenKai TC", "Kaiti SC", "STKaiti", "KaiTi", serif;
  /* R3：子集缺字的固定短句整句用系统楷体，避免同一短句里两种字形混排；不新增字体下载 */
  --hand-sys: "LXGW WenKai TC", "Kaiti SC", "STKaiti", "KaiTi", "Kaiti", serif;
  --shadow-print: 0 0 0 1px rgba(229, 222, 211, .75), 0 2px 3px rgba(60, 40, 90, .10), 0 12px 22px -10px rgba(60, 40, 90, .28);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --tape-clip: polygon(3% 8%, 10% 0, 20% 10%, 30% 2%, 42% 9%, 55% 1%, 68% 8%, 80% 0, 90% 9%, 97% 2%, 100% 50%, 96% 98%, 86% 90%, 74% 100%, 62% 92%, 50% 100%, 37% 91%, 25% 99%, 13% 92%, 4% 100%, 0 55%);
  --gutter: clamp(20px, 5vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.s150 { font-size: 150%; }
body.site {
  margin: 0; color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.7;
  background: radial-gradient(1100px 640px at 78% 0%, rgba(255, 255, 255, .6), transparent 70%), var(--desk);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.site img { max-width: 100%; display: block; }
.site a { color: var(--accent); }
.site :focus-visible { outline: 3px solid var(--accent-l); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
/* R3：页面不横向漂移。贴纸、胶带、相片堆等装饰在 main 边缘裁掉；
   用 clip 而不是 hidden，固定舞台的 sticky 仍然有效；印样条自身的横向滚动不受影响 */
@supports (overflow: clip) { body.site > #app > main, body.site .unpub { overflow-x: clip; } }
html.still *, html.still *::before, html.still *::after,
html.reduced *, html.reduced *::before, html.reduced *::after { transition: none !important; animation: none !important; }

/* ---------------- 页头 ---------------- */
.top { position: relative; z-index: 20; height: 72px; display: flex; align-items: center; justify-content: space-between; }
.mark { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-size: 1.375rem; letter-spacing: .01em; color: var(--ink) !important; text-decoration: none; }
.mark b { color: var(--accent); font-weight: 800; }
.help { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; color: var(--ink) !important; text-decoration: none; font-weight: 600; font-size: .9375rem; }
.help:hover .stamp { box-shadow: 0 0 0 3px var(--mist), 0 2px 5px rgba(60, 40, 90, .16); }
.stamp { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--print); border: 1px solid #e1d8ca; box-shadow: 0 2px 5px rgba(60, 40, 90, .16); }
.stamp svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lbl-short { display: none; }
@media (max-width: 719px) {
  .top { height: 56px; }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
}

.ribbon { position: sticky; top: 0; z-index: 60; padding: 8px 16px; text-align: center; font-size: .8125rem; font-weight: 700; color: #fff; background: repeating-linear-gradient(-45deg, #4a3a9a 0 14px, #5b45cc 14px 28px); }

/* 占位格：没有真实资料。虚线、斜纹、灰字，读起来就不像信息 */
.slot { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45em; padding: .06em .6em; margin: .12em .4em .12em 0; border: 1.5px dashed #c9bfae; border-radius: 6px; background: repeating-linear-gradient(-45deg, rgba(201, 191, 174, .15) 0 6px, transparent 6px 12px); color: #857c6c; font-size: .875em; font-weight: 500; line-height: 1.6; }
.slot em { font-style: normal; font-size: .85em; color: #a49a88; }

/* 胶带（共用锯齿形）。相纸上的尺寸按舞台单位，其他地方用 .tape.s */
.tape { position: absolute; background: var(--tape); clip-path: var(--tape-clip); pointer-events: none; }
.tape.s { width: 56px; height: 18px; left: -14px; top: -8px; transform: rotate(-28deg); }

/* ================================================================
   舞台：一张相纸。所有尺寸以 --u（= 相纸宽 / 315）为单位，与 App 375 稿同比例
   ================================================================ */
.stage {
  --pw: 400px; --u: calc(var(--pw) / 315);
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: calc(var(--pw) + 60 * var(--u)); height: calc(var(--pw) * 1.437 + 44 * var(--u));
}
.print {
  position: relative; z-index: 1; width: calc(315 * var(--u)); padding: calc(14 * var(--u)) calc(14 * var(--u)) 0;
  background: var(--print); border-radius: calc(4 * var(--u)); box-shadow: var(--shadow-print);
  transform: rotate(-1.6deg); transition: transform 340ms var(--ease-out), box-shadow 340ms var(--ease-out);
}
.cv { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: calc(2 * var(--u)); background: radial-gradient(120% 120% at 70% 18%, #fff 0%, var(--mist) 100%); }
.cv img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ph-co { opacity: 0; }
.print > .tape { z-index: 4; width: calc(78 * var(--u)); height: calc(24 * var(--u)); top: calc(-8 * var(--u)); transition: transform 220ms var(--ease-out), opacity 180ms; }
.print > .tape.l { left: calc(-18 * var(--u)); transform: rotate(-34deg); }
.print > .tape.r { right: calc(-18 * var(--u)); transform: rotate(36deg); }

.lip { position: relative; height: calc(56 * var(--u)); }
.lip > span { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; transition: opacity 220ms var(--ease-out); }
.lip-name { left: calc(10 * var(--u)); font-family: var(--hand); font-size: calc(21 * var(--u)); color: var(--accent); }
.lip-word { left: calc(54 * var(--u)); font-family: var(--hand); font-weight: 700; font-size: calc(19 * var(--u)); color: var(--accent); opacity: 0; }
/* R3：底边只放手写字。“示意”胶囊移到画面角上的统一来源标记里，手写字独占 54u→277u（223u），
   放不下时按“和云团熊，｜一起挥挥手”两组折成两行，不缩字、不省略 */
.lip-cap { left: calc(54 * var(--u)); width: calc(223 * var(--u)); font-family: var(--hand); font-size: calc(17 * var(--u)); line-height: 1.2; color: var(--accent); white-space: normal !important; opacity: 0; }

/* 取景角标：相纸变成取景框时出现，不画任何代表“你”的形状 */
.vf { position: absolute; z-index: 3; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border: calc(3 * var(--u)) solid rgba(74, 58, 154, .72); opacity: 0; transition: opacity 240ms var(--ease-out); }
.vf.tl { left: calc(12 * var(--u)); top: calc(12 * var(--u)); border-right: 0; border-bottom: 0; border-top-left-radius: calc(7 * var(--u)); }
.vf.tr { right: calc(12 * var(--u)); top: calc(12 * var(--u)); border-left: 0; border-bottom: 0; border-top-right-radius: calc(7 * var(--u)); }
.vf.bl { left: calc(12 * var(--u)); bottom: calc(12 * var(--u)); border-right: 0; border-top: 0; border-bottom-left-radius: calc(7 * var(--u)); }
.vf.br { right: calc(12 * var(--u)); bottom: calc(12 * var(--u)); border-left: 0; border-top: 0; border-bottom-right-radius: calc(7 * var(--u)); }
.flash { position: absolute; inset: 0; z-index: 4; background: #fffdf8; opacity: 0; transition: opacity 260ms ease-out; }
/* 统一来源标记（R3）：单独角色、取景、合照都在画面右下角标“AI 合成示意”，样式沿用 App 的 AI 标签。
   取景态右下有取景角标，标记向左让开；字号不小于 9px */
.ai { position: absolute; z-index: 3; right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); padding: .2em .5em; border-radius: calc(4 * var(--u)); background: rgba(36, 32, 43, .55); color: #fff; font-size: max(9px, calc(11 * var(--u))); font-weight: 700; line-height: 1.3; letter-spacing: .02em; white-space: nowrap; transition: right 300ms var(--ease-out); }

/* 动作贴纸 92 母版（010） */
.stk {
  position: absolute; z-index: 5; left: calc(-20 * var(--u)); top: calc(52 * var(--u)); width: calc(92 * var(--u)); height: calc(92 * var(--u));
  transform: rotate(-8deg); transition: transform 440ms var(--ease-out), filter 300ms;
  filter: drop-shadow(0 1.5px 1px rgba(60, 40, 90, .18)) drop-shadow(0 5px 6px rgba(60, 40, 90, .12));
}
.stk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.s-base { fill: var(--print); stroke: var(--line); stroke-width: 1; }
.s-in { fill: var(--mist); }
.s-ring { fill: none; stroke: var(--ring); stroke-width: 1.2; stroke-dasharray: 3 3; }
.s-pen { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.s-marks { stroke-dasharray: 30; stroke-dashoffset: 0; transition: opacity 200ms; }
.s-word { font-family: var(--hand); font-size: 15px; font-weight: 700; fill: var(--accent); text-anchor: middle; transition: opacity 160ms; }
.wave { transform-box: fill-box; transform-origin: 50% 100%; }

/* 桌上已有的几张相片：只在冲成相片时露出，表示“落到你的照片里” */
.pile { position: absolute; inset: 0; pointer-events: none; }
.pile i { position: absolute; left: 50%; top: 50%; width: calc(262 * var(--u)); aspect-ratio: 315 / 452; background: var(--print); border-radius: calc(4 * var(--u)); box-shadow: var(--shadow-print); opacity: 0; transition: opacity 320ms 200ms; }
.pile i::before { content: ""; position: absolute; left: 4.4%; right: 4.4%; top: 3.1%; aspect-ratio: 3 / 4; border-radius: 2px; }
/* R3：两张相片连同旋转都收在舞台盒（相纸宽＋60u）以内，不再撑出页面宽度；仍从主相片左右各露出约 30u */
.pile i:nth-child(1) { transform: translate(-36%, -53%) rotate(5deg); }
.pile i:nth-child(1)::before { background: radial-gradient(120% 120% at 70% 18%, #fffaf4, #ffe1cf); }
.pile i:nth-child(2) { transform: translate(-64%, -47%) rotate(-4deg); }
.pile i:nth-child(2)::before { background: radial-gradient(120% 120% at 70% 18%, #fbfffc, #d9efe3); }

/* ---------- 状态 ---------- */
.stage:not([data-s="invite"]) .print > .tape { opacity: 0; }
.stage:not([data-s="invite"]) .print > .tape.l { transform: translate(-30%, -60%) rotate(-50deg); }
.stage:not([data-s="invite"]) .print > .tape.r { transform: translate(30%, -60%) rotate(52deg); }
.stage[data-s="peel"] .print { transform: rotate(-.8deg) scale(1.01); }
.stage[data-s="peel"] .stk { transform: translate(calc(-38 * var(--u)), calc(-32 * var(--u))) rotate(-24deg) scale(1.06); filter: drop-shadow(0 4px 3px rgba(60, 40, 90, .2)) drop-shadow(0 14px 14px rgba(60, 40, 90, .18)); }
.stage:is([data-s="frame"], [data-s="flash"], [data-s="photo"]) .print { transform: rotate(0deg) scale(1.04); }
.stage:is([data-s="frame"], [data-s="flash"], [data-s="photo"], [data-s="print"]) .stk { transform: translate(calc(3 * var(--u)), calc(326.67 * var(--u))) rotate(-6deg) scale(.37); filter: drop-shadow(0 1px 1px rgba(60, 40, 90, .2)); }
.stage:is([data-s="frame"], [data-s="flash"], [data-s="photo"], [data-s="print"]) .s-word,
.stage:is([data-s="frame"], [data-s="flash"], [data-s="photo"], [data-s="print"]) .s-marks { opacity: 0; }
.stage:not([data-s="invite"]) .lip-name { opacity: 0; }
.stage:is([data-s="frame"], [data-s="flash"], [data-s="photo"]) .lip-word { opacity: 1; transition-delay: 220ms; }
.stage:is([data-s="frame"], [data-s="flash"], [data-s="photo"]) .vf { opacity: 1; transition-delay: 200ms; }
.stage[data-s="flash"] .flash { opacity: .96; transition: opacity 110ms ease-in; }
.ph-bear, .ph-co { transition: none; }
.stage:is([data-s="photo"], [data-s="print"]) .ph-bear { opacity: 0; }
.stage:is([data-s="photo"], [data-s="print"]) .ph-co { opacity: 1; }
.stage:is([data-s="frame"], [data-s="flash"], [data-s="photo"]) .ai { right: calc(44 * var(--u)); }
.stage[data-s="print"] .print {
  transform: translate(calc(-4 * var(--u)), calc(6 * var(--u))) rotate(2deg) scale(.95);
  box-shadow: 0 0 0 1px rgba(229, 222, 211, .75), 0 3px 4px rgba(60, 40, 90, .12), 0 24px 30px -14px rgba(60, 40, 90, .34);
  transition-duration: 380ms;
}
.stage[data-s="print"] .lip-cap { opacity: 1; transition-delay: 180ms; }
.stage[data-s="print"] .pile i { opacity: 1; }

/* ---------- 首次打开（010 时间）：250ms 贴纸落下，450–1650ms 挥两次；“TA”记号笔圈 250–700ms ---------- */
@keyframes stkDrop { 0% { opacity: 0; transform: rotate(-16deg) scale(1.25); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(12deg); } 40% { transform: rotate(-8deg); } 60% { transform: rotate(12deg); } 80% { transform: rotate(-8deg); } }
@keyframes marks { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html.intro .hero-stage[data-s="invite"] .stk { animation: stkDrop 220ms var(--ease-back) 250ms both; }
html.intro .hero-stage[data-s="invite"] .wave { animation: wave 1200ms ease-in-out 450ms both; }
html.intro .hero-stage[data-s="invite"] .s-marks { animation: marks 200ms ease-out 450ms both; }
html.intro .marker path { animation: draw 450ms ease-out 250ms both; }
@media (hover: hover) { .hero-stage[data-s="invite"] .stk:hover .wave { animation: wave 700ms ease-in-out; } }

/* ================================================================
   首页
   ================================================================ */
/* 意群：组内不折行，只在组间折行（R3） */
.u { white-space: nowrap; }
.h1 { font-size: clamp(2rem, 4.6vw, 4.25rem); line-height: 1.22; font-weight: 800; letter-spacing: .01em; margin: 0 0 .45em; }
.ta { position: relative; display: inline-block; color: var(--accent); padding: 0 .1em; margin: 0 .06em; }
.marker { position: absolute; left: -.2em; top: -.14em; width: calc(100% + .44em); height: calc(100% + .3em); overflow: visible; pointer-events: none; }
.marker path { fill: none; stroke: var(--marker); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sub { font-size: 1.25rem; line-height: 1.7; color: var(--soft); max-width: 21em; margin: 0 0 2.5rem; }

/* R3：纸签胶带移到右上角并向外斜出，不再压到上面的副文案；与副文案至少留 2.5rem */
.next { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tag { position: relative; padding: 15px 22px 13px; background: var(--print); border-radius: 6px; transform: rotate(-1deg); box-shadow: 0 0 0 1px rgba(229, 222, 211, .85), 0 8px 18px -10px rgba(60, 40, 90, .3); }
.tag .tape.s { left: auto; right: -12px; top: -7px; width: 50px; height: 16px; transform: rotate(24deg); }
.tag p { margin: 0; }
.tag .t1 { font-weight: 700; font-size: 1.0625rem; }
.tag .t2 { margin-top: .2em; font-size: .875rem; color: var(--soft); }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--ring); }
.textlink:hover { text-decoration-color: var(--accent); }

/* 已有真实下载链接时的版位：设计标注，不可点 */
.next.live { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.anno { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 18px 16px 12px; border: 1.5px dashed var(--accent-l); border-radius: 10px; color: var(--accent); cursor: default; background: repeating-linear-gradient(-45deg, rgba(142, 116, 240, .07) 0 8px, transparent 8px 16px); }
.anno-k { position: absolute; top: -9px; left: 10px; padding: 0 6px; border-radius: 4px; background: var(--accent-l); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1.6; letter-spacing: .06em; }
.anno b { font-size: .9375rem; }
.anno small { max-width: 15em; font-size: .75rem; line-height: 1.45; color: var(--soft); }
.badge-slot { width: 228px; min-height: 92px; }
.qr-slot { width: 136px; min-height: 136px; }
.req { flex-basis: 100%; margin: 0; font-size: .875rem; color: var(--soft); }

.step-copy h2 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.3; font-weight: 800; margin: 0 0 .5em; }
.step-copy p { font-size: 1.125rem; line-height: 1.75; color: var(--soft); max-width: 19em; margin: 0; }

/* ---------- 拍一张：静态排法（默认，也是减少动态／无 JS／矮屏／大字号） ---------- */
.stage-col { display: none; }
.story .step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: 40px 0; }
.story .step.hero { min-height: calc(100vh - 72px); padding: 12px 0 48px; }
.snap { display: flex; justify-content: center; }
.snap .stage { --pw: min(400px, 34vw); }

/* ---------- 拍一张：桌面固定舞台 ---------- */
html.js-story .story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 64px); }
html.js-story .story .step { display: flex; align-items: center; grid-column: 1; padding: 0; }
html.js-story .story .step .snap { display: none; }
html.js-story .story .step.hero { grid-row: 1; min-height: calc(100vh - 72px); padding-bottom: 6vh; }
html.js-story .story .step[data-step="1"] { grid-row: 2; min-height: 84vh; }
html.js-story .story .step[data-step="2"] { grid-row: 3; min-height: 92vh; }
html.js-story .stage-col { display: block; grid-column: 2; grid-row: 1 / 4; }
html.js-story .stage-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
html.js-story .live-stage { --pw: min(440px, calc((100vh - 120px) / 1.5), 36vw); }
html.js-story .step:not(.hero) .step-copy { opacity: .3; transition: opacity 320ms var(--ease-out); }
html.js-story .step:not(.hero) .step-copy.on { opacity: 1; }

@media (max-width: 719px) {
  .sub { font-size: 1rem; margin-bottom: 1.75rem; }
  .story .step { display: block; padding: 24px 0; }
  .story .step.hero { min-height: 0; padding: 14px 0 24px; }
  .h1 { line-height: 1.26; margin-bottom: .5em; }
  .tag .tape.s { right: -8px; }
  .snap { margin-top: 20px; }
  .snap .stage { --pw: min(300px, 78vw); }
  .step-copy p { font-size: 1rem; }
  .tag { padding: 12px 18px 11px; }
  .tag .t1 { font-size: 1rem; }

  /* 手机固定舞台：标题与下一动作在上，相纸固定在上半屏，说明从下面滑上来；滚动仍是原生滚动 */
  html.js-story .story { --mpw: min(300px, 78vw); --stageH: calc(var(--mpw) * 1.437 + 52px); grid-template-columns: minmax(0, 1fr); }
  html.js-story .story .step { display: block; }
  html.js-story .story .step.hero { grid-row: 1; min-height: 0; padding: 14px 0 8px; }
  html.js-story .stage-col { grid-column: 1; grid-row: 2 / 4; z-index: 2; pointer-events: none; }
  html.js-story .stage-sticky { top: 0; height: var(--stageH); background: var(--desk); }
  html.js-story .stage-sticky::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; background: linear-gradient(var(--desk), rgba(246, 242, 236, 0)); }
  html.js-story .live-stage { --pw: var(--mpw); }
  html.js-story .story .step[data-step="1"] { grid-row: 2; padding-top: calc(var(--stageH) + 20px); min-height: calc(var(--stageH) + 52vh); }
  html.js-story .story .step[data-step="2"] { grid-row: 3; min-height: 64vh; padding-top: 4px; }
  html.js-story .step:not(.hero) .step-copy { opacity: 1; }
}

/* ---------- 和谁拍：官方相框 ｜ 我做的（App 相框库的现用名称） ---------- */
.pick { padding: clamp(64px, 10vw, 140px) 0 clamp(48px, 7vw, 88px); }
.sec-h { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.3; margin: 0 0 .7em; }
.sec-h.small { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.pick-copy { display: grid; grid-template-columns: minmax(0, 5.3fr) minmax(0, 2.7fr); gap: 40px; margin-bottom: 26px; }
.pc h3 { margin: 0 0 .3em; font-size: 1.125rem; font-weight: 800; }
.pc p { margin: 0; color: var(--soft); max-width: 22em; }
.band { --cw: clamp(96px, 8.6vw, 124px); position: relative; margin: 0 calc(-1 * var(--gutter)); padding: 28px var(--gutter); background: var(--band); }
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: radial-gradient(circle at 9px 5px, #d9cfbf 3.2px, transparent 3.8px) repeat-x; background-size: 18px 10px; }
.band::before { top: 6px; }
.band::after { bottom: 6px; }
.band-track { display: flex; align-items: flex-start; gap: 22px; overflow-x: auto; padding: 14px 6px 6px; scrollbar-width: thin; }
.seg { flex: none; display: flex; flex-direction: column; gap: 10px; }
.seg-cells { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.seg-name { padding-left: 4px; font-family: var(--hand-sys); font-size: 1.0625rem; color: var(--accent); }
.seg-div { flex: none; align-self: stretch; width: 0; margin: 0 2px 30px; border-left: 1.5px dashed #c4b8a6; }
.band-note { margin: 10px 6px 0; font-size: .75rem; line-height: 1.5; color: #857c6c; }
.mini { position: relative; flex: none; width: var(--cw); padding: 5px 5px 0; background: var(--print); border-radius: 3px; transform: rotate(var(--t, 0deg)); box-shadow: 0 0 0 1px rgba(229, 222, 211, .8), 0 6px 12px -8px rgba(60, 40, 90, .35); }
.mcv { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background: radial-gradient(120% 120% at 70% 18%, #fff, var(--mist)); }
.mcv img, .mcv .art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mlip { display: block; height: 28px; padding: 0 4px; line-height: 28px; font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.make { flex: none; width: var(--cw); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.make-art { position: relative; width: 100%; aspect-ratio: 3 / 4.3; display: grid; place-items: center; border: 1.5px dashed #bfb2e8; border-radius: 6px; background: #f8f5fc; }
.make-art .pic { position: relative; width: 44%; aspect-ratio: 4 / 5; background: var(--print); border-radius: 3px; transform: rotate(-6deg); box-shadow: 0 0 0 1px var(--line), 0 3px 6px rgba(60, 40, 90, .15); }
.make-art .pic::before { content: ""; position: absolute; inset: 12% 12% 28%; background: linear-gradient(160deg, #fadbe4, #ece6ff); }
.make-art .plus { position: absolute; right: 15%; bottom: 17%; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 4px rgba(60, 40, 90, .3); }
.make-art .plus::before, .make-art .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: #fff; transform: translate(-50%, -50%); }
.make-art .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.make-word { font-family: var(--hand-sys); font-size: .9375rem; line-height: 1.3; color: var(--accent); text-align: center; }
/* 我做的：空白相纸四个相角 → 一张图走进来 → 条纹胶带贴上（App“我的私人相框”胶带） */
.mine .stripe { position: absolute; z-index: 2; left: 50%; top: -9px; width: 64px; height: 18px; margin-left: -32px; transform: rotate(-4deg); clip-path: var(--tape-clip); background: repeating-linear-gradient(135deg, rgba(206, 192, 250, .92) 0 6px, rgba(255, 253, 248, .95) 6px 12px); }
.mine .mcv { background: #fbf8f2; outline: 1.5px dashed #d8cebe; outline-offset: -7px; }
.mine .corner { position: absolute; width: 16%; aspect-ratio: 1; border: 2px solid #c4b8a6; }
.corner.a { left: 9%; top: 7%; border-right: 0; border-bottom: 0; }
.corner.b { right: 9%; top: 7%; border-left: 0; border-bottom: 0; }
.corner.c { left: 9%; bottom: 7%; border-right: 0; border-top: 0; }
.corner.d { right: 9%; bottom: 7%; border-left: 0; border-top: 0; }
.mine .card { position: absolute; left: 27%; top: 22%; width: 46%; aspect-ratio: 4 / 5; background: var(--print); border-radius: 3px; box-shadow: 0 0 0 1px var(--line), 0 4px 8px rgba(60, 40, 90, .2); opacity: 0; }
.mine .card::before { content: ""; position: absolute; inset: 12% 12% 28%; background: linear-gradient(160deg, #fadbe4, #ece6ff); }
.mine .mine-art { position: absolute; inset: 0; opacity: 0; }
.mine .mlip { opacity: 0; }
@keyframes cardIn { 0% { opacity: 0; transform: translate(-170%, 30%) rotate(-12deg); } 25% { opacity: 1; } 62% { opacity: 1; transform: translate(0, 0) rotate(-3deg); } 100% { opacity: 0; transform: translate(0, 0) rotate(-3deg) scale(.94); } }
html:is(.js-story, .static-story) .band:not(.in) .seg-cells > li { opacity: 0; transform: translateY(14px) rotate(var(--t, 0deg)); }
.band.in .seg-cells > li { transition: opacity 320ms calc(var(--i) * 50ms), transform 440ms var(--ease-back) calc(var(--i) * 50ms); }
.band.in .mine .card { animation: cardIn 1100ms var(--ease-out) 520ms both; }
.band.in .mine .mine-art { opacity: 1; transition: opacity 360ms 1120ms; }
.band.in .mine .corner { opacity: 0; transition: opacity 300ms 1120ms; }
.band.in .mine .mcv { outline-color: transparent; transition: outline-color 300ms 1120ms; }
.band.in .mine .mlip { opacity: 1; transition: opacity 300ms 1300ms; }
.band:not(.in) .mine .stripe { opacity: 0; transform: translateY(-18px) rotate(-14deg); }
.band.in .mine .stripe { transition: opacity 200ms 1400ms, transform 340ms var(--ease-back) 1400ms; }

@media (max-width: 719px) {
  .pick-copy { grid-template-columns: 1fr; gap: 16px; }
  .band-track { padding-right: 32px; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
}

/* ---------- 文件夹：服务说明的页签（App R7） ---------- */
.folder-sec { padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 72px); }
.folder { max-width: 900px; }
.tabs { position: relative; z-index: 2; display: flex; gap: 6px; overflow-x: auto; margin: 0 0 -1px; padding: 12px 4px 0 2px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 12px 12px 0 0; background: var(--tabpaper); color: var(--soft) !important; font-size: .9375rem; font-weight: 600; text-decoration: none; }
.tab:hover { background: #f4ecdf; color: var(--ink) !important; }
.tab.on { background: var(--print); color: var(--accent) !important; font-weight: 800; box-shadow: 0 -1px 0 rgba(229, 222, 211, .9), -1px 0 0 rgba(229, 222, 211, .7), 1px 0 0 rgba(229, 222, 211, .7); }
.tab.on::before { content: ""; position: absolute; left: 50%; top: -8px; width: 52px; height: 16px; margin-left: -26px; transform: rotate(-3deg); background: var(--tape); clip-path: var(--tape-clip); }
.sheet { position: relative; background: var(--print); border-radius: 0 14px 14px 14px; box-shadow: 0 0 0 1px rgba(229, 222, 211, .85), 0 18px 36px -24px rgba(60, 40, 90, .35); }
.folder-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px; padding: 30px 36px 32px; }
.folder-sheet h3 { margin: 0 0 .6em; font-size: 1rem; font-weight: 800; }
.folder-sheet p { margin: 0; }
.f-topics ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.f-topics a, .topics a.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--mist); color: var(--accent); font-weight: 600; text-decoration: none; }
.f-topics a:hover { background: #e2d9ff; }
@media (max-width: 719px) {
  .folder-sheet { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; }
  .sheet { margin-left: -12px; margin-right: -12px; }
  .tabs { margin-left: -12px; margin-right: -12px; padding-left: 12px; }
  .tab { padding: 0 16px; }
}

/* ---------- 页脚 ---------- */
.foot { margin-top: 24px; padding-top: 28px; padding-bottom: 48px; font-size: .875rem; color: var(--soft); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.mark.small { font-size: 1.125rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 2px; margin: 6px 0; }
.foot-copy { margin: 8px 0 0; font-size: .8125rem; }

/* ================================================================
   文件夹里的页面：帮助与联系、隐私政策、服务条款
   ================================================================ */
.docmain { padding-top: 4px; padding-bottom: 40px; }
.doc-h1 { margin: 0 0 .3em; font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 800; line-height: 1.3; }
.lead { margin: 0 0 1.4em; color: var(--soft); }
.sample-flag { position: relative; margin: 0 0 28px; padding: 12px 16px 12px 52px; border: 1.5px dashed #c9bfae; border-radius: 8px; color: #6d6555; font-size: .875rem; line-height: 1.6; background: repeating-linear-gradient(-45deg, rgba(201, 191, 174, .16) 0 8px, transparent 8px 16px), #fbf7ef; }
.sample-flag::before { content: "说明"; position: absolute; left: 12px; top: 13px; padding: 0 5px; border-radius: 4px; background: #a49a88; color: #fff; font-size: .6875rem; font-weight: 800; line-height: 1.7; }

/* 帮助与联系 */
.sup { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 52px; padding: 40px 44px 48px; }
.sup-side { position: sticky; top: 24px; align-self: start; }
.note { position: relative; margin: 6px 0 26px; padding: 22px 20px 16px; background: var(--note); border-radius: 6px; transform: rotate(-.6deg); box-shadow: 0 0 0 1px rgba(229, 222, 211, .9), 0 10px 20px -14px rgba(60, 40, 90, .35); }
#contact { scroll-margin-top: 24px; }
.note h2 { margin: 0 0 .5em; font-size: 1.125rem; font-weight: 800; }
.note dl { margin: 0; }
.note dl > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px dashed var(--line); }
.note dt { font-size: .8125rem; color: var(--soft); }
.note dd { margin: 0; }
.tip { margin: .8em 0 0; font-size: .8125rem; line-height: 1.6; color: var(--soft); }
.topics { display: flex; flex-direction: column; }
.topics-h { margin: 0 0 4px; font-size: .8125rem; font-weight: 600; color: var(--soft); }
.topics a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--ink); font-weight: 600; text-decoration: none; }
.topics a:hover { background: var(--mist); color: var(--accent); }
.faq { padding: 4px 0 28px; scroll-margin-top: 24px; }
.faq h2 { margin: 0 0 .4em; font-size: 1.375rem; font-weight: 800; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 4px; list-style: none; cursor: pointer; font-size: 1.0625rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.chev { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--mist); transition: transform 220ms var(--ease-out); }
.chev::before { content: ""; position: absolute; left: 50%; top: 44%; width: 8px; height: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translate(-50%, -50%) rotate(45deg); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq details p { max-width: 38em; margin: 0 4px 18px; line-height: 1.85; color: var(--soft); }
.acct { margin-top: 12px; padding: 24px 24px 18px; border-radius: 12px; background: #f8f5fc; box-shadow: inset 0 0 0 1px #e6defa; }
.acct-lead { margin: 0 0 12px; color: var(--soft); }
.acct-row { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 6px 16px; align-items: baseline; padding: 12px 0; border-top: 1px dashed #ddd3f3; }
.acct-k { font-weight: 600; }
.gone { max-width: 680px; padding: 56px 44px; }

/* Published documents reuse help-page typography and keep every paragraph open. */
.policy-section p { max-width: 38em; margin: 0 4px 18px; line-height: 1.85; color: var(--soft); }
.policy-section + .policy-section { border-top: 1px solid var(--line); padding-top: 24px; }
.policy-section h2:hover .anchor { opacity: 1; }

/* 长文（隐私政策／服务条款共用） */
.legal .tabs { margin-left: 290px; }
.docgrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
.toc-col { position: sticky; top: 24px; }
.toc { padding: 14px 8px 10px; border-radius: 10px; background: var(--note); box-shadow: 0 0 0 1px rgba(229, 222, 211, .9); }
.toc-h { margin: 0 10px 4px; font-size: .8125rem; font-weight: 700; color: var(--soft); }
.toc ol, .tocsheet ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border-radius: 8px; color: var(--ink); font-size: .9375rem; line-height: 1.4; text-decoration: none; }
.toc a:hover { background: rgba(236, 230, 255, .7); }
.toc .n, .tocsheet .n { flex: none; width: 1.4em; font-size: .8125rem; color: var(--soft); }
.toc a.cur { color: var(--accent); font-weight: 700; }
.toc a.cur .t { background: linear-gradient(transparent 60%, rgba(206, 192, 250, .7) 60%, rgba(206, 192, 250, .7) 90%, transparent 90%); }
.doc-sheet { padding: 44px clamp(24px, 5vw, 64px) 56px; }
.doc-head { margin-bottom: 18px; }
.doc-meta { display: flex; flex-wrap: wrap; margin: 0; }
.dsec { max-width: 38em; font-size: 1.0625rem; scroll-margin-top: 24px; }
.dsec + .dsec { margin-top: 2.6em; }
.dsec h2 { margin: 0 0 .7em; font-size: 1.3125rem; font-weight: 800; line-height: 1.45; }
.dsec h2 .n { color: var(--accent); }
.anchor { display: inline-block; min-width: 1.6em; margin-left: .3em; color: var(--accent-l) !important; font-weight: 600; text-decoration: none; opacity: 0; }
.dsec h2:hover .anchor, .anchor:focus-visible { opacity: 1; }
.dsec p { margin: 0 0 1em; line-height: 1.9; line-break: strict; }
.dsec strong { font-weight: 800; }
.dsec ul { margin: 0 0 1em; padding-left: 1.6em; }
.dsec li { margin: .25em 0; padding-left: .2em; line-height: 1.85; }
.dsec li::marker { color: var(--accent-l); }
.dsec .slots { display: flex; flex-wrap: wrap; }
.tocbar { display: none; }
.tocbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--mist); color: var(--accent); font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; }
.lines { position: relative; width: 14px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.lines::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
.toccur { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .875rem; color: var(--soft); }
.tocsheet { inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 78vh; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-radius: 18px 18px 0 0; background: var(--print); color: var(--ink); box-shadow: 0 -10px 40px rgba(36, 32, 43, .25); }
.tocsheet::backdrop { background: rgba(36, 32, 43, .35); }
.tocsheet-h { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 20px; background: var(--print); border-bottom: 1px solid var(--line); }
.tocsheet-h p { margin: 0; font-weight: 800; }
.tocclose { min-width: 64px; min-height: 44px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.tocsheet ol { padding: 8px 8px 24px; }
.tocsheet a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.tocsheet a.cur { background: var(--mist); color: var(--accent); font-weight: 700; }
.totop { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; display: grid; place-items: center; width: 48px; height: 48px; opacity: 0; pointer-events: none; transition: opacity 200ms; }
.totop.show { opacity: 1; pointer-events: auto; }
.totop .stamp { width: 40px; height: 40px; }

@media (max-width: 899px) {
  .sup { grid-template-columns: 1fr; gap: 6px; padding: 28px 20px 36px; }
  .sup-side { position: static; }
  .topics { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
  .topics-h { flex-basis: 100%; }
  .topics a { padding: 0 14px; border-radius: 999px; background: var(--mist); color: var(--accent); }
  .acct { padding: 20px 16px 14px; }
  .acct-row { grid-template-columns: 1fr; }
  .legal .tabs { margin-left: -12px; }
  .docgrid { grid-template-columns: minmax(0, 1fr); }
  .toc-col { display: none; }
  .doc-sheet { padding: 0 20px 40px; }
  .tocbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0 -20px 22px; padding: 6px 12px; border-bottom: 1px solid var(--line); border-radius: 0 12px 0 0; background: rgba(255, 253, 248, .97); }
  .doc-head { padding-top: 4px; }
  .dsec { font-size: 1.0625rem; scroll-margin-top: 72px; }
  .faq { scroll-margin-top: 12px; }
  .gone { padding: 36px 20px; }
}

/* ---------- 未发布：只有一张相纸，没有任何链接 ---------- */
.unpub { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; text-align: center; }
.unpub .mark { font-size: 1.25rem; margin-bottom: 4px; }
.unpub-stage .stage { --pw: min(240px, 62vw); }
.unpub-h { margin: 6px 0 0; font-size: 1.5rem; font-weight: 800; }
.unpub-p { margin: 0; color: var(--soft); }

@media print {
  .top, .tabs, .toc-col, .tocbar, .totop, .foot-links, .ribbon { display: none !important; }
  body.site { background: #fff; }
  .sheet { box-shadow: none; }
  .dsec { max-width: none; }
}