/* 知序行官网 · 沉浸式场景
   三层：背景、巨字、前景。三层同用一套舞台坐标，故字与地形在任何窗口比例下都对得上。 */
@font-face { font-family: "HOS"; src: url("../fonts/HarmonyOS_Sans_SC_Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-VF.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }
:root {
  --ink: #16181B; --moon: #C9CDD2; --fold: #7E848C; --paper: #F0ECE5;
  --f: "Satoshi", "HOS", "PingFang SC", "Microsoft YaHei", sans-serif;
  --fb: "Satoshi", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --u: clamp(1px, min(100vw / 1440, 100vh / 900), 2px); /* 字号与版心随视口放大；1440×900 为基准 */
  --m: clamp(20px, 4.4vw, calc(72 * var(--u)));
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); overscroll-behavior: none; }
body { color: var(--paper); font-family: var(--fb); font-size: calc(15 * var(--u)); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p, h1, h2, ul { margin: 0; padding: 0; font-weight: 400; } ul { list-style: none; }

.s { position: absolute; inset: 0; overflow: hidden; }
.s {
  --R: 1.5; --fx: .5; --fy: .5; --over: 1.05;
  --sw: calc(max(100vw, 100vh * var(--R)) * var(--over));
  --sh: calc(var(--sw) / var(--R));
  --sl: clamp(calc(100vw - var(--sw)), calc(50vw - var(--fx) * var(--sw)), 0px);
  --st: clamp(calc(100vh - var(--sh)), calc(50vh - var(--fy) * var(--sh)), 0px);
}
.s .lay { position: absolute; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh); will-change: transform; }
.s .lay img { display: block; width: 100%; height: 100%; }
.s .big { --by: calc(var(--st) + var(--base) * var(--sh)); --ww: min(var(--ww0), calc((var(--by) - 62px) / var(--asp))); position: absolute; left: calc((100vw - var(--ww)) * var(--al)); top: calc(var(--by) - var(--ww) * var(--asp)); width: var(--ww); will-change: transform; }
.s .big svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ── 整屏翻页 ── */
.s { --H: 100vh; } @supports (height: 100dvh) { .s { --H: 100dvh; } }
.s { --sw: calc(max(100vw, var(--H) * var(--R)) * var(--over)); --st: clamp(calc(var(--H) - var(--sh)), calc(var(--H) / 2 - var(--fy) * var(--sh)), 0px); }
.cam { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 62%; }
.par { position: absolute; }
.par.full { inset: 0; }
.shade { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(to top, rgba(12, 13, 14, .66), rgba(12, 13, 14, .34) 46%, rgba(12, 13, 14, 0)); pointer-events: none; }
.word .pre path, .word .w .out { fill: var(--wc); }
.word .w .in { fill: var(--wi); }
.word .o circle { fill: var(--oc); }

.pg { visibility: hidden; opacity: 0; }
.pg.on { visibility: visible; opacity: 1; }
.fix { position: fixed; z-index: 20; }
.topbar { left: var(--m); right: var(--m); top: 28px; display: flex; align-items: center; justify-content: space-between; font-size: calc(15 * var(--u)); color: var(--tone, var(--paper)); transition: color .6s var(--ease); }
.topbar .id { display: flex; align-items: center; gap: 10px; font-family: var(--f); font-size: calc(16 * var(--u)); letter-spacing: .1em; }
.topbar .mk { width: calc(37 * var(--u)); height: auto; display: block; fill: currentColor; } .topbar .mk .t { opacity: .55; }
.topbar nav a { opacity: .86; transition: opacity .3s var(--ease); } .topbar nav a:hover { opacity: 1; }
.topbar nav { display: flex; gap: clamp(18px, 2.6vw, 34px); }
.pager { right: var(--m); top: 74px; display: flex; flex-direction: column; gap: 12px; color: var(--tone, var(--paper)); transition: color .6s var(--ease); }
.pager button { all: unset; cursor: pointer; display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity .4s var(--ease); }
.pager button.is-on { opacity: 1; }

.txt { position: absolute; left: var(--m); right: var(--m); bottom: clamp(26px, 5vh, 46px); display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; color: var(--paper); }
.lead h1, .lead h2 { font-family: var(--f); font-weight: 300; line-height: 1.22; letter-spacing: .03em; }
.lead h1 { font-size: clamp(32px, 3.1vw, calc(46 * var(--u))); letter-spacing: .05em; }
.lead h2 { font-size: clamp(26px, 2.8vw, calc(42 * var(--u))); }
.lead p { font-size: clamp(15px, 1.15vw, calc(17 * var(--u))); margin-top: 10px; opacity: .9; }
.lead .tag { font-size: calc(14 * var(--u)); letter-spacing: .1em; opacity: .78; margin-bottom: 10px; }
.lead ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; font-size: calc(15 * var(--u)); opacity: .72; }

.case { width: min(46vw, calc(560 * var(--u))); flex: none; font-size: calc(15 * var(--u)); }

.pager button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.mail { display: inline-block; margin-top: 16px; font-family: var(--f); font-size: clamp(20px, 2vw, calc(28 * var(--u))); font-weight: 300; border-bottom: 1px solid rgba(240, 236, 229, .5); padding-bottom: 3px; }
.reach { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(36 * var(--u)); }
.legal { font-size: calc(13 * var(--u)); opacity: .62; text-align: right; line-height: 1.8; }

@media (max-width: 760px) {
  .pager { gap: 10px; top: 70px; } .pager button { width: 6px; height: 6px; }
  .topbar nav a:first-child { display: none; }
  .txt { flex-direction: column; align-items: stretch; gap: 20px; bottom: 24px; }

  .case { width: auto; }
  .lead ul { display: none; }
  .legal { text-align: left; }

}
@media (prefers-reduced-motion: reduce) { .cam { transform: none !important; } }

/* ── 各幅实景的舞台 ── */
[data-scene="夜"] { --R: 1.4992; --over: 1.1; --fy: .82; --fx: .3; }
[data-scene="光"] { --R: 1.5; --fx: .72; --fy: .5; }
[data-scene="水"] { --R: 2; --fx: .7; --fy: .5; }
[data-scene="镜"] { --R: 1.7768; --over: 1.04; --fx: .5; --fy: .56; }

[data-scene="木"] { --R: 1.5; --fx: .6; --fy: .5; }
@media (max-width: 760px) {
  [data-scene="夜"] { --over: 1.25; --fy: .6; }
  [data-scene="镜"] { --over: 1.2; --fx: .5; --fy: .62; }

}

/* ── 舞台层不挡点击 ── */
.par { pointer-events: none; }

.idw { display: flex; align-items: baseline; gap: 10px; }

@media (max-width: 760px) {

  .topbar nav { gap: 14px; }

}

/* ── 活景、颗粒与雾 ── */
.lay canvas.live { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.grain { position: fixed; inset: -60px; z-index: 12; pointer-events: none; background: url("../scene/粒.webp") 0 0 / 180px; opacity: .5; }
@media (max-width: 760px) { .grain { opacity: .36; } }

.fog { position: absolute; left: var(--sl); top: calc(var(--st) + var(--ft) * var(--sh)); height: calc(var(--fh) * var(--sh)); width: calc(var(--fh) * var(--sh) * 9.6); background-repeat: repeat-x; background-size: 25% 100%; opacity: var(--fo); will-change: transform; pointer-events: none; }

/* 开屏：入口 */
.quick { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); font-size: calc(15 * var(--u)); padding-bottom: 3px; }
.quick a { cursor: pointer; opacity: .84; transition: opacity .3s var(--ease); } .quick a:hover { opacity: 1; }
.hint { width: 1px; height: 30px; margin-left: 8px; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 40% no-repeat; background-color: rgba(240, 236, 229, .22); animation: hint 2.4s var(--ease) infinite; }
@keyframes hint { 0% { background-position: 0 -14px; } 100% { background-position: 0 34px; } }

/* 一分为三 */
.trio { --by: calc(var(--st) + .605 * var(--sh)); --rh: min(calc(.116 * var(--sh)), calc((var(--by) - 62px) / 3.23)); position: absolute; left: 50%; top: calc(var(--by) - var(--rh) * 3.23); display: grid; gap: calc(var(--rh) * .115); justify-items: end; transform: translateX(-46%); }
.trio .row { position: relative; display: block; pointer-events: auto; cursor: pointer; }
.trio svg { display: block; height: var(--rh); width: auto; overflow: visible; }
.trio .pre path, .trio .w .out { fill: #C9CDD2; } .trio .w .in { fill: #7E848C; }
.trio .base { fill: #C9CDD2; }
.trio .lab { position: absolute; left: calc(100% + 28px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: calc(15 * var(--u)); color: var(--paper); opacity: .86; }
.trio .lab b { font-weight: 500; margin-right: 8px; }

/* 服务：大字立于地平线 */
.mono, .monor { position: absolute; left: var(--m); right: var(--m); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); --g: clamp(24px, 3.4vw, 56px); --fs: calc((100vw - 2 * var(--m) - 2 * var(--g)) / 12.5); font-family: "HOS", var(--f); font-weight: 300; font-size: var(--fs); line-height: 1.16; color: var(--moon); }
.mono { top: calc(var(--st) + .568 * var(--sh)); transform: translateY(calc(-100% + .135em)); }
.monor { top: calc(var(--st) + .568 * var(--sh)); transform: translateY(-.135em) scaleY(-1); opacity: .42; filter: blur(1.2px); -webkit-mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0) 88%); mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0) 88%); pointer-events: none; }
.mw { display: block; overflow: hidden; white-space: nowrap; letter-spacing: .01em; pointer-events: auto; cursor: pointer; }
.monor .mw { pointer-events: none; }
.mw > span { display: block; will-change: transform; }
.svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px var(--g); --g: clamp(24px, 3.4vw, 56px); align-items: start; }
.svcs .col p { margin: 0; font-size: calc(15 * var(--u)); line-height: 1.65; opacity: .9; min-height: 3.3em; }
.svcs .col ul { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; font-size: calc(15 * var(--u)); opacity: .66; }
.to { display: inline-block; cursor: pointer; font-size: calc(15 * var(--u)); border-bottom: 1px solid rgba(240, 236, 229, .5); padding-bottom: 2px; transition: border-color .3s var(--ease); } .to:hover { border-color: #F0ECE5; }
.svcs .col .to { margin-top: 12px; }
.svcs .foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; padding-top: 14px; border-top: 1px solid rgba(240, 236, 229, .2); font-size: calc(15 * var(--u)); }
.svcs .foot span { opacity: .66; }

/* 联系：半轮落在地平线上，倒影补全 */
.moon { --d: min(46vh, 40vw); position: absolute; left: calc(50% - var(--d) / 2); top: calc(var(--st) + .568 * var(--sh) - var(--d) / 2); width: var(--d); height: var(--d); will-change: transform; }
.moon svg { display: block; width: 100%; height: 100%; fill: var(--moon); }
.moon.r { opacity: .5; -webkit-clip-path: inset(50% 0 0 0); clip-path: inset(50% 0 0 0); filter: blur(1.5px); }
.moon.r svg { -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #000 52%, rgba(0, 0, 0, .1) 100%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #000 52%, rgba(0, 0, 0, .1) 100%); }

@media (max-width: 760px) {
  .quick a { font-size: 14px; }
  .trio { --by: calc(var(--st) + .588 * var(--sh)); --rh: min(calc(.0655 * var(--sh)), calc((100vw - 96px) / 4.28)); left: 50%; transform: translateX(-54%); }
  .trio .lab { left: calc(100% + 10px); font-size: 14px; } .trio .lab b { display: block; margin: 0; font-weight: 400; } .trio .lab { line-height: 1.25; }
  .mono, .monor { grid-template-columns: 1fr; gap: 0; --fs: 20vw; line-height: 1.12; }
  .mono { top: calc(var(--st) + .568 * var(--sh)); }
  .monor { grid-template-columns: 1fr; }
  .monor .mw:not(:last-child) { display: none; }
  .svcs { grid-template-columns: 1fr; gap: 0; }
  .svcs .col { display: grid; grid-template-columns: auto 1fr; gap: 0; padding: 7px 0; border-top: 1px solid rgba(240, 236, 229, .2); }
  .svcs .col p { grid-column: 1 / -1; font-size: 14px; min-height: 0; line-height: 1.55; }
  .svcs .col ul { display: none; }
  .svcs .col .to { margin-top: 4px; font-size: 14px; grid-column: 1 / -1; justify-self: start; }
  .svcs .foot { flex-direction: column; gap: 4px; padding-top: 8px; font-size: 14px; }
  .svcs .foot span { display: none; }
  .moon { --d: 66vw; }
}

/* 序一屏：字脚隐入水雾，不被远山切成碎边 */
#p5 .word svg { -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 3%, #000 21%); mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 3%, #000 21%); }
.mono { color: #E6E8EB; }
.monor { color: #D6D9DD; opacity: .3; filter: blur(1.5px); }

.mw, .svcs .col { transition: opacity .45s var(--ease); } .mw.dim { opacity: .38; } .svcs .col.dim { opacity: .5; }
/* 横屏手机与矮窗：收掉次要信息，主体让位 */
@media (max-height: 560px) {
  .txt { bottom: 14px; gap: 24px; } .lead h1, .lead h2 { font-size: 22px; } .lead p { margin-top: 4px; font-size: 13px; }
  .lead ul, .lead .tag, .svcs .col ul, .svcs .foot span, .legal { display: none; }

  .svcs .col p { min-height: 0; font-size: 13px; line-height: 1.4; } .svcs .col .to { margin-top: 3px; font-size: 13px; } .svcs .foot { padding-top: 5px; font-size: 13px; } .svcs { gap: 6px var(--g); }
   .mail { margin-top: 6px; font-size: 16px; }
  .topbar { top: 12px; } .pager { top: 44px; gap: 7px; } .pager button { width: 5px; height: 5px; }
}

/* 人影：与沙脊同一舞台坐标，脚踩脊线 */
.walker { position: absolute; left: calc(var(--sl) + var(--wxf, .2) * var(--sw)); top: calc(var(--st) + var(--wyf, .59) * var(--sh)); height: calc(.031 * var(--sh)); width: auto; aspect-ratio: 44 / 58; transform: translate(-50%, -96.6%); fill: #17140F; overflow: visible; pointer-events: none; }
.walker polyline { fill: none; stroke: #17140F; stroke-linecap: round; stroke-linejoin: round; }
.walker { filter: blur(.22px); } .walker .l { stroke-width: 2.8; } .walker .h { stroke-width: 1.9; }

/* 三章右栏：各案一句，点入即到该案此章 */
.cl { width: min(46vw, calc(600 * var(--u))); flex: none; font-size: calc(15 * var(--u)); }
.lead h2 { text-wrap: pretty; }
.cl a { display: grid; grid-template-columns: 8.2em 1fr auto; gap: 14px; padding: 7px 0; border-top: 1px solid rgba(240, 236, 229, .26); cursor: pointer; align-items: baseline; transition: padding .35s var(--ease); }
.cl li:last-child a { border-bottom: 1px solid rgba(240, 236, 229, .26); }
.cl b { font-weight: 500; white-space: nowrap; } .cl span { opacity: .82; } .cl i { font-style: normal; opacity: .6; transition: transform .35s var(--ease), opacity .35s var(--ease); }
.cl a:hover i { transform: translateX(4px); opacity: 1; }
.case { width: auto; }

@media (max-width: 760px) {
  .cl { width: auto; font-size: 14px; }
  .cl a { grid-template-columns: 7.4em 1fr auto; gap: 8px; padding: 5px 0; }
}

@media (max-height: 560px) {
  .cl { font-size: 13px; } .cl a { padding: 2px 0; } .cl li:nth-child(n+4) { display: none; }

}

.topbar nav a, .topbar .id span, .id { white-space: nowrap; }

/* ── 案例蒙版：透明蒙版加背景虚化，只余光与色；块半透明，不实 ── */
.pop { position: fixed; inset: 0; z-index: 40; visibility: hidden; color: var(--paper); }
.pop .back { position: absolute; inset: 0; background: rgba(14, 15, 17, .6); -webkit-backdrop-filter: blur(max(26px, calc(40 * var(--u)))) saturate(1.1); backdrop-filter: blur(max(26px, calc(40 * var(--u)))) saturate(1.1); opacity: 0; }
body.pop-top .topbar { z-index: 41; pointer-events: none; } body.pop-on .topbar { color: var(--paper); }
.topbar nav { transition: opacity .35s var(--ease); } body.pop-on .topbar nav { opacity: 0; }
.pop .route { position: absolute; left: calc(var(--m) + 492 * var(--u)); right: calc(var(--m) + 36 * var(--u)); top: calc(84 * var(--u)); margin: 0; padding: 0; list-style: none; display: flex; align-items: center; font-size: calc(15 * var(--u)); letter-spacing: .04em; pointer-events: none; }
.pop .route li { display: flex; align-items: center; flex: 1 1 auto; opacity: .46; transition: opacity .5s var(--ease); white-space: nowrap; }
.pop .route li:last-child { flex: 0 0 auto; }
.pop .route li::after { content: ""; flex: 1; height: 1px; margin: 0 calc(12 * var(--u)); background: currentColor; opacity: .55; }
.pop .route li:last-child::after { display: none; }
.pop .route li.on { opacity: 1; }
.pop .blk { position: absolute; left: calc(var(--m) + 462 * var(--u)); top: calc(122 * var(--u)); width: calc(100vw - 2 * var(--m) - 462 * var(--u)); height: calc(100vh - 122 * var(--u) - clamp(26px, 5vh, 46px) - 34 * var(--u)); overflow: visible; pointer-events: none; }
.pop .bk { stroke: #F0ECE5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pop .ex text { font-family: var(--fb); font-size: 16px; fill: var(--paper); letter-spacing: .03em; }
.pop .ex .ti { fill: #16181B; font-weight: 500; } .pop .ex .hd { font-size: 15px; opacity: .72; } .pop .ex .big { font-size: 38px; font-family: var(--f); font-weight: 300; } .pop .ex .sm { font-size: 14px; letter-spacing: .01em; }
.pop .ex line, .pop .ex circle, .pop .ex rect { stroke: rgba(240, 236, 229, .44); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; } .pop .ex .dash { stroke-dasharray: 5 4; }
.pop .ptw { position: absolute; left: var(--m); bottom: calc(clamp(26px, 5vh, 46px) + 44 * var(--u)); width: calc(420 * var(--u)); }
.pop .pt { position: absolute; left: 0; right: 0; bottom: 0; }
.pop .nm { font-size: calc(15 * var(--u)); font-weight: 500; line-height: 1.5; }
.pop .nm small { display: block; font-size: calc(14 * var(--u)); font-weight: 400; opacity: .72; }
.pop .nm a { position: relative; display: inline-block; border-bottom: 1px solid rgba(240, 236, 229, .5); transition: border-color .3s var(--ease); } .pop .nm a:hover { border-color: #F0ECE5; }
.pop .nm a::after { content: ""; position: absolute; inset: -12px -8px; }
.pop .tg { margin-top: calc(26 * var(--u)); font-size: calc(14 * var(--u)); opacity: .78; }
.pop h3 { margin: calc(8 * var(--u)) 0 0; font-family: var(--f); font-weight: 300; font-size: calc(46 * var(--u)); line-height: 1.26; letter-spacing: .01em; }
.pop .ds { margin-top: calc(14 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.7; opacity: .92; text-wrap: pretty; }
.pop .fx { margin: calc(16 * var(--u)) 0 0; font-size: calc(15 * var(--u)); line-height: 1.6; }
.pop .fx div { display: grid; grid-template-columns: 5.2em 1fr; gap: 8px; padding: calc(7 * var(--u)) 0; border-top: 1px solid rgba(240, 236, 229, .26); }
.pop .fx dt { opacity: .72; } .pop .fx dd { margin: 0; }
.pop button { all: unset; cursor: pointer; }
.pop .pbar { position: absolute; left: var(--m); bottom: clamp(26px, 5vh, 46px); display: flex; }
.pop .steps { display: flex; gap: calc(26 * var(--u)); }
.pop .steps button { display: flex; align-items: baseline; gap: .5em; opacity: .5; padding: 3px 0; border-bottom: 1px solid transparent; transition: opacity .3s var(--ease); }
.pop .steps .en { font-family: var(--f); font-size: calc(15 * var(--u)); font-weight: 500; letter-spacing: .08em; white-space: nowrap; }
.pop .steps .en i { display: inline-block; width: .74em; height: .74em; margin: 0 .07em 0 0; border-radius: 50%; background: currentColor; transition: background .4s var(--ease); }
.pop .steps .zh { font-size: calc(14 * var(--u)); }
.pop .steps button[data-c="0"].is-on i { background: #BCA987; } .pop .steps button[data-c="1"].is-on i { background: #7F96B3; } .pop .steps button[data-c="2"].is-on i { background: #8AA38E; }
.pop .steps button.is-on { opacity: 1; border-bottom-color: currentColor; } .pop .steps button:hover { opacity: 1; }
.pop .x { position: absolute; right: var(--m); bottom: clamp(26px, 5vh, 46px); font-size: calc(16 * var(--u)); padding: 2px 0; border-bottom: 1px solid rgba(240, 236, 229, .5); }
/* 宣传片入口：与案例名同行，细环播放钮 */
.pop .nh { display: flex; align-items: center; gap: calc(34 * var(--u)); }
.pop .pv { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); flex: none; padding: 6px 0; margin: -6px 0; font-size: calc(14 * var(--u)); line-height: 1; white-space: nowrap; }
.pop .pv i { position: relative; flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border: 1px solid rgba(240, 236, 229, .62); border-radius: 50%; transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.pop .pv i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28%; height: 32%; margin: -16% 0 0 -10%; background: var(--paper); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: background-color .35s var(--ease); }
.pop .pv small { font-size: inherit; opacity: .56; font-variant-numeric: tabular-nums; }
.pop .pv:hover i { background: var(--paper); border-color: var(--paper); } .pop .pv:hover i::after { background: var(--ink); }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .pop .nh { justify-content: space-between; gap: 12px; }
  .pop .pv { gap: 8px; font-size: 13px; } .pop .pv i { width: 30px; height: 30px; }
  .pop .route { left: 20px; right: 20px; top: 60px; font-size: 13px; }
  .pop .route li { flex: none; } .pop .route li:not(.on) { display: none; } .pop .route li::after { display: none; } .pop .route li.on + li.on::before { content: "·"; margin: 0 7px; }
  .pop .blk { left: 12px; top: 92px; width: calc(100vw - 24px); height: min(82vw, calc(100vh - 376px)); height: min(82vw, calc(100svh - 376px)); }
  .pop .ex text { font-size: 32px; } .pop .ex .hd { font-size: 27px; } .pop .ex .big { font-size: 46px; } .pop .ex .sm { font-size: 27px; }
  .pop .ptw { left: 20px; right: 20px; width: auto; bottom: 58px; }
  .pop .pt { padding-top: 14px; border-top: 1px solid rgba(240, 236, 229, .28); }
  .pop h3 { font-size: 28px; } .pop .ds { font-size: 14px; margin-top: 8px; } .pop .fx { display: none; } .pop .tg { margin-top: 10px; }
  .pop .pbar { left: 20px; bottom: 20px; } .pop .x { right: 20px; bottom: 20px; font-size: 14px; }
  .pop .steps { gap: 14px; } .pop .steps .en { font-size: 12px; } .pop .steps .zh { font-size: 11px; }
}

/* ── 宣传片：自案例蒙版打开，墨底满屏；片幅随窗口取最大，不裁不拉伸 ── */
.film { position: fixed; inset: 0; z-index: 50; visibility: hidden; display: flex; flex-direction: column; padding: clamp(24px, 6vh, 64px) var(--m) clamp(26px, 5vh, 46px); color: var(--paper); }
.film .fback { position: absolute; inset: 0; background: #0E0F11; }
.film .fvw { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; pointer-events: none; }
.film video { display: block; width: 100%; max-height: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; pointer-events: auto; }
.film.v video { width: auto; height: 100%; max-width: 100%; aspect-ratio: 9 / 16; }
@supports (width: 1cqh) { .film video { width: min(100cqw, 100cqh * 16 / 9); max-height: none; } .film.v video { width: min(100cqw, 100cqh * 9 / 16); height: auto; } }
.film video:focus { outline: none; } .film video:focus-visible { outline: 1px solid rgba(240, 236, 229, .6); outline-offset: 4px; }
.film .fbar { position: relative; flex: none; margin-top: calc(22 * var(--u)); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; pointer-events: none; }
.film .fbar > * { pointer-events: auto; }
.film button { all: unset; cursor: pointer; } .film [hidden] { display: none !important; }
.film .ft { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(14 * var(--u)); row-gap: 4px; font-size: calc(15 * var(--u)); line-height: 1.5; }
.film .ft b { font-weight: 500; } .film .ft small { font-size: calc(14 * var(--u)); opacity: .72; font-variant-numeric: tabular-nums; }
.film .fsw { font-size: calc(14 * var(--u)); border-bottom: 1px solid rgba(240, 236, 229, .5); }
.film .fcr { margin: calc(6 * var(--u)) 0 0; max-width: 64em; font-size: 12px; line-height: 1.6; opacity: .56; }
.film .fcr a { border-bottom: 1px solid rgba(240, 236, 229, .4); }
.film .fx { flex: none; font-size: calc(16 * var(--u)); padding: 2px 0; border-bottom: 1px solid rgba(240, 236, 229, .5); }
.film button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
body.film-full main, body.film-full .pop, body.film-full .topbar, body.film-full .pager, body.film-full .grain { visibility: hidden !important; }   /* 盖满后停绘底层 */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .film { padding: max(14px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)); }
  .film .fbar { margin: 16px 8px 0; gap: 16px; }
  .film .ft { font-size: 15px; } .film .ft small, .film .fsw { font-size: 13px; }
  .film .fcr { font-size: 11px; } .film .fx { font-size: 14px; }
}

/* ── 键盘焦点 ── */
a:focus-visible, .pop button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* ── 备案号（有号才出现）与脚本关闭时的文字版 ── */
.legal a { display: inline-block; white-space: nowrap; border-bottom: 1px solid rgba(240, 236, 229, .4); }
.nojs { position: fixed; inset: 0; z-index: 99; overflow: auto; padding: 10vh 8vw; background: var(--ink); color: var(--paper); font-size: 16px; line-height: 1.8; }
.nojs h2 { margin: 0 0 8px; font-weight: 300; font-size: 32px; } .nojs h3 { margin: 28px 0 6px; font-weight: 500; font-size: 16px; } .nojs a { border-bottom: 1px solid currentColor; }
.pop:focus { outline: none; }