:root{--bg:#ffffff;--ink:#1b1b1f;--mut:#6b7280;--line:#d9dce3;--panel:#f7f8fa;--card:#ffffff;--rail:#cfd2d8;--red:#e31e24;--shadow:0 6px 20px rgba(20,24,40,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14161c;--ink:#eceef3;--mut:#9aa3b2;--line:#2c313c;--panel:#1b1e26;--card:#1f232c;--rail:#3a404d;--shadow:0 6px 20px rgba(0,0,0,.5)}}
:root[data-theme="dark"]{--bg:#14161c;--ink:#eceef3;--mut:#9aa3b2;--line:#2c313c;--panel:#1b1e26;--card:#1f232c;--rail:#3a404d;--shadow:0 6px 20px rgba(0,0,0,.5)}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.4 "Poppins","Segoe UI",system-ui,sans-serif;overflow:hidden}
header{position:fixed;inset:0 0 auto 0;min-height:56px;display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line);z-index:20;flex-wrap:wrap}
header h1{font-size:16px;margin:0 8px 0 0;white-space:nowrap;font-weight:700;letter-spacing:.02em}header h1 b{color:var(--red)}
input,select,button{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #4c7cf0;outline-offset:1px}
button{cursor:pointer;white-space:nowrap}button:hover{border-color:#8a93a6}
button.primary,a.primary{background:var(--red);border:1px solid var(--red);color:#fff;border-radius:8px;padding:6px 12px;text-decoration:none;display:inline-block}
#q{width:230px;max-width:46vw}.sp{flex:1}
.live{font-size:12px;color:var(--mut);white-space:nowrap}.live i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1e8e3e;margin-right:6px;vertical-align:0}
.live.stale i{background:#b26a00}
#stage{position:absolute;inset:56px 0 0 0;overflow:hidden;cursor:grab;touch-action:none}#stage.panning{cursor:grabbing}
#world{position:absolute;left:0;top:0;transform-origin:0 0}
svg#wires{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.node{position:absolute;width:190px;padding:2px 6px 2px 0;border-radius:8px;cursor:grab;user-select:none;transition:left .35s cubic-bezier(.2,.9,.3,1.2),top .35s cubic-bezier(.2,.9,.3,1.2),opacity .2s,box-shadow .15s,background .15s}
.node.dragging{transition:none;cursor:grabbing;z-index:15;background:var(--card);box-shadow:var(--shadow)}
.node b{display:block;font-size:14px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node span{display:block;font-size:10.5px;color:var(--mut);line-height:1.2;max-height:2.4em;overflow:hidden}
.node.dir{width:210px;padding-left:34px}.node.dir b{font-size:16px}
.node.dir::before{content:"";position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--c)}
.node.dir::after{content:"\270B";position:absolute;left:0;top:0;width:28px;height:28px;display:grid;place-items:center;color:#fff;font-size:15px}
.node:hover{background:var(--panel)}.node.sel{background:var(--panel);box-shadow:inset 0 0 0 2px var(--c)}
.node.dim{opacity:.18}.node.chain b{color:var(--c)}.node.unsure b::after{content:" ?";color:#d9534f}
aside{position:fixed;top:56px;right:0;bottom:0;width:360px;max-width:92vw;background:var(--panel);border-left:1px solid var(--line);padding:16px;overflow:auto;z-index:18;transform:translateX(100%);transition:transform .2s}
aside.open{transform:none}
aside h2{margin:0 28px 2px 0;font-size:20px}aside h3{margin:16px 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
aside p{margin:4px 0}aside .x{position:absolute;right:10px;top:8px;border:none;background:none;font-size:22px;line-height:1;padding:4px 8px}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;color:#fff;background:var(--c,#8a93a6);margin:2px 4px 2px 0}
.tag.g{background:transparent;color:var(--ink);border:1px solid var(--line)}
.lnk{color:inherit;text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;font:inherit;text-align:left}
.mut{color:var(--mut)}.small{font-size:12px}
.note{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;margin:10px 0}
ul.plain{list-style:none;margin:0;padding:0}ul.plain li{padding:3px 0}
#legend{position:fixed;left:12px;bottom:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:11.5px;z-index:16;max-width:calc(100vw - 24px)}
#legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px 0 10px;vertical-align:-1px}#legend i:first-child{margin-left:0}
#legend em{font-style:normal;color:var(--mut);margin-left:12px}
#toast{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);background:#1b1b1f;color:#fff;padding:9px 16px;border-radius:999px;font-size:13px;opacity:0;transition:opacity .25s;z-index:30;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1}
#gate{position:fixed;inset:56px 0 0 0;z-index:25;background:var(--bg);display:grid;place-items:center;padding:16px}
#gate .box{max-width:460px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;text-align:center}
#gate h2{margin:0 0 8px;font-size:20px}#gate p{color:var(--mut);margin:0 0 16px}
#gate .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
@media (max-width:640px){#stage,#gate{inset:104px 0 0 0}aside{top:104px}.live{display:none}}
svg#wires .rail{stroke:var(--rail)}
#live{cursor:pointer}