:root { --bg:#f6f7f9; --card:#fff; --fg:#1b1f24; --mute:#5f6b7a; --line:#d9dee5; --ok:#1a7f37; --okbg:#e6f4ea; --bad:#b42318; --badbg:#fdecea; --acc:#2557d6; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1216; --card:#171b21; --fg:#e6e9ee; --mute:#9aa4b2; --line:#2a313b; --ok:#4ac26b; --okbg:#12261a; --bad:#ff7b72; --badbg:#2d1414; --acc:#7aa2ff; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
main { max-width:980px; margin:0 auto; padding:24px 16px 48px; }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:16px; margin:28px 0 10px; }
.sub { color:var(--mute); margin:0 0 20px; }
nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
nav a { color:var(--acc); text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:4px 10px; background:var(--card); font-size:13px; }
.banner { border-radius:8px; padding:12px 14px; font-weight:600; margin-bottom:20px; }
.banner.ok { background:var(--okbg); color:var(--ok); } .banner.bad { background:var(--badbg); color:var(--bad); }
.flow { display:flex; flex-wrap:wrap; align-items:stretch; gap:6px; }
.hop { flex:1 1 150px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; min-width:0; }
.hop b { display:block; font-size:13px; margin-bottom:4px; }
.hop span { display:block; color:var(--mute); font-size:12px; overflow-wrap:anywhere; }
.arrow { align-self:center; color:var(--mute); font-size:18px; }
@media (max-width:700px) { .arrow { width:100%; text-align:center; transform:rotate(90deg); } }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
td { padding:7px 10px; border-top:1px solid var(--line); vertical-align:top; font-size:13px; overflow-wrap:anywhere; }
tr:first-child td { border-top:0; } td:first-child { color:var(--mute); width:34%; white-space:nowrap; }
code { font:12px ui-monospace,SFMono-Regular,Menlo,monospace; }
ul.paths { padding-left:18px; } ul.paths li { margin:4px 0; }
footer { margin-top:32px; color:var(--mute); font-size:12px; }