:root{--bg:#0d1015;--panel:#11151bdb;--panel-solid:#12161c;--border:#ffffff14;--border-strong:#ffffff29;--text:#e6eaef;--muted:#8a94a3;--faint:#5b6573;--dns:#e5c07b;--request:#6ea8ff;--response:#7fd18b;--query:#c792ea;--health:#9aa6b5;--error:#ff6b6b;--warning:#f0b35a;--radius:10px;--dock-height:clamp(190px, 31vh, 290px);--font:"IBM Plex Sans", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;color:var(--text);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}#viewport{position:fixed;inset:0}#viewport canvas{display:block}.label-layer{pointer-events:none;position:absolute;inset:0}.device-label{white-space:nowrap;text-shadow:0 1px 3px #000c;flex-direction:column;align-items:center;gap:1px;display:flex}.device-label strong{font-size:13px;font-weight:600}.device-label span{font:10.5px var(--mono);color:var(--muted)}.device-label__badge{font:normal 500 10.5px var(--mono);color:var(--text);border:1px solid var(--border-strong);background:#12161ce6;border-radius:5px;margin-bottom:3px;padding:1px 6px}.device-label.is-down strong{color:var(--error)}.device-label.is-down .device-label__badge{color:var(--error);border-color:color-mix(in srgb, var(--error) 50%, transparent)}.device-label.is-unhealthy strong{color:var(--warning)}.device-label.is-unhealthy .device-label__badge{color:var(--warning);border-color:color-mix(in srgb, var(--warning) 50%, transparent)}.zone-label{letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap;flex-direction:column;font-size:11px;display:flex}.zone-label strong{color:var(--muted);font-weight:600}.zone-label span{text-transform:none;letter-spacing:0;font-family:var(--mono)}.packet-label{font:500 10.5px var(--mono);white-space:nowrap;color:var(--text);background:#0d1015e0;border:1px solid;border-radius:5px;padding:1px 6px}.packet-label--dns{color:var(--dns)}.packet-label--request{color:var(--request)}.packet-label--response{color:var(--response)}.packet-label--query,.packet-label--reply{color:var(--query)}.packet-label--health{color:var(--health)}.packet-label--error{color:var(--error)}.fx-note{font:500 12px var(--mono);white-space:nowrap;background:var(--panel-solid);border:1px solid var(--border-strong);transform:translateY(calc(var(--stack,0) * -26px));border-radius:6px;padding:3px 8px;animation:3.4s ease-out forwards note-rise;display:inline-block}.fx-note--error{color:var(--error);border-color:color-mix(in srgb, var(--error) 45%, transparent)}.fx-note--success{color:var(--response);border-color:color-mix(in srgb, var(--response) 45%, transparent)}.fx-note--warning{color:var(--warning);border-color:color-mix(in srgb, var(--warning) 45%, transparent)}.fx-note--info{color:var(--request);border-color:color-mix(in srgb, var(--request) 45%, transparent)}@keyframes note-rise{0%{opacity:0;translate:0 8px}12%{opacity:1;translate:0}80%{opacity:1}to{opacity:0;translate:0 -22px}}.hud{z-index:2;position:fixed}.panel,.node-panel,.actions,.caption,.devtools{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px #00000059}button{font:inherit;color:inherit}.btn,.icon-btn{border:1px solid var(--border-strong);white-space:nowrap;cursor:pointer;background:#ffffff0a;border-radius:8px;justify-content:center;align-items:center;gap:6px;height:32px;padding:0 12px;font-size:13px;font-weight:500;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.icon-btn{width:30px;height:30px;color:var(--muted);background:0 0;border-color:#0000;padding:0}.btn:hover:not(:disabled),.icon-btn:hover:not(:disabled){color:var(--text);background:#ffffff17;border-color:#ffffff3d}.btn:disabled{opacity:.4;cursor:default}.btn--primary{background:color-mix(in srgb, var(--request) 22%, transparent);border-color:color-mix(in srgb, var(--request) 55%, transparent);color:#e3eeff}.btn--primary:hover:not(:disabled){background:color-mix(in srgb, var(--request) 32%, transparent);border-color:var(--request)}.btn--danger{background:color-mix(in srgb, var(--error) 14%, transparent);border-color:color-mix(in srgb, var(--error) 45%, transparent);color:#ffd6d6}.btn--ghost{color:var(--muted);background:0 0;border-color:#0000}.status-dot{background:var(--response);width:8px;height:8px;box-shadow:0 0 6px var(--response);border-radius:50%;flex:none;display:inline-block}[data-status=unhealthy] .status-dot{background:var(--warning);box-shadow:0 0 6px var(--warning)}[data-status=down] .status-dot{background:var(--error);box-shadow:0 0 6px var(--error)}.hud-title{align-items:center;gap:16px;display:flex;top:16px;left:16px}.brand{align-items:center;gap:12px;display:flex}.brand__mark{width:40px;height:40px;color:var(--request);background:color-mix(in srgb, var(--request) 14%, var(--panel-solid));border:1px solid color-mix(in srgb, var(--request) 40%, transparent);border-radius:10px;place-items:center;display:grid}.brand h1{letter-spacing:-.01em;margin:0;font-size:18px;font-weight:600}.brand p{color:var(--muted);margin:0;font-size:12.5px}.hud-actions{gap:8px;display:flex;position:relative}.actions{align-items:center;gap:6px;padding:6px;display:flex;top:16px;left:50%;transform:translate(-30%)}.actions__sep{background:var(--border-strong);width:1px;height:20px;margin:0 2px}.panel{width:290px;max-height:calc(100% - 80px - var(--dock-height,280px) - 32px);flex-direction:column;display:flex;top:80px;right:16px;overflow:hidden}.panel__header{border:0;border-bottom:1px solid var(--border);letter-spacing:.08em;text-transform:uppercase;width:100%;color:var(--muted);cursor:pointer;background:0 0;justify-content:space-between;align-items:center;padding:11px 14px;font-size:12px;font-weight:600;display:flex}.panel__header svg{transition:transform .2s}.panel.is-collapsed .panel__header{border-bottom-color:#0000}.panel.is-collapsed .panel__header svg{transform:rotate(-90deg)}.panel.is-collapsed .panel__body{display:none}.panel__body{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;padding:2px 14px 12px;overflow-y:auto}.group{padding:10px 0 4px}.group+.group{border-top:1px solid var(--border)}.group h3{justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 8px;font-size:13px;font-weight:600;display:flex}.group h3 small{font:400 11px var(--mono);color:var(--faint)}.nodes{gap:2px;margin:0;padding:0;list-style:none;display:grid}.nodes li{align-items:center;gap:9px;min-height:34px;display:flex}.nodes__name{text-align:left;cursor:pointer;background:0 0;border:0;flex:1;padding:2px 0;font-size:13px;font-weight:500}.nodes__name:hover{color:var(--request)}.nodes__name small{font:10.5px var(--mono);color:var(--faint);display:block}.switch{cursor:pointer;flex:none;width:32px;height:18px;position:relative}.switch input{opacity:0;position:absolute}.switch span{background:#ffffff1f;border-radius:9px;transition:background .15s;position:absolute;inset:0}.switch span:after{content:"";background:#cfd6df;border-radius:50%;width:14px;height:14px;transition:transform .15s;position:absolute;top:2px;left:2px}.switch input:checked+span{background:color-mix(in srgb, var(--response) 55%, transparent)}.switch input:checked+span:after{transform:translate(14px)}.switch input:focus-visible+span{outline:2px solid var(--request)}.flag{cursor:pointer;gap:9px;margin-bottom:9px;font-size:13px;display:flex}.flag input{accent-color:var(--request);margin-top:3px}.flag strong{font-weight:500;display:block}.flag small{color:var(--faint);font-size:11.5px;display:block}.legend{color:var(--muted);grid-template-columns:1fr 1fr;gap:5px 10px;margin:0;padding:0;font-size:12px;list-style:none;display:grid}.legend i{background:var(--c);width:9px;height:9px;box-shadow:0 0 6px var(--c);border-radius:50%;margin-right:7px;display:inline-block}.node-panel{width:300px;padding:0 14px 14px;top:80px;left:16px}.node-panel__header{justify-content:space-between;align-items:flex-start;padding:12px 0 8px;display:flex}.node-panel__header strong{font-size:15px;display:block}.node-panel__header span{font:11.5px var(--mono);color:var(--muted)}.node-panel__role{color:#c3cad4;margin:0 0 10px;font-size:13px;line-height:1.5}.node-panel__status{align-items:center;gap:8px;margin:0 0 10px;font-size:12.5px;display:flex}.node-panel__stats{grid-template-columns:1fr 1fr;gap:6px;margin:0 0 12px;display:grid}.node-panel__stats div{border:1px solid var(--border);border-radius:7px;padding:6px 8px}.node-panel__stats dt{color:var(--muted);font-size:11px}.node-panel__stats dd{font:600 15px var(--mono);margin:0}.devtools{height:var(--dock-height,280px);flex-direction:column;font-size:12px;display:flex;bottom:16px;left:16px;right:16px;overflow:hidden}.devtools.is-collapsed{height:42px}.devtools.is-collapsed [data-collapse] svg{transform:rotate(180deg)}.devtools__bar{border-bottom:1px solid var(--border);align-items:center;gap:8px;min-height:41px;padding:0 6px 0 8px;display:flex}.devtools__tabs{height:100%;display:flex}.devtools__tabs button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:0 12px;font-size:12.5px}.devtools__tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--request)}.devtools__tabs .count{font:600 10.5px var(--mono);color:#fff;background:var(--error);border-radius:8px;margin-left:4px;padding:0 5px}.devtools__summary{font:11.5px var(--mono);color:var(--muted);margin-left:auto}.devtools__body{flex:1;min-height:0;display:flex}.devtools__body>section{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;flex:1;min-width:0;overflow:auto}.network{display:flex}.network__table{flex:1;min-width:0;overflow:auto}.network table{border-collapse:collapse;table-layout:fixed;width:100%;font-family:var(--mono)}.network th{text-align:left;font:500 11px var(--font);color:var(--muted);background:var(--panel-solid);border-bottom:1px solid var(--border);padding:5px 8px;position:sticky;top:0}.network th:first-child{width:18%}.network th:nth-child(2){width:11%}.network th:nth-child(3),.network th:nth-child(4),.network th:nth-child(5){width:10%}.network td{white-space:nowrap;text-overflow:ellipsis;border-bottom:1px solid #ffffff0a;padding:4px 8px;overflow:hidden}.network tbody tr{cursor:pointer}.network tbody tr:hover{background:#ffffff0a}.network tr.is-selected{background:color-mix(in srgb, var(--request) 16%, transparent)}.network tr.is-pending{color:var(--faint)}.network tr.is-failed{color:var(--error)}.waterfall{height:10px;display:flex}.wf{min-width:2px;height:10px;display:inline-block}.wf--dns{background:#3fb2a0}.wf--connect{background:#f0a35a}.wf--wait{background:#7fd18b}.wf--download{background:#6ea8ff}.wf--cache{background:#9aa6b5}.empty{color:var(--faint);font-family:var(--font);margin:16px}.network__detail{border-left:1px solid var(--border);flex:none;width:340px;padding:0 12px 12px;overflow-y:auto}.network__detail header{background:var(--panel-solid);justify-content:space-between;align-items:center;padding:6px 0;display:flex;position:sticky;top:0}.network__detail h4{color:var(--muted);margin:10px 0 4px;font-size:11.5px;font-weight:600}.network__detail dl{font-family:var(--mono);margin:0;font-size:11.5px}.network__detail dl div{gap:8px;padding:2px 0;display:flex}.network__detail dt{min-width:132px;color:var(--muted);flex:none;align-items:center;gap:6px;display:flex}.network__detail dt .wf{border-radius:2px;width:8px;height:8px}.network__detail dd{word-break:break-all;margin:0}.network__detail .total{border-top:1px solid var(--border);margin-top:3px;font-weight:600}.console,.logs{font:11.5px/1.5 var(--mono);margin:0;padding:4px 0;list-style:none}.console li,.logs li{white-space:pre-wrap;word-break:break-word;border-bottom:1px solid #ffffff0a;padding:3px 12px}.console__error{color:#ffb3b3;background:color-mix(in srgb, var(--error) 9%, transparent)}.logs span{min-width:54px;color:var(--request);margin-right:8px;display:inline-block}.logs__sql{color:var(--query)}.logs__warn{color:var(--warning)}.logs__error{color:#ffb3b3}@media (width<=1600px){.brand p{display:none}}@media (width<=1240px){.actions{left:auto;right:16px;transform:none}.panel{top:128px}.actions .btn--ghost:not([data-action=speed]){gap:0;font-size:0}}@media (width<=900px){:root{--dock-height:230px}.actions{flex-wrap:wrap;justify-content:center;top:66px;left:12px;right:12px}.actions .btn{gap:0;padding:0 10px;font-size:0}.actions__sep{display:none}.panel{width:calc(100% - 24px);top:118px;right:12px}.node-panel{z-index:3;width:calc(100% - 24px);top:118px;left:12px}.devtools{bottom:12px;left:12px;right:12px}.devtools__summary,.network__detail,.network th:nth-child(3),.network td:nth-child(3),.network th:nth-child(4),.network td:nth-child(4){display:none}}.scenario-menu{background:var(--panel-solid);border:1px solid var(--border-strong);border-radius:var(--radius);z-index:5;width:380px;max-height:min(70vh,620px);position:absolute;top:calc(100% + 8px);left:0;overflow-y:auto;box-shadow:0 18px 40px #00000080}.scenario-menu header{background:var(--panel-solid);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 14px;display:flex;position:sticky;top:0}.scenario-menu .check{color:var(--muted);cursor:pointer;align-items:center;gap:7px;font-size:12.5px;display:flex}.scenario-menu .check input{accent-color:var(--request)}.scenario-menu ol{margin:0;padding:6px;list-style:none}.scenario-menu li button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;gap:12px;width:100%;padding:10px;display:flex}.scenario-menu li button:hover,.scenario-menu li button:focus-visible{background:#ffffff0d}.scenario-menu__index{font:600 12px var(--mono);color:var(--request);padding-top:2px}.scenario-menu li strong{font-size:13.5px;font-weight:600;display:block}.scenario-menu li small{color:var(--muted);margin-top:2px;font-size:12px;line-height:1.4;display:block}.caption{bottom:calc(var(--dock-height) + 28px);border-color:color-mix(in srgb, var(--request) 35%, transparent);z-index:3;width:min(720px,100% - 644px);min-width:440px;padding:12px 16px;left:50%;transform:translate(-50%)}.caption__meta{letter-spacing:.06em;text-transform:uppercase;color:var(--request);justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;font-size:11.5px;font-weight:600;display:flex}.caption__progress{gap:4px;display:flex}.caption__progress i{background:#ffffff1f;border-radius:2px;width:16px;height:3px}.caption__progress i.is-done{background:color-mix(in srgb, var(--request) 55%, transparent)}.caption__progress i.is-current{background:var(--request)}.caption__text{margin:0;font-size:14.5px;line-height:1.5}.caption__text.is-entering{animation:.35s ease-out caption-in}.caption__actions{justify-content:flex-end;gap:6px;margin-top:8px;display:flex}.caption__actions .btn{height:28px}@keyframes caption-in{0%{opacity:0;translate:0 4px}}@media (width<=1240px){.caption{width:auto;min-width:0;left:16px;right:322px;transform:none}}@media (width<=900px){.scenario-menu{width:auto;position:fixed;top:64px;left:12px;right:12px}.caption{left:12px;right:12px;bottom:calc(var(--dock-height) + 20px)}.caption__text{font-size:13.5px}}