:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;color:#20304a;background:#f3f6fa;--blue:#347ee5;--border:#e0e7f0}*{box-sizing:border-box}body{margin:0}a{color:#3779cc;text-decoration:none}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}input,select{width:100%;padding:12px 13px;border:1px solid #d8e0ec;border-radius:7px;background:#fff;color:#20304a;font-size:15px;min-width:0}input:focus,select:focus{outline:2px solid #72a9ec;border-color:transparent}label{display:block;color:#516279;font-size:14px;margin:18px 0}label>input,label>select{display:block;margin-top:9px}h1{font-size:29px;font-weight:650;letter-spacing:-.6px;margin:8px 0 12px}h2{font-size:20px;font-weight:650;margin:0 0 10px}h3{font-size:16px;font-weight:600}p{line-height:1.85}small{font-size:12px}.muted{color:#8190a3;font-size:14px;margin:0;line-height:1.8}.eyebrow{font-size:12px;letter-spacing:1.8px;color:#7b8ca3;margin-bottom:10px}.sidebar{position:fixed;inset:0 auto 0 0;width:226px;background:#122137;color:#9babc0;padding:32px 20px;display:flex;flex-direction:column}.brand{color:#fff;font-size:31px;font-weight:750;display:flex;align-items:center;gap:12px;letter-spacing:-1px}.brand>span{font-size:25px}.brand small{display:block;font-size:9px;letter-spacing:1.7px;color:#859bb6;margin-top:5px}.nav-label{font-size:11px;letter-spacing:1.8px;color:#637d9b;margin:40px 12px 17px}.nav-item{display:flex;align-items:center;gap:13px;padding:14px;border-radius:7px;color:#96aac3;font-size:15px;margin:5px 0}.nav-item>span{font-size:21px;width:23px;text-align:center}.nav-item.active{background:#244a78;color:#fff}.nav-item:hover{background:#1d3c61;color:#fff}.sidebar-bottom{border-top:1px solid #2a3a50;padding:20px 10px 0;margin-top:auto;font-size:13px}.sidebar-bottom small{display:block;color:#617b98;margin-top:10px}.status-dot{display:inline-block;width:7px;height:7px;background:#5ad6b0;border-radius:50%;margin-right:7px}.shell{margin-left:226px}header{height:78px;padding:0 38px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--border)}.breadcrumb{font-size:14px;color:#9aa6b6}.breadcrumb b{font-weight:500;color:#52657e;margin-left:10px}.account{display:flex;gap:20px;align-items:center;font-size:14px}.account a{color:#4d6079}.account form{margin:0}.version,.tag{font-size:12px;background:#ecf3fd;color:#5c7fae;border:1px solid #dae6f6;border-radius:5px;padding:6px 9px;display:inline-block}.text-button{border:0;background:none;color:#8593a6;padding:0;font-size:14px}main{max-width:1510px;padding:35px 38px 48px;margin:auto}.pagehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:20px}.small-note{font-size:13px;color:#8c9aad}.hero{background:#18324f;border-radius:13px;padding:32px 36px;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;color:white;margin-bottom:29px;overflow:hidden}.hero h2{font-size:28px;line-height:1.5;margin:13px 0 7px;letter-spacing:.3px}.hero p{font-size:14px;color:#aec1d9;margin:0 0 23px}.pill{font-size:12px;border:1px solid #49617d;color:#c5d7ec;padding:6px 10px;display:inline-block;border-radius:5px;background:#27415f}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;background:var(--blue);color:white;border:0;border-radius:6px;padding:12px 20px;font-size:14px;font-weight:550;margin-top:10px}.primary:hover{background:#216dcb}.full{width:100%}.hero-topology{align-self:center;padding:10px 5px;max-width:460px;width:100%;justify-self:center}.switch-row{display:flex;justify-content:space-around;gap:20px}.switch-row>span{border:1px solid #557e9f;border-radius:5px;padding:10px 20px;font-size:11px;background:#1d3e5c;color:#d2e4f4;text-align:center}.switch-row i{display:block;color:#57c4b4;letter-spacing:4px;font-style:normal;margin-top:6px;font-size:9px}.hero-topology svg{display:block;width:100%;height:100px;overflow:visible}.hero-topology path{fill:none;stroke:#577f9b;stroke-width:1;opacity:.75}.node-row{display:flex;justify-content:space-between;gap:10px}.node-row>span{border:1px solid #54768f;border-radius:4px;padding:10px 9px;font-size:10px;background:#193c57;color:#cbe3ef}.hero-topology>small{display:block;text-align:center;color:#6d91b0;letter-spacing:2px;font-size:10px;margin-top:22px}.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.sectionhead h2{margin:0}.sectionhead>span{font-size:13px;color:#8898ac}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:28px}.card,.panel{background:#fff;border:1px solid var(--border);border-radius:11px;padding:26px}.card{color:#25364f;position:relative;transition:transform .2s,border-color .2s}.card:hover{border-color:#abc6e8;transform:translateY(-2px)}.iconbox{width:45px;height:45px;border-radius:10px;display:grid;place-items:center;font-size:28px;margin-bottom:20px}.blue{background:#eaf2ff;color:#347ee5}.violet{background:#f0edff;color:#7b65cc}.teal{background:#e7f6f3;color:#218f85}.serial{position:absolute;right:25px;top:33px;color:#a5b2c4;font-size:11px;letter-spacing:.8px}.card h2{font-size:21px}.card p{font-size:14px;color:#7b8b9f;margin:13px 0 18px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 25px}.tags>span{font-size:11px;background:#f1f4f8;color:#8190a3;border-radius:4px;padding:5px 8px}.cardfoot{border-top:1px solid #edf1f6;padding-top:18px;display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px;color:#8e9bad}.cardfoot b,.cardfoot a{font-size:14px;color:#3c79c7;font-weight:550}.overview{display:flex;align-items:center;justify-content:space-between;gap:20px}.steps{display:flex;gap:15px;align-items:center;font-size:13px;color:#6683a5}.steps b{color:#b6c7da}.footer-note{font-size:12px;color:#94a1b2;line-height:1.8;margin-top:20px}.login-layout{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:white}.login-intro{background:#132b47;color:white;padding:46px 55px;display:flex;flex-direction:column;position:relative}.login-copy{margin:auto 0;padding:50px 0}.login-copy .eyebrow{color:#6f9dca}.login-copy h1{font-size:38px;font-weight:600;line-height:1.65;letter-spacing:.3px;margin:18px 0}.login-copy>p{color:#94aec9;font-size:15px}.login-foot{font-size:11px;letter-spacing:2px;color:#6987a5}.login-network{margin:60px 0 25px;max-width:530px}.network-row{display:flex;justify-content:space-between;gap:10px}.network-row span{border:1px solid #486d91;border-radius:5px;background:#1c3b59;padding:13px 14px;font-size:13px;text-align:center;flex:1}.network-line{height:60px;margin:0 45px;background:linear-gradient(90deg,transparent 49.8%,#395e7f 49.8%,#395e7f 50.2%,transparent 50.2%);border-bottom:1px solid #395e7f}.lower{margin-top:20px}.lower span{font-size:10px;color:#78a5ca;letter-spacing:1px;background:none;border-color:#31536f}.login-form{display:flex;align-items:center;justify-content:center;padding:45px}.login-box{width:100%;max-width:360px}.login-box h2{font-size:28px;margin:20px 0 10px}.login-box form{margin-top:30px}.login-box label{margin:23px 0}.login-help{font-size:12px;color:#a0aabc;line-height:1.9;margin-top:28px}.alert{padding:13px 16px;border:1px solid #f0d6cf;background:#fff3ef;border-radius:6px;color:#a85d45;font-size:14px;margin:18px 0;line-height:1.7}.narrow{max-width:560px}.callout{background:#ecf3fc;border-left:3px solid #6398dd;padding:15px 20px;color:#58779c;font-size:14px;line-height:1.8;margin:0 0 24px;border-radius:0 6px 6px 0}.module{display:flex;align-items:center;gap:23px;border-bottom:1px solid #edf1f6;padding:18px 0}.module:last-child{border:0}.module h3{margin:0 0 6px}.module p{font-size:14px;color:#8a98ac;margin:0}.module>.tag{margin-left:auto;flex-shrink:0}.num{font-size:24px;font-family:monospace;color:#9fb4ce}.back{display:inline-block;margin-bottom:24px;font-size:14px}.reading{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px}.article{padding:34px 38px}.article h1{font-size:27px;margin-top:20px}.article h2{margin:32px 0 15px}.article p{font-size:16px;color:#556b85;line-height:1.95}.reading-aside{align-self:start}.reading-aside hr{border:0;border-top:1px solid var(--border);margin:22px 0}.choice{display:flex;align-items:center;gap:12px;border:1px solid #e0e8f2;border-radius:6px;padding:13px;margin:10px 0;background:#f7f9fc;line-height:1.8}.choice input{width:16px;height:16px;margin:0;flex-shrink:0}.feedback{background:#edf5ff;border:1px solid #c9dcf6;color:#4f729f;font-size:14px;line-height:1.8;padding:15px;margin-top:20px;border-radius:6px}.source{border-top:1px solid var(--border);margin-top:30px;padding-top:20px;font-size:13px;color:#8a98aa;line-height:1.8}.tool-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:23px}.ghost{background:#fff;border:1px solid #d6e2f0;color:#6583a7;padding:9px 12px;border-radius:6px;font-size:13px}.example-buttons{display:flex;gap:10px;margin:25px 0 0}.empty{min-height:280px;display:grid;place-content:center;text-align:center;color:#a4b0c0;font-size:15px;line-height:2}.hidden{display:none}.result-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:20px;padding:12px 0;border-bottom:1px solid #edf1f6;font-size:14px}.result-row dt{color:#8696aa}.result-row dd{margin:0;overflow-wrap:anywhere;font-family:ui-monospace,monospace;color:#425d7e}.subnets{max-height:350px;overflow:auto;background:#f4f7fb;border:1px solid var(--border);padding:15px;border-radius:6px;font-size:13px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 25px}.formgrid label{margin:12px 0}.result-panel{margin-top:25px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:#f5f8fc;border-radius:8px;padding:24px;margin:25px 0}.metrics b{display:block;font-size:28px;font-weight:600;color:#2f649b}.metrics span{font-size:12px;color:#8a9ab0;display:block;margin-top:7px}.design-topology{background:#f6f9fd;border:1px solid #e2eaf5;border-radius:10px;padding:28px;margin:20px 0 28px;text-align:center}.topology-tier>span{display:inline-block;border:1px solid #a7c2e3;background:#eaf2ff;padding:14px 28px;border-radius:7px;color:#3f6fa8;font-size:15px}.tier-link{padding:22px;font-size:12px;color:#889db5}.nodes>span{background:#eaf7f4;border-color:#b5dad0;color:#438579}details{border-bottom:1px solid var(--border);padding:18px 0}summary{cursor:pointer;font-size:15px;color:#566f8d}li{font-size:14px;line-height:1.9;color:#7b8ca1;margin:8px 0}.table-wrap{overflow:auto;max-height:420px;margin-top:20px}table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}th,td{padding:12px;border-bottom:1px solid #e4ebf4}th{background:#f4f7fb;color:#6b809c;position:sticky;top:0}td{color:#74869e}.saved-row{padding:17px 0;border-bottom:1px solid #edf1f6;display:flex;justify-content:space-between;gap:20px;font-size:14px}.saved-row:last-child{border:0}.ip-actions{margin-top:18px}
@media(min-width:1600px){main{padding-top:44px}.hero{padding:40px}.card{padding:30px}}
@media(max-width:1100px){.sidebar{width:185px;padding:28px 15px}.shell{margin-left:185px}main{padding:28px 24px}header{padding:0 24px}.cards{gap:14px}.card{padding:20px}.cardfoot{flex-wrap:wrap}.serial{right:20px;font-size:10px}.overview{display:block}.steps{margin-top:20px}.tool-layout{grid-template-columns:300px minmax(0,1fr)}.reading{grid-template-columns:1fr}.reading-aside{display:none}.login-intro{padding:35px}.login-copy h1{font-size:30px}}
@media(max-width:800px){.sidebar{position:static;width:auto;padding:15px 18px;display:block}.brand{font-size:27px}.brand>span{font-size:23px}.brand small,.nav-label,.sidebar-bottom{display:none}.sidebar nav{display:flex;gap:5px;margin-top:15px;overflow:auto}.nav-item{font-size:13px;padding:10px;white-space:nowrap;margin:0}.nav-item>span{display:none}.shell{margin-left:0}header{padding:0 18px;height:60px}.account{gap:12px}.version{display:none}.breadcrumb{font-size:12px}main{padding:24px 18px}.pagehead h1{font-size:25px}.pagehead>.small-note{display:none}.hero{grid-template-columns:1fr;padding:26px}.hero h2{font-size:25px}.hero-topology{display:none}.cards{grid-template-columns:1fr}.cardfoot{flex-wrap:nowrap}.tool-layout{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.article{padding:23px}.article h1{font-size:24px}.sectionhead>span{font-size:11px}.login-layout{grid-template-columns:1fr;min-height:100vh}.login-intro{padding:22px 26px}.login-copy,.login-foot{display:none}.login-form{padding:45px 26px;align-items:flex-start}.login-box{max-width:420px}.steps{gap:9px;font-size:12px}.result-row{grid-template-columns:95px minmax(0,1fr);gap:12px}.pagehead{align-items:start}.pagehead>.tag{font-size:11px}.module{gap:12px}.module>.tag{font-size:10px}.module p{font-size:12px}}