/* Logic Designer.
   Loaded lazily with the designer module, so none of this is parsed unless the
   author opens the Logic tab. Scoped under .lg- to stay clear of styles.css. */

.lg-root {
  --lg-flow:      #3fb950;
  --lg-t-object:  #a371f7;
  --lg-t-number:  #4c8dff;
  --lg-t-string:  #2fb8a8;
  --lg-t-vector:  #e3873a;
  --lg-t-boolean: #d2a24c;
  --lg-t-list:    #8a94a6;

  --lg-bg:      #14181d;
  --lg-panel:   #1a1f26;
  --lg-card:    #222932;
  --lg-card-2:  #2a323d;
  --lg-rule:    #333c47;
  --lg-ink:     #e6ebf1;
  --lg-ink-2:   #9aa5b3;
  --lg-ink-3:   #6d7885;
  --lg-error:   #e5534b;
  --lg-warn:    #d9a125;

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--lg-bg);
  color: var(--lg-ink);
  font-size: 13px;
  overflow: hidden;
}

/* ---- top bar ---- */
.lg-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--lg-rule);
  background: var(--lg-panel); flex: 0 0 auto; min-height: 44px;
}
.lg-topbar-left, .lg-topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg-title { font-size: 14px; font-weight: 600; }
.lg-scene-chip {
  padding: 2px 8px; border-radius: 10px; background: var(--lg-card);
  color: var(--lg-ink-2); font-size: 11px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lg-pill {
  padding: 2px 8px; border-radius: 10px; font-size: 11px;
  background: var(--lg-card); color: var(--lg-ink-3);
}
.lg-pill-draft { background: rgba(217, 161, 37, .16); color: var(--lg-warn); }
.lg-pill-error { background: rgba(229, 83, 75, .16); color: var(--lg-error); }
.lg-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.lg-status-ok    { background: rgba(63, 185, 80, .16);  color: var(--lg-flow); }
.lg-status-warn  { background: rgba(217, 161, 37, .16); color: var(--lg-warn); }
.lg-status-error { background: rgba(229, 83, 75, .16);  color: var(--lg-error); }

.lg-btn {
  background: var(--lg-card); color: var(--lg-ink); border: 1px solid var(--lg-rule);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.lg-btn:hover:not(:disabled) { background: var(--lg-card-2); }
.lg-btn:disabled { opacity: .42; cursor: default; }
.lg-primary { background: var(--lg-flow); border-color: var(--lg-flow); color: #06210c; font-weight: 600; }
.lg-primary:hover:not(:disabled) { filter: brightness(1.1); background: var(--lg-flow); }
.lg-danger-btn { border-color: rgba(229, 83, 75, .5); color: var(--lg-error); width: 100%; margin-top: 14px; }
.lg-danger-btn:hover { background: rgba(229, 83, 75, .12); }
.lg-mini {
  background: var(--lg-card); color: var(--lg-ink-2); border: 1px solid var(--lg-rule);
  border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer; font-family: inherit;
}
.lg-mini:hover { color: var(--lg-ink); }
.lg-danger { color: var(--lg-error); border-color: rgba(229, 83, 75, .4); }

/* ---- 10 : 70 : 20 ---- */
.lg-body { flex: 1 1 auto; display: flex; min-height: 0; }
.lg-lib {
  flex: 0 0 clamp(180px, 10%, 240px); min-width: 180px;
  border-right: 1px solid var(--lg-rule); background: var(--lg-panel);
  overflow-y: auto; padding: 8px;
}
.lg-center { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lg-canvas { flex: 1 1 auto; min-height: 0; position: relative; }
.lg-props {
  flex: 0 0 clamp(340px, 20%, 420px); min-width: 340px;
  border-left: 1px solid var(--lg-rule); background: var(--lg-panel);
  display: flex; flex-direction: column; overflow: hidden;
}

/* Below 1280px the properties panel becomes an overlay so the canvas keeps
   its width; below 768px the whole designer is read-only (see app.js). */
@media (max-width: 1279px) {
  .lg-props {
    position: absolute; right: 0; top: 44px; bottom: 0; z-index: 40;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .4); flex-basis: 360px;
  }
}

/* ---- library ---- */
.lg-search { width: 100%; margin-bottom: 8px; }
.lg-group {
  width: 100%; text-align: left; background: none; border: 0; color: var(--lg-ink-2);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 4px 4px; cursor: pointer; font-family: inherit;
}
.lg-group:hover { color: var(--lg-ink); }
.lg-count { color: var(--lg-ink-3); text-transform: none; letter-spacing: 0; }
.lg-group-body { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.lg-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  width: 100%; text-align: left; background: var(--lg-card); border: 1px solid transparent;
  border-radius: 4px; padding: 5px 8px; cursor: pointer; color: var(--lg-ink);
  font-size: 12px; font-family: inherit;
}
.lg-item:hover { border-color: var(--lg-rule); background: var(--lg-card-2); }
.lg-item-in { border-left: 2px solid var(--lg-t-object); }
.lg-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-item-meta { color: var(--lg-ink-3); font-size: 10px; flex: 0 0 auto; }
.lg-pad { padding: 4px 8px; }

/* ---- node cards ---- */
/* A fixed width, not a max-width: the node wrapper sizes to max-content, so a
   long nowrap summary line stretches the card and the row of cards stops
   lining up. One width keeps every card the same object. */
.lg-card {
  width: 208px;
  background: var(--lg-card); border: 1px solid var(--lg-rule);
  border-radius: 6px; color: var(--lg-ink); font-size: 12px; overflow: hidden;
}
.lg-card-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px; background: var(--lg-card-2); border-bottom: 1px solid var(--lg-rule);
}
.lg-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--lg-ink-3); }
.lg-trigger  .lg-dot { background: var(--lg-flow); }
.lg-action   .lg-dot { background: var(--lg-t-number); }
.lg-object   .lg-dot { background: var(--lg-t-object); }
.lg-logic    .lg-dot { background: var(--lg-warn); }
.lg-card-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.lg-badge {
  font-size: 10px; color: var(--lg-ink-3); background: var(--lg-bg);
  padding: 1px 5px; border-radius: 3px; flex: 0 0 auto;
}
.lg-flag {
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #10151a;
}
.lg-flag-error   { background: var(--lg-error); }
.lg-flag-warning { background: var(--lg-warn); }
.lg-card-body { padding: 6px 9px; display: flex; flex-direction: column; gap: 2px; }
.lg-line { color: var(--lg-ink-2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-has-error   { border-color: var(--lg-error); }
.lg-has-warning { border-color: rgba(217, 161, 37, .55); }
.lg-off { opacity: .45; }
.lg-handle-label { position: absolute; right: 14px; font-size: 9px; color: var(--lg-ink-3); pointer-events: none; }

.react-flow__node.selected .lg-card { border-color: var(--lg-flow); box-shadow: 0 0 0 1px var(--lg-flow); }
/* A tinted card keeps a selection ring that doesn't depend on its colour. */
.react-flow__node.selected .lg-card.lg-tinted { box-shadow: 0 0 0 2px var(--lg-bg), 0 0 0 4px var(--lg-flow); }

.lg-root {
  --lg-else: #f0883e;   /* If "no" · While "exit" */
  --lg-loop: #d29922;   /* While loop-back */
}

/* ---- tinted cards (colors.js) ----
   Every colour below comes from cardTheme(), which picks each text colour for
   contrast against the surface under it. Nothing here may hard-code a text
   colour on a tinted card, or a dark pick loses its title. */
.lg-card.lg-tinted { background: var(--lgc-bg); border-color: var(--lgc-border); color: var(--lgc-ink); }
.lg-tinted .lg-card-head { background: var(--lgc-head); border-bottom-color: var(--lgc-border); }
.lg-tinted .lg-card-title { color: var(--lgc-head-ink); }
.lg-tinted .lg-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--lgc-head-ink); }
.lg-tinted .lg-badge { background: var(--lgc-badge-bg); color: var(--lgc-badge-ink); }
.lg-tinted .lg-line { color: var(--lgc-ink2); }
.lg-tinted .lg-handle-label { color: var(--lgc-ink2); }
.lg-tinted.lg-has-error { border-color: var(--lg-error); box-shadow: inset 0 0 0 1px var(--lg-error); }

/* ---- condition cards: one way in, two ways out ---- */
.lg-card-cond { min-height: 86px; }
.lg-card-cond .lg-card-body { padding-right: 38px; }
.lg-handle-yes, .lg-handle-no { font-weight: 600; font-size: 10px; }
.lg-handle-yes { color: var(--lg-flow); }
.lg-handle-no  { color: var(--lg-else); }

/* ---- edges: flow solid, data dashed, no/exit orange, loop-back animated ---- */
.lg-edge-flow .react-flow__edge-path { stroke: var(--lg-flow); stroke-width: 2; }
.lg-edge-else .react-flow__edge-path { stroke: var(--lg-else); }
.lg-edge-data .react-flow__edge-path { stroke: var(--lg-t-object); stroke-width: 1.5; stroke-dasharray: 5 4; }
.lg-edge-loop .react-flow__edge-path { stroke: var(--lg-loop); stroke-width: 2; stroke-dasharray: 6 4; }
.react-flow__edge.selected .react-flow__edge-path { stroke-width: 3; }

/* ---- selecting several cards ---- */
.lg-root .react-flow__selection { background: rgba(63, 185, 80, .08); border: 1px dashed var(--lg-flow); }
.lg-root .react-flow__nodesselection-rect { background: rgba(63, 185, 80, .05); border: 1px dashed rgba(63, 185, 80, .6); }
.lg-canvas-hint {
  position: absolute; top: 8px; left: 10px; z-index: 5; pointer-events: none;
  font-size: 11px; color: var(--lg-ink-3); background: rgba(20, 24, 29, .72);
  padding: 3px 8px; border-radius: 4px;
}

/* ---- colour swatches ---- */
.lg-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-swatch {
  width: 24px; height: 24px; border-radius: 5px; border: 1px solid var(--lg-rule);
  cursor: pointer; padding: 0; position: relative; font-family: inherit;
}
.lg-swatch:focus-visible { outline: 2px solid var(--lg-flow); outline-offset: 2px; }
.lg-swatch-on { box-shadow: 0 0 0 2px var(--lg-bg), 0 0 0 4px var(--lg-ink); }
.lg-swatch-none { background: var(--lg-card); color: var(--lg-ink-2); font-size: 12px; line-height: 22px; }
.lg-swatch-custom {
  display: grid; place-items: center; overflow: hidden;
  background: conic-gradient(#f85149, #d29922, #3fb950, #1f6feb, #a371f7, #f85149);
}
.lg-swatch-custom input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.lg-branch-add { display: flex; gap: 6px; margin-top: 6px; }
.lg-branch-add .lg-mini { flex: 1 1 0; }
.lg-branch-yes { border-color: rgba(63, 185, 80, .55); }
.lg-branch-no  { border-color: rgba(240, 136, 62, .55); }
.lg-select-branch { width: 100%; margin: 2px 0 6px; }

/* xyflow chrome on our dark ground */
.lg-root .react-flow__background { background: var(--lg-bg); }
.lg-root .react-flow__controls-button {
  background: var(--lg-card); border-bottom: 1px solid var(--lg-rule); fill: var(--lg-ink-2);
}
.lg-root .react-flow__controls-button:hover { background: var(--lg-card-2); }
.lg-root .react-flow__minimap { background: var(--lg-panel); }
.lg-root .react-flow__attribution { background: transparent; color: var(--lg-ink-3); font-size: 9px; }
.lg-root .react-flow__attribution a { color: var(--lg-ink-3); }

/* ---- problems ---- */
.lg-problems-bar {
  flex: 0 0 auto; border-top: 1px solid var(--lg-rule); background: var(--lg-panel);
  padding: 6px 10px; display: flex; align-items: center; gap: 10px; max-height: 92px;
}
.lg-problems-count { font-size: 11px; color: var(--lg-ink-3); flex: 0 0 auto; }
.lg-problems-count.lg-has-error { color: var(--lg-error); font-weight: 600; }
.lg-problems-list { display: flex; gap: 6px; overflow-x: auto; flex: 1 1 auto; }
.lg-problem {
  flex: 0 0 auto; max-width: 380px; text-align: left; font-size: 11px; cursor: pointer;
  background: var(--lg-card); border: 1px solid var(--lg-rule); border-radius: 4px;
  padding: 4px 8px; color: var(--lg-ink-2); font-family: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lg-problem:hover { color: var(--lg-ink); }
.lg-problem-error { border-left: 2px solid var(--lg-error); }
.lg-problem-warning { border-left: 2px solid var(--lg-warn); }

/* ---- properties ---- */
.lg-props-head {
  padding: 10px 12px; border-bottom: 1px solid var(--lg-rule);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto;
}
.lg-props-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.lg-props-body { padding: 12px; overflow-y: auto; flex: 1 1 auto; }
.lg-field { margin-bottom: 11px; }
.lg-label { display: block; font-size: 11px; color: var(--lg-ink-2); margin-bottom: 3px; }
.lg-req { color: var(--lg-error); margin-left: 2px; }
.lg-input {
  width: 100%; background: var(--lg-bg); color: var(--lg-ink);
  border: 1px solid var(--lg-rule); border-radius: 4px; padding: 5px 7px;
  font-size: 12px; font-family: inherit;
}
.lg-input:focus-visible { outline: 2px solid var(--lg-flow); outline-offset: -1px; }
.lg-input-bad { border-color: var(--lg-error); }
.lg-check { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.lg-check input { margin: 0; }
.lg-enable { font-size: 11px; color: var(--lg-ink-2); }
.lg-clause { display: grid; grid-template-columns: 1fr 58px 1fr auto; gap: 4px; margin-bottom: 4px; align-items: center; }
.lg-op { padding: 5px 2px; }
.lg-inline { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.lg-muted { color: var(--lg-ink-3); font-size: 11px; line-height: 1.5; }
.lg-hint { color: var(--lg-ink-3); font-size: 11px; line-height: 1.5; margin: 6px 0 0; }
.lg-err  { color: var(--lg-error); font-size: 11px; margin: 3px 0 0; line-height: 1.45; }
.lg-warn { color: var(--lg-warn);  font-size: 11px; margin: 3px 0 0; line-height: 1.45; }
.lg-problems { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--lg-rule); }
.lg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.lg-stats div { background: var(--lg-card); border-radius: 4px; padding: 8px 10px; }
.lg-stats dt { font-size: 10px; color: var(--lg-ink-3); text-transform: uppercase; letter-spacing: .05em; }
.lg-stats dd { margin: 2px 0 0; font-size: 18px; font-variant-numeric: tabular-nums; }
.lg-raw { margin-top: 12px; }
.lg-json {
  background: var(--lg-bg); border: 1px solid var(--lg-rule); border-radius: 4px;
  padding: 8px; font-size: 10.5px; overflow-x: auto; margin: 6px 0 0; color: var(--lg-ink-2);
}

/* ---- read-only below 768px ---- */
.lg-narrow-banner {
  position: absolute; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(20, 24, 29, .94); text-align: center; padding: 24px;
}
.lg-narrow-banner p { max-width: 34ch; color: var(--lg-ink-2); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .lg-root *, .lg-root *::before, .lg-root *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- host integration -------------------------------------------------
   The designer needs the whole window for 10:70:20, so opening it collapses
   the editor's left and right panels rather than squeezing three columns into
   the middle one. The grid columns are restored the moment the tab is left.

   The collapsed panels are hidden with visibility, NOT display:none. Removing a
   grid item re-flows every later item one column left, which drops the viewport
   into the 0-width first column and hides the designer entirely. */
#app.logic-mode { grid-template-columns: 0 0 1fr 0 0; }
#app.logic-mode > #nav-panel,
#app.logic-mode > #props-panel {
  overflow: hidden; padding: 0; border: 0; visibility: hidden;
}
#app.logic-mode > .resize-handle { pointer-events: none; visibility: hidden; }

/* The pane sits over the WebGL canvas rather than replacing it — leaving the
   renderer mounted means returning to the 3D view costs no re-upload of the
   scene's textures and geometry.

   It starts BELOW #topbar (44px, z-index 10), never over it. Covering the
   viewport tab strip makes the designer a room with no door: the tab that got
   you in is the tab that gets you out. */
.logic-pane { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; z-index: 8; display: block; }

/* 3D-only viewport chrome. #view-toolbar (Persp / Iso / Shade / Wire) and the
   gizmo HUD share #topbar's z-index of 10, so the designer cannot simply stack
   over them — and they mean nothing on a node graph anyway. Hide them, and the
   only thing left above the pane is the tab strip, which is the way out. */
#app.logic-mode #view-toolbar,
#app.logic-mode #gizmo-hud,
#app.logic-mode #play-dock,
#app.logic-mode #toolbar,
#app.logic-mode #right-resize { display: none; }
.logic-pane.hidden { display: none; }
#logic-mount { position: absolute; inset: 0; }

/* Below 768px the designer is read-only, per the spec. */
#logic-narrow { display: none; }
@media (max-width: 767px) {
  #logic-narrow:not(.hidden) { display: grid; }
  #logic-mount { pointer-events: none; filter: grayscale(.6); }
}

/* ---- live Play view (live.js / livepanel.js) ----------------------------
   While the scene plays, a card that just ran glows, and so does the wire into
   it — only the branch actually taken, in its own colour (yes green, no/exit
   orange). The glow fades over GLOW_MS as the class comes off. */
.lg-edge-flow { color: var(--lg-flow); }
.lg-edge-else { color: var(--lg-else); }
.lg-edge-data { color: var(--lg-t-object); }
.lg-edge-loop { color: var(--lg-loop); }
.lg-root .react-flow__edge.lg-edge-live .react-flow__edge-path {
  stroke: currentColor; stroke-width: 3.5; stroke-dasharray: 10 6;
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor);
  animation: lg-live-flow .6s linear infinite;
}
@keyframes lg-live-flow { to { stroke-dashoffset: -16; } }

.lg-card { transition: box-shadow .5s ease-out, border-color .5s ease-out; }
.lg-root .lg-card.lg-live {
  border-color: var(--lg-flow);
  box-shadow: 0 0 0 2px var(--lg-flow), 0 0 18px 2px rgba(63, 185, 80, .55);
  transition: none;
}
.lg-root .lg-card.lg-live.lg-live-no {
  border-color: var(--lg-else);
  box-shadow: 0 0 0 2px var(--lg-else), 0 0 18px 2px rgba(240, 136, 62, .55);
}
.lg-live-line {
  border-top: 1px dashed var(--lg-rule); padding: 4px 10px 5px; font-size: 10.5px;
  font-variant-numeric: tabular-nums; color: var(--lg-ink); background: rgba(0, 0, 0, .18);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.lg-live-line-yes { color: #56d364; }
.lg-live-line-no  { color: #ffa657; }
.lg-live-line-value { color: #79c0ff; }
.lg-live-line-count { color: var(--lg-ink-2); }

.lg-pill-live { display: inline-flex; align-items: center; gap: 5px; color: #ff7b72; border-color: rgba(255, 123, 114, .5); }
.lg-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f85149;
  box-shadow: 0 0 6px #f85149; animation: lg-live-pulse 1.2s ease-in-out infinite;
}
@keyframes lg-live-pulse { 50% { opacity: .35; } }
.lg-btn.lg-play { min-width: 64px; }
.lg-btn.lg-play-on { background: #b62324; border-color: #da3633; color: #fff; }

.lg-live-panel {
  margin: -4px 0 14px; padding: 8px 10px; border-radius: 6px;
  background: rgba(248, 81, 73, .06); border: 1px solid rgba(248, 81, 73, .35);
}
.lg-live-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: #ff7b72; margin-bottom: 6px; }
.lg-live-stat { font-size: 12px; color: var(--lg-ink); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.lg-live-block { margin-top: 8px; }
.lg-live-sub { display: block; font-size: 10px; color: var(--lg-ink-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.lg-live-toggle { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.lg-live-toggle:hover { color: var(--lg-ink-2); }
.lg-live-vars { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.lg-live-vars th, .lg-live-vars td { padding: 3px 4px; border-bottom: 1px solid var(--lg-rule); text-align: left; }
.lg-live-vars th { font-weight: 500; color: var(--lg-ink-2); width: 45%; overflow-wrap: anywhere; }
.lg-live-vars td { color: var(--lg-ink); overflow-wrap: anywhere; }
.lg-live-vars tr { transition: background-color .8s ease-out; }
.lg-live-vars tr.lg-live-changed { background: rgba(121, 192, 255, .22); transition: none; }
.lg-live-clause { display: flex; gap: 6px; align-items: baseline; font-size: 12px; padding: 3px 0; }
.lg-live-mark { font-weight: 700; width: 12px; flex: 0 0 auto; }
.lg-live-yes .lg-live-mark, .lg-live-result.lg-live-yes b { color: #56d364; }
.lg-live-no .lg-live-mark, .lg-live-result.lg-live-no b { color: #ffa657; }
.lg-live-result { font-size: 12px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--lg-rule); }

/* Play from the Logic tab: the live 3D view takes the left 40% of the window
   (clickable — triggers fire as they do on the Scene tab) and the designer
   the rest. app.js toggles .logic-live with Play and re-sizes the renderer. */
#app.logic-mode.logic-live .logic-pane { left: 40%; border-left: 1px solid #333c47; }
#app.logic-mode.logic-live #three-container { top: 44px; right: 60%; }

@media (prefers-reduced-motion: reduce) {
  .lg-root .react-flow__edge.lg-edge-live .react-flow__edge-path { animation: none; stroke-dasharray: none; }
  .lg-live-dot { animation: none; }
}