:root{--navy: #16233f;--ink: #1e2b48;--blue: #2f6bf6;--blue-soft: #e8f0ff;--purple: #6b3fd4;--purple-soft: #f0ebfd;--line: #cdd6e6;--line-faint: #e5eaf3;--bg: #f6f8fc;--card: #ffffff;--muted: #5c6b86;--shadow: 0 6px 20px rgba(22, 35, 63, .08)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}.app{max-width:1440px;margin:0 auto;padding:28px 28px 40px}.head{text-align:center;margin-bottom:22px}.head h1{margin:0;font-size:34px;font-weight:800;letter-spacing:-.5px;color:var(--navy)}.head p{margin:6px 0 0;color:var(--muted);font-size:17px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}@media (max-width: 1080px){.layout{grid-template-columns:1fr}}.tabs{display:flex;gap:6px;justify-content:center;margin:0 auto 20px;background:#eef2f9;padding:5px;border-radius:11px;width:fit-content}.tabs button{border:0;background:transparent;padding:9px 20px;border-radius:8px;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer}.tabs button.on{background:#fff;color:var(--navy);box-shadow:var(--shadow)}.stage-wrap{min-width:0}.stage{position:relative;width:100%;aspect-ratio:1000 / 640;background:var(--card);border:1px solid var(--line-faint);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.edges{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.edge>path:not(.edge-head){stroke:#16233f47;stroke-width:2.5;fill:none}.edge-saml>path:not(.edge-head){stroke:#2f6bf66b}.edge-head{stroke:none;fill:#16233f47}.edge-saml .edge-head{fill:#2f6bf66b}.edge-active>path:not(.edge-head){stroke:var(--blue);stroke-width:2.5;stroke-dasharray:6 6;animation:dash 1s linear infinite;opacity:.9}.edge-active .edge-head{fill:var(--blue)}@keyframes dash{to{stroke-dashoffset:-12}}.edge-label-bg{fill:#fff;stroke:var(--line);stroke-width:1.5}.edge-label{font-size:13px;font-weight:700;fill:var(--ink)}.edge-click{cursor:pointer}.edge>path.edge-hit{stroke:transparent;stroke-width:22;fill:none}.edge-click:hover>path:not(.edge-hit):not(.edge-head){stroke:var(--blue);stroke-width:3}.node{position:absolute;transform:translate(-50%,-50%);width:168px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 12px 13px;text-align:center;transition:box-shadow .25s,border-color .25s,transform .25s,opacity .25s}.node-icon{color:var(--blue);display:flex;justify-content:center;margin-bottom:6px}.node-title{font-weight:800;font-size:15px;color:var(--navy);display:flex;gap:6px;justify-content:center;align-items:center}.node-num{background:var(--navy);color:#fff;font-size:11px;font-weight:700;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.node-role{font-size:11.5px;font-weight:700;color:var(--blue);margin-top:2px}.node-sub{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.35}.node-target{border-color:var(--purple);background:#fbfaff}.node-target .node-icon,.node-target .node-role{color:var(--purple)}.node-target .node-num{background:var(--purple)}.node-planned{border-style:dashed;border-color:var(--purple);background:var(--purple-soft);width:180px}.node-planned .node-icon,.node-planned .node-role{color:var(--purple)}.node-click{cursor:pointer}.node-click:hover{border-color:var(--blue);transform:translate(-50%,-50%) translateY(-2px)}.node-target.node-click:hover{border-color:var(--purple)}.node-dim{opacity:.42;filter:saturate(.6)}.node-active{border-color:var(--blue);transform:translate(-50%,-50%) scale(1.06);opacity:1;animation:node-live 1.6s ease-in-out infinite}.node-target.node-active{border-color:var(--purple);animation:node-live-p 1.6s ease-in-out infinite}@keyframes node-live{0%,to{box-shadow:0 0 0 3px #2f6bf629,var(--shadow)}50%{box-shadow:0 0 0 7px #2f6bf61a,var(--shadow)}}@keyframes node-live-p{0%,to{box-shadow:0 0 0 3px #6b3fd42e,var(--shadow)}50%{box-shadow:0 0 0 8px #6b3fd41a,var(--shadow)}}.node-active:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:15px;border:2px solid var(--blue);animation:land .7s ease-out;pointer-events:none}.node-target.node-active:after{border-color:var(--purple)}@keyframes land{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}.packet-halo{fill:var(--blue)}.packet-core{fill:var(--blue);filter:drop-shadow(0 0 6px rgba(47,107,246,.9))}.legend{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-top:14px;color:var(--muted);font-size:13px}.legend span{display:inline-flex;align-items:center;gap:8px}.key-line{width:26px;height:0;border-top:3px solid var(--navy);border-radius:2px}.key-line.key-ent{border-color:var(--blue)}.panel{background:var(--card);border:1px solid var(--line-faint);border-radius:18px;box-shadow:var(--shadow);padding:18px;position:sticky;top:20px}.mode-toggle{display:flex;background:var(--bg);border-radius:10px;padding:4px;gap:4px;margin-bottom:12px}.mode-toggle button{flex:1;border:0;background:transparent;padding:9px;border-radius:7px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer}.mode-toggle button.on{background:#fff;color:var(--navy);box-shadow:var(--shadow)}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.buttons .primary{grid-column:1 / -1;background:var(--blue);color:#fff}.buttons button{border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px;border-radius:9px;font-weight:700;font-size:13px;cursor:pointer;transition:filter .15s}.buttons button:hover:not(:disabled){filter:brightness(.97)}.buttons .primary:hover{filter:brightness(1.06)}.buttons button:disabled{opacity:.45;cursor:default}.progress{display:flex;gap:6px;margin:16px 0 4px;flex-wrap:wrap}.progress .dot{width:22px;height:6px;border-radius:3px;border:0;background:var(--line);padding:0;cursor:pointer;transition:background .2s}.progress .dot.done{background:var(--blue)}.progress .dot.now{background:var(--navy);box-shadow:0 0 0 2px #16233f26}.step-card{padding:14px 2px 4px}.step-card h2{margin:8px 0 6px;font-size:19px;color:var(--navy)}.step-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}.step-card.intro h2{font-size:18px}.step-meta{display:flex;align-items:center;gap:8px}.step-count{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.pill{font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:.03em}.pill.small{padding:2px 7px}.pill-saml{background:var(--blue-soft);color:var(--blue)}.pill-oidc{background:#e6f7ef;color:#12885a}.pill-jwt{background:var(--navy);color:#fff}.pill-sql{background:var(--purple-soft);color:var(--purple)}.pill-done{background:#e6f7ef;color:#12885a}.reveal-card{margin-top:14px;border:1px solid var(--line-faint);border-radius:12px;padding:12px;background:#fbfcfe;animation:rise .35s ease}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.reveal-head{font-weight:800;font-size:13px;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:8px}.code{margin:0;font-family:SF Mono,ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap}.code-key{color:var(--blue)}.code-dim{color:var(--muted)}.code-hl{background:#fff6d6;display:block;border-radius:4px}.sql-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:12.5px}.sql-table th{text-align:left;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line);padding:4px 6px}.sql-table td{padding:5px 6px;border-bottom:1px solid var(--line-faint);font-family:ui-monospace,Menlo,monospace}.sql-table .grantor{color:var(--purple);font-weight:700}.hint{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-faint);font-size:11.5px;color:var(--muted);text-align:center}.infra{background:var(--card);border:1px solid var(--line-faint);border-radius:18px;box-shadow:var(--shadow);padding:28px 30px 34px}.infra code{background:var(--bg);padding:1px 6px;border-radius:5px;font-size:.9em;color:var(--navy);font-family:ui-monospace,Menlo,monospace}.infra-lead{font-size:16px;line-height:1.6;color:var(--ink);margin:0 0 8px;max-width:820px}.infra-h{font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:30px 0 12px}.infra-note{color:var(--muted);font-size:14px;margin:-4px 0 14px;max-width:760px}.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.svc-card{border:1.5px solid var(--line);border-radius:14px;padding:16px;background:#fff}.svc-planned{border-style:dashed;background:var(--purple-soft)}.svc-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}.svc-icon{color:var(--blue);display:flex}.svc-planned .svc-icon{color:var(--purple)}.svc-name{font-weight:800;font-size:16px;color:var(--navy);margin-bottom:3px}.svc-desc{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 12px}.svc-meta{font-size:12px;font-family:ui-monospace,Menlo,monospace;color:var(--ink)}.svc-chart{background:var(--bg);padding:3px 8px;border-radius:6px}.svc-db{color:var(--muted);margin-left:4px}.db-table{width:100%;border-collapse:collapse;font-size:14px}.db-table th{text-align:left;color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1.5px solid var(--line);padding:8px 10px}.db-table td{padding:11px 10px;border-bottom:1px solid var(--line-faint);color:var(--ink)}.db-name{font-weight:700;color:var(--navy);display:flex;align-items:center;gap:9px}.db-icon{color:var(--purple);display:flex;transform:scale(.8)}.db-dsn{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--muted)}.plat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.plat-card{border:1px solid var(--line-faint);border-radius:12px;padding:16px;background:#fbfcfe}.plat-title{font-weight:800;font-size:14px;color:var(--navy);margin-bottom:6px}.plat-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}.topo-wrap{border:1px solid var(--line-faint);border-radius:14px;background:#fbfcfe;padding:10px 14px}.topo{width:100%;height:auto;display:block}.topo-box rect{fill:#fff;stroke:var(--line);stroke-width:1.5}.topo-box-title{font-size:15px;font-weight:800;fill:var(--navy)}.topo-box-sub{font-size:12px;fill:var(--muted)}.topo-cluster{fill:#2f6bf608;stroke:var(--line);stroke-width:1.5;stroke-dasharray:6 5}.topo-cluster-title{font-size:14px;font-weight:800;fill:var(--muted);letter-spacing:.02em}.topo-cluster-sub{font-size:12.5px;font-weight:700;fill:var(--line)}.topo-ns{fill:#fff;stroke:var(--blue);stroke-width:1.5}.topo-ns-title{font-size:13px;font-weight:700;fill:var(--blue);font-family:ui-monospace,Menlo,monospace}.topo-pod rect{fill:#f4f7fe;stroke:var(--line);stroke-width:1.5}.topo-pod-icon{color:var(--blue)}.topo-pod-label{font-size:13px;font-weight:700;fill:var(--navy)}.topo-chip rect{fill:var(--blue-soft);stroke:none}.topo-chip text{font-size:12.5px;font-weight:600;fill:var(--blue)}.topo-db-band{font-size:13px;font-weight:700;fill:var(--muted)}.topo-cyl path{fill:#f3eefe;stroke:var(--purple);stroke-width:1.5}.topo-cyl ellipse{fill:#ece3fd;stroke:var(--purple);stroke-width:1.5}.topo-cyl-label{font-size:13px;font-weight:700;fill:var(--purple)}.topo-line{stroke:var(--navy);stroke-width:2;fill:none}.topo-line-dash{stroke:var(--blue);stroke-width:2;fill:none;stroke-dasharray:5 4}.topo-line-db{stroke:var(--purple);stroke-width:2;fill:none;stroke-dasharray:4 5;opacity:.7}.topo-arrowhead{fill:var(--navy)}.topo-edge-label{font-size:12px;font-weight:800;fill:var(--ink)}.topo-edge-faint{fill:var(--blue);font-weight:700}