:root{--bg: #01030a;--panel: rgba(8, 15, 32, .62);--panel-border: rgba(122, 168, 255, .14);--panel-border-strong: rgba(122, 168, 255, .28);--text: #dbe7ff;--text-dim: #7d93bd;--text-faint: #51648a;--accent: #38bdf8;--accent-2: #a78bfa;--danger: #fb7185;--ok: #34d399;--mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;--sans: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif}*{margin:0;padding:0;box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,2,8,.55) 100%),linear-gradient(to bottom,rgba(0,2,8,.35),transparent 18%,transparent 78%,rgba(0,2,8,.5));z-index:1}.brand{position:fixed;top:22px;left:26px;z-index:10;pointer-events:none;user-select:none}.wordmark{font-size:15px;font-weight:700;letter-spacing:.42em;color:var(--text);text-shadow:0 0 18px rgba(56,189,248,.55)}.tagline{margin-top:3px;font-size:12px;letter-spacing:.04em;color:var(--text-dim)}.panel,.inspector,.stats,.tooltip{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px #a0c8ff0f inset,0 18px 48px #00000073}.panel{position:fixed;top:84px;left:26px;z-index:10;width:min(390px,calc(100vw - 52px));padding:14px}#input{width:100%;min-height:42px;max-height:40vh;resize:none;border:1px solid var(--panel-border);border-radius:9px;background:#02061099;color:var(--text);font-family:var(--mono);font-size:12.5px;line-height:1.5;padding:11px 12px;outline:none;transition:border-color .2s,box-shadow .2s;scrollbar-width:thin}#input:focus{border-color:var(--panel-border-strong);box-shadow:0 0 0 3px #38bdf81f}#input::placeholder{color:var(--text-faint)}.panel-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font:11px var(--mono);color:var(--text-dim);background:#3c64b41f;border:1px solid var(--panel-border);border-radius:999px;padding:4px 10px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}.chip:hover{color:var(--text);border-color:var(--panel-border-strong);background:#38bdf824}.trace{font:600 13px var(--sans);letter-spacing:.02em;color:#04101f;background:linear-gradient(135deg,#67e8f9,#38bdf8 55%,#818cf8);border:none;border-radius:9px;padding:9px 16px;cursor:pointer;white-space:nowrap;box-shadow:0 4px 18px #38bdf859;transition:transform .15s,box-shadow .15s,filter .15s}.trace:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px #38bdf880}.trace:disabled{filter:grayscale(.6) brightness(.7);cursor:wait}.trace .key{opacity:.55;font-size:11px;margin-left:4px}.status{display:flex;align-items:center;gap:8px;margin-top:10px;font:12px var(--mono);color:var(--accent)}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid rgba(56,189,248,.25);border-top-color:var(--accent);animation:spin .8s linear infinite;flex:none}@keyframes spin{to{transform:rotate(360deg)}}.error{margin-top:10px;font-size:12.5px;color:var(--danger);background:#fb718514;border:1px solid rgba(251,113,133,.25);border-radius:9px;padding:8px 11px}.stats{position:fixed;left:50%;bottom:46px;transform:translate(-50%);z-index:10;display:flex;gap:0;padding:12px 6px;animation:rise .6s cubic-bezier(.22,1,.36,1)}@keyframes rise{0%{opacity:0;transform:translate(-50%) translateY(16px)}}.stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2px 22px;min-width:108px}.stat+.stat{border-left:1px solid var(--panel-border)}.stat-value{font:600 21px/1.2 var(--mono);color:var(--text);text-shadow:0 0 16px rgba(56,189,248,.4);font-variant-numeric:tabular-nums}.stat-label{margin-top:3px;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim)}.stat-sub{display:inline-block;margin-top:2px;font:10px var(--mono);letter-spacing:0;text-transform:none;color:var(--text-faint)}.stat-flags{letter-spacing:.1em}.inspector{position:fixed;top:84px;right:26px;z-index:10;width:min(330px,calc(100vw - 52px));max-height:calc(100vh - 220px);display:flex;flex-direction:column;overflow:hidden;animation:slide .5s cubic-bezier(.22,1,.36,1)}@keyframes slide{0%{opacity:0;transform:translate(20px)}}.inspector-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--panel-border)}.inspector-title{font:600 12.5px var(--mono);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:7px;border:1px solid var(--panel-border);background:transparent;color:var(--text-dim);font-size:11px;cursor:pointer;transition:color .15s,border-color .15s}.close:hover{color:var(--text);border-color:var(--panel-border-strong)}.hops{list-style:none;overflow-y:auto;padding:8px 6px;scrollbar-width:thin;scrollbar-color:rgba(122,168,255,.25) transparent}.hop{display:flex;align-items:flex-start;gap:10px;padding:7px 9px;border-radius:9px;cursor:pointer;opacity:.42;transition:opacity .35s,background .15s;position:relative}.hop.reached{opacity:1}.hop:hover,.hop.selected{background:#38bdf81a}.hop-dot{flex:none;width:9px;height:9px;margin-top:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px currentColor}.hop:not(:last-child) .hop-dot:after{content:"";position:absolute;left:13px;top:18px;bottom:-8px;width:1px;background:linear-gradient(to bottom,#7aa8ff59,#7aa8ff14)}.hop-origin .hop-dot{background:var(--ok);color:var(--ok)}.hop-isp .hop-dot{background:#22d3ee;color:#22d3ee}.hop-exchange .hop-dot,.hop-relay .hop-dot{background:var(--accent);color:var(--accent)}.hop-transit .hop-dot{background:#818cf8;color:#818cf8}.hop-cdn .hop-dot{background:#c084fc;color:#c084fc}.hop-destination .hop-dot{background:var(--danger);color:var(--danger)}.hop.active .hop-dot{animation:ping 1s ease-out infinite}@keyframes ping{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}.hop-body{min-width:0;display:flex;flex-direction:column}.hop-label{font:500 12.5px var(--sans);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hop-sub{font-size:11px;color:var(--text-dim)}.hop-detail{border-top:1px solid var(--panel-border);padding:12px 14px;overflow-y:auto;flex:none;max-height:40%;scrollbar-width:thin}.detail-head{font:600 13px var(--sans);margin-bottom:8px;color:var(--text)}.detail-index{font:10.5px var(--mono);color:var(--text-faint);margin-right:8px}.kv{display:flex;justify-content:space-between;gap:14px;padding:3px 0;font-size:12px}.kv span:first-child{color:var(--text-faint);flex:none}.kv span:last-child{font-family:var(--mono);font-size:11.5px;color:var(--text);text-align:right;overflow-wrap:anywhere}.hop-note{margin-top:8px;font-size:11.5px;color:var(--text-dim);border-left:2px solid var(--panel-border-strong);padding-left:9px}.tooltip{position:fixed;z-index:20;pointer-events:none;padding:8px 11px;border-radius:9px;max-width:260px}.tooltip strong{display:block;font:600 12.5px var(--sans);color:var(--text)}.tooltip span{font-size:11px;color:var(--text-dim)}.foot{position:fixed;left:50%;bottom:12px;transform:translate(-50%);z-index:9;width:min(880px,calc(100vw - 40px));text-align:center;font-size:10.5px;color:var(--text-faint)}.foot code{font-family:var(--mono);font-size:10px}.loading{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);color:var(--text-dim);font-size:13px;letter-spacing:.06em;transition:opacity .6s}.loading.done{opacity:0;pointer-events:none}.loading-ring{width:44px;height:44px;border-radius:50%;border:2px solid rgba(56,189,248,.15);border-top-color:var(--accent);animation:spin 1s linear infinite}@media(max-width:900px){.stats{top:auto;position:fixed;bottom:34px;flex-wrap:wrap;justify-content:center;row-gap:8px;width:min(560px,calc(100vw - 24px))}.stat{min-width:92px;padding:2px 12px}.foot{display:none}}@media(max-width:720px){.brand{left:16px;top:14px}.panel{top:66px;left:12px;width:calc(100vw - 24px)}.inspector{inset:auto 12px 12px;width:auto;max-height:46vh}.stats{display:none}}
