/* Landing / sign-in hero world tree (owner pick 2026-10-16). Page-owned: id selectors + `.tree-*`
   only; not a pooled element. Canvas is built by /js/landing-tree.js; nothing sits behind text. */
#hero-tree{position:relative;height:240px;width:100%;max-width:420px;flex:none;pointer-events:none}
#hero-tree[hidden]{display:none}
#hero-tree::before{content:"";position:absolute;inset:6% 12% 18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),transparent)}
#hero-tree canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#hero-tree .tree-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#hero-tree .tree-label{position:absolute;left:0;top:0;margin:-10px 0 0 14px;height:20px;display:inline-flex;align-items:center;
  padding:0 7px;border-radius:999px;font-size:var(--fs-caption);font-weight:var(--fw-strong);white-space:nowrap;color:var(--fg);
  background:color-mix(in srgb,var(--bg-solid) 78%,transparent);box-shadow:var(--glass-lit);opacity:0;will-change:transform}
#hero-tree .tree-label.l{translate:-100% 0;margin-left:-14px}
@media (min-width:861px){
  #hero-tree{height:min(560px,70vh);max-width:none}
  #hero-tree .tree-label{height:22px;padding:0 9px}
}