@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--bg:#0b1015;--panel:#121920;--line:#26313b;--fg:#eaf0f4;--muted:#8898aa;--green:#b5ec74;--soft:#1b2530;--aside:#0f151b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px 'DM Sans',sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:3px}aside{position:fixed;inset:0 auto 0 0;width:224px;padding:30px 20px;background:var(--aside);border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{font:800 35px Manrope;color:var(--fg);text-decoration:none;letter-spacing:-2px;padding:0 10px}.brand span{color:var(--green)}.workspace{margin:36px 0 30px;border-block:1px solid var(--line);padding:18px 8px;font-size:11px}.workspace small{display:block;color:var(--muted);font-size:9px;margin:7px 0 0 26px}label{color:var(--green);font-size:9px;font-weight:600;letter-spacing:1.6px}aside label{color:#617489;font-size:8px;margin:0 12px 15px}nav button{border:0;background:none;text-align:left;width:100%;padding:13px 12px;border-radius:6px;color:var(--muted);font-size:12px;margin-bottom:7px}nav .active{color:var(--green);background:#b5ec7410}nav b{float:right;font-size:9px;font-weight:400;border:1px solid var(--line);padding:0 4px;border-radius:3px}.bottom{margin-top:auto;padding:15px 10px}.bottom>div{font-size:52px;color:var(--green);margin-bottom:15px}.bottom strong{font-size:10px}.bottom p{font-size:10px;max-width:145px}.bottom small{font-size:7px;letter-spacing:1px;color:#52667b;display:block;margin-top:28px}main{margin-left:224px}header{height:76px;border-bottom:1px solid var(--line);padding:0 38px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}header i{margin:0 15px;color:#455567}header strong{font-weight:400;color:var(--fg)}header>div{display:flex;align-items:center;gap:21px}.demo{border:1px solid #c8dca22a;background:#c8dca207;color:#becba4;padding:6px 10px;border-radius:20px;font-size:9px}#theme{border:0;background:none;font-size:20px;color:var(--muted)}.avatar{background:var(--soft);padding:10px;border:1px solid var(--line);border-radius:50%;font-size:9px}.page{max-width:1600px;margin:auto;padding:38px 38px 0}.heading{display:flex;align-items:center;justify-content:space-between}h1{font:800 30px/1.3 Manrope;letter-spacing:-1px;margin:12px 0}h1 span{color:var(--green)}p{font-size:12px;color:var(--muted);line-height:1.8;margin:8px 0}.live{font-size:9px;color:var(--muted)}form{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:20px 21px 13px;margin-top:29px}.searchline{display:flex;align-items:center;gap:14px}.searchline>span{font-size:29px;color:var(--green)}input{background:none;color:var(--fg);border:0;min-width:100px;flex:1;font:17px monospace}select{background:var(--panel);color:var(--muted);border:0;border-left:1px solid var(--line);padding:7px 12px;font-size:10px}.primary{border:0;border-radius:5px;background:var(--green);color:#1d2c16;padding:13px 18px;font-size:11px;font-weight:700}.help{border-top:1px solid var(--line);margin-top:17px;padding-top:12px;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:var(--muted)}.help button{font:9px monospace;color:var(--muted);border:0;border-radius:3px;background:var(--soft);padding:4px 6px;margin-left:6px}.notice{font-size:9px;margin:11px 0 26px}.result-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.result-head label{color:var(--muted);font-size:8px}h2{font:600 23px Manrope;letter-spacing:-.4px;margin:8px 0 0}.tag{display:inline-block;font:500 8px 'DM Sans';padding:4px 7px;background:var(--soft);border:1px solid var(--line);color:var(--muted);border-radius:4px;vertical-align:middle;margin-left:7px}.secondary{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:9px 12px;font-size:10px;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.metrics article{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:19px;position:relative}.metrics article>span{font-size:10px;color:var(--muted)}.metrics strong{display:block;font:600 26px Manrope;margin:11px 0 6px;letter-spacing:-.8px}.metrics em{font:400 11px 'DM Sans';color:var(--muted);letter-spacing:0}.metrics small{font-size:8px;color:var(--muted)}.metrics b{position:absolute;right:16px;top:16px;font-size:20px;color:#708755;font-weight:400}.metrics .smaller{font-size:18px;padding:5px 0}.grid{display:grid;grid-template-columns:1.8fr 1fr;gap:20px;margin-bottom:22px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:20px 21px 0}h3{font:700 13px Manrope;margin:0}.panel-head p{font-size:10px;margin:5px 0}.legend{display:flex;gap:16px;padding:16px 22px;color:var(--muted);font-size:8px}.legend span:last-child{margin-left:auto}.legend i{display:inline-block;width:5px;height:5px;background:#586c83;border-radius:50%;margin-right:5px}.legend .green{background:var(--green)}.tree{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:10px 21px 20px;min-height:235px;overflow-x:auto}.tree-row{display:flex;align-items:center;min-width:425px;background:none;border:0;padding:0;text-align:left;width:100%}.node{display:block;min-width:96px;border:1px solid #354559;background:#19232e;border-radius:6px;padding:10px}.node strong{font:600 11px monospace;color:#d9e4ef;display:block}.node small{font-size:8px;color:var(--muted);display:block;margin-top:4px}.node.origin{background:#b5ec7408;border-color:#6d8c47}.node.origin strong{color:var(--green)}.edge{flex:1;min-width:16px;height:1px;background:#45566a;position:relative}.edge:after{content:'';position:absolute;right:0;top:-3px;border-left:4px solid #45566a;border-top:3px solid transparent;border-bottom:3px solid transparent}.tree-row.selected .edge{background:var(--green)}.tree-row.selected .edge:after{border-left-color:var(--green)}.tree-row.selected .node{border-color:#819e57}.tree-label{display:flex;justify-content:space-between;padding:0 24px 16px;color:#687c91;font-size:7px;letter-spacing:1px}.note{border-top:1px solid var(--line);padding:12px 20px;font-size:9px;color:var(--muted);line-height:1.7}.green-tag{color:var(--green);background:#b5ec7409;border-color:#b5ec7430}.explain-item{margin:18px 21px;display:flex;gap:10px;align-items:flex-start}.step{border:1px solid var(--line);border-radius:50%;width:23px;height:23px;display:flex;justify-content:center;align-items:center;color:var(--green);font-size:9px;flex-shrink:0}.explain-item strong{font-size:10px;font-weight:500}.explain-item p{font-size:9px;margin:4px 0}dl{margin:0;padding:13px 21px;display:grid;grid-template-columns:1fr 1fr;gap:9px;border-block:1px solid var(--line);font-size:10px}dt{color:var(--muted)}dd{margin:0;text-align:right;font-family:monospace}.learning{display:flex;gap:10px;padding:14px 21px;color:var(--green);font-size:22px}.learning p{font-size:9px;margin:0}.learning strong{color:var(--fg);font-weight:500}.routes .panel-head{padding-bottom:17px}.tabs{display:flex;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:5px}.tabs button{background:none;border:0;padding:6px 11px;font-size:10px;color:var(--muted);border-radius:3px}.tabs .selected{background:var(--soft);color:var(--fg)}.scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}th{padding:12px 20px;font-size:8px;letter-spacing:.6px;font-weight:500;color:var(--muted);border-block:1px solid var(--line);background:#ffffff02}td{padding:15px 20px;font-size:10px;border-bottom:1px solid var(--line)}td small{display:block;font-size:8px;color:var(--muted);margin-top:4px}.path{font-family:monospace;color:#b3c5d8}.best-status{color:var(--green);font-size:9px}tr.selected{background:#b5ec7404}td button{background:none;border:0;color:var(--muted)}.table-footer{padding:12px 20px;display:flex;justify-content:space-between;font-size:8px;color:var(--muted)}pre{padding:22px;font-size:11px;line-height:1.8;overflow:auto;color:#b7d0a4}footer{display:flex;gap:14px;padding:26px 0;font:700 9px Manrope;letter-spacing:1.5px;color:#64798d}footer span{font:400 9px 'DM Sans';letter-spacing:0}footer span:last-child{margin-left:auto;font-size:8px;letter-spacing:1px}.devices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0}.device{padding:25px}.device label{display:block;margin-bottom:20px}.device h3{font-size:18px}.device dl{padding:20px 0;border-bottom:0;margin-top:20px}.setup{padding:25px}.setup li{font-size:12px;line-height:2.7;color:var(--muted)}.guides{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0}.guides article{padding:25px}.guides p{font-size:13px;line-height:1.9}.light{--bg:#f4f6f7;--panel:#fff;--line:#dce4e8;--fg:#1c303b;--muted:#637783;--green:#527d22;--soft:#edf2f4;--aside:#eaf0f2}.light .node strong{color:#203d50}.light .path{color:#526b80}[hidden]{display:none!important}@media(max-width:1150px){aside{width:188px}main{margin-left:188px}.page{padding:28px 24px 0}header{padding:0 24px}.grid{grid-template-columns:1fr}.details{display:none}.metrics{grid-template-columns:repeat(2,1fr)}.help{flex-wrap:wrap;gap:8px}.live{display:none}.devices{grid-template-columns:1fr}}@media(max-width:700px){aside{position:static;width:auto;flex-direction:row;align-items:center;padding:12px 17px;border-bottom:1px solid var(--line);border-right:0}.brand{font-size:25px;padding:0}.workspace,aside label,.bottom,nav b{display:none}nav{display:flex;margin-left:auto}nav button{font-size:9px;margin:0;padding:9px 7px}main{margin:0}header{height:55px;padding:0 18px}header>div{gap:10px}.demo{font-size:7px}.avatar{display:none}.page{padding:26px 18px 0}h1{font-size:25px}.heading p{font-size:11px}form{padding:15px}.searchline{flex-wrap:wrap;gap:11px}input{width:70%}select{width:48%;padding-left:0;border:0}.primary{flex:1;padding:12px 8px;font-size:10px}.help>span:first-child{display:none}.help button{font-size:8px;margin-left:3px}.metrics{gap:10px}.metrics article{padding:14px}.metrics b{display:none}.metrics strong{font-size:23px}.metrics .smaller{font-size:16px}.metrics small{font-size:8px}.legend span:last-child{display:none}.panel-head{padding:17px 15px 0}.tree{padding:12px 15px}.routes .panel-head p{max-width:175px}.tabs button{padding:6px}.table-footer{gap:15px;line-height:1.6}.table-footer span:last-child{max-width:160px}footer span:last-child{display:none}.guides{grid-template-columns:1fr}}
/* Real route attributes and long AS paths */
.details dd{overflow-wrap:anywhere;line-height:1.6}.details dl{grid-template-columns:minmax(80px,.7fr) minmax(0,1.3fr)}.tree-row{min-width:540px}.tree-row .node{flex-shrink:0}.tree-row.best-route .edge{background:var(--green)}.tree-row.best-route .edge:after{border-left-color:var(--green)}.tree-row.selected .node{box-shadow:0 0 0 1px #b5ec7425}.tree-row:not(.best-route) .edge{background:#45566a}.tree-row:not(.best-route) .edge:after{border-left-color:#45566a}.peer-node strong{font-size:10px}.notice{overflow-wrap:anywhere}
