:root{--bg:#0a0a0c;--surface:#0f0f13;--raised:#14141a;--hover:#16171d;--line:#1e1f26;--line-strong:#2b2c36;--text:#e8e8ec;--text-dim:#a4a6b0;--muted:#8b8d98;--faint:#5f616b;--accent:#6b74e0;--accent-dim:#4d54a8;--direct:#4bb98a;--proxy:#5aa9f5;--error:#ef6b6b;--warn:#d9a441;--globe-sphere:#0c0c11;--globe-land:#191a21;--globe-land-line:#3a3c48;--globe-land-hot:#565a6b;--globe-grid:#16171d;--ui:"Inter var", Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;--mono:ui-monospace, "Cascadia Mono", "JetBrains Mono", "SF Mono", Consolas, monospace;--ease:cubic-bezier(.32, .72, 0, 1)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;min-width:320px;min-height:100vh;font-size:13px}button,a{font:inherit;color:inherit}a{text-decoration:none}svg{display:block}button{cursor:pointer;background:0 0;border:none}:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{border-bottom:1px solid var(--line);background:var(--surface);z-index:5;align-items:center;gap:24px;height:60px;padding:0 24px;display:flex;position:sticky;top:0}.brand{letter-spacing:-.01em;align-items:center;gap:10px;font-size:13px;display:inline-flex}.brand strong{color:var(--text);font-weight:600}.brand__mark{place-items:center;width:24px;height:24px;display:grid;position:relative}.brand__mark i{border:1px solid var(--accent);border-radius:50%;position:absolute}.brand__mark i:first-child{width:21px;height:9px;transform:rotate(30deg)}.brand__mark i:nth-child(2){width:21px;height:9px;transform:rotate(-30deg)}.brand__mark i:nth-child(3){background:var(--text);width:4px;height:4px;box-shadow:0 0 10px var(--accent);border:0}.topbar__meta{flex:1;align-items:center;gap:18px;min-width:0;display:flex;overflow:hidden}.topbar__item{align-items:baseline;gap:6px;min-width:0;font-size:11px;display:flex}.topbar__item i{color:var(--faint);text-transform:uppercase;letter-spacing:.07em;font-size:9px;font-style:normal}.topbar__item b{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.collector{border:1px solid var(--line);color:var(--muted);letter-spacing:.1em;white-space:nowrap;border-radius:6px;padding:5px 9px;font-size:9px;font-weight:700}.collector--ebpf{color:var(--direct);border-color:color-mix(in srgb, var(--direct) 30%, transparent);background:color-mix(in srgb, var(--direct) 8%, transparent)}.collector--aggregate{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 30%, transparent)}.live-badge{border:1px solid var(--line);color:var(--text-dim);letter-spacing:.04em;background:var(--raised);white-space:nowrap;border-radius:999px;align-items:center;gap:8px;padding:6px 11px;font-size:11px;display:inline-flex}.live-badge__dot{background:var(--warn);border-radius:50%;width:6px;height:6px}.live-badge--live .live-badge__dot{background:var(--direct);animation:2s infinite livePulse}.live-badge--offline .live-badge__dot{background:var(--error)}main{flex-direction:column;flex:1;gap:14px;width:min(1280px,100% - 48px);margin-inline:auto;padding:20px 0 40px;display:flex}.notice{border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);background:color-mix(in srgb, var(--warn) 6%, transparent);color:var(--warn);border-radius:8px;padding:11px 14px;font-size:12px;line-height:1.5}.panel{border:1px solid var(--line);background:var(--surface);border-radius:12px}.eyebrow{color:var(--faint);letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px;font-size:10px;font-weight:700}h1,h2,p{margin-top:0}h2{letter-spacing:-.01em;font-size:15px;font-weight:600}.metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.metric-card{border:1px solid var(--line);background:var(--surface);border-radius:12px;align-items:flex-start;gap:14px;min-height:108px;padding:18px;display:flex}.metric-card--direct{color:var(--direct)}.metric-card--proxy{color:var(--proxy)}.metric-card--neutral{color:var(--text-dim)}.metric-card__icon{background:color-mix(in srgb, currentColor 8%, transparent);border:1px solid;border-radius:8px;flex:0 0 30px;place-items:center;height:30px;display:grid}.metric-card__icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;width:15px;height:15px}.metric-card .eyebrow{color:var(--faint);margin:1px 0 6px}.metric-card__value{font:600 21px var(--ui);color:var(--text);letter-spacing:-.02em;margin:0 0 5px}.metric-card__detail{color:var(--muted);font-size:10.5px;line-height:1.5;font-family:var(--mono);margin:0}.globe-panel{height:560px;position:relative;overflow:hidden}.globe-panel__head{z-index:3;pointer-events:none;justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:20px;left:22px;right:22px}.globe-panel__stats{gap:18px;display:flex}.globe-panel__stats span{flex-direction:column;align-items:flex-end;gap:3px;display:flex}.globe-panel__stats i{color:var(--faint);text-transform:uppercase;letter-spacing:.12em;font-size:8px;font-style:normal}.globe-panel__stats b{font:600 16px var(--ui);color:var(--text)}.globe-stage{position:absolute;inset:0}.globe{width:100%;height:100%;position:relative}.globe canvas{touch-action:none;width:100%;height:100%}.globe canvas:active{cursor:grabbing}.globe-zoom{z-index:3;border:1px solid var(--line);background:var(--raised);border-radius:8px;flex-direction:column;display:flex;position:absolute;bottom:16px;right:16px;overflow:hidden}.globe-zoom-step,.globe-zoom-reset{width:30px;height:26px;color:var(--text-dim);border-bottom:1px solid var(--line);place-items:center;font-size:13px;display:grid}.globe-zoom-reset{font-size:9px;font-family:var(--mono)}.globe-zoom-step:last-of-type{border-bottom:none}.globe-zoom-step:disabled,.globe-zoom-reset:disabled{opacity:.35;cursor:default}.globe-zoom-step:not(:disabled):hover,.globe-zoom-reset:not(:disabled):hover{background:var(--hover);color:var(--text)}.globe-key{z-index:3;color:var(--muted);white-space:nowrap;gap:16px;font-size:10px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.key-item,.globe-key .legend__dot{align-items:center;gap:7px;display:inline-flex}.globe-empty{color:var(--faint);pointer-events:none;place-items:center;font-size:11px;display:grid;position:absolute;inset:0}.globe-card{z-index:4;border:1px solid var(--line-strong);background:var(--raised);pointer-events:none;border-radius:10px;width:220px;padding:12px 14px;position:absolute;box-shadow:0 12px 32px #0006}.globe-card h4{color:var(--text);margin:0 0 2px;font-size:12px;font-weight:600}.globe-card-note{color:var(--muted);margin:0 0 8px;font-size:10px}.globe-card dl{flex-direction:column;gap:4px;display:flex}.globe-card dl div{justify-content:space-between;gap:10px;font-size:10.5px;display:flex}.globe-card dt{color:var(--faint)}.globe-card dd{color:var(--text-dim);font-family:var(--mono);text-align:right;margin:0}.legend__dot{border-radius:50%;width:6px;height:6px;display:inline-block}.legend__dot--rx{background:var(--direct);box-shadow:0 0 6px var(--direct)}.legend__dot--tx{background:var(--proxy);box-shadow:0 0 6px var(--proxy)}.overview-grid{grid-template-columns:minmax(0,2fr) minmax(240px,.8fr);gap:12px;display:grid}.panel__header{justify-content:space-between;align-items:flex-start;padding:18px 20px 0;display:flex}.chart-panel{min-height:300px;overflow:hidden}.legend{color:var(--muted);gap:16px;font-size:10px;display:flex}.chart-wrap{height:220px;padding:12px 16px 10px}.traffic-chart{width:100%;height:100%;overflow:visible}.chart-grid{stroke:var(--line);stroke-width:1px;stroke-dasharray:3 7}.chart-line{fill:none;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.chart-line--rx{stroke:var(--direct)}.chart-line--tx{stroke:var(--proxy)}.empty-chart{height:100%;color:var(--faint);flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:11px;display:flex}.empty-chart__pulse{background:linear-gradient(90deg, transparent, var(--accent), transparent);width:60%;height:1px;animation:2.2s ease-in-out infinite scan}.node-panel{padding:18px 20px}.node-panel h2{margin-bottom:20px}.node-panel__uptime{border-top:1px solid var(--line);border-bottom:1px solid var(--line);justify-content:space-between;align-items:end;padding:16px 0;display:flex}.node-panel__uptime span{color:var(--faint);text-transform:uppercase;letter-spacing:.09em;font-size:10px}.node-panel__uptime strong{font:600 21px var(--ui)}.node-panel dl{margin:14px 0 0}.node-panel dl div{justify-content:space-between;gap:12px;padding:6px 0;font-size:10.5px;display:flex}.node-panel dt{color:var(--faint)}.node-panel dd{color:var(--text-dim);text-align:right;font-family:var(--mono);margin:0}.collector-message{color:var(--muted);border-top:1px solid var(--line);margin:10px 0 0;padding-top:10px;font-size:10.5px;line-height:1.55}.routes-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.routes-panel{min-height:300px;padding-bottom:12px}.direction{letter-spacing:.09em;border-radius:6px;padding:5px 8px;font-size:9px;font-weight:700}.direction--inbound{color:var(--direct);background:color-mix(in srgb, var(--direct) 8%, transparent);border:1px solid color-mix(in srgb, var(--direct) 20%, transparent)}.direction--outbound{color:var(--proxy);background:color-mix(in srgb, var(--proxy) 8%, transparent);border:1px solid color-mix(in srgb, var(--proxy) 20%, transparent)}.route-list{margin:16px 0 0;padding:0 20px;list-style:none}.route-list li{border-top:1px solid var(--line);gap:12px;padding:10px 0;display:flex}.route-list li:first-child{border-top:none}.route-rank{color:var(--faint);font:500 10px var(--mono);padding-top:2px}.route-main{flex:1;min-width:0}.route-line,.route-meta{justify-content:space-between;gap:10px;display:flex}.route-line strong{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;overflow:hidden}.route-line span{color:var(--text-dim);font:500 10px var(--mono);white-space:nowrap}.route-track{background:var(--line);border-radius:2px;height:2px;margin:7px 0 6px;overflow:hidden}.route-track i{background:var(--proxy);height:100%;display:block}.route-track--inbound i{background:var(--direct)}.route-meta{color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-size:8.5px}.panel-empty{color:var(--faint);text-align:center;margin:60px 20px 0;font-size:11px}.visitor{align-items:center;gap:18px;padding:20px 22px;display:flex}.visitor__icon{height:40px;color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);border-radius:50%;flex:0 0 40px;place-items:center;display:grid}.visitor__icon svg{fill:none;stroke:currentColor;stroke-width:1.4px;width:18px}.visitor__copy{flex:1}.visitor__copy .eyebrow{margin-bottom:6px}.visitor__copy h2{margin-bottom:5px}.visitor__copy p:last-child{color:var(--muted);margin:0;font-size:10.5px}.privacy-pill{border:1px solid var(--line);color:var(--muted);white-space:nowrap;border-radius:999px;align-items:center;gap:7px;padding:8px 11px;font-size:9.5px;display:flex}.privacy-pill span{color:var(--direct)}.statusbar{border-top:1px solid var(--line);background:var(--surface);height:38px;color:var(--faint);align-items:center;gap:18px;padding:0 20px;font-size:10.5px;display:flex}.statusbar .spacer{flex:1}.statusbar a{color:var(--muted);text-underline-offset:3px}.statusbar a:hover{color:var(--accent)}@keyframes livePulse{50%{opacity:.4}}@keyframes scan{50%{opacity:.25;transform:scaleX(.65)}}@media (width<=1050px){.metrics-grid{grid-template-columns:repeat(2,1fr)}.overview-grid,.routes-grid{grid-template-columns:1fr}.globe-panel{height:460px}.topbar__meta{display:none}}@media (width<=720px){main{width:min(100% - 24px,1280px)}.topbar{padding:0 16px}.metrics-grid{grid-template-columns:1fr;gap:10px}.globe-panel{height:380px}.globe-panel__head{flex-direction:column;gap:10px}.globe-panel__stats{align-self:flex-start}.globe-panel__stats span{align-items:flex-start}.visitor{flex-wrap:wrap}.statusbar{flex-wrap:wrap;gap:8px;height:auto;padding:10px 16px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
