.generation-lineage{margin:11px 0 0;padding:10px 0;border-top:1px solid #acc9d326;border-bottom:1px solid #acc9d326}
.generation-lineage[hidden]{display:none}
.generation-lineage header{margin-bottom:9px;color:#aac3ca;font-size:10px;line-height:1.4}
.generation-lineage nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.generation-lineage button{position:relative;min-width:0;padding:4px 0 8px;border:0;border-bottom:2px solid #aac3ca33;background:none;color:#7f99a3;font:10px/1.35 var(--font-ui);white-space:nowrap}
.generation-lineage button.active{color:#f0f8f9;border-bottom-color:var(--area-tone)}
.generation-lineage button.done{color:#b9cdd2;border-bottom-color:#a5c1cb80}
.generation-lineage button[data-link-step="0"].active{border-bottom-color:var(--trace-tone)}
.generation-lineage button:not(:last-child)::after{content:"›";position:absolute;right:-5px;top:3px;color:#587580;font-size:12px}
.generation-lineage .linkage-replay{margin-top:10px;padding:5px 8px;border:1px solid #acc9d330;border-radius:4px;background:#10232c;color:#bdd7de;font-size:10px}
.generation-lineage :is(button):focus-visible{outline:2px solid #a3e2eb;outline-offset:2px}
@media(max-width:540px){
  body.lineage-mode .panel{height:min(46vh,355px)}
  body.lineage-mode #step-description{display:none}
  body.lineage-mode>.globe-quality.story{display:none}
}