:root{color-scheme:dark;--bg:#10171d;--surface:#151e25;--line:#2c3944;--text:#edf1f4;--muted:#a1aeb9;--need:#86cdbb;--pain:#e1a398;--tool:#e8c07e;font-family:Avenir Next,Avenir,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#1d2932;color:var(--text);border-radius:6px;padding:8px 12px}button:hover{background:#2b3c48}button:focus-visible,input:focus-visible,a:focus-visible,.causal-node:focus-visible{outline:2px solid var(--need);outline-offset:3px}header{height:78px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px;background:#131c23}.brand{font-size:23px;font-weight:600;text-decoration:none;color:var(--text);letter-spacing:-.8px;white-space:nowrap}.brand span{display:block;font:9px monospace;letter-spacing:1.8px;color:var(--muted);margin-top:5px}.starting-point{display:flex;align-items:center;gap:18px;font-size:13px;color:#bac7d0}.starting-point b{font-size:19px;font-weight:400;color:var(--need)}.quiet{background:none;color:var(--muted);font-size:12px}main{height:calc(100dvh - 78px);min-height:660px;display:flex;flex-direction:column;padding:24px 32px 0}.intro{display:flex;align-items:baseline;gap:22px;margin-bottom:22px}.intro h1{font-size:28px;font-weight:500;letter-spacing:-.8px;margin:0}.intro p{font-size:14px;color:var(--muted);margin:0}.toolbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:18px}#group-tabs{display:flex;gap:5px}#group-tabs button{background:none;color:var(--muted);font-size:12px;padding:9px 12px;border-color:transparent}#group-tabs button.active{background:#253440;color:var(--text);border-color:#526573}.search{margin-left:auto;display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:8px 10px;border-radius:6px;background:var(--surface)}.search input{border:0;outline:none;color:var(--text);background:none;width:178px;font-size:12px}.search:focus-within{border-color:var(--need)}kbd{font:10px monospace;color:var(--muted);border:1px solid #50606c;border-radius:3px;padding:1px 4px}.motion{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}.motion input{accent-color:var(--need)}.workspace{display:flex;flex:1;min-height:0;gap:20px}.diagram{display:flex;flex:1;min-width:0;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}.diagram-title{height:46px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}#scope-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#canvas{position:relative;flex:1;min-height:350px;overflow:hidden;background-image:radial-gradient(#3b536744 .85px,transparent .85px);background-size:22px 22px;background-color:#10181f;touch-action:none}#graph{position:absolute;width:100%;height:100%;inset:0;-webkit-user-select:none;user-select:none;cursor:grab;touch-action:none}#graph.dragging{cursor:grabbing}.column-heading{font:15px monospace;font-weight:600;letter-spacing:1.8px;text-anchor:middle;fill:#a6b6c2}.column-subheading{font-size:13px;text-anchor:middle;fill:#708897}.col-need{fill:var(--need)}.col-pain{fill:var(--pain)}.col-tool{fill:var(--tool)}.causal-link{fill:none;stroke-width:2;marker-end:url(#arrow);opacity:.8;transition:opacity .15s,stroke-width .15s}.causal-link.need-pain{stroke:#537568}.causal-link.pain-tool{stroke:#896f51}.link-label{font-size:15px;fill:#8b9eac;letter-spacing:1px;text-anchor:middle}.causal-node{cursor:pointer;transition:opacity .15s}.need-shape{fill:#152b29;stroke:var(--need);stroke-width:1.6}.pain-shape{fill:#282324;stroke:#a87d75;stroke-width:1.5}.tool-shape{fill:#2b2821;stroke:#b79b6d;stroke-width:1.6}.node-title{fill:#eef1f3;text-anchor:middle;font-size:21px;font-weight:500;letter-spacing:-.3px}.pain .node-title{font-size:19px;fill:#e4c5be}.tool .node-title{font-size:22px;fill:#f0d7b0}.node-icon{fill:none;stroke:var(--need);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.tool .node-icon{stroke:var(--tool)}.pain .node-icon{stroke:var(--pain)}.causal-node.dim,.causal-link.dim,.link-label.dim{opacity:.14}.causal-node.selected .need-shape,.causal-node.selected .pain-shape,.causal-node.selected .tool-shape,.causal-node.related .need-shape,.causal-node.related .pain-shape,.causal-node.related .tool-shape{stroke-width:2.5}.causal-node.selected .tool-shape{fill:#433723;stroke:var(--tool)}.causal-link.highlight{opacity:1;stroke-width:3.5;stroke:var(--tool)}.causal-node.hovered .need-shape,.causal-node.hovered .pain-shape,.causal-node.hovered .tool-shape{stroke:#e8edf1;stroke-width:2.5}.canvas-hint{position:absolute;bottom:16px;left:18px;color:#869cab;font:10px monospace;pointer-events:none}.zoom{position:absolute;right:16px;bottom:12px;display:flex;align-items:center;border:1px solid #405462;background:#1c2a34;border-radius:6px;padding:3px;gap:2px}.zoom button{padding:5px 9px;border:0;background:none;min-width:30px}.zoom button:hover{background:#364956}.zoom span{font:10px monospace;color:var(--muted);min-width:42px;text-align:center}.diagram-footer{padding:12px 18px;display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--muted);border-top:1px solid var(--line);background:var(--surface)}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 6px 0 14px;vertical-align:1px}.dot:first-child{margin-left:0}.dot.need{background:var(--need)}.dot.pain{background:var(--pain)}.dot.tool{background:var(--tool)}footer{display:flex;justify-content:space-between;gap:20px;padding:15px 0;font-size:11px;color:#8da0ae}#detail{width:305px;flex:0 0 305px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow-y:auto}.detail-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);font:10px monospace;letter-spacing:1px;color:var(--muted)}.detail-top button{border:0;background:none;padding:0 4px;font-size:20px}.detail-heading{padding:24px 22px 18px}.detail-heading .type{font:10px monospace;color:var(--tool);text-transform:uppercase;letter-spacing:1.4px}.detail-heading h2{font-size:25px;letter-spacing:-.5px;font-weight:500;margin:10px 0 0}.reason{padding:0 22px 18px}.reason h3{font:10px monospace;letter-spacing:1px;text-transform:uppercase;margin:0 0 8px;color:var(--need)}.reason.pain h3{color:var(--pain)}.reason.help h3{color:var(--tool)}.reason p{font-size:13px;color:#bfccd5;line-height:1.7;margin:0}.detail-limit{padding:18px 22px;margin-top:7px;border-top:1px solid var(--line);font-size:11px;color:#8fa3b0;line-height:1.7}.detail-branches{padding:0 22px 20px}.detail-branches button{display:block;width:100%;text-align:left;margin:6px 0;font-size:11px;background:none}.detail-branches h3{font:10px monospace;color:var(--muted)}#tooltip{position:absolute;padding:13px 16px;max-width:290px;background:#253541;border:1px solid #658397;border-radius:8px;box-shadow:0 12px 25px #0004;pointer-events:none;z-index:5;font-size:12px;line-height:1.6;color:#c4d3de}#tooltip strong{display:block;color:var(--text);margin-bottom:5px}#empty{position:absolute;top:45%;left:0;right:0;text-align:center;color:var(--muted)}#empty button{display:block;margin:12px auto}[hidden]{display:none!important}.motion-on .causal-link{stroke-dasharray:7 5;animation:flow 1.8s linear infinite}@keyframes flow{to{stroke-dashoffset:-24}}@media(max-width:1100px){header{padding:0 20px}.starting-point{font-size:11px;gap:10px}main{padding:22px 20px 0}.intro{display:block}.intro p{margin-top:8px}.toolbar{gap:10px}#group-tabs button{padding:9px;font-size:11px}.search input{width:150px}.workspace{gap:12px}#detail{width:270px;flex-basis:270px}.motion{font-size:10px}}@media(max-width:800px){#detail{position:fixed;right:12px;top:88px;bottom:18px;width:min(330px,90vw);z-index:6;box-shadow:-15px 0 40px #0006}.starting-point{display:none}.search{margin-left:0}main{min-height:650px}.canvas-hint{font-size:9px}.intro h1{font-size:25px}}@media(max-width:600px){header{height:68px;padding:0 16px}.brand{font-size:21px}.brand span{font-size:8px}.quiet{font-size:11px;min-height:38px}main{height:calc(100dvh - 68px);min-height:610px;padding:18px 12px 0}.intro{margin-bottom:15px}.intro h1{font-size:24px}.intro p{font-size:12px;line-height:1.5}.toolbar{gap:10px;align-items:center;margin-bottom:12px}#group-tabs{width:100%;overflow-x:auto;scrollbar-width:none;gap:1px}#group-tabs button{white-space:nowrap;font-size:10px;padding:10px 9px;min-height:40px}.search{flex:1;min-width:0;height:38px}.search input{font-size:16px;width:100%;min-width:0}.search kbd{display:none}.motion{font-size:11px}.diagram-title{padding:0 12px;font-size:10px}.diagram-title .quiet{font-size:10px}#canvas{min-height:320px}.canvas-hint{bottom:62px;left:12px;font-size:8px}.zoom{right:10px;bottom:10px}.zoom button{min-height:38px;min-width:36px}.diagram-footer{padding:10px 12px;font-size:9px}.diagram-footer span:last-child{display:none}footer{font-size:10px;padding:12px 2px;line-height:1.5}footer span:last-child{display:none}#detail{top:78px;bottom:12px}.detail-top button{width:38px;height:38px}.node-title{font-size:23px}.tool .node-title{font-size:24px}.pain .node-title{font-size:20px}}#need-picker{border:1px solid var(--line);background:#1d2932;color:var(--text);border-radius:5px;padding:7px;font:12px inherit;min-width:0;max-width:100%;height:36px}@media(max-width:600px){#scope-text{display:none}#need-picker{flex:1;width:100%;font-size:13px}.diagram-title{gap:6px}.diagram-title #clear{padding:4px;font-size:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}