/* 字体：SIL Open Font License 1.1，许可证见 /assets/fonts/OFL.txt */
/* site/tools/fonts.py 按 site/.cache/fonts-spec.json 生成，别手改 */
@font-face { font-family: 'MX Display SC'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('/assets/fonts/display-sc-home.168c4e78d2.woff2') format('woff2'); unicode-range: U+3000, U+3002, U+4E00, U+4E0A, U+4E2A, U+4E48, U+4E9B, U+4EA4, U+4EC0, U+4ECE, U+4EFB, U+4EFD, U+4F1A, U+4F55, U+4F60, U+4FDD, U+5148, U+514D, U+5168, U+518C-518D, U+51C6, U+51FA, U+52A8, U+5339, U+5361, U+53D6, U+53EA, U+53F7, U+5417, U+5458, U+54EA, U+5668, U+5728, U+591A, U+5B57, U+5B8C, U+5BF9, U+5BFB, U+5DF1, U+5E26, U+5E38, U+5E55, U+5E74, U+5E93, U+5F00, U+5F55, U+5F97, U+600E, U+6211, U+627E, U+62A4, U+6301, U+6311, U+652F, U+6536, U+6708, U+6743, U+6821, U+6B21, U+6B3E, U+6CE8, U+6D4B, U+6D4F, U+6D88, U+7248, U+7528, U+7684, U+770B, U+7AD9, U+7BA1, U+7ED9, U+7F51, U+80FD, U+81EA, U+8981, U+89C1, U+89C6, U+89C8, U+8BA4, U+8BB0, U+8D26, U+8D39, U+8FC7, U+9000, U+90A3, U+90E8, U+914D, U+91CC, U+95EE, U+96C6, U+9891, U+9898, U+FF0C, U+FF1F; }
@font-face { font-family: 'MX Display SC'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('/assets/fonts/display-sc-rest.4aaee094da.woff2') format('woff2'); unicode-range: U+3001, U+4E09, U+4E45, U+4ED6, U+4ED8, U+4EE5, U+4EEC, U+4F7F, U+505A, U+505C, U+5176, U+5185, U+51B5, U+5229, U+5236, U+52A1, U+5316, U+534F, U+5355, U+53D1, U+53D8, U+53EF, U+540E, U+548C, U+58F0, U+5B58, U+5B9A, U+5BB9, U+5F8B, U+60C5, U+6237, U+63A7, U+6539, U+653F, U+65B0, U+65B9, U+660E, U+66F4, U+6709, U+670D, U+672C, U+6B62, U+6CD5, U+7533, U+79C1, U+7B2C, U+7B56, U+7CFB, U+7ECF, U+8054, U+8BA2, U+8BAE, U+8BF7, U+8BFB, U+8C01, U+8D23, U+8FD9, U+9001-9002, U+9650, U+9690; }
@font-face { font-family: 'MX Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/newsreader.eca9af3dba.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'MX Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/newsreader-italic.a84e38d2d3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'MX Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/instrument.698f1a3deb.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 幕寻官网 · 共用。颜色字体、顶栏、章节标题、胶片颗粒，以及插件的幕寻按钮（状态胶囊）、字幕和播放器外框（照 app/src 的 bar.ts、overlay.ts）
   负责：品牌组。build.mjs 按 base、hero、how、proof、pricing、pages 的顺序拼成一份 site.css，后面接 looks.mjs 生成的放映厅样式。 */

:root {
  --black: #0b0a08;
  --dark: #0e0c0a;
  --dark-2: #13110e;
  --cream: #efe7da;
  --cream-2: #b5ac9e;
  --cream-3: #8b8376;
  --line-d: rgba(239, 231, 218, .12);
  --amber: #e2a53b;
  --amber-ink: #8a5a12;
  --paper: #ece6da;
  --paper-2: #f6f1e7;
  --ink: #1c1915;
  --ink-2: #625b50;
  --line-p: rgba(28, 25, 21, .14);
  --display: 'MX Newsreader', 'MX Display SC', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  --sans: 'MX Instrument Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', system-ui, sans-serif;
  --gut: clamp(20px, 5.5vw, 80px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--black); color: var(--cream); font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, canvas { display: block; }
picture { display: contents; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gut); }
/* 键盘焦点：所有控件都看得见（很多控件写了 all: unset，所以要 !important）；暗底米色，纸色区墨色（琥珀只留给插件的状态） */
:focus-visible { outline: 2px solid var(--focus, var(--cream)) !important; outline-offset: 3px; }
body.policy { --focus: var(--ink); } /* 政策页是纸色底；首页 11-13 晚起整页都是暗的 */
::selection { background: rgba(226, 165, 59, .35); }

/* ---- 顶栏 ---------------------------------------------------------------------------------- */
/* 三栏：标志靠左、几节的链接在整条的正中、中英切换靠右（照 Kombai 的 Pomehurst、Maison Trois：链接居中，左右两头各管各的）。
   两边两栏一样宽，中间那栏才正好在正中；政策页、404 没有链接，中间空着 */
.tb { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 32px; height: 64px; padding: 0 var(--gut); color: var(--cream); border-bottom: 1px solid transparent; transition: background-color .35s ease, border-color .35s ease; }
.tb.solid { background: #0b0a08; border-bottom-color: var(--line-d); }
/* 政策页：纸色顶栏、墨色字 */
.policy .tb { background: var(--paper); color: var(--ink); border-bottom-color: var(--line-p); }
.policy .tb-langs, .policy .tb-langs a { color: var(--ink-2); }
.policy .tb-langs .on, .policy .tb-langs a:hover { color: var(--ink); }
/* 标志比原来大一号（字 19 → 21px，标 22 → 24px）：例子里的标志字在 22–28px，原来「幕寻」两个字连标整块只有 72px 宽，比例子都小 */
.tb-brand { justify-self: start; display: flex; align-items: center; gap: 11px; text-decoration: none; font: 700 21px/1 var(--display); letter-spacing: .06em; }
.tb-mark { width: 24px; height: 25px; color: var(--amber); }
.tb-links { grid-column: 2; display: flex; gap: 36px; font-size: 14px; white-space: nowrap; }
.tb-links a { color: var(--cream-2); text-decoration: none; transition: color .2s; }
.tb-links a:hover { color: var(--cream); }
.tb-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 22px; }
.tb-langs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cream-3); }
.tb-langs a { color: var(--cream-2); text-decoration: none; }
.tb-langs a:hover { color: var(--cream); }
.tb-langs .on { color: var(--cream); }
.tb-langs i { font-style: normal; opacity: .5; }

/* ---- 插件：幕寻按钮（只画右上角的状态胶囊，照 bar.ts 的 BAR_CSS 里 .bar:not(.full)、.status、.dot） ----
   插件里鼠标移上去会展开成一整条，网站上不画；整块不接鼠标（没有小手、没有悬停效果），对读屏隐藏（ui.mjs 的 chip）。
   大小照插件按视频显示出来的宽度 w 算（overlay.ts）：放大倍数 cornerScale = w/1400，限在 1～1.4；离上边、右边 cornerEdge = 2% w，限在 16～40px；
   w 不到 640px 是矮一号的胶囊（COMPACT_WIDTH：高 24、字 12，不然高 28、字 13）。
   --u 是「放大以后的 1px」：每个尺寸都写成「插件里的 px 数 × --u」。播放器没变形时用容器宽度（cqw）就算得出来；
   被 3D 变形缩放过的播放器（首屏），js/base.js 的 MX.chip 按屏幕上显示的宽度量好，把 --u、--edge 和 .compact 直接写上去（.sized）。 */
.barwrap { position: absolute; inset: 0; pointer-events: none; }
.mxbar { --u: clamp(1px, 100cqw / 1400, 1.4px); --edge: clamp(16px, 2cqw, 40px); --h: 28; --pad: 12; --gap: 9;
  position: absolute; top: var(--edge); right: var(--edge); display: flex; align-items: center; height: calc(var(--h) * var(--u));
  background: var(--bg); color: var(--fg); border: var(--u) solid var(--border); border-radius: var(--radius); box-shadow: inset 0 var(--u) 0 var(--rim), var(--shadow);
  font: 500 calc(var(--fs) * var(--u))/1 var(--font); letter-spacing: .01em; white-space: nowrap;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; user-select: none; -webkit-user-select: none; pointer-events: none; }
@supports (top: round(1.5px, 1px)) { .mxbar { --edge: round(clamp(16px, 2cqw, 40px), 1px); } } /* 插件把离边的距离取整到 1px */
.mxbar .status { flex: none; display: flex; align-items: center; gap: calc(var(--gap) * var(--u)); height: 100%; padding: 0 calc(var(--pad) * var(--u)); }
.mxbar .dot { flex: none; width: calc(var(--dot) * var(--u)); height: calc(var(--dot) * var(--u)); border-radius: 50%; background: var(--muted); }
/* 深色风格的圆点外面有一圈很淡的同色细环；「正在……」的圆点没有环，慢慢明暗（bar.ts mx-breathe） */
.mxbar .dot.ok { background: var(--ok); box-shadow: 0 0 0 calc(2 * var(--u)) color-mix(in srgb, var(--ok) 12%, transparent); }
.mxbar .dot.warn { background: var(--warn); box-shadow: 0 0 0 calc(2 * var(--u)) color-mix(in srgb, var(--warn) 14%, transparent); }
.mxbar .dot.busy { background: var(--busy); animation: mx-breathe 2.8s ease-in-out infinite; }
@keyframes mx-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* 画面窄于 640px：矮一号的胶囊（bar.ts .bar.compact:not(.full)） */
@container (max-width: 639.98px) { .mxbar:not(.sized) { --h: 24; --fs: 12; --pad: 10; --gap: 7; } }
.mxbar.sized.compact { --h: 24; --fs: 12; --pad: 10; --gap: 7; }

/* ---- 插件：字幕（照 overlay.ts：主行约为画面高的 5.2%，宽画面按宽的 3.4%；行高 1.28；距底 8%）。网站上的画面都是 16:9，5.2% 的高 = 2.925% 的宽 ---- */
.sub { position: absolute; left: 4%; right: 4%; bottom: 8%; display: flex; flex-direction: column; align-items: center; gap: .1em; text-align: center; visibility: hidden; font-size: clamp(16px, 2.925cqw, 96px); }
.sub.on { visibility: visible; }
.sl { display: block; max-width: 100%; line-height: 1.28; text-wrap: balance; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; font-kerning: normal; }

/* 播放器外框（「怎么用」的播放器） */
.player { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; container-type: inline-size; border-radius: 2px; box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(239, 231, 218, .06); }
.player .ph { position: absolute; inset: 0; }
.player .ph img { width: 100%; height: 100%; object-fit: cover; animation: push 22s linear infinite alternate; }
.player .sub { font-size: clamp(16px, 2.925cqw, 96px); } /* 插件 fontPxFor：最小 16px，小播放器也读得清 */

/* ---- 章节 ---------------------------------------------------------------------------------- */
.sec { position: relative; padding: clamp(80px, 10vw, 136px) 0; }
.sec-head { max-width: 820px; }
.ph { display: inline-block; }
.sec-head h2 { font: 800 clamp(34px, 4.6vw, 64px)/1.14 var(--display); letter-spacing: -.005em; text-wrap: balance; font-feature-settings: "palt"; }
.lang-en .sec-head h2 { font-weight: 500; letter-spacing: -.018em; line-height: 1.06; }
.sec-head .lede { margin-top: 22px; max-width: 600px; font-size: 17px; line-height: 1.75; color: var(--cream-2); }
/* 中文导语只在标点处断行，不把一个词拆到两行；英文避免一词成行 */
.lang-zh .lede { word-break: keep-all; overflow-wrap: anywhere; }
p, li { text-wrap: pretty; }
/* 中文正文只在标点和空格处换行，「字幕」「微调」这样的词不拆开；一句太长才在中间断（字幕行和政策页不受影响） */
.home.lang-zh p:not(.sub), .home.lang-zh li { word-break: keep-all; overflow-wrap: anywhere; }

/* ---- 胶片颗粒 ------------------------------------------------------------------------------ */
.grain { position: fixed; z-index: 60; inset: -120px; pointer-events: none; background: url(/assets/grain.04e6576df1.png) repeat; background-size: 200px 200px; opacity: .16; animation: grain .8s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-41px, 23px); } 40% { transform: translate(37px, -13px); } 60% { transform: translate(-17px, -47px); } 80% { transform: translate(29px, 39px); } 100% { transform: translate(0, 0); } }

/* 平板上也放得下四个链接（原来 1100 以下就藏了），只把间距收一点；手机上藏起来 */
@media (max-width: 1100px) {
  .tb-links { gap: 28px; }
}
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .tb { height: 56px; column-gap: 16px; }
  .tb-brand { font-size: 18px; gap: 10px; }
  .tb-mark { width: 22px; height: 23px; }
  .tb-links { display: none; }
  .sec-head h2 { font-size: clamp(30px, 8.4vw, 40px); }
  .sec-head .lede { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mxbar .dot.busy { opacity: .6; } /* 插件一样：不明暗，停在中间的亮度 */
}

/* 幕寻官网 · 首屏。一间暗下来的放映空间：房间接近全黑，屏幕是最亮的东西；光只在屏幕附近（一小圈很淡的光晕）
   和地上（磨光水泥的倒影、光斑）。左上角外面一扇放映窗，打出一束很淡的光，光里有烟，靠放映窗那一段有一点灰尘。
   屏幕放在哪、多大由 js/hero.js 按视口量（顶栏和标题之间的空当），这里只管样子。
   负责：品牌组。build.mjs 按 base、hero、how、styles、pricing、pages 的顺序拼成一份 site.css。 */

/* 往下滚半屏：镜头推过去、焦点移到后面那块 */
.hero { position: relative; height: 150vh; height: 150svh; background: var(--black); }
/* 不设最小高度：矮窗口（横放的手机）里也正好一屏，屏幕和标题由 js/hero.js 按实际高度摆 */
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* 墙和地只差一点点，都接近黑；整间屋子开场时一次平滑亮起来 */
.stage { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 38%; overflow: hidden;
  background: linear-gradient(180deg, #070605 0%, #090807 46%, #0b0a08 58%, #080706 72%, #050404 100%);
  animation: lights 1.8s ease-out .1s both; }
@keyframes lights { from { opacity: .03; } } /* 从很暗、不是全黑开始：主画面一开场就算画出来了 */
/* 镜头暗角 */
.stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 100% at 50% 40%, transparent 50%, rgba(0, 0, 0, .6) 100%); }
.cam { position: absolute; left: 50%; top: 38%; transform-style: preserve-3d; will-change: transform; animation: dolly 2.8s cubic-bezier(.22, .65, .18, 1) .1s backwards; }
/* 开场：镜头从后面一点慢慢推进来（translate 和脚本设的 transform 叠加，不打架） */
@keyframes dolly { from { translate: 0 16px -280px; } }
/* 平时：极慢地左右漂移，不到 1° */
.drift { transform-style: preserve-3d; animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift { from { transform: rotateY(-.8deg) translate3d(-10px, 0, 0); } to { transform: rotateY(.8deg) translate3d(10px, -4px, 20px); } }
/* 1024 以下屏幕和标题用同一条左右页边：只转不平移（平移 10px 会让左右边距一边大一边小，总监 11-13 量出来 12 和 31）；手机上整个不漂 */
@keyframes drift-c { from { transform: rotateY(-.8deg); } to { transform: rotateY(.8deg); } }
.hero:not(.live) .drift, .hero:not(.live) .shot img { animation-play-state: paused; }
.world { transform-style: preserve-3d; }

/* ---- 屏幕 ---------------------------------------------------------------------------------- */
.scr, .refl { position: absolute; left: 0; top: 0; width: var(--w); margin-left: calc(var(--w) / -2); margin-top: calc(var(--w) * -.28125); }
.scr { transform: translate3d(var(--x), var(--y), var(--z)) rotateY(var(--r)); transform-style: preserve-3d; }
.scr .in { position: relative; filter: blur(var(--b)) brightness(var(--l)); }
.scr .pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #050504; container-type: inline-size; }
/* 雾：越远，暗部被雾里的光抬起来一点（最多 .15 × .28） */
.scr .pic::after { content: ''; position: absolute; inset: 0; background: rgb(var(--c)); mix-blend-mode: screen; opacity: calc(var(--h) * .28); pointer-events: none; }
.scr .cnr { position: absolute; width: 2px; height: 2px; pointer-events: none; }
.cnr.tl { left: 0; top: 0; } .cnr.tr { right: 0; top: 0; } .cnr.br { right: 0; bottom: 0; } .cnr.bl { left: 0; bottom: 0; }
.scr .shot { position: absolute; inset: 0; z-index: -1; }
.scr .shot.on { z-index: 0; } /* 还在字幕、胶囊下面 */
.scr .shot img { width: 100%; height: 100%; object-fit: cover; transform-origin: 46% 44%; }
/* 主屏幕的混剪：视频盖在海报帧上，开始放了（.rolling）才显出来。海报就是视频接着放的那一帧，换的时候看不出来；
   推镜剪在视频里（site/tools/reel.mjs），这里不再推。移焦以后变清楚的那块静帧慢慢推，更远的不推（推了要一直重新算模糊） */
.scr .reel { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; background: transparent; }
.scr.rolling .reel { opacity: 1; }
.scr.s1 .shot img { animation: push 40s ease-in-out infinite alternate; }
@keyframes push { from { transform: scale(1.003); } to { transform: scale(1.05) translate(-.4%, -.3%); } }

/* 光晕：画面缩成 48×27、拉高反差（暗部压到 0，只留亮处）画在小画布上，放大以后就是一团按亮处分布的光；
   框和屏幕一样大、往后退一点，晕开的那一小圈是模糊溢出来的。很淡，暗部不会被抬成一片灰 */
.glow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateZ(-80px); filter: blur(18px) saturate(1.2); opacity: .32; pointer-events: none; }

/* 倒影：磨光的水泥地。离屏幕越远越淡、越糊。真剧照比占位图亮（luma .42–.58）：倒影和光斑跟着亮度走的那部分收了一点，
   亮度到 .48 封顶（最亮那张不再更亮），屏幕外的房间回到 6–9/255（11-13 照真图量的） */
.refl { transform: translate3d(var(--x), var(--ry), var(--z)) rotateY(var(--r)) scaleY(-1); pointer-events: none; }
.refl .in { display: block; width: 100%; aspect-ratio: 16 / 9; opacity: calc(.13 + min(var(--lu), .48) * .17); filter: blur(calc(var(--b) * 1.2 + 3px)) brightness(calc(var(--l) * .8));
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .32) 15%, rgba(0, 0, 0, .06) 38%, transparent 56%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .32) 15%, rgba(0, 0, 0, .06) 38%, transparent 56%); }
/* 地上的光斑：屏幕前面一片被照亮的地（地平面，按画面的颜色） */
.pool { position: absolute; left: 0; top: 0; width: calc(var(--w) * 2.2); height: calc(var(--w) * 1.3); margin-left: calc(var(--w) * -1.1); margin-top: calc(var(--w) * -.65);
  transform: translate3d(var(--x), var(--floor), calc(var(--z) + var(--w) * .38)) rotateX(90deg);
  background: radial-gradient(closest-side, rgba(var(--c), calc(min(var(--lu), .48) * .12)), rgba(var(--c), calc(min(var(--lu), .48) * .04)) 46%, transparent 100%);
  pointer-events: none; transition: background .9s ease; }

/* ---- 放映光束、放映窗、灰尘 ------------------------------------------------------------------ */
/* 光束画布只有屏幕的 1/4 大，放大以后本来就是柔的 */
.beam, .dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* 放映窗就在画面左上角外面（和 js/hero.js 里光束的起点一致：6vw、-8vh），镜头对着它的那一角泛起一点点光 */
.booth { position: absolute; left: -24vw; top: -40vh; width: 60vw; height: 64vh; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 242, 216, .07), rgba(255, 242, 216, .025) 40%, transparent 80%); }
.floor-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(5, 4, 4, .35) 45%, rgba(5, 4, 4, .82) 100%); }

/* ---- 口号和「即将上架」 ------------------------------------------------------------------------ */
.hero-copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 var(--gut) clamp(30px, 6vh, 64px); pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
/* 整句奶油色。字号按宽和高取小，矮屏幕上也不会顶到屏幕；每行都不折行 */
.h1 { font-family: var(--display); color: var(--cream); font-feature-settings: "palt"; }
/* 每行四周留出余量再用负边距抵掉（字的位置不变）：中文 900 粗的笔画顶、英文斜体 f 往左下甩的尾巴都不会被切掉（原来 .04em/.1em、左右 0，会切） */
.h1 .ln { display: block; overflow: hidden; white-space: nowrap; padding: .12em .2em .2em; margin: -.12em -.2em -.2em; }
/* 片头字幕的做法：整句淡入，和屏幕亮起同时（不用逐行从遮罩里升起） */
.h1 { animation: fadein .6s ease-out .45s backwards; }
.h1 .ln > span { display: inline-block; vertical-align: top; }
@keyframes fadein { from { opacity: 0; } }
/* 行与行之间的空格还在文字里（复制、读屏都有），只是不显示、不占地方 */
.h1 .sp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: pre; }
.lang-zh .h1 { font-size: min(5.6vw, 8.4vh, 100px); line-height: 1.08; font-weight: 900; }
/* 英文照 Kombai 的 Vesper、Rookwood Understudy、Maison Trois：多行衬线大标题在 1440 宽上 88–112px、行距 .94–.98。
   原来 68px、行距 1.02 偏小偏松；中文 900 粗的字身本来就满，76px 已经和它们一样大，不动 */
.lang-en .h1 { font-size: min(5.4vw, 8.6vh, 100px); line-height: .98; font-weight: 500; letter-spacing: -.02em; }
.lang-en .h1 .it { font-style: italic; font-weight: 400; }
/* 整行 --cream-2：在倒影上也有 4.5:1 以上 */
.stores { margin-top: 22px; font-size: 14px; line-height: 1.4; color: var(--cream-2); letter-spacing: .02em; animation: fadein .6s ease-out .6s backwards; }
.stores .soon { margin-left: .5em; }

@media (max-width: 1024px) {
  .lang-zh .h1 { font-size: min(8vw, 7.2vh); }
  .lang-en .h1 { font-size: min(7.4vw, 6.8vh); }
  /* 屏幕摆在正中时，地上的光斑会被画出一道斜的接缝（11-13 用真图看到的），这个宽度以下不要光斑，倒影还在 */
  .pool { display: none; }
  /* 屏幕和标题对齐同一条页边，漂移只转不平移（见上面 drift-c）：左右边距最多差 1.5px */
  .drift { animation-name: drift-c; }
}
@media (max-width: 760px) {
  .stage { perspective: 900px; }
  .scr.main, .refl.s0 { --r: 0deg !important; } /* 手机上主屏幕正对 */
  .booth { left: -62vw; top: -33vh; width: 120vw; height: 50vh; } /* 手机上放映窗在 -2vw、-8vh */
  /* 手机上的标题照 Kombai 例子的手机版（Vesper 47px、Rookwood Understudy 48px）放大：中文最长一行占到宽度的八成多，英文第一行九成多 */
  .lang-zh .h1 { font-size: min(12.6vw, 6.4vh); line-height: 1.1; }
  .lang-en .h1 { font-size: min(10vw, 5.6vh); }
  .stores { margin-top: 16px; font-size: 13.5px; }
}

/* 横放的手机、很矮的窗口：字号按高度定，标题在左下，屏幕放到标题右边 */
@media (max-height: 520px) and (orientation: landscape) {
  .lang-zh .h1 { font-size: min(5.4vw, 10.5vh); line-height: 1.08; }
  .lang-en .h1 { font-size: min(4.6vw, 9.5vh); }
  .hero-copy { padding-bottom: 18px; }
  .stores { margin-top: 10px; font-size: 13px; }
}

/* 1024 以下：后面那块开场时藏着，往下滚时淡进来（--s1o 由 js/hero.js 设，0 → 1） */
@media (max-width: 1024px) {
  .scr.s1 > .in, .refl.s1, .pool.p1 { opacity: var(--s1o, 0); }
  .scr.s1 > .glow { opacity: calc(.32 * var(--s1o, 0)); }
}

/* 后面那块（现在是 2001 太空漫游）：剧照右半是太空，屏里 (4,4,4) 和房间 (7,6,4) 分不开，推近了像一块缺了右边的剪纸（挑错第三轮）。
   外面一圈很淡的 1px 亮边；屏里最黑的地方抬到 #141311（lighten 只抬比它暗的，别的颜色不动；.shot 自成一组，只和这张图混） */
.scr.s1 .pic { box-shadow: 0 0 0 1px rgba(239, 231, 218, .1); }
.scr.s1 .shot::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #141311; mix-blend-mode: lighten; pointer-events: none; } /* 图在推镜（transform），要压在它上面 */
/* 虚焦时它的字幕糊成一团像乱码：先藏着，移焦到这块、变清楚了（js/hero.js 按它的模糊加 .sharp）再淡出来 */
.scr.s1 .sub { transition: opacity .5s ease; }
.scr.s1:not(.sharp) .sub { opacity: 0; }

/* 手机竖屏（宽不到 600）：不滚动推镜、不移焦，首屏就一屏高（原来 150svh，要先滚 422px 才到「怎么用」）。
   只留主屏幕：后面那块在这么窄的画面里只露一条边，移焦时还被切掉一半，像渲染出错。
   不要倒影：调到 .12 还是一条带硬边的灰台子（挑错第三轮），地面就是暗的。
   屏幕、标题、商店那行成一组、整组居中略偏上，由 js/hero.js 摆（标题的 top 由脚本设；没有脚本时标题照旧贴底） */
@media (max-width: 599.98px) {
  .hero { height: 100vh; height: 100svh; }
  .scr.s1, .refl, .pool { display: none; }
  /* 屏幕和标题、标志用同一条左右页边，两边一样宽（总监 11-13）。正对的一块屏幕转 0.8° 看不出来，就不漂了，也省电 */
  .drift { animation: none; }
}

/* 图还没到（慢网络）：屏幕先亮成这张图的平均色，不是一块黑。--c 是保留色相、最亮通道拉到 235 的光色，盖在近黑的底上、
   不透明度取亮度 --lu，合起来约等于 manifest 里的平均色（sections/hero.mjs 算）。脚本跑起来时图还没到：js/hero.js 给这一段加 .wait，
   盖一层同色的幕；图到了、解好码换成 .reveal，幕慢慢揭开（不动图本身的透明度，最大内容绘制照常算）。光晕、倒影跟着淡进来 */
.scr .pic { background-image: linear-gradient(rgba(var(--c), var(--lu)), rgba(var(--c), var(--lu))); }
.scr .shot::after { content: ''; position: absolute; inset: 0; background: #050504 linear-gradient(rgba(var(--c), var(--lu)), rgba(var(--c), var(--lu))); opacity: 0; pointer-events: none; }
.scr .shot.wait::after { opacity: 1; }
.scr .shot.reveal::after { transition: opacity .9s ease-out; }
.scr.wait > .glow, .refl.wait .in { opacity: 0; }
.scr.reveal > .glow, .refl.reveal .in { transition: opacity .9s ease-out; }

/* 弱设备（没有显卡、开场帧率很低，js/hero.js 判断）：去掉模糊、光晕、倒影和灰尘，只留两块屏幕 */
.hero.lite .scr .in { filter: none !important; }
.hero.lite .glow, .hero.lite .refl, .hero.lite .dust { display: none; }
.hero.lite .drift, .hero.lite .shot img { animation: none; }

/* 整页截图：首屏不留镜头推进用的那段滚动 */
.shot .hero { height: 100vh; height: 100svh; }
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100vh; height: 100svh; }
}
/* 不画 3D 透视的浏览器（js/hero.js 量出来加 .flat）：只留主屏幕和它的倒影，不留滚动推镜头的那段 */
.hero.flat { height: 100vh; height: 100svh; }
.hero.flat .scr:not(.main), .hero.flat .refl:not(.s0), .hero.flat .pool:not(.p0) { display: none; }

/* 幕寻官网 · 怎么用。左边：某个视频网站上的一部片（网页标题、播放器里循环放的一段片段、上方正中的短提示、右上角的幕寻按钮和字幕），
   下面一条时间线（照片段画，不写秒数）；右边：四步，每步一个短标题，最多一句话。手机上四步变成一排数字，下面只显示当前这一步。
   负责人 11-13 晚要播放器跟着四步动：片段一直在放，短提示、幕寻按钮、字幕、时间线按四步变（js/how.js）。
   11-13 晚并成四步以后，照 Kombai 的三个例子重排（截图在 团队/截图/官网/参考/怎么用/）：
   - Verve AI（how-it-works-web-6，深色）：画面和一列编号的步骤左右并排；步骤之间只有细线，编号在固定宽的一栏里，标题、说明两级字；
   - Ulbrook（how-it-works-web-30）：步骤像目录一样一行一个，编号和标题一样大（「1 标题」），只展开当前那一步；行高放大，四行和左边的画面差不多高；
   - Lodeway（how-it-works-web-14）：当前那一步的上沿是一道深色细线。这里这道线跟着这一步在片段里走到哪儿走满，走满就换下一步（js/how.js）。
   琥珀色只给状态：幕寻按钮的圆点（插件自己的）、短提示里的勾、播放头、对上以后的字幕块；别处用米白。网站自己的字不用等宽字，最小 13px，圆角 2px。
   键盘焦点框照 base.css（暗底米色）。负责：幕寻前端（Mac，原品牌组）。 */

.how { background: var(--black); }
/* 播放器 : 四步 = 1.75 : 1（1440 宽时约 720 : 410）；窄到 960 以下才上下排，1024 的小笔记本上画面和四步也能同时看到 */
.how-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: clamp(36px, 5vw, 72px); margin-top: clamp(32px, 3.9vw, 56px); align-items: start; }

/* ---- 左边：网页、播放器、时间线 ---- */
.how-stage { position: relative; container: how-stage / inline-size; } /* 时间线按这一栏的宽度换排法，见下面的 @container */
/* 播放器上面一行：网页标题（18px 高 + 12px，右边「暂停演示」那一行也是这个高度，两栏的上沿对齐） */
.page { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; font-size: 13px; line-height: 18px; white-space: nowrap; }
.page .ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--cream-2); }
.how .player { z-index: 1; }
/* 海报帧就是片段的第一帧：不推镜（base.css 给静帧的慢推），片段接上时画面不跳。片段整段下好、摆到位了才盖上来（.rolling，js/how.js） */
.how .player .ph img { animation: none; }
.how .clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.how .player.rolling .clip { opacity: 1; }
.how .player .sub { bottom: calc(8% + clamp(40px, 8%, 76px)); }
/* 播放器上方正中的短提示（照插件 overlay.ts 的 .note：和幕寻按钮一样的胶囊、同一个高度；打勾的图标、粗体的字、后面淡一点的字）。
   第 1 步写认出的片名，第 2 步数「找到 n 份字幕」。离上边和幕寻按钮一样远（cornerEdge）；播放器窄（插件的 compact）时矮一号，
   而且挪到幕寻按钮下面（插件也是：两个会碰上时往下让），中文页只留中文片名和年份 */
.how .note { position: absolute; z-index: 2; left: 50%; top: clamp(16px, 2cqw, 40px); display: flex; align-items: center; gap: 7px; height: 28px; max-width: min(64%, 440px); padding: 0 12px;
  translate: -50% 0; transform: translateY(-6px) scale(.98); transform-origin: 50% 0; opacity: 0;
  background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 0 1px 0 var(--rim), var(--shadow);
  font: 500 13px/26px var(--font); letter-spacing: .01em; white-space: nowrap; pointer-events: none; -webkit-font-smoothing: antialiased;
  transition: opacity .14s ease-in, transform .14s ease-in; }
@supports (top: round(1.5px, 1px)) { .how .note { top: round(clamp(16px, 2cqw, 40px), 1px); } }
.how .note.on { opacity: 1; transform: none; transition: opacity .16s ease-out, transform .26s cubic-bezier(.16, 1, .3, 1); }
.how .note .ni { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 2.57; stroke-linecap: round; stroke-linejoin: round; }
.how .note .nt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.how .note b { font-weight: 600; }
.how .note .nm { color: var(--muted); font-weight: 400; }
.how .note[data-k=title] .k-count, .how .note[data-k=count] .k-title, .how .note[data-k=count] .ni { display: none; }
@container (max-width: 639.98px) {
  .how .note { top: 46px; height: 24px; gap: 6px; padding: 0 10px; font-size: 12px; line-height: 22px; }
  .how .note .ni { width: 12px; height: 12px; stroke-width: 3; }
  .how .note .alt { display: none; }
}
/* 假播放条：一个播放键和一条进度线，不写时间；进度线压暗，画面里最亮的还是字幕 */
.ctrl { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; padding: 18px 18px 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72)); }
.ctrl .play { width: 0; height: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.ctrl .track { position: absolute; left: 18px; right: 18px; bottom: 12px; height: 3px; background: rgba(255, 255, 255, .2); border-radius: 2px; }
.ctrl .fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(36.4% + var(--ph, 0) * .24%); background: rgba(255, 255, 255, .55); border-radius: 2px; }

/* 时间线照片段画：横轴是片段从头到尾（不写数字），播放头跟着片段走，片段从头再来时播放头也回到左头。
   「对白」是三句台词的出、收，一句一条实心的条（不画声波）；「字幕」一句一个空心的块（块里不写字）。播放头走过时亮起来。
   第 3 步字幕块整体晚一截（--late，how.mjs 的 LAG 折成百分比），最后一块拖出片段末尾的那截不画；第 4 步挪到对白上，变成琥珀色。
   播放器够宽时，时间线和播放器一样宽：「对白」「字幕」写在轨道左头，盖在轨道上（第一句台词在片段一秒以后，碰不到这两个字；
   播放头刚从头走的那一下从字的后面过去）；播放器窄了（按播放器那一栏的宽度量：英文「Dialogue」长，640px 以下；中文 440px 以下，
   就是手机），这两个字放回左边单独一列（--lab）。 */
.timeline { --lab: 0px; position: relative; z-index: 1; margin-top: 20px; }
@container how-stage (max-width: 640px) { .lang-en .timeline { --lab: 64px; } }
@container how-stage (max-width: 440px) { .timeline { --lab: 62px; } .ln-k { letter-spacing: 0; } }
.ruler { display: block; height: 10px; margin-left: var(--lab); border-bottom: 1px solid var(--line-d);
  background:
    repeating-linear-gradient(90deg, rgba(239, 231, 218, .34) 0 1px, transparent 1px 100%) 0 100% / calc(100% / 8) 9px repeat-x,
    repeating-linear-gradient(90deg, rgba(239, 231, 218, .16) 0 1px, transparent 1px 100%) 0 100% / calc(100% / 32) 4px repeat-x; }
.lane { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; height: 42px; }
.lane + .lane { border-top: 1px solid rgba(239, 231, 218, .06); }
.ln-k { position: relative; z-index: 3; width: max-content; padding: 2px 8px 2px 0; background: var(--black); font-size: 13px; line-height: 1; letter-spacing: .02em; color: var(--cream-3); white-space: nowrap; }
.trk { position: relative; height: 100%; overflow: hidden; }
.said { position: absolute; top: 50%; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); height: 10px; margin-top: -5px; border-radius: 2px; background: var(--cream-2); opacity: .32; transition: opacity .15s, background-color .15s; }
.said.on { opacity: .95; background: var(--cream); }
.cue { --o: 0; position: absolute; top: 8px; bottom: 8px; left: calc((var(--a) + var(--o)) * 1%); width: calc((var(--b) - var(--a)) * 1%);
  background: rgba(239, 231, 218, .06); border: 1px solid rgba(239, 231, 218, .45); border-radius: 2px;
  transition: left .8s cubic-bezier(.65, 0, .25, 1) var(--dl, 0s), opacity .45s ease var(--dl, 0s), transform .5s cubic-bezier(.2, .8, .2, 1) var(--dl, 0s), background-color .15s, border-color .15s; }
.timeline.late .cue { --o: var(--late); }
.timeline.nocues .cue { opacity: 0; transform: translateY(-10px); }
.cue.on { background: rgba(239, 231, 218, .22); border-color: var(--cream); }
.timeline.snap .cue { background: rgba(226, 165, 59, .14); border-color: rgba(226, 165, 59, .7); }
.timeline.snap .cue.on { background: rgba(226, 165, 59, .36); border-color: var(--amber); }
.playhead { position: absolute; top: 0; bottom: 0; left: calc(var(--lab) + (100% - var(--lab)) * var(--ph, 0)); width: 1px; background: var(--amber); }
.playhead::before { content: ''; position: absolute; top: -1px; left: -4px; border: 4.5px solid transparent; border-top: 6px solid var(--amber); border-bottom: 0; }

/* ---- 右边：四步 ---- */
.how-side { display: flex; flex-direction: column; }
/* 「暂停演示」：在四步上面靠右，和左边的网页标题同一行（18px 高 + 12px），四步的第一道线和播放器的上沿对齐 */
.demo-toggle { all: unset; box-sizing: border-box; position: relative; cursor: pointer; align-self: flex-end; display: inline-flex; align-items: center; gap: 9px; height: 18px; margin: 0 0 12px; font-size: 13px; line-height: 18px; color: var(--cream-3); border-radius: 2px; transition: color .2s; }
.demo-toggle::after { content: ''; position: absolute; inset: -9px -8px; } /* 点得到的范围大一圈，版面不变 */
.demo-toggle[hidden] { visibility: hidden; } /* 减少动态效果时不显示，但位置留着，四步不往上缩 */
.demo-toggle:hover { color: var(--cream); }
.demo-toggle i { position: relative; width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.demo-toggle[data-state=paused] i { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.how-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-d); }
/* 一行一步，像目录：编号和标题同样大、同一条基线，编号在 32px 宽的一栏里。
   两栏时字号、行高跟着宽度收一点（1440 宽 21px、一行约 80px；1024 宽 18px、约 60px），四行加上展开的那一步和左边的画面、时间线差不多高。
   标题下面的空分两截：按钮里 12px，行尾（li 的 padding）13px；展开的那一步，说明夹在这两截中间，离自己的标题近、离下一行远 */
.how-steps > li { position: relative; padding-bottom: clamp(8px, .9vw, 13px); border-bottom: 1px solid var(--line-d); }
.st-h { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: flex; align-items: baseline; width: 100%; padding: clamp(16px, 1.8vw, 26px) 0 clamp(8px, .84vw, 12px); border-radius: 2px; }
.st-n { flex: none; width: 32px; font: 400 clamp(18px, 1.46vw, 21px)/1 var(--display); color: var(--cream-3); font-variant-numeric: lining-nums; transition: color .3s; }
/* 步骤标题用标题字体，比正文大一级（h2 64 → 步骤 21 → 正文 15） */
.st-t { font: 600 clamp(18px, 1.46vw, 21px)/1.35 var(--display); letter-spacing: .01em; color: var(--cream-3); transition: color .3s; }
.lang-en .st-t { font-weight: 500; font-size: clamp(19px, 1.53vw, 22px); line-height: 1.25; letter-spacing: -.005em; }
.lang-en .st-n { font-size: clamp(19px, 1.53vw, 22px); }
.st-h:hover .st-t, .st-h:hover .st-n { color: var(--cream-2); }
.how-steps > li.done .st-t { color: var(--cream-2); }
.how-steps > li.on .st-t, .how-steps > li.on .st-n { color: var(--cream); }
/* 当前那一步上沿的细线（盖在上一行的分隔线上）：自动放时跟着这一步在片段里走到哪儿从左往右走满（how.js 每帧写 transform），停住、点过、减少动态效果时是满的 */
.st-p { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--cream); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.how-steps > li.on .st-p { transform: scaleX(1); }
/* 换步：要收起的那步先把字淡掉（0.12 秒），再收高度（0.28 秒），字不会被横着切一半；
   要展开的那步和它同时、同样快地长高（两步加起来不超过 how.js 留好的高度，整节不跳），长到差不多了字再淡进来 */
.st-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease) .12s; }
.st-b > div { overflow: hidden; min-height: 0; padding-left: 32px; opacity: 0; transition: opacity .12s ease; }
.how-steps > li.on .st-b { grid-template-rows: 1fr; }
.how-steps > li.on .st-b > div { opacity: 1; transition: opacity .2s ease .26s; }
.st-tt { display: none; }
.st-b p { padding-bottom: clamp(8px, .84vw, 12px); font-size: 15px; line-height: 1.7; color: var(--cream-2); }
/* 认出的片名：画面上的短提示写着，这里只给读屏（播放器对读屏是藏起来的） */
.st-b p.found { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 候选字幕：语言 · 格式 · 版本。第 2 步一行行冒出来；第 3 步右边依次标上匹配程度，最匹配的那行亮起来 */
.cands { list-style: none; margin: 2px 0 14px; padding: 0; }
.cands:last-child { margin-bottom: clamp(8px, .84vw, 12px); }
.cands li { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--line-d); font: 400 14px/1.45 var(--sans); color: var(--cream-2); }
.cands li:last-child { border-bottom: 1px solid var(--line-d); }
.cands i { font-style: normal; margin: 0 .5em; color: var(--cream-3); }
/* 第 2 步：三行先占好位置（淡淡的），再一行行点亮（how.js 每隔 0.12 秒点一行），下面那句一直在原位 */
.cands:not(.rated) li { opacity: .3; transition: opacity .25s ease; }
.cands:not(.rated) li.hit { opacity: 1; }
/* 第 3 步：等这一步的字淡进来（电脑上约 0.46 秒）以后，再依次标上匹配程度，最匹配的那行亮起来 */
.cands .vd { flex: none; font-weight: 500; color: var(--cream-3); opacity: 0; transition: opacity .4s ease calc(var(--k) * .3s + .6s); }
.how-steps > li.on .cands .vd { opacity: 1; }
.cands.rated li:first-child { transition: color .5s ease 1.55s; }
.cands.rated li:first-child .vd { transition: opacity .4s ease .6s, color .5s ease 1.55s; }
.how-steps > li.on .cands.rated li:first-child, .how-steps > li.on .cands.rated li:first-child .vd { color: var(--cream); }

@media (max-width: 960px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  /* 上下排时四步占满一行，字回到最大 */
  .how-steps > li { padding-bottom: 10px; }
  .st-h { padding: 20px 0 10px; }
  .st-b p { padding-bottom: 10px; }
  .cands:last-child { margin-bottom: 10px; }
  .st-t, .st-n { font-size: 21px; }
  .lang-en .st-t, .lang-en .st-n { font-size: 22px; }
}
@media (max-width: 760px) {
  .how-grid { gap: 28px; margin-top: 32px; }
  .page { margin-bottom: 10px; }
  .timeline { margin-top: 14px; } /* 手机上「对白」「字幕」是左边单独一列（上面的 @container），放得下「Dialogue」，离播放头还留 8px */
  .lane { height: 38px; }
  .said { height: 8px; margin-top: -4px; }
  /* 四步变成一排数字，下面只显示当前这一步；暂停按钮放在数字这一排的最后一格，只留图标（字留给读屏） */
  .how-side { position: relative; display: block; }
  .how-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 40px; column-gap: 6px; border-top: 0; }
  .how-steps > li { display: contents; }
  .st-h { grid-row: 1; justify-content: center; padding: 14px 0 13px; border-bottom: 1px solid var(--line-d); }
  .st-h .st-t { display: none; }
  .st-n, .lang-en .st-n { width: auto; font-size: 17px; }
  /* 当前那一格的细线在下沿，2px，和上面一样跟着这一步的时间走满 */
  .st-p { top: auto; bottom: -1px; height: 2px; }
  /* 四步的说明叠在同一格里，只露出当前这一步：这一格按最高的那步撑开，换步时下面的内容不跳 */
  /* 换步：上一步的字 0.12 秒淡掉再藏起来，这一步的字接着淡进来（手机上不收放高度，所以不用等） */
  .st-b { grid-row: 2; grid-column: 1 / -1; display: block; visibility: hidden; transition: visibility 0s linear .12s; }
  .how-steps > li.on .st-b { visibility: visible; transition: none; }
  .how-steps > li.on .st-b > div { transition: opacity .2s ease .12s; }
  /* 当前这一步：标题用标题字体、比说明大一级；最高的第 2、3 步连同画面和数字，844 高的手机一屏放得下 */
  .st-b > div { padding: 18px 0 0; }
  .st-b p.st-tt { display: block; margin: 0 0 10px; padding-bottom: 0; font: 600 21px/1.35 var(--display); letter-spacing: .01em; color: var(--cream); }
  .lang-en .st-b p.st-tt { font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.005em; }
  .st-b p { margin-top: 0; padding-bottom: 6px; font-size: 14.5px; line-height: 1.65; }
  .cands, .cands:last-child { margin-bottom: 12px; }
  .cands li { padding: 8px 0; }
  .demo-toggle { position: absolute; top: 0; right: 0; width: 40px; height: 44px; margin: 0; padding: 0; justify-content: center; border-bottom: 1px solid var(--line-d); }
  .demo-toggle::after { inset: 0; }
  .demo-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 幕寻官网 · 实测（sections/proof.mjs）。负责：品牌组。
   build.mjs 按 base、hero、how、proof、pricing、pages 的顺序拼成一份 site.css。
   一句标题居中，下面一行小字「团队 2026 年 11 月实测」（和下面价格那一节的排法一样：标题居中、一行小字在标题下面）；
   再下面三栏，每栏一个大数字、一句话。三栏占满版心，和「怎么用」、价格、问答的左右边对齐（11-13 晚合并时统一）。
   照的 Kombai 例子（截图在 团队/截图/官网/参考/实测/）：
   - Makelab：暗底上的衬线大数字（这里用价格那一节同一个 Newsreader），单位缩到四分之一大、落在数字的底线上；
     每栏左边一道细竖线，数字和字离竖线一段距离（Makelab 数字 124px、小字 15px，1440 宽）；
   - Sablewood：先数字、紧跟一句接着数字往下读的话；手机上一栏一栏往下排，竖线留在左边；
   - Windfell：只放三个数字，三栏等宽，标题居中，没有卡片、底色和按钮，四周留白大。
   颜色只用 base.css 的米色、墨色（琥珀色只留给插件的状态和标志）；没有渐变、光晕、圆角。字不小于 13px。 */

.proof { background: var(--black); }

/* 标题一句、居中；小字在标题下面（价格那一节标题下面是货币，也是 20px） */
.pf-head { max-width: none; text-align: center; }
.pf-head h2 { max-width: 1120px; margin: 0 auto; }
.pf-note { margin-top: 20px; font-size: 13.5px; line-height: 1.5; letter-spacing: .04em; color: var(--cream-3); }
.lang-en .pf-note { letter-spacing: .01em; }

/* 三栏等宽、占满版心；每栏左边一道细竖线，数字和字离竖线 --in */
.pf-list { --in: clamp(18px, 2.4vw, 34px); list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(48px, 5.2vw, 76px) 0 0; padding: 0; }
.pf-i { position: relative; padding: 2px var(--in) 8px; }
.pf-i::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(239, 231, 218, .2); transform-origin: 50% 0; }
/* 大数字：这一节里最大的字（1440 宽 109px，比价格的 76px 大一截）；数字不换行，单位（部、次）缩小跟在后面，落在同一条底线上。
   最长的「1,656次」在每栏里放得下，离右边下一道竖线不比离自己这道近（1440 宽：左 34px、右 42px） */
.pf-n { font: 400 clamp(64px, 7.6vw, 112px)/.86 'MX Newsreader', Georgia, serif; letter-spacing: -.03em; font-variant-numeric: lining-nums; white-space: nowrap; }
.pf-u { margin-left: .12em; font: 600 .24em/1 var(--display); letter-spacing: .02em; color: var(--cream-2); }
/* 那句话：比正文小一点的米灰；中文一行最多 17 个字左右，在标点处换行（ui.mjs 的 nb） */
.pf-t { max-width: 17em; margin-top: 20px; font-size: 16px; line-height: 1.7; color: var(--cream-2); text-wrap: pretty; }
.lang-en .pf-t { max-width: 19em; line-height: 1.6; }

/* 进场：滚到这里时，三道竖线从上往下画出来，数字、那句话依次淡进来，一栏比一栏晚一点（js/proof.js 加 .roll / .in）。
   没有脚本、设了「减少动态效果」时没有 .roll，直接是最后的样子；截图脚本（html.shot）也直接摆最后的样子 */
.proof.roll .pf-i::before { transform: scaleY(0); }
.proof.roll .pf-n, .proof.roll .pf-t { opacity: 0; transform: translateY(12px); }
.proof.roll.in .pf-i::before { transform: none; transition: transform 1s cubic-bezier(.65, 0, .25, 1) calc(var(--i, 0) * 140ms); }
.proof.roll.in .pf-n, .proof.roll.in .pf-t { opacity: 1; transform: none; transition: opacity .8s ease, transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 140ms + 200ms); }
.proof.roll.in .pf-t { transition-delay: calc(var(--i, 0) * 140ms + 340ms); }
.shot .proof.roll .pf-i::before, .shot .proof.roll .pf-n, .shot .proof.roll .pf-t { opacity: 1; transform: none; }

/* 平板：三栏还放得下，字小一号 */
@media (max-width: 1024px) {
  .pf-t { margin-top: 16px; font-size: 15px; }
}
/* 手机：标题和小字照样居中；三栏变成一栏一栏往下排（Sablewood），竖线还在左边 */
@media (max-width: 760px) {
  .pf-note { margin-top: 16px; font-size: 13px; }
  .pf-list { --in: 20px; grid-template-columns: minmax(0, 1fr); row-gap: 36px; margin-top: 44px; }
  .pf-n { font-size: 68px; }
  .pf-t { margin-top: 14px; font-size: 15.5px; }
}

/* 幕寻官网 · 价格、问答、片尾。整块都是暗的放映厅，和上面几节一样，不再变成纸色（负责人 11-13：「价格页不用突然变白」，问答也一起）。
   价格：标题居中、货币在标题下面；下面两栏，左边「免费版」，右边「会员」（月卡、年卡两个价钱并排，下面是两种都包括的），两栏这一组在页面上居中。
   问答：左边标题，右边一条条摊开；两栏的位置和价格那两栏一样，清单对着「会员」那一栏。
   片尾：「完」，压在两道细线之间的标志，最底下口号和三份政策。
   照的 Kombai 例子（11-13 第四轮，截图在 团队/截图/官网/参考/价格/、问答/）：价格 Halden、Solstice+、Framely；
   问答 Nuthatch、Bellwren、Thicket Refillery；片尾 Elowen Film Foundation、Orto。
   琥珀色只留给状态和标志；圆角 2px；字不小于 13px。
   负责：品牌组。build.mjs 按 base、hero、how、proof、pricing、pages 的顺序拼成一份 site.css。 */

/* 价格、问答共用两栏：左 2 : 右 3，占满版心，左右边和上面几节对齐（免费版、「常见问题」的左边就是「怎么用」标题和播放器的左边）；
   两栏之间空一大块，不画竖线（Halden）。问答的标题对着免费版，清单对着会员（Thicket Refillery：右边的清单从上面那条竖线开始） */
.pricing, .faq {
  --cols: minmax(0, 2fr) minmax(0, 3fr);
  --cgap: clamp(56px, 8.4vw, 120px);
  --focus: var(--cream); /* base.css 给这两节设的是墨色焦点框（纸色那时候的），暗底换回米色 */
  background: var(--black);
}

/* ---- 价格 ---------------------------------------------------------------------------------- */
/* 1440×900 上点顶栏「价格」跳过来，标题、货币、两栏到清单最后一条一屏放得下 */
.pricing { padding-top: clamp(64px, 5vw, 72px); }
/* 标题一句、居中；货币在标题下面（Solstice+ 的标题下面一句小字的位置）。
   标题和两栏一样宽：英文「Start free. Join when you watch a lot.」电脑上一行放得下，整节一屏装得下 */
.pr-head { max-width: none; text-align: center; }

/* 货币：¥ · NZ$ · US$ · A$ · € · £，选中的米白加下划线；单选组，点、方向键都能换（js/page.js） */
/* 每个符号两边一样宽（不设最小宽度：「¥」「€」这样窄的字会被撑出一圈空，看起来间距不匀） */
.curs { display: flex; justify-content: center; align-items: baseline; gap: 4px; margin-top: 20px; font-size: 15px; }
.curs i { font-style: normal; color: var(--cream-3); }
.curs button { all: unset; cursor: pointer; text-align: center; padding: 5px 7px; border-radius: 2px; color: var(--cream-3); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 7px; transition: color .2s ease, text-decoration-color .2s ease; }
.curs button:hover { color: var(--cream); }
.curs button[aria-checked=true] { color: var(--cream); text-decoration-color: currentColor; }
.curs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-cur] [data-cur] { display: none; }
body[data-cur="cny"] [data-cur="cny"], body[data-cur="nzd"] [data-cur="nzd"], body[data-cur="usd"] [data-cur="usd"], body[data-cur="aud"] [data-cur="aud"], body[data-cur="eur"] [data-cur="eur"], body[data-cur="gbp"] [data-cur="gbp"] { display: inline; }

/* 两栏共用六行：栏名、档名、价钱、条件、清单的栏目名、清单。左右两栏用同一套行（subgrid），价钱、清单的第一条左右在同一条线上；
   免费版没有档名（栏名就是它的名字）、没有清单的栏目名，那两行空着 */
.fares { display: grid; grid-template-columns: var(--cols); grid-template-rows: repeat(6, auto); column-gap: var(--cgap); margin-top: clamp(40px, 3.1vw, 44px); }
.fare { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; align-content: start; min-width: 0; }
.f-free { grid-column: 1; }
/* 会员：月卡、年卡并排，各占一半 */
.f-member { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3.4vw, 48px); }
/* 栏名，下面一道贯穿这一栏的细线（Halden） */
.fare-h { grid-row: 1; grid-column: 1 / -1; padding-bottom: 16px; border-bottom: 1px solid var(--line-d); font: 700 26px/1.3 var(--display); letter-spacing: .02em; }
.lang-en .fare-h { font-weight: 500; font-size: 28px; letter-spacing: -.005em; }
/* 一档：名字、价钱、条件，各占一行（subgrid，月卡、年卡和免费版的价钱在同一条线上） */
.tier { grid-row: 2 / 5; display: grid; grid-template-rows: subgrid; min-width: 0; }
.tier h4 { grid-row: 1; margin-top: 24px; font: 700 18px/1.4 var(--display); letter-spacing: .04em; }
.lang-en .tier h4 { font-weight: 500; font-size: 20px; letter-spacing: 0; }
/* 价钱是这一栏里最大的字；货币符号小一号，顶着数字的上沿（Framely），「/ 30 天」米灰小字跟在后面、对齐底线（Solstice+）。
   按这一格的宽度决定「/ 30 天」跟在后面还是换到下一行（容器查询放在价钱上：放在 .tier 上会让它不再跟着两栏的行走） */
.fare-price { grid-row: 2; margin-top: 16px; font: 400 clamp(52px, 5.3vw, 76px)/.9 'MX Newsreader', Georgia, serif; letter-spacing: -.025em; font-variant-numeric: lining-nums; white-space: nowrap; container: price / inline-size; }
.fare-price .cy { font-size: .3em; letter-spacing: .01em; vertical-align: 1.62em; margin-right: .1em; }
.fare-price small { margin-left: .3em; font: 400 15px/1 var(--sans); letter-spacing: 0; color: var(--cream-3); }
/* 价还没定时（copy.mjs 里 price: null）：同一格写一句小字，占的高度和大字价钱一样，左右对得齐 */
.fare-price.tbd { display: flex; align-items: flex-end; height: calc(clamp(52px, 5.3vw, 76px) * .9); font: 400 15px/1.3 var(--sans); letter-spacing: 0; color: var(--cream-2); white-space: normal; }
.fare-note { grid-row: 3; max-width: 24em; margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--cream-2); text-wrap: pretty; }
/* 窄的一格放不下「NZ$9.90 / 30 days」这么长的（量过：手机上中文最长约 145px，英文约 192px）：「/ 30 天」换到价钱下面一行，价钱本身不折。
   月卡、年卡一样宽，两格一起换，不会一格换一格不换 */
@container price (max-width: 150px) {
  .fare-price small { display: block; margin: 12px 0 0; }
}
@container price (max-width: 205px) {
  .lang-en .fare-price small { display: block; margin: 12px 0 0; }
}
/* 清单的栏目名（Framely 的「Everything in Studio, plus」） */
.fare-both { grid-row: 5; grid-column: 1 / -1; margin-top: 34px; font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: .02em; color: var(--cream-2); }
/* 包括什么：一行一条，条与条之间一道细线，最后收一道（Halden）。
   不拉到和另一栏一样高：免费版的清单短，收尾那道线跟着最后一条走，不留一截空格子 */
.fare-inc { grid-row: 6; grid-column: 1 / -1; align-self: start; list-style: none; margin: 10px 0 0; padding: 0; border-bottom: 1px solid var(--line-d); }
.fare-inc li { padding: 11px 0 12px; border-top: 1px solid var(--line-d); font-size: 15.5px; line-height: 1.6; color: var(--cream); }

/* ---- 问答 ---------------------------------------------------------------------------------- */
/* 从顶栏的「问答」跳过来时，这一节的顶停在离屏幕上沿 112px 处，和标题停住的位置一样，标题和第一条问题对齐 */
.faq { padding-top: 0; scroll-margin-top: 40px; }
/* 左边标题（往下读时停在原处），右边清单；两栏和价格的两栏一样宽、一样位置（Nuthatch：左窄右宽） */
.qa-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--cgap); align-items: start; }
.faq .sec-head { position: sticky; top: 112px; padding-top: 2px; }
.lang-zh .faq .sec-head { padding-top: 6px; }
.faq .sec-head h2 { margin-top: 0; }
.qa { border-bottom: 1px solid var(--line-d); }
/* 问题比答案大一截，答案用浅一号的米灰（Bellwren 问题 29、答案 18；Nuthatch 条间细线） */
.qa-i { padding: 22px 0 26px; }
/* 第一条问题的字顶和左边标题的字顶对齐（量过：标题的字面在行框里偏上，标题往下垫 2～6px） */
.qa-i:first-child { padding-top: 0; }
.qa-i + .qa-i { border-top: 1px solid var(--line-d); }
.qa-i h3 { font: 600 22px/1.45 var(--display); color: var(--cream); text-wrap: balance; }
.lang-en .qa-i h3 { font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -.005em; }
.qa-i p { max-width: 36em; margin-top: 10px; font-size: 16px; line-height: 1.8; color: var(--cream-2); }
.lang-en .qa-i p { line-height: 1.7; }

/* ---- 片尾 ---------------------------------------------------------------------------------- */
/* 「完」→ 出品方的片名卡：标志（M 标加名字，和顶栏同一个组合放大到 48px 高）压在两道贯穿全屏的细线之间（Elowen）
   → 最底下一条细栏：左边口号，右边政策（Orto）。整块在 1440×900 上约 436px（48% 屏高），不超过 60%。 */
.credits { --rule: rgba(239, 231, 218, .14); position: relative; overflow: hidden; background: var(--black); color: var(--cream); padding: clamp(80px, 7.8vw, 112px) var(--gut) 0; text-align: center; }
.cr-end { display: flex; align-items: center; justify-content: center; gap: 28px; font: 800 clamp(36px, 3.9vw, 56px)/1 var(--display); }
.cr-end::before, .cr-end::after { content: ''; width: clamp(48px, 9vw, 120px); height: 1px; background: rgba(239, 231, 218, .25); }
.lang-en .cr-end { font-weight: 400; font-style: italic; }
/* 片名卡：两道细线从屏幕左边贯穿到右边，中间是标志 */
.cr-title { margin: clamp(48px, 5vw, 72px) calc(-1 * var(--gut)) 0; padding: clamp(24px, 2.4vw, 34px) var(--gut); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* 标志：比例照顶栏（标 24×25、字 21px、间距 11px、字距 .06em），放大到标高 48px */
.cr-brand { display: inline-flex; align-items: center; gap: 21px; font: 700 40px/1 var(--display); letter-spacing: .06em; }
.cr-mark { flex: none; width: 46px; height: 48px; color: var(--amber); }
/* 最底下一条细栏 */
.cr-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; padding: 26px 0 30px; text-align: left; }
.cr-slogan { font: 500 14px/1.6 var(--display); letter-spacing: .12em; color: var(--cream-2); text-wrap: balance; }
.lang-en .cr-slogan { letter-spacing: .01em; font-style: italic; font-size: 16px; }
.cr-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 14px; }
/* 链接之间不放「·」：窄屏折行时它会挂在上一行末尾（11-13 晚，768 宽英文页看到的）；只靠间距和下划线分开 */
.cr-links i { display: none; }
.cr-links { column-gap: 22px; }
/* 最下面一行版权小字（画面取自预告片）：居中、最浅的米色，不抢片尾 */
.cr-rights { margin: 0 0 30px; font-size: 12px; line-height: 1.6; letter-spacing: .02em; color: var(--cream-3); text-align: center; }
.cr-links a { color: var(--cream-2); text-decoration: underline; text-decoration-color: rgba(239, 231, 218, .3); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .2s ease; }
.cr-links a:hover { color: var(--cream); text-decoration-color: currentColor; }
.cr-links a:focus-visible { outline: 2px solid var(--focus, var(--cream)); outline-offset: 3px; border-radius: 2px; }
/* 滚到这里时依次浮上来（js/page.js 加 .roll / .in；没有脚本、减少动态效果时直接显示） */
.credits.roll > * { opacity: 0; transform: translateY(16px); }
.credits.roll.in > * { opacity: 1; transform: none; transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 160ms); }
.shot .credits.roll > * { opacity: 1; transform: none; }

/* 矮一点的笔记本屏（1366×768、1280×800）：间距收一点，点顶栏「价格」跳过来也一屏装得下 */
@media (min-width: 900px) and (max-height: 860px) {
  .pricing { padding-top: 48px; }
  .curs { margin-top: 14px; }
  .fares { margin-top: 32px; }
  .fare-h { padding-bottom: 12px; }
  .tier h4 { margin-top: 18px; }
  .fare-price, .fare-note { margin-top: 12px; }
  .fare-both { margin-top: 26px; }
  .fare-inc li { padding: 9px 0 10px; }
}

/* 两栏在窄一点的屏幕上上下排：免费版在上，会员在下（月卡、年卡仍然并排）。问答也一样：标题在上，清单在下 */
@media (max-width: 899px) {
  .fares { display: block; }
  /* 两栏各排各的（不再共用一套行）：免费版没有档名、没有清单的栏目名，价钱和清单上面多留一点 */
  .fare { display: grid; grid-template-rows: repeat(6, auto); }
  .f-member { margin-top: 64px; }
  .f-free .fare-price { margin-top: 28px; }
  .f-free .fare-inc { margin-top: 30px; }
  .qa-grid { display: block; }
  .faq .sec-head, .lang-zh .faq .sec-head { position: static; padding-top: 0; }
  .qa { margin-top: 36px; border-top: 1px solid var(--line-d); }
  .qa-i:first-child { padding-top: 24px; }
}
@media (max-width: 760px) {
  /* 手机上点的地方高一点 */
  .curs { gap: 2px; }
  .curs button { padding: 9px 7px; }
  .fares { margin-top: 40px; }
  .fare-h { padding-bottom: 14px; font-size: 22px; }
  .lang-en .fare-h { font-size: 24px; }
  .tier h4 { margin-top: 24px; font-size: 16px; }
  .lang-en .tier h4 { font-size: 18px; }
  .fare-price { margin-top: 14px; font-size: 50px; }
  .f-free .fare-price { margin-top: 24px; }
  .fare-price.tbd { height: 45px; }
  .fare-note { margin-top: 14px; font-size: 14px; }
  .fare-both { margin-top: 36px; }
  .fare-inc li { font-size: 15px; }
  .f-member { margin-top: 56px; }
  .qa-i { padding: 22px 0 24px; }
  .qa-i h3 { font-size: 19px; }
  .lang-en .qa-i h3 { font-size: 21px; }
  .qa-i p { margin-top: 8px; font-size: 15.5px; line-height: 1.75; }
  .cr-end { gap: 20px; }
  .cr-title { padding-top: 22px; padding-bottom: 22px; }
  .cr-brand { gap: 17px; font-size: 33px; }
  .cr-mark { width: 38px; height: 40px; }
  /* 手机：口号一行，三份政策排成一行（放不下就折到下一行），不再一条一行竖着排 */
  .cr-foot { flex-direction: column; align-items: center; gap: 14px; padding: 24px 0 30px; text-align: center; }
  .cr-links { justify-content: center; gap: 4px 10px; }
  .cr-links a { display: inline-block; padding: 6px 0; }
}
/* 最窄的手机（320 宽）：月卡一格只有 126px，「CN¥9.90」50px 放不下，价钱小一号 */
@media (max-width: 359px) {
  .fare-price { font-size: 44px; }
  .fare-price.tbd { height: 40px; }
}

/* 幕寻官网 · 政策页和 404。
   政策页：纸色的长文阅读页，照 Kombai 的长文例子（Cedar & Slate、Kindred Current）排：大而不粗的标题、导语放大，
   小节之间靠留白分开（不画横线），小标题比正文大一截。电脑上左边一列目录跟着读到哪一节走（读到英文那段换成英文目录）；
   手机上每段的标题、导语后面有一个可折起的目录，往下读一段以后右下角出一个回到顶部。顶栏是 base.css 的 .policy .tb（纸色）。
   404：暗房里一块亮着、但没有片子的宽银幕，右上角是幕寻按钮「没找到」的状态胶囊（和插件一样大，不能点），下面一句字幕；屏幕是屋里唯一的光，
   照亮四周一小圈和前面的地（照首页首屏的做法，也照 Kombai 的 Totem、Vireo）。
   琥珀色只留给状态和标志；圆角 2px；字不小于 13px。
   负责：品牌组。build.mjs 按 base、hero、how、proof、pricing、pages 的顺序拼成一份 site.css。 */

/* ---- 政策页 -------------------------------------------------------------------------------- */
body.policy { background: var(--paper); color: var(--ink); color-scheme: light; }
/* 长文里跳转一下就到：base.css 的平滑滚动会让带 #en 打开时从页首一路滚 4000 多像素 */
html:has(> body.policy) { scroll-behavior: auto; }
/* 版心：左边目录 220，右边正文 700（中文一行四十个字上下，英文七十几个字母） */
.pol { display: grid; grid-template-columns: 220px minmax(0, 700px); column-gap: clamp(48px, 6.5vw, 104px); justify-content: center; padding: 152px var(--gut) 160px; }
.pol-body { grid-column: 2; }

/* 目录（电脑）：跟着滚动停在左边 */
.pol-toc { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow: auto; padding: 2px 8px 8px 0; font-size: 14px; }
.toc-tabs { display: none; }
.pol-toc.live .toc-tabs { display: flex; gap: 18px; margin-bottom: 18px; }
.toc-tabs button { all: unset; cursor: pointer; padding: 4px 0; border-radius: 2px; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: color .2s ease, text-decoration-color .2s ease; }
.toc-tabs button:hover { color: var(--ink); }
.toc-tabs button:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 3px; }
.pol-toc[data-lang=zh] [data-show=zh], .pol-toc[data-lang=en] [data-show=en] { color: var(--ink); text-decoration-color: currentColor; }
.pol-toc.live .toc-h { display: none; }
.pol-toc.live[data-lang=zh] .toc-en, .pol-toc.live[data-lang=en] .toc-zh { display: none; }
.toc-h { margin: 0 0 10px; font-size: 13px; letter-spacing: .1em; color: var(--ink-2); }
.toc-h:lang(en) { letter-spacing: .02em; }
.toc-en .toc-h { margin-top: 26px; }
.pol-toc ol, .toc-m ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-p); }
.pol-toc li a, .toc-m li a { display: block; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.45; transition: color .2s ease, border-color .2s ease; }
.pol-toc li a:hover, .toc-m li a:hover { color: var(--ink); }
.pol-toc li a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--ink); }
.pol-toc a:focus-visible, .toc-m a:focus-visible, .pol-body a:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 2px; border-radius: 2px; }

/* 目录（手机、窄屏）：每段一份，在这段的标题、导语后面、第一个小标题前面，折起来；电脑上不显示 */
.toc-m { display: none; }

/* 小节：小标题比正文大一截，上面空一大块（不画横线）；正文中文一行四十个字上下，英文七十几个字母 */
.pol-body h2 { margin: 72px 0 18px; font: 700 27px/1.35 var(--display); letter-spacing: .01em; scroll-margin-top: 32px; }
.pol-body section[lang=en] h2 { font-weight: 500; font-size: 29px; line-height: 1.2; letter-spacing: -.012em; }
.pol-body section > p { max-width: 40em; margin: 16px 0 0; font-size: 16px; line-height: 1.85; }
.pol-body section > ul { margin: 16px 0 0; padding-left: 1.25em; }
.pol-body section > ul > li { max-width: 40em; font-size: 16px; line-height: 1.85; }
.pol-body section > ul > li + li { margin-top: 14px; }
.pol-body section[lang=en] > p, .pol-body section[lang=en] > ul > li { max-width: 35em; font-size: 16.5px; line-height: 1.7; }

/* 标题区：标题大而不粗（中文 600、英文 400，首页的标题是 800–900）；日期、导语、适用范围依次往下，导语放大成第二层
   （写在正文的规则后面，英文段也压得住） */
.pol-body section h1 { margin: 0; font: 600 clamp(44px, 4.8vw, 68px)/1.12 var(--display); letter-spacing: .02em; }
.pol-body section[lang=en] h1 { font-weight: 400; line-height: 1.04; letter-spacing: -.028em; }
.pol-body section > p.date { margin: 20px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
/* 导语 600 宽（和例子的导语差不多宽），三份政策的导语末行都不会只剩两三个字 */
.pol-body section > p.lead { max-width: 30em; margin: 40px 0 0; font-size: 20px; line-height: 1.75; }
.pol-body section > p.scope { max-width: 44em; margin: 16px 0 0; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.pol-body section[lang=en] > p.lead { line-height: 1.6; }
.pol-body li::marker { color: var(--ink-2); }
.pol-body section > :is(p, ul) a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pol-body section > :is(p, ul) a:hover { text-decoration-thickness: 2px; }
/* 中文段之后接英文段：一条粗墨线隔开 */
.pol-body .part { margin-top: 136px; border-top: 2px solid var(--ink); }
.pol-body .part h1 { margin-top: 64px; }
.pol-body mark.todo { background: #f1cf7a; color: inherit; padding: 0 4px; border-radius: 2px; }

/* 回到顶部（手机、窄屏）：读过一屏多以后出现在右下角 */
.pol-up { position: fixed; z-index: 30; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: none; place-items: center; width: 44px; height: 44px; border-radius: 2px; background: var(--ink); color: var(--paper); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.pol-up.on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
.pol-up:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 3px; }

/* ---- 404 ----------------------------------------------------------------------------------- */
body.nf { background: var(--black); }
/* 一屏放下：屏幕、地上的光和回首页的路整组比正中略高一点（视觉中心） */
.nf-main { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 104px var(--gut) clamp(80px, 13vh, 136px); overflow: hidden; }
/* 读屏用的标题；画面上的那句是银幕上的字幕 */
.nf-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* 屏幕宽 1080 封顶；矮的笔记本屏按高度收，整组不出第二屏（横着拿的手机太矮，不再收，往下滚） */
.nf-room { position: relative; width: min(1080px, 100%); width: min(1080px, 100%, max(480px, (100svh - 330px) * 2.39)); }
/* 屏幕照亮的那一圈屋子（很淡，屏幕外仍是暗的）和屏幕前面的一片地 */
.nf-room::before, .nf-room::after { content: ''; position: absolute; z-index: -1; pointer-events: none; animation: nf-lit 1.1s ease-out .2s backwards; }
.nf-room::before { inset: -34% -16% -40%; background: radial-gradient(closest-side, rgba(255, 242, 216, .055), rgba(255, 242, 216, .02) 55%, transparent); }
.nf-room::after { left: 4%; right: 4%; top: calc(100% + 12px); height: 40%; background: radial-gradient(50% 70% at 50% 0%, rgba(255, 242, 216, .075), rgba(255, 242, 216, .02) 55%, transparent); }
/* 宽银幕（2.39:1），四周一圈黑绒遮幅；没有片子，放映机的灯照在幕布上：中间明显亮（约 #5C5850），四边暗到约 #1E1C18，
   一看就是一块亮着的银幕（第三轮挑错：原来中心只有 43,38,32，像没开灯）。字幕在下面偏暗的地方，白字照样清楚 */
.nf-screen { position: relative; aspect-ratio: 2.39 / 1; container-type: inline-size; overflow: hidden; background: radial-gradient(farthest-side at 50% 45%, #5c5850 0%, #514d46 24%, #3d3a34 52%, #2a2823 78%, #1e1c18 100%); box-shadow: 0 0 0 12px #050404; }
/* 灯慢慢亮起来（不闪）：一层暗幕从全黑退到没有 */
.nf-screen::before { content: ''; position: absolute; inset: 0; background: #0b0a08; opacity: 0; pointer-events: none; animation: nf-lamp 1.1s ease-out .2s backwards; }
@keyframes nf-lamp { from { opacity: 1; } }
@keyframes nf-lit { from { opacity: 0; } }
/* 字幕照插件的比例（主行约为画面高的 5.2%）；幕寻按钮（「没找到」的状态胶囊，大小照插件，见 base.css）先出来，字幕晚一拍，像一条字幕到点出现 */
.nf-screen .sub { font-size: clamp(16px, 2.18cqw, 40px); animation: cue .01s 1.5s backwards; }
.nf-screen .mxbar { animation: cue .01s .95s backwards; }
@keyframes cue { from { visibility: hidden; } }
.nf-links { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 10px; margin: clamp(44px, 8vh, 72px) 0 0; font-size: 16px; }
.nf-links i { font-style: normal; color: var(--cream-3); }
.nf-links a { padding: 8px 4px; color: var(--cream-2); text-decoration: underline; text-decoration-color: rgba(239, 231, 218, .3); text-decoration-thickness: 1px; text-underline-offset: 6px; transition: color .2s ease, text-decoration-color .2s ease; }
.nf-links a:first-child { color: var(--cream); }
.nf-links a:hover { color: var(--cream); text-decoration-color: currentColor; }
.nf-links a:focus-visible { outline: 2px solid var(--focus, var(--cream)); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 1100px) {
  .pol { display: block; max-width: 800px; margin: 0 auto; padding-top: 136px; }
  .pol-toc { display: none; }
  .toc-m { display: block; margin: 40px 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-p); }
  .toc-m summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 4px 0; font-size: 15px; font-weight: 600; }
  .toc-m summary::-webkit-details-marker { display: none; }
  .toc-m summary::after { content: ''; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
  .toc-m[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
  .toc-m summary:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 3px; border-radius: 2px; }
  .toc-m ol { margin: 2px 0 20px; font-size: 15px; }
  .toc-m li a { padding: 8px 0 8px 14px; }
  .toc-m + h2 { margin-top: 56px; }
  .pol-up { display: grid; }
}
@media (max-width: 760px) {
  .pol { padding: 104px var(--gut) 96px; }
  .pol-body section h1 { font-size: clamp(36px, 10.4vw, 44px); }
  .pol-body section > p.date { margin-top: 14px; }
  .pol-body section > p.lead { margin-top: 28px; font-size: 18px; text-wrap: balance; } /* 手机上几行一样长，不剩一两个字的末行 */
  .pol-body section > p.scope { font-size: 14.5px; }
  .pol-body h2 { margin-top: 56px; font-size: 23px; }
  .pol-body section[lang=en] h2 { font-size: 25px; }
  .toc-m { margin-top: 32px; }
  .toc-m + h2 { margin-top: 48px; }
  .pol-body .part { margin-top: 104px; }
  .pol-body .part h1 { margin-top: 48px; }
  /* 手机上屏幕和回首页的路是一组：链接紧跟在屏幕下面 32px 上下，整组在一屏里上下居中（第三轮挑错：放到最底下离屏幕太远，像没关系） */
  .nf-main { padding: 88px var(--gut) calc(88px + env(safe-area-inset-bottom, 0px)); }
  .nf-room { width: 100%; }
  .nf-screen { aspect-ratio: 16 / 9; box-shadow: 0 0 0 6px #050404; }
  .nf-screen .sub { font-size: clamp(16px, 2.925cqw, 96px); }
  .nf-room::before { inset: -60% -12% -70%; }
  .nf-room::after { height: 60%; }
  .nf-links { margin-top: 21px; } /* 加上链接自己的点击区，字离屏幕的黑边约 32px */
}

/* 插件的字幕和幕寻按钮样式（looks.mjs 生成，只有放映厅一种） */
@font-face{font-family:'MX Instrument Sans Inline';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/instrument.698f1a3deb.woff2) format('woff2');unicode-range:U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF}
.lk-cinema{--bg:#15120f;--fg:#efe7da;--muted:#a69d8f;--border:rgba(239,231,218,.15);--ok:#e2a53b;--busy:#efe7da;--warn:#e0705a;--shadow:0 1px 2px rgba(0,0,0,.3);--rim:rgba(255,255,255,.06);--radius:999px;--font:'MX Instrument Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', 'PingFang TC', 'Microsoft JhengHei UI', system-ui, sans-serif;--fs:13;--dot:6}
.lk-cinema .sl{color:#ffffff;font-weight:600;font-variant-numeric:proportional-nums;-webkit-text-stroke:.06em rgba(0,0,0,.7);paint-order:stroke fill;text-shadow:0 0 .03em #000,0 0 .07em rgba(0,0,0,.85),0 .05em .14em rgba(0,0,0,.5),0 0 .3em rgba(0,0,0,.18)}
.lk-cinema .sl.cjk{font-family:'MX Instrument Sans Inline','PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', 'PingFang TC', 'Microsoft JhengHei UI', system-ui, sans-serif;letter-spacing:.02em}
.lk-cinema .sl.ja{font-family:'MX Instrument Sans Inline','Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP','PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', 'PingFang TC', 'Microsoft JhengHei UI', system-ui, sans-serif;letter-spacing:.02em;word-break:auto-phrase}
.lk-cinema .sl.ko{font-family:'MX Instrument Sans Inline','Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR','PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', 'PingFang TC', 'Microsoft JhengHei UI', system-ui, sans-serif;letter-spacing:0;word-break:keep-all;font-weight:600}
.lk-cinema .sl.lat{font-family:'MX Instrument Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', 'PingFang TC', 'Microsoft JhengHei UI', system-ui, sans-serif;letter-spacing:.005em}
.lk-cinema .sl.s2{font-size:max(12px,0.66em);color:#eadfcd;font-weight:500;-webkit-text-stroke:.075em rgba(0,0,0,.7);paint-order:stroke fill;text-shadow:0 0 .037em #000,0 0 .088em rgba(0,0,0,.85),0 .05em .14em rgba(0,0,0,.5),0 0 .3em rgba(0,0,0,.18)}
.lk-cinema .sl.s2.ko{font-weight:600}
.lk-cinema .sl.s2.lat{font-size:calc(max(12px,0.66em) * 1.06)}