.controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--border);background:var(--bg-panel);flex-wrap:wrap}.controls-brand{display:flex;align-items:center;gap:14px;min-width:0}.controls-dot{width:12px;height:12px;border-radius:999px;background:var(--muted);box-shadow:0 0 0 3px color-mix(in oklab,var(--muted) 20%,transparent)}.controls-dot[data-status=connected]{background:var(--success);box-shadow:0 0 0 3px color-mix(in oklab,var(--success) 25%,transparent);animation:pulse 2s ease-in-out infinite}.controls-dot[data-status=connecting]{background:var(--accent);animation:pulse 1s ease-in-out infinite}.controls-dot[data-status=paused]{background:var(--warning)}.controls-dot[data-status=error]{background:var(--danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.controls-title h1{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}.controls-subtitle{margin:2px 0 0;font-size:12.5px;color:var(--muted)}.controls-subtitle code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:1px 5px;border-radius:4px;background:var(--bg-code);color:var(--fg);font-size:11.5px}.controls-status{color:var(--fg);font-weight:500}.controls-error{color:var(--danger)}.controls-actions{display:flex;gap:8px;flex-wrap:wrap}.controls-btn{font:inherit;font-size:13px;font-weight:500;color:var(--fg);background:var(--accent);border:1px solid transparent;border-radius:8px;padding:8px 14px;cursor:pointer;transition:background .15s ease,transform .05s ease,border-color .15s ease}.controls-btn:hover{background:color-mix(in oklab,var(--accent) 85%,white 15%)}.controls-btn:active{transform:translateY(1px)}.controls-btn-ghost{background:transparent;border-color:var(--border);color:var(--fg)}.controls-btn-ghost:hover{background:var(--bg-code)}.rate-chart{width:100%;height:64px;background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:0;overflow:hidden}.rate-chart svg{display:block;width:100%;height:100%}.sidebar{display:flex;flex-direction:column;gap:16px;width:360px;min-width:300px;max-width:420px;padding:16px;background:var(--bg-panel);border-left:1px solid var(--border);overflow:hidden}.sidebar-section{display:flex;flex-direction:column;gap:10px}.sidebar-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.sidebar-search{position:relative}.sidebar-search input{width:100%;box-sizing:border-box;padding:9px 30px 9px 12px;background:var(--bg-code);border:1px solid var(--border);border-radius:8px;color:var(--fg);font:inherit;font-size:13px;transition:border-color .15s ease}.sidebar-search input:focus{outline:none;border-color:var(--accent)}.sidebar-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}.sidebar-search-clear:hover{color:var(--fg);background:var(--bg-code)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:10px 12px}.stat-value{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg)}.stat-label{font-size:11px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.05em}.stats-footnote{font-size:11px;color:var(--muted);text-align:right;margin-top:4px}.sidebar-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border)}.tab{font:inherit;font-size:13px;background:transparent;border:0;border-bottom:2px solid transparent;padding:8px 12px;color:var(--muted);cursor:pointer;margin-bottom:-1px}.tab-active{color:var(--fg);border-bottom-color:var(--accent)}.sidebar-empty{color:var(--muted);font-size:13px;padding:16px 8px;text-align:center}.event-log{list-style:none;padding:0;margin:0;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:6px}.event{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:8px 10px}.event-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:11.5px}.event-time{color:var(--muted);font-variant-numeric:tabular-nums}.event-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.event-body{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.4;color:var(--fg);background:transparent;white-space:pre-wrap;word-break:break-all;max-height:140px;overflow:auto}.legend{font-size:13px;color:var(--fg);display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding-right:4px}.legend-intro{margin:0;color:var(--muted);line-height:1.5}.legend ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.legend li{display:flex;align-items:center;gap:10px}.legend-swatch{width:16px;height:16px;border-radius:4px;border:1px solid var(--border)}.legend-hint{color:var(--muted);line-height:1.5;margin:0}.legend code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:var(--bg-code);padding:1px 5px;border-radius:4px}.tree-view{width:100%;height:100%;overflow:auto;padding:24px;background:radial-gradient(circle at 0% 0%,color-mix(in oklab,var(--accent) 6%,transparent),transparent 60%),var(--bg-canvas);border-radius:12px;border:1px solid var(--border)}.tree-view svg{display:block;min-width:100%;min-height:100%}.node{cursor:pointer}.node-rect{stroke:color-mix(in oklab,#000 35%,transparent);stroke-width:1.2;filter:drop-shadow(0 2px 6px color-mix(in oklab,#000 40%,transparent));transition:fill .3s ease,stroke .3s ease}.node-rect.collapsed{stroke:var(--accent);stroke-width:2.5}.node-rect.pinged{stroke:var(--ping-color);stroke-width:3;filter:drop-shadow(0 0 10px var(--ping-color)) drop-shadow(0 2px 6px color-mix(in oklab,#000 40%,transparent))}.node-body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#f8fafc;font-size:12px;line-height:1.25;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:4px;pointer-events:none}.node-name{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}.node-meta{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;opacity:.9}.node-payloads{font-variant-numeric:tabular-nums;font-weight:700;background:#00000040;padding:1px 6px;border-radius:999px}.node-last{font-variant-numeric:tabular-nums;opacity:.85}.link{fill:none;stroke:var(--link-color);stroke-width:2;stroke-linecap:round;opacity:.7}.app{display:flex;flex-direction:column;height:100vh;background:var(--bg);color:var(--fg)}.app-body{flex:1;display:flex;min-height:0}.app-main{flex:1;display:flex;padding:16px;min-width:0}.app-footer{padding:10px 20px;border-top:1px solid var(--border);background:var(--bg-panel);font-size:12px;color:var(--muted);text-align:center}.app-footer a{color:var(--accent);text-decoration:none}.app-footer a:hover{text-decoration:underline}@media (max-width: 960px){.app-body{flex-direction:column}.sidebar{width:100%;max-width:unset;min-width:0;border-left:0;border-top:1px solid var(--border);max-height:45vh}}:root{color-scheme:dark}[data-theme=dark]{--bg: #0b1020;--bg-panel: #0f172a;--bg-canvas: #090e1c;--bg-code: #141b30;--fg: #e2e8f0;--muted: #94a3b8;--border: #1f2a44;--accent: #60a5fa;--success: #34d399;--warning: #f59e0b;--danger: #f87171;--ping-color: #fde68a;--link-color: #334155;--node-level-0: #1d4ed8;--node-level-1: #0891b2;--node-level-2: #16a34a;--node-level-3: #d97706;--node-level-4: #7c3aed}[data-theme=light]{color-scheme:light;--bg: #f8fafc;--bg-panel: #ffffff;--bg-canvas: #f1f5f9;--bg-code: #eef2f7;--fg: #0f172a;--muted: #64748b;--border: #e2e8f0;--accent: #2563eb;--success: #16a34a;--warning: #d97706;--danger: #dc2626;--ping-color: #f59e0b;--link-color: #cbd5e1;--node-level-0: #2563eb;--node-level-1: #0891b2;--node-level-2: #15803d;--node-level-3: #d97706;--node-level-4: #7c3aed}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;width:100%}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--muted) 40%,transparent);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:color-mix(in oklab,var(--muted) 60%,transparent)}