/* Scroll-grown sentence. Scoped to #compound. Weights stay 400. */
#compound{
  --cg-bg:var(--bg-agents);
  --cg-fg:var(--closer-ink);
  --cg-dim:var(--dim);
  --cg-line:var(--closer-ink);
  --cg-dot:rgba(0,0,0,.13);
  --cg-ind:46px;
  --cg-w:100%;
  --cg-mono:var(--mono);
  position:relative;
  padding:0;
  background-color:var(--cg-bg);
  background-image:radial-gradient(var(--cg-dot) 1px,transparent 1px);
  background-size:22px 22px;
  color:var(--cg-fg);
  font-family:"Instrument Sans",system-ui,sans-serif;
}
#compound .cg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#compound .cg-run{position:relative}
#compound .cg-stage{position:sticky;top:0;z-index:2;height:100vh;height:100dvh;overflow:hidden}
#compound .cg-world{position:absolute;left:0;top:0;width:var(--cg-w);padding:10vh var(--page-right) 0 var(--page-left);will-change:transform}
#compound .cg-wires{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#compound .cg-wires path{fill:none;stroke:var(--cg-line);stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;shape-rendering:crispEdges}
#compound .cg-wires path.cg-on{stroke:var(--coral)}

#compound .cg-node{position:relative;display:block;width:max-content;max-width:none;margin-top:clamp(4px,.65vh,8px);margin-left:calc(var(--cg-ind) * var(--d));font-size:31px;font-weight:400;line-height:1;letter-spacing:-.03em;padding:.02em 0 .03em;white-space:nowrap}
#compound .cg-node:first-of-type{margin-top:0}
#compound .cg-c{opacity:0}
#compound .cg-dim{color:var(--cg-dim)}
#compound .cg-hi{color:var(--coral)}
#compound .cg-meta{display:inline-flex;align-items:center;margin-left:.9em;vertical-align:middle;font:400 14px/1 var(--cg-mono);letter-spacing:0;color:var(--cg-dim);white-space:nowrap;opacity:0}
#compound .cg-dot{margin:0 .4em;line-height:1}
#compound .cg-vote{display:inline-flex;align-items:center;gap:.28em;margin-left:1em}
#compound .cg-up{display:block;width:0;height:0;border-style:solid;border-width:0 4px 6px 4px;border-color:transparent transparent var(--cg-dim) transparent;flex:none}
#compound .cg-let{display:inline-flex;align-items:center;justify-content:center;min-width:1.45em;height:1.45em;margin:0 .35em 0 0;padding:0 .28em;border-radius:4px;background:var(--coral);color:var(--night);font-weight:400;line-height:1;vertical-align:.05em}
#compound .cg-pill{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:5px;font:400 11px/1.3 var(--cg-mono)}
#compound .cg-pill.cg-ctx{display:inline-flex;align-items:center;height:1.45em;margin:0 .8em 0 0;padding:0 .4em;border-radius:4px;background:var(--night);color:var(--white);font:400 1em/1 var(--cg-mono)}
#compound .cg-pill.cg-emb{border:1px solid var(--coral);color:var(--coral)}

#compound .cg-panel{position:absolute;z-index:4;right:var(--page-right);top:50%;transform:translateY(-50%);width:min(400px,31vw);background:var(--panel-fill);color:var(--panel-mono);border:1px solid var(--panel-stroke);border-radius:12px;font:400 12.5px/1.6 var(--cg-mono);box-shadow:0 20px 60px rgba(0,0,0,.25);transition:opacity .5s ease,translate .5s ease}
#compound .cg-panel.cg-gone{opacity:0;translate:0 24px;pointer-events:none}
#compound .cg-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--panel-edge);color:var(--dim);font-size:11.5px}
#compound .cg-bar i{width:9px;height:9px;border-radius:50%;background:var(--panel-node);flex:none}
#compound .cg-bar span{margin-left:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#compound .cg-json{margin:0;padding:12px 14px;white-space:pre-wrap;border-bottom:1px solid var(--panel-edge);min-height:7.6em;overflow:hidden;color:inherit;font:400 12.5px/1.6 var(--cg-mono)}
#compound .cg-json .cg-k{color:var(--panel-mono)}
#compound .cg-json .cg-s{color:var(--syntax-s)}
#compound .cg-json .cg-n{color:var(--syntax-n)}
#compound .cg-json .cg-p{color:var(--panel-faint)}
#compound .cg-idx{padding:10px 14px 12px;color:var(--panel-soft);min-height:12em}
#compound .cg-idx div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#compound .cg-idx .cg-cur2{color:var(--coral)}
#compound .cg-idx .cg-l{color:var(--panel-dot)}

#compound .cg-hint{position:absolute;z-index:4;left:var(--page-left);bottom:calc(env(safe-area-inset-bottom,0px) + 24px);font:400 12px/1 var(--cg-mono);color:var(--cg-dim)}
#compound .cg-prog{position:absolute;z-index:5;top:76px;right:var(--page-right);display:flex;gap:5px;pointer-events:none}
#compound .cg-prog i{display:block;width:26px;height:2px;background:var(--cg-dim);opacity:.4}
#compound .cg-prog i b{display:block;height:100%;width:0;background:var(--coral)}

@media (max-width:700px){
  #compound .cg-node{font-size:clamp(18px,5vw,22px)}
}
@media (min-width:901px){
  #compound{--cg-w:66vw}
}
@media (max-width:900px){
  #compound .cg-panel{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);left:var(--page-left);right:var(--page-right);width:auto;max-height:30vh;overflow:auto;transform:none}
  #compound .cg-idx{display:none}
  #compound .cg-json{border:0;min-height:0}
  #compound .cg-hint{display:none}
  #join{position:relative;z-index:1}
}

#compound.cg-static .cg-run{height:auto !important}
#compound.cg-static .cg-stage{position:relative;height:auto;overflow:visible}
#compound.cg-static .cg-world{position:relative;width:100%;padding:12vh var(--page-right) 12vh var(--page-left)}
#compound.cg-static .cg-c,
#compound.cg-static .cg-meta{opacity:1}
#compound.cg-static .cg-wires path{stroke-dashoffset:0}
#compound.cg-static .cg-panel,
#compound.cg-static .cg-prog,
#compound.cg-static .cg-hint{display:none}
@media (prefers-reduced-motion:reduce){
  #compound .cg-cur{animation:none}
  #compound .cg-panel{transition:none}
}