* { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #0d1117; color: #eee; overflow: hidden; height: 100vh; }
    canvas { display: block; cursor: grab; }
    canvas:active { cursor: grabbing; }
    .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem .8rem; background: rgba(13,17,23,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid #30363d; }
    .nav h1 { font-size: .95rem; margin-right: .5rem; }
    .btn { border: 1px solid #30363d; background: rgba(255,255,255,0.06); color: #eee; padding: .3rem .6rem; border-radius: .4rem; cursor: pointer; font-size: .8rem; text-decoration: none; }
    .btn:hover { background: rgba(255,255,255,0.12); }
    .legend { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; background: rgba(13,17,23,0.95); border: 1px solid #30363d; border-radius: .5rem; padding: .6rem .8rem; font-size: .75rem; }
    .legend-row { display: flex; align-items: center; gap: .4rem; margin: .25rem 0; }
    .legend-dot { width: 12px; height: 12px; border-radius: 2px; }
    .stats { color: #888; font-size: .75rem; margin-top: .4rem; }
    .tooltip { position: fixed; z-index: 200; background: rgba(13,17,23,0.95); border: 1px solid #30363d; border-radius: .4rem; padding: .5rem .7rem; font-size: .82rem; pointer-events: none; display: none; max-width: 280px; line-height: 1.4; }
    .tooltip b { color: #eee; }
    .tooltip .domain { color: #58a6ff; }
    .tooltip .ok { color: #3fb950; font-weight: 600; }
    .tooltip .fail { color: #da6e64; font-weight: 600; }