:root{--bg: #f5f5f5;--panel-bg: #ffffff;--border: #e2e2e2;--text: #000000;--text-dim: #6b6b6b;--accent: #e42b0c;--edge-color: var(--text);--company-box: rgba(0, 0, 0, .03);--company-border: rgba(0, 0, 0, .22);--app-box: rgba(228, 43, 12, .05);--app-border: rgba(228, 43, 12, .3);--node-bg: #ffffff;--canvas-bg: #fafafa;--grid-dot: rgba(0, 0, 0, .14);--toolbar-bg: rgba(255, 255, 255, .95)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Helvetica,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.site{min-height:100vh;background:var(--bg)}.page{max-width:1100px;margin:0 auto;padding:32px 24px 64px}.site-nav{display:flex;align-items:center;gap:20px;max-width:1100px;margin:0 auto;padding:18px 24px;border-bottom:1px solid var(--border)}.nav-logo{background:none;border:none;cursor:pointer;font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--text);padding:0;margin-right:auto}.nav-logo-mark{color:var(--accent)}.nav-links{display:flex;gap:4px}.nav-link{background:none;border:none;cursor:pointer;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.nav-link:hover{color:var(--text);background:var(--app-box)}.nav-link.active{color:var(--text)}.nav-cta{background:var(--text);color:var(--panel-bg);border:none;border-radius:6px;padding:8px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;cursor:pointer}.nav-cta:hover,.nav-cta.active{background:var(--accent)}.hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:56px 0 48px}.hero-badge{display:inline-block;background:var(--app-box);color:var(--accent);border:1px solid var(--app-border);padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:18px}.hero-title{margin:0 0 20px;font-size:44px;font-weight:300;letter-spacing:-.03em;line-height:1.08}.hero-sub{margin:0 0 28px;font-size:15px;line-height:1.6;color:var(--text-dim);max-width:46ch}.hero-actions{display:flex;gap:12px}.btn{border:none;border-radius:8px;padding:12px 20px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;cursor:pointer}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{opacity:.9}.btn-secondary{background:none;color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--text)}.hero-visual{margin:0;padding:12px}.hero-visual .canvas-controls{display:none}.hero-visual .canvas-svg{height:340px}.hero-visual .legend{display:none}.tech-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:48px}.tech-strip-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin-right:8px}.tech-tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text);background:var(--app-box);border:1px solid var(--border);padding:4px 10px;border-radius:6px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}.feature-card{padding:4px 0}.feature-number{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--accent);font-weight:700}.feature-card h3{margin:10px 0 8px;font-size:15px}.feature-card p{margin:0;font-size:13px;line-height:1.55;color:var(--text-dim)}.steps{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.step-card{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}.step-number{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;font-weight:700;color:var(--accent)}.step-card h2{margin:0 0 8px;font-size:16px}.step-card p{margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--text-dim)}.step-files{display:flex;gap:8px;flex-wrap:wrap}.step-file{font-size:11px;background:var(--app-box);border:1px solid var(--border);padding:3px 8px;border-radius:5px;color:var(--text-dim)}.header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:28px}.header h1{margin:0;font-size:30px;font-weight:500;letter-spacing:-.03em}.subtitle{margin:4px 0 0;color:var(--text-dim);font-size:14px}.status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.03em}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim)}.status-dot.up{background:#2fa84f;box-shadow:0 0 6px #2fa84f99}.status-dot.down{background:var(--accent);box-shadow:0 0 6px #e42b0c80}.panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;padding:20px 22px 24px;margin-bottom:24px}.panel-header{display:flex;justify-content:space-between;align-items:baseline}.panel-header h2{margin:0 0 4px;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.timestamp{font-size:12px;color:var(--text-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.panel-note{margin:0 0 16px;font-size:13px;color:var(--text-dim)}.panel-note code{color:var(--accent)}.empty-state{color:var(--text-dim);font-size:14px}.empty-state code{background:var(--app-box);padding:1px 6px;border-radius:4px}.canvas-container{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--border)}.canvas-svg{display:block;background:var(--canvas-bg);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}.canvas-svg.dragging{cursor:grabbing}.grid-dot{fill:var(--grid-dot)}.canvas-controls{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:2px;background:var(--toolbar-bg);border:1px solid var(--border);border-radius:8px;padding:4px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.canvas-controls button{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--text);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}.canvas-controls button:hover{background:var(--app-box)}.canvas-controls .canvas-reset{width:auto;padding:0 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim)}.canvas-zoom-level{min-width:40px;text-align:center;font-size:11px;color:var(--text-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.company-box{fill:var(--company-box);stroke:var(--company-border);stroke-width:1;stroke-dasharray:3 4}.company-label{fill:var(--text-dim);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.app-box{fill:var(--app-box);stroke:var(--app-border);stroke-width:1}.app-label{fill:var(--accent);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.node-box{fill:var(--node-bg);stroke:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12))}.node-role{fill:var(--text);font-size:13px;font-weight:700;text-transform:capitalize}.node-ids{fill:var(--text-dim);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.edge{fill:none;stroke:var(--edge-color);pointer-events:none;stroke-linejoin:round;stroke-linecap:round}.edge-selected{stroke:var(--accent)}.edge-hit{fill:none;stroke:transparent;stroke-width:14;stroke-linejoin:round;stroke-linecap:round;cursor:pointer}.edge-hit:hover{stroke:color-mix(in srgb,var(--accent) 12%,transparent)}.legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}.legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.02em}.legend-swatch{width:10px;height:10px;border-radius:3px}.legend-swatch-system{background:var(--node-bg);box-shadow:0 1px 2px #00000040}.legend-swatch-app{background:var(--app-box);border:1px solid var(--app-border)}.legend-hint{font-size:12px;color:var(--text-dim);margin-left:auto;font-style:italic;text-transform:none}.evidence-panel{margin-top:16px;padding:14px 16px;border:1px solid var(--company-border);background:var(--company-box);border-radius:10px}.evidence-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:13px}.evidence-hits{color:var(--text-dim)}.evidence-close{background:none;border:none;color:var(--text-dim);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}.evidence-close:hover{color:var(--accent)}.evidence-note{margin:8px 0;font-size:12px;color:var(--text-dim)}.evidence-list{margin:0;padding-left:18px;font-size:12px;line-height:1.7}.workloads-table{width:100%;border-collapse:collapse;font-size:13px}.workloads-table th{text-align:left;color:var(--text-dim);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.03em;padding:8px 12px;border-bottom:1px solid var(--border)}.workloads-table td{padding:10px 12px;border-bottom:1px solid var(--border)}.workloads-table tr:last-child td{border-bottom:none}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim)}.role-pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;background:var(--text);color:var(--panel-bg)}.force-graph-container{position:relative;display:flex;flex-direction:column}.force-graph-container>div:first-child{border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--canvas-bg);flex:1}.force-graph-container canvas{display:block}.edge-details-panel{margin-top:16px;padding:18px 20px;background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 2px 8px #0000000d}.edge-details-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}.edge-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--text)}.edge-source{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.edge-arrow{color:var(--text-dim);opacity:.5}.edge-target{color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.close-btn{background:none;border:none;font-size:18px;color:var(--text-dim);cursor:pointer;padding:0;line-height:1}.close-btn:hover{color:var(--accent)}.edge-details-content{display:flex;flex-direction:column;gap:12px}.detail-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:4px 0}.detail-label{color:var(--text-dim);font-weight:500;text-transform:uppercase;font-size:11px;letter-spacing:.02em}.detail-value{color:var(--text);font-weight:500}.evidence-section{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.evidence-title{margin:0 0 8px;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-dim);letter-spacing:.02em}.evidence-box{background:var(--app-box);border:1px solid var(--border);border-radius:6px;padding:12px;max-height:200px;overflow-y:auto;font-size:11px;line-height:1.5}.evidence-line{color:var(--text);word-break:break-all;margin-bottom:4px}.evidence-line:last-child{margin-bottom:0}.no-evidence{margin:0;font-size:12px;color:var(--text-dim);font-style:italic}.graph-footer{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:12px;color:var(--text-dim)}.legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;text-transform:uppercase;letter-spacing:.01em;font-weight:500}.legend-dot{width:8px;height:8px;border-radius:50%}.controls-hint{font-size:11px;color:var(--text-dim);font-style:italic;text-transform:uppercase;letter-spacing:.01em}.connection-tester{margin-top:16px;display:flex;flex-direction:column;gap:12px}.test-form{display:flex;gap:12px;align-items:flex-end;padding:12px;background:var(--company-box);border:1px solid var(--border);border-radius:8px;flex-wrap:wrap}.test-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--text-dim)}.test-form select{padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:var(--panel-bg);color:var(--text);min-width:140px;cursor:pointer}.test-form select:focus{outline:none;border-color:var(--accent)}.test-form button{padding:8px 14px;background:var(--accent);color:var(--panel-bg);border:none;border-radius:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:opacity .2s}.test-form button:hover:not(:disabled){opacity:.9}.test-form button:disabled{opacity:.5;cursor:not-allowed}.test-hint{font-size:11px;color:var(--text-dim);font-weight:400;text-transform:none;letter-spacing:0;margin-left:auto;font-style:italic}.feedback{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:8px;font-size:13px;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.feedback.allowed{background:#e6f8f0;border:1px solid #6dd4cc;color:#0d7d6e}.feedback.blocked{background:#fce8e5;border:1px solid #f5a8a0;color:#a4453a}.feedback-content{display:flex;align-items:flex-start;gap:10px;flex:1}.feedback-icon{font-size:16px;font-weight:700;flex-shrink:0;margin-top:1px}.feedback-text{display:flex;flex-direction:column;gap:2px}.feedback-text strong{font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.feedback-message{font-weight:500}.feedback-close{background:none;border:none;font-size:18px;color:inherit;cursor:pointer;padding:0 2px;flex-shrink:0;opacity:.7;transition:opacity .2s}.feedback-close:hover{opacity:1}.node-selected rect{filter:drop-shadow(0 0 4px rgba(228,43,12,.6));stroke:var(--accent);stroke-width:2}@keyframes flashGreen{0%,to{stroke:var(--edge-color)}50%{stroke:#2fa84f;stroke-width:4;filter:drop-shadow(0 0 3px rgba(47,168,79,.8))}}@keyframes flashRed{0%,to{stroke:var(--edge-color)}50%{stroke:#e42b0c;stroke-width:4;filter:drop-shadow(0 0 3px rgba(228,43,12,.8))}}.edge.flash-allowed{animation:flashGreen .6s ease-out}.edge.flash-blocked{animation:flashRed .6s ease-out}.header-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.scan-button{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:opacity .2s}.scan-button:hover:not(:disabled){opacity:.9}.scan-button:disabled{opacity:.5;cursor:not-allowed}.spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}