/* ============================================================
   aoliba — 分层建模物理学习站
   设计体系：深色「实验室 / 仪器感」
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  /* 底色阶：深空蓝黑 */
  --bg-0: #070b12;   /* 页面最底 */
  --bg-1: #0c121c;   /* 区块底 */
  --bg-2: #111a28;   /* 卡片底 */
  --bg-3: #172335;   /* 悬浮/激活 */
  --bg-inset: #060910;

  /* 线 */
  --line-1: #1b2739;
  --line-2: #26364d;
  --line-accent: #2f4a6b;

  /* 文字 */
  --fg-0: #e8eef6;   /* 主文字 */
  --fg-1: #a5b5ca;   /* 次要 */
  --fg-2: #75879e;   /* 弱化 */
  --fg-3: #5a6a82;   /* 极弱/标注 */

  /* 强调色：冷青 + 琥珀，仪器荧光感 */
  --cy: #35e0d0;        /* 主强调 */
  --cy-dim: #1c8f86;
  --cy-glow: rgba(53, 224, 208, 0.18);
  --am: #ffb454;        /* 次强调 / 判据 */
  --am-dim: #a9762f;
  --vi: #a78bfa;        /* 第三强调 */
  --rd: #ff6b6b;        /* 警示 / 猜错 */
  --gn: #4ade80;        /* 正确 */

  /* 层级色带 L0 → L5 */
  --L0: #5b8def;
  --L1: #35e0d0;
  --L2: #7ee787;
  --L3: #ffb454;
  --L4: #f778ba;
  --L5: #a78bfa;
  --L6: #7dd3fc;

  /* 主题相关衍生值（浅色主题在下方 html[data-theme="light"] 成对覆盖） */
  --on-accent: #070b12;   /* 亮强调色上的文字（如步骤序号） */
  --glow-top: rgba(53, 224, 208, 0.10);
  --bg-veil: rgba(7, 11, 18, 0.78);   /* 面包屑等半透明底 */
  --hud-bg: linear-gradient(180deg, rgba(12, 18, 28, 0.97), rgba(12, 18, 28, 0.88));
  --tele-a: rgba(23, 35, 53, 0.42);   /* 遥测卡渐变 */
  --tele-b: rgba(6, 9, 16, 0.92);

  /* 排版 */
  --font-sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;

  /* 尺度 */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --maxw: 1280px;
  --hud-h: 44px;
}

/* ---------- 浅色主题 ----------
   由 nav.js 在脚本加载时写入 html[data-theme]（存 localStorage，默认跟随系统
   prefers-color-scheme）。页面与实验画布使用同一主题。 */
html[data-theme="light"] {
  --bg-0: #f6f8fb;   /* 页面最底 */
  --bg-1: #eef2f8;   /* 区块底 */
  --bg-2: #ffffff;   /* 卡片底 */
  --bg-3: #e3eaf3;   /* 悬浮/激活 */
  --bg-inset: #e9eef5;

  --line-1: #dde5ef;
  --line-2: #c9d5e4;
  --line-accent: #9fb8d4;

  --fg-0: #1a2533;   /* 主文字 */
  --fg-1: #44566d;   /* 次要 */
  --fg-2: #5f7188;   /* 弱化 */
  --fg-3: #7a8a9f;   /* 极弱/标注 */

  /* 强调色整体加深：浅底上要能当正文色用（对比 ≥ 4.5:1） */
  --cy: #0f766e;
  --cy-dim: #0f766e;
  --cy-glow: rgba(15, 118, 110, 0.14);
  --am: #b45309;
  --am-dim: #c2740c;
  --vi: #7c3aed;
  --rd: #dc2626;
  --gn: #15803d;

  /* 层级色带：暗一档，浅底上作文本/边框色时保持可读 */
  --L0: #2563eb;
  --L1: #0f766e;
  --L2: #166534;
  --L3: #92400e;
  --L4: #be185d;
  --L5: #7c3aed;
  --L6: #0369a1;

  --on-accent: #ffffff;
  --glow-top: rgba(15, 118, 110, 0.07);
  --bg-veil: rgba(246, 248, 251, 0.86);
  --hud-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86));
  --tele-a: #ffffff;
  --tele-b: #eef3fa;
}

/* ---------- 重置 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hud-h) + 76px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-0);
  color: var(--fg-0);
  line-height: 1.65;
  font-size: 14px;               /* 正文基准 14px（2026-10-19）：标题/引用/按钮/徽标不在此列 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 背景网格已移除（2026-10-19）：保留顶部氛围光，body::after */
/* 顶部氛围光 */
body::after {
  content: "";
  position: fixed;
  top: -240px; left: 50%;
  width: 900px; height: 480px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--glow-top), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

a { color: var(--cy); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--font-mono); }

/* 键盘可达：统一焦点样式（PRD 11.2） */
:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   层级 HUD —— 全局常驻状态栏（文档中「最高杠杆机制」）
   ============================================================ */
.hud {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: var(--hud-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 20px;
  background: var(--hud-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hud::-webkit-scrollbar { display: none; }

.hud__brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; letter-spacing: .14em;
  color: var(--fg-0); text-transform: uppercase;
  flex: 0 0 auto;
}
.hud__brand .dot {
  width: 7px; height: 7px; border-radius: 50%;
  cursor: pointer;
  position: relative;
  background: var(--cy);
  box-shadow: 0 0 10px var(--cy);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.hud__brand .dot::after {           /* 把 7px 的圆点热区扩到 ~31px，不影响布局 */
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
}

.hud__sep { width: 1px; height: 20px; background: var(--line-2); flex: 0 0 auto; }

/* 品牌后的标语（仅首页启用） */
.hud__slogan {
  color: var(--fg-2); letter-spacing: .05em;
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* HUD 三行核心信息 */
/* 字段分隔线画在字段自身（::before）：响应式隐藏字段时线一并消失，
   不残留孤立竖线；间距 = 原 18px gap + 1px 线 + 18px gap 的等效。 */
.hud__field { display: flex; align-items: baseline; gap: 7px; flex: 0 0 auto; position: relative; padding-left: 19px; }
.hud__field::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 20px; background: var(--line-2);
}
.hud__label { color: var(--fg-3); letter-spacing: .08em; }
.hud__val { color: var(--fg-0); white-space: nowrap; }
.hud__val--layer { font-weight: 700; display: inline-flex; align-items: center; max-width: 240px; }
.hud__val--layer .hud__val-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hud__val--ignore { color: var(--fg-2); max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.hud__val--criterion { color: var(--am); }
/* 「模型忽略」是全站最长的一段文字：空间不够时优先由它收窄，别把右侧导航顶出屏幕 */
.hud__field--ignore { flex: 0 1 auto; min-width: 0; }
.hud__field--ignore .hud__val--ignore { min-width: 0; }

.hud__spacer { flex: 1 1 auto; min-width: 8px; }
.hud__lang {
  margin: 0 4px 0 14px;
  padding: 2px 0;
  border: 0;
  color: var(--fg-2);
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.hud__lang:hover { color: var(--cy); }

/* 写在 HTML 里的语言链接。脚本会把它移进 HUD；脚本没跑时仍可点。 */
a.lang-crawl {
  display: inline-block;
  margin: 10px 16px 0;
  color: var(--fg-1);
  font-size: 13px;
}

/* 宽屏：两个入口直接平铺在右上角（窄屏再收缩为图标 + 下拉，见下方媒体查询） */
.hud__nav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.hud__nav a {
  color: var(--fg-1);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  letter-spacing: .04em;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.hud__nav a:hover { background: var(--bg-3); color: var(--fg-0); text-decoration: none; }
.hud__nav a[aria-current="page"] { color: var(--cy); background: rgba(53,224,208,0.10); }

/* 右上角图标菜单 → 下拉面板 */
.hud.open { overflow: visible; }
.hud.open .hud__nav {
  display: flex; flex-direction: column; gap: 2px;
  position: absolute; top: 100%; right: 10px;
  min-width: 168px; padding: 6px;
  background: var(--bg-1); border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: 0 16px 36px -10px #000;
  z-index: 70;
}
.hud.open .hud__nav a { padding: 9px 12px; }

.hud__toggle, .hud__theme {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line-2);
  color: var(--fg-1); border-radius: var(--r-sm);
  padding: 4px 8px; cursor: pointer; flex: 0 0 auto;
  transition: background .15s, color .15s;
}
.hud__toggle:hover, .hud__theme:hover { background: var(--bg-3); color: var(--fg-0); }
.hud__toggle svg, .hud__theme svg { display: block; }
.hud.open .hud__toggle { color: var(--fg-0); background: var(--bg-3); }

/* 主题切换按钮：全宽度常显（深浅两态由 nav.js 换图标）；汉堡按钮窄屏才显示 */
.hud__toggle { display: none; }

/* 图标随主题互换：深色下显示太阳（点击去浅色），浅色下显示月亮 */
.hud__theme .hud__theme-moon { display: none; }
html[data-theme="light"] .hud__theme .hud__theme-moon { display: block; }
html[data-theme="light"] .hud__theme .hud__theme-sun { display: none; }

/* 装不下平铺入口时（≤1024px）收缩成图标按钮，点开后走 .hud.open 下拉面板。
   阈值不能再低：判据/忽略两个字段加六个入口在 900px 左右就会互相挤爆 */
@media (max-width: 1024px) {
  .hud__toggle { display: inline-flex; }
  .hud__nav { display: none; }
}

/* 顶部面包屑（由 nav.js 统一注入） */
.breadcrumb-bar {
  border-bottom: 0;
  background: transparent;
}
.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 0;
  padding: 5px 0;   /* 清零左右——ol 默认 padding-inline-start:40px 会让文字右移 */
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-3);
}
.breadcrumb a { color: var(--fg-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--cy); }
.breadcrumb [aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-1);
}
.breadcrumb__sep { color: var(--line-accent); }

/* 层色点 */
.layer-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 2px;
  margin-right: 6px; vertical-align: middle;
}

/* ============================================================
   布局
   ============================================================ */
/* 内容宽度只在这里定义一次：正文（main）与页脚共用同一组约束。
   区块不再各自设宽，section 只负责纵向节奏与分隔线——
   改宽度只动 --maxw，不用追着每个区块改。 */
main,
footer {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}
.section { padding: 64px 0; border-top: 1px solid var(--line-1); }
.section:first-of-type { border-top: none; }

h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.15; margin: 0 0 18px; letter-spacing: -.015em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); margin: 0 0 16px; letter-spacing: -.01em; }
h3 { font-size: 1.08rem; margin: 0 0 10px; }
.lead { font-size: 14px; color: var(--fg-1); max-width: 66ch; }
.lead a { color: var(--cy); text-decoration: none; border-bottom: 1px solid var(--cy-dim); }
.lead a:hover { border-bottom-color: var(--cy); }
.muted { color: var(--fg-2); }
.small { font-size: .875rem; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 56px; }
/* 有面包屑的页（除首页外全站）：面包屑 35px 高已提供呼吸空间，
   hero 顶部从 72/44/48 统一收窄——原各页内联 padding-top 已删，此为唯一源 */
body[data-crumb] .hero { padding-top: 28px; }
.hero h1 .hl {
  background: linear-gradient(180deg, var(--cy), var(--cy-dim));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__claim {
  margin: 26px 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--cy);
  background: var(--bg-1);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1.05rem; color: var(--fg-0);
}
.hero__claim .quote { color: var(--fg-2); font-family: var(--font-mono); font-size: .875rem; display:block; margin-bottom:6px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .05em;
  border: 1px solid var(--line-2); color: var(--fg-0); background: var(--bg-2);
  cursor: pointer; transition: .16s; text-decoration: none;
}
.btn:hover { background: var(--bg-3); border-color: var(--line-accent); text-decoration: none; transform: translateY(-1px); }
.btn--primary {
  background: linear-gradient(180deg, rgba(53,224,208,.20), rgba(53,224,208,.07));
  border-color: var(--cy-dim); color: var(--cy);
}
.btn--primary:hover { box-shadow: 0 0 22px var(--cy-glow); }
.btn--ghost { background: transparent; }

/* ---------- 卡片网格 ---------- */
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: border-color .18s, transform .18s, background .18s;
  position: relative;
  overflow: hidden;
}
.card:hover { border-color: var(--line-accent); transform: translateY(-2px); background: var(--bg-3); }
.card h3 { display: flex; align-items: center; gap: 8px; }
.card p { color: var(--fg-1); font-size: 14px; margin: 0 0 10px; }
.card .tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--fg-2); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 2px 9px; display: inline-block; margin-top: 4px;
}
.card--link { cursor: pointer; }

/* ---------- 演示大厅：图文卡片（预览动图 + 标题/描述） ---------- */
.gcard {
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s, transform .2s, background .2s;
}
.gcard:hover { border-color: var(--line-accent); transform: translateY(-3px); background: var(--bg-3); }
.gcard:focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; }

.gcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #070b12;
  overflow: hidden;
  border-bottom: 1px solid var(--line-1);
}
.gcard__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .45s ease, opacity .3s ease;
}
.gcard__media img[data-anim] { opacity: .92; }
.gcard__media img.is-live { opacity: 1; }
.gcard:hover .gcard__media img { transform: scale(1.035); }

/* auto-fill 而不是 auto-fit：只有 1 张卡的分区也保持三列宽度，不会被拉成整屏大图 */
.hall-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }

.gcard__body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px 18px;
  flex: 1;
}
.gcard__body h3 { margin: 0; font-size: 1.02rem; color: var(--fg-0); }
.gcard__body p { margin: 0; color: var(--fg-2); font-size: 13.5px; line-height: 1.6; }
.gcard .card__layers { margin: 2px 0 0; }

/* 只有一张卡的分区：改成横向大卡（图左文右），不留下两格空白 */
.hall-grid--feature { grid-template-columns: 1fr; }
.hall-grid--feature .gcard { flex-direction: row; }
.hall-grid--feature .gcard__media {
  flex: 0 0 48%;
  aspect-ratio: auto;
  border-bottom: 0;
  border-right: 1px solid var(--line-1);
}
.hall-grid--feature .gcard__body { justify-content: center; padding: 24px 28px; }
.hall-grid--feature .gcard__body h3 { font-size: 1.16rem; }
.hall-grid--feature .gcard__body p { font-size: 14px; }
@media (max-width: 700px) {
  .hall-grid--feature .gcard { flex-direction: column; }
  .hall-grid--feature .gcard__media {
    flex: none; aspect-ratio: 16 / 9;
    border-right: 0; border-bottom: 1px solid var(--line-1);
  }
  .hall-grid--feature .gcard__body { padding: 16px 18px 18px; }
}

/* 序号/角标 */
.card__idx {
  position: absolute; top: 14px; right: 18px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-3);
}

/* ---------- 二维模型地图 ---------- */
.model-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.model-axis {
  padding: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
}
.model-axis__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.model-axis__head h2 { margin: 0 0 3px; font-size: 1.08rem; }
.model-axis__head p { margin: 0; color: var(--fg-2); font-size: .84rem; }
.model-axis__step {
  flex: 0 0 auto;
  color: var(--cy);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  border: 1px solid var(--cy-dim);
  border-radius: 999px;
  padding: 2px 7px;
}
.model-axis__choices { display: grid; gap: 8px; }
.model-axis__choices button {
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  text-align: left;
  color: var(--fg-1);
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.model-axis__choices button:hover { border-color: var(--line-accent); color: var(--fg-0); }
.model-axis__choices button[aria-checked="true"] {
  border-color: var(--cy-dim);
  color: var(--cy);
  background: color-mix(in srgb, var(--cy) 9%, var(--bg-2));
}
.model-axis__choices strong { display: block; font: 600 .9rem var(--font-sans); }
.model-axis__choices small { display: block; margin-top: 2px; color: var(--fg-3); font-size: .75rem; }
/* 标准 tabs：tablist 与 tabpanel 同容器紧邻；页签只用文字 + 下划线标示，
   不给面板任何「被选中」的底色/描边——面板就是普通卡片 */
.model-tabs-shell { margin-top: 22px; }
.model-tabs-intro {
  margin: 0 0 12px;
  color: var(--fg-2);
  font-size: .875rem;
  line-height: 1.65;
}
.model-tabs {
  display: flex; flex-wrap: wrap; gap: 20px;
  border-bottom: 1px solid var(--line-2);
}
.model-tabs button {
  margin: 0 0 -1px;
  padding: 10px 2px 9px;
  color: var(--fg-3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font: 12.5px var(--font-mono);
  letter-spacing: .06em;
  transition: color .15s, border-color .15s;
}
.model-tabs button:hover { color: var(--fg-1); }
.model-tabs button:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
.model-tabs button[aria-selected="true"] {
  color: var(--fg-0);
  border-bottom-color: var(--cy);
}
.model-tabpanel { margin-top: 16px; outline: none; }
.model-tabpanel:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; border-radius: var(--r-lg); }
/* 面板是普通卡片：不加底色、描边等「选中」装饰，只保留内容本身 */
.model-tabs-shell .model-detail { margin-top: 0; }
/* 详情面板不可点：取消全局 .card:hover 的变色/位移（会被误读成选中态） */
.model-detail, .model-detail:hover {
  background: var(--bg-2);
  border-color: var(--line-1);
  transform: none;
  transition: none;
}
.model-match {
  padding: 8px 12px;
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
}
.model-match:hover, .model-match.is-active {
  color: var(--model-color);
  border-color: var(--model-color);
  background: var(--bg-3);
}
.model-empty {
  padding: 11px 13px;
  color: var(--fg-3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
}
.model-detail { margin-top: 20px; }
.model-tag-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-1);
}
.model-tag-groups--result {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0;
  padding: 14px 0;
  border-top: 1px solid var(--line-1);
}
.model-tag-group > span {
  display: block;
  margin-bottom: 6px;
  color: var(--fg-3);
  font: 11px var(--font-mono);
  letter-spacing: .08em;
}
.model-tag-group > div { display: flex; flex-wrap: wrap; gap: 5px; }
.model-tag-group em {
  padding: 3px 8px;
  color: var(--fg-1);
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: 999px;
  font-style: normal;
  font-size: .78rem;
}
.relation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 22px 0;
}
.relation-card {
  display: grid;
  gap: 5px;
  min-height: 144px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  opacity: .62;
  transition: opacity .15s, border-color .15s, transform .15s;
}
.relation-card.is-active {
  opacity: 1;
  border-color: var(--cy-dim);
  transform: translateY(-2px);
}
.relation-card span { color: var(--cy); font: 11px var(--font-mono); letter-spacing: .08em; }
.relation-card strong { color: var(--fg-0); font-size: .86rem; }
.relation-card b { color: var(--am); font: 500 .76rem var(--font-mono); }
.evidence-chain {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.5fr);
  gap: 20px;
  margin: 22px 0;
  padding: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
}
.evidence-chain h3 { margin: 6px 0; }
.evidence-chain p { margin: 0; color: var(--fg-2); font-size: .84rem; }
.evidence-chain ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: evidence;
}
.evidence-chain li {
  counter-increment: evidence;
  padding: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
}
.evidence-chain li::before {
  content: "0" counter(evidence);
  display: block;
  margin-bottom: 6px;
  color: var(--cy);
  font: 11px var(--font-mono);
}
.evidence-chain strong, .evidence-chain span { display: block; }
.evidence-chain strong { margin-bottom: 4px; font-size: .85rem; }
.evidence-chain span { color: var(--fg-3); font-size: .76rem; }

@media (max-width: 720px) {
  .model-map { grid-template-columns: 1fr; }
  .model-combination { grid-column: auto; }
  .model-tag-groups { grid-template-columns: 1fr; }
  .model-tag-groups--result { grid-template-columns: 1fr; }
  .evidence-chain { grid-template-columns: 1fr; }
  .evidence-chain ol { grid-template-columns: 1fr; }
}

/* ============================================================
   层级色带 / 层级条
   ============================================================ */
.layers-stack { display: flex; flex-direction: column; gap: 8px; }
.layer-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-left-width: 3px;
  border-radius: var(--r-md);
  transition: .16s;
}
.layer-row:hover { background: var(--bg-2); transform: translateX(3px); }
.layer-row__tag { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.layer-row__name { font-weight: 600; }
.layer-row__name small { display:block; color: var(--fg-2); font-weight: 400; font-size: .82rem; margin-top:2px; }
.layer-row__crit { font-family: var(--font-mono); font-size: 12px; color: var(--am); white-space: nowrap; }

/* 各层左边框色 */
.lv0 { border-left-color: var(--L0); } .lv0 .layer-row__tag { color: var(--L0); }
.lv1 { border-left-color: var(--L1); } .lv1 .layer-row__tag { color: var(--L1); }
.lv2 { border-left-color: var(--L2); } .lv2 .layer-row__tag { color: var(--L2); }
.lv3 { border-left-color: var(--L3); } .lv3 .layer-row__tag { color: var(--L3); }
.lv4 { border-left-color: var(--L4); } .lv4 .layer-row__tag { color: var(--L4); }
.lv5 { border-left-color: var(--L5); } .lv5 .layer-row__tag { color: var(--L5); }

/* ============================================================
   无量纲判据表
   ============================================================ */
.crit-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.crit-table th, .crit-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-1); }
.crit-table th { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.crit-table td:first-child { font-family: var(--font-mono); color: var(--am); font-weight: 600; white-space: nowrap; }
.crit-table tr:hover td { background: var(--bg-1); }

/* ============================================================
   选层器
   ============================================================ */
.selector-panel {
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 26px; margin-bottom: 26px;
}
.selector-heading {
  margin: 28px 0 12px;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--fg-0);
}
.selector-form {
  display: grid; gap: 0;
  margin: 0 0 8px;
  padding: 6px 22px 18px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
}
.selector-form .form-row {
  padding: 16px 0;
  border-top: 1px solid var(--line-2);
}
.selector-form .form-row:first-child { border-top: 0; }
.form-row {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 8px 16px; align-items: center;
}
.form-row--stack {
  align-items: start;
  margin: 0; padding: 0; border: 0; min-inline-size: 0;
}
.form-row__label {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--fg-1);
}
.selector-form .switch-tabs { margin-bottom: 0; }
.selector-form .switch-tabs button[aria-selected="true"] {
  color: var(--fg-0);
  background: transparent;
  border-color: var(--cy);
  box-shadow: none;
  font-weight: 400;
}
.scale-list { display: grid; gap: 4px; }
.scale-item {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: 4px 12px; align-items: center;
}
.scale-item label {
  font-family: var(--font-mono); font-weight: 600; font-size: .92rem;
}
.scale-item label small {
  display: block; margin-top: 2px;
  font-weight: 400; font-size: 11px; color: var(--fg-3);
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .scale-item { grid-template-columns: 1fr auto; }
  .scale-item input[type="range"] { grid-column: 1 / -1; }
}
/* 滑杆行：名称 | 滑杆 | 数值 排成一行（参考下落球实验的紧凑表单）。
   只对真的含滑杆的行生效，其它用 .crit-input__head 的块（如预设、材质按钮组）保持原样 */
.crit-input { margin-bottom: 6px; }
.crit-input:last-child { margin-bottom: 0; }
.crit-input__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; gap: 12px;
}
.crit-input:has(input[type="range"]) {
  display: grid;
  grid-template-columns: fit-content(42%) minmax(56px, 1fr) max-content;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.crit-input:has(input[type="range"]) > .crit-input__head { display: contents; }
.crit-input:has(input[type="range"]) .crit-input__name {
  grid-column: 1; grid-row: 1;
  min-width: 0; margin: 0;
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crit-input:has(input[type="range"]) .crit-input__val {
  grid-column: 3; grid-row: 1;
  justify-self: end; font-size: 12.5px;
}
.crit-input:has(input[type="range"]) > input[type="range"] {
  grid-column: 2; grid-row: 1;
  width: 100%; height: 22px; margin: 0;
}
/* 行内提示（"v_p ∝ √T" 这类）在窄行里必定被截断，收起——
   同样的内容改由名称上的气泡说明承担 */
.crit-input:has(input[type="range"]) .hint { display: none; }
/* 上下标：防止撑高行高；物理符号（ħ 等）用衬线栈保证横杠字形可见——
   部分移动端字体把 ħ 渲染成 h，衬线字体（Georgia/Cambria）字形完整 */
sub, sup { font-size: .72em; line-height: 0; }
.sym { font-family: "Cambria Math", Georgia, "Times New Roman", "Songti SC", serif; font-style: normal; }

/* 小节标签（三问标题等）：统一为共享类，避免各页内联样式各写一份 */
.sec-label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: .1em; white-space: nowrap;
}

.crit-input__name { font-family: var(--font-mono); font-weight: 600; }.crit-input__name .hint { color: var(--fg-2); font-weight: 400; font-size: .82rem; margin-left: 8px; }
.crit-input__val { font-family: var(--font-mono); color: var(--am); font-size: .9rem; white-space: nowrap; }

/* 内联提示：说明默认收起，点「i」就地展开，不占版面也不怕被滚动容器裁掉 */
.tip { display: inline; }
.tip > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; vertical-align: -2px;
  list-style: none; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--fg-3); font: 600 10px/1 var(--font-mono);
}
.tip > summary::-webkit-details-marker { display: none; }
.tip > summary:hover { color: var(--fg-1); border-color: var(--line-3, var(--line-2)); }
.tip[open] > summary { color: var(--cy); border-color: var(--cy); }
.tip__body {
  margin: 8px 0 0; padding: 8px 10px;
  border-left: 2px solid var(--line-2);
  color: var(--fg-2); font-size: 12.5px; line-height: 1.65;
}
.tip__body p { margin: 0 0 4px; }
.tip__body p:last-child { margin: 0; }

/* 参数行内联：名称 | 滑杆 | 当前值 同一行 */
/* 气泡提示：鼠标悬停 / 键盘聚焦时出现，带指向尾巴。
   定位由 nav.js 用 fixed 计算，避免被操作列的滚动容器裁掉 */
.bubble {
  position: fixed; left: 0; top: 0; z-index: 9000;
  max-width: 264px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(12, 18, 30, .96);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #e9eff7;
  font-size: 12.5px; line-height: 1.55; font-weight: 400; text-align: left;
  letter-spacing: 0;
  box-shadow: 0 18px 38px -20px rgba(0, 0, 0, .9);
  pointer-events: none;
  opacity: 0; transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease;
}
.bubble[hidden] { display: none; }        /* hidden 优先于其它 display */
.bubble.is-on { opacity: 1; transform: translateY(0); }
.bubble::after {
  content: ""; position: absolute;
  left: var(--arrow-x, 50%); bottom: -4px;
  width: 7px; height: 7px; margin-left: -4px;
  background: rgba(12, 18, 30, .96);
  border-right: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  transform: rotate(45deg);
}
/* 上方放不下时翻到下方，尾巴转向朝上 */
.bubble--below::after {
  bottom: auto; top: -4px;
  border-right: 0; border-bottom: 0;
  border-left: 1px solid rgba(255, 255, 255, .14);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.bubble--accent { border-color: rgba(53, 224, 208, .45); }

/* 带说明的元素：问号光标 + 虚点下划线，暗示“这里可以悬停” */
[data-bubble] { cursor: help; }
.has-tip {
  text-decoration: underline dotted var(--line-3, rgba(148, 163, 184, .5));
  text-underline-offset: 3px;
}
@media (hover: none) { .has-tip { text-decoration: none; } }

/* ============================================================
   控件组件（操作区统一用这套，页面不要再各写一份）
     .field / .field__label      一组控件的容器与组标签
     .opt-group / .opt           复选与单选；--fill 让选项等分一行
     .crit-input[--inline]       滑杆行（名称在上一行 / 同一行）
     .btn-row                    动作按钮行
   ============================================================ */
.field { margin-bottom: 10px; }
.field:last-child { margin-bottom: 0; }
.field__label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--fg-3);
}

.opt-group { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-group--fill > .opt { flex: 1 1 0; justify-content: center; }
.opt {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 4px 9px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--bg-1); color: var(--fg-1);
  font-size: 12.5px; line-height: 1.25; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.opt:hover { border-color: var(--line-3, var(--line-2)); color: var(--fg-0); }
.opt input { flex: none; width: 14px; height: 14px; margin: 0; accent-color: var(--cy); }
.opt:has(input:checked) {
  border-color: var(--cy);
  background: color-mix(in srgb, var(--cy) 10%, transparent);
  color: var(--fg-0);
}
.opt:has(input:focus-visible) { outline: 2px solid var(--cy); outline-offset: 2px; }
.opt[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* 工具栏：一排分段按钮 + 右侧状态文字（操作区顶部） */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.toolbar .switch-tabs { margin: 0; }
.toolbar__status { font-size: 11.5px; line-height: 1.4; color: var(--fg-3); }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-row > .btn { flex: 0 1 auto; white-space: nowrap; }
/* 只有一两个主按钮、希望等分整行时加 --fill */
.btn-row--fill > .btn { flex: 1 1 0; }

/* 滑杆：视觉轨道保持 4px 细线，但输入框触控高度 28px（移动端可点性，WCAG 建议 ≥24px）。
   轨道改画在 runnable-track 上，输入框本身透明撑高。 */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px;
  background: transparent; outline: none; margin: 6px 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--line-2);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--line-2);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cy); cursor: pointer;
  box-shadow: 0 0 12px var(--cy-glow);
  border: 2px solid var(--bg-0);
  margin-top: -7px; /* (轨道4px - 拇指18px)/2，垂直居中 */
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cy); cursor: pointer; border: 2px solid var(--bg-0);
}

.verdict {
  margin-top: 8px; padding: 22px;
  background: var(--bg-inset); border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
}
.result-stack {
  display: grid;
  gap: 14px;
  margin-top: 0;
}
.verdict--step {
  margin-top: 0;
  width: 100%;
  background: var(--bg-3);
}
html[data-theme="light"] .verdict--step { background: var(--bg-inset); }
html[data-theme="light"] .verdict--child { background: var(--bg-2); }
.verdict__kicker {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  font-size: 1.2rem; font-weight: 600; letter-spacing: 0;
  color: var(--fg-0);
}
.verdict__kicker span {
  display: inline-grid; place-items: center;
  width: 1.45rem; height: 1.45rem; border-radius: 999px;
  background: var(--cy); color: var(--bg-0);
  font-weight: 700; letter-spacing: 0;
}
.verdict__role {
  margin: 0 0 12px;
  color: var(--fg-2); font-size: 13px; line-height: 1.5;
}
.verdict--child {
  margin-top: 0; margin-left: 0;
  width: 100%;
}
.result-stack--blocked .verdict--child .verdict__kicker span { background: var(--am); }
.verdict__layer { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; }
.verdict__why { color: var(--fg-1); font-size: 14px; }
.verdict__why code { color: var(--am); }

/* ============================================================
   占位游戏
   ============================================================ */
.stage {
  background:
    linear-gradient(180deg, rgba(23,35,53,0.35), rgba(6,9,16,0.2)),
    #060910;
  border: 1px solid #26364d;   /* 与深色 line-2 等值，固定：仪器屏不随主题 */
  border-radius: var(--r-lg);
  padding: 26px;
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 18px 40px -28px #000;
}
.stage canvas {
  display: block;
  border-radius: 8px;
}
.stage__placeholder {
  border: 1px dashed #26364d;
  border-radius: var(--r-md);
  padding: 34px 26px;
  color: #8da2ba;           /* 固定深色屏上的文字，不随主题 */
  max-width: 520px;
}
.stage__placeholder .mono { color: #ffb454; }

/* Canvas 2D / WebGL 演示大多按深底调色。浅色主题用“反相 + 色相复位”同时
   翻转明度并大体保留青、橙等语义色，避免逐页出现白字白底；容器与覆盖 UI
   则直接使用浅色主题令牌。 */
html[data-theme="light"] .stage {
  background: var(--bg-2);
  border-color: var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 14px 30px -26px rgba(31,41,55,.35);
}
html[data-theme="light"] .stage__placeholder {
  color: var(--fg-2);
  border-color: var(--line-2);
}
html[data-theme="light"] .stage__placeholder .mono { color: var(--am); }

.choices { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.choice {
  flex: 1 1 180px; max-width: 240px;
  padding: 22px 18px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); cursor: pointer; transition: .16s;
  font-size: .95rem;
}
.choice:hover { border-color: var(--cy-dim); background: var(--bg-3); transform: translateY(-2px); }
.choice.picked { border-color: var(--cy); background: rgba(53,224,208,.09); }
.choice.correct { border-color: var(--gn); background: rgba(74,222,128,.10); }
.choice.wrong { border-color: var(--rd); background: rgba(255,107,107,.10); }
.choice__label { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); display: block; margin-bottom: 8px; }

.feedback {
  margin-top: 20px; padding: 16px 20px; border-radius: var(--r-md);
  border-left: 3px solid var(--am); background: var(--bg-1);
  color: var(--fg-1); font-size: .925rem; text-align: left; max-width: 620px;
  min-height: 0;
}
.feedback:empty { display: none; }

.dial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; width: 100%; text-align: left; }

/* ============================================================
   杂项
   ============================================================ */
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--fg-2);
}
.badge--todo { border-color: var(--am-dim); color: var(--am); background: rgba(255,180,84,.07); }

.notice {
  padding: 16px 20px; border-radius: var(--r-md);
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-left: 3px solid var(--am); color: var(--fg-1); font-size: .92rem;
}
.notice strong { color: var(--fg-0); }

/* 渐进展开：长说明默认收起，把操作与结果留在首屏 */
.disclosure {
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: var(--bg-1);
  color: var(--fg-1);
}
.disclosure > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 12.5px;
  cursor: pointer;
  list-style: none;
  transition: background .15s, color .15s;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: "›";
  color: var(--cy);
  font-size: 18px;
  line-height: 1;
  transition: transform .15s;
}
.disclosure > summary:hover { background: var(--bg-2); color: var(--fg-0); }
.disclosure[open] > summary {
  color: var(--fg-0);
  border-bottom: 1px solid var(--line-1);
}
.disclosure[open] > summary::before { transform: rotate(90deg); }
.disclosure__body { padding: 18px 20px; }
.disclosure__body > :first-child { margin-top: 0; }
.disclosure__body > :last-child { margin-bottom: 0; }
.disclosure__body .stage {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.switch-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.switch-tabs button {
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--fg-1);
  padding: 8px 16px; border-radius: var(--r-md); cursor: pointer;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.switch-tabs button:hover { background: var(--bg-3); color: var(--fg-0); }
.switch-tabs button[aria-selected="true"] {
  color: var(--cy); border-color: var(--cy-dim);
  background: rgba(53,224,208,.10);
  box-shadow: inset 0 -2px 0 var(--cy);
}

footer {
  margin-top: 24px;
  padding-block: 24px 32px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: var(--fg-3); font-size: .875rem;
}
footer .mono { color: var(--fg-2); }

/* 页脚站内地图（由 nav.js 统一注入） */
.foot-nav {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 10px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-1);
  font-family: var(--font-mono); font-size: 12.5px;
}
.foot-nav a { color: var(--fg-2); }
.foot-copy {
  flex-basis: 100%;
  margin: 10px 0 0;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--fg-3); letter-spacing: .02em;
}
.foot-nav a:hover, .foot-nav a[aria-current="page"] { color: var(--cy); text-decoration: none; }
.foot-nav span { color: var(--fg-3); }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .hud { flex-wrap: nowrap; }
  .hud__field--ignore { display: none; }
  .layer-row { grid-template-columns: 44px 1fr; }
  .layer-row__crit { grid-column: 2; font-size: 11px; }
  .hud__val--ignore { max-width: 150px; }
  .hud__val--layer { max-width: 180px; }
}
@media (max-width: 620px) {
  .hud { gap: 12px; padding: 6px 12px; font-size: 11px; }
  .hud__slogan, .hud__sep { display: none; }
  .hud__lang { margin: 0 6px 0 8px; }
  .hud.open .hud__nav { left: 8px; right: 8px; min-width: 0; }
  main, footer { padding-inline: 18px; }
  .section { padding: 44px 0; }
  .hero { padding: 48px 0 36px; }
  .hud__field--criterion { display: none; }
  .hud__val--layer { max-width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   实验游戏 · 画布与遥测（games/*）
   ============================================================ */
.labview {
  position: relative;
  width: 100%;
  height: 460px;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(53,224,208,0.07), transparent 52%),
    #05080f;
  border: 1px solid #2c415c;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    0 22px 48px -26px rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(255,255,255,0.06);
  /* 游戏区统一不响应文本选中 / 长按菜单，避免触屏长摁弹出选中框干扰操作 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* 四角准星：仪器取景框，不拦截指针 */
.labview::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(rgba(232,238,246,0.85), rgba(232,238,246,0.85)) left top / 16px 1px no-repeat,
    linear-gradient(rgba(232,238,246,0.85), rgba(232,238,246,0.85)) left top / 1px 16px no-repeat,
    linear-gradient(rgba(232,238,246,0.85), rgba(232,238,246,0.85)) right top / 16px 1px no-repeat,
    linear-gradient(rgba(232,238,246,0.85), rgba(232,238,246,0.85)) right top / 1px 16px no-repeat,
    linear-gradient(rgba(232,238,246,0.85), rgba(232,238,246,0.85)) left bottom / 16px 1px no-repeat,
    linear-gradient(rgba(232,238,246,0.85), rgba(232,238,246,0.85)) left bottom / 1px 16px no-repeat,
    linear-gradient(rgba(232,238,246,0.85), rgba(232,238,246,0.85)) right bottom / 16px 1px no-repeat,
    linear-gradient(rgba(232,238,246,0.85), rgba(232,238,246,0.85)) right bottom / 1px 16px no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.65));
  opacity: 0.72;
}
.labview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,0.32) 100%);
}
@media (max-width: 640px) { .labview { height: 340px; } }
.labview canvas {
  display: block; width: 100%; height: 100%;
  position: relative;
  z-index: 1;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.labview__skeleton {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(148,163,184,.10) 20%, rgba(148,163,184,.22) 40%, rgba(148,163,184,.10) 60%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s ease-in-out infinite;
}
@keyframes sk-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .labview__skeleton { animation: none; } }
.labview--scroll canvas { touch-action: pan-y; }  /* 图表型画布：纵向滑动交给页面滚动 */
.labview__hint {
  position: absolute; left: 16px; bottom: 14px;
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47,74,107,0.7);
  background: rgba(7,11,18,0.62);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 11px; color: #c9d6e8;   /* 固定深色屏上的文字，不随主题 */
  letter-spacing: .02em;
  pointer-events: none;
}
.labview__hint[hidden] { display: none; }   /* hidden 属性优先于 display:flex */
.labview__hint {
  transition: opacity .2s ease, transform .2s ease;
}
.labview__hint--out { opacity: 0; transform: translateY(4px); pointer-events: none; }

/* WebGL 不可用时的占位提示：不降级渲染，直接说明原因并给出替代浏览器 */
.glfail {
  position: absolute; inset: 0;
  z-index: 4;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,180,84,0.06), transparent 55%),
    #05080f;
}
.glfail__card {
  max-width: 460px; max-height: 100%; overflow-y: auto;
  text-align: left;
}
/* 这一层永远压在深色画布上，文字用固定色，不跟随明暗主题 */
.glfail__title {
  font-size: 17px; font-weight: 600; color: #e8eef6;
  margin-bottom: 10px; letter-spacing: .01em; text-align: center;
}
.glfail__body {
  margin: 0 0 14px;
  font-size: 13px; line-height: 1.75; color: #a5b5ca;
}
.glfail__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0 0 14px; padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: 11.5px; color: #c9d6e8;
}
.glfail__list li {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(47,74,107,0.9); background: rgba(17,26,40,0.9);
}
/* 自检步骤：编号列表比一排标签更能让人按顺序排查 */
.glfail__check-title {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 600; color: #c9d6e8; letter-spacing: .02em;
}
.glfail__steps {
  margin: 0 0 14px; padding-left: 1.3em;
  font-size: 12px; line-height: 1.75; color: #a5b5ca;
}
.glfail__steps li { margin-bottom: 4px; }
.glfail__steps code {
  font-family: var(--font-mono); font-size: 11px;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(47,74,107,0.55); color: #dbe6f4;
}
.glfail__steps em { color: #c9d6e8; font-style: normal; }
.glfail__hint {
  margin: 0 0 14px;
  font-size: 12px; line-height: 1.7; color: #7a8a9f;
}
.glfail__link {
  font-size: 12.5px; color: #35e0d0;
  text-decoration: none; border-bottom: 1px solid #1c8f86;
}
.glfail__link:hover { color: #7ff0e4; }
@media (max-width: 640px) {
  .glfail { padding: 18px; }
  .glfail__body { font-size: 12.5px; }
  /* 提示态：容器改为随内容撑开，避免卡片被固定高度截断 */
  .labview--glfail { height: auto; }
  .labview--glfail .glfail { position: static; padding: 18px 16px; }
  .labview--glfail .glfail__card { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .labview__hint { transition: none; }
}
.labview__hint__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.labview__hint__close {
  pointer-events: auto; flex: none;
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: inherit;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.labview__hint__close:hover { background: rgba(255,255,255,.26); }
html[data-theme="light"] .labview__hint__close { background: rgba(51,65,85,.10); }
html[data-theme="light"] .labview__hint__close:hover { background: rgba(51,65,85,.18); }

html[data-theme="light"] .labview {
  background: #eef3fa;
  border-color: var(--line-2);
  box-shadow:
    0 0 0 1px rgba(148,163,184,.18),
    0 18px 38px -28px rgba(31,41,55,.35),
    inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .labview::before {
  background:
    linear-gradient(rgba(30,41,59,.72), rgba(30,41,59,.72)) left top / 16px 1px no-repeat,
    linear-gradient(rgba(30,41,59,.72), rgba(30,41,59,.72)) left top / 1px 16px no-repeat,
    linear-gradient(rgba(30,41,59,.72), rgba(30,41,59,.72)) right top / 16px 1px no-repeat,
    linear-gradient(rgba(30,41,59,.72), rgba(30,41,59,.72)) right top / 1px 16px no-repeat,
    linear-gradient(rgba(30,41,59,.72), rgba(30,41,59,.72)) left bottom / 16px 1px no-repeat,
    linear-gradient(rgba(30,41,59,.72), rgba(30,41,59,.72)) left bottom / 1px 16px no-repeat,
    linear-gradient(rgba(30,41,59,.72), rgba(30,41,59,.72)) right bottom / 16px 1px no-repeat,
    linear-gradient(rgba(30,41,59,.72), rgba(30,41,59,.72)) right bottom / 1px 16px no-repeat;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.7));
}
html[data-theme="light"] .labview::after {
  background: radial-gradient(ellipse at center, transparent 62%, rgba(71,85,105,.10) 100%);
}
html[data-theme="light"] .labview__hint {
  border-color: rgba(148,163,184,.75);
  background: rgba(255,255,255,.78);
  color: #334155;
}

.cred-badge {
  display: inline-block;
  margin-top: 12px;
  line-height: 1.65;
  padding: 4px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-veil);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--fg-2);
}
.cred-badge b { color: var(--cy); font-weight: 600; }

.telemetry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px; margin-top: 18px;
}
.tele-cell {
  position: relative;
  background: linear-gradient(180deg, var(--tele-a), var(--tele-b));
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  padding: 12px 14px 11px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.tele-cell::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--cy);
  opacity: 0.75;
}
.tele-cell__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--fg-3); text-transform: uppercase; }
.tele-cell__v { font-family: var(--font-mono); font-size: 1.05rem; color: var(--fg-0); font-variant-numeric: tabular-nums; margin-top: 2px; }
.tele-cell__v small { color: var(--fg-2); font-size: .72rem; letter-spacing: 0; }

.row-between { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }

/* ============================================================
   体验大厅 · 层级索引与筛选（hall.html）
   ============================================================ */
.hall-filters {
  display: grid;
  gap: 12px;
  margin-top: 26px;
  padding: 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
}
.hall-filter { display: grid; grid-template-columns: 92px 1fr; align-items: start; gap: 12px; }
.hall-filter__label {
  padding-top: 8px;
  color: var(--fg-3);
  font: 11px var(--font-mono);
  letter-spacing: .08em;
}
.hall-index { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 720px) {
  .hall-filter { grid-template-columns: 1fr; gap: 4px; }
  .hall-filter__label { padding-top: 0; }
}

.lchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--fg-1); font-family: var(--font-mono); font-size: 12.5px;
  cursor: pointer; transition: .15s;
}
.lchip:hover { background: var(--bg-3); color: var(--fg-0); }
.lchip[aria-pressed="true"] {
  color: var(--fg-0); background: var(--bg-3);
  border-color: var(--c, var(--cy)); box-shadow: 0 0 14px -4px var(--c, var(--cy));
}
.lchip[aria-disabled="true"] { opacity: .42; cursor: default; }
.lchip[aria-disabled="true"]:hover { background: var(--bg-2); color: var(--fg-1); }
.lchip__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.lchip__n { color: var(--fg-3); }

/* 卡片上的层级角标 */
.card__layers { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.ltag {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
  padding: 1px 9px; border-radius: 999px;
  border: 1px solid var(--c, var(--line-2)); color: var(--c, var(--fg-2));
}

.is-hidden { display: none !important; }

/* 实验页统一结束区：已知限制 + 反馈 */
.exp-limits {
  margin: 30px 0 20px;
  padding: 18px 20px;
  border-left: 3px solid var(--am);
  background: var(--bg-inset);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.exp-limits__label { font-size: 11px; color: var(--am); letter-spacing: .08em; margin-bottom: 8px; }
.exp-limits__text { margin: 0 0 10px; color: var(--fg-1); font-size: .95rem; line-height: 1.7; }
.exp-limits__meta { margin: 0; color: var(--fg-3); font-size: 11px; }
.exp-feedback { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-1); }

/* 键盘可达性：跳过导航 + 统一焦点环 */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 1000;
  padding: 10px 14px; border-radius: 0 0 8px 8px;
  background: var(--cy); color: var(--on-accent, #0b1220);
  font: 600 13px var(--font-sans); text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="tab"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 版本彩蛋（连点 logo 五次） */
.egg {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6, 10, 16, .55);
  backdrop-filter: blur(4px);
}
.egg__card {
  width: min(360px, 100%);
  padding: 26px 24px 20px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
}
.egg__title { margin: 0 0 12px; font-size: 1.15rem; }
.egg__body { margin: 0 0 18px; color: var(--fg-1); font-size: .92rem; line-height: 1.9; }
.egg__body code { font-family: var(--font-mono); color: var(--am); }
.egg__row { display: flex; justify-content: flex-end; }

/* 全屏：画布铺满，操作区浮在左上、指标区浮在右上（半透明面板） */
.lab__stage { position: relative; }

.lab-fs {
  position: absolute; right: 10px; bottom: 10px; z-index: 6;
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 20, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #cfe0f5; font-size: 13px; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .15s, color .15s;
}
.lab-fs:hover { background: rgba(8, 12, 20, .82); color: #fff; }
/* 手机上浮层会盖满画布，全屏没有意义：只在 PC 提供入口 */
@media (max-width: 899px) { .lab-fs { display: none; } }

.lab:fullscreen {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  background: #05080f;
  overflow: hidden;
}
.lab:fullscreen .lab__stage {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
}
.lab:fullscreen .labview { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.lab:fullscreen .stage__canvas { height: 100%; display: flex; align-items: center; justify-content: center; }
.lab:fullscreen .stage.lab__stage { padding: 0; }

/* 浮层：更透的浅色面板；面板内把设计令牌固定成浅色系，
   这样深色主题下文字也不会变成浅灰压在浅面板上 */
.lab:fullscreen .lab__controls,
.lab:fullscreen .lab__metrics {
  position: absolute; z-index: 12;
  width: 300px; max-height: calc(100% - 32px);
  padding: 14px 16px;
  --fg-0: #0b1220; --fg-1: #1f2937; --fg-2: #3d4a5c; --fg-3: #5b6675;
  --line-1: rgba(15, 23, 42, .10);
  --line-2: rgba(15, 23, 42, .16);
  --line-3: rgba(15, 23, 42, .24);
  --bg-0: #ffffff;
  --bg-1: rgba(255, 255, 255, .5);
  --bg-2: rgba(255, 255, 255, .5);
  --bg-3: rgba(15, 23, 42, .06);
  --bg-inset: rgba(255, 255, 255, .42);
  --tele-a: rgba(255, 255, 255, .66);
  --tele-b: rgba(255, 255, 255, .44);
  color: var(--fg-0);
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .65);
  overflow: auto;
}
.lab:fullscreen .lab__controls { top: 14px; left: 14px; }
.lab:fullscreen .lab__metrics { top: 14px; right: 14px; width: 280px; }
.lab:fullscreen .lab__metrics .telemetry { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.lab:fullscreen .lab__after { display: none; }
.lab:fullscreen .lab-fs { right: 14px; bottom: 14px; z-index: 14; }

/* ============================================================
   实验页布局系统
   移动端（<900px）= 布局 A：画布 → 操作区 → 信息展示区 纵向排列，画布吸顶。
   桌面端（≥900px）= 布局 B / C / D，由页面的 .lab--layout-* 显式声明；
   未声明时按布局 B 处理（历史页面兼容）。
   详细约定见仓库根目录 AGENTS.md。
   ============================================================ */
.lab {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (min-width: 900px) {
  /* 布局 B（默认）：画布 + 操作区在上，信息展示区通栏在下。
     适用：操作区较多的场景（下落的球、三体与拉格朗日点）。 */
  .lab {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 26px;
  }
  .lab__stage    { grid-column: 1; grid-row: 1; }
  .lab__controls { grid-column: 2; grid-row: 1; }
  .lab__metrics  { grid-column: 1 / -1; grid-row: 2; }
  .lab__after    { grid-column: 1 / -1; grid-row: 3; }

  /* 布局 C：画布占满左列；操作区在右上，信息展示区在右下。
     适用：操作区较小的场景。 */
  .lab--layout-c { grid-template-rows: auto 1fr; }
  .lab--layout-c .lab__stage    { grid-column: 1; grid-row: 1 / span 2; }
  .lab--layout-c .lab__controls { grid-column: 2; grid-row: 1; }
  .lab--layout-c .lab__metrics  { grid-column: 2; grid-row: 2; align-self: end; }
  .lab--layout-c .lab__after    { grid-row: 3; }

  /* 布局 D：操作区占满右列（更大）；信息展示区落在画布下方。
     适用：操作区很大、画布相对小的场景。 */
  .lab--layout-d { grid-template-rows: auto auto; }
  .lab--layout-d .lab__stage    { grid-column: 1; grid-row: 1; }
  .lab--layout-d .lab__metrics  { grid-column: 1; grid-row: 2; }
  .lab--layout-d .lab__controls { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .lab--layout-d .lab__after    { grid-row: 3; }

  /* 兼容：nav.js 在未显式声明布局的页面上按高度自动加 .lab--side，
     等价于布局 C（旧页面 / 玩法页继续沿用自动判断）。 */
  .lab--side { grid-template-rows: auto 1fr; }
  .lab--side .lab__stage   { grid-column: 1; grid-row: 1 / span 2; }
  .lab--side .lab__controls { grid-column: 2; grid-row: 1; }
  .lab--side .lab__metrics  { grid-column: 2; grid-row: 2; align-self: end; }
  .lab--side .lab__after    { grid-row: 3; }
}

/* 画布在滚动时吸在 HUD 下方：拖参数时结果始终可见 */
.lab__stage {
  align-self: start;
  min-width: 0;
}
/* 吸顶只在移动端：PC 屏幕大，操作区与画布本就同屏，吸顶反而挡内容 */
@media (max-width: 899px) {
  .lab__stage {
    position: sticky;
    top: var(--hud-h-real, var(--hud-h));   /* 用实测 HUD 高度，避免换行时被遮 */
    z-index: 5;
    /* 画布不再套底色框：不加背景/内边距/投影，深色画布直接吸顶 */
  }
}
/* 不吸顶时（比如 stage 比控制区高很多）不需要额外底色块 */
@media (prefers-reduced-motion: no-preference) {
  .lab__stage { transition: box-shadow .2s; }
}

/* 画布下方的一行辅助条：图表切换 / 视角切换 */
.lab__stagebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}

/* 仪器屏（.stage）自带深色底，吸顶时保留原配色，不被 .lab__stage 的页面底色覆盖 */
@media (max-width: 899px) {
  html[data-theme="light"] .lab__stage { box-shadow: 0 12px 16px -16px rgba(15, 23, 42, .35); }
}

.stage.lab__stage {
  background:
    linear-gradient(180deg, rgba(23,35,53,0.35), rgba(6,9,16,0.2)),
    #060910;
}

/* 画布不套外层卡片：深色画布直接贴页面，只保留画布自身的圆角
   （浅色主题的 .stage 底色/投影特异性更高，这里单独覆盖） */
html[data-theme="light"] .stage.lab__stage,
.stage.lab__stage {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}
.stage.lab__stage .stage__canvas canvas { border-radius: var(--r-lg); }
/* 提示条贴着画布内缘，不再被 26px 内边距顶开 */
.stage.lab__stage .labview__hint { left: 12px; bottom: 12px; }

/* 画布 + 读数型页面（双缝 / 麦克斯韦）：屏内遥测与脚注要撑满宽度，不被 flex 居中挤窄 */
.stage.lab__stage > .telemetry,
.stage.lab__stage > .small { align-self: stretch; text-align: left; }

/* 仪器屏里的画布单独一层，提示条定位到画布而不是整块面板 */.stage__canvas { position: relative; }
.stage__canvas canvas { display: block; width: 100%; height: auto; }

/* 判定 / 说明区：放在两列下方，跨满整行；同时把 .lab 撑高，让画布有吸顶空间 */
.lab__after { grid-column: 1 / -1; min-width: 0; }

/* 无参数页（只有画布 + 动作条）：仍用同一套吸顶，但不留空列 */
.lab--single { grid-template-columns: minmax(0, 1fr) !important; }

/* 右列 / 下段：所有控制与读数 */
.lab__controls {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 操作区与指标区各自成一张卡片；理论描述留在页面正文，不套框 */
.lab__controls,
.lab__metrics {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.lab__metrics .telemetry { margin-top: 0 !important; }
.lab__controls .selector-panel,
.lab__controls .fb-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
/* 理论描述区：只看内容本身（判定、观察要点、折叠长文） */
.lab__after {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lab__after > * { margin-top: 0 !important; }

/* 桌面端：内容明显超出画布时（nav.js 判定并加 --capped），操作区限高为画布高度、列内滚动 */
@media (min-width: 900px) {
  .lab__controls {
    gap: 10px;
  }
  .lab__controls--capped {
    max-height: var(--stage-h, 72vh);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-3, rgba(148, 163, 184, .45)) transparent;
    padding-right: 4px;
  }
  .lab__controls::-webkit-scrollbar { width: 6px; }
  .lab__controls::-webkit-scrollbar-thumb { background: var(--line-3, rgba(148,163,184,.45)); border-radius: 3px; }
  .lab__controls::-webkit-scrollbar-track { background: transparent; }
  /* 还有内容没滚到时，底部渐隐提示"下面还有" */
  .lab__controls--more {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
  }
  /* 控制卡内部紧凑化：padding 与条目间距整体收一档 */
  .lab__controls .selector-panel { padding: 14px 16px; margin-bottom: 0; }
  .lab__controls .crit-input__head { margin-bottom: 4px; }
  .lab__controls .btn { padding: 8px 12px; font-size: 13px; }
  .lab__controls .dial-grid { gap: 8px; }
  .lab__controls .telemetry { gap: 8px; margin-top: 12px; }
  .lab__controls .tele-cell { padding: 10px 12px 9px 14px; }
  .lab__controls .tele-cell__v { font-size: 1rem; }
}

/* 移动端：画布吸顶后给下方内容加一点顶部间距，避免贴边 */
@media (max-width: 899px) {
  .lab__controls { padding-top: 2px; }

  /* 移动端让 .lab 不生成盒子：吸顶的参照容器变成整段内容区（控制 + 判定 + 说明），
     否则父容器只有画布那么高，sticky 会被"顶"上去，等于没吸 */
  .lab { display: contents; }
  .lab__stage { margin-bottom: 16px; }

  /* 吸顶区要尽量矮，把屏幕留给可滚动的参数区 */
  /* 辅助条不换行：一排按钮横滑，避免吸顶区被撑高 */
  .lab__stagebar {
    gap: 6px; padding-top: 8px;
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none;
  }
  .lab__stagebar::-webkit-scrollbar { display: none; }
  .lab__stagebar > * { flex: 0 0 auto; }
  .lab__stagebar .switch-tabs button { padding: 5px 9px; font-size: 12px; }

  /* 遥测改单行横滑：高度从两行格子压到一行 */
  .lab__stage .telemetry {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lab__stage .telemetry::-webkit-scrollbar { display: none; }
  .lab__stage .telemetry > * { flex: 0 0 auto; min-width: 116px; }
  /* 横滑条：右缘渐隐，避免读数被"切断"看成截断错误 */
  .lab__stage .telemetry {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%);
  }
  /* 读数多且文字长的页面（双缝 / 麦克斯韦）：移动端改为两列网格，不横滑藏数据 */
  .lab__stage .telemetry--wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }
  .lab__stage .telemetry--wrap > * { min-width: 0; }
}

/* ---------- 统一的解释折叠 ---------- */
.lab-note {
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  overflow: hidden;
}
.lab-note + .lab-note { margin-top: 8px; }
.lab-note > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 13px var(--font-mono);
  color: var(--fg-1);
}
.lab-note > summary::-webkit-details-marker { display: none; }
.lab-note > summary::after {
  content: "+";
  margin-left: auto;
  color: var(--fg-3);
  font-size: 15px;
  line-height: 1;
}
.lab-note[open] > summary::after { content: "−"; }
.lab-note > summary:hover { color: var(--fg-0); }
.lab-note__body {
  padding: 0 16px 14px;
  color: var(--fg-1);
  font-size: .9rem;
  line-height: 1.75;
}
.lab-note__body p { margin: 0 0 8px; }
.lab-note__body p:last-child { margin-bottom: 0; }

/* ---------- 克制动效 ---------- */
@keyframes lab-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lab-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .lab__controls > * { animation: lab-rise .34s cubic-bezier(.22,.61,.36,1) both; }
  .lab__controls > *:nth-child(1) { animation-delay: .02s; }
  .lab__controls > *:nth-child(2) { animation-delay: .06s; }
  .lab__controls > *:nth-child(3) { animation-delay: .1s; }
  .lab__controls > *:nth-child(4) { animation-delay: .14s; }
  .lab__controls > *:nth-child(n+5) { animation-delay: .18s; }
  .lab-note { animation: lab-fade .3s ease both; }
  /* 数值变化时轻微强调，不用闪烁 */
  .crit-input__val.is-changed { animation: lab-pop .3s ease; }
}
@keyframes lab-pop {
  0% { color: var(--cy); }
  100% { color: inherit; }
}

/* ============================================================
   物理理论全景（map.html）
   横轴 = 分支（按尺度），纵轴 = 基座 / 裂缝 / 进行中。
   ============================================================ */
.tmap {
  border: 1px solid var(--line-1);
  border-radius: 14px;
  background: var(--bg-1);
  padding: 14px 16px 16px;
}
.tmap__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.tmap__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.tmap__filters button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--fg-2); font-size: 12.5px; font-family: inherit;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.tmap__filters button:hover { color: var(--fg-0); border-color: var(--line-accent); }
.tmap__filters button[aria-pressed="true"] {
  color: var(--fg-0); border-color: var(--cy-dim); background: var(--bg-2);
}
.tmap__filters .dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; box-sizing: border-box;
}
.tmap__filters .dot.is-base { background: var(--cy); }
.tmap__filters .dot.is-crack { border: 1.5px solid var(--rd); }
.tmap__filters .dot.is-frontier { border: 1.5px dashed var(--am); }
.tmap__hint { font-size: 11.5px; color: var(--fg-3); font-family: var(--font-mono); }
.tmap__hint--narrow { display: none; }

.tmap__canvas {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  margin: 6px -10px 0; padding: 0 10px;
  -webkit-overflow-scrolling: touch;
}
.tmap__svg { display: block; width: 100%; height: auto; min-width: 900px; }
.tmap__skeleton {
  height: 460px; border-radius: 10px;
  background: linear-gradient(100deg, var(--bg-2) 20%, var(--bg-3) 40%, var(--bg-2) 60%);
  background-size: 220% 100%;
  animation: tmap-shimmer 1.4s linear infinite;
}
@keyframes tmap-shimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .tmap__skeleton { animation: none; } }

/* --- 三层背景带 --- */
.tmap__tierband.is-crack { fill: var(--rd); opacity: .035; }
.tmap__tierband.is-frontier { fill: var(--cy); opacity: .03; }
.tmap__tierlabel { font-size: 12.5px; fill: var(--fg-1); letter-spacing: .02em; }
.tmap__tiersub { font-size: 9px; fill: var(--fg-3); font-family: var(--font-mono); }

/* --- 扇区列 --- */
.tmap__secname { font-size: 13px; fill: var(--fg-0); }
.tmap__secscale { font-size: 9.5px; fill: var(--fg-3); font-family: var(--font-mono); }
.tmap__secrule { stroke: var(--line-1); stroke-width: 1; stroke-dasharray: 3 6; }
.tmap__inherittext { font-size: 10px; fill: var(--fg-3); opacity: .7; font-style: italic; }

/* --- 检验关系 --- */
.tmap__edge {
  fill: none;
  stroke: var(--am);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: .32;
  transition: opacity .15s, stroke-width .15s;
}
.tmap__edge.is-to-base { stroke: var(--cy-dim); opacity: .22; stroke-dasharray: 2 5; }
.tmap__edge.is-active { stroke: var(--cy); opacity: .95; stroke-width: 1.7; stroke-dasharray: none; }
.tmap__edge.is-dim { opacity: .05; }

/* --- 节点：基座 / 裂缝 / 前沿 --- */
.tmap__node { cursor: pointer; outline: none; }
.tmap__node rect { transition: fill .15s, stroke-width .15s; }

.tmap__node.is-base rect {
  fill: var(--bg-2);
  stroke: var(--cy);
  stroke-width: 1.6;
}
.tmap__node.is-base .tmap__nodename { fill: var(--fg-0); font-size: 13px; }

.tmap__node.is-crack rect {
  fill: var(--bg-2);
  stroke: var(--rd);
  stroke-width: 1.4;
  stroke-dasharray: 5 3;
}
.tmap__node.is-crack .tmap__nodename { fill: var(--rd); font-size: 13px; }

.tmap__node.is-frontier rect {
  fill: transparent;
  stroke: var(--am);
  stroke-width: 1.1;
  stroke-dasharray: 4 3;
}
.tmap__node.is-frontier .tmap__chipname { fill: var(--fg-1); font-size: 11.5px; }

.tmap__node:hover rect, .tmap__node:focus-visible rect, .tmap__node.is-active rect {
  fill: var(--bg-3);
}
.tmap__node.is-active rect { stroke-width: 2.4; }
.tmap__node.is-dim { opacity: .13; }

/* --- 详情卡 --- */
.tmap__detail {
  margin-top: 14px;
  border-top: 1px solid var(--line-1);
  padding-top: 14px;
}
.tmap-detail__empty { margin: 0; font-size: 13px; color: var(--fg-3); }
.tmap-detail__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px;
}
.tmap-detail__name { font-size: 15.5px; color: var(--fg-0); font-weight: 600; }
.tmap-detail__badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--fg-2);
}
.tmap-detail__badge.is-base { border-color: var(--cy-dim); color: var(--cy); }
.tmap-detail__badge.is-crack { border-color: var(--rd); color: var(--rd); border-style: dashed; }
.tmap-detail__badge.is-frontier { border-color: var(--am-dim); color: var(--am); border-style: dashed; }
.tmap-detail__meta { font-size: 11.5px; color: var(--fg-3); font-family: var(--font-mono); }
.tmap-detail__note { margin: 0 0 8px; font-size: 13.5px; color: var(--fg-1); line-height: 1.75; }
.tmap-detail__targets { margin: 0; font-size: 12.5px; color: var(--fg-2); }

.tmap__error { padding: 40px 0; text-align: center; color: var(--fg-3); font-size: 13px; }

/* --- 参考资料区 --- */
.tmap-refs {
  margin-top: 26px;
  border: 1px solid var(--line-1);
  border-radius: 12px;
  padding: 18px 20px;
  background: var(--bg-1);
}
.tmap-refs h2 {
  margin: 0 0 10px;
  font-size: 13px; font-weight: 600; color: var(--fg-1);
  letter-spacing: .02em;
}
.tmap-refs p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.8; color: var(--fg-2); }
.tmap-refs ul { margin: 0; padding-left: 18px; }
.tmap-refs li { font-size: 12.5px; line-height: 1.85; color: var(--fg-2); }
.tmap-refs li b { color: var(--fg-1); font-weight: 500; }
.tmap-refs__sub {
  margin: 18px 0 8px;
  font-size: 12.5px; font-weight: 600; color: var(--fg-1);
}
.tmap-refs__sub:first-of-type { margin-top: 4px; }
.tmap-refs__links { margin: 0 0 4px; padding-left: 18px; }
.tmap-refs__links li { font-size: 12.5px; line-height: 1.85; color: var(--fg-3); margin-bottom: 4px; }
.tmap-refs__links a {
  color: var(--cy); text-decoration: none;
  border-bottom: 1px solid var(--cy-dim);
}
.tmap-refs__links a:hover { color: var(--fg-0); border-bottom-color: var(--fg-0); }
.tmap-refs__note {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line-2);
  font-size: 12px; color: var(--fg-3); line-height: 1.8;
}

@media (max-width: 760px) {
  .tmap { padding: 10px 10px 12px; border-radius: 12px; }
  .tmap__svg { min-width: 980px; }
  .tmap__hint--wide { display: none; }
  .tmap__hint--narrow { display: inline; }
  .tmap-refs { padding: 14px 14px; }
}

/* 模型地图页尾的补充入口：全景是补充信息，不占主入口位置 */
.map-more {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin: 28px 0 0;
  font-size: 12.5px; line-height: 1.8; color: var(--fg-3);
}
.map-more a {
  color: var(--fg-2); text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
.map-more a:hover { color: var(--cy); border-bottom-color: var(--cy-dim); }

/* ============================================================
   关于页 · 名字（A-O-LIB-A 的字母分解）
   ============================================================ */
.brandname {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 22px 0 14px;
}
.brandname__seg {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-1);
}
.brandname__seg b {
  font-family: var(--font-mono); font-size: 14px;
  letter-spacing: .1em; font-weight: 600;
  color: var(--cy);
}
.brandname__seg span { font-size: 12.5px; color: var(--fg-2); }
.brandname__note {
  margin: 0 0 26px;
  font-size: 12.5px; line-height: 1.8; color: var(--fg-3);
}
.brandname__note code {
  font-family: var(--font-mono); font-size: 11.5px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--bg-2); color: var(--fg-1);
}
.brandname__cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px 30px;
}
.brandname__cols h3 {
  font-size: 13px; margin: 0 0 8px;
  color: var(--fg-0); letter-spacing: .01em;
}
.brandname__cols p {
  margin: 0; font-size: 13px; line-height: 1.8; color: var(--fg-1);
}
.brandname__sum {
  margin: 26px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line-1);
  font-family: var(--font-mono); font-size: 13px;
  color: var(--fg-2); letter-spacing: .04em;
}
@media (max-width: 760px) {
  .brandname__cols { grid-template-columns: 1fr; gap: 18px; }
  .brandname__seg { padding: 7px 11px; }
  .brandname__seg b { font-size: 13px; }
}

/* --- 全景图：基座层内的极限退化边、裂缝归属边 --- */
.tmap__link {
  fill: none;
  stroke: var(--cy-dim);
  stroke-width: 1.1;
  opacity: .42;
  transition: opacity .15s, stroke .15s;
}
.tmap__link.is-instance { stroke-dasharray: 2 3; }
.tmap__link.is-active { stroke: var(--cy); opacity: .9; }
.tmap__link.is-dim { opacity: .04; }
.tmap__linklabel {
  font-family: var(--font-mono); font-size: 9px;
  fill: var(--cy); opacity: 0;
  transition: opacity .15s;
}
.tmap__link.is-active .tmap__linklabel { opacity: 1; }

.tmap__cracklink {
  fill: none;
  stroke: var(--rd);
  stroke-width: .9;
  stroke-dasharray: 2 4;
  opacity: .17;
  transition: opacity .15s;
}
.tmap__cracklink.is-active { opacity: .75; stroke-width: 1.4; }
.tmap__cracklink.is-dim { opacity: .03; }

/* 间接相关：更淡、更疏的虚线 */
.tmap__edge.is-indirect { opacity: .14; stroke-dasharray: 2 5; }

/* 方法路线 / 工程平台：不是「在检验某条裂缝」，视觉上要退一层 */
.tmap__node.is-capability rect { stroke: var(--am); stroke-dasharray: 1 3; opacity: .8; }
.tmap__node.is-build rect { stroke: var(--fg-3); stroke-dasharray: 1 3; opacity: .7; }
.tmap__node.is-build .tmap__chipname { fill: var(--fg-2); }

.tmap-detail__param {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--cy);
}

/* ============================================================
   模型关系图（model-graph.html）
   节点 = 可计算的模型；边 = 换模型的理由，带判据与阈值。
   ============================================================ */
.mgraph {
  border: 1px solid var(--line-1);
  border-radius: 14px;
  background: var(--bg-1);
  padding: 14px 16px 16px;
}
.mgraph__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.mgraph__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.mgraph__filters button {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--fg-2); font-size: 12.5px; font-family: inherit;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.mgraph__filters button:hover { color: var(--fg-0); border-color: var(--line-accent); }
.mgraph__filters button[aria-pressed="true"] {
  color: var(--fg-0); border-color: var(--cy-dim); background: var(--bg-2);
}
.mgraph__filters .dash {
  display: inline-block; width: 14px; height: 0;
  border-top: 2px solid; margin-right: 6px; vertical-align: middle;
}
.mgraph__hint { font-size: 11.5px; color: var(--fg-3); font-family: var(--font-mono); }
.mgraph__hint--narrow { display: none; }

.mgraph__canvas {
  position: relative; overflow-x: auto; overflow-y: hidden;
  margin: 6px -6px 0; padding: 0 6px;
  -webkit-overflow-scrolling: touch;
}
.mgraph__svg { display: block; width: 100%; height: auto; min-width: 920px; }
.mgraph__skeleton {
  height: 470px; border-radius: 10px;
  background: linear-gradient(100deg, var(--bg-2) 20%, var(--bg-3) 40%, var(--bg-2) 60%);
  background-size: 220% 100%;
  animation: mgraph-shimmer 1.4s linear infinite;
}
@keyframes mgraph-shimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .mgraph__skeleton { animation: none; } }

.mgraph__edge path {
  fill: none; stroke-width: 1.7; opacity: .82;
  transition: opacity .15s, stroke-width .15s;
}
.mgraph__edge.is-active path { opacity: .95; stroke-width: 2.2; }
.mgraph__edge.is-dim path { opacity: .06; }

.mgraph__node { cursor: pointer; outline: none; }
.mgraph__node rect {
  fill: var(--bg-2);
  stroke: var(--line-accent);
  stroke-width: 1.2;
  transition: fill .15s, stroke .15s;
}
.mgraph__node:hover rect, .mgraph__node:focus-visible rect {
  fill: var(--bg-3); stroke: var(--fg-2);
}
.mgraph__node.is-active rect {
  fill: var(--bg-3); stroke: var(--cy); stroke-width: 1.8;
}
.mgraph__node.is-dim { opacity: .18; }
.mgraph__name { font-size: 12.5px; fill: var(--fg-0); }
.mgraph__meta { font-size: 9.5px; fill: var(--fg-3); font-family: var(--font-mono); }

.mgraph__detail {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-1);
}
.mgraph-detail__empty { margin: 0; font-size: 13px; color: var(--fg-3); }
.mgraph-detail__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 8px;
}
.mgraph-detail__name { font-size: 15.5px; font-weight: 600; color: var(--fg-0); }
.mgraph-detail__frame {
  font-size: 11px; font-family: var(--font-mono); color: var(--fg-3);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px;
}
.mgraph-detail__sum { margin: 0 0 10px; font-size: 13.5px; line-height: 1.75; color: var(--fg-1); }
.mgraph-detail__kv {
  display: grid; grid-template-columns: 52px 1fr;
  gap: 4px 12px; margin: 0 0 12px; font-size: 12.5px;
}
.mgraph-detail__kv dt { color: var(--fg-3); font-family: var(--font-mono); font-size: 11.5px; }
.mgraph-detail__kv dd { margin: 0; color: var(--fg-1); }
.mgraph-detail__rels { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mgraph-detail__rel {
  display: grid; grid-template-columns: auto 1fr;
  gap: 3px 12px; padding: 9px 12px;
  border: 1px solid var(--line-1); border-radius: 8px;
  background: var(--bg-2);
}
.mgraph-detail__type {
  grid-column: 1; align-self: start;
  font-size: 10.5px; font-family: var(--font-mono);
  padding: 2px 7px; border-radius: 4px; border: 1px solid;
  white-space: nowrap;
}
.mgraph-detail__type.is-limit { color: var(--cy); border-color: var(--cy-dim); }
.mgraph-detail__type.is-correction { color: var(--am); border-color: var(--am-dim); }
.mgraph-detail__type.is-description-change { color: var(--vi); border-color: var(--vi); }
.mgraph-detail__type.is-coupling { color: var(--rd); border-color: var(--rd); }
.mgraph-detail__route { grid-column: 2; font-size: 13px; color: var(--fg-0); }
.mgraph-detail__cond { grid-column: 2; font-size: 12.5px; color: var(--fg-1); }
.mgraph-detail__crit {
  grid-column: 2; font-size: 11.5px; color: var(--cy);
  font-family: var(--font-mono);
}
.mgraph-detail__why { grid-column: 2; font-size: 12px; color: var(--fg-3); line-height: 1.7; }
.mgraph-detail__foot { margin-top: 12px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 14px; }
.mgraph-detail__demo { color: var(--cy); text-decoration: none; border-bottom: 1px solid var(--cy-dim); }
.mgraph-detail__demo.is-secondary { color: var(--fg-2); border-bottom-color: var(--line-2); }
.mgraph-detail__demo.is-secondary:hover { color: var(--cy); border-bottom-color: var(--cy-dim); }
.mgraph-detail__nodemo { color: var(--fg-3); }
.mgraph__error { padding: 40px 0; text-align: center; color: var(--fg-3); font-size: 13px; }

@media (max-width: 760px) {
  .mgraph { padding: 10px 10px 12px; border-radius: 12px; }
  .mgraph__svg { min-width: 960px; }
  .mgraph__hint--wide { display: none; }
  .mgraph__hint--narrow { display: inline; }
  .mgraph-detail__rel { padding: 8px 10px; }
}