/* One foreground orbit and a connected, progressively smaller ancestor path. */
.graph-universe.graph-stage,.graph-universe.graph-preview{
  position:relative;min-height:0!important;height:650px;overflow:hidden;isolation:isolate;border-radius:26px;
  background:radial-gradient(ellipse at 50% 52%,#292550 0,transparent 45%),radial-gradient(ellipse at 15% 12%,#202342 0,transparent 43%),linear-gradient(145deg,#11182c,#171a35 65%,#11192d);
  box-shadow:0 18px 50px #17193918,inset 0 0 0 1px #ffffff12;
}
.graph-universe::before{inset:0;opacity:.6;mask-image:none;background-image:radial-gradient(circle,#c9c8ef80 .65px,transparent 1px),radial-gradient(circle,#a8c7ef50 .6px,transparent 1px);background-size:67px 71px,103px 107px;background-position:9px 11px,44px 35px;}
.graph-universe .graph-canvas{position:absolute;inset:0;min-height:0!important;perspective:900px;z-index:1;}
.graph-universe .graph-toolbar{z-index:12;top:16px;left:16px;border:1px solid #ffffff16;background:#161c32c9;box-shadow:0 6px 18px #050a1b33;backdrop-filter:blur(14px);max-width:calc(100% - 125px);padding:4px;}
.graph-universe .graph-toolbar button{color:#aab0d0;font-weight:650;font-size:11px;padding:8px 13px;}
.graph-universe .graph-toolbar button.active{background:#7e74e742;color:#e2ddff;}
.graph-depth-label{position:absolute;top:23px;right:20px;z-index:11;color:#e8e6ff;font-size:11px;text-align:right;letter-spacing:.04em;}
.graph-depth-label span{display:block;color:#9097ba;font-size:9px;margin-top:3px;}
.graph-nebula{position:absolute;left:50%;top:53%;width:65%;height:70%;transform:translate(-50%,-50%) rotate(-20deg);background:radial-gradient(ellipse,#7a61dc17,transparent 65%);pointer-events:none;filter:blur(25px);}
.graph-universe .graph-node{width:114px;height:74px;min-width:0;max-width:none;padding:0;gap:0;border:0!important;background:none!important;box-shadow:none!important;display:block;transform:translate(-50%,-50%);transition:left .65s cubic-bezier(.2,.8,.2,1),top .65s cubic-bezier(.2,.8,.2,1);z-index:5;filter:none;opacity:1;}
.graph-universe .graph-node:hover{transform:translate(-50%,-50%);box-shadow:none;}
.graph-node-target{display:flex;position:relative;width:100%;height:100%;align-items:center;justify-content:center;border-radius:50%;outline-offset:5px;}
.graph-universe .graph-bubble,.graph-universe .graph-node--module .graph-bubble,.graph-universe .graph-node.level-4 .graph-bubble,.graph-universe .graph-node.level-3 .graph-bubble,.graph-universe .graph-node.level-2 .graph-bubble{width:70px;height:70px;flex-basis:70px;border:1px solid color-mix(in srgb,var(--node-color) 50%,#fff);background:radial-gradient(circle at 26% 20%,#fff,color-mix(in srgb,var(--node-color) 15%,#f5f4ff) 80%);box-shadow:0 0 28px color-mix(in srgb,var(--node-color) 19%,transparent),0 8px 25px #00000025,inset 0 1px 0 #fff;transition:width .35s,height .35s,box-shadow .3s;}
.graph-universe .graph-icon{font-size:23px;letter-spacing:0;}
.graph-universe .graph-node-copy{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:124px;max-width:none;padding:0;pointer-events:none;}
.graph-universe .graph-node-copy strong{font-size:11px;line-height:1.3;color:#edeefa;font-weight:600;text-wrap:balance;hyphens:auto;overflow-wrap:break-word;}
.graph-universe .graph-node-copy small{color:#8f98bd;font-size:9px;margin-top:4px;font-weight:400;}
.graph-universe .orbit-center{width:132px;height:108px;z-index:7;}
.graph-universe .orbit-center .graph-bubble{width:100px;height:100px;flex-basis:100px;box-shadow:0 0 0 9px #9a8ded0d,0 0 0 24px #9a8ded05,0 0 75px color-mix(in srgb,var(--node-color) 24%,transparent),0 12px 40px #06081955;}
.graph-universe .orbit-center .graph-icon{font-size:31px;}
.graph-universe .orbit-center .graph-node-copy{width:180px;}
.graph-universe .orbit-center .graph-node-copy strong{font-size:13px;}
.graph-universe .graph-node--user .graph-bubble{padding:5px;background:#eeeaff;border:1px solid #ffffffb3;overflow:hidden;}
.graph-avatar{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;}
.graph-universe .graph-node--user .graph-bubble::before,.graph-universe .graph-node--user .graph-bubble::after{display:none;}
.graph-universe .graph-node.current .graph-bubble{box-shadow:0 0 0 5px color-mix(in srgb,var(--node-color) 28%,transparent),0 0 35px color-mix(in srgb,var(--node-color) 35%,transparent);}
.graph-universe .graph-node.current .graph-node-copy strong{color:#fff;}
.graph-universe .graph-node.locked .graph-bubble{filter:saturate(.6);}
.graph-universe .graph-check,.graph-universe .graph-lock{width:19px;height:19px;font-size:9px;right:-2px;bottom:0;}
.graph-universe .graph-lines{overflow:visible;z-index:2;}
.graph-universe .graph-lines .graph-link{fill:none;stroke:#b7acf744;stroke-width:1;filter:none;opacity:1;}
.graph-universe .graph-lines .distant-link{stroke:#8a91b329;stroke-dasharray:2 6;}
.graph-orbit-ring{position:absolute;border:1px solid #b7acf717;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:1;box-shadow:0 0 55px #a48bf708;}
.graph-orbit-ring.outer{border-style:dashed;border-color:#a2acdd12;}
.graph-pin{position:absolute;right:15px;top:-6px;z-index:9;width:27px;height:27px;border:1px solid #b3ade557;background:#29304c;color:#bec4e6;border-radius:50%;padding:6px;display:grid;place-items:center;opacity:0;transition:opacity .18s;}
.graph-pin svg,.graph-peek svg{width:14px;height:14px;fill:currentColor;}
.graph-node:hover .graph-pin,.graph-node:focus-within .graph-pin,.graph-node.is-pinned .graph-pin{opacity:1;}
.graph-node.is-pinned .graph-pin{color:#fff;background:#7164d9;border-color:#c4bcff;}
.graph-universe .graph-node.is-distant{width:40px;height:40px;z-index:4;}
.graph-universe .is-distant .graph-node-target{width:40px;height:40px;}
.graph-universe .is-distant .graph-bubble{width:12px;height:12px;flex-basis:12px;background:var(--node-color);border:1px solid #ffffff55;box-shadow:0 0 16px color-mix(in srgb,var(--node-color) 60%,transparent);}
.graph-universe .is-distant .graph-bubble::before,.graph-universe .is-distant .graph-bubble::after,.graph-universe .is-distant .graph-icon,.graph-universe .is-distant .graph-node-copy,.graph-universe .is-distant .graph-pin,.graph-universe .is-distant .graph-check,.graph-universe .is-distant .graph-lock{display:none;}
.graph-universe .is-distant.is-previewed{z-index:10;}
.graph-universe .is-distant.is-previewed .graph-bubble{width:60px;height:60px;flex-basis:60px;background:color-mix(in srgb,var(--node-color) 15%,#fff);box-shadow:0 0 45px color-mix(in srgb,var(--node-color) 30%,transparent);}
.graph-universe .is-distant.is-previewed .graph-icon{display:block;font-size:25px;}
.graph-bottom{position:absolute;left:20px;right:20px;bottom:18px;display:flex;gap:16px;align-items:center;justify-content:space-between;z-index:11;}
.graph-hint{color:#8e96b8;font-size:10px;line-height:1.5;max-width:420px;}
.graph-collapse,.graph-photo-button{position:relative;flex-shrink:0;font-size:10px;color:#d3cef5;border:1px solid #c4bbff26;background:#8579cf13;border-radius:9px;padding:8px 11px;cursor:pointer;}
.graph-photo-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.graph-photo-button:focus-within{outline:2px solid #c4bcff;}
.graph-peek{position:absolute;z-index:20;border:1px solid #ffffff24;border-radius:17px;padding:16px;background:#282d49f5;backdrop-filter:blur(18px);box-shadow:0 15px 35px #05081777;text-align:center;color:#f4f1ff;}
.graph-peek[hidden]{display:none;}
.graph-peek-icon{display:grid;place-items:center;width:49px;height:49px;margin:0 auto 8px;border-radius:50%;background:color-mix(in srgb,var(--node-color) 15%,#fff);color:var(--node-color);font-size:22px;box-shadow:0 0 22px #9f8ae926;}
.graph-peek>strong{display:block;font-size:12px;line-height:1.4;padding:0 4px;}
.graph-peek>small{display:block;color:#a6aecf;font-size:10px;margin-top:4px;}
.graph-peek>div{display:flex;flex-direction:column;gap:7px;margin-top:12px;}
.graph-peek>div>a,.graph-peek>div>button{border:1px solid #c2b9ff36;border-radius:8px;background:#7264c532;color:#eee9ff;font-size:11px;min-height:34px;padding:8px;display:flex;align-items:center;justify-content:center;gap:6px;}
.graph-peek>div>a{background:#8a79ea;color:#fff;border-color:#a99bf9;}
.graph-peek-close{position:absolute;right:8px;top:7px;width:27px;height:27px;padding:0;border:0;border-radius:50%;background:#ffffff0b;color:#c7c8e0;font-size:19px;}
.graph-universe a:focus-visible,.graph-universe button:focus-visible{outline:2px solid #d3cbff;outline-offset:4px;}
@media(max-width:620px){
 .graph-universe.graph-stage,.graph-universe.graph-preview{border-radius:20px;}
 .graph-universe .graph-toolbar{top:12px;left:12px;max-width:calc(100% - 100px);}
 .graph-universe .graph-toolbar button{font-size:10px;padding:7px 10px;}
 .graph-depth-label{top:19px;right:13px;font-size:10px;}
 .graph-universe .graph-node{width:88px;height:61px;}
 .graph-universe .graph-bubble,.graph-universe .graph-node--module .graph-bubble,.graph-universe .graph-node.level-4 .graph-bubble,.graph-universe .graph-node.level-3 .graph-bubble,.graph-universe .graph-node.level-2 .graph-bubble{width:57px;height:57px;flex-basis:57px;}
 .graph-universe .graph-icon{font-size:21px;}
 .graph-universe .graph-node-copy{width:94px;top:calc(100% + 6px);}
 .graph-universe .graph-node-copy strong{font-size:10px;line-height:1.3;}
 .graph-universe .graph-node-copy small{font-size:8px;}
 .graph-universe .orbit-center{width:105px;height:87px;}
 .graph-universe .orbit-center .graph-bubble{width:80px;height:80px;flex-basis:80px;}
 .graph-universe .orbit-center .graph-icon{font-size:27px;}
 .graph-universe .orbit-center .graph-node-copy{width:144px;}
 .graph-universe .orbit-center .graph-node-copy strong{font-size:11px;}
 .graph-universe .is-distant .graph-bubble{width:12px;height:12px;flex-basis:12px;}
 .graph-universe .is-distant.is-previewed .graph-bubble{width:57px;height:57px;flex-basis:57px;}
 .graph-pin{opacity:1;right:7px;top:-8px;width:26px;height:26px;}
 .graph-bottom{left:13px;right:13px;bottom:14px;gap:10px;}
 .graph-hint{font-size:9px;max-width:185px;}
 .graph-collapse,.graph-photo-button{padding:7px 8px;font-size:9px;}
}
@media(prefers-reduced-motion:reduce){.graph-universe *{animation:none!important;transition:none!important;}}
.graph-universe .orbit-child .graph-node-copy strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;}

.graph-empty-note{position:absolute;left:50%;top:68%;transform:translateX(-50%);width:min(270px,85%);text-align:center;z-index:8;color:#a4acce;font-size:11px;line-height:1.5;}
.graph-empty-note a{display:block;width:fit-content;margin:12px auto 0;padding:9px 13px;border:1px solid #c3b8ff30;border-radius:9px;background:#8975d32b;color:#e1dbff;}
.graph-universe .graph-canvas{perspective-origin:50% 45%;}
/* JS interpolates positions and sizes together, including the connecting lines. */
.graph-universe .graph-node{height:max(44px,var(--bubble-size));transition:none;}
.graph-universe .graph-node .graph-bubble{width:var(--bubble-size)!important;height:var(--bubble-size)!important;flex-basis:var(--bubble-size)!important;transition:box-shadow .25s;}
.graph-universe .orbit-center .graph-icon{font-size:25px;}
.graph-universe .orbit-center .graph-node-copy{width:144px;}
.graph-universe .ancestor-node{width:90px;z-index:4;}
.graph-universe .graph-node.ancestor-node .graph-bubble{background:radial-gradient(circle at 28% 20%,#d9dbef,color-mix(in srgb,var(--node-color) 30%,#6c7192));box-shadow:0 0 18px color-mix(in srgb,var(--node-color) 15%,transparent);}
.graph-universe .ancestor-node .graph-icon{font-size:clamp(10px,calc(var(--bubble-size)*.35),18px);}
.graph-universe .ancestor-node .graph-node-copy{width:96px;top:calc(50% + var(--bubble-size)/2 + 6px);}
.graph-universe .ancestor-node .graph-node-copy strong{font-size:10px;color:#c4c9e1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
.graph-universe .ancestor-node .graph-node-copy small{display:none;}
.graph-universe .ancestor-node[data-depth="3"] .graph-node-copy strong{font-size:9px;color:#a5afcd;}
.graph-universe .ancestor-node .graph-node-target{min-width:44px;min-height:44px;}
.graph-universe .graph-lines .depth-link{stroke:#b9b2e76b;stroke-width:1.4;}
.graph-universe .graph-node.is-distant,.graph-universe .is-distant .graph-node-target{width:44px;height:44px;}
.graph-universe .graph-node.orbit-child.is-distant.is-previewed .graph-bubble{width:84px!important;height:84px!important;flex-basis:84px!important;}
.graph-universe .is-distant.is-previewed .graph-icon{font-size:26px;}
.graph-universe.scene-animating .graph-bubble{transition:none;}
.graph-peek>div>a,.graph-peek>div>button,.graph-peek-close{min-height:44px;}
.graph-peek-close{width:44px;right:0;top:0;}
.graph-universe .graph-node.is-entering{animation:depth-arrive .65s ease-out both;}
@keyframes depth-arrive{from{opacity:0;}to{opacity:1;}}
@media(max-width:620px){
 .graph-universe .orbit-center .graph-icon{font-size:22px;}
 .graph-universe .graph-node.orbit-child.is-distant.is-previewed .graph-bubble{width:70px!important;height:70px!important;flex-basis:70px!important;}
 .graph-universe .ancestor-node{width:80px;}
 .graph-universe .ancestor-node .graph-node-copy{width:88px;}
 .graph-peek.is-tap-sheet{position:fixed;left:50%!important;top:auto!important;bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;transform:translateX(-50%);width:calc(100vw - 24px)!important;max-width:440px;z-index:90;}
}

.graph-universe .graph-node.is-distant .graph-bubble{background:var(--node-color);box-shadow:0 0 16px color-mix(in srgb,var(--node-color) 60%,transparent);}
.graph-universe .graph-node.is-distant.is-previewed .graph-bubble{background:color-mix(in srgb,var(--node-color) 15%,#fff);box-shadow:0 0 45px color-mix(in srgb,var(--node-color) 30%,transparent);}
@media(pointer:coarse){.graph-universe .graph-pin{width:44px;height:44px;right:0;top:-12px;padding:12px;}}

/* Canvas width can be narrow even when a tablet/desktop viewport is wide. */
.graph-universe.is-compact .graph-node{width:88px;}
.graph-universe.is-compact .graph-node.orbit-center{width:105px;}
.graph-universe.is-compact .graph-node.ancestor-node{width:80px;}
.graph-universe.is-compact .graph-node.is-distant{width:44px;height:44px;}
.graph-universe.is-compact .graph-node-copy{width:94px;top:calc(100% + 6px);}
.graph-universe.is-compact .graph-node-copy strong{font-size:10px;line-height:1.3;}
.graph-universe.is-compact .graph-node-copy small{font-size:8px;}
.graph-universe.is-compact .orbit-center .graph-icon{font-size:22px;}
.graph-universe.is-compact .orbit-center .graph-node-copy{width:144px;}
.graph-universe.is-compact .orbit-center .graph-node-copy strong{font-size:11px;}
.graph-universe.is-compact .ancestor-node .graph-node-copy{width:88px;top:calc(50% + var(--bubble-size)/2 + 6px);}
.graph-universe.is-compact .ancestor-node[data-depth="3"] .graph-node-copy strong{font-size:9px;}
.graph-universe.is-compact .graph-node.is-distant.is-previewed .graph-bubble{width:70px!important;height:70px!important;flex-basis:70px!important;}
.graph-universe.is-compact .graph-peek.is-tap-sheet{position:fixed;left:50%!important;top:auto!important;bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;transform:translateX(-50%);width:calc(100vw - 24px)!important;max-width:440px;z-index:90;}