:root{
  /* Layout: a full-screen pan-and-zoom diagram; the explanation panel docks right or bottom, whichever leaves the diagram larger. */
  --bg:#f2f4f7; --chrome:#fbfcfd; --surface:#ffffff; --bg-2:#ebeef3;
  --line:#dde2e9; --line-2:#c3cad5;
  --ink:#0e1116; --ink-2:#3f4757; --ink-3:#5d6678;
  --dot:rgba(14,17,22,.14);
  --glass:rgba(255,255,255,.9);
  --shadow:0 18px 44px -14px rgba(15,23,42,.22),0 2px 6px rgba(15,23,42,.06);
  --ok:#17794a; --ok-bg:rgba(23,121,74,.09);
  --warn:#8f5e00; --warn-bg:rgba(176,118,0,.11);
  --info:#1d5fc2; --info-bg:rgba(29,95,194,.08);
  --spark:#0098b8; --spark-bg:rgba(0,152,184,.12);
  --display:"Chakra Petch","Be Vietnam Pro",system-ui,sans-serif;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#07090d; --chrome:#0a0d12; --surface:#121720; --bg-2:#0d1118;
    --line:#1f2631; --line-2:#343d4b;
    --ink:#eef2f7; --ink-2:#b4bcc9; --ink-3:#8a93a3;
    --dot:rgba(238,242,247,.10);
    --glass:rgba(15,19,26,.9);
    --shadow:0 22px 50px -14px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.45);
    --ok:#45c98a; --ok-bg:rgba(69,201,138,.10);
    --warn:#e2b04a; --warn-bg:rgba(226,176,74,.10);
    --info:#74a9f7; --info-bg:rgba(116,169,247,.10);
    --spark:#3ce6ff; --spark-bg:rgba(60,230,255,.10);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#07090d; --chrome:#0a0d12; --surface:#121720; --bg-2:#0d1118;
    --line:#1f2631; --line-2:#343d4b;
    --ink:#eef2f7; --ink-2:#b4bcc9; --ink-3:#8a93a3;
    --dot:rgba(238,242,247,.10);
    --glass:rgba(15,19,26,.9);
    --shadow:0 22px 50px -14px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.45);
    --ok:#45c98a; --ok-bg:rgba(69,201,138,.10);
    --warn:#e2b04a; --warn-bg:rgba(226,176,74,.10);
    --info:#74a9f7; --info-bg:rgba(116,169,247,.10);
    --spark:#3ce6ff; --spark-bg:rgba(60,230,255,.10);
    color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
html{background:var(--bg);overscroll-behavior:none}
body{margin:0;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--line-2)}
a:hover{text-decoration-color:currentColor}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--spark);outline-offset:2px;border-radius:6px}

.app{height:100%;display:flex;flex-direction:column}
.bar{position:relative;z-index:6;flex:none;display:flex;align-items:center;gap:14px;min-height:56px;padding-block:9px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));background:var(--chrome);border-bottom:1px solid var(--line)}
.brand{flex:none;margin:0;line-height:0;color:var(--ink)}
.brand svg{display:block;height:22px;width:auto}
.sep{flex:none;width:1px;height:24px;background:var(--line)}
.paths{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.paths::-webkit-scrollbar{display:none}
.paths.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.paths.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.paths.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.paths .lb{flex:none;margin-right:4px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.paths button,.p-paths button{flex:none;font:500 13px/1 var(--sans);white-space:nowrap;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:8px 12px;cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.paths button:hover,.p-paths button:hover{border-color:var(--ink-3);color:var(--ink)}
.paths button[aria-pressed="true"]{background:var(--spark-bg);border-color:var(--spark);color:var(--ink)}
.zoom{flex:none;display:flex;align-items:center;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.zoom button{display:grid;place-items:center;min-width:34px;height:34px;padding:0 9px;border:0;background:transparent;color:var(--ink-2);cursor:pointer}
.zoom button+button{border-left:1px solid var(--line)}
.zoom button:hover{color:var(--ink);background:var(--bg-2)}
.zoom svg{display:block;width:16px;height:16px}
#z-pct{min-width:60px;font:500 12px/1 var(--mono);font-variant-numeric:tabular-nums}

.stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.canvas{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;background-color:var(--bg);background-image:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 1.5px);background-size:24px 24px}
.canvas.dragging,.canvas.dragging .n{cursor:grabbing}
.map{position:absolute;inset:0;display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}

.panel{position:absolute;z-index:4;display:flex;flex-direction:column;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.app[data-dock="side"] .panel{top:12px;right:calc(12px + env(safe-area-inset-right, 0px));bottom:12px;width:360px}
.app[data-dock="bottom"] .panel{left:calc(12px + env(safe-area-inset-left, 0px));right:calc(12px + env(safe-area-inset-right, 0px));bottom:12px;height:var(--sheet-h, 300px)}
.app[data-dock="side"] .panel.folded{bottom:auto;width:auto;max-width:min(320px, calc(100% - 24px))}
.app[data-dock="bottom"] .panel.folded{height:auto}
.p-head{flex:none;display:flex;align-items:center;gap:8px;min-height:52px;padding:10px 10px 4px 20px}
.p-tags{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:6px}
.p-mini{display:none;flex:1 1 auto;min-width:0;font:600 14px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-acts{flex:none;display:flex;gap:2px}
.p-btn{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink-3);cursor:pointer}
.p-btn:hover{color:var(--ink);background:var(--bg-2);border-color:var(--line)}
.p-btn svg{display:block;width:16px;height:16px;transition:transform .2s}
.app[data-dock="side"] #p-fold svg{transform:rotate(-90deg)}
.app[data-dock="side"] .panel.folded #p-fold svg{transform:rotate(90deg)}
.app[data-dock="bottom"] .panel.folded #p-fold svg{transform:rotate(180deg)}
.panel.folded .p-head{min-height:0;padding:6px 6px 6px 16px;cursor:pointer}
.panel.folded .p-tags,.panel.folded .p-body,.panel.folded #p-clear{display:none}
.panel.folded .p-mini{display:block}
.p-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px 20px 20px}
.app[data-dock="bottom"] .p-body>*{max-width:78ch}
.p-body h2{margin:6px 0 10px;font:600 22px/1.25 var(--display);letter-spacing:.01em;text-wrap:balance}
.p-body p{margin:0 0 12px;color:var(--ink-2)}
.p-body ul,.p-body ol{margin:0 0 12px;padding:0}
.p-pts{list-style:none;display:grid;gap:8px}
.p-pts li{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;align-items:baseline;font-size:14px;color:var(--ink-2)}
.p-steps{list-style:none;counter-reset:s;display:grid;gap:8px}
.p-steps li{counter-increment:s;display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;font-size:14px;color:var(--ink-2)}
.p-steps li::before{content:counter(s);font:600 12px/1.9 var(--mono);color:var(--spark)}
.p-zones{list-style:none;display:grid;gap:12px}
.p-zones li{font-size:14px;color:var(--ink-2)}
.app[data-dock="bottom"] .p-body>.hint{max-width:none}
.app[data-dock="bottom"] .p-body>.p-zones{max-width:none;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 24px}
.p-zones b{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.sw{flex:none;display:inline-block;width:20px;height:12px;border:1.5px solid var(--line-2);border-radius:3px}
.sw.u{border-style:dashed}
.sw.f{border-color:var(--ink-3)}
.sw.x{border-style:dotted}
.p-label{margin:16px 0 8px;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.p-paths{display:flex;flex-wrap:wrap;gap:6px}
.p-paths button{font-size:12.5px;padding:6px 10px}
.hint{margin:4px 0 0;padding-top:12px;border-top:1px dashed var(--line-2);font-size:13px;color:var(--ink-3)}
.tag{display:inline-block;font:500 11px/1.75 var(--mono);padding:0 7px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.tag.ok{color:var(--ok);border-color:currentColor;background:var(--ok-bg)}
.tag.warn{color:var(--warn);border-color:currentColor;background:var(--warn-bg)}
.tag.info{color:var(--info);border-color:currentColor;background:var(--info-bg)}
.tag.u{border-style:dashed}
.tag.f{border-color:var(--ink-3);color:var(--ink)}
.tag.x{border-style:dotted}

.mini{position:absolute;z-index:3;left:calc(12px + env(safe-area-inset-left, 0px));bottom:12px;width:212px;padding:6px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);touch-action:none;cursor:crosshair;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.mini.on{opacity:1;visibility:visible}
.mini svg{display:block;width:100%;height:auto;overflow:hidden;border-radius:6px}
.mm-z{fill:none;stroke:var(--line-2);stroke-width:5;stroke-dasharray:16 12}
.mm-f{fill:var(--bg-2);stroke:var(--line-2);stroke-width:4}
.mm-n{fill:var(--surface);stroke:var(--line-2);stroke-width:4}
.mm-v{fill:var(--spark-bg);stroke:var(--spark);stroke-width:8}

.map text{font-family:var(--sans)}
.map .zone{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:5 5}
.map .zl{fill:var(--ink-3);font:500 11.5px var(--mono);letter-spacing:.08em}
.map .n{cursor:pointer;outline:none;transition:opacity .18s}
.map .n>rect{fill:var(--surface);stroke:var(--line-2);stroke-width:1;transition:stroke .18s,stroke-width .18s}
.map .n.u>rect{stroke-dasharray:5 3}
.map .n.home>rect,.map .n.bar>rect{fill:var(--bg-2)}
.map .n.agent>rect{stroke:var(--ink-3)}
.map .n:hover>rect{stroke:var(--ink)}
.map .n:focus-visible>rect{stroke:var(--spark);stroke-width:2.5}
.map .t{fill:var(--ink);font-weight:600;font-size:14.5px;pointer-events:none}
.map .t.sm{font-size:13px}
.map .s{fill:var(--ink-3);font-size:12px;pointer-events:none}
.map .vt{fill:var(--ink-3);font:500 11px var(--mono);letter-spacing:.08em;pointer-events:none}
.map .free{fill:var(--ok);font:500 11px var(--mono);pointer-events:none}
.map .zmark{color:var(--ink-2)}
.map .chip>rect{fill:var(--surface)}
.map .chip text{fill:var(--ink-2);font-size:11px;font-weight:500;pointer-events:none}
.map .e{fill:none;stroke:var(--ink-3);stroke-width:1.25;transition:opacity .18s,stroke .18s}
.map .e.arrow{marker-end:url(#m-arw)}
.map .e.both{marker-start:url(#m-arw);marker-end:url(#m-arw)}
.map .e.dash{stroke-dasharray:5 4}
.map .pill rect{fill:var(--surface);stroke:var(--line-2)}
.map .pill text{fill:var(--ink-2);font:500 11px var(--mono)}
.map .lg text{fill:var(--ink-3);font-size:12px}
.map .lg-ln{fill:none;stroke:var(--ink-3);stroke-width:1.25;marker-end:url(#m-arw)}
.map .lg-ln.dash{stroke-dasharray:5 4}
.mk{fill:var(--ink-3)}
.mk-on{fill:var(--spark)}
.map.dim .n,.map.dim .e,.map.dim .pill{opacity:.16}
.map.dim .on{opacity:1}
.map.dim .e.on{stroke:var(--spark);stroke-width:2;stroke-dasharray:7 5;animation:flow .9s linear infinite}
.map.dim .e.on.arrow{marker-end:url(#m-on)}
.map.dim .e.on.both{marker-start:url(#m-on);marker-end:url(#m-on)}
.map.dim .n.on>rect{stroke:var(--ink);stroke-width:1.5}
.map .n.cur>rect{stroke:var(--spark);stroke-width:2.2}
@keyframes flow{to{stroke-dashoffset:-12}}

@media (max-width: 760px){
  .bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand zoom" "paths paths";gap:8px 12px;padding-block:8px}
  .brand{grid-area:brand;justify-self:start}
  .brand svg{height:19px}
  .zoom{grid-area:zoom}
  .sep{display:none}
  .paths{grid-area:paths;margin-left:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)));padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
}
@media (pointer: coarse){
  .zoom button{min-width:40px;height:40px}
  .p-btn{width:40px;height:40px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.brand a{display:block;color:inherit}
.spark{stroke:var(--spark)}