:root{
  color-scheme:dark;
  --bg:#0b0d0c;--surface:#111411;--surface-2:#171b17;--surface-3:#1d221d;
  --text:#eef1e8;--muted:#969e92;--faint:#62695f;
  --line:rgba(238,241,232,.12);--line-strong:rgba(238,241,232,.24);
  --accent:#b9f568;--accent-soft:rgba(185,245,104,.12);
  --blue:#73bdf8;--orange:#f3ae66;--red:#ff786e;--purple:#c09bf7;--max:1240px
}
html[data-theme="light"]{
  color-scheme:light;--bg:#f2f1e9;--surface:#e7e6dd;--surface-2:#f9f8f3;--surface-3:#fff;
  --text:#171914;--muted:#62685e;--faint:#858b80;--line:rgba(23,25,20,.12);
  --line-strong:rgba(23,25,20,.22);--accent:#557a13;--accent-soft:rgba(85,122,19,.10);
  --blue:#286fae;--orange:#a95f1d;--red:#b8423a;--purple:#7350a2
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:radial-gradient(circle at 53% 18%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 34rem),var(--bg);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.topbar,main,footer{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.topbar{position:sticky;top:14px;z-index:50;display:flex;align-items:center;justify-content:space-between;min-height:58px;margin-top:14px;padding:0 14px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:8px;font:700 .86rem ui-monospace,SFMono-Regular,Menlo,monospace}
.brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--bg)}
.brand .slash{color:var(--faint)}.brand strong{color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:8px}
.trace-pill{display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.72rem}
.trace-pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.theme-toggle{display:flex;align-items:center;gap:7px;padding:7px 9px;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.theme-toggle:hover{background:var(--surface)}
.theme-dot{width:8px;height:8px;border:2px solid currentColor;border-radius:50%}

.intro{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:32px 0 18px}
.kicker{display:block;margin-bottom:8px;color:var(--accent);font:700 .66rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.intro h1{margin:0;max-width:790px;font-size:clamp(2rem,3.8vw,3.55rem);line-height:1.02;letter-spacing:-.045em;font-weight:650}
.scenario-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.scenario-tabs button,.sim-controls button{
  min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);font-size:.76rem;font-weight:700;cursor:pointer
}
.scenario-tabs button[aria-selected="true"]{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--accent-soft);color:var(--text)}

.simulator{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 24px 70px rgba(0,0,0,.14)}
.sim-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;padding:8px 12px;border-bottom:1px solid var(--line)}
.task-id{display:flex;align-items:center;gap:8px;font:700 .72rem ui-monospace,SFMono-Regular,Menlo,monospace}
.task-id>span:last-child{color:var(--faint);font-weight:600}.task-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.sim-controls{display:flex;gap:6px}.sim-controls button{min-height:34px;background:transparent}
.sim-controls button[data-control="play"]{background:var(--accent);border-color:transparent;color:var(--bg)}
.sim-controls button:disabled{opacity:.28;cursor:not-allowed}

.stage{position:relative;min-height:650px;overflow:hidden;isolation:isolate;background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px}
.stage::after{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 50% 45%,var(--accent-soft),transparent 30rem)}
.zone{position:absolute;z-index:-1;border:1px dashed var(--line);border-radius:20px;pointer-events:none}
.zone span{position:absolute;top:10px;left:13px;color:var(--faint);font:700 .59rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.provider-zone{left:3%;top:4%;width:51%;height:24%;background:color-mix(in srgb,var(--purple) 2%,transparent)}
.control-zone{left:3%;top:29%;width:89%;height:61%}
.execution-zone{right:3%;top:29%;width:36%;height:26%;background:color-mix(in srgb,var(--blue) 3%,transparent)}
.rescue-zone{right:29%;top:69%;width:17%;height:20%;opacity:.65}

.wires{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wires path{fill:none;stroke:var(--line-strong);stroke-width:1.4;stroke-linecap:round;opacity:.32;transition:stroke .22s ease,opacity .22s ease,stroke-width .22s ease}
.wires path.conditional-edge{opacity:0}
.wires path.conditional-edge.active,.wires path.conditional-edge.error{opacity:1}
.wires path.active{stroke:var(--accent);stroke-width:2.6;stroke-dasharray:8 10;opacity:1;animation:edge-flow 1.05s linear infinite}
.wires path.error{stroke:var(--red)}
.wires path.rescue-edge{stroke-dasharray:6 10;opacity:.35}
.wires path.rescue-edge.active{stroke:var(--orange);opacity:1;stroke-width:3;animation:edge-flow .7s linear infinite}
.signal-dot{filter:url(#glow)}

.node{
  position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:122px;height:80px;padding:9px;border:1px solid var(--line-strong);border-radius:15px;
  background:color-mix(in srgb,var(--surface-3) 96%,transparent);box-shadow:0 8px 22px rgba(0,0,0,.07);
  cursor:pointer;transition:transform .17s ease,border-color .17s ease,opacity .17s ease,filter .17s ease
}
.node:hover{transform:translateY(-2px);border-color:var(--muted)}
.node strong{font-size:.8rem}.node small{color:var(--faint);font:600 .59rem ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node.active{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent),0 0 30px color-mix(in srgb,var(--accent) 10%,transparent)}
.node.selected{outline:1px solid var(--accent);outline-offset:3px}
.node.muted{opacity:.3;filter:saturate(.25)}
.node.offline{opacity:.35;filter:saturate(.15)}
.node.error{border-color:var(--red);box-shadow:0 0 25px color-mix(in srgb,var(--red) 12%,transparent)}
.node.rescue{border-color:var(--orange);box-shadow:0 0 28px color-mix(in srgb,var(--orange) 15%,transparent)}
.node.success{border-color:var(--accent)}
.node-icon,.avatar,.verify-mark{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:var(--surface);border:1px solid var(--line);color:var(--accent);font:800 .72rem ui-monospace,SFMono-Regular,Menlo,monospace}
.avatar{border-radius:50%;color:var(--blue)}.verify-mark{font-size:.9rem}
.runtime-ring{position:relative;display:block;width:29px;height:29px;border:2px solid var(--line-strong);border-radius:50%}
.runtime-ring i{position:absolute;inset:4px;border:2px solid var(--accent);border-left-color:transparent;border-radius:50%}
.runtime-node.active .runtime-ring i{animation:spin .85s linear infinite}
.worker-bars{display:flex;align-items:end;gap:3px;height:25px}.worker-bars i{display:block;width:5px;border-radius:3px;background:var(--blue);opacity:.45}
.worker-bars i:nth-child(1){height:9px}.worker-bars i:nth-child(2){height:17px}.worker-bars i:nth-child(3){height:24px}
.worker-node.active .worker-bars i{animation:bar-pulse .7s ease-in-out infinite alternate}.worker-node.active .worker-bars i:nth-child(2){animation-delay:.15s}.worker-node.active .worker-bars i:nth-child(3){animation-delay:.3s}

.human-node{left:6%;top:7%}.agent-a,.agent-b{left:39%;top:7%}.agent-b{opacity:0;pointer-events:none;transform:translateY(8px)}
.task-node{left:7%;top:36%}.assignment-node{left:24%;top:36%}.run-node{left:41%;top:36%}
.collab-node{left:7%;top:72%}.context-node{left:24%;top:72%}.milestone-node{left:41%;top:72%}.artifact-node{left:62%;top:72%}.completion-node{left:83%;top:72%}
.runtime-node{left:62%;top:36%;width:132px}.worker-node{left:80%;top:36%}.lsm-node{left:66%;top:57%;opacity:.42;border-style:dashed}

.state-burst{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%) scale(.82);pointer-events:none;opacity:0}
.state-burst.show{animation:burst .82s ease both}.state-burst span{display:block;padding:8px 13px;border:1px solid var(--line-strong);border-radius:999px;background:color-mix(in srgb,var(--surface-3) 90%,transparent);backdrop-filter:blur(10px);font:800 .66rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em}

.hud{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,340px);align-items:center;gap:18px;min-height:92px;padding:12px 14px;border-top:1px solid var(--line);background:var(--surface-2)}
.progress-wrap{min-width:0}.phase-dots{display:flex;gap:5px;min-width:0}
.phase-dot{position:relative;flex:1;min-width:0;height:24px;padding:0;border:0;background:transparent;cursor:pointer}
.phase-dot::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:99px;background:var(--line-strong);transition:background .18s ease,transform .18s ease}
.phase-dot.done::before,.phase-dot.current::before{background:var(--accent)}
.phase-dot.current::before{transform:scaleY(2)}
.phase-dot:hover::before{background:color-mix(in srgb,var(--accent) 65%,var(--line-strong))}
.phase-dot:focus-visible{outline:1px solid var(--accent);outline-offset:2px;border-radius:5px}
.phase-dot::after{content:attr(data-index);position:absolute;left:50%;top:-7px;transform:translateX(-50%);color:transparent;font:700 .52rem ui-monospace,SFMono-Regular,Menlo,monospace}
.phase-dot.current::after{color:var(--accent)}
.readout{text-align:right;min-width:0}.readout-key{display:block;color:var(--faint);font:700 .6rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.readout strong{display:block;margin-top:3px;font-size:.84rem}.readout small{display:block;margin-top:4px;color:var(--muted);font-size:.68rem;line-height:1.35}
.trace-note{display:flex;align-items:center;gap:10px;margin:12px 2px 0;color:var(--faint);font-size:.69rem}
.trace-note span{font:700 .59rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}.trace-note strong{font-weight:600;color:var(--muted)}
footer{display:flex;justify-content:space-between;gap:20px;padding:24px 0 38px;color:var(--faint);font:650 .69rem ui-monospace,SFMono-Regular,Menlo,monospace}

@keyframes edge-flow{to{stroke-dashoffset:-36}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bar-pulse{to{opacity:1;transform:scaleY(.72)}}@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-64%) scale(.95)}}

@media(max-width:900px){
  .intro{align-items:flex-start;flex-direction:column}.scenario-tabs{justify-content:flex-start}
  .stage{min-height:720px}.zone{display:none}
  .human-node{left:4%;top:6%}.agent-a,.agent-b{left:38%;top:6%}
  .task-node{left:4%;top:28%}.assignment-node{left:28%;top:28%}.run-node{left:52%;top:28%}
  .runtime-node{left:72%;top:28%}.worker-node{left:72%;top:49%}
  .context-node{left:4%;top:60%}.collab-node{left:26%;top:60%}.milestone-node{left:48%;top:60%}.artifact-node{left:48%;top:78%}.completion-node{left:72%;top:78%}.lsm-node{left:72%;top:64%}
}
@media(max-width:620px){
  body{background:var(--bg)}
  .topbar,main,footer{width:min(calc(100% - 18px),var(--max))}
  .topbar{top:6px;min-height:48px;margin-top:6px;padding:0 10px;border-radius:13px}
  .brand{gap:7px;font-size:.78rem}.brand-mark{width:26px;height:26px;border-radius:7px}
  .trace-pill,.brand .slash,.brand strong,.theme-label{display:none}
  .theme-toggle{min-width:34px;min-height:34px;justify-content:center;padding:0}
  .theme-dot{width:9px;height:9px}

  .intro{gap:12px;padding:16px 0 10px}
  .kicker{margin-bottom:5px;font-size:.55rem;letter-spacing:.09em}
  .intro h1{max-width:100%;font-size:clamp(1.55rem,8vw,1.95rem);line-height:1.02;letter-spacing:-.04em}
  .scenario-tabs{display:flex;gap:5px;width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:1px;scrollbar-width:none}
  .scenario-tabs::-webkit-scrollbar{display:none}
  .scenario-tabs button{flex:1 0 auto;min-height:34px;padding:0 11px;border-radius:9px;font-size:.65rem}

  .simulator{display:flex;flex-direction:column;border-radius:16px}
  .sim-bar{order:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:48px;padding:6px 8px}
  .task-id{min-width:0;gap:6px;white-space:nowrap;font-size:.63rem}
  .task-id strong{overflow:hidden;text-overflow:ellipsis}
  .task-id>span:last-child{font-size:.56rem}
  .task-dot{width:7px;height:7px;box-shadow:0 0 0 4px var(--accent-soft)}
  .sim-controls{display:flex;gap:4px}
  .sim-controls button{min-width:36px;min-height:34px;padding:0 8px;border-radius:8px;font-size:.67rem}
  .sim-controls button[data-control="play"]{min-width:48px}
  .sim-controls button[data-control="reset"]{min-width:42px;padding-inline:6px;font-size:.61rem}

  .hud{order:2;display:flex;flex-direction:column;gap:8px;min-height:0;padding:10px 10px 9px;border-top:0;border-bottom:1px solid var(--line)}
  .readout{order:1;text-align:left}
  .readout-key{font-size:.55rem}
  .readout strong{margin-top:2px;font-size:.82rem;line-height:1.2}
  .readout small{margin-top:3px;font-size:.66rem;line-height:1.35}
  .progress-wrap{order:2;overflow-x:auto;min-width:0;padding:2px 6px 3px;scroll-padding-inline:6px;scrollbar-width:none;overscroll-behavior-inline:contain}
  .progress-wrap::-webkit-scrollbar{display:none}
  .phase-dots{display:flex;gap:5px;width:max-content;min-width:max-content}
  .phase-dot{flex:0 0 29px;width:29px;height:25px;border:1px solid var(--line);border-radius:7px;background:var(--surface);transition:border-color .16s ease,background .16s ease}
  .phase-dot::before{left:5px;right:5px;top:auto;bottom:4px;height:2px;background:var(--line-strong)}
  .phase-dot::after{top:4px;color:var(--faint);font-size:.48rem}
  .phase-dot.done{border-color:color-mix(in srgb,var(--accent) 26%,var(--line))}
  .phase-dot.done::before{background:var(--accent)}
  .phase-dot.current{border-color:var(--accent);background:var(--accent-soft)}
  .phase-dot.current::before{transform:none;background:var(--accent)}
  .phase-dot.current::after{color:var(--accent)}

  .stage{order:3;min-height:420px;height:420px;background-size:28px 28px}
  .wires,.zone{display:none}
  .node{
    width:43%;height:82px;padding:8px;gap:4px;border-radius:14px;
    opacity:0;pointer-events:none;transform:scale(.96);
    transition:opacity .18s ease,transform .18s ease,border-color .18s ease,filter .18s ease
  }
  .node.mobile-visible{opacity:1;pointer-events:auto;transform:none}
  .node.mobile-visible.offline{opacity:.38}
  .node.mobile-visible.muted{opacity:.34}
  .node strong{font-size:.78rem}
  .node small{max-width:120px;font-size:.56rem}
  .node-icon,.avatar,.verify-mark{width:25px;height:25px;font-size:.68rem}
  .runtime-ring{width:27px;height:27px}
  .worker-bars{height:23px}

  .node.mobile-slot-1{left:4%;top:6%}
  .node.mobile-slot-2{left:53%;top:6%}
  .node.mobile-slot-3{left:4%;top:37%}
  .node.mobile-slot-4{left:53%;top:37%}
  .node.mobile-slot-5{left:4%;top:68%}
  .node.mobile-slot-6{left:53%;top:68%}
  .runtime-node.mobile-visible{width:43%}
  .agent-b.mobile-visible{transform:none}
  .lsm-node.mobile-visible{border-style:dashed}
  .state-burst{top:50%}

  .trace-note{align-items:flex-start;flex-direction:column;gap:3px;margin-top:9px;font-size:.62rem}
  .trace-note span{font-size:.53rem}
  footer{padding:18px 0 28px;font-size:.63rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}