/* 3D 生物 · 全站共用的 iOS 风格样式。颜色取 iOS 系统色，字号取 iOS 动态字体的默认档。 */
:root{
  --bg:#f2f2f7; --card:#fff; --elev:#fff;
  --label:#000; --label2:rgba(60,60,67,.6); --label3:rgba(60,60,67,.3);
  --sep:rgba(60,60,67,.18); --fill:rgba(118,118,128,.12); --thumb:#fff;
  --tint:#007aff; --tint-press:rgba(0,122,255,.12);
  --orange:#c93400; --teal:#0071a4; --yellow:#9a6700; --red:#d70015;
  --nav:rgba(249,249,249,.8);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#000; --card:#1c1c1e; --elev:#2c2c2e;
  --label:#fff; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.6); --fill:rgba(118,118,128,.24); --thumb:#636366;
  --tint:#0a84ff; --tint-press:rgba(10,132,255,.2);
  --orange:#ff9f0a; --teal:#64d2ff; --yellow:#ffd60a; --red:#ff453a;
  --nav:rgba(22,22,24,.78);
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--label);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}

/* ── 导航栏：滚过大标题后出现毛玻璃和居中小标题 ── */
.nav{--maxw:1200px;position:sticky;top:0;z-index:20;height:calc(44px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right),calc((100% - var(--maxw)) / 2 + 8px)) 0 max(8px,env(safe-area-inset-left),calc((100% - var(--maxw)) / 2 + 8px));
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;transition:background-color .25s,box-shadow .25s}
.nav.solid{background:var(--nav);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 .5px 0 var(--sep)}
.nav .back{justify-self:start;display:inline-flex;align-items:center;gap:2px;height:44px;padding:0 8px 0 2px;color:var(--tint);font-size:17px;border-radius:8px}
.nav .back svg{width:13px;height:21px;margin-right:4px}
.nav .back:active{opacity:.35}
.nav .title{font-size:17px;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.nav.solid .title{opacity:1;transform:none}

.large-title{font-size:34px;line-height:1.2;font-weight:700;letter-spacing:.01em;margin:4px 0 0}
.lead{font-size:15px;color:var(--label2);margin:6px 0 0;line-height:1.5}

/* ── 内嵌分组列表 ── */
.section-head{font-size:13px;color:var(--label2);margin:0 16px 7px;padding-top:28px;display:flex;justify-content:space-between}
.section-foot{font-size:13px;color:var(--label2);margin:7px 16px 0;line-height:1.45}
.group{background:var(--card);border-radius:12px;overflow:hidden}
.row{position:relative;display:flex;align-items:center;gap:14px;min-height:44px;padding:10px 16px;background:var(--card);transition:background-color .15s}
.row+.row::before{content:"";position:absolute;top:0;right:0;left:var(--inset,16px);border-top:.5px solid var(--sep)}
a.row:active,summary.row:active{background:var(--fill)}
.row .body{flex:1;min-width:0}
.row .t{font-size:17px;line-height:1.35;text-wrap:pretty}
.row .s{font-size:14px;color:var(--label2);margin-top:2px;line-height:1.4}
.row .detail{color:var(--label2);font-size:17px;white-space:nowrap}
.chev{flex:none;width:8px;height:14px;color:var(--label3)}
.row.empty{justify-content:center;color:var(--label2);font-size:15px;min-height:52px}

/* ── 分段控件 ── */
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:44px;padding:2px;border-radius:10px;background:var(--fill)}
.seg .thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / var(--n,3));border-radius:8px;background:var(--thumb);
  box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);transform:translateX(calc(100% * var(--i,0)));transition:transform .32s cubic-bezier(.3,.7,.35,1)}
.seg button{position:relative;z-index:1;border:0;background:transparent;font-size:14px;font-weight:500;color:var(--label);cursor:pointer;border-radius:8px;transition:opacity .15s}
.seg button[aria-selected=true]{font-weight:600}
.seg button:active{opacity:.55}

/* ── 按钮 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:44px;padding:0 18px;border:0;border-radius:22px;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .15s,transform .15s}
.btn.filled{background:var(--tint);color:#fff}
.btn.plain{background:transparent;color:var(--tint);padding:0 10px}
.btn:active:not(:disabled){opacity:.6}
.btn:disabled{color:var(--label3);cursor:default}

.footnote{font-size:13px;color:var(--label2);line-height:1.5}

@media (hover:hover) and (pointer:fine){
  a.row:hover{background:var(--fill)}
  .btn.plain:hover:not(:disabled){background:var(--tint-press)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}