/* Demo Tree instrument — extracted accepted-lab visual grammar, scoped. */
[data-demo-tree-instrument]{
  --dti-earth:#5f3d25;
  --dti-canopy:#214f35;
  --centre-radius:82px;
  width:min(1080px,100%);
  margin:0 auto;
}
[data-demo-tree-instrument] .dti-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:end;
  margin:0 0 10px;
  padding:0 2px;
}
[data-demo-tree-instrument] .dti-head h2{
  margin:4px 0 3px;
  font:650 26px/1.08 var(--serif);
}
[data-demo-tree-instrument] .dti-head p{
  margin:0;
  color:var(--muted);
  font:12px/1.4 var(--serif);
}
[data-demo-tree-instrument] .dti-summary{
  text-align:right;
  color:var(--muted);
  font:12px/1.4 var(--serif);
}
[data-demo-tree-instrument] .dti-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:end;
  margin:0 0 10px;
}
[data-demo-tree-instrument] .dti-toolbar .instrument{
  flex:1 1 140px;
  min-width:0;
}
[data-demo-tree-instrument] .dti-evidence{
  display:flex;
  gap:6px;
  align-items:center;
  padding:3px;
}
[data-demo-tree-instrument] .dti-evidence-box{
  position:relative;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
  color:var(--ink);
  font:750 11px/1 var(--mono);
}
[data-demo-tree-instrument] .dti-evidence-box.base{
  border-style:solid;
  border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
  cursor:default;
  pointer-events:none;
}
[data-demo-tree-instrument] .dti-evidence-box.computed-toggle{
  border-style:dashed;
  border-color:var(--faint);
  background:transparent;
  color:var(--faint);
  opacity:.62;
  cursor:pointer;
}
[data-demo-tree-instrument] .dti-evidence-box.computed-toggle[aria-pressed="true"]{
  border-style:dashed;
  border-color:var(--ink);
  color:var(--ink);
  opacity:1;
}
[data-demo-tree-instrument] .dti-field{
  position:relative;
  height:clamp(560px,calc(100dvh - 270px),720px);
  min-height:560px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--field);
  overflow:hidden;
  touch-action:none;
  cursor:grab;
}
[data-demo-tree-instrument] .dti-field.is-panning{cursor:grabbing}
[data-demo-tree-instrument] .dti-field.is-panning .dti-plane{transition:none}
[data-demo-tree-instrument] .dti-plane{
  position:absolute;
  inset:0;
  transform:translate(var(--pan-x,0px),var(--pan-y,0px)) scale(var(--zoom,1));
  transform-origin:50% 50%;
  will-change:transform;
}
[data-demo-tree-instrument] .dti-svg{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}
[data-demo-tree-instrument] .dti-trunk{
  fill:none;
  stroke:var(--dti-earth);
  stroke-width:var(--stroke,9px);
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
[data-demo-tree-instrument] .dti-branch{
  fill:none;
  stroke:var(--dti-earth);
  stroke-width:var(--stroke,9px);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:var(--len,1);
  stroke-dashoffset:var(--len,1);
  animation:dtiGrow 880ms cubic-bezier(.22,.72,.24,1) forwards;
  animation-delay:calc(var(--order) * 95ms);
  vector-effect:non-scaling-stroke;
}
[data-demo-tree-instrument][data-tree-projection="canopy"] .dti-branch{
  stroke:var(--dti-canopy);
}
[data-demo-tree-instrument] .dti-branch.computed,
[data-demo-tree-instrument][data-tree-projection="canopy"] .dti-branch.computed{
  display:block;
  stroke-width:var(--stroke-computed,7px);
  stroke-dasharray:var(--dash,3px) var(--gap,16px);
  stroke-dashoffset:0;
  opacity:.7;
  animation:dtiTravel 7.2s steps(12,end) 1.3s infinite;
}
[data-demo-tree-instrument] .dti-branch.hanging,
[data-demo-tree-instrument] .dti-branch.vine{
  stroke-width:calc(var(--stroke,9px) * 1.2);
}
[data-demo-tree-instrument] .dti-branch.vine{opacity:.62}
[data-demo-tree-instrument] .dti-branch-reveal{
  fill:none;
  stroke:#fff;
  stroke-width:calc(var(--stroke,9px) + 8px);
  stroke-linecap:round;
  stroke-dasharray:var(--len,1);
  stroke-dashoffset:0;
  vector-effect:non-scaling-stroke;
}
[data-demo-tree-instrument] .dti-field[data-transition="true"] .dti-branch-reveal,
[data-demo-tree-instrument] .dti-field[data-layer-transition="computed"] .dti-branch-reveal{
  stroke-dashoffset:var(--len,1);
  animation:dtiGrow 880ms cubic-bezier(.22,.72,.24,1) var(--reveal-delay) forwards;
}
[data-demo-tree-instrument] .dti-zero{
  position:absolute;
  z-index:0;
  left:-50%;
  right:-50%;
  height:2.75px;
  background:var(--muted);
  opacity:.18;
  pointer-events:none;
  top:50%;
}
[data-demo-tree-instrument][data-tree-realm="world"] .dti-zero{
  background:#e6e7e2;
  opacity:.26;
}
[data-demo-tree-instrument] .dti-origin{
  position:absolute;
  z-index:5;
  left:50%;
  translate:-50% -50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--dti-earth);
  pointer-events:none;
}
[data-demo-tree-instrument] .dti-centre{
  position:absolute;
  left:50%;
  translate:-50% -50%;
  z-index:6;
  width:164px;
  height:164px;
  border-radius:50%;
  border:3px solid var(--ink);
  background:var(--panel);
  display:grid;
  place-items:center;
  padding:22px;
  text-align:center;
}
[data-demo-tree-instrument] .dti-centre span{
  font:650 15px/1.18 var(--serif);
}
[data-demo-tree-instrument] .dti-centre small{
  display:block;
  margin-bottom:5px;
  color:var(--faint);
  font:750 9px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
[data-demo-tree-instrument] .dti-node{
  position:absolute;
  z-index:5;
  translate:-50% -50%;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  border:3.25px solid var(--dti-earth);
  background:var(--panel);
  padding:0;
  cursor:grab;
  touch-action:none;
  opacity:0;
  animation:dtiArrive 340ms ease forwards;
  animation-delay:calc(220ms + var(--order) * 95ms);
}
[data-demo-tree-instrument][data-tree-projection="canopy"] .dti-node{
  border-color:var(--dti-canopy);
}
[data-demo-tree-instrument] .dti-node:active{cursor:grabbing}
[data-demo-tree-instrument] .dti-node.computed{
  border-width:1.5px;
  border-style:dashed;
  animation:none;
  opacity:1;
}
[data-demo-tree-instrument][data-tree-projection="earth"] .dti-node.computed{--size:22px!important}
[data-demo-tree-instrument] .dti-node.provenance-only{box-shadow:none}
[data-demo-tree-instrument] .dti-node.vine{background:color-mix(in srgb,var(--panel) 88%,var(--dti-canopy))}
[data-demo-tree-instrument] .dti-node.hanging{border-width:1.5px}
[data-demo-tree-instrument] .dti-node.hanging.selected{background:var(--dti-canopy)}
[data-demo-tree-instrument] .dti-node.hanging.computed{background:var(--panel)}
[data-demo-tree-instrument] .dti-node .dti-name{
  display:none;
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  translate:-50% 0;
  width:170px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:var(--ink);
  font:650 12px/1.25 var(--serif);
  text-align:center;
  overflow-wrap:anywhere;
}
[data-demo-tree-instrument][data-tree-projection="canopy"] .dti-node .dti-name{
  top:auto;
  bottom:calc(100% + 8px);
}
[data-demo-tree-instrument] .dti-node:hover .dti-name,
[data-demo-tree-instrument] .dti-node:focus-visible .dti-name,
[data-demo-tree-instrument] .dti-node[aria-pressed="true"] .dti-name{display:block}
[data-demo-tree-instrument] .dti-node[aria-pressed="true"] .dti-name{display:none}
[data-demo-tree-instrument] .dti-node[aria-pressed="true"]{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--dti-earth) 22%,transparent);
}
[data-demo-tree-instrument][data-tree-projection="canopy"] .dti-node[aria-pressed="true"]{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--dti-canopy) 22%,transparent);
}
[data-demo-tree-instrument] .dti-node.computed::after,
[data-demo-tree-instrument] .dti-node.hinge.computed::after{display:none}
[data-demo-tree-instrument] .dti-node.internal::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--dti-earth);
  pointer-events:none;
}
[data-demo-tree-instrument][data-tree-projection="canopy"] .dti-node.internal::after{
  background:var(--dti-canopy);
}
[data-demo-tree-instrument] .dti-node::before,
[data-demo-tree-instrument] .dti-joint::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:44px;
  height:44px;
  translate:-50% -50%;
  border-radius:50%;
}
[data-demo-tree-instrument] .dti-joint{
  position:absolute;
  z-index:4;
  translate:-50% -50%;
  width:12px;
  height:12px;
  border:1.25px solid var(--dti-earth);
  border-radius:50%;
  background:var(--panel);
  padding:0;
  cursor:grab;
}
[data-demo-tree-instrument] .dti-joint::after{display:none}
[data-demo-tree-instrument] .dti-joint:active{cursor:grabbing}
[data-demo-tree-instrument] .dti-joint.computed{
  border-width:.75px;
  border-style:dashed;
  animation:none;
}
[data-demo-tree-instrument][data-tree-projection="canopy"] .dti-joint{display:none}
[data-demo-tree-instrument] .dti-inspector{
  position:absolute;
  z-index:10;
  right:14px;
  top:14px;
  width:min(345px,calc(100% - 28px));
  padding:15px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--panel);
}
[data-demo-tree-instrument] .dti-inspector h2{
  margin:5px 0 8px;
  font:650 21px/1.15 var(--serif);
}
[data-demo-tree-instrument] .dti-inspector p{
  margin:0 0 9px;
  color:var(--muted);
  font:13px/1.45 var(--serif);
}
[data-demo-tree-instrument] .dti-fact{
  padding:8px 0;
  border-top:1px solid var(--line);
}
[data-demo-tree-instrument] .dti-fact strong,
[data-demo-tree-instrument] .dti-fact span{display:block}
[data-demo-tree-instrument] .dti-fact strong{
  font:700 10px/1.1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
[data-demo-tree-instrument] .dti-fact span{
  margin-top:4px;
  color:var(--muted);
  font:13px/1.4 var(--serif);
}
[data-demo-tree-instrument] .dti-nav{
  position:absolute;
  z-index:12;
  right:14px;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  backdrop-filter:blur(10px);
}
[data-demo-tree-instrument][data-tree-projection="earth"] .dti-nav{
  top:14px;
  bottom:auto;
}
[data-demo-tree-instrument] .dti-nav button{
  width:32px;
  height:32px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--panel);
  cursor:pointer;
  font-weight:800;
}
[data-demo-tree-instrument] .dti-nav button:last-child{
  width:auto;
  border-radius:999px;
  padding:0 10px;
  font:700 9px/1 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
[data-demo-tree-instrument] .dti-node,
[data-demo-tree-instrument] .dti-joint,
[data-demo-tree-instrument] .dti-inspector,
[data-demo-tree-instrument] .dti-nav{cursor:auto}
[data-demo-tree-instrument] .dti-node,
[data-demo-tree-instrument] .dti-joint,
[data-demo-tree-instrument] .dti-nav button,
[data-demo-tree-instrument] .dti-inspector button{cursor:pointer}

[data-demo-tree-instrument][data-tree-projection="earth"] .dti-field[data-transition="true"]:not([data-layer-transition="realm"]) .dti-zero{
  animation:dtiZeroToEarth 560ms cubic-bezier(.22,.72,.24,1);
}
[data-demo-tree-instrument][data-tree-projection="canopy"] .dti-field[data-transition="true"]:not([data-layer-transition="realm"]) .dti-zero{
  animation:dtiZeroToCanopy 560ms cubic-bezier(.22,.72,.24,1);
}
[data-demo-tree-instrument][data-tree-projection="earth"] .dti-field[data-transition="true"]:not([data-layer-transition="realm"]) .dti-centre{
  animation:dtiCentreToEarth 560ms cubic-bezier(.22,.72,.24,1);
}
[data-demo-tree-instrument][data-tree-projection="canopy"] .dti-field[data-transition="true"]:not([data-layer-transition="realm"]) .dti-centre{
  animation:dtiCentreToCanopy 560ms cubic-bezier(.22,.72,.24,1);
}
[data-demo-tree-instrument] .dti-field:not([data-transition="true"]) .dti-zero,
[data-demo-tree-instrument] .dti-field:not([data-transition="true"]) .dti-centre{animation:none}
[data-demo-tree-instrument] .dti-field:not([data-transition="true"]) .dti-branch:not(.computed){
  animation:none;
  stroke-dashoffset:0;
}
[data-demo-tree-instrument] .dti-field:not([data-transition="true"]) .dti-node:not(.computed){
  animation:none;
  opacity:1;
}
[data-demo-tree-instrument] .dti-field[data-transition="true"] .dti-node.computed,
[data-demo-tree-instrument] .dti-field[data-layer-transition="computed"] .dti-node.computed,
[data-demo-tree-instrument] .dti-field[data-transition="true"] .dti-joint,
[data-demo-tree-instrument] .dti-field[data-layer-transition="computed"] .dti-joint.computed{
  animation:dtiArrive 340ms ease forwards;
  animation-delay:var(--node-delay,220ms);
  opacity:0;
}
[data-demo-tree-instrument] .dti-field[data-settling="true"] .dti-branch:not(.computed),
[data-demo-tree-instrument] .dti-field[data-settling="true"] .dti-branch-reveal,
[data-demo-tree-instrument] .dti-field[data-settling="true"] .dti-node,
[data-demo-tree-instrument] .dti-field[data-settling="true"] .dti-joint{
  animation:none!important;
  opacity:1;
  stroke-dashoffset:0;
}
[data-demo-tree-instrument] .dti-field[data-transition="false"][data-layer-transition="none"] .dti-branch.selected,
[data-demo-tree-instrument] .dti-field[data-transition="false"][data-layer-transition="none"] .dti-branch-reveal,
[data-demo-tree-instrument] .dti-field[data-transition="false"][data-layer-transition="none"] .dti-node{
  animation:none!important;
  opacity:1;
  stroke-dashoffset:0;
}
[data-demo-tree-instrument] .dti-field[data-transition="false"][data-layer-transition="none"] .dti-branch.computed{
  animation:dtiTravel 7.2s steps(12,end) infinite;
  stroke-dashoffset:0;
}

@keyframes dtiGrow{to{stroke-dashoffset:0}}
@keyframes dtiArrive{from{opacity:0;scale:.72}to{opacity:1;scale:1}}
@keyframes dtiTravel{to{stroke-dashoffset:calc(-1 * var(--cycle,19px))}}
@keyframes dtiZeroToEarth{from{top:calc(65% - var(--centre-radius))}to{top:calc(35% + var(--centre-radius))}}
@keyframes dtiZeroToCanopy{from{top:calc(35% + var(--centre-radius))}to{top:calc(65% - var(--centre-radius))}}
@keyframes dtiCentreToEarth{from{top:65%}to{top:35%}}
@keyframes dtiCentreToCanopy{from{top:35%}to{top:65%}}

@media(max-width:720px){
  [data-demo-tree-instrument]{--centre-radius:56px}
  [data-demo-tree-instrument] .dti-head{align-items:start}
  [data-demo-tree-instrument] .dti-summary{display:none}
  [data-demo-tree-instrument] .dti-field{height:560px;min-height:560px}
  [data-demo-tree-instrument] .dti-centre{width:112px;height:112px;padding:14px}
  [data-demo-tree-instrument] .dti-centre span{font-size:11px}
  [data-demo-tree-instrument] .dti-node .dti-name{width:125px;font-size:11px}
  [data-demo-tree-instrument] .dti-inspector{
    position:fixed;
    left:8px;
    right:8px;
    top:auto;
    bottom:92px;
    width:auto;
    max-height:40dvh;
    overflow:auto;
    box-shadow:0 -16px 45px color-mix(in srgb,var(--ink) 12%,transparent);
  }
  [data-demo-tree-instrument] .dti-nav{right:8px;bottom:8px}
  [data-demo-tree-instrument][data-tree-projection="earth"] .dti-nav{top:8px;bottom:auto}
  [data-demo-tree-instrument] .dti-toolbar .instrument{flex:1 1 110px}
}
@media(prefers-reduced-motion:reduce){
  [data-demo-tree-instrument] .dti-branch,
  [data-demo-tree-instrument] .dti-branch.computed,
  [data-demo-tree-instrument] .dti-node,
  [data-demo-tree-instrument] .dti-joint{
    animation-duration:80ms!important;
    animation-delay:0ms!important;
  }
  [data-demo-tree-instrument] .dti-joint{opacity:1}
  [data-demo-tree-instrument] .dti-branch.computed{
    animation-name:dtiGrow!important;
    stroke-dashoffset:0;
  }
  [data-demo-tree-instrument] .dti-node{opacity:1}
  [data-demo-tree-instrument] .dti-branch.computed,
  [data-demo-tree-instrument] .dti-branch-reveal{animation:none!important}
  [data-demo-tree-instrument] .dti-branch-reveal{stroke-dashoffset:0}
}