@font-face{font-family:Haffer;src:url('/network-haffer.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:'DM Mono';src:url('/network-mono.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--ink:#111;--muted:#777;--line:#dedede}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:Haffer,Arial,sans-serif}header,main,footer{width:calc(100% - 112px);max-width:1440px;margin:auto}header{height:140px;display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{display:flex;align-items:center;gap:3px;color:#050505;text-decoration:none;font-size:36px;letter-spacing:8px}.wordmark svg{width:26px;height:30px;fill:none;stroke:currentColor;stroke-width:2.3}.wordmark span{line-height:1}.section-label,.chart-caption,footer,.scope{font:12px 'DM Mono',monospace;color:var(--muted)}section{padding:24px 0 60px}section+section{border-top:1px solid #eee;padding-top:44px}.section-label{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}h1,h2{font:inherit;font-size:15px;margin:0;color:#444}.scope{display:flex;gap:18px}button,select{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.scope button{padding:7px 0;border-bottom:1px solid transparent}.scope button[aria-pressed=true]{color:#111;border-color:#111}.chart-controls{display:flex;align-items:center;gap:24px;flex-wrap:wrap}label{display:flex;align-items:center;gap:10px;min-width:0}select{border-bottom:1px solid #bbb;padding:5px 0;max-width:240px;min-width:0}select:disabled{opacity:.5;cursor:default}.chart-wrap{position:relative;height:380px}.chart-wrap svg{display:block;width:100%;height:100%;overflow:visible}.chart-caption{display:flex;justify-content:space-between;gap:20px;margin:12px 0 0 44px}.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#999;text-align:center;pointer-events:none}.empty[hidden]{display:none}.chart-tip{position:absolute;left:44px;right:0;top:8px;width:fit-content;max-width:calc(100% - 44px);overflow-wrap:anywhere;background:#fff;border:1px solid #aaa;padding:10px;pointer-events:none;font:12px 'DM Mono',monospace;color:#111}.chart-tip[hidden]{display:none}footer{border-top:1px solid #ddd;padding:24px 0 42px;display:flex;justify-content:space-between;gap:18px}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}svg text{font:12px 'DM Mono',monospace;fill:#777}.chart-hit{fill:transparent;cursor:crosshair}.chart-point{fill:#fff;stroke:#111;stroke-width:2}button:focus-visible,a:focus-visible,select:focus-visible,.chart-hit:focus-visible{outline:2px solid #111;outline-offset:4px}
@media(max-width:1100px){.section-label{align-items:flex-start;flex-direction:column}.chart-controls{width:100%}}
@media(max-width:700px){header,main,footer{width:calc(100% - 48px)}header{height:110px}.wordmark{font-size:29px;letter-spacing:6px}.wordmark svg{width:23px}.scope{gap:12px;font-size:10px}section{padding-top:15px;padding-bottom:42px}section+section{padding-top:32px}h1,h2{font-size:13px}.chart-controls{gap:14px;font-size:10px;flex-direction:column;align-items:stretch}.chart-controls label{justify-content:space-between}.chart-controls select{max-width:calc(100% - 80px)}.section-label>label{font-size:10px;max-width:100%}.section-label>label select{max-width:calc(100% - 60px)}.chart-wrap{height:300px}.chart-caption{font-size:10px;margin-left:0;flex-direction:column;gap:7px}.chart-tip{font-size:10px}footer{font-size:10px;flex-wrap:wrap}#connection{order:3;width:100%}}
.chart-controls{min-width:0;max-width:100%}.chart-controls label{max-width:100%}.chart-controls select{width:240px}@media(max-width:700px){.chart-controls label{width:100%}.chart-controls select{width:calc(100% - 90px)}}