.tree { --p: var(--sc-p, 0); color: #eef3df; }
  .tree [data-sc-stage] { height: 100vh; height: 100svh; background: var(--forest); overflow: hidden; }
  .tree__intro { position: absolute; left: var(--sc-gutter); top: 9vh; width: min(30rem, 34vw); z-index: 4; }
  .tree__intro p { position: absolute; inset: 0 auto auto 0; margin: 0; font-size: var(--sc-t-2xl); line-height: 1.06; letter-spacing: -.03em; font-weight: 600; }
  .tree__intro small { display: block; font-size: var(--sc-t-base); font-weight: 400; letter-spacing: 0; line-height: 1.5; margin-top: .8rem; opacity: .78; }
  .tree__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .tree__lines path { fill: none; stroke: #c6ec6a; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 0)); opacity: .55; transition: opacity .3s, stroke-width .3s; }
  .tree__lines path.lit { opacity: 1; stroke-width: 4; }
  .tree__lines path.pulse { animation: pulse 1.1s ease-out; }
  @keyframes pulse { 0% { stroke-width: 9; opacity: 1; } 100% { stroke-width: 4; } }
  .tree__node { position: absolute; width: var(--w, 15vw); max-width: 17rem; translate: -50% -50%; left: var(--x); top: var(--y); background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: center; font: inherit;
    opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 26px)) scale(calc(.94 + var(--o, 0) * .06)); }
  .tree__node img { width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgb(0 0 0 / .35)); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
  .tree__node:hover img, .tree__node.on img { transform: translateY(-4px) scale(1.03); }
  .tree__node b, .tree__node small { width: fit-content; margin-inline: auto; background: var(--forest); padding-inline: .4rem; border-radius: 6px; }
  .tree__node b { display: block; font-size: var(--sc-t-base); margin-top: -.2rem; }
  .tree__node small { display: block; font-size: var(--sc-t-xs); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: .15rem; }
  .tree__node.on b { color: #c6ec6a; }
  .rename { position: absolute; left: var(--sc-gutter); bottom: 11vh; width: min(22rem, 28vw); z-index: 5; background: #1f3a26; border-radius: var(--sc-r-lg); padding: 1.1rem 1.2rem;
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / .6); opacity: var(--ro, 0); transform: translateY(calc((1 - var(--ro, 0)) * 20px)); }
  .rename label { display: block; font-size: var(--sc-t-sm); font-weight: 600; margin-bottom: .5rem; }
  .rename input { width: 100%; font: inherit; font-size: var(--sc-t-lg); font-weight: 700; background: #eef3df; color: var(--forest); border: 0; border-radius: var(--sc-r-md); padding: .55rem .8rem; }
  .rename p { margin: .7rem 0 0; font-size: var(--sc-t-sm); line-height: 1.45; opacity: .82; }
  .rename code { font-family: inherit; background: rgb(198 236 106 / .16); color: #c6ec6a; padding: .05rem .35rem; border-radius: 5px; }

.tree{--forest:#1e422c;color:#f0f6e4;margin:0 14px 35px 0}.tree [data-sc-stage]{border:6px solid #fff;border-radius:34px;background:radial-gradient(ellipse at 15% 0%,#8bab6275,transparent 60%),radial-gradient(ellipse at 90% 80%,#467e5150,transparent 60%),linear-gradient(130deg,#365d36,#183d2a);box-shadow:0 20px 45px #1f46261a}.tree__intro{left:4%;top:7vh;width:28%;max-width:350px}.tree__eyebrow{display:block;font-size:9px;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;color:#c1d7a6;max-width:230px}.tree__intro p{top:36px;font-family:'DM Sans',sans-serif;font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.045em;line-height:1.06}.tree__intro small{font-size:.8rem;color:#c4d4b2;line-height:1.6}.tree__node{--w:15%;max-width:210px}.tree__node img{filter:drop-shadow(0 17px 15px #0b271e4d)}.tree__node b,.tree__node small{background:#24482fdf;border:1px solid #bcd19d1f;border-radius:999px;padding:5px 10px}.tree__node b{font-size:.85rem;font-weight:500;letter-spacing:-.02em;margin-top:0}.tree__node small{font-size:.53rem;letter-spacing:.05em;color:#c1d7a6;border:0;opacity:1;padding:4px 8px}.tree__node.on b{color:#e0f6b7;border-color:#c6ec6a99;box-shadow:0 5px 15px #102d1b40}.tree__lines path{stroke:#cce99c;stroke-width:2.3;opacity:.5}.tree__lines path.lit{stroke:#e3ffb8;stroke-width:4;opacity:1}.rename{left:4%;bottom:9vh;width:27%;max-width:300px;background:linear-gradient(140deg,#ffffff19,#ffffff08);border:1px solid #e9ffd940;backdrop-filter:blur(16px);border-radius:20px;padding:18px;box-shadow:0 15px 30px #09271b20}.rename label{font-size:.75rem;font-weight:500;color:#eef8df}.rename input{background:#f1f7e7;color:#24442b;border-radius:12px;font-size:1.1rem;font-weight:500;box-shadow:inset 0 1px 2px #0f271411;outline-offset:4px}.rename p{font-size:.68rem;line-height:1.6;color:#ccdfb7;opacity:1}.rename code{background:#cde6a21a;color:#e0f6b7}.tree__node:focus-visible,.rename input:focus-visible{outline:3px solid #e0f6b7;outline-offset:5px}@media(max-width:860px){.tree{margin:0 0 25px}.tree [data-sc-stage]{border-width:4px;border-radius:27px}.tree__intro{top:102px;left:6%;right:6%;width:auto;max-width:none}.tree__eyebrow{font-size:8px;max-width:none}.tree__intro p{font-size:1.65rem;top:25px;max-width:95%;line-height:1.05}.tree__intro small{font-size:.72rem;line-height:1.5;margin-top:8px;max-width:80%}.tree__node{--w:29vw;max-width:140px}.tree__node b{font-size:.65rem;padding:4px 7px;white-space:nowrap}.tree__node small{font-size:.43rem;padding:3px 6px;white-space:nowrap}.rename{left:6%;right:6%;width:auto;max-width:none;bottom:3vh;padding:13px 15px;border-radius:17px}.rename p{display:none}.rename label{font-size:.68rem;margin-bottom:7px}.rename input{font-size:.95rem;padding:8px 10px;border-radius:10px}.tree__lines path{stroke-width:2}.tree__lines path.lit{stroke-width:3.5}}@media(prefers-reduced-motion:reduce){.tree__node,.rename{opacity:1!important;transform:none!important}.tree__lines path{stroke-dashoffset:0!important}.tree__node img,.tree__lines path{transition:none!important}.tree__lines path.pulse{animation:none!important}}