@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#08121d;--panel:#101d29;--line:#223341;--text:#e8f0f5;--muted:#8395a4;--teal:#56dbc2;--blue:#5ba9ed;--mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--display:'Space Grotesk',sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 78% 12%,#102433 0,transparent 39%),var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}.topbar{height:76px;border-bottom:1px solid #20303e;display:flex;align-items:center;justify-content:space-between;padding:0 max(calc((100vw - 1280px)/2),32px)}.brand{display:flex;gap:12px;align-items:center;color:var(--text);text-decoration:none;font:600 18px var(--display);letter-spacing:-.4px}.brand small{display:block;font:9px var(--mono);letter-spacing:1.2px;color:#8193a0;margin-top:3px}.brand-mark{height:37px;width:37px;border:1px solid #39766e;color:var(--teal);border-radius:9px;display:grid;place-items:center;font:700 20px var(--display);background:#102a30}.top-meta,.eyebrow,.support-tag,.metric>span{font:10px var(--mono);letter-spacing:1.3px;color:#8fa0ae}.top-meta{display:flex;gap:11px;align-items:center}.live-dot{width:7px;height:7px;background:var(--teal);border-radius:50%;box-shadow:0 0 10px #56dbc277}.timezone{color:#526573;border-left:1px solid var(--line);padding-left:12px}.shell{max-width:1280px;padding:0 32px;margin:auto}.hero{padding:64px 0 42px;display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{color:var(--teal);margin:0 0 12px}.hero h1{font:600 clamp(40px,5vw,62px)/1.04 var(--display);letter-spacing:-2.3px;margin:0}.hero h1 span{color:#6e8999}.hero-copy{color:#91a2ae;max-width:620px;line-height:1.75;margin:19px 0 0;font-size:14px}.hero-badge{display:flex;gap:13px;align-items:center;border:1px solid #2a3e4a;border-radius:8px;padding:13px 16px;margin-bottom:5px;background:#0b1822}.radar{color:var(--teal);font-size:24px}.hero-badge b,.hero-badge small{display:block;font:10px var(--mono);letter-spacing:.8px}.hero-badge small{color:var(--muted);font-size:9px;letter-spacing:0;margin-top:6px}.panel{background:linear-gradient(135deg,#101e2a,#0e1a25);border:1px solid var(--line);border-radius:10px;padding:24px;margin:18px 0}.input-panel{padding:24px 26px}.section-heading,.result-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.section-heading h2,.result-head h2,.bottom-grid h2{font:600 20px var(--display);letter-spacing:-.4px;margin:0}.section-heading .eyebrow,.result-head .eyebrow{margin-bottom:6px}.support-tag{font-size:9px;letter-spacing:.8px;border:1px solid #283b48;padding:7px 9px;border-radius:4px;color:#8194a0}textarea{resize:vertical;width:100%;min-height:184px;background:#09151f;border:1px solid #263946;border-radius:6px;padding:17px;color:#dce8ee;font:12px/1.8 var(--mono);outline:0}textarea:focus{border-color:#46ac9c;box-shadow:0 0 0 2px #56dbc21c}textarea::placeholder{color:#586b79}.input-footer{display:flex;justify-content:space-between;align-items:center;margin-top:13px;color:#657987;font:10px var(--mono)}.actions{display:flex;gap:9px}.btn{border:1px solid #304451;border-radius:5px;background:transparent;color:#b6c4cc;padding:10px 13px;font:11px var(--mono);cursor:pointer}.btn:hover{border-color:#59b8a8;color:#fff}.btn-primary{border-color:#41b9a4;background:#43c0a9;color:#061a19;font-weight:500;display:flex;gap:17px;align-items:center}.btn-primary:hover{background:#65e0c9;color:#071917}.btn:disabled{opacity:.6;cursor:wait}.form-error{margin-top:12px;color:#ff9c9c;font-size:12px}.loading{padding:25px;text-align:center;color:#9badb9}.spinner{display:inline-block;vertical-align:middle;width:14px;height:14px;border:2px solid #49606d;border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;margin-right:9px}@keyframes spin{to{transform:rotate(360deg)}}.result-head{margin:34px 0 16px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.metric{border:1px solid var(--line);border-radius:8px;padding:18px;background:#101d28}.metric>span{display:block;font-size:9px}.metric strong{display:block;font:600 27px var(--display);margin-top:13px;letter-spacing:-.7px}.metric strong small{font:12px var(--mono);color:var(--muted)}.metric>small{display:block;color:#718390;font-size:10px;margin-top:6px}.route-panel{overflow:hidden}.legend{font:9px var(--mono);color:#8294a0;display:flex;gap:7px;align-items:center}.legend i{width:7px;height:7px;border-radius:50%;background:#56dbc2;margin-left:6px}.legend i.timeout{background:#697884}.legend i.incomplete{background:#e4b652}.route-track{display:flex;gap:0;overflow-x:auto;padding:10px 1px 15px}.route-node{position:relative;flex:0 0 205px;min-height:150px;border:1px solid #2a4b46;border-radius:7px;padding:12px;background:#0c1d24;margin-right:25px}.route-node:not(:last-child):after{content:'';height:1px;width:26px;position:absolute;left:100%;top:20px;background:#375d56}.route-node.timeout{border-color:#394550;background:#151e26}.route-node.high{border-color:#805d32;background:#251f17}.route-node.incomplete,.route-node.partial{border-color:#766337;background:#201d16}.node-top{display:flex;justify-content:space-between}.node-number,.node-latency{color:var(--teal);font:9px var(--mono);letter-spacing:.5px}.timeout .node-number,.timeout .node-latency{color:#87939b}.high .node-number,.high .node-latency{color:#edbb69}.link-label{position:absolute;left:calc(100% + 7px);top:0;color:#738991}.route-node>b{display:block;overflow-wrap:anywhere;font:500 12px var(--mono);margin-top:14px}.node-host,.node-meta{display:block;overflow-wrap:anywhere;color:#8ba0ad;font-size:10px;margin-top:7px}.node-latency{display:block;margin-top:13px}.disclaimer,.generated{font-size:10px;color:#71838e;line-height:1.6}.disclaimer{margin:12px 0 0}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:1000px;text-align:left}th{font:9px var(--mono);letter-spacing:.8px;color:#718591;padding:12px 9px;border-bottom:1px solid #2a3b48}td{font-size:11px;color:#c3d0d7;padding:13px 9px;border-bottom:1px solid #202f3b;vertical-align:middle}td:first-child{font:11px var(--mono);color:#7fd8c7}.ip-cell{font-family:var(--mono)}.copy-ip,.expand{border:0;background:transparent;color:#72cbbb;cursor:pointer;margin-left:7px}.expand{font:10px var(--mono);white-space:nowrap}.pill{border-radius:20px;padding:4px 7px;background:#15382e;color:#79dbc1;font:9px var(--mono);white-space:nowrap}.pill.timeout{background:#27323b;color:#a3adb3}.pill.high{background:#42331d;color:#f0c477}.pill.incomplete,.pill.partial{background:#3d351f;color:#e6c16e}.detail-row td{background:#0c1821}.detail-grid{display:flex;gap:12px 24px;flex-wrap:wrap;color:#95a6b0;font:10px var(--mono)}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.bottom-grid .panel{min-width:0}.transition{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #25343f;font:10px var(--mono);color:#aab9c2}.transition b{color:var(--teal)}.notes{padding-left:17px;margin:16px 0}.notes li{padding:0 0 0 5px;margin:11px 0;color:#b6c2c9;line-height:1.6;font-size:11px}.note-warning::marker{color:#edbb69}.note-neutral::marker{color:#87939b}.note-info::marker{color:var(--teal)}.muted{color:#758793}.generated{margin:14px 2px 35px}footer{border-top:1px solid #20303c;margin:38px 0 0;padding:18px 0 22px;display:flex;justify-content:space-between;color:#95a5ae;font:10px var(--mono)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:800px){.shell{padding:0 18px}.topbar{padding:0 18px}.hero{padding:44px 0 30px}.hero-badge{display:none}.summary-grid{grid-template-columns:repeat(2,1fr)}.bottom-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}.result-head{align-items:flex-start;flex-direction:column}.support-tag{white-space:normal}.route-node{flex-basis:185px}.timezone{display:none}footer{gap:12px;flex-direction:column}}@media(max-width:460px){.top-meta{font-size:0}.top-meta .live-dot{font-size:0}.hero h1{font-size:41px}.input-panel,.panel{padding:18px}.summary-grid{gap:8px}.metric{padding:13px}.metric strong{font-size:22px}.input-footer{align-items:flex-start;gap:12px;flex-direction:column}.actions{width:100%}.actions .btn{flex:1}.result-head .actions{flex-wrap:wrap}}
