/* 官网首屏之下的功能叙事（B 第 3 版）：钉住的手机 = App 真界面，四章 玩图 / 连图 / 相机 / 社区。原型史见 docs/site/style-frames/。 */
html:has(body.has-story), body.has-story { height: auto !important; overflow-y: visible !important; overflow-x: clip; touch-action: pan-y !important; }
.has-story .cta, .has-story #code, .has-story .hint, .has-story .today { transition: opacity .3s; }
.scrolled .cta, .scrolled #code, .scrolled .hint, .scrolled .today { opacity: 0; pointer-events: none; }
.story { position: relative; z-index: 3; color: #fff; font-family: 'Brand', system-ui; pointer-events: none; }
.story > :not(.spacer) { pointer-events: auto; } /* 首屏那段空白不挡字墙上的按钮（以前 main 整块接走点击，首屏四个按钮在手机上点不动） */
.story .spacer { height: 100svh; }
.story .big { white-space: nowrap; font: 400 min(21vw, 160px)/.9 'Brand'; letter-spacing: -.02em; color: var(--ink); margin: 0; text-shadow: 0 0 40px color-mix(in srgb, var(--ink) 35%, transparent); }
.story .say { font: 22px/1.25 'Brand'; margin: 18px 0 0; }

/* 照片：底图 + 效果层 + 抠图人 */
.ph { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph .fx { position: absolute; inset: 0; transition: opacity .2s; }
.ph .cut { z-index: 2; transition: filter .15s; }
.ph .fx.grain { mix-blend-mode: overlay; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.star { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(0); transition: transform .28s cubic-bezier(.3, 1.8, .5, 1); filter: drop-shadow(2px 4px 3px rgba(0,0,0,.45)); }
.star::before { content: ''; position: absolute; inset: 0; background: #F4F1EA; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.star.on { transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
.flip { position: relative; aspect-ratio: 3/4; }
.flip > .ph { position: absolute; inset: 0; transition: none; }
.scrl { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.scrl .cell { aspect-ratio: 3/5; overflow: hidden; }
.scrl .cell img { width: 100%; height: 100%; object-fit: cover; }
.scrl svg, .thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scrl path, .thread path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.code6 { display: grid; grid-template-columns: repeat(6, 1fr); font: 800 min(15vw, 90px)/1 ui-monospace, Menlo, monospace; color: color-mix(in srgb, var(--ink) 40%, transparent); margin-bottom: 14px; }
.code6 span { text-align: center; } .code6 span.on { color: var(--ink); }

/* B 优化版：取景器 · 功能巡礼 */
.v-b3 .pin { position: relative; }
.v-b3 .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; --ink: #160F12; --in: 0; }
.v-b3 .wash { position: absolute; inset: 0; background: #FFD23F; }
.v-b3 .wash.next { clip-path: circle(0 at 50% 55%); }
.v-b3 .wash.next.go { animation: wash .65s cubic-bezier(.76,0,.24,1) forwards; }
.v-b3 .grain { position: absolute; inset: 0; opacity: .2; mix-blend-mode: overlay; pointer-events: none; z-index: 6; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.v-b3 .stage .big { position: absolute; top: 9svh; left: -2vw; right: -2vw; text-align: center; white-space: nowrap; font: 400 min(26vw, 200px)/.9 'Brand'; letter-spacing: -.02em; color: var(--ink); margin: 0; z-index: 1; opacity: var(--in); }
.v-b3 .phone { position: absolute; left: 50%; top: 24svh; height: 58svh; aspect-ratio: 1206/2622; translate: -50% 0; z-index: 2; border-radius: 13% / 6%; background: #0b0b0c; padding: 1.8%; box-shadow: 0 0 0 1.5px #3a3a3e, 0 40px 70px -30px rgba(0,0,0,.65); rotate: calc(-2deg + var(--sw, 0deg) * -.25); transform: translateY(calc((1 - var(--in)) * 40svh)); }
.v-b3 .screen { position: relative; width: 100%; height: 100%; border-radius: 11% / 5.2%; overflow: hidden; background: #141414; }
.v-b3 .sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 9; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%) -160% 0/250% 100% no-repeat; mix-blend-mode: screen; opacity: 0; }
.v-b3 .phone.sweep .sheen { animation: sheen 1.3s cubic-bezier(.28,.11,.32,1); }
.v-b3 .ui { position: absolute; left: 0; width: 100%; pointer-events: none; }
.v-b3 .ui.top { top: 0; } .v-b3 .ui.cans { top: 71.7%; } .v-b3 .ui.shutter { top: 85.1%; }
.v-b3 .canhit { position: absolute; left: 0; right: 0; top: 71.7%; height: 9.5%; cursor: pointer; z-index: 3; }
.v-b3 .canpick { position: absolute; top: 81.6%; width: 6%; height: .8%; margin-left: -3%; background: #FFD23F; border-radius: 9px; transition: left .35s cubic-bezier(.3,1.5,.5,1); z-index: 3; }
.v-b3 .shut { position: absolute; left: 39%; top: 85.5%; width: 22%; height: 10%; background: transparent; border: 0; cursor: pointer; z-index: 3; }
.v-b3 .photo { position: absolute; left: 9.4%; top: 13.8%; width: 81.2%; height: 49.1%; overflow: hidden; background: #fff; touch-action: pan-y; cursor: pointer; }
.v-b3 .pane { position: absolute; inset: 0; transition: filter .35s, padding .35s; background: var(--pg, #fff); }
.v-b3 .pane > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-b3 .pane .bg { transition: opacity .35s, filter .35s; } .v-b3 .pane .cut { z-index: 3; transition: filter .3s, transform .35s; } .v-b3 .pane .fx { z-index: 2; }
.v-b3 .pane .twin { display: none; }
.v-b3 .pane .star::before { background: #FF2E93; }
.v-b3 .pane .star { filter: drop-shadow(1.5px 1.5px 0 #fff); }
/* 胶片 */
.v-b3 [data-look=fxn] { filter: saturate(1.35) contrast(1.12) hue-rotate(-10deg); }
.v-b3 [data-look=nite] { filter: brightness(1.12) contrast(1.4) saturate(.9); }
.v-b3 [data-look=nite] .fx { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.28), transparent 45%, rgba(0,0,0,.55)); z-index: 4; }
.v-b3 [data-look=ccd] { filter: saturate(.85) brightness(1.08) hue-rotate(10deg) contrast(1.05); }
.v-b3 [data-look=ccd] .fx::after { content: "'25 10 25"; position: absolute; right: 6%; bottom: 5%; font: 700 11px ui-monospace, Menlo, monospace; color: #FF8A00; text-shadow: 0 0 4px #FF5A00; }
.v-b3 [data-look=ccd] .fx { z-index: 4; }
.v-b3 [data-look=cls] .bg, .v-b3 [data-look=keep] .bg { filter: grayscale(1) contrast(1.35) brightness(.9); }
.v-b3 [data-look=inst] { padding: 5% 5% 18%; filter: sepia(.18) saturate(.92) brightness(1.04); }
.v-b3 [data-look=inst] > * { position: absolute; inset: 5% 5% 18%; width: 90%; height: 77%; }
.v-b3 [data-look=line], .v-b3 [data-look=twin] { --pg: #FF6A00; }
.v-b3 [data-look=twin] { --pg: #B9A7FF; }
.v-b3 [data-look=line] .bg, .v-b3 [data-look=twin] .bg { opacity: 0; }
.v-b3 [data-look=line] .cut { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); }
.v-b3 [data-look=twin] .twin { display: block; transform: scaleX(-1) translateX(-22%); z-index: 2; }
.v-b3 [data-look=twin] .cut:not(.twin) { transform: translateX(-20%); }
.v-b3 [data-look=twin] .fx { background: radial-gradient(circle at 20% 25%, #fff 0 2px, transparent 3px) 0 0/40px 44px; }
.v-b3 .tag { position: absolute; left: 4%; top: 4%; z-index: 5; font: 13px 'Brand'; background: #fff; color: #160F12; padding: 2px 8px; transform: rotate(-2deg); }
.v-b3 .tag:empty { display: none; }
/* 连图 */
.v-b3 .scrl3 { position: absolute; inset: 0; display: none; background: #fff; }
.v-b3 [data-ch=scrl] .scrl3 { display: block; } .v-b3 [data-ch=scrl] .pane { display: none; }
.v-b3 .scrl3 .track { position: absolute; top: 0; bottom: 0; left: 0; width: 133.33%; display: flex; gap: 2px; transform: translateX(calc(var(--pan, 0) * -25%)); }
.v-b3 .scrl3 .cell { flex: 1; overflow: hidden; } .v-b3 .scrl3 .cell img { width: 100%; height: 100%; object-fit: cover; }
.v-b3 .scrl3 svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-b3 .scrl3 path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pan, 0)); vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
/* 实况 */
.v-b3 [data-ch=live] .photo::after { content: 'LIVE'; position: absolute; right: 4%; top: 4%; z-index: 6; font: 700 10px ui-monospace, Menlo, monospace; color: #fff; background: rgba(0,0,0,.45); padding: 2px 6px 2px 16px; border-radius: 9px; }
.v-b3 [data-ch=live] .photo::before { content: ''; position: absolute; right: calc(4% + 32px); top: calc(4% + 6px); width: 6px; height: 6px; margin-right: -24px; border-radius: 50%; background: #FFD23F; z-index: 7; animation: tapdot 1s infinite; }
/* 同款码 */
.v-b3 .photo .code6 { display: none; position: absolute; left: 5%; right: 5%; bottom: 5%; margin: 0; z-index: 6; font-size: min(6.5vw, 30px); background: #160F12; padding: 5px 0; color: rgba(255,255,255,.45); }
.v-b3 [data-ch=code] .photo .code6 { display: grid; } .v-b3 .photo .code6 span.on { color: #FFD23F; }
/* 社区 */
.v-b3 .wall { position: absolute; left: 0; right: 0; top: 12.6%; bottom: 0; background: #F4F1EA; z-index: 8; display: none; overflow: hidden; padding: 0 6%; }
.v-b3 [data-ch=comm] .wall { display: block; }
.v-b3 .wtop { font: 22px 'Brand'; color: #160F12; padding: 4% 0; display: flex; justify-content: space-between; align-items: center; }
.v-b3 .wtop em { font: 12px 'Brand'; font-style: normal; background: #FF2E93; color: #fff; padding: 2px 8px; transform: rotate(3deg); }
.v-b3 .wcols { display: flex; gap: 5%; transform: translateY(calc(var(--wp, 0) * -45%)); }
.v-b3 .wcol { flex: 1; display: grid; gap: 8px; } .v-b3 .wcol + .wcol { margin-top: 18%; }
.v-b3 .wall figure { margin: 0; background: #fff; padding: 4px 4px 0; box-shadow: 0 6px 10px -6px rgba(0,0,0,.4); }
.v-b3 .wall figure img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.v-b3 .wall figcaption { display: flex; justify-content: space-between; font: 9px ui-monospace, Menlo, monospace; color: #160F12; padding: 4px 1px; }
.v-b3 .wall figcaption b { font: 9px 'Brand'; background: #FFD23F; padding: 0 4px; }
/* 字和手势提示 */
.v-b3 .stage .say { position: absolute; bottom: 5svh; left: 6vw; right: 6vw; text-align: center; color: var(--ink); font-size: 20px; margin: 0; opacity: var(--in); z-index: 3; }
.v-b3 .b3try { white-space: nowrap; position: absolute; z-index: 4; left: 50%; bottom: calc(5svh + 62px); translate: -50% 0; rotate: -3deg; margin: 0; font: 16px 'Brand'; background: #160F12; color: #fff; padding: 4px 12px 4px 28px; opacity: var(--in); }
.v-b3 .b3try i { position: absolute; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #FFD23F; animation: tapdot 1.2s infinite; }
.v-b3 .rise { animation: rise .5s cubic-bezier(.22,1,.36,1); }
.v-b3 .ticks { position: absolute; right: 12px; top: 50%; translate: 0 -50%; display: grid; gap: 7px; z-index: 4; opacity: var(--in); }
.v-b3 .ticks i { width: 5px; height: 20px; background: color-mix(in srgb, var(--ink) 25%, transparent); } .v-b3 .ticks i.on { background: var(--ink); }
.v-b3 .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 10; }
.v-b3 .flash.go { animation: b3flash .3s ease-out; } @keyframes b3flash { 0% { opacity: var(--a, .85); } 100% { opacity: 0; } }
/* 顶上小衣架 */
.v-b3 .cordtop { position: absolute; top: calc(env(safe-area-inset-top) + 4px); left: 0; right: 0; height: 60px; z-index: 5; opacity: var(--in); pointer-events: none; }
.v-b3 .cordtop svg { position: absolute; inset: 0 0 auto; width: 100%; height: 36px; }
.v-b3 .cordtop path { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .6; }
.v-b3 .mini { position: absolute; top: 8px; left: 6vw; right: 6vw; display: flex; gap: 3vw; justify-content: center; }
.v-b3 .mpeg { position: relative; width: 8vw; max-width: 40px; transform-origin: 50% 0; rotate: calc(var(--sw, 0deg) + (var(--i) - 2.5) * 4deg); translate: 0 calc((2.5 - (var(--i) - 2.5) * (var(--i) - 2.5) * .5) * 2px); opacity: 0; }
.v-b3 .mpeg.in { opacity: 1; animation: drop .5s cubic-bezier(.3,1.6,.5,1); }
.v-b3 .mpeg img { width: 100%; aspect-ratio: 3/4; object-fit: cover; outline: 2px solid #fff; display: block; }
.v-b3 .mpeg em { display: none; }
/* 结尾衣架：空夹子留给朋友 */
.b3foot .peg.friend { display: grid; place-items: center; }
.b3foot .peg.friend::after { content: ''; display: block; width: 100%; aspect-ratio: 3/4; border: 2px dashed #160F12; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(22,15,18,.06) 6px 12px); }
.b3foot .peg.friend span { position: absolute; top: 40%; left: -6px; right: -6px; text-align: center; font: 13px/1.2 'Brand'; color: #160F12; z-index: 1; }
.b3foot .pegs { flex-wrap: nowrap; }
.b3foot .peg { flex-basis: 12.5vw; }
.b3foot .tags { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.b3foot .tags span { position: relative; font: 15px 'Brand'; background: #fff; color: #160F12; padding: 6px 12px 6px 22px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); transform: rotate(-3deg); box-shadow: 0 4px 8px -4px rgba(0,0,0,.4); }
.b3foot .tags span + span { transform: rotate(3deg); background: #FFD23F; }
.b3foot .tags i { position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #F4F1EA; box-shadow: inset 0 0 0 1.5px #160F12; }
@media (prefers-reduced-motion: reduce) { .v-b3 .rise, .v-b3 .phone.sweep .sheen, .v-b3 .wash.next.go, .v-b3 .flash.go { animation-duration: .01s; } }
.v-b3 .stage .say, .v-b3 .b3try, .v-b3 .stage .big { pointer-events: none; }
.b3foot .big { font-size: min(17vw, 120px); white-space: nowrap; }
.b3foot .say { position: static; }
.b3foot .pegs { gap: 1.6vw; padding: 0 2vw; }
.b3foot .peg { flex-basis: 11.2vw; }
.b3foot .peg.friend span { font-size: 12px; top: 30%; }
.v-b3 img { -webkit-user-drag: none; user-select: none; }

/* B 优化版 v2：每章一屏真截图 */
.v-b3 .scr { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; pointer-events: none; overflow: hidden; background: #EFEBE3; }
.v-b3 .scr.on { opacity: 1; pointer-events: auto; }
.v-b3 .shotimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-b3 .live-box { position: absolute; overflow: hidden; touch-action: pan-y; cursor: grab; z-index: 2; }
.v-b3 .live-box .pane { position: absolute; inset: 0; }
.v-b3 .etag { position: absolute; z-index: 3; text-align: center; font: 600 13px/1.6 'Brand'; color: #160F12; background: #E9F2C4; transform: rotate(-1deg); pointer-events: none; }
.v-b3 .hot { position: absolute; background: transparent; border: 0; padding: 0; cursor: pointer; z-index: 4; }
.v-b3 .canpick { top: 81%; }
.v-b3 .scr-scrl { touch-action: pan-y; cursor: grab; }
.v-b3 .scr-scrl .shotimg { transform: translateX(var(--dx, 0%)); transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.v-b3 .thread { position: absolute; z-index: 2; pointer-events: none; overflow: visible; }
.v-b3 .thread path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--line, 0)); vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.v-b3 .scr-desk { touch-action: pan-y; cursor: grab; }
.v-b3 .scr-desk .shotimg { transform: scale(1.22) translate(calc(var(--dd, 0%) + (var(--dp, 0) - .5) * -10%), calc((var(--dp, 0) - .5) * -6%)); transition: transform .5s cubic-bezier(.3,1.2,.5,1); }
.v-b3 .scr-comm { background: #F4F1EA; }
.v-b3 .scr-comm .wall { position: absolute; inset: 0; display: block; top: 0; padding: 14% 6% 0; z-index: auto; }
.v-b3 .scr-comm figure { cursor: pointer; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.v-b3 .scr-comm figure.picked { transform: scale(1.08) rotate(-3deg); outline: 3px solid #FFD23F; }
.v-b3 .scr-comm .paste { position: absolute; left: 6%; right: 6%; bottom: 4%; background: #160F12; padding: 6px 8px 8px; z-index: 3; transform: rotate(-1.5deg); }
.v-b3 .scr-comm .paste span { font: 11px 'Brand'; color: #F4F1EA; }
.v-b3 .scr-comm .code6 { display: grid; margin: 2px 0 0; font-size: min(6vw, 26px); color: rgba(255,255,255,.4); }
.v-b3 .scr-comm .code6 span.on { color: #FFD23F; }
.v-b3 .chno { position: absolute; top: calc(9svh - 22px); left: 0; right: 0; text-align: center; margin: 0; font: 600 12px ui-monospace, Menlo, monospace; letter-spacing: .2em; color: var(--ink); opacity: calc(var(--in) * .75); z-index: 1; }
.v-b3 .mpeg { border: 0; padding: 0; background: none; cursor: pointer; pointer-events: auto; }
.v-b3 .cordtop { pointer-events: none; } .v-b3 .mini { pointer-events: auto; }
.v-b3 .holes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.v-b3 .hole { position: absolute; width: var(--s); aspect-ratio: 1; translate: -50% -50%; rotate: var(--r); background: #F4F1EA; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: hole 2.6s cubic-bezier(.3,1.8,.5,1) forwards; }
@keyframes hole { 0% { scale: 0; } 12% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; scale: .9; } }
.v-b3 .stage.idle .phone { animation: idlewig 2.8s ease-in-out infinite; } @keyframes idlewig { 0%, 70%, 100% { rotate: -2deg; } 78% { rotate: -3.5deg; } 86% { rotate: -.5deg; } 93% { rotate: -2.6deg; } }
.v-b3 .stage.idle .b3try { animation: idlehop 1.4s ease-in-out infinite; } @keyframes idlehop { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -6px; } }

/* B 第 3 版：运镜 + 连图展开 */
.v-b4 .cam3d { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 40%; pointer-events: none; z-index: 2; }
.v-b4 .cam3d .phone { pointer-events: auto; transform-style: preserve-3d; will-change: transform; transform-origin: 50% 70%; }
.v-b4 .etag { left: 28%; top: 15.2%; width: 44%; }
.v-b4 .ecat { position: absolute; left: 30%; top: 2.9%; width: 40%; text-align: center; font: 600 15px/1.4 'Brand'; color: #160F12; background: #F4F1EA; z-index: 3; pointer-events: none; }
.v-b4 .spread { position: absolute; left: 4vw; right: 4vw; top: 22svh; height: 50svh; z-index: 3; pointer-events: none; opacity: var(--spread, 0); transform: translateY(calc((1 - var(--spread, 0)) * 18svh)) scale(calc(.8 + .2 * var(--spread, 0))); overflow: visible; }
.v-b4 [data-ch=scrl] .spread { pointer-events: auto; }
.v-b4 .plats { position: absolute; left: 0; right: 0; top: calc(22svh + 52svh); z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 6px; padding: 0 5vw; opacity: var(--spread, 0); pointer-events: none; }
.v-b4 [data-ch=scrl] .plats { pointer-events: auto; }
.v-b4 .plats button { font: 14px 'Brand'; border: 0; padding: 5px 10px; background: rgba(31,58,0,.12); color: #1F3A00; cursor: pointer; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.v-b4 .plats button { position: relative; }
.v-b4 .plats button::after { content: ''; position: absolute; inset: -6px -3px; } /* 看着几乎不变，点按区加高 12px；行距同步加到 12px，上下两行不抢 */
.v-b4 .plats button.on { background: #1F3A00; color: #B8F03C; transform: rotate(-3deg) scale(1.08); }
.v-b4 .b4end { position: relative; background: #F4F1EA; color: #160F12; padding: 70px 0 calc(env(safe-area-inset-bottom) + 60px); text-align: center; overflow: hidden; --ink: #160F12; }
.v-b4 .b4end .eyebrow { font: 18px 'Brand'; margin: 0 0 4px; }
.v-b4 .b4end .big { font-size: min(16vw, 110px); white-space: nowrap; }
.v-b4 .b4end .mcode { font: 800 30px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; margin: 6px 0 18px; }
.v-b4 .b4end .say { position: static; font-size: 18px; }
.v-b4 .b4end .tags { display: flex; gap: 10px; justify-content: center; margin-top: 14px; font: 15px 'Brand'; }
.v-b4 .b4end .tags span { background: #160F12; color: #F4F1EA; padding: 5px 10px; transform: rotate(-2deg); } .v-b4 .b4end .tags span + span { background: #FF2E93; transform: rotate(2deg); }
@keyframes wash { to { clip-path: circle(140% at 50% 55%); } }
@keyframes sheen { 0% { opacity: 1; background-position: -160% 0; } 100% { opacity: 1; background-position: 160% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(12px); } }
@keyframes tapdot { 0%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1.15); opacity: 1; } }

/* 大字按字数缩放：方块字一字一格，拉丁字母约半格（--len、--fw 由脚本给） */
.v-b4 .stage .big { font-size: min(26vw, calc(88vw / (var(--len, 2) * var(--fw, 1))), 200px); }
.v-b4 .b4end .btn { display: inline-flex; width: auto; }
.v-b4 .b4end .big { font-size: min(16vw, 110px); white-space: normal; line-height: 1; padding: 0 5vw; }

/* 电脑端：左边字、右边手机；连图展开在右侧大区域 */
@media (min-width: 900px) {
  .v-b4 .copy { position: absolute; left: 7vw; top: 0; bottom: 0; width: 38vw; display: flex; flex-direction: column; justify-content: center; z-index: 3; pointer-events: none; }
  .v-b4 .copy > * { position: static !important; text-align: left; margin: 0; left: auto; right: auto; translate: none; }
  .v-b4 .stage .big { font-size: min(10vw, calc(36vw / (var(--len, 2) * var(--fw, 1))), 168px); white-space: nowrap; }
  .v-b4 .stage .say { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.35; margin-top: 18px; }
  .v-b4 .chno { margin-bottom: 10px; }
  .v-b4 .b3try { align-self: flex-start; margin-top: 26px; padding-left: 30px; }
  .v-b4 .stage.idle .b3try { animation-name: idlehop2; } @keyframes idlehop2 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
  .v-b4 .cam3d .phone { left: 68%; top: 8svh; height: 84svh; }
  .v-b4 .cam3d { perspective-origin: 68% 45%; }
  .v-b4 .spread { left: 46vw; right: 4vw; top: 12svh; height: 64svh; }
  .v-b4 .plats { left: 46vw; right: 4vw; top: 80svh; padding: 0; }
  .v-b4 .plats button { font-size: 16px; padding: 7px 14px; }
  .v-b4 .b4end .say { font-size: 22px; }
}
/* 朋友落地的结尾：朋友已有的几格 + 你这一格 */
@keyframes youp { 50% { background-color: rgba(255,46,147,.18); } }
/* 连图 · 平台仿真屏：照 App CarouselStudio 的 mock，故意用平台系统样式（这就是发出去会长的样子）；屏本身是一张歪放的「截图」 */
.v-b4 .spread:not([data-plat=canvas]) .cell { box-shadow: none; }
.v-b4 .ch { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s; color: #111; font: 400 3.9cqw/1.25 -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans', 'Apple SD Gothic Neo', system-ui, sans-serif; text-align: left; }
.v-b4 .spread[data-plat=xhs] .ch-xhs, .v-b4 .spread[data-plat=instagram] .ch-instagram, .v-b4 .spread[data-plat=douyin] .ch-douyin, .v-b4 .spread[data-plat=wechat] .ch-wechat, .v-b4 .spread[data-plat=grid] .ch-grid { opacity: 1; transition-delay: .25s; }
.v-b4 .ch > div { position: absolute; }
.v-b4 .ch .ic { width: 5.6cqw; height: 5.6cqw; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v-b4 .ch .ic.f { fill: currentColor; stroke-width: 1; }
.v-b4 .ch .row { display: flex; align-items: center; gap: 2.6cqw; right: 3%; }
.v-b4 .ch .sp { flex: 1; }
.v-b4 .ch .av { display: block; width: 7cqw; height: 7cqw; flex: none; border-radius: 50%; background: #ddd url(/assets/img/demo-3.webp) 47% 26% / 340% no-repeat; }
.v-b4 .ch .av.ring { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #e1306c; }
.v-b4 .ch .av.w { width: 10cqw; height: 10cqw; box-shadow: 0 0 0 1.5px #fff; margin-bottom: 2cqw; }
.v-b4 .ch .av.big { width: 21cqw; height: 21cqw; }
.v-b4 .ch .sq { width: 11cqw; height: 11cqw; border-radius: 1cqw; background: #ddd url(/assets/img/demo-3.webp) 47% 26% / 340% no-repeat; }
.v-b4 .ch .sq.ghost, .v-b4 .ch .gl, .v-b4 .ch .gt { background: #eee; }
.v-b4 .ch .gl { height: 2.2%; } .v-b4 .ch .gl.b { background: #f2f2f2; }
.v-b4 .ch .row.top b { font-weight: 600; font-size: 3.7cqw; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-b4 .ch .fol { flex: none; color: #ff2442; border: 1px solid #ff2442; border-radius: 99px; padding: .4cqw 3cqw; font-size: 3.4cqw; }
.v-b4 .ch .cntw { right: 3%; } .v-b4 .ch .cntw.l { left: 3%; }
.v-b4 .ch .cnt { display: block; margin-top: 2.5cqw; background: rgba(0,0,0,.45); color: #fff; font-size: 3.1cqw; padding: .6cqw 2.2cqw; border-radius: 99px; }
.v-b4 .ch .dotw { left: 0; right: 0; display: flex; justify-content: center; }
.v-b4 .ch .dt { display: flex; gap: 1.2cqw; }
.v-b4 .ch .dt i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: rgba(0,0,0,.2); transition: background .2s, width .2s; }
.v-b4 .ch .red .dt i.on { background: #ff2442; } .v-b4 .ch .blue .dt i.on { background: #0095f6; }
.v-b4 .ch .pill .dt i { width: 1.6cqw; height: 1cqw; border-radius: 99px; background: rgba(255,255,255,.4); } .v-b4 .ch .pill .dt i.on { width: 4.2cqw; background: #fff; }
.v-b4 .ch .ttl { right: 5%; font-weight: 600; font-size: 4.2cqw; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v-b4 .ch .ttl.n { font-weight: 400; font-size: 3.7cqw; } .v-b4 .ch .ttl.n b { font-weight: 600; }
.v-b4 .ch .tg { right: 4%; font-size: 3.4cqw; color: #13386c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 1cqw; }
.v-b4 .ch .tg.gray { color: #8e8e8e; font-size: 3cqw; } .v-b4 .ch .tg.dark { color: #111; right: 4%; }
.v-b4 .ch .w { color: #fff; } .v-b4 .ch .tg.w .ic { width: 3.6cqw; height: 3.6cqw; }
.v-b4 .ch .inp { flex: 1; background: #f2f2f2; color: #999; border-radius: 99px; padding: 1.6cqw 3cqw; font-size: 3.2cqw; white-space: nowrap; overflow: hidden; }
.v-b4 .ch .side { display: flex; flex-direction: column; align-items: center; gap: 3cqw; color: #fff; transform: translateX(-50%); }
.v-b4 .ch .side span { display: flex; flex-direction: column; align-items: center; } .v-b4 .ch .side .ic { width: 7cqw; height: 7cqw; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.v-b4 .ch .side small { font-size: 2.6cqw; font-weight: 600; }
.v-b4 .ch .wname { color: #576b95; font-weight: 600; font-size: 4cqw; }
.v-b4 .ch .row.wt { left: 19%; color: #b2b2b2; font-size: 3cqw; }
.v-b4 .ch .wm { background: #f2f2f2; color: #576b95; border-radius: .6cqw; padding: 0 1.8cqw; font-weight: 700; }
.v-b4 .ch .gname { font-weight: 700; font-size: 4.4cqw; }
.v-b4 .ch .stats { right: 3%; display: flex; justify-content: space-around; text-align: center; }
.v-b4 .ch .stats span { display: flex; flex-direction: column; } .v-b4 .ch .stats b { font-size: 4.2cqw; } .v-b4 .ch .stats small { font-size: 2.9cqw; }
.v-b4 .ch .row.tabs { left: 0; right: 0; justify-content: space-around; padding: 1.6cqw 0; border-bottom: 1px solid #eee; color: #999; }
.v-b4 .ch .row.tabs .ic:first-child { color: #111; }

/* 结尾衣架：和 App 的衣架一个样子 —— 墨色马克笔绳（左钩右胶带），照片白边 + 粉彩剪纸夹子，±2° 歪着挂；最后一个夹子空着留给朋友 */
.v-b4 .b4end .mine { position: relative; margin: 22px auto 14px; max-width: 980px; padding-bottom: 8px; }
.v-b4 .b4end .cord { position: absolute; left: 0; top: 0; width: 100%; height: 80px; overflow: visible; z-index: 1; pointer-events: none; }
.v-b4 .b4end .cord path { fill: none; stroke: #160F12; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.v-b4 .b4end .cord .rope { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.v-b4 .b4end.in .cord .rope { stroke-dashoffset: 0; }
.v-b4 .b4end .cord .hook { stroke-width: 2.4; }
.v-b4 .b4end .tape { position: absolute; right: -4px; top: 4px; width: 40px; height: 20px; background: rgba(255,210,63,.88); rotate: -34deg; clip-path: polygon(0 8%, 12% 0, 30% 10%, 50% 0, 70% 8%, 88% 0, 100% 10%, 100% 92%, 85% 100%, 65% 90%, 45% 100%, 25% 92%, 8% 100%, 0 90%); z-index: 2; }
.v-b4 .b4end .mtrack { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-start; gap: 2vw; padding: 0 2vw; }
.v-b4 .b4end .mcell { --t: 0deg; position: relative; flex: none; width: 17vw; max-width: 150px; aspect-ratio: 3/4; border: 5px solid #fff; background: #fff; box-shadow: 0 6px 10px -4px rgba(22,15,18,.3); transform-origin: 50% -16px; rotate: var(--t); opacity: 0; }
.v-b4 .b4end.in .mcell { opacity: 1; animation: hangin .7s calc(.5s + var(--i) * .12s) cubic-bezier(.3,1.5,.5,1) backwards, sway 5s calc(1.4s + var(--i) * .7s) ease-in-out infinite alternate; }
@keyframes hangin { from { opacity: 0; rotate: calc(var(--t) - 14deg); translate: 0 -40px; } }
@keyframes sway { to { rotate: calc(var(--t) * -.6); } }
.v-b4 .b4end .mcell::before { content: ''; position: absolute; left: 50%; top: -23px; width: 13px; height: 27px; margin-left: -6.5px; z-index: 3; background: var(--peg, #FFB8D9); clip-path: polygon(8% 4%, 92% 0, 100% 46%, 86% 100%, 14% 96%, 0 52%); }
.v-b4 .b4end .mcell:nth-child(4n+2)::before { --peg: #B8F03C; } .v-b4 .b4end .mcell:nth-child(4n+3)::before { --peg: #9FD7FF; } .v-b4 .b4end .mcell:nth-child(4n)::before { --peg: #FFD23F; }
.v-b4 .b4end .mcell .pane { position: absolute; inset: 0; overflow: hidden; }
.v-b4 .b4end .mcell .frimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-b4 .b4end .mcell.friend { display: grid; place-items: center; border: 2px dashed #160F12; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(22,15,18,.07) 6px 12px) #F4F1EA; box-shadow: none; text-decoration: none; color: #160F12; text-align: center; }
.v-b4 .b4end .mcell.friend span { font: 15px/1.15 'Brand', sans-serif; padding: 0 4px; }
.v-b4 .b4end .mcell.friend::after { content: '+'; position: absolute; bottom: 6%; left: 0; right: 0; font: 26px/1 'Brand', sans-serif; }
.v-b4 .b4end .mcell.you { outline: 4px solid #FF2E93; z-index: 2; }
.v-b4 .b4end .mcell.you.empty { background: repeating-linear-gradient(45deg, rgba(255,46,147,.08) 0 10px, transparent 10px 20px) #fff; }
.v-b4 .b4end .mcell.you small { position: absolute; left: 4px; top: 4px; z-index: 5; font: 13px/1 'Brand', sans-serif; background: #FF2E93; color: #fff; padding: 4px 6px; }
@media (min-width: 900px) { .v-b4 .b4end .mtrack { gap: 30px; } .v-b4 .b4end .mcell.friend span { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .v-b4 .b4end.in .mcell { animation: none; } }

/* 连图 v4：照 App CarouselStudio。.lc = 一条长画布（App 真导出的三页并排），.vf = 平台取景框（发出去的样子）。
   长画布有两份：框外那份压暗，框里那份对齐同一坐标，所以翻页时接缝两边是连着走的 */
.v-b4 .spread { top: 23svh; height: 50svh; }
.v-b4 .spread .lc { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.v-b4 .spread .lc .pgimg { position: absolute; top: 0; width: calc(100% / 3); height: 100%; object-fit: cover; display: block; background: #fff; user-select: none; }
.v-b4 .spread .lc.back { opacity: calc(1 - var(--m, 0) * .86); filter: saturate(calc(1 - var(--m, 0) * .8)); box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); }
.v-b4 .spread .seam { position: absolute; top: -3%; bottom: -3%; width: 0; border-left: 2px dashed #fff; opacity: calc(1 - var(--m, 0)); filter: drop-shadow(0 0 2px rgba(0,0,0,.45)); z-index: 3; pointer-events: none; }
.v-b4 .spread .vf { position: absolute; overflow: hidden; background: #fff; container-type: size; opacity: var(--m, 0); box-shadow: 0 30px 50px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; touch-action: pan-y; cursor: grab; }
.v-b4 .spread:not([data-plat=canvas]) .vf { pointer-events: auto; }
.v-b4 .spread[data-plat=douyin] .vf { background: #000; }
.v-b4 .spread .vf .lc { z-index: 1; }
.v-b4 .spread .vf .seam { display: none; }
/* 拍立得：白边 + 一截胶带；它是长画布上的一件东西，跨缝时两页各切一半（框里看就是翻页时从这页走到下一页） */
.v-b4 .spread .pr { position: absolute; width: 19%; aspect-ratio: .82; translate: -50% -50%; background: #fff; padding: 1.4% 1.4% 4.2%; box-sizing: border-box; box-shadow: 0 10px 18px -8px rgba(0,0,0,.5); z-index: 2; touch-action: pan-y; }
.v-b4 .spread .pr img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; pointer-events: none; }
.v-b4 .spread .pr::before { content: ''; position: absolute; left: 30%; top: -5%; width: 40%; height: 9%; background: rgba(255,210,63,.85); rotate: 4deg; }
.v-b4 .spread .lc.back .pr { cursor: grab; }
.v-b4 .spread.dragging .lc.back .pr { cursor: grabbing; scale: 1.06; box-shadow: 0 22px 30px -12px rgba(0,0,0,.55); }
.v-b4 .spread[data-plat=canvas] .lc.back .pr::after { content: ''; position: absolute; inset: -6px; border: 2px solid #fff; pointer-events: none; animation: tapdot 1.2s infinite; } /* 摆的时候：照片带选中框，像 App 里一样 */
.v-b4 .finger { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(0,0,0,.3); opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 5; }
.v-b4 .finger.on { opacity: 1; }
.v-b4 .ch .cnt.bump { animation: cntbump .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes cntbump { 40% { transform: scale(1.35); background: rgba(0,0,0,.7); } }
/* 模板条：横向可滑，叫法和 App 一致 */
.v-b4 .tpls { position: absolute; left: 0; right: 0; top: calc(74.5svh + 40px); z-index: 4; display: flex; gap: 6px; padding: 4px 5vw 8px; overflow-x: auto; scrollbar-width: none; opacity: var(--spread, 0); pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent, #000 5vw, #000 calc(100% - 5vw), transparent); mask: linear-gradient(90deg, transparent, #000 5vw, #000 calc(100% - 5vw), transparent); }
.v-b4 .tpls::-webkit-scrollbar { display: none; }
.v-b4 [data-ch=scrl] .tpls { pointer-events: auto; }
.v-b4 .tpls button { flex: none; font: 13px 'Brand'; border: 1.5px solid #1F3A00; padding: 4px 9px; background: transparent; color: #1F3A00; cursor: pointer; transition: transform .25s cubic-bezier(.3,1.6,.5,1), background .2s; }
.v-b4 .tpls button:nth-child(odd) { rotate: -1.5deg; } .v-b4 .tpls button:nth-child(even) { rotate: 1.2deg; }
.v-b4 .tpls button.on { background: #1F3A00; color: #B8F03C; transform: scale(1.06); }
.v-b4 .plats { top: 74.5svh; }
.v-b4 [data-ch=scrl] .b3try { opacity: var(--in); }
@media (min-width: 900px) {
  .v-b4 .spread { left: 46vw; right: 3vw; top: 10svh; height: 66svh; }
  .v-b4 .plats { left: 46vw; right: 3vw; top: 79svh; }
  .v-b4 .tpls { left: 46vw; right: 3vw; top: calc(79svh + 46px); padding: 4px 2vw 8px; justify-content: center; flex-wrap: wrap; overflow: visible; -webkit-mask: none; mask: none; }
  .v-b4 [data-ch=scrl] .b3try { opacity: var(--in); }
}

/* 玩图：照片区是一条四种玩法并排的轨道，下滑带着它左移；第三步收成四宫格，托盘那张飞上来四格依次换 */
.v-b4 .ptrack { background: #F4F1EA; cursor: default; }
.v-b4 .ptrack .pane { transform-origin: 0 0; will-change: transform; box-shadow: 0 0 0 calc(var(--g, 0) * 3px) #fff; }
.v-b4 .ptrack .pane.pop { animation: ppop .42s cubic-bezier(.3,1.6,.5,1); } @keyframes ppop { 45% { scale: 1.07; filter: brightness(1.18); } }
.v-b4 .scr-play .etag, .v-b4 .scr-play .ecat { opacity: calc(1 - var(--g, 0)); }
.v-b4 .fly { position: absolute; z-index: 6; overflow: hidden; border: 2px solid #fff; box-shadow: 0 6px 12px -4px rgba(0,0,0,.4); pointer-events: none; will-change: transform; }
.v-b4 .fly img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-b3 .b3try b { margin-right: 8px; color: #FFD23F; letter-spacing: .04em; }

/* 相机：一条显影线扫过去，左边是没调色的底片，右边是胶片成片 */
.v-b4 .dev { position: absolute; inset: 0; z-index: 4; pointer-events: none; clip-path: inset(0 0 0 calc(var(--dv, 1) * 100%)); }
.v-b4 .dev .pane { filter: saturate(.4) contrast(.7) brightness(1.1) sepia(.08); }
@media (max-width: 899px) { .v-b4 .tpls { display: none; } } /* 手机上模板跟着平台自动换，七个小按钮只会挤 */
.v-b4 .devline { position: absolute; top: 0; bottom: 0; left: calc(var(--dv, 1) * 100%); width: 2px; margin-left: -1px; background: #fff; z-index: 5; pointer-events: none; box-shadow: 0 0 8px rgba(255,255,255,.8); opacity: calc(var(--dvo, 0)); }
.v-b4 .devline b, .v-b4 .devline i { position: absolute; top: 6%; font: 600 11px/1.5 'Brand'; font-style: normal; white-space: nowrap; padding: 0 6px; background: #160F12; color: #F4F1EA; }
.v-b4 .devline b { right: 8px; rotate: -2deg; } .v-b4 .devline i { left: 8px; rotate: 2deg; background: #FFD23F; color: #160F12; }

/* 社区：热门模板绕着手机转一圈（滚动带着转），转到前面的那张最亮 */
.v-b4 .ring { position: absolute; left: 50%; top: 53svh; width: 0; height: 0; transform-style: preserve-3d; pointer-events: none; opacity: 0; transition: opacity .5s; z-index: 1; }
.v-b4 [data-ch=comm] .ring { opacity: 1; }
.v-b4 .ring figure { position: absolute; left: 0; top: 0; margin: 0; width: min(30vw, 150px); aspect-ratio: 3/4; translate: -50% -50%; background: #fff; padding: 4px 4px 18px; box-shadow: 0 14px 24px -12px rgba(0,0,0,.5); backface-visibility: hidden; }
.v-b4 .ring figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-b4 .ring figure { transform: rotateY(var(--a)) translateZ(min(40vw, 230px)); }
@media (min-width: 900px) { .v-b4 .ring figure { transform: rotateY(var(--a)) translateZ(min(22vw, 340px)); } }
.v-b4 .ring figure figcaption { position: absolute; left: 6px; right: 6px; bottom: 2px; font: 600 10px ui-monospace, Menlo, monospace; color: #160F12; display: flex; justify-content: space-between; }
.v-b4 .ring figure figcaption b { font: 10px 'Brand'; background: #FFD23F; padding: 0 3px; }
.v-b4 .cam3d .ringwrap { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
@media (min-width: 900px) { .v-b4 .ring { left: 68%; top: 50svh; } .v-b4 .ring figure { width: min(13vw, 200px); } }

/* 章节衔接（10-26）：底色圆形擦除放慢、墨色渐变、文字先淡出、屏幕交叉淡化加长、去掉每次切章的白色反光 */
@property --ink { syntax: '<color>'; inherits: true; initial-value: #160F12; }
.v-b4 .stage { transition: --ink .9s cubic-bezier(.45,0,.25,1); }
.v-b4 .wash.next.go { animation: wash 1s cubic-bezier(.6,0,.3,1) forwards; }
.v-b4 .fade { opacity: 0 !important; transform: translateY(-10px); filter: blur(6px); transition: opacity .22s, transform .22s, filter .22s; }
.v-b4 .rise { animation: rise .7s cubic-bezier(.22,1,.36,1); }
.v-b4 .scr { transition: opacity .6s cubic-bezier(.45,0,.25,1); }

/* 2.5D 镜头（10-26）：stage 是镜头，world 里分层——远：洞洞纸、大标题；中：手机；近：长画布、平台按钮 */
.v-b4 .stage { perspective: 1400px; perspective-origin: 50% 45%; }
.v-b4 .world { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; z-index: 2; }
.v-b4 .copy { transform-style: preserve-3d; }
.v-b4 .world .holes { translate: 0 0 -500px; scale: 1.36; }
.v-b4 .world .big, .v-b4 .world .chno { translate: 0 0 -240px; scale: 1.17; }
.v-b4 .world .spread { translate: 0 0 70px; scale: .95; }
@media (max-width: 899px) { .v-b4 .copy { position: absolute; inset: 0; pointer-events: none; } }
@media (min-width: 900px) { .v-b4 .world .big, .v-b4 .world .chno { translate: none; scale: none; } }

/* 换章底色（10-26，按 Lando Norris / Oryzo 获奖站实测）：0.6s 撕纸边从下往上盖，前快后收，不再 1s 圆形慢擦 */
.v-b4 .wash.next { clip-path: polygon(0.0% 110.2%, 6.2% 108.5%, 12.5% 113.5%, 18.8% 107.7%, 25.0% 112.4%, 31.2% 110.7%, 37.5% 107.6%, 43.8% 112.1%, 50.0% 107.4%, 56.2% 111.3%, 62.5% 107.7%, 68.8% 107.9%, 75.0% 111.2%, 81.2% 115.3%, 87.5% 108.2%, 93.8% 109.2%, 100.0% 113.3%, 100% 130%, 0% 130%); }
.v-b4 .wash.next.go { animation: tear .6s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes tear { to { clip-path: polygon(0.0% -13.8%, 6.2% -15.5%, 12.5% -10.5%, 18.8% -16.3%, 25.0% -11.6%, 31.2% -13.3%, 37.5% -16.4%, 43.8% -11.9%, 50.0% -16.6%, 56.2% -12.7%, 62.5% -16.3%, 68.8% -16.1%, 75.0% -12.8%, 81.2% -8.7%, 87.5% -15.8%, 93.8% -14.8%, 100.0% -10.7%, 100% 130%, 0% 130%); } }
@media (prefers-reduced-motion: reduce) { .v-b4 .wash.next.go { animation-duration: .01s; } }
/* 翻页：整页原生吸附。叙事区每格一页且 snap-stop: always（一次滑动只翻一页）；首屏、结尾是普通吸附点 */
html.paged { scroll-snap-type: y mandatory; }
.v-b4 .snap { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }
.v-b4 .snap.soft { scroll-snap-stop: normal; }
.v-b4 .snap.last { scroll-snap-align: end; }
.story .spacer { scroll-snap-align: start; }
.svhprobe { position: absolute; top: 0; left: -9px; width: 1px; height: 100svh; visibility: hidden; pointer-events: none; }
.story { position: relative; }