:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#101723;color:#e8ecf6}body{margin:0}main{max-width:1000px;margin:auto;padding:30px 20px}nav{display:flex;align-items:center;gap:15px}header{padding:45px 0}h1{font-size:clamp(2rem,5vw,3.7rem);line-height:1.1;max-width:800px}h2{font-size:1.4rem}p{line-height:1.7;color:#b9c5d8}a{color:#9cd9e4}section{background:#1a2534;border:1px solid #344359;border-radius:18px;padding:25px;margin-bottom:22px}label{display:block;margin:16px 0}input,select,textarea,button{font:inherit;color:inherit;background:#111a28;border:1px solid #506079;border-radius:7px;padding:10px}input[type=checkbox]{accent-color:#aee6cd}textarea{box-sizing:border-box;width:100%;font:13px ui-monospace,monospace}button{cursor:pointer}button:hover{background:#30425b}button:disabled{opacity:.5;cursor:wait}.buttons{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}video{display:block;max-width:100%;max-height:420px;margin:20px auto}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.6;max-height:400px;overflow:auto}progress{width:100%;height:14px}#models{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}#models a{border:1px solid #506079;border-radius:9px;padding:12px;text-decoration:none}footer{font-size:13px;padding:20px 0}.slot{padding:10px;border-bottom:1px solid #344359}
:root{--line:#344359;--panel:#1a2534;--idle:#6b7a92;--running:#9cd9e4;--passed:#7fd1a8;--fallback:#e8c36a;--review:#e8c36a;--failed:#f08a8a}
main{max-width:1200px}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:0 22px;align-items:start}
.map-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.map-head h2,.map-head h3{margin:0}
.tabs{display:flex;border:1px solid #506079;border-radius:8px;overflow:hidden}.tabs a{padding:7px 16px;text-decoration:none;color:#b9c5d8}.tabs a[aria-current=page]{background:#30425b;color:#e8ecf6}
.stage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:12px}
.stage-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px;border-radius:12px;background:#111a28;border:1px solid var(--line);border-top:3px solid var(--tone,var(--idle))}
.stage-card[aria-pressed=true],.node[aria-pressed=true] rect{outline:2px solid #9cd9e4;outline-offset:2px}
.stage-head{display:flex;justify-content:space-between;align-items:baseline}.kind{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8d9bb3}
.role,.meta{font-size:13px;line-height:1.45;color:#b9c5d8}.meta{color:#8d9bb3}.detail{font-size:12px;color:#8d9bb3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.detail:empty{display:none}
.stage-status{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--tone,var(--idle))}.dot{width:9px;height:9px;border-radius:50%;background:var(--tone,var(--idle))}
[data-tone=running]{--tone:var(--running)}[data-tone=passed]{--tone:var(--passed)}[data-tone=fallback]{--tone:var(--fallback)}[data-tone=review]{--tone:var(--review)}[data-tone=failed]{--tone:var(--failed)}
[data-tone=running] .dot{animation:pulse 1.1s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}
.stage-graph{overflow-x:auto}.stage-graph svg{display:block;width:100%;height:auto;margin:auto}
.node{cursor:pointer;outline:none}.node rect{fill:#111a28;stroke:var(--tone,var(--idle));stroke-width:1.5}.node:hover rect,.node:focus-visible rect{fill:#1f2d41}
.node .dot{fill:var(--tone,var(--idle))}.node .label{fill:#e8ecf6;font-size:14px;font-weight:600}.node .state{fill:var(--tone,var(--idle));font-size:12px}
.edge{fill:none;stroke:#3e4e66;stroke-width:1.5}.edge.active{stroke:#9cd9e4}.edge.failover{stroke-dasharray:5 4}.arrowhead{fill:#6b7a92}
#stage-detail{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#111a28}#stage-detail .close{padding:2px 10px}
@media (prefers-reduced-motion:reduce){[data-tone=running] .dot{animation:none}}
[hidden]{display:none!important}
input,select{max-width:100%;box-sizing:border-box}
.map-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}#reset-layout{padding:7px 12px;font-size:14px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grip{cursor:grab;color:#6b7a92;user-select:none;touch-action:none;font-size:15px;line-height:1}
h2 .grip{background:none;border:0;padding:2px 8px 2px 0;margin-right:4px;font-size:18px}h2 .grip:hover{background:none;color:#e8ecf6}
.panels>section>h2{cursor:grab}.stage-head{gap:8px}.stage-head strong{flex:1}
.dragging{opacity:.55;outline:2px dashed #9cd9e4;outline-offset:2px}.sorting,.sorting *{cursor:grabbing!important;user-select:none}
.run-actions button{padding:8px 12px}.run-plan{font-size:13px;margin:0}
.demo-detail{font-size:13px;line-height:1.5;margin:-8px 0 16px}
label.inline{display:inline-flex;align-items:center;gap:8px;margin:0;min-width:0;max-width:100%}label.inline select{min-width:0;flex:1 1 auto}
@media (max-width:700px){.map-tools{width:100%}.map-tools label.inline{flex:1 1 100%}.map-tools label.inline select{width:100%}}
.workflow-bar{margin:4px 0 18px}.workflow-bar .buttons{margin:8px 0}.workflow-bar input{min-width:0;flex:1 1 180px}
#workflow-status{font-size:13px;font-weight:600;margin:0}#workflow-message{font-size:13px;margin:4px 0;min-height:1.4em}
#workflow-issues{margin:0;padding-left:18px;font-size:13px;line-height:1.5}#workflow-issues li[data-level=warn]{color:var(--fallback)}#workflow-issues li[data-level=info]{color:#b9c5d8}#workflow-issues li[data-level=ok]{color:var(--passed);list-style:none;margin-left:-18px}
.wf-edit{border:1px solid var(--line);border-radius:10px;margin:12px 0;padding:10px 14px}.wf-edit legend{font-size:13px;font-weight:600;padding:0 6px}
.wf-after-label{font-size:13px;margin:10px 0 4px}.runs-after{display:flex;flex-wrap:wrap;gap:6px 14px}.runs-after label{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px}.runs-after label.excluded{opacity:.6}
.stage-card.off{opacity:.55;border-style:dashed}
.node.off rect{stroke-dasharray:4 3;fill:#0e1520}.node.off text{opacity:.55}.node.drop rect{stroke:#9cd9e4;stroke-width:3}
.port{fill:#111a28;stroke:#9cd9e4;stroke-width:1.5;cursor:crosshair;touch-action:none}.port:hover,.connecting .port{fill:#9cd9e4}
.edge-hit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer;pointer-events:stroke;outline:none}
.link:hover .edge,.edge-hit:focus-visible~.edge,.link:focus-within .edge{stroke:#9cd9e4;stroke-width:2.5}
.link.selected .edge{stroke:#e8c36a;stroke-width:2.5}
.edge-del{display:none;cursor:pointer}.link.selected .edge-del{display:inline}.edge-del circle{fill:#f08a8a}.edge-del text{fill:#101723;font-size:14px;font-weight:700;pointer-events:none}
.link-preview{fill:none;stroke:#9cd9e4;stroke-width:2;stroke-dasharray:5 4;pointer-events:none}