/* 字体：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.bf52f622d8.woff2') format('woff2'); unicode-range: U+3000, U+3002, U+3042, U+3044, U+3051, U+3053, U+3055, U+305B, U+305F-3060, U+3063, U+3067-3068, U+306A, U+306E-306F, U+3082, U+308C, U+4E00, U+4E0A, U+4E0D, U+4E2A, U+4E48, U+4E66, U+4E86, U+4E8B, U+4E9B, U+4EC0, 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+53D1, U+53D6, U+53EA, U+53F7, U+540C, U+5417, U+5458, U+548C, U+54EA, U+5668, U+56DB, U+5728, U+591A, U+5B50, U+5B57, U+5B8C, U+5BF9, U+5BFB, U+5DF1-5DF2, U+5E26, U+5E38, U+5E55, U+5E74, U+5E93, U+5EA6, U+5F00, U+5F55, U+5F97, U+5FD8, U+600E, U+601D, U+60F3, U+6211, U+627E, U+62A4, U+6301, U+6309, U+6311, U+652F, U+6536, U+662F, U+6708, U+6743, U+6765, U+6821, U+6837, U+6B3E, U+6BB5, U+6CE8, U+6D4F, U+6D88, U+7248, U+751F, U+7528, U+753B, U+767D, U+7684, U+770B, U+79CD, U+7AD9, U+7BA1, U+7F51, U+800C, U+80FD, U+81EA, U+8981, U+89C1, U+89C6, U+89C8, U+8BA4, U+8BB0, U+8D26, U+8D39, U+8D77, U+8FC7, U+9000, U+90A3, U+914D, U+9519, U+95EE, U+96C6, U+9762, U+9875, 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.91bfb82648.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+53D8, U+53EF, U+540E, 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+7ED9, U+8054, U+8BAE, U+8BF7, U+8BFB, U+8C01, U+8D23, U+8FD9, U+9001-9002, U+91CC, 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.8dce80bcbe.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.e5e9559921.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; }
@font-face { font-family: 'MX JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/jetbrains.5b58ac7014.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 Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/hanken.5465882af6.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 Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('/assets/fonts/archivo.49bac93f10.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 Plex Sans'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('/assets/fonts/plex-500.79bd4bc2fa.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、styles、pricing、pages 的顺序拼成一份 site.css。 */

: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;
  --mono: 'MX JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --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; }
.pricing, .faq, body.policy { --focus: var(--ink); }
::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：按钮在状态左边展开，× 在右边；先展开宽度再淡入内容，收起时反过来） ---- */
.barwrap { position: absolute; inset: 0; pointer-events: none; }
.mxbar { --h: 36px; position: absolute; top: clamp(16px, 2cqw, 40px); right: clamp(16px, 2cqw, 40px); display: flex; align-items: center; height: var(--h); background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  font: 500 var(--fs)/1 var(--font); letter-spacing: .01em; white-space: nowrap; cursor: default; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; user-select: none; -webkit-user-select: none; pointer-events: auto; transform-origin: 100% 0; }
.mxbar .more, .mxbar .end { display: grid; grid-template-columns: 0fr; height: 100%; transition: grid-template-columns .2s cubic-bezier(.4, 0, .2, 1) .06s; }
.mxbar.full .more, .mxbar.full .end { grid-template-columns: 1fr; transition-delay: 0s; }
.mxbar .inner, .mxbar .end > div { display: flex; align-items: center; min-width: 0; height: 100%; overflow: hidden; opacity: 0; transition: opacity .1s ease; }
.mxbar .inner { justify-content: flex-end; }
.mxbar .inner::before, .mxbar .end > div::after { content: ''; flex: none; width: 4px; }
.mxbar.full .inner, .mxbar.full .end > div { opacity: 1; transition: opacity .16s ease .07s; }
.mxbar .status { flex: none; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px; transition: padding .2s cubic-bezier(.4, 0, .2, 1); }
.mxbar.full .status { padding-right: 4px; }
.mxbar .dot { flex: none; width: var(--dot); height: var(--dot); border-radius: var(--dot-radius); background: var(--muted); }
.mxbar .dot.ok { background: var(--ok); }
.mxbar .dot.warn { background: var(--warn); }
.mxbar .dot.busy { background: var(--busy); animation: mx-pulse 1.8s ease-in-out infinite; }
@keyframes mx-pulse { 50% { opacity: .45; } }
.mxbar .seg { flex: none; display: flex; align-items: center; height: var(--div-h); padding: 0 4px; border-right: 1px solid var(--line); }
.mxbar .seg.squeezed { display: none; }
.mxbar button { all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: calc(var(--h) - 8px); padding: 0 var(--pad, 8px); border-radius: var(--btn-radius); color: var(--fg); font: inherit; letter-spacing: inherit; white-space: nowrap; cursor: pointer; transition: background-color .12s ease, color .12s ease; }
.mxbar button:hover { background: var(--hover); }
.mxbar .step { width: 26px; padding: 0; }
.mxbar .num { padding: 0 2px; color: var(--muted); }
.mxbar .switch { position: relative; flex: none; width: 24px; height: 14px; border: 1.5px solid var(--muted); border-radius: var(--sw-radius); transition: background-color .16s ease, border-color .16s ease; }
.mxbar .switch::after { content: ''; position: absolute; top: 1.5px; left: 1.5px; width: 8px; height: 8px; border-radius: var(--sw-radius); background: var(--muted); transition: transform .16s ease, background-color .16s ease; }
.mxbar [aria-pressed=true] .switch { border-color: var(--ok); background: var(--ok); }
.mxbar [aria-pressed=true] .switch::after { transform: translateX(10px); background: var(--knob); }
.mxbar .close { width: 28px; padding: 0; color: var(--muted); }
.mxbar .close:hover { color: var(--fg); }
.mxbar svg { display: block; stroke-linecap: var(--cap); stroke-linejoin: var(--cap); }
.lk-poster .mxbar svg { stroke-linejoin: miter; }
/* 海报：通高的分隔线划成格子，悬停铺满一格 */
.lk-poster .mxbar .seg { padding: 0; }
.lk-poster .mxbar .seg button { height: 100%; padding: 0 12px; border-radius: 0; }
.lk-poster .mxbar .seg .step { width: 30px; padding: 0; }
/* 画面窄于 640px：矮一点、紧一点的条子（插件 COMPACT_BELOW） */
@container (max-width: 639.98px) {
  .mxbar { --h: 30px; --fs: 12px; --pad: 6px; }
  .mxbar .seg { padding: 0 2px; }
  .mxbar .status { gap: 6px; padding-left: 10px; }
  .mxbar:not(.full) .status { padding-right: 10px; }
  .lk-poster .mxbar .seg { padding: 0; }
  .lk-poster .mxbar .seg button { padding: 0 9px; }
}
/* 视频上的短提示（overlay.ts 的 .note） */
.note-x { position: absolute; left: 50%; top: 7%; max-width: 86%; padding: 7px 14px; transform: translate(-50%, -4px); background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font: 500 13px/1.35 var(--font); letter-spacing: .01em; white-space: nowrap; opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.note-x.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- 插件：字幕（照 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; }
}

/* 幕寻官网 · 首屏。一间暗下来的放映空间：房间接近全黑，屏幕是最亮的东西；光只在屏幕附近（一小圈很淡的光晕）
   和地上（磨光水泥的倒影、光斑）。左上角外面一扇放映窗，打出一束很淡的光，光里有烟，靠放映窗那一段有一点灰尘。
   屏幕放在哪、多大由 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; }
/* 主屏幕三段叠在一起，当前那段在最上面（不用 visibility 切：换段时不黑、不算新的最大内容绘制） */
.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%; }
/* 静帧上缓慢推镜：主屏幕每切一段重新推；移焦以后变清楚的那块也慢慢推。更远的不推（推了要一直重新算模糊） */
.scr.main .shot.on img { animation: push 9s cubic-bezier(.3, .1, .3, 1) both; }
.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 照 Kombai 的例子打磨（报告见 团队/截图/官网/参考/怎么用/）：
   - 六步的标题用标题字体（宋体 / Newsreader），比正文大一级，读起来像目录而不是菜单（Barcraft「The Stir, in six motions」、Hagane「Seven blades」）；
   - 播放器和六步的宽度比从 2:1 收到约 1.7:1，六步那一栏放得下大一号的字（Perimor、Hagane 的列表和画面约 1.5:1）；
   - 时间线和播放器一样宽，「对白」「字幕」写在轨道左头（Cineloom Studio 的时间线和画面左右对齐）；
   - 「暂停演示」放到六步上面，和左边播放器上面的网页标题在同一行（Hagane 把操作提示放在列表那一栏的上头）；
   - 换步时整节高度不变（电脑上 how.js 按最高的那步给列表留高度，手机上几步的说明叠在同一格里）。
   琥珀色只给「已校准」这类状态：状态点（插件自己的）、播放头、对齐以后的字幕块；别处用米白。网站自己的字不用等宽字，最小 13px，圆角 2px。
   键盘焦点框照 base.css（暗底米色）。负责：品牌组。build.mjs 按 base、hero、how、styles、pricing、pages 的顺序拼成一份 site.css。 */

.how { background: var(--black); }
.how::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 220px; background: linear-gradient(180deg, var(--black), transparent); pointer-events: none; }
.how > .wrap { position: relative; z-index: 1; } /* 标题在上面那层渐变之上，不被压暗 */
/* 播放器 : 六步 = 1.7 : 1（1440 宽时约 710 : 420）；窄到 960 以下才上下排，1024 的小笔记本上画面和六步也能同时看到 */
.how-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 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 { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--cream-2); transition: color .5s; }
/* 第 1 步：网页标题被读到，下面划一道线（.mark）；第 1 步结束约 1 秒后这道线淡掉（只剩 .read），不然一直留着像个链接；下一轮第 1 步再画。
   三种样子：还没读（没有线，换回来时不放动画）、正在读（线从左往右画出来）、读完了（线原地淡掉，不往回缩） */
.page .ttl::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--cream-2); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; transition: none; }
.how-stage.read .page .ttl { color: var(--cream); }
.how-stage.read .page .ttl::after { transform: scaleX(1); opacity: 0; transition: opacity .6s ease; }
.how-stage.mark .page .ttl::after { transform: scaleX(1); opacity: 1; transition: transform 1s cubic-bezier(.65, 0, .25, 1); }
.how .player { z-index: 1; }
.how .player .sub { bottom: calc(8% + clamp(40px, 8%, 76px)); }
.how .mxbar .label { min-width: 3em; }
/* 假播放条：只写当前时间（不写片长）；进度线压暗，画面里最亮的还是字幕 */
.ctrl { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; gap: 14px; padding: 18px 18px 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72)); font: 500 13px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #fff; }
.ctrl .play { width: 0; height: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.ctrl .time { font-variant-numeric: tabular-nums; }
.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; }

/* 时间线：上面一条刻度（不写数字），对白的波形，字幕块（不写字）；播放头走过时亮起来。字幕块没对齐时是米白，对齐以后变琥珀色。
   播放器够宽时，时间线和播放器一样宽：「对白」「字幕」写在轨道左头，盖在轨道上（第一句对白从 12% 开始，播放头从 10.5% 起走，碰不到这两个字）；
   播放器窄了（按播放器那一栏的宽度量：英文「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; font-size: 13px; line-height: 1; letter-spacing: .02em; color: var(--cream-3); white-space: nowrap; }
.trk { position: relative; height: 100%; }
.wv { position: absolute; top: 9px; bottom: 9px; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); display: flex; align-items: center; gap: 2px; }
.wv i { flex: 1; min-width: 1px; height: calc(var(--a) * 100%); border-radius: 1px; background: var(--cream-2); opacity: .5; transition: opacity .2s, background-color .2s; }
.wv.on i { opacity: 1; 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 1.15s cubic-bezier(.65, 0, .25, 1) var(--dl, 0s), opacity .5s ease var(--dl, 0s), transform .6s cubic-bezier(.2, .8, .2, 1) var(--dl, 0s), background-color .25s, border-color .25s, box-shadow .6s; }
.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); box-shadow: 0 0 16px rgba(226, 165, 59, .22); }
.timeline.snap .cue.on { background: rgba(226, 165, 59, .36); border-color: var(--amber); }
/* 「晚了」：对白开始的地方到字幕开始的地方，一道虚线；对齐时缩没 */
.gap { position: absolute; top: 50%; left: calc(var(--a) * 1%); width: calc(var(--late) * 1%); height: 0; border-top: 1px dashed rgba(239, 231, 218, .6); opacity: 1; transition: width 1.15s cubic-bezier(.65, 0, .25, 1), opacity .45s; }
.gap::before { content: ''; position: absolute; left: 0; top: -4px; height: 7px; border-left: 1px solid rgba(239, 231, 218, .6); }
.gap span { position: absolute; z-index: 2; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 1px 4px; background: var(--black); font-size: 13px; line-height: 1; color: var(--cream-2); white-space: nowrap; } /* 盖在播放头上面，播放头停在这里时字也看得清 */
.timeline:not(.late) .gap, .timeline.nocues .gap, .timeline.calm .gap { width: 0; opacity: 0; }
.gap ~ .gap span { display: none; } /* 「晚了」只标第一处 */
.playhead { position: absolute; top: 0; bottom: 0; left: calc(var(--lab) + (100% - var(--lab)) * var(--ph, 0)); width: 1px; background: var(--amber); box-shadow: 0 0 10px rgba(226, 165, 59, .65); }
.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); }
.how-steps > li { position: relative; border-bottom: 1px solid var(--line-d); }
/* 两栏时字号、行距跟着宽度收一点（1440 宽 21px、行高 64px；1024 宽 18px、55px），六步那一栏不会比左边的画面长出一大截 */
.st-h { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: baseline; gap: 14px; width: 100%; padding: clamp(13px, 1.18vw, 17px) 0 clamp(12px, 1.1vw, 16px); border-radius: 2px; }
.st-n { flex: none; width: 18px; font: 400 15px/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; }
.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); }
/* 换步：要收起的那步先把字淡掉（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: 18px; font-size: 15px; line-height: 1.7; color: var(--cream-2); }
/* 认出的片名 */
.st-b p.found { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--cream); }
.found b { font-weight: 600; }
.found span { font-size: 14px; color: var(--cream-2); }
/* 候选字幕：语言 · 格式 · 版本。第 2 步一行行冒出来；第 3 步右边依次标上匹配程度，最匹配的那行亮起来 */
.cands { list-style: none; margin: 0 0 16px; padding: 0; }
.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); }
  /* 上下排时六步占满一行，字回到最大 */
  .st-h { padding: 17px 0 16px; }
  .st-t { font-size: 21px; }
  .lang-en .st-t { 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; }
  .wv i:nth-child(even) { display: none; } /* 窄屏波形条少一半，每根 2–3px，看得见 */
  /* 窄屏只在第一处写「晚了」，后两处只留虚线；字靠右贴着字幕块的开头，不盖住字幕块 */
  .gap span { left: auto; right: 2px; transform: none; padding: 1px 3px; }
  /* 六步变成一排数字，下面只显示当前这一步；暂停按钮放在数字这一排的最后一格，只留图标（字留给读屏） */
  .how-side { position: relative; display: block; }
  .how-steps { display: grid; grid-template-columns: repeat(6, 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 { width: auto; font-size: 16px; }
  .how-steps > li.on .st-h { border-bottom-color: var(--cream); box-shadow: inset 0 -1px 0 var(--cream); }
  /* 六步的说明叠在同一格里，只露出当前这一步：这一格按最高的那步撑开，换步时下面的内容不跳 */
  /* 换步：上一步的字 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; }
  /* 当前这一步：标题用标题字体、比说明大一级（Hagane 手机上的列表也是大号衬线名字）；最高的第 2、3 步连同画面和数字，844 高的手机一屏放得下 */
  .st-b > div { padding: 15px 0 0; }
  .st-b p.st-tt { display: block; margin-bottom: 8px; padding-bottom: 0; font: 600 20px/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 { padding-bottom: 6px; font-size: 14.5px; line-height: 1.65; }
  .cands { 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; }
}
/* 很窄的手机：播放器只有三百多像素宽，居中的「已自动校准」会压到右上角的状态胶囊，改成靠左（高度和插件一样） */
@media (max-width: 440px) {
  .how .note-x { left: 16px; transform: translateY(-4px); }
  .how .note-x.on { transform: none; }
}

/* 幕寻官网 · 四种风格。少说话：一句标题，一幅画面，画面正下方一行（左边四个风格名，右边显示方式）。
   标题、画面、下面那一行都在和别的块同一条栏里（.wrap，最大 1202px），左边对齐；画面比栏窄时靠左，不居中。
   电脑上点顶栏「四种风格」跳过来（停在顶栏下面 72px），整节——上留白 + 标题 + 画面 + 下面那一行——一屏放得下：
   画面按屏高限高，宽度按 16:9 跟着走；这一节的上留白也按屏高算。
   悬停条和字幕照插件：悬停条 36px 高，画面宽过 1400px 才放大（base.js MX.fitBar）。换风格像换片（js/styles.js）。
   参照 Kombai：Auralis（大图下面一排名字、各用各的字体）、Quietide（细进度线：暗的底线、亮的走过的部分；手机上画面通栏）、
   Petrichor（一行里左边内容、右边控制，两头和上面的内容对齐）。
   琥珀色只留给插件里「已校准」这类状态；这一节自己的部分用奶油色。
   负责：品牌组。build.mjs 按 base、hero、how、styles、pricing、pages 的顺序拼成一份 site.css。 */

.looks { --lk-cjk: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', system-ui, sans-serif;
  --lk-dim: rgba(239, 231, 218, .2);
  --lk-vh: 100vh;
  /* 一屏的账：顶栏下 72px（html 的 scroll-padding-top）+ 上留白 + 标题一行（base.css .sec-head h2 的字号 × 行高 1.14）
     + 标题到画面 + 画面 + 下面那一行（上边距 14、行高 39，底下再留 9）。画面最矮 300px */
  --lk-pad: clamp(24px, calc(var(--lk-vh) * .05), 56px);
  --lk-gap: clamp(18px, calc(var(--lk-vh) * .032), 36px);
  --lk-title: calc(clamp(34px, 4.6vw, 64px) * 1.14);
  --lk-row: 62px;
  --lk-h: max(300px, calc(var(--lk-vh) - 72px - var(--lk-pad) - var(--lk-title) - var(--lk-gap) - var(--lk-row)));
  padding-top: var(--lk-pad);
  background: linear-gradient(180deg, var(--black), var(--dark) 30%); }
@supports (height: 100svh) { .looks { --lk-vh: 100svh; } }
.looks :focus-visible { outline-color: var(--cream); }

.looks .lk-head { margin-bottom: var(--lk-gap); }

/* 画面和下面那一行一样宽：按屏高算出来的 16:9，最宽到栏宽；靠左 */
.lk-frame { width: min(100%, var(--lk-h) * 16 / 9); container-type: inline-size; }

/* 片门：换片时上一格往上走、下一格从下面跟上来，中间一条片格线，都裁在这个框里 */
.gate { position: relative; overflow: hidden; background: #000; isolation: isolate; box-shadow: 0 0 0 1px rgba(239, 231, 218, .07); }
.gate .player { border-radius: 0; box-shadow: none; }
.gate .player .ph img { animation-duration: 30s; }
/* 画面（tabpanel）能用 Tab 停到：焦点框画在最上面一层，不然会被画面盖住 */
.gate .player:focus-visible { outline: none !important; }
.gate::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 2px var(--cream); opacity: 0; }
.gate:has(.player:focus-visible)::after { opacity: 1; }
.gate .ghost { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lk-fl { position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: #000; pointer-events: none; box-shadow: 0 0 4px rgba(0, 0, 0, .6); }
/* 预先下字体时临时放四份（js/styles.js warmFonts），不显示 */
.lk-warm { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }

/* 悬停条上的「双语」开关在这一节能点（和显示方式联动） */
.looks .mxbar .lines { cursor: pointer; }

/* 画面正下方一行：左边四个名字一组，右边显示方式，同一条基线，两头和画面对齐 */
.lk-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 32px; margin-top: 14px; }

/* 四个风格名。每个按钮的行高由按钮自己的字定（30px），名字的字体各不相同也落在同一条基线上、按钮一样高，
   所以选中的那条细线换到哪个名字下面都在同一个高度 */
.reels { display: flex; align-items: baseline; gap: 0 32px; }
.reel { all: unset; box-sizing: border-box; position: relative; flex: none; padding-bottom: 9px; font-size: 24px; line-height: 30px; color: var(--cream-3); cursor: pointer; transition: color .2s ease; -webkit-tap-highlight-color: transparent; }
.reel:hover { color: var(--cream-2); }
.reel.on { color: var(--cream); }
.reel:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; border-radius: 2px; }
.reel .rn { line-height: .8; white-space: nowrap; } /* 名字自己的行框比按钮的矮，不把行撑高 */
/* 选中的名字下面一条和字一样宽的 2px 细线（暗的底线 + 亮的走过的部分）；没选中的不画。自动轮换时亮的部分慢慢走满，走满就换下一个 */
.reel .trk { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; }
.reel.on .trk { background: var(--lk-dim); }
.reel .prog { position: absolute; inset: 0; background: var(--cream); transform: scaleX(0); transform-origin: 0 50%; }
.reel.on .prog { transform: none; }
.reels.run .reel.on .prog { animation: lk-prog var(--dur, 9s) linear both; }
.reels.hold .reel.on .prog { animation-play-state: paused; }
@keyframes lk-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 每个名字用它自己那种风格的字：放映厅 Instrument Sans + 黑体；书页 Newsreader + 宋体；海报 Archivo 窄粗 + 粗黑体；控制台 Plex Sans + 黑体 */
.rn-cinema .rn { font-family: 'MX Instrument Sans', var(--lk-cjk); font-weight: 600; letter-spacing: -.005em; }
.rn-paper .rn { font-family: var(--display); font-weight: 600; }
.lang-en .rn-paper .rn { font-style: italic; font-weight: 500; font-size: 26px; letter-spacing: -.005em; }
.rn-poster .rn { font-family: 'MX Archivo', var(--lk-cjk); font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: .01em; }
.rn-poster .rn:lang(zh) { font-weight: 900; -webkit-text-stroke: .02em currentColor; }
.rn-console .rn { font-family: 'MX Plex Sans', var(--lk-cjk); font-weight: 500; letter-spacing: .01em; }
.rn-console .rn:lang(zh) { font-weight: 400; letter-spacing: .08em; }
/* 中文页的四个名字都是汉字，西文字体一个字也画不了，但排在第一位就会被下载（量行高要用它）：中文页直接用中文字体，省下 Archivo、Plex 两个文件 */
.lang-zh .rn-poster .rn, .lang-zh .rn-console .rn, .lang-zh .rn-cinema .rn { font-family: var(--lk-cjk); }

/* 显示方式：双语 / 只看原文 / 只看译文（插件的说法）。一行字，和顶栏的语言切换一个样子：选中的亮、下面一条细线 */
.lk-modes { display: flex; align-items: baseline; margin: 0 -4px 0 auto; font-size: 15px; line-height: 1.3; white-space: nowrap; }
.lk-modes button { all: unset; box-sizing: border-box; position: relative; padding: 10px 4px; color: var(--cream-3); cursor: pointer; transition: color .2s ease; -webkit-tap-highlight-color: transparent; }
.lk-modes button:hover { color: var(--cream-2); }
.lk-modes button[aria-checked=true] { color: var(--cream); }
.lk-modes button[aria-checked=true]::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 5px; height: 1px; background: currentColor; }
.lk-modes button:focus-visible { outline: 2px solid var(--cream); outline-offset: 0; border-radius: 2px; }
.lk-modes .sep { font-style: normal; padding: 0 8px; color: var(--cream-3); opacity: .5; }

/* 画面窄（矮屏）：名字和显示方式收一点，英文也排得下一行 */
@container (max-width: 820px) {
  .lk-row { column-gap: 24px; }
  .reels { gap: 0 24px; }
  .reel { font-size: 22px; }
  .lang-en .rn-paper .rn { font-size: 24px; }
  .lk-modes { font-size: 14px; }
  .lk-modes .sep { padding: 0 6px; }
}
@container (max-width: 700px) {
  .lk-row, .reels { column-gap: 20px; }
  .reel { font-size: 21px; }
  .lang-en .rn-paper .rn { font-size: 23px; }
}

/* 手机：画面通栏；标题下面是显示方式，画面下面四个名字平分宽度，每个名字上面一条细线（暗的），选中的那条亮 */
@media (max-width: 760px) {
  .looks .lk-head { margin-bottom: 6px; }
  .lk-frame { width: auto; container-type: normal; display: grid; grid-template-columns: minmax(0, 1fr); }
  .lk-row { display: contents; }
  .lk-modes { order: -1; margin: 0 0 20px -4px; justify-self: start; }
  .lk-modes button { padding: 11px 4px; }
  .gate { margin: 0 calc(-1 * var(--gut)); box-shadow: none; }
  /* 名字字体不同，按基线对齐；细线不跟着名字上下动：按 .reels 定位（.reel 是 static），四根一样高、各占一栏 */
  .reels { --g: 10px; position: relative; gap: 0 var(--g); margin-top: 14px; }
  .reel { position: static; flex: 1 1 0; min-width: 0; padding: 13px 0 4px; font-size: 18px; line-height: 1.15; }
  .reel:focus-visible { outline-offset: 6px; }
  .reel .rn { display: block; line-height: inherit; }
  .reel .trk { top: 0; right: auto; bottom: auto; width: calc((100% - 3 * var(--g)) / 4); background: var(--lk-dim); transition: background-color .2s ease; }
  .reel:nth-child(2) .trk { left: calc((100% + var(--g)) / 4); }
  .reel:nth-child(3) .trk { left: calc((100% + var(--g)) / 2); }
  .reel:nth-child(4) .trk { left: calc((100% + var(--g)) * 3 / 4); }
  .reel:hover .trk { background: rgba(239, 231, 218, .3); }
  .lang-en .rn-paper .rn { font-size: 19.5px; }
}
@media (max-width: 380px) {
  .lk-modes { font-size: 14px; }
  .lk-modes .sep { padding: 0 6px; }
  .reels { --g: 8px; }
  .reel { font-size: 17px; }
  .lang-en .rn-paper .rn { font-size: 18.5px; }
}
/* 最窄的手机：英文「Bilingual / Original only / Translation only」也不出页边 */
@media (max-width: 340px) {
  .lk-modes { font-size: 13px; }
}

/* 幕寻官网 · 价格、问答、片尾。
   价格：纸上一张三栏票价表，三栏只用细线分开。进场前半暗，价格区的顶过了屏高 80% 时，0.45 秒里一次亮成纸色，像散场时灯亮了。
   问答：左边标题，右边一条条摊开，一条一道细线。片尾：「完」，压在两道细线之间的标志，最底下口号和三份政策。
   照的 Kombai 例子：价格 Halden、Feltra、Bramble；问答 Redwick、Emmer；片尾 Elowen Film Foundation、Orto。
   琥珀色只留给状态和标志；圆角 2px；字不小于 13px。
   负责：品牌组。build.mjs 按 base、hero、how、styles、pricing、pages 的顺序拼成一份 site.css。 */

/* 价格、问答共用一套三栏：问答的清单从价格表第二栏的位置开始，上下两节的字对在一条竖线上 */
.pricing, .faq { --pad: clamp(20px, 2.8vw, 40px); }

/* ---- 价格：灯亮了 -------------------------------------------------------------------------- */
.pricing { background: var(--paper); color: var(--ink); overflow: hidden; }
.pricing > .wrap { position: relative; z-index: 1; }
/* 灯还没亮：一层暗色盖在上面。--lit 由 js/page.js 设：进场前 .48（罩子约一半暗），价格区的顶过了屏高 80% 时加 .lighting、
   --lit 变成 1，罩子在 0.45 秒里退掉（先快后慢）；不跟着滚动走，亮了也不再暗回去。没有脚本、减少动态效果时 --lit 就是 1，亮的 */
.pricing .lights { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--black); opacity: calc((1 - var(--lit, 1)) * .97); }
.pricing.lighting .lights { transition: opacity .45s cubic-bezier(.22, .61, .36, 1); }
.pricing.lit, .shot .pricing { --lit: 1 !important; }

/* 标题一句，右边是货币（Feltra 把切换放在标题下，我们放在标题同一行的右下角，表格上面不再单独占一行） */
.pr-head { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.pr-head h2 { max-width: 820px; margin-top: 0; }

/* 货币：¥ · NZ$ · US$，选中的加下划线；单选组，方向键可换（js/page.js） */
.curs { flex: none; display: flex; align-items: baseline; gap: 10px; padding-bottom: 6px; font-size: 15px; }
.curs i { font-style: normal; color: var(--ink-2); }
.curs button { all: unset; cursor: pointer; min-width: 24px; text-align: center; padding: 4px 2px; border-radius: 2px; 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; }
.curs button:hover { color: var(--ink); }
.curs button[aria-checked=true] { color: var(--ink); text-decoration-color: currentColor; }
.curs button:focus-visible { outline: 2px solid var(--focus, var(--ink)); 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; }

/* 票价表：上半截是三种票的名字、价钱和一句条件，下半截是包括什么（月卡、年卡共用一段，通栏写一遍）。
   上下两条墨线收住整张表；栏与栏之间、上下两截之间是细线（Feltra）。「月卡、年卡都包括」压在中间那条线上，像表格里的栏目名 */
.fares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; margin-top: clamp(48px, 5.6vw, 80px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.fares::before { content: ''; grid-column: 1 / -1; grid-row: 2; align-self: start; border-top: 1px solid var(--line-p); }
.fare { padding: 0 var(--pad); }
.f-free { grid-column: 1; grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; padding-left: 0; }
.f-monthly { grid-column: 2; grid-row: 1; border-left: 1px solid var(--line-p); }
.f-yearly { grid-column: 3; grid-row: 1; border-left: 1px solid var(--line-p); padding-right: 0; }
.f-member { position: relative; grid-column: 2 / 4; grid-row: 2; border-left: 1px solid var(--line-p); padding-right: 0; }
.fare-top { padding: 34px 0 44px; }
.fare-top h3 { font: 700 24px/1.3 var(--display); }
.lang-en .fare-top h3 { font-weight: 600; font-size: 25px; }
/* 价钱是一栏里最大的字（Feltra）；货币符号小一号，顶着数字的上沿（Bramble），「/ 30 天」跟在数字后面、对齐底线 */
.fare-price { margin-top: 28px; font: 400 clamp(60px, 6vw, 88px)/.9 'MX Newsreader', Georgia, serif; letter-spacing: -.025em; font-variant-numeric: lining-nums; white-space: nowrap; }
.fare-price .cy { font-size: .3em; letter-spacing: .01em; vertical-align: 1.62em; margin-right: .1em; }
.fare-price small { margin-left: .3em; font: 400 16px/1 var(--sans); letter-spacing: 0; color: var(--ink-2); }
/* 价还没定时：同一格里写一句小字，占的高度和大字价格一样，三栏的上下对得齐 */
.fare-price.tbd { display: flex; align-items: flex-end; height: calc(clamp(60px, 6vw, 88px) * .9); font: 400 16px/1.3 var(--sans); letter-spacing: 0; color: var(--ink-2); white-space: normal; }
.fare-note { max-width: 24em; margin-top: 22px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
.fare-h { position: absolute; top: 0; left: var(--pad); margin-left: -10px; padding: 0 10px; transform: translateY(-50%); background: var(--paper); font-size: 14px; font-weight: 600; line-height: 1.5; }
/* 包括什么：一行一条，条与条之间一道细线（Halden） */
.fare-inc { list-style: none; margin: 0; padding: 22px 0 30px; }
.fare-inc li { padding: 12px 0; font-size: 15px; line-height: 1.6; }
.fare-inc li + li { border-top: 1px solid var(--line-p); }

/* ---- 问答 ---------------------------------------------------------------------------------- */
/* 从顶栏的「问答」跳过来时，这一节的顶停在离屏幕上沿 112px 处，和标题停住的位置一样，标题和第一条问题对齐 */
.faq { background: var(--paper); color: var(--ink); padding-top: 0; scroll-margin-top: 40px; }
/* 左边标题（往下读时停在原处），右边清单占后两栏、从价格表第二栏的位置开始（Redwick、Emmer） */
.faq .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); 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 { grid-column: 2 / 4; margin-left: var(--pad); border-bottom: 1px solid var(--line-p); }
/* 问题比答案大一截（Redwick 问题 26、答案 15），答案用浅一号的墨色。每条上下各 18、22px（第三轮挑错：原来 30、34px，1440 上整块 1049px 高，左栏下面全空） */
.qa-i { padding: 18px 0 22px; }
/* 第一条问题的字顶和左边标题的字顶对齐（量过：标题的字面在行框里偏上，标题往下垫 2～6px） */
.qa-i:first-child { padding-top: 0; }
.qa-i + .qa-i { border-top: 1px solid var(--line-p); }
.qa-i h3 { font: 600 23px/1.4 var(--display); text-wrap: balance; }
.lang-en .qa-i h3 { font-weight: 500; font-size: 25px; line-height: 1.25; letter-spacing: -.005em; }
.qa-i p { max-width: 36em; margin-top: 12px; font-size: 16px; line-height: 1.8; color: var(--ink-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; }
.cr-links i { font-style: normal; color: var(--cream-3); }
.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; }

/* 票价表在窄一点的屏幕上排成一栏（三栏放不下「NZ$9.90 / 30 days」） */
@media (max-width: 899px) {
  .fares { display: block; }
  .fares::before { display: none; }
  .fare { padding: 0; border-left: 0; }
  .f-free, .f-member { display: block; }
  .fare + .fare { border-top: 1px solid var(--line-p); }
  .fare-top { padding: 28px 0 30px; }
  .fare-inc { padding: 0 0 22px; }
  .fare-inc li { border-top: 1px solid var(--line-p); }
  .fare-h { position: static; margin: 0; padding: 26px 0 4px; transform: none; background: none; }
  /* 问答：标题在上，清单在下，清单顶上一道墨线 */
  .faq .wrap { display: block; }
  .faq .sec-head, .lang-zh .faq .sec-head { position: static; padding-top: 0; }
  .qa { margin: 36px 0 0; border-top: 1px solid var(--ink); }
  .qa-i:first-child { padding-top: 26px; }
}
@media (max-width: 760px) {
  .pr-head { display: block; }
  .curs { margin-top: 30px; }
  .fares { margin-top: 20px; }
  .fare-top h3 { font-size: 21px; }
  .fare-price { margin-top: 20px; font-size: 56px; }
  .fare-price.tbd { height: 50px; font-size: 16px; }
  .fare-note { margin-top: 16px; font-size: 14px; }
  .qa-i { padding: 24px 0 26px; }
  .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; }
}

/* 幕寻官网 · 政策页和 404。
   政策页：纸色的长文阅读页，照 Kombai 的长文例子（Cedar & Slate、Kindred Current）排：大而不粗的标题、导语放大，
   小节之间靠留白分开（不画横线），小标题比正文大一截。电脑上左边一列目录跟着读到哪一节走（读到英文那段换成英文目录）；
   手机上每段的标题、导语后面有一个可折起的目录，往下读一段以后右下角出一个回到顶部。顶栏是 base.css 的 .policy .tb（纸色）。
   404：暗房里一块亮着、但没有片子的宽银幕，右上角是插件「没找到」的状态，下面一句字幕；屏幕是屋里唯一的光，
   照亮四周一小圈和前面的地（照首页首屏的做法，也照 Kombai 的 Totem、Vireo）。
   琥珀色只留给状态和标志；圆角 2px；字不小于 13px。
   负责：品牌组。build.mjs 按 base、hero、how、styles、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%）；悬停条先出来，字幕晚一拍，像一条字幕到点出现 */
.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}
@font-face{font-family:'MX Newsreader Inline';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader.8dce80bcbe.woff2) format('woff2');unicode-range:U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF}
@font-face{font-family:'MX Archivo Inline';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo.49bac93f10.woff2) format('woff2');unicode-range:U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF}
@font-face{font-family:'MX Plex Sans Inline';font-style:normal;font-weight:500 600;font-display:swap;src:url(/assets/fonts/plex-500.79bd4bc2fa.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);--line:rgba(239,231,218,.15);--hover:rgba(239,231,218,.08);--ok:#e2a53b;--busy:#efe7da;--warn:#e0705a;--shadow:0 1px 2px rgba(0,0,0,.3);--knob:#efe7da;--radius:999px;--btn-radius:999px;--sw-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:13px;--dot:6px;--dot-radius:50%;--div-h:20px;--cap:round}
.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)}
.lk-paper{--bg:#e9e3d6;--fg:#23211d;--muted:#635d52;--border:rgba(35,33,29,.14);--line:#cfc7b6;--hover:#ddd6c7;--ok:#2f5d46;--busy:#23211d;--warn:#b5452f;--shadow:0 1px 2px rgba(0,0,0,.12);--knob:#e9e3d6;--radius:999px;--btn-radius:999px;--sw-radius:999px;--font:'MX Hanken Grotesk', '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:13px;--dot:7px;--dot-radius:50%;--div-h:20px;--cap:round}
.lk-paper .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-paper .sl.cjk{font-family:'MX Newsreader Inline','MX Display SC', 'Noto Serif CJK SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'SimSun', 'PMingLiU', serif;letter-spacing:.02em}
.lk-paper .sl.ja{font-family:'MX Newsreader Inline','Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif CJK JP','MX Display SC', 'Noto Serif CJK SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'SimSun', 'PMingLiU', serif;letter-spacing:.02em;word-break:auto-phrase}
.lk-paper .sl.ko{font-family:'MX Newsreader Inline','Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR','MX Display SC', 'Noto Serif CJK SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'SimSun', 'PMingLiU', serif;letter-spacing:0;word-break:keep-all;font-weight:600}
.lk-paper .sl.lat{font-family:'MX Newsreader', Georgia, '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;font-size:1.08em}
.lk-paper .sl.s2{font-size:max(12px,0.7em);color:#f6f1e7;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-paper .sl.s2.ko{font-weight:600}
.lk-paper .sl.s2.lat{font-size:calc(max(12px,0.7em) * 1.1448);font-style:italic}
.lk-poster{--bg:#0e0e0e;--fg:#ffffff;--muted:#8d8d88;--border:transparent;--line:#333333;--hover:#262626;--ok:#ffffff;--busy:#ffffff;--warn:#e3412b;--shadow:none;--knob:#0e0e0e;--radius:0px;--btn-radius:0px;--sw-radius:0px;--font:'MX Archivo', '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:13px;--dot:8px;--dot-radius:0;--div-h:100%;--cap:square}
.lk-poster .sl{color:#ffffff;font-weight:800;font-variant-numeric:proportional-nums;-webkit-text-stroke:.16em #0e0e0e;paint-order:stroke fill;text-shadow:none}
.lk-poster .sl.cjk{font-family:'MX Archivo Inline','MX Sans SC Heavy', '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-poster .sl.ja{font-family:'MX Archivo Inline','Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP','MX Sans SC Heavy', '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-poster .sl.ko{font-family:'MX Archivo Inline','Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR','MX Sans SC Heavy', '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:800}
.lk-poster .sl.lat{font-family:'MX Archivo', '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-spacing:.12em}
.lk-poster .sl.s2{font-size:max(12px,0.68em);color:#ffffff;font-weight:700;-webkit-text-stroke:.13em #0e0e0e;paint-order:stroke fill;text-shadow:none}
.lk-poster .sl.s2.ko{font-weight:700}
.lk-poster .sl.s2.lat{font-size:calc(max(12px,0.68em) * 1.06)}
.lk-console{--bg:#0e1b1c;--fg:#d6e4e1;--muted:#7a9490;--border:#264140;--line:#264140;--hover:#16292a;--ok:#3cc4a6;--busy:#d6e4e1;--warn:#f07a5a;--shadow:0 1px 2px rgba(0,0,0,.3);--knob:#d6e4e1;--radius:7px;--btn-radius:4px;--sw-radius:2px;--font:'MX Plex 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:13px;--dot:7px;--dot-radius:50%;--div-h:20px;--cap:round}
.lk-console .sl{color:#ffffff;font-weight:600;-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-console .sl.cjk{font-family:'MX Plex 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-console .sl.ja{font-family:'MX Plex 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-console .sl.ko{font-family:'MX Plex 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-console .sl.lat{font-family:'MX Plex 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-console .sl.s2{font-size:max(12px,0.64em);color:#e8f0ee;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-console .sl.s2.ko{font-weight:600}
.lk-console .sl.s2.lat{font-size:calc(max(12px,0.64em) * 1.06)}