:root{color-scheme:light;--ok:#2d6b4f;--ok-bg:#e3f2ea;--bg:#f7f6f2;--surface:#fffefb;--ink:#222831;--muted:#626674;--line:#dedfdc;--accent:#5b42a0;--soft:#eee9f7;--accent-ink:#483480;--amber-bg:#fff0d5;--amber-ink:#765013;--error:#a42e38;--hover:#efeee9;--shadow:0 2px 10px #25253406}
:root[data-theme=dark]{color-scheme:dark;--ok:#8fd6b0;--ok-bg:#1d3329;--bg:#16191f;--surface:#1e222a;--ink:#edf0f5;--muted:#adb5c3;--line:#373c47;--accent:#bea7fa;--soft:#302743;--accent-ink:#d6c5ff;--amber-bg:#392d1c;--amber-ink:#f1cf95;--error:#ffadb4;--hover:#292e37;--shadow:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:7px}button{cursor:pointer;padding:7px 12px}button:hover{background:var(--hover)}button:disabled{color:var(--muted);background:var(--hover);cursor:wait}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}select{padding:7px 34px 7px 10px;max-width:100%}a{color:var(--accent);text-underline-offset:3px}p{margin:0 0 16px}h1,h2,h3{color:var(--ink);line-height:1.2}h1{font-size:18px;font-weight:650;letter-spacing:-.35px;margin:0}h3{font-size:16px;margin:0 0 12px}ul{padding:0;margin:20px 0;list-style:none}li{padding:11px 0 11px 19px;border-top:1px solid var(--line);position:relative}li::before{content:"·";color:var(--accent);font-weight:700;position:absolute;left:2px;font-size:23px;line-height:1}pre{background:var(--hover);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:16px;overflow:auto;font:13px/1.6 ui-monospace,monospace}code{font:13px/1.6 ui-monospace,monospace}
.app{max-width:1320px;margin:auto;padding:28px 32px 72px}.toolbar{display:flex;gap:15px;justify-content:space-between;align-items:center;margin-bottom:12px}.identity,.tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.identity img{border-radius:6px}.tools button{font-size:13px;padding:6px 10px}.badge{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--soft);padding:4px 8px;border-radius:4px}.badge.open{background:var(--amber-bg);color:var(--amber-ink)}#message{color:var(--muted);font-size:13px;margin-bottom:16px}#message:empty{display:none}#message.error{color:var(--error)}.signed-out{padding:40px 24px;background:var(--surface);border:1px solid var(--line);border-radius:10px;max-width:540px}.signed-out p{font-size:18px}
.detail-top{display:flex;gap:10px;align-items:center;margin-bottom:18px}.detail-top .badge{font-size:10px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:9px;background:var(--surface);box-shadow:var(--shadow);margin:20px 0}table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.5}th,td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}th{font-size:11px;color:var(--muted);background:var(--hover);font-weight:650;letter-spacing:.025em}td:first-child{font-weight:600;min-width:170px}td:last-child{color:var(--muted)}tr:last-child td{border-bottom:0}tbody tr:hover{background:var(--hover)}.sources{display:flex;flex-wrap:wrap;gap:8px 20px;border-top:1px solid var(--line);padding-top:15px;margin-top:22px;font-size:12px}.source-label{color:var(--muted)}[hidden]{display:none!important}
@media(max-width:850px){.app{padding:20px 20px 70px}}
@media(max-width:620px){.app{padding:16px 14px 64px}.toolbar{align-items:flex-start;gap:10px;margin-bottom:16px}.identity{gap:8px}.identity h1{font-size:16px}.identity img{width:23px;height:23px}.tools{justify-content:flex-end;gap:6px}.tools button{font-size:11px;padding:5px 7px}#auth-area{flex-basis:100%;font-size:12px}.signed-out{padding:26px 18px}}
@media(prefers-reduced-motion:no-preference){button{transition:background .12s ease}}
h2{font-size:24px;letter-spacing:-.5px;margin:0 0 12px;font-weight:640}
.explorer{display:grid;grid-template-columns:minmax(340px,430px) minmax(0,1fr);gap:28px;align-items:start}
.map{border:1px solid var(--line);background:var(--surface);border-radius:10px;box-shadow:var(--shadow);padding:16px 18px 20px}
.scenario-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.diagram{display:flex;flex-direction:column;align-items:stretch}
.el{cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.node{position:relative;display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:9px;padding:12px 14px;background:var(--bg)}
.node:hover,.node.is-current{border-color:var(--accent);background:var(--bg)}
.node strong{font-size:14px}.node-kind{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.node.vps{border:2px solid var(--line);background:var(--surface)}.node.vps:hover,.node.vps.is-current{border-color:var(--accent);background:var(--surface)}
.chain{display:flex;flex-direction:column;align-items:stretch;gap:1px;margin:8px 0 4px}.chain>span{color:var(--muted);text-align:center;font-size:12px;line-height:1.3}
.chip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;background:var(--soft);color:var(--accent-ink);border:1px solid transparent;border-radius:6px;padding:4px 9px}
.chip:hover,.chip.is-current{background:var(--soft);border-color:var(--accent)}
.is-pinned{outline:2px solid var(--accent);outline-offset:2px}
.link{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px;border:0;border-radius:8px;background:transparent;text-align:center}
.link:before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px solid var(--ok);z-index:0}
.link>span{position:relative;z-index:1;background:var(--surface);padding:0 6px}
.link-label{font-size:11.5px;color:var(--muted)}
.state{font-size:12px;font-weight:600;border-radius:5px;padding:2px 7px;color:var(--ok);background:var(--ok-bg)}.link>.state{background:var(--ok-bg)}.node .state{align-self:flex-start;margin-top:4px}
[data-state=off] .state,[data-state=off]>.state{color:var(--muted);background:var(--hover)}.link[data-state=off]:before{border-left:2px dashed var(--muted)}.link[data-state=off] .link-label{text-decoration:line-through}
[data-state=risk] .state,[data-state=risk]>.state{color:var(--amber-ink);background:var(--amber-bg)}.link[data-state=risk]:before{border-left-color:var(--amber-ink)}.node.vps[data-state=risk]{border-color:var(--amber-ink)}.node.vps[data-state=off]{border-style:dashed}
.open-count{position:absolute;top:8px;right:10px;font-size:10.5px;font-weight:650;color:var(--amber-ink);background:var(--amber-bg);border-radius:4px;padding:1px 6px}
.link>.open-count{position:absolute;top:50%;right:4px;transform:translateY(-50%);padding:1px 6px}.chip>.open-count{position:static;padding:0 6px}
.panel{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;box-shadow:var(--shadow);padding:20px 24px}
.panel>p{color:var(--muted);font-size:14px}.panel li{font-size:14px}
.detail-top{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}.detail-top .badge{font-size:10px}
.pin{font-size:12px;padding:4px 10px;margin-left:auto}
.questions-title{margin-top:24px;color:var(--amber-ink)}
@media(prefers-reduced-motion:no-preference){.panel>*{animation:appear .12s ease}@keyframes appear{from{opacity:.7}to{opacity:1}}}
@media(max-width:850px){.explorer{grid-template-columns:1fr}.panel{display:none}.has-pin .panel{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;max-height:62vh;border-radius:14px 14px 0 0;box-shadow:0 -6px 24px #0003;padding:16px 18px 28px;z-index:10}.has-pin{padding-bottom:62vh}h2{font-size:21px}}
@media(max-width:620px){th,td{padding:10px;min-width:125px}td:first-child{min-width:120px}table{font-size:12px}.panel li{font-size:13px}.map{padding:13px}}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 22px;overflow-x:auto;scrollbar-width:thin}
.tabs a{flex:none;padding:9px 13px;font-size:13px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--ink);background:var(--hover)}
.tabs a[aria-current=page]{color:var(--accent-ink);border-bottom-color:var(--accent);font-weight:650}
.scenario-bar h2{font-size:15px;letter-spacing:0;margin:0;flex:1}
@media(max-width:620px){.tabs{margin-bottom:16px}.tabs a{padding:8px 10px;font-size:12px}}
.is-simple .open-count{display:none}
.panel>.simple-text{font-size:15px;color:var(--ink);max-width:640px}
.steps{list-style:none;counter-reset:step;padding:0;margin:8px 0 0;max-width:680px}.steps li{counter-increment:step;padding:12px 0 12px 38px;font-size:15px;border-top:1px solid var(--line)}
.steps li::before{content:counter(step);left:0;top:11px;font-size:12px;font-weight:700;line-height:24px;width:24px;height:24px;text-align:center;border-radius:50%;background:var(--soft);color:var(--accent-ink)}
.link:hover:before{border-left-width:4px}.link.is-current:before{border-left-width:5px}
.link.is-current .link-label{color:var(--accent-ink);font-weight:650}.link.is-pinned{outline:none}
.shot{display:block;max-width:100%;margin-top:18px;border:1px solid var(--line);border-radius:8px;background:var(--hover)}.error-text{color:var(--error);font-size:13px}