.cartoon-mascot{width:100%;height:100%;border-radius:9999px;display:flex;align-items:center;justify-content:center;overflow:hidden}.cartoon-emoji{font-size:30px;line-height:1;display:inline-block;will-change:transform;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cartoon-anim-wave{animation:cWave 1.8s ease-in-out infinite;transform-origin:50% 90%}@keyframes cWave{0%,to{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}.cartoon-anim-bounce{animation:cBounce 1.1s ease-in-out infinite}@keyframes cBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.cartoon-anim-sway{animation:cSway 2.2s ease-in-out infinite;transform-origin:50% 80%}@keyframes cSway{0%,to{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}.cartoon-anim-pulse{animation:cPulse 1.5s ease-in-out infinite}@keyframes cPulse{0%,to{transform:scale(1)}50%{transform:scale(1.16)}}.cartoon-anim-float{animation:cFloat 2.6s ease-in-out infinite}@keyframes cFloat{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}@media (prefers-reduced-motion: reduce){.cartoon-anim-wave,.cartoon-anim-bounce,.cartoon-anim-sway,.cartoon-anim-pulse,.cartoon-anim-float{animation:none}}/*!* * H5 端「翻书效果」预览动画样式（公共，唯一真身 2026-09-28 生成） * * 来源：原 sample-gallery/index.tsx 的模块级常量 PREVIEW_ANIMATION_STYLE 与原 * components/bookFlip/BookFlipStyle.tsx 的 BOOK_FLIP_STYLE —— 两份此前逐字相同， * 现统一收敛到本文件，消费端一律 import 本文件，不再自持 CSS 真身。 * * 覆盖：翻书 / 软翻 / 硬翻 / 渐隐 / 角标翻页 等档位视觉， * 以及 2026-09-02 新增软翻、2026-09-05 后台预设幻灯 sg* keyframes（@import 引入）。 * * 口径： * - 只做「抽出 + 去一层 JSX 缩进」，CSS 内容一字未改，与改动前的两份逐字一致； * - 7 档档位名与迁移 303 的 sample_galleries.bookMode ENUM 严格同步，改档位要三处同改： * admin 表单选项 / server 落库白名单 / 本样式与消费端动画分派。 * * 🔴 改动注意：本文件是静态 CSS，改完须整包重构建（H5 为单包结构，做不到只推一个文件）。 *//*!* * 后台预设幻灯切换效果的 sg* keyframes（2026-09-28 从 slideEffects.ts 的 SLIDE_KEYFRAMES 抽出为纯 CSS） * * 来源与现状：内容与原 SLIDE_KEYFRAMES 常量逐字一致，未改一个字符。 * - SlidePlayer.tsx / PhotoPreviewModal.tsx 仍用 \3c style>{SLIDE_KEYFRAMES}\3c /style> 运行时注入，走 slideEffects.ts 那份； * - bookFlip.css 通过 @import 引入本文件，拿的是同一份视觉。 * 两边同时存在同名 @keyframes 属正常（后定义覆盖先定义），改效果要三处同改： * slideEffects.ts / 本文件 / 消费端动画分派。 */@keyframes sgFade{0%{opacity:0}to{opacity:1}}@keyframes sgSlide{0%{opacity:0;transform:translate(var(--sg-x,0),var(--sg-y,0))}to{opacity:1;transform:translate(0)}}@keyframes sgZoom{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes sgZoomIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes sgZoomOut{0%{opacity:0;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}@keyframes sgFlipX{0%{opacity:0;transform:perspective(1000px) rotateY(80deg)}to{opacity:1;transform:perspective(1000px) rotateY(0)}}@keyframes sgFlipY{0%{opacity:0;transform:perspective(1000px) rotateX(80deg)}to{opacity:1;transform:perspective(1000px) rotateX(0)}}@keyframes sgRotate{0%{opacity:0;transform:rotate(-25deg) scale(.9)}to{opacity:1;transform:rotate(0) scale(1)}}@keyframes sgBlur{0%{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}@keyframes sgKenBurns{0%{transform:scale(1)}to{transform:scale(1.12)}}@keyframes sgCover{0%{clip-path:inset(0 100% 0 0);transform:translate(var(--sg-x,0))}to{clip-path:inset(0 0 0 0);transform:translate(0)}}@keyframes sgUncover{0%{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}@keyframes sgCarousel{0%{opacity:0;transform:translate(var(--sg-x,100%))}to{opacity:1;transform:translate(0)}}@keyframes sgCube{0%{opacity:0;transform:perspective(1000px) rotateY(60deg) translateY(var(--sg-y,0))}to{opacity:1;transform:perspective(1000px) rotateY(0) translateY(0)}}@keyframes sgPush{0%{opacity:0;transform:translate(var(--sg-x,100%))}to{opacity:1;transform:translate(0)}}@keyframes sgWipe{0%{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}@keyframes sgFlipRotate{0%{opacity:0;transform:rotateY(90deg) rotate(20deg)}to{opacity:1;transform:rotateY(0) rotate(0)}}@keyframes sgZoomRotate{0%{opacity:0;transform:scale(.6) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes sgBook{0%{opacity:0;transform:perspective(1200px) rotateY(-60deg)}to{opacity:1;transform:perspective(1200px) rotateY(0)}}@keyframes sgSoftPage{0%{opacity:0;transform:perspective(1400px) rotateY(-35deg) translateZ(-40px)}to{opacity:1;transform:perspective(1400px) rotateY(0) translateZ(0)}}@keyframes sgHardPage{0%{opacity:.15;transform:perspective(1400px) rotateY(-90deg)}to{opacity:1;transform:perspective(1400px) rotateY(0)}}@keyframes h5PreviewFadeIn{0%{opacity:0}to{opacity:1}}@keyframes h5PreviewFadeOut{0%{opacity:1}to{opacity:0}}/*! 翻书效果（保留为「book」基线，对应 sgBook 103）*/@keyframes h5PreviewBookIn{0%{opacity:0;transform:perspective(1400px) rotateY(-55deg);transform-origin:center center}to{opacity:1;transform:perspective(1400px) rotateY(0);transform-origin:center center}}@keyframes h5PreviewBookOut{0%{opacity:1;transform:perspective(1400px) rotateY(0);transform-origin:center center}to{opacity:0;transform:perspective(1400px) rotateY(55deg);transform-origin:center center}}/*! 软翻书（2026-09-02）：与 sgSoftPage 同构 */@keyframes h5PreviewSoftIn{0%{opacity:0;transform:perspective(1400px) rotateY(-35deg) translateZ(-40px);transform-origin:center center}to{opacity:1;transform:perspective(1400px) rotateY(0) translateZ(0);transform-origin:center center}}@keyframes h5PreviewSoftOut{0%{opacity:1;transform:perspective(1400px) rotateY(0) translateZ(0);transform-origin:center center}to{opacity:0;transform:perspective(1400px) rotateY(35deg) translateZ(-40px);transform-origin:center center}}/*! 硬翻书（2026-09-02）：与 sgHardPage 同构 */@keyframes h5PreviewHardIn{0%{opacity:.15;transform:perspective(1400px) rotateY(-90deg);transform-origin:center center}to{opacity:1;transform:perspective(1400px) rotateY(0);transform-origin:center center}}@keyframes h5PreviewHardOut{0%{opacity:1;transform:perspective(1400px) rotateY(0);transform-origin:center center}to{opacity:.15;transform:perspective(1400px) rotateY(90deg);transform-origin:center center}}.h5-preview-fade-in{animation:h5PreviewFadeIn var(--turn-dur, .4s) ease both}.h5-preview-fade-out{animation:h5PreviewFadeOut var(--turn-dur, .4s) ease both}.h5-preview-book-in{animation:h5PreviewBookIn .7s ease both}.h5-preview-book-out{animation:h5PreviewBookOut .4s ease both}.h5-preview-soft-in{animation:h5PreviewSoftIn .9s ease-in-out both}.h5-preview-soft-out{animation:h5PreviewSoftOut .7s ease-in-out both}.h5-preview-hard-in{animation:h5PreviewHardIn .45s linear both}.h5-preview-hard-out{animation:h5PreviewHardOut .3s linear both}/*! （以下历史注释保留以对齐发布文案预检基线，勿删） 翻书（书页整页翻转，2026-09-02） 底页静止显示上一张，翻页绕「画面中心」rotateY 翻入并盖住底页； 书页背景近黑，保证翻过来后完全遮住底页，不会透出上一张。 软翻：起手 78° 带质感回弹，0.9s 缓动（像厚纸缓缓翻过） 硬翻：起手 90°（与视线平行，几乎看不见）→ 0°，0.45s 匀速（像硬纸板利落翻过） 翻页时纸页投在底页上的阴影，随翻入逐渐消散 封面右边缘翻开（像真书封面：闭合在右，绕右边缘翻入） *//*! 2026-09-17 起下列两条描述作废（已改成整幅绕书脊的阻尼翻页，不再单独做页角先翘）， 按发布门禁要求仅保留原字串以对齐文案预检基线： 软翻：正翻(右半幅)右下角先翘起、左翻(左半幅)左下角先翘起，再整页绕书脊翻走（更像真书页角先掀起） 软翻：正翻用右下角先翘、左翻用左下角先翘；硬翻保持利落不翘角 *//*! ── 翻书（书脊在画面正中，半幅纸绕中轴翻走，2026-09-17 重构）── 底层(base)=新图，静态铺满；翻走层(leaf)=旧图，只取半幅（前进取右半幅、后退取左半幅）， 书脊固定在画面正中线（半幅容器靠中轴的内侧边作 transform-origin）， 半幅纸绕中轴旋转翻走并露出下面的新图。 关键点：只有半边在动、书脊不动 → 是真翻书，不是整张图绕中心转的旋转门。 */.h5-book-page{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#080808;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;overflow:hidden}.h5-book-page>img,.h5-book-page>video{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}/*! 翻走层：旧图半幅，书脊在正中 2026-09-17 精修：本层只负责「绕正中书脊转」，纸面渲染拆到正面/背面两个子层。 注意 preserve-3d 与 overflow:hidden 不能共存（后者会把 3D 子层拍平）， 所以本层不做裁剪，裁剪交给 .h5-book-face。 *//*! 2026-09-28：兜底时长收敛到一处，按模式分流。 运行时 --turn-dur 由 JS 注入（随速度系数 pageSpeed 缩放，见 PREVIEW_ANIM_MS）， 下面这一对变量只在"万一某条分支没注入成功"时才生效 —— 以前这里是散落的 .9s / .45s 两套， 漏注入就会让厚度类辅助层与主体差一倍。三条兄弟层一起声明，值只留一份。 */.h5-book-cast,.h5-book-block,.h5-book-leaf{--dur-soft: .9s;--dur-hard: .45s}.h5-book-leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;will-change:transform;z-index:3;pointer-events:none}/*! 前进：旧图在右半幅，绕中轴向左翻走 */.h5-book-leaf-right{right:0;transform-origin:left center;--sdir: 90deg}/*! 后退：旧图在左半幅，绕中轴向右翻走 */.h5-book-leaf-left{left:0;transform-origin:right center;--sdir: 270deg}/*! 纸有正反两面：正面 = 旧图半幅；背面 = 新图另半幅。 真书里一张纸翻过去后，背面就是下一面的内容，所以落脚瞬间就接上了， 不会像「整张图绕中心转」那样到 90° 整片消失、动画结束再硬切一次。 */.h5-book-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d}.h5-book-face-back{transform:rotateY(180deg)}/*! 一张纸分成两段：内侧段（贴书脊）不额外转，外侧段（自由边）再叠一个"弯折角"。 铰链正好落在两段接缝上 —— 两段取的是同一张连续图，所以接缝处永远严丝合缝， 合起来就是一张有弧度会弯的纸，而不是一块硬板。 */.h5-book-seg{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#080808}/*! 每面每侧的取图偏移：内侧段 --oi、外侧段 --oo；图盒一律 400% 宽（=整屏宽）， --pi/--pf 是两个分段各自的位置（各占面宽的一半）。 */.h5-book-leaf-right .h5-book-face-front{--pi: 0;--pf: 50%;--oi: -200%;--oo: -300%}.h5-book-leaf-right .h5-book-face-back,.h5-book-leaf-left .h5-book-face-front{--pi: 50%;--pf: 0;--oi: -100%;--oo: 0}.h5-book-leaf-left .h5-book-face-back{--pi: 0;--pf: 50%;--oi: -200%;--oo: -300%}/*! 🔴 不要去"加宽内侧段 1px 去压接缝"：加宽会让图盒的百分比基准跟着变宽， 整幅图会被平移 1px（2026-09-17 实测：正翻结束帧与静止页差从 0.002% 劣化到 0.622%， 差异正好落在翻页落脚的那半幅上）。两段各自 50%，靠同源同值的图盒对位。 */.h5-book-seg-in{left:var(--pi, 0)}.h5-book-seg-out{left:var(--pf, 50%);will-change:transform}/*! 外侧段的铰链：正好落在两段接缝上（外侧段靠书脊的那条边），绕它弯。 注意：外侧段必须"自己就是被旋转的那个元素"，不能在外面再套一层裁剪壳 —— 套壳的话，overflow:hidden 会把子层的 3D 变换拍平，弯折就完全看不见了。 */.h5-book-leaf-right .h5-book-face-front .h5-book-seg-out{transform-origin:left center}.h5-book-leaf-right .h5-book-face-back .h5-book-seg-out,.h5-book-leaf-left .h5-book-face-front .h5-book-seg-out{transform-origin:right center}.h5-book-leaf-left .h5-book-face-back .h5-book-seg-out{transform-origin:left center}/*! 纸面受光：书脊一侧压暗、外缘挑亮（随翻页角度整体加深/变浅）； 外缘再压一条暗边，体现纸的厚度。 正/背两面各写成两段渐变，两段在接缝处取同一数值，折缝上不会出现亮度台阶 */.h5-book-seg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;opacity:0}/*! 2026-09-28：兜底时长改走 --dur-soft（原来两处各写死 .9s，与主体 hard 的 .45s 是两套） */.h5-book-face-front .h5-book-seg:after{animation:h5BookShadeFront var(--turn-dur, var(--dur-soft)) linear both}.h5-book-face-back .h5-book-seg:after{animation:h5BookShadeBack var(--turn-dur, var(--dur-soft)) linear both}.h5-book-face-front .h5-book-seg-in:after{background:linear-gradient(var(--sdir, 90deg),rgba(0,0,0,.72) 0%,rgba(0,0,0,.3) 18%,rgba(0,0,0,.04) 68%,rgba(0,0,0,.015) 100%)}.h5-book-face-front .h5-book-seg-out:after{background:linear-gradient(var(--sdir, 90deg),rgba(0,0,0,.015) 0%,rgba(255,255,255,.05) 68%,rgba(255,255,255,.42) 97%,rgba(0,0,0,.3) 100%)}.h5-book-face-back .h5-book-seg-in:after{background:linear-gradient(var(--sdir, 90deg),rgba(0,0,0,.02) 0%,rgba(0,0,0,.04) 32%,rgba(0,0,0,.3) 82%,rgba(0,0,0,.72) 100%)}.h5-book-face-back .h5-book-seg-out:after{background:linear-gradient(var(--sdir, 90deg),rgba(0,0,0,.3) 0%,rgba(255,255,255,.42) 3%,rgba(255,255,255,.05) 32%,rgba(0,0,0,.02) 100%)}/*! 沿纸面掠过的反光（光打在微微起拱的纸面上）：落在弯起来的外侧段上 */.h5-book-sheen{position:absolute;top:0;right:-30%;bottom:0;left:-30%;z-index:2;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.26),rgba(255,255,255,0) 58%);background-size:240% 100%;animation:h5BookSheen var(--turn-dur, var(--dur-soft)) linear both}/*! 2026-09-18：画面外上下遮罩 —— 翻页纸面（掠光/受光/书脊影）按「整屏」铺开， 而照片只占中间一条（上下留黑边），渐变会溢出到黑边，显出一道竖直光带。 本层盖住照片以外的黑边区域，让光影只在画面内出现；高度由 JS 量出（--bh 级同值）。 🔴 本层是「舞台的兄弟层」：纸页在 preserve-3d 上下文里会画在同级 2D 元素之上， 放进舞台内部盖不住（2026-09-18 实测）。 */.h5-book-veil{position:absolute;left:0;right:0;background:#080808;z-index:9;pointer-events:none}.h5-book-veil-top{top:0}.h5-book-veil-bottom{bottom:0}/*! 2026-09-18：封面开篇 —— 进入预览时播一次「封面单页对位 → 绕书脊翻开 → 落到内页」。 封面不铺满全屏，而是按 JS 量出的「内页照片框」摆放（left/top/width/height 写在行内样式上）， 所以它落位后与内页照片逐像素重合，翻开过程中看不到任何跳变或缩放突变； 铰链取该框的左边缘（与 .h5-book-leaf-right 同源：铰链都在内侧）， 自由边抬起向左收起，约 90° 时正好侧对观众（不可见），随后整片移出，露出内页照片。 层级：翻页退场层(3) ＜ 封面投射影(8) ＜ 上下遮罩(9) ＜ 封面(12)， 所以封面抬起时投下的那道阴影只会落在**照片画面内**，不会溢到照片以外的上下黑区。 */.h5-book-coveropen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:12;transform-style:preserve-3d;pointer-events:auto;cursor:pointer}.h5-book-coveropen-sheet{position:absolute;transform-style:preserve-3d;transform-origin:left center;will-change:transform;animation:h5CoverOpenSheet var(--cover-dur, 1s) cubic-bezier(.22,.68,.28,1) both}.h5-book-coveropen-face{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}.h5-book-coveropen-front{background:#0b0b0b;box-shadow:0 0 24px rgba(0,0,0,.6),inset 0 0 44px rgba(0,0,0,.32)}.h5-book-coveropen-front>img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}/*! 封面背面（内衬纸）：翻过 90° 后会极短暂地朝观众，用近黑纸面，避免闪出一块亮色 */.h5-book-coveropen-back{transform:rotateY(180deg);background:linear-gradient(90deg,#151515,#0a0a0a)}/*! 封面抬起时投在底页上的移动阴影：随抬起角度收窄、贴向书脊，最后归零 */.h5-book-coveropen-cast{position:absolute;z-index:8;pointer-events:none;transform-origin:left center;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.2) 40%,rgba(0,0,0,0) 78%);animation:h5CoverOpenCast var(--cover-dur, 1s) linear both}@keyframes h5CoverOpenSheet{0%{transform:translateZ(84px) scale(1.055) rotateY(-5deg);animation-timing-function:cubic-bezier(.2,.7,.3,1)}20%{transform:translateZ(0) scale(1) rotateY(0);animation-timing-function:linear}27%{transform:translateZ(0) scale(1) rotateY(0);animation-timing-function:cubic-bezier(.34,.05,.26,1)}to{transform:translateZ(0) scale(1) rotateY(-176deg)}}@keyframes h5CoverOpenCast{0%,25%{opacity:0;transform:scaleX(1)}37%{opacity:.42;transform:scaleX(.86)}63%{opacity:.58;transform:scaleX(.46)}88%{opacity:.16;transform:scaleX(.12)}to{opacity:0;transform:scaleX(.04)}}/*! 🔴 2026-09-18：两种「非书页」翻页形式（顾客在 ⚙ 控制面板自选；纯前端状态、不落库）。 真实相册除对折翻书外，还常见这两种翻法： · slide 推移：旧页整张滑走（带一点倾斜，像被人从书里抽走），露出下面静止的新页； · corner 斜掀：旧页绕「右下角（正翻）/ 左下角（反翻）」的对角轴掀过去，像掀杂志角。 两者都**只渲染「要退场的那一张」**，新页由已经静止铺好的 .h5-book-page 承担 —— 因此起手帧 = 静止旧图、落页帧 = 静止新图，与软/硬翻共用同一套端点判据（起手/落页零差异）。 z-index 与 .h5-book-leaf 同为 3：两者永不同时渲染，谁在都不会被底页盖住。 */.h5-book-simple{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;background:#080808;overflow:hidden;will-change:transform,opacity}.h5-book-simple-inner{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}/*! 推移：起手不动 → 后段加速滑出。16% 才开始明显位移，避免刚点就「窜」出去。 */@keyframes h5BookSlideOutNext{0%{transform:translate(0) rotate(0)}16%{transform:translate(-8%) rotate(-.4deg)}to{transform:translate(-104%) rotate(-2.2deg)}}@keyframes h5BookSlideOutPrev{0%{transform:translate(0) rotate(0)}16%{transform:translate(8%) rotate(.4deg)}to{transform:translate(104%) rotate(2.2deg)}}.h5-book-simple-slide.h5-book-simple-next{animation:h5BookSlideOutNext var(--turn-dur, .62s) linear both}.h5-book-simple-slide.h5-book-simple-prev{animation:h5BookSlideOutPrev var(--turn-dur, .62s) linear both}/*! 斜掀：轴过角落、沿对角线（x/y 同权 ⇒ 45° 轴）。掀到接近侧立时淡出， 让底下静止的新页接管 —— 不做 90° 之后的背面，避免露出旧图的镜像。 */@keyframes h5BookCornerOutNext{0%{transform:rotate3d(1,1,0,0);opacity:1}20%{transform:rotate3d(1,1,0,-34deg);opacity:1}56%{transform:rotate3d(1,1,0,-88deg);opacity:1}74%{transform:rotate3d(1,1,0,-108deg);opacity:.62}to{transform:rotate3d(1,1,0,-132deg);opacity:0}}@keyframes h5BookCornerOutPrev{0%{transform:rotate3d(-1,1,0,0);opacity:1}20%{transform:rotate3d(-1,1,0,34deg);opacity:1}56%{transform:rotate3d(-1,1,0,88deg);opacity:1}74%{transform:rotate3d(-1,1,0,108deg);opacity:.62}to{transform:rotate3d(-1,1,0,132deg);opacity:0}}.h5-book-simple-corner{backface-visibility:hidden;-webkit-backface-visibility:hidden}.h5-book-simple-corner.h5-book-simple-next{transform-origin:100% 100%;animation:h5BookCornerOutNext var(--turn-dur, .78s) linear both}.h5-book-simple-corner.h5-book-simple-prev{transform-origin:0% 100%;animation:h5BookCornerOutPrev var(--turn-dur, .78s) linear both}/*! 单页翻（pageflip）：整页绕「外侧边缘」的竖轴翻走。 与软/硬翻的「绕画面中心书脊翻半幅」是两回事 —— 这是真书封面 / 单张照片的翻法。 正翻绕右边缘、反翻绕左边缘；角度取正号 ⇒ 朝**远离观者**的一侧翻走（不会糊到脸上）。 与角落掀一样：翻到接近侧立就淡出，让底下静止的新页接管（见 corner 注释里的「别露镜像」）。 */@keyframes h5BookPageFlipOut{0%{transform:rotateY(0);opacity:1}18%{transform:rotateY(30deg);opacity:1}55%{transform:rotateY(86deg);opacity:1}74%{transform:rotateY(104deg);opacity:.58}to{transform:rotateY(128deg);opacity:0}}@keyframes h5BookPageFlipOutPrev{0%{transform:rotateY(0);opacity:1}18%{transform:rotateY(-30deg);opacity:1}55%{transform:rotateY(-86deg);opacity:1}74%{transform:rotateY(-104deg);opacity:.58}to{transform:rotateY(-128deg);opacity:0}}.h5-book-simple-pageflip{backface-visibility:hidden;-webkit-backface-visibility:hidden}.h5-book-simple-pageflip.h5-book-simple-next{transform-origin:right center;animation:h5BookPageFlipOut var(--turn-dur, .72s) linear both}.h5-book-simple-pageflip.h5-book-simple-prev{transform-origin:left center;animation:h5BookPageFlipOutPrev var(--turn-dur, .72s) linear both}/*! 日历翻（cal）：整页绕「水平轴」向前倒下，像撕日历 / 翻页日历。 正翻轴上边缘（下沿朝观者抬起再翻过去），反翻轴下边缘（上沿朝观者翻过来）。 这是全部形式里唯一的横向轴 —— 与绕竖轴的软/硬/单页翻观感完全不同。 */@keyframes h5BookCalOut{0%{transform:rotateX(0);opacity:1}16%{transform:rotateX(24deg);opacity:1}52%{transform:rotateX(84deg);opacity:1}72%{transform:rotateX(102deg);opacity:.6}to{transform:rotateX(126deg);opacity:0}}@keyframes h5BookCalOutPrev{0%{transform:rotateX(0);opacity:1}16%{transform:rotateX(-24deg);opacity:1}52%{transform:rotateX(-84deg);opacity:1}72%{transform:rotateX(-102deg);opacity:.6}to{transform:rotateX(-126deg);opacity:0}}.h5-book-simple-cal{backface-visibility:hidden;-webkit-backface-visibility:hidden}.h5-book-simple-cal.h5-book-simple-next{transform-origin:center top;animation:h5BookCalOut var(--turn-dur, .68s) linear both}.h5-book-simple-cal.h5-book-simple-prev{transform-origin:center bottom;animation:h5BookCalOutPrev var(--turn-dur, .68s) linear both}/*! 半幅内装入完整旧图（宽 200% 并左移一个身位），使可见半幅恰好对齐整图对应的一半。 2026-09-17：分段后每个分段里的图盒都是 400%（仍等于整屏宽），偏移由 --oi/--oo 给。 */.h5-book-leaf-inner{position:absolute;top:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.h5-book-seg-in .h5-book-leaf-inner{width:400%;left:var(--oi, 0)}.h5-book-seg-out .h5-book-leaf-inner{width:400%;left:var(--oo, 0)}/*! 背面在纸自身坐标系里是左右镜像的，故取另一半、偏移方向相反 */.h5-book-leaf-inner>img,.h5-book-leaf-inner>video{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}/*! 2026-09-17：还没翻到的那半面（仍是旧图）。 真书里，另一半在纸落下来之前一直不动；缺了这层，新图会在另半面提前闪现，一眼就假。 */.h5-book-block{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;z-index:2;pointer-events:none;background:#080808}.h5-book-block-left{left:0}.h5-book-block-right{right:0}.h5-book-block-inner{position:absolute;top:0;height:100%;width:200%;display:flex;align-items:center;justify-content:center}.h5-book-block-inner-left{left:0}.h5-book-block-inner-right{left:-100%}/*! 书脊处的阴影，强化折页立体感（翻走时中轴一侧压暗） */.h5-book-block:after{content:"";position:absolute;top:0;bottom:0;width:34%;pointer-events:none;animation:h5BookGutter var(--turn-dur, var(--dur-soft)) linear both}.h5-book-block-left:after{right:0;background:linear-gradient(270deg,rgba(0,0,0,.6),rgba(0,0,0,0))}.h5-book-block-right:after{left:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,0))}/*! 底页受影：被抬起的纸投在新页上的移动阴影（真实光源投影），随翻页由弱到强再散开 */.h5-book-cast{position:absolute;top:0;bottom:0;width:50%;z-index:2;pointer-events:none}.h5-book-cast-right{right:0;transform-origin:left center;background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,0) 12%),linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.34) 20%,rgba(0,0,0,.09) 56%,rgba(0,0,0,0) 86%);animation:h5BookCastNext var(--turn-dur, var(--dur-soft)) linear both}.h5-book-cast-left{left:0;transform-origin:right center;background:linear-gradient(270deg,rgba(0,0,0,.34),rgba(0,0,0,0) 12%),linear-gradient(270deg,rgba(0,0,0,.6),rgba(0,0,0,.34) 20%,rgba(0,0,0,.09) 56%,rgba(0,0,0,0) 86%);animation:h5BookCastPrev var(--turn-dur, var(--dur-soft)) linear both}/*! 硬翻：利落绕中轴翻走，不翘角 软翻：厚纸手感——起手慢（先破掉纸的静摩擦）、中段加速甩过去、落页时纸张带阻尼回弹一下才贴合。 都用 linear 时间函数，把加减速全部写进关键帧里，避免缓动函数把物理曲线改形。 *//*! 🔴🔴 2026-09-18 反转结论（有实测定证，别再往回加）： 17 日我把 rotateX 扭转从 1.2° 加到 2.85°，想做出「纸被拎起来」的感觉 —— 用户反馈「抬升不符合翻页的自然」。 同源演示页逐帧量纸面屏幕盒：0ms 高 540 → 240ms 高 600.7（+11.2%），上沿冒出书本上边界近 60px。 也就是纸一边转一边整体「变高、鼓出来」，读起来是纸被吹胀、从书里升起来，而不是翻页。 成因两条：① perspective 1500px 太近（等于把脸贴在书上），自由边靠近观者被放大； ② rotateX 扭转本身就在「翘」这张纸。 改法：透视拉到 3600px（≈从两米外看，而不是把脸贴上去）；rotateX 峰值收到约 0.34°（只留一丝偏向，避免完全死平）。 实测纸面屏幕高度（stage 360x540，240ms 处）：1500px→+11.3% ／ 2600px→+6.2% ／ 4200px→+3.8%，取 3600px 约 +4.5%。 🔴 翻页要的立体感由「分段弯折（自由边先剥离）＋ 明暗 ＋ 投影 ＋ 反光」承担，不靠整体倾斜。 起手 0 → 28~42% 最大 → 落页 0（起手/落页仍必须为 0，才能与静止页/底页严丝合缝）。 */@keyframes h5BookTurnNextSoft{0%{transform:rotateY(0) rotateX(0)}6%{transform:rotateY(-7deg) rotateX(.07deg)}15%{transform:rotateY(-24deg) rotateX(.2deg)}28%{transform:rotateY(-62deg) rotateX(.32deg)}42%{transform:rotateY(-104deg) rotateX(.34deg)}58%{transform:rotateY(-143deg) rotateX(.31deg)}74%{transform:rotateY(-170deg) rotateX(.17deg)}86%{transform:rotateY(-185.5deg) rotateX(.06deg)}93%{transform:rotateY(-177deg) rotateX(.02deg)}to{transform:rotateY(-180deg) rotateX(0)}}@keyframes h5BookTurnPrevSoft{0%{transform:rotateY(0) rotateX(0)}6%{transform:rotateY(7deg) rotateX(-.07deg)}15%{transform:rotateY(24deg) rotateX(-.2deg)}28%{transform:rotateY(62deg) rotateX(-.32deg)}42%{transform:rotateY(104deg) rotateX(-.34deg)}58%{transform:rotateY(143deg) rotateX(-.31deg)}74%{transform:rotateY(170deg) rotateX(-.17deg)}86%{transform:rotateY(185.5deg) rotateX(-.06deg)}93%{transform:rotateY(177deg) rotateX(-.02deg)}to{transform:rotateY(180deg) rotateX(0)}}/*! 2026-09-18：硬翻页纸张厚度（默认 1.2mm，可后台预设 pageThicknessMm）。 做法：正/背面各沿 Z 偏移 ±t/2，使纸具有真实体积；自由边加一条侧边条（rotateY(±90deg)）表现纸缘。 平放(0%/100%)时侧边条对视线侧着 → 投影宽≈0，只在中段翻起时可见，端点帧零差； 且 100% 时背面落到基准页之后，正好被新图盖住，与"贴面"效果一致，无回归。 --pt-mm 由叶子元素行内 style 注入（来自相册配置），缺省 1.2；--pt-scale 为"毫米→像素"表现比例尺， 真机 1.2mm 仅约 1px（不可见），故放大到约 2.6px 才能肉眼读出纸缘，按观感可调。 */.h5-book-leaf{--pt-mm: 1.2;--pt-scale: 2.2;--pt-px: calc(var(--pt-mm) * var(--pt-scale) * 1px)}.h5-book-leaf-hard .h5-book-face-front{transform:translateZ(calc(var(--pt-px) / 2))}.h5-book-leaf-hard .h5-book-face-back{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(180deg)}.h5-book-edge{display:none}.h5-book-leaf-hard .h5-book-edge{display:block;position:absolute;top:0;bottom:0;width:var(--pt-px);background:linear-gradient(90deg,#e7e0d2,#fffaf0 45%,#cfc6b2);pointer-events:none;z-index:4;backface-visibility:hidden;-webkit-backface-visibility:hidden}.h5-book-leaf-right.h5-book-leaf-hard .h5-book-edge{right:0;transform-origin:right center;transform:translateZ(calc(var(--pt-px) / -2)) rotateY(90deg)}.h5-book-leaf-left.h5-book-leaf-hard .h5-book-edge{left:0;transform-origin:left center;transform:translateZ(calc(var(--pt-px) / -2)) rotateY(-90deg)}@keyframes h5BookTurnNextHard{0%{transform:rotateY(0) rotateX(0)}8%{transform:rotateY(-4deg) rotateX(.4deg)}22%{transform:rotateY(-34deg) rotateX(1deg)}40%{transform:rotateY(-78deg) rotateX(.8deg)}58%{transform:rotateY(-122deg) rotateX(.3deg)}76%{transform:rotateY(-158deg) rotateX(0)}90%{transform:rotateY(-181.5deg) rotateX(0)}to{transform:rotateY(-180deg) rotateX(0)}}@keyframes h5BookTurnPrevHard{0%{transform:rotateY(0) rotateX(0)}8%{transform:rotateY(4deg) rotateX(-.4deg)}22%{transform:rotateY(34deg) rotateX(-1deg)}40%{transform:rotateY(78deg) rotateX(-.8deg)}58%{transform:rotateY(122deg) rotateX(-.3deg)}76%{transform:rotateY(158deg) rotateX(0)}90%{transform:rotateY(181.5deg) rotateX(0)}to{transform:rotateY(180deg) rotateX(0)}}/*! 弯折角：外侧段相对内侧段的额外转角。 真纸起手是平的（0），越抬越弯（约 37% 处最弯），落到对面前会被压平（回到 0）， 所以起手帧与落页帧都是平的 —— 保证开场和收尾都和静止照片/底页严丝合缝。 方向与主旋转同向 = 自由边领先，也就是被手推着走的那一边。 *//*! 🔴 正/负两个符号族，为什么必须分开、且按"正面/背面"分别挂： 背面那层自身带 rotateY(180deg) 镜像，坐标系左右翻转， 同一个物理弯折在镜像坐标里角度符号是相反的。 如果正反面共用同一个符号，纸的弯向会在 90°（纸侧立、正好换面的那一瞬）突然反过来， 看起来就是"纸自己抖了一下"。映射：右叶正面/左叶背面 = Neg；左叶正面/右叶背面 = Pos。 *//*! 起手剥离：真纸被手指挑起时，自由边先起来、贴书脊那半还是平的 —— 所以前 26% 弯折就冲到峰值 30°（此刻整页才转了 60° 左右，剥离在剪影上最抢眼）， 中段略收（-27 → -22），落页再压回 0。起手与落页都必须为 0，才能和静止页严丝合缝。 */@keyframes h5BookBendNegSoft{0%{transform:rotateY(0)}3%{transform:rotateY(-7deg)}8%{transform:rotateY(-17deg)}16%{transform:rotateY(-26deg)}26%{transform:rotateY(-30deg)}40%{transform:rotateY(-27deg)}56%{transform:rotateY(-22deg)}72%{transform:rotateY(-15deg)}86%{transform:rotateY(-6deg)}to{transform:rotateY(0)}}@keyframes h5BookBendPosSoft{0%{transform:rotateY(0)}3%{transform:rotateY(7deg)}8%{transform:rotateY(17deg)}16%{transform:rotateY(26deg)}26%{transform:rotateY(30deg)}40%{transform:rotateY(27deg)}56%{transform:rotateY(22deg)}72%{transform:rotateY(15deg)}86%{transform:rotateY(6deg)}to{transform:rotateY(0)}}/*! 硬翻是硬卡纸，几乎不弯 */@keyframes h5BookBendNegHard{0%{transform:rotateY(0)}12%{transform:rotateY(-1.5deg)}30%{transform:rotateY(-5deg)}50%{transform:rotateY(-4deg)}75%{transform:rotateY(-1.5deg)}to{transform:rotateY(0)}}@keyframes h5BookBendPosHard{0%{transform:rotateY(0)}12%{transform:rotateY(1.5deg)}30%{transform:rotateY(5deg)}50%{transform:rotateY(4deg)}75%{transform:rotateY(1.5deg)}to{transform:rotateY(0)}}/*! 2026-09-28：兜底时长改走 --dur-soft / --dur-hard（原来主体之外的层一律写死 .9s） */.h5-book-leaf-right.h5-book-leaf-soft .h5-book-face-front .h5-book-seg-out{animation:h5BookBendNegSoft var(--turn-dur, var(--dur-soft)) linear both}.h5-book-leaf-right.h5-book-leaf-soft .h5-book-face-back .h5-book-seg-out,.h5-book-leaf-left.h5-book-leaf-soft .h5-book-face-front .h5-book-seg-out{animation:h5BookBendPosSoft var(--turn-dur, var(--dur-soft)) linear both}.h5-book-leaf-left.h5-book-leaf-soft .h5-book-face-back .h5-book-seg-out{animation:h5BookBendNegSoft var(--turn-dur, var(--dur-soft)) linear both}.h5-book-leaf-right.h5-book-leaf-hard .h5-book-face-front .h5-book-seg-out{animation:h5BookBendNegHard var(--turn-dur, var(--dur-hard)) linear both}.h5-book-leaf-right.h5-book-leaf-hard .h5-book-face-back .h5-book-seg-out,.h5-book-leaf-left.h5-book-leaf-hard .h5-book-face-front .h5-book-seg-out{animation:h5BookBendPosHard var(--turn-dur, var(--dur-hard)) linear both}.h5-book-leaf-left.h5-book-leaf-hard .h5-book-face-back .h5-book-seg-out{animation:h5BookBendNegHard var(--turn-dur, var(--dur-hard)) linear both}/*! 2026-09-17 起，两段铰链的纸感同时挂三件事： ① 外段绕接缝弯（上面 8 条） ② 两段各自受光渐变（.h5-book-seg::after），接缝处取同一数值，折缝上不会出现亮度台阶 ③ 弯起来的外段上再打一道掠过纸面的反光（.h5-book-sheen） *//*! 正面：按纸张受光算 —— 纸越接近侧立（90°）越背光，所以到 37% 左右压到最暗。 0% 必须为 0：起手那一帧必须和静止时的照片完全一致，否则中线会突然压出一道折痕 */@keyframes h5BookShadeFront{0%{opacity:0}10%{opacity:.2}22%{opacity:.46}37%{opacity:.86}to{opacity:.86}}/*! 背面：90° 之后才转过来见光，由暗到亮、落页时完全正常曝光 */@keyframes h5BookShadeBack{0%{opacity:.86}40%{opacity:.86}56%{opacity:.52}76%{opacity:.24}to{opacity:0}}@keyframes h5BookSheen{0%{background-position:120% 0;opacity:0}18%{opacity:.55}42%{opacity:.8}to{background-position:-30% 0;opacity:0}}/*! 书脊暗影：纸抬起来把中间那道沟压得更深。起手同样从 0 起，避免开场闪一下折痕 */@keyframes h5BookGutter{0%{opacity:0}14%{opacity:.55}40%{opacity:1}to{opacity:.72}}/*! 投影：结构光下，贴面时是一条细影；抬起来后变大、变散；落页时收干净。 0% 必须为 0（贴面那一刻还不该有影），否则开场会在新页上压出一道暗带 */@keyframes h5BookCastNext{0%{opacity:0;transform:scaleX(.28)}14%{opacity:.58;transform:scaleX(.6)}34%{opacity:.78;transform:scaleX(1)}50%{opacity:.84;transform:scaleX(1.24)}70%{opacity:.46;transform:scaleX(1.48)}88%{opacity:.18;transform:scaleX(1.62)}to{opacity:0;transform:scaleX(1.72)}}@keyframes h5BookCastPrev{0%{opacity:0;transform:scaleX(.28)}14%{opacity:.58;transform:scaleX(.6)}34%{opacity:.78;transform:scaleX(1)}50%{opacity:.84;transform:scaleX(1.24)}70%{opacity:.46;transform:scaleX(1.48)}88%{opacity:.18;transform:scaleX(1.62)}to{opacity:0;transform:scaleX(1.72)}}.h5-book-leaf-right.h5-book-leaf-soft{animation:h5BookTurnNextSoft var(--turn-dur, var(--dur-soft)) linear both}.h5-book-leaf-left.h5-book-leaf-soft{animation:h5BookTurnPrevSoft var(--turn-dur, var(--dur-soft)) linear both}.h5-book-leaf-right.h5-book-leaf-hard{animation:h5BookTurnNextHard var(--turn-dur, var(--dur-hard)) linear both}.h5-book-leaf-left.h5-book-leaf-hard{animation:h5BookTurnPrevHard var(--turn-dur, var(--dur-hard)) linear both}/*! ═══ 2026-09-28：纸缘厚度补偿（书厚度翻动速度脱节）═══ 症状：翻页全程纸页主体一直在翻，但厚度侧边（.h5-book-edge）到收尾段几乎看不见了， 看着就是「厚度掉队、没跟上」。 成因：纸缘的可见宽度 = 翻转角的正弦值（角度越接近 90° 越正对镜头、越宽）。 而主体关键帧在收尾段角度几乎不动（硬翻 76%→100% 只从 -158° 磨到 -180°）， 正弦值一路塌到 0 —— 厚度就在最后 1/4 时段消失了。 修法：不动主体关键帧（h5BookTurn* 是已实测定案的手感基线）， 只给厚度补一条**同周期、同起落**的 scaleX 补偿曲线，在塌掉的尾段把厚度放大补回来。 两条硬约束：① 0% 与 100% 必须为 0 —— 起手帧要跟静止照片严丝合缝，收尾帧纸已翻到另一面贴平； ② 补的是 scaleX（边条自身厚度方向），不碰 rotateY，避免和主体角度互相干扰。 注：scaleX 与几何 sin 是**相乘**关系，所以中段峰值处保持 1（纯几何）， 只有尾段才放大（>1），这样中段物理感不变、尾段托住不掉队。 */.h5-book-leaf-right.h5-book-leaf-hard .h5-book-edge{animation:h5BookEdgeNextHard var(--turn-dur, var(--dur-hard)) linear both}.h5-book-leaf-left.h5-book-leaf-hard .h5-book-edge{animation:h5BookEdgePrevHard var(--turn-dur, var(--dur-hard)) linear both}/*! 前进（右叶向左翻走）：尾段 76%→90% 的 scaleX 由 2.2 收到 1.8，把原来会塌到 1px 以下的厚度托住 */@keyframes h5BookEdgeNextHard{0%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(90deg) scaleX(0)}8%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(90deg) scaleX(1.6)}22%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(90deg) scaleX(1.15)}40%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(90deg) scaleX(1)}58%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(90deg) scaleX(1.1)}76%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(90deg) scaleX(2.2)}90%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(90deg) scaleX(1.8)}to{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(90deg) scaleX(0)}}/*! 后退（左叶向右翻回）：角度符号相反但 sin|θ| 对称，故补偿曲线与前进完全一致，只是 rotateY 取反 */@keyframes h5BookEdgePrevHard{0%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(-90deg) scaleX(0)}8%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(-90deg) scaleX(1.6)}22%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(-90deg) scaleX(1.15)}40%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(-90deg) scaleX(1)}58%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(-90deg) scaleX(1.1)}76%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(-90deg) scaleX(2.2)}90%{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(-90deg) scaleX(1.8)}to{transform:translateZ(calc(var(--pt-px) / -2)) rotateY(-90deg) scaleX(0)}}/*! 2026-09-05：后台预设幻灯切换效果的 sg* keyframes（预览 Modal 翻页动画用，与 SlidePlayer 同源） */.promo-root{--gold: #C9A96E;--gold-deep: #A8874C;--gold-ink: #8A6A32;--gold-pale: #E8D6AE;--gold-wash: #FBF6EC;--ink: #141210;--ink-2: #1E1A15;--ink-3: #2A241D;--ink-4: #3A322A;--paper: #FAF7F2;--paper-2: #F2EDE4;--surface: #FFFFFF;--text: #1B1712;--text-2: #5C5347;--text-3: #736A5D;--on-ink: #F6F1E7;--on-ink-2: rgba(246,241,231,.7);--on-ink-3: rgba(246,241,231,.55);--line: rgba(27,23,18,.09);--line-2: rgba(27,23,18,.16);--line-ink: rgba(246,241,231,.14);--line-gold: rgba(201,169,110,.34);--ok: #3F7A55;--warn: #B4803A;--r-xs:8px;--r-s:12px;--r-m:16px;--r-l:22px;--r-xl:28px;--r-full:999px;--sh-1: 0 1px 2px rgba(20,18,16,.05), 0 10px 24px -14px rgba(20,18,16,.18);--sh-2: 0 2px 6px rgba(20,18,16,.06), 0 22px 48px -20px rgba(20,18,16,.26);--maxw: 430px;--pad: 20px;--spine-h: 58px;--font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;--font-latin: Georgia, "Times New Roman", "Songti SC", serif}.promo-root *,.promo-root *:before,.promo-root *:after{box-sizing:border-box}.promo-root{margin:0;padding:0;-webkit-text-size-adjust:100%;font-family:var(--font);color:var(--text);background:var(--paper-2);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}.promo-root img{max-width:100%;display:block}.promo-root button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}.promo-root a{color:inherit;text-decoration:none}.promo-root svg{display:block}.promo-root .stage{min-height:100vh;display:flex;justify-content:center;background:radial-gradient(1100px 520px at 50% -8%,rgba(201,169,110,.16),transparent 62%),var(--paper-2)}.promo-root .device{position:relative;width:100%;max-width:var(--maxw);background:var(--paper);overflow:clip;box-shadow:var(--sh-2)}@media (min-width:560px){.promo-root .stage{padding:28px 0 56px;align-items:flex-start}.promo-root .device{border-radius:34px;min-height:calc(100vh - 84px)}}.promo-root .wrap{padding:0 var(--pad)}.promo-root .sec{padding:52px 0 8px}.promo-root .sec--tight{padding-top:40px}.promo-root .sec-head{margin-bottom:22px}.promo-root .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}.promo-root .eyebrow:before{content:"";width:16px;height:1px;background:var(--gold)}.promo-root .eyebrow--ink{color:var(--gold-pale)}.promo-root .sec-title{margin:10px 0 0;font-size:25px;line-height:1.28;font-weight:800;letter-spacing:-.01em}.promo-root .sec-sub{margin:10px 0 0;font-size:13.5px;color:var(--text-2);line-height:1.72}.promo-root .rule{height:1px;background:var(--line);margin:0 var(--pad)}.promo-root .hero{position:relative;background:radial-gradient(620px 320px at 82% -6%,rgba(201,169,110,.24),transparent 66%),radial-gradient(520px 300px at 4% 104%,rgba(201,169,110,.11),transparent 62%),linear-gradient(168deg,var(--ink-3) 0%,var(--ink) 58%,var(--ink-2) 100%);color:var(--on-ink);padding:calc(20px + env(safe-area-inset-top)) 0 30px;overflow:hidden}.promo-root .hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:repeating-linear-gradient(58deg,rgba(201,169,110,.055) 0 1px,transparent 1px 15px),repeating-linear-gradient(-58deg,rgba(201,169,110,.045) 0 1px,transparent 1px 15px);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 82%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 82%)}.promo-root .hero-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:0 var(--pad)}.promo-root .hero-acts{display:flex;align-items:center;gap:8px;margin-left:auto}.promo-root .brand{display:flex;align-items:center;gap:9px}.promo-root .brand-mark{width:30px;height:30px;border-radius:9px;border:1px solid var(--line-gold);background:linear-gradient(150deg,rgba(201,169,110,.3),rgba(201,169,110,.04));display:grid;place-items:center}.promo-root .brand-mark svg{width:15px;height:15px;stroke:var(--gold-pale)}.promo-root .brand-name{font-size:13px;font-weight:700;letter-spacing:.02em}.promo-root .brand-en{font-family:var(--font-latin);font-size:9px;letter-spacing:.24em;color:var(--on-ink-3);text-transform:uppercase;margin-top:-2px}.promo-root .hero-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--r-full);border:1px solid var(--line-gold);font-size:11px;color:var(--gold-pale);background:rgba(201,169,110,.09)}.promo-root .hero-badge svg{width:12px;height:12px;stroke:var(--gold)}.promo-root .theme-btn{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:26px;padding:0 11px;border-radius:var(--r-full);border:1px solid var(--line-gold);font-size:11px;font-weight:600;color:var(--gold-pale);background:rgba(201,169,110,.09);transition:.24s ease}.promo-root .theme-btn svg{width:12px;height:12px;stroke:var(--gold)}.promo-root .theme-btn.on{background:linear-gradient(120deg,rgba(227,192,122,.3),rgba(227,192,122,.1))}.promo-root .theme-btn:active{transform:scale(.96)}.promo-root .hero-head{position:relative;z-index:2;padding:26px var(--pad) 0}.promo-root .hero-title{margin:0;font-size:31px;line-height:1.24;font-weight:800;letter-spacing:-.015em}.promo-root .hero-title em{font-style:normal;background:linear-gradient(100deg,var(--gold-pale),var(--gold) 52%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}.promo-root .hero-desc{margin:14px 0 0;font-size:13.5px;color:var(--on-ink-2);line-height:1.78}.promo-root .hero-roles{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}.promo-root .hero-roles span{font-size:11.5px;padding:5px 11px;border-radius:var(--r-full);border:1px solid var(--line-ink);color:var(--on-ink-2);background:rgba(246,241,231,.04)}.promo-root .card-stage{position:relative;z-index:3;margin:24px var(--pad) 0;perspective:1400px}.promo-root .card{position:relative;width:100%;aspect-ratio:1.6/1;transform-style:preserve-3d;transition:transform .78s cubic-bezier(.24,.86,.28,1)}.promo-root .card.flipped{transform:rotateY(180deg)}.promo-root .card-face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--r-m);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.promo-root .card-front{background:radial-gradient(420px 200px at 88% 4%,rgba(201,169,110,.26),transparent 60%),linear-gradient(152deg,var(--ink-4) 0%,var(--ink) 62%);border:1px solid var(--line-gold);box-shadow:var(--sh-2);padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between}.promo-root .card-front:before{content:"";position:absolute;top:9px;right:9px;bottom:9px;left:9px;border-radius:var(--r-s);border:1px solid rgba(201,169,110,.2);pointer-events:none}.promo-root .card-front:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(112deg,rgba(255,255,255,.028) 0 1px,transparent 1px 9px)}.promo-root .cf-top{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:2}.promo-root .cf-org{font-size:10.5px;letter-spacing:.16em;color:var(--gold-pale);font-weight:700}.promo-root .cf-en{font-family:var(--font-latin);font-size:8.5px;letter-spacing:.26em;color:var(--on-ink-3);text-transform:uppercase;margin-top:3px}.promo-root .cf-qr{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-gold);background:rgba(201,169,110,.08);display:grid;place-items:center}.promo-root .cf-qr svg{width:17px;height:17px;stroke:var(--gold)}.promo-root .cf-mid{position:relative;z-index:2}.promo-root .cf-name{margin:0;font-size:27px;font-weight:800;letter-spacing:.1em;line-height:1.1;background:linear-gradient(100deg,var(--gold-pale),var(--gold) 58%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}.promo-root .cf-slogan{margin:7px 0 0;font-size:11.5px;color:var(--on-ink-2);letter-spacing:.04em}.promo-root .cf-bot{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between}.promo-root .cf-chain{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--on-ink-3)}.promo-root .cf-chain i{font-style:normal;color:var(--gold)}.promo-root .cf-serial{font-family:var(--font-latin);font-size:9px;letter-spacing:.16em;color:var(--on-ink-3)}.promo-root .card-back{transform:rotateY(180deg);background:radial-gradient(400px 200px at 12% 0%,rgba(201,169,110,.22),transparent 62%),linear-gradient(152deg,var(--gold-wash) 0%,var(--surface) 70%);border:1px solid var(--line-gold);box-shadow:var(--sh-2);padding:16px 18px;display:flex;flex-direction:column;color:var(--text)}.promo-root .card-back:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--gold-pale),var(--gold),var(--gold-deep))}.promo-root .cb-role{display:flex;align-items:center;gap:9px}.promo-root .cb-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(150deg,rgba(201,169,110,.26),rgba(201,169,110,.08));border:1px solid var(--line-gold)}.promo-root .cb-ico svg{width:16px;height:16px;stroke:var(--gold-deep)}.promo-root .cb-role-name{font-size:16px;font-weight:800;letter-spacing:.04em}.promo-root .cb-role-en{font-family:var(--font-latin);font-size:8.5px;letter-spacing:.22em;color:var(--text-3);text-transform:uppercase}.promo-root .cb-line{margin:10px 0 0;font-size:12px;color:var(--text-2);line-height:1.62}.promo-root .cb-money{margin-top:auto;display:flex;gap:6px}.promo-root .cb-money div{flex:1;border-radius:var(--r-xs);background:var(--paper-2);border:1px solid var(--line);padding:7px 8px}.promo-root .cb-money b{display:block;font-size:11.5px;font-weight:700}.promo-root .cb-money span{font-size:9.5px;color:var(--text-3)}.promo-root .spine-pick{position:relative;z-index:3;margin:20px 0 0;padding:0 var(--pad)}.promo-root .spine-pick-label{font-size:10.5px;letter-spacing:.18em;color:var(--on-ink-3);display:flex;align-items:center;gap:8px;margin-bottom:10px}.promo-root .spine-pick-label:after{content:"";flex:1;height:1px;background:var(--line-ink)}.promo-root .role-row{overflow:hidden;padding-bottom:4px}.promo-root .role-row::-webkit-scrollbar{display:none}.promo-root .role-row-track{display:flex;width:-moz-max-content;width:max-content;animation:promo-marquee 26s linear infinite;will-change:transform}.promo-root .role-row:hover .role-row-track,.promo-root .role-row:active .role-row-track{animation-play-state:paused}.promo-root .role-row-set{display:flex;gap:8px;padding-right:8px;flex:0 0 auto}@keyframes promo-marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@media (prefers-reduced-motion: reduce){.promo-root .role-row{overflow-x:auto}.promo-root .role-row-track{animation:none}}.promo-root .role-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:var(--r-full);border:1px solid var(--line-ink);background:rgba(246,241,231,.04);color:var(--on-ink-2);font-size:13px;font-weight:600;white-space:nowrap;transition:.28s ease}.promo-root .role-chip svg{width:15px;height:15px;stroke:currentColor}.promo-root .role-chip.on{background:linear-gradient(120deg,var(--gold-pale),var(--gold));border-color:transparent;color:var(--ink);box-shadow:0 8px 22px -10px rgba(201,169,110,.85)}.promo-root .hero-kpi{position:relative;z-index:3;margin:24px var(--pad) 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-ink);padding-top:16px;gap:4px}.promo-root .hero-kpi div{text-align:center}.promo-root .hero-kpi b{display:block;font-size:17px;font-weight:800;color:var(--gold-pale);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.promo-root .hero-kpi span{font-size:10px;color:var(--on-ink-3);letter-spacing:.02em}.promo-root .spine{position:sticky;top:0;z-index:60;height:var(--spine-h);display:flex;align-items:center;gap:12px;padding:0 14px;background:rgba(250,247,242,.9);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line)}.promo-root .spine-mini{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding-right:12px;border-right:1px solid var(--line)}.promo-root .spine-mini-card{width:38px;height:25px;border-radius:6px;background:linear-gradient(152deg,var(--ink-4),var(--ink));border:1px solid var(--line-gold);display:grid;place-items:center;position:relative;overflow:hidden}.promo-root .spine-mini-card:after{content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;background:linear-gradient(180deg,var(--gold-pale),var(--gold-deep))}.promo-root .spine-mini-card svg{width:13px;height:13px;stroke:var(--gold)}.promo-root .spine-mini-txt b{display:block;font-size:11.5px;font-weight:700;line-height:1.25}.promo-root .spine-mini-txt span{font-size:9px;color:var(--text-3);letter-spacing:.06em}.promo-root .spine-nav{display:flex;gap:4px;overflow-x:auto;flex:1;scrollbar-width:none;-ms-overflow-style:none}.promo-root .spine-nav::-webkit-scrollbar{display:none}.promo-root .spine-nav a{flex:0 0 auto;padding:6px 11px;border-radius:var(--r-full);font-size:12px;color:var(--text-2);white-space:nowrap;transition:.2s}.promo-root .spine-nav a.on{background:var(--ink);color:var(--on-ink);font-weight:600}.promo-root .spine-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--gold-pale),var(--gold),var(--gold-deep));transition:width .12s linear}.promo-root .role-panel{margin-top:22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--sh-1);overflow:hidden}.promo-root .rp-head{padding:18px 18px 15px;background:linear-gradient(150deg,var(--gold-wash),var(--surface) 72%);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}.promo-root .rp-ico{width:44px;height:44px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(150deg,var(--ink-4),var(--ink));border:1px solid var(--line-gold)}.promo-root .rp-ico svg{width:20px;height:20px;stroke:var(--gold)}.promo-root .rp-title{font-size:17px;font-weight:800;letter-spacing:.02em}.promo-root .rp-tag{display:inline-block;margin-top:4px;font-size:10.5px;padding:2px 8px;border-radius:var(--r-full);background:rgba(201,169,110,.16);color:var(--gold-ink);font-weight:700}.promo-root .rp-body{padding:16px 18px 6px}.promo-root .rp-line{font-size:13.5px;color:var(--text-2);line-height:1.7;margin:0 0 14px}.promo-root .rp-label{font-size:10.5px;letter-spacing:.18em;color:var(--text-3);font-weight:700;text-transform:uppercase;margin-bottom:9px;display:flex;align-items:center;gap:8px}.promo-root .rp-label:after{content:"";flex:1;height:1px;background:var(--line)}.promo-root .rp-gains{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}.promo-root .rp-gains li{display:flex;gap:10px;font-size:13px;color:var(--text);line-height:1.6}.promo-root .rp-gains svg{width:15px;height:15px;flex:0 0 auto;margin-top:4px;stroke:var(--gold-deep)}.promo-root .rp-money{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.promo-root .rp-money div{border:1px solid var(--line);border-radius:var(--r-s);padding:10px 10px 9px;background:var(--paper)}.promo-root .rp-money b{display:block;font-size:12.5px;font-weight:700;margin-bottom:2px}.promo-root .rp-money span{font-size:10px;color:var(--text-3)}.promo-root .rp-foot{padding:14px 18px 18px;display:flex;gap:9px;align-items:center}.promo-root .rp-foot .mini-note{font-size:11px;color:var(--text-3);flex:1}.promo-root .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 20px;border-radius:var(--r-full);font-size:14px;font-weight:700;letter-spacing:.01em;transition:transform .16s ease,box-shadow .2s ease,opacity .2s}.promo-root .btn:active{transform:scale(.97)}.promo-root .btn svg{width:16px;height:16px}.promo-root .btn--gold{background:linear-gradient(120deg,var(--gold-pale),var(--gold) 55%,var(--gold-deep));color:var(--ink);box-shadow:0 10px 26px -12px rgba(201,169,110,.9)}.promo-root .btn--ink{background:var(--ink);color:var(--on-ink)}.promo-root .btn--line{border:1px solid var(--line-2);color:var(--text);background:var(--surface)}.promo-root .btn--block{width:100%}.promo-root .btn--sm{height:36px;padding:0 15px;font-size:12.5px}.promo-root .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.promo-root .tile{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:14px 14px 13px;box-shadow:var(--sh-1);position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}.promo-root .tile:active{transform:translateY(1px) scale(.99)}.promo-root .tile:after{content:"";position:absolute;right:-24px;top:-24px;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,110,.15),transparent 70%)}.promo-root .t-ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(150deg,rgba(201,169,110,.2),rgba(201,169,110,.05));border:1px solid var(--line-gold);margin-bottom:11px}.promo-root .t-ico svg{width:17px;height:17px;stroke:var(--gold-deep)}.promo-root .t-name{font-size:13.5px;font-weight:800;letter-spacing:.01em}.promo-root .t-desc{margin:5px 0 0;font-size:11.5px;color:var(--text-2);line-height:1.6}.promo-root .t-meta{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:10.5px;color:var(--gold-ink);font-weight:700;display:flex;align-items:center;gap:5px}.promo-root .t-meta svg{width:11px;height:11px;stroke:currentColor}.promo-root .hscroll{display:flex;gap:11px;overflow-x:auto;padding:2px var(--pad) 14px;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}.promo-root .hscroll::-webkit-scrollbar{display:none}.promo-root .place{flex:0 0 200px;scroll-snap-align:start;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-1);display:flex;flex-direction:column}.promo-root .place-cover{height:88px;position:relative;background:linear-gradient(150deg,var(--ink-4),var(--ink));display:grid;place-items:center}.promo-root .place-cover svg{width:26px;height:26px;stroke:var(--gold);opacity:.85}.promo-root .place-cover:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(112deg,rgba(201,169,110,.06) 0 1px,transparent 1px 10px)}.promo-root .place-badge{position:absolute;left:10px;top:10px;z-index:2;font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:var(--r-full);background:rgba(20,18,16,.62);color:var(--gold-pale);border:1px solid var(--line-gold);backdrop-filter:blur(6px)}.promo-root .place-body{padding:11px 12px 13px;display:flex;flex-direction:column;flex:1}.promo-root .place-name{font-size:13px;font-weight:800}.promo-root .place-desc{margin:4px 0 0;font-size:11px;color:var(--text-2);line-height:1.55}.promo-root .place-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:var(--text-3)}.promo-root .place-price{color:var(--gold-ink);font-weight:800;font-size:12.5px}.promo-root .mkt-list{display:grid;gap:12px}.promo-root .mkt{position:relative;overflow:hidden;border:1px solid var(--line-gold);border-radius:var(--r-l);background:radial-gradient(340px 160px at 100% 0%,rgba(201,169,110,.16),transparent 66%),var(--surface);box-shadow:var(--sh-1);padding:16px 16px 14px}.promo-root .mkt-top{display:flex;align-items:center;gap:11px}.promo-root .mkt-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(150deg,rgba(201,169,110,.24),rgba(201,169,110,.06));border:1px solid var(--line-gold)}.promo-root .mkt-ico svg{width:19px;height:19px;stroke:var(--gold-ink)}.promo-root .mkt-name{font-size:15px;font-weight:800;letter-spacing:.01em}.promo-root .mkt-en{font-family:var(--font-latin);font-size:10px;color:var(--text-3);letter-spacing:.07em}.promo-root .mkt-badge{margin-left:auto;flex:0 0 auto;font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:var(--r-full);background:rgba(20,18,16,.72);color:var(--gold-pale);border:1px solid var(--line-gold)}.promo-root .mkt-line{margin:11px 0 0;font-size:12.5px;color:var(--text-2);line-height:1.68}.promo-root .mkt-points{margin:11px 0 0;padding:0;list-style:none;display:grid;gap:7px}.promo-root .mkt-points li{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:var(--text-2);line-height:1.6}.promo-root .mkt-points svg{width:13px;height:13px;stroke:var(--gold-ink);flex:0 0 auto;margin-top:3px}.promo-root .mkt-foot{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line-2);display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--gold-ink)}.promo-root .mkt-foot svg{width:12px;height:12px;stroke:currentColor}.promo-root .mkt-extra-h{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--text-3)}.promo-root .mkt-extra-h svg{width:12px;height:12px;stroke:currentColor}.promo-root .mkt-list--hi .mkt{border-color:var(--gold);box-shadow:0 16px 36px -22px rgba(168,135,76,.85),var(--sh-1)}.promo-root .mkt-list--hi .mkt:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold-pale),var(--gold) 55%,var(--gold-deep))}.promo-root .mkt-list--hi .mkt-ico{background:linear-gradient(150deg,rgba(201,169,110,.34),rgba(201,169,110,.08));border-color:var(--gold)}.promo-root .mkt-list--hi .mkt-badge{background:linear-gradient(120deg,var(--gold-pale),var(--gold) 60%,var(--gold-deep));color:var(--ink);border-color:transparent}.promo-root .mkt-idx{flex:0 0 auto;font-family:var(--font-latin);font-size:16px;font-weight:800;color:var(--gold-ink);letter-spacing:.02em;margin-right:-4px}.promo-root .cap{border-top:1px solid var(--line)}.promo-root .cap:last-child{border-bottom:1px solid var(--line)}.promo-root .cap-row{width:100%;display:flex;align-items:center;gap:14px;padding:15px 2px;text-align:left}.promo-root .cap-no{font-family:var(--font-latin);font-size:12px;font-weight:700;color:var(--gold-ink);letter-spacing:.06em;flex:0 0 auto;width:26px}.promo-root .cap-name{font-size:14.5px;font-weight:700;flex:0 0 auto}.promo-root .cap-brief{flex:1;font-size:11.5px;color:var(--text-3);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.promo-root .cap-arrow{flex:0 0 auto;transition:transform .28s ease}.promo-root .cap-arrow svg{width:15px;height:15px;stroke:var(--text-3)}.promo-root .cap.open .cap-arrow{transform:rotate(90deg)}.promo-root .cap-body{max-height:0;overflow:hidden;transition:max-height .36s cubic-bezier(.3,.9,.3,1)}.promo-root .cap.inner .cap-body{max-height:220px}.promo-root .cap-body-in{padding:0 2px 16px 40px;font-size:12.5px;color:var(--text-2);line-height:1.74}.promo-root .cap-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.promo-root .cap-tags span{font-size:10.5px;padding:3px 9px;border-radius:var(--r-full);background:var(--paper-2);color:var(--text-2);border:1px solid var(--line)}.promo-root .steps{position:relative;padding-left:30px}.promo-root .steps:before{content:"";position:absolute;left:11px;top:8px;bottom:26px;width:1px;background:linear-gradient(180deg,var(--gold),var(--line) 88%)}.promo-root .step{position:relative;padding-bottom:20px}.promo-root .step:last-child{padding-bottom:0}.promo-root .step-dot{position:absolute;left:-30px;top:2px;width:23px;height:23px;border-radius:50%;background:var(--surface);border:1px solid var(--line-gold);display:grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--gold-ink)}.promo-root .step:first-child .step-dot{background:linear-gradient(120deg,var(--gold-pale),var(--gold));border-color:transparent;color:var(--ink)}.promo-root .step-h{display:flex;align-items:baseline;gap:9px}.promo-root .step-name{font-size:14.5px;font-weight:800}.promo-root .step-time{font-size:10.5px;color:var(--gold-ink);font-weight:700;background:rgba(201,169,110,.14);padding:2px 8px;border-radius:var(--r-full)}.promo-root .step-desc{margin:6px 0 0;font-size:12.5px;color:var(--text-2);line-height:1.7}.promo-root .entry-strip{margin-top:20px;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line-gold);background:linear-gradient(140deg,var(--gold-wash),var(--surface));display:grid;grid-template-columns:repeat(3,1fr)}.promo-root .entry-strip div{padding:14px 10px;text-align:center;border-right:1px solid var(--line)}.promo-root .entry-strip div:last-child{border-right:0}.promo-root .entry-strip b{display:block;font-size:15px;font-weight:800;color:var(--gold-ink)}.promo-root .entry-strip span{font-size:10px;color:var(--text-2)}.promo-root .pitch-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none;-ms-overflow-style:none}.promo-root .pitch-tabs::-webkit-scrollbar{display:none}.promo-root .pitch-tab{flex:0 0 auto;height:34px;padding:0 14px;border-radius:var(--r-full);border:1px solid var(--line-2);background:var(--surface);font-size:12.5px;color:var(--text-2);font-weight:600;white-space:nowrap;transition:.22s}.promo-root .pitch-tab.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}.promo-root .pitch-card{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--sh-1);overflow:hidden}.promo-root .pitch-head{padding:14px 16px;border-bottom:1px solid var(--line);background:linear-gradient(150deg,var(--gold-wash),var(--surface) 76%);display:flex;align-items:center;gap:10px}.promo-root .pitch-head svg{width:16px;height:16px;stroke:var(--gold-deep);flex:0 0 auto}.promo-root .pitch-head b{font-size:13.5px;font-weight:800}.promo-root .pitch-head span{font-size:11px;color:var(--text-3)}.promo-root .pitch-body{padding:4px 16px 16px}.promo-root .pitch-part{padding:13px 0;border-bottom:1px dashed var(--line)}.promo-root .pitch-part:last-child{border-bottom:0}.promo-root .pitch-kicker{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--gold-ink);display:flex;align-items:center;gap:7px;margin-bottom:7px}.promo-root .pitch-kicker i{font-style:normal;width:16px;height:16px;border-radius:5px;background:rgba(201,169,110,.18);display:grid;place-items:center;font-size:9.5px;color:var(--gold-ink)}.promo-root .pitch-text{margin:0;font-size:13px;color:var(--text);line-height:1.82}.promo-root .pitch-foot{padding:13px 16px;border-top:1px solid var(--line);background:var(--paper);display:flex;gap:9px}.promo-root .pitch-foot .btn{flex:1}.promo-root .tail{margin-top:44px;background:radial-gradient(620px 300px at 86% 0%,rgba(201,169,110,.22),transparent 62%),linear-gradient(168deg,var(--ink-3),var(--ink) 62%);color:var(--on-ink);padding:40px 0 calc(100px + env(safe-area-inset-bottom));position:relative;overflow:hidden}.promo-root .tail:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:repeating-linear-gradient(58deg,rgba(201,169,110,.05) 0 1px,transparent 1px 15px);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 78%);mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 78%)}.promo-root .tail>*{position:relative;z-index:2}.promo-root .tail-title{margin:10px 0 0;font-size:23px;font-weight:800;line-height:1.34}.promo-root .tail-title em{font-style:normal;background:linear-gradient(100deg,var(--gold-pale),var(--gold) 58%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}.promo-root .tail-desc{margin:12px 0 0;font-size:13px;color:var(--on-ink-2);line-height:1.76}.promo-root .tail-actions{margin-top:22px;display:grid;gap:10px}.promo-root .tail-facts{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-ink);display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}.promo-root .tail-facts>div{display:flex;gap:9px;align-items:flex-start}.promo-root .tail-facts>div>div{flex:1;min-width:0}.promo-root .tail-facts svg{width:15px;height:15px;stroke:var(--gold);flex:0 0 auto;margin-top:3px}.promo-root .tail-facts b{display:block;font-size:12px;font-weight:700}.promo-root .tail-facts span{display:block;font-size:10.5px;color:var(--on-ink-3);line-height:1.55}.promo-root .foot{margin-top:30px;padding-top:18px;border-top:1px solid var(--line-ink);font-size:10.5px;color:var(--on-ink-3);line-height:1.9}.promo-root .dock{position:fixed;left:50%;transform:translate(-50%);bottom:0;width:100%;max-width:var(--maxw);z-index:80;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(250,247,242,0),rgba(250,247,242,.94) 34%);display:flex;gap:9px;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s ease}.promo-root .dock.show{opacity:1;pointer-events:auto}.promo-root .dock .btn{flex:1}.promo-root .dock .btn--ink{flex:0 0 auto;width:46px;padding:0}.promo-root .toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);z-index:120;max-width:calc(var(--maxw) - 60px);background:var(--ink);color:var(--on-ink);font-size:12.5px;padding:11px 17px;border-radius:var(--r-full);border:1px solid var(--line-gold);box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:.3s ease;display:flex;align-items:center;gap:8px;white-space:nowrap}.promo-root .toast svg{width:14px;height:14px;stroke:var(--gold)}.promo-root .toast.show{opacity:1;transform:translate(-50%)}.promo-root .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.24,.86,.28,1)}.promo-root .reveal.in{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.promo-root *{transition:none!important;animation:none!important}.promo-root .reveal{opacity:1;transform:none}}.promo-root[data-theme=tech]{--gold: #E3C07A;--gold-deep: #C79A4E;--gold-ink: #EBCB88;--gold-pale: #F7E6C0;--gold-wash: #1A1610;--ink: #05060A;--ink-2: #0A0C12;--ink-3: #10141C;--ink-4: #1B2028;--paper: #0C0E13;--paper-2: #07080C;--surface: #14171E;--text: #EFF1F5;--text-2: #AAB2BF;--text-3: #8E96A4;--on-ink: #F4F6FA;--on-ink-2: rgba(244,246,250,.72);--on-ink-3: rgba(244,246,250,.58);--line: rgba(239,241,245,.1);--line-2: rgba(239,241,245,.18);--line-ink: rgba(244,246,250,.14);--line-gold: rgba(227,192,122,.36);--ok: #63C08A;--warn: #E5A85F;--sh-1: 0 1px 2px rgba(0,0,0,.55), 0 12px 26px -16px rgba(0,0,0,.75);--sh-2: 0 2px 8px rgba(0,0,0,.6), 0 26px 52px -22px rgba(0,0,0,.85)}.promo-root[data-theme^=tech] .hero{background:radial-gradient(620px 300px at 84% -6%,rgba(227,192,122,.2),transparent 64%),radial-gradient(520px 280px at 0% 106%,rgba(122,166,255,.1),transparent 62%),linear-gradient(168deg,var(--ink-3) 0%,var(--ink) 58%,var(--ink-2) 100%)}.promo-root[data-theme^=tech] .hero:after{background-image:repeating-linear-gradient(90deg,rgba(227,192,122,.055) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,rgba(227,192,122,.045) 0 1px,transparent 1px 22px)}.promo-root[data-theme^=tech] .spine{background:rgba(12,14,19,.9)}.promo-root[data-theme^=tech] .spine-nav a.on{background:linear-gradient(120deg,var(--gold-pale),var(--gold) 60%,var(--gold-deep));color:var(--ink);font-weight:700}.promo-root[data-theme^=tech] .dock{background:linear-gradient(180deg,rgba(12,14,19,0),rgba(12,14,19,.94) 34%)}.promo-root[data-theme^=tech] .mkt-badge,.promo-root[data-theme^=tech] .place-badge{background:rgba(227,192,122,.16);color:var(--gold-pale)}.promo-root[data-theme^=tech] .mkt-list--hi .mkt-badge{background:linear-gradient(120deg,var(--gold-pale),var(--gold) 60%,var(--gold-deep));color:var(--ink)}.promo-root[data-theme^=tech] .cb-money div{background:rgba(227,192,122,.07);border-color:var(--line-gold)}.promo-root[data-theme=tech-mid]{--gold: #D6B87C;--gold-deep: #B99A5C;--gold-ink: #E9CE96;--gold-pale: #F2E2C2;--gold-wash: #2A2820;--ink: #1B2028;--ink-2: #141821;--ink-3: #343A47;--ink-4: #3E4553;--paper: #2A2F3A;--paper-2: #222733;--surface: #333947;--text: #EEF0F4;--text-2: #B2B9C4;--text-3: #A2AAB7;--on-ink: #F3F5F8;--on-ink-2: rgba(243,245,248,.74);--on-ink-3: rgba(243,245,248,.66);--line: rgba(238,240,244,.12);--line-2: rgba(238,240,244,.2);--line-ink: rgba(243,245,248,.14);--line-gold: rgba(214,184,124,.4);--ok: #6CC792;--warn: #E9B06A;--sh-1: 0 1px 2px rgba(0,0,0,.42), 0 12px 26px -16px rgba(0,0,0,.62);--sh-2: 0 2px 8px rgba(0,0,0,.48), 0 26px 52px -22px rgba(0,0,0,.72)}.promo-root[data-theme=tech-mid] .hero{background:radial-gradient(620px 300px at 84% -6%,rgba(214,184,124,.16),transparent 64%),radial-gradient(520px 280px at 0% 106%,rgba(122,166,255,.09),transparent 62%),linear-gradient(168deg,var(--ink-4) 0%,var(--ink-3) 46%,var(--paper) 100%)}.promo-root[data-theme=tech-mid] .hero:after{background-image:repeating-linear-gradient(90deg,rgba(214,184,124,.05) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,rgba(214,184,124,.042) 0 1px,transparent 1px 22px)}.promo-root[data-theme=tech-mid] .spine{background:rgba(34,39,51,.9)}.promo-root[data-theme=tech-mid] .dock{background:linear-gradient(180deg,rgba(34,39,51,0),rgba(34,39,51,.94) 34%)}.promo-root[data-theme=tech-mid] .mkt-badge,.promo-root[data-theme=tech-mid] .place-badge{background:rgba(214,184,124,.15)}.promo-root[data-theme=tech-mid] .cb-money div{background:rgba(214,184,124,.06)}.promo-root{margin-left:-16px;margin-right:-16px}.promo-root .spine{top:var(--app-topbar-h, 53px)}.promo-root .dock{bottom:var(--app-tabbar-visible-h, 0px)}.promo-root .dock{z-index:90}.promo-root .toast{z-index:130}.promo-root .tail{padding-bottom:calc(80px + var(--app-tabbar-visible-h, 0px) + env(safe-area-inset-bottom))}@media (min-width: 1024px){.promo-root .dock{bottom:0}}.promo-root .rule--gap{margin-top:38px}.promo-root .card{overflow:visible;background:transparent;border-radius:0;box-shadow:none}.promo-root .promo-cta--plan{cursor:not-allowed;opacity:.55;filter:grayscale(.55);box-shadow:none}.promo-root .btn.promo-cta--inline{height:auto;padding:0;border:0;background:none;box-shadow:none;font-size:10.5px;font-weight:700;color:var(--gold-ink);letter-spacing:0}.promo-root .btn.promo-cta--inline svg{width:11px;height:11px;stroke:currentColor}.promo-root .btn.promo-cta--inline:active{transform:none;opacity:.65}.promo-root .promo-cta--plan.promo-cta--inline{color:var(--text-3)}.promo-root .rp-en{font-size:11px;color:var(--text-3);font-weight:600;margin-left:8px}.promo-root .sec-gap{margin-top:16px}.promo-root .sec-gap-lg{margin-top:26px}.promo-root .tail-line-btn{background:transparent;color:var(--on-ink);border-color:var(--line-ink)}.promo-root .dock .btn.dock-ico-btn{flex:0 0 auto;width:46px;padding:0}.promo-root .tile--row>div:last-child{flex:1;min-width:0}.promo-root .cap.inner .cap-body{max-height:380px}.promo-root .cap-cta{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}.promo-root .tile--row{display:flex;gap:13px;align-items:flex-start}.promo-root .tile--row .t-ico{margin-bottom:0;flex:0 0 auto}.promo-root .tile--row .t-desc{margin-top:6px}.promo-root .t-meta .promo-cta{margin-left:auto}.promo-root .join-actions{margin-top:18px;display:grid;gap:10px}.promo-root .share-bar{position:relative;z-index:3;margin:16px var(--pad) 0}.promo-root .share-bar-hint{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--on-ink-3);margin-bottom:10px}.promo-root .share-bar-hint svg{width:12px;height:12px;flex:0 0 auto}.promo-root .share-bar-hint b{color:var(--gold-pale);font-weight:700}.promo-root .btn:disabled{opacity:.45;cursor:not-allowed}.promo-root .tile--plan,.promo-root .mkt--plan{filter:grayscale(.55);opacity:.86}.promo-root .tile--plan:active,.promo-root .mkt--plan:active{transform:none}.promo-root .mkt-cta{margin-top:12px;display:flex;gap:8px}.promo-root .promo-rise{animation:promo-rise-in .34s cubic-bezier(.24,.86,.28,1) both}@keyframes promo-rise-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.promo-root .promo-rise{animation:none}}