/* Pocket Museum - GBA 产品页。
   版式是网页的：页头、整屏一段纵向翻页、图文左右分栏、按钮、页脚。
   长相取自应用的设计语言“展签”（docs/design-language.md 第 5、6 节）：展厅的深色、铜尺、铜牌、那束光、
   四种字体；强调色跟着台上那件展品走。不用面板、卡片、玻璃和磨砂。
   桌面版按 1440×860 的参考画面写尺寸，乘 --u 等比放大缩小，所以各种屏幕上的排法是同一个；
   窄屏和竖屏另有一套上下排的版式（见文件末尾）。 */

@font-face { font-family: "Museum Sans"; src: url("../fonts/NotoSansSC-450.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Museum Sans"; src: url("../fonts/NotoSansSC-900.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "MuseumDisplay"; src: url("../fonts/MuseumDisplay.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "MuseumPixel"; src: url("../fonts/MuseumPixel.woff2") format("woff2"); font-display: swap; }

:root {
  --night: #0b0a16;
  --ink: #fbf8ff;
  --dim: #aaa4d0;
  --copper: #dcb96a;
  --copper-hi: #f6e3ab;
  --copper-deep: #8c6a2c;
  --copper-ink: #2a1d08;
  /* 强调色跟着台上那件展品走，由脚本写进来；这里是还没读到图时的起始色。 */
  --accent: #5a4fcf;
  --accent-hi: #a8a2ee;
  /* 参考画面里的 1 像素在这块屏幕上是多大。 */
  --u: clamp(0.62px, min(100vw / 1440, 100vh / 860), 2.6px);
  --pad: calc(96 * var(--u));
  --sans: "Museum Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --pixel: "MuseumPixel", "Museum Sans", "PingFang SC", "Microsoft YaHei", monospace;
  --display: "MuseumDisplay", "Impact", "Arial Narrow", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* 一屏一段，滚一下换一段。位置看右边那列分页点，不留系统滚动条。 */
html { background: var(--night); scroll-behavior: smooth; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; color: var(--ink); font: 450 calc(18 * var(--u)) / 1.65 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, [tabindex] { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 4px; border-radius: 4px; }
.skip { position: fixed; left: 24px; top: -100px; z-index: 40; background: var(--ink); color: var(--night); padding: 8px 14px; border-radius: 4px; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- 展厅（整页的底） */

/* 高度按地址栏收起时的算（lvh）：手机上地址栏一伸一缩，这块画面不跟着重排、重画。 */
.hall { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; background: var(--night); }
/* 3D 没出来之前、和开不了 3D 的时候：一团主色的光，和后墙是同一个样子。 */
.hall-poster { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 33%, color-mix(in srgb, var(--accent) 42%, var(--night)) 0%, var(--night) 100%); }
.no-gl .hall-poster { background: var(--night) url("../img/hall-poster.webp") center / cover no-repeat; }
/* 照片只垫在首屏后面；往下各段有自己的图，后面留一片暗底。 */
.no-gl .hall-poster { transition: opacity 0.5s ease; }
.no-gl:not([data-hero]) .hall-poster { opacity: 0; }
#hall-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s ease; }
.gl-ready #hall-canvas { opacity: 1; }
.no-gl #hall-canvas { display: none; }

/* 字后面那层暗色：只压在放字的那一半上，展厅还在后面。哪一半由眼前这一段定。 */
.hall-shade { position: absolute; inset: 0; pointer-events: none; }
.hall-shade i { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.hall-shade .sky { opacity: 1; background: linear-gradient(180deg, rgb(8 7 15 / 0.72) 0%, rgb(8 7 15 / 0) 15%); }
.hall-shade .right { background: linear-gradient(90deg, rgb(8 7 15 / 0) 34%, rgb(8 7 15 / 0.74) 50%, rgb(8 7 15 / 0.88) 100%); }
.hall-shade .left { background: linear-gradient(270deg, rgb(8 7 15 / 0) 34%, rgb(8 7 15 / 0.74) 50%, rgb(8 7 15 / 0.88) 100%); }
.hall-shade .foot { background: linear-gradient(0deg, rgb(8 7 15 / 0.94) 0%, rgb(8 7 15 / 0.8) 26%, rgb(8 7 15 / 0) 50%); }
[data-shade="right"] .hall-shade .right, [data-shade="left"] .hall-shade .left, [data-shade="foot"] .hall-shade .foot { opacity: 1; }

/* ---------------------------------------------------------------- 页头和分页点 */

.top {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: calc(40 * var(--u));
  padding: calc(24 * var(--u)) var(--pad) calc(20 * var(--u)) calc(56 * var(--u));
}
.logo { font: 700 calc(30 * var(--u)) / 1 var(--display); letter-spacing: calc(1.5 * var(--u)); white-space: nowrap; }
.nav { display: flex; gap: calc(34 * var(--u)); margin-left: auto; font-size: calc(17 * var(--u)); font-weight: 500; }
.nav a { color: var(--dim); padding: calc(6 * var(--u)) 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--copper); }
.lang { display: flex; gap: calc(7 * var(--u)); color: var(--dim); white-space: nowrap; font: 400 calc(17 * var(--u)) / 1 var(--pixel); }
.lang a { color: var(--dim); }
.lang a[aria-current] { color: var(--ink); }
.lang a:hover { color: var(--accent-hi); }

/* 分页点：一根竖的铜轨，每一段一个菱形，左边写着这一屏的名字；光停在眼前这一段上（应用里“站”的画法）。 */
.pager { position: fixed; z-index: 30; right: calc(34 * var(--u)); top: 50%; transform: translateY(-50%); display: grid; gap: calc(20 * var(--u)); }
.pager::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--copper-deep); }
.pager a { position: relative; width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.pager a::before { content: ""; position: absolute; inset: 0; transform: rotate(45deg); border: 1px solid var(--copper); background: var(--night); transition: background 0.3s, box-shadow 0.3s, transform 0.3s; }
.pager a::after { content: ""; position: absolute; inset: calc(-9 * var(--u)); }
.pager a:hover::before { background: var(--copper); }
.pager a[aria-current]::before { background: #fff; border-color: #fff; box-shadow: 0 0 calc(16 * var(--u)) calc(4 * var(--u)) var(--accent-hi); transform: rotate(45deg) scale(1.2); }
/* 页脚那一个点只在一屏一页的时候有：别的版式里页脚和“更多”是同一屏。 */
html:not(.paged) .pager .tail { display: none; }
.pager span { position: absolute; right: calc(24 * var(--u)); top: 50%; transform: translateY(-50%); white-space: nowrap; font: 400 calc(14 * var(--u)) / 1 var(--pixel); color: var(--dim); opacity: 0; text-shadow: 0 0 6px var(--night), 0 0 2px var(--night); transition: opacity 0.25s, color 0.25s; }
/* 眼前这一屏的名字一直亮着。其余的：右半边是字或者空着的时候都写出来；右半边是展板、展品的时候收起来，鼠标挪到这一列上再出来。 */
[data-shade="right"] .pager span, [data-shade=""] .pager span, .pager:hover span { opacity: 0.62; }
.pager a:hover span, .pager a[aria-current] span { color: var(--ink); opacity: 1; }
/* 右边是展板的那几屏，当前这一屏的名字会压在板子的边上：垫一块底。 */
[data-shade="left"] .pager a[aria-current] span { right: calc(18 * var(--u)); padding: calc(5 * var(--u)) calc(7 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(11 10 22 / 0.8); }

/* ---------------------------------------------------------------- 各段共用的几样 */

main { position: relative; z-index: 10; }
.sec { position: relative; height: 100vh; height: 100svh; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; padding: calc(104 * var(--u)) var(--pad) calc(48 * var(--u)); }

/* 小字行：像素字，强调色调亮。 */
.eyebrow { font: 400 calc(18 * var(--u)) / 1.3 var(--pixel); color: var(--accent-hi); letter-spacing: 0.03em; }
.eyebrow .count { color: var(--dim); margin-left: 0.6em; }
h1, h2 { font-weight: 900; line-height: 1.2; letter-spacing: 0.01em; text-wrap: balance; }
h1 { font-size: calc(72 * var(--u)); margin-top: calc(10 * var(--u)); text-shadow: 0 2px 30px rgb(8 7 15 / 0.7); }
h2 { font-size: calc(56 * var(--u)); margin-top: calc(10 * var(--u)); }
/* 拉丁大字：Teko，铜色，拉开字距。 */
.latin { font: 700 calc(26 * var(--u)) / 1.1 var(--display); letter-spacing: calc(3 * var(--u)); color: var(--copper); text-transform: uppercase; margin-top: calc(8 * var(--u)); }
.lead { color: var(--dim); font-size: calc(19 * var(--u)); margin-top: calc(16 * var(--u)); }
/* 铜尺：一条铜色细线，下面每 8 像素一道短刻度，每五道一道长的。 */
.ruler {
  height: 8px; margin-top: calc(16 * var(--u)); border-top: 1px solid var(--copper);
  background:
    repeating-linear-gradient(90deg, var(--copper) 0 1px, transparent 1px 40px) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--copper) 0 1px, transparent 1px 8px) 0 0 / 100% 3.5px no-repeat;
}
/* 铜牌：小铜片上刻深色的字，上沿一道亮线、下沿一道暗线。 */
.plaque {
  display: inline-block; vertical-align: 0.16em; padding: 0 0.4em; border-radius: 0.2em;
  background: linear-gradient(180deg, var(--copper-hi) 0, var(--copper-hi) 7%, var(--copper) 8%, var(--copper) 91%, var(--copper-deep) 92%);
  color: var(--copper-ink); font: 900 0.6em / 1.5 var(--sans); letter-spacing: 0.04em;
}
/* 按钮：主要的那个是一块铜牌，次要的只有一圈细边。 */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(16 * var(--u)); margin-top: calc(26 * var(--u)); }
.button {
  display: inline-flex; align-items: center; gap: 0.6em; height: calc(52 * var(--u)); padding: 0 calc(30 * var(--u)); border-radius: calc(6 * var(--u));
  font-weight: 900; font-size: calc(18 * var(--u)); white-space: nowrap;
  border: 1px solid rgb(251 248 255 / 0.4); background: rgb(11 10 22 / 0.55);
  transition: transform 0.15s, filter 0.15s, border-color 0.15s;
}
.button:hover { transform: translateY(-2px); border-color: var(--ink); }
.button:active { transform: translateY(1px); }
.button.primary { border: 0; color: var(--copper-ink); background: linear-gradient(180deg, var(--copper-hi) 0, var(--copper-hi) 5%, var(--copper) 6%, var(--copper) 93%, var(--copper-deep) 94%); }
.button.primary::before { content: ""; border-left: 0.62em solid currentColor; border-top: 0.4em solid transparent; border-bottom: 0.4em solid transparent; }
.button.primary:hover { filter: brightness(1.08); }
.round { flex: none; display: inline-grid; place-items: center; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; border: 1px solid rgb(251 248 255 / 0.4); background: rgb(11 10 22 / 0.55); font-size: calc(18 * var(--u)); transition: transform 0.15s, border-color 0.15s; }
.round:hover { border-color: var(--ink); transform: translateY(-2px); }
.round:active { transform: translateY(1px); }

/* 进这一段时各块依次浮上来。 */
.js .sec .slide > * { opacity: 0; transform: translateY(22px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 1.2, 0.4, 1); transition-delay: calc(120ms + var(--i, 0) * 55ms); }
.js .sec.live .slide > * { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- 首屏：转盘在上，标题在下 */

.hero { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding-bottom: calc(56 * var(--u)); }
.hero-text { max-width: min(100%, calc(1200 * var(--u))); }
.hero h1 { font-size: calc(66 * var(--u)); }
.hero h1 br { display: none; }
.hero-text .ruler { width: calc(420 * var(--u)); max-width: 100%; margin-inline: auto; }
/* 左下角：台上是哪一件。右下角：换一件。 */
.hero-info { position: absolute; left: calc(56 * var(--u)); bottom: calc(52 * var(--u)); text-align: left; max-width: calc(300 * var(--u)); transition: opacity 0.25s ease; }
.hero-info.swap { opacity: 0; }
.hero-info .eyebrow { font-size: calc(15 * var(--u)); }
.hero-info .name { font-weight: 900; font-size: calc(21 * var(--u)); line-height: 1.3; margin-top: calc(2 * var(--u)); }
.hero-info .meta { color: var(--dim); font-size: calc(15 * var(--u)); }
.hero-turn { position: absolute; right: var(--pad); bottom: calc(56 * var(--u)); display: flex; gap: calc(12 * var(--u)); }

/* ---------------------------------------------------------------- 宣传片 */

.film { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(26 * var(--u)); text-align: center; }
.film h2 { font-size: calc(44 * var(--u)); }
/* 画框：一圈深色衬底加铜色细边。宽度让着高度，整幅留在一屏里。 */
.picture { position: relative; width: min(100%, calc((100vh - 300 * var(--u)) * 16 / 9)); padding: calc(8 * var(--u)); background: #06050c; border: 1px solid var(--copper); box-shadow: 0 calc(30 * var(--u)) calc(90 * var(--u)) rgb(0 0 0 / 0.6); }
.picture video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(92 * var(--u)); height: calc(92 * var(--u)); border-radius: 50%; background: linear-gradient(180deg, var(--copper-hi) 0, var(--copper) 12%, var(--copper) 88%, var(--copper-deep) 100%); box-shadow: 0 0 0 calc(10 * var(--u)) rgb(8 7 15 / 0.5); transition: transform 0.15s; }
.film-play::before { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: calc(28 * var(--u)) solid var(--copper-ink); border-top: calc(18 * var(--u)) solid transparent; border-bottom: calc(18 * var(--u)) solid transparent; }
.film-play:hover { transform: translate(-50%, -50%) scale(1.07); }
.picture.playing .film-play, .picture.missing .film-play { display: none; }
.film-missing { position: absolute; inset: calc(8 * var(--u)); display: grid; place-items: center; background: #06050c; color: var(--dim); font-family: var(--pixel); }
.film-missing[hidden] { display: none; }
/* 不单独占一屏的时候：点“看宣传片”，在当屏盖一层暗底放。 */
.cinema { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: calc(76 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)); background: rgb(6 5 12 / 0.93); }
.cinema[hidden] { display: none; }
.cinema .picture { width: min(100%, calc((100vh - 150 * var(--u)) * 16 / 9)); }
.cinema [data-cinema-close] { position: absolute; top: calc(18 * var(--u)); right: calc(24 * var(--u)); font-size: calc(24 * var(--u)); }
.cinema-open { overflow: hidden; }

/* ---------------------------------------------------------------- 图文分栏：一半是展板，一半是字 */

.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
/* 字在右半边时右边留出分页点名字的位置。 */
.split .col { grid-column: 2; max-width: calc(552 * var(--u)); padding-left: calc(24 * var(--u)); }
.split.flip .col { grid-column: 1; max-width: calc(600 * var(--u)); padding-left: 0; }
.col .ruler { max-width: calc(520 * var(--u)); }
/* 开不了 3D 时，展板上的那张画面当一张图摆在另一半。 */
.still { display: none; }
.no-gl .still { display: block; grid-row: 1; grid-column: 1; justify-self: center; width: min(88%, calc(620 * var(--u))); border: 1px solid var(--accent-hi); border-radius: calc(12 * var(--u)); overflow: hidden; box-shadow: 0 calc(24 * var(--u)) calc(70 * var(--u)) rgb(0 0 0 / 0.55); }
.no-gl .flip .still { grid-column: 2; }
.still img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #06050c; }
/* 功能几条，一行一条。光停在哪一条上，另一半的展板就放哪一条的画面。plain 的只是几行字，不带画面。 */
.features { display: grid; gap: calc(4 * var(--u)); margin-top: calc(24 * var(--u)); max-width: calc(540 * var(--u)); }
.feature { position: relative; padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)) calc(18 * var(--u)); cursor: pointer; outline-offset: 0; font-weight: 700; font-size: calc(18.5 * var(--u)); line-height: 1.45; color: color-mix(in srgb, var(--ink) 78%, var(--dim)); transition: color 0.3s; }
.feature::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(3 * var(--u)); border-radius: 2px; background: rgb(220 185 106 / 0.35); transition: background 0.3s, box-shadow 0.3s; }
/* 那束光：强调色的横向光晕，左端一根亮竖条。 */
.feature::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.35s ease; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 46%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) 55%, transparent 96%); }
.feature.on { color: var(--ink); }
.feature.on::before { background: color-mix(in srgb, var(--accent-hi) 55%, #fff); box-shadow: 0 0 calc(14 * var(--u)) var(--accent-hi); }
.feature.on::after { opacity: 1; }
.features.plain .feature { cursor: default; color: var(--ink); }
.features.plain .feature::before { background: rgb(220 185 106 / 0.7); }

/* 盒子那一屏：台上站着一件展品，横着拖能转；字下面写着是哪一件，两个键换一款。 */
[data-mode="wheel"] { touch-action: pan-y; cursor: grab; }
[data-mode="wheel"].dragging { cursor: grabbing; }
.onshow { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(26 * var(--u)); }
.onshow[hidden] { display: none; }
/* 没有 3D 的时候台上没有展品可换：是哪一件、换一件的键都不出。 */
.no-gl :is(.onshow, .hero-info, .hero-turn) { display: none; }
.onshow p { display: grid; gap: calc(2 * var(--u)); min-width: calc(190 * var(--u)); transition: opacity 0.25s ease; }
.onshow.swap p { opacity: 0; }
.onshow .eyebrow { font-size: calc(14 * var(--u)); }
.onshow strong { font-weight: 900; font-size: calc(18 * var(--u)); line-height: 1.3; }

/* ---------------------------------------------------------------- 回溯的演示：一块画面，底下压着时间轴 */

.rewind { grid-row: 1; grid-column: 1; justify-self: center; width: min(96%, calc(660 * var(--u))); }
.rewind-screen { position: relative; container-type: inline-size; border: 1px solid var(--accent-hi); border-radius: calc(12 * var(--u)); overflow: hidden; background: #06050c; box-shadow: 0 calc(24 * var(--u)) calc(70 * var(--u)) rgb(0 0 0 / 0.55); }
.rewind-screen video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* 和软件里一样：画面不压暗，只有底下一条往下渐深的暗色，尺和字压在上面。字的大小跟着画面的宽度走（1cqw 是画面宽的百分之一）。 */
.rewind-hud { position: absolute; left: 0; right: 0; bottom: 0; padding: 9cqw 3.4cqw 2.6cqw; background: linear-gradient(180deg, rgb(8 7 15 / 0) 0, rgb(8 7 15 / 0.76) 32%, rgb(8 7 15 / 0.93) 100%); font-size: clamp(11px, 2.3cqw, 21px); line-height: 1.3; transition: opacity 0.3s ease; }
.rewind.running .rewind-hud { opacity: 0; pointer-events: none; }
.rewind-head { display: flex; align-items: center; gap: 0.7em; }
.rewind-head strong { font-weight: 900; font-size: 1.55em; line-height: 1; }
.rewind-head .plaque { font-size: 0.7em; vertical-align: 0; }
.rewind-left { margin-left: auto; color: var(--dim); font-size: 0.9em; }
.rewind-track { position: relative; margin-top: 1.5em; padding: 2.1em 0 0.1em; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: 0.3em; }
/* 读数跟着光走。 */
.rewind-ago { position: absolute; top: 0; left: clamp(3.4em, calc((1 - var(--at, 0)) * 100%), calc(100% - 3.4em)); transform: translateX(-50%); white-space: nowrap; font-weight: 900; font-size: 1.1em; line-height: 1.3; }
/* 铜尺：整条是 30 秒，每秒一道短刻度，每 5 秒一道长的。没留着的那一段是淡的。 */
.rewind-rule {
  position: relative; height: 0.62em; border-top: 1px solid rgb(220 185 106 / 0.3); border-right: 1px solid rgb(220 185 106 / 0.6);
  background:
    repeating-linear-gradient(90deg, rgb(220 185 106 / 0.6) 0 1px, transparent 1px calc(100% / 6)) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(220 185 106 / 0.42) 0 1px, transparent 1px calc(100% / 30)) 0 0 / 100% 55% no-repeat;
}
.rewind-rule i { position: absolute; }
/* 光左边是确认后还留得住的历史，亮的；光右边是确认后会丢掉的那一段，铜色。 */
.rewind-rule .kept { left: calc((1 - var(--kept, 0.6)) * 100%); right: calc(var(--at, 0) * 100%); top: -2px; height: 2px; background: var(--ink); }
.rewind-rule .ahead { left: calc((1 - var(--at, 0)) * 100%); right: 0; top: -2px; height: 2px; background: var(--copper); }
.rewind-rule .oldest { left: calc((1 - var(--kept, 0.6)) * 100%); top: -1.3em; width: 1px; height: 1.9em; background: var(--copper); }
.rewind-rule .oldest span { position: absolute; left: 0.4em; top: -0.2em; color: var(--copper); font-size: 0.74em; white-space: nowrap; transition: opacity 0.15s; }
.rewind.by-oldest .oldest span { opacity: 0; }
.rewind-rule .light { left: calc((1 - var(--at, 0)) * 100%); top: -0.8em; width: 0.24em; height: 1.6em; margin-left: -0.12em; border-radius: 0.12em; background: #fff; box-shadow: 0 0 0.9em 0.28em var(--accent-hi); }
.rewind-marks { display: flex; justify-content: space-between; margin-top: 0.3em; color: var(--dim); font: 400 0.76em / 1.2 var(--pixel); }
.rewind-marks span { display: flex; justify-content: center; width: 0; white-space: nowrap; }
.rewind-marks span:first-child { justify-content: flex-start; }
.rewind-marks span:last-child { justify-content: flex-end; }
/* 软件里是屏幕下面的一行按键提示；这儿做成能点的键。挪光的四个一组、定下来的两个一组，一行放不下时整组换行。 */
.rewind-keys, .rewind-keys span { display: flex; justify-content: center; gap: calc(10 * var(--u)); }
.rewind-keys { flex-wrap: wrap; margin-top: calc(16 * var(--u)); }
.key { height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(6 * var(--u)); border: 1px solid rgb(251 248 255 / 0.35); background: rgb(11 10 22 / 0.55); font-weight: 700; font-size: calc(15.5 * var(--u)); white-space: nowrap; transition: transform 0.15s, border-color 0.15s, opacity 0.2s, filter 0.15s; }
.key:hover { border-color: var(--ink); transform: translateY(-1px); }
.key:active { transform: translateY(1px); }
.key.step { padding: 0 calc(14 * var(--u)); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.key.primary { border: 0; color: var(--copper-ink); background: linear-gradient(180deg, var(--copper-hi) 0, var(--copper-hi) 5%, var(--copper) 6%, var(--copper) 93%, var(--copper-deep) 94%); }
.key.primary:hover { filter: brightness(1.08); }
/* 还停在按下回溯的那一刻：没有可继续、可取消的。 */
.rewind.at-entry :is([data-rewind-resume], [data-rewind-cancel]) { opacity: 0.4; }
.rewind-hint { margin-top: calc(10 * var(--u)); text-align: center; color: var(--accent-hi); font: 400 calc(16 * var(--u)) / 1.4 var(--pixel); transition: opacity 0.4s ease; }
.rewind.touched .rewind-hint { opacity: 0.5; }

/* ---------------------------------------------------------------- 最后一屏：片名、社区、页脚 */

.end { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); text-align: center; padding-top: calc(124 * var(--u)); }
.end-text { width: 100%; max-width: calc(1140 * var(--u)); }
/* 片名、社区、页脚外面那一层只在手机上起作用（那儿它是单独一页）。 */
.end-foot { display: contents; }
.end-text h2 { font-size: calc(50 * var(--u)); }
.end-text .ruler { width: calc(420 * var(--u)); max-width: 80vw; margin-inline: auto; }
/* 其余的卖点：一条一格，顶上一道铜线挂一个菱形。 */
.extras { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(34 * var(--u)) calc(30 * var(--u)); margin-top: calc(42 * var(--u)); text-align: left; }
.extras li { position: relative; display: grid; align-content: start; gap: calc(4 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid rgb(220 185 106 / 0.45); }
.extras li::before { content: ""; position: absolute; left: 0; top: calc(-5 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); transform: rotate(45deg); background: var(--copper); }
.extras strong { font-weight: 900; font-size: calc(21 * var(--u)); line-height: 1.35; }
.extras span { color: var(--dim); font-size: calc(16 * var(--u)); line-height: 1.6; }
.brand { font: 700 calc(54 * var(--u)) / 1 var(--display); letter-spacing: calc(3 * var(--u)); }
.tagline { color: var(--dim); font-size: calc(18 * var(--u)); margin-top: calc(6 * var(--u)); }
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(22 * var(--u)) calc(56 * var(--u)); margin-top: calc(20 * var(--u)); }
.slot > * { display: grid; justify-items: center; gap: calc(4 * var(--u)); }
.slot strong { font-weight: 900; font-size: calc(17 * var(--u)); margin-top: calc(8 * var(--u)); }
.slot small { color: var(--dim); font-size: calc(14 * var(--u)); }
.qr { display: grid; place-items: center; width: calc(168 * var(--u)); height: calc(168 * var(--u)); padding: calc(8 * var(--u)); background: #fff; border-radius: calc(6 * var(--u)); }
.qr img { width: 100%; height: 100%; object-fit: contain; }
/* 还没放图的位置：虚线框，和应用里空档位的画法一样。 */
.qr.empty { background: rgb(11 10 22 / 0.5); border: 1px dashed var(--copper); color: var(--dim); font: 400 calc(15 * var(--u)) / 1.4 var(--pixel); }
.slot a:hover .qr { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; width: 100%; color: var(--dim); font-size: calc(14 * var(--u)); padding-top: calc(14 * var(--u)); border-top: 1px solid rgb(220 185 106 / 0.25); }
footer a:hover { color: var(--ink); }
/* 署名：占满一行的小字。 */
footer .credit { flex-basis: 100%; font-size: calc(12.5 * var(--u)); line-height: 1.6; opacity: 0.82; text-align: left; }
footer .credit a { text-decoration: underline; text-underline-offset: 2px; }
.nogl-note { position: fixed; z-index: 30; left: 24px; bottom: 10px; color: var(--dim); font: 400 12px / 1.4 var(--pixel); }
/* 这句话只在首屏说一次，往下不跟着，免得压在页脚上。 */
html:not([data-hero]) .nogl-note { display: none; }

/* ---------------------------------------------------------------- 窄屏、竖屏和矮屏（手机） */

/* 这一段是手机上共用的底子，也是没有脚本时的样子：展厅固定在屏幕上，字一段段从下面滑上来，自由滚动。
   竖着拿的手机在这上面再叠一层“一屏一页”（下面 .paged 那一段，main.js 打的记号）；横着拿的见再下面一段。
   这里的三个条件和 main.js 里的 loose 是同一个。 */
@media (max-width: 960px), (max-aspect-ratio: 11 / 10), (max-height: 520px) {
  :root {
    --u: 1px; --pad: 22px;
    /* 横屏时刘海在左右，竖屏时手势条在底下：各边至少让出安全区。 */
    --pad-l: max(var(--pad), env(safe-area-inset-left, 0px)); --pad-r: max(var(--pad), env(safe-area-inset-right, 0px));
    --safe-b: env(safe-area-inset-bottom, 0px);
  }
  /* 不吸附：每一段可能比一屏高，吸附会把手指划过去的距离又拽回来。 */
  html { scroll-snap-type: none; }
  body { font-size: 16px; }
  /* 字会从页头底下滚过去，页头自己垫一层暗色。 */
  .top { padding: max(8px, env(safe-area-inset-top, 0px)) calc(var(--pad-r) - 12px) 18px var(--pad-l); gap: 2px; background: linear-gradient(180deg, rgb(8 7 15) 0, rgb(8 7 15 / 0.97) 66%, rgb(8 7 15 / 0) 100%); }
  /* 页头只留软件名和语言切换；各屏的入口是右边那一列分页点。 */
  .logo { display: flex; align-items: center; gap: 0.3em; min-height: 44px; font-size: clamp(17px, 5.6vw, 24px); }
  .nav { display: none; }
  .lang { flex: none; margin-left: auto; font-size: 16px; gap: 0; align-items: center; }
  .lang a { display: grid; place-items: center; min-width: 44px; height: 44px; }
  .lang span { display: none; }
  /* 分页点：贴在右边留白里的一列小菱形，不带名字。每个点能点的范围是 22×26，正好在留白里，不压到内容。 */
  .pager { right: env(safe-area-inset-right, 0px); gap: 0; }
  .pager a { width: 22px; height: 26px; }
  .pager a::before { inset: 9.5px 7.5px; }
  .pager a::after { display: none; }
  /* 回溯画面上最小的几样字（已暂停、最早、刻度）在手机上放大一号。 */
  .rewind-head .plaque, .rewind-rule .oldest span, .rewind-marks { font-size: 0.84em; }
  .pager span { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
  .sec { height: auto; min-height: 100vh; min-height: 100svh; padding: 76px var(--pad-r) 30px var(--pad-l); scroll-snap-align: none; }
  .eyebrow { font-size: 15px; }
  h1 { font-size: clamp(32px, 9.6vw, 56px); }
  h2 { font-size: clamp(28px, 8.2vw, 48px); }
  .latin { font-size: 21px; letter-spacing: 2px; }
  .lead { font-size: 15.5px; margin-top: 12px; }
  .ruler { margin-top: 12px; }
  .hero { padding-bottom: calc(34px + var(--safe-b)); }
  .hero h1 br { display: inline; }
  .hero .eyebrow { font-size: clamp(12px, 3.7vw, 15px); }
  /* 屏幕矮的时候字会顶到展品上：字后面自己垫一层暗色，垫过字的顶再淡出去。 */
  .hero-text { position: relative; isolation: isolate; }
  .hero-text::before { content: ""; position: absolute; z-index: -1; inset: -84px calc(-1 * var(--pad-r)) calc(-40px - var(--safe-b)) calc(-1 * var(--pad-l)); background: linear-gradient(0deg, rgb(8 7 15 / 0.88) 0, rgb(8 7 15 / 0.84) calc(100% - 84px), rgb(8 7 15 / 0) 100%); }
  .hero-info, .hero-turn { display: none; }
  .actions { margin-top: 20px; gap: 12px; }
  .button { height: 48px; padding: 0 22px; font-size: 16px; }
  .film { gap: 20px; }
  .film h2 { font-size: clamp(24px, 6.4vw, 40px); }
  .picture { width: 100%; padding: 5px; }
  .film-play { width: 68px; height: 68px; }
  .film-play::before { border-left-width: 21px; border-top-width: 13px; border-bottom-width: 13px; }
  .cinema { padding: 64px 10px calc(24px + var(--safe-b)); }
  .cinema [data-cinema-close] { top: max(10px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
  .hero h1 { font-size: clamp(32px, 9.6vw, 56px); }
  /* 英文的首页标题一行字数多，小一档才排得成两行。 */
  :lang(en) .hero h1 { font-size: clamp(24px, 8.2vw, 46px); }
  .split { display: flex; flex-direction: column; justify-content: flex-end; }
  .split .col, .split.flip .col { position: relative; isolation: isolate; max-width: 560px; padding: 40svh 0 0; margin-inline: auto; width: 100%; }
  /* 字后面那张深色的纸：横向铺满屏幕，从字的上方一点开始，一直垫到这一段的底。滑上去以后盖住固定在屏幕上的展板。 */
  .split .col::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%); top: calc(40svh - 48px); bottom: -30px; background: linear-gradient(180deg, rgb(8 7 15 / 0) 0, rgb(8 7 15 / 0.9) 48px, rgb(8 7 15 / 0.95) 100%); }
  /* 回溯那一屏上半屏放的是演示，不是展板，字不用再往下让，也不用垫。 */
  .split.demo { justify-content: center; gap: 18px; }
  .split.demo .col { padding-top: 0; order: 2; }
  .split.demo .col::before, .no-gl .split .col::before { display: none; }
  .rewind { order: 1; width: 100%; max-width: 560px; margin: 0 auto; }
  .key { height: 44px; padding: 0 10px; font-size: clamp(12.5px, 3.9vw, 14px); }
  .key.step { width: 44px; padding: 0; }
  .rewind-keys, .rewind-keys span { gap: 6px; }
  .rewind-keys { margin-top: 12px; }
  /* 时间轴跟着演示画面缩，画面窄的时候它不到 44 高：能按、能拖的范围往上补足。 */
  .rewind-track::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; }
  .onshow p { flex: 0 1 190px; min-width: 0; }
  /* 英文的“Where you were”比“进入时”长，窄屏上会压到 -5 那个刻度字，让给它。 */
  :lang(en) .rewind-marks span:nth-last-child(2) { visibility: hidden; }
  .rewind-hint { font-size: 14.5px; margin-top: 8px; }
  .onshow { margin-top: 16px; }
  .no-gl .split .col { padding-top: 22px; }
  .no-gl .still { order: -1; width: 100%; max-width: 560px; margin: auto auto 0; }
  .features { gap: 2px; margin-top: 14px; max-width: none; }
  .feature { display: flex; align-items: center; min-height: 44px; padding: 7px 10px 7px 16px; font-size: 16px; }
  .hall-shade .right, .hall-shade .left { background: linear-gradient(180deg, rgb(8 7 15 / 0) 26%, rgb(8 7 15 / 0.76) 42%, rgb(8 7 15 / 0.9) 100%); }
  .hall-shade .foot { background: linear-gradient(0deg, rgb(8 7 15 / 0.94) 0%, rgb(8 7 15 / 0.82) 34%, rgb(8 7 15 / 0) 56%); }
  .end { padding-top: 88px; padding-bottom: calc(26px + var(--safe-b)); gap: 22px; }
  .end-text h2 { font-size: clamp(24px, 7vw, 36px); }
  .extras { grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 22px; }
  .extras li { padding-top: 12px; }
  .extras strong { font-size: 16.5px; }
  .extras span { font-size: 13.5px; }
  .brand { font-size: clamp(30px, 9vw, 48px); letter-spacing: 2px; }
  .tagline { font-size: 15px; }
  .qr { width: 132px; height: 132px; }
  .slots { gap: 18px 26px; }
  footer { justify-content: center; text-align: center; font-size: 13px; }
  footer > a { display: inline-grid; place-items: center; min-height: 44px; padding: 0 10px; }
  footer .credit { font-size: 11.5px; text-align: center; }
}

/* ---------------------------------------------------------------- 矮而宽的屏（横过来的手机）：左右分栏，自由滚动 */

/* 一屏放不下一整段，所以不锁一屏一段；展板或展品在一半、字在另一半，字比屏幕高就接着往下滚。
   这个条件和 main.js 里的 flat 是同一个。 */
@media (max-height: 520px) and (min-aspect-ratio: 13 / 10) {
  .sec { padding-top: 62px; padding-bottom: 22px; }
  h1, h2, .hero h1, :lang(en) .hero h1 { font-size: clamp(24px, 4.3vw, 38px); }
  .hero { justify-content: center; align-items: flex-end; text-align: left; padding-bottom: 22px; }
  .hero h1 br { display: none; }
  .hero-text { width: 50%; padding-left: 16px; }
  .hero-text::before { display: none; }
  .hero-text .ruler { margin-inline: 0; }
  .actions { justify-content: flex-start; margin-top: 14px; }
  .split { display: grid; }
  .split .col, .split.flip .col { max-width: none; width: auto; margin: 0; padding: 0 0 0 16px; }
  .split.flip .col { padding: 0 16px 0 0; }
  .split .col::before { display: none; }
  .split.demo { gap: 0; }
  .split.demo .col { order: 0; }
  .rewind { order: 0; width: min(96%, 340px); }
  .no-gl .still { order: 0; width: min(88%, 360px); margin: 0; }
  .no-gl .split .col { padding-top: 0; }
  .hall-shade .right { background: linear-gradient(90deg, rgb(8 7 15 / 0) 34%, rgb(8 7 15 / 0.74) 50%, rgb(8 7 15 / 0.88) 100%); }
  .hall-shade .left { background: linear-gradient(270deg, rgb(8 7 15 / 0) 34%, rgb(8 7 15 / 0.74) 50%, rgb(8 7 15 / 0.88) 100%); }
  .end { padding-top: 70px; }
  .extras { grid-template-columns: repeat(4, 1fr); }
}

/* 最窄的屏（320 宽）上回溯那排键再收一点，英文的“Jump 5 s”才排得下。 */
@media (max-width: 340px) {
  .key { height: 40px; padding: 0 6px; font-size: 12px; }
  .key.step { width: 40px; }
  .rewind-keys, .rewind-keys span { gap: 4px; }
}

/* ---------------------------------------------------------------- 手机竖着拿：一屏一页 */

/* main.js 在上下排的版式里给 <html> 打上 paged，并且自己接管翻页：手指上下一划就翻到相邻那一页。
   每一页正好是看得见的那一块高（main.js 量了写进 --page-h，不认 dvh 的旧浏览器也对），展台和字都在这一页里放完；页面自己不滚。
   没有脚本、或者脚本出了错，这个记号不在，页面退回上面那一段的自由滚动。 */
html.paged { overflow: hidden; overscroll-behavior: none; touch-action: pan-x pinch-zoom; scroll-behavior: auto; }
/* 两指放大了看的时候，上下滑还给浏览器（挪画面用）。 */
html.paged.zoomed { touch-action: auto; }
.paged .sec, .paged .pane { height: 100vh; height: 100dvh; height: var(--page-h, 100dvh); min-height: 0; overflow: hidden; padding: calc(60px + env(safe-area-inset-top, 0px)) var(--pad-r) calc(16px + var(--safe-b)) var(--pad-l); }
/* 字一律靠这一页的底，上面剩下的地方是展台的（main.js 量了告诉 hall.js）。 */
.paged .hero, .paged .split { display: flex; flex-direction: column; justify-content: flex-end; }
/* 这一页的字实在放不下时，main.js 把 --fit 调到 1 以下，这一页的字跟着收小一点。 */
.paged .eyebrow { font-size: calc(13.5px * var(--fit, 1)); }
.paged h1, .paged .hero h1 { font-size: calc(clamp(27px, 8.8vw, 50px) * var(--fit, 1)); margin-top: 6px; }
.paged h2 { font-size: calc(clamp(24px, 7.4vw, 44px) * var(--fit, 1)); margin-top: 6px; }
/* 英文的标题一行字数多：字号小一档，首屏和各屏的标题都落在两行里。 */
.paged:lang(en) h1, .paged:lang(en) .hero h1 { font-size: calc(clamp(24px, 8.2vw, 46px) * var(--fit, 1)); }
.paged:lang(en) h2 { font-size: calc(clamp(19px, 6.1vw, 36px) * var(--fit, 1)); }
.paged .latin { font-size: calc(16px * var(--fit, 1)); letter-spacing: 2px; margin-top: 4px; }
.paged .ruler { margin-top: 9px; }
.paged .lead { font-size: calc(14.5px * var(--fit, 1)); line-height: 1.5; margin-top: 9px; }
.paged .features { margin-top: 9px; gap: 1px; }
.paged .feature { min-height: 44px; padding: 4px 10px 4px 14px; font-size: calc(14.5px * var(--fit, 1)); line-height: 1.32; }
.paged .feature:not([tabindex]) { min-height: 0; padding-block: 6px; }
.paged .actions { margin-top: 14px; }
.paged .button { height: 46px; }
/* 这一页放不下时 main.js 先把它排紧（见 fit）：拉丁大字不放（后墙上还有），间距收一点。 */
.paged .tight .latin { display: none; }
.paged .tight :is(.ruler, .lead, .features) { margin-top: 7px; }
.paged .tight .lead { line-height: 1.42; }
.paged .tight .feature[tabindex] { min-height: 40px; padding-block: 3px; }
.paged .tight .actions { margin-top: 10px; }
.paged .tight .onshow { margin-top: 6px; }
.paged .tight .extras { gap: 9px 14px; margin-top: 12px; }
.paged .tight .extras li { padding-top: 8px; }
.paged .tight.demo { gap: 8px; }
.paged .tight .key { height: 40px; }
.paged .tight .key.step { width: 40px; }
.paged .tight .rewind-keys { margin-top: 8px; }
.paged .tight .rewind-hint { margin-top: 4px; }
.paged .hero { padding-bottom: calc(20px + var(--safe-b)); }
.paged .hero-text::before { inset: -44px calc(-1 * var(--pad-r)) calc(-20px - var(--safe-b)) calc(-1 * var(--pad-l)); background: linear-gradient(0deg, rgb(8 7 15 / 0.9) 0, rgb(8 7 15 / 0.86) calc(100% - 44px), rgb(8 7 15 / 0) 100%); }
.paged .split .col, .paged .split.flip .col { padding: 0; }
.paged .split .col::before { top: -44px; bottom: calc(-16px - var(--safe-b)); background: linear-gradient(180deg, rgb(8 7 15 / 0) 0, rgb(8 7 15 / 0.9) 44px, rgb(8 7 15 / 0.95) 100%); }
.paged .onshow { margin-top: 10px; }
/* 每页的字后面各有各的衬底，整屏那几层压暗就不用了。 */
.paged .hall-shade :is(.right, .left, .foot) { opacity: 0; }
/* 回溯那一页：演示在上，字在下；演示画面的宽由 main.js 按这一页剩下的高度定（--demo-w），键和提示不跟着变窄。 */
.paged .split.demo { justify-content: center; gap: 12px; }
/* 这一页上半页是能动手的演示，字这边收紧：不放拉丁大字，中文标题排成一行。 */
.paged .demo .latin { display: none; }
.paged[data-lang="zh"] .demo h2 br { display: none; }
.paged .demo .feature { padding-block: 4px; }
.paged .rewind { width: 100%; max-width: 560px; }
.paged .rewind-screen { width: min(100%, var(--demo-w, 100%)); margin-inline: auto; }
.paged .rewind-keys { margin-top: 10px; }
.paged .rewind-hint { font-size: 13.5px; margin-top: 6px; }
/* 没有 3D 时，展板上的画面是页面里的一张图：它占字上面剩下的地方，按原来的宽高比缩进去。 */
.paged.no-gl .split .col { padding-top: 12px; }
/* 首屏左下角那句“开不了 3D”的说明，给它让一行。 */
.paged.no-gl .hero { padding-bottom: calc(36px + var(--safe-b)); }
.paged.no-gl .still { flex: 1 1 0; min-height: 0; width: 100%; margin: 0 auto; display: grid; place-items: center; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.paged.no-gl .still img { width: auto; height: auto; max-width: 100%; max-height: 100%; border: 1px solid var(--accent-hi); border-radius: 10px; }
/* 最后一屏是两页：八条卖点一页，片名、社区、页脚一页。 */
.paged .end { display: block; height: auto; padding: 0; overflow: visible; }
.paged .end-text { max-width: none; display: flex; flex-direction: column; justify-content: center; }
.paged .end-text h2 { font-size: calc(clamp(22px, 6.6vw, 36px) * var(--fit, 1)); }
.paged .extras { gap: 12px 16px; margin-top: 16px; }
.paged .extras li { padding-top: 10px; gap: 2px; }
.paged .extras strong { font-size: calc(15.5px * var(--fit, 1)); line-height: 1.3; }
.paged .extras span { font-size: calc(13px * var(--fit, 1)); line-height: 1.5; }
.paged .end-foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center; }

/* ---------------------------------------------------------------- 减少动效 */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .sec .slide > * { opacity: 1; transform: none; }
}