/* 三种方案的视觉范围限定在应用区，继续使用既有深蓝、宝蓝受光与银白文字。 */
html[data-density="compact"] .application-experiments{padding:56px 0 64px;background:#030c1d;scroll-margin-top:88px;--application-scene-height:clamp(560px,calc(100svh - var(--application-header,88px)),840px)}
.application-experiment-heading{max-width:1240px;margin:0 auto 38px;padding:0 var(--space)}
.application-experiment-heading .app-label{font-size:15px;color:#a8c5e9;margin:0 0 19px}
.application-experiment-heading h2{font-size:clamp(32px,3.5cqw,52px);line-height:1.15;letter-spacing:-.035em;font-weight:500;max-width:760px;margin:0 0 19px;color:#eff5ff;text-wrap:balance}
.application-experiment-heading .app-intro{font-size:15px;line-height:1.75;color:#abc0db;max-width:680px;margin:0}
.application-review{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 24px;background:#12213a;color:#d9e8fb;border-top:1px solid #a1bdd426;font-size:13px}
.application-review button{background:#081328;color:#c8dcf5;border:1px solid #789fcd48;border-radius:6px;padding:9px 14px;cursor:pointer}
.application-review button[aria-pressed="true"]{background:#c1dbff;color:#061328}
.application-review button:focus-visible{outline:2px solid #e9f4ff;outline-offset:3px}

/* 全幅场景将文字放在生成图预留的暗部，只有左侧必要的阅读渐层，保留右侧场景细节。 */
.app-scene{position:relative;min-height:var(--application-scene-height);overflow:hidden;isolation:isolate;background:#030c1d}
.app-scene-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.app-scene-image{display:block;width:100%;height:100%;object-fit:cover;object-position:65% 50%}
.app-scene::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#020a19eb 0,#020a19c2 24%,#020a1961 47%,#020a1900 74%),linear-gradient(0deg,#020a195c,transparent 30%);pointer-events:none}
.app-scene-copy{position:relative;max-width:600px;padding:clamp(70px,12cqw,170px) var(--space);color:#edf5ff}
.app-scene-focus{font-size:12px;line-height:1.6;color:#b4d0f2;margin:0 0 20px}
.app-scene-title{font-size:clamp(35px,4cqw,61px);font-weight:500;line-height:1.14;letter-spacing:-.035em;color:#f1f7ff;margin:0 0 24px}
.app-scene-title-main,.app-scene-title-sub{display:block;text-wrap:balance}
/* 既有全站排版会将文字跨度设为普通换行，本区长应用名明确允许极窄画布的应急断行，避免单个词溢出。 */
.application-experiments .app-scene-title-main,.application-experiments .app-scene-title-sub,.application-experiments .app-poster-label{overflow-wrap:anywhere;word-break:normal}
.app-scene-title-sub{font-size:.57em;line-height:1.4;letter-spacing:-.015em;margin-top:9px;color:#c3d9f5}
.app-scene-body{font-size:17px;line-height:1.85;color:#d0dded;margin:0 0 25px;max-width:480px}
.app-scene-inquiry{display:inline-flex;align-items:center;gap:30px;min-height:44px;font-size:14px;color:#ecf5ff;text-decoration:none;border-bottom:1px solid #b9d8ff6b}
.app-scene-inquiry:hover{color:white;border-color:white}
.app-scene-inquiry:focus-visible{outline:2px solid #bddfff;outline-offset:5px}
.app-chapters .app-scene{max-width:1600px;margin:0 auto 24px}
.app-chapters .app-scene:last-child{margin-bottom:0}
.app-chapters .app-scene-media img{transform:translateY(var(--scene-parallax,0px)) scale(1.035)}
.app-chapters .app-scene:nth-child(even) .app-scene-copy{padding-top:clamp(90px,15cqw,200px)}

/* 长卷共用驻留视口，四个场景边缘用深蓝渐层连接，没有卡片边框、间隙或循环轮播。滚动仍来自正常文档。 */
.app-journey{position:relative}
.application-experiments[data-journey-mode="pinned"] .app-journey{height:calc(var(--application-scene-height) * 4)}
.application-experiments[data-journey-mode="pinned"] .app-journey-screen{position:sticky;top:var(--application-header,88px);height:var(--application-scene-height);overflow:hidden}
.application-experiments[data-journey-mode="pinned"] .app-journey-panorama{display:flex;width:400%;height:100%;will-change:transform}
.application-experiments[data-journey-mode="pinned"] .app-scene-horizontal{flex:0 0 25%;height:100%;min-height:0}
.application-experiments[data-journey-mode="pinned"] .app-scene-horizontal::before{background:linear-gradient(90deg,#030c1dd4,#030c1d9c 22%,#030c1d18 67%,#030c1d9c 100%),linear-gradient(0deg,#030c1dba,transparent 27%)}
.application-experiments[data-journey-mode="pinned"] .app-scene-horizontal .app-scene-copy{top:50%;transform:translateY(-50%);padding-top:40px;padding-bottom:96px}
.app-journey-rail{display:none}
.application-experiments[data-journey-mode="pinned"] .app-journey-rail{display:flex;align-items:center;gap:14px;position:absolute;left:var(--space);right:var(--space);bottom:25px;z-index:5}
.app-journey-progress{height:1px;flex:1;background:#b4d0f135;overflow:hidden;margin-right:20px}
.app-journey-progress span{display:block;height:100%;background:#e5f2ff;transform:scaleX(0);transform-origin:left}
.app-journey-stop{min-width:44px;min-height:44px;color:#c0d3ed;background:transparent;border:0;border-bottom:1px solid #8eadd845;cursor:pointer;font-size:13px}
.app-journey-stop[aria-current="true"]{color:white;border-color:#def0ff}
.app-journey-stop:focus-visible{outline:2px solid #bddfff;outline-offset:4px}
.application-experiments[data-journey-mode="reading"] .app-journey-panorama{transform:none!important}
.application-experiments[data-journey-mode="reading"] .app-scene-horizontal{margin-bottom:24px}

/* 拼贴以一幅主要画面和三处不同尺度的场景构成完整海报。图片部分相互压接，文字始终留在自己的画面内。 */
.app-poster{max-width:1360px;margin:0 auto;padding:0 var(--space)}
.app-poster-stage{position:relative;height:clamp(510px,43cqw,650px);isolation:isolate;margin-bottom:32px;background:radial-gradient(ellipse at 53% 50%,#0d285043,transparent 69%)}
.app-poster-piece{position:absolute;border:0;border-radius:0;padding:0;overflow:hidden;cursor:pointer;background:#07182c;box-shadow:0 18px 50px #0009145c;color:#eef6ff;text-align:left;transition:transform .28s;isolation:isolate}
.app-poster-piece-0{left:0;top:0;width:62%;height:59%;z-index:1}
.app-poster-piece-1{right:0;top:9%;width:32%;height:42%;z-index:2}
.app-poster-piece-2{left:7%;bottom:0;width:31%;height:32%;z-index:3}
.app-poster-piece-3{right:4%;bottom:4%;width:52%;height:42%;z-index:4}
.app-poster-piece::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#020a19df,transparent 66%);pointer-events:none}
.app-poster-piece img{object-position:72% 50%;transition:transform .45s}
.app-poster-piece:hover{transform:translateY(-4px)}
.app-poster-piece:hover img{transform:scale(1.025)}
.app-poster-piece:focus-visible{outline:2px solid #d8ebff;outline-offset:5px;z-index:6}
.app-poster-label{position:absolute;z-index:2;left:24px;right:48px;bottom:24px;font-size:clamp(17px,1.7cqw,24px);line-height:1.25;font-weight:500;letter-spacing:-.025em;max-width:420px;text-wrap:balance}
.app-poster-piece-0 .app-poster-label{font-size:clamp(23px,2.6cqw,36px)}
.app-poster-arrow{position:absolute;z-index:2;right:21px;bottom:26px;font-size:22px;color:#d1e6ff}
.app-poster-piece.is-selected .app-poster-label{text-decoration:underline;text-decoration-color:#bedbff99;text-underline-offset:7px;text-decoration-thickness:1px}
.app-poster-detail{display:grid;grid-template-columns:1fr 1.2fr;gap:24px 54px;align-items:start;padding:26px 0 0;border-top:1px solid #8eacd535}
.app-poster-detail .app-scene-title{font-size:clamp(25px,2.7cqw,39px);margin:0}
.app-poster-detail .app-scene-focus{margin-bottom:10px}
.app-poster-detail .app-scene-body{font-size:15px;margin-bottom:0;max-width:580px}
.app-poster-detail .app-scene-inquiry{grid-column:2;justify-self:start}

/* 手机采用完整纵向阅读，先展示场景再读原文。拼贴保留大小错落，但降低重叠，确保每个入口可点击。 */
@container website (max-width:900px){
  html[data-density="compact"] .application-experiments{padding:38px 0 44px;scroll-margin-top:76px}
  .application-experiment-heading{padding:0 24px;margin-bottom:28px}
  .application-experiment-heading h2{font-size:clamp(27px,7.5cqw,32px);max-width:600px;overflow-wrap:anywhere}
  .application-experiment-heading .app-intro{font-size:14px}
  .app-scene{min-height:0;margin-bottom:28px}
  .app-scene::before{display:none}
  .app-scene-media{position:relative;inset:auto;height:clamp(210px,54cqw,410px)}
  .app-scene-image{object-position:72% 50%}
  .app-scene-copy,.app-chapters .app-scene:nth-child(even) .app-scene-copy{padding:27px 24px 35px;max-width:none}
  .app-scene-title{font-size:34px;max-width:560px;margin-bottom:18px}
  .app-scene-focus{margin-bottom:15px}
  .app-scene-body{font-size:15px;line-height:1.8}
  .app-poster{padding:0 24px}
  .app-poster-stage{height:680px;margin-bottom:26px}
  .app-poster-piece-0{width:88%;height:32%}
  .app-poster-piece-1{top:35%;right:0;width:67%;height:27%}
  /* 下方两幅错开高度并分开文字区，保留拼贴节奏，同时避免较高层图片遮住细胞应用名称。 */
  .app-poster-piece-2{left:0;bottom:12%;width:43%;height:23%}
  .app-poster-piece-3{right:0;bottom:0;width:53%;height:31%}
  .app-poster-label{left:15px;right:36px;bottom:16px;font-size:16px;overflow-wrap:anywhere}
  .app-poster-piece-0 .app-poster-label{font-size:22px}
  .app-poster-arrow{right:13px;bottom:18px;font-size:18px}
  .app-poster-piece-2 .app-poster-label,.app-poster-piece-3 .app-poster-label{font-size:14px;right:15px}
  .app-poster-piece-2 .app-poster-arrow,.app-poster-piece-3 .app-poster-arrow{top:13px;bottom:auto}
  .app-poster-detail{display:block;padding-top:24px}
  .app-poster-detail .app-scene-title{font-size:28px;margin-bottom:20px}
  .app-poster-detail .app-scene-inquiry{margin-top:16px}
}

/* 小手机给每幅场景更宽的文字区域，改为左右错开的纵向拼贴；用真实阅读空间保留长英文词，避免把名字拆成碎片。 */
@container website (max-width:500px){
  .app-poster-stage{height:1000px}
  .app-poster-piece-0{left:0;top:0;width:94%;height:24%}
  .app-poster-piece-1{right:0;top:27%;width:84%;height:23%}
  .app-poster-piece-2{left:0;top:54%;bottom:auto;width:78%;height:20%}
  .app-poster-piece-3{right:0;bottom:0;width:90%;height:23%}
  .app-poster-piece-2 .app-poster-label,.app-poster-piece-3 .app-poster-label{font-size:16px;right:15px}
}

/* 拼贴精修：标题与介绍对齐同一画布，上方只占必要的阅读高度，让四张照片和选中说明形成连续的视觉区域。 */
html[data-density="compact"] .application-experiments[data-application-layout="collage"]{padding-top:46px;padding-bottom:56px}
.application-experiments[data-application-layout="collage"] .application-experiment-heading{max-width:1360px;display:grid;grid-template-columns:1.2fr .85fr;gap:13px 64px;margin-bottom:30px}
.application-experiments[data-application-layout="collage"] .app-label{grid-column:1;margin:0;font-size:14px}
.application-experiments[data-application-layout="collage"] .application-experiment-heading h2{grid-column:1;grid-row:2;margin:0;max-width:640px;font-size:clamp(30px,3.2cqw,44px);line-height:1.16;letter-spacing:-.03em}
.application-experiments[data-application-layout="collage"] .app-intro{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:385px;font-size:14px;line-height:1.8}

/* 主要照片更宽，右下照片轻压主图边缘；左下局部图与右下图之间保留独立的文字空间。裁切中心按各场景的主体位置分别设置。 */
.app-poster-stage{height:clamp(450px,35cqw,540px);margin-bottom:26px;background:radial-gradient(ellipse at 54% 50%,#0d285036,transparent 70%)}
.app-poster-piece-0{left:0;top:0;width:61%;height:64%}
.app-poster-piece-1{right:0;top:11%;width:33%;height:39%}
/* 左下图在主图下方向右缩进画布宽度的百分之四，并保留上缘压接；底边与右下图同为距画布底部百分之四，宽度和高度保持上一版。 */
.app-poster-piece-2{left:4%;top:auto;bottom:4%;width:40%;height:36%}
.app-poster-piece-3{right:3%;bottom:4%;width:51%;height:45%}
.app-poster-piece-0 img{object-position:74% 62%}
.app-poster-piece-1 img{object-position:77% 57%}
.app-poster-piece-2 img{object-position:69% 55%}
.app-poster-piece-3 img{object-position:73% 62%}
.app-poster-piece{box-shadow:0 16px 38px #00091452;transition:transform .24s,box-shadow .24s}
.app-poster-piece::before{background:linear-gradient(0deg,#020a19ef, #020a1980 28%,transparent 68%)}
.app-poster-piece:hover{transform:translateY(-3px);box-shadow:0 21px 42px #00091468}
.app-poster-piece:hover img{transform:scale(1.018)}

/* 四幅照片使用相同的主副标题尺度，减少第一项过大造成的失衡。选中状态由照片底部细光和箭头表达，不给整段名称画下划线。 */
.app-poster-label,.app-poster-piece-0 .app-poster-label{left:22px;right:50px;bottom:23px;max-width:350px;font-size:inherit;text-wrap:initial;text-decoration:none}
.application-experiments .app-poster-label-main{display:block;font-size:clamp(18px,1.6cqw,23px);line-height:1.28;font-weight:500;letter-spacing:-.022em;text-wrap:balance;overflow-wrap:anywhere}
.application-experiments .app-poster-label-sub{display:block;font-size:clamp(13px,1.15cqw,16px);line-height:1.5;font-weight:400;letter-spacing:0;color:#bdd2ed;margin-top:4px;overflow-wrap:anywhere}
.app-poster-piece.is-selected .app-poster-label{text-decoration:none}
.app-poster-piece::after{content:"";position:absolute;z-index:3;left:22px;bottom:12px;width:0;height:1px;background:#d0e7ff;opacity:0;transition:width .24s,opacity .24s;pointer-events:none}
.app-poster-piece.is-selected::after{width:74px;opacity:.85}
.app-poster-arrow{right:22px;bottom:28px;font-size:20px;color:#bdd6f6;transition:color .2s}
.app-poster-piece.is-selected .app-poster-arrow{color:#eff7ff}

/* 电脑说明区保持稳定高度，标题、说明和咨询入口形成同一横向阅读带；快速切换只让新内容短暂淡入，不带动整张海报。 */
.app-poster-detail{grid-template-columns:.85fr 1.25fr auto;gap:24px 40px;align-items:center;min-height:162px;padding:25px 0 0;border-top-color:#8eacd52b}
.app-poster-detail .app-scene-title{font-size:clamp(23px,2.15cqw,30px);line-height:1.22;font-weight:500;margin:0}
.app-poster-detail .app-scene-title-sub{font-size:.62em;line-height:1.5;margin-top:7px}
.app-poster-detail .app-scene-focus{font-size:11px;margin-bottom:9px;color:#9dbde5}
.app-poster-detail .app-scene-body{font-size:15px;line-height:1.8;max-width:550px}
.app-poster-detail .app-scene-inquiry{grid-column:auto;justify-self:end;align-self:center;white-space:nowrap;font-size:13px;gap:18px}
.app-poster-detail.has-selection-update>*{animation:poster-detail-arrive .22s ease-out}
@keyframes poster-detail-arrive{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* 平板保留同一拼贴构图，降低画布高度并加宽文字区；说明改成两列，以免咨询入口挤压正文。 */
@container website (max-width:1100px){
  .application-experiments[data-application-layout="collage"] .application-experiment-heading{gap:13px 32px}
  .app-poster-detail{grid-template-columns:.85fr 1.25fr;gap:18px 30px}
  .app-poster-detail .app-scene-inquiry{grid-column:2;justify-self:start;margin-top:0}
}
@container website (max-width:900px){
  .application-experiments[data-application-layout="collage"] .application-experiment-heading{display:block;margin-bottom:26px}
  .application-experiments[data-application-layout="collage"] .app-label{margin-bottom:15px}
  .application-experiments[data-application-layout="collage"] .application-experiment-heading h2{font-size:clamp(28px,5cqw,36px);margin-bottom:16px;max-width:600px}
  .application-experiments[data-application-layout="collage"] .app-intro{font-size:14px;max-width:580px}
  .app-poster-stage{height:460px}
  .app-poster-label,.app-poster-piece-0 .app-poster-label{left:16px;right:35px;bottom:19px}
  .app-poster-piece::after{left:16px;bottom:10px}
  .app-poster-arrow{right:14px;top:auto;bottom:23px;font-size:18px}
  .app-poster-piece-2 .app-poster-arrow,.app-poster-piece-3 .app-poster-arrow{top:auto;bottom:23px}
  .application-experiments .app-poster-label-main{font-size:18px}
  .application-experiments .app-poster-label-sub{font-size:13px}
  .app-poster-detail{display:block;min-height:0;padding-top:22px}
  .app-poster-detail .app-scene-title{font-size:25px;margin-bottom:16px}
  .app-poster-detail .app-scene-inquiry{margin-top:18px}
}

/* 手机照片改为左右错开的正常文档流，选中说明可以直接插在该照片后面。每幅图仍有不同宽度，完整单词得到真实阅读空间。 */
@container website (max-width:600px){
  html[data-density="compact"] .application-experiments[data-application-layout="collage"]{padding-top:36px;padding-bottom:44px}
  .application-experiments[data-application-layout="collage"] .application-experiment-heading h2{font-size:clamp(27px,7.5cqw,32px)}
  .app-poster-stage{height:auto;display:flex;flex-direction:column;gap:24px;margin-bottom:0;overflow-anchor:none}
  .app-poster-stage>.app-poster-piece{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:clamp(190px,54cqw,245px);flex:none}
  .app-poster-piece-0{width:96%;align-self:flex-start}
  .app-poster-piece-1{width:86%;align-self:flex-end}
  .app-poster-piece-2{width:80%;align-self:flex-start}
  .app-poster-piece-3{width:94%;align-self:flex-end}
  .app-poster-label,.app-poster-piece-0 .app-poster-label{left:17px;right:40px;bottom:22px}
  .app-poster-piece-2 .app-poster-label,.app-poster-piece-3 .app-poster-label{right:40px}
  .application-experiments .app-poster-label-main{font-size:19px;line-height:1.25}
  .application-experiments .app-poster-label-sub{font-size:14px;line-height:1.5}
  .app-poster-arrow,.app-poster-piece-2 .app-poster-arrow,.app-poster-piece-3 .app-poster-arrow{right:16px;top:auto;bottom:28px}
  .app-poster-stage>.app-poster-detail{width:100%;align-self:stretch;padding:0 0 6px;border-top:0;margin-top:-6px;overflow-anchor:none}
  .app-poster-detail .app-scene-title{font-size:22px;line-height:1.28;margin-bottom:18px}
  .app-poster-detail .app-scene-focus{font-size:11px}
  .app-poster-detail .app-scene-body{font-size:15px;line-height:1.8}
  .app-poster-detail .app-scene-inquiry{margin-top:16px;justify-self:start}
  /* 照片里已经显示应用名称，手机说明直接接关键词和正文；语义标题保留给辅助阅读，不再视觉重复一遍。 */
  .app-poster-detail[data-placement="inline"] .app-scene-title{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* 选择提示属于名称的同一网格，避开图片重叠区；四项的主副行和箭头使用统一对齐方式。 */
.app-poster-label,.app-poster-piece-0 .app-poster-label{display:grid;grid-template-columns:minmax(0,1fr) 20px;column-gap:14px;left:22px;right:22px}
.app-poster-label-main{grid-column:1;grid-row:1}
.app-poster-label-sub{grid-column:1;grid-row:2}
.app-poster-label>.app-poster-arrow{position:static;grid-column:2;grid-row:1 / span 2;align-self:center;font-size:19px;line-height:1}
@container website (max-width:900px){
  .app-poster-label,.app-poster-piece-0 .app-poster-label,.app-poster-piece-2 .app-poster-label,.app-poster-piece-3 .app-poster-label{left:17px;right:17px;column-gap:10px}
}
/* 平板主图的右下角有照片压接，名称与箭头共同收在未被压住的左侧，保证提示看到哪项就能点到哪项。 */
@container website (min-width:601px) and (max-width:900px){
  .app-poster-piece-0 .app-poster-label{max-width:calc(70% - 20px)}
}

/* 拼贴接入首页整屏控制后，标题和说明占自然高度，照片使用剩余空间。只在可翻屏的电脑画布生效，手机及矮窗口继续完整纵向阅读。 */
html[data-density="compact"] #site-viewport[data-home-scroll="steps"] #applications[data-application-layout="collage"]{height:var(--home-screen-height);min-height:0;padding:24px 0;display:flex;flex-direction:column;scroll-margin-top:var(--home-header);box-sizing:border-box}
#site-viewport[data-home-scroll="steps"] #applications[data-application-layout="collage"] .application-experiment-heading{flex-shrink:0;margin-bottom:18px;gap:8px 48px}
#site-viewport[data-home-scroll="steps"] #applications[data-application-layout="collage"] .application-experiment-heading h2{font-size:clamp(28px,2.8cqw,38px);line-height:1.12}
#site-viewport[data-home-scroll="steps"] #applications[data-application-layout="collage"] .app-intro{font-size:13px;line-height:1.6}
#site-viewport[data-home-scroll="steps"] #applications[data-application-layout="collage"] .app-poster{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;box-sizing:border-box}
#site-viewport[data-home-scroll="steps"] #applications[data-application-layout="collage"] .app-poster-stage{height:auto;flex:1;min-height:180px;margin-bottom:16px}
#site-viewport[data-home-scroll="steps"] #applications[data-application-layout="collage"] .app-poster-detail{flex-shrink:0;min-height:116px;padding-top:16px;gap:18px 28px;box-sizing:border-box}
#site-viewport[data-home-scroll="steps"] #applications[data-application-layout="collage"] .app-scene-title{font-size:clamp(23px,2cqw,28px)}
#site-viewport[data-home-scroll="steps"] #applications[data-application-layout="collage"] .app-scene-body{font-size:14px;line-height:1.65}
/* 较矮电脑收紧照片内部留白，使小照片的名称和操作箭头仍完整可见，不通过遮挡正文满足一屏高度。 */
html[data-density="compact"] #site-viewport[data-home-scroll="steps"][data-home-density="compact"] #applications[data-application-layout="collage"]{padding:18px 0}
#site-viewport[data-home-scroll="steps"][data-home-density="compact"] #applications .app-poster-label{left:16px;right:20px;bottom:17px}
#site-viewport[data-home-scroll="steps"][data-home-density="compact"] #applications .app-poster-label-main{font-size:18px}
#site-viewport[data-home-scroll="steps"][data-home-density="compact"] #applications .app-poster-label-sub{font-size:12px;margin-top:2px}
/* 联系区作为拼贴后的下一处驻留画面，足够的高度确保整屏返回位置可达；仅拼贴方案延伸该高度。 */
#site-viewport[data-home-scroll="steps"] #page-content:has(#applications[data-application-layout="collage"]) .closing-composition{min-height:var(--home-screen-height);display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;scroll-margin-top:var(--home-header)}

/* 拼贴背景延续工程区的深蓝受光环境，宽幅蓝光覆盖标题、照片间隙与说明区域。仅改变本方案的颜色，不新增装饰节点或影响整屏高度。 */
html[data-density="compact"] #applications[data-application-layout="collage"]{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 64% 110%,#4c86d259,transparent 66%),radial-gradient(ellipse at 52% 78%,#174074b0,transparent 78%),linear-gradient(140deg,#061328,#0b254f 62%,#081c3c)}
/* 两块半透明斜面从画布边缘延伸进来，以宽幅渐层表现受光和前后关系；形状只属于背景，不占排版尺寸也不拦截输入。 */
#applications[data-application-layout="collage"]::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;clip-path:polygon(-15% -10%,30% -10%,85% 110%,25% 110%);background:linear-gradient(145deg,#91b5e718,#5084c22b 48%,#2c568c0d)}
/* 右侧斜面的倾斜方向与左侧不同，透明交叠形成安静的几何层次；底部柔光保留在区块背景中，避免新增第三层装饰。 */
#applications[data-application-layout="collage"]::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;clip-path:polygon(70% -10%,115% -10%,93% 110%,37% 110%);background:linear-gradient(155deg,#a5cbf41f,#537fbe1c 46%,#23467600)}
/* 标题和拼贴共用前景层，照片内部继续按既有悬浮规则置顶；几何背景不会跨到照片或按钮上方。 */
#applications[data-application-layout="collage"]>.application-experiment-heading,#applications[data-application-layout="collage"]>.app-poster{position:relative;z-index:1}
/* 手机长页只在上部保留淡几何面，不沿整页拉伸形状；后续图片和说明继续使用柔和蓝色背景。 */
@container website (max-width:600px){
  #applications[data-application-layout="collage"]::before,#applications[data-application-layout="collage"]::after{height:720px;bottom:auto;opacity:.6}
}
#applications[data-application-layout="collage"] .app-poster-stage{background:radial-gradient(ellipse at 53% 53%,#4276ae24,transparent 74%)}
/* 图片保留银白设备与玻璃细节，轻微提高亮度并缓和对比，避免照片暗部和背景连成黑块；显示滤镜不改变原始图片文件，也不参与悬浮缩放。 */
#applications[data-application-layout="collage"] .app-poster-piece img{filter:brightness(1.1) contrast(.97) saturate(1.03)}
/* 阅读遮罩集中于照片下方，最深处从接近全黑减为七成左右的不透明深蓝；上半部分不叠暗色，保留场景自身的灯光和材质。 */
#applications[data-application-layout="collage"] .app-poster-piece::before{background:linear-gradient(0deg,#04132bb8 0%,#06172a80 20%,#06172a33 40%,transparent 58%)}
#applications[data-application-layout="collage"] .app-poster-label{text-shadow:0 1px 8px #00102780}
#applications[data-application-layout="collage"] .app-poster-detail{border-top-color:#9fc6eb45}
/* 按首页审核反馈移除拼贴四图的跳转箭头；卡片仍保留整块点击、选中下划线和悬浮边缘反馈。 */
#applications[data-application-layout="collage"] .app-poster-arrow{display:none}

/* 悬浮边缘是独立装饰层，只改变透明度，不占布局或拦截点击。边框与内侧微光使照片的可点击范围更清楚。 */
.app-poster-frame{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;border:1px solid #bedfffbc;box-shadow:inset 0 0 0 1px #8ab8ed30,inset 0 0 28px #9dc9ff18}
.app-poster-label>.app-poster-arrow{position:relative;inset:auto;isolation:isolate}
.app-poster-arrow::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%) scale(.88);border:1px solid #b7d9ff85;background:#102440a8;opacity:0;z-index:-1;transition:opacity .25s,transform .25s,background .25s}
.app-poster-arrow-glyph{display:inline-block}
/* 悬浮或键盘聚焦时将整张照片提升到拼贴前景，避免边框和图片仍被邻近照片压住；反馈结束移除状态类后，恢复每张照片原有的一至四层顺序。 */
.app-poster-piece.is-highlighted{z-index:10;box-shadow:0 22px 44px #00091480}
/* 键盘焦点尚未离开时，当前鼠标悬浮照片仍优先显示；只提升交互中的照片，不让点击选中状态永久覆盖其他入口。 */
@media(hover:hover) and (pointer:fine){
  .app-poster-piece.is-highlighted:hover{z-index:11}
}
.app-poster-piece.is-highlighted .app-poster-label-main{color:#fff}
.app-poster-piece.is-highlighted .app-poster-label-sub{color:#e0eeff}
.app-poster-piece.is-highlighted .app-poster-arrow::before{opacity:1;transform:translate(-50%,-50%) scale(1);background:#18345ae0}
/* 动效库接管变换后禁用旧悬浮位移及变换过渡，避免两套插值相互拉扯；色彩和阴影仍使用轻量样式过渡。 */
[data-poster-motion="ready"] .app-poster-piece{transition:box-shadow .25s}
[data-poster-motion="ready"] .app-poster-piece:hover{transform:none}
[data-poster-motion="ready"] .app-poster-piece img{transition:none}
[data-poster-motion="ready"] .app-poster-piece:hover img{transform:none}
.app-poster-label-main,.app-poster-label-sub{transition:color .25s}
/* 键盘聚焦保留同样清晰的边框及箭头提示；脚本尚未加载时也能识别当前操作入口。 */
.app-poster-piece:focus-visible .app-poster-frame{opacity:1}
.app-poster-piece:focus-visible .app-poster-arrow::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* 触屏不保持鼠标悬浮姿态，选中后的静态箭头圆框提供点击反馈；不会挤压原来的名称与说明。 */
@media(hover:none),(pointer:coarse){
  .app-poster-piece:hover,.app-poster-piece:hover img{transform:none}
  .app-poster-piece.is-selected .app-poster-arrow::before{opacity:.8;transform:translate(-50%,-50%) scale(1)}
}

/* 减少动态时不播放图片位移和缩放，长卷由脚本恢复纵向阅读，全部内容继续显示。 */
@media(prefers-reduced-motion:reduce){
  .application-experiments *{transition:none!important;animation:none!important}
  .app-chapters .app-scene-media img{transform:none}
  .app-poster-piece:hover,.app-poster-piece:hover img{transform:none}
}

/* 电脑与平板的左下图压接主图百分之四的画布高度，折算为主图高度的百分之六点二五。标题与选中提示留在压接带上方，不依赖悬浮置顶才能读清。 */
@container website (min-width:601px){
  #site-viewport #applications[data-application-layout="collage"] .app-poster-piece-0 .app-poster-label{bottom:calc(6.25% + 23px)}
  #site-viewport #applications[data-application-layout="collage"] .app-poster-piece-0::after{bottom:calc(6.25% + 12px)}
}