:root{--ml-bg:#f4f7fa;--ml-surface:#fff;--ml-surface2:#eef3f7;--ml-ink:#111a24;--ml-muted:#6e7d8c;--ml-line:#ccd8e2;--ml-accent:#1683d1;--ml-purple:#8b78e6;--ml-success:#299b76}
/*@media(prefers-color-scheme:dark){:root{--ml-bg:#0b1118;--ml-surface:#111a23;--ml-surface2:#172330;--ml-ink:#eef5fa;--ml-muted:#8fa0b1;--ml-line:#2a3a48;--ml-accent:#5ab9f2;--ml-purple:#9e91f2;--ml-success:#64d5b2}}*/
:root,
html[data-theme="light"] {
  --ml-bg:#f4f7fa;
  --ml-surface:#fff;
  --ml-surface2:#eef3f7;
  --ml-ink:#111a24;
  --ml-muted:#6e7d8c;
  --ml-line:#ccd8e2;
  --ml-accent:#1683d1;
  --ml-purple:#8b78e6;
  --ml-success:#299b76;
}

html[data-theme="dark"] {
  --ml-bg:#0b1118;
  --ml-surface:#111a23;
  --ml-surface2:#172330;
  --ml-ink:#eef5fa;
  --ml-muted:#8fa0b1;
  --ml-line:#2a3a48;
  --ml-accent:#5ab9f2;
  --ml-purple:#9e91f2;
  --ml-success:#64d5b2;
}
*{box-sizing:border-box}.ml-host{width:100%;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ml-ink)}.ml-frame{position:relative;width:100%;aspect-ratio:16/9;min-height:440px;border:1px solid var(--ml-line);border-radius:24px;background:var(--ml-bg);overflow:hidden;box-shadow:0 20px 60px rgba(20,40,60,.08)}.ml-camera{position:absolute;inset:0;transform-origin:center;transition:transform .8s cubic-bezier(.2,.75,.2,1)}.ml-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.ml-layer{position:absolute;inset:0}.ml-element{position:absolute;transition:opacity .35s,transform .55s cubic-bezier(.2,.75,.2,1),border-color .35s,box-shadow .35s,filter .35s;background-color .35s,color .35s}.ml-panel{border:1px solid var(--ml-line);border-radius:18px;background:var(--ml-surface)}.ml-node{display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;overflow:hidden;padding:12px 14px;border:1px solid var(--ml-line);border-radius:13px;background:var(--ml-surface);font-size:12px}.ml-text{font-size:12px;color:var(--ml-ink)}.ml-muted{color:var(--ml-muted)}.ml-input{height:42px;padding:12px 14px;border:1px solid var(--ml-line);border-radius:12px;background:var(--ml-surface);font-size:11px;white-space:nowrap;overflow:hidden}.ml-input.typing:after{content:"";display:inline-block;width:1px;height:13px;background:var(--ml-accent);margin-left:2px;vertical-align:-2px;animation:mlBlink .9s steps(1) infinite}.ml-button{display:grid;place-items:center;border:1px solid var(--ml-line);border-radius:11px;background:var(--ml-surface2);font-size:13px;color:var(--ml-accent)}.ml-badge{padding:6px 8px;border:1px solid var(--ml-line);border-radius:999px;background:var(--ml-surface);font-size:9px;color:var(--ml-muted)}.ml-path{fill:none;stroke:var(--ml-line);stroke-width:2}.ml-element.active{border-color:var(--ml-accent)!important;box-shadow:0 0 0 7px color-mix(in srgb,var(--ml-accent) 9%,transparent)}.ml-element.success{border-color:var(--ml-success)!important;color:var(--ml-success)}.ml-element.muted{opacity:.18;filter:saturate(.3)}.ml-element.selected{border-color:var(--ml-purple)!important;box-shadow:0 0 0 7px color-mix(in srgb,var(--ml-purple) 9%,transparent)}.ml-particle{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--ml-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--ml-accent) 12%,transparent);pointer-events:none;z-index:50}.ml-status{position:absolute;right:18px;top:16px;z-index:100;padding:7px 10px;border:1px solid var(--ml-line);border-radius:999px;background:color-mix(in srgb,var(--ml-surface) 92%,transparent);font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ml-accent);letter-spacing:.05em;text-transform:uppercase}.ml-controls{display:flex;align-items:center;gap:8px;margin-top:12px}.ml-controls button{border:1px solid var(--ml-line);background:var(--ml-surface);color:var(--ml-ink);border-radius:10px;padding:7px 10px;font-size:11px}.ml-controls .ml-title{margin-left:auto;color:var(--ml-muted);font-size:11px}.ml-debug{margin-top:10px;padding:10px 12px;border:1px solid var(--ml-line);border-radius:12px;background:var(--ml-surface);font:10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ml-muted)}
@keyframes mlBlink{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes mlPulse{50%{transform:scale(1.06);box-shadow:0 0 0 11px color-mix(in srgb,var(--ml-accent) 7%,transparent)}}
@media(max-width:700px){.ml-frame{min-height:520px;aspect-ratio:auto}}
@media(prefers-reduced-motion:reduce){.ml-element,.ml-camera{transition:none!important}.ml-input.typing:after{animation:none}}


/* ===== Motion Engine v2.1: explicit graph stacking + traversal visibility ===== */

/*
 * The old rendering order was:
 *   SVG -> HTML layer
 *
 * Since .ml-panel has an opaque background, graph edges existed but were
 * literally painted behind graphPanel. These z-levels intentionally interleave
 * SVG and HTML children inside the same camera stacking context.
 */
.ml-camera{
  isolation:isolate;
}

.ml-layer{
  z-index:auto;
}

.ml-panel{
  z-index:0;
}

.ml-svg{
  z-index:5;
  pointer-events:none;
}

.ml-node,
.ml-text,
.ml-input,
.ml-button,
.ml-badge{
  z-index:10;
}

.ml-particle-layer{
  z-index:30;
  pointer-events:none;
}

.ml-particle{
  z-index:1;
}

/* Default graph edge */
.ml-edge{
  opacity:.72;
  transition:
    stroke .18s ease,
    opacity .18s ease,
    filter .18s ease;
}

/* The edge itself participates in the traversal animation. */
.ml-edge.ml-traversing,
.ml-path.ml-traversing{
  stroke:var(--ml-traverse-color, var(--ml-accent)) !important;
  opacity:1 !important;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--ml-traverse-color, var(--ml-accent)) 45%, transparent));
  stroke-dasharray:7 5;
  animation:mlEdgeFlow .38s linear infinite;
}

@keyframes mlEdgeFlow{
  to{
    stroke-dashoffset:-12;
  }
}


/* ===== Motion Engine v2.2: real scene layers ===== */

.ml-camera{
  isolation:isolate;
}

.ml-background-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.ml-background-layer .ml-element{
  pointer-events:auto;
}

/*
 * Connections now occupy their own sibling layer between surfaces and nodes.
 * This is the key difference from v2.1.
 */
.ml-svg{
  position:absolute !important;
  inset:0 !important;
  z-index:10 !important;
  pointer-events:none !important;
  overflow:visible !important;
}

.ml-foreground-layer{
  position:absolute;
  inset:0;
  z-index:20 !important;
  pointer-events:none;
}

.ml-foreground-layer .ml-element{
  pointer-events:auto;
}

.ml-particle-layer{
  position:absolute;
  inset:0;
  z-index:30 !important;
  pointer-events:none;
}

.ml-edge{
  stroke:var(--ml-edge-color, color-mix(in srgb, var(--ml-accent) 38%, var(--ml-line))) !important;
  stroke-width:2.2 !important;
  stroke-linecap:round;
  opacity:.88 !important;
  vector-effect:non-scaling-stroke;
}

.ml-edge.ml-traversing{
  stroke:var(--ml-accent) !important;
  opacity:1 !important;
}

.ml-flow-path{
  pointer-events:none;
}

.ml-particle{
  width:13px;
  height:13px;
  margin:0;
  z-index:auto;
}


/* ===== Motion Engine v2.4: permission-denial language ===== */

.ml-node.denied{
  border-color:#ff6b6b !important;
  color:#ff8b8b !important;
  box-shadow:
    0 0 0 5px color-mix(in srgb, #ff6b6b 10%, transparent),
    0 0 22px color-mix(in srgb, #ff6b6b 18%, transparent) !important;
}

.ml-node.inaccessible{
  opacity:.34 !important;
  filter:saturate(.35);
}

.ml-edge.inaccessible{
  opacity:.16 !important;
}

.ml-badge.denied{
  border-color:#ff6b6b !important;
  color:#ff8b8b !important;
}


/* ===== Motion Engine v2.5: semantic structured-data elements ===== */

.ml-dataframe,
.ml-chart{
  position:absolute;
  box-sizing:border-box;
  border:1px solid rgba(145,190,220,.30);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(19,31,43,.96), rgba(13,23,33,.96));
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 26px rgba(0,0,0,.16);
  color:var(--ml-text, #e8f2f8);
}

.ml-dataframe.active,
.ml-chart.active{
  border-color:rgba(84,210,255,.78);
  box-shadow:
    0 0 0 4px rgba(84,210,255,.07),
    0 0 24px rgba(84,210,255,.12);
}

.ml-dataframe-header,
.ml-chart-header{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 10px;
  border-bottom:1px solid rgba(145,190,220,.18);
  background:rgba(255,255,255,.025);
}

.ml-dataframe-title,
.ml-chart-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:650;
  letter-spacing:.01em;
}

.ml-dataframe-kind,
.ml-chart-kind{
  flex:0 0 auto;
  font-size:7px;
  letter-spacing:.13em;
  color:#54d2ff;
  opacity:.9;
}

.ml-dataframe-table-wrap{
  padding:7px 9px 5px;
}

.ml-dataframe-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:7.5px;
  line-height:1.25;
}

.ml-dataframe-table th{
  padding:4px 4px;
  text-align:left;
  color:rgba(220,237,247,.66);
  font-weight:600;
  border-bottom:1px solid rgba(145,190,220,.17);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ml-dataframe-table td{
  padding:3.5px 4px;
  border-bottom:1px solid rgba(145,190,220,.09);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ml-dataframe-more td{
  text-align:center;
  color:rgba(220,237,247,.42);
  border-bottom:0;
  letter-spacing:.15em;
}

.ml-dataframe-footer{
  padding:0 9px 7px;
  font-size:7px;
  color:rgba(220,237,247,.48);
}

.ml-chart{
  padding-bottom:7px;
}

.ml-bar-body{
  display:grid;
  gap:7px;
  padding:10px 11px 4px;
}

.ml-bar-row{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:7px;
  align-items:center;
}

.ml-bar-label{
  font-size:7px;
  color:rgba(220,237,247,.68);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ml-bar-bars{
  display:grid;
  gap:3px;
}

.ml-bar-line{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 24px;
  gap:5px;
  align-items:center;
  font-size:6.5px;
}

.ml-bar-series{
  color:rgba(220,237,247,.54);
}

.ml-bar-track{
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}

.ml-bar-fill{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--ml-chart-1, #54d2ff);
}

.ml-bar-track-2 .ml-bar-fill{
  background:var(--ml-chart-3, #ffb454);
}

.ml-bar-value{
  text-align:right;
  color:rgba(232,242,248,.78);
}

.ml-pie-body{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 13px 7px;
}

.ml-pie{
  width:76px;
  height:76px;
  border-radius:50%;
  flex:0 0 76px;
  box-shadow:inset 0 0 0 14px rgba(13,23,33,.65);
}

.ml-pie-legend{
  display:grid;
  gap:6px;
  min-width:0;
}

.ml-pie-legend-row{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  font-size:7px;
  color:rgba(232,242,248,.72);
}

.ml-pie-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  flex:0 0 7px;
}