:root {
  color-scheme:dark;
  --bg:#0b1017;
  --panel:#111923;
  --border:#24303e;
  --text:#e6edf5;
  --muted:#96a5b8;
  --blue:#84abff;
  --green:#69d9b0;
  --amber:#edc37a;
  --red:#f49899;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace}

* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  font-size:14px;
  line-height:1.6}
button,a {
  -webkit-tap-highlight-color:transparent}
button {
  font:inherit;
  color:inherit;
  cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:4px}
button:disabled {
  cursor:wait;
  opacity:.6}
a {
  color:var(--blue);
  text-decoration:none}
.topbar {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  border-bottom:1px solid var(--border);
  background:#0c131d}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:650;
  color:var(--text);
  font-size:16px;
  letter-spacing:-.3px}
.brand-mark {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  background:#203e63;
  color:#a3c7ff;
  border:1px solid #365c86;
  border-radius:8px;
  font-size:23px}
.brand-muted {
  font-weight:400;
  color:var(--muted);
  margin-left:4px}
.live-status {
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px}
.dot {
  width:6px;
  height:6px;
  background:var(--green);
  border-radius:100%;
  box-shadow:0 0 10px #69d9b044}
.live-status.problem .dot {
  background:var(--amber)}
main {
  max-width:1512px;
  margin:0 auto;
  padding:46px 40px 30px}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:32px;
  gap:20px}
.eyebrow {
  color:var(--blue);
  font-size:10px;
  letter-spacing:2px;
  margin:0 0 8px;
  font-weight:650}
h1 {
  font-size:34px;
  letter-spacing:-1.2px;
  margin:0 0 10px;
  font-weight:650;
  line-height:1.3}
.lede {
  margin:0;
  color:var(--muted);
  font-size:14px}
.refresh {
  border:1px solid #36465a;
  background:#172333;
  padding:9px 16px;
  border-radius:7px;
  white-space:nowrap}
.refresh:hover {
  background:#21344b}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-bottom:28px;
  border:1px solid var(--border);
  border-radius:10px;
  background:linear-gradient(110deg,#152234,#101923)}
.metrics>div {
  padding:20px 26px;
  border-right:1px solid var(--border)}
.metrics>div:last-child {
  border:none}
.metric-label {
  color:var(--muted);
  font-size:12px}
.metrics p {
  font-family:var(--mono);
  font-size:30px;
  line-height:1.2;
  margin:12px 0 0;
  letter-spacing:-1px}
.metrics small {
  font-family:inherit;
  color:var(--muted);
  font-size:12px;
  margin-left:7px;
  letter-spacing:0}
.panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:24px}
.panel-heading {
  padding:22px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border-bottom:1px solid var(--border)}
h2 {
  font-size:17px;
  font-weight:600;
  margin:0;
  letter-spacing:-.3px}
.panel-heading p:not(.eyebrow) {
  font-size:12px;
  color:var(--muted);
  margin:5px 0 0}
.segmented {
  display:flex;
  padding:3px;
  background:#0a121d;
  border:1px solid var(--border);
  border-radius:7px;
  gap:3px}
.segmented button {
  background:transparent;
  border:0;
  border-radius:4px;
  padding:6px 14px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap}
.segmented button.active {
  color:#dce8ff;
  background:#243952;
  box-shadow:0 1px 2px #0003}
.table-scroll {
  overflow:auto}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left}
th {
  font-size:11px;
  color:var(--muted);
  font-weight:500}
th,td {
  border-bottom:1px solid #202c3a;
  border-right:1px solid #202c3a}
th:last-child,td:last-child {
  border-right:0}
thead th {
  background:#101823;
  text-align:center;
  padding:13px 8px}
thead tr:first-child th {
  background:#14202e;
  font-weight:600;
  color:#bdcce0;
  font-size:12px}
thead th.node-column {
  text-align:left;
  padding-left:24px;
  width:185px;
  min-width:175px;
  position:sticky;
  left:0;
  z-index:2;
  background:#14202e}
tbody th {
  padding:16px 18px 16px 24px;
  min-width:175px;
  position:sticky;
  left:0;
  background:#111b27;
  z-index:1}
tbody th strong {
  display:block;
  color:var(--text);
  font-size:12px;
  font-weight:550;
  white-space:nowrap}
tbody th small {
  display:block;
  font-size:10px;
  font-weight:400;
  margin-top:4px;
  color:var(--muted)}
tbody tr:last-child th,tbody tr:last-child td {
  border-bottom:0}
tbody td {
  padding:0;
  min-width:92px}
button.cell {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:79px;
  border:0;
  border-radius:0;
  background:transparent;
  padding:12px 6px;
  gap:5px}
button.cell:hover {
  background:#1b2a3c}
button.cell.selected {
  background:#1b304c;
  box-shadow:inset 0 0 0 1px #5a8bd0}
button.cell strong {
  font-family:var(--mono);
  font-size:17px;
  font-weight:500;
  line-height:1.2}
button.cell small {
  font-size:10px;
  color:var(--muted);
  max-width:104px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}
.speed-fast {
  color:var(--green)}
.speed-medium {
  color:var(--amber)}
.speed-slow {
  color:var(--red)}
.speed-unknown {
  color:#718196}
.carrier-ct {
  color:#8bb2ff}
.carrier-cu {
  color:#c6a2ef}
.carrier-cm {
  color:#85cbbc}
.matrix-footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:14px 24px;
  color:var(--muted);
  font-size:10px;
  border-top:1px solid var(--border)}
.latency-legend {
  display:flex;
  gap:18px;
  flex-wrap:wrap}
.latency-legend span {
  display:flex;
  gap:6px;
  align-items:center}
.latency-legend i {
  width:6px;
  height:6px;
  border-radius:2px}
.fast {
  background:var(--green)}
.medium {
  background:var(--amber)}
.slow {
  background:var(--red)}
.unknown {
  background:#718196}
.pill {
  font-size:11px;
  border:1px solid #2a514a;
  background:#15342f;
  color:var(--green);
  padding:4px 10px;
  border-radius:5px;
  white-space:nowrap}
.pill.partial {
  border-color:#5c4a2c;
  background:#302819;
  color:var(--amber)}
.empty {
  padding:44px 24px;
  color:var(--muted);
  text-align:center;
  font-size:13px}
.detail-metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:22px 24px;
  gap:20px}
.detail-metrics label {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:7px}
.detail-metrics strong {
  font-family:var(--mono);
  font-size:23px;
  font-weight:500}
.detail-metrics small {
  color:var(--muted);
  font-size:11px;
  margin-left:5px}
.route-chain {
  padding:0 24px 23px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center}
.route-chain .network {
  padding:5px 10px;
  background:#1a293a;
  border:1px solid #2d4159;
  border-radius:5px;
  color:#c8d8ed;
  font-size:11px}
.chain-arrow {
  color:#6c7d93}
.hop-table {
  font-size:12px;
  min-width:680px}
.hop-table th {
  padding:11px 20px;
  text-align:left;
  background:#14202e}
.hop-table td {
  padding:10px 20px;
  height:45px}
.hop-table td:first-child {
  width:65px;
  color:var(--muted);
  font-family:var(--mono)}
.hop-table .hop-ip {
  font-family:var(--mono);
  font-size:12px;
  white-space:nowrap}
.hop-table .asname {
  color:var(--muted);
  font-size:11px}
.hop-table .hop-latency {
  font-family:var(--mono);
  min-width:100px;
  position:relative;
  width:30%}
.latency-track {
  display:inline-block;
  height:4px;
  background:#739bdd;
  opacity:.5;
  border-radius:3px;
  vertical-align:middle;
  margin-left:12px;
  max-width:150px;
  min-width:2px}
.missing td {
  color:#68798e}
.detail-note {
  padding:15px 24px;
  color:var(--muted);
  font-size:11px;
  border-top:1px solid var(--border);
  margin:0}
.method summary {
  cursor:pointer;
  padding:18px 24px;
  color:#bdcce0;
  font-size:12px}
.method-content {
  padding:0 24px 20px;
  max-width:1050px;
  color:var(--muted);
  font-size:12px}
.method-content p {
  line-height:1.85;
  margin:0 0 14px}
.target-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:18px 0}
.target-item {
  background:#0e1721;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:5px}
.target-item code {
  font-family:var(--mono);
  display:block;
  color:#c8d8ed;
  margin-top:4px}
.source-links {
  display:flex;
  gap:25px}
.error-message {
  padding:14px 18px;
  border:1px solid #785c39;
  background:#312719;
  color:#f2cf9b;
  border-radius:7px;
  margin-bottom:20px}
footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:#75869b;
  font-size:10px;
  margin-top:32px}
.loading {
  min-height:250px;
  display:grid;
  place-items:center}

@media(min-width:1550px) {
  main {
  padding-top:50px}
}
@media(max-width:1000px) {
  main {
  padding:30px 20px}
.topbar {
  padding:0 20px}
.metrics>div {
  padding:18px 20px}
.panel-heading {
  padding:20px}
h1 {
  font-size:29px}
.matrix-footer {
  flex-direction:column;
  gap:8px}
.detail-metrics {
  padding:20px}
.route-chain {
  padding-left:20px}
}

@media(max-width:600px) {
  .topbar {
  height:65px;
  padding:0 16px}
.brand {
  font-size:13px;
  gap:8px}
.brand-mark {
  width:25px;
  height:25px;
  font-size:19px}
.live-status {
  font-size:10px;
  max-width:120px}
.brand-muted {
  margin-left:0}
main {
  padding:28px 14px 20px}
.page-heading {
  align-items:flex-start;
  gap:12px;
  margin-bottom:24px}
.page-heading .lede {
  font-size:12px;
  max-width:235px;
  line-height:1.8}
h1 {
  font-size:25px;
  letter-spacing:-.8px}
.eyebrow {
  font-size:8px;
  letter-spacing:1.5px}
.refresh {
  font-size:11px;
  padding:8px 9px;
  margin-top:28px}
.metrics {
  grid-template-columns:repeat(2,1fr);
  margin-bottom:20px}
.metrics>div {
  padding:17px 18px}
.metrics>div:nth-child(2) {
  border-right:0}
.metrics>div:nth-child(-n+2) {
  border-bottom:1px solid var(--border)}
.metrics p {
  font-size:26px}
.metric-label {
  font-size:11px}
.panel-heading {
  padding:17px 16px;
  flex-wrap:wrap;
  gap:14px}
.segmented {
  width:100%}
.segmented button {
  flex:1;
  padding:6px 10px}
.matrix-footer {
  padding:12px 16px}
.latency-legend {
  gap:10px;
  font-size:9px}
thead th.node-column,tbody th {
  padding-left:16px;
  min-width:145px;
  width:145px}
tbody th strong {
  font-size:11px}
.detail-metrics {
  grid-template-columns:repeat(2,1fr);
  padding:18px 16px;
  gap:19px}
.detail-metrics strong {
  font-size:21px}
.route-chain {
  padding:0 16px 18px}
.detail-note {
  padding:14px 16px}
.method summary {
  padding:17px 16px}
.method-content {
  padding:0 16px 18px}
.target-list {
  grid-template-columns:1fr 1fr;
  font-size:11px}
.target-item {
  padding:8px}
.source-links {
  flex-direction:column;
  gap:8px}
footer {
  flex-direction:column;
  gap:5px;
  margin-top:24px}
button.cell {
  min-height:73px}
.panel {
  margin-bottom:18px}
}

@media(prefers-reduced-motion:no-preference) {
  button {
  transition:background .15s ease}
.dot {
  animation:glow 3s infinite}
@keyframes glow {
  50% {
  box-shadow:0 0 10px #69d9b055}
}
}