/* =====================================================================
   走进名画 · Walk into Paintings —— 共用样式（所有页面都引用这一份）
   格调：像一座安静的美术馆。留白多、字少、让画说话。
   浅色 = 暖白纸色；深色 = “夜间展厅”的深灰。颜色留给画作。
   ===================================================================== */

/* 中文衬线的后备：设备里没有宋体时（比如 iPhone、iPad、安卓）才下载。
   只包含网站用到的汉字（约 1750 个，330KB），用 tools/zh_font_build.py 从 Noto Serif SC（SIL OFL 授权，见 assets/fonts/）生成；
   加了新文字后重新生成一次，没包含的字会自动用系统字体显示 */
@font-face { font-family: "WIP Serif SC"; src: url("fonts/zh-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+2014, U+2018-201D, U+2026, U+00B7, U+2E80-2FFF, U+3000-303F, U+3400-9FFF, U+F900-FAFF, U+FF00-FFEF; }

:root {
  --paper:   #f5f0e6;   /* 暖白纸色 */
  --paper-2: #ebe4d6;
  --ink:     #22201c;
  --muted:   #6f685c;
  --line:    #d6cdbb;
  --veil:    rgba(245, 240, 230, .9);   /* 3D 画面上的面板底色 */
  --accent:  #8a6a2c;   /* 默认点缀色；每个系列的主色写在 data/scenes.json 的 collections → color */
  --accent-ink: #ffffff;
  --zh-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "WIP Serif SC", serif;   /* 中文衬线：先用系统里的宋体；没有宋体的设备才下载精简版 WIP Serif SC（不下载完整的中文网页字体） */
  --serif: 'Cormorant Garamond', "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "WIP Serif SC", Georgia, 'Times New Roman', serif;   /* 标题：英文 Cormorant，中文用系统宋体 */
  --zh-text: 'EB Garamond', "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "WIP Serif SC", serif;   /* 中文正文：中文用系统宋体，里面的英文字母、数字用和英文正文一样的 EB Garamond */
  --text-serif: 'EB Garamond', 'Source Serif 4', Georgia, 'Times New Roman', serif;   /* 英文正文（故事、卡片）：比 Cormorant 粗一点，小字也好读 */
  --ink-en:  #5a5449;   /* 英文正文：比中文浅一点，和背景的对比度 6.6:1（WCAG AA 要求至少 4.5:1） */
  --sans:  'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;   /* 谷歌字体打不开时，用系统里的苹方、微软雅黑 */
  --slow: .9s;
  color-scheme: light;
}
/* 深色模式：跟随系统，除非手动选了浅色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1c1c1e; --paper-2: #26262a; --ink: #ebe5d9; --muted: #9b958a; --line: #36363b; --ink-en: #b4ada1;
    --veil: rgba(28, 28, 30, .88); --accent: #c9a24a; --accent-ink: #1c1c1e; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1c1c1e; --paper-2: #26262a; --ink: #ebe5d9; --muted: #9b958a; --line: #36363b; --ink-en: #b4ada1;
  --veil: rgba(28, 28, 30, .88); --accent: #c9a24a; --accent-ink: #1c1c1e; color-scheme: dark;
}

/* 系列点缀色：阿尔勒用梵高的黄，代尔夫特用维米尔的蓝 */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 400; line-height: 1.65; }
a { color: inherit; }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: .01em; }
img { max-width: 100%; }
.hidden { display: none !important; }

/* ---------- 中英切换：双语 = 都显示；中文 = 隐藏英文；EN = 隐藏中文 ---------- */
body.lang-zh .en, body.lang-zh .en-title { display: none !important; }
body.lang-en .zh { display: none !important; }
body:not(.lang-en) .en-ui { display: none !important; }
body:not(.lang-both) .en-sub { display: none !important; }   /* 只在双语时出现的英文小字 */
.credit-line { display: block; }
/* 标题、卡片名：双语时英文换行显示，更小、更淡 */
:is(h1, h3, .card .name, .series .name, .ways .name, .group h3) .sep { display: none; }
body.lang-both h1 small.sub > .en { display: block; }   /* 系列页副标题：英文换行 */
body.lang-both :is(h1, .card .name, .series .name, .ways .name, .group h3, .group h3 > a) > .en { display: block; font-size: .62em; color: var(--muted); font-style: italic; margin-top: 2px; }

/* ---------- 按钮：线条细、数量少、用文字 ---------- */
.btn {
  display: inline-block; font: inherit; font-size: 14px; line-height: 1.3; cursor: pointer; text-decoration: none;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink);
  transition: border-color .3s, background .3s;
}
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { font: inherit; font-size: 12px; padding: 5px 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--paper); }

/* ---------- 网站页面（首页、系列页、浏览页、关于） ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
.brand { font-family: var(--serif); font-size: 20px; text-decoration: none; letter-spacing: .02em; }
.brand small { font-size: 14px; color: var(--muted); font-style: italic; margin-left: 6px; }
.site-nav { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 13px; }
.site-nav a { text-decoration: none; color: var(--muted); }
.site-nav a:hover, .site-nav a.on { color: var(--ink); }
.prefs { display: flex; gap: 8px; flex-wrap: wrap; }

.section { padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--line); }
.section h2 { font-size: 30px; margin: 0 0 6px; }
.section h2 small, h1 small.sub { display: block; font-size: 15px; color: var(--muted); font-family: var(--sans); font-style: normal; letter-spacing: 0; }
.lead { color: var(--muted); max-width: 640px; margin: 0 0 28px; }
.page-title { padding-top: 40px; padding-bottom: 8px; }
.page-title h1 { font-size: 44px; margin: 0; line-height: 1.15; }
.soon { color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.about p { max-width: 680px; }
.about-hero { text-align: center; padding: 120px 16px 72px; }
.about-hero h1 { font-size: 48px; line-height: 1.25; margin: 0; font-weight: 400; }
.about-hero h1 span { display: block; }
body.lang-both .about-hero h1 .en { font-size: .6em; margin-top: 14px; color: var(--muted); font-style: italic; }
.about { max-width: 680px; padding-bottom: 72px; }
.about h2 { margin: 64px 0 16px; font-size: 22px; }
.about h2 span { display: block; }
body.lang-both .about h2 .en { font-size: 15px; color: var(--muted); font-family: var(--sans); font-weight: 400; margin-top: 2px; }
.about .about-credit { margin-top: 64px; }
.about-pic { margin: 56px auto 0; max-width: 520px; }
.about-pic img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.about-pic figcaption { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.about-pic figcaption span, .about-steps .step span, .about-links a span { display: block; }
.about-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; margin-top: 8px; }
.about-steps p { margin: 0; }
.about-steps .step-word { font-family: var(--serif); font-size: 22px; color: var(--ink); }
body.lang-both .about-steps .step-word .en { font-size: 15px; color: var(--muted); font-family: var(--sans); }
.about-steps .step-text { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.55; }
body.lang-both .about-steps .step-text .en { margin-top: 2px; }
.about-links { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.about-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
body.lang-both .about-links a .en { color: var(--muted); font-size: .92em; }
@media (max-width: 760px) { .about-steps { grid-template-columns: repeat(2, 1fr); } .about-pic { margin-top: 40px; } }
@media (max-width: 760px) { .about-hero { padding: 72px 16px 48px; } .about-hero h1 { font-size: 28px; } }
.about p strong { font-weight: 500; color: var(--ink); }
body.lang-both p.lead.zh + p.lead.en { margin-top: -20px; }
body.lang-both .about p.zh:not(.lead) { margin-bottom: 4px; }
body.lang-both .about p.en:not(.lead) { margin-top: 0; color: var(--muted); }
.placeholder { border: 1px dashed var(--line); border-radius: 10px; padding: 28px; color: var(--muted); text-align: center; }

/* 开场大图：原画完整展示，不裁切 */
.hero { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: 20px 20px 48px; gap: 20px; }
.hero :is(img, video) { max-height: 70vh; max-height: 70svh; width: auto; max-width: 100%; display: block; box-shadow: 0 10px 40px rgba(0,0,0,.18); animation: fadein 1.6s ease both; }
.hero .tagline { text-align: center; animation: fadein 1.6s .4s ease both; }
.hero .tagline .t-en { font-family: var(--serif); font-size: clamp(24px, 4vw, 38px); line-height: 1.25; }
.hero .tagline .t-zh { font-family: var(--serif); font-size: clamp(18px, 2.6vw, 24px); color: var(--muted); margin-top: 4px; }
.hero .tagline .btn { margin-top: 18px; }
.hero .label { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* 场景卡片 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px; }   /* 中大卡片：手机一行 1 张，电脑一行 2–3 张 */
.card { display: block; text-decoration: none; color: inherit; }
.card .pic { aspect-ratio: 5 / 4; background: var(--paper-2); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* 有画的时候：不加底色框，每幅画按自己的比例完整显示，底边对齐（像挂在同一条线上），加一点阴影 */
.card .pic:has(img) { background: none; overflow: visible; align-items: flex-end; justify-content: flex-start; }
.card .pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 22px rgba(0, 0, 0, .14); transition: opacity .6s, transform .6s; }
.card:hover .pic img { transform: translateY(-2px); }
.card:hover .pic img { opacity: .9; }
.card .pic .soon { padding: 12px; text-align: center; }
.card .name { font-family: var(--serif); font-size: 21px; margin-top: 10px; line-height: 1.3; }
.card .meta { font-size: 13px; color: var(--muted); }
.card.is-soon { cursor: default; }
.card.is-soon .name { color: var(--muted); }

/* 系列大卡片 */
.series { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.series a { display: block; text-decoration: none; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 6px; padding: 22px 22px 18px; transition: border-color .4s; }
.series a:hover { border-color: var(--accent); }
.series .name { font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.series .desc { color: var(--muted); font-size: 14px; margin-top: 6px; }
.series .count { font-size: 12px; margin-top: 14px; letter-spacing: .04em; }

/* 五种浏览方式 */
.ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ways a { display: block; text-decoration: none; border: 1px solid var(--line); border-radius: 6px; padding: 18px; transition: border-color .4s; }
.ways a:hover { border-color: var(--ink); }
.ways .name { font-family: var(--serif); font-size: 22px; }
.ways .ex { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* 标签 / 小列表 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 13px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.chip b { font-weight: 400; color: var(--muted); margin-left: 6px; }
.group { padding: 56px 0; border-top: 1px solid var(--line); }   /* 画家之间留出更大的间距 */
.group:first-child { padding-top: 8px; border-top: 0; }
.group:first-child { border-top: 0; }
.group h3 { font-size: 26px; margin: 0 0 4px; }
/* 画家卡片的封面（登记表 artists 里的 cover：用这位画家最有名的一幅） */
.artist-head { display: flex; align-items: center; gap: 16px; }
.group .artist-head { margin-bottom: 12px; }
/* 画家页：可以走进去的画 / 其他代表作 */
.works-title { font-size: 15px; font-weight: 500; margin: 18px 0 8px; color: var(--muted); letter-spacing: .02em; }
.more-works { list-style: none; padding: 0; margin: 6px 0 0; }
.more-works li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.more-works li a { text-decoration: none; }
.more-works .meta { color: var(--muted); font-size: 13px; }
.artist-head .artist-cover { flex: none; width: 120px; height: 150px; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.artist-head .artist-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-title.artist-head .artist-cover { width: 160px; height: 200px; }
.group .artist-head { gap: 22px; }
/* 画家页的图片网格：手机一行 2 张，电脑一行 3–4 张；缩略图完整显示（不裁切） */
.art-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin: 8px 0 24px; }
@media (min-width: 700px) { .art-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; } }
@media (min-width: 1000px) { .art-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.art { display: block; color: inherit; text-decoration: none; }
.art-pic { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--panel, rgba(0,0,0,.03)); border-radius: 6px; overflow: hidden; }
.art-pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.art-pic .soon { font-size: 12px; color: var(--muted); }
.art:hover .art-pic img { transform: scale(1.02); transition: transform .3s; }
.art-zh { margin-top: 8px; font-size: 15px; line-height: 1.4; }
.art-en { font-size: 13px; color: var(--muted); line-height: 1.4; }
.art-year { font-size: 12px; color: var(--muted); margin-top: 2px; }
.art.is-soon { opacity: .6; }
/* 局部：封面只截了一段，右下角小标签 */
.pic, .art-pic { position: relative; }
.detail-tag { position: absolute; right: 6px; bottom: 6px; font-size: 11px; line-height: 1; padding: 4px 6px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; letter-spacing: .02em; }
/* 生平默认收起 */
.life-toggle > summary { list-style: none; cursor: pointer; display: inline-block; }
.life-toggle > summary::-webkit-details-marker { display: none; }
.life-toggle[open] > summary { display: none; }
.group .note { font-size: 13px; color: var(--muted); margin: 0 0 16px; }

/* 时间轴 */
.timeline { border-left: 1px solid var(--line); margin-left: 6px; padding-left: 24px; }
.timeline .group { position: relative; border-top: 0; }
.timeline .group::before { content: ''; position: absolute; left: -29px; top: 40px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); }

/* 地图 */
.map { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); display: block; }
.map .grid { stroke: var(--line); stroke-width: .6; }
.map .dot { fill: var(--accent); }
.map .dot-soon { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.map text { fill: var(--ink); font-family: var(--sans); font-size: 13px; }
.map-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.map a:hover .dot, .map a:hover .dot-soon { stroke: var(--ink); stroke-width: 2; }

.site-footer { border-top: 1px solid var(--line); padding-top: 32px; padding-bottom: 48px; font-size: 12px; color: var(--muted); text-align: center; line-height: 2; }
.site-footer .prefs { justify-content: center; margin-bottom: 10px; }

@media (max-width: 640px) {
  .page-title h1 { font-size: 34px; }
  .section { padding-top: 40px; padding-bottom: 40px; }
  .section h2 { font-size: 26px; }
}

/* =====================================================================
   场景页（3D）—— engine.js 生成的界面
   ===================================================================== */
body.scene { overflow: hidden; height: 100%; background: var(--paper); }
body.scene canvas { display: block; touch-action: none; }
.scene .grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(30,25,40,.3) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  opacity: .4; mix-blend-mode: multiply;
}
.scene .panel { background: var(--veil); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.scene .ui { position: fixed; z-index: 5; display: none; }
.scene.in-room .ui { display: flex; }
.scene .ui .btn, .scene .ui .seg { background: var(--veil); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.scene .ui .btn { font-size: 13px; padding: 6px 12px; }
.scene .ui .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.scene .ui .seg button.on { background: var(--ink); color: var(--paper); }
#tools { top: 12px; left: 12px; flex-direction: column; align-items: flex-start; gap: 8px; }
#status { top: 12px; right: 12px; flex-direction: column; align-items: flex-end; gap: 8px; }
#progress, #leftHint { font-size: 12px; padding: 5px 11px; border-radius: 999px; }
#endBtn { animation: fadein var(--slow) ease both; }
#sceneHome { position: fixed; z-index: 21; left: 12px; top: 12px; font-size: 12px; text-decoration: none; color: var(--muted); }
.scene.in-room #sceneHome { display: none; }

/* 开场原画 */
#intro { position: fixed; inset: 0; z-index: 20; background: var(--paper); transition: opacity 1.6s ease; }
#intro img { position: absolute; transition: transform 1.6s ease; }
#intro.fade { opacity: 0; pointer-events: none; }
#intro.fade img { transform: scale(1.03); }
#introMissing { position: absolute; top: 40%; width: 100%; text-align: center; color: var(--muted); font-size: 14px; }
#introBottom { position: absolute; left: 12px; right: 12px; bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 4vh; pointer-events: none; }
#introBottom > * { pointer-events: auto; }
#enter { font-size: 17px; padding: 11px 26px; }
#enter span { display: block; }
#enter span.en { font-size: 12px; opacity: .8; }
#introInfo { width: max-content; max-width: 100%; padding: 6px 12px; text-align: center; font-size: 11px; color: var(--muted); line-height: 1.7; }
#introInfo .lbl { color: var(--ink); }
#contentNote { font-size: 11px; color: var(--muted); text-align: center; }
body.lang-both #contentNote .zh + .en::before { content: " / "; }

#hint {
  position: fixed; top: 38%; left: 50%; transform: translateX(-50%); z-index: 4; padding: 8px 14px; font-size: 14px;
  pointer-events: none; text-align: center; width: max-content; max-width: calc(100% - 32px); transition: opacity 1s; opacity: 0;
}

/* 画家视角 */
#vpOverlay { position: fixed; z-index: 2; pointer-events: none; opacity: 0; display: none; }
/* 原画叠加：屏幕底部居中的一条紧凑滑杆（标题一行 + 滑杆），只在站到视角点上时出现 */
#vpPanel { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6; width: min(420px, calc(100% - 32px)); padding: 6px 10px 4px 14px; transition: opacity var(--slow); opacity: 0; pointer-events: none; }
#vpPanel.show { opacity: 1; pointer-events: auto; }
#vpPanel .vp-head { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.3; white-space: nowrap; }
#vpPanel .vp-head b { font-weight: 500; }
#vpPanel .vp-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
#vpPanel #vpVal { color: var(--muted); font-variant-numeric: tabular-nums; }
#vpPanel .vp-close { border: 0; background: none; color: var(--ink); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; }
#vpPanel input { display: block; width: 100%; margin: 2px 0 0; accent-color: var(--ink); }
.touch #vpPanel { bottom: 146px; }   /* 手机：放在摇杆和语言切换按钮的上面 */

/* 弹窗 */
.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 8; width: min(520px, calc(100% - 32px)); padding: 10px; display: none; text-align: center; animation: fadein .5s ease; }
.popup { max-height: calc(100% - 32px); overflow-y: auto; }
.popup img { width: 100%; display: block; }
.zoomable { cursor: zoom-in; }
.rec-box { text-align: left; margin: 4px 8px 8px; font-size: 13px; }
.rec-box summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.popup p { margin: 8px; font-size: 13px; }
.close { position: absolute; top: 6px; right: 8px; border: 0; background: var(--veil); color: var(--ink); font-size: 20px; line-height: 1; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; z-index: 1; }

/* 发现卡片 */
#card { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 7; width: min(420px, calc(100% - 32px)); padding: 16px 18px; display: none; animation: fadein .5s ease; }
#card.over { z-index: 45; }
.touch #card { bottom: 150px; }
#card h3 { margin: 0 28px 0 0; font-size: 24px; line-height: 1.2; }
#card .en-title { margin: 0 0 10px; font-family: var(--serif); font-size: 17px; color: var(--muted); font-style: italic; }
#card p { margin: 6px 0; font-size: 14px; line-height: 1.6; }
#card .en { color: var(--muted); }

/* 摇杆 */
#joy { position: fixed; left: 24px; bottom: 24px; width: 110px; height: 110px; z-index: 5; border-radius: 50%; border: 1px solid var(--line); background: var(--veil); display: none; touch-action: none; }
.touch.in-room #joy { display: block; }
#knob { position: absolute; left: 35px; top: 35px; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); opacity: .55; }
#langSwitch { position: fixed; right: 12px; bottom: 24px; z-index: 35; display: none; gap: 6px; }
.scene.in-room #langSwitch { display: flex; }
#langSwitch .seg { background: var(--veil); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#langSwitch .seg button:not(.on) { color: var(--ink); }

/* 结尾：三幕 */
#gallery { position: fixed; inset: 0; z-index: 30; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--paper); display: none; opacity: 0; transition: opacity var(--slow); scroll-snap-type: y proximity; scroll-behavior: smooth; }
#gallery.show { opacity: 1; }
.act { min-height: 100vh; min-height: 100dvh; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px 24px; gap: 16px; }
.act img, .act .ph { width: min(860px, 100%); max-height: 56vh; object-fit: contain; display: block; }
.ph { aspect-ratio: 5 / 4; background: var(--paper-2); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 13px; text-align: center; }
.act .act-cap { margin: -6px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); text-align: center; }
.act .act-cap span { display: block; }
.act .act-cap .sep { display: none !important; }
.img-credit { display: block; font-size: 11px; color: var(--muted); opacity: .85; margin-top: 2px; }
.act-text { max-width: 680px; text-align: center; }
.act h3 { margin: 0 0 10px; font-size: 30px; }
body.lang-both .act h3 > .en { display: block; font-size: .62em; color: var(--muted); font-style: italic; margin-top: 4px; }   /* 幕标题：英文换行 */
.act h3 small { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: .2em; margin-bottom: 2px; }
.act p { margin: 0 0 10px; line-height: 1.85; font-size: 15px; }
.act p.en { color: var(--muted); font-size: 14px; }
.act .reveal { opacity: 0; transform: translateY(14px); transition: opacity 1.2s ease, transform 1.2s ease; }
.act.seen .reveal { opacity: 1; transform: none; }
.act.seen .reveal:nth-child(2) { transition-delay: .25s; }
.act.seen .reveal:nth-child(3) { transition-delay: .5s; }
.act.seen .reveal:nth-child(4) { transition-delay: .75s; }
.final { justify-content: flex-start; padding-top: 60px; }
.final h2 { font-size: 40px; text-align: center; margin: 8vh 0 6vh; line-height: 1.4; }
.final h2 small { display: block; font-size: 22px; color: var(--muted); font-style: italic; }
.versions { display: flex; gap: 24px; width: min(1100px, 100%); }
.versions figure { flex: 1; margin: 0; }
.versions img, .versions .ph { width: 100%; aspect-ratio: 5 / 4; object-fit: contain; background: var(--paper-2); display: block; }
.versions .ext { text-decoration: none; padding: 16px; line-height: 1.6; }
.versions figcaption { font-size: 12px; line-height: 1.6; padding-top: 8px; color: var(--muted); }
.section-title { text-align: center; margin: 40px 0 4px; font-family: var(--serif); font-size: 26px; }
.section-title small { display: block; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.cmp-pick { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.cmp-pick select { font: inherit; font-size: 14px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
#cmp { position: relative; width: min(820px, 100%); aspect-ratio: 5 / 4; margin: 0 auto; overflow: hidden; border-radius: 4px; touch-action: pan-y; cursor: ew-resize; user-select: none; background: var(--paper-2); }
#cmp img { position: absolute; inset: 0; width: 100%; height: 100% !important; max-height: none !important; margin: 0; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }   /* 盒子的比例跟着第一张画（见 engine.js） */
#cmpLine { position: absolute; top: 0; bottom: 0; width: 2px; background: #f5f0e6; transform: translateX(-50%); pointer-events: none; }
#cmpLine::after { content: '◀ ▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #f5f0e6; color: #22201c; font-size: 11px; padding: 5px 8px; border-radius: 14px; white-space: nowrap; }
.cmp-tag { position: absolute; top: 8px; background: rgba(28,28,30,.7); color: #f5f0e6; padding: 3px 8px; border-radius: 4px; font-size: 12px; pointer-events: none; }
.links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.next-scene { text-align: center; }
.next-scene .card { width: min(320px, 100%); margin: 0 auto; text-align: left; }
.end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 36px 0 16px; }
.credit { text-align: center; font-size: 12px; line-height: 1.8; color: var(--muted); padding-bottom: 28px; }
#flash { position: fixed; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; z-index: 9; transition: opacity .8s; }

@media (max-width: 700px) {
  .versions { flex-direction: column; }
  .final h2 { font-size: 30px; }
}

/* 作品档案表 */
.record { border-collapse: collapse; width: min(560px, 100%); margin: 8px auto 0; font-size: 14px; }
.record th, .record td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.record th { font-weight: 400; color: var(--muted); white-space: nowrap; width: 1%; }
.rec-box .record { font-size: 13px; }
.zoom-row { text-align: center; margin: 16px 0 0; }

/* 延伸阅读与来源（场景页最底部） */
.reading { width: min(560px, 100%); margin: 24px auto 28px; text-align: center; }
.reading ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; line-height: 2; }

/* 细节放大 */
#zoom { position: fixed; inset: 0; z-index: 40; background: var(--paper); animation: fadein .4s ease; }
#zoomStage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
#zoomStage:active { cursor: grabbing; }
#zoomImg { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
#zoom .close { top: 12px; right: 12px; width: 36px; height: 36px; border: 1px solid var(--line); }
#zoomBar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
#zoomBar button { font: inherit; font-size: 15px; min-width: 40px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
#zoomBar button:hover { background: var(--paper-2); }
#zoomHint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font-size: 12px; padding: 5px 12px; border-radius: 999px; color: var(--muted); pointer-events: none; max-width: calc(100% - 120px); text-align: center; }

/* 给搜索引擎看的文字（tools/build.py 生成）：有 JavaScript 时不显示 */
.js #static { display: none; }
.static { max-width: 760px; margin: 0 auto; padding: 20px; }
.static img { max-width: 100%; height: auto; }
.static nav, .static header { font-size: 14px; }

/* 场景页：关于画家 */
.artist-bio { width: min(640px, 100%); margin: 8px auto 0; text-align: center; }
.artist-bio p { line-height: 1.8; font-size: 15px; }
.artist-bio p .en { display: block; color: var(--muted); font-size: 14px; margin-top: 6px; }

/* 小提示条（比如“天亮了”） */
#toast { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 9; padding: 12px 18px; text-align: center; font-family: var(--serif); font-size: 19px; line-height: 1.5; max-width: calc(100% - 32px); opacity: 0; pointer-events: none; transition: opacity 1.6s; }
#toast.show { opacity: 1; }
#toast .en { display: block; font-size: 15px; color: var(--muted); font-style: italic; }

/* 独家发现“两个星夜”：两幅画左右对比（两幅画比例接近，用 cover 对齐） */
#twin { width: min(760px, calc(100% - 32px)); }
#twin h3 { margin: 6px 0 10px; font-weight: 500; }
.twin-cmp { position: relative; width: 100%; aspect-ratio: 92 / 73; overflow: hidden; border-radius: 4px; touch-action: pan-y; cursor: ew-resize; user-select: none; background: var(--paper-2); }
.popup .twin-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.twin-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #f5f0e6; transform: translateX(-50%); pointer-events: none; }
.twin-line::after { content: '◀ ▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #f5f0e6; color: #22201c; font-size: 11px; padding: 5px 8px; border-radius: 14px; white-space: nowrap; }
.twin-caps { display: flex; justify-content: space-between; gap: 12px; text-align: left; }
.twin-caps span:last-child { text-align: right; }

/* ---------- 轻量版（分层景深）：静物画 ---------- */
.light #stageWrap { position: fixed; inset: 0; overflow: hidden; touch-action: none; background: var(--paper); }
.light #stage { position: absolute; overflow: hidden; will-change: transform; }
.light .layer { position: absolute; inset: 0; will-change: transform; }
.light .layer img { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
/* 独家发现“帘子回来了”（示意）：背景上慢慢浮现的帘子褶皱，人物各层盖在上面 */
.light .curtain { position: absolute; inset: 0; opacity: 0; transition: opacity 2.5s ease; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,.35)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 1.5%, transparent 4% 7%, rgba(255,255,255,.12) 9%, transparent 11% 13%),
    var(--curtain); }
.light .curtain.on { opacity: var(--curtain-on, .75); }
#curtainNote { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 5; padding: 6px 14px; font-size: 12px; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.touch #curtainNote { bottom: 240px; }
body.zoomed .spot, body.zoom-pick .spot { opacity: 0; pointer-events: none; }
/* 细节放大的热点：点“放大看细节”后出现 */
.light #zspots .zspot { position: absolute; transform: translate(-50%, -50%); display: none; padding: 4px 10px; border-radius: 999px; border: 1.5px solid #fff3b0;
  background: rgba(28,28,30,.55); color: #fff3b0; font: 500 12px/1.2 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
body.zoom-pick:not(.zoomed) #zspots .zspot { display: block; }
.light #stage { box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.light #spots, .light #zspots { position: absolute; inset: 0; }
.light #ltags { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.light #ltags.hidden { display: none; }
.light #ltags .ltag { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; padding: 3px 9px; border-radius: 999px; border: 1.5px solid #d8d0c0; background: rgba(40, 36, 32, .72); color: #f4efe6; font-size: 13px; line-height: 1.3; font-family: inherit; cursor: pointer; white-space: nowrap; }
.light #ltags .ltag.real { border-color: #fff3b0; background: rgba(120, 90, 20, .82); }
.light #zspots { pointer-events: none; }
.light #zspots .zspot { pointer-events: auto; }
.spot { position: absolute; width: 26px; height: 26px; padding: 0; border: 2px solid #fff8dc; border-radius: 50%; background: rgba(255, 236, 160, .55); cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 236, 160, .7); animation: spotPulse 2.4s ease-out infinite; }
.spot.seen { background: rgba(255, 255, 255, .25); animation: none; }
@keyframes spotPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 236, 160, .7); } 100% { box-shadow: 0 0 0 16px rgba(255, 236, 160, 0); } }
.light #hint { pointer-events: none; }
#where { width: min(720px, calc(100% - 32px)); }
#where h3 { margin: 6px 0 10px; font-weight: 500; }
.world { width: 100%; height: auto; display: block; background: var(--paper-2); border-radius: 4px; }
.world .land { fill: var(--muted); opacity: .35; }
.world .dot { fill: #e0a526; stroke: #fff; }
.world text { font-size: 18px; fill: var(--ink); }
.where-list { text-align: left; font-size: 13px; margin: 10px 8px 0 28px; }
#where .soon { color: var(--muted); }
/* 对比滑块：两张画叠在一起，拖动中间的线 */
#slide { width: min(760px, calc(100% - 32px)); }
#slide h3 { margin: 6px 0 10px; font-weight: 500; }
.wipe { position: relative; aspect-ratio: 4 / 3; background: #111; border-radius: 4px; overflow: hidden; user-select: none; touch-action: none; }
.wipe img, .wipe-b { position: absolute; inset: 0; width: 100%; height: 100%; }
.wipe img { object-fit: contain; }
.wipe-b { clip-path: inset(0 0 0 var(--pos)); background: #111; }
.wipe-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .6); pointer-events: none; }
.wipe input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.wipe-caps { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); margin-top: 8px; text-align: left; }
.wipe-caps span:last-child { text-align: right; }
.wipe-note { margin: 10px 0 0; }
.final .final-by { display: block; margin-top: 10px; font-size: 15px; font-style: normal; color: var(--muted); }

/* 地图：陆地轮廓、两层切换、每块地图的名字 */
.map .land { fill: var(--muted); opacity: .22; }
.map .panel-name { fill: var(--muted); font-size: 12px; letter-spacing: .04em; }
.map-layers { margin-top: 14px; }
/* 卡片下面的“官网作品页”和图片来源 */
.card-wrap { display: flex; flex-direction: column; gap: 4px; }
.card-wrap .work-link { font-size: 13px; color: var(--muted); }
.card-wrap .img-credit { font-size: 11px; color: var(--muted); line-height: 1.5; }
.map-layers button { font-size: 14px; padding: 7px 14px; }
.later { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.9; }
.later a { color: inherit; }
.world .dot.here { fill: #c0392b; }
.world .dot.gone { fill: none; stroke: var(--muted); }
.where-intro { font-size: 13px; color: var(--muted); }
.where-list li { margin: 4px 0; }
.where-list li.here b { color: #c0392b; }
.where-list li.gone { color: var(--muted); }
body.lang-both :is(#where, #twin) h3 > .en { display: block; font-size: .8em; color: var(--muted); font-style: italic; }

/* 独家发现“两把椅子面对面”：两幅画并排，白天 / 夜晚切换 */
#pair { width: min(760px, calc(100% - 32px)); }
#pair h3 { margin: 6px 0 10px; font-weight: 500; }
body.lang-both #pair h3 > .en { display: block; font-size: .8em; color: var(--muted); font-style: italic; }
.pair-modes { margin-bottom: 10px; }
.pair-imgs { display: flex; gap: 10px; }
.pair-imgs figure { flex: 1; margin: 0; transition: opacity .6s, filter .6s; }
.pair-imgs figure.dim { opacity: .35; filter: grayscale(.6); }
.pair-imgs figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* 一行一幅（画家页、博物馆页） */
.rows { border-top: 1px solid var(--line); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.row-main { display: flex; align-items: center; gap: 14px; flex: 1 1 300px; min-width: 0; text-decoration: none; color: inherit; }
a.row-main:hover .row-title { text-decoration: underline; }
.row-pic { flex: 0 0 140px; height: 110px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }   /* 小缩略图（博物馆页、地图页） */
.row-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }   /* 完整显示，不裁切 */
.row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-title { font-family: var(--serif); font-size: 18px; line-height: 1.3; }
.row-meta { font-size: 13px; color: var(--muted); }
.row.is-soon .row-title { color: var(--muted); }
.row-side { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.row-soon { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.row-credit { flex-basis: 100%; padding-left: 154px; }
@media (max-width: 520px) { .row-pic { flex-basis: 120px; height: 94px; } .row-credit { padding-left: 0; } }
.card .name.both > span { display: inline !important; font-size: inherit !important; font-style: normal !important; color: inherit !important; margin: 0 !important; }
.later-one { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.map circle.num.dot { fill: var(--accent); }
.map circle.num.dot-soon { fill: var(--paper); stroke: var(--muted); }
.map text.num { font-size: 10px; font-weight: 600; fill: var(--paper); pointer-events: none; }
.map .dot-soon + text.num { fill: var(--muted); }
.map-num { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .6em; vertical-align: middle; font-family: var(--sans); }
#windBtn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* 语音导览播放器（场景右上角，按“语音导览”展开） */
.guide { width: min(320px, calc(100vw - 24px)); padding: 8px 10px; font-size: 12px; text-align: left; }
.guide-row { display: flex; align-items: center; gap: 8px; }
.guide-row .btn { min-width: 38px; padding: 5px 10px; }
.guide-row input { flex: 1; min-width: 0; accent-color: var(--accent); }
#gTime { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.guide-text { margin-top: 6px; }
.guide-text summary { cursor: pointer; color: var(--muted); padding: 2px 0; }
.guide-text { max-height: 45vh; overflow-y: auto; }
.guide-text h4 { margin: 10px 0 2px; font-family: var(--serif); font-size: 15px; font-weight: 500; }
.guide-text p { margin: 0 0 6px; line-height: 1.6; }

/* 梵高时间线：横向（手机上竖向） */
.ways.features { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tl-wrap { position: relative; }
.tl-nav { position: absolute; top: -46px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 16px; cursor: pointer; }
.tl-nav.prev { right: 44px; } .tl-nav.next { right: 0; }
.tl-nav:disabled { opacity: .3; cursor: default; }
.vg-tl { list-style: none; margin: 0; padding: 8px 0 18px; display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
.tl-item { flex: 0 0 210px; position: relative; padding: 26px 18px 0 0; border-top: 2px solid var(--line); scroll-snap-align: start; }
.tl-item::before { content: ''; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--muted); }
.tl-item.has-pic::before { background: var(--accent); border-color: var(--accent); }
.tl-item.has-pic { flex-basis: 250px; }
.tl-date { font-family: var(--serif); font-size: 20px; line-height: 1.2; }
.tl-date .en { display: block; font-size: 13px; color: var(--muted); font-style: italic; }
.tl-text .en { display: block; font-size: 13px; color: var(--muted); }
.tl-text i { font-style: italic; }
.tl-text { margin-top: 6px; font-size: 14px; line-height: 1.55; }
.tl-pics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tl-pic { display: block; width: 110px; text-decoration: none; color: inherit; font-size: 11px; line-height: 1.35; }
.tl-pic img { display: block; width: 110px; height: 86px; object-fit: cover; border-radius: 4px; margin-bottom: 4px; transition: opacity .3s; }
.tl-pic:hover img { opacity: .85; }
.tl-pic .en { display: block; color: var(--muted); }
.vg-tl :is(.tl-date, .tl-text) .sep { display: none; }
body:not(.lang-both) .tl-date .en, body:not(.lang-both) .tl-text .en, body:not(.lang-both) .tl-pic .en { font-style: normal; font-size: inherit; color: inherit; }
@media (max-width: 700px) {
  .vg-tl { flex-direction: column; overflow: visible; padding-left: 6px; }
  .tl-nav { display: none; }
  .tl-item, .tl-item.has-pic { flex: none; border-top: 0; border-left: 2px solid var(--line); padding: 0 0 26px 22px; }
  .tl-item::before { top: 4px; left: -7px; }
}

/* 在伦敦看真迹：参观路线 */
.notice { margin: 16px 0 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--veil); font-size: 14px; }
.london-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 14px 0 0; font-size: 14px; }
.london .row-side .btn { font-size: 13px; padding: 6px 12px; }
@media print {
  .site-header nav, .site-footer, .btn, .work-link, .prefs { display: none !important; }
  :root, :root[data-theme] { --ink: #000 !important; --paper: #fff !important; --muted: #444 !important; --line: #ccc !important; }
  body { background: #fff !important; color: #000 !important; }
  .notice { background: none; }
  .london-links a::after { content: ' (' attr(href) ')'; font-size: 11px; }
  .london .row { break-inside: avoid; }
}

/* 同一幅画的几个版本 */
.vers h2 { font-size: 30px; margin: 0 0 16px; }
.vers h3 { font-weight: 500; margin: 0 0 6px; }
.vers .versions { margin-bottom: 8px; }
.vers .section-title { text-align: center; }
.vers .world { max-width: 820px; }
.vers .where-list { margin-left: 22px; font-size: 14px; }
body.lang-both .vers h2 > .en, body.lang-both .vers h3 > .en { display: block; font-size: .6em; color: var(--muted); font-style: italic; }

/* 一分钟看一幅画：只留原画和倒计时 */
#oneMin { font-size: 13px; padding: 6px 14px; margin-top: -2.5vh; background: var(--veil); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }   /* 半透明底色：放在深色的画上也看得清 */
#introBottom, #sceneHome, #langSwitch { transition: opacity 1.2s ease; }
body.looking :is(#introBottom, #sceneHome, #langSwitch), body.looking #introBottom > * { opacity: 0; pointer-events: none; }
#lookBar { position: fixed; z-index: 22; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 14px; font-size: 13px; opacity: .75; transition: opacity .6s; }
#lookBar:hover { opacity: 1; }
#lookBar.hidden { display: none; }
#lookTime { font-variant-numeric: tabular-nums; min-width: 2.6em; }
#lookBar .btn { font-size: 12px; padding: 4px 12px; }
.vers :is(h2, h3) .sep { display: none; }

/* 环境音 / 音乐开关 */
.scene .ui .btn.on { border-color: var(--ink); }
#musInfo { font-size: 12px; padding: 5px 11px; max-width: min(320px, calc(100vw - 24px)); line-height: 1.5; text-align: right; }
#musInfo a { color: inherit; }

/* 时间线页：按画家筛选；即将开放的作品只写名字 */
.tl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; border: 0; background: none; padding: 0; overflow: visible; border-radius: 0; }
.tl-filter button { border: 1px solid var(--line); border-radius: 999px; }
.tl-work { display: flex; flex-direction: column; gap: 2px; }
.tl-meta { font-size: 11px; color: var(--muted); max-width: 110px; line-height: 1.35; }
.tl-soon { display: flex; flex-direction: column; justify-content: center; width: 110px; min-height: 86px; padding: 8px; box-sizing: border-box; border: 1px dashed var(--line); border-radius: 4px; font-size: 12px; line-height: 1.35; }
.tl-soon .en { display: block; color: var(--muted); }
.tl-soon small { margin-top: 4px; font-size: 10px; color: var(--muted); }
.vg-tl .tl-pics { gap: 10px; }
.life h2 { margin-bottom: 40px; }
.about-note { margin-top: 96px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.about-note p { font-size: 13px; color: var(--muted); }

/* 首屏短片、“今天看哪幅” */
.hero video { width: min(100%, calc(70svh * 640 / 506)); aspect-ratio: 640 / 506; height: auto; object-fit: cover; background: var(--paper-2); }
.hero-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.hero .tagline .hero-btns .btn { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .hero :is(img, video), .hero .tagline { animation: none; } }

/* 隐藏按钮：录屏、截图时只留画面 */
#uncleanBtn { display: none; }
body.clean :is(.ui, #langSwitch, #vpPanel, #hint, #sceneHome, #guideBox, #musInfo) { display: none !important; }
body.clean #uncleanBtn { display: block; position: fixed; right: 10px; bottom: 10px; z-index: 30; font-size: 11px; padding: 4px 10px; opacity: .35; background: var(--veil); }
body.clean #uncleanBtn:hover, body.clean #uncleanBtn:focus { opacity: 1; }
.vg-tl :is(.tl-soon, .tl-pic) .sep { display: none; }

/* 独家发现“画布下的秘密”：打开时在下方显示“示意图”说明 */
#revealBtn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* 独家发现开关（toggles）打开时的说明 */
.toggle-note { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 5; padding: 6px 14px; font-size: 12px; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.touch .toggle-note { bottom: 240px; }
/* 独家发现“换一种光”：底部的滑杆 */
#lightPanel { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 5; width: min(420px, calc(100% - 32px)); padding: 12px 16px; text-align: center; font-size: 13px; }
.touch #lightPanel { bottom: 240px; }
#lightPanel input { width: 100%; }
#lightPanel .light-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 2px; }
#lightPanel p { margin: 8px 0 0; }
/* 独家发现“镜子里的人”：原画上镜子那一块放大 */
.mirror-zoom { width: min(100%, 360px); margin: 8px auto 12px; border-radius: 50%; background-repeat: no-repeat; box-shadow: 0 0 0 6px rgba(60,40,20,.35), 0 4px 18px rgba(0,0,0,.35); }
.dist-frame { position: relative; overflow: hidden; width: 100%; margin: 8px auto 10px; border-radius: 6px; touch-action: none; cursor: grab; background: #222; }
.dist-frame img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; will-change: transform; }
#distance input { width: 100%; }
.dist-note { margin: 8px 0 0; }
#revealNote { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 5; padding: 6px 14px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .8s; max-width: calc(100% - 32px); text-align: center; }
#revealNote.show { opacity: 1; }
.touch #revealNote { bottom: 240px; }

/* 花瓣慢慢飘落（轻量版场景的 petals） */
#petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
#petals i { position: absolute; top: -4vh; width: 10px; height: 8px; border-radius: 60% 40% 60% 40%; background: var(--petal); opacity: .85;
  box-shadow: 0 0 2px rgba(0, 0, 0, .12); transform: scale(var(--s)); animation: petalFall var(--d) linear var(--delay) infinite; }
@keyframes petalFall {
  0% { transform: translate(0, 0) rotate(0) scale(var(--s)); opacity: 0; }
  10% { opacity: .85; }
  50% { transform: translate(calc(var(--x) * .6), 52vh) rotate(calc(var(--r) * .5)) scale(var(--s)); }
  90% { opacity: .85; }
  100% { transform: translate(var(--x), 106vh) rotate(var(--r)) scale(var(--s)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { #petals { display: none; } }

/* 独家发现“数一数”：数到第几位，数完显示一句话 */
#countPanel { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 5; padding: 8px 16px; text-align: center; max-width: calc(100% - 32px); pointer-events: none; }
#titlesPanel { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 5; padding: 10px 18px; text-align: center; max-width: calc(100% - 32px); pointer-events: none; }
#titlesNow b { font-family: var(--serif, serif); font-size: 20px; font-weight: 400; }
#titlesPanel .titles-note { font-size: 13px; color: var(--muted); margin-top: 4px; }
.touch #titlesPanel { bottom: 240px; }
#countPanel .count-zoom { width: 180px; max-width: 60vw; margin: 6px auto; border-radius: 6px; }
#countN { font-size: 15px; font-weight: 500; }
#countDone { margin-top: 4px; font-size: 13px; }
.touch #countPanel { bottom: 240px; }

/* 独家发现“放大镜”：在原画上移动的圆形放大镜 */
#loupe { width: min(820px, calc(100% - 32px)); }
#loupe h3 { margin: 6px 0 10px; font-weight: 500; }
.loupe-pic { position: relative; touch-action: none; cursor: none; user-select: none; }
.loupe-pic img { display: block; width: 100%; height: auto; border-radius: 4px; pointer-events: none; }
.loupe-lens { position: absolute; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid #fff8e1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4); background-repeat: no-repeat; pointer-events: none; opacity: 0; transition: opacity .3s; }
.loupe-note { margin: 10px 4px 0; font-size: 14px; }
@media (max-width: 600px) { .loupe-lens { width: 110px; height: 110px; margin: -55px 0 0 -55px; } }

/* ---------- 首页（以图片为主，只有五块） ---------- */
/* 1. 首屏：一幅画铺满一屏，标语和按钮压在画的下方 */
.hero.hero-full { position: relative; display: block; min-height: 0; height: calc(100vh - 66px); height: calc(100svh - 66px); padding: 0; overflow: hidden; background: #1c1c1e; }
.hero.hero-full :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; object-fit: cover; box-shadow: none; }
.hero-over { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 20px 28px; text-align: center; color: #f4efe6; background: linear-gradient(to top, rgba(18,16,14,.78), rgba(18,16,14,.45) 55%, rgba(18,16,14,0)); animation: fadein 1.6s .4s ease both; }
.hero-over .t-en { font-family: var(--serif); font-size: clamp(26px, 4.2vw, 46px); line-height: 1.2; }
.hero-over .t-zh { font-family: var(--serif); font-size: clamp(18px, 2.6vw, 26px); opacity: .85; margin-top: 4px; }
.hero-over .btn:not(.primary) { background: rgba(244,239,230,.92); color: #1c1c1e; border-color: transparent; }
.hero-over .label { font-size: 11px; opacity: .7; margin-top: 14px; color: inherit; }
.hero-over .label a { color: inherit; }

/* 2. 本周新作：大图（画家页封面卡片的样式）+ 一句话 */
.feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: center; text-decoration: none; color: inherit; }
.feature .artist-cover { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.18); aspect-ratio: 4 / 3; }
.feature .artist-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.feature:hover .artist-cover img { transform: scale(1.02); }
.feature-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.feature-name { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; }
.feature-name .sep { display: none; }
body.lang-both .feature-name > .en { display: block; font-size: .62em; color: var(--muted); font-style: italic; margin-top: 4px; }
.feature-intro { font-family: var(--serif); font-size: 19px; line-height: 1.5; }
.feature-intro:empty { display: none; }

/* 3. 从这里开始：三张大卡片（画家页封面卡片的样式放大） */
.start-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.start-card { display: block; text-decoration: none; color: inherit; }
.start-card .artist-cover { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.18); aspect-ratio: 4 / 5; }
.start-card .artist-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.start-card:hover .artist-cover img { transform: scale(1.03); }
.start-name { display: block; font-family: var(--serif); font-size: 24px; line-height: 1.2; margin-top: 12px; }
.start-name .sep { display: none; }
body.lang-both .start-name > .en { display: block; font-size: .66em; color: var(--muted); font-style: italic; margin-top: 2px; }

/* 4. 系列：每个系列一行，横向滑动（时间线页的缩略图和左右箭头），卡片上只有画名 */
.col-row { margin-top: 30px; }
.col-row:first-of-type { margin-top: 6px; }
.col-row h3 { font-family: var(--serif); font-size: 24px; font-weight: normal; margin: 0 0 6px; padding-right: 96px; }
.col-row h3 a { text-decoration: none; color: inherit; }
.col-row h3 .sep { display: none; }
body.lang-both .col-row h3 .en { font-size: .68em; color: var(--muted); font-style: italic; margin-left: 10px; }
.col-row .tl-nav { top: -40px; }
.col-row .tl-wrap:has(.prev:disabled):has(.next:disabled) .tl-nav { display: none; }   /* 一行放得下时不显示箭头 */
.vg-tl.home-strip { list-style: none; display: flex; flex-direction: row; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 6px 0 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.home-strip li { flex: none; scroll-snap-align: start; }
.home-strip .tl-pic { width: 200px; font-size: 13px; }
.home-strip .tl-pic img { width: 200px; height: 156px; }
.home-strip .tl-pic .sep { display: none; }

/* 5. 底部：一行小图标链接 + 一句项目介绍（署名在页脚） */
.home-bottom { text-align: center; }
.icon-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 34px; }
.icon-links a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; font-size: 13px; min-width: 64px; }
.icon-links a:hover .way-ico { opacity: 1; }
.way-ico { color: var(--ink); opacity: .75; display: flex; transition: opacity .3s; }
.home-intro { color: var(--muted); font-size: 14px; margin-top: 26px; }
.home-intro .en { margin-left: 4px; }

@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; gap: 18px; }
  .start-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; gap: 14px; margin: 0 -20px; padding: 0 20px 8px; }
  .start-card { flex: 0 0 72%; scroll-snap-align: start; }
  .start-name { font-size: 21px; }
  /* 手机：系列照样横向滑动（时间线页在手机上是竖的，这里不跟着变），不显示箭头 */
  .vg-tl.home-strip { flex-direction: row; overflow-x: auto; padding-left: 0; margin: 0 -20px; padding: 6px 20px 12px; scroll-padding-inline: 20px; }
  .home-strip li { flex: none; border: 0; padding: 0; }
  .home-strip .tl-pic { width: 150px; }
  .home-strip .tl-pic img { width: 150px; height: 118px; }
  .col-row h3 { padding-right: 0; font-size: 21px; }
  .icon-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
}

/* 轻量版独家发现“移动焦点”：屏幕下方的滑杆 */
#focusPanel { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6; width: min(460px, calc(100% - 32px)); padding: 12px 16px; text-align: center; }
#focusPanel input { width: 100%; }
#focusPanel .focus-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 2px; }
#focusPanel p { font-size: 13px; margin: 8px 0 0; }
.touch #focusPanel { bottom: 200px; }

/* 独家发现“坐到空椅子上”：坐下后出现的一行字 */
#sitNote { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 5; padding: 8px 16px; font-size: 14px; font-family: var(--serif); opacity: 0; pointer-events: none; transition: opacity 1s; max-width: min(520px, calc(100% - 32px)); text-align: center; }
#sitNote.show { opacity: 1; }
.touch #sitNote { bottom: 240px; }

/* 轻量版独家发现“读懂画框”：画框上的铭文框（点一下，原文被一个字一个字地换成翻译） */
.insc-wrap { position: absolute; inset: 0; pointer-events: none; }
.insc { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: none; overflow: hidden; color: #f3e6c4; font-family: var(--serif); line-height: 1; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.insc-wrap.on .insc { pointer-events: auto; outline: 2px dashed rgba(255, 243, 176, .85); outline-offset: 2px; animation: inscPulse 2s ease-in-out infinite; }
.insc-wrap.on .insc.done { outline-color: transparent; animation: none; }
.insc-cover { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--insc-bg); transition: width .12s linear; }
.insc-text { position: relative; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
@keyframes inscPulse { 50% { outline-color: rgba(255, 243, 176, .35); } }

/* ---------- 故事和卡片的正文排版（所有场景） ----------
   标题、英文副标题居中；中英文正文一样宽（约 36em）、都左对齐、左边在同一条线上；行高都是 1.75；中英文之间空得多一点。
   英文正文用衬线体（EB Garamond），比中文大一点（衬线英文看起来偏小），颜色比中文浅一点但对比度够。
   中文：text-wrap: pretty（避免最后一行只剩一个字）；英文不用它（会让行尾提前换行，右边空太多）。
   中文原来两端对齐，字间距会被拉开（大多数浏览器不支持 text-justify: inter-character），所以也改成左对齐 */
.act-text { width: 100%; max-width: 36em; margin: 0 auto; text-align: center; }
.act-text p, #card p, .artist-bio p { text-align: left; hyphens: manual; line-height: 1.75; }
.artist-bio p .zh { display: block; }
.act-text p.zh, #card p.zh, .artist-bio p .zh { text-align: left; text-justify: inter-character; text-wrap: pretty; }
.act-text p.en, #card p.en, .artist-bio p .en { font-family: var(--text-serif); color: var(--ink-en); text-wrap: wrap; }
.act-text p.en { font-size: 16.5px; }   /* 中文 15px 的 1.1 倍 */
#card p.en { font-size: 15px; }         /* 中文 14px 的约 1.07 倍 */
.artist-bio p .en { font-size: 1.08em; }
.act-text p { margin: 0 0 .5em; }
.act-text p.zh + p.en { margin-top: 1.1em; }   /* 中文和英文之间：明显的间距 */
.act-text p.en + p.en, .act-text p.zh + p.zh { margin-top: .5em; }   /* 同一种语言的段落之间：小一点 */
.act-text .btn { margin-top: 8px; }
#card h3, #card .en-title { text-align: center; margin-left: 28px; margin-right: 28px; }
#card p.en { margin-top: 12px; }
.artist-bio p { max-width: 36em; margin-left: auto; margin-right: auto; }
.artist-bio p .en { margin-top: 12px; }
.artist-bio p:has(.btn) { text-align: center; }
/* 故事页：右下角的语言切换不挡正文（底部多留空白；看故事时按钮变小、半透明，鼠标移上去恢复） */
#gallery .act { padding-bottom: 96px; padding-left: 20px; padding-right: 20px; }
body:has(#gallery.show) #langSwitch { transform: scale(.82); transform-origin: right bottom; opacity: .5; transition: opacity .3s, transform .3s; }
body:has(#gallery.show) #langSwitch:hover, body:has(#gallery.show) #langSwitch:focus-within { opacity: 1; transform: none; }
@media (max-width: 640px) {
  #gallery .act { padding-left: 22px; padding-right: 22px; padding-bottom: 104px; }
  .act p { font-size: 15px; }
}

.london-note { font-style: italic; color: var(--ink); }

/* 分享卡片（share.js）：弹出生成的图片；手机上长按保存，电脑上下载 */
.share-pop { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); padding: 16px; }
.share-pop.hidden { display: none; }
.share-box { position: relative; max-width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 16px; text-align: center; }
.share-box img { display: block; width: 100%; height: auto; border-radius: 6px; -webkit-touch-callout: default; user-select: auto; }
.share-box .close { position: absolute; top: 6px; right: 6px; }
.share-tip { margin: 12px 0 2px; font-size: 14px; color: var(--muted); }

/* ---------- 看画护照、我的画廊（personal.js；页眉右边的两个小图标） ---------- */
.site-nav { margin-left: auto; }
.nav-icons { display: flex; gap: 10px; align-items: center; }
.nav-icons a { color: var(--muted); display: inline-flex; padding: 2px; }
.nav-icons a:hover, .nav-icons a.on { color: var(--ink); }
@media (max-width: 640px) {
  .site-nav { order: 3; width: 100%; margin-left: 0; }
  .nav-icons { margin-left: auto; }
}
.lead-sm { max-width: 36em; color: var(--muted); font-size: 15px; margin: 10px 0 0; }
.pass-total { margin: 14px 0 0; font-family: var(--serif); font-size: 20px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.badge, .badge-mini { display: inline-block; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-family: var(--sans); font-style: normal; }
.badge-mini { padding: 1px 9px; font-size: 11px; vertical-align: middle; }
.pass-count { font-family: var(--sans); font-size: 12px; color: var(--muted); font-style: normal; margin-left: 6px; }
body.lang-both .pass-group h3 > .en { display: inline; font-size: .7em; margin-left: 6px; }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin-top: 10px; }
@media (max-width: 640px) { .stamps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .stamps .stamp-name { font-size: 10px; } }
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
@media (max-width: 640px) { .stamps.gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .gallery-grid .stamp-name { font-size: 12px; } }
.stamp { position: relative; display: block; text-decoration: none; color: var(--ink); }
.stamp img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--paper-2); filter: grayscale(1); opacity: .4; transition: filter .3s, opacity .3s; }
.stamp.on img { filter: none; opacity: 1; }
.stamp:hover img { opacity: .8; }
.stamp.on:hover img { opacity: 1; }
.stamp-name { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.stamp.on .stamp-name { color: var(--ink); }
.stamp-name .en { display: block; font-style: italic; }
.stamp-mark { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.share-out { font-size: 13px; color: var(--muted); word-break: break-all; }
/* 场景页：收藏按钮（心形）、最后一屏“已盖进你的看画护照” */
.save-btn .heart { vertical-align: -3px; }
.save-btn.on { color: #b3433a; }
.stamp-note { margin: 6px 0 0; font-size: 13px; text-align: center; opacity: 0; transition: opacity 1s; }
.stamp-note.show { opacity: 1; }
.stamp-note a { color: var(--accent); text-decoration: none; }

/* 独家发现“黑白”（grayscale）：3D 画面、原画叠加和对照原画都变成黑白 */
canvas, #vpOverlay, #compare img { transition: filter 1.2s ease; }
body.bw canvas, body.bw #vpOverlay, body.bw #compare img { filter: grayscale(1); }
/* 独家发现“取色”（colorPicker） */
#picker { width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; }
#picker h3 { margin: 0 32px 10px; text-align: center; }
.pick-wrap { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }   /* 和图片一样大，圆点才对得准 */
.pick-wrap img { display: block; width: auto; max-width: 100%; height: auto; max-height: 56vh; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.pick-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.pick-hint { text-align: center; color: var(--muted); font-size: 12px !important; }
.pick-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 8px; }
.pick-swatch { position: relative; width: 44px; height: 44px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.pick-swatch span { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font-size: 10px; color: var(--muted); }
.pick-swatches:not(:empty) { margin-bottom: 26px; }
.pick-found { font-family: var(--serif); font-size: 17px !important; text-align: center; margin-top: 14px !important; }
.pick-note { font-size: 13px !important; text-align: center; }

/* ---------- 艺术故事、画中侦探、对比两幅画 ---------- */
.feature-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
.feature-cards .artist-cover img { aspect-ratio: 3 / 2; }
.story-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.story-sub { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.story-back { margin: 0 0 6px; font-size: 13px; } .story-back a { color: var(--muted); text-decoration: none; }
.story-note { max-width: 36em; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.story-intro { max-width: 40em; margin: 16px 0 0; font-family: var(--serif); font-size: 18px; line-height: 1.6; }
.story-outro { max-width: 40em; margin: 32px auto 8px; font-family: var(--serif); font-size: 18px; line-height: 1.6; text-align: center; }
.story-route { list-style: none; margin: 0; padding: 0; }
.story-stop { display: grid; grid-template-columns: 110px 220px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.story-time { font-family: var(--serif); font-size: 20px; }
.story-time b { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .7em; font-family: var(--sans); font-weight: 500; margin-right: 4px; vertical-align: middle; }
body.lang-both .story-time .en { display: block; margin-left: 1.6em; font-size: .7em; color: var(--muted); font-style: italic; }
.story-pic img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.story-title { display: block; font-family: var(--serif); font-size: 20px; }
.story-final { display: block; margin: 6px 0 12px; font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.story-final .en { display: block; font-family: var(--text-serif); color: var(--ink-en); font-size: 16px; }
@media (max-width: 640px) {
  .story-stop { grid-template-columns: 1fr; gap: 10px; }
  .feature-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; overflow: visible; }
  .feature-cards .start-name { font-size: 16px; }
}
.story-next { margin: 18px auto 0; text-align: center; }
.story-of { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.detect-task { display: block; margin-top: 10px; color: var(--accent); font-size: 14px; }
.cmp-contain img { object-fit: contain !important; background: var(--paper-2); }
.pair-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.pair-cmp .cmp-pick { margin-top: 10px; }

/* ---------- 导航栏：四项（探索、故事、看真迹三个下拉菜单 + 关于）；右边：护照、画廊、语言 ---------- */
.site-header { flex-wrap: nowrap; position: relative; z-index: 20; }
.site-nav { margin-left: auto; align-items: center; gap: 4px 6px; font-size: 14px; flex-wrap: nowrap; }
.nav-top { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; text-decoration: none; border-radius: 6px; white-space: nowrap; }
.nav-top:hover, .nav-group.open > .nav-top, .nav-group.on > .nav-top, a.nav-top.on { color: var(--ink); }
.nav-top .caret { font-size: 10px; opacity: .7; }
.nav-group { position: relative; }
.nav-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 170px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.12); z-index: 30; }
.nav-menu a { display: block; padding: 7px 10px; border-radius: 5px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-menu a:hover, .nav-menu a.on { background: var(--paper-2); }
.nav-group.open .nav-menu { display: block; }
@media (hover: hover) and (min-width: 761px) { .nav-group:hover .nav-menu { display: block; } }
.nav-icons { gap: 8px; }
.nav-lang .seg button { padding: 3px 8px; font-size: 11px; }
.nav-toggle { display: none; border: 1px solid var(--line); background: none; color: var(--ink); border-radius: 6px; width: 34px; height: 32px; font-size: 16px; cursor: pointer; }
.nav-lang-m { display: none; }
@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; }
  .site-nav { display: none; order: 3; width: 100%; margin: 6px 0 0; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); padding-top: 6px; }
  .site-header.nav-open .site-nav { display: flex; }
  .nav-toggle { display: inline-block; }
  .nav-lang { display: none; }
  .nav-icons { margin-left: auto; }
  .nav-top { width: 100%; justify-content: space-between; padding: 12px 4px; font-size: 16px; color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-menu { position: static; box-shadow: none; border: 0; padding: 0 0 8px 12px; background: none; min-width: 0; }
  .nav-menu a { padding: 9px 4px; font-size: 15px; }
  .nav-lang-m { display: block; padding: 14px 4px 6px; }
}

/* ---------- 首页：三扇门、系列封面卡片 ---------- */
.feature-meta { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.door { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.door-pic img { aspect-ratio: 4 / 5; }
.door-name { display: block; font-family: var(--serif); font-size: 24px; line-height: 1.2; margin-top: 12px; }
body.lang-both .door-name > .en { display: block; font-size: .66em; color: var(--muted); font-style: italic; margin-top: 2px; }
.door-btn { align-self: flex-start; margin-top: 10px; }
.door-links { display: block; margin-top: 12px; font-size: 15px; }
.door-links a { color: var(--accent); text-decoration: none; }
.door-links a:hover { text-decoration: underline; }
.series-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 14px; }
.series-card { display: block; text-decoration: none; color: inherit; }
.series-card img { aspect-ratio: 3 / 2; }
.series-name { display: block; font-family: var(--serif); font-size: 19px; margin-top: 10px; }
@media (max-width: 640px) {
  .doors { grid-template-columns: 1fr; gap: 26px; }
  .door-pic img { aspect-ratio: 3 / 2; }
  .series-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .series-name { font-size: 16px; }
}
.door-pic, .series-card .artist-cover { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.door-pic img, .series-card .artist-cover img { display: block; width: 100%; object-fit: cover; }
@media (max-width: 760px) { .site-nav a.nav-top { color: var(--ink); } }

/* 独家发现“桌边的人”：人物头上的名字（engine.js 的 names） */
.name-tags { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
.name-tags.hidden { display: none; }
.name-tag { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; font: 13px/1.3 var(--sans); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: opacity .6s; }

/* 独家发现“打开祭坛”（light.js 的 altarpiece）：两块翼板，向两边转开 */
#stage .wing { position: absolute; top: 0; height: 100%; width: 25%; transform-style: preserve-3d; transition: transform 2.4s cubic-bezier(.45,.05,.3,1); z-index: 3; pointer-events: none; }
#stage .wing-l { left: 25%; transform-origin: 0 50%; }
#stage .wing-r { left: 50%; transform-origin: 100% 50%; }
#stage .wing .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-repeat: no-repeat; }
#stage .wing-l .front { background-size: 200% 100%; background-position: 0 0; }
#stage .wing-r .front { background-size: 200% 100%; background-position: 100% 0; }
#stage .wing .back { transform: rotateY(180deg); background-size: 400% 100%; }
#stage .wing-l .back { background-position: 0 0; }
#stage .wing-r .back { background-position: 100% 0; }
#stage.alt-open .wing-l { transform: rotateY(-180deg); }
#stage.alt-open .wing-r { transform: rotateY(180deg); }
#stage.alt-shut .layer { clip-path: inset(0 25% 0 25%); }
#stage .spot[data-state="open"] { transition: opacity .6s; }
#stage:not(.alt-open) .spot[data-state="open"], #stage.alt-open .spot[data-state="closed"] { opacity: 0; pointer-events: none; }
#stage .missing { position: absolute; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 1.2s; background: rgba(245, 240, 230, .72); outline: 2px dashed rgba(60, 50, 40, .7); outline-offset: -3px; }
#stage.miss-on .missing { opacity: 1; }
#altBtn .alt-close-l, #altBtn.on .alt-open-l { display: none; }
#altBtn.on .alt-close-l { display: inline; }
.light #stage .wing ~ #spots, .light #stage .wing ~ #zspots { z-index: 5; }

/* 独家发现“一天的光”（engine.js 的 series）：滑杆在系列的几幅原画之间渐变 */
.series-panel { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); z-index: 6; }
.series-panel.hidden { display: none; }
.series-panel input { width: 100%; }
.series-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.series-cap { margin: 8px 0 4px; font-size: 13px; line-height: 1.5; }
.series-note { margin: 0; font-size: 12px; color: var(--muted); }
.series-cap .series-tag { display: block; font-family: var(--serif); font-size: 18px; color: var(--ink); margin-bottom: 2px; }

/* 独家发现“像1891年那样挂一排”（engine.js 的 gallery）：走到哪一幅前，就在屏幕上放大那一幅 */
#galleryBtn .g-out, #galleryBtn.on .g-in { display: none; }
#galleryBtn.on .g-out { display: inline; }
.gallery-now { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); z-index: 6; text-align: center; }
.gallery-now.hidden { display: none; }
.gallery-now img { width: 100%; height: auto; display: block; border-radius: 4px; }
.gallery-now .g-cap { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
#galleryNote { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); z-index: 6; }

/* ---------- 缩略图一律完整显示，不裁切（object-fit: contain，空白处用网站底色）。唯一例外：橘园《睡莲》用局部，标“局部 / detail” ---------- */
.hero.hero-full { background: var(--paper-2); }
.hero.hero-full :is(img, video) { object-fit: contain; }
.feature .artist-cover, .door-pic, .series-card .artist-cover { aspect-ratio: 4 / 3; background: var(--paper-2); position: relative; }
.feature .artist-cover img, .door-pic img, .series-card .artist-cover img, .start-card .artist-cover img, .artist-head .artist-cover img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) { .door-pic img { aspect-ratio: auto; } }
.start-card .artist-cover, .artist-head .artist-cover { background: var(--paper-2); }
/* 卡片最小尺寸：手机一行最多 2 张（每张不小于屏宽的 45%），电脑上不小于 220px */
@media (min-width: 641px) { .series-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
/* 手机上首屏：画完整显示在上面，标语和按钮放在画的下面（不压在画上，也不留大块空白） */
@media (max-width: 640px) {
  .hero.hero-full { height: auto; background: #1c1c1e; }
  .hero.hero-full :is(img, video) { position: static; display: block; width: 100%; height: auto; max-height: 70svh; object-fit: contain; }
  .hero.hero-full .hero-over { position: static; padding: 20px 20px 24px; background: #1c1c1e; }
}
/* 艺术故事列表：手机上一行 2 张，按顺序往下排（不再横向滑动） */
@media (max-width: 640px) {
  .start-cards.story-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 22px 14px; }
  .story-cards .start-name { font-size: 18px; }
  .story-cards .story-sub { font-size: 13px; }
}
.story-pic img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper-2); }   /* 故事每一站的缩略图也完整显示 */

/* 手机上的场景按钮：只留“返回”和独家发现，其余收进“更多” */
#moreBtn .more-close-t, #tools.more-open #moreBtn .more-open-t { display: none; }
#tools.more-open #moreBtn .more-close-t { display: inline; }
@media (min-width: 641px) { #moreBtn { display: none; } }
@media (max-width: 640px) { #tools:not(.more-open) > .more-item { display: none !important; } }
/* 3D 场景的加载进度 */
#loadState { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); transition: opacity .6s; }
#loadState .load-bar { width: 160px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
#loadState .load-bar i { display: block; height: 100%; width: 0; background: var(--accent, #8a6a2a); transition: width .3s; }
#loadState.done { opacity: 0; pointer-events: none; height: 0; overflow: hidden; }
.hero-over .hero-tap { font-size: 13px; opacity: .8; margin-top: 8px; letter-spacing: .02em; }

/* 场景结尾“继续探索” */
.keep-exploring { width: min(860px, 100%); margin: 36px auto 0; text-align: left; }
.ke-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
@media (max-width: 640px) { .ke-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ke-card:nth-child(3) { display: none; } }
.ke-card { display: block; color: inherit; text-decoration: none; }
.ke-pic { display: flex; aspect-ratio: 4 / 3; align-items: center; justify-content: center; background: var(--paper-2); border-radius: 6px; overflow: hidden; }
.ke-pic img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ke-why { display: block; font-size: 11px; color: var(--muted); margin-top: 8px; }
.ke-name { display: block; font-family: var(--serif); font-size: 16px; line-height: 1.3; }
/* 首页“继续你的旅程” */
.continue-card { display: flex; gap: 16px; align-items: center; color: inherit; text-decoration: none; padding: 12px; border: 1px solid var(--line); border-radius: 8px; max-width: 560px; }
.continue-card .continue-pic { position: relative; flex: none; display: block; }
.continue-card img { width: 120px; height: 90px; object-fit: contain; display: block; border-radius: 4px; }
.continue-card .type-tag { font-size: 9px; padding: 3px 5px; left: 3px; top: 3px; }
.continue-name { font-family: var(--serif); font-size: 19px; line-height: 1.3; display: block; }
.continue-meta { font-size: 12px; color: var(--muted); }
.visit-note { width: 100%; font-size: 13px; color: var(--muted); margin: 0 0 10px; }

/* 最后一屏：作品档案、关于画家等默认折叠 */
details.end-fold { width: min(860px, 100%); margin: 6px auto; border-top: 1px solid var(--line); }
details.end-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 0; margin: 0; }
details.end-fold > summary::-webkit-details-marker { display: none; }
details.end-fold > summary::after { content: '+'; font-family: var(--sans); font-size: 18px; color: var(--muted); }
details.end-fold[open] > summary::after { content: '−'; }
details.end-fold > :not(summary) { margin-top: 8px; }

/* ---------- 缩略图“等高不等宽”（site.js 的 justify）：同一行高度相同，宽度按原比例；画完整显示，方框和页面同色、没有灰底 ---------- */
.jrows { display: flex !important; flex-wrap: wrap; gap: 28px 20px; align-items: flex-start; }
@media (max-width: 559px) { .jrows { gap: 22px 12px; } }
.jrows > * { flex: none; min-width: 0; }
.jrows:not(.jready) > * { width: calc(50% - 10px); }
.jrows .pic, .jrows .art-pic { aspect-ratio: auto !important; background: transparent !important; border-radius: 0; overflow: visible; display: block; position: relative; }
.jrows .pic img, .jrows .art-pic img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; display: block; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.jrows .card-wrap > .card { display: block; }
/* 场景卡片左上角的体验类型 */
.type-tag { position: absolute; left: 6px; top: 6px; font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.9); color: #1c1c1e; letter-spacing: .02em; box-shadow: 0 1px 3px rgba(0,0,0,.2); pointer-events: none; }
.feature-pic, .continue-card, .ke-pic { position: relative; }

/* 首页首屏：“走进画里”更醒目 */
.hero-over .btn.hero-enter { font-size: 19px; padding: 15px 34px; border-radius: 999px; box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.18); letter-spacing: .02em; }
.hero-over .btn.hero-enter::after { content: ' →'; }
@media (prefers-reduced-motion: no-preference) { .hero-over .btn.hero-enter { animation: enterGlow 2.8s ease-in-out 1.5s 3; } }
@keyframes enterGlow { 0%, 100% { box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.18); } 50% { box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 0 9px rgba(255,255,255,.08); } }
.hero-over .hero-tap { font-size: 14px; opacity: .9; margin: 10px 0 2px; }

/* ---------- 中文正文用衬线体（宋体），和中文标题、英文正文统一；常规字重 400；颜色：中文 --ink（主），英文 --ink-en（次） ---------- */
.act-text p.zh, #card p.zh, .artist-bio p .zh, .about p.zh, .about p [lang="zh-CN"], .story-intro .zh, .story-outro .zh, .story-final .zh, .feature-intro .zh, .tl-text .zh, .guide-text .zh {
  font-family: var(--zh-text); font-weight: 400; color: var(--ink);
}
.act-text p.zh { font-size: 16px; }   /* 宋体比苹方看起来小一点，放大 1px */

/* ---------- 首页缩略图：和画家页一样“等高不等宽”，完整显示，不要方框和灰色空白 ---------- */
.feature .artist-cover.feature-pic { aspect-ratio: auto; background: none; box-shadow: none; border-radius: 0; overflow: visible; justify-self: center; width: fit-content; max-width: 100%; }
.feature .artist-cover.feature-pic img { width: auto; height: auto; max-width: 100%; max-height: min(64vh, 520px); object-fit: initial; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.doors.jrows .door-pic, .series-cards.jrows .artist-cover { box-shadow: none; border-radius: 0; }
.doors.jrows .door-name { font-size: 22px; }
.series-count { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.door-name .sep, .series-name .sep { display: none; }
body.lang-both .doors .door-name > .en { font-size: 15px; }
.series-cards.jrows .series-name { font-size: 16px; line-height: 1.35; }   /* 窄的画（竖幅）下面系列名也放得下一行 */
@media (max-width: 559px) { .series-cards.jrows .series-name { font-size: 15px; } }

/* 首页“第一次来？从这幅画开始”：本周新作下面一张小卡片 */
.section.first-time-wrap { padding-top: 0; border-top: 0; }
#new:has(+ #first-time) { padding-bottom: 24px; }
.continue-card.first-time { border-color: var(--accent); }
.continue-card.first-time .continue-meta { font-size: 13px; }
.continue-card.first-time img { width: auto; max-width: 120px; }
.first-time .continue-name .sep { display: none; }
body.lang-both .first-time .continue-name > .en { display: block; font-size: 15px; color: var(--muted); font-style: italic; }