/* 网站自带的字体（tools/fonts.py 只裁出网站里用到的字）。
   宋体：本机装了思源宋体就直接用本机的（local），没有才下载；楷体：只在没有系统楷体时才用到（霞鹜文楷） */
@font-face { font-family: "ZXS Serif"; font-weight: 300; font-display: swap; src: local("Noto Serif CJK SC Light"), local("NotoSerifCJKsc-Light"), url(../assets/fonts/serif-300.woff2) format("woff2"); }
@font-face { font-family: "ZXS Serif"; font-weight: 400; font-display: swap; src: local("Noto Serif CJK SC"), local("NotoSerifCJKsc-Regular"), url(../assets/fonts/serif-400.woff2) format("woff2"); }
@font-face { font-family: "ZXS Serif"; font-weight: 500; font-display: swap; src: local("Noto Serif CJK SC Medium"), local("NotoSerifCJKsc-Medium"), url(../assets/fonts/serif-500.woff2) format("woff2"); }
@font-face { font-family: "ZXS Serif"; font-weight: 600; font-display: swap; src: local("Noto Serif CJK SC SemiBold"), local("NotoSerifCJKsc-SemiBold"), url(../assets/fonts/serif-600.woff2) format("woff2"); }
@font-face { font-family: "ZXS Serif"; font-weight: 700; font-display: swap; src: local("Noto Serif CJK SC Bold"), local("NotoSerifCJKsc-Bold"), url(../assets/fonts/serif-700.woff2) format("woff2"); }
@font-face { font-family: "ZXS Kai"; font-weight: 300 500; font-display: swap; src: url(../assets/fonts/kai-400.woff2) format("woff2"); }
@font-face { font-family: "ZXS Kai"; font-weight: 501 900; font-display: swap; src: url(../assets/fonts/kai-600.woff2) format("woff2"); }

/* 纸、墨、宋体。界面跟路面一个调子：细线、等宽小字、楷体批注，不用毛玻璃和圆角卡片 */
body.v7 {
  --bg: #ebe5d8; --paper: #f6f2e9; --ink: #201e1b; --dim: rgba(32, 30, 27, .55); --line: rgba(32, 30, 27, .18);
  --serif: "ZXS Serif", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", serif;
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "ZXS Kai", serif;
  --gold: #a67c2a;
  font-family: var(--serif);
}
/* 课题组标志：水墨松树，纸色底。不规则圆角 + 一圈细墨线，像贴上去的一张小画 */
body.v7 #brand .mark.logo { width: 46px; height: 46px; display: block; object-fit: cover; background: #f6f2e8; border-radius: 9px 11px 8px 12px / 11px 8px 12px 9px; box-shadow: 0 0 0 1.5px rgba(32,30,27,.72), 2px 3px 0 rgba(32,30,27,.10); transform: rotate(-1.2deg); }
body.v7 #brand .lab { font-family: var(--serif); font-weight: 700; letter-spacing: .12em; }
body.v7 #badge {
  position: fixed; left: 50%; top: 22px; transform: translateX(-50%);
  font: 400 13px/1 var(--kai); letter-spacing: .12em; color: var(--dim);
  padding: 0 0 6px; border-bottom: 1px solid var(--line);
}
body.v7 #nav { opacity: 1; font-family: var(--serif); }
body.v7 #nav a { cursor: none; padding: 8px 0; }
body.v7 #nav a i { border-radius: 0; width: 14px; height: 1px; border: 0; background: currentColor; transition: width .4s var(--ease), background .3s; }
body.v7 #nav a.active i { width: 28px; background: var(--c); box-shadow: none; }
body.v7 #nav a.active { font-weight: 700; }
body.v7 #nav a small { font-family: var(--kai); font-size: 12px; }
body.v7 #progress { background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 94%, transparent), transparent); }
body.v7 #progress .readout b { font: 300 26px/1 var(--serif); }
body.v7 #progress .readout span { font: 400 13px/1 var(--kai); color: var(--dim); letter-spacing: .08em; }
body.v7 #progress .track { height: 1px; background: rgba(32, 30, 27, .3); }
body.v7 #progress .knob { width: 2px; height: 14px; margin: -7px 0 0 -1px; border-radius: 0; box-shadow: none; }
body.v7 #progress .tick { cursor: none; font-family: var(--serif); }
body.v7 #panel .tag { background: none; color: var(--c, var(--ink)); padding: 0; border-radius: 0; font: 500 11px/1 var(--mono); letter-spacing: .16em; }
body.v7 #panel .tag::before { content: ''; display: inline-block; width: 22px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 8px; }
body.v7 #panel h2 { font-weight: 600; font-size: 27px; letter-spacing: .03em; }
body.v7 #panel .meta { font: 400 14px/1.6 var(--kai); color: var(--dim); }
body.v7 #panel .body { font-family: var(--serif); font-size: 15px; line-height: 1.95; color: rgba(32,30,27,.86); text-align: justify; }
/* 详情面板：尽量把内容讲完整；图片一律原色，不加任何滤镜 */
/* 详情面板：一张手绘边框的纸。外框不滚动，里面 .scroll 滚动看全部内容 */
body.v7 #panel {
  top: 92px; right: 24px; width: min(460px, calc(100vw - 48px)); max-height: calc(100vh - 92px - 64px);
  display: flex; flex-direction: column; padding: 0; overflow: visible;
  background: none; backdrop-filter: none; box-shadow: none; border-radius: 0;
  opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 85% 0;
  transform: translate3d(28px, -6px, 0) rotate(1.6deg) scale(.96);
  transition: opacity .28s ease, transform .5s cubic-bezier(.4,0,.6,1), visibility 0s linear .5s;
  will-change: transform, opacity;
}
body.v7 #panel.open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: rotate(-.35deg);
  transition: opacity .36s ease, transform .75s cubic-bezier(.16,1,.3,1), visibility 0s;
}
/* 纸：略带不规则的圆角 + 一层错开的影子（像手边压着的一张纸） */
body.v7 #panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: #fbf8f1;
  border-radius: 6px 3px 7px 4px / 4px 7px 3px 6px;
  box-shadow: 5px 7px 0 rgba(32,30,27,.07), 0 26px 50px -30px rgba(40,30,20,.55);
}
body.v7 #panel .frame { position: absolute; left: -6px; top: -6px; overflow: visible; pointer-events: none; z-index: 1; }
body.v7 #panel .frame path { fill: none; stroke-linecap: round; }
body.v7 #panel .close { z-index: 3; top: 12px; right: 12px; width: 34px; height: 34px; padding: 6px; border-radius: 50%; cursor: none; transition: background .2s, transform .3s cubic-bezier(.2,.8,.2,1.4); }
body.v7 #panel .close svg { display: block; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; }
body.v7 #panel .close:hover { background: rgba(32,30,27,.06); transform: rotate(90deg); }
body.v7 #panel .scroll {
  position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 28px 30px 22px; scrollbar-width: thin; scrollbar-color: rgba(32,30,27,.28) transparent;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
}
body.v7 #panel .scroll.top-fade { -webkit-mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 28px), transparent); }
body.v7 #panel .scroll.end { -webkit-mask-image: none; mask-image: none; }
body.v7 #panel .scroll.top-fade.end { -webkit-mask-image: linear-gradient(transparent, #000 22px); mask-image: linear-gradient(transparent, #000 22px); }
body.v7 #panel .scroll::-webkit-scrollbar { width: 6px; }
body.v7 #panel .scroll::-webkit-scrollbar-thumb { background: rgba(32,30,27,.22); border-radius: 6px 3px 6px 4px; }
/* 内容依次浮上来；换一项时整块淡入 */
@keyframes pin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.v7 #panel.open .scroll > * { animation: pin .6s cubic-bezier(.16,1,.3,1) both; }
body.v7 #panel.open .scroll > .tag { animation-delay: .10s; }
body.v7 #panel.open .scroll > h2 { animation-delay: .15s; }
body.v7 #panel.open .scroll > .meta { animation-delay: .19s; }
body.v7 #panel.open .scroll > .body { animation-delay: .24s; }
body.v7 #panel.open .step { animation: pin .6s .3s cubic-bezier(.16,1,.3,1) both; }
body.v7 #panel h2 { margin-right: 30px; }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.v7 #panel .scroll.swap { animation: swap .45s cubic-bezier(.16,1,.3,1); }
/* 手绘的分隔线（一条轻微起伏的铅笔线） */
body.v7 #panel .step {
  position: relative; z-index: 2; margin: 0; padding: 14px 30px 18px; border-top: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 4' preserveAspectRatio='none'%3E%3Cpath d='M1 2.2 Q40 1 80 2.4 T160 2 T240 2.5 T299 1.8' fill='none' stroke='%23201e1b' stroke-opacity='.35' stroke-width='1.1'/%3E%3C/svg%3E") 30px 0 / calc(100% - 60px) 4px no-repeat;
}
body.v7 #panel .step button { border: 1.3px solid rgba(32,30,27,.45); border-radius: 14px 5px 12px 6px / 6px 12px 5px 14px; cursor: none; }
body.v7 #panel .body { margin-top: 16px; text-align: left; }
body.v7 #panel .body .lead { margin: 0 0 14px; text-align: justify; }
body.v7 #panel .body section { margin: 18px 0 0; }
body.v7 #panel .body h4 { margin: 0 0 8px; font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--c, var(--ink)); }
body.v7 #panel .body h4::before { content: ''; display: inline-block; width: 14px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 7px; }
body.v7 #panel .body .points { margin: 0; padding: 0 0 0 1.1em; font-size: 14.5px; line-height: 1.8; }
body.v7 #panel .body .points li::marker { color: var(--c, var(--ink)); }
body.v7 #panel .stats { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 16px 0 4px; }
body.v7 #panel .stats div { display: flex; flex-direction: column; gap: 4px; }
body.v7 #panel .stats b { font: 400 30px/1 var(--serif); color: var(--ink); }
body.v7 #panel .stats small { font-size: 13px; margin-left: 2px; color: var(--dim); }
body.v7 #panel .stats span { font: 400 12.5px/1.3 var(--kai); color: var(--dim); }
body.v7 #panel .figs { display: grid; gap: 10px; margin: 16px 0 0; }
body.v7 #panel .figs.n2 { grid-template-columns: 1fr 1fr; }
body.v7 #panel .figs.n3 { grid-template-columns: repeat(3, 1fr); }
body.v7 #panel figure { margin: 0; }
body.v7 #panel figure img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; background: #fff; padding: 4px; box-sizing: border-box; border: 1.4px solid rgba(32,30,27,.5); border-radius: 3px 7px 4px 6px / 6px 3px 7px 4px; box-shadow: 3px 4px 0 rgba(32,30,27,.06); filter: none; }
body.v7 #panel figure:nth-child(odd) img { transform: rotate(-.5deg); }
body.v7 #panel figure:nth-child(even) img { transform: rotate(.4deg); }
body.v7 #panel figcaption, body.v7 #panel .cap { margin: 6px 0 0; font: 400 12.5px/1.5 var(--kai); color: var(--dim); }
body.v7 #panel ul.rows { list-style: none; margin: 0; padding: 0; }
body.v7 #panel ul.rows li { display: grid; grid-template-columns: 4.6em 1fr auto; gap: 2px 10px; align-items: baseline; padding: 7px 0; border-top: 0; font-size: 14px; line-height: 1.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 4' preserveAspectRatio='none'%3E%3Cpath d='M1 2 Q50 1.1 100 2.3 T200 1.8 T299 2.2' fill='none' stroke='%23201e1b' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 100% 4px no-repeat; }
body.v7 #panel ul.rows li > i { font: normal 500 11.5px/1.6 var(--mono); color: var(--dim); }
body.v7 #panel ul.rows li > em { font-style: normal; font-size: 12.5px; color: var(--c, var(--ink)); text-align: right; white-space: nowrap; }
body.v7 #panel ul.rows li em small { display: block; font-size: 11px; color: var(--dim); }
body.v7 #panel ul.rows li span small { display: block; font: 400 12px/1.5 var(--kai); color: var(--dim); }
body.v7 #panel ul.rows li span b { font-weight: 600; margin-right: 8px; }
/* 联系方式：名字不折行；邮箱用等宽字，手画的虚线下划线，点了直接写邮件 */
body.v7 #panel ul.contact li { grid-template-columns: auto 1fr; }
body.v7 #panel ul.contact li > span { white-space: nowrap; font-family: var(--serif); }
body.v7 #panel ul.contact a { font: 500 13px/1.5 var(--mono); color: var(--c, var(--ink)); text-decoration: none; border-bottom: 1.3px dashed currentColor; cursor: none; transition: background .2s; }
body.v7 #panel ul.contact a:hover { background: color-mix(in srgb, var(--c, #201e1b) 12%, transparent); }
body.v7 #panel .j { font-family: var(--serif); font-style: italic; }
body.v7 #panel .chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
body.v7 #panel .chips span { padding: 4px 10px; font-size: 13.5px; line-height: 1.4; border: 1.2px solid rgba(32,30,27,.32); border-radius: 12px 4px 10px 5px / 5px 10px 4px 12px; background: rgba(255,255,255,.55); }
body.v7 #panel .chips span:nth-child(even) { border-radius: 5px 11px 4px 12px / 12px 4px 11px 5px; }
body.v7 #panel .doc { font-family: var(--serif); font-size: 15px; line-height: 1.7; }
body.v7 #panel .note { margin: 16px 0 0; padding-left: 10px; border-left: 2px solid var(--c, var(--ink)); font: 400 13px/1.6 var(--kai); color: var(--dim); }
body.v7 #panel .step button { font-family: var(--serif); }
body.v7 #cursor i { border-color: var(--ink); }
body.v7 #cursor span { font: 400 14px/1.35 var(--kai); border-radius: 0; background: var(--ink); letter-spacing: .04em; }
body.v7 #cursor.hot i { border-color: var(--ink); background: rgba(32,30,27,.06); border-style: dashed; }
body.v7 #loader { background: var(--bg); }
body.v7 #loader .name { font-weight: 600; letter-spacing: .14em; }
body.v7 #loader .what { font-family: var(--kai); font-size: 14px; }

/* ── 小实验台的弹层：换成纸面 ── */
body.v7 #lab.open .lab-back { background: rgba(235, 229, 216, .62); backdrop-filter: blur(6px) saturate(.8); }
body.v7 #lab .lab-panel { border-radius: 2px; background: #f6f2e9; box-shadow: 0 40px 80px -46px rgba(32, 30, 27, .5), 0 0 0 1px rgba(32, 30, 27, .55); }
body.v7 #lab .lab-panel::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(32, 30, 27, .16); pointer-events: none; }
body.v7 #lab .lab-stage { background: #f8f5ee; }
body.v7 #lab .lab-side { border-left: 1px solid rgba(32, 30, 27, .3); background: #f6f2e9; }
body.v7 #lab .lab-kicker { font-family: var(--serif); letter-spacing: .3em; }
body.v7 #lab .lab-title { font-weight: 700; letter-spacing: .04em; }
body.v7 #lab .lab-intro { font-family: var(--serif); color: rgba(32, 30, 27, .8); }
body.v7 #lab .lab-close { border-radius: 0; background: none; font-family: var(--serif); }
body.v7 #lab .lab-close:hover { background: #201e1b; color: #f6f2e9; }
body.v7 .lab-btn { border-radius: 0; border: 1px solid #201e1b; background: transparent; font-family: var(--serif); letter-spacing: .12em; }
body.v7 .lab-btn.primary { background: #201e1b; color: #f6f2e9; }
body.v7 .lab-btn:hover { background: var(--c); border-color: var(--c); color: #fff; }
body.v7 .lab-seg .row { border-radius: 0; background: none; border: 1px solid rgba(32, 30, 27, .35); }
body.v7 .lab-seg button { border-radius: 0; font-family: var(--serif); }
body.v7 .lab-seg button.on { background: #201e1b; color: #f6f2e9; box-shadow: none; }
body.v7 .lab-toggle { font-family: var(--serif); }

/* ── 目录：一条缩小的路（自上而下 = 路的方向） ──
   平时只有轴、点、年份、章号；鼠标指上去（.open）展开成一张纸：章名、四个研究方向的细线、方向图例 */
#map { position: fixed; left: 22px; top: 96px; bottom: 132px; width: 74px; z-index: 5; font-family: var(--serif); color: var(--ink); }
#map::before { content: ''; position: fixed; left: 0; top: 0; bottom: 0; width: 300px; background: linear-gradient(90deg, rgba(235,229,216,.96) 30%, rgba(235,229,216,.85) 55%, rgba(235,229,216,0)); pointer-events: none; z-index: -1; }
body.v7 #brand { z-index: 6; }
body.v7 #brand::before { content: ''; position: fixed; left: 0; top: 0; width: 420px; height: 110px; background: radial-gradient(ellipse at 0 0, rgba(235,229,216,.95) 30%, rgba(235,229,216,0) 70%); z-index: -1; pointer-events: none; }
#map .panel { position: absolute; left: -22px; top: -30px; bottom: -126px; width: 340px; background: rgba(246,242,233,.96); border-right: 1px solid rgba(32,30,27,.12);
  box-shadow: 24px 0 48px -30px rgba(40,30,20,.4); opacity: 0; transform: translateX(-14px); pointer-events: none; transition: opacity .2s, transform .28s cubic-bezier(.2,.7,.2,1); }
#map.open .panel { opacity: 1; transform: none; pointer-events: auto; }
#map .axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(32,30,27,.35); }
#map .lane { position: absolute; width: 2px; margin-left: -1px; background: color-mix(in srgb, var(--c) 45%, transparent); transition: opacity .35s; }
#map .dot, #map .st, #map .pl, #map .ch, #map .yr { position: absolute; cursor: none; }
#map .dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--c); opacity: .65; transition: transform .25s, opacity .25s, background .25s; }
#map .dot.img { border-radius: 0; width: 6px; height: 4px; margin: -2px 0 0 -3px; }
#map .dot:hover { transform: scale(2); opacity: 1; }
#map .st { font-size: 8px; line-height: 1; margin: -4px 0 0 -4px; color: var(--c); transition: transform .25s, opacity .25s, color .25s; }
#map .pl { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border: 1px dashed rgba(32,30,27,.45); transform: rotate(45deg); transition: opacity .25s; }
#map .pl.got { border: 0; background: #3d6f8c; }
#map .me { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 2px solid var(--ink); background: #f6f2e9; box-shadow: 0 0 0 3px rgba(246,242,233,.8); transition: left .2s; pointer-events: none; z-index: 1; }
#map .yr { right: calc(50% + 14px); font: 400 10px/1 var(--serif); color: var(--dim); transform: translateY(-50%); transition: color .25s; }
#map .yr:hover { color: var(--ink); }

/* 章：平时只有章号；走进新的一章，章名出来一会儿再退掉（.flash）；展开时章号让到研究方向线的右边，章名一条接一条滑出 */
#map .ch { left: calc(50% + 16px); display: flex; align-items: baseline; gap: 6px; white-space: nowrap; transform: translateY(-50%); transition: transform .32s cubic-bezier(.2,.7,.2,1); z-index: 1; }
#map.open .ch { transform: translate(30px, -50%); }
#map .ch b { font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--dim); transition: color .3s; }
#map .ch span { font: 400 12px/1 var(--serif); padding: 3px 5px; margin: -3px 0; opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .25s, background .25s; pointer-events: none; }
#map .ch small { font: 400 11px/1 var(--kai); color: var(--dim); margin-left: 6px; }
#map .ch.active b { color: var(--c); font-weight: 700; }
#map .ch.active span { font-weight: 700; }
#map .ch.flash span { opacity: 1; transform: none; background: rgba(246,242,233,.94); box-shadow: 0 6px 18px -12px rgba(40,30,20,.5); transition: opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1); }
#map.open .ch span { opacity: 1; transform: none; background: none; box-shadow: none; transition: opacity .3s cubic-bezier(.2,.7,.2,1) calc(80ms + var(--i) * 30ms), transform .3s cubic-bezier(.2,.7,.2,1) calc(80ms + var(--i) * 30ms); }

/* 研究方向：轴右边四根细线（从这个方向的第一页到最后一页），每一页一个小刻度；展开时从上往下一根接一根画出来 */
#map .trk { position: absolute; width: 7px; margin-left: -3.5px; cursor: none; opacity: 0; transform: scaleY(0); transform-origin: 50% 0; pointer-events: none;
  transition: transform .2s, opacity .15s; }
#map .trk::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--c); opacity: .55; transition: width .2s, margin .2s, opacity .2s; }
#map .trk i { position: absolute; left: 50%; width: 5px; height: 1.5px; margin: -.75px 0 0 -2.5px; background: var(--c); }
#map.open .trk { opacity: 1; transform: none; pointer-events: auto; transition: transform .55s cubic-bezier(.3,.6,.2,1) calc(60ms + var(--i) * 70ms), opacity .2s calc(60ms + var(--i) * 70ms); }
#map .trk.lit::before { width: 3px; margin-left: -1.5px; opacity: 1; }
#map .trk.lit i { width: 7px; margin-left: -3.5px; }
#map.dir .trk:not(.lit) { opacity: .22; }

/* 指到一个方向：别的点退淡，这个方向的点按先后一个接一个亮起来 */
#map.dir .dot:not(.lit), #map.dir .st:not(.lit), #map.dir .pl { opacity: .12; }
#map.dir .lane { opacity: .2; }
#map.dir .ch:not(.active) b { color: rgba(32,30,27,.3); }
#map .dot.lit { opacity: 1; background: var(--dc); transform: scale(1.45); transition-delay: var(--dl); box-shadow: 0 0 0 1.5px rgba(246,242,233,.9); }
#map .dot.img.lit { transform: scale(1.25); }
#map .st.lit { opacity: 1; color: var(--dc); transform: scale(1.4); transition-delay: var(--dl); }

/* 方向图例：展开时在轴下面 */
#map .legend { position: absolute; left: -6px; top: calc(100% + 18px); display: flex; flex-direction: column; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .2s, transform .25s; }
#map.open .legend { opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s .18s, transform .35s cubic-bezier(.2,.7,.2,1) .18s; }
#map .legend p { margin: 0 0 6px 4px; font: 500 10px/1 var(--mono); letter-spacing: .22em; color: var(--dim); }
#map .legend a { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 3px 10px 3px 4px; cursor: none; white-space: nowrap; color: #5d5850; transition: color .25s; }
#map .legend a i { flex: none; align-self: center; width: 12px; height: 2px; background: var(--c); transition: width .3s cubic-bezier(.2,.7,.2,1); }
#map .legend a span { font: 400 12.5px/1.2 var(--serif); }
#map .legend a small { font: 400 11px/1 var(--kai); color: var(--dim); }
#map .legend a:hover, #map .legend a.lit, #map .legend a.cur { color: var(--ink); }
#map .legend a:hover i, #map .legend a.lit i { width: 22px; }
#map .legend a::before { content: ''; position: absolute; left: -6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--c); transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
#map .legend a.cur::before { transform: scale(1); }

#map .tip { position: absolute; left: calc(50% + 14px); transform: translateY(-50%); background: var(--ink); color: #f6f2e9; font: 400 12px/1.3 var(--kai); padding: 4px 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 3; }
#map .tip.on { opacity: 1; }
@media (max-height: 760px) {
  #map { top: 88px; bottom: 120px; }
  #map .legend { top: calc(100% + 12px); }
  #map .legend a { padding-block: 2px; }
}
body.v7 #progress .track { display: none; }

/* ── 互动实验：实验台醒来时挂出的牌子（走进圈里会充满一圈再打开） ── */
#labtags { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.labtag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; cursor: none;
  background: #fdfbf6; border: 1.5px solid var(--c); border-radius: 3px; color: #201e1b; opacity: 0; transition: opacity .3s, background .3s;
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--c) 30%, transparent); font-family: var(--serif); white-space: nowrap; }
.labtag i { position: relative; font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; font-size: 10px; }
.labtag i svg { position: absolute; inset: -4px; width: 38px; height: 38px; transform: rotate(-90deg); }
.labtag i circle { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-dasharray: 94.3; stroke-dashoffset: calc(94.3 * (1 - var(--p, 0))); }
.labtag span { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.labtag small { font: 500 10px/1 var(--mono); letter-spacing: .18em; color: var(--c); }
.labtag b { font: 600 15px/1.1 var(--serif); }
.labtag em { font: 400 12px/1 var(--kai); font-style: normal; color: var(--dim); }
.labtag.in { background: color-mix(in srgb, var(--c) 12%, #fdfbf6); }
.labtag.in em::after { content: ' · 站住别动…'; color: var(--c); }
.labtag::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 1.5px; height: 9px; background: var(--c); }

/* ── 主角说的话：手写气泡 ── */
#say { position: fixed; left: 0; top: 0; z-index: 6; max-width: 300px; padding: 10px 14px 11px; pointer-events: none;
  background: #fdfbf6; border: 1.5px solid #201e1b; border-radius: 14px 14px 14px 3px; font: 400 15px/1.55 var(--kai); color: #201e1b;
  box-shadow: 3px 4px 0 rgba(32,30,27,.14); opacity: 0; transition: opacity .35s; margin-top: -14px; }
#say.on { opacity: 1; }
#say::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; background: #fdfbf6; border: 1.5px solid #201e1b; border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }

/* ── 纸飞机：计数 + 接到时展开的问答卡 + 收集本 ── */
#planes { position: fixed; right: 26px; top: 26px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: none;
  background: #fdfbf6; border: 1px solid rgba(32,30,27,.4); border-radius: 2px; font: 400 13px/1 var(--serif); color: #201e1b; transition: transform .3s; }
#planes svg { width: 16px; height: 16px; fill: none; stroke: #3d6f8c; stroke-width: 1.6; stroke-linejoin: round; }
#planes b { font: 600 13px/1 var(--mono); color: #3d6f8c; }
#planes.bump { transform: scale(1.15); }
#book { position: fixed; right: 26px; top: 66px; z-index: 6; width: 340px; max-height: 60vh; overflow: auto; padding: 14px 18px; background: #fdfbf6;
  border: 1px solid rgba(32,30,27,.4); box-shadow: 0 24px 50px -30px rgba(40,30,20,.55); display: none; }
#book.on { display: block; }
#book .h { margin: 0 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .16em; color: #3d6f8c; }
#book .it { padding: 9px 0; border-top: 1px solid rgba(32,30,27,.14); display: flex; flex-direction: column; gap: 4px; }
#book .it b { font: 600 14px/1.4 var(--serif); }
#book .it span { font: 400 13px/1.6 var(--kai); color: rgba(32,30,27,.75); }
#qa { position: fixed; left: 50%; bottom: 92px; z-index: 6; width: min(460px, calc(100vw - 32px)); padding: 16px 22px 18px; background: #fdfbf6;
  border: 1.5px solid #201e1b; box-shadow: 4px 5px 0 rgba(61,111,140,.3); transform: translate(-50%, 20px) rotate(-1deg); opacity: 0; pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1.2); }
#qa.on { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); pointer-events: auto; }
#qa .k { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: #3d6f8c; }
#qa h3 { margin: 8px 0 6px; font: 600 18px/1.4 var(--serif); }
#qa p { margin: 0; font: 400 15px/1.7 var(--kai); color: rgba(32,30,27,.82); }
#qa .x { position: absolute; right: 8px; top: 6px; border: 0; background: none; font: 400 20px/1 var(--serif); cursor: none; color: var(--dim); }

body.overlay #labtags, body.overlay #map, body.overlay #say, body.overlay #qa, body.overlay #planes, body.overlay #book { opacity: 0; pointer-events: none; }
@media (max-width: 720px) { #map { display: none; } #planes { right: 16px; top: 16px; } #book { right: 16px; width: calc(100vw - 32px); } }

/* ── 手机、平板 ── */
#gl { touch-action: none; }
html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
html.touch #cursor { display: none; }
html.touch, html.touch body, html.touch button, html.touch a { cursor: auto; }
#tocbtn { display: none; }
#toc { display: none; }
@media (max-width: 720px), (max-height: 520px) {
  #tocbtn { display: block; position: fixed; right: 14px; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 7; padding: 7px 12px; font: 400 13px/1 var(--serif); color: #201e1b;
    background: #fdfbf6; border: 1px solid rgba(32,30,27,.4); border-radius: 2px; }
  #toc { display: block; position: fixed; right: 14px; top: calc(96px + env(safe-area-inset-top, 0px)); z-index: 7; width: min(300px, calc(100vw - 28px)); max-height: calc(100dvh - 180px); overflow: auto;
    padding: 10px 14px 12px; background: #fdfbf6; border: 1px solid rgba(32,30,27,.4); box-shadow: 0 24px 50px -30px rgba(40,30,20,.55);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s, visibility 0s .25s; }
  #toc.on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s; }
  #toc .h { margin: 8px 0 4px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; color: var(--dim); }
  #toc a { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(32,30,27,.1); color: #201e1b; text-decoration: none; }
  #toc a b { font: 600 11px/1 var(--mono); color: var(--c); min-width: 18px; }
  #toc a span { font: 400 15px/1.35 var(--serif); }
  #toc a small { margin-left: 8px; font: 400 12px/1 var(--kai); color: var(--dim); }
  #toc.on a { animation: toc-in .32s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--k, 0) * 16ms); }
  @keyframes toc-in { from { opacity: 0; transform: translateY(-4px); } }
  #toc a.active span { font-weight: 700; }
  #toc a.active b { text-decoration: underline; text-underline-offset: 3px; }
  #toc a.dir.cur b i { width: 18px; }
  #toc a.dir b { align-self: center; display: flex; }
  #toc a.dir b i { display: block; width: 14px; height: 2px; background: var(--c); transition: width .3s; }

  body.v7 #brand { left: 14px; top: calc(12px + env(safe-area-inset-top, 0px)); gap: 9px; }
  body.v7 #brand .mark.logo { width: 36px; height: 36px; }
  body.v7 #brand .org { font-size: 9.5px; letter-spacing: .08em; }
  body.v7 #brand .lab { font-size: 14px; }
  body.v7 #brand::before { width: 260px; height: 80px; }
  #planes { right: 14px; top: calc(14px + env(safe-area-inset-top, 0px)); padding: 6px 10px; font-size: 12px; }
  #book { right: 14px; top: calc(56px + env(safe-area-inset-top, 0px)); width: calc(100vw - 28px); }

  body.v7 #progress { height: auto; min-height: 52px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 12px; align-items: center; }
  #progress .readout { min-width: 0; flex: none; }
  body.v7 #progress .readout b { font-size: 20px; }
  body.v7 #progress .readout span { font-size: 11.5px; }
  #progress .keys { white-space: normal; font-size: 10.5px; line-height: 1.6; letter-spacing: .02em; }

  /* 详情：从底部拉上来的一张纸，占屏幕下面大半 */
  body.v7 #panel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 80dvh; transform-origin: 50% 100%;
    transform: translate3d(0, 40px, 0); }
  body.v7 #panel.open { transform: none; }
  body.v7 #panel::before { border-radius: 10px 10px 0 0; }
  body.v7 #panel .frame { display: none; }
  body.v7 #panel .scroll { padding: 22px 18px 16px; }
  body.v7 #panel h2 { font-size: 22px; }
  body.v7 #panel .body { font-size: 15px; line-height: 1.85; }
  body.v7 #panel .step { padding: 10px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background-position: 18px 0; background-size: calc(100% - 36px) 4px; }
  body.v7 #panel .step button { padding: 9px 14px; }
  body.v7 #panel .close { top: 8px; right: 8px; width: 40px; height: 40px; }
  body.v7 #panel .figs.n3 { grid-template-columns: 1fr 1fr; }

  #say { max-width: min(260px, 70vw); font-size: 14px; }
  #qa { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); padding: 14px 16px 16px; }
  #qa h3 { font-size: 16px; }
  #qa p { font-size: 14px; }
  .labtag { padding: 6px 10px 6px 8px; gap: 8px; }
  .labtag b { font-size: 13px; }
  .labtag em { font-size: 11px; }
  #loader .inner { width: min(340px, 80vw); }

  /* 实验：整屏，上面画布、下面说明和控件 */
  #lab .lab-back { padding: 0; }
  #lab .lab-panel { width: 100%; height: 100%; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr); border-radius: 0; }
  body.v7 #lab .lab-side { border-left: 0; border-top: 1px solid rgba(32, 30, 27, .3); padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  #lab .lab-title { font-size: 21px; }
  #lab .lab-intro { font-size: 13.5px; line-height: 1.7; }
  #lab .lab-close { top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; width: 40px; height: 40px; background: rgba(246,242,233,.9); }
}
/* 横着拿的手机：屏幕矮，详情纸靠右、占满高度 */
@media (max-height: 520px) and (min-width: 600px) {
  body.v7 #panel { left: auto; width: min(420px, 55vw); max-height: 100dvh; top: 0; }
  #lab .lab-panel { grid-template-columns: 1fr minmax(260px, 40%); grid-template-rows: 1fr; }
  body.v7 #lab .lab-side { border-top: 0; border-left: 1px solid rgba(32, 30, 27, .3); }
  body.v7 #progress .keys { display: none; }
}