:root { --ink:#1c2b22; --leaf:#3f7d54; --order:#8a6d3b; --family:#4a7ba6;
  --bg:#f6f4ee; --panel:#fff; --line:#b9c7bd; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "PingFang SC", sans-serif;
  color: var(--ink); background: var(--bg); }
#topbar { display:flex; align-items:center; gap:1rem; padding:.6rem 1rem;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(246,244,238,.97), rgba(246,244,238,.80)),
    url('../assets/hero-poster.jpg') center/cover; }
#topbar h1 { font-size:1.1rem; margin:0; }
#breadcrumb { flex:1; font-size:.85rem; color:#5a6b5f; overflow:hidden; white-space:nowrap; }
#breadcrumb button { background:none; border:none; color:var(--family); cursor:pointer; }
#lang-toggle { border:1px solid var(--line); background:#fff; border-radius:6px;
  padding:.25rem .6rem; cursor:pointer; }
#stage { display:flex; height: calc(100vh - 50px); }
.tree-root { flex:1; overflow:hidden; position:relative; }
.tree-root svg { width:100%; height:100%; display:block; }
.panel-root { width: 340px; border-left:1px solid var(--line);
  background: var(--panel); overflow:auto; padding:1rem; }
@media (max-width: 720px) { .panel-root { position:fixed; inset:auto 0 0 0; width:100%;
  height:55vh; border-left:none; border-top:1px solid var(--line); } }
.panel-root h2 { margin:.2rem 0; }
.panel-root .latin { color:#7a8b7f; font-size:.85rem; margin:0 0 .6rem; }
.panel-root h3 { font-size:.9rem; margin:1rem 0 .3rem; color:#4a7ba6; }
.panel-root .src { margin-top:1rem; font-size:.75rem; color:#98a69b; }
#dive-btn { border:1px solid var(--line); background:#eef3ec; border-radius:6px;
  padding:.3rem .7rem; cursor:pointer; margin-bottom:.4rem; }
.ml-node { margin-left: .8rem; }
.ml-node > summary, .ml-node > span { padding:.35rem 0; cursor:pointer; display:block; }
.ml-node > summary { list-style: disclosure-closed; }
.atlas-figs { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin:.3rem 0; }
.atlas-figs img { width:100%; height:70px; object-fit:cover; border-radius:4px; border:1px solid var(--line); }
.atlas-list { display:flex; flex-direction:column; gap:.5rem; }
.sp-card { border:1px solid var(--line); border-radius:6px; padding:.4rem .5rem; background:#fbfcfa; }
.sp-name { font-size:.9rem; }
.sp-name .sp-au { color:#8a8f88; font-size:.8rem; }
.sp-dist { font-size:.75rem; color:#5a6b5f; margin-top:.15rem; }
.sp-links { margin-top:.3rem; display:flex; gap:.4rem; }
.sp-links a { font-size:.72rem; color:var(--family); text-decoration:none;
  border:1px solid var(--line); border-radius:4px; padding:.05rem .35rem; }
.atlas-more { align-self:flex-start; border:1px solid var(--line); background:#eef3ec;
  border-radius:6px; padding:.25rem .6rem; cursor:pointer; }