.relation-explorer{overflow:hidden;border:1px solid #ffffff19;border-radius:26px;background:#101a27}
.relation-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;border-bottom:1px solid #ffffff16;background:#172331}
.relation-toolbar-copy{display:flex;align-items:center;gap:12px;min-width:0}.relation-toolbar-copy strong{color:#e9f4fb;font-size:14px}.relation-toolbar-copy span{color:#91aabd;font-size:11px;white-space:nowrap}
.relation-tools{display:flex;align-items:center;gap:5px}.relation-tools button{min-width:35px;height:32px;padding:0 9px;border:1px solid #bbd7e12b;border-radius:9px;background:#263747;color:#e5f4fb;font:inherit;font-size:16px;cursor:pointer}.relation-tools button:last-child{padding:0 11px;font-size:11px}.relation-tools button:hover{border-color:#9bd4ed88;background:#30485c}.relation-tools button:focus-visible,.relation-map:focus-visible,.relation-node:focus-visible{outline:2px solid #9bd4ed;outline-offset:2px}.relation-tools output{min-width:44px;color:#afc4d3;font-size:11px;text-align:center}
.relation-map{position:relative;height:570px;overflow:hidden;isolation:isolate;touch-action:none;user-select:none;cursor:grab;background:radial-gradient(ellipse at 50% 50%,#27496342 0%,#182b3a28 35%,transparent 73%),#101923}.relation-map.is-dragging{cursor:grabbing}.relation-map:focus-visible{outline-offset:-4px}
.relation-world{position:absolute;left:0;top:0;width:1800px;height:1200px;transform-origin:0 0;will-change:transform}
.relation-lines,.relation-nodes{position:absolute;inset:0;width:100%;height:100%}.relation-lines{z-index:1;overflow:visible;pointer-events:none}.relation-nodes{z-index:2;pointer-events:none}
.relation-orbit{position:absolute;left:900px;top:600px;z-index:0;transform:translate(-50%,-50%);border:1px solid #b6d4df19;border-radius:50%;pointer-events:none}.relation-orbit-one{width:760px;height:760px}.relation-orbit-two{width:1390px;height:1040px;border-style:dashed}
.relation-line{stroke:#8baec050;stroke-width:1.15;transition:stroke .25s,opacity .25s,stroke-width .25s}.relation-line.is-direct{stroke:#9bbdc36a;stroke-width:1.4}.relation-line.is-active{stroke:#e0be7e;stroke-width:2.25;stroke-dasharray:8 6;animation:relation-flow 20s linear infinite}.relation-line.is-muted{opacity:.22}.relation-edge-label{fill:#ecd59f;font-size:14px;paint-order:stroke;stroke:#101923;stroke-width:5px;stroke-linejoin:round;pointer-events:none}
.relation-node{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:104px;padding:0;border:0;background:none;color:#d7e6f0;font:inherit;text-align:center;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer}.relation-node img{display:block;width:72px;height:72px;border:2px solid #9ebdce93;border-radius:50%;object-fit:cover;box-shadow:0 7px 22px #0009;transition:transform .2s,border-color .2s,box-shadow .2s}.relation-node span{padding:2px 6px;border-radius:7px;background:#101923c9;font-size:12px;line-height:1.2;text-shadow:0 2px 7px #000}.relation-node:hover img{transform:scale(1.08);border-color:#c8eaf4}.relation-node.is-selected img{border-color:#e6c887;box-shadow:0 0 0 5px #dfc47b2c,0 7px 25px #000a}.relation-node.is-selected span{color:#ffdfa2}
.relation-node-center{z-index:3;min-width:120px;cursor:default;pointer-events:none}.relation-node-center img{width:102px;height:102px;border:3px solid #e1c583;box-shadow:0 0 0 8px #d5b87922,0 16px 40px #000b}.relation-node-center span{color:#ffdfaa;font-size:14px;font-weight:700}.relation-node-secondary{opacity:.74}.relation-node-secondary img{width:58px;height:58px;border-color:#87a2b080}.relation-node-secondary span{font-size:11px}.relation-node-secondary:hover,.relation-node-secondary.is-selected{opacity:1}
.relation-loading{position:absolute;left:50%;top:50%;z-index:4;max-width:80%;margin:0;padding:12px 18px;border:1px solid #ffffff1e;border-radius:12px;background:#182738;color:#b8cfde;font-size:13px;transform:translate(-50%,-50%)}.relation-loading[hidden]{display:none}
.relation-detail{display:flex;align-items:center;gap:25px;min-height:141px;padding:20px 30px;border-top:1px solid #ffffff16;background:#1b2531}.relation-detail-portraits{display:flex;align-items:center;gap:12px;flex:0 0 auto}.relation-detail-portraits figure{margin:0;text-align:center}.relation-detail-portraits img{width:61px;height:61px;border:2px solid #accad7a0;border-radius:50%;object-fit:cover}.relation-detail-portraits figure:last-child img{border-color:#dfc286}.relation-detail-portraits figcaption{margin-top:3px;color:#dce8f0;font-size:11px}.relation-detail-portraits>span{margin-top:-13px;color:#8ca7b9;font-size:12px}.relation-detail-copy{min-width:0}.relation-detail-copy>span{color:#e5ca90;font-size:13px;font-weight:700}.relation-detail-copy p{margin:8px 0 0;color:#afc5d4;font-size:13px;line-height:1.7}
.relation-hint{margin:0;padding:11px 20px;border-top:1px solid #ffffff0e;color:#8ca6ba;font-size:11px}
@keyframes relation-flow{to{stroke-dashoffset:-140}}
@media(max-width:600px){.relation-explorer{border-radius:20px}.relation-toolbar{padding:10px 12px}.relation-toolbar-copy{display:block}.relation-toolbar-copy strong{display:block;font-size:12px}.relation-toolbar-copy span{font-size:10px}.relation-tools button{min-width:31px;height:30px;padding:0 6px}.relation-tools output{min-width:36px;font-size:10px}.relation-map{height:500px}.relation-detail{display:block;min-height:0;padding:16px}.relation-detail-portraits img{width:48px;height:48px}.relation-detail-portraits figcaption{font-size:10px}.relation-detail-copy{margin-top:12px}.relation-detail-copy p{font-size:12px}.relation-hint{padding:10px 15px;font-size:10px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){.relation-line.is-active{animation:none}.relation-node img,.relation-line{transition:none}}