/* 格物 · 设计基础（v2 · Apple 式设计语言）
   原则：清晰（Clarity）· 谦让（Deference）· 层次（Depth）。展品是主角，界面退后。
   首页与所有展品共用。 */

:root {
  color-scheme: dark;

  /* 色彩：纯黑展厅 + 科技蓝 */
  --bg: #000;
  --bg-1: #0a0a0c;          /* 一级抬升：分区底 */
  --bg-2: #141416;          /* 二级抬升：卡片 */
  --bg-3: #1c1c1f;          /* 三级抬升：卡片内控件 */
  --label: #f5f5f7;
  --label-2: rgba(235, 235, 245, 0.68);
  --label-3: rgba(235, 235, 245, 0.44);
  --label-4: rgba(235, 235, 245, 0.24);
  --sep: rgba(255, 255, 255, 0.09);
  --sep-2: rgba(255, 255, 255, 0.16);
  --fill: rgba(120, 120, 128, 0.28);
  --fill-2: rgba(120, 120, 128, 0.2);
  --fill-3: rgba(120, 120, 128, 0.13);

  --accent: #1f8fff;        /* 科技蓝 */
  --accent-2: #3de1ff;      /* 冰蓝 */
  --accent-hi: #4aa8ff;     /* 深底上的文字链接 */
  --accent-soft: rgba(31, 143, 255, 0.18);
  --amber: #ffcf6b;
  --danger: #ff6a7a;
  --green: #7dffb0;
  /* 语义色：血液与电信号（图例、首页插图统一用这几个，不要另写色值） */
  --blood-poor: #4f7fe8;    /* 缺氧血 · 右心 */
  --blood-rich: #e8574b;    /* 富氧血 · 左心 */
  --elec: #ffc94d;          /* 电兴奋 */
  --air: #3fd4ff;           /* 吸入的空气 · 氧气 */
  --co2: #ffb44d;           /* 呼出的空气 · 二氧化碳 */
  --urine: #f3d36b; --water: #5fc8ff; --glucose: #5fe08a; --salt: #f4f6ff; /* 尿与原尿成分 */
  --portal: #9a8cff; /* 门静脉血（带养分） */
  --parietal: #ff8a8a; --chief: #8f6ad8; /* 胃腺的壁细胞、主细胞 */
  --stool: #b8834e; --fat: #fff0c4; --flora: #c49bff; --bile: #b7d94a; /* 肠：粪便、脂肪（乳糜）、肠道菌群、胆汁 */
  --insulin: #5aa8ff; --glucagon: #ff8ac0; --enzyme: #f3c26b; /* 胰：胰岛素、胰高血糖素、胰液 */
  --seg-s1: #ffd24d; --seg-s2: #bf7bff; --seg-s3: #ff6fa8; --seg-s4: #ff9f6b; --seg-s5: #34c759; --seg-s6: #2f7bff; --seg-s7: #4fc3f7; --seg-s8: #5fe08a; --seg-s9: #ff5a4f; --seg-s10: #d9c29a; /* 肝段、肠段教学色 */
  --t-cortex: #ff6b5a; --t-medulla: #9b6bff; --t-collect: #ffd24d; /* 肾分层教学色 */
  --lobe-rul: #4fc3f7; --lobe-rml: #34c759; --lobe-rll: #2f7bff; --lobe-lul: #bf7bff; --lobe-lll: #ff6fa8; /* 肺叶教学色 */

  /* 材质：Liquid Glass（控件）与 Frosted（承载文字的面板） */
  --glass: rgba(38, 38, 44, 0.42);
  --glass-hi: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(20px) saturate(190%) brightness(1.08);
  --frost: rgba(22, 22, 26, 0.66);
  --frost-blur: blur(40px) saturate(180%);
  --spec: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  --lift: 0 24px 60px -18px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.25);

  /* 圆角：同心。外层面板 22，里面的分组 12，分组里的控件 8，图标块 7，按钮一律胶囊 */
  --r-xl: 22px;
  --r-lg: 22px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-icon: 7px;
  /* 分组：比面板略亮的一层，0.5px 发丝描边 */
  --group: rgba(255, 255, 255, 0.05);
  --group-edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --hair: rgba(255, 255, 255, 0.1);   /* 发丝分隔线，0.5px */
  /* 系统色（只用于图标块，主色仍是科技蓝） */
  --sys-red: #ff453a; --sys-pink: #ff375f; --sys-yellow: #ffcc00; --sys-teal: #40c8e0;
  --sys-indigo: #5e5ce6; --sys-purple: #bf5af2; --sys-gray: #8e8e93; --sys-green: #30d158;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  /* 旧变量名保留别名，方便过渡 */
  --font-ui: var(--font);
  --font-serif: var(--font-display);
  --ink: var(--label);
  --ink-2: var(--label-2);
  --ink-3: var(--label-3);
  --ink-4: var(--label-4);
  --line: var(--sep);
  --line-2: var(--sep-2);

  /* 动效：iOS 弹簧曲线 */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --fs: 1;
}
/* 儿童模式：字大一号、控件更大 */
html.kid { --fs: 1.14; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  color: var(--label);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  font-feature-settings: "tnum" 0;
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, q { text-wrap: pretty; }
::selection { background: rgba(31, 143, 255, 0.45); color: #fff; }
.num, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* ---------- 材质 ---------- */
/* Liquid Glass：透明、带高光边缘，浮在内容之上 */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--r-lg);
  box-shadow: var(--spec), var(--lift);
  isolation: isolate;
}
/* 顶部高光：模拟玻璃边缘的折射 */
.glass::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04) 32%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* 承载大段文字的面板：更厚的磨砂 */
.frost {
  background: var(--frost);
  -webkit-backdrop-filter: var(--frost-blur);
  backdrop-filter: var(--frost-blur);
}

/* ---------- 图标 ---------- */
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 按钮 ---------- */
.btn, .tog, .icon-btn, .say {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; cursor: pointer; color: var(--label);
  transition: transform 0.35s var(--spring), background-color 0.2s, color 0.2s, box-shadow 0.3s, opacity 0.25s;
  -webkit-user-select: none; user-select: none;
}
.btn:active, .icon-btn:active, .say:active { transform: scale(0.95); transition-duration: 0.12s; }
/* 到头了、暂时不能用：看得出来，点了也不动 */
.btn:disabled { opacity: 0.32; cursor: default; }
.btn:disabled:active { transform: none; }
.btn:focus-visible, .tog:focus-visible, .icon-btn:focus-visible, .say:focus-visible, .seg button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* 胶囊按钮：高 32（大号 38），13px 字 */
.btn { height: calc(32px * var(--fs)); padding: 0 16px; border-radius: 999px; font-size: calc(13px * var(--fs)); font-weight: 500; line-height: 1; background: var(--fill-2); }
.btn:hover { background: var(--fill); }
.btn .ic { width: 15px; height: 15px; stroke-width: 1.9; }
.btn.primary { background: var(--accent); color: #fff; font-weight: 600; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.3), 0 6px 18px -8px rgba(31, 143, 255, 0.9); }
.btn.primary:hover { background: #3a9dff; }
.btn.wide { width: 100%; height: calc(38px * var(--fs)); font-size: calc(14px * var(--fs)); }
.btn.primary .ic:last-child { transition: transform 0.4s var(--spring); }
.btn.primary:hover .ic:last-child { transform: translateX(2px); }
.btn.ghost { background: none; color: var(--accent-hi); padding-left: 6px; padding-right: 6px; }
.btn.ghost:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 分组（macOS 系统设置式） ----------
   一个分组 = 一块略亮的圆角底 + 若干行；行与行之间 0.5px 分隔线，从文字起点开始画（不穿过图标）。 */
.group { border-radius: var(--r-md); background: var(--group); box-shadow: var(--group-edge); overflow: hidden; }
.group > * { position: relative; }
.group > * + *::before { content: ""; position: absolute; left: var(--sep-x, 12px); right: 0; top: 0; height: 0.5px; background: var(--hair); pointer-events: none; }
.group > .tog { --sep-x: calc(22px + 24px * var(--fs)); }
.foot { margin: 6px 12px 0; font-size: 12px; line-height: 1.5; color: var(--label-3); }

/* 开关行：图标块 · 名称 · 开关 */
.tog {
  display: grid; grid-template-columns: calc(24px * var(--fs)) 1fr auto; align-items: center; gap: 10px;
  width: 100%; min-height: calc(40px * var(--fs)); padding: 0 12px; border-radius: 0;
  background: none; color: var(--label); text-align: left;
  font-size: calc(13.5px * var(--fs)); font-weight: 400; line-height: 1.3;
}
.tog:hover { background: rgba(255, 255, 255, 0.035); }
.tog:active { background: rgba(255, 255, 255, 0.07); }
.tog .ti { width: calc(24px * var(--fs)); height: calc(24px * var(--fs)); border-radius: var(--r-icon); display: grid; place-items: center; color: #fff; background: var(--tint, var(--sys-gray)); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.25); }
.tog .ti .ic { width: calc(15px * var(--fs)); height: calc(15px * var(--fs)); stroke-width: 2; }
/* 开关：34×20 的轨道，16 的白色圆钮 */
.tog .sw { position: relative; width: 34px; height: 20px; border-radius: 10px; background: rgba(120, 120, 128, 0.36); transition: background-color 0.25s var(--ease); }
.tog .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(0, 0, 0, 0.04); transition: transform 0.35s var(--spring), width 0.2s var(--ease); }
.tog:active .sw::after { width: 19px; }
.tog.on .sw { background: var(--accent); }
.tog.on .sw::after { transform: translateX(14px); }
.tog.on:active .sw::after { transform: translateX(11px); }

/* 圆形图标按钮（visionOS 式：打开时变为白底）：34 */
.icon-btn { width: 34px; height: 34px; border-radius: 50%; padding: 0; background: transparent; color: var(--label); }
.icon-btn .ic { width: 17px; height: 17px; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
.icon-btn.on { background: #f5f5f7; color: #1d1d1f; }
.icon-btn > span {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px);
  white-space: nowrap; font-size: 12px; font-weight: 500; padding: 5px 9px; border-radius: 7px;
  background: rgba(40, 40, 44, 0.94); color: var(--label); box-shadow: var(--spec), 0 8px 20px rgba(0, 0, 0, 0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.3s var(--ease);
}
.icon-btn:hover > span, .icon-btn:focus-visible > span { opacity: 1; transform: translate(-50%, 0); transition-delay: 0.12s; }

/* 朗读按钮：28（行内 24） */
.say { width: 28px; height: 28px; border-radius: 50%; padding: 0; flex: none; color: var(--accent-hi); background: var(--accent-soft); }
.say .ic { width: 15px; height: 15px; }
.say:hover { background: rgba(31, 143, 255, 0.3); }
.say.playing { color: #fff; background: var(--accent); animation: sayPulse 1.6s var(--ease) infinite; }
@keyframes sayPulse { 0% { box-shadow: 0 0 0 0 rgba(31, 143, 255, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(31, 143, 255, 0); } }
/* 正在读的句子：整句一层浅蓝圆角底（跨行时每行各自圆角），文字变白；还没读的稍暗，读过的更暗。
   不用"下半截荧光笔"式的色块：只铺半截，看起来像没画完。 */
.speaking .sent { color: var(--label-2); padding: 0.08em 0.18em; margin: 0 -0.18em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color 0.35s, background-color 0.35s; }
.speaking .sent.now { color: #fff; background-color: rgba(31, 143, 255, 0.24); }
.speaking .sent.done { color: var(--label-3); }

/* 分段控件（macOS）：高 28，外圆角 8，选中块圆角 6 */
.seg { position: relative; display: flex; gap: 0; padding: 2px; border-radius: var(--r-sm); background: rgba(118, 118, 128, 0.22); box-shadow: inset 0 0.5px 1px rgba(0, 0, 0, 0.25); }
.seg button {
  position: relative; z-index: 1; flex: 1; border: 0; background: none; cursor: pointer; white-space: nowrap;
  height: calc(26px * var(--fs)); padding: 0 4px; border-radius: 6px; font-size: calc(12.5px * var(--fs)); font-weight: 500; color: var(--label-2);
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.seg button + button::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 0.5px; background: rgba(255, 255, 255, 0.18); transition: opacity 0.2s; }
.seg button.on::before, .seg button.on + button::before { opacity: 0; }
.seg button:hover { color: var(--label); }
.seg button.on { color: #fff; font-weight: 600; background: #636369; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255, 255, 255, 0.2); }

/* 滑块（macOS）：4px 轨道、18px 白色圆钮；--p 是已填充比例，由脚本写入 */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; margin: 0; --p: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(120, 120, 128, 0.36) var(--p)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(120, 120, 128, 0.36); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.08); transition: transform 0.3s var(--spring); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.1); }
input[type=range]:disabled { opacity: 0.35; cursor: default; }

/* 依次浮现 */
.rise > * { animation: rise 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }

/* 轻提示：灵动岛 */
/* 纯黑舞台上纯黑胶囊会隐形：用更亮的玻璃 + 高光描边 + 一圈蓝色微光 */
.toast { position: fixed; left: 50%; top: 14px; z-index: 60; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #fff; background: rgba(44, 44, 50, 0.82); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: var(--spec), 0 0 0 0.5px rgba(255, 255, 255, 0.22), 0 0 24px -4px rgba(31, 143, 255, 0.45), 0 16px 40px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; white-space: nowrap; }
.toast.show { animation: island 3s var(--ease) both; }
@keyframes island {
  0% { opacity: 0; transform: translateX(-50%) scale(0.4, 0.7); }
  9% { opacity: 1; transform: translateX(-50%) scale(1.04, 1); }
  15%, 84% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.6, 0.8); }
}
@media (max-width: 900px) {
  .toast { font-size: 12.5px; max-width: calc(100vw - 24px); white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* 跨页视图过渡：首页 ⇄ 展品、展品 ⇄ 展品之间交叉淡化，不闪白、不硬切 */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.38s; animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }