/* ============================================================
   胡侃比特 · 专栏样式
   设计原则：安静、克制、像一本认真排版的杂志
   ============================================================ */

:root {
  /* —— 地（茶白，2026-06-12 设计系统令牌回流）—— */
  --paper: #f6f1e7;
  --paper-2: #efe9dc;
  --card: #fcf9f2;
  --ink: #221e18;
  --ink-soft: #595247;
  --ink-faint: #8d8475;
  --line: #e7e0d2;
  --line-faint: #ece6da;  /* 私语级发丝线：卡片边缘首选 */
  --accent: #c2410c;
  --accent-ink: #9a3412;
  --accent-wash: rgba(194, 65, 12, 0.08);
  --celadon: #87a796;   /* 豆青/粉青：雍正单色釉的安静绿 */
  --good: #3f6f4f;
  --bad: #9c4036;
  --serif: "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --w-read: 42rem;
  --w-wide: 60rem;

  /* —— 动效令牌：呼吸（瓷器不变形，浮起只靠影与光）—— */
  --ease: cubic-bezier(0.33, 0, 0.2, 1);
  --ease-breath: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.3s;
  --dur: 0.35s;
  --dur-card: 0.45s;
  --dur-reveal: 0.9s;
  --t-card: box-shadow var(--dur-card) var(--ease-breath),
            border-color var(--dur-card) var(--ease-breath),
            background var(--dur-card) var(--ease-breath),
            opacity var(--dur-card) var(--ease-breath);

  /* —— 瓷器浮影（柔、散、暖；静止无影）—— */
  --shadow-lift: 0 4px 16px rgba(60, 44, 18, 0.05), 0 18px 50px rgba(60, 44, 18, 0.07);
  --shadow-pop: 0 4px 14px rgba(60, 44, 18, 0.05), 0 14px 38px rgba(60, 44, 18, 0.06);
  --shadow-warm: 0 6px 22px rgba(194, 65, 12, 0.14);

  --focus-ring: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17140f;
    --paper-2: #1f1b15;
    --card: #221e17;
    --ink: #e8e2d6;
    --ink-soft: #b3aa9a;
    --ink-faint: #7d7466;
    --line: #322d24;
    --line-faint: #2a261e;
    --accent: #f08c3e;
    --accent-ink: #f7a45c;
    --accent-wash: rgba(240, 140, 62, 0.12);
    --celadon: #7fa090;
    --good: #7fae8f;
    --bad: #cd7a6f;
    --shadow-lift: 0 18px 50px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 14px 38px rgba(0, 0, 0, 0.4);
    --shadow-warm: 0 6px 22px rgba(240, 140, 62, 0.16);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 17px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 2.05;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 瓷面噪点：极淡的纸纹颗粒（设计系统 v1 回流） ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  body::before { opacity: 0.6; }
}

a { color: inherit; }

::selection { background: var(--accent-wash); color: var(--accent-ink); }

/* 键盘焦点可达性：统一的焦点环 */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

input[type="range"]:focus-visible,
input[type="text"]:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- 阅读进度条 ---------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  /* 用 transform: scaleX 代替改 width：transform 由合成器处理，滚动每帧不再触发布局/重绘 */
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #e3b864, var(--accent));
  z-index: 50;
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ---------- 页头 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* 近实色背景，刻意不用 backdrop-filter：sticky 元素 + blur() 会在滚动时
     每帧把页头背后的区域重新做高斯模糊，是内容站滚动卡顿的头号原因（低端机尤甚）。 */
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  border-bottom: 1px solid var(--line);
}

.site-header .inner {
  position: relative;
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0.85rem 1.4rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.18em;
  text-decoration: none;
}

.brand .dot { color: var(--accent); }

.site-nav {
  display: flex;
  gap: 1.4rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.site-nav a:hover { color: var(--accent-ink); }
.site-nav a.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 6rem;
  padding: 2.5rem 1.4rem 3.5rem;
  font-family: var(--sans);
  font-size: 0.84rem;
  color: var(--ink-faint);
  line-height: 1.9;
}

.site-footer .inner {
  max-width: var(--w-wide);
  margin: 0 auto;
}

/* 底款：瓷器底部的款识——双方框里一枚 ₿，落在整页最末 */
/* 底款：素瓷阴刻——空心无色，双道细框，瓷器落款的本分 */
.site-footer .inner::after {
  content: "₿";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 2.4rem auto 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  outline: 1px solid var(--line);
  outline-offset: 3px;
  border-radius: 3px;
}

.site-footer .disclaimer {
  max-width: 36rem;
}

/* ---------- 首页 ---------- */
.hero {
  position: relative;
  z-index: 0;
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 5.5rem 1.4rem 3rem;
  text-align: center;
  /* 暖光晕：像炉火，让人想留下来 */
  background: radial-gradient(ellipse 72% 56% at 50% 36%, var(--accent-wash), transparent 72%);
}

/* 复古未来主义轨道徽记：三道椭圆轨道缓慢自转，像原子时代的太空徽章 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(540px, 88vw);
  height: min(540px, 88vw);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%238d8475' stroke-width='1'%3E%3Cellipse cx='300' cy='300' rx='292' ry='104'/%3E%3Cellipse cx='300' cy='300' rx='292' ry='104' transform='rotate(60 300 300)'/%3E%3Cellipse cx='300' cy='300' rx='292' ry='104' transform='rotate(120 300 300)'/%3E%3Ccircle cx='592' cy='300' r='3.5' fill='%238d8475' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.12;
  z-index: -1;
  pointer-events: none;
  animation: ring-wake 2.6s var(--ease-breath) 1, orbit-drift 110s linear infinite;
}

/* 轨道中心：一块发热的能量锭。
   黑体辐射色温——顶部炽金、中段熔橙、底部深红余烬；
   以 6.5s 的节奏缓慢"呼吸散热"。每一枚币都是凝固的焦耳。 */
.hero::after {
  content: "₿";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: clamp(10rem, 26vw, 15rem);
  font-weight: 400;
  line-height: 1;
  background:
    linear-gradient(115deg, transparent 42%, rgba(255, 246, 216, 0.5) 50%, transparent 58%),
    linear-gradient(180deg, #f6dc9a 0%, #ddae54 46%, #7c4a1d 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 220% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(221, 174, 84, 0.4)) drop-shadow(0 0 90px rgba(180, 120, 30, 0.25));
  opacity: 0.22;
  z-index: -1;
  pointer-events: none;
  animation:
    power-on 3s var(--ease-breath) 1,
    thermal-breathe 6.5s ease-in-out 3s infinite,
    gold-glint 9s linear 3.4s infinite;
}

/* 通电：能量缓缓注入——一次轻颤，然后绽亮落定 */
@keyframes power-on {
  0% { opacity: 0.02; }
  45% { opacity: 0.09; }
  58% { opacity: 0.05; }   /* 灯丝轻颤一下 */
  72% { opacity: 0.20; }   /* 绽亮 */
  100% { opacity: 0.16; }  /* 落定，交给呼吸 */
}

@keyframes power-on-dark {
  0% { opacity: 0.03; }
  45% { opacity: 0.13; }
  58% { opacity: 0.07; }
  72% { opacity: 0.30; }
  100% { opacity: 0.24; }
}

@keyframes ring-wake {
  from { opacity: 0; }
}

/* 光泽：每九秒一道展柜灯掠过金锭 */
@keyframes gold-glint {
  0% { background-position: 220% 0, 0 0; }
  14% { background-position: -140% 0, 0 0; }
  100% { background-position: -140% 0, 0 0; }
}

@keyframes thermal-breathe {
  0%, 100% { opacity: 0.16; }
  50% { opacity: 0.26; }
}

@keyframes orbit-drift { to { transform: rotate(360deg); } }

@media (prefers-color-scheme: dark) {
  .hero::before { opacity: 0.16; }
  .hero::after {
    background:
      linear-gradient(115deg, transparent 42%, rgba(255, 248, 222, 0.65) 50%, transparent 58%),
      linear-gradient(180deg, #ffe9b0 0%, #ecbd62 46%, #9c601f 100%);
    background-size: 260% 100%, 100% 100%;
    background-position: 220% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(236, 189, 98, 0.6)) drop-shadow(0 0 110px rgba(236, 189, 98, 0.32));
    animation-name: power-on-dark, thermal-breathe-dark, gold-glint;
  }
  @keyframes thermal-breathe-dark {
    0%, 100% { opacity: 0.24; }
    50% { opacity: 0.38; }
  }
}

.hero .kicker {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  color: var(--accent-ink);
  margin: 0 0 1.6rem;
}

.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 1.2rem;
  line-height: 1.25;
}

.hero .sub {
  max-width: 34rem;
  margin: 0 auto 2.2rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 0 2.4rem;
}

.hero .epigraph {
  font-style: normal;
  color: var(--ink-faint);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
}

.chain-cap {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0.9rem 0 0;
}

.hero-chain {
  margin: 2.6rem auto 0;
  display: block;
  max-width: 320px;
  width: 60%;
  color: var(--ink-faint);
}

.hero-chain .block-shape {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.hero-chain .block-link { stroke: var(--celadon); stroke-width: 1.5; }

.draw {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw 2.8s ease forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

.section-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  text-align: center;
  margin: 7rem 0 0.4rem;
}

.section-title {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  margin: 0 0 2.4rem;
}

/* 三步上手（设计参考：每屏一个主行动、三步到首次成功、学习即进度） */
.steps3 {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 1.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.step-card {
  display: block;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  transition:
    border-color 0.3s var(--ease-breath),
    transform 0.3s var(--ease-breath),
    box-shadow 0.3s var(--ease-breath);
}

.step-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.step-card .step-num {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--accent);
  font-weight: 700;
}

.step-card h3 {
  margin: 0.5rem 0 0.4rem;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
}

.step-card p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.8;
}

.step-status {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.14rem 0.62rem;
}

.step-card.done { border-color: color-mix(in srgb, var(--good) 45%, transparent); }

.step-card.done .step-status {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
  background: rgba(63, 111, 79, 0.07);
}

.steps-trust {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin: 1.4rem 0 0;
  padding: 0 1.4rem;
}

/* 阅读进度（有进度才出现，不骚扰新访客） */
.read-progress {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--good);
  margin: -1.6rem 0 1.8rem;
}

/* 已读标签 */
.tags .tag.done {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
  background: rgba(63, 111, 79, 0.07);
}

/* 文章目录 */
.toc {
  max-width: var(--w-read);
  margin: 0 auto;
  padding: 0 1.4rem;
  list-style: none;
}

.toc li { margin-bottom: 1.1rem; }

.toc a {
  display: flex;
  gap: 1.3rem;
  align-items: baseline;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line-faint);
  border-radius: 10px;
  padding: 1.5rem 1.7rem;
  transition:
    border-color 0.3s var(--ease-breath),
    transform 0.3s var(--ease-breath),
    box-shadow 0.3s var(--ease-breath),
    background 0.3s;
}

.toc a:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

@media (prefers-color-scheme: dark) {
  .toc a:hover {
    background: color-mix(in srgb, var(--card) 91%, #fff);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  }
}

.toc .num {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--accent);
  font-weight: 700;
  min-width: 2.4rem;
  line-height: 1.4;
  transition: color 0.3s;
}

.toc a:hover .num { color: var(--accent-ink); }

.toc h3 {
  margin: 0 0 0.3rem;
  font-size: 1.12rem;
  letter-spacing: 0.05em;
}

.toc p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.8;
}

.toc .meta {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ---------- 元信息标签（Tag 胶囊） ---------- */
/* 注意：.lab-card 内部已有另一个 .tag，故此组件一律以 .tags 容器作用域 */
.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.tags .tag {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.14rem 0.62rem;
  white-space: nowrap;
  transition: border-color 0.3s, color 0.3s;
}

.tags .tag.accent {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-wash);
}

.toc .tags { margin-top: 0.8rem; }

.article .tags { margin: 0 0 2.6rem; }

/* 实验室预告 */
.lab-teaser {
  max-width: var(--w-read);
  margin: 0 auto;
  padding: 0 1.4rem;
  text-align: center;
}

.lab-teaser .chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 1.8rem 0 2.2rem;
}

.chip {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.chip:active { opacity: 0.8; }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: none;
  border-radius: 8px;
  padding: 0.8rem 1.9rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.btn:hover { background: var(--accent-ink); }
.btn:active { opacity: 0.8; }

.btn.warm { background: var(--accent); box-shadow: var(--shadow-warm); }
.btn.warm:hover { background: var(--accent-ink); }

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn.ghost:hover { border-color: var(--accent); color: var(--accent-ink); }

/* 首页黄历区块容器 */
.alm-wrap {
  max-width: var(--w-read);
  margin: 0 auto;
  padding: 0 1.4rem;
}

/* 关于 */
.about {
  max-width: 36rem;
  margin: 0 auto;
  padding: 0 1.4rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.about p { margin: 0 0 1.2em; }

/* ---------- 文章页 ---------- */
.article {
  position: relative;
  z-index: 0;
  max-width: var(--w-read);
  margin: 0 auto;
  padding: 4.5rem 1.4rem 0;
}

/* 章首水印：页眉右上一枚微微发热的 ₿（阅读页保持安静，不呼吸） */
.article::before {
  content: "₿";
  position: absolute;
  top: 2.6rem;
  right: -0.6rem;
  font-family: var(--serif);
  font-size: 8.5rem;
  line-height: 1;
  background: linear-gradient(180deg, #f0d690, #d6a64c 50%, #7c4a1d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(214, 166, 76, 0.28));
  opacity: 0.09;
  z-index: -1;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .article::before { opacity: 0.14; filter: drop-shadow(0 0 26px rgba(240, 140, 62, 0.4)); }
}

.article .kicker {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.3em;
  color: var(--accent-ink);
  margin: 0 0 1.1rem;
}

.article h1 {
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin: 0 0 1.4rem;
}

.article .epigraph {
  color: var(--ink-faint);
  font-size: 0.95rem;
  margin: 0 0 0.8rem;
  line-height: 2;
}

.article .meta {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0 0 2.6rem;
}

/* 弦纹：单道私语级发丝线（设计系统 v1） */
.rule {
  border: none;
  height: 1px;
  background: var(--line-faint);
  margin: 0 0 3.5rem;
}

.prose h2 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin: 4rem 0 1.6rem;
  padding-top: 0.4rem;
  line-height: 1.5;
}

.prose h2::before {
  content: "";
  display: block;
  width: 1.6rem;
  height: 1px;
  background: linear-gradient(90deg, #e3b864, #9c6b28);
  opacity: 0.9;
  margin-bottom: 1.3rem;
}

.prose p {
  margin: 0 0 1.5em;
  text-align: justify;
  text-wrap: pretty;
  line-height: 2.05;
}

.prose strong { font-weight: 700; }

.prose blockquote {
  margin: 2.2rem 0;
  padding: 0.3rem 0 0.3rem 1.4rem;
  border-left: 3px solid var(--celadon);
  color: var(--ink-soft);
  font-size: 1.0rem;
}

.prose blockquote p { margin-bottom: 0.6em; }
.prose blockquote cite {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.5rem;
}

.pull {
  text-align: center !important;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 2.6rem 0 !important;
  color: var(--accent-ink);
  line-height: 2;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.88rem;
  font-family: var(--sans);
  line-height: 1.7;
}

.prose th {
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  border-bottom: 2px solid var(--line);
  padding: 0.6rem 0.7rem;
}

.prose td {
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0.7rem;
  vertical-align: top;
}

.prose tr:hover td { background: var(--accent-wash); }

.table-scroll { overflow-x: auto; }

.prose pre {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.prose .footnote {
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* 要点回顾 */
.takeaways {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.7rem 2rem;
  margin: 3.5rem 0 0;
}

.takeaways h3 {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--accent-ink);
}

.takeaways ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.takeaways li { margin-bottom: 0.55rem; }

/* 实验室引导卡 */
.lab-card {
  display: block;
  text-decoration: none;
  border: 1px dashed var(--accent);
  background: var(--accent-wash);
  border-radius: 10px;
  padding: 1.4rem 1.8rem;
  margin: 2.2rem 0 0;
  transition:
    transform 0.3s var(--ease-breath),
    box-shadow 0.3s var(--ease-breath);
}

.lab-card:hover { box-shadow: var(--shadow-pop); }

.lab-card .tag {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  color: var(--accent-ink);
  display: block;
  margin-bottom: 0.45rem;
}

.lab-card .title { font-weight: 700; font-size: 1.02rem; }

.lab-card .desc {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* 互动游戏挂载点（具体游戏样式见 games.css） */
.game-embed { margin-top: 1.6rem; }

.game-embed .game-fallback {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 1.3rem 1.4rem;
  text-align: center;
  margin: 0;
}

/* 上一篇 / 下一篇 */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 3.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.86rem;
}

.pager a {
  text-decoration: none;
  color: var(--ink-soft);
  max-width: 46%;
  transition: color 0.2s;
}

.pager a:hover { color: var(--accent-ink); }

.pager .dir {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}

.pager .next { text-align: right; margin-left: auto; }

/* ---------- 实验室 ---------- */
.lab-main {
  max-width: var(--w-read);
  margin: 0 auto;
  padding: 4.5rem 1.4rem 0;
}

.lab-main > .intro {
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.lab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.8rem 0 3.5rem;
}

.experiment {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2rem 2.1rem 2.2rem;
  margin-bottom: 2.6rem;
  scroll-margin-top: 5rem;
}

.experiment .exp-kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--accent-ink);
  margin: 0 0 0.6rem;
}

.experiment h2 {
  margin: 0 0 0.9rem;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}

.experiment .exp-desc {
  color: var(--ink-soft);
  font-size: 0.93rem;
  margin: 0 0 1.6rem;
}

.experiment .exp-desc a { color: var(--accent-ink); }

.panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  font-family: var(--sans);
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  margin-bottom: 1.1rem;
  font-size: 0.86rem;
}

.control-row label { color: var(--ink-soft); }

.control-row .val {
  font-weight: 700;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 140px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--paper);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
}

input[type="text"], textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  outline: none;
}

input[type="text"]:focus, textarea:focus { border-color: var(--accent); }

textarea { resize: vertical; min-height: 4.2rem; }

.big-stat {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0.4rem 0 0.2rem;
}

.stat-note { font-size: 0.82rem; color: var(--ink-soft); margin: 0; line-height: 1.8; }

.stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.6rem;
  margin-top: 1rem;
}

.stat-grid .cell .label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.2rem;
}

.stat-grid .cell .value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hash-out {
  font-family: var(--mono);
  font-size: 0.78rem;
  word-break: break-all;
  line-height: 1.9;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-top: 0.9rem;
}

.hash-out .changed { color: var(--accent-ink); font-weight: 700; }
.hash-out .zero { color: var(--good); font-weight: 700; }

.mini-chart { width: 100%; height: auto; display: block; margin-top: 1.2rem; }
.mini-chart .axis { stroke: var(--line); stroke-width: 1; }
.mini-chart .curve { stroke: var(--accent); stroke-width: 2; fill: none; }
.mini-chart .area { fill: var(--accent-wash); }
.mini-chart text { font-family: var(--sans); font-size: 10px; fill: var(--ink-faint); }
.mini-chart .marker { fill: var(--accent); }

.ledger {
  margin-top: 1.2rem;
  font-size: 0.82rem;
  max-height: 16rem;
  overflow-y: auto;
}

.ledger .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px dashed var(--line);
  font-variant-numeric: tabular-nums;
  animation: fadein 0.5s ease;
}

.ledger .row .r-label { color: var(--ink-soft); }

@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mining-log {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.8;
  color: var(--ink-faint);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-top: 1rem;
  min-height: 5.2rem;
  word-break: break-all;
}

.success-card {
  margin-top: 1rem;
  border: 1px solid var(--good);
  background: rgba(63, 111, 79, 0.08);
  color: var(--good);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  font-size: 0.86rem;
  line-height: 1.9;
  word-break: break-all;
  animation: fadein 0.5s ease;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.seg button {
  font-family: var(--sans);
  font-size: 0.82rem;
  border: none;
  background: var(--card);
  color: var(--ink-soft);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: #fff; }

/* 测验 */
.quiz-q { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; margin: 0 0 1.1rem; line-height: 1.9; }

.quiz-opts { display: grid; gap: 0.6rem; }

.quiz-opts button {
  font-family: var(--serif);
  font-size: 0.95rem;
  text-align: left;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.quiz-opts button:hover:not(:disabled) { border-color: var(--accent); }
.quiz-opts button.correct { border-color: var(--good); background: rgba(63, 111, 79, 0.1); }
.quiz-opts button.wrong { border-color: var(--bad); background: rgba(156, 64, 54, 0.08); }
.quiz-opts button:disabled { cursor: default; }

.quiz-expl {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  line-height: 1.9;
  animation: fadein 0.4s ease;
}

.quiz-meta { font-size: 0.78rem; color: var(--ink-faint); margin: 0 0 1rem; letter-spacing: 0.08em; }

/* ---------- 点击涟漪：每次点击，一圈细线如声呐在指尖荡开 ---------- */
.click-ping {
  position: fixed;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.45;
  transform: scale(0.18);
  animation: ping-out 0.55s var(--ease-breath) forwards;
}

@keyframes ping-out {
  to { transform: scale(1.2); opacity: 0; }
}

/* 按下：瓷器不变形，以微暗示意（涟漪负责位置反馈） */
.toc a:active,
.step-card:active,
.lab-card:active { opacity: 0.9; }

/* ---------- 进场动画 ---------- */
.reveal {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-breath);
}

.reveal.visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transition: none; }
  .draw { animation: none; stroke-dashoffset: 0; }
  .hero::before { animation: none; }
  .hero::after { animation: none; }
  .click-ping { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .brand { font-size: 1.3rem; }
  .hero { padding-top: 3.5rem; }
  .steps3 { grid-template-columns: 1fr; }
  .toc a { flex-direction: column; gap: 0.4rem; padding: 1.2rem 1.3rem; }
  .toc .num { min-width: 0; font-size: 1.3rem; }
  .experiment { padding: 1.4rem 1.2rem 1.6rem; }
  .panel { padding: 1.1rem 1rem; }
  .site-nav { gap: 0.9rem; }
}

/* ============================================================
   货币文明长廊（gallery.html）· 巴洛克暗厅
   无论系统明暗，长廊永远是暗的——灯很暗，是故意的。
   ============================================================ */
body.gallery-page {
  --paper: #14100c;
  --paper-2: #1b1611;
  --card: #1e1812;
  --ink: #e9e0d0;
  --ink-soft: #b5a98f;
  --ink-faint: #80755f;
  --line: #362d21;
  --accent: #f08c3e;
  --accent-ink: #f7a45c;
  --accent-wash: rgba(240, 140, 62, 0.12);
  --celadon: #7fa090;
  background: var(--paper);
}

.gx-main {
  max-width: var(--w-read);
  margin: 0 auto;
  padding: 4.5rem 1.4rem 0;
}

.gx-foreword {
  color: var(--ink-soft);
  font-size: 1.0rem;
  line-height: 2.1;
  margin: 0 0 1rem;
}

.gx-motto {
  text-align: center;
  color: var(--accent-ink);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  margin: 2.2rem 0 0;
  line-height: 2.2;
}

/* 展柜：黑暗中的一束侧光（卡拉瓦乔） */
.gx-exhibit {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2.2rem 2.1rem 2rem;
  margin: 3rem 0;
  overflow: hidden;
  scroll-margin-top: 5rem;
}

.gx-exhibit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 48% at 18% -6%, rgba(240, 140, 62, 0.1), transparent 70%);
  pointer-events: none;
}

.gx-no {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  margin: 0 0 1.2rem;
}

/* 单线插画展台 */
.gx-art {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.6rem;
  flex-wrap: wrap;
  padding: 1.4rem 0 1.8rem;
}

.gx-art svg { display: block; }
.gx-art .stroke {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px rgba(240, 140, 62, 0.35));
}

.gx-art-cap {
  display: block;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-top: 0.7rem;
}

.gx-glyph-big {
  font-family: var(--serif);
  font-size: 5.2rem;
  line-height: 1.15;
  color: var(--ink);
  text-align: center;
  text-shadow: 0 0 22px rgba(240, 140, 62, 0.22);
}

/* 博物馆铭牌 */
.gx-plate {
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
  font-family: var(--sans);
}

.gx-plate .gx-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.35rem;
  color: var(--ink);
}

.gx-plate .gx-meta {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

.gx-plate .gx-desc {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 2.05;
  margin: 0;
  text-align: justify;
}

/* 贝部字族 */
.gx-family {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.3rem 0 0.9rem;
}

.gx-char {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.55rem 0.7rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.gx-char:hover { border-color: var(--accent); box-shadow: 0 0 12px rgba(240, 140, 62, 0.18); }

.gx-char.on {
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(240, 140, 62, 0.22);
}

.gx-family-note {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 2;
  min-height: 4em;
  border-left: 3px solid var(--celadon);
  padding-left: 1rem;
  margin: 0;
}

.gx-family-note .gx-word { color: var(--accent-ink); font-weight: 700; }

/* 第纳尔滑块 */
.gx-silver-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 0.4rem 0 0.8rem;
}

.gx-silver-stat {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 3.4em;
  text-align: right;
}

.gx-era {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--accent-ink);
  background: var(--accent-wash);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  line-height: 1.9;
  min-height: 3.4em;
}

/* 活展品 ₿ */
.gx-live {
  font-family: var(--serif);
  font-size: clamp(4.8rem, 14vw, 7rem);
  line-height: 1.1;
  text-align: center;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 250, 235, 0.9) 50%, transparent 62%),
    linear-gradient(165deg, #fff0cf 0%, #ffc879 26%, #f6993f 58%, #e0701f 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 220% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(246, 153, 63, 0.55)) drop-shadow(0 0 46px rgba(255, 200, 120, 0.3));
  animation:
    gx-live-breathe 6.5s ease-in-out infinite,
    gold-glint 7s linear 1.2s infinite;
}

/* 活展品 ₿：珠光呼吸——光晕由内而外，一胀一收，器身不动 */
@keyframes gx-live-breathe {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(246, 153, 63, 0.5)) drop-shadow(0 0 42px rgba(255, 200, 120, 0.26)); }
  50% { filter: drop-shadow(0 0 26px rgba(246, 153, 63, 0.72)) drop-shadow(0 0 66px rgba(255, 200, 120, 0.42)); }
}

@media (prefers-color-scheme: dark) {
  .gx-live {
    background:
      linear-gradient(115deg, transparent 38%, rgba(255, 252, 240, 0.95) 50%, transparent 62%),
      linear-gradient(165deg, #ffeaba 0%, #ffc879 28%, #f6993f 60%, #d9692a 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 220% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.gx-height {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  margin: 0.6rem 0 0;
}

.gx-exit {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 2.2;
  margin: 3.5rem 0 0;
}

@media (max-width: 600px) {
  .gx-exhibit { padding: 1.5rem 1.2rem 1.5rem; }
  .gx-art { gap: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gx-live { animation: none; }
}

/* ============================================================
   布道厅 · 中本聪文献（satoshi.html）
   1979 年的琥珀磷光终端：高级橙色赛博朋克的史实原型。
   ============================================================ */
body.satoshi-page {
  --paper: #0c0907;
  --paper-2: #141008;
  --card: #16110a;
  --ink: #e8c79c;
  --ink-soft: #c2a071;
  --ink-faint: #8a6f4a;
  --line: #3a2d1a;
  --accent: #ffb056;
  --accent-ink: #f5a045;
  --accent-wash: rgba(255, 176, 86, 0.1);
  --celadon: #7fa090;
  background: var(--paper);
}

/* CRT：扫描线 + 暗角，克制到几乎察觉不到 */
body.satoshi-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.09) 2px 3px),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 62%, rgba(0, 0, 0, 0.32) 100%);
}

.st-main {
  max-width: var(--w-read);
  margin: 0 auto;
  padding: 4.5rem 1.4rem 0;
  font-family: var(--mono);
}

.st-head {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  letter-spacing: 0.14em;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(255, 176, 86, 0.45);
  margin: 0 0 0.8rem;
  font-weight: 400;
}

.st-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  background: var(--accent);
  vertical-align: -0.12em;
  box-shadow: 0 0 10px rgba(255, 176, 86, 0.7);
  animation: st-blink 1.1s steps(1) infinite;
}

@keyframes st-blink { 50% { opacity: 0; } }

.st-meta {
  font-size: 0.72rem;
  line-height: 2;
  color: var(--ink-faint);
  margin: 0 0 2.2rem;
}

.st-meta a { color: var(--ink-soft); }

/* 主题滤波器 */
.st-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2.4rem;
}

.st-filter {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.st-filter:hover { border-color: var(--accent); color: var(--accent); }

.st-filter.on {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(255, 176, 86, 0.25), inset 0 0 8px rgba(255, 176, 86, 0.08);
}

/* 传输条目 */
.st-entry {
  border-left: 2px solid var(--line);
  padding: 0.2rem 0 0.2rem 1.3rem;
  margin: 0 0 2.6rem;
  transition: border-color 0.3s, opacity 0.3s;
}

.st-entry:hover { border-left-color: var(--accent); }
.st-entry.dim { opacity: 0.18; }

.st-log {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
}

.st-log .st-theme {
  color: var(--accent-ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.06rem 0.45rem;
  margin-left: 0.6rem;
}

.st-en {
  font-size: 0.88rem;
  line-height: 1.95;
  color: var(--ink);
  text-shadow: 0 0 8px rgba(255, 176, 86, 0.22);
  margin: 0 0 0.7rem;
  word-break: break-word;
}

.st-zh {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 2.05;
  color: var(--ink-soft);
  margin: 0;
}

.st-note {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.9;
  color: var(--ink-faint);
  border-left: 2px solid var(--celadon);
  padding-left: 0.8rem;
  margin: 0.8rem 0 0;
}

.st-hex {
  font-size: 0.62rem;
  line-height: 1.8;
  color: var(--ink-faint);
  word-break: break-all;
  opacity: 0.75;
  margin: 0 0 0.6rem;
}

/* PGP 式告别框 */
.st-pgp {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-2);
  padding: 1.1rem 1.3rem;
  margin: 0.6rem 0 0;
  box-shadow: inset 0 0 24px rgba(255, 176, 86, 0.04);
}

.st-pgp .st-pgp-rule {
  font-size: 0.66rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* 永恒的提示符 */
.st-prompt {
  margin: 3rem 0 0;
  font-size: 1rem;
  color: var(--accent);
}

.st-epitaph {
  font-family: var(--serif);
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 2.2;
  margin: 2.6rem 0 0;
}

@media (max-width: 600px) {
  .st-entry { padding-left: 0.9rem; margin-bottom: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .st-cursor { animation: none; }
}

/* ============================================================
   创世拓片（首页）：第 0 区块 = 一方碑
   墨色碑面固定不随明暗模式变化——砚是砚，纸是纸。
   ============================================================ */
.gen-wrap {
  max-width: var(--w-read);
  margin: 0 auto;
  padding: 0 1.4rem;
}

.gen-stele {
  background: #15110c;
  border: 1px solid #3a2f20;
  border-radius: 12px;
  padding: 1.8rem 1.9rem 1.6rem;
}

/* 厚重感 + 哲学的开场白：平实的话，先讲清「第 0 块为何厚重」 */
.gen-lead {
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 2.05;
  color: #d8c8a6;
  margin: 0 0 1.6rem;
}
.gen-lead strong { color: #f0dca8; font-weight: 600; }

.gen-meta {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #8a7a5e;
  margin: 0 0 1.2rem;
}

.gen-hint {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: #8a7a5e;
  margin: 0 0 1rem;
}

/* —— 完整区块转储：机器的呓语里，浮出一句人话（艺术显影；不刺眼、不吓人） —— */
.gen-dump {
  font-family: var(--mono);
  font-size: clamp(0.5rem, 1.5vw, 0.64rem);
  line-height: 2.15;
  letter-spacing: 0.06em;
  color: #4a4030;                 /* 底纹：很暗，像褪色的刻痕 */
  margin: 1.5rem 0;
  padding: 1.3rem 1.3rem 1.2rem;
  border-radius: 10px;
  overflow-x: auto;
  cursor: default;
  white-space: nowrap;
  background:
    radial-gradient(115% 80% at 50% 46%, rgba(255, 198, 112, 0.06), transparent 62%),
    #0e0a06;                       /* 暗底盘 + 中心一缕暖晕，把目光引进去 */
  box-shadow: inset 0 0 0 1px rgba(255, 222, 160, 0.05), inset 0 14px 40px rgba(0, 0, 0, 0.5);
}
.gen-row { display: flex; }
.gen-off { color: #342b1d; flex: none; margin-right: 1.3em; }   /* 地址列：最暗，纯背景质感 */
.gen-bytes { flex: none; }
.gen-bytes span { margin-right: 0.5em; transition: color 0.55s var(--ease-breath), text-shadow 0.55s var(--ease-breath), opacity 0.55s; }
.gen-bytes span.gap { margin-right: 1.05em; }
.gen-ascii { flex: none; margin-left: 1.5em; color: #3a3122; }
.gen-ascii span { transition: color 0.55s var(--ease-breath), text-shadow 0.55s var(--ease-breath); }

/* 显影：那 69 个字节升温走到光里——暖金「宝光」，从噪声中浮起 */
span.gen-m.lit { color: #f7c66a; text-shadow: 0 0 13px rgba(255, 184, 92, 0.6), 0 0 5px rgba(255, 212, 140, 0.8); }
.gen-ascii span.gen-m.lit { color: #ffe0a0; text-shadow: 0 0 18px rgba(255, 198, 110, 0.85), 0 0 6px rgba(255, 226, 152, 0.92); }  /* 右栏英文最亮：这是给人读的那句话 */

/* 显影开始后，其余呓语退成更暗的底纹，目光自然落在那句话上 */
.gen-stele.focused .gen-bytes span:not(.gen-m),
.gen-stele.focused .gen-ascii span:not(.gen-m),
.gen-stele.focused .gen-off { opacity: 0.28; }

/* 走完后一闪：整句更亮地脉冲一下再沉静 */
@media (prefers-reduced-motion: no-preference) {
  .gen-stele.flash span.gen-m.lit { animation: gen-flash 1s var(--ease-breath); }
}
@keyframes gen-flash {
  40% { color: #fff3d8; text-shadow: 0 0 26px rgba(255, 228, 168, 0.98), 0 0 11px rgba(255, 244, 216, 0.98); }
}
/* 悬停：挑亮某一字节与它对应的字母 */
.gen-stele .hot { color: #ffe2aa !important; text-shadow: 0 0 12px rgba(255, 204, 124, 0.78) !important; }

/* —— 报纸复刻：显影完成后浮现 —— */
.gen-clip {
  opacity: 0;
  transition: opacity 1.1s var(--ease-breath);
  margin: 1.8rem 0 1.4rem;
}

.gen-clip.show { opacity: 1; }
/* 报纸优雅「显影」出场：轻缓上浮 + 淡入；reduced-motion 仅靠上面的 opacity 过渡淡入，不位移 */
@media (prefers-reduced-motion: no-preference) {
  .gen-clip.show { animation: clip-develop 1.1s var(--ease-breath); }
}
@keyframes clip-develop {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.gen-clip-paper {
  background: #f1e9d6;
  color: #26221b;
  border-radius: 4px;
  padding: 1.4rem 1.6rem 1.1rem;
  max-width: 34rem;
  margin: 0 auto;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.38);
}

.gen-clip-mast {
  font-family: var(--serif);
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  letter-spacing: 0.24em;
  margin: 0 0 0.45rem;
  border-bottom: 3px double #26221b;
  padding-bottom: 0.5rem;
}

.gen-clip-date {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #56503f;
  border-bottom: 1px solid #b9b09a;
  padding: 0.35rem 0;
  margin-bottom: 0.95rem;
}

.gen-clip-head {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.12rem, 3.4vw, 1.5rem);
  line-height: 1.35;
  margin: 0 0 0.45rem;
  color: #181510;
}

/* （报头复刻已精简：去掉假栏目与署名行，只留报头 / 日期 / 标题 / 说明） */

.gen-clip-cap {
  font-family: var(--sans);
  font-size: 0.6rem;
  color: #6b6450;
  border-top: 1px solid #c7bea6;
  padding-top: 0.5rem;
  margin: 0.95rem 0 0;
}

.gen-zh {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: #cbbb9b;
  line-height: 2.05;
  margin: 0 0 1rem;
}

.gen-note {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: #8a7a5e;
  line-height: 2;
  margin: 0;
}

.gen-note a { color: var(--accent-ink); text-decoration: none; }
.gen-note a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .gen-stele { padding: 1.3rem 1.1rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gen-hex span, .gen-en span { transition: none; }
}

/* ============================================================
   实验室 · 展厅导览墙（hall）与单线徽标（mk-*）
   ============================================================ */
.mk {
  fill: none;
  stroke: #c9913f;          /* 兜底纯金：任何环境都不空白 */
  stroke: url(#mkgold);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin: 2rem 0 3rem;
}

.hall.hidden { display: none; }

.hall-card {
  display: block;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.15rem 1.1rem 1rem;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.3s var(--ease-breath),
    transform 0.3s var(--ease-breath),
    box-shadow 0.3s var(--ease-breath);
}

.hall-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.hall-card svg {
  width: 42px;
  height: 42px;
  margin-bottom: 0.35rem;
  /* 铸造感：上光下影，金线如錾入瓷面 */
  filter: drop-shadow(0 1px 0 rgba(255, 235, 190, 0.4)) drop-shadow(0 -1px 0 rgba(60, 24, 0, 0.4));
  transition: filter var(--dur) var(--ease-breath);
}

.hall-card:hover svg {
  filter: drop-shadow(0 1px 0 rgba(255, 235, 190, 0.5)) drop-shadow(0 -1px 0 rgba(60, 24, 0, 0.45)) drop-shadow(0 0 9px rgba(214, 142, 52, 0.5));
}

.hall-card .hall-no {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}

.hall-card h3 {
  font-family: var(--serif);
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.25rem;
  color: var(--ink);
}

.hall-card .hall-sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-faint);
  line-height: 1.7;
}

/* 已造访：铸金不改色——足迹记在框与签上 */
.hall-card.seen { border-color: color-mix(in srgb, var(--celadon) 50%, transparent); }
.hall-card.seen .hall-no::after { content: " · ✓ 已造访"; color: var(--celadon); letter-spacing: 0.05em; }

/* 单间模式：导览墙打开某件展品时，其余全部隐去 */
body.hall-mode .experiment { display: none; }
body.hall-mode .experiment.open { display: block; }

.room-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
}

.room-nav button {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.room-nav button:hover { color: var(--accent-ink); border-color: var(--accent); }
.room-nav button:disabled { opacity: 0.35; cursor: default; }
.room-nav .room-hall-btn { color: var(--accent-ink); }

@media (max-width: 640px) {
  .hall { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .hall-card { padding: 0.95rem 0.7rem 0.85rem; }
}

/* ============================================================
   云游 · 出口（赛博路牌）：中柱挑灯，箭头signage 左右错落
   纯 CSS 雕作；瓷器教义（hover 只亮不动）。
   ============================================================ */
.way-wrap {
  max-width: var(--w-read);
  margin: 0 auto;
  padding: 0 1.4rem;
  position: relative;
}

.way-intro {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 2.2rem;
}

.way-post {
  position: relative;
  padding: 0.4rem 0 1.6rem;
}

/* 中柱与灯 */
.way-post::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, var(--accent), var(--line) 22%, var(--line) 88%, transparent);
}

.way-post::after {
  content: "₿";
  position: absolute;
  left: 50%;
  top: -1.7rem;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(240, 140, 62, 0.55);
}

.way-sign {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 46%;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0.7rem 1rem 0.65rem;
  margin: 0.9rem 0;
  transition: border-color var(--dur) var(--ease-breath), box-shadow var(--dur) var(--ease-breath), background var(--dur) var(--ease-breath);
}

/* 左右错落 + 箭头尖端 */
.way-sign.r {
  margin-left: 54%;
  border-radius: 3px 10px 10px 3px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  padding-right: 1.8rem;
}

.way-sign.l {
  margin-right: 54%;
  margin-left: 0;
  border-radius: 10px 3px 3px 10px;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
  padding-left: 1.8rem;
  text-align: right;
}

.way-sign:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 18px rgba(240, 140, 62, 0.18);
}

.way-sign .way-no {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
}

.way-sign .way-name {
  font-family: var(--serif);
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0.15rem 0;
}

.way-sign .way-desc {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--ink-soft);
  line-height: 1.8;
}

.way-sign .way-host {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-top: 0.3rem;
}

.way-note {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin: 1.6rem 0 0;
  line-height: 1.9;
}

@media (max-width: 600px) {
  .way-sign, .way-sign.r, .way-sign.l { width: 100%; margin-left: 0; margin-right: 0; }
  .way-post::before { left: 8px; }
  .way-post::after { left: 8px; transform: none; }
  .way-sign.l { text-align: left; border-radius: 3px 10px 10px 3px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); padding-left: 1rem; padding-right: 1.8rem; }
}

/* ============================================================
   学堂（study.html）：藏书房书架 + 放映厅排片牌
   ============================================================ */
.sd-main { max-width: var(--w-read); margin: 0 auto; padding: 4.5rem 1.4rem 0; }

.sd-intro { color: var(--ink-soft); font-size: 0.98rem; line-height: 2.05; margin: 0 0 1rem; }

/* —— 书斋壁龛：暖龛凹陷 + 胡桃搁板（前缘受光）—— */
.bk-shelf {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 1.8rem 1rem 0;
  margin: 2.2rem 0 3rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 92%, #3a2a10) 0%, var(--paper-2) 70%);
  border-radius: 8px 8px 0 0;
  border-bottom: 12px solid #56402a;
  box-shadow:
    inset 0 14px 26px rgba(46, 30, 8, 0.12),
    inset 6px 0 14px rgba(46, 30, 8, 0.07),
    inset -6px 0 14px rgba(46, 30, 8, 0.07);
}

.bk-shelf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 2px;
  background: rgba(255, 240, 205, 0.3);
}

/* —— 精装书脊：布面圆脊 + 烫金饰线 + 金箔压印 —— */
.bk-spine {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  writing-mode: vertical-rl;
  text-decoration: none;
  border-radius: 4px 4px 1px 1px;
  padding: 1.45rem 0 1.35rem;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bk) 72%, #fff3da) 0%,
    var(--bk) 18%,
    var(--bk) 80%,
    color-mix(in srgb, var(--bk) 55%, #140a02) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 244, 214, 0.22),
    inset 0 -2px 3px rgba(20, 10, 0, 0.35),
    2px 3px 7px rgba(45, 28, 6, 0.28);
  transition: filter var(--dur) var(--ease-breath), box-shadow var(--dur) var(--ease-breath);
}

/* 上下两道烫金饰线 */
.bk-spine::before,
.bk-spine::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  height: 2px;
  background: linear-gradient(90deg, #b98c3e, #f0d690 50%, #b98c3e);
  opacity: 0.9;
}

.bk-spine::before { top: 0.78rem; box-shadow: 0 3px 0 -1px rgba(185, 140, 62, 0.55); }
.bk-spine::after { bottom: 0.72rem; box-shadow: 0 -3px 0 -1px rgba(185, 140, 62, 0.55); }

.bk-spine:hover {
  filter: brightness(1.1);
  box-shadow:
    inset 0 2px 2px rgba(255, 244, 214, 0.26),
    inset 0 -2px 3px rgba(20, 10, 0, 0.35),
    0 0 20px rgba(214, 166, 76, 0.4),
    2px 3px 7px rgba(45, 28, 6, 0.28);
}

/* 烫印：金箔字身 + 压痕投影 */
.bk-spine .t,
.bk-spine .a {
  background: linear-gradient(180deg, #f6e3a6 0%, #ddb35e 55%, #a9772c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(30, 16, 0, 0.5));
}

.bk-spine .t { font-family: var(--serif); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.16em; }
.bk-spine .a { font-family: var(--sans); font-size: 0.55rem; letter-spacing: 0.2em; }

/* —— 书牌 —— */
.bk-plate {
  background: var(--card);
  border: 1px solid var(--line-faint);
  border-radius: 10px;
  padding: 1.3rem 1.5rem;
  margin: 0 0 1.1rem;
  scroll-margin-top: 5.5rem;
}

.bk-plate .bk-title { font-family: var(--serif); font-size: 1.08rem; font-weight: 700; letter-spacing: 0.04em; margin: 0 0 0.2rem; }
.bk-plate .bk-orig { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0 0 0.7rem; }
.bk-plate .bk-note { font-family: var(--serif); font-size: 0.92rem; color: var(--ink-soft); line-height: 2; margin: 0 0 0.8rem; text-align: justify; }
.bk-plate .bk-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* —— 放映厅 —— */
.cin-marquee {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--accent-ink);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0;
  margin: 2rem 0 1.4rem;
  background: var(--accent-wash);
}

.cin-card {
  display: block;
  text-decoration: none;
  background: #15110c;
  border: 1px solid #3a2f20;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 1rem;
  transition: border-color var(--dur) var(--ease-breath), box-shadow var(--dur) var(--ease-breath);
}

.cin-card:hover { border-color: var(--accent); box-shadow: 0 0 22px rgba(240, 140, 62, 0.18); }

.cin-card .cin-no { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em; color: #8a7a5e; }
.cin-card .cin-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: #e8c79c; letter-spacing: 0.03em; margin: 0.25rem 0 0.1rem; text-shadow: 0 0 10px rgba(255, 176, 86, 0.25); }
.cin-card .cin-zh { font-family: var(--sans); font-size: 0.72rem; color: #8a7a5e; margin: 0 0 0.55rem; }
.cin-card .cin-note { font-family: var(--serif); font-size: 0.88rem; color: #c2a071; line-height: 1.95; margin: 0 0 0.6rem; }
.cin-card .cin-meta { font-family: var(--mono); font-size: 0.62rem; color: #6b5d45; }

.sd-tip { font-family: var(--sans); font-size: 0.72rem; color: var(--ink-faint); line-height: 1.9; margin: 1.2rem 0 0; }

@media (max-width: 600px) {
  .bk-shelf { gap: 5px; }
  .bk-spine .t { font-size: 0.74rem; }
}

/* ============================================================
   金库（treasury.html）：网页招股书——文档的庄重 + 本馆的单线
   ============================================================ */
.pr-main { max-width: var(--w-read); margin: 0 auto; padding: 4.5rem 1.4rem 0; }

.pr-sub { text-align: center; color: var(--ink-soft); font-size: 1.0rem; line-height: 2.05; margin: 0 0 2.2rem; }

.pr-sec {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  color: var(--accent-ink);
  margin: 3.6rem 0 0.7rem;
}

.pr-h {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 0 0 1.1rem;
}

.pr-p { color: var(--ink-soft); font-size: 0.97rem; line-height: 2.1; text-align: justify; margin: 0 0 1.2em; }
.pr-p strong { color: var(--ink); }

/* 重要声明：招股书纪律——丑话顶置 */
.pr-warn {
  border: 1px solid color-mix(in srgb, var(--bad) 55%, transparent);
  background: color-mix(in srgb, var(--bad) 7%, transparent);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  margin: 0 0 1rem;
}

.pr-warn .t { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.2em; color: var(--bad); font-weight: 700; margin: 0 0 0.5rem; }
.pr-warn p { font-family: var(--sans); font-size: 0.82rem; line-height: 2; color: var(--ink-soft); margin: 0; }

/* 飞轮图 */
.pr-wheel { display: flex; justify-content: center; margin: 1.6rem 0; }
.pr-wheel svg { max-width: 360px; width: 92%; height: auto; }
.pr-wheel .ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.pr-wheel .arrowp { fill: none; stroke: var(--celadon); stroke-width: 1.3; marker-end: url(#pr-arr); }
.pr-wheel .node { fill: var(--card); stroke: var(--ink-faint); stroke-width: 1.4; }
.pr-wheel text { font-family: var(--sans); font-size: 11px; fill: var(--ink-soft); }
.pr-wheel .core { font-family: var(--serif); font-size: 40px; fill: var(--accent); }
.pr-wheel .n { animation: pr-pulse 12s var(--ease-breath) infinite; transform-origin: center; transform-box: fill-box; }
.pr-wheel .n2 { animation-delay: 3s; } .pr-wheel .n3 { animation-delay: 6s; } .pr-wheel .n4 { animation-delay: 9s; }

@keyframes pr-pulse {
  0%, 20%, 100% { opacity: 0.55; }
  8% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) { .pr-wheel .n { animation: none; opacity: 1; } }

/* 对比卡 / 数据卡 / 清单 */
.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 1.2rem 0; }
@media (max-width: 600px) { .pr-grid { grid-template-columns: 1fr; } }

.pr-card {
  background: var(--card);
  border: 1px solid var(--line-faint);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
}

.pr-card .k { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--ink-faint); margin: 0 0 0.5rem; }
.pr-card .v { font-family: var(--serif); font-size: 0.95rem; line-height: 2; color: var(--ink-soft); margin: 0; }
.pr-card .v strong { color: var(--ink); }
.pr-card .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.pr-list { margin: 0.6rem 0 0; padding-left: 1.2rem; color: var(--ink-soft); font-size: 0.92rem; line-height: 2.15; }
.pr-list li { margin-bottom: 0.35rem; }
.pr-list strong { color: var(--ink); }

/* 路线图：单线时间轴 */
.pr-road { position: relative; margin: 1.8rem 0 0.6rem; padding-left: 1.5rem; }
.pr-road::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.pr-stop { position: relative; padding: 0 0 1.5rem; }
.pr-stop::before { content: ""; position: absolute; left: -1.5rem; top: 0.45em; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink-faint); }
.pr-stop.now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(240, 140, 62, 0.5); }
.pr-stop .st { font-family: var(--serif); font-weight: 600; font-size: 1.0rem; letter-spacing: 0.04em; }
.pr-stop.now .st::after { content: "　● 你在这里"; font-family: var(--sans); font-size: 0.68rem; color: var(--accent-ink); letter-spacing: 0.1em; }
.pr-stop .sd { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); line-height: 1.9; }

/* ============================================================
   字体三态：宋（馆方正体）/ 楷（手写温度）/ 黑（现代极简）
   零下载——楷与黑均走系统字体栈；偏好存于 localStorage。
   ============================================================ */
html[data-font="kai"] {
  --serif: "Kaiti SC", "STKaiti", "KaiTi", "TW-Kai", "DFKai-SB", "Noto Serif SC", serif;
}

html[data-font="hei"] {
  --serif: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}

.font-switch {
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1;
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--dur) var(--ease-breath), border-color var(--dur) var(--ease-breath);
}

.font-switch:hover { color: var(--accent-ink); border-color: var(--accent); }

.font-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 1.4rem;
  z-index: 45;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
}

.font-menu[hidden] { display: none; }

.font-menu button {
  font-size: 0.88rem;
  text-align: left;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-breath), border-color var(--dur-fast) var(--ease-breath), background var(--dur-fast) var(--ease-breath);
}

.font-menu button:hover { color: var(--ink); background: var(--accent-wash); }
.font-menu button.on { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.font-menu .f-song { font-family: "Songti SC", "Noto Serif SC", serif; }
.font-menu .f-kai { font-family: "Kaiti SC", "STKaiti", "KaiTi", serif; }
.font-menu .f-hei { font-family: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif; }

/* ============================================================
   自托管字体（子集化 woff2，懒加载：选了才下载）
   霞鹜文楷 GB / 朱雀仿宋 —— 皆为 SIL OFL 开源授权
   ============================================================ */
@font-face {
  font-family: "LXGW WenKai Sub";
  src: url("fonts/wenkai-gb.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Zhuque Fangsong Sub";
  src: url("fonts/zhuque-fangsong.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

html[data-font="kai"] {
  --serif: "LXGW WenKai Sub", "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", serif;
}

html[data-font="fang"] {
  --serif: "Zhuque Fangsong Sub", "STFangsong", "FangSong", "Noto Serif SC", serif;
}

.font-menu .f-fang { font-family: "Zhuque Fangsong Sub", "STFangsong", "FangSong", serif; }

/* ============================================================
   金库 · 保险库开门仪式（每会话一次，可跳过，reduced-motion 直入）
   ============================================================ */
html.vault-seen .vault { display: none; }

.vault {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  background: #14100c;
  transition: opacity 0.7s var(--ease-breath);
}

.vault.done { opacity: 0; pointer-events: none; }

.vault svg { width: min(300px, 70vw); height: auto; }
.vault .door-ring { fill: none; stroke: #6b5d45; stroke-width: 2; }
.vault .door-ring.outer { stroke: #4d4232; }
.vault .bolt { stroke: #c2a071; stroke-width: 5; stroke-linecap: round; transition: transform 0.5s var(--ease-breath), opacity 0.5s; }
.vault .wheel { transform-origin: 150px 150px; transition: transform 1.1s var(--ease-breath); }
.vault .wheel circle, .vault .wheel line { stroke: #ffb056; stroke-width: 3; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255,176,86,.4)); }
.vault .door-b { font-family: var(--serif); font-size: 44px; fill: #8a7a5e; }

.vault.turn .wheel { transform: rotate(150deg); }
.vault.unbolt .bolt { transform: scale(0.55); opacity: 0; transform-origin: 150px 150px; transform-box: view-box; }
.vault.open svg { transform: scale(1.55); opacity: 0; transition: transform 0.9s var(--ease-breath), opacity 0.9s var(--ease-breath); }

.vault-t {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  color: #8a7a5e;
  margin: 0;
}

.vault-skip {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #6b5d45;
  background: transparent;
  border: 1px solid #3a2f20;
  border-radius: 999px;
  padding: 0.35rem 1rem;
  cursor: pointer;
}

.vault-skip:hover { color: #ffb056; border-color: #ffb056; }

@media (prefers-reduced-motion: reduce) { .vault { display: none; } }

/* 飞轮：滚动入场前蓄势，入场后点火轮转 */
.pr-wheel .n { animation-play-state: paused; opacity: 0.4; }
.pr-wheel.fired .n { animation-play-state: running; }

/* 路线图：分站次第浮现 */
.pr-road .pr-stop { opacity: 0; transition: opacity 0.8s var(--ease-breath); }
.pr-road.visible .pr-stop { opacity: 1; }
.pr-road.visible .pr-stop:nth-child(2) { transition-delay: 0.25s; }
.pr-road.visible .pr-stop:nth-child(3) { transition-delay: 0.5s; }
.pr-road.visible .pr-stop:nth-child(4) { transition-delay: 0.75s; }

/* ============================================================
   阅读亮度层次（Substack 式：正文微退，重点自亮）
   ============================================================ */
.prose { color: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.prose strong, .prose h2 { color: var(--ink); }
.prose a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); transition: border-color var(--dur-fast) var(--ease-breath); }
.prose a:hover { border-bottom-color: var(--accent); }

/* 实验前导卡（lab.js 老实验用的静态三步引导） */
.exp-primer {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 2;
  color: var(--ink-soft);
  background: var(--accent-wash);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin: 0 0 1.2rem;
}
.exp-primer b { color: var(--accent-ink); font-weight: 600; }

/* 导览墙厅头 */
.hall-head {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 0 0.5rem;
  margin-top: 0.4rem;
}
.hall-head small { display: block; font-family: var(--sans); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-faint); margin-top: 0.15rem; }

/* ============================================================
   首页六板块：弦纹分隔 + 温和滚动停靠（proximity，不锁死）
   ============================================================ */
html:has(body.home-page) { scroll-snap-type: y proximity; }

.blk {
  scroll-snap-align: start;
  scroll-margin-top: 56px;
  padding: 4.6rem 0 4.2rem;
  position: relative;
}

.home-page .hero.blk { padding-top: 5.5rem; }

/* 板块间一道居中的短弦纹 */
.blk + .blk::before,
.home-page main > section.blk:not(.hero)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.6rem;
  height: 1px;
  background: var(--line);
}

.home-page .blk .section-label { margin-top: 0; }

@media (max-width: 600px) {
  .blk { padding: 3.4rem 0 3rem; }
}

/* 飞轮节点解说牌 */
.pr-wheel .n { cursor: pointer; }
.pr-wheel .n:hover circle.node,
.pr-wheel .n.sel circle.node { stroke: var(--accent); stroke-width: 2; }
.pr-wheel .n.sel { opacity: 1 !important; }

.pr-dock {
  max-width: 34rem;
  margin: 0 auto 1.4rem;
  min-height: 6.2em;
  background: var(--card);
  border: 1px solid var(--line-faint);
  border-radius: 10px;
  padding: 1rem 1.3rem;
}

.pr-dock-hint { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); text-align: center; margin: 1.2em 0; }
.pr-dock-h { font-family: var(--serif); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.04em; margin: 0 0 0.4rem; color: var(--accent-ink); }
.pr-dock-b { font-family: var(--serif); font-size: 0.92rem; line-height: 2.05; color: var(--ink-soft); margin: 0; }

/* 金库币墙：鎏金币条逐根入库 */
.vault-wall {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px 9px;
  max-width: 30rem;
  margin: 1.4rem auto 0.9rem;
  padding: 1.1rem 1.2rem 1.2rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 90%, #2a1c08) 0%, var(--paper-2) 75%);
  border-radius: 8px;
  box-shadow: inset 0 12px 22px rgba(40, 26, 6, 0.12), inset 0 -4px 10px rgba(40, 26, 6, 0.08);
}

.vbar {
  height: 17px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f0d690 0%, #d2a04a 45%, #8a5a1f 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 244, 210, 0.8),
    inset 0 -2px 2px rgba(48, 26, 2, 0.45),
    0 2px 4px rgba(50, 30, 5, 0.3);
  opacity: 0;
  transition: opacity 0.6s var(--ease-breath);
}

.vault-wall.stocked .vbar { opacity: 1; }
.vault-wall.stocked .vbar:nth-child(n) { transition-delay: calc(var(--i, 0) * 1ms); }
.vault-wall.stocked .vbar:nth-child(1) { transition-delay: 90ms; }
.vault-wall.stocked .vbar:nth-child(2) { transition-delay: 180ms; }
.vault-wall.stocked .vbar:nth-child(3) { transition-delay: 270ms; }
.vault-wall.stocked .vbar:nth-child(4) { transition-delay: 360ms; }
.vault-wall.stocked .vbar:nth-child(5) { transition-delay: 450ms; }
.vault-wall.stocked .vbar:nth-child(6) { transition-delay: 540ms; }
.vault-wall.stocked .vbar:nth-child(7) { transition-delay: 630ms; }
.vault-wall.stocked .vbar:nth-child(8) { transition-delay: 720ms; }
.vault-wall.stocked .vbar:nth-child(9) { transition-delay: 810ms; }
.vault-wall.stocked .vbar:nth-child(10) { transition-delay: 900ms; }
.vault-wall.stocked .vbar:nth-child(11) { transition-delay: 990ms; }
.vault-wall.stocked .vbar:nth-child(12) { transition-delay: 1080ms; }
.vault-wall.stocked .vbar:nth-child(13) { transition-delay: 1170ms; }
.vault-wall.stocked .vbar:nth-child(14) { transition-delay: 1260ms; }
.vault-wall.stocked .vbar:nth-child(15) { transition-delay: 1350ms; }
.vault-wall.stocked .vbar:nth-child(16) { transition-delay: 1440ms; }
.vault-wall.stocked .vbar:nth-child(17) { transition-delay: 1530ms; }
.vault-wall.stocked .vbar:nth-child(18) { transition-delay: 1620ms; }
.vault-wall.stocked .vbar:nth-child(19) { transition-delay: 1710ms; }
.vault-wall.stocked .vbar:nth-child(20) { transition-delay: 1800ms; }
.vault-wall.stocked .vbar:nth-child(21) { transition-delay: 1890ms; }

/* 最新一根：微微呼吸的窑火 */
.vault-wall.stocked .vbar:last-child { animation: vbar-breathe 4.5s ease-in-out 2.4s infinite; }

@keyframes vbar-breathe {
  0%, 100% { box-shadow: inset 0 1px 1px rgba(255,244,210,0.8), inset 0 -2px 2px rgba(48,26,2,0.45), 0 2px 4px rgba(50,30,5,0.3); }
  50% { box-shadow: inset 0 1px 1px rgba(255,244,210,0.9), inset 0 -2px 2px rgba(48,26,2,0.45), 0 0 12px rgba(214,166,76,0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .vbar { opacity: 1; transition: none; }
  .vault-wall.stocked .vbar:last-child { animation: none; }
}

/* ============================================================
   语言馆别 · zh-Hant / en（字体栈按馆别切换，简繁英三馆同源）
   ============================================================ */
@font-face {
  font-family: "LXGW WenKai TC Sub";
  src: url("fonts/wenkai-tc.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

html[lang="zh-Hant"] {
  --serif: "Songti TC", "Noto Serif TC", "Noto Serif CJK TC", "PMingLiU", "MingLiU", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", "Microsoft JhengHei", sans-serif;
}

html[lang="zh-Hant"][data-font="kai"] {
  --serif: "LXGW WenKai TC Sub", "Kaiti TC", "BiauKai", "TW-Kai", "DFKai-SB", "Noto Serif TC", serif;
}

/* 朱雀仿宋缺繁体标准字形：繁体馆别的“仿”降级回宋（菜单里也不再提供） */
html[lang="zh-Hant"][data-font="fang"] {
  --serif: "Songti TC", "Noto Serif TC", "PMingLiU", serif;
}

html[lang="zh-Hant"][data-font="hei"] {
  --serif: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", "Microsoft JhengHei", sans-serif;
}

html[lang="en"] {
  --serif: "Charter", "Iowan Old Style", "Palatino", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

.lang-switch {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  font-family: var(--sans);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
}

.lang-switch a {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.3s var(--ease-breath);
}

.lang-switch a:hover { color: var(--accent); }

.lang-switch strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   釉光层 · 素中宝光（雍正官窑视角 · 2026-06-13）
   判词：要宝光，不要贼光——温润内透；光会动，器不动。
   ①受光面：浅底卡片极淡斜向釉面（暖白，168°，34% 即收）
   ②灯草口：深底（暗模式）器物上沿一线暖白——满器深色，唯口沿透亮
   ③泥鳅背：只动 border-top-color 与 background-image，不碰阴影与圆角
   ============================================================ */
:is(.lab-card, .toc a, .experiment, .panel, .takeaways, .pr-card, .cin-card, .blk-card) {
  background-image: linear-gradient(168deg, rgba(255, 253, 247, 0.45), rgba(255, 253, 247, 0) 34%);
  border-top-color: #f3ecdd;
}

@media (prefers-color-scheme: dark) {
  :is(.lab-card, .toc a, .experiment, .panel, .takeaways, .pr-card, .cin-card, .blk-card) {
    background-image: linear-gradient(168deg, rgba(240, 200, 140, 0.055), rgba(240, 200, 140, 0) 38%);
    border-top-color: #413a2b; /* 灯草口：比 --line 暗窑亮半度的一线 */
  }
}

/* ============================================================
   字号四档（页头「字」菜单内）· 等比缩放不破排版
   原理：全站组件皆以 rem 锚定根字号，调根即调全身。
   ============================================================ */
html[data-size="s"] { font-size: 15px; }
html[data-size="l"] { font-size: 19px; }
html[data-size="xl"] { font-size: 21px; }

.font-menu .size-row {
  display: flex;
  gap: 0.3rem;
  border-top: 1px solid var(--line);
  margin-top: 0.45rem;
  padding-top: 0.5rem;
}

.font-menu .size-row button {
  flex: 1;
  font-size: 0.78rem;
  padding: 0.35rem 0.2rem;
  text-align: center;
}

/* ============================================================
   馆别排版细则 · 繁体加大加疏，英文按拉丁文规矩重排
   ============================================================ */
/* 繁体：笔画密度高——字大半号、字距微疏、行距再松半分，久读不晕 */
html[lang="zh-Hant"] body {
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  line-height: 2.1;
}

html[lang="zh-Hant"] .prose p {
  letter-spacing: 0.03em;
  line-height: 2.15;
}

/* 英文：CJK 的 2.05 行距与两端对齐放到拉丁文上是灾难——
   左对齐防河流、行距 1.7、标题收紧、引文用真斜体 */
html[lang="en"] body { line-height: 1.7; }

html[lang="en"] .prose p {
  text-align: left;
  line-height: 1.75;
  hyphens: auto;
  -webkit-hyphens: auto;
}

html[lang="en"] h1 { line-height: 1.15; letter-spacing: 0; }
html[lang="en"] h2 { line-height: 1.3; letter-spacing: 0.01em; }
html[lang="en"] .epigraph, html[lang="en"] blockquote p { font-style: italic; }
html[lang="en"] blockquote cite { font-style: normal; }
html[lang="en"] .takeaways li { line-height: 1.7; }
html[lang="en"] .lab-card .desc { line-height: 1.65; }

/* ============================================================
   长廊扩建 · 千年货币史十站（2026-06-13）
   ============================================================ */
/* 序章 · 以物易物 */
.gx-barter { gap: 1.6rem; flex-wrap: wrap; }

.gx-villager {
  background: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.7rem 0.9rem 0.8rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  transition: border-color 0.35s var(--ease-breath), box-shadow 0.35s var(--ease-breath);
}

.gx-villager:hover { border-color: var(--line); }
.gx-villager.on { border-color: var(--accent); box-shadow: 0 0 14px rgba(240, 140, 62, 0.16); }
.gx-villager .gx-v-name { font-family: var(--serif); font-weight: 700; font-size: 0.92rem; margin-top: 0.35rem; }
.gx-villager .gx-v-want { font-family: var(--sans); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.05em; }

/* 泥板释读 */
.gx-cune { cursor: pointer; outline: none; }
.gx-cune .stroke { transition: stroke 0.4s var(--ease-breath), filter 0.4s var(--ease-breath); }
.gx-cune:hover .stroke, .gx-cune:focus-visible .stroke { stroke: #f0c060; }
.gx-cune.on .stroke { stroke: #f0c060; filter: drop-shadow(0 0 10px rgba(240, 192, 96, 0.55)); }

/* 雅浦沉海 */
.gx-sea { position: relative; display: inline-block; padding-bottom: 14px; }
.gx-sea #yap-svg { transition: transform 2s var(--ease-breath), opacity 2s var(--ease-breath); }
.gx-sea .gx-wave { display: block; margin: -4px auto 0; opacity: 0.35; }
.gx-sea .gx-wave .stroke { stroke: var(--celadon); filter: none; }
.gx-sea.sunk #yap-svg { transform: translateY(40px); opacity: 0.3; }
.gx-sea.sunk .gx-wave { opacity: 0.8; }

/* 吕底亚狮印 */
.gx-lion { opacity: 0.18; }
.gx-lion .stroke, #lyd-svg ellipse { transition: stroke 0.8s var(--ease-breath), filter 0.8s var(--ease-breath); }
#lyd-svg .gx-lion { transition: opacity 1.1s var(--ease-breath); }
#lyd-svg.stamped .gx-lion { opacity: 1; }
#lyd-svg.stamped .stroke { stroke: #f0c060; filter: drop-shadow(0 0 10px rgba(240, 192, 96, 0.5)); }

/* 第纳尔锈蚀分级（索利都斯失守期共用）：银 → 暗金 → 青铜 → 铜绿 */
#den-svg .stroke, #sol-svg .stroke { transition: stroke 0.5s var(--ease-breath), filter 0.5s var(--ease-breath); }
.den-d0 .stroke { stroke: #d8d8c9; }
.den-d1 .stroke { stroke: #c9bd96; }
.den-d2 .stroke { stroke: #b2986a; }
.den-d3 .stroke { stroke: #93855c; }
.den-d4 .stroke { stroke: #6f8a72; filter: drop-shadow(0 0 7px rgba(111, 138, 114, 0.35)); }
.sol-pure .stroke { stroke: #e9c46a; filter: drop-shadow(0 0 10px rgba(233, 196, 106, 0.4)); }

.gx-crack { opacity: 0; transition: opacity 0.6s var(--ease-breath); }
.den-d2 .c1 { opacity: 1; }
.den-d3 .c1, .den-d3 .c2 { opacity: 1; }
.den-d4 .c1, .den-d4 .c2, .den-d4 .c3 { opacity: 1; }

/* 交子加印 */
.gx-stackwrap { position: relative; display: inline-block; }
.gx-jz-ghost { position: absolute; left: 0; top: 0; pointer-events: none; }
.gx-jz-ghost.g1 { transform: translate(12px, -9px); opacity: 0.5; }
.gx-jz-ghost.g2 { transform: translate(24px, -18px); opacity: 0.36; }
.gx-jz-ghost.g3 { transform: translate(36px, -27px); opacity: 0.26; }
.gx-jz-ghost.g4 { transform: translate(48px, -36px); opacity: 0.18; }
.gx-jz-ghost.g5 { transform: translate(60px, -45px); opacity: 0.12; }

/* 津巴布韦数零 */
.gx-zimnum {
  font-family: var(--mono, ui-monospace, monospace);
  text-align: center;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0.7rem 0 0;
}

.gx-zimnum .z { transition: color 0.3s var(--ease-breath), text-shadow 0.3s var(--ease-breath); }
.gx-zimnum .z.lit { color: #f0c060; text-shadow: 0 0 9px rgba(240, 192, 96, 0.55); }

/* 跋 · 周期 */
.gx-cycle {
  font-family: var(--serif);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  line-height: 2.3;
  letter-spacing: 0.05em;
  margin: 1.2rem 0;
}

.gx-cycle .a { color: var(--celadon); padding: 0 0.3em; }
.gx-cycle .a:last-child { color: var(--accent); }

@media (max-width: 600px) {
  .gx-barter { gap: 0.6rem; }
  .gx-jz-ghost.g4, .gx-jz-ghost.g5 { display: none; }
}

/* ============================================================
   首页 · 渐进披露样板（2026-06，Opus 4.8）
   目标：每屏文字 <30%——大幅留白 + 单线画作 + 大字金句为默认视图，
   完整正文收进 .unfold「展开」。瓷器教义：器物不变形，只动色与影。
   ============================================================ */

/* 更舒展的呼吸：首页板块上下留白加大 */
.home-page main > section.blk { padding: 6.6rem 0 5.8rem; }
.home-page .hero.blk { padding-top: 5.5rem; padding-bottom: 4.4rem; }
@media (max-width: 600px) { .home-page main > section.blk { padding: 4rem 0 3.4rem; } }

/* 大字金句（hero / 板块导语 / 关于） */
.hero-lead {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--ink);
  max-width: 28rem;
  margin: 0 auto 2.2rem;
}
.hero-lead.small { font-size: clamp(1.1rem, 2.6vw, 1.42rem); margin-bottom: 1.5rem; }

/* hero 立场三连（替代一长串副标题） */
.hero-stance {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem;
  margin: 0 0 2.6rem;
}
.hero-stance span {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em;
  color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.85rem;
}

/* ── 单线画作 ── 颜色随语境（墨→accent），描边即一切 */
.art-ill { display: block; color: var(--ink-faint); transition: color 0.35s var(--ease-breath); }
.art-ill .ill { display: block; width: 100%; height: 100%; overflow: visible; }
.ill .s {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;   /* 默认已画好：无 JS / reduced-motion 安全 */
}
/* 单线 draw-on：滑入视野时触发（与全站 .reveal 一致，依赖 JS 揭示）。
   金线顺次生长 + 暗金「点亮再冷却」，灵动醒目又克制；reduced-motion 整体关闭。 */
@media (prefers-reduced-motion: no-preference) {
  .art-card .ill .s, .lab-teaser .ill .s { stroke-dashoffset: 100; }
  .art-card.visible .ill .s, .lab-teaser.visible .ill .s { animation: ill-draw 1.4s var(--ease-breath) forwards; }
  .art-card.visible .art-ill, .lab-teaser.visible .art-ill { animation: ill-ignite 2s var(--ease-breath); }
  /* 壹 → 伍 顺次掌灯 */
  .art-grid .art-card:nth-child(2).visible .ill .s, .art-grid .art-card:nth-child(2).visible .art-ill { animation-delay: 0.12s; }
  .art-grid .art-card:nth-child(3).visible .ill .s, .art-grid .art-card:nth-child(3).visible .art-ill { animation-delay: 0.24s; }
  .art-grid .art-card:nth-child(4).visible .ill .s, .art-grid .art-card:nth-child(4).visible .art-ill { animation-delay: 0.36s; }
  .art-grid .art-card:nth-child(5).visible .ill .s, .art-grid .art-card:nth-child(5).visible .art-ill { animation-delay: 0.48s; }
}
@keyframes ill-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ill-ignite {
  0%   { color: var(--accent); filter: drop-shadow(0 0 7px rgba(214, 166, 76, 0.55)); }
  55%  { color: var(--accent); filter: drop-shadow(0 0 6px rgba(214, 166, 76, 0.4)); }
  100% { color: var(--ink-faint); filter: drop-shadow(0 0 0 rgba(214, 166, 76, 0)); }
}

/* ── 文章 art-grid：以画为主，一句金句收尾 ── */
.art-grid {
  list-style: none; max-width: var(--w-wide); margin: 0 auto; padding: 0 1.4rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem;
}
.art-card a {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem;
  text-decoration: none; height: 100%;
  background: var(--card); border: 1px solid var(--line-faint); border-radius: 14px;
  padding: 2.2rem 1.4rem 1.8rem;
  transition: border-color 0.3s var(--ease-breath), box-shadow 0.3s var(--ease-breath), background 0.3s;
}
.art-card a:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.art-card .art-ill { width: 92px; height: 92px; margin-bottom: 0.4rem; }
.art-card a:hover .art-ill { color: var(--accent); filter: drop-shadow(0 0 7px rgba(214, 166, 76, 0.4)); }
.art-card .num { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.12em; color: var(--accent); }
.art-card h3 { margin: 0; font-size: 1.1rem; letter-spacing: 0.05em; }
.art-card .art-line { margin: 0; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.6; }

/* ── 展开阅读：安静的小药丸，正文收在里面 ── */
.unfold { max-width: var(--w-read); margin: 1.8rem auto 0; padding: 0 1.4rem; }
.unfold.center { text-align: center; }
.unfold > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.08em; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.95rem;
  transition: color 0.3s, border-color 0.3s;
}
.unfold > summary::-webkit-details-marker { display: none; }
.unfold > summary::after { content: "﹀"; font-size: 0.85em; line-height: 1; transition: transform 0.3s var(--ease-breath); }
.unfold[open] > summary::after { transform: rotate(180deg); }
.unfold > summary:hover { color: var(--accent-ink); border-color: var(--accent); }
.unfold-body { margin-top: 1.3rem; text-align: left; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.85; }
.unfold-body p { margin: 0 0 1em; }
.unfold-body p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .unfold[open] .unfold-body { animation: unfold-in 0.5s var(--ease-breath); }
}
@keyframes unfold-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 实验室预告：加一枚画作 + 金句 */
.lab-teaser .art-ill { width: 80px; height: 80px; margin: 0 auto 1.4rem; }

/* ── 实验室招牌 · ₿ 印鉴：Diptyque 椭圆 × 雍正素静（素底之上一处贵：内透宝光）
   宝光只动 opacity、不动 blur 半径——「宝光非贼光」，且滚动零重绘 ── */
.lab-teaser .art-ill.forge { width: 156px; height: 156px; }
.forge .cartouche { opacity: 0.5; }
.forge-coin { color: var(--accent-ink); }
/* 宝光：内透、温润、慢；blur 半径恒定，仅 opacity 起伏 */
.forge .glow { fill: var(--accent); filter: blur(6px); opacity: 0.18; }
@media (prefers-reduced-motion: reduce) { .forge .glow { opacity: 0.24; } }
@media (prefers-reduced-motion: no-preference) {
  /* ₿：现身时一闪（用户最爱）→ 沉为暖金 */
  .lab-teaser.visible .forge-coin { animation: coin-ignite 2.1s var(--ease-breath) forwards; }
  /* 宝光：永续地缓缓呼吸——慢、暖、内透 */
  .lab-teaser.visible .forge .glow { animation: bao-guang 5.2s ease-in-out 2.1s infinite; }
}
@keyframes coin-ignite {
  0%   { color: var(--accent); filter: drop-shadow(0 0 8px rgba(214, 166, 76, 0.6)); }
  55%  { color: var(--accent); filter: drop-shadow(0 0 6px rgba(214, 166, 76, 0.4)); }
  100% { color: var(--accent-ink); filter: drop-shadow(0 0 2px rgba(214, 166, 76, 0.28)); }
}
@keyframes bao-guang { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.34; } }

/* ============================================================
   2026-07 大改版新增 · 阅读组件层
   （鎏金金句 / 文章内单线简笔画 / 术语注释 / 判定表记号）
   纪律：只增不改——上方旧类一律不动
   ============================================================ */

/* ── 鎏金变量：亮暗两谱 ── */
:root { --gold-hi: #e3b864; --gold-lo: #9c6b28; --gold-glint: #f6e3b0; }
@media (prefers-color-scheme: dark) {
  :root { --gold-hi: #f0cd82; --gold-lo: #c08a45; --gold-glint: #fae8bd; }
}

/* ── 鎏金金句：与 .pull 叠用（class="pull pull-gold"）；
   不支持 background-clip:text 时自然退回 .pull 的暖橙 ── */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pull-gold {
    background-image: linear-gradient(100deg,
      var(--gold-lo) 0%, var(--gold-hi) 32%, var(--gold-glint) 50%,
      var(--gold-hi) 68%, var(--gold-lo) 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .reveal.visible .pull-gold { animation: gold-sheen 2.4s var(--ease-breath) 0.2s forwards; }
  }
}
@keyframes gold-sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* ── 文章内单线简笔画（figure.sk-fig.reveal > .art-ill > svg.ill）──
   复用首页 ill-draw / ill-ignite；多面板用 .s.p2/.p3 错峰 ── */
.sk-fig { margin: 2.6rem auto; max-width: 520px; text-align: center; }
.sk-fig.wide { max-width: 680px; }
.sk-fig .art-ill { margin: 0 auto; }
.sk-fig figcaption {
  margin-top: 0.9rem;
  font-family: var(--sans); font-size: 0.82rem;
  color: var(--ink-faint); line-height: 1.7;
}
@media (prefers-reduced-motion: no-preference) {
  .sk-fig .ill .s { stroke-dashoffset: 100; }
  .sk-fig.visible .ill .s { animation: ill-draw 1.4s var(--ease-breath) forwards; }
  .sk-fig.visible .art-ill { animation: ill-ignite 2s var(--ease-breath); }
  .sk-fig.visible .ill .s.p2 { animation-delay: 0.35s; }
  .sk-fig.visible .ill .s.p3 { animation-delay: 0.7s; }
  .sk-fig.visible .ill .s.p4 { animation-delay: 1.05s; }
}

/* ── 术语注释：正文里可点开的小卡片 ──
   <span class="term-wrap"><button class="term" aria-controls="tn-x" aria-expanded="false">法币</button>
     <span class="term-card" id="tn-x" role="note" hidden>…</span></span> ── */
.term-wrap { position: relative; }
button.term {
  appearance: none; background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: help;
  border-bottom: 1px dotted var(--accent);
}
button.term:hover, button.term[aria-expanded="true"] {
  color: var(--accent-ink); border-bottom-style: solid;
}
button.term:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.term-card {
  position: absolute; left: 0; top: calc(100% + 0.55rem); z-index: 60;
  width: min(19rem, 78vw);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 0.85rem 1rem;
  font-family: var(--sans); font-size: 0.84rem; font-weight: 400;
  line-height: 1.75; color: var(--ink-soft);
  text-align: left; letter-spacing: normal; white-space: normal;
}
.term-card b { color: var(--ink); font-weight: 600; }
.term-card.flip { left: auto; right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .term-card { animation: term-pop 0.25s var(--ease-breath); }
}
@keyframes term-pop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .term-card, .term-card.flip {
    position: fixed; left: 1rem; right: 1rem; top: auto; bottom: 1rem;
    width: auto; z-index: 90; box-shadow: var(--shadow-lift);
  }
}

/* ── 判定表记号：替代 emoji ✅❌🟡 的单线小记号 ──
   <span class="mk mk-yes" role="img" aria-label="是"><svg>…</svg></span> ── */
.mk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; margin-right: 0.38rem;
  vertical-align: -0.18rem; flex: none;
}
.mk svg { display: block; width: 100%; height: 100%; }
.mk-yes { color: var(--good); }
.mk-no  { color: var(--bad); opacity: 0.8; }
.mk-mid { color: var(--gold-lo); }
.verdict-table th:not(:first-child), .verdict-table td:not(:first-child) { white-space: nowrap; }
.verdict-table td:first-child { color: var(--ink); font-weight: 500; }
.verdict-table .vt-group td {
  padding-top: 1.15rem; border-bottom: none;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--ink-faint); font-weight: 600;
}
.verdict-table .vt-group:hover td { background: none; }

/* ── 创世报纸 · 原件影印变体（竖版照片入做旧相框；沿用 clip-develop 显影）── */
.gen-clip-photo { max-width: 23rem; padding: 0.7rem 0.7rem 0.85rem; margin: 0 auto; }
.gen-clip-photo img {
  display: block; width: 100%; height: auto; border-radius: 2px;
  filter: sepia(0.13) contrast(0.97);
}
.gen-clip-photo .gen-clip-cap { margin: 0.7rem 0 0; }
.gen-clip-credit { display: block; margin-top: 0.3rem; font-size: 0.62rem; letter-spacing: 0.05em; color: #8a8269; }
@media (prefers-color-scheme: dark) {
  .gen-clip-photo img { filter: sepia(0.18) contrast(0.95) brightness(0.86); }
}

/* ============================================================
   2026-07-20b 移动端 / 跨浏览器优化层（只增不改）
   目标：手机 + iPad 竖屏头部折叠为抽屉；触屏去鼠标涟漪；
        滑动顺手（关 scroll-snap + 装饰画布）；Safari/Firefox 兜底。
   ============================================================ */

/* —— 全局跨端兜底 —— */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }              /* 防任何宽元素撑出横向滚动；clip 不破坏 sticky */
a, button, summary, label, input, select,
.term, .hall-card, .art-card a, [role="button"] {
  -webkit-tap-highlight-color: transparent;   /* 去 iOS Safari 蓝色点按闪 */
}

/* —— 触屏：去掉鼠标专属的点击弧光涟漪 —— */
@media (hover: none), (pointer: coarse) {
  .click-ping { display: none !important; }
}

/* —— 触屏：关闭首页滚动停靠（会“抢”手指滑动）+ 隐藏装饰背景画布（减负 & 去噪）—— */
@media (hover: none), (pointer: coarse) {
  html:has(body.home-page) { scroll-snap-type: none !important; }
  body > canvas[aria-hidden="true"] { display: none !important; }
}

/* —— 导航折叠断点：≤880px（覆盖全部手机 + iPad 竖屏 768/820/834）—— */
.nav-toggle { display: none; }          /* 桌面默认不显示 */

@media (max-width: 880px) {
  .site-header .inner {
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 1.05rem;
  }
  .brand { font-size: 1.2rem; letter-spacing: 0.1em; margin-right: auto; }

  /* 右上控件在窄屏统一为「一对同款圆钮」：字 + 汉堡，同尺寸同发丝线，
     深色下用从墨色调出的柔和描边，不再发浑。 */
  .lang-switch { align-items: center; font-size: 0.8rem; gap: 0.5em; margin-right: 0.15rem; }
  .font-switch,
  .nav-toggle {
    width: 34px; height: 34px; flex: none;
    border: 1px solid color-mix(in srgb, var(--ink-faint) 42%, transparent);
    border-radius: 50%;
    background: transparent;
    color: var(--ink-soft);
    transition: color 0.25s var(--ease-breath), border-color 0.25s var(--ease-breath), background 0.25s var(--ease-breath);
  }
  .font-switch:hover, .font-switch:focus-visible,
  .nav-toggle:hover, .nav-toggle:focus-visible {
    color: var(--accent-ink);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: var(--accent-wash);
  }

  /* 汉堡按钮（由 main.js 注入）·三条线竖直堆叠（flex-direction:column 是关键，
     默认 row 会把三条线糊成一横杠——旧版就栽在这里）*/
  .nav-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 0; cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .nav-toggle .bar {
    display: block; width: 15px; height: 2px; border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s var(--ease-breath), opacity 0.2s;
  }
  .site-header.nav-open .nav-toggle {
    color: var(--accent-ink);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .site-header.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* 导航抽屉：绝对定位在头部下方，默认收起 */
  .site-nav {
    position: absolute;
    top: calc(100% + 6px);
    left: 0.6rem; right: 0.6rem;
    flex-direction: column;
    gap: 0;
    padding: 0.35rem 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    max-height: 74vh; overflow-y: auto;
    z-index: 44;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.24s var(--ease-breath), transform 0.24s var(--ease-breath), visibility 0.24s;
  }
  .site-header.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }
  .site-nav a {
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--line-faint);
    border-radius: 0;
  }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a.active {
    color: var(--accent-ink);
    border-bottom-color: var(--line-faint);
    background: var(--accent-wash);
  }

  /* 语言/字号切换在窄屏收紧 */
  .lang-switch { font-size: 0.78rem; gap: 0.15rem; }
  .font-switch { flex: none; }

  /* 首页 hero 收口：夹住轨道徽记与巨型 ₿，杜绝横向溢出 */
  .hero { overflow: hidden; }

  /* 页脚底部留白：让正文末尾不被右下角浮动价格挂件压住 */
  .site-footer { padding-bottom: 5rem; }
}

/* —— 触屏抽屉动效尊重减弱动画偏好 —— */
@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: opacity 0.2s, visibility 0.2s; }
  .nav-toggle .bar { transition: opacity 0.2s; }
}

/* —— 极窄屏（≤360px）再紧一档 —— */
@media (max-width: 360px) {
  .site-header .inner { gap: 0.35rem; padding: 0.6rem 0.85rem; }
  .brand { font-size: 1.08rem; letter-spacing: 0.06em; }
  .lang-switch { font-size: 0.72rem; }
}