:root{--navy:#101d34;--navy-2:#152642;--grid:rgba(119,154,198,.12);--surface:#fbfcfe;--line:#dbe3ee;--text:#18243a;--muted:#718096;--category:#ff735e;--category-dark:#a84437;--tag:#36a9e8;--tag-dark:#0874a9;--post:#7655d9;--shadow:0 14px 36px rgba(8,20,42,.16)}
*{box-sizing:border-box}
.graph-app{max-width:100%;font-family:inherit;color:var(--font-color)}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.graph-app{width:100%;height:100%;display:grid;grid-template-rows:76px 1fr;overflow:hidden}
.graph-toolbar{display:grid;grid-template-columns:260px minmax(240px,620px) 1fr;align-items:center;gap:24px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--line);z-index:5}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#2e65b9;color:#fff;font:700 20px Georgia;box-shadow:0 7px 16px rgba(46,101,185,.25)}.brand strong,.brand small{display:block}.brand strong{font-size:18px}.brand small{margin-top:2px;color:var(--muted);font-size:11px}
.graph-search{min-width:0;height:44px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid #d4deea;border-radius:12px;background:#fff;transition:.2s}.graph-search:focus-within{border-color:#579ee8;box-shadow:0 0 0 3px rgba(54,169,232,.14)}.graph-search svg,.toolbar-actions svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.graph-search svg{color:#718096}.graph-search input{width:100%;min-width:0;border:0;outline:0;background:none;color:var(--text);font-size:14px}.graph-search kbd{padding:2px 7px;border:1px solid #dbe3ee;border-radius:5px;background:#f5f7fa;color:#8894a7;font-size:11px}
.toolbar-actions{display:flex;justify-content:flex-end;align-items:center;gap:24px}.toolbar-actions button{display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #d7e0eb;border-radius:10px;background:white;color:#34445c;cursor:pointer}.toolbar-actions button:hover{background:#f3f7fc}.legend{display:flex;gap:16px;font-size:13px;color:#4c5a70;white-space:nowrap}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:10px;height:10px;border-radius:50%}.category-dot{background:var(--category)}.tag-dot{background:var(--tag)}.post-dot{background:var(--post)}
.workspace{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 410px}.graph-stage{min-width:0;position:relative;overflow:hidden;cursor:grab;background-color:var(--navy);background-image:radial-gradient(circle,var(--grid) 1px,transparent 1px);background-size:22px 22px}.graph-stage.is-dragging{cursor:grabbing}.graph-stage svg{display:block;width:100%;height:100%;user-select:none}.graph-stage text{pointer-events:none}.edge{stroke:#8295b1;stroke-width:1.25;opacity:.56}.node{cursor:pointer}.node rect{stroke-width:1.5;transition:filter .16s,stroke-width .16s}.node:hover rect,.node.is-highlighted rect{stroke-width:2.5;filter:brightness(1.14) drop-shadow(0 4px 8px rgba(0,0,0,.28))}.node.is-dimmed{opacity:.12}.node-category rect{fill:var(--category-dark);stroke:#ff8b78}.node-tag rect{fill:#0c4d70;stroke:#31b9f4}.node text{fill:#f8fbff;font-size:13px;font-weight:600}.node-count{fill:#a8c2de!important;font-size:10px!important;font-weight:500!important}
.zoom-controls{position:absolute;top:18px;left:18px;display:grid;border:1px solid rgba(185,208,234,.3);border-radius:10px;overflow:hidden;background:rgba(10,24,45,.84);box-shadow:var(--shadow);backdrop-filter:blur(8px)}.zoom-controls button{width:38px;height:36px;border:0;border-bottom:1px solid rgba(185,208,234,.2);background:none;color:#d9e8fa;font-size:20px;cursor:pointer}.zoom-controls button:last-child{border:0;font-size:17px}.zoom-controls button:hover{background:rgba(83,151,220,.22)}
.graph-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 14px;border:1px solid rgba(198,219,242,.25);border-radius:9px;background:rgba(10,23,42,.82);color:#dceafd;font-size:13px}.canvas-hint{position:absolute;left:20px;bottom:12px;margin:0;color:#86a0c1;font-size:11px;pointer-events:none}
.detail-panel{min-width:0;overflow:auto;background:var(--surface);border-left:1px solid var(--line)}.empty-detail{height:100%;display:grid;place-content:center;justify-items:center;padding:42px;text-align:center}.empty-detail h2{margin:24px 0 7px;font-size:20px}.empty-detail p{max-width:270px;margin:0;color:var(--muted);font-size:13px;line-height:1.7}.empty-orbit{position:relative;width:88px;height:70px}.empty-orbit:before,.empty-orbit:after{content:"";position:absolute;left:20px;top:15px;width:48px;height:38px;border:1px solid #bbcae0;border-radius:50%;transform:rotate(22deg)}.empty-orbit:after{transform:rotate(-22deg)}.empty-orbit i{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--tag);box-shadow:0 4px 12px rgba(54,169,232,.3)}.empty-orbit i:nth-child(1){left:37px;top:29px}.empty-orbit i:nth-child(2){left:15px;top:13px;background:var(--category)}.empty-orbit i:nth-child(3){right:13px;bottom:8px;background:var(--post)}
.detail-head{position:sticky;top:0;z-index:2;padding:25px 26px 18px;background:rgba(251,252,254,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.detail-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.detail-title-row h2{margin:0;font-size:25px;line-height:1.2;word-break:break-word}.close-detail{width:34px;height:34px;border:0;border-radius:9px;background:#eef3f8;color:#536277;cursor:pointer}.close-detail:hover{background:#e2eaf3}.detail-meta{display:flex;align-items:center;gap:8px;margin-top:11px;color:var(--muted);font-size:12px}.detail-meta i{width:9px;height:9px;border-radius:50%;background:var(--tag)}
.mini-graph{height:240px;margin:0 18px;border-bottom:1px solid var(--line)}.mini-graph svg{width:100%;height:100%}.mini-edge{stroke:#a895ed;stroke-width:1.2}.mini-center{fill:#2d9de0}.mini-post{fill:#fff;stroke:#8164dc;stroke-width:1.3}.mini-label{font-size:11px;fill:#59469a}.mini-center-label{font-size:12px;fill:#fff;font-weight:700}.article-section{padding:19px 26px 32px}.article-section h3{margin:0 0 8px;font-size:15px}.article-list{margin:0;padding:0;list-style:none}.article-list a{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;padding:13px 2px;border-bottom:1px solid #e4eaf1;color:#26334a;text-decoration:none;font-size:13px}.article-list a:hover{color:#684acb}.article-icon{color:var(--post);font-size:16px}.article-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.article-date{color:#8a96a8;font-size:11px}.no-results{padding:30px;color:#8290a3;text-align:center;font-size:13px}
@media(max-width:900px){.graph-toolbar{grid-template-columns:auto 1fr auto;padding:0 14px;gap:12px}.brand small,.toolbar-actions .legend,.toolbar-actions button span{display:none}.workspace{grid-template-columns:1fr}.detail-panel{position:absolute;z-index:7;right:0;top:76px;bottom:0;width:min(88vw,410px);transform:translateX(100%);transition:transform .25s ease;box-shadow:-18px 0 40px rgba(4,15,34,.25)}.detail-panel.is-open{transform:translateX(0)}}
@media(max-width:560px){.graph-app{grid-template-rows:64px 1fr}.graph-toolbar{grid-template-columns:auto 1fr}.brand span:last-child,.toolbar-actions{display:none}.graph-search{height:40px}.detail-panel{top:64px;width:100%}.canvas-hint{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Butterfly visual integration */
:root{--navy:#f7f5f7;--grid:rgba(233,99,163,.14);--surface:#fff;--line:#eee7ec;--text:#4c4948;--muted:#8b8388;--category:#e963a3;--category-dark:#e963a3;--tag:#e963a3;--tag-dark:#fff;--post:#b26ffd;--shadow:0 3px 8px 6px rgba(7,17,27,.05)}
.graph-toolbar{padding:0 30px;background:linear-gradient(rgba(35,24,29,.58),rgba(35,24,29,.58)),url('/img/bg.jpg') center 43%/cover;border-bottom:3px solid rgba(233,99,163,.8);box-shadow:0 2px 8px rgba(0,0,0,.14)}
.brand{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}.brand-mark{display:none}.brand small{color:rgba(255,255,255,.78)}
.graph-search{height:42px;border-color:rgba(255,255,255,.52);border-radius:8px;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.08)}.graph-search:focus-within{border-color:#e963a3;box-shadow:0 0 0 3px rgba(233,99,163,.2)}.graph-search svg{color:#9c8792}.graph-search kbd{border-color:#eadde4;background:#f9f3f6;color:#ac8799}
.toolbar-actions button{border-color:rgba(255,255,255,.42);border-radius:8px;background:rgba(255,255,255,.15);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}.toolbar-actions button:hover{background:rgba(233,99,163,.72)}.legend{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}.legend i{border:1px solid rgba(255,255,255,.8)}.tag-dot{background:#fff}
.graph-stage{background-color:#f7f5f7;background-image:radial-gradient(circle,rgba(233,99,163,.14) 1.1px,transparent 1.1px),linear-gradient(135deg,#fff 0%,#faf6f8 100%);background-size:22px 22px,100% 100%}.edge{stroke:#d4a4bb;stroke-width:1.35;opacity:.72}.node:hover rect,.node.is-highlighted rect{filter:drop-shadow(0 4px 7px rgba(145,61,101,.18))}.node-category rect{fill:#e963a3;stroke:#d94f91}.node-tag rect{fill:#fff;stroke:#e963a3}.node-category text{fill:#fff}.node-tag text{fill:#6a5961}.node-category .node-count{fill:rgba(255,255,255,.8)!important}.node-tag .node-count{fill:#b08d9e!important}
.zoom-controls{border-color:#eadde4;border-radius:8px;background:rgba(255,255,255,.92);box-shadow:var(--shadow)}.zoom-controls button{border-bottom-color:#eee4e9;color:#8c6e7c}.zoom-controls button:hover{background:#fbeaf3;color:#e963a3}.graph-status{border-color:#eadde4;border-radius:8px;background:#fff;color:#8b7480;box-shadow:var(--shadow)}.canvas-hint{color:#aa8e9c}
.detail-panel{border-left-color:#eee7ec;box-shadow:-5px 0 18px rgba(82,45,63,.05)}.detail-meta i{background:#e963a3}.mini-center{fill:#e963a3}.mini-edge{stroke:#d2a0ba}.mini-post{stroke:#b26ffd}.article-list a:hover{color:#e963a3}.article-icon{color:#b26ffd}.close-detail:hover{background:#fbeaf3;color:#e963a3}

/* Embedded in Hexo Butterfly's page shell */
body:has(.graph-app){overflow:auto;background:var(--global-bg)}
body:has(.graph-app) #content-inner{width:100%;max-width:1600px;padding:20px 20px 24px}
body:has(.graph-app) #page{height:calc(100vh - 105px);min-height:640px;padding:0;overflow:hidden;border-radius:8px;background:var(--card-bg);box-shadow:0 3px 8px 6px rgba(7,17,27,.05)}
body:has(.graph-app) #page>.page-title{display:none}
body:has(.graph-app) #article-container{height:100%}
body:has(.graph-app) #page .graph-app p{margin:0}
.graph-app{height:100%;grid-template-rows:64px minmax(0,1fr);background:var(--card-bg)}
.graph-toolbar{grid-template-columns:200px minmax(260px,1fr) auto;padding:0 24px;background:var(--card-bg);border-bottom:1px solid #eee7ec;box-shadow:none}
.graph-heading{min-width:0}.graph-heading strong,.graph-heading small{display:block}.graph-heading strong{color:var(--font-color);font-size:18px}.graph-heading small{margin-top:2px;color:var(--meta-color);font-size:11px}
.graph-search{background:var(--card-bg);border-color:#eadde4;box-shadow:none}.toolbar-actions button{min-width:108px;white-space:nowrap;border-color:#eadde4;background:var(--card-bg);color:var(--font-color);text-shadow:none}.toolbar-actions button:hover{background:#fbeaf3;color:#e963a3}.legend{color:var(--font-color);text-shadow:none}.legend i{border-color:#e4d7de}.tag-dot{background:#fff;border-color:#e963a3!important}
.detail-head{background:var(--card-bg)}.detail-panel,.mini-post{background:var(--card-bg)}.article-list a{color:var(--font-color)}
html[data-theme=dark] .graph-stage{background-color:#171517;background-image:radial-gradient(circle,rgba(233,99,163,.2) 1.1px,transparent 1.1px),linear-gradient(135deg,#191719 0%,#211b1e 100%)}
html[data-theme=dark] .node-tag rect{fill:#2c2529}.node-tag text{fill:var(--font-color)}
html[data-theme=dark] .graph-search input{color:var(--font-color)}
@media(max-width:900px){body:has(.graph-app) #content-inner{padding:12px}body:has(.graph-app) #page{height:calc(100vh - 86px);min-height:600px}.graph-toolbar{grid-template-columns:auto minmax(180px,1fr) auto}.graph-heading small,.toolbar-actions .legend,.toolbar-actions button span{display:none}.toolbar-actions button{min-width:42px}}
@media(max-width:560px){body:has(.graph-app) #content-inner{padding:0}body:has(.graph-app) #page{height:calc(100vh - 62px);min-height:0;border-radius:0}.graph-app{grid-template-rows:58px minmax(0,1fr)}.graph-toolbar{grid-template-columns:minmax(0,1fr);padding:0 12px}.graph-heading,.toolbar-actions{display:none}.detail-panel{top:58px}}